/* ============================================================= Luxar corporate site — Lumen v3 "Glass Atelier" 要求: docs/2026-08-13-v3-brief.md ／ 文言 SoT: docs/copy-deck.md（v6） 実装判断の記録: docs/2026-08-13-v3-implementation-notes.md 構成: ペライチ（index）+ careers + contact + legal。 帯: シルバーを感じる薄いグレーの明帯が基調。CTA+footer も同じ明帯で閉じる。 FV: 生成画像＋生成動画のシルク（reduced-motion・動画非対応時は静止画へフォールバック）。 ============================================================= */ :root{ /* 地色: クリーム（黄み）から、若干シルバーを感じる薄いグレーへ（Figma #30）。 参考画像の地色 #F3EFEB を基準に、黄みを抜いてニュートラル寄りに置いた。 */ --cream:#EFEFEC; --cream-deep:#E5E5E1; --ink:#211E18; /* 11px の補助文字でもクリーム地に対して WCAG AA 4.5:1 を割らない最小濃度。 */ --ink-60:rgba(33,30,24,.72); --ink-40:rgba(33,30,24,.42); --dark-0:#14110C; --dark-1:#1B1812; --dark-2:#262219; --lite:#F2EEE3; --lite-70:rgba(242,238,227,.7); --lite-45:rgba(242,238,227,.45); --green:#A5C737; --green-deep:#6F8D18; /* 明帯テキスト用の濃緑（コントラスト確保） */ --amber:#F0BA6A; --teal:#59BFC2; --hairline:rgba(33,30,24,.14); /* ---- ガラス（実写リファレンスの実測に基づく・docs/2026-08-14-glass-research.md） ---- 明るい地の上では輝度の予算が 31 段しかない。だから板は「白を重ねる」のではなく 「ほぼ素通しにして、縁と接地だけで存在を示す」。 */ --glass:rgba(255,255,255,.16); --glass-lip:rgba(255,255,255,.92); /* 縁の内側＝明 */ --glass-edge:rgba(89,191,194,.20); /* 縁の外側＝暗かつ寒色。地の暖色と反転させる */ /* 板は色を持たない。色は背景側だけが持つ（2026-08-14 Founder 判断・調査とも一致）。 ガラスは自分で発色せず、後ろにあるものを通すだけ。 */ --font-jp:'Zen Kaku Gothic New',"Hiragino Kaku Gothic ProN",sans-serif; /* 和文明朝は廃止。h1 を含む和文見出しは Zen Kaku Gothic New のウェイトで立てる。 */ --font-display:'Zen Kaku Gothic New',"Hiragino Kaku Gothic ProN",sans-serif; --font-kicker:'Zen Kaku Gothic Antique','Zen Kaku Gothic New',sans-serif; --font-en:'Inter',sans-serif; --font-dot:'Doto',monospace; --gutter:clamp(20px,4.2vw,56px); --measure:38em; --type-body:16px; --type-note:14px; --leading-body:2; --leading-note:2; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } body{ font-family:var(--font-jp); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-break:strict; } /* 日本語の折り返しを文節で行う（「つくっていま/す。」「確かめまし/た。」対策）。 auto-phrase 非対応ブラウザは通常の禁則処理にフォールバックする。 */ h1,h2,h3,h4,p,dd,dt,li,figcaption{word-break:auto-phrase;overflow-wrap:normal} h1,h2,h3,.lead{text-wrap:pretty} img,svg{max-width:100%;display:block} a{color:inherit} ::selection{background:rgba(165,199,55,.35)} /* ============================================================= OPENING — 初回のみ。暗い状態から光の幕が上がって本編が現れる。 .has-opening は のインライン script が付ける（初回 × reduced-motion でない時だけ） ============================================================= */ .opening{display:none} .has-opening{overflow:hidden} .has-opening body{overflow:hidden} .has-opening .opening{ display:flex;align-items:center;justify-content:center; position:fixed;inset:0;z-index:200;overflow:hidden; background: radial-gradient(58% 44% at 74% 22%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%), linear-gradient(180deg, #F7F7F5 0%, var(--cream) 54%, var(--cream-deep) 100%); } /* シルクの糸が一度だけ画面を渡る。Founder の「もう少しゆっくり」に合わせ、 初回離脱を招かない約 1.4 倍に留めて細い線の束をマスクで通す。 */ .opening-silk{ position:absolute;inset:-24%;pointer-events:none;opacity:0; background: repeating-linear-gradient(-40deg, rgba(255,255,255,0) 0px, rgba(255,255,255,.95) 1px, rgba(255,255,255,0) 2.4px, rgba(255,255,255,0) 11px), repeating-linear-gradient(-40deg, rgba(240,186,106,0) 0px, rgba(240,186,106,.5) 1px, rgba(89,191,194,.42) 2px, rgba(89,191,194,0) 3.4px, rgba(89,191,194,0) 22px); -webkit-mask:linear-gradient(-40deg, transparent 34%, #000 50%, transparent 66%); mask:linear-gradient(-40deg, transparent 34%, #000 50%, transparent 66%); -webkit-mask-size:280% 280%;mask-size:280% 280%; animation:op-silk 3080ms cubic-bezier(.36,0,.16,1) 80ms forwards; } @keyframes op-silk{ 0% {opacity:0; -webkit-mask-position:118% 118%; mask-position:118% 118%} 22% {opacity:.9} 70% {opacity:.55} 100%{opacity:0; -webkit-mask-position:-18% -18%; mask-position:-18% -18%} } .opening-core{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px} /* 字間が締まりながら像を結ぶ。サイズは各幅で一行を保てる約 1.1 倍に留め、 光の中から文字が現れる感じとロゴ > 和文 > 英文の序列を守る。 */ .opening-mark{ font-family:var(--font-en);font-weight:600;color:var(--ink); font-size:clamp(29px,6vw,56px); opacity:0;letter-spacing:1.1em;text-indent:1.1em;filter:blur(9px); animation:op-mark 1750ms cubic-bezier(.2,.7,.15,1) 360ms forwards; } @keyframes op-mark{ 0% {opacity:0;letter-spacing:1.1em;text-indent:1.1em;filter:blur(9px)} 55% {opacity:1} 100%{opacity:1;letter-spacing:.5em;text-indent:.5em;filter:blur(0)} } .opening-tag{ color:var(--ink-60);opacity:0; animation:op-tag 1260ms cubic-bezier(.2,.6,.2,1) forwards; } .opening-tag-ja{ margin-top:20px;font-family:var(--font-jp);font-size:clamp(16px,2.1vw,21px);font-weight:500;letter-spacing:.04em; animation-delay:1050ms; } .opening-tag-en{ margin-top:7px;font-family:var(--font-kicker);font-size:clamp(12px,1.7vw,17px);letter-spacing:.02em; animation-delay:1280ms; } @keyframes op-tag{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* 退場は幕を上げるのではなく、そのまま光に溶ける */ .opening.is-done{animation:op-fade 520ms cubic-bezier(.4,0,.2,1) forwards} @keyframes op-fade{to{opacity:0;visibility:hidden;transform:scale(1.015)}} @media (prefers-reduced-motion: reduce){ .has-opening .opening{display:none} } /* ---------- 帯 ---------- */ .band{position:relative} .band-light{background:var(--cream);color:var(--ink)} .band-dark{background:radial-gradient(130% 100% at 70% 12%, var(--dark-2) 0%, var(--dark-1) 46%, var(--dark-0) 100%);color:var(--lite)} .band-deep{background:linear-gradient(180deg,var(--dark-0) 0%,var(--dark-1) 52%,var(--dark-0) 100%)} /* CTA＋Footer は暗帯をやめ、1st View と同じ地に寄せる（Figma #57）。 上のセクションと同じ地色から始めるので、境目に線が出ない。 帯が切り替わったのではなく、光がもう一度昇ってくるように見せる。 */ .band-close{position:relative;overflow:hidden;color:var(--ink); background:linear-gradient(180deg, var(--cream) 0%, #F1F1EF 40%, #F7F7F5 100%)} .close-glow{position:absolute;inset:0;pointer-events:none; background: radial-gradient(62% 54% at 76% 20%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%), radial-gradient(54% 42% at 88% 10%, rgba(240,186,106,.13), rgba(240,186,106,0) 74%), radial-gradient(58% 46% at 12% 72%, rgba(89,191,194,.12), rgba(89,191,194,0) 76%), radial-gradient(46% 34% at 44% 96%, rgba(165,199,55,.10), rgba(165,199,55,0) 76%); /* 上端では光を出さない。ここが「線」に見える原因だった */ -webkit-mask:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 100%); mask:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 14%, #000 34%, #000 100%)} .band-close .section,.band-close .footer{position:relative;z-index:1} /* セクション背後の弱い光。ガラスは透かす相手が無いと白い板になる（#47 の習作より） */ .services{position:relative;overflow:hidden} .section-glow{position:absolute;inset:0;pointer-events:none; /* ガラス越しにも色相が読め、カード固有の塗りには見えない上限として元値の約2倍に留める。 */ background: radial-gradient(46% 38% at 16% 36%, rgba(240,186,106,.14), rgba(240,186,106,0) 74%), radial-gradient(44% 36% at 54% 64%, rgba(165,199,55,.11), rgba(165,199,55,0) 74%), radial-gradient(46% 38% at 86% 38%, rgba(89,191,194,.13), rgba(89,191,194,0) 74%)} .services .section-inner{position:relative;z-index:1} /* ---------- ナビ（白ガラスのピル） ---------- */ .nav{ position:fixed;top:20px;left:50%;z-index:20;transform:translateX(-50%); width:min(calc(100% - 40px),1320px); display:flex;align-items:center;justify-content:space-between; padding:8px 13px 8px 31px;border:1px solid rgba(33,30,24,.12);border-radius:999px; background:rgba(255,255,255,.62);box-shadow:0 14px 42px rgba(33,30,24,.08);backdrop-filter:blur(18px); font-family:var(--font-en);color:var(--ink); transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease,backdrop-filter .28s ease; } .nav-sentinel{position:absolute;top:24px;left:0;width:1px;height:16px;pointer-events:none} .page-home.nav-fv .nav{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none} .nav-wordmark{font-weight:600;letter-spacing:.4em;font-size:16px;text-decoration:none;display:inline-flex;align-items:center;min-height:44px} .nav-links{display:flex;gap:clamp(14px,2.6vw,32px);align-items:center;font-size:12.5px;letter-spacing:.05em} .nav-links a{text-decoration:none;opacity:.6;transition:opacity .25s;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .page-home .nav-links a:not(.nav-recruit):not(.nav-cta), .page-home .nav-recruit, .page-home .nav-cta{transition:opacity .28s ease,visibility 0s} .page-home.nav-fv .nav-links a:not(.nav-recruit):not(.nav-cta), .page-home.nav-fv .nav-recruit, .page-home.nav-fv .nav-cta{opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity .2s ease} .nav-links a:hover,.nav-links a:focus-visible{opacity:1} .nav-links a[aria-current="page"]{opacity:1;border-bottom:1px solid var(--green-deep);padding-bottom:3px} .nav-recruit{gap:7px;padding-inline:8px;font-size:12.5px;color:var(--ink);opacity:1!important} .nav-recruit::after{content:"→";font-size:.95em;opacity:.6;transition:transform .25s,opacity .25s} .nav-recruit:hover::after{transform:translateX(3px);opacity:1} .nav-recruit[aria-current="page"]{padding-bottom:0;opacity:1!important} .nav-cta{border:1px solid rgba(33,30,24,.4);border-radius:999px;padding:8px 18px;font-size:12px;opacity:1!important} .nav-cta{display:inline-flex;align-items:center;gap:9px} .nav-cta::after{content:"→";font-size:.95em;opacity:.6;transition:transform .25s,opacity .25s} .nav-cta:hover{border-color:var(--ink);background:var(--ink);color:var(--cream)} .nav-cta:hover::after{transform:translateX(3px);opacity:1} @media (min-width:721px){ /* ピル内側の余白で広く見える採用情報との間だけを補正し、狭い画面の4pxは維持する。 */ .nav-cta{margin-left:clamp(-14px,-1.3vw,-9px)} } /* ---------- 汎用タイポ ---------- */ .eyebrow{ font-family:var(--font-en);font-size:10px;letter-spacing:.32em;font-weight:600; display:inline-flex;align-items:center;width:max-content;opacity:.72;text-transform:uppercase; border:1px solid rgba(33,30,24,.2);border-radius:999px;padding:7px 14px 7px 17px; color:var(--ink-60);background:rgba(255,255,255,.32); } .band-dark .eyebrow{color:var(--lite-70);border-color:rgba(242,238,227,.28);background:rgba(242,238,227,.045)} /* F-23: FV はスッキリ。v2.3 の 104px から落として余白で見せる */ /* 英文キッカー（Figma で Founder が Zen Kaku Gothic Antique に指定） */ .hero-kicker{font-family:var(--font-kicker);font-weight:400;font-size:clamp(22px,3.2vw,44px); line-height:1.3;letter-spacing:.008em;color:rgba(33,30,24,.66)} /* h1 は Zen Kaku Gothic New。デスクトップは1行、狭い画面では文節で折る。 */ .h-display{font-family:var(--font-display);font-size:clamp(34px,5.4vw,74px);font-weight:600;line-height:1.3;letter-spacing:.005em; color:rgba(33,30,24,.86); width:100%;text-wrap:nowrap} .h-display .h-line{display:inline-block;white-space:nowrap} .h-display .h-line + .h-line{margin-left:.42em} /* 強調語は濃緑から青緑へ移る。明るさを揃えつつコントラストを守るため、中間の停止点だけを濃くする。 非対応環境では下の @supports で単色へ戻す。 */ .h-display b{font-weight:inherit;color:var(--green-deep); background:linear-gradient(104deg,#2F3D12 0%,#6F8D18 30%,#6D8E3A 46%,#3E8A86 70%,#2C6B72 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} @supports not (background-clip:text){ .h-display b{background:none;color:var(--green-deep);-webkit-text-fill-color:currentColor} } .h-section,.founder-name,.page-head-title{font-family:var(--font-display)} .h-section{font-size:clamp(27px,3.6vw,44px);font-weight:700;line-height:1.42;letter-spacing:.005em} .lead{font-size:var(--type-body);line-height:var(--leading-body);max-width:var(--measure);color:var(--ink-60)} .body-s{font-size:var(--type-note);line-height:var(--leading-note);max-width:var(--measure);color:var(--ink-60)} .band-dark .lead{color:var(--lite-70)} .band-dark .body-s{color:var(--lite-45)} /* リンク（矢印下線型・本文用） */ .links-row{display:flex;gap:clamp(20px,3.4vw,44px);flex-wrap:wrap;font-size:14px;letter-spacing:.08em} .link-arrow{text-decoration:none;padding:8px 0 9px;border-bottom:1px solid rgba(33,30,24,.4);display:inline-flex;gap:10px;align-items:baseline;justify-content:center;min-width:44px;min-height:44px;transition:opacity .25s} .band-dark .link-arrow{border-color:rgba(242,238,227,.35)} .link-arrow::after{content:"→";color:var(--green-deep);font-weight:500} .band-dark .link-arrow::after{color:var(--green)} .link-arrow:hover,.link-arrow:focus-visible{opacity:.7} /* ピルボタン対（hero / CTA） Figma #46: Primary は黒塗り（緑塗りは廃止）。#32: 両方ともアイコン付き。 */ .btn-row{display:flex;gap:clamp(14px,2.4vw,24px);flex-wrap:wrap;font-size:14px;letter-spacing:.08em} .btn{min-height:48px;padding:12px 26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:14px; text-decoration:none;font-weight:700;transition:background .25s,color .25s,border-color .25s,transform .25s} .btn::after{content:"→";font-family:var(--font-en);font-size:.95em;font-weight:500;line-height:1;opacity:.7;transition:transform .25s,opacity .25s} .btn:hover::after,.btn:focus-visible::after{transform:translateX(3px);opacity:1} .btn-fill{background:var(--ink);border:1px solid var(--ink);color:var(--cream)} .btn-line{background:transparent;border:1px solid rgba(33,30,24,.45);color:var(--ink)} .band-dark .btn-line{border-color:rgba(242,238,227,.48);color:var(--lite)} /* 暗帯では黒塗りが沈むので反転（Primary=無彩色の塗り、という考え方は保つ） */ .band-dark .btn-fill{background:var(--lite);border-color:var(--lite);color:var(--ink)} .btn:hover,.btn:focus-visible{transform:translateY(-2px)} .btn-fill:hover{background:#000;border-color:#000} .band-dark .btn-fill:hover{background:#fff;border-color:#fff} /* ============================================================= ガラスの板 — 実写リファレンスの実測から起こしたレシピ（Figma #47 / 案 F） 調査記録: docs/2026-08-14-glass-research.md 実写を測って分かったこと: ・明るい地では画像全体が輝度 222〜253 の 31 段しかない。輝度で押す余地が無い ・ガラスに見えている正体は「幅 5px 以内の二重縁（外に暗 −1.3 / 内に明 +11）」 ・その縁で色相が反転する（地=暖 → 縁=寒 → 内部=暖） ・ガラスの下に広いぼけ影は存在しない。あるのは 2〜10px の接触線と、その下の明るいプール ・内部と外部の輝度差はほぼゼロ。内部は「白を塗った面」ではなく「背景を通す面」 ============================================================= */ .glass, .glass-plate{ position:relative; background:linear-gradient(158deg, rgba(255,255,255,.32) 0%, var(--glass) 58%, rgba(255,255,255,.08) 100%); backdrop-filter:blur(14px) saturate(1) brightness(1.02); -webkit-backdrop-filter:blur(14px) saturate(1) brightness(1.02); border:0;border-radius:12px; box-shadow: 0 0 0 1px var(--glass-edge), /* 縁の外側＝寒色の暗 */ inset 0 0 0 1px var(--glass-lip), /* 縁の内側＝明。この対が板の稜線になる */ 0 1px 2px rgba(33,30,24,.11), /* 接触線 */ 0 3px 6px -2px rgba(33,30,24,.09); transition:box-shadow .28s, transform .28s} /* 接地のコースティクス。実写では板の直下が周囲より明るい（灰色の雲ではない） */ .glass-plate::after{content:"";position:absolute;left:-4%;right:-4%;top:100%;height:34px;z-index:-1;pointer-events:none; background:radial-gradient(ellipse 62% 100% at 50% 0%, rgba(255,255,255,.85), rgba(255,255,255,0) 74%); filter:blur(12px)} /* Founder カードは押せるものではないので、ホバーの反応は付けない */ .glass:hover, .glass-plate:hover:not(.founder-card){ box-shadow: 0 0 0 1px rgba(89,191,194,.3), inset 0 0 0 1px rgba(255,255,255,.98), 0 2px 3px rgba(33,30,24,.12), 0 5px 10px -3px rgba(33,30,24,.1)} .studio-card,.opening-row,.window-card{transition:border-color .28s,box-shadow .28s,background .28s,transform .28s} /* ---------- セクション共通 ---------- */ .section{position:relative;padding:clamp(84px,12vh,150px) var(--gutter)} .section-inner{max-width:1200px;margin:0 auto;position:relative} .section-head{display:flex;flex-direction:column;gap:24px;margin-bottom:clamp(44px,7vh,80px)} /* ============================================================= HERO — クリーム × 生成画像のシルク（F-20 / F-22 / F-23） 層: .hero-silk（生成画像・下地）→ .hero-silk-loop（ループ動画・任意） → .hero-veil（可読性） ============================================================= */ /* .stage = FV と 2nd View をまとめた1つの舞台。光の層はここに敷く（Figma #34） */ .stage{position:relative;overflow:hidden;isolation:isolate;background:var(--cream)} /* 舞台の下half を静かに沈める。ここが無いと 2nd View の本文が地に負けて薄く見える （シェーダー撤去で .hero-lightfield を消した際に失われていた）。 */ .stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:3;pointer-events:none; background:linear-gradient(180deg, rgba(229,229,225,0) 0%, rgba(229,229,225,.42) 44%, rgba(229,229,225,.46) 74%, var(--cream) 100%)} /* 個別セクション任せにすると、新しい本文を追加した際に装飾層の下へ潜りうる。 stage 直下の本文を共通で前面に置き、::after は地を沈める役割だけに限定する。 */ .stage>section{position:relative;z-index:5} .hero{min-height:min(88vh,860px);display:flex;align-items:center;justify-content:center} /* シルクの下地。画像の下端は地の色に溶かして、2nd View と継ぎ目なく繋げる。 2026-08-14 Founder 指示「薄く・目立ちすぎないよう」。 生成物そのものを作り直すのではなく、ここ 1 か所で濃さを決められるようにしてある。 */ /* 濃さと色味はこの 2 つで決める。生成物を作り直さずに調整できるようにしてある。 2026-08-14 Founder 指摘「ベージュが強くてグレーシルバーの光沢感が消えた」→ 彩度を落とし、わずかに寒色へ寄せて銀の照りを戻す。 */ :root{--silk-strength:.62;--silk-filter:saturate(.62) hue-rotate(-6deg)} .hero-silk{position:absolute;inset:0;z-index:0;pointer-events:none;display:block; opacity:var(--silk-strength);filter:var(--silk-filter)} .hero-silk img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;display:block; /* 動画が再生できないときだけ、ここがゆっくり漂って静止画に見えないようにする。 */ animation:silk-drift 44s ease-in-out infinite alternate; will-change:transform} /* 動画が乗ったら静止画は動かさない。二重に動くとブレて見える。 */ .stage.is-video-playing .hero-silk img{animation:none} @keyframes silk-drift{ from{transform:scale(1.06) translate3d(-0.8%, 0.4%, 0)} to {transform:scale(1.12) translate3d(0.9%, -0.6%, 0)}} /* ループ動画を置いたときだけ効く層。無ければ .hero-silk がそのまま下地になる。 */ .hero-silk-loop{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50% 58%; pointer-events:none;display:block;opacity:var(--silk-strength);filter:var(--silk-filter)} /* 可読性のためのベール。かけすぎるとシルクごと消えるので、 文字の背後にだけ薄く敷き、上下の継ぎ目を整える分だけに留める。 */ .hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(46% 20% at 50% 26%, rgba(239,239,236,.34), rgba(239,239,236,.08) 70%, transparent 88%), linear-gradient(180deg, rgba(239,239,236,.30) 0%, transparent 16%, transparent 58%, rgba(239,239,236,.40) 86%, var(--cream) 100%)} .hero-content{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(26px,3.8vh,40px); padding:clamp(180px,24vh,260px) var(--gutter) clamp(72px,9vh,104px);width:min(940px,100%);margin:0 auto} .hero-plain{font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60);max-width:44em} /* ============================================================= 2nd VIEW — 会社紹介 Figma #34: 序文は太字。あしらいタイルの切り出しはやめ、FV の光をそのまま 背景に敷いたまま読ませる。本文はおよそ 3 倍量。 ============================================================= */ .intro{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(110px,16vh,180px)} /* Figma #63: 左の序文は廃止。本文1本を中央に置いて、がっつり読ませる */ .intro-body{display:flex;flex-direction:column;gap:26px;width:min(760px,100%);margin:0 auto} /* 実背景の中央画素で 4.5:1 を割らない共通トークンへ揃え、個別の濃度指定を残さない。 */ .intro-body p{font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60)} /* 要素セレクタを含む上の規則に負けない詳細度で、結びだけを濃くする。 */ .intro-body .intro-close{color:var(--ink);font-weight:500} /* ============================================================= SERVICES — Bento タイル 3 + 4（F-25 / F-26・横スクロールなし） ============================================================= */ #services .section-inner{max-width:1240px} /* 3 等分 × 2 段。板は .glass-plate が持つので、ここは中身のレイアウトだけ。 ホバーの傾きは .bento（親）が pointermove を受けて CSS 変数に流す（Figma #56）。 */ .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,1.6vw,20px); grid-auto-rows:1fr;perspective:900px} .bento-tile{display:flex;flex-direction:column;gap:12px;padding:30px 28px 28px; isolation:isolate; /* ::before の鏡面を板の中に閉じ込める（外に出ると板の下に潜る） */ transform-style:preserve-3d;will-change:auto} /* .rv.is-in より強い指定にしないと transform:none に負ける */ .bento .bento-tile.rv{transform:translateY(var(--rv-y,0px)) rotate3d(var(--ry,0),var(--rx,0),0,var(--tilt,0deg))} .bento-tile:hover{--tilt:3.5deg} /* 鏡面ハイライト。カーソルの位置に光が当たる向きにした（2026-08-14 Founder 判断）。 調査は「板と逆走させる方が物理的に正しく見える」だったが、 触ったところが光る方が気持ちいい、という判断を優先している。 */ .bento-tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; opacity:0;transition:opacity .3s; background:radial-gradient(200px circle at calc(50% + var(--mx,0px)) calc(50% + var(--my,0px)), rgba(255,255,255,.98) 0%, rgba(255,255,255,.5) 34%, rgba(255,255,255,0) 72%)} .bento-tile:hover::before{opacity:1} @media (prefers-reduced-motion: reduce){ .bento .bento-tile.rv{transform:none} .bento-tile:hover{--tilt:0deg} .bento-tile::before{display:none} } .bento-tile .svc-num{font-family:var(--font-dot);font-weight:700;font-size:clamp(30px,3vw,42px);line-height:1;letter-spacing:.04em;color:var(--ink-40);opacity:.5} .bento-tile h3{font-size:clamp(16.5px,1.5vw,19px);font-weight:700;letter-spacing:.01em;line-height:1.55} .bento-tile p{font-size:var(--type-body);line-height:1.95;color:var(--ink-60)} .svc-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:8px} .svc-chips span{font-size:11px;letter-spacing:.04em;border:1px solid rgba(33,30,24,.16);border-radius:999px;padding:5px 11px;color:var(--ink-60);background:rgba(255,255,255,.4)} /* 3 等分 × 2 段。01 の特別扱いは廃止（Figma #53） */ .bento-tile:nth-child(n){grid-column:span 4} @media (max-width:1080px){ .bento-tile:nth-child(n){grid-column:span 6} } @media (max-width:700px){ .bento-tile:nth-child(n){grid-column:span 12} .bento-tile{padding:26px 22px} } /* ============================================================= SELL PRODUCT — プロダクトファクトリー事業の両輪（Figma #49） ソフトウェアファクトリー ⇄ GTMエンジニアリング。 噛み合いは 2 円の重なりで示し、リムだけを逆向きに回す。画像は使わない。 ============================================================= */ .factory{padding-top:clamp(56px,8vh,96px)} /* 色は円（ガラス）ではなく、その背後の地が持つ。ガラスはあくまで無色で、 背後の光を透かすだけ（2026-08-14 Founder 判断）。 */ .flywheel::before{content:"";position:absolute;inset:-18% -12%;z-index:0;pointer-events:none;border-radius:50%; background: radial-gradient(38% 46% at 27% 50%, rgba(240,186,106,.22), rgba(240,186,106,0) 72%), radial-gradient(38% 46% at 73% 50%, rgba(89,191,194,.24), rgba(89,191,194,0) 72%)} .flywheel{position:relative;display:flex;align-items:center;justify-content:center; margin:0 auto clamp(38px,6vh,66px);width:max-content;max-width:100%} .fw-wheel{position:relative;width:clamp(158px,23vw,262px);aspect-ratio:1;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:0 15%; background: radial-gradient(100% 100% at 32% 22%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.5) 38%, rgba(255,255,255,.1) 66%, rgba(255,255,255,0) 80%), border:1px solid rgba(255,255,255,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 22px 52px rgba(33,30,24,.09); backdrop-filter:blur(5px) saturate(1.1);-webkit-backdrop-filter:blur(5px) saturate(1.1)} /* リム＝回っている側。両輪なので互いに逆回転させる */ .fw-wheel::before{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none; /* リムは無彩色の照りだけを巡らせる。事業色は背後の .flywheel::before が持つ。 */ background:conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.72) 52deg, rgba(255,255,255,.16) 126deg, rgba(33,30,24,.08) 206deg, rgba(255,255,255,0) 300deg); -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask:radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); animation:fw-spin 26s linear infinite} .fw-build{margin-right:-3%} .fw-gtm{margin-left:-3%} .fw-gtm::before{animation-direction:reverse} /* 円からはみ出させない。2 語は折り返して収める */ .fw-en{font-family:var(--font-en);font-size:clamp(9px,1.02vw,11px);font-weight:600;letter-spacing:.1em;line-height:1.6; color:var(--ink-60);text-transform:uppercase;max-width:100%} .fw-jp{font-size:clamp(15px,1.7vw,20px);font-weight:900;letter-spacing:.04em} /* 噛み合いの継ぎ目にだけプリズムを通す */ .fw-mesh{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;pointer-events:none; width:clamp(16px,2.4vw,26px);height:clamp(96px,14vw,158px)} .fw-arc{position:absolute;inset:0;border-radius:50%; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 26%, rgba(199,222,120,.72) 50%, rgba(255,255,255,.9) 74%, rgba(255,255,255,0) 100%); filter:blur(3px)} .fw-arc-b{background:linear-gradient(180deg, rgba(89,191,194,0) 0%, rgba(240,186,106,.5) 40%, rgba(89,191,194,.45) 62%, rgba(89,191,194,0) 100%);filter:blur(9px)} @keyframes fw-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){ .fw-wheel::before{animation:none} } .fw-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px)} .fw-col{display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;border-top:1px solid var(--hairline);position:relative} .fw-col::before{content:"";position:absolute;left:0;top:-1px;width:52px;height:1px;background:var(--green)} .fw-col h3{font-size:clamp(16px,1.5vw,19px);font-weight:900;letter-spacing:.01em} .fw-col p{font-size:var(--type-body);line-height:1.95;color:var(--ink-60)} .fw-note{margin-top:clamp(24px,3.4vh,36px);font-size:var(--type-note);line-height:var(--leading-note);color:var(--ink-60);max-width:min(760px,100%)} @media (max-width:760px){ .fw-legend{grid-template-columns:1fr;gap:0} .fw-col{padding:24px 0 24px} .flywheel{transform:scale(.94)} } /* ============================================================= WHY — 事業をまたぐほど速くなる（図を使わず平文 3 点で示す） ============================================================= */ .why-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(28px,5vw,72px);align-items:center; margin-bottom:clamp(44px,7vh,80px)} .why-list{list-style:none;display:grid;grid-template-columns:1fr;gap:0} .why-item{display:flex;flex-direction:column;gap:12px;padding:26px 0 28px;border-top:1px solid var(--hairline);position:relative} .why-item::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:var(--green)} .why-num{font-family:var(--font-dot);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--green-deep);opacity:.85} .why-item p{font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60)} @media (max-width:960px){ .why-top{grid-template-columns:1fr;gap:34px} } /* ============================================================= STRUCTURE — 中央に Luxar AI経営OS、その周りを 3 つのガラス円が囲む（Figma #33） Codex 案の図をベースにしつつ、円が 01 / CORE / 03 で 02 が欠けていた点を直した。 画像は使わず、円もリム光もコードで描く。 ============================================================= */ .orbit{position:relative;width:min(520px,100%);aspect-ratio:1;margin:0 auto} /* 3事業の色も背後の地に置く。位置は各円の中心に合わせてあるので、 結果として事業ごとの色は残るが、色を持っているのはガラスではなく地の側。 */ .orbit::before{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none; background: radial-gradient(26% 26% at 50% 23%, rgba(240,186,106,.24), rgba(240,186,106,0) 74%), radial-gradient(26% 26% at 73% 64%, rgba(165,199,55,.22), rgba(165,199,55,0) 74%), radial-gradient(26% 26% at 27% 64%, rgba(89,191,194,.24), rgba(89,191,194,0) 74%)} /* 3つの現場を回る軌道（Figma #54）。円の背面に置く */ .orbit-ring{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible} .orb{position:absolute;width:36%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:2; background: radial-gradient(100% 100% at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.46) 36%, rgba(255,255,255,.12) 62%, rgba(255,255,255,0) 78%), border:1px solid rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -24px 48px rgba(33,30,24,.05), inset 0 22px 44px rgba(255,255,255,.55), 0 24px 56px rgba(33,30,24,.09); backdrop-filter:blur(5px) saturate(1.12);-webkit-backdrop-filter:blur(5px) saturate(1.12); transition:transform .5s cubic-bezier(.22,.6,.2,1), box-shadow .5s} /* 無彩色のリム光。事業色は背後の .orbit::before から透かす */ .orb::before{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none; background:conic-gradient(from 190deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.72) 54deg, rgba(255,255,255,.16) 128deg, rgba(33,30,24,.08) 208deg, rgba(255,255,255,0) 300deg); -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask:radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px))} /* 上面のハイライト（ガラスらしさの要） */ .orb::after{content:"";position:absolute;left:14%;top:9%;width:44%;height:22%;border-radius:50%;pointer-events:none; background:linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,0) 78%);filter:blur(5px)} .orb:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -24px 48px rgba(33,30,24,.05),inset 0 22px 44px rgba(255,255,255,.55),0 32px 64px rgba(33,30,24,.13)} .orb-en{position:relative;z-index:2;font-family:var(--font-en);font-size:clamp(8.5px,1.02vw,10.5px);font-weight:600;letter-spacing:.14em;color:var(--ink-60);text-align:center;padding:0 8%;line-height:1.5;text-transform:uppercase} .orb-jp{position:relative;z-index:2;font-size:clamp(11px,1.28vw,14px);font-weight:700;letter-spacing:.02em;color:var(--ink);text-align:center;padding:0 8%;line-height:1.5} /* コアを中心に、半径 27% の位置へ 120° ずつ。円は中心と軽く重なる＝OS を共有している */ .orb-factory{left:32%;top:5%} .orb-agency{left:55.4%;top:45.5%} .orb-education .orb-jp{line-height:1.5} .orb-education{left:8.6%;top:45.5%} .orb-core{position:absolute;left:39%;top:39%;width:22%;aspect-ratio:1;border-radius:50%;z-index:6; display:flex;align-items:center;justify-content:center;text-align:center; background:radial-gradient(100% 100% at 34% 26%, #FFFFFF 0%, #F1F3E2 34%, #DDE7B4 72%, #C7D98C 100%); border:1px solid rgba(255,255,255,.9); box-shadow:0 0 0 7px rgba(239,239,236,.55), 0 14px 34px rgba(111,141,24,.22), inset 0 -8px 18px rgba(111,141,24,.14)} .orb-core span{font-size:clamp(9.5px,1.14vw,12px);font-weight:700;line-height:1.5;letter-spacing:.03em;color:#3E4A16} @media (max-width:560px){ .orbit{width:min(330px,100%)} .orb-en{font-size:7.5px;letter-spacing:.04em;padding:0 6%} .orb-jp{font-size:10.5px;padding:0 6%} .orb-core span{font-size:9px} } /* ============================================================= TEAM — Founder ＋ AIエージェント 5 名（F-27） ============================================================= */ .founder-card{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(30px,5vw,72px);align-items:center; padding:clamp(26px,3.4vw,44px);border:1px solid var(--hairline);border-radius:14px;background:rgba(255,255,255,.46); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(33,30,24,.06); margin-bottom:clamp(30px,4.6vw,52px)} .founder-photo{width:100%;max-width:340px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid var(--hairline);background:rgba(255,255,255,.5)} .founder-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 26%} .founder-body{display:flex;flex-direction:column;gap:14px} .founder-name{font-size:clamp(26px,3.2vw,38px);font-weight:700;line-height:1.2;letter-spacing:.04em} .founder-role{font-family:var(--font-en);font-size:11px;letter-spacing:.3em;opacity:.5;text-transform:uppercase;order:-1} .founder-body .lead{margin-top:6px} .founder-exp{display:flex;flex-direction:column;gap:8px;margin-top:8px} .founder-exp span{font-size:12.5px;line-height:1.9;color:var(--ink-60);padding-left:18px;position:relative} .founder-exp span::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--green-deep)} .founder-social{display:flex;gap:22px;font-family:var(--font-en);font-size:13px;letter-spacing:.08em;margin-top:10px} @media (max-width:840px){ .founder-card{grid-template-columns:1fr;gap:26px} .founder-photo{max-width:260px;margin-inline:auto} } .agent-note{font-size:var(--type-note);line-height:var(--leading-note);color:var(--ink-60);margin-bottom:clamp(20px,2.4vw,28px)} .agent-list{list-style:none;border-top:1px solid var(--hairline)} .agent-row{display:grid;grid-template-columns:auto minmax(150px,.85fr) minmax(0,1.5fr) auto;align-items:center; gap:clamp(14px,2.2vw,30px);align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--hairline); transition:background .25s} .agent-row:hover{background:rgba(255,255,255,.5)} /* 各エージェントを「発光する幾何立体」で表す。SVG + JS のみ（画像なし）。 7 体で別々の多面体を持ち、輪郭だけで見分けられる。 面は背面カリングし、法線と視線の角度で明るさを変える＝ガラスの反射。 */ .agent-figure{position:relative;width:clamp(46px,4.4vw,60px);aspect-ratio:1;display:grid;place-items:center;align-self:center} .agent-halo{position:absolute;inset:4%;border-radius:50%;pointer-events:none; background:radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--wc) 30%, transparent), transparent 70%); --bo:.5;--bs:1.03; animation:agent-breathe 4.5s ease-in-out infinite;animation-delay:var(--phase,0s)} .agent-wf{position:relative;width:100%;height:100%;overflow:visible; filter:drop-shadow(0 0 3px color-mix(in srgb, var(--wc) 50%, transparent))} .agent-row:hover .agent-wf{filter:drop-shadow(0 0 5px color-mix(in srgb, var(--wc) 68%, transparent))} /* 吸気を速く・呼気を遅く・末端に静止（Apple 呼吸LED特許 US6658577B2 の形） */ @keyframes agent-breathe{ 0%{opacity:var(--bo);transform:scale(1)} 34%{opacity:1;transform:scale(var(--bs))} 76%{opacity:var(--bo);transform:scale(1)} 100%{opacity:var(--bo);transform:scale(1)} } @media (prefers-reduced-motion: reduce){ .agent-halo{animation:none} } .agent-id{display:flex;flex-direction:column;gap:4px} .agent-nm{font-size:16px;font-weight:700;letter-spacing:.02em} .agent-rl{font-size:11.5px;font-weight:700;color:var(--ink-60)} .agent-cap{font-size:var(--type-body);line-height:1.95;color:var(--ink-60)} /* Skill ─ 何を持っているのかを名指しする（Figma #44）。 触れる／押せることが見た目で分かるように、破線の下線と Skill ラベルを立てる。 hover だけの title 属性は「そこに何かある」と分からないので使わない。 */ .agent-skills{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;justify-content:flex-end;max-width:320px} .skill-label{font-family:var(--font-en);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-60);margin-right:2px} /* position:static は意図的。ツールチップの基準を .agent-skills にして、 行の外（＝画面の外）へはみ出さないようにする。 */ .skill{position:static;font-family:var(--font-en);font-size:10px;color:var(--ink-60);cursor:help; border:1px solid var(--hairline);border-bottom:1px dashed rgba(33,30,24,.5);border-radius:999px; padding:4px 10px;background:rgba(255,255,255,.62);white-space:nowrap; transition:border-color .2s,background .2s,color .2s} .skill:hover,.skill:focus-visible{color:var(--ink);border-color:rgba(165,199,55,.75);background:#fff;outline:none} .skill-tip{position:absolute;right:0;left:auto;bottom:calc(100% + 9px);transform:translateY(4px);z-index:12; width:max-content;max-width:100%;white-space:normal;text-align:left; font-family:var(--font-jp);font-size:11.5px;line-height:1.75;letter-spacing:.01em;color:var(--ink); padding:9px 13px;border-radius:9px;border:1px solid rgba(33,30,24,.14); background:rgba(255,255,255,.96);box-shadow:0 14px 32px rgba(33,30,24,.14); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility .18s} .skill:hover .skill-tip,.skill:focus-visible .skill-tip,.skill:focus .skill-tip{opacity:1;visibility:visible;transform:translateY(0)} @media (max-width:1080px){ .agent-row{grid-template-columns:auto minmax(140px,1fr) minmax(0,1.4fr)} .agent-skills{grid-column:2 / -1;justify-content:flex-start;max-width:none;margin-top:6px} } @media (max-width:720px){ .agent-row{grid-template-columns:auto 1fr;gap:10px 14px;padding:18px 2px} .agent-cap{grid-column:2} .agent-skills{grid-column:2} /* 画面が狭いときは行幅いっぱいに開く */ .skill-tip{left:0;right:0;width:auto} } /* Agent Teams の小見出し（Figma #43） */ .agent-head{display:flex;flex-direction:column;gap:10px;margin:clamp(34px,5vw,58px) 0 clamp(16px,2vw,22px)} .agent-head h3{font-size:clamp(18px,2vw,24px);font-weight:900;letter-spacing:.02em} .agent-head p{font-size:var(--type-body);line-height:1.95;color:var(--ink-60);max-width:var(--measure)} /* And you ─ 一人会社に見せない（Figma #42） */ .join-banner{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);flex-wrap:wrap; margin-top:clamp(30px,4.4vw,48px);padding:clamp(26px,3.4vw,38px) clamp(24px,3.4vw,40px); border-radius:14px;border:1px solid rgba(165,199,55,.5); background: radial-gradient(120% 160% at 88% 0%, rgba(165,199,55,.2) 0%, rgba(165,199,55,0) 62%), linear-gradient(160deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.5) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 44px rgba(33,30,24,.07)} .join-copy{display:flex;flex-direction:column;gap:9px;min-width:min(100%,22em)} .join-mark{font-family:var(--font-en);font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:.1em;color:var(--green-deep)} .join-copy p{font-size:var(--type-body);line-height:1.95;color:var(--ink-60)} /* ============================================================= COMPANY — 会社概要 ============================================================= */ .company-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(48px,9vw,130px);align-items:start} .company-layout .section-head{margin-bottom:0} .info-table{border-top:1px solid rgba(33,30,24,.18)} .info-table > div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:28px;padding:24px 2px;border-bottom:1px solid rgba(33,30,24,.12)} .info-table dt{font-size:13px;font-weight:700;letter-spacing:.06em} .info-table dd{font-size:14px;line-height:2;color:var(--ink-60)} @media (max-width:900px){ .company-layout{grid-template-columns:1fr} .company-layout .section-head{position:static} .info-table > div{grid-template-columns:1fr;gap:8px} } /* ============================================================= CTA + FOOTER — トップと共通の明帯で閉じる ============================================================= */ .cta-inner{position:relative;z-index:3;display:flex;flex-direction:column;gap:clamp(30px,4.4vh,46px);align-items:center;text-align:center} /* FV と同じ言葉で閉じる。開いた言葉で閉じると、ページが1本に見える */ .cta-tagline{font-family:var(--font-kicker);font-weight:400;font-size:clamp(19px,2.6vw,34px); line-height:1.45;letter-spacing:.01em;color:var(--ink)} .cta-tagline .jp{display:block;font-family:var(--font-display);font-size:.72em;color:var(--ink-60);margin-top:.5em} .footer{padding:clamp(44px,7vh,72px) var(--gutter) 40px;position:relative;z-index:3} .footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:28px} .footer-word{font-family:var(--font-en);font-weight:600;font-size:clamp(26px,4.6vw,48px);letter-spacing:.5em;color:var(--ink);text-decoration:none;opacity:.9;width:max-content;min-height:44px;display:inline-flex;align-items:center} /* Founder が Figma で確定したアウトラインを 1 ファイルから使う。 テキストは DOM に残し、マスク対応時だけ視覚的に SVG へ置き換える。 */ @supports ((-webkit-mask-image:url("../luxar-wordmark.svg")) or (mask-image:url("../luxar-wordmark.svg"))){ .nav-wordmark,.footer-word,.opening-mark{ --wordmark-height:20px; --wordmark-width:calc(var(--wordmark-height) * 530 / 154); -webkit-mask-image:url("../luxar-wordmark.svg");mask-image:url("../luxar-wordmark.svg"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-size:var(--wordmark-width) var(--wordmark-height);mask-size:var(--wordmark-width) var(--wordmark-height); -webkit-mask-position:left center;mask-position:left center; background-color:currentColor;overflow:hidden;white-space:nowrap;text-indent:-100vw;font-size:0; } .nav-wordmark{width:max(44px,var(--wordmark-width));min-width:44px} .footer-word{--wordmark-height:clamp(31px,4.03vw,58px);width:var(--wordmark-width);height:max(44px,var(--wordmark-height))} .opening-mark{--wordmark-height:clamp(35px,4.73vw,68px);width:var(--wordmark-width);height:var(--wordmark-height)} } /* マスク非対応環境は、元の DOM テキストをそのまま表示する。 */ @supports not (mask-image:url("#x")){ @supports not (-webkit-mask-image:url("#x")){ .nav-wordmark,.footer-word,.opening-mark{background-color:transparent;overflow:visible;text-indent:0;white-space:normal} } } .footer-spectrum{height:1px;opacity:.72; background:linear-gradient(90deg, rgba(165,199,55,0) 0%, rgba(165,199,55,.85) 12%, rgba(240,186,106,.7) 42%, rgba(89,191,194,.75) 72%, rgba(89,191,194,0) 100%)} .footer-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:baseline} .footer-links{display:flex;gap:clamp(16px,2.6vw,30px);flex-wrap:wrap;font-family:var(--font-en);font-size:12.5px;letter-spacing:.05em} .footer-links a{text-decoration:none;color:var(--ink-60);transition:color .25s;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .footer-links a:hover,.footer-links a:focus-visible{color:var(--ink)} .footer-links a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:5px} .footer-social{display:flex;gap:18px;font-family:var(--font-en);font-size:12.5px;letter-spacing:.08em} .footer-social a{text-decoration:none;color:var(--ink-60);transition:color .25s;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .footer-social a:hover,.footer-social a:focus-visible{color:var(--ink)} .footer-copy{font-family:var(--font-en);font-size:11px;letter-spacing:.14em;color:var(--ink-60)} .footer-only{min-height:230px;display:flex;align-items:flex-end} .footer-only .footer{width:100%} /* ============================================================= サブページ共通 — スッキリしたコンパクトヘッダー（FVはトップと揃えない） ============================================================= */ .page-head{padding:clamp(150px,20vh,200px) var(--gutter) clamp(40px,6vh,64px)} .page-head-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:22px} .page-head-title{font-size:clamp(30px,4.4vw,50px);font-weight:700;line-height:1.34;letter-spacing:.01em} /* ============================================================= Careers — Why Join（LUX-507） 実験台の思想を「働く側から見るとどうなるか」で書く 4 枚 ＋ 人／エージェントの分担。 分担の SoT は company/NORTH_STAR.md §3「役割境界」。 ============================================================= */ .value-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,20px);align-items:stretch} .value-card{display:flex;flex-direction:column;gap:12px;padding:clamp(26px,3vw,34px) clamp(24px,2.8vw,32px)} .value-num{font-family:var(--font-dot);font-weight:700;font-size:15px;letter-spacing:.1em;color:var(--green-deep);opacity:.85} .value-card h3{font-size:clamp(16.5px,1.6vw,20px);font-weight:900;letter-spacing:.01em;line-height:1.6} .value-card p{font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60)} @media (max-width:800px){ .value-grid{grid-template-columns:1fr} } .split-block{margin-top:clamp(40px,6vh,64px);padding-top:clamp(34px,5vh,52px);border-top:1px solid var(--hairline)} .split-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(24px,3.4vh,34px)} .split-head h3{font-size:clamp(18px,2vw,24px);font-weight:900;letter-spacing:.02em} .split-head p{font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60);max-width:var(--measure)} .split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px)} .split-col{position:relative;padding:24px 0 4px;border-top:1px solid var(--hairline)} .split-col::before{content:"";position:absolute;left:0;top:-1px;width:52px;height:1px;background:var(--sp,var(--green))} .split-agent{--sp:var(--teal)} .split-label{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-60);margin-bottom:14px} .split-col ul{list-style:none;display:flex;flex-direction:column;gap:10px} .split-col li{font-size:var(--type-body);line-height:1.9;color:var(--ink-60);padding-left:18px;position:relative} .split-col li::before{content:"";position:absolute;left:0;top:.82em;width:8px;height:1px;background:var(--sp,var(--green))} .split-note{margin-top:clamp(28px,4vh,40px);font-size:var(--type-body);font-weight:700;line-height:var(--leading-body);letter-spacing:.01em; padding-left:clamp(16px,2.4vw,32px);border-left:2px solid var(--green);max-width:44em} @media (max-width:760px){ .split-grid{grid-template-columns:1fr;gap:8px} } /* ---------- Careers: 事業ごとの職種羅列（行ごと JD へ） ---------- */ .opening-group{--opening-mark:var(--green);margin-top:clamp(36px,6vh,56px)} /* 色は見出し名を補助する装飾に留め、Favicon と同じ中実円＋淡いリングを擬似要素で描く。 */ .opening-group > h2{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:.62em;font-family:var(--font-display);font-size:clamp(18px,2vw,23px);font-weight:700;letter-spacing:.02em} .opening-group > h2::before{content:"";width:.46em;height:.46em;flex:0 0 auto;border-radius:50%;background:var(--opening-mark); box-shadow:0 0 0 .15em color-mix(in srgb,var(--opening-mark) 35%,transparent);transform:translateY(-.14em)} .opening-group-founding{--opening-mark:var(--ink)} /* Product Factory の背景光は index の .orbit::before / .flywheel::before と同じ Amber。 */ .opening-group-product{--opening-mark:var(--amber)} .opening-group-note{font-size:var(--type-body);line-height:1.95;color:var(--ink-60);max-width:var(--measure);margin:10px 0 20px} /* クライアントワークは事業ごとに束ねる。各事業の先頭が事業責任者（Founder 指示 2026-08-14） */ .opening-sub{margin-top:clamp(24px,3.6vh,34px)} /* 小見出しに罫は引かない。線は行の区切りだけに任せる（2026-08-14 Founder 指示） */ .opening-sub > h3{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink-60);margin-bottom:8px} .opening-row{display:grid;grid-template-columns:minmax(210px,.9fr) minmax(0,1.6fr) auto;gap:clamp(18px,3vw,40px); align-items:center;padding:20px 4px;border-top:1px solid var(--hairline);text-decoration:none} .opening-group .opening-row:last-child{border-bottom:1px solid var(--hairline)} .opening-row:hover,.opening-row:focus-visible{background:rgba(255,255,255,.55)} .opening-id{display:flex;flex-direction:column;gap:5px} .opening-nm{font-size:15.5px;font-weight:700;letter-spacing:.02em;line-height:1.5} .opening-area{font-size:11.5px;font-weight:500;letter-spacing:.02em;line-height:1.6;color:var(--ink-60)} .opening-desc{font-size:var(--type-body);line-height:1.9;color:var(--ink-60)} .opening-go{font-family:var(--font-en);font-size:11.5px;font-weight:600;letter-spacing:.08em;color:var(--ink-60);white-space:nowrap; display:inline-flex;align-items:center;gap:8px;transition:color .25s} .opening-go::after{content:"→";color:var(--green-deep);transition:transform .25s} .opening-row:hover .opening-go{color:var(--ink)} .opening-row:hover .opening-go::after{transform:translateX(3px)} .openings-note{margin-top:clamp(30px,4.4vh,44px);font-size:var(--type-note);line-height:var(--leading-note);color:var(--ink-60);max-width:var(--measure)} @media (max-width:900px){ .opening-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:start} .opening-desc{grid-column:1 / -1} .opening-go{grid-column:1 / -1;justify-self:start} } @media (max-width:760px){ .opening-row{grid-template-columns:1fr;gap:10px} } .forms-section{background:linear-gradient(180deg, var(--cream) 0%, var(--cream-deep) 52%, var(--cream-deep) 72%, var(--cream) 100%)} .forms-layout{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(48px,8vw,120px);align-items:start} .forms-layout .section-head{margin-bottom:0} .forms-list{border-top:1px solid rgba(33,30,24,.16)} .form-row{display:grid;grid-template-columns:52px minmax(120px,.55fr) minmax(0,1.45fr);gap:clamp(18px,3vw,40px);align-items:baseline;padding:28px 0;border-bottom:1px solid rgba(33,30,24,.12)} .form-row .cell-num{font-family:var(--font-dot);font-size:16px;opacity:.55} .form-row h3{font-size:17px} .form-row p{font-size:var(--type-body);line-height:1.95;color:var(--ink-60)} @media (max-width:900px){ .forms-layout{grid-template-columns:1fr} .forms-layout .section-head{position:static} } @media (max-width:720px){ .form-row{grid-template-columns:44px 1fr} .form-row p{grid-column:2} } /* ============================================================= JD 詳細ページ（LUX-508）— 1 職種 1 ページ 仕事内容 / 期待する成果 / 求める経験 / 関われる形 / 募集要項 / 選考プロセス の 6 ブロック。 読ませるページなので、ガラス板は使わず罫線と余白だけで区切る。 ============================================================= */ .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .jd-head .page-head-inner{gap:18px} .jd-back{font-family:var(--font-en);font-size:11.5px;font-weight:600;letter-spacing:.1em;color:var(--ink-60);text-decoration:none; width:max-content;display:inline-flex;align-items:center;gap:8px;transition:color .25s} .jd-back::before{content:"←";color:var(--green-deep)} .jd-back:hover,.jd-back:focus-visible{color:var(--ink)} .jd-meta{display:flex;flex-wrap:wrap;gap:12px 44px;margin-top:8px} .jd-meta > div{display:flex;align-items:baseline;gap:14px} .jd-meta dt{font-family:var(--font-en);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60)} .jd-meta dd{font-size:var(--type-note);font-weight:500} .jd-section{padding-top:clamp(28px,5vh,52px)} .jd-section .section-inner{max-width:920px} .jd-block{padding-top:clamp(30px,4.4vh,44px);margin-top:clamp(30px,4.4vh,44px);border-top:1px solid var(--hairline);position:relative} .jd-block:first-of-type{margin-top:0} .jd-block::before{content:"";position:absolute;left:0;top:-1px;width:52px;height:1px;background:var(--green)} .jd-block > h3{font-family:var(--font-display);font-size:clamp(19px,2.2vw,26px);font-weight:900;letter-spacing:.02em;margin-bottom:clamp(18px,2.6vh,26px)} .jd-block > p{font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60)} .jd-list{list-style:none;counter-reset:jd;display:flex;flex-direction:column;gap:16px} .jd-list li{counter-increment:jd;position:relative;padding-left:44px;font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60)} .jd-list li::before{content:counter(jd,decimal-leading-zero);position:absolute;left:0;top:.15em; font-family:var(--font-dot);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--green-deep);opacity:.85} .jd-bullets{list-style:none;display:flex;flex-direction:column;gap:14px} .jd-bullets li{position:relative;padding-left:24px;font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60)} .jd-bullets li::before{content:"";position:absolute;left:0;top:.95em;width:12px;height:1px;background:var(--green-deep)} .jd-req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3.4vw,44px)} .jd-req-col{position:relative;padding:22px 0 4px;border-top:1px solid var(--hairline)} .jd-req-col::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:1px;background:var(--jr,var(--green))} .jd-req-col:nth-child(2){--jr:var(--amber)} .jd-req-label{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-60);margin-bottom:14px} .jd-req-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .jd-req-col li{font-size:var(--type-body);line-height:1.95;color:var(--ink-60);padding-left:18px;position:relative} .jd-req-col li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--jr,var(--green))} @media (max-width:700px){ .jd-req{grid-template-columns:1fr;gap:6px} } .jd-forms{list-style:none;border-top:1px solid var(--hairline)} .jd-forms li{display:grid;grid-template-columns:minmax(96px,.3fr) minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:baseline;color:var(--ink-60); padding:20px 2px;border-bottom:1px solid var(--hairline)} .jd-form-nm{font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--ink)} .jd-forms li > span:last-child{font-size:var(--type-body);line-height:1.95;color:var(--ink-60)} .jd-note{margin-top:20px;font-size:var(--type-body);line-height:1.95;color:var(--ink-60);max-width:var(--measure)} #work > .jd-note{margin-top:0;margin-bottom:18px} @media (max-width:600px){ .jd-forms li{grid-template-columns:1fr;gap:6px} } .jd-terms{border-top:1px solid var(--hairline)} .jd-terms > div{display:grid;grid-template-columns:minmax(112px,.28fr) minmax(0,1fr);gap:clamp(16px,3vw,36px);align-items:baseline; padding:20px 2px;border-bottom:1px solid var(--hairline)} .jd-terms dt{font-size:13px;font-weight:700;letter-spacing:.04em} .jd-terms dd{min-width:0;font-size:var(--type-body);line-height:1.95;color:var(--ink-60);overflow-wrap:anywhere} @media (max-width:600px){ .jd-terms > div{grid-template-columns:1fr;gap:6px} /* 1 カラムでも項目の境界を瞬時に追えるよう、既存の meta と同じラベル表現に揃える。 */ .jd-terms dt{font-size:10px;letter-spacing:.24em;color:var(--ink-60)} } .jd-steps{list-style:none;display:flex;flex-direction:column;gap:0} .jd-steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(14px,2.4vw,28px);align-items:baseline;color:var(--ink-60); padding:20px 2px;border-bottom:1px solid var(--hairline)} .jd-steps li:first-child{border-top:1px solid var(--hairline)} .jd-step-n{font-family:var(--font-dot);font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--ink-60)} .jd-step-b{font-size:var(--type-body);line-height:1.95;color:var(--ink-60)} .jd-step-b b{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:5px} @media (max-width:600px){ .jd-steps li{grid-template-columns:40px minmax(0,1fr)} } /* JD の長い本文を読み進めた人にだけ出す、モバイル専用の応募導線。 面は Lumen の無色ガラスを継承し、色を CTA 自体へ足さない。 */ .jd-floating-cta-sentinel{position:absolute;top:30vh;left:0;width:1px;height:1px;pointer-events:none} .jd-floating-cta{display:none;visibility:hidden;pointer-events:none;opacity:0;transform:translateY(18px); transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s} .jd-floating-cta.is-visible{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0);transition-delay:0s} @media (max-width:720px){ .jd-floating-cta{position:fixed;z-index:95;left:12px;right:12px;bottom:0;display:flex; justify-content:center;padding:10px 10px calc(10px + env(safe-area-inset-bottom));border-radius:12px 12px 0 0} .jd-floating-cta .btn{flex:0 1 auto;width:auto;min-width:min(244px,100%);max-width:100%;min-height:48px;white-space:nowrap} } @media (prefers-reduced-motion: reduce){.jd-floating-cta{transition:none}} /* ---------- Contact: 事業別の選択メニュー + フォーム ---------- */ .window-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .window-card{position:relative;min-height:190px;padding:34px 30px;display:flex;flex-direction:column;gap:14px} .window-card::before{content:"";position:absolute;left:30px;top:26px;width:9px;height:9px;border-radius:50%;background:var(--wc,var(--green));box-shadow:0 0 20px color-mix(in srgb,var(--wc,var(--green)) 48%, transparent)} .window-card:nth-child(2){--wc:var(--amber)} .window-card:nth-child(3){--wc:var(--teal)} .window-card:nth-child(4){--wc:var(--ink-40)} .window-card h3{padding-top:20px;font-size:17px;font-weight:700} .window-card p{font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink-60)} .window-ref{font-size:12px;font-weight:700;color:var(--ink-60)} .window-ref a{text-decoration:underline;text-decoration-color:rgba(111,141,24,.38);text-underline-offset:4px} .window-ref a:hover{color:var(--green-deep)} @media (max-width:900px){ .window-grid{grid-template-columns:1fr} .window-card{min-height:0} } .contact-layout{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(50px,9vw,130px);align-items:start} .contact-layout .section-head{margin-bottom:0} .contact-form{display:flex;flex-direction:column;gap:28px;padding:clamp(30px,5vw,54px)} .form-fields{display:flex;flex-direction:column;gap:28px} .contact-form label{display:flex;flex-direction:column;gap:10px;font-size:13px;font-weight:700;letter-spacing:.04em} .req,.opt{margin-left:.7em;font-size:10px;font-weight:700;letter-spacing:.14em;vertical-align:.12em} .req{color:var(--green-deep)} .req::before{content:"";display:inline-block;width:5px;height:5px;margin-right:.55em;border-radius:50%;background:var(--green);vertical-align:.1em} .opt{color:var(--ink-60)} .label-detail{display:block;margin-top:2px;color:var(--ink-60);font-size:11.5px;font-weight:500;line-height:1.8} /* native select の挙動は保ち、文字を大きくしすぎず、矢印だけサイト側で整える。 */ .select-wrap{position:relative;display:block} .select-wrap::after{content:"⌄";position:absolute;right:14px;top:50%;transform:translateY(-58%);font:500 18px var(--font-en);color:var(--ink-60);pointer-events:none} .type-select select{min-height:48px;padding-right:42px;appearance:none;-webkit-appearance:none;cursor:pointer;font-size:15px} #contact-type:invalid{color:var(--ink-40)} .contact-form input,.contact-form select,.contact-form textarea{width:100%;border:0;border-bottom:1px solid rgba(33,30,24,.28);border-radius:0;background:rgba(255,255,255,.12);color:var(--ink);font:inherit;font-size:16px;font-weight:400;letter-spacing:.01em;line-height:1.6;padding:13px 10px;outline:none} .contact-form textarea{resize:vertical;min-height:180px;border:1px solid rgba(33,30,24,.22)} .contact-form input:focus-visible,.contact-form select:focus-visible{border-color:var(--green);box-shadow:0 2px 0 var(--green)} .contact-form textarea:focus-visible{box-shadow:0 0 0 2px var(--green)} .form-note{color:var(--ink-60);font-size:var(--type-note);line-height:var(--leading-note)} .form-note a{text-decoration:underline;text-decoration-color:rgba(111,141,24,.38);text-underline-offset:4px} .form-note a:hover{color:var(--green-deep)} .form-submit{align-self:flex-start;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--cream);font:600 13px var(--font-jp);letter-spacing:.12em;padding:13px 34px;cursor:pointer;transition:background .25s,color .25s} .form-submit:hover{background:var(--green);color:var(--ink);border-color:var(--green)} .form-submit:disabled{cursor:wait;opacity:.62} .contact-form.is-submitted .form-fields{display:none} .form-success{min-height:240px;display:flex;flex-direction:column;justify-content:center;gap:12px;color:var(--ink-60);font-size:14px;line-height:2} .form-success[hidden]{display:none} .form-success-title{font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.55;color:var(--ink)} @media (max-width:900px){ .contact-layout{grid-template-columns:1fr} .contact-layout .section-head{position:static} .contact-form{padding:28px 22px} } /* ---------- Legal (Privacy) ---------- */ .privacy-layout{display:grid;grid-template-columns:minmax(160px,.45fr) minmax(0,1.55fr);gap:clamp(46px,8vw,120px);align-items:start} .privacy-rule{height:1px;margin-top:34px;background:linear-gradient(90deg,var(--green),var(--amber),var(--teal),transparent)} @media (max-width:900px){ .privacy-layout{grid-template-columns:1fr} } /* ============================================================= Reveal（IntersectionObserver .rv → .is-in） ============================================================= */ /* reveal の縦移動は --rv-y に逃がす。こうしないと .rv.is-in{transform:none} が カード個別の transform（ホバーの傾き等）を打ち消してしまう。 */ .rv{opacity:0;--rv-y:26px;transform:translateY(var(--rv-y));transition:opacity .8s cubic-bezier(.22,.6,.2,1),transform .8s cubic-bezier(.22,.6,.2,1)} /* backdrop-filter と opacity を同じ合成層に置くと、表示途中だけ背景色が生で濃く出る。 ガラス面とその祖先は完成時の質感を保ったまま、移動だけで reveal する。 */ .rv.rv-composite{opacity:1;transition-property:transform} .rv.is-in{opacity:1;--rv-y:0px} .rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s} @media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} .orb,.bento-tile,.agent-card{transition:none} .hero-silk img{animation:none} .hero-silk-loop{display:none} .nav, .page-home .nav-links a:not(.nav-recruit):not(.nav-cta), .page-home .nav-recruit, .page-home .nav-cta, .page-home.nav-fv .nav-links a:not(.nav-recruit):not(.nav-cta), .page-home.nav-fv .nav-recruit, .page-home.nav-fv .nav-cta{transition:none} } /* ---------- focus ---------- */ a:focus-visible,button:focus-visible{outline:2px solid var(--green-deep);outline-offset:4px;border-radius:2px} /* ---------- モバイル ---------- */ @media (max-width:720px){ .nav{top:12px;width:calc(100% - 20px);padding:7px 10px 7px 21px} /* 320px では補助アンカーをフッターへ委ね、二つの行動の 44px 高だけは削らない。 */ .nav-links{gap:4px;font-size:10.5px} .nav-links a:not(.nav-recruit):not(.nav-cta){display:none} .nav-recruit{padding-inline:5px;font-size:10.5px;white-space:nowrap} .nav-cta{padding:7px 10px;font-size:10.5px;white-space:nowrap} .nav-wordmark{--wordmark-height:16px;font-size:13px;letter-spacing:.28em} .h-display{font-size:clamp(32px,11.2vw,44px);line-height:1.5;text-wrap:wrap} /* 文節の中は割らず、Hero で意図した2つの文節を縦に積む。 */ .h-display .h-line{display:block;width:max-content;max-width:100%;margin-inline:auto} .h-display .h-line + .h-line{margin-left:auto} /* 円の最小幅 158px × 2 が狭い本文幅を超えるため、320px帯だけ縮める。 */ .fw-wheel{width:clamp(140px,44vw,158px)} /* 軌道の光は装飾なので、section 外へ scrollWidth を広げない。 */ .factory,.why{overflow-x:clip} .hero{min-height:auto} .hero-content{padding-top:170px;padding-bottom:80px} .hero-plain br{display:none} .btn-row{width:100%;justify-content:center} .btn{flex:1 1 210px;max-width:280px} .intro-inner{border-left:0;padding-left:0} .page-head{padding-top:150px} .page-head-title{font-size:clamp(27px,7.8vw,38px)} .footer-row{flex-direction:column;gap:16px} }