@charset "utf-8";

@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/tyo/common/font/NotoSansJP-500.woff2) format('woff2');
}

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/tyo/common/font/MaterialSymbolsRounded.woff2) format('woff2');
}

/*★ リセット ★*/
.main {
  div:not([class])::after {
    content: none;
  }

  a {
    text-decoration: none;
  }

  .is-em {
    font-weight: bold;
  }
}

#topbuttonApp,
#searchArea {
  position: relative;
  z-index: 1;
}

/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#hisApp {
  position: relative;
  overflow: visible;
}

:root {
  --default-font-size-pc: 18px;
  --default-font-size-sp: calc(28vw / 7.5);
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-font-lh: 1.4;
  --default-font-lh2: 1.6;
  --default-width-sp-val: 750;
  --default-width-pc-val: 1104;
  --default-width-sp: (710vw / 7.5);
  --default-width-pc: 1104px;
  --default-width: min(var(--default-width-sp), var(--default-width-pc));
  --default-width2: min(100%, var(--default-width-pc));
  --default-bg-width-pc: max(100%, 1920px);
  --default-color-green: #074f03;
  --default-color-light-green1: #44a83e;
  --default-color-light-green2: #99d39f;
  --default-color-red: #bc1818;
  --default-ff-icon: "Material Symbols Rounded";
  --default-ico-arrow-r: "\e5e1";
  --default-ico-blank: "\e89e";
  --default-hover-speed: .3s;
  --default-hover-opacity: .8;
  --default-hover-transition-opacity: opacity var(--default-hover-speed);
  --default-hover-transition-background: background var(--default-hover-speed);
  --default-hover-transition-color: color var(--default-hover-speed);
}

.material-symbols-rounded {
  font-family: var(--default-ff-icon);
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.main {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #000;
  line-height: var(--default-font-lh);
  padding-bottom: 0 !important;

  a[class*="link"] {
    &:not(.js-link-domAir) {
      color: inherit;
    }
  }
}

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.section [class*="notes--item"] {
  text-indent: -1em;
  padding-left: 1em;
}

@media(width < 860px) {
  .is-dsp-pc {
    display: none !important;
  }
}

@media(width >=861px) {
  .is-dsp-sp {
    display: none !important;
  }
}

/*.float-button*/
.float-button {
  width: min((144vw / 7.5), 130px);
  height: min((144vw / 7.5), 130px);
  position: fixed;
  top: min((40vw / 7.5), 33px);
  right: 14px;
  translate: var(--floatbtn-posi-x, 200%) 0;
  transition: translate .7s;
  z-index: 10;

  &.is-fixed:not(.is-over) {
    --floatbtn-posi-x: 0
  }
}

.float-button__link {
  display: block;
}

.float-button__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*.button__wapper*/
.button__wapper {
  display: grid;
  justify-items: center;
  gap: var(--btn-gap);
  --btn-gap: min((40vw / 7.5), 30px) 0;
  --btn-col: 2;
  margin-top: 40px;

  @media(width >=861px) {
    grid-template-columns: repeat(auto-fit, calc(100% / var(--btn-col)));

    &:has(> :nth-child(-n+1):last-child) {
      justify-content: center;
    }
  }
}

/*.base-button*/
.base-button.ui-static-button {
  min-width: min((590vw / 7.5), 370px);
  height: min((72vw / 7.5), 50px);
  font-size: var(--default-font-size);
  font-weight: normal;
  padding-top: min((24vw / 7.5), 12px);

  .ui-static-icon {
    color: inherit;
  }

  &:not(.is-blank) {
    .ui-static-icon {
      font-size: 1.4em;
      --wght: 400;
    }
  }

  &.hotel__button,
  &.product__button {
    background: #004E74 !important;
    color: #fff;
    font-weight: 700;
    border: none;
  }

  &.product__button:hover {
    opacity: 0.7;
  }

  &.enjoy__button {
    min-width: min((590vw / 7.5), 400px);
    background: var(--default-color-green) !important;
    border-color: #000 !important;
    color: #fff;
  }
}

/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
/*.mv*/
.mv {
  background-image: url(../images/mv_bg_pc.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mv h2 {
  width: fit-content;
  margin: 0 auto;
  padding: 118px 0;
  max-width: 858px;
}

/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section*/
.section__inner {
  width: var(--default-width);
  margin: auto;
}

.section__title {
  font-size: 36px;
  color: #004E74;
  text-align: center;
  font-weight: bold;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 40px;
}

.section__title::before {
  content: " ";
  background: url(../images/title_kazari.svg);
  display: block;
  width: 80px;
  height: 30px;
  background-repeat: no-repeat;
  margin: 0 auto;
  margin-bottom: 16px;
}

.section__title span {
  font-size: 24px;
  display: block;
}

/*#charter-flight*/
.charter-flight {
  padding: 40px 0 100px 0;
  background: linear-gradient(180deg, #C5F0FF 58.65%, #FFF 100%), lightgray 50% / cover no-repeat;
  position: relative;
}

.charter-flight::after {
  content: " " !important;
  background: url(../images/flight_schedule_bg_kazari.png);
  width: 612px;
  height: 289px;
  position: absolute;
  right: 0px;
  top: 72px;
  background-repeat: no-repeat;
  background-size: cover;
}

.charter-flight .section__inner {
  position: relative;
  z-index: 2;
}

.charter-flight h4 {
  font-size: 24px;
  line-height: 180%;
  font-weight: 900;
  color: #004E74;
  text-align: center;
  margin-bottom: 40px;
}

.charter-flight h4 span {
  font-size: 20px;
  display: block;
  color: #2994CA;
}

.charter-flight .d-flex {
  gap: 48px;
  padding: 0 28px;
}

.charter-flight .d-flex dl {
  background: #FFF;
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.10);
  width: 50%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.charter-flight .d-flex dl::before {
  content: "往路";
  position: absolute;
  top: -26px;
  left: -26px;
  border-radius: 32.5px;
  background: #00C1DD;
  display: flex;
  width: 65px;
  height: 65px;
  transform: rotate(-20.489deg);
  padding: 17px 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
}

.charter-flight .d-flex dl:nth-of-type(2):before {
  content: "復路";
}

.charter-flight .d-flex dl div {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  border-bottom: 2px dashed #00C1DD;
}

.charter-flight .d-flex dl div:first-of-type {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  border-bottom: 2px dashed #00C1DD;
}

.charter-flight .d-flex dl div:not(:first-of-type) {
  border-bottom: 0;
}

.charter-flight .d-flex dl div dt {
  width: 50%;
  text-align: center;
  color: #00C1DD;
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
  padding: 6.5px 0;
}

.charter-flight .d-flex dl div dd {
  width: 50%;
  text-align: center;
  font-size: 20px;
  line-height: 130%;
}

.illust-wrapper {
  position: relative;
}

.illust-wrapper .bg_illust_left {
  position: -webkit-sticky;
  position: sticky;
  top: 60%;
  left: 3%;
  margin-top: 50%;
  float: left;
}

.illust-wrapper .bg_illust_right {
  position: -webkit-sticky;
  position: sticky;
  top: 3%;
  right: 4%;
  margin-top: 5%;
  margin-bottom: 30%;
  float: right;
}

/*#point*/
.point {
  margin-bottom: 100px;
  padding-top: 128px;
}

.point h4 {
  background: linear-gradient(90deg, #00C1DD 0%, #00C1DD 85.58%, #FFF 99.04%);
  padding: 8px 16px;
  color: #fff;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 24px;
}

.point__event,
.point__bbq {
  margin-bottom: 40px;
}

.point__event .d-flex {
  gap: 24px;
}

.point__event .d-flex div {
  width: 33.333%;
  padding: 16px;
  border: 1px solid #2994CA;
}

.point__event .d-flex div img {
  margin-bottom: 8px;
  object-fit: cover;
}

.point__event .d-flex div h5 {
  color: #2994CA;
  font-size: 24px;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 8px;
}

.point__event .d-flex div p {
  margin-bottom: 8px;
}

.notice {
  color: #888;
  font-size: 12px;
  font-weight: 400;
  margin-bottom: 0 !important;
}

.point__bbq img {
  object-fit: cover;
}

.point__bbq .d-flex:first-of-type {
  justify-content: space-between;
  margin-bottom: 24px;
}

.point__bbq .d-flex:first-of-type div p:first-of-type {
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 16px;
}

.point__bbq .d-flex:first-of-type div h5 {
  color: #F29423;
  font-size: 26px;
  font-weight: 900;
  line-height: 130%;
  margin-bottom: 16px;
}

.point__bbq .d-flex:first-of-type div p:nth-of-type(2) {
  color: #2C2A29;
}

.point__bbq .d-flex:nth-of-type(2) {
  background: #FFFDE5;
  padding: 16px;
  gap: 8px;
  margin-bottom: 24px;
}

.point__bbq .d-flex:nth-of-type(2) p {
  color: #2C2A29;
  font-size: 16px;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 24px;
}

.point__bbq .d-flex:nth-of-type(2) img {
  object-fit: contain;
}

.point__bbq .notice {
  display: flex;
}

.point__bbq .notice::before {
  content: "（注1）";
  white-space: nowrap;
}

.point__bbq .notice span {
  width: 90%;
}

.point__service .d-grid {
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.point__service .d-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.point__service .point__service__wrapper {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 16px;
}

.point__service .point__service__wrapper:nth-of-type(5) img,
.point__service .point__service__wrapper:nth-of-type(6) img {
  object-fit: contain;
}

.point__service__wrapper h5 {
  color: #2994CA;
  font-size: 24px;
  font-weight: 700;
  line-height: 130%;
  display: flex;
  align-items: center;
}

.point__service__wrapper h5::before {
  content: "";
  background: url(../images/service_cassette_kazari.svg);
  width: 53px;
  height: 51px;
  display: inline-block;
  background-repeat: no-repeat;
  margin-right: 8px;
  background-size: cover;
}

.point__service__wrapper div:first-of-type {
  display: flex;
  gap: 24px;
}

.point__service__wrapper div:first-of-type img {
  width: 45%;
  height: 156px;
}

.point__service__wrapper div:first-of-type div {
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.point__service .point__service__wrapper:nth-of-type(6) div:first-of-type img {
  width: 30%;
}

.point__service .point__service__wrapper:nth-of-type(6) div:first-of-type div {
  width: 70%;
}


.point__circle {
  display: flex;
  gap: 24px;
  justify-content: center;
}

.point__circle div {
  width: 33.333%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #00C1DD33;
  text-align: center;
  padding: 24px;
  position: relative;
}

.point__circle div::before {
  position: absolute;
  left: -15px;
  top: 78px;
  content: " ";
  background: url(../images/service_circle_kazari_left.svg);
  width: 62px;
  height: 63px;
  background-size: cover;
}

.point__circle div:after {
  position: absolute;
  right: 15px;
  top: 41px;
  content: " " !important;
  background: url(../images/service_circle_kazari_right.svg);
  width: 44px;
  height: 43px;
  z-index: 1;
  display: block;
  background-size: cover;
}

.point__circle div h5 {
  color: #004E74;
  font-size: 24px;
  font-weight: 700;
  line-height: 130%;
  margin-bottom: 16px;
}

.point__circle div h5::before {
  content: " ";
  background: url(../images/service_circle_title_kazari.svg);
  width: 129px;
  height: 46px;
  display: block;
  margin: 0 auto;
  margin-bottom: 8px;
}

.point__circle div p:first-of-type {
  color: #2994CA;
  font-size: 20px;
  font-weight: 700;
}

.point__circle div p:nth-of-type(2) {
  color: #2994CA;
  font-size: 12px;
  font-weight: 700;
  line-height: 180%;
}

/*#product*/
#product {
  padding-top: 80px;
  background: linear-gradient(180deg, #FFF 0%, #63B6DF 100%);
  padding-bottom: 80px;

  .bnr {
    display: block;
    margin: 0 auto;
    max-width: 960px;
  }

  .bnr img {
    width: 100%;
  }

  .product__button {
    margin-bottom: 40px;
  }

  .product__list {
    display: grid;
    color: #000;

    @media(width >=861px) {
      --gap: 24px;
      --col-num: 4;
      grid-template-columns: repeat(auto-fit, calc((100% - var(--gap) * (var(--col-num) - 1)) / var(--col-num)));
      justify-content: center;
      gap: var(--gap);
    }
  }

  .product__list--inner {
    font-size: min((20vw / 7.5), 12px);
    line-height: 1.4;
    color: inherit;
    font-weight: normal;
    background: #fff;
    border: 1px solid #84C5E5;
    display: grid;
    grid-template-columns: min((243.5vw / 7.5), 280px) 1fr;
    gap: min((10vw / 7.5), 10px) min((20vw / 7.5), 30px);
    position: relative;
  }

  .product__list--image {
    aspect-ratio: 944 / 628;
    object-fit: cover;
    height: min((162vw / 7.5), 186px);
  }

  .product__list--type {
    background: #000;
    color: #fff;
    text-align: center;
    padding: .2em .2em .25em;
    font-weight: bold;
    align-content: center;
  }

  .product__list--label-wrapper:has(.product__list--label.is-economy) {
    display: none;
  }

  .product__list--label {
    font-size: min((20vw / 7.5), 11px);
    line-height: 1.2;
    color: #fff;
    padding: .5em .75em;
    font-weight: bold;
    background: var(--product-label-bg, #000);

    &.is-business {
      --product-label-bg: #001a4b;
    }
  }

  .product__list--title {
    font-weight: bold;
  }

  .product__list--minmax {
    color: #e70000;
    font-weight: bold;
  }

  .product__list--title,
  .product__list--minmax {
    font-size: min((24vw / 7.5), 16px);
  }

  .product__list--detail,
  .product__list--price {
    color: #333;
  }

  .product__list--detail,
  .product__list--minmax~[class^="product__list--"] {
    margin-top: .25em;
  }

  @media(width < 861px) {
    .product__list--item:not(:first-child) {
      --yohaku: min((32vw / 7.5), 32px);
      margin-top: var(--yohaku);
    }

    .product__list--inner {
      padding: min((18vw / 7.5), 15px);
      grid-template-areas:
        "img label"
        "img txt";
      grid-template-rows: max-content 1fr;

      &:has(.product__list--label.is-economy) {
        grid-template-areas: "img txt";
      }
    }

    .product__list--image-wrapper {
      grid-area: img;
    }

    .product__list--label-wrapper {
      grid-area: label;
      display: flex;
      flex-wrap: wrap;
      gap: min((10vw / 7.5), 8px);
    }

    .product__list--text-wrapper {
      grid-area: txt;
    }

    .product__list--detail {
      margin-top: min((15vw / 7.5), 15px);
    }

    .product__list--price {
      margin-top: min((20vw / 7.5), 20px);
    }
  }

  @media(width >=861px) {

    .product__list--item,
    .product__list--data {
      display: contents;
    }

    .product__list--inner {
      grid-template-columns: 1fr;
      grid-template-rows: subgrid;
      grid-row: span 2;
      gap: 0;
      border: 1px solid #84C5E5;
    }

    .product__list--label-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      display: grid;
    }

    .product__list--image-wrapper {
      display: grid;
      grid-template-rows: auto 1fr;

      .product__list--image {
        width: 100%;
        height: auto;
      }
    }

    .product__list--type {
      padding: .5em;
    }

    .product__list--text-wrapper {
      padding: 8px 10px 10px;
      display: grid;
      align-content: space-between;
      gap: 1em;
    }
  }
}

/*------------------------------------------------*/
/*★ ＝＝ searchArea ＝＝ ★*/
#searchArea {
  padding-bottom: 40px;

  @media(width >=741px) {
    padding: 120px 0;
    background: url(../images/search_bg_pc.webp) no-repeat center top / var(--default-bg-width-pc);
  }

  .rn-searchMod__formDomLink,
  .rn-searchMod__formOvsLink {
    font-size: min((24vw / 7.5), 12px);
  }
}

/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .float-button__link {
    transition: var(--default-hover-transition-opacity);

    &:hover {
      opacity: .6;
    }
  }

  .product__list--inner {
    >[class$="-wrapper"] {
      transition: var(--default-hover-transition-opacity);

      .product__list--inner:hover & {
        opacity: var(--default-hover-opacity);
      }
    }
  }
}

/* レスポンシブ対応 */
@media (max-width: 1690px) {
  .illust-wrapper .bg_illust_left {
    left: 0;
    width: 8%;
  }

  .illust-wrapper .bg_illust_right {
    right: 0;
    width: 8%;
    top: 21%;
  }
}

@media (max-width: 1350px) {
  .illust-wrapper .bg_illust_left {
    display: none;
    float: none;
  }

  .illust-wrapper .bg_illust_right {
    display: none;
    float: none;
  }
}

@media (max-width: 1024.98px) {
  .point {
    margin-bottom: 45px;
    padding-top: 0px;
  }

  .point__circle {
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .point__circle div {
    width: 100%;
    max-width: 352px;
  }

  .point__circle div h5 {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 16px;
  }

  .point__circle div p:first-of-type {
    font-size: 16px;
  }

  .point__circle div:first-of-type h5 {
    margin-bottom: 34px;
  }
}

@media (max-width: 820px) {
  .mv h2 {
    padding: 90px 26px;
  }
}

@media (max-width: 767.98px) {
  .section__inner {
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
  }

  .illust-wrapper .bg_illust_left {
    display: none;
    float: none;
  }

  .illust-wrapper .bg_illust_right {
    display: none;
    float: none;
  }

  .mv {
    background-image: url(../images/mv_bg_sp.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .section__title {
    font-size: 30px;
  }

  .section__title span {
    font-size: 20px;
  }

  .charter-flight::after {
    background: url(../images/flight_schedule_bg_kazari_sp.png);
    background-repeat: no-repeat;
    width: 187px;
    height: 109px;
    top: 14px;
  }

  .charter-flight h4 {
    font-size: 20px;
    margin-bottom: 24px;
  }

  .charter-flight h4 span {
    font-size: 18px;
  }

  .charter-flight .d-flex {
    padding: 0;
    flex-wrap: wrap;
  }

  .charter-flight .d-flex dl {
    width: 100%;
  }

  .charter-flight .d-flex dl div {
    gap: 32px;
  }

  .charter-flight .d-flex dl div:first-of-type {
    gap: 32px;
  }

  .charter-flight .d-flex dl div dt {
    font-size: 18px;
  }

  .charter-flight .d-flex dl div dd {
    font-size: 18px;
  }

  .charter-flight .d-flex dl::before {
    font-size: 18px;
    width: 54px;
    height: 54px;
    padding: 0;
    left: -7px;
    top: -19px;
  }

  .point h4 {
    font-size: 20px;
    margin-bottom: 40px;
  }

  .point__event .d-flex {
    flex-wrap: wrap;
  }

  .point__event .d-flex div {
    width: 100%;
    padding: 16px;
    text-align: center;
  }

  .point__event .d-flex div img {
    width: 100%;
  }

  .point__event .d-flex div h5 {
    font-size: 18px;
    text-align: left;
  }

  .point__event .d-flex div p {
    text-align: left;
  }

  .point__event,
  .point__bbq {
    margin-bottom: 48px;
  }

  .point__bbq .d-flex:first-of-type {
    flex-wrap: wrap;
    gap: 24px;
  }

  .point__bbq .d-flex:first-of-type div:nth-of-type(2) {
    margin: 0 auto;
    width: 100%;
  }

  .point__bbq .d-flex:first-of-type div:nth-of-type(2) img {
    margin: 0 auto;
  }


  .point__bbq .d-flex:first-of-type div p:first-of-type {
    font-size: 16px;
  }

  .point__bbq .d-flex:first-of-type div h5 {
    font-size: 18px;
  }

  .point__bbq .d-flex:nth-of-type(2) {
    flex-wrap: wrap;
  }

  .point__bbq .d-flex:nth-of-type(2) img {
    margin: 0 auto;
    width: 100%;
  }

  .point h4 {
    margin-bottom: 16px;
  }

  .point__service .d-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .point__service__wrapper {
    gap: 8px;
  }

  .point__service__wrapper h5 {
    font-size: 18px;
  }

  .point__service__wrapper h5::before {
    width: 43px;
    height: 41px;
  }

  .point__service .d-flex .point__service__wrapper {
    gap: 24px;
    width: 100%;
  }

  .point__service__wrapper div:first-of-type {
    flex-wrap: wrap;
    gap: 8px;
  }

  .point__service__wrapper div:first-of-type img {
    width: 100%;
    height: auto;
  }

  .point__service__wrapper div:first-of-type div {
    width: 100% !important;
    gap: 8px;
  }

  .point__service .point__service__wrapper:nth-of-type(6) div:first-of-type img{
    width: 224px;
  }

  .point__service__wrapper div:first-of-type {
    justify-content: center;
  }

  .point__service .d-flex .point__service__wrapper:nth-of-type(6) div:first-of-type img {
    width: 224px;
  }

  .point__service .d-flex .point__service__wrapper:nth-of-type(6) div:first-of-type div {
    width: 100%;
  }

  #product {
    padding-top: 48px;
  }

  .base-button.ui-static-button {

    &.hotel__button,
    &.product__button {
      background: #004E74 !important;
      color: #fff;
      font-weight: 700;
      padding: 12px 0;
      display: block;
      height: auto;
      line-height: 150%;
    }
  }
}