@charset "UTF-8";

/* ============ base ============ */
:root{
  --red: #b2221a;
  --dark: #211815;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  font-size: 2.3256vw; /* 10px at 430px viewport width */
  background: linear-gradient(to bottom, #459de1 0%, #1a4479 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
@media (min-width: 500px){
  html{ font-size: 11.628px; }
}

body{
  max-width: 500px;
  margin: 0 auto;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
  color: var(--dark);
  background: #fff;
  overflow-x: hidden;
  line-height: 1.6;
}

img{
  max-width: 100%;
  display: block;
}

ul{ list-style: none; }
a{ text-decoration: none; color: inherit; }

/* ============ header ============ */
.header{
  position: fixed;
  top: 1rem;
  right: calc(max(0px, calc((100vw - 500px) / 2)) + .5rem);
  z-index: 200;
}
.menu-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 6rem;
  height: 6rem;
  border: 0;
  padding: 0;
  background: var(--dark);
  cursor: pointer;
}
.menu-btn__lines{
  display: block;
  width: 2.6rem;
}
.menu-btn__lines span{
  display: block;
  width: 100%;
  height: .2rem;
  background: #fff;
  transition: transform .3s, opacity .3s;
}
.menu-btn__lines span + span{
  margin-top: .5rem;
}
.menu-btn__text{
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.menu-btn.is-active .menu-btn__lines span:nth-child(1){
  transform: translateY(.7rem) rotate(45deg);
}
.menu-btn.is-active .menu-btn__lines span:nth-child(2){
  opacity: 0;
}
.menu-btn.is-active .menu-btn__lines span:nth-child(3){
  transform: translateY(-.7rem) rotate(-45deg);
}

/* ============ nav (hamburger menu) ============ */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  width: 100%;
  height: 100vh;
  background: var(--dark);
  transform: translateX(100%);
  transition: transform .3s;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav.is-open{
  transform: translateX(0);
}
.nav__list{
  padding: 7rem 2.4rem 2rem;
}
.nav__list li + li{
  border-top: 1px solid rgba(255,255,255,.2);
}
.nav__list a{
  display: block;
  padding: 1.1rem 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.nav__sublist{
  padding: 0 0 .6rem 1.6rem;
}
.nav__sublist li + li{
  border-top: 1px solid rgba(255,255,255,.1);
}
.nav__sublist a{
  padding: .8rem 0;
  font-size: 1.3rem;
  font-weight: 400;
}
.nav__parent{
  display: block;
  padding: 1.1rem 0;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.nav__stores{
  padding: 1.6rem 2.4rem 3rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.nav__stores-note{
  color: rgba(255,255,255,.7);
  font-size: 1.2rem;
  margin-bottom: 1.2rem;
}
.nav__store-btn{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.4rem 1.6rem;
  background: #1a7c38;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
  text-decoration: none;
  margin-bottom: .8rem;
}
.nav__pin{
  width: 18px;
  height: auto;
  flex-shrink: 0;
}
.nav__map-note{
  color: rgba(255,255,255,.5);
  font-size: 1.1rem;
  margin-top: .4rem;
}

/* ============ FV ============ */
.fv{
  position: relative;
}
.fv__bg{
  width: 100%;
}
.fv__cars{
  position: absolute;
  inset: 0;
}
.fv__car{
  position: absolute;
  filter: drop-shadow(0 .4rem .6rem rgba(0,0,0,.35));
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 1.8s ease, transform 1.8s ease;
}
.fv__car.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.fv__car--1{
  top: calc(31.5% + 4rem + 25px);
  left: 19.5%;
  width: 50%;
  transition-delay: .2s;
}
.fv__car--2{
  top: calc(37.5% + 4.5rem);
  left: 50%;
  width: 50%;
  transition-delay: .4s;
}
.fv__car--3{
  top: calc(44.5% + 5.5rem);
  left: 41%;
  width: 40%;
  transition-delay: .6s;
}
.fv__car--4{
  top: calc(44.6% + 4.5rem + 25px);
  left: calc(-3% + 10px);
  width: 53.1%;
  transition-delay: .8s;
}

.fv__lead{
  background: #fff;
  text-align: center;
  padding: 5rem 2.5rem 4rem;
}
.fv__lead-ttl{
  width: 35.3rem;
  margin: 0 auto 1.5rem;
}
.fv__lead-body{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.55rem;
  text-align: center;
  width: 35.65rem;
  margin: 0 auto;
}

.fv__divider{
  height: 10rem;
  background: var(--dark);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.fv__slide{
  width: 100%;
  overflow: hidden;
}
.fv__slide-track{
  display: flex;
  align-items: center;
  width: -webkit-max-content;
  width: max-content;
  -webkit-animation: fv-slide 20s linear infinite;
  animation: fv-slide 20s linear infinite;
  will-change: transform;
}
.fv__slide-track li{
  flex: none;
  margin-right: 4rem;
}
.fv__slide-track img{
  height: 5rem;
  width: auto;
}
@-webkit-keyframes fv-slide{
  from{ -webkit-transform: translateX(0); transform: translateX(0); }
  to{ -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes fv-slide{
  from{ -webkit-transform: translateX(0); transform: translateX(0); }
  to{ -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* ============ NEWS ============ */
.news{
  background: #fff;
}
.news__visual{
  position: relative;
}
.news__bg{
  width: 100%;
}
.news__copy{
  position: absolute;
  top: 3.5rem;
  left: 50%;
  width: 94%;
  transform: translateX(-50%) translateY(1rem);
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.news__copy.is-visible{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.news__panel{
  padding: 0 2rem 3rem;
  text-align: center;
}
.news__head{
  margin: 3.5rem auto 3rem;
  line-height: 1;
}
.news__head-ttl{
  color: var(--dark);
  font-family: "Roboto", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  padding-bottom: 1.2rem;
  display: inline-block;
}
.news__head-ttl::after{
  content: "";
  display: block;
  width: 4rem;
  height: .3rem;
  background: var(--dark);
  margin: 1.2rem auto 0;
}
.news__head-sub{
  color: var(--dark);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: .6rem;
  letter-spacing: .1em;
}
.news__text{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  text-align: center;
  margin: 0 auto 2.5rem;
}
.news__sns-label{
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 1rem;
}
.news__sns-label::before,
.news__sns-label::after{
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
}
.news__sns{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.news__sns img{
  height: 4rem;
  width: auto;
}

/* ============ PREMIUM POINTS ============ */
.points{
  background: linear-gradient(to right, #961a12, #d32c26);
}
.points__head{
  background: var(--dark);
  text-align: center;
  padding: 2.4rem 0 5.8rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5rem), 0 100%);
}
.points__head-ttl{
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding-bottom: 1.2rem;
  display: inline-block;
}
.points__head-ttl::after{
  content: "";
  display: block;
  width: 4rem;
  height: .3rem;
  background: #fff;
  margin: 1.2rem auto 0;
}
.points__head-sub{
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  margin-top: .6rem;
  letter-spacing: .1em;
}

/* ---- common point block ---- */
.point{
  position: relative;
  padding: 3rem 2.4rem 4rem;
  overflow: hidden;
}
.point__label{
  font-style: italic;
  font-weight: 900;
  color: #fff;
  font-size: 2.2rem;
  letter-spacing: .04em;
  margin-bottom: 1.6rem;
  transform: rotate(-3deg);
}
.point__label .point__num{
  font-size: 3.6rem;
  margin-left: .3rem;
}
.point__btn{
  display: block;
  width: calc(100% - 40px);
  margin: 2rem auto 0;
  animation: btn-float 2s ease-in-out infinite;
}
.point__btn img{
  width: 100%;
}
@keyframes btn-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-.6rem); }
}

/* ---- POINT 01 ---- */
.point01{
  padding: 0;
}
.point01__img{
  width: 39rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.point01__img.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---- POINT 02 ---- */
.point02{
  padding: 0 0 2.4rem;
}
.point02__img{
  width: 39rem;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.point02__img.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.point02__note,
.point03__note{
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  text-align: left;
  width: calc(100% - 40px);
  margin: 0.8rem auto 0;
  line-height: 1.7;
}

/* ---- POINT 03 ---- */
.point03{
  padding: 0 0 2.4rem;
}
.point03__visual{
  position: relative;
  width: 39rem;
  margin: 0 auto;
}
.point03__img{
  width: 100%;
  display: block;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.point03__img.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ---- POINT 04 ---- */
.point04{
  padding: 0 0 4rem;
}
.point04__img{
  width: 39rem;
  margin: 0 auto 2rem;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.point04__img.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.point04__arrow{
  display: block;
  margin: 1rem auto 0;
  padding-top: 20px;
  width: 80px;
  height: auto;
  animation: arrow-drop 2s ease-out infinite;
}
@keyframes arrow-drop{
  0%  { opacity: 0; transform: translateY(-20px); }
  35% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(0); }
  100%{ opacity: 0; transform: translateY(0); }
}
.point04__check{
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 23px;
  color: #fff;
  text-align: center;
  padding: 0.8rem 0;
  margin: 1.2rem 20px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.points__note{
  position: relative;
  background: var(--dark);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  height: 17rem;
  margin-top: -5rem;
  clip-path: polygon(0 5rem, 100% 0, 100% 100%, 0 100%);
  display: flex;
  align-items: center;
  padding: 4rem 2.4rem 0;
}

/* ============ LINEUP ============ */
.lineup{
  background: #fff;
  padding: 3rem 2.4rem 3rem;
  text-align: center;
}
.lineup__head{
  margin-bottom: 1.6rem;
  line-height: 1;
}
.lineup__head-ttl{
  color: var(--dark);
  font-family: "Roboto", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  padding-bottom: 1.2rem;
  display: inline-block;
}
.lineup__head-ttl::after{
  content: "";
  display: block;
  width: 4rem;
  height: .3rem;
  background: var(--red);
  margin: 1.2rem auto 0;
}
.lineup__head-sub{
  color: var(--dark);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: .6rem;
  letter-spacing: .1em;
}
.lineup__lead{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  text-align: center;
  margin: 4rem auto 1.6rem;
}
.lineup__cat{
  width: calc(100% - 2.4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 auto 1.6rem;
}
.lineup__cat-btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.6rem;
  background: var(--dark);
  border-left: .5rem solid var(--red);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  padding: 0 1.2rem;
  overflow: hidden;
  transition: border-color .3s ease;
}
.lineup__cat-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
  z-index: 0;
}
.lineup__cat-btn:hover{
  border-left-color: var(--dark);
}
.lineup__cat-btn:hover::before{
  transform: scaleX(1);
}
.lineup__cat-btn span{
  position: relative;
  z-index: 1;
  text-align: left;
  line-height: 1.3;
}
.lineup__cat-arrow{
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
}
.lineup__note{
  width: calc(100% - 2.4rem);
  height: 30px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark);
  background: #fff034;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* ============ section bar (KIT / ECU / JIMNY common title) ============ */
.sheet{
  margin-top: 50px;
}
.sheet__body{
  padding: 0 30px;
}
.sheet__logo{
  display: block;
  height: auto;
  margin: 30px auto 0;
}
.sheet__logo--recaro{
  width: 261px;
}
.sheet__logo--bride{
  width: 297px;
}
.sheet__img{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.sheet__divider{
  border: none;
  border-top: 3px solid #ccc;
  margin: 0;
}
.kit__ttl,
.ecu__ttl,
.jimny__ttl,
.sheet__ttl,
.security__ttl{
  background: var(--dark);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  padding: 1.4rem 2rem;
  border-top: .6rem solid var(--red);
}

/* ============ 車高調KIT ============ */
.kit{
  background: #fff;
  padding-bottom: 2rem;
}
.kit__brand{
  padding: 2rem 2.4rem;
  text-align: center;
}
.kit__brand + .kit__brand::before{
  content: "";
  display: block;
  height: 1px;
  background: var(--dark);
  margin-top: -1.5rem;
  margin-bottom: 2rem;
}
.kit__brand-logo{
  width: 16.5rem;
  margin: 0 auto 1.6rem;
}
.kit__item{
  margin-bottom: 1.6rem;
}
.kit__item img{
  width: 100%;
  border-radius: .4rem;
}

/* ============ ECU・CPU書換 ============ */
.ecu{
  background: #fff;
}
.ecu__body{
  padding: 2rem 20px 3rem;
  text-align: center;
}
.ecu__logo{
  width: 24.55rem;
  margin: 0 auto 1.6rem;
}
.ecu__photo{
  width: 100%;
  max-width: 39rem;
  margin: 0 auto 1.6rem;
  border-radius: .4rem;
}
.ecu__h1{
  width: 100%;
  max-width: 37.4rem;
  margin: 0 auto 1rem;
}
.ecu__h2{
  width: 100%;
  max-width: 39rem;
  margin: 0 auto 1rem;
}
.ecu__h3{
  width: 100%;
  max-width: 38.25rem;
  margin: 0 auto 1.6rem;
}
.ecu__off{
  width: 100%;
  max-width: 31.5rem;
  margin: 0 auto 1.6rem;
}
.ecu__read1{
  width: 100%;
  max-width: 23.8rem;
  margin: 0 auto 1.6rem;
}
.ecu__txtb{
  width: 100%;
  max-width: 34.9rem;
  margin: 0 auto 1rem;
}
.ecu__reserve{
  display: block;
  background: linear-gradient(to bottom, var(--red), #6e1410);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.2;
  text-align: center;
  padding: .5rem 0;
  margin: 0 0 2.4rem;
}
.ecu__nayami{
  background: #fff;
  border-radius: .6rem;
  padding: 1.6rem;
  margin-bottom: 2.4rem;
}
.ecu__h4{
  width: 100%;
  margin: 0 auto 1rem;
}
.ecu__nayami-img{
  color: var(--red);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 2.4rem;
  line-height: 1.4;
  text-align: center;
}
.ecu__arrow{
  width: 4.8rem;
  margin: 1.2rem auto;
}
.ecu__nayami-photo{
  width: 100%;
  border-radius: .4rem;
  margin-top: 1.6rem;
}
.ecu__btn{
  display: block;
  width: 100%;
  margin: 0 auto 1.4rem;
  animation: btn-float 2s ease-in-out infinite;
}
.ecu__btn--2{
  animation-delay: -1s;
}
.ecu__btn img{
  width: 100%;
}
.ecu__cars{
  color: var(--dark);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.ecu__cars sup{
  font-size: .6em;
}
.ecu__read2{
  color: var(--dark);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 1.6rem;
}

/* ============ ジムニー用品 ============ */
.jimny{
  background: #fff;
}
.jimny__logo{
  width: 26rem;
  margin: 2rem auto 20px;
}
.jimny__bnr{
  width: 100%;
  padding: 0 40px;
  box-sizing: border-box;
}

/* ============ FV PC版 ============ */

/* スマホ・タブレット: 左右カラムは非表示 */
.fv-pc__left,
.fv-pc__sidebar {
  display: none;
}

@media (min-width: 1024px) and (max-width: 1028px) {
  .fv-pc__left {
    display: block;
    position: fixed;
    left: 0; top: 0;
    width: calc((100vw - 500px) / 2);
    height: 100vh;
    background: linear-gradient(to bottom, #459de1 0%, #1a4479 100%);
    z-index: 10;
  }
  .fv-pc__sidebar {
    display: block;
    position: fixed;
    right: 0; top: 0;
    width: calc((100vw - 500px) / 2);
    height: 100vh;
    background: #0e2244;
    z-index: 10;
  }
  .fv-pc__left > *,
  .fv-pc__sidebar > * {
    display: none;
  }
}

@media (min-width: 1024px) {
  /*
   * 左右パネルを position: fixed で固定。
   * 中央のスマホデザイン (body max-width:500px / margin:0 auto) はそのままスクロール。
   * 各パネル幅 = (ビューポート幅 - 500px) / 2  →  body の両サイドをぴったり埋める。
   */

  /* ---- 左カラム: 固定 ---- */
  .fv-pc__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: calc((100vw - 500px) / 2);
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #459de1 0%, #1a4479 100%);
    z-index: 10;
  }

  .fv-pc__image2 {
    width: 100%;
    height: auto;
    object-fit: contain;
    flex: 1;
    min-height: 0;
  }

  .fv-pc__store-txt {
    flex-shrink: 0;
    padding-bottom: 20px;
    width: 100%;
    color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    letter-spacing: .08em;
  }

  /* ---- 右カラム: 固定サイドバー ---- */
  .fv-pc__sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    width: calc((100vw - 500px) / 2);
    height: 100vh;
    overflow-y: auto;
    background: linear-gradient(to bottom, #459de1 0%, #1a4479 100%);
    z-index: 10;
  }

  .fv-pc__access-note {
    color: var(--dark);
    background: #fff034;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    padding: .8rem 1rem .5rem;
    line-height: 1.6;
  }
  .fv-pc__access-red {
    color: var(--red);
  }

  .fv-pc__map-note {
    color: rgba(255,255,255,.55);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    text-align: center;
    padding: .3rem 1rem 1rem;
  }

  /* ---- PC ナビゲーション ---- */
  .pc-nav,
  .pc-nav__group {
    display: contents;
  }

  .pc-nav__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-height: 0;
    padding: clamp(.35rem, 1.2vh, .75rem) 1rem;
    color: #fff;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 2.2vh, 20px);
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(255,255,255,.15);
    background: rgba(5, 20, 60, 0.55);
    text-decoration: none;
    transition: background .2s;
  }

  a.pc-nav__item:hover {
    background: rgba(5, 20, 60, 0.78);
  }

  .pc-nav__item--parent {
    background: #0e2244;
  }

  .pc-nav__item--sub {
    padding-left: 2.7rem;
    font-size: clamp(12px, 2.2vh, 20px);
    font-family: 'Noto Sans JP', 'Roboto', sans-serif;
    font-weight: 500;
    background: rgba(8, 28, 75, 0.40);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  a.pc-nav__item--sub:hover {
    background: rgba(8, 28, 75, 0.62);
  }

  .pc-nav__chevron {
    font-size: 15px;
    opacity: .65;
    flex-shrink: 0;
  }

  /* ---- 店舗アクセスボタン ---- */
  .pc-nav__store-btn {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex: 1;
    min-height: 0;
    padding: clamp(.35rem, 1.2vh, .85rem) 1rem;
    background: #1a7c38;
    color: #fff;
    font-family: 'Noto Sans JP', 'Roboto', sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 2.2vh, 20px);
    border-bottom: 1px solid rgba(255,255,255,.2);
    text-decoration: none;
    transition: background .2s;
    letter-spacing: .02em;
  }

  .pc-nav__store-btn:hover {
    background: #145f2b;
  }

  .pc-nav__store-btn .pc-nav__chevron {
    margin-left: auto;
  }

  /* 位置ピンアイコン (CSS描画) */
  .pc-nav__pin {
    width: 18px;
    height: auto;
    flex-shrink: 0;
  }
}

/* ============ SECURITY ============ */
.security__body{
  padding: 0 30px;
}
.security__img{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.security__btn-link{
  display: block;
  margin-top: 30px;
  margin-bottom: 30px;
  animation: btn-float 2s ease-in-out infinite;
}
.security__btn{
  display: block;
  width: 100%;
  height: auto;
}

/* ============ WHEEL ============ */
.wheel__ttl{
  background: var(--dark);
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  padding: 1.4rem 2rem;
  border-top: .6rem solid var(--red);
}
.wheel__body{
  padding: 0 30px;
}
.wheel__img{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}
.wheel__img--fade,
.js-fadein{
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.wheel__img--fade.is-visible,
.js-fadein.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.wheel__divider{
  border: none;
  border-top: 3px solid #ccc;
  margin: 0;
}

/* ============ ACCESS ============ */
.access__img{
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
  margin-bottom: 30px;
}

.access__note{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  padding: 0 0 30px;
  margin-top: -10px;
}

/* ============ ACCESS SECTION ============ */
.access-sec{
  background: #dae9db;
  padding-bottom: 30px;
}
.access-sec__panel{
  padding: 3.5rem 2.4rem 3rem;
  text-align: center;
}
.access-sec__head{
  line-height: 1;
}
.access-sec__ttl{
  color: var(--dark);
  font-family: "Roboto", sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  padding-bottom: 1.2rem;
  display: inline-block;
}
.access-sec__ttl::after{
  content: "";
  display: block;
  width: 4rem;
  height: .3rem;
  background: var(--dark);
  margin: 1.2rem auto 0;
}
.access-sec__sub{
  color: var(--dark);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  margin-top: .6rem;
  letter-spacing: .1em;
}

.access-sec__info{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.8;
  text-align: left;
  padding: 0 30px 0 50px;
}
.access-sec__tel{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: var(--dark);
  text-decoration: none;
  padding: 0 30px 5px;
  margin-top: 0;
}
.access-sec__tel-icon{
  font-size: 32px;
}
.access-sec__store{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #448f4c;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 26px;
  margin: 0 30px 10px;
}

.access-sec__map{
  padding: 0 30px;
  line-height: 0;
}
.access-sec__map iframe{
  width: 100%;
  display: block;
}

.access-sec__store-btn-link{
  display: block;
  width: calc(100% - 40px);
  margin: 20px auto 30px;
  animation: btn-float 2s ease-in-out infinite;
}
.access-sec__store-btn{
  display: block;
  width: 100%;
  height: auto;
}

.event-note{
  margin: 30px 30px 0;
  padding: 16px 20px;
  padding-bottom: 30px;
  border: 2px solid var(--red);
  color: var(--red);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.8;
}
.event-note p{
  padding-left: 1em;
  text-indent: -1em;
}

/* ============ FOOTER ============ */
.footer{
  width: 100%;
  height: 30px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 90px;
}
.footer__copy{
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .05em;
}

.footer__banner{
  position: fixed;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 40px;
  background: #fff034;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
.footer__banner-txt{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--dark);
  text-align: center;
}
.footer__banner-red{
  color: var(--red);
}

.footer__green{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #448f4c;
  display: flex;
  z-index: 99;
}
.footer__green-left,
.footer__green-right{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
}
.footer__green-left{
  border-right: 1px solid #fff;
}
.footer__green-ico{
  width: 18px;
  height: auto;
}

/* ============ PAGE TOP ============ */
.pagetop{
  position: fixed;
  right: 20px;
  bottom: 110px;
  width: 48px;
  height: 48px;
  background: var(--dark);
  color: #fff;
  font-size: 1.6rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 200;
}
.pagetop.is-visible{
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .footer__banner,
  .footer__green{
    display: none;
  }
  .footer{
    margin-bottom: 0;
  }
  .pagetop{
    bottom: 20px;
  }
  .menu-btn,
  .nav{
    display: none;
  }
}