/* LP専用（申込フォーム・メディア掲載）。全ページ共通は hubride-common.css、車種ページは hubride-carlist.css */
/* アクセント色の定義は hubride-common.css の :root（--hb-accent / --hb-accent-dark） */ /* デザイン言語のアクセント＝HUBRIDEグリーン（2026-10-18）。オレンジはCTA専用 */
.hbForm { display: flex; flex-direction: column; gap: 2rem; text-align: left; margin-top: 2.4rem; }
.hbForm__row { display: flex; flex-direction: column; gap: 0.8rem; }
.hbForm__row--half { flex-direction: row; gap: 1.2rem; }
.hbForm__row--half > div { flex: 1; display: flex; flex-direction: column; gap: 0.8rem; }
.hbForm__label { font-size: 1.5rem; font-weight: 700; line-height: 1.4; display: flex; align-items: center; gap: 0.8rem; }
.hbForm__label .req { font-size: 1.1rem; color: #fff; background: #e5484d; border-radius: 0.4rem; padding: 0.1rem 0.6rem; font-weight: 700; }
.hbForm__pair { display: flex; gap: 1rem; }
.hbForm__pair input { flex: 1; min-width: 0; }
.hbForm input[type=text], .hbForm input[type=tel], .hbForm input[type=number], .hbForm select {
  width: 100%; font: inherit; font-size: 1.6rem; padding: 1.2rem 1.4rem; border: 1px solid #c9ced8; border-radius: 0.8rem; background: #fff; color: #111; box-sizing: border-box;
}
.hbForm select { appearance: auto; }
.hbForm input:focus, .hbForm select:focus { outline: 2px solid var(--hb-blue); border-color: var(--hb-blue); }
.hbForm .is-error { border-color: #e5484d !important; background: #fff5f5 !important; }
.hbForm__unit { display: flex; align-items: center; gap: 0.6rem; }
.hbForm__unit span { font-size: 1.4rem; font-weight: 700; flex: none; }
.hbForm__choices { display: flex; gap: 1rem; }
.hbForm__radio, .hbForm__check { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; cursor: pointer; }
.hbForm__radio { flex: 1; border: 1px solid #c9ced8; border-radius: 0.8rem; padding: 1.1rem 1.4rem; background: #fff; }
.hbForm__radio:has(input:checked) { border-color: var(--hb-blue); background: var(--hb-blue-soft); font-weight: 700; }
.hbForm__radio input, .hbForm__check input { width: 2rem; height: 2rem; accent-color: var(--hb-blue); margin: 0; }
.hbForm__consent { white-space: pre-wrap; font-size: 1.2rem; line-height: 1.6; height: 12rem; overflow-y: auto; border: 1px solid #d9d9d9; border-radius: 0.8rem; padding: 1rem 1.2rem; background: #fafafa; color: #444; }
.hbForm__check { font-weight: 700; }
.hbForm__car { background: var(--hb-blue-soft); border-radius: 0.8rem; padding: 1.2rem 1.4rem; }
.hbForm__carName { font-size: 1.8rem; font-weight: 700; }
.hbForm__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hbForm__error { color: #c62828; background: #fff5f5; border: 1px solid #f3c1c1; border-radius: 0.8rem; padding: 1rem 1.2rem; font-size: 1.4rem; font-weight: 700; line-height: 1.5; }
.hbForm__submit { border: 0; cursor: pointer; font: inherit; font-size: 1.9rem; font-weight: 700; color: #fff; padding: 1.8rem 1rem; border-radius: 100rem; background: linear-gradient(90deg, #ff9a00 0%, #ff5c00 100%); box-shadow: 0 0.4rem 0 #d84a00; transition: transform .15s, box-shadow .15s; }
.hbForm__submit:hover { transform: translateY(0.2rem); box-shadow: 0 0.2rem 0 #d84a00; }
.hbForm__submit:disabled { opacity: .7; cursor: wait; }
.hbForm__note { font-size: 1.2rem; color: #707070; text-align: center; }

/* 2ステップフォーム */
.hbForm__progress { display: flex; gap: 0.8rem; list-style: none; padding: 0; margin: 0; counter-reset: none; }
.hbForm__progress li { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 1rem 0.4rem; border-radius: 0.8rem; background: #eef0f4; color: #8a8f99; font-size: 1.3rem; font-weight: 700; }
.hbForm__progress li span { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #c9ced8; color: #fff; font-size: 1.2rem; }
.hbForm__progress li.is-current { background: #e8f6ec; color: var(--hb-accent); }
.hbForm__progress li.is-current span { background: var(--hb-accent); }
.hbForm__progress li.is-done { background: #eee; color: #555; }
.hbForm__progress li.is-done span { background: #111; }
.hbForm__step { display: flex; flex-direction: column; gap: 2rem; }
.hbForm__step[hidden] { display: none; }
.hbForm__stepLead { font-size: 1.5rem; font-weight: 700; text-align: center; line-height: 1.5; }
.hbForm__stepLead strong { color: var(--hb-accent); font-size: 1.9rem; }
.hbForm__contactNote { font-size: 1.2rem; line-height: 1.5; color: #444; }
.hbForm__back { border: 0; background: none; font: inherit; font-size: 1.3rem; color: #707070; text-decoration: underline; cursor: pointer; align-self: center; padding: 0.4rem; }
.hbForm__contactNote a { color: #1940a5; text-decoration: underline; }

/* メディア掲載 */
.hbMedia { padding: 3.2rem 2.4rem 6rem; background: #fff; }
.hbMedia__title { font-size: 2.8rem; font-weight: 700; text-align: center; margin-bottom: 2.4rem; }
.hbMedia__card { border: 2px solid #111; border-radius: 1.2rem; padding: 2rem 1.6rem; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; text-align: center; }
.hbMedia__badge { font-family: Oswald, sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; background: #111; color: #fff; padding: 0.2rem 1.2rem; border-radius: 0.4rem; }
.hbMedia__program { font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
.hbMedia__text { font-size: 1.4rem; line-height: 1.6; }
.hbMedia__video { width: 100%; margin-top: 1rem; border-radius: 0.8rem; overflow: hidden; background: #000; }
.hbMedia__video video { display: block; width: 100%; height: auto; }

/* 最新ご成約情報（FV直下の流れる帯） 2026-10-12 */
/* 成約情報の帯だけはFVのオレンジに合わせる（パレット例外・ロロ指定 2026-10-18） */
.hbTicker { display: flex; align-items: stretch; background: #222; color: #fff; font-size: 1.3rem; line-height: 1.4; overflow: hidden; }
.hbTicker__label { flex: none; display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.2rem; background: #ff6a00; font-weight: 700; white-space: nowrap; letter-spacing: 0.02em; }
.hbTicker__dot { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #fff; animation: hbTickerBlink 1.2s ease-in-out infinite; }
@keyframes hbTickerBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.hbTicker__track { flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.hbTicker__list { flex: none; display: flex; list-style: none; margin: 0; padding: 0; animation: hbTickerScroll 80s linear infinite; /* 実際の秒数はJSで幅から計算（約45px/秒） */ }
.hbTicker__item { white-space: nowrap; padding: 0 2.4rem; }
.hbTicker__item::before { content: '●'; font-size: 0.6em; color: #ff9a00; margin-right: 0.8rem; vertical-align: 0.15em; }
.hbTicker__pref { color: #bbb; }
.hbTicker__year { color: #bbb; font-size: 0.92em; margin: 0 0.1em; }
.hbTicker__item strong { color: #ffd166; font-weight: 700; margin-left: 0.2rem; }
@keyframes hbTickerScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.hbTicker:hover .hbTicker__list { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hbTicker__list { animation: none; } .hbTicker__list[aria-hidden] { display: none; } .hbTicker__track { overflow-x: auto; } .hbTicker__dot { animation: none; } }
@media screen and (orientation: portrait) and (max-width: 767px) {
  .hbTicker { font-size: 1.2rem; }
  .hbTicker__label { padding: 0.9rem 1rem; }
}

/* LP内ランキングTOP5：ボーナス併用の注記 */
.ranking__content .unit .date__plan { font-size: 1rem; line-height: 1.4; color: #707070; margin-top: 0.3rem; }
.ranking__content .unit .date__plan--tba { font-size: 1.4rem; font-weight: 700; color: #333; margin-top: 0.6rem; }

/* よくある質問（Faq.astro） */
.faq__select button { line-height: 1.3; }
.faq__count { position: absolute; top: 0.8rem; right: 0.8rem; min-width: 2rem; height: 2rem; padding: 0 0.5rem; border-radius: 1rem; background: var(--color-green); color: #fff; font-size: 1.1rem; font-weight: 700; display: grid; place-items: center; }
.faq.is-all .faq__select button::before { display: none; }
.faq.is-all .faq__details::before { content: attr(data-faq-label); color: var(--base-color); font-size: 1.6rem; font-weight: 700; padding-left: 0.4rem; }
.faqItem__answer { flex: 1; min-width: 0; }
.faqItem__answer p { text-align: justify; }
.faqItem__answer p + p { margin-top: 0.4em; }
.faqItem__cta { display: inline-block; margin-top: 1.2rem; padding: 0.6rem 1.4rem; border-radius: 2rem; background: #fff3e8; color: #e65c00; font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.faqItem__cta::after { content: " →"; }
.faq__all { display: block; width: 100%; margin: 0.4rem auto 0; padding: 1.4rem; border-radius: 0.8rem; border: 2px solid var(--base-color); background: transparent; color: var(--base-color); font-size: 1.5rem; font-weight: 700; cursor: pointer; }
.faq__all[hidden] { display: none; }
.faq__more { margin: 0; text-align: center; font-size: 1.1rem; color: var(--base-color); white-space: nowrap; letter-spacing: -0.01em; } /* 1行固定（2026-10-18） */
.faq__more a { color: inherit; text-decoration: underline; }
.faqItem__link { color: var(--color-green); text-decoration: underline; font-weight: 700; }
.faq__moreBtn { margin: 0.4rem 0 0; padding: 1.2rem; border-radius: 0.8rem; border: 0; background: rgba(255,255,255,0.18); color: var(--base-color); font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.faq__moreBtn[hidden] { display: none; }
.faq__details .faqItem[hidden] { display: none; } /* リセットCSSの details{display:block} に勝たせる */

/* Googleの口コミ（GoogleReviews.astro）喜びの声セクション内 */
.gRev { --gRev-gutter: 3.2rem; padding: 8rem var(--gRev-gutter); overflow: hidden; }
@media screen and (orientation: portrait) and (max-width: 767px) { .gRev { --gRev-gutter: 2.4rem; } }
.gRev .voice__title { margin-bottom: 2rem; }
.gRev__head { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin: 0 0 2.4rem; color: var(--base-color); }
.gRev__g { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--base-color); color: #4285f4; font-weight: 800; font-size: 1.8rem; line-height: 1; display: grid; place-items: center; padding-bottom: 0.15em; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
.gRev__title { font-size: 1.8rem; font-weight: 700; }
.gRev__rating { font-size: 1.8rem; font-weight: 700; color: #fbbc04; letter-spacing: 0.05em; }
.gRev__rating b { color: var(--base-color); font-size: 2.6rem; margin-right: 0.3em; }
.gRev__count { font-size: 1.3rem; color: var(--base-color); }
.gRev__carousel { position: relative; }
/* カードは常に中央寄せ（左右に (幅-カード幅)/2 の余白を持たせてスナップは center） */
.gRev__list { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.2rem 7% 0.6rem; }
@media (min-width: 768px) { .gRev__list { padding-inline: max(0px, calc((100% - 36rem) / 2)); } }
.gRev__list::-webkit-scrollbar { display: none; }
.gRev__card { flex: 0 0 86%; max-width: 36rem; scroll-snap-align: center; background: var(--base-color); border-radius: 1.6rem; padding: 2rem 2.4rem; display: flex; flex-direction: column; gap: 0.8rem; overflow: hidden; }
@media (min-width: 768px) { .gRev__card { flex-basis: 36rem; } }
.gRev__photo { width: calc(100% + 4.8rem); max-width: none; margin: -2rem -2.4rem 0.4rem; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gRev__arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 3.6rem; height: 3.6rem; border-radius: 50%; border: 1px solid #e3e3e3; background: #fff; color: #333; display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); padding: 0; }
/* 矢印はカード外側の余白（緑の帯）のど真ん中に置く */
.gRev__arrow--prev { left: calc(var(--gRev-gutter) * -0.5); }
.gRev__arrow--next { right: calc(var(--gRev-gutter) * -0.5); }
@media screen and (orientation: portrait) and (max-width: 767px) { .gRev__arrow { width: 3rem; height: 3rem; } }
.gRev__arrow:disabled { opacity: 0.35; cursor: default; }
.gRev__dots { display: flex; justify-content: center; gap: 0.6rem; margin: 1.2rem 0 0; }
.gRev__dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: rgba(255,255,255,0.45); }
.gRev__dots i.is-on { background: #fff; }
/* Googleの口コミと同じ並び: アイコン＋名前 → ★＋日付 → 本文 */
.gRev__who { display: flex; align-items: center; gap: 1rem; }
.gRev__avatar { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--hb-blue-soft); color: var(--hb-blue); font-weight: 700; font-size: 1.6rem; display: grid; place-items: center; flex-shrink: 0; }
.gRev__name { margin: 0; font-size: 1.4rem; font-weight: 700; color: #222; line-height: 1.3; }
.gRev__sub { margin: 0.1rem 0 0; font-size: 1.1rem; color: #777; line-height: 1.3; }
.gRev__stars { margin: 0; color: #fbbc04; font-size: 1.3rem; letter-spacing: 0.05em; display: flex; align-items: center; gap: 0.8rem; }
.gRev__date { color: #777; font-size: 1.1rem; letter-spacing: 0; }
.gRev__starsOff { color: #ddd; }
.gRev__text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.4rem; line-height: 1.75; }
.gRev__text.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.gRev__text p + p { margin-top: 0.6em; }
.gRev__more { align-self: flex-start; border: 0; background: none; padding: 0; color: var(--color-green); font-size: 1.3rem; font-weight: 700; cursor: pointer; text-decoration: underline; }
.gRev__more[hidden] { display: none; }
.gRev__link { margin: 1.6rem 0 0; text-align: center; }
.gRev__link a { color: var(--base-color); font-size: 1.4rem; font-weight: 700; text-decoration: underline; }
.gRev__note { margin: 1.2rem 0 0; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
.gRev__reply { margin-top: 0.4rem; border-top: 1px solid #eee; padding-top: 0.8rem; }
.gRev__reply summary { list-style: none; cursor: pointer; font-size: 1.3rem; font-weight: 700; color: var(--color-green); }
.gRev__reply summary::-webkit-details-marker { display: none; }
.gRev__reply summary::before { content: "▸ "; }
.gRev__reply[open] summary::before { content: "▾ "; }
.gRev__replyBody { margin-top: 0.8rem; padding: 1.2rem 1.4rem; background: #f4f6f8; border-radius: 1rem; font-size: 1.3rem; line-height: 1.7; color: #444; }
.gRev__replyBody p + p { margin-top: 0.6em; }

/* ===== 審査に落ちても道は3つ（FV直下。「100%車に乗れる」の根拠）2026-10-17 ===== */
.fv__note { font-size: 1.1rem; line-height: 1.5; color: #888; padding: 1rem 2.4rem; text-align: left; background: #fff; }
.fv__note a { color: #666; text-decoration: underline; white-space: nowrap; }
.ways { background: #f4f4f4; padding: 5.6rem 3.2rem; }
@media screen and (orientation: portrait) and (max-width: 767px) { .ways { padding: 5.6rem 2.4rem; } }
.ways__head { margin-bottom: 2.8rem; font-size: 3.2rem !important; text-align: center; } /* 他セクションの h2 と同じ 3.2rem */

.ways__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.ways__item { position: relative; display: flex; gap: 1.2rem; align-items: flex-start; background: #fff; border: 1px solid #ddd; border-radius: 1.2rem; padding: 1.6rem 1.6rem 1.6rem 1.4rem; }
.ways__num { flex: none; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #111; color: #fff; font-weight: 700; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; }
.ways__body { flex: 1; min-width: 0; }
.ways__name { font-size: 1.8rem; font-weight: 700; line-height: 1.3; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ways__tag { font-size: 1.2rem; color: #fff; background: var(--hb-accent); border-radius: 0.4rem; padding: 0.2rem 0.6rem; line-height: 1.2; }
.ways__desc { font-size: 1.5rem; line-height: 1.7; margin-top: 0.6rem; }
.ways__note { font-size: 1.4rem; font-weight: 700; color: #555; margin-top: 0.4rem; }
.ways__foot { font-size: 1.35rem; line-height: 1.75; margin-top: 2.4rem; color: #333; }
.ways__foot small { display: block; font-size: 1.15rem; line-height: 1.6; color: #777; margin-top: 0.8rem; }
.cta-2--slim { padding: 3.2rem 3.2rem 4rem; gap: 0; background: #fff; } /* 道は3つ の直下にボタンだけ（2026-10-17） */
.ranking { padding-top: 1.2rem; padding-bottom: 2.4rem; } /* 注記→ランキング見出し／一覧ボタン→メディア掲載 の隙間を詰める（2026-10-17/18） */

/* ===== よくある質問をコラムと同じ青背景に（緑→青）2026-10-18 ===== */
.faq { background: var(--color-blue); }
.faq__count { background: var(--color-blue); }
.faqItem__link { color: var(--color-blue); }
.faq__details .faqItem__chevron::before { border-color: var(--color-blue); }

/* ===== お役立ちコラムをグレー背景に（青→グレー）2026-10-18 ===== */
.externalArticle { background: #eef0f3; }
.externalArticle__title { color: #111; }
.externalArticle__content .unit a { border: 1px solid #dfe3e8; }
.externalArticle__content .unit svg { background: #111; }

/* ===== LPの人気車種ランキング：一覧と同じカード（2026-10-18） ===== */
.ranking .ranking__cards { margin-bottom: 3.2rem; }

/* ===== 「〜とは」ポイント見出し（画像→CSS・黒パネル版）2026-10-18 ===== */
.abHead { position: relative; overflow: hidden; background: #111; color: #fff; margin: -4rem -4rem 2.4rem; padding: 2.8rem 4rem 2.6rem; border-radius: 0 2.4rem 0 0; }
.about__content .unit:nth-child(even) .abHead { border-radius: 2.4rem 0 0 0; }
@media screen and (orientation: portrait) and (max-width: 767px) { .abHead { margin: -2.4rem -2.4rem 2rem; padding: 2.4rem 2.4rem 2.2rem; } }
.abHead::after { content: attr(data-no); position: absolute; right: -0.05em; top: -0.18em; font-family: Oswald, sans-serif; font-weight: 700; font-size: 12rem; line-height: 1; color: rgba(255,255,255,0.07); letter-spacing: -0.02em; pointer-events: none; }
.abHead__no { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.6rem; font-family: Oswald, sans-serif; font-size: 1.2rem; letter-spacing: 0.22em; color: var(--hb-accent-bright); line-height: 1; margin-bottom: 1.2rem; }
.abHead__no::before { content: ''; width: 2.4rem; height: 0.2rem; background: var(--hb-accent-bright); }
.abHead__no b { font-size: 1.6rem; font-weight: 700; }
.abHead__title { position: relative; z-index: 1; font-size: 2.6rem; font-weight: 700; line-height: 1.35; color: #fff; letter-spacing: 0.02em; }
.abHead__title small { font-size: 1.6rem; font-weight: 700; color: rgba(255,255,255,0.75); letter-spacing: 0.08em; }
.abHead__title em { font-style: normal; color: var(--hb-accent-bright); }
.abHead__title .num { font-family: Oswald, sans-serif; font-weight: 700; font-size: 5.8rem; line-height: 1; color: var(--hb-accent-bright); letter-spacing: 0.01em; margin-right: 0.12em; vertical-align: -0.04em; }
.abHead__title .u { font-size: 2rem; }
.abHead__title mark { background: linear-gradient(transparent 68%, var(--hb-accent-dark) 68%); color: inherit; padding: 0 0.1em; }
.abHead__title .tag { display: inline-block; font-size: 1.3rem; line-height: 1; padding: 0.4rem 0.5rem; border: 2px solid var(--hb-accent-bright); color: var(--hb-accent-bright); border-radius: 0.3rem; margin-right: 0.5rem; vertical-align: 0.9em; }

/* ===== 「〜とは」の見出しブロックをポイント見出しと同じデザイン言語に（2026-10-18） ===== */
.about__text { padding: 0; border: 0; border-radius: 2.4rem; overflow: hidden; background: #fff; box-shadow: 0 0.6rem 2rem rgba(0,0,0,0.08); }
.about__text h2 { position: relative; top: auto; left: auto; translate: none; width: auto; border-radius: 0; text-align: left; background: #111; color: #fff; font-size: 2.8rem; line-height: 1.25; padding: 4.4rem 4rem 2.8rem; overflow: hidden; letter-spacing: 0.02em; }
@media screen and (orientation: portrait) and (max-width: 767px) { .about__text h2 { padding: 4rem 2.4rem 2.4rem; } }
.about__text h2::before { content: 'ABOUT'; position: absolute; left: 4rem; top: 1.6rem; padding-left: 3rem; background: linear-gradient(var(--hb-accent-dark), var(--hb-accent-dark)) left center / 2.4rem 0.2rem no-repeat; font-family: Oswald, sans-serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.22em; color: var(--hb-accent-dark); line-height: 1; }
@media screen and (orientation: portrait) and (max-width: 767px) { .about__text h2::before { left: 2.4rem; } }
.about__text h2::after { content: 'ABOUT'; position: absolute; right: -0.05em; top: -0.1em; font-family: Oswald, sans-serif; font-weight: 700; font-size: 9rem; line-height: 1; color: rgba(255,255,255,0.06); letter-spacing: 0.02em; pointer-events: none; }
.about__desc { padding: 2.8rem 4rem 3.6rem; }
@media screen and (orientation: portrait) and (max-width: 767px) { .about__desc { padding: 2.4rem 2.4rem 3.2rem; } }

/* ===== CTA1 まわりの余白を詰める（2026-10-18）：ボタン→注記、CTA1→「〜とは」 ===== */
.c-cta--formImg { gap: 0.6rem; }
.cta-1 { padding-bottom: 15.2rem; } /* about__text が -12rem 上に食い込む設計なので、見た目の隙間は約3.2rem */

/* ===== 「こんなお悩みありませんか」を黒パネルの言語に（2026-10-18） ===== */
.problem { background: #111; overflow: hidden; }
.problem::after { background: #111; }
.problem::before { content: 'PROBLEM'; position: absolute; right: -0.05em; top: -0.1em; font-family: Oswald, sans-serif; font-weight: 700; font-size: 9rem; line-height: 1; color: rgba(255,255,255,0.06); letter-spacing: 0.02em; pointer-events: none; }
.problem h2 { text-align: left; margin-bottom: 2rem; padding-top: 2.4rem; }
.problem h2::before { content: 'PROBLEM'; width: auto; height: auto; top: 0; left: 0; padding-left: 3rem; background: linear-gradient(var(--hb-accent-bright), var(--hb-accent-bright)) left center / 2.4rem 0.2rem no-repeat; font-family: Oswald, sans-serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.22em; color: var(--hb-accent-bright); line-height: 1; }
.problem h2 span { color: var(--hb-accent-bright); }
.problem ul { gap: 0.7rem; position: relative; z-index: 1; }
.problem ul li { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.14); border-radius: 0.6rem; padding: 0.8rem 1.4rem 0.8rem 3.4rem; position: relative; }
.problem ul li::before { content: ''; position: absolute; left: 1.2rem; top: 50%; width: 1.2rem; height: 0.6rem; border-left: 0.25rem solid var(--hb-accent-bright); border-bottom: 0.25rem solid var(--hb-accent-bright); transform: translateY(-70%) rotate(-45deg); }
.problem__mascot { filter: drop-shadow(0 0.4rem 1rem rgba(0,0,0,0.4)); }
/* グレーのハブは一回り小さく（25rem→17rem／スマホ21rem→15rem・2026-10-18） */
.problem__mascot { width: 17rem; }
@media screen and (orientation: portrait) and (max-width: 767px) { .problem__mascot { width: 15rem; bottom: -1.6rem; } }

/* ===== 「選べる3つのプラン」を同じデザイン言語に（2026-10-18） ===== */
.ways { position: relative; overflow: hidden; background: #f4f4f4; }
.ways__head, .ways__list, .ways__foot { position: relative; z-index: 1; }
/* 3プランの見出しパネル：POINT見出し（.abHead）と同じ黒パネル言語（2026-10-18 メリハリ見直し） */
.waysHead { position: relative; overflow: hidden; background: #111; color: #fff; margin: 0 -3.2rem 2.4rem; padding: 2.8rem 3.2rem 2.6rem; border-radius: 0 2.4rem 0 0; }
@media screen and (orientation: portrait) and (max-width: 767px) { .waysHead { margin: 0 -2.4rem 2.4rem; padding: 2.4rem 2.4rem 2.2rem; } }
.waysHead::after { content: 'PLANS'; position: absolute; right: -0.05em; top: -0.12em; font-family: Oswald, sans-serif; font-weight: 700; font-size: 9.5rem; line-height: 1; color: rgba(255,255,255,0.07); letter-spacing: -0.02em; pointer-events: none; }
.waysHead__eyebrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.6rem; font-family: Oswald, sans-serif; font-size: 1.2rem; letter-spacing: 0.22em; color: var(--hb-accent-bright); line-height: 1; margin-bottom: 1.4rem; }
.waysHead__eyebrow::before { content: ''; width: 2.4rem; height: 0.2rem; background: var(--hb-accent-bright); }
.waysHead__sub { position: relative; z-index: 1; font-size: 1.4rem; font-weight: 700; line-height: 1.4; color: rgba(255,255,255,0.8); margin-bottom: 1rem; }
.waysHead__sub b { font-family: Oswald, sans-serif; font-size: 2.6rem; font-weight: 700; color: var(--hb-accent-bright); margin-right: 0.15em; vertical-align: -0.05em; }
.waysHead__title { position: relative; z-index: 1; font-size: 3rem; font-weight: 700; line-height: 1.25; }
.waysHead__title span { font-family: Oswald, sans-serif; font-size: 4.2rem; color: var(--hb-accent-bright); margin: 0 0.05em; vertical-align: -0.04em; }
.ways__item { border: 2px solid #111; border-radius: 1.2rem; box-shadow: 0.4rem 0.4rem 0 #111; background: #fff; }
.ways__num { font-family: Oswald, sans-serif; font-size: 1.8rem; }
.ways__note { display: inline-block; font-size: 1.2rem; padding: 0.2rem 0.8rem; border-radius: 10rem; background: #eee; color: #555; margin-top: 0.8rem; }
.ways__note.is-free { background: #eee; color: #555; } /* 他と同じグレーに（ロロ指示 2026-10-18） */
.voice { background: var(--hb-accent); } /* 口コミの背景もアクセントと同じ緑に（2026-10-18） */

/* ===== 黒パネルに青を差す（2026-10-18 試作）：ラベル層（── POINT／ゴースト文字／マーカー下線）＝青、主張（数字・強調語）＝緑 ===== */
:root { --hb-blue-bright: #3fb6ff; } /* 黒背景で読める水色系の青（ロロ指定 2026-10-18） */
.abHead__no, .problem h2::before, .waysHead__eyebrow { color: var(--hb-blue-bright); }
.abHead__no::before, .waysHead__eyebrow::before { background: var(--hb-blue-bright); }
.problem h2::before { background-image: linear-gradient(var(--hb-blue-bright), var(--hb-blue-bright)); }
.abHead::after, .problem::before, .waysHead::after { color: rgba(63,182,255,0.16); }
.abHead__title mark { background: linear-gradient(transparent 68%, var(--hb-blue) 68%); }
.problem ul li { border-color: rgba(63,182,255,0.35); }

/* ===== 「なぜHUBRIDEが選ばれるのか？」「シンプルなステップ」の見出しも黒パネル言語に（2026-10-18） ===== */
.choice__title, .step__title { position: relative; overflow: hidden; text-align: left; background: #111; color: #fff; font-size: 3rem; line-height: 1.25; padding: 4.6rem 3.2rem 2.8rem; margin: 0 -3.2rem 4rem; border-radius: 0 2.4rem 0 0; letter-spacing: 0.02em; }
@media screen and (orientation: portrait) and (max-width: 767px) { .choice__title, .step__title { padding: 4.2rem 2.4rem 2.4rem; margin: 0 -2.4rem 3.2rem; } }
.choice { padding-left: 3.2rem; padding-right: 3.2rem; } /* 元は6.5rem。パネルを他セクションと同じ幅に */
@media screen and (orientation: portrait) and (max-width: 767px) { .choice { padding-left: 2.4rem; padding-right: 2.4rem; } }
.choice__title::before, .step__title::before { position: absolute; left: 3.2rem; top: 1.8rem; padding-left: 3rem; background: linear-gradient(var(--hb-blue-bright), var(--hb-blue-bright)) left center / 2.4rem 0.2rem no-repeat; font-family: Oswald, sans-serif; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.22em; color: var(--hb-blue-bright); line-height: 1; }
@media screen and (orientation: portrait) and (max-width: 767px) { .choice__title::before, .step__title::before { left: 2.4rem; } }
.choice__title::after, .step__title::after { position: absolute; right: -0.05em; top: -0.1em; font-family: Oswald, sans-serif; font-weight: 700; font-size: 9rem; line-height: 1; color: rgba(63,182,255,0.16); letter-spacing: 0.02em; pointer-events: none; }
.choice__title::before { content: 'REASON'; } .choice__title::after { content: 'REASON'; }
.step__title::before { content: 'STEP'; } .step__title::after { content: 'STEP'; }
.choice__title b, .step__title b { color: var(--hb-accent-bright); }
.choice__content { padding-left: 3.3rem; padding-right: 3.3rem; } /* 丸画像のカードは元の幅感を維持 */
@media screen and (orientation: portrait) and (max-width: 767px) { .choice__content { padding-left: 0; padding-right: 0; } }
/* 「〜とは」見出しのラベルも他パネルと同じ水色に */
.about__text h2::before { color: var(--hb-blue-bright); background-image: linear-gradient(var(--hb-blue-bright), var(--hb-blue-bright)); }
.about__text h2::after { color: rgba(63,182,255,0.16); }

/* ===== REASON／STEP の中身も3プランのカード言語に（2026-10-18）：白カード＋黒2px枠＋ハードシャドウ、Oswald番号 ===== */
.choice__content { counter-reset: reason; gap: 2.8rem; }
.choice__content .unit { counter-increment: reason; align-items: stretch; background: #fff; border: 2px solid #111; border-radius: 1.2rem; box-shadow: 0.4rem 0.4rem 0 #111; padding: 1.6rem 1.6rem 2rem; position: relative; }
.choice__content .unit__image { width: 100%; border: 0; border-radius: 0.8rem; overflow: hidden; aspect-ratio: 2 / 1; }
.choice__content .unit__image img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.choice__content .unit__title { margin: 1.6rem 0 1rem; padding: 0; border-radius: 0; background: none; color: #111; font-size: 1.9rem; line-height: 1.3; display: flex; align-items: center; gap: 1rem; }
.choice__content .unit__title::before { content: '0' counter(reason); flex: none; font-family: Oswald, sans-serif; font-weight: 700; font-size: 3.2rem; line-height: 1; color: var(--hb-accent); }
.choice__content .unit__text p { font-size: 1.5rem; line-height: 1.75; }
.choice__content .unit__text .small { font-size: 1.1rem; color: #777; line-height: 1.6; }
.choice__content .unit__text .small br { display: none; }
.step__content { gap: 3.6rem; }
.step__content .unit { border-radius: 1.2rem; box-shadow: 0.4rem 0.4rem 0 #111; gap: 1.6rem; align-items: flex-start; }
.step__content .unit__image { width: 8.4rem; }
.step__content .unit__image img { border-radius: 0.8rem; }
.step__content .unit__textBox { gap: 0.4rem; }
.step__content .unit__textBox h3 { font-size: 1.8rem; }
.step__content .unit__textBox h3::before { content: 'STEP 0' counter(step); display: block; font-family: Oswald, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: 0.2em; color: var(--hb-blue); margin-bottom: 0.3rem; }
.step__content { counter-reset: step; }
.step__content .unit { counter-increment: step; }
.step__content .unit__textBox p { font-size: 1.4rem; line-height: 1.7; }
.step__content .unit:not(:last-child)::after { bottom: -3rem; }

/* フォームの送信ボタンを車種ページのCTAと同じ構造に（白カプセル＋メイン文言＋→）2026-10-18 */
.hbForm__submit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; width: 100%; padding: 1.4rem 2rem; }
.hbForm__submitSub { font-size: 1.2rem; font-weight: 700; line-height: 1.25; padding: 0.2rem 1rem; border-radius: 100rem; background: #fff; color: #ff5c00; white-space: nowrap; }
.hbForm__submitText { font-size: 1.9rem; line-height: 1.3; }
.hbForm__submitArrow { position: absolute; top: 50%; right: 1.6rem; translate: 0 -50%; width: 2.2rem; height: 2.2rem; color: #fff; }
.hbForm__submit.is-sending .hbForm__submitSub, .hbForm__submit.is-sending .hbForm__submitArrow { visibility: hidden; }

/* 同意チェックを中央・大きく（2026-10-18）：押しやすいボタン風 */
.hbForm__check { justify-content: center; gap: 0.8rem; font-size: 1.6rem; width: max-content; margin: 0.4rem auto 0; padding: 0.8rem 2rem; border: 2px solid #111; border-radius: 100rem; background: #fff; }
.hbForm__check input { width: 2.2rem; height: 2.2rem; }
.hbForm__check:has(input:checked) { border-color: var(--hb-blue); background: var(--hb-blue-soft); }