@charset "UTF-8";


/* ADD COMMON -------------------------------- */

.flex { display: flex; }
.flex-wrap { display: flex; flex-wrap: nowrap; }
.flex-jcc { display: flex; justify-content: center; flex-wrap: wrap; }
.flex-jcs { display: flex; justify-content: space-between; flex-wrap: wrap; }
.flex-jcend { display: flex; justify-content:flex-end; flex-wrap: wrap; }
.flex-aic { display: flex; align-items: center; flex-wrap: wrap; }
.disp-ib { display: inline-block; }

.border-none{border: none !important;}

/* ZEALPLUS HACK -------------------------------- */


/* _component.scss */
.title .en{ font-style: normal; font-size: 4rem;}
@media only screen and (max-width: 767px) {
  .title .en{font-size: 3rem;}
}

/*_top.scss */
body.top #plan .col figure figcaption .links .row a {padding-right: 0;}
.ind_plan_catch{ font-size: 2.6rem; font-size: clamp(22px,2.3vw,2.6rem); color: #fff;line-height: 1.6;}
.ind_plan_cap01,
.ind_plan_cap02{ height: 44px; margin-bottom: 20px !important;}
@media only screen and (max-width: 767px) {
body.top #concept .inner .intro {font-size: 2.8rem; font-size: 2.5rem;}
.ind_plan_catch {font-size: clamp(22px,5.8vw,2.5rem);}
.ind_plan_cap01,
.ind_plan_cap02{ height: auto;  margin-bottom: 12px !important;}
}

/* CONCEPT */
.concept_catch{color: #25A1CF;font-size: 2.8rem;}
.yakatabune .concept_catch{ color: #A0813E;}
.concept_plan_catch{color: #fff;font-size: 2.2rem;}
@media only screen and (max-width: 767px) {
  .concept_catch{font-size: 2.5rem;}
  .concept_plan_catch{color: #fff;font-size: 2.1rem;}
}


/* common */
.m .n,
.m .p,
#tabs ul li a{font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", "Helvetica", "Arial", sans-serif;}

.zcourse__wrap{}
.zcourse__mainvisual {overflow: hidden; aspect-ratio: 1 / 0.35;}
.zcourse__mainvisual img{ width: 100%; height: 100%; object-fit: cover; }

.zcourse__title{font-size: 2.2rem; border-bottom: 1px dotted rgba(202, 202, 202, 1); padding-bottom: 0.4em; margin-bottom: 0.6em; }
.zcourse__detail{ font-size: 1.45rem; line-height: 1.9; }
ul.zcourse__detail{}
.zcourse__detail li{position: relative; padding-left: 1em; line-height: 1.4; margin-bottom: 0.5em;}
.zcourse__detail li:before{ content: "・"; position: absolute; left: 0em;}
.zcourse__subdesc{ margin-top: 2em;  border-top: 1px dashed rgba(202, 202, 202, 1); 
  font-size: 1.4rem;  line-height: 1.6; padding-block: 3em; opacity: 0.8;}
.zcourse__subdesc_yakatabune{ font-size: 1.4rem;  line-height: 1.6; padding-block: 3em 0; }


.zcourse_freedrink__title {font-size: 2rem; padding-bottom: 0.4em; }
.zcourse_freedrink__detail{ font-size: 1.45rem; line-height: 1.7; }
.cont.zcourse_freedrink .single .row .col:last-child { border-bottom: none !important;}

@media only screen and (min-width: 768px) {
  .cont.zcourse_freedrink .single .row .col:nth-of-type(n+7) { border-bottom: none !important;}
}
@media only screen and (max-width: 767px) {
  .zcourse__mainvisual { aspect-ratio: 1 / 0.6;}
}




/* yosen */
body.yosen #sec01 .row .r .catch {font-style: normal;}
body.yosen #page-mainv{  color: #fff; font-size: 3rem; display: flex;justify-content: center;align-items: center;text-align: center;}
body.yosen #sec01 .row .r .desc{ margin-top: 30px;}

body.yosen .cont01 .zcourse__title,
body.yosen .cont02 .zcourse__title{ color: #2D6980; border-bottom: 1px dotted rgba(45, 105, 128, 0.4);}


body.yosen #sec06 .btn01,
body.yosen #sec06 .desc,
body.yosen #sec04 .inner .row .col:last-child p,
body.yosen #sec03 .row .col figure figcaption,
body.yosen #sec05 .inner .row .col .copy,
body.yosen #sec05 .inner .row .col .t,
body.yosen #sec05 .inner .row .col .fac p,
body.yosen #sec05 .inner .row .col .fac table td,
body.yosen #sec05 .inner .row .col .desc
{  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", "Helvetica", "Arial", sans-serif ;}

@media only screen and (max-width: 767px) {
  body.yosen #page-mainv{font-size: 2.5rem;}
}


.yosen-limited-flex{ padding-block: 2em;border-bottom: 1px dashed rgb(202, 202, 202);}
.yosen-limited-flex:first-child{ padding-top: 0;}
body:not(.fare) .yosen-limited-flex.last{ border-bottom: none; }
body.fare .yosen-limited-flex.last{ margin-bottom: 4em;}
.yosen-limited-flex img{max-width: 100%; height: auto;}
.yosen-limited-flex .flex-img{ width: 50%; box-sizing: border-box;}
.yosen-limited-flex .flex-txt{width: 45%; padding-right: 5%; padding-block: 2%; box-sizing: border-box;}





/* yakatabune */
body.fare #sec02 .tab-content .pic-col figure figcaption .info-box,
body.yosen.yakatabune #sec02 .row .pic-col figure figcaption .info-box {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
body.fare #sec02 .tab-content .pic-col figure figcaption .info-box .detai,
body.yosen.yakatabune #sec02 .row .pic-col figure figcaption .info-box .detai {font-size: 1.45rem;}


/* option */
body.option #sec01 .desc,
body.option #sec01 .row .col figure figcaption{
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}


/* fare */
.zfare-intro-message01{text-align: center;
  font-size: 1.8rem;line-height: 1.9;margin-top: 40px;}
.zfare-intro-message02{text-align: center;
    font-size: 1.5rem;line-height: 1.8;margin-top: 1em;}
    .zfare-intro-message02 span{ font-size: 0.9em;}
    
  @media only screen and (max-width: 767px) {
    .zfare-intro-message01 { margin-top: 20px;font-size: 1.6rem; line-height: 2;padding-inline:  20px;}
    .zfare-intro-message02 { font-size: 1.35rem; padding-inline:  20px; }
  }

body.fare .zlabel-limited:before{ content: "期間限定プラン"; display: inline-block; background-color: #444;color: #fff; 
  font-size: 0.65em; margin-right: 0.7em;padding: 1px 8px;top: -2px;position: relative;}


.fare-about{ padding-bottom: 20px;}
.fare-about .col {border-bottom:1px dashed #B2B2B2; padding-bottom: 1em;}
.fare-about-flex{ font-size: 1.9rem;}
.fare-about-flex .flex-l,
.fare-about-flex .flex-r{ padding-right: 1em;}
.fare-about-desc{ font-size: 1.5rem; margin-top: 0.1em;}


@media only screen and (max-width: 767px) {
  .fare-about{ padding-bottom: 20px;}
  .fare-about-flex{ font-size: 1.7rem;}
  .fare-about-desc{ font-size: 1.4rem; }
  .fare-about-flex .flex-l,
.fare-about-flex .flex-r{ padding-right: 0em;}
 }






/* option layout rename --> copy */
body.fare .option .row-title {
    margin-top:85px
  }
  @media only screen and (max-width: 767px) {
body.fare .option .row-title {
      margin-top:40px
    }
  }
  body.fare .option .row-title h2 {
    padding-left:20px;
    font-size:18px;
    font-size:1.8rem;
    font-weight:bold;
    position:relative
  }
  @media only screen and (max-width: 767px) {
body.fare .option .row-title h2 {
      font-size:16px;
      font-size:1.6rem
    }
  }
  body.fare .option .row-title h2:before {
    content:"";
    width:14px;
    height:14px;
    border-radius:14px;
    background:#A5D3E5;
    display:block;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto
  }
  @media only screen and (max-width: 767px) {
body.fare .option .row-title h2:before {
      width:12px;
      height:12px;
      border-radius:12px
    }
  }



  body.fare .option .row .col {
    margin-top:20px
  }
  body.fare .option .row .col figure figcaption {
    text-align:center;
    font-size:17px;
    font-size:1.7rem;
    margin-top:5px
  }
  body.fare .option .row .col .m {
    padding:10px 0;
    border-bottom:1px dashed #B2B2B2
  }
  body.fare .option .row .col .m .p,
  body.fare .option .row .col .m .n {
    font-size:17px;
    font-size:1.7rem
  }
  @media only screen and (max-width: 767px) {
    body.fare .option .row .col .m .p,
    body.fare .option .row .col .m .n {
      font-size:15px;
      font-size:1.5rem
    }
  }
  body.fare .option .desc {
    font-size:15px;
    font-size:1.5rem;
    margin-top:40px;
  }
  @media only screen and (max-width: 767px) {
    body.fare .option .desc {
      font-size:14px;
      font-size:1.4rem;
      margin-top:20px
    }
  }




  /* contact */
body.contact .contactbox .b .phone { font-style: normal;}