:root { --hb-accent: #009316; --hb-accent-dark: #009316; --hb-accent-bright: #24a838; --hb-blue: #1940a5; --hb-blue-soft: #eef2ff; --hb-blue-line: #c5cde8; --color-sky: #1940a5; --color-pink: #1940a5; }
/* ===== パレット（2026-10-18 ロロ確定）=====
   白・黒：ベース / 濃いグリーン #009316：ブランドアクセント（黒背景上は --hb-accent-bright #24a838）
   濃い青 #1940a5：価格・プラン系の情報色（ボーナス併用タグ・価格の数字・FAQ背景・フォームの選択状態）/ オレンジ：CTA専用
   style.css の --color-sky（hover色）・--color-pink（telボタン）は濃い青に上書き */
.c-btn.tel { background: var(--hb-blue-soft); }
.fv__title h1.v02 .secondline { background: linear-gradient(transparent 65%, #bfe9c8 0%); } /* ピンクマーカー→緑 */ /* --hb-accent-bright＝黒背景の上で使う明るめ緑（コントラスト用・2026-10-18） */ /* 全部「口コミ背景の緑」に統一（ロロ指定） */ /* HUBRIDEグリーン（濃）。黒背景上は --hb-accent-dark（2026-10-18） */
/* 全ページ共通（LP・車種ページ・プライバシー等）。フッターのリンクと取次の注意書き */
.footer__links { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; font-size: 1.2rem; margin: 2rem 0 0.6rem; }
.footer__links a { text-decoration: underline; }
.footer__copy { text-align: center; font-size: 1.1rem; color: #707070; padding-bottom: 2rem; }
.c-cta__agentNote { font-size: 1rem; line-height: 1.5; color: #707070; text-align: center; margin-top: 0.8rem; white-space: nowrap; letter-spacing: -0.01em; } /* 1行に収める（2026-10-18） */

/* ===== 人気車種ランキング TOP100 見出し（LP・車種一覧 共用）2026-10-17 ===== */
.rkHead { text-align: center; margin-bottom: 2.8rem; }
.rkHead__eyebrow { font-family: Oswald, "Noto Sans JP", sans-serif; font-size: 1.3rem; letter-spacing: 0.22em; color: #777; line-height: 1; margin-bottom: 1rem; }
.rkHead__eyebrow span { color: var(--hb-accent); }
.rkHead__title { font-size: 3.2rem; font-weight: 700; line-height: 1.25; margin: 0 0 1.4rem; position: relative; display: inline-block; padding: 0 1.2rem; }
.rkHead__title::before, .rkHead__title::after { content: ''; position: absolute; top: 55%; width: 0.25rem; height: 2.6rem; background: #111; border-radius: 1rem; }
.rkHead__title::before { left: -0.6rem; transform: translateY(-50%) rotate(-24deg); }
.rkHead__title::after { right: -0.6rem; transform: translateY(-50%) rotate(24deg); }
.rkHead__badge { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.8rem 0.5rem 1.4rem; border-radius: 10rem; background: #111; color: #fff; line-height: 1; box-shadow: 0 0.4rem 0 var(--hb-accent); }
.rkHead__crown { width: 2rem; height: 2rem; color: var(--hb-accent-bright); }
.rkHead__top { font-family: Oswald, sans-serif; font-size: 1.5rem; letter-spacing: 0.12em; opacity: 0.9; }
.rkHead__num { font-family: Oswald, sans-serif; font-size: 2.8rem; font-weight: 700; color: var(--hb-accent-bright); letter-spacing: 0.02em; margin-left: 0.1rem; }

/* ===== スマホのメニューボタンに「メニュー／閉じる」の文字を添える 2026-10-18 ===== */
@media screen and (orientation: portrait) and (max-width: 767px) {
  .header .menuButton { width: 4.4rem; flex-direction: column; gap: 0.3rem; }
  .header .menuButton__bars { position: relative; display: block; width: 2rem; height: 1.2rem; }
  .header .menuButton__bars .border { top: 50%; left: 0; }
  .header .menuButton__label { font-size: 0.9rem; font-weight: 700; line-height: 1; letter-spacing: 0.04em; color: #111; white-space: nowrap; }
  .header .menuButton__label .is-close { display: none; }
  .header .menuButton.active .menuButton__label .is-open { display: none; }
  .header .menuButton.active .menuButton__label .is-close { display: inline; }
  .header.is-shrunk .menuButton { width: 4.4rem; }
}

/* ドロワーメニュー内の画像CTA：画像に焼き込まれた白い余白をピル型に切り落とす（背景の方眼に白い四角が出ないように）2026-10-18 */
.drawerMenu .c-cta__formImg { overflow: hidden; border-radius: 10rem; }
.drawerMenu .c-cta__formImg img { width: 106%; max-width: none; margin: -3% -3%; }

/* ===== スマホ追従CTA（画面下固定）2026-10-17 ===== */
.stickyCta { display: none; }
@media screen and (orientation: portrait) and (max-width: 767px) {
  .stickyCta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; gap: 0.8rem; padding: 0.2rem 1.6rem calc(0.2rem + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e6e6e6; box-shadow: 0 -0.6rem 1.8rem rgba(0,0,0,0.22); } /* 透過なし（画像ボタンの白背景と合わせる） */
  .stickyCta { transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.22,.8,.32,1), opacity .35s ease; }
  .stickyCta.is-show { transform: none; opacity: 1; pointer-events: auto; }
  .stickyCta__btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 5.2rem; border-radius: 10rem; font-size: 1.5rem; font-weight: 700; color: #111; text-decoration: none; border: 2px solid #111; box-shadow: 0 0.3rem 0 #111; }
  .stickyCta__btn img { width: 2.2rem; height: 2.2rem; }
  .stickyCta__btn--line { background: #06c755; color: #fff; border-color: #06c755; box-shadow: 0 0.3rem 0 #04913e; }
  .stickyCta__btn--form { background: linear-gradient(90deg, #ff9a00 0%, #ff5c00 100%); color: #fff; border-color: #ff6a00; box-shadow: 0 0.3rem 0 #d84a00; flex: 1.25; }
  .stickyCta__img { flex: 1; display: block; overflow: hidden; }
  .stickyCta__img img { display: block; width: 74%; max-width: none; height: auto; margin: -3% auto; } /* 画像に焼き込まれた上下余白を負マージンで削って高さを抑える */
  .stickyCta__img:active { transform: translateY(0.2rem); }
  .stickyCta__btn:active { transform: translateY(0.2rem); box-shadow: none; }
  html.has-stickyCta .footer { padding-bottom: 8rem; }
}


/* ===== スマホ：スクロールしたらヘッダー（ロゴ・メニューボタン）を小さく 2026-10-17 ===== */
@media screen and (orientation: portrait) and (max-width: 767px) {
  .header { transition: height .45s cubic-bezier(.22,.8,.32,1); }
  .header__logo { transition: width .45s cubic-bezier(.22,.8,.32,1); }
  .header .menuButton { transition: width .45s cubic-bezier(.22,.8,.32,1); }
  .header.is-shrunk { height: 4.4rem; }
  .header.is-shrunk .header__logo { width: 10.4rem; }
  .header.is-shrunk .menuButton { width: 1.8rem; }
  .header.is-shrunk .drawerMenu { height: calc(100dvh - 4.4rem); }
}
/* TOP100バッジをシンプルに（2026-10-18 ロロ指示）：王冠・緑シャドウ・2トーンをやめて黒ピルに「TOP 100」だけ */
.rkHead__badge { gap: 0.5rem; padding: 0.7rem 1.6rem; box-shadow: none; }
.rkHead__crown { display: none; }
.rkHead__top { font-family: Oswald, sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.12em; }
.rkHead__num { font-size: 2.2rem; color: #fff; margin: 0; letter-spacing: 0.04em; }
/* TOP100バッジがPCで見出しの横に並んでしまう件：見出しとバッジを縦積みに固定（2026-10-19） */
.rkHead { display: flex; flex-direction: column; align-items: center; }
.rkHead__title { display: inline-block; }
.rkHead__badge { display: inline-flex; margin-top: 0; }