@charset "utf-8";
/* 「一人旅」レスポンシブ メインCSS */
/*------------------------------------------------*/
/*.section {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}*/
/*★ ＝＝ headerArea ＝＝ ★*/
#headerArea {
  position: relative;
  background: var(--default-color-bg);
}
/*gnavi*/
.gnavi__wrapper {
  width: 100%;
  background: var(--default-color-bg);
  --border: min((3vw / 7.5), 3px) solid;
  border-top: var(--border);
  border-bottom: var(--border);
  box-shadow: 0px min((7vw / 7.5), 7px) 0px 0px rgba(0, 0, 0, .16);
  position: relative;
}
.gnavi__content {
  --portal-btn-size: min((170vw / 7.5), 140px);
  max-width: var(--default-width-pc);
  display: grid;
  grid-template-columns: max-content var(--portal-btn-size);
  justify-content: center;
  gap: min((40vw / 7.5), 40px);
  align-items: center;
  padding: min((15vw / 7.5), 8px) 0;
  margin: auto;
  .is-pc & {
    grid-template-columns: 1fr var(--portal-btn-size);
    padding: 8px 14px;
    min-height: 48px;
  }
  .gnavi__wrapper:not(:has(.portal-navi__button)) & {
    grid-template-columns: 1fr;
    .portal-navi {
      display: none;
    }
    .section-navi__list {
      justify-content: center;
      gap: 1.5em;
    }
  }
}
.gnavi__wrapper.is-fixed-navi {
  position: fixed;
  top: var(--posi-top, -100px);
  left: 0;
  transition: top .5s;
  z-index: 200;
  &.is-fixed-active {
    --posi-top: 0;
  }
}
/*gnavi -- section-navi*/
.section-navi__list {
  display: flex;
  .is-sp & {
    gap: 1em;
  }
  .is-pc & {
    justify-content: space-between;
  }
}
.section-navi__item.is-active {
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 110%;
    height: min((12vw / 7.5), 8px);
    background: var(--default-color-yellow);
    position: absolute;
    top: .75em;
    margin-left: -5%;
  }
}
.section-navi__link {
  cursor: pointer;
  font-size: min((22vw / 7.5), 14px);
  line-height: 1;
  font-weight: var(--default-fw-b);
  display: grid;
  justify-items: center;
  gap: .25em;
  position: relative;
  z-index: 1;
  .is-pc & {
    font-weight: bold;
    grid-template-columns: max-content auto;
  }
  &::after {
    content: var(--default-icon-arw-r);
    font-family: var(--default-ff-icon);
    line-height: .8;
    font-weight: 400;
    width: .9em;
    transform: rotate(90deg);
  }
}
.section-navi__item {
  .is-pc & {
    &:not(.is-target-pc) {
      display: none;
    }
  }
  .is-sp & {
    &:not(.is-target-sp) {
      display: none;
    }
  }
}
/*gnavi -- portal-navi*/
.portal-navi__button {
  font-size: min((20vw / 7.5), 14px);
  line-height: 1;
  background: #000;
  color: #fff;
  font-weight: bold;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25em;
  border-radius: min((5vw / 7.5), 5px);
  padding: .6em 1em .7em;
  &.is-open {
    --portalnavi-btn-icon: "\e15b";
  }
  &::after {
    content: var(--portalnavi-btn-icon, "\e145");
    font-family: var(--default-ff-icon);
    line-height: 1lh;
    font-size: 1.5em;
    font-weight: 400;
    width: .9em;
  }
}
.portal-navi__inner {
  position: relative;
}
.portal-navi__list--wrapper {
  position: absolute;
  z-index: 200;
  --portal-wrapper-border-color: #000;
  --portal-wrapper-bg: #fff;
  /*width: min((465vw / 7.5), 440px);*/
  width: max-content;
  max-width: min((535vw / 7.5), 380px);
  right: 0;
  background: var(--portal-wrapper-bg);
  color: var(--default-color-black);
  translate: 0 min((36vw / 7.5), 18px);
  border-radius: min((10vw / 7.5), 8px);
  border: 2px solid var(--portal-wrapper-border-color);
  box-shadow: 0px min((3vw / 7.5), 3px) 0px 0px rgba(0, 0, 0, .15);
  &::before, &::after {
    content: "";
    display: block;
    width: min((38vw / 7.5), 28px);
    height: min((25vw / 7.5), 15px);
    background: var(--portal-wrapper-bg);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    translate: -100% calc(-100% + 1px);
  }
  &::before {
    --portal-wrapper-bg: var(--portal-wrapper-border-color);
    z-index: 0;
    translate: -100% calc(-100% - 1.5px);
  }
  .portal-navi__list {
    /*display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));*/
    display: flex;
    flex-wrap: wrap;
    gap: min((14vw / 7.5), 7px) min((12vw / 7.5), 6px);
    padding: min((28vw / 7.5), 14px) min((22vw / 7.5), 11px);
    position: relative;
  }
  .portal-navi__list--link {
    cursor: pointer;
    width: 100%;
    padding: .3em .5em .4em;
    font-size: min((24vw / 7.5), 13px);
    display: flex;
    align-items: center;
    gap: .25em;
    font-weight: bold;
    &::before {
      content: var(--default-icon-arw-r);
      font-family: var(--default-ff-icon);
      line-height: .9;
      margin-top: 1px;
    }
  }
}
/*.portal-navi__list--link {
  width: 100%;
  padding: .3em .5em .4em;
  font-size: min((24vw / 7.5), 13px);
  display: flex;
  align-items: center;
  gap: .25em;
  cursor: pointer;
  &::before {
    content: var(--default-icon-arw-r);
    font-family: var(--default-ff-icon);
    line-height: .9;
    margin-top: 1px;
  }
}*/
/*.is-pc .portal-navi__inner {
  position: relative;
  .portal-navi__list--wrapper {
    width: 100%;
  }
}*/
/*mv*/
.mv__inner {
  --ttl-size-w: min((160vw / 7.5), 200px);
  display: grid;
  grid-template-areas: "photo1 ttl photo2";
  grid-template-columns: 1fr auto 1fr;
  height: min((600vw / 7.5), 600px);
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    grid-area: ttl;
    width: var(--ttl-size-w);
  }
}
.mv__photo {
  width: 100%;
  &.is-left {
    grid-area: photo1;
  }
  &.is-right {
    grid-area: photo2;
    transform: rotate(180deg);
    .mv__photo--item {
      transform: rotate(180deg);
    }
  }
}
.mv__photo--item--image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 340 / 600;
  .is-pc & {
    aspect-ratio: 1174 / 600;
  }
}
.mv__kazari {
  display: grid;
  grid-template-columns: repeat(2, min((2580vw / 7.5), 2664px));
  height: min((215vw / 7.5), 222px);
  gap: min((88vw / 7.5), 94px);
  position: absolute;
  bottom: max((-6vw / 7.5), -10px);
  z-index: 1;
}
.mv__kazari--item {
  width: 100%;
  height: 100%;
  animation: slide-yoko var(--slide-speed, 70s) var(--animation-loop);
  .is-pc & {
    --slide-speed: 60s;
  }
}
.mv__title {
  width: min((160vw / 7.5), 200px);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
  display: grid;
  justify-items: center;
  align-items: center;
  background: var(--default-color-bg);
}
.mv__title--text {
  width: min((119vw / 7.5), 120px);
}
/*search-button*/
.search-button .search-button__link {
  --size: min((128vw / 7.5), 128px);
  width: var(--size);
  height: var(--size);
  position: absolute;
  margin-top: var(--posi-tate, 33px);
  right: var(--posi-yoko, 20px);
  transition: right 1s, margin .5s;
  z-index: 100;
}
.search-button.is-fixed .search-button__link {
  position: fixed;
  top: 0;
  --posi-tate: 95px;
}
:is(.is-sp .search-button, .search-button.is-over) .search-button__link {
  --posi-yoko: -300px;
}
/*main-lead*/
.main-lead {
  text-align: center;
  font-size: min((26vw / 7.5), 18px);
  line-height: calc(48 / 26);
  font-weight: var(--default-fw-b);
  padding: min((50vw / 7.5), 65px) 0 min((45vw / 7.5), 80px);
  letter-spacing: 0;
  .is-sp & {
    letter-spacing: 0;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section-navi*/
/*section*/
/*section__notes*/
.section__notes {
  font-size: min((20vw / 7.5), 14px);
  line-height: 1.2;
  margin-top: 1em;
}
.section__notes--title {
  margin-bottom: .25em;
}
.section__notes--list {
  display: grid;
  gap: .25em;
}
/*section__title*/
.section__title {
  font-weight: var(--default-fw-b);
  text-align: center;
  line-height: 1.2;
  letter-spacing: var(--sec-ttl-ls, .2em);
  margin-bottom: var(--sec-ttl-mb, 0);
  .is-pc & {
    --sec-ttl-ls: .3em;
  }
  .base-title__inner {
    display: grid;
    justify-items: center;
    justify-content: center;
  }
  .base-title__text--main {
    font-size: var(--sec-ttl-fs-main, min((40vw / 7.5), 36px));
  }
  .base-title__text--sub.is-before {
    font-size: var(--sec-ttl-fs-sub-b);
  }
  .base-title__text--sub.is-after {
    font-size: var(--sec-ttl-fs-sub-a);
  }
  #type & {
    --sec-ttl-fs-main: min((56vw / 7.5), 56px);
    --sec-ttl-fs-sub-a: min((30vw / 7.5), 30px);
    width: var(--default-width);
    margin: 0 auto min((74vw / 7.5), 83px);
    position: relative;
    &::before {
      content: "Recommend";
      font-size: min((144vw / 7.5), 150px);
      line-height: .8;
      font-weight: bold;
      color: #edebe6;
      position: absolute;
      left: 0;
    }
    .is-sp & {
      &::before {
        letter-spacing: -.015em;
        top: calc(-10em / 144);
        transform: translateX(calc(-165em / 144));
      }
    }
    .is-pc & {
      &::before {
        letter-spacing: -.005em;
        bottom: calc(9em / 150);
        transform: translateX(calc(-32em / 150));
      }
    }
    &.js-animation {
      &::before {
        opacity: var(--sec-ttl-kazari-opacity, 0);
        transition: opacity 1s ease, margin .9s ease;
        transition-delay: 0s;
        margin-left: var(--sec-ttl-kazari-posi, -.5em);
      }
      &.is-active {
        --sec-ttl-kazari-opacity: 1;
        --sec-ttl-kazari-posi: 0;
      }
    }
    .base-title__inner {
      justify-content: start;
      grid-auto-flow: column;
      align-items: end;
      gap: min((10vw / 7.5), 10px);
      position: relative;
      z-index: 1;
    }
  }
  #product & {
    --sec-ttl-fs-sub-b: min((36vw / 7.5), 26px);
    --sec-ttl-fs-main: min((50vw / 7.5), 48px);
    --sec-ttl-fs-sub-a: var(--sec-ttl-fs-main);
    --sec-ttl-mb: min((120vw / 7.5), 106px);
    .is-small {
      font-size: min((36vw / 7.5), 36px);
    }
    .base-title__inner {
      grid-template-columns: repeat(2, min(50%, 331px));
      gap: min((34vw / 7.5), 20px) 0;
    }
    .base-title__text--sub.is-before {
      grid-column: span 2;
    }
    .base-title__text--main {
      --sec-ttl-bg: #000;
      --sec-ttl-bg2: #fff;
      --sec-ttl-bg-posi: 100%;
      font-weight: bold;
    }
    .base-title__text--sub.is-after {
      --sec-ttl-bg: #fff;
      --sec-ttl-bg2: #000;
      --sec-ttl-bg-posi: -100%;
    }
    .base-title__text--main, .base-title__text--sub.is-after {
      border: 1px solid #000;
      width: 100%;
      height: min((80vw / 7.5), 70px);
      background: var(--sec-ttl-bg2);
      overflow: hidden;
      word-break: keep-all;
      position: relative;
      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--sec-ttl-bg);
        transform: translateY(var(--sec-ttl-bg-posi));
        left: 0;
        position: absolute;
        transition: transform var(--animation-speed);
      }
      .section__title:not(.js-animation) &, .section__title.js-animation.is-active & {
        &::before {
          --sec-ttl-bg-posi: 0;
        }
      }
      .base-title__text--main--item, .base-title__text--sub--item {
        height: 100%;
        padding: .1em 0 .2em;
        display: flex;
        justify-content: center;
        align-items: center;
        color: transparent;
        background: var(--sec-ttl-bg2);
        background-clip: text;
        position: relative;
        z-index: 1;
      }
    }
  }
  #theme & {
    --sec-ttl-fs-sub-b: min((26vw / 7.5), 24px);
    --sec-ttl-fs-main: min((40vw / 7.5), 36px);
    --sec-ttl-mb: min((46vw / 7.5), 52px);
    .base-title__inner {
      display: grid;
      gap: .6em;
    }
  }
  #style & {
    --sec-ttl-fs-sub-b: min((30vw / 7.5), 15px);
    --sec-ttl-fs-main: min((50vw / 7.5), 48px);
    --sec-ttl-mb: min((80vw / 7.5), 128px);
    color: #fff;
    position: relative;
    &::before {
      content: "Style";
      font-size: min((200vw / 7.5), 290px);
      line-height: .9;
      font-weight: bold;
      color: transparent;
      --txt-stroke: min((1vw / 7.5), 2px) #fff;
      -webkit-text-stroke: var(--txt-stroke);
      text-stroke: var(--txt-stroke);
      opacity: .25;
      position: absolute;
      top: 50%;
      transform: translateY(calc(-50% - .2em));
      left: 0;
      right: 0;
      margin: auto;
    }
    &.js-animation {
      .base-title__inner {
        opacity: var(--sec-ttl-kazari-opacity, 0);
        transition: opacity 1s ease, transform .9s ease;
        transition-delay: 0s;
        transform: translateY(var(--sec-ttl-kazari-posi, .5em))
      }
      &.is-active {
        --sec-ttl-kazari-opacity: 1;
        --sec-ttl-kazari-posi: 0;
      }
    }
    .base-title__text--sub.is-before {
      --size: min((183vw / 7.5), 183px);
      width: var(--size);
      height: var(--size);
      letter-spacing: 1px;
      transform: rotate(40deg);
      position: absolute;
      margin-top: max((-60vw / 7.5), -45px);
      svg {
        overflow: visible;
      }
      path {
        fill: none;
      }
      text {
        fill: currentColor;
      }
    }
  }
  #support & {
    --sec-ttl-fs-sub-b: min((30vw / 7.5), 24px);
    --sec-ttl-fs-main: min((56vw / 7.5), 36px);
    --sec-ttl-mb: min((60vw / 7.5), 70px);
    --sec-ttl-kazari-img: url("../images/support_title_kazari.svg");
    --sec-ttl-kazari-size-w: min((150vw / 7.5), 112px);
    --sec-ttl-kazari-size-h: min((66vw / 7.5), 51px);
    --sec-ttl-kazari-posi-x: max((-30vw / 7.5), -30px);
    --sec-ttl-kazari-posi-y: max((-40vw / 7.5), -30px);
    .is-pc & {
      --sec-ttl-kazari-posi-x: -60px;
    }
  }
  #article & {
    --sec-ttl-mb: min((69vw / 7.5), 54px);
    --sec-ttl-kazari-img: url("../images/article_title_kazari.svg");
    --sec-ttl-kazari-size-w: min((186vw / 7.5), 186px);
    --sec-ttl-kazari-size-h: min((51vw / 7.5), 51px);
    --sec-ttl-kazari-posi-x: max((-33vw / 7.5), -37px);
    --sec-ttl-kazari-posi-y: max((-45vw / 7.5), -45px);
    --sec-ttl--icon: "\e42e";
    --sec-ttl--icon-fs: min((84vw / 7.5), 110px);
  }
  #faq & {
    --sec-ttl-mb: min((50vw / 7.5), 80px);
    --sec-ttl--icon: "\e887";
  }
  :is(#product, #support) & {
    .base-title__text--sub.is-before {
      display: flex;
      justify-content: center;
      align-items: end;
      gap: .75em;
      &::before, &::after {
        content: "";
        width: min((2vw / 7.5), 2px);
        height: 1.25em;
        background: currentColor;
      }
      &::before {
        transform: rotate(-40deg);
        margin-right: .1em;
      }
      &::after {
        transform: rotate(40deg);
      }
    }
  }
  :is(#article, #faq) & {
    .base-title__text--main {
      display: flex;
      display: flex;
      gap: .25em;
      align-items: center;
      justify-content: center;
      &::before {
        content: var(--sec-ttl--icon);
        font-family: var(--default-ff-icon);
        font-size: 1.1em;
        font-weight: 400;
      }
      #article & {
        &::before {
          transform: rotate(180deg);
        }
      }
      #faq & {
        &::before {
          margin-top: .1em;
        }
      }
    }
  }
  :is(#support, #article) & {
    .base-title__text--main {
      position: relative;
      &::after {
        display: block;
        content: "";
        width: var(--sec-ttl-kazari-size-w);
        height: var(--sec-ttl-kazari-size-h);
        background: var(--sec-ttl-kazari-img) no-repeat 0 0 / contain;
        bottom: var(--sec-ttl-kazari-posi-y);
        right: var(--sec-ttl-kazari-posi-x);
        position: absolute;
      }
    }
    .base-title__text--main--item {
      position: relative;
      z-index: 1;
    }
  }
}
/*sec -- type*/
#type {
  background: var(--default-color-bg);
  padding-top: min((80vw / 7.5), 150px);
  .is-beginner {
    --main-color: #fe7e00;
    --main-color2: #ffa800;
  }
  .is-woman {
    --main-color: #ff5963;
    --main-color2: #ff727c;
  }
  .is-male {
    --main-color: #1a79af;
    --main-color2: #3a9ad1;
  }
  .is-adventure {
    --main-color: #1e7c1f;
    --main-color2: #318c32;
  }
  .section__inner {
    width: 100%;
  }
}
.type__navi, .type__block--inner {
  width: var(--default-width);
  margin: auto;
}
.type__navi {
  transform: translateY(50%);
  margin-top: max((-101vw / 7.5), -140px); /*active時の高さ÷2＋文字用の余白分を指定*/
}
.type__navi--list {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.type__navi--item {
  --size: 100%;
  height: var(--navi-item-h, min((148vw / 7.5), 200px));
  aspect-ratio: 1 /1;
  border-radius: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  --navi-item-active-bg: color-mix(in srgb, var(--main-color) 80%, transparent);
  &[class*="active"] {
    --navi-item-h: min((170vw / 7.5), 240px);
    --navi-item-bg: var(--navi-item-active-bg);
    padding: min((16vw / 7.5), 20px);
    box-sizing: content-box;
    &::before {
      content: "";
      width: var(--size);
      height: var(--size);
      display: block;
      border-radius: 100%;
      position: absolute;
      background: linear-gradient(to bottom, var(--main-color2) 0%, var(--main-color2) 50%, #fff 50%, #fff 100%);
      mask: url("../images/type_menu_kazari_text.svg") no-repeat center / calc(100% - 2px);
      /*animation: 70s var(--animation-loop) rotate;*/
    }
  }
}
.type__navi--item--inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1 /1;
  border-radius: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  &::after {
    content: "";
    display: block;
    width: var(--size);
    height: var(--size);
    background: var(--navi-item-bg, rgba(0, 0, 0, .25));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
.type__navi--item--bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.type__navi--item--text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: var(--default-fw-b);
  font-size: var(--fs, min((22vw / 7.5), 30px));
  line-height: 1;
  transform: rotate(-15deg);
  .type__navi--item[class*="active"] & {
    --fs: min((28vw / 7.5), 38px);
  }
}
.type__block {
  background: var(--main-color2);
  padding: min((150vw / 7.5), 185px) 0;
}
.type__block--title {
  color: #fff;
  font-weight: var(--default-fw-b);
  font-size: min((48vw / 7.5), 36px);
  line-height: 1.3;
  text-align: center;
  letter-spacing: .1em;
  margin-bottom: min((46vw / 7.5), 50px);
}
.type__lineup {
  display: grid;
  gap: min((70vw / 7.5), 35px) min((30vw / 7.5), 16px);
  .is-pc & {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (width >=560px) {
    .is-sp & {
      .type__lineup--item {
        grid-template-areas:
          "img ttl"
          "img txt"
          "btn btn";
        grid-template-columns: min((250vw / 7.5), 350px) 1fr;
        grid-template-rows: max-content 1fr max-content;
      }
      .type__lineup--item--buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: min((10vw / 7.5), 10px) min((20vw / 7.5), 14px);
        --btn-min-w: min((300vw / 7.5), 300px);
        --btn-fs: min((22vw / 7.5), 16px);
        --btn-h: min((60vw / 7.5), 50px);
      }
    }
  }
}
.type__lineup--item {
  background: #fff;
  display: grid;
  grid-template-areas:
    "img"
    "ttl"
    "txt"
    "btn";
  padding: min((48vw / 7.5), 20px);
  gap: min((20vw / 7.5), 13px);
  .is-pc & {
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}
.type__lineup--item--title {
  grid-area: ttl;
  line-height: .8;
  .base-title__inner {
    display: flex;
    align-items: center;
    gap: min((40vw / 7.5), 20px);
    transform: translateY(-.35em);
  }
  .base-title__text--sub.is-before {
    font-size: min((100vw / 7.5), 80px);
    font-weight: var(--default-fw-b);
    color: #fff;
    --txt-stroke: 1px var(--main-color);
    -webkit-text-stroke: var(--txt-stroke);
    text-stroke: var(--txt-stroke);
  }
  .base-title__text--main {
    font-size: min((48vw / 7.5), 30px);
    font-weight: bold;
    margin-top: .2em;
  }
}
.type__lineup--item--photo {
  grid-area: img;
  aspect-ratio: 280 / 160;
  width: 100%;
  /*height: min((340vw / 7.5), 160px);*/
  object-fit: cover;
}
.type__lineup--item--texts {
  grid-area: txt;
}
.type__lineup--item--buttons {
  display: grid;
  gap: min((30vw / 7.5), 20px);
  grid-area: btn;
  margin-top: min((26vw / 7.5), 14px);
  --btn-bg: var(--main-color);
  .is-pc & {
    --btn-w: 260px;
    --btn-fs: min((15vw / 9.92), 16px);
    --btn-h: min((50vw / 9.92), 50px);
  }
}
/*sec -- product＋theme*/
#product, #theme {
  --sec-yohaku: min((70vw / 7.5), 75px);
  --sec-yohaku2: min((208vw / 7.5), 152px);
  position: relative;
  &#product {
    padding-top: var(--sec-yohaku2);
    :not(:has(#theme)) & {
      padding-bottom: var(--sec-yohaku);
    }
  }
  &#theme {
    padding: var(--sec-yohaku) 0 min((55vw / 7.5), 70px);
    :not(:has(#product)) & {
      padding: var(--sec-yohaku2) 0 min((130vw / 7.5), 120px);
    }
  }
  .text__runner {
    font-size: min((44vw / 7.5), 24px);
    line-height: 1;
    font-weight: var(--default-fw-b);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    --border: min((5vw / 7.5), 3px) solid;
    border-top: var(--border);
    border-bottom: var(--border);
    height: min((120vw / 7.5), 65px)
  }
  .text__runner--inner {}
  .text__runner--lineup {
    display: flex;
    gap: 2em;
    align-items: center;
    width: max-content;
    margin-right: 2em;
  }
  .text__runner--lineup--item {
    display: flex;
    gap: 1em;
    &:is(.is-seoul, .is-paris) {
      --icon: "\e571"; /*電車*/
    }
    &:is(.is-taipei, .is-barcelona) {
      --icon: "\e6fb"; /*カバン*/
    }
    &:is(.is-bangkok, .is-newyork) {
      --icon: "\e6ca"; /*飛行機*/
      --icon-w: 200;
    }
    &:is(.is-singapore, .is-melbourne) {
      --icon: "\e412"; /*カメラ*/
    }
    &::before {
      content: var(--icon);
      width: 1em;
      font-family: var(--default-ff-icon);
      font-weight: var(--icon-w, 400);
    }
  }
}
/*sec -- product 「.product-block」内はproduct.cssに設定中*/
/*sec -- theme*/
#theme {
  background: var(--default-color-bg);
  .section__inner {
    width: var(--default-width2);
    container-type: inline-size;
    @container (width < 992px) {
      .theme__lineup--wrapper {
        --waku-yohaku-yoko: min((125vw / 7.5), 80px);
        padding-left: var(--waku-yohaku-yoko);
        padding-right: var(--waku-yohaku-yoko);
      }
    }
  }
}
.theme__lineup--item {
  width: min((500vw / 7.5), 302px);
  &:not(:first-child) {
    margin-left: min((40vw / 7.5), 43px);
  }
}
.theme__lineup--item--link {
  height: min((230vw / 7.5), 141px);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: min((40vw / 7.5), 20px);
  font-weight: var(--default-fw-b);
  line-height: calc(50 / 40);
  text-align: center;
  &::after {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, var(--bg-opacity, .4));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
}
.theme__lineup--item--photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.theme__lineup--item--name {
  position: relative;
  z-index: 2;
}
/*sec -- style*/
.photo-runner {
  display: grid;
  grid-template-columns: repeat(2, min((2250vw / 7.5), 2250px));
}
.photo-runner--item {
  width: 100%;
  height: min((150vw / 7.5), 150px);
  animation: slide-yoko var(--slide-speed, 80s) var(--animation-loop);
  .is-pc & {
    --slide-speed: 60s;
  }
}
#style {
  position: relative;
  padding: min((150vw / 7.5), 160px) 0 min((115vw / 7.5), 112px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  &::before, &::after {
    content: "";
    width: 100%;
    height: 100lvh;
    top: 0;
    left: 0;
    background: var(--sec-bg, rgba(25, 165, 158, .85));
    position: fixed;
  }
  &::before {
    --sec-bg: url("../images/style_bg.webp") no-repeat center center / cover;
    z-index: -1;
  }
  .section__inner {
    position: relative;
    z-index: 1;
  }
}
.style__lineup {
  display: grid;
  gap: min((42vw / 7.5), 58px);
}
.style__lineup--item {
  background: #fff;
  display: grid;
  grid-template-areas:
    "ttl"
    "img"
    "txt"
    "btn";
  gap: 1em;
  --lineup-yohaku-tate: min((28vw / 7.5), 30px);
  --lineup-yohaku-yoko: min((43vw / 7.5), 26px);
  padding: min((28vw / 7.5), 30px) min((43vw / 7.5), 26px);
  .is-sp & {
    padding-bottom: min((55vw / 7.5), 40px);
  }
  .is-pc & {
    grid-template-columns: auto 1fr;
    grid-template-rows: max-content 1fr max-content;
    grid-template-areas:
      "img ttl"
      "img txt"
      "img btn";
    gap: 1em min((23vw / 9.92), 23px);
  }
  &.is-ciao {
    --btn-bg: #8e629f;
  }
  &.is-imp {
    --btn-bg: #2659a0;
  }
  &.is-fit {
    --btn-bg: #ffa800;
  }
  &:is(.is-ciao, .is-imp) {
    position: relative;
    &.is-ciao {
      --icon-img: url("https://tour.his-j.com/ct/images/nittei_hyo/brand_ciao.png"); /*https://e.his-j.com/images/basis_ciao/retail/common/t_ciao.gif*/
      --icon-size-w: min((109vw / 7.5), 109px);
      --icon-size-h: min((32vw / 7.5), 32px);
      --icon-posi-ue: min((24vw / 7.5), 24px);
      --icon-posi-yoko: min((30vw / 7.5), 30px);
    }
    &.is-imp {
      --icon-img: url("https://tour.his-j.com/ct/images/nittei_hyo/brand_impresso.png");
      --icon-size-w: min((133vw / 7.5), 133px);
      --icon-size-h: min((50vw / 7.5), 50px);
      --icon-posi-ue: min((15vw / 7.5), 15px);
      --icon-posi-yoko: min((12vw / 7.5), 12px);
    }
    &::before {
      content: "";
      display: block;
      width: var(--icon-size-w);
      height: var(--icon-size-h);
      background: var(--icon-img) no-repeat 0 0 / contain;
      position: absolute;
      top: var(--icon-posi-ue);
      right: var(--icon-posi-yoko);
    }
  }
  @media (width >=560px) {
    --photo-aspect: 260 / 300;
    .is-sp & {
      --photo-size-w: min((200vw / 7.5), 200px);
      grid-template-areas:
        "img ttl"
        "img txt"
        "btn btn";
    }
  }
}
.style__lineup--item--titles {
  grid-area: ttl;
  display: grid;
  gap: min((22vw / 7.5), 18px);
  @media (width < 560px) {
    justify-items: center;
    text-align: center;
  }
  .style__lineup--item--title {
    font-weight: var(--default-fw-b);
    font-size: min((40vw / 7.5), 28px);
    line-height: 1.2;
    order: 1;
  }
  .style__lineup--item--level {
    display: flex;
    gap: .5em;
    align-items: center;
    background: #ffe400;
    border-radius: min((5vw / 7.5), 5px);
    font-size: min((22vw / 7.5), 16px);
    font-weight: bold;
    line-height: 1.2;
    height: min((40vw / 7.5), 30px);
    padding: .1em .75em .2em 1em;
    width: max-content;
  }
  .style__lineup--item--level--stars {
    display: flex;
    gap: 1px;
    .style__lineup--item--level--star {
      &.is-active {
        --star: "★"
      }
      &::before {
        content: var(--star, "☆");
      }
    }
  }
}
.style__lineup--item--photo {
  grid-area: img;
  .base-picture__image {
    display: block;
    width: var(--photo-size-w, 100%);
    aspect-ratio: var(--photo-aspect, 600 / 260);
    object-fit: cover;
    .is-pc & {
      --photo-size-w: min((260vw / 9.92), 260px);
    }
  }
}
.style__lineup--item--texts {
  grid-area: txt;
  padding-bottom: .5em;
  .style__lineup--item--lead {
    font-weight: var(--default-fw-b);
    font-size: min((30vw / 7.5), 20px);
    line-height: calc(40 / 30);
    margin-bottom: .4em;
  }
  .style__lineup--item--text {
    font-size: min((26vw / 7.5), 16px);
    line-height: calc(36 / 26);
  }
  .style__lineup--item--notes {
    font-size: min((20vw / 7.5), 13px);
    line-height: 1.3;
    margin-top: .5em;
    .style__lineup--item--notes--item:not(:first-child) {
      margin-top: .25em;
    }
  }
}
.style__lineup--item--buttons {
  grid-area: btn;
  display: flex;
  flex-wrap: wrap;
  gap: min((18vw / 7.5), 10px);
  --btn-fs: min((26vw / 7.5), 13px);
  --btn-h: min((80vw / 7.5), 40px);
  .is-sp & {
    justify-content: center;
  }
}
.style__lineup--item--buttons:not(:has(.style__lineup--item--button:only-child)) {
  .is-sp & {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.style__lineup--item--buttons:has(.style__lineup--item--button:only-child) {
  --btn-min-w: min((520vw / 7.5), 520px);
  .is-pc & {
    --btn-min-w: 340px;
  }
}
/*sec -- support＋article*/
#support, #article {
  --sec-yohaku-top: min((140vw / 7.5), 100px);
  --sec-yohaku-btm: min((78vw / 7.5), 88px);
  position: relative;
  &#support {
    padding-top: var(--sec-yohaku-top);
    :not(:has(#article)) & {
      padding-bottom: var(--sec-yohaku-btm);
    }
  }
  &#article {
    padding: var(--sec-yohaku-top) 0 var(--sec-yohaku-btm);
  }
}
.is-sp :is(.section__wrapper:not(:has(#support)) #article, .section__wrapper:has(#article) #support) {
  --sec-yohaku-top: min((60vw / 7.5), 60px);
}
/*sec -- support*/
#support {
  background: var(--default-color-bg);
}
.support__lineup {
  --btn-bg: #000;
  --btn-fs: min((22vw / 7.5), 16px);
  --btn-h: min((60vw / 7.5), 50px);
  display: grid;
  grid-template-columns: repeat(var(--lineup-col, 2), 1fr);
  gap: min((24vw / 7.5), 15px);
  .is-pc & {
    --lineup-col: 3;
    .support__lineup--item--detail {
      min-height: 118px;
    }
  }
}
.support__lineup--item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 1em;
  background: #fff;
  border: 1px solid #000;
  font-size: min((24vw / 7.5), 18px);
  line-height: calc(36 / 24);
  padding: min((15vw / 7.5), 26px) min((14vw / 7.5), 15px) min((25vw / 7.5), 30px);
}
.support__lineup--item--notes {
  font-size: min((20vw / 7.5), 13px);
  line-height: 1.3;
  margin-top: .5em;
}
.support__lineup--item--notes--item:not(:first-child) {
  margin-top: .25em;
}
.support__lineup--item--button {
  margin: 0 min((6vw / 7.5), 7px);
}
/*sec -- article*/
#article {
  background: var(--default-color-bg);
  .section__inner {
    width: var(--default-width2);
    container-type: inline-size;
    @container (width < 992px) {
      .article__lineup--wrapper {
        --waku-yohaku-yoko: min((32vw / 7.5), 30px);
        padding-left: var(--waku-yohaku-yoko);
        padding-right: var(--waku-yohaku-yoko);
      }
    }
  }
}
.article__lineup--item {
  width: min((350vw / 7.5), 240px);
  background: #fff;
  &:not(:first-child) {
    margin-left: var(--gap, min((30vw / 7.5), 20px));
  }
  .is-pc & {
    --gap: 10px;
  }
}
.article__lineup--item--link {
  height: 100%;
  display: grid;
  grid-template-rows: min((175vw / 7.5), 120px) 1fr;
  background: #000;
  color: #fff;
}
.article__lineup--item--photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article__lineup--item--name {
  font-size: min((24vw / 7.5), 16px);
  padding: .9em 1em 1em;
}
/*sec -- faq*/
#faq {
  background: #fff;
  --sec-yohaku: min((100vw / 7.5), 90px);
  padding-top: var(--sec-yohaku);
  #pageApp:not(:has(#reco-banner)) & {
    padding-bottom: var(--sec-yohaku);
  }
}
.faq__lineup--item {
  border-bottom: 1px solid #707070;
}
.faq__lineup--item--title {
  font-size: min((30vw / 7.5), 22px);
  line-height: 1.2;
  font-weight: var(--default-fw-b);
  padding: 1em calc(15em / 22) 1em 0;
  .is-pc & {
    padding-left: calc(37em / 22);
  }
  .base-title__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .75em;
    &::after {
      content: var(--icon, "\e145");
      background: #34aeaa;
      border-radius: 100%;
      height: 1.25em;
      aspect-ratio: 1 / 1;
      font-family: var(--default-ff-icon);
      font-weight: 500;
      font-size: .95em;
      line-height: 1.25em;
      color: #fff;
      letter-spacing: 0;
      text-align: center;
    }
    .is-open & {
      --icon: "\e15b"
    }
  }
}
.faq__lineup--item--inner {
  width: min((620vw / 7.5), 910px);
  font-size: min((26vw / 7.5), 18px);
  line-height: calc(38 / 26);
  padding-bottom: 1em;
  .is-pc & {
    padding-left: calc(40em / 18);
    line-height: calc(36 / 18);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
#footerArea {
  background: #fff;
}
/*reco-banner*/
#reco-banner {
  padding: min((80vw / 7.5), 90px) 0;
}
.reco-banner__list {
  width: var(--banner-size, min(var(--default-width-sp), 440px));
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--banner-col, 2), 1fr);
  gap: min((32vw / 7.5), 38px);
  .is-pc & {
    --banner-col: 4;
    --banner-size: min(90%, 882px);
  }
}
/*★ ＝＝ searchArea（検索ボックスのレイアウト切り替えタイミングで変更） ＝＝ ★*/
/*search*/
#searchArea {
  background: #fff;
  padding-bottom: min((50vw / 7.5), 60px);
}
.is-pc ~ #searchArea {
  padding: 60px 0;
  background: url("../images/search_photo_pc.webp") repeat center top / 1920px;
}
/*
@media (min-width:741px) {
}
@media only screen and (orientation: landscape) and (max-width: 828px), only screen and (max-width: 740px) {
  #searchArea .rn-searchMod__formSection {
    padding-bottom: min((100vw / 7.5), 100px);
  }
}
#pageApp.is-device-tab ~ #searchArea {
  padding-bottom: min((86vw / 7.5), 86px);
}*/
/*------------------------------------------------*/
/*★ ＝＝ keyframes ＝＝ ★*/
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes slide-yoko {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes pokopiko {
  0% {
    translate: 0 -5%;
  }
  to {
    translate: 0 10%;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .portal-navi__list--link {
    &:hover {
      background: var(--default-color-yellow);
    }
  }
  .section-navi__link {
    &:hover {
      &::after {
        animation: pokopiko var(--animation-speed) var(--animation-loop) alternate;
      }
    }
  }
  .type__navi--item--inner {
    &::after {
      transition: var(--default-hover-transition2);
    }
    &:hover {
      --navi-item-bg: var(--navi-item-active-bg);
    }
  }
  .article__lineup--item--link, .reco-banner__link, .faq__lineup--item--title {
    transition: var(--default-hover-transition);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
  .theme__lineup--item--link {
    &::after {
      transition: var(--default-hover-transition2);
    }
    &:hover {
      --bg-opacity: .15;
    }
  }
}