@charset "utf-8";

/* CSS Document */

.nosp {
  display: none;
}

main {
  width: 100%;
}

main * {
  box-sizing: border-box;
}

/* common */
:root {
  /* bg MV */
  --mv__oka_bg: url(../okinawa/img/bg_okinawa_pc.jpg);
  /* icon img */
  --icon__arrow_down: url(/cmn/icon/icon_arrow_down_white.svg);
  --icon__arrow_right: url(/cmn/icon/icon_arrow_right_white.svg);
  --icon__arrow_right2: url(../images/icon_arrow_right_cyan.svg);
  --icon__launch: url(/cmn/icon/icon_launch_blue.svg);
  /* color */
  --color__0: #fff;
  --color__1: #00a0c9;
  --color__2: #e34476;
  --color__3: #93e9ff;
  --color__4: #ccc;
  --color__5: #f6f6f6;
  --color__6: #F01C1C;
  --color__7: #666;
  --color__8: #333;
  --dblue: #1558d6;
  /* font */
  --ft__weight: 900;
  --ft__size22: calc(22vw / (750 / 100));
  --ft__size24: calc(24vw / (750 / 100));
  --ft__size28: calc(28vw / (750 / 100));
  --ft__size32: calc(32vw / (750 / 100));
  --ft__size42: calc(42vw / (750 / 100));
}

section:not(.mv__container) {
  width: 100%;
  padding: calc(60vw / (750 / 100)) 0;
}

.inner__box {
  width: 94vw;
  margin: 0 auto;
}

.flex__box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  -ms-flex-wrap: wrap;
}

.ft--weight {
  font-weight: var(--ft__weight);
}

.ft--color {
  color: var(--color__6);
}

.icon--notice {
  font-size: var(--ft__size22);
  padding-left: 1em;
  position: relative;
}
.icon--notice.txt-red{
  color: #e90000;
}

.icon--notice::before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}


.icon--notice>a {
  text-decoration: underline;
  color: var(--color__1);
  margin-left: calc(5vw / (750 / 100));
}

.icon--notice>a:hover {
  text-decoration: none;
}

.icon--notice>a::after {
  display: inline-block;
  content: "";
  width: calc(14vw / (750 / 100));
  height: calc(14vw / (750 / 100));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: var(--icon__launch);
  margin-right: calc(5vw / (750 / 100));
  vertical-align: middle;
}

.new--line {
  display: block;
  font-size: var(--ft__size22);
}

.__underline {
  border-bottom: 1px dotted var(--color__7);
  margin-bottom: 10px;
}

/* nav__container */
.nav__container {
  background-color: var(--color__1);
}

.nav__box {
  width: 100%;
  margin: auto;
}

.nav__box>li {
  width: calc(100% / 3);
  text-align: center;
  border-right: calc(2vw / (750 / 100)) solid var(--color__0);
}

.nav__box>li:nth-child(3) {
  border-right: none;
}

.nav__box>li a {
  width: 100%;
  display: block;
  transition: all 0.3s;
  color: var(--color__0);
  font-size: var(--ft__size24);
  font-weight: var(--ft__weight);
  padding: calc(20vw / (750 / 100)) 0;
}

.nav__box>li:hover a {
  background-color: var(--color__3);
}

.nav__box>li a::after {
  content: "";
  display: inline-block;
  background-image: var(--icon__arrow_down);
  background-size: cover;
  background-repeat: no-repeat;
  width: calc(26vw / (750 / 100));
  height: calc(20vw / (750 / 100));
  margin-left: calc(10vw / (750 / 100));
}

.nav__box>li:last-child a::after {
  background-image: var(--icon__arrow_right);
}

/* info__container */
section.info__container {
  padding: calc(60vw / (750 / 100)) 0 0;
}

.campaign__title {
  font-size: var(--ft__size42);
  font-weight: var(--ft__weight);
  text-align: center;
  margin-bottom: calc(10vw / (750 / 100));
}
.special-copy{
  margin-bottom: calc(20vw / 7.5);
  text-align: center;
  font-size: calc(30vw/ 7.5);
  font-weight: bold;
  color: #e90000;
}

.lead__copy {
  width: 90vw;
  font-size: var(--ft__size24);
  margin: 0 auto calc(30vw / (750 / 100));
}

.discount__content {
  border: 2px dashed var(--color__1);
  padding: calc(15vw / (750 / 100)) 0 calc(12vw / (750 / 100));
}

.discount__data {
  font-size: var(--ft__size32);
  font-weight: var(--ft__weight);
  text-align: center;
}

.discount__data>span {
  display: block;
  font-size: var(--ft__size24);
  font-weight: normal;
}

/* content__container */

.content__container h2,
.content2__container h2 {
  font-size: var(--ft__size32);
  text-align: center;
  border-bottom: calc(2vw / (750 / 100)) solid var(--color__2);
  padding-bottom: calc(10vw / (750 / 100));
  margin-bottom: calc(30vw / (750 / 100));
}

.detail__content {
  padding: calc(10vw / (750 / 100));
}

.detail__box {
  border: calc(2vw / (750 / 100)) solid var(--color__4);
  border-bottom: none;
  font-size: var(--ft__size24);
}

.detail__box:last-child {
  border-bottom: calc(2vw / (750 / 100)) solid var(--color__4);
}

.detail__item--1 {
  width: 6em;
  flex-shrink: 0;
  padding: calc(10vw / (750 / 100));
  background-color: var(--color__5);
  font-size: var(--ft__size24);
}

.detail__item--2 {
  flex: 1;
  padding: calc(10vw / (750 / 100));
  font-size: var(--ft__size24);
}

.detail__item--box>li {
  margin-bottom: calc(5vw / (750 / 100));
}

.detail__item--box>li:last-child {
  margin-bottom: 0;
}

.detail__item--box>li a{
  color: var(--dblue);
  text-decoration: underline
}

.coupon__link {
  margin: calc(10vw / (750 / 100)) auto;
}

.coupon__link>a {
  display: block;
  border: calc(2vw / (750 / 100)) solid var(--color__7);
  border-radius: calc(30vw / (750 / 100));
  padding: calc(10vw / (750 / 100)) calc(30vw / (750 / 100));
  text-align: center;
  box-sizing: border-box;
  position: relative;
  color: var(--color__8);
  font-size: var(--ft__size22);
}

.coupon__link>a::after {
  content: "";
  background-image: var(--icon__arrow_right2);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: calc(24vw / (750 / 100));
  height: calc(24vw / (750 / 100));
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3%;
  margin: auto;
}

.coupon__link>a:hover {
  opacity: .7;
  background-color: var(--color__4);
}

/* tour__container */
.tour__container h2 {
  font-size: var(--ft__size42);
  font-weight: var(--ft__weight);
  text-align: center;
}
.price-note{
  font-size: calc(36vw / 7.5);
  font-weight: var(--ft__weight);
  color: #e90000;
  text-align: center;
}
.price-note>span{
  display: block;
  font-size: calc(26vw / 7.5);
  font-weight: normal;
  color: #000
}
.price-note .coupon-caution{
  display: block;
  font-size: calc(26vw / 7.5);
  font-weight: var(--ft__weight);
  color: #e90000;
  text-align: center;
}
.price-note>a{
  display: block;
  font-size: calc(28vw / 7.5);
  color: var(--dblue);
  text-decoration: underline;
}
.target-mark{
  padding: calc(12vw / 7.5);
  margin: calc(30vw / 7.5) auto;
  background: #ECF2FD;
}
.target-txt{
  font-size: calc(26vw / 7.5);
  font-weight: bold;
  text-align: center;
}
.shien-icon{
  background: #F2F2F2;;
  font-weight: normal;
  color: #000;
  display: inline-block;
  margin: 0 calc(6vw / 7.5);
  padding: calc(6vw / 7.5);
}
.target-txt>a{
  display: block;
  font-size: calc(24vw / 7.5);
  font-weight: normal;
  color: var(--dblue);
  text-decoration: underline;
  margin-top: calc(6vw / 7.5)
}

.tour__container h3 {
  font-size: var(--ft__size32);
  font-weight: var(--ft__weight);
  text-align: center;
  margin-bottom: calc(20vw / (750 / 100));
}



.tour__container h3>span {
  width: 100%;
  display: inline-block;
  position: relative;
  padding: 0 calc(150vw / (750 / 100));
}
.tour__container h3.usj>span{
  padding: 0 calc(50vw / (750 / 100));
}

.tour__container h3>span::before,
.tour__container h3>span::after {
  content: "";
  width: calc(140vw / (750 / 100));
  height: calc(2vw / (750 / 100));
  position: absolute;
  top: 50%;
  background-color: var(--color__8);
}
.tour__container h3.usj>span::before,
.tour__container h3.usj>span::after{
  width: calc(60vw / (750 / 100));
}

.tour__container h3>span::before {
  left: 0;
}

.tour__container h3>span::after {
  right: 0;
}

.tour__tab--area {
  display: flex;
  flex-wrap: wrap;
  margin: calc(30vw / (750 / 100)) auto;
}

.tour__tab--area>li {
  color: var(--color__1);
  width: calc(97% / 3);
  /*height: calc(90vw / 7.5);*/
  margin-right: 1%;
  margin-bottom: calc(10vw / (750 / 100));
  padding: calc(10vw / 7.5);
  border: calc(2vw / (750 / 100)) solid var(--color__1);
  background: #FFF;
  font-size: calc(26vw / 7.5);
  /*letter-spacing: -0.075em;*/
  font-weight: var(--ft__weight);
  text-align: center;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center
}
.tour__tab--area>li>small{
  font-size: calc(22vw / 7.5);
  display: block;
}

.tour__tab--area li:nth-child(3n) {
  margin-right: 0;
}

/* .tour__tab--area>li::after {
  content: "";
  background-image: var(--icon__arrow_right);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(20vw / (750 / 100));
  height: calc(20vw / (750 / 100));
  position: absolute;
  top: 0;
  right: calc(5vw / (750 / 100));
  bottom: 0;
  margin: auto;
} */

.tour__tab--area>li.nav_on,
.tour__tab--area>li:hover {
  background-color: var(--color__1);
  color: #FFF
}

.item-txt__port {
  color: var(--color__0);
}

.area00 {
  display: none;
}

.other__link {
  width: 94vw;
  margin: calc(50vw / (750 / 100)) auto 0;
}

.other__link>a {
  display: block;
  border: 2px solid;
  font-size: var(--ft__size24);
  font-weight: var(--ft__weight);
  color: var(--color__1);
  text-align: center;
  border-radius: 10px;
  background-color: var(--color__0);
  position: relative;
  line-height: calc(40vh / (750 / 100));
  transition: 0.3s;
}

.other__link>a::after {
  content: "";
  background-image: var(--icon__arrow_right2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: calc(34vw / (750 / 100));
  height: calc(34vw / (750 / 100));
  position: absolute;
  top: 0;
  right: 3%;
  bottom: 0;
  margin: auto;
}

.other__link>a:hover {
  background-color: var(--color__1);
  color: var(--color__0);
}

.other__link>a:hover::after {
  background-image: var(--icon__arrow_right);
}

/* content2__container */
.other__area--list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.other__area--item {
  width: calc(295vw / (750 / 100));
  position: relative;
  margin: 0 calc(20vw / (750 / 100)) calc(20vw / (750 / 100)) 0;
  padding-left: calc(40vw / (750 / 100));
}

.other__area--item:nth-child(2n) {
  margin-right: 0;
}

.other__area--item::before,
.other__area--item::after {
  position: absolute;
  content: '';
}

.other__area--item::before {
  width: calc(30vw / (750 / 100));
  height: calc(30vw / (750 / 100));
  top: calc(2vw / (750 / 100));
  left: 0;
  border-radius: 50%;
  background-color: var(--color__4);
}

.other__area--item::after {
  left: calc(9.5vw / (750 / 100));
  width: calc(6vw / (750 / 100));
  height: calc(6vw / (750 / 100));
  top: calc(13vw / (750 / 100));
  border-top: calc(2vw / (750 / 100)) solid var(--color__0);
  border-right: calc(2vw / (750 / 100)) solid var(--color__0);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.other__area--item>a:hover {
  text-decoration: underline;
}

.banner__area--list li {
  width: calc(100% / 2 - calc(10vw / (750 / 100)));
  margin-bottom: calc(20vw / (750 / 100));
}

.banner__area--list li:nth-last-child(-n+2) {
  margin-bottom: 0;
}

.banner__area--list li>a:hover {
  opacity: .7;
}

.soldout-txt{
  margin: calc(20vw / (750 / 100)) auto;
  font-size: calc(40vw / (750 / 100));
  font-weight: bold;
  color: #e90000;
  text-align: center
}
.special-notice{
  margin: calc(20vw / (750 / 100)) auto;
  font-size: calc(30vw / (750 / 100));
  font-weight: bold;
  color: #e90000;
  text-align: center
}
.js-urgent-msg{
  width: 94vw;
  margin: calc(50vw / 7.5) auto;
  background: #fff5f5;
  border: 1px solid #ff8181;
  padding: calc(20vw / 7.5);
  font-weight: bold;
}
.js-urgent-msg p+p{
  margin-top: calc(10vw / 7.5);
}

.product-list.card-style>li .product-list__item .item-photo__wrapper .item-txt__port{
  position: static;
  color: #333;
  background: none;
  top: auto;
  bottom: auto;
  left: auto;
}
.product-list.card-style>li .product-list__item .item-photo__wrapper .item-txt__port .port-type{
  color: #333!important;
  font-size: calc(24vw / 7.5);
}

/***** DP導線 *****/
.dp-linkwrap{
  width: 94vw;
  margin: calc(40vw / 7.5) auto 0;
}
.dp-link>a{
  display: block;
  border-radius: calc(20vw / 7.5);
  background: var(--dblue);
  padding: calc(30vw / 7.5) calc(10vw / 7.5);
  margin-bottom: calc(20vw / 7.5);
  font-size: calc(26vw / 7.5);
  font-weight: 700;
  color: #FFF;
  text-align: center;
  transition: 0.3s;
  position: relative
}
.dp-link>a::after{
  content: "";
  background: var(--icon__arrow_right) no-repeat center center / contain;
  width: calc(48vw / 7.5);
  height: calc(48vw / 7.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto
}
.dp-link>a:hover{
  background: var(--color__1);
}

.dp-object>span{
  width: 100%;
  font-size: calc(26vw / 7.5);
  font-weight: bold;
  display: inline-block;
  text-align: center;
}
.dp-object>span::before{
  content: "";
  background: url("../images/ico_zenkoku_shien.png") no-repeat center center / contain;
  width: calc(150vw / 7.5);
  height: calc(42vw / 7.5);
  display: inline-block;
  vertical-align: middle;
  margin-right: calc(10vw / 7.5)
}

/***** 商品JSON調整用 *****/

.product-list.card-style>li.port-arrange .product-list__item .item-photo__wrapper .item-txt__port .port-type::after{
  content: "発】";
  display: inline-block;
}
.product-list.card-style.hotel-part>li>a{
  pointer-events: none;
}
.product-list.card-style.hotel-part>li.link-up>a{
  pointer-events: auto!important
}
.product-list+.sub_tour{
  margin-top: calc(80vw / 7.5);
}

.item-label.apr_icon{
  position: static;
}
.item-label.apr_icon::after{
  content: "4月以降も対象";
  background: var(--dblue);
  font-size: calc(24vw / 7.5);
  font-weight: bold;
  color: #FFF;
  text-align: center;
  display: block;
  margin-top: calc(10vw / 7.5);
  padding: calc(4vw / 7.5)
}

/*** レンタカー注意文言 ***/
.notice-rentacar{
  background: #FFF5F5;
  border: 1px solid #FF8181;
  padding: calc(16vw / 7.5);
  margin-bottom: calc(50vw / 7.5)
}
.rentacar-midashi{
  font-size: calc(28vw / 7.5);
  font-weight: bold;
  text-align: center;
  color: #ff0000;
  margin-bottom: calc(1vw / 7.5);
}
.rentacar-txt{
  text-align: center;
}
.rentacar-txt>a{
  display: block;
  color: var(--dblue);
  text-decoration: underline;
}
.rentacar-txt>a:hover{
  text-decoration: none
}

.sashikomi{
  margin: calc(30vw / 7.5) auto;
  text-align: center;
}
.sashikomi>a{
  display: block;
}
.sashikomi>a:hover{
  opacity: 0.8
}

.js-april-msg{
  width: 94vw;
  margin: 0 auto calc(30vw / 7.5);
}
.js-april-msg>p{
  text-align: center;
}
.js-april-msg>p .main{
  font-size: calc(48vw / 7.5);
  font-weight: var(--ft__weight);
  color: #e90000;
  background: linear-gradient(transparent 80%, #fff330 80%);
  margin: 0 calc(6vw / 7.5);
}
.js-april-msg>p .start-txt{
  display: block;
  font-size: calc(30vw / 7.5);
  font-weight: var(--ft__weight);
  color: #e90000;
}
.js-april-msg>p .condition{
  display: block;
  font-size: calc(24vw / 7.5);
  font-weight: normal;
  color: #000;
}
.js-april-msg>p .condition .apr_icon{
  background: var(--dblue);
  font-size: calc(24vw / 7.5);
  font-weight: bold;
  color: #FFF;
  text-align: center;
  display: inline-block;
  margin-top: calc(10vw / 7.5);
  padding: calc(4vw / 7.5);
  margin-right: calc(6vw / 7.5);
}
.js-april-msg+.tour__container{
  padding-top: 0!important
}