/* ═══════════════════════════════════════════════════════════════ 株式会社ドラフト — site.css このファイル1本で全ページの見た目を持つ。ページごとのCSSは作らない。 1 トークン 色と書体。ここを変えると全部が変わる 2 土台 body・節・見出し・カード・記事一覧・フォーム 3 暗い地への入れ替え 反転ブロックの組み直しと、ヘッダー・フッター 4 ヒーロー トップの脳のキャンバスとターミナル 5 トップ BUSINESS・記事・帯・ボタン 6 G案 白地に、読めるシアン（2026-10-11）。黒い面と写真の上の扱い ═══════════════════════════════════════════════════════════════ */ /* ══ 1 トークン ══ */ :root{ --paper:#fbfbfb; --paper2:#f2f2f2; --paper3:#e9e9e9; --ink:#000000; --ink2:#262626; --muted:#555555; --faint:#6b6b6b; --line:rgba(0,0,0,.10); --line2:rgba(0,0,0,.18); --line3:rgba(0,0,0,.34); --cy:#007695; --glow:none; --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; --disp:"Archivo","Zen Kaku Gothic New",system-ui,sans-serif; --syn:"Syncopate","Archivo",sans-serif; --jost:"Jost",sans-serif; --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif; --mincho:"Zen Old Mincho","Hiragino Mincho ProN",serif; /* G案（2026-10-11）：文字の変数。黒い面では 6節で値が入れ替わる */ --t1:#000000; --t2:#555555; --t3:#6b6b6b; --acT:#007695; --cy-brand:#56b5ce; } /* ══ 2 土台 ══ */ /* ANN — GHOST / monochrome identity 2026-08-29 * 正本＝この1枚。旧 main.css は退役（復旧用に残置） * * 2026-09-04：色をblock.xyzのトンマナへ寄せた（CEO指示）。実測した向こうの値は * 地 #FBFBFB ／ 文字 #000（純黒）／ 面 #FFFFFF・#F2F2F2 ／ 罫・プレースホルダ #D9D9D9 ／ * 弱い文字 #666666 ／ 濃い面 #0D0D0D。無彩色だけで、アクセントカラーは1色も使っていない。 * ANNは地が温かいグレー #EDEDEB だったので、明るく中立な #FBFBFB へ振り替えた。 * 旧値の控え＝assets/css/ghost.css.bak-20260904-tone * ⚠ 変えたのは色だけ。余白・書体・線の太さは触っていない。 */ /* Archivo は自前で配ける（テーマの assets/fonts/）。 ⚠ Googleから後から届く形（display=swap）だと、仮の書体で一度描いてから本物に入れ替わるので、 ヒーローの見出しが読み込みのたびに一段小さくなる。2026-09-06にCEOがiPhoneの録画で報告。 同じ生成元から先読みするので、入れ替えが起きない。可変フォント1本で500〜900をまかなう。 ⚠ font-display は **optional**。block だと「届くまで文字を出さない」ので、初回の表示が遅く見える （2026-09-06にCEOが指摘）。optional は間に合わなければ仮の書体のまま最後まで行く＝**途中で入れ替わらない**。 自前配信＋先読みで実測80msなので、ふつうは間に合う。 */ @font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:optional; src:url(../fonts/archivo-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:optional; src:url(../fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp); font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:var(--ink);text-decoration:none} ::selection{background:var(--ink);color:var(--paper)} /* 押せる部品は、スマホのダブルタップの拡大を止める（2026-10-19 CEO「ページが拡大されてしまう」→「ほかのページのボタンにも足して」）。 ボタンを素早く続けて押すと、Safari がダブルタップの拡大と読んでページが大きくなっていた。manipulation はそれだけを止め、指2本で広げる拡大は残す。 :where で詳しさを0にしてあるので、ほかの指定を上書きしない。数え方＝outputs/records/corp-ai-ghost-mark-2026-10-19/README.md */ :where(button,summary,label,[role="button"],input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"]){touch-action:manipulation} /* ══ chrome ══ */ .chrome{position:fixed;top:0;left:0;right:0;z-index:95; background:linear-gradient(180deg,rgba(251,251,251,.97),rgba(251,251,251,.7) 74%,transparent); backdrop-filter:blur(6px);padding:16px 26px; display:flex;justify-content:space-between;align-items:center;gap:20px} .brand{display:flex;align-items:center;gap:14px;margin:0} .brand svg{width:23px;color:var(--ink);flex:none} .brand span{font-family:var(--jost);font-size:15px;font-weight:500;letter-spacing:.44em; padding-left:0;margin-right:-.44em} /* align-items を指定しないと既定の stretch で全項目がCONTACTの箱の高さまで伸び、 文字がそれぞれの上端に付いて縦がずれる（2026-08-29に実際ずれていた） */ .gnav{display:flex;align-items:center;gap:22px; font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--faint)} .gnav span{cursor:default;transition:color .2s} .gnav span:hover{color:var(--ink)} @media(max-width:880px){.gnav{display:none}} /* ── ヘッダーの小メニュー（2026-09-16 CEO指示「情報量が少ない」）── 親にホバー、またはキーボードで中へ入ると開く。閉じている間は読み上げにも出さない。 ⚠ 親と一覧の間に隙間があるとホバーが切れるので、.gnav-dd の上の余白で橋を架ける。 */ .gnav-i{position:relative;display:flex;align-items:center} .gnav-dd{position:absolute;top:100%;left:-16px;padding-top:14px;z-index:96; opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s} .gnav-i:hover .gnav-dd,.gnav-i:focus-within .gnav-dd{opacity:1;visibility:visible;transform:none;pointer-events:auto} .gnav-dd-in{min-width:188px;padding:8px 0;background:rgba(6,6,6,.96);backdrop-filter:blur(8px); border:1px solid var(--line2);box-shadow:0 14px 34px rgba(0,0,0,.5)} .gnav-dd a{display:block;padding:9px 16px;white-space:nowrap; font-family:var(--jp);font-size:12.5px;letter-spacing:.04em;color:var(--ink2)} .gnav-dd a:hover,.gnav-dd a:focus-visible{color:var(--paper);background:var(--ink)} .gnav-i--cta .gnav-dd{left:auto;right:0} @media(prefers-reduced-motion:reduce){.gnav-dd{transition:none}} /* WordPressの管理バーの下に潜らせない（ログイン中の管理者にだけ起きる） */ body.admin-bar .chrome{top:32px} body.admin-bar .spnav{top:32px} @media screen and (max-width:782px){ body.admin-bar .chrome{top:46px} body.admin-bar .spnav{top:46px}} /* ── スマホのメニュー ── */ .burger{display:none;position:relative;width:44px;height:44px;padding:0;margin:-8px -10px -8px 0; background:transparent;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink); transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s} .burger span:nth-child(1){top:19px} .burger span:nth-child(2){top:26px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)} .burger:focus-visible{outline:2px solid var(--ink);outline-offset:2px} @media(max-width:880px){.burger{display:block}} .spnav{position:fixed;inset:0;z-index:94;background:var(--paper); opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s} .spnav[hidden]{display:block} body.nav-open .spnav{opacity:1;visibility:visible} body.nav-open{overflow:hidden} /* ⚠ 中身が縦に入り切らないとき、justify-content:center は上を切り落とす（スクロールしても戻れない）。 だから上そろえにして、少ないときだけ真ん中へ寄せる（2026-09-16＝行き先を増やしたときに実際に切れた）。 */ .spnav-in{height:100%;display:flex;flex-direction:column;justify-content:flex-start; padding:104px 26px 40px;max-width:520px;margin:0 auto; overflow-y:auto;-webkit-overflow-scrolling:touch} /* 2026-10-12 CEO決定：NOT A HOTEL と同じ2段にした（比較資料 https://claude.ai/artifact/3WHNT4ZHQ7s8aTWd2jr2qX の案A）。 1段目（.sp-root）は親だけ。2段目（.sp-pane）は親ごとに1枚で、押すと切り替わる（site.js）。 それまでの「子を親の下に縦に並べる」（2026-09-16）は、親が押せるように見えず、長さも画面2枚近くあったのでやめた。 親は英語だけ（2026-09-16 CEO指示）はそのまま。 */ .sp-pane{display:flex;flex-direction:column;min-height:100%} /* ⚠ 上の display:flex が hidden を打ち消すので、隠すときの規則を明示する */ .sp-pane[hidden]{display:none} .sp-l1{display:flex;flex-direction:column} /* 親の行。TOP の事業の見出し「AUEN」と同じ書体にし、右端の「›」で押せることを示す。行のあいだに線は引かない */ .sp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;padding:0 2px;margin:0; background:none;border:0;cursor:pointer;text-align:left;color:var(--ink); font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:.02em;-webkit-tap-highlight-color:transparent} .sp-row:active{opacity:.55} .sp-chev{width:16px;height:16px;flex:none;color:var(--ink)} .sp-back{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin:0 0 18px;padding:10px 2px;background:none;border:0;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--t3)} .sp-back .sp-chev{width:14px;height:14px;color:var(--t3)} .sp-l2{display:flex;flex-direction:column} .sp-l2 a{display:flex;align-items:center;min-height:56px;padding:0 2px;font-family:var(--jp);font-size:16px;letter-spacing:.04em;color:var(--ink)} .sp-l2 a:active{opacity:.55} .sp-row:focus-visible,.sp-back:focus-visible,.sp-l2 a:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* CONTACT（ボタン）の下の小さな行き先 */ .spnav-sub{display:flex;flex-direction:column;gap:2px;padding:10px 2px 16px 20px} .spnav-sub a{display:block;padding:7px 0;font-family:var(--jp);font-size:14px; letter-spacing:.02em;color:var(--muted)} .spnav-sub a:active{color:var(--ink)} .spnav-sub--cta{align-items:center;padding:14px 2px 0} .spnav-cta{display:block;margin:36px 0 0;padding:18px;text-align:center; background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.22em} .spnav-foot{margin:26px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em; color:var(--faint);line-height:2;text-align:center} @media(min-width:881px){.spnav{display:none!important}} @media(prefers-reduced-motion:reduce){.spnav{transition:none}.burger span{transition:none}} /* ══ node scaffold ══ */ .node{position:relative;padding:126px 6vw 104px;z-index:2} .node-in{width:min(1080px,100%);margin:0 auto;position:relative} /* 節と節のあいだ（2026-10-12 CEO決定）。区切り線は引かない。余白は NOT A HOTEL の間合い（約120px）にそろえる。 ページの見出しの直後と、最後の節の下は変えない（見出しの直後は「6 下層ページ」の48px＝2026-10-15）。専用の余白を持つ節（.node.ad-end など）は、後ろの規則が勝つ。 比較資料＝https://claude.ai/artifact/3WHNT4ZHQ7s8aTWd2jr2qX の案2 */ .node:where(:not(.page-head))+.node{padding-top:64px} .node:where(:not(.page-head)):has(+ .node){padding-bottom:56px} /* eyebrow ── ANNECY の「— 2026 —」 */ .eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 26px; font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--ink);text-transform:uppercase} .eyebrow::before{content:"";width:52px;height:1px;background:var(--ink);flex:none} .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)} .eyebrow em{font-style:normal;font-weight:600} .s-title{font-family:var(--jp);font-weight:900;color:var(--ink); font-size:clamp(23px,3.4vw,39px);line-height:1.4;margin:0 0 20px; letter-spacing:.02em;text-wrap:balance} .s-lead{color:var(--ink2);font-size:15.5px;margin:0 0 30px;line-height:2.05} .s-lead b{color:var(--ink);font-weight:700; background:linear-gradient(transparent 66%,var(--paper3) 66%)} .s-lead em{font-style:normal;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink)} /* ══ reveal ══ */ /* JSが動く時だけ隠す。動かなければ最初から見える（本文が消えないように） */ html.js .rv{opacity:0;transform:translateY(10px)} html.js .rv.in{animation:rvin .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)} @keyframes rvin{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none}html.js .rv.in{animation:none}} /* ══ 0x00 hero ══ */ /* 2026-09-04にCEO指示で作り直した。旧＝渦のアニメーション＋説明的なリード。 「インパクトが無さすぎる。クルクル回るアニメーションも安っぽい。文章もワクワクしない」。 直し＝①図を主役から外して**文字を主役**にする ②H1を56px→104pxまで上げる ③読み手にとって何が起きるかを1行で言う小見出し（.hsub）を足す ④背景の脳は輪郭と点だけにして、11秒に1度だけ光らせる（動きは残すが主張させない） */ #n00{position:relative;min-height:100svh;display:flex;align-items:center; padding-top:118px;overflow:hidden} #n00 .node-in{position:relative} .hero-text{position:relative;z-index:2;max-width:min(100%,980px)} #n00 h1{font-family:var(--jp);font-weight:900;color:var(--ink); font-size:clamp(30px,7.2vw,104px);line-height:1.14;letter-spacing:-.01em;margin:0 0 30px; text-wrap:nowrap} .hsub{font-family:var(--jp);font-weight:900;color:var(--ink); font-size:clamp(19px,2.7vw,37px);line-height:1.5;letter-spacing:.01em;margin:0 0 30px; padding-left:20px;border-left:3px solid var(--ink)} #n00 .hlead{color:var(--ink2);font-size:15.5px;line-height:2.05;margin:0 0 40px} #n00 .hlead b{color:var(--ink);font-weight:700} /* ⚠ スマホでは right を -14vw にすると画面外へ出る（#n00 の overflow:hidden で 横スクロールは起きないが、点検が「はみ出し」で鳴る）。段組みの右端に収める */ @media(max-width:1080px){ #n00 h1{text-wrap:balance} } @media(max-width:600px){ .hsub{padding-left:14px;border-left-width:2px} } /* ヒーローの一手目。290PVに対して相談0件だったので、SCROLLの前に次の一歩を置く。 ⚠ .btn は黒パネル（#n07）用で白地・黒文字。白いヒーローでは色を反転させないと見えない */ .herocta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 40px} .herocta .btn{background:var(--ink);color:var(--paper)} .herocta .tx{font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line2); padding-bottom:3px;transition:color .2s,border-color .2s} .herocta .tx:hover{color:var(--ink);border-color:var(--ink)} @media(max-width:600px){.herocta{gap:16px}.herocta .btn{width:100%;text-align:center}} /* rings */ .core{position:absolute;right:1vw;top:50%;transform:translateY(-50%); width:min(420px,38vw);aspect-ratio:1;z-index:-1;pointer-events:none} @keyframes rot{to{transform:rotate(360deg)}} @media(max-width:980px){.core{opacity:.3;right:-16vw;width:80vw}} /* ══ 図（共通） ══ */ /* COMPANY BRAIN の象徴＝渦（1周するごとに記憶が厚くなる）。ロゴの透かしは2026-08-29に廃止 */ /* ヒーローは2段組。図は絶対配置でなく本文と同じ列の中に置く＝浮かせない */ .hero-text{flex:1 1 auto;min-width:0} .dg{width:100%;height:auto;display:block} .dgcap{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--muted); margin:14px 0 0;text-align:center;line-height:1.8} .dgcap b{color:var(--ink);font-weight:600} .dgw{width:100%;height:auto;display:block;margin:0 auto} .dgw-sp{display:none} /* ⚠ 横長の図（620×246）をスマホ幅に縮めると、指定17pxの文字が**実際7.7px**、 ラベルは**4.5px**で描かれる（2026-09-04に実測）。SVGの文字は箱と一緒に縮むので、 CSSで大きくしても中身が箱からはみ出す。**同じ中身を縦に組み直した図に差し替える**しかない。 ⚠ `mobile_audit.py` の「極小文字」はHTMLしか見ておらず、これを見逃していた（同日に検知を足した） */ @media(max-width:760px){ .dgw{display:none} .dgw-sp{display:block;width:100%;height:auto;margin:0 auto}} .blegend{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0;margin:26px 0 0;border-top:1px solid var(--line2)} .blegend > div{padding:16px 18px 4px;border-right:1px solid var(--line)} .blegend > div:last-child{border-right:0} .blegend b{display:block;font-size:14px;font-weight:900;color:var(--ink);margin-bottom:6px} .blegend span{display:block;font-size:12px;color:var(--muted);line-height:1.8} @media(max-width:760px){.blegend > div{border-right:0;border-bottom:1px solid var(--line)}} /* ══ 0x01 shift ══ */ /* 2026-09-05：外枠1本で3列をくくると、白と黒の箱がくっついて1つの塊に見える（CEO指摘）。 **外枠を捨て、箱ごとに枠を持たせる。**あいだの列がそのまま隙間になり、矢印がそこに立つ。 ⚠ 枠線を足しただけでは足りなかった（同日・CEO指摘2回目）。**明るいほうの箱の地がページと同じ色**だと、 箱の中と隙間が同じ色になって隙間に見えない。**地を `--paper3` にして、隙間も74→130pxへ広げた。** */ .shift{display:grid;grid-template-columns:1fr 130px 1fr;margin:42px 0 0} .shift>figure{margin:0;padding:34px 30px;display:flex;flex-direction:column;gap:18px; border:1px solid var(--ink);background:var(--paper3)} .shift .arr{display:flex;align-items:center;justify-content:center; font-family:var(--mono);color:var(--ink);font-size:18px} .shift figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--faint)} .shift .ttl{font-size:17.5px;font-weight:900;color:var(--ink);line-height:1.5} .shift .dsc{font-size:13.5px;color:var(--muted);line-height:1.85;margin:0} .shift .next{background:var(--ink);color:var(--paper)} .shift .next figcaption{color:rgba(251,251,251,.5)} .shift .next .ttl{color:var(--paper)} .shift .next .dsc{color:rgba(251,251,251,.68)} /* ⚠ 2026-08-30修正：ここは `transform:rotate(90deg)` を **.arr（セル全体）** に掛けていた。 PCでは中央74pxの細い列なので気づかないが、スマホでは1列になって .arr が全幅になり、 **回転した上下の枠線が2本の縦線として本文の上に落ちる**（実機で発生）。 回したかったのは矢印の字だけなので、**箱は回さず、字を差し替える**。 */ @media(max-width:760px){.shift{grid-template-columns:1fr} .shift .arr{border:0;padding:16px 0;transform:none;font-size:0} .shift .arr::before{content:"↓";font-family:var(--mono);font-size:18px;color:var(--ink)}} /* ══ 0x02 brain ══ */ .brain{border:1px solid var(--ink);padding:34px 30px;margin:40px 0 0;background:var(--paper2)} /* スマホは余白を削って図に幅を回す。30px→16pxで図が281→311pxになり、文字が1割大きくなる */ @media(max-width:760px){.brain{padding:18px 16px}} /* ══ ループの表（トップ・商品ページで使用。0x02からは2026-09-04に外した） ══ */ .nl{position:relative;width:min(880px,100%);margin:38px 0 0;border-left:1px solid var(--ink)} .nl::after{content:"";position:absolute;left:-3.5px;top:0;width:7px;height:7px; background:var(--ink);z-index:2;pointer-events:none;animation:flowv 5s cubic-bezier(.4,0,.2,1) infinite} @keyframes flowv{0%{top:0;opacity:0}9%{opacity:1}86%{opacity:1}100%{top:100%;opacity:0}} @media(prefers-reduced-motion:reduce){.nl::after{display:none}} .nl-step{display:grid;grid-template-columns:154px 1fr;gap:22px;padding:16px 0 16px 28px} .nl-step+.nl-step{border-top:1px dashed var(--line2)} .nl-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--ink);font-weight:600} .nl-k em{font-style:normal;color:var(--faint);font-weight:400;display:block;margin-top:3px; font-size:10px;letter-spacing:.1em;font-family:var(--jp)} .nl-n{font-size:clamp(15px,1.9vw,19px);font-weight:900;color:var(--ink);line-height:1.45;margin:0} .nl-d{font-size:13px;color:var(--muted);margin:5px 0 0;line-height:1.8} .nl-div{display:grid;grid-template-columns:154px 1fr;gap:22px;align-items:center;margin:6px 0; padding:15px 0 15px 28px;background:var(--ink)} .nl-div b{justify-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.24em; color:var(--ink);background:var(--paper);padding:5px 14px;font-weight:600} .nl-div span{font-size:13.5px;color:var(--paper);font-weight:700} @media(max-width:760px){.nl-step,.nl-div{grid-template-columns:92px 1fr;gap:12px;padding-left:14px} .nl-k{font-size:10px;letter-spacing:.08em}.nl-k em{font-size:9px} .nl-n{font-size:14.5px}.nl-d{font-size:11.5px}.nl-div b{font-size:9.5px;padding:4px 10px}} /* ══ 0x04 boundary ══ */ .bd2{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:38px 0 0;border:1px solid var(--ink)} .bdcard{position:relative;padding:30px 26px 26px} .bdcard+.bdcard{border-left:1px solid var(--ink)} .bdcard .idx{position:absolute;top:0;right:0;font-family:var(--mono);font-size:9px; letter-spacing:.24em;padding:6px 12px} .bdcard h3{margin:0 0 16px;font-size:17.5px;font-weight:900;line-height:1.4} .bdcard ul{list-style:none;margin:0;padding:0} .bdcard li{font-size:13.5px;line-height:1.85;padding:9px 0 9px 20px;position:relative} .bdcard li::before{content:"";position:absolute;left:0;top:18px;width:9px;height:1px} /* SYSTEM＝黒 on グレー */ .bdcard.sys{background:var(--paper)} .bdcard.sys .idx{color:var(--faint)} .bdcard.sys h3{color:var(--ink);font-family:var(--jp)} .bdcard.sys li{color:var(--muted);border-top:1px solid var(--line)} .bdcard.sys li:first-child{border-top:0} .bdcard.sys li::before{background:var(--line2)} /* HUMAN＝反転・明朝 */ @media(max-width:720px){.bd2{grid-template-columns:1fr}.bdcard+.bdcard{border-left:0;border-top:1px solid var(--ink)}} /* ══ 0x05 evidence ══ */ .tt{margin:34px 0 0;border-top:1px solid var(--ink)} .tt .t{font-family:var(--mono);font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500} .tt b{display:block;font-size:14.5px;color:var(--ink);font-weight:700} .tt .d{display:block;font-size:12.5px;color:var(--faint);line-height:1.75;margin-top:3px} .tt .st{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--faint); border:1px solid var(--line2);padding:4px 9px;align-self:center;white-space:nowrap} @media(max-width:640px){.tt .st{grid-column:2;justify-self:start;margin-top:8px}} /* ══ 0x06 entry ══ */ .entry{margin:38px 0 0;border:1px solid var(--ink)} .ent{display:grid;grid-template-columns:44px 1fr auto;gap:0 18px;align-items:center;padding:17px 22px; border-bottom:1px solid var(--line2);transition:background .2s,color .2s} .ent:last-child{border-bottom:0} a.ent:hover{background:var(--ink)} a.ent:hover .id,a.ent:hover b,a.ent:hover .pr{color:var(--paper)} a.ent:hover .d,a.ent:hover .pr small{color:rgba(251,251,251,.62)} .ent .id{font-family:var(--syn);font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.08em} .ent b{display:block;font-size:15.5px;color:var(--ink);font-weight:900} .ent .d{display:block;font-size:12.5px;color:var(--faint);line-height:1.7;margin-top:2px} .ent .pr{font-family:var(--mono);font-size:14.5px;font-weight:600;color:var(--ink); font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .ent .pr small{display:block;font-size:9.5px;color:var(--faint);font-weight:400;margin-top:4px;letter-spacing:.06em} @media(max-width:640px){.ent{grid-template-columns:32px 1fr}.ent .pr{grid-column:2;text-align:left;margin-top:8px}} /* ══ 0x07 ══ */ .btn{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.24em; color:var(--ink);background:var(--paper);padding:16px 40px;transition:opacity .2s} .btn:hover{opacity:.82} .btn:focus-visible{outline:2px solid var(--paper);outline-offset:4px} a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:3px} footer.f{border-top:1px solid var(--ink);padding:34px 6vw 80px; font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint);text-align:center;line-height:2.2} /* ══════════ 共通部品（テーマ全体） ══════════ */ .skip{position:absolute;left:-9999px;top:0;z-index:100} .skip:focus{left:14px;top:14px;background:var(--ink);color:var(--paper); font-weight:700;padding:10px 16px;font-size:13px} body.admin-bar .skip:focus{top:46px} .chrome a{color:inherit} .gnav a{color:var(--faint);transition:color .2s} .gnav a:hover,.gnav a:focus-visible{color:var(--ink)} .ent{color:inherit} /* ── 下層ページの土台 ── */ /* 上の余白は、ほかのページの頭（.node.page-head）の126pxにそろえる。150pxだったので、ヘッダーからパンくずまでが24px遠かった（2026-10-12 CEO指摘） */ .pagehead{padding:126px 6vw 0} .pagehead .in{width:min(1080px,100%);margin:0 auto} .pagehead h1{font-weight:900;font-size:clamp(28px,5vw,54px);line-height:1.3; margin:0 0 24px;letter-spacing:.01em;text-wrap:balance} /* ── 記事一覧（/log/） ── */ /* 2026-09-04：事例ごとにまとめて出すようになった（連載＝1社ぶんの物語／単発＝調べたこと）。 節の見出しを足し、記事の見出しは h2 から h3 へ下げた（節の見出しが h2 になったため）。 */ .loglist{width:min(880px,100%);margin:0 auto;border-top:1px solid var(--ink)} /* 2026-09-04：一覧にもアイキャッチを出す（CEO指示）。日付は本文側の先頭へ移した。 */ .logitem{display:grid;grid-template-columns:168px 1fr;gap:0 24px; padding:26px 0;border-bottom:1px solid var(--line);align-items:start} .logitem:hover{background:var(--paper2)} /* 2026-10-15：サムネの枠線を外した（CEO指示「枠もない方がいい」）。アイキャッチの地はサイトの地 #fbfbfb にそろえる＝.claude/scripts/eyecatch_bg_snap.py */ .logitem .th{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--paper2)} .logitem .th img{width:100%;height:100%;object-fit:cover;display:block} .logitem .d{display:block;font-family:var(--mono);font-size:11.5px;color:var(--faint); font-variant-numeric:tabular-nums;letter-spacing:.06em;margin:0 0 7px} .logitem h2,.logitem h3{font-size:19px;font-weight:900;margin:0 0 8px;line-height:1.5} .logitem p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.85} @media(max-width:640px){.logitem{grid-template-columns:1fr;gap:12px 0} .logitem .th{aspect-ratio:16/9}} .pager{display:flex;justify-content:center;gap:10px;margin:48px 0 0; font-family:var(--mono);font-size:12px;letter-spacing:.12em} .pager .page-numbers{padding:9px 15px;border:1px solid var(--line2)} .pager .current{background:var(--ink);color:var(--paper);border-color:var(--ink)} /* ── フォーム（Contact Form 7） ── */ .f-item{margin:0 0 26px} .f-item label{display:block;font-weight:700;font-size:14px;margin-bottom:9px} .f-item .req{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em; background:var(--ink);color:var(--paper);padding:3px 7px;margin-left:9px;vertical-align:2px} .f-item input[type="text"],.f-item input[type="email"],.f-item input[type="tel"], .f-item input[type="url"],.f-item select,.f-item textarea{ width:100%;font-family:var(--jp);font-size:15px;color:var(--ink); background:var(--paper);border:1px solid var(--line2);border-radius:0; padding:13px 15px;line-height:1.7;-webkit-appearance:none;appearance:none} .f-item select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%), linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:40px} .f-item input:focus,.f-item select:focus,.f-item textarea:focus{ outline:0;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .f-item textarea{min-height:150px;resize:vertical} .f-item input[type="checkbox"],.f-item input[type="radio"]{accent-color:var(--ink);width:16px;height:16px} .f-submit{margin-top:36px} /* ── 印刷 ── */ @media print{.chrome{display:none} body{background:#ffffff;color:#000000}.node{padding:24px 0;min-height:0}} /* ══════════ 商品ページ ══════════ */ .prodprice{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; border-top:1px solid var(--ink);border-bottom:1px solid var(--ink); padding:20px 0;margin:0 0 30px} .prodprice .p{font-family:var(--mono);font-size:clamp(28px,4.4vw,42px);font-weight:600; font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1} .prodprice .u{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--faint)} .prodlead{color:var(--ink2);font-size:16px;margin:0;line-height:2.05} .prodlead b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 66%,var(--paper3) 66%)} /* 採用との対比 */ /* 比較が2つ以上並ぶ面（トップのPRICE）では、どの商品の話かを上に置く */ .cmp{display:grid;grid-template-columns:1fr 130px 1fr;margin:38px 0 0} /* ⚠ 枠は `.cmp>div` ではなく左右の箱だけに付ける。`.cmp>div`（0,1,1）は `.cmp-vs`（0,1,0）より強いので、 あとから border:0 と書いても効かず、真ん中の「対」にも枠が出ていた（2026-09-05 CEO指摘）。 */ .cmp>div{padding:30px 26px} .cmp-l,.cmp-r{border:1px solid var(--ink)} /* ⚠ 明るいほうの箱に地を敷く。地をページと同じ #FBFBFB のままにすると、 箱の中と箱の外が同じ色になり、**72pxの隙間が隙間に見えない**（2026-09-05 CEO指摘2回目）。 */ .cmp-l{background:var(--paper3)} .cmp-vs{display:flex;align-items:center;justify-content:center;padding:0!important; border:0;font-family:var(--mincho);font-size:19px;color:var(--muted)} .cmp .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--faint);display:block;margin-bottom:14px} .cmp .v{font-family:var(--mono);font-size:clamp(23px,3.4vw,32px);font-weight:600; font-variant-numeric:tabular-nums;display:block;line-height:1.1;margin-bottom:12px} .cmp .c{display:block;font-size:13px;color:var(--muted);line-height:1.85} .cmp-r{background:var(--ink)} .cmp-r .k{color:rgba(251,251,251,.5)} .cmp-r .v{color:var(--paper)} .cmp-r .c{color:rgba(251,251,251,.7)} .punch{font-family:var(--mincho);font-weight:700;font-size:clamp(18px,2.6vw,26px); line-height:1.7;margin:28px 0 0;text-wrap:balance} @media(max-width:760px){.cmp{grid-template-columns:1fr} .cmp-vs{border:0;padding:16px 0!important}} /* 表 */ .tblw{overflow-x:auto;border:1px solid var(--ink);margin:34px 0 24px} .tblw table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px;margin:0} .tblw th,.tblw td{padding:14px 16px;text-align:left;vertical-align:top; border-bottom:1px solid var(--line);line-height:1.75} .tblw thead th{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--faint);font-weight:600;background:var(--paper2);border-bottom:1px solid var(--ink)} .tblw tbody tr:last-child td{border-bottom:0} .tblw td:nth-child(n+2){font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} .tblw td small{font-family:var(--jp);color:var(--faint);font-size:11.5px;white-space:normal} /* スマホ：**横スクロールをやめて、1行を1枚のカードに積む**（2026-08-30）。 min-width:620px + overflow-x:auto は仕様どおりだが、実機では「人で用意するなら」以降が 画面外に隠れ、**スクロールできること自体に気づかない**＝採用との比較という表の要が読まれない。 ⚠ `.comtbl`（会社概要＝th+tdの定義表）は既に2列で読めるので**対象外**。 ⚠ 上の `.tblw td:nth-child(n+2){white-space:nowrap}` と同じ詳細度なので、**必ずこの順（後ろ）に書く**。 */ @media(max-width:640px){ .tblw:not(.comtbl){overflow-x:visible;border:0;margin-top:30px} .tblw:not(.comtbl) table{min-width:0;display:block} .tblw:not(.comtbl) thead{display:none} .tblw:not(.comtbl) tbody{display:block} .tblw:not(.comtbl) tbody tr{display:block;border:1px solid var(--ink);padding:18px 20px;margin:0 0 -1px} .tblw:not(.comtbl) tbody td{display:grid;grid-template-columns:7.5em 1fr;gap:0 14px;align-items:baseline; padding:8px 0;border:0;white-space:normal;font-size:14px} .tblw:not(.comtbl) tbody td::before{content:attr(data-label);font-family:var(--mono);font-size:9.5px; letter-spacing:.14em;color:var(--faint);line-height:2.2} .tblw:not(.comtbl) tbody td:first-child{display:block;padding:0 0 12px;margin:0 0 10px; border-bottom:1px solid var(--line);font-size:16px;font-family:var(--jp)} .tblw:not(.comtbl) tbody td:first-child::before{content:none} /* ⚠ td を grid にしたので、td の中の は**3つ目のグリッド項目**になり、 何もしないと次の行の1列目（＝ラベルの列）に落ちる。値の列に寄せる。 */ .tblw:not(.comtbl) tbody td small{grid-column:2;display:block;margin-top:3px} } /* 含む／含まない */ .duo{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin:44px 0 0} .duo>div{position:relative;padding:30px 26px 26px} .duo>div+div{border-left:1px solid var(--ink)} .duo .idx{position:absolute;top:0;right:0;font-family:var(--mono);font-size:9px; letter-spacing:.22em;padding:7px 13px;color:var(--faint)} .duo h3{margin:0 0 16px;font-size:17px;font-weight:900} .duo ul{list-style:none;margin:0;padding:0} .duo li{font-size:13.5px;line-height:1.85;padding:11px 0 11px 20px;position:relative;color:var(--muted); border-top:1px solid var(--line)} .duo li:first-child{border-top:0} .duo li::before{content:"";position:absolute;left:0;top:20px;width:9px;height:1px;background:var(--line2)} .duo li b{color:var(--ink);font-weight:700} .duo-b{background:var(--paper2)} @media(max-width:720px){.duo{grid-template-columns:1fr}.duo>div+div{border-left:0;border-top:1px solid var(--ink)}} /* 正直に言う箱 */ .rulebox{position:relative;background:var(--ink);color:var(--paper);padding:34px 30px 30px;margin:44px 0 0} .rulebox .idx{position:absolute;top:0;right:0;font-family:var(--mono);font-size:9px; letter-spacing:.22em;padding:8px 14px;color:var(--faint)} .rulebox h3{margin:0 0 18px;font-family:var(--mincho);font-weight:700;font-size:20px;color:var(--paper)} .rulebox ul{list-style:none;margin:0;padding:0} .rulebox li{font-size:14px;line-height:1.9;padding:13px 0 13px 20px;position:relative; color:rgba(251,251,251,.8);border-top:1px solid rgba(251,251,251,.16)} .rulebox li:first-child{border-top:0} .rulebox li::before{content:"";position:absolute;left:0;top:23px;width:9px;height:1px;background:rgba(251,251,251,.45)} .rulebox li b{color:var(--paper);font-weight:700} .rulebox a{color:var(--paper);border-bottom:1px solid rgba(251,251,251,.5)} /* 次の段へ */ .nextstep{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center; border:1px solid var(--ink);padding:38px 32px;margin:56px 0 0} .nextstep>div{max-width:560px} .nextstep h2{font-family:var(--mincho);font-weight:700;font-size:clamp(20px,2.8vw,28px); line-height:1.55;margin:0 0 12px;letter-spacing:.03em} .nextstep .nx{margin:0;font-size:14px;color:var(--ink2);line-height:1.9} .nextstep .btn{background:var(--ink);color:var(--paper);padding:16px 34px; font-family:var(--mono);font-size:12px;letter-spacing:.2em;white-space:nowrap} .nextstep .btn:hover{opacity:.84} /* 2026-08-30：商品ページの本文に相談への道を置いた（主＝相談／従＝次の商品）。 ⚠ `.nextstep .btn-ghost` は `.nextstep .btn` と同じ詳細度なので、**必ずこの順（後ろ）に書く**。 */ .nextstep-btns{display:flex;flex-direction:column;gap:12px;flex:0 0 auto} .nextstep-btns .btn{text-align:center} .nextstep .btn-ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .nextstep .btn-ghost:hover{opacity:.7} @media(max-width:640px){.nextstep-btns{width:100%}} /* ══════════ コーポレート構造 ══════════ */ /* パンくず */ .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 26px; font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint)} .crumb a{color:var(--faint);border-bottom:1px solid transparent} .crumb a:hover{color:var(--ink);border-color:var(--line2)} .crumb i{font-style:normal;color:var(--faint)} .crumb span{color:var(--ink)} /* ナビのCTA */ /* letter-spacing は最後の1文字の後ろにも余白を作る。枠で囲むと右だけ広く見えるので、 その分を右のpaddingから引く（2026-08-29に実際ずれていた） */ .gnav a.cta{color:var(--ink);border:1px solid var(--ink); padding:6px calc(14px - .2em) 6px 14px;margin-left:4px} .gnav a.cta:hover{background:var(--ink);color:var(--paper)} /* トップの入口カード */ .card{display:flex;flex-direction:column;gap:11px;padding:36px 32px 32px; border-right:1px solid var(--line2);border-bottom:1px solid var(--line2); transition:background .25s,color .25s} .card:nth-child(2n){border-right:0} .card:nth-last-child(-n+2){border-bottom:0} .card .k{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--faint)} .card .t{font-size:clamp(18px,2.2vw,23px);font-weight:900;line-height:1.5;letter-spacing:.01em} .card .d{font-size:13.5px;color:var(--muted);line-height:1.9;flex:1} .card .go{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink); display:inline-flex;align-items:center;gap:10px;margin-top:6px} .card .go::after{content:"";width:26px;height:1px;background:var(--ink);transition:width .25s} .card:hover{background:var(--ink)} .card:hover .k{color:rgba(251,251,251,.5)} .card:hover .t{color:var(--paper)} .card:hover .d{color:rgba(251,251,251,.7)} .card:hover .go{color:var(--paper)} .card:hover .go::after{background:var(--paper);width:44px} @media(max-width:760px){ .card{border-right:0;border-bottom:1px solid var(--line2)} .card:last-child{border-bottom:0}} /* 本文中のリンクは、下線が無いとリンクに見えない（2026-09-05に /service/ で実際に見えなかった） */ .s-lead a,.prodlead a,.nx a{border-bottom:1px solid var(--line2)} .s-lead a:hover,.prodlead a:hover,.nx a:hover{border-color:var(--ink)} /* ══ /service/ の商品ブロック（トップで興味を持った人を、各詳細ページへ渡す） ══ */ /* 会社概要の表 */ .sign{margin-top:48px;text-align:right;font-family:var(--mincho);font-size:16px;color:var(--ink)} /* フッター */ .sitefoot{border-top:1px solid var(--ink);background:var(--paper2);padding:64px 6vw 0} /* 左の列は220px＝住所の1行（211px）が折れない幅。2026-10-12に列を6つへ増やしたので、280pxから詰めた */ .sitefoot .in{width:min(1080px,100%);margin:0 auto;display:grid; grid-template-columns:220px 1fr;gap:48px} .fbrand svg{width:38px;color:var(--ink);display:block;margin-bottom:14px} /* ロゴと縦に並ぶので左端を揃える。letter-spacing の詰め物（padding-left）は 中央揃え用の補正で、左揃えで使うとそのぶん右へずれる＝2026-08-29に実際ずれていた。 末尾の字送りは margin-right のマイナスで消す */ .fbrand .wm{font-family:var(--jost);font-weight:500;font-size:14px;letter-spacing:.44em; padding-left:0;margin-right:-.44em;display:block;margin-bottom:20px} /* 三角形は viewBox の左端から4%内側にあるので、その分だけロゴ側を寄せて光学的に揃える */ .fbrand svg{margin-left:-1.5px} .fbrand .addr{font-size:12.5px;color:var(--muted);line-height:2;margin:0} /* 列は6つ（ABOUT・SERVICE・WEBSITE・JOURNAL・CONTACT・LEGAL）。WEBSITE は2026-10-12に足した。 6列で1列が約119px（1440px）。1180px以下は3列×2段にする（6列だと1列100px未満になり、語の途中で細かく折れる） */ .fmap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px} @media(max-width:1180px){.fmap{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}} .fmap>div{display:flex;flex-direction:column;gap:9px} .fh{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--faint); margin:0 0 5px;padding-bottom:9px;border-bottom:1px solid var(--line2)} /* 長い名前は footer.php の の位置でだけ折る（語の途中で折らない） */ .fmap a{font-size:12.5px;color:var(--ink2);line-height:1.6;word-break:keep-all;overflow-wrap:anywhere} .fmap a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .copy{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.2em; color:var(--faint);margin:56px 0 0;padding:22px 0 30px;border-top:1px solid var(--line)} @media(max-width:860px){ .sitefoot .in{grid-template-columns:1fr;gap:36px} .fmap{grid-template-columns:repeat(2,1fr);gap:26px}} /* ══════════ お渡しするもの（3列） ══════════ */ .deliv{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin:36px 0 0} /* 4つ並べるとき（/seminar/）。3列だと3+1で下が1つだけ余る */ .deliv.two{grid-template-columns:repeat(2,1fr)} .dv{display:flex;flex-direction:column;gap:12px;padding:32px 26px 28px; border-right:1px solid var(--line2);transition:background .25s,color .25s} .dv:last-child{border-right:0} .dv .n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--faint)} .dv .t{font-size:18px;font-weight:900;line-height:1.55;letter-spacing:.01em} .dv .d{font-size:13px;color:var(--muted);line-height:1.9;flex:1} .dv .d b{color:var(--ink);font-weight:700; background:linear-gradient(transparent 66%,var(--paper3) 66%)} .dv .p{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink); border-top:1px solid var(--line2);padding-top:14px;margin-top:4px;font-variant-numeric:tabular-nums} .dv:hover{background:var(--ink)} .dv:hover .n{color:rgba(251,251,251,.5)} .dv:hover .t,.dv:hover .p{color:var(--paper)} .dv:hover .d{color:rgba(251,251,251,.72)} .dv:hover .d b{color:var(--paper);background:none;border-bottom:1px solid rgba(251,251,251,.5)} .dv:hover .p{border-top-color:rgba(251,251,251,.3)} @media(max-width:860px){ .deliv{grid-template-columns:1fr} .dv{border-right:0;border-bottom:1px solid var(--line2)} .dv:last-child{border-bottom:0}} /* 料金表の行をリンクにしたときの見た目を統一 */ a.ent{color:inherit} /* 記事の中の図はSVGで描く（2026-09-05 CEO判断）。写真だと文字が読めず、図の意味が伝わらない。 アイキャッチだけは写真のまま＝一覧のサムネイルに要るため */ /* ══ 3 暗い地への入れ替え ══ */ html,body{background:#060606} body{color:var(--ink)} ::selection{background:#007695;color:#060606} /* ── 節のラベルはシアンに ── */ .eyebrow{color:var(--cy)!important;text-shadow:none;letter-spacing:.2em} .eyebrow::before{background:var(--cy)!important;opacity:.6} .s-title{color:var(--t1)} .s-lead b,b{color:var(--t1)} /* ══════════════════════════════════════════════════════ ⚠ ここが要。ANNのデザインは「反転ブロック」を持つ。 白地では〈黒い地に白い文字〉。地に var(--ink)、文字に var(--paper) を使う。 色をそのまま入れ替えると、淡い青の地に黒い文字になって読めなくなる。 だから《そのブロックの中だけ変数を組み直す》。中のSVGも一緒に直る。 ══════════════════════════════════════════════════════ */ .shift .next, .rulebox, .pager .current, .card:hover, .dv:hover, a.ent:hover, .spnav-cta{ --ink:#202020; --paper:#efefef; --ink2:#efefef; --muted:#c0c0c0; --faint:#aeaeae; --line:rgba(239,239,239,.20); --line2:rgba(239,239,239,.38); --line3:rgba(239,239,239,.55); border:1px solid rgba(86,181,206,.30); } .shift .next figcaption{color:var(--acT)!important;text-shadow:none} /* ── カード・パネル ── */ .dv{background:var(--paper2);border-color:var(--line)!important} .dv .n{color:var(--cy)!important;text-shadow:none} .dv .t{color:var(--t1)} .dv .p{color:var(--muted)!important;border-top-color:var(--line)!important} .card{background:var(--paper2);border-color:var(--line)!important} /* ── ボタンは corp の .btn にそろえる ── */ .btn{font-family:var(--mono);font-size:11px;letter-spacing:.2em; border:1px solid #007695!important;color:var(--acT)!important;background:transparent!important; padding:16px 36px;border-radius:0} .btn:hover{background:#007695!important;color:#060606!important} /* ── ヘッダー ── */ .chrome{background:transparent!important;border-bottom:1px solid var(--line); display:flex;align-items:center;gap:28px} .chrome .gnav{margin-left:auto} .brand span,.brand{color:var(--acT)!important;text-shadow:none;letter-spacing:.1em} .gnav a{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--t3)!important} .gnav a:hover{color:var(--acT)!important} .gnav a.cta{border:1px solid #007695!important;color:var(--acT)!important} .gnav a.cta:hover{background:#007695!important;color:#060606!important} .burger span{background:#007695} /* ── フッター ── */ .wm{color:var(--acT)!important;text-shadow:none} .addr,.copy{color:var(--faint)} footer a{color:var(--t2)} footer a:hover{color:var(--acT)} /* ── コーポレートの枠 ── */ .progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:rgba(255,255,255,.06)} .progress i{display:block;height:100%;width:0;background:#007695;box-shadow:var(--glow);transition:width .25s ease} .readout{display:flex;align-items:center;gap:10px;white-space:nowrap; font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--acT);text-shadow:none} .readout em{font-style:normal;color:var(--t3)} .readout .bdot{position:relative;width:7px;height:7px;border-radius:50%;background:#007695; box-shadow:none;flex:none} .readout .bdot::after{content:"";position:absolute;inset:0;border-radius:50%; border:1px solid #007695;animation:radar 2.4s ease-out infinite} @keyframes radar{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}} .secind{position:fixed;bottom:58px;left:28px;z-index:100;font-family:var(--mono);font-size:10px; letter-spacing:.22em;color:var(--t1)} .secind em{font-style:normal;color:var(--t3)} .counter{position:fixed;bottom:58px;right:28px;z-index:100;font-family:var(--mono);font-size:10px; letter-spacing:.22em;color:var(--t3)} .counter b{color:var(--acT);font-weight:500} /* 走査線はやめる（ターミナルの中に横線が出るため）。周辺減光だけ残す。 */ .crt{position:fixed;inset:0;z-index:90;pointer-events:none;background:none} .crt::after{content:"";position:absolute;inset:0; background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.45) 100%)} @media(max-width:900px){.readout{display:none}.secind,.counter{display:none}} @media(prefers-reduced-motion:reduce){.readout .bdot::after{animation:none}} /* ══ 4 ヒーロー ══ */ /* ── コーポレートのヒーローの作りを持ち込む ── */ /* 2026-10-12 CEO指摘「上部は狭く、下部は次のセクションとの隙間が大きすぎる」で組み直した。 ・文字とターミナルは下端でそろえる（align-items:flex-end）。ターミナルの下から次の節の見出しまで、PC 160px・スマホ 140px （この下の余白96px／76px＋次の節の上64px）。 ・脳のてっぺんはヘッダーの下 PC 64px・スマホ 48px（site.js の gapTop）。 ・高さは画面いっぱいだが、PC 900px・スマホ 844px で止める。縦に長い画面で見出しが脳の下へずれないようにするため。 */ #n00{position:relative;overflow:hidden;min-height:min(100vh,900px);min-height:min(100svh,900px); display:flex;align-items:flex-end;justify-content:center;padding:130px 6vw 96px} @media(max-width:759px){#n00{min-height:min(100vh,844px);min-height:min(100svh,844px);padding-bottom:76px}} /* ヒーローは最初の画面。隠さず、はじめから見せる */ #n00 .rv{opacity:1!important;transform:none!important;animation:none!important;filter:none!important} #n00 .node-in{position:relative;z-index:2} /* 2026-10-12 CEO指摘「微妙に中央で揃っていない」。.hero-text（最大980px）が .node-in（1080px）の左に寄り、 見出しからターミナルまでが画面の中心より50px左にあった（脳は画面の中心）。margin-inline:auto で親の中央に置く */ #n00 .hero-text{text-align:center;display:flex;flex-direction:column;align-items:center;margin-inline:auto} #n00 .cb-depth{position:absolute;inset:0;z-index:0;pointer-events:none} #n00 .cb-glow{position:absolute;inset:0; background:radial-gradient(46% 54% at 50% 46%,rgba(0,118,149,.12),transparent 70%)} #n00 #cbrain{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none; -webkit-mask:radial-gradient(158% 128% at 50% 33%,#000000 60%,transparent 100%); mask:radial-gradient(158% 128% at 50% 33%,#000000 60%,transparent 100%)} /* 暗幕は見出しと一行の裏だけ。ターミナルの裏には敷かない（脳を透かすため） */ #n00 .cb-focus{position:absolute;left:50%;top:31%;transform:translate(-50%,-50%);z-index:1; width:min(1080px,94vw);height:min(340px,42vh);pointer-events:none; background:radial-gradient(54% 56% at 50% 50%,rgba(6,6,6,.80) 0%,rgba(6,6,6,.58) 46%,transparent 80%)} /* 網は画面の下寄りへ逃がして、文字と正面衝突させない */ #n00 #cbrain{opacity:.72; -webkit-mask:radial-gradient(150% 120% at 50% 58%,#000000 55%,transparent 100%); mask:radial-gradient(150% 120% at 50% 58%,#000000 55%,transparent 100%)} #n00 .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--acT)!important; font-weight:600;margin-bottom:22px;min-height:1.6em;text-shadow:none} #n00 .eyebrow::before{content:"▌";margin-right:8px;color:var(--acT);background:none!important; width:auto!important;height:auto!important;animation:blinkdot 1.4s steps(1) infinite} #n00 .eyebrow::after{display:none} @keyframes blinkdot{0%,50%{opacity:1}51%,100%{opacity:.15}} #n00 h1{font-family:var(--disp),"Archivo",system-ui,sans-serif; font-size:clamp(26px,5.4vw,64px);font-weight:700;line-height:1.25;letter-spacing:.01em; margin-bottom:30px;color:var(--t1);text-shadow:none;white-space:nowrap} /* ×は大文字の高さの真ん中に置く。ベースラインに乗せたままだと下へ落ちる（.08emでは9px低かった）。 .3em＝×自身の文字サイズ（親の.62em）で測った持ち上げ幅。比なので文字サイズが変わっても中央のまま。 実測＝Archivoで大文字の中心と×の中心の差 0.06px（64px時）。 optionalで仮の書体（Zen Kaku Gothic New）のまま出た回は 1.3px 下がるが、目では追えない */ #n00 h1 .x{color:var(--acT)!important;font-size:.62em;font-weight:400;margin:0 .3em;vertical-align:.3em; text-shadow:none} @media(max-width:640px){#n00 h1{white-space:normal;font-size:26px;line-height:1.45}} #n00 .hsub{font-size:clamp(13.5px,1.45vw,17px);line-height:2.15;letter-spacing:.04em; color:var(--t2);margin-bottom:46px;text-align:center;padding:0!important;border:0!important} #n00 .hsub::before,#n00 .hsub::after{display:none!important;content:none!important} #n00 .hlead{font-size:clamp(13px,1.2vw,14.5px);color:var(--t2);max-width:620px;line-height:2.05; margin-bottom:34px;text-align:center} #n00 .hlead b{color:var(--acT)} /* 2026-10-01 小見出しの下に説明の1行（.hlead）を足した（CEO決定）。2行で1組に見えるよう間を詰め、 ターミナルまでの間は元の46pxを.hleadが持つ。:has が効かないブラウザでは間が46pxのまま（崩れはしない）。 スマホは「仕組みと、」の後ろで折る＝br.sp。無いと「平日／に着る服」と語の途中で折れた（390px実測） */ #n00 .hsub:has(+.hlead){margin-bottom:12px} #n00 .hsub+.hlead{margin-bottom:46px} #n00 .hlead br.sp{display:none} @media(max-width:760px){#n00 .hlead br.sp{display:inline}} .term{width:min(660px,92vw);text-align:left;font-family:var(--mono); background:rgba(18,18,18,.40);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .term .bar{background:rgba(18,18,18,.22)} .term .ln{min-height:1.95em} /* 走査線（.crt は z-index:90）より上に出して、箱の中を無地にする */ .term{position:relative} .hud{position:relative;border:1px solid rgba(0,118,149,.20)} .hud::before{content:"";position:absolute;inset:-1px;pointer-events:none; background:linear-gradient(#007695,#007695) left top/14px 1px,linear-gradient(#007695,#007695) left top/1px 14px, linear-gradient(#007695,#007695) right top/14px 1px,linear-gradient(#007695,#007695) right top/1px 14px, linear-gradient(#007695,#007695) left bottom/14px 1px,linear-gradient(#007695,#007695) left bottom/1px 14px, linear-gradient(#007695,#007695) right bottom/14px 1px,linear-gradient(#007695,#007695) right bottom/1px 14px; background-repeat:no-repeat} .term .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(0,118,149,.20)} .term .bar i{width:8px;height:8px;border-radius:50%;border:1px solid rgba(0,118,149,.34)} .term .bar span{margin-left:8px;font-size:9px;letter-spacing:.22em;color:var(--t3)} .term .bar em{margin-left:auto;font-style:normal;font-size:9px;letter-spacing:.22em;color:var(--t3)} .term .body{padding:15px 18px;font-size:11px;line-height:1.95;color:var(--t2)} .term .ln{opacity:0;transform:translateY(4px);transition:opacity .45s,transform .45s; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .term .ln.on{opacity:1;transform:none} .term .ln b{color:var(--acT);font-weight:600} .cursor{display:inline-block;width:7px;height:13px;background:#007695;vertical-align:-2px; box-shadow:none;animation:blinkdot 1.1s steps(1) infinite} #n00 .herocta{margin-top:28px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center} #n00 .herocta .tx{color:var(--t2);font-size:12.5px} @media(max-width:760px){ #n00 h1{font-size:26px;line-height:1.6} #n00 .hlead{font-size:13px;line-height:2} .term .body{font-size:10px;padding:14px 12px} } /* ══ 「これまで／これから」の対比を戻す ══ 白地版では〈白いカード〉と〈黒い反転カード〉で差がついていた。 暗い地では、左を沈ませて右を光らせる。 */ .shift figure:not(.next){ --ink:#757575; --paper:#060606; --line2:rgba(160,160,160,.22); --line3:rgba(160,160,160,.30); --muted:#848484; --faint:#7c7c7c; background:transparent!important; border:1px solid rgba(160,160,160,.18)!important; } .shift figure:not(.next) figcaption{color:var(--t3)!important;text-shadow:none !important} .shift figure:not(.next) .ttl{color:var(--t3)!important} .shift figure:not(.next) .dsc{color:var(--t3)!important} .shift .next{ --ink:#292929; --paper:#f5f5f5; --ink2:#f5f5f5; --muted:#d0d0d0; --faint:#b4b4b4; --line:rgba(86,181,206,.30); --line2:rgba(86,181,206,.50); --line3:rgba(86,181,206,.70); background:#292929!important; border:1px solid rgba(86,181,206,.55)!important; box-shadow:none!important; } .shift .next figcaption{color:var(--acT)!important;text-shadow:none !important} .shift .next .ttl{color:var(--t1)!important} .shift .next .dsc{color:var(--t2)!important} .shift .arr{color:var(--acT)!important} /* ══ 5 トップ ══ */ /* BUSINESS：枠で囲まず、細い線1本で分ける */ #n-biz .eyebrow{margin-bottom:60px} /* 事業ごとの図。左右で同じ高さ・同じ細線の枠にそろえる（片方が写真、片方が線なので、器で並びを作る）。 並びは D2C → AUEN → 図 → 説明（2026-09-06にCEOが指定）。下の余白は .bz-d の margin-top が作る */ .bz-fig{display:block;position:relative;height:200px;margin-top:30px; border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .bz-fig svg{display:block;width:100%;height:100%} /* 2026-10-01 CEO指示「5枚並べるのではなく、1枚でインパクトのある画像にしたい」。5枚の並び（.bz-days 一式）は同じ日に使わなくなり、CSSも消した。 「AUENとは」と同じ光の写真（列柱の回廊）を1枚、枠いっぱいに置く。色を落とす膜は掛けない＝膜を通すと斜光の暖かさが消えた。 人物は右寄り・頭は写真の上から約2割、靴は約9割。枠（PC 2.4:1）に切ると上下が削れるので、縦は55%に置く */ /* ⚠ 後ろの「8 記事と本文」にある .node-in img{height:auto}（0,1,1）が .bz-photo（0,1,0）に勝ち、写真が枠からはみ出して説明文を隠した（2026-10-01 本番で発生）。だから .node-in を付けて強くする */ .node-in .bz-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 55%} .biz2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .bz{display:block;padding-right:60px;text-decoration:none} .bz + .bz{padding:0 0 0 60px;border-left:1px solid rgba(0,118,149,.18)} .bz-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--acT); margin-bottom:20px;text-shadow:none} .bz-n{display:block;font-family:var(--disp);font-weight:700;letter-spacing:.01em; font-size:clamp(25px,2.7vw,36px);line-height:1.3;color:var(--t1);transition:color .25s} .bz:hover .bz-n{color:var(--acT)} /* 2026-10-01 CEO指示「上品な機能服とAIで、平日5日を迷わず整えるブランドです。を1行に」。 この1文は13.5pxで369px。23em（311px）には入らないので 28em（378px）へ広げた。 スマホ（カード幅343px以下）では入らないので、本文の
で「AIで、」の後ろで折る。 説明文は文ごとに
で切ってある（広げると文の途中で折れるため） */ .bz-d{display:block;margin-top:22px;font-size:13.5px;line-height:2.05;color:var(--t2);max-width:28em} .bz-d br.sp{display:none} @media(max-width:760px){.bz-d br.sp{display:inline}} .bz-g{display:inline-block;margin-top:30px;font-family:var(--mono);font-size:11px;letter-spacing:.18em; color:var(--acT);padding-bottom:7px;border-bottom:1px solid rgba(0,118,149,.30);transition:border-color .25s} .bz:hover .bz-g{border-bottom-color:#007695} .bz-g i{font-style:normal;margin-left:10px} @media(max-width:1000px){.bz-fig{height:172px}} @media(max-width:760px){ .biz2{grid-template-columns:1fr} .bz{padding-right:0} .bz + .bz{padding:46px 0 0;margin-top:46px;border-left:0;border-top:1px solid rgba(0,118,149,.18)} /* 1列になると写真の1枚が細くなる。枠を低くして、縦横の比を desktop と同じくらいに戻す */ #n-biz .eyebrow{margin-bottom:42px} .bz-fig{height:150px;margin-top:26px} } /* 記事：種類のラベルは枠を外し、線1本で日付とつなぐ */ .jlabel{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.22em; color:var(--acT);margin-right:14px;vertical-align:1px} .jlabel::after{content:"";display:inline-block;width:16px;height:1px;vertical-align:4px; margin-left:14px;background:rgba(0,118,149,.45)} #n-journal .logitem{border-color:rgba(0,118,149,.14)!important} #n-journal .logitem .d{display:inline!important;font-size:10.5px;letter-spacing:.14em;color:#7d7d7d} #n-journal .logitem h2 a{transition:color .25s} #n-journal .logitem:hover h2 a{color:var(--acT)} #n-journal .logitem .th img{transition:opacity .3s,filter .3s;opacity:.86} #n-journal .logitem:hover .th img{opacity:1;filter:brightness(1.06)} /* ── ボタン ── 隅の爪だけ残したHUDの枠。塗りつぶさず、hoverで反転する */ .herocta{margin:52px 0 0!important;display:flex;align-items:center;gap:26px;flex-wrap:wrap} /* 本文の中でボタンを並べる行（/jobs/）。9/6のテーマ切り替えで定義が抜け、ボタンがくっついていた（2026-10-08） */ .btnrow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px} @media(max-width:520px){.btnrow{flex-direction:column;align-items:center}.btnrow .btn{width:300px;max-width:100%;justify-content:center}} .btn{position:relative;display:inline-flex;align-items:center;gap:16px; font-family:var(--mono);font-size:11px;letter-spacing:.2em;line-height:1; color:var(--acT)!important;background:transparent!important; border:1px solid rgba(0,118,149,.32)!important;padding:18px 26px 18px 28px;border-radius:0; transition:color .28s,background .28s,border-color .28s,box-shadow .28s} .btn i{font-style:normal;font-size:12.5px;transform:translateX(0);transition:transform .28s} .btn::before,.btn::after{content:"";position:absolute;width:7px;height:7px; border:1px solid #007695;transition:opacity .28s} .btn::before{left:-1px;top:-1px;border-right:0;border-bottom:0} .btn::after{right:-1px;bottom:-1px;border-left:0;border-top:0} .btn:hover{color:#060606!important;background:#007695!important; border-color:#007695!important;box-shadow:none} .btn:hover i{transform:translateX(6px)} .btn:hover::before,.btn:hover::after{opacity:0} @media(max-width:600px){.herocta .btn{width:auto;text-align:left}} /* ── RECRUIT ／ CONTACT の帯 ── 囲みを外し、BUSINESSと同じ「線1本」にそろえる ── */ #n-band{padding-top:104px!important;padding-bottom:118px!important;min-height:0!important} .band2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .bcell{display:block;padding-right:60px;text-decoration:none} .bcell + .bcell{padding:0 0 0 60px;border-left:1px solid rgba(0,118,149,.18)} .bl{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--acT); margin-bottom:20px;text-shadow:none} .bt{display:block;font-family:var(--disp);font-weight:700;letter-spacing:.01em; font-size:clamp(21px,2.2vw,28px);line-height:1.45;color:var(--t1);transition:color .25s} .bcell:hover .bt{color:var(--acT)} .bd{display:block;margin-top:18px;font-size:13.5px;line-height:2.05;color:var(--t2);max-width:23em} .bg{display:inline-block;margin-top:36px;font-family:var(--mono);font-size:11px;letter-spacing:.18em; color:var(--acT);padding-bottom:7px;border-bottom:1px solid rgba(0,118,149,.30);transition:border-color .25s} .bcell:hover .bg{border-bottom-color:#007695} .bg i{font-style:normal;margin-left:10px} @media(max-width:760px){ .band2{grid-template-columns:1fr} .bcell{padding-right:0} .bcell + .bcell{padding:46px 0 0;margin-top:46px;border-left:0;border-top:1px solid rgba(0,118,149,.18)} } /* ══ 6 下層ページとフォーム ══ */ .page-head{padding-bottom:0} .page-head .s-title{margin-bottom:18px} .crumb{margin:0 0 26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--faint)} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--cy)} .crumb i{font-style:normal;margin:0 9px} /* ページの頭をそろえる（2026-10-15 CEO決定・案A）。TOP と /auen/ を除く全ページで、 パンくずの上端126px・見出しの上端220px・見出しのかたまりの下から最初の中身まで48px（PCもスマホも）。 48px は COMPANY BRAIN の子ページ6枚がすでに使っていた間。それまで固定ページは144〜185px、記事と一覧は126〜156px あいていた。 パンくずは1行に収める。記事の題名が長いときは、末尾を「…」にする（スマホで2〜3行に折れて見出しが下がるため）。 見出しの次の節は「.page-head より後ろで最初の .node」で選ぶ（/offer/ は本文の