@charset "utf-8";
/* 「初めての海外旅行」レスポンシブCSS */

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


/**/
/*★ リセット ★*/
h1, h2, h3, h4, h5, h6, p, ul {
  font-weight: inherit;
  font-size: 1em;
}
ol {
  margin: 0;
}
li {
  list-style: none;
}
img {
  max-width: 100%;
  height: auto;
}
.main {
  overflow: hidden;
}
.main div:not([class])::after {
  content: none;
}
.main a {
  text-decoration: none;
}
.main b {
  font-weight: normal;
}
.main .is-em {
  font-weight: bold;
}
.is-inline-block {
  display: inline-block;
}
@media (width < 861px) {
  .is-dsp-pc {
    display: none;
  }
}
@media (width >= 861px) {
  .is-dsp-sp {
    display: none;
  }
}

/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
#hisApp {
  position: relative;
}
:root {
  --default-font-size-pc: 14px;
  --default-font-size-sp: calc(14vw / 3.75);
  --default-font-size-val: 14;
  --default-font-size: min(var(--default-font-size-sp), var(--default-font-size-pc));
  --default-color-blue: #10069F;
  --default-color-rightblue01: #046ECF;
  --default-color-rightblue02: #10A4E3;
  --default-color-rightgreen: #00D0D0;
  --default-color-yellow: #FDEA44;
  --default-color-pink: #E1398A;
  --default-color-white: #fff;
  --default-ff-icon: "Material Symbols Rounded";
  --default-icon-arw-r: "\e5e1";
  --default-icon-blank: "\e89e";
  --default-width-sp: (335vw / 3.75);
  --default-width-pc: 992px;
  --default-width: min((335vw / 3.75), 992px);
  --default-bg-width-pc: max(100% , 1920px);
  --default-bg-setting: no-repeat 0 0 / contain;
  --default-hover-speed: .6s;
  --default-hover-transition: background var(--default-hover-speed);
  --default-hover-transition2: color var(--default-hover-speed);
}
#mainArea {
  font-family: "ZenMaruGothic", sans-serif;
  font-size: var(--default-font-size);
  color: var(--default-color-blue);
  line-height: 1.6;
  padding-bottom: 0 !important;
}
.section__inner {
  width: var(--default-width);
  margin: auto;
  #reco-dst & {
    position: relative;
    padding: min((80vw / 3.75), 60px) 0;
    @media (width <560px) {
      .is-sp & {
        width: 100%;
      }
    }
    @media (width >=560px) {
      .is-sp & {
        padding-top: min((85vw / 3.75), 100px);
      }
    }
    &::before, &::after {
      display: block;
      content: "";
      width: var(--bg-illu-w);
      aspect-ratio: 1 / 1;
      background: var(--bg-illu-img) var(--default-bg-setting);
      position: absolute;
      top: var(--bg-illu-posi-top);
      left: var(--bg-illu-posi-left);
      right: var(--bg-illu-posi-right);
    }
    #ciao & {
      padding-top: min((85vw / 3.75), 80px);
      &::before {
        --bg-illu-w: min((85vw / 3.75), 135px);
        --bg-illu-img: url(../images/illu_thailand.webp);
        --bg-illu-posi-top: max((-3vw / 3.75), -3px);
        --bg-illu-posi-left: max((-7vw / 3.75), -7px);
        transform: rotate(-19deg);
      }
      &::after {
        --bg-illu-w: min((66vw / 3.75), 110px);
        --bg-illu-img: url(../images/illu_korea.webp);
        --bg-illu-posi-top: min((145vw / 3.75), 145px);
        --bg-illu-posi-right: max((-5vw / 3.75), -5px);
        transform: rotate(17deg);
      }
      @media (width >=560px) {
        .is-sp & {
          &::before {
            --bg-illu-posi-top: -43px;
            --bg-illu-posi-left: -50px;
          }
          &::after {
            --bg-illu-posi-top: 115px;
            --bg-illu-posi-right: -48px;
          }
        }
      }
      .is-pc & {
        &::before {
          --bg-illu-w: 132px;
          --bg-illu-posi-top: 162px;
          --bg-illu-posi-left: -125px;
        }
        &::after {
          --bg-illu-w: 118px;
          --bg-illu-posi-top: 200px;
          --bg-illu-posi-right: -111px;
        }
      }
    }
    #impresso & {
      &::before {
        --bg-illu-w: min((66vw / 3.75), 110px);
        --bg-illu-img: url(../images/illu_italy.webp);
        --bg-illu-posi-top: max((-7vw / 3.75), -7px);
        --bg-illu-posi-left: max((-2vw / 3.75), -2px);
        transform: rotate(-19deg);
      }
      &::after {
        --bg-illu-w: min((62vw / 3.75), 100px);
        --bg-illu-img: url(../images/illu_france.webp);
        --bg-illu-posi-top: min((144vw / 3.75), 144px);
        --bg-illu-posi-right: max((-15vw / 3.75), -15px);
        transform: rotate(23deg);
      }
      @media (width >=560px) {
        .is-sp & {
          &::before {
            --bg-illu-posi-top: -25px;
            --bg-illu-posi-left: -44px;
          }
          &::after {
            --bg-illu-posi-top: 125px;
            --bg-illu-posi-right: -55px;
          }
        }
      }
      .is-pc & {
        &::before {
          --bg-illu-w: 106px;
          --bg-illu-posi-top: 165px;
          --bg-illu-posi-left: -65px;
        }
        &::after {
          --bg-illu-w: 118px;
          --bg-illu-posi-top: 190px;
          --bg-illu-posi-right: -80px;
        }
      }
    }
  }
  .section[id^="step"]:not(:has(~ .section[id^="step"])) & {
    padding-bottom: min((70vw / 3.75), 130px); 
  }
  #faq & {
    padding: min((60vw / 3.75), 90px) 0 min((55vw / 3.75), 50px);
  }
  #banner & {
    padding: min((55vw / 3.75), 50px) 0 min((40vw / 3.75), 50px);
  }
}
.section__title {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-content: center;
  gap: .4em;
  color: var(--default-color-rightblue02);
  font-size: min((27vw / 3.75), 34px);
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
  margin-bottom: min((32vw / 3.75), 25px);
  .section:not([id^="step"]) & {
    &::before, &::after {
      content: "";
      height: 100%;
      aspect-ratio: 120 / 442;
      background: url(../images/ttl_kazari.svg) no-repeat 0 bottom / contain;
    }
    &::after {
      transform: scale(-1, 1);
    }
  }
  .section[id^="reco-dst"] & {
    .is-sp & {
      width: calc(320vw / 3.75);
      margin: 0 auto min((32vw / 3.75), 25px);
      z-index: 2;
      position: relative;
    }
  }
  .section[id^="step"] & {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--default-color-yellow);
  }
}

/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
/* mv */
#mvArea {
  position: relative;
  @media (min-width: 581px) {
    .mv__img .base-picture__image {
      display: block;
      width: 100%;
      height: var(--mv-photo-h, calc(509vw/ 11.15));
      object-fit: cover;
    }
  }
  @media (min-width: 1116px) {
    --mv-photo-h: auto;
    .mv__wrapper {
      width: 992px;
      margin: auto;
    }
    .mv__img .base-picture {
      width: 2506px;
      margin-left: calc((992px - 2506px) / 2);
    }
  }
}

/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/* section-nav */
.section-nav__wrapper {
  width: 100%;
  background: var(--default-color-white);
  position: relative;
  &.is-fixed-navi {
    position: fixed;
    top: var(--posi-top, -130px);
    left: 0;
    transition: top .5s;
    z-index: 3;
    border-bottom: min((2vw / 3.75), 4px) solid var(--default-color-yellow);
    &.is-fixed-active {
      --posi-top: 0;
    }
  }
}
.section-nav__list {
  max-width: var(--default-width-pc);
  margin: auto;
  display: grid;
  padding: 0 min((3vw / 3.75), 4px);
  grid-template-columns: repeat(var(--nav-col, 2), 1fr);
  .is-pc & {
    --nav-col: 6;
  }
  @media (width >=560px) {
    .is-sp & {
      --nav-col: 3;
    }
  }
  .is-sp .is-fixed-navi & {
    display: flex;
    padding: 0;
  }
}
.section-nav__item {
  --sec-nav-border-right: linear-gradient(to bottom, var(--default-color-yellow), var(--default-color-yellow) 1px, transparent 2px, transparent 2px) repeat-y right bottom / 1px 4px;
  .is-sp & {
    .is-main-navi & {
      background-image : linear-gradient(to bottom, var(--default-color-yellow), var(--default-color-yellow) 1px, transparent 2px, transparent 2px), linear-gradient(to left, var(--default-color-yellow), var(--default-color-yellow) 1px, transparent 2px, transparent 2px);
      background-size: 1px 4px, 4px 1px;
      background-position: right top, right bottom;
      background-repeat:repeat-y, repeat-x;
    }
    .is-fixed-navi & {
      flex-grow: 1;
      min-width: calc(45vw / 3.75);
      background: var(--sec-nav-border-right);
      &:last-child {
        background: none;
      }
    }
  }
  @media (width < 560px) {
    .is-sp & {
      .is-main-navi & {
        &:nth-child(even) {
          background-image : linear-gradient(to bottom, #fff, #fff 1px, transparent 2px, transparent 2px), linear-gradient(to left, var(--default-color-yellow), var(--default-color-yellow) 1px, transparent 2px, transparent 2px);
        }
      }
    }
  }
  @media (width >=560px) {
    .is-sp & {
      .is-main-navi & {
        &:nth-child(3n) {
          background-image : linear-gradient(to bottom, #fff, #fff 1px, transparent 2px, transparent 2px), linear-gradient(to left, var(--default-color-yellow), var(--default-color-yellow) 1px, transparent 2px, transparent 2px);
        }
      }
    }
  }
  .is-pc & {
    background: var(--sec-nav-border-right);
    &:last-child {
      background: none;
    }
  }
}
.section-nav__link {
  display: flex;
  flex-direction: column;
  gap: min((13vw / 3.75), 8px);
  line-height: 1;
  height: 100%;
  padding: min((15vw / 3.75), 20px) 0;
  cursor: pointer;
  .is-fixed-navi & {
    justify-content: center;
    .is-sp & {
      padding: min((10vw / 3.75), 10px) 0;
    }
  }
  .is-pc & {
    padding: 7px 10px;
    .is-fixed-navi & {
      padding: 3px;
    }
  }
  .is-active & {
    background: var(--default-color-yellow);
  }
}
.section-nav__link--sub {
  font-size: min((12vw / 3.75), 12px);
  color: var(--default-color-rightblue02);
  [class^="is-step"] &, [class*="is-step"] & {
    display: flex;
    justify-content: center;
    align-items: center;
    &::before, &::after {
      content: "ー";
    }
  }
  .is-sp .is-fixed-navi & {
    display: none;
  }
}
.section-nav__link--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: min((22vw / 3.75), 15px);
  font-weight: bold;
  color: var(--default-color-blue);
  margin-top: auto;
  .is-fixed-navi & {
    gap: min((22vw / 3.75), 8px);
    .is-sp & {
      font-size: min((11vw / 3.75), 16px);
      line-height: 1.3;
      margin-top: 0;
    }
  }
  &::after {
    content: var(--default-icon-arw-r);
    font-family: var(--default-ff-icon);
    color: var(--default-color-rightgreen);
    line-height: .8;
    font-weight: bold;
    width: .9em;
    transform: rotate(90deg);
  }
}
.is-sp .is-fixed-navi .section-nav__link--text::after {
  content: none;
}

/* reco-dst */
.reco-dst__block {
  position: relative;
  &::before {
    display: block;
    content: "";
    width: 100%;
    height: 300px;
    background: var(--default-color-white);
    position: absolute;
    top: 0;
  }
  .is-pc & {
    position: relative;
    background: url(../images/illu_beach_repeat.webp) repeat-y center top 300px / 1500px; 
  }
}
.reco-dst__intro {
  width: var(--default-width);
  margin: auto;
  margin-bottom: min((32vw / 3.75), 32px);
  position: relative;
  &::before {
    display: block;
    content: "";
    background: var(--bg-tour-type) var(--default-bg-setting);
    transform: rotate(-90deg);
    position: absolute;
    width: var(--bg-tour-type-size-w);
    height: var(--bg-tour-type-size-h);
    top: var(--bg-tour-type-posi-top);
    left: var(--bg-tour-type-posi-left);
  }
  #ciao & {
    --bg-tour-type: url(../images/illu_ciao.svg);
    --bg-tour-type-size-w: min((155vw / 3.75), 200px);
    --bg-tour-type-size-h: min((58vw / 3.75), 75px);
    --bg-tour-type-posi-top: max((-40vw / 3.75), -40px);
    --bg-tour-type-posi-left: max((-80vw / 3.75), -117px);
    @media (width >=560px) {
      .is-sp & {
        --bg-tour-type-posi-top: -10px;
      }
    }
  }
  #impresso & {
    --bg-tour-type: url(../images/illu_impresso.svg);
    --bg-tour-type-size-w: min((255vw / 3.75), 380px);
    --bg-tour-type-size-h: min((59vw / 3.75), 90px);
    --bg-tour-type-posi-top: min((10vw / 3.75), 80px);
    --bg-tour-type-posi-left: max((-135vw / 3.75), -210px);
    @media (width >=560px) {
      .is-sp & {
        --bg-tour-type-posi-top: 80px;
      }
    }
  }
  .is-pc & {
    width: 680px;
    &::before {
      content: none;
    }
  }
}
.reco-dst__intro--lead {
  font-size: min((22vw / 3.75), 24px);
  font-weight: bold;
  color: var(--default-color-rightgreen);
  text-align: center;
}
.reco-dst__intro--detail {
  display: flex;
  flex-direction: column;
  gap: min((15vw / 3.75), 15px);
  color: var(--default-color-white);
  background: var(--default-color-rightgreen);
  border-radius: min((16vw / 3.75), 16px);
  padding: min((20vw / 3.75), 18px) min((24vw / 3.75), 24px);
  margin-top: min((8vw / 3.75), 8px);
  position: relative;
  z-index: 2;
}
.reco-dst__intro--detail--main {
  font-size: min((16vw / 3.75), 18px);
  font-weight: bold;
}
.reco-dst__intro--detail--text {
  font-size: min((14vw / 3.75), 15px);
}
.reco-dst__wrapper {
  position: relative;
  .is-pc & {
    &::before {
      display: block;
      content: "";
      background: var(--bg-tour-type) var(--default-bg-setting);
      transform: rotate(-90deg);
      position: absolute;
      width: var(--bg-tour-type-size-w);
      height: var(--bg-tour-type-size-h);
      top: var(--bg-tour-type-posi-top);
      left: var(--bg-tour-type-posi-left);
    }
    #ciao & {
      --bg-tour-type: url(../images/illu_ciao.svg);
      --bg-tour-type-size-w: 194px;
      --bg-tour-type-size-h: 73px;
      --bg-tour-type-posi-top: 40px;
      --bg-tour-type-posi-left: -128px;
    }
    #impresso & {
      --bg-tour-type: url(../images/illu_impresso.svg);
      --bg-tour-type-size-w: 383px;
      --bg-tour-type-size-h: 91px;
      --bg-tour-type-posi-top: 135px;
      --bg-tour-type-posi-left: -210px;
    }
  }
}
.reco-dst__list {
  position: relative;
  .is-pc & {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    &:has(> :nth-child(-n+2):last-child) {
      justify-content: center;
    }
  }
  @media (width >=560px) {
    .is-sp & {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
    }
    &:has(> :nth-child(-n+1):last-child) {
      justify-content: center;
    }
  }
}
.reco-dst__list--item {
  display: flex;
  flex-direction: column;
  background: var(--default-color-white);
  border: 1px solid var(--default-color-blue);
  border-radius: min((16vw / 3.75), 16px);
  overflow: hidden;
  position: relative;
  z-index: 2;
  .is-pc & {
    width: calc((100% - (28px * 2)) / 3);
  }
  @media (width >=560px) {
    .is-sp & {
      width: calc((100% - 28px) / 2);
    }
  }
}
.reco-dst__list--text--wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: min((15vw / 3.75), 15px) min((24vw / 3.75), 20px) min((24vw / 3.75), 24px);
  .button__wapper {
    margin-top: auto;
    padding-top: min((36vw / 3.75), 36px);
  }
}
.reco-dst__list--title {
  font-size: min((20vw / 3.75), 20px);
  font-weight: bold;
  margin-bottom: min((13vw / 3.75) ,13px);
}
.reco-dst__list--text {
  font-size: min((14vw / 3.75), 15px);
}

/* slick */
.reco-dst__list.slick-initialized .slick-slide {
  display: flex;
  width: var(--default-width);
  margin: 0 calc(20vw / 3.75);
  padding: 0;
}
.reco-dst__list .slick-dots {
  margin: min((30vw / 3.75), 30px) auto 0;
  &::before, &::after {
    display: block;
    content: "";
    aspect-ratio: 1 / 1;
    position: absolute;
    width: var(--bg-illu-w);
    bottom: var(--bg-illu-posi-bottom);
    left: var(--bg-illu-posi-left);
    right: var(--bg-illu-posi-right);
  }
  &::before {
    --bg-illu-w: min((94vw / 3.75), 120px);
    background: url(../images/illu_hawaii.webp) var(--default-bg-setting);
    --bg-illu-posi-bottom: max((-20vw / 3.75), -20px);
    --bg-illu-posi-left: min((15vw / 3.75), 25px);
    transform: rotate(-18deg);
    z-index: -1;
  }
  @media (width >=560px) {
    &::before {
      --bg-illu-posi-bottom: -8px;
    }
  }
  &::after {
    --bg-illu-w: min((115vw / 3.75), 155px);
    background: url(../images/illu_guam.webp) var(--default-bg-setting);
    --bg-illu-posi-bottom: max((-65vw / 3.75), -65px);
    --bg-illu-posi-right: min((10vw / 3.75), 10px);
    transform: rotate(20deg);
  }
}
.reco-dst__list .slick-dots li button {
  background: #BEBDD4;
  width: min((12vw / 3.75), 16px);
  height: min((12vw / 3.75), 16px);
  border-radius: 50%;
  margin: 0 min((6vw / 3.75), 10px);
}
.reco-dst__list .slick-dots .slick-active button {
  background: var(--default-color-blue);
}
.slick-dots li {
  z-index: 2;
  margin: 0 !important;
}

/* step */
.section[id^="step"] {
  padding-top: min((110vw / 3.75), 190px);
  & .step-bg__wrapper {
    border-top: min((1vw / 3.75), 2px) solid var(--default-color-white);
    padding-top: min((30vw / 3.75), 50px);
    position: relative;
  }
  &:nth-child(odd of [id^="step"]){
    background: var(--default-color-rightgreen);
    & .step-bg__wrapper {
      background: var(--default-color-rightblue02);
    }
  }
  &:nth-child(even of [id^="step"]){
    background: var(--default-color-rightblue02);
    & .step-bg__wrapper {
      background: var(--default-color-rightgreen);
    }
  }
  &:nth-child(1 of [id^="step"]) {
    background: transparent;
  }
  .section__title {
    margin-bottom: min((48vw / 3.75), 56px);
    .base-title--image {
      width: min((178vw / 3.75), 240px);
      height: min((178vw / 3.75), 240px);
      border-radius: 50%;
      border: min((1vw / 3.75), 2px) solid var(--default-color-white);
      clip-path: polygon(0 0, 100% 0%, 100% 50%, 0 50%);
      position: absolute;
      top: max((calc(-177vw / 2) / 3.75), calc(-240px / 2));
      z-index: 2;
      .section:nth-child(even) & {
        background: var(--default-color-rightblue02);
      }
      .section:nth-child(odd) & {
        background: var(--default-color-rightgreen);
      }
      img {
        margin-top: min((23vw / 3.75), 28px);
        width: min((132vw / 3.75), 178px);
        height: min((59vw / 3.75), 81px);
      }
    }
  }
}
.step-lineup {
  display: grid;
  grid-template-columns: 1fr;
  gap: min((32vw / 3.75), 48px);
}
.step-lineup--item--title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min((12vw / 3.75), 32px);
  color: var(--default-color-white);
  font-size: min((22vw / 3.75), 32px);
  line-height: 1.3;
  text-align: center;
  margin-bottom: min((8vw / 3.75), 8px);
  &::before {
    content: "";
    --icon-size: min((48vw / 3.75), 56px);
    width: var(--icon-size);
    height: var(--icon-size);
    background: var(--icon-img) var(--default-bg-setting);
    margin-left: max((-48vw / 3.75), -56px);
  }
  .is-passport & {
    --icon-img: url(../images/icon_passport.webp);
  }
  .is-visa & {
    --icon-img: url(../images/icon_visa.webp);
  }
  .is-reservation & {
    --icon-img: url(../images/icon_reservation.webp);
  }
  .is-hoken_cancel & {
    --icon-img: url(../images/icon_hoken_cancel.webp);
  }
  .is-fuel & {
    --icon-img: url(../images/icon_fuel.webp);
  }
  .is-op & {
    --icon-img: url(../images/icon_op.webp);
  }
  .is-swc & {
    --icon-img: url(../images/icon_swc.webp);
  }
  .is-hoken & {
    --icon-img: url(../images/icon_hoken.webp);
  }
  .is-wifi & {
    --icon-img: url(../images/icon_wifi.webp);
  }
  .is-belongings & {
    --icon-img: url(../images/icon_belongings.webp);
  }
  .is-research & {
    --icon-img: url(../images/icon_research.webp);
  }
  .is-oe & {
    --icon-img: url(../images/icon_oe.webp);
  }
  .is-airport & {
    --icon-img: url(../images/icon_airport.webp);
  }
  .is-ovsbranch & {
    --icon-img: url(../images/icon_ovsbranch.webp);
  }
  .is-arrival & {
    --icon-img: url(../images/icon_arrival.webp);
  }
  .is-souvenir & {
    --icon-img: url(../images/icon_souvenir.webp);
  }
}
.step-lineup--item--title--text {
  .is-sp & {
    display: flex;
    flex-direction: column;
    & .step-lineup--item--title--sub {
      font-size: min((16vw / 3.75), 26px);
    }
  }
}
.step-lineup--item--inner {
  display: grid;
  padding: min((24vw / 3.75), 32px);
  grid-template-columns: 1fr;
  gap: var(--yohaku) 0;
  --yohaku: min((48vw / 3.75), 48px);
  background: var(--default-color-white);
  border-radius: min((16vw / 3.75), 16px);
  .is-pc & {
    --yohaku: 32px
  }
  @media (width >=560px) {
    .is-sp & {
      --yohaku: 32px;
      padding: 20px;
    }
  }
}
.step-lineup__conts {
  display: grid;
  grid-template:
    "img1 txt"
  ;
  gap: 0 16px;
  &:has(.step-lineup__conts--image02) { 
    grid-template:
    "img1 txt"
    "img2 txt"
    ;
  }
  &:not(:has(.step-lineup__conts--image01)) { 
    grid-template:
    "txt"
    ;
  }
  @media (width < 560px) {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}
.step-lineup__conts--detail {
  display: flex;
  flex-direction: column;
  grid-area: txt;
  margin-top: 0;
  &:has(.step-lineup__conts--image01) .button__wapper.is-type01 {
    gap: 24px;
  }
  @media (width < 560px) {
    .is-sp & {
      .step-lineup__conts:first-child & {
        margin-top: calc(18vw / 3.75);
      }
      &:has(.step-lineup__conts--image01) .button__wapper.is-type01 {
        gap: 0;
      }
    }
  }
}
.step-lineup__conts--title {
  display: flex;
  flex-direction: column;
  gap: min((15vw / 3.75), 8px);
  font-size: min((16vw / 3.75), 22px);
  font-weight: bold;
  em {
    background: linear-gradient(transparent 50%, var(--default-color-yellow) 60%);
  }
  &:not([data-pop=""]) {
    &::before {
      content:attr(data-pop);
      width: fit-content;
      font-size: min((12vw / 3.75), 12px);
      font-weight: 500;
      background: var(--default-color-pink);
      border-radius: min((4vw / 3.75), 4px);
      color: var(--default-color-white);
      padding: min((3vw / 3.75), 3px) min((9vw / 3.75), 9px);
      box-shadow: 0 16px 0 -7px var(--default-color-pink);
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(50% + 5px) 100%, 50% calc(100% + 8px), calc(50% - 5px) 100%, 0% 100%);
    }
  }
}
.step-lineup__conts--texts {
  font-size: min((14vw / 3.75), 16px);
  margin-top: min((12vw / 3.75), 18px);
  &:first-child {
    margin-top: 0;
  }
}
.step-lineup__conts--notes {
  font-size: min((12vw / 3.75), 13px);
  color: var(--default-color-pink);
  margin-top: 1em;
}
.step-lineup__conts--links {
  display: grid;
  grid-template-columns: 1fr;
  gap: min((46vw / 3.75), 46px);
  margin-top: min((36vw / 3.75), 32px);
  @media (width >=560px) {
    .is-sp & {
      margin-top: min((36vw / 3.75), 20px);
    }
  }
  .is-pc & {
    gap: 26px;
  }
  @media (width >=560px) {
    .is-sp & {
      gap: 20px;
    }
  }
  &:first-child {
    margin-top: 0;
  }
}
.step-lineup__conts--image01 {
  order: -1;
  width: 240px;
  aspect-ratio: 240 / 168;
  grid-area: img1;
  @media (width <560px) {
    .is-sp & {
      width: 100%
    }
  }
}
.step-lineup__conts--image02 {
  width: 240px;
  grid-area: img2;
  text-align: center;
  margin-top: min((36vw / 7.5), 16px);
  @media (width <560px) {
    .is-sp & {
      width: 100%
    }
  }
  img {
    width: var(--illu-size-w);
    .is-wifi & {
      --illu-size-w: min((122vw / 3.75), 146px);
    }
    .is-research & {
      --illu-size-w: min((171vw / 3.75), 214px);
    }
    .is-airport & {
      --illu-size-w: min((181vw / 3.75), 220px);
    }
  }

}

/* faq */
.faq__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: min((32vw / 3.75), 32px);
}
.faq__list--item {
  border: 1px solid var(--default-color-blue);
  border-radius: min((16vw / 3.75), 16px);
  padding: min((16vw / 3.75), 24px);
  & > [class^="faq__"] {
    display: flex;
    align-items: center;
    gap: min((8vw / 3.75), 8px);
    &::before {
      content: var(--icon-text);
      color: var(--default-color-yellow);
      font-size: min((16vw / 3.75), 20px);
      font-weight: bold;
      border-radius: 100%;
      height: min((24vw / 3.75), 32px);
      line-height: 1.45;
      aspect-ratio: 1 / 1;
      text-align: center;
    }
  }
}
.faq__question {
  font-size: min((16vw / 3.75), 22px);
  font-weight: bold;
  color: var(--default-color-rightblue02);
  background: linear-gradient(to right, var(--default-color-blue), var(--default-color-blue) 1px, transparent 2px, transparent 2px) repeat-x left bottom / 4px 1px;
  padding-bottom: min((16vw / 3.75), 16px);
  &::before {
    --icon-text: "Q";
    background: var(--default-color-rightblue02);
  }
}
.faq__answer {
  align-items: start !important;
  padding-top: min((16vw / 3.75), 16px);
  &::before {
    --icon-text: "A";
    background: var(--default-color-rightgreen);
  }
}
.faq__answer--text {
  font-size: min((14vw / 3.75), 16px);
}

/* reco-banner */
.reco-banner__list {
  display: grid;
  --yohaku: min((15vw / 3.75), 32px);
  width: var(--banner-size, min(var(--default-width-sp), 510px));
  grid-template-columns: repeat(var(--banner-col, 2), 1fr);
  gap: var(--yohaku);
  margin: 0 auto;
  .reco-banner__link {
    display: block;
    img {
      border-radius: min((8vw / 3.75), 8px);
    }
  }
  .is-pc & {
    --banner-col: 4;
    --banner-size: min(var(--default-width-sp), 872px);
    gap: calc(var(--yohaku) - 8px);
    img {
      border: 4px solid var(--banner-border-bg, var(--default-color-white));
    }
  }
}

/* button__wapper */
.button__wapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min((15vw / 3.75), 12px);
  --btn-bg: var(--default-color-yellow);
  --btn-txt-color: var(--default-color-blue);
  --btn-fs :min((14vw / 3.75), 14px);
  &:not([data-pop=""]) {
    &::before {
      content:attr(data-pop);
      display: flex;
      justify-content: center;
      width: fit-content;
      font-size: min((12vw / 3.75), 12px);
      font-weight: 500;
      background: var(--default-color-pink);
      border-radius: min((4vw / 3.75), 4px);
      color: var(--default-color-white);
      padding: min((3vw / 3.75), 3px) min((9vw / 3.75), 9px);
      box-shadow: 0 16px 0 -7px var(--default-color-pink);
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, calc(50% + 5px) 100%, 50% calc(100% + 8px), calc(50% - 5px) 100%, 0% 100%);
    }
  }
  &:has(.base-button__sub) {
    gap: min((20vw / 3.75), 20px);
  }
  .step-lineup__conts:not(:has(.step-lineup__conts--image01)) & {
    gap: min((20vw / 3.75), 20px);
  }
  @media (width >=560px) {
    .is-sp & {
      .step-lineup__conts:not(:has(.step-lineup__conts--image01)) & {
        &.is-type01 {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          flex-wrap: wrap;
          &:not([data-pop=""]) {
            &::before {
              box-shadow: 15px 0 0 -7px var(--default-color-pink);
              clip-path: polygon(0% 0%, 100% 0%, 100% calc(50% - 4px), calc(100% + 8px) 50%, 100% calc(50% + 4px), 100% 100%, 0% 100%);
            }
          }
        }
      }
    }
  }
  .faq__list--item & {
    margin-top: min((46vw / 3.75), 46px);
  }
  .is-pc & {
    &.is-type01 {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      &:not([data-pop=""]) {
        &::before {
          box-shadow: 15px 0 0 -7px var(--default-color-pink);
          clip-path: polygon(0% 0%, 100% 0%, 100% calc(50% - 4px), calc(100% + 8px) 50%, 100% calc(50% + 4px), 100% 100%, 0% 100%);
        }
      }
    }
  }
}
.base-button-dst, .base-button-type01, .base-button-type02 {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.base-button-type01 {
  gap: min((12vw / 3.75), 12px);
}
.base-button-type02 {
  gap: min((10vw / 3.75), 10px);
}
.base-button__sub {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: .5em;
  color: var(--default-color-rightblue01);
  font-size: min((12vw / 3.75), 12px);
  font-weight: bold;
  &::before, &::after {
    content: "";
    width: min((1vw / 7.5), 1px);
    height: 1.25em;
    background: currentColor;
  }
  &::before {
    transform: rotate(-40deg);
    margin-right: .1em;
  }
  &::after {
    transform: rotate(40deg);
  }
}
.base-button-dst__link, .base-button-type01__link, .base-button-type02__link {
  &::after {
    content: var(--icon, var(--default-icon-arw-r));
    font-family: var(--default-ff-icon);
  }
  &[href^="#"]::after {
    transform: rotate(90deg);
    margin-top: .25em;
  }
  &[target="_blank"]::after {
    --icon: var(--default-icon-blank);
  }
}
:is(.base-button-dst__link, .base-button-type01__link) {
  --btn-gap: 1em;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--btn-gap);
  align-items: center;
  color: var(--default-color-blue);
  font-size: var(--btn-fs);
  line-height: 1.2;
  font-weight: bold;
  text-align: center;
  width: fit-content;
  min-height: min((45vw / 3.75),45px);
  border-radius: 100px;
  background: var(--btn-bg);
  padding: 15px 12px 15px 16px;
}
.base-button-type02__link {
  --btn-gap: 1em;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--btn-gap);
  align-items: center;
  color: var(--default-color-rightblue01);
  font-size: var(--btn-fs);
  line-height: 1.2;
  font-weight: bold;
  width: fit-content;
  border: 1px solid var(--default-color-rightblue01);
  border-radius: min((8vw / 3.75), 8px);
  background: var(--default-color-white);
  padding: min((5vw / 3.75), 5px) min((10vw / 3.75), 10px);
}

/*★ ＝＝ footerArea ＝＝ ★*/
/* searchArea */
#searchApp {
  padding: min((40vw / 3.75), 50px) 0 min((20vw / 3.75), 50px);
}

/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .section-nav__link {
    transition: var(--default-hover-transition);
    &:hover {
      background: var(--default-color-yellow);
    }
  }
  .base-button-dst__link, .base-button-type01__link {
    transition: var(--default-hover-transition);
    &:hover {
      background: var(--default-color-blue);
      color: var(--default-color-yellow);;
    }
  }
  .base-button-type02__link {
    transition: var(--default-hover-transition);
    &:hover {
      background: var(--default-color-blue);
      color: var(--default-color-white);;
    }
  }
  .reco-banner__link {
    &:hover {
      --banner-border-bg: var(--default-color-blue);
    }
  }
}