/* Car Connections Gifu — 視覚デザイン層（motion.css の下に読む）
   方針
   - site.css の骨格は壊さない。**加算的なクラスと、既存クラスへの上書き**だけで密度を上げる。
   - 動きは motion.css の担当。ここは色・奥行き・質感・余白のリズムを扱う。
   - 外部アセットを使わない（SVG は data URI でインライン）。配信で必ず解決する。
   - 触るのは色/影/背景/角丸/枠。レイアウトを動かす指定は最小限に留める（CLS を出さない）。 */

:root{
  /* 色の階調（深緑一色の単調さを崩す。岐阜の土・杉・若葉） */
  --sand:#f7f2ea;      /* 温かい明色。緑系の節と交互に置く */
  --sand-line:#e8dfd0;
  --deep:#12321F;      /* navy より深い面。締めに使う */
  --shallow:#E7F6EC;   /* 若葉。light より彩度がある */
  /* 奥行きのトークン（影を1本ずつ手書きしない） */
  --e1:0 1px 2px rgba(16,48,32,.06),0 2px 8px rgba(16,48,32,.05);
  --e2:0 4px 10px -6px rgba(16,48,32,.18),0 14px 34px -20px rgba(16,48,32,.28);
  --e3:0 10px 22px -14px rgba(16,48,32,.28),0 30px 60px -34px rgba(16,48,32,.42);
  --e-primary:0 18px 40px -22px rgba(26,92,58,.55);
  --glass:rgba(255,255,255,.72);
  --hair:rgba(16,48,32,.09);
  --ring:rgba(26,92,58,.28);
}

/* ============================================================
   1. 背景の質感 — 粒子・グリッド・オーロラ
   ============================================================ */

/* 1-1. 微細なグレイン（べた塗りの平坦さを消す）。SVGノイズを data URI で内蔵 */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* 1-2. ドットグリッド（節の奥に薄く敷く） */
.bg-dots{position:relative;isolation:isolate}
.bg-dots::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(26,92,58,.16) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 40%,transparent 100%);
}

/* 1-3. オーロラ（大きな色面をぼかして重ねる。blob より広く、遅い） */
.bg-aurora{position:relative;isolation:isolate;overflow:clip}
.bg-aurora::before,.bg-aurora::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;
}
.bg-aurora::before{width:46vw;height:46vw;left:-12vw;top:-16vw;background:radial-gradient(circle,rgba(26,92,58,.34),transparent 68%)}
.bg-aurora::after{width:38vw;height:38vw;right:-10vw;bottom:-14vw;background:radial-gradient(circle,rgba(143,211,172,.3),transparent 66%)}

/* 1-4. 斜めの境界（節の切り替わりに角度を持たせる） */
.edge-top{clip-path:polygon(0 2.6vw,100% 0,100% 100%,0 100%)}
.edge-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 2.6vw),0 100%)}
@media(max-width:760px){.edge-top,.edge-bottom{clip-path:none}}

/* ============================================================
   2. カードの質感 — ガラス・縁・内側のハイライト
   ============================================================ */
.p-qa,.p-service__card,.c-card,.p-steps li{
  border:1px solid var(--hair);
  box-shadow:var(--e2);
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.86));
  position:relative;
}
/* 上端に細い光の線を1本入れると、平面が「面」に見える */
.p-qa::after,.p-service__card::after,.p-steps li::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
}
.p-qa:hover,.p-service__card:hover,.p-steps li:hover{box-shadow:var(--e3)}

/* 2-2. ガラス（濃色の上に置くカード用） */
.glass{
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.22);border-radius:18px;
}

/* 2-3. 枠が回るリング（重要カードの強調・GPUのみで回る） */
@keyframes ccRing{to{transform:rotate(360deg)}}
.ring-glow{position:relative;isolation:isolate}
.ring-glow::before{
  content:"";position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from 0deg,transparent 0deg,var(--primary) 60deg,transparent 140deg,transparent 360deg);
  animation:ccRing 6s linear infinite;opacity:.55;
}

/* ============================================================
   3. 見出し・活字のリズム
   ============================================================ */
.c-heading{position:relative;isolation:isolate}
.c-heading__ja{position:relative}
/* 見出し左の短い罫は、和文の前に置くとハイフンの打ち間違いに見えたので撤去した */
.c-heading__lead{line-height:2.15;letter-spacing:.01em}
.p-lead-block p+p{margin-top:1.35em}
.p-qa h3{letter-spacing:.01em}

/* 極大英字は節の外へはみ出させない（documentのスクロール幅を伸ばさない）。
   overflow-x:clip は overflow:hidden と違い position:sticky を壊さない。 */
.sec,.p-pagehero{overflow-x:clip}
/* 節タイトルの背後に置く極大の英字（奥行き） */
.wm{
  position:absolute;left:0;right:0;margin-inline:auto;width:max-content;top:-.18em;/* transform で中央寄せしない: スクロール駆動(sd-slide)の transform に上書きされるため */
  font-family:var(--f-en);font-weight:700;font-size:clamp(3.2rem,13vw,11rem);max-width:96vw;overflow:hidden;text-overflow:clip;line-height:.85;
  color:rgba(26,92,58,.055);letter-spacing:.02em;pointer-events:none;user-select:none;white-space:nowrap;z-index:-1;
}

/* ============================================================
   4. 画像の扱い
   ============================================================ */
.c-card__img,.p-about__img,.p-about-v__img{border-radius:16px;overflow:hidden;position:relative}
/* 写真の上に薄いブルーを重ねてトーンを揃える（ストック写真の寄せ集め感を消す） */
.c-card__img::after,.p-about__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,92,58,.06),rgba(38,55,45,.14));
  opacity:.9;transition:opacity .5s var(--ease-out);
}
.c-card:hover .c-card__img::after{opacity:.35}
/* 角の内側に細い枠を1本（額装） */
.c-card__img::before{
  content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.34);border-radius:inherit;z-index:2;pointer-events:none;
}

/* ============================================================
   5. ボタン・リンクの密度
   ============================================================ */
.c-btn--line{box-shadow:0 14px 30px -16px rgba(255,179,0,.75)}
.c-btn--fill{box-shadow:var(--e-primary)}
.c-btn--ghost{backdrop-filter:blur(4px)}
/* フォーカスリング（キーボード操作の可視化） */
.c-btn:focus-visible,.p-qa a:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:4px}

/* 6. 地域チップの立体感 */
.p-tags span{
  border:1px solid var(--ring);background:linear-gradient(180deg,#fff,rgba(240,252,245,.9));
  box-shadow:var(--e1);transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s
}
.p-tags span:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--primary)}

/* 7. 集計評価まわり */
.p-rev__agg{display:inline-flex;align-items:baseline;gap:8px;padding:14px 30px;border-radius:999px;
  background:linear-gradient(180deg,#fff,rgba(240,252,245,.92));border:1px solid var(--ring);box-shadow:var(--e2);
  font-size:13.5px;color:var(--gray2)}
.p-rev__aggwrap{text-align:center;margin-bottom:34px}

/* 8. スクロール進捗バー（motion.js が生成）を少し厚く、影を持たせる */
.cc-scrollbar{height:3px;box-shadow:0 1px 6px rgba(26,92,58,.5)}

@media (prefers-reduced-motion: reduce){
  .ring-glow::before{animation:none}
  .p-tags span:hover,.p-qa:hover,.p-service__card:hover{transform:none}
}

/* 数字で見る（AIが引用しやすい事実の一覧） */
.p-facts{display:grid;gap:14px;margin-top:44px}
@media(min-width:820px){.p-facts{grid-template-columns:repeat(2,1fr);gap:16px 34px}}
.p-facts>div{display:grid;grid-template-columns:8.5em 1fr;gap:14px;align-items:start;padding:16px 20px;background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:var(--e1)}
.p-facts dt{font-size:12.5px;font-weight:700;color:var(--primary);letter-spacing:.04em;padding-top:.15em}
.p-facts dd{font-size:14.5px;line-height:1.85;color:var(--ink);margin:0}
.p-facts dd a{color:var(--primary);font-weight:700}
@media(max-width:520px){.p-facts>div{grid-template-columns:1fr;gap:4px}}

/* サイテーションの可視リンク（data-stem-citations のフォールバック） */
[data-stem-citations]{align-items:center;opacity:.85}
[data-stem-citations] a{text-decoration:underline;text-underline-offset:3px}
[data-stem-citations] a:hover{opacity:.7}
.c-cit__ttl{font-weight:700;letter-spacing:.06em;opacity:.7}

.c-updated{font-size:12.5px;color:rgba(16,48,32,.55);text-align:right;margin:0 0 40px}

/* ============================================================
   技術監査（2026-08-15）の是正
   ============================================================ */

/* H-1: app.js が落ちるとカルーセルの3枚目以降に到達できなかった。
   JSに依存せず横スクロールできる状態を初期値にする（Swiper が動けば上書きされる）。 */
.swiper.works{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.swiper.works .swiper-slide{scroll-snap-align:start}
.swiper.works.swiper-initialized{overflow-x:hidden;scroll-snap-type:none}

/* H-3: .c-rich a{color:var(--primary)} が詳細度で .c-btn--line{color:#fff} に勝ち、
   ガイドのLINEボタンだけ青文字on緑（1.69:1）で判読できなくなっていた。 */
.c-rich a.c-btn--line{color:var(--cta-ink)}.c-rich a.c-btn--fill{color:#fff}
.c-rich a.c-btn--ghost{color:var(--navy)}

/* H-4: ハンバーガーが 28x26px しかなく、モバイル唯一のナビ導線として小さすぎた */
.l-burger{width:44px;min-width:44px;height:44px;flex:none;justify-content:center;align-items:center}
.l-burger span{width:24px}

/* H-5: ライブ差込枠に高さ予約が無く、配信で実データが入った瞬間にCLSが出る
   （ローカルは何も差し込まれないので原理的に検出できない） */
[data-stem-review-list]{min-height:240px;align-items:start}
[data-stem-ig-list]{min-height:220px}
[data-stem-topics]{min-height:320px}
[data-stem-column-list]{min-height:150px}
@media(max-width:820px){
  [data-stem-review-list]{min-height:300px}
  [data-stem-topics]{min-height:380px}
}

/* M-1: フッター系の文字が 2.36〜3.63:1 しかなかった（4.5:1 が基準） */
.foot-author,.l-footer__bottom{color:#C5D0C8}
.l-footer__brand p{color:#CAD3CD}
.l-logo__txt span{color:#8FD3AC}

/* 電話・SNS の行リンクは指で押せる高さを確保（表示位置は変えず当たり判定だけ広げる） */
a[href^="tel:"],a[href*="instagram.com"]{display:inline-flex;align-items:center;min-height:44px}
.l-footer a[href^="tel:"],.c-nap a[href^="tel:"]{min-height:44px}


/* ============================================================
   色の階調 — 節ごとに温度差をつける（全部青、を崩す）
   ============================================================ */
.sec--sand{background:var(--sand)}
.sec--sand .c-heading__ja{color:var(--deep)}
.sec--sand .p-qa,.sec--sand .p-steps li,.sec--sand .p-facts>div{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.9));border-color:var(--sand-line)}
.sec--shallow{background:var(--shallow)}
.sec--deep{background:var(--deep);color:#EAF6EF}
.sec--deep .c-heading__ja{color:#fff}
.sec--deep .c-heading__lead{color:rgba(234,246,239,.82)}
.sec--deep .p-lead-block p{color:rgba(234,246,239,.9)}

/* ============================================================
   数字で見る — 素の定義リストから、数字が主役のカードへ
   ============================================================ */
.p-facts>div{position:relative;padding:22px 22px 20px 22px;grid-template-columns:1fr;gap:6px;
  border-radius:16px;overflow:hidden}
.p-facts>div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--primary),#8FD3AC)}
.p-facts dt{font-size:11.5px;letter-spacing:.1em;font-weight:700;color:var(--primary);opacity:.95}
.p-facts dd{font-size:15px;line-height:1.8;color:var(--navy);font-weight:500}
.p-facts dd a{color:var(--primary)}
/* 数字だけ大きく見せる（Stem が注入する評価値もここに乗る） */
.p-facts [data-stem-rating],.p-facts [data-stem-review-count]{
  font-family:var(--f-en);font-weight:700;font-size:24px;color:var(--primary);
  line-height:1;vertical-align:-.06em;margin:0 .12em}
@media(min-width:820px){.p-facts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1180px){.p-facts{grid-template-columns:repeat(4,1fr)}}

/* FAQ のカテゴリ絞り込み（52問あるので探せる形にする。JSが無ければ全問表示のまま） */
.p-faqtabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.p-faqtabs__b{border:1px solid var(--ring);background:#fff;color:var(--navy);
  border-radius:999px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;min-height:40px}
.p-faqtabs__b:hover{border-color:var(--primary);color:var(--primary)}
.p-faqtabs__b.is-on{background:var(--primary);border-color:var(--primary);color:#fff}
.p-faqtabs__b:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* 固定ヘッダーの下にアンカー先が潜らないようにする（#loan 等の内部リンク・タブ移動） */
html{scroll-padding-top:96px}
@media(max-width:1080px){html{scroll-padding-top:80px}}

/* FAQ のカテゴリ見出しと導入文を、質問リストと同じ左端に揃える */
.c-faq__topic{margin:44px 0 10px}
.c-faq__topic+.p-lead-block{margin-left:0;margin-right:0;max-width:none}
.p-faqtabs{scroll-margin-top:110px}

/* ============================================================
   レイアウトのリズム（§3-1）
   全節が「中央寄せ見出し＋グリッド」で単調だったので、
   ①見出しを横に逃がす節 ②カードを段違いにする節 ③余白の緩急 を作る。
   HTML の構造は変えず、節に付けたクラスだけで切り替える。
   ============================================================ */

/* ① 見出しを左に置き、本文を右へ。見出しはスクロール中その場に留まる */
@media(min-width:1000px){
  .sec--split>.l-container{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(40px,5vw,88px);align-items:start}
  .sec--split .c-heading{text-align:left;margin-bottom:0;position:sticky;top:112px}
  .sec--split .c-heading--center{text-align:left}
  .sec--split .c-heading__lead{margin-inline:0}
  .sec--split .wm{left:0;right:auto;margin-inline:0;text-align:left;max-width:100%;font-size:clamp(2.6rem,7vw,5.4rem)}
  /* 見出し以外の直下要素は右カラムに積む */
  .sec--split>.l-container>*:not(.c-heading){grid-column:2}
  /* span 99 だと暗黙の行が99個でき、その row-gap が積み上がって巨大な空白になる */
  .sec--split>.l-container>.c-heading{grid-row:1 / -1}
}

/* ② カードの段違いは下端・上端が不揃いで雑に見えたため全廃。
   リズムは節の余白（③）と分割レイアウト（①）で作る。 */

/* ③ 余白の緩急（詰める節と抜く節を交互に） */
.sec--tight{padding-block:clamp(44px,6vw,78px)}
.sec--airy{padding-block:clamp(88px,12vw,168px)}

/* ============================================================
   フォームの状態設計（§3-7）
   Stem のランタイムが submit を横取りし、送信中は submit を disabled にし、
   完了/失敗で [data-stem-form-success] / [-error] の hidden を外す。
   その4状態が見た目で分かるようにする。
   ============================================================ */
.c-form input,.c-form select,.c-form textarea{
  transition:border-color .25s,box-shadow .25s,background .25s}
.c-form input:focus,.c-form select:focus,.c-form textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(26,92,58,.16)}
/* 入力済み: 枠を落ち着かせて「済んだ」ことを見せる */
.c-form input:not(:placeholder-shown):valid,.c-form textarea:not(:placeholder-shown):valid{
  border-color:rgba(16,48,32,.22);background:#fff}
/* 入力に触れたあとだけ赤にする（初回表示でいきなり赤くしない） */
.c-form input:user-invalid,.c-form textarea:user-invalid,.c-form select:user-invalid{
  border-color:#d9534f;box-shadow:0 0 0 3px rgba(217,83,79,.14)}
/* 送信中（ランタイムが disabled にする） */
.c-form button[type=submit]:disabled{opacity:.6;cursor:progress;position:relative}
.c-form button[type=submit]:disabled::after{
  content:"";width:15px;height:15px;margin-left:10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;display:inline-block;
  animation:ccSpinner .7s linear infinite;vertical-align:-2px}
@keyframes ccSpinner{to{transform:rotate(360deg)}}
/* 完了 / 失敗 */
.c-alert{margin-top:18px;padding:16px 20px;border-radius:12px;font-size:14.5px;line-height:1.8;border:1px solid}
.c-alert--ok{background:rgba(6,199,85,.08);border-color:rgba(6,199,85,.4);color:#0E8A45}
.c-alert--ng{background:rgba(217,83,79,.07);border-color:rgba(217,83,79,.4);color:#8f2b28}
@media (prefers-reduced-motion: reduce){.c-form button[type=submit]:disabled::after{animation:none}}

/* ============================================================
   写真の器（§3-3）— 実写真が入った瞬間に効く形を先に用意する
   いまはフリー素材なので効果が見えにくいが、差し替え時に器ごと作り直さずに済む
   ============================================================ */

/* ① アーチ型マスク（人物・店舗外観向け） */
.ph-arch{border-radius:50% 50% 18px 18px / 34% 34% 18px 18px;overflow:hidden}

/* ② 額装（内側の細枠＋キャプション） */
.ph-frame{position:relative;border-radius:18px;overflow:hidden;background:#fff;
  padding:10px;border:1px solid var(--hair);box-shadow:var(--e2)}
.ph-frame img{border-radius:12px;display:block;width:100%}
.ph-frame figcaption{padding:12px 6px 4px;font-size:12.5px;color:var(--gray2);line-height:1.7}
.ph-frame figcaption b{display:block;color:var(--navy);font-size:13.5px;margin-bottom:3px}

/* ③ 2枚を段違いに重ねる（1枚では単調な節に奥行きを出す） */
.ph-duo{position:relative;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:900px){
  .ph-duo{grid-template-columns:1.35fr 1fr;align-items:end}
  .ph-duo>*:last-child{margin-left:-14%;margin-bottom:-34px;position:relative;z-index:2;
    box-shadow:0 24px 60px -30px rgba(16,48,32,.55);border-radius:16px;overflow:hidden}
}

/* ④ 帯に食い込ませる（節の境界をまたぐ配置） */
.ph-bleed{margin-block:-40px}
@media(max-width:900px){.ph-bleed{margin-block:0}}

/* ⑤ キャプションを画像の上に載せる（説明を写真から離さない） */
.ph-cap{position:relative;border-radius:16px;overflow:hidden}
.ph-cap figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;
  background:linear-gradient(180deg,transparent,rgba(16,48,32,.78));color:#fff;font-size:13px;line-height:1.7}

/* ⑥ 写真の上のトーンは、ホバーで晴れる（既存の .c-card__img と同じ考え方を汎用化） */
.ph-tone{position:relative;overflow:hidden;border-radius:16px}
.ph-tone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,92,58,.05),rgba(16,48,32,.16));transition:opacity .5s var(--ease-out)}
.ph-tone:hover::after{opacity:.3}

/* ============================================================
   仕組みの流れ図（HTML+CSS。和文の組版が効くよう SVG のテキストは使わない）
   ============================================================ */
.p-flowdia{display:grid;gap:22px;margin:46px 0 10px}
@media(min-width:960px){.p-flowdia{grid-template-columns:1.15fr .85fr;gap:30px}}
.p-flowdia__card{background:#fff;border:1px solid var(--hair);border-radius:20px;
  padding:30px 26px 26px;box-shadow:var(--e2);display:flex;flex-direction:column;gap:20px}
.p-flowdia__card--ours{border-color:var(--ring);box-shadow:var(--e-primary);
  background:linear-gradient(180deg,#fff,rgba(240,252,245,.85))}
.p-flowdia__ttl{font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--gray2);
  text-align:center;margin:0}
.p-flowdia__card--ours .p-flowdia__ttl{color:var(--primary)}
.p-flowdia__row{display:flex;align-items:center;justify-content:center;gap:10px;flex:1}
.p-flowdia__node{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:20px 10px 18px;border:1.5px solid rgba(16,48,32,.16);border-radius:16px;background:#fff;text-align:center}
.p-flowdia__node b{font-size:14px;color:var(--navy);line-height:1.4;font-weight:700}
.p-flowdia__node span:last-child{font-size:11.5px;color:var(--gray2)}
.p-flowdia__node--other{background:#F2F6F3;border-color:rgba(16,48,32,.14)}
.p-flowdia__node--other b{color:var(--gray2)}
.p-flowdia__node--ours{border-color:var(--primary);border-width:2px;
  background:linear-gradient(180deg,rgba(26,92,58,.09),rgba(26,92,58,.03));box-shadow:0 12px 26px -18px rgba(26,92,58,.7)}
.p-flowdia__node--ours b{color:var(--primary-d)}
.p-flowdia__ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:rgba(26,92,58,.1)}
.p-flowdia__ico svg{width:21px;height:21px;fill:var(--primary)}
.p-flowdia__node--other .p-flowdia__ico{background:rgba(16,48,32,.07)}
.p-flowdia__node--other .p-flowdia__ico svg{fill:var(--gray)}
.p-flowdia__node--ours .p-flowdia__ico{background:var(--primary)}
.p-flowdia__node--ours .p-flowdia__ico svg{fill:#fff}
.p-flowdia__arw{width:30px;height:12px;flex:none}
.p-flowdia__arw path{fill:none;stroke:var(--primary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.p-flowdia__card:not(.p-flowdia__card--ours) .p-flowdia__arw path{stroke:var(--gray)}
.p-flowdia__note{margin:0;text-align:center;font-size:13px;color:var(--gray2);line-height:1.7}
.p-flowdia__card--ours .p-flowdia__note{color:var(--navy);font-weight:700}
@media(max-width:520px){
  .p-flowdia__row{flex-direction:column;gap:8px}
  .p-flowdia__node{width:100%}
  .p-flowdia__arw{transform:rotate(90deg);width:20px}
}

/* 口コミカードは中身の高さで畳む（差込前の予約は親側の min-height で足りる） */
.p-rev__grid{align-items:start}
.p-rev__card{height:auto;padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px}
.p-rev__card p{margin:0;font-size:14.5px;line-height:1.95}
.p-rev__src{font-size:12px;color:var(--gray2);font-weight:700}

/* ============================================================
   コンタクト帯 — 空白が多く情報が薄かったので、要点を1枚のカードに集約
   ============================================================ */
.p-contact__inner{padding-block:clamp(56px,7vw,92px)}
.p-contact__card{max-width:min(430px,40vw);margin:24px 0 28px;background:rgba(255,255,255,.97);
  border:1px solid var(--hair);border-radius:18px;padding:24px 26px 20px;box-shadow:var(--e2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.p-contact__dl{display:grid;gap:12px;margin:0}
.p-contact__dl>div{display:grid;grid-template-columns:5.6em 1fr;gap:14px;align-items:start}
.p-contact__dl dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--primary);padding-top:.25em}
.p-contact__dl dd{margin:0;font-size:14px;line-height:1.75;color:var(--navy);font-weight:500}
.p-contact__hint{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--hair);
  font-size:12.5px;line-height:1.85;color:var(--gray2)}
.p-contact__tel{margin-top:4px}
.p-contact__tel a{font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:700;letter-spacing:.02em;
  color:var(--navy);display:inline-flex;align-items:center;gap:12px}
.p-contact__tel a::before{content:"";width:34px;height:34px;border-radius:50%;background:var(--primary);
  flex:none;-webkit-mask:center/17px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24c1.1.37 2.3.57 3.5.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.57 3.5a1 1 0 0 1-.25 1l-2.2 2.3z'/></svg>");
  mask:center/17px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24c1.1.37 2.3.57 3.5.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.2.2 2.4.57 3.5a1 1 0 0 1-.25 1l-2.2 2.3z'/></svg>")}
.p-contact__ctas{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center}
@media(max-width:860px){.p-contact__card{max-width:none;background:rgba(255,255,255,.97)}}

.p-rev__agg [data-stem-review-count]{font-family:var(--f-en);font-weight:700;font-size:18px;color:var(--navy);margin:0 .1em}

/* 透かしは見出しの揃えに合わせる（中央見出し＝中央、左揃え見出し＝左） */
.c-heading:not(.c-heading--center) .wm{margin-inline:0;right:auto;text-align:left}

/* コンタクト帯: .p-contact__inner が .l-container（中央寄せ）と max-width:640px を
   兼ねていたため、640px の塊ごと画面中央へ寄り、左に大きな余白ができていた。
   コンテナは全幅のまま保ち、中身だけ幅を制限して左端に揃える。 */
.p-contact__inner{max-width:none}
.p-contact__inner>*{max-width:min(560px,52%)}
@media(max-width:900px){.p-contact__inner>*{max-width:none}}

/* ============================================================
   英語ページのヒーロー
   同じ内容でも英語は行が長くなり、見出しが円形写真の下に潜り込んでいた
   （日本語は行が短いため当たらず、EN でだけ起きる）。
   英語のときだけテキスト列を狭め、字面を少し詰める。
   ============================================================ */
html[lang="en"] .p-hero__ja,
html[lang="en"] .p-hero__en,
html[lang="en"] .p-hero__lead,
html[lang="en"] .p-hero__eyebrow{max-width:min(540px,44vw)}
html[lang="en"] .p-hero__ja{font-size:clamp(1.9rem,3.4vw,2.55rem);line-height:1.28;letter-spacing:.01em}
html[lang="en"] .p-hero__en{font-size:clamp(1.05rem,1.9vw,1.45rem);line-height:1.45}
html[lang="en"] .p-hero__tags,html[lang="en"] .p-hero__ctas{max-width:min(560px,46vw)}
@media(max-width:900px){
  html[lang="en"] .p-hero__ja,html[lang="en"] .p-hero__en,html[lang="en"] .p-hero__lead,
  html[lang="en"] .p-hero__eyebrow,html[lang="en"] .p-hero__tags,html[lang="en"] .p-hero__ctas{max-width:none}
  html[lang="en"] .p-hero__ja{font-size:clamp(1.7rem,6vw,2.2rem)}
}

/* ============================================================
   Gallery（トップ「お届けする一台一台」）— 写真主役の見せ方
   ------------------------------------------------------------
   なぜ: 実車写真を12枚並べる面になったので、白いテキスト箱が写真と同じ高さを
   占める「カテゴリカード」の作りでは写真が主役にならない。写真を全面に出し、
   文字はスクリムの上に載せる。
   方針: site.css の .c-card を**上書きだけ**で作り替える（HTML構造は変えない）。
         レイアウトは aspect-ratio と absolute で決めるので初回描画から確定＝CLS を出さない。
   適用範囲: [data-stem-section="gallery"] のみ。works.html のカルーセルには波及させない。
   ============================================================ */
:root{ --gal-scrim:10,30,18; }   /* スクリムの素の色。案件のテーマ色に合わせる */

[data-stem-section="gallery"] .swiper-wrapper{counter-reset:gal}

[data-stem-section="gallery"] .c-card{
  position:relative; border:0; border-radius:14px; background:var(--deep);
  box-shadow:0 1px 2px rgba(var(--gal-scrim),.12), 0 12px 28px -18px rgba(var(--gal-scrim),.55);
  transition:box-shadow .45s var(--ease,cubic-bezier(.22,1,.36,1));
  counter-increment:gal;
}
[data-stem-section="gallery"] .c-card:hover{
  box-shadow:0 2px 4px rgba(var(--gal-scrim),.16), 0 22px 44px -20px rgba(var(--gal-scrim),.62);
}

/* 写真: 縦を伸ばして「一台の肖像」に寄せる。中身は object-fit:cover のまま */
[data-stem-section="gallery"] .c-card__img{aspect-ratio:4/5; border-radius:inherit}

/* 下からのスクリム。文字の可読性を素の写真に依存させない */
[data-stem-section="gallery"] .c-card__img::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to top,
    rgba(var(--gal-scrim),.93) 0%, rgba(var(--gal-scrim),.74) 24%,
    rgba(var(--gal-scrim),.24) 52%, rgba(var(--gal-scrim),0) 76%);
}

/* 通し番号。点数のある面であることを控えめに示す */
[data-stem-section="gallery"] .c-card::after{
  content:counter(gal,decimal-leading-zero);
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:var(--f-en); font-size:12px; font-weight:700; letter-spacing:.12em;
  color:rgba(255,255,255,.72); text-shadow:0 1px 8px rgba(var(--gal-scrim),.6);
}

/* 文字はスクリムの上へ */
[data-stem-section="gallery"] .c-card__body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 18px 20px; background:none;
}
[data-stem-section="gallery"] .c-card__cat{
  display:inline-block; color:#fff; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:3px 9px; font-size:10px; letter-spacing:.10em;
}
[data-stem-section="gallery"] .c-card__ttl{
  color:#fff; margin:9px 0 4px; font-size:16px; text-shadow:0 1px 10px rgba(var(--gal-scrim),.55);
}
[data-stem-section="gallery"] .c-card__txt{
  color:rgba(255,255,255,.82); font-size:12.5px; line-height:1.7;
}

@media (max-width:700px){
  [data-stem-section="gallery"] .c-card__ttl{font-size:15px}
  [data-stem-section="gallery"] .c-card__body{padding:16px 15px 17px}
}
@media (prefers-reduced-motion:reduce){
  [data-stem-section="gallery"] .c-card{transition:none}
}

/* ============================================================
   カルーセルの「Swiper が動く前」の見た目を CSS で確定させる
   ------------------------------------------------------------
   なぜ: swiper-bundle.min.css は .swiper-slide{width:100%} と
   .swiper-wrapper{flex-direction:column} を当てる。**JS(defer) が実行されるまで
   1枚目がコンテナ幅いっぱい・縦積み**になり、aspect-ratio と掛け合わさって
   画面を埋める巨大なカードが出る（実機で発生）。
   JS の到達を待たないと正しく出ない状態は作らない、という本プロジェクトの原則どおり
   CSS 側で初期状態を決める。Swiper が付ける .swiper-initialized で自動的に降りる。
   ============================================================ */
.swiper.works:not(.swiper-initialized){overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.swiper.works:not(.swiper-initialized)::-webkit-scrollbar{display:none}
.swiper.works:not(.swiper-initialized) .swiper-wrapper{display:flex; flex-direction:row; gap:18px}
.swiper.works:not(.swiper-initialized) .swiper-slide{flex:0 0 min(78vw,300px); width:auto}
@media (min-width:640px){
  .swiper.works:not(.swiper-initialized) .swiper-slide{flex-basis:calc((100% - 18px)/2.2)}
}
@media (min-width:992px){
  .swiper.works:not(.swiper-initialized) .swiper-wrapper{gap:22px}
  .swiper.works:not(.swiper-initialized) .swiper-slide{flex-basis:calc((100% - 2*22px)/3.2)}
}
@media (min-width:1200px){
  .swiper.works:not(.swiper-initialized) .swiper-wrapper{gap:24px}
  .swiper.works:not(.swiper-initialized) .swiper-slide{flex-basis:calc((100% - 3*24px)/4)}
}

/* ============================================================
   車両一覧グリッド（works.html「取扱車種」）
   ------------------------------------------------------------
   なぜ: 台数が増える面なので、スライダーではなく一覧で全部見せる。
   ・**画像は小さめに並べる**（大きく引き伸ばすと元画像の粗さが見えるため）
   ・**縦横比は元画像のまま（16:9）**にして、車体が切れずに全部入るようにする
     （Gallery のスライダー側は 4:5 の縦長。あちらは「一台の肖像」なので別扱い）
   ・20枚までを出し、それを超えたぶんは「さらに見る」で開く。
     ⚠ 隠すのは **.js が付いているときだけ**。JS が無い/落ちた環境と
       クローラーには**全件が出たまま**にする（本文の可視を JS に依存させない）。
   ============================================================ */
.p-cargrid{
  display:grid; gap:14px; margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
@media (min-width:700px){ .p-cargrid{gap:16px; grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} }
@media (min-width:1200px){ .p-cargrid{gap:18px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr))} }

/* 車体が全部入るよう元画像の比で見せる。Gallery の 4:5 指定をここだけ上書き */
[data-stem-section="gallery"] .p-cargrid .c-card__img{aspect-ratio:16/9}
/* 一覧では通し番号を出さない。
   ① counter-reset を持っていた .swiper-wrapper が無くなり、全カードが 01 になる
   ② 在庫番号と読み違えられる余地がある（これは「取扱車種の例」であって在庫リストではない）
   スライダー側（トップの Gallery）では引き続き出す。 */
[data-stem-section="gallery"] .p-cargrid .c-card::after{content:none}
/* works のカードは本文を持たないので、スクリムは番号が読める程度に浅くする */
[data-stem-section="gallery"] .p-cargrid .c-card__img::after{
  background:linear-gradient(to bottom, rgba(var(--gal-scrim),.42) 0%, rgba(var(--gal-scrim),0) 34%);
}
/* 本文を持つカードが混ざった場合は下側のスクリムも戻す */
[data-stem-section="gallery"] .p-cargrid .c-card:has(.c-card__body) .c-card__img::after{
  background:linear-gradient(to top, rgba(var(--gal-scrim),.93) 0%, rgba(var(--gal-scrim),.62) 30%, rgba(var(--gal-scrim),0) 62%),
             linear-gradient(to bottom, rgba(var(--gal-scrim),.42) 0%, rgba(var(--gal-scrim),0) 34%);
}

/* 20枚を超えたぶんは畳む。**.js のときだけ**（JS 無しは全件表示のまま） */
.js .p-cargrid.is-clamped > .p-cargrid__item:nth-child(n+21){display:none}
/* ============================================================
   [hidden] を確実に効かせる
   ------------------------------------------------------------
   UA の [hidden]{display:none} は詳細度 0,0,1 しかなく、クラス指定の display に負ける。
   実際に2件やらかした:
     ・.c-btn{display:inline-flex}  → 「さらに見る」が20枚以下でも出る
     ・.p-cardgrid{display:grid}    → 記事詳細で「コラムは準備中です」が消えない
       （Stem のランタイムは詳細表示時に一覧へ hidden=true を付けている。CSS 側が無視していた）
   個別に潰すと同じ事故が繰り返されるので、属性そのものを最優先で効かせる。
   ============================================================ */
[hidden]{display:none!important}

/* ============================================================
   車両カード（works.html の一覧）— 画像そのものに手を入れる
   ------------------------------------------------------------
   素の写真を並べただけだと「一覧」に見えず、カードにも見えない。
   写真の上にカテゴリのピルを載せ、上下に薄いスクリムを敷いて写真を締め、
   その下に車種名を置いて「カード」の体裁にする。
   写真は 16:9 のまま＝車体が全部入る（縦長に切らない）。
   ============================================================ */
/* ⚠ 上の Gallery 節が [data-stem-section="gallery"] .c-card{background:var(--deep)} を
   当てているので、詳細度を揃えないと車種名の帯が濃色のままになり文字が読めない（実際にそうなった）。 */
[data-stem-section="gallery"] .p-cargrid .p-carcard{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(var(--gal-scrim),.06), 0 10px 24px -18px rgba(var(--gal-scrim),.38);
  transition:box-shadow .45s var(--ease,cubic-bezier(.22,1,.36,1)), border-color .45s var(--ease);
}
[data-stem-section="gallery"] .p-cargrid .p-carcard:hover{
  border-color:color-mix(in srgb, var(--primary) 34%, var(--line));
  box-shadow:0 2px 4px rgba(var(--gal-scrim),.10), 0 20px 40px -20px rgba(var(--gal-scrim),.46);
}

/* 写真: 角丸は上だけ。写真の締まりを出すため内側に極細のリングと上下スクリムを重ねる */
[data-stem-section="gallery"] .p-cargrid .p-carcard .c-card__img{
  aspect-ratio:16/9; border-radius:0; border-bottom:1px solid var(--line);
}
[data-stem-section="gallery"] .p-cargrid .p-carcard .c-card__img::after{
  background:
    linear-gradient(to bottom, rgba(var(--gal-scrim),.34) 0%, rgba(var(--gal-scrim),0) 30%),
    linear-gradient(to top,    rgba(var(--gal-scrim),.16) 0%, rgba(var(--gal-scrim),0) 22%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

/* カテゴリのピル。写真の上に載せるのでガラス処理で背景を選ばない */
.p-carcard__cat{
  position:absolute; top:9px; left:10px; z-index:2;
  font-family:var(--f-en); font-size:10px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:rgba(var(--gal-scrim),.52); border:1px solid rgba(255,255,255,.30);
  border-radius:999px; padding:3px 9px; backdrop-filter:saturate(1.3) blur(3px);
  white-space:nowrap;
}

[data-stem-section="gallery"] .p-cargrid .p-carcard__body{padding:10px 12px 12px; background:#fff; position:static}
[data-stem-section="gallery"] .p-cargrid .p-carcard__name{
  display:block; font-size:12.5px; font-weight:900; color:var(--navy); line-height:1.45;
  text-shadow:none; word-break:auto-phrase;
}

/* --- セグメント（絞り込み）タブ ---
   ⚠ JS が無いときは全件がそのまま出るのが正しい初期状態なので、タブ自体を出さない。
      出すと「押しても効かない UI」になる。 */
.p-cargrid-tabs{display:none; margin-top:30px}
.js .p-cargrid-tabs{display:flex; flex-wrap:wrap; gap:8px}
.p-cargrid-tabs__n{
  margin-left:6px; font-family:var(--f-en); font-size:11px; font-weight:700; opacity:.62;
}
.p-cargrid-tabs + .p-cargrid{margin-top:18px}

/* 記事ページ(?slug=)では一覧専用の要素を隠す（事故クラス A31）。
   印(data-stem-view)は Stem が詳細表示のときだけ箱に付ける。一覧では付かない。
   ※ セレクタリストは1つでも不正だと規則ごと捨てられるので意図的に2規則に分ける。
      箱より前にある要素は `~` では届かない（:has() が本命）。 */
body:has([data-stem-view="column-detail"]) .is-listOnly{display:none}
[data-stem-columns][data-stem-view="column-detail"] ~ .is-listOnly{display:none}