@charset "utf-8"; /* ============================================================ L.U.X.I portfolio / base.css 共通基盤: トークン / リセット / タイポ / 共通コンポーネント 正本: 設計\マスター設計書_v1.md (§3 トークン, §6 works詳細の型, §9 検収基準) Google Fonts の link は各HTMLの 側に置く。ここは フォールバックスタックだけを持つ (オフライン/file:// でも崩さない)。 ============================================================ */ /* ---------- 1. トークン (設計書 §3 そのまま) ---------- */ :root{ --canvas:#FAF8F4; /* 近白。純白は使わない */ --ink:#17181A; --ink-2:#5C5F66; --line:#E4E0D8; --navy:#0B1F3A; /* L.U.X.I基調(料金表と統一) */ --gold:#C9A227; /* CTA・バッジ。希少投入 */ --gold-soft:#E9DDB8; /* 派生トークン */ --ink-3:#8A8D93; --canvas-2:#F3F0EA; /* 面を一段沈める時 */ --line-strong:#CFC9BD; /* 帯色(業界アクセント)。既定は L.U.X.I 基調のネイビー。 works/{slug} は で上書きする --accent 主帯。白文字を載せる前提の濃色 --accent-deep 一段沈めた帯 (検証3案の帯)。こちらも白文字前提の濃色 --accent-2 差し色。文字色には使わない (黄・銀など明度の高い色が入る) --accent-soft 淡色面 */ --accent:var(--navy); --accent-deep:#071528; --accent-2:var(--gold); --accent-soft:#EDEFF3; --on-accent:#FFFFFF; /* 書体スタック (Google Fonts が落ちても読める順) */ --font-display:"Archivo","Helvetica Neue",Arial,"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; --font-ja:"Archivo","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif; --font-mincho:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",YuMincho,"MS PMincho",serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace; /* レイアウト */ --container:1280px; --container-narrow:960px; --gutter:clamp(20px,5vw,72px); --sp-section:clamp(72px,10vw,160px); --radius:2px; --radius-lg:10px; /* 動き */ --ease-out:cubic-bezier(.22,.61,.36,1); --dur:.45s; } /* 業界アクセント (設計書 §3)。 帯として面で敷くため、可読性の高い濃色を --accent に、 もう一方の色を --accent-2 (差し色) に割り当てる。 */ [data-theme="cleaning"]{ --accent:#1E6F9F; --accent-deep:#0F4C73; --accent-2:#7FC1E3; --accent-soft:#EAF4FA; --on-accent:#FFFFFF; } [data-theme="denki"] { --accent:#1B2A41; --accent-deep:#101B2B; --accent-2:#F2B705; --accent-soft:#FDF4DC; --on-accent:#FFFFFF; } [data-theme="dining"] { --accent:#8C2F1B; --accent-deep:#5E1E11; --accent-2:#E0A56B; --accent-soft:#F7EFE9; --on-accent:#FFFFFF; } [data-theme="cars"] { --accent:#2E3238; --accent-deep:#1D2024; --accent-2:#C8CCD2; --accent-soft:#EDEFF1; --on-accent:#FFFFFF; } [data-theme="salon"] { --accent:#C48A7E; --accent-deep:#8A5347; --accent-2:#E8CFC6; --accent-soft:#F8F1EE; --on-accent:#FFFFFF; } [data-theme="dental"] { --accent:#38606D; --accent-deep:#294C58; --accent-2:#9FBFC9; --accent-soft:#EAF1F2; --on-accent:#FFFFFF; } /* ---------- 2. リセット ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:clip; /* 375px で横スクロールを出さない保険 */ scroll-behavior:auto; /* 慣性は Lenis 側に任せる */ } body{ margin:0; max-width:100%; background:var(--canvas); color:var(--ink); font-family:var(--font-ja); font-size:clamp(1rem,1rem + .22vw,1.0625rem); line-height:1.9; letter-spacing:.03em; font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } img,video,svg,canvas{ max-width:100%; height:auto; display:block; } a{ color:inherit; } button{ font:inherit; color:inherit; background:none; border:0; } table{ border-collapse:collapse; width:100%; } :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; } ::selection{ background:var(--gold-soft); color:var(--ink); } /* Lenis (assets/vendor/lenis.min.js) が要求する最小CSS */ html.lenis,html.lenis body{ height:auto; } .lenis.lenis-smooth{ scroll-behavior:auto !important; } .lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; } .lenis.lenis-stopped{ overflow:hidden; } /* ---------- 3. タイポシステム ---------- */ /* 欧文ディスプレイ: 設計書§3 の数値を厳守 line-height .92 / letter-spacing -0.02em / clamp(2.8rem,7.5vw,9rem) */ .t-display{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.8rem,7.5vw,9rem); line-height:.92; letter-spacing:-.02em; text-transform:uppercase; } .t-display--mid{ font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4.8vw,4.4rem); line-height:.94; letter-spacing:-.02em; text-transform:uppercase; } .t-display--sm{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.4rem); line-height:1; letter-spacing:-.015em; text-transform:uppercase; } /* 明朝 (MEMO 見出し用) */ .t-mincho{ font-family:var(--font-mincho); font-weight:600; font-size:clamp(2.4rem,6vw,5.6rem); line-height:1.02; letter-spacing:.06em; } /* 和文見出し: 行間 1.15〜1.3 (80%詰めは和文に適用しない) */ .t-h1{ font-size:clamp(1.75rem,4vw,3rem); line-height:1.22; letter-spacing:.005em; font-weight:700; } .t-h2{ font-size:clamp(1.375rem,2.8vw,2.25rem); line-height:1.26; letter-spacing:.01em; font-weight:700; } .t-h3{ font-size:clamp(1.125rem,1.9vw,1.5rem); line-height:1.3; letter-spacing:.02em; font-weight:500; } .t-h4{ font-size:clamp(1rem,1.4vw,1.125rem); line-height:1.3; letter-spacing:.02em; font-weight:500; } .t-lead{ font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.85; letter-spacing:.03em; } .t-body{ line-height:1.9; letter-spacing:.03em; } .t-small{ font-size:clamp(1rem,.9vw,1rem); line-height:1.8; color:var(--ink-2); } .t-note{ font-size:1rem; line-height:1.7; color:var(--ink-3); letter-spacing:.04em; } /* Mono ラベル・番号 (設計書: 番号/件数は全所で Mono) */ .u-mono{ font-family:var(--font-mono); font-weight:500; font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-feature-settings:normal; } .u-mono--sm{ font-size:1rem; letter-spacing:.16em; } .u-num{ font-family:var(--font-mono); font-weight:400; font-size:1rem; letter-spacing:.1em; color:var(--ink-3); font-feature-settings:normal; } .u-accent{ color:var(--accent); } .u-gold{ color:var(--gold); } .u-muted{ color:var(--ink-2); } .u-center{ text-align:center; } .u-nowrap{ white-space:nowrap; } .u-visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } /* ---------- 4. レイアウト ---------- */ .lx-wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .lx-wrap--narrow{ max-width:var(--container-narrow); } .lx-section{ padding-block:var(--sp-section); } .lx-section--tight{ padding-block:clamp(48px,6vw,96px); } /* 濃色帯 (白文字前提)。淡色面は .lx-soft / .lx-canvas2 で、 .lx-band の子孫セレクタが効かないよう別クラスに分けている */ .lx-band{ width:100%; background:var(--accent); color:var(--on-accent); } .lx-band--deep{ background:var(--accent-deep); } .lx-soft{ width:100%; background:var(--accent-soft); color:var(--ink); } .lx-canvas2{ width:100%; background:var(--canvas-2); color:var(--ink); } .lx-rule{ height:1px; background:var(--line); border:0; margin:0; } .lx-band .lx-rule{ background:rgba(255,255,255,.28); } /* セクション見出し行: Mono番号 + 和文見出し */ .lx-shead{ display:flex; align-items:baseline; gap:clamp(12px,2vw,28px); padding-bottom:18px; margin-bottom:clamp(28px,4vw,52px); border-bottom:1px solid var(--line); flex-wrap:wrap; } .lx-band .lx-shead{ border-bottom-color:rgba(255,255,255,.3); } .lx-band .lx-shead .u-mono,.lx-band .u-mono{ color:rgba(255,255,255,.72); } .lx-band .t-small,.lx-band .u-muted{ color:rgba(255,255,255,.78); } .lx-shead__no{ flex:0 0 auto; } .lx-shead__title{ flex:1 1 220px; min-width:0; } /* グリッド */ .lx-grid{ display:grid; gap:clamp(20px,3vw,40px); } .lx-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .lx-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:860px){ .lx-grid--3{ grid-template-columns:1fr; } } @media (max-width:640px){ .lx-grid--2{ grid-template-columns:1fr; } } /* ---------- 5. 共通コンポーネント ---------- */ /* 5-1 ホバー下線 (scaleX。左から入り右へ抜ける) */ .u-line{ position:relative; display:inline-block; text-decoration:none; color:inherit; padding-bottom:.06em; } .u-line::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:100% 50%; transition:transform var(--dur) var(--ease-out); } .u-line:hover::after, .u-line:focus-visible::after{ transform:scaleX(1); transform-origin:0 50%; } /* 小さい文字のリンクでもタップ領域 44px を確保する (検収基準 §9-7)。 ::before で当たり判定だけ広げるので、下線位置と行送りは動かない */ .u-tap{ position:relative; } .u-tap::before{ content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); } /* 矢印スライド */ .u-arrow{ display:inline-flex; align-items:center; gap:.5em; } .u-arrow__ico{ display:inline-block; transition:transform var(--dur) var(--ease-out); font-family:var(--font-mono); } .u-arrow:hover .u-arrow__ico, .u-arrow:focus-visible .u-arrow__ico{ transform:translateX(.35em); } /* 5-2 ピル型タグ */ .lx-tag{ display:inline-block; padding:.42em 1em; border:1px solid var(--line-strong); border-radius:999px; font-size:1rem; line-height:1.5; letter-spacing:.04em; color:var(--ink-2); background:transparent; } .lx-tag--fill{ background:var(--navy); border-color:var(--navy); color:#fff; } .lx-tag--accent{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } .lx-band .lx-tag{ border-color:rgba(255,255,255,.45); color:rgba(255,255,255,.92); } .lx-tags{ display:flex; flex-wrap:wrap; gap:8px 10px; } /* 5-3 バッジ (希少投入のゴールド / ラベル系) */ .lx-badge{ display:inline-flex; align-items:center; gap:.5em; padding:.45em .95em; border-radius:2px; font-family:var(--font-mono); font-size:1rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; background:var(--gold); color:var(--navy); font-feature-settings:normal; } .lx-badge--outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); } .lx-badge--ink{ background:var(--ink); color:var(--canvas); } .lx-badge--dot::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:0 0 auto; } .lx-band .lx-badge--outline{ color:#fff; border-color:rgba(255,255,255,.7); } /* ラベル (自主制作 等。和文なので Mono ではなく Zen Kaku) */ .lx-label{ display:inline-block; padding:.4em .9em; border:1px solid var(--ink); border-radius:999px; font-size:1rem; letter-spacing:.06em; line-height:1.5; } /* 5-4 ボタン (タップ領域 44px 以上を確保) */ .lx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:52px; padding:0 clamp(22px,3vw,38px); border-radius:999px; background:var(--navy); color:#fff; font-size:1rem; font-weight:500; letter-spacing:.06em; text-decoration:none; border:1px solid var(--navy); transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); cursor:pointer; } .lx-btn:hover,.lx-btn:focus-visible{ background:var(--gold); border-color:var(--gold); color:var(--navy); } .lx-btn__ico{ font-family:var(--font-mono); transition:transform var(--dur) var(--ease-out); } .lx-btn:hover .lx-btn__ico,.lx-btn:focus-visible .lx-btn__ico{ transform:translateX(.35em); } .lx-btn--gold{ background:var(--gold); border-color:var(--gold); color:var(--navy); } .lx-btn--gold:hover,.lx-btn--gold:focus-visible{ background:var(--navy); border-color:var(--navy); color:#fff; } .lx-btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-strong); } .lx-btn--ghost:hover,.lx-btn--ghost:focus-visible{ background:var(--ink); border-color:var(--ink); color:var(--canvas); } .lx-band .lx-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.6); } .lx-band .lx-btn--ghost:hover{ background:#fff; color:var(--accent); border-color:#fff; } /* 5-5 メタ情報 (Mono 定義リスト) */ .lx-meta{ display:grid; grid-template-columns:minmax(140px,190px) minmax(0,1fr); border-top:1px solid var(--line); } .lx-meta > dt{ grid-column:1; padding:16px 16px 16px 0; border-bottom:1px solid var(--line); font-family:var(--font-mono); font-size:1rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1.8; font-feature-settings:normal; } .lx-meta > dd{ grid-column:2; padding:16px 0; border-bottom:1px solid var(--line); font-size:1rem; line-height:1.8; letter-spacing:.03em; } @media (max-width:640px){ .lx-meta{ grid-template-columns:1fr; } .lx-meta > dt{ grid-column:1; padding:14px 0 2px; border-bottom:0; } .lx-meta > dd{ grid-column:1; padding:0 0 14px; } } /* 5-6 4象限 (罫線区切り。設計メモ / 業務設計メモ 共通) */ .lx-quad{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); } .lx-quad__cell{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(22px,3vw,40px); min-width:0; } .lx-quad__no{ display:block; margin-bottom:10px; } .lx-quad__title{ margin-bottom:14px; } .lx-quad__list > li{ position:relative; padding-left:1.15em; margin-top:.7em; font-size:1rem; line-height:1.85; letter-spacing:.03em; } .lx-quad__list > li::before{ content:""; position:absolute; left:0; top:.85em; width:7px; height:1px; background:currentColor; opacity:.55; } @media (max-width:720px){ .lx-quad{ grid-template-columns:1fr; } } /* 帯の上に置く場合の罫線色 */ .lx-quad--on-band{ border-top-color:rgba(255,255,255,.32); border-left-color:rgba(255,255,255,.32); } .lx-quad--on-band .lx-quad__cell{ border-right-color:rgba(255,255,255,.32); border-bottom-color:rgba(255,255,255,.32); } /* 淡色面の上に置く場合 */ .lx-quad--on-soft{ border-top-color:var(--line-strong); border-left-color:var(--line-strong); } .lx-quad--on-soft .lx-quad__cell{ border-right-color:var(--line-strong); border-bottom-color:var(--line-strong); } /* 5-7 プレースホルダー面 (スクショ・動画が入るまでの仮置き) */ .lx-ph{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; background:var(--accent-soft); background-image:repeating-linear-gradient( 135deg, rgba(0,0,0,.028) 0 1px, transparent 1px 9px ); border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--ink-3); overflow:hidden; } .lx-ph__inner{ text-align:center; padding:20px; max-width:100%; } .lx-ph__ico{ display:block; margin:0 auto 12px; width:34px; height:34px; border:1px solid currentColor; border-radius:50%; line-height:32px; font-family:var(--font-mono); font-size:1rem; font-feature-settings:normal; } .lx-ph--16x9{ aspect-ratio:16/9; } .lx-ph--4x3{ aspect-ratio:4/3; } .lx-ph--pc{ aspect-ratio:16/10; } .lx-ph--long{ aspect-ratio:2/5; } /* LP縦長スクショ */ .lx-ph--sp{ aspect-ratio:9/19.5; } /* 淡色面(.lx-soft)の上では、面と同色になって沈まないよう白に起こす */ .lx-soft .lx-ph{ background:#fff; } .lx-band .lx-ph{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.42); color:rgba(255,255,255,.9); background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px); } /* ブラウザ枠 (PCスクショの見せ枠) */ .lx-browser{ border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:#fff; overflow:hidden; box-shadow:0 18px 46px -28px rgba(11,31,58,.4); } .lx-browser__bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--canvas-2); border-bottom:1px solid var(--line); } .lx-browser__dot{ width:9px; height:9px; border-radius:50%; background:var(--line-strong); flex:0 0 auto; } .lx-browser__url{ margin-left:10px; flex:1 1 auto; min-width:0; padding:4px 12px; border-radius:999px; background:#fff; border:1px solid var(--line); font-family:var(--font-mono); font-size:1rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-feature-settings:normal; } .lx-browser__screen{ background:var(--canvas); } .lx-browser__screen .lx-ph{ border:0; border-radius:0; } /* スマホフレーム (CSSのみで描画) */ .lx-phones{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); align-items:flex-start; } .lx-phone-fig{ flex:1 1 170px; max-width:250px; min-width:0; } .lx-phone{ padding:11px 11px 13px; border-radius:34px; background:#1b1d20; border:1px solid #2c2f34; box-shadow:0 22px 50px -26px rgba(11,31,58,.55); } .lx-phone__notch{ width:56px; height:5px; margin:0 auto 9px; border-radius:999px; background:#3a3e44; } .lx-phone__screen{ border-radius:24px; overflow:hidden; background:var(--canvas); } .lx-phone__screen .lx-ph{ border:0; border-radius:0; } /* キャプションは端末フレームの外に出す (黒いベゼルの上だと読めない) */ .lx-phone__cap{ margin-top:12px; text-align:center; } .lx-band .lx-phone__cap .u-mono{ color:rgba(255,255,255,.72); } /* 5-8 検証3案カード (SVGワイヤー) */ .lx-plan{ display:flex; flex-direction:column; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.4); border-radius:var(--radius); padding:clamp(16px,2vw,24px); min-width:0; transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .lx-plan:hover{ background:rgba(255,255,255,.11); } .lx-plan__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .lx-plan__wire{ background:rgba(255,255,255,.94); border-radius:2px; padding:10px; } .lx-plan__wire svg{ width:100%; height:auto; display:block; } .lx-plan__order{ margin-top:12px; font-family:var(--font-mono); font-size:1rem; letter-spacing:.1em; line-height:1.9; color:rgba(255,255,255,.8); word-break:break-word; font-feature-settings:normal; } .lx-plan__why{ margin-top:12px; font-size:1rem; line-height:1.8; letter-spacing:.03em; } .lx-plan--picked{ background:rgba(255,255,255,.16); border-color:#fff; } .lx-plan__pick{ display:inline-flex; align-items:center; gap:.4em; padding:.3em .75em; border-radius:999px; background:var(--gold); color:var(--navy); font-family:var(--font-mono); font-size:1rem; letter-spacing:.14em; font-feature-settings:normal; } /* 5-9 フッター */ .lx-footer{ background:var(--ink); color:var(--canvas); padding-block:clamp(48px,6vw,80px); } .lx-footer a{ color:inherit; } .lx-footer__top{ display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,48px); justify-content:space-between; align-items:flex-start; padding-bottom:clamp(28px,4vw,44px); border-bottom:1px solid rgba(255,255,255,.16); } .lx-footer__nav{ display:flex; flex-wrap:wrap; gap:14px 26px; } .lx-footer__bottom{ display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; align-items:center; padding-top:clamp(20px,3vw,32px); } .lx-footer .u-mono{ color:rgba(255,255,255,.6); } .lx-footer__note{ font-size:1rem; line-height:1.8; color:rgba(255,255,255,.68); max-width:56ch; letter-spacing:.03em; } .lx-footer__copy{ font-family:var(--font-mono); font-size:1rem; letter-spacing:.1em; color:rgba(255,255,255,.6); font-feature-settings:normal; } /* 5-10 次のショーケースへ */ .lx-next{ display:block; text-decoration:none; padding-block:clamp(56px,8vw,120px); border-top:1px solid var(--line); background:var(--canvas); } .lx-next__row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:clamp(16px,3vw,40px); } .lx-next__ico{ font-family:var(--font-mono); font-size:clamp(1.5rem,3vw,2.4rem); transition:transform var(--dur) var(--ease-out); display:inline-block; } .lx-next:hover .lx-next__ico,.lx-next:focus-visible .lx-next__ico{ transform:translateY(.28em); } .lx-next:hover .t-display--mid{ color:var(--accent); transition:color var(--dur) var(--ease-out); } /* 5-11 ヒーロー帯 */ .lx-hero{ background:var(--accent); color:var(--on-accent); padding-block:14px clamp(56px,7vw,96px); position:relative; overflow:hidden; } .lx-hero__kicker{ margin-top:clamp(56px,8vw,112px); margin-bottom:clamp(18px,2.4vw,28px); } .lx-hero__title{ color:#fff; } .lx-hero__ja{ margin-top:clamp(16px,2vw,26px); max-width:44ch; color:rgba(255,255,255,.9); } .lx-hero__stage{ margin-top:clamp(36px,5vw,72px); display:grid; gap:clamp(14px,2vw,26px); grid-template-columns:minmax(0,1.62fr) minmax(0,1fr); align-items:end; } @media (max-width:720px){ .lx-hero__stage{ grid-template-columns:1fr; } } /* 5-12 パンくず / 戻り導線 */ .lx-topbar{ position:relative; z-index:3; padding-block:20px; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; } .lx-topbar a{ text-decoration:none; } .lx-hero .lx-topbar{ color:rgba(255,255,255,.86); } /* ヒーロー帯の中の小物は白基調に寄せる */ .lx-hero .u-mono,.lx-hero .u-num{ color:rgba(255,255,255,.75); } .lx-hero .lx-topbar .u-mono{ color:inherit; } .lx-hero .t-note{ color:rgba(255,255,255,.66); } /* プレースホルダー面の中の Mono ラベルは、帯の白文字ルールに引っ張られず 面自身の文字色を継ぐ (セクション5の最後に置いて優先順位を確定させる) */ .lx-ph .u-mono,.lx-ph .u-num{ color:inherit; } /* 5-13 スキップリンク */ .lx-skip{ position:absolute; left:12px; top:-64px; z-index:99; padding:12px 18px; min-height:44px; display:inline-flex; align-items:center; background:var(--ink); color:var(--canvas); text-decoration:none; border-radius:2px; transition:top .2s var(--ease-out); } .lx-skip:focus{ top:12px; } /* 5-14 デモ節 (⑨) の2カラム */ .lx-demo{ display:grid; gap:clamp(24px,3.5vw,48px); grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; } @media (max-width:860px){ .lx-demo{ grid-template-columns:1fr; } } .lx-demo__cta{ margin-top:clamp(20px,3vw,32px); display:flex; flex-wrap:wrap; gap:14px; } /* 5-15 効果試算リスト */ .lx-figure-list > li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:14px 0; border-bottom:1px solid var(--line-strong); } .lx-figure-list > li:first-child{ border-top:1px solid var(--line-strong); } .lx-figure-list__k{ flex:1 1 170px; min-width:0; font-size:1rem; line-height:1.7; } .lx-figure-list__v{ flex:0 0 auto; font-family:var(--font-mono); font-size:1rem; letter-spacing:.04em; color:var(--accent-deep); font-feature-settings:normal; } /* ---------- 6. 出現アニメの初期状態 ---------- JS(motion.js)が html に .lx-motion を付けた時だけ隠す。 JS無効 / file:// / reduced-motion では常に最終状態のまま = CLSも欠落も起きない。 */ .lx-motion [data-reveal]{ opacity:0; } .lx-motion [data-reveal-item]{ opacity:0; } /* 行単位マスク (HTMLに焼き込む方式 = 実行時に分割しないのでCLSゼロ) */ .lx-mask{ display:block; } /* 行ボックスをそのままマスクにする。padding で逃がすと隣接マージンの相殺で 行送りが狂うため、余白は足さない。マスクを掛ける見出しは欧文の大文字と 明朝の「MEMO」だけなので、ディセンダの欠けは起きない */ .lx-mask__line{ display:block; overflow:hidden; } .lx-mask__inner{ display:block; will-change:transform; } .lx-motion .lx-mask__inner{ transform:translateY(110%); } /* ---------- 7. reduced-motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .lx-motion [data-reveal], .lx-motion [data-reveal-item]{ opacity:1 !important; } .lx-motion .lx-mask__inner{ transform:none !important; } } /* ---------- 8. 印刷 ---------- */ @media print{ .lx-motion [data-reveal],.lx-motion [data-reveal-item]{ opacity:1 !important; } .lx-motion .lx-mask__inner{ transform:none !important; } .lx-band,.lx-hero{ background:#fff !important; color:#000 !important; } } /* ============================================================ 9. HUB (site/index.html 専用) ※指示書でいう「6. HUB」ブロック 既存の定義は1行も変更していません。ここから下は追記だけです。 番号を 9 にしたのは、上に 6(出現アニメ) と 8(印刷) が既にあり、 同じ番号を2つ置くと読み手が迷うためです。 セレクタはすべてハブ側のクラスに閉じてあるので、works/{slug} など 既存ページの見え方には影響しません。 ============================================================ */ /* 9-1 アンカーの着地位置 (固定ナビのぶんだけ逃がす) */ #intro,#works,#pricing,#flow,#faq,#about,#contact{ scroll-margin-top:72px; } /* 9-2 ローダー 既定は display:none。JS が html に .is-loading を付けた時だけ出す。 JS無効 / 2回目以降 / reduced-motion では最初から本文が見えます (本文をCSSだけで隠す作りにはしていません)。 */ .lx-loader{ display:none; } .is-loading .lx-loader{ display:flex; align-items:center; justify-content:center; position:fixed; top:0; right:0; bottom:0; left:0; z-index:120; background:var(--canvas); opacity:1; transition:opacity .42s var(--ease-out); } .is-loaded .lx-loader{ opacity:0; pointer-events:none; } .lx-loader__inner{ text-align:center; } .lx-loader__mark{ width:72px; margin:0 auto; color:var(--ink); } .lx-loader__name{ margin-top:18px; font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.16em; } .lx-loader__bar{ position:relative; overflow:hidden; width:104px; height:1px; margin:14px auto 0; background:var(--line); } .lx-loader__bar::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:var(--gold); transform:scaleX(1); transform-origin:0 50%; animation:lx-loader-bar 1.05s var(--ease-out); } @keyframes lx-loader-bar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } /* 9-3 固定ナビ */ .lx-nav{ position:fixed; top:0; right:0; left:0; z-index:60; background:rgba(250,248,244,.88); -webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line); } .lx-nav__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 20px; min-height:54px; } .lx-nav__logo{ flex:0 0 auto; text-decoration:none; font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:.06em; } .lx-nav__list{ display:flex; align-items:center; gap:clamp(11px,1.7vw,28px); min-width:0; } .lx-nav__link{ text-decoration:none; white-space:nowrap; font-family:var(--font-mono); font-weight:500; font-size:1rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-feature-settings:normal; transition:color var(--dur) var(--ease-out); } .lx-nav__link:hover,.lx-nav__link:focus-visible, .lx-nav__link.is-current{ color:var(--ink); } .lx-nav__link.is-current::after{ transform:scaleX(1); transform-origin:0 50%; } @media (max-width:700px){ .lx-nav .lx-wrap{ padding-inline:16px; } .lx-nav__row{ min-height:50px; gap:4px 10px; } .lx-nav__logo{ font-size:1rem; } .lx-nav__list{ gap:9px; } .lx-nav__link{ font-size:1rem; letter-spacing:.07em; } .lx-nav__count{ display:none; } } /* 9-4 FV Phase 1 で HiggsField の動画に差し替える前提の「静止でも完成している」版。 装飾は金色の光線1本だけ。reduced-motion では引き終わった状態で静止します。 */ .lx-fv{ position:relative; overflow:hidden; display:flex; align-items:center; background:var(--canvas); padding-top:clamp(104px,15vh,168px); padding-bottom:clamp(48px,8vh,96px); min-height:100vh; min-height:100svh; border-bottom:1px solid var(--line); } .lx-fv__inner{ position:relative; z-index:2; width:100%; } .lx-fv__ray{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:1; pointer-events:none; } .lx-fv__ray svg{ width:100%; height:100%; display:block; } /* 光線: 描き終わり(stroke-dashoffset:0)が既定の姿。 アニメはそこへ向かって伸びるだけなので、動きを止めても完成状態のままです。 */ .lx-fv__ray path{ stroke-dasharray:1; stroke-dashoffset:0; animation:lx-ray-draw 3.2s var(--ease-out); } @keyframes lx-ray-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } } .lx-fv__badge{ display:inline-flex; align-items:center; gap:.65em; padding:.55em 1.05em; border-radius:999px; border:1px solid var(--line-strong); background:rgba(255,255,255,.62); font-family:var(--font-mono); font-weight:500; font-size:1rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-feature-settings:normal; } .lx-fv__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:#2E9E5B; box-shadow:0 0 0 3px rgba(46,158,91,.16); } .lx-fv__h1{ margin:clamp(22px,3.4vw,40px) 0 0; font-weight:400; } .lx-fv__mark{ display:block; font-family:var(--font-display); font-weight:800; font-size:clamp(3.4rem,25.5vw,12.5rem); line-height:.92; letter-spacing:-.02em; } .lx-fv__lead{ display:block; margin-top:clamp(18px,2.6vw,34px); font-size:clamp(1.3rem,3.5vw,2.75rem); line-height:1.28; letter-spacing:.005em; font-weight:700; } .lx-fv__sub{ margin-top:clamp(12px,1.6vw,20px); color:var(--ink-2); font-size:clamp(1rem,1.35vw,1.125rem); letter-spacing:.04em; } .lx-fv__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(18px,3vw,40px); margin-top:clamp(30px,5vh,58px); } .lx-fv__scroll{ display:inline-flex; align-items:center; gap:.8em; } .lx-fv__track{ position:relative; overflow:hidden; display:block; width:54px; height:1px; background:var(--line-strong); } .lx-fv__track::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:var(--ink); transform:scaleX(1); transform-origin:0 50%; animation:lx-scroll-hint 2.6s var(--ease-out) infinite; } @keyframes lx-scroll-hint{ 0% { transform:scaleX(0); transform-origin:0 50%; } 42% { transform:scaleX(1); transform-origin:0 50%; } 58% { transform:scaleX(1); transform-origin:100% 50%; } 100%{ transform:scaleX(0); transform-origin:100% 50%; } } /* 9-5 3秒理解の3カード */ .lx-card{ border-top:1px solid var(--line-strong); padding-top:clamp(18px,2.2vw,26px); min-width:0; } .lx-card__no{ display:block; margin-bottom:clamp(12px,1.6vw,18px); } .lx-card__title{ margin-bottom:12px; } .lx-card__price{ margin-top:14px; font-family:var(--font-mono); font-weight:500; font-size:clamp(1rem,1.5vw,1.0625rem); letter-spacing:.02em; line-height:1.9; color:var(--ink); font-feature-settings:normal; } /* 9-6 Works グリッド */ .lx-works{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(34px,4.4vw,72px) clamp(20px,3vw,40px); } @media (max-width:760px){ .lx-works{ grid-template-columns:1fr; } } .lx-work{ display:block; text-decoration:none; color:inherit; min-width:0; } .lx-work__thumb{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--accent); aspect-ratio:16/10; } .lx-work__frame{ position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 10px); transition:transform .7s var(--ease-out); } .lx-work__glow{ position:absolute; top:0; right:0; bottom:0; left:0; opacity:0; mix-blend-mode:screen; background:radial-gradient(115% 85% at 50% 100%,var(--accent-2),rgba(255,255,255,0) 64%); transition:opacity .7s var(--ease-out); } .lx-work__phlabel{ position:relative; z-index:2; font-family:var(--font-mono); font-weight:500; font-size:1rem; letter-spacing:.16em; line-height:2; color:rgba(255,255,255,.82); font-feature-settings:normal; } .lx-work:hover .lx-work__frame, .lx-work:focus-visible .lx-work__frame{ transform:scale(1.045); } .lx-work:hover .lx-work__glow, .lx-work:focus-visible .lx-work__glow{ opacity:.5; } .lx-work__body{ padding-top:clamp(16px,2vw,22px); } .lx-work__meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding-bottom:10px; border-bottom:1px solid var(--line); } .lx-work__cat{ font-size:1rem; letter-spacing:.1em; color:var(--ink-3); } .lx-work__name{ margin-top:14px; font-size:clamp(1.125rem,1.9vw,1.4375rem); line-height:1.4; font-weight:700; letter-spacing:.02em; transition:color var(--dur) var(--ease-out); } .lx-work__en{ margin-top:4px; font-family:var(--font-display); font-weight:700; font-size:clamp(1.375rem,2.7vw,2.1rem); line-height:1.02; letter-spacing:-.015em; text-transform:uppercase; color:var(--ink-3); transition:color var(--dur) var(--ease-out); } .lx-work:hover .lx-work__name, .lx-work:focus-visible .lx-work__name, .lx-work:hover .lx-work__en, .lx-work:focus-visible .lx-work__en{ color:var(--accent); } .lx-work__tags{ margin-top:14px; } .lx-work .lx-tag{ border-color:var(--accent); color:var(--accent); } .lx-work__text{ margin-top:14px; } .lx-work__more{ display:inline-flex; align-items:center; gap:.5em; margin-top:16px; font-family:var(--font-mono); font-size:1rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-feature-settings:normal; } .lx-work__more span{ transition:transform var(--dur) var(--ease-out); font-family:var(--font-mono); } .lx-work:hover .lx-work__more span, .lx-work:focus-visible .lx-work__more span{ transform:translateX(.35em); } /* 業界アクセント。data-industry でカード単位に色を差し替える */ .lx-work[data-industry="cleaning"]{ --accent:#1E6F9F; --accent-2:#7FC1E3; } .lx-work[data-industry="denki"] { --accent:#1B2A41; --accent-2:#F2B705; } .lx-work[data-industry="dining"] { --accent:#8C2F1B; --accent-2:#E0A56B; } .lx-work[data-industry="cars"] { --accent:#2E3238; --accent-2:#C8CCD2; } .lx-work[data-industry="salon"] { --accent:#C48A7E; --accent-2:#E8CFC6; } .lx-work[data-industry="dental"] { --accent:#38606D; --accent-2:#9FBFC9; } .lx-work[data-industry="kaikei"] { --accent:#0B1F3A; --accent-2:#C9A227; } /* 7件目のワイドカード */ .lx-work--wide{ grid-column:1 / -1; } .lx-work--wide .lx-work__inner{ display:grid; gap:clamp(18px,3vw,44px); grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr); align-items:center; border-top:1px solid var(--line-strong); padding-top:clamp(24px,3vw,40px); } .lx-work--wide .lx-work__thumb{ aspect-ratio:16/7; } .lx-work--wide .lx-work__body{ padding-top:0; } @media (max-width:760px){ .lx-work--wide .lx-work__inner{ grid-template-columns:1fr; } .lx-work--wide .lx-work__thumb{ aspect-ratio:16/9; } .lx-work--wide .lx-work__body{ padding-top:clamp(16px,2vw,22px); } } /* 9-7 Pricing */ .lx-plans{ display:grid; gap:clamp(16px,2.2vw,26px); grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:900px){ .lx-plans{ grid-template-columns:1fr; } } .lx-pcard{ position:relative; display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-lg); padding:clamp(24px,2.8vw,36px); } .lx-pcard--pop{ border-color:var(--navy); box-shadow:0 24px 54px -36px rgba(11,31,58,.55); } .lx-pcard__pop{ position:absolute; top:-14px; left:clamp(24px,2.8vw,36px); } .lx-pcard__no{ display:block; margin-bottom:12px; } .lx-pcard__name{ font-size:clamp(1.0625rem,1.6vw,1.25rem); font-weight:700; letter-spacing:.04em; line-height:1.4; } .lx-pcard__price{ margin-top:14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35em; font-family:var(--font-display); font-weight:700; font-size:clamp(1.75rem,3.2vw,2.4rem); line-height:1.05; letter-spacing:-.01em; } .lx-pcard__unit{ font-family:var(--font-ja); font-size:1rem; font-weight:500; color:var(--ink-2); letter-spacing:.06em; } .lx-pcard__text{ margin-top:16px; } .lx-pcard__list{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .lx-pcard__list > li{ position:relative; padding-left:1.2em; margin-top:.5em; font-size:1rem; line-height:1.85; letter-spacing:.03em; } .lx-pcard__list > li::before{ content:""; position:absolute; left:0; top:.82em; width:8px; height:1px; background:var(--gold); } .lx-strip{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 28px; margin-top:clamp(16px,2.2vw,26px); padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px); border:1px solid var(--line-strong); border-radius:var(--radius-lg); background:#fff; } .lx-strip__price{ font-family:var(--font-mono); font-size:1.0625rem; letter-spacing:.04em; color:var(--navy); font-feature-settings:normal; } .lx-minis{ display:grid; gap:clamp(14px,2vw,22px); grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:760px){ .lx-minis{ grid-template-columns:1fr; } } .lx-mini{ min-width:0; background:#fff; border:1px solid var(--line-strong); border-radius:var(--radius-lg); padding:clamp(20px,2.4vw,28px); } .lx-mini__name{ font-size:1rem; font-weight:700; letter-spacing:.04em; line-height:1.5; } .lx-mini__price{ margin-top:10px; font-family:var(--font-display); font-weight:700; font-size:clamp(1.375rem,2.4vw,1.75rem); line-height:1.1; letter-spacing:-.01em; } .lx-mini__text{ margin-top:12px; } /* 9-8 Flow */ .lx-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line-strong); } .lx-step{ min-width:0; padding:clamp(22px,2.6vw,34px) clamp(16px,1.8vw,26px) clamp(26px,3vw,40px); border-bottom:1px solid var(--line-strong); border-right:1px solid var(--line); } .lx-step:last-child{ border-right:0; } @media (max-width:860px){ .lx-steps{ grid-template-columns:1fr; } .lx-step{ border-right:0; padding-inline:0; } } .lx-step__no{ display:block; margin-bottom:12px; color:var(--gold); } .lx-step__title{ margin-bottom:10px; } .lx-principles{ display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:860px){ .lx-principles{ grid-template-columns:1fr; } } .lx-principle{ min-width:0; border-left:2px solid var(--gold); padding:2px 0 2px clamp(16px,2vw,24px); } .lx-principle__title{ font-size:clamp(1rem,1.5vw,1.125rem); font-weight:700; line-height:1.5; letter-spacing:.03em; } .lx-principle__text{ margin-top:10px; } /* 9-9 FAQ (details ベース。JSが無くても開閉します) */ .lx-faq{ border-top:1px solid var(--line-strong); max-width:900px; } .lx-faq__item{ border-bottom:1px solid var(--line-strong); } .lx-faq__q{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; min-height:64px; padding:19px 0; cursor:pointer; list-style:none; font-size:clamp(1rem,1.5vw,1.125rem); font-weight:500; line-height:1.6; letter-spacing:.03em; } .lx-faq__q::-webkit-details-marker{ display:none; } .lx-faq__q::marker{ content:""; } .lx-faq__ico{ position:relative; flex:0 0 auto; margin-top:3px; width:26px; height:26px; border:1px solid var(--line-strong); border-radius:50%; } .lx-faq__ico::before,.lx-faq__ico::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1px; background:var(--ink); transform:translate(-50%,-50%); transition:transform var(--dur) var(--ease-out); } .lx-faq__ico::after{ transform:translate(-50%,-50%) rotate(90deg); } .lx-faq__item[open] .lx-faq__ico::after{ transform:translate(-50%,-50%) rotate(0deg); } .lx-faq__a{ padding:0 0 26px; max-width:60ch; font-size:1rem; line-height:1.9; } /* 9-10 About */ .lx-about{ display:grid; gap:clamp(30px,4vw,72px); grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr); align-items:start; } @media (max-width:860px){ .lx-about{ grid-template-columns:1fr; } } .lx-monogram{ width:clamp(116px,15vw,172px); height:auto; color:var(--ink); } .lx-tl{ border-top:1px solid var(--line-strong); } .lx-tl__row{ display:grid; gap:6px clamp(16px,2.4vw,36px); grid-template-columns:minmax(120px,178px) minmax(0,1fr); padding:clamp(18px,2.4vw,28px) 0; border-bottom:1px solid var(--line); } @media (max-width:640px){ .lx-tl__row{ grid-template-columns:1fr; } } .lx-tl__label{ padding-top:.35em; } .lx-tl__org{ font-size:clamp(1rem,1.6vw,1.1875rem); font-weight:700; line-height:1.5; letter-spacing:.03em; } .lx-tl__text{ margin-top:10px; } .lx-about__close{ margin-top:clamp(26px,3.4vw,44px); padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,34px); background:#fff; border-left:2px solid var(--gold); font-size:clamp(1rem,1.6vw,1.1875rem); line-height:1.8; font-weight:500; letter-spacing:.03em; } /* 9-11 Contact (紺の帯の上) */ .lx-contact{ display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; } @media (max-width:860px){ .lx-contact{ grid-template-columns:1fr; } } .lx-contact .t-note{ color:rgba(255,255,255,.66); } .lx-form{ position:relative; display:grid; gap:clamp(16px,2vw,22px); } .lx-field{ display:block; min-width:0; } .lx-field__label{ display:block; margin-bottom:9px; } .lx-field__req{ margin-left:.6em; color:var(--gold); font-family:var(--font-mono); font-size:1rem; letter-spacing:.12em; font-feature-settings:normal; } .lx-input,.lx-textarea,.lx-select{ display:block; width:100%; min-height:52px; padding:14px 16px; border:1px solid rgba(255,255,255,.34); border-radius:var(--radius); background:#fff; color:var(--ink); font-family:var(--font-ja); font-size:1rem; line-height:1.7; letter-spacing:.03em; } .lx-textarea{ min-height:168px; resize:vertical; } .lx-select{ appearance:none; -webkit-appearance:none; padding-right:44px; } .lx-select-wrap{ position:relative; display:block; } .lx-select-wrap::after{ content:""; position:absolute; right:18px; top:50%; width:8px; height:8px; pointer-events:none; border-right:1px solid var(--ink-2); border-bottom:1px solid var(--ink-2); transform:translateY(-72%) rotate(45deg); } .lx-form__submit{ margin-top:clamp(6px,1vw,10px); } .lx-form__submit .lx-btn{ width:100%; } @media (min-width:520px){ .lx-form__submit .lx-btn{ width:auto; min-width:260px; } } /* 9-12 ハブのフッター内リンク間隔 (works と同型のまま) */ .lx-hubfoot .lx-footer__nav{ gap:14px 26px; } /* ============================================================ 10. HP (開発部門トップ刷新 2026-08-22) ハブのカードグリッド型セクションを、罫線の行型に置き換えた分。 既存の 9-x は works/_template との共有があるため残したまま、 新しいクラスだけをここに足しています。 ============================================================ */ /* 10-1 和文の大見出し (英字 t-display の和文版。行間は詰めない) */ .t-disp-ja{ font-family:var(--font-ja); font-weight:700; font-size:clamp(1.625rem,3.2vw,2.5rem); line-height:1.25; letter-spacing:.02em; } /* 10-2 FVの部門ラベル (旧バッジの置き換え。枠は付けない) */ .lx-fv__dept{ display:inline-flex; align-items:center; gap:14px; font-size:1rem; letter-spacing:.14em; color:var(--ink-2); } .lx-fv__deptline{ display:block; width:34px; height:1px; background:var(--gold); } /* 10-3 事業内容: 定義行 */ .lx-svc__intro{ max-width:60ch; } .lx-svc{ margin-top:clamp(28px,3.6vw,48px); border-top:1px solid var(--line-strong); } .lx-svc__row{ display:grid; gap:10px clamp(24px,4vw,64px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); padding:clamp(24px,3vw,40px) 0; border-bottom:1px solid var(--line); align-items:start; } @media (max-width:760px){ .lx-svc__row{ grid-template-columns:1fr; } } .lx-svc__name{ font-size:clamp(1.1875rem,2vw,1.5rem); font-weight:700; line-height:1.4; letter-spacing:.03em; } .lx-svc__price{ margin-top:8px; font-size:1rem; color:var(--ink); } .lx-svc__price span{ font-family:var(--font-ja); font-size:1rem; color:var(--ink-2); margin-left:.5em; } .lx-svc__text{ max-width:52ch; padding-top:.35em; } /* 10-4 料金: 罫線の料金表 */ .lx-price__group{ margin:clamp(30px,4vw,52px) 0 4px; color:var(--ink-2); } .lx-price__group:first-of-type{ margin-top:clamp(20px,2.6vw,34px); } .lx-price{ border-top:1px solid var(--line-strong); } .lx-price__row{ display:grid; gap:6px clamp(18px,2.6vw,40px); grid-template-columns:minmax(130px,200px) minmax(120px,170px) minmax(0,1fr); align-items:baseline; padding:clamp(18px,2.2vw,26px) 0; border-bottom:1px solid var(--line); } @media (max-width:760px){ .lx-price__row{ grid-template-columns:minmax(0,1fr) auto; } .lx-price__text{ grid-column:1 / -1; } } .lx-price__name{ font-size:1rem; font-weight:700; letter-spacing:.04em; line-height:1.6; } .lx-price__pop{ margin-left:.8em; padding:3px 9px; font-size:1rem; font-weight:500; letter-spacing:.08em; color:var(--navy); border:1px solid var(--navy); border-radius:999px; white-space:nowrap; } .lx-price__num{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.1875rem,2vw,1.5rem); line-height:1.2; letter-spacing:-.01em; font-feature-settings:"tnum"; } .lx-price__per{ font-family:var(--font-ja); font-size:1rem; font-weight:500; color:var(--ink-2); margin-left:2px; } .lx-price__text{ max-width:56ch; } .lx-price__foot{ margin-top:clamp(26px,3.4vw,44px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; } .lx-price__foot .t-small{ flex:1 1 380px; max-width:52ch; } /* 10-5 進め方: 番号付きの行 */ .lx-flowl{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line-strong); } .lx-flowl__row{ display:grid; gap:6px clamp(18px,2.6vw,40px); grid-template-columns:56px minmax(150px,230px) minmax(0,1fr); align-items:start; padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line); } @media (max-width:760px){ .lx-flowl__row{ grid-template-columns:56px minmax(0,1fr); } .lx-flowl__text{ grid-column:2 / -1; } } .lx-flowl__no{ padding-top:.4em; color:var(--gold); } .lx-flowl__title{ font-size:clamp(1.0625rem,1.7vw,1.25rem); font-weight:700; line-height:1.5; letter-spacing:.03em; } .lx-flowl__text{ max-width:56ch; padding-top:.3em; } .lx-flowl__close{ margin-top:clamp(26px,3.4vw,44px); border-left:2px solid var(--gold); padding:2px 0 2px clamp(16px,2vw,24px); font-size:clamp(1rem,1.6vw,1.1875rem); line-height:1.9; font-weight:500; letter-spacing:.03em; max-width:44ch; } /* 10-6 部門について: 年表の小見出し */ .lx-tl__caption{ margin-bottom:14px; color:var(--ink-2); } /* 10-7 FVヒーロー動画 (HiggsField・スクロールスクラブ) 動画は光線SVGとコピーの下に敷く。poster=最終フレーム=静止版と同じ着地。 SP と reduced-motion では動画を出さず静止版のまま (設計書§5)。 スクラブ本体は hub.js の 4 が担当。JSが動かなくても poster で成立する。 */ .lx-fv__video{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:.9; /* 背景色は補正済みで--canvas一致。粒状感だけ軽く沈める */ } @media (max-width:860px){ .lx-fv__video{ display:none; } } @media (prefers-reduced-motion:reduce){ .lx-fv__video{ display:none; } } /* 10-8 実績カード: 業種を主役にした構成 (2026-08-23) ブランド名が主役だと何の業種の実績か一目で分からないため、 サムネの業種ラベル + 業種の大見出し → ブランド名の順に組み替えた分。 旧 .lx-work__name / .lx-work__en は index.html から外れたが 9-6 は不触。 */ .lx-work__badge{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:8px; padding:7px 12px; background:rgba(250,248,244,.94); border-radius:3px; font-size:1rem; font-weight:700; letter-spacing:.06em; line-height:1; color:var(--ink); } .lx-work__badge::before{ content:""; flex:none; width:8px; height:8px; border-radius:1px; background:var(--accent); } .lx-work__ind{ margin-top:14px; font-size:clamp(1.375rem,2.4vw,1.9375rem); line-height:1.3; font-weight:700; letter-spacing:.02em; transition:color var(--dur) var(--ease-out); } .lx-work:hover .lx-work__ind, .lx-work:focus-visible .lx-work__ind{ color:var(--accent); } .lx-work__brand{ margin-top:8px; font-size:1rem; letter-spacing:.02em; color:var(--ink-2); } .lx-work__brand-en{ margin-left:.7em; font-family:var(--font-display); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); } /* 10-9 実績の締め: 掲載外の業種の受け皿 */ .lx-anyind{ margin-top:clamp(44px,5.4vw,80px); border-top:1px solid var(--line-strong); padding-top:clamp(30px,3.8vw,52px); } .lx-anyind__cap{ color:var(--gold); letter-spacing:.2em; } .lx-anyind__head{ margin-top:12px; font-size:clamp(1.25rem,2.2vw,1.75rem); line-height:1.5; font-weight:700; letter-spacing:.02em; } .lx-anyind__text{ margin-top:14px; max-width:62ch; } .lx-anyind__tags{ margin-top:clamp(20px,2.6vw,30px); max-width:760px; } .lx-anyind__cta{ margin-top:clamp(24px,3vw,38px); }