@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Open+Sans:ital,wght@0,700;1,700&display=swap");

:root {
  --default-color-ovs: #11a4f7;
  --default-color-dom: #0abe01;
  --default-color-hatsu: #f72b01;
  --default-color-stu: #8e469c;
  --default-color-ec: #a56bd0;
  --default-color-brown: #3f2401;
  --default-color-red: #e50012;
  --default-color-blue: #1a0dab;
  --default-color-yellow: #ffe600;
  --default-color-gray: #a8a8a8;
  --default-color-pink: #e63d76;
  --bg-color-ovs: #e2f3fd;
  --bg-color-dom: #e0fcd3;
  --bg-color-ec: #ecdff5;
  --bg-color-gray: #f2f2f2;
  --bg-color-hatsu: #fee5e0;
  --font-size-sp: calc(24vw / 7.5);
  --cotent-width: min((710vw / 7.5), 992px);
  --img-arrow-down: url("/cmn/icon/icon_arrow_down.svg");
  --img-arrow-right: url("/cmn/icon/icon_arrow_right_black.svg");
  --img-arrow-right_wt: url("/cmn/icon/icon_arrow_right_white.svg");
  --img-copy: url("/cmn/icon/icon_copy.svg");
  --bg-img-setting: no-repeat center center / cover;
  --bg-shadow: 0 0 4px var(--default-color-gray);
  --bg-button-shadow: 0px 3px 0px 0px rgba(0 0 0 / 23%);
  --content-hover-speed: 0.3s;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: var(--font-size-sp);
  line-height: calc(20 / 14);
}
a {
  text-decoration: none;
  color: #333;
}
.nosp {
  display: none;
}
.inner {
  width: var(--cotent-width);
  margin: auto;
}

.mv__wrapper {
  width: 100%;
  height: calc(366vw / 7.5);
  background: url("../img/mv_photo_sp.jpg") no-repeat center center / 100vw;
  position: relative;
}
.title-logo img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.main__content {
  padding: calc(80vw / 7.5) 0;
}

/*** 海外・国内タブ ***/
.select-tab {
  display: flex;
  align-items: center;
  margin: 0 auto calc(40vw / 7.5);
  gap: calc(32vw / 7.5);
}
.select-tab > li {
  width: calc((100% - (32vw / 7.5)) / 2);
  border-radius: calc(16vw / 7.5);
  font-size: calc(40vw / 7.5);
  font-weight: 700;
  color: #fff;
  padding: calc(10vw / 7.5) 0;
  text-align: center;
  position: relative;
  background: var(--default-color-gray);
  transition: background var(--content-hover-speed);
}
.select-tab > li.is-ovs:hover {
  background: var(--default-color-ovs);
}
.select-tab > li.is-dom:hover {
  background: var(--default-color-dom);
}
.select-tab > li.active.is-ovs {
  background: var(--default-color-ovs);
  padding: calc(16vw / 7.5) 0;
}
.select-tab > li.active.is-dom {
  background: var(--default-color-dom);
  padding: calc(16vw / 7.5) 0;
}
.select-tab > li.active.is-dom::after,
.select-tab > li.active.is-ovs::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  bottom: calc(-32vw / 7.5);
  left: 0;
  margin: auto;
  border: calc(20vw / 7.5) solid transparent;
}
.select-tab > li.active.is-ovs::after {
  border-top: calc(20vw / 7.5) solid var(--default-color-ovs);
}
.select-tab > li.active.is-dom::after {
  border-top: calc(20vw / 7.5) solid var(--default-color-dom);
}
.select__content {
  display: none;
}
.select__content.active {
  display: block;
}

/*** コンテンツ部分 ***/
.flex__content {
  display: flex;
  flex-wrap: wrap;
  gap: calc(32vw / 7.5);
}
.flex__content.ultra,
.flex__content.gakusei {
  margin-bottom: calc(32vw / 7.5);
}
.flex__content + .flex__content.gakusei {
  margin-top: calc(32vw / 7.5);
}
.content__wrapper {
  position: relative;
  width: 100%;
  border: calc(8vw / 7.5) solid;
  border-top: none;
  background: #fff;
}
.is-ovs.content__wrapper {
  border-color: var(--default-color-ovs);
}
.is-dom.content__wrapper {
  border-color: var(--default-color-dom);
}
.is-gakusei.content__wrapper {
  border-color: var(--default-color-stu);
}
.flex__content.ultra .content__wrapper {
  border-color: var(--default-color-hatsu);
}
.is-ec.content__wrapper {
  border-color: var(--default-color-ec);
}
.plan__dst {
  font-size: calc(36vw / 7.5);
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: calc(8vw / 7.5);
  line-height: 1.2;
  background: #333;
}
.is-ovs .plan__dst {
  background: var(--default-color-ovs);
}
.is-dom .plan__dst {
  background: var(--default-color-dom);
}
.is-gakusei .plan__dst {
  background: var(--default-color-stu);
}
.flex__content.ultra .plan__dst {
  background: var(--default-color-hatsu);
}
.is-ec .plan__dst {
  background: var(--default-color-ec);
}

.notice__txt {
  width: 100%;
  margin: calc(40vw / 7.5) auto 0;
  font-weight: bold;
  color: var(--default-color-brown);
  text-align: center;
}
.notice__txt > small {
  width: fit-content;
  display: block;
  font-size: calc(30vw / 7.5);
  color: #fff;
  background: var(--default-color-red);
  padding: calc(8vw / 7.5);
  margin: auto;
}
.notice__txt > span {
  font-size: calc(40vw / 7.5);
}

.yes-txt,
.is-eigyo {
  display: none;
}

.aori__txt {
  width: 100%;
  font-size: calc(46vw / 7.5);
  font-weight: bold;
  color: #fff;
  background: var(--default-color-red);
  text-align: center;
  padding: calc(16vw / 7.5) 0;
}

/*表示部分*/
.plan__dspbox {
  padding: calc(16vw / 7.5);
}
.plan__title {
  color: var(--default-color-brown);
  font-weight: bold;
  padding: calc(16vw / 7.5);
  margin-bottom: calc(16vw / 7.5);
  background: #f2f2f2;
}
.is-ovs .plan__title {
  background: var(--bg-color-ovs);
}
.is-dom .plan__title {
  background: var(--bg-color-dom);
}
.flex__content.ultra .plan__title {
  background: var(--bg-color-hatsu);
}
.is-ec .plan__title {
  background: var(--bg-color-ec);
}
.title__catch {
  font-size: calc(26vw / 7.5);
  display: block;
}
.flex__content.ultra .title__catch {
  font-size: var(--font-size-sp);
}
.title__main {
  font-size: calc(40vw / 7.5);
  line-height: 1.2;
}
.title__main > small {
  font-size: calc(26vw / 7.5);
  display: block;
}
.term__list > li:not(.note__txt) {
  text-indent: -0.5em;
  padding-left: 0.5em;
}
.term__list > li > span {
  display: block;
}
.plan__items {
  margin-top: calc(24vw / 7.5);
}
.detail__midashi {
  font-size: calc(28vw / 7.5);
  font-weight: bold;
  border-left: calc(8vw / 7.5) solid;
  padding-left: calc(8vw / 7.5);
  margin-bottom: calc(8vw / 7.5);
}
.detail__txt {
  font-weight: bold;
  word-wrap: break-word;
}
.detail__txt > li a {
  font-weight: normal;
  color: var(--default-color-blue);
  text-decoration: underline;
}
.note__txt {
  display: block;
  font-size: calc(22vw / 7.5);
  font-weight: normal;
  padding-left: 1em;
  text-indent: -1em;
}
.except__txt {
  display: block;
  font-size: calc(22vw / 7.5);
  font-weight: normal;
}

/** アコーディオン **/
.accordion__button {
  width: calc(360vw / 7.5);
  margin: auto auto calc(24vw / 7.5);
  border-radius: calc(40vw / 7.5);
  border: 1px solid #333;
  font-size: calc(26vw / 7.5);
  text-align: center;
  padding: calc(16vw / 7.5);
  position: relative;
}
.accordion__button::after {
  content: "";
  background: var(--bg-img-setting);
  background-image: url("../img/ico_open.svg");
  width: calc(24vw / 7.5);
  height: calc(24vw / 7.5);
  position: absolute;
  top: 0;
  right: calc(24vw / 7.5);
  bottom: 0;
  margin: auto;
}
.accordion__button.is-open::after {
  background-image: url("../img/ico_close.svg");
}
.plan__details {
  padding: calc(16vw / 7.5) calc(16vw / 7.5) calc(32vw / 7.5);
  display: none;
  font-weight: bold;
}
.plan__details > .plan__items:first-child {
  margin-top: 0;
}

/** 利用方法 **/
.detail__txt.howto > li {
  font-weight: normal;
}
.detail__txt.howto > li > span {
  display: inline-block;
  background: #333;
  font-size: calc(22vw / 7.5);
  color: #fff;
  padding: 0 calc(4vw / 7.5) calc(4vw / 7.5);
}
/** 注意事項 **/
.detail__txt.notice > li {
  font-size: calc(22vw / 7.5);
  font-weight: normal;
  padding-left: 1em;
  text-indent: -1em;
}
/*** 遷移ボタン ***/
.link__button {
  display: flex;
  flex-wrap: wrap;
  gap: calc(24vw / 7.5);
  margin: calc(24vw / 7.5) auto 0;
}
.link__button > a {
  display: block;
  width: 100%;
  margin: auto;
  background: var(--default-color-yellow);
  border-radius: 100px;
  box-shadow: var(--bg-button-shadow);
  font-size: calc(26vw / 7.5);
  font-weight: 700;
  text-align: center;
  padding: calc(16vw / 7.5) calc(24vw / 7.5);
  position: relative;
}
.link__button > a.ovs_button {
  background: var(--default-color-ovs);
  color: #fff;
}
.link__button > a.dom_button {
  background: var(--default-color-dom);
  color: #fff;
}
.link__button > a::after {
  content: "";
  background: var(--img-arrow-right) var(--bg-img-setting);
  width: calc(48vw / 7.5);
  height: calc(48vw / 7.5);
  position: absolute;
  top: 0;
  right: calc(8vw / 7.5);
  bottom: 0;
  margin: auto;
}
.link__button > a.ovs_button::after,
.link__button > a.dom_button::after {
  background: var(--img-arrow-right_wt);
}
.link__button.is-none::after {
  display: block;
  content: "※対象ツアーはございません";
}
.link__button > a.is-hide {
  display: none;
}

/*: 特典の場合＝tokuten__box使用 **/
.tokuten__box {
  background: var(--bg-color-gray);
  padding: calc(16vw / 7.5);
  margin-top: calc(16vw / 7.5);
}
.tokuten__midashi {
  color: #fff;
  background-color: var(--default-color-ovs);
  display: inline-block;
  padding: 0 calc(4vw / 7.5);
  margin-bottom: calc(8vw / 7.5);
}
.detail__txt + .tokuten__midashi {
  margin-top: calc(24vw / 7.5);
}
.detail__txt.count {
  counter-reset: alphabet;
}
.detail__txt.count > li {
  counter-increment: alphabet;
  padding-left: 1.2em;
  position: relative;
}
.detail__txt.count > li::before {
  content: counter(alphabet, upper-alpha) ":";
  position: absolute;
  top: 0;
  left: 0;
}
.detail__txt.count > li + li:not(.tokuten__note) {
  margin-top: calc(16vw / 7.5);
}
.pink__txt {
  color: var(--default-color-pink);
}
.link__txt {
  display: block;
  color: var(--default-color-blue);
  text-decoration: underline;
}
.tokuten__note {
  display: block;
  font-size: calc(22vw / 7.5);
}
.tokuten__txt_sub {
  background: linear-gradient(transparent 50%, #ff0 50%);
}
/*商品リスト*/
.product__list {
  margin-top: calc(16vw / 7.5);
  display: flex;
  flex-direction: column;
  gap: calc(8vw / 7.5);
}
.product__list > .product__list__midashi {
  width: 100%;
  font-weight: bold;
}
.product__list > li > a.is-link {
  font-weight: normal;
  color: var(--default-color-blue);
  text-decoration: underline;
}

/*** クーポンの場合＝coupon__box使用 ***/
.coupon__box {
  margin-top: calc(16vw / 7.5);
}
.coupon__list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16vw / 7.5);
}
.coupon__list > li {
  width: 100%;
  border-radius: calc(8vw / 7.5);
  box-shadow: var(--bg-shadow);
  background: var(--default-color-red);
  padding: calc(16vw / 7.5);
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
}
.coupon__condition {
  text-align: center;
}
.coupon__price {
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  letter-spacing: -0.05em;
  line-height: 1;
  text-align: center;
  padding-bottom: calc(8vw / 7.5);
}
.coupon__price .price__txt {
  font-size: calc(64vw / 7.5);
  font-weight: bold;
  display: block;
  padding: calc(8vw / 7.5);
}
.coupon__price em {
  font-size: calc(96vw / 7.5);
  font-weight: bold;
}
.coupon__price .price__txt {
  font-size: calc(64vw / 7.5);
  font-weight: bold;
}
.coupon__note {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: calc(24vw / 7.5);
  margin: calc(16vw / 7.5) auto calc(8vw / 7.5);
}
.coupon__code {
  font-size: calc(40vw / 7.5);
  font-weight: bold;
  color: #333;
  text-align: center;
  background: var(--bg-color-gray);
  padding: calc(8vw / 7.5) calc(40vw / 7.5) calc(8vw / 7.5) calc(8vw / 7.5);
  cursor: pointer;
  position: relative;
}
.coupon__code.s_txt {
  font-size: calc(30vw / 7.5);
}
.coupon__code::after {
  content: "";
  background: var(--img-copy) var(--bg-img-setting);
  width: calc(36vw / 7.5);
  height: calc(36vw / 7.5);
  position: absolute;
  top: calc(8vw / 7.5);
  right: calc(8vw / 7.5);
}
.coupon__code.is-none {
  display: none;
}
.coupon__price:has(+ .is-none)::after {
  content: "店舗にてご予約を承ります。";
  display: block;
  font-size: calc(30vw / 7.5);
  font-weight: bold;
  color: #333;
  text-align: center;
  background: #fff;
  margin-top: calc(8vw / 7.5);
  padding: calc(16vw / 7.5);
}
.msgBoard {
  width: 100%;
  display: none;
  text-align: center;
}
/* クーポン終了 */
.coupon__list > li.is-end::before {
  content: "";
  background: rgba(0 0 0 / 70%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.coupon__list > li.is-end::after {
  content: "受付終了";
  display: block;
  width: 4em;
  height: 1.5em;
  font-size: calc(48vw / 7.5);
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.coupon__list > li.is-end .coupon__code {
  display: none;
}

/***グルメ特典***/
.flex__content.food .plan__title {
  padding: calc(16vw / 7.5) 0 0;
}
.plan__img {
  width: 100%;
  height: calc(300vw / 7.5);
}
.plan__img > img {
  width: 100%;
  height: 100%;
  object-position: center;
  object-fit: cover;
}
.flex__content.food .term__list > li {
  text-indent: 0;
  padding-left: 0;
}
.flex__content.food .term__list > li > span {
  display: inline;
}

/*ハワイの対象商品*/
.flex__content.food .content__wrapper:first-child .plan__items.shipping .detail__txt > li > span {
  display: none;
}

/***学生特典ページ導線バナー***/
.bnr__area {
  margin: calc(32vw / 7.5) auto;
  text-align: center;
}
.bnr__area > a {
  display: block;
}
.bnr__area.is-hide {
  display: none;
}

/*** 初夢 ***/
.yokoku-titlebox {
  margin: calc(40vw / 7.5) auto calc(24vw / 7.5);
  display: grid;
  gap: calc(16vw / 7.5);
}
.yokoku-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(16vw / 7.5);
}
.yokoku-title .sub {
  background: #db0002;
  font-size: calc(30vw / 7.5);
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 4px;
}
.yokoku-title .yokoku-title-txt {
  font-size: calc(50vw / 7.5);
  font-weight: bold;
  color: #db0002;
  text-align: center;
}
.yokoku-title .yokoku-title-txt > small {
  font-size: calc(30vw / 7.5);
  display: block;
}
.yokoku-note {
  font-size: 12px;
  text-align: center;
}
/* ウルトラクーポン終了 */
.close-note {
  font-size: calc(30vw / 7.5);
  font-weight: bold;
  color: #db0002;
  text-align: center;
}
.plan__dspbox.is-end::before {
  content: "";
  background: rgba(0 0 0 / 65%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.plan__dspbox.is-end::after {
  content: "受付終了";
  display: block;
  width: 4em;
  height: 1.5em;
  font-size: calc(48vw / 7.5);
  font-weight: bold;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}