@charset "utf-8";
/* ==========================================================================
   奈良日産自動車 中古車 大決算フェア LP
   トーン：メインビジュアル（青空・山）に合わせた明るいライトカラー
   背景は画像を使わず、斜めストライプで表現
   ========================================================================== */

/* --------------------------------------------------
   Variables
-------------------------------------------------- */
:root{
  /* 支給素材（topback / toplogo / topbanner）から抽出 */
  --sky:#7FC8E1;         /* MVの空 */
  --sky-l:#E7F4FA;       /* セクション背景（薄） */
  --sky-xl:#F5FBFD;      /* ページ背景 */
  --navy:#1F4199;        /* ロゴの紺 */
  --navy-d:#16326E;
  --navy-l:#2A50B4;
  --orange:#F15A24;      /* CTA */
  --orange-d:#C7431A;
  --yellow:#FFC317;
  --red:#B81B30;

  --ink:#22303F;
  --gray:#5A6B7A;
  --line:#CFE3EE;
  --beige:#F5EEDF;       /* 大決算とはセクション */
  --beige-l:#FBF7EF;
  --white:#fff;

  --ff:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --ff-en:"Anton",var(--ff);

  --w:1120px;
}

/* --------------------------------------------------
   Base
-------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:12px;}
body{
  margin:0;
  font-family:var(--ff);
  color:var(--ink);
  background:var(--sky-xl);
  line-height:1.85;
  font-size:16px;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;vertical-align:bottom;}
a{color:inherit;text-decoration:none;}
ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font:inherit;color:inherit;}
.sp{display:none;}
@media(max-width:767px){ .sp{display:inline;} .pc{display:none;} }

/* --------------------------------------------------
   背景：斜めストライプ（画像不使用）
-------------------------------------------------- */
.stripe-a{
  background:repeating-linear-gradient(-45deg,#FFFFFF 0 16px,#F1F9FD 16px 32px);
}
.stripe-b{
  background:repeating-linear-gradient(-45deg,#E9F5FB 0 16px,#DFF0F8 16px 32px);
}
.stripe-c{
  background:repeating-linear-gradient(-45deg,#DCEEF8 0 18px,#D2E8F5 18px 36px);
}
/* ストライプを使わないセクションのベース色（くどくならないよう所々のみストライプ） */
.find--price,.shops,.faq{background:var(--white);}
.about{background:var(--beige);}
.speed,.outline{background:var(--sky-l);}

/* --------------------------------------------------
   画像プレースホルダー（実画像差し替え後は不要）
-------------------------------------------------- */
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;min-height:60px;overflow:hidden;
  background:
    repeating-linear-gradient(-45deg,rgba(31,65,153,.10) 0 12px,rgba(31,65,153,.04) 12px 24px),
    var(--sky-l);
  border:1px dashed rgba(31,65,153,.35);
  color:var(--navy);text-align:center;
}
.ph > span{
  display:block;padding:6px 10px;font-size:12px;font-weight:700;line-height:1.5;
  letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.ph em{display:block;margin-top:3px;font-size:10px;font-weight:500;font-style:normal;opacity:.75;}
.ph--169{aspect-ratio:16/10;}
.ph--43{aspect-ratio:4/3;}
.ph--map{aspect-ratio:16/9;}
.ph--color{width:46px;height:46px;min-height:0;border-radius:50%;}
.ph--color > span{font-size:9px;padding:0;}

/* 未確定情報のマーク（納品時に削除） */
.todo{margin-left:.4em;padding:1px 6px;border-radius:3px;background:#FFE9E9;color:#C0392B;font-size:11px;font-weight:700;white-space:nowrap;}

/* --------------------------------------------------
   Button
-------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52px;padding:10px 28px;border-radius:999px;
  font-weight:900;letter-spacing:.04em;line-height:1.3;text-align:center;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.btn small{font-size:10px;font-weight:700;opacity:.9;letter-spacing:.08em;}
.btn:hover{transform:translateY(-2px);}
.btn--cs{background:var(--orange);color:#fff;box-shadow:0 6px 0 var(--orange-d),0 10px 20px rgba(31,65,153,.15);}
.btn--cs:hover{background:#F86F3D;box-shadow:0 4px 0 var(--orange-d),0 14px 26px rgba(31,65,153,.2);}
.btn--sub{background:var(--navy);color:#fff;box-shadow:0 5px 0 var(--navy-d),0 10px 18px rgba(31,65,153,.15);}
.btn--sub:hover{background:var(--navy-l);}
.btn--ghost2{background:#fff;color:var(--navy);border:2px solid var(--navy);}
.btn--ghost2:hover{background:var(--navy);color:#fff;}
.btn--lg{min-height:64px;padding:12px 44px;font-size:19px;}
.btn--block{display:flex;width:100%;}

/* --------------------------------------------------
   Main Visual（支給素材：topback / topbacksp / toplogo / topbanner / car1〜4）
-------------------------------------------------- */
.mv{
  position:relative;padding:32px 16px 128px;
  display:flex;align-items:flex-start;justify-content:center;overflow:hidden;
  background:var(--sky);
}
.mv__bg{position:absolute;inset:0;z-index:0;}
.mv__bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom;}
.mv__inner{position:relative;z-index:2;width:100%;max-width:1120px;text-align:center;}

/* タイトル画像（toplogo.png）— ファーストビューの主役 */
.mv__logo{margin:0 auto;}
.mv__logo img{
  display:block;width:min(660px,92vw);height:auto;margin:0 auto;
  filter:drop-shadow(0 14px 30px rgba(20,50,90,.34));
  animation:up .8s .05s ease both;
}

/* サブタイトル画像（topbanner.png） */
.mv__banner{margin:14px auto 0;}
.mv__banner img{
  display:block;width:min(560px,90vw);height:auto;margin:0 auto;
  filter:drop-shadow(0 6px 14px rgba(20,50,90,.22));
  animation:up .8s .18s ease both;
}

/* 開催日 */
.mv__term{margin-top:14px;animation:up .8s .28s ease both;}
.mv__termDate{
  display:inline-block;padding:5px 26px;border-radius:999px;
  background:#fff;border:3px solid var(--navy);color:var(--navy);
  font-family:var(--ff-en);font-size:clamp(20px,3.6vw,34px);letter-spacing:.04em;line-height:1.3;
  box-shadow:0 6px 0 rgba(31,65,153,.22);
}
.mv__termDate small{font-family:var(--ff);font-size:.4em;font-weight:900;margin:0 4px;letter-spacing:.08em;}

/* 3つの訴求 */
.mv__points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;animation:up .8s .38s ease both;}
.mv__points li{
  padding:5px 18px;border-radius:999px;font-size:13px;font-weight:900;
  background:#fff;color:var(--navy);border:2px solid var(--navy);
  box-shadow:0 3px 0 rgba(31,65,153,.2);
}
.mv__points b{color:var(--red);}

/* 特選車4台：横一列に並べてふわふわ浮遊（縦幅を抑える） */
.mv__cars{
  display:flex;justify-content:center;align-items:flex-end;gap:10px;
  width:min(1040px,100%);margin:14px auto 0;
}
.mvcar{flex:1 1 0;min-width:0;margin:0;}
.mvcar img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 12px 12px rgba(20,50,90,.32));
  animation:floatY 3.6s ease-in-out infinite;
}
.mvcar--roox  {animation:carIn .9s .55s cubic-bezier(.2,1.3,.4,1) both;}
.mvcar--serena{animation:carIn .9s .70s cubic-bezier(.2,1.3,.4,1) both;}
.mvcar--xtrail{animation:carIn .9s .85s cubic-bezier(.2,1.3,.4,1) both;}
.mvcar--delica{animation:carIn .9s 1.0s cubic-bezier(.2,1.3,.4,1) both;}
.mvcar--roox   img{animation-delay:0s;}
.mvcar--serena img{animation-delay:.5s;}
.mvcar--xtrail img{animation-delay:1s;}
.mvcar--delica img{animation-delay:1.6s;}

.mv__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px;animation:up .8s 1.15s ease both;}

.mv__scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;color:var(--navy);}
.mv__scroll span{font-family:var(--ff-en);font-size:11px;letter-spacing:.24em;}
.mv__scroll::after{content:"";display:block;width:2px;height:30px;margin:6px auto 0;background:var(--navy);animation:scrollLine 1.8s ease-in-out infinite;transform-origin:top;}

@keyframes carIn{
  0%{opacity:0;transform:translateY(60px) scale(.8);}
  100%{opacity:1;transform:none;}
}
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes scrollLine{0%{transform:scaleY(0);}50%{transform:scaleY(1);}100%{transform:scaleY(0);transform-origin:bottom;}}

@media(max-width:767px){
  .mv{padding:20px 16px 132px;}

  /* SP背景（topbacksp.png 750×1000）
     MVの縦が画像より長いため、画像は左右をほぼ切らずに下端へ配置し、
     上に残る部分は同じ空色（--sky）でつなぐ。境目は上端フェードでぼかす。 */
  .mv__bg{inset:auto 0 0 0;height:auto;overflow:hidden;}
  .mv__bg img{width:150%;max-width:none;height:auto;margin-left:-25%;object-fit:fill;}
  .mv__bg::after{
    content:"";position:absolute;left:0;right:0;top:0;height:110px;z-index:1;
    background:linear-gradient(180deg,var(--sky) 0%,rgba(127,200,225,0) 100%);
  }

  .mv__logo img{width:92vw;}
  .mv__banner img{width:86vw;}
  /* SPは4台横一列だと小さすぎるため 2×2 */
  .mv__cars{flex-wrap:wrap;gap:6px 8px;margin-top:14px;}
  .mvcar{flex:0 0 calc(50% - 4px);}
  .mv__ctas .btn{width:100%;max-width:340px;}
}

/* --------------------------------------------------
   共通セクション
-------------------------------------------------- */
.sec{position:relative;padding:80px 16px;}
.sec__inner{position:relative;z-index:2;max-width:var(--w);margin:0 auto;}

.sec__head{text-align:center;margin-bottom:40px;}
.sec__en{font-family:var(--ff-en);font-size:13px;letter-spacing:.28em;color:#8FC4DC;}
.sec__ttl{
  margin-top:2px;font-size:clamp(28px,5vw,44px);font-weight:900;line-height:1.25;letter-spacing:.04em;
  color:var(--navy);
}
.sec__ttl .mk{position:relative;color:var(--orange);}
.sec__ttl .mk::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.2em;z-index:-1;
  background:rgba(255,195,23,.45);border-radius:2px;
}
.sec__lead{margin-top:14px;font-size:16px;font-weight:500;color:var(--gray);}

/* --------------------------------------------------
   アピールポイント（画像なし・読みやすさ優先）
-------------------------------------------------- */
.pts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.pts__i{
  display:flex;flex-direction:column;
  padding:24px 22px;
  background:#fff;border-radius:12px;
  border:1px solid #E4D9C2;border-top:4px solid var(--navy);
}
.pts__no{font-family:var(--ff-en);font-size:11px;letter-spacing:.2em;color:#8FC4DC;line-height:1;}
.pts__no b{font-size:15px;color:var(--navy);margin-left:2px;}
.pts__ttl{
  margin-top:10px;padding-bottom:12px;border-bottom:1px solid #E9DFCB;
  font-size:18px;font-weight:700;line-height:1.5;color:var(--navy);
}
.pts__txt{margin-top:12px;font-size:14px;line-height:1.9;color:var(--gray);}

@media(max-width:900px){ .pts{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){
  .pts{grid-template-columns:1fr;gap:12px;}
  .pts__i{padding:20px 18px;}
  .pts__ttl{font-size:17px;}
}

/* --------------------------------------------------
   最速納期
-------------------------------------------------- */
.speed{padding:76px 16px;}
.speed__inner{max-width:var(--w);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;}
.speed__en{font-family:var(--ff-en);font-size:13px;letter-spacing:.28em;color:#8FC4DC;}
.speed__ttl{font-size:clamp(28px,5vw,44px);font-weight:900;line-height:1.2;letter-spacing:.03em;color:var(--navy);}
.speed__big{color:var(--orange);}
.speed__lead{margin-top:14px;font-size:16px;line-height:1.95;color:var(--gray);}
.speed__lead b{color:var(--navy);}
.speed__steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.speed__steps li{
  flex:1 1 auto;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:700;white-space:nowrap;
  background:#fff;border:1px solid var(--line);color:var(--navy);
}
.speed__steps b{display:block;font-family:var(--ff-en);font-size:18px;color:var(--orange);letter-spacing:.06em;}
.speed__img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;box-shadow:0 10px 24px rgba(31,65,153,.14);}
@media(max-width:820px){ .speed__inner{grid-template-columns:1fr;gap:26px;} }

/* --------------------------------------------------
   特選車カード
-------------------------------------------------- */
.car{
  position:relative;
  background:#fff;border-radius:16px;overflow:hidden;margin-bottom:28px;
  border:1px solid var(--line);box-shadow:0 12px 30px rgba(31,65,153,.12);
}
.car__rank{
  position:absolute;left:0;top:0;z-index:3;
  width:64px;height:64px;display:flex;align-items:center;justify-content:center;
  background:var(--orange);color:#fff;font-family:var(--ff-en);font-size:30px;
  clip-path:polygon(0 0,100% 0,0 100%);
  padding:0 20px 20px 0;line-height:1;
}

/* メイン写真：カード全幅の横向き。その下にサブ3点 */
.car__media{position:relative;background:var(--sky-l);}
.car__media > img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
.car__media > .ph--169{aspect-ratio:16/9;}
.car__flag{
  position:absolute;right:12px;top:12px;z-index:3;padding:5px 14px;border-radius:999px;
  background:var(--red);color:#fff;font-size:13px;font-weight:900;letter-spacing:.06em;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
/* このサイト限定の車両 */
.car__flag--only{background:var(--navy);}
.car__flag--only::before{content:"★ ";color:var(--yellow);}
/* レンタアップ（デリカ）— 登録済み未使用車バッジの下に重ねる */
.car__flag--rental{top:48px;background:var(--orange);}
.car__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#fff;padding-top:3px;}
.car__thumbs img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.car__thumbs .ph{aspect-ratio:16/9;border:none;}

/* 写真の下：左＝車両情報／右＝装備・価格 */
.car__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;padding:26px 28px 0;}
.car__colR{display:flex;flex-direction:column;gap:16px;}

.car__cat{
  display:inline-block;padding:3px 12px;border-radius:4px;
  background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;
}
.car__name{margin-top:8px;font-size:28px;font-weight:900;line-height:1.3;color:var(--navy);}
.car__grade{display:block;margin-top:2px;font-size:14px;font-weight:500;color:var(--gray);letter-spacing:.02em;}

.car__price{
  padding:16px 20px;border-radius:12px;
  background:linear-gradient(135deg,#FFF3E9,#FFE4D5);
  border:2px solid var(--orange);text-align:center;
}
.car__priceLbl{
  display:inline-block;padding:3px 14px;border-radius:999px;
  background:var(--orange);color:#fff;font-size:13px;font-weight:900;letter-spacing:.1em;
}
.car__priceVal{line-height:1;margin-top:8px;color:var(--orange-d);}
.car__priceVal b{font-family:var(--ff-en);font-size:clamp(48px,6vw,66px);letter-spacing:.01em;}
.car__priceVal small{font-size:24px;font-weight:900;margin-left:4px;}
.car__priceSub{margin-top:8px;font-size:13px;font-weight:700;color:#9A5B36;}
/* 価格未定 */
.car__price--tbd{background:var(--sky-l);border-color:#9FBFD4;}
.car__price--tbd .car__priceLbl{background:#7C93A5;}
.car__price--tbd .car__priceVal{color:#5C7285;}
.car__price--tbd .car__priceVal b{font-family:var(--ff);font-size:32px;font-weight:900;}
.car__price--tbd .car__priceSub{color:#7C93A5;}

/* 詳細 */
.car__spec{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:16px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.car__spec > div{display:flex;background:#fff;}
.car__spec--full{grid-column:1/-1;}
.car__spec dt{flex:0 0 84px;padding:8px 10px;background:var(--sky-l);font-size:12px;font-weight:700;color:var(--navy);}
.car__spec dd{padding:8px 10px;font-size:14px;font-weight:700;}

/* おすすめ装備（強調） */
.car__eqBox{
  padding:16px 18px 18px;border-radius:12px;
  background:#FFFBEC;border:2px solid var(--yellow);
}
.car__eqLbl{
  display:inline-block;padding:3px 14px;border-radius:999px;margin-bottom:12px;
  background:var(--yellow);color:var(--navy);
  font-size:13px;font-weight:900;letter-spacing:.1em;
}
.car__eq{display:flex;flex-direction:column;gap:8px;}
.car__eq li{
  position:relative;padding:9px 12px 9px 40px;border-radius:8px;
  background:#fff;border:1px solid #F0DFA6;
  font-size:15px;font-weight:700;line-height:1.5;color:var(--navy);
}
.car__eq li::before{
  content:"";position:absolute;left:13px;top:50%;
  width:14px;height:8px;margin-top:-6px;
  border-left:3px solid var(--orange);border-bottom:3px solid var(--orange);
  transform:rotate(-45deg);
}

/* 最下部：写真と同じ幅のボタン */
.car__ctas{padding:22px 28px 26px;}
.car__ctas .btn.is-tbd{background:#9FAEBB;box-shadow:0 5px 0 #7C8B98;}

/* 支払総額・AIS の案内画像（特選車の最下部） */
.carsInfo{display:grid;gap:16px;margin-top:8px;}
.carsInfo__i{
  margin:0;background:#fff;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 10px 24px rgba(31,65,153,.12);
}
.carsInfo__i img{display:block;width:100%;height:auto;}

.cars__note{margin-top:16px;font-size:12px;line-height:1.9;color:var(--gray);}

@media(max-width:880px){
  /* SP：写真 → 車両名 → カラー → 詳細 → おすすめ装備 → 価格 → ボタン の順に縦積み */
  .car__cols{grid-template-columns:1fr;gap:0;padding:20px 18px 0;}
  .car__colR{margin-top:16px;gap:14px;}
  .car__name{font-size:23px;}
  .car__spec{grid-template-columns:1fr;}
  .car__eq li{font-size:14px;}
  .car__priceVal b{font-size:52px;}
  .car__ctas{padding:18px 18px 22px;}
}

/* ボディカラー */
.ucar__color{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:700;color:var(--gray);}
.sw{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex:0 0 auto;}
.sw--white{background:#fff;}
.sw--pearl{background:linear-gradient(135deg,#fff 40%,#E8ECEF);}
.sw--black{background:#1c1c1c;}
.sw--latte{background:#C6B49A;}

/* 他色アイコン */
.ucar__colors{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line);}
.ucar__colorsLbl{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--navy);}
.ucar__colorsNone{margin-top:4px;font-size:13px;color:#8C9BA8;}
.ucar__colorList{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.ucar__colorList li{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;text-align:center;}
.ucar__colorList b{font-size:11px;font-weight:700;line-height:1.3;color:var(--gray);}
.ucar__colorList img{width:46px;height:46px;object-fit:contain;}

@media(max-width:880px){
  .car{grid-template-columns:1fr;}
  .car__body{padding:22px 20px 24px;}
  .car__name{font-size:23px;}
  .car__spec{grid-template-columns:1fr;}
  .car__eq li{font-size:14px;}
}

/* --------------------------------------------------
   ラインアップ横スクロール（ルークス4台・ループ）
   ※スライド1枚は他の車と同じ .car コンポーネント／同じ横幅
-------------------------------------------------- */
.lineup{
  position:relative;margin-bottom:28px;padding:24px 0 18px;
  background:#fff;border-radius:18px;
  box-shadow:0 12px 30px rgba(31,65,153,.12),0 0 0 3px var(--navy);
}
.lineup__head{display:flex;align-items:center;gap:14px;padding:0 24px;}
.lineup__no{
  flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;background:var(--orange);color:#fff;font-family:var(--ff-en);font-size:24px;line-height:1;
}
.lineup__ttlWrap{flex:1 1 auto;min-width:0;}
.lineup__only{
  display:inline-block;margin-bottom:4px;padding:3px 14px;border-radius:999px;
  background:var(--navy);color:#fff;font-size:12px;font-weight:900;letter-spacing:.1em;
}
.lineup__only::before{content:"★ ";color:var(--yellow);}
.lineup__ttl{font-size:clamp(22px,3.6vw,32px);font-weight:900;color:var(--navy);line-height:1.2;letter-spacing:.03em;}
.lineup__cat{margin-top:2px;font-size:12px;font-weight:700;color:var(--gray);letter-spacing:.06em;}
.lineup__count{
  flex:0 0 auto;display:flex;align-items:baseline;justify-content:center;gap:2px;
  min-width:82px;padding:6px 14px;border-radius:999px;
  background:var(--yellow);color:var(--navy);box-shadow:0 4px 12px rgba(31,65,153,.18);
}
.lineup__count b{font-family:var(--ff-en);font-size:32px;line-height:1;}
.lineup__count small{font-size:14px;font-weight:900;}

.lineup__note{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin:14px 24px 0;padding:14px 18px;border-radius:10px;
  background:#FFF6E0;border:2px solid var(--yellow);
}
.lineup__noteBadge{
  flex:0 0 auto;padding:5px 18px;border-radius:999px;
  background:var(--red);color:#fff;
  font-size:17px;font-weight:900;letter-spacing:.06em;line-height:1.4;
  box-shadow:0 3px 0 rgba(0,0,0,.15);
}
.lineup__noteTxt{
  flex:1 1 240px;min-width:0;
  font-size:15.5px;font-weight:700;line-height:1.7;color:var(--navy);
}
.lineup__noteTxt b{color:var(--red);font-weight:900;}
.lineup__hint{
  display:flex;align-items:center;gap:10px;margin:12px 24px 0;
  font-size:12px;font-weight:700;color:var(--gray);
}
.lineup__hintArrow{
  flex:1 1 auto;height:2px;position:relative;
  background:linear-gradient(90deg,rgba(31,65,153,.1),rgba(31,65,153,.6));border-radius:2px;
}
.lineup__hintArrow::after{
  content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--navy);border-right:2px solid var(--navy);
  transform:translateY(-50%) rotate(45deg);
}

.lineup__viewport{position:relative;margin-top:12px;}
.lineup__track{
  display:flex;gap:20px;padding:6px 0 14px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--navy) var(--sky-l);
}
.lineup__track::-webkit-scrollbar{height:8px;}
.lineup__track::-webkit-scrollbar-track{background:var(--sky-l);border-radius:999px;}
.lineup__track::-webkit-scrollbar-thumb{background:rgba(31,65,153,.6);border-radius:999px;}
.lineup__track:focus-visible{outline:2px solid var(--navy);outline-offset:-2px;}

.lineup__slide{flex:0 0 100%;scroll-snap-align:start;margin-bottom:0;box-shadow:none;}

/* 操作UI（4台目の次は1台目に戻る） */
.lineup__nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px;}
.lineup__arw{
  position:relative;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;flex:0 0 auto;
  background:var(--navy);box-shadow:0 4px 12px rgba(31,65,153,.3);transition:.2s ease;
}
.lineup__arw::after{
  content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;
  border-top:3px solid #fff;border-right:3px solid #fff;
}
.lineup__arw--prev::after{transform:translate(-30%,-50%) rotate(-135deg);}
.lineup__arw--next::after{transform:translate(-70%,-50%) rotate(45deg);}
.lineup__arw:hover{background:var(--orange);}

.lineup__dots{display:flex;justify-content:center;gap:8px;}
.lineup__dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(31,65,153,.25);transition:.2s ease;
}
.lineup__dots button.is-active{background:var(--orange);transform:scale(1.35);}

@media(max-width:767px){
  .lineup__head{padding:0 16px;gap:10px;}
  .lineup__note{margin:12px 16px 0;padding:12px 14px;gap:8px;}
  .lineup__noteBadge{font-size:15px;padding:4px 14px;}
  .lineup__noteTxt{flex:1 1 100%;font-size:14px;}
  .lineup__hint{margin:10px 16px 0;}
  .lineup__track{padding:6px 0 12px;gap:14px;}
  .lineup__no{width:40px;height:40px;font-size:20px;}
  .lineup__count{min-width:70px;padding:4px 12px;}
  .lineup__count b{font-size:26px;}
  .lineup__arw{width:40px;height:40px;}
}

/* --------------------------------------------------
   価格別 / 車種別
-------------------------------------------------- */
.find{padding:76px 16px;}
.find__inner{max-width:var(--w);margin:0 auto;}

.find__list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.find__list a{
  display:flex;align-items:center;justify-content:center;gap:4px;
  min-height:82px;padding:12px;border-radius:12px;background:#fff;
  border:2px solid var(--navy);color:var(--navy);
  transition:.2s ease;box-shadow:0 4px 0 rgba(31,65,153,.25);
}
.find__list a:hover{background:var(--navy);color:#fff;transform:translateY(-3px);box-shadow:0 8px 0 rgba(31,65,153,.3);}
.find__list b{font-family:var(--ff-en);font-size:30px;letter-spacing:.01em;}
.find__list small{font-size:13px;font-weight:700;}

/* 車種別：画像に車種名が入っているのでテキストラベルなし */
.find__list--type{grid-template-columns:repeat(4,1fr);gap:16px;}
.find__list--type a{
  display:block;min-height:0;padding:0;overflow:hidden;border:none;background:none;
  border-radius:10px;box-shadow:0 6px 16px rgba(31,65,153,.16);
}
.find__list--type a:hover{background:none;transform:translateY(-4px);box-shadow:0 12px 24px rgba(31,65,153,.24);}
.find__list--type img{display:block;width:100%;height:auto;}
.find__list--type .is-pickup a{outline:3px solid var(--orange);outline-offset:2px;}

@media(max-width:767px){
  .find__list{grid-template-columns:repeat(2,1fr);}
  .find__list--type{grid-template-columns:repeat(2,1fr);gap:12px;}
  .find__list b{font-size:24px;}
}

/* --------------------------------------------------
   店舗情報（PC：3店舗横並び／SP：1列・コンパクト）
-------------------------------------------------- */
.shopList{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.shop{
  display:flex;flex-direction:column;
  background:#fff;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 10px 26px rgba(31,65,153,.1);
}
.shop__head{padding:0;}
.shop__photo img,.shop__photo .ph{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border:none;}
.shop__name{
  padding:16px 20px 12px;font-size:21px;font-weight:900;color:var(--navy);letter-spacing:.02em;line-height:1.35;
}
.shop__dl{padding:0 20px;}
.shop__dl > div{display:flex;gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);}
.shop__dl dt{flex:0 0 44px;font-size:12px;font-weight:700;color:var(--navy);}
.shop__dl dd{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:700;line-height:1.6;}
.shop__dl a{color:var(--orange-d);text-decoration:underline;}

.shop__map{margin:16px 20px 0;border-radius:8px;overflow:hidden;}
.shop__map iframe{display:block;width:100%;height:180px;border:0;}

.shop__reviews{padding:16px 20px 0;}
.shop__revHead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.shop__revScore{font-family:var(--ff-en);font-size:22px;color:var(--navy);line-height:1;}
.shop__revCount{font-size:12px;font-weight:700;color:var(--gray);}

/* 星（--rate で 0〜5 を小数指定。3.5 などの半端も正確に表示） */
.stars{
  position:relative;display:inline-block;flex:0 0 auto;
  font-size:16px;line-height:1;letter-spacing:.06em;color:#D7E2EA;
  white-space:nowrap;
}
.stars::before{content:"★★★★★";}
.stars > i{
  position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
  color:#F5A623;width:calc(var(--rate,0) / 5 * 100%);
}
.stars > i::before{content:"★★★★★";}

.revs{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.rev{padding:12px 14px;background:var(--sky-xl);border-radius:8px;border:1px solid var(--line);}
.rev__stars{line-height:1;}
.rev__stars .stars{font-size:13px;}
/* 長文は8行で折りたたみ、全文はGoogleへ誘導 */
.rev__txt{
  margin-top:6px;font-size:13px;line-height:1.75;color:var(--gray);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden;
}
.shop__revMore{margin-top:10px;font-size:12.5px;font-weight:700;}
.shop__revMore a{color:var(--orange-d);text-decoration:underline;}

.shop__btns{display:grid;gap:8px;margin-top:auto;padding:18px 20px 20px;}
.shop__btns .btn{min-height:48px;padding:8px 16px;font-size:15px;}

@media(max-width:980px){
  .shopList{grid-template-columns:1fr;gap:16px;}
  /* SP：写真を小さくして店舗名の横に並べ、1店舗の縦を詰める */
  .shop__head{display:flex;align-items:center;gap:14px;padding:16px 18px 0;}
  .shop__photo{flex:0 0 92px;}
  .shop__photo img,.shop__photo .ph{aspect-ratio:1/1;border-radius:10px;}
  .shop__photo .ph > span{font-size:10px;}
  .shop__photo .ph em{display:none;}
  .shop__name{padding:0;font-size:20px;}
  .shop__dl{padding:12px 18px 0;}
  .shop__map{margin:12px 18px 0;}
  .shop__map iframe{height:150px;}
  .shop__map .ph--map{aspect-ratio:16/7;}
  .shop__reviews{padding:12px 18px 0;}
  .shop__btns{padding:14px 18px 16px;grid-template-columns:1fr 1fr;}
  .shop__btns .btn{min-height:44px;font-size:14px;padding:6px 8px;}
}
@media(max-width:420px){
  .shop__btns{grid-template-columns:1fr;}
}

/* --------------------------------------------------
   フェア概要
-------------------------------------------------- */
.outline{padding:76px 16px;}
.outline__inner{max-width:840px;margin:0 auto;}
.outline__dl{border-top:1px solid var(--line);background:rgba(255,255,255,.7);}
.outline__dl > div{display:flex;padding:16px 14px;border-bottom:1px solid var(--line);}
.outline__dl dt{flex:0 0 150px;font-size:14px;font-weight:900;color:var(--navy);}
.outline__dl dd{font-size:15px;font-weight:500;}
.outline__dl dd b{color:var(--orange-d);font-size:18px;font-weight:900;}
@media(max-width:600px){
  .outline__dl > div{flex-direction:column;gap:2px;}
  .outline__dl dt{flex:none;}
}

/* --------------------------------------------------
   FAQ
-------------------------------------------------- */
.faq{padding:76px 16px 90px;}
.faq__inner{max-width:840px;margin:0 auto;}
.faq__i{background:#fff;border-radius:10px;margin-bottom:10px;overflow:hidden;border:1px solid var(--line);}
.faq__q{
  position:relative;display:block;width:100%;text-align:left;cursor:pointer;
  padding:18px 52px;background:none;border:0;
  font-size:16px;font-weight:700;line-height:1.6;color:var(--navy);
}
.faq__q::before{
  content:"Q";position:absolute;left:18px;top:16px;
  font-family:var(--ff-en);font-size:20px;color:var(--orange);
}
.faq__q::after{
  content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;
  border-right:3px solid var(--navy);border-bottom:3px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;
}
.faq__i.is-open .faq__q::after{transform:translateY(-20%) rotate(-135deg);}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.faq__i.is-open .faq__a{grid-template-rows:1fr;}
.faq__a > p{
  overflow:hidden;margin:0;padding:0 24px 0 52px;font-size:15px;line-height:1.9;color:var(--gray);
  transition:padding .3s ease;
}
.faq__i.is-open .faq__a > p{padding-bottom:20px;}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */
.ftr{padding:36px 16px 100px;background:var(--navy-d);color:#C7D6EE;}
.ftr__inner{max-width:var(--w);margin:0 auto;text-align:center;}
.ftr__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:14px;font-weight:700;}
.ftr__nav a:hover{color:#fff;text-decoration:underline;}
.ftr__note{margin-top:20px;font-size:12px;line-height:1.9;opacity:.75;}
.ftr__cr{margin-top:16px;font-size:12px;opacity:.6;}
@media(min-width:768px){ .ftr{padding-bottom:36px;} }

/* --------------------------------------------------
   追従ナビ（SPのみ・アコーディオンで各セクションへ）
-------------------------------------------------- */
.spnav{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  transform:translateY(110%);transition:transform .35s ease;
}
.spnav.is-show{transform:translateY(0);}

.spnav__panel{
  max-height:0;overflow:hidden;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -10px 24px rgba(31,65,153,.18);
  transition:max-height .32s ease;
}
.spnav.is-open .spnav__panel{max-height:60vh;overflow-y:auto;}
.spnav__panel ul{padding:6px 0;}
.spnav__panel li + li{border-top:1px solid var(--line);}
.spnav__panel a{
  position:relative;display:block;padding:13px 44px 13px 20px;
  font-size:15px;font-weight:700;color:var(--navy);
}
.spnav__panel a::after{
  content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--orange);border-right:2px solid var(--orange);
  transform:translateY(-70%) rotate(135deg);
}

.spnav__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:56px;padding:0 20px calc(0px + env(safe-area-inset-bottom));
  border:0;cursor:pointer;
  background:var(--navy);color:#fff;
  font-size:16px;font-weight:900;letter-spacing:.08em;
}
.spnav__btnTxt{position:relative;padding-right:26px;}
.spnav__btnTxt::after{
  content:"";position:absolute;right:0;top:50%;width:10px;height:10px;
  border-top:3px solid var(--yellow);border-right:3px solid var(--yellow);
  transform:translateY(-30%) rotate(-45deg);transition:transform .3s ease;
}
.spnav.is-open .spnav__btnTxt::after{transform:translateY(-70%) rotate(135deg);}

@media(min-width:768px){ .spnav{display:none;} }

/* --------------------------------------------------
   スクロールリベール
-------------------------------------------------- */
/* スクロールで表示するアニメーション。
   JSが無効／読み込めない端末では非表示にしないよう .js が付いたときだけ効かせる */
.js .js-rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.js .js-rv.is-in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .js .js-rv{opacity:1;transform:none;}
}

/* ==========================================================================
   スマホ表示の並び調整
   ========================================================================== */
@media(max-width:767px){

  /* MVの3訴求：2＋1で折り返していたので1行に収める */
  .mv__points{gap:6px;}
  .mv__points li{padding:4px 11px;font-size:11.5px;letter-spacing:0;}

  /* 最速納期の4ステップ：3＋1の余りが出ていたので 2×2 に */
  .speed__steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .speed__steps li{flex:none;white-space:normal;}

  /* 価格別7区分：最後の1つが余るので最終行を全幅に */
  .find--price .find__list li:last-child{grid-column:1 / -1;}

  /* 店舗名：写真の横で2行に折れていたので1行に収める */
  .shop__name{font-size:18px;letter-spacing:0;}

  /* デリカの2枚バッジが縦に並ぶ分の余白を確保 */
  .car__flag{font-size:12px;padding:4px 12px;}
  .car__flag--rental{top:48px;}
}

/* --------------------------------------------------
   店舗のタグ（新店オープン／併売店）
-------------------------------------------------- */
.shop__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.shop__tag{
  padding:3px 10px;border-radius:999px;
  background:var(--sky-l);border:1px solid var(--line);color:var(--navy);
  font-size:11.5px;font-weight:900;letter-spacing:.02em;line-height:1.5;
}
.shop__tag--new{background:var(--red);border-color:var(--red);color:#fff;}

@media(max-width:767px){
  .shop__tags{margin-top:6px;}
}