/* ===== 00-tokens.css ===================================================== */ /* ========================================================================== 00-tokens.css — デザイントークン / リセット / 共通ユーティリティ Figma: フォント・カラーコード node 674:26513 ========================================================================== */ :root { /* colors */ --c-white: #ffffff; --c-ink: #030303; --c-gold: #cfb277; --c-bronze: #aa8868; --c-gold-1: #f7d99a; --c-gold-2: #a68656; --c-green-1: #073a29; --c-green-2: #176d53; --c-cream: #fbf8f3; --c-line: rgba(3, 3, 3, 0.12); --c-line-light: rgba(255, 255, 255, 0.28); --c-muted: rgba(3, 3, 3, 0.62); --c-muted-light: rgba(255, 255, 255, 0.72); /* gradients */ --g-gold: linear-gradient(180deg, #f7d99a 0%, #a68656 100%); --g-gold-x: linear-gradient(90deg, #f7d99a 0%, #a68656 100%); --g-green: linear-gradient(180deg, #073a29 0%, #176d53 100%); --g-rule: linear-gradient(90deg, rgba(207, 178, 119, 0) 0%, #cfb277 22%, #cfb277 78%, rgba(207, 178, 119, 0) 100%); /* type */ --font-jp: "Zen Old Mincho", "Noto Serif JP", serif; --font-en: "Inter", "Helvetica Neue", Arial, sans-serif; /* 見出しの英字・番号に使う筆記体（Figma は Snell Roundhand）は **Web フォントを使わず、アウトライン化した SVG を で貼る**。 Snell Roundhand は macOS 同梱で Web 配信できず、端末依存のフォールバックに任せると Windows で別の書体になる（クライアント指摘）。近似 Web フォントでの代用も 「全環境で同じ見た目にしたい」という要件を満たさないため採らない。 素材と規約は assets/figma/script/ と CLAUDE.md「筆記体のアウトライン化」を参照。 --script-pad … SVG の viewBox に入れてある左右の余白。 **build/normalize-script-svg.py の PAD と必ず同値にすること。** --script-box … viewBox の高さ（= Figma の行送り）。番号は 61 へ上書きする。 使う側は --script-h（描画高さ）だけを指定する。共通ルールは 00-shared.css。 */ --script-pad: 7; --script-box: 66; /* layout */ --container: 1216px; --gutter: 17px; --header-h: 64px; /* motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 720ms; } @media (min-width: 761px) { :root { --gutter: 48px; --header-h: 88px; } } /* --------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-jp); color: var(--c-ink); background: var(--c-white); line-height: 1.9; font-feature-settings: "palt" 1; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } address { font-style: normal; } table { border-collapse: collapse; } :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; } /* --------------------------------------------------------- utilities */ .container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; } /* 追従ヘッダーがアンカー先の見出しを隠さないようにする */ main > section[id], main > div[id] { scroll-margin-top: calc(var(--header-h) + 16px); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 12px 20px; background: var(--c-ink); color: var(--c-white); transition: top 160ms var(--ease); } .skip-link:focus { top: 12px; } /* 横スクロール領域の共通挙動 */ .hscroll { display: flex; gap: clamp(16px, 1.6vw, 24px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .hscroll > * { scroll-snap-align: start; flex: 0 0 auto; } .hscroll::-webkit-scrollbar { height: 6px; } .hscroll::-webkit-scrollbar-thumb { background: var(--c-gold); border-radius: 999px; } .hscroll::-webkit-scrollbar-track { background: rgba(3, 3, 3, 0.08); border-radius: 999px; } /* ---------------------------------------------------------- reveal 動作 Figmaの「アニメーション指示」吹き出し = フェードイン（順次表示あり） */ /* will-change はページ内に52個ある .reveal 全てへ前もって合成レイヤーを作らせてしまい、 モバイルの初回描画を大きく遅らせる。transform / opacity はもともと合成のみで 動くプロパティなので指定しない。 */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } .reveal--stagger > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 140ms); } .reveal--stagger.is-visible > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal--stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===== 00-shared.css ===================================================== */ /* ========================================================================== 00-shared.css — 共通コンポーネント（Agent 1 実装 / 他エージェントは使うだけ） 依存: 00-tokens.css（トークンは再定義しない） Figma 参照 セクション見出し 686:27191（Your Choice / 36px Zen Old Mincho Bold） CTA1 / CTA2 / CTA3 / CTA4 686:27556 / 686:27533 / 686:27693 / 686:28012 CTA SP 585:9063 フッター PC / SP 686:27999 / 585:9507 寸法基準: PC = W1512 / SP = W390 ========================================================================== */ /* ---------------------------------------------------------- reveal 補助 .reveal--stagger の子に順番を割り当てる（インライン style を使わないため）。 */ .reveal--stagger > *:nth-child(1) { --i: 0; } .reveal--stagger > *:nth-child(2) { --i: 1; } .reveal--stagger > *:nth-child(3) { --i: 2; } .reveal--stagger > *:nth-child(4) { --i: 3; } .reveal--stagger > *:nth-child(5) { --i: 4; } .reveal--stagger > *:nth-child(6) { --i: 5; } .reveal--stagger > *:nth-child(7) { --i: 6; } .reveal--stagger > *:nth-child(8) { --i: 7; } /* =========================================================== セクション見出し

Your Choice

…

------------------------------------------------------------------------ */ .sec-head { text-align: center; } /* Figma は Snell Roundhand（macOS 同梱の筆記体）。Web フォントとして配信できず、 端末依存のフォールバックに任せると Windows で別の書体になる （クライアント指摘「Windowsだと可愛いフォントに変わってしまう」）。 Web フォントの近似書体で代用する案もあったが、 **どの環境でも同じ見た目にする**ため Figma からアウトライン化した SVG を貼る。 SVG は build/normalize-script-svg.py で **viewBox の高さ ＝ Figma の行送り 66px** に 正規化してある（書き出しのままだとインク外接矩形でトリミングされ、 上下に伸びる字を含むかどうかで倍率とベースラインがずれる）。 そのため font-size は「em の基準」として残し、高さを 66/40 = 1.65em で与える。 */ .sec-head__en { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.19vw, 18px); color: var(--c-gold); font-size: clamp(20px, 2.65vw, 40px); line-height: 1.65; } /* ---------------------------------------- アウトライン化した筆記体 SVG の共通契約 viewBox は「Figma のテキストボックス ± --script-pad」なので、そのまま置くと レイアウト上の幅が Figma の箱より 2*pad ぶん広くなる。負マージンで**箱ぴったりに戻す**。 負マージンは描画を切らないので、箱からはみ出す払い（swash）はそのまま見える。 これをしないと Figma の配置基準からずれる（すべて Figma 実測で確認済み）: - 見出し前後の罫（Line 317 / 318）は**テキスト箱から 18px** → pad ぶん外へ広がる - フロー番号 01〜05 は**5 つとも箱左端が x27360 でそろう** → 左寄せ時にずれる - スタッフ署名は**箱の右端＝写真の右端** → 右寄せ時に pad ぶん左へずれる 使う側は --script-h（描画高さ = Figma の行送り ÷ font-size の em）だけを指定する。 番号のように行送りが 61 のものは --script-box も 61 に上書きする。 */ .sec-head__en img, .page-head__en img, .staff-member__sign img, .feat-eyebrow img, .choice-card__no img, .flow-step__num img, .voice-card__label img { width: auto; max-width: none; /* リセットの img { max-width: 100% } が縦横比を潰すのを防ぐ */ height: var(--script-h); margin-inline: calc(var(--script-h) * var(--script-pad) / var(--script-box) * -1); } .sec-head__en { --script-h: 1.65em; /* Figma: line-height 66px ÷ font-size 40px */ } .sec-head__en::before, .sec-head__en::after { content: ""; flex: 0 0 auto; width: clamp(8px, 0.66vw, 10px); height: 1px; background: currentColor; } .sec-head__ja { margin-top: clamp(4px, 0.33vw, 5px); color: inherit; font-family: var(--font-jp); font-size: clamp(21px, 2.38vw, 36px); font-weight: 700; letter-spacing: 0.15em; line-height: 1.7; text-indent: 0.15em; /* letter-spacing の右余りを打ち消して視覚的に中央へ */ } /* Figma SP のセクション見出しは 27px / tracking 2.7px（= 0.1em）。 clamp の下限 21px は 1134px 未満で張り付くため、SPだけ全セクション小さくなっていた。 PC（1512で36px）の挙動は変えたくないので、SPだけ絶対値で上書きする。 個別セクションでこれ以降に上書きしているものはそちらが優先される。 */ @media (max-width: 760px) { .sec-head__ja { font-size: 27px; letter-spacing: 0.1em; text-indent: 0.1em; } } /* ================================================================== ボタン 無料 宝石の価値を
本物の鑑定士に相談する オンライン30分 無料相談 配色は文脈側（.fv / .cta-band）が --btn-* を上書きする。 既定値は CTA バンド（ゴールド）。 ------------------------------------------------------------------------ */ .btn { display: flex; align-items: center; justify-content: center; gap: var(--btn-gap, clamp(8px, 0.79vw, 12px)); box-sizing: border-box; width: var(--btn-w, 100%); min-height: var(--btn-h, clamp(56px, 6.88vw, 104px)); padding-inline: clamp(12px, 1.6vw, 24px); border: 1px solid var(--c-white); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); color: var(--c-white); font-family: var(--font-jp); font-size: var(--btn-fs, clamp(15px, 1.52vw, 23px)); font-weight: 900; letter-spacing: 0.08em; line-height: 1.4; text-align: center; transition: filter 240ms var(--ease), transform 240ms var(--ease); } .btn:hover { filter: brightness(1.12); } .btn:active { transform: translateY(1px); } .btn--consult { background-image: var(--btn-consult-bg, linear-gradient(90deg, #99734f 0%, #cb9e5f 44.67%, #99724e 94.77%)); text-shadow: 0 1px 7px rgba(0, 0, 0, 0.55); } .btn--online { background: var(--btn-online-bg, #5f7c70); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65); letter-spacing: 0.08em; } .btn__badge { flex: 0 0 auto; display: grid; place-items: center; width: var(--btn-badge-w, clamp(40px, 3.51vw, 53px)); height: var(--btn-badge-h, clamp(26px, 2.38vw, 36px)); background: var(--c-white); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); color: var(--btn-badge-fg, #877248); font-size: var(--btn-badge-fs, clamp(13px, 1.06vw, 16px)); font-weight: 700; letter-spacing: 0.06em; line-height: 1; text-shadow: none; } .btn__label { text-align: var(--btn-label-align, center); } /* SP のみ 2 行に固定する改行 */ .btn__break { display: none; } /* ============================================================ CTA バンド CTA1〜CTA4（Agent 1 が index へ差し込む） ------------------------------------------------------------------------ */ .cta-band { position: relative; isolation: isolate; overflow: hidden; background: #166140; color: var(--c-white); text-align: center; padding-block: clamp(42px, 5.03vw, 76px) clamp(50px, 6.35vw, 96px); } /* 上端のゴールドライン（Figma "Line 322"） PC 686:27569 / 686:27546 / 686:27704 / 686:28027、SP 585:9067 / 639:5157 / 639:5206 / 623:4942。 8 ノードとも stroke-width 3・停止色は同一: #AA8868 3.97% → #CDA977 30.66% → #FEDBAA 50% → #CDA977 69.68% → #AA8868 92.79% **中央がいちばん明るく、両端は #AA8868 のまま切れる**（透明へフェードしない）。 旧実装は「両端が透明・中央が暗い」逆向きのグラデーションだった。 Figma 実ピクセルでの検算（686:27556 の上端 3 行）: x=6 → (169,135,103) / x=756 → (252,218,169) / x=1505 → (169,135,103) */ .cta-band::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; height: 3px; background: linear-gradient(90deg, #aa8868 0%, #aa8868 3.97%, #cda977 30.66%, #fedbaa 50%, #cda977 69.68%, #aa8868 92.79%, #aa8868 100%); } /* 背景のゴールドスワール（Figma: Rectangle 183 / opacity .7 / 下地 Rectangle 178 = #166140） クライアント指摘「全ての CTA の背景デザインが異なる（ゴールドの線が入っています）」への対応。 原因は 2 つあった。 ① 旧素材（figma/fv/cta-band-bg.webp）は **ゴールドの線が消えていた**。 ※ assemble.mjs の参照チェックに拾わせないためコメント内はパス前半を省いている。 構図（うねり）は残っているのに全画素の最大値が RGB(8,56,45) しかなく、 Figma のマスター RGB(175,175,175) にある金の細線とハイライトが完全に潰れていた。 素材を作り直したので、差し替え時は必ず extrema を検算すること: python3 -c "from PIL import Image;print(Image.open(F).convert('RGB').getextrema())" → 最大値が 170 以上あること（60 台なら金線が飛んでいる）。 ② Figma の画像フィルは **バンドの高さいっぱいへ引き伸ばし（stretch）**であって cover ではない。 CTA1/2 は 557px・CTA3 は 585px・CTA4 は 792px と器の高さが違うのに、 レンダリング結果を高さで正規化した行プロファイルが 4 本とも一致する （SP の 617/648/678/961 も同じ）＝ 同じ絵を器の高さへ引き伸ばしている。 旧実装の `cover` + `center bottom` は器の高さごとに別のトリミングになり、 同じ画像でも CTA1 と CTA4 で平均絶対差 2.4/2.8/2.2 の別絵になっていた （`100% 100%` なら 0.38/0.24/0.18 = リサンプリング誤差のみ）。 ⚠ **PC と SP で貼り込みのトリミングが違う**（同じ絵柄だが SP の方が下側を多く見せている）。 `get_design_context` が返すマスターは PC 4 本が完全に同一バイト、SP 4 本も別の同一バイトで、 PC と SP の間だけ違う。SP に PC 版を流用すると下端（ゴールド線が交差するあたり）が Figma より明るく出るので、761px で背景画像を切り替える。 画像は Figma のレンダリング（色調整後）を 2:1 のマスターへ戻したもの。 `download_assets` の rawImages は色調整前で平均 G が 72（調整後は 45）と別物なので使わない。 */ .cta-band__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.7; background-image: url("assets/figma/cta/cta-band-bg-pc.webp"); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } /* SP（Figma 585:9066 / 639:5156 / 639:5205 / 623:4941）は別トリミングのマスター */ @media (max-width: 760px) { .cta-band__bg { background-image: url("assets/figma/cta/cta-band-bg-sp.webp"); } } .cta-band__inner { position: relative; } .cta-band__title { font-family: var(--font-jp); font-size: clamp(21px, 2.32vw, 35px); font-weight: 600; letter-spacing: 0.15em; line-height: 1.6; text-indent: 0.15em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); } .cta-band__title--wide { font-size: clamp(21px, 2.38vw, 36px); letter-spacing: 0.1em; text-indent: 0.1em; } .cta-band__rule { width: 100%; height: 1px; margin-block: clamp(16px, 1.98vw, 30px) 0; border: 0; background: var(--g-rule); } .cta-band__lead { margin-top: clamp(20px, 2.25vw, 34px); font-family: var(--font-jp); font-size: clamp(14px, 1.19vw, 18px); font-weight: 500; letter-spacing: 0.1em; /* Figma は級数が変わる行（ゴールドの強調）も行送りを 38px で揃えている。 単位なしの倍率にすると強調 span が自分の font-size で行ボックスを広げてしまい、 段落内の行間がばらつく。px で持って子へ継承させる。 */ line-height: clamp(28px, 2.51vw, 38px); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); } .cta-band__lead + .cta-band__lead { margin-top: clamp(14px, 1.32vw, 20px); } .cta-band__accent { color: var(--c-gold); font-size: clamp(15px, 1.32vw, 20px); font-weight: 600; } .cta-band__accent--lg { font-size: clamp(17px, 1.85vw, 28px); font-weight: 700; } /* PC では本文と同じ扱い、SP でのみゴールド強調（Figma SP 585:9063） */ .cta-band__accent--sp { color: inherit; font-size: inherit; font-weight: 500; } /* CTA4（Figma PC 686:28012 / SP 623:4938）だけ本文の級数・行送り・注記が他の 3 本と違う。 PC: 行送り 37px・強調 22px・注記 16px ／ SP: 行送り 27px・強調は本文と同じ 16px。 */ .cta-band--cta4 .cta-band__lead { letter-spacing: 0.05em; line-height: clamp(24px, 2.45vw, 37px); } .cta-band--cta4 .cta-band__accent { font-size: clamp(16px, 1.46vw, 22px); } .cta-band--cta4 .cta-band__accent--lg { font-size: clamp(17px, 1.85vw, 28px); } .cta-band--cta4 .cta-band__notes { font-size: clamp(11px, 1.06vw, 16px); } /* PC / SP で文言が入れ替わる箇所（CTA4 の見出し） */ .cta-band__sp { display: none; } .cta-band__actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: clamp(11px, 1.98vw, 30px); /* Figma は 4 本とも本文末尾からボタン上端まで 38px（SP 50px） */ margin-top: clamp(18px, 2.51vw, 38px); } .cta-band .btn--consult { --btn-w: min(563px, 37.24vw); } .cta-band .btn--online { --btn-w: min(379px, 25.07vw); } .cta-band__notes { margin-top: clamp(14px, 1.55vw, 23px); font-family: var(--font-en); font-size: clamp(11px, 0.93vw, 14px); font-weight: 500; letter-spacing: 0.1em; line-height: 1.65; } .cta-band__br--sp { display: none; } /* 761〜1000px は 2 ボタン横並びだとラベルが折り返すため縦積みにする */ @media (min-width: 761px) and (max-width: 1000px) { .cta-band__actions { flex-direction: column; align-items: center; gap: 14px; } .cta-band .btn--consult, .cta-band .btn--online { --btn-w: min(520px, 100%); } .cta-band .btn { --btn-h: 64px; --btn-fs: 17px; } .cta-band .btn__badge { --btn-badge-w: 46px; --btn-badge-h: 30px; --btn-badge-fs: 14px; } } /* =============================================================== ヘッダー Figma のデザインカンプにヘッダーバーは存在しない（FV 右上のロゴのみ）。 そのため「トップでは非表示 → スクロールで出現」する追従ヘッダーとして実装し、 FV の構図を隠さないようにしている。表示切替は script.js の [data-header] + .is-scrolled ハンドラが行う。 ------------------------------------------------------------------------ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(3, 3, 3, 0.92); border-bottom: 1px solid rgba(207, 178, 119, 0.35); color: var(--c-white); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 420ms var(--ease), opacity 420ms var(--ease), visibility 420ms; } @supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(3, 3, 3, 0.78); backdrop-filter: blur(10px); } } .site-header.is-scrolled { transform: none; opacity: 1; visibility: visible; } /* ヘッダーを隠しておくのは FV を覆わないための措置なので、FV がないページ （問い合わせ・プラポリ・規約・会社概要）では最初から表示する。 そうしないと下までスクロールするまでナビゲーションに到達できない。 JS 側でも body.is-subpage を付けるので、:has() 非対応環境でも表示される。 */ body:not(:has(.fv)) .site-header, body.is-subpage .site-header { transform: none; opacity: 1; visibility: visible; } .site-header__inner { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); width: min(1416px, 100% - var(--gutter) * 2); min-height: var(--header-h); margin-inline: auto; } .site-header__brand { flex: 0 0 auto; display: block; } .site-header__brand img { width: clamp(96px, 8.6vw, 130px); height: auto; } .site-nav { margin-left: auto; } .site-nav__list { display: flex; align-items: center; gap: clamp(12px, 1.72vw, 26px); } .site-nav__list a { position: relative; display: block; padding-block: 6px; font-family: var(--font-jp); font-size: clamp(12px, 0.93vw, 14px); font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; } .site-nav__list a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--c-gold); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease); } .site-nav__list a:hover::after { transform: scaleX(1); } .site-header__cta { flex: 0 0 auto; display: grid; place-items: center; min-height: 42px; padding-inline: clamp(14px, 1.32vw, 20px); background-image: var(--g-green); border: 1px solid rgba(255, 255, 255, 0.7); font-family: var(--font-jp); font-size: clamp(12px, 0.93vw, 14px); font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; } .site-header__cta:hover { filter: brightness(1.15); } /* ハンバーガー */ .menu-toggle { display: none; flex: 0 0 auto; width: 44px; height: 44px; margin-left: auto; position: relative; } .menu-toggle__bar { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--c-white); transition: transform 260ms var(--ease), opacity 200ms var(--ease); } .menu-toggle__bar:nth-of-type(1) { top: 15px; } .menu-toggle__bar:nth-of-type(2) { top: 21px; } .menu-toggle__bar:nth-of-type(3) { top: 27px; } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); } /* モバイルメニュー */ .mobile-menu { display: grid; gap: 2px; padding: 8px var(--gutter) 24px; background: rgba(3, 3, 3, 0.97); border-top: 1px solid rgba(207, 178, 119, 0.28); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .mobile-menu[hidden] { display: none; } .mobile-menu a { padding-block: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--font-jp); font-size: 15px; letter-spacing: 0.08em; } .mobile-menu .btn { --btn-h: 56px; --btn-fs: 15px; margin-top: 18px; border-color: rgba(255, 255, 255, 0.7); } @media (max-width: 760px) { .site-nav, .site-header__cta { display: none; } .menu-toggle { display: block; } } /* =============================================================== フッター Figma: PC 686:27999（黒帯 h234 / ロゴ 184x66 / リンク 14px / © 8px） SP 585:9507（黒帯 h209 / ロゴ 135x48 / リンク 13px） ------------------------------------------------------------------------ */ .site-footer { background: var(--c-ink); color: var(--c-white); text-align: center; padding-block: clamp(43px, 3.97vw, 60px) clamp(19px, 1.32vw, 20px); } .site-footer__brand { display: inline-block; } .site-footer__brand img { width: clamp(135px, 12.17vw, 184px); height: auto; } .site-footer__nav { margin-top: clamp(12px, 1.06vw, 16px); } .site-footer__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .site-footer__list li { display: flex; align-items: center; } .site-footer__list li + li::before { content: ""; width: 1px; height: 14px; margin-inline: clamp(20px, 1.59vw, 24px); background: rgba(255, 255, 255, 0.55); } .site-footer__list a { font-family: var(--font-jp); font-size: clamp(13px, 0.93vw, 14px); font-weight: 500; letter-spacing: 0.02em; line-height: 1.67; } .site-footer__list a:hover { color: var(--c-gold); } .site-footer__copyright { margin-top: clamp(13px, 1.17vw, 18px); font-family: var(--font-jp); /* Figma は 8px。可読性の下限として 10px に引き上げている。 */ font-size: 10px; letter-spacing: 0.15em; line-height: 2.34; /* Figma の 8px/23.4px 相当の行ボックスを維持 */ } /* ============================================================ ページ上部へ */ .to-top { position: fixed; right: clamp(14px, 1.6vw, 28px); bottom: clamp(14px, 1.6vw, 28px); z-index: 90; display: grid; place-items: center; width: clamp(44px, 3.5vw, 54px); height: clamp(44px, 3.5vw, 54px); border: 1px solid rgba(255, 255, 255, 0.7); background-image: var(--g-green); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 320ms; } .to-top.is-visible { opacity: 1; transform: none; visibility: visible; } .to-top__arrow { width: 11px; height: 11px; border-top: 1.5px solid var(--c-white); border-right: 1.5px solid var(--c-white); transform: translateY(2px) rotate(-45deg); } /* ================================================================= SP 調整 */ @media (max-width: 760px) { .btn { --btn-h: 61px; --btn-fs: 16px; --btn-gap: 17px; } .btn--online { --btn-h: 45px; letter-spacing: 0.1em; } .btn__badge { --btn-badge-w: 50px; --btn-badge-h: 31px; --btn-badge-fs: 16px; } .btn__label { --btn-label-align: left; } .btn__break { display: inline; } .btn--online .btn__label { --btn-label-align: center; } .cta-band { padding-block: 65px 85px; --btn-online-bg: rgba(115, 115, 115, 0.4); } .cta-band .btn--consult, .cta-band .btn--online { --btn-w: 100%; } .cta-band__actions { flex-direction: column; gap: 11px; margin-top: 50px; padding-inline: 15px; } .cta-band__title { font-size: 23px; letter-spacing: 0.1em; text-indent: 0.1em; line-height: 1.61; } /* CTA4 の SP 見出しは PC と文言が違い（「まずはお話をお伺いします」）、 他の 3 本と同じ 23px・Medium で収まる（Figma 623:4943）。 */ .cta-band__title--wide { font-size: 23px; font-weight: 500; } .cta-band__rule { margin-top: 22px; } /* SP は 4 本とも字間 0.8px = 0.05em（Figma 585:9063 / 639:5162 / 639:5211 / 623:4947）。 PC の 0.1em のままだと 20 字の指定改行行が 356px の器に収まらず再折返しする。 */ .cta-band__lead { margin-top: 31px; font-size: 16px; letter-spacing: 0.05em; line-height: 31px; } .cta-band__lead + .cta-band__lead { margin-top: 18px; } /* CTA2 / CTA3 は SP だけ本文の器が全幅 390px（Figma 639:5162 / 639:5211。 CTA1・CTA4 は 355px）。22 字の指定改行行があるので container のままだと折返す。 */ .cta-band--wide-lead .cta-band__lead { margin-inline: calc(var(--gutter) * -1); } .cta-band__accent { font-size: 18px; } .cta-band__accent--lg { font-size: 19px; } /* CTA4 の SP 本文は強調もすべて 16px。色だけが違う（Figma 623:4947 / 623:4949） */ .cta-band--cta4 .cta-band__lead { line-height: 27px; } .cta-band--cta4 .cta-band__accent, .cta-band--cta4 .cta-band__accent--lg { font-size: 16px; } .cta-band--cta4 .cta-band__notes { font-size: 11px; } .cta-band__pc { display: none; } .cta-band__sp { display: inline; } .cta-band__notes { margin-top: 12px; padding-inline: 15px; font-size: 11px; letter-spacing: 0.02em; line-height: 1.64; text-align: left; } .cta-band__br--sp { display: inline; } .cta-band__br--pc { display: none; } .cta-band__accent--sp { color: var(--c-gold); font-size: 16px; font-weight: 600; } /* Figma（585:9507）の下パディングは 19px だが、それだと最下部までスクロールしたとき 追従の .to-top（Figma に無い追加要素 / 44px + 下 14px = 58px）が「利用規約」に 約 3px 重なる。Figma に無いボタンのために Figma のリンク位置を削れないので、 黒帯だけを 11px 伸ばして退避させる（375 / 390 / 430 いずれでも 8px 以上あく）。 */ .site-footer { padding-block: 43px 30px; } .site-footer__nav { margin-top: 31px; } .site-footer__list li + li::before { margin-inline: 20px; } .site-footer__list a { font-size: 13px; } .site-footer__copyright { margin-top: 13px; } } /* 375px の狭幅でフッターリンクが折り返しても崩れないようにする */ @media (max-width: 389px) { .site-footer__list li + li::before { margin-inline: 14px; } .site-footer__list a { font-size: 12px; } } /* Figma "image 71"（686:27579）— スタッフ紹介の下端とCTA2の上端にまたがる赤い宝石の装飾。 ⚠ このノードは **-41.591° 回転している**。`get_metadata` が返す `x=1382.51 / w=281.28` は座標系が混ざっていて（x は回転前のローカル値、 w は回転後のバウンディングボックス幅）、そのまま足すと右へ大きくはみ出す誤った位置になる。 Plugin API の absoluteBoundingBox で取り直した正しい値（親フレーム W1512 基準）: bbox x1231.00 / y14261 / w281.28 / h285.88 → 右端 1512.28 ＝ **フレーム右端に接して全体が見える** CTA2 の上端は y14404 なので、上へのはみ出しは 14261 - 14404 = -143px 素材側に回転を焼き込んであるので、CSS では bbox をそのまま置くだけでよい。 SPフレームには存在しない装飾なのでPCのみ。 */ @media (min-width: 761px) { .cta-band--gems { overflow: visible; } .cta-band__gems { --cu: min(100vw, 1512px); position: absolute; z-index: 1; top: calc(var(--cu) * -0.094577); /* -143 / 1512 */ right: 0; /* bbox 右端がフレーム右端に一致 */ width: calc(var(--cu) * 0.186032); /* 281.28 / 1512 */ height: auto; pointer-events: none; } } @media (max-width: 760px) { .cta-band__gems { display: none; } } /* ==================================================== セクション境界の弧 Figma では 3 箇所で、次のセクションが前のセクションへ「弧の形」で食い込む。 弧の上側は前セクションの背景、下側が自分の背景になる。 | 境界 | Figmaノード | 重なり(W1512) | 重なり(W390) | | --- | --- | --- | --- | | FV → お悩み | Line 325 | 118px | 32px | | 特徴 → 比較 | Line 321 | 86px | 38px | | FAQ → メッセージ | Line 327 | 127px | 49px | 実装: 負マージンで前セクションへ重ね、マスクで弧の下側だけを残す。 キャップSVGの白塗りは「弧の上側」なので、そのまま重ねると前セクションを 白く塗り潰してしまう。マスクで上側を消すことで前セクションが弧の形に切り取られる。 金ストローク（3px）だけは残したいので、2枚目のマスクの境界を 3px 上へずらす。 使う側で --arc-overlap（重なり量）と --arc-h（弧の高さ＝キャップ高）を指定する。 ※ お悩みは FV のビューポート高基準に合わせた専用実装が 02-worries.css にある。 */ .section-arc { --arc-mask: url("data:image/svg+xml;charset=utf-8,"); margin-block-start: calc(var(--arc-overlap) * -1); -webkit-mask-image: var(--arc-mask), linear-gradient(to bottom, transparent 0 calc(var(--arc-h) - 3px), #000 calc(var(--arc-h) - 3px)); mask-image: var(--arc-mask), linear-gradient(to bottom, transparent 0 calc(var(--arc-h) - 3px), #000 calc(var(--arc-h) - 3px)); -webkit-mask-size: 100% var(--arc-h), 100% 100%; mask-size: 100% var(--arc-h), 100% 100%; -webkit-mask-position: left top, left top; mask-position: left top, left top; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; } /* メッセージの弧だけ制御点が別（Figma Line 327 / viewBox 1512x78） */ .section-arc--msg { --arc-mask: url("data:image/svg+xml;charset=utf-8,"); } /* ===== 01-fv.css ========================================================= */ /* ========================================================================== 01-fv.css — FV / ファーストビュー Figma: PC 674:26672（W1440・H1024）/ 674:26539（W1280・H832）/ 686:27067（W1512） SP 585:8685（TOP フレーム内・W390・H992） 674:26868（W390・H771）/ 674:26933（W420）/ 674:26900（W430） SP の正は TOP フレーム側の 585:8685。674:* の 3 フレームは FV のレスポンシブ 検討用で、実績表示（585:8706）が入っていない。座標の大半は 674:26868 と一致 するので、ブロック単位で「どちらに在るか」を確認してから移植する。 考え方 Figma の絶対座標を px で焼き付けず、基準で割った係数を掛けて可変化する。 SP: --u = min(100vw, 640px) / 390 （390 基準。640px で頭打ち） PC: --ux = min(100vw, 1512px) / 1512 （横方向・フォントサイズ） --uy = clamp(620px, 100svh, 1180px)（縦方向 = ビューポート高） PC で縦横の基準を分ける理由（W1280 / W1440 の 2 フレームで検証済み） 要素 y/幅 1280 y/幅 1440 y/高 1280 y/高 1440 CTA 上端 0.3516 0.3854 0.5409 0.5420 オンライン 0.4211 0.4646 0.6478 0.6533 下端曲線最深 0.5859 0.6486 0.9014 0.9121 縦方向は「幅」ではなく「フレーム高（= ビューポート高）」に比例する。 FV はフルビューポートのヒーローなので、縦は --uy で置く。 縦比率はすべて W1440（H1024）フレームを基準にした値。 FV だけ PC 切替を 1001px にしている理由: PC は 1512 の構図をそのまま比例縮小するため、761〜1000px では本文が 12px 前後まで小さくなり判読できない。この帯域は SP の縦積みを維持する。 ヘッダー / CTA / フッターは CONVENTIONS 通り 760/761 で切り替わる。 ========================================================================== */ .fv { --u: calc(min(100vw, 640px) / 390); position: relative; isolation: isolate; overflow: hidden; background: var(--c-ink); color: var(--c-white); } .fv__inner { position: relative; /* Figma 585:8685: 実績表示の下端 y928 → フレーム下端 y992 */ padding-bottom: calc(64 * var(--u)); } /* ------------------------------------------------------------ 背景パネル */ .fv__panel { position: absolute; inset: 0; z-index: 0; background: var(--c-ink); pointer-events: none; } .fv__panel-rays, .fv__panel-gems { position: absolute; left: 0; right: 0; display: block; background-repeat: no-repeat; background-size: cover; } /* 上部の光のレイヤー */ .fv__panel-rays { top: 0; height: 42%; background-image: url("assets/figma/fv/fv-texture-rays.webp"); background-position: left top; opacity: 0.3; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); } /* 下部の宝石テクスチャ SP は Figma 585:8688（AdobeStock_1030152110 / 391×315 をフレーム下端に配置）と 同じ切り取りになるよう高さを 315 基準で固定する。% にすると FV 全体の高さで 拡大率が変わり、Figma と違う部分がトリミングされる。 */ .fv__panel-gems { bottom: 0; height: calc(315 * var(--u)); background-image: url("assets/figma/fv/fv-texture-diamonds.webp"); background-position: center bottom; opacity: 0.175; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%); } /* ------------------------------------------------------------ 右上のロゴ */ .fv__brand { position: absolute; z-index: 3; top: calc(17 * var(--u)); right: calc(14 * var(--u)); width: calc(55 * var(--u)); } /* SP は黒背景の上にロゴが乗るため、黒版 SVG を反転して白にする （PC は明るい店内写真の上なので Figma 通り黒のまま） */ .fv__brand img { width: 100%; height: auto; filter: invert(1); } /* -------------------------------------------------------------- コピー */ .fv__body { position: relative; z-index: 2; padding: calc(68.75 * var(--u)) calc(14 * var(--u)) 0 calc(29 * var(--u)); } .fv__lede { font-family: var(--font-jp); font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: 0.05em; line-height: 1.5; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); } .fv__rule { width: calc(355 * var(--u)); height: 1px; margin: calc(7.75 * var(--u)) 0 0 calc(-12 * var(--u)); border: 0; background: var(--g-rule); } .fv__standard { margin-top: calc(8.75 * var(--u)); font-family: var(--font-jp); font-size: calc(19 * var(--u)); font-weight: 700; letter-spacing: 0.105em; line-height: 1.5; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); } .fv__standard-tail { font-size: 1.053em; } .fv__gia { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(6.75 * var(--u)); } .fv__gia-mark { flex: 0 0 auto; width: calc(208 * var(--u)); height: calc(68 * var(--u)); object-fit: contain; object-position: left center; } .fv__gia-caption { font-family: var(--font-jp); font-size: calc(29 * var(--u)); font-weight: 700; letter-spacing: 0.055em; line-height: 1.16; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); } .fv__gia-tail { font-size: 0.655em; } .fv__title { margin-top: calc(0.5 * var(--u)); font-family: var(--font-jp); font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: 0.086em; line-height: 1.55; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8); } .fv__title-sm { font-size: 0.818em; letter-spacing: 0.105em; } /* ---------------------------------------------------------------- 写真 */ .fv__photo { position: relative; z-index: 1; height: calc(392 * var(--u)); margin-top: calc(8.5 * var(--u)); overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } .fv__photo > img { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; } /* 上端・下端を黒へ落とし込み、コピー面と CTA 面へ繋げる （Figma 674:26877 / 674:26878 の黒ぼかしバーに相当）。 ::before にすることで鑑定士ラベル（.fv__experts）より下に描画される。 */ .fv__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(3, 3, 3, 0.95) 0%, rgba(3, 3, 3, 0.45) 9%, rgba(3, 3, 3, 0) 20%, rgba(3, 3, 3, 0) 52%, rgba(3, 3, 3, 0.82) 82%, var(--c-ink) 100% ); pointer-events: none; } /* ------------------------------------------------------------ 鑑定士ラベル */ .fv__experts { position: absolute; inset: 0; } .fv__expert { position: absolute; top: calc(224 * var(--u)); display: grid; justify-items: center; transform: translateX(-50%); text-align: center; white-space: nowrap; } .fv__expert--1 { left: 23.5%; } .fv__expert--2 { left: 74.9%; } .fv__expert::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(210 * var(--u)); height: calc(120 * var(--u)); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(3, 3, 3, 0.62), rgba(3, 3, 3, 0)); } .fv__expert-role, .fv__expert-name { position: relative; } .fv__expert-role { font-family: var(--font-jp); font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: 0.15em; line-height: 1.58; text-indent: 0.15em; text-shadow: 0 0 18px #000; } .fv__expert-name { margin-top: calc(7 * var(--u)); font-family: var(--font-jp); font-size: calc(20 * var(--u)); font-weight: 600; letter-spacing: 0.15em; line-height: 1.45; text-indent: 0.15em; text-shadow: 0 0 18px #000; } /* ------------------------------------------------------------------ CTA */ .fv { --btn-consult-bg: linear-gradient(90deg, #0a3e2c 0%, #125a45 44.67%, #07402f 94.77%); --btn-online-bg: rgba(115, 115, 115, 0.4); --btn-badge-fg: #0c402e; } .fv__cta { position: relative; z-index: 2; margin-top: calc(-91 * var(--u)); padding-inline: calc(32 * var(--u)); } .fv__actions { display: grid; gap: calc(11 * var(--u)); } /* SP モード（〜1000px）のボタン寸法。760px 超のタブレット帯でも Figma SP と同じ比率を保つため、共通 CSS の固定値ではなく --u で与える。 */ .fv .btn { --btn-h: calc(61 * var(--u)); --btn-fs: calc(16 * var(--u)); --btn-gap: calc(17 * var(--u)); --btn-label-align: left; letter-spacing: 0.05em; } .fv .btn--online { --btn-h: calc(45 * var(--u)); --btn-label-align: center; letter-spacing: 0.1em; } .fv .btn__badge { --btn-badge-w: calc(50 * var(--u)); --btn-badge-h: calc(31 * var(--u)); --btn-badge-fs: calc(16 * var(--u)); } .fv .btn__break { display: inline; } .fv__notes { margin-top: calc(12 * var(--u)); font-family: var(--font-en); font-size: calc(11 * var(--u)); letter-spacing: 0.01em; line-height: 1.64; } /* ------------------------------------------------------------- 実績表示 Figma SP 585:8706（TOP フレーム 585:8685 内・W390 基準）。 PC は写真の上へ重ねるが、SP は注記の下に独立したブロックとして置く。 ブロック上端 = Figma y805（注記の下端 y758 から 47px 下）／高さ 123 ブロック下端 y928 からフレーム下端 y992 まで 64px（= .fv__inner の padding-bottom） ブロック内の座標は上端 y805 を 0 とした相対値: 丸バッジ x66 y0 76×76 （585:8709） 認定店キャプ 中心x105 y81 15px/20px （585:8708・2行） 区切り線 x198 y9 h105 白1px （634:5002） 宝石と〜38年 中心x289 y10 （585:8710） キャプションと 38年 の縦位置は Figma スクショの字面（インク）実測に合わせて ±1.5px 補正済み。Figma のテキストボックス値をそのまま入れると 2〜3px ずれる。 */ .fv__proof { position: relative; z-index: 2; height: calc(123 * var(--u)); margin-top: calc(47 * var(--u)); pointer-events: none; } /* 縦の白い区切り線。SP は PC のグラデーションと違い単色の白 1px （585:8685 の実測値が上端から下端まで rgb(255,255,255)）。 */ .fv__proof::before { content: ""; position: absolute; top: calc(9 * var(--u)); left: calc(198 * var(--u)); width: 1px; height: calc(105 * var(--u)); background: var(--c-white); } .fv__seal { position: absolute; top: 0; left: calc(66 * var(--u)); width: calc(76 * var(--u)); height: calc(76 * var(--u)); overflow: hidden; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.9)); } .fv__seal img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .fv__proof-cert, .fv__proof-lead { font-family: var(--font-jp); font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: 0.03em; /* 15px に対して 0.45px */ line-height: 1.334; /* 20 / 15 */ text-align: center; text-indent: 0.03em; text-shadow: 0 0 5px #000; } .fv__proof-cert { position: absolute; top: calc(81 * var(--u)); left: calc(105 * var(--u)); transform: translateX(-50%); white-space: nowrap; } .fv__proof-years { position: absolute; top: calc(10 * var(--u)); left: calc(289 * var(--u)); display: grid; justify-items: center; transform: translateX(-50%); white-space: nowrap; } .fv__proof-lead { font-weight: 900; line-height: 1.267; /* 19 / 15 */ } /* SP のゴールドは PC（縦グラデ）と違い横グラデ。 585:8685 実測: 文字左端 ≒ #F7D99A → 右端 ≒ #A68656。 */ .fv__years { margin-top: calc(4 * var(--u)); background-image: var(--g-gold-x); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.85)); font-family: var(--font-jp); font-size: calc(60 * var(--u)); font-weight: 600; letter-spacing: 0.012em; /* 60px に対して 0.7px */ line-height: 1; } .fv__years-unit { font-size: 0.267em; } /* 16 / 60 */ /* SP レイアウトのまま幅が 640px を超えた領域（タブレット）では コピーと CTA が左に寄りすぎないよう 390 基準幅で中央寄せする。 */ @media (min-width: 641px) and (max-width: 1000px) { .fv__body, .fv__cta, .fv__proof { max-width: calc(390 * var(--u)); margin-inline: auto; } } /* ========================================================================== PC（横 = W1512 基準 --ux / 縦 = ビューポート高 --uy） 縦の比率はすべて Figma W1440（674:26672・H1024）の y / 1024。 横の px はこれまで通り W1512 基準（--ux）。 ========================================================================== */ @media (min-width: 1001px) { /* FV の高さ = 縦方向スケールの基準。 02-worries.css がお悩みセクションの持ち上げ量と上端曲線の高さに使うため :root に置く（00-tokens.css のトークンは再定義していない）。 */ :root { --fv-h: clamp(620px, 100vh, 1180px); /* 100svh 非対応環境のフォールバック */ --fv-h: clamp(620px, 100svh, 1180px); } .fv { --ux: calc(min(100vw, 1512px) / 1512); --uy: var(--fv-h); /* SP 用の --u を PC でも横方向として解決させる保険。 PC 個別指定を書き忘れた宣言が SP 係数（1.64）で暴発するのを防ぐ。 */ --u: var(--ux); --btn-consult-bg: linear-gradient(90deg, #083928 0%, #145e48 44.67%, #07402f 94.77%); --btn-online-bg: rgba(115, 115, 115, 0.4); --btn-badge-fg: #166140; background: var(--c-white); } .fv__inner { height: var(--uy); padding-bottom: 0; } /* 黒地パネル: 右辺が右下がりの直線。 Figma W1440 は幅 780（= 0.5417vw）・高さ 964（= 0.9414uy）で 斜辺上端 x = 681.6（47.33vw）、W1280 は幅 691・上端 x = 604（47.19vw）。 幅 819*--ux（= 0.5417vw）× clip-path 87.24% で両フレームとも 47.2vw になる。 下端は曲線の最深部（0.913uy）より下まで伸ばし、お悩みセクションの 大理石（.worry）が曲線どおりに切り取って重なる。 */ .fv__panel { inset: 0 auto auto 0; z-index: 1; width: calc(819 * var(--ux)); height: calc(var(--uy) * 0.9414); clip-path: polygon(0 0, 87.24% 0, 100% 100%, 0 100%); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); } .fv__panel-rays { height: 52%; background-position: left top; opacity: 0.26; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%); } .fv__panel-gems { height: 56%; opacity: 0.11; } .fv__brand { top: calc(var(--uy) * 0.041); /* y42 */ right: calc(33 * var(--ux)); width: calc(198 * var(--ux)); } .fv__brand img { filter: none; } /* コピーは Figma 同様に 1 要素ずつ縦位置を持たせる。 文字サイズは --ux、縦位置は --uy と基準が違うため、 フローの積み上げにすると縦位置がビューポート高に追従しない。 */ .fv__body { position: absolute; z-index: 2; top: 0; left: calc(102 * var(--ux)); width: calc(620 * var(--ux)); padding: 0; } .fv__lede { position: absolute; top: calc(var(--uy) * 0.1201); /* y123 */ left: 0; font-size: calc(25 * var(--ux)); letter-spacing: 0.1em; } .fv__rule { position: absolute; top: calc(var(--uy) * 0.1797); /* y184 */ left: 0; width: calc(535 * var(--ux)); margin: 0; } .fv__headline { position: absolute; top: calc(var(--uy) * 0.2070); /* y212「世界基準の」 */ left: 0; right: 0; } .fv__standard { position: absolute; top: 0; left: 0; margin-top: 0; font-size: calc(39 * var(--ux)); letter-spacing: 0.1em; line-height: 1.6; } .fv__standard-tail { font-size: 0.769em; } .fv__gia { /* ロックアップの高さ。基本は Figma の 97（--ux 基準）。 ただし「世界基準の」と「いつでも店内にいる…」の行間は 0.1182*--uy しかなく、 --uy が 820*--ux を下回るビューポート（縦の短いノートPC）では 97 が入らない。 上限を 0.113*--uy にして常に約 4px の逃げを残す（1024 相当では上限は効かない）。 */ --gia-h: min(calc(97 * var(--ux)), calc(var(--uy) * 0.113)); position: absolute; top: calc(var(--uy) * 0.0791); /* y293（headline から 81） */ left: 0; gap: calc(16 * var(--ux)); margin-top: 0; } /* GIA ロックアップは見出しの一部（字送りの中の1文字）なので、 幅も高さも --ux で出す。**高さを --uy で出してはいけない。** 器 300×97 に対し素材は 600×197（= 3.0457:1）なので object-fit: contain は 高さ側で決まり、コンテンツは 295.4×97・左寄せになる。これは Figma 674:26832 の `w-[98.74%] h-full left-[-0.22%]` と同じ収まりで、 器の右に残る 4.6 と gap 16 を足した約 21px が「GIA」と「鑑定士」の間隔になる。 旧実装は height を calc(var(--uy) * 0.0947) にしていたため、ビューポート高が 1024*--ux より低い環境（＝実際のPCほぼ全て）で contain が高さ側でさらに縮み、 器 300 の中に 55px 前後の空白が生まれて隙間が約 71px まで開いていた。 **幅は必ず高さ × (300/97) にする。** 器の縦横比が Figma の 300:97 から ずれた瞬間に contain の余白が変動し、隙間がまた開く。 */ .fv__gia-mark { width: calc(var(--gia-h) * 3.0928); /* 300 / 97 */ height: var(--gia-h); } /* Figma 674:26833 は行ボックス 62.4px の中心が y348.5、 ロックアップ器（y293・h97）の中心 y341.5 より 7px 下。 align-items: center のままマージンで 7px 分だけ下げる。 */ .fv__gia-caption { margin-top: calc(14 * var(--ux)); font-size: calc(54 * var(--ux)); letter-spacing: 0.07em; } .fv__gia-tail { font-size: 0.778em; } .fv__title { position: absolute; top: calc(var(--uy) * 0.1973); /* y414（headline から 202） */ left: 0; margin-top: 0; font-size: calc(40 * var(--ux)); letter-spacing: 0.1em; line-height: 1.06; } .fv__title-sm { font-size: 0.75em; letter-spacing: 0.1em; } .fv__photo { position: absolute; z-index: 0; top: 0; left: calc(566 * var(--ux)); right: 0; /* Figma は 0.913uy。曲線の最深部（0.911uy）を確実に覆うだけの余裕を足す。 伸ばしすぎると object-fit: cover の寄りが強くなり構図が Figma とずれる。 */ height: calc(var(--uy) * 0.92); margin-top: 0; } .fv__photo > img { object-position: left center; } /* Figma 674:26676（x685 y602 h363）の黒ぼかし。写真の下 1/4 から 曲線の位置へ向かって落とす。 */ .fv__photo::before { background: linear-gradient( 180deg, rgba(3, 3, 3, 0) 41%, rgba(3, 3, 3, 0.42) 64%, rgba(3, 3, 3, 0.78) 89%, rgba(3, 3, 3, 0.88) 100% ); } .fv__expert { top: calc(var(--uy) * 0.4033); } /* y413 */ .fv__expert--1 { left: calc(285 * var(--ux)); } .fv__expert--2 { left: calc(849 * var(--ux)); top: calc(var(--uy) * 0.4912); } /* y503 */ .fv__expert::before { width: calc(210 * var(--ux)); height: calc(var(--uy) * 0.117); } .fv__expert-role { font-size: calc(12 * var(--ux)); } .fv__expert-name { margin-top: calc(var(--uy) * 0.0068); font-size: calc(20 * var(--ux)); } .fv__cta { position: absolute; z-index: 2; top: calc(var(--uy) * 0.5420); /* y555 */ left: calc(102 * var(--ux)); width: calc(535 * var(--ux)); margin-top: 0; padding-inline: 0; } .fv__actions { gap: calc(var(--uy) * 0.0186); } .fv .btn { --btn-h: calc(var(--uy) * 0.0928); /* h95 */ --btn-fs: calc(22 * var(--ux)); --btn-gap: calc(11 * var(--ux)); --btn-label-align: center; letter-spacing: 0.05em; } .fv .btn--online { --btn-h: calc(var(--uy) * 0.0680); /* h69.6 → 上端 y669 = 0.6533uy */ letter-spacing: 0.05em; } .fv .btn__badge { --btn-badge-w: calc(62 * var(--ux)); --btn-badge-h: calc(var(--uy) * 0.0361); --btn-badge-fs: calc(20 * var(--ux)); } .fv .btn__break { display: none; } .fv__notes { margin-top: calc(var(--uy) * 0.0346); /* y774 */ font-size: calc(16 * var(--ux)); letter-spacing: 0.15em; line-height: 1.625; } /* ----------------------------------------------------------- 実績表示 Figma PC 686:27112（W1512）/ 674:26810（W1440）。 **このブロックは「1枚の組版」であって、バラバラの絶対配置ではない。** Figma では W1440 と W1512 で内部寸法・内部オフセットが完全に一致する （器 497.52×207.17、丸バッジ 125、区切り線 165、38年ボックス 111 …）。 置かれる位置だけがフレームごとに違う。 旧実装は「位置は --uy・寸法は --ux」で個々に置いていたため、 ビューポート高が 1024*--ux を下回るほど内部だけが相対的に引き伸ばされ、 ・丸バッジの下端が「日本では希少な」に約 24px 被る ・38年 だけが FV 高に対して大きく見える（Windows ノートで顕著） ・区切り線が本来より 165px 下（＝ブロックの外）へ落ちる の3点が同時に起きていた。クライアント指摘 2 の3症状はすべてこれが原因。 そこでブロックを Figma 実寸の剛体として扱い、倍率 --pu を1つだけ持たせる。 --pu = min(--ux, --uy / 1024) ・--uy が Figma と同じ 1024*--ux 以上なら Figma 実寸（= --ux）。 ・低いビューポートでは FV 高に比例して縮むので、内部の被りは原理的に起きず、 ブロック下端は常に 0.8224*--uy（お悩みの弧 0.9121*--uy より上）に収まる。 縦アンカーだけは他要素と同じく --uy 基準（Figma W1440 y635 = 0.6201）。 横はブロック中心 x1121.76（W1512 基準）に置き、縮んでも写真上で中心が動かない。 以下の内部オフセットは Figma W1512 の実測値（ブロック原点 = x873 / y591）: 丸バッジ +42, 0 125×125 686:27115 区切り線 +253.5, +26 h165 686:27119（-90°回転。metadata の y は回転前） 認定店 中心+105.1, 行ボックス上端 +134.6（器 +122・h85.17 に 2行60px を中央寄せ） 宝石と〜 中心+398.8, 行ボックス上端 +8.6（器 +6・h65.24 に 2行60px を中央寄せ） 38年 中心+399, 器 +76・h111（実測インク +98〜+180） */ .fv__proof { --pu: min(var(--ux), calc(var(--uy) / 1024)); display: block; position: absolute; z-index: 3; top: calc(var(--uy) * 0.6201); /* ブロック上端 = Figma W1440 y635 */ right: auto; bottom: auto; left: calc(1121.76 * var(--ux)); /* ブロック中心 x（W1512 の x873 + 497.52/2） */ width: calc(497.52 * var(--pu)); height: calc(207.17 * var(--pu)); margin-top: 0; transform: translateX(-50%); pointer-events: none; } /* 縦の細い区切り線（Figma 686:27119 Line 382 / -90°回転の 165px）。 PC もグラデーションではなく単色の白 1px。674:26672 の実レンダリングを カラムごと読み出すと、両端の 1px を除く 163px が rgb(255,255,255) だった。 以前は端が 15% まで落ちるグラデーションにしていて Figma より薄かった。 */ .fv__proof::before { content: ""; position: absolute; top: calc(26 * var(--pu)); left: calc(253.5 * var(--pu)); width: 1px; height: calc(165 * var(--pu)); background: var(--c-white); } .fv__seal { position: absolute; top: 0; left: calc(42 * var(--pu)); width: calc(125 * var(--pu)); height: calc(125 * var(--pu)); overflow: hidden; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.9)); } .fv__seal img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .fv__proof-cert, .fv__proof-lead { font-family: var(--font-jp); font-size: calc(23 * var(--pu)); font-weight: 600; letter-spacing: 0.05em; /* 1.15 / 23 */ line-height: 1.304; /* 30 / 23 */ text-align: center; text-indent: 0.05em; text-shadow: 0 0 5px #000; } .fv__proof-cert { position: absolute; top: calc(134.6 * var(--pu)); left: calc(105.1 * var(--pu)); transform: translateX(-50%); white-space: nowrap; } .fv__proof-years { position: absolute; top: calc(8.6 * var(--pu)); left: calc(398.8 * var(--pu)); display: grid; justify-items: center; transform: translateX(-50%); white-space: nowrap; } .fv__proof-lead { font-weight: 900; } /* Figma 686:27118 のグラデーションは横方向（#F7D99A → #A68656）。 レンダリング実測でも左端 rgb(234,204,143) → 右端 rgb(187,157,107) と 左が明るい。SP と同じ --g-gold-x を使う（縦の --g-gold は誤り）。 */ .fv__years { margin-top: calc(9.4 * var(--pu)); background-image: var(--g-gold-x); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.85)); font-family: var(--font-jp); font-size: calc(110 * var(--pu)); font-weight: 600; letter-spacing: 0.006em; /* 0.7 / 110 */ line-height: 1; } .fv__years-unit { font-size: 0.364em; } /* 40 / 110 */ } /* ===== 02-worries.css ==================================================== */ /* ========================================================================== 02-worries.css — お悩み（Empathy） Figma: PC 686:27120 (W1512) / SP 585:8734 (W390) 寸法は Figma の絶対座標を「デザイン幅に対する比率」に直し、 --wb（design basis width）に掛けて再現する。 --wb は SP=min(100vw,500px) / PC=min(100vw,1512px) で頭打ちにするので、 760px 付近や 1920px でも余白と装飾が肥大しない。 ========================================================================== */ .worry { /* Figma SP 585:8734 は FV へ 32px 食い込む（弧の上は FV の背景）。 PC は下の @media (min-width:1001px) で FV のビューポート高基準に上書きする。 */ --arc-overlap: clamp(27px, 8.21vw, 35px); --arc-h: clamp(24px, 7.31vw, 40px); position: relative; isolation: isolate; overflow: hidden; /* 大理石は Figma 686:27121（Intersect / 不透明度 100%）の“画像調整後”の色。 rawImages（調整前）は平均 #EEF2F7 と暗く青いので使わない。詳細は CLAUDE.md。 */ background-color: #fafbfc; background-image: url("assets/figma/worries/marble.webp"); background-repeat: no-repeat; background-position: center center; background-size: cover; } /* 上端の金曲線 + 白キャップ（Figma 686:27124 / 585:8802） preserveAspectRatio="none" のSVGを幅いっぱいに引き伸ばす。 */ .worry__cap { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2; display: block; pointer-events: none; background-image: url("assets/figma/worries/section-top-curve.svg"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .worry__inner { position: relative; z-index: 1; } /* --------------------------------------------------------------- 見出し */ /* .sec-head は 00-shared.css（Agent 1）で定義。ここでは本セクション固有の 字送りだけを上書きする（Figma 686:27129 / 585:8737）。 */ .worry .sec-head__ja { letter-spacing: 0.15em; /* 36px に対して 5.4px */ } .worry__br-sp { display: none; } /* 見出し下の金ライン（Figma 686:27125 = 金 #CFB277 1px + 淡 #E2E0DB 1px / 585:8742） */ .worry__rule { width: 100%; max-width: 1163px; height: 6px; margin: 0 auto; border: 0; background-image: linear-gradient(to bottom, var(--c-gold) 0 1px, transparent 1px), linear-gradient(to bottom, #e2e0db 0 1px, transparent 1px); background-position: left top, left bottom; background-size: 100% 1px; background-repeat: no-repeat; } /* ----------------------------------------------------------- チェック一覧 */ .worry-list { width: fit-content; max-width: 100%; margin-inline: auto; } .worry-list__item { position: relative; color: var(--c-ink); font-family: var(--font-jp); font-weight: 500; } .worry-list__item::before { content: ""; position: absolute; inset-inline-start: 0; background-image: url("assets/figma/worries/check.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; } .worry-list__item > strong { color: var(--c-bronze); font-weight: 600; } /* reveal--stagger 用の順序変数（インラインstyleを使わない） */ .worry-list.reveal--stagger > :nth-child(1) { --i: 0; } .worry-list.reveal--stagger > :nth-child(2) { --i: 1; } .worry-list.reveal--stagger > :nth-child(3) { --i: 2; } .worry-list.reveal--stagger > :nth-child(4) { --i: 3; } .worry-list.reveal--stagger > :nth-child(5) { --i: 4; } .worry-list.reveal--stagger > :nth-child(6) { --i: 5; } /* ------------------------------------------------------------- 宝石の装飾 */ .worry__deco { position: absolute; z-index: 0; pointer-events: none; } .worry__gem { position: absolute; translate: -50% -50%; object-fit: contain; } /* ========================================================================== SP（Figma 585:8734 / W390 基準） ========================================================================== */ @media (max-width: 760px) { .worry { --wb: min(100vw, 500px); /* デザイン幅の左端（= 装飾を画面中央に寄せるための基準X） */ --wb-x: calc(50% - var(--wb) / 2); /* 大理石 y960–1826（h866）／見出しグループ上端 y1048 → rel 88px 下側は宝石の装飾（rel 664–790）の逃げとして 231px 分を確保 */ padding-block: calc(var(--wb) * 0.226) calc(var(--wb) * 0.592); } .worry__cap { /* Figma 585:8802: w392 × h28.508 → 7.31% */ height: clamp(24px, 7.31vw, 40px); } .worry__br-sp { display: inline; } .worry .sec-head__ja { letter-spacing: 0.1em; /* 27px に対して 2.7px */ } /* 見出し下ライン: y1190（h2中央 y1137 の 53px 下） */ .worry__rule { height: 2px; margin-block-start: calc(var(--wb) * 0.067); } .worry-list { /* Figma: チェック x32 / テキスト x48 */ width: 100%; margin-block-start: calc(var(--wb) * 0.041); padding-inline-start: 15px; } .worry-list__item { padding-inline-start: 16px; /* 390基準 16px。375px でも Figma の折返し位置を保てるよう可変にする */ font-size: clamp(15px, 4.1vw, 16px); line-height: 1.5625; /* 25px / 16px */ letter-spacing: 0.05em; } .worry-list__item + .worry-list__item { margin-block-start: 20px; } .worry-list__item::before { inset-block-start: 0.45em; width: 11px; aspect-ratio: 18 / 15.9694; } .worry-list__item > strong { font-size: clamp(16px, 4.62vw, 18px); letter-spacing: 0.05em; } /* -------- 装飾（SPは下端で横一列 / Figma 585:8792） -------- */ .worry__deco--left { inset-inline-start: calc(var(--wb-x) + var(--wb) * 0.1126); inset-block-end: calc(var(--wb) * 0.2361); width: calc(var(--wb) * 0.3827); height: calc(var(--wb) * 0.2567); } .worry__deco--right { inset-inline-start: calc(var(--wb-x) + var(--wb) * 0.4952); inset-block-end: calc(var(--wb) * 0.2154); width: calc(var(--wb) * 0.4265); height: calc(var(--wb) * 0.3026); } .worry__gem { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.13)); } .worry__gem--solitaire { inset-inline-start: 29.96%; inset-block-start: 55.33%; width: 59.57%; height: 88.8%; rotate: 0.35deg; } .worry__gem--sapphire { inset-inline-start: 63.37%; inset-block-start: 29.11%; width: 32.51%; height: 48.24%; transform: rotate(-166.49deg) scaleY(-1); } .worry__gem--rosegold { inset-inline-start: 82.63%; inset-block-start: 71.39%; width: 34.57%; height: 36.53%; rotate: -0.38deg; } .worry__gem--aquamarine { inset-inline-start: 23.01%; inset-block-start: 59.95%; width: 38.48%; height: 36.62%; transform: rotate(41.59deg) scaleY(-1); } .worry__gem--garnet-a { inset-inline-start: 45.6%; inset-block-start: 36.04%; width: 16.08%; height: 37.15%; rotate: -16.82deg; } .worry__gem--garnet-b { inset-inline-start: 60.61%; inset-block-start: 21.06%; width: 16.08%; height: 37.15%; transform: rotate(-163.18deg) scaleY(-1); } .worry__gem--pave { inset-inline-start: 69.64%; inset-block-start: 60.43%; width: 53.47%; height: 42.23%; rotate: -37.08deg; } } /* ========================================================================== PC（Figma 686:27120 / W1512 基準） ========================================================================== */ @media (min-width: 761px) { .worry { --wb: min(100vw, 1512px); /* 大理石 y798–1646（h848）／見出しグループ上端 y963 → rel 165px */ padding-block: clamp(84px, 10.91vw, 165px) clamp(96px, 10.65vw, 161px); } .worry__cap { /* Figma 686:27124: w1514 × h79 → 5.22% */ height: clamp(40px, 5.22vw, 79px); } /* 見出し下ライン: y1122（h2中央 y1064 の 58px 下） */ .worry__rule { margin-block-start: clamp(18px, 2.31vw, 35px); } .worry-list { margin-block-start: clamp(24px, 3.51vw, 53px); } .worry-list__item { /* チェック x335 / テキスト x368 → 33px */ padding-inline-start: clamp(24px, 2.18vw, 33px); font-size: clamp(15px, 1.19vw, 18px); line-height: 1.667; /* 30px / 18px */ letter-spacing: 0.1em; } .worry-list__item + .worry-list__item { margin-block-start: clamp(18px, 2.05vw, 31px); } .worry-list__item::before { inset-block-start: 0.45em; width: clamp(15px, 1.19vw, 18px); aspect-ratio: 18 / 15.9694; } .worry-list__item > strong { font-size: clamp(16px, 1.32vw, 20px); letter-spacing: 0.1em; } /* -------- 装飾（PCは左右のコーナー / Figma 686:27160・686:27164） -------- */ .worry__deco--left { inset-inline-start: calc(var(--wb) * 0.0496); inset-block-end: calc(var(--wb) * 0.04744); width: calc(var(--wb) * 0.13376); height: calc(var(--wb) * 0.13312); } .worry__deco--right { inset-inline-end: calc(var(--wb) * 0.03096); inset-block-end: calc(var(--wb) * 0.03553); width: calc(var(--wb) * 0.16837); height: calc(var(--wb) * 0.14831); } .worry__gem { filter: drop-shadow(0 8px 4px rgba(0, 0, 0, 0.13)); } .worry__gem--solitaire { inset-inline-start: 38.91%; inset-block-start: 60.9%; width: 77.35%; height: 77.73%; rotate: 0.35deg; } .worry__gem--sapphire { inset-inline-start: 72.41%; inset-block-start: 25.48%; width: 42.21%; height: 42.22%; transform: rotate(-166.49deg) scaleY(-1); } .worry__gem--rosegold { inset-inline-start: 77.45%; inset-block-start: 84.09%; width: 44.9%; height: 31.97%; rotate: -0.38deg; } .worry__gem--aquamarine { inset-inline-start: 26.3%; inset-block-start: 70.83%; width: 43.98%; height: 33.7%; transform: rotate(41.59deg) scaleY(-1); } .worry__gem--garnet-a { inset-inline-start: 39.23%; inset-block-start: 33.17%; width: 18.38%; height: 34.19%; rotate: -16.82deg; } .worry__gem--garnet-b { inset-inline-start: 56.39%; inset-block-start: 19.38%; width: 18.38%; height: 34.19%; transform: rotate(-163.18deg) scaleY(-1); } .worry__gem--pave { inset-inline-start: 65.31%; inset-block-start: 57.59%; width: 61.1%; height: 38.86%; rotate: -37.08deg; } } /* ========================================================================== FV との境界（PC のみ / Figma 674:26672・674:26539） Figma では FV の下端が「下へ膨らむ金線つきの弧」で切り取られている。 この弧は FV ではなくお悩みセクションのレイヤー（Line 325 = .worry__cap）。 お悩みを負のマージンで FV へ重ね、大理石を弧の下側だけに出す。 .worry__cap の SVG は viewBox 80.9591 のうち y1.40208〜79.402 が弧。 Figma は弧のノードがフレーム幅より広く（W1440 で 1513px / x-36）画面外へ はみ出しているが、本実装はビューポート幅ぴったりに引き伸ばす（W1512 TOP フレーム 686:27120 と同じ・SP も同様）。そのぶん端が浅くなるので、 キャップ高と持ち上げ量を弧の端 0.841uy / 最深部 0.911uy に合わせて解く: 端 = worryTop + (1.40208 / 80.9591) * capH 最深部 = worryTop + (79.402 / 80.9591) * capH → capH = 0.0727uy、worryTop = 0.8397uy。 section-top-curve.svg の白塗りは「弧の上側」なので、そのまま重ねると FV の黒地を白く塗り潰してしまう。マスクで弧の下側だけを残し、 上側（白塗り）を消して FV を見せる。金ストロークだけは残したいので、 キャップを 1px 下げてストローク全幅がマスク内に入るようにしている。 マスクのパスは section-top-curve.svg のベジェ制御点と同一。 ========================================================================== */ @media (min-width: 1001px) { .worry { /* 01-fv.css（@media min-width:1001px）で定義した FV の高さ */ --worry-cap-h: calc(var(--fv-h) * 0.0727); --worry-arc: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201514.08%2080.9591'%20preserveAspectRatio%3D'none'%3E%3Cpath%20d%3D'M0%201.40208C0.549591%201.40208%20203.55%2081.9021%20759.05%2079.402C1314.55%2076.902%201513.55%201.40208%201514.08%201.40208L1514.08%2080.9591L0%2080.9591Z'%20fill%3D'%23000'%2F%3E%3C%2Fsvg%3E"); /* .worry 上端を 0.8397uy へ持ち上げる */ margin-block-start: calc(var(--fv-h) * -0.1603); -webkit-mask-image: var(--worry-arc), linear-gradient(to bottom, transparent 0 calc(var(--worry-cap-h) - 3px), #000 calc(var(--worry-cap-h) - 3px)); mask-image: var(--worry-arc), linear-gradient(to bottom, transparent 0 calc(var(--worry-cap-h) - 3px), #000 calc(var(--worry-cap-h) - 3px)); -webkit-mask-size: 100% var(--worry-cap-h), 100% 100%; mask-size: 100% var(--worry-cap-h), 100% 100%; -webkit-mask-position: left top, left top; mask-position: left top, left top; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; } .worry__cap { /* 金ストローク（3px / 上下に half ずつはみ出す）を全幅残すため 1px 下げる */ inset-block-start: 1px; height: var(--worry-cap-h); } } /* ===== 03-choice.css ===================================================== */ /* ============================================================================= 03-choice.css — 「宝飾業界の人間です」／ Your Choice（4つの選択肢） Figma PC : 686:27170 / 686:27181 / 686:27186 （デザイン幅 1512） SP : 585:8803（585:8815 / 585:8819） （デザイン幅 390） ・モバイルファースト（基本 = SP 390 基準の vw）→ @media (min-width: 761px) で PC。 ・4カードは SP 縦積み（Figma 585:8819）／ PC 4カラムグリッド（1100px 未満は2列）。 横スクロール要件の対象は「特徴」「事例・買取実績」「比較」で、Your Choice は含まれない。 ・トークンは 00-tokens.css を参照。ここでは再定義しない。 ============================================================================= */ .choice { --choice-gold-text: linear-gradient(90deg, #cfb277 0%, #7e571e 100%); --choice-rule-inner: #635f5f; --choice-card-fill: rgba(3, 3, 3, 0.4); position: relative; isolation: isolate; background: var(--c-ink); color: var(--c-white); overflow: clip; } /* --------------------------------------------------------------- 背景装飾 ::before = 上端のダイヤモンド帯（AdobeStock_1255953924） ::after = 世界地図テクスチャ（AdobeStock_1358588937 / opacity 12%） */ .choice--intro::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: 0; height: clamp(74px, 24.1vw, 100px); background: url("assets/figma/choice/diamond-band.webp") 0 0 / 100% 100% no-repeat; pointer-events: none; } .choice--intro::after { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: clamp(44px, 15.64vw, 68px); height: clamp(360px, 134.6vw, 580px); background: url("assets/figma/choice/bg-worldmap.webp") 43.6% 0 / 283.63% auto no-repeat; opacity: 0.12; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 14%, #000 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 14%, #000 100%); pointer-events: none; } /* SP のみ：カード帯の背後に入るクラフト紙テクスチャ（AdobeStock_1030152110 / 14%） */ .choice--options::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: clamp(230px, 80.8vw, 360px); bottom: 0; background: url("assets/figma/choice/bg-texture-sp.webp") 50% 100% / cover no-repeat; opacity: 0.14; pointer-events: none; } /* ------------------------------------------------------------------ 導入 */ .choice--intro { padding-block: clamp(120px, 40.7vw, 190px) clamp(44px, 17.4vw, 80px); } .choice__intro { text-align: center; } .choice__lead { font-size: min(4.1vw, 16px); font-weight: 500; line-height: 2.19; letter-spacing: 0.05em; } .choice__statement { margin-block-start: clamp(4px, 1.28vw, 8px); font-weight: 700; } .choice__statement-sub, .choice__statement-main { display: block; color: var(--c-gold); } .choice__statement-sub { font-size: min(4.25vw, 18px); font-weight: 600; line-height: min(7.69231vw, 30px); letter-spacing: 0.05em; } .choice__statement-main { margin-block-start: min(3.58975vw, 14px); font-size: min(9.74vw, 38px); line-height: min(10vw, 39px); letter-spacing: 0.05em; } .choice__statement-tail { font-size: 0.527em; /* 20 / 38 */ font-weight: 600; letter-spacing: 0.05em; } @supports (background-clip: text) or (-webkit-background-clip: text) { .choice__statement-sub, .choice__statement-main { background-image: var(--choice-gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; } } .choice__copy { margin-block-start: clamp(20px, 12.05vw, 56px); font-size: min(3.9vw, 16px); font-weight: 500; line-height: 1.94; letter-spacing: 0.05em; } .choice__copy p + p { margin-block-start: 1.94em; /* Figma SP は段落間に1行の空きがある */ } .choice__figure { width: 100%; margin-block-start: clamp(24px, 10vw, 48px); margin-inline: auto; } .choice__figure img { width: 100%; height: auto; aspect-ratio: 390 / 108; object-fit: cover; object-position: 50% 47%; } /* --------------------------------------------- Your Choice 見出し（共通 sec-head） */ .choice--options { padding-block: clamp(38px, 14.5vw, 68px) clamp(48px, 16.6vw, 84px); } /* 見出しは共通 .sec-head（00-shared.css）をそのまま使い、 Figma SP（585:8820）と差がある値だけ上書きする。 */ .choice .choice__head-ja { font-size: min(6.92vw, 27px); font-weight: 600; line-height: 1.41; letter-spacing: 0.1em; text-indent: 0; /* 2行組みなので行頭インデントは使わない */ } /* --------------------------------------------------------------- カード列 */ .choice .choice__list { --bump-w: min(14.1vw, 62px); --bump-h: calc(var(--bump-w) * 0.36); margin-block-start: clamp(20px, 8.97vw, 42px); padding-block: var(--bump-h) 8px; padding-inline: var(--gutter); gap: 16px; scroll-padding-inline: var(--gutter); } .choice .choice-card { --card-pad-x: 5.9vw; --card-fig-inset: 4.62vw; position: relative; display: flex; flex-direction: column; flex: 0 0 clamp(268px, 82vw, 330px); padding: clamp(20px, 6.62vw, 30px) var(--card-pad-x) clamp(28px, 9.95vw, 44px); border: 1px solid var(--c-gold); background: var(--choice-card-fill); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); } /* 上辺中央の半楕円タブ（Figma: Rectangle 121 ∪ Ellipse 4 のUnion） */ .choice-card::before { content: ""; position: absolute; z-index: 0; top: calc(-1 * var(--bump-h) - 1px); left: 50%; width: var(--bump-w); height: calc(var(--bump-h) + 1px); transform: translateX(-50%); border: 1px solid var(--c-gold); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--c-ink); } .choice-card__no { position: absolute; z-index: 1; top: calc(-0.74 * var(--bump-h) - 1px); left: 50%; display: flex; align-items: center; justify-content: center; width: var(--bump-w); height: var(--bump-h); transform: translateX(-50%); color: var(--c-gold); /* Figma 686:27203 / 27211 / 27219 / 27227 は Snell Roundhand **Bold**（font-size 27 / 行送り 61）。 .sec-head__en と同じくアウトライン化 SVG を貼る。font-size は SVG の高さの em 基準。 */ font-size: min(4.1vw, 16px); line-height: 1; --script-box: 61; /* Figma の行送り */ --script-h: 2.2593em; /* Figma: line-height 61px ÷ font-size 27px */ } .choice-card__title { font-size: min(6.41vw, 27px); font-weight: 700; line-height: 1.35; letter-spacing: 0.1em; text-align: center; } /* 写真の見え方（トリミング）は Figma がカードごとに拡大率とオフセットを 持っている。object-fit: cover だと全カード同じ寄り方になり、SP の 02リフォーム／03直す が大きく切れてしまうため、Figma の 「窓＝figure・画像＝拡大率(--choice-fig-w) と位置(--choice-fig-x/--choice-fig-y)」を そのまま再現する。値は窓の幅／高さに対する％（Figma の指定と同じ基準）。 SP: 585:8838 / 623:4982 / 634:5018 / 623:5000 PC: 686:27205 / 686:27213 / 686:27221 / 686:27229 */ .choice-card__figure { position: relative; margin-block-start: clamp(8px, 2.47vw, 12px); margin-inline: calc(var(--card-fig-inset) - var(--card-pad-x)); aspect-ratio: 317 / 96; overflow: clip; } .choice-card__figure img { position: absolute; inset-block-start: var(--choice-fig-y); inset-inline-start: var(--choice-fig-x); width: var(--choice-fig-w); max-width: none; height: auto; } .choice-card:nth-child(1) { --choice-fig-w: 65.09%; --choice-fig-x: 16.26%; --choice-fig-y: -25.39%; } .choice-card:nth-child(2) { --choice-fig-w: 43.17%; --choice-fig-x: 28.53%; --choice-fig-y: -3.56%; } .choice-card:nth-child(3) { --choice-fig-w: 49.14%; --choice-fig-x: 26.19%; --choice-fig-y: -4.29%; } .choice-card:nth-child(4) { --choice-fig-w: 76.19%; --choice-fig-x: 11.97%; --choice-fig-y: -42.04%; } .choice-card__text { margin-block-start: clamp(12px, 4.62vw, 20px); font-size: min(4.1vw, 16px); font-weight: 500; line-height: 1.94; letter-spacing: 0.05em; } /* ----------------------------------------------------------------- 結び文 */ .choice__closing { position: relative; width: min(869px, 100% - var(--gutter) * 2); margin-block-start: clamp(18px, 6.9vw, 32px); margin-inline: auto; padding: clamp(12px, 4.1vw, 18px) clamp(12px, 4.1vw, 20px); border: 1px solid var(--c-white); font-size: min(4.62vw, 18px); font-weight: 600; line-height: 1.78; letter-spacing: 0.1em; text-align: center; } .choice__closing::before { content: ""; position: absolute; inset: 2px; border: 1px solid var(--choice-rule-inner); pointer-events: none; } /* ------------------------------------------------------------ 改行の出し分け */ .choice__nl-pc { display: none; } .choice__nl-sp { display: inline; } /* -------------------------------------------------------- reveal の表示順序 Figma 吹き出し：導入は上段→中段→下段、カードは01から順番に。 */ .choice__intro > *:nth-child(1) { --i: 0; } .choice__intro > *:nth-child(2) { --i: 1; } .choice__intro > *:nth-child(3) { --i: 2; } .choice__head > *:nth-child(1) { --i: 0; } .choice__head > *:nth-child(2) { --i: 1; } .choice__list > *:nth-child(1) { --i: 0; } .choice__list > *:nth-child(2) { --i: 1; } .choice__list > *:nth-child(3) { --i: 2; } .choice__list > *:nth-child(4) { --i: 3; } /* ============================================================================= PC（min-width: 761px）— Figma 1512 基準 ============================================================================= */ @media (min-width: 761px) { .choice--intro::before { height: clamp(110px, 13.36vw, 202px); background-repeat: repeat-x; background-size: 76.85% 100%; } .choice--intro::after { top: clamp(120px, 18.19vw, 275px); height: clamp(320px, 47.35vw, 716px); background-position: 0 0; background-size: 100% auto; } .choice--options::before { content: none; } /* ------------------------------------------------------------------ 導入 */ .choice--intro { padding-block: clamp(140px, 20.21vw, 306px) clamp(40px, 3.97vw, 60px); } .choice__lead { font-size: clamp(18px, 1.852vw, 28px); line-height: 1.6; letter-spacing: 0.15em; } .choice__statement { --choice-statement-leading: clamp(66px, 6.971vw, 105.4px); margin-block-start: clamp(18px, 3.24vw, 49px); } .choice__statement-sub, .choice__statement-main { line-height: var(--choice-statement-leading); } .choice__statement-sub { font-size: clamp(22px, 2.315vw, 35px); letter-spacing: 0.15em; } .choice__statement-main { margin-block-start: 0; font-size: clamp(40px, 4.63vw, 70px); letter-spacing: 0.15em; } .choice__statement-tail { font-size: 0.714em; /* 50 / 70 */ letter-spacing: 0; } .choice__copy { margin-block-start: clamp(30px, 4.96vw, 75px); font-size: clamp(14px, 1.323vw, 20px); line-height: 2.8; letter-spacing: 0.1em; } .choice__copy p + p { margin-block-start: 0; } .choice__figure { width: min(974px, 100% - var(--gutter) * 2); margin-block-start: clamp(36px, 5.36vw, 81px); } .choice__figure img { aspect-ratio: 974 / 297; } /* -------------------------------------------------------- Your Choice */ .choice--options { padding-block: clamp(40px, 3.9vw, 59px) clamp(80px, 12.96vw, 196px); } .choice .choice__head-ja { font-size: clamp(22px, 2.381vw, 36px); font-weight: 700; line-height: 1.7; letter-spacing: 0.15em; text-indent: 0.15em; /* PCは1行組み。共通 .sec-head__ja と同じ扱いに戻す */ } /* ---------------------------------------------------------------- カード */ .choice .choice__list { --bump-w: clamp(52px, 4.912vw, 74px); --bump-h: calc(var(--bump-w) * 0.5); display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; width: min(1383px, 100% - var(--gutter) * 2); margin-block-start: clamp(48px, 6.02vw, 91px); margin-inline: auto; padding-inline: 0; gap: clamp(30px, 3.4vw, 52px) clamp(12px, 1.389vw, 21px); overflow: visible; } .choice .choice-card { --card-pad-x: clamp(11px, 1.164vw, 18px); --card-fig-inset: var(--card-pad-x); flex: initial; padding-block: clamp(24px, 2.454vw, 37px) clamp(26px, 2.58vw, 39px); } .choice-card__no { font-size: clamp(18px, 1.786vw, 27px); } .choice-card__title { font-size: clamp(20px, 1.984vw, 30px); } .choice-card__figure { margin-block-start: clamp(16px, 1.905vw, 29px); aspect-ratio: 294.83 / 194.34; } .choice-card:nth-child(1) { --choice-fig-w: 141.03%; --choice-fig-x: -20.49%; --choice-fig-y: -15.82%; } .choice-card:nth-child(2) { --choice-fig-w: 106.26%; --choice-fig-x: -3.04%; --choice-fig-y: -0.23%; } .choice-card:nth-child(3) { --choice-fig-w: 106.87%; --choice-fig-x: -5.29%; --choice-fig-y: -0.13%; } .choice-card:nth-child(4) { --choice-fig-w: 139.67%; --choice-fig-x: -20.05%; --choice-fig-y: -20.23%; } .choice-card__text { margin-block-start: clamp(20px, 2.474vw, 37px); margin-inline: calc(-1 * var(--card-pad-x)); font-size: clamp(13px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; text-align: center; } /* -------------------------------------------------------------- 結び文 */ .choice__closing { margin-block-start: clamp(48px, 6.14vw, 93px); padding: clamp(16px, 1.75vw, 27px) clamp(16px, 2vw, 30px); font-size: clamp(16px, 1.852vw, 28px); line-height: 1.15; letter-spacing: 0.15em; } .choice__nl-sp { display: none; } } /* PC 4カラム：1カード幅がFigma指定の改行位置を収容できる幅から適用する */ @media (min-width: 1100px) { .choice .choice__list { grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.389vw, 21px); } .choice__nl-pc { display: inline; } } /* ========================================================================== SP のカード列を Figma どおり縦積みにする（Figma SP 585:8819） 横スクロール要件の対象は「特徴」「事例・買取実績」「比較」であり、 Your Choice の4カードは含まれないため、Figma の縦積み構成を正とする。 ========================================================================== */ @media (max-width: 760px) { .choice .choice__list { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 5.6vw, 26px); width: min(356px, 100% - var(--gutter) * 2); margin-inline: auto; padding-inline: 0; overflow: visible; } .choice .choice-card { flex: initial; width: 100%; } } /* ===== 04-features.css =================================================== */ /* ========================================================================== 04-features.css — 「特徴」セクション 下部 Figma: PC 686:27178 / 686:27230（W1512基準） SP 585:8861 / 585:8975 / 643:10404 / 643:10442（W390基準） モバイルファースト。SPは390基準、PCは1512基準でclamp化。 ========================================================================== */ .feat { /* Figma由来の局所色（トークン外） */ --feat-accent: #a48248; /* SP リード「国際資格」 */ --feat-proof-2: #815b22; /* 「証明」グラデ終点 */ --feat-line-2: #55605c; /* 二重罫の下線 / GIAボックス内枠 */ --feat-gia-1: rgb(7 58 41 / 40%); --feat-gia-2: rgb(19 91 69 / 40%); --feat-cmp-1: rgb(7 57 40 / 50%); --feat-cmp-2: rgb(19 92 70 / 50%); /* 和紙（「わし２」）は Figma 上で opacity 90%。 PC 686:27248（安心パネル）/ 686:27343（色パネル）、SP 585:8976。 いずれも「白ベタ + 和紙画像 opacity 90%」の2層構成。 要素へ opacity を掛けると本文まで薄くなるので、白10%のベールを 背景レイヤーとして和紙の上に重ね、同じ合成結果（0.9×和紙 + 0.1×白）を作る。 クライアント指示10「和紙は透明度90%くらいに（文字が読みにくい）」に対応。 */ --feat-washi-veil: linear-gradient(rgb(255 255 255 / 10%), rgb(255 255 255 / 10%)); /* 余白スケール（SP: 390基準） */ --feat-gap-feature: 80px; --feat-gap-block: 60px; --feat-gap-eyebrow: 8px; --feat-gap-rule: 20px; --feat-gap-body: 20px; --feat-gap-media: 22px; --feat-gap-color: 70px; /* Feature 01〜04 の本文はパネル（GIAボックス/安心/オークション/色）より内側。 SP: Figma 585:8873 x36・585:8906 x39 に対しコンテナは x17 → 約20px。 PC: Figma 686:27233 x160 に対しコンテナは x137 → 23px（split は grid が担当）。 */ --feat-inset: 20px; position: relative; isolation: isolate; padding-block: 48px clamp(72px, 30.8vw, 120px); background: var(--c-ink); color: var(--c-white); overflow: clip; } .feat__inner { position: relative; z-index: 1; } /* 下部の装飾写真（686:27180 / AdobeStock_1030152110）— PCのみ */ .feat__deco { display: none; } /* PC/SP専用の改行・約物 -------------------------------------------------- */ .feat-br-pc { display: none; } .feat-sp-only { display: inline; } /* ------------------------------------------------------------- リード見出し Figma: 686:27400（PC） / 623:4935（SP） */ .feat-lead { margin: 0 calc(var(--gutter) * -1); padding-inline: 8px; font-weight: 600; text-align: center; letter-spacing: 0.1em; } .feat-lead__q, .feat-lead__a { display: block; } .feat-lead__q { --i: 0; font-size: clamp(12.5px, 3.8vw, 15.5px); font-weight: 700; line-height: 1.63; letter-spacing: 0.06em; } /* line-height は必ず「単位付き」で書く。 unitless（例 2.05）だと内側の .feat-lead__cert / __proof（33px・PC 60px）が 自分の font-size で行送りを再計算し、1行の行ボックスが 45px → 67.6px（PC 96px → 165px）へ 膨らんで上段との間隔が倍近く開く。em なら computed 値（px）が子へ継承されるため Figma の「全spanが leading 45px（PC 96px）」と一致する。 クライアント指示3「上段と下段の行間を詰める」の本体。 SP: Figma 623:4937 = leading 45px / font 22px → 45 / 22 = 2.045em。 margin-top も Figma 実測（623:4936 の行中心 y4333 ↔ 623:4937 の1行目中心 y4372.5 = 39.5px） に合わせる。行ボックスの半分（12.1px + 22.5px）を差し引いた残りが 4.9px ≒ 0.22em。 */ .feat-lead__a { --i: 1; margin-top: 0.22em; font-size: clamp(19px, 5.64vw, 24px); line-height: 2.045em; } .feat-lead__cert { font-size: clamp(27px, 8.46vw, 36px); color: var(--feat-accent); } .feat-lead__cert--sm { font-size: clamp(21px, 6.41vw, 27px); } .feat-lead__proof { font-size: clamp(27px, 8.46vw, 36px); background-image: linear-gradient(90deg, var(--c-gold) 0%, var(--feat-proof-2) 100%); /* stylelint-disable-next-line property-no-vendor-prefix -- 理由: Chrome 119 以前 / Safari 13 以前は background-clip: text 未対応で、外すと文字が透明のまま消える。 解除予定: 対応ブラウザを Chrome 120+ / Safari 14+ に引き上げた時点で削除。 出典: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#browser_compatibility (2026-07-26 取得) */ -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------------------------ 画像クロップ用ヘルパー */ .feat-crop { position: relative; overflow: hidden; } .feat-crop__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } /* ------------------------------------------- GIA G.G. ピン写真（686:27397） */ .feat-hero { margin: clamp(48px, 18.5vw, 80px) 0 0; } .feat-hero__frame { /* 写真上端の黒いぼかし（Figma "Rectangle 223" = SP 585:8867 / PC 686:27399）。 #030303 の矩形にレイヤーブラーを掛け、写真の上端を黒背景へ溶かす帯。 値は写真フレーム（SP 585:8866 = 390.09×187.28 / PC 686:27398 = 870.5×417.92） に対する比率で持ち、ブラー半径は写真幅に比例させる。 SP は写真幅 = 100vw なので 17px / 390.09 = 4.36vw。 クライアント指示4「GIAGG の画像の上部にぼかし」に対応。 */ --feat-fade-left: 0.51%; /* SP 585:8867 x2 → 2 / 390.09 */ --feat-fade-width: 98.95%; /* SP w386 → 386 / 390.09 */ --feat-fade-top: -7.93%; /* SP y4491 − 写真上端 y4505.86 = −14.86 / 187.28 */ --feat-fade-height: 21.36%; /* SP h40 → 40 / 187.28 */ --feat-fade-blur: 4.36vw; aspect-ratio: 870.5 / 417.9; } /* .feat-crop の overflow: hidden で写真の外へ出る分は切られる。 切られる側（写真より上）はセクション背景と同じ #030303 なので見た目は変わらない。 z-index は付けない — .feat-crop__img より DOM 順で後ろなので既に上に載る。 */ .feat-hero__frame::after { content: ""; position: absolute; top: var(--feat-fade-top); left: var(--feat-fade-left); width: var(--feat-fade-width); height: var(--feat-fade-height); background: var(--c-ink); filter: blur(var(--feat-fade-blur)); pointer-events: none; } .feat-hero__img { top: -3.67%; left: 3.7%; width: 96.27%; height: 133.97%; object-fit: fill; } /* --------------------------------------------- Feature 01〜04 共通パーツ */ .feat-item { margin-top: var(--feat-gap-feature); } .feat-item--full { margin-top: clamp(20px, 6.7vw, 30px); } .feat-item__inset { padding-inline: var(--feat-inset); } /* SP は split（Feature 02〜04）も同じ内側インデント。罫線と写真は別扱い。 */ .feat-item--split > .feat-eyebrow, .feat-item--split > .feat-item__title, .feat-item--split > .feat-item__body { padding-inline: var(--feat-inset); } .feat-eyebrow { --feat-eyebrow-ink-height: 18.83; --feat-eyebrow-offset: 25.45; height: calc(var(--feat-eyebrow-ink-height) / 25 * 1em); margin-bottom: var(--feat-gap-eyebrow); font-size: 14px; } .feat-eyebrow img { --script-h: calc(66 / 25 * 1em); position: relative; top: calc(var(--feat-eyebrow-offset) / 25 * -1em); } .feat-eyebrow--02 { --feat-eyebrow-ink-height: 19.11; --feat-eyebrow-offset: 25.17; } .feat-eyebrow--03 { --feat-eyebrow-ink-height: 19.11; --feat-eyebrow-offset: 25.17; } .feat-eyebrow--04 { --feat-eyebrow-ink-height: 21.59; --feat-eyebrow-offset: 22.69; } .feat-item__title { margin: 0; font-size: clamp(20px, 5.9vw, 25px); font-weight: 600; line-height: 1.39; letter-spacing: 0.1em; } /* 二重罫（Figma Line 311 = #CFB277 / Line 312 = #55605C） */ .feat-rule { height: 3px; margin-top: var(--feat-gap-rule); border-top: 1px solid var(--c-gold); border-bottom: 1px solid var(--feat-line-2); } .feat-item__body { margin-top: var(--feat-gap-body); font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } .feat-item__body > p + p { margin-top: 1.94em; } /* SP の写真は Figma で 307/355（585:8908・585:8925 x41-44 w307）。器いっぱいにしない。 */ .feat-item__media { width: 86.5%; margin: var(--feat-gap-media) auto 0; } .feat-item__frame--staff { aspect-ratio: 511 / 372; } .feat-item__img--staff { top: -5.55%; left: -9.32%; width: 118.65%; height: 144.02%; object-fit: fill; } .feat-item__frame--appraisal { aspect-ratio: 307 / 224; } .feat-item__map { width: 100%; height: auto; } /* ------------------------------------ GIA G.G. 解説（686:27239 / 585:8876） */ .feat-gia { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "seal title" "text text"; align-items: start; gap: 20px clamp(11px, 2.8vw, 20px); margin-top: var(--feat-gap-block); padding: clamp(24px, 9.7vw, 38px) clamp(20px, 5.9vw, 40px); background-image: linear-gradient(90deg, var(--feat-gia-1) 0%, var(--feat-gia-2) 50%, var(--feat-gia-1) 100%); border: 1px solid var(--c-gold); } .feat-gia::before { content: ""; position: absolute; inset: 3px; border: 1px solid var(--feat-line-2); pointer-events: none; } .feat-gia > * { position: relative; } .feat-gia__seal { grid-area: seal; width: clamp(64px, 20.3vw, 79px); height: auto; } .feat-gia__title { grid-area: title; align-self: center; margin: 0; font-size: clamp(15px, 4.36vw, 18px); font-weight: 600; line-height: 1.67; letter-spacing: 0.08em; } .feat-gia__text { grid-area: text; font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } /* -------------------------------- 安心の根拠パネル（686:27246 / 585:8882） */ .feat-trust { margin-top: var(--feat-gap-block); padding: 3px; border: 1px solid var(--c-white); } .feat-trust__sheet { display: grid; padding: clamp(28px, 11.5vw, 45px) clamp(16px, 4.9vw, 27px) clamp(28px, 11.8vw, 46px); color: var(--c-ink); background-color: var(--c-white); background-image: var(--feat-washi-veil), url("assets/figma/features/washi.webp"); background-position: center bottom; background-size: cover; } .feat-trust__title { grid-row: 1; margin: 0; font-size: clamp(17px, 5.1vw, 21px); font-weight: 600; line-height: 1.5; text-align: center; letter-spacing: 0.1em; } .feat-trust__photo { grid-row: 2; margin: clamp(20px, 6.4vw, 25px) 0 0; } .feat-trust__photo-frame { aspect-ratio: 278 / 182; background: #e1e1e3; } .feat-trust__photo-img { top: -73.7%; left: -70.59%; width: 240.13%; height: 244.45%; object-fit: fill; } .feat-trust__lead { grid-row: 3; margin-top: clamp(16px, 5.1vw, 20px); } .feat-proof { grid-row: 4; display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 3.6vw, 14px); margin-top: clamp(20px, 6.4vw, 25px); padding: clamp(14px, 4.4vw, 17px) clamp(16px, 5.9vw, 23px) clamp(16px, 4.9vw, 19px); border: 1px solid var(--c-ink); } .feat-trust__close { grid-row: 5; margin-top: clamp(16px, 5.1vw, 20px); } .feat-trust__lead, .feat-trust__close { font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } .feat-proof__seal { width: clamp(78px, 24.1vw, 94px); height: auto; } .feat-proof__list { font-size: clamp(14px, 4.1vw, 16px); line-height: 1.88; letter-spacing: 0.05em; } .feat-proof__list > li { position: relative; padding-left: 13px; } .feat-proof__list > * + * { margin-top: 2px; } .feat-proof__list > li::before { content: ""; position: absolute; top: 0.82em; left: 0; width: 4px; height: 4px; background: currentcolor; border-radius: 50%; } /* ------------------------------ 海外オークション（686:27297 / 585:8936） */ .feat-auction { position: relative; margin-top: clamp(40px, 12.8vw, 60px); border: 1px solid var(--c-gold); } .feat-auction::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url("assets/figma/features/auction-rings.webp") center / cover no-repeat; opacity: 0.15; pointer-events: none; } .feat-auction__inner { position: relative; z-index: 1; margin: 3px; padding: clamp(30px, 10vw, 39px) clamp(14px, 5.4vw, 21px) clamp(32px, 11.8vw, 46px); text-align: center; border: 1px solid #635f5f; } .feat-auction__logo { width: clamp(112px, 32.8vw, 128px); height: auto; margin: 0 auto; } /* SP は Figma 585:8942 が左揃え（2行とも x41 始まり）。PCの 686:27303 は中央。 */ .feat-auction__title { margin: clamp(20px, 7.7vw, 30px) 0 0; font-size: clamp(17px, 5.1vw, 21px); font-weight: 500; line-height: 1.5; text-align: left; letter-spacing: 0.15em; } .feat-auction__text { margin-top: clamp(16px, 6.2vw, 24px); font-size: clamp(13px, 3.8vw, 15px); line-height: 1.94; text-align: left; letter-spacing: 0.05em; } /* ------------------------ アグリアと他店の比較（686:27315 / 634:5031） */ .feat-compare { display: grid; gap: 13px; margin-top: clamp(40px, 12.8vw, 60px); } .feat-compare__card { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 4.9vw, 19px); padding: clamp(20px, 8.7vw, 34px) clamp(16px, 5.9vw, 23px); } .feat-compare__card:nth-child(1) { --i: 0; } .feat-compare__card:nth-child(2) { --i: 1; } .feat-compare__card--aglia { background-image: linear-gradient(270deg, var(--feat-cmp-1) 0%, var(--feat-cmp-2) 50%, var(--feat-cmp-1) 100%); border: 1px solid #cda977; } .feat-compare__card--other { background-color: rgb(44 44 44 / 60%); border: 1px solid #b1b1b1; } .feat-compare__brand { margin: 0; } .feat-compare__brand img { width: clamp(120px, 35.9vw, 140px); height: auto; } .feat-compare__label { margin: 0; font-size: clamp(15px, 4.6vw, 18px); line-height: 1.78; letter-spacing: 0.15em; } .feat-compare__list { font-size: clamp(15px, 4.6vw, 18px); line-height: 1.78; letter-spacing: 0.1em; } .feat-compare__list > li { position: relative; padding-left: 10px; } .feat-compare__list > li::before { content: ""; position: absolute; top: 0.85em; left: 0; width: 4px; height: 4px; background: currentcolor; border-radius: 50%; } /* ---------------------- 色で分かる、宝石の価値（686:27340 / 585:8975） */ .feat-color { margin-top: var(--feat-gap-color); } .feat-color__sheet { padding: clamp(28px, 11vw, 43px) clamp(16px, 5.9vw, 23px) clamp(40px, 15.6vw, 61px); color: var(--c-ink); background-color: var(--c-white); background-image: var(--feat-washi-veil), url("assets/figma/features/washi.webp"); background-position: center bottom; background-size: cover; } .feat-color__title { margin: 0; font-size: clamp(19px, 5.9vw, 23px); font-weight: 600; line-height: 1.6; text-align: center; letter-spacing: 0.1em; } .feat-color__lead { margin-top: clamp(12px, 3.6vw, 14px); padding-inline: 18px; font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } /* 石カード（SP=横スクロール / PC=3カラム） */ .feat-stones-wrap { /* 横スクロール領域の左右に空ける溝。前後ボタンはこの溝の中へ収める。 */ --feat-nav-gutter: 18px; /* タップ領域。見た目は9×17のシェブロンだが最低44×44を確保する。 */ --feat-nav-hit: 44px; /* Figma 585:8975（W390 / シート幅355）実測では、シェブロンの中心はカード上端から42px＝ 宝石名（RUBY）のベースライン上にある。本実装の宝石名は font-size: clamp(19px, 5.9vw, 23px) / line-height 1.3 で、ベースラインはほぼ カード上端からフォントサイズ1つ分の位置に来るので、同じ値を矢印の中心に使う。 .feat-stone__name の font-size を変えるときはこの値も合わせること。 */ --feat-nav-y: clamp(19px, 5.9vw, 23px); position: relative; margin-top: clamp(18px, 5.4vw, 21px); padding-inline: var(--feat-nav-gutter); } .feat-stones { padding-bottom: 12px; } .feat-stones > .feat-stone { flex: 0 0 100%; min-width: 0; } /* 前後ボタン（SPのみ / Figma 左 585:8995・右 585:8997） Figma 585:8975 の実測: シェブロンの描画範囲は 8.5×16.5px、色 #A7A7A7（stroke 1.5 / round）で シート左右端から32px内側 ＝ 横スクロール領域の端にちょうど接する位置。 ボタン枠（44×44）は溝の外側へはみ出させ、シェブロン自体はスクロール領域の端に揃える。 */ .feat-stones-nav { position: absolute; top: var(--feat-nav-y); z-index: 2; display: flex; align-items: center; width: var(--feat-nav-hit); height: var(--feat-nav-hit); border-radius: 999px; transform: translateY(-50%); transition: opacity 200ms var(--ease); } .feat-stones-nav--prev { left: calc(var(--feat-nav-gutter) - var(--feat-nav-hit)); justify-content: flex-end; } .feat-stones-nav--next { right: calc(var(--feat-nav-gutter) - var(--feat-nav-hit)); justify-content: flex-start; } .feat-stones-nav__icon { width: 9px; height: auto; transition: filter 200ms var(--ease); } /* 右向きは同じ書き出し（chevron.svg）を反転して使う。 */ .feat-stones-nav--next .feat-stones-nav__icon { transform: scaleX(-1); } /* 端に到達すると script.js が aria-disabled を立てる。押しても動かないことを見た目でも示す。 */ .feat-stones-nav[aria-disabled="true"] { opacity: 0.3; cursor: default; } /* シェブロンは書き出し画像（#A7A7A7 固定）なので、ホバーは filter で濃くする。 */ @media (hover: hover) { .feat-stones-nav:not([aria-disabled="true"]):hover .feat-stones-nav__icon { filter: brightness(0.6); } } .feat-stone--ruby { --stone-1: #a22222; --stone-2: #3c0d0d; --stone-ink: #5c1313; } .feat-stone--sapphire { --stone-1: #314d9a; --stone-2: #101a34; --stone-ink: #1e2e5a; } .feat-stone--emerald { --stone-1: #1f8357; --stone-2: #005731; --stone-ink: #10462e; } .feat-stone__name { margin: 0; font-size: clamp(19px, 5.9vw, 23px); font-weight: 600; line-height: 1.3; text-align: center; letter-spacing: 0.15em; background-image: linear-gradient(180deg, var(--stone-1) 0%, var(--stone-2) 100%); /* stylelint-disable-next-line property-no-vendor-prefix -- 理由: Chrome 119 以前 / Safari 13 以前は background-clip: text 未対応で、外すと文字が透明のまま消える。 解除予定: 対応ブラウザを Chrome 120+ / Safari 14+ に引き上げた時点で削除。 出典: https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#browser_compatibility (2026-07-26 取得) */ -webkit-background-clip: text; background-clip: text; color: transparent; } .feat-stone__ja { margin: 4px 0 0; font-size: clamp(12px, 3.8vw, 15px); line-height: 1.5; text-align: center; letter-spacing: 0.15em; } .feat-stone__row { width: 100%; height: auto; margin-top: clamp(18px, 6.2vw, 24px); } .feat-stone__arrow { width: 100%; height: auto; margin-top: clamp(18px, 6.4vw, 25px); } .feat-stone__scale { display: flex; justify-content: space-between; margin-top: 2px; font-size: clamp(11px, 3.3vw, 13px); line-height: 2.3; letter-spacing: 0.1em; } .feat-stone__desc { margin-top: clamp(16px, 5.1vw, 20px); font-size: clamp(13px, 3.8vw, 15px); line-height: 2; color: var(--stone-ink); letter-spacing: 0.05em; } .feat-color__band { max-width: 277px; margin: clamp(24px, 7.7vw, 30px) auto 0; padding: clamp(16px, 5.4vw, 21px) 12px; font-size: clamp(14px, 4.1vw, 16px); font-weight: 600; line-height: 1.56; text-align: center; color: var(--c-bronze); letter-spacing: 0.15em; border: 1px solid #bf9e5a; } /* ========================================================================== PC（≥761px） — Figma W1512 基準 ========================================================================== */ @media (min-width: 761px) { .feat { --feat-accent: #957238; --feat-gap-feature: clamp(80px, 8.99vw, 136px); --feat-gap-block: clamp(44px, 4.63vw, 70px); --feat-gap-eyebrow: clamp(10px, 1.06vw, 16px); --feat-gap-rule: clamp(20px, 1.98vw, 30px); --feat-gap-body: clamp(24px, 2.65vw, 40px); /* 比較カード下端 y8779 → 色パネル上端 y8991（Figma 686:27315 / 686:27340） */ --feat-gap-color: clamp(96px, 14.02vw, 212px); --feat-inset: clamp(0px, 1.52vw, 23px); padding-block: 0 clamp(140px, 16.67vw, 252px); } /* Figma 686:27180 は「ラッパーに layer blur 5px + 画像に opacity 20%（object-bottom）」。 実装は素の画像を不透明・ぼかし無しで敷いていたため、色パネル背後のダイヤモンドが 強く出すぎていた。クライアント指示5「ぼかし＆透過」に対応。 画像も差し替える。旧 section-bottom-bg.webp は download_assets の rawImages（=画像調整前）で、 Figma のノード実描画より約2.1倍明るい。ノード 686:27178 を1:1で書き出して平均色を照合した結果: Figma ノード実描画 平均 RGB (6.9, 7.0, 7.9) / 最大 46 旧 raw 画像 + opacity 20% 平均 RGB 約 14.8（明るすぎ） 新 graded 画像 + opacity 20% 平均 RGB 約 8.0（一致） 新 section-bottom-bg-graded.webp は get_design_context のアセット（=画像調整後）から作成。 alpha に 20% が焼かれているが RGB は非乗算なので、alpha を落として CSS 側で opacity を持つ。 ブラーは要素の外側から滲むので、上下左右を 20px（≒ blur 5px の可視範囲）広げてから .feat の overflow: clip で切り、縁に明暗の帯が出ないようにする。 上端はマスクでグラデーション状に消す。クライアント指摘「後ろの画像が切れてしまってる感じ → グラデーションで消えていく感じに」に対応。 - Figma 763:116 の実描画は写真上端から 19px が #030303 のままで、そこから約 20px かけて 平均 3.0 → 6.2 へ立ち上がる。つまりデザイン側でも上端は黒へ溶けている。 - 実装の素材（section-bottom-bg-graded.webp）は最上行の平均が 21.8 / 最大 218 と明るく、 さらに background-size: cover のトリミング位置がビューポート幅で変わるため、 幅によっては明るい画素が上端に来て直線的な切れ目に見える。マスクなら素材や幅に依らず 必ずグラデーションで消える。 - opacity のグラデーションではなく mask を使う。下地の黒（Figma 763:115 Rectangle 113 ＝ .feat の背景）まで一緒に薄くなってしまい、セクション背景に穴が空くため。 - mask-repeat: no-repeat は必須。既定の repeat だと要素の外側（＝ blur が滲み出す上 20px）を 「1つ上のタイルの不透明な下端」が覆ってしまい、上端にぼんやりした光の帯が残る。 減衰カーブは Figma の行平均輝度に合わせて決めた（検算は下表 / W1512・行平均RGB）: rel +20 +40 +60 +80 +100 +140 Figma 3.00 6.01 6.24 6.58 7.52 6.41 実装 3.88 4.61 5.30 6.30 6.17 5.94 ← 差は最大 1.4 階調 */ .feat__deco { display: block; position: absolute; right: -20px; bottom: -20px; left: -20px; z-index: 0; height: calc(clamp(560px, 69.4vw, 1049px) + 20px); background: url("assets/figma/features/section-bottom-bg-graded.webp") center bottom / cover no-repeat; opacity: 0.2; /* stylelint-disable-next-line property-no-vendor-prefix -- 理由: Chrome 119 以前 / Safari 15.3 以前は mask-image 無印が未対応で、外すとマスクが効かず上端が直線で切れる。 解除予定: 対応ブラウザを Chrome 120+ / Safari 15.4+ に引き上げた時点で削除。 出典: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image#browser_compatibility (2026-07-31 取得) */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 55%) 6%, #000 14%); mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 55%) 6%, #000 14%); /* stylelint-disable-next-line property-no-vendor-prefix -- 理由: 上の -webkit-mask-image と対。 接頭辞付きマスクは接頭辞付きの repeat でしか制御できない。解除条件も同上。 */ -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; filter: blur(5px); pointer-events: none; } .feat-br-pc { display: inline; } .feat-br-sp, .feat-sp-only { display: none; } /* リード */ .feat-lead { --feat-lead-leading: clamp(63px, 6.34921vw, 96px); margin-inline: 0; padding-inline: 0; letter-spacing: 0.09em; } .feat-lead__q { font-size: clamp(18px, 1.852vw, 28px); line-height: var(--feat-lead-leading); letter-spacing: 0.09em; } /* PC: Figma 763:336 は上下段とも leading 96px。 単位付きにすることで 60px・45px の inline span も同じ行送りを継承する。 margin-top は Figma の flex-col（mb-0）どおり 0 のまま。 */ .feat-lead__a { margin-top: 0; font-size: clamp(23px, 2.315vw, 35px); line-height: var(--feat-lead-leading); } .feat-lead__cert, .feat-lead__proof { font-size: clamp(38px, 3.968vw, 60px); } .feat-lead__cert--sm { font-size: clamp(29px, 2.976vw, 45px); } /* ピン写真 */ .feat-hero { width: min(870px, 57.57vw); margin: clamp(80px, 9.46vw, 143px) auto 0; } /* PC 686:27399 = x478.55 y4382 w671.79 h108.58 / blur 32px。 写真 686:27398 = x321 y4453.08 w870.5 h417.92 を基準にした比率へ変換する。 写真幅が min(870px, 57.57vw) なので、ブラー半径も 32 / 870.5 を掛けて同率で縮める。 */ .feat-hero__frame { --feat-fade-left: 18.10%; /* (478.55 − 321) / 870.5 */ --feat-fade-width: 77.17%; /* 671.79 / 870.5 */ --feat-fade-top: -17.01%; /* (4382 − 4453.08) / 417.92 */ --feat-fade-height: 25.98%; /* 108.58 / 417.92 */ --feat-fade-blur: min(32px, 2.116vw); } /* 共通パーツ */ .feat-item--full { margin-top: clamp(20px, 1.98vw, 30px); } .feat-eyebrow { font-size: clamp(16px, 1.653vw, 25px); } .feat-item__title { font-size: clamp(24px, 2.513vw, 38px); line-height: 1.54; } .feat-item__title--wide { letter-spacing: 0.15em; } .feat-rule { height: 6px; } .feat-item__body { font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; } .feat-item__body > p + p { margin-top: 2.11em; } /* PC は split の位置決めを grid が担うので内側インデントは付けない */ .feat-item--split > .feat-eyebrow, .feat-item--split > .feat-item__title, .feat-item--split > .feat-item__body { padding-inline: 0; } .feat-item__media { width: auto; margin-top: 0; margin-inline: 0; } /* 2カラム構成（DOM順: eyebrow / title / rule / media / body） */ .feat-item--split { display: grid; align-items: start; } .feat-item--media-left { grid-template-columns: minmax(0, 511fr) minmax(0, 629fr); column-gap: clamp(32px, 6.55vw, 99px); } .feat-item--media-right { grid-template-columns: minmax(0, 679fr) minmax(0, 509fr); column-gap: clamp(24px, 3.37vw, 51px); } .feat-item--media-left > .feat-eyebrow, .feat-item--media-left > .feat-item__title, .feat-item--media-left > .feat-rule, .feat-item--media-left > .feat-item__body { grid-column: 2; } .feat-item--media-left > .feat-item__media { grid-column: 1; grid-row: 1 / 5; } .feat-item--media-right > .feat-eyebrow, .feat-item--media-right > .feat-item__title, .feat-item--media-right > .feat-rule, .feat-item--media-right > .feat-item__body { grid-column: 1; } .feat-item--media-right > .feat-item__media { grid-column: 2; grid-row: 1 / 5; } .feat-item--split > .feat-eyebrow { grid-row: 1; } .feat-item--split > .feat-item__title { grid-row: 2; } .feat-item--split > .feat-rule { grid-row: 3; } .feat-item--split > .feat-item__body { grid-row: 4; } .feat-item--04 > .feat-item__media { margin-top: clamp(14px, 1.79vw, 27px); } .feat-item__frame--appraisal { aspect-ratio: 511 / 470; } .feat-item__img--appraisal { top: 0; left: -14.52%; width: 137.95%; height: 100%; object-fit: fill; } /* GIA G.G. 解説 */ .feat-gia { grid-template-areas: "seal title" "seal text"; align-items: center; gap: clamp(8px, 0.86vw, 13px) clamp(20px, 2.25vw, 34px); width: min(100%, 1041px); margin-inline: auto; padding: clamp(38px, 4.1vw, 63px) clamp(28px, 3.31vw, 50px) clamp(38px, 4.1vw, 63px) clamp(24px, 2.65vw, 40px); } .feat-gia::before { inset: clamp(5px, 0.53vw, 8px) clamp(4px, 0.46vw, 7px); } .feat-gia__seal { align-self: center; width: clamp(96px, 9.92vw, 150px); } .feat-gia__title { align-self: end; font-size: clamp(17px, 1.653vw, 25px); line-height: 1.48; letter-spacing: 0.15em; } .feat-gia__text { align-self: start; font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; } /* 安心の根拠パネル */ .feat-trust { padding: clamp(8px, 0.86vw, 13px); } .feat-trust__sheet { grid-template-columns: minmax(0, 1fr) clamp(190px, 34.9%, 356px); column-gap: clamp(20px, 2.31vw, 35px); padding: clamp(56px, 7.21vw, 109px) clamp(24px, 5.23vw, 79px) clamp(56px, 6.55vw, 99px); } .feat-trust__title { grid-row: 1; grid-column: 1 / -1; font-size: clamp(20px, 1.984vw, 30px); line-height: 1.95; text-align: left; } .feat-trust__lead { grid-row: 2; grid-column: 1 / -1; max-width: 785px; margin-top: clamp(20px, 2.65vw, 40px); } .feat-proof { grid-row: 3; grid-column: 1; align-self: center; flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(16px, 1.65vw, 25px); max-width: 629px; margin-top: clamp(20px, 2.12vw, 32px); padding: clamp(20px, 2.58vw, 39px) clamp(20px, 2.65vw, 40px) clamp(20px, 2.58vw, 39px) clamp(18px, 2.31vw, 35px); } .feat-trust__photo { grid-row: 3; grid-column: 2; align-self: center; margin: 0; } .feat-trust__photo-frame { aspect-ratio: 356 / 298; } .feat-trust__photo-img { top: -43.59%; left: -68.18%; width: 235.11%; height: 186.99%; } .feat-trust__close { grid-row: 4; grid-column: 1 / -1; max-width: 785px; margin-top: clamp(20px, 2.31vw, 35px); } .feat-trust__lead, .feat-trust__close { font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; } .feat-proof__seal { width: clamp(72px, 7.28vw, 110px); } .feat-proof__list { font-size: clamp(15px, 1.323vw, 20px); line-height: 1.6; letter-spacing: 0.1em; } .feat-proof__list > li { padding-left: 12px; } .feat-proof__list > * + * { margin-top: clamp(6px, 0.86vw, 13px); } /* 海外オークション */ .feat-auction { width: min(100%, 1047px); margin: clamp(40px, 3.97vw, 60px) auto 0; } .feat-auction__inner { margin: clamp(5px, 0.53vw, 8px) clamp(4px, 0.4vw, 6px); padding: clamp(32px, 4.17vw, 63px) clamp(20px, 3.31vw, 50px) clamp(36px, 4.63vw, 70px); } .feat-auction__logo { width: clamp(120px, 11.31vw, 171px); } .feat-auction__title { margin-top: clamp(16px, 2.58vw, 39px); font-size: clamp(18px, 1.786vw, 27px); line-height: 1.7; text-align: center; } .feat-auction__text { margin-top: clamp(14px, 1.26vw, 19px); font-size: clamp(14px, 1.19vw, 18px); line-height: 1.94; text-align: center; letter-spacing: 0.1em; } /* 比較 */ .feat-compare { grid-template-columns: minmax(0, 650fr) minmax(0, 561fr); align-items: center; column-gap: clamp(16px, 1.79vw, 27px); margin-top: clamp(48px, 5.29vw, 80px); } .feat-compare__card { flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(16px, 1.85vw, 28px); min-height: clamp(140px, 13.49vw, 204px); padding: clamp(20px, 2.12vw, 32px) clamp(14px, 1.65vw, 25px) clamp(20px, 2.12vw, 32px) clamp(16px, 2.05vw, 31px); } .feat-compare__card--other { min-height: clamp(120px, 11.77vw, 178px); } .feat-compare__brand img { width: clamp(140px, 14.15vw, 214px); } .feat-compare__label { flex: 0 0 auto; font-size: clamp(14px, 1.19vw, 18px); } .feat-compare__list { font-size: clamp(14px, 1.19vw, 18px); letter-spacing: 0.06em; } .feat-compare__list > li { padding-left: clamp(12px, 1.19vw, 18px); } .feat-compare__list > li::before { top: 0.78em; width: 8px; height: 8px; } /* 色で分かる、宝石の価値 */ .feat-color { padding: clamp(9px, 0.93vw, 14px); border: 1px solid var(--c-white); } .feat-color__sheet { padding: clamp(48px, 5.36vw, 81px) clamp(20px, 2.45vw, 37px) clamp(64px, 6.94vw, 105px); } .feat-color__title { font-size: clamp(20px, 1.984vw, 30px); line-height: 2.2; } .feat-color__lead { margin-top: clamp(12px, 1.26vw, 19px); padding-inline: 0; font-size: clamp(14px, 1.19vw, 18px); line-height: 1.94; text-align: center; letter-spacing: 0.1em; } .feat-stones-wrap { width: min(100%, 975px); margin-inline: auto; padding-inline: 0; } .feat-stones { gap: clamp(24px, 4.03vw, 61px); padding-bottom: 0; overflow: visible; } .feat-stones > .feat-stone { flex: 1 1 0; } /* PC（686:27340）は3カラム並列でシェブロンを持たないため、前後ボタンを出さない。 */ .feat-stones-nav { display: none; } .feat-stone__name { font-size: clamp(21px, 1.984vw, 30px); } .feat-stone__ja { margin-top: clamp(4px, 0.53vw, 8px); font-size: clamp(11px, 0.86vw, 13px); } .feat-stone__row { margin-top: clamp(16px, 1.72vw, 26px); } .feat-stone__arrow { margin-top: clamp(16px, 1.65vw, 25px); } .feat-stone__scale { font-size: clamp(11px, 0.86vw, 13px); } .feat-stone__desc { margin-top: clamp(18px, 2.12vw, 32px); font-size: clamp(13px, 1.058vw, 16px); } .feat-color__band { max-width: 827px; margin-top: clamp(20px, 1.98vw, 30px); padding: clamp(12px, 1.06vw, 16px) 16px; font-size: clamp(16px, 1.653vw, 25px); line-height: 1.6; letter-spacing: 0.1em; } } /* -------------------------------------------------- 761〜1300px の微調整 */ @media (min-width: 761px) and (max-width: 1300px) { .feat-trust__sheet { grid-template-columns: minmax(0, 1fr) clamp(190px, 32%, 320px); } .feat-item__body, .feat-trust__lead, .feat-trust__close, .feat-gia__text, .feat-auction__text, .feat-color__lead { letter-spacing: 0.06em; } } /* ===== 06-compare.css ==================================================== */ /* ========================================================================== 06-compare.css — 比較（Why Aglia / アグリアと他の買取店の違い） Figma: PC 686:27401・686:27405 (W1512) / SP 585:9002・670:18983 (W390) PC値は 1512 基準、SP値は 390 基準。表は固定幅 + 横スクロール。 ========================================================================== */ .compare { /* Figma 585:9002 は特徴セクションへ 38px 食い込む（弧の上は特徴の背景） */ --arc-overlap: clamp(32px, 9.74vw, 42px); --arc-h: clamp(24px, 7.31vw, 40px); position: relative; isolation: isolate; overflow: hidden; /* 大理石は Figma 686:27402（Intersect / 不透明度 100%）の“画像調整後”の色。 rawImages（調整前）は平均 #EEF2F7 と暗く青いので使わない。詳細は CLAUDE.md。 */ background-color: #fafbfc; background-image: url("assets/figma/compare/marble.webp"); background-repeat: no-repeat; background-position: center center; background-size: cover; /* 表の色（Figma 686:27412 ほか） */ --ct-green-line: #10543f; --ct-head-green: linear-gradient(90deg, #073827 0%, #145e48 49.52%, #073f2e 100%); --ct-head-other: #968c81; --ct-label-bg: #ebe8e4; --ct-aglia-bg: #ffffff; --ct-lead-bg: linear-gradient(90deg, rgba(227, 206, 184, 0.55) 0%, rgba(255, 247, 239, 0.55) 49.04%, rgba(227, 206, 184, 0.55) 95.67%); --ct-other-bg: #f9f8f7; --ct-cell-shadow: 0 2px 3px rgba(62, 62, 62, 0.15); } /* 上端の金曲線 + 白キャップ（Figma 686:27472 / 585:9062） */ .compare__cap { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 2; display: block; pointer-events: none; background-image: url("assets/figma/compare/section-top-curve.svg"); background-repeat: no-repeat; background-position: center top; background-size: 100% 100%; } .compare__inner { position: relative; z-index: 1; } /* .sec-head は 00-shared.css（Agent 1）で定義。字送りのみ上書き（686:27467）。 */ .compare .sec-head__ja { letter-spacing: 0.1em; /* 36px に対して 3.6px */ } .compare__br-sp { display: none; } /* ------------------------------------------------------- 横スクロールヒント */ /* Figma 599:9748「スクロール可能」。表の中央に重なる 145×89 の暗幕バッジ。 Figma上は暗幕だけが opacity 60% で、矢印・手・文字は不透明なので、 opacity ではなく背景色のアルファで再現する。 */ .compare__hint { position: absolute; z-index: 3; inset-block-start: 50%; inset-inline-start: 50%; display: none; flex-direction: column; align-items: center; width: 145px; height: 89px; padding-block-start: 16px; background: rgb(3 3 3 / 60%); transform: translate(-50%, -50%); pointer-events: none; transition: opacity 260ms var(--ease); } /* 一度でも横スクロールされたらヒントの役目は終わり */ .compare__scroller:not(.is-scroll-start) + .compare__hint { opacity: 0; } @media (prefers-reduced-motion: reduce) { .compare__hint { transition: none; } } /* 双方向矢印（599:9750）: box内 x56 / y16 / w33 */ .compare__hint-arrow { width: 33px; height: auto; } /* 手のアイコン（image 77 / 599:9752）: box内 y25 / 27×31 */ .compare__hint-hand { width: 27px; height: 31px; margin-block-start: 2px; object-fit: contain; } /* テキスト（599:9751）: 12px / lh17px / tracking1.2px / 中心 y70.5 */ .compare__hint-text { margin-block-start: 6px; color: var(--c-white); font-size: 12px; line-height: 17px; letter-spacing: 1.2px; text-align: center; } /* --------------------------------------------------------------- 表の器 */ .compare__shell { position: relative; } .compare__scroller { /* .hscroll のスナップは1枚組の表と相性が悪いので無効化する */ scroll-snap-type: none; justify-content: safe center; padding-block-end: 4px; } .compare__scroller > * { scroll-snap-align: none; } .compare__table-wrap { position: relative; flex: 0 0 auto; } /* 右端フェード（スクロール可能であることのアフォーダンス） */ .compare__shell::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 2; width: 36px; pointer-events: none; background-image: linear-gradient(to right, rgba(250, 250, 251, 0), rgba(250, 250, 251, 0.92)); } /* アグリア列を囲む緑の枠（Figma 686:27433 / 670:19009） */ .compare__aglia-frame { position: absolute; inset-block: 0; z-index: 1; display: block; pointer-events: none; border: 3px solid var(--ct-green-line); } /* ----------------------------------------------------------------- 表本体 */ .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-family: var(--font-jp); color: var(--c-ink); } .compare-table th, .compare-table td { background-clip: padding-box; text-align: center; vertical-align: middle; font-weight: 500; } /* 列間の余白は透明ボーダーで作る（background-clip: padding-box と併用） */ .compare-table__corner, .compare-table__head--aglia, .compare-table__label, .compare-table__aglia { border-inline-end: var(--ct-gap-x) solid transparent; } /* 行間の余白 */ .compare-table tbody > tr:not(:last-child) > * { border-block-end: var(--ct-gap-y) solid transparent; } .compare-table__corner { background: transparent; box-shadow: none; } /* ヘッダ行は Figma（686:27412/686:27413・670:18984/670:18989）で列幅いっぱい。 .compare-table th の padding-inline / vertical-align より詳細度を上げないと 「他の買取店」のバーが左右10px細くなり、下端揃えにもならない。 */ .compare-table .compare-table__head { padding: 0; vertical-align: bottom; } .compare-table .compare-table__head--aglia { background-image: var(--ct-head-green); vertical-align: middle; } .compare-table__logo { width: 132px; max-width: 62%; height: auto; margin-inline: auto; } .compare-table__head--other { background: transparent; } .compare-table__head-bar { display: flex; align-items: center; justify-content: center; background: var(--ct-head-other); box-shadow: var(--ct-cell-shadow); color: var(--c-white); font-weight: 600; letter-spacing: 0.05em; } .compare-table__label { background: var(--ct-label-bg); box-shadow: var(--ct-cell-shadow); letter-spacing: 0.15em; } .compare-table__aglia { background: var(--ct-aglia-bg); box-shadow: var(--ct-cell-shadow); letter-spacing: 0.1em; } .compare-table__row--lead .compare-table__aglia { background-image: var(--ct-lead-bg); } .compare-table__aglia > strong { color: var(--c-bronze); font-weight: 600; } /* 「世界基準」は PC（686:27437）だとゴールド強調に含まれるが SP（670:19013）では通常表記。SPだけ の見た目を戻す。 */ @media (max-width: 760px) { .compare-table__em-pc { color: var(--c-ink); font-weight: 500; } } .compare-table__other { background: var(--ct-other-bg); box-shadow: var(--ct-cell-shadow); letter-spacing: 0.1em; } /* ------------------------------------------------------------- 締めの一文 */ .compare__statement { width: 100%; border: 1px solid var(--c-ink); text-align: center; } .compare__statement-inner { display: block; border: 1px solid #635f5f; font-family: var(--font-jp); font-weight: 500; color: var(--c-ink); } .compare__statement-inner > strong { color: var(--c-bronze); font-weight: 600; } /* ========================================================================== SP（Figma 585:9002 / 670:18983 — W390 基準） ========================================================================== */ @media (max-width: 760px) { .compare { /* 寸法基準幅（760px 付近で余白が肥大しないよう頭打ちにする） */ --wb: min(100vw, 500px); /* 大理石 y10839–12021.5（h1182.5）／見出しグループ上端 y10930 → rel 91px */ padding-block: calc(var(--wb) * 0.2333) calc(var(--wb) * 0.2654); --ct-gap-x: 0px; --ct-gap-y: 6px; --ct-row-h: 80px; --ct-lead-h: 98px; } .compare__cap { /* Figma 585:9062: w392 × h28.508 → 7.31% */ height: clamp(24px, 7.31vw, 40px); } .compare__br-sp { display: inline; } .compare .sec-head__ja { letter-spacing: 0.1em; /* 27px に対して 2.7px */ } /* SPでは .compare__shell を右へフルブリードさせているぶん器の中心が右へずれる。 Figma 599:9748 はビューポート中央（x=195 / W390）なので、その差分を戻す。 */ .compare__hint { display: flex; transform: translate(calc(-50% - var(--gutter) / 2), -50%); } /* Figma 585:9002 は表の右端が画面端で切れる（= 横スクロールの手掛かり）ので スクロール領域だけ右側をフルブリードにする。 */ .compare__shell { margin-block-start: calc(var(--wb) * 0.0205); margin-inline-end: calc(var(--gutter) * -1); } /* 表全体 561px（ラベル143 + アグリア220 + 他店198）→ 390px幅では横スクロール */ .compare__table-wrap { width: 561px; min-width: 561px; } .compare-table__col--label { width: 25.4902%; } .compare-table__col--aglia { width: 39.2157%; } .compare-table__col--other { width: 35.2941%; } .compare__aglia-frame { inset-inline-start: 25.4902%; width: 39.2157%; } .compare-table th, .compare-table td { padding-inline: 6px; font-size: 14px; line-height: 1.4286; /* 20px / 14px */ } .compare-table__head { height: 75px; } .compare-table__head-bar { height: 43px; font-size: 16px; } .compare-table__logo { width: 109px; } .compare-table tbody > tr > * { height: var(--ct-row-h); } .compare-table tbody > tr:not(:last-child) > * { height: calc(var(--ct-row-h) + var(--ct-gap-y)); } /* 「ご提案」行だけ Figma（670:18997/670:19011）で 98px と高い。 詳細度が tbody 行の一般規則を下回ると 80px に潰れるのでセレクタを合わせる。 */ .compare-table tbody > tr.compare-table__row--lead > * { height: calc(var(--ct-lead-h) + var(--ct-gap-y)); } /* ラベル列のテキストボックスは Figma（670:19028 ほか）で列幅いっぱいの 143px。 左右パディングを残すと「ルビー・サファイア」が収まらず3行に割れる。 */ .compare-table .compare-table__label { padding-inline: 0; letter-spacing: 0.05em; } .compare-table__aglia, .compare-table__other { letter-spacing: 0.05em; } .compare-table__aglia > strong { font-size: 14px; } /* 締めの一文: 外 355×92 / 内 350×87 */ .compare__statement { margin-block-start: calc(var(--wb) * 0.128); padding: 2px; } .compare__statement-inner { padding-block: 18px; font-size: 16px; line-height: 1.5625; /* 25px / 16px */ letter-spacing: 0.1em; } .compare__statement-inner > strong { font-size: 18px; } } /* ========================================================================== PC（Figma 686:27401 / 686:27405 — W1512 基準） ========================================================================== */ @media (min-width: 761px) { .compare { /* 大理石 y10391–11698（h1307）／見出しグループ上端 y10586 → rel 195px */ padding-block: clamp(96px, 12.9vw, 195px) clamp(72px, 8.53vw, 129px); --ct-gap-x: 5px; --ct-gap-y: 5px; --ct-row-h: 73px; --ct-lead-h: 89px; } .compare { /* Figma 686:27401 は特徴セクションへ 86px 食い込む（10391 vs 10477） */ --arc-overlap: clamp(43px, 5.69vw, 86px); --arc-h: clamp(40px, 5.22vw, 79px); } .compare__cap { /* Figma 686:27472: w1516 × h79 → 5.22%。金ストロークを残すため 1px 下げる */ inset-block-start: 1px; height: var(--arc-h); } .compare__shell { margin-block-start: clamp(24px, 3.24vw, 49px); } /* 表は Figma 実寸 1165px。1165px 未満のビューポートでは横スクロールする。 */ .compare__table-wrap { width: 1165px; max-width: 100%; min-width: 900px; } .compare-table__col--label { width: 23.2618%; } .compare-table__col--aglia { width: 43.176%; } .compare-table__col--other { width: 33.5622%; } .compare__aglia-frame { inset-inline-start: 23.2618%; width: 42.7468%; } .compare-table th, .compare-table td { padding-inline: 10px; font-size: 18px; line-height: 1.4444; /* 26px / 18px */ } .compare-table__head { height: 88px; } .compare-table__head-bar { height: 60px; font-size: 20px; } .compare-table tbody > tr > * { height: var(--ct-row-h); } .compare-table tbody > tr:not(:last-child) > * { height: calc(var(--ct-row-h) + var(--ct-gap-y)); } /* 「ご提案」行だけ Figma（686:27421/686:27435）で 89px と高い。 詳細度が tbody 行の一般規則を下回ると 73px に潰れるのでセレクタを合わせる。 */ .compare-table tbody > tr.compare-table__row--lead > * { height: calc(var(--ct-lead-h) + var(--ct-gap-y)); } .compare-table__aglia > strong { font-size: 20px; } .compare-table__row--lead .compare-table__aglia > strong { font-size: 21px; letter-spacing: 0.1em; } /* 締めの一文: 外 869×85 / 内 863×79 */ .compare__statement { max-width: 869px; margin: clamp(28px, 3.97vw, 60px) auto 0; padding: 2px; } .compare__statement-inner { padding-block: clamp(18px, 1.72vw, 26px); font-size: clamp(17px, 1.46vw, 22px); line-height: 1.5; letter-spacing: 0.05em; } .compare__statement-inner > strong { font-size: clamp(19px, 1.65vw, 25px); } /* PCで表が収まっている場合は右端フェードを出さない */ .compare__shell::after { display: none; } } /* 表（最小900px）がコンテナに収まらない幅ではPCでもスクロールするので、 ヒントと右端フェードを出す。996px 以上はコンテナ幅 >= 900px で収まる。 */ @media (min-width: 761px) and (max-width: 995px) { .compare__hint { display: flex; } .compare__shell::after { display: block; } } /* ===== 07-staff.css ====================================================== */ /* ========================================================================== 07-staff.css — スタッフ紹介 Figma PC: 686:27473（W1512 基準） / SP: 585:9085（W390 基準） ========================================================================== */ /* PC / SP で改行位置が異なる箇所の制御（Figma の折返しに合わせる） */ .staff-br--sp { display: none; } @media (max-width: 760px) { .staff-br--pc { display: none; } .staff-br--sp { display: inline; } } .staff { /* 弧の深さ。Figma 686:27483「背景」の上端 = 両端が高く中央が最も深い弧。 写真 686:27474（下端 y12993）に対して背景が y12931 から始まるので深さ 62px @W1512。 */ --staff-curve: min(4.1vw, 62px); /* 弧の中央に載る円形メダル。686:27473 のレンダリング実測で φ128（旧実装の 96 は過小）。 */ --staff-crest: min(8.47vw, 128px); /* .staff-body 上端 → メダル中心。実測 67px（弧の最深 62px より 5px 下）。 */ --staff-crest-y: min(4.43vw, 67px); --staff-crest-icon: 50.1%; /* メダル径に対する紋章の高さ。686:27491 は h64.19 → 64.19/128 */ --staff-crest-shift: -0.052; /* 紋章はメダル中心より 6.6px 上（Figma 686:27491 の y から） */ position: relative; isolation: isolate; } /* ------------------------------------------------------------ オーナーの言葉 */ .staff-quote { position: relative; overflow: hidden; aspect-ratio: 1513 / 738; } .staff-quote__photo { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; /* Figma: 画像を右寄せでトリミング */ } .staff-quote__box { position: absolute; left: 13.8%; top: 38.9%; width: 46.3%; isolation: isolate; } /* Figma のレイヤーブラー（白 20% / blur 37）を疑似要素で再現 */ .staff-quote__box::before { content: ""; position: absolute; z-index: -1; left: -16%; right: 9.3%; top: -29%; bottom: -29%; background: rgba(255, 255, 255, 0.2); border-radius: 50px; filter: blur(clamp(16px, 2.45vw, 37px)); } .staff-quote__text { position: relative; margin: 0; font-weight: 600; font-size: clamp(15px, 2.05vw, 31px); line-height: 2.13; letter-spacing: 0.2em; } .staff-quote__text::before, .staff-quote__text::after { content: ""; position: absolute; width: clamp(9px, 1.06vw, 16px); aspect-ratio: 16 / 12; background: url("assets/figma/staff/staff-quote.svg") center / contain no-repeat; } .staff-quote__text::before { left: -3.6%; top: 0.28em; transform: scaleX(-1); } .staff-quote__text::after { right: 20.7%; top: 2.25em; } .staff-quote__by { display: flex; align-items: center; justify-content: flex-end; gap: clamp(6px, 0.73vw, 11px); padding-right: 20.7%; margin-top: clamp(2px, 0.53vw, 8px); font-weight: 500; font-size: clamp(10px, 0.79vw, 12px); letter-spacing: 0.1em; } .staff-quote__by::before { content: ""; width: clamp(40px, 7.6vw, 115px); height: 1px; background: var(--c-ink); flex: 0 0 auto; } /* ------------------------------------------------------------------ 本文土台 */ /* 大理石パネルの上端は「両端が高く中央が下がる」弧。 border-radius で作れるのは必ず逆向き（中央が持ち上がるドーム）なので、 00-shared.css の .section-arc と同じ考え方でマスクして弧の下側だけを残す。 弧の実測（686:27473 のレンダリングを画素走査）: 幅 1512 に対し最深 62px、 半径約 4640 の円弧。制御点 y を深さの 2 倍に置いた二次ベジェ（＝放物線）が 全域で 2px 以内に一致するので、それをマスクの形として使う。 viewBox が幅・深さの両方に比例するため PC / SP で同じ SVG を共用できる。 */ .staff-body { --staff-arc: url("data:image/svg+xml;charset=utf-8,"); position: relative; isolation: isolate; margin-top: calc(-1 * var(--staff-curve)); padding-block: clamp(96px, 12.83vw, 194px) clamp(72px, 9.33vw, 141px); } /* 背景だけを別レイヤーにする。マスクは子孫にも効くため、 弧より上へ張り出す .staff-crest を .staff-body 本体に付けたマスクで切らないようにする。 大理石は Figma 763:419「背景」→ 763:420「Intersect」の“画像調整後”の色。 rawImages（調整前）は平均 #EEF2F7 と暗く青いので使わない。詳細は CLAUDE.md。 （素材はお悩み／比較／事例／アクセス／固定ページと同一の AdobeStock_294759787。 Figma 側の fill は cover・横中央なので background も center / cover のままでよい。） */ .staff-body::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #fafbfc url("assets/figma/staff/staff-marble.webp") center / cover; /* 1枚目 = 弧の下側 / 2枚目 = 弧より下の全面。継ぎ目のヘアラインを避けて 1px 重ねる。 */ -webkit-mask-image: var(--staff-arc), linear-gradient(#000, #000); mask-image: var(--staff-arc), linear-gradient(#000, #000); -webkit-mask-size: 100% var(--staff-curve), 100% calc(100% - var(--staff-curve) + 1px); mask-size: 100% var(--staff-curve), 100% calc(100% - var(--staff-curve) + 1px); -webkit-mask-position: left top, left bottom; mask-position: left top, left bottom; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; } /* 弧の最深部に半分沈んだ円形メダル。上半分が写真側へ半円状に張り出す。 */ .staff-crest { position: absolute; left: 50%; top: var(--staff-crest-y); transform: translate(-50%, -50%); display: grid; place-items: center; width: var(--staff-crest); height: var(--staff-crest); border-radius: 50%; background: var(--c-white); } .staff-crest img { width: auto; height: var(--staff-crest-icon); translate: 0 calc(var(--staff-crest) * var(--staff-crest-shift)); } /* --------------------------------------------------------------- リード文言 */ .staff-lead { margin: 0; text-align: center; font-weight: 600; } /* letter-spacing は font-size を持つ要素側に置く。h2（既定 1.5em = 24px）へ 0.15em を書くと 3.6px に解決され、Figma 686:27496 の 4.65px より詰まる。 */ .staff-lead__hl, .staff-lead__sub { display: block; font-size: clamp(19px, 2.05vw, 31px); line-height: 2.03; letter-spacing: 0.15em; /* PC 31px → 4.65px */ } .staff-divider { position: relative; height: 5px; margin: clamp(14px, 1.98vw, 30px) 0 0; border: 0; background: linear-gradient(var(--c-gold), var(--c-gold)) top / 100% 1px no-repeat, linear-gradient(#e2e0db, #e2e0db) bottom / 100% 1px no-repeat; } .staff-desc { margin-top: clamp(20px, 2.38vw, 36px); text-align: center; font-weight: 500; font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; } /* ------------------------------------------------------------------ スタッフ */ .staff-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5.82vw, 88px); width: min(1058px, 100%); margin: clamp(48px, 6.35vw, 96px) auto 0; } .staff-list.reveal--stagger > *:nth-child(1) { --i: 0; } .staff-list.reveal--stagger > *:nth-child(2) { --i: 1; } .staff-member__figure { position: relative; margin: 0; aspect-ratio: 485 / 400; } .staff-member__photo { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } /* Figma 686:27513（Takahiro Shinkai）/ 686:27528（Chiaki Arai）は Snell Roundhand / font-size 50 / 行送り 66 / #CFB277。 00-shared.css の .sec-head__en と同じくアウトライン化 SVG を貼る（理由はそちらのコメント）。 font-size は SVG の高さを出すための em 基準として残す。 */ .staff-member__sign { position: absolute; right: 0; bottom: 5%; font-size: clamp(24px, 3.31vw, 50px); line-height: 1.32; pointer-events: none; /* Figma 686:27513 は箱の右端（x27577+325=27902）＝写真 Intersect の右端。 共通ルールの負マージンで箱基準に戻るので right: 0 のままで一致する。 */ --script-h: 1.32em; /* Figma: line-height 66px ÷ font-size 50px */ } .staff-member__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(8px, 1.26vw, 19px); margin: clamp(14px, 1.85vw, 28px) 0 0; padding-bottom: clamp(8px, 1.06vw, 16px); border-bottom: 1px solid var(--c-gold); font-weight: 500; } .staff-member__role { font-size: clamp(13px, 1.06vw, 16px); letter-spacing: 0.15em; line-height: 2; } .staff-member__person { font-weight: 600; font-size: clamp(18px, 1.65vw, 25px); letter-spacing: 0.15em; } .staff-member__catch { margin-top: clamp(12px, 1.65vw, 25px); font-weight: 600; font-size: clamp(17px, 1.52vw, 23px); line-height: 1.65; letter-spacing: 0.15em; } .staff-member__text { /* Figma のテキストボックスは写真列(485px)より少し広い 494px */ width: calc(100% + 1vw); margin-top: clamp(12px, 2.05vw, 31px); font-weight: 500; font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; } /* ====================================================================== SP */ @media (max-width: 760px) { /* SP は Figma 585:9085 の実測値。写真 585:9086（下端 y13052）に対し 背景 585:9095 が y13022 開始 = 深さ 30px @W390、メダルは φ66.7。 */ .staff { --staff-curve: min(7.7vw, 34px); --staff-crest: min(17.1vw, 75px); --staff-crest-y: min(11.62vw, 51px); --staff-crest-icon: 45%; /* 585:9098 は h30 → 30/66.7 */ --staff-crest-shift: -0.139; /* 紋章はメダル中心より 9.3px 上 */ } .staff-quote { aspect-ratio: 390 / 413; } .staff-quote__photo { object-position: 81% center; } .staff-quote__box { left: 12%; top: 70%; width: 82.6%; } .staff-quote__box::before { left: -19.6%; right: -11.5%; top: -31%; bottom: -58%; background: rgba(228, 228, 228, 0.86); border-radius: 20px; filter: blur(10px); } .staff-quote__text { font-size: clamp(15px, 4.62vw, 19px); line-height: 1.5; letter-spacing: 0.1em; font-weight: 700; } .staff-quote__text::before { left: -3.4%; top: 0.2em; width: clamp(7px, 2.05vw, 9px); } .staff-quote__text::after { right: 7.1%; top: 1.35em; width: clamp(7px, 2.05vw, 9px); } .staff-quote__by { justify-content: center; padding-right: 0; font-size: clamp(9px, 2.82vw, 11px); } .staff-quote__by::before { width: clamp(34px, 12.3vw, 48px); } .staff-body { padding-block: clamp(56px, 26.9vw, 105px) clamp(48px, 16vw, 62px); } .staff-lead__hl { font-size: clamp(19px, 5.9vw, 23px); } .staff-lead__sub { font-size: clamp(17px, 5.13vw, 20px); } .staff-lead__hl, .staff-lead__sub { line-height: 1.61; letter-spacing: 0.1em; } .staff-divider { height: 3px; margin-top: clamp(12px, 4.87vw, 19px); } .staff-desc { margin-top: clamp(28px, 13.6vw, 53px); font-size: clamp(13px, 3.9vw, 16px); line-height: 1.94; letter-spacing: 0.02em; } /* Figma SP は 1 文目のあとに 1 行の余白が入る */ .staff-desc p:nth-child(2) { margin-top: 1.94em; } .staff-list { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 15.4vw, 60px); margin-top: clamp(40px, 12.8vw, 50px); width: 100%; } .staff-member__figure { aspect-ratio: 305 / 253; } .staff-member__sign { font-size: clamp(24px, 7.7vw, 30px); } .staff-member__name { margin-top: clamp(10px, 3.6vw, 14px); gap: clamp(8px, 3vw, 12px); } .staff-member__role { font-size: clamp(12px, 3.6vw, 14px); letter-spacing: 0.1em; } .staff-member__person { font-size: clamp(17px, 5.13vw, 20px); } .staff-member__catch { margin-top: clamp(14px, 5.4vw, 21px); font-size: clamp(17px, 5.13vw, 20px); line-height: 1.6; letter-spacing: 0.05em; } .staff-member__text { width: 100%; margin-top: clamp(12px, 4.4vw, 17px); font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } } /* ===== 09-cases.css ====================================================== */ /* ========================================================================== 09-cases.css — 事例・買取実績 Figma PC: 686:27580（W1512 基準） / SP: 585:9167（W390 基準） ========================================================================== */ .cases { position: relative; padding-block: clamp(56px, 9.92vw, 150px) clamp(48px, 4.5vw, 68px); /* 大理石は Figma 686:27581（AdobeStock_294759787 3 / 不透明度 100%）の“画像調整後”の色。 rawImages（調整前）は平均 #EEF2F7 と暗く青いので使わない。詳細は CLAUDE.md。 */ background: #fafbfc url("assets/figma/cases/cases-marble-bg.webp") bottom center / cover no-repeat; } /* -------------------------------------------------------- 横スクロール領域 */ .case-scroller { gap: clamp(16px, 1.79vw, 27px); margin-top: clamp(28px, 3.97vw, 60px); padding-bottom: clamp(12px, 1.06vw, 16px); } .case-card { /* PC: 1216px コンテナに 3 枚 + gap 27px */ flex: 0 0 calc((100% - clamp(16px, 1.79vw, 27px) * 2) / 3); /* min-width: auto（既定）だと主石が2行になる1枚目だけ min-content まで広がり、 3枚合計がコンテナを超えて PC でも横スクロールが出る。 */ min-width: 0; display: flex; flex-direction: column; } .case-card__photo { width: 100%; aspect-ratio: 387 / 286; object-fit: cover; } .case-card__name { margin: clamp(18px, 2.25vw, 34px) 0 0; padding-inline: clamp(12px, 1.26vw, 19px); font-weight: 600; font-size: clamp(18px, 1.65vw, 25px); line-height: 1.44; letter-spacing: 0.16em; } .case-card__price { display: flex; align-items: center; gap: clamp(12px, 1.59vw, 24px); margin-top: clamp(12px, 1.39vw, 21px); padding-top: clamp(10px, 0.86vw, 13px); padding-inline: clamp(12px, 1.26vw, 19px); border-top: 1px solid var(--c-gold); } .case-card__mark { display: grid; place-items: center; flex: 0 0 auto; width: clamp(88px, 8.14vw, 123px); height: clamp(34px, 3.11vw, 47px); background: linear-gradient(90deg, var(--c-green-1) 0%, var(--c-green-2) 100%); } .case-card__mark img { width: 58.5%; height: auto; } .case-card__amount { font-weight: 700; font-size: clamp(20px, 2.12vw, 32px); line-height: 1.4; letter-spacing: 0.1em; color: #8f2a5c; /* background-clip 非対応時の代替色 */ background: linear-gradient(180deg, #cf6498 0%, #61002f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .case-card__amount { background: none; -webkit-text-fill-color: currentColor; } } /* ------------------------------------------------------------------ スペック */ .case-card__spec { margin-top: clamp(16px, 2.28vw, 34px); padding-inline: clamp(12px, 1.26vw, 19px); font-size: clamp(13px, 1.19vw, 18px); letter-spacing: 0.05em; } .case-card__row { display: grid; /* Figma: dt x167 / dd x271（差 104px = カード内寸の 29.8%） */ grid-template-columns: minmax(4em, 29.8%) minmax(0, 1fr); line-height: 1.45; } .case-card__row + .case-card__row { margin-top: clamp(6px, 0.53vw, 8px); } .case-card__row dt { font-weight: 500; } .case-card__row dd { margin: 0; } /* ====================================================================== SP */ @media (max-width: 760px) { .cases { padding-block: clamp(48px, 17.9vw, 70px); } .case-scroller { gap: clamp(14px, 4.6vw, 18px); margin-top: clamp(16px, 5.1vw, 20px); } .case-card { /* Figma SP はカード 1 枚表示。次カードを覗かせてスクロールを明示する */ flex: 0 0 clamp(236px, 66.2vw, 280px); } .case-card__name { margin-top: clamp(16px, 5.9vw, 23px); padding-inline: 0; font-size: clamp(17px, 5.13vw, 20px); letter-spacing: 0.1em; } .case-card__price { gap: clamp(10px, 3.6vw, 14px); margin-top: clamp(10px, 3.1vw, 12px); padding-top: clamp(8px, 2.6vw, 10px); padding-inline: 0; } .case-card__mark { width: clamp(80px, 24.7vw, 96px); height: clamp(30px, 9.4vw, 37px); } .case-card__amount { font-size: clamp(17px, 5.13vw, 20px); } .case-card__spec { margin-top: clamp(14px, 5.1vw, 20px); padding-inline: 0; font-size: clamp(13px, 3.85vw, 15px); letter-spacing: 0.04em; } .case-card__row { /* Figma SP: dt x67 / dd x146（差 79px = カード幅 258px の 30.6%） */ grid-template-columns: minmax(4.4em, 30.6%) minmax(0, 1fr); } .case-card__row + .case-card__row { margin-top: clamp(7px, 2.3vw, 9px); } } /* ===== 10-voices.css ===================================================== */ /* ========================================================================== 10-voices.css — お客様の声 Figma PC: 686:27666（W1512 基準） / SP: 585:9199（W390 基準） PC = カードを右方向へ横スクロール / SP = 左右ボタンで切り替え ========================================================================== */ .voices { position: relative; padding-block: clamp(48px, 4.96vw, 75px) clamp(56px, 6.81vw, 103px); background-color: var(--c-white); /* Figma 686:27667（AdobeStock_284735442 1）は不透明度 40% で白地に重なる。 画像は Figma の“画像調整後”を不透明度 100% のまま保存し、40% はここで掛ける。 以前は 40% 合成済みの書き出しを使っていたため二重に薄まっていた。 */ background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url("assets/figma/voices/voices-marble-bg.webp"); background-position: bottom center; background-size: cover; background-repeat: no-repeat; } /* ------------------------------------------------------------ インタビュー動画 */ .voice-video { width: min(1003px, 100%); margin: clamp(28px, 3.97vw, 60px) auto 0; box-shadow: 0 2px 34px rgba(0, 0, 0, 0.1); } .voice-video__frame { position: relative; aspect-ratio: 1003 / 562; overflow: hidden; background: var(--c-ink); } .voice-video__poster, .voice-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .voice-video__poster { object-fit: cover; } .voice-video__play { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; } /* YouTube 純正に寄せた再生ボタン（既定は半透明の黒、ホバーで YouTube レッド） */ .voice-video__play svg { width: clamp(54px, 6.5%, 68px); height: auto; filter: drop-shadow(0 2px 10px rgb(0 0 0 / 35%)); transition: transform 220ms var(--ease); } .voice-video__play-bg { fill: rgb(3 3 3 / 68%); transition: fill 220ms var(--ease); } .voice-video__play:hover svg, .voice-video__play:focus-visible svg { transform: scale(1.08); } .voice-video__play:hover .voice-video__play-bg, .voice-video__play:focus-visible .voice-video__play-bg { fill: #e00; } @media (prefers-reduced-motion: reduce) { .voice-video__play svg, .voice-video__play-bg { transition: none; } .voice-video__play:hover svg, .voice-video__play:focus-visible svg { transform: none; } } /* ---------------------------------------------------------------- カード領域 */ .voice-stage { position: relative; display: flex; flex-direction: column; margin-top: clamp(40px, 5.29vw, 80px); } .voice-scroller { order: 1; padding-bottom: clamp(10px, 0.79vw, 12px); } .voice-card { flex: 0 0 100%; background: rgba(255, 255, 255, 0.3); border: 2px solid var(--c-gold); box-shadow: 0 2px 34px rgba(0, 0, 0, 0.1); } /* 縦組みの「Customer's Voice」（Figma 670:18827 = Snell Roundhand Bold / font-size 25 / 縦書きテキストノード 61×203）。他の見出し英字と同じくアウトライン化 SVG を貼る。 Figma の書き出しが**回転済み**なので writing-mode / transform は掛けない。 font-size は SVG の高さを出すための em 基準として残す。 */ .voice-card__label { font-size: clamp(17px, 1.65vw, 25px); line-height: 1; /* 縦組みなので他と横に並べない。SVG は書き出しのインク箱のままで pad が無い。 */ --script-pad: 0; --script-box: 204; --script-h: 8.16em; /* viewBox 高さ 204 ÷ font-size 25。1 単位 = 1px でインクが Figma 実寸 203.62px */ } .voice-card__title { margin: 0; font-weight: 600; font-size: clamp(17px, 1.52vw, 23px); line-height: 1.52; letter-spacing: 0.1em; } /* Figma: 見出し下の金＋グレーの二重罫（Group 1321320196 / 1321320395） */ .voice-card__title::after { content: ""; display: block; height: 3px; margin-top: clamp(12px, 1.32vw, 20px); background: linear-gradient(var(--c-gold), var(--c-gold)) top / 100% 1px no-repeat, linear-gradient(#635f5f, #635f5f) bottom / 100% 1px no-repeat; } .voice-card__media { display: grid; place-items: center; overflow: hidden; /* aspect-ratio を content の min-content で押し広げない */ background: var(--c-white); aspect-ratio: 365 / 413; } .voice-card__media img { width: 100%; height: 100%; object-fit: contain; } .voice-card__text { font-weight: 500; font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; } /* Figma の段落間は「空行 1 行分」（PC 38px / SP 27px = ちょうど 1 行送り）。 em ではなく lh を使い、各ブレークポイントの line-height にそのまま追従させる。 */ .voice-card__text p + p { margin-top: 1lh; } /* -------------------------------------------------------------------- 操作 UI */ .voice-controls { order: 2; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3.3vw, 14px); margin-top: clamp(16px, 6.4vw, 25px); } .icon-button { display: grid; place-items: center; flex: 0 0 auto; width: clamp(34px, 10.5vw, 41px); height: clamp(34px, 10.5vw, 41px); border: 1.5px solid #a7a7a7; background: rgba(255, 255, 255, 0.4); color: #a7a7a7; transition: color 200ms var(--ease), border-color 200ms var(--ease); } .icon-button:hover, .icon-button:focus-visible { color: var(--c-gold); border-color: var(--c-gold); } .icon-button svg { width: 30%; height: auto; } .voice-count { font-family: var(--font-en); font-size: clamp(11px, 3.3vw, 13px); letter-spacing: 0.08em; color: var(--c-muted); white-space: nowrap; } .voice-count b { font-weight: 600; color: var(--c-ink); } /* ====================================================================== PC */ @media (min-width: 761px) { /* 4 枚目「相続の不安が解消できました。」（Figma 670:18864 / カード幅 1217px = PC 用）は PC にも存在する。以前「PC は 3 枚」と誤認して非表示にしていたが、2026-07-28 に クライアント指摘で確定したため PC でも表示する。 構成は PC / SP とも「TOP フレームに 1 枚目 + 別ボードに 2〜4 枚目」で共通。 */ /* SP 専用の改行（Figma 643:11383 の折返しに合わせる。PC 670:18845 は改行なし） */ .voice-br-sp { display: none; } .voice-card { display: grid; /* 縦ロゴ / 写真 / 余白 / 本文（Figma 1217px 幅の内訳を content-box 比で再現） */ grid-template-columns: 5.48% 32.78% 6.47% minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: clamp(24px, 2.98vw, 45px) 6.49% clamp(30px, 3.9vw, 59px) 2.05%; } .voice-card__label { grid-column: 1; grid-row: 1 / 3; align-self: end; justify-self: start; } .voice-card__media { grid-column: 2; grid-row: 1 / 3; align-self: start; } .voice-card__title { grid-column: 4; grid-row: 1; } .voice-card__text { grid-column: 4; grid-row: 2; margin-top: clamp(8px, 0.86vw, 13px); } /* 矢印はカードの外側左右に配置（Figma: x88 / x1392）。 余白が足りない幅では画面外へ出ないよう左右ガターの範囲に収める。 */ .voice-controls { --voice-arrow-w: clamp(28px, 2.18vw, 33px); position: absolute; inset-inline: calc(-1 * clamp(0px, (100vw - 100%) / 2 - var(--voice-arrow-w) - 12px, 60px)); top: 50%; transform: translateY(-50%); justify-content: space-between; gap: 0; margin-top: 0; pointer-events: none; } .voice-controls .icon-button { pointer-events: auto; width: var(--voice-arrow-w); height: clamp(40px, 3.11vw, 47px); } /* Figma PC にカウンター表示はないため読み上げ専用にする */ .voice-count { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } } /* ====================================================================== SP */ @media (max-width: 760px) { .voices { padding-block: clamp(36px, 12.6vw, 49px) clamp(56px, 26.7vw, 104px); } .voice-video { width: min(335px, 100%); margin-top: clamp(20px, 5.1vw, 20px); } .voice-stage { margin-top: clamp(36px, 15.4vw, 60px); } .voice-card { padding: clamp(24px, 10.3vw, 40px) clamp(16px, 5.4vw, 21px) clamp(28px, 11.5vw, 45px); } .voice-card__label { display: none; } .voice-card__title { font-size: clamp(16px, 4.62vw, 18px); line-height: 1.5; } .voice-card__title::after { height: 3px; margin-top: clamp(14px, 5.1vw, 20px); background: linear-gradient(var(--c-gold), var(--c-gold)) top / 100% 1px no-repeat, linear-gradient(#635f5f, #635f5f) bottom / 100% 1px no-repeat; } .voice-card__media { aspect-ratio: 274 / 128; margin-top: clamp(14px, 5.1vw, 20px); padding: clamp(6px, 2.6vw, 10px) clamp(16px, 6.4vw, 25px); } .voice-card__text { margin-top: clamp(16px, 6.4vw, 25px); font-size: clamp(13px, 3.6vw, 14px); line-height: 1.93; } } /* ===== 12-flow.css ======================================================= */ /* ========================================================================== 12-flow.css — ご相談の流れ / Flow Figma PC: 686:27714 (W1512) / SP: 585:9243 (W390) ========================================================================== */ .flow { position: relative; padding-block: clamp(56px, 6.7vw, 101px) clamp(64px, 7.4vw, 112px); background: #fdfcfa url("assets/figma/flow/bg-marble.webp") center bottom / cover no-repeat; } /* ------------------------------------------------------------ step list */ .flow-steps { width: min(1129px, 100%); margin: clamp(32px, 3.9vw, 60px) auto 0; } .flow-step { position: relative; } .flow-step + .flow-step { margin-top: clamp(28px, 2.9vw, 44px); } /* ステップ間の点線コネクター（Figma Line 313 / 2px dotted #CFB277） */ .flow-step + .flow-step::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: clamp(15px, 1.59vw, 24px); margin-bottom: clamp(6px, 0.66vw, 10px); translate: -50% 0; border-left: 2px dotted var(--c-gold); } /* --------------------------------------------------------- step number */ /* Figma 686:27773〜686:27777（PC）/ 585:9274 ほか（SP）は Snell Roundhand Bold・#CFB277 の「単色」・not-italic。 クライアント指摘「01〜05 の数字の右側が切れている」「Windowsだとフォントが大きく異なる」への対応で **アウトライン化した SVG 画像**に差し替えた（assets/figma/script/num-01〜05.svg）。 切れの原因は overflow でも幅不足でもなく、旧実装がゴールドグラデを background-clip: text で乗せていたこと。塗り面は要素のボーダーボックス （line-height 0.87 = 60.9px）止まりで、そこからはみ出した字形には色が乗らない。 筆記体のインクは実測 95px を超えるため右側と上下が欠けていた。 SVG は viewBox 内にインクが収まっているのでこの問題自体が起きない。 font-size / line-height は SVG の高さを出すための基準として残す。 */ .flow-step__num { position: absolute; z-index: 2; line-height: 0.87; /* Figma: 61px / 70px。位置合わせの基準ボックスなので値は維持する */ pointer-events: none; /* Figma 686:27773〜27777 は 5 つとも箱左端が x27360 でそろう。 共通ルールの負マージンで箱基準に戻るので、左寄せしても 5 つが一致する。 */ --script-box: 61; /* Figma の行送り */ --script-h: var(--flow-num-h); /* PC 0.871em / SP 1.22em（下のメディアクエリ） */ } /* 番号 SVG。高さ基準・幅 auto。リセットの img { max-width: 100% } は 絶対配置の shrink-to-fit と噛み合って幅を潰すので打ち消す。 --flow-num-h は Figma のテキストノード高 61px を font-size 比で持った値 （下のメディアクエリで PC 0.871em / SP 1.22em として定義）。 SVG は build/normalize-script-svg.py で **viewBox の高さ ＝ 61**（Figma の行送り）に 正規化済みなので、この値をそのまま使ってよい。 ※ Figma の書き出しはインク外接矩形でトリミングされ、01/02/03/05 は 39px 高なのに 04 だけ 45px（「4」がベースラインより 5.46px **上**へ伸びる）になる。 そのまま同じ height を与えると 04 だけ小さくなり、ベースラインもずれる。 */ /* ------------------------------------------------------------ step card */ .flow-step__card { position: relative; border: 1px solid var(--c-gold); } /* Figma: 6px 内側にもう一本の細線（#E2E0DB） */ .flow-step__card::after { content: ""; position: absolute; inset: 5px; border: 1px solid #e2e0db; pointer-events: none; } .flow-step__title { font-weight: 600; color: var(--c-ink); } .flow-step__text { color: var(--c-ink); } .flow-step__accent { font-style: normal; font-weight: 700; color: var(--c-bronze); } .flow-step__photo { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* -------------------------------------------------- 05: グリーンのカード */ .flow-step--final .flow-step__card { background: linear-gradient(90deg, #073928 0%, #145d47 50%, #08402f 100%); border-width: 2px; } .flow-step--final .flow-step__card::after { inset: 4px; border-color: #5f7c70; } .flow-step--final .flow-step__title, .flow-step--final .flow-step__text { color: var(--c-white); } /* =============================================================== SP */ @media (max-width: 760px) { .flow-steps { width: min(355px, 100%); } .flow-step + .flow-step { margin-top: clamp(24px, 9vw, 35px); } .flow-step__num { /* Figma SP 585:9274 ほかは **font-size 50 / 行送り 61**（PC は font-size 70 / 行送り 61）。 行送りは PC/SP で同じ 61 なので、**高さを 61px にしても SP のサイズにはならない**。 SVG は PC の font-size 70 で描かれているため、SP では 50/70 に縮める必要がある。 → font-size に Figma の 50px を入れ、--flow-num-h は PC と同じ 0.871em（= 61/70）のまま使う。 （以前は font-size に Figma の「箱幅 54」を入れ 61/50 = 1.22em としていたため、 SP の番号が Figma より約 39% 大きく描画され、03/04 でタイトルへ食い込んでいた。） */ --flow-num-h: 0.871em; /* Figma SP は右揃えではなく**中央基準**。01 の箱は 54px、02〜05 は 59px と幅が違うのに 中心は 5 つとも カード左端 +307.25px（幅 355 の 86.55%）でそろう。 right 揃えにすると 01 だけ 3.4px ずれるので、中心で置く。 */ top: clamp(28px, 9.6vw, 40px); left: 86.55%; right: auto; translate: -50% -50%; font-size: min(12.82vw, 50px); /* Figma SP は W390 で 50px */ } .flow-step__card { display: flex; flex-direction: column; padding: clamp(24px, 8.2vw, 32px) clamp(16px, 6.2vw, 24px) clamp(22px, 7.7vw, 30px); } /* 右上の番号を避ける（Figma: タイトル幅 253px / カード内寸 307px） */ .flow-step__title { max-width: calc(100% - 2.8em); font-size: clamp(17px, 5.1vw, 20px); line-height: 1.75; letter-spacing: 0.1em; } .flow-step__photo { order: -1; width: min(253px, 100%); height: auto; aspect-ratio: 253 / 153; margin: clamp(14px, 5.6vw, 22px) auto 0; } .flow-step__text { margin-top: clamp(14px, 5.6vw, 22px); font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } /* Figma SP 585:9284 は縦グラデーション（PC 686:27765 は横）。色も SP 側の値を使う */ .flow-step--final .flow-step__card { background: linear-gradient(180deg, #073b2a 0%, #125741 50%, #094130 100%); } } /* SP は「タイトル → 写真 → 本文」の順。order で写真を 2 番目へ */ @media (max-width: 760px) { .flow-step__body { display: contents; } .flow-step__title { order: -2; } .flow-step__text { order: 0; } } /* =============================================================== PC */ @media (min-width: 761px) { /* SP 専用の改行（Figma 585:9243 の折返しに合わせる） */ .flow-br-sp { display: none; } .flow-step__num { /* Figma 686:27773 = 75x61 / font-size 70px → 高さは font-size の 0.871 倍。 em で持つと font-size の clamp にそのまま追従する。 */ --flow-num-h: 0.871em; top: 0; left: clamp(-24px, -1.55vw, -12px); translate: 0 -50%; font-size: clamp(40px, 4.63vw, 70px); } .flow-step__card { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 16.73vw, 253px); align-items: stretch; column-gap: clamp(20px, 3.37vw, 51px); min-height: clamp(120px, 12.7vw, 192px); padding: clamp(14px, 1.32vw, 20px) clamp(14px, 1.42vw, 22px) clamp(14px, 1.32vw, 20px) clamp(28px, 4.13vw, 63px); } .flow-step__body { align-self: center; } /* 高さは行に合わせて伸縮（Figma もカード高に追従）。 aspect-ratio は「行の最小高 = 写真の基準高 153px」を作るためのもの。 */ .flow-step__photo { aspect-ratio: 253 / 153; } .flow-step__title { font-size: clamp(18px, 1.72vw, 26px); line-height: 1.35; letter-spacing: 0.15em; } .flow-step__text { margin-top: clamp(8px, 0.99vw, 15px); font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.15em; } } /* ===== 13-faq.css ======================================================== */ /* ========================================================================== 13-faq.css — よくある質問 / FAQ Figma PC: 686:27778（開いた状態 575:1937） / SP: 585:9311（開いた状態 643:11421） 罫線 #BCBCBC / 開閉アイコンは 16x8 のシェブロン（stroke 1px #030303） ========================================================================== */ .faq { /* 下パディング＝「最終行の罫線 → セクション下端」。 Figma SP 585:9311 は 124px（21612 − 21488）＝ 31.79vw（390基準）。 PC は下の min-width:761px で 237px（Figma 686:27778 / 20877 − 20640）へ上書きする。 下限 119px は 375px 相当（31.79vw = 119.2px）。 この余白の中に、次セクション（メッセージ）の金の弧が食い込む。 */ position: relative; padding-block: clamp(56px, 5.1vw, 77px) clamp(119px, 31.79vw, 124px); /* Figma 686:27779 はシルク写真（AdobeStock_284735442）を不透明度 40% で白地に重ねる。 **bg-silk.webp は 40% 合成済みの書き出し**（平均 252.42。生画像なら 247 前後）なので、 ここで白を重ねると 40% が二重に掛かって白飛びする。 以前は `linear-gradient(rgba(255,255,255,.6) …)` を重ねており、実測 253.97 と Figma のレンダ 251.87 より約 2 階調明るかった（お客様の声で直したのと同じ不具合）。 → 画像だけを不透明度 100% で敷く。実測 252.42 で Figma との差は 0.55 階調。 ※ 40% を戻して生画像に直す案は、合成で階調が潰れており段差が出るため採らない。 ※ お客様の声（10-voices.css）は**別クロップの生画像**を使っているので流用しない。 */ background: url("assets/figma/faq/bg-silk.webp") center bottom / cover no-repeat, var(--c-white); } .faq-lead { margin-top: clamp(12px, 1.6vw, 24px); text-align: center; color: var(--c-ink); } /* ----------------------------------------------------------- list / item */ .faq-list { width: min(1050px, 100%); margin: clamp(32px, 3.97vw, 60px) auto 0; border-top: 1px solid #bcbcbc; } .faq-item { border-bottom: 1px solid #bcbcbc; } /* ------------------------------------------------------------- question */ .faq-item__q { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; cursor: pointer; list-style: none; } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__mark { font-family: var(--font-jp); font-weight: 400; line-height: 1; color: var(--c-ink); text-align: center; } .faq-item__label { font-weight: 500; color: var(--c-ink); } /* 開閉アイコン（閉: ∨ / 開: ∧） */ .faq-item__icon { position: absolute; aspect-ratio: 1; translate: 0 -50%; transition: rotate 320ms var(--ease); } .faq-item__icon::before { content: ""; position: absolute; top: 38%; left: 50%; width: 70.7%; height: 70.7%; border-right: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); rotate: 45deg; translate: -50% -50%; } .faq-item[open] .faq-item__icon { rotate: 180deg; } /* --------------------------------------------------------------- answer */ .faq-item__a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; } .faq-item__body { color: var(--c-ink); } .faq-item__body p + p { margin-top: 1.4em; } .faq-item[open] .faq-item__a { animation: faq-reveal 380ms var(--ease) both; } @keyframes faq-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .faq-item__icon { transition: none; } .faq-item[open] .faq-item__a { animation: none; } } /* =============================================================== SP */ @media (max-width: 760px) { .faq-list { width: min(355px, 100%); } .faq-lead { font-size: clamp(14px, 4.1vw, 16px); line-height: 1.88; letter-spacing: 0.05em; } .faq-item__q { column-gap: clamp(9px, 3.4vw, 13px); padding: clamp(13px, 4.4vw, 17px) clamp(28px, 9vw, 35px) clamp(13px, 4.4vw, 17px) clamp(4px, 1.5vw, 6px); } .faq-item__mark { width: clamp(15px, 4.9vw, 19px); font-size: clamp(17px, 5.1vw, 20px); letter-spacing: 0.08em; } .faq-item__label { font-size: clamp(14px, 4.1vw, 16px); line-height: 1.56; letter-spacing: 0.05em; } .faq-item__icon { top: clamp(24px, 7.5vw, 30px); right: clamp(6px, 2.3vw, 9px); width: clamp(8px, 2.5vw, 10px); } .faq-item__a { column-gap: clamp(9px, 3.4vw, 13px); padding: 0 clamp(4px, 1.5vw, 6px) clamp(16px, 5.1vw, 20px) clamp(4px, 1.5vw, 6px); } .faq-item__body { font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } } /* =============================================================== PC */ @media (min-width: 761px) { /* 最終行の罫線 → セクション下端 = Figma 686:27778 の 237px（20877 − 20640）＝ 15.67vw。 このうち下側 127px（--arc-overlap）へメッセージの弧が重なるので、 罫線から弧の始まりまでは 110px の白い余白になる。 下限 124px は SP 側の最大値と同値。761px 境界で 「罫線→弧」の段差を 10px 以内に収めるため（--arc-overlap が 54px→64px と跳ねる分の相殺）。 */ .faq { padding-bottom: clamp(124px, 15.67vw, 237px); } /* SP 専用の改行（Figma 585:9311 の折返しに合わせる） */ .faq-br-sp { display: none; } .faq-lead { font-size: clamp(14px, 1.19vw, 18px); line-height: 1.78; letter-spacing: 0.15em; } .faq-item__q { column-gap: clamp(12px, 1.32vw, 20px); padding: clamp(16px, 1.72vw, 26px) clamp(46px, 6.88vw, 104px) clamp(13px, 1.45vw, 22px) clamp(24px, 6.88vw, 104px); } .faq-item__mark { width: clamp(17px, 1.52vw, 23px); font-size: clamp(17px, 1.65vw, 25px); letter-spacing: 0.08em; } .faq-item__label { font-size: clamp(14px, 1.19vw, 18px); line-height: 1.34; letter-spacing: 0.15em; } .faq-item__icon { top: clamp(26px, 2.58vw, 39px); right: clamp(24px, 6.88vw, 104px); width: clamp(12px, 1.06vw, 16px); } .faq-item__a { column-gap: clamp(12px, 1.32vw, 20px); padding: 0 clamp(46px, 6.88vw, 104px) clamp(14px, 1.32vw, 20px) clamp(24px, 6.88vw, 104px); } .faq-item__body { font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.1em; } } /* ===== 14-message.css ==================================================== */ /* ========================================================================== 14-message.css — オーナーメッセージ / Owner's Message Figma PC: 686:27831 (W1512) / SP: 585:9358 (W390) 背景 #030303 ＋ 上端の曲線（Rectangle 157 のパス）＋ ゴールドの曲線（Line 327） ========================================================================== */ .msg { /* Figma 585:9358 は FAQ へ 49px、PC 686:27831 は 127px 食い込む（弧の上はFAQの背景） */ --arc-overlap: clamp(41px, 12.56vw, 54px); --arc-h: clamp(24px, 5.03vw, 76px); position: relative; overflow: hidden; background: var(--c-ink); color: var(--c-white); } /* -------------------------------------------------- 上端の曲線と光の帯 */ .msg__curve { position: absolute; /* 金ストローク（3px）をマスク内へ収めるため 1px 下げる */ inset-block-start: 1px; inset-inline: 0; z-index: 1; width: 100%; height: var(--arc-h); pointer-events: none; } .msg__curve-fill { fill: var(--c-white); } .msg__sweep { position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 0; width: 100%; height: clamp(280px, 44.4vw, 672px); object-fit: cover; object-position: center bottom; opacity: 0.4; pointer-events: none; } /* ------------------------------------------------------------ container */ .msg__inner { position: relative; z-index: 2; width: min(1288px, 100% - var(--gutter) * 2); margin-inline: auto; } .msg .sec-head__ja { color: var(--c-white); } /* ----------------------------------------------------------------- text */ .msg__quote { position: relative; font-weight: 600; color: var(--c-white); } .msg__quote p { display: inline; } .msg__quote::before, .msg__quote::after { color: var(--c-white); font-family: var(--font-jp); line-height: 1; } .msg__quote::before { content: "\201C"; position: absolute; inset-block-start: -0.1em; } .msg__quote::after { content: "\201D"; margin-inline-start: 0.1em; vertical-align: 0.42em; } .msg__body { color: var(--c-white); } .msg__body p + p { margin-top: 1.5em; } .msg__accent { font-style: normal; font-weight: 600; font-size: 1.11em; color: var(--c-gold); } .msg__sign { color: var(--c-white); } .msg__sign-role { font-weight: 400; } .msg__sign-name { font-weight: 500; } /* --------------------------------------------------------------- photos */ .msg__portrait img, .msg__photo img { width: 100%; height: 100%; object-fit: cover; } .msg__portrait { aspect-ratio: 531 / 488; } .msg__photo--desk { aspect-ratio: 500 / 280; } .msg__photo--store { aspect-ratio: 363 / 176; } /* =============================================================== SP */ @media (max-width: 760px) { .msg { padding-block: clamp(70px, 22vw, 96px) clamp(56px, 19.7vw, 96px); } .msg__sweep { display: none; } .msg__grid { display: grid; row-gap: clamp(26px, 9.2vw, 40px); margin-top: clamp(28px, 9.2vw, 40px); } .msg__quote { font-size: clamp(17px, 5.1vw, 20px); line-height: 1.7; letter-spacing: 0.2em; padding-inline-start: clamp(14px, 4.4vw, 18px); } .msg__quote::before { inset-inline-start: 0; font-size: clamp(17px, 5.1vw, 20px); } .msg__quote::after { font-size: clamp(17px, 5.1vw, 20px); } .msg__body { font-size: clamp(14px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; } .msg__portrait { width: min(307px, 100%); margin-inline: auto; aspect-ratio: 307 / 224; } /* SP は写真を左右の画面端まで伸ばす（Figma 585:9358） */ .msg__photo--desk { width: 80vw; margin-inline-start: calc(-1 * var(--gutter)); aspect-ratio: 312 / 175; } .msg__photo--store { width: 81vw; margin-inline-start: auto; margin-inline-end: calc(-1 * var(--gutter)); aspect-ratio: 316 / 153; } .msg__sign { margin-top: clamp(10px, 6.4vw, 25px); font-size: clamp(13px, 3.85vw, 15px); line-height: 2.13; letter-spacing: 0.1em; } .msg__sign-name { margin-inline-start: 1em; } } /* =============================================================== PC */ @media (min-width: 761px) { .msg { --arc-overlap: clamp(64px, 8.4vw, 127px); } /* SP 専用の改行（Figma 585:9358 の折返しに合わせる） */ .msg-br-sp { display: none; } .msg { padding-block: clamp(90px, 15.08vw, 228px) clamp(64px, 9.46vw, 143px); } .msg__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 2vw, 30px); row-gap: clamp(24px, 4.83vw, 73px); margin-top: clamp(32px, 5.3vw, 80px); } .msg__quote { grid-column: 1; grid-row: 1; margin-inline-start: clamp(0px, 2.18vw, 33px); font-size: clamp(17px, 1.65vw, 25px); line-height: 1.84; letter-spacing: 0.1em; } .msg__quote::before { inset-inline-start: clamp(-33px, -2.18vw, -16px); font-size: clamp(17px, 1.65vw, 25px); } .msg__quote::after { font-size: clamp(17px, 1.65vw, 25px); } .msg__body { font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.15em; } .msg__body--first { grid-column: 1; grid-row: 2; width: min(616px, 100%); margin-inline-start: clamp(0px, 2.18vw, 33px); } .msg__body--second { grid-column: 2; grid-row: 3 / 5; align-self: start; width: min(663px, 100%); margin-top: clamp(30px, 7.14vw, 108px); } .msg__portrait { grid-column: 2; grid-row: 1 / 3; align-self: start; width: min(531px, 100%); margin-inline: auto; } .msg__photo--desk { grid-column: 1; grid-row: 3; align-self: start; width: min(500px, 100%); margin-top: clamp(10px, 2.18vw, 33px); } .msg__photo--store { grid-column: 1; grid-row: 4; align-self: start; width: min(363px, 100%); margin-inline-start: clamp(0px, 9.06vw, 137px); } .msg__sign { grid-column: 2; grid-row: 5; justify-self: end; align-self: end; white-space: nowrap; font-size: clamp(12px, 0.99vw, 15px); line-height: 2.13; letter-spacing: 0.15em; } .msg__sign-name { margin-inline-start: clamp(12px, 1.32vw, 20px); font-size: clamp(15px, 1.32vw, 20px); } } /* ===== 16-access.css ===================================================== */ /* ========================================================================== 16-access.css — アクセス Figma: PC 686:27862 / 686:27864（W1512）, SP 585:9399（W390） ルート状態 575:2098（JR）/ 575:2020（京急）/ 575:2176（東白楽） SPプルダウン 643:11506 基準: PC 1512 → vw = px / 1512 * 100 ／ SP 390 → vw = px / 390 * 100 ========================================================================== */ .access { position: relative; padding-block: 68px 48px; /* 大理石は Figma 686:27863（AdobeStock_294759787 6 / 不透明度 100%）の“画像調整後”の色。 rawImages（調整前）は平均 #EEF2F7 と暗く青いので使わない。詳細は CLAUDE.md。 */ background-color: #fafbfc; background-image: url("assets/figma/access/marble-bg.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; } /* 改行ヘルパー（Figma の PC / SP で改行位置が異なる箇所） */ .access-br-pc { display: none; } /* ------------------------------------------------------------------ 見出し */ .access-head { margin-bottom: 30px; } /* ------------------------------------------------------------------ 実績 */ .access-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; margin-bottom: 40px; } .access-stat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding-inline: 4px; } /* Figma Line 379 / 380: #C8C8C8 / 2px / 角丸 */ .access-stat + .access-stat::before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 100%; transform: translateY(-50%); border-radius: 999px; background: #c8c8c8; } .access-stat__label { font-size: clamp(11px, 3.08vw, 12px); font-weight: 600; line-height: 1.667; letter-spacing: 0.05em; text-align: center; } /* Figma SP（585:9411 / 9417 / 9423）は横方向のゴールドグラデーション。 PC（686:27969 ほか）だけ縦方向で色も #C79B5E → #9A734E と別なので PC 側で上書きする。 */ .access-stat__value { display: flex; align-items: baseline; justify-content: center; font-weight: 600; line-height: 1; letter-spacing: 0.01em; background-image: var(--g-gold-x); -webkit-background-clip: text; background-clip: text; color: transparent; } /* SP は 40 / 20 / 35 / 16px（Figma 585:9411 は「.6」をまとめて 20px で組む） */ .access-stat__num { font-size: clamp(33px, 10.26vw, 40px); } .access-stat__num--dot, .access-stat__num--sub { font-size: clamp(17px, 5.13vw, 20px); } .access-stat__num--wide { font-size: clamp(29px, 8.97vw, 35px); } .access-stat__unit { font-size: clamp(13px, 4.1vw, 16px); } /* ------------------------------------------------------------------ 店舗情報 */ .access-info { display: grid; } .access-store { order: -1; width: min(100%, 298px); margin: 0 auto 59px; } .access-store img { width: 100%; aspect-ratio: 298 / 294; object-fit: cover; } .access-brand { display: flex; justify-content: center; margin-bottom: 28px; } .access-brand img { width: min(100%, 199px); height: auto; } .access-badge { display: flex; align-items: center; justify-content: center; min-height: 57px; padding: 8px 12px; margin-bottom: 31px; background: var(--c-bronze); color: var(--c-white); font-family: "Hiragino Sans", "Noto Sans JP", var(--font-en), sans-serif; font-size: clamp(13px, 4.1vw, 16px); font-weight: 600; line-height: 1.35; /* Figma SP 643:9572 は 16px / tracking 0.8px。PC 686:27995 だけ 18px / 2.7px */ letter-spacing: 0.05em; text-align: center; } .access-addr-lot { white-space: nowrap; } .access-address { margin-bottom: 30px; font-size: clamp(14px, 4.1vw, 16px); font-weight: 500; line-height: 1.95; letter-spacing: 0.05em; } /* Figma SP 585:9435: アイコン x30 / ラベル x51 / 値 x128。 アイコン〜ラベル 6px・ラベル〜値 10px で値の開始を 98px に合わせる。 16px だと 390px 幅で「営業時間」の値が2行になるため 3.95vw で微縮する。 */ .access-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; margin-bottom: 60px; font-size: clamp(14px, 3.95vw, 16px); font-weight: 500; line-height: 1.4625; letter-spacing: 0.05em; } .access-contact > div { display: contents; } .access-contact dt { display: flex; align-items: center; gap: 6px; min-width: 85px; } .access-contact dt img { flex: 0 0 auto; width: auto; height: 0.95em; } .access-contact dd { margin: 0; } .access-contact a:hover { text-decoration: underline; } /* --------------------------------------------------------- 交通機関 / お車 */ .access-guide + .access-guide { margin-top: 50px; } .access-guide__bar { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; margin-bottom: 17px; background-image: linear-gradient(90deg, var(--c-green-1) 0%, var(--c-green-2) 100%); color: var(--c-white); /* Figma SP 585:9479 は 18px / tracking 1.8px、PC 686:27910 は 18px / 2.7px */ font-size: clamp(14px, 4.62vw, 18px); font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .access-guide__body { font-size: clamp(14px, 4.1vw, 16px); font-weight: 500; line-height: 1.95; /* Figma SP 585:9477 は tracking 0.7px。PC 686:27892 の 2.1px は PC 側で指定 */ letter-spacing: 0.05em; } .access-hl { color: var(--c-bronze); font-style: normal; font-weight: 600; /* 「徒歩2分」「約35分」が行末で割れないようにする */ white-space: nowrap; } .access-hl__num { /* Figma SP は 18〜20px（585:9477 の「2」「3」が 20px、以降は 18px） */ font-size: clamp(16px, 5.13vw, 20px); /* 大きい数字が行ボックスを押し広げないよう抑える（Figma の行送りは18px基準） */ line-height: 1; } .access-chip { display: flex; align-items: center; justify-content: center; width: max-content; min-width: 76px; min-height: 31px; margin-top: 20px; margin-bottom: 6px; padding: 3px 10px; background: #343434; color: var(--c-white); /* Figma SP 585:9484 は 16px / tracking 1.6px、PC 686:27950 は 18px / 2.7px */ font-size: clamp(14px, 4.1vw, 16px); font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* Figma SP 639:9181 は 14px / tracking 0.7px / 行送り 26.4px */ .access-guide__note { margin-top: 25px; font-size: clamp(13px, 3.59vw, 14px); font-weight: 500; line-height: 1.886; letter-spacing: 0.05em; } /* ------------------------------------------------------------------ ルート */ .access-routes { display: flex; flex-direction: column; margin-top: 70px; } /* PCタブ（SPでは非表示 / SPはプルダウンで切り替える） */ .access-tabs { display: none; } /* SPプルダウン（Figma 643:11506） */ .access-select-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Figma 585:9502: 箱 329x68 / ラベル x52（= 左 22px）で左寄せ / 矢印 10x5 を右 20px。 14px・tracking 1.4px。中央寄せではないので text-align は既定のまま。 */ .access-select { order: -1; width: 100%; min-height: 68px; padding: 8px 44px 8px 22px; border: 0; border-radius: 0; background-color: var(--c-ink); background-image: url("assets/figma/access/chevron-down-white.svg"); background-repeat: no-repeat; background-position: right 20px center; background-size: 10px 6px; color: var(--c-white); font-family: var(--font-jp); font-size: clamp(12px, 3.59vw, 14px); font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; appearance: none; cursor: pointer; } .access-select option { background: var(--c-white); color: var(--c-ink); } /* --- パネル / 横スクロール --- */ .access-panel { position: relative; margin-top: 30px; } .access-panel[hidden] { display: none; } .access-route.hscroll { gap: 20px; padding-block: 4px 16px; /* SPは画面右端まで見切れさせる（Figma 585:9491 は 390px 幅から溢れる構成） */ margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); } .access-step { position: relative; width: 212px; } .access-step__img { width: 100%; aspect-ratio: 212 / 165; object-fit: cover; } /* Figma SP 585:9492 は 16px / 行送り 23.4px、PC 686:27868 は 18px / 30px */ .access-step__caption { margin-top: 19px; font-size: clamp(14px, 4.1vw, 16px); font-weight: 500; line-height: 1.4625; letter-spacing: 0.05em; } /* ステップ番号はPCのみ表示。SPでは支援技術向けに残す（Figma SPには番号なし） */ .access-step__num { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* SPスクロールヒント（Figma 585:9497） */ .access-scroll-hint { position: absolute; top: 44px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 145px; padding: 14px 10px 10px; transform: translateX(-50%); border-radius: 4px; background: rgba(3, 3, 3, 0.6); color: var(--c-white); /* Figma 585:9500 は Hiragino Sans W3 / 12px / tracking 1.2px / 行送り 17px */ font-family: "Hiragino Sans", "Noto Sans JP", var(--font-en), sans-serif; font-size: 12px; font-weight: 300; line-height: 1.4167; letter-spacing: 0.1em; pointer-events: none; } .access-scroll-hint img { width: 34px; height: auto; } .access-scroll-hint__hand { width: 27px; } /* ------------------------------------------------------------------ 地図 */ .access-map { margin-top: 60px; } /* Figmaの地図は 1225×234（約5.2:1）の静止画だが、操作できる地図は ズーム/全画面のコントロールが上下に入るため、その比率だと窮屈で使えない。 幅はFigmaどおりコンテナいっぱいにし、高さだけ実用的な範囲へ広げる。 */ .access-map iframe { display: block; width: 100%; height: clamp(280px, 27vw, 420px); border: 0; } /* ========================================================================== PC（Figma 686:27864 / W1512 / コンテナ 1216px 基準） ========================================================================== */ @media (min-width: 761px) { .access { padding-block: clamp(80px, 9.92vw, 150px) clamp(72px, 9.06vw, 137px); } .access-br-sp { display: none; } .access-br-pc { display: inline; } /* --- 見出し --- */ .access-head { margin-bottom: clamp(36px, 4.37vw, 66px); } /* --- 実績 --- */ .access-stats { align-items: center; margin-bottom: clamp(60px, 7.28vw, 110px); } .access-stat { gap: clamp(4px, 0.53vw, 8px); padding-inline: clamp(12px, 1.6vw, 24px); } .access-stat + .access-stat::before { height: 87%; } .access-stat__label { font-size: clamp(15px, 1.32vw, 20px); line-height: 1.4; } /* PC（686:27969 / 27975 / 27981）は縦グラデーション + 別の金色 */ .access-stat__value { background-image: linear-gradient(180deg, #c79b5e 0%, #9a734e 100%); } .access-stat__num { font-size: clamp(48px, 5.29vw, 80px); } .access-stat__num--dot { font-size: clamp(30px, 3.31vw, 50px); } .access-stat__num--sub { font-size: clamp(38px, 4.1vw, 62px); } .access-stat__num--wide { font-size: clamp(36px, 3.97vw, 60px); } .access-stat__unit { font-size: clamp(20px, 1.98vw, 30px); } /* --- 店舗情報 --- Figma: 左カラム 0–811px ／ 外観写真 848–1194px（コンテナ1216基準） */ .access-info { grid-template-columns: minmax(0, 1fr) 28.4%; column-gap: 3%; align-items: start; } .access-shop { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(20px, 2.18vw, 33px); } .access-store { order: 0; grid-column: 2; grid-row: 1; width: 100%; margin: 0; } .access-store img { aspect-ratio: 346 / 372; } .access-brand { grid-column: 1; grid-row: 1; display: block; margin-bottom: 0; } .access-brand img { width: clamp(150px, 15.08vw, 228px); } .access-badge { grid-column: 2; grid-row: 1; justify-self: start; width: min(100%, 422px); min-height: clamp(48px, 4.1vw, 62px); margin-bottom: 0; font-size: clamp(13px, 1.19vw, 18px); letter-spacing: 0.15em; } .access-address { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(20px, 2.28vw, 34px); margin-bottom: 0; font-size: clamp(14px, 1.19vw, 18px); line-height: 1.3; /* Figma 686:27900 は 18px / tracking 2.7px */ letter-spacing: 0.15em; } /* Figma 686:27894: アイコン x150 / ラベル x180 / 値 x280（コンテナ左端 147） */ .access-contact { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(16px, 1.72vw, 26px); margin-bottom: 0; column-gap: 13px; row-gap: clamp(6px, 0.77vw, 12px); font-size: clamp(14px, 1.19vw, 18px); line-height: 1.3; letter-spacing: 0.15em; } .access-contact dt { gap: 13px; min-width: clamp(90px, 7.94vw, 120px); } /* --- 交通機関 / お車 --- Figma: 377px / 495px カラム + 57px gap（1216基準 = 31% / 40.7% / 4.7%） */ .access-guides { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 31% 40.7%; column-gap: 4.7%; margin-top: clamp(16px, 1.85vw, 28px); } .access-guide + .access-guide { margin-top: 0; } .access-guide--car { grid-column: 2; } .access-guide__bar { width: 100%; max-width: 377px; min-height: clamp(34px, 2.84vw, 43px); margin-bottom: clamp(12px, 1.12vw, 17px); font-size: clamp(14px, 1.19vw, 18px); letter-spacing: 0.15em; } .access-guide__body { font-size: clamp(14px, 1.19vw, 18px); line-height: 2.11; letter-spacing: 0.12em; } .access-guide__body--air { line-height: 1.8; } /* Figma の本文ボックスは緑バー（377px）より広い。686:27892 は 392px で 「京急東神奈川駅より徒歩3分」を1行に収め、686:27952 の駐車場注記は 約497px を1行で組む。カラム幅で折り返さないよう内容幅を優先し、 上限だけカラム比で抑える（隣カラムの本文には届かない）。 */ .access-guide__body, .access-guide__note { width: max-content; max-width: 106%; } .access-hl__num { font-size: clamp(17px, 1.52vw, 23px); } .access-chip { min-width: clamp(76px, 6.61vw, 100px); min-height: clamp(30px, 2.45vw, 37px); margin-top: clamp(14px, 1.65vw, 25px); margin-bottom: clamp(4px, 0.46vw, 7px); font-size: clamp(14px, 1.19vw, 18px); letter-spacing: 0.15em; } .access-guide__note { margin-top: clamp(14px, 1.39vw, 21px); font-size: clamp(13px, 1.06vw, 16px); line-height: 1.775; letter-spacing: 0.15em; } /* --- ルート --- */ .access-routes { margin-top: clamp(40px, 4.96vw, 75px); } .access-select-label, .access-select { display: none; } .access-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.19vw, 18px); } .access-tabs [role="tab"] { position: relative; display: flex; align-items: center; justify-content: center; min-height: clamp(52px, 4.56vw, 69px); padding: 8px clamp(18px, 1.72vw, 26px); border: 1px solid var(--c-ink); background: transparent; color: var(--c-ink); font-family: var(--font-jp); font-size: clamp(11px, 1.19vw, 18px); font-weight: 600; line-height: 1.3; letter-spacing: 0.05em; text-align: center; transition: background-color 220ms var(--ease), color 220ms var(--ease); } .access-tabs [role="tab"]::after { content: ""; position: absolute; top: 50%; right: clamp(10px, 1.06vw, 16px); width: 11px; height: 7px; margin-top: -3px; background: url("assets/figma/access/chevron-down.svg") no-repeat center / contain; } .access-tabs [role="tab"]:hover { background: rgba(3, 3, 3, 0.06); } .access-tabs [role="tab"][aria-selected="true"] { background: var(--c-ink); color: var(--c-white); } .access-tabs [role="tab"][aria-selected="true"]:hover { background: #1c1c1c; } .access-tabs [role="tab"][aria-selected="true"]::after { background-image: url("assets/figma/access/chevron-down-white.svg"); } .access-panel { margin-top: clamp(24px, 2.51vw, 38px); } .access-route.hscroll { /* 番号を写真の左上へ重ねるため 8px / 4px の余白を確保（Figma 686:27886） */ gap: clamp(10px, 0.99vw, 15px); padding: 4px 0 34px 8px; /* padding-left ぶんスナップ位置をずらし、01の「0」が左端で切れないようにする */ scroll-padding-left: 8px; margin-right: 0; scrollbar-color: #d9d9d9 transparent; } /* スクロールバー（Figma Rectangle 301: h6px / #D9D9D9） */ .access-route.hscroll::-webkit-scrollbar { height: 6px; } .access-route.hscroll::-webkit-scrollbar-track { background: transparent; } .access-route.hscroll::-webkit-scrollbar-thumb { background: #d9d9d9; border-radius: 999px; } .access-step { width: clamp(150px, 14.02vw, 212px); } /* Figma Vector 46: 写真の左上を斜めに欠く（38 x 39px @ 212 x 165px） */ .access-step__img { clip-path: polygon(17.93% 0, 100% 0, 100% 100%, 0 100%, 0 23.64%); } .access-step__num { position: absolute; top: -4px; left: -8px; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; color: var(--c-bronze); font-size: clamp(13px, 1.19vw, 18px); font-weight: 600; line-height: 1.3; letter-spacing: 0.15em; } .access-step__caption { margin-top: clamp(12px, 1.26vw, 19px); font-size: clamp(14px, 1.19vw, 18px); line-height: 1.67; } .access-scroll-hint { display: none; } /* --- 地図 --- */ .access-map { margin-top: clamp(48px, 5.56vw, 84px); } } /* ===== 17-banner.css ===================================================== */ /* ========================================================================== 17-banner.css — 画像バンド（アクセス直下 / 全幅） Figma: 686:27996 / image 29 = 686:27997（W1512 x H489） 写真は left 17.35% / width 67.54% に配置し、右端は #030303 の ぼかし矩形（686:27998 / blur 32px）で地の黒へ溶け込ませている。 ========================================================================== */ .access-band { position: relative; width: 100%; aspect-ratio: 390 / 200; background: var(--c-ink); overflow: hidden; } .access-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .access-band__fade { display: none; } @media (min-width: 761px) { .access-band { aspect-ratio: 1512 / 489; } .access-band__img { inset: 0 auto 0 17.35%; width: 67.54%; } .access-band__fade { display: block; position: absolute; top: 13.29%; left: 80.26%; width: 8.27%; height: 67.08%; background: var(--c-ink); filter: blur(32px); } } /* ===== 98-pages.css ====================================================== */ /* ========================================================================== 98-pages.css — 固定ページ専用スタイル 対象: お問い合わせ / プライバシーポリシー / ご利用規約 / 会社概要 Figma (fileKey: Z9Xpaho2qSqgSgiQNI87LJ) お問い合わせ PC 575:2282（575:2300 フォーム / 575:2380 電話ボタン） SP 575:4891 プラポリ PC 575:2662 SP 575:4998 ご利用規約 PC 575:2698 SP 575:5035 会社概要 PC 616:4027（616:4089 会社情報テーブル） SP 提供なし ・トークンは 00-tokens.css を参照（再定義しない） ・PC は W1512 基準 / SP は W390 基準で px → vw 換算し clamp() で挟む ========================================================================== */ /* ------------------------------------------------------------ ページ土台 */ .page { position: relative; isolation: isolate; /* Figma: ヘッダーロゴ下端 y125 → 見出し上端 y155 */ padding-top: calc(var(--header-h) + clamp(24px, 4.43vw, 67px)); padding-bottom: clamp(56px, 9.19vw, 139px); } /* 全ページ共通の大理石テクスチャ（Figma 575:2283「背景」/ opacity 60%） 画像は Figma の“画像調整後”を不透明度 100% のまま保存し、60% はここで掛ける。 rawImages（調整前）は平均 #EEF2F7 と暗く青いので使わない。詳細は CLAUDE.md。 */ .page--marble::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: url("assets/figma/pages/page-marble.webp"); background-position: center bottom; /* Figma と同じく背景ボックス全体へフィットさせる。cover にすると テクスチャが 2 倍以上に拡大され、意図より模様が強く出るため使わない。 */ background-size: 100% 100%; background-repeat: no-repeat; opacity: 0.6; pointer-events: none; } /* -------------------------------------------------------- ページ見出し */ .page-head { width: min(864px, 100% - var(--gutter) * 2); margin-inline: auto; text-align: center; } /* Figma: Snell Roundhand / 40px / #CFB277 / 前後に 10px の罫。 00-shared.css の .sec-head__en と同じくアウトライン化 SVG を貼る（理由はそちらのコメント）。 font-size は SVG の高さを出すための em 基準として残す。 */ .page-head__en { display: inline-flex; align-items: center; gap: clamp(8px, 1.19vw, 18px); margin: 0; color: var(--c-gold); font-size: clamp(20px, 2.65vw, 40px); line-height: 1.65; --script-h: 1.65em; /* Figma: line-height 66px ÷ font-size 40px */ } .page-head__en::before, .page-head__en::after { content: ""; flex: 0 0 auto; width: clamp(6px, 0.66vw, 10px); height: 1px; background: currentcolor; } /* Figma: Zen Old Mincho SemiBold / 28px / tracking 4.2px */ .page-head__ja { margin: clamp(2px, 0.66vw, 10px) 0 0; font-size: clamp(22px, 1.85vw, 28px); font-weight: 600; line-height: 1.5; letter-spacing: 0.15em; /* 中央揃え時に末尾の字送りぶん左へずれるのを相殺 */ text-indent: 0.15em; } /* ========================================================================== 規約・ポリシー本文（privacy.html / terms.html） ========================================================================== */ .legal-body { width: min(1152px, 100% - var(--gutter) * 2); margin: clamp(28px, 3.97vw, 60px) auto 0; } .legal-body p, .legal-body li, .legal-body dd, .legal-body dt { font-size: clamp(13px, 0.93vw, 14px); line-height: 2.29; letter-spacing: 0.1em; } .legal-lead { margin: 0; } .legal-section { margin-top: clamp(24px, 2.65vw, 40px); } .legal-lead + .legal-section { margin-top: clamp(20px, 2.65vw, 40px); } /* Figma: Zen Old Mincho Medium / 16px / tracking 1.6px + 連番 */ .legal-section__title { display: flex; gap: 0.5em; margin: 0; font-size: clamp(15px, 1.06vw, 16px); font-weight: 500; line-height: 2; letter-spacing: 0.1em; } .legal-section__num { flex: 0 0 auto; font-variant-numeric: tabular-nums; } .legal-section__title + * { margin-top: clamp(10px, 0.99vw, 15px); } /* 中黒リスト（プラポリ 1. の対策一覧） */ .legal-bullets { padding-inline-start: 1.5em; list-style: disc; } .legal-bullets li { list-style: disc; } /* 「○ 〜について」ブロック（ご利用規約 8. / 9.） ※ margin は .legal-section__title + * / p + .legal-def 側で制御するため上書きしない */ .legal-def dt { position: relative; padding-inline-start: 1.5em; font-weight: 400; } .legal-def dt::before { content: "○"; position: absolute; inset-inline-start: 0; top: 0; } .legal-def dd { margin: 0; } .legal-section p + p, .legal-section p + .legal-bullets, .legal-section p + .legal-def, .legal-section .legal-def + p { margin-top: clamp(8px, 0.79vw, 12px); } /* 「※」注記（先頭の ※ は本文として残し、ぶら下げインデントで揃える） */ .legal-note { padding-inline-start: 1.3em; text-indent: -1.3em; } .legal-link { color: #a5a5a5; text-decoration: underline; text-underline-offset: 0.25em; transition: color 200ms var(--ease); } .legal-link:hover, .legal-link:focus-visible { color: var(--c-bronze); } /* ========================================================================== 会社概要（company.html） Figma 616:4089 — 表幅 1050 / ラベル x194 / 値 x363（表左端基準） ========================================================================== */ .company-dl { display: grid; grid-template-columns: 34.57% 1fr; /* 363 / 1050 */ width: min(1050px, 100% - var(--gutter) * 2); margin: clamp(28px, 4.5vw, 68px) auto 0; border-top: 1px solid var(--c-line); } .company-dl > dt, .company-dl > dd { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: clamp(56px, 4.76vw, 72px); padding-block: clamp(12px, 1.32vw, 20px); border-bottom: 1px solid var(--c-line); font-size: clamp(14px, 1.06vw, 16px); line-height: 2; letter-spacing: 0.1em; } .company-dl > dt { padding-inline-start: 53.44%; /* 194 / 363 */ font-weight: 500; } /* ========================================================================== お問い合わせ（contact.html） ========================================================================== */ /* ------------------------------------------------------- 電話ボタン枠 */ .form-phone { width: min(963px, 100% - var(--gutter) * 2); margin: clamp(24px, 2.78vw, 42px) auto 0; padding: clamp(18px, 2.58vw, 39px) clamp(16px, 2.12vw, 32px) clamp(16px, 2.65vw, 40px); border: 1px solid var(--c-gold); background: var(--c-white); box-shadow: inset 0 0 0 6px var(--c-white), inset 0 0 0 7px #e2e0db; text-align: center; } .form-phone__lede { margin: 0; font-size: clamp(15px, 1.52vw, 23px); line-height: 1.4; letter-spacing: 0.15em; text-indent: 0.15em; } .form-phone__number { margin: clamp(6px, 0.79vw, 12px) 0 clamp(6px, 0.93vw, 14px); } .form-phone__number a { display: inline-flex; align-items: center; gap: clamp(8px, 0.66vw, 10px); color: var(--c-bronze); font-size: clamp(26px, 3.64vw, 55px); font-weight: 500; line-height: 1.2; letter-spacing: 0.15em; text-indent: 0.15em; white-space: nowrap; } .form-phone__icon { flex: 0 0 auto; width: clamp(20px, 2.18vw, 33px); height: auto; } .form-phone__hours { margin: 0; font-size: clamp(12px, 1.06vw, 16px); line-height: 2; letter-spacing: 0.15em; text-indent: 0.15em; } /* ------------------------------------------------------------- リード文 */ .form-lede { width: min(1194px, 100% - var(--gutter) * 2); margin: clamp(24px, 2.78vw, 42px) auto 0; text-align: center; } .form-lede__main { margin: 0; font-size: clamp(15px, 1.32vw, 20px); line-height: 2.15; letter-spacing: 0.15em; text-indent: 0.15em; } .form-lede__main strong { font-size: 1.25em; /* Figma 25px / 20px */ font-weight: 500; } /* PC（Figma 575:2298）は2行構成なので SP 専用の改行は消す */ .form-lede__sp-break { display: none; } .form-lede__note { margin: clamp(6px, 0.53vw, 8px) 0 0; font-size: clamp(12px, 1.06vw, 16px); line-height: 1.9; letter-spacing: 0.15em; text-indent: 0.15em; } /* Figma 575:2289 — 1px の罫を 5px 間隔で 2 本 */ .form-rule { width: min(1163px, 100% - var(--gutter) * 2); height: 3px; margin: clamp(32px, 4.63vw, 70px) auto; border: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } /* ----------------------------------------------------------- フォーム */ .form-body { width: min(830px, 100% - var(--gutter) * 2); margin-inline: auto; } .form-row { display: grid; grid-template-columns: 34.58% 1fr; /* 287 / 830 */ align-items: start; margin: 0; padding: 0; border: 0; min-inline-size: 0; } .form-row + .form-row { margin-top: clamp(16px, 1.98vw, 30px); } .form-label { margin: 0; padding-block: 6px; font-size: clamp(15px, 1.19vw, 18px); line-height: 1.7; letter-spacing: 0.15em; } /* 必須バッジ（Figma: 55x18 / #125843 / 13px） */ .form-req { display: inline-grid; place-items: center; min-width: clamp(44px, 3.64vw, 55px); height: clamp(16px, 1.19vw, 18px); margin-inline-start: 0.7em; border-radius: 1px; background: #125843; color: #fdfeff; font-size: clamp(11px, 0.86vw, 13px); font-weight: 400; line-height: 1; letter-spacing: 0.15em; text-indent: 0.15em; vertical-align: 0.15em; } .form-control { min-width: 0; } .form-input, .form-textarea { display: block; width: 100%; padding: 0 clamp(12px, 1.39vw, 21px); border: 1px solid var(--c-gold); border-radius: 0; background: #fdfeff; color: var(--c-ink); font-family: var(--font-jp); font-size: 16px; letter-spacing: 0.15em; } .form-input { height: clamp(40px, 2.84vw, 43px); line-height: 1.4; } .form-textarea { min-height: clamp(180px, 15.74vw, 238px); padding-block: clamp(8px, 0.79vw, 12px); line-height: 1.8; resize: vertical; } .form-input::placeholder, .form-textarea::placeholder { color: #cecece; opacity: 1; } /* ------------------------------------------------------ チェックボックス */ .form-checks { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 0.79vw, 12px); /* ラベル文字とチェックボックスの中心を揃える */ padding-top: clamp(3px, 0.46vw, 7px); } .form-checks--inline { flex-flow: row wrap; column-gap: clamp(24px, 4.5vw, 68px); } .form-check { display: inline-flex; align-items: center; gap: clamp(8px, 0.73vw, 11px); cursor: pointer; font-size: clamp(14px, 1.19vw, 18px); line-height: 1.6; letter-spacing: 0.15em; } .form-check input[type="checkbox"] { appearance: none; flex: 0 0 auto; display: grid; place-content: center; width: clamp(18px, 1.39vw, 21px); height: clamp(18px, 1.39vw, 21px); margin: 0; border: 1px solid var(--c-gold); border-radius: 0; background: transparent; cursor: pointer; } .form-check input[type="checkbox"]::before { content: ""; width: clamp(10px, 0.73vw, 11px); height: clamp(10px, 0.73vw, 11px); background: var(--c-gold); transform: scale(0); transition: transform 140ms var(--ease); } .form-check input[type="checkbox"]:checked::before { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .form-check input[type="checkbox"]::before { transition: none; } } /* オンライン相談の注意書き（Figma: Inter / 16px / #BF0000） */ .form-alert { margin: clamp(8px, 0.86vw, 13px) 0 0; color: #bf0000; font-family: var(--font-en); font-size: clamp(12px, 1.06vw, 16px); line-height: 1.63; letter-spacing: 0.15em; } /* ---------------------------------------------------- ご来店希望日時 */ .form-dates { display: flex; flex-direction: column; gap: clamp(10px, 1.45vw, 22px); } .form-date { display: grid; grid-template-columns: 20.85% minmax(0, 68.45%); /* 113 / 371 の 542 比 */ align-items: center; gap: 0; } .form-date__label { font-size: clamp(14px, 1.19vw, 18px); line-height: 1.6; letter-spacing: 0.15em; } /* ------------------------------------------------------------- 送信 */ .form-submit { display: block; width: clamp(190px, 14.02vw, 212px); min-height: clamp(46px, 3.37vw, 51px); margin: clamp(32px, 4.63vw, 70px) auto 0; border: 1px solid #fdfeff; background: linear-gradient(90deg, #083928 0%, #145e48 44.67%, #07402f 94.77%); box-shadow: 0 2px 9px rgba(0, 0, 0, 0.25); color: #fdfeff; font-family: var(--font-jp); font-size: clamp(16px, 1.19vw, 18px); font-weight: 900; letter-spacing: 0.08em; text-indent: 0.08em; text-shadow: 0 1px 7px rgba(0, 0, 0, 0.55); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); } .form-submit:hover, .form-submit:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } @media (prefers-reduced-motion: reduce) { .form-submit { transition: none; } .form-submit:hover, .form-submit:focus-visible { transform: none; } } /* ========================================================================== タブレット寄り（会社概要テーブルの左インデントを詰める） ========================================================================== */ @media (min-width: 761px) and (max-width: 1100px) { .company-dl { grid-template-columns: minmax(120px, 30%) 1fr; } .company-dl > dt { padding-inline-start: clamp(16px, 3vw, 32px); } } /* ========================================================================== SP（W390 基準） ========================================================================== */ @media (max-width: 760px) { .page { padding-top: calc(var(--header-h) + clamp(24px, 8.2vw, 40px)); padding-bottom: clamp(48px, 15.4vw, 72px); } /* Figma SP: Snell Roundhand 19px（PC 40px の 0.475 倍。terms 674:26335 / privacy 674:26328 で一致） */ .page-head__en { font-size: clamp(15px, 4.87vw, 19px); } /* Figma SP: Zen Old Mincho SemiBold 25px / tracking 1.25px(=0.05em)。 PC の 0.15em を SP に持ち込むと「お問い合わせ・ご来店予約」が 390px で2行になり 「約」だけが落ちる。SP は Figma どおり 0.05em に戻す。 */ .page-head__ja { font-size: clamp(21px, 6.41vw, 25px); letter-spacing: 0.05em; text-indent: 0.05em; } /* ------------------------------------------------------- 規約・ポリシー */ /* Figma SP 575:5050 ほか — 13px / tracking 1.3px / 行送り27px */ .legal-body p, .legal-body li, .legal-body dd, .legal-body dt { font-size: clamp(12px, 3.33vw, 13px); line-height: 2.08; letter-spacing: 0.1em; } /* Figma SP 575:5056 ほか — Zen Old Mincho SemiBold 14px / tracking 1.4px */ .legal-section__title { font-size: clamp(13px, 3.59vw, 14px); font-weight: 600; letter-spacing: 0.1em; } /* Figma SP は章間 50px（PC 575:2713 系の 40px より広い） */ .legal-section, .legal-lead + .legal-section { margin-top: clamp(32px, 12.82vw, 56px); } /* ------------------------------------------------------------ 会社概要 */ .company-dl { display: block; border-top: 0; } .company-dl > dt { align-items: flex-start; min-height: 0; padding: 0 0 2px; border-bottom: 0; color: var(--c-bronze); font-size: clamp(12px, 3.6vw, 14px); } .company-dl > dd { min-height: 0; padding: 0 0 clamp(12px, 3.6vw, 16px); font-size: clamp(13px, 3.85vw, 15px); } .company-dl > dd + dt { padding-top: clamp(12px, 3.6vw, 16px); } /* ------------------------------------------------------------ 電話ボタン */ /* Figma SP 575:4904 — 枠 355x179 / 上下パディング約32px */ .form-phone { padding: clamp(22px, 8.2vw, 34px) clamp(12px, 3.6vw, 16px); box-shadow: inset 0 0 0 4px var(--c-white), inset 0 0 0 5px #e2e0db; } /* Figma SP 575:4907 — 16px / tracking 0.8px */ .form-phone__lede { font-size: clamp(13px, 4.1vw, 16px); letter-spacing: 0.05em; text-indent: 0.05em; } /* Figma SP 575:4909 — 30px / tracking 4.5px。行間は Figma の lede中心↔番号中心46px / 番号中心↔営業時間中心43px に合わせる */ .form-phone__number { margin-block: clamp(10px, 4.1vw, 16px) clamp(8px, 2.8vw, 11px); } .form-phone__number a { font-size: clamp(24px, 7.69vw, 30px); gap: clamp(4px, 1.4vw, 6px); letter-spacing: 0.15em; text-indent: 0.15em; } /* Figma SP 575:4910 — 23.2px */ .form-phone__icon { width: clamp(18px, 5.95vw, 23px); } /* Figma SP 575:4914 — 14px / tracking 1.4px */ .form-phone__hours { font-size: clamp(11px, 3.59vw, 14px); letter-spacing: 0.1em; text-indent: 0.1em; } /* ---------------------------------------------------------------- リード */ /* Figma SP 575:4915 — 16px / tracking 0.8px / 行送り31px、3行構成 */ .form-lede__main { font-size: clamp(13px, 4.1vw, 16px); line-height: 1.94; letter-spacing: 0.05em; text-indent: 0.05em; } /* Figma SP は「頂戴したお問い合わせは、」で改行する。 自然折返しに任せると「順次お／返しさせて」で切れる。 */ .form-lede__sp-break { display: inline; } .form-lede__note { font-size: clamp(11px, 3.33vw, 13px); letter-spacing: 0.04em; text-indent: 0.04em; text-align: left; } /* -------------------------------------------------------------- フォーム */ /* Figma SP 575:4919 — フォームだけ左右約35px の内側マージンで、 電話ボタン／リード（gutter 17px）より一段狭い */ .form-body { width: min(830px, 100% - clamp(30px, 8.97vw, 48px) * 2); } .form-row { grid-template-columns: 1fr; row-gap: clamp(6px, 2vw, 8px); } .form-row + .form-row { margin-top: clamp(18px, 5.6vw, 24px); } /* Figma SP 575:4922 ほか — 16px / tracking 0.8px */ .form-label { padding-block: 0; font-size: clamp(13px, 4.1vw, 16px); letter-spacing: 0.05em; } /* Figma SP 575:4926 — 55x18 / 13px（PC と同寸） */ .form-req { min-width: 55px; height: 18px; font-size: 13px; letter-spacing: 0.15em; text-indent: 0.15em; } .form-input { height: 46px; } .form-checks--inline { column-gap: clamp(24px, 12vw, 56px); } /* Figma SP 616:3943 ほか — 16px / tracking 0.8px */ .form-check { font-size: clamp(13px, 4.1vw, 16px); letter-spacing: 0.05em; } /* Figma SP 674:26200 — Inter 14px / tracking 1.4px / 行送り22px */ .form-alert { font-size: clamp(11px, 3.59vw, 14px); line-height: 1.57; letter-spacing: 0.1em; } .form-date { display: block; } .form-date__label { display: block; margin-bottom: clamp(4px, 1.5vw, 6px); font-size: clamp(13px, 4.1vw, 16px); letter-spacing: 0.05em; } .form-dates { gap: clamp(12px, 4.1vw, 16px); } .form-textarea { min-height: clamp(180px, 53vw, 210px); } /* Figma SP 575:4985 — 212x51 / 16px */ .form-submit { width: min(212px, 100%); min-height: 51px; font-size: 16px; } } /* ========================================================================== スパム対策の honeypot 人間には見えないが、display:none だと無視するボットがいるため画面外へ逃がす。 ========================================================================== */ .form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ========================================================================== 送信完了ページ（thanks.html） ========================================================================== */ .thanks { width: min(830px, 100% - var(--gutter) * 2); margin-inline: auto; text-align: center; } .thanks__lede { font-family: var(--font-jp); font-size: clamp(18px, 1.72vw, 26px); font-weight: 600; letter-spacing: 0.08em; line-height: 1.8; } .thanks__body { margin-top: clamp(20px, 2.12vw, 32px); font-size: clamp(14px, 1.06vw, 16px); letter-spacing: 0.05em; line-height: 2; } .thanks__phone { margin-top: clamp(28px, 3.17vw, 48px); } .thanks__phone a { display: inline-flex; align-items: center; gap: clamp(8px, 0.79vw, 12px); color: var(--c-bronze); font-family: var(--font-jp); font-size: clamp(26px, 2.65vw, 40px); font-weight: 700; letter-spacing: 0.1em; white-space: nowrap; } .thanks__icon { width: clamp(20px, 1.79vw, 27px); height: auto; } .thanks__hours { margin-top: clamp(6px, 0.66vw, 10px); color: var(--c-muted); font-size: clamp(12px, 0.93vw, 14px); letter-spacing: 0.08em; } .thanks__back { margin-top: clamp(36px, 4.23vw, 64px); } .thanks__back .btn { --btn-w: min(420px, 100%); margin-inline: auto; }