/* コーポレート・ロゴ（ライセンス済み・自社所有フォント）。 多用すると読みにくいので、インパクトを出したい大見出しにだけ使う。 */ @font-face{ font-family:"Corporate Logo"; src:url("../fonts/Corporate-Logo-Bold-ver3.otf") format("opentype"); font-weight:900; font-display:swap; } @font-face{ font-family:"Corporate Logo"; src:url("../fonts/Corporate-Logo-Medium-ver3.otf") format("opentype"); font-weight:500; font-display:swap; } :root{ --blue:#38a1db; /* メインカラー(指定) */ --blue-dark:#2b84b8; --blue-deep:#1c5a80; --black:#141414; --black-soft:#1d1d1d; --white:#ffffff; --gray-100:#f5f5f5; --gray-300:#dcdde0; --gray-500:#8a8d93; --accent:#ffcc00; /* 差し色イエロー(指定) */ --accent-dark:#e6b800; --danger:#ff5a3c; --line-green:#06c755; /* LINE公式ブランドカラー */ /* 公式ロゴ(logo.svg)から抽出したコーポレートカラー */ --navy:#003b86; --navy-dark:#002c66; --brand-yellow:#ffd900; --brand-red:#e50012; --orange:#ff5900; /* 公式CTAのオレンジ（foam_btn.svg / tel.svg より） */ --sky:#2db0ff; /* キービジュアルの地色。ヒーロー全体の背景に使用 */ --orange-dark:#e94500; --radius:14px; --maxw:480px; /* ---------- 余白スケール ---------- 0〜480pxの範囲で画面幅に比例させ、480pxで止める。 個別に数値を書かず、ここを変えれば全体の余白感が一括で変わる。 */ --gutter:clamp(18px, 5.7vw, 27px); /* 左右の余白（390pxで約22px） */ --sect-y:clamp(24px, 7.5vw, 36px); /* セクション上下（390pxで約55px） */ --gap-title:clamp(22px, 7.2vw, 34px);/* 見出し→本文 */ --gap-card:clamp(14px, 4.4vw, 21px); /* カード同士 */ --gap-block:clamp(26px, 8.2vw, 39px);/* ブロック同士 */ /* ---------- 文字サイズのスケール ---------- 余白と同じく 0〜480px で画面幅に比例させ、480pxで止める。 個別に px や clamp() を書かず、ここの7段階から選ぶ。 全体の文字を大きく／小さくしたいときは、この7行だけ触れば済む。 */ --fs-2xs:clamp( 9.5px, 2.7vw, 11.5px); /* 注釈・チップ */ --fs-xs :clamp(11px, 3.2vw, 13.5px); /* 補足・ラベル */ --fs-sm :clamp(12px, 3.5vw, 15px); /* 副次テキスト */ --fs-md :clamp(13.5px, 3.9vw, 16.5px); /* 本文 */ --fs-lg :clamp(15px, 4.4vw, 19px); /* 小見出し */ --fs-xl :clamp(17px, 5.2vw, 23px); /* 中見出し */ --fs-2xl:clamp(19px, 5.9vw, 28px); /* セクション見出し */ font-size:16px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ /* 実機に入っている日本語フォントは端末ごとにバラつく （iPhoneはHiragino Sans、Windowsは大抵Yu Gothic、 　このPCのようにHiragino/Noto Sans JPが個別インストールされている場合も）。 太さの見え方を全端末で揃えるため、Google Fontsで配信するNoto Sans JPを 先頭に置き、実際にはこちらが優先的に使われるようにする。 （の読み込みは各HTMLファイルので行っている） */ font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",-apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif; color:var(--black); background:var(--white); line-height:1.7; -webkit-font-smoothing:antialiased; /* 以下、タグ単位の基準サイズ。個別指定が無い要素はここに従う */ font-size:var(--fs-md); } h1{font-size:var(--fs-2xl);} h2{font-size:var(--fs-2xl);} h3{font-size:var(--fs-lg);} h4{font-size:var(--fs-md);} p,li,dd,dt,label,td,th{font-size:inherit;} small{font-size:var(--fs-xs);} /* height:auto が無いと、HTMLの height 属性が presentational hint として効き、 CSSで width だけ指定した画像の高さが元画像のままになる（縦に伸びる）。 */ img{max-width:100%;display:block;height:auto;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);} /* ---------- スマホ専用LPとしての土台 ---------- スマホでの閲覧が大半だが、PC・タブレットで開かれたときに キービジュアルが画面幅いっぱいに引き伸ばされて崩れるのを防ぐため、 ページ全体を480pxで止めて中央に寄せる。 これで「480pxより広い場合」を考える必要がなくなり、 レイアウトの検討範囲が 0〜480px の一次元に収まる。 */ body{ position:relative;overflow-x:clip; background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.9), transparent 50%), linear-gradient(120deg, #eef3f6 0%, #e4ebef 60%, #dbe3e8 100%); } /* PC（1100px〜）だけ：青地の全画面に、左＝白カード（ロゴ＋目次＋CTA）／右端＝LP本体、の2カラム。 （hanamaru870.net のソコカラLPのPC構成を踏襲） スマホでは.pc-leftを非表示にし、レイアウトはこれまで通り1カラムのまま。 */ .pc-left{display:none;} @media (min-width:1100px){ body{ display:flex;justify-content:flex-start;align-items:flex-start;min-height:100vh; background:#63c3fb; } body::before{display:none;} .pc-left{ display:flex;align-items:center;justify-content:center; flex:1 1 auto;min-width:320px; position:sticky;top:0;height:100vh;box-sizing:border-box; overflow:hidden; padding:40px 32px; } .pc-left-inner{ position:relative;z-index:1; width:100%;max-width:620px;text-align:center; } /* 白カード：角丸＋上辺に黄色のアクセントライン（サイト内の promise-card と同じ作法） */ .pc-left-card{ position:relative; background:#fff;border-radius:22px; border-top:8px solid var(--accent); box-shadow:0 14px 44px rgba(0,0,0,.2); padding:34px 46px 38px; } .pc-left-kicker{ display:inline-block; font-size:14px;font-weight:900;color:#fff;letter-spacing:.14em; background:var(--blue);border-radius:999px;padding:6px 18px; margin:0 0 18px; } .pc-left-logo{display:block;width:min(24vw, 360px);height:auto;margin:0 auto 14px;} .pc-left-lead{font-size:14px;font-weight:700;color:#444;line-height:1.8;margin:0 0 26px;} .pc-left-lead strong{color:var(--blue-dark);} .pc-left-tagline{display:none;} /* 目次：2列。左に青い番号、右に矢印 */ .pc-toc{ display:grid;grid-template-columns:1fr 1fr;column-gap:26px;row-gap:2px; text-align:left;margin:0 0 28px; counter-reset:toc; } .pc-toc a{ position:relative;display:block; padding:11px 24px 11px 34px;font-weight:800;font-size:15px; color:var(--black);text-decoration:none; border-bottom:1px dashed var(--gray-300); counter-increment:toc; } .pc-toc a::before{ content:counter(toc, decimal-leading-zero); position:absolute;left:0;top:50%;transform:translateY(-50%); font-family:"Corporate Logo","Noto Sans JP",sans-serif; font-size:13px;font-weight:900;color:var(--blue);letter-spacing:.02em; } .pc-toc a::after{ content:"";position:absolute;right:8px;top:50%; width:7px;height:7px; border-right:2px solid var(--orange);border-bottom:2px solid var(--orange); transform:translateY(-50%) rotate(-45deg); } .pc-toc a:hover{color:var(--blue);border-bottom-color:var(--blue);} .pc-left-cta{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-width:320px;padding:16px 30px;border-radius:999px; background:var(--orange);color:#fff;font-weight:900;font-size:17px; text-decoration:none;border:none;cursor:pointer;font-family:inherit; box-shadow:0 6px 0 var(--orange-dark), 0 10px 18px rgba(0,0,0,.18); } .pc-left-cta:active{transform:translateY(4px);box-shadow:0 2px 0 var(--orange-dark);} .pc-left-tel{ display:flex;flex-direction:column;align-items:center;gap:4px; margin-top:18px;text-decoration:none; } .pc-left-tel img{display:block;width:min(70%, 300px);height:auto;} .pc-left-tel span{font-size:12px;font-weight:800;color:var(--black);letter-spacing:.04em;} .pc-left-copy{margin:24px 0 0;font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;} /* LPは右寄せ。右端にだけ少し余白を残す */ .lp-main{flex:none;margin-right:160px;} /* LPが画面中央から外れているため、ビューポート中央基準の固定ボタンとは 位置が合わない。固定ボタン自体のCSSは変えず、PC幅でだけ非表示にする。 ※このメディアクエリはファイル前方にあり、後方の無条件の .float-cta 定義に上書きされてしまうため !important で確実に効かせる。 */ .float-cta{display:none !important;} } /* スマホ〜タブレット幅で左右に見える斜めの光の帯（takaone.jp風の演出） */ body::before{ content:""; position:fixed;z-index:0;pointer-events:none; width:70%;height:100%;top:0;right:-20%; background:linear-gradient(110deg, transparent, rgba(255,255,255,.7), transparent); transform:skewX(-15deg); } #view-lp, #view-form{ position:relative;z-index:1; max-width:var(--maxw); margin:0 auto; /* 大きい見出しやずらした画像がはみ出しても横スクロールを起こさない */ overflow-x:clip; background:var(--white); box-shadow:0 0 30px rgba(0,0,0,.13); } .hidden{display:none !important;} /* 目には見せないが、検索エンジンと読み上げには残すテキスト */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ---------- アイコン(シルエットSVG／絵文字は使用しない) ---------- */ .icon{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;} .icon-fill{fill:currentColor;stroke:none;} .icon-lg{width:28px;height:28px;} /* ---------- 共通パーツ／画像プレースホルダー ---------- */ .placeholder-img{ position:relative; overflow:hidden; background:repeating-linear-gradient(45deg,#e7eef3,#e7eef3 10px,#eef4f8 10px,#eef4f8 20px); border-radius:10px; display:flex;flex-direction:column;align-items:center;justify-content:center; color:#7597ab; font-size:11px; text-align:center; padding:8px; gap:4px; } /* ---------- 画像スロットの縦横比 ---------- 横長の写真枠はすべて 3:2、丸アイコンは 1:1 に統一している。 高さを px で固定すると枠と写真の比率がズレて上下が切れるため、 必ず aspect-ratio で指定すること（object-fit:cover で切り抜かれる）。 → 素材は「3:2の横長」か「正方形」で用意すれば、どこにも切れずに収まる。 */ /* ---------- 画像スロット ---------- 使い方: 枠(.placeholder-img)の中に を1枚置くだけ。
...
img/ にファイルを置けば枠いっぱいに表示され、 まだファイルが無い場合は onerror で img が消え、 従来どおりストライプのプレースホルダー表示に自動で戻る。 */ .placeholder-img > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; } /* 未設置を示す点線。本体の border ではなく擬似要素で描くことで、 各パーツが独自に持つ枠線（例：.reaction-avatar の黒フチ）を壊さない。 */ .placeholder-img::before{ content:""; position:absolute;inset:0; border:1px dashed #a9c3d4; border-radius:inherit; pointer-events:none; } .placeholder-dark::before{border-color:#4a6273;} /* 写真が入ったら点線とストライプを消す。 :has() なので写真を置くだけで自動的に切り替わり、 読み込み失敗時は onerror で img が消えてプレースホルダーに戻る。 */ .placeholder-img:has(> img){background:none;} .placeholder-img:has(> img)::before{display:none;} /* 保存すべきファイル名を枠内に表示（画像が入ると隠れる） */ .ph-name{ font-size:10px; letter-spacing:.02em; word-break:break-all; opacity:.85; } .placeholder-img .icon{width:22px;height:22px;color:#a9c3d4;} .placeholder-dark{ background:repeating-linear-gradient(45deg,#26343d,#26343d 10px,#2c3d47 10px,#2c3d47 20px); color:#8fb2c7; } .placeholder-dark .icon{color:#4a6273;} .badge{ display:inline-block; background:var(--accent); color:var(--black); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; letter-spacing:.02em; } .btn{ display:flex;align-items:center;justify-content:center;gap:8px; width:100%; padding:16px 20px; border-radius:999px; font-weight:700; font-size:16px; border:none; text-align:center; } /* ページ内のメインCTA。 公式サイトの同名ボタン(foam_btn.svg)に合わせてオレンジ地＋白文字。 黄色地＋黒文字より黒ブロック上での視認性が高い。 */ .btn-primary{ background:var(--orange); color:#fff; box-shadow:0 6px 0 var(--orange-dark), 0 10px 18px rgba(0,0,0,.18); } .btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--orange-dark);} .btn-primary:disabled{background:#e6e6e6;color:#aaa;box-shadow:none;border-color:transparent;} /* 追従バーは「電話・LINE・無料査定」の3つが並ぶ。 本命の無料査定が一番弱く見えないよう、ページ内CTAと同じオレンジで統一する。 */ .float-cta .btn-primary{ box-shadow:0 4px 0 var(--orange-dark), 0 8px 14px rgba(0,0,0,.15); } .float-cta .btn-primary:active{box-shadow:0 1px 0 var(--orange-dark);} .btn-blue{ background:var(--blue); color:#fff; box-shadow:0 6px 0 var(--blue-dark), 0 10px 18px rgba(0,0,0,.15); } .btn-blue:active{transform:translateY(4px);box-shadow:0 2px 0 var(--blue-dark);} .btn-line{ background:var(--line-green); color:#fff; box-shadow:0 6px 0 #05a548, 0 10px 18px rgba(0,0,0,.18); } .btn-line:active{transform:translateY(4px);box-shadow:0 2px 0 #05a548;} .btn-outline{ background:transparent; color:var(--black); border:1.5px solid var(--black); } .btn-ghost{ background:transparent; color:var(--gray-500); font-size:13px; text-decoration:underline; padding:8px; } .section{padding:var(--sect-y) 0;} .section.dark{background:var(--black);color:var(--white);} .section.gray{background:var(--gray-100);} .section.tight{padding-top:0;} .eyebrow{ color:var(--blue); font-weight:700; font-size:12px; letter-spacing:.12em; text-align:center; margin-bottom:8px; } .section.dark .eyebrow{color:var(--blue);} h2.h-title{ /* 幅に比例させることで、狭い端末でも短い見出しが1行に収まる */ font-size:var(--fs-2xl); font-weight:800; text-align:center; margin:0 0 var(--gap-title); line-height:1.5; /* 万一1行に収まらない場合の保険。 balance=2行を均等に割る／auto-phrase=日本語の文節で折る （どちらも未対応ブラウザでは通常の折り返しに戻るだけ） */ text-wrap:balance; word-break:auto-phrase; } /* セクション大見出しは全部コーポレート・ロゴに統一 */ h2.h-title, .style-select-title, .why-title, .flow-title, .sold-title, .quiz-lead-text{ font-family:"Corporate Logo","Noto Sans JP",sans-serif; } .note{font-size:var(--fs-2xs);color:var(--gray-500);} /* ---------- ヘッダー ---------- */ /* ヘッダーは公式サイト(txt-garage.jp)に合わせて白地。 ロゴの主色がネイビーのため、水色地だと沈んで読めないため。 */ header.site-header{ position:sticky;top:0;z-index:50; background:#fff; color:var(--black); border-bottom:1px solid var(--gray-300); box-shadow:0 2px 10px rgba(0,0,0,.06); } .header-inner{ max-width:var(--maxw);margin:0 auto; display:flex;align-items:center;justify-content:space-between; /* ヘッダーはロゴと電話が並ぶため本文よりわずかに詰める */ padding:10px calc(var(--gutter) - 5px); gap:10px; } .logo-mark{display:flex;align-items:center;gap:7px;min-width:0;} /* 公式ロゴ。縦横比 274:82 を維持したまま高さで揃える */ /* 幅に比例して縮む。480pxで上限、狭い端末でも下限を割らない。 段階的に切り替えるメディアクエリより、常に画像と同じ比率で スケールするほうがデザインの見え方が安定する。 */ .logo-img{height:clamp(27px, 8.7vw, 42px);width:auto;flex:none;} /* このLPがバイク買取であることを示す小さなラベル */ .logo-sub{ flex:none; background:var(--blue);color:#fff; font-size:clamp(8.5px, 2.44vw, 11.7px);font-weight:800;line-height:1.2; padding:3px 6px;border-radius:4px; letter-spacing:.02em;text-align:center; } .header-cta{display:flex;gap:8px;} /* 電話まわりは公式サイト(txt-garage.jp)のヘッダーと同じ フリーダイヤル画像(tel.svg)＋受付時間テキストの組み合わせ */ .tel-btn{ display:flex;flex-direction:column;align-items:flex-end;gap:3px; flex:none; } .tel-btn .tel-img{width:clamp(128px, 42.3vw, 203px);height:auto;max-width:100%;} .tel-btn .tel-hours{ font-size:clamp(8.4px, 2.44vw, 11.7px);font-weight:800;line-height:1; color:#3c3c3c;letter-spacing:.01em;white-space:nowrap; } .tel-btn .icon{width:14px;height:14px;} /* ---------- ヒーロー：ファーストビューは1枚の写真に集約 ---------- */ /* 背景はキービジュアルの地色と同じ水色にして、画像とヒーローを地続きに見せる。 3項目ミニ査定は独立セクションへ切り出したので、 以前ここにあった余白確保用の padding-bottom は不要になった。 */ .hero{ background:#fff;color:#fff; } /* キービジュアルは切り抜かず全体を見せる。 文字が焼き込まれているため object-fit:cover でトリミングすると欠ける。 aspect-ratio で画像本来の比率(960:1219)を保持する。 背景を白にしているのは、画像下端の矢印の切れ込み部分が透過になっており、 そこから下の白いセクションと自然につながって見えるようにするため。 */ .hero-photo{ position:relative; aspect-ratio:1180 / 1252; background:#fff; overflow:hidden; } .hero-photo > .hero-key{ display:block; width:100%;height:100%; object-fit:cover; } .hero-photo-note{ position:absolute;top:50%;left:20px;right:20px;transform:translateY(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:6px; text-align:center;color:rgba(255,255,255,.55);font-size:11px; } .hero-photo-note .icon{width:22px;height:22px;} /* ---------- 3項目ミニ査定：白背景の独立セクション ---------- */ .quiz-section{background:#fff;padding-top:calc(var(--sect-y) * .35);} /* 見出しは文字組み。「3」だけスクロールで弾みながらポンと現れる */ .quiz-lead-text{ font-family:"Corporate Logo","Noto Sans JP",sans-serif; text-align:center;font-weight:900;color:var(--blue); font-size:clamp(32px, 10.4vw, 44px); line-height:1.35;margin:0 0 14px; } .quiz-lead-num{ display:inline-block;color:var(--orange); font-size:1.3em;margin:0 .05em; } .quiz-lead-num.punch-anim{opacity:0;transform:scale(.25) rotate(-20deg);} .quiz-lead-num.punch-anim.is-in{ opacity:1;transform:scale(1) rotate(0deg); transition:opacity .25s ease-out, transform .6s cubic-bezier(.24,1.7,.4,1); } .quiz-sub-row{ display:flex;flex-direction:column;align-items:center;gap:8px; margin-bottom:20px; } .quiz-sub{ text-align:center;font-weight:700;color:#3c3c3c; font-size:var(--fs-sm);margin:0; } /* バッジ・サブコピーも見出しに続いて、少し遅れてふわっと現れる */ .quiz-sub-row.fade-anim{opacity:0;transform:translateY(10px);} .quiz-sub-row.fade-anim.is-in{ opacity:1;transform:translateY(0); transition:opacity .4s ease-out .15s, transform .4s ease-out .15s; } /* 枠内を色付ける水色パネル。STYLEセクションの出張カードと同系色で揃える */ .quiz-panel{ position:relative; background:#f3faff;border:2px solid var(--blue); border-radius:18px;padding:0 18px 22px; box-shadow:0 10px 24px rgba(45,176,255,.18); overflow:hidden; } .quiz-panel-head{ background:var(--blue);color:#fff;text-align:center; font-weight:900;line-height:1.4; font-size:clamp(20px, 6.4vw, 26px); margin:0 -18px 18px;padding:16px 10px; } /* ページ各所のCTAからスクロールで到着したときに、ここだと分かるよう一瞬光らせる */ @keyframes quizPanelPulse{ 0% { box-shadow:0 10px 24px rgba(45,176,255,.18), 0 0 0 0 rgba(56,161,219,.45); } 35% { box-shadow:0 10px 24px rgba(45,176,255,.18), 0 0 0 8px rgba(56,161,219,.35); } 100%{ box-shadow:0 10px 24px rgba(45,176,255,.18), 0 0 0 0 rgba(56,161,219,0); } } .quiz-panel-pulse{animation:quizPanelPulse 1.4s ease-out;} @media (prefers-reduced-motion:reduce){ .quiz-panel-pulse{animation:none;} } .quiz-body{display:flex;gap:10px;align-items:flex-end;margin-bottom:16px;} .quiz-mascot{ flex:none;width:64px;height:64px;border-radius:50%; border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12); } .quiz-mascot .icon{width:26px;height:26px;} .quiz-bubble{ flex:1;background:#fff;border-radius:12px;border-bottom-left-radius:2px; padding:10px 12px;font-size:12.5px;font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.06); } .quiz-field-row{ display:flex;align-items:center;gap:0;margin-bottom:12px; background:#fff;border:1.5px solid var(--blue);border-radius:12px; overflow:hidden;position:relative; } .quiz-field-label{ flex:none;width:78px;box-sizing:border-box; background:#eaf6ff;color:var(--blue-dark); font-weight:800;font-size:var(--fs-sm); padding:13px 10px;white-space:nowrap;text-align:center; border-right:1.5px solid var(--blue); } .quiz-panel select, .quiz-panel input[type="text"]{ flex:1;width:100%;min-width:0;padding:13px 14px;border:none;box-sizing:border-box; font-size:15px;background:#fff;font-family:inherit;color:var(--black); -webkit-appearance:none;appearance:none;border-radius:0; } .quiz-panel select{ padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338a1db' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:16px; } .quiz-panel select:focus, .quiz-panel input[type="text"]:focus{outline:none;} /* ---------- 悩みチェック：色帯ボーダー＋シンプルなOKピル ---------- */ .check-section{background:#eaf5fd;} .check-catch{ text-align:center;font-weight:900;color:var(--black); line-height:1.6; margin:0 0 var(--gap-card); } .check-catch-big{ display:block;white-space:nowrap; font-size:clamp(22px, 7.6vw, 30px); } .check-catch-sub{ display:block; font-size:var(--fs-md); } .check-question-block{ display:flex;flex-direction:column;gap:22px; text-align:left;text-wrap:initial; } .check-question-row{ display:flex;align-items:center;gap:10px; } .check-question-row-left{justify-content:flex-start;} .check-question-row-right{justify-content:flex-end;} .check-question-text{text-align:left;} .check-question-face{ flex:none;width:56px;height:auto; } .check-question-text{ position:relative; background:var(--blue);border:2px solid var(--blue);border-radius:16px; padding:14px 16px; font-size:clamp(20px, 7vw, 28px);font-weight:900; line-height:1.4;color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12); } /* 吹き出しのしっぽ：顔写真がある側に向ける */ .check-question-row-left .check-question-text::before{ content:"";position:absolute;top:50%;left:-9px;transform:translateY(-50%); width:0;height:0; border-top:9px solid transparent;border-bottom:9px solid transparent; border-right:10px solid var(--blue); } .check-question-row-right .check-question-text::before{ content:"";position:absolute;top:50%;right:-9px;transform:translateY(-50%); width:0;height:0; border-top:9px solid transparent;border-bottom:9px solid transparent; border-left:10px solid var(--blue); } /* ---------- ティーバイティーの約束カード ---------- */ .promise-card{ background:#fff;border-top:5px solid var(--blue);border-radius:var(--radius); box-shadow:0 8px 20px rgba(0,0,0,.07); padding:26px 20px 22px; margin:var(--gap-block) 0; text-align:center; } .promise-title{ font-weight:900;color:var(--black); font-size:clamp(17px, 5.6vw, 22px);line-height:1.45; margin:0 0 18px; } .promise-title-em{color:var(--blue-dark);} .promise-tags{ display:flex;justify-content:center;gap:8px;flex-wrap:wrap; margin:0 0 18px; } .promise-tag{ background:var(--accent);color:#222;font-weight:900; font-size:var(--fs-sm);padding:8px 16px;border-radius:999px; } .promise-list{ list-style:none;margin:0;padding:0; text-align:left; display:inline-flex;flex-direction:column;gap:10px; } .promise-list li{ display:flex;align-items:center;gap:10px; font-weight:700;font-size:var(--fs-sm);color:#333;line-height:1.5; } .promise-icon{ flex:none;width:28px;height:28px;border-radius:50%; background:#eaf5fd;color:var(--blue); display:flex;align-items:center;justify-content:center; } .promise-icon .icon{width:15px;height:15px;} .check-lead{ text-align:center;font-weight:900;color:var(--blue); margin:var(--gap-block) 0 var(--gap-card); font-size:clamp(17px, 5.6vw, 21px); line-height:1.6; } .check-lead-big{ display:inline-block;margin-top:4px; font-size:clamp(30px, 10.5vw, 40px); } .check-photo-grid{display:flex;gap:8px;margin-bottom:var(--gap-card);} .check-photo-card{ position:relative;flex:1;min-width:0;border-radius:10px;overflow:hidden; aspect-ratio:3 / 5; box-shadow:0 6px 14px rgba(0,0,0,.15); } .check-photo-card img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; filter:brightness(.7); } .check-photo-overlay{ position:absolute;inset:0;z-index:1; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center; padding:10px 8px; } .check-photo-overlay h3{ margin:0 0 6px;color:var(--accent); font-size:clamp(11px, 3.5vw, 17px);font-weight:900;line-height:1.3; white-space:nowrap; text-shadow:0 2px 6px rgba(0,0,0,.6); } .check-photo-overlay p{ margin:0;color:#fff;font-weight:700; font-size:var(--fs-2xs);line-height:1.6; text-shadow:0 2px 6px rgba(0,0,0,.7); } /* ---------- MAKER：対象メーカー・排気量一覧 ---------- */ .maker-section{background:#fff;} .maker-title{display:block;} .maker-title-sub{ display:block;font-weight:800;color:var(--black); font-size:var(--fs-lg);margin-bottom:2px; } .maker-title-main{ position:relative;display:inline-block; font-size:calc(var(--fs-2xl) * 1.3);font-weight:900;color:var(--black); } .maker-lead{ text-align:center;color:#555;font-size:var(--fs-sm);line-height:1.85; margin:0 0 var(--gap-block); } .maker-grid{ display:grid;grid-template-columns:1fr 1fr;gap:12px; margin-bottom:var(--gap-block); } .maker-card{ position:relative; background:#eaf5fd;border-radius:20px; padding:20px 12px 14px; text-align:center; overflow:hidden; } .maker-card-wide{grid-column:1 / -1;} .maker-badge{ position:absolute;top:0;left:14px; display:flex;align-items:flex-start;justify-content:center; width:42px;height:48px;padding-top:8px; background:var(--accent);color:#222; font-weight:900;font-size:19px;line-height:1; clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); } .maker-tag{ display:block;text-align:right; font-weight:900;color:var(--blue); font-size:calc(var(--fs-lg) * 1.15);line-height:1.3;margin:0 8px 6px 0; } .maker-tag small{display:block;font-weight:800;font-size:.62em;color:var(--blue);margin-top:2px;} .maker-photo{ aspect-ratio:4 / 3;border-radius:8px;overflow:hidden; margin:0 0 10px;background:#eaf5fd; display:flex;align-items:center;justify-content:center; } .maker-photo img{width:100%;height:100%;object-fit:contain;display:block;} .maker-examples{ margin:0;font-size:var(--fs-2xs);color:#888;line-height:1.6;font-weight:700; background:#fff;border:1px solid #ccc;border-radius:6px; padding:8px 6px; } /* ---------- 査定スタイル：参考LP準拠の見出しブロック＋白背景カード2枚 ---------- */ .style-select{background:#fff;text-align:center;padding-bottom:var(--gap-block);} .style-select .hl-orange{color:var(--blue);} .style-select-title{ font-size:clamp(30px, 9.6vw, 42px);font-weight:900;line-height:1.4; margin:0 0 var(--gap-card);color:var(--black); } .style-select-note{ font-size:var(--fs-md);font-weight:700;color:#333;line-height:1.85; margin:0 0 var(--gap-card); } .style-pill-row{ display:flex;justify-content:center;gap:10px;margin:var(--gap-card) 0; flex-wrap:wrap; } .style-pill{ display:inline-flex;align-items:center;justify-content:center; font-weight:900;font-size:clamp(14px, 4.4vw, 24px);color:#fff; padding:14px 10px;border-radius:10px;white-space:nowrap; box-shadow:0 4px 0 rgba(0,0,0,.15); flex:1 1 0;min-width:0; } .style-pill em{font-style:normal;color:var(--accent);margin-left:.05em;} .style-pill-blue{background:var(--blue);} .style-pill-green{background:var(--line-green);} .style-select-desc{ font-size:var(--fs-sm);font-weight:700;color:var(--black);line-height:1.9; margin:0 0 var(--gap-card); } /* 薄い青の帯。見出し〜案内文をまとめて内包し、下端だけ中央がとがったV字に切れ込む */ .style-select-banner{ position:relative; background:#e8f4fc;color:var(--black); padding:calc(var(--gap-block) * .15) var(--gutter) calc(var(--gap-block) * 1.6); margin:0 calc(var(--gutter) * -1) var(--gap-block); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), 50% 100%, 0 calc(100% - 28px)); } /* 出張／LINE査定：白背景＋色枠のカード型に変更。出張査定はオレンジ系でCTAと揃える */ .style-row-list{display:flex;flex-direction:column;gap:var(--gap-card);text-align:left;} .style-row{ background:#fff;border-radius:var(--radius); border:2px solid var(--gray-300); overflow:hidden; } .style-row-blue{border-color:var(--blue);} .style-row-green{border-color:var(--line-green);} .style-row-head{ font-size:var(--fs-md);font-weight:900;color:#fff; padding:8px 16px; } .style-row-head-blue{background:var(--blue);} .style-row-head-green{background:var(--line-green);} .style-row-body{display:flex;align-items:flex-start;gap:12px;padding:18px 16px 20px;} .style-row-text{flex:1.6;min-width:0;} .style-row-lead{ font-weight:900;line-height:1.35;margin:0 0 12px; font-size:clamp(19px, 5.8vw, 24px); white-space:nowrap; } .style-row-blue .style-row-lead{color:var(--blue-dark);} .style-row-green .style-row-lead{color:#05a548;} .style-row-copy{font-size:var(--fs-sm);color:var(--black);font-weight:700;line-height:1.85;margin:0;} .style-row-photo{ position:relative;flex:1;max-width:36%;margin-top:44px; } .style-row-green .style-row-photo{margin-top:0;max-width:30%;} .style-row-photo img{display:block;width:100%;height:auto;border-radius:12px;} /* REASONセクション：青地。上端中央がとがったV字に切れ込み、直前セクションとの継ぎ目を演出 */ .reason-section{ position:relative; background:#2cadfa;color:#fff; padding-top:calc(var(--sect-y) * .6 + 26px); padding-bottom:calc(var(--sect-y) * 1.5); margin-top:26px; clip-path:polygon(0 0, 50% 26px, 100% 0, 100% 100%, 0 100%); } .reason-section .h-title{color:#fff;margin-bottom:calc(var(--gap-title) * .5);} .reason-title-big{display:inline-block;margin-top:4px;font-size:1.5em;color:#ffff00;} .reason-lead-text{ text-align:center;color:#222;font-weight:700;font-size:var(--fs-sm); line-height:1.8;margin:0 0 var(--gap-block); } /* ---------- REASON：写真の角に大きな縁取り数字を重ねるカード ---------- */ .reason-grid{display:flex;flex-direction:column;gap:var(--gap-card);} .reason-card{ position:relative; background:#fff;border:1px solid var(--gray-300);border-radius:0; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06); } .reason-photo{aspect-ratio:3 / 2;border-radius:0;margin:0;position:relative;} .reason-num{ color:var(--blue);font-weight:900;margin-right:6px; font-size:1.3em; } .reason-card-body{padding:22px 18px 20px;} .reason-card-body h3{ color:var(--black); font-size:calc(var(--fs-lg) + 1px); font-weight:900;margin:0 0 8px;word-break:auto-phrase;line-height:1.4; padding-left:2em;text-indent:-2em; } /* 見出し内の強調はコーポレートのオレンジ＋黄色マーカー */ .hl-orange{color:var(--orange);} .hl-green{color:var(--line-green);} .reason-card-body .hl-orange{ background-image:linear-gradient(#ffe680, #ffe680); background-repeat:no-repeat;background-position:0 88%;background-size:100% 45%; color:var(--black);padding:0 1px; -webkit-box-decoration-break:clone;box-decoration-break:clone; } .reason-card-body .hl-orange.marker-anim{ background-size:0% 45%; transition:background-size .7s ease-out; } .reason-card-body .hl-orange.marker-anim.is-in{background-size:100% 45%;} .reason-card-body p{font-size:var(--fs-sm);color:#555;margin:0;line-height:1.8;} /* ---------- WHY：買取実績写真を敷いた訴求ブロック ---------- */ .section.why{ position:relative; overflow:hidden; color:#fff; text-align:center; background:#12181d url("../img/rush2.jpg") center / cover no-repeat; } /* 写真の上に暗幕を敷いて文字を読ませる */ .section.why::before{ content:""; position:absolute;inset:0; background:rgba(8,14,20,.58); } .section.why > .wrap{position:relative;z-index:1;} .section.why .eyebrow{color:#7fd4ff;} .why-title{ font-size:var(--fs-2xl);font-weight:900; margin:0 0 26px;line-height:1.4; text-shadow:0 2px 8px rgba(0,0,0,.6); } /* 「価値が残っている場合があるんです！」＝この節の主役。画面に入るとバンと出る */ .why-punch{ font-size:clamp(27px, 9vw, 43px); white-space:nowrap; font-weight:900;color:var(--accent); margin:0 0 calc(var(--gap-card) + 14px);line-height:1.35; text-shadow:0 3px 0 rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.5); } .why-lead{ font-size:var(--fs-md);font-weight:700; margin:0 0 var(--gap-card);line-height:1.9; text-shadow:0 2px 6px rgba(0,0,0,.6); } .why-lead-tight{margin-bottom:0;text-decoration:underline;text-underline-offset:3px;} /* 背景透過の切り抜き写真なので、枠や影は付けずにそのまま乗せる */ .why-photo{ display:block;width:100%;height:auto; margin:0 0 var(--gap-card); filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); } .why-close{ font-size:var(--fs-lg);font-weight:900; margin:0;line-height:1.7; text-shadow:0 2px 6px rgba(0,0,0,.6); } .hl-yellow{color:var(--accent);} /* WHY：状態別アイコン一覧（長期不動・事故キズ・エンジン不良・走行不能・車検切れ） */ .why-status-grid{ display:grid;grid-template-columns:repeat(2, 1fr);gap:10px; margin:0 0 var(--gap-card);text-align:left; } .why-status-card{ display:flex;align-items:center;gap:8px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25); border-radius:10px;padding:10px 12px; font-size:var(--fs-xs);font-weight:800;color:#fff; } .why-status-icon{ flex:none;width:30px;height:30px;border-radius:50%; background:var(--accent);color:var(--black); display:flex;align-items:center;justify-content:center; } .why-status-icon .icon{width:16px;height:16px;} /* 出現前の状態。JSが付けるので、JS無効時は最初から表示される */ .punch-anim{ opacity:0; transform:scale(2.3); } .punch-anim.is-in{ opacity:1; transform:scale(1); transition:opacity .18s ease-out, transform .42s cubic-bezier(.18,1.6,.4,1); } @media (prefers-reduced-motion:reduce){ .punch-anim{opacity:1;transform:none;transition:none;} } /* ---------- スタッフ写真＋大見出しのCTAブロック ---------- */ .staff-cta{background:#2cadfa;padding:calc(var(--gap-block) * .6) 0 var(--gap-block);} .staff-cta-inner{position:relative;} .staff-cta-kicker{ background:#fff;color:#2cadfa;font-weight:900; font-size:clamp(13px, 4.3vw, 20px); text-align:center;line-height:1.5;white-space:nowrap; margin:0 0 calc(var(--gap-block) * .8); padding:20px 8px 14px; box-shadow:0 3px 10px rgba(0,0,0,.12); } /* 左：見出し＋ロゴ／右：スタッフ写真 */ .staff-cta-row{display:flex;flex-direction:row-reverse;align-items:flex-end;gap:4px;margin-bottom:10px;} .staff-cta-photo{flex:1.3;min-width:0;margin:0 0 -18px -30px;position:relative;z-index:1;transform:translate(14px, -40px);} .staff-cta-photo img{display:block;width:100%;height:auto;} .staff-cta-body{flex:1;min-width:0;text-align:center;padding-bottom:20px;position:relative;z-index:2;transform:translateX(10px);} .staff-cta-headline{ font-family:"Corporate Logo","Noto Sans JP",sans-serif; color:#fff;font-weight:900;line-height:1.15; font-size:clamp(40px, 14.5vw, 60px); margin:0 0 10px; text-shadow:0 2px 8px rgba(0,0,0,.45); white-space:nowrap; /* 左カラムより文字が大きい分は、右（写真の上）へはみ出させる（左端は画面外に出ない） */ direction:ltr; } .staff-cta-em{color:#ffff00;} .staff-cta-logo{display:block;width:100%;max-width:195px;margin:0 auto;height:auto;} .staff-cta-tel{ display:flex;align-items:center;justify-content:center; margin-top:20px;color:#fff; } .staff-cta-tel-img{display:block;width:auto;height:64px;max-width:100%;} .staff-cta .btn-primary{font-size:clamp(17px, 5.6vw, 22px);padding:18px 20px;margin-top:-20px;} /* 出張査定／LINE査定の2ボタン並び（下部固定バーと同じ見た目） */ /* 文言が長いので横並びではなく縦に2段。どちらも1行で収まる */ .staff-cta-btns{display:flex;flex-direction:column;gap:18px;margin-top:-20px;position:relative;z-index:2;} .staff-cta .staff-cta-btns .btn{ position:relative;width:100%;margin:0; padding:16px clamp(30px, 9vw, 40px) 16px 12px; gap:8px; font-size:clamp(15px, 4.6vw, 19px);font-weight:900; white-space:nowrap;line-height:1.3; } .staff-cta-btns .btn .icon{width:20px;height:20px;} .staff-cta-btns .btn .btn-endcap{right:16px;} /* ---------- FLOW：参考LP準拠。青地に白丸アイコン＋STEPバッジの横並び ---------- */ .flow-section{background:var(--blue);color:#fff;} .flow-title{ text-align:center;font-weight:900;color:#fff; font-size:clamp(24px, 7.6vw, 32px); line-height:1.4;margin:0 0 10px; } .flow-list{display:flex;flex-direction:column;gap:var(--gap-block);margin-top:var(--gap-title);} .flow-row{display:flex;gap:16px;align-items:flex-start;} .flow-circle{ flex:none;width:76px;height:76px;border-radius:50%; background:#fff; display:flex;align-items:center;justify-content:center; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,.15); } .flow-circle img{width:70%;height:70%;object-fit:contain;} .flow-row-body{flex:1;min-width:0;padding-top:4px;} .flow-step{ display:inline-block;background:var(--accent);color:var(--black); font-weight:900;font-size:var(--fs-2xs);letter-spacing:.04em; padding:3px 12px;border-radius:999px;margin-bottom:6px; } .flow-row h3{ color:#fff; font-size:var(--fs-lg);font-weight:900; margin:0 0 6px; } .flow-row p{ font-size:var(--fs-sm);color:#fff;margin:0; line-height:1.75; } .flow-small-note{font-size:var(--fs-2xs);opacity:.85;} .flow-cta{margin-top:var(--gap-block);background:#fff;color:var(--blue);box-shadow:0 6px 0 rgba(0,0,0,.15);} /* ---------- 実績/声(写真タイプ) ---------- */ .voice-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;} .voice-scroll::-webkit-scrollbar{display:none;} .voice-card-v2{ flex:none;width:210px; background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);overflow:hidden; } .voice-photo{aspect-ratio:3 / 2;position:relative;} .voice-age{ position:absolute;left:8px;bottom:8px; background:var(--black);color:var(--accent); font-size:11px;font-weight:800;padding:3px 9px;border-radius:6px; } .voice-headline{ background:var(--blue);color:#fff;font-weight:800;font-size:12.5px; padding:8px 10px; } .voice-body{padding:10px;} .voice-model{font-size:11px;color:var(--gray-500);margin-bottom:4px;} .voice-body p{font-size:12px;color:#444;margin:0;} /* ---------- FAQ ---------- */ .faq-item{border-bottom:1px solid var(--gray-300);} .faq-q{ width:100%;text-align:left;background:none;border:none; padding:16px 4px;font-weight:700;font-size:16px; display:flex;justify-content:space-between;align-items:center;gap:10px; /* iOS Safariは-webkit-appearanceが残っていると文字色までシステムの 青を当ててしまうため、色を明示しつつネイティブ見た目をリセットする */ -webkit-appearance:none;appearance:none;color:var(--black);font-family:inherit; } .faq-q .q-mark{color:var(--blue);font-weight:900;flex:none;} .faq-a{ max-height:0;overflow:hidden;transition:max-height .25s ease; display:flex;align-items:flex-start;gap:10px; font-size:var(--fs-xs);color:#555;padding:0 4px; } .a-mark{flex:none;color:var(--gray-500);font-weight:900;} .faq-a p{margin:0;} .faq-item.open .faq-a{max-height:200px;padding-bottom:16px;} .faq-toggle-icon{transition:transform .2s ease;flex:none;color:var(--blue);} .faq-item.open .faq-toggle-icon{transform:rotate(135deg);} /* ---------- 最終CTA（背景は青。スタッフの服がアクセントカラーと同化しないよう変更） ---------- */ .final-cta{ background:var(--blue); color:#fff;text-align:center; } /* 吹き出し＋スタッフ写真を横並びに */ .final-cta-top{ display:flex;align-items:center;gap:10px; margin:0 0 20px;text-align:left; } /* 白い吹き出し。右辺中央から三角のしっぽを出して隣の写真を指す */ .final-cta-bubble{ position:relative; background:#fff; border-radius:18px; padding:16px 18px; margin:0; } /* 右カラムは幅を6割までに抑えて、左の写真に幅を回す */ /* 吹き出しは1行固定なので右カラムは吹き出しの幅に合わせ、残りを写真に回す */ .final-cta-right{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px;} .final-cta-bubble-side{flex:none;min-width:0;padding:10px 12px;} .final-cta-bubble-side::after{ content:""; position:absolute;top:50%;left:-12px;transform:translateY(-50%); border-top:11px solid transparent;border-bottom:11px solid transparent; border-right:14px solid #fff; } .final-cta h2{ font-family:"Corporate Logo","Noto Sans JP",sans-serif; font-size:clamp(12.5px, 3.75vw, 15px);font-weight:900;margin:0;color:var(--blue); white-space:nowrap;line-height:1.35; } .final-cta-emphasis{font-size:1.4em;color:var(--orange);} /* 透過PNGなので枠は付けず、背景にそのまま乗せる */ .final-cta-photo{ flex:1;min-width:0;display:block;width:100%;max-width:300px;height:auto; margin:0; } .final-cta p{font-size:var(--fs-sm);color:#fff;margin:0 0 14px;font-weight:700;line-height:1.7;} .final-cta-sub{font-size:var(--fs-md);font-weight:900;margin:0;line-height:1.6;} .final-cta-note{font-size:var(--fs-md);font-weight:900;margin-bottom:22px;} .final-cta-card{ background:var(--accent);border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.08); padding:18px 18px 16px;margin:0 0 22px;text-align:left; } .final-cta-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;} .final-cta-list li{ display:flex;align-items:center;gap:10px; font-size:var(--fs-sm);font-weight:700;color:#333;line-height:1.5; } .final-cta-icon{ flex:none;width:26px;height:26px;border-radius:50%; background:#eaf5fd;color:var(--blue); display:flex;align-items:center;justify-content:center; } .final-cta-icon .icon{width:15px;height:15px;} /* ---------- フッター直前のブランドブロック（公式サイト下部に合わせた構成） ---------- */ .footer-brand{ background:#fff;color:var(--black); text-align:center; padding:calc(var(--sect-y) * .8) 0; border-top:1px solid var(--gray-300); } .fb-logo{width:clamp(150px, 42vw, 200px);height:auto;margin:0 auto var(--gap-card);} .fb-tagline{font-weight:800;font-size:var(--fs-md);line-height:1.6;margin:0 0 var(--gap-card);} .fb-tel{display:inline-block;} .fb-tel img{width:clamp(220px, 62vw, 300px);height:auto;margin:0 auto;} .fb-tel-hours{font-size:var(--fs-xs);font-weight:800;color:#3c3c3c;margin:6px 0 var(--gap-card);} .fb-cta{max-width:340px;margin:0 auto var(--gap-block);} /* SNSアイコンは公式配布の色付きSVGをそのまま使うため、 枠は付けずアイコン本来の色を活かす */ .fb-sns{display:flex;justify-content:center;align-items:center;gap:18px;} .fb-sns img{width:32px;height:32px;display:block;} /* ---------- サイトメニュー（公式フッターのアコーディオン） ---------- ネイティブ
/ を使い、開閉のJSを持たずに実装する。 公式サイトは各行が薄いグレーの角丸カードで、行間にわずかな隙間がある。 */ .footer-nav{ background:#fff; padding:0 0 2px; border-top:1px solid var(--gray-300); border-bottom:1px solid var(--gray-300); } .footer-nav-top{ display:block; max-width:var(--maxw);margin:0 auto; padding:15px var(--gutter); font-weight:800;font-size:var(--fs-sm);color:var(--black); background:#fff;border-bottom:1px solid var(--gray-300); } .footer-nav-item{margin:6px var(--gutter);max-width:calc(var(--maxw) - var(--gutter) * 2);margin-left:auto;margin-right:auto;} .footer-nav-item summary{ display:flex;align-items:center;justify-content:space-between; padding:15px 16px; font-weight:800;font-size:var(--fs-sm);color:var(--black); background:#e9e9ea;border-radius:10px; cursor:pointer; list-style:none; } .footer-nav-top::-webkit-details-marker, .footer-nav-item summary::-webkit-details-marker{display:none;} /* 「＋」を自前で描き、開いたら「−」に切り替える */ .footer-nav-item summary::after{ content:"+"; flex:none;width:22px;height:22px;margin-left:10px; border-radius:50%;background:#fff; display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:700;color:var(--gray-500); } .footer-nav-item[open] summary::after{content:"−";} .footer-nav-item[open] summary{border-radius:10px 10px 0 0;} .footer-nav-item ul{ list-style:none;margin:0;padding:2px 16px 6px; background:#e9e9ea;border-radius:0 0 10px 10px; } .footer-nav-item li{border-top:1px solid rgba(0,0,0,.08);} .footer-nav-item li:first-child{border-top:none;} .footer-nav-item li a{ display:block;padding:10px 4px; font-size:var(--fs-xs);color:#444; } footer{ background:#fff;color:#555; padding:calc(var(--sect-y) * .5) 0 100px;font-size:12px; } /* 罫線つきの表組み。公式フッターの2列リンクに合わせる（実機確認の結果、文字はオレンジ） */ footer .foot-links{ display:grid;grid-template-columns:1fr 1fr; border-top:1px solid var(--gray-300); } footer .foot-links a{ display:block;padding:13px 4px; text-decoration:none;color:var(--black);font-weight:700; border-bottom:1px solid var(--gray-300); } footer .foot-links a:nth-child(odd){border-right:1px solid var(--gray-300);padding-right:10px;} footer .foot-links a:nth-child(even){padding-left:10px;} /* バナー：公式と同じくYouTube・TikTokを2列、ギネスはその下に1列ぶんの幅で中央寄せ */ .footer-banners{ display:grid;grid-template-columns:1fr 1fr;gap:10px; margin-top:18px; } .footer-banners img{display:block;width:100%;height:auto;} .footer-banner-wide{grid-column:1 / -1;max-width:calc(50% - 5px);margin:0 auto;width:100%;} /* ---------- フローティングCTA(下部固定) ---------- */ .float-cta{ position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:60; width:100%;max-width:var(--maxw); background:#fff;border-top:1px solid var(--gray-300); /* 左右余白・ボタン間隔は狭い端末でも詰められるよう可変にする */ padding:10px clamp(10px, 3vw, 16px) calc(10px + env(safe-area-inset-bottom)); display:flex;gap:clamp(6px, 2vw, 8px); box-shadow:0 -6px 16px rgba(0,0,0,.08); } /* 電話は削除（ヘッダーにフリーダイヤルが常時あるため重複）。 主役は出張査定の申し込み。LINEは幅と文字を抑えて主従をつける。 */ /* 2つとも1行に揃える。片方だけ2行だと、もう片方の中身が 間延びして落ち着かないため。主従は幅と文字サイズで付ける。 */ .float-cta .btn{ position:relative; /* 丸アイコン分の右余白も可変にする。固定34pxだと305px幅の端末で ボタンの最小幅を超えてはみ出す。 */ padding:14px clamp(26px, 8vw, 34px) 14px 8px; line-height:1.3; gap:clamp(4px, 1.5vw, 6px); white-space:nowrap; } /* 公式サイトの下部固定バーに合わせた「白丸＋再生三角」の飾り */ .btn-endcap{ position:absolute;right:clamp(4px, 1.5vw, 8px);top:50%;transform:translateY(-50%); width:clamp(16px, 5vw, 22px);height:clamp(16px, 5vw, 22px);border-radius:50%; background:rgba(255,255,255,.9); display:flex;align-items:center;justify-content:center; } .btn-endcap .icon{width:52%;height:52%;color:inherit;} .btn-line .btn-endcap .icon{color:var(--line-green);} .btn-primary .btn-endcap .icon{color:var(--orange);} /* 「オンライン買取り」が長くなった分、幅の比率と文字サイズを再調整（320px幅でも両方1行） */ .float-cta .btn-line{ flex:1; font-size:clamp(10.5px, 3.2vw, 14px); white-space:nowrap; } .float-cta .btn-line .icon{width:14px;height:14px;} .float-cta .btn-primary{ flex:1.15; font-size:clamp(11px, 3.5vw, 16px); } .float-cta .btn-primary .icon{width:16px;height:16px;} /* ================= 査定フォーム ビュー ================= */ #view-form{ min-height:100vh; background:var(--gray-100); padding-bottom:40px; } /* フォーム画面専用のヘッダーは廃止（共通の site-header をそのまま使う） */ .form-body{max-width:var(--maxw);margin:0 auto;padding:22px 20px 100px;} .form-step{display:none;} .form-step.active{ display:block;animation:fadeIn .25s ease; /* 前のセクションからの続き感を出すため、カード状に枠で囲む */ background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius); padding:20px 18px;box-shadow:0 2px 10px rgba(0,0,0,.05); } @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .form-step h2{font-size:18px;font-weight:800;margin:0 0 6px;} .form-step .step-desc{font-size:13px;color:#666;margin:0 0 22px;} /* 市場相場は変動する旨の注記。フォーム冒頭に、質問セクションと同じマスコット+吹き出し形式で表示 */ .price-notice{ display:flex;gap:10px;align-items:flex-start; margin:0 0 22px; } .price-notice .quiz-mascot{width:52px;height:52px;} .price-notice .quiz-mascot .icon{width:22px;height:22px;} .price-notice-bubble{ flex:1;background:#eef7fc;border-radius:12px;border-bottom-left-radius:2px; padding:12px 14px; font-size:var(--fs-sm);color:#2c4a5c;line-height:1.7; box-shadow:0 2px 6px rgba(0,0,0,.05); } .price-notice-bubble p{margin:0;} .field{margin-bottom:18px;} .field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;} .field .required{color:var(--danger);font-size:11px;margin-left:4px;} .field .optional{color:var(--gray-500);font-size:11px;font-weight:400;margin-left:4px;} .field .field-note{color:var(--gray-500);font-size:12px;font-weight:400;margin-left:2px;} .field select, .field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea{ width:100%;padding:13px 14px;border-radius:10px;border:1px solid var(--gray-300); /* iOSはinputのfont-sizeが16px未満だとフォーカス時に自動ズームするため16px以上に固定 */ font-size:16px;background:#fff;font-family:inherit; } .field select:focus, .field input:focus, .field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;} .field input[readonly]{background:var(--gray-100);color:var(--gray-500);cursor:not-allowed;} .field input[readonly]:focus{outline:none;} .field textarea{resize:vertical;min-height:80px;} .form-nav{ position:fixed;left:0;right:0;bottom:0;z-index:55; background:#fff;border-top:1px solid var(--gray-300); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); } .form-nav-inner{display:flex;gap:10px;width:100%;max-width:var(--maxw);margin:0 auto;} /* サンクス関連のCSSは thanks/index.html 側に移動しました */ /* ---------- 離脱防止モーダル（バイク王の実際の挙動を参考に再現） ---------- */ #exit-modal-overlay{ position:fixed;inset:0;z-index:200; background:rgba(0,0,0,.6); display:flex;align-items:center;justify-content:center; padding:20px; } #exit-modal-overlay.hidden{display:none;} .exit-modal{ position:relative; width:100%;max-width:340px; background:#fff;border-radius:14px; overflow:hidden; animation:popIn .2s ease; box-shadow:0 20px 40px rgba(0,0,0,.35); } @keyframes popIn{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}} .exit-modal-close{ position:absolute;top:8px;right:8px;z-index:2; width:26px;height:26px;border-radius:50%; background:rgba(255,255,255,.9);border:none;color:#333; display:flex;align-items:center;justify-content:center; } /* 文字と画像が重なって見えていたため、テキストの重ね表示は廃止。 line.jpg には文言が焼き込み済みなので、画像だけをそのまま見せる。 */ .exit-modal-banner{padding:0;} .exit-modal-img{display:block;width:100%;height:auto;} .exit-modal-body{padding:14px 18px 20px;} .exit-modal .btn{margin-bottom:8px;} .exit-modal-detail{ display:block;text-align:center;font-size:12.5px;color:#444; text-decoration:underline; } /* ========================================================== ティーバイティー「らしさ」パーツ （公式サイトのコミック調・実写スポークスパーソン・ サインボード風実績カードのトーンを参考に追加） ========================================================== */ /* バイク実績カルーセル：見出し＋実績カード＋スライダーをまとめた薄い青のセクション */ .sold-carousel{background:#eaf5fd;} .sold-title{ text-align:center;font-weight:900;color:var(--blue); font-size:clamp(29px, 9.2vw, 39px); line-height:1.3;margin:0 0 8px; white-space:nowrap; } .sold-sub{ text-align:center;font-weight:800;color:var(--black);font-size:var(--fs-lg); line-height:1.5; margin:0 0 var(--gap-block); } .sold-carousel .proof-card{margin-bottom:0;} .sold-carousel-wrap{display:flex;align-items:center;gap:2px;margin-top:var(--gap-block);} .sold-arrow{ flex:none;width:20px;height:34px; background:none;border:none; display:flex;align-items:center;justify-content:center; color:var(--blue); padding:0; } .sold-arrow .icon{width:20px;height:20px;stroke-width:3;} .sold-scroll{ display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; padding:2px 2px 10px;margin:0; scrollbar-width:none;flex:1;min-width:0; } .sold-scroll::-webkit-scrollbar{display:none;} .sold-card{ flex:none;width:min(76vw, 300px);scroll-snap-align:center; background:#fff;border-radius:var(--radius); box-shadow:0 8px 20px rgba(0,0,0,.08); overflow:hidden; } .sold-card-body{padding:12px 14px 14px;} .sold-tags .chip{ display:inline-block;font-size:var(--fs-2xs);font-weight:700;padding:3px 8px; background:var(--gray-100);color:#444; border-radius:4px;margin:0 4px 4px 0; } .sold-tags .chip-loc, .sold-tags .chip-model{background:revert;color:revert;} .sold-photo{position:relative;aspect-ratio:3 / 2;} .sold-photo img{width:100%;height:100%;object-fit:cover;display:block;} .sold-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;} .sold-dots span{width:7px;height:7px;border-radius:50%;background:var(--gray-300);} .sold-dots span.on{background:var(--orange);} /* お客様の声：実績カード */ .proof-card{ background:#fff;border:1px solid var(--gray-300);border-radius:14px;overflow:hidden;margin-bottom:16px; box-shadow:0 6px 18px rgba(0,0,0,.06); } .proof-photo{aspect-ratio:3 / 2;position:relative;} .proof-sign{ position:absolute;bottom:10px;right:10px; background:#ffe6f2;border:2px solid var(--black);border-radius:50%; width:70px;height:70px;display:flex;align-items:center;justify-content:center; text-align:center;font-size:11px;font-weight:900;color:#c02a72;transform:rotate(-8deg); line-height:1.2; } .proof-body{padding:14px;} .proof-type-row{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:800;color:var(--black);margin-bottom:8px;} .proof-type-row .icon{width:18px;height:18px;color:var(--blue);flex:none;} .proof-type-row .lbl{background:var(--accent);color:#222;font-weight:800;padding:3px 8px;border-radius:4px;font-size:11px;} /* ラベルと金額を横一列に並べる */ .proof-price-row{ display:flex;align-items:baseline;flex-wrap:wrap; gap:4px 9px;margin-bottom:10px; } .proof-price-lbl{ position:relative;top:-6px; background:var(--blue);color:#fff;font-weight:800;font-size:13px; padding:5px 13px;border-radius:5px;white-space:nowrap; } .proof-price{ font-size:clamp(24px, 7.4vw, 34px);font-weight:900;color:var(--blue); line-height:1.1;white-space:nowrap; } .proof-price span{font-size:13px;font-weight:700;color:var(--gray-500);} .proof-comment{ background:var(--gray-100);border-radius:12px;border-top-left-radius:2px; padding:10px 12px;font-size:var(--fs-sm);color:#444;display:flex;gap:10px;align-items:flex-start; } .proof-comment .mini-avatar{flex:none;width:32px;height:32px;border-radius:50%;} .mini-proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--gap-card);} .mini-proof{background:#fff;border:1px solid var(--gray-300);border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.05);} .mini-proof-photo{aspect-ratio:3 / 2;} .mini-proof-tags{padding:8px;} /* 1行目＝地域チップ＋お名前、2行目＝車種 */ .mini-proof-tags .name{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; font-weight:800;font-size:var(--fs-xs);margin-bottom:5px; } .mini-proof-tags .name .chip{margin:0;} .mini-proof-tags .chip{ display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;margin:0 4px 4px 0; line-height:1.45; } .chip-loc{background:#e2defa;color:#4d3fa8;} .chip-model{background:var(--black);color:#fff;} /* ---------- 口コミ（CUSTOMER REVIEWS） ---------- */ .review-section{background:#fff;} .review-card{ background:#fff;border:1px solid var(--gray-300);border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); padding:16px;margin-bottom:var(--gap-card); } .review-vehicle-icon{ display:inline-flex;align-items:center;gap:6px; color:var(--blue-dark);font-weight:800;font-size:var(--fs-sm); } .review-meta{margin:8px 0;} .review-meta .chip{ display:inline-block;font-size:var(--fs-2xs);font-weight:700;color:#444; background:var(--gray-100);padding:3px 8px;border-radius:4px;margin:0 4px 4px 0; } .review-meta .chip-loc{background:#e2defa;color:#4d3fa8;} .review-stars{color:var(--accent-dark);font-size:var(--fs-lg);letter-spacing:.05em;margin-bottom:4px;} .review-scores{font-size:var(--fs-2xs);color:#666;margin:0 0 10px;} .review-comment{font-size:var(--fs-sm);color:#333;line-height:1.8;margin:0;} .review-more{max-width:340px;margin:0 auto;display:flex;} /* ---------- 店舗一覧・LOCATIONS：地図に直接エリアボタンを重ねる ---------- */ .shop-section{background:var(--accent);text-align:center;} .shop-eyebrow{text-align:left;} h2.shop-title{ text-align:left;font-weight:900;color:var(--black); font-size:clamp(28px, 9vw, 38px); line-height:1.3;margin:4px 0 6px; } .shop-section .btn{max-width:320px;margin:0 auto;} .shop-staff-block{position:relative;z-index:0;max-width:260px;margin:40px 0 10px;transform:translateX(-12px);} .shop-staff-block img{display:block;width:100%;height:auto;} /* 右に20pxずらす分、幅を20px削っておき、狭い端末でも右にはみ出さないようにする */ .shop-map{position:relative;width:calc(100% - 20px);max-width:340px;margin:-220px auto var(--gap-block);transform:translateX(20px);} .shop-map img{display:block;width:100%;height:auto;} .map-pin{ position:absolute;transform:translate(-50%, -50%); color:#fff; font-weight:900;font-size:11px;white-space:nowrap; padding:6px 11px;border-radius:6px; box-shadow:0 2px 5px rgba(0,0,0,.25); } /* 各エリアの実座標は画像解析で算出した重心をベースに、左右の間隔を広げて調整 */ .map-pin-hokkaido{top:14%; left:66%; background:#376ab2;} .map-pin-tohoku{top:44%; left:85%; background:#00aaea;} .map-pin-hokuriku{top:52%; left:48%; background:#6cba5a;} .map-pin-kanto{top:68%; left:79%; background:#00a283;} .map-pin-chushikoku{top:63%; left:19%; background:#a28b6a;} .map-pin-kansai{top:83%; left:50%; background:#f5ac3c;} .map-pin-kyushu{top:80%; left:4%; background:#eb6d65;} .map-pin-okinawa{top:100%; left:20%; background:#ff8d4f;} /* ---------- バイクを高く売るためのポイント ---------- */ .tips-section{background:#fff;} .tips-section .h-title{font-size:calc(var(--fs-2xl) * 1.2 - 1px);} .tips-list{display:flex;flex-direction:column;gap:var(--gap-block);} .tips-card{ display:flex;align-items:center;gap:16px; } .tips-card-rev{flex-direction:row-reverse;} .tips-photo{ flex:0 0 40%;aspect-ratio:1 / 1;border-radius:14px;overflow:hidden; } .tips-card-body{position:relative;flex:1;min-width:0;} .tips-bignum{ position:absolute;top:-14px;right:0;z-index:0; font-size:92px;font-weight:900;line-height:1; color:var(--blue);opacity:.14; pointer-events:none; } .tips-card-rev .tips-bignum{right:auto;left:0;} .tips-card-body h3{position:relative;z-index:1;margin:0 0 6px;font-size:clamp(12px, 3.5vw, 16.5px);font-weight:800;line-height:1.5;white-space:nowrap;} .tips-card-body p{position:relative;z-index:1;margin:0;font-size:var(--fs-sm);color:#555;line-height:1.8;} /* ---------- バイク買取り時に必要な書類 ---------- */ .docs-section{background:#fff;} .docs-title{white-space:nowrap;font-size:clamp(20px, 6.6vw, 34px);} .docs-extra-list small{font-size:.82em;font-weight:400;color:#666;} .docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--gap-card);} .docs-card{ display:flex;flex-direction:column;align-items:center;gap:8px; background:var(--gray-100);border-radius:10px;padding:16px 10px; text-align:center;font-size:var(--fs-xs);font-weight:800;color:var(--black); } .docs-card img{width:64px;height:64px;object-fit:contain;} .docs-card small{display:block;margin-top:4px;font-weight:400;color:#666;font-size:.9em;} .docs-note{font-size:var(--fs-sm);color:#444;line-height:1.8;margin:0 0 10px;} .docs-extra-list{margin:0 0 var(--gap-card);padding-left:1.2em;font-size:var(--fs-sm);color:#444;line-height:1.9;} .docs-extra-list strong{color:var(--blue-dark);} /* FAQ */ .faq-title-bar{ display:inline-block;background:var(--blue);color:#fff;font-weight:900; font-size:13px;padding:6px 16px;margin-bottom:14px;border-radius:999px; } .faq-v2{border:1px solid var(--gray-300);border-radius:10px;margin-bottom:10px;overflow:hidden;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.04);} .faq-v2 .faq-q{padding:14px;} .faq-v2 .q-mark{ flex:none;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff; display:flex;align-items:center;justify-content:center;line-height:1;font-size:12px;font-weight:900; } .faq-v2 .faq-toggle-icon{ width:22px;height:22px;border-radius:50%;background:var(--gray-100);color:var(--black);padding:3px; } .faq-v2 .faq-a{padding:0 14px;} .faq-v2 .a-mark{ flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#222; display:flex;align-items:center;justify-content:center;line-height:1;font-size:12px;font-weight:900; margin-top:1px; } .faq-v2.open .faq-a{padding-bottom:14px;} /* ========================================================= サンクスページ（thanks/index.html）専用 ※共通部分（変数・ボタン・ヘッダー・ロゴ・電話・フッター）は 上の定義をそのまま使います。二重管理を避けるため、 ここにはサンクス固有のものだけを置いてください。 ========================================================= */ /* LPの #view-lp と同じ枠。480pxで止めて中央に寄せる */ .page{ position:relative;z-index:1; max-width:var(--maxw); margin:0 auto; background:var(--white); box-shadow:0 0 30px rgba(0,0,0,.13); } /* ---------- 本文 ---------- */ .thanks-wrap{max-width:var(--maxw);margin:0 auto;padding:56px 20px;text-align:center;} .thanks-icon{ width:70px;height:70px;border-radius:50%;background:var(--blue); display:flex;align-items:center;justify-content:center;margin:0 auto 20px;color:#fff; } .thanks-icon .icon{width:32px;height:32px;stroke:#fff;stroke-width:2.5;} .thanks-wrap h1{font-size:20px;font-weight:900;margin:0 0 12px;} .thanks-wrap p{font-size:14px;color:#555;margin:0 0 26px;} /* 裸の .note{} も同じ理由でメインLP側に漏れるため .page でスコープする */ .page .note{font-size:11px;color:var(--gray-500);line-height:1.6;} .next-box{ text-align:left;background:var(--gray-100);border-radius:14px; padding:18px 18px 14px;margin:0 0 26px; } .next-box h2{font-size:14px;font-weight:900;margin:0 0 10px;} .next-box ol{margin:0;padding-left:1.2em;font-size:13px;color:#444;} .next-box li{margin-bottom:6px;} .thanks-cta{display:flex;flex-direction:column;gap:18px;max-width:320px;margin:0 auto;} /* thanks側もトップと同じ footer-brand/footer-nav/footer をそのまま使うため、 専用の上書きは不要（共通CSSがそのまま両ページに効く）。 */