@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-pc: 14px;
  --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-border-bottom: linear-gradient(transparent 70%, #ffff00 70%);
  --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-pc);
  line-height: calc(20 / 14);
}
a{
  text-decoration: none;
  color: #333
}
a:hover{
  opacity: 0.7
}
.nopc{
  display: none
}
.inner{
  width: var(--cotent-width);
  margin: auto;
}

.mv__wrapper{
  width: 100%;
  height: 280px;
  background: url("../img/mv_photo.jpg") no-repeat center center / 1920px;
  position: relative;
}
.title-logo img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto
}
.main__content{
  padding: 50px 0
}

/*** 海外・国内タブ ***/
.select-tab{
  display: flex;
  align-items: center;
  margin: 0 auto 50px;
  gap: 30px
}
.select-tab>li{
  width: calc((100% - 30px) / 2);
  border-radius: 6px;
  font-size: 30px;
  font-weight: 700;
  color: #FFF;
  padding: 6px;
  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: 10px 6px
}
.select-tab>li.active.is-dom{
  background: var(--default-color-dom);
  padding: 10px 6px
}
.select-tab>li.active.is-dom::after,
.select-tab>li.active.is-ovs::after{
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 0;
  bottom: -40px;
  left: 0;
  margin: auto;
  border: 20px solid transparent;
}
.select-tab>li.active.is-ovs::after{
  border-top: 20px solid var(--default-color-ovs);
}
.select-tab>li.active.is-dom::after{
  border-top: 20px solid var(--default-color-dom);
}
.select__content{
  display: none
}
.select__content.active{
  display: block;
  margin-bottom: 100px;
}

/*** コンテンツ部分 ***/
.flex__content{
  display: flex;
  flex-wrap: wrap;
  gap: 24px 16px;
  align-items: flex-start;
}
.flex__content.ultra,
.flex__content.gakusei{
  margin-bottom: 24px;
}
.flex__content+.flex__content.gakusei{
  margin-top: 24px;
}
.content__wrapper{
  position: relative;
  width: calc((100% - 16px) / 2);
  border: 4px 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);
  position: relative
}
.is-ec.content__wrapper{
  border-color: var(--default-color-ec);
}
.plan__dst{
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  padding: 8px;
  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: 40px auto 0;
  font-weight: bold;
  color: var(--default-color-brown);
  text-align: center;
}
.notice__txt>small{
  width: fit-content;
  display: block;
  font-size: 24px;
  color: #FFF;
  background: var(--default-color-red);
  padding: 4px;
  margin: auto
}
.notice__txt>span{
  font-size: 30px;
  display: flex;
  gap: 16px;
  align-items: center;
}
.notice__txt>span::before,
.notice__txt>span::after{
  content: "";
  background: var(--default-color-brown);
  width: 120px;
  height: 2px;
  flex-grow: 1;
}

.aori__txt{
  width: 100%;
  font-size: 36px;
  font-weight: bold;
  color: #FFF;
  background: var(--default-color-red);
  text-align: center;
  padding: 8px;
}

/*表示部分*/
.plan__dspbox{
  padding: 10px;
  height: 390px;
}
.plan__title{
  color: var(--default-color-brown);
  font-weight: bold;
  padding: 8px;
  margin-bottom: 8px;
  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: 16px;
  display: block;
}
.title__main{
  font-size: 26px;
  line-height: 1.2
}
.title__main>small{
  font-size: 16px;
  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: 16px
}
.detail__midashi{
  border-left: 4px solid;
  padding-left: 4px;
  margin-bottom: 4px;
}
.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: 12px;
  font-weight: normal;
  padding-left: 1.0em;
  text-indent: -1.0em;
}
.except__txt{
  display: block;
  font-size: 12px;
  font-weight: normal;
}

/** アコーディオン **/
.accordion__button{
  width: 218px;
  margin: auto auto 16px;
  border-radius: 24px;
  border: 1px solid #333;
  font-size: 16px;
  text-align: center;
  padding: 8px;
  position: relative
}
.accordion__button::after{
  content: "";
  background: var(--bg-img-setting);
  background-image: url("../img/ico_open.svg");
  width: 12px;
  height: 12px;
  position: absolute;
  top: 0;
  right: 16px;
  bottom: 0;
  margin: auto
}
.accordion__button.is-open::after{
  background-image: url("../img/ico_close.svg");
}
.plan__details{
  padding: 10px;
  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: 12px;
  color: #FFF;
  padding: 0 4px 4px;
}
/** 注意事項 **/
.detail__txt.notice>li{
  font-size: 12px;
  font-weight: normal;
  padding-left: 1.0em;
  text-indent: -1.0em;
}
/*** 遷移ボタン ***/
.link__button{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px auto 16px;
}
.link__button>a{
  display: block;
  width: 460px;
  margin: auto;
  background: var(--default-color-yellow);
  border-radius: 100px;
  box-shadow: var(--bg-button-shadow);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  padding: 10px 20px;
  min-height: 42px;
  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(--bg-img-setting);
  background-image: var(--img-arrow-right);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 4px;
  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: 8px;
  margin-top: 8px;
}
.tokuten__midashi{
  color: #FFF;
  background-color: var(--default-color-ovs);
  display: inline-block;
  padding: 0 4px;
}
.detail__txt+.tokuten__midashi{
  margin-top: 16px;
}
.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: 8px;
}
.pink__txt{
  color: var(--default-color-pink)
}
.link__txt{
  display: inline-block;
  color: var(--default-color-blue);
  text-decoration: underline;
  margin-left: 1.0em;
}
.tokuten__note{
  display: block;
  font-size: 12px;
}
.tokuten__txt_sub{
  background: linear-gradient(transparent 50%, #FF0 50%);
}
/*商品リスト*/
.product__list{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.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: 8px;
}
.coupon__list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.coupon__list>li{
  width: 100%;
  border-radius: 4px;
  box-shadow: var(--bg-shadow);
  background: var(--default-color-red);
  padding: 10px;
  color: #FFF;
  position: relative;
  display: flex;
  flex-direction: column;
}
.coupon__condition{
  font-size: 16px;
  text-align: center;
}
.coupon__price{
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -0.05em;
  line-height: 1.0;
  text-align: center;
  padding-bottom: 4px;
}
.coupon__price .price__txt{
  font-size: 42px;
  font-weight: bold;
  display: block;
  padding: 8px 0
}
.coupon__price em{
  font-size: 64px;
  font-weight: bold;    
}
.coupon__note{
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  margin: 8px auto;
}
.coupon__code{
  font-size: 28px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background: var(--bg-color-gray);
  padding: 5px 30px 5px 5px;
  cursor: pointer;
  position: relative;
}
.coupon__code.s_txt{
  font-size: 20px;
}
.coupon__code::after {
  content: "";
  background: var(--img-copy) var(--bg-img-setting);
  width: 24px;
  height: 24px;
  position: absolute;
  top: 3px;
  right: 3px;
}
.coupon__code.is-none{
  display: none
}
.coupon__price:has(+.is-none)::after{
  content: "店舗にてご予約を承ります。";
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
  background: #FFF;
  padding: 8px;
}
.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: 40px;
  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
}

/*** 初夢 ***/
.yokoku-titlebox{
  margin: 40px auto 16px;
  display: grid;
  gap: 8px;
}
.yokoku-title{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px
}
.yokoku-title .sub{
  background: #db0002;
  font-size: 24px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  padding: 4px;
}
.yokoku-title .yokoku-title-txt{
  font-size: 40px;
  font-weight: bold;
  color: #db0002;
  text-align: center
}
.yokoku-title .yokoku-title-txt>small{
  font-size: 24px;
  display: block;
}
.yokoku-note{
  font-size: 12px;
  text-align: center;
}