/** Shopify CDN: Minification failed
Line 1653:0 Unexpected "}"
**/
/* mp-renew-lower.css */
/* 全下層ページ共通。ページ追加のたびにこのファイルへ追記する。 */
/* =============================================================
[common] 共通コンポーネントの確定仕様（全リニューアルページ共通）
・merged.css は変更禁止のため、差分プロパティのみをここで上書きする（規約7-2-4）
・値は Figma 準拠。2026-09-05 にクライアント確認のうえ全ページ適用で確定
============================================================= */
/* 下層KV（1枚ページタイトル型）: 行間・ウェイトを Figma 準拠に揃える
sub の上マージンは 0（KV上端 or 中央/下寄せ配置の起点）、以降の行間は 10px 均等 */
.page-kv__sub { font-weight: 400; } /* 600 → 400 */
.page-kv__en { margin-top: 10px; } /* 6px → 10px */
.page-kv__main { margin-top: 10px; } /* 8px → 10px */
/* 下層KV: タイトル塊は上下中央ではなく下寄せ（Figma 準拠。KV下端からの余白 PC60 / 896以下30 / 568以下20）。
SPでは併せて最低高も上げる。固定ヘッダー #header（896px以下で height:50px）に
サブタイトルが潜り込むのを防ぐため、最低高だけでは中央揃えでクリアランスが 8px しか取れない。 */
.lower-kv--page { align-items: flex-end; }
.lower-kv--page > .container { padding-top: 130px; padding-bottom: 60px; }
/* padding-top はタイトルがヘッダーへ潜り込まないための下限。タイトルが1行に収まる間は
min-height 側が勝つため既存ページの見た目は不変で、長いタイトルが折り返して
min-height を超えたときだけ KV が伸び、ヘッダーからの逃げが保たれる。 */
@media (max-width: 896px) {
.lower-kv--page { min-height: 260px; }
.lower-kv--page > .container { padding-top: 90px; padding-bottom: 30px; }
}
@media (max-width: 568px) {
.lower-kv--page { min-height: 230px; }
.lower-kv--page > .container { padding-bottom: 20px; }
}
/* コンテナ内寸を Figma に一致させる。
Figma のページ幅 1728px / container x=123 → 内寸 1482px。
merged.css は max-width:1598px（内寸 1598-60*2 = 1478px）で 4px 狭いため、
max-width を 1602px にして内寸 1482px に揃える（左右 padding は --container-pad のまま）。 */
.container { max-width: 1602px; }
/* 下層リード部（テキスト + 正方形画像2枚）。associations01 / authorities01 で共通。
Figma: 左テキスト712 / gap61 / 右ビジュアル710（355×355 を隙間なく2枚）。
上余白は Figma のセクション上余白100px から .breadcrumb の下padding 10px を差し引いた値。 */
.lower-intro { padding: 90px 0 100px; }
.lower-intro__inner { display: flex; align-items: flex-start; gap: 61px; }
.lower-intro__col--txt { flex: 712 1 0; min-width: 0; }
.lower-intro__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: 0.9px; line-height: 1.7; color: var(--color-text); }
.lower-intro__body { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.lower-intro__imgs { flex: 710 1 0; min-width: 0; display: flex; align-items: center; }
.lower-intro__img { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; }
/* 見出し→本文の余白は associations / authorities / license が 20px、それ以降のページは Figma で 30px。
30px 側のページをここに列挙する（対象ページを増やすときは追記）。 */
.br-s01 .lower-intro__body,
.tr-s01 .lower-intro__body,
.pm-s01 .lower-intro__body,
.mnp-s01 .lower-intro__body,
.cof-s01 .lower-intro__body,
.ec-s01 .lower-intro__body,
.icn-s01 .lower-intro__body { margin-top: 30px; }
/* 見出し末尾の注記（「（必ずお読みください）」）。Figma: 36px の見出し中で 18px。
使用: page.minor-purchases / page.cooling-off。 */
.lower-intro__ttl-note { font-size: 18px; }
@media (max-width: 1300px) {
.lower-intro__inner { gap: 40px; }
.lower-intro__ttl { font-size: 30px; }
.lower-intro__ttl-note { font-size: 16px; }
}
@media (max-width: 896px) {
.lower-intro { padding: 60px 0; }
.lower-intro__inner { display: block; }
.lower-intro__imgs { margin-top: 40px; }
.lower-intro__ttl { font-size: 26px; }
.lower-intro__ttl br { display: none; }
.lower-intro__ttl-note { font-size: 14px; }
.br-s01 .lower-intro__body,
.tr-s01 .lower-intro__body,
.pm-s01 .lower-intro__body,
.mnp-s01 .lower-intro__body,
.cof-s01 .lower-intro__body,
.ec-s01 .lower-intro__body,
.icn-s01 .lower-intro__body { margin-top: 25px; }
}
@media (max-width: 568px) {
.lower-intro { padding: 40px 0; }
.lower-intro__ttl { font-size: 22px; line-height: 1.5; }
.lower-intro__body { font-size: 14px; margin-top: 15px; }
.lower-intro__ttl-note { font-size: 12px; }
/* 896px の 25px 指定（詳細度 0,2,0）が SP まで効き続けるため、同じ詳細度で 15px に戻す */
.br-s01 .lower-intro__body,
.tr-s01 .lower-intro__body,
.pm-s01 .lower-intro__body,
.mnp-s01 .lower-intro__body,
.cof-s01 .lower-intro__body,
.ec-s01 .lower-intro__body,
.icn-s01 .lower-intro__body { margin-top: 15px; }
.lower-intro__imgs { margin-top: 25px; }
}
/* 下層カード群（.sec-title + 本文［+ 任意でリンク行］の2列折り返しグリッド）。
associations02 / license02 で共通。Figma: 711px × 2列、gap 60px（縦横とも）、上揃え。 */
.lower-cards { padding-bottom: 100px; }
.lower-cards__grid { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 60px; }
.lower-cards__item { flex: 0 1 calc((100% - 60px) / 2); min-width: 0; }
.lower-cards__body { margin-top: 30px; }
.lower-cards__txt { font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-black); }
.lower-cards__linkrow { display: flex; align-items: center; gap: 15px; margin-top: 10px; }
.lower-cards__linkmark { width: 15px; flex-shrink: 0; }
.lower-cards__link { font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-black); text-decoration: underline; word-break: break-all; }
@media (hover: hover) {
.lower-cards__link:hover { text-decoration: none; }
}
@media (max-width: 1300px) {
.lower-cards__grid { gap: 40px; }
.lower-cards__item { flex-basis: calc((100% - 40px) / 2); }
}
@media (max-width: 896px) {
.lower-cards { padding-bottom: 60px; }
.lower-cards__grid { display: block; }
.lower-cards__item + .lower-cards__item { margin-top: 40px; }
.lower-cards__body { margin-top: 25px; }
.lower-cards__txt br { display: none; }
}
@media (max-width: 568px) {
.lower-cards { padding-bottom: 40px; }
.lower-cards__item + .lower-cards__item { margin-top: 30px; }
.lower-cards__body { margin-top: 20px; }
.lower-cards__linkrow { gap: 10px; }
}
/* ブランド別の機種ドキュメント一覧（.brand-docs / .doc-row）
左にブランドロゴ＋和名、右に機種行（英字名＋和名＋PDFボタン）を並べる。
Figma: ブロック間 60px / 左右 gap 60px / 行間 20px / 行下に罫線（ネイビー全幅＋左16.2%がアクセント色）。
ボタンは merged.css の .btn-solid を流用し、PDF未登録の機種は --off でグレーアウトする。
ロゴ幅はブランドごとに異なるため --italmoto / --ape-ryder / --rks で指定。
使用: page.product-manuals（product-manuals02・ボタン2つ） / page.error-code（error-code02・ボタン1つ）。 */
.brand-docs { display: flex; flex-direction: column; gap: 60px; }
.brand-docs__group { display: flex; align-items: flex-start; gap: 60px; }
.brand-docs__head { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.brand-docs__logo { display: block; }
.brand-docs__group--italmoto .brand-docs__logo { width: 260px; }
.brand-docs__group--ape-ryder .brand-docs__logo { width: 270px; }
.brand-docs__group--rks .brand-docs__logo { width: 208px; }
.brand-docs__name { font-family: var(--font-ja); font-weight: 600; font-size: 24px; line-height: 1.7; color: var(--color-text); }
.brand-docs__list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* 機種行。罫線はネイビー全幅 + 左 16.2% だけアクセント色（Figma は px 指定だがブランド毎に幅が違い、比率は一定）。 */
.doc-row { position: relative; padding-bottom: 20px; border-bottom: 1px solid var(--color-main); }
.doc-row::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 16.2%; height: 1px; background: var(--color-accent); }
.doc-row__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px 20px; }
.doc-row__name { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; color: var(--color-text); }
.doc-row__en { font-family: var(--font-en); font-weight: 500; font-size: 30px; line-height: 1.5; }
.doc-row__ja { font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.7; }
.doc-row__btns { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.doc-row__pdf { width: 20px; flex-shrink: 0; }
.doc-row__btn--off { background: #999; border-color: #999; color: var(--color-white); cursor: default; } /* Figma: PDF未登録の機種 */
@media (hover: hover) {
.doc-row__btn--off:hover { background: #999; border-color: #999; color: var(--color-white); }
}
@media (max-width: 1300px) {
.brand-docs__group { gap: 40px; }
.doc-row__en { font-size: 26px; }
.doc-row__btn { padding: 12px 20px; font-size: 15px; }
.doc-row__btns { gap: 15px; }
}
@media (max-width: 1024px) {
.brand-docs__group { display: block; }
.brand-docs__list { margin-top: 25px; }
.brand-docs__group--italmoto .brand-docs__logo,
.brand-docs__group--ape-ryder .brand-docs__logo { width: 220px; }
.brand-docs__group--rks .brand-docs__logo { width: 170px; }
}
@media (max-width: 896px) {
.brand-docs { gap: 40px; }
.brand-docs__name { font-size: 20px; }
.doc-row__en { font-size: 22px; }
.doc-row__ja { font-size: 16px; }
.doc-row__name { gap: 12px; }
}
@media (max-width: 568px) {
.brand-docs__head { gap: 12px; }
.brand-docs__group--italmoto .brand-docs__logo,
.brand-docs__group--ape-ryder .brand-docs__logo { width: 180px; }
.brand-docs__group--rks .brand-docs__logo { width: 140px; }
.brand-docs__name { font-size: 17px; }
.brand-docs__list { margin-top: 20px; gap: 15px; }
.doc-row { padding-bottom: 15px; }
.doc-row__inner { gap: 12px; }
.doc-row__en { font-size: 20px; }
.doc-row__ja { font-size: 14px; }
.doc-row__btns { gap: 10px; width: 100%; align-items: stretch; } /* ラベルが2行になる側に高さを揃える */
.doc-row__btn { flex: 1 1 0; min-width: 0; padding: 10px 12px; font-size: 13px; white-space: normal; justify-content: center; }
}
/* 罫線付き見出し（.lined-ttl）: 明朝の和文 + 黄色マーカー付きEN を罫線で挟む/繋ぐ見出し。
Figma 基準: gap 20px / 和文 明朝SemiBold 30px ls0.75 / EN Rubik 20px に高さ8pxの黄色マーカー（top15）。
既定は中央寄せ（両側に罫線）、--left は左寄せ（右側だけ罫線）。
使用: page.test-ride（test-ride02「全国の試乗可能店舗」） / page.company（company01 ミッション・ビジョン・価値の追求）。 */
.lined-ttl { display: flex; align-items: center; justify-content: center; gap: 20px; }
.lined-ttl__line { flex: 1 1 0; min-width: 0; height: 1px; background: var(--color-sub); }
.lined-ttl__body { flex: none; text-align: center; }
.lined-ttl__ja { font-family: var(--font-serif); font-weight: 600; font-size: 30px; letter-spacing: 0.75px; line-height: 1.5; color: var(--color-black); }
.lined-ttl__en { position: relative; display: inline-block; font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--color-main); }
.lined-ttl__en::before { content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 8px; background: var(--color-accent); } /* Figma: EN の幅いっぱいに敷く黄色のマーカー */
.lined-ttl__en span { position: relative; }
/* 店舗カード */
.lined-ttl--left .lined-ttl__body { text-align: left; }
@media (max-width: 1300px) {
.lined-ttl__ja { font-size: 26px; }
}
@media (max-width: 896px) {
.lined-ttl__ja { font-size: 22px; }
.lined-ttl__en { font-size: 18px; }
.lined-ttl__en::before { top: 13px; height: 7px; }
}
@media (max-width: 568px) {
.lined-ttl { gap: 12px; }
.lined-ttl__ja { font-size: 19px; }
.lined-ttl__en { font-size: 16px; }
.lined-ttl__en::before { top: 11px; height: 6px; }
}
/* 写真パネル（.photo-panel）: 写真を50%暗くした上に「番号 + 罫線 + EN」（上）と「和文見出し + 本文」（下）を置くカード。
Figma 基準: padding 30px 40px / 上下に振り分け / EN・番号 Rubik Medium 20px 白 /
和文 明朝SemiBold 20px ls0.5 白 / 本文 18px 白（見出しとの間 10px）。
縦横比とグリッドは中身に依存するため使用側で指定する。
使用: page.bicycle-rules（bicycle-rules06・481:316） / page.company（company01・731:365）。 */
.photo-panel { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 40px; overflow: hidden; background: var(--color-black); }
.photo-panel__img { position: absolute; inset: 0; z-index: 0; opacity: 0.5; } /* Figma: 黒地の上に写真を50%で重ねる */
.photo-panel__label { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.photo-panel__num, .photo-panel__en { font-family: var(--font-en); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--color-white); }
.photo-panel__body { position: relative; z-index: 1; }
.photo-panel__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.7; color: var(--color-white); }
.photo-panel__txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--color-white); }
@media (max-width: 1300px) {
.photo-panel { padding: 25px; }
.photo-panel__num, .photo-panel__en { font-size: 17px; }
.photo-panel__ttl { font-size: 18px; }
.photo-panel__txt { font-size: 15px; }
}
@media (max-width: 896px) {
/* 比率は使用側が後から指定するため、解除も使用側のメディアクエリで行う（.br-s06 / .cp-s01 参照） */
.photo-panel { aspect-ratio: auto; min-height: 240px; padding: 25px 20px; }
}
@media (max-width: 568px) {
.photo-panel { min-height: 210px; }
.photo-panel__num, .photo-panel__en { font-size: 15px; }
.photo-panel__ttl { font-size: 17px; }
.photo-panel__txt { margin-top: 8px; font-size: 14px; }
}
/* ラベル列 + 値列の定義リスト。Figma は左ラベル列（罫線付き）+ 右値列を固定 gap で組んでいるが、
住所の行数で高さが変わるため grid にして行ごとに自動で揃える。
dt は行いっぱいに伸ばして border-right を連続させ、中身だけ上寄せにする。 */
.info-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; letter-spacing: 0.4px; line-height: 1.7; color: var(--color-black); }
.info-list dt { padding: 5px 20px 5px 0; border-right: 1px solid var(--color-main); }
.info-list dt > span { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.info-list dd { padding: 5px 0; min-width: 0; }
.info-list__ic { flex: none; width: 24px; display: flex; align-items: center; justify-content: center; } /* Figma は所在地アイコンのみ幅19.88でラベルが4pxずれるため、24px枠に揃える */
/* 送料の確認（snippets/mp-ship-fee.liquid・ご利用ガイド／商品詳細で共通）。見た目は merged.css の .receive-fee を流用し、プルダウンの縦並びだけ追加 */
.ship-fee-selects { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ship-fee-selects .receive-fee__select { width: 100%; }
.info-list__ic img { max-width: 100%; max-height: 24px; }
.info-list a { color: inherit; text-decoration: underline; }
.info-list--lg { column-gap: 30px; font-size: 18px; letter-spacing: 0.45px; }
.info-list--lg dt { padding-right: 30px; }
@media (hover: hover) {
.info-list a:hover { text-decoration: none; }
}
/* セクション見出し行（.sec-headrow）: .sec-title を左、リード文を右に置く行。
Figma: 上下中央・両端揃え・gap 30px。リードは既定16px（ページ側で変更可）。
使用: page.bicycle-rules（02〜08） / page.company（company03）。 */
/* flex-wrap を付けると .sec-title が max-content（和文とENが1行に並ぶ幅）で確保され、
リードが入りきらず次の行に落ちる。wrap を外して .sec-title 側が縮む（＝ENが和文の下に回る）ようにする。
狭い幅は 896px 以下の display:block で対応する。 */
.sec-headrow { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sec-headrow > * { min-width: 0; }
/* 幅が足りないときは見出し側から先に縮める（＝ENが和文の下に回る）。
リードは Figma どおりの行数を保ちたいので、見出しが縮みきってから縮むようにする。 */
.sec-headrow .sec-title { flex-shrink: 10000; } /* 係数を大きくしてリードの縮みを実質ゼロにし、Figma の行数を保つ */
.sec-headrow__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
@media (max-width: 1300px) {
.sec-headrow { gap: 20px; }
}
@media (max-width: 896px) {
.sec-headrow { display: block; }
.sec-headrow__lead { margin-top: 20px; }
.sec-headrow__lead br { display: none; }
}
@media (max-width: 568px) {
.sec-headrow__lead { margin-top: 15px; font-size: 14px; }
}
/* 取扱ブランド一覧帯（自分好みの一台を見つける / FIND YOUR STYLE）。
マークアップは snippets/brand-find.liquid、ブランド帯本体は merged.css の .brand-section 系を流用。
ここで定義するのは見出し部だけ（トップページの #brands は2カラム見出しだが、こちらは縦積み）。 */
.brand-find { padding: 100px 0; }
.brand-find__lead { margin: 30px 0; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); } /* 下30px = Figma のリード→1枚目のブランド帯の間隔 */
@media (max-width: 896px) {
.brand-find { padding: 60px 0; }
.brand-find__lead { margin-top: 25px; margin-bottom: 25px; }
.brand-find__lead br { display: none; }
}
@media (max-width: 568px) {
.brand-find { padding: 40px 0; }
.brand-find__lead { font-size: 14px; margin-top: 20px; margin-bottom: 20px; }
}
/* セクション見出し: merged.css の .sec-title__ja は white-space:nowrap 固定で、
normal に戻るのが 896px 以下のみ。長い見出しが中間幅で溢れるため常に折り返し可にする。
normal は折り返しを「許可」するだけなので、1行に収まる見出しの表示は変わらない。 */
.sec-title__ja { white-space: normal; }
/* 写真カード群（.photo-cards）: 写真 + 黒グラデ + EN/和文見出し/本文 の縦カードを 4枚横並び。
Figma 基準: カード 363×454（比率0.800）/ gap 10px / 内側 padding 20px 30px / 下寄せ。
EN(Rubik Medium 20px #F5EA00) + 和文(明朝 SemiBold 20px ls0.5px) で 64px の塊、その下 10px に本文(18px)。
使用: page.our-commitment（our-commitment02） / page.product-policy（product-policy03）。
カード群の上マージンは枚数・見出しとの間隔がページで異なるため、各ページ側で指定する。 */
.photo-cards { display: flex; align-items: stretch; gap: 10px; }
.photo-cards__item { flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 363 / 454; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px 30px; overflow: hidden; }
.photo-cards__img { position: absolute; inset: 0; z-index: 0; }
.photo-cards__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-black)); } /* Figma Rectangle281 */
.photo-cards__body { position: relative; z-index: 1; color: var(--color-white); }
.photo-cards__en { font-family: var(--font-en); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--color-accent); }
.photo-cards__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.7; }
.photo-cards__txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; }
@media (max-width: 1300px) {
.photo-cards__item { padding: 20px; }
.photo-cards__en, .photo-cards__ttl { font-size: 18px; }
.photo-cards__txt { font-size: 15px; }
}
@media (max-width: 1024px) {
.photo-cards { flex-wrap: wrap; }
.photo-cards__item { flex: 0 0 calc((100% - 10px) / 2); } /* 4枚 → 2×2 */
.photo-cards__en, .photo-cards__ttl { font-size: 19px; }
.photo-cards__txt { font-size: 16px; }
}
@media (max-width: 568px) {
.photo-cards { display: block; }
.photo-cards__item { flex: none; width: 100%; aspect-ratio: 16 / 10; min-height: 260px; padding: 20px; } /* 極小幅ではテキスト高が比率高を超えるため min-height で担保 */
.photo-cards__item + .photo-cards__item { margin-top: 10px; }
.photo-cards__en, .photo-cards__ttl { font-size: 17px; }
.photo-cards__txt { font-size: 14px; }
}
/* 導線リンク行（.more-links）: 「MOBIPARKをもっと知る」+ 縦罫線 + ボタン3つの横並び。
Figma 基準: 見出し → 40px → 縦罫線(1×54px) → 40px → ボタン群（ボタン間 20px）。
--light は写真・暗色背景に載せる版（文字と罫線を白に）。ボタンは使用側で .btn-solid / .btn-outline-white を選ぶ。
使用: page.our-commitment（our-commitment05） / page.product-policy（product-policy06・--light）。 */
.more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.more-links__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; color: var(--color-text); }
.more-links__line { flex: none; width: 1px; height: 54px; background: var(--color-black); }
.more-links__btns { display: flex; flex-wrap: wrap; gap: 20px; }
.more-links--light .more-links__ttl { color: var(--color-white); }
.more-links--light .more-links__line { background: var(--color-white); }
@media (max-width: 1300px) { .more-links { gap: 20px 30px; } }
@media (max-width: 896px) { .more-links__line { display: none; } }
@media (max-width: 568px) {
.more-links__ttl { font-size: 18px; }
.more-links__btns { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
.more-links__btns .btn-solid, .more-links__btns .btn-outline-white { white-space: normal; text-align: center; }
}
/* 番号バッジ付きカード（.num-card）: 白地＋ネイビー1px枠、左上に番号バッジ、その右にネイビーの見出し帯。
Figma 基準: 角丸5px / 内部 gap 22px / 下 padding 30px / バッジ 50×50（Rubik 30px アクセント色）/
見出し帯 高さ50px・18px SemiBold 白・ls 0.45px。本文の左右余白（30px）は使用側で指定する。
使用: page.mbp-insurance（mbp-insurance01） / page.bohan-registration（本文セクション）。 */
.num-card { display: flex; flex-direction: column; gap: 22px; padding-bottom: 30px; border: 1px solid var(--color-main); border-radius: 5px; background: var(--color-white); }
.num-card__head { display: flex; align-items: stretch; }
.num-card__num { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 50px; border-radius: 5px 0 0 0; background: var(--color-main); font-family: var(--font-en); font-weight: 400; font-size: 30px; line-height: 1; color: var(--color-accent); }
.num-card__num::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 27px; transform: translateY(-50%); background: var(--color-white); } /* Figma Vector 35（バッジ右端の27px縦線） */
.num-card__ttl { display: flex; align-items: center; min-height: 50px; padding: 11px 20px; border-radius: 0 0 5px 0; background: var(--color-main); font-family: var(--font-ja); font-weight: 600; font-size: 18px; letter-spacing: 0.45px; line-height: 1.5; color: var(--color-white); }
@media (max-width: 568px) {
.num-card { gap: 18px; padding-bottom: 20px; }
.num-card__num { width: 40px; font-size: 24px; }
.num-card__ttl { min-height: 40px; padding: 10px 15px; font-size: 15px; }
}
/* チェックリスト（.chk-list）: チェック丸 + 縦の連結線 + 本文の行。
Figma 基準: マーク列 42px（チェック 27×26、その下 10px から残り高さいっぱいの縦線）/ マーク→本文 15px /
本文 16px・ls 0.8px・行間1.5。行間の余白は使用側（リストのラッパー）で指定する。
使用: page.product-policy（product-policy02） / page.faq（faq01）。 */
.chk-list__item { display: flex; align-items: flex-start; gap: 15px; }
.chk-list__mark { flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 42px; }
.chk-list__mark img { width: 27px; }
.chk-list__line { flex: 1 0 0; width: 1px; min-height: 0; background: var(--color-black); } /* Figma Vector 58 */
.chk-list__txt { flex: 1 1 0; min-width: 0; font-family: var(--font-ja); font-weight: 400; font-size: 16px; letter-spacing: 0.8px; line-height: 1.5; color: var(--color-text); }
@media (max-width: 896px) {
.chk-list__item { gap: 10px; }
.chk-list__mark { width: 32px; }
}
@media (max-width: 568px) {
.chk-list__mark { width: 27px; }
.chk-list__mark img { width: 22px; }
.chk-list__txt { font-size: 14px; letter-spacing: 0.4px; }
}
/* パンくず: 上下余白 14px → 10px、文字色 #000 → #222（--color-text） */
.breadcrumb { padding: 10px 0; }
.breadcrumb__item,
.breadcrumb__item a,
.breadcrumb__item[aria-current="page"] { color: var(--color-text); }
@media (max-width: 568px) { .breadcrumb { padding: 8px 0; } }
/* テキストリンク用の下線ユーティリティ。
.ubdr は app.css / app-common.css にも同一定義があるが、リニューアル系の layout
（mobipark.liquid / theme-renew.liquid）はそれらを読み込まないため効かない。
merged.css にも無いので、本ファイルで補う（同値・重複定義ではない）。 */
.ubdr { text-decoration: underline; }
/* 地域・店舗種別タグ（.tag-labels / .tag-label）。主/アクセントは連結して1つの角丸、--float は画像に重ねる白地版。
test-ride02 から切り出し（2ページ目の after-support で共通化）。 */
.tag-labels { display: flex; align-items: center; flex-wrap: wrap; }
.tag-label { display: inline-flex; align-items: center; justify-content: center; padding: 5px 30px; border: 1px solid var(--color-main); border-radius: 5px; font-family: var(--font-ja); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; }
.tag-label--main { border-radius: 5px 0 0 5px; background: var(--color-main); color: var(--color-white); }
.tag-label--accent { border-radius: 0 5px 5px 0; background: var(--color-accent); color: var(--color-main); }
.tag-label--float { position: absolute; left: 21px; top: 15px; z-index: 1; background: var(--color-white); color: var(--color-main); }
@media (max-width: 896px) {
.tag-label { padding: 4px 20px; font-size: 18px; }
}
@media (max-width: 568px) {
.tag-label { padding: 3px 15px; font-size: 16px; }
.tag-label--float { left: 12px; top: 10px; }
}
/* =============================================================
[dealer] 取扱店募集ページ
プレフィックス: dealer-
============================================================= */
/* ---- 共通セクション間隔 ---- */
.dealer-block { padding: 80px 0; background: var(--color-bg-yellow); }
.dealer-block--first { padding-top: 90px; }
.dealer-sec { padding: 80px 0; }
/* ---- テキスト+画像 2カラム (dealer01〜03) ---- */
.dealer-block__inner { display: flex; align-items: flex-start; gap: 60px; }
.dealer-block--rev .dealer-block__inner { flex-direction: row-reverse; }
.dealer-block__text { min-width: 0; }
.dealer-block__img { min-width: 0; border-radius: 5px; overflow: hidden; }
/* 幅比率はFigma実測値(コンテンツ幅1482px基準)に合わせる: dealer01=771:651, dealer02/03=968:454。ID指定はSP(max-width:896px)のflex-basis:autoより詳細度が高くなるためPC専用クエリで囲む */
@media (min-width: 897px) {
#dealer01 .dealer-block__text { flex: 1 1 52%; }
#dealer01 .dealer-block__img { flex: 1 1 44%; }
#dealer02 .dealer-block__text,
#dealer03 .dealer-block__text { flex: 1 1 65%; }
#dealer02 .dealer-block__img,
#dealer03 .dealer-block__img { flex: 1 1 31%; }
}
.dealer-hero__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 36px; line-height: 1.5; letter-spacing: 1px; color: var(--color-text); margin-bottom: 15px; }
.dealer-hero__sub { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.6; color: var(--color-text); margin-bottom: 30px; }
.dealer-sec__lead { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.7; letter-spacing: 0.6px; color: var(--color-text); margin-bottom: 18px; }
.dealer-sec__body { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--color-text); }
.dealer-sec__body strong { font-weight: 700; }
.dealer-sec__body + .dealer-sec__body { margin-top: 20px; }
.dealer-block .sec-title,
.dealer-sec .sec-title,
.dealer-cta .sec-title { margin-bottom: 30px; }
/* ---- MOBIPARKの優位性: 数字バッジ付き 3列グリッド (dealer04) ---- */
.dealer-strength__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.dealer-strength__item { position: relative; overflow: hidden; border-radius: 5px; aspect-ratio: 3 / 2; }
.dealer-strength__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dealer-strength__overlay { display: block !important; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5); }
.dealer-strength__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 30px; }
.dealer-strength__badge { display: flex; align-items: center; gap: 10px; color: var(--color-white); }
.dealer-strength__num { font-family: var(--font-oswald); font-weight: 600; font-size: 20px; }
.dealer-strength__line { display: block; width: 20px; height: 1px; background: var(--color-accent); }
.dealer-strength__label { font-family: var(--font-en); font-weight: 500; font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; }
.dealer-strength__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1.7; color: var(--color-white); margin-bottom: 10px; }
.dealer-strength__desc { font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--color-white); }
/* ---- 万全のバックアップ・サポート体制: アイコン付き 2x2グリッド (dealer05) ---- */
.dealer-support__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 40px; }
.dealer-support__card { display: flex; align-items: flex-start; gap: 20px; padding: 30px; border-radius: 5px; background: var(--color-white); }
.dealer-support__icon { width: 150px; flex-shrink: 0; }
.dealer-support__text { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
.dealer-support__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--color-text); }
.dealer-support__desc { font-family: var(--font-ja); font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--color-text); }
/* ---- 取扱店様の導入メリット: 写真付き 3列グリッド (dealer06) ---- */
.dealer-merit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.dealer-merit__item { background: var(--color-white); border-radius: 5px; }
.dealer-merit__photo { width: 100%; aspect-ratio: 464 / 237; border-radius: 5px 5px 0 0; overflow: hidden; margin-bottom: 20px; }
.dealer-merit__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 18px; line-height: 1.6; color: var(--color-text); margin-bottom: 10px; padding: 0 30px; }
.dealer-merit__desc { font-family: var(--font-ja); font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--color-text); padding: 0 30px 30px; }
/* ---- お問い合わせ CTA (dealer07) ---- */
.dealer-cta { padding: 90px 0; }
.dealer-cta__inner { display: flex; align-items: center; gap: 60px; }
.dealer-cta__text { flex: 1 1 52%; min-width: 0; }
.dealer-cta__img { flex: 1 1 44%; min-width: 0; border-radius: 5px; overflow: hidden; }
.dealer-cta__lead { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.7; letter-spacing: 0.6px; color: var(--color-text); margin-bottom: 18px; }
.dealer-cta__body { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--color-text); margin-bottom: 30px; }
@media (max-width: 1120px) {
.dealer-strength__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 896px) {
.dealer-block { padding: 50px 0; }
.dealer-block--first { padding-top: 60px; }
.dealer-sec { padding: 50px 0; }
.dealer-block__inner { flex-direction: column; }
.dealer-block--rev .dealer-block__inner { flex-direction: column; }
.dealer-block__text, .dealer-block__img { flex-basis: auto; width: 100%; }
.dealer-hero__ttl { font-size: 28px; }
.dealer-hero__sub { font-size: 20px; }
.dealer-support__grid { grid-template-columns: 1fr; }
.dealer-merit__grid { grid-template-columns: 1fr; }
.dealer-support__icon { width: 100px; }
.dealer-cta__inner { flex-direction: column; }
.dealer-cta__text, .dealer-cta__img { flex-basis: auto; width: 100%; }
}
@media (max-width: 568px) {
.dealer-strength__grid { grid-template-columns: 1fr; }
.dealer-hero__ttl { font-size: 24px; }
.dealer-hero__sub { font-size: 18px; }
.dealer-sec__lead, .dealer-cta__lead { font-size: 18px; }
.dealer-support__card { flex-direction: column; }
.dealer-support__icon { width: 80px; }
}
/* =============================================================
[repair] 全国出張修理ネットワーク
プレフィックス: repair-
============================================================= */
.repair-main { background: var(--color-bg-light); }
.repair-block { padding: 80px 0; }
.repair-block--first { padding-top: 90px; }
/* ---- 売って終わりにしない。MOBIPARKのサポートネットワーク。 (repair01) ---- */
.repair-intro__inner { display: flex; align-items: center; gap: 60px; }
.repair-intro__text { flex: 1 1 55%; min-width: 0; }
.repair-intro__img { flex: 1 1 40%; min-width: 0; border-radius: 5px; overflow: hidden; }
.repair-intro__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 36px; line-height: 1.7; letter-spacing: 0.9px; color: var(--color-text); margin-bottom: 24px; }
/* ---- 出張修理・メンテナンスサービス (repair02 / repair03統合) ---- */
.repair-service__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); margin-top: 20px; }
/* 料金の目安と例 */
.repair-price__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--color-text); margin-top: 60px; }
.repair-price__note { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); margin-top: 8px; }
/* 料金カード（紺ヘッダー + 罫線テーブル + 紺合計行） */
.repair-price__grid { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 30px; }
.repair-price__card { flex: 1 1 0; min-width: 280px; display: flex; flex-direction: column; gap: 22px; padding-bottom: 30px; background: var(--color-white); border: 1px solid var(--color-main); border-radius: 5px; }
.repair-price__head { display: flex; align-items: center; gap: 20px; padding: 14px 24px; background: var(--color-main); border-radius: 5px 5px 0 0; }
.repair-price__case { flex-shrink: 0; display: flex; align-items: baseline; font-family: var(--font-en); font-weight: 400; color: var(--color-accent); }
.repair-price__case-label { font-size: 16px; line-height: 1; }
.repair-price__case-num { font-size: 30px; line-height: 1; margin-left: 2px; }
.repair-price__case-div { flex-shrink: 0; width: 1px; height: 24px; background: rgba(255, 255, 255, 0.4); }
.repair-price__case-ttl { font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: 0.45px; color: var(--color-white); }
.repair-price__case-ttl small { font-size: 14px; }
.repair-price__rows { border-top: 1px solid var(--color-sub); border-left: 1px solid var(--color-sub); margin: 0 30px;}
.repair-price__row { display: flex; }
.repair-price__cell { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 10px 20px; border-right: 1px solid var(--color-sub); border-bottom: 1px solid var(--color-sub); text-align: center; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; letter-spacing: 0.4px; color: var(--color-black); }
.repair-price__row--total .repair-price__cell { background: var(--color-main); border-color: var(--color-main); font-weight: 600; color: var(--color-accent); }
.repair-price__sum { font-size: 24px; letter-spacing: 0.6px; }
.repair-price__sum small { font-size: 16px; }
.repair-price__foot { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); margin-top: 20px; }
/* ---- ご相談・出張修理の流れ (repair03統合) ---- */
.repair-flow { margin-top: 60px; }
.repair-flow__ttl { font-family: var(--font-ja); font-weight: 600; font-size: 24px; line-height: 1.5; color: var(--color-black); margin-bottom: 30px; }
.repair-flow__grid { display: flex; gap: 20px; }
.repair-flow__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 30px 30px 80px; background: var(--color-white); border-radius: 5px; margin-left: 40px;}
.repair-flow__badge { position: absolute; top: 30px; left: -40px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: var(--color-main); font-family: var(--font-en); font-weight: 400; color: var(--color-accent); }
.repair-flow__badge-label { font-size: 16px; line-height: 0.9; }
.repair-flow__badge-num { font-size: 36px; line-height: 0.9; }
.repair-flow__step-ttl { font-family: var(--font-serif); font-weight: 600; font-size: 30px; line-height: 1.5; letter-spacing: 0.75px; color: var(--color-black); }
.repair-flow__en { display: inline-block; background: linear-gradient(transparent 50%, var(--color-accent) 50%); font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--color-main); }
.repair-flow__body { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
@media (max-width: 896px) {
.repair-block { padding: 50px 0; }
.repair-block--first { padding-top: 60px; }
.repair-intro__inner { flex-direction: column; }
.repair-intro__text, .repair-intro__img { flex-basis: auto; width: 100%; }
.repair-intro__ttl { font-size: 28px; }
.repair-price__ttl { margin-top: 40px; }
.repair-price__grid { flex-direction: column; }
.repair-flow { margin-top: 40px; }
.repair-flow__grid { flex-direction: column; gap: 30px; }
.repair-flow__step-ttl { font-size: 26px; }
}
@media (max-width: 568px) {
.repair-intro__ttl { font-size: 24px; }
.repair-price__ttl, .repair-flow__ttl { font-size: 20px; }
.repair-flow__step-ttl { font-size: 24px; }
}
/* =============================================================
[road-service] 24時間緊急ロードサービス
プレフィックス: rs-
============================================================= */
/* ---- 共通セクション間隔 ---- */
.rs-block { padding: 80px 0; }
.rs-block--first { padding-top: 90px; }
/* ---- 導入 (road-service01): テキスト + 画像 2カラム ---- */
.rs-intro__inner { display: flex; align-items: stretch; gap: 60px; }
.rs-intro__text { flex: 1 1 52%; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.rs-intro__img { flex: 1 1 44%; min-width: 0; max-width: 651px; }
.rs-intro__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 36px; line-height: 1.7; letter-spacing: 0.9px; color: var(--color-text); margin-bottom: 24px; }
@media (max-width: 896px) {
.rs-block { padding: 50px 0; }
.rs-block--first { padding-top: 60px; }
.rs-intro__inner { flex-direction: column; align-items: stretch; }
.rs-intro__text, .rs-intro__img { flex-basis: auto; width: 100%; max-width: none; }
.rs-intro__text { gap: 24px; }
.rs-intro__ttl { font-size: 28px; }
}
@media (max-width: 568px) {
.rs-intro__ttl { font-size: 24px; }
}
/* ---- 料金について (road-service02) ---- */
.rs-price__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--color-text); margin-top: 40px; }
.rs-price__ttl small { font-size: 16px; }
/* 計算式 */
.rs-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 30px; }
.rs-formula__item { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--color-main); border-radius: 5px; }
.rs-formula__num { font-family: var(--font-en); font-weight: 400; font-size: 24px; line-height: 1; color: var(--color-accent); }
.rs-formula__div { flex-shrink: 0; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.4); }
.rs-formula__label { font-family: var(--font-ja); font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--color-white); }
.rs-formula__plus { font-family: var(--font-en); font-weight: 400; font-size: 24px; line-height: 1; color: var(--color-main); }
/* 料金カード (3カラム) */
.rs-fee { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.rs-fee__card { display: flex; flex-direction: column; background: var(--color-white); border: 1px solid var(--color-main); border-radius: 5px; }
.rs-fee__head { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--color-main); border-radius: 5px 5px 0 0; }
.rs-fee__num { flex-shrink: 0; font-family: var(--font-en); font-weight: 400; font-size: 30px; line-height: 1; color: var(--color-accent); }
.rs-fee__div { flex-shrink: 0; width: 1px; height: 24px; background: rgba(255, 255, 255, 0.4); }
.rs-fee__ttl { font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.5; letter-spacing: 0.45px; color: var(--color-white); }
.rs-fee__rows { margin: 20px 30px 30px; border: 1px solid var(--color-sub); }
.rs-fee__row { display: flex; }
.rs-fee__row + .rs-fee__row { border-top: 1px solid var(--color-sub); }
.rs-fee__cell { padding: 12px 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-black); }
.rs-fee__cell--label { flex: 1 1 auto; min-width: 0; text-align: center;}
.rs-fee__cell--val { flex: 0 0 42%; text-align: right; font-weight: 700; border-left: 1px solid var(--color-sub); }
/* 料金の目安と例 */
.rs-ex { border: 1px solid var(--color-main); border-radius: 5px; margin-top: 40px; background: var(--color-white); }
.rs-ex__tag { display: inline-block; background: var(--color-main); color: var(--color-white); font-family: var(--font-ja); font-weight: 600; font-size: 20px; line-height: 1.5; padding: 10px 30px; border-radius: 4px 0 8px 0; }
.rs-ex__inner { padding: 24px 30px 30px; }
.rs-ex__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 30px; margin-bottom: 24px; }
.rs-ex__lead { font-family: var(--font-ja); font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--color-text); }
.rs-ex__flow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rs-ex__spot { flex-shrink: 0; background: var(--color-main); color: var(--color-white); font-family: var(--font-ja); font-weight: 600; font-size: 16px; line-height: 1.5; padding: 10px 20px; border-radius: 5px; }
.rs-ex__conn { flex: 0 0 auto; width: 88px; display: flex; align-items: center; justify-content: center; position: relative; }
.rs-ex__conn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-main); }
.rs-ex__km { position: relative; background: var(--color-white); border: 1px solid var(--color-main); border-radius: 4px; padding: 2px 10px; font-family: var(--font-en); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.rs-ex__cards { display: flex; flex-wrap: wrap; gap: 16px; }
.rs-ex__card { flex: 1 1 0; min-width: 150px; display: flex; align-items: stretch; background: var(--color-white); border: 1px solid var(--color-sub); border-radius: 5px; overflow: hidden; }
.rs-ex__card-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; background: var(--color-main); color: var(--color-accent); font-family: var(--font-en); font-weight: 400; font-size: 30px; line-height: 1; }
.rs-ex__card-div { display: none; }
.rs-ex__card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 12px 0; }
.rs-ex__card-label { width: 100%; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--color-text); padding: 0 10px 8px; }
.rs-ex__card-val { width: 100%; font-family: var(--font-ja); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--color-black); padding: 8px 10px 0; border-top: 1px solid var(--color-main); }
.rs-ex__unit { font-weight: 400; font-size: 13px; }
.rs-ex__card--total { justify-content: center; background: var(--color-main); border-color: var(--color-main); }
.rs-ex__card--total .rs-ex__card-body { flex: 0 1 auto; }
.rs-ex__card--total .rs-ex__card-label { color: var(--color-white); }
.rs-ex__card--total .rs-ex__card-val { color: var(--color-accent); font-size: 24px; border-top: none; }
/* 注記 */
.rs-note { margin-top: 24px; padding: 0; list-style: none; }
.rs-note__item { position: relative; padding-left: 1.4em; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.rs-note__item::before { content: "※"; position: absolute; left: 0; top: 0; }
@media (max-width: 896px) {
.rs-fee { grid-template-columns: repeat(2, 1fr); }
.rs-formula__label, .rs-ex__spot { font-size: 16px; }
}
@media (max-width: 568px) {
.rs-price__ttl { font-size: 20px; }
.rs-fee { grid-template-columns: 1fr; }
.rs-formula__item { padding: 8px 16px; gap: 10px; }
.rs-fee__rows { margin: 16px 20px 24px; }
.rs-ex__inner { padding: 16px 16px 24px; }
.rs-ex__flow { flex-direction: column; align-items: stretch; width: 100%; }
.rs-ex__spot { text-align: center; }
.rs-ex__conn { width: auto; min-height: 32px; }
.rs-ex__conn::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.rs-ex__card { flex: 1 1 100%; }
}
/* =============================================================
[news] お知らせ一覧ページ（mp-blog-index）
プレフィックス: news-
============================================================= */
/* Shopify base.css の `div:empty { display:none }`(詳細度0,1,1) が空要素の .lower-kv__overlay を消すため、
同等以上の詳細度(.lower-kv .lower-kv__overlay = 0,2,0)で表示を復帰させる。 */
.lower-kv .lower-kv__overlay { display: block; }
/* ---- お知らせ一覧本体 ---- */
.news-list { padding: 60px 0 100px; }
.news-list__head { margin-bottom: 40px; }
/* 3列カードグリッド（列間30px=Figma実測 / .news-card は流用） */
.news-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 30px; }
/* カード画像は一覧幅に合わせて比率固定（Figma実測 474.33 : 258.09 ≒ 474/258）。merged.css の固定 height:185px を上書き */
.news-list__grid .news-card__img { height: auto; aspect-ratio: 474 / 258; }
.news-list__empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--color-taupe); }
/* ---- ページャー ---- */
.news-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 60px; }
.news-pager[hidden] { display: none; }
.news-pager__list { display: flex; align-items: center; gap: 6px; list-style: none; }
.news-pager__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-family: var(--font-en); font-size: 15px; color: var(--color-text); text-decoration: none; }
.news-pager__num.is-current { background: var(--color-main); color: var(--color-white); }
.news-pager__gap { pointer-events: none; }
@media (hover: hover) { .news-pager__num:not(.is-current):hover { color: var(--color-main); } }
/* 矢印（画像不使用・CSSシェブロン）。矢印リンクは中身が空のため base.css の `a:empty{display:none}`(0,1,1) に負けないよう .news-pager 付き(0,2,0)で表示指定 */
.news-pager .news-pager__arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.news-pager__arrow::before { content: ''; width: 8px; height: 8px; border-top: 2px solid var(--color-main); border-right: 2px solid var(--color-main); }
.news-pager__arrow--prev::before { transform: rotate(-135deg); margin-left: 3px; }
.news-pager__arrow--next::before { transform: rotate(45deg); margin-right: 3px; }
.news-pager__arrow.is-disabled { opacity: 0.3; pointer-events: none; }
/* ---- お知らせ一覧 レスポンシブ（SPデザイン確定前の暫定: タブレット2列 / モバイル1列） ---- */
@media (max-width: 896px) {
.news-list { padding: 40px 0 80px; }
.news-list__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media (max-width: 568px) {
.news-list__grid { grid-template-columns: 1fr; gap: 30px; }
.news-pager { margin-top: 40px; }
}
/* ---- コラム一覧（タイトル行リスト。969px中央カラム / 行=タイトル＋右矢印＋区切り線） ---- */
.column-index { max-width: 969px; margin: 0 auto; }
.column-list { list-style: none; }
.column-list__item { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #666666; font-family: var(--font-ja); font-size: 16px; line-height: 1.7; color: var(--color-main); text-decoration: none; }
.column-list li:first-child .column-list__item { border-top: 1px solid #666666; }
.column-list__ttl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-list__item::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-top: 2px solid var(--color-main); border-right: 2px solid var(--color-main); transform: rotate(45deg); }
@media (hover: hover) { .column-list__item:hover .column-list__ttl { opacity: 0.7; } }
@media (max-width: 896px) { .column-index { max-width: none; } }
/* ---- お知らせ詳細（記事ページ / 本文=postContents） ---- */
.news-detail { padding: 60px 0 100px; }
.news-detail__inner { display: flex; align-items: flex-start; gap: 72px; }
.news-detail__main { flex: 1 1 auto; min-width: 0; max-width: 1028px; }
.news-side { flex: 0 0 360px; position: sticky; top: 20px; align-self: flex-start; }
.news-detail__title { font-family: var(--font-serif); font-weight: 500; font-size: 36px; line-height: 1.7; color: var(--color-text); margin-bottom: 20px; }
.news-detail__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; padding-top: 20px; border-top: 1px solid var(--color-main); }
.news-detail__date { font-family: var(--font-en); font-size: 16px; font-weight: 700; color: var(--color-text); }
/* インライン カテゴリピル（.news-card__cat は絶対配置のため一覧用。詳細/サイドバーは別途インライン用を新設） */
.news-pill { display: inline-flex; align-items: center; background: var(--color-main); color: var(--color-white); font-family: var(--font-ja); font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; }
.news-pill--accent { background: var(--color-accent); color: var(--color-main); }
/* 記事本文（Shopify RTE をそのまま出力）。見出しは他の下層ページと同じ言語に揃える
（h2 = .sec-title__ja + .sec-title__line 相当 / h3 = .guide-block__title 相当の navy 左バー） */
.postContents { font-family: var(--font-ja); font-size: 16px; line-height: 1.9; color: var(--color-text); }
.postContents > * + * { margin-top: 24px; }
/* h2: 明朝（.sec-title__ja 相当）+ 全幅の下線（左端 30px を yellow、残りを navy） */
.postContents h2 { font-family: var(--font-serif); font-weight: 400; font-size: 30px; line-height: 1.5; letter-spacing: 1.5px; color: var(--color-text); }
.postContents > h2 { margin-top: 50px; }
.postContents h2::after { content: ''; display: block; width: 100%; height: 1px; margin-top: 16px; background: linear-gradient(to right, var(--color-accent) 0 30px, var(--color-main) 30px); }
/* h3: navy の左バー + 太字（.guide-block__title 相当） */
.postContents h3 { font-family: var(--font-ja); font-weight: 700; font-size: 22px; line-height: 1.5; color: var(--color-main); padding: 2px 0 4px 16px; border-left: 4px solid var(--color-main); }
.postContents > h3 { margin-top: 48px; }
/* h4 */
.postContents h4 { font-family: var(--font-ja); font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--color-text); }
.postContents > h4 { margin-top: 32px; }
/* 見出し直後は詰める（h2+h3 が連続する場合もこの規則が後勝ちで効く） */
.postContents h2 + * { margin-top: 20px; }
.postContents h3 + *,
.postContents h4 + * { margin-top: 16px; }
/* RTE が見出し内に入れる strong/b は見出し自身の太さを使う */
.postContents h2 strong, .postContents h2 b,
.postContents h3 strong, .postContents h3 b,
.postContents h4 strong, .postContents h4 b { font-weight: inherit; }
/* リンク。RTE が a / 配下の span に付けるインライン color（エディタ既定の青）が残るため、
サイト共通のリンク色に揃える目的で !important で打ち消す */
.postContents a { color: var(--color-main) !important; text-decoration: underline; text-underline-offset: 3px; }
.postContents a span { color: inherit !important; }
@media (hover: hover) { .postContents a:hover { opacity: 0.7; } }
/* 本文中の CTA（リンクのみで構成された段落。クラス付与は mp-article-news.liquid の JS）。
merged.css の .btn-outline は暗背景向けの白線・白文字のため、.postContents 内に限定して
メインカラーの線ボタンに読み替える（merged.css 側は無変更・他ページの .btn-outline に影響なし） */
.postContents .postContents__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.postContents .postContents__cta br { display: none; }
.postContents a.btn-outline { border-color: var(--color-main); color: var(--color-main) !important; text-decoration: none; }
@media (hover: hover) {
.postContents a.btn-outline:hover { background: var(--color-main); color: var(--color-white) !important; opacity: 1; }
}
/* グローバルの `ol, ul { list-style: none }` を .postContents 内でのみ解除（本文リストのマーカーを復帰） */
.postContents ol { padding-left: 1.5em; list-style-position: outside; list-style-type: decimal; }
.postContents ol ol { list-style-type: lower-latin; }
.postContents li { list-style: inherit; }
.postContents li::marker { color: var(--color-main); }
.postContents li + li { margin-top: 8px; }
.postContents li > ul,
.postContents li > ol { margin-top: 8px; }
/* ul（既定の disc レベル）はメインカラーの枠で囲み、マーカーをチェックマークに置き換える。
チェックは画像を使わず、既存のページャー矢印と同じく border の回転で描画する */
.postContents ul { list-style: none; padding: 24px 30px; background: var(--color-white); border: 1px solid var(--color-main); border-radius: 5px; }
.postContents ul li { font-weight: 700; }
.postContents ul > li { list-style: none; position: relative; padding-left: 30px; }
.postContents ul > li::before { content: ''; position: absolute; left: 6px; top: 0.35em; width: 6px; height: 12px; border-right: 2px solid var(--color-main); border-bottom: 2px solid var(--color-main); transform: rotate(45deg); }
/* 入れ子の ul は枠を重ねず、circle マーカーに戻す */
.postContents li ul { padding: 8px 0 0 1.5em; background: transparent; border: 0; border-radius: 0; list-style: circle outside; }
.postContents li ul > li { padding-left: 0; list-style: inherit; }
.postContents li ul > li::before { content: none; }
.postContents img { display: block; }
.postContents p img { margin-top: 20px; }
.postContents strong, .postContents b { font-weight: 700; }
/* RTE の空段落（
/
）はブロック間余白と二重になるため非表示。
子孫に br を持つだけの段落まで消さないよう、直接の子（> ）に限定して判定する */
.postContents p:has(> br:only-child),
.postContents p:has(> b:only-child > br:only-child) { display: none; }
.news-detail__back { margin-top: 60px; text-align: right; }
/* サイドバー */
.news-side__block + .news-side__block { margin-top: 60px; }
.news-side .sec-title__ja { font-size: 22px; }
.news-side .sec-title__en { color: var(--color-main); font-size: 14px; }
.news-side__head { margin-bottom: 20px; }
.news-side__list { list-style: none; }
.news-side__item { padding: 20px 0; border-bottom: 1px solid #666666; }
.news-side__item:first-child { padding-top: 0; }
.news-side__link { display: block; text-decoration: none; }
.news-side__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.news-side__date { font-family: var(--font-en); font-size: 14px; font-weight: 700; color: var(--color-text); }
.news-side__ttl { display: block; font-size: 15px; line-height: 1.7; color: var(--color-text); }
@media (hover: hover) { .news-side__link:hover .news-side__ttl { color: var(--color-main); } }
/* カテゴリー一覧 */
.news-cat-list { list-style: none; }
.news-cat-list__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 0; border-bottom: 1px solid #666666; font-size: 16px; line-height: 1.5; color: var(--color-text); text-decoration: none; }
.news-cat-list li:first-child .news-cat-list__link { border-top: 1px solid #666666; }
.news-cat-list__link::after { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-top: 2px solid var(--color-main); border-right: 2px solid var(--color-main); transform: rotate(45deg); }
@media (hover: hover) { .news-cat-list__link:hover { color: var(--color-main); } }
/* ---- お知らせ詳細 レスポンシブ（SPデザイン確定前の暫定: 1カラム化） ---- */
@media (max-width: 896px) {
.news-detail { padding: 40px 0 80px; }
.news-detail__inner { flex-direction: column; gap: 60px; }
.news-detail__main { max-width: none; }
.news-side { flex: 1 1 auto; width: 100%; position: static; }
.news-detail__title { font-size: 28px; }
.postContents > h2 { margin-top: 56px; }
.postContents h2 { font-size: 26px; }
.postContents > h3 { margin-top: 40px; }
.postContents h3 { font-size: 20px; }
}
@media (max-width: 568px) {
.postContents > h2 { margin-top: 48px; }
.postContents h2 { font-size: 22px; letter-spacing: 1px; }
.postContents h3 { font-size: 18px; padding-left: 12px; border-left-width: 3px; }
.postContents h4 { font-size: 16px; }
.postContents a.btn-outline { width: 100%; justify-content: center; white-space: normal; text-align: center; padding: 14px 20px; }
}
/* =============================================================
[product] 商品詳細ページ（mp-product）
プレフィックス: pd-
============================================================= */
/* 型式認定申請中の告知（GIBBON / BABOON のみ。出力条件は sections/mp-product.liquid 側）。
規格アイコン .detail-gallery__features--spec の直下に置く */
.pd-cert-notice { display: inline-block; background: var(--color-main); color: var(--color-white); font-family: var(--font-ja); font-weight: 700; font-size: 16px; line-height: 1.5; letter-spacing: 0.5px; padding: 10px 20px; border-radius: 5px; margin-bottom: 30px; }
@media (max-width: 568px) {
.pd-cert-notice { font-size: 14px; padding: 8px 16px; margin-bottom: 20px; }
}
/* 防犯登録モーダルのリンク行。merged.css の .guide-modal-more-wrap は margin-top:30px だが、
#bouhanModal では注記 .guide-modal-note の直下にリンクを置くため余白を詰める。
同クラスは #insuranceModal（保険）でも使われているので、ID でスコープを限定し
保険側の 30px は維持する。使用箇所はこの2モーダルのみ（調査済み）。 */
#bouhanModal .guide-modal-more-wrap { margin-top: 10px; }
/* 購入CTA（カートに追加 / 予約購入）: アクセント黄 + ネイビー二重線。
・merged.css では両方ネイビー塗り（#273240）で周囲のネイビー要素に埋もれ、
かつカートと予約の区別が付かなかったため、アクセント色へ変更する。
・二重線は 外1px（border）/ 間3px / 内1px を inset box-shadow で構成。
border-style:double は指定幅を3等分し 1px 単位で制御できないため不採用。
・間の色は背景と同色である必要がある。背景を変える際は inset も必ず揃えること。
・アイコンは黄地で視認できないため mp-img-cmn-icon_cart_nv.svg（ネイビー版）へ差し替え済み。
画面下の追従バー（.mp-sticky-cart__btn）はネイビー塗りのままなので黄アイコンを維持する。 */
.detail-buy__cart,
.detail-buy__cart--reserve { background: var(--color-accent); color: var(--color-main); border: 1px solid var(--color-main); box-shadow: inset 0 0 0 3px var(--color-accent), inset 0 0 0 4px var(--color-main); }
/* merged.css の .detail-buy__cart--reserve:hover はネイビー塗りに戻すため打ち消し、
ホバーは既存の opacity 方式に揃える */
/* 無効状態は merged.css が !important でグレーにするため、二重線のみ消して平坦に戻す */
/* 無効状態: merged.css が背景 #999 / 文字 #fff を !important で指定している。
背景のグレーはそのままに、文字とアイコンだけネイビーへ変更する。
（!important 同士は詳細度が同じなら後勝ち。本ファイルは merged.css の後に読み込まれる） */
.detail-buy__cart[disabled],
.detail-buy__cart.is-disabled { box-shadow: none; color: var(--color-main) !important; }
.detail-buy__cart[disabled] .detail-buy__cart-text,
.detail-buy__cart.is-disabled .detail-buy__cart-text { color: var(--color-main); }
/* 画面下追従バーのカートボタンも同じ意匠に統一。
mp-product.css が body.page-detail 付きで指定しているため詳細度を合わせる。 */
body.page-detail .mp-sticky-cart__btn { background: var(--color-accent); color: var(--color-main); border: 1px solid var(--color-main); box-shadow: inset 0 0 0 3px var(--color-accent), inset 0 0 0 4px var(--color-main); }
/* --- 複製した購入CTA（スペック下 / 追従バー）のレイアウト ------------------
.detail-buy__cart は width:100% / margin-top:1rem を持つため、
横並びの spec-actions と追従バーでは幅と余白を打ち消す。 */
.mp-cta { width: auto; margin-top: 0; }
/* スペック下: 既存の .spec-actions__btn（min-width:227px）に合わせ、高さも他ボタンと揃える */
body.page-detail .mp-cta--spec { min-height: 50px; padding: 0 24px; font-size: 16px; }
/* 追従バー: 既存ボタンと同じ字送り・パディング。2つ並ぶので間隔を確保 */
body.page-detail .mp-cta--sticky { min-height: 0; padding: 12px 28px; font-size: 15px; }
body.page-detail .mp-sticky-cart__inner .mp-cta--sticky + .mp-cta--sticky { margin-left: 10px; }
@media (max-width: 768px) {
body.page-detail .mp-cta--spec { width: 100%; }
}
@media (max-width: 568px) {
/* merged.css / mp-product.css の SP 指定 `body.page-detail .detail-buy__cart { width:100% }` が
.mp-cta の width:auto より詳細度が高く、追従バーのボタンが全幅になって商品名・価格欄が幅0に潰れ、
価格がボタンに重なっていた。.mp-sticky-cart__inner を足して詳細度で上回り、ボタン幅を内容幅へ戻す。 */
body.page-detail .mp-sticky-cart__inner .mp-cta--sticky { width: auto; }
body.page-detail .mp-sticky-cart__price { white-space: nowrap; }
body.page-detail .mp-cta--sticky { padding: 11px 14px; font-size: 14px; }
body.page-detail .mp-sticky-cart__inner .mp-cta--sticky + .mp-cta--sticky { margin-left: 6px; }
}
/* --- 購入CTA ホバー: ネイビーが内側から満ちる反転演出 -------------------
inset box-shadow の spread をアニメーションさせ、内側のネイビー線が広がって
面を満たすように見せる。黄の 3px リングは残すので二重線の意匠は保たれる。
merged.css / mp-product.css 側の hover（opacity 0.85 / 0.9、reserve のネイビー塗り）
を打ち消すため、背景色と opacity も明示する。 */
.detail-buy__cart,
.detail-buy__cart--reserve,
body.page-detail .mp-sticky-cart__btn { transition: box-shadow .3s, color .3s; }
.detail-buy__cart:hover,
.detail-buy__cart--reserve:hover,
body.page-detail .mp-sticky-cart__btn:hover { background: var(--color-accent); color: var(--color-accent); opacity: 1; box-shadow: inset 0 0 0 3px var(--color-accent), inset 0 0 0 120px var(--color-main); }
/* merged.css 22155 に `.detail-buy__cart--reserve .detail-buy__cart-text { color: #fff }` があり、
内側の span を直接狙うためボタン側の color 指定では勝てない。同じ詳細度で打ち消す。 */
.detail-buy__cart--reserve .detail-buy__cart-text { color: var(--color-main); transition: color .3s; }
.detail-buy__cart--reserve:hover .detail-buy__cart-text { color: var(--color-accent); }
/* アイコンの色替え: SVG をマスクとして扱い background-color で着色する。
1ファイルで黄/ネイビーを切り替えられ、色もトランジションできる。
url() は本CSSからの相対指定。CSS と SVG は同じ assets/ から配信されるため解決する。
マスク非対応環境では単なる塗り矩形になってしまうため @supports で保護し、
非対応時は元の ![]()
表示（ネイビー固定）のまま残す。 */
@supports ((-webkit-mask-image: url('mp-img-cmn-icon_cart_nv.svg')) or (mask-image: url('mp-img-cmn-icon_cart_nv.svg'))) {
.detail-buy__cart-icon,
body.page-detail .mp-sticky-cart__btn-icon { aspect-ratio: 32 / 34; background-color: var(--color-main); transition: background-color .3s; -webkit-mask: url('mp-img-cmn-icon_cart_nv.svg') center / contain no-repeat; mask: url('mp-img-cmn-icon_cart_nv.svg') center / contain no-repeat; }
.detail-buy__cart-icon img,
body.page-detail .mp-sticky-cart__btn-icon img { display: none; }
.detail-buy__cart:hover .detail-buy__cart-icon,
body.page-detail .mp-sticky-cart__btn:hover .mp-sticky-cart__btn-icon { background-color: var(--color-accent); }
/* 予約購入はカレンダーアイコンに差し替える。mask の位置/サイズ/繰り返しは
上の .detail-buy__cart-icon の shorthand 指定を引き継ぎ、画像だけ上書きする。 */
.detail-buy__cart-icon--reserve { -webkit-mask-image: url('mp-img-cmn-icon_calendar_nv.svg'); mask-image: url('mp-img-cmn-icon_calendar_nv.svg'); }
}
/* =============================================================
[about] E-BIKEとは？（/pages/about）
プレフィックス: about-
・KV / パンくず / 共通コンテンツ帯は merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（新規定義なし）
============================================================= */
.about-main { background: var(--color-white); }
/* ---- KV ----
Figma 1981:22744 + 1981:21675（タイトル塊155pxをKV400pxの下端から60px上）。
配置・行間・ウェイトは [common] 節で全ページ共通化済みのため、about 固有の指定は無し。 */
/* ---- about_ebike01 : 自転車であって、バイクではない！（Figma 1993:39480） ----
左テキスト列 711 / gap 60 / 右ビジュアル列 726。flex-grow を Figma の実寸比にして可変幅でも比率を保つ。 */
.about-e01 { padding: 90px 0 50px; } /* Figmaのセクション上余白100px − .breadcrumb の下padding10px（[common]で14px→10pxに確定） */
.about-e01__inner { display: flex; align-items: flex-start; gap: 60px; }
.about-e01__col--txt { flex: 711 1 0; min-width: 0; }
.about-e01__col--img { flex: 726 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; position: sticky; top: 120px; } /* 固定ヘッダー分を top で逃がす */
.about-e01__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 40px; line-height: 1.7; letter-spacing: 1px; color: var(--color-text); }
.about-e01__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); margin-top: 20px; }
.about-e01__card { background: rgba(255, 255, 255, 0.8); border: 1px solid var(--color-main); border-radius: 3px; padding-bottom: 20px; margin-top: 20px; }
.about-e01__card-h { display: flex; align-items: flex-end; gap: 20px; }
.about-e01__num { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-main); border-radius: 3px 0 3px 0; font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1; color: var(--color-white); }
.about-e01__card-ttl { font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--color-main); }
.about-e01__card-body { margin-top: 10px; padding: 0 30px 0 60px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-main); }
.about-e01__card-body-h { font-weight: 600; }
.about-e01__list { list-style: decimal; padding-left: 24px; }
.about-e01__badge { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; background: var(--color-main); border-radius: 5px; padding: 10px 30px; color: var(--color-white); text-align: center; }
.about-e01__badge-row { display: flex; align-items: center; justify-content: center; gap: 15px; }
.about-e01__badge-en { font-family: var(--font-en); font-weight: 700; font-size: 36px; line-height: 1; }
.about-e01__eq { font-family: var(--font-en); font-weight: 700; font-size: 34px; line-height: 1; }
.about-e01__badge-ja { font-family: var(--font-ja); font-weight: 700; font-size: 30px; line-height: 1.5; }
.about-e01__badge-sub { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.5; }
@media (max-width: 1200px) {
.about-e01__inner { gap: 40px; }
.about-e01__ttl { font-size: 32px; }
.about-e01__badge { padding: 10px 20px; }
.about-e01__badge-row { gap: 10px; }
.about-e01__badge-en { font-size: 26px; }
.about-e01__eq { font-size: 24px; }
.about-e01__badge-ja { font-size: 20px; }
.about-e01__badge-sub { font-size: 16px; }
}
@media (max-width: 1100px) { .about-e01__col--img { top: 150px; } } /* #header 140px */
@media (max-width: 980px) { .about-e01__col--img { top: 110px; } } /* #header 100px */
@media (max-width: 896px) {
.about-e01 { padding: 60px 0 40px; }
.about-e01__inner { display: block; }
.about-e01__col--img { position: static; margin-top: 40px; }
.about-e01__lead br { display: none; }
.about-e01__ttl { font-size: 28px; }
}
@media (max-width: 568px) {
.about-e01 { padding: 40px 0 30px; }
.about-e01__ttl { font-size: 24px; line-height: 1.5; }
.about-e01__lead { font-size: 14px; }
.about-e01__card-h { gap: 12px; }
.about-e01__card-ttl { font-size: 16px; }
.about-e01__card-body { font-size: 14px; padding: 0 15px 0 20px; }
.about-e01__badge-en { font-size: 22px; }
.about-e01__eq { font-size: 20px; }
.about-e01__badge-ja { font-size: 18px; }
.about-e01__badge-sub { font-size: 14px; }
}
/* ---- about_ebike02 : 違法E-BIKEの根絶に向けて（Figma 1999:42752） ----
ボタンは既存 .btn-outline / .btn-arrow をそのまま流用（Figma「ボタンB」と枠線1px・角丸5px・padding15/30・gap10・16pxBold が一致）。 */
.about-e02 { padding-bottom: 100px; }
.about-e02__box { position: relative; background: var(--color-white); border: 3px solid #CC0000; padding: 40px 40px 30px 50px; }
.about-e02__corner { position: absolute; top: 11px; left: 10px; width: 0; height: 0; border-top: 40px solid #CC0000; border-right: 40px solid transparent; } /* Figma Rectangle370（左上の赤い直角三角形） */
.about-e02__head { display: flex; align-items: center; gap: 20px; }
.about-e02__head-main { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.about-e02__icon { width: 60px; flex-shrink: 0; }
.about-e02__head-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.7; color: var(--color-text); }
.about-e02__head-txt { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.about-e02__head-txt strong { font-weight: 700; }
.about-e02__blocks { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.about-e02__block { background: var(--color-main); padding: 30px 40px; }
.about-e02__block-inr { display: flex; align-items: flex-start; gap: 20px; }
.about-e02__label { flex-shrink: 0; font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; color: var(--color-accent); }
.about-e02__label--w270 { flex: 0 0 270px; }
.about-e02__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.about-e02__txt { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-white); }
@media (max-width: 1200px) {
.about-e02__head { flex-wrap: wrap; }
.about-e02__head-ttl { font-size: 22px; }
.about-e02__label--w270 { flex: 0 0 220px; }
}
@media (max-width: 896px) {
.about-e02 { padding-bottom: 60px; }
.about-e02__box { padding: 30px 20px 25px 25px; }
.about-e02__corner { top: 8px; left: 8px; border-top-width: 28px; border-right-width: 28px; }
.about-e02__head-main { gap: 15px; }
.about-e02__icon { width: 44px; }
.about-e02__head-ttl { font-size: 20px; }
.about-e02__blocks { margin-top: 25px; }
.about-e02__block { padding: 25px 20px; }
.about-e02__block-inr { display: block; }
.about-e02__label--w270 { flex: none; }
.about-e02__body { margin-top: 15px; }
}
@media (max-width: 568px) {
.about-e02 { padding-bottom: 40px; }
.about-e02__box { padding: 25px 15px 20px 20px; }
.about-e02__head-main { gap: 12px; }
.about-e02__icon { width: 36px; }
.about-e02__head-ttl { font-size: 18px; }
.about-e02__head-txt { font-size: 14px; }
.about-e02__block { padding: 20px 15px; }
.about-e02__label { font-size: 17px; }
.about-e02__txt { font-size: 14px; }
}
/* ---- about_ebike03 : 「楽をする道具」から「楽しむための相棒」へ（Figma 1999:42754） ----
見出しは既存 .sec-title（__ja / __line-navy / __line-yellow / __en）をそのまま流用（Figma「明朝体タイトル」と一致）。
左テキスト804 / gap60 / 右画像617。比較表は罫線 --color-sub、ヘッダー --color-main + --color-accent。 */
.about-e03 { padding-bottom: 100px; }
.about-e03__inner { display: flex; align-items: stretch; gap: 60px; }
.about-e03__col--txt { flex: 804 1 0; min-width: 0; }
.about-e03__img { flex: 617 1 0; min-width: 0; overflow: hidden; }
.about-e03__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.about-e03__table { width: 100%; margin-top: 30px; border-collapse: collapse; table-layout: fixed; }
.about-e03__table tr > *:first-child { width: 25%; } /* Figma 200/800 */
.about-e03__table th, .about-e03__table td { text-align: center; vertical-align: middle; font-family: var(--font-ja); font-size: 18px; line-height: 1.7; } /* merged.css のリセットが th,td を vertical-align:baseline に固定しているため上書き（Figmaは上下中央） */
.about-e03__table thead th { position: relative; height: 50px; background: var(--color-main); color: var(--color-accent); font-weight: 600; font-size: 20px; line-height: 1.5; }
.about-e03__table thead th + th::before { content: ""; position: absolute; top: 10px; left: 0; width: 1px; height: 30px; background: var(--color-accent); } /* Figma Vector53（ヘッダー間の黄色い縦罫） */
.about-e03__table tbody th { height: 71px; font-weight: 700; color: var(--color-black); }
.about-e03__table tbody td { height: 71px; font-weight: 400; color: var(--color-text); }
.about-e03__table tbody > tr > * { border-bottom: 1px solid var(--color-sub); }
.about-e03__table tbody > tr:first-child > * { border-top: 1px solid var(--color-sub); }
.about-e03__table tbody > tr > * + * { border-left: 1px solid var(--color-sub); }
@media (max-width: 1200px) {
.about-e03__inner { gap: 40px; }
.about-e03__table th, .about-e03__table td { font-size: 16px; }
.about-e03__table thead th { font-size: 18px; }
}
@media (max-width: 896px) {
.about-e03 { padding-bottom: 60px; }
.about-e03__inner { display: block; }
.about-e03__img { margin-top: 40px; }
.about-e03__lead { margin-top: 25px; }
.about-e03__table { margin-top: 25px; }
}
@media (max-width: 568px) {
.about-e03 { padding-bottom: 40px; }
.about-e03__lead { font-size: 14px; }
.about-e03__table th, .about-e03__table td { font-size: 14px; }
.about-e03__table thead th { height: 44px; font-size: 15px; }
.about-e03__table tbody th, .about-e03__table tbody td { height: auto; padding: 12px 6px; }
}
/* ---- about_ebike04 : 「移動」を、心躍る「体験」へ（Figma 1999:44209） ----
見出しは既存 .sec-title、カード内ラベルの罫線は既存 .sec-title__line（navy30 + yellow10）を流用。
カードは Figma 481×316 ×3、gap20、画像の上に rgba(0,0,0,0.5) のオーバーレイ。 */
.about-e04 { padding-bottom: 100px; }
.about-e04__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.about-e04__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.about-e04__cards { display: flex; gap: 20px; margin-top: 30px; }
.about-e04__card { position: relative; flex: 1 1 0; min-width: 0; min-height: 316px; display: flex; padding: 30px 40px; overflow: hidden; }
.about-e04__card-img { position: absolute; inset: 0; z-index: 0; }
.about-e04__card-img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } /* Figma Rectangle368 */
.about-e04__card-inr { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; color: var(--color-white); }
.about-e04__label { display: flex; align-items: center; gap: 10px; }
.about-e04__num, .about-e04__en { font-family: var(--font-en); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--color-white); }
.about-e04__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.7; }
.about-e04__sub { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; }
@media (max-width: 1300px) {
.about-e04__head { display: block; }
.about-e04__lead { margin-top: 20px; }
.about-e04__card { padding: 30px; }
.about-e04__sub { font-size: 16px; }
}
@media (max-width: 896px) {
.about-e04 { padding-bottom: 60px; }
.about-e04__lead br { display: none; }
.about-e04__cards { display: block; margin-top: 25px; }
.about-e04__card { min-height: 240px; }
.about-e04__card + .about-e04__card { margin-top: 20px; }
}
@media (max-width: 568px) {
.about-e04 { padding-bottom: 40px; }
.about-e04__lead { font-size: 14px; }
.about-e04__card { min-height: 220px; padding: 25px 20px; }
.about-e04__num, .about-e04__en { font-size: 17px; }
.about-e04__ttl { font-size: 18px; }
.about-e04__sub { font-size: 14px; }
}
/* ---- about_ebike05 : 世界から厳選した、歴史と技術あるブランド（Figma 1999:42916） ----
見出しは既存 .sec-title を流用。メーカーロゴは既存アセット（明背景用の暗色版）を使用し、
アスペクト比が資産ごとに異なるため height 指定 + width:auto で高さを Figma に合わせる。 */
.about-e05 { padding-bottom: 100px; }
.about-e05__lead { margin-top: 30px; max-width: 968px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.about-e05__brands { display: flex; align-items: flex-start; gap: 60px; margin-top: 58px; }
.about-e05__brand { flex: 1 1 0; min-width: 0; }
.about-e05__logos { display: flex; align-items: center; gap: 14px; }
.about-e05__logoset { display: flex; align-items: center; gap: 20px; }
.about-e05__logo { width: auto; flex-shrink: 0; }
.about-e05__logo--italmoto { height: 50px; } /* Figma 50.576 */
.about-e05__logo--aperyder { height: 53px; } /* Figma 53 */
.about-e05__logo--rks { height: 33px; } /* Figma 32.874 */
.about-e05__brandjp { font-family: var(--font-ja); font-weight: 700; font-size: 16px; line-height: 1.7; color: var(--color-text); white-space: nowrap; }
.about-e05__div { align-self: stretch; width: 1px; flex-shrink: 0; background: var(--color-main); } /* Figma Vector57 */
.about-e05__txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.about-e05__imgs { display: flex; align-items: flex-start; margin-top: 20px; } /* Figma は画像2枚が隙間なし */
.about-e05__img { flex: 1 1 0; min-width: 0; aspect-ratio: 356 / 177; overflow: hidden; }
@media (max-width: 1300px) {
.about-e05__brands { gap: 40px; }
.about-e05__logos { gap: 10px; }
.about-e05__logoset { gap: 12px; }
.about-e05__logo--italmoto { height: 40px; }
.about-e05__logo--aperyder { height: 42px; }
.about-e05__logo--rks { height: 26px; }
.about-e05__brandjp { font-size: 14px; }
}
@media (max-width: 896px) {
.about-e05 { padding-bottom: 60px; }
.about-e05__lead { margin-top: 25px; }
.about-e05__lead br { display: none; }
.about-e05__brands { display: block; margin-top: 40px; }
.about-e05__brand + .about-e05__brand { margin-top: 40px; }
.about-e05__logo--italmoto { height: 46px; }
.about-e05__logo--aperyder { height: 48px; }
.about-e05__logo--rks { height: 30px; }
.about-e05__brandjp { font-size: 15px; }
}
@media (max-width: 568px) {
.about-e05 { padding-bottom: 40px; }
.about-e05__lead { font-size: 14px; }
.about-e05__logos { flex-wrap: wrap; gap: 10px 12px; }
.about-e05__div { display: none; }
.about-e05__logoset { gap: 10px; }
.about-e05__logo--italmoto { height: 36px; }
.about-e05__logo--aperyder { height: 38px; }
.about-e05__logo--rks { height: 24px; }
.about-e05__brandjp { font-size: 13px; }
.about-e05__txt { font-size: 14px; margin-top: 15px; }
.about-e05__imgs { margin-top: 15px; }
}
/* ---- about_ebike06 : 電動自転車を日本で安心して楽しむために（Figma 1999:44489） ----
見出しは既存 .sec-title、CTAボタンは既存 .btn-solid + 黄色矢印 mp-cmn-icon_arrow_btn.svg を流用
（Figma「ボタンA」と 背景/枠 --color-main・角丸5px・padding15/30・gap10・16pxBold が一致）。 */
.about-e06 { padding-bottom: 100px; }
.about-e06__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.about-e06__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.about-e06__cards { display: flex; align-items: stretch; gap: 2px; margin-top: 30px; }
.about-e06__card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.about-e06__card-img { width: 100%; aspect-ratio: 400 / 200; overflow: hidden; }
.about-e06__card-body { flex: 1 1 auto; background: var(--color-white); padding: 30px 40px; color: var(--color-text); }
.about-e06__card-ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; }
.about-e06__card-txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; }
.about-e06__cta { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 30px; }
.about-e06__cta-txt { font-family: var(--font-ja); font-weight: 600; font-size: 24px; line-height: 1.7; color: var(--color-black); }
@media (max-width: 1300px) {
.about-e06__head { display: block; }
.about-e06__lead { margin-top: 20px; }
.about-e06__card-body { padding: 25px 25px; }
.about-e06__cta-txt { font-size: 20px; }
}
@media (max-width: 896px) {
.about-e06 { padding-bottom: 60px; }
.about-e06__lead br { display: none; }
.about-e06__cards { display: block; margin-top: 25px; }
.about-e06__card + .about-e06__card { margin-top: 20px; }
.about-e06__cta { display: block; text-align: center; margin-top: 30px; }
.about-e06__cta .btn-solid { margin: 20px auto 0; }
.about-e06__cta-txt { font-size: 18px; }
}
@media (max-width: 568px) {
.about-e06 { padding-bottom: 40px; }
.about-e06__lead { font-size: 14px; }
.about-e06__card-body { padding: 20px; }
.about-e06__card-ttl { font-size: 18px; }
.about-e06__cta-txt { font-size: 16px; text-align: left; }
}
/* =============================================================
[associations] E-BIKEに関係する検査・認証機関および関連協会（/pages/associations）
プレフィックス: assoc-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
============================================================= */
.associations-main { background: var(--color-white); }
/* =============================================================
[authorities] E-BIKEに関する主な関連省庁および法令（/pages/authorities）
プレフィックス: auth-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
============================================================= */
.authorities-main { background: var(--color-white); }
/* ---- authorities02 : 主な関連省庁および法令（Figma 2245:22534） ----
見出しは既存 .sec-title を流用。711px × 2列の折り返しグリッド（gap 60px、上揃え）。
各法令は［アイコン + 法令名］＋［縦罫 + 箇条書き］の2段構成。 */
.auth-a02 { padding-bottom: 100px; }
.auth-a02__grid { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 60px; }
.auth-a02__item { flex: 0 1 calc((100% - 60px) / 2); min-width: 0; }
.auth-a02__laws { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.auth-a02__law { display: flex; flex-direction: column; gap: 10px; }
.auth-a02__lawttl { display: flex; align-items: flex-start; gap: 15px; }
.auth-a02__lawicon { width: 27px; flex-shrink: 0; margin-top: 4px; }
.auth-a02__lawname { font-family: var(--font-ja); font-weight: 700; font-size: 20px; letter-spacing: 1px; line-height: 1.5; color: var(--color-text); }
.auth-a02__lawbody { display: flex; align-items: center; gap: 28px; padding: 0 14px; }
.auth-a02__rule { align-self: stretch; width: 1px; flex-shrink: 0; background: var(--color-black); }
.auth-a02__list { flex: 1 1 0; min-width: 0; list-style: disc; padding-left: 21px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-black); }
.auth-a02__list > li + li { margin-top: 10px; }
@media (max-width: 1300px) {
.auth-a02__grid { gap: 40px; }
.auth-a02__item { flex-basis: calc((100% - 40px) / 2); }
.auth-a02__lawname { font-size: 18px; }
.auth-a02__lawbody { gap: 20px; padding: 0 10px; }
}
@media (max-width: 896px) {
.auth-a02 { padding-bottom: 60px; }
.auth-a02__grid { display: block; }
.auth-a02__item + .auth-a02__item { margin-top: 40px; }
.auth-a02__laws { margin-top: 25px; }
}
@media (max-width: 568px) {
.auth-a02 { padding-bottom: 40px; }
.auth-a02__item + .auth-a02__item { margin-top: 30px; }
.auth-a02__laws { margin-top: 20px; }
.auth-a02__lawttl { gap: 10px; }
.auth-a02__lawicon { width: 22px; }
.auth-a02__lawname { font-size: 17px; }
.auth-a02__lawbody { gap: 15px; padding: 0 4px; }
.auth-a02__list { padding-left: 18px; }
}
/* =============================================================
[license] E-BIKEに関する資格について（/pages/license）
プレフィックス: lic-
・KV / パンくず / license01（.lower-intro） / license02（.lower-cards） / 共通コンテンツ帯 は
すべて [common] 節の共通コンポーネントを流用（ページ固有指定なし）
============================================================= */
.license-main { background: var(--color-white); }
/* =============================================================
[brand-concept] ブランドコンセプト（/pages/brand-concept）
プレフィックス: bc-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
============================================================= */
.brand-concept-main { background: var(--color-white); }
/* ---- brand-concept01 : 移動を、“着こなす”時代へ（Figma 1859:39362） ----
フルブリード（.container を使わない）。上段＝ネイビーパネル631 + 動画1091（gap 7px）、
下段＝カード3枚（572/573/572・gap 6px）。段間 6px。
パンくず直下からの余白 Figma 10px は .breadcrumb の下padding 10px で足りるため margin は持たせない。 */
.bc-c01__top { display: flex; align-items: stretch; gap: 7px; }
.bc-c01__panel { flex: 631 1 0; min-width: 0; background: var(--color-main); padding: 60px 50px; display: flex; flex-direction: column; gap: 30px; }
.bc-c01__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 40px; letter-spacing: 1px; line-height: 1.5; color: var(--color-accent); }
.bc-c01__body { display: flex; flex-direction: column; gap: 20px; color: var(--color-white); }
.bc-c01__lead { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; }
.bc-c01__small { font-size: 14px; }
.bc-c01__txt { font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; }
.bc-c01__movie { flex: 1091 1 0; min-width: 0; position: relative; background: var(--color-black); }
.bc-c01__movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* ---- 動画ファサード（サムネイル → クリックで iframe 生成） ---- */
.bc-c01__movie-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; display: block; overflow: hidden; }
.bc-c01__movie-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease, opacity 0.3s ease; }
/* 再生ボタン: 円 + 三角（CSSのみ。アセット追加なし） */
.bc-c01__movie-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: rgba(39, 50, 64, 0.8); border: 2px solid rgba(255, 255, 255, 0.9); display: block; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.bc-c01__movie-play::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); width: 0; height: 0; border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent var(--color-white); transition: border-left-color 0.3s ease; }
.bc-c01__movie-label { position: absolute; left: 50%; top: calc(50% + 68px); transform: translateX(-50%); font-family: var(--font-en); font-weight: 500; font-size: 14px; letter-spacing: 1px; line-height: 1; color: var(--color-white); white-space: nowrap; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
@media (hover: hover) {
.bc-c01__movie-btn:hover .bc-c01__movie-thumb { transform: scale(1.03); opacity: 0.85; }
.bc-c01__movie-btn:hover .bc-c01__movie-play { background: var(--color-accent); border-color: var(--color-accent); transform: translate(-50%, -50%) scale(1.08); }
.bc-c01__movie-btn:hover .bc-c01__movie-play::before { border-left-color: var(--color-main); }
}
.bc-c01__movie-btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.bc-c01__cards { display: flex; align-items: stretch; gap: 6px; margin-top: 6px; }
.bc-c01__card { flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 572 / 382; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 50px 30px; overflow: hidden; }
.bc-c01__card-img { position: absolute; inset: 0; z-index: 0; }
.bc-c01__card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--color-black)); } /* Figma Rectangle268 */
.bc-c01__card-inr { position: relative; z-index: 1; color: var(--color-white); }
.bc-c01__card-en { font-family: var(--font-en); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--color-accent); }
.bc-c01__card-ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.7; }
.bc-c01__card-txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; }
/* 動画は 16:9、パネルはテキスト量で高さが決まるため、設計幅 1728px を下回るほどパネルが高くなる。
段階的に文字を詰めて、動画のレターボックス量を抑える。 */
@media (max-width: 1700px) {
.bc-c01__panel { padding: 50px 45px; gap: 28px; }
.bc-c01__ttl { font-size: 36px; }
.bc-c01__lead { font-size: 18px; }
.bc-c01__txt { font-size: 17px; }
}
@media (max-width: 1540px) {
.bc-c01__panel { padding: 40px 40px; gap: 25px; }
.bc-c01__ttl { font-size: 32px; }
.bc-c01__lead { font-size: 17px; }
.bc-c01__small { font-size: 13px; }
.bc-c01__txt { font-size: 15px; }
.bc-c01__card { padding: 0 40px 25px; }
.bc-c01__card-txt { font-size: 16px; }
}
@media (max-width: 1200px) {
.bc-c01__panel { padding: 35px 30px; gap: 20px; }
.bc-c01__ttl { font-size: 26px; }
.bc-c01__lead { font-size: 15px; }
.bc-c01__txt { font-size: 13px; }
.bc-c01__card { padding: 0 25px 20px; }
.bc-c01__card-en, .bc-c01__card-ttl { font-size: 17px; }
.bc-c01__card-txt { font-size: 14px; margin-top: 6px; }
}
@media (max-width: 896px) {
.bc-c01__movie-play { width: 72px; height: 72px; }
.bc-c01__movie-play::before { border-width: 12px 0 12px 20px; }
.bc-c01__movie-label { top: calc(50% + 54px); font-size: 13px; }
.bc-c01__top { display: block; }
.bc-c01__panel { padding: 40px var(--container-pad); }
.bc-c01__ttl { font-size: 28px; }
.bc-c01__lead { font-size: 17px; }
.bc-c01__txt { font-size: 15px; }
.bc-c01__lead br, .bc-c01__txt br { display: none; }
.bc-c01__movie { margin-top: 6px; aspect-ratio: 16 / 9; }
.bc-c01__cards { display: block; margin-top: 6px; }
.bc-c01__card { aspect-ratio: 16 / 9; padding: 0 var(--container-pad) 25px; }
.bc-c01__card + .bc-c01__card { margin-top: 6px; }
}
@media (max-width: 568px) {
.bc-c01__movie-play { width: 60px; height: 60px; }
.bc-c01__movie-play::before { border-width: 10px 0 10px 17px; }
.bc-c01__movie-label { top: calc(50% + 46px); font-size: 12px; }
.bc-c01__ttl { font-size: 22px; }
.bc-c01__lead { font-size: 15px; }
.bc-c01__txt { font-size: 14px; }
.bc-c01__card { aspect-ratio: 3 / 2; padding: 0 var(--container-pad) 20px; }
.bc-c01__card-en, .bc-c01__card-ttl { font-size: 17px; }
.bc-c01__card-txt { font-size: 14px; }
}
/* ---- brand-concept02 : MOBIPARKとは（Figma 1859:40023） ----
左カラム765（見出し+本文 / gap60 / 縦書きカード3枚）+ gap60 + 右画像657。
カードは黒地に画像を opacity .25 で重ね、見出しを縦書き（writing-mode）で配置する。 */
.bc-c02 { padding-top: 100px; }
.bc-c02__inner { display: flex; align-items: center; gap: 60px; }
.bc-c02__col { flex: 765 1 0; min-width: 0; display: flex; flex-direction: column; gap: 60px; }
.bc-c02__img { flex: 657 1 0; min-width: 0; align-self: stretch; overflow: hidden; }
.bc-c02__body { margin-top: 30px; display: flex; flex-direction: column; gap: 20px; color: var(--color-text); }
.bc-c02__lead { font-family: var(--font-serif); font-weight: 500; font-size: 30px; letter-spacing: 0.75px; line-height: 1.7; }
.bc-c02__txt { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; }
.bc-c02__cards { display: flex; align-items: stretch; }
.bc-c02__card { flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 255 / 425; background: var(--color-black); display: flex; flex-direction: column; align-items: center; padding: 30px 30px 20px; overflow: hidden; }
.bc-c02__card-img { position: absolute; inset: 0; z-index: 0; opacity: 0.25; } /* Figma: 画像を黒地に25%で重ねる */
/* 縦書き見出しは列の折り返し（2列・3列化）を禁止。カードは flex アイテムなので
min-height:auto が効き、文字が入りきらない幅ではカード自身が縦に伸びる。 */
.bc-c02__card-ttl { position: relative; z-index: 1; writing-mode: vertical-rl; white-space: nowrap; font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.2; color: var(--color-white); }
/* 説明文は
の位置でのみ改行させ、幅による中途半端な折り返しを起こさせない。
改行位置は Figma のレンダリング（3行）どおりにマークアップ側で固定済み。 */
.bc-c02__card-txt { position: relative; z-index: 1; margin-top: auto; white-space: nowrap; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--color-white); text-align: center; }
/* 折り返し禁止にしたため、カード内で文字が収まる幅に合わせて段階的に縮める。 */
@media (max-width: 1540px) {
.bc-c02__inner { gap: 40px; }
.bc-c02__lead { font-size: 26px; }
.bc-c02__card { padding: 26px 22px 18px; }
.bc-c02__card-txt { font-size: 16px; }
}
@media (max-width: 1300px) {
.bc-c02__lead { font-size: 24px; }
.bc-c02__txt { font-size: 15px; }
.bc-c02__card { padding: 22px 16px 16px; }
.bc-c02__card-ttl { font-size: 18px; }
.bc-c02__card-txt { font-size: 14px; }
}
/* 1200px 以下は左右2カラムをやめて縦積みにする。
3列のままだとカード幅が全体の約18%まで痩せ、折り返し禁止の文字が入らなくなるため。 */
@media (max-width: 1200px) {
.bc-c02__inner { display: block; }
.bc-c02__col { gap: 40px; }
.bc-c02__img { margin-top: 40px; aspect-ratio: 657 / 500; }
.bc-c02__card { padding: 26px 20px 18px; }
.bc-c02__card-ttl { font-size: 20px; }
.bc-c02__card-txt { font-size: 16px; }
}
@media (max-width: 896px) {
.bc-c02 { padding-top: 60px; }
.bc-c02__body { margin-top: 25px; }
.bc-c02__lead { font-size: 22px; }
.bc-c02__lead br, .bc-c02__txt br { display: none; }
.bc-c02__txt { font-size: 15px; }
.bc-c02__card-ttl { font-size: 18px; }
.bc-c02__card-txt { font-size: 15px; }
}
/* スマホ幅では3列だとカード幅が110px程度になり折り返し禁止の文字が溢れるため、1列に積む。
アスペクト比の固定も外し、高さは中身（縦書き見出し + 説明文）に追従させる。 */
@media (max-width: 568px) {
.bc-c02 { padding-top: 40px; }
.bc-c02__lead { font-size: 19px; }
.bc-c02__txt { font-size: 14px; }
.bc-c02__cards { display: block; }
.bc-c02__card { aspect-ratio: auto; min-height: 200px; padding: 24px 20px 20px; }
/* 1列積みになったら縦書きを解除して横書きに戻す（縦長のカードにならないようにする） */
.bc-c02__card-ttl { writing-mode: horizontal-tb; font-size: 18px; line-height: 1.5; }
.bc-c02__card-txt { font-size: 14px; }
.bc-c02__img { margin-top: 30px; }
}
/* ---- brand-concept03 : スクロールで重なる3パネル（Figma 1910:33080） ----
Figma は 1728×1117 のパネルを3枚を隙間なく縦に並べた構成。
Web では position:sticky で各パネルを画面上端に貼り付け、後続パネルが前面に覆いかぶさる
スクロールスタックとして実装する（パネルは不透明背景なので下のパネルを隠せる）。
重なり順は DOM 順（後の要素が前面）でそのまま成立するため z-index は不要。 */
.bc-c03 { margin-top: 100px; }
.bc-c03__panel { position: sticky; top: 0; min-height: 100vh; background: var(--color-bg-yellow); display: flex; align-items: center; gap: 80px; padding-right: 80px; overflow: hidden; }
.bc-c03__img { flex: 948 1 0; min-width: 0; align-self: stretch; }
.bc-c03__body { flex: 620 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.bc-c03__main { display: flex; flex-direction: column; gap: 20px; color: var(--color-text); }
.bc-c03__h3 { font-family: var(--font-serif); font-weight: 500; font-size: 30px; line-height: 1.7; }
.bc-c03__lead { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; }
.bc-c03__txt { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; }
.bc-c03__list { display: flex; flex-direction: column; gap: 20px; color: var(--color-text); }
.bc-c03__list-item { display: flex; flex-direction: column; gap: 10px; }
.bc-c03__list-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; }
.bc-c03__list-txt { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; }
.bc-c03__btns { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.bc-c03__btn { width: 315px; justify-content: center; } /* Figma のボタン幅 315px に揃える */
@media (max-width: 1300px) {
.bc-c03__panel { gap: 40px; padding-right: 40px; }
.bc-c03__h3 { font-size: 24px; }
.bc-c03__lead, .bc-c03__list-ttl { font-size: 18px; }
.bc-c03__txt, .bc-c03__list-txt { font-size: 15px; }
.bc-c03__btn { width: 280px; }
}
/* SPはスクロールスタックを解除し、素直に縦積みにする（sticky の重なりは狭幅で扱いにくいため） */
@media (max-width: 896px) {
.bc-c03 { margin-top: 60px; }
.bc-c03__panel { position: static; min-height: 0; display: block; padding: 0 0 50px; }
.bc-c03__img { aspect-ratio: 948 / 700; }
.bc-c03__body { margin-top: 30px; padding: 0 var(--container-pad); }
.bc-c03__btns { align-items: stretch; }
.bc-c03__btn { width: 100%; }
}
@media (max-width: 568px) {
.bc-c03 { margin-top: 40px; }
.bc-c03__panel { padding-bottom: 40px; }
.bc-c03__h3 { font-size: 20px; }
.bc-c03__lead, .bc-c03__list-ttl { font-size: 17px; }
.bc-c03__txt, .bc-c03__list-txt { font-size: 14px; }
}
}
/* =============================================================
[our-commitment] 私たちのこだわり（/pages/our-commitment）
プレフィックス: oc-
・KV / パンくず / 取扱ブランド帯（.brand-find）/ 共通コンテンツ帯は
[common] 節と merged.css の共通コンポーネントを流用（ページ固有指定なし）
============================================================= */
.our-commitment-main { background: var(--color-white); }
/* ---- our-commitment01 : 「正しさ」を、最高に自由なスタイルへ。（Figma 1859:41586） ----
フルブリードの写真の上に、.container 左端（=Figma x=123）からテキストを重ねる。
パンくず直下の余白 10px は .breadcrumb の下padding で足りるため margin は持たせない。 */
.oc-c01 { position: relative; aspect-ratio: 1729 / 673; overflow: hidden; }
.oc-c01__img { position: absolute; inset: 0; z-index: 0; }
.oc-c01 > .container { position: relative; z-index: 1; }
.oc-c01__body { max-width: 790px; padding-top: 90px; }
/* 文字色が濃色（--color-text）のため、cover のトリミング位置によって被写体の暗部が
文字の背後に来ると可読性が落ちる。白いハロー（にじみ）で背景から浮かせる。
明るい石畳の上ではほぼ視認されず、暗部に重なったときだけ効く。 */
.oc-c01__ttl,
.oc-c01__txt { text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 16px rgba(255, 255, 255, 0.9), 0 0 32px rgba(255, 255, 255, 0.8); }
.oc-c01__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 40px; letter-spacing: 1px; line-height: 1.7; color: var(--color-text); }
.oc-c01__txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
@media (max-width: 1300px) {
.oc-c01__body { padding-top: 60px; }
.oc-c01__ttl { font-size: 30px; }
.oc-c01__txt { font-size: 15px; }
}
/* SPは写真の上に重ねると、cover のトリミングで暗部が文字に重なる恐れがあるため、
写真とテキストを上下に分けて可読性を確保する。 */
@media (max-width: 896px) {
.oc-c01 { aspect-ratio: auto; display: flex; flex-direction: column; }
.oc-c01__img { position: static; aspect-ratio: 1729 / 673; }
.oc-c01__body { max-width: none; padding-top: 30px; padding-bottom: 10px; }
/* SPは写真の下（白背景）に置くため、ハローは不要 */
.oc-c01__ttl,
.oc-c01__txt { text-shadow: none; }
.oc-c01__ttl { font-size: 26px; }
.oc-c01__txt br { display: none; }
}
@media (max-width: 568px) {
.oc-c01__img { aspect-ratio: 4 / 3; }
.oc-c01__ttl { font-size: 22px; line-height: 1.5; }
.oc-c01__txt { font-size: 14px; margin-top: 15px; }
}
/* ---- our-commitment02 : MOBIPARKが選ばれる理由（Figma 1859:41584） ----
カード本体は [common] の .photo-cards（product-policy03 と共通）。ここは見出し行とカード群の位置のみ。 */
.oc-c02 { padding-top: 100px; }
.oc-c02__head { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.oc-c02__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.oc-c02__cards { margin-top: 30px; }
@media (max-width: 1300px) {
.oc-c02__head { display: block; }
.oc-c02__lead { margin-top: 20px; }
}
@media (max-width: 1024px) {
.oc-c02 { padding-top: 60px; }
.oc-c02__lead br { display: none; }
.oc-c02__cards { margin-top: 25px; }
}
@media (max-width: 568px) {
.oc-c02 { padding-top: 40px; }
.oc-c02__lead { font-size: 14px; }
}
/* ---- our-commitment03 : 法規適合へのこだわり（Figma 1859:41587） ----
ページ地色（#F3F0EA）に対して白の帯。アイコンは既存の
mp-img-cmn-modal-icon_*.svg（/pages/icons・トップのモーダルと同一）を流用する。 */
.oc-c03 { margin-top: 100px; padding: 60px 0; background: var(--color-white); }
.oc-c03__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.oc-c03__points { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 20px; }
.oc-c03__point { display: flex; align-items: center; gap: 15px; font-family: var(--font-ja); font-weight: 400; font-size: 20px; line-height: 1.7; color: var(--color-text); }
.oc-c03__point-ico { flex: none; width: 27px; }
.oc-c03__sub { margin-top: 30px; font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; color: var(--color-text); }
.oc-c03__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 20px; } /* 1482 = 474×3 + 30×2 */
.oc-c03__card { display: flex; align-items: flex-start; gap: 20px; }
.oc-c03__card-ico { flex: none; width: 80px; }
.oc-c03__card-body { min-width: 0; }
.oc-c03__card-ttl { font-family: var(--font-ja); font-weight: 600; font-size: 18px; letter-spacing: 0.45px; line-height: 1.5; color: var(--color-black); }
.oc-c03__card-txt { margin-top: 5px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
.oc-c03__note { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.5; text-align: center; color: var(--color-text); }
.oc-c03__btns { display: flex; justify-content: center; margin-top: 20px; }
@media (max-width: 1300px) {
.oc-c03__lead br { display: none; }
.oc-c03__point { font-size: 18px; }
.oc-c03__cards { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 896px) {
.oc-c03 { margin-top: 60px; padding: 50px 0; }
.oc-c03__lead { margin-top: 25px; }
.oc-c03__point { font-size: 16px; gap: 10px; }
.oc-c03__point-ico { width: 22px; }
.oc-c03__cards { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 568px) {
.oc-c03 { margin-top: 40px; padding: 40px 0; }
.oc-c03__lead { font-size: 14px; }
.oc-c03__points { gap: 10px 20px; }
.oc-c03__point { font-size: 15px; }
.oc-c03__sub { font-size: 18px; }
.oc-c03__card { gap: 15px; }
.oc-c03__card-ico { width: 60px; }
.oc-c03__card-ttl { font-size: 16px; }
.oc-c03__note { margin-top: 25px; font-size: 12px; text-align: left; }
.oc-c03__btns .btn-solid { white-space: normal; text-align: center; } /* ラベルが長く、狭幅では nowrap のままだと溢れるため */
}
/* ---- our-commitment04 : MOBIPARK製品の独自確認工程（Figma 1917:39783） ----
STEP カード4枚（363×373・gap10）。カード下端の区切り線は container の外寸 1602px 幅。
03（白帯）との間隔は Figma 上 0px のため、この節の padding-top がそのまま境界の余白になる。 */
.oc-c04 { padding-top: 100px; }
.oc-c04__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.oc-c04__lead { width: 711px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.oc-c04__cards { display: flex; align-items: stretch; gap: 10px; margin-top: 28px; }
.oc-c04__card { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; border-radius: 3px; overflow: hidden; }
.oc-c04__card-img { aspect-ratio: 363 / 242; }
.oc-c04__card-body { flex: 1 1 auto; padding: 20px 30px; background: var(--color-white); color: var(--color-main); }
.oc-c04__card-ttl { font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.5; }
.oc-c04__card-txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; }
.oc-c04__step { position: absolute; left: 0; top: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 3px 0 3px 0; background: var(--color-main); font-family: var(--font-en); font-weight: 400; color: var(--color-white); }
.oc-c04__step-en { font-size: 12px; line-height: 1; }
.oc-c04__step-num { font-size: 24px; line-height: 1; }
.oc-c04__btns { display: flex; justify-content: center; margin-top: 30px; }
.oc-c04__hr { display: block; width: 100%; max-width: 1602px; height: 1px; margin: 100px auto 0; background: var(--color-sub); } /* Figma Vector 38（container 外寸と同じ 1602px） */
@media (max-width: 1300px) {
.oc-c04__head { display: block; }
.oc-c04__lead { width: auto; margin-top: 20px; }
.oc-c04__lead br { display: none; }
.oc-c04__card-body { padding: 20px; }
.oc-c04__card-txt { font-size: 15px; }
}
@media (max-width: 1024px) {
.oc-c04 { padding-top: 60px; }
.oc-c04__cards { flex-wrap: wrap; }
.oc-c04__card { flex: 0 0 calc((100% - 10px) / 2); } /* 4枚 → 2×2 */
.oc-c04__hr { margin-top: 60px; }
}
@media (max-width: 568px) {
.oc-c04 { padding-top: 40px; }
.oc-c04__lead { font-size: 14px; }
.oc-c04__cards { display: block; margin-top: 25px; }
.oc-c04__card { width: 100%; }
.oc-c04__card + .oc-c04__card { margin-top: 10px; }
.oc-c04__card-txt { font-size: 14px; }
.oc-c04__btns .btn-solid { white-space: normal; text-align: center; }
.oc-c04__hr { margin-top: 40px; }
}
/* ---- our-commitment05 : 購入後も安心を（Figma 1917:40088） ----
左カラム 394px ＋ gap 60px ＋ 右カード群 1028px（504×169 を 2×2・gap 20px）。
下段は「MOBIPARKをもっと知る」＋縦罫線＋ボタン3つの横並び。 */
.oc-c05 { padding-top: 100px; }
.oc-c05__inner { display: flex; align-items: flex-end; gap: 60px; }
.oc-c05__col { flex: 0 0 394px; }
.oc-c05__ttl { margin-top: 30px; font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; color: var(--color-text); }
.oc-c05__txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.oc-c05__btns { margin-top: 20px; }
.oc-c05__cards { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.oc-c05__card { flex: 0 0 calc((100% - 20px) / 2); min-width: 0; min-height: 169px; display: flex; align-items: stretch; border-radius: 3px; overflow: hidden; }
.oc-c05__card-img { flex: 0 0 126px; } /* 504 = 126 + 378。高さはカード（最低169px）に追従し .objFit でトリミング */
.oc-c05__card-body { flex: 1 1 auto; min-width: 0; padding: 20px 30px 20px 20px; background: var(--color-white); color: var(--color-black); }
.oc-c05__card-ttl { font-family: var(--font-ja); font-weight: 600; font-size: 20px; line-height: 1.7; }
.oc-c05__card-txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; }
.oc-c05__more { margin-top: 60px; } /* 行の中身は [common] の .more-links */
@media (max-width: 1300px) {
.oc-c05__inner { display: block; }
.oc-c05__cards { margin-top: 40px; }
.oc-c05__card-body { padding: 20px; }
.oc-c05__card-ttl { font-size: 18px; }
.oc-c05__card-txt { font-size: 15px; }
}
@media (max-width: 896px) {
.oc-c05 { padding-top: 60px; }
.oc-c05__txt br { display: none; }
.oc-c05__cards { gap: 10px; margin-top: 30px; }
.oc-c05__card { flex: 0 0 100%; min-height: 148px; }
.oc-c05__card-img { flex-basis: 110px; }
.oc-c05__more { margin-top: 40px; }
}
@media (max-width: 568px) {
.oc-c05 { padding-top: 40px; }
.oc-c05__ttl { font-size: 18px; }
.oc-c05__txt { font-size: 14px; }
.oc-c05__ttl br { display: none; }
.oc-c05__card { min-height: 120px; }
.oc-c05__card-img { flex-basis: 90px; }
.oc-c05__card-ttl { font-size: 16px; }
.oc-c05__card-txt { font-size: 14px; }
.oc-c05__btns .btn-solid { white-space: normal; text-align: center; }
}
/* =============================================================
[product-policy] プロダクトポリシー（prefix: pp-）
============================================================= */
/* ---- product-policy01 : 法規に則した「アシスト率規定値設定車」（Figma 2246:25486） ----
左テキスト 968px ＋ gap 60px ＋ 右画像 454px（= 1482）。幅比を flex-grow で保持する。 */
.pp-p01 { padding-top: 100px; }
.pp-p01__inner { display: flex; align-items: center; gap: 60px; margin-top: 30px; }
.pp-p01__col { flex: 968 1 0; min-width: 0; }
.pp-p01__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 30px; letter-spacing: 0.75px; line-height: 1.7; color: var(--color-text); }
.pp-p01__txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.pp-p01__txt p + p { margin-top: 0; } /* Figma は段落間マージンなし（mb-0）で1つの文章塊として組まれている */
.pp-p01__img { flex: 454 1 0; min-width: 0; aspect-ratio: 454 / 422; }
@media (max-width: 1300px) {
.pp-p01__inner { gap: 40px; }
.pp-p01__ttl { font-size: 26px; }
}
@media (max-width: 1024px) {
.pp-p01 { padding-top: 60px; }
.pp-p01__inner { display: block; }
.pp-p01__img { width: 100%; max-width: 454px; margin: 30px auto 0; }
}
@media (max-width: 568px) {
.pp-p01 { padding-top: 40px; }
.pp-p01__inner { margin-top: 25px; }
.pp-p01__ttl { font-size: 22px; }
.pp-p01__txt { font-size: 14px; }
}
/* ---- product-policy02 : モビリティ業界の当たり前をE-BIKEにも（Figma 2246:25488） ----
上段=白カード4枚（348px・gap 30/25）、下段=白カード2枚（726px・gap 30）。
チェックリストは「チェック丸 + 縦の連結線」で、線は項目の残り高さいっぱいに伸びる。 */
.pp-p02 { padding-top: 60px; } /* Figma: 01 との間隔 60px */
.pp-p02__lead-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.7; color: var(--color-text); }
.pp-p02__lead-txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--color-text); }
.pp-p02__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px 30px; margin-top: 30px; }
.pp-p02__wides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.pp-p02__card, .pp-p02__wide { padding: 30px; border-radius: 5px; background: var(--color-white); }
.pp-p02__card { display: flex; flex-direction: column; gap: 20px; }
.pp-p02__wide { display: flex; align-items: flex-start; gap: 15px; }
.pp-p02__head { display: flex; align-items: center; gap: 15px; }
.pp-p02__ico { flex: none; width: 60px; }
.pp-p02__head-txt { display: flex; flex-direction: column; font-family: var(--font-ja); font-weight: 700; color: var(--color-text); }
.pp-p02__head-sub { font-size: 16px; line-height: 1.5; }
.pp-p02__head-ttl { font-size: 24px; letter-spacing: 4.8px; line-height: 1.5; }
.pp-p02__wide-head { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pp-p02__wide-head--narrow { width: 160px; }
.pp-p02__logo { display: block; width: 210px; }
.pp-p02__list { display: flex; flex-direction: column; gap: 10px; }
.pp-p02__wide .pp-p02__list { flex: 1 1 0; min-width: 0; }
.pp-p02__item-img { flex: none; width: 81px; aspect-ratio: 81 / 114; } /* Figma は画像が項目の高さを決める（81×114 / 81×109）ため比率を固定する */
@media (max-width: 1450px) { /* 4列のままだと1枚あたり270px前後まで細って本文が縦に伸びるため2列へ */
.pp-p02__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-p02__head-ttl { font-size: 22px; letter-spacing: 3px; }
}
@media (max-width: 896px) {
.pp-p02 { padding-top: 40px; }
.pp-p02__lead-ttl { font-size: 20px; }
.pp-p02__lead-txt { font-size: 16px; }
.pp-p02__cards, .pp-p02__wides { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pp-p02__card, .pp-p02__wide { padding: 25px 20px; }
}
@media (max-width: 568px) {
.pp-p02__lead-ttl { font-size: 18px; }
.pp-p02__lead-txt { font-size: 14px; }
.pp-p02__wide { display: block; }
.pp-p02__wide-head, .pp-p02__wide-head--narrow { width: auto; align-items: flex-start; margin-bottom: 20px; }
.pp-p02__ico { width: 50px; }
.pp-p02__head-sub { font-size: 14px; }
.pp-p02__head-ttl { font-size: 20px; letter-spacing: 2px; }
.pp-p02__item-img { width: 70px; }
}
/* ---- product-policy03 : 私たちが届けたいE-BIKE（Figma 1918:41076） ----
カード本体は [common] の .photo-cards（our-commitment02 と共通）。
セクション下端の区切り線は container の外寸 1602px 幅（product-policy04 との境界）。 */
.pp-p03 { padding-top: 100px; }
.pp-p03__head { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.pp-p03__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.pp-p03__cards { margin-top: 37px; }
.pp-p03__hr { display: block; width: 100%; max-width: 1602px; height: 1px; margin: 100px auto 0; background: var(--color-sub); } /* Figma Vector 38 */
@media (max-width: 1300px) {
.pp-p03__head { display: block; }
.pp-p03__lead { margin-top: 20px; }
}
@media (max-width: 1024px) {
.pp-p03 { padding-top: 60px; }
.pp-p03__lead br { display: none; }
.pp-p03__cards { margin-top: 30px; }
.pp-p03__hr { margin-top: 60px; }
}
@media (max-width: 568px) {
.pp-p03 { padding-top: 40px; }
.pp-p03__lead { font-size: 14px; }
.pp-p03__cards { margin-top: 25px; }
.pp-p03__hr { margin-top: 40px; }
}
/* ---- product-policy04 : デザインと安心の両立（Figma 1919:41130） ----
左テキスト 454px ＋ gap 62px ＋ 右に写真3枚（322×460）を隙間なく並べた帯（966px）= 1482。
左カラムは見出しを上、本文を下に振り分け（Figma のタイトル→本文 150px は 460px 高の余りそのもの）。 */
.pp-p04 { padding-top: 100px; }
.pp-p04__inner { display: flex; align-items: stretch; gap: 62px; }
.pp-p04__col { flex: 454 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.pp-p04__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; color: var(--color-text); }
.pp-p04__txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.pp-p04__imgs { flex: 966 1 0; min-width: 0; display: flex; align-items: center; }
.pp-p04__img { flex: 1 1 0; min-width: 0; aspect-ratio: 322 / 460; } /* 3枚を隙間なく並べる（Figma も gap 0） */
.pp-p04__hr { display: block; width: 100%; max-width: 1602px; height: 1px; margin: 100px auto 0; background: var(--color-sub); } /* Figma Vector 38 */
@media (max-width: 1300px) {
.pp-p04__inner { gap: 40px; }
}
@media (max-width: 1024px) {
.pp-p04 { padding-top: 60px; }
.pp-p04__inner { display: block; }
.pp-p04__col { display: block; }
.pp-p04__body { margin-top: 30px; }
.pp-p04__imgs { margin-top: 30px; }
.pp-p04__hr { margin-top: 60px; }
}
@media (max-width: 568px) {
.pp-p04 { padding-top: 40px; }
.pp-p04__txt br { display: none; }
.pp-p04__ttl { font-size: 18px; }
.pp-p04__txt { font-size: 14px; }
.pp-p04__hr { margin-top: 40px; }
}
/* ---- product-policy05 : E-BIKE選びの4つの視点（Figma 1920:20517） ----
731×355 のカード 2×2（gap 20）。カードは 左:写真257px ＋ 右:白ボックス474px の横並びで、
白ボックスは「番号 + 罫線 + EN」を上、「見出し + 本文」を下に振り分ける（justify-content: space-between）。
番号横の罫線は sec-title の .sec-title__line（ネイビー30px + イエロー10px）をそのまま流用。 */
.pp-p05 { padding-top: 100px; }
.pp-p05__cards { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; }
.pp-p05__card { flex: 0 0 calc((100% - 20px) / 2); min-width: 0; display: flex; align-items: stretch; }
.pp-p05__img { flex: 0 0 35.16%; min-width: 0; aspect-ratio: 257 / 355; } /* 731 = 257 + 474 → 257/731 = 35.16%。aspect-ratio と padding 持ちの兄弟が同居すると flex-grow 比では解決値がずれるため % 固定にする */
.pp-p05__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 30px 40px; background: var(--color-white); }
.pp-p05__label { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-weight: 500; font-size: 20px; line-height: 1.5; color: var(--color-main); }
.pp-p05__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.7; color: var(--color-text); }
.pp-p05__txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; color: var(--color-text); }
@media (max-width: 1450px) {
.pp-p05__body { padding: 25px 30px; }
.pp-p05__txt { font-size: 16px; }
}
@media (max-width: 1024px) {
.pp-p05 { padding-top: 60px; }
.pp-p05__cards { gap: 10px; margin-top: 25px; }
.pp-p05__card { flex: 0 0 100%; }
.pp-p05__txt br { display: none; }
}
@media (max-width: 568px) {
.pp-p05 { padding-top: 40px; }
.pp-p05__card { display: block; }
.pp-p05__img { width: 100%; flex: none; aspect-ratio: 16 / 10; }
.pp-p05__body { gap: 20px; padding: 20px; }
.pp-p05__label { font-size: 18px; }
.pp-p05__ttl { font-size: 18px; }
.pp-p05__txt { font-size: 14px; }
}
/* ---- product-policy06 : 新しい移動体験との出会い（Figma 1920:20520） ----
全幅の写真帯（1728×750）に黒40%のオーバーレイ。左 123px（container の内寸開始位置）に寄せ、
上ブロックと下ブロックを上下端へ振り分ける。EN の下敷きバーは Figma の Rectangle 260（151×8・ネイビー）。 */
.pp-p06 { position: relative; margin-top: 100px; aspect-ratio: 1728 / 750; overflow: hidden; }
.pp-p06__img { position: absolute; inset: 0; z-index: 0; }
.pp-p06__inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 70px 60px 70px 123px; background: rgba(0, 0, 0, 0.4); }
.pp-p06__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 40px; letter-spacing: 1px; line-height: 1.5; color: var(--color-white); }
.pp-p06__en { display: inline-block; font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--color-accent); }
.pp-p06__en-txt { position: relative; display: inline-block; }
.pp-p06__en-txt::before { content: ""; position: absolute; left: 0; top: 15px; width: 151px; height: 8px; background: var(--color-main); z-index: -1; } /* Figma Rectangle 260 */
.pp-p06__lead { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: 0.9px; line-height: 1.7; color: var(--color-white); }
.pp-p06__txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-white); }
.pp-p06__more { margin-top: 20px; }
@media (max-width: 1300px) {
.pp-p06 { aspect-ratio: auto; }
.pp-p06__inner { padding: 60px 30px; gap: 60px; }
.pp-p06__ttl { font-size: 34px; }
.pp-p06__lead { font-size: 30px; }
}
@media (max-width: 896px) {
.pp-p06 { margin-top: 60px; }
.pp-p06__inner { padding: 50px 20px; gap: 50px; }
.pp-p06__ttl { font-size: 28px; }
.pp-p06__lead { font-size: 24px; }
.pp-p06__txt br { display: none; }
}
@media (max-width: 568px) {
.pp-p06 { margin-top: 40px; }
.pp-p06__inner { padding: 40px 20px; gap: 40px; }
.pp-p06__ttl { font-size: 24px; }
.pp-p06__en { font-size: 18px; }
.pp-p06__en-txt::before { width: 120px; height: 6px; top: 14px; }
.pp-p06__lead { font-size: 20px; }
.pp-p06__txt { font-size: 14px; }
}
/* =============================================================
[manufacturing-compliance] 法令適合と品質管理について（prefix: mc-）
============================================================= */
/* ---- manufacturing-compliance01 : 法令適合と品質管理への取り組み（Figma 1920:22457） ----
写真カード3枚（481×250・gap20・黒50%オーバーレイ）＋ 赤枠の注意喚起ボックス。
ボックス内は 左テキスト404 : ネイビーカード438 ×2（Figma 比率）を gap 40px で並べる。 */
.mc-c01 { padding-top: 100px; }
.mc-c01__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.mc-c01__intro { margin-top: 30px; max-width: 1091px; }
.mc-c01__intro-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.7; color: var(--color-text); }
.mc-c01__intro-txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.mc-c01__cards { display: flex; gap: 20px; margin-top: 30px; }
/* 写真＋黒50%オーバーレイのカード（manufacturing-compliance 01 / 04 で共通・481×250） */
.mc-photocard { flex: 1 1 0; min-width: 0; position: relative; aspect-ratio: 481 / 250; display: flex; flex-direction: column; padding: 30px 40px; overflow: hidden; }
.mc-photocard__img { position: absolute; inset: 0; z-index: 0; }
.mc-photocard__img::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.mc-photocard__body { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; color: var(--color-white); }
.mc-photocard__label { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-weight: 500; font-size: 20px; line-height: 1.5; }
.mc-photocard__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.7; }
.mc-photocard__txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.7; }
/* 右に証明書写真を重ねる版（04 の3枚目）。数値は Figma の 481×250 に対する比率。 */
.mc-photocard--doc .mc-photocard__body { padding-right: 40%; }
.mc-photocard__doc { position: absolute; z-index: 1; top: 4%; bottom: 4%; right: 2.1%; width: 33.7%; }
/* --doc は本文幅が写真ぶん狭いため、設計幅を下回る幅ではタイポを一段落として比率高に収める */
@media (max-width: 1600px) {
.mc-photocard--doc .mc-photocard__ttl { font-size: 18px; }
.mc-photocard--doc .mc-photocard__txt { font-size: 15px; }
}
.mc-c01__alert { position: relative; display: flex; align-items: flex-start; gap: 40px; margin-top: 44px; padding: 40px 50px 50px; border: 3px solid #c00; background: var(--color-white); }
.mc-c01__alert-corner { position: absolute; left: 7px; top: 8px; width: 40px; line-height: 0; } /* Figma Rectangle 370（枠内側の角に置く） */
.mc-c01__alert-col { flex: 1 1 0; min-width: 0; }
.mc-c01__alert-head { display: flex; align-items: center; gap: 20px; }
.mc-c01__alert-ico { flex: none; width: 60px; }
.mc-c01__alert-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.7; color: var(--color-text); }
.mc-c01__alert-txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.mc-c01__org { flex: 0 0 32%; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 30px 31px; background: var(--color-main); }
.mc-c01__org-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; text-align: center; color: var(--color-accent); }
.mc-c01__org-txt { flex: 1 1 auto; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-white); }
.mc-c01__org-btn { flex: none; }
.mc-c01__hr { display: block; width: 100%; max-width: 1602px; height: 1px; margin: 100px auto 0; background: var(--color-sub); } /* Figma Vector 38 */
@media (max-width: 1450px) { /* 3列のままだと 481:250 の比率高にテキストが収まらないため2列へ */
.mc-c01__cards { flex-wrap: wrap; }
.mc-photocard { flex: 0 0 calc((100% - 20px) / 2); }
.mc-c01__alert { flex-wrap: wrap; padding: 40px; }
.mc-c01__alert-col { flex: 0 0 100%; }
.mc-c01__org { flex: 0 0 calc((100% - 40px) / 2); }
}
@media (max-width: 896px) {
.mc-c01 { padding-top: 60px; }
.mc-c01__intro-txt br, .mc-c01__alert-txt br { display: none; }
.mc-photocard { flex: 0 0 100%; aspect-ratio: 16 / 9; padding: 25px 30px; }
.mc-c01__alert { gap: 30px; margin-top: 30px; padding: 30px; }
.mc-c01__org { flex: 0 0 100%; }
.mc-c01__hr { margin-top: 60px; }
}
@media (max-width: 568px) {
.mc-c01 { padding-top: 40px; }
.mc-c01__lead, .mc-c01__intro-txt, .mc-c01__alert-txt { font-size: 14px; }
.mc-c01__intro-ttl { font-size: 20px; }
.mc-photocard { aspect-ratio: auto; min-height: 210px; padding: 20px; }
.mc-photocard__label { font-size: 18px; }
.mc-photocard__ttl { font-size: 18px; }
.mc-photocard__txt { font-size: 14px; }
.mc-photocard--doc .mc-photocard__body { padding-right: 34%; }
.mc-photocard__doc { width: 26%; } /* 狭幅では証明書を小さくして本文の幅を確保する */
.mc-c01__alert { margin-top: 25px; padding: 25px 20px; border-width: 2px; }
.mc-c01__alert-corner { width: 30px; left: 5px; top: 5px; }
.mc-c01__alert-head { gap: 15px; }
.mc-c01__alert-ico { width: 46px; }
.mc-c01__alert-ttl { font-size: 20px; }
.mc-c01__org { padding: 25px 20px; }
.mc-c01__org-txt { font-size: 14px; }
.mc-c01__org-btn { width: 100%; justify-content: center; }
.mc-c01__hr { margin-top: 40px; }
}
/* ---- manufacturing-compliance02 : 日本基準への適合確認（Figma 1945:28192） ----
左テキスト 712px ＋ gap 60px ＋ 右画像 711px（= 1483）を下端揃えで並べる。
確認項目は、左上角に四角い番号バッジを寄せた枠付きボックス（白80%・ネイビー1px・角丸3px）。 */
.mc-c02 { padding-top: 100px; }
.mc-c02__inner { display: flex; align-items: flex-end; gap: 60px; }
.mc-c02__col { flex: 1 1 0; min-width: 0; }
.mc-c02__img { flex: 0 0 calc((100% - 60px) / 2); aspect-ratio: 711 / 547; } /* 1483 = 712 + 60 + 711 */
.mc-c02__intro { margin-top: 30px; }
.mc-c02__intro-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.7; color: var(--color-text); }
.mc-c02__intro-txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.mc-c02__list { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
/* 番号バッジ付きの枠ボックス（manufacturing-compliance 02 / 03 で共通） */
.mc-box { padding-bottom: 20px; border: 1px solid var(--color-main); border-radius: 3px; background: rgba(255, 255, 255, 0.8); }
.mc-box__head { display: flex; align-items: flex-end; gap: 20px; }
.mc-box__num { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 3px 0 3px 0; background: var(--color-main); font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1; color: var(--color-white); }
.mc-box__ttl { flex: 1 1 0; min-width: 0; padding-right: 30px; font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--color-main); }
.mc-box__txt { margin-top: 10px; padding: 0 30px 0 60px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-main); }
.mc-c02__hr { display: block; width: 100%; max-width: 1602px; height: 1px; margin: 100px auto 0; background: var(--color-sub); } /* Figma Vector 39 */
@media (max-width: 1024px) {
.mc-c02 { padding-top: 60px; }
.mc-c02__inner { display: block; }
.mc-c02__intro-txt br { display: none; }
.mc-c02__img { width: 100%; margin-top: 30px; }
.mc-c02__hr { margin-top: 60px; }
}
@media (max-width: 568px) {
.mc-c02 { padding-top: 40px; }
.mc-c02__intro { margin-top: 25px; }
.mc-c02__intro-ttl { font-size: 20px; }
.mc-c02__intro-txt { font-size: 14px; }
.mc-c02__list { gap: 15px; margin-top: 25px; }
.mc-box { padding-bottom: 15px; }
.mc-box__head { gap: 12px; }
.mc-box__num { width: 34px; height: 34px; font-size: 17px; }
.mc-box__ttl { padding-right: 15px; font-size: 16px; }
.mc-box__txt { padding: 0 15px; font-size: 14px; }
.mc-c02__hr { margin-top: 40px; }
}
/* ---- manufacturing-compliance03 : 法令適合を支える設計・製造の取り組み（Figma 1945:28195） ----
ボックスは 02 と同じ .mc-box。4枚を gap 30px で横並び（Figma は 343/343/362/343 と不揃いだが等幅で揃える）。 */
.mc-c03 { padding-top: 100px; }
.mc-c03__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.mc-c03__list { display: flex; align-items: stretch; gap: 30px; margin-top: 30px; }
.mc-c03__item { flex: 1 1 0; min-width: 0; }
.mc-c03__hr { display: block; width: 100%; max-width: 1602px; height: 1px; margin: 100px auto 0; background: var(--color-sub); } /* Figma Vector 39 */
@media (max-width: 1450px) { /* 4列のままだと本文幅が180px前後まで細るため2列へ */
.mc-c03__list { flex-wrap: wrap; gap: 20px; }
.mc-c03__item { flex: 0 0 calc((100% - 20px) / 2); } /* 4枚 → 2×2 */
}
@media (max-width: 896px) {
.mc-c03 { padding-top: 60px; }
.mc-c03__list { display: block; }
.mc-c03__item + .mc-c03__item { margin-top: 20px; }
.mc-c03__hr { margin-top: 60px; }
}
@media (max-width: 568px) {
.mc-c03 { padding-top: 40px; }
.mc-c03__lead { font-size: 14px; }
.mc-c03__list { margin-top: 25px; }
.mc-c03__item + .mc-c03__item { margin-top: 15px; }
.mc-c03__hr { margin-top: 40px; }
}
/* ---- manufacturing-compliance04 : 型式認定とアシスト性能検査（Figma 1945:28196） ----
カードは 01 と同じ .mc-photocard（3枚目のみ右に証明書写真を重ねる --doc）。
下段の導線行は [common] の .more-links（ボタンは ボタンA = .btn-solid）。 */
.mc-c04 { padding-top: 100px; }
.mc-c04__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.mc-c04__cards { display: flex; gap: 20px; margin-top: 20px; }
.mc-c04__more { margin-top: 30px; }
.mc-c04__hr { display: block; width: 100%; max-width: 1602px; height: 1px; margin: 100px auto 0; background: var(--color-sub); } /* Figma Vector 39 */
@media (max-width: 1450px) { /* 同上（.mc-photocard の2列化に合わせる） */
.mc-c04__cards { flex-wrap: wrap; }
}
@media (max-width: 896px) {
.mc-c04 { padding-top: 60px; }
.mc-c04__more { margin-top: 25px; }
.mc-c04__hr { margin-top: 60px; }
}
@media (max-width: 568px) {
.mc-c04 { padding-top: 40px; }
.mc-c04__lead { font-size: 14px; }
.mc-c04__hr { margin-top: 40px; }
}
/* =============================================================
[warranty] MOBIPARK製品の保証概要（prefix: wr-）
============================================================= */
/* ---- warranty01 : MOBIPARKが約束する品質と、安心のサポート。（Figma 2126:4964） ----
左テキスト 771px ＋ gap 60px ＋ 右画像 651px（= 1482）を上下中央で並べる。
本文は Figma と同じく段落間マージンなし。※注記のみ 14px。 */
.wr-w01 { padding-top: 100px; }
.wr-w01__inner { display: flex; align-items: center; gap: 60px; }
.wr-w01__col { flex: 1 1 0; min-width: 0; }
.wr-w01__img { flex: 0 0 calc((100% - 60px) * 0.45781); aspect-ratio: 651 / 413; } /* 651 / (771 + 651) */
.wr-w01__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: 0.9px; line-height: 1.7; color: var(--color-text); }
.wr-w01__txt { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.wr-w01__note { font-size: 14px; }
.wr-w01__link { color: inherit; text-decoration: underline; text-underline-position: from-font; }
@media (max-width: 1300px) {
.wr-w01__inner { gap: 40px; }
.wr-w01__img { flex-basis: calc((100% - 40px) * 0.45781); } /* gap 変更に合わせて 771:651 の比率を維持 */
.wr-w01__ttl { font-size: 30px; }
}
@media (max-width: 1024px) {
.wr-w01 { padding-top: 60px; }
.wr-w01__inner { display: block; }
.wr-w01__ttl br, .wr-w01__txt br { display: none; }
.wr-w01__img { width: 100%; margin-top: 30px; }
}
@media (max-width: 568px) {
.wr-w01 { padding-top: 40px; }
.wr-w01__ttl { font-size: 22px; }
.wr-w01__txt { margin-top: 25px; font-size: 14px; }
.wr-w01__note { font-size: 12px; }
}
/* ---- warranty02 : 14日間限定初期不良保証（Figma 2251:66460） ----
Figma の container-s（内寸 1225px）に本文を収める。本文は段落間マージンなしの1つの塊。 */
.wr-w02 { padding-top: 100px; }
.wr-w02__inner { max-width: 1225px; }
.wr-w02__txt { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.wr-w02__alert { font-weight: 600; font-size: 20px; color: #c00; }
.wr-w02__list { padding-left: 24px; list-style: disc; } /* Figma の list-disc（マーカー 1.5em 相当） */
@media (max-width: 896px) {
.wr-w02 { padding-top: 60px; }
.wr-w02__txt br { display: none; }
}
@media (max-width: 568px) {
.wr-w02 { padding-top: 40px; }
.wr-w02__txt { margin-top: 25px; font-size: 14px; }
.wr-w02__alert { font-size: 16px; }
.wr-w02__list { padding-left: 20px; }
}
/* ---- warranty03 : 1年間長期保証（Figma 2126:9767） ----
白カード（padding 30px・角丸5px・内部 gap 15px）を縦に並べ、3段目のみ
保証対象部品 514px : 保証対象外 938px の2カラム（gap 30px = 1482）。本文は行間1.5・ls 0.8px。 */
.wr-w03 { padding: 100px 0; } /* 下100px = 共通コンテンツ帯との間隔（.common-content-bg 側に上余白がないため） */
.wr-w03__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.wr-w03__blocks { display: flex; flex-direction: column; gap: 30px; margin-top: 30px; }
.wr-w03__card { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 30px; border-radius: 5px; background: var(--color-white); }
.wr-w03__card-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; letter-spacing: 4.8px; line-height: 1.5; color: var(--color-text); }
.wr-w03__card-body { width: 100%; font-family: var(--font-ja); font-weight: 400; font-size: 16px; letter-spacing: 0.8px; line-height: 1.5; color: var(--color-text); }
.wr-w03__list { padding-left: 24px; list-style: disc; } /* Figma の list-disc / ms-24px */
.wr-w03__list--num { list-style: decimal; }
.wr-w03__link { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.wr-w03__btns { display: flex; }
.wr-w03__row { display: flex; align-items: stretch; gap: 30px; }
.wr-w03__card--parts { flex: 0 0 calc((100% - 30px) * 0.35399); } /* 514 / (514 + 938) */
.wr-w03__card--excl { flex: 1 1 0; min-width: 0; }
@media (max-width: 1024px) {
.wr-w03 { padding: 60px 0; }
.wr-w03__row { display: block; }
.wr-w03__card--parts + .wr-w03__card--excl { margin-top: 30px; }
.wr-w03__card-body br { display: none; }
}
@media (max-width: 568px) {
.wr-w03 { padding: 40px 0; }
.wr-w03__lead { font-size: 14px; }
.wr-w03__blocks { gap: 20px; margin-top: 25px; }
.wr-w03__card { gap: 12px; padding: 25px 20px; }
.wr-w03__card--parts + .wr-w03__card--excl { margin-top: 20px; }
.wr-w03__card-ttl { font-size: 20px; letter-spacing: 2px; }
.wr-w03__card-body { font-size: 14px; letter-spacing: 0.4px; }
.wr-w03__list { padding-left: 20px; }
.wr-w03__btns .btn-solid { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
/* =============================================================
[mbp-insurance] MBP保険（prefix: ins-）
============================================================= */
/* ---- mbp-insurance01 : 自転車盗難・傷害保険について（Figma 2126:9785） ----
左カラムにプラン1（縦長）、右カラムにプラン2・3＋保険会社情報。711px ＋ gap 60px ＋ 711px。
カードは白地＋ネイビー1px枠、左上に番号バッジ、その右にネイビーの見出し帯。
下 padding 100px = 共通コンテンツ帯との間隔（.common-content-bg 側に上余白が無いため）。 */
.ins-i01 { padding: 100px 0; }
.ins-i01__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: 0.9px; line-height: 1.7; color: var(--color-text); }
.ins-i01__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.ins-i01__cols { display: flex; align-items: stretch; gap: 60px; margin-top: 45px; }
.ins-i01__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.ins-i01__card--tall { flex: 1 1 auto; } /* 左カラムのカードは右カラム全体の高さに追従 */
.ins-i01__desc { padding: 0 30px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
.ins-i01__cond { display: flex; align-items: stretch; gap: 20px; padding: 0 30px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
.ins-i01__cond-label { flex: none; width: 78px; }
.ins-i01__cond-list, .ins-i01__cond-txt { flex: 1 1 0; min-width: 0; padding-left: 21px; border-left: 1px solid var(--color-black); list-style: decimal; } /* Figma Vector 36 = 縦の区切り線 */
.ins-i01__cond-txt { padding-left: 20px; list-style: none; }
.ins-i01__cond-list { margin-left: -1px; padding-left: 41px; } /* 区切り線 + マーカー分（ms-21px） */
.ins-i01__block { padding: 0 30px; }
.ins-i01__block-ttl { font-family: var(--font-ja); font-weight: 600; font-size: 16px; letter-spacing: 0.4px; line-height: 1.7; color: var(--color-black); }
.ins-i01__block-txt { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
.ins-i01__company { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } /* Figma Frame403 */
.ins-i01__info { display: flex; flex-direction: column; font-family: var(--font-ja); font-size: 16px; letter-spacing: 0.4px; line-height: 1.7; color: var(--color-black); }
.ins-i01__info-row { display: flex; align-items: center; gap: 20px; min-height: 38px; }
.ins-i01__info-row dt { flex: none; width: 66px; font-weight: 600; }
.ins-i01__info-row dd { min-width: 0; }
.ins-i01__info-logo { width: 288px; }
.ins-i01__tel { display: flex; align-items: center; gap: 10px; }
.ins-i01__tel img { height: 23px; } /* 既存の mp-cmn-icon_freedial_wh.svg（マーク自体はネイビー）を高さ基準で合わせる */
.ins-i01__tel a { font-family: var(--font-oswald); font-weight: 400; font-size: 24px; line-height: 1.2; color: inherit; text-decoration: none; }
@media (max-width: 1300px) {
.ins-i01__cols { gap: 40px; }
.ins-i01__ttl { font-size: 30px; }
}
@media (max-width: 1024px) {
.ins-i01 { padding: 60px 0; }
.ins-i01__cols { display: block; }
.ins-i01__col + .ins-i01__col { margin-top: 30px; }
.ins-i01__desc br { display: none; }
}
@media (max-width: 568px) {
.ins-i01 { padding: 40px 0; }
.ins-i01__ttl { font-size: 22px; }
.ins-i01__lead { margin-top: 25px; font-size: 14px; }
.ins-i01__cols { margin-top: 30px; }
.ins-i01__col { gap: 20px; }
.ins-i01__col + .ins-i01__col { margin-top: 20px; }
.ins-i01__desc, .ins-i01__cond, .ins-i01__block { padding: 0 20px; }
.ins-i01__cond { display: block; }
.ins-i01__cond-label { width: auto; font-weight: 600; }
.ins-i01__cond-list, .ins-i01__cond-txt { margin-top: 5px; margin-left: 0; padding-left: 20px; border-left: 0; }
.ins-i01__info-row { display: block; min-height: 0; margin-bottom: 10px; }
.ins-i01__info-logo { width: 100%; max-width: 288px; }
.ins-i01__btns .btn-solid { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}
/* =============================================================
[bohan-registration] 防犯登録（prefix: boh-）
============================================================= */
/* ---- 防犯登録について（Figma 2126:43816 / Frame 358） ----
カード本体は [common] の .num-card（mbp-insurance と共通）。左に①、右に②＋外部サイト導線。
下 padding 100px = 共通コンテンツ帯との間隔（.common-content-bg 側に上余白が無いため）。 */
.boh-b01 { padding: 100px 0; }
.boh-b01__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: 0.9px; line-height: 1.7; color: var(--color-text); }
.boh-b01__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.boh-b01__cols { display: flex; align-items: stretch; gap: 60px; margin-top: 30px; }
.boh-b01__cols > .boh-b01__card { flex: 1 1 0; min-width: 0; } /* 左カラム（①）*/
.boh-b01__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; }
.boh-b01__body { display: flex; flex-direction: column; gap: 10px; padding: 0 30px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
.boh-b01__need { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.boh-b01__need-label { padding: 3px 10px; border-radius: 3px; background: var(--color-main); font-weight: 600; color: var(--color-white); }
.boh-b01__need-list { width: 100%; padding-left: 21px; list-style: decimal; }
.boh-b01__more { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.boh-b01__more-txt { font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
@media (max-width: 1300px) {
.boh-b01__cols { gap: 40px; }
.boh-b01__ttl { font-size: 30px; }
}
@media (max-width: 1024px) {
.boh-b01 { padding: 60px 0; }
.boh-b01__cols { display: block; }
.boh-b01__col { display: block; margin-top: 30px; }
.boh-b01__more { margin-top: 30px; }
.boh-b01__body br { display: none; }
}
@media (max-width: 568px) {
.boh-b01 { padding: 40px 0; }
.boh-b01__ttl { font-size: 22px; }
.boh-b01__lead { margin-top: 25px; font-size: 14px; }
.boh-b01__cols { margin-top: 30px; }
.boh-b01__col, .boh-b01__more { margin-top: 20px; }
.boh-b01__body { padding: 0 20px; }
.boh-b01__need-list { padding-left: 20px; }
.boh-b01__btns .btn-solid { width: 100%; justify-content: center; }
}
/* =============================================================
[faq] よくある質問（FAQ）（prefix: faq-）
============================================================= */
/* ---- faq01 : よくある質問リード（Figma 2142:6756） ----
白カード3枚（gap 30/25px）。中のチェック行は [common] の .chk-list（product-policy02 と共通）。 */
.faq-f01 { padding: 100px 0 60px; } /* 下60px = Figma の faq01→faq02 の間隔（faq02 側には上余白を付けない） */
.faq-f01__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.faq-f01__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 30px; margin-top: 26px; }
.faq-f01__card { display: flex; flex-direction: column; gap: 20px; padding: 30px; border-radius: 5px; background: var(--color-white); }
.faq-f01__card-ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; letter-spacing: 4.8px; line-height: 1.5; color: var(--color-text); }
.faq-f01__list { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1300px) {
.faq-f01__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq-f01__card-ttl { font-size: 22px; letter-spacing: 3px; }
}
@media (max-width: 896px) {
.faq-f01 { padding: 60px 0 40px; }
.faq-f01__lead br { display: none; }
.faq-f01__cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.faq-f01__card { padding: 25px 20px; }
}
@media (max-width: 568px) {
.faq-f01 { padding: 40px 0 30px; }
.faq-f01__lead { margin-top: 25px; font-size: 14px; }
.faq-f01__cards { margin-top: 25px; }
.faq-f01__card-ttl { font-size: 20px; letter-spacing: 2px; }
}
/* ---- faq02 : 知りたい内容から探す（カテゴリタブ）（Figma 2130:27908 / 2251:66470） ----
左 320px のカテゴリボタン（50px高・15px間隔）＋ gap 70px ＋ 右 1092px。
右は「上段＝2カラムの常時表示Q&A 2件」＋「下段＝全幅のアコーディオン（+アイコン）」。 */
.faq-f02 { padding-bottom: 100px; } /* 上余白は faq01 の padding-bottom 側で確保 */
.faq-f02__body { display: flex; align-items: flex-start; gap: 70px; margin-top: 30px; }
/* 左：カテゴリボタン（番号は常にネイビー地＋アクセント文字／ラベルは選択時に反転） */
.faq-f02__nav { flex: none; width: 320px; display: flex; flex-direction: column; gap: 15px; position: sticky; top: 100px; }
.faq-f02__navbtn { display: flex; align-items: stretch; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font-family: var(--font-ja); }
.faq-f02__navnum { flex: none; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 5px 0 0 5px; background: var(--color-main); font-family: var(--font-en); font-weight: 400; font-size: 24px; line-height: 1; color: var(--color-accent); }
.faq-f02__navttl { flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding: 0 20px; border: 1px solid var(--color-main); border-left: 0; border-radius: 0 5px 5px 0; background: var(--color-white); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--color-black); transition: background 0.2s ease, color 0.2s ease; }
.faq-f02__navbtn:hover .faq-f02__navttl { background: var(--color-bg-yellow); }
.faq-f02__navbtn.is-active .faq-f02__navttl { background: var(--color-main); color: var(--color-accent); }
/* 右：パネル見出し（ENは黄色バーを下敷きにする） */
.faq-f02__panels { flex: 1 1 0; min-width: 0; }
.faq-f02__panelttl { font-family: var(--font-serif); font-weight: 600; font-size: 30px; letter-spacing: 0.75px; line-height: 1.5; color: var(--color-black); }
.faq-f02__panelen { margin-top: 15px; font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--color-main); }
.faq-f02__panelen span { position: relative; display: inline-block; padding-top: 10px; }
.faq-f02__panelen span::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 8px; background: var(--color-accent); z-index: -1; }
/* 上段：2カラムの常時表示Q&A */
.faq-f02__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 30px; }
.faq-f02__item { display: flex; flex-direction: column; gap: 15px; }
/* 下段：全幅アコーディオン */
.faq-f02__accs { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.faq-f02__acc { position: relative; display: block; padding-top: 1px; }
.faq-f02__acc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, var(--color-accent) 0 22.03%, var(--color-main) 22.03% 100%); } /* 2色の区切り線（summary を details の第1子に保つため疑似要素で描画） */
.faq-f02__accq { display: flex; align-items: flex-start; gap: 15px; margin-top: 15px; cursor: pointer; list-style: none; }
.faq-f02__accq::-webkit-details-marker { display: none; }
/* 開閉はCSS側で制御する（ネイティブ details の非表示に依存しない）。JS が高さをアニメーションさせる。 */
.faq-f02__accbody { overflow: hidden; height: 0; opacity: 0; }
.faq-f02__acc[open] .faq-f02__accbody { height: auto; opacity: 1; }
.faq-f02__acca { margin-top: 20px; } /* 質問と回答の間隔（Figma 10px → 視認性のため 20px に拡張） */
.faq-f02__plus { flex: none; position: relative; width: 20px; height: 20px; margin-top: 8px; }
.faq-f02__plus::before, .faq-f02__plus::after { content: ""; position: absolute; left: 0; top: 9px; width: 20px; height: 2px; background: var(--color-main); transition: transform 0.2s ease; } /* Figma Group 130 */
.faq-f02__plus::after { transform: rotate(90deg); }
.faq-f02__acc[open] .faq-f02__plus::after { transform: rotate(0deg); }
/* Q&A 共通 */
.faq-f02__rule { position: relative; display: block; height: 1px; background: var(--color-main); }
.faq-f02__rule::before { content: ""; position: absolute; left: 0; top: 0; width: 22.03%; height: 1px; background: var(--color-accent); } /* Figma Rectangle 39 */
.faq-f02__qa { display: flex; flex-direction: column; gap: 10px; }
.faq-f02__row { display: flex; align-items: flex-start; gap: 15px; }
.faq-f02__mark { flex: none; font-family: var(--font-en); font-weight: 500; font-size: 24px; line-height: 1.5; color: var(--color-main); }
.faq-f02__q { flex: 1 1 0; min-width: 0; font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.7; color: var(--color-text); }
.faq-f02__a { flex: 1 1 0; min-width: 0; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.faq-f02__a strong { font-weight: 700; }
.faq-f02__alist { padding-left: 24px; list-style: disc; }
.faq-f02__anote { font-size: 14px; }
.faq-f02__abtn { margin-top: 15px; }
.faq-f02__abtns { display: flex; flex-wrap: wrap; gap: 10px 15px; } /* 旗艦店・全国パートナーなど複数ボタンを並べる回答 */
@media (max-width: 1300px) {
.faq-f02__body { gap: 40px; }
.faq-f02__nav { width: 260px; }
.faq-f02__navttl { padding: 0 15px; font-size: 16px; }
.faq-f02__top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 896px) {
.faq-f02 { padding-bottom: 60px; }
.faq-f02__body { display: block; margin-top: 25px; }
.faq-f02__nav { width: auto; position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.faq-f02__panels { margin-top: 40px; }
.faq-f02__panelttl { font-size: 24px; }
}
@media (max-width: 568px) {
.faq-f02 { padding-bottom: 40px; }
.faq-f02__nav { grid-template-columns: minmax(0, 1fr); }
.faq-f02__navnum { width: 42px; height: 42px; font-size: 20px; }
.faq-f02__navttl { font-size: 15px; }
.faq-f02__panels { margin-top: 30px; }
.faq-f02__panelttl { font-size: 20px; }
.faq-f02__panelen { font-size: 18px; }
.faq-f02__top { gap: 25px; margin-top: 25px; }
.faq-f02__row, .faq-f02__accq { gap: 10px; }
.faq-f02__mark { font-size: 20px; }
.faq-f02__q { font-size: 16px; }
.faq-f02__a { font-size: 14px; }
.faq-f02__acca { margin-top: 15px; }
.faq-f02__plus { width: 16px; height: 16px; }
.faq-f02__plus::before, .faq-f02__plus::after { width: 16px; top: 7px; }
}
/* =============================================================
[bicycle-rules] 自転車の利用者に課せられる遵守義務（/pages/bicycle-rules）
プレフィックス: br-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
・見出し（明朝体タイトル）は merged.css の .sec-title をそのまま流用
・bicycle-rules03〜08 のページ固有スタイルは以降に追記していく
============================================================= */
.bicycle-rules-main { background: var(--color-bg-yellow); } /* Figma: 白カードが載る地色。#F3F0EA */
/* .chk-list のマーク列は product-policy / faq の Figma 基準で 42px だが、以降のリニューアルページは
チェック27px + 余白15px = 本文開始42px が Figma 値。対象ページを増やすときはここに追記する。 */
.bicycle-rules-main .chk-list__mark,
.test-ride-main .chk-list__mark { width: 27px; }
/* --- ページ内共有: 白カード（アイコン150px + 文言） ---
bicycle-rules01 / 02 / 03 で外殻・余白・アイコン寸法が共通。
Figma: 角丸5px / padding 10px 30px 20px / アイコン 150×150（書き出しは225pxの1.5倍）。
中身のタイポは 01 が「ラベル+値」、02・03 が「見出し+本文」で異なるため別クラスにする。 */
.br-card { background: var(--color-white); border-radius: 5px; padding: 10px 30px 20px; display: flex; flex-direction: column; align-items: center; }
.br-card__icon { width: 150px; max-width: 100%; }
.br-card__ttl { width: 100%; text-align: center; font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.5; color: var(--color-text); }
.br-card__txt { width: 100%; margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.5; color: var(--color-text); }
.br-card__note { font-size: 14px; }
@media (max-width: 1300px) {
.br-card { padding: 10px 15px 20px; }
.br-card__ttl { font-size: 18px; }
.br-card__txt { font-size: 15px; }
}
@media (max-width: 568px) {
.br-card { padding: 10px 10px 15px; }
.br-card__icon { width: 110px; }
.br-card__ttl { font-size: 16px; }
.br-card__txt { margin-top: 8px; font-size: 14px; }
.br-card__note { font-size: 13px; }
}
/* --- bicycle-rules01: E-BIKE・電動アシスト自転車の交通ルール ---
レイアウト（左テキスト + 右ビジュアル）とタイトル/本文のタイポは [common] の .lower-intro を流用。
Figma 差分は3点のみスコープ上書き: 左右比 456:968（共通は712:710）/ 見出し→本文 30px（共通は20px）/
右カラムが正方形画像2枚ではなく 3×2 のカードグリッド。 */
.br-s01 .lower-intro__col--txt { flex: 456 1 0; }
.br-s01__strong { margin-top: 20px; font-weight: 600; font-size: 20px; }
.br-s01__grid { flex: 968 1 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.br-s01__label { font-family: var(--font-ja); font-weight: 400; font-size: 18px; line-height: 1.5; color: var(--color-text); text-align: center; }
.br-s01__val { margin-top: 5px; font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--color-text); text-align: center; }
@media (max-width: 1300px) {
.br-s01__grid { gap: 15px; }
.br-s01__val { font-size: 22px; }
}
@media (max-width: 896px) {
.br-s01__strong { font-size: 18px; }
.br-s01__grid { margin-top: 40px; }
}
@media (max-width: 568px) {
.br-s01__strong { margin-top: 15px; font-size: 16px; }
.br-s01__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 25px; }
.br-s01__label { font-size: 14px; }
.br-s01__val { font-size: 20px; }
}
/* --- bicycle-rules02: まず知っておきたいこと（RIDER BASICS） ---
Figma: 見出し行 → 30px → 白カード4列（348px / gap 30px / 高さ揃え）。 */
.br-s02 { padding-bottom: 100px; }
.br-s02__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1300px) {
.br-s02__grid { gap: 20px; }
}
@media (max-width: 1024px) {
.br-s02__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 896px) {
.br-s02 { padding-bottom: 60px; }
.br-s02__grid { margin-top: 25px; }
}
@media (max-width: 568px) {
.br-s02 { padding-bottom: 40px; }
.br-s02__grid { gap: 10px; }
}
/* --- bicycle-rules03: スマートに走るために、知っておきたい新ルール（TRAFFIC UPDATE） ---
Figma: 見出し行 → 白カード4×2 → OK/NG 2カラム → 中央ボタン（各ブロック間 30px）。
カードは .br-card、チェック行は [common] の .chk-list（マーク列42px + gap15px が Figma と一致）、
ボタンは merged.css の .btn-solid を流用。OK/NG のバッジ丸は画像に焼き込み済み。 */
.br-s03 { padding-bottom: 100px; }
.br-s03__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.br-s03__cols { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.br-s03__col { display: flex; align-items: flex-start; gap: 40px; }
.br-s03__img { flex: none; width: 300px; max-width: 100%; }
.br-s03__body { flex: 1 1 0; min-width: 0; }
.br-s03__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--color-text); }
.br-s03__list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.br-s03__label { display: block; font-weight: 700; font-size: 20px; letter-spacing: 1px; line-height: 1.5; }
.br-s03__desc { display: block; margin-top: 10px; font-weight: 400; font-size: 14px; letter-spacing: 0; line-height: 1.7; color: var(--color-black); }
.br-s03__btn { margin-top: 30px; text-align: center; }
@media (max-width: 1300px) {
.br-s03__grid { gap: 20px; }
.br-s03__cols { gap: 25px; }
.br-s03__col { gap: 25px; }
.br-s03__img { width: 240px; }
.br-s03__ttl { font-size: 22px; }
.br-s03__label { font-size: 18px; }
}
@media (max-width: 1024px) {
.br-s03__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-s03__cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 896px) {
.br-s03 { padding-bottom: 60px; }
.br-s03__grid { margin-top: 25px; }
.br-s03__cols { margin-top: 40px; }
.br-s03__img { width: 200px; }
.br-s03__ttl { font-size: 20px; }
}
@media (max-width: 568px) {
.br-s03 { padding-bottom: 40px; }
.br-s03__grid { gap: 10px; }
.br-s03__cols { margin-top: 30px; gap: 30px; }
.br-s03__col { display: block; }
.br-s03__img { width: 180px; margin: 0 auto 15px; }
.br-s03__ttl { font-size: 18px; }
.br-s03__label { font-size: 16px; }
.br-s03__desc { margin-top: 8px; font-size: 13px; }
.br-s03__btn { margin-top: 25px; }
}
/* --- bicycle-rules04: 「移動を着こなす」人のための、安全利用5原則（SMART RIDING RULES） ---
Figma: 見出し行 → 30px → 左に番号カード5枚（711px）/ gap 60px / 右に画像2枚（713px）。
カードは merged.css の .num-card とは別デザイン（枠内半透明白・角丸3px・バッジ40px・見出し帯なし）のため新設。
バッジの角丸は左上と右下のみ 3px（Figma rounded-tl / rounded-br）。文字色は #222 ではなく --color-main。 */
.br-s04 { padding-bottom: 100px; }
.br-s04__cols { margin-top: 30px; display: flex; align-items: flex-start; gap: 60px; }
.br-s04__list { flex: 711 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.br-s04__item { background: rgba(255, 255, 255, 0.8); border: 1px solid var(--color-main); border-radius: 3px; padding-bottom: 20px; }
.br-s04__head { display: flex; align-items: flex-end; gap: 20px; }
.br-s04__num { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 3px 0 3px 0; background: var(--color-main); font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1; color: var(--color-white); }
.br-s04__ttl { flex: 1 1 0; min-width: 0; font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--color-main); }
.br-s04__body { margin-top: 10px; padding: 0 30px 0 60px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-main); }
.br-s04__note { font-size: 14px; }
.br-s04__ol { margin-top: 0; padding-left: 21px; list-style: decimal; font-size: 14px; } /* merged.css の ol{list-style:none} を戻す */
.br-s04__imgs { flex: 713 1 0; min-width: 0; }
.br-s04__img { aspect-ratio: 713 / 362; } /* .objFit 併用。2枚で左カラムとほぼ等高になる Figma 比率 */
@media (max-width: 1300px) {
.br-s04__cols { gap: 40px; }
.br-s04__body { padding-right: 20px; }
}
@media (max-width: 1024px) {
.br-s04__cols { display: block; }
.br-s04__imgs { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 896px) {
.br-s04 { padding-bottom: 60px; }
/* PC の意図的な改行を SP でも効かせると「めの、」だけが3行目に残るため、SP は自然折り返しに戻す */
.br-s04 .sec-title__ja br { display: none; }
.br-s04__cols { margin-top: 25px; }
.br-s04__ttl { font-size: 17px; }
.br-s04__body { font-size: 15px; padding-left: 50px; }
.br-s04__head { gap: 10px; }
.br-s04__imgs { margin-top: 30px; }
}
@media (max-width: 568px) {
.br-s04 { padding-bottom: 40px; }
.br-s04__item { padding-bottom: 15px; }
.br-s04__num { width: 34px; height: 34px; font-size: 17px; }
.br-s04__ttl { font-size: 16px; }
.br-s04__body { margin-top: 8px; padding: 0 15px 0 15px; font-size: 14px; }
.br-s04__note, .br-s04__ol { font-size: 13px; }
.br-s04__ol { padding-left: 18px; }
.br-s04__imgs { margin-top: 25px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* --- bicycle-rules05: シーン別の安全な走り方（HOW TO RIDE SAFELY） ---
Figma: 見出し（リード無し）→ 30px → 画像上/チェック行下のカード4列（348px / gap 30px）。
チェック行は [common] の .chk-list を流用し、本文だけ disc の箇条書きに差し替える。 */
.br-s05 { padding-bottom: 100px; }
.br-s05__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.br-s05__card { display: flex; flex-direction: column; gap: 15px; }
.br-s05__img { aspect-ratio: 2 / 1; }
.br-s05__ttl { display: block; font-weight: 700; font-size: 20px; letter-spacing: 1px; line-height: 1.5; }
.br-s05__ul { margin-top: 10px; padding-left: 24px; list-style: disc; font-size: 16px; letter-spacing: normal; line-height: 1.7; color: var(--color-black); } /* merged.css の ul{list-style:none} を戻す */
@media (max-width: 1300px) {
.br-s05__grid { gap: 20px; }
.br-s05__ttl { font-size: 18px; }
.br-s05__ul { font-size: 15px; }
}
@media (max-width: 1024px) {
.br-s05__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 896px) {
.br-s05 { padding-bottom: 60px; }
.br-s05__grid { margin-top: 25px; }
}
@media (max-width: 568px) {
.br-s05 { padding-bottom: 40px; }
.br-s05__grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
.br-s05__card { gap: 12px; }
.br-s05__ttl { font-size: 16px; }
.br-s05__ul { margin-top: 8px; padding-left: 20px; font-size: 14px; }
}
/* --- bicycle-rules06: 安心して走れることも、E-BIKEの大切な性能（SAFE & LEGAL E-BIKE） ---
Figma: 写真 + rgba(0,0,0,.5) の暗幕、上に「番号 + 罫線 + EN」、下に見出し + 本文の3列カード（481×316 / gap 20px）。
罫線は merged.css の .sec-title__line を流用。[common] の .photo-cards とは比率・余白・配置が異なるため別定義。 */
.br-s06 { padding-bottom: 100px; }
.br-s06__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.br-s06 .photo-panel { aspect-ratio: 481 / 316; }
@media (max-width: 896px) {
.br-s06 { padding-bottom: 60px; }
.br-s06__grid { margin-top: 25px; grid-template-columns: minmax(0, 1fr); gap: 15px; }
.br-s06 .photo-panel { aspect-ratio: auto; } /* min-height から逆算された最小幅で列をはみ出すのを防ぐ */
}
@media (max-width: 568px) {
.br-s06 { padding-bottom: 40px; }
}
/* --- bicycle-rules07: 走り続けるための、安心とサポート（TOTAL SUPPORT） ---
Figma: 正方形に近い画像（200×205）左 + 白地の本文ブロック（padding 30/40）右、を3列（493px / gap 2px）。 */
.br-s07 { padding-bottom: 100px; }
.br-s07__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.br-s07__card { display: flex; align-items: stretch; min-height: 205px; } /* Figma の画像高 200×205。本文が短くてもこの高さを保ち、長ければ画像側が cover で伸びる */
.br-s07__img { flex: none; width: 200px; max-width: 45%; } /* 高さはカード側の min-height / 本文量で決まる（align-items:stretch） */
.br-s07__body { flex: 1 1 0; min-width: 0; background: var(--color-white); padding: 30px 40px; }
.br-s07__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; color: var(--color-text); }
.br-s07__txt { margin-top: 20px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-text); }
@media (max-width: 1300px) {
.br-s07__body { padding: 25px 20px; }
.br-s07__ttl { font-size: 18px; }
.br-s07__txt { margin-top: 15px; }
}
@media (max-width: 1024px) {
.br-s07__grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
.br-s07__img { width: 180px; }
}
@media (max-width: 896px) {
.br-s07 { padding-bottom: 60px; }
.br-s07__grid { margin-top: 25px; }
}
@media (max-width: 568px) {
.br-s07 { padding-bottom: 40px; }
.br-s07__grid { gap: 10px; }
.br-s07__card { min-height: 150px; }
.br-s07__img { width: 130px; }
.br-s07__body { padding: 20px 15px; }
.br-s07__ttl { font-size: 16px; }
.br-s07__txt { margin-top: 10px; }
}
/* --- bicycle-rules08: E-BIKEの法律や安全性について、よくあるご質問（COMMON QUESTIONS） ---
Figma: Q&A 3列（454px / gap 60px）。各ブロックは上下に1pxのネイビー罫線、上罫線の左100pxだけアクセント色。
ボタンは merged.css の .btn-solid を流用。 */
.br-s08 { background: var(--color-white); padding: 60px 0; margin-bottom: 100px; } /* Figma Rectangle 306: 全幅の白帯（上下 padding 60px）。前後の 100px は地色（#F3F0EA）のまま */
.br-s08__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; }
.br-s08__item { position: relative; padding: 15px 0; border-top: 1px solid var(--color-main); border-bottom: 1px solid var(--color-main); }
.br-s08__item::before { content: ""; position: absolute; left: 0; top: -1px; width: 100px; height: 1px; background: var(--color-accent); } /* 上罫線の左100pxアクセント（Figma Rectangle 39） */
.br-s08__q { display: flex; align-items: flex-start; gap: 10px; } /* Figma は items-end だが 1行前提。質問が折り返すと Q番号が下端に落ちるため上揃えにする（1行時は行高差 0.2px で見た目同一） */
.br-s08__a { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.br-s08__qmark, .br-s08__amark { flex: none; font-family: var(--font-en); font-weight: 500; font-size: 18px; line-height: 1.5; color: var(--color-main); }
.br-s08__amark { width: 21px; text-align: center; }
.br-s08__qtxt { flex: 1 1 0; min-width: 0; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.br-s08__atxt { flex: 1 1 0; min-width: 0; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.br-s08__btn { margin-top: 15px; }
.br-s08__more { margin-top: 30px; text-align: center; }
@media (max-width: 1300px) {
.br-s08__grid { gap: 40px; }
}
@media (max-width: 1024px) {
.br-s08__grid { grid-template-columns: minmax(0, 1fr); gap: 25px; }
}
@media (max-width: 896px) {
.br-s08 { padding: 40px 0; margin-bottom: 60px; }
.br-s08__grid { margin-top: 25px; }
}
@media (max-width: 568px) {
.br-s08 { padding: 30px 0; margin-bottom: 40px; }
.br-s08__qtxt { font-size: 15px; }
.br-s08__more { margin-top: 25px; }
}
/* =============================================================
[test-ride] 試乗予約（/pages/test-ride）
プレフィックス: tr-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
・見出し（明朝体タイトル）は merged.css の .sec-title を流用
・test-ride01〜04 のページ固有スタイルは以降に追記していく
============================================================= */
.test-ride-main { background: var(--color-bg-yellow); } /* ページ地色 #F3F0EA。白地は test-ride02 のみ（各セクション側で上書き） */
/* --- test-ride01: 乗るたびに、心が躍る。 ---
[common] の .lower-intro をそのまま流用（見出し 明朝36px ls0.9 lh1.7 / 本文16px が Figma と一致）。
Figma 差分は3点のみスコープ上書き: 左右比 771:651（共通は712:710）/ 見出し→本文 30px（共通は20px）/
右カラムが正方形画像2枚ではなく横長画像1枚（651×367）。 */
.tr-s01 .lower-intro__col--txt { flex: 771 1 0; }
.tr-s01__img { flex: 651 1 0; min-width: 0; aspect-ratio: 651 / 367; }
@media (max-width: 896px) {
.tr-s01__img { margin-top: 40px; }
}
@media (max-width: 568px) {
.tr-s01__img { margin-top: 25px; }
}
/* --- test-ride02: 試乗可能店舗（AVAILABLE LOCATIONS）---
ページ内で唯一の白帯（地色 #F3F0EA の上に全幅の白）。Figma: 帯の上下 padding 80px、
見出し → 30px → 旗艦店（左651 / gap60 / 右771の画像）→ 40px → 全国見出し → 30px → 店舗カード3列。 */
.tr-s02 { background: var(--color-white); padding: 80px 0; margin-bottom: 100px; }
/* 旗艦店ブロック */
.tr-s02__flag { margin-top: 30px; display: flex; align-items: flex-start; gap: 60px; }
.tr-s02__flagbody { flex: 651 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.tr-s02__head { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.tr-s02__logo { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.tr-s02__logoimg { display: block; width: 360px; max-width: 100%; }
.tr-s02__logotxt { font-family: var(--font-en); font-weight: 400; font-size: 24px; line-height: 1.5; color: var(--color-black); }
.tr-s02__flagimg { flex: 771 1 0; min-width: 0; aspect-ratio: 771 / 371; }
.tr-s02__btn { display: flex; flex-wrap: wrap; gap: 15px 20px; } /* Google Map + 旗艦店のご案内 */
.tr-s02__more { margin-top: 40px; text-align: center; } /* 全国パートナーへの導線 */
.tr-s02__nationwide { margin-top: 40px; }
.tr-s02__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.tr-s02__card { position: relative; }
.tr-s02__cardimg { aspect-ratio: 480 / 316; }
.tr-s02__cardttl { margin-top: 20px; font-family: var(--font-ja); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; color: var(--color-black); }
.tr-s02__card .info-list { margin-top: 10px; }
@media (max-width: 1300px) {
.tr-s02__flag { gap: 40px; }
.tr-s02__logoimg { width: 280px; }
.tr-s02__logotxt { font-size: 20px; }
.tr-s02__grid { gap: 25px; }
.info-list--lg { font-size: 16px; letter-spacing: 0.4px; column-gap: 20px; }
.info-list--lg dt { padding-right: 20px; }
}
@media (max-width: 1024px) {
.tr-s02__flag { display: block; }
.tr-s02__flagimg { margin-top: 30px; }
.tr-s02__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 896px) {
.tr-s02 { padding: 50px 0; margin-bottom: 60px; }
.tr-s02__flag { margin-top: 25px; }
.tr-s02__nationwide { margin-top: 30px; }
.tr-s02__grid { margin-top: 25px; }
}
@media (max-width: 568px) {
.tr-s02 { padding: 40px 0; margin-bottom: 40px; }
.tr-s02__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.tr-s02__head { gap: 20px; }
.tr-s02__logoimg { width: 220px; }
.tr-s02__logotxt { font-size: 17px; }
.tr-s02__cardttl { margin-top: 15px; font-size: 17px; }
.info-list, .info-list--lg { font-size: 14px; letter-spacing: 0.35px; column-gap: 12px; }
.info-list dt, .info-list--lg dt { padding-right: 12px; }
.info-list__ic { width: 20px; }
.info-list__ic img { max-height: 20px; }
}
/* --- test-ride03: ご予約方法（BOOKING PROCESS）---
Figma: 左に見出し＋チェック3点、右に白いQRボックス（下揃え）→ 30px → ステップカード5列（280.4px / gap 20px）。
チェックアイコンは merged.css の .chk-list と同一図形の拡大（27→36px）なので mp-cmn-icon_check_dk.svg を流用。 */
.tr-s03 { padding-bottom: 100px; }
.tr-s03__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.tr-s03__headmain { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.tr-s03__points { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; }
.tr-s03__points li { display: flex; align-items: center; gap: 10px; font-family: var(--font-ja); font-weight: 600; font-size: 30px; line-height: 1.7; color: var(--color-text); }
.tr-s03__pic { flex: none; width: 36px; display: flex; }
.tr-s03__points a { color: inherit; text-decoration: underline; }
.tr-s03__qr { display: flex; align-items: flex-end; gap: 20px; padding: 10px 20px; border-radius: 5px; background: var(--color-white); text-decoration: none; }
.tr-s03__qrtxt { font-family: var(--font-ja); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--color-black); text-align: right; }
.tr-s03__qrimg { flex: none; width: 136px; }
.tr-s03__qrimg img { border-radius: 5px; }
/* ステップカード。番号バッジの角丸は左上と右下のみ 5px（Figma rounded-tl / rounded-br）。
本文は min-height 78px で 5枚の見出し高さを揃え、下の画像の頭を一列に保つ（Figma も全カード 78px）。 */
.tr-s03__steps { margin-top: 30px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 20px; }
/* subgrid で「見出し行」の高さを同じ行のカード間で共有し、文言の行数が違っても画像の頭を揃える。
（非対応ブラウザでは subgrid が無視され、.tr-s03__steptxt の min-height による概算揃えにフォールバック） */
.tr-s03__step { display: grid; grid-row: span 2; grid-template-rows: subgrid; background: var(--color-white); border: 1px solid var(--color-main); border-radius: 5px; overflow: hidden; }
.tr-s03__stephead { display: flex; align-items: flex-start; }
.tr-s03__num { flex: none; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 5px 0 5px 0; background: var(--color-main); font-family: var(--font-en); font-weight: 400; font-size: 30px; line-height: 0.9; color: var(--color-accent); }
.tr-s03__steptxt { flex: 1 1 0; min-width: 0; min-height: 78px; display: flex; align-items: center; padding: 15px 20px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
.tr-s03__stepimg { aspect-ratio: 594 / 1084; }
@media (hover: hover) {
.tr-s03__points a:hover { text-decoration: none; }
}
@media (max-width: 1300px) {
.tr-s03__points li { font-size: 24px; }
.tr-s03__points { gap: 10px 20px; }
.tr-s03__pic { width: 30px; }
.tr-s03__steptxt { padding: 12px 15px; }
}
@media (max-width: 1024px) {
.tr-s03__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tr-s03__points li { font-size: 20px; }
.tr-s03__pic { width: 26px; }
}
@media (max-width: 896px) {
.tr-s03 { padding-bottom: 60px; }
.tr-s03__head { gap: 25px; }
.tr-s03__headmain { gap: 25px; }
.tr-s03__steps { margin-top: 25px; }
}
@media (max-width: 768px) {
.tr-s03__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 568px) {
.tr-s03 { padding-bottom: 40px; }
.tr-s03__points li { font-size: 16px; gap: 8px; }
.tr-s03__pic { width: 22px; }
.tr-s03__steps { gap: 10px; }
.tr-s03__num { width: 40px; height: 40px; font-size: 24px; }
.tr-s03__steptxt { min-height: 64px; padding: 10px; font-size: 13px; }
.tr-s03__qr { gap: 12px; padding: 10px 12px; }
.tr-s03__qrtxt { font-size: 14px; }
.tr-s03__qrimg { width: 100px; }
}
/* --- test-ride04: 試乗のご案内（TEST RIDE GUIDE）---
Figma: 見出し → 30px → リード → 20px → 白カードの条件リスト（771px）+ gap40 + 注意書き（671px・下揃え）。
条件行は [common] の .chk-list を流用（チェック27px + 余白15px = 本文開始42px が Figma と一致）。
縦の連結線は無いデザインなので .chk-list__line は置かない。 */
.tr-s04 { padding-bottom: 100px; }
.tr-s04__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
/* カードに padding があるため flex-basis:0 だと padding 分が比率配分に上乗せされて Figma の 771px を超える。
幅を calc で明示し、注意書き側に残りを渡す。gap はカスタムプロパティで一元管理。 */
.tr-s04__body { --tr-s04-gap: 40px; margin-top: 20px; display: flex; align-items: flex-end; gap: var(--tr-s04-gap); }
.tr-s04__cond { flex: none; width: calc((100% - var(--tr-s04-gap)) * 771 / 1442); min-width: 0; display: flex; flex-direction: column; gap: 15px; padding: 30px; border-radius: 5px; background: var(--color-white); }
.tr-s04__cond .chk-list__txt { font-size: 20px; letter-spacing: normal; line-height: 1.7; }
.tr-s04__cond strong { font-weight: 700; }
.tr-s04__note { flex: 1 1 0; min-width: 0; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-text); }
@media (max-width: 1300px) {
.tr-s04__body { --tr-s04-gap: 30px; }
.tr-s04__cond .chk-list__txt { font-size: 17px; }
}
@media (max-width: 1024px) {
.tr-s04__body { display: block; }
.tr-s04__cond { width: auto; }
.tr-s04__note { margin-top: 25px; }
}
@media (max-width: 896px) {
.tr-s04 { padding-bottom: 60px; }
.tr-s04__lead { margin-top: 25px; }
.tr-s04__cond { padding: 25px 20px; gap: 12px; }
.tr-s04__note br { display: none; }
}
@media (max-width: 568px) {
.tr-s04 { padding-bottom: 40px; }
.tr-s04__lead { margin-top: 20px; font-size: 14px; }
.tr-s04__body { margin-top: 15px; }
.tr-s04__cond { padding: 20px 15px; gap: 10px; }
.tr-s04__cond .chk-list__txt { font-size: 15px; }
.tr-s04__note { margin-top: 20px; font-size: 13px; }
}
/* =============================================================
[product-manuals] 取扱説明書・クイックユーザーガイド（/pages/product-manuals）
プレフィックス: pm-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
・見出し（明朝体タイトル）は merged.css の .sec-title を流用
・product-manuals01〜02 のページ固有スタイルは以降に追記していく
============================================================= */
.product-manuals-main { background: var(--color-bg-yellow); } /* Figma: 白ボタンが載る地色 #F3F0EA */
/* --- product-manuals01: スマートな移動を、いつもベストな状態で。 ---
[common] の .lower-intro を単一カラムで流用（見出し 明朝36px ls0.9 lh1.7 / 本文16px / 上下余白 90-100px が
いずれも Figma と一致）。Figma 差分は「見出し→本文 30px（共通は20px）」の1点のみ。
本文の
は PC 用の整形なので SP では自然折り返しに戻す（2行目が読点で終わるため）。 */
@media (max-width: 896px) {
.pm-s01 .lower-intro__body br { display: none; }
}
/* --- product-manuals02: 取扱説明書・クイックユーザーガイド ---
本体は [common] の .brand-docs / .doc-row を流用（error-code02 と共有）。ここは余白のみ。 */
.pm-s02 { padding-bottom: 100px; }
.pm-s02 .brand-docs { margin-top: 40px; }
@media (max-width: 896px) {
.pm-s02 { padding-bottom: 60px; }
.pm-s02 .brand-docs { margin-top: 30px; }
}
@media (max-width: 568px) {
.pm-s02 { padding-bottom: 40px; }
}
/* =============================================================
[error-code] エラーコード一覧（/pages/error-code）
プレフィックス: ec-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
・見出し（明朝体タイトル）は merged.css の .sec-title を流用
・error-code02 は product-manuals02 と同一構造のため、[common] の .brand-docs / .doc-row を共有する
（ボタンが「エラーコード一覧」1つだけという違いはマークアップ側で吸収）
============================================================= */
.error-code-main { background: var(--color-bg-yellow); } /* Figma: product-manuals と同じ地色 #F3F0EA */
/* --- error-code02: エラーコード一覧 ---
本体は [common] の .brand-docs / .doc-row を流用（product-manuals02 と共有）。ここは余白のみ。 */
.ec-s02 { padding-bottom: 100px; }
.ec-s02 .brand-docs { margin-top: 40px; }
@media (max-width: 896px) {
.ec-s02 { padding-bottom: 60px; }
.ec-s02 .brand-docs { margin-top: 30px; }
}
@media (max-width: 568px) {
.ec-s02 { padding-bottom: 40px; }
}
/* =============================================================
[minor-purchases] 未成年者のご購入について（/pages/minor-purchases）
プレフィックス: mnp-（mp- は merged.css がテーマ全体で使用しているため避ける）
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用
・本文セクションは [common] の .lower-intro を単一カラムで流用
（見出し 明朝36px ls0.9 lh1.7 / 本文16px / 上下余白 90-100px が Figma と一致）
・Figma 差分は「見出し→本文 30px（共通は20px）」と「見出し末尾の注記だけ18px」の2点
============================================================= */
.minor-purchases-main { background: var(--color-bg-yellow); } /* Figma: 地色 #F3F0EA */
/* =============================================================
[cooling-off] クーリングオフ（/pages/cooling-off）
プレフィックス: cof-
・minor-purchases と同一構造。KV / パンくず / 共通コンテンツ帯と
本文の .lower-intro（単一カラム）＋ .lower-intro__ttl-note をすべて [common] から流用する
・ページ固有の指定は地色のみ
============================================================= */
.cooling-off-main { background: var(--color-bg-yellow); } /* Figma: 地色 #F3F0EA */
/* =============================================================
[returns] 返品・キャンセルポリシー（/pages/returns）
プレフィックス: rt-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css を流用
・見出しは [common] の .lower-intro__ttl（明朝36px ls0.9 lh1.7）をそのまま使用。
レスポンシブ縮小（30/26/22px）も共通側の指定に乗る
・カードは [common] の .num-card を流用（mbp-insurance / bohan-registration と共通）。
規約どおり本文ブロックの左右余白とタイポのみ使用側で指定する
============================================================= */
.returns-main { background: var(--color-bg-yellow); } /* Figma: 地色 #F3F0EA */
.rt-s01 { padding: 90px 0 100px; } /* 上90px = Figma のセクション上余白100px − .breadcrumb の下padding 10px */
.rt-s01__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 60px; }
.rt-s01__body { padding: 0 30px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
.rt-s01__list { padding-left: 21px; list-style: disc; } /* merged.css の ul{list-style:none} を戻す */
@media (max-width: 1300px) {
.rt-s01__grid { gap: 40px; }
}
@media (max-width: 1024px) {
.rt-s01__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 896px) {
.rt-s01 { padding: 60px 0; }
.rt-s01__grid { margin-top: 25px; gap: 30px; }
.rt-s01__body { padding: 0 20px; }
}
@media (max-width: 568px) {
.rt-s01 { padding: 40px 0; }
.rt-s01__grid { margin-top: 20px; gap: 20px; }
.rt-s01__body { padding: 0 15px; font-size: 13px; }
.rt-s01__list { padding-left: 18px; }
}
/* =============================================================
[links] リンク集（/pages/links）
プレフィックス: lk-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css を流用
・各リンクは「18px SemiBold のテキスト＋下罫線（ネイビー全幅＋左にアクセント）」のみ
============================================================= */
.links-main { background: var(--color-bg-yellow); } /* Figma: 地色 #F3F0EA */
.lk-s01 { padding: 90px 0 100px; } /* 上90px = Figma のセクション上余白100px − .breadcrumb の下padding 10px */
.lk-s01__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 30px; }
.lk-s01__item { position: relative; padding-bottom: 15px; border-bottom: 1px solid var(--color-main); }
.lk-s01__item::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 26%; height: 1px; background: var(--color-accent); } /* Figma: 罫線454pxのうち左120px = 26% */
.lk-s01__link { display: inline-block; font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.7; color: var(--color-text); text-decoration: none; }
@media (hover: hover) {
.lk-s01__link:hover { text-decoration: underline; }
}
@media (max-width: 1024px) {
.lk-s01__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 896px) {
.lk-s01 { padding: 60px 0; }
.lk-s01__grid { gap: 25px; }
.lk-s01__link { font-size: 16px; }
}
@media (max-width: 568px) {
.lk-s01 { padding: 40px 0; }
.lk-s01__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.lk-s01__item { padding-bottom: 12px; }
.lk-s01__link { font-size: 15px; }
}
/* =============================================================
[policies] Shopify ポリシーページ（/policies/*）
プレフィックス: なし（Shopify 固定出力の .shopify-policy__* を直接対象にする）
・/policies/* は Shopify 組み込みページで、テーマ側テンプレートを置いても適用されない。
KV・パンくず・共通コンテンツ帯は差し込めないため、本文の体裁のみ CSS で Figma に寄せる。
・本文は管理画面（設定 → ポリシー）のリッチテキストが情報源。
見出しは 1. 〇〇
の形で番号が本文に含まれるため、
Figma の「番号バッジ＋見出し帯」は分離できない。帯全体をネイビーにして近づけている。
・対象: privacy-policy / legal-notice ほか全ポリシー
============================================================= */
.shopify-policy__container { width: 100%; max-width: 1028px; margin: 0 auto; padding: 60px 30px 100px; } /* Figma: container-s 968px + 左右余白30px */
.shopify-policy__title { margin-bottom: 40px; text-align: left; }
.shopify-policy__title h1 { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: 0.9px; line-height: 1.7; color: var(--color-text); }
.shopify-policy__body .rte { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
/* 本文が .rte 直下でない（div で1段包まれる）場合があるため、子セレクタではなく子孫セレクタで指定する */
.shopify-policy__body .rte p,
.shopify-policy__body .rte ul,
.shopify-policy__body .rte ol,
.shopify-policy__body .rte .table-wrap,
.shopify-policy__body .rte > table { margin-left: 30px; } /* Figma: 本文は見出し帯より 30px 内側 */
.shopify-policy__body .rte h2,
.shopify-policy__body .rte h3 { margin: 50px 0 22px; display: flex; align-items: center; min-height: 50px; padding: 11px 20px; border-radius: 5px; background: var(--color-main); font-family: var(--font-ja); font-weight: 600; font-size: 18px; letter-spacing: 0.45px; line-height: 1.5; color: var(--color-white); }
.shopify-policy__body .rte h2:first-child,
.shopify-policy__body .rte h3:first-child { margin-top: 0; }
.shopify-policy__body .rte p { margin-bottom: 10px; }
.shopify-policy__body .rte ul { list-style: disc; padding-left: 21px; margin-bottom: 10px; } /* merged.css の ul{list-style:none} を戻す */
.shopify-policy__body .rte ol { list-style: decimal; padding-left: 21px; margin-bottom: 10px; }
.shopify-policy__body .rte strong { font-weight: 700; }
.shopify-policy__body .rte .mb80 { margin-bottom: 40px; } /* 管理画面側で使われているが未定義のため補う */
/* 表組み: Figma はヘッダ・データとも #D9D9D9 の1px罫線、padding 10/20、14px ls0.35。
横幅が足りないときは表だけ横スクロールさせる（規約の「表は overflow-x:auto の中に入れる」）。 */
.shopify-policy__body .table-wrap { overflow-x: auto; margin-bottom: 20px; }
.shopify-policy__body table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.shopify-policy__body th,
.shopify-policy__body td { border: 1px solid var(--color-sub); padding: 10px 20px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); text-align: left; vertical-align: middle; }
.shopify-policy__body thead th { text-align: center; } /* privacy-policy: 3列ヘッダ（送信先 / 送信される主な情報 / 利用目的） */
.shopify-policy__body thead th:nth-child(2) { width: 50%; } /* Figma 1:2:1 */
.shopify-policy__body tbody th { width: 33.33%; font-weight: 600; } /* legal-notice: 行見出し 1:2 */
@media (max-width: 896px) {
.shopify-policy__container { padding: 40px 20px 60px; }
.shopify-policy__title { margin-bottom: 30px; }
.shopify-policy__title h1 { font-size: 26px; }
.shopify-policy__body .rte p,
.shopify-policy__body .rte ul,
.shopify-policy__body .rte ol,
.shopify-policy__body .rte .table-wrap { margin-left: 20px; }
.shopify-policy__body .rte h2,
.shopify-policy__body .rte h3 { margin: 40px 0 18px; font-size: 16px; padding: 10px 15px; }
.shopify-policy__body table { table-layout: auto; min-width: 640px; }
}
@media (max-width: 568px) {
.shopify-policy__container { padding: 30px 20px 40px; }
.shopify-policy__title h1 { font-size: 22px; }
/* 本文の文字サイズは管理画面側の .txt16 等が優先されるため、ここでは指定しない（混在を避ける） */
.shopify-policy__body .rte p,
.shopify-policy__body .rte ul,
.shopify-policy__body .rte ol,
.shopify-policy__body .rte .table-wrap { margin-left: 0; }
.shopify-policy__body .rte h2,
.shopify-policy__body .rte h3 { margin: 30px 0 15px; font-size: 15px; padding: 9px 12px; }
.shopify-policy__body th,
.shopify-policy__body td { padding: 8px 12px; font-size: 13px; }
}
/* =============================================================
[company] 会社概要（/pages/company）
プレフィックス: cp-
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
・見出し（明朝体タイトル）は merged.css の .sec-title を流用
・company01〜03 のページ固有スタイルは以降に追記していく
============================================================= */
.company-main { background: var(--color-bg-yellow); } /* Figma: 地色 #F3F0EA */
/* --- company01: 企業理念 ---
Figma: 見出し → 30px → リード → 40px → ミッション/ビジョンの2カラム → 40px → 価値の追求（罫線見出し + 写真パネル2×2）。
罫線見出しは [common] の .lined-ttl（左寄せは --left）、写真パネルは [common] の .photo-panel を流用。 */
.cp-s01 { padding: 90px 0 100px; }
.cp-s01__lead { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.cp-s01__mv { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 40px; }
.cp-s01__mvcol { display: flex; flex-direction: column; gap: 30px; }
.cp-s01__mvtxt { font-family: var(--font-ja); font-weight: 400; font-size: 18px; letter-spacing: 0.45px; line-height: 1.7; color: var(--color-text); }
.cp-s01__value { margin-top: 40px; }
.cp-s01__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cp-s01 .photo-panel { aspect-ratio: 731 / 365; }
@media (max-width: 1300px) {
.cp-s01__mv { gap: 30px; }
.cp-s01__mvtxt { font-size: 16px; }
}
@media (max-width: 896px) {
.cp-s01 { padding: 60px 0; }
.cp-s01__lead { margin-top: 25px; }
.cp-s01__lead br { display: none; }
.cp-s01__mv { margin-top: 30px; grid-template-columns: minmax(0, 1fr); gap: 35px; }
.cp-s01__mvcol { gap: 20px; }
.cp-s01__value { margin-top: 35px; }
.cp-s01__grid { margin-top: 25px; grid-template-columns: minmax(0, 1fr); gap: 15px; }
.cp-s01 .photo-panel { aspect-ratio: auto; } /* min-height から逆算された最小幅で列をはみ出すのを防ぐ */
}
@media (max-width: 568px) {
.cp-s01 { padding: 40px 0; }
.cp-s01__lead { margin-top: 20px; font-size: 14px; }
.cp-s01__mv { margin-top: 25px; gap: 30px; }
.cp-s01__mvtxt { font-size: 14px; }
.cp-s01__value { margin-top: 30px; }
.cp-s01__grid { margin-top: 20px; gap: 10px; }
}
/* --- company02: 会社情報 ---
Figma: 左に「見出し + ロゴ + 会社情報」（650px）/ gap 60px / 右に画像（771×581）。
会社情報は [common] の .info-list--lg（18px ls0.45・ラベル列に縦罫線）をアイコン無しで流用。 */
.cp-s02 { padding-bottom: 60px; }
.cp-s02__inner { display: flex; align-items: flex-start; gap: 60px; }
.cp-s02__col { flex: 650 1 0; min-width: 0; }
.cp-s02__logo { margin-top: 30px; width: 454px; max-width: 100%; }
.cp-s02__info { margin-top: 20px; }
.cp-s02__list { list-style: disc; padding-left: 27px; } /* merged.css の ul{list-style:none} を戻す */
.cp-s02__img { flex: 771 1 0; min-width: 0; aspect-ratio: 771 / 581; }
/* --- company03: 品質安全の取り組み ---
[common] の .sec-headrow を流用。Figma はリードが 18px ls0.45（共通の既定は16px）。 */
.cp-s03 { padding-bottom: 100px; }
.cp-s03__head .sec-headrow__lead { font-size: 18px; letter-spacing: 0.45px; }
@media (max-width: 1300px) {
.cp-s02__inner { gap: 40px; }
.cp-s02__logo { width: 340px; }
.cp-s03__head .sec-headrow__lead { font-size: 16px; }
}
@media (max-width: 1024px) {
.cp-s02__inner { display: block; }
.cp-s02__img { margin-top: 35px; }
}
@media (max-width: 896px) {
.cp-s02 { padding-bottom: 40px; }
.cp-s02__logo { margin-top: 25px; width: 280px; }
.cp-s03 { padding-bottom: 60px; }
}
@media (max-width: 568px) {
.cp-s02__logo { margin-top: 20px; width: 220px; }
.cp-s02__info { margin-top: 15px; }
.cp-s02__list { padding-left: 20px; }
.cp-s02__img { margin-top: 25px; }
.cp-s03 { padding-bottom: 40px; }
.cp-s03__head .sec-headrow__lead { font-size: 14px; }
}
/* =============================================================
[icons] アイコンマーク一覧（/pages/icons）
プレフィックス: icn-（ic- は merged.css が italmoto 用に使用しているため避ける）
・KV / パンくず / 共通コンテンツ帯は [common] 節 + merged.css の
.lower-kv--page + .page-kv / .breadcrumb / .common-content* を流用（ページ固有指定なし）
・見出し（明朝体タイトル）は merged.css の .sec-title を流用
・icons01〜03 のページ固有スタイルは以降に追記していく
============================================================= */
.icons-main { background: var(--color-bg-yellow); } /* Figma: 地色 #F3F0EA */
/* --- icons01: 一目でわかる、確かな品質と機能の証。 ---
[common] の .lower-intro を単一カラムで流用（product-manuals01 / company01 と同型）。
Figma 差分は「本文カラムを 1028px で止める」ことと、下余白が 50px（共通は100px）の2点。 */
.icn-s01 { padding-bottom: 50px; }
.icn-s01 .lower-intro__col--txt { max-width: 1028px; }
@media (max-width: 896px) {
.icn-s01 { padding-bottom: 40px; }
}
@media (max-width: 568px) {
.icn-s01 { padding-bottom: 30px; }
}
/* --- icons02 / icons03 共通: アイコン説明カード ---
Figma: 見出し（.sec-title）→ 30px → リード → 30px → カード3列（474px / gap 30px・上揃え）。
カードは「アイコン80px + gap20 + 説明374px」。アイコンは高さがまちまち（80〜110px）なので
幅だけ固定して高さは画像なりにする。見出し18px SemiBold ls0.45 / 本文14px lh1.7 ls0.35。 */
.icn-head { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.icn-head__lead { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.icn-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 30px; }
.icn-card { display: flex; align-items: flex-start; gap: 20px; }
.icn-card__ic { flex: none; width: 80px; }
.icn-card__body { flex: 1 1 0; min-width: 0; }
.icn-card__ttl { font-family: var(--font-ja); font-weight: 600; font-size: 18px; letter-spacing: 0.45px; line-height: 1.5; color: var(--color-black); }
.icn-card__txt { margin-top: 5px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-black); }
/* --- icons02: 法規・安全基準アイコン --- */
.icn-s02 { padding-bottom: 60px; } /* Figma: icons02 → icons03 間 60px */
/* --- icons03: 機能・テクノロジーアイコン --- */
.icn-s03 { padding-bottom: 100px; }
@media (max-width: 1300px) {
.icn-grid { gap: 25px; }
.icn-card { gap: 15px; }
.icn-card__ic { width: 68px; }
.icn-card__ttl { font-size: 16px; }
}
@media (max-width: 1024px) {
.icn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 896px) {
.icn-head { gap: 20px; }
.icn-grid { margin-top: 25px; }
.icn-s02 { padding-bottom: 40px; }
.icn-s03 { padding-bottom: 60px; }
}
@media (max-width: 568px) {
.icn-head__lead { font-size: 14px; }
.icn-grid { grid-template-columns: minmax(0, 1fr); margin-top: 20px; gap: 20px; }
.icn-card__ic { width: 60px; }
.icn-card__ttl { font-size: 15px; }
.icn-card__txt { font-size: 13px; }
.icn-s02 { padding-bottom: 30px; }
.icn-s03 { padding-bottom: 40px; }
}
/* =============================================================
[brands] 取扱ブランド一覧（prefix: brands-main）
本文はトップページの #brands をそのまま掲載（merged.css の #brands / .brand-section 系が効く）。
ここで定義するのは、共通コンテンツ帯の上の余白のみ（他ページの .brand-find の下余白と同値。
トップページに影響させないため .brands-main でスコープする）。
============================================================= */
.brands-main #brands { margin-bottom: 100px; }
@media (max-width: 896px) {
.brands-main #brands { margin-bottom: 60px; }
}
@media (max-width: 568px) {
.brands-main #brands { margin-bottom: 40px; }
}
/* =============================================================
[after-support] アフターサポート（/pages/after-support）
プレフィックス: as-
・Figma なし。旧ページ（page.mp.json + 管理画面本文）の内容を、リニューアル済みページの部品で組み直した
・KV / パンくず / 共通コンテンツ帯は [common] + merged.css を流用
・流用: .sec-title / .sec-headrow / .lined-ttl / .num-card / .info-list / .tag-label / .btn-solid
・地色は他ページと同じ #F3F0EA、after-support02 は test-ride02 と同じ白帯
============================================================= */
.after-support-main { background: var(--color-bg-yellow); }
/* --- after-support01: こんな症状があったら ---
見出し塊（中央）→ 40px → 白パネル（自転車の側面図 → 40px → 部位別の症状カード3列） */
.as-s01 { padding: 90px 0 100px; }
.as-s01__head { text-align: center; }
.as-s01__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 36px; letter-spacing: 0.9px; line-height: 1.7; color: var(--color-text); } /* .lower-intro__ttl と同じ見出し体裁 */
.as-s01__lead { margin-top: 20px; font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; color: var(--color-main); }
.as-s01__panel { margin-top: 40px; padding: 50px 60px 60px; border-radius: 5px; background: var(--color-white); }
.as-s01__img { max-width: 712px; margin: 0 auto; }
.as-s01__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 30px; }
.as-sym { padding: 0 30px; display: flex; flex-direction: column; gap: 10px; }
.as-sym li { position: relative; padding-left: 32px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; letter-spacing: 0.4px; line-height: 1.5; color: var(--color-text); }
.as-sym li::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 24px; background: url("mp-cmn-icon_check_dk.svg") no-repeat center / contain; } /* .chk-list と同じチェックアイコン（同じ assets 階層のため相対パスで参照） */
/* --- after-support02: 修理の提携店舗について ---
白帯。見出し行 → 40px → 提携会社（左）+ サポート窓口（右・ネイビー）→ 60px → 拠点見出し → 30px → 拠点カード4列 */
.as-s02 { background: var(--color-white); padding: 80px 0; margin-bottom: 100px; }
.as-s02__top { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 40px; }
.as-partner { display: flex; align-items: center; gap: 30px; padding: 30px; border: 1px solid var(--color-sub); border-radius: 5px; }
.as-partner__logo { flex: none; width: 220px; }
.as-partner__body { flex: 1 1 0; min-width: 0; }
.as-partner__name { font-family: var(--font-ja); font-weight: 700; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; color: var(--color-text); }
.as-partner__txt { margin-top: 15px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
.as-desk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; border-radius: 5px; background: var(--color-main); text-align: center; color: var(--color-white); }
.as-desk__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 28px; letter-spacing: 0.7px; line-height: 1.5; }
.as-desk__note { font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; }
.as-desk__note a { color: inherit; text-decoration: underline; }
.as-desk__tel a { font-family: var(--font-en); font-weight: 500; font-size: 44px; line-height: 1.2; color: var(--color-accent); text-decoration: none; }
.as-desk__hours { padding: 2px 20px; border-radius: 5px; background: var(--color-white); font-family: var(--font-ja); font-weight: 700; font-size: 16px; line-height: 1.5; color: var(--color-main); }
.as-s02__bases { margin-top: 60px; }
.as-s02__grid { margin-top: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.as-base { display: flex; flex-direction: column; gap: 15px; padding: 25px; border: 1px solid var(--color-sub); border-radius: 5px; background: var(--color-bg-light); }
.as-base__head { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.as-base .tag-label { padding: 2px 15px; font-size: 16px; }
.as-base__name { font-family: var(--font-ja); font-weight: 700; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; color: var(--color-text); }
.as-base__info { flex: 1 1 auto; align-content: start; font-size: 14px; letter-spacing: 0.35px; column-gap: 15px; }
.as-base__info dt { padding-right: 15px; }
.as-base__btn .btn-solid { padding: 12px 24px; font-size: 14px; }
@media (hover: hover) {
.as-desk__note a:hover, .as-desk__tel a:hover { opacity: 0.7; }
}
@media (max-width: 1300px) {
.as-s01__panel { padding: 40px 40px 50px; }
.as-s01__grid { gap: 20px; }
.as-sym { padding: 0 20px; }
.as-sym li { font-size: 15px; }
.as-s02__top { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.as-s02__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
}
@media (max-width: 1024px) {
.as-s01__grid { grid-template-columns: minmax(0, 1fr); }
.as-s02__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 896px) {
.as-s01 { padding: 60px 0; }
.as-s01__ttl { font-size: 28px; letter-spacing: 0.7px; }
.as-s01__lead { margin-top: 15px; font-size: 17px; }
.as-s01__panel { margin-top: 30px; padding: 30px 25px 35px; }
.as-s01__grid { margin-top: 30px; }
.as-s02 { padding: 50px 0; margin-bottom: 60px; }
.as-s02__top { margin-top: 30px; }
.as-desk__ttl { font-size: 24px; }
.as-desk__tel a { font-size: 38px; }
.as-s02__bases { margin-top: 45px; }
.as-s02__grid { margin-top: 25px; }
}
@media (max-width: 568px) {
.as-s01 { padding: 40px 0; }
.as-s01__ttl { font-size: 22px; letter-spacing: 0.55px; }
.as-s01__lead { font-size: 15px; }
.as-s01__panel { padding: 20px 15px 25px; }
.as-s01__grid { margin-top: 20px; gap: 15px; }
.as-sym { padding: 0 15px; gap: 8px; }
.as-sym li { padding-left: 28px; font-size: 14px; }
.as-sym li::before { width: 19px; height: 21px; }
.as-s02 { padding: 40px 0; margin-bottom: 40px; }
.as-s02__top { gap: 20px; }
.as-partner { flex-direction: column; align-items: stretch; gap: 15px; padding: 20px; }
.as-partner__logo { width: 160px; margin: 0 auto; }
.as-partner__name { font-size: 17px; }
.as-partner__txt { margin-top: 10px; font-size: 14px; }
.as-partner__txt br { display: none; }
.as-desk { padding: 25px 15px; }
.as-desk__ttl { font-size: 20px; }
.as-desk__tel a { font-size: 32px; }
.as-desk__hours { font-size: 14px; }
.as-desk__note { font-size: 13px; }
.as-s02__bases { margin-top: 35px; }
.as-s02__grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
.as-base { padding: 20px; gap: 12px; }
.as-base__name { font-size: 17px; }
}
/* =============================================================
[callcenter] お客様専用コールセンター（prefix: cc-）
============================================================= */
/* 音声ガイダンス番号の受付時間。本文（PC 20px / ≤896 17px）より一回り小さく、太さは本文に揃える */
.cc-menu__hours { font-size: 0.8em; }
/* =============================================================
[movie-gallery] 動画ギャラリー（/pages/movie-gallery・prefix: mvg-）
動画は管理画面のメタオブジェクト movie_gallery で登録する（テンプレート冒頭のコメント参照）。
============================================================= */
/* movie-gallery01: [common] の .lower-intro を単一カラムで流用。Figma はテキスト幅 968px・見出し→本文 30px */
.mvg-s01 .lower-intro__col--txt { max-width: 968px; }
.mvg-s01 .lower-intro__body { margin-top: 30px; }
/* movie-gallery02: 区分見出し（.sec-title）→ 30px → カード群。カードは 455px × 3列・縦横 gap 59px（Figma） */
.mvg-s02 { padding-bottom: 100px; }
.mvg-s02__cat + .mvg-s02__cat { margin-top: 100px; }
.mvg-s02__empty { font-size: 16px; line-height: 1.7; color: var(--color-text); }
.mvg-list { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 59px; }
.mvg-card { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mvg-card__ttl { font-family: var(--font-ja); font-weight: 700; font-size: 24px; line-height: 1.5; color: var(--color-black); }
.mvg-card__media { display: flex; flex-direction: column; }
/* 上辺の帯: ネイビー 4px の左端 120px をイエローに（Figma の Rectangle370 / 369） */
.mvg-card__bar { display: block; height: 4px; background: linear-gradient(to right, var(--color-accent) 120px, var(--color-main) 120px); }
.mvg-card__thumb { display: block; width: 100%; aspect-ratio: 1013 / 576; padding: 0; border: 0; background: var(--color-black); cursor: pointer; overflow: hidden; }
.mvg-card__thumb img { transition: opacity 0.3s, transform 0.3s; }
@media (hover: hover) {
.mvg-card__thumb:hover img { opacity: 0.85; transform: scale(1.03); }
}
.mvg-card__thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* 動画ファイル再生モーダル: 共通 .video-modal__frame（16:9・黒地）に video を敷き詰める */
.mvg-modal__video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--color-black); }
@media (max-width: 1300px) {
.mvg-list { gap: 40px; }
.mvg-card__ttl { font-size: 22px; }
}
@media (max-width: 1024px) {
.mvg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 30px; }
}
@media (max-width: 896px) {
.mvg-s01 .lower-intro__body { margin-top: 25px; }
.mvg-s02 { padding-bottom: 60px; }
.mvg-s02__cat + .mvg-s02__cat { margin-top: 60px; }
.mvg-list { margin-top: 25px; }
.mvg-card__ttl { font-size: 20px; }
}
@media (max-width: 568px) {
.mvg-s01 .lower-intro__body { margin-top: 15px; }
.mvg-s02 { padding-bottom: 40px; }
.mvg-s02__cat + .mvg-s02__cat { margin-top: 40px; }
.mvg-list { grid-template-columns: minmax(0, 1fr); gap: 25px; }
.mvg-card__ttl { font-size: 18px; }
.mvg-s02__empty { font-size: 14px; }
}
/* =============================================================
[sns-list] 公式SNS紹介（/pages/sns-list・prefix: snl-）
============================================================= */
/* sns-list01: [common] の .lower-intro を単一カラムで流用。Figma はテキスト幅 1028px・見出し→本文 30px・次のセクションまで 45px */
.snl-s01 { padding-bottom: 45px; }
.snl-s01 .lower-intro__col--txt { max-width: 1028px; }
.snl-s01 .lower-intro__body { margin-top: 30px; }
/* sns-list02: 711px × 2列・縦横 gap 60px（Figma）。見出し行 = アカウント名 + 縦罫線 + ボタン（gap 30px） */
.snl-s02 { padding-bottom: 100px; }
.snl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
.snl-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.snl-card__head { display: flex; align-items: center; gap: 30px; }
.snl-card__name { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.snl-card__ttl { font-family: var(--font-ja); font-weight: 600; font-size: 24px; line-height: 1.7; color: var(--color-text); }
.snl-card__en { display: flex; align-items: center; gap: 10px; font-family: var(--font-en); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--color-text); }
.snl-card__sep { flex: none; align-self: stretch; width: 1px; background: var(--color-main); }
.snl-card__btn { flex: none; }
.snl-card__body { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-ja); line-height: 1.7; color: var(--color-text); }
.snl-card__lead { font-weight: 600; font-size: 18px; }
.snl-card__txt { font-weight: 400; font-size: 16px; }
/* 最長の見出し行（やまちゃん: 名前375 + 罫線・gap 61 + ボタン243 = 679px）が列幅に収まらなくなる幅から、ボタンを名前の下へ回す（縦罫線は非表示） */
@media (max-width: 1540px) {
.snl-card__head { flex-direction: column; align-items: flex-start; gap: 15px; }
.snl-card__sep { display: none; }
}
@media (max-width: 1024px) {
.snl-list { gap: 50px 40px; }
.snl-card__ttl { font-size: 22px; }
}
@media (max-width: 896px) {
.snl-s01 { padding-bottom: 40px; }
.snl-s01 .lower-intro__body { margin-top: 25px; }
.snl-s02 { padding-bottom: 60px; }
.snl-list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.snl-card { gap: 15px; }
.snl-card__ttl { font-size: 20px; }
.snl-card__lead { font-size: 16px; }
.snl-card__txt { font-size: 14px; }
}
@media (max-width: 568px) {
.snl-s01 { padding-bottom: 30px; }
.snl-s01 .lower-intro__body { margin-top: 15px; }
.snl-s02 { padding-bottom: 40px; }
.snl-list { gap: 30px; }
.snl-card__ttl { font-size: 18px; }
.snl-card__txt br { display: none; }
}
/* =============================================================
[shoplist] MOBIPARK全国パートナー（/pages/partner・templates/page.partner.json・prefix: sl- / 店舗カード psc-）
・セクション: sections/shoplist-intro / -types / -search / -standard.liquid、JS: assets/shoplist.js
・KV / パンくず / 共通コンテンツ帯は [common] + merged.css を流用（ページ固有指定なし）
・shoplist01 / shoplist03 は [common] の .lower-intro を流用し、test-ride01 と同じ 771:651 の横長画像1枚に差し替え
・店舗カード .psc（snippets/partner-store-card.liquid）は現状このページ専用。
他ページで使う場合は [common] へ切り出すこと（規約 3-3-1-b）
============================================================= */
.sl-sec { background: var(--color-bg-yellow); } /* ページ地色 #F3F0EA（JSON テンプレートのセクション外枠に付く class） */
/* --- 区分バッジ（比較表・区分カード共用）--- */
.sl-badge { display: inline-block; padding: 2px 12px; font-family: var(--font-en); font-weight: 400; font-size: 13px; letter-spacing: 0.65px; line-height: 1.5; }
.sl-badge--premium { background: var(--color-accent); color: var(--color-main); }
.sl-badge--dealer { background: var(--color-main); color: var(--color-white); }
.sl-badge--service { background: var(--color-white); border: 1px solid var(--color-main); color: var(--color-main); }
/* --- shoplist01: 導入文 / shoplist03: パートナー店 安心の約束 ---
Figma: 左テキスト 771（03 は 770） / gap 60 / 右画像 651×367。見出し→本文 30px。 */
.sl-s01 .lower-intro__inner,
.sl-s04 .lower-intro__inner { gap: 60px; }
.sl-s01 .lower-intro__col--txt,
.sl-s04 .lower-intro__col--txt { flex: 771 1 0; }
.sl-s01 .lower-intro__body { margin-top: 30px; }
.sl-s01__flag { margin-top: 20px; font-size: 14px; letter-spacing: 0.35px; line-height: 1.7; color: var(--color-text); } /* 旗艦店への導線 */
.sl-s01__flagbtn { margin-top: 15px; }
.sl-s01__img { flex: 651 1 0; min-width: 0; aspect-ratio: 651 / 367; }
.sl-s04 { padding: 0 0 100px; }
.sl-s04__ttl { margin-top: 30px; font-family: var(--font-serif); font-weight: 500; font-size: 24px; letter-spacing: 0.6px; line-height: 1.7; color: var(--color-text); }
.sl-s04__body { margin-top: 10px; font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--color-text); }
/* --- shoplist-type: 店舗の種類と対応サービス ---
Figma: 見出し → 30px → 比較表 → 30px → 注記 → 60px → 区分カード3列（gap 30）。 */
.sl-s02 { padding-bottom: 100px; }
.sl-table { width: 100%; margin-top: 30px; border-collapse: collapse; table-layout: fixed; background: var(--color-white); border: 1px solid #d6d4cc; }
.sl-table thead th { padding: 16px 30px; background: var(--color-main); font-family: var(--font-ja); font-weight: 700; font-size: 16px; letter-spacing: 0.4px; line-height: 1.5; color: var(--color-white); text-align: center; }
.sl-table thead th.sl-table__tier { width: 32.52%; text-align: left; } /* 482 / 1482 */
.sl-table tbody th,
.sl-table tbody td { padding: 24px 30px; border-top: 1px solid #d6d4cc; text-align: center; vertical-align: middle; }
.sl-table tbody th { text-align: left; }
.sl-table__name { display: block; margin-top: 4px; font-family: var(--font-ja); font-weight: 700; font-size: 18px; letter-spacing: 0.45px; line-height: 1.5; color: var(--color-main); }
.sl-table__short { display: none; }
.sl-mark { display: block; font-family: var(--font-ja); font-weight: 700; font-size: 28px; line-height: 1.3; color: var(--color-main); }
.sl-mark--partial { font-size: 24px; }
.sl-mark--no { font-size: 24px; color: #8c8c8c; }
.sl-mark__note { display: block; margin-top: 4px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--color-text); }
.sl-s02__notes { margin-top: 30px; font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.sl-s02__notes p + p { margin-top: 4px; }
.sl-tiers { margin-top: 60px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; list-style: none; padding: 0; }
.sl-tier { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px; background: var(--color-white); }
.sl-tier--premium { border-top: 6px solid var(--color-accent); }
.sl-tier__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: 0.65px; line-height: 1.5; color: var(--color-text); }
.sl-tier__catch { font-family: var(--font-ja); font-weight: 700; font-size: 16px; letter-spacing: 0.4px; line-height: 1.6; color: var(--color-main); }
.sl-tier__body { font-family: var(--font-ja); font-weight: 400; font-size: 15px; line-height: 1.8; color: var(--color-text); }
.sl-tier__svc { margin-top: 17px; } /* Figma: 本文と「対応サービス」の間に 1px のスペーサー（gap 16 + 1 + 16） */
.sl-tier__svclabel { font-family: var(--font-ja); font-weight: 400; font-size: 13px; letter-spacing: 0.325px; line-height: 1.5; color: #8c8c8c; }
.sl-tier__chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.sl-tier__chip { padding: 4px 14px; border: 1px solid var(--color-main); border-radius: 999px; background: var(--color-main); font-family: var(--font-ja); font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--color-white); }
.sl-tier__chip--partial { background: var(--color-white); color: var(--color-main); }
.sl-tier__link { padding-top: 8px; }
.sl-tier__link a { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-ja); font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--color-main); text-decoration: none; }
.sl-tier__link a span { font-weight: 400; font-size: 12px; }
@media (hover: hover) {
.sl-tier__link a:hover { text-decoration: underline; }
}
/* --- shoplist02: 店舗を探す ---
Figma: 見出し → 30px → 左ナビ 320 / gap 70 / 右 1092。右は 絞り込み → 40px → 地域見出し → 40px → カード2列（gap 40）。 */
.sl-s03 { padding-bottom: 100px; scroll-margin-top: 115px; }
.sl-s03 [hidden] { display: none !important; }
.sl-search { margin-top: 30px; display: flex; align-items: flex-start; gap: 70px; }
.sl-search__nav { flex: 0 0 320px; position: sticky; top: 115px; } /* 固定ヘッダー（PC 高さ95px）の下に追従させる */
.sl-search__navlabel { display: none; }
.sl-search__main { flex: 1 1 0; min-width: 0; }
.sl-area { display: flex; flex-direction: column; gap: 15px; list-style: none; padding: 0; }
.sl-area__btn { display: flex; height: 50px; text-decoration: none; }
.sl-area__num { flex: 0 0 50px; display: flex; align-items: center; justify-content: center; border-radius: 5px 0 0 5px; background: var(--color-main); font-family: var(--font-en); font-weight: 400; font-size: 24px; line-height: 1; color: var(--color-accent); }
.sl-area__label { flex: 1 1 0; min-width: 0; display: flex; align-items: center; padding-left: 19px; border: 1px solid var(--color-main); border-radius: 0 5px 5px 0; background: var(--color-white); font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.5; color: var(--color-black); transition: background 0.3s, color 0.3s; }
.sl-area__btn.is-active .sl-area__label { background: var(--color-main); color: var(--color-accent); }
.sl-filter { padding: 24px 30px; border: 1px solid #d6d4cc; background: var(--color-white); }
.sl-filter__label { font-family: var(--font-ja); font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--color-main); }
.sl-filter__chips { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.sl-filter__tier { margin-top: 14px; }
.sl-chip { display: inline-flex; align-items: center; padding: 8px 18px; border: 1px solid var(--color-main); border-radius: 999px; background: var(--color-white); font-family: var(--font-ja); font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--color-main); white-space: pre; cursor: pointer; transition: background 0.3s, color 0.3s; }
.sl-chip[aria-pressed="true"] { background: var(--color-main); color: var(--color-white); }
.sl-chip--tier { background: var(--color-accent); }
.sl-chip__x { margin-left: 10px; font-weight: 400; }
@media (hover: hover) {
.sl-area__btn:not(.is-active):hover .sl-area__label { background: var(--color-bg-yellow); }
.sl-chip:not([aria-pressed="true"]):hover { background: var(--color-bg-yellow); }
}
/* 地域見出し: 和文 + EN（下半分に黄色マーカー）+ 件数、右に罫線 */
.sl-head { margin-top: 40px; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 20px; align-items: center; scroll-margin-top: 115px; }
.sl-head::after { content: ""; grid-column: 2; grid-row: 1 / 3; height: 1px; background: var(--color-sub); }
.sl-head__ttl { grid-column: 1; font-family: var(--font-serif); font-weight: 600; font-size: 30px; letter-spacing: 0.75px; line-height: 1.5; color: var(--color-black); }
.sl-head__en { grid-column: 1; font-family: var(--font-en); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--color-main); }
.sl-head__enword { background: linear-gradient(transparent 15px, var(--color-accent) 15px, var(--color-accent) 23px, transparent 23px); }
/* JS の有無で出し分け（is-js は section 先頭のインラインスクリプトが描画前に付与する） */
.sl-s03:not(.is-js) .sl-search__nav,
.sl-s03:not(.is-js) .sl-filter,
.sl-s03:not(.is-js) [data-sl-head] { display: none; }
.sl-s03.is-js .sl-head--all { display: none; }
.sl-s03.is-js .psc:not(.is-show) { display: none; }
.sl-s03:not(.is-js) .sl-search__main { flex-basis: 100%; }
.sl-list { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; }
/* さらに表示（PC 版は Figma 未作成。SP 版と同じスタイルで、幅はカード1枚分に留める） */
.sl-more { margin-top: 40px; display: flex; justify-content: center; }
.sl-more__btn { width: 100%; max-width: 526px; padding: 14px 20px; border: 1px solid var(--color-main); background: var(--color-white); font-family: var(--font-ja); font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--color-main); cursor: pointer; transition: background 0.3s; }
.sl-more__arrow { margin-left: 10px; }
@media (hover: hover) {
.sl-more__btn:hover { background: var(--color-bg-yellow); }
}
/* 0件表示（①エリアに店舗なし / ②絞り込み結果なし）
Figma: 白地 padding 70/60・要素間 24px。ボタンは ボタンA（.btn-solid）、近隣エリアは絞り込みチップと同じ形。 */
.sl-empty { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 70px 60px; background: var(--color-white); text-align: center; }
.sl-empty__icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--color-bg-yellow); font-family: var(--font-en); font-weight: 400; font-size: 32px; line-height: 1; color: var(--color-main); }
.sl-empty__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: 0.65px; line-height: 1.6; color: var(--color-text); word-break: auto-phrase; } /* 狭い幅で「ございま／せん」と切れないよう文節で改行（非対応ブラウザは通常の改行） */
.sl-empty__txt { font-family: var(--font-ja); font-weight: 400; font-size: 16px; line-height: 1.8; color: var(--color-text); }
.sl-empty__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; list-style: none; padding: 0; }
.sl-empty__cond { font-family: var(--font-ja); font-weight: 400; font-size: 15px; line-height: 1.7; color: var(--color-main); }
.sl-empty__cond span { font-weight: 700; }
.sl-empty__reset .btn-solid { cursor: pointer; }
.sl-empty__foot { width: 100%; max-width: 600px; display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 24px; border-top: 1px solid #d6d4cc; }
.sl-empty__nearby { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.sl-empty__nearbylabel { font-family: var(--font-ja); font-weight: 700; font-size: 15px; line-height: 1.7; color: var(--color-main); }
.sl-empty__nearbychips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sl-empty__tel { font-family: var(--font-ja); font-weight: 400; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.sl-empty__tel span { margin-right: 1em; }
.sl-empty__tel a { color: inherit; text-decoration: none; }
.sl-empty__recruit { font-family: var(--font-ja); font-weight: 700; font-size: 14px; line-height: 1.7; color: var(--color-main); }
.sl-empty__recruit > span { margin-right: 1em; }
.sl-empty__recruit a { color: inherit; text-decoration: none; }
@media (hover: hover) {
.sl-empty__recruit a:hover { text-decoration: underline; }
}
/* --- 店舗カード（.psc）---
Figma: 写真 526×346 → 20px → 店名 → 10px → 対応サービス → 10px → 情報欄（[common] .info-list）→ 10px → ボタンA。
写真左上に 都道府県 + 区分 のタグ（角丸なし）。 */
.psc { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.psc__img { position: relative; aspect-ratio: 526 / 346; overflow: hidden; background: #e5e5e0; }
.psc__tags { position: absolute; left: 20px; top: 20px; z-index: 1; display: flex; flex-wrap: wrap; }
.psc__pref,
.psc__tier { padding: 5px 16px; border: 1px solid var(--color-main); font-family: var(--font-ja); font-weight: 600; font-size: 16px; letter-spacing: 0.4px; line-height: 1.5; }
.psc__pref { padding-left: 20px; padding-right: 20px; background: var(--color-white); color: var(--color-main); }
.psc__tier--premium { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-main); }
.psc__tier--dealer { background: var(--color-main); color: var(--color-white); }
.psc__tier--service { background: var(--color-white); color: var(--color-main); }
.psc__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.psc__name { font-family: var(--font-ja); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; color: var(--color-black); }
.psc__svcs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.psc__svc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border: 1px solid var(--color-main); border-radius: 999px; background: var(--color-white); font-family: var(--font-ja); font-weight: 700; font-size: 13px; line-height: 1.5; color: var(--color-main); }
.psc__svc::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-main); }
.psc__svc--ride::before { border: 1px solid var(--color-main); background: var(--color-accent); } /* Figma: 試乗だけ黄色の丸 */
.psc--noimg .psc__tags { position: static; } /* プレミアム取扱店以外は写真枠が無いため、タグを本文の先頭に置く */
/* 試乗可能車種: 車種名 + カラーの丸（丸は商品詳細 .detail-color__swatch と同じ見た目・操作なし） */
.psc__ride { width: 100%; display: flex; align-items: flex-start; gap: 6px 16px; padding: 12px 16px; background: var(--color-white); }
.psc__ride-ttl { flex: none; font-family: var(--font-ja); font-weight: 700; font-size: 13px; line-height: 22px; color: var(--color-main); }
.psc__models { display: flex; flex-direction: column; gap: 6px; min-width: 0; list-style: none; padding: 0; }
.psc__model { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.psc__model-name { font-family: var(--font-en); font-weight: 500; font-size: 14px; line-height: 22px; color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s; }
.psc__model-name:hover { opacity: 0.6; } /* 車種名は商品詳細へのリンク */
.psc__swatches { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.psc__swatch { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--sw); border: 1px solid var(--color-sub); display: block; transition: box-shadow .2s; }
.psc__swatch--two { background: linear-gradient(90deg, var(--sw) 50%, var(--sw2) 50%); } /* 左 = 車体色 / 右 = ハンドル色（swatch_hex2） */
.psc__swatch:hover, .psc__swatch:focus-visible { box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-main); outline: none; } /* 商品詳細の選択中リングと同じ */
.psc__info { width: 100%; }
.psc__info > dt:first-of-type, .psc__info > dd:first-of-type { padding-top: 0; } /* Figma: 情報欄の上下端は行間 padding を持たない */
.psc__info > dt:last-of-type, .psc__info > dd:last-of-type { padding-bottom: 0; }
/* --- レスポンシブ --- */
@media (max-width: 1300px) {
.sl-table thead th { padding: 16px 20px; }
.sl-table tbody th,
.sl-table tbody td { padding: 22px 20px; }
.sl-tier { padding: 30px; }
.sl-tier__ttl { font-size: 22px; }
.sl-search { gap: 40px; }
.sl-search__nav { flex-basis: 260px; }
.sl-list { gap: 30px; }
}
@media (max-width: 1024px) {
.sl-tiers { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sl-search { display: block; }
.sl-search__nav { position: static; }
.sl-search__navlabel { display: block; font-family: var(--font-ja); font-weight: 700; font-size: 14px; line-height: 1.5; color: var(--color-main); }
.sl-area { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sl-area__btn { height: 44px; border: 1px solid var(--color-main); background: var(--color-white); transition: background 0.3s; }
.sl-area__num { flex-basis: 40px; border-radius: 0; font-size: 16px; }
.sl-area__label { padding-left: 12px; border: 0; border-radius: 0; background: none; font-size: 13px; }
.sl-area__btn.is-active { background: var(--color-main); }
.sl-area__btn.is-active .sl-area__label { background: none; }
.sl-search__main { margin-top: 20px; }
}
@media (hover: hover) and (max-width: 1024px) {
.sl-area__btn:not(.is-active):hover { background: var(--color-bg-yellow); }
.sl-area__btn:not(.is-active):hover .sl-area__label { background: none; }
}
@media (max-width: 896px) {
.sl-s01__img { margin-top: 40px; }
.sl-s01 .lower-intro__body { margin-top: 25px; }
.sl-s04 { padding-bottom: 60px; }
.sl-s04__ttl { margin-top: 20px; font-size: 20px; }
.sl-s02,
.sl-s03 { padding-bottom: 60px; }
.sl-s03 { scroll-margin-top: 60px; } /* 固定ヘッダー 896px以下 50px */
.sl-head { scroll-margin-top: 60px; }
.sl-tiers { margin-top: 40px; }
.psc__img { aspect-ratio: 362 / 200; }
.sl-empty { padding: 50px 30px; }
}
@media (max-width: 768px) {
.sl-list { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 568px) {
.sl-s01__img { margin-top: 25px; }
.sl-s01 .lower-intro__body { margin-top: 15px; }
.sl-s04__ttl { font-size: 18px; }
.sl-s04__body { font-size: 14px; }
/* 比較表: SP は列見出しを短縮し、区分列以外を 72px 固定（横スクロールなし） */
.sl-table { margin-top: 20px; }
.sl-table thead th { width: 72px; padding: 10px 4px; font-size: 11px; letter-spacing: 0; line-height: 1.4; }
.sl-table thead th.sl-table__tier { width: auto; padding: 10px 8px 10px 12px; }
.sl-table tbody th,
.sl-table tbody td { padding: 14px 4px; }
.sl-table tbody th { padding: 14px 8px 14px 12px; }
.sl-table__long,
.sl-table__num { display: none; }
.sl-table__short { display: inline; }
.sl-table .sl-badge { padding: 1px 8px; font-size: 10px; letter-spacing: 0.5px; }
.sl-table__name { font-size: 13px; letter-spacing: 0; }
.sl-mark { font-size: 22px; }
.sl-mark--partial,
.sl-mark--no { font-size: 18px; }
.sl-mark__note { font-size: 10px; line-height: 1.4; white-space: nowrap; }
.sl-s02__notes { margin-top: 20px; font-size: 12px; }
.sl-tiers { margin-top: 32px; gap: 16px; }
.sl-tier { gap: 12px; padding: 28px 24px; }
.sl-tier--premium { border-top-width: 5px; }
.sl-tier .sl-badge { padding: 1px 10px; font-size: 11px; letter-spacing: 0.55px; }
.sl-tier__ttl { font-size: 20px; letter-spacing: 0; }
.sl-tier__catch { font-size: 14px; letter-spacing: 0; }
.sl-tier__catch br { display: none; }
.sl-tier__body { font-size: 13px; }
.sl-tier__svc { margin-top: 0; }
.sl-tier__svclabel { font-size: 12px; letter-spacing: 0; }
.sl-tier__chips { margin-top: 12px; gap: 6px; }
.sl-tier__chip { padding: 3px 12px; font-size: 12px; }
.sl-tier__link { padding-top: 4px; }
.sl-tier__link a { gap: 6px; font-size: 14px; }
.sl-tier__link a span { font-size: 11px; }
.sl-area { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-filter { padding: 16px; }
.sl-filter__label { font-size: 14px; }
.sl-filter__chips { margin-top: 10px; gap: 8px; }
.sl-filter__tier { margin-top: 10px; }
.sl-chip { padding: 6px 14px; font-size: 12px; }
.sl-head { margin-top: 20px; padding-top: 16px; display: block; }
.sl-head::after { content: none; }
.sl-head__ttl { font-size: 22px; letter-spacing: 0.55px; }
.sl-head__en { font-size: 14px; }
.sl-head__enword { background: none; }
.sl-list { margin-top: 20px; gap: 32px; }
.sl-more { margin-top: 20px; }
.sl-more__btn { max-width: none; }
.sl-empty { margin-top: 20px; gap: 20px; padding: 40px 20px; }
.sl-empty__ttl { font-size: 22px; letter-spacing: 0.55px; }
.sl-empty__txt { font-size: 14px; text-align: left; }
.sl-empty__txt br { display: none; }
.sl-empty__btns { flex-direction: column; width: 100%; }
.sl-empty__btns .btn-solid,
.sl-empty__reset .btn-solid { width: 100%; justify-content: center; white-space: normal; }
.sl-empty__reset { width: 100%; }
.sl-empty__foot { gap: 20px; padding-top: 20px; }
.sl-empty__nearby { flex-direction: column; gap: 12px; }
.sl-empty__nearbychips { gap: 8px; }
.sl-empty__tel { font-size: 13px; }
.sl-empty__recruit { font-size: 13px; }
.sl-empty__recruit > span { display: block; margin-right: 0; }
/* 店舗カード: SP は情報欄のアイコン・罫線を外し、グレーのラベル列 64px に */
.psc { gap: 12px; }
.psc__tags { left: 12px; top: 12px; }
.psc__pref,
.psc__tier { padding: 3px 10px; font-size: 12px; letter-spacing: 0; }
.psc__pref { padding-left: 12px; padding-right: 12px; }
.psc__tier--premium { border-color: var(--color-main); }
.psc__body { gap: 12px; }
.psc__name { font-size: 17px; letter-spacing: 0; }
.psc__svcs { gap: 6px; }
.psc__svc { gap: 5px; padding: 2px 10px; font-size: 12px; }
.psc__svc::before { width: 7px; height: 7px; }
.psc__ride { flex-direction: column; padding: 10px 12px; }
.psc__model-name { font-size: 13px; }
.psc__swatch { width: 16px; height: 16px; }
.psc__info { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; font-size: 13px; letter-spacing: 0; }
.psc__info dt { padding: 0; border-right: 0; color: #737373; }
.psc__info dd { padding: 0; color: var(--color-text); }
.psc__info .info-list__ic { display: none; }
.psc__btn { width: 100%; }
.psc__btn .btn-solid { width: 100%; justify-content: center; }
}
/* SP 比較表: Figma（402px）では「サービスパートナー店」が1行。390px 以上は右余白を詰めて1行に収め、それ未満は折り返す */
@media (min-width: 390px) and (max-width: 568px) {
.sl-table tbody th { padding-right: 4px; }
.sl-table__name { white-space: nowrap; }
}
/* =============================================================
[shop] 店舗について（/pages/shop・templates/page.shop.liquid・prefix: shp-）
・KV / パンくず / 見出し / タグ / 情報欄は [common] + merged.css を流用（.lower-kv--page / .sec-title / .tag-label / .info-list--lg）
・旗艦店の見出し（ワードマーク + 店名）は page.test-ride の .tr-s02__logo と同じ見た目。
3ページ目で使うときは [common] へ切り出すこと
============================================================= */
.shp-s01 { padding: 90px 0 100px; }
.shp-s01__gallery { margin-top: 40px; display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: 1482 / 640; list-style: none; padding: 0; }
.shp-s01__photo { min-width: 0; min-height: 0; overflow: hidden; background: #e5e5e0; }
.shp-s01__photo:first-child { grid-row: 1 / 3; }
.shp-s01__detail { margin-top: 60px; display: flex; align-items: flex-start; gap: 60px; }
.shp-s01__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.shp-s01__logo { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; font-weight: 400; }
.shp-s01__logoimg { display: block; width: 360px; max-width: 100%; }
.shp-s01__logotxt { font-family: var(--font-en); font-weight: 400; font-size: 24px; line-height: 1.5; color: var(--color-black); }
.shp-s01__lead { font-size: 16px; letter-spacing: 0.8px; line-height: 1.9; color: var(--color-text); }
.shp-s01__brands { width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px; padding-top: 30px; border-top: 1px solid var(--color-sub); }
.shp-s01__brandsttl { font-weight: 700; font-size: 14px; letter-spacing: 0.35px; color: var(--color-main); }
.shp-s01__brandlist { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 30px; list-style: none; padding: 0; }
.shp-s01__brandlogo { width: 120px; }
.shp-s01__info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.shp-s01__map { margin-top: 60px; aspect-ratio: 1482 / 480; background: #e5e5e0; }
.shp-s01__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.shp-s02 { padding-bottom: 100px; }
.shp-s02__box { display: flex; align-items: center; justify-content: space-between; gap: 30px 60px; padding: 50px 60px; background: var(--color-white); }
.shp-s02__txt { min-width: 0; }
.shp-s02__ttl { font-family: var(--font-serif); font-weight: 500; font-size: 28px; letter-spacing: 0.7px; line-height: 1.5; color: var(--color-main); }
.shp-s02__body { margin-top: 10px; font-size: 16px; letter-spacing: 0.4px; line-height: 1.7; color: var(--color-text); }
.shp-s02__btn { flex: none; }
@media (max-width: 1300px) {
.shp-s01__detail { gap: 40px; }
.shp-s01__logoimg { width: 280px; }
.shp-s01__logotxt { font-size: 20px; }
}
@media (max-width: 896px) {
.shp-s01 { padding: 50px 0 60px; }
.shp-s01__gallery { margin-top: 30px; aspect-ratio: 4 / 3; }
.shp-s01__detail { margin-top: 40px; flex-direction: column; gap: 40px; }
.shp-s01__body, .shp-s01__info { width: 100%; }
.shp-s01__map { margin-top: 40px; aspect-ratio: 4 / 3; }
.shp-s02 { padding-bottom: 60px; }
.shp-s02__box { flex-direction: column; align-items: flex-start; padding: 40px 30px; }
.shp-s02__ttl { font-size: 22px; }
}
@media (max-width: 568px) {
.shp-s01__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; aspect-ratio: auto; gap: 6px; }
.shp-s01__photo { aspect-ratio: 4 / 3; }
.shp-s01__photo:first-child { grid-row: auto; grid-column: 1 / 3; }
.shp-s01__body { gap: 20px; }
.shp-s01__logo { gap: 10px; }
.shp-s01__logoimg { width: 220px; }
.shp-s01__logotxt { font-size: 17px; }
.shp-s01__lead { font-size: 14px; letter-spacing: 0.35px; }
.shp-s01__brands { padding-top: 20px; }
.shp-s01__brandlist { gap: 12px 20px; }
.shp-s01__brandlogo { width: 90px; }
.shp-s01__info .info-list { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; font-size: 14px; letter-spacing: 0; }
.shp-s01__info .info-list dt { padding: 0; border-right: 0; color: #737373; }
.shp-s01__info .info-list dd { padding: 0; }
.shp-s01__info .info-list__ic { display: none; }
.shp-s01__btn, .shp-s01__btn .btn-solid { width: 100%; justify-content: center; }
.shp-s02__box { padding: 30px 20px; }
.shp-s02__body { font-size: 14px; }
.shp-s02__btn, .shp-s02__btn .btn-solid { width: 100%; justify-content: center; white-space: normal; }
}
/* =============================================================
[guide] ご利用ガイド（/pages/guide・prefix: gd-）
・本体のスタイルは merged.css。ここは追加分のみ
============================================================= */
.gd-shop-link { margin-left: 24px; } /* 「Google Mapで見る」の横の旗艦店リンク（見た目は .receive-shop__map を流用） */