/* =====================================================================
   HUBRIDE コーポレートサイト 共通CSS — 2026-10-22
   トーン：白ベース × 明朝（Noto Serif JP）見出し。ブランド緑 #009316／情報色 青 #1940a5／CTAは黒＋LINE緑
   LP（lp.hubride.co.jp）とは意図的に別トーン。ロゴと緑の扱いだけ共通
   ===================================================================== */
:root {
  --c-text: #111; --c-sub: #555; --c-muted: #8a8a8a; --c-line: #e6e6e6; --c-bg: #fff; --c-bg2: #f7f7f5;
  --c-brand: #009316; --c-brand-bright: #24a838; --c-blue: #1940a5; --c-blue-soft: #eef2ff; --c-line-green: #06c755; --c-teal: #0f8a8a;
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-num: Oswald, var(--f-sans);
  --w: 108rem; --w-wide: 144rem; --gutter: 2.4rem; --radius: 1.2rem; /* 本文は1080px、FVなど広い枠は1440pxまで */
  --shadow: 0 0.6rem 2rem rgba(0,0,0,0.06);
  --note: 1.1rem;
}
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-sans); font-size: 1.5rem; line-height: 1.9; color: var(--c-text); background: var(--c-bg); font-feature-settings: "palt"; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 600; line-height: 1.4; letter-spacing: 0.06em; margin: 0; word-break: auto-phrase; text-wrap: pretty; } /* 文節で折り返す（Chrome系。ほかのブラウザは通常どおり） */
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - var(--gutter) * 2, var(--w)); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, 76rem); margin-inline: auto; }
html.is-menuOpen { overflow: hidden; }

/* --- 英字ラベル（セクションの眉）：緑の細線＋Oswald --- */
.eyebrow { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--f-num); font-size: 1.2rem; letter-spacing: 0.24em; color: var(--c-brand); line-height: 1; text-transform: uppercase; }
.eyebrow::before { content: ''; width: 2.4rem; height: 1px; background: var(--c-brand); }
.sec { padding: 8rem 0; }
.sec--flush { padding-top: 0 !important; }
.sec__title { font-size: 3.2rem; margin-top: 1.6rem; }
.sec__lead { margin-top: 1.6rem; color: var(--c-sub); max-width: 64rem; word-break: auto-phrase; text-wrap: pretty; }
@media (max-width: 767px) { .sec { padding: 5.6rem 0; } .sec__title { font-size: 2.4rem; } }

/* --- ボタン --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; min-height: 4.8rem; padding: 0 2.4rem; border-radius: 100rem; font-weight: 700; font-size: 1.4rem; text-decoration: none; border: 1px solid transparent; transition: transform .15s, background .15s, color .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--black { background: #111; color: #fff; }
.btn--black:hover { background: #333; }
.btn--ghost { background: #fff; color: #111; border-color: #111; }
.btn--ghost:hover { background: #111; color: #fff; }
.btn--line { background: var(--c-line-green); color: #fff; }

/* --- ヘッダー --- */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); } /* 下線なし（2026-10-24） */
.hd__in { width: min(100% - var(--gutter) * 2, 124rem); margin-inline: auto; display: flex; align-items: center; gap: 3.2rem; height: 8rem; }
.hd__logo { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; }
.hd__logo img { width: 16.4rem; height: auto; }
.hd__tag { font-size: 1rem; letter-spacing: 0.04em; color: var(--c-sub); white-space: nowrap; padding-left: 0.5rem; font-weight: 500; }
.hd__tag b { color: #111; font-weight: 700; }
.hd__tagSep { margin: 0 0.1em; color: #bbb; }
.hd__nav { margin-left: auto; }
.hd__nav > ul { display: flex; gap: 2.8rem; }
.hd__nav > ul > li { position: relative; }
.hd__nav > ul > li > a { display: block; padding: 1rem 0; font-size: 1.4rem; font-weight: 700; text-decoration: none; letter-spacing: 0.04em; border-bottom: 2px solid transparent; }
.hd__nav > ul > li.is-current > a, .hd__nav > ul > li > a:hover { border-bottom-color: var(--c-brand); }
/* メガメニュー（2026-10-24）：グループ見出し＋英字ラベル＋ひとこと説明。PCのみ */
.hd__nav li.has-sub { position: relative; }
.mega { position: absolute; left: -2.4rem; top: calc(100% + 0.8rem); width: 62rem; padding: 2.4rem 2.4rem 0; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--c-line); border-radius: 1.4rem; box-shadow: 0 24px 60px rgba(17,17,17,0.12); opacity: 0; visibility: hidden; transform: translateY(0.6rem); transition: opacity .2s, transform .2s, visibility .2s; z-index: 60; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.2rem; } /* マウスが離れても閉じない橋 */
.mega--right { left: auto; right: -2.4rem; }
.mega--one { width: 36rem; }
.hd__nav li.has-sub:hover .mega, .hd__nav li.has-sub:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega__groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.mega--one .mega__groups { grid-template-columns: 1fr; }
.mega__gh { display: flex; align-items: baseline; gap: 0.8rem; padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--c-line); font-family: var(--f-serif); font-weight: 600; font-size: 1.4rem; }
.mega__gh span { font-family: var(--f-num); font-size: 1rem; letter-spacing: 0.2em; color: var(--c-brand); text-transform: uppercase; }
.mega__item { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.1rem; padding: 1.1rem 3.2rem 1.1rem 1.2rem; margin: 0 -1.2rem; border-radius: 0.8rem; text-decoration: none; color: var(--c-text); transition: background .15s; }
.mega__item small { font-family: var(--f-num); font-size: 0.95rem; letter-spacing: 0.18em; color: var(--c-muted); text-transform: uppercase; }
.mega__item b { display: flex; align-items: center; gap: 0.8rem; font-size: 1.45rem; font-weight: 700; }
.mega__item b i { font-style: normal; font-size: 1rem; font-weight: 700; color: var(--c-blue); background: var(--c-blue-soft); border-radius: 0.3rem; padding: 0.1rem 0.6rem; letter-spacing: 0.04em; }
.mega__item span { font-size: 1.2rem; color: var(--c-sub); }
.mega__item::after { content: ""; position: absolute; right: 1.4rem; top: 50%; width: 0.6rem; height: 0.6rem; border-top: 1.5px solid var(--c-muted); border-right: 1.5px solid var(--c-muted); transform: translateY(-50%) rotate(45deg); transition: right .2s, border-color .2s; }
.mega__item:hover { background: var(--c-bg2); }
.mega__item:hover b { color: var(--c-brand); }
.mega__item:hover::after { right: 1rem; border-color: var(--c-brand); }
.mega__all { display: flex; justify-content: flex-end; align-items: center; gap: 0.8rem; margin: 1.6rem -2.4rem 0; padding: 1.4rem 2.4rem; border-top: 1px solid var(--c-line); font-size: 1.3rem; font-weight: 700; text-decoration: none; color: var(--c-text); border-radius: 0 0 1.4rem 1.4rem; }
.mega__all::after { content: ""; width: 0.6rem; height: 0.6rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.mega__all:hover { color: var(--c-brand); background: var(--c-bg2); }
.mega--one { padding-bottom: 1.6rem; }
.hd__cta { display: flex; border-radius: 1rem; overflow: hidden; border: 1px solid var(--c-line); background: #fff; } /* FVのバーと同じ作り（2026-10-24） */
.hdBtn { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0.55rem 1.6rem; line-height: 1.3; text-decoration: none; color: var(--c-text); transition: background .2s; }
.hdBtn + .hdBtn { border-left: 1px solid var(--c-line); }
.hdBtn small { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-num); font-size: 0.9rem; letter-spacing: 0.2em; color: var(--c-muted); }
.hdBtn small::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dot); }
.hdBtn b { font-size: 1.3rem; letter-spacing: 0.04em; white-space: nowrap; }
.hdBtn:hover { background: #f4f4f1; }
.hdBtn--form { --dot: #9a9a94; }
.hdBtn--apply { --dot: var(--c-blue); }
/* 法人・パートナー向け：ボタンバーの右に独立（2026-10-24） */
.hdBiz { margin-left: -2.2rem; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0.55rem 1.6rem; line-height: 1.3; text-decoration: none; color: #fff; background: #2b2d31; border-radius: 1rem; transition: background .2s; }
.hdBiz small { font-family: var(--f-num); font-size: 0.9rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.55); }
.hdBiz b { font-size: 1.25rem; letter-spacing: 0.04em; white-space: nowrap; }
.hdBiz:hover { background: #3a3c41; }
/* 白×白（2026-10-24）。区別はドットの色だけ */
.hd__menu { display: none; }
.hd__drawer { display: none; }
@media (max-width: 1023px) {
  /* スマホ：ロゴ下にタグライン。スクロールで縮小（高さ6.4→4.8rem）し、タグラインはロゴの右横に2行（LPと同じ挙動） */
  .hd__in { height: 6.4rem; gap: 1.6rem; transition: height .45s cubic-bezier(.22,.8,.32,1); }
  .hd__logo { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0.8rem; row-gap: 0.3rem; }
  .hd__logo img { width: 12rem; flex: none; transition: width .45s cubic-bezier(.22,.8,.32,1); }
  .hd__tag { flex: 0 0 100%; font-size: 0.95rem; padding-left: 0.4rem; }
  .hd.is-shrunk .hd__in { height: 4.8rem; }
  .hd.is-shrunk .hd__logo { flex-wrap: nowrap; }
  .hd.is-shrunk .hd__logo img { width: 9.6rem; }
  .hd.is-shrunk .hd__tag { flex: 0 0 auto; padding-left: 0; font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1.35; white-space: normal; }
  .hd.is-shrunk .hd__tagSep { display: none; }
  .hd.is-shrunk .hd__tag b { display: block; }
  .hd__tag.is-toRight { animation: hdTagToRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hd__tag.is-toDown { animation: hdTagToDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .hd.is-shrunk ~ .hd__drawer, .hd.is-shrunk + .hd__drawer { top: 4.8rem; height: calc(100dvh - 4.8rem); }
  .hd__nav, .hd__cta, .hdBiz { display: none; }
  .hd__menu { display: flex; flex-direction: column; justify-content: center; gap: 0.6rem; margin-left: auto; width: 4.4rem; height: 4.4rem; background: none; border: 0; padding: 0 1rem; cursor: pointer; }
  .hd__menu span { display: block; height: 2px; background: #111; transition: .2s; }
  .hd__menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .hd__menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .hd__drawer { display: flex; flex-direction: column; justify-content: center; gap: 3.2rem; position: fixed; left: 0; right: 0; top: 6.4rem; height: calc(100dvh - 6.4rem); z-index: 49; background: #fff; overflow: auto; padding: 2.4rem var(--gutter) 3.2rem; animation: drawerIn .3s ease; }
  .hd__drawer[hidden] { display: none; }
  @keyframes drawerIn { from { opacity: 0; transform: translateY(-0.6rem); } to { opacity: 1; transform: none; } }
  .hd__drawerList { display: flex; flex-direction: column; gap: 2.4rem; }
  .hd__drawerList > li > a { display: flex; align-items: center; gap: 1.4rem; font-size: 1.8rem; font-weight: 700; line-height: 1.25; text-decoration: none; color: var(--c-text); }
  .hd__arrow { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #111; position: relative; }
  .hd__arrow::after { content: ""; position: absolute; left: 0.8rem; top: 0.8rem; width: 0.6rem; height: 0.6rem; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
  .hd__drawerSub { display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; padding: 1rem 0 0 3.8rem; }
  .hd__drawerSub a { font-size: 1.3rem; font-weight: 700; color: var(--c-sub); text-decoration: none; }
  .hd__drawerCta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
  .dBtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 1.1rem 1rem; border: 1px solid var(--c-line); border-radius: 1rem; background: #fff; color: var(--c-text); text-decoration: none; line-height: 1.35; text-align: center; }
  .dBtn small { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-num); font-size: 0.9rem; letter-spacing: 0.2em; color: var(--c-muted); white-space: nowrap; }
  .dBtn small::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--dot); flex: none; }
  .dBtn b { font-size: 1.4rem; letter-spacing: 0.06em; }
  .dBtn--apply { --dot: #7fa0ff; grid-column: 1 / -1; padding: 1.4rem 1rem; background: #2b2d31; border-color: #2b2d31; color: #fff; }
  .dBtn--apply small { color: rgba(255,255,255,0.6); }
  .dBtn--apply b { font-size: 1.6rem; }
  .dBtn--line { --dot: #06c755; }
  .dBtn--tel { --dot: #f5a623; }
  .dBtn__tel { font-family: var(--f-num); font-weight: 700; letter-spacing: 0.04em !important; }
  @media (max-height: 700px) { .hd__drawer { justify-content: flex-start; gap: 2.4rem; } .hd__drawerList { gap: 1.6rem; } }
}

@keyframes hdTagToRight { from { opacity: 0; transform: translateX(-1.2rem); } to { opacity: 1; transform: none; } }
@keyframes hdTagToDown { from { opacity: 0; transform: translateY(-0.8rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hd__tag.is-toRight, .hd__tag.is-toDown { animation: none; } }

/* 納車までの流れ */
.flow { position: relative; margin-top: 1.6rem; }
.flow__item { display: grid; grid-template-columns: 8rem 1fr; gap: 2.4rem; padding: 3.2rem 0; border-bottom: 1px solid var(--c-line); }
.flow__no { display: flex; flex-direction: column; align-items: center; color: var(--c-brand); }
.flow__no span { font-family: var(--f-num); font-size: 1.1rem; letter-spacing: 0.16em; }
.flow__no b { font-family: var(--f-num); font-size: 3.6rem; line-height: 1; }
.flow__t { font-size: 2.2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.flow__time { font-family: var(--f-sans); font-size: 1.1rem; font-weight: 700; color: var(--c-brand); border: 1px solid var(--c-brand); border-radius: 999px; padding: 0.2rem 1rem; letter-spacing: 0.04em; }
.flow__d { margin-top: 1rem; color: var(--c-sub); line-height: 1.9; }
.flow__pt { margin-top: 1.2rem; }
.flow__pt li { position: relative; padding-left: 2rem; font-size: 1.35rem; color: var(--c-sub); margin: 0.4rem 0; }
.flow__pt li::before { content: '✓'; position: absolute; left: 0; color: var(--c-brand); font-weight: 700; }
.flow__start { margin-top: 4.8rem; padding: 3.2rem; background: var(--c-bg2); border-radius: var(--radius); }
.flow__startT { text-align: center; font-family: var(--f-serif); font-size: 2rem; font-weight: 600; margin-bottom: 2rem; }
@media (max-width: 767px) { .flow__item { grid-template-columns: 5.6rem 1fr; gap: 1.6rem; padding: 2.4rem 0; } .flow__no b { font-size: 2.8rem; } .flow__t { font-size: 1.8rem; } .flow__start { padding: 2.4rem 1.6rem; } }
/* 採用 */
.jobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3.2rem; }
.job { padding: 2.8rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.job__head { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.job__t { font-size: 2rem; }
.job__tag { font-size: 1.1rem; font-weight: 700; color: #fff; background: var(--c-brand); border-radius: 999px; padding: 0.3rem 1rem; }
.job__d { margin-top: 1.2rem; color: var(--c-sub); line-height: 1.9; }
.job__reqT { margin-top: 1.6rem; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.06em; color: var(--c-muted); }
.job__req li { position: relative; padding-left: 1.8rem; font-size: 1.35rem; color: var(--c-sub); margin-top: 0.4rem; }
.job__req li::before { content: '・'; position: absolute; left: 0.2rem; }
@media (max-width: 767px) { .jobs { grid-template-columns: 1fr; } .job { padding: 2rem; } }
/* 店舗・地図 */
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; margin-top: 3.2rem; align-items: start; }
.shop__map { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); }
.shop__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.shop__t { font-size: 2.2rem; }
.shop__badge { display: inline-block; margin-left: 0.8rem; font-family: var(--f-sans); font-size: 1.1rem; font-weight: 700; color: var(--c-brand); border: 1px solid var(--c-brand); border-radius: 999px; padding: 0.2rem 1rem; vertical-align: middle; }
.shop .dl { margin-top: 1.6rem; }
@media (max-width: 1023px) { .shop { grid-template-columns: 1fr; } }
/* 代表メッセージ */
.msg { margin-top: 3.2rem; padding: 4rem; background: var(--c-bg2); border-radius: var(--radius); }
.msg__lead { font-family: var(--f-serif); font-size: 2.4rem; font-weight: 600; line-height: 1.6; letter-spacing: 0.04em; }
.msg__body { margin-top: 2.4rem; color: var(--c-sub); line-height: 2.1; max-width: 72rem; }
.msg__body p + p { margin-top: 1.2em; }
.msg__sign { margin-top: 2.4rem; font-size: 1.3rem; color: var(--c-sub); }
.msg__sign b { display: block; font-family: var(--f-serif); font-size: 1.8rem; color: var(--c-text); margin-top: 0.4rem; }
@media (max-width: 767px) { .msg { padding: 2.4rem 2rem; } .msg__lead { font-size: 1.9rem; } }

/* 用語集 */
.glsNav { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.glsNav a, .glsNav span { display: grid; place-items: center; min-width: 4.4rem; height: 4.4rem; padding: 0 1rem; border: 1px solid var(--c-line); border-radius: 0.8rem; font-family: var(--f-serif); font-weight: 600; font-size: 1.6rem; text-decoration: none; color: var(--c-text); background: #fff; }
.glsNav a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.glsNav span { color: #c8c8c4; background: var(--c-bg2); }
.glsRow { padding-top: 4.8rem; scroll-margin-top: 8rem; }
.glsRow__t { font-size: 2.6rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--c-text); display: flex; align-items: baseline; gap: 0.4rem; }
.glsRow__t small { font-size: 1.4rem; color: var(--c-muted); }
.glsList { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.4rem; }
.glsList a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.6rem 0; border-bottom: 1px solid var(--c-line); text-decoration: none; color: var(--c-text); height: 100%; }
.glsList a:hover b { color: var(--c-brand); }
.glsList b { font-family: var(--f-serif); font-size: 1.7rem; font-weight: 600; }
.glsList__y { font-size: 1.1rem; color: var(--c-muted); letter-spacing: 0.06em; }
.glsList__d { margin-top: 0.4rem; font-size: 1.25rem; color: var(--c-sub); line-height: 1.7; }
.glsEmpty { padding: 6rem 2rem; text-align: center; border: 1px dashed var(--c-line); border-radius: var(--radius); color: var(--c-sub); }
.glsEmpty__t { font-family: var(--f-serif); font-size: 2rem; font-weight: 600; color: var(--c-text); margin-bottom: 1rem; }
.glsEmpty a { color: var(--c-brand); font-weight: 700; }
.glsYomi { display: block; margin-top: 0.6rem; font-family: var(--f-sans); font-size: 1.3rem; font-weight: 500; color: var(--c-muted); letter-spacing: 0.1em; }
.glsPager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 4.8rem; }
.glsPager a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.6rem 2rem; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; color: var(--c-text); font-weight: 700; }
.glsPager small { font-size: 1.1rem; color: var(--c-muted); font-weight: 500; }
.glsPager__next { text-align: right; }
.glsPager a:hover { border-color: var(--c-brand); }
.glsSame { margin-top: 3.2rem; padding: 2.4rem; background: var(--c-bg2); border-radius: var(--radius); }
.glsSame__t { font-weight: 700; }
.glsSame__list { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 1.2rem 0 1.6rem; }
.glsSame__list a { color: var(--c-blue); font-size: 1.4rem; }
@media (max-width: 1023px) { .glsList { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .glsList { grid-template-columns: 1fr; } .glsNav a, .glsNav span { min-width: 3.8rem; height: 3.8rem; font-size: 1.4rem; } }

/* --- フッター --- */
.ft { margin-top: 8rem; border-top: 0; background: #2b2d31; color: rgba(255,255,255,0.75); } /* フッターはチャコールグレー（2026-10-24 黒すぎたので） */
.ft__in { width: min(100% - var(--gutter) * 2, 124rem); margin-inline: auto; display: grid; grid-template-columns: 1.2fr 2fr; gap: 4rem; padding: 6rem 0 4rem; }
.ft__brand img { width: 18rem; }
.ft__tag { margin-top: 0.8rem; padding-left: 0.5rem; font-size: 1.1rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); font-weight: 500; white-space: nowrap; }
.ft__tag b { color: #fff; font-weight: 700; }
.ft__tagSep { margin: 0 0.1em; color: rgba(255,255,255,0.3); }
.ft__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.ft__h { font-family: var(--f-serif); font-weight: 600; font-size: 1.4rem; margin-bottom: 1.2rem; letter-spacing: 0.08em; color: #fff; }
.ft__nav li { margin: 0.5rem 0; }
.ft__nav a { font-size: 1.3rem; color: rgba(255,255,255,0.65); text-decoration: none; }
.ft__nav a:hover { color: #fff; text-decoration: underline; }
.ft__copy { text-align: center; font-size: 1.1rem; color: rgba(255,255,255,0.5); padding: 2rem 0; background: #1f2124; letter-spacing: 0.08em; } /* 一番下の帯は一段濃く（2026-10-24） */
@media (max-width: 767px) { .ft__in { grid-template-columns: 1fr; gap: 3.2rem; padding: 4rem 0 3rem; } .ft__nav { grid-template-columns: 1fr 1fr; } }

/* --- パンくず --- */
.bc { font-size: 1.2rem; color: var(--c-muted); padding: 1.6rem 0 0; }
.bc ol { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; }
.bc li + li::before { content: '/'; margin-right: 0.8rem; color: #ccc; }
.bc a { color: var(--c-sub); text-decoration: none; }
.bc a:hover { color: var(--c-brand); }

/* --- ページ見出し（下層） --- */
.pageHead { padding: 4rem 0 3.2rem; border-bottom: 1px solid var(--c-line); margin-bottom: 4rem; } /* 罫線の下に余白（2026-10-24） */
.pageHead h1 { font-size: 3.4rem; margin-top: 1.2rem; }
.pageHead__lead { margin-top: 1.2rem; color: var(--c-sub); word-break: auto-phrase; text-wrap: pretty; }
@media (max-width: 767px) { .pageHead { padding: 2.4rem 0 2rem; } .pageHead h1 { font-size: 2.4rem; } }

/* --- コラム一覧 --- */
/* 人気車種（LPのデータ） */
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.sec__more { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.4rem; font-weight: 700; color: var(--c-text); text-decoration: none; white-space: nowrap; padding-bottom: 0.4rem; border-bottom: 1px solid var(--c-text); }
.sec__more::after { content: ""; width: 0.7rem; height: 0.7rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.sec__more:hover { color: var(--c-brand); border-color: var(--c-brand); }
.sec__more:hover::after { transform: translateX(0.3rem) rotate(45deg); }
.carGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 2.4rem; margin-top: 3.2rem; }
.carGrid__item[hidden] { display: none; }
.carCard { display: block; text-decoration: none; color: inherit; }
.carCard__img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); }
.carCard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.carCard:hover .carCard__img img { transform: scale(1.04); }
.carCard__rank { position: absolute; left: 0; top: 0; z-index: 1; min-width: 4.4rem; height: 4.4rem; padding: 0 1rem; display: grid; place-items: center; background: #111; color: #fff; font-family: var(--f-num); font-weight: 700; font-size: 2rem; border-radius: var(--radius) 0 var(--radius) 0; }
.carCard__rank.is-top { background: var(--c-brand); }
.carCard__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 1.2rem; font-size: 1.1rem; color: var(--c-muted); letter-spacing: 0.04em; }
.carCard__name { font-family: var(--f-serif); font-size: 1.8rem; font-weight: 600; line-height: 1.4; margin-top: 0.4rem; }
.carCard:hover .carCard__name { color: var(--c-brand); }
.carCard__price { display: flex; align-items: baseline; gap: 0.3rem; margin-top: 0.6rem; }
.carCard__price small { font-size: 1.2rem; font-weight: 700; color: var(--c-sub); }
.carCard__price strong { font-family: var(--f-num); font-size: 2.6rem; font-weight: 700; color: var(--c-text); line-height: 1; }
.carCard__pay { margin-left: auto; font-size: 1.1rem; color: var(--c-muted); }
.carCard__bonus { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; font-size: 1.1rem; color: var(--c-muted); flex-wrap: wrap; }
.carCard__bonusTag { font-size: 1rem; font-weight: 700; color: #fff; background: var(--c-blue); border-radius: 0.3rem; padding: 0.15rem 0.6rem; }
.rankTabs { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.rankTabs__btn { appearance: none; border: 1px solid var(--c-line); background: #fff; border-radius: 999px; padding: 0.8rem 1.6rem; font-size: 1.3rem; font-weight: 700; cursor: pointer; color: var(--c-sub); font-family: inherit; }
.rankTabs__btn small { font-weight: 500; color: var(--c-muted); margin-left: 0.2rem; }
.rankTabs__btn.is-active { background: #111; color: #fff; border-color: #111; }
.rankTabs__btn.is-active small { color: rgba(255,255,255,0.7); }
@media (max-width: 1023px) { .carGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .carGrid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1.2rem; } .carCard__name { font-size: 1.5rem; } .carCard__price strong { font-size: 2.1rem; } .carCard__pay { display: none; } .sec__head { flex-direction: column; align-items: flex-start; gap: 1rem; } }
.colGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.2rem 2.4rem; margin-top: 3.2rem; }
@media (max-width: 1023px) { .colGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .colGrid { grid-template-columns: 1fr; gap: 2.4rem; } }
.colCard { display: block; text-decoration: none; }
.colCard__img { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); }
.colCard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.colCard:hover .colCard__img img { transform: scale(1.04); }
.colCard__meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; font-size: 1.1rem; color: var(--c-muted); }
.colCard__cat { color: var(--c-brand); font-weight: 700; letter-spacing: 0.04em; }
.colCard__title { font-family: var(--f-serif); font-size: 1.6rem; font-weight: 600; line-height: 1.55; margin-top: 0.6rem; letter-spacing: 0.02em; }
.colCard:hover .colCard__title { color: var(--c-brand); }
.colCats { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.4rem; }
.colCats a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.4rem; border: 1px solid var(--c-line); border-radius: 100rem; font-size: 1.2rem; text-decoration: none; color: var(--c-sub); background: #fff; }
.colCats a.is-active, .colCats a:hover { border-color: var(--c-brand); color: var(--c-brand); }
.colCats small { font-family: var(--f-num); color: var(--c-muted); }

/* --- 記事ページ --- */
.post { padding-bottom: 6rem; }
.post__head { padding: 3.2rem 0 2.4rem; }
.post__cats { display: flex; gap: 0.8rem; }
.post__cats a { font-size: 1.2rem; color: var(--c-brand); font-weight: 700; text-decoration: none; letter-spacing: 0.04em; }
.post__title { font-size: 3rem; margin-top: 1.2rem; line-height: 1.45; }
.post__meta { display: flex; gap: 1.6rem; margin-top: 1.4rem; font-size: 1.2rem; color: var(--c-muted); font-family: var(--f-num); letter-spacing: 0.04em; }
.post__thumb { margin-top: 2.4rem; border-radius: var(--radius); overflow: hidden; }
.post__body { margin-top: 3.2rem; font-size: 1.6rem; line-height: 2; }
.post__body > * + * { margin-top: 1.8em; }
@media (max-width: 767px) { .post__title { font-size: 2.2rem; } .post__body { font-size: 1.5rem; } }
.toc { margin-top: 3.2rem; padding: 2rem 2.4rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg-sub, #f7f7f5); }
.toc__title { font-family: var(--f-serif); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.08em; }
.toc__list { margin-top: 1.2rem; counter-reset: toc; }
.toc__item { font-size: 1.4rem; line-height: 1.7; padding: 0.3rem 0; }
.toc__item.is-h2 { counter-increment: toc; display: flex; gap: 0.8rem; }
.toc__item.is-h2::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-num); color: var(--c-brand); font-weight: 700; }
.toc__item.is-h3 { padding-left: 3rem; font-size: 1.3rem; color: var(--c-sub); }
.toc__item a { color: inherit; text-decoration: none; }
.toc__item a:hover { text-decoration: underline; }
.post__body h2[id], .post__body h3[id] { scroll-margin-top: 9rem; }
.post__foot { margin-top: 5rem; padding-top: 3.2rem; border-top: 1px solid var(--c-line); }
.post__related { margin-top: 6rem; }

/* --- 記事内CTA（LPへ） --- */
.corpCta { margin: 4rem 0; padding: 3.2rem; border-radius: var(--radius); background: var(--c-bg2); text-align: center; }
.corpCta__t { font-family: var(--f-serif); font-size: 2.2rem; font-weight: 600; }
.corpCta__p { margin-top: 0.8rem; color: var(--c-sub); font-size: 1.4rem; }
.corpCta__btns { display: flex; justify-content: center; gap: 1.2rem; margin-top: 2rem; flex-wrap: wrap; }
@media (max-width: 767px) { .corpCta { padding: 2.4rem 2rem; } .corpCta__t { font-size: 1.8rem; } .corpCta__btns { flex-direction: column; } }

/* --- 注記 --- */
.note { font-size: var(--note); color: var(--c-muted); line-height: 1.6; }

/* --- FV（トップ） --- */
/* FV：現サイト踏襲。全幅の動画（角丸・余白4%）に白文字のコピーを重ね、右下にボタン */
.fv { padding: 1.6rem 4vw 0; max-width: calc(var(--w-wide) + 8vw); margin-inline: auto; }
.fv__frame { position: relative; background-image: url(/assets/video/fv-poster.jpg?v=2); background-size: cover; background-position: center; min-height: min(82vh, 84rem); border-radius: calc(var(--radius) * 1.5); overflow: hidden; background-color: #111; display: flex; align-items: center; }
.fv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fv__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.1) 100%); }
.fv__text { position: relative; padding: 6rem 6vw 12rem; color: #fff; max-width: 92rem; }
.fv__copy { font-size: clamp(3rem, 4.2vw, 5.2rem); letter-spacing: 0.14em; line-height: 1.5; font-weight: 500; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.fv__copy .fv__line { display: block; }
.fv__copy br { display: inline; }
.fv__lead { margin-top: 3.2rem; color: rgba(255,255,255,0.88); font-size: 1.5rem; line-height: 2; text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.fv__btns { position: absolute; right: 2.4rem; bottom: 2.4rem; display: flex; border-radius: 1.2rem; overflow: hidden; background: rgba(12,12,14,0.4); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* FVのボタン：1本のバーを3分割、英字の小見出しに色ドット（LINE=緑／TEL=オレンジ／APPLY=青）2026-10-24 ロロ選定 */
.fvBtn { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 17rem; padding: 0.9rem 4.4rem 0.9rem 2rem; line-height: 1.35; color: #fff; text-decoration: none; transition: background .2s; }
.fvBtn + .fvBtn { border-left: 1px solid rgba(255,255,255,0.16); }
.fvBtn small { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-num); font-size: 0.95rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.6); }
.fvBtn small::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--dot); flex: none; }
.fvBtn b { font-size: 1.4rem; letter-spacing: 0.06em; }
.fvBtn::after { content: ""; position: absolute; right: 1.8rem; top: 50%; width: 0.7rem; height: 0.7rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(45deg); transition: right .2s; }
.fvBtn:hover { background: rgba(255,255,255,0.08); }
.fvBtn:hover::after { right: 1.4rem; }
.fvBtn--line { --dot: #06c755; }
.fvBtn--tel { --dot: #f5a623; }
.fvBtn--apply { --dot: var(--c-blue); background: rgba(255,255,255,0.88); color: #111; } /* 申込フォームの青ボタンとつながる色 */
.fvBtn--apply small { color: #888; }
.fvBtn--apply:hover { background: rgba(255,255,255,0.97); }
.pc-br { display: inline; }
@media (max-width: 1023px) { .fv__copy { font-size: clamp(2.8rem, 5.2vw, 4.4rem); } .pc-br { display: none; } }
@media (max-width: 767px) {
  /* スマホ（2026-10-24）：コピーとボタンをひとかたまりで下に寄せる（間が空きすぎないように）。
     ボタンは 仮審査＝白の大きいボタン、LINE・電話＝その下に2つ並び。矢印なし */
  .fv { padding: 0; }
  .fv__frame { border-radius: 0; min-height: 82svh; flex-direction: column; justify-content: flex-end; align-items: stretch; padding: 4.8rem 2rem 2.4rem; }
  .fv__shade { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.7) 100%); }
  .fv__text { padding: 0 0.4rem; margin-block: auto; } /* コピーは残りの高さの真ん中へ（少し上に。2026-10-24）、ボタンは下 */
  .fv__copy { font-size: clamp(2.9rem, 8.2vw, 3.4rem); letter-spacing: 0.08em; line-height: 1.55; }
  .fv__lead { font-size: 1.35rem; margin-top: 1.6rem; line-height: 1.9; }
  .fv__btns { position: relative; inset: auto; margin-top: 2.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; background: none; border: 0; border-radius: 0; overflow: visible; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .fv__btns .fvBtn { min-width: 0; padding: 1rem 1.4rem; border: 1px solid rgba(255,255,255,0.28); border-radius: 1rem; background: rgba(12,12,14,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-items: center; text-align: center; }
  .fv__btns .fvBtn + .fvBtn { border-left: 1px solid rgba(255,255,255,0.28); }
  .fv__btns .fvBtn::after { content: none; }
  .fv__btns .fvBtn small { font-size: 0.9rem; }
  .fv__btns .fvBtn b { font-size: 1.4rem; }
  .fv__btns .fvBtn--apply { order: -1; grid-column: 1 / -1; padding: 1.3rem 1.4rem; background: #fff; border-color: #fff; color: #111; } /* 主役＝一番上・横いっぱい */
  .fv__btns .fvBtn--apply b { font-size: 1.6rem; }
}

/* ===== 共通セクション部品 ===== */
/* CTAセクション */
.ctaSec { margin-top: 6rem; padding: 8rem 0 7rem; background: var(--c-bg2); color: var(--c-text); text-align: center; } /* 明るいグレー（2026-10-24） */
.ctaSec__in .eyebrow { justify-content: center; }
.ctaSec__in .eyebrow::before { display: none; }
.ctaSec__t { font-size: 3rem; margin-top: 1.2rem; text-wrap: balance; }
.ctaSec__p { text-wrap: pretty; }
.ctaSec__p { margin: 1.6rem auto 0; max-width: 72rem; color: var(--c-sub); line-height: 2; }
.ctaBar { display: inline-flex; margin-top: 3.6rem; border-radius: 1.2rem; overflow: hidden; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 10px 30px rgba(0,0,0,0.06); text-align: left; }
/* 明るい背景用：白地のバー、主役（APPLY）は黒 */
.ctaBar .fvBtn { color: var(--c-text); }
.ctaBar .fvBtn small { color: var(--c-muted); }
.ctaBar .fvBtn + .fvBtn { border-left-color: var(--c-line); }
.ctaBar .fvBtn:hover { background: #f4f4f1; }
.ctaBar .fvBtn--apply { background: #fff; color: var(--c-text); --dot: var(--c-blue); } /* 白で統一（2026-10-24） */
.ctaBar .fvBtn--apply small { color: var(--c-muted); }
.ctaBar .fvBtn--apply:hover { background: #f4f4f1; }
.ctaBar .fvBtn--form { --dot: #9a9a94; }
.ctaSec__tel { font-family: var(--f-num); letter-spacing: 0.06em; font-size: 1.6rem !important; }
.ctaSec__lp { margin-top: 2rem; font-size: 1.25rem; color: var(--c-muted); }
.fvBtn--form { --dot: #d6d6d0; }
/* 末尾CTAの直後はフッターを詰めて、同じ黒でつなぐ */
main:has(> .ctaSec:last-child) + .ft, main:has(> :last-child .ctaSec:last-child) + .ft { margin-top: 0; border-top: 0; }
main:has(.ctaSec:last-child) { padding-bottom: 0; }
@media (max-width: 767px) {
  .ctaSec { padding: 6rem 0 5rem; }
  .ctaSec__t { font-size: 2.1rem; letter-spacing: 0.02em; }
  .ctaSec__p { font-size: 1.4rem; text-align: left; }
  .ctaBar { display: flex; flex-direction: column; width: 100%; }
  .ctaBar .fvBtn { min-width: 0; padding: 1rem 4rem 1rem 1.8rem; }
  .ctaBar .fvBtn + .fvBtn { border-left: 0; border-top: 1px solid var(--c-line); }
}

/* FAQ */
.faq { margin-top: 2.4rem; }
.faqNav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 0.8rem; }
.faqNav__item { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.6rem 1.8rem; border: 1px solid var(--c-line); border-radius: var(--radius); text-decoration: none; color: var(--c-text); background: #fff; }
.faqNav__item b { font-size: 1.4rem; }
.faqNav__item small { font-size: 1.1rem; color: var(--c-muted); font-family: var(--f-num); letter-spacing: 0.04em; }
.faqNav__item:hover { border-color: var(--c-brand); color: var(--c-brand); }
.faqGroup { padding-top: 6rem; scroll-margin-top: 8rem; }
.faqGroup__t { font-size: 2.2rem; }
.faqGroup__d { margin-top: 0.6rem; font-size: 1.3rem; color: var(--c-muted); }
.faq__a p + p { margin-top: 0.8em; }
.faq__a a { color: var(--c-brand); font-weight: 700; }
@media (max-width: 767px) { .faqNav { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; } .faqNav__item { padding: 1.2rem; } .faqGroup { padding-top: 4rem; } }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q { list-style: none; cursor: pointer; padding: 1.8rem 4rem 1.8rem 3.6rem; position: relative; font-weight: 700; font-size: 1.5rem; line-height: 1.6; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before { content: 'Q'; position: absolute; left: 0; top: 1.6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--c-brand); color: #fff; font-family: var(--f-num); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.faq__q::after { content: ''; position: absolute; right: 1rem; top: 50%; width: 0.8rem; height: 0.8rem; border-right: 2px solid #111; border-bottom: 2px solid #111; transform: translateY(-70%) rotate(45deg); transition: .2s; }
details[open] .faq__q::after { transform: translateY(-30%) rotate(-135deg); }
.faq__a { position: relative; padding: 0 1rem 2rem 3.6rem; color: var(--c-sub); line-height: 1.9; }
.faq__a::before { content: 'A'; position: absolute; left: 0; top: -0.2rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--c-blue); color: #fff; font-family: var(--f-num); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }

/* ステップ */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; margin-top: 3.2rem; counter-reset: st; }
.steps__item { position: relative; padding: 2rem 1.6rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; }
.steps__no { font-family: var(--f-num); font-size: 1.1rem; letter-spacing: 0.16em; color: var(--c-brand); }
.steps__no b { font-size: 2rem; margin-left: 0.3rem; }
.steps__t { font-family: var(--f-serif); font-weight: 600; font-size: 1.6rem; margin-top: 0.6rem; }
.steps__d { font-size: 1.3rem; color: var(--c-sub); margin-top: 0.6rem; line-height: 1.7; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .steps { grid-template-columns: 1fr 1fr; gap: 1rem; } .steps__item { padding: 1.4rem 1.2rem; } }

/* 特徴（番号付きカード） */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 3.2rem; }
.feat__item { padding: 3.2rem 2.8rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.feat__no { font-family: var(--f-num); font-size: 3.2rem; font-weight: 700; color: var(--c-brand); line-height: 1; letter-spacing: 0.04em; }
.feat__t { font-size: 2rem; margin-top: 1.2rem; }
.feat__d { margin-top: 1.2rem; color: var(--c-sub); line-height: 1.9; }
@media (max-width: 1023px) { .feat { grid-template-columns: 1fr; } }

/* 数字（実績・指標） */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 3.2rem; text-align: center; }
.stats__item { padding: 3.2rem 0.8rem; min-width: 0; }
/* 現サイト（hubride.co.jp）と同じ：Inter 800 斜体の白抜き数字＋小さい斜体の単位。画面に入るとふわっと出てカウントアップ（2026-10-24） */
.stats__num { font-family: Inter, var(--f-sans); font-style: italic; font-weight: 800; font-size: 9.6rem; line-height: 1.1; letter-spacing: 0.02em; color: #f7f7f7; -webkit-text-fill-color: #f7f7f7; -webkit-text-stroke: 3px #1a1a1a; paint-order: stroke fill; font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity 1.4s, transform 1.4s; }
.stats__num small { font-family: Inter, var(--f-sans); font-style: italic; font-weight: 400; font-size: 0.33em; margin-left: 0.05em; letter-spacing: 0; color: #1a1a1a; -webkit-text-fill-color: #1a1a1a; -webkit-text-stroke: 0; }
.stats__label { margin-top: 1rem; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.1em; color: #666; }
.stats__note { margin-top: 1.6rem; text-align: center; }
.stats__sub { margin-top: 0.4rem; font-size: 1.2rem; color: var(--c-muted); }
.stats.is-wait .stats__num { opacity: 0; transform: translateY(2.4rem); }
.stats.is-in .stats__item:nth-child(2) .stats__num { transition-delay: .12s; }
.stats.is-in .stats__item:nth-child(3) .stats__num { transition-delay: .24s; }
.stats.is-in .stats__item:nth-child(4) .stats__num { transition-delay: .36s; }
.stats.is-in .stats__item:nth-child(5) .stats__num { transition-delay: .48s; }
.stats.is-in .stats__item:nth-child(6) .stats__num { transition-delay: .6s; }
.stats--6 { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 2.4rem; } /* 6個＝3×2（2026-10-24 5→6） */
.stats--3 .stats__num { font-size: clamp(4.4rem, 5.4vw, 7.2rem); -webkit-text-stroke-width: 2.4px; } /* 法人ページ：3つ並び */
.stats--6 .stats__num { font-size: clamp(4.4rem, 5.4vw, 7.2rem); -webkit-text-stroke-width: 2.4px; }
.stats--6 .stats__label { font-size: 1.5rem; letter-spacing: 0.06em; }
@media (max-width: 1023px) { .stats--6 .stats__num { font-size: 5.2rem; } }
@media (max-width: 767px) { .stats { grid-template-columns: 1fr; gap: 1.2rem; } .stats__item { padding: 2rem 0.4rem; } .stats__num { font-size: 6rem; }
  .stats--3 { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0; } .stats--3 .stats__item { padding: 1.6rem 0; } .stats--3 .stats__num { font-size: clamp(2.4rem, 7.2vw, 3.2rem); -webkit-text-stroke-width: 1.4px; } .stats--3 .stats__label { font-size: 1.15rem; letter-spacing: 0.02em; margin-top: 0.6rem; }
  .stats--6 { grid-template-columns: repeat(2, 1fr); gap: 0.8rem 1rem; } .stats--6 .stats__num { font-size: 4rem; -webkit-text-stroke-width: 1.8px; } .stats--6 .stats__label { font-size: 1.25rem; letter-spacing: 0.02em; } }

/* 2カラム（画像＋文） */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
.split--rev > :first-child { order: 2; }
.split__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-bg2); }
.split__img img { width: 100%; height: 100%; object-fit: cover; }
.split__body p { margin-top: 1.6rem; color: var(--c-sub); }
.media { padding: 10rem 0; }
.media__lead { line-height: 2; }
.mediaPts { list-style: none; margin: 2.8rem 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.mediaPts li { padding: 1.8rem 0; border-bottom: 1px solid var(--c-line); }
.mediaPts b { display: flex; align-items: center; gap: 1rem; font-family: var(--f-serif); font-size: 1.7rem; font-weight: 600; letter-spacing: 0.04em; }
.mediaPts b::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--c-brand); flex: none; }
.mediaPts span { display: block; margin-top: 0.6rem; padding-left: 1.7rem; font-size: 1.4rem; line-height: 1.9; color: var(--c-sub, #555); }
.media__end { margin-top: 2.4rem; font-family: var(--f-serif); font-weight: 600; letter-spacing: 0.04em; }
.split--media { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8rem; }
.split--media .sec__title { font-size: clamp(2.2rem, 2.1vw, 3rem); line-height: 1.65; letter-spacing: 0.04em; }
.split--media .split__body p { line-height: 2.1; }
.split__video { display: flex; justify-content: center; }
.split__video video { display: block; width: min(100%, 44rem); height: auto; aspect-ratio: 606 / 1080; border-radius: 2.4rem; background: #000; box-shadow: 0 20px 48px rgba(0,0,0,0.16); }
@media (max-width: 1023px) { .media { padding: 6rem 0; } .split--media { gap: 4rem; } .split__video video { width: min(100%, 36rem); } }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; gap: 3.2rem; } .split--rev > :first-child { order: 0; } }

/* サービスカード */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 3.2rem; }
.svc__item { display: flex; flex-direction: column; padding: 3.2rem 2.8rem; border: 1px solid var(--c-line); border-radius: var(--radius); background: #fff; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.svc__item:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.svc__en { font-family: var(--f-num); font-size: 1.1rem; letter-spacing: 0.2em; color: var(--c-brand); text-transform: uppercase; }
.svc__t { font-size: 2.1rem; margin-top: 1rem; }
.svc__d { margin-top: 1.2rem; color: var(--c-sub); font-size: 1.4rem; line-height: 1.8; flex: 1; }
.svc__more { margin-top: 2rem; align-self: flex-start; font-size: 1.3rem; font-weight: 700; color: var(--c-text); display: inline-flex; align-items: center; gap: 0.8rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--c-text); } /* 「もっと見る」リンクと同じ形（2026-10-24） */
.svc__more::after { content: ""; width: 0.7rem; height: 0.7rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.svc__item:hover .svc__more { color: var(--c-brand); border-color: var(--c-brand); }
.svc__item:hover .svc__more::after { transform: translateX(0.3rem) rotate(45deg); }
.svc__tag { display: inline-block; margin-left: 0.8rem; padding: 0.2rem 0.8rem; border-radius: 0.4rem; background: var(--c-blue-soft); color: var(--c-blue); font-size: 1.1rem; font-weight: 700; font-family: var(--f-sans); vertical-align: middle; }
@media (max-width: 1023px) { .svc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .svc { grid-template-columns: 1fr; } }

/* お客様の声 */
/* Googleの口コミ */
.gsum { display: flex; align-items: center; gap: 3.2rem; padding: 2.8rem 3.2rem; border: 1px solid var(--c-line); border-radius: var(--radius); margin-top: 0.8rem; flex-wrap: wrap; max-width: 72rem; }
.gsum__score { display: flex; align-items: baseline; gap: 1rem; }
.gsum__score b { font-family: "Zen Old Mincho", var(--f-serif); font-size: 5.2rem; font-weight: 700; line-height: 1; }
.gsum__stars { color: #f5a623; font-size: 2rem; letter-spacing: 0.1em; }
.gsum__meta { display: flex; flex-direction: column; gap: 1rem; }
.gsum__meta p { font-weight: 700; font-size: 1.5rem; }
.gsum__meta small { font-weight: 500; color: var(--c-muted); font-size: 1.2rem; }
.revGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3.2rem; }
.revGrid--top { grid-template-columns: repeat(3, 1fr); }
/* 口コミ一覧：長さがバラバラなので3段組みのカラム流し（高さが揃わなくても間延びしない） */
.revGrid--masonry { display: block; columns: 3; column-gap: 2rem; }
.revGrid--masonry .rev { break-inside: avoid; margin-bottom: 2rem; }
@media (max-width: 1023px) { .revGrid--masonry { columns: 2; } }
@media (max-width: 767px) { .revGrid--masonry { columns: 1; } }
.rev { display: flex; flex-direction: column; gap: 1.2rem; padding: 2.4rem; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); min-width: 0; }
.rev__head { display: flex; align-items: center; justify-content: space-between; }
.rev__stars { color: #f5a623; letter-spacing: 0.08em; font-size: 1.5rem; }
.rev__g { font-family: var(--f-num); font-size: 1.1rem; letter-spacing: 0.08em; color: var(--c-muted); }
.rev__body { font-size: 1.45rem; line-height: 1.9; color: var(--c-text); }
.rev__body p + p { margin-top: 0.8em; }
.rev__photo { border-radius: calc(var(--radius) - 0.4rem); overflow: hidden; aspect-ratio: 4 / 3; }
.rev__photo img { width: 100%; height: 100%; object-fit: cover; }
.rev__who { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 1.2rem; color: var(--c-sub); margin-top: auto; }
.rev__who b { color: var(--c-text); }
.rev__reply { font-size: 1.3rem; color: var(--c-sub); border-top: 1px dashed var(--c-line); padding-top: 1rem; }
.rev__reply summary { cursor: pointer; font-weight: 700; color: var(--c-brand); }
.rev__reply div { margin-top: 0.8rem; line-height: 1.8; }
.rev__reply p + p { margin-top: 0.6em; }
.rev--compact .rev__body { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rev--compact .rev__body p + p { margin-top: 0.4em; }
@media (max-width: 1023px) { .revGrid--top { grid-template-columns: 1fr 1fr; } .revGrid--top .rev:last-child { display: none; } }
@media (max-width: 767px) { .revGrid, .revGrid--top { grid-template-columns: 1fr; } .revGrid--top .rev:last-child { display: flex; } .gsum { padding: 2rem; gap: 1.6rem; } .gsum__score b { font-size: 4.2rem; } }
.voice { display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.4rem 0.4rem 2rem; margin-top: 3.2rem; scrollbar-width: thin; }
.voice__item { flex: 0 0 34rem; scroll-snap-align: start; padding: 2.8rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.voice__who { font-size: 1.2rem; color: var(--c-muted); }
.voice__t { font-family: var(--f-serif); font-weight: 600; font-size: 1.7rem; line-height: 1.5; margin-top: 1rem; }
.voice__d { margin-top: 1.2rem; font-size: 1.4rem; color: var(--c-sub); line-height: 1.8; }
.voice__hint { font-size: 1.2rem; color: var(--c-muted); text-align: right; }
@media (max-width: 599px) { .voice__item { flex-basis: 28rem; padding: 2.2rem; } }

/* 表（料金・比較） */
.tbl { width: 100%; border-collapse: collapse; margin-top: 2.4rem; font-size: 1.4rem; }
.tbl th, .tbl td { padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.tbl thead th { font-size: 1.2rem; letter-spacing: 0.08em; color: var(--c-muted); font-weight: 700; border-bottom: 2px solid #111; }
.tbl tbody th { font-weight: 700; white-space: nowrap; }
.tbl .is-us { background: #f3faf4; }
.tbl .price { font-family: var(--f-num); font-size: 1.8rem; color: var(--c-blue); }
.tblWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* チェックリスト・対象者 */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 3.2rem; }
.who__box { padding: 2.8rem; border-radius: var(--radius); background: var(--c-bg2); }
.who__en { font-family: var(--f-num); font-size: 1.1rem; letter-spacing: 0.2em; color: var(--c-brand); }
.who__t { font-size: 2rem; margin-top: 0.6rem; }
.who__d { margin-top: 1.2rem; color: var(--c-sub); line-height: 1.9; }
.who__for { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--c-line); font-size: 1.3rem; color: var(--c-sub); line-height: 1.8; }
.who__for b { display: block; margin-bottom: 0.2rem; color: var(--c-text); font-size: 1.2rem; }
.who ul { margin-top: 1.6rem; }
.who li { position: relative; padding-left: 2.2rem; margin: 0.8rem 0; color: var(--c-sub); }
.who li::before { content: '✓'; position: absolute; left: 0; color: var(--c-brand); font-weight: 700; }
@media (max-width: 767px) { .who { grid-template-columns: 1fr; gap: 1.2rem; } .who__box { padding: 2.4rem 2rem; } }

/* 語り（ストーリー） */
.story { padding: 4rem 0 8rem; text-align: left; } /* 2026-10-24 中央寄せ→左寄せ（Purposeとそろえる・改行がガタつかないように） */
.story--in { padding: 0 0 7rem; } /* ABOUTセクションの上段に置くPurpose */
.story__q, .story__a, .story__p { word-break: auto-phrase; text-wrap: pretty; }
.story__q { font-family: var(--f-serif); font-size: 2.2rem; color: var(--c-sub); line-height: 2; }
.story__a { font-family: var(--f-serif); font-size: 3rem; font-weight: 600; margin-top: 2.4rem; line-height: 1.6; }
.story__p { margin: 2.4rem 0 0; max-width: 72rem; color: var(--c-sub); line-height: 2; }
@media (max-width: 767px) { .story { padding: 2.4rem 0 5.6rem; } .story--in { padding-top: 0; padding-bottom: 4.8rem; } .story__q { font-size: 1.7rem; line-height: 1.9; } .story__a { font-size: 2.2rem; margin-top: 1.6rem; } }

/* 定義リスト（会社概要） */
.dl { margin-top: 3.2rem; border-top: 1px solid var(--c-line); }
.dl div { display: grid; grid-template-columns: 20rem 1fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--c-line); }
.dl dt { font-weight: 700; }
.dl dd { margin: 0; color: var(--c-sub); line-height: 1.9; }
@media (max-width: 599px) { .dl div { grid-template-columns: 1fr; gap: 0.4rem; } }

/* お問合せフォーム */
.cform { margin-top: 3.2rem; }
.cform__row { margin-bottom: 2rem; }
.cform__row > label { display: inline-block; font-weight: 700; font-size: 1.4rem; margin-bottom: 0.6rem; }
.cform__row > .req { margin-bottom: 0.6rem; }
.cform__row > input, .cform__row > select, .cform__row > textarea { display: block; }
.cform .req { display: inline-block; margin-left: 0.6rem; padding: 0.1rem 0.6rem; border-radius: 0.3rem; background: #d9342b; color: #fff; font-size: 1rem; vertical-align: middle; }
.cform input, .cform select, .cform textarea { width: 100%; padding: 1.2rem 1.4rem; border: 1px solid #ccc; border-radius: 0.8rem; font: inherit; font-size: 1.6rem; background: #fff; }
.cform textarea { min-height: 16rem; }
/* セレクトの矢印を自前に（ブラウザ標準は右端に寄りすぎるため）2026-10-24 */
.cform select { appearance: none; -webkit-appearance: none; padding-right: 5.2rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2rem center; background-size: 1.2rem auto; }
.cform input:focus, .cform textarea:focus, .cform select:focus { outline: 2px solid var(--c-brand); border-color: var(--c-brand); }
.cform__agree { font-size: 1.3rem; color: var(--c-sub); }
.cform__agree label { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.cform__agree input { width: 1.8rem; height: 1.8rem; margin: 0; accent-color: var(--c-brand); flex: none; }
.cform__agree a { color: var(--c-blue); }
.cform__submit { margin-top: 2.4rem; text-align: center; }
.cform__submit .btn { min-width: 28rem; min-height: 5.6rem; font-size: 1.6rem; }
.cform__note { margin-top: 1.2rem; font-size: var(--note); color: var(--c-muted); text-align: center; }
.cform__alt { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 4rem; }
.cform__altBox { padding: 2.4rem; border: 1px solid var(--c-line); border-radius: var(--radius); text-align: center; }
.cform__altBox p { font-size: 1.3rem; color: var(--c-muted); }
.cform__altBox .tel { display: block; font-family: var(--f-num); font-size: 2.8rem; font-weight: 700; color: var(--c-blue); text-decoration: none; margin: 0.6rem 0; }
@media (max-width: 599px) { .cform__alt { grid-template-columns: 1fr; } }

/* 規約ページ */
.legal { padding-bottom: 4rem; }
.legal h2 { font-size: 1.8rem; margin: 3.2rem 0 1.2rem; }
.legal p, .legal li { color: var(--c-sub); line-height: 1.9; }
.legal ol, .legal ul { padding-left: 1.8em; list-style: revert; }
.legal li { margin: 0.4em 0; }
.legal p + p { margin-top: 1em; }
/* FVコピーの1文字アニメ */
@keyframes fvCh { from { opacity: 0; transform: translateY(0.4em); } to { opacity: 1; transform: none; } }
/* FVコピー：1文字ずつ墨がにじむように（ぼかし＋少し大きい状態から収まる。ロロ指定 2026-10-24） */
html.fv-anim .fv__ch { display: inline-block; opacity: 0; animation: fvInk 0.8s ease-out forwards; }
@keyframes fvInk { from { opacity: 0; filter: blur(8px); transform: scale(1.25); } to { opacity: 1; filter: blur(0); transform: none; } }
html.fv-anim .fv__lead, html.fv-anim .fv__btns { opacity: 0; animation: fvCh 0.8s 1.8s ease-out forwards; } /* コピーの3行目あたりで出す（2026-10-24 3.4s→1.8s） */
/* 動画はポスター画像（=1コマ目）を枠の背景に敷いてから再生するので、フェードは不要（2026-10-24 カクつき対策） */
@keyframes fvFade { from { opacity: 0; } to { opacity: 1; } }


/* サンクス・404など、メッセージだけの中央寄せページ */
.msgPage { text-align: center; padding-top: 8rem; }
.msgPage .eyebrow { justify-content: center; }
.msgPage .sec__lead { margin-inline: auto; }
.msgPage__btn { margin-top: 3.2rem; }
.msgPage__box { margin: 3.2rem auto 0; max-width: 52rem; text-align: left; }
.msgPage__box p:first-child { font-weight: 700; }
.msgPage__box p + p { margin-top: 0.8rem; color: var(--c-sub); font-size: 1.4rem; line-height: 1.9; }

/* ===== 車種詳細（/ranking/スラッグ/）2026-10-24 ===== */
.car { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4.8rem; align-items: start; padding-top: 1.6rem; }
.car__main { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--c-bg2); }
.car__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.car__track::-webkit-scrollbar { display: none; }
.car__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; aspect-ratio: 4 / 3; }
.car__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car__nav { position: absolute; top: 50%; width: 4.4rem; height: 4.4rem; margin-top: -2.2rem; border: 0; border-radius: 50%; background: rgba(255,255,255,0.85); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.car__nav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 0.9rem; height: 0.9rem; border-top: 2px solid #111; border-right: 2px solid #111; }
.car__nav--prev { left: 1.2rem; } .car__nav--prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.car__nav--next { right: 1.2rem; } .car__nav--next::before { transform: translate(-70%, -50%) rotate(45deg); }
.car__count { position: absolute; right: 1.2rem; bottom: 1.2rem; padding: 0.3rem 1rem; border-radius: 99rem; background: rgba(0,0,0,0.55); color: #fff; font-family: var(--f-num); font-size: 1.2rem; letter-spacing: 0.08em; }
.car__thumbs { display: flex; gap: 0.8rem; margin-top: 1rem; overflow-x: auto; scrollbar-width: thin; padding-bottom: 0.4rem; }
.car__thumb { flex: 0 0 8.4rem; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: 0.6rem; overflow: hidden; background: var(--c-bg2); cursor: pointer; opacity: 0.6; transition: opacity .2s, border-color .2s; }
.car__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.car__thumb.is-active { opacity: 1; border-color: #111; }
.car__maker { display: flex; align-items: baseline; gap: 1rem; font-size: 1.3rem; color: var(--c-sub); }
.car__maker span { font-family: var(--f-num); font-size: 1.1rem; letter-spacing: 0.22em; color: var(--c-brand); }
.car__name { margin-top: 0.6rem; font-size: clamp(3rem, 3.4vw, 4.2rem); letter-spacing: 0.04em; line-height: 1.25; }
.car__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.car__tags li { display: inline-flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 1.2rem; border: 1px solid var(--c-line); border-radius: 99rem; font-size: 1.2rem; color: var(--c-sub); }
.car__tags b { font-family: Inter, var(--f-sans); font-style: italic; font-weight: 800; font-size: 1.8rem; line-height: 1; color: var(--c-text); }
.car__tags b i { font-size: 1.1rem; font-weight: 400; margin-left: 0.1rem; }
.car__tags .car__tagText { background: var(--c-bg2); border-color: var(--c-bg2); }
.car__social { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.car__social:not(:has(.carTag:not([hidden]))) { display: none; }
.carTag { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.2rem 0.5rem 1rem; border-radius: 0.6rem; font-size: 1.25rem; font-weight: 700; line-height: 1.4; animation: carTagIn .5s ease-out; }
.carTag[hidden] { display: none; }
.carTag::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: currentColor; flex: none; }
.carTag b { font-family: var(--f-num); font-size: 1.6rem; margin: 0 0.1rem; }
.carTag--view { color: var(--c-blue); background: var(--c-blue-soft); }   /* 閲覧＝青 */
.carTag--apply { color: var(--c-brand); background: #eaf6ec; }            /* 申込＝緑（LPと同じ色分け） */
@keyframes carTagIn { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
.car__tags li[hidden] { display: none; }
.car__price { margin-top: 2.4rem; padding: 2.4rem 0; border-top: 1px solid var(--c-text); border-bottom: 1px solid var(--c-line); }
.car__priceRow { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; }
.car__priceRow--month { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px dashed var(--c-line); }
.car__priceLabel { font-weight: 700; font-size: 1.4rem; }
.car__priceLabel small { font-weight: 500; font-size: 1.2rem; color: var(--c-muted); }
.car__priceVal { font-size: 1.4rem; white-space: nowrap; }
.car__priceVal b { font-family: Inter, var(--f-sans); font-style: italic; font-weight: 800; font-size: 3.6rem; letter-spacing: 0.01em; margin-right: 0.3rem; }
.car__priceVal--month b { font-size: 4.6rem; color: var(--c-blue); }
.car__priceSub { margin-top: 0.6rem; font-size: 1.25rem; color: var(--c-sub); text-align: right; }
.car__bonusTag { display: inline-block; margin-right: 0.8rem; padding: 0.1rem 0.8rem; border-radius: 0.4rem; background: var(--c-blue-soft); color: var(--c-blue); font-size: 1.1rem; font-weight: 700; }
.car__price--tba { text-align: center; }
.car__price--tba .car__priceSub { text-align: center; }
.car__cta { display: grid; gap: 0.8rem; margin-top: 2.4rem; }
.carBtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 1.4rem 1.6rem; border: 1px solid var(--c-line); border-radius: 1rem; background: #fff; color: var(--c-text); text-decoration: none; text-align: center; line-height: 1.4; transition: background .2s; }
.carBtn small { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-num); font-size: 0.95rem; letter-spacing: 0.16em; color: var(--c-muted); }
.carBtn small::before { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--dot); flex: none; }
.carBtn b { font-size: 1.5rem; letter-spacing: 0.04em; }
.carBtn:hover { background: #f4f4f1; }
.carBtn--apply { --dot: #7fa0ff; padding: 1.8rem 1.6rem; background: #2b2d31; border-color: #2b2d31; color: #fff; }
.carBtn--apply small { color: rgba(255,255,255,0.6); }
.carBtn--apply b { font-size: 1.7rem; }
.carBtn--apply:hover { background: #3a3c41; }
.carBtn--line { --dot: #06c755; }
.car__note { margin-top: 1.6rem; }
.carSec { padding-bottom: 0; }
.sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.2rem; margin-top: 3.2rem; padding: 3.2rem; border-radius: var(--radius); background: var(--c-bg2); }
.sim__inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; align-content: start; }
.sim__field { display: grid; gap: 0.6rem; font-size: 1.3rem; font-weight: 700; }
.sim__field:nth-child(n+3) { grid-column: 1 / -1; }
.sim__field select { width: 100%; height: 4.8rem; padding: 0 3.6rem 0 1.4rem; border: 1px solid var(--c-line); border-radius: 0.8rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1.4rem center; font: inherit; font-weight: 500; color: var(--c-text); -webkit-appearance: none; appearance: none; }
.sim__result { padding: 2.8rem; border-radius: var(--radius); background: #fff; text-align: center; }
.sim__monthly small { font-size: 1.5rem; font-weight: 700; }
.sim__monthly b { font-family: Inter, var(--f-sans); font-style: italic; font-weight: 800; font-size: 5.6rem; color: var(--c-blue); margin: 0 0.4rem; line-height: 1.1; }
.sim__bonus { margin-top: 0.4rem; font-size: 1.3rem; color: var(--c-sub); }
.sim__detail { margin: 2rem 0 0; text-align: left; border-top: 1px solid var(--c-line); }
.sim__detail div { display: flex; justify-content: space-between; gap: 1.6rem; padding: 1.1rem 0; border-bottom: 1px solid var(--c-line); font-size: 1.35rem; }
.sim__detail dt { color: var(--c-sub); }
.sim__detail dd { margin: 0; font-weight: 700; text-align: right; }
.sim__detail dd small { display: block; font-weight: 500; font-size: 1.1rem; color: var(--c-muted); }
.sim__note { margin-top: 1.4rem; }
.carDetail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.8rem; }
.carSpec { display: grid; grid-template-columns: 1fr 1fr; margin: 2.4rem 0 0; border-top: 1px solid var(--c-text); }
.carSpec div { display: flex; justify-content: space-between; gap: 1.2rem; padding: 1.3rem 0.4rem; border-bottom: 1px solid var(--c-line); font-size: 1.4rem; }
.carSpec div:nth-child(odd) { margin-right: 1.2rem; }
.carSpec div:nth-child(even) { margin-left: 1.2rem; }
.carSpec dt { color: var(--c-sub); }
.carSpec dd { margin: 0; font-weight: 700; text-align: right; }
.carDesc { margin-top: 2.4rem; }
.carDesc p { line-height: 2; color: var(--c-sub); }
.carDesc p + p { margin-top: 1.2rem; }
.carEquip { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.carEquip li { padding: 0.5rem 1.2rem; border-radius: 0.6rem; background: var(--c-bg2); font-size: 1.25rem; }
.carBottomCta { max-width: 52rem; margin: 4.8rem auto 0; }
@media (max-width: 1023px) {
  .car { grid-template-columns: minmax(0, 1fr); gap: 2.8rem; }
  .sim { grid-template-columns: minmax(0, 1fr); padding: 2rem; gap: 2rem; }
  .carDetail { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
}
@media (max-width: 767px) {
  .car__nav { display: none; }
  .car__thumb { flex-basis: 6.4rem; }
  .car__priceVal b { font-size: 3rem; }
  .car__priceVal--month b { font-size: 3.8rem; }
  .sim__inputs { grid-template-columns: 1fr; gap: 1.2rem; }
  .sim__result { padding: 2rem 1.6rem; }
  .sim__monthly b { font-size: 4.4rem; }
  .carSpec { grid-template-columns: 1fr; }
  .carSpec div:nth-child(n) { margin: 0; }
}
/* ランキング：絞り込み＋並び替え・もっと見る（2026-10-24 100車種） */
.rankBar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; }
.rankSort { display: inline-flex; align-items: center; gap: 0.8rem; font-size: 1.3rem; font-weight: 700; color: var(--c-sub); white-space: nowrap; }
.rankSort select { height: 4rem; padding: 0 3.4rem 0 1.4rem; border: 1px solid var(--c-line); border-radius: 99rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 1.3rem center; font: inherit; font-weight: 700; color: var(--c-text); -webkit-appearance: none; appearance: none; cursor: pointer; }
.rankMore { margin-top: 4rem; text-align: center; }
.rankMore[hidden] { display: none; }
.rankMore__btn { appearance: none; min-width: 28rem; padding: 1.5rem 3.2rem; border: 1px solid var(--c-text); border-radius: 99rem; background: #fff; font: inherit; font-weight: 700; font-size: 1.5rem; color: var(--c-text); cursor: pointer; transition: background .2s, color .2s; }
.rankMore__btn small { font-weight: 500; font-size: 1.2rem; color: var(--c-muted); margin-left: 0.4rem; }
.rankMore__btn:hover { background: #111; color: #fff; }
.rankMore__btn:hover small { color: rgba(255,255,255,0.7); }
.rankNote { margin-top: 2.4rem; }
@media (max-width: 767px) { .rankSort { width: 100%; justify-content: flex-end; } }
.carCard__social { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.carCard__social[hidden], .carCard__social span[hidden] { display: none; }
.carCard__social span { display: inline-flex; align-items: baseline; gap: 0.15rem; padding: 0.1rem 0.7rem; border-radius: 0.4rem; font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.carCard__social b { font-family: var(--f-num); font-size: 1.3rem; }
.carCard__views { color: var(--c-blue); background: var(--c-blue-soft); }
.carCard__applies { color: var(--c-brand); background: #eaf6ec; }
/* MEDIA：1列のとき（タブレット・スマホ）は 見出し→紹介文→動画→3つのポイント の順に（2026-10-24） */
@media (max-width: 1023px) {
  .split--media { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .split--media .split__body { display: contents; }
  .split--media .split__body > * { order: 1; }
  .split--media .split__video { order: 2; margin-top: 3.2rem; }
  .split--media .mediaPts, .split--media .media__end { order: 3; }
  .split--media .mediaPts { margin-top: 3.2rem; }
}
/* スマホだけ改行する <br class="sp">（2026-10-24） */
br.sp { display: none; }
@media (max-width: 767px) { br.sp { display: inline; } }
.story .eyebrow + .story__q { margin-top: 1.2rem; }