/** Shopify CDN: Minification failed
Line 4533:8 Expected identifier but found whitespace
Line 4533:9 Unexpected "1.5rem"
Line 18687:8 Expected identifier but found whitespace
Line 18687:9 Unexpected "1.5rem"
Line 21767:2 Unexpected "}"
**/
/* ============================================================
INTEGRATED CSS (2026-06-22 full consolidation)
Order preserves previous cascade exactly:
1. mp-css-common.css
2. mp-css-style.css
3. mp-renew-common.css
4. mp-brand-pages.css
5. (original) mp-css-style.merged.css content (wins on duplicates)
Source files have been deleted from layouts; this single file
is the SSOT for all renewal-era CSS.
============================================================ */
/* ----- [1/5] mp-css-common.css ----- */
@charset "UTF-8";
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1;
color: #222;
-webkit-font-smoothing: antialiased;
font-weight: 400;
position: relative;
width: 100%;
}
/* Layout */
/* Text */
/* Spacing */
/* Images */
/* SP-only break tag */
/* Full-width button modifier */
/* ----- [2/5] mp-css-style.css ----- */
/* common.css の body min-width を全幅で解除 */
/* ===== SP-only DOM elements (hidden on PC) ===== */
/* ===== CSS Variables ===== */
/* ===== Base ===== */
/* 横方向のはみ出し(右側の余白/横スクロール)を root でも抑止。
body だけだと fixed 要素や html 基準のはみ出しが残るため html にも付与。
clip は scroll container を作らないため position:sticky(.detail-gallery 等)を壊さない。 */
main {
/* padding-top: 182px; */
}
/* ===== Container ===== */
/* ===== Section Title (.sec-title) ===== */
/* ===== Section Heading (共通見出しスタイル) ===== */
/* ===== Buttons ===== */
/* btn-main の軽量バリエーション: 全幅・薄色背景・左アイコン付き。
矢印は btn-main の ::after を流用し dark (icon_arrow_btn_dk.svg) に。(Figma 1482-1158) */
/* ===== HEADER ===== */
/* ---- Global Nav ---- */
/* ---- Dropdown panel ---- */
/* 10px dark band at the very top of the dropdown */
/* Left dark photo panel */
/* Right white panel */
/* Card */
/* ご購入後のサポート: side text list */
/* Header Right */
/* ===== SIDE A ===== */
/* 装飾リング（ヘッダー境界にかかる白いリング） */
/* アクセントバー */
/* メンバー登録ログイン */
/* MEMBER ワードマーク */
/* メンバーテキスト */
/* アイコン行 */
/* コールセンター */
/* フリーダイヤルロゴ */
/* 電話番号 */
/* ===== HAMBURGER MENU ===== */
/* 閉じるボタン */
/* ロゴバー */
/* ロゴバー右側アイコン */
/* メンバー + コールセンター行 */
/* ボディ */
/* ナビ */
/* バナーカラム */
/* メディア・SNS行 */
/* サブリンク */
/* 丸矢印アイコン */
/* SNS */
/* ===== FIXED SIDE BANNERS ===== */
/* タブ列 wrapper */
/* 閉じるタブ */
/* 開くタブ */
/* 閉じている状態 */
/* バナー共通 */
/* 試乗予約: 文字ボックス */
/* バナーフッター (テキスト + 矢印) */
/* 取扱店募集についてはテキストが長くはみ出すため小さく */
/* 矢印 */
/* 遵守義務: オーバーレイ */
/* 遵守義務: テキスト */
/* 遵守義務: 注目バッジ */
/* 遵守義務: 矢印 (単体、右下) */
/* ===== MV (Main Visual) ===== */
/* MV Product Slider */
/* direction:rtl required for Slick rtl:true — it positions track with positive left values */
/* reset direction on slide content so text reads LTR */
/* bike image: right edge at 25.98% margin, full height (Figma 607:26949) */
/* ===== PICKUP ===== */
/* 商品一覧ページ(#shop-list): 多数の商品を3カラムで折り返し表示 (≥897px)。
トップページの pickup-grid(1行3アイテム)には影響させないため #shop-list に限定。
≤896px は既存の縦積みカードパターンをそのまま使う */
/* 商品一覧ページのページャー (Figma 1178-13061) */
/* 現在ページ = メインカラー塗り + アクセント文字 */
/* 左矢印は icon_arrow_btn_dk.svg を左右反転 */
/* 型式認定車ラベル（LORIS/LA ROSE 等の車名上）。pickup/popular/一覧 共通。
flex の通常フローから外し、商品名の真上に absolute 配置（画像下の余白に収まる）。 */
/* スマホ: バッジを通常フロー(relative)に戻し、サイズを縮小 */
/* カード整列: 商品名の行数(長い英名)で name-row 高さが変わると
下の価格行がずれるため、PC(複数カラム)では name-row を2行分の高さで固定。
pickup/人気/一覧 すべて共通。SP(1カラム縦積み)は対象外。 */
/* 関連商品カードの型式認定車バッジ（pickup と同じバッジ意匠・商品名の上に配置） */
/* PICKUPアイコン ツールチップ（hoverで上側に表示。中身はJSで注入） */
/* 画面端での見切れ回避（JSで付与） */
/* 下向きの吹き出し矢印（既定はアイコン中央） */
/* 端寄せ時は矢印をアイコン位置（吹き出し端付近）に寄せる */
/* hover対応デバイスのみ。タッチ端末では発火させない（SPは非実装） */
/* ===== GUIDE SLIDER ===== */
/* slick.css の .slick-slide { height: 100% } より詳細度を上げて上書き */
.guide-pager__prev svg {
/* transform: rotate(180deg); */
}
/* ===== PURCHASE INFO ===== */
/* ===== PURCHASE INFO ===== */
/* ===== PURCHASE SECTION ===== */
/* ===== FAQ ===== */
@media (hover: hover) {
/* .faq-item:hover .faq-item__icon { background: var(--color-main); color: var(--color-white); } */
}
/* ===== BANNER SLIDER ===== */
/* ===== POPULAR MODELS ===== */
/* ===== BRANDS ===== */
/* ===== FEATURED MODELS ===== */
/* 注目モデル: ブロック幅 849px 固定（Figma準拠・PCのみ）。
レスポンシブ(<897px)では解除し、既存の縦積みレイアウトに従う。 */
@media (min-width: 897px) {
/* スライダー上限 1408px＋中央寄せ。centerPadding 16.4% でセル幅 945px とし、
中身(絶対配置の子)を左右50pxずつ内側に寄せることで
「モデル幅 845px + 隣接モデルと約100pxの余白」を両立させる。 */
/* 車種と車種の間隔を広げる: スライド中身は絶対配置(left:0/right:0)で padding を無視するため、
子要素自体を左右50pxずつ内側へ寄せ、隣接モデルと約100px離れて見せる */
}
/* PC(min-width:897px)のみ、テキスト/ボタンの opacity を JS(rAF)で
中央からの距離に応じて連続制御する。初期値は 0(非表示)。 */
/* SP(max-width:896px)/モーション抑制時: フェードなし。中央スライドのみ即表示。 */
/* ===== MOBIPARK WORLD ===== */
/* World feature tiles */
/* World thoughts section */
.world-thoughts__content-top {}
.world-thoughts__content-bottom {}
/* World right sub panels */
/* ===== PARTNERS ===== */
/* 試乗パネル */
/* Step cards */
/* 店舗パネル */
/* ===== NEWS & COLUMN ===== */
/* ===== SNS ===== */
/* 発表会動画サムネ（クリックでモーダル再生） */
/* ドキュメンタリー見出し */
/* EPリスト: エピソードが増えたらスクロール */
/* 動画モーダル（16:9） */
/* ===== COMMON CONTENT ===== */
/* ===== FOOTER ===== */
/* フッター内コンテンツ(およびサブリンクの上下ライン)をページの container 幅に揃える。
従来は #footer の padding のみで全幅だったため、広い画面(>1718px)で
コンテンツ・ラインが本文より外側にずれていた。1478px = container(1598) - padding(120)。 */
/* デスクトップ(>1100px)かつ subgrid 対応時のみ、2行のカラム左端を縦に揃える。
（商品一覧列が2列分の幅を持つため、flex のままだと下段の列とずれる）
非対応ブラウザ/≤1100px では上の flex を維持し、列折り返しも従来どおり動作。 */
@supports (grid-template-columns: subgrid) {
}
.footer-nav-col--member {}
/* ---- デスクトップ時: SP専用要素を非表示 ---- */
/* =========================================================
購入後サポート モーダル
========================================================= */
/* ===== アイコンマーク説明 モーダル（purchase-modal を流用） ===== */
/* 見出し「アイコンマーク説明」＋区切り線 */
/* 区切り線左側のネイビー部分（504px） */
/* 区切り線左端の黄色アクセント */
/* サブ見出し＋英語タイトル */
/* 黄色ハイライト（.partners-badge__en::before と同手法、色は accent） */
/* アイコンカード（2カラム） */
/* キャプション付きPNG（180×247）は上部の正方形タイルだけを表示（Figmaのマスク相当） */
/* アイコンマーク説明モーダル レスポンシブ */
/* ヘッダー（白背景）*/
/* pmc-header / pmc-pre-header 共通 */
/* 2カラムパネル */
/* ダーク：メンバーサービス */
/* =========================================================
ご購入前に知っておきたいこと モーダル
========================================================= */
/* =========================================================
レスポンシブ縮小 (897px〜1465px)
ナビは消さず、フォント・余白を段階的に縮小して897pxまで収める
========================================================= */
/* ── 1370px以下: guide-slider 2枚表示 ── */
/* ── 1300px以下: 軽い縮小 ── */
/* ── 1100px以下: ロゴ縮小・SNS非表示 ── */
@media (max-width: 1100px) {
/* ---- footer: 列折り返し対応 ---- */
}
/* ── 980px以下: さらに縮小・NEWS非表示 ── */
/* =========================================================
SP (≤896px) レスポンシブ
========================================================= */
@media (max-width: 896px) {
/* ---- body の min-width を解除 ---- */
/* ---- デスクトップ専用要素を非表示 ---- */
/* ---- ヘッダー ---- */
/* ロゴエリア */
/* デスクトップ専用ヘッダー要素を非表示 */
/* SP専用 E-BIKEリンク */
/* ハンバーガーボタン SP */
/* ---- HBGパネル SP ---- */
/* 閉じるボタン */
/* ロゴバー */
/* メタバー */
/* ボディ */
/* ナビ */
/* メディア・サブリンクセクション */
/* SNS行 */
/* ---- SP専用セクション ---- */
/* サブリンク */
/* 3カラムリンク */
/* バナーペア */
/* 遵守義務バナー */
}
/* =========================================================
PURCHASE-INFO / FAQ / BANNER-SLIDER レスポンシブ
========================================================= */
/* ── 896px以下: purchase 縦積み / faq縦積み ── */
@media (max-width: 896px) {
/* purchase */
/* faq */
/* banner */
}
@media (max-width: 896px) {
/* ---- 共通: container padding 上書き ---- */
/* ---- 固定フッターボタン分の余白 ---- */
/* ---- 共通: sec-title テキスト折り返し ---- */
/* ---- MV ---- */
/* ヘッドライン: 折り返し・サイズ縮小 */
/* slick が高さを内部計算するため、各要素に同じ高さを与える */
/* 商品テキスト + ブランド: 1番目に表示 */
/* 商品画像: 3番目に表示、残り高さを埋める */
/* #mv .mv-slide__img {
position: relative;
right: auto;
left: auto;
bottom: 0;
transform: none;
height: 130px;
width: 100%;
max-width: 100%;
object-fit: contain;
object-position: bottom;
order: 3;
flex-shrink: 0;
align-self: center;
} */
/* ---- PICKUP ---- */
/* ---- GUIDE ---- */
/* ---- POPULAR MODELS ---- */
/* clamp() が 896px 以下の最小値を保証するため font-size 上書きは不要 */
/* ---- BRANDS ---- */
/* Brand sections: 画像(250px)上 + コンテンツカード下 */
/* ---- FEATURED MODELS ---- */
/* order: name → image → description → buttons */
/* ---- MOBIPARK WORLD ---- */
/* Stat items: SP では1列に */
/* Tiles: 2×2 グリッド */
/* .world-tile:nth-child(1), .world-tile:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.2); } */
/* Thoughts: SP レイアウト */
/* ---- PARTNERS: partners-trial SP (world-thoughts と同パターン) ---- */
/* ---- partners-shop SP (partners-trial と同パターン) ---- */
/* ---- NEWS & COLUMN ---- */
/* ---- SNS ---- */
/* ---- COMMON CONTENT ---- */
/* ---- FOOTER ---- */
/* ---- popular-models SP: 縦積みレイアウト ---- */
/* name-row::beforeをSPで非表示にし、name-en自身にgray(::before)とgradient(::after)を持たせてpopular-item幅で重ねる */
/* ---- featured-models SP: 既存btnsを非表示、SP用btnsを表示 ---- */
/* ---- world: hero stats をSP用DOMに切り替え ---- */
/* ---- news-column SP ---- */
/* ---- sns SP: head縦積み ---- */
/* ---- common-content SP: btns 100% ---- */
/* ---- faq SP: padding縮小 ---- */
/* ---- partners SP DOM ---- */
/* ---- purchase modal SP ---- */
/* テキスト全体をもう一回り縮小 */
}
/* ── 569px〜896px: MV スライド画像を少し大きく ── */
/* ── 568px以下: purchase circle縮小 / faq単列 ── */
@media (max-width: 568px) {
/* ---- 共通: sec-title font-size ---- */
/* ---- 共通: mb40 → mb20 (mobipark-world用) ---- */
/* purchase */
/* pcOnly CTA は SP で非表示 */
/* spOnly CTA は SP で表示 */
/* --after パネル: body + spOnly CTA を横並び */
/* brands lead */
/* faq */
/* banner */
/* ---- pickup: 画像右端揃え・price右寄せ ---- */
/* ---- pickup: アイコン説明ノート (SP-only) ---- */
/* ---- MV SP ボタン (画面下部固定) ---- */
/* ---- featured-models SP: icon-note ---- */
/* ---- world: hero title / thoughts / sub-panel ---- */
/* ---- partners SP: 改善 ---- */
/* ---- purchase modal 568px: レイアウト変更 ---- */
/* panels: 2列 → 縦積み */
/* member grid: 2列 → 1列 */
/* pre-row: テキストをボトムに集約、グラデーションを縦方向に変更 */
/* ── guide-slider: SP ではアクティブスライドのテキストを常時表示 ── */
}
/* ── JS検出: touchstart後に付与される .is-touch クラスで hover を完全無効化 ── */
/* ── タッチデバイス: transition無効化 + 300ms遅延防止 ── */
/* ============================================================
商品詳細ページ (shop/gibbon/) — section by section
============================================================ */
/* --- 下層KV (KV_2枚Ver) --- */
/* --- パンくず --- */
/* ============================================================
詳細上部: 商品ギャラリー + 購入ボックス
============================================================ */
/* --- ギャラリー --- */
.detail-gallery__features {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 0;
}
/* slick初期化前に全スライドが縦並びになるチラつきを防ぐ */
/* メイン画像下のページャ（feat-pager デザインを踏襲） */
/* 「機能紹介」下の下線: 左頭をアクセント色(黄 64/820≒7.8%)、残りをメインカラー (Figma 1178-17526) */
/* --- 購入ボックス --- */
/* カラー */
/* パッケージ (Figma 1482-922 準拠: 左ラベル｜右コンテンツ 横並び) */
/* 数量 (Figma 1482-1086 準拠: 左ラベル｜右select 横並び) */
/* オプションカード (アクセサリー/アパレル/保険) — Figma 1482-904/1050 準拠 */
/* opt-card のボタンエリア全体を白カード化(border-radius 5px + sub borderで囲み、内部のボタンは透過で active時に紺塗りで切替) */
/* 「購入しない」選択時 = 左ボタンが --color-main 塗りつぶし（radio の checked のみ。HTML の is-active は付けっぱなしでも反映しない） */
/* 「購入する」選択時など未選択 = 白背景で選択側と区別 */
/* 「購入する」選択時 = 右ボタンが --color-main 塗りつぶし、テキスト=黄、価格=黄 */
/* 保険等 (#lead-ins) のopt-card: Figma 1279-15692 準拠。
サムネイル無し・左右ボタン等幅(50/50)・「購入しない」選択時の文字はアクセント色(黄) */
/* 選択内容サマリー — Figma 1482-1103 準拠: 2列grid・横罫線+列間の縦罫線 (--color-sub) */
/* gap を使わず各セルの padding で間隔を作り、縦罫線を行間で途切れさせない */
/* 列間の縦罫線は上3行(パッケージ/カラー/アクセサリー)のみ。
アパレル・グッズ/保険等 には付けない (Figma 1482-1104 準拠)。
border-right ではなく背景で1pxを描き、行高の端数で消えないようにする */
/* 合計金額 — Figma 1482-1131 準拠: 1行 / 白カード */
/* アクション */
/* ガイドボタンは共通の btn-main + btn-guide で実装 (CSSは上部 Buttons セクション) */
/* カートボタン: アイコン+テキストを中央寄せ / 横全幅 (Figma 1482-1136) */
/* --- 詳細上部 レスポンシブ --- */
@media (max-width: 896px) {
.detail-gallery {
position: static;
top: auto;
flex-basis: auto;
width: 100%;
}
}
@media (max-width: 568px) {
/* SP tidy: 過大な見出し/補足のサイズ調整 */
/* opt-card: SPでは「購入しない / 購入する」を縦並びに */
/* 選択内容サマリー: SPでは label を上、内容を下にした縦並びに */
}
/* ============================================================
商品の特徴 (detail-features)
============================================================ */
/* セクションタイトル: 「商品の特徴」上 / 「— FEATURES」下 (縦並び) */
/* 共通サブ見出し (ja + en黄色ハイライト) */
/* ヒーロー (左テキスト / 右画像) */
/* WHO RIDES 見出し */
/* WHO RIDES — 4枚グリッド (画面全幅 / 4枚等幅密着 / キャプション右下白) */
/* URBAN DAYS */
/* 特徴スライダー (画面全幅 / 5枚 / ページャー上中央) */
/* guide-pager (home) と同一の左右ボタン: 40px円 / アクセント背景 / 12px chevron */
/* slick: スライド幅は slick が制御。track を flex にしてカード高さを揃える */
/* --- 商品の特徴 レスポンシブ --- */
@media (max-width: 568px) {
/* WHO RIDES: 568px以下は画像とキャプションを縦積み(画像→テキスト)。
キャプションは --color-main 背景・白文字でブロック化 */
.feat-rider {
aspect-ratio: auto;
background: transparent;
overflow: visible;
display: flex;
flex-direction: column;
}
.feat-rider__img {
position: static;
display: block;
aspect-ratio: 1 / 1;
width: 100%;
}
.feat-rider__cap {
position: static;
background: var(--color-main);
padding: 1rem 1rem 1.25rem;
text-align: left;
}
}
/* ============================================================
商品スペックと寸法 (detail-spec)
============================================================ */
/* スペック表 */
/* 車体色：2カラム分の幅を持つ先頭行 */
/* 残りの項目は2カラム。カラム間に隙間なし（Figma準拠） */
/* ゼブラ：行ごとに背景を交互（奇数行 ベージュ / 偶数行 白）。
dt・dd は同じ行背景を共有し、列ごとの色分けはしない（Figma準拠） */
/* product spec：左右カラムで開始色を1つずらす（市松模様）。
隙間/罫線なしでも境界が見えるようにするためのFigma仕様 */
/* 先頭行は表全体の幅を持つため、dt幅はカラム行の半分（≒21%）にして
下のカラムのdtと左端・右端を揃える */
/* ※1 と本文を横並びに（※1は折り返さず固定幅） */
/* 実走行距離 */
/* slick: スライド幅は slick が制御。track を flex にしてカード高さを揃える */
/* --- スペック レスポンシブ --- */
/* ============================================================
信頼と安心 (detail-trust)
============================================================ */
/* タイトル縦積みバリアント */
@media (max-width: 568px) {
/* SPでもPCデザインを継承: 画像左・本文右の横並びを維持 */
.trust-card {
flex-direction: row;
min-height: 0;
}
.trust-card__img {
flex: 0 0 110px;
width: 110px;
aspect-ratio: auto;
}
.trust-card__body {
padding: 1.25rem 1.25rem 1.25rem 0;
}
}
/* ============================================================
APE RIDER紹介 (detail-apeider)
============================================================ */
/* hover時に2枚目画像へクロスフェード (popular-grid と同方式)。
2枚目は本実装の差し替え用。画像が揃うまでは1枚目と同一のため変化なし */
@media (max-width: 568px) {
/* 関連商品は 568px 以下でも 2 カラム維持 (≤896px のグリッド継承) */
.related-grid {
margin-top: 1rem;
}
.related-item__price-row {
padding-top: 0.5rem;
}
}
/* ============================================================
最近チェックした商品 (detail-checked) — pickup-item 流用
============================================================ */
/* 最近チェックした商品: 件数に関わらず 3カラム時のカードサイズで固定 */
#mp-rv-grid.pickup-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#mp-rv-grid .pickup-item {
flex: none;
position: relative;
z-index: 0;
}
#mp-rv-grid .pickup-item:nth-child(3n),
#mp-rv-grid .pickup-item:last-child {
border-right: none;
}
/* アイコンノートは設計上PCでも表示する */
/* ============================================================
購入ガイド (detail-guide)
============================================================ */
.guide-block {
/* border-left は子要素ごとに色分け: title=メイン / text=アクセント */
}
/* 詳細ページFAQ見出し: 設計に合わせ Serif Bold (homeには影響させない) */
/* ============================================================
詳細ページ: セマンティックDOM対応（HTML構造変更に伴う調整）
============================================================ */
/* スクリーンリーダー用の視覚的非表示 */
/* 見出しタグのUAマージンをリセット（見た目は既存クラスで制御） */
/* figure のUAマージンをリセット */
/* リスト化した箇所 */
/* 購入フォーム: fieldset / legend のリセット */
/* ラジオは視覚的に隠してラベルで操作（フォーカス可能のまま） */
/* ボタン→ラベル化したものの中央寄せ */
/* 選択状態（:checked）と静的初期状態（.is-active）の両対応 */
/* .detail-pkg__tab の active 色はパッケージブロック側で定義済み (color: --color-accent) */
/* .opt-card__btn の選択状態はオプションカード本体ブロックで定義済み(--/-yes 別) */
/* ボタン要素になったサムネイルのリセット */
/* 数量 input[type=number] */
/* p化した合計金額行 */
/* ============================================================
詳細ページ全体: 背景色 #F3F0EA (Figma準拠)
============================================================ */
/* 詳細セクション内で個別に背景指定していた箇所は、全体背景に合わせて解除 */
/* =============================================
商品詳細ガイドモーダル（お届け/キャンセル/防犯登録/保険）
purchase-modal + icon-modal のシェルを流用し、本文のみ追加
============================================= */
/* リード文 */
/* セクション枠 */
/* セクション見出しタブ（ネイビー角＋黄色番号＋ネイビーバー白タイトル） */
/* 番号下の黄色い縦線（Figmaのアクセント） */
/* 本文テキスト */
/* 小見出し（保険プラン内の全損/半損 等） */
/* 黄色番号バッジ付きリスト（お届け内容） */
/* 箇条書き（ディスク/番号） */
/* 自治体タグ（東京都の場合 等） */
/* ご加入条件ラベル */
/* 保険会社メタ情報 */
/* 「詳しく見る」ボタン */
/* スマホ */
/* ============================================================
SP responsive additions (product detail) — audit-driven
Covers PC-only rules detected in
.ai/audit/pc-only-product-detail-rules.md
Scoped to body.page-detail or to product-detail-only classes
to avoid affecting other pages.
============================================================ */
/* ---------- 896px breakpoint ---------- */
@media (max-width: 896px) {
.detail-gallery{width: 100%;}
}
/* ---------- 568px breakpoint ---------- */
@media (max-width: 568px) {
/* --- detail-gallery --- */
/* --- detail-buy --- */
/* --- detail-color --- */
/* --- detail-pkg --- */
/* --- detail-qty --- */
/* --- opt-card --- */
/* --- detail-summary --- */
/* --- detail-buy confirm icons --- */
/* --- feat-sec-title --- */
/* --- feat-hero --- */
/* --- feat-who --- */
/* --- feat-urban --- */
/* --- feat-pager --- */
/* --- feat-card --- */
/* --- spec-head / spec-main --- */
/* --- spec-real --- */
/* --- spec-notes --- */
/* --- spec-compare --- */
/* --- related-item: Task C — max-width 解除 + 内側調整 --- */
/* --- detail-checked: Task D — SP で縦並び (1 カラム) --- */
/* --- form / fieldset --- */
/* --- detail-top reset --- */
}
/* End of SP responsive additions */
/* ============================================================
AGGRESSIVE SP OPTIMIZATION mirror — product detail
Mirrors mp-product.css; uses body.page-detail scope
to avoid bleeding to other pages.
============================================================ */
@media (max-width: 568px) {
/* img/video の page-detail safety-net は削除 — 明示 px 指定 (.receive-shop__map img, badge類等) を破壊するため。
本来「コンテンツ本文の画像」だけが対象なので、必要なら body.page-detail .content > img のように親で scope して再導入する */
/* モーダル内 guide-sec 系: SP用縮小 */
/* モーダル内全ボタン (guide-modal-more-wrap 内 btn-main) */
/* ins-meta */
}
/* End of aggressive SP optimization mirror */
/* feat-rider/feat-card のタイトルは 1440px 以下で 18px に縮小 */
/* ----- [3/5] mp-renew-common.css ----- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;}
*, *:before, *:after {-webkit-box-sizing:border-box;box-sizing:border-box;}
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: 'Noto Sans JP', sans-serif;
line-height: 1;
color: #222;
-webkit-font-smoothing: antialiased;
font-weight: 400;
position: relative;
width: 100%;
min-width: 1200px;
}
h2, h3, h4, h5 {line-height: 1.5;}
p, li, dd, dt {line-height: 1.7;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
nav ul {list-style: none;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0; vertical-align: baseline; background: transparent; color: #222; text-decoration: none; transition: .3s;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
img {font-size: 0; line-height: 0; max-width: 100%; height: auto; border: none; vertical-align: bottom;}
.cf:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.cf {display: block; overflow: hidden;}
.clear {clear: both;}
/* Layout */
.flex {display: flex; flex-wrap: wrap;}
.flexNw {display: flex; flex-wrap: nowrap;}
.alCent {align-items: center;}
.alStart {align-items: flex-start;}
.alEnd {align-items: flex-end;}
.jcCent {justify-content: center;}
.jcSb {justify-content: space-between;}
.jcEnd {justify-content: flex-end;}
.rlt {position: relative;}
.blk {display: block;}
.inlb {display: inline-block;}
/* Text */
.txtCent {text-align: center;}
.txtRight {text-align: right;}
.txtLeft {text-align: left;}
.txt400 {font-weight: 400;}
.txt600 {font-weight: 600;}
.txt700 {font-weight: 700;}
.txt12 {font-size: 12px;}
.txt14 {font-size: 14px;}
.txt16 {font-size: 16px;}
.txt18 {font-size: 18px;}
.txt20 {font-size: 20px;}
.txt24 {font-size: 24px;}
.txt30 {font-size: 30px;}
.txt36 {font-size: 36px;}
.txt40 {font-size: 40px;}
.txt60 {font-size: 60px;}
.lh12 {line-height: 1.2;}
.lh15 {line-height: 1.5;}
.lh17 {line-height: 1.7;}
/* Spacing */
.mb5 {margin-bottom: 5px;}
.mb10 {margin-bottom: 10px;}
.mb15 {margin-bottom: 15px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mt40 {margin-top: 40px;}
.mt50 {margin-top: 50px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pt40 {padding-top: 40px;}
.pt60 {padding-top: 60px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb60 {padding-bottom: 60px;}
/* Images */
.w100 {width: 100%;}
.objFit img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;}
/* SP-only break tag */
.spbr { display: none; }
/* Full-width button modifier */
.btn-full { width: 100% !important; justify-content: center !important; }
@media (max-width: 896px) {
.spbr { display: inline; }
}
@media (max-width: 568px) {
.mb30 {margin-bottom: 20px;}
.mb40 {margin-bottom: 20px;}
}
/* ----- [4/5] mp-brand-pages.css (previously prepended) ----- */
/* common.css の body min-width を全幅で解除 */
/* ===== SP-only DOM elements (hidden on PC) ===== */
/* ===== CSS Variables ===== */
/* ===== Base ===== */
body {
background: #fff;
color: var(--color-text);
}
main {
/* padding-top: 182px; */
}
/* ===== Container ===== */
/* ===== Section Title (.sec-title) ===== */
/* ===== Section Heading (共通見出しスタイル) ===== */
/* ===== Buttons ===== */
.btn-main::after {
content: '';
display: block;
width: 13px;
height: 10px;
flex-shrink: 0;
background: url('mp-cmn-icon_arrow_btn.svg') center / contain no-repeat;
transition: transform 0.3s;
}
@media (hover: hover) {
.btn-main:hover::after {
background-image: url('mp-cmn-icon_arrow_btn_dk.svg');
transform: translateX(12px);
}
}
/* btn-main の軽量バリエーション: 全幅・薄色背景・左アイコン付き。
矢印は btn-main の ::after を流用し dark (icon_arrow_btn_dk.svg) に。(Figma 1482-1158) */
.btn-guide::after {
background-image: url('mp-cmn-icon_arrow_btn_dk.svg');
}
@media (hover: hover) {
.btn-outline:hover .btn-arrow {
content: url('mp-cmn-icon_arrow_btn.svg');
transform: translateX(12px);
}
}
/* ===== HEADER ===== */
/* ---- Global Nav ---- */
/* ---- Dropdown panel ---- */
/* 10px dark band at the very top of the dropdown */
/* Left dark photo panel */
/* Right white panel */
/* Card */
/* ご購入後のサポート: side text list */
/* Header Right */
/* ===== SIDE A ===== */
/* 装飾リング（ヘッダー境界にかかる白いリング） */
/* アクセントバー */
/* メンバー登録ログイン */
/* MEMBER ワードマーク */
/* メンバーテキスト */
/* アイコン行 */
/* コールセンター */
/* フリーダイヤルロゴ */
/* 電話番号 */
/* ===== HAMBURGER MENU ===== */
/* 閉じるボタン */
/* ロゴバー */
/* ロゴバー右側アイコン */
/* メンバー + コールセンター行 */
/* ボディ */
/* ナビ */
/* バナーカラム */
/* メディア・SNS行 */
/* サブリンク */
/* 丸矢印アイコン */
/* SNS */
/* ===== FIXED SIDE BANNERS ===== */
/* タブ列 wrapper */
/* 閉じるタブ */
/* 開くタブ */
/* 閉じている状態 */
/* バナー共通 */
/* 試乗予約: 文字ボックス */
/* バナーフッター (テキスト + 矢印) */
/* 矢印 */
/* 遵守義務: オーバーレイ */
/* 遵守義務: テキスト */
/* 遵守義務: 注目バッジ */
/* 遵守義務: 矢印 (単体、右下) */
/* ===== MV (Main Visual) ===== */
.mv-text__main {
font-family: var(--font-ja);
font-size: 40px;
font-weight: 700;
color: var(--color-white);
letter-spacing: 2px;
display: block;
margin-bottom: 10px;
}
/* MV Product Slider */
/* direction:rtl required for Slick rtl:true — it positions track with positive left values */
/* reset direction on slide content so text reads LTR */
/* bike image: right edge at 25.98% margin, full height (Figma 607:26949) */
/* ===== PICKUP ===== */
/* 商品一覧ページ(#shop-list): 多数の商品を3カラムで折り返し表示 (≥897px)。
トップページの pickup-grid(1行3アイテム)には影響させないため #shop-list に限定。
≤896px は既存の縦積みカードパターンをそのまま使う */
#shop-list .pickup-grid { margin-bottom: 80px; }
/* 商品一覧ページのページャー (Figma 1178-13061) */
/* 現在ページ = メインカラー塗り + アクセント文字 */
/* 左矢印は icon_arrow_btn_dk.svg を左右反転 */
.pickup-item__name-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
position: relative;
}
/* 型式認定車バッジ (PC: 商品名の真上に absolute 配置) */
/* SP: 通常フローに戻してサイズ縮小 */
/* PICKUPアイコン ツールチップ（hoverで上側に表示。中身はJSで注入） */
/* 画面端での見切れ回避（JSで付与） */
/* 下向きの吹き出し矢印（既定はアイコン中央） */
/* 端寄せ時は矢印をアイコン位置（吹き出し端付近）に寄せる */
/* hover対応デバイスのみ。タッチ端末では発火させない（SPは非実装） */
/* ===== GUIDE SLIDER ===== */
/* slick.css の .slick-slide { height: 100% } より詳細度を上げて上書き */
@media (hover: hover) {
.guide-slide__btn:hover .btn-arrow {
content: url('mp-cmn-icon_arrow_btn.svg');
transform: translateX(12px);
}
}
.guide-pager__prev svg {
/* transform: rotate(180deg); */
}
/* ===== PURCHASE INFO ===== */
/* ===== PURCHASE INFO ===== */
/* ===== PURCHASE SECTION ===== */
/* ===== FAQ ===== */
.faq-inner {
display: flex;
align-items: flex-start;
gap: 60px;
}
@media (hover: hover) {
/* .faq-item:hover .faq-item__icon { background: var(--color-main); color: var(--color-white); } */
}
/* ===== BANNER SLIDER ===== */
/* ===== POPULAR MODELS ===== */
/* ===== BRANDS ===== */
/* ===== FEATURED MODELS ===== */
/* PC(min-width:897px)のみ、テキスト/ボタンの opacity を JS(rAF)で
中央からの距離に応じて連続制御する。初期値は 0(非表示)。 */
/* SP(max-width:896px)/モーション抑制時: フェードなし。中央スライドのみ即表示。 */
/* ===== MOBIPARK WORLD ===== */
/* World feature tiles */
/* World thoughts section */
.world-thoughts__content-top {}
.world-thoughts__content-bottom {}
/* World right sub panels */
/* ===== PARTNERS ===== */
/* 試乗パネル */
.btn-ghost-light.btn-main::after {
background-image: url('mp-cmn-icon_arrow_btn_dk.svg');
}
@media (hover: hover) {
.btn-solid:hover .btn-arrow {
content: url('mp-cmn-icon_arrow_btn_dk.svg');
transform: translateX(12px);
}
}
/* Step cards */
/* 店舗パネル */
/* ===== NEWS & COLUMN ===== */
/* ===== SNS ===== */
/* ===== COMMON CONTENT ===== */
/* ===== FOOTER ===== */
.footer-brand-item::before {
content: '';
display: inline-block;
width: 12px;
height: 1px;
background: currentColor;
margin-right: 4px;
vertical-align: middle;
margin-bottom: 2px;
}
.footer-nav-col--member {}
/* ---- デスクトップ時: SP専用要素を非表示 ---- */
/* =========================================================
購入後サポート モーダル
========================================================= */
/* ===== アイコンマーク説明 モーダル（purchase-modal を流用） ===== */
/* 見出し「アイコンマーク説明」＋区切り線 */
/* 区切り線左側のネイビー部分（504px） */
/* 区切り線左端の黄色アクセント */
/* サブ見出し＋英語タイトル */
/* 黄色ハイライト（.partners-badge__en::before と同手法、色は accent） */
/* アイコンカード（2カラム） */
/* キャプション付きPNG（180×247）は上部の正方形タイルだけを表示（Figmaのマスク相当） */
/* アイコンマーク説明モーダル レスポンシブ */
/* ヘッダー（白背景）*/
/* pmc-header / pmc-pre-header 共通 */
/* 2カラムパネル */
/* ダーク：メンバーサービス */
.pmc-modal-btn::after {
background: url('mp-cmn-icon_arrow_btn_wh.svg') center / contain no-repeat;
}
/* =========================================================
ご購入前に知っておきたいこと モーダル
========================================================= */
/* =========================================================
レスポンシブ縮小 (897px〜1465px)
ナビは消さず、フォント・余白を段階的に縮小して897pxまで収める
========================================================= */
/* ── 1370px以下: guide-slider 2枚表示 ── */
/* ── 1300px以下: 軽い縮小 ── */
/* ── 1100px以下: ロゴ縮小・SNS非表示 ── */
@media (max-width: 1100px) {
/* ---- footer: 列折り返し対応 ---- */
.footer-nav-col--products {
flex-basis: 100%;
}
}
/* ── 980px以下: さらに縮小・NEWS非表示 ── */
/* =========================================================
SP (≤896px) レスポンシブ
========================================================= */
@media (max-width: 896px) {
/* ---- body の min-width を解除 ---- */
/* ---- デスクトップ専用要素を非表示 ---- */
/* ---- ヘッダー ---- */
/* ロゴエリア */
/* デスクトップ専用ヘッダー要素を非表示 */
/* SP専用 E-BIKEリンク */
/* ハンバーガーボタン SP */
/* ---- HBGパネル SP ---- */
/* 閉じるボタン */
/* ロゴバー */
/* メタバー */
/* ボディ */
/* ナビ */
/* メディア・サブリンクセクション */
/* SNS行 */
/* ---- SP専用セクション ---- */
/* サブリンク */
/* 3カラムリンク */
/* バナーペア */
/* 遵守義務バナー */
}
/* =========================================================
PURCHASE-INFO / FAQ / BANNER-SLIDER レスポンシブ
========================================================= */
/* ── 896px以下: purchase 縦積み / faq縦積み ── */
@media (max-width: 896px) {
/* purchase */
/* faq */
/* banner */
}
@media (max-width: 896px) {
/* ---- 共通: container padding 上書き ---- */
/* ---- 固定フッターボタン分の余白 ---- */
/* ---- 共通: sec-title テキスト折り返し ---- */
/* ---- MV ---- */
/* ヘッドライン: 折り返し・サイズ縮小 */
/* slick が高さを内部計算するため、各要素に同じ高さを与える */
/* 商品テキスト + ブランド: 1番目に表示 */
/* 商品画像: 3番目に表示、残り高さを埋める */
/* #mv .mv-slide__img {
position: relative;
right: auto;
left: auto;
bottom: 0;
transform: none;
height: 130px;
width: 100%;
max-width: 100%;
object-fit: contain;
object-position: bottom;
order: 3;
flex-shrink: 0;
align-self: center;
} */
/* ---- PICKUP ---- */
/* ---- GUIDE ---- */
/* ---- POPULAR MODELS ---- */
/* clamp() が 896px 以下の最小値を保証するため font-size 上書きは不要 */
/* ---- BRANDS ---- */
/* Brand sections: 画像(250px)上 + コンテンツカード下 */
/* ---- FEATURED MODELS ---- */
/* order: name → image → description → buttons */
/* ---- MOBIPARK WORLD ---- */
/* Stat items: SP では1列に */
/* Tiles: 2×2 グリッド */
/* .world-tile:nth-child(1), .world-tile:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.2); } */
/* Thoughts: SP レイアウト */
/* ---- PARTNERS: partners-trial SP (world-thoughts と同パターン) ---- */
/* ---- partners-shop SP (partners-trial と同パターン) ---- */
/* ---- NEWS & COLUMN ---- */
/* ---- SNS ---- */
/* ---- COMMON CONTENT ---- */
/* ---- FOOTER ---- */
/* ---- popular-models SP: 縦積みレイアウト ---- */
/* name-row::beforeをSPで非表示にし、name-en自身にgray(::before)とgradient(::after)を持たせてpopular-item幅で重ねる */
/* ---- featured-models SP: 既存btnsを非表示、SP用btnsを表示 ---- */
/* ---- world: hero stats をSP用DOMに切り替え ---- */
/* ---- news-column SP ---- */
/* ---- sns SP: head縦積み ---- */
/* ---- common-content SP: btns 100% ---- */
/* ---- faq SP: padding縮小 ---- */
/* ---- partners SP DOM ---- */
/* ---- purchase modal SP ---- */
/* テキスト全体をもう一回り縮小 */
}
/* ── 569px〜896px: MV スライド画像を少し大きく ── */
/* ── 568px以下: purchase circle縮小 / faq単列 ── */
@media (max-width: 568px) {
/* ---- 共通: sec-title font-size ---- */
/* ---- 共通: mb40 → mb20 (mobipark-world用) ---- */
/* purchase */
/* pcOnly CTA は SP で非表示 */
/* spOnly CTA は SP で表示 */
/* --after パネル: body + spOnly CTA を横並び */
/* brands lead */
/* faq */
/* banner */
/* ---- pickup: 画像右端揃え・price右寄せ ---- */
/* ---- pickup: アイコン説明ノート (SP-only) ---- */
/* ---- MV SP ボタン (画面下部固定) ---- */
/* ---- featured-models SP: icon-note ---- */
/* ---- world: hero title / thoughts / sub-panel ---- */
/* ---- partners SP: 改善 ---- */
/* ---- purchase modal 568px: レイアウト変更 ---- */
/* panels: 2列 → 縦積み */
/* member grid: 2列 → 1列 */
/* pre-row: テキストをボトムに集約、グラデーションを縦方向に変更 */
/* ── guide-slider: SP ではアクティブスライドのテキストを常時表示 ── */
}
/* ── JS検出: touchstart後に付与される .is-touch クラスで hover を完全無効化 ── */
/* ── タッチデバイス: transition無効化 + 300ms遅延防止 ── */
/* ============================================================
商品詳細ページ (shop/gibbon/) — section by section
============================================================ */
/* --- 下層KV (KV_2枚Ver) --- */
/* --- パンくず --- */
/* ============================================================
詳細上部: 商品ギャラリー + 購入ボックス
============================================================ */
/* --- ギャラリー --- */
/* slick初期化前に全スライドが縦並びになるチラつきを防ぐ */
/* メイン画像下のページャ（feat-pager デザインを踏襲） */
/* 「機能紹介」下の下線: 左頭をアクセント色(黄 64/820≒7.8%)、残りをメインカラー (Figma 1178-17526) */
/* --- 購入ボックス --- */
.detail-buy__lead {
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
color: var(--color-text);
line-height: 1.7;
text-align: center;
padding-bottom: 0.625rem;
margin: 0 0 1.25rem;
border-bottom: 1px solid var(--color-sub);
}
/* カラー */
/* パッケージ (Figma 1482-922 準拠: 左ラベル｜右コンテンツ 横並び) */
/* 数量 (Figma 1482-1086 準拠: 左ラベル｜右select 横並び) */
/* オプションカード (アクセサリー/アパレル/保険) — Figma 1482-904/1050 準拠 */
.opt-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.75rem;
padding: 0;
margin: 0;
}
/* opt-card のボタンエリア全体を白カード化(border-radius 5px + sub borderで囲み、内部のボタンは透過で active時に紺塗りで切替) */
/* 「購入しない」選択時 = 左ボタンが --color-main 塗りつぶし（radio の checked のみ。HTML の is-active は付けっぱなしでも反映しない） */
/* 「購入する」選択時など未選択 = 白背景で選択側と区別 */
/* 「購入する」選択時 = 右ボタンが --color-main 塗りつぶし、テキスト=黄、価格=黄 */
/* 保険等 (#lead-ins) のopt-card: Figma 1279-15692 準拠。
サムネイル無し・左右ボタン等幅(50/50)・「購入しない」選択時の文字はアクセント色(黄) */
/* 選択内容サマリー — Figma 1482-1103 準拠: 2列grid・横罫線+列間の縦罫線 (--color-sub) */
/* gap を使わず各セルの padding で間隔を作り、縦罫線を行間で途切れさせない */
/* 列間の縦罫線は上3行(パッケージ/カラー/アクセサリー)のみ。
アパレル・グッズ/保険等 には付けない (Figma 1482-1104 準拠)。
border-right ではなく背景で1pxを描き、行高の端数で消えないようにする */
/* 合計金額 — Figma 1482-1131 準拠: 1行 / 白カード */
.detail-summary__total {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 1.25rem 0 0;
padding: 1rem 1.5rem;
background: var(--color-white);
border-radius: 5px;
}
/* アクション */
/* ガイドボタンは共通の btn-main + btn-guide で実装 (CSSは上部 Buttons セクション) */
/* カートボタン: アイコン+テキストを中央寄せ / 横全幅 (Figma 1482-1136) */
/* --- 詳細上部 レスポンシブ --- */
@media (max-width: 568px) {
.detail-gallery__features {
gap: 5px 10px;
margin-bottom: 20px;
}
.detail-gallery__feature {
width: calc((100% - 40px) / 5);
height: auto;
aspect-ratio: 1 / 1;
}
.detail-gallery__thumb {
width: calc((100% - 20px) / 3);
}
.detail-buy__brand img {
height: 24px;
}
/* SP tidy: 過大な見出し/補足のサイズ調整 */
.detail-360__tab {
font-size: 14px;
}
/* opt-card: SPでは「購入しない / 購入する」を縦並びに */
/* 選択内容サマリー: SPでは label を上、内容を下にした縦並びに */
}
/* ============================================================
商品の特徴 (detail-features)
============================================================ */
/* セクションタイトル: 「商品の特徴」上 / 「— FEATURES」下 (縦並び) */
/* 共通サブ見出し (ja + en黄色ハイライト) */
/* ヒーロー (左テキスト / 右画像) */
/* WHO RIDES 見出し */
/* WHO RIDES — 4枚グリッド (画面全幅 / 4枚等幅密着 / キャプション右下白) */
/* URBAN DAYS */
.feat-urban {
display: flex;
align-items: flex-start;
gap: 2.5rem;
padding-bottom: 4rem;
}
.feat-urban__imgs {
flex: 1 1 0;
min-width: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
/* gap: 0.5rem; */
}
.feat-urban__img {
margin: 0;
aspect-ratio: 322 / 446;
overflow: hidden;
}
.feat-point__small {
font-family: var(--font-ja);
font-weight: 600;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
padding-left: 2.75rem;
}
/* 特徴スライダー (画面全幅 / 5枚 / ページャー上中央) */
/* guide-pager (home) と同一の左右ボタン: 40px円 / アクセント背景 / 12px chevron */
/* slick: スライド幅は slick が制御。track を flex にしてカード高さを揃える */
@media (max-width: 1440px) {
.feat-rider__title,
.feat-card__title { font-size: 18px; }
}
/* --- 商品の特徴 レスポンシブ --- */
@media (max-width: 568px) {
.feat-sec-title__ja {
font-size: 20px;
}
.feat-sec-title__en {
font-size: 14px;
}
.feat-hero__brand-en {
font-size: 32px;
}
.feat-hero__brand-jp {
font-size: 18px;
}
.feat-hero__catch {
font-size: 16px;
}
.feat-hero__body {
font-size: 14px;
}
.feat-rider__title {
font-size: 14px;
}
.feat-rider__note {
font-size: 10px;
}
.feat-heading {
margin: 0 0 1rem;
}
.feat-heading__ja {
font-size: 16px;
}
.feat-heading__en {
font-size: 14px;
}
.feat-urban__lead {
font-size: 14px;
}
.feat-point__small {
font-size: 14px;
padding-left: 2.25rem;
}
.feat-point__big {
font-size: 14px;
}
.feat-card__label {
font-size: 15px;
padding: 0.75rem 1rem;
}
.feat-card__title {
font-size: 14px;
}
.feat-card__desc {
font-size: 13px;
}
}
/* ============================================================
商品スペックと寸法 (detail-spec)
============================================================ */
/* スペック表 */
/* 車体色：2カラム分の幅を持つ先頭行 */
/* 残りの項目は2カラム。カラム間に隙間なし（Figma準拠） */
/* ゼブラ：行ごとに背景を交互（奇数行 ベージュ / 偶数行 白）。
dt・dd は同じ行背景を共有し、列ごとの色分けはしない（Figma準拠） */
/* product spec：左右カラムで開始色を1つずらす（市松模様）。
隙間/罫線なしでも境界が見えるようにするためのFigma仕様 */
/* 先頭行は表全体の幅を持つため、dt幅はカラム行の半分（≒21%）にして
下のカラムのdtと左端・右端を揃える */
/* ※1 と本文を横並びに（※1は折り返さず固定幅） */
/* 実走行距離 */
/* slick: スライド幅は slick が制御。track を flex にしてカード高さを揃える */
/* --- スペック レスポンシブ --- */
/* ============================================================
信頼と安心 (detail-trust)
============================================================ */
/* タイトル縦積みバリアント */
@media (max-width: 568px) {
/* SP: 横並びレイアウト維持（flex-direction:column は撤回） */
.trust-card__title {
font-size: 13px;
}
.trust-card__text {
font-size: 11px;
}
.trust-top__lead {
font-size: 14px;
}
.trust-faq {
padding: 2rem 0;
}
}
/* ============================================================
APE RIDER紹介 (detail-apeider)
============================================================ */
.related-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
margin-top: 1.5rem;
}
.related-item {
flex: 0 0 25%;
max-width: 25%;
min-width: 0;
border-right: 1px solid var(--color-sub);
padding: 1.5rem;
display: block;
text-decoration: none;
color: var(--color-text);
box-sizing: border-box;
}
.related-item:nth-child(4n),
.related-item:last-child {
border-right: none;
}
/* hover時に2枚目画像へクロスフェード (popular-grid と同方式)。
2枚目は本実装の差し替え用。画像が揃うまでは1枚目と同一のため変化なし */
@media (max-width: 568px) {
.apeider-related {
padding: 2rem 0 2.5rem;
}
.related-grid {
grid-template-columns: 1fr 1fr;
margin-top: 1rem;
}
.related-item {
padding: 0.75rem;
}
.related-item:nth-child(2n) {
border-right: none;
}
.related-item__name {
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.5rem;
}
.related-item__name-en {
font-size: 14px;
}
.related-item__name-jp {
font-size: 12px;
}
.related-item__price-row {
padding-top: 0.5rem;
gap: 0 1rem;
}
.related-item__price-num {
font-size: 13px;
}
.related-item__price-yen {
font-size: 12px;
}
.related-item__price-tax {
font-size: 10px;
}
}
/* ============================================================
最近チェックした商品 (detail-checked) — pickup-item 流用
============================================================ */
.detail-checked {
padding: 4rem 0;
background: var(--color-white);
}
/* アイコンノートは設計上PCでも表示する */
/* ============================================================
購入ガイド (detail-guide)
============================================================ */
.guide-block {
/* border-left は子要素ごとに色分け: title=メイン / text=アクセント */
}
/* 詳細ページFAQ見出し: 設計に合わせ Serif Bold (homeには影響させない) */
/* ============================================================
詳細ページ: セマンティックDOM対応（HTML構造変更に伴う調整）
============================================================ */
/* スクリーンリーダー用の視覚的非表示 */
/* 見出しタグのUAマージンをリセット（見た目は既存クラスで制御） */
/* figure のUAマージンをリセット */
/* リスト化した箇所 */
/* 購入フォーム: fieldset / legend のリセット */
/* ラジオは視覚的に隠してラベルで操作（フォーカス可能のまま） */
/* ボタン→ラベル化したものの中央寄せ */
/* 選択状態（:checked）と静的初期状態（.is-active）の両対応 */
/* .detail-pkg__tab の active 色はパッケージブロック側で定義済み (color: --color-accent) */
/* .opt-card__btn の選択状態はオプションカード本体ブロックで定義済み(--/-yes 別) */
/* ボタン要素になったサムネイルのリセット */
/* 数量 input[type=number] */
/* p化した合計金額行 */
.detail-summary__total {
margin: 0;
}
/* ============================================================
詳細ページ全体: 背景色 #F3F0EA (Figma準拠)
============================================================ */
/* 詳細セクション内で個別に背景指定していた箇所は、全体背景に合わせて解除 */
/* ===================================================================
ITALMOTO (取扱ブランド) page — pages/ape-ryder/ 専用
すべて .page-brand 配下にスコープ済（他ページ非影響）
=================================================================== */
/* =====================================================================
ITALMOTO (取扱ブランド) ブランドページ専用スタイル
- すべて .page-brand 配下にスコープし、他ページへ影響させない
- 共通トークン(:root の --color-*, --font-*)と共通クラス
(.container / .lower-kv / .breadcrumb / .faq-* / .btn-* / common-content)
は style.css のものを再利用する
===================================================================== */
/* 共通: 明朝体セクションタイトル（ja + navy/yellowライン + en） ------- */
/* ブランドページ共通セクションタイトル
構造 (HTML 既存):
タイトル
← CSS 上は使用しない (互換のため残置)
SUBTITLE
*/
/* 旧 line span は __en::before に統合したため非表示 */
/* =========================== KV ============================ */
/* =========================== リード ============================ */
/* ブランド見出し: クリーム角丸カードでヒーロー下端に乗せる (Figma準拠) */
/* MV内パンくず (Figma準拠: ヒーロー上に白文字で内包) */
/* 矢印を SVG (icon_arrow_wh) に置換 */
/* =========================== ブランドストーリー ============================ */
/* item の左右 padding (28px) を打ち消して、隣接 item の line と接続 */
/* dot から上下に同じ長さの縦線 (year ↔ 横線 ↔ ttl 方向へ) */
/* 1 番目 (leftmost) のみ左端からのフェードイン */
/* 最後 (rightmost) のみ右端へのフェードアウト */
/* =========================== レビュー ============================ */
/* =========================== コレクション ============================ */
/* --- bike slider (左右画面外にはみ出す centerMode slick) --- */
/* ic-bike: 各行を grid で固定して横並びで揃える
- row1: img (固定 aspect-ratio による高さ)
- row2: name (アイコン含む 1 行)
- row3: catch (2 行最小)
- row4: body (1fr 伸縮、line-clamp で上限)
- row5: foot (price + view more) */
.ic-collection__slider-wrap .slick-slider { margin-bottom: unset; }
/* --- slider pager / arrows --- */
/* --- single bike (RKS): 3カラム時のカードサイズで固定 --- */
/* =========================== こんな方におすすめ ============================ */
/* =========================== FAQ (共通 faq-* を流用、最小限の補正) ===== */
/* =========================== モデル比較 ============================ */
/* row stripes 不要、縦罫線も不要 */
/* =========================== 信頼と安心 ============================ */
/* =========================== 締め ============================ */
/* =========================== ブランド比較 (BRANDS LIST) ============== */
/* corner (MBP) は外枠を持たず、ブランド列との境界右だけ縦罫線 */
/* bhead セルの padding を完全に除去 (一般 th rule に勝つよう specificity 上げ) */
/* タグ間に --color-accent (yellow) の縦罫線 */
/* ic-stars: data-rate (0-5) で塗り幅を決定。
rounded star (Material Symbols Rounded) を SVG mask で描画して角に丸みを持たせる */
/* =====================================================================
レスポンシブ (SP: <=896px / 細部: <=568px)
===================================================================== */
@media (max-width: 896px) {
/* KV */
/* リード */
/* ストーリー */
/* レビュー */
/* コレクション */
/* おすすめ */
/* FAQ：共通 faq-inner を縦積みに */
/* モデル比較・ブランド比較：横スクロール */
/* 信頼と安心 */
/* 締め */
/* ブランド比較 */
}
@media (max-width: 568px) {
/* ≤896 で設定した値を更に 1 段階小さく */
/* timeline 年・本文も 1 段階下げ */
}
/* =========================================================
レスポンシブ (ブランドページ全般 / 統合)
≤1440 → 大型フォント縮小 (20+, 18→16)
≤1200 → padding 段階縮小
≤1000 → padding さらに縮小
≤896 → iPad layout (slider 1枚, timeline 縦並び, 3col→1col)
========================================================= */
/* ----- ≤1440px : 大型フォント縮小 ----- */
/* ----- ≤1200px : padding 段階縮小 ----- */
@media (max-width: 1200px) {
/* ic-lead は brand の -76px 重なりを維持するため padding-top: 0 のまま */
}
/* ----- ≤1000px : padding さらに縮小 ----- */
/* ----- ≤896px : iPad layout ----- */
@media (max-width: 896px) {
/* === font sizes (top page sp 準拠) === */
/* === 3-col → 1-col stacked === */
/* === ic-timeline : 縦並び
[年] [dot+縦線] [ttl/txt/img]
年と dot を同じ行に配置、縦線は全 item を通して連続 === */
/* 全 item を貫く縦線 (dot 列の中央 = grid 左端から 60 + 12 + 11 = 83px) */
/* __line は dot のホルダーとして使い、横線は非表示 */
/* === ic-lead photo overflow 修正 === */
/* === ic-collection slider: 1枚表示 (JS でも対応) === */
/* === ic-story bike (text 下に配置) === */
/* === collection photo 簡略化 === */
}
/* ----- ≤568px : フォントもう一段階縮小 (≤896px の値を上書き) ----- */
/* =========================================================
ご利用ガイド (page-guide) ※ 既存トークン・.container・.sec-title・.btn-main を再利用
========================================================= */
/* --- 下層KV: 1枚ページタイトル型 --- */
/* --- read: 公式ならではの安心と便利 --- */
/* お支払い方法ページ: head(テキスト)を広め、ブランドはコンパクトに右寄せ (Figma準拠) */
/* --- flow: ご購入の流れ --- */
/* sticky step nav */
/* step contents — 白カード + バッジが左端をまたぐ (Figma: bg白 / rounded5 / badge center on card left edge) */
.flow-step {
position: relative;
background: var(--color-white);
border-radius: 5px;
padding: 30px 30px 30px 80px;
margin-left: 40px;
scroll-margin-top: 200px;
}
.flow-step__heading { margin-bottom: 20px; }
.flow-step__body--media { margin-top: 0; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.flow-step__subttl { font-family: var(--font-ja); font-weight: 600; font-size: 18px; line-height: 1.6; color: var(--color-text); margin-top: 20px; }
.flow-step__subttl + p { margin-top: 8px; }
/* step03: 受け取り 2カード */
/* step05: 配送テーブル */
/* step06: お受け取り チェック */
.check-list li::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 32px; height: 34px; background: url('mp-pages-guide-icon_num_seal.svg') center / contain no-repeat;
}
/* --- 初期不良について --- */
/* =========== レスポンシブ: ご利用ガイド =========== */
/* read: 横並びでカードが細くなりすぎる幅では head を上に、カードを全幅2列へ */
/* flow: サイドナビは 896px まで左に固定。右側(ステップ内)の要素を幅に応じて縦積みへ
(狭いステップ列での画像占有・テキスト過剰改行を防ぐ) */
/* 896px 以下でサイドナビを上に水平化 */
@media (max-width: 568px) {
/* 2. ナビ項目は1行1個 (全幅) */
/* flow-step: 余白・文字サイズを縮小 (他ページのSP縮小率に合わせる) */
/* .flow-step__badge { width: 52px; height: 52px; top: 20px; } */
.flow-step__subttl { font-size: 15px; margin-top: 16px; }
/* 3. 別途配送料/送料無料 バッジを縮小 */
/* 4. カードタイトル/本文を縮小 */
/* 1. receive-ship (全国配送) のサイズ・レイアウト調整 */
/* 5. 配送テーブル: dt の固定列幅を解除しSP用に */
}
/* =========================================================
下層情報ページ共通 (support / narrow) — コールセンター・問い合わせ等
========================================================= */
/* =========================================================
お問い合わせフォーム (contact)
========================================================= */
/* Figma: 紺枠の白ボックス + チェック時は内側に紺の四角 (チェック済みデザイン) */
/* ===== Contact: Step toggle ===== */
/* ===== Contact: Step 2 confirm ===== */
/* ===== Contact: Step 3 done ===== */
@media (max-width: 568px) {
.cform__radios { gap: 10px 16px; }
.cform__submit { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
}
/* =========================================================
お支払い方法について (payment) — flow-nav / flow-step を再利用
========================================================= */
.flow-step__icon { width: 46px; height: 31px; object-fit: contain; }
.flow-step__icon.--credit { width: 46px; height: 31px; object-fit: contain; }
.flow-step__icon.--wallet { width: 39px; height: 36px; object-fit: contain; }
.flow-step__icon.--loan { width: 55px; height: 34px; object-fit: contain; }
.flow-step__icon.--conveni { width: 58px; height: 31px; object-fit: contain; }
.flow-step__icon.--qr { width: 38px; height: 38px; object-fit: contain; }
.flow-step__icon.--carr { width: 32px; height: 53px; object-fit: contain; }
.flow-step__icon.--bank { width: 27px; height: 54px; object-fit: contain; }
/* SVG自体に白背景+枠線が含まれるため、チップ装飾はSVG任せにし、ラッパーはサイズ制御のみ */
/* ローン注釈は赤字 (Figma) */
/* read 見出し: 長いタイトルは折り返す (横並び時にブランドと被らないように) */
/* pay-loan / pay-bank: ステップ列が狭くなる帯では本文と注釈を縦積みに
(他のステップ内コンテンツ=media/cards/check と同じ 1440px 起点に統一) */
/* お届けまでの流れ: 本文未デザインのためのスペーサー（暫定） */
/* =========================================================
pages/ 共通 SP 微調整 (全 base 定義より後に配置し確実に適用)
========================================================= */
@media (max-width: 568px) {
/* 2. セクション縦余白をSPで圧縮 */
/* 4. PC 16px のテキストはSPで縮小 */
/* 3. ローンヘッダーを縮小 (ブランドチップは clamp で自動縮小) */
}
/* =========================================================
お届けまでの流れ (delivery) — receive-cards / ship-table / receive-check を再利用
========================================================= */
/* 共通2カラム行: 左 head(sec-title/サイドバー) + 右 main(カード/表) */
.dl-row__main { flex: 1 1 auto; min-width: 0; position: relative; z-index: 0; }
/* お受け取り方法: 右2カードは grid で等幅・横並びを粘る(画像縦伸び防止) */
.dl-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
/* 白カード (delivery_card_txt は白背景) */
/* 「全国配送」(流動: clamp) */
/* 配送料 左サイドバー (背面に日本地図の透かし) */
.dl-fee__map {
position: absolute;
z-index: 0;
top: 0;
left: -8%;
width: min(120%, 520px);
height: auto;
pointer-events: none;
user-select: none;
opacity: 0.9;
}
/* 配送料 料金表 (上下 border 削除、行ごとの stripe で交互背景、縦線なし) */
.fee-table { position: relative; }
.fee-row {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 40px);
background: var(--color-white);
}
.fee-row__region {
flex: 0 0 clamp(110px, 11vw, 160px);
padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 24px);
font-family: var(--font-ja);
font-weight: 600;
font-size: clamp(15px, 1.6vw, 18px);
color: var(--color-text);
text-align: justify;
text-align-last: justify;
line-height: 1.4;
letter-spacing: 0.5em;
}
.fee-row__cells {
flex: 1 1 auto;
min-width: 0;
padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 24px);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px 16px;
}
.fee-cell { display: flex; align-items: center; gap: 20px; min-width: 0; }
.fee-cell__price { font-family: var(--font-en); font-size: clamp(14px, 1.4vw, 18px); line-height: 1; white-space: nowrap; }
.fee-cell__yen { font-family: var(--font-ja); font-size: 13px; }
/* 配送・納期 表は head が左にあるので上マージン不要 */
/* お受け取り後のご確認: sec-title上 + 白パネル×2 (淡色ブロック) */
/* ===== レスポンシブ (横並びを早く畳まない) ===== */
@media (max-width: 520px) {
.fee-row { flex-direction: column; align-items: flex-start; gap: 0; }
.fee-row__region { flex-basis: auto; width: auto; padding: 10px 14px 4px; text-align-last: left; letter-spacing: 0.2em; }
.fee-row__cells { width: 100%; padding: 4px 14px 12px; }
}
/* =========================================================
ブランドページ追加 (RKS 単一モデル / 型式認定車バッジ)
========================================================= */
/* ============================================================
SP responsive additions (product detail) — audit-driven
Covers PC-only rules detected in
.ai/audit/pc-only-product-detail-rules.md
Scoped to body.page-detail or to product-detail-only classes
to avoid affecting other pages.
============================================================ */
/* ---------- 896px breakpoint ---------- */
/* ---------- 568px breakpoint ---------- */
@media (max-width: 568px) {
/* --- detail-gallery --- */
/* --- detail-buy --- */
/* --- detail-color --- */
/* --- detail-pkg --- */
/* --- detail-qty --- */
/* --- opt-card --- */
/* --- detail-summary --- */
/* --- detail-buy confirm icons --- */
/* --- feat-sec-title --- */
/* --- feat-hero --- */
/* --- feat-who --- */
/* --- feat-urban --- */
/* --- feat-pager --- */
/* --- feat-card --- */
/* --- spec-head / spec-main --- */
/* --- spec-real --- */
/* --- spec-notes --- */
/* --- spec-compare --- */
/* --- related-item: Task C — max-width 解除 + 内側調整 --- */
/* --- detail-checked: Task D — SP で縦並び (1 カラム) --- */
/* --- form / fieldset --- */
/* --- detail-top reset --- */
}
/* End of SP responsive additions */
gap: 1.5rem;
/* End of SP responsive additions */
/* ============================================================
AGGRESSIVE SP OPTIMIZATION mirror — product detail
Mirrors mp-product.css; uses body.page-detail scope
to avoid bleeding to other pages.
============================================================ */
@media (max-width: 568px) {
/* img/video の page-detail safety-net は削除 (global と重複 + 明示 px 指定を破壊) */
}
/* End of aggressive SP optimization mirror */
/* feat-rider/feat-card のタイトルは 1440px 以下で 18px に縮小 */
/* =========================================================
ガイド/お支払いページ レスポンシブ補強 v2
========================================================= */
@media (max-width: 896px) {
.flow-step__icon{scale: 0.8;}
}
@media (max-width: 568px) {
.flow-step__badge {top: 18px; }
}
/* ============================================================
/* ----- [5/5] original mp-css-style.merged.css content (wins cascade) ----- */
/* common.css の body min-width を全幅で解除 */
body {
min-width: 0;
}
/* ===== SP-only DOM elements (hidden on PC) ===== */
.mv-sp-btns {
display: none;
}
.pickup-icon-note {
display: none;
}
.featured-slide__sp-btns {
display: none;
}
.world-hero__stats-sp-wrap {
display: none;
}
.partners-trial__sp-btns {
display: none;
}
.partners-trial__sp-caption {
display: none;
}
.partners-shop__sp-map-link {
display: none;
}
.partners-shop__sp-caption {
display: none;
}
.brand-section__right--sp {
display: none;
}
.world-thoughts__sp-bottom {
display: none;
}
.spOnly {
display: none !important;
}
/* ===== CSS Variables ===== */
:root {
--color-main: #273240;
--color-accent: #F5EA00;
--color-text: #222222;
--color-sub: #D9D9D9;
--color-white: #FFFFFF;
--color-black: #000000;
--color-dark: #1a1a1a;
--color-bg-light: #f8f7f5;
--color-bg-yellow: #F3F0EA;
--color-table-stripe: #E9E6E0;
--color-taupe: #9e9886;
--font-ja: 'Noto Sans JP', sans-serif;
--font-serif: 'Noto Serif JP', serif;
--font-en: 'Rubik', sans-serif;
--font-oswald: 'Oswald', sans-serif;
--container-pad: 60px;
}
/* ===== Base ===== */
/* 横方向のはみ出し(右側の余白/横スクロール)を root でも抑止。
body だけだと fixed 要素や html 基準のはみ出しが残るため html にも付与。
clip は scroll container を作らないため position:sticky(.detail-gallery 等)を壊さない。 */
html {
overflow-x: clip;
}
body {
background: #fff;
color: var(--color-text);
overflow-x: clip;
}
main {
/* padding-top: 182px; */
}
/* ===== Container ===== */
.container {
width: 100%;
max-width: 1598px;
padding-left: var(--container-pad);
padding-right: var(--container-pad);
margin-left: auto;
margin-right: auto;
}
.container-wide {
width: 100%;
max-width: 1598px;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
}
/* ===== Section Title (.sec-title) ===== */
.sec-title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.sec-title__ja {
font-family: var(--font-serif);
font-weight: 400;
font-size: 36px;
line-height: 1.5;
letter-spacing: 1.8px;
color: var(--color-text);
white-space: nowrap;
width: 100%;
}
.sec-title__line {
display: inline-grid;
place-items: start;
grid-template-columns: max-content;
grid-template-rows: max-content;
line-height: 0;
position: relative;
flex-shrink: 0;
}
.sec-title__line-navy {
display: block;
width: 30px;
height: 1px;
background: var(--color-main);
grid-column: 1;
grid-row: 1;
}
.sec-title__line-yellow {
display: block;
width: 10px;
height: 1px;
background: var(--color-accent);
margin-left: 20px;
grid-column: 1;
grid-row: 1;
}
.sec-title__en {
font-family: var(--font-en);
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: var(--color-text);
white-space: nowrap;
}
/* ===== Section Heading (共通見出しスタイル) ===== */
.sec-heading {
font-family: var(--font-serif);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.025em;
}
/* ===== Buttons ===== */
.btn-main {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-main);
border: 1px solid var(--color-main);
color: var(--color-white);
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
line-height: 1.5;
padding: 15px 30px;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.btn-main::after {
content: '';
display: block;
width: 13px;
height: 10px;
flex-shrink: 0;
background: url('mp-img-cmn-icon_arrow_btn.svg') center / contain no-repeat;
transition: transform 0.3s;
}
@media (hover: hover) {
.btn-main:hover {
background: #fff;
border-color: #000;
color: var(--color-main);
}
.btn-main:hover::after {
background-image: url('mp-img-cmn-icon_arrow_btn_dk.svg');
transform: translateX(12px);
}
}
/* btn-main の軽量バリエーション: 全幅・薄色背景・左アイコン付き。
矢印は btn-main の ::after を流用し dark (icon_arrow_btn_dk.svg) に。(Figma 1482-1158) */
.btn-guide {
display: flex;
width: 100%;
justify-content: center;
min-height: 60px;
padding: 0.75rem 1.25rem;
margin-bottom: 0.625rem;
background: var(--color-white);
border-color: var(--color-main);
color: var(--color-text);
font-weight: 600;
white-space: normal;
text-align: center;
}
.btn-guide::after {
background-image: url('mp-img-cmn-icon_arrow_btn_dk.svg');
}
.btn-guide__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
}
.btn-guide__icon img {
display: block;
width: auto;
height: 100%;
}
@media (hover: hover) {
.btn-guide:hover {
background: var(--color-bg-light);
border-color: var(--color-sub);
color: var(--color-text);
}
}
.btn-arrow {
width: 13px;
height: 10px;
flex-shrink: 0;
}
.btn-outline {
width: fit-content;
display: inline-flex;
align-items: center;
gap: 10px;
background: transparent;
border: 1px solid var(--color-white);
color: var(--color-white);
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
line-height: 1.5;
padding: 15px 30px;
border-radius: 5px;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: background-color 0.3s, border-color 0.3s;
}
.btn-outline .btn-arrow {
width: 13px;
height: 10px;
flex-shrink: 0;
transition: transform 0.3s;
}
@media (hover: hover) {
.btn-outline:hover {
background-color: var(--color-main);
border-color: var(--color-main);
}
.btn-outline:hover .btn-arrow {
content: url('mp-img-cmn-icon_arrow_btn.svg');
transform: translateX(12px);
}
}
.btn-view-more {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-en);
font-size: 14px;
font-weight: 500;
color: var(--color-main);
text-decoration: none;
}
/* ===== HEADER ===== */
/*
グラデーション背景は ::before に分離。
#header 本体は中身 (logo + nav-link) の自然高さに追従させ、nav-item の縦伸びと
ロゴ部分での誤 hover を解消する。グラデの見た目は擬似要素で 182px を保つ。
*/
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 500;
background: transparent;
}
#header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 182px;
background: linear-gradient(to bottom, #080b0f 0%, #080b0f 50%, rgba(11, 14, 19, 0.94) 55%, rgba(13, 18, 24, 0.84) 60%, rgba(17, 22, 29, 0.72) 65%, rgba(18, 24, 32, 0.62) 70%, rgba(24, 30, 40, 0.51) 75%, rgba(25, 32, 42, 0.41) 80%, rgba(29, 35, 48, 0.31) 85%, rgba(25, 36, 51, 0.20) 90%, rgba(29, 39, 59, 0.10) 95%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: -1;
}
.header-inner {
/* height: 100% を撤廃。中身 (logo + nav-link) の自然高さに追従させる。
これにより nav-item が縦に伸びず、hover 判定が link 部分に限定される。 */
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 0 40px;
}
.header-logo {
width: 280px;
height: 95px; /* logo top:19px + img 69px ≈ 88px + 余白。dropdown top:95px と一致 */
flex-shrink: 0;
position: relative;
margin-right: 20px;
}
.logo-link {
position: absolute;
top: 19px;
left: 0;
display: block;
}
.logo-img {
display: block;
width: 280px;
height: 69px;
}
/* ---- Global Nav ---- */
.header-nav {
flex: 1;
display: flex;
align-items: flex-start;
}
.nav-list {
display: flex;
align-items: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
.nav-item {
display: flex;
align-items: flex-start;
position: relative;
}
.nav-link {
display: flex;
align-items: flex-start;
padding: 39px 18px 0;
font-family: var(--font-ja);
font-size: 18px;
font-weight: 700;
color: var(--color-white);
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
white-space: nowrap;
text-decoration: none;
position: relative;
}
.nav-mark {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 33px;
background: rgba(255, 255, 255, 0.4);
pointer-events: none;
}
.nav-mark::after {
content: '';
display: block;
width: 1px;
height: 10px;
background: var(--color-accent);
}
.nav-item--news {
align-self: stretch;
display: flex;
align-items: stretch;
}
.nav-link--news {
font-size: 18px;
padding: 19px 16px 0;
}
/* ---- Dropdown panel ---- */
.nav-dropdown {
position: fixed;
top: 95px;
left: 0;
width: 100%;
display: flex;
z-index: 490;
opacity: 0;
visibility: hidden;
transform: translateY(-22px);
transition: opacity 0.5s ease, visibility 0.5s, transform 0.45s ease-out;
pointer-events: none;
}
/*
Hover bridge (per-item): 各 .nav-item の真下に専用の透明ゾーンを置き、
リンクから dropdown に降りる途中で :hover が外れて消えるのを防ぐ。
旧実装は .nav-dropdown::before を全幅で配置していたため 6 個の bridge が
同位置に重なり、DOM 順で最後の nav-item の bridge だけが pointer を捕まえ、
隣リンクへの切替えを阻害していた (Issue #2)。
per-item 化 + hover 時のみ pointer-events: auto で誤キャプチャを排除。
*/
.nav-item::after {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 40px;
pointer-events: none;
}
@media (hover: hover) {
.nav-item:hover::after,
.nav-item:focus-within::after {
pointer-events: auto;
}
}
@media (hover: hover) {
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-dropdown:hover,
.nav-dropdown:focus-within {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
}
/* 10px dark band at the very top of the dropdown */
.nav-dd-band {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 10px;
background: var(--color-main);
z-index: 2;
}
/* Left dark photo panel */
.nav-dd-left {
width: 28.36%;
flex-shrink: 0;
position: relative;
overflow: hidden;
background: var(--color-main);
}
.nav-dd-left>img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-dd-title,
.nav-dd-title a {
position: absolute;
top: clamp(70px, 7.18vw, 124px);
right: clamp(20px, 2.89vw, 50px);
font-family: var(--font-ja);
font-size: clamp(14px, 1.39vw, 24px);
font-weight: 700;
color: var(--color-white);
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
line-height: 1.5;
white-space: nowrap;
}
.nav-dd-title a { position: static; top: auto; right: auto; }
.nav-dd-sub {
padding-left: clamp(10px, 1.16vw, 20px);
font-family: var(--font-ja);
font-size: 16px !important;
font-weight: 700;
color: var(--color-white);
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8), 0 4px 4px rgba(0, 0, 0, 0.25);
text-decoration: underline;
white-space: nowrap;
}
/* Right white panel */
.nav-dd-right {
flex: 1;
background: var(--color-white);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: calc(10px + clamp(20px, 2.31vw, 40px));
padding-bottom: clamp(20px, 2.31vw, 40px);
padding-inline: clamp(25px, 2.89vw, 50px);
z-index: 1;
}
.nav-dd-right.--sub{
padding-left: clamp(25px, 2.89vw, 50px);
padding-right: 0;
/* gap: 10px; */
}
/* Card */
.nav-dd-card {
display: flex;
flex-direction: column;
flex-shrink: 0;
text-decoration: none;
transition: transform 0.38s cubic-bezier(0.33, 1, 0.68, 1);
min-width: 0;
position: relative;
}
@media (hover: hover) {
.nav-dd-card:hover {
transform: translateY(-6px);
}
}
.nav-dd-card--sm {
width: calc(20%);
}
.nav-dd-card--lg {
width: 25%;
}
.nav-dd-card-img {
position: relative;
width: 100%;
height: clamp(110px, 10.65vw, 184px);
overflow: hidden;
flex-shrink: 0;
}
.nav-dd-card-img>img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
.nav-dd-card:hover .nav-dd-card-img>img {
transform: scale(1.12);
}
}
.nav-dd-card-img::after {
content: '';
position: absolute;
inset: 0;
background: var(--color-accent);
opacity: 0;
transition: opacity 0.38s ease;
pointer-events: none;
z-index: 1;
}
@media (hover: hover) {
.nav-dd-card:hover .nav-dd-card-img::after {
opacity: 0.13;
}
}
.nav-dd-card-grad {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 92px;
background: linear-gradient(to bottom, rgba(39, 50, 64, 0), #273240);
pointer-events: none;
z-index: 2;
}
.nav-dd-card-name {
position: absolute;
bottom: 10px;
left: 15px;
right: 10px;
font-family: var(--font-ja);
font-size: clamp(11px, 0.93vw, 16px);
font-weight: 600;
color: var(--color-white);
line-height: 1.5;
z-index: 3;
transition: transform 0.38s ease;
}
@media (hover: hover) {
.nav-dd-card:hover .nav-dd-card-name {
transform: translateY(-4px);
}
}
.nav-dd-card-line {
width: 100%;
height: 1px;
background: var(--color-main);
flex-shrink: 0;
position: relative;
}
.nav-dd-card-line span {
position: absolute;
left: 0;
top: 0;
width: clamp(30px, 2.95vw, 51px);
height: 1px;
background: var(--color-accent);
transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
.nav-dd-card:hover .nav-dd-card-line span {
width: 100%;
}
}
/* ご購入後のサポート: side text list */
.nav-dd-side-list {
display: block;
border: 1px solid var(--color-sub);
border-radius: 5px 0 0 5px;
flex-shrink: 0;
}
.nav-dd-side-list_wrap{
padding-left: 10px;
padding-bottom: 3px;
width: 20%;
}
.nav-dd-side-item {
display: block;
font-family: var(--font-ja);
font-size: clamp(11px, 0.93vw, 16px);
font-weight: 600;
color: var(--color-text);
line-height: 1.5;
text-decoration: none;
padding: clamp(10px, 1vw, 19px) clamp(10px, 0.8vw, 18px);
border-bottom: 1px solid var(--color-sub);
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.nav-dd-side-item:hover {
background: rgba(39, 50, 64, 0.04);
color: var(--color-main);
transform: translateX(6px);
}
}
.nav-dd-side-item:last-child {
border-bottom: none;
}
/* Header Right */
.header-right {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
align-self: flex-start;
padding-top: 25px;
}
.header-sns {
display: flex;
align-items: center;
gap: 14px;
}
.header-sns a {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.85;
transition: opacity 0.2s;
}
@media (hover: hover) {
.header-sns a:hover {
opacity: 1;
}
}
.header-sns-icon {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
.header-sns-icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.btn-hamburger {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--color-main);
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 7px;
flex-shrink: 0;
padding: 0 14px 0 0;
transition: background 0.35s ease;
position: relative;
overflow: hidden;
}
.btn-hamburger::before {
content: '';
position: absolute;
inset: 0;
background: var(--color-accent);
border-radius: 50%;
transform: scale(0);
opacity: 0;
transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.35s ease;
}
@media (hover: hover) {
.btn-hamburger:hover::before {
transform: scale(1);
opacity: 1;
}
}
.btn-hamburger span {
display: block;
height: 2px;
background: var(--color-accent);
transition: width 0.35s cubic-bezier(0.33, 1, 0.68, 1), background 0.35s ease;
position: relative;
z-index: 1;
}
.btn-hamburger span:nth-child(1) {
width: 16px;
}
.btn-hamburger span:nth-child(2) {
width: 22px;
}
.btn-hamburger span:nth-child(3) {
width: 28px;
}
@media (hover: hover) {
.btn-hamburger:hover span {
background: var(--color-main);
}
.btn-hamburger:hover span:nth-child(1) {
width: 28px;
}
.btn-hamburger:hover span:nth-child(3) {
width: 16px;
}
}
/* ===== SIDE A ===== */
#sideA {
position: fixed;
right: 0;
top: 148px;
width: 192px;
z-index: 490;
overflow: visible;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* side-fixed と連動して非表示 (スクロール / ボタン操作) */
#sideA.is-closed {
transform: translateX(220px);
opacity: 0;
pointer-events: none;
}
/* 装飾リング（ヘッダー境界にかかる白いリング） */
.sideA-ring {
z-index: 1;
position: absolute;
left: 15px;
top: -9px;
width: 48px;
height: 48px;
pointer-events: none;
}
.sideA-ring img {
width: 100%;
height: 100%;
}
/* アクセントバー */
.sideA-accent {
position: absolute;
right: 0;
top: -3px;
width: 101px;
height: 6px;
background: var(--color-accent);
}
/* メンバー登録ログイン */
.sideA-member {
display: block;
position: relative;
background: var(--color-main);
border: 1px solid var(--color-main);
height: 76px;
margin-top: 3px;
text-decoration: none;
transition: background 0.3s ease, border-color 0.3s ease;
overflow: hidden;
}
.sideA-member::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--color-accent);
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (hover: hover) {
.sideA-member:hover {
background: #1c2530;
}
.sideA-member:hover::after {
transform: translateX(0);
}
}
/* MEMBER ワードマーク */
.sideA-mb-wm {
position: absolute;
left: 71px;
top: 16px;
width: 104px;
height: 18px;
}
.sideA-mb-full {
position: absolute;
left: 0;
top: 0;
width: 96px;
height: 12px;
z-index: 1;
}
.sideA-mb-vec {
position: absolute;
left: 26px;
top: 8px;
width: 78px;
height: 10px;
z-index: 0;
}
/* メンバーテキスト */
.sideA-member-text {
position: absolute;
white-space: nowrap;
left: 15px;
top: 42px;
width: 160px;
font-size: 16px;
font-weight: 700;
color: var(--color-white);
line-height: 24px;
}
/* アイコン行 */
.sideA-icons {
display: flex;
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
}
.sideA-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--color-main);
border-right: 1px solid var(--color-sub);
flex-shrink: 0;
transition: filter 0.2s ease;
}
@media (hover: hover) {
.sideA-icon-btn:hover {
filter: brightness(0.75);
}
}
.sideA-icon-btn:nth-child(3),
.sideA-icon-btn:nth-child(4) {
border-right: none;
}
.sideA-icon-btn:nth-child(3) {
position: relative;
}
.sideA-cart-count {
position: absolute;
top: 6px;
right: 6px;
width: 15px;
height: 15px;
background: var(--color-accent);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
color: #000;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.sideA-icon-btn--accent {
background: var(--color-accent);
}
.sideA-icon-btn img {
width: 24px;
height: auto;
aspect-ratio: 1/1;
display: block;
}
/* コールセンター */
.sideA-call {
position: relative;
background: var(--color-main);
height: 75px;
}
.sideA-call-label {
position: absolute;
left: 16px;
top: 13px;
font-size: 14px;
font-weight: 700;
color: var(--color-white);
line-height: normal;
}
/* フリーダイヤルロゴ */
.sideA-freedial {
position: absolute;
left: 16px;
top: 37px;
width: 43px;
height: 24px;
}
.sideA-fd-num {
position: absolute;
left: 0;
top: 0;
width: 37px;
height: 24px;
}
.sideA-fd-fill {
position: absolute;
left: 0;
top: 4px;
width: 37px;
height: 17px;
}
.sideA-fd-dot {
position: absolute;
right: 0;
bottom: 0;
width: 5px;
height: 5px;
}
/* 電話番号 */
.sideA-call-tel {
position: absolute;
left: 61px;
top: 33px;
/* width: 107px; */
font-family: var(--font-oswald);
font-size: 22px;
font-weight: 400;
color: var(--color-white);
text-align: right;
line-height: normal;
}
/* ===== HAMBURGER MENU ===== */
.hbg-overlay {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s, visibility 0.3s;
overflow: hidden;
}
.hbg-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.hbg-panel {
position: absolute;
top: 0;
right: 0;
width: 751px;
height: 100%;
background: var(--color-white);
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
border-bottom-left-radius: 5px;
}
.hbg-overlay.is-open .hbg-panel {
transform: translateX(0);
}
/* 閉じるボタン */
.hbg-close {
position: absolute;
top: 26px;
right: 40px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--color-main);
border: none;
cursor: pointer;
z-index: 10;
transition: transform 0.25s ease, filter 0.25s ease;
}
@media (hover: hover) {
.hbg-close:hover {
transform: rotate(90deg);
filter: brightness(1.2);
}
}
.hbg-close::before,
.hbg-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 27px;
height: 1px;
background: var(--color-accent);
}
.hbg-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.hbg-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
/* ロゴバー */
.hbg-logo-bar {
display: flex;
align-items: center;
padding: 30px 40px;
}
.hbg-logo {
display: flex;
align-items: center;
text-decoration: none;
transition: opacity 0.25s ease;
}
@media (hover: hover) {
.hbg-logo:hover {
opacity: 0.65;
}
}
.hbg-logo .logo-img {
display: block;
height: 69px;
width: auto;
}
/* ロゴバー右側アイコン */
.hbg-logo-bar-icons {
display: flex;
align-items: center;
gap: 25px;
margin-left: auto;
padding-right: 97px;
flex-shrink: 0;
}
.hbg-icon-btn {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
flex-shrink: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.hbg-icon-btn:hover {
opacity: 0.6;
transform: scale(1.12);
}
}
.hbg-icon-btn img {
width: 24px;
height: 24px;
display: block;
}
.hbg-icon-cart {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
flex-shrink: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.hbg-icon-cart:hover {
opacity: 0.6;
transform: scale(1.12);
}
}
.hbg-icon-cart>img {
width: 24px;
height: 24px;
display: block;
}
.hbg-cart-count {
position: absolute;
top: -3px;
right: -5px;
width: 15px;
height: 15px;
background: var(--color-accent);
border-radius: 50%;
font-size: 9px;
font-weight: 700;
color: #000;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* メンバー + コールセンター行 */
.hbg-meta {
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
display: flex;
align-items: center;
padding-top: 19px;
padding-bottom: 19px;
}
.hbg-member {
display: flex;
align-items: center;
gap: 10px;
padding: 0 20px 0 70px;
width: 316px;
flex-shrink: 0;
font-size: 18px;
font-weight: 700;
color: var(--color-main);
text-decoration: none;
white-space: nowrap;
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.hbg-member:hover {
opacity: 0.65;
transform: translateX(5px);
}
}
.hbg-member-icon {
width: 27px;
height: 27px;
display: block;
flex-shrink: 0;
}
.hbg-meta-div {
width: 1px;
height: 40px;
background: var(--color-sub);
flex-shrink: 0;
}
.hbg-tel {
flex: 1;
padding-left: 22px;
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
text-decoration: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.hbg-tel:hover {
opacity: 0.65;
transform: translateX(5px);
}
}
.hbg-tel-label {
font-size: 16px;
font-weight: 700;
color: var(--color-main);
white-space: nowrap;
}
.hbg-fd-logo {
height: 24px;
width: auto;
display: block;
flex-shrink: 0;
}
.hbg-tel-num {
font-family: var(--font-oswald);
font-size: 24px;
font-weight: 400;
color: var(--color-main);
line-height: 1;
}
/* ボディ */
.hbg-body {
display: flex;
padding: 40px 40px 0;
gap: 50px;
}
/* ナビ */
.hbg-nav {
width: 400px;
flex-shrink: 0;
position: relative;
}
.hbg-nav::before,
.hbg-nav::after {
content: '';
position: absolute;
top: 0;
left: 3px;
height: 1px;
z-index: 1;
pointer-events: none;
}
.hbg-nav::before {
width: 176px;
background: var(--color-main);
}
.hbg-nav::after {
width: 20px;
background: var(--color-accent);
z-index: 2;
}
.hbg-nav-list {
border: 1px solid var(--color-sub);
border-radius: 5px;
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
.hbg-nav-item {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--color-sub);
}
.hbg-nav-item:last-child {
border-bottom: none;
}
.hbg-nav-row {
display: flex;
align-items: stretch;
cursor: pointer;
transition: background 0.2s;
}
@media (hover: hover) {
.hbg-nav-row:hover {
background: rgba(39, 50, 64, 0.05);
}
}
.hbg-nav-link {
flex: 1;
display: flex;
align-items: center;
min-height: 65px;
padding: 20px 16px;
font-size: 16px;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
line-height: 1.5;
transition: color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.hbg-nav-row:hover .hbg-nav-link {
color: var(--color-main);
transform: translateX(6px);
}
}
.hbg-nav-plus {
width: 40px;
min-height: 65px;
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.hbg-nav-plus::before,
.hbg-nav-plus::after {
content: '';
position: absolute;
background: var(--color-main);
transition: transform 0.25s ease;
}
.hbg-nav-plus::before {
width: 12px;
height: 1px;
}
.hbg-nav-plus::after {
width: 1px;
height: 12px;
}
.hbg-nav-item.is-open .hbg-nav-plus::after {
transform: scaleY(0);
}
.hbg-nav-sub {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.hbg-nav-item.is-open .hbg-nav-sub {
max-height: 600px;
}
.hbg-nav-sub li {
border-top: 1px solid var(--color-sub);
}
.hbg-nav-sub-link {
display: flex;
align-items: center;
padding: 12px 24px;
font-size: 13px;
font-weight: 500;
color: var(--color-text);
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.hbg-nav-sub-link:hover {
background: rgba(39, 50, 64, 0.04);
color: var(--color-main);
transform: translateX(6px);
}
}
/* バナーカラム */
.hbg-bncol {
display: flex;
flex-direction: column;
gap: 20px;
}
.hbg-bn {
display: block;
position: relative;
width: 221px;
height: 118px;
overflow: hidden;
text-decoration: none;
}
.hbg-bn-photo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
.hbg-bn:hover .hbg-bn-photo {
transform: scale(1.06);
}
}
.hbg-bn-boxes {
position: absolute;
top: 9px;
left: 8px;
display: flex;
}
.hbg-bn-boxes span {
width: 30px;
height: 30px;
border: 1px solid #fff;
margin-left: -1px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
color: #fff;
transition: background 0.22s ease, color 0.22s ease;
}
.hbg-bn-boxes span:first-child {
margin-left: 0;
}
@media (hover: hover) {
.hbg-bn--trial:hover .hbg-bn-boxes span:nth-child(1) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0s;
}
.hbg-bn--trial:hover .hbg-bn-boxes span:nth-child(2) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0.06s;
}
.hbg-bn--trial:hover .hbg-bn-boxes span:nth-child(3) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0.12s;
}
.hbg-bn--trial:hover .hbg-bn-boxes span:nth-child(4) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0.18s;
}
}
.hbg-bn-foot {
position: absolute;
bottom: 14px;
right: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.hbg-bn-text {
font-size: 16px;
font-weight: 500;
color: #fff;
white-space: nowrap;
line-height: 1;
transition: transform 0.3s ease;
}
@media (hover: hover) {
.hbg-bn:hover .hbg-bn-text {
transform: translateX(4px);
}
}
.hbg-bn-arrow {
position: relative;
display: inline-block;
width: 30px;
height: 1px;
background: #fff;
flex-shrink: 0;
transition: transform 0.3s ease;
}
@media (hover: hover) {
.hbg-bn:hover .hbg-bn-arrow {
transform: translateX(8px);
}
}
.hbg-bn-arrow::before,
.hbg-bn-arrow::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 8px;
height: 1px;
background: #fff;
transform-origin: right center;
}
.hbg-bn-arrow::before {
transform: rotate(-30deg);
}
.hbg-bn-arrow::after {
transform: rotate(30deg);
}
.hbg-bn-rule-ov {
position: absolute;
inset: 0;
background: rgba(39, 50, 64, 0.6);
pointer-events: none;
transition: background 0.35s ease;
}
@media (hover: hover) {
.hbg-bn--rule:hover .hbg-bn-rule-ov {
background: rgba(39, 50, 64, 0.82);
}
}
.hbg-bn-rule-txt {
position: absolute;
top: 60px;
left: 62px;
margin: 0;
font-size: 16px;
font-weight: 700;
color: #fff;
line-height: 1.5;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
transition: transform 0.3s ease;
}
@media (hover: hover) {
.hbg-bn--rule:hover .hbg-bn-rule-txt {
transform: translateX(5px);
}
}
.hbg-badge {
position: absolute;
top: 64px;
left: 10px;
width: 40px;
height: 40px;
background: var(--color-main);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.hbg-badge::before {
content: '';
position: absolute;
width: 35.2px;
height: 35.2px;
background: var(--color-accent);
border-radius: 50%;
}
.hbg-badge span {
position: relative;
z-index: 1;
font-size: 12px;
font-weight: 900;
color: var(--color-main);
transform: rotate(-15deg);
line-height: 1;
}
/* メディア・SNS行 */
.hbg-media {
margin: 20px 40px 0;
background: #ddd;
border-radius: 5px;
display: flex;
align-items: stretch;
overflow: hidden;
}
.hbg-media-tag {
width: 44px;
background: var(--color-main);
border-radius: 5px 0 0 5px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hbg-media-tag span {
writing-mode: vertical-rl;
font-size: 14px;
font-weight: 700;
color: var(--color-accent);
line-height: 1.2;
letter-spacing: 3px;
}
.hbg-media-ttl {
margin: 0;
display: flex;
align-items: center;
padding: 12px 14px;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
line-height: 1.5;
flex-shrink: 0;
}
.hbg-media-sep {
width: 1px;
height: 58px;
flex-shrink: 0;
position: relative;
align-self: center;
}
.hbg-media-sep::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 29px;
background: var(--color-accent);
}
.hbg-media-sep::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 1px;
height: 29px;
background: var(--color-main);
}
.hbg-media-links {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 0 14px;
}
.hbg-media-link {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
transition: color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.hbg-media-link:hover {
color: var(--color-main);
transform: translateX(4px);
}
}
/* サブリンク */
.hbg-sub {
margin: 20px 40px 0;
border-top: 1px solid var(--color-sub);
}
.hbg-sub-row {
display: flex;
border-bottom: 1px solid var(--color-sub);
}
.hbg-sub-link {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: 65px;
padding: 20px 16px;
font-size: 16px;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
transition: color 0.25s ease, background 0.25s ease;
gap: 10px;
}
@media (hover: hover) {
.hbg-sub-link:hover {
color: var(--color-main);
background: rgba(39, 50, 64, 0.04);
}
}
.hbg-sub-link+.hbg-sub-link {
position: relative;
}
.hbg-sub-link+.hbg-sub-link::before {
content: '';
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 1px;
background: var(--color-sub);
}
/* 丸矢印アイコン */
.hbg-circle-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 1px solid var(--color-main);
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.hbg-circle-arrow::before {
content: '';
position: absolute;
width: 5px;
height: 5px;
border-top: 1px solid var(--color-text);
border-right: 1px solid var(--color-text);
transform: rotate(45deg) translate(-1px, 1px);
}
/* SNS */
.hbg-sns {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 31px 0 30px;
}
.hbg-sns-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
text-decoration: none;
transition: transform 0.25s ease, opacity 0.25s ease;
}
@media (hover: hover) {
.hbg-sns-btn:hover {
transform: scale(1.2);
opacity: 0.75;
}
}
.hbg-sns-btn img {
width: 24px;
height: 24px;
display: block;
object-fit: contain;
}
/* ===== FIXED SIDE BANNERS ===== */
.side-fixed {
position: fixed;
right: 0;
bottom: 0;
z-index: 400;
display: flex;
flex-direction: row;
align-items: flex-end;
transition: transform 0.3s ease;
}
.side-fixed.is-closed {
transform: translateX(180px);
}
.side-fixed__banners {
display: flex;
flex-direction: column;
gap: 30px;
transition: opacity 0.3s ease;
}
.side-fixed.is-closed .side-fixed__banners {
opacity: 0;
}
/* タブ列 wrapper */
.side-fixed__tab-col {
position: relative;
width: 46px;
align-self: stretch;
flex-shrink: 0;
}
/* 閉じるタブ */
.side-fixed__close-tab {
position: absolute;
max-height: 113px;
/* top: 0; */
left: 0;
right: 0;
bottom: 0;
background: var(--color-main);
border: none;
cursor: pointer;
border-radius: 3px 0 0 3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 10px 0;
gap: 8px;
color: #fff;
opacity: 1;
pointer-events: auto;
transition: opacity 0.2s ease, filter 0.2s ease;
}
@media (hover: hover) {
.side-fixed__close-tab:hover {
filter: brightness(1.2);
}
}
.side-fixed__close-x {
position: relative;
display: block;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.side-fixed__close-x::before,
.side-fixed__close-x::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 1px;
background: var(--color-accent);
}
.side-fixed__close-x::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.side-fixed__close-x::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.side-fixed__close-label {
writing-mode: vertical-rl;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.15em;
}
/* 開くタブ */
.side-fixed__open-tab {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 113px;
background: var(--color-main);
border: none;
cursor: pointer;
border-radius: 8px 0 0 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 0;
gap: 8px;
color: #fff;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, filter 0.2s ease;
}
@media (hover: hover) {
.side-fixed__open-tab:hover {
filter: brightness(1.2);
}
}
.side-fixed__open-arrow {
font-size: 10px;
color: var(--color-accent);
line-height: 1;
}
.side-fixed__open-arrow img {
width: 13px;
height: 10px;
flex-shrink: 0;
transform: rotate(-180deg);
}
.side-fixed__open-label {
writing-mode: vertical-rl;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.15em;
}
.side-fixed__open-chevron {
font-size: 10px;
line-height: 1;
}
/* 閉じている状態 */
.side-fixed.is-closed .side-fixed__close-tab {
opacity: 0;
pointer-events: none;
}
.side-fixed.is-closed .side-fixed__open-tab {
opacity: 1;
pointer-events: auto;
}
/* バナー共通 */
.sfb {
display: block;
position: relative;
width: 180px;
height: 120px;
overflow: visible;
text-decoration: none;
}
.sfb-photo-wrap {
position: absolute;
inset: 0;
overflow: hidden;
}
.sfb-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
.sfb:hover .sfb-photo {
transform: scale(1.06);
}
}
/* 試乗予約: 文字ボックス */
.sfb-trial-title {
position: absolute;
top: 8px;
left: 8px;
display: flex;
}
.sfb-trial-title span {
width: 26px;
height: 26px;
border: 1px solid #fff;
margin-left: -1px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
color: #fff;
transition: background 0.22s ease, color 0.22s ease;
}
.sfb-trial-title span:first-child {
margin-left: 0;
}
@media (hover: hover) {
.sfb--trial:hover .sfb-trial-title span:nth-child(1) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0s;
}
.sfb--trial:hover .sfb-trial-title span:nth-child(2) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0.06s;
}
.sfb--trial:hover .sfb-trial-title span:nth-child(3) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0.12s;
}
.sfb--trial:hover .sfb-trial-title span:nth-child(4) {
background: rgba(255, 255, 255, 0.9);
color: var(--color-main);
transition-delay: 0.18s;
}
}
/* バナーフッター (テキスト + 矢印) */
.sfb-foot {
position: absolute;
bottom: 20px;
right: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.sfb-foot-text {
font-size: 16px;
font-weight: 500;
color: #fff;
line-height: 1;
white-space: nowrap;
transition: transform 0.3s ease;
}
/* 加盟店募集 もご予約はこちらと同サイズ (16px) に統一 */
.sfb--career .sfb-foot-text {
font-size: 16px;
}
@media (hover: hover) {
.sfb:hover .sfb-foot-text {
transform: translateX(4px);
}
}
/* 矢印 */
.sfb-foot-arrow {
position: relative;
display: inline-block;
width: 30px;
height: 1px;
background: #fff;
flex-shrink: 0;
transition: transform 0.3s ease;
}
@media (hover: hover) {
.sfb:hover .sfb-foot-arrow {
transform: translateX(8px);
}
}
.sfb-foot-arrow::before,
.sfb-foot-arrow::after {
content: '';
position: absolute;
right: 0;
width: 8px;
height: 1px;
background: #fff;
transform-origin: right center;
}
.sfb-foot-arrow::before {
top: 0;
transform: rotate(-30deg);
}
.sfb-foot-arrow::after {
top: 0;
transform: rotate(30deg);
}
/* 遵守義務: オーバーレイ */
.sfb-rule-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 62px;
background: rgba(39, 50, 64, 0.6);
pointer-events: none;
transition: background 0.35s ease;
}
@media (hover: hover) {
.sfb--rule:hover .sfb-rule-overlay {
background: rgba(39, 50, 64, 0.82);
}
}
/* 遵守義務: テキスト */
.sfb-rule-text {
position: absolute;
top: 8px;
right: 10px;
margin: 0;
font-size: 16px;
font-weight: 700;
color: #fff;
text-align: right;
line-height: 1.4;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
transition: transform 0.3s ease;
}
@media (hover: hover) {
.sfb--rule:hover .sfb-rule-text {
transform: translateX(-5px);
}
}
/* 遵守義務: 注目バッジ */
.sfb-badge {
position: absolute;
top: -10px;
left: -10px;
width: 45px;
height: 45px;
background: var(--color-main);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.sfb-badge::before {
content: '';
position: absolute;
width: 39.6px;
height: 39.6px;
background: var(--color-accent);
border-radius: 50%;
}
.sfb-badge span {
position: relative;
z-index: 1;
font-size: 14px;
font-weight: 900;
color: var(--color-main);
transform: rotate(-15deg);
line-height: 1;
}
/* 遵守義務: 矢印 (単体、右下) */
.sfb-rule-arrow {
position: absolute;
bottom: 15px;
right: 10px;
}
/* ===== MV (Main Visual) ===== */
#mv {
position: relative;
width: 100%;
height: 100svh;
overflow: hidden;
background: var(--color-main);
}
.mv-video {
position: absolute;
inset: 0;
background: #1a1a1a;
overflow: hidden;
}
.mv-video video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mv-overlay {
position: absolute;
inset: 0;
background: rgba(39, 50, 64, 0.5);
}
.mv-text {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 42.5vh;
text-align: center;
white-space: nowrap;
}
.mv-text__main {
font-family: var(--font-ja);
font-size: 40px;
font-weight: 700;
color: var(--color-white);
letter-spacing: 2px;
display: block;
margin-bottom: 30px;
}
.mv-text__sub {
font-family: var(--font-en);
font-size: 30px;
font-weight: 500;
font-style: italic;
color: var(--color-accent);
display: block;
}
.mv-text__catch {
font-family: var(--font-serif);
font-size: 16px;
font-weight: 400;
color: var(--color-white);
letter-spacing: 1px;
display: block;
margin-top: 16px;
}
@media (max-width: 568px) {
.mv-text__catch { font-size: 12px; margin-top: 6px; }
}
/* MV KV catch: 低い viewport で .mv-text と .mv-slider-wrap (流れる自転車) が重なる対策。
既存 .mv-text top: 42.5vh / .mv-slider-wrap top: 54.2vh のままだと
テキスト3行 (約132px) が両者の間 (11.7vh) に収まらず重なる。
テキスト位置のみ上方向に詰める (JS/DOM変更なし)。*/
@media (min-width: 1355px) and (max-height: 832px) {
.mv-text {
top: calc(42.5vh - 80px);
}
}
@media (max-width: 1355px) and (max-height: 735px) {
.mv-text {
top: calc(42.5vh - 100px);
}
}
.mv-grad-top {
position: absolute;
left: 0;
right: 0;
height: 60vh;
bottom: 30px;
background: linear-gradient(to bottom, rgba(204, 204, 204, 0) 40%, #eee);
pointer-events: none;
}
.mv-grad-bottom {
position: absolute;
left: 0;
right: 0;
height: 30px;
bottom: 0;
background: linear-gradient(to top, #fff 30%, #eee);
pointer-events: none;
}
/* MV Product Slider */
/* direction:rtl required for Slick rtl:true — it positions track with positive left values */
.mv-slider {
direction: rtl;
}
.mv-slider .slick-list,
.mv-slider .slick-track,
.mv-slider .slick-slide {
height: 44.5vh;
}
/* reset direction on slide content so text reads LTR */
.mv-slide {
direction: ltr;
}
.mv-slider-wrap {
position: absolute;
top: 54.2vh;
left: 0;
right: 0;
height: 44.5vh;
overflow: hidden;
}
.mv-slide {
position: relative;
height: 44.5vh;
padding: 0;
outline: none;
display: block;
text-decoration: none;
color: inherit;
}
/* bike image: right edge at 25.98% margin, full height (Figma 607:26949) */
.mv-slide__img {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
height: 100%;
object-position: bottom;
width: auto;
display: block;
max-width: clamp(225px, 30vw, 530px);
max-height: 465px;
object-fit: contain;
}
.mv-slide__info {
position: absolute;
right: calc(69vw + 20px);
bottom: 13.04%;
max-width: 220px;
}
.mv-slide__brand {
display: block;
width: auto;
height: auto;
max-width: 110px;
max-height: 49px;
object-fit: contain;
object-position: left center;
margin-bottom: 10px;
}
.mv-slide__name-en {
font-family: var(--font-en);
font-size: 24px;
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
}
.mv-slide__name-jp {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 600;
color: var(--color-text);
line-height: 1.5;
}
.mv-slide__price {
font-family: var(--font-en);
font-size: 20px;
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
}
.mv-slide__price .yen {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 700;
}
.mv-slide__price .tax {
font-family: var(--font-ja);
font-size: 12px;
font-weight: 700;
}
/* ===== PICKUP ===== */
#pickup {
padding: 60px 0 100px;
/* border-top: 1px solid var(--color-bg-yellow); */
background-color: var(--color-bg-yellow);
border-bottom: 1px solid var(--color-sub);
}
.pickup-inner {
display: flex;
align-items: flex-start;
gap: 0;
margin-bottom: 50px;
justify-content: space-between;
}
.pickup-title-col {
flex-shrink: 0;
}
.pickup-lead-col {
flex: 1;
padding-left: 30px;
padding-top: 13px;
max-width: fit-content;
}
.pickup-lead-col p {
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
}
.pickup-grid {
display: flex;
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
}
.pickup-item {
flex: 1;
border-right: 1px solid var(--color-sub);
padding: 30px 30px 20px;
display: block;
text-decoration: none;
position: relative;
}
.pickup-item:last-child {
border-right: none;
}
/* 商品一覧ページ(#shop-list): 多数の商品を3カラムで折り返し表示 (≥897px)。
トップページの pickup-grid(1行3アイテム)には影響させないため #shop-list に限定。
≤896px は既存の縦積みカードパターンをそのまま使う */
#shop-list .featured-icon-note{
margin-bottom: 20px;
}
@media (min-width: 897px) {
#shop-list .pickup-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#shop-list .pickup-item {
flex: none;
border-right: 1px solid var(--color-sub);
}
#shop-list .pickup-item:nth-child(3n) {
border-right: none;
}
#shop-list .pickup-item:nth-child(n+4) {
border-top: 1px solid var(--color-sub);
}
}
/* 商品一覧ページのページャー (Figma 1178-13061) */
.shop-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 40px;
}
.shop-pager__list {
display: flex;
align-items: center;
gap: 10px;
list-style: none;
margin: 0;
padding: 0;
}
.shop-pager__num {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--color-main);
border-radius: 3px;
background: transparent;
font-family: var(--font-en);
font-weight: 500;
font-size: 16px;
line-height: 1;
color: var(--color-main);
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
}
/* 現在ページ = メインカラー塗り + アクセント文字 */
.shop-pager__num.is-current {
background: var(--color-main);
color: var(--color-accent);
}
.shop-pager__arrow {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 30px;
}
.shop-pager__arrow img {
width: 13px;
height: 10px;
display: block;
}
/* 左矢印は icon_arrow_btn_dk.svg を左右反転 */
.shop-pager__arrow--prev img {
transform: scaleX(-1);
}
@media (hover: hover) {
.shop-pager__num:not(.is-current):hover {
background: var(--color-main);
color: var(--color-white);
}
.shop-pager__arrow:hover {
opacity: 0.7;
}
}
.pickup-item__brand {
width: 180px;
height: 40px;
object-fit: contain;
object-position: left center;
display: block;
margin-bottom: -40px;
}
.pickup-item__img-wrap {
width: 100%;
aspect-ratio: 454 / 342;
overflow: hidden;
margin-bottom: 0px;
position: relative;
z-index: 0;
}
.pickup-item__img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.4s ease;
}
.pickup-item__img-skew {
opacity: 0;
}
@media (hover: hover) {
.pickup-item:hover .pickup-item__img-skew {
opacity: 1;
}
.pickup-item:hover .pickup-item__img-wrap img:not(.pickup-item__img-skew) {
opacity: 0;
}
/* addon (アクセサリー) 商品は hover 画像切替を無効化 — 既定画像のまま */
.pickup-item--no-hover:hover .pickup-item__img-wrap img:not(.pickup-item__img-skew) {
opacity: 1;
}
.pickup-item--no-hover:hover .pickup-item__img-skew {
opacity: 0;
}
}
.pickup-item__name-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 0;
}
/* 型式認定車ラベル（LORIS/LA ROSE 等の車名上）。pickup/popular/一覧 共通。
flex の通常フローから外し、商品名の真上に absolute 配置（画像下の余白に収まる）。 */
.pickup-item__name-row,
.popular-item__name-row {
position: relative;
}
.pickup-item__keishiki,
.popular-item__keishiki {
position: absolute;
left: 0;
bottom: 42px;
font-family: var(--font-ja);
font-size: 12px;
font-weight: 600;
line-height: 1.7;
color: #fff;
background-color: var(--color-main);
border-radius: 3px;
padding: 3px 10px;
white-space: nowrap;
}
/* スマホ: バッジを通常フロー(relative)に戻し、サイズを縮小 */
@media (max-width: 896px) {
.pickup-item__keishiki,
.popular-item__keishiki {
position: relative;
left: unset;
bottom: unset;
font-size: 10px;
padding: 1px 8px;
}
}
/* カード整列: 商品名の行数(長い英名)で name-row 高さが変わると
下の価格行がずれるため、PC(複数カラム)では name-row を2行分の高さで固定。
pickup/人気/一覧 すべて共通。SP(1カラム縦積み)は対象外。 */
@media (min-width: 897px) {
.pickup-item__name-row,
.popular-item__name-row {
min-height: 50px;
}
}
/* 関連商品カードの型式認定車バッジ（pickup と同じバッジ意匠・商品名の上に配置） */
.related-item__name {
position: relative;
}
.related-item__keishiki {
position: absolute;
left: 0;
bottom: 100%;
margin-bottom: 6px;
font-family: var(--font-ja);
font-size: 12px;
font-weight: 600;
line-height: 1.7;
color: #fff;
background-color: var(--color-main);
border-radius: 3px;
padding: 3px 10px;
white-space: nowrap;
}
.pickup-item__name-en {
font-family: var(--font-en);
font-size: 24px;
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
}
.pickup-item__name-jp {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 600;
color: var(--color-text);
line-height: 1.7;
}
.pickup-item__icons {
display: flex;
align-items: flex-end;
gap: 4px;
margin-left: auto;
flex-shrink: 0;
padding-bottom: 7px;
position: absolute;
z-index: 1;
right: 30px;
}
.pickup-item__icon {
width: 40px;
height: auto;
display: block;
object-fit: contain;
}
/* PICKUPアイコン ツールチップ（hoverで上側に表示。中身はJSで注入） */
.pickup-item__icon-wrap {
position: relative;
display: inline-flex;
align-items: flex-end;
}
.pickup-tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
margin-left: -110px; /* width(220)の半分。アイコン中央に揃える */
width: 220px;
padding: 12px 14px;
background: var(--color-main);
color: var(--color-white);
border-radius: 6px;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
text-align: left;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s;
z-index: 10;
}
/* 画面端での見切れ回避（JSで付与） */
.pickup-tooltip--right {
left: auto;
right: -8px;
margin-left: 0;
}
.pickup-tooltip--left {
left: -8px;
margin-left: 0;
}
/* 下向きの吹き出し矢印（既定はアイコン中央） */
.pickup-tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 110px;
margin-left: -7px;
border: 7px solid transparent;
border-top-color: var(--color-main);
}
/* 端寄せ時は矢印をアイコン位置（吹き出し端付近）に寄せる */
.pickup-tooltip--right::after {
left: auto;
right: 12px;
margin-left: 0;
}
.pickup-tooltip--left::after {
left: 12px;
margin-left: 0;
}
.pickup-tooltip__title {
display: block;
font-family: var(--font-ja);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
color: var(--color-white);
margin-bottom: 6px;
}
.pickup-tooltip__text {
display: block;
font-family: var(--font-ja);
font-size: 12px;
font-weight: 400;
line-height: 1.6;
color: var(--color-white);
}
/* hover対応デバイスのみ。タッチ端末では発火させない（SPは非実装） */
@media (hover: hover) {
.pickup-item__icon-wrap:hover .pickup-tooltip {
opacity: 1;
visibility: visible;
}
}
.pickup-item__price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
position: relative;
padding-top: 14px;
}
.pickup-item__price-row::after {
content: '';
position: absolute;
top: 0;
left: -30px;
right: -30px;
height: 1px;
/* left 30px = item padding (gray) | accent flash | main navy | gray */
/* 55.5% ≈ content left(30px) + 56.5% of content width, stable across flex widths */
background: linear-gradient(to right, var(--color-sub) 30px, var(--color-accent) 30px 52px, var(--color-main) 52px 55.5%, var(--color-sub) 55.5%);
}
.pickup-item__price-group {
display: flex;
align-items: baseline;
gap: 2px;
margin: 0;
}
.pickup-item__price-num {
font-family: var(--font-en);
font-size: 20px;
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
}
.pickup-item__price-yen {
font-family: var(--font-ja);
font-size: 13px;
font-weight: 700;
color: var(--color-text);
}
.pickup-item__price-tax {
font-family: var(--font-ja);
font-size: 12px;
font-weight: 700;
color: var(--color-text);
}
.pickup-item__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-en);
font-size: 14px;
font-weight: 500;
color: var(--color-main);
flex-shrink: 0;
}
.pickup-item__link-arrow {
width: 15px;
height: 15px !important;
display: block;
flex-shrink: 0;
transition: transform 0.2s ease;
}
@media (hover: hover) {
.pickup-item:hover .pickup-item__link {
text-decoration: underline;
}
.pickup-item:hover .pickup-item__link-arrow {
transform: translateX(3px);
}
}
.pickup-ctabtn-row {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
/* ===== GUIDE SLIDER ===== */
#guide {
padding: 100px 0 40px;
background: var(--color-bg-yellow);
overflow: hidden;
}
.guide-header {
display: flex;
align-items: flex-start;
gap: 0;
padding: 0 var(--container-pad);
max-width: 1598px;
margin: 0 auto 30px;
justify-content: space-between;
}
.guide-title-col {
flex-shrink: 0;
width: auto;
}
.guide-lead-col {
width: fit-content;
}
.guide-lead-heading {
font-size: 20px;
color: var(--color-text);
margin-bottom: 8px;
}
.guide-lead-body {
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
}
.guide-slider-wrap {
position: relative;
padding-top: 40px;
}
.guide-slide {
position: relative;
overflow: hidden;
outline: none;
}
/* slick.css の .slick-slide { height: 100% } より詳細度を上げて上書き */
#guide .guide-slide {
height: 500px;
}
.guide-slide__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
@media (hover: hover) {
.guide-slide:hover .guide-slide__img {
transform: scale(1.06);
}
}
.guide-slide__header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 62px;
background: rgba(39, 50, 64, 0.7);
display: flex;
align-items: center;
padding: 0 24px;
}
.guide-slide__category {
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
color: var(--color-white);
}
.guide-slide__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(39, 50, 64, 0.7);
display: flex;
flex-direction: column;
padding: 16px 24px;
}
.guide-slide__overlay>div {
overflow: hidden;
max-height: 0;
transition: max-height 0.45s ease;
}
@media (hover: hover) {
.guide-slide:hover .guide-slide__overlay>div {
max-height: 250px;
}
}
.guide-slide__heading {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
color: var(--color-white);
line-height: 1.5;
margin-bottom: 10px;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
@media (hover: hover) {
.guide-slide:hover .guide-slide__heading {
opacity: 1;
transform: translateY(0);
}
}
.guide-slide__body {
font-size: 14px;
line-height: 1.7;
color: var(--color-white);
margin-bottom: 14px;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.4s ease 0.07s, transform 0.4s ease 0.07s;
}
@media (hover: hover) {
.guide-slide:hover .guide-slide__body {
opacity: 1;
transform: translateY(0);
}
}
.guide-slide__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(255, 255, 255, 0.60);
border: 1px solid var(--color-white);
border-radius: 5px;
color: var(--color-main);
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
padding: 0.9375rem 1.875rem;
text-decoration: none;
white-space: nowrap;
align-self: flex-end;
transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.guide-slide__btn .btn-arrow {
transition: transform 0.3s;
}
@media (hover: hover) {
.guide-slide__btn:hover {
background: var(--color-main);
border-color: transparent;
color: #fff;
}
.guide-slide__btn:hover .btn-arrow {
content: url('mp-img-cmn-icon_arrow_btn.svg');
transform: translateX(12px);
}
}
.guide-pager {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 20px;
height: 50px;
z-index: 10;
}
.guide-pager__prev,
.guide-pager__next {
width: 40px;
height: 40px;
background: var(--color-accent);
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.guide-pager__prev svg,
.guide-pager__next svg {
width: 12px;
height: 12px;
fill: var(--color-main);
}
.guide-pager__prev svg {
/* transform: rotate(180deg); */
}
.guide-pager__count {
font-family: var(--font-en);
font-size: 16px;
color: var(--color-text);
white-space: nowrap;
min-width: 60px;
text-align: center;
}
/* ===== PURCHASE INFO ===== */
/* ===== PURCHASE INFO ===== */
/* ===== PURCHASE SECTION ===== */
.purchase-panels {
display: grid;
grid-template-columns: 1fr 1fr;
}
.purchase-panel {
padding: 30px var(--container-pad);
}
.purchase-panel--info {
background: var(--color-accent);
}
.purchase-panel--after {
background: var(--color-main);
}
.purchase-layout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.purchase-text {
flex: 1;
}
.purchase-heading {
font-size: 24px;
color: var(--color-main);
margin-bottom: 10px;
}
.purchase-body {
font-size: 14px;
line-height: 1.7;
color: var(--color-main);
}
.purchase-cta {
flex-shrink: 0;
width: 180px;
height: 180px;
border-radius: 50%;
background: var(--color-main);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
gap: 6px;
padding: 20px;
transition: transform 0.25s ease, filter 0.25s ease;
}
@media (hover: hover) {
.purchase-cta:hover {
transform: scale(1.06);
filter: brightness(1.18);
}
}
.purchase-cta__label {
font-family: var(--font-ja);
font-size: 18px;
font-weight: 700;
color: var(--color-white);
line-height: 1.5;
}
.purchase-cta__more {
font-family: var(--font-ja);
font-size: 18px;
font-weight: 700;
color: var(--color-white);
text-decoration: underline;
}
.purchase-panel--after .purchase-heading {
color: var(--color-white);
}
.purchase-panel--after .purchase-body {
color: var(--color-white);
}
.purchase-panel--after .purchase-cta {
background: var(--color-accent);
}
.purchase-panel--after .purchase-cta__label {
color: var(--color-main);
}
.purchase-panel--after .purchase-cta__more {
color: var(--color-main);
}
/* ===== FAQ ===== */
#faq {
padding: 28px 0 50px;
background: var(--color-white);
}
.faq-inner {
display: flex;
align-items: flex-end;
gap: 60px;
}
.faq-left {
width: 444px;
flex-shrink: 0;
}
.faq-left__heading {
font-size: 24px;
color: var(--color-text);
margin-bottom: 16px;
}
.faq-left__body {
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 24px;
}
.faq-grid {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.faq-item {
border-top: 1px solid;
border-image: linear-gradient(to right, var(--color-accent) 25%, var(--color-main) 25%) 1;
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
}
.faq-item:nth-child(odd) .faq-item__header {
padding-right: 20px;
}
.faq-item:nth-child(even) .faq-item__header {
padding-left: 20px;
}
.faq-item__header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px 16px 16px 0;
transition: background 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.faq-item:hover .faq-item__header {
background: rgba(39, 50, 64, 0.04);
transform: translateX(6px);
}
}
.faq-item__answer {
display: none;
padding: 0 16px 16px 0;
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
}
.faq-item:nth-child(odd) .faq-item__answer {
padding-right: 20px;
}
.faq-item:nth-child(even) .faq-item__answer {
padding-left: 20px;
}
.faq-item.is-open .faq-item__answer {
display: block;
}
.faq-item__num {
font-family: var(--font-en);
font-size: 18px;
font-weight: 500;
color: var(--color-main);
flex-shrink: 0;
line-height: 1.5;
}
.faq-item__q {
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
flex: 1;
}
.faq-item__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
position: relative;
color: var(--color-main);
margin-top: 2px;
border-radius: 50%;
overflow: hidden;
transition: background 0.25s ease, color 0.25s ease;
}
@media (hover: hover) {
/* .faq-item:hover .faq-item__icon { background: var(--color-main); color: var(--color-white); } */
}
.faq-item__icon::before,
.faq-item__icon::after {
content: '';
position: absolute;
background: currentColor;
transition: opacity 0.2s, transform 0.2s;
}
.faq-item__icon::before {
width: 20px;
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.faq-item__icon::after {
width: 2px;
height: 20px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.faq-item.is-open .faq-item__icon::after {
transform: translateX(-50%) rotate(90deg);
opacity: 0;
}
/* ===== BANNER SLIDER ===== */
#banner-slider {
padding-top: 60px;
/* height: 160px; */
overflow: hidden;
background: var(--color-bg-yellow);
}
#banner-slider .slick-slider {
margin-bottom: 0;
}
#banner-slider .slick-slide {
padding: 0 17.5px;
box-sizing: border-box;
height: 160px;
}
@media (min-width: 897px) {
#banner-slider .slick-slide {
width: 425px;
}
}
.banner-slider-clip {
overflow: hidden;
}
.banner-slide {
display: block;
height: 160px;
cursor: pointer;
outline: none;
text-decoration: none;
}
.banner-slide__inner {
position: relative;
height: 100%;
overflow: hidden;
display: grid;
grid-template-rows: 1fr auto;
}
.banner-slide__photo {
grid-area: 1 / 1 / 3 / 2;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) {
.banner-slide:hover .banner-slide__photo {
transform: scale(1.07);
}
}
.banner-slide__label {
grid-area: 2 / 1 / 3 / 2;
z-index: 1;
padding: 8px 14px 12px;
font-family: var(--font-ja);
font-size: 18px;
font-weight: 700;
color: var(--color-white);
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
line-height: 1.4;
transition: transform 0.35s ease;
}
@media (hover: hover) {
.banner-slide:hover .banner-slide__label {
transform: translateY(-5px);
}
}
.banner-slide__corner {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
display: block;
z-index: 2;
transition: transform 0.35s ease;
}
@media (hover: hover) {
.banner-slide:hover .banner-slide__corner {
transform: scale(1.25);
}
}
.banner-slide__border {
position: absolute;
inset: 5px;
border: 1px solid var(--color-white);
pointer-events: none;
z-index: 2;
transition: inset 0.35s ease, border-color 0.35s ease;
}
@media (hover: hover) {
.banner-slide:hover .banner-slide__border {
inset: 3px;
border-color: var(--color-white);
}
}
/* ===== POPULAR MODELS ===== */
#popular-models {
padding: 60px 0 0;
background: var(--color-bg-yellow);
}
#popular-models .container .popular-header {
border-top: 1px solid var(--color-sub);
padding-top: 60px;
}
.popular-header {
display: flex;
align-items: flex-start;
gap: 0;
margin-bottom: 30px;
}
.popular-title-col {
flex-shrink: 0;
width: 450px;
}
.popular-lead-col {
flex: 1;
}
.popular-lead-heading {
font-size: 20px;
color: var(--color-text);
margin-bottom: 8px;
}
.popular-lead-body {
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
}
.popular-grid {
display: flex;
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
}
.popular-item {
flex: 1;
border-right: 1px solid var(--color-sub);
padding: 30px 20px 40px;
width: 25%;
}
.popular-item:last-child {
border-right: none;
}
.popular-item__brand-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.popular-item__brand {
height: 28px;
width: auto;
max-width: 100px;
object-fit: contain;
object-position: left;
display: block;
}
.item__badgeWrap {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.popular-item__badge {
width: 40px;
height: 40px;
display: block;
flex-shrink: 0;
}
.popular-item__img-wrap {
width: 100%;
aspect-ratio: 340 / 236;
overflow: hidden;
margin-bottom: 16px;
clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
position: relative;
}
.popular-item__img-wrap img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease;
}
.popular-item__img-skew {
opacity: 0;
}
.popular-item__link-arrow{
transition: transform 0.2s ease;
}
@media (hover: hover) {
.popular-item:hover .popular-item__img-skew {
opacity: 1;
}
.popular-item:hover .popular-item__img-wrap img:not(.popular-item__img-skew) {
opacity: 0;
}
}
@media (hover: hover) {
.popular-item:hover .popular-item__link {
text-decoration: underline;
}
.popular-item:hover .popular-item__link-arrow {
transform: translateX(3px);
}
}
.popular-item__name-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
position: relative;
}
.popular-item__name-row::before {
content: '';
position: absolute;
bottom: -1px;
left: -20px;
right: -20px;
height: 1px;
background: var(--color-sub);
}
.popular-item__name-en {
font-family: var(--font-en);
font-size: clamp(18px, calc(8px + 1.1vw), 24px);
font-weight: 500;
color: var(--color-text);
line-height: 1.5;
position: relative;
margin: 0;
}
.popular-item__name-en::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 100%;
height: 1px;
background: linear-gradient(to right, var(--color-accent) 19px, var(--color-main) 19px);
z-index: 1;
}
.popular-item__name-jp {
font-family: var(--font-ja);
font-size: clamp(12px, calc(8.8px + 0.37vw), 14px);
font-weight: 600;
color: var(--color-text);
line-height: 1.5;
margin: 0;
}
.popular-item__body {
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 12px;
width: 100%;
}
.popular-item__price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.popular-item__price-group {
display: flex;
align-items: baseline;
gap: 2px;
margin: 0;
}
.popular-item__price-num {
font-family: var(--font-en);
font-size: 20px;
font-weight: 500;
color: var(--color-text);
}
.popular-item__price-yen {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 700;
color: var(--color-text);
}
.popular-item__price-tax {
font-family: var(--font-ja);
font-size: 12px;
font-weight: 700;
color: var(--color-text);
}
.popular-item__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-en);
font-size: 14px;
font-weight: 500;
color: var(--color-main);
flex-shrink: 0;
}
.popular-item__link-arrow {
width: 15px;
height: 15px;
display: block;
flex-shrink: 0;
}
/* ===== BRANDS ===== */
#brands {
padding: 60px 0 0;
background-color: var(--color-bg-yellow);
}
.brands-header {
display: flex;
align-items: flex-start;
gap: 0;
margin-bottom: 40px;
justify-content: space-between;
}
.brands-title-col {
width: fit-content;
}
.brands-lead-col {
width: fit-content;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.brands-lead-headings {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px 10px;
}
.brands-lead-heading {
font-size: 20px;
color: var(--color-text);
}
.brands-lead-heading2 {
font-size: 24px;
color: var(--color-text);
}
.brands-lead-body {
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
}
.brand-section {
position: relative;
min-height: 518px;
overflow: hidden;
display: flex;
align-items: center;
}
.brand-section+.brand-section {
margin-top: 5px;
}
.brand-section picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.brand-section img.brand-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.brand-section__img-caption {
display: none;
}
.brand-section__overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%);
}
.brand-section__content {
position: relative;
z-index: 2;
padding: 40px var(--container-pad) 40px;
max-width: 1598px;
width: 100%;
margin: 0 auto;
}
.brand-section__name-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 40px;
}
.brand-section__logo {
width: auto;
height: auto;
max-width: 258px;
max-height: 59.538px;
object-fit: contain;
object-position: left center;
display: block;
}
.brand-section__name-jp {
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
color: var(--color-white);
line-height: 1.7;
margin-bottom: 0;
}
.brand-section__divider {
width: 1px;
height: 131px;
background: var(--color-white);
margin: 0 30px;
flex-shrink: 0;
align-self: flex-end;
}
.brand-section__left {
max-width: 520px;
}
.brand-section__heading {
font-size: 24px;
color: var(--color-white);
margin-bottom: 12px;
}
.brand-section__body {
font-size: 16px;
line-height: 1.7;
color: var(--color-white);
width: 515px;
max-width: 100%;
}
.brand-section__right {
max-width: 400px;
}
.brand-section__features {
font-family: var(--font-ja);
font-size: 16px;
font-weight: 600;
color: var(--color-white);
line-height: 1.7;
}
.brand-section__flex {
display: flex;
align-items: flex-end;
margin-top: 16px;
}
.brand-section__btn-row {
margin-top: 24px;
}
/* ===== FEATURED MODELS ===== */
#featured-models {
position: relative;
background: var(--color-bg-yellow);
padding-bottom: 60px;
overflow: hidden;
}
.featured-grad-top {
position: absolute;
inset: 0 0 16.2% 0;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, var(--color-taupe) 95%);
pointer-events: none;
z-index: 0;
}
.featured-grad-bottom {
position: absolute;
inset: 83.68% 0 4.44% 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0) 40%, var(--color-taupe));
pointer-events: none;
z-index: 0;
}
.featured-title-area {
padding-top: 80px;
padding-bottom: 40px;
}
#featured-models .slick-list {
height: clamp(480px, 40vw, 686px);
overflow: visible;
clip-path: inset(0 -100vw -80px -100vw);
}
#featured-models .slick-track {
height: 100%;
z-index: 0;
}
.featured-slide {
position: relative;
height: 100%;
overflow: visible;
}
/* 注目モデル: ブロック幅 849px 固定（Figma準拠・PCのみ）。
レスポンシブ(<897px)では解除し、既存の縦積みレイアウトに従う。 */
@media (min-width: 897px) {
/* スライダー上限 1408px＋中央寄せ。centerPadding 16.4% でセル幅 945px とし、
中身(絶対配置の子)を左右50pxずつ内側に寄せることで
「モデル幅 845px + 隣接モデルと約100pxの余白」を両立させる。 */
#featured-models .js-featured-slider {
max-width: 1408px;
margin-left: auto;
margin-right: auto;
}
#featured-models .featured-slide {
width: 845px;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* 車種と車種の間隔を広げる: スライド中身は絶対配置(left:0/right:0)で padding を無視するため、
子要素自体を左右50pxずつ内側へ寄せ、隣接モデルと約100px離れて見せる */
#featured-models .featured-slide__left { left: 50px; }
#featured-models .featured-slide__name-block { right: 50px; }
#featured-models .featured-slide__img { right: 50px; }
}
.featured-slide__left {
position: absolute;
left: 0;
top: 0;
width: clamp(300px, 47%, 420px);
display: flex;
flex-direction: column;
padding-top: 10px;
z-index: 2;
}
.featured-slide__heading {
font-size: clamp(22px, 1.75vw, 30px);
color: var(--color-text);
}
.featured-slide__sub {
font-family: var(--font-ja);
font-size: clamp(16px, 1.2vw, 20px);
font-weight: 700;
line-height: 1.7;
color: var(--color-text);
margin-top: 15px;
}
.featured-slide__body {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 400;
line-height: 1.7;
color: var(--color-text);
margin-top: 0.75rem;
}
.featured-slide__price {
display: flex;
align-items: baseline;
gap: 2px;
margin-top: 0.75rem;
color: var(--color-text);
}
.featured-slide__price-num {
font-family: var(--font-en);
font-size: 20px;
font-weight: 500;
line-height: normal;
}
.featured-slide__price-yen {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 700;
line-height: normal;
}
.featured-slide__price-tax {
font-family: var(--font-ja);
font-size: 12px;
font-weight: 700;
line-height: normal;
}
.featured-slide__name-block {
position: absolute;
right: 0;
top: 0;
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 2;
}
.featured-slide__brand {
display: block;
height: 30px;
width: auto;
margin-bottom: 0px;
}
@media (max-width: 568px) {
.featured-slide__brand { height: 18px; margin-bottom: 6px; }
}
.featured-slide__name-en {
font-family: var(--font-en);
font-size: clamp(40px, 3.5vw, 60px);
font-weight: 700;
color: var(--color-main);
line-height: 1.2;
white-space: nowrap;
}
.featured-slide__name-jp {
font-family: var(--font-ja);
font-size: clamp(18px, 1.5vw, 24px);
font-weight: 600;
color: var(--color-text);
line-height: 1.5;
margin-bottom: 15px;
}
.featured-slide__name-en-row {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-end;
}
.featured-slide__badges {
display: flex;
gap: 8px;
}
.featured-slide__badge {
width: 50px;
height: 55px;
display: block;
object-fit: contain;
}
.featured-slide__img {
position: absolute;
left: 14%;
right: 0;
bottom: 0;
z-index: 1;
}
.featured-slide__img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
max-width: 730px;
max-height: 440px;
}
.featured-slide__img-underline {
display: none;
}
.featured-slide__btns {
position: absolute;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
white-space: nowrap;
z-index: 2;
}
/* PC(min-width:897px)のみ、テキスト/ボタンの opacity を JS(rAF)で
中央からの距離に応じて連続制御する。初期値は 0(非表示)。 */
@media (min-width: 897px) {
.featured-slide__name-block,
.featured-slide__left,
.featured-slide__sp-btns,
.featured-slide__btns {
opacity: 0;
pointer-events: none;
will-change: opacity;
}
}
/* SP(max-width:896px)/モーション抑制時: フェードなし。中央スライドのみ即表示。 */
@media (prefers-reduced-motion: reduce),
(max-width: 896px) {
.slick-current .featured-slide__name-block,
.slick-current .featured-slide__left,
.slick-current .featured-slide__sp-btns,
.slick-current .featured-slide__btns {
opacity: 1;
pointer-events: auto;
}
}
.featured-icon-note {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: center;
gap: 24px;
padding: 40px var(--container-pad) 0;
max-width: 1598px;
margin: 0 auto;
}
#featured-models .featured-icon-note {
transform: translateY(40px);
}
.featured-icon-note__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-ja);
font-size: 12px;
font-weight: 600;
color: var(--color-main);
text-decoration: underline;
text-underline-position: from-font;
white-space: nowrap;
cursor: pointer;
transition: opacity 0.2s ease;
}
@media (hover: hover) {
.featured-icon-note__link:hover {
opacity: 0.6;
}
}
.featured-icon-note__icon {
width: 20px;
height: 20px;
display: block;
flex-shrink: 0;
}
.featured-icon-note__text {
font-family: var(--font-ja);
font-size: 12px;
font-weight: 600;
color: var(--color-main);
white-space: nowrap;
}
/* ===== MOBIPARK WORLD ===== */
#mobipark-world {
padding: 60px 0 0;
position: relative;
background: var(--color-bg-yellow);
}
.world-hero {
position: relative;
min-height: 491px;
overflow: hidden;
margin-bottom: 0;
border-bottom: 5px solid var(--color-white);
}
.world-hero picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.world-hero img.world-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.world-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.world-hero__content {
position: relative;
z-index: 1;
padding: 60px var(--container-pad);
max-width: 1598px;
margin: 0 auto;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.world-hero__title {
font-size: 36px;
color: var(--color-white);
margin-bottom: 20px;
}
.world-hero__body {
font-size: 16px;
line-height: 1.7;
color: var(--color-white);
margin-bottom: 20px;
max-width: 640px;
}
.world-hero__body strong {
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.world-hero__stats {
display: grid;
grid-template-columns: repeat(2, max-content);
gap: 1.25rem;
margin-bottom: 1.25rem;
}
.world-hero__stat {
display: flex;
align-items: stretch;
}
.world-hero__stat-num-box {
display: flex;
align-items: stretch;
gap: 0;
flex: 1;
}
.world-hero__stat-num-wrap {
width: 76px;
height: 76px;
border: 1px solid var(--color-white);
border-radius: 3px 0 0 3px;
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
position: relative;
}
.world-hero__stat-num-wrap::before {
position: absolute;
content: "";
bottom: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 10px solid #ffffff;
border-left: 10px solid transparent;
}
.world-hero__stat-num {
font-family: var(--font-en);
font-size: 36px;
line-height: 1;
color: var(--color-accent);
}
.world-hero__stat-unit {
font-family: var(--font-en);
font-size: 14px;
line-height: 1;
color: var(--color-accent);
}
.world-hero__stat-label-wrap {
height: 76px;
border: 1px solid var(--color-white);
border-left: none;
border-radius: 0 3px 3px 0;
background: #000;
display: flex;
align-items: center;
padding: 0 1rem;
flex: 1;
}
.world-hero__stat-label {
font-family: var(--font-ja);
font-size: 16px;
font-weight: 600;
color: var(--color-white);
white-space: nowrap;
}
.world-hero__thought-label {
font-family: var(--font-en);
font-size: 20px;
color: var(--color-accent);
width: fit-content;
position: relative;
z-index: 0;
margin-bottom: 4px;
}
.world-hero__thought-label::before {
z-index: -1;
content: '';
position: absolute;
bottom: 3px;
width: 100%;
height: 8px;
background: var(--color-main);
}
.world-hero__thought-heading {
font-size: 30px;
color: var(--color-white);
margin-bottom: 12px;
font-weight: 500;
}
/* World feature tiles */
.world-tiles {
display: flex;
border-bottom: 5px solid var(--color-white);
}
.world-tile {
flex: 1;
position: relative;
overflow: hidden;
border-right: 5px solid rgba(255, 255, 255, 0.2);
aspect-ratio: 428/286;
}
.world-tile:last-child {
border-right: none;
}
.world-tile img.tile-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
}
.world-tile__overlay {
position: absolute;
inset: 0;
background: #000;
}
.world-tile__content {
position: relative;
z-index: 1;
padding: 40px 40px 20px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.world-tile__heading {
font-family: var(--font-serif);
font-size: 20px;
font-weight: 600;
color: var(--color-white);
line-height: 1.7;
letter-spacing: 0.5px;
margin-bottom: 0;
}
.world-tile__body {
font-size: 14px;
line-height: 1.7;
color: var(--color-white);
}
/* World thoughts section */
.world-thoughts {
display: flex;
align-items: stretch;
overflow: hidden;
}
.world-thoughts__left {
flex: 1;
min-height: 760px;
position: relative;
overflow: hidden;
}
.world-thoughts__bg-wrap {
position: absolute;
inset: 0;
}
.world-thoughts__bg-wrap .thoughts-bg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.world-thoughts__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
}
.world-thoughts__content {
position: relative;
z-index: 1;
padding: 4.375rem var(--container-pad);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 5px solid var(--color-white);
}
.world-thoughts__content-top {}
.world-thoughts__content-bottom {}
.world-thoughts__title {
font-size: 36px;
color: var(--color-white);
margin-bottom: 0;
}
.world-thoughts__body {
font-size: 16px;
line-height: 1.7;
color: var(--color-white);
max-width: 640px;
margin-bottom: 1.5rem;
}
/* World right sub panels */
.world-sub-panels {
width: 538px;
flex-shrink: 0;
display: flex;
flex-direction: column;
}
.world-sub-panel {
flex: 1;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.world-sub-panel:not(:last-child) {
border-bottom: 5px solid var(--color-white);
}
.world-sub-panel__bg-wrap {
position: absolute;
inset: 0;
}
.world-sub-panel__bg-wrap img.panel-bg {
width: 100%;
height: 100%;
object-fit: cover;
}
.world-sub-panel__overlay {
position: absolute;
inset: 0;
background: #000;
}
.world-sub-panel__content {
position: relative;
z-index: 1;
padding: 1.5rem 1.875rem 1.5rem 7.875rem;
}
.world-sub-panel__heading {
font-size: 18px;
color: var(--color-white);
margin-bottom: 0.5rem;
}
.world-sub-panel__body {
font-size: 14px;
line-height: 1.7;
color: var(--color-white);
}
/* ===== PARTNERS ===== */
#partners {
padding-top: 100px;
background: var(--color-bg-yellow);
}
/* 試乗パネル */
.partners-trial {
position: relative;
min-height: 613px;
overflow: hidden;
border-bottom: 4px solid #fff;
}
.partners-trial__bg-wrap {
position: absolute;
inset: 0;
}
.partners-trial__bg-wrap picture {
display: block;
width: 100%;
height: 100%;
}
.partners-trial__bg-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.partners-trial__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--color-black) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}
.partners-trial__inner {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
gap: 2.5rem;
padding: 3.75rem var(--container-pad);
max-width: 1598px;
margin: 0 auto;
}
.partners-trial__left {
flex: 1 1 50%;
max-width: 50%;
}
.partners-section-label {
font-size: 36px;
color: var(--color-white);
/* margin-bottom: 1rem; */
}
.partners-badge {
margin-bottom: 1.25rem;
}
.partners-badge__en {
font-family: var(--font-en);
font-size: 20px;
color: var(--color-accent);
line-height: 1.5;
margin-bottom: 4px;
position: relative;
z-index: 0;
width: fit-content;
}
.partners-badge__en::before {
z-index: -1;
content: "";
position: absolute;
bottom: 3px;
width: 100%;
height: 8px;
background: var(--color-main);
}
.partners-badge__bar--wide {
width: 190px;
}
.partners-trial__lead {
font-size: 24px;
color: var(--color-white);
margin-bottom: 1rem;
}
.partners-trial__body {
font-size: 16px;
line-height: 1.7;
color: var(--color-white);
margin-bottom: 1.5rem;
}
.partners-trial__btns {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.btn-ghost-light {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.6);
border: 1px solid var(--color-white);
border-radius: 5px;
padding: 15px 30px;
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
color: var(--color-main);
text-decoration: none;
white-space: nowrap;
}
.btn-ghost-light.btn-main::after {
background-image: url('mp-img-cmn-icon_arrow_btn_dk.svg');
}
.btn-solid {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-main);
border: 1px solid var(--color-main);
border-radius: 5px;
padding: 15px 30px;
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
color: var(--color-white);
text-decoration: none;
white-space: nowrap;
width: fit-content;
transition: background 0.3s, border-color 0.3s, color 0.3s;
}
@media (hover: hover) {
.btn-solid:hover {
background: #fff;
border-color: #000;
color: var(--color-main);
}
}
.btn-solid .btn-arrow {
width: 13px;
height: 10px;
flex-shrink: 0;
transition: transform 0.3s;
}
@media (hover: hover) {
.btn-solid:hover .btn-arrow {
content: url('mp-img-cmn-icon_arrow_btn_dk.svg');
transform: translateX(12px);
}
}
/* Step cards */
.partners-steps {
flex: 1 1 50%;
max-width: 50%;
}
.step-item {
background: rgba(255, 255, 255, 0.8);
border: 1px solid var(--color-main);
border-radius: 5px;
padding: 1rem 1.25rem 1rem 3.75rem;
position: relative;
margin-bottom: 20px;
}
.step-item__num {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
background: var(--color-main);
border-radius: 3px 0 3px 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-en);
font-size: 20px;
color: var(--color-white);
}
.step-item__heading {
font-family: var(--font-ja);
font-size: 18px;
font-weight: 600;
color: var(--color-main);
line-height: 1.5;
margin-bottom: 6px;
}
.step-item__body {
font-size: 16px;
line-height: 1.7;
color: var(--color-main);
}
.step-connector {
width: 1px;
/* margin: 0 0 4px 19px; */
display: flex;
flex-direction: column;
position: absolute;
top: 0px;
left: 20px;
height: calc(100% + 20px);
}
.step-connector-navy {
flex: 1;
background: var(--color-main);
min-height: 40px;
}
.step-connector-yellow {
height: 20px;
background: var(--color-accent);
}
/* 店舗パネル */
.partners-shop {
position: relative;
min-height: 613px;
overflow: hidden;
}
.partners-shop__bg-wrap {
position: absolute;
inset: 0;
}
.partners-shop__bg-wrap picture {
display: block;
width: 100%;
height: 100%;
}
.partners-shop__bg-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.partners-shop__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to left, var(--color-black) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 100%);
}
.partners-shop__inner {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
justify-content: flex-end;
padding: 3.75rem var(--container-pad);
max-width: 1598px;
margin: 0 auto;
}
.partners-shop__content {
flex: 0 0 711px;
max-width: 711px;
position: relative;
z-index: 1;
}
.partners-shop__lead {
font-size: 24px;
color: var(--color-white);
margin-bottom: 1rem;
}
.partners-shop__body {
font-size: 16px;
line-height: 1.7;
color: var(--color-white);
margin-bottom: 1.5rem;
}
.partners-shop__map-wrap {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 585px;
display: flex;
align-items: center;
z-index: 0;
opacity: 0.6;
}
.partners-shop__map-wrap img {
width: 100%;
height: auto;
}
/* ===== NEWS & COLUMN ===== */
#news-column {
padding: 60px 0 80px;
background: var(--color-bg-yellow);
}
.news-column-inner {
display: flex;
gap: 60px;
align-items: flex-start;
}
.news-col {
flex: 1;
}
.news-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 30px;
}
.news-card {
display: block;
text-decoration: none;
}
.news-card__img-wrap {
position: relative;
width: 100%;
margin-bottom: 8px;
overflow: hidden;
}
.news-card__img {
width: 100%;
height: 185px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
@media (hover: hover) {
.news-card:hover .news-card__img {
transform: scale(1.06);
}
}
.news-card__meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.news-card__date {
font-family: var(--font-en);
font-size: 14px;
font-weight: 500;
color: var(--color-text);
}
.news-card__cat {
position: absolute;
top: 0;
right: 0;
display: inline-flex;
align-items: center;
background: var(--color-main);
color: var(--color-white);
font-family: var(--font-ja);
font-size: 14px;
font-weight: 700;
padding: 8px 10px;
}
.news-card__cat.accent {
background: var(--color-accent);
color: var(--color-main);
}
.news-card__title {
font-size: 15px;
line-height: 1.7;
color: var(--color-text);
}
.news-col__btn-row {
display: flex;
justify-content: flex-end;
}
.column-col {
flex: 1;
}
.column-heading {
font-size: 24px;
color: var(--color-text);
margin-bottom: 12px;
}
.column-lead {
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 24px;
}
.column-links {
margin-bottom: 24px;
position: relative;
}
.column-links::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, var(--color-accent) 20%, var(--color-main) 20%);
}
.column-link-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
font-size: 16px;
color: var(--color-text);
text-decoration: none;
position: relative;
line-height: 1.5;
transition: background 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.column-link-item:hover {
background: rgba(39, 50, 64, 0.04);
transform: translateX(6px);
}
}
.column-link-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, var(--color-accent) 20%, var(--color-main) 20%);
}
.column-link-item::after {
content: '';
display: block;
flex-shrink: 0;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
transition: border-color 0.25s ease;
}
@media (hover: hover) {
.column-link-item:hover::after {
border-color: var(--color-main);
}
}
.column-col__btn-row {
display: flex;
justify-content: flex-end;
}
/* ===== SNS ===== */
#sns {
background: var(--color-white);
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
#sns .column-links {
margin-bottom: 0;
}
#sns .column-link-item {
position: relative;
}
/* legacy flat list の column-link-item>span ルールは EP card では適用しない */
#sns .column-link-item:not(.sns-ep-card)>span {
display: flex;
}
#sns .column-link-item:not(.sns-ep-card) .column-link-item_ttl {
font-family: var(--font-en);
font-weight: 500;
font-size: 18px;
color: var(--color-main);
position: relative;
margin-right: 40px;
}
#sns .column-link-item:not(.sns-ep-card) .column-link-item_ttl::before {
content: "";
width: 1px;
height: 100%;
background-color: var(--color-main);
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -20px;
}
.sns-inner {
display: flex;
gap: 3.75rem;
align-items: flex-start;
}
.sns-col {
flex: 1 1 50%;
max-width: 50%;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 60px 0;
}
/* YouTube 側のみ gap 0 (hero と ep-grid を密着させる) */
.sns-col:has(.sns-yt-hero) {
gap: 0;
}
.sns-col__head {
display: flex;
gap: 0.25rem;
align-items: baseline;
}
.sns-heading {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 400;
color: var(--color-black);
letter-spacing: 0.05em;
line-height: 1.5;
}
.sns-badge-row {
display: flex;
align-items: center;
height: 100%;
}
.sns-badge-row__en {
font-family: var(--font-en);
font-size: 20px;
color: var(--color-main);
letter-spacing: 0.05em;
line-height: 1;
position: relative;
z-index: 0;
/* margin-bottom: 4px; */
}
.sns-badge-row__en::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 8px;
background: var(--color-accent);
z-index: -1;
}
.sns-img-wrap {
width: 100%;
}
.sns-img-wrap img {
width: 100%;
height: auto;
display: block;
}
/* YouTube ヒーロー (Figma node 1178-12384): screenshot + 黒オーバーレイ + ボタン + MBP マーク
旧 .sns-video-wrap (iframe) は廃止。下に余白なし (margin-bottom: 0) */
.sns-yt-hero {
position: relative;
width: 100%;
aspect-ratio: 711 / 310;
background: var(--color-black);
overflow: hidden;
margin-bottom: 0;
}
.sns-yt-hero__bg,
.sns-yt-hero__bg img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.sns-yt-hero__bg img {
object-fit: cover;
}
.sns-yt-hero__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.sns-yt-hero__mark {
position: static;
width: 90px;
height: auto;
pointer-events: none;
}
.sns-yt-hero__cta {
position: static;
transform: none;
}
/* 0625: .sns-yt-hero__actions flex layout (mark + btn) */
.sns-yt-hero__actions {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 40px;
box-sizing: border-box;
pointer-events: none;
z-index: 2;
}
.sns-yt-hero__actions > * { pointer-events: auto; }
/* hero 内側 .sns-col__head (Figma node 1178-12384: sns-yt-hero > sns-col__head)
暗い hero 上に表示するため白系 + overlay の上 (z-index:2) */
.sns-col__head--on-hero {
position: absolute;
top: 20px;
left: 40px;
z-index: 2;
pointer-events: none;
}
.sns-col__head--on-hero .sns-heading {
color: var(--color-white);
}
.sns-col__head--on-hero .sns-badge-row__en {
color: var(--color-white);
}
.sns-col__head--on-hero .sns-badge-row__en::before {
/* hero 上ではアクセント下線は控えめに */
opacity: 0.85;
}
.btn-outline-white {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
border: 1px solid var(--color-white);
border-radius: 5px;
background: transparent;
color: var(--color-white);
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
line-height: 1.5;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease;
}
.btn-outline-white .btn-arrow {
width: 13px;
height: 10px;
display: block;
}
@media (hover: hover) {
.btn-outline-white:hover {
background: rgba(255, 255, 255, 0.12);
}
}
/* 発表会動画サムネ（クリックでモーダル再生） */
.sns-video-thumb {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: 0;
margin: 0;
cursor: pointer;
background: var(--color-black);
overflow: hidden;
}
.sns-video-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sns-video-thumb__play {
position: absolute;
top: 50%;
left: 50%;
width: 68px;
height: 48px;
transform: translate(-50%, -50%);
background: rgba(39, 50, 64, 0.82);
border-radius: 12px;
transition: background 0.25s ease;
}
.sns-video-thumb__play::before {
content: '';
position: absolute;
top: 50%;
left: 53%;
transform: translate(-50%, -50%);
border-style: solid;
border-width: 10px 0 10px 17px;
border-color: transparent transparent transparent #fff;
}
@media (hover: hover) {
.sns-video-thumb:hover .sns-video-thumb__play {
background: var(--color-main);
}
}
/* EPリスト: Figma node 1178-12384 ベースの 4x4 カードグリッド (最大16枠) */
.sns-doc-list {
max-height: none;
overflow-y: visible;
}
.sns-ep-grid {
display: grid;
/* auto-fit + minmax で .sns-col の実幅 (50%) に応じて列数が自動調整され、
.sns-ep-card__header (#NN + カテゴリ名) が折り返さない最低幅 160px を保証 */
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 1px;
background: var(--color-main);
border: 1px solid var(--color-main);
margin-top: 0;
margin-bottom: 0;
}
/* EP カード (column-link-item の見た目を上書き) */
.sns-ep-card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--color-main);
color: var(--color-white);
text-decoration: none;
padding: 0;
font-size: 14px;
line-height: 1.5;
transition: background 0.25s ease;
position: relative;
min-height: 115px;
}
/* column-link-item の既定の ::before / ::after を SNS では非表示にする */
.sns-ep-card::before,
.sns-ep-card::after {
display: none;
content: none;
}
.sns-ep-card__header {
display: flex;
align-items: center;
gap: 6px;
padding: 6.5px 10px;
position: relative;
}
.sns-ep-card__header::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: 0;
height: 1px;
background: var(--color-white);
opacity: 0.6;
}
/* #NN (黄色) */
.sns-ep-card__num {
font-family: var(--font-en);
font-weight: 500;
font-size: 14px;
color: var(--color-accent);
margin-right: 0;
white-space: nowrap;
}
.sns-ep-card__num::before {
display: none;
content: none;
}
/* 縦線 (アクセントカラー) */
.sns-ep-card__divider {
display: block;
width: 1px;
height: 16px;
background: var(--color-accent);
flex: 0 0 auto;
}
.sns-ep-card__category {
font-family: var(--font-ja);
font-weight: 500;
font-size: 12px;
color: var(--color-white);
line-height: 1.5;
}
.sns-ep-card__body {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: space-between;
padding: 8px 10px 10px;
min-height: 84px;
flex: 1 1 auto;
text-align: center;
}
.sns-ep-card__title {
font-family: var(--font-ja);
font-weight: 500;
font-size: 14px;
color: var(--color-white);
text-align: center;
word-break: break-word;
}
.sns-ep-card__more {
font-family: var(--font-en);
font-weight: 500;
font-size: 14px;
color: var(--color-accent);
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.5;
}
.sns-ep-card__arrow {
display: inline-block;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
@media (hover: hover) {
.sns-ep-card:hover {
background: #1d2630;
transform: none;
}
}
/* Coming Soon カード: URL 未設定 + タイトルあり の枠 */
.sns-ep-card--soon {
cursor: default;
}
.sns-ep-card--soon .sns-ep-card__title--multiline {
white-space: pre-line;
line-height: 1.5;
}
.sns-ep-card__more--soon {
color: #516e92;
cursor: default;
}
@media (hover: hover) {
.sns-ep-card--soon:hover {
background: var(--color-main);
}
}
/* 動画モーダル（16:9） */
.video-modal__wrap {
width: min(92vw, 960px);
max-width: 960px;
}
.video-modal__frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--color-black);
}
.video-modal__frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* ===== COMMON CONTENT ===== */
#common-content {
position: relative;
min-height: 553px;
overflow: hidden;
}
#common-content img.common-content-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.common-content-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.8) 100%);
}
.common-content-inner {
position: relative;
z-index: 1;
padding: 80px var(--container-pad) 80px 38%;
max-width: 1598px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.common-content__heading {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 600;
color: var(--color-white);
line-height: 1.7;
/* letter-spacing: 0.75px; */
margin-bottom: 20px;
}
.common-content__strong {
font-family: var(--font-ja);
font-size: 20px;
font-weight: 700;
color: var(--color-white);
line-height: 1.5;
margin-bottom: 30px;
}
.common-content__body {
font-size: 14px;
line-height: 1.7;
color: var(--color-white);
margin-bottom: 31px;
}
.common-content__cta-row {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.common-content__tel-block {
display: flex;
flex-direction: column;
gap: 4px;
}
.common-content__tel-label {
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
color: var(--color-white);
margin-bottom: 10px;
}
.common-content__tel-num-row {
display: flex;
align-items: center;
gap: 8px;
}
.common-content__tel-icon {
width: auto;
height: 30px;
display: block;
flex-shrink: 0;
}
.common-content__tel-num {
font-family: var(--font-oswald);
font-size: 30px;
font-weight: 400;
color: var(--color-white);
}
.common-content__note {
font-size: 14px;
color: var(--color-white);
line-height: 1.7;
}
.common-content__btns {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.common-content-img-left-wrap {
position: absolute;
left: 0;
bottom: 0;
top: auto;
width: 592px;
height: 519px;
overflow: hidden;
z-index: 1;
}
.common-content-img-left {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.common-content-img-right-wrap {
position: absolute;
right: 0;
top: 50px;
width: min(359px, 20.8%);
aspect-ratio: 359 / 231;
height: auto;
overflow: hidden;
z-index: 1;
}
.common-content-img-right {
position: absolute;
left: -11.22%;
top: -6.59%;
width: 111.24%;
height: 115.38%;
max-width: none;
object-fit: cover;
}
/* ===== FOOTER ===== */
#footer {
background: var(--color-white);
padding: 60px var(--container-pad) 40px;
border-top: 1px solid var(--color-sub);
overflow: hidden;
}
/* フッター内コンテンツ(およびサブリンクの上下ライン)をページの container 幅に揃える。
従来は #footer の padding のみで全幅だったため、広い画面(>1718px)で
コンテンツ・ラインが本文より外側にずれていた。1478px = container(1598) - padding(120)。 */
.footer-top,
.footer-sub-links,
.footer-bottom {
max-width: 1478px;
margin-left: auto;
margin-right: auto;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-bottom: 40px;
}
.footer-logo-col {
flex-shrink: 0;
width: fit-content;
}
.footer-logo {
display: block;
margin-bottom: 30px;
}
.footer-logo__img {
width: 160px;
}
.footer-logo__img img {
width: 100%;
}
.footer-tagline {
font-size: 12px;
color: var(--color-text);
margin-bottom: 14px;
line-height: 1.5;
}
.footer-tel-block {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 25px;
flex-wrap: wrap;
}
.footer-tel-label {
font-size: 14px;
font-weight: 700;
color: var(--color-black);
}
.footer-tel-icon-wrap {
display: flex;
align-items: center;
}
.footer-tel-icon {
height: 20px;
width: auto;
}
.footer-tel-num {
font-family: var(--font-oswald);
font-size: 24px;
color: var(--color-black);
}
.footer-sns {
display: flex;
gap: 20px;
}
.footer-sns a {
display: block;
}
.footer-sns__icon {
width: 30px;
height: 30px;
}
.footer-sns__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.footer-nav-wrap {
width: 100%;
max-width: fit-content;
display: flex;
flex-direction: column;
gap: 36px;
flex: 1;
min-width: 0;
}
.footer-nav-row {
display: flex;
gap: 50px;
align-items: flex-start;
}
.footer-nav-col__wrap{gap: 50px;}
.footer-nav-row > .footer-nav-col:first-child{width: 310px;}
.footer-nav-row > .footer-nav-col:nth-child(2){width: 170px;}
/* デスクトップ(>1100px)かつ subgrid 対応時のみ、2行のカラム左端を縦に揃える。
（商品一覧列が2列分の幅を持つため、flex のままだと下段の列とずれる）
非対応ブラウザ/≤1100px では上の flex を維持し、列折り返しも従来どおり動作。 */
@supports (grid-template-columns: subgrid) {
@media (min-width: 1101px) {
.footer-nav-wrap {
display: grid;
grid-template-columns: auto auto auto;
gap: 36px 50px;
/* base の max-width:fit-content が grid の auto 列を min-content に潰し
NEWS/EVENT 列のレイアウトを崩すため解除（flex:1 で利用可能幅まで伸ばす） */
max-width: none;
width: 100%;
}
.footer-nav-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
align-items: start;
}
}
}
.footer-nav-col {
flex-shrink: 0;
}
.footer-nav-col--products {
flex-shrink: 0;
}
.footer-products-inner {
display: flex;
gap: 40px;
}
.footer-brand-item::before {
content: '';
display: inline-block;
width: 12px;
height: 1px;
background: currentColor;
margin-right: 10px;
vertical-align: middle;
margin-bottom: 2px;
}
.footer-nav-col--member {}
.footer-nav-col__heading {
font-size: 16px;
font-weight: 700;
color: var(--color-main);
margin-bottom: 10px;
white-space: nowrap;
}
.footer-nav-col__heading--mt {
margin-top: 40px;
}
.footer-nav-col ul li {
margin-bottom: 6px;
}
.footer-nav-col ul li a,
.footer-products-brands li a {
font-size: 14px;
color: var(--color-text);
line-height: 1.5;
white-space: nowrap;
transition: color 0.22s ease, opacity 0.22s ease;
}
@media (hover: hover) {
.footer-nav-col ul li a:hover,
.footer-products-brands li a:hover {
color: var(--color-main);
opacity: 0.65;
}
}
.footer-link--external::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-left: 4px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10 7v3H2V2h3V1H1v10h10V7h-1zM7 1v1h2.29L4.15 7.15l.7.7L10 2.7V5h1V1H7z' fill='%23222'/%3E%3C/svg%3E") no-repeat center;
vertical-align: middle;
}
.footer-sub-links {
border-top: 1px solid var(--color-main);
border-bottom: 1px solid var(--color-main);
padding: 30px 0;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-sub-links__row {
gap: 20px 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.footer-sub-links a {
font-size: 16px;
font-weight: 700;
color: var(--color-main);
line-height: 1.5;
white-space: nowrap;
transition: color 0.22s ease;
}
@media (hover: hover) {
.footer-sub-links a:hover {
color: var(--color-);
}
}
.footer-sub-links__row a:last-child {
border-right: none;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-policy-links {
display: flex;
gap: 16px 40px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
}
.footer-policy-links a {
font-size: 14px;
color: var(--color-text);
}
.footer-copy {
font-family: var(--font-oswald);
font-size: 14px;
color: var(--color-text);
}
@media (max-width: 1350px) {
.footer-nav-row {
gap: 30px;
}
.footer-nav-col__wrap{gap: 30px;}
}
@media (max-width: 1230px) {
.footer-nav-row {
gap: 15px;
}
}
@media (max-width: 1200px) {
.footer-top{flex-direction: column;}
.footer-nav-row > .footer-nav-col:first-child,
.footer-nav-row > .footer-nav-col:nth-child(2){width: fit-content;}
}
@media (max-width: 1100px) {
.footer-nav-col__heading{font-size: 14px;}
.footer-nav-col ul li a, .footer-products-brands li a{font-size: 12px;}
.footer-nav-col ul li{margin-bottom: 0;}
.footer-nav-col__heading{margin-bottom: 3px;}
.footer-nav-row > .footer-nav-col:first-child{width: 265px;}
.footer-nav-row > .footer-nav-col:nth-child(2){width: 170px;}
.footer-nav-col__heading{margin-bottom: 0;}
}
/* ---- デスクトップ時: SP専用要素を非表示 ---- */
.header-sp-ebike {
display: none;
}
.hbg-sp-sublinks,
.hbg-sp-3col,
.hbg-sp-bns,
.hbg-sp-rule {
display: none;
}
/* =========================================================
購入後サポート モーダル
========================================================= */
.purchase-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
display: flex !important;
align-items: flex-start;
justify-content: center;
padding: 144px 20px 40px;
overflow-y: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.4s ease, visibility 0.4s;
}
.purchase-modal-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.purchase-modal-wrap {
position: relative;
width: 1024px;
max-width: 100%;
flex-shrink: 0;
opacity: 0;
transform: translateY(32px) scale(0.97);
transition: opacity 0.45s cubic-bezier(0.33, 1, 0.68, 1), transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}
.purchase-modal-overlay.is-open .purchase-modal-wrap {
opacity: 1;
transform: translateY(0) scale(1);
}
.purchase-modal-inner {
background: #fff;
border-radius: 5px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
overflow-y: auto;
max-height: calc(100vh - 184px);
padding: 0 40px 40px;
}
.purchase-modal-close {
position: absolute;
top: -30px;
right: -30px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--color-main);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
flex-shrink: 0;
}
.purchase-modal-close span {
position: absolute;
width: 27px;
height: 1.5px;
background: var(--color-accent);
}
.purchase-modal-close span:first-child {
transform: rotate(45deg);
}
.purchase-modal-close span:last-child {
transform: rotate(-45deg);
}
/* ===== アイコンマーク説明 モーダル（purchase-modal を流用） ===== */
.icon-modal-overlay {
background: rgba(0, 0, 0, 0.6); /* Figma: オーバーレイ濃度 0.6 */
}
.icon-modal-inner {
padding-top: 56px;
padding: 60px 80px 60px;
}
/* 見出し「アイコンマーク説明」＋区切り線 */
.icon-modal-head {
position: relative;
padding-bottom: 16px;
margin-bottom: 28px;
border-bottom: 1px solid var(--color-sub);
}
/* 区切り線左側のネイビー部分（504px） */
.icon-modal-head::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 504px;
max-width: 100%;
height: 1px;
background: var(--color-main);
}
/* 区切り線左端の黄色アクセント */
.icon-modal-head::before {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 20px;
height: 2px;
background: var(--color-accent);
z-index: 1;
}
.icon-modal-title {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.75px;
color: var(--color-text);
}
/* サブ見出し＋英語タイトル */
.icon-modal-sectionhead {
margin-bottom: 32px;
}
.icon-modal-subtitle {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.75px;
color: var(--color-black);
margin-bottom: 2px;
}
.icon-modal-en {
position: relative;
z-index: 0;
width: fit-content;
font-family: var(--font-en);
font-size: 20px;
font-weight: 400;
line-height: 1.5;
color: var(--color-main);
}
/* 黄色ハイライト（.partners-badge__en::before と同手法、色は accent） */
.icon-modal-en::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
bottom: 2px;
width: 100%;
height: 9px;
background: var(--color-accent);
}
/* アイコンカード（2カラム） */
.icon-modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px 40px;
}
.icon-card {
display: flex;
align-items: flex-start;
gap: 20px;
}
.icon-card__icon {
width: 80px;
height: 80px;
flex-shrink: 0;
border-radius: 8px;
overflow: hidden;
}
.icon-card__icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* キャプション付きPNG（180×247）は上部の正方形タイルだけを表示（Figmaのマスク相当） */
.icon-card__icon--crop img {
object-fit: cover;
object-position: top;
}
.icon-card__title {
font-family: var(--font-ja);
font-size: 18px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.45px;
color: var(--color-black);
margin-bottom: 6px;
}
.icon-card__text {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0.35px;
color: var(--color-black);
}
/* アイコンマーク説明モーダル レスポンシブ */
@media (max-width: 1024px) {
.icon-modal-grid {
gap: 32px 32px;
}
}
@media (max-width: 896px) {
.icon-modal-inner {
padding-top: 8px;
}
.icon-modal-title,
.icon-modal-subtitle {
font-size: 24px;
}
.icon-modal-en {
font-size: 16px;
}
}
@media (max-width: 568px) {
.icon-modal-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.icon-modal-title,
.icon-modal-subtitle {
font-size: 18px;
}
.icon-card__icon {
width: 50px;
height: 50px;
}
.icon-card__title {
font-size: 14px;
}
.icon-card__text{
font-size: 12px;
}
.icon-modal-en{
font-size: 12px;
}
.icon-modal-sectionhead{
margin-bottom: 20px;
}
}
/* ヘッダー（白背景）*/
/* pmc-header / pmc-pre-header 共通 */
.pmc-header,
.pmc-pre-header {
background: #fff;
position: relative;
z-index: 0;
}
.pmc-header {
padding: 60px 40px 30px;
}
.pmc-text {
padding: 0px 40px 30px;
}
.pmc-title {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 600;
color: var(--color-text);
letter-spacing: 0.75px;
line-height: 1.5;
margin: 0 0 12px;
}
.pmc-title-deco {
margin: 0 0 16px;
}
.pmc-title-deco-navy {
display: block;
width: 0;
height: 2px;
background: linear-gradient(to right, var(--color-accent) 19px, var(--color-main) 19px);
}
.pmc-title-deco-yellow {
display: none;
}
.pmc-sep {
position: absolute;
width: 100%;
left: 50%;
transform: translateX(-50%);
bottom: 46px;
border: none;
height: 2px;
background: var(--color-sub);
margin: 0;
z-index: -1;
}
.pmc-subtitle {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 600;
color: var(--color-text);
letter-spacing: 0.6px;
line-height: 1.5;
margin: 0 0 24px;
}
.pmc-body {
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
}
/* 2カラムパネル */
.pmc-panels {
display: flex;
height: 257px;
}
.pmc-panel {
flex: 1;
position: relative;
overflow: hidden;
}
.pmc-panel-img-wrap {
position: absolute;
inset: 0;
}
.pmc-panel-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pmc-panel-grad {
position: absolute;
inset: 0;
background: linear-gradient(90deg, #273240 0%, rgba(39, 50, 64, 0.50) 29.81%, rgba(39, 50, 64, 0.80) 100%);
}
.pmc-panel-body {
position: relative;
z-index: 1;
padding: 30px 40px;
}
.pmc-panel-title {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 600;
color: #fff;
letter-spacing: 0.6px;
line-height: 1.5;
margin: 0 0 16px;
}
.pmc-panel-text {
font-size: 16px;
line-height: 1.7;
color: #fff;
margin: 0;
}
/* ダーク：メンバーサービス */
.pmc-member {
position: relative;
overflow: hidden;
}
.pmc-member-img-wrap {
position: absolute;
inset: 0;
}
.pmc-member-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pmc-member-inner {
position: relative;
z-index: 1;
padding: 40px 40px 40px 40px;
background: rgba(39, 50, 64, 0.8);
}
.pmc-member-label {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 600;
color: var(--color-accent);
letter-spacing: 0.6px;
line-height: 1.5;
margin: 0 0 16px;
}
.pmc-member-lead {
font-size: 16px;
line-height: 1.7;
color: #fff;
margin: 0 0 40px;
}
.pmc-member-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 40px;
margin-bottom: 40px;
}
.pmc-member-item-title {
font-size: 18px;
font-weight: 700;
color: #fff;
line-height: 1.5;
margin: 0 0 8px;
}
.pmc-member-item-text {
font-size: 14px;
line-height: 1.7;
color: #fff;
margin: 0;
}
.pmc-member-btns {
display: flex;
gap: 20px;
margin-bottom: 30px;
}
.pmc-modal-btn {
border-color: #fff;
width: fit-content;
}
.pmc-modal-btn::after {
background: url('mp-img-cmn-icon_arrow_btn_wh.svg') center / contain no-repeat;
}
.pmc-member-note {
font-size: 14px;
line-height: 1.7;
color: #fff;
margin: 0;
}
/* =========================================================
ご購入前に知っておきたいこと モーダル
========================================================= */
.pmc-pre-header {
padding: 60px 40px 30px;
}
.pmc-pre-row {
position: relative;
height: 254px;
overflow: hidden;
}
.pmc-pre-row+.pmc-pre-row {
margin-top: 5px;
}
.pmc-pre-img-wrap {
position: absolute;
inset: 0;
}
.pmc-pre-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.pmc-pre-grad {
position: absolute;
inset: 0;
}
.pmc-pre-row--right .pmc-pre-grad {
background: linear-gradient(to right, rgba(39, 50, 64, 0.4) 0%, rgba(39, 50, 64, 0.2) 30%, #273240 100%);
}
.pmc-pre-row--left .pmc-pre-grad {
background: linear-gradient(to right, #273240 0%, rgba(39, 50, 64, 0.2) 70%, rgba(39, 50, 64, 0.4) 100%);
}
.pmc-pre-body {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: 24px 40px;
width: 58%;
}
.pmc-pre-row--right .pmc-pre-body {
right: 0;
}
.pmc-pre-row--left .pmc-pre-body {
left: 0;
}
.pmc-pre-title {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 600;
color: #fff;
letter-spacing: 0.6px;
line-height: 1.5;
margin: 0;
}
.pmc-pre-text {
font-size: 16px;
line-height: 1.7;
color: #fff;
margin: 0;
}
/* =========================================================
レスポンシブ縮小 (897px〜1465px)
ナビは消さず、フォント・余白を段階的に縮小して897pxまで収める
========================================================= */
@media (max-width: 1440px) {
.popular-item__name-en {
font-size: 20px;
}
.popular-item__name-jp {
font-size: 13px;
}
}
/* ── 1370px以下: guide-slider 2枚表示 ── */
@media (max-width: 1370px) {
#guide .guide-slide {
height: 440px;
}
.guide-slide__body {
font-size: 13px;
}
.guide-slide__btn {
padding: 0.75rem 1.25rem;
font-size: 14.4px;
}
.slick-slide .guide-slide {
overflow: hidden;
}
.pickup-item__name-en {
font-size: 18px;
}
.pickup-item__name-jp {
font-size: 12px;
}
.pickup-item__icon {
width: 35px;
}
.pickup-item {
padding: 30px 20px 40px;
}
.pickup-item__icons{right: 20px;}
}
/* ── 1300px以下: 軽い縮小 ── */
@media (max-width: 1460px) {
.header-inner {
padding: 0 20px;
}
.nav-link {
font-size: 15px;
padding: 39px 12px 0;
}
.nav-link--news {
font-size: 14px;
padding: 19px 12px 0;
}
.header-sns {
gap: 10px;
}
.header-sns .header-sns-icon {
width: 22px;
height: 22px;
}
/* sideA は 896px まで表示維持（#sideA display:none ルールは max-width:896px のブロックに集約） */
.popular-item__name-en {
font-size: 17px;
}
.popular-item__name-jp {
font-size: 12px;
}
.popular-item {
padding: 30px 15px 30px;
}
.popular-item__price-num {
font-size: 18px;
}
}
@media (max-width: 1260px) {
.header-logo{
width: 240px;
}
.logo-img {object-fit: contain; width: 100%; height: 100%;}
.nav-dropdown{top: 87px;}
}
@media (max-width: 1200px) {
.logo-img{
top: 76px;
}
.header-logo{
width: 200px;
}
.nav-link{
padding: 26px 8px 0;
}
.header-right{padding-top: 7px;}
.pickup-item__name-en {
font-size: 20px;
}
.popular-item__name-en {
font-size: 18px;
}
.popular-grid {
flex-wrap: wrap;
}
.popular-item {
flex: none;
width: 50%;
}
.popular-item:nth-child(1),
.popular-item:nth-child(2) {
border-bottom: 1px solid var(--color-sub);
}
.popular-item:nth-child(even) {
border-right: none;
}
.pickup-item__name-en {
font-size: 16px;
}
.pickup-item__name-jp {
font-size: 11px;
}
.pickup-item__icon {
width: 30px;
}
.pickup-item {
padding: 30px 18px 40px;
}
.pickup-item__icons{right: 18px;}
.pickup-item__brand{width: 152px; object-position: left top;}
}
/* ── 1100px以下: ロゴ縮小・SNS非表示 ── */
@media (max-width: 1100px) {
#header {
height: 140px;
}
.header-inner {
padding: 0 16px;
}
.nav-link {
font-size: 13px;
padding: 30px 8px 0;
}
.nav-link--news {
font-size: 13px;
padding: 14px 8px 0;
}
.nav-dd-right.--sub{
padding-inline: clamp(25px, 2.89vw, 50px);
flex-wrap: wrap;
}
.nav-dd-right.--sub .nav-dd-card{
width: 25%;
}
.nav-dd-side-list_wrap{
margin-top: 6px;
width: 100%;
padding-left: 0;
}
.nav-dd-side-list{
display: flex;
gap: 5px;
border-radius: 5px;
}
.nav-dd-side-item{
border-bottom: unset;
width: calc(100% / 3);
}
.nav-dd-side-item:not(:last-child){
border-right: 1px solid var(--color-sub);
}
.header-right {
padding-top: 18px;
}
.header-sns {
display: none;
}
.nav-dropdown {
top: 82px;
}
/* ---- footer: 列折り返し対応 ---- */
#footer {
padding: 40px var(--container-pad) 30px;
}
.footer-nav-row {
flex-wrap: wrap;
gap: 30px;
}
.footer-nav-col--products {
flex-basis: unset;
}
.footer-products-inner {
gap: 24px;
}
.pickup-item__name-en {
font-size: 15px;
}
.pickup-item__name-jp {
font-size: 10px;
}
.pickup-item__icon {
width: 28px;
}
.pickup-item {
padding: 30px 16px 28px;
}
.pickup-item__icons{right: 16px;}
}
/* ── 980px以下: さらに縮小・NEWS非表示 ── */
@media (max-width: 980px) {
#header {
height: 100px;
}
.header-logo {
width: 175px;
}
.logo-link{top: 6px;}
.nav-link {
font-size: 12px;
padding: 21px 5px 0;
}
.header-right {
padding-top: 13px;
}
.nav-item--news {
display: none;
}
.btn-hamburger {
width: 50px;
height: 50px;
}
.nav-dropdown {
top: 66px;
}
}
/* =========================================================
SP (≤896px) レスポンシブ
========================================================= */
@media (max-width: 896px) {
/* ---- body の min-width を解除 ---- */
body {
min-width: 0;
}
/* ---- デスクトップ専用要素を非表示 ---- */
.side-fixed {
display: none;
}
#sideA {
display: none;
}
/* ---- ヘッダー ---- */
#header {
height: 50px;
background: transparent;
overflow: visible;
}
#header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(to bottom, #080b0f 0%, #080b0f 25%, rgba(8, 11, 15, 0.85) 45%, rgba(8, 11, 15, 0.5) 65%, rgba(8, 11, 15, 0.2) 85%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
z-index: -1;
}
.header-inner {
padding: 0;
justify-content: flex-start;
align-items: center;
}
/* ロゴエリア */
.header-logo {
flex: 1;
min-width: 0;
align-self: center;
}
.logo-link {
position: relative;
top: auto;
left: auto;
height: 50px;
display: flex;
align-items: center;
padding: 0 0 0 10px;
}
.logo-img {
height: 36px;
width: auto;
}
/* デスクトップ専用ヘッダー要素を非表示 */
.header-nav {
display: none;
}
.header-sns {
display: none;
}
.nav-item--news {
display: none;
}
/* SP専用 E-BIKEリンク */
.header-sp-ebike {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
width: 116px;
height: 50px;
flex-shrink: 0;
text-decoration: none;
border-left: 1px solid rgba(255, 255, 255, 0.3);
border-right: 1px solid rgba(255, 255, 255, 0.3);
font-family: var(--font-rubik);
font-size: 16px;
font-weight: 500;
color: var(--color-white);
}
.header-sp-ebike img {
width: 25px;
height: 13px;
display: block;
flex-shrink: 0;
}
/* ハンバーガーボタン SP */
.header-right {
gap: 0;
padding: 0 11px 0 11px;
flex-shrink: 0;
height: 50px;
align-items: center;
align-self: center;
}
.btn-hamburger {
width: 40px;
height: 40px;
background: var(--color-main);
border: none;
border-radius: 50%;
padding: 0 8px 0 0;
gap: 5px;
flex-shrink: 0;
}
.btn-hamburger span {
background: var(--color-accent);
}
.btn-hamburger span:nth-child(1) {
width: 10px;
}
.btn-hamburger span:nth-child(2) {
width: 15px;
}
.btn-hamburger span:nth-child(3) {
width: 20px;
}
/* ---- HBGパネル SP ---- */
.hbg-panel {
width: 100%;
border-radius: 0;
}
/* 閉じるボタン */
.hbg-close {
top: 25px;
right: 15px;
width: 20px;
height: 20px;
background: transparent;
}
.hbg-close::before,
.hbg-close::after {
background: var(--color-main);
width: 20px;
}
/* ロゴバー */
.hbg-logo-bar {
padding: 15px 50px 15px 15px;
}
.hbg-logo .logo-img {
height: 40px;
width: auto;
}
.hbg-logo-bar-icons {
padding-right: 0;
gap: 16px;
}
/* メタバー */
.hbg-meta {
padding-top: 11px;
padding-bottom: 11px;
}
.hbg-member {
padding: 0 0 0 25px;
width: auto;
flex: 1;
font-size: 14px;
gap: 6px;
}
.hbg-member-icon {
width: 20px;
height: 20px;
}
.hbg-tel {
padding-left: 12px;
gap: 8px;
}
.hbg-tel-label {
display: none;
}
.hbg-fd-logo {
height: 20px;
}
.hbg-tel-num {
font-size: 18px;
}
/* ボディ */
.hbg-body {
flex-direction: column;
padding: 20px 15px 15px;
gap: 0;
}
.hbg-bncol {
display: flex;
width: 100%;
flex-direction: column;
gap: 10px;
margin-top: 20px;
}
.hbg-bn {
width: 100%;
height: 92px;
}
.hbg-bn-boxes {
top: 8px;
left: 8px;
}
.hbg-bn-boxes span {
width: 22px;
height: 22px;
font-size: 12px;
}
.hbg-bn-foot {
right: 8px;
bottom: 8px;
gap: 6px;
}
.hbg-bn-text {
font-size: 12px;
}
.hbg-bn-arrow {
width: 20px;
}
.hbg-bn-rule-txt {
top: 50%;
left: 80px;
font-size: 14px;
white-space: nowrap;
transform: translateY(-50%);
}
.hbg-bn--rule .hbg-badge {
top: 50%;
left: 15px;
transform: translateY(-50%);
}
.hbg-bn--rule:hover .hbg-bn-rule-txt {
transform: translateY(-50%) translateX(5px);
}
/* ナビ */
.hbg-nav {
flex: none;
width: 100%;
}
.hbg-nav-link {
min-height: 44px;
font-size: 14px;
padding: 12px 15px;
}
.hbg-nav-plus {
min-height: 44px;
}
.hbg-nav-sub-link {
padding: 11px 20px;
}
/* メディア・サブリンクセクション */
.hbg-media {
display: flex;
margin: 20px 15px 0;
flex-direction: column;
align-items: stretch;
}
.hbg-sub {
display: block;
margin: 20px 15px 0;
}
.hbg-media-tag {
width: 100%;
min-height: 32px;
border-radius: 5px 5px 0 0;
}
.hbg-media-tag span {
writing-mode: horizontal-tb;
letter-spacing: 0;
font-size: 13px;
}
.hbg-media-ttl {
padding: 14px 16px 10px;
font-size: 14px;
}
.hbg-media-sep {
display: none;
}
.hbg-media-links {
width: 100%;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
}
.hbg-media-link {
min-height: 44px;
padding: 12px 16px;
font-size: 13px;
border-top: 1px solid rgba(255, 255, 255, 0.65);
}
.hbg-sub-row {
display: block;
border-bottom: none;
}
.hbg-sub-row+.hbg-sub-row {
border-top: 1px solid var(--color-sub);
}
.hbg-sub-link {
min-height: 44px;
padding: 12px 0;
justify-content: space-between;
font-size: 13px;
border-bottom: 1px solid var(--color-sub);
}
.hbg-sub-link+.hbg-sub-link::before {
display: none;
}
/* SNS行 */
.hbg-sns {
justify-content: center;
padding: 20px 0 30px;
gap: 20px;
}
/* ---- SP専用セクション ---- */
/* サブリンク */
.hbg-sp-sublinks {
display: block;
border-top: 1px solid var(--color-sub);
}
.hbg-sp-sublink {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 44px;
padding: 12px 15px;
font-size: 14px;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
border-bottom: 1px solid var(--color-sub);
}
/* 3カラムリンク */
.hbg-sp-3col {
display: flex;
border-bottom: 1px solid var(--color-sub);
padding-inline: 15px;
gap: 30px;
}
.hbg-sp-3col-item {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 6px;
min-height: 44px;
padding-top: 12px;
padding-bottom: 12px;
font-size: 13px;
font-weight: 700;
color: var(--color-text);
text-decoration: none;
text-align: center;
}
.hbg-sp-3col-item:last-child {
border-right: none;
}
/* バナーペア */
.hbg-sp-bns {
display: flex;
height: 92px;
margin: 20px 0 10px;
gap: 10px;
padding: 0 20px;
}
.hbg-sp-bn {
flex: 1;
position: relative;
overflow: hidden;
text-decoration: none;
}
.hbg-sp-bn-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hbg-sp-bn-label {
position: absolute;
top: 10px;
left: 10px;
font-size: 13px;
font-weight: 500;
color: #fff;
letter-spacing: 0.5em;
line-height: 1;
}
.hbg-sp-bn-boxes {
position: absolute;
top: 8px;
left: 8px;
display: flex;
}
.hbg-sp-bn-boxes span {
width: 22px;
height: 22px;
border: 1px solid #fff;
margin-left: -1px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 500;
color: #fff;
}
.hbg-sp-bn-boxes span:first-child {
margin-left: 0;
}
.hbg-sp-bn-foot {
position: absolute;
bottom: 8px;
right: 8px;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
color: #fff;
white-space: nowrap;
line-height: 1;
}
.hbg-sp-bn-arrow {
display: inline-block;
width: 20px;
height: 1px;
background: #fff;
position: relative;
flex-shrink: 0;
vertical-align: middle;
}
.hbg-sp-bn-arrow::before,
.hbg-sp-bn-arrow::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 6px;
height: 1px;
background: #fff;
transform-origin: right center;
}
.hbg-sp-bn-arrow::before {
transform: rotate(-30deg);
}
.hbg-sp-bn-arrow::after {
transform: rotate(30deg);
}
/* 遵守義務バナー */
.hbg-sp-rule {
display: block;
position: relative;
height: 70px;
overflow: hidden;
text-decoration: none;
padding: 0 20px;
}
.hbg-sp-rule-photo {
position: absolute;
inset: 0;
width: calc(100% - 40px);
left: 50%;
transform: translateX(-50%);
height: 100%;
object-fit: cover;
display: block;
}
.hbg-sp-rule-ov {
position: absolute;
inset: 0;
background: rgba(39, 50, 64, 0.6);
width: calc(100% - 40px);
left: 50%;
transform: translateX(-50%);
height: 100%;
object-fit: cover;
}
.hbg-sp-rule .hbg-badge {
position: absolute;
top: 50%;
left: 35px;
transform: translateY(-50%);
}
.hbg-sp-rule-text {
position: absolute;
top: 50%;
left: 80px;
transform: translateY(-50%);
font-size: 14px;
font-weight: 700;
color: #fff;
white-space: nowrap;
line-height: 1.4;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
margin: 0;
}
.hbg-sp-rule-arrow {
position: absolute;
right: 35px;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 20px;
height: 1px;
background: #fff;
}
.hbg-sp-rule-arrow::before,
.hbg-sp-rule-arrow::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 6px;
height: 1px;
background: #fff;
transform-origin: right center;
}
.hbg-sp-rule-arrow::before {
transform: rotate(-30deg);
}
.hbg-sp-rule-arrow::after {
transform: rotate(30deg);
}
}
/* =========================================================
PURCHASE-INFO / FAQ / BANNER-SLIDER レスポンシブ
========================================================= */
/* ── 896px以下: purchase 縦積み / faq縦積み ── */
@media (max-width: 896px) {
/* purchase */
.purchase-panels {
grid-template-columns: 1fr;
}
.purchase-cta {
width: 140px;
height: 140px;
}
.purchase-cta__label {
font-size: 14px;
}
.purchase-cta__more {
font-size: 14px;
}
/* faq */
.faq-inner {
flex-direction: column;
gap: 30px;
}
.faq-left {
width: 100%;
}
/* banner */
.banner-slide__label {
font-size: 16px;
}
}
@media (max-width: 896px) {
/* ---- 共通: container padding 上書き ---- */
:root {
--container-pad: 20px;
}
/* ---- 固定フッターボタン分の余白 ---- */
body {
padding-bottom: 50px;
}
/* ---- 共通: sec-title テキスト折り返し ---- */
.sec-title__ja {
font-size: 26px;
/* 26px */
white-space: normal;
}
.sec-title__en {
white-space: normal;
}
/* ---- MV ---- */
/* ヘッドライン: 折り返し・サイズ縮小 */
.mv-text {
left: var(--container-pad);
transform: none;
white-space: normal;
width: calc(100% - 40px);
top: 27.5vh;
}
.mv-text__sub {
text-align: center;
}
.mv-text__main {
font-size: 24px;
text-align: center;
line-height: 1.4;
}
/* slick が高さを内部計算するため、各要素に同じ高さを与える */
#mv .mv-slider-wrap,
#mv .mv-slider .slick-list,
#mv .mv-slider .slick-track,
#mv .mv-slider .slick-slide,
#mv .mv-slide {
height: 250px;
}
#mv .mv-slider-wrap {
top: auto;
bottom: 90px;
}
#mv .mv-slide {
display: flex !important;
flex-direction: column;
margin: 0 var(--container-pad);
padding: 14px 14px 0;
border-radius: 4px 4px 0 0;
overflow: hidden;
justify-content: flex-end;
color: var(--color-white);
}
/* 商品テキスト + ブランド: 1番目に表示 */
#mv .mv-slide__info {
position: relative;
right: auto;
left: 10%;
top: 0;
max-width: none;
display: block;
order: 1;
flex-shrink: 0;
margin-bottom: 4px;
}
#mv .mv-slide__brand {
display: block;
width: auto;
height: 19px;
max-width: 90px;
max-height: 19px;
margin-bottom: 6px;
margin-right: 0;
}
#mv .mv-slide__name-en,
#mv .mv-slide__name-jp {
display: inline-block;
vertical-align: baseline;
}
#mv .mv-slide__price {
display: block;
}
#mv .mv-slide__name-en {
font-size: 15px;
line-height: 1.4;
margin-right: 6px;
color: var(--color-white);
}
#mv .mv-slide__name-jp {
font-size: 12px;
line-height: 1.4;
color: var(--color-white);
}
#mv .mv-slide__price {
width: 100%;
font-size: 15px;
line-height: 1.4;
color: var(--color-white);
}
/* 商品画像: 3番目に表示、残り高さを埋める */
/* #mv .mv-slide__img {
position: relative;
right: auto;
left: auto;
bottom: 0;
transform: none;
height: 130px;
width: 100%;
max-width: 100%;
object-fit: contain;
object-position: bottom;
order: 3;
flex-shrink: 0;
align-self: center;
} */
/* ---- PICKUP ---- */
#pickup {
padding: 40px 0;
}
.pickup-inner {
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.pickup-lead-col {
padding-left: 0;
padding-top: 0;
}
.pickup-grid {
flex-direction: column;
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
margin-bottom: 20px;
}
.pickup-item {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
padding: 20px 0;
border-right: none;
border-bottom: 1px solid var(--color-sub);
align-items: start;
}
.pickup-item:last-child {
border-bottom: none;
}
.pickup-item__img-wrap {
grid-column: 1;
grid-row: 1 / 4;
margin-left: calc(-1 * var(--container-pad));
width: calc(100% + var(--container-pad));
aspect-ratio: 221 / 157;
margin-bottom: 0;
}
.pickup-item__brand {
grid-column: 2;
grid-row: 1;
padding-left: 14px;
margin-bottom: 8px;
width: auto;
height: 28px;
}
.pickup-item__name-row {
grid-column: 2;
grid-row: 2;
padding-left: 14px;
flex-direction: column;
gap: 2px;
align-items: flex-start;
flex-wrap: wrap;
}
.pickup-item__icons {
margin-left: 0;
top: 20px;
}
.pickup-item__icon {
width: 32px;
}
.pickup-item__name-en {
font-size: 20px;
}
.pickup-item__name-jp {
font-size: 12px;
}
.pickup-item__price-row {
grid-column: 2;
grid-row: 3;
padding-left: 14px;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding-top: 10px;
}
.pickup-item__price-row::after {
display: none;
}
.pickup-item__price-num {
font-size: 16px;
}
.pickup-ctabtn-row {
flex-direction: column;
align-items: stretch;
gap: 14px;
margin-top: 30px;
}
.pickup-ctabtn-row .btn-main {
width: 100%;
justify-content: center;
}
/* ---- GUIDE ---- */
#guide {
padding: 40px 0;
}
.guide-header {
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
}
.guide-title-col {
width: 100%;
}
#guide .guide-slide {
height: 433px;
}
#guide .guide-slide__heading,
#guide .guide-slide__body {
display: none;
}
/* ---- POPULAR MODELS ---- */
#popular-models {
padding: 40px 0;
}
#popular-models .container .popular-header {
padding-top: 30px;
}
.popular-header {
flex-direction: column;
gap: 16px;
margin-bottom: 30px;
}
.popular-title-col {
width: 100%;
}
.popular-grid {
flex-wrap: wrap;
margin-bottom: 20px;
}
.popular-item {
flex: none;
width: 50%;
border-right: none;
padding: 20px 10px 24px 0;
overflow: visible;
}
.popular-item:nth-child(even) {
padding-left: 10px;
padding-right: 0;
}
.popular-item:nth-child(1),
.popular-item:nth-child(2) {
border-bottom: 1px solid var(--color-sub);
}
/* clamp() が 896px 以下の最小値を保証するため font-size 上書きは不要 */
.popular-item__name-row::before {
left: -10px;
right: -10px;
}
/* ---- BRANDS ---- */
#brands {
padding: 40px 0 0;
}
.brands-header {
flex-direction: column;
gap: 16px;
margin-bottom: 30px;
}
.brands-title-col {
width: 100%;
}
.brands-lead-col {
padding-right: 0;
}
/* Brand sections: 画像(250px)上 + コンテンツカード下 */
.brand-section {
display: block;
min-height: auto;
}
.brand-section picture {
position: relative;
inset: auto;
height: 250px;
width: 100%;
display: block;
}
.brand-section img.brand-bg {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
.brand-section__overlay {
height: 250px;
bottom: auto;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}
.brand-section__img-caption {
display: flex;
align-items: flex-end;
justify-content: flex-start;
gap: 30px;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 250px;
padding: 0 var(--container-pad) 14px;
z-index: 2;
}
.brand-section__img-caption .brand-section__logo {
height: 28px;
max-width: 140px;
margin-bottom: 0;
}
.brand-section__img-caption .brand-section__name-jp {
margin-bottom: 0;
font-size: 14px;
}
.brand-section__content {
position: relative;
background: var(--color-main);
padding: 24px var(--container-pad) 30px;
}
.brand-section__content .brand-section__name-row {
display: none;
}
.brand-section__content .brand-section__logo {
display: none;
}
.brand-section__content .brand-section__name-jp {
display: none;
}
.brand-section__flex {
flex-direction: column;
gap: 0;
margin-top: 0;
align-items: flex-start;
}
.brand-section__divider {
display: none;
}
.brand-section__right {
display: none;
}
.brand-section__right--sp {
display: block;
margin-top: 16px;
padding-left: 14px;
border-left: 1px solid var(--color-white);
}
.brand-section__right--sp .brand-section__features {
font-size: 14px;
}
.brand-section__btn-row {
margin-top: 12px;
}
.brand-section__heading {
font-size: 18px;
}
.brand-section__body {
font-size: 14px;
width: 100%;
}
/* ---- FEATURED MODELS ---- */
#featured-models {
padding-bottom: 40px;
overflow: hidden;
}
#featured-models .slick-list {
height: auto;
overflow: hidden;
clip-path: none;
}
#featured-models .slick-slider {
margin-bottom: 0;
}
.featured-title-area {
padding: 40px 0 24px;
}
#featured-models .featured-slide {
height: auto;
padding-bottom: 20px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.featured-slide__price {
justify-content: flex-end;
}
/* order: name → image → description → buttons */
.featured-slide__name-block {
position: relative;
right: auto;
top: auto;
text-align: left;
align-items: flex-start;
padding: 20px var(--container-pad) 0;
order: 1;
}
.featured-slide__img {
position: relative;
left: auto;
right: auto;
top: auto;
width: 100%;
height: auto;
display: block;
margin-top: 16px;
order: 2;
}
.featured-slide__img img {
position: relative;
left: auto;
transform: none;
top: auto;
bottom: auto;
width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
max-width: 100%;
}
.featured-slide__left {
position: relative;
left: auto;
top: auto;
bottom: auto;
width: 100%;
padding: 20px var(--container-pad) 0;
order: 3;
}
.featured-slide__name-en {
font-size: 36px;
white-space: normal;
}
.featured-slide__name-jp {
font-size: 16px;
}
.featured-slide__name-en-row {
justify-content: flex-start;
}
.featured-slide__heading {
font-size: 20px;
}
.featured-slide__sub {
font-size: 16px;
}
.featured-slide__body {
width: 100%;
}
.featured-slide__img-underline {
display: none;
}
.featured-slide__btns {
position: relative;
bottom: auto;
left: auto;
transform: none;
flex-direction: column;
gap: 10px;
margin-top: 20px;
padding: 0 var(--container-pad) 30px;
}
.featured-slide__btns .btn-main {
width: 100%;
justify-content: center;
}
.featured-icon-note {
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px var(--container-pad) 0;
}
/* ---- MOBIPARK WORLD ---- */
#mobipark-world {
padding: 40px 0 0;
}
/* Stat items: SP では1列に */
.world-hero__stats {
grid-template-columns: max-content;
}
.world-hero__stat-num {
font-size: 32px;
}
.world-hero__stat-label {
font-size: 13px;
}
/* Tiles: 2×2 グリッド */
.world-tiles {
flex-wrap: wrap;
border-bottom: none;
}
.world-tile {
flex: none;
width: 50%;
min-height: 201px;
border-right: none;
}
.world-tile:nth-child(2n) {
border-right: none;
}
/* .world-tile:nth-child(1), .world-tile:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.2); } */
.world-tile__content {
padding: 20px 16px;
}
.world-tile__heading {
font-size: 16px;
margin-bottom: 10px;
}
.world-sub-panel__bg-wrap img.panel-bg {
scale: 1.5;
}
/* Thoughts: SP レイアウト */
.world-thoughts {
flex-direction: column;
}
.world-thoughts__left {
min-height: auto;
overflow: visible;
}
.world-thoughts__bg-wrap {
position: relative;
height: 258px;
}
.world-thoughts__overlay {
height: 258px;
bottom: auto;
}
.world-thoughts__content {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 258px;
padding: 16px var(--container-pad);
justify-content: flex-end;
border-right: none;
border-bottom: 1px solid var(--color-white);
}
.world-thoughts__title {
font-size: 24px;
}
.world-hero__thought-heading {
font-size: 20px;
}
.world-thoughts__content-bottom {
display: none;
}
.world-thoughts__sp-bottom {
display: block;
background: var(--color-black);
padding: 24px var(--container-pad) 32px;
border-bottom: 5px solid var(--color-white);
}
.world-thoughts__sp-bottom .world-thoughts__body {
font-size: 14px;
max-width: 100%;
}
.world-sub-panels {
width: 100%;
}
.world-sub-panel {
min-height: 200px;
}
.world-sub-panel__content {
padding: 1.875rem var(--container-pad);
}
/* ---- PARTNERS: partners-trial SP (world-thoughts と同パターン) ---- */
.partners-trial {
min-height: auto;
overflow: visible;
}
.partners-trial__bg-wrap {
position: relative;
height: 258px;
border-bottom: 1px solid var(--color-white);
}
.partners-trial__overlay {
height: 258px;
bottom: auto;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}
.partners-trial__sp-caption {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 258px;
padding: 0 var(--container-pad) 16px;
z-index: 2;
}
.partners-trial__sp-caption .partners-section-label {
font-size: 24px;
}
.partners-trial__inner {
flex-direction: column;
gap: 1.5rem;
background: var(--color-black);
}
.partners-trial__inner .partners-section-label {
display: none;
}
.partners-trial__inner .partners-badge {
display: none;
}
.partners-trial__left {
max-width: 100%;
width: 100%;
}
.partners-steps {
flex: none;
width: 100%;
max-width: 100%;
}
.partners-trial__btns {
flex-direction: column;
}
.btn-ghost-light {
justify-content: center;
}
/* ---- partners-shop SP (partners-trial と同パターン) ---- */
.partners-shop {
min-height: auto;
overflow: visible;
}
.partners-shop__bg-wrap {
position: relative;
height: 258px;
border-bottom: 1px solid var(--color-white);
}
.partners-shop__overlay {
height: 258px;
bottom: auto;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
}
.partners-shop__sp-caption {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 258px;
padding: 0 var(--container-pad) 16px;
z-index: 2;
}
.partners-shop__sp-caption .partners-section-label {
font-size: 24px;
}
.partners-shop__inner {
justify-content: flex-start;
background: var(--color-black);
}
.partners-shop__inner .partners-section-label {
display: none;
}
.partners-shop__inner .partners-badge {
display: none;
}
.partners-shop__content {
flex: none;
width: 100%;
}
.partners-shop__map-wrap {
display: none;
}
/* ---- NEWS & COLUMN ---- */
#news-column {
padding: 40px 0;
}
.news-column-inner {
flex-direction: column;
gap: 40px;
}
/* ---- SNS ---- */
#sns {
/* padding removed: 各 .sns-col に padding を設定 */
}
.sns-inner {
flex-direction: column;
gap: 0;
}
.sns-col {
flex: none;
max-width: 100%;
width: 100%;
padding: 3rem 0;
}
.sns-ep-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sns-ep-card {
min-height: 110px;
}
.sns-yt-hero__actions {
padding: 20px;
}
.sns-yt-hero__cta {
width: calc(100% - 80px);
max-width: 320px;
}
.sns-yt-hero__cta .btn-outline-white {
width: 100%;
justify-content: center;
padding: 12px 16px;
font-size: 14px;
}
.sns-yt-hero__mark {
width: 60px;
height: auto;
}
@media (max-width: 480px) {
.sns-yt-hero__actions { padding: 16px; }
.sns-yt-hero__mark { width: 48px; }
}
.sns-col__head--on-hero {
top: 10px;
left: 12px;
right: 80px; /* mark との重なり回避 */
flex-direction: row; /* SP base は column だが hero 内ではコンパクトに横並び */
align-items: baseline;
gap: 6px;
}
.sns-col__head--on-hero .sns-heading {
font-size: 16px;
}
.sns-col__head--on-hero .sns-badge-row__en {
font-size: 11px;
}
.sns-col__head--on-hero .sns-badge-row__en::before {
height: 4px;
}
.btn-solid {
justify-content: center;
width: 100%;
}
/* ---- COMMON CONTENT ---- */
.common-content-inner {
padding: 120px var(--container-pad) 180px;
}
.common-content-img-left-wrap {
top: auto;
bottom: 0;
width: 65%;
height: auto;
aspect-ratio: 592 / 519;
}
.common-content-img-right-wrap {
left: auto;
right: 0;
top: 0;
width: 38%;
aspect-ratio: 359 / 231;
}
.common-content__heading {
font-size: 20px;
}
.common-content__strong {
font-size: 16px;
}
.common-content__cta-row {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.common-content__btns {
flex-direction: column;
}
.common-content__btns .btn-outline {
width: 100%;
}
/* ---- FOOTER ---- */
#footer {
padding: 30px var(--container-pad) 20px;
}
.footer-top {
flex-direction: column;
align-items: center;
gap: 24px;
}
.footer-logo-col {
width: 100%;
text-align: center;
}
.footer-logo {
margin: 0 auto 8px;
}
.footer-logo__img {
margin: 0 auto;
}
.footer-tagline {
text-align: center;
}
.footer-tel-block {
justify-content: center;
}
.footer-sns {
justify-content: center;
}
.footer-nav-wrap {
display: none;
}
.footer-sub-links {
display: none;
}
.footer-bottom {
flex-direction: column;
align-items: center;
gap: 8px;
}
/* ---- popular-models SP: 縦積みレイアウト ---- */
.popular-item__brand-row {
flex-direction: column;
align-items: flex-start;
gap: 12px;
margin-bottom: -10px;
}
.popular-item__name-row {
flex-direction: column;
align-items: flex-start;
gap: 2px;
margin-top: -10px;
}
.popular-item__price-row {
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
/* name-row::beforeをSPで非表示にし、name-en自身にgray(::before)とgradient(::after)を持たせてpopular-item幅で重ねる */
.popular-item__name-row::before {
display: none;
}
.popular-item__name-en {
width: 100%;
}
.popular-item__name-en::before {
content: '';
position: absolute;
left: -10px;
right: -10px;
bottom: -1px;
height: 1px;
background: var(--color-sub);
width: auto;
}
.popular-item__name-en::after {
left: -10px;
right: -10px;
width: auto;
}
/* ---- featured-models SP: 既存btnsを非表示、SP用btnsを表示 ---- */
.featured-slide__btns {
display: none;
}
.featured-slide__sp-btns {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px var(--container-pad) 24px;
order: 4;
}
.featured-slide__sp-btns .btn-main {
width: 100%;
justify-content: center;
}
/* ---- world: hero stats をSP用DOMに切り替え ---- */
.world-hero__stats {
display: none;
}
.world-hero__stats-sp-wrap {
display: block;
background: var(--color-main);
}
.world-hero__stats-sp {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 20px var(--container-pad);
max-width: 1598px;
margin: 0 auto;
}
.world-hero__stats-sp .world-hero__stat-num-box {
flex-direction: column;
height: auto;
}
.world-hero__stats-sp .world-hero__stat-num-wrap {
width: 100%;
height: 56px;
border-radius: 3px 3px 0 0;
}
.world-hero__stats-sp .world-hero__stat-label-wrap {
width: 100%;
height: auto;
border-left: 1px solid var(--color-white);
border-top: none;
border-radius: 0 0 3px 3px;
padding: 6px 10px;
}
.world-hero__stats-sp .world-hero__stat-label {
white-space: normal;
font-size: 12px;
line-height: 1.4;
}
.world-hero__stats-sp .world-hero__stat-num {
font-size: 24px;
}
/* ---- news-column SP ---- */
.column-link-item {
line-height: 1.6;
font-size: 15px;
}
.column-col__btn-row {
justify-content: center;
}
.column-heading {
font-size: 20px;
}
.column-lead {
font-size: 14px;
}
.news-col__btn-row {
justify-content: center;
}
/* ---- sns SP: head縦積み ---- */
.sns-col__head {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.sns-heading {
font-size: 24px;
}
.sns-badge-row__en {
font-size: 16px;
}
/* ---- common-content SP: btns 100% ---- */
.common-content__btns {
width: 100%;
}
/* ---- faq SP: padding縮小 ---- */
#faq {
padding: 40px 0;
}
/* ---- partners SP DOM ---- */
.partners-trial__sp-btns {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px var(--container-pad) 0;
}
.partners-trial__btns {
display: none;
}
.partners-shop__sp-map-link {
display: flex;
margin-top: 12px;
width: 100%;
justify-content: center;
}
/* ---- purchase modal SP ---- */
.purchase-modal-overlay {
padding: 50px 0 0;
}
.purchase-modal-wrap {
width: calc(100% - 60px);
margin: 0 auto;
}
.purchase-modal-inner {
padding: 30px 20px 20px;
border-radius: 5px 5px 0 0;
max-height: calc(90vh - 50px);
}
.purchase-modal-close {
top: 0;
right: 0px;
transform: translate(50%, -50%);
width: 44px;
height: 44px;
}
.purchase-modal-close span {
width: 20px;
}
.pmc-header,
.pmc-pre-header {
padding: 20px 0 16px;
}
.pmc-text {
padding: 0 0 16px;
}
.pmc-title {
font-size: 18px;
}
.pmc-sep {
bottom: 32px;
}
.pmc-subtitle {
font-size: 16px;
margin-bottom: 8px;
}
.pmc-body {
font-size: 13px;
}
.pmc-panel-body {
padding: 14px 16px;
min-height: 160px;
}
.pmc-panel-title {
font-size: 16px;
margin-bottom: 6px;
}
.pmc-panel-text {
font-size: 13px;
}
.pmc-member-inner {
padding: 20px 16px;
}
.pmc-member-label {
font-size: 16px;
margin-bottom: 10px;
}
.pmc-member-lead {
font-size: 13px;
margin-bottom: 16px;
}
.pmc-member-item-title {
font-size: 15px;
}
.pmc-member-item-text {
font-size: 13px;
}
.pmc-member-btns {
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.pmc-modal-btn {
width: 100%;
justify-content: center;
font-size: 12px;
padding: 9px 14px;
}
.pmc-member-note {
font-size: 12px;
}
.pmc-pre-title {
font-size: 15px;
}
.pmc-pre-text {
font-size: 12px;
}
.pmc-pre-body {
padding: 12px 16px;
gap: 6px;
}
/* テキスト全体をもう一回り縮小 */
.pmc-title {
font-size: 16px;
}
.pmc-subtitle {
font-size: 15px;
}
.pmc-body {
font-size: 12px;
}
.pmc-panel-title {
font-size: 15px;
}
.pmc-panel-text {
font-size: 12px;
}
.pmc-member-label {
font-size: 15px;
}
.pmc-member-lead {
font-size: 12px;
}
.pmc-member-item-title {
font-size: 14px;
}
.pmc-member-item-text {
font-size: 12px;
}
}
/* ── 569px〜896px: MV スライド画像を少し大きく ── */
@media (min-width: 569px) and (max-width: 896px) {
#mv .mv-slider-wrap,
#mv .mv-slider .slick-list,
#mv .mv-slider .slick-track,
#mv .mv-slider .slick-slide,
#mv .mv-slide {
height: 328px;
}
#mv .mv-slide__img {
/* max-height: 30vw;
height: 40vw; */
/* width: 60vw; */
bottom: 0;
max-width: unset;
width: 66%;
}
#mv .slick-slider{margin-bottom: 0;}
.mv-slide__info{
bottom: 40%;
}
}
/* ── 568px以下: purchase circle縮小 / faq単列 ── */
@media (max-width: 568px) {
/* ---- 共通: sec-title font-size ---- */
.sec-title__ja {
font-size: 24px;
letter-spacing: 0.075em;
}
.sec-title__en {
font-size: 16px;
}
/* ---- 共通: mb40 → mb20 (mobipark-world用) ---- */
#mobipark-world .sec-title.mb40 {
margin-bottom: 20px;
}
#mv .mv-slider-wrap,
#mv .mv-slider .slick-list,
#mv .mv-slider .slick-track,
#mv .mv-slider .slick-slide,
#mv .mv-slide {
height: 250px;
}
#mv .mv-slider-wrap{
bottom: 60px;
}
#mv .mv-slide {
padding-top: 2px;
position: relative;
}
#mv .mv-slide__info {
position: relative;
left: 0;
z-index: 2;
width: calc(100% - 70px);
}
#mv .mv-slide__img {
position: absolute;
right: auto;
left: 50%;
bottom: 1px;
transform: translateX(-50%);
height: auto;
max-height: 240px;
min-height: 0;
flex: none;
width: calc(100% - 40px);
max-width: calc(100% - 40px);
align-self: stretch;
z-index: 1;
}
#mv .mv-slide__name-en {
font-size: 14px;
}
.mv-text__sub {
text-align: center;
}
.mv-text__main {
font-size: 24px;
text-align: center;
line-height: 1.4;
}
.mv-slide__price {
font-size: 16px;
}
.mv-slide__price .yen,
.mv-slide__price .tax {
font-size: 10px;
}
.mv-overlay {
display: none;
}
.mv-grad-top {
display: none;
}
.partners-trial__overlay {
background: linear-gradient(to right, var(--color-black) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}
.brand-section__overlay {
background: linear-gradient(to right, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%);
}
.pickup-lead-col p {
font-size: 14px;
}
.pickup-item__icons {
/* margin-top: 3px; */
right: 0;
bottom: 62px;
top: unset;
}
.pickup-lead-col p {
text-align: justify;
}
#guide {
padding: 40px 0 0;
}
.guide-lead-heading {
font-size: 18px;
}
.guide-lead-body {
font-size: 14px;
}
/* purchase */
.purchase-panel {
padding: 16px clamp(16px, 4vw, 24px);
}
.purchase-layout {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.purchase-heading {
font-size: 20px;
width: 100%;
}
/* pcOnly CTA は SP で非表示 */
.pcOnly {
display: none !important;
}
/* spOnly CTA は SP で表示 */
.spOnly {
display: flex !important;
}
/* --after パネル: body + spOnly CTA を横並び */
.purchase-body-row {
display: flex;
align-items: center;
gap: 16px;
}
.purchase-body-row .purchase-body {
flex: 1;
}
.purchase-cta {
width: 128px;
height: 128px;
flex-shrink: 0;
overflow: hidden;
padding: 0;
}
.purchase-cta__label {
font-size: 12px;
line-height: 1.4;
}
.purchase-cta__more {
font-size: 12px;
}
/* brands lead */
.brand-section__heading {
font-size: 20px;
line-height: 1.5;
margin-bottom: 20px;
}
.brand-section__body {
text-align: justify;
width: calc(100% - 20px);
line-height: 1.7;
}
.brand-section__btn-row {
margin-top: 20px;
}
.brand-section__right--sp {
margin-top: 20px;
}
.brands-lead-heading {
font-size: 15px;
}
.brands-lead-heading2 {
font-size: 18px;
}
.brands-lead-body {
font-size: 14px;
}
/* faq */
.faq-grid {
grid-template-columns: 1fr;
width: 100%;
}
.faq-item:nth-child(even) .faq-item__header,
.faq-item:nth-child(odd) .faq-item__header {
padding-left: 0;
padding-right: 0;
}
.faq-left__heading {
font-size: 20px;
}
.faq-item__q {
font-size: 14px;
}
.faq-left .btn-main {
width: 100%;
justify-content: center;
}
/* banner */
#banner-slider {
padding-top: 40px;
}
.banner-slide__label {
font-size: 14px;
}
.banner-slider-clip {
overflow: hidden;
border-bottom: 1px solid var(--color-sub);
padding-bottom: 50px;
}
/* ---- pickup: 画像右端揃え・price右寄せ ---- */
.pickup-item__icon {
width: 20px;
}
.pickup-item__name-row {
gap: 0;
flex-wrap: wrap;
}
.pickup-item__name-en {
line-height: 1.1;
}
.pickup-item__img-wrap {
aspect-ratio: 230/210;
}
.pickup-item__img-wrap img {
object-fit: cover;
object-position: right bottom;
}
.pickup-item__price-row {
align-items: flex-end;
}
/* ---- pickup: アイコン説明ノート (SP-only) ---- */
.pickup-icon-note {
display: flex;
padding: 16px 0 0;
}
/* ---- MV SP ボタン (画面下部固定) ---- */
.mv-sp-btns {
display: flex;
align-items: stretch;
background: var(--color-main);
height: 50px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 200;
}
.mv-sp-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-ja);
font-size: 14px;
font-weight: 700;
color: var(--color-white);
text-decoration: none;
padding: 0 10px;
white-space: nowrap;
}
.mv-sp-btn img {
height: 18px;
width: auto;
flex-shrink: 0;
}
.mv-sp-btn-div {
width: 1px;
background: rgba(255, 255, 255, 1);
margin: 13px 0;
flex-shrink: 0;
}
.mv-sp-btn--tel {
font-family: var(--font-oswald);
font-weight: 400;
font-size: 22px;
}
.mv-sp-btn--member {
position: relative;
}
.mv-sp-btn--member::before {
position: absolute;
content: "";
display: block;
width: 10px;
height: 10px;
background-color: var(--color-accent);
clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
top: 5px;
left: 4px;
}
/* ---- featured-models SP: icon-note ---- */
.featured-icon-note {
padding: 0 var(--container-pad) 0;
align-items: center;
}
.featured-slide__name-block {
padding-top: 0px var(--container-pad) 0;
}
.featured-slide__name-en-row {
width: 100%;
justify-content: space-between;
}
.featured-slide__img {
display: flex;
justify-content: center;
}
.featured-slide__img img {
aspect-ratio: 360/216;
object-fit: contain;
width: calc(100% - 50px);
}
.featured-slide__body {
margin-top: 0.2rem;
}
.featured-slide__name-block {
position: relative;
}
.featured-slide__badges {
position: absolute;
right: var(--container-pad);
}
#featured-models .featured-slide {
padding-bottom: 0;
}
.popular-item__badge {
width: 30px;
height: 30px;
}
.popular-item__body {
margin-bottom: 6px;
}
.popular-item__name-en::after {
bottom: -28px;
}
.popular-item__name-en::before {
bottom: -28px;
}
.popular-item__price-num {
font-size: 18px;
}
.popular-item__price-yen {
font-size: 12px;
}
.brand-section__img-caption .brand-section__logo {
max-width: 200px;
max-height: 46px;
height: 100%;
width: 100%;
object-fit: contain;
}
.brand-section__img-caption .brand-section__name-jp {
line-height: 46px;
}
/* ---- world: hero title / thoughts / sub-panel ---- */
.world-hero__stats-sp-wrap {
background-color: var(--color-white);
}
.world-hero__stats-sp {
grid-template-columns: 1fr;
gap: 0;
padding: 0 0 5px;
}
.world-hero__stats-sp .world-hero__stat-num-box {
flex-direction: row;
}
.world-hero__stats-sp .world-hero__stat-num-wrap {
width: 76px;
height: 76px;
border-radius: 3px 0 0 3px;
position: relative;
}
.world-hero__stats-sp .world-hero__stat-label {
font-size: 16px;
}
.world-hero__stats-sp .world-hero__stat-label-wrap {
width: calc(100% - 76px);
height: 76px;
border-top: 1px solid var(--color-white);
border-left: none;
border-radius: 0 3px 3px 0;
}
.world-hero__stats-sp .world-hero__stat-num {
font-size: 36px;
}
.world-hero__body {
font-size: 14px;
}
.world-hero__title {
font-size: 20px;
margin-bottom: 10px;
}
.world-hero__content {
padding: 30px var(--container-pad);
border-bottom: none;
}
.world-thoughts__title {
font-size: 24px;
}
.world-hero__thought-heading {
font-size: 20px;
}
.world-sub-panel {
display: flex;
align-items: flex-end;
min-height: 250px;
}
.world-sub-panel:not(:last-child) {
border-bottom: 5px solid var(--color-white)
}
.world-sub-panel:first-child {
margin-top: 0;
}
.world-sub-panel__content {
padding-top: 1.25rem;
}
.world-tiles {
padding-bottom: 5px;
}
.world-hero__thought-label::before {
bottom: 8px;
}
/* ---- partners SP: 改善 ---- */
#partners {
padding-top: 40px;
}
.partners-trial__sp-btns {
padding: 0;
width: 100%;
}
.partners-trial {
min-height: 0;
}
.partners-trial__inner {
padding: 24px var(--container-pad);
}
.partners-trial__btns .btn-ghost-light {
width: 100%;
justify-content: center;
}
.partners-shop {
min-height: 0;
}
.partners-shop__inner {
padding: 24px var(--container-pad);
}
.partners-shop__lead {
font-size: 20px;
}
.partners-shop__body {
font-size: 14px;
}
.partners-shop__content .btn-outline {
width: 100%;
}
.common-content__strong {
margin-bottom: 12px;
}
.common-content__heading {
margin-bottom: 15px;
}
.common-content__btns .btn-outline {
justify-content: center;
}
.step-item__heading {
font-size: 16px;
}
.step-item__body {
font-size: 14px;
}
/* ---- purchase modal 568px: レイアウト変更 ---- */
/* panels: 2列 → 縦積み */
.pmc-panels {
flex-direction: column;
height: auto;
}
.pmc-panel {
height: 160px;
}
/* member grid: 2列 → 1列 */
.pmc-member-grid {
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 20px;
}
/* pre-row: テキストをボトムに集約、グラデーションを縦方向に変更 */
.pmc-pre-row {
height: 220px;
}
.pmc-pre-body {
width: 100%;
top: auto;
bottom: 0;
left: 0;
right: 0;
justify-content: flex-end;
}
.pmc-pre-row--right .pmc-pre-body {
right: 0;
left: 0;
}
.pmc-pre-row--left .pmc-pre-body {
left: 0;
right: 0;
}
.pmc-pre-row--right .pmc-pre-grad,
.pmc-pre-row--left .pmc-pre-grad {
background: linear-gradient(to bottom, rgba(39, 50, 64, 0.1) 0%, rgba(39, 50, 64, 0.75) 45%, rgba(39, 50, 64, 0.98) 100%);
}
.footer-logo {
margin: 0 auto 20px;
}
.footer-logo img {
max-width: 200px;
}
/* ── guide-slider: SP ではアクティブスライドのテキストを常時表示 ── */
#guide .guide-slide.slick-current .guide-slide__overlay>div {
max-height: 250px;
}
#guide .guide-slide.slick-current .guide-slide__heading,
#guide .guide-slide.slick-current .guide-slide__body {
display: block;
opacity: 1;
transform: translateY(0);
}
}
/* ── JS検出: touchstart後に付与される .is-touch クラスで hover を完全無効化 ── */
.is-touch .btn-outline:hover {
background-color: transparent;
border-color: var(--color-white);
}
.is-touch .btn-outline:hover .btn-arrow {
content: normal;
transform: none;
}
/* ── タッチデバイス: transition無効化 + 300ms遅延防止 ── */
@media (hover: none),
(max-width: 568px) {
.btn-main,
.btn-outline,
.btn-solid,
.guide-slide__btn,
.sfb,
.column-link-item,
.news-card,
.popular-item,
.pickup-item,
.banner-slide,
.faq-item,
.guide-slide,
.featured-icon-note__link,
.footer-nav-col ul li a,
.footer-products-brands li a,
.footer-sub-links a,
.nav-dd-side-item {
transition: none;
touch-action: manipulation;
}
.nav-dd-side-item:hover {
background: transparent;
color: var(--color-text);
transform: none;
}
}
/* ============================================================
商品詳細ページ (shop/gibbon/) — section by section
============================================================ */
/* --- 下層KV (KV_2枚Ver) --- */
.lower-kv {
position: relative;
width: 100%;
min-height: 400px;
display: flex;
align-items: center;
overflow: hidden;
}
.lower-kv__bg {
position: absolute;
inset: 0;
display: flex;
z-index: 0;
}
.lower-kv__img {
position: relative;
flex: 1 1 50%;
min-width: 0;
overflow: hidden;
background: var(--color-black);
}
.lower-kv__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lower-kv__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
.lower-kv .container {
position: relative;
z-index: 2;
}
.lower-kv__title {
color: var(--color-white);
line-height: 1.5;
}
.lower-kv__cat {
font-family: var(--font-serif);
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
}
.lower-kv__en {
font-family: var(--font-en);
font-weight: 400;
font-size: 24px;
color: var(--color-accent);
}
.lower-kv__name {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px 16px;
margin-top: 4px;
}
.lower-kv__name-en {
font-family: var(--font-serif);
font-weight: 600;
font-size: 46px;
letter-spacing: 2.3px;
}
.lower-kv__name-jp {
font-family: var(--font-ja);
font-weight: 600;
font-size: 24px;
}
/* --- パンくず --- */
.breadcrumb {
padding: 14px 0;
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
}
.breadcrumb__item {
display: inline-flex;
align-items: center;
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
line-height: 1.7;
color: var(--color-black);
}
.breadcrumb__item a {
color: var(--color-black);
text-decoration: none;
}
.breadcrumb__item[aria-current="page"] {
color: var(--color-black);
}
.breadcrumb__item:not(:last-child)::after {
content: "";
display: inline-block;
width: 7px;
height: 7px;
margin: 0 12px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
opacity: 0.6;
}
@media (hover: hover) {
.breadcrumb__item a:hover {
text-decoration: underline;
}
}
@media (max-width: 896px) {
.lower-kv {
min-height: 200px;
}
.lower-kv__cat {
font-size: 16px;
}
.lower-kv__en {
font-size: 18px;
}
.lower-kv__name-en {
font-size: 32px;
letter-spacing: 1.5px;
}
.lower-kv__name-jp {
font-size: 18px;
}
}
@media (max-width: 568px) {
.lower-kv {
min-height: 150px;
}
.lower-kv__cat {
font-size: 13px;
}
.lower-kv__en {
font-size: 15px;
}
.lower-kv__name-en {
font-size: 26px;
letter-spacing: 1px;
}
.lower-kv__name-jp {
font-size: 15px;
}
.breadcrumb {
padding: 10px 0;
}
.breadcrumb__item,
.breadcrumb__item a {
font-size: 12px;
}
.breadcrumb__item:not(:last-child)::after {
margin: 0 8px;
width: 6px;
height: 6px;
}
}
/* ============================================================
詳細上部: 商品ギャラリー + 購入ボックス
============================================================ */
.detail-top {
padding: 2.5rem 0 3.75rem;
}
.detail-top__layout {
display: flex;
align-items: flex-start;
gap: 30px 60px;
}
.detail-gallery {
flex: 1 1 0;
min-width: 0;
position: sticky;
top: 100px;
align-self: flex-start;
width: calc(55% - 30px);
}
.detail-buy {
flex: 0 0 42%;
max-width: 600px;
min-width: 0;
width: calc(45% - 30px);
}
/* --- ギャラリー --- */
.detail-gallery__features {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.detail-gallery__feature {
width: 60px;
height: max-content;
}
.detail-gallery__feature img {
width: 100%;
height: 100%;
display: block;
object-position: top center;
}
.detail-gallery__main {
width: 100%;
background: transparent;
border-radius: 4px;
overflow: hidden;
}
/* slick初期化前に全スライドが縦並びになるチラつきを防ぐ */
.js-gallery-slider:not(.slick-initialized) .detail-gallery__slide + .detail-gallery__slide {
display: none;
}
.detail-gallery__main-img {
width: 100%;
aspect-ratio: 4 / 3;
/* 幅が広いビューでも高さは480pxまで（4/3とのmin） */
max-height: 480px;
}
.detail-gallery__main-img img {
width: 100%;
height: 100%;
/* 商品全体が切れずに収まるように contain（余白は親の背景色） */
object-fit: contain;
display: block;
}
/* メイン画像下のページャ（feat-pager デザインを踏襲） */
.detail-gallery__pager {
margin: 14px 0 4px;
}
.detail-gallery__thumbs {
justify-content: center;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 0.75rem;
}
.detail-gallery__thumb {
position: relative;
width: calc((100% - 2.5rem) / 5);
aspect-ratio: 1 / 1;
background: #fff !important;
border: 0;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
}
.detail-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.detail-gallery__thumb.is-active {
border: 1px solid var(--color-main);
border-color: var(--color-main);
}
.detail-gallery__thumb--movie::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.detail-gallery__movie-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--color-white);
font-family: var(--font-en);
font-size: 12px;
z-index: 1;
}
.detail-gallery__feature-link {
margin-top: 1.25rem;
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
color: var(--color-text);
}
/* 「機能紹介」下の下線: 左頭をアクセント色(黄 64/820≒7.8%)、残りをメインカラー (Figma 1178-17526) */
.detail-gallery__feature-line {
display: block;
width: 100%;
height: 2px;
margin: 0.5rem 0 1.25rem;
background: linear-gradient(
to right,
var(--color-accent) 0,
var(--color-accent) 7.8%,
var(--color-main) 7.8%,
var(--color-main) 100%
);
}
.opt-card__detail-i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid currentColor;
font-size: 10px;
font-style: italic;
line-height: 1;
}
.detail-gallery__lifestyle {
width: 100%;
margin-top: 1.25rem;
border-radius: 4px;
overflow: hidden;
}
.detail-gallery__lifestyle img {
width: 100%;
height: auto;
display: block;
}
.detail-gallery__spec-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
margin-top: 1.25rem;
padding: 0.875rem 1.25rem;
background: var(--color-main);
color: var(--color-white);
font-family: var(--font-ja);
font-size: 16px;
font-weight: 700;
text-decoration: none;
border-radius: 5px;
}
.detail-gallery__spec-arrow {
width: 8px;
height: 8px;
border-top: 2px solid var(--color-white);
border-right: 2px solid var(--color-white);
transform: rotate(135deg);
}
/* --- 購入ボックス --- */
.detail-buy__brand {
text-align: left;
margin-bottom: 0.75rem;
}
.detail-buy__brand img {
height: 32px;
width: auto;
display: inline-block;
}
.detail-buy__name {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.25rem 1rem;
}
.detail-buy__name-en {
font-family: var(--font-en);
font-weight: 500;
font-size: 36px;
line-height: 1.3;
color: var(--color-text);
}
.detail-buy__name-jp {
font-family: var(--font-ja);
font-weight: 600;
font-size: 20px;
color: var(--color-text);
}
.detail-buy__price {
margin-top: 0.75rem;
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
.detail-buy__price-num {
font-family: var(--font-en);
font-weight: 500;
font-size: 30px;
line-height: 1.2;
color: var(--color-text);
}
.detail-buy__price-yen {
font-family: var(--font-ja);
font-size: 20px;
font-weight: 700;
margin-left: 0.15em;
color: var(--color-text);
}
.detail-buy__price-tax {
font-family: var(--font-ja);
font-weight: 700;
font-size: 14px;
color: var(--color-text);
margin-left: 0.25em;
}
.detail-buy__price-notax {
font-size: 13px;
color: var(--color-taupe);
margin-top: 0.25rem;
}
.detail-buy__campaign-text {
font-size: 16px;
line-height: 1.6;
margin-top: 8px;
color: var(--color-text, #222);
}
.detail-buy__block {
margin-top: 1.75rem;
}
.detail-buy__label {
display: block;
font-family: var(--font-ja);
font-size: 16px;
font-weight: 600;
color: var(--color-text);
margin-bottom: 0.75rem;
}
.detail-buy__lead {
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
color: var(--color-text);
line-height: 1.7;
text-align: center;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
margin: 0 0 1.25rem;
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
}
/* カラー */
.detail-color {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 1rem;
}
.detail-color__swatches {
display: inline-flex;
gap: 0.5rem;
}
.detail-color__swatch {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--sw);
border: 1px solid var(--color-sub);
cursor: pointer;
padding: 0;
position: relative;
}
.detail-color__swatch.is-active {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-main);
}
.detail-color__name {
font-family: var(--font-en);
font-weight: 500;
font-size: 16px;
color: var(--color-text);
}
/* パッケージ (Figma 1482-922 準拠: 左ラベル｜右コンテンツ 横並び) */
.detail-pkg {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem 1.875rem;
}
.detail-pkg>.detail-buy__label {
flex: 0 0 auto;
padding-top: 0.5rem;
margin-bottom: 0;
}
.detail-pkg__content {
flex: 1 1 0;
min-width: 0;
}
.detail-pkg__tabs {
display: flex;
gap: 0.5rem;
}
.detail-pkg__tab {
flex: 0 0 auto;
padding: 8px 20px;
border: 1px solid var(--color-main);
background: var(--color-white);
color: var(--color-main);
font-family: var(--font-en);
font-size: 16px;
font-weight: 500;
line-height: 1.5;
border-radius: 3px;
cursor: pointer;
}
.detail-pkg__tab.is-active,
.detail-pkg__tab:has(input:checked) {
background: var(--color-main);
color: var(--color-accent);
}
.detail-pkg__panel {
margin-top: 1rem;
padding: 0;
border: none;
background: none;
}
.detail-pkg__panel-title {
font-family: var(--font-en);
color: var(--color-text);
line-height: 1.5;
}
.detail-pkg__panel-title-en {
font-family: var(--font-en);
font-weight: 500;
font-size: 14px;
}
.detail-pkg__panel-title-ja {
font-family: var(--font-en);
font-weight: 700;
font-size: 12px;
}
.detail-pkg__panel-body {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin-top: 0.25rem;
}
@media (max-width: 568px) {
.detail-pkg {
flex-direction: column;
gap: 0.75rem;
}
.detail-pkg>.detail-buy__label {
padding-top: 0;
}
}
/* 数量 (Figma 1482-1086 準拠: 左ラベル｜右select 横並び) */
.detail-qty {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.875rem;
}
.detail-qty>.detail-buy__label {
flex: 0 0 auto;
margin-bottom: 0;
}
.detail-qty__control {
display: inline-flex;
align-items: center;
}
.detail-qty__select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 120px;
height: 40px;
padding: 0 36px 0 16px;
border: 1px solid var(--color-main);
border-radius: 5px;
background: var(--color-white) url("data:image/svg+xml;utf8,") no-repeat right 14px center;
background-size: 10px 6px;
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
color: var(--color-text);
cursor: pointer;
}
.detail-qty__select:focus-visible {
outline: 2px solid var(--color-main);
outline-offset: 2px;
}
/* オプションカード (アクセサリー/アパレル/保険) — Figma 1482-904/1050 準拠 */
.opt-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
margin: 0;
}
.opt-card {
background-color: var(--color-white);
border-radius: 5px;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 20px 30px;
margin-bottom: 20px;
}
.opt-card__name {
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
}
/* opt-card のボタンエリア全体を白カード化(border-radius 5px + sub borderで囲み、内部のボタンは透過で active時に紺塗りで切替) */
.opt-card__choice {
display: flex;
gap: 20px;
align-items: stretch;
background: var(--color-white);
overflow: hidden;
}
.opt-card__btn {
position: relative;
cursor: pointer;
background: transparent;
border: 0;
margin: 0;
border-radius: 5px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s, color 0.2s;
}
.opt-card__btn--no {
flex: 0 0 120px;
min-height: 110px;
border: 1px solid var(--color-main);
}
.opt-card__btn--yes {
border: 1px solid var(--color-main);
flex: 1 1 0;
min-width: 0;
gap: 1rem;
align-items: stretch;
justify-content: flex-start;
padding: 1rem;
}
.opt-card__btn-label {
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
color: var(--color-main);
line-height: 1.5;
}
.opt-card__btn-thumb {
flex: 0 0 90px;
width: 90px;
align-self: center;
aspect-ratio: 1 / 1;
border-radius: 4px;
overflow: hidden;
background: var(--color-bg-light);
}
.opt-card__btn-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.opt-card__btn-body {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
justify-content: flex-start;
}
.opt-card__btn-title {
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
color: var(--color-main);
line-height: 1.5;
}
.opt-card__btn-product {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
color: var(--color-text);
line-height: 1.7;
}
.opt-card__btn-price {
display: block;
margin-top: auto;
text-align: right;
font-family: var(--font-en);
font-weight: 500;
font-size: 18px;
color: var(--color-text);
}
.opt-card__btn-price-num {
font-family: var(--font-en);
font-weight: 500;
font-size: 18px;
}
.opt-card__btn-price-tax {
font-family: var(--font-ja);
font-weight: 700;
font-size: 12px;
margin-left: 0.25em;
}
/* 「購入しない」選択時 = 左ボタンが --color-main 塗りつぶし（radio の checked のみ。HTML の is-active は付けっぱなしでも反映しない） */
.opt-card__btn--no:has(input:checked) {
background: var(--color-main);
}
.opt-card__btn--no:has(input:checked) .opt-card__btn-label {
color: var(--color-white);
}
/* 「購入する」選択時など未選択 = 白背景で選択側と区別 */
.opt-card__btn--no:not(:has(input:checked)) {
background: var(--color-white);
}
.opt-card__btn--no:not(:has(input:checked)) .opt-card__btn-label {
color: var(--color-main);
}
/* 「購入する」選択時 = 右ボタンが --color-main 塗りつぶし、テキスト=黄、価格=黄 */
.opt-card__btn--yes:has(input:checked) {
background: var(--color-main);
border-left-color: var(--color-main);
}
.opt-card__btn--yes:has(input:checked) .opt-card__btn-title {
color: var(--color-accent);
}
.opt-card__btn--yes:has(input:checked) .opt-card__btn-product {
color: var(--color-accent);
}
.opt-card__btn--yes:has(input:checked) .opt-card__btn-price,
.opt-card__btn--yes:has(input:checked) .opt-card__btn-price-num,
.opt-card__btn--yes:has(input:checked) .opt-card__btn-price-tax {
color: var(--color-accent);
}
.opt-card__detail {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: transparent;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
color: var(--color-text);
text-decoration: underline;
}
.opt-card__detail-icon {
width: 16px;
height: 16px;
display: block;
flex-shrink: 0;
}
/* 保険等 (#lead-ins) のopt-card: Figma 1279-15692 準拠。
サムネイル無し・左右ボタン等幅(50/50)・「購入しない」選択時の文字はアクセント色(黄) */
.opt-list--ins .opt-card__btn--no {
flex: 1 1 0;
}
.opt-list--ins .opt-card__btn--no:has(input:checked) .opt-card__btn-label {
color: var(--color-accent);
}
/* 選択内容サマリー — Figma 1482-1103 準拠: 2列grid・横罫線+列間の縦罫線 (--color-sub) */
.detail-summary {
margin-top: 1.75rem;
}
.detail-summary__list {
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
border-bottom: 1px solid var(--color-sub);
}
/* gap を使わず各セルの padding で間隔を作り、縦罫線を行間で途切れさせない */
.detail-summary__row {
display: grid;
grid-template-columns: 9.5em 1fr;
align-items: stretch;
border-top: 1px solid var(--color-sub);
}
/* 列間の縦罫線は上3行(パッケージ/カラー/アクセサリー)のみ。
アパレル・グッズ/保険等 には付けない (Figma 1482-1104 準拠)。
border-right ではなく背景で1pxを描き、行高の端数で消えないようにする */
.detail-summary__row:nth-child(-n+3) {
background-image: linear-gradient(var(--color-sub), var(--color-sub));
background-repeat: no-repeat;
background-size: 1px 100%;
background-position: calc(9.5em - 1px) 0;
}
.detail-summary__row .detail-summary__label {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
color: var(--color-text);
line-height: 1.7;
margin: 0;
padding: 1rem 1.25rem 1rem 0;
}
.detail-summary__row .detail-summary__items {
margin: 0;
padding: 1rem 0 1rem 1.25rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 0.4rem 1rem;
}
.detail-summary__item {
display: contents;
}
.detail-summary__item-name {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
color: var(--color-text);
line-height: 1.7;
}
.detail-summary__item-price {
font-family: var(--font-en);
font-weight: 500;
font-size: 16px;
color: var(--color-text);
text-align: right;
white-space: nowrap;
}
.detail-summary__item-tax {
font-family: var(--font-ja);
font-weight: 400;
font-size: 12px;
margin-left: 0.25em;
}
.detail-summary__item:not(:has(.detail-summary__item-price)) .detail-summary__item-name {
grid-column: 1 / -1;
}
/* 合計金額 — Figma 1482-1131 準拠: 1行 / 白カード */
.detail-summary__total {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 20px 0 0;
padding: 1rem 1.5rem;
background: var(--color-white);
border-radius: 5px;
}
.detail-summary__total-label {
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
color: var(--color-text);
line-height: 1.7;
}
.detail-summary__total-price {
flex: 1 1 0;
min-width: 0;
text-align: right;
display: inline-flex;
align-items: baseline;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0 0.25rem;
font-family: var(--font-ja);
font-weight: 700;
color: var(--color-text);
}
.detail-summary__total-num {
font-family: var(--font-en);
font-weight: 500;
font-size: 24px;
color: var(--color-text);
}
.detail-summary__total-tax {
font-family: var(--font-ja);
font-weight: 700;
font-size: 14px;
}
.detail-summary__total-notax {
font-family: var(--font-ja);
font-weight: 400;
font-size: 12px;
color: var(--color-taupe);
margin-left: 0.5rem;
}
/* アクション */
.detail-buy__actions {
margin-top: 1.75rem;
}
.detail-buy__confirm-title {
font-family: var(--font-ja);
font-size: 14px;
font-weight: 600;
color: var(--color-text);
text-align: center;
margin-bottom: 10px;
}
.detail-buy__confirm-links {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 20px;
margin-bottom: 1.25rem;
}
.detail-buy__confirm-links a {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--color-main);
text-decoration: none;
}
.detail-buy__confirm-icon {
flex-shrink: 0;
display: block;
width: 20px;
height: 20px;
}
.detail-buy__confirm-icon img {
display: block;
width: 100%;
height: 100%;
}
/* ガイドボタンは共通の btn-main + btn-guide で実装 (CSSは上部 Buttons セクション) */
/* カートボタン: アイコン+テキストを中央寄せ / 横全幅 (Figma 1482-1136) */
.detail-buy__cart {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
min-height: 60px;
margin-top: 1rem;
border: none;
background: var(--color-main);
color: var(--color-white);
font-family: var(--font-ja);
font-size: 20px;
font-weight: 700;
border-radius: 5px;
cursor: pointer;
}
.detail-buy__cart-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
}
.detail-buy__cart-icon img {
display: block;
width: auto;
height: 100%;
}
@media (hover: hover) {
.detail-gallery__spec-link:hover,
.detail-buy__cart:hover {
opacity: 0.85;
}
}
/* ============================================================
商品の特徴 (detail-features)
============================================================ */
.detail-features {
background: transparent;
padding: 5rem 0 0;
border-top: 1px solid var(--color-sub);
}
/* セクションタイトル: 「商品の特徴」上 / 「— FEATURES」下 (縦並び) */
.feat-sec-title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 2.5rem;
}
.feat-sec-title__ja {
font-family: var(--font-serif);
font-weight: 400;
font-size: 36px;
letter-spacing: 1.8px;
line-height: 1.5;
color: var(--color-black);
}
.feat-sec-title__sub {
display: inline-flex;
align-items: center;
gap: 1.25rem;
}
.feat-sec-title__line {
position: relative;
display: inline-block;
width: 30px;
height: 1px;
}
.feat-sec-title__line-navy {
position: absolute;
inset: 0;
background: var(--color-main);
}
.feat-sec-title__line-yellow {
position: absolute;
left: 20px;
top: 0;
width: 10px;
height: 1px;
background: var(--color-accent);
}
.feat-sec-title__en {
font-family: var(--font-en);
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: var(--color-black);
}
/* 共通サブ見出し (ja + en黄色ハイライト) */
.feat-heading {
margin: 0 0 1.5rem;
}
.feat-heading__ja {
display: block;
font-family: var(--font-serif);
font-weight: 600;
font-size: 30px;
letter-spacing: 0.75px;
line-height: 1.5;
color: var(--color-black);
}
.feat-heading__en {
display: inline-block;
margin-top: 0.25rem;
font-family: var(--font-en);
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: var(--color-main);
background: linear-gradient(transparent 60%, var(--color-accent) 60%);
padding: 0 0.15em;
}
/* ヒーロー (左テキスト / 右画像) */
.feat-hero {
display: flex;
align-items: flex-start;
gap: 2rem;
margin-bottom: 3.5rem;
}
.feat-hero__text {
flex: 1 1 0;
min-width: 0;
}
.feat-hero__brand {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.25rem 1rem;
margin: 1rem 0 0;
}
.feat-hero__brand-en {
font-family: var(--font-en);
font-weight: 500;
font-size: 60px;
line-height: 1.2;
color: var(--color-text);
}
.feat-hero__brand-jp {
font-family: var(--font-ja);
font-weight: 600;
font-size: 30px;
color: var(--color-text);
}
.feat-hero__catch {
font-family: var(--font-serif);
font-weight: 600;
font-size: 30px;
letter-spacing: 0.75px;
line-height: 1.7;
color: var(--color-text);
margin: 0.75rem 0 0;
}
.feat-hero__body {
font-family: var(--font-ja);
font-weight: 400;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
margin: 0.75rem 0 0;
}
.feat-hero__note {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin: 0.5rem 0 0;
}
.feat-hero__img {
flex: 0 0 53%;
max-width: 53%;
margin: 0;
aspect-ratio: 842 / 473;
overflow: hidden;
}
.feat-hero__img img,
.feat-hero__img video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* WHO RIDES 見出し */
.feat-who-heading {
margin: 0 0 1.5rem;
}
/* WHO RIDES — 4枚グリッド (画面全幅 / 4枚等幅密着 / キャプション右下白) */
.feat-riders {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 0;
margin: 0 0 4rem;
}
.feat-rider {
position: relative;
aspect-ratio: 428 / 428;
overflow: hidden;
background: var(--color-main);
margin: 0;
}
.feat-rider__img {
position: absolute;
inset: 0;
}
.feat-rider__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feat-rider__cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 5rem 1.25rem 1.25rem;
text-align: right;
color: var(--color-white);
background: linear-gradient(to top, var(--color-main), rgba(39, 50, 64, 0));
}
.feat-rider__title {
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.5;
color: var(--color-white);
margin: 0;
}
.feat-rider__note {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
line-height: 1.7;
color: var(--color-white);
margin: 0.25rem 0 0;
}
/* URBAN DAYS */
.feat-urban {
display: flex;
align-items: stretch;
gap: 2.5rem;
padding-bottom: 4rem;
}
.feat-urban__imgs {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: stretch;
gap: 0;
}
.feat-urban__img {
margin: 0;
flex: 1 1 0;
min-width: 0;
align-self: stretch;
overflow: hidden;
}
.feat-urban__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feat-urban__text {
flex: 0 0 38%;
max-width: 38%;
padding-top: 1rem;
}
.feat-urban__lead {
font-family: var(--font-ja);
font-weight: 400;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
margin: 0 0 1.5rem;
}
.feat-urban__points {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 0;
margin: 0;
}
.feat-point {
position: relative;
}
.feat-point__marker {
position: absolute;
left: 0;
top: 0.75em;
width: 30px;
height: 1px;
background: var(--color-main);
}
.feat-point__marker::after {
content: "";
position: absolute;
left: 20px;
top: 0;
width: 10px;
height: 1px;
background: var(--color-accent);
}
.feat-point__small {
font-family: var(--font-ja);
font-weight: 600;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
}
.feat-point__big {
font-family: var(--font-ja);
font-weight: 600;
font-size: 22px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
}
/* 特徴スライダー (画面全幅 / 5枚 / ページャー上中央) */
.feat-slider-wrap {
padding-bottom: 4rem;
}
.feat-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: 0 0 -10px;
position: relative;
z-index: 1;
}
/* guide-pager (home) と同一の左右ボタン: 40px円 / アクセント背景 / 12px chevron */
.feat-pager__btn {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: var(--color-accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.feat-pager__btn svg {
width: 12px;
height: 12px;
display: block;
}
.feat-pager__count {
font-family: var(--font-en);
font-weight: 400;
font-size: 16px;
line-height: 1.5;
color: var(--color-black);
min-width: 56px;
text-align: center;
}
.feat-slider {
scrollbar-width: none;
}
.feat-slider::-webkit-scrollbar {
display: none;
}
/* slick: スライド幅は slick が制御。track を flex にしてカード高さを揃える */
.feat-slider .slick-track {
display: flex;
}
.feat-slider .slick-slide {
height: auto;
margin: 0 2.5px; /* 旧 gap:5px 相当 */
}
.feat-card {
height: 100%;
background: var(--color-white);
overflow: hidden;
}
.feat-card__media {
position: relative;
aspect-ratio: 470 / 352.5;
margin: 0;
overflow: hidden;
}
.feat-card__img {
position: absolute;
inset: 0;
}
.feat-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.feat-card__label {
position: absolute;
left: 0;
right: 0;
top: 0;
display: flex;
align-items: center;
padding: 20px 30px;
background: rgba(39, 50, 64, 0.8);
color: var(--color-white);
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1;
}
.feat-card__body {
padding: 1rem 1.25rem 1.5rem;
}
.feat-card__title {
font-family: var(--font-serif);
font-weight: 600;
font-size: 20px;
letter-spacing: 0.5px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
}
.feat-card__desc {
font-family: var(--font-ja);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
margin: 0.25rem 0 0;
}
/* --- 詳細上部 レスポンシブ --- */
@media (max-width: 896px) {
.detail-gallery__thumbs {justify-content: flex-start;}
.detail-top__layout {
flex-direction: column;
gap: 2.5rem;
}
.detail-gallery {
position: static;
top: auto;
width: 100%;
}
.detail-buy {
flex-basis: auto;
max-width: none;
width: 100%;
}
.detail-buy__name-en {
font-size: 28px;
}
.detail-gallery__thumb {
width: calc((100% - 2rem) / 5);
}
}
@media (max-width: 568px) {
.detail-top {
padding: 1.5rem 0 2.5rem;
}
.detail-gallery__features {
gap: 20px 10px;
margin-bottom: 20px;
}
.detail-gallery__feature {
width: 38px;
height: 38px;
}
.detail-gallery__thumb {
width: calc((100% - 30px) / 4);
}
.detail-buy__name-en {
font-size: 20px;
}
.detail-buy__name-jp {
font-size: 14px;
}
.detail-buy__price-num {
font-size: 20px;
}
.detail-buy__price-yen {
font-size: 14px;
}
/* SP tidy: 過大な見出し/補足のサイズ調整 */
.detail-buy__price-tax {
font-size: 11px;
}
.detail-buy__price-notax {
font-size: 11px;
}
.detail-buy__campaign-text {
font-size: 12px;
}
.detail-buy__label {
font-size: 14px;
margin-bottom: 0.5rem;
}
.detail-buy__lead {
font-size: 14px;
padding-bottom: 0.5rem;
margin: 0 0 1rem;
}
.detail-buy__block {
margin-top: 1.25rem;
}
.opt-card {
padding: 16px 20px;
margin-bottom: 16px;
}
.opt-card__name {
font-size: 14px;
}
.opt-card__thumb {
flex-basis: 80px;
width: 80px;
}
/* opt-card: SPでは「購入しない / 購入する」を縦並びに */
.opt-card__choice {
flex-direction: column;
gap: 10px;
}
.opt-card__choice .opt-card__btn {
width: 100%;
flex: 0 0 auto;
}
.opt-card__btn {
padding: 0.75rem;
}
.opt-card__btn--no {
min-height: 48px;
}
.opt-card__btn-label {
font-size: 14px;
}
.opt-card__btn-title {
font-size: 14px;
}
.opt-card__btn-product {
font-size: 12px;
}
.opt-card__btn-price,
.opt-card__btn-price-num {
font-size: 16px;
}
.opt-card__btn-thumb {
flex: 0 0 72px;
width: 72px;
}
/* 選択内容サマリー: SPでは label を上、内容を下にした縦並びに */
.detail-summary__row {
grid-template-columns: 1fr;
}
.detail-summary__row:nth-child(-n+3) {
background-image: none; /* 縦並び時は列間の縦罫線を出さない */
}
.detail-summary__row .detail-summary__label {
font-weight: 600;
font-size: 13px;
padding: 0.6rem 0 0;
}
.detail-summary__row .detail-summary__items {
padding: 0.2rem 0 0.6rem;
}
.detail-summary__item-name {
font-size: 13px;
}
.detail-summary__item-price {
font-size: 14px;
}
.detail-summary__total {
padding: 0.75rem 1rem;
margin-top: 1rem;
}
.detail-summary__total-label {
font-size: 14px;
}
.detail-summary__total-num {
font-size: 20px;
}
.detail-summary__total-tax {
font-size: 12px;
}
.detail-buy__actions {
margin-top: 1.25rem;
}
.detail-buy__cart {
min-height: 48px;
font-size: 16px;
gap: 0.5rem;
}
.detail-buy__cart-icon {
height: 20px;
}
.detail-buy__confirm-title {
font-size: 12px;
}
.detail-buy__confirm-links a {
font-size: 11px;
}
}
@media (hover: hover) {
.feat-pager__btn:hover {
opacity: 0.8;
}
}
/* --- 商品の特徴 レスポンシブ --- */
@media (max-width: 896px) {
.detail-features {
padding-top: 3rem;
}
.feat-sec-title__ja {
font-size: 28px;
}
.feat-hero {
flex-direction: column;
gap: 1.5rem;
}
.feat-hero__img {
flex-basis: auto;
max-width: 100%;
width: 100%;
}
.feat-hero__brand-en {
font-size: 46px;
}
.feat-hero__brand-jp {
font-size: 24px;
}
.feat-hero__catch {
font-size: 24px;
}
.feat-riders {
grid-template-columns: repeat(2, 1fr);
}
.feat-heading__ja {
font-size: 24px;
}
.feat-urban {
flex-direction: column;
align-items: stretch;
gap: 1.5rem;
}
.feat-urban__text {
flex-basis: auto;
max-width: 100%;
padding-top: 0;
}
.feat-point__big {
font-size: 20px;
}
}
@media (max-width: 568px) {
.feat-sec-title {
gap: 0.75rem;
margin-bottom: 1.75rem;
}
.feat-sec-title__ja {
font-size: 24px;
}
.feat-sec-title__en {
font-size: 16px;
}
.feat-hero__brand-en {
font-size: 38px;
}
.feat-hero__brand-jp {
font-size: 20px;
}
.feat-hero__catch {
font-size: 18px;
}
.feat-hero__body {
font-size: 16px;
}
.feat-rider__title {
font-size: 16px;
}
.feat-heading__ja {
font-size: 18px;
}
.feat-heading__en {
font-size: 16px;
}
.feat-urban__lead {
font-size: 16px;
}
.feat-point__big {
font-size: 16px;
}
.feat-card__label {
font-size: 17px;
padding: 0.75rem 1rem;
}
.feat-card__title {
font-size: 16px;
}
.feat-card__desc {
font-size: 15px;
}
}
/* ============================================================
商品スペックと寸法 (detail-spec)
============================================================ */
.detail-spec {
background: var(--color-white);
padding: 4rem 0;
}
.spec-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem 1.5rem;
margin-bottom: 2.5rem;
}
.spec-catalog-btn {
flex: 0 0 auto;
}
.spec-main {
display: flex;
align-items: flex-start;
gap: 3rem;
}
.spec-left {
flex: 0 0 32%;
max-width: 32%;
min-width: 0;
}
.spec-right {
flex: 1 1 0;
min-width: 0;
}
.spec-subtitle {
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.5;
color: var(--color-text);
margin-bottom: 1rem;
}
.spec-left .spec-subtitle {
margin-top: 1.75rem;
}
.spec-compare__label {
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
line-height: 1.5;
text-align: center;
margin-bottom: 0.75rem;
color: var(--color-black);
display: none !important;
}
.spec-compare__img {
width: 100%;
}
.spec-compare__img img {
width: 100%;
height: auto;
display: block;
}
/* スペック表 */
.spec-size-table,
.spec-col {
width: 100%;
}
.spec-table {
display: flex;
flex-direction: column;
}
/* 車体色：2カラム分の幅を持つ先頭行 */
.spec-table__lead {
width: 100%;
}
/* 残りの項目は2カラム。カラム間に隙間なし（Figma準拠） */
.spec-table__grid {
display: flex;
gap: 0;
}
.spec-col {
flex: 1 1 0;
min-width: 0;
}
.spec-row {
display: flex;
align-items: stretch;
font-size: 14px;
line-height: 1.5;
}
/* ゼブラ：行ごとに背景を交互（奇数行 ベージュ / 偶数行 白）。
dt・dd は同じ行背景を共有し、列ごとの色分けはしない（Figma準拠） */
.spec-row:nth-child(odd) {
background: var(--color-table-stripe);
}
.spec-row:nth-child(even) {
background: var(--color-white);
}
/* product spec：左右カラムで開始色を1つずらす（市松模様）。
隙間/罫線なしでも境界が見えるようにするためのFigma仕様 */
.spec-table__grid .spec-col:nth-child(1) .spec-row:nth-child(odd),
.spec-table__grid .spec-col:nth-child(2) .spec-row:nth-child(even) {
background: var(--color-white);
}
.spec-table__grid .spec-col:nth-child(1) .spec-row:nth-child(even),
.spec-table__grid .spec-col:nth-child(2) .spec-row:nth-child(odd) {
background: var(--color-table-stripe);
}
.spec-row dt {
flex: 0 0 42%;
padding: 8px 20px;
margin: 0;
color: var(--color-black);
font-weight: 600;
}
/* 先頭行は表全体の幅を持つため、dt幅はカラム行の半分（≒21%）にして
下のカラムのdtと左端・右端を揃える */
.spec-table__lead .spec-row dt {
flex-basis: 21%;
}
.spec-row dd {
flex: 1 1 0;
min-width: 0;
padding: 8px 20px;
margin: 0;
color: var(--color-black);
font-weight: 400;
word-break: break-word;
}
.spec-notes {
display: flex;
align-items: flex-start;
gap: 0.4em;
margin-top: 1.25rem;
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
line-height: 1.8;
color: var(--color-black);
}
/* ※1 と本文を横並びに（※1は折り返さず固定幅） */
.spec-notes__mark {
flex-shrink: 0;
margin: 0;
}
.spec-notes > p:last-child {
flex: 1;
min-width: 0;
margin: 0;
}
/* 実走行距離 */
.spec-real {
display: flex;
align-items: center;
gap: 3rem;
margin-top: 4rem;
}
.spec-real__text {
flex: 0 0 50%;
max-width: 50%;
min-width: 0;
}
.spec-real__catch {
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.7;
color: var(--color-text);
margin: 1.25rem 0;
}
.spec-real__body {
font-size: 16px;
line-height: 1.9;
}
.spec-real__slider-area {
flex: 1 1 0;
min-width: 0;
}
.spec-real__slider {
scrollbar-width: none;
margin-bottom: 10px!important;
}
.spec-real__slider::-webkit-scrollbar {
display: none;
}
/* slick: スライド幅は slick が制御。track を flex にしてカード高さを揃える */
.spec-real__slider .slick-track {
display: flex;
}
.spec-real__slider .slick-slide {
height: auto;
margin: 0 8px; /* 旧 gap:1rem 相当 */
}
.spec-real__card {
position: relative;
height: 100%;
border-radius: 4px;
overflow: hidden;
}
.spec-real__card-img {
aspect-ratio: 3 / 2;
}
.spec-real__card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.spec-real__card-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.5rem 1rem 0.75rem;
text-align: right;
color: var(--color-white);
font-size: 14px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.spec-real__pager {
justify-content: flex-end;
margin-top: 1.5rem;
}
.spec-real__note {
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
text-align: right;
margin-top: 0;
}
/* --- スペック レスポンシブ --- */
@media (max-width: 896px) {
.spec-main {
flex-direction: column;
gap: 2.5rem;
}
.spec-left,
.spec-right {
flex-basis: auto;
max-width: none;
width: 100%;
}
.spec-compare__img {
max-width: 480px;
margin-inline: auto;
}
.spec-real {
flex-direction: column;
align-items: stretch;
gap: 2rem;
}
.spec-real__text {
flex-basis: auto;
max-width: none;
}
.spec-real__pager {
justify-content: center;
}
.spec-real__note {
text-align: left;
}
}
@media (max-width: 568px) {
.detail-spec {
padding: 2.5rem 0;
}
.spec-catalog-btn {
width: 100%;
justify-content: center;
}
.spec-table__grid {
flex-direction: column;
}
.spec-subtitle {
font-size: 17px;
}
.spec-row {
font-size: 13px;
}
.spec-row dt {
flex-basis: 40%;
padding: 0.625rem 0.75rem;
}
.spec-row dd {
padding: 0.625rem 0.75rem;
}
.spec-real__catch {
font-size: 18px;
}
}
/* ============================================================
信頼と安心 (detail-trust)
============================================================ */
/* タイトル縦積みバリアント */
.feat-sec-title--stack {
flex-wrap: wrap;
row-gap: 0.5rem;
}
.feat-sec-title--stack .feat-sec-title__ja {
flex: 0 0 100%;
}
.trust-top {
background: var(--color-bg-light);
padding: 4rem 0;
border-top: 1px solid var(--color-sub);
}
.trust-top__inner {
display: flex;
align-items: flex-start;
gap: 3rem;
}
.trust-top__head {
flex: 0 0 26%;
max-width: 26%;
min-width: 0;
}
.trust-top__lead {
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.7;
color: var(--color-text);
margin-top: 1.5rem;
}
.trust-cards {
flex: 1 1 0;
min-width: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.trust-card {
display: flex;
align-items: stretch;
gap: 1.25rem;
background: var(--color-white);
border-radius: 3px;
overflow: hidden;
min-height: 165px;
}
.trust-card__img {
flex: 0 0 110px;
width: 110px;
align-self: stretch;
background: var(--color-bg-light);
}
.trust-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.trust-card__body {
flex: 1 1 0;
min-width: 0;
padding: 1.25rem 1.25rem 1.25rem 0;
}
.trust-card__title {
font-family: var(--font-ja);
font-weight: 600;
font-size: 20px;
line-height: 1.5;
color: var(--color-black);
margin-bottom: 0.5rem;
}
.trust-card__text {
font-family: var(--font-ja);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: var(--color-black);
}
.trust-faq {
background: var(--color-white);
padding: 3rem 0;
}
@media (max-width: 896px) {
.trust-top {
padding: 3rem 0;
}
.trust-top__inner {
flex-direction: column;
gap: 2rem;
}
.trust-top__head {
flex-basis: auto;
max-width: none;
width: 100%;
}
}
@media (max-width: 568px) {
.trust-top {
padding: 2.5rem 0;
}
.trust-cards {
grid-template-columns: 1fr;
gap: 1rem;
}
/* SP: 横並びレイアウト維持（flex-direction:column は撤回） */
.trust-card {
min-height: 0;
}
.trust-card__img {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
}
.trust-card__body {
padding: 1.25rem;
}
.trust-card__title {
font-size: 18px;
}
.trust-top__lead {
font-size: 16px;
}
}
/* ============================================================
APE RIDER紹介 (detail-apeider)
============================================================ */
.apeider-related {
background: var(--color-bg-light);
padding: 3rem 0 4rem;
}
.related-grid {
display: flex;
border-top: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
margin-top: 1.5rem;
}
.related-item {
flex: 1 1 0;
min-width: 0;
border-right: 1px solid var(--color-sub);
padding: 1.5rem;
display: block;
text-decoration: none;
color: var(--color-text);
}
.related-item:last-child {
border-right: none;
}
.related-item__icons {
display: flex;
justify-content: flex-end;
gap: 0.4rem;
/* margin-bottom: 0.75rem; */
}
.related-item__icons img {
width: 28px;
height: 28px;
display: block;
}
.related-item__img {
position: relative;
aspect-ratio: 340 / 253;
margin-bottom: 1rem;
}
.related-item__img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: opacity 0.4s ease;
}
/* hover時に2枚目画像へクロスフェード (popular-grid と同方式)。
2枚目は本実装の差し替え用。画像が揃うまでは1枚目と同一のため変化なし */
.related-item__img-hover {
opacity: 0;
}
.related-item__name {
display: flex;
align-items: baseline;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
.related-item__name-en {
font-family: var(--font-en);
font-weight: 500;
font-size: 24px;
line-height: 1.5;
}
.related-item__name-jp {
font-family: var(--font-ja);
font-weight: 600;
font-size: 14px;
}
.related-item__price-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem 1rem;
flex-wrap: wrap;
border-top: 1px solid var(--color-sub);
padding-top: 0.75rem;
}
.related-item__price-num {
font-family: var(--font-en);
font-weight: 500;
font-size: 20px;
}
.related-item__price-yen {
font-weight: 700;
font-size: 14px;
}
.related-item__price-tax {
font-family: var(--font-ja);
font-weight: 700;
font-size: 12px;
}
.related-item__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-en);
font-weight: 500;
font-size: 14px;
color: var(--color-main);
white-space: nowrap;
}
.related-item__link-arrow {
width: 16px;
height: 16px;
transition: transform 0.3s;
}
@media (hover: hover) {
.related-item:hover .related-item__img-hover {
opacity: 1;
}
.related-item:hover .related-item__img-main {
opacity: 0;
}
.related-item:hover .related-item__link {
text-decoration: underline;
}
.related-item:hover .related-item__link-arrow {
transform: translateX(3px);
}
}
@media (max-width: 896px) {
.related-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: none;
}
.related-item {
border-right: 1px solid var(--color-sub);
border-bottom: 1px solid var(--color-sub);
padding: 1.25rem;
}
.related-item:nth-child(2n) {
border-right: none;
}
}
@media (max-width: 568px) {
.related-grid {
grid-template-columns: 1fr;
}
.related-item {
border-right: none;
}
.related-item__name-en {
font-size: 22px;
}
}
/* ============================================================
最近チェックした商品 (detail-checked) — pickup-item 流用
============================================================ */
.detail-checked {
padding: 4rem 0;
}
.detail-checked .feat-sec-title {
margin-bottom: 2rem;
}
/* アイコンノートは設計上PCでも表示する */
.detail-checked__note {
display: flex;
padding-top: 1.5rem;
}
@media (max-width: 896px) {
.detail-checked {
padding: 3rem 0;
}
}
@media (max-width: 568px) {
.detail-checked {
padding: 2.5rem 0;
}
}
/* ============================================================
購入ガイド (detail-guide)
============================================================ */
.detail-guide {
background: var(--color-bg-light);
padding: 4rem 0;
}
.guide-layout {
display: flex;
align-items: flex-start;
gap: 3rem;
}
.guide-intro {
flex: 0 0 32%;
max-width: 32%;
min-width: 0;
}
.guide-intro__heading {
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.7;
color: var(--color-text);
margin-top: 1.5rem;
}
.guide-intro__body {
font-size: 14px;
line-height: 1.9;
margin-top: 1rem;
}
.guide-blocks {
flex: 1 1 0;
min-width: 0;
display: flex;
gap: 2.5rem;
}
.guide-blocks__col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2rem;
}
.guide-block {
/* border-left は子要素ごとに色分け: title=メイン / text=アクセント */
}
.guide-block__title {
font-family: var(--font-ja);
font-weight: 700;
font-size: 18px;
line-height: 1.5;
color: var(--color-main);
padding-left: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.5rem;
border-left: 4px solid var(--color-main);
}
.guide-block__text {
font-size: 14px;
line-height: 1.9;
color: var(--color-text);
padding-left: 1rem;
border-left: 4px solid var(--color-accent);
}
@media (max-width: 896px) {
.detail-guide {
padding: 3rem 0;
}
.guide-layout {
flex-direction: column;
gap: 2rem;
}
.guide-intro {
flex-basis: auto;
max-width: none;
width: 100%;
}
.guide-blocks {
gap: 2rem;
}
}
@media (max-width: 568px) {
.detail-guide {
padding: 2.5rem 0;
}
.guide-blocks {
flex-direction: column;
gap: 2rem;
}
.guide-intro__heading {
font-size: 16px;
}
}
/* 詳細ページFAQ見出し: 設計に合わせ Serif Bold (homeには影響させない) */
#detail-trust .faq-left__heading {
font-weight: 700;
}
.space-border{padding: 100px 0;}
.space-border .container .border{border-top: 1px solid var(--color-sub);}
@media (max-width: 568px) {
.space-border{padding: 30px 0;}
}
/* ============================================================
詳細ページ: セマンティックDOM対応（HTML構造変更に伴う調整）
============================================================ */
/* スクリーンリーダー用の視覚的非表示 */
.u-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* 見出しタグのUAマージンをリセット（見た目は既存クラスで制御） */
.detail-buy__name {
margin: 0;
}
.feat-sec-title {
margin-top: 0;
}
.feat-heading {
margin-top: 0;
}
.feat-card__title {
margin: 0;
}
/* figure のUAマージンをリセット */
.detail-gallery__main,
.detail-gallery__lifestyle,
.feat-hero__img,
.feat-urban__img,
.feat-rider,
.feat-card__media {
margin: 0;
}
.detail-gallery .slick-slider{
margin-bottom: 10px;
}
.detail-gallery .feat-pager{
margin: 0;
}
.detail-gallery__lifestyle {
margin-top: 1.25rem;
}
.detail-gallery__main-img {
display: block;
}
/* リスト化した箇所 */
.opt-list {
list-style: none;
}
.detail-gallery__thumbs>li {
display: contents;
}
.feat-riders>li {
display: contents;
}
/* 購入フォーム: fieldset / legend のリセット */
.detail-buy__form {
margin: 0;
}
.detail-buy__fieldset {
border: 0;
padding: 0;
margin: 1.75rem 0 0;
min-width: 0;
}
legend.detail-buy__label {
padding: 0;
}
.detail-color>.detail-buy__label {
width: 100%;
}
/* ラジオは視覚的に隠してラベルで操作（フォーカス可能のまま） */
.detail-color__swatch,
.detail-pkg__tab,
.opt-card__btn {
position: relative;
}
.detail-buy__form input[type="radio"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
/* ボタン→ラベル化したものの中央寄せ */
.detail-pkg__tab {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* 選択状態（:checked）と静的初期状態（.is-active）の両対応 */
.detail-color__swatch.is-active,
.detail-color__swatch:has(input:checked) {
box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-main);
}
/* .detail-pkg__tab の active 色はパッケージブロック側で定義済み (color: --color-accent) */
/* .opt-card__btn の選択状態はオプションカード本体ブロックで定義済み(--/-yes 別) */
.detail-color__swatch:has(input:focus-visible),
.detail-pkg__tab:has(input:focus-visible),
.opt-card__btn:has(input:focus-visible) {
outline: 2px solid var(--color-main);
outline-offset: 2px;
}
/* ボタン要素になったサムネイルのリセット */
button.detail-gallery__thumb {
padding: 0;
background: none;
border: 0;
font: inherit;
color: inherit;
}
button.detail-gallery__thumb.is-active {
border: 1px solid var(--color-main);
}
/* 数量 input[type=number] */
.detail-qty__num {
box-sizing: border-box;
height: 40px;
width: 56px;
background: var(--color-white);
border-top: 0;
border-bottom: 0;
outline: none;
padding: 0;
-moz-appearance: textfield;
appearance: textfield;
}
.detail-qty__num::-webkit-outer-spin-button,
.detail-qty__num::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* p化した合計金額行 */
.detail-summary__total {
margin: 20px 0 0;
}
/* ============================================================
詳細ページ全体: 背景色 #F3F0EA (Figma準拠)
============================================================ */
body.page-detail {
background: var(--color-bg-yellow);
}
/* 詳細セクション内で個別に背景指定していた箇所は、全体背景に合わせて解除 */
body.page-detail .detail-features,
body.page-detail .detail-spec,
body.page-detail .trust-top,
body.page-detail .apeider-related,
body.page-detail .detail-guide {
background: transparent;
}
/* =============================================
商品詳細ガイドモーダル（お届け/キャンセル/防犯登録/保険）
purchase-modal + icon-modal のシェルを流用し、本文のみ追加
============================================= */
.guide-modal-inner {
padding: 60px 80px 60px;
}
.guide-modal-body {
margin-top: 30px;
}
/* リード文 */
.guide-modal-lead {
font-size: 16px;
line-height: 1.7;
letter-spacing: 0.4px;
color: var(--color-black);
}
/* セクション枠 */
.guide-sec {
position: relative;
border: 1px solid var(--color-main);
border-radius: 5px;
margin-top: 50px;
}
.guide-modal-lead + .guide-sec {
margin-top: 28px;
}
/* セクション見出しタブ（ネイビー角＋黄色番号＋ネイビーバー白タイトル） */
.guide-sec__head {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: stretch;
}
.guide-sec__num {
flex-shrink: 0;
width: 50px;
height: 50px;
background: var(--color-main);
border-radius: 5px 0 0 0;
color: var(--color-accent);
font-family: var(--font-en);
font-size: 30px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.guide-sec__title {
min-height: 50px;
background: var(--color-main);
border-radius: 0 0 5px 0;
color: #fff;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.45px;
display: flex;
align-items: center;
padding: 6px 20px;
}
/* 番号下の黄色い縦線（Figmaのアクセント） */
.guide-sec__num::after {
content: "";
position: absolute;
left: 50px;
width: 1px;
height: 27px;
background: var(--color-accent);
}
.guide-sec__inner {
padding: 78px 30px 30px;
}
/* 本文テキスト */
.guide-text {
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.35px;
color: var(--color-black);
}
.guide-text + .guide-text,
.guide-subhead + .guide-text {
margin-top: 4px;
}
/* 小見出し（保険プラン内の全損/半損 等） */
.guide-subhead {
font-size: 16px;
font-weight: 600;
line-height: 1.7;
letter-spacing: 0.4px;
color: var(--color-text);
margin-top: 18px;
}
/* 黄色番号バッジ付きリスト（お届け内容） */
.guide-numlist {
display: flex;
flex-direction: column;
gap: 22px;
margin: 6px 0 0;
padding: 0;
list-style: none;
}
.guide-numlist > li {
display: flex;
align-items: center;
gap: 15px;
}
.guide-numlist__num {
flex-shrink: 0;
width: 30px;
height: 32px;
background: url('mp-img-cmn-modal-num_seal.svg') center / contain no-repeat;
color: var(--color-accent);
font-family: var(--font-en);
font-size: 15px;
font-weight: 500;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.guide-numlist__text {
font-size: 18px;
font-weight: 600;
line-height: 1.7;
color: var(--color-text);
}
/* 箇条書き（ディスク/番号） */
.guide-disc,
.guide-decimal {
margin: 10px 0 0;
padding-left: 21px;
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.35px;
color: var(--color-black);
}
.guide-disc { list-style: disc; }
.guide-decimal { list-style: decimal; }
.guide-decimal + .guide-text { margin-top: 12px; }
/* 自治体タグ（東京都の場合 等） */
.guide-tag {
display: inline-flex;
align-items: center;
margin-top: 12px;
padding: 3px 10px;
border-radius: 3px;
background: var(--color-main);
color: #fff;
font-size: 14px;
font-weight: 600;
line-height: 1.7;
}
/* ご加入条件ラベル */
.guide-cond {
margin-top: 14px;
font-size: 14px;
line-height: 1.7;
color: var(--color-black);
}
.guide-cond__label {
font-weight: 600;
margin-right: 16px;
}
/* 保険会社メタ情報 */
.guide-ins-meta {
margin: 28px auto 0;
width: max-content;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.guide-ins-meta__row {
display: grid;
grid-template-columns: 90px auto;
align-items: center;
gap: 20px;
font-family: var(--font-ja);
font-size: 16px;
font-weight: 600;
line-height: 1.7;
letter-spacing: 0.4px;
color: var(--color-black);
}
.guide-ins-meta__row dt { margin: 0; }
.guide-ins-meta__row dd { margin: 0; }
.guide-ins-meta__logo { height: 19px; width: auto; display: block; }
.guide-ins-meta__tel {
display: flex;
align-items: center;
gap: 10px;
}
.guide-ins-meta__fd { height: 24px; width: auto; display: block; flex-shrink: 0; }
.guide-ins-meta__num {
font-family: var(--font-oswald);
font-size: 24px;
font-weight: 400;
line-height: 1;
color: var(--color-black);
}
/* 「詳しく見る」ボタン */
.guide-modal-more-wrap {
margin-top: 30px;
text-align: center;
}
.guide-modal-note {
margin-top: 12px;
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.35px;
text-align: center;
color: var(--color-black);
}
/* スマホ */
@media screen and (max-width: 768px) {
.guide-modal-inner {
padding: 30px 20px 20px;
}
.guide-sec__title {
font-size: 15px;
padding: 6px 14px;
}
.guide-sec__inner {
padding: 70px 16px 24px;
}
.guide-numlist__text {
font-size: 16px;
}
.guide-ins-meta__row {
flex-direction: column;
gap: 0;
}
.guide-ins-meta__row dt { min-width: 0; }
}
/* ============================================================
MERGED: new pages CSS (brand / payment / delivery / receive /
flow / contact form / guide / support) imported from static.
Existing selectors kept as theme version. url() flattened to mp-.
============================================================ */
/* ===================================================================
ITALMOTO (取扱ブランド) page — pages/ape-ryder/ 専用
すべて .page-brand 配下にスコープ済（他ページ非影響）
=================================================================== */
/* =====================================================================
ITALMOTO (取扱ブランド) ブランドページ専用スタイル
- すべて .page-brand 配下にスコープし、他ページへ影響させない
- 共通トークン(:root の --color-*, --font-*)と共通クラス
(.container / .lower-kv / .breadcrumb / .faq-* / .btn-* / common-content)
は style.css のものを再利用する
===================================================================== */
/* 共通: 明朝体セクションタイトル（ja + navy/yellowライン + en） ------- */
/* =========================== KV ============================ */
/* =========================== リード ============================ */
/* =========================== ブランドストーリー ============================ */
/* =========================== レビュー ============================ */
/* =========================== コレクション ============================ */
/* =========================== こんな方におすすめ ============================ */
/* =========================== FAQ (共通 faq-* を流用、最小限の補正) ===== */
/* =========================== モデル比較 ============================ */
/* =========================== 信頼と安心 ============================ */
/* =========================== 締め ============================ */
/* =========================== ブランド比較 (BRANDS LIST) ============== */
/* =====================================================================
レスポンシブ (SP: <=896px / 細部: <=568px)
===================================================================== */
@media (max-width: 896px) {
/* KV */
/* リード */
/* ストーリー */
/* レビュー */
/* コレクション */
/* おすすめ */
/* FAQ：共通 faq-inner を縦積みに */
/* モデル比較・ブランド比較：横スクロール */
/* 信頼と安心 */
/* 締め */
/* ブランド比較 */
}
/* =========================================================
ご利用ガイド (page-guide) ※ 既存トークン・.container・.sec-title・.btn-main を再利用
========================================================= */
/* --- 下層KV: 1枚ページタイトル型 --- */
.lower-kv--page .lower-kv__overlay { background: rgba(0, 0, 0, 0.6); }
.page-kv { color: var(--color-white); }
.page-kv__sub {
font-family: var(--font-serif);
font-weight: 600;
font-size: 20px;
letter-spacing: 1px;
line-height: 1.5;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
}
.page-kv__en {
font-family: var(--font-en);
font-weight: 400;
font-size: 24px;
line-height: 1.5;
color: var(--color-accent);
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
margin-top: 6px;
}
.page-kv__main {
font-family: var(--font-serif);
font-weight: 600;
font-size: 46px;
letter-spacing: 2.3px;
line-height: 1.5;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
color: var(--color-white);
margin-top: 8px;
}
/* --- read: 公式ならではの安心と便利 --- */
.guide-read { padding: 60px 0 70px; }
.guide-read__layout { display: flex; gap: 48px; align-items: flex-start; }
.guide-read__head { flex: 0 0 36%; min-width: 0; }
/* お支払い方法ページ: head(テキスト)を広め、ブランドはコンパクトに右寄せ (Figma準拠) */
.page-payment .guide-read__head { flex-basis: 52%; }
.guide-read__lead {
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.7;
margin-top: 28px;
}
.guide-read__body {
font-size: 16px;
line-height: 1.7;
margin-top: 20px;
}
.guide-read__cards {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr; /* 全カードを最も高いカードに揃える */
gap: 0;
}
.guide-read-card {
display: flex;
background: var(--color-white);
min-height: 157px;
}
.guide-read-card__img { flex: 0 0 133px; align-self: stretch; position: relative; overflow: hidden; }
.guide-read-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.guide-read-card__txt { flex: 1 1 auto; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; }
.guide-read-card__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; letter-spacing: 0.5px; line-height: 1.5; }
.guide-read-card__desc { font-size: 14px; line-height: 1.7; }
@media (max-width: 680px) {
.guide-read__cards { grid-template-columns: 1fr; }
}
/* --- flow: ご購入の流れ --- */
.guide-flow { padding-bottom: 90px; background: var(--color-bg-yellow); }
.guide-flow > .container { border-top: 1px solid var(--color-sub); padding-top: 70px; }
.guide-flow__title { margin-bottom: 40px; }
.guide-flow__layout { display: flex; gap: 48px; align-items: flex-start; }
/* sticky step nav */
.flow-nav { flex: 0 0 320px; position: sticky; top: 200px; }
.flow-nav__list { display: flex; flex-direction: column; gap: 14px; }
.flow-nav__list > li { position: relative; }
.flow-nav__list > li:not(:last-child)::after {
content: ''; position: absolute; left: 26px; bottom: -14px; width: 1px; height: 14px; background: var(--color-sub);
}
.flow-nav__item {
display: flex; align-items: stretch;
background: var(--color-white); border: 1px solid var(--color-main);
text-decoration: none; color: var(--color-text);
transition: background 0.3s, color 0.3s;
}
.flow-nav__badge {
flex: 0 0 52px; background: var(--color-main); color: var(--color-white);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0;
}
.flow-nav__step { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.5px; line-height: 1; }
.flow-nav__num { font-family: var(--font-en); font-weight: 500; font-size: 20px; color: var(--color-accent); line-height: 1; }
.flow-nav__name { display: flex; align-items: center; padding: 10px 16px; font-weight: 600; font-size: 15px; line-height: 1.4; }
@media (hover: hover) {
.flow-nav__item:hover { background: var(--color-bg-yellow); }
}
/* step contents — 白カード + バッジが左端をまたぐ (Figma: bg白 / rounded5 / badge center on card left edge) */
.flow-steps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.flow-step {
position: relative;
background: var(--color-white);
border-radius: 5px;
padding: 30px 40px 40px 80px;
margin-left: 40px;
scroll-margin-top: 200px;
}
.flow-step__head { display: block; }
.flow-step__badge {
position: absolute; left: 0; top: 30px; transform: translateX(-50%);
width: 80px; height: 80px; border-radius: 50%;
background: var(--color-main); color: var(--color-white);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.flow-step__step { font-family: var(--font-en); font-weight: 400; font-size: 16px; line-height: 0.9; }
.flow-step__num { font-family: var(--font-en); font-weight: 400; font-size: 36px; color: var(--color-accent); line-height: 0.9; }
.flow-step__title { font-family: var(--font-ja); font-weight: 600; font-size: 20px; line-height: 1.5; letter-spacing: 0.75px; color: var(--color-text); }
.flow-step__en { margin-top: 4px; line-height: 1; }
.flow-step__en span {
font-family: var(--font-en); font-weight: 400; font-size: 20px; color: var(--color-main);
background: linear-gradient(transparent 25%, var(--color-accent) 25%, var(--color-accent) 95%, transparent 95%);
padding: 0 4px;
}
.flow-step__body { margin-top: 24px; }
.flow-step__body--media { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.flow-step__text { flex: 1 1 320px; min-width: 320px; }
.flow-step__text > p { font-size: 16px; line-height: 1.7; }
.flow-step__text > p + p { margin-top: 8px; }
.flow-step__note { font-size: 14px; line-height: 1.7; color: #555; margin-top: 12px; }
.flow-step__img__ttl{background-color: var(--color-main); color: var(--color-white); font-size: 16px; font-weight: 600; line-height: 1.7; text-align: center; display: flex; align-items: center; justify-content: center; padding: 24px 20px; flex-direction: column; border-radius: 5px; min-width: fit-content;}
.flow-step__img__ttl > span{font-size: 14px;}
.flow-step__img { flex: 0 0 400px; aspect-ratio: 400 / 245; overflow: hidden;}
.flow-step__body.flow-step__body--media.pay-credit__body{margin-top: 0;}
.flow-step__img img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; display: block; }
.flow-step__aside { flex: 0 0 400px; }
/* .flow-step__aside .flow-step__img { aspect-ratio: 400 / 224; } */
.flow-step__caption { font-size: 14px; line-height: 1.7; margin-top: 12px; }
.flow-step__btn { margin-top: 24px; }
/* step03: 受け取り 2カード */
.receive-cards { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 40px; align-items: flex-start; }
.receive-card { flex: 1 1 370px; min-width: 370px; display: flex; flex-direction: column; }
.receive-card__photo { position: relative; aspect-ratio: 456 / 220; overflow: visible; }
.receive-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.receive-card__photo img[src*="step03_ship"] { object-position: bottom; }
.receive-card__badge {
position: absolute; right: 18px; bottom: 0; transform: translateY(50%); z-index: 2;
width: 90px; height: 90px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; text-align: center;
color: var(--color-white); font-weight: 700; font-size: 18px; line-height: 1.3;
}
.receive-card__badge--navy { background: var(--color-main); }
.receive-card__badge--red { background: #c00; }
.receive-card__body { background: var(--color-bg-yellow); padding: 28px 30px; flex: 1 1 auto; }
.receive-card__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.5; }
.receive-card__lead { font-weight: 600; font-size: 16px; line-height: 1.7; margin-top: 14px; }
.receive-card__desc { font-size: 14px; line-height: 1.7; margin-top: 12px; margin-bottom: 10px;}
.receive-card__sep { border-top: 1px solid var(--color-sub); margin: 22px 0; }
.receive-ship { display: flex; align-items: center; gap: 14px; }
.receive-ship__icon { flex: 0 0 auto; width: 74px; height: 48px; }
.receive-ship__label { font-weight: 700; font-size: 13px; line-height: 1.3; }
.receive-ship__big { font-family: var(--font-serif); font-weight: 700; font-size: 30px; line-height: 1; }
.receive-card__attention { color: #c00; font-size: 14px; line-height: 1.7; margin-top: 14px; }
.receive-card__fee-label { font-weight: 600; font-size: 16px; margin-top: 18px; }
.receive-fee { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.receive-fee__select { flex: 1 1 auto; min-width: 0; }
.receive-fee__select select {
width: 100%; padding: 12px 36px 12px 14px; border: 1px solid var(--color-main); border-radius: 5px;
background-color: var(--color-white);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 8 0 0h12z' fill='%23273240'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; -webkit-appearance: none; appearance: none;
font-family: var(--font-ja); font-size: 15px; color: var(--color-text);
}
.receive-fee__price { font-weight: 700; font-size: 18px; white-space: nowrap; color: var(--color-main); }
.receive-fee__num { font-family: var(--font-en); font-size: 28px; font-weight: 400; }
.receive-fee__placeholder { font-family: var(--font-en); font-size: 22px; color: #999; }
.receive-fee__tax { font-size: 12px; font-weight: 500; margin-left: 4px; color: #555; }
.receive-card__notes { margin-top: 14px; }
.receive-card__notes li { font-size: 12px; line-height: 1.6; color: #555; }
.receive-shop { display: flex; align-items: center; gap: 12px; }
.receive-shop__logo { height: 34px; width: auto; }
.receive-shop__name { font-family: var(--font-en); font-weight: 500; font-size: 13px; }
.receive-shop__info { margin-top: 16px; }
.receive-shop__info > div { display: flex; gap: 12px; font-size: 14px; line-height: 1.8; }
.receive-shop__info dt { flex: 0 0 64px; color: #555; }
.receive-shop__info dd { flex: 1 1 auto; }
.receive-shop__map { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; color: var(--color-text); text-decoration: underline; }
.receive-shop__map img { width: 14px; height: 17px; flex: 0 0 auto; }
/* step05: 配送テーブル */
.ship-table { margin-top: 26px; border-top: 1px solid var(--color-sub); }
.ship-table__row { display: flex; gap: 0; padding: 0; border-bottom: 1px solid var(--color-sub); align-items: stretch; }
.ship-table__row dt { flex: 0 0 230px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px 20px; font-weight: 600; font-size: 18px; line-height: 1.7; }
.ship-table__row dd { flex: 1 1 auto; min-width: 0; padding: 24px 0 24px 40px; border-left: 1px solid var(--color-sub); }
.ship-table__row dd p { font-size: 16px; line-height: 1.7; }
.ship-table__note { font-size: 14px; color: #555; }
.flow-step__notes { margin-top: 16px; }
.flow-step__notes li { font-size: 14px; line-height: 1.7; color: #555; }
/* step06: お受け取り チェック */
.receive-check__heading { font-weight: 600; font-size: 20px; line-height: 1.7; margin-top: 36px; }
.receive-check { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; margin-top: 20px; margin-bottom: 30px; }
.receive-check__panel { flex: 1 1 370px; min-width: 370px; background: var(--color-bg-yellow); padding: 20px 30px; }
.receive-check__panel--wide { flex: 1.3 1 370px; min-width: 370px; position: relative; }
.receive-check__ttl { font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1.5; letter-spacing: 0.5px; margin-bottom: 10px; }
.receive-check__cols { display: flex; gap: 24px; align-items: flex-start; }
.receive-check__panel--wide .receive-check__photo { position: absolute; right: -40px; top: 35%; bottom: auto; width: 250px; height: 180px; flex: 0 0 auto; pointer-events: none; }
.check-list { counter-reset: ci; flex: 1 1 auto; min-width: 0; }
.check-list li {
counter-increment: ci; position: relative; padding-left: 44px; min-height: 34px;
display: flex; align-items: center; font-weight: 600; font-size: 16px; line-height: 1.5;
}
.check-list li + li { margin-top: 10px; }
.check-list li::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 32px; height: 34px; background: url('mp-img-pages-guide-icon_num_seal.svg') center / contain no-repeat;
}
.check-list li::after {
content: counter(ci); position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 32px; height: 34px; display: flex; align-items: center; justify-content: center;
color: var(--color-white); font-family: var(--font-en); font-weight: 700; font-size: 13px;
}
.receive-check__photo { flex: 0 0 200px; }
.receive-check__photo img { width: 100%; height: auto; display: block; }
.receive-check__etc { margin-top: 10px; font-weight: 600; font-size: 16px; }
.receive-foot__text { font-size: 16px; line-height: 1.7; margin-top: 30px; }
.receive-tel { display: flex; align-items: center; gap: 20px; margin-top: 5px; flex-wrap: wrap; }
.receive-tel__label { font-weight: 700; font-size: 18px; }
.receive-tel__num { display: flex; align-items: center; gap: 12px; font-family: var(--font-oswald); font-weight: 400; font-size: 36px; color: var(--color-main); line-height: 1; }
.receive-tel__num img { height: 26px; width: auto; }
/* --- 初期不良について --- */
.guide-defects { padding-bottom: 100px; }
.guide-defects > .container { border-top: 1px solid var(--color-sub); padding-top: 70px; }
.guide-defects__title { margin-bottom: 30px; }
.guide-defects__heading { font-family: var(--font-ja); font-weight: 700; font-size: 20px; line-height: 1.7; margin-bottom: 16px; color: var(--color-main, #1a2640); }
.guide-defects__lead { color: #c00; font-family: var(--font-ja); font-weight: 600; font-size: 24px; line-height: 1.7; }
.guide-defects__lead--sub { font-size: 18px; margin-top: 4px; }
.guide-defects__body { font-size: 16px; line-height: 1.7; margin-top: 24px; }
.guide-defects__list { list-style: disc; padding-left: 24px; margin-top: 24px; }
.guide-defects__list li { font-size: 16px; line-height: 1.7; }
.guide-defects__list li + li { margin-top: 12px; }
.guide-defects__btn { margin-top: 15px; }
.guide-defects .receive-foot__text { margin-top: 60px; }
.guide-defects .receive-tel { margin-top: 16px; }
/* =========== レスポンシブ: ご利用ガイド =========== */
/* read: 横並びでカードが細くなりすぎる幅では head を上に、カードを全幅2列へ */
@media (max-width: 1280px) {
.guide-read__layout { flex-direction: column; gap: 28px; align-items: stretch; }
.guide-read__head { flex-basis: auto; width: 100%; }
}
/* flow: サイドナビは 896px まで左に固定。右側(ステップ内)の要素を幅に応じて縦積みへ
(狭いステップ列での画像占有・テキスト過剰改行を防ぐ) */
@media (max-width: 1440px) {
.flow-step__body--media { flex-direction: column; gap: 20px; flex-basis: auto;}
.flow-step__text {flex-basis: auto;}
.flow-step__img, .flow-step__aside { flex-basis: auto; width: 100%; max-width: 480px; }
.receive-cards { flex-direction: column; gap: 28px; }
.receive-card { flex: 0 0 auto; min-width: 0; }
.receive-check { flex-direction: column; gap: 24px; }
.receive-check__panel, .receive-check__panel--wide { flex-basis: auto; width: 100%; min-width: 0; }
.receive-check__panel--wide .receive-check__photo { position: static; transform: none; width: 250px; height: auto; margin: 16px auto 0; right: auto; top: auto; }
}
@media (max-width: 1100px) {
.flow-nav { flex-basis: 260px; }
}
/* 896px 以下でサイドナビを上に水平化 */
@media (max-width: 896px) {
.page-kv__sub { font-size: 18px; }
.page-kv__en { font-size: 20px; }
.page-kv__main { font-size: 32px; }
.guide-flow__layout { flex-direction: column; gap: 32px; }
.flow-nav { position: static; flex-basis: auto; width: 100%; top: auto; }
.flow-nav__list { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.flow-nav__list > li { flex: 1 1 calc(33.333% - 10px); }
.flow-nav__list > li:not(:last-child)::after { display: none; }
.flow-steps { width: 100%; }
.flow-step { scroll-margin-top: 70px; }
.flow-step__text { min-width: 0; }
}
@media (max-width: 568px) {
.page-kv__main { font-size: 26px; letter-spacing: 1px; }
.guide-read__cards { grid-template-columns: 1fr; gap: 0; }
.guide-read-card__ttl { font-size: 18px; }
.guide-read-card__desc { font-size: 13px; }
/* 2. ナビ項目は1行1個 (全幅) */
.flow-nav__list > li { flex-basis: 100%; }
.flow-nav__name { font-size: 14px; padding: 8px 12px; }
/* flow-step: 余白・文字サイズを縮小 (他ページのSP縮小率に合わせる) */
.flow-step { padding: 20px 16px 24px 44px; margin-left: 26px; }
.flow-step__head { gap: 12px; }
/* .flow-step__badge { width: 52px; height: 52px; top: 20px; } */
.flow-step__num { font-size: 24px; }
.flow-step__step { font-size: 12px; }
.flow-step__title { font-size: 18px; }
.flow-step__en span { font-size: 14px; }
.flow-step__body { margin-top: 18px; }
.flow-step__text > p, .ship-table__row dd p { font-size: 14px; }
.flow-step__note, .flow-step__notes li, .receive-card__notes li { font-size: 12px; }
.flow-step__caption { font-size: 13px; }
/* 3. 別途配送料/送料無料 バッジを縮小 */
.receive-card__badge { width: 52px; height: 52px; font-size: 11px; }
/* 4. カードタイトル/本文を縮小 */
.receive-card__body { padding: 22px 20px; }
.receive-card__ttl { font-size: 19px; }
.receive-card__lead { font-size: 15px; }
/* 1. receive-ship (全国配送) のサイズ・レイアウト調整 */
.receive-ship { gap: 10px; }
.receive-ship__icon { width: 46px; height: 30px; }
.receive-ship__label { font-size: 10px; }
.receive-ship__big { font-size: 13px; }
.receive-card__fee-label { font-size: 14px; }
.receive-fee__select select { font-size: 14px; padding: 10px 12px; }
.receive-fee__price { font-size: 15px; }
.receive-fee__num { font-size: 22px; font-weight: 400; }
.receive-check__panel, .receive-check__panel--wide { padding: 18px 14px; }
.receive-check__cols { flex-direction: column; }
.receive-check__photo { flex-basis: auto; width: 100%; margin: 0; }
.receive-check__heading, .receive-check__ttl { font-size: 16px; }
.check-list li { font-size: 14px; }
.receive-foot__text, .receive-check__etc { font-size: 14px; }
/* 5. 配送テーブル: dt の固定列幅を解除しSP用に */
.ship-table__row { flex-direction: column; gap: 6px; padding: 16px 4px; }
.ship-table__row dt { flex: 0 0 auto; width: 100%; text-align: left; justify-content: flex-start; padding: 0; font-size: 15px; }
.ship-table__row dd { border-left: none; padding: 0; }
.receive-fee { flex-direction: column; align-items: flex-start; gap: 10px; }
.receive-tel { gap: 12px; }
.receive-tel__label { font-size: 16px; }
.receive-tel__num { font-size: 26px; }
.guide-defects__heading { font-size: 16px; margin-bottom: 12px; }
.guide-defects__lead { font-size: 18px; }
.guide-defects__lead--sub { font-size: 14px; }
.guide-defects__body, .guide-defects__list li { font-size: 14px; }
.guide-defects__btn { margin-top: 12px; }
.receive-check { margin-bottom: 20px; }
.receive-tel { margin-top: 4px; }
}
/* =========================================================
下層情報ページ共通 (support / narrow) — コールセンター・問い合わせ等
========================================================= */
.guide-narrow { max-width: 968px; margin: 0 auto; }
.guide-support { padding: 60px 0 80px; }
.support__title { margin-bottom: 30px; }
.support__tel { margin-bottom: 28px; }
.support__tel .receive-tel__num { font-size: 40px; }
.support__tel .receive-tel__label { font-size: 20px; }
.support__text { font-size: 16px; line-height: 1.7; }
.support__text + .support__text { margin-top: 16px; }
.support__menu { margin-top: 16px; }
.support__menu li { font-family: var(--font-ja); font-weight: 600; font-size: 20px; line-height: 1.7; display: flex; gap: 4px; }
.support__menu li + li { margin-top: 4px; }
.support__menu-num { flex: 0 0 auto; }
.support__block { margin-top: 44px; }
.support__subhead { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; line-height: 1.7; margin-bottom: 14px; }
.support__subhead img { width: 24px; height: 24px; flex: 0 0 auto; }
.support__btn { margin-top: 20px; }
.support__prep { margin-top: 14px; list-style: disc; padding-left: 27px; }
.support__prep li { font-weight: 400; font-size: 18px; line-height: 1.7; }
.support__prep li + li { margin-top: 6px; }
.support__prep li strong { font-weight: 600; }
@media (max-width: 568px) {
.support__tel .receive-tel__num { font-size: 30px; }
.support__menu li { font-size: 17px; }
.support__subhead { font-size: 17px; align-items: flex-start; }
.support__prep li { font-size: 16px; }
}
/* =========================================================
お問い合わせフォーム (contact)
========================================================= */
.support__contact-row { display: flex; align-items: center; justify-content: flex-start; gap: 30px; flex-wrap: wrap; margin-top: 26px; }
.cform { background: var(--color-bg-yellow); padding: 44px 40px; margin-top: 40px; }
.cform-steps { display: flex; justify-content: center; gap: clamp(28px, 7vw, 90px); position: relative; margin-bottom: 36px; }
.cform-steps::before { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: var(--color-sub); z-index: 0; }
.cform-steps__item { flex: 0 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cform-steps__label { font-family: var(--font-ja); font-weight: 600; font-size: 16px; color: var(--color-text); text-align: center; line-height: 1.5; white-space: nowrap; }
.cform-steps__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-main); border: 1px solid var(--color-main); }
.cform-steps__item.is-active .cform-steps__dot { background: var(--color-accent); }
.cform__row { display: flex; gap: 24px; align-items: flex-start; padding: 22px 4px; border-top: 1px solid var(--color-sub); }
.cform__row:last-of-type { border-bottom: 1px solid var(--color-sub); }
.cform__head { flex: 0 0 260px; display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.cform__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--color-white); border-radius: 3px; }
.cform__badge--req { background: #c00; }
.cform__badge--any { background: var(--color-sub); color: var(--color-text); }
.cform__label { font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--color-text); }
.cform__field { flex: 1 1 auto; min-width: 0; }
.cform__input { width: 100%; padding: 12px 14px; border: 1px solid var(--color-main); border-radius: 5px; background: var(--color-white); font-family: var(--font-ja); font-size: 16px; line-height: 1.6; color: var(--color-text); }
.cform__input:focus-visible { outline: 2px solid var(--color-main); outline-offset: 1px; }
.cform__textarea { resize: vertical; min-height: 150px; }
.cform__input--half { width: 58%; }
.cform__select { display: block; width: 58%; }
.cform__select select { width: 100%; padding: 12px 36px 12px 14px; border: 1px solid var(--color-main); border-radius: 5px; background-color: var(--color-white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M6 8 0 0h12z' fill='%23273240'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; -webkit-appearance: none; appearance: none; font-family: var(--font-ja); font-size: 16px; color: var(--color-text); }
.cform__radios { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.cform__radio { display: flex; align-items: center; gap: 8px; font-size: 16px; cursor: pointer; }
.cform__radio input { display: inline-block; width: 18px; height: 18px; accent-color: var(--color-main); flex: 0 0 auto; }
.cform__agree { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 32px; }
.cform__check { display: flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.cform__check a { color: var(--color-text); text-decoration: underline; }
/* Figma: 紺枠の白ボックス + チェック時は内側に紺の四角 (チェック済みデザイン) */
.cform__check input { display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; appearance: none; -webkit-appearance: none; border: 1px solid var(--color-main); border-radius: 3px; background: var(--color-white); cursor: pointer; }
.cform__check input:checked { background-color: var(--color-main); background-clip: content-box; padding: 2px; }
.cform__submit { display: flex; justify-content: center; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
.cform__submit--confirm { gap: 24px; }
.cform__submit .btn-outline { background: var(--color-white); }
.cform__error { color: #c00; font-size: 14px; line-height: 1.6; margin-top: 16px; text-align: center; font-weight: 600; }
.cform__notice { padding: 14px 18px; border-radius: 6px; margin-bottom: 24px; font-size: 15px; line-height: 1.6; }
.cform__notice--success { background: #eaf6ec; color: #1f6f37; border: 1px solid #b6dec0; }
.cform__notice--error { background: #fceaea; color: #9a1a1a; border: 1px solid #e6b8b8; }
/* ===== Contact: Step toggle ===== */
.contact-step { display: none; }
.contact-step.is-active { display: block; }
/* ===== Contact: Step 2 confirm ===== */
.contact-confirm__lead { font-family: var(--font-ja); font-size: 16px; line-height: 1.7; color: var(--color-text); margin: 6px 0 24px; text-align: center; }
.contact-confirm { margin: 0; padding: 0; }
.contact-confirm__row { display: flex; gap: 24px; align-items: flex-start; padding: 22px 4px; border-top: 1px solid var(--color-sub); }
.contact-confirm__row:last-of-type { border-bottom: 1px solid var(--color-sub); }
.contact-confirm__dt { flex: 0 0 260px; margin: 0; font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--color-text); padding-top: 2px; }
.contact-confirm__dd { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-text); word-break: break-word; }
.contact-confirm__dd--multiline { white-space: pre-wrap; }
/* ===== Contact: Step 3 done ===== */
.contact-done { padding: 20px 0 10px; text-align: center; }
.contact-done__title { font-family: var(--font-ja); font-weight: 700; font-size: clamp(20px, 2.4vw, 26px); color: var(--color-text); margin-bottom: 18px; }
.contact-done__text { font-family: var(--font-ja); font-size: 16px; line-height: 1.8; color: var(--color-text); margin-bottom: 32px; }
.contact-done__btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 896px) {
.cform { padding: 32px 24px; }
}
@media (max-width: 568px) {
.support__contact-row { flex-direction: column; align-items: flex-start; }
.cform { padding: 0 0 24px; }
.cform__field { width: 100%; min-width: 0; }
.cform__agree { margin-top: 20px; gap: 8px; }
.cform-steps { flex-direction: column; gap: 8px; margin-bottom: 20px; }
.cform-steps::before { display: none; }
.cform-steps__item { flex-direction: row; gap: 10px; }
.cform-steps__label { font-size: 14px; }
.cform__row { flex-direction: column; gap: 8px; padding: 14px 0; }
.cform__head { flex-basis: auto; padding-top: 0; }
.cform__input--half, .cform__select { width: 100%; }
.cform__radios { gap: 8px 14px; }
.cform__submit { flex-direction: column-reverse; align-items: stretch; gap: 10px; margin-top: 20px; }
.cform__submit .btn-main, .cform__submit .btn-outline { width: 100%; }
.contact-confirm__row { flex-direction: column; gap: 6px; padding: 16px 0; }
.contact-confirm__dt { flex-basis: auto; font-size: 14px; color: #666; }
.contact-confirm__dd { font-size: 15px; }
.contact-done__btns { flex-direction: column; align-items: stretch; gap: 10px; }
.contact-done__btns .btn-main, .contact-done__btns .btn-outline { width: 100%; }
}
/* =========================================================
お支払い方法について (payment) — flow-nav / flow-step を再利用
========================================================= */
.flow-nav__badge img { width: 26px; height: 26px; object-fit: contain; }
.flow-step__icon { width: 34px; height: 34px; object-fit: contain; }
.flow-step__sub { font-family: var(--font-ja); font-weight: 400; font-size: 16px; color: #555; margin-left: 6px; }
.pay-brands { display: flex; flex-wrap: wrap; gap: clamp(5px, 1.1vw, 10px); margin: 18px 0; }
.pay-brands--grid { max-width: 380px; align-content: flex-start; }
/* SVG自体に白背景+枠線が含まれるため、チップ装飾はSVG任せにし、ラッパーはサイズ制御のみ */
.pay-brand { flex: 0 0 auto; width: clamp(46px, 13vw, 80px); display: block; }
.pay-brand img { width: 100%; height: auto; display: block; }
.pay-list { margin: 14px 0; }
.pay-list li { font-size: 16px; line-height: 1.7; }
.pay-list li + li { margin-top: 8px; }
.pay-list li strong { font-weight: 700; }
.pay-subhead { font-weight: 700; font-size: 16px; line-height: 1.7; margin: 20px 0 8px; }
.pay-loan { display: flex; gap: 40px; align-items: flex-start; }
.pay-loan__main { flex: 1 1 auto; min-width: 0; }
.pay-loan__notes { flex: 0 0 300px; }
/* ローン注釈は赤字 (Figma) */
#pay-loan .pay-loan__notes li { color: #c00; }
/* read 見出し: 長いタイトルは折り返す (横並び時にブランドと被らないように) */
.guide-read__title .sec-title__ja { white-space: normal; }
.pay-loan-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.pay-loan-head img { height: 38px; width: auto; }
.pay-loan-head span { font-weight: 700; font-size: 18px; }
.pay-loan__btn { margin: 18px 0; }
.pay-bank { margin: 16px 0 8px; border-top: 1px solid var(--color-sub); }
.pay-bank__row { display: flex; gap: 20px; padding: 14px 8px; border-bottom: 1px solid var(--color-sub); }
.pay-bank__row dt { flex: 0 0 200px; font-weight: 700; font-size: 15px; line-height: 1.6; }
.pay-bank__row dd { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.6; }
/* pay-loan / pay-bank: ステップ列が狭くなる帯では本文と注釈を縦積みに
(他のステップ内コンテンツ=media/cards/check と同じ 1440px 起点に統一) */
@media (max-width: 1440px) {
.pay-loan { flex-direction: column; gap: 20px; }
.pay-loan__notes { flex-basis: auto; width: 100%; }
}
@media (max-width: 568px) {
.pay-brands--grid { max-width: none; }
.pay-bank__row { flex-direction: column; gap: 4px; }
.pay-bank__row dt { flex-basis: auto; }
.flow-step__sub { display: block; margin-left: 0; }
}
/* =========================================================
#pay-credit: 2カラム (左=説明+ブランド / 右=分割払い図解)
.flow-step__body--media の 1440px@column ルールを上書きし、
PC〜タブレットの幅では左右並びを維持する。SP のみ縦積みへ。
========================================================= */
.pay-credit__body { flex-direction: row; gap: 40px; align-items: flex-start; }
.pay-credit__text { min-width: 0; max-width: none; flex: unset; min-width: unset;}
/* .pay-credit__text{width: fit-content;} */
.flow-step__img.pay-credit__media{}
.flow-step__img.pay-credit__media > .flex{gap: 10px 30px;}
/* .pay-credit__media { flex: 1 1 0; min-width: 0; max-width: 560px; width: auto; } */
.pay-credit__bunkatu { width: 100%; height: auto; display: block; }
.pay-credit__media-notes { margin-top: 12px; }
/* 親 .flow-step__body--media が 1440px で column になるが、pay-credit は維持 */
/* @media (max-width: 1440px) {
.pay-credit__body { flex-direction: row; gap: 32px; }
.pay-credit__media { flex-basis: 0; width: auto; max-width: 560px; }
} */
/* SP / narrow タブレットで縦積み */
/* @media (max-width: 768px) {
.pay-credit__body { flex-direction: column; gap: 20px; }
.pay-credit__text,
.pay-credit__media { flex-basis: auto; width: 100%; max-width: none; }
} */
/* お届けまでの流れ: 本文未デザインのためのスペーサー（暫定） */
.guide-empty-spacer { height: 60px; }
/* =========================================================
pages/ 共通 SP 微調整 (全 base 定義より後に配置し確実に適用)
========================================================= */
@media (max-width: 568px) {
/* 2. セクション縦余白をSPで圧縮 */
.guide-read { padding: 36px 0 40px; }
.guide-flow { padding-bottom: 50px; }
.guide-flow > .container { padding-top: 40px; }
.guide-defects { padding-bottom: 56px; }
.guide-defects > .container { padding-top: 40px; }
.guide-support { padding: 36px 0 50px; }
/* 4. PC 16px のテキストはSPで縮小 */
.guide-read__body, .support__text, .pay-list li { font-size: 14px; }
.support__prep li { font-size: 15px; }
.flow-step__sub { font-size: 13px; display: block; margin-left: 0; }
.pay-bank__row dt, .pay-bank__row dd { font-size: 14px; }
/* 3. ローンヘッダーを縮小 (ブランドチップは clamp で自動縮小) */
.pay-loan-head span { font-size: 15px; }
.pay-loan-head img { height: 32px; }
.flow-step__img__ttl{padding: 12px; font-size: 12px;}
.flow-step__img__ttl > span{font-size: 10px;}
.flow-step__img.pay-credit__media > .flex{gap: 20px 30px; flex-direction: column;}
.flow-step__img.pay-credit__media > .flex br{display: none;}
}
/* =========================================================
お届けまでの流れ (delivery) — receive-cards / ship-table / receive-check を再利用
========================================================= */
.dl-sec { padding-bottom: 80px; }
.dl-sec > .container { border-top: 1px solid var(--color-sub); padding-top: 70px; }
.dl-sec--first > .container { border-top: none; padding-top: 50px; }
.dl-sec__title { margin-bottom: 30px; }
.dl-sec__lead { font-family: var(--font-ja); font-weight: 700; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.7; margin-bottom: 18px; }
.dl-sec__body { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.7; }
.dl-sec__notes { margin-top: 18px; }
/* 共通2カラム行: 左 head(sec-title/サイドバー) + 右 main(カード/表) */
.dl-row { display: flex; gap: 48px; align-items: flex-start; }
.dl-row__head { flex: 0 0 auto; min-width: 0; }
.dl-row__main { flex: 1 1 auto; min-width: 0; }
.dl-row--options .dl-row__head { flex-basis: 33%; }
.dl-row--fee .dl-row__head { flex-basis: clamp(300px, 26vw, 380px); }
.dl-row--ship .dl-row__head { flex-basis: clamp(240px, 22vw, 300px); }
.dl-row .dl-sec__title { margin-bottom: 22px; }
/* お受け取り方法: 右2カードは grid で等幅・横並びを粘る(画像縦伸び防止) */
.dl-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
/* 白カード (delivery_card_txt は白背景) */
.receive-card--white { border: 1px solid var(--color-sub); }
.receive-card--white .receive-card__body { background: var(--color-white); }
/* 「全国配送」(流動: clamp) */
.dl-zenkoku { display: flex; align-items: center; gap: 16px; }
.dl-zenkoku__truck { flex: 0 0 auto; width: clamp(82px, 9vw, 120px); height: auto; }
.dl-zenkoku__big { font-family: var(--font-ja); font-weight: 700; font-size: clamp(34px, 3.4vw, 50px); color: var(--color-text); line-height: 1; }
.dl-zenkoku__sub { font-family: var(--font-ja); font-weight: 600; font-size: clamp(20px, 2.2vw, 30px); color: var(--color-text); line-height: 1.7; margin-top: 14px; }
/* 配送料 左サイドバー (背面に日本地図の透かし) */
.dl-fee__side { position: relative; z-index: 0; }
.dl-fee__map { position: absolute; z-index: -1; top: clamp(70px, 7vw, 96px); left: 0; width: min(100%, 380px); height: auto; pointer-events: none; user-select: none; }
.dl-fee__side > :not(.dl-fee__map) { position: relative; z-index: 1; }
.dl-fee__zenkoku { margin-top: 6px; }
.dl-fee__side .receive-card__attention { font-size: clamp(15px, 1.6vw, 18px); }
.dl-fee__notes { margin-top: 18px; }
.dl-fee__notes li { font-size: 14px; line-height: 1.7; color: var(--color-text); }
.dl-fee__notes li + li { margin-top: 4px; }
.dl-fee__tel { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 24px; }
.dl-fee__tel .receive-tel__label { font-size: clamp(14px, 1.2vw, 16px); }
.dl-fee__tel .receive-tel__num { font-size: clamp(24px, 2.4vw, 30px); }
/* 配送料 料金表 */
.fee-table { border-top: 1px solid var(--color-sub); border-bottom: 1px solid var(--color-sub); }
.fee-row { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 24px); }
.fee-row--alt { background: var(--color-table-stripe); }
.fee-row__region { flex: 0 0 clamp(56px, 6vw, 84px); font-family: var(--font-ja); font-weight: 600; font-size: clamp(15px, 1.6vw, 18px); color: var(--color-text); text-align: justify; text-align-last: justify; line-height: 1.4; }
.fee-row__cells { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px clamp(10px, 1.4vw, 20px); }
.fee-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fee-cell__chip { flex: 0 0 auto; background: var(--color-main); color: #fff; font-family: var(--font-ja); font-weight: 600; font-size: clamp(12px, 1.2vw, 14px); line-height: 1; padding: 4px 8px; border-radius: 3px; white-space: nowrap; }
.fee-cell__price { font-family: var(--font-en); font-size: clamp(16px, 1.8vw, 22px); line-height: 1; white-space: nowrap; }
.fee-cell__yen { font-family: var(--font-ja); font-size: 14px; }
/* 配送・納期 表は head が左にあるので上マージン不要 */
.dl-row--ship .ship-table { margin-top: 0; }
/* お受け取り後のご確認: sec-title上 + 白パネル×2 (淡色ブロック) */
.dl-check { background: var(--color-bg-yellow); }
.dl-check > .container { border-top: none; }
.dl-check__panels { margin-top: 0; }
.dl-check__panels .receive-check__panel { background: var(--color-white); border: none; }
.dl-check__foot { display: flex; justify-content: space-between; align-items: center; gap: 30px 48px; flex-wrap: wrap; margin-top: 34px; }
.dl-check__foot .receive-foot__text { margin-top: 0; }
.dl-check__foot .receive-tel { margin-top: 0; flex: 0 0 auto; }
/* ===== レスポンシブ (横並びを早く畳まない) ===== */
@media (max-width: 1280px) {
.dl-row--options { flex-direction: column; align-items: stretch; gap: 30px; }
.dl-row--options .dl-row__head, .dl-row--options .dl-row__main { flex-basis: auto; width: 100%; }
}
@media (max-width: 1200px) {
.dl-row--fee { flex-direction: column; align-items: stretch; gap: 30px; }
.dl-row--fee .dl-row__head, .dl-row--fee .dl-row__main { flex-basis: auto; width: 100%; }
.dl-fee__tel { flex-direction: row; align-items: center; gap: 16px; }
}
@media (max-width: 960px) {
.dl-row--ship { flex-direction: column; align-items: stretch; gap: 22px; }
.dl-row--ship .dl-row__head, .dl-row--ship .dl-row__main { flex-basis: auto; width: 100%; }
}
@media (max-width: 768px) {
.fee-row__cells { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.dl-cards { grid-template-columns: 1fr; gap: 28px; }
.dl-cards .receive-card { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 640px) {
.dl-check__foot { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 520px) {
.fee-row { flex-direction: column; align-items: flex-start; gap: 8px; }
.fee-row__region { flex-basis: auto; width: auto; text-align-last: left; letter-spacing: 0.2em; }
.fee-row__cells { width: 100%; }
}
@media (max-width: 568px) {
.dl-sec { padding-bottom: 50px; }
.dl-sec > .container { padding-top: 40px; }
.dl-sec--first > .container { padding-top: 36px; }
.dl-sec__title { margin-bottom: 24px; }
}
/* =========================================================
ブランドページ追加 (RKS 単一モデル / 型式認定車バッジ)
========================================================= */
/* ============================================================
SP responsive additions (product detail) — audit-driven
Covers PC-only rules detected in
.ai/audit/pc-only-product-detail-rules.md
Scoped to body.page-detail or to product-detail-only classes
to avoid affecting other pages.
============================================================ */
/* ---------- 896px breakpoint ---------- */
@media (max-width: 896px) {
body.page-detail .detail-buy__price-num {
font-size: 26px;
}
body.page-detail .detail-buy__price-yen {
font-size: 16px;
}
body.page-detail .feat-pager__btn {
width: 36px;
height: 36px;
}
body.page-detail .feat-card__label {
padding: 14px 20px;
}
body.page-detail .spec-real__body {
font-size: 14px;
}
body.page-detail .spec-real__card-cap {
padding: 1rem 0.75rem 0.5rem;
font-size: 12px;
}
body.page-detail .related-item__icons img {
width: 22px;
height: 22px;
}
body.page-detail .related-item__name-en {
font-size: 18px;
}
body.page-detail .related-item__name-jp {
font-size: 13px;
}
body.page-detail .detail-buy__name-jp {
font-size: 16px;
}
}
/* ---------- 568px breakpoint ---------- */
@media (max-width: 568px) {
/* --- detail-gallery --- */
body.page-detail .detail-gallery__pager {
margin: 8px 0 2px;
}
body.page-detail .detail-gallery__feature-link {
font-size: 14px;
margin-top: 1rem;
}
body.page-detail .detail-gallery__feature-line {
margin: 0.4rem 0 1rem;
}
body.page-detail .detail-gallery__lifestyle {
margin-top: 1rem;
}
body.page-detail .detail-gallery__spec-link {
font-size: 14px;
padding: 0.75rem 1rem;
margin-top: 1rem;
}
body.page-detail .detail-gallery__movie-label {
font-size: 10px;
}
/* --- detail-buy --- */
body.page-detail .detail-buy__price {
margin-top: 0.5rem;
}
body.page-detail .detail-buy__block {
margin-top: 1.25rem;
}
/* --- detail-color --- */
body.page-detail .detail-color {
gap: 0.5rem 0.75rem;
}
body.page-detail .detail-color__swatch {
width: 24px;
height: 24px;
}
body.page-detail .detail-color__name {
font-size: 14px;
}
/* --- detail-pkg --- */
body.page-detail .detail-pkg__tab {
padding: 8px 14px;
font-size: 14px;
min-height: 44px;
}
body.page-detail .detail-pkg__tabs {
flex-wrap: wrap;
gap: 0.4rem;
}
body.page-detail .detail-pkg__panel {
margin-top: 0.75rem;
}
body.page-detail .detail-pkg__panel-title-en {
font-size: 13px;
}
body.page-detail .detail-pkg__panel-title-ja {
font-size: 11px;
}
body.page-detail .detail-pkg__panel-body {
font-size: 13px;
}
/* --- detail-qty --- */
body.page-detail .detail-qty {
gap: 0.5rem 1rem;
}
body.page-detail .detail-qty__select {
width: 100px;
height: 44px;
font-size: 14px;
}
body.page-detail .detail-qty__num {
height: 44px;
width: 48px;
font-size: 14px;
}
/* --- opt-card --- */
body.page-detail .opt-card__btn-body {
gap: 0.2rem;
}
body.page-detail .opt-card__btn-price-tax {
font-size: 10px;
}
body.page-detail .opt-card__detail {
font-size: 12px;
}
body.page-detail .opt-card__detail-icon {
width: 14px;
height: 14px;
}
/* --- detail-summary --- */
body.page-detail .detail-summary {
margin-top: 1.25rem;
}
body.page-detail .detail-summary__item-tax {
font-size: 10px;
}
body.page-detail .detail-summary__total-price {
text-align: right;
}
body.page-detail .detail-summary__total-notax {
font-size: 10px;
margin-left: 0.35rem;
}
/* --- detail-buy confirm icons --- */
body.page-detail .detail-buy__confirm-icon {
width: 16px;
height: 16px;
}
body.page-detail .detail-buy__confirm-links {
gap: 6px 14px;
margin-bottom: 1rem;
}
/* --- feat-sec-title --- */
body.page-detail .feat-sec-title {
margin-bottom: 0rem;
}
body.page-detail .feat-sec-title__line {
width: 24px;
}
body.page-detail .feat-sec-title__line-yellow {
left: 16px;
width: 8px;
}
body.page-detail .feat-sec-title__sub {
gap: 0.75rem;
}
/* --- feat-hero --- */
body.page-detail .feat-hero {
gap: 1.25rem;
margin-bottom: 2rem;
}
body.page-detail .feat-hero__brand {
gap: 0.25rem 0.5rem;
margin: 0.5rem 0 0;
}
body.page-detail .feat-hero__note {
font-size: 11px;
margin: 0.4rem 0 0;
}
/* --- feat-who --- */
body.page-detail .feat-who-heading {
margin: 0 0 1rem;
}
/* --- feat-urban --- */
body.page-detail .feat-urban {
padding-bottom: 2rem;
}
body.page-detail .feat-urban__imgs {
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
body.page-detail .feat-urban__img {
aspect-ratio: 322 / 446;
}
body.page-detail .feat-urban__points {
gap: 0.75rem;
}
body.page-detail .feat-point__marker {
width: 22px;
top: 0.6em;
}
body.page-detail .feat-point__marker::after {
left: 14px;
width: 8px;
}
/* --- feat-pager --- */
body.page-detail .feat-slider-wrap {
padding-bottom: 2.5rem;
}
body.page-detail .feat-pager {
gap: 14px;
}
body.page-detail .feat-pager__btn {
width: 32px;
height: 32px;
}
body.page-detail .feat-pager__btn svg {
width: 10px;
height: 10px;
}
body.page-detail .feat-pager__count {
font-size: 13px;
min-width: 44px;
}
/* --- feat-card --- */
body.page-detail .feat-card__media {
aspect-ratio: 470 / 352.5;
}
/* --- spec-head / spec-main --- */
body.page-detail .spec-head {
gap: 0.5rem 1rem;
margin-bottom: 1.5rem;
}
/* --- spec-real --- */
body.page-detail .spec-real {
gap: 1.5rem;
margin-top: 2rem;
}
body.page-detail .spec-real__body {
font-size: 13px;
}
body.page-detail .spec-real__card-cap {
padding: 0.75rem 0.6rem 0.4rem;
font-size: 11px;
}
body.page-detail .spec-real__card-img {
aspect-ratio: 3 / 2;
}
body.page-detail .spec-real__pager {
margin-top: 1rem;
}
body.page-detail .spec-real__note {
font-size: 12px;
}
/* --- spec-notes --- */
body.page-detail .spec-notes {
font-size: 12px;
margin-top: 1rem;
}
/* --- spec-compare --- */
body.page-detail .spec-compare__label {
font-size: 12px;
}
/* --- related-item: Task C — max-width 解除 + 内側調整 --- */
body.page-detail .related-item,
.apeider-related .related-item {
max-width: none;
flex: 1 1 0;
}
body.page-detail .related-item__icons {
gap: 0.3rem;
margin-bottom: 0.5rem;
}
body.page-detail .related-item__icons img {
width: 18px;
height: 18px;
}
body.page-detail .related-item__img {
margin-bottom: 0.75rem;
}
body.page-detail .related-item__link {
font-size: 12px;
}
body.page-detail .related-item__link-arrow {
width: 12px;
height: 12px;
}
/* --- detail-checked: Task D — SP で縦並び (1 カラム) --- */
#mp-rv-grid.pickup-grid {
grid-template-columns: 1fr;
}
#mp-rv-grid .pickup-item {
width: 100%;
border-right: none;
border-bottom: 1px solid var(--color-sub);
}
#mp-rv-grid .pickup-item:last-child {
border-bottom: none;
}
body.page-detail .detail-checked__note {
padding-top: 1rem;
}
/* --- form / fieldset --- */
body.page-detail .detail-buy__fieldset {
margin: 1.25rem 0 0;
}
/* --- detail-top reset --- */
body.page-detail .detail-top__layout {
gap: 1.5rem;
}
}
/* End of SP responsive additions */
gap: 1.5rem;
/* End of SP responsive additions */
/* ============================================================
AGGRESSIVE SP OPTIMIZATION mirror — product detail
Mirrors mp-product.css; uses body.page-detail scope
to avoid bleeding to other pages.
============================================================ */
@media (max-width: 896px) {
body.page-detail .feat-hero { margin-bottom: 2rem; }
body.page-detail .feat-riders { margin: 0 0 2rem; }
body.page-detail .spec-actions__btn { width: 100%; min-width: 0; }
body.page-detail .guide-block__title { font-size: 16px; }
body.page-detail .guide-block__text { line-height: 1.7; }
body.page-detail .trust-card { min-height: 0; }
}
@media (max-width: 568px) {
body.page-detail .detail-buy__brand img { height: 24px; }
body.page-detail .detail-buy__name { gap: 0.15rem 0.6rem; }
body.page-detail .detail-buy__name-en { font-size: 22px; line-height: 1.25; }
body.page-detail .detail-buy__name-jp { font-size: 14px; }
body.page-detail .detail-buy__price-num { font-size: 22px; }
body.page-detail .detail-buy__price-yen { font-size: 13px; }
body.page-detail .detail-buy__cart { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 15px; }
body.page-detail .feat-hero { gap: 1rem; margin-bottom: 1.75rem; }
body.page-detail .feat-hero__brand-en { font-size: 22px; line-height: 1.15; }
body.page-detail .feat-hero__brand-jp { font-size: 14px; }
body.page-detail .feat-hero__catch { font-size: 15px; line-height: 1.55; margin: 0.5rem 0 0; }
body.page-detail .feat-hero__body { font-size: 13px; line-height: 1.6; margin: 0.5rem 0 0; }
body.page-detail .feat-riders { margin: 0 0 1.5rem; }
body.page-detail .feat-urban__lead { margin: 0 0 1rem; }
body.page-detail .feat-urban__points { gap: 1rem; }
body.page-detail .feat-point__small { padding-left: 2rem; font-size: 13px; line-height: 1.55; }
body.page-detail .feat-point__big { font-size: 14px; line-height: 1.5; }
body.page-detail .feat-card__label { padding: 8px 12px; font-size: 13px; }
body.page-detail .feat-card__body { padding: 0.75rem 1rem 1rem; }
body.page-detail .feat-card__title { font-size: 13px; line-height: 1.5; }
body.page-detail .feat-card__desc { font-size: 12px; line-height: 1.55; }
body.page-detail .spec-subtitle { font-size: 15px; margin-bottom: 0.5rem; }
body.page-detail .spec-left .spec-subtitle { margin-top: 1rem; }
body.page-detail .spec-row { font-size: 12px; line-height: 1.5; }
body.page-detail .spec-row dt { flex-basis: 38%; padding: 0.5rem 0.5rem; }
body.page-detail .spec-row dd { padding: 0.5rem 0.5rem; }
body.page-detail .spec-actions { margin: 1.5rem 0 0; gap: 8px; }
body.page-detail .spec-actions__btn { width: 100%; min-width: 0; min-height: 48px; }
body.page-detail .spec-real__catch { font-size: 16px; line-height: 1.45; }
body.page-detail .trust-top { padding: 2rem 0; }
body.page-detail .trust-top__lead { font-size: 13px; margin-top: 0.75rem; }
body.page-detail .trust-card { min-height: 0; gap: 0.75rem; }
body.page-detail .trust-card__img { flex: 0 0 90px; width: 90px; }
body.page-detail .trust-card__body { padding: 0.75rem 0.75rem 0.75rem 0; }
body.page-detail .related-item { padding: 0.5rem; }
body.page-detail .detail-checked .pickup-item__name-en { font-size: 14px; line-height: 1.3; }
body.page-detail .detail-checked .pickup-item__name-jp { font-size: 12px; }
body.page-detail .detail-checked .pickup-item__price-num { font-size: 14px; }
body.page-detail .detail-checked .pickup-item__price-yen { font-size: 12px; }
body.page-detail .detail-guide { padding: 2rem 0; }
body.page-detail .guide-blocks { gap: 1.25rem; }
body.page-detail .guide-blocks__col { gap: 1.25rem; }
body.page-detail .guide-block__title { font-size: 14px; padding-left: 0.75rem; padding-top: 0.15rem; padding-bottom: 0.4rem; border-left-width: 3px; }
body.page-detail .guide-block__text { font-size: 12px; line-height: 1.6; padding-left: 0.75rem; border-left-width: 3px; }
body.page-detail .guide-intro__body { font-size: 12px; line-height: 1.6; margin-top: 0.5rem; }
/* img/video の page-detail safety-net は削除 (global と重複 + 明示 px 指定を破壊) */
body.page-detail table { max-width: 100%; }
body.page-detail .modal-content,
body.page-detail .feat-modal__dialog,
body.page-detail .insurance-modal__dialog,
body.page-detail .bouhan-modal__dialog { width: min(92vw, 480px); max-width: 92vw; padding: 1rem; }
/* モーダル内 guide-sec 系: SP用縮小 */
.guide-sec__title { font-size: 12px; }
.guide-sec__num { font-size: 24px; }
.guide-text { font-size: 10px; }
.guide-subhead { font-size: 12px; }
.guide-disc, .guide-decimal { font-size: 10px; }
.guide-cond { font-size: 12px; }
.guide-cond__label { font-size: 12px; }
.guide-cond__value { font-size: 10px; }
/* モーダル内全ボタン (guide-modal-more-wrap 内 btn-main) */
.guide-modal-more-wrap .btn-main {
width: 100%;
padding: 10px 20px;
font-size: 14px;
}
/* ins-meta */
.guide-ins-meta__row dt,
.guide-ins-meta__row dd { font-size: 12px; }
.guide-ins-meta__num { font-size: 18px; }
}
/* End of aggressive SP optimization mirror */
/* feat-rider/feat-card のタイトルは 1440px 以下で 18px に縮小 */
@media (max-width: 896px) {
.related-grid .related-item { max-width: 100%; flex-basis: 100%; }
#mp-rv-grid.pickup-grid { grid-template-columns: 1fr; }
#mp-rv-grid .pickup-item { width: 100%; border-right: none; border-bottom: 1px solid var(--color-sub); }
#mp-rv-grid .pickup-item:last-child { border-bottom: none; }
}
/* =========================================================
ガイド/お支払いページ レスポンシブ補強 v2
========================================================= */
.flow-step .guide-defects__heading,
.flow-step .guide-defects__title { margin-top: 40px; }
.receive-shop__map img { width: 14px !important; height: 17px !important; flex: 0 0 auto; }
.receive-shop { flex-wrap: wrap; min-width: 0; }
.receive-shop__name { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 1280px) {
.ship-table__row { flex-direction: column; gap: 6px; padding: 16px 4px; }
.ship-table__row dt { flex-basis: auto; width: 100%; padding: 0; text-align: left; justify-content: flex-start; font-size: 16px; }
.ship-table__row dd { padding: 0; border-left: none; }
}
@media (max-width: 896px) {
.flow-step { padding: 24px 24px 28px 52px; margin-left: 28px; }
.flow-step__badge { width: 60px; height: 60px; top: 22px; }
.flow-step__num { font-size: 26px; }
.flow-step__step { font-size: 14px; }
.receive-card { min-width: 0; flex-basis: 100%; }
.receive-check__panel,
.receive-check__panel--wide { min-width: 0; flex-basis: 100%; }
.receive-check__panel--wide .receive-check__photo { position: static; transform: none; width: 220px; height: auto; margin: 16px auto 0; right: auto; top: auto; }
.flow-step__text { min-width: 0; flex-basis: 100%; }
.flow-step__img,
.flow-step__aside { flex-basis: auto; width: 100%; max-width: 100%; }
.receive-tel__num { font-size: 28px; }
}
@media (max-width: 568px) {
.flow-step { padding: 18px 14px 22px 40px; margin-left: 22px; }
/* .flow-step__badge { width: 44px; height: 44px; top: 18px; } */
.flow-step__num { font-size: 22px; }
.flow-step__step { font-size: 11px; }
.flow-step__title { font-size: 18px; }
.receive-card,
.receive-check__panel,
.receive-check__panel--wide,
.flow-step__text { min-width: 0; flex-basis: 100%; }
.flow-step__img,
.flow-step__aside { width: 100%; max-width: 100%; flex-basis: auto; }
.receive-tel { gap: 8px; }
.receive-tel__num { font-size: 22px; }
.receive-tel__num img { height: 20px; }
.flow-step .guide-defects__heading,
.flow-step .guide-defects__title { margin-top: 28px; }
.receive-shop__info dt { flex-basis: 56px; font-size: 13px; }
.receive-shop__info > div { font-size: 13px; }
.receive-fee__price { font-size: 16px; }
.receive-fee__num { font-size: 20px; }
.pay-loan-head { flex-wrap: wrap; }
.pay-loan-head img { height: 30px; }
.pay-loan-head span { font-size: 16px; }
.pay-subhead { font-size: 15px; }
}
/* === detail-gallery caption (2026-06-22 #26-27) === */
.detail-gallery__caption {
margin: 12px 0 4px;
font-family: var(--font-ja);
font-size: 13px;
line-height: 1.6;
color: var(--color-black, #141413);
}
@media (max-width: 568px) {
.detail-gallery__caption { font-size: 12px; }
}
/* === spec-notes layout fix (2026-06-22) — each ※n+body wraps as block === */
.spec-notes {
display: block !important;
margin-top: 1.25rem;
font-family: var(--font-ja);
font-size: 14px;
line-height: 1.7;
color: var(--color-black, #141413);
}
.spec-notes__item {
display: flex;
align-items: flex-start;
gap: 0.4em;
margin-bottom: 8px;
}
.spec-notes__item:last-child { margin-bottom: 0; }
.spec-notes__mark {
flex: 0 0 auto;
margin: 0;
font-weight: 600;
}
.spec-notes__body {
flex: 1 1 auto;
margin: 0;
}
@media (max-width: 568px) {
.spec-notes { font-size: 12px; line-height: 1.6; }
}
/* === detail-gallery__features margin-bottom override (page-detail only) === */
body.page-detail .detail-gallery__features {
margin-bottom: 0;
}
/* === REAL DISTANCE — 全商品共通 + 動画オプション (Figma node 2032:43246) === */
.detail-realdist-test {
padding: 60px 0;
}
.mp-realdist-test {
margin-top: 0;
display: flex;
flex-direction: row;
gap: 40px 60px;
align-items: stretch;
color: #222;
}
.mp-realdist-test__left {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 25px;
min-width: 0;
}
.mp-realdist-test__right {
flex: 0 0 45%;
}
.mp-realdist-test__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #000;
}
.mp-realdist-test--no-video {
flex-direction: column;
gap: 25px;
}
.mp-realdist-test--no-video .mp-realdist-test__left {
width: 100%;
flex: 1 1 auto;
}
.mp-realdist-test__heading {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
}
.mp-realdist-test__heading .mp-realdist-test__ja {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.4;
color: #273240;
}
.mp-realdist-test__heading .mp-realdist-test__en {
font-family: "Rubik", sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.1em;
color: #f5ea00;
background: #273240;
align-self: flex-start;
padding: 2px 10px;
border-radius: 2px;
}
.mp-realdist-test__catch {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 1.7;
margin: 0;
}
.mp-realdist-test__desc {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
margin: 0;
}
.mp-realdist-test__result {
display: flex;
flex-direction: column;
gap: 10px;
max-width: 539px;
}
.mp-realdist-test__result-ttl {
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.7;
margin: 0;
color: #222;
}
.mp-realdist-test__result-line {
display: flex;
align-items: center;
height: 1px;
width: 100%;
background: #273240;
position: relative;
}
.mp-realdist-test__result-line-yl {
display: block;
width: 64px;
height: 1px;
background: #f5ea00;
}
.mp-realdist-test__result-body {
display: flex;
gap: 30px;
align-items: stretch;
}
.mp-realdist-test__card {
width: 200px;
flex: 0 0 200px;
display: flex;
flex-direction: column;
border-radius: 5px;
overflow: hidden;
}
.mp-realdist-test__card-ttl {
background: #273240;
color: #fff;
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.7;
text-align: center;
padding: 8px 20px;
margin: 0;
}
.mp-realdist-test__card-val {
background: #273240;
color: #f5ea00;
font-family: "Rubik", sans-serif;
font-weight: 500;
text-align: center;
padding: 5px 20px;
margin: 0;
border-top: 1px solid #f5ea00;
display: flex;
align-items: baseline;
justify-content: center;
gap: 2px;
}
.mp-realdist-test__card-val .num {
font-size: 32px;
line-height: 1.5;
}
.mp-realdist-test__card-val .unit {
font-size: 20px;
line-height: 1.7;
}
.mp-realdist-test__meta {
display: flex;
gap: 20px;
align-items: center;
margin: 0;
padding-left: 0;
padding-right: 20px;
}
.mp-realdist-test__meta-row {
display: contents;
}
.mp-realdist-test__meta {
display: grid;
grid-template-columns: max-content max-content;
column-gap: 20px;
row-gap: 0;
align-content: center;
/* border-left: 1px solid #273240; */
/* padding-left: 20px; */
}
.mp-realdist-test__meta dt{
min-width: 66px;
border-right: 1px solid var(--color-main);
}
.mp-realdist-test__meta dt,
.mp-realdist-test__meta dd {
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.7;
margin: 0;
color: #000;
}
@media (max-width: 896px) {
.detail-realdist-test { padding: 40px 0; }
.mp-realdist-test {
flex-direction: column;
margin-top: 0;
gap: 24px;
}
.mp-realdist-test__left { width: 100%; gap: 20px; }
.mp-realdist-test__right { flex: 0 0 auto; max-width: 100%; width: 100%; }
.mp-realdist-test__heading .mp-realdist-test__ja { font-size: 22px; }
.mp-realdist-test__heading .mp-realdist-test__en { font-size: 12px; }
.mp-realdist-test__catch { font-size: 18px; }
.mp-realdist-test__desc { font-size: 15px; }
.mp-realdist-test__result { max-width: 100%; }
}
@media (max-width: 568px) {
.detail-realdist-test { padding: 30px 0; }
.mp-realdist-test { margin-top: 0; gap: 16px; }
.mp-realdist-test__left { gap: 16px; }
.mp-realdist-test__heading .mp-realdist-test__ja { font-size: 20px; }
.mp-realdist-test__heading .mp-realdist-test__en { font-size: 11px; }
.mp-realdist-test__catch { font-size: 16px; line-height: 1.6; }
.mp-realdist-test__desc { font-size: 14px; line-height: 1.7; }
.mp-realdist-test__result-ttl { font-size: 16px; }
.mp-realdist-test__result-body {
flex-direction: column;
gap: 20px;
align-items: stretch;
}
.mp-realdist-test__card {
width: 100%;
flex: 0 0 auto;
flex-direction: unset;
/* max-width: 240px; */
}
.mp-realdist-test__card-ttl { font-size: 16px; display: flex; align-items: center;}
.mp-realdist-test__card-val{border-top: unset; border-left: 1px solid var(--color-accent); border-radius: 0px 5px 5px 0px;}
.mp-realdist-test__card-val .num { font-size: 28px; }
.mp-realdist-test__card-val .unit { font-size: 18px; }
.mp-realdist-test__meta {
column-gap: 12px;
padding-left: 0;
border-left: none;
border-top: 1px solid #273240;
padding-top: 16px;
}
.mp-realdist-test__meta dt,
.mp-realdist-test__meta dd { font-size: 13px; }
}
/* === #pay-credit リデザイン 2026-06 === */
.pay-credit__exp{display: block; width: 100%; height: auto;}
.pay-credit__lead-row{display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: nowrap;}
.pay-credit__lead-text{flex: 1 1 auto; min-width: 0;}
.pay-credit__lead-text > p{margin: 0;}
.pay-credit__lead-row .pay-brands{flex: 0 0 auto; margin: 0; gap: 8px;}
.pay-credit__lead-row .pay-brand{width: auto;}
.pay-credit__lead-row .pay-brand img{width: auto; display: block;}
.pay-credit__bunkatu-row{display: flex; gap: 40px; align-items: center; margin-top: 24px;}
.pay-credit__bunkatu-col{width: 364px; flex: 0 0 364px;}
.pay-credit__bunkatu-heading{margin: 0;}
.pay-credit__bunkatu-heading img{display: block; width: 100%; height: auto;}
.pay-credit__bunkatu-col .pay-credit__media-notes{margin-top: 16px;}
.flow-step__img.pay-credit__media{width: calc(100% - 404px); flex: 1 1 auto; margin: 0;}
.pay-credit__media .pay-credit__exp{display: block; width: 100%; height: auto;}
@media (max-width: 1440px){
.pay-credit__bunkatu-row{flex-direction: column; align-items: unset;}
.flow-step__img.pay-credit__media,.pay-credit__bunkatu-col{width: 100%; flex: unset; max-width: unset;}
.pay-credit__bunkatu-col{display: flex; gap: 20px;}
}
@media (max-width: 1000px){
.pay-credit__bunkatu-col{flex-direction: column; gap: 0;}
.pay-credit__bunkatu-heading{max-width: 360px;}
}
@media (max-width: 896px){
.pay-credit__lead-row{flex-direction: column; align-items: flex-start; gap: 12px;}
.pay-credit__lead-row .pay-brands{justify-content: center; width: 100%; gap: 8px;}
.pay-credit__lead-row .pay-brand img{height: 24px;}
.pay-credit__bunkatu-row{flex-direction: column; gap: 20px; margin-top: 16px;}
.pay-credit__bunkatu-col{width: 100%; flex: 0 0 auto;}
.flow-step__img.pay-credit__media{width: 100%;}
}
/* === .page-brand 集約ブロック (auto-generated) === */
.page-brand .ic-secttl{
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 0 0 36px;
flex-wrap: wrap;
}
.page-brand .ic-secttl__ja{
font-family: var(--font-serif);
font-weight: 400;
font-size: 36px;
letter-spacing: 1.8px;
line-height: 1.5;
color: var(--color-black);
}
.page-brand .ic-secttl__line{
display: none;
position: relative;
width: 30px;
height: 1px;
background: var(--color-main);
flex-shrink: 0;
}
.page-brand .ic-secttl__en{
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-en);
font-weight: 400;
font-size: 20px;
letter-spacing: 1px;
line-height: 1.5;
color: var(--color-black);
text-transform: uppercase;
}
.page-brand .ic-secttl__en::before{
content: "";
display: inline-block;
width: 30px;
height: 1px;
background: linear-gradient(to right, var(--color-main) 0, var(--color-main) 20px, var(--color-accent) 20px, var(--color-accent) 30px);
flex-shrink: 0;
}
.page-brand .ic-secttl--light .ic-secttl__en{
color: var(--color-accent);
}
.page-brand .ic-secttl--light .ic-secttl__en::before{
background: linear-gradient(to right, #fff 0, #fff 20px, var(--color-accent) 20px, var(--color-accent) 30px);
}
.page-brand .ic-kv{
min-height: 480px;
align-items: flex-start;
padding-top: clamp(120px, 12.7vw, 185px);
}
.page-brand .ic-kv{
max-height: 700px;
height: 43vw;
min-height: 480px;
}
.page-brand .ic-lead{
position: relative;
overflow: visible;
background: var(--color-bg-yellow);
padding: 0 0 88px;
}
.page-brand .ic-lead__photo img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.45;
}
.page-brand .ic-lead__photo::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--color-bg-yellow) 0%, var(--color-bg-yellow) 38%, rgba(243,240,234,0) 82%),
linear-gradient(0deg, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 32%);
}
.page-brand .ic-lead__brand{
width: fit-content;
display: flex;
align-items: flex-end;
gap: 20px;
margin-top: 0;
margin-bottom: 32px;
padding: 20px 36px;
background: var(--color-bg-yellow);
border-radius: 5px;
position: absolute;
top: -76px;
left: 0;
right: 0;
z-index: 3;
}
.page-brand .ic-kv__breadcrumb{
margin-top: 0;
padding: 0;
position: relative;
z-index: 2;
}
.page-brand .ic-kv__breadcrumb .breadcrumb__item, .page-brand .ic-kv__breadcrumb .breadcrumb__item a{
color: #fff;
}
.page-brand .ic-kv__breadcrumb .breadcrumb__item[aria-current="page"]{
color: rgba(255,255,255,0.85);
}
.page-brand .ic-kv__breadcrumb .breadcrumb__item:not(:last-child)::after{
content: "";
display: inline-block;
width: 13px;
height: 10px;
margin: 0 12px;
border: 0;
transform: none;
opacity: 1;
background: url(mp-cmn-icon_arrow_btn_wh.svg) center / contain no-repeat;
}
.page-brand .ic-story{
background: var(--color-bg-yellow);
padding: 0 0 90px;
}
.page-brand .ic-story__lead{
display: flex;
align-items: flex-start;
gap: 48px;
margin: 32px 0 50px;
position: relative;
z-index: 2;
}
.page-brand .ic-story__text{
flex: 1;
min-width: 0;
}
.page-brand .ic-story__bike{
width: 480px;
flex-shrink: 0;
align-self: center;
}
.page-brand .ic-story__bike img{
width: 100%;
height: auto;
display: block;
}
.page-brand .ic-story__row{
display: flex;
align-items: center;
gap: 28px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.page-brand .ic-story__logo{
font-family: var(--font-en);
font-weight: 500;
font-size: 40px;
line-height: 1;
color: var(--color-text);
margin: 0;
}
.page-brand .ic-story__catch{
font-family: var(--font-serif);
font-weight: 600;
font-size: 24px;
line-height: 1.5;
letter-spacing: .6px;
color: var(--color-text);
margin: 0;
padding-left: 28px;
border-left: 1px solid var(--color-main);
}
.page-brand .ic-story__intro{
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
max-width: 820px;
}
.page-brand .ic-timeline__item:not(:first-child)::after{
content: "";
position: absolute;
left: 0;
top: 52px;
bottom: 0;
width: 1px;
background: var(--color-sub);
}
.page-brand .ic-timeline__line{
position: relative;
height: 1px;
background: #222;
margin: 0 0 36px;
}
.page-brand .ic-timeline__dot::after{
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
width: 1px;
height: 14px;
background: #222;
}
.page-brand .ic-timeline__img{
aspect-ratio: 295 / 186;
overflow: hidden;
margin: auto -28px 0;
position: relative;
border-radius: 8px;
margin-top: auto;
}
.page-brand .ic-timeline__img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page-brand .ic-timeline__item:first-child .ic-timeline__img::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 75%;
background: linear-gradient(to right, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 100%);
pointer-events: none;
}
.page-brand .ic-timeline__item:last-child .ic-timeline__img::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 75%;
background: linear-gradient(to left, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 100%);
pointer-events: none;
}
.page-brand .ic-review{
background: var(--color-bg-yellow);
padding: 80px 0;
}
.page-brand .ic-review__brand{
font-family: var(--font-serif);
font-weight: 600;
font-size: 24px;
letter-spacing: 1.2px;
line-height: 1.5;
color: var(--color-text);
}
.page-brand .ic-review__en{
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-en);
font-size: 20px;
color: var(--color-black);
margin: 0 0 28px;
text-transform: uppercase;
}
.page-brand .ic-review__en::before{
content: "";
display: inline-block;
width: 30px;
height: 1px;
flex-shrink: 0;
background: linear-gradient(to right, var(--color-main) 0, var(--color-main) 20px, var(--color-accent) 20px, var(--color-accent) 30px);
}
.page-brand .ic-review__list{
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
list-style: none;
padding: 0;
margin: 0;
align-items: stretch;
}
.page-brand .ic-review__card{
background: #fff;
display: grid;
grid-template-rows: auto auto 1fr;
height: 100%;
}
.page-brand .ic-review__img{
aspect-ratio: 3 / 2;
margin: 0;
overflow: hidden;
margin-bottom: 22px;
}
.page-brand .ic-review__img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page-brand .ic-review__ttl{
font-family: var(--font-serif);
font-weight: 600;
font-size: 20px;
line-height: 1.5;
letter-spacing: .5px;
color: var(--color-text);
margin: 22px 24px 14px;
min-height: calc(1.5em * 2);
}
.page-brand .ic-review__txt{
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin: 0 24px 24px;
}
.page-brand .ic-collection{
position: relative;
overflow: hidden;
background: var(--color-bg-yellow);
padding: 80px 0 90px;
}
.page-brand .ic-collection__photo{
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 460px;
pointer-events: none;
}
.page-brand .ic-collection__photo img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.32;
}
.page-brand .ic-collection__photo::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 55%),
linear-gradient(0deg, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 60%);
}
.page-brand .ic-collection__body{
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 320px;
}
.page-brand .ic-collection__slider-wrap{
position: relative;
margin: 0 calc(50% - 50vw);
padding: 0;
}
.page-brand .ic-collection__slider{
padding: 0;
}
.page-brand .ic-collection__slider .slick-list{
overflow: visible;
}
.page-brand .ic-collection__slider .slick-track{
display: flex;
align-items: stretch;
}
.page-brand .ic-collection__slider .slick-slide{
height: auto;
padding: 0 36px;
box-sizing: border-box;
display: flex;
}
.page-brand .ic-collection__slider .slick-slide > .ic-bike, .page-brand .ic-collection__slider .slick-slide > div{
width: 100%;
height: 100%;
display: flex;
}
.page-brand .ic-collection__slider .ic-bike, .page-brand .ic-collection__single .ic-bike{
background: transparent;
box-sizing: border-box;
text-decoration: none;
width: 100%;
display: grid;
grid-template-rows: auto auto auto 1fr auto;
gap: 4px 0;
align-self: stretch;
}
.ic-collection__slider-wrap .page-brand .ic-collection__slider .ic-bike, .page-brand .ic-collection__slider-wrap .ic-collection__slider .ic-bike{
padding-bottom: 36px;
border-bottom: 1px solid var(--color-sub);
}
.page-brand .ic-collection__slider-wrap .slick-slider{
margin-bottom: unset;
}
.page-brand .ic-bike{
padding: 0;
}
.page-brand .ic-bike__icons{
display: flex;
gap: 6px;
margin-left: auto;
align-items: center;
align-self: center;
}
.page-brand .ic-bike__img{
aspect-ratio: 320 / 188;
display: flex;
align-items: flex-end;
justify-content: center;
margin: 0 0 4px;
overflow: hidden;
margin-bottom: 12px;
}
.page-brand .ic-bike__img img{
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 14px 14px rgba(0,0,0,.18));
}
.page-brand .ic-bike__name{
display: flex;
align-items: baseline;
gap: 10px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-sub);
margin: 0;
min-height: 2.4em;
position: relative;
margin-bottom: 16px;
}
.page-brand .ic-bike__name::before, .page-brand .ic-bike__name::after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
height: 1px;
transform: translateX(-50%);
}
.page-brand .ic-bike__name::before{
width: calc(100% + 74px);
background: var(--color-sub);
}
.page-brand .ic-bike__name::after{
width: calc(100% + 72px);
background: linear-gradient(to right,
var(--color-sub) 0,
var(--color-sub) 36px,
var(--color-accent) 36px,
var(--color-accent) 58px,
var(--color-main) 58px,
var(--color-main) 55%,
var(--color-sub) 55%);
}
.page-brand .ic-bike__name-en{
font-family: var(--font-en);
font-weight: 500;
font-size: 30px;
color: var(--color-text);
line-height: 1.5;
}
.page-brand .ic-bike__name-jp{
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
color: var(--color-text);
line-height: 1.7;
}
.page-brand .ic-bike__catch{
font-family: var(--font-ja);
font-weight: 600;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
margin: 4px 0;
min-height: calc(1.6em * 2);
margin-bottom: 14px;
}
.page-brand .ic-bike__txt{
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin: 0 0 12px;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 20px;
}
.page-brand .ic-bike__foot{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
position: relative;
padding-top: 0;
}
.page-brand .ic-bike__price{
font-family: var(--font-en);
font-weight: 500;
color: var(--color-text);
margin: 0;
}
.page-brand .ic-bike__price-yen{
font-family: var(--font-ja);
font-weight: 700;
font-size: 14px;
}
.page-brand .ic-bike__more img{
width: 22px;
height: 22px;
}
.page-brand .ic-collection__pager{
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: unset;
transform: translateY(-50%);
pointer-events: auto;
}
.page-brand .ic-collection__arrow{
position: relative;
z-index: 4;
background: var(--color-accent);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--color-main);
pointer-events: auto;
}
.page-brand .ic-collection__arrow svg{
pointer-events: none;
width: 14px;
height: 14px;
}
.page-brand .ic-collection__count{
font-family: var(--font-en);
font-size: 16px;
color: var(--color-text);
min-width: 5em;
text-align: center;
}
.page-brand .ic-collection__note{
justify-content: center;
margin-top: 44px;
}
.page-brand .ic-collection__single{
max-width: 400px;
margin: 0 auto;
}
.page-brand .ic-ideal{}
.page-brand .ic-ideal__head{
background: var(--color-main);
text-align: center;
padding: 34px 16px;
margin-bottom: 5px;
}
.page-brand .ic-ideal__en{
display: inline-flex;
font-family: var(--font-en);
font-size: 20px;
letter-spacing: 1px;
color: #fff;
margin-top: 8px;
padding: 0 4px;
text-transform: uppercase;
line-height: 1.4;
background: linear-gradient(to top, var(--color-accent) 0, var(--color-accent) 28%, transparent 28%);
align-items: center;
gap: 10px;
}
.page-brand .ic-ideal__en-bar{
display: inline-block;
width: 24px;
height: 8px;
background: var(--color-accent);
}
.page-brand .ic-ideal__panels{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.page-brand .ic-ideal__list li::before{
content: "";
position: absolute;
left: 0;
top: .5em;
width: 22px;
height: 22px;
background-color: rgba(255,255,255,.92);
-webkit-mask: url(mp-img-pages-ape-ryder-check.svg) center / contain no-repeat;
mask: url(mp-img-pages-ape-ryder-check.svg) center / contain no-repeat;
}
.page-brand .ic-compare{
background: #fff;
padding: 80px 0;
}
.page-brand .ic-compare__table tbody th[scope="row"]{
text-align: center;
vertical-align: middle;
font-family: var(--font-ja);
font-weight: 600;
font-size: 18px;
color: #000;
width: 200px;
}
.page-brand .ic-compare__range-num{
font-family: var(--font-ja);
font-weight: 400;
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
}
.page-brand .ic-compare__range-note{
font-family: var(--font-ja);
font-weight: 400;
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin: 0;
}
.page-brand .ic-trust__cards{
flex: 1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
list-style: none;
padding: 0;
margin: 0;
align-items: stretch;
}
.page-brand .ic-trust__card{
background: #fff;
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
}
.page-brand .ic-trust__img{
aspect-ratio: 3 / 2;
margin: 0;
overflow: hidden;
margin-bottom: 20px;
}
.page-brand .ic-trust__img img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.page-brand .ic-trust__body{
display: grid;
grid-template-rows: auto 1fr;
}
.page-brand .ic-trust__ttl{
font-family: var(--font-serif);
font-weight: 600;
font-size: 20px;
line-height: 1.5;
letter-spacing: .5px;
color: var(--color-text);
margin: 22px 24px 14px;
min-height: calc(1.5em * 2);
margin-bottom: 14px;
}
.page-brand .ic-trust__txt{
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin: 0 24px 24px;
}
.page-brand .ic-closing{
position: relative;
display: flex;
align-items: center;
min-height: 404px;
margin-bottom: 80px;
overflow: hidden;
}
.page-brand .ic-brands{
background: #fff;
padding: 80px 0 90px;
margin-bottom: 80px;
}
.page-brand .ic-brands__en{
display: inline-flex;
font-family: var(--font-en);
font-size: 20px;
letter-spacing: 1px;
color: var(--color-main);
margin-top: 8px;
padding: 0 4px;
text-transform: uppercase;
line-height: 1.4;
background: linear-gradient(to top, var(--color-accent) 0, var(--color-accent) 28%, transparent 28%);
align-items: center;
gap: 10px;
}
.page-brand .ic-brands__en-bar{
display: inline-block;
width: 24px;
height: 8px;
background: var(--color-accent);
}
.page-brand .ic-brands__table th, .page-brand .ic-brands__table td{
border-bottom: 1px solid var(--color-sub);
border-right: 1px solid var(--color-sub);
padding: 20px 22px;
vertical-align: top;
text-align: center;
}
.page-brand .ic-brands__table tr > *:last-child{
border-right: none;
}
.page-brand .ic-brands__corner{
border-top: 0;
border-left: 0;
border-bottom: 0;
border-right: 1px solid var(--color-sub);
text-align: center;
vertical-align: middle;
border: 0;
}
.page-brand .ic-brands__table th.ic-brands__bhead{
padding: 0 0 24px;
vertical-align: top;
position: relative;
}
.page-brand .ic-brands__tag{
display: block;
align-items: center;
justify-content: center;
background: var(--color-main);
color: var(--color-accent);
font-family: var(--font-en);
font-weight: 500;
font-size: 20px;
letter-spacing: 1px;
text-align: center;
padding: 10px;
min-height: calc(20px * 1.5 + 20px);
margin: 0 -1px;
position: relative;
}
.page-brand .ic-brands__bhead:last-child .ic-brands__tag{
margin-right: 0;
}
.page-brand .ic-brands__bhead:not(:last-child)::after{
content: "";
position: absolute;
right: -1px;
top: 10px;
height: 30px;
width: 1px;
background: var(--color-accent);
z-index: 5;
pointer-events: none;
}
.page-brand .ic-brands__table tbody th[scope="row"]{
text-align: center;
vertical-align: middle;
font-family: var(--font-ja);
font-weight: 600;
font-size: 18px;
color: #000;
}
.page-brand .ic-stars{
--star-size: 22px;
--star-gap: 4px;
position: relative;
display: inline-flex;
width: calc(var(--star-size) * 5 + var(--star-gap) * 4);
height: var(--star-size);
vertical-align: middle;
gap: 4px;
font-size: 20px;
line-height: 1;
color: var(--color-sub);
}
.page-brand .ic-stars::before, .page-brand .ic-stars::after{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-repeat: repeat-x;
background-size: calc(var(--star-size) + var(--star-gap)) var(--star-size);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: repeat-x;
mask-repeat: repeat-x;
-webkit-mask-size: calc(var(--star-size) + var(--star-gap)) var(--star-size);
mask-size: calc(var(--star-size) + var(--star-gap)) var(--star-size);
}
.page-brand .ic-stars::before{
right: 0;
background-color: var(--color-sub);
}
.page-brand .ic-stars::after{
background-color: #FFB300;
width: 0;
}
.page-brand .ic-stars[data-rate="1"]::after{
width: var(--star-size);
}
.page-brand .ic-stars[data-rate="2"]::after{
width: calc(var(--star-size) * 2 + var(--star-gap));
}
.page-brand .ic-stars[data-rate="3"]::after{
width: calc(var(--star-size) * 3 + var(--star-gap) * 2);
}
.page-brand .ic-stars[data-rate="4"]::after{
width: calc(var(--star-size) * 4 + var(--star-gap) * 3);
}
.page-brand .ic-stars[data-rate="5"]::after{
width: calc(var(--star-size) * 5 + var(--star-gap) * 4);
}
.page-brand .ic-main{
overflow: hidden;
}
.page-brand .ic-secttl__ja-sm{
display: block;
font-size: 24px;
letter-spacing: 1.2px;
}
.page-brand .ic-secttl__line::after{
content: "";
position: absolute;
right: 0;
top: 0;
width: 10px;
height: 1px;
background: var(--color-accent);
}
.page-brand .ic-secttl--light .ic-secttl__ja, .page-brand .ic-secttl--light .ic-secttl__en{
color: var(--color-white);
}
.page-brand .ic-secttl--light .ic-secttl__line{
background: rgba(255,255,255,.7);
}
.page-brand .ic-kv__img{
position: absolute;
inset: 0;
}
.page-brand .ic-kv__img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 42%;
}
.page-brand .ic-kv__overlay{
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.1) 100%);
}
.page-brand .ic-kv__cat{
font-family: var(--font-serif);
font-size: 20px;
letter-spacing: 1px;
color: #fff;
text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
.page-brand .ic-kv__en{
font-family: var(--font-en);
font-size: 24px;
color: var(--color-accent);
margin-top: 6px;
text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
.page-brand .ic-kv__name{
display: flex;
align-items: baseline;
gap: 6px 16px;
flex-wrap: wrap;
margin-top: 0;
}
.page-brand .ic-kv__name-en{
font-family: var(--font-serif);
font-weight: 600;
font-size: 46px;
letter-spacing: 2.3px;
color: #fff;
}
.page-brand .ic-kv__name-jp{
font-family: var(--font-ja);
font-weight: 600;
font-size: 23px;
color: #fff;
}
.page-brand .ic-lead__photo{
position: absolute;
top: 0;
right: 0;
width: 64%;
height: 100%;
}
.page-brand .ic-lead__inner{
position: relative;
padding-top: 60px;
z-index: 2;
}
.page-brand .ic-lead__logo{
height: 54px;
width: auto;
}
.page-brand .ic-lead__brand-jp{
font-family: var(--font-ja);
font-weight: 600;
font-size: 30px;
letter-spacing: 1.5px;
line-height: 1.2;
color: var(--color-text);
}
.page-brand .ic-lead__heading{
font-family: var(--font-serif);
font-weight: 600;
font-size: 40px;
line-height: 1.5;
letter-spacing: 1px;
color: var(--color-text);
margin-bottom: 28px;
max-width: 560px;
}
.page-brand .ic-lead__body{
font-size: 20px;
line-height: 1.7;
color: var(--color-text);
max-width: 980px;
}
.page-brand .ic-story__hero{
position: relative;
display: flex;
align-items: center;
min-height: 620px;
padding: 88px 0;
margin-bottom: 56px;
overflow: hidden;
}
.page-brand .ic-story__hero-bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 76% 30%;
}
.page-brand .ic-story__hero-overlay{
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(243,240,234,.97) 0%, rgba(243,240,234,.9) 28%, rgba(243,240,234,.45) 46%, rgba(243,240,234,0) 64%),
linear-gradient(0deg, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 22%);
}
.page-brand .ic-story .ic-secttl{
position: relative;
z-index: 2;
}
.page-brand .ic-timeline{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
.page-brand .ic-timeline__item{
position: relative;
display: flex;
flex-direction: column;
padding: 0 28px;
}
.page-brand .ic-timeline__year{
font-family: var(--font-en);
font-weight: 500;
font-size: 30px;
line-height: 1.2;
text-align: center;
color: #000;
margin: 0 0 16px;
}
.page-brand .ic-timeline__dot{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--color-accent);
border: 1px solid #222;
}
.page-brand .ic-timeline__dot::before{
content: "";
position: absolute;
left: 50%;
bottom: 100%;
transform: translateX(-50%);
width: 1px;
height: 14px;
background: #222;
}
.page-brand .ic-timeline__ttl{
font-family: var(--font-serif);
font-weight: 600;
font-size: 20px;
line-height: 1.5;
text-align: center;
letter-spacing: .5px;
color: var(--color-text);
margin: 0 0 16px;
}
.page-brand .ic-timeline__txt{
font-size: 14px;
line-height: 1.7;
color: var(--color-text);
margin: 0 0 28px;
}
.page-brand .ic-review__layout{
display: flex;
align-items: flex-start;
gap: 56px;
}
.page-brand .ic-review__head{
width: 440px;
flex-shrink: 0;
}
.page-brand .ic-review__h{
font-family: var(--font-serif);
font-weight: 400;
font-size: 36px;
letter-spacing: 1.8px;
line-height: 1.5;
color: var(--color-black);
margin: 0 0 12px;
}
.page-brand .ic-review__lead{
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
}
.page-brand .ic-collection .container{
position: relative;
z-index: 2;
}
.page-brand .ic-collection__catch{
font-family: var(--font-serif);
font-weight: 600;
font-size: 24px;
line-height: 1.5;
letter-spacing: .6px;
color: var(--color-text);
margin-bottom: 16px;
}
.page-brand .ic-collection__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
list-style: none;
padding: 0;
margin: 0;
}
.page-brand .ic-bike__icons img{
width: 28px;
height: 28px;
}
.page-brand .ic-bike__price-num{
font-size: 20px;
}
.page-brand .ic-bike__price-tax{
font-family: var(--font-ja);
font-weight: 700;
font-size: 12px;
}
.page-brand .ic-bike__more{
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-en);
font-weight: 500;
font-size: 14px;
color: var(--color-main);
white-space: nowrap;
}
.page-brand .ic-ideal__title{
font-family: var(--font-serif);
font-weight: 600;
font-size: 30px;
letter-spacing: .75px;
color: #fff;
}
.page-brand .ic-ideal__panel{
position: relative;
min-height: 382px;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.page-brand .ic-ideal__bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-brand .ic-ideal__grad{
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.9) 100%);
}
.page-brand .ic-ideal__body{
position: relative;
z-index: 2;
padding: 0 50px 44px;
width: 100%;
}
.page-brand .ic-ideal__ttl{
font-family: var(--font-serif);
font-weight: 600;
font-size: 24px;
letter-spacing: .6px;
color: #fff;
margin-bottom: 18px;
}
.page-brand .ic-ideal__list{
list-style: none;
padding: 0;
margin: 0;
}
.page-brand .ic-ideal__list li{
position: relative;
padding-left: 36px;
font-size: 20px;
line-height: 1.9;
color: #fff;
}
.page-brand .ic-faq{
background: #fff;
padding: 80px 0;
}
.page-brand .ic-faq__body{
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
margin-top: 20px;
}
.page-brand .ic-faq .ic-secttl{
margin-bottom: 24px;
}
.page-brand .ic-compare__head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 60px;
margin-bottom: 40px;
}
.page-brand .ic-compare__head .ic-secttl{
margin-bottom: 0;
flex-shrink: 0;
}
.page-brand .ic-compare__lead{
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
max-width: 760px;
}
.page-brand .ic-compare__scroll{
overflow-x: auto;
}
.page-brand .ic-compare__table{
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.page-brand .ic-compare__table th, .page-brand .ic-compare__table td{
border-bottom: 1px solid var(--color-sub);
padding: 18px 16px;
text-align: center;
vertical-align: middle;
}
.page-brand .ic-compare__table thead th{
border-bottom: 1px solid var(--color-sub);
vertical-align: top;
}
.page-brand .ic-compare__corner{
width: 200px;
border-bottom: 1px solid var(--color-sub) !important;
}
.page-brand .ic-compare__table td{
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
}
.page-brand .ic-compare__table tbody tr:nth-child(odd){
background: var(--color-table-stripe);
}
.page-brand .ic-compare__bike{
aspect-ratio: 240 / 150;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.page-brand .ic-compare__bike img{
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.page-brand .ic-compare__more{
justify-content: center;
margin-bottom: 10px;
}
.page-brand .ic-compare__name-en{
display: block;
font-family: var(--font-en);
font-weight: 500;
font-size: 20px;
color: var(--color-text);
}
.page-brand .ic-compare__name-jp{
display: block;
font-family: var(--font-ja);
font-weight: 600;
font-size: 14px;
color: var(--color-text);
margin-top: 4px;
}
.page-brand .ic-trust{
background: var(--color-bg-yellow);
padding: 80px 0 90px;
}
.page-brand .ic-trust__layout{
display: flex;
align-items: flex-start;
gap: 56px;
}
.page-brand .ic-trust__head{
width: 420px;
flex-shrink: 0;
}
.page-brand .ic-trust__head .ic-secttl{
margin-bottom: 24px;
}
.page-brand .ic-trust__intro-ttl{
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.7;
color: var(--color-text);
margin-bottom: 14px;
}
.page-brand .ic-trust__intro-txt{
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
}
.page-brand .ic-closing__bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 72%;
}
.page-brand .ic-closing__grad{
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 22%, rgba(0,0,0,.3) 45%, rgba(0,0,0,0) 70%);
}
.page-brand .ic-closing .container{
position: relative;
z-index: 2;
}
.page-brand .ic-closing__catch{
font-family: var(--font-serif);
font-weight: 600;
font-size: 30px;
line-height: 1.5;
letter-spacing: .75px;
color: #fff;
margin-bottom: 28px;
}
.page-brand .ic-brands__head{
text-align: center;
}
.page-brand .ic-brands__title{
font-family: var(--font-serif);
font-weight: 600;
font-size: 30px;
letter-spacing: .75px;
color: #000;
}
.page-brand .ic-brands__sub{
text-align: center;
font-size: 18px;
line-height: 1.5;
color: var(--color-text);
margin: 16px 0 48px;
}
.page-brand .ic-brands__table{
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.page-brand .ic-brands__col-label{
width: 257px;
}
.page-brand .ic-brands__mbp{
width: 96px;
height: auto;
}
.page-brand .ic-brands__bhead{
padding: 0 0 24px;
}
.page-brand .ic-brands__logo{
display: flex;
align-items: center;
justify-content: center;
height: 56px;
margin: 22px 0 14px;
}
.page-brand .ic-brands__logo img{
max-height: 46px;
max-width: 70%;
width: auto;
}
.page-brand .ic-brands__cap{
display: block;
font-family: var(--font-serif);
font-weight: 600;
font-size: 24px;
color: #000;
}
.page-brand .ic-brands__table tbody tr:nth-child(3) td, .page-brand .ic-brands__table tbody tr:nth-child(3) th, .page-brand .ic-brands__table tbody tr:nth-child(5) td, .page-brand .ic-brands__table tbody tr:nth-child(5) th{
background: var(--color-table-stripe);
}
.page-brand .ic-brands__rl-en{
font-family: var(--font-en);
font-weight: 500;
font-size: 20px;
color: #000;
}
.page-brand .ic-brands__table tbody td{
font-size: 18px;
line-height: 1.7;
color: var(--color-text);
}
.page-brand .ic-brands__ul{
list-style: disc;
text-align: left;
padding-left: 1.4em;
margin: 0;
}
.page-brand .ic-brands__ul li{
line-height: 1.7;
}
.page-brand .ic-brands__scene{
font-family: var(--font-ja);
font-weight: 600;
font-size: 16px;
color: #000;
margin-bottom: 6px;
}
.page-brand .ic-brands__scene + .ic-stars{
margin-bottom: 16px;
}
.page-brand .ic-stars .is-on{
color: var(--color-accent);
}
.page-brand .ic-collection__grid--single{
grid-template-columns: minmax(0, 600px);
justify-content: center;
}
.page-brand .ic-bike__badge{
display: inline-flex;
align-items: center;
background: var(--color-main);
color: #fff;
font-family: var(--font-ja);
font-weight: 600;
font-size: 12px;
line-height: 1;
padding: 5px 10px;
border-radius: 3px;
white-space: nowrap;
}
@media (max-width: 1440px){
.page-brand .ic-secttl__ja, .page-brand .ic-review__h, .page-brand .ic-brands__title{
font-size: 32px;
}
.page-brand .ic-lead__heading, .page-brand .ic-story__logo{
font-size: 36px;
}
.page-brand .ic-timeline__year, .page-brand .ic-ideal__title, .page-brand .ic-closing__catch{
font-size: 26px;
}
.page-brand .ic-story__catch, .page-brand .ic-collection__catch, .page-brand .ic-brands__cap, .page-brand .ic-review__brand, .page-brand .ic-bike__name-en{
font-size: 22px;
}
.page-brand .ic-secttl__en, .page-brand .ic-timeline__ttl, .page-brand .ic-trust__intro-ttl, .page-brand .ic-trust__ttl, .page-brand .ic-review__ttl, .page-brand .ic-brands__rl-en, .page-brand .ic-brands__tag, .page-brand .ic-collection__count, .page-brand .ic-review__en{
font-size: 18px;
}
.page-brand .ic-bike__catch, .page-brand .ic-brands__table tbody th[scope="row"], .page-brand .ic-brands__table tbody td, .page-brand .ic-compare__table tbody th[scope="row"], .page-brand .ic-compare__table td, .page-brand .ic-ideal__list li{
font-size: 16px;
}
}
@media (max-width: 1200px){
.page-brand .ic-review, .page-brand .ic-faq, .page-brand .ic-compare, .page-brand .ic-trust, .page-brand .ic-brands{
padding-top: 64px;
padding-bottom: 72px;
}
.page-brand .ic-lead{
padding: 0 0 72px;
}
.page-brand .ic-collection{
padding: 128px 0 72px;
}
.page-brand .ic-story{
padding: 64px 0 72px;
}
.page-brand .ic-collection__photo{
width: 52%;
height: 420px;
}
}
@media (max-width: 1000px){
.page-brand .ic-review, .page-brand .ic-faq, .page-brand .ic-compare, .page-brand .ic-trust, .page-brand .ic-brands{
padding-top: 48px;
padding-bottom: 56px;
}
.page-brand .ic-lead{
padding: 0 0 56px;
}
.page-brand .ic-collection{
padding: 96px 0 56px;
}
.page-brand .ic-story{
padding: 48px 0 56px;
}
.page-brand .ic-collection__photo{
width: 70%;
height: 360px;
}
}
@media (max-width: 896px){
.page-brand .ic-kv{
min-height: 320px;
align-items: flex-start;
padding-top: clamp(72px, 16vw, 110px);
}
.page-brand .ic-kv__breadcrumb{
margin-top: 14px;
}
.page-brand .ic-lead__brand{
margin-top: 0;
padding: 0;
background: none;
border-radius: 0;
display: flex;
align-items: flex-end;
position: static;
top: auto;
left: auto;
right: auto;
}
.page-brand .ic-story{
padding: 0 0 56px;
}
.page-brand .ic-story__lead{
flex-direction: column;
gap: 24px;
margin: 24px 0 32px;
}
.page-brand .ic-story__bike{
width: 100%;
max-width: 320px;
align-self: center;
}
.page-brand .ic-story__logo{
font-size: 30px;
padding-right: 14px;
}
.page-brand .ic-secttl__ja{
font-size: 26px;
letter-spacing: 1.1px;
}
.page-brand .ic-secttl__en{
font-size: 16px;
}
.page-brand .ic-lead__heading{
font-size: 28px;
max-width: none;
}
.page-brand .ic-lead__body{
font-size: 16px;
max-width: none;
}
.page-brand .ic-lead__logo{
height: 42px;
}
.page-brand .ic-lead__brand-jp{
font-size: 22px;
}
.page-brand .ic-story__catch{
font-size: 20px;
}
.page-brand .ic-story__intro{
font-size: 14px;
max-width: none;
}
.page-brand .ic-review__h{
font-size: 26px;
}
.page-brand .ic-review__brand{
font-size: 17px;
}
.page-brand .ic-review__en{
font-size: 14px;
}
.page-brand .ic-review__lead{
font-size: 14px;
}
.page-brand .ic-review__ttl{
font-size: 17px;
margin: 18px 18px 12px;
}
.page-brand .ic-review__txt{
font-size: 13px;
margin: 0 18px 20px;
}
.page-brand .ic-collection__catch{
font-size: 17px;
}
.page-brand .ic-collection__body{
font-size: 14px;
margin-bottom: 32px;
}
.page-brand .ic-collection__count{
font-size: 14px;
}
.page-brand .ic-bike__name-en{
font-size: 26px;
}
.page-brand .ic-bike__name-jp{
font-size: 13px;
}
.page-brand .ic-bike__catch{
font-size: 15px;
}
.page-brand .ic-bike__txt{
font-size: 13px;
-webkit-line-clamp: 4;
}
.page-brand .ic-bike__price-num{
font-size: 18px;
}
.page-brand .ic-trust__intro-ttl{
font-size: 17px;
}
.page-brand .ic-trust__intro-txt{
font-size: 14px;
}
.page-brand .ic-trust__ttl{
font-size: 17px;
margin: 18px 18px 12px;
}
.page-brand .ic-trust__txt{
font-size: 13px;
margin: 0 18px 20px;
}
.page-brand .ic-ideal__title{
font-size: 22px;
}
.page-brand .ic-ideal__en{
font-size: 13px;
}
.page-brand .ic-ideal__list li{
font-size: 17px;
padding-left: 30px;
line-height: 1.8;
}
.page-brand .ic-ideal__list li::before{
width: 18px;
height: 18px;
top: .5em;
}
.page-brand .ic-faq__body{
font-size: 14px;
}
.page-brand .ic-brands__title{
font-size: 22px;
}
.page-brand .ic-brands__sub{
font-size: 13px;
margin: 12px 0 32px;
}
.page-brand .ic-brands__tag{
font-size: 14px;
padding: 8px;
min-height: 36px;
}
.page-brand .ic-brands__bhead:not(:last-child)::after{
top: 8px;
height: 20px;
}
.page-brand .ic-brands__cap{
font-size: 16px;
}
.page-brand .ic-brands__rl-en{
font-size: 16px;
}
.page-brand .ic-brands__en{
font-size: 16px;
}
.page-brand .ic-closing__catch{
font-size: 22px;
}
.page-brand .ic-review__list, .page-brand .ic-trust__cards, .page-brand .ic-ideal__panels{
grid-template-columns: 1fr;
gap: 16px;
}
.page-brand .ic-trust__img, .page-brand .ic-review__img{
aspect-ratio: 16 / 9;
}
.page-brand .ic-ideal__panel{
min-height: 300px;
}
.page-brand .ic-timeline{
display: block;
grid-template-columns: 1fr 1fr;
position: relative;
padding: 0;
gap: 40px 0;
}
.page-brand .ic-timeline__item{
display: grid;
grid-template-columns: 60px 22px 1fr;
column-gap: 12px;
padding: 0 0;
padding-bottom: 30px;
position: relative;
align-items: start;
}
.page-brand .ic-timeline__item::before{
content: "";
position: absolute;
left: 83px;
top: 0;
bottom: 0;
width: 1px;
background: #222;
z-index: 1;
}
.page-brand .ic-timeline__year{
grid-column: 1;
grid-row: 1;
text-align: right;
font-size: 20px;
margin: 0;
line-height: 1.3;
align-self: start;
}
.page-brand .ic-timeline__line{
grid-column: 2;
grid-row: 1;
width: auto;
height: auto;
background: transparent;
margin: 0;
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 6px;
position: relative;
z-index: 2;
}
.page-brand .ic-timeline__dot{
position: relative;
top: 0;
left: 0;
transform: none;
z-index: 3;
}
.page-brand .ic-timeline__dot::before, .page-brand .ic-timeline__dot::after{
display: none;
}
.page-brand .ic-timeline__ttl{
grid-column: 3;
grid-row: 1;
text-align: left;
font-size: 16px;
margin: 0 0 12px;
line-height: 1.4;
}
.page-brand .ic-timeline__txt{
grid-column: 3;
grid-row: 2;
font-size: 13px;
line-height: 1.7;
margin: 0 0 16px;
text-align: left;
}
.page-brand .ic-timeline__img{
grid-column: 3;
grid-row: 3;
margin: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.page-brand .ic-timeline__item:first-child .ic-timeline__img::before, .page-brand .ic-timeline__item:last-child .ic-timeline__img::after{
display: none;
}
.page-brand .ic-lead{
overflow: hidden;
padding: 56px 0;
}
.page-brand .ic-collection__slider-wrap{
margin: 0;
}
.page-brand .ic-collection__photo{
position: relative;
width: auto;
height: 200px;
margin: 0 -20px 24px;
top: auto;
right: auto;
left: auto;
}
.page-brand .ic-collection__photo img{
opacity: 0.5;
}
.page-brand .ic-collection__photo::after{
background: linear-gradient(0deg, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 60%);
}
.page-brand .ic-collection{
padding-top: 56px;
padding: 56px 0;
}
.page-brand .ic-secttl{
gap: 8px;
margin-bottom: 24px;
}
.page-brand .ic-secttl__ja-sm{
font-size: 18px;
}
.page-brand .ic-kv__name-en{
font-size: 34px;
}
.page-brand .ic-kv__name-jp{
font-size: 18px;
}
.page-brand .ic-kv__en{
font-size: 20px;
}
.page-brand .ic-lead__photo{
position: relative;
width: auto;
height: 220px;
margin: 0 -20px 28px;
}
.page-brand .ic-lead__photo::after{
background: linear-gradient(0deg, var(--color-bg-yellow) 0%, rgba(243,240,234,0) 50%);
}
.page-brand .ic-story__hero{
min-height: 0;
padding: 48px 0;
margin-bottom: 40px;
}
.page-brand .ic-story__row{
gap: 10px 20px;
margin-bottom: 18px;
}
.page-brand .ic-story__hero-overlay{
background: linear-gradient(rgba(243,240,234,.9), rgba(243,240,234,.9));
}
.page-brand .ic-timeline__item:not(:first-child)::after{
display: none;
}
.page-brand .ic-review{
padding: 56px 0;
}
.page-brand .ic-review__layout{
flex-direction: column;
gap: 32px;
}
.page-brand .ic-review__head{
width: auto;
}
.page-brand .ic-review__list{
grid-template-columns: 1fr;
gap: 32px;
}
.page-brand .ic-review__img{
aspect-ratio: 16 / 10;
margin-bottom: 0;
}
.page-brand .ic-collection__grid{
grid-template-columns: 1fr;
gap: 48px;
}
.page-brand .ic-ideal__panels{
grid-template-columns: 1fr;
}
.page-brand .ic-ideal__body{
padding: 0 28px 32px;
}
.page-brand .ic-faq{
padding: 56px 0;
}
.page-brand .ic-faq__inner{
display: block;
}
.page-brand .ic-faq__left{
width: auto;
margin-bottom: 28px;
}
.page-brand .ic-compare{
padding: 56px 0;
}
.page-brand .ic-compare__head{
display: block;
}
.page-brand .ic-compare__head .ic-secttl{
margin-bottom: 20px;
}
.page-brand .ic-compare__table{
min-width: 720px;
}
.page-brand .ic-compare__corner, .page-brand .ic-compare__table tbody th[scope="row"]{
width: 130px;
font-size: 15px;
}
.page-brand .ic-compare__table td{
font-size: 15px;
}
.page-brand .ic-trust{
padding: 56px 0;
}
.page-brand .ic-trust__layout{
flex-direction: column;
gap: 32px;
}
.page-brand .ic-trust__head{
width: auto;
}
.page-brand .ic-trust__cards{
grid-template-columns: 1fr;
gap: 28px;
}
.page-brand .ic-trust__img{
aspect-ratio: 16 / 10;
}
.page-brand .ic-closing{
min-height: 320px;
}
.page-brand .ic-closing__grad{
background: linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.2) 100%);
}
.page-brand .ic-brands{
padding: 56px 0;
}
.page-brand .ic-brands__table{
min-width: 760px;
}
.page-brand .ic-brands__col-label{
width: 150px;
}
.page-brand .ic-collection__grid--single{
grid-template-columns: minmax(0, 520px);
}
}
@media (max-width: 568px){
.page-brand .ic-secttl__ja{
font-size: 23px;
letter-spacing: 1px;
}
.page-brand .ic-secttl__en{
font-size: 12px;
}
.page-brand .ic-lead__heading{
font-size: 24px;
}
.page-brand .ic-lead__body{
font-size: 13px;
}
.page-brand .ic-lead__logo{
height: 32px;
}
.page-brand .ic-lead__brand-jp{
font-size: 16px;
}
.page-brand .ic-story__logo{
font-size: 18px;
padding-right: 0;
}
.page-brand .ic-story__catch{
font-size: 15px;
padding-left: 20px;
}
.page-brand .ic-story__intro{
font-size: 13px;
}
.page-brand .ic-review__h{
font-size: 20px;
}
.page-brand .ic-review__brand{
font-size: 15px;
}
.page-brand .ic-review__en{
font-size: 13px;
}
.page-brand .ic-review__lead{
font-size: 13px;
}
.page-brand .ic-review__ttl{
font-size: 15px;
margin: 16px 16px 10px;
}
.page-brand .ic-review__txt{
font-size: 12px;
margin: 0 16px 18px;
}
.page-brand .ic-collection__catch{
font-size: 15px;
}
.page-brand .ic-collection__body{
font-size: 13px;
}
.page-brand .ic-collection__count{
font-size: 13px;
}
.page-brand .ic-bike__name-en{
font-size: 20px;
}
.page-brand .ic-bike__name-jp{
font-size: 12px;
}
.page-brand .ic-bike__catch{
font-size: 14px;
}
.page-brand .ic-bike__txt{
font-size: 12px;
}
.page-brand .ic-bike__price-num{
font-size: 17px;
}
.page-brand .ic-trust__intro-ttl{
font-size: 15px;
}
.page-brand .ic-trust__intro-txt{
font-size: 13px;
}
.page-brand .ic-trust__ttl{
font-size: 15px;
margin: 16px 16px 10px;
}
.page-brand .ic-trust__txt{
font-size: 12px;
margin: 0 16px 18px;
}
.page-brand .ic-ideal__title{
font-size: 18px;
}
.page-brand .ic-ideal__en{
font-size: 12px;
}
.page-brand .ic-ideal__list li{
font-size: 13px;
padding-left: 26px;
}
.page-brand .ic-ideal__list li::before{
width: 16px;
height: 16px;
}
.page-brand .ic-faq__body{
font-size: 13px;
}
.page-brand .ic-brands__title{
font-size: 18px;
}
.page-brand .ic-brands__sub{
font-size: 12px;
margin: 10px 0 28px;
}
.page-brand .ic-brands__tag{
font-size: 12px;
padding: 6px;
min-height: 30px;
}
.page-brand .ic-brands__bhead:not(:last-child)::after{
top: 6px;
height: 18px;
}
.page-brand .ic-brands__cap{
font-size: 14px;
}
.page-brand .ic-brands__rl-en{
font-size: 14px;
}
.page-brand .ic-brands__en{
font-size: 14px;
}
.page-brand .ic-brands__table tbody th[scope="row"]{
font-size: 12px;
}
.page-brand .ic-brands__table tbody td{
font-size: 12px;
}
.page-brand .ic-compare__table tbody th[scope="row"]{
font-size: 12px;
}
.page-brand .ic-compare__table td{
font-size: 12px;
}
.page-brand .ic-closing__catch{
font-size: 18px;
}
.page-brand .ic-timeline__year{
font-size: 18px;
}
.page-brand .ic-timeline__ttl{
font-size: 14px;
}
.page-brand .ic-timeline__txt{
font-size: 12px;
}
.page-brand .ic-timeline{
grid-template-columns: 1fr;
gap: 36px;
}
}
}
}
}
}
/* =====================================================================
Login Hub Page (Issue #3) — Figma 1987:4522
公式EC × MOBIPARKメンバー 二択ログインハブ
===================================================================== */
.mp-login-main {
background: var(--color-bg, #F3F0EA);
}
.mp-login-section {
padding: 60px 0 100px;
}
.mp-login-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: stretch;
}
.mp-login-card {
background: var(--color-white, #fff);
border-radius: 5px;
padding: 40px 50px;
display: flex;
flex-direction: column;
gap: 30px;
}
.mp-login-card__head {
display: flex;
flex-direction: column;
gap: 10px;
}
.mp-login-card__title {
font-family: var(--font-serif);
font-weight: 400;
color: var(--color-black, #000);
letter-spacing: 1.8px;
line-height: 1.5;
margin: 0;
}
.mp-login-card__title-main {
font-size: 36px;
}
.mp-login-card__title-sub {
font-size: 18px;
}
.mp-login-card__en-row {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
}
.mp-login-card__line {
position: relative;
display: inline-block;
width: 30px;
height: 1px;
background: var(--color-main, #273240);
}
.mp-login-card__line-yellow {
position: absolute;
left: 20px;
top: 0;
width: 10px;
height: 1px;
background: var(--color-accent, #F5EA00);
}
/* navy underline span is the wrapper itself; nested -navy span optional */
.mp-login-card__line-navy { display: none; }
.mp-login-card__en {
font-family: var(--font-en, 'Rubik', sans-serif);
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: var(--color-black, #000);
}
.mp-login-card__body {
font-family: var(--font-ja);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: var(--color-text, #222);
margin: 0;
flex-grow: 1;
}
.mp-login-card__body p {
margin: 0 0 1em;
}
.mp-login-card__body p:last-child {
margin-bottom: 0;
}
.mp-login-card__body-note {
font-size: 14px;
}
.mp-login-card__foot {
display: flex;
flex-direction: column;
gap: 10px;
}
.mp-login-card__cta-title {
font-family: var(--font-ja);
font-weight: 600;
font-size: 20px;
line-height: 1.7;
color: var(--color-black, #000);
margin: 0;
}
.mp-login-card__cta-lead {
font-family: var(--font-ja);
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: var(--color-text, #222);
margin: 0;
}
/* .mp-login-card__btn は .btn-main 拡張: カード内フルワイドのみ上書き。
矢印・色・hover・padding 等は .btn-main を継承。 */
.mp-login-card__btn {
width: 100%;
justify-content: center;
margin-top: 10px;
}
/* ── Tablet (~1024px以下) ── */
@media (max-width: 1024px) {
.mp-login-section { padding: 40px 0 80px; }
.mp-login-grid { gap: 30px; }
.mp-login-card { padding: 32px 32px; }
.mp-login-card__title-main { font-size: 28px; }
.mp-login-card__title-sub { font-size: 16px; }
.mp-login-card__en { font-size: 18px; }
.mp-login-card__cta-title { font-size: 18px; }
}
/* ── Mobile (~767px以下) ── */
@media (max-width: 767px) {
.mp-login-section { padding: 30px 0 60px; }
.mp-login-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.mp-login-card { padding: 28px 20px; gap: 24px; }
.mp-login-card__title-main { font-size: 24px; }
.mp-login-card__title-sub { font-size: 14px; }
.mp-login-card__en { font-size: 16px; }
.mp-login-card__body { font-size: 14px; line-height: 1.75; }
.mp-login-card__body-note { font-size: 12px; }
.mp-login-card__cta-title { font-size: 17px; }
.mp-login-card__cta-lead { font-size: 14px; }
}
/* =====================================================================
Addon Detail Modal (Issue #4) — Figma 2068:43378
addon商品 (アクセサリー/アパレル/保険) の「詳細を見る」ポップアップ
purchase-modal-overlay 基盤を流用
===================================================================== */
/* overlay を中央配置に上書き (purchase-modal-overlay の flex-start + padding-top:144 を打ち消し) */
.addon-detail-modal {
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
/* ヘッダー: グレー基準線 + ネイビー半幅 + 黄色アクセント (.icon-modal-head と同パターン、Figma 2068:43378 準拠) */
.addon-detail-modal__head {
position: relative;
padding-bottom: 16px;
margin-bottom: 24px;
border-bottom: 1px solid var(--color-sub);
}
.addon-detail-modal__head::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 504px;
max-width: 100%;
height: 1px;
background: var(--color-main);
}
.addon-detail-modal__head::before {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 20px;
height: 2px;
background: var(--color-accent);
z-index: 1;
}
.addon-detail-modal__title {
margin: 0;
font-family: var(--font-ja);
font-weight: 700;
font-size: 20px;
line-height: 1.5;
color: var(--color-black, #000);
}
.addon-detail-modal__body {
display: grid;
grid-template-columns: 290px 1fr;
gap: 30px;
align-items: start;
}
.addon-detail-modal__img-wrap {
width: 100%;
aspect-ratio: 290 / 180;
overflow: hidden;
border-radius: 4px;
background: var(--color-bg, #f3f0ea);
}
.addon-detail-modal__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.addon-detail-modal__info {
display: flex;
flex-direction: column;
gap: 16px;
}
.addon-detail-modal__desc {
font-family: var(--font-ja);
font-size: 14px;
line-height: 1.7;
color: var(--color-text, #222);
}
.addon-detail-modal__desc p {
margin: 0 0 0.5em;
}
.addon-detail-modal__desc p:last-child {
margin-bottom: 0;
}
.addon-detail-modal__price {
margin: 0;
font-family: var(--font-ja);
font-weight: 700;
font-size: 16px;
color: var(--color-black, #000);
line-height: 1.5;
}
.addon-detail-modal__price-num {
font-family: var(--font-en, 'Rubik', sans-serif);
font-size: 22px;
margin-right: 2px;
}
.addon-detail-modal__price-tax {
font-size: 12px;
margin-left: 4px;
color: var(--color-text, #222);
}
/* ── Tablet (~1024px以下) ── */
@media (max-width: 1024px) {
.addon-detail-modal__body { grid-template-columns: 240px 1fr; gap: 24px; }
}
/* ── Mobile (~767px以下) ── */
@media (max-width: 767px) {
.addon-detail-modal__title { font-size: 17px; }
.addon-detail-modal__head { padding-bottom: 10px; margin-bottom: 18px; }
.addon-detail-modal__body {
grid-template-columns: 1fr;
gap: 16px;
}
.addon-detail-modal__img-wrap {
aspect-ratio: 16 / 10;
max-width: 360px;
margin: 0 auto;
}
.addon-detail-modal__price-num { font-size: 20px; }
}
/* ===== 予約購入 UI (mp-product.liquid + mp-reserve-modal.liquid) ===== */
/* Layer 1/2 で使う予約ボタン: カートボタンと同シェイプ、視覚差別化のため色を反転 */
.detail-buy__cart--reserve {
background: #273240;
color: #fff;
border: 1px solid #273240;
margin-top: 12px;
text-decoration: none;
}
.detail-buy__cart--reserve:hover {
background: #1c2530;
color: #fff;
}
.detail-buy__cart--reserve .detail-buy__cart-text {
color: #fff;
}
.detail-buy__reserve-eta {
font-size: 14px;
line-height: 1.6;
margin: 12px 0 4px;
color: #273240;
}
.detail-buy__reserve-note {
font-size: 12px;
line-height: 1.6;
margin: 6px 0 0;
color: #555;
}
/* 予約モーダル本体 (purchase-modal シェルを流用しつつフォーム独自スタイル) */
.mp-reserve-modal__body {
display: block;
text-align: left;
padding: 16px 0 8px;
}
.mp-reserve-modal__eta {
font-size: 14px;
line-height: 1.7;
background: #f7f5ee;
border-radius: 4px;
padding: 10px 14px;
margin: 0 0 16px;
color: #273240;
}
.mp-reserve-modal__note {
background: #fff7ed;
border: 1px solid #f0d9b5;
border-radius: 4px;
padding: 12px 16px;
margin: 0 0 24px;
}
.mp-reserve-modal__note-title {
font-size: 14px;
font-weight: 700;
margin: 0 0 6px;
color: #6b3a00;
}
.mp-reserve-modal__note-list {
list-style: disc;
padding-left: 20px;
margin: 0;
font-size: 12px;
line-height: 1.7;
color: #4a3300;
}
.mp-reserve-modal__note-list li { margin: 2px 0; }
/* フォーム部品 */
.mp-reserve-form__row {
display: block;
margin: 0 0 16px;
}
.mp-reserve-form__label {
display: block;
font-size: 13px;
font-weight: 600;
color: #273240;
margin: 0 0 6px;
}
.mp-reserve-form__req {
color: #c0392b;
margin-left: 4px;
}
.mp-reserve-form__input {
display: block;
width: 100%;
box-sizing: border-box;
font-size: 14px;
line-height: 1.4;
padding: 10px 12px;
border: 1px solid #c8c8c8;
border-radius: 4px;
background: #fff;
color: #273240;
font-family: inherit;
}
.mp-reserve-form__input:focus {
outline: none;
border-color: #273240;
box-shadow: 0 0 0 2px rgba(39, 50, 64, 0.12);
}
.mp-reserve-form__textarea {
resize: vertical;
min-height: 96px;
}
.mp-reserve-form__checks {
margin: 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.mp-reserve-form__check {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.6;
color: #273240;
cursor: pointer;
}
.mp-reserve-form__check input[type="checkbox"] {
margin-top: 3px;
flex: 0 0 auto;
width: 16px;
height: 16px;
}
.mp-reserve-form__actions {
display: flex;
justify-content: center;
margin: 16px 0 0;
}
.mp-reserve-form__submit {
min-width: 240px;
text-align: center;
cursor: pointer;
}
.mp-reserve-form__submit:disabled {
opacity: 0.6;
cursor: progress;
}
.mp-reserve-form__msg {
font-size: 12px;
margin: 12px 0 0;
color: #c0392b;
text-align: center;
}
@media (max-width: 768px) {
.mp-reserve-modal__body { padding: 12px 0 4px; }
.mp-reserve-form__input { font-size: 16px; padding: 12px; } /* iOS のオートズーム抑止 */
.mp-reserve-form__submit { width: 100%; min-width: 0; }
}
/* =====================================================================
Wishlist & Contact buttons (Issue #wl)
===================================================================== */
/* ---- 商品詳細: カート下のアクション行 ---- */
.detail-buy__cta-row {
display: flex;
gap: 12px;
align-items: stretch;
margin-top: 12px;
}
.detail-buy__cta-row .mp-wishlist-btn,
.detail-buy__contact {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 52px;
padding: 12px 16px;
background: var(--color-white, #fff);
border: 1px solid var(--color-main, #273240);
border-radius: 5px;
color: var(--color-main, #273240);
font-family: var(--font-ja);
font-weight: 700;
font-size: 15px;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.detail-buy__cta-row .mp-wishlist-btn { position: static; padding: 12px 16px; }
.detail-buy__cta-row .mp-wishlist-icon { width: 22px; height: 22px; display: block; }
.detail-buy__contact-icon { width: 18px; height: 18px; display: block; }
@media (hover: hover) {
.detail-buy__cta-row .mp-wishlist-btn:hover,
.detail-buy__contact:hover {
background: var(--color-main, #273240);
color: var(--color-white, #fff);
}
.detail-buy__cta-row .mp-wishlist-btn:hover .mp-wishlist-icon,
.detail-buy__contact:hover .detail-buy__contact-icon {
filter: invert(1) brightness(2);
}
}
@media (max-width: 767px) {
.detail-buy__cta-row { gap: 8px; }
.detail-buy__cta-row .mp-wishlist-btn,
.detail-buy__contact { min-height: 46px; padding: 10px 12px; font-size: 14px; }
}
/* ---- pickup-item__name-row 右上の絶対配置ハート ---- */
.pickup-item__name-row {
position: relative;
}
.pickup-item__name-row > .mp-wishlist-btn {
position: absolute;
top: 0;
right: 0;
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
cursor: pointer;
z-index: 2;
-webkit-appearance: none;
appearance: none;
}
.pickup-item__name-row > .mp-wishlist-btn .mp-wishlist-icon {
width: 24px;
height: 24px;
display: block;
transition: transform 0.15s ease;
}
@media (hover: hover) {
.pickup-item__name-row > .mp-wishlist-btn:hover .mp-wishlist-icon {
transform: scale(1.1);
}
}
/* on状態 (wishlist-global.js が aria-pressed=true 付与時) — 視認性確保 */
.mp-wishlist-btn[aria-pressed="true"] .mp-wishlist-icon {
filter: drop-shadow(0 0 2px rgba(245, 234, 0, 0.4));
}
@media (max-width: 767px) {
.pickup-item__name-row > .mp-wishlist-btn { width: 32px; height: 32px; }
.pickup-item__name-row > .mp-wishlist-btn .mp-wishlist-icon { width: 20px; height: 20px; }
}
/* ============================================================
Cart template — scoped to .template-cart only
Added 2026-06-30 — D-NNN: cart UI cleanup + detail-checked swap
All selectors MUST be prefixed with .template-cart to avoid
side effects on product / collection / shop / brand pages.
============================================================ */
/* ---------- 1. layout container ---------- */
.template-cart { padding-top: 110px; padding-bottom: 60px; }
.template-cart .page-width.mp-cart {
max-width: 1080px;
margin: 0 auto;
padding: 0 20px;
}
@media (max-width: 767px) {
.template-cart { padding-top: 80px; padding-bottom: 40px; }
.template-cart .page-width.mp-cart { padding: 0 16px; }
}
/* ---------- 2. heading row ---------- */
.template-cart .title-wrapper-with-link {
display: flex;
align-items: baseline;
justify-content: space-between;
border-bottom: 1px solid #ddd;
padding: 24px 0 16px;
margin-bottom: 24px;
}
.template-cart .title-wrapper-with-link .title {
font-size: 28px;
font-weight: 700;
letter-spacing: .04em;
margin: 0;
}
.template-cart .title-wrapper-with-link .underlined-link {
font-size: 13px;
color: #555;
text-decoration: underline;
text-underline-offset: 3px;
}
.template-cart .title-wrapper-with-link .underlined-link:hover { color: #000; }
@media (max-width: 767px) {
.template-cart .title-wrapper-with-link { padding: 16px 0 12px; margin-bottom: 16px; }
.template-cart .title-wrapper-with-link .title { font-size: 22px; }
.template-cart .title-wrapper-with-link .underlined-link { font-size: 12px; }
}
/* ---------- 3. empty state ---------- */
.template-cart cart-items.is-empty .cart__warnings {
text-align: center;
padding: 60px 20px;
}
.template-cart .cart__empty-text {
font-size: 20px;
font-weight: 600;
margin: 0 0 24px;
color: #333;
}
.template-cart .cart__warnings .c-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 240px;
padding: 14px 28px;
background: #000;
color: #fff;
font-size: 14px;
font-weight: 600;
border-radius: 4px;
text-decoration: none;
transition: background .15s ease;
}
.template-cart .cart__warnings .c-link:hover { background: #333; }
.template-cart .cart__login-title {
margin-top: 48px;
font-size: 16px;
font-weight: 600;
}
.template-cart .cart__login-paragraph { font-size: 13px; color: #666; }
/* ---------- 4. items table ---------- */
.template-cart .cart-items {
width: 100%;
border-collapse: collapse;
margin: 0 0 24px;
}
.template-cart .cart-items thead th {
text-align: left;
font-size: 12px;
font-weight: 600;
color: #888;
letter-spacing: .08em;
text-transform: uppercase;
padding: 12px 8px;
border-bottom: 1px solid #e5e5e5;
}
.template-cart .cart-items thead th.right { text-align: right; }
.template-cart .cart-items .cart-item {
border-bottom: 1px solid #eee;
}
.template-cart .cart-items .cart-item > td {
padding: 20px 8px;
vertical-align: top;
}
/* product image */
.template-cart .cart-item__media { width: 110px; }
.template-cart .cart-item__image-container {
width: 100px;
background: #f7f7f7;
border-radius: 4px;
overflow: hidden;
}
.template-cart .cart-item__image {
width: 100%;
height: auto;
display: block;
}
/* product details */
.template-cart .cart-item__details {
font-size: 14px;
line-height: 1.6;
}
.template-cart .cart-item__name {
display: inline-block;
font-size: 15px;
font-weight: 600;
color: #111;
text-decoration: none;
margin: 0 0 6px;
}
.template-cart .cart-item__name:hover { text-decoration: underline; }
.template-cart .cart-item__details .product-option {
font-size: 13px;
color: #555;
margin: 2px 0;
}
.template-cart .cart-item__details dl {
margin: 4px 0 0;
font-size: 12px;
color: #777;
}
.template-cart .cart-item__details dl > div {
display: flex;
gap: 4px;
}
.template-cart .cart-item__details dl dt { font-weight: 500; }
.template-cart .cart-item__details dl dd { margin: 0; }
/* quantity input — fix the ugly default `+`/`−` */
.template-cart .cart-item__quantity .quantity,
.template-cart .cart-item__quantity .cart-quantity {
display: inline-flex;
align-items: stretch;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
.template-cart .cart-item__quantity .quantity__button {
width: 32px;
height: 36px;
background: #fafafa;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
color: #333;
font-size: 14px;
transition: background .15s ease;
}
.template-cart .cart-item__quantity .quantity__button:hover:not(:disabled) { background: #f0f0f0; }
.template-cart .cart-item__quantity .quantity__button:disabled { opacity: .4; cursor: not-allowed; }
.template-cart .cart-item__quantity .quantity__button svg { width: 12px; height: 12px; }
/* Hide raw svg text fallback that produces the giant black `+` glyph */
.template-cart .cart-item__quantity .quantity__button:empty::before,
.template-cart .cart-item__quantity .quantity__button:not(:has(svg))::before {
content: '';
}
.template-cart .cart-item__quantity .quantity__button[name="minus"] svg,
.template-cart .cart-item__quantity .quantity__button[name="plus"] svg {
display: block;
}
.template-cart .cart-item__quantity .quantity__input {
width: 44px;
height: 36px;
text-align: center;
border: 0;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
font-size: 14px;
font-weight: 500;
background: #fff;
-moz-appearance: textfield;
padding: 0;
}
.template-cart .cart-item__quantity .quantity__input::-webkit-outer-spin-button,
.template-cart .cart-item__quantity .quantity__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* remove link below quantity */
.template-cart .cart-item__quantity .cart-remove-button,
.template-cart .cart-item__quantity cart-remove-button {
display: inline-block;
margin-top: 6px;
font-size: 12px;
color: #888;
}
.template-cart .cart-item__quantity .cart-remove-button a,
.template-cart .cart-item__quantity cart-remove-button a,
.template-cart .cart-item__quantity .button--tertiary {
color: #888;
text-decoration: underline;
text-underline-offset: 3px;
background: transparent;
border: 0;
padding: 0;
font-size: 12px;
}
.template-cart .cart-item__quantity .cart-remove-button a:hover,
.template-cart .cart-item__quantity cart-remove-button a:hover,
.template-cart .cart-item__quantity .button--tertiary:hover { color: #000; }
/* line total column (PC) */
.template-cart .cart-items .small-hide.right {
text-align: right;
font-weight: 600;
font-size: 14px;
color: #111;
}
.template-cart .cart-items .cart-item__totals { text-align: right; }
/* hide info popovers that crowd quantity area */
.template-cart .cart-item__quantity .quantity-popover__info-button { display: none; }
/* prevent the giant outline `+` icon Dawn renders when svg missing */
.template-cart svg.icon { display: inline-block; }
/* ---------- 5. SP layout (table -> stacked cards) ---------- */
@media (max-width: 749px) {
.template-cart .cart-items thead { display: none; }
.template-cart .cart-items,
.template-cart .cart-items tbody,
.template-cart .cart-items .cart-item { display: block; width: 100%; }
.template-cart .cart-items .cart-item {
display: grid;
grid-template-columns: 88px 1fr auto;
grid-template-areas:
"media details totals"
"media quantity quantity";
gap: 6px 12px;
padding: 16px 0;
border-bottom: 1px solid #eee;
}
.template-cart .cart-items .cart-item > td { padding: 0; border: 0; display: block; }
.template-cart .cart-item__media { grid-area: media; width: 88px; }
.template-cart .cart-item__image-container { width: 88px; }
.template-cart .cart-item__details { grid-area: details; min-width: 0; }
/* show mobile-only totals column, hide PC totals column */
.template-cart .cart-item__totals.medium-hide.large-up-hide { grid-area: totals; display: block !important; text-align: right; font-size: 14px; font-weight: 600; }
.template-cart .cart-item__totals.right:not(.medium-hide):not(.large-up-hide) { display: none !important; }
/* hide totals heading column 'small-hide' completely on SP — body uses cart-item__totals.right.medium-hide... */
.template-cart .cart-item__quantity {
grid-area: quantity;
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
.template-cart .cart-item__name { font-size: 14px; line-height: 1.4; }
}
/* ---------- 6. footer / totals / checkout ---------- */
.template-cart .cart__footer {
border-top: 1px solid #ddd;
padding-top: 24px;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 20px;
}
.template-cart .cart__note { display: block; }
.template-cart .cart__note label {
display: block;
font-size: 13px;
font-weight: 600;
color: #333;
margin-bottom: 6px;
}
.template-cart .cart__note textarea {
width: 100%;
min-height: 80px;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 13px;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}
.template-cart .cart__blocks {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
.template-cart .totals {
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 16px;
width: 100%;
padding: 16px 0;
border-top: 1px solid #eee;
}
.template-cart .totals__total {
font-size: 15px;
font-weight: 600;
margin: 0;
color: #333;
}
.template-cart .totals__total-value {
font-size: 24px;
font-weight: 700;
color: #111;
margin: 0;
font-feature-settings: 'tnum';
}
.template-cart .tax-note {
display: block;
font-size: 12px;
color: #888;
text-align: right;
width: 100%;
margin-top: -8px;
}
.template-cart .cart__ctas {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.template-cart .cart__checkout-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 280px;
padding: 16px 32px;
background: #000;
color: #fff;
font-size: 15px;
font-weight: 700;
letter-spacing: .04em;
border: 0;
border-radius: 4px;
cursor: pointer;
transition: background .15s ease;
}
.template-cart .cart__checkout-button:hover:not(:disabled) { background: #333; }
.template-cart .cart__checkout-button:disabled { background: #999; cursor: not-allowed; }
@media (max-width: 749px) {
.template-cart .cart__blocks { align-items: stretch; }
.template-cart .totals { justify-content: space-between; }
.template-cart .totals__total-value { font-size: 20px; }
.template-cart .cart__ctas { justify-content: stretch; }
.template-cart .cart__checkout-button { width: 100%; min-width: 0; }
}
/* ---------- 7. discounts list ---------- */
.template-cart .discounts__discount {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: #c0392b;
}
/* ---------- 8. detail-checked recently-viewed section spacing ---------- */
.template-cart #detail-checked {
margin-top: 60px;
padding-top: 40px;
border-top: 1px solid #eee;
}
@media (max-width: 749px) {
.template-cart #detail-checked {
margin-top: 40px;
padding-top: 24px;
}
}
/* ---------- 9. Dawn helper classes (not loaded under renew layout) ---------- */
/* Hide visually-hidden labels — Dawn's a11y class isn't loaded */
.template-cart .visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
white-space: nowrap;
}
/* Dawn responsive utility classes — recreate locally */
.template-cart .small-hide { display: table-cell; }
.template-cart .medium-hide,
.template-cart .large-up-hide { display: table-cell; }
@media (max-width: 749px) {
.template-cart .small-hide { display: none !important; }
.template-cart .medium-hide.large-up-hide { display: table-cell !important; }
}
@media (min-width: 750px) {
.template-cart .medium-hide.large-up-hide { display: none !important; }
}
/* ---------- 10. cart-remove-button visibility ---------- */
.template-cart cart-remove-button {
display: inline-block;
margin-top: 4px;
}
.template-cart cart-remove-button .button {
background: transparent;
border: 0;
padding: 0;
color: #888;
cursor: pointer;
}
.template-cart cart-remove-button .button:hover { color: #c0392b; }
.template-cart cart-remove-button svg { width: 16px; height: 16px; }
/* end cart template scoped block */
/* === Column links: coming soon placeholder (index-main-pre) === */
.column-links--coming-soon {
text-align: center;
padding: 60px 20px;
color: #666;
font-size: 18px;
background: #f7f7f5;
border-radius: 8px;
margin: 0 0 24px;
}
.column-links--coming-soon .column-links__notice {
margin: 0;
letter-spacing: 0.08em;
}
@media (max-width: 768px) {
.column-links--coming-soon { padding: 40px 16px; font-size: 16px; }
}
/* === /Column links coming soon === */
/* =====================================================================
型式認定車 / 規定値設定車 バッジ色 modifier (Issue #spec)
===================================================================== */
.pickup-item__keishiki--ts,
.popular-item__keishiki--ts,
.related-item__keishiki--ts {
background-color: #916100;
}
.pickup-item__keishiki--kitei,
.popular-item__keishiki--kitei,
.related-item__keishiki--kitei {
background-color: #00913A;
}
/* ===== Addon product template (template_suffix=addon) ===== */
/* 親バイク商品へのリンク。商品名直下に配置 */
.addon-detail__parent-link {
margin: 10px 0 16px;
font-size: 14px;
color: var(--color-text);
}
.addon-detail__parent-link a {
color: var(--color-main);
font-weight: 700;
text-decoration: underline;
}