@charset "utf-8";
/*------------------------------------------------*/
/*★ ページスタイル設定 ★*/
/*------------------------------------------------*/
/*★ ＝＝ headerArea ＝＝ ★*/
/*gnavi*/
#gnavi {
  height: var(--gnavi-h);
  .gnavi__content {
    width: 100%;
    background: var(--default-color-red);
    font-weight: bold;
    color: #fff;
    &.is-fixed-start {
      transform: translateZ(0); /*iOS描画対策*/
      position: fixed;
      top: 0;
      left: 0;
      z-index: 15;
      transition: translate .4s;
      border-bottom: 1px solid #fff;
      box-shadow: 0px 0px min((20vw / 7.5), 16px) max((-10vw / 7.5), -6px) rgba(0, 0, 0, 1);
    }
    &.is-fixed-end {
      translate: 0 -120%;
    }
  }
  .gnavi__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: min((40vw / 7.5), 33px);
    height: var(--gnavi-h);
  }
  .gnavi__page {
    display: grid;
    grid-auto-flow: column;
    .is-sp & {
      grid-template-columns: 1fr;
    }
  }
  .gnavi__page--title {
    padding-right: min((46vw / 7.5), 45px);
    .is-sp & {
      display: none;
    }
    .gnavi__page--title--inner {
      color: inherit;
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: calc(14em / 16);
      &::before, &::after {
        content: "";
        width: calc(22em / 16);
        height: calc(26em / 16);
        background: url("../images/link_kazari_rich.svg") no-repeat center center / contain;
      }
    }
  }
  .gnavi__page--list {
    display: flex;
    text-align: center;
    align-items: center;
  }
  .gnavi__page--list--item {
    position: relative;
    padding: 0 1.25em;
    &::after, &:first-child::before {
      content: "";
      display: block;
      width: 1px;
      height: 1.25em;
      background: currentColor;
      rotate: 45deg;
      position: absolute;
      top: 50%;
    }
    &::after {
      right: 0;
      translate: 50% -50%;
    }
    &:first-child::before {
      left: 0;
      translate: -50% -50%;
    }
    .is-sp & {
      &:first-child::before, &:last-child::after {
        content: none;
      }
      .gnavi__inner:has(.gnavi__portal) & {
        &:last-child::after {
          content: "";
        }
      }
    }
  }
  .gnavi__page--list--link {
    display: inline-block;
    &.is-active {
      position: relative;
      &::after {
        content: "";
        width: calc(100% + .8em);
        height: min((10vw / 7.5), 6px);
        background: var(--default-color-gold);
        position: absolute;
        left: 50%;
        bottom: 0;
        translate: -50% 0;
      }
      .gnavi__page--list--text {
        position: relative;
        z-index: 1;
      }
    }
  }
  .gnavi__portal {
    --gnavi-portal-color: var(--default-color-red);
    position: relative;
    font-size: min((24vw / 7.5), 12px);
    line-height: 1;
    width: min((205vw / 7.5), 152px);
  }
  .gnavi__portal--button {
    padding: 0 .7em .1em .6em;
    min-height: min((40vw / 7.5), 26px);
    display: grid;
    grid-template-columns: 1fr 1em;
    align-items: center;
    color: var(--gnavi-portal-color);
    line-height: 1;
    cursor: pointer;
    &.is-open {
      --gnavi-portal-btn-icon: "\e15b";
    }
    &::after {
      content: var(--gnavi-portal-btn-icon, "\e145");
      font-family: var(--default-ff-icon);
      font-size: 1.5em;
      font-weight: normal;
    }
    .gnavi__portal--button--text--title {
      .is-sp & {
        display: none;
      }
    }
  }
  :is(.gnavi__portal--button, .gnavi__portal--list) {
    background: #fff;
    border: 1px solid var(--gnavi-portal-color);
  }
  .gnavi__portal--list {
    display: block;
    position: absolute;
    z-index: 20;
    width: 100%;
    display: none;
    border-top: none;
    text-align: center;
  }
  .gnavi__portal--list--item:not(:first-child) {
    border-top: 1px solid var(--gnavi-portal-color);
  }
  .gnavi__portal--list--link {
    display: grid;
    padding: .5em;
    color: var(--default-color-blue1);
  }
}
/*------------------------------------------------*/
/*★ ＝＝ mainArea ＝＝ ★*/
/*section*/
.section {
  .ui-static-tab {
    padding: 0;
  }
  &:has(+ #product) {
    padding-bottom: var(--sec-pb, min((298vw / 7.5), 294px)) !important;
    .is-page-top & {
      --sec-pb: min((158vw / 7.5), 148px);
    }
  }
}
.section__inner {
  width: var(--default-width);
  margin: auto;
}
/*section__title.is-type-A */
.section__title.is-type-A {
  --sec-ttl-kazari-bg: var(--default-color-gold);
  color: var(--sec-ttl-fc, #fff);
  text-align: center;
  font-weight: bold;
  display: grid;
  margin-bottom: var(--sec-ttl-mb, min((50vw / 7.5), 60px));
  &::before {
    content: "";
    width: 100%;
    height: min((53vw / 7.5), 42px);
    mask: url("../images/title_kazari_snow.svg") no-repeat center center / contain;
    background: var(--sec-ttl-kazari-bg);
  }
  .section__title--texts {
    display: grid;
    gap: min((14vw / 7.5), 14px);
    margin: min((33vw / 7.5), 33px) 0 min((45vw / 7.5), 27px);
  }
  .section__title--sub {
    font-size: min((36vw / 7.5), 24px);
    line-height: 1;
  }
  .section__title--main {
    font-size: min((48vw / 7.5), 36px);
    line-height: calc(54 / 48);
  }
  .section__title--kazari--image {
    width: 100%;
    height: var(--sec-ttl-kazari-text-h);
    object-fit: contain;
  }
}
/*product*/
#product {
  --sec-yohaku: min((124vw / 7.5), 87px);
  --sec-ttl-kazari-text-h: min((53vw / 7.5), 36px);
  background: var(--default-color-blue1);
  padding: var(--sec-yohaku) 0;
  position: relative;
  .is-pc & {
    --slide-speed: 50s;
  }
  .is-page-top & {
    --sec-yohaku: min((124vw / 7.5), 125px);
    --runner-text-posi: max((-86vw / 7.5), -93px);
    --runner-text-opacity: .04;
    scroll-margin-top: max((-34vw / 7.5), -54px);
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: min((100vw / 7.5), 100px);
      background: linear-gradient(to top, #162745 0%, transparent 100%);
      position: absolute;
      top: 0;
      left: 0;
      translate: 0 -100%;
    }
  }
  .is-page-enjoy & {
    --runner-text-bg: var(--default-color-gold);
  }
  #pageApp:not(.is-page-top):has(.reco-banner__list) & {
    padding-bottom: 0;
  }
  &::after {
    --runner-text-w: min((2127vw / 7.5), 2127px);
    content: "";
    display: block;
    width: calc(var(--runner-text-w) * 2);
    height: var(--runner-text-h, min((196vw / 7.5), 196px));
    background: var(--runner-text-bg, #fff);
    opacity: var(--runner-text-opacity, .15);
    mask: url("../images/runner_text.svg") repeat-x left top / var(--runner-text-w);
    animation: slide-yoko-to-left-50 var(--slide-speed, 60s) var(--default-animation-loop);
    position: absolute;
    top: var(--runner-text-posi, max((-197vw / 7.5), -197px));
    left: 0;
  }
  .base-button__wrapper {
    display: grid;
    justify-content: center;
    gap: min((30vw / 7.5), 42px);
    .base-button__link {
      width: 100%;
    }
    .is-pc & {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .product-main__none {
    font-size: min((28vw / 7.5), 22px);
    line-height: calc(36 / 26);
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-feature-settings: "palt";
    width: fit-content;
    margin: auto;
    border: 1px solid;
    padding: .4em .75em .55em;
    @media(width < 750px) {
      .is-inline-block {
        display: block;
      }
    }
  }
  .product-other {
    margin-top: min((80vw / 7.5), 80px);
    .product-other__title {
      font-size: min((28vw / 7.5), 22px);
      text-align: center;
      color: #fff;
      font-weight: bold;
      margin-bottom: min((30vw / 7.5), 24px);
    }
  }
  .product-main {
    .base-button__wrapper {
      margin-top: min((52vw / 7.5), 46px);
    }
    .ui-static-tab-button-list {
      width: 100%;
      flex-wrap: wrap;
      gap: min((34vw / 7.5), 25px) min((18vw / 7.5), 25px);
      justify-content: center;
      .ui-static-tab-button {
        background: var(--tab-bg, #fff);
        border: 1px solid #fff;
        font-size: min((24vw / 7.5), 18px);
        line-height: 1.2;
        color: var(--tab-fc, var(--default-color-blue2));
        font-weight: bold;
        border-radius: min((10vw / 7.5), 10px);
        padding: .4em min((24vw / 7.5), 24px) .5em;
        &.is-active {
          --tab-bg: var(--default-color-gold);
          --tab-fc: #fff;
        }
      }
    }
    .ui-static-tab-content {
      margin-top: min((35vw / 7.5), 40px);
    }
    .product__list--wrapper {
      --slider-gap: min((34vw / 7.5), 25px);
      --slider-item-w: min((530vw / 7.5), 400px);
      .is-pc & {
        --slider-gap: 9px;
        --slider-item-w: 240px;
      }
      @media (width > 1030px) {
        --slider-gradient-posi-x: min((80vw / 10.3), 200px);
        --slider-arrow-posi-x: calc(var(--slider-gradient-posi-x) * -1);
        .splide__arrow--prev {
          left: var(--slider-arrow-posi-x);
          translate: max((-65vw / 10.3), -123px) 0;
        }
        .splide__arrow--next {
          right: var(--slider-arrow-posi-x);
          translate: min((65vw / 10.3), 123px) 0;
        }
        .product__list--track {
          &::before, &::after {
            content: "";
            display: block;
            height: calc(100% + 5px);
            width: calc(100vw - (var(--default-width-pc) + (var(--slider-gradient-posi-x) * 2)));
            background: linear-gradient(-90deg, transparent 0%, rgba(22, 39, 69, .2) 20px, rgba(22, 39, 69, .4) 30px, var(--default-color-blue1) 48px, var(--default-color-blue1) 100%);
            position: absolute;
            top: 0;
            z-index: 1;
          }
          &::before {
            left: 0;
            translate: calc(-100% - var(--slider-gradient-posi-x)) 0;
          }
          &::after {
            right: 0;
            scale: -1 1;
            translate: calc(100% + var(--slider-gradient-posi-x)) 0;
          }
        }
      }
    }
    .product__list--item {
      .product__list--data, .product__list--inner {
        height: 100%;
      }
      .product__list--inner {
        background: #fff;
        display: grid;
        grid-template-rows: auto 1fr;
        color: inherit;
        .is-pc & {
          box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, .23);
        }
      }
      .product__list--images {
        background: #ccc;
        padding-top: calc((628 / 944) * 100%);
        position: relative;
      }
      .product__list--image {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
      }
      .product__list--type {
        background: #000;
        text-align: center;
        font-size: min((28vw / 7.5), 12px);
        font-weight: bold;
        color: #fff;
        line-height: 1.4;
        padding: .5em .75em .55em;
      }
      .product__list--text-wrapper {
        display: flex;
        flex-direction: column;
        padding: 10px 9px;
        font-size: 12px;
        line-height: 1.2;
        font-weight: bold;
      }
      .product__list--title {
        font-size: min((34vw / 7.5), 16px);
        line-height: calc(24 / 18);
        font-weight: bold;
      }
      .product__list--point, .product__list--detail {
        color: #333;
        &:not(:empty) {
          margin-top: 1em;
          + .product__list--point:not(:empty) {
            margin-top: .5em;
          }
        }
      }
      .product__list--price {
        margin-top: auto;
        padding-top: min((16vw / 7.5), 10px);
        color: #555;
      }
      .product__list--minmax {
        font-size: min((34vw / 7.5), 18px);
        color: #e90000;
        ~ [class^="product__list--"] {
          margin-top: .25em;
        }
        + [class^="product__list--"] {
          margin-top: .5em;
        }
      }
    }
  }
}
/*------------------------------------------------*/
/*★ ＝＝ footerArea ＝＝ ★*/
/*bannerApp*/
#bannerApp {
  background: var(--banner-bg);
  padding: var(--banner-yohaku);
  .is-page-top & {
    --banner-bg: transparent;
    --banner-yohaku: min((70vw / 7.5), 150px) 0 min((168vw / 7.5), 100px);
  }
  #pageApp:not(.is-page-top) & {
    --banner-bg: var(--default-color-blue1);
    --banner-yohaku: min((70vw / 7.5), 75px) 0 min((168vw / 7.5), 90px);
  }
  #reco-banner {
    width: var(--default-width);
    margin: auto;
    .is-sp & {
      max-width: 460px;
    }
    .reco-banner__list {
      display: grid;
      grid-template-columns: repeat(var(--col, 2), 1fr);
      gap: min((40vw / 7.5), ((64 / 992) * 100%));
      .is-pc & {
        --col: 4;
      }
    }
  }
}
/*searchApp*/
#searchArea {
  scroll-margin-top: min((70vw / 7.5), 50px);
  padding-bottom: 50px;
  @media(width > 740px) {
    padding: 50px 0;
    background: url("../images/search_bg.webp") no-repeat center top / var(--default-bg-width-pc);
  }
  .section {
    padding: 0 !important;
    text-align: left;
    font-weight: normal;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ keyframes ＝＝ ★*/
@keyframes slide-yoko-to-left {
  0% {
    translate: 0 0;
  }
  to {
    translate: -100% 0;
  }
}
@keyframes slide-yoko-to-left-50 {
  0% {
    translate: 0 0;
  }
  to {
    translate: -50% 0;
  }
}
@keyframes slide-yoko-to-rigth {
  0% {
    translate: -100% 0;
  }
  to {
    translate: 0 0;
  }
}
/*------------------------------------------------*/
/*★ ＝＝ hover ＝＝ ★*/
@media (hover : hover) and (pointer : fine) {
  .gnavi__page--list--item:not(.is-active) .gnavi__page--list--link:not(.is-active) {
    transition: var(--default-hover-transition-opacity);
    &:hover {
      opacity: var(--default-hover-opacity);
    }
  }
  .gnavi__portal--list--link {
    transition: var(--default-hover-transition-background);
    &:hover {
      background: color-mix(in srgb, var(--default-color-red) 20%, transparent);
    }
  }
  #product {
    .ui-static-tab-button:not(.is-active), .product__list--inner {
      transition: var(--default-hover-transition-opacity);
      &:hover {
        opacity: var(--default-hover-opacity);
      }
    }
  }
}