/* ===================================================================== KBT Innovation — shared site stylesheet Monochrome (white/black/grey), golden-ratio (φ) system, editorial: Zen Old Mincho + Fraunces + Inter/Zen Kaku + JetBrains Mono. Used by the homepage and all 5 business subpages — keep in one place so the header, footer and world-view stay identical everywhere. ===================================================================== */ /* ============ TOKENS ============ */ :root{ /* ===== MONOCHROME — dark base. Grey carries only a ~1% cool cast ===== */ --bg:#0A0A0B; --bg-2:#0E0E10; --panel:#131315; --panel-2:#191A1C; --fg:#F4F4F5; --fg-dim:#A2A2A6; --fg-faint:#65656A; --border:rgba(255,255,255,0.085); --border-strong:rgba(255,255,255,0.17); --grid-fine:rgba(255,255,255,0.022); --grid-bold:rgba(255,255,255,0.05); --accent:#ECECEE; --accent-2:#C6C6C9; --indigo:#DADADC; --violet:#F4F4F5; --lime:#FFFFFF; --accent-soft:rgba(255,255,255,0.10); --accent-line:rgba(255,255,255,0.32); --glow:rgba(255,255,255,0.13); --grad-accent:linear-gradient(115deg,#FFFFFF,#BDBDC0); --grad-text:linear-gradient(108deg,var(--fg) 18%,#D2D2D5 60%,#9C9CA0); --hairline:linear-gradient(90deg,transparent,var(--border-strong),transparent); --glass:rgba(24,24,28,0.55); --shadow-card:0 1px 0 rgba(255,255,255,.05) inset,0 2px 6px rgba(0,0,0,.35),0 16px 40px -18px rgba(0,0,0,.62); --shadow-hover:0 1px 0 rgba(255,255,255,.09) inset,0 0 0 1px var(--accent-line),0 30px 70px -28px rgba(0,0,0,.78),0 0 60px -16px var(--glow); --radius:20px; --radius-lg:28px; --maxw:1200px; --ease:cubic-bezier(.16,1,.3,1); --sans:"Inter","Zen Kaku Gothic New",system-ui,sans-serif; --display:"Fraunces","Zen Old Mincho",Georgia,serif; --mincho:"Zen Old Mincho","Fraunces",serif; --jp:"Zen Kaku Gothic New",system-ui,sans-serif; --mono:"JetBrains Mono",monospace; /* ===== GOLDEN RATIO SYSTEM ===== */ --phi:1.618; --phi-sqrt:1.272; --split-major:61.8%; --split-minor:38.2%; /* fr-based golden split: gap-agnostic (unlike %+1fr, where the gutter steals from the minor track and pushes the ratio off φ). Two tracks in these fractions land EXACTLY 61.8 : 38.2 of the post-gap space. */ --col-major:1.618fr; /* = φ */ --col-minor:1fr; /* bento golden module: 13-col Fibonacci grid (8 + 5). A big card spans 8, a small one 5 → 8:5 = 1.6 ≈ φ. Row module 233px is the next Fibonacci step (…89,144,233) so cell heights sit in the same series. */ --bento-cols:13; --bento-row:233px; /* type = √φ (≈1.272) modular scale — every step derived from --fs-base, so heading→body size ratios stay φ-consistent (no magic numbers) */ --fs-base:17.5px; /* 2026-07-10 社長指示「全体的にもう少し文字を大きく」：16px→17.5px（√φチェーンで連動） */ --fs-sm:calc(var(--fs-base) / var(--phi-sqrt)); /* ≈12.6 */ --fs-xs:calc(var(--fs-sm) / var(--phi-sqrt)); /* ≈9.9 */ --fs-md:calc(var(--fs-base) * var(--phi-sqrt)); /* ≈20.4 */ --fs-lg:calc(var(--fs-md) * var(--phi-sqrt)); /* ≈25.9 */ --fs-xl:calc(var(--fs-lg) * var(--phi-sqrt)); /* ≈33.0 */ --fs-2xl:calc(var(--fs-xl) * var(--phi-sqrt)); /* ≈41.9 */ --fs-3xl:calc(var(--fs-2xl) * var(--phi-sqrt)); /* ≈53.3 */ --fs-h2:clamp(30px,4.4vw,54px); /* 2026-07-10 再設計：H1は「あなたの会社に」(全角7字≒7.07em)を1行で収める必要がある。 ヒーローφカラム幅=0.618×(100vw−123px)（≥1268pxでは665.6px定数）に対し、 旧 8.4vw/上限110px は全デスクトップ幅で折返していた（全角7字×110px≒770px＞665px）。 新式 calc(8.4vw−11px)/上限90px は全幅で「2まとまり=きっちり2行」を約4〜5%の マージン付きで保証する（900px未満は1カラム化するので下限44pxで安全）。 */ --fs-hero:clamp(44px,calc(8.4vw - 11px),90px); --sp-1:8px; --sp-2:13px; --sp-3:21px; --sp-4:34px; --sp-5:55px; --sp-6:89px; --sp-7:144px; /* ★背景螺旋のサイズ一括制御★（2026-07-10 社長FB「螺旋が大きすぎる」→1180pxから縮小。 987=フィボナッチ数でφ設計と整合）。.blueprint-bg(背景画像)と .spiral-walk(ロボットの道)の 両方がこの1変数を読むため、ここを変えるだけで常に完全同期する（ズレない）。 */ --spiral-w:min(987px,100vw); } [data-theme="light"]{ --bg:#FFFFFF; --bg-2:#F4F4F5; --panel:#FFFFFF; --panel-2:#FAFAFB; --fg:#0A0A0B; --fg-dim:#545458; --fg-faint:#8A8A8E; --border:rgba(12,12,14,0.11); --border-strong:rgba(12,12,14,0.22); --grid-fine:rgba(12,12,14,0.03); --grid-bold:rgba(12,12,14,0.06); --accent:#141416; --accent-2:#3A3A3E; --indigo:#242427; --violet:#0A0A0B; --lime:#0A0A0B; --accent-soft:rgba(12,12,14,0.055); --accent-line:rgba(12,12,14,0.30); --glow:rgba(12,12,14,0.10); --grad-accent:linear-gradient(115deg,#1B1B1D,#4C4C50); --grad-text:linear-gradient(108deg,var(--fg) 20%,#333336 62%,#5C5C60); --hairline:linear-gradient(90deg,transparent,var(--border-strong),transparent); --glass:rgba(255,255,255,0.62); --shadow-card:0 1px 2px rgba(10,10,20,.06),0 14px 36px -18px rgba(10,10,20,.20); --shadow-hover:0 0 0 1px var(--accent-line),0 26px 60px -26px rgba(10,10,20,.28); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--bg); color:var(--fg); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; letter-spacing:-0.006em; } a{color:inherit;text-decoration:none} ::selection{background:var(--accent-soft);color:var(--fg)} /* ============ ATMOSPHERE (golden-spiral whisper + film grain) ============ */ /* 旧:グリッド背景（黄金螺旋に差替 2026-07-10。戻す時は ↓ のコメントを外し、 さらに下の「新:黄金螺旋」版 .blueprint-bg / [data-theme="light"] .blueprint-bg を削除orコメントアウトする） */ /* .blueprint-bg{ position:fixed;inset:-10% 0;z-index:0;pointer-events:none; transform:translateY(var(--bp-y,0px)); background-image: linear-gradient(var(--grid-fine) 1px,transparent 1px), linear-gradient(90deg,var(--grid-fine) 1px,transparent 1px), linear-gradient(var(--grid-bold) 1px,transparent 1px), linear-gradient(90deg,var(--grid-bold) 1px,transparent 1px); background-size:29px 29px,29px 29px,145px 145px,145px 145px; mask-image:radial-gradient(130% 90% at 50% 0%,#000 8%,rgba(0,0,0,.55) 45%,transparent 82%); -webkit-mask-image:radial-gradient(130% 90% at 50% 0%,#000 8%,rgba(0,0,0,.55) 45%,transparent 82%); } */ /* 新:黄金律の螺旋を装飾として1つ配置。 幾何=φ正確な黄金長方形(999.95:618=φ:1)＋再帰的なφ正方形分割＋四分円弧をつないだ対数螺旋(node生成)。 単色・太線(SVG内 螺旋sw2.8/分割sw1.6、scale後≈螺旋3px/分割1.8px)。上部やや右に大きく1つ置き、ラジアルマスクで下へ溶かす。 タイル繰り返しなし・pointer-events:none・z-index:0(本文の後ろ)。ダーク=白線 / ライト=黒線(data URI内に色を直書き)。 ★濃さの一括制御★（2026-07-10 社長FB「もっと太く濃く」→太線＋濃いめに。今後の微調整はここ1数値でOK） SVG内の線αは高め固定(螺旋.6/分割.3)。全体の濃さは下の --spiral-op（ダーク基準の要素opacity）1つで振る。 例) もっと濃く→--spiral-op を上げる(上限1.0で実効=螺旋.6/分割.3) / 控えめ→下げる。 ライトは自動で ×0.8 に連動（白線より黒線が強く出るぶんを補正）。 現状(--spiral-op:0.75)の実効濃さ ≒ ダーク:螺旋.45/分割.225、ライト:螺旋.36/分割.18。 */ .blueprint-bg{ position:fixed;inset:-10% 0;z-index:0;pointer-events:none; transform:translateY(var(--bp-y,0px)); opacity:var(--spiral-op,0.75); /* ← 濃さ一括制御(ダーク基準)。ここだけ変えれば全体が濃く/薄くなる */ background-repeat:no-repeat; background-position:right -4% top 6%; background-size:var(--spiral-w) auto; /* ← サイズ一括制御は :root の --spiral-w */ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20999.95%20618'%20fill%3D'none'%3E%3Cg%20stroke%3D'rgba(255%2C255%2C255%2C0.3)'%20stroke-width%3D'1.6'%3E%3Cpath%20d%3D'M0%2C0%20H999.95%20V618%20H0%20Z'%2F%3E%3Cpath%20d%3D'M618%2C0%20L618%2C618%20M618%2C381.95%20L999.95%2C381.95%20M763.89%2C381.95%20L763.89%2C618%20M618%2C472.11%20L763.89%2C472.11%20M708.16%2C381.95%20L708.16%2C472.11%20M708.16%2C437.67%20L763.89%2C437.67%20M729.45%2C437.67%20L729.45%2C472.11%20M708.16%2C450.82%20L729.45%2C450.82%20M721.32%2C437.67%20L721.32%2C450.82%20M721.32%2C445.8%20L729.45%2C445.8%20M724.43%2C445.8%20L724.43%2C450.82%20M721.32%2C447.72%20L724.43%2C447.72'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M0%2C618%20L2.35%2C564.14%20L9.39%2C510.69%20L21.06%2C458.05%20L37.27%2C406.63%20L57.9%2C356.82%20L82.8%2C309%20L111.76%2C263.53%20L144.58%2C220.76%20L181.01%2C181.01%20L220.76%2C144.58%20L263.53%2C111.76%20L309%2C82.8%20L356.82%2C57.9%20L406.63%2C37.27%20L458.05%2C21.06%20L510.69%2C9.39%20L564.14%2C2.35%20L618%2C0%20L651.29%2C1.45%20L684.32%2C5.8%20L716.85%2C13.01%20L748.63%2C23.03%20L779.42%2C35.79%20L808.97%2C51.17%20L837.07%2C69.07%20L863.51%2C89.36%20L888.08%2C111.87%20L910.59%2C136.44%20L930.87%2C162.87%20L948.77%2C190.97%20L964.16%2C220.53%20L976.91%2C251.31%20L986.93%2C283.09%20L994.14%2C315.62%20L998.49%2C348.66%20L999.95%2C381.95%20L999.05%2C402.52%20L996.36%2C422.94%20L991.9%2C443.04%20L985.71%2C462.68%20L977.83%2C481.71%20L968.32%2C499.97%20L957.25%2C517.34%20L944.72%2C533.68%20L930.81%2C548.86%20L915.62%2C562.77%20L899.29%2C575.31%20L881.92%2C586.37%20L863.65%2C595.88%20L844.63%2C603.76%20L824.99%2C609.96%20L804.88%2C614.41%20L784.46%2C617.1%20L763.89%2C618%20L751.17%2C617.44%20L738.56%2C615.78%20L726.13%2C613.03%20L713.99%2C609.2%20L702.23%2C604.33%20L690.95%2C598.45%20L680.21%2C591.62%20L670.11%2C583.87%20L660.73%2C575.27%20L652.13%2C565.89%20L644.38%2C555.79%20L637.55%2C545.05%20L631.67%2C533.77%20L626.8%2C522.01%20L622.97%2C509.87%20L620.22%2C497.44%20L618.56%2C484.83%20L618%2C472.11%20L618.34%2C464.25%20L619.37%2C456.45%20L621.07%2C448.77%20L623.44%2C441.27%20L626.45%2C434%20L630.08%2C427.03%20L634.31%2C420.39%20L639.09%2C414.15%20L644.41%2C408.35%20L650.21%2C403.04%20L656.45%2C398.25%20L663.08%2C394.02%20L670.06%2C390.39%20L677.33%2C387.38%20L684.83%2C385.02%20L692.51%2C383.31%20L700.31%2C382.29%20L708.16%2C381.95%20L713.02%2C382.16%20L717.84%2C382.79%20L722.59%2C383.84%20L727.22%2C385.31%20L731.72%2C387.17%20L736.03%2C389.41%20L740.13%2C392.02%20L743.98%2C394.98%20L747.57%2C398.27%20L750.85%2C401.85%20L753.81%2C405.71%20L756.42%2C409.81%20L758.67%2C414.12%20L760.53%2C418.61%20L761.99%2C423.25%20L763.04%2C427.99%20L763.68%2C432.81%20L763.89%2C437.67%20L763.76%2C440.67%20L763.37%2C443.65%20L762.72%2C446.58%20L761.81%2C449.45%20L760.66%2C452.22%20L759.28%2C454.89%20L757.66%2C457.42%20L755.83%2C459.81%20L753.8%2C462.02%20L751.59%2C464.05%20L749.2%2C465.88%20L746.67%2C467.5%20L744.01%2C468.88%20L741.23%2C470.03%20L738.36%2C470.94%20L735.43%2C471.59%20L732.45%2C471.98%20L729.45%2C472.11%20L727.59%2C472.03%20L725.75%2C471.79%20L723.94%2C471.38%20L722.17%2C470.83%20L720.45%2C470.12%20L718.81%2C469.26%20L717.24%2C468.26%20L715.77%2C467.13%20L714.4%2C465.88%20L713.14%2C464.51%20L712.01%2C463.03%20L711.02%2C461.47%20L710.16%2C459.82%20L709.45%2C458.1%20L708.89%2C456.33%20L708.49%2C454.52%20L708.25%2C452.68%20L708.16%2C450.82%20L708.22%2C449.68%20L708.36%2C448.54%20L708.61%2C447.42%20L708.96%2C446.33%20L709.4%2C445.27%20L709.93%2C444.25%20L710.54%2C443.28%20L711.24%2C442.37%20L712.02%2C441.52%20L712.86%2C440.75%20L713.77%2C440.05%20L714.74%2C439.43%20L715.76%2C438.9%20L716.82%2C438.46%20L717.92%2C438.12%20L719.04%2C437.87%20L720.17%2C437.72%20L721.32%2C437.67%20L722.03%2C437.7%20L722.73%2C437.79%20L723.42%2C437.95%20L724.1%2C438.16%20L724.76%2C438.43%20L725.38%2C438.76%20L725.98%2C439.14%20L726.55%2C439.57%20L727.07%2C440.05%20L727.55%2C440.57%20L727.98%2C441.14%20L728.36%2C441.74%20L728.69%2C442.36%20L728.96%2C443.02%20L729.17%2C443.7%20L729.33%2C444.39%20L729.42%2C445.09%20L729.45%2C445.8%20L729.43%2C446.24%20L729.37%2C446.67%20L729.28%2C447.1%20L729.15%2C447.52%20L728.98%2C447.92%20L728.78%2C448.31%20L728.54%2C448.68%20L728.27%2C449.03%20L727.98%2C449.35%20L727.66%2C449.65%20L727.31%2C449.92%20L726.94%2C450.15%20L726.55%2C450.35%20L726.14%2C450.52%20L725.73%2C450.65%20L725.3%2C450.75%20L724.86%2C450.81%20L724.43%2C450.82%20L724.15%2C450.81%20L723.89%2C450.78%20L723.62%2C450.72%20L723.36%2C450.64%20L723.11%2C450.53%20L722.87%2C450.41%20L722.64%2C450.26%20L722.43%2C450.1%20L722.23%2C449.92%20L722.05%2C449.72%20L721.88%2C449.5%20L721.74%2C449.27%20L721.61%2C449.03%20L721.51%2C448.78%20L721.43%2C448.52%20L721.37%2C448.26%20L721.33%2C447.99%20L721.32%2C447.72'%20stroke%3D'rgba(255%2C255%2C255%2C0.6)'%20stroke-width%3D'2.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E"); mask-image:radial-gradient(118% 92% at 70% 6%,#000 30%,rgba(0,0,0,.6) 58%,transparent 86%); -webkit-mask-image:radial-gradient(118% 92% at 70% 6%,#000 30%,rgba(0,0,0,.6) 58%,transparent 86%); } [data-theme="light"] .blueprint-bg{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20999.95%20618'%20fill%3D'none'%3E%3Cg%20stroke%3D'rgba(12%2C12%2C14%2C0.3)'%20stroke-width%3D'1.6'%3E%3Cpath%20d%3D'M0%2C0%20H999.95%20V618%20H0%20Z'%2F%3E%3Cpath%20d%3D'M618%2C0%20L618%2C618%20M618%2C381.95%20L999.95%2C381.95%20M763.89%2C381.95%20L763.89%2C618%20M618%2C472.11%20L763.89%2C472.11%20M708.16%2C381.95%20L708.16%2C472.11%20M708.16%2C437.67%20L763.89%2C437.67%20M729.45%2C437.67%20L729.45%2C472.11%20M708.16%2C450.82%20L729.45%2C450.82%20M721.32%2C437.67%20L721.32%2C450.82%20M721.32%2C445.8%20L729.45%2C445.8%20M724.43%2C445.8%20L724.43%2C450.82%20M721.32%2C447.72%20L724.43%2C447.72'%2F%3E%3C%2Fg%3E%3Cpath%20d%3D'M0%2C618%20L2.35%2C564.14%20L9.39%2C510.69%20L21.06%2C458.05%20L37.27%2C406.63%20L57.9%2C356.82%20L82.8%2C309%20L111.76%2C263.53%20L144.58%2C220.76%20L181.01%2C181.01%20L220.76%2C144.58%20L263.53%2C111.76%20L309%2C82.8%20L356.82%2C57.9%20L406.63%2C37.27%20L458.05%2C21.06%20L510.69%2C9.39%20L564.14%2C2.35%20L618%2C0%20L651.29%2C1.45%20L684.32%2C5.8%20L716.85%2C13.01%20L748.63%2C23.03%20L779.42%2C35.79%20L808.97%2C51.17%20L837.07%2C69.07%20L863.51%2C89.36%20L888.08%2C111.87%20L910.59%2C136.44%20L930.87%2C162.87%20L948.77%2C190.97%20L964.16%2C220.53%20L976.91%2C251.31%20L986.93%2C283.09%20L994.14%2C315.62%20L998.49%2C348.66%20L999.95%2C381.95%20L999.05%2C402.52%20L996.36%2C422.94%20L991.9%2C443.04%20L985.71%2C462.68%20L977.83%2C481.71%20L968.32%2C499.97%20L957.25%2C517.34%20L944.72%2C533.68%20L930.81%2C548.86%20L915.62%2C562.77%20L899.29%2C575.31%20L881.92%2C586.37%20L863.65%2C595.88%20L844.63%2C603.76%20L824.99%2C609.96%20L804.88%2C614.41%20L784.46%2C617.1%20L763.89%2C618%20L751.17%2C617.44%20L738.56%2C615.78%20L726.13%2C613.03%20L713.99%2C609.2%20L702.23%2C604.33%20L690.95%2C598.45%20L680.21%2C591.62%20L670.11%2C583.87%20L660.73%2C575.27%20L652.13%2C565.89%20L644.38%2C555.79%20L637.55%2C545.05%20L631.67%2C533.77%20L626.8%2C522.01%20L622.97%2C509.87%20L620.22%2C497.44%20L618.56%2C484.83%20L618%2C472.11%20L618.34%2C464.25%20L619.37%2C456.45%20L621.07%2C448.77%20L623.44%2C441.27%20L626.45%2C434%20L630.08%2C427.03%20L634.31%2C420.39%20L639.09%2C414.15%20L644.41%2C408.35%20L650.21%2C403.04%20L656.45%2C398.25%20L663.08%2C394.02%20L670.06%2C390.39%20L677.33%2C387.38%20L684.83%2C385.02%20L692.51%2C383.31%20L700.31%2C382.29%20L708.16%2C381.95%20L713.02%2C382.16%20L717.84%2C382.79%20L722.59%2C383.84%20L727.22%2C385.31%20L731.72%2C387.17%20L736.03%2C389.41%20L740.13%2C392.02%20L743.98%2C394.98%20L747.57%2C398.27%20L750.85%2C401.85%20L753.81%2C405.71%20L756.42%2C409.81%20L758.67%2C414.12%20L760.53%2C418.61%20L761.99%2C423.25%20L763.04%2C427.99%20L763.68%2C432.81%20L763.89%2C437.67%20L763.76%2C440.67%20L763.37%2C443.65%20L762.72%2C446.58%20L761.81%2C449.45%20L760.66%2C452.22%20L759.28%2C454.89%20L757.66%2C457.42%20L755.83%2C459.81%20L753.8%2C462.02%20L751.59%2C464.05%20L749.2%2C465.88%20L746.67%2C467.5%20L744.01%2C468.88%20L741.23%2C470.03%20L738.36%2C470.94%20L735.43%2C471.59%20L732.45%2C471.98%20L729.45%2C472.11%20L727.59%2C472.03%20L725.75%2C471.79%20L723.94%2C471.38%20L722.17%2C470.83%20L720.45%2C470.12%20L718.81%2C469.26%20L717.24%2C468.26%20L715.77%2C467.13%20L714.4%2C465.88%20L713.14%2C464.51%20L712.01%2C463.03%20L711.02%2C461.47%20L710.16%2C459.82%20L709.45%2C458.1%20L708.89%2C456.33%20L708.49%2C454.52%20L708.25%2C452.68%20L708.16%2C450.82%20L708.22%2C449.68%20L708.36%2C448.54%20L708.61%2C447.42%20L708.96%2C446.33%20L709.4%2C445.27%20L709.93%2C444.25%20L710.54%2C443.28%20L711.24%2C442.37%20L712.02%2C441.52%20L712.86%2C440.75%20L713.77%2C440.05%20L714.74%2C439.43%20L715.76%2C438.9%20L716.82%2C438.46%20L717.92%2C438.12%20L719.04%2C437.87%20L720.17%2C437.72%20L721.32%2C437.67%20L722.03%2C437.7%20L722.73%2C437.79%20L723.42%2C437.95%20L724.1%2C438.16%20L724.76%2C438.43%20L725.38%2C438.76%20L725.98%2C439.14%20L726.55%2C439.57%20L727.07%2C440.05%20L727.55%2C440.57%20L727.98%2C441.14%20L728.36%2C441.74%20L728.69%2C442.36%20L728.96%2C443.02%20L729.17%2C443.7%20L729.33%2C444.39%20L729.42%2C445.09%20L729.45%2C445.8%20L729.43%2C446.24%20L729.37%2C446.67%20L729.28%2C447.1%20L729.15%2C447.52%20L728.98%2C447.92%20L728.78%2C448.31%20L728.54%2C448.68%20L728.27%2C449.03%20L727.98%2C449.35%20L727.66%2C449.65%20L727.31%2C449.92%20L726.94%2C450.15%20L726.55%2C450.35%20L726.14%2C450.52%20L725.73%2C450.65%20L725.3%2C450.75%20L724.86%2C450.81%20L724.43%2C450.82%20L724.15%2C450.81%20L723.89%2C450.78%20L723.62%2C450.72%20L723.36%2C450.64%20L723.11%2C450.53%20L722.87%2C450.41%20L722.64%2C450.26%20L722.43%2C450.1%20L722.23%2C449.92%20L722.05%2C449.72%20L721.88%2C449.5%20L721.74%2C449.27%20L721.61%2C449.03%20L721.51%2C448.78%20L721.43%2C448.52%20L721.37%2C448.26%20L721.33%2C447.99%20L721.32%2C447.72'%20stroke%3D'rgba(12%2C12%2C14%2C0.6)'%20stroke-width%3D'2.8'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E"); opacity:calc(var(--spiral-op,0.75) * 0.8); /* ← ライトは黒線が強く出るため自動で0.8倍 */ } .grain{ position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } [data-theme="light"] .grain{mix-blend-mode:multiply;opacity:.04} /* ============ SPIRAL WALKER (トップページ限定・2026-07-10 社長指示) ============ 黄金螺旋の上をスクロールに応じて歩くAIロボット。 .spiral-walk は .blueprint-bg と同一の fixed 座標系(inset/-bp-y/ラジアルマスク)を持つ 透明オーバーレイ。内側の svg は背景の background-position: right -4% top 6% / background-size: var(--spiral-w) を calc で厳密に再現し、data URI の螺旋とピタリ重なる（螺旋の見た目は背景のまま不変）。 ロボットは currentColor(=--fg) でテーマ連動：ダーク=白線／ライト=黒線。 背景(--spiral-op:0.75)より一段はっきり見えるよう opacity .92（マスクの減衰は螺旋と共有）。 */ .spiral-walk{ position:fixed;inset:-10% 0;z-index:0;pointer-events:none;overflow:hidden; transform:translateY(var(--bp-y,0px)); color:var(--fg); opacity:.92; mask-image:radial-gradient(118% 92% at 70% 6%,#000 30%,rgba(0,0,0,.6) 58%,transparent 86%); -webkit-mask-image:radial-gradient(118% 92% at 70% 6%,#000 30%,rgba(0,0,0,.6) 58%,transparent 86%); } /* モバイル・タブレット：螺旋が上部コーナーの装飾になり、縦長ページのパララックスで ロボットがほぼ常時画面外を歩く（実測：375px幅=可視区間ゼロ／768px幅=7割欠け）。 既存レイアウトのブレークポイント(900px)に合わせて小画面では非表示にする。 */ @media(max-width:899px){.spiral-walk{display:none}} .spiral-walk svg{ position:absolute;overflow:visible; /* = background-size:var(--spiral-w) auto（viewBox比 999.95:618 ≒ 1.618）。 背景と同じ --spiral-w を参照＝定義1箇所で常に完全同期 */ width:var(--spiral-w); height:calc(var(--spiral-w)/1.618); /* = background-position:right -4% top 6%（%は「余白(枠-画像)」基準の公式どおり） */ left:calc((100% - var(--spiral-w))*1.04); top:calc((100% - var(--spiral-w)/1.618)*0.06); } /* ============ LAYOUT ============ */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4);position:relative;z-index:1} section{position:relative;z-index:1} .eyebrow{ font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase; color:var(--fg-dim);display:inline-flex;align-items:center;gap:12px;font-weight:400; } .eyebrow::before{content:"";width:28px;height:1px;background:var(--fg-faint)} /* ============ HEADER ============ */ header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:all .4s var(--ease); border-bottom:1px solid transparent; } header.scrolled{ background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--border); } .nav{max-width:var(--maxw);margin:0 auto;padding:20px 28px;display:flex;align-items:center;gap:32px} .logo{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:500;font-size:18px;letter-spacing:-0.01em} .logo-mark{ width:32px;height:32px;border-radius:50%;position:relative;flex-shrink:0; border:1px solid var(--border-strong);color:var(--fg); display:grid;place-items:center; } .logo-mark svg{width:32px;height:32px} .logo b{font-weight:600} .logo span{color:var(--fg-dim);font-weight:400;font-family:var(--jp);font-size:15px} .nav-links{display:flex;gap:2px;margin-left:8px} .nav-links a{ position:relative;font-size:13px;color:var(--fg-dim);padding:7px 12px;font-weight:400;letter-spacing:.01em; transition:color .3s var(--ease); } .nav-links a::after{ content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px; background:var(--fg);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease); } .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fg)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px} .theme-btn{ width:36px;height:36px;border-radius:10px;border:1px solid var(--border); background:var(--panel);color:var(--fg-dim);cursor:pointer;display:grid;place-items:center; transition:all .25s var(--ease); } .theme-btn:hover{color:var(--fg);border-color:var(--border-strong)} .theme-btn svg{width:16px;height:16px} .btn{ display:inline-flex;align-items:center;gap:8px;font-family:var(--sans); font-size:13.5px;font-weight:500;padding:11px 20px;border-radius:100px;cursor:pointer; transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease); border:1px solid transparent;letter-spacing:.005em; } .btn svg{transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(2px)} .btn-primary{background:var(--fg);color:var(--bg)} .btn-primary:hover{transform:translateY(-1px)} .btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--fg)} .btn-ghost:hover{border-color:var(--fg);background:transparent} .btn-accent{background:var(--fg);color:var(--bg)} .btn-accent:hover{transform:translateY(-1px)} .menu-toggle{display:none} /* ============ HERO (homepage — editorial golden split) ============ */ .hero{padding:var(--sp-7) 0 var(--sp-6);position:relative} .hero-grid{ /* copy : photo = φ : 1 = 61.8 : 38.2 (fr keeps it exact despite the gap; was `61.8% 1fr`, which the 55px gutter dragged to ~0.65) */ display:grid;grid-template-columns:var(--col-major) var(--col-minor);gap:var(--sp-5);align-items:center; } .hero-copy .badge{ display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px; letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:var(--sp-4); } .hero-copy .badge .dot{width:5px;height:5px;border-radius:50%;background:var(--fg);flex-shrink:0} .hero-copy .badge b{color:var(--fg);font-weight:400} .hero h1{ font-family:var(--mincho); font-size:var(--fs-hero);line-height:1.14;letter-spacing:0.01em;font-weight:500; margin-bottom:var(--sp-4);text-wrap:balance; } .hero h1 .en{ font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-0.01em; color:var(--fg-dim);display:block;font-size:.618em;margin-top:.12em; } .hero h1 .lead{color:var(--fg)} .mask-line{display:block;overflow:hidden} .mask-line > span{display:block;transform:translateY(110%);transition:transform .9s var(--ease)} .mask-in .mask-line:nth-child(1) > span{transition-delay:.05s} .mask-in .mask-line:nth-child(2) > span{transition-delay:.16s} .mask-in .mask-line:nth-child(3) > span{transition-delay:.30s} .mask-in .mask-line > span{transform:none} .hero p.sub{ font-family:var(--jp); font-size:clamp(15.5px,1.7vw,17.5px);color:var(--fg-dim); max-width:32em;margin:0 0 var(--sp-4);line-height:2.0;font-weight:400; } .hero-cta{display:flex;gap:var(--sp-2);flex-wrap:wrap} .axis{ margin-top:var(--sp-4);display:flex;align-items:center;gap:0;flex-wrap:wrap; font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fg-faint); border-top:1px solid var(--border);padding-top:var(--sp-3); } .axis span{padding-right:16px;color:var(--fg-dim)} .axis span b{color:var(--fg);font-weight:400} .axis i{width:1px;height:11px;background:var(--border-strong);margin-right:16px} /* ---- 3-second "what" line (inside h1, below the star lead) ---- */ .hero .hero-what{ display:block;font-family:var(--jp);font-weight:500; font-size:clamp(17px,2.3vw,25px);letter-spacing:.02em;line-height:1.5; color:var(--fg);margin-top:.5em; } /* ---- demoted signature couplet (mincho narration + english) ---- */ .hero-tag{ display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-3); margin:0 0 var(--sp-4); } .hero-tag .ht-jp{ font-family:var(--mincho);font-size:clamp(14.5px,1.6vw,16px); letter-spacing:.05em;color:var(--fg-dim);line-height:1.7; } .hero-tag .ht-en{ font-family:var(--display);font-style:italic;font-weight:400; font-size:clamp(12.5px,1.4vw,14px);letter-spacing:.01em;color:var(--fg-dim); } /* ---- 3-pillar chips (2-story: function ×2 | industry ×1) ---- */ .pillars{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1);margin:0 0 var(--sp-4)} .pillar{ display:inline-flex;align-items:center;gap:3px; padding:var(--sp-2) var(--sp-3); border:1px solid var(--border-strong);border-radius:999px; font-family:var(--sans);font-size:14.5px;letter-spacing:.01em;color:var(--fg-dim); transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease); } .pillar b{color:var(--fg);font-weight:500} .pillar .px{font-family:var(--mono);font-size:.82em;letter-spacing:.03em;color:var(--fg-dim)} .pillar:hover{border-color:var(--accent-line);color:var(--fg);background:var(--accent-soft)} /* subtle divider: function pillars (1F) | industry flagship (2F) */ .pillar-div{width:1px;height:var(--sp-3);background:var(--border-strong);margin:0 var(--sp-1);flex-shrink:0} /* industry chip = 2nd story: small "業種特化" label, placed last */ .pillar-industry .p-tag{ font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; color:var(--fg-dim);margin-right:6px;padding-right:6px;border-right:1px solid var(--border-strong); } /* ---- PHOTO SLOT ---- */ .photo-slot{ position:relative;overflow:hidden;background:var(--panel-2); border:1px solid var(--border);border-radius:2px; } .photo-slot::before{ content:"";position:absolute;inset:9px;border:1px solid var(--border);pointer-events:none;z-index:2; } .photo-slot::after{ content:"";position:absolute;top:9px;left:9px;width:11px;height:11px;pointer-events:none;z-index:2; background: linear-gradient(var(--fg-faint),var(--fg-faint)) 0 50%/11px 1px no-repeat, linear-gradient(var(--fg-faint),var(--fg-faint)) 50% 0/1px 11px no-repeat; opacity:.5; } .photo-slot .ps-label{ position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;height:max-content;width:max-content; font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fg-faint); display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1;text-align:center; } .photo-slot .ps-label .ps-mark{font-size:11px;letter-spacing:.22em;color:var(--fg-dim)} .photo-slot .ps-ratio{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:9px;color:var(--fg-faint);letter-spacing:.08em;z-index:2} .photo-slot img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3; filter:grayscale(1) contrast(1.08) brightness(.98); } .photo-slot:has(img)::before,.photo-slot:has(img)::after,.photo-slot:has(img) .ps-label,.photo-slot:has(img) .ps-ratio{opacity:0} .hero-right{display:flex;flex-direction:column;justify-content:center} .hero-photo{aspect-ratio:1.618;margin-top:0} .card-photo{aspect-ratio:1.618;margin-bottom:var(--sp-3)} .card-photo .ps-label{font-size:9px;letter-spacing:.1em;gap:4px} .card-photo .ps-label .ps-mark{font-size:10px} .card-photo::before{inset:6px} .card-photo::after{top:6px;left:6px;width:9px;height:9px} /* ============ SECTION HEAD ============ */ .sec-head{margin-bottom:var(--sp-5);max-width:41em} .sec-head h2{ font-family:var(--mincho); font-size:var(--fs-h2);letter-spacing:0.005em;font-weight:500;margin:var(--sp-3) 0 var(--sp-2);line-height:1.24; } .sec-head h2 .en{font-family:var(--display);font-style:italic;font-weight:400;color:var(--fg-dim)} .sec-head p{font-family:var(--jp);color:var(--fg-dim);font-size:16px;line-height:1.95} .sec-pad{padding:var(--sp-6) 0} .section-rule{height:1px;background:var(--border);border:0;margin:0} /* ============ BENTO / GALLERY CARDS (homepage) ============ */ .bento{ display:grid;grid-template-columns:repeat(var(--bento-cols),1fr);gap:var(--sp-3); grid-auto-rows:minmax(var(--bento-row),auto); } .card{ position:relative;border:1px solid var(--border);border-radius:2px; background:var(--panel); padding:var(--sp-4);display:flex;flex-direction:column;overflow:hidden; transition:background .45s var(--ease),border-color .45s var(--ease); } .card:hover{border-color:var(--border-strong);background:var(--panel-2)} /* ---- GOLDEN BENTO PLACEMENT (big : small = 8 : 5 ≈ φ) ---- Each .biz-group has its own 13-col grid, so the two groups read the same golden geometry. Big cards span 8 cols + 2 rows (feature), small cards span 5 cols. Group 1: big-left (dental) / tall-right (hitsuji). Group 2: two small stacked left (web→seo) / big feature right (marketing), which also carries the 制作・診断 → 継続 funnel left-to-right. */ .biz-lg{grid-column:1 / 9;grid-row:1 / 3} /* 8 wide, 2 tall (major) */ .biz-tall{grid-column:9 / 14;grid-row:1 / 3} /* 5 wide, 2 tall (minor) */ .biz-sm{grid-column:1 / 6} /* 5 wide, 1 row (minor) */ .biz-feature{grid-column:6 / 14;grid-row:1 / 3} /* 8 wide, 2 tall (major) */ /* Internal media band: photos stay a strict golden 1.618:1 everywhere (per the site's photo mandate). On the big FEATURE card the extra height of the 2-row span is given to the caption/desc as deliberate editorial breathing room rather than distorting the photo — see report for the media:text approximation note. */ /* legacy spans (kept for any subpage that still uses them) */ .c-lg{grid-column:span 4;grid-row:span 2} .c-sm{grid-column:span 2;grid-row:span 1} .c-md{grid-column:span 3;grid-row:span 1} .card .ico{ width:34px;height:34px;display:grid;place-items:start;margin-bottom:var(--sp-3);color:var(--fg); } .card .ico svg{width:26px;height:26px} .card h3{font-family:var(--mincho);font-size:var(--fs-md);letter-spacing:.01em;font-weight:500;margin-bottom:10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;line-height:1.3} .card h3 .path{font-family:var(--mono);font-size:10px;color:var(--fg-faint);font-weight:400;letter-spacing:.02em} .card .desc{font-family:var(--jp);color:var(--fg-dim);font-size:14.5px;line-height:1.85;flex-grow:1} .card .desc p + p{margin-top:9px} /* 複数段落desc用（2026-07-10 歯科カード3段落化） */ .card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-3);gap:12px;padding-top:var(--sp-2);border-top:1px solid var(--border)} .tag{ font-family:var(--mono);font-size:10.5px;color:var(--fg-dim);letter-spacing:.04em; border:1px solid var(--border);padding:3px 9px;border-radius:2px; } .tag-row{display:flex;gap:6px;flex-wrap:wrap} .cta-link{ display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px; letter-spacing:.04em;text-transform:uppercase;font-weight:400;color:var(--fg); transition:gap .3s var(--ease);white-space:nowrap; } .card:hover .cta-link{gap:12px} .cta-link svg{width:13px;height:13px} .hero-viz{ margin-top:auto;height:120px;border:1px solid var(--border);border-radius:2px; background:transparent;position:relative;overflow:hidden; display:flex;align-items:flex-end;gap:10px;padding:var(--sp-2); } .hero-viz .bar{ flex:1;background:var(--fg);opacity:.16; transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease); } .card:hover .hero-viz .bar{opacity:.28} .reveal.in .hero-viz .bar{transform:scaleY(1)} .reveal.in .hero-viz .bar:nth-child(2){transition-delay:.05s} .reveal.in .hero-viz .bar:nth-child(3){transition-delay:.10s} .reveal.in .hero-viz .bar:nth-child(4){transition-delay:.15s} .reveal.in .hero-viz .bar:nth-child(5){transition-delay:.20s} .reveal.in .hero-viz .bar:nth-child(6){transition-delay:.25s} .reveal.in .hero-viz .bar:nth-child(7){transition-delay:.30s} .reveal.in .hero-viz .bar:nth-child(8){transition-delay:.35s} .reveal.in .hero-viz .bar:nth-child(9){transition-delay:.40s} .self-badge{ position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9.5px; color:var(--fg-dim);letter-spacing:.04em; } .biz-group{margin-top:var(--sp-6)} .biz-group:first-of-type{margin-top:0} .group-label{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4)} .group-label .gn{font-family:var(--mono);font-size:10.5px;color:var(--fg-faint);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap} .group-label .gt{font-family:var(--mincho);font-size:clamp(18px,2.2vw,24px);font-weight:500;color:var(--fg);letter-spacing:.01em;white-space:nowrap} .group-label .gl{flex:1;height:1px;background:var(--border);align-self:center} .group-label .group-flow{font-family:var(--mono);font-size:10px;color:var(--fg-faint);letter-spacing:.08em;white-space:nowrap} .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .card-meta{display:flex;align-items:center;gap:9px} .role-badge{ font-family:var(--mono);font-size:9.5px;line-height:1;color:var(--fg-dim);letter-spacing:.06em; text-transform:uppercase;padding:4px 0;white-space:nowrap; } /* ============ VALUES BELT ============ */ .values{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2);position:relative} .values::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline);opacity:.6} .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .val{padding:var(--sp-5) var(--sp-4);border-right:1px solid var(--border);position:relative;transition:background .4s var(--ease)} .val:last-child{border-right:none} .val:hover{background:var(--panel-2)} .val .vn{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.14em} .val h4{font-family:var(--mincho);font-size:20px;font-weight:500;letter-spacing:.01em;margin:16px 0 14px;display:flex;align-items:center;gap:12px} .val h4 svg{width:19px;height:19px;color:var(--fg)} .val p{font-family:var(--jp);color:var(--fg-dim);font-size:14.5px;line-height:1.9} /* ============ ABOUT ============ */ .about-grid{display:grid;grid-template-columns:var(--col-minor) var(--col-major);gap:var(--sp-5);align-items:start} .dl{border-top:1px solid var(--border)} .dl .row{display:grid;grid-template-columns:130px 1fr;gap:20px;padding:18px 4px;border-bottom:1px solid var(--border);align-items:baseline} .dl dt{font-family:var(--mono);font-size:12px;color:var(--fg-faint);letter-spacing:.05em} .dl dd{font-family:var(--jp);font-size:16px;color:var(--fg)} .tbc{color:var(--fg-faint)!important;font-style:normal} .tbc::after{content:"確認中";font-family:var(--mono);font-size:10px;color:var(--fg-faint); border:1px solid var(--border);padding:2px 7px;border-radius:2px;margin-left:8px;letter-spacing:.06em} .about-note{ font-family:var(--mono);font-size:11.5px;color:var(--fg-faint);margin-top:20px; display:flex;align-items:center;gap:8px; } .about-card{ border:1px solid var(--border);border-radius:2px;padding:var(--sp-4); background:var(--panel);position:relative; } .about-card h3{font-family:var(--mincho);font-size:23px;font-weight:500;letter-spacing:.01em;margin-bottom:16px;line-height:1.4} .about-card p{font-family:var(--jp);color:var(--fg-dim);font-size:15px;line-height:1.95} .stat-row{display:flex;gap:var(--sp-5);margin-top:var(--sp-4);flex-wrap:wrap;padding-top:var(--sp-4);border-top:1px solid var(--border)} .stat .k{font-family:var(--display);font-size:40px;font-weight:400;letter-spacing:-0.02em;line-height:1;color:var(--fg)} .stat .l{font-family:var(--jp);font-size:11.5px;color:var(--fg-dim);margin-top:8px;letter-spacing:.02em} /* ============ CONTACT ============ */ .contact{border-top:1px solid var(--border);position:relative} .contact::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline);opacity:.6} .contact-grid{display:grid;grid-template-columns:var(--col-minor) var(--col-major);gap:var(--sp-5);align-items:start} .contact-l h2{font-family:var(--mincho);font-size:var(--fs-h2);letter-spacing:.01em;font-weight:500;line-height:1.28;margin:var(--sp-3) 0 var(--sp-3)} .contact-l p{font-family:var(--jp);color:var(--fg-dim);font-size:15.5px;line-height:1.95;margin-bottom:var(--sp-4)} .mail-chip{ display:inline-flex;align-items:center;gap:14px;border:1px solid var(--border);border-radius:2px; padding:16px 20px;background:transparent;transition:border-color .3s var(--ease); } .mail-chip:hover{border-color:var(--fg)} .mail-chip .mi{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--border-strong);color:var(--fg);display:grid;place-items:center} .mail-chip .mi svg{width:17px;height:17px} .mail-chip .mt{font-family:var(--mono);font-size:15px;color:var(--fg)} .mail-chip .ml{font-size:11px;color:var(--fg-dim)} .form{border:1px solid var(--border);border-radius:2px;padding:var(--sp-4);background:var(--panel)} .field{margin-bottom:16px} .field label{display:block;font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase} .field input,.field textarea,.field select{ width:100%;background:var(--bg-2);border:1px solid var(--border);border-radius:2px; padding:13px 15px;color:var(--fg);font-family:var(--jp);font-size:15px;transition:border-color .25s var(--ease); } .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--fg)} .field input::placeholder,.field textarea::placeholder{color:var(--fg-faint)} .field textarea{resize:vertical;min-height:96px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form .btn{width:100%;justify-content:center;padding:13px;margin-top:6px} .form-note{font-family:var(--mono);font-size:10.5px;color:var(--fg-faint);text-align:center;margin-top:12px} /* ============ FOOTER ============ */ footer{border-top:1px solid var(--border);background:var(--bg-2);padding:72px 0 36px;position:relative} footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--hairline);opacity:.5} .foot-grid{display:grid;grid-template-columns:1.618fr 1fr 1fr;gap:var(--sp-4);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border)} .foot-brand p{font-family:var(--jp);color:var(--fg-dim);font-size:14.5px;line-height:1.85;margin-top:18px;max-width:340px} .foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:18px} .foot-col a{display:block;color:var(--fg-dim);font-size:14.5px;padding:6px 0;transition:color .25s var(--ease),padding-left .25s var(--ease)} .foot-col a:hover{color:var(--fg);padding-left:4px} .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:14px} .foot-bottom small{font-family:var(--mono);font-size:11.5px;color:var(--fg-faint)} .foot-bottom .links{display:flex;gap:20px} .foot-bottom .links a{font-size:12px;color:var(--fg-dim)} /* ============ REVEAL ============ */ .reveal{opacity:0;transform:translateY(12px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} /* ===================================================================== SUBPAGE COMPONENTS (business detail pages) — same mono/φ language ===================================================================== */ /* breadcrumb */ .crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--fg-faint);margin-bottom:var(--sp-4);text-transform:uppercase} .crumb a{color:var(--fg-dim);transition:color .25s var(--ease)} .crumb a:hover{color:var(--fg)} .crumb .sep{opacity:.5} .crumb [aria-current="page"]{color:var(--fg)} /* page hero (subpages): copy left (major) + photo right (minor) */ .page-hero{padding:calc(var(--sp-7) - 12px) 0 var(--sp-6);position:relative} .page-hero-grid{display:grid;grid-template-columns:var(--col-major) var(--col-minor);gap:var(--sp-5);align-items:center} .page-hero h1{ font-family:var(--mincho);font-size:clamp(36px,5.6vw,68px);line-height:1.2;letter-spacing:.01em; font-weight:500;margin:0 0 var(--sp-3);text-wrap:balance; } .page-hero h1 .en{ font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-0.01em; color:var(--fg-dim);display:block;font-size:.382em;margin-top:.5em; } .page-hero .lede{font-family:var(--jp);color:var(--fg-dim);font-size:clamp(15.5px,1.6vw,17.5px);line-height:2.0;max-width:34em;margin-bottom:var(--sp-4)} .page-hero .hero-photo{margin-top:0} .page-hero-cta{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)} /* generic prose */ .lead-p{font-family:var(--jp);color:var(--fg-dim);font-size:16px;line-height:2.0;max-width:40em} /* problem list — numbered ledger (order = index, not decoration) */ .prob-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--border)} .prob{display:flex;gap:var(--sp-3);padding:var(--sp-4) var(--sp-3);border-bottom:1px solid var(--border)} .prob:nth-child(odd){border-right:1px solid var(--border)} .prob .pn{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.1em;padding-top:4px;flex-shrink:0} .prob h3{font-family:var(--mincho);font-size:18px;font-weight:500;letter-spacing:.01em;margin-bottom:8px;line-height:1.4} .prob p{font-family:var(--jp);color:var(--fg-dim);font-size:14.5px;line-height:1.85} /* service list — hairline rows */ .svc-list{border-top:1px solid var(--border)} .svc{display:grid;grid-template-columns:var(--split-minor) 1fr;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--border);align-items:baseline} .svc h3{font-family:var(--mincho);font-size:20px;font-weight:500;letter-spacing:.01em;line-height:1.35} .svc h3 .num{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.1em;margin-right:12px} .svc p{font-family:var(--jp);color:var(--fg-dim);font-size:15px;line-height:1.9} .svc ul{list-style:none;margin-top:10px;display:flex;flex-wrap:wrap;gap:6px} .svc ul li{font-family:var(--mono);font-size:11px;color:var(--fg-dim);letter-spacing:.03em;border:1px solid var(--border);padding:3px 9px;border-radius:2px} /* steps / flow */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border);counter-reset:step} .steps.cols-3{grid-template-columns:repeat(3,1fr)} .step{padding:var(--sp-4) var(--sp-3);border-bottom:1px solid var(--border);border-right:1px solid var(--border);position:relative} .step:last-child{border-right:none} .step .sn{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.1em;margin-bottom:14px;display:block} .step h3{font-family:var(--mincho);font-size:18px;font-weight:500;letter-spacing:.01em;margin-bottom:10px;line-height:1.35} .step p{font-family:var(--jp);color:var(--fg-dim);font-size:14px;line-height:1.85} /* why-grid (strengths) */ .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--border);border-radius:2px;overflow:hidden} .why{padding:var(--sp-4);border-right:1px solid var(--border);position:relative;transition:background .4s var(--ease)} .why:last-child{border-right:none} .why:hover{background:var(--panel-2)} .why .wn{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.12em} .why h3{font-family:var(--mincho);font-size:19px;font-weight:500;letter-spacing:.01em;margin:14px 0 12px;line-height:1.4} .why p{font-family:var(--jp);color:var(--fg-dim);font-size:14.5px;line-height:1.9} /* pricing */ .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)} .price{border:1px solid var(--border);border-radius:2px;padding:var(--sp-4);background:var(--panel);display:flex;flex-direction:column;transition:border-color .4s var(--ease)} .price:hover{border-color:var(--border-strong)} .price .pt{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px} .price .pv{font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:-0.01em;line-height:1.1;color:var(--fg)} .price .pv small{font-size:16px;color:var(--fg-dim);font-family:var(--jp)} .price .pd{font-family:var(--jp);color:var(--fg-dim);font-size:14px;line-height:1.85;margin-top:14px;flex-grow:1} .price .pnote{font-family:var(--mono);font-size:10px;color:var(--fg-faint);letter-spacing:.04em;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)} .price-note{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.04em;margin-top:var(--sp-3);display:flex;align-items:center;gap:8px} /* cross-link (funnel between seo <-> marketing etc.) */ .crosslink{ display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap; border:1px solid var(--border);border-radius:2px;padding:var(--sp-4);background:var(--panel);margin-top:var(--sp-4); transition:border-color .35s var(--ease); } .crosslink:hover{border-color:var(--border-strong)} .crosslink .cl-t{font-family:var(--mincho);font-size:18px;font-weight:500;letter-spacing:.01em} .crosslink .cl-d{font-family:var(--jp);font-size:14px;color:var(--fg-dim);line-height:1.8;margin-top:6px} /* faq —
hairline accordion (subpages). Tokens only, no colour. */ .faq{border-top:1px solid var(--border)} .faq details{border-bottom:1px solid var(--border)} .faq summary{ cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:var(--sp-3); padding:var(--sp-3) 4px;transition:background .3s var(--ease); } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{background:var(--panel-2)} .faq .fq-n{font-family:var(--mono);font-size:11px;color:var(--fg-faint);letter-spacing:.1em;flex-shrink:0} .faq .fq-t{font-family:var(--mincho);font-size:18px;font-weight:500;letter-spacing:.01em;line-height:1.55;flex:1} .faq .fq-x{font-family:var(--mono);font-size:16px;color:var(--fg-faint);flex-shrink:0;line-height:1;transition:transform .3s var(--ease);align-self:center} .faq details[open] .fq-x{transform:rotate(45deg)} .faq .fa{font-family:var(--jp);color:var(--fg-dim);font-size:15px;line-height:1.95;padding:0 4px var(--sp-4);max-width:44em} .faq .fa a{color:var(--fg);border-bottom:1px solid var(--border-strong);transition:border-color .25s var(--ease)} .faq .fa a:hover{border-color:var(--fg)} /* related pages nav (bottom of subpages) */ .related{border-top:1px solid var(--border);padding-top:var(--sp-4)} .related h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:var(--sp-3)} .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-2)} .related-grid a{ border:1px solid var(--border);border-radius:2px;padding:16px 18px; font-family:var(--mincho);font-size:16px;color:var(--fg);transition:border-color .3s var(--ease),background .3s var(--ease); display:flex;align-items:center;justify-content:space-between;gap:10px; } .related-grid a:hover{border-color:var(--border-strong);background:var(--panel-2)} .related-grid a span{font-family:var(--mono);font-size:11px;color:var(--fg-faint)} /* ============ RESPONSIVE ============ */ @media(max-width:900px){ .nav-links{display:none} .menu-toggle{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--fg);cursor:pointer} .menu-toggle svg{width:18px;height:18px} /* golden bento → single stacked column on tablet/mobile (no overflow) */ .bento{grid-template-columns:1fr;grid-auto-rows:auto} .biz-lg,.biz-tall,.biz-sm,.biz-feature,.c-lg,.c-md,.c-sm{grid-column:1 / -1;grid-row:auto} .values-grid{grid-template-columns:1fr} .val{border-right:none;border-bottom:1px solid var(--border)} .val:last-child{border-bottom:none} .about-grid,.contact-grid{grid-template-columns:1fr;gap:36px} .foot-grid{grid-template-columns:1fr 1fr;gap:30px} .foot-brand{grid-column:span 2} .hero-grid{grid-template-columns:1fr;gap:var(--sp-5)} .hero-photo{max-width:520px;margin-left:auto;margin-right:auto;width:100%} /* subpages */ .page-hero-grid{grid-template-columns:1fr;gap:var(--sp-4)} .svc{grid-template-columns:1fr;gap:var(--sp-2)} .steps,.steps.cols-3{grid-template-columns:1fr 1fr} .why-grid{grid-template-columns:1fr} .why{border-right:none;border-bottom:1px solid var(--border)} .why:last-child{border-bottom:none} .price-grid{grid-template-columns:1fr} .related-grid{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .wrap{padding:0 20px} .nav{padding:14px 20px} .hero{padding:140px 0 70px} .page-hero{padding:120px 0 60px} .sec-pad{padding:64px 0} .field-row{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .foot-brand{grid-column:span 1} .axis{font-size:11px} .pillar{font-size:13.5px;padding:10px var(--sp-2)} .pillar-div{display:none} .group-label .group-flow{display:none} /* 2階建てラベル長対応：極小幅では装飾注記を畳む */ .hero-tag{gap:var(--sp-1) var(--sp-2)} .prob-grid{grid-template-columns:1fr} .prob:nth-child(odd){border-right:none} .steps,.steps.cols-3{grid-template-columns:1fr} .step{border-right:none} .related-grid{grid-template-columns:1fr} } /* visible keyboard focus */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--fg);outline-offset:3px;border-radius:1px; } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none;filter:none} .blueprint-bg{transform:none!important} .spiral-walk{transform:none!important} /* ロボットはJS側で静止表示(eye付近固定)に切替 */ .mask-line > span{transform:none!important} }