@charset "UTF-8";
/* *** common variables *** */
/* break point 
---------------------------------------------- */
/* hover style
---------------------------------------------- */
/* color
---------------------------------------------- */
/* *** ①One-Tone *** */
/* *** ②Two-Tone *** */
/* *** mixins *** */
/* break point */
/* hover */
/* 画像枠線 */
/* PC、SP画像の切り替え */
/* 共通
  -------------------------------------------*/
/* 画像パス */
/* フォント */
/* Utility */
.no-break {
  display: inline-block;
}

.font-mincho {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝体", "Noto Serif JP", serif;
}

/* コンポーネント上書き */
.note-list {
  color: var(--white);
}

/* コンテンツマージン */
@media (min-width: 769px) {
  :root {
    --section-contentM: 10rem;
  }
}
@media (max-width: 768px) {
  :root {
    --section-contentM: 6.4rem;
  }
}

/* -----------------------------------------------
  ① clamp関数
----------------------------------------------- */
/* --- 10px = 1rem --- */
/* -----------------------------------------------
  ② Y軸減少計算
----------------------------------------------- */
/* --- 画面を縮小させた際にコンテンツのY軸距離を広げる関数 --- */
body {
  height: auto;
}

.stisportsharp-contents {
  /* LPコンテンツ
  -------------------------------------------*/
  color: var(--white);
  background-color: var(--black);
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  /* タイトル */
  /* ボタン */
  /* .price-section {
    margin-block-start: var(--section-contentM);
    .ttl-h2-wrap {
      @include mixins.pc-layout {
        margin-block-end: 4.8rem;
      }
      @include mixins.sp-layout {
        margin-block-end: 2.4rem;
      }
    }
    .row {
      display: flex;
      align-items: center;
      @include mixins.pc-layout {
        gap: 5.66%;
      }
      @include mixins.sp-layout {
        gap: 2.84%;
      }
      .box-l {
        line-height: 1.4;
        @include mixins.pc-layout {
          flex-basis: 28.5%;
        }
        @include mixins.sp-layout {
          flex-basis: auto;
        }
        &.brd-full {
          border: solid 1px currentColor;
          @include mixins.pc-layout {
            padding: 1.6rem;
          }
          @include mixins.sp-layout {
            padding: .8rem;
          }
        }
        &.brd-r {
          border-inline-end: solid 1px currentColor;
          @include mixins.pc-layout {
            padding-inline-end: 1.6rem;
          }
          @include mixins.sp-layout {
            padding-inline-end: 2.84%;
          }
        }
        span {
          display: block;
          @include mixins.pc-layout {
            font-size: 1.8rem;
          }
          @include mixins.sp-layout {
            font-size: fn.customClamp(10px, 18px, 320px, $sp_max_width);
          }
          &.fnt-l {
            @include mixins.pc-layout {
              font-size: 3rem;
            }
            @include mixins.sp-layout {
              font-size: fn.customClamp(12px, 24px, 320px, $sp_max_width);
            }
          }
        }
      }
      .box-r {
        flex: 1;
        @include mixins.pc-layout {
          font-size: 2.8rem;
        }
        @include mixins.sp-layout {
          font-size: fn.customClamp(12px, 24px, 320px, $sp_max_width);
        }
      }
    }
    .note {
      @include mixins.pc-layout {
        margin-block: .8rem 6.4rem;
      }
      @include mixins.sp-layout {
        margin-block: .8rem 3.2rem;
        font-size: 1rem;
      }
    }
  }
    */
  /* 
   .story-section {
     margin-block-start: var(--section-contentM);
     font-family: settingsLP.$font_mincho;
     .ttl-h2-wrap {
       @include mixins.pc-layout {
         margin-block-end: 6.4rem;
       }
       @include mixins.sp-layout {
         margin-block-end: 4rem;
       }
     }
     // 背景の設定
     .bg-story {
       background-repeat: no-repeat;
       @include mixins.pc-layout {
         background-size: 62%;
       }
       @include mixins.sp-layout {
         background-size: 100%;
         background-position: 100% 0%;
       }
       &[data-bg="bg-story1"] {
         @include mixinsLP.bg-switch("/advertising/wrx/stisportsharp/images/img_story1_pc.webp", "/advertising/wrx/stisportsharp/images/img_story1_sp.webp");
       }
       &[data-bg="bg-story2"] {
         @include mixinsLP.bg-switch("/advertising/wrx/stisportsharp/images/img_story2_pc.webp", "/advertising/wrx/stisportsharp/images/img_story2_sp.webp");
       }
     }
     // 背景以外のレイアウト
     .story {
       &:not(:last-of-type) {
         @include mixins.pc-layout {
           margin-block-end: 8.8rem;
         }
         @include mixins.sp-layout {
           margin-block-end: 4.4rem;
         }
       }
       &:not(.rev) {
         @include mixins.pc-layout {
           background-position: center right;
           .story-content {
             padding-inline-end: 38%;
           }
         }
       }
       &.rev {
         @include mixins.pc-layout {
           background-position: center left;
           .story-content {
             padding-inline-start: 38%;
           }
         }
       }
     }
     .story-content {
       h3 {
         line-height: 1;
         opacity: .3;
         @include mixins.pc-layout {
           height: 19px;
           margin-block-end: 3.2rem;
         }
         @include mixins.sp-layout {
           height: fn.customClamp(10px, 18px, 320px, $sp_max_width);
           margin-block-end: 56.72%;
         }
         img {
           height: 100%;
         }
       }
       .tagline {
         font-weight: 600;
         @include mixins.pc-layout {
           margin-block-end: 1rem;
           font-size: fn.customClamp(18px, 24px, $pc_min_width, 1130px)
         }
         @include mixins.sp-layout {
           margin-block-end: .8rem;
           font-size: fn.customClamp(12px, 24px, 320px, $sp_max_width);
         }
       }
       .box-txt {
         line-height: 2;
         text-align: justify;
         @include mixins.pc-layout {
           font-size: fn.customClamp(14px, 20px, $pc_min_width, 1130px);
         }
         @include mixins.sp-layout {
           font-size: fn.customClamp(10px, 20px, 320px, $sp_max_width);
         }
       }

       // アコーディオン
       .acc-wrap {
         .acc-contents.abbrev-txt {
           @include mixins.pc-layout {
             height: auto;
             opacity: 1;
           }
           @include mixins.sp-layout {
             &:not(.show) {
               opacity: 1;
               height: auto;
               overflow: hidden;
               max-height: fn.customClamp(64px, 116px, 320px, $sp_max_width);
             }
           }
         }
         .triggle {
           @include mixins.sp-layout {
             display: flex;
             justify-content: flex-end;
             width: 100%;
             padding: 0;
             &.nml-toggle-icn::before,
             &.nml-toggle-icn::after {
               content: none;
             }
           }
         }
         .open,
         .close {
           @include mixins.sp-layout {
             width: 24px;
             height: 24px;
             padding: 4px;
             position: relative;
             background-color: var(--greyK5);
             &::before,
             &::after {
               content: "";
               background-color: var(--black);
               position: absolute;
             }
             &::before {
               width: 16px;
               height: 1px;
               top: 11px;
               left: 4px;
             }
           }
         }
         .open {
           @include mixins.sp-layout {
             &::after {
               width: 1px;
               height: 16px;
               top: 4px;
               right: 11px;
               transition: var(--transition);
               border: none;
               transform: translate(0);
             }
           }
         }
       }
     }
   }

   .equip-section {
     margin-block-start: var(--section-contentM);
     font-family: settingsLP.$font_mincho;
     .ttl-h2-wrap {
       @include mixins.pc-layout {
         margin-block-end: 7.2rem;
       }
       @include mixins.sp-layout {
         margin-block-end: 3.2rem;
       }
     }
     .ttl-h3 {
       @include mixins.pc-layout {
         margin-block: 7.2rem 3.2rem;
       }
       @include mixins.sp-layout {
         margin-block: 4rem 1.2rem;
       }
     }
     .img-equip-main {
       @include mixinsLP.img-bdr;
     }
     .panel-list {
       .item {
         .enlarge-img {
           @include mixinsLP.img-bdr;
         }
         p {
           line-height: 1.3;
         }
       }
     }
     .bodycolor-wrap {
       display: grid;
       @include mixins.pc-layout {
         gap: 8px;
         grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
       }
       @include mixins.sp-layout {
         gap: 10px 4px;
         grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
       }
       .color-box {
         @include mixinsLP.img-bdr;
         width: 100%;
         height: 60px;
         aspect-ratio: 220 / 60;
       }
     }
     .seat-wrap {
       .seat-box {
         @include mixinsLP.img-bdr;
         @include mixins.pc-layout {
           max-width: 59.56%;
         }
         @include mixins.sp-layout {
           max-width: 66.72%;
         }
       }
     }
   }

   .gallery-section {
     margin-block-start: var(--section-contentM);
     .ttl-h2-wrap {
       @include mixins.pc-layout {
         margin-block-end: 4.8rem;
       }
       @include mixins.sp-layout {
         margin-block-end: 2.4rem;
       }
     }
     // ギャラリースライド
     .swiper-container-main {
       @include mixins.pc-layout {
         margin-block-end: 20px;
       }
       @include mixins.sp-layout {
         margin-inline: calc(50% - 50vw);
         margin-block-end: 6px;
       }
       .swiper-slide {
         @include mixinsLP.img-bdr;
       }
     }
     .swiper-container-thumbnails {
       position: relative;
       padding-bottom: 48px;
       @include mixins.pc-layout {
         margin-block-end: 72px;
       }
       @include mixins.sp-layout {
         margin-block-end: 30px;
       }
       .swiper-slide {
         @include mixinsLP.img-bdr;
         transition: opacity .5s;
         cursor: pointer;
         &.swiper-slide-thumb-active {
           opacity: .5;
         }
       }
       .swiper-pagination {
         position: absolute;
         bottom: 0;
         left: 0;
         width: 100%;
         text-align: center;
         z-index: 10;
       }
       .swiper-pagination-bullet {
         background: var(--greyK5);
       }
       .swiper-pagination-bullet-active {
         background: #c0004c;
       }
     }
   }
  */
}
.stisportsharp-contents .ttl-h2,
.stisportsharp-contents .ttl-h3 {
  padding-inline: 0.2em;
  line-height: 1;
}
@media (min-width: 769px) {
  .stisportsharp-contents .ttl-h2,
  .stisportsharp-contents .ttl-h3 {
    height: 20px;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .ttl-h2,
  .stisportsharp-contents .ttl-h3 {
    height: clamp(1rem, 0.429rem + 1.79vw, 1.8rem);
  }
}
.stisportsharp-contents .ttl-h2 img,
.stisportsharp-contents .ttl-h3 img {
  height: 100% !important;
}
.stisportsharp-contents .ttl-h2-wrap {
  position: relative;
  z-index: 0;
}
.stisportsharp-contents .ttl-h2-wrap::after {
  content: "";
  height: 0.1em;
  margin-inline: calc(50% - 50vw);
  background-color: currentColor;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
.stisportsharp-contents .ttl-h2-wrap .ttl-h2 {
  width: fit-content;
  background-color: var(--black);
}
@media (max-width: 768px) {
  .stisportsharp-contents .btn-wrap {
    max-width: clamp(300px, 67%, 450px);
    margin-inline: auto;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .btn-wrap .btn-ttl {
    font-size: clamp(1.2rem, 0.914rem + 0.89vw, 1.6rem);
  }
}
.stisportsharp-contents .mv-section {
  display: grid;
}
.stisportsharp-contents .mv-section > * {
  grid-area: 1/1;
}
.stisportsharp-contents .mv-section .mv-section-inner {
  z-index: 1;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stisportsharp-contents .mv-section .mv-section-inner .logo-sti {
  line-height: 0;
}
@media (min-width: 769px) {
  .stisportsharp-contents .mv-section .mv-section-inner .logo-sti {
    width: calc(27.61% + 3.2rem);
    padding: 2.4rem 1.6rem;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .mv-section .mv-section-inner .logo-sti {
    width: 57.59%;
    padding-block: 4.76%;
  }
}
.stisportsharp-contents .mv-section .mv-section-inner .logo-typera {
  margin-inline-start: auto;
  line-height: 1;
}
@media (min-width: 769px) {
  .stisportsharp-contents .mv-section .mv-section-inner .logo-typera {
    width: clamp(25rem, 16.849rem + 10.6vw, 37.2rem);
    padding: 4rem 1.6rem;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .mv-section .mv-section-inner .logo-typera {
    width: clamp(15rem, 1.429rem + 42.41vw, 34rem);
    padding-block: 4.76%;
  }
}
.stisportsharp-contents .concept-section {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝体", "Noto Serif JP", serif;
}
.stisportsharp-contents .concept-section .bg-concept-area {
  padding-block-start: var(--section-contentM);
  position: relative;
  z-index: 0;
}
.stisportsharp-contents .concept-section .bg-concept-area .bg-concept {
  position: relative;
  z-index: -1;
}
@media (min-width: 769px) {
  .stisportsharp-contents .concept-section .bg-concept-area .bg-concept {
    margin-block-start: -21%;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .concept-section .bg-concept-area .bg-concept {
    margin-block-start: -77%;
  }
}
.stisportsharp-contents .concept-section .tagline {
  font-weight: var(--fwBold);
  line-height: 1.78;
}
@media (min-width: 769px) {
  .stisportsharp-contents .concept-section .tagline {
    margin-block-end: 3.2rem;
    font-size: 2.8rem;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .concept-section .tagline {
    margin-block-end: 3.2%;
    font-size: clamp(1.4rem, 0.686rem + 2.23vw, 2.4rem);
  }
}
.stisportsharp-contents .concept-section .concept {
  line-height: 2.18;
}
@media (min-width: 769px) {
  .stisportsharp-contents .concept-section .concept {
    margin-block-end: 3.2rem;
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .concept-section .concept {
    margin-block-end: 5.33%;
    font-size: clamp(1.2rem, 0.771rem + 1.34vw, 1.8rem);
  }
}
.stisportsharp-contents .comingsoon-section .coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: --var(--white);
}
@media (min-width: 769px) {
  .stisportsharp-contents .comingsoon-section .coming-soon {
    aspect-ratio: 2/1;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .comingsoon-section .coming-soon {
    aspect-ratio: 1/1;
  }
}
.stisportsharp-contents .comingsoon-section .coming-soon .coming-soon-logo {
  display: block;
  line-height: 0;
}
@media (min-width: 769px) {
  .stisportsharp-contents .comingsoon-section .coming-soon .coming-soon-logo {
    width: 40%;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .comingsoon-section .coming-soon .coming-soon-logo {
    width: 80%;
    max-width: 420px;
  }
}
@media (min-width: 769px) {
  .stisportsharp-contents .comingsoon-section .coming-soon p {
    margin-block: 16px 48px;
    font-size: 1.6rem;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .comingsoon-section .coming-soon p {
    margin-block: 12px 24px;
    font-size: 1.4rem;
  }
}
.stisportsharp-contents .note-section {
  margin-block-start: var(--section-contentM);
}
@media (min-width: 769px) {
  .stisportsharp-contents .note-section {
    padding-block-end: 8rem;
  }
}
@media (max-width: 768px) {
  .stisportsharp-contents .note-section {
    padding-block-end: 6.4rem;
  }
}

@media (max-width: 768px) {
  .page-btm-row {
    background-color: var(--black);
  }
}/*# sourceMappingURL=style.css.map */