なので既定の margin（上下 1em ≒ 12px）を持っている。
しかも display:inline-flex のため隣接マージンが相殺されず、
ラベルの margin-bottom と見出しの margin-top が★足し算されていた（実測で28px）。
そこで .eyebrow の既定マージンを一度0にしてから、
「ラベル → 見出し」の間隔をラベル側の margin-bottom だけで決める。
★一箇所で決めることで、どちらを直せばよいか迷わなくなる。 */
.eyebrow { margin-top: 0; margin-bottom: 0; }
.eyebrow:has(+ .h-display),
.eyebrow:has(+ .h-section) { margin-bottom: 10px; }
.eyebrow + .h-display,
.eyebrow + .h-section { margin-top: 0; }
/* 2026-09-08: 読ませる文章の設定を全ページで見直した（Momokaより
「ニュースのページが見づらい」「Cloudflareのフォントサイズを真似したい」）。
www.cloudflare.com/ja-jp/ をブラウザで実測した結果（1470px幅）:
Cloudflare 変更前のIDATENase
本文の大きさ 16px 19px ← IDATENaseの方が大きかった
行間 24px = 1.50倍 2.05倍 ← 1.4倍広かった
本文の色 #000 真っ黒 #5C6B80 グレー
1行の字数 39〜48字 41字 ← ここは同じ
「文字が小さいから読みにくい」のではなく、行間が広すぎ・色が薄すぎ、が原因だった。
19px・2.05倍は短いリード文を美しく見せる設定で、記事本文には向かない。
日本語は行が詰まって見えるため、行間はCloudflareの1.50倍より広い1.8倍にしている。 */
.lead {
max-width: 68ch;
color: var(--ink-read);
font-size: var(--fs-body);
line-height: 1.8;
margin: 26px 0 0;
}
.lead--light { color: var(--muted-dark); }
/* 2026-09-05: 本文の行の割り方を整える。
最終行に1〜2文字だけ残る「泣き別れ」が全ページで8箇所あった
（最悪はお問い合わせページの5%＝ほぼ1文字）。ブラウザで実測して決めた。
・text-wrap: balance → 8箇所 → 0箇所。総行数・行数の分布は変わらない
・text-wrap: pretty → 効果ゼロ（日本語では機能しなかった）
・word-break: auto-phrase → 悪化（8 → 10箇所、行数も増えた）
・max-width を 60ch / 52ch に狭める → 悪化（12箇所 / 11箇所）。68ch は変えないこと
文章そのものを削って調整しないこと。文言を変えるたびに崩れて、
同じ手作業を8箇所ぶん繰り返すことになる。
未対応のブラウザ（Chrome 114 / Safari 17.5 / Firefox 121 より前）は
この指定を無視するだけで、いまと同じ表示になる。
2026-09-10 追記：上の「auto-phrase は悪化」は、text-wrap: balance を
入れる前の測定だった。併用して測り直したところ結果が変わったので、
auto-phrase を追加した（下の指定）。 */
/* 2026-09-10: text-wrap: balance を外した。
★balance は auto-phrase（下）を無効にする。実測で確認：
…深く入り｜込んで詳細に… balance + auto-phrase → 語の途中で割れる
…深く入り込んで…として｜伴走 auto-phrase のみ → 語を保つ
…深く入り込｜んで詳細に… balance のみ → 語の途中で割れる
balance は「行の長さを揃える」ことを優先するので、文節の境界を無視する。
両立しないため、Momokaの「改行が不自然」への対応として auto-phrase を優先した。
全8ページの実測（語の境界は Intl.Segmenter で判定）：
balance + auto-phrase 語の途中で分断 6 ／ 泣き別れ 0 ／ 最終行6字以下 2
auto-phrase のみ 語の途中で分断 2 ／ 泣き別れ 0 ／ 最終行6字以下 5 ← 採用
どちらも無し 語の途中で分断11 ／ 泣き別れ 0 ／ 最終行6字以下 5
最終行が短い箇所は3つ増えるが、1〜2文字だけ残る泣き別れはどの設定でも0だった。
もし文言を変えて泣き別れが再発したら、その要素にだけ text-wrap: balance を
戻すこと（全体に戻すと、また語の途中で割れる）。 */
/* 2026-09-10: カタカナ語が行をまたいで割れるのを減らす。
Momokaより「全体として改行が不自然」との指摘。ブラウザで全8ページの
行の折れ目を1つずつ数えて原因を特定した。「モ｜デル」「AIエン｜ジニア」
「プロセ｜ス」「営業メ｜ンバー」の4件が割れていた。
auto-phrase は、日本語を文節の切れ目で折る指定。実測の比較：
balance のみ（変更前） カタカナ分断 4 ／ 泣き別れ 0 ／ 総行数 252
balance + auto-phrase カタカナ分断 1 ／ 泣き別れ 0 ／ 総行数 253 ← 採用
auto-phrase のみ カタカナ分断 1 ／ 泣き別れ 0 ／ 総行数 253
どちらも無し カタカナ分断 2 ／ 泣き別れ 0 ／ 総行数 252
balance を外さないのは、泣き別れが文言を変えるたびに再発するため。
auto-phrase は Chrome 119 以降でのみ効く。Safari・Firefox は無視するだけで、
いまと同じ表示になる（崩れない）。
残る1件は「生体イメージ｜ング」。文節の判定はブラウザ任せなので、
ここまでが指定で減らせる限界。気になるなら文言側で調整すること。 */
p, li, dd, td { word-break: auto-phrase; }
/* 2026-09-05: カードの中のリード文だけ 68ch の上限を外す。
採用の「下記アドレス宛に、お名前・ご経歴（任意）…」（57字）と
お問い合わせの同種の一文（49字）が、815px で切られて2行になり、
カード内に短い2行が浮いて見えていた（Momokaより指摘）。
上限を外すと幅1046pxになり、どちらも1行に収まる。文章は変えていない。
ニュース記事のカード（本文315字）は親が .wrap--narrow で686pxのため影響なし。
注意：ここに長い文章を入れると、1046pxのまま複数行になって読みにくくなる。
カードに長文を置くときは、その要素に .measure（920px）を付けて絞ること。 */
.form-card .lead { max-width: none; }
/* 2026-09-10: メールアドレス。表示は info[at]idatenase.com のままで、
クリック先は main.js が組み立てる（HTMLにアドレスを残さないため）。
JavaScriptが動かない環境では href が付かないので、
指のカーソルにならないよう分けて指定している。 */
a.mail { cursor: text; }
a.mail[href] { cursor: pointer; }
/* 2026-09-10: 1行に収めたい一文だけ、読み幅の上限を広げる。
.lead の 68ch（＝729px）は「0」の字幅が基準なので、日本語だと約43字ぶんしかない。
52em（＝884px）なら約52字。1行に収めたい短いリード文にだけ付けること。
長い文章に付けると1行が長くなりすぎて読みにくくなる。 */
.lead--wide { max-width: 52em; }
/* セクション見出しの2カラムレイアウト */
/* セクションの見出し。ラベル（01 会社概要）の下に見出しを置き、左端で揃える。
2026-08-19: 以前はラベルを左カラム・見出しを右カラムに置く2カラムだったため、
ミッションのセクション（feature-split）だけ見出しの開始位置が左端で、
他のセクションは240px右にずれていた。ページ内で始まりの位置が揃わないので1カラムに統一した。 */
.h-display + .lead,
.h-section + .lead { margin-top: 16px; }
.sec-head {
display: grid;
grid-template-columns: 1fr;
/* 2026-09-23: 14px → 10px。ラベルと見出しの間隔をヒーロー・本文に揃えた。
★.sec-head では eyebrow と h-display が兄弟ではない（間に .sec-head__body が
挟まる）ので、隣接セレクタ（+）は届かない。gap で決める。 */
gap: 10px;
align-items: start;
margin-bottom: clamp(48px, 6vw, 84px);
}
.sec-head__body .h-display { margin-top: 0; }
/* ★gap と足し算にならないよう、ここの eyebrow の下マージンは0にする */
.sec-head > .eyebrow { margin-bottom: 0; }
/* sec-head の中の「見出し → リード」も本文と同じ16pxに */
.sec-head__body .h-display + .lead { margin-top: 16px; }
/* 2カラムの特集レイアウトでは見出しを一段小さく（1行に収まりやすくするため） */
.feature-split .h-display { font-size: var(--fs-title); }
/* ボタン ------------------------------------------------------------- */
.btn {
--btn-bg: var(--navy);
--btn-fg: #fff;
position: relative;
display: inline-flex; align-items: center; justify-content: center;
gap: 12px;
min-height: 54px;
padding: 0 30px;
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--fs-note); font-weight: 600; letter-spacing: .06em;
border: 1px solid var(--btn-bg);
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
transition: color .45s var(--ease), border-color .45s var(--ease);
cursor: pointer;
}
/* ホバー時に色が下から満ちる演出 */
.btn::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--blue);
transform: scaleY(0); transform-origin: bottom;
transition: transform .45s var(--ease);
}
.btn:hover::after { transform: scaleY(1); }
.btn:hover { border-color: var(--blue); color: #fff; }
.btn .arw { transition: transform .45s var(--ease); }
.btn:hover .arw { transform: translateX(5px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { color: #fff; }
/* light/outline-light は「白系のボタン」で、ダーク背景（cta-block・drawer等）で使う。
2026-08-14: 一時的にライト背景用に変更していたが、cta-blockの文字が読めなくなる
不具合があったため、ダーク背景用の白系に戻した */
.btn--light { --btn-bg: #fff; --btn-fg: var(--navy); border-color: #fff; }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.35); }
.btn--outline-light:hover { color: #fff; border-color: var(--cyan); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: var(--fs-label); }
.btn--full { width: 100%; }
/* テキストリンク（下線が伸びる） */
.link {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--fs-note); font-weight: 600; letter-spacing: .06em;
padding-bottom: 6px;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px; background-repeat: no-repeat;
background-position: 0 100%;
transition: color .3s var(--ease), background-size .45s var(--ease);
}
.link:hover { color: var(--blue); background-size: 30% 1px; }
.link .arw { transition: transform .45s var(--ease); }
.link:hover .arw { transform: translateX(5px); }
/* バッジ --------------------------------------------------------------- */
/* 2026-09-24: .tag を削除。ニュース一覧のカテゴリラベル（登壇／展示会／協業など）
だけで使っていたが、そのラベル自体を外したため使い手がいなくなった。
★ラベルを外すのは 2026-09-20 の判断の続き。当時トップの最新情報からは
外していたが（STATUS.md:793）、/news/ に12個残っていた。 */
.badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 8px 16px 8px 12px;
border: 1px solid rgba(30,180,212,.35);
border-radius: 999px;
background: rgba(30,180,212,.06);
color: var(--blue);
font-size: var(--fs-label); letter-spacing: .08em;
}
.badge__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 0 4px rgba(104,191,209,.22);
}
/* 2026-09-23: .page-hero__rule と .footer__rule の指定を削除した（Momokaの判断＝案A）。
使う要素をHTMLから全部外したため、行き先が無くなった。使われないCSSを残さない方針。
★目盛り線の役割は「セクションの始まり」だけに絞った（36本 → 8本）。
それまでは ①セクションの始まり ②ヒーローの終わり ③フッターの上 の3つを兼ねており、
同じ記号で「始まり」「終わり」「常設の飾り」を示していて、記号として働いていなかった。
★戻すときは、HTML側に
を足すのと合わせて、
ここに余白の指定も戻すこと。 */
/* ==========================================================================
3-2. 目盛り罫（このサイトの基本モチーフ）
--------------------------------------------------------------------------
ロゴの「I」が目盛りの入った計測器になっていることから取ったモチーフです。
区切りを、ただの直線ではなく目盛りにすることで、ページのどこを見ても
「計測する会社」であることが伝わり、他社と取り違えられなくなります。
使い方:
紺地に置く場合は tick-rule--dark を足してください。
========================================================================== */
.tick-rule {
height: 13px; position: relative;
/* 細かい目盛り（基準線） */
background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 12px 100%;
border-bottom: 1px solid var(--line);
}
/* 5つおきの長い目盛り。ここだけブランドシアンにしています */
.tick-rule::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 9px;
background-image: linear-gradient(90deg, var(--cyan) 1px, transparent 1px);
background-size: 60px 100%;
opacity: .7;
}
.tick-rule--dark {
background-image: linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
border-bottom-color: rgba(255,255,255,.22);
}
.tick-rule--dark::after { opacity: .85; }
/* 数値の表示。等幅で組むと桁が揃い、「計測した値」に見えます */
.num {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: -.01em;
}
/* 指定した位置で改行する（2026-09-10 追加）
と書くと、その位置で改行します。
狭い画面では効きません。スマホで自然な折り返しと重なると、
中途半端な短い行ができて読みにくくなるためです。
打ち消す幅は下の「11. レスポンシブ」の 720px の節にあります。 */
.br-wide { display: inline; }
/* 2026-09-19: ヒーロー本文の折り返し。
Momokaより改行位置の指定（3行）を受けたが、固定の
だけだと
画面幅が変わったときに途中で自然折り返しが起きて、指定と噛み合わない。
★そこで「指定の位置で折る」と「どの幅でも意味の切れ目で折る」を分けた：
.br-hero 指定の3行。★十分な幅があるときだけ効く（下の 1100px で消す）
.nb 文節のかたまり。inline-block なので★この中では絶対に折れない。
幅が足りなければ、かたまりとかたまりの間で折り返す。
結果、どの幅でも「〜を中心と／する」のような切れ方をしない。
.nb は inline-block なので、かたまりの間に隙間が空かないよう
HTML側でタグを詰めて書くこと（改行やスペースを入れない）。 */
.br-hero { display: inline; }
.hero__lead .nb { display: inline-block; }
/* ==========================================================================
4. モーション（スクロールで要素が現れる演出）
--------------------------------------------------------------------------
出方は data-reveal の値で選びます。値なし＝下からふわっと上がる（既定）。
data-reveal 下から26px上がりながら現れる（本文・カード・既定）
data-reveal="fade" その場で濃くなるだけ（動かない）。本文が続く箇所向け
data-reveal="rise" 行ごとに下からせり上がる。見出し専用（.ln で行を包む）
data-reveal="mask" 下から幕が開くように写真が現れる
data-reveal="line" 罫線が左から右へ伸びる
2026-09-08：それまで全77箇所が「下から26px」の1種類だけで、スクロールしても
同じ動きの繰り返しに見えていたため、要素の役割ごとに出方を分けた。
========================================================================== */
[data-reveal] {
opacity: 0;
transform: translateY(26px);
transition: opacity .95s var(--ease), transform .95s var(--ease);
will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }
[data-reveal-delay="5"] { transition-delay: .45s; }
/* 2026-09-24: 6段目を追加。/recruit/ の募集職種が6行あり、5段目までだと
最後の2行が同時に出てしまうため。刻みは他と同じ .09s。 */
[data-reveal-delay="6"] { transition-delay: .54s; }
/* fade：位置は動かさず、濃さだけで現れる。
本文が何段落も続く場所で全部が上下すると、画面が波打って読みにくいため */
[data-reveal="fade"] { transform: none; }
/* mask：写真の下端から幕が開く。写真そのものはわずかに寄った状態から戻る。
枠（.philosophy__photo など）に overflow:hidden が要る */
[data-reveal="mask"] {
opacity: 1; transform: none;
clip-path: inset(0 0 100% 0);
transition: clip-path 1.1s var(--ease);
}
[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }
[data-reveal="mask"] > img { transform: scale(1.08); transition: transform 1.6s var(--ease); }
[data-reveal="mask"].is-visible > img { transform: none; }
/* line：罫線が左から右へ伸びる。太さと色は元の要素の指定をそのまま使う */
[data-reveal="line"] {
opacity: 1; transform: none;
transform-origin: left center;
scale: 0 1;
transition: scale .9s var(--ease);
}
[data-reveal="line"].is-visible { scale: 1 1; }
/* ==========================================================================
4-2. 行のせり上がり（.ln）
--------------------------------------------------------------------------
枠の下に文字を隠しておき、そこからせり上がらせます。
ヒーローの見出しとセクション見出しで同じ仕組みを共有しています。
・ヒーロー … main.js が1文字ずつ
に分解し、body.is-loaded で動き出す
・セクション … HTML に … と書き、
data-reveal="rise" が画面に入ったときに動き出す
JSやCSSが効かなかった場合は、ふつうの見出しとして読めるだけで済みます。
========================================================================== */
.ln {
display: block;
overflow: hidden; /* 枠の下に隠し、そこからせり上がらせる */
padding-bottom: .08em; /* 「つ」などの下端が切れるのを防ぐ */
margin-bottom: -.08em; /* 足した分を打ち消し、行間は元のまま保つ */
}
.ln > * {
display: inline-block;
font-weight: inherit; /* による太字化を打ち消す（太さは見出しの指定に従う） */
transform: translateY(105%);
}
/* ヒーロー見出し：1文字ずつ立ち上がる（2026-08-18 採用）
1文字ごとの遅れは main.js が付けます（1文字あたり0.035秒） */
.is-loaded .hero__title .ln > * {
transform: none;
transition: transform .95s var(--ease);
}
/* セクション見出し：行ごとにせり上がる（2026-09-08 追加）
1行目→2行目を0.10秒ずつ遅らせ、同時に動くものを増やさない */
[data-reveal="rise"] { opacity: 1; transform: none; }
[data-reveal="rise"].is-visible .ln > * {
transform: none;
transition: transform .95s var(--ease);
}
[data-reveal="rise"].is-visible .ln:nth-child(2) > * { transition-delay: .10s; }
[data-reveal="rise"].is-visible .ln:nth-child(3) > * { transition-delay: .20s; }
/* 見出し以外は、タグライン → 本文 → ボタン の順に少し遅れて添える。
同時に動くものを増やさないため、こちらは「ふわっと上がる」だけに留める */
.hero .seq { opacity: 0; transform: translateY(16px); }
.is-loaded .hero .seq {
opacity: 1; transform: none;
transition: opacity .9s ease, transform .9s var(--ease);
}
.is-loaded .hero .seq--lead { transition-delay: .70s; }
/* ヒーロー写真：ほんの少し寄った状態から、2.8秒かけて元の大きさへ戻る。
落ち着きはこの「遅さ」で決まるので、短くすると安っぽくなる */
.hero__photo img { transform: scale(1.07); }
.is-loaded .hero__photo img { transform: none; transition: transform 2.8s var(--ease); }
/* ==========================================================================
5. ヘッダー / グローバルナビ
========================================================================== */
.header {
position: fixed; inset: 0 0 auto; z-index: 200;
height: var(--header-h);
display: flex; align-items: center;
transition: background .5s var(--ease), height .4s var(--ease),
box-shadow .5s var(--ease), border-color .5s var(--ease);
border-bottom: 1px solid transparent;
}
/* ヒーロー上（最上部）は透明。ヒーローがダーク背景なので白テキスト・白ロゴ */
.header--transparent { background: transparent; color: #fff; }
.header--transparent .brand__logo { content: url("../img/logo-white.png"); }
/* 透過ヘッダーはダークなヒーローに重なる。btn--ghost の既定は暗い文字色なので、
ここで明示的に白へ上書きしないと暗背景に暗文字となり読めない */
.header--transparent .btn--ghost { --btn-fg: #fff; border-color: rgba(255,255,255,.38); }
.header--transparent .btn--ghost:hover { border-color: var(--cyan); }
.header--solid {
background: rgba(255,255,255,.9);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom-color: var(--line);
color: var(--ink);
height: 68px;
box-shadow: 0 1px 30px rgba(11,25,48,.05);
}
.header__inner {
width: 100%; max-width: var(--max); margin-inline: auto;
padding-inline: var(--gutter);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* ロゴ */
.brand { display: inline-flex; align-items: center; }
/* 実際のロゴ画像（黒版／白版を切り替えて使用） */
.brand__logo {
/* 2026-08-26: 32px→42px。ヘッダー高さ80pxに対して40%しかなく小さく見えたため
（Momokaの指摘）。元画像は616×128あるので拡大しても劣化しない */
height: 42px; width: auto;
display: block;
}
/* ダークな背景（スマホメニュー等）では白版に切り替え */
.drawer .brand__logo { content: url("../img/logo-white.png"); }
/* ナビゲーション */
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 32px); }
/* --- ナビの小見出し（2026-09-10 追加）---------------------------------
Momokaの指示「上部のセクションにカーソルを合わせたら、その小見出しが
表示されるようにして、それをクリックしたらそこに遷移するようにしたい」。
★カーソルを持つ環境でだけ出します（下の @media hover）。
スマホにはカーソルが無く、タップすると「ホバー扱い」になって
開いた瞬間にページも移動してしまうため。
スマホ用にはメニュー（ドロワー）の中に同じ項目を並べてあります。
★キーボード操作でも出ます（:focus-within）。
小見出しを持つのは3項目だけ（事業内容・会社概要・採用情報）。
他のページは節が1つしかなく、出す意味がないため付けていません。
-------------------------------------------------------------------- */
.nav__item { position: relative; display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
.nav__sub {
position: absolute; top: 100%; left: 50%;
transform: translate(-50%, 6px);
display: grid; min-width: 190px;
padding: 10px 0; margin-top: 10px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 14px 34px rgba(11,25,48,.10);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
z-index: 10;
}
/* ヘッダーとの間に隙間があるとカーソルが抜けて閉じてしまうので、
見えない橋を渡しておく */
.nav__sub::before {
content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.nav__sub a {
font-size: var(--fs-note); letter-spacing: .04em;
color: var(--ink); padding: 9px 20px; white-space: nowrap;
transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.nav__sub a:hover { background: var(--mist); padding-left: 25px; }
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(-50%, 0);
}
}
/* カーソルが無い環境（スマホ・タブレット）では出さない */
@media not all and (hover: hover) {
.nav__sub { display: none; }
}
/* スマホのメニュー内の小見出し */
/* 2026-09-30: 色を --muted から --muted-dark に変えた。
ドロワーの背景は --navy(#08192E) なのに、薄い背景用の --muted(#5C6B80) を
当てていたため、コントラスト比 3.26 で WCAG AA(4.5) を満たしていなかった。
--muted-dark(#9DB0C6) なら 7.96。トークンの定義どおりの使い分けに戻しただけ。
★--muted は「薄い背景の注記用」、--muted-dark は「暗い背景の注記用」。
暗い節に補足テキストを足すときは後者を使うこと。 */
.drawer__sub {
font-size: var(--fs-note) !important;
color: var(--muted-dark) !important;
padding-left: 18px !important;
position: relative;
}
.drawer__sub::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 10px; height: 1px; background: currentColor; opacity: .6;
}
.drawer__sub small { display: none; }
.nav__link {
position: relative;
font-size: var(--fs-note); font-weight: 500; letter-spacing: .09em;
padding: 8px 0;
white-space: nowrap;
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: right;
transition: transform .4s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--blue); }
.nav__actions { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
/* ハンバーガーボタン */
.burger {
display: none;
width: 46px; height: 46px;
border: 1px solid currentColor; background: none; color: inherit;
border-radius: var(--radius);
position: relative; cursor: pointer;
}
.burger span {
position: absolute; left: 13px; width: 18px; height: 1.5px;
background: currentColor; transition: .4s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 22px; transform: rotate(-45deg); }
/* スマホ用のフルスクリーンメニュー */
.drawer {
position: fixed; inset: 0; z-index: 190;
background: var(--navy); color: #fff;
padding: calc(var(--header-h) + 32px) var(--gutter) 48px;
display: flex; flex-direction: column; justify-content: space-between;
opacity: 0; visibility: hidden;
clip-path: inset(0 0 100% 0);
transition: clip-path .7s var(--ease), opacity .4s var(--ease), visibility .7s;
overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }
.drawer__nav { display: flex; flex-direction: column; gap: 4px; }
.drawer__nav a {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 600;
padding: 14px 0;
border-bottom: 1px solid var(--line-dark);
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
}
.drawer__nav a small {
font-family: var(--font-sans);
font-size: var(--fs-label); letter-spacing: .18em; color: var(--cyan); font-weight: 500;
}
.drawer__foot { display: grid; gap: 10px; margin-top: 36px; }
/* ==========================================================================
6. ヒーロー
========================================================================== */
/* 2026-08-14: 白背景+装飾ゼロで試したが「安っぽく見える」「AIが作った感が強い」と
フィードバックがあり、ダーク背景+等高線+目盛りの構成に転換した。
実験条件の最適化・材料探索の可視化で実際に使う等高線図をモチーフにしている。
黄色（アンバー）の装飾ブロックは、単なる色面がAIっぽく見えるためやめた。 */
/* 2026-08-16: ノートPCで1画面に収まらずスクロールが必要だったため、
余白と文字サイズを画面の高さ（vh）にも追随させ、1画面で収まるようにした。
縦が短い画面ほど自動的に詰まる */
.hero {
position: relative;
min-height: 100svh;
display: flex; align-items: center;
background: linear-gradient(155deg, #0A2530 0%, #061821 55%, #040F16 100%);
color: #fff;
overflow: hidden;
padding: calc(var(--header-h) + clamp(10px, 2.6vh, 40px)) 0 clamp(24px, 4.5vh, 60px);
}
.hero__inner { position: relative; z-index: 3; width: 100%; }
/* 写真（分子ネットワーク）。右半分に置き、左のテキスト側へ向けて完全に消える。
見出しに重ならないので、文字のコントラストは写真の明暗に左右されない */
/* 2026-09-10: パララックスで下へ2割ずらすため、その分だけ縦に伸ばしておく。
伸ばさないと、スクロールしたときに写真の下端に隙間が出る。
下の 22% は、ヒーローの高さ（100svh）に対する移動量 20% ＋ 余裕2%。 */
.hero__photo { position: absolute; inset: 0 0 -22% auto; width: min(62%, 900px); z-index: 0; }
.hero__photo img {
width: 100%; height: 100%; object-fit: cover;
opacity: .5;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}
/* 等高線の層。写真の上・文字の下に敷く。
2400px幅の図を2枚ぶんの幅で置き、1枚ぶん流れたら元に戻る（切れ目が出ない）。
120秒で1周。速すぎると気が散るので、この遅さは変えないほうがよい。 */
.hero__field {
position: absolute; inset: 0; z-index: 1;
overflow: hidden; pointer-events: none;
-webkit-mask-image: radial-gradient(120% 100% at 30% 50%, #000 30%, transparent 78%);
mask-image: radial-gradient(120% 100% at 30% 50%, #000 30%, transparent 78%);
}
/* 流れる等高線。ヒーローと、空いたセクションの両方で使う共通の仕組み。
2400px幅の図を2枚ぶんの幅で置き、1枚ぶん流れたら元に戻るので切れ目が出ない。
速さを変えるなら下の秒数を触ること。速くすると気が散る。 */
.drift {
position: absolute; top: 50%; left: 0;
width: 200%; height: 118%;
max-width: none; /* img の既定（max-width:100%）を打ち消す */
object-fit: cover;
transform: translateY(-50%);
animation: drift 120s linear infinite;
}
.drift--slow { animation-duration: 200s; }
@keyframes drift {
from { transform: translate(0, -50%); }
to { transform: translate(-50%, -50%); }
}
.hero__field .drift { opacity: .30; }
/* 中身が少なくて空いている節に、動く層を敷くための入れ物。
.wrap より下に置くので、文字には重ならない。 */
.has-field { position: relative; overflow: hidden; }
.has-field > .field {
position: absolute; inset: 0; z-index: 0;
overflow: hidden; pointer-events: none;
/* 右側だけに出す。左の文章には重ねない。
本文の右端は枠の約60%の位置にあるので、そこから先で濃くなるようにしている。
34%から始めていたときは、文字の裏にも薄く線が乗っていた（実測して直した）。
2026-09-10: Momokaより「殺風景。エフェクトでもいいのでもっと華やかに」。
右端で消していたのをやめ、画面の端まで出るようにした。線自体も濃くしてある。 */
-webkit-mask-image: linear-gradient(90deg, transparent 52%, #000 78%, #000 100%);
mask-image: linear-gradient(90deg, transparent 52%, #000 78%, #000 100%);
}
.has-field > .field .drift { opacity: 1; }
.has-field > .wrap { position: relative; z-index: 1; }
@media (max-width: 840px) {
/* 狭い画面では文章が全幅に広がるので、重ならないよう出さない */
.has-field > .field { display: none; }
}
/* 写真の上に紺を薄くかけ、ヒーロー全体の色調をブランドカラーに寄せる */
/* 写真の上に紺を薄くかけ、ヒーロー全体の色調をブランドカラーに寄せる。
2026-08-19: 左端が不透明のベタ塗り（#061821）だったため、写真が始まる位置に
縦一直線の境目が出ていた。ヒーローの背景は155度の斜めグラデーションなので、
そこにベタ塗りの面が接すると色が合わず、切れ目として見えてしまう。
写真は左45%でマスクされて既に消えているので、左端を透明にして
下の背景をそのまま透かすようにした。 */
.hero__photo::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(6,24,33,0) 0%, rgba(6,24,33,.30) 40%, rgba(6,24,33,.35) 100%);
}
@media (max-width: 900px) {
/* 縦画面では文字と写真が重なるため、写真をさらに沈める */
.hero__photo { width: 100%; }
.hero__photo img { opacity: .28; -webkit-mask-image: none; mask-image: none; }
/* 横方向のマスクが無くなる分、文字の背後にも写真が出る。
上記の「左端を透明」のままだと文字が読みにくくなるため、
縦画面では全面に紺をかけて文字のコントラストを確保する */
.hero__photo::after {
background: linear-gradient(180deg, rgba(6,24,33,.72) 0%, rgba(6,24,33,.58) 100%);
}
}
/* 2026-09-10: .hero__tagline（小さく添えていた「AI for Science, Science for AI」）を
削除した。Momokaの指示で h1 がこの文言そのものになり、同じ言葉が2回並ぶため。
2026-08-19に福田さんの指示で文字を大きくした経緯があるが、h1になったことで
その意図（もっと大きく出したい）は満たされている。
ヒーローの見出しが英語になったので、その指定をここに置く。
日本語のときは1文字ずつ分解されるが、英語は語のかたまりで分解される
（main.js の splitLine）。単語が行の途中で割れないようにするため。 */
.hero__title--en {
letter-spacing: -.025em; /* 欧文は日本語より少し詰めたほうが締まる */
}
/* 見出し。2026-08-16: 明朝体（Noto Serif JP）から、サイト全体と同じゴシック体に統一。
本文・他の見出しがゴシックなのにここだけ明朝で、書体が浮いていたため */
.hero__title {
font-family: var(--font-sans);
/* 横幅だけでなく画面の高さにも追随させる。3行あるので、
縦が短い画面では vh 側が効いてはみ出しを防ぐ */
font-size: clamp(36px, min(5.8vw, 8.6vh), 80px);
font-weight: 800;
/* 3行の塊として見せたいので行送りを詰める（PKSHA参考） */
line-height: 1.16;
/* 2026-09-09: -.045em から緩めた。理由は .h-display と同じ */
letter-spacing: -.02em;
margin: clamp(18px, 3vh, 38px) 0 0;
}
.hero__title span { display: block; }
.hero__title .accent { color: var(--cyan-soft); }
.hero__lead {
max-width: 46em; color: rgba(255,255,255,.62);
margin-top: clamp(14px, 2.4vh, 30px);
font-size: var(--fs-body); line-height: 2;
}
/* 2026-08-17: .hero__facts（会社の事実3点）は Momokaの指示によりHTMLから削除。
同名のCSSも不要になったため削除した */
/* スクロール誘導 */
.scroll-cue {
position: absolute; right: var(--gutter); bottom: 56px; z-index: 4;
display: flex; flex-direction: column; align-items: center; gap: 12px;
font-size: var(--fs-label); letter-spacing: .24em; color: var(--muted);
writing-mode: vertical-rl;
}
/* 細い線に、短い光がゆっくり下りていく動きを付けています。
★以前ここに付けていた「線が伸び縮みする」動きは、同じ場所で点滅して見えて
気が散るため2026-08に外しました。同じ失敗をしないよう、
伸縮ではなく「下へ流れて消える」動きにしています（下向きの誘導になる）。
背景を2枚重ねています。1枚目＝下りていく光、2枚目＝ずっと出ている線。
動かしているのは1枚目の位置だけです。
目立ちすぎるときは、下の 3.4s を長くするか opacity を下げてください。 */
.scroll-cue::after {
content: ""; width: 1px; height: 64px;
background:
linear-gradient(transparent, var(--cyan), transparent) no-repeat,
linear-gradient(var(--cyan), transparent);
background-size: 1px 22px, 1px 100%;
background-position: 0 -22px, 0 0;
opacity: .7;
animation: scroll-cue-flow 3.4s var(--ease-io) infinite;
}
/* 前半で下りきり、後半は休む。休みを入れないと動きが途切れず、うるさく見えます */
@keyframes scroll-cue-flow {
0% { background-position: 0 -22px, 0 0; }
55% { background-position: 0 64px, 0 0; }
100% { background-position: 0 64px, 0 0; }
}
/* 下層ページ用の小さいヒーロー */
/* 下層ページの見出し帯。
トップのヒーローだけを紺にして特別扱いするため、ここは白地です。
下端の目盛り罫が、本文との区切りになります。 */
.page-hero {
position: relative;
background: var(--paper); color: var(--ink);
padding: calc(var(--header-h) + 66px) 0 0;
overflow: hidden;
}
.page-hero .wrap { position: relative; z-index: 2; }
/* ページ見出しも h-display と同じ組み方に揃える。
以前は字間を広げていた（+.03em）が、大見出しは詰めるほうが締まって見える */
.page-hero__title {
font-family: var(--font-sans);
font-size: clamp(34px, 5.2vw, 72px);
/* 2026-09-09: 字間を -.045em から緩めた。理由は .h-display と同じ */
font-weight: 700; letter-spacing: -.02em; line-height: 1.14;
margin: 20px 0 0;
}
/* 2026-09-08: 記事ページのタイトルは一段落とす（Momokaより「バランスを考えて」）。
.page-hero__title は clamp(34px, 5.2vw, 72px)。「採用情報」「事業内容」のような
短いページ名なら効くが、記事タイトルは19〜55字あり、72pxだと3行を占領して
本文（17px）との段差が4倍以上になり、記事の構造が見えなくなっていた。
参考にしたCloudflareは 70 → 48 → 36 → 24 → 18 → 16 の6段階で落ちている。
ここは7段階の --fs-title（最大40px）を使う。下の小見出し .h-section は
--fs-sub（最大26px）なので、40 → 26 → 17 と素直に落ちる。 */
.page-hero--article .page-hero__title { font-size: var(--fs-title); line-height: 1.35; }
/* 見出しに添える英字（従属的な扱い） */
.page-hero__en {
font-family: var(--font-sans);
font-size: var(--fs-label); font-weight: 500;
letter-spacing: .24em; text-transform: uppercase;
color: var(--blue); margin: 22px 0 0;
}
/* ==========================================================================
ページ見出しの「かたまり」を作る（2026-09-23・まず /news/ だけ）
Momokaの指摘「全体的に平均値をとったAI感の強いHPになってしまっているので、
読みやすくグルーピングしながら強弱のあるHPにすることは可能？」
★実測してから直している。/news/ のヒーローの間隔は
パンくず →(20px)→ 見出し72px →(22px)→ ラベル12px →(14px)→ リード19px
→(26px)→ 本文17px →(132px)→ カード
だった。★20/22/14/26 とほぼ同じ間隔が続くので、どれとどれが仲間なのかが
読み取れず、全部が等間隔に並んで見えていた。これが「平均値」の正体。
★考え方はひとつだけ：間隔で意味を作る。
仲間どうし 8〜16px ラベルと見出し、見出しとリード
別のかたまり 48〜80px 見出しの組と、その下の中身
字の大きさは変えていない。間隔だけで強弱は出る。
★パンくずは「現在地の表示」で見出しの仲間ではないので、逆に離す。
★この節は .page-hero--grouped が付いたページにだけ効く。
他ページは今までどおり。良ければ順に広げる。
========================================================================== */
.page-hero--grouped .crumbs { margin-bottom: clamp(28px, 3vw, 44px); }
/* ラベル → 見出し：一番近い。ここが離れると2つの別物に見える */
.page-hero--grouped .page-hero__en { margin: 0 0 10px; }
.page-hero--grouped .page-hero__title { margin: 0; }
/* 見出し → リード：仲間だが、見出しの大きさぶん少し空ける */
.page-hero--grouped .page-hero__jp { margin: 16px 0 0; max-width: 40em; }
/* リード文（lead）も見出しの仲間。jp のすぐ下に置く */
.page-hero--grouped .page-hero__jp + .lead { margin-top: 12px; }
/* かたまりの外側。ここだけ大きく空けて「ここから中身」を示す */
.page-hero--grouped { padding-bottom: clamp(48px, 5vw, 80px); }
/* 見出しの組の下に中身が来るとき、節の上パディングは要らない。
★これが無いと clamp(80px, 9vw, 148px) が足されて、間が200px超になる */
.page-hero--grouped + main > .section:first-child { padding-top: 0; }
.page-hero__jp {
font-family: var(--font-sans);
font-size: var(--fs-lead);
margin: 14px 0 0; color: var(--ink);
}
.page-hero .lead--light { color: var(--muted); }
/* 見出し帯の下端に置く目盛り罫 */
/* 2026-09-05: ページ見出しの右に置く写真。いまは採用ページだけで使っている。
▼ 2026-09-05 やり直し（Momokaより指摘）
最初はトップの .hero__photo を真似て、左へ向けて溶かすマスクを掛け、
画面の右端まで流していた。白地にフェードをかけると写真が霞んで見え、
さらに画面右端まで届くので、他の要素（見出し・目盛り罫・ヘッダーのボタン）と
右端が揃わずに浮いていた。
マスクは廃止し、写真はそのまま出す。右端は .wrap の内側の端に揃える
＝ ヘッダーの「お問い合わせ」ボタンの右端、目盛り罫の右端と同じ位置。
right の計算は .wrap（max-width:var(--max) / margin-inline:auto /
padding-inline:var(--gutter)）と同じ結果になるようにしてある。
画面が --max より広いときは余白の半分＋gutter、狭いときは gutter。
上端はヘッダーの高さから始める。0にするとヘッダーの下に潜って写真の上が切れる。
高さは指定せず aspect-ratio で写真そのものの比率（3:2）にしている。
上下に伸ばして cover で切ると、集合写真の端の人が欠けるため。これで切り取りはゼロ。
幅は、左のリード文と重ならない値にしてある（実測して決めた）。
1100px以下は幅が足りず必ず文字に重なるので、そこから下は写真を文章の下に回す。 */
.page-hero__photo {
position: absolute;
/* 上端：.page-hero の padding-top と同じ式。パンくず「ホーム / 採用情報」の上端に揃う。
ここを var(--header-h) にしていたときは、写真だけ66px上に飛び出していた */
top: calc(var(--header-h) + 66px);
right: calc((100% - min(100%, var(--max))) / 2 + var(--gutter));
/* 2026-09-05 やり直し：以前は高さを「パンくずの上端〜罫線の上端」に合わせ、
幅をそこから3:2で決めていた。すると
文章を増やす → ヒーローが高くなる → 写真が大きくなる → 文章に重なる
という循環が起きた（実際に5px重なった）。
幅を文章と同じ「本文の幅」基準にして、高さから切り離してある。
下端は罫線に揃わなくなるが、文章の量に左右されない方を取った。 */
width: min(42%, 560px);
aspect-ratio: 3 / 2;
z-index: 0;
}
.page-hero__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 右に写真があるページでは、文章の幅を写真の手前で止める。
.lead の上限は 68ch（815px）で、写真の左端（788px）より外側まで伸びる。
文章は写真より手前（.wrap が z-index:2）に描かれるので、
このガードが無いと、文章を1行でも増やした瞬間に文字が写真の上に乗る。
写真が絶対配置でなくなる1100px以下では不要なので、min-width で囲っている。 */
@media (min-width: 1101px) {
.page-hero--photo .page-hero__jp,
.page-hero--photo .lead { max-width: 48%; }
}
@media (max-width: 1100px) {
/* 縦画面では文字と重なるため、絶対配置をやめて文章の下に置く。
HTMLで .wrap の後ろに書いてあるので、そのまま下に流れる */
.page-hero__photo {
position: static; width: auto; height: auto;
margin: clamp(28px, 6vw, 40px) var(--gutter) 0;
}
.page-hero__photo img { aspect-ratio: 3 / 2; height: auto; }
}
/* パンくず */
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-label); letter-spacing: .08em; color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs span[aria-hidden] { opacity: .45; }
/* ==========================================================================
7. 汎用セクション
========================================================================== */
.section { padding: clamp(80px, 9vw, 148px) 0; position: relative; }
.section--mist { background: var(--mist); }
.section--dark { background: var(--navy); color: #fff; }
.section--dark .h-section, .section--dark .h-display { color: #fff; }
/* 2026-09-10: 紺地に .link を置いたとき、ホバー色 var(--blue) #17798D は
紺 #08192E 上でコントラスト 3.47:1 しかなく、本文リンクの基準 4.5:1 を下回る。
紺地のアクセントは既にサイト内で --cyan-soft に決まっている
（ヒーローの強調 .hero__title .accent、CTAの .cta-block__tagline）ので、それに合わせた。
#7FD4E6 on #08192E = 10.5:1。新しい色は作っていない。
★2026-09-18 現在、この指定に当たる要素は全ページで0件。#solutions の紺を
やめたため（上の .sol-head の経緯を参照）。削除はしていない。消すと
「紺地に .link を置くと 3.47:1 になる」歯止めが無くなり、次に紺地へ
リンクを置いた人が同じ穴を踏む。紺地にリンクを置いたら、この指定が
効いていることを確認すること。 */
.section--dark .link:hover { color: var(--cyan-soft); }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
/* 2026-09-10: 背景色が同じ節が続くと、下パディングと上パディングが足されて
270px（1500px幅で実測）の空白になり、穴のように見えていた。
Momokaより「ここがちょっと空きすぎ？」との指摘。
色が変わる箇所（白⇄ミスト）は境界が見えるので気にならないが、
白どうしだと区切りが無いぶん余白だけが目立つ。
下の指定は「地の色を持たない節が2つ続いたとき」だけに効く。
サイト全体を実測したところ、該当はトップの
選ばれる理由 → 進め方 の1箇所だけだった。 */
.section:not(.section--mist):not(.section--dark)
+ .section:not(.section--mist):not(.section--dark) {
padding-top: clamp(24px, 2.6vw, 40px);
}
/* ==========================================================================
8. 各ブロック
========================================================================== */
/* --- 8-1. お取引先ロゴ ------------------------------------------------ */
.clients { padding: clamp(48px, 6vw, 76px) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
/* 2026-08-19: 見出しを左、説明文を右に振り分けていたが、Momokaの指示で中央寄せに変更。
この帯はロゴを並べるためのもので、番号付きの節（01 MISSION など）とは別扱いにしている。
サイトの基本は左揃えだが、ここだけは中央に置いてロゴの並びと軸を合わせる */
.clients__head {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 10px; margin-bottom: 34px;
}
.clients__title { font-family: var(--font-sans); font-size: var(--fs-lead); font-weight: 600; margin: 0; }
/* 2026-09-19: .clients__note（ロゴの枠の右下に添えていた注記）を削除した。
Momokaの指示で注記そのものをHTMLから消したため、行き先が無くなった。
使われないCSSを残さない方針（.sol-head の64pxと同じ）。 */
/* --- 流れる帯（2026-09-08 追加）---------------------------------------
依頼により、ロゴを左へゆっくり流す形にした（参考：arc-hack.com）。
仕組み：同じ並び（.clients__track）を横に並べ、1本ぶんの幅だけ左へ動かす。
1本目が画面外へ抜けきったとき2本目がちょうど元の位置に来るので、
切れ目なく繋がって見える。
・HTMLに書くのは1本だけ。2本目以降は main.js が複製する
（同じロゴのHTMLを2箇所に書かないため。社を増減してもHTMLは1箇所直せばよい）
・速さは main.js が --marquee-duration を計算して入れる。
複製の本数が変わっても、見た目の速さは変わらない
・止めたいときは main.js の initLogoMarquee() の呼び出しを外す。
その場合は複製されないまま1本が静止して並ぶだけで、崩れない
-------------------------------------------------------------------- */
.clients__marquee {
display: flex;
overflow: hidden;
/* 帯は画面の端から端まで通す（HTML側で wrap の外に出してある）。
内側に収めるとロゴが画面端の150px手前で消え、切れているように見える */
margin: 4px 0 0;
/* 左右の端で溶けるように消す。ぶつ切りに見えるのを防ぐ */
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.clients__track {
display: flex;
flex: none; /* 縮めない。縮むと1本ぶんの幅がずれて繋ぎ目が出る */
align-items: center;
gap: clamp(40px, 5vw, 72px);
padding-right: clamp(40px, 5vw, 72px); /* 次の1本との間隔。gap と同じ値にする */
margin: 0; padding-left: 0; list-style: none;
}
/* 複製が終わるまで動かさない。読み込み直後にがくっと動くのを防ぐ */
.clients__marquee.is-running .clients__track {
animation: clients-scroll var(--marquee-duration, 40s) linear infinite;
}
@keyframes clients-scroll {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
/* 読んでいる途中で流れ続けると社名を追えないので、触れている間は止める。
★2026-09-28: カーソルを持つ環境に限定した（@media hover)。
福田さんのFB（Slack #302_corp_ホームページ 9/27 13:26）
「取引先のところが、スマホだと止まってしまう」への対応。
スマホにはカーソルが無く、画面に触れると :hover が付いたまま残るため、
一度触れると帯が止まり、別の場所を触るまで動かなくなる。
★同じ理由の分岐が .nav__sub（この上の @media hover）に既にある。
そちらでは避けられていたが、この帯には付け忘れていた。
★:focus-within はキーボード操作のために残す（タップでは付かない）。 */
@media (hover: hover) and (pointer: fine) {
.clients__marquee:hover .clients__track { animation-play-state: paused; }
}
.clients__marquee:focus-within .clients__track { animation-play-state: paused; }
.client {
position: relative;
flex: none;
/* 2026-09-12: 190px → 290px。下の「面積で揃える」方式にすると、一番横長の
東栄電化工業が幅285px必要になるため。枠が広がるぶん画面に同時に
見える社数は減るが、帯は流れているので全社は見える */
width: 300px;
min-height: 140px; /* 一番背の高い東洋エンジニアリング 116px ＋ 上下padding 24px */
--logo-scale: 1; /* 画面が狭いときに全社まとめて縮める倍率 */
display: flex; align-items: center; justify-content: center;
padding: 12px 0;
}
/* ロゴ画像。2026-08-16: 以前はモノクロ表示にしていたが、掲載社が3社に絞られ
各社のブランドカラーをそのまま見せたほうがよいため、常時カラーに変更した */
/* 2026-08-22: 高さだけを揃えていたため、横長のロゴ（旭化成は縦横比7.3）が
縦長のロゴの3倍近い幅になり、大きさが揃って見えなかった。
幅にも上限を設けることで、どのロゴもおおよそ同じ面積に収まる。
ロゴを追加して極端に大きい・小さいものが出た場合は、
下の max-width / max-height の数値を調整してください。 */
/* 2026-09-08: 枠付きグリッドから流れる帯に変えたのに伴い、枠線と枠の下地を外した。 */
/* ==========================================================================
2026-09-12: 高さを一律 max-height:56px で揃える方式をやめた。
Momokaの指摘「ロゴサイズが小さいところもあるので大きくしつつ、全体的に
サイズ感が一致するように」。
★原因は「小さいロゴがある」ことではなく、高さだけを揃えていたこと。
横長のロゴは高さ56pxにすると幅が枠(190px)を超えるので幅側で頭打ちになり、
高さが26〜33pxまで潰れていた。逆に正方形のロゴは幅に余裕があり56pxのまま。
「実際に絵がある面積」で測ると 5.2倍 のばらつきがあった：
shimizu 175x56 面積 9817 ← 最大
yushiro 137x56 7651
toregem 112x56 6272
toei 190x33 6182 ← 幅で頭打ち
asahikasei 190x26 4932 ← 同上。一番潰れていた
toyo 56x56 1881 ← 最小
★toyo だけ原因が2つ重なっていた。toyo.png は 800x800 のうち 40% が透明な余白で、
実際の絵は 578x664。高さを揃えても中の絵は 40x46 にしかならなかった。
★最初は「外接矩形の面積」を揃えたが、Momokaより「toyoとかトレゲムが小さいかも？」と
再指摘を受けた。**外接矩形では粗すぎた。**枠の中の余白が多いロゴは、同じ面積でも
色が薄く小さく見える。実際に色が乗っている画素の割合（被覆率）を測ると差が大きい：
asahikasei 47.1% toyo 42.7% shimizu 32.9%
toei 24.3% yushiro 22.2% toregem 21.9% ← 旭化成の半分以下
加えて横帯では幅が大きさの印象を作る。指摘の2つは幅が最小だった（toyo 87 / toregem 140）。
そこで **外接矩形の面積と「実際に色が乗った面積」の幾何平均**で揃える方式にした。
下の --logo-h はその計算結果（元画像をPILで実測して算出）。
色が乗った面積のばらつきは 2.44倍 → 1.47倍 になった。
★toyo だけは頭打ちにしてある。正方形のロゴは同じ面積にすると背だけ突出し、
隣の旭化成(37px)と並ぶと浮くため、絵の高さを96pxで止めた（当初72px → Momokaの
再指摘を受けて96pxに緩めた）。
ロゴを足すときは、元画像の ①不透明部分の幅・高さ ②白でない画素数 を測り、
M = sqrt(ink幅*ink高 * 画素数) として s = sqrt(6879.5/M)、--logo-h = canvas高 * s。
絵の高さが96pxを超えるときは s = 96/ink高 に置き換えること。
========================================================================== */
.client img {
/* max-height で効かせているので、枠が足りない極端に狭い画面では
max-width:100% 側が先に当たり、縦横比を保ったまま縮む */
max-height: calc(var(--logo-h) * var(--logo-scale));
max-width: 100%;
width: auto; height: auto; object-fit: contain;
transition: transform .45s var(--ease);
}
.client--asahikasei { --logo-h: 37px; } /* 表示 271x37 色の面積 4724 */
.client--shimizu { --logo-h: 62px; } /* 表示 194x62 3948 */
.client--toei { --logo-h: 49px; } /* 表示 285x49 3394 */
.client--toregem { --logo-h: 86px; } /* 表示 171x86 3221 */
.client--toyo { --logo-h:116px; } /* 表示 116x116 絵は84x96（96で頭打ち）3426 */
.client--yamato { --logo-h: 57px; } /* 表示 202x57 色の面積 3222 */
.client--yushiro { --logo-h: 77px; } /* 表示 189x77 3239 */
.client:hover img { transform: scale(1.04); }
/* 画像が未設定のときの文字表示（プレースホルダ） */
.client__name {
font-size: var(--fs-note); font-weight: 600; line-height: 1.6;
color: #5C6B80; text-align: center; letter-spacing: .03em;
transition: color .45s var(--ease);
}
.client:hover .client__name { color: var(--ink); }
.client--empty .client__name { color: #7C8A9B; font-weight: 500; font-size: var(--fs-label); letter-spacing: .12em; }
/* --- 8-2. ABOUT（旧フィロソフィ）----------------------------------------
2026-08-14: 創作コピー「科学が先。AIは、その次に来る。」から、
現行サイト（idatenase.com）の実在コピーに差し替え。分子装飾（orbit）と
創作の creed ブロックは、AIっぽい汎用装飾に見えるため廃止した。 */
.philosophy { position: relative; overflow: hidden; }
.philosophy__eyebrow {
display: inline-flex; align-items: center; gap: 14px;
font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; color: var(--muted);
}
.philosophy__rule { width: 56px; height: 6px; background: var(--blue); margin: 24px 0 48px; }
.philosophy__title {
font-family: var(--font-sans);
font-size: var(--fs-title);
font-weight: 800; letter-spacing: -.02em; line-height: 1.5;
margin: 0;
}
/* 2026-09-08: 行の分けは .ln（4-2節）が担うようになったので、
ここで span を block にする指定は不要になった */
.philosophy__title em { font-style: normal; color: var(--blue); }
.philosophy__jp {
font-size: var(--fs-body); line-height: 2.05; color: #333A40; margin: 0 0 22px;
}
.philosophy__jp:first-child { font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
/* 2026-09-09: 図の帯。写真だったときと同じ位置・同じ横長で、
地は白のままにして「急に画像が出る」感じを抑えている */
/* 2026-09-10: 図を横長に描き直し、上の余白も詰めた。
Momokaより「ここも変な余白が気になる」。
左カラム（見出し3行＋図）が右の本文より171px高く、右下にL字の空白ができていた。
見出しが2行から3行に増えたことで差が広がっていた（実測して直した）。 */
.philosophy__figure {
margin: clamp(20px, 2.2vw, 28px) 0 0;
padding: 0;
max-width: 460px; /* 左カラムいっぱいまで。これ以上大きくしない */
}
.philosophy__figure .art { display: block; width: 100%; height: auto; }
/* --- 図の登場（data-reveal="draw"）--------------------------------------
画面に入ったら、等高線 → 探索の軌跡 → 到達点 の順に現れる。
動くのは登場の一度きり。ループはしない（2026-08-18 の原則） */
[data-reveal="draw"] { opacity: 1; transform: none; }
[data-reveal="draw"] .art-lines { opacity: 0; transition: opacity 1.1s var(--ease); }
[data-reveal="draw"] .art-trail {
opacity: 0;
stroke-dashoffset: 1400; stroke-dasharray: 1400;
transition: opacity .3s linear .5s, stroke-dashoffset 1.8s var(--ease-io) .5s;
}
[data-reveal="draw"] .art-dot {
opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
transition: opacity .5s var(--ease), transform .6s var(--ease);
}
[data-reveal="draw"] .art-goal {
opacity: 0; transform: scale(.5);
transition: opacity .5s var(--ease) 2.0s, transform .7s var(--ease) 2.0s;
}
[data-reveal="draw"].is-visible .art-lines { opacity: 1; }
[data-reveal="draw"].is-visible .art-trail { opacity: .30; stroke-dashoffset: 0; }
[data-reveal="draw"].is-visible .art-dot {
opacity: 1; transform: scale(1);
transition-delay: calc(.55s + var(--i) * .16s);
}
[data-reveal="draw"].is-visible .art-goal { opacity: 1; transform: scale(1); }
/* 実験器具の写真。横長の帯として本文の下に敷き、読み終わりの余白を締める */
.philosophy__photo {
margin: clamp(40px, 5vw, 72px) 0 0;
aspect-ratio: 21 / 7;
overflow: hidden;
border-radius: var(--radius);
}
.philosophy__photo img {
width: 100%; height: 100%; object-fit: cover;
/* 元画像は淡い水色。彩度をわずかに落としてブランドのティールに寄せる */
filter: saturate(.85);
}
@media (max-width: 700px) { .philosophy__photo { aspect-ratio: 16 / 9; } }
/* --- 8-3. 数値 --------------------------------------------------------- */
.stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
margin-top: clamp(48px, 6vw, 80px);
}
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: 34px 24px 0; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
/* 数値は等幅で組み、桁を揃えます（「計測した値」に見せるため） */
.stat__num {
margin: 0;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: var(--fs-title);
font-weight: 500; letter-spacing: -.02em; line-height: 1;
color: var(--ink); display: flex; align-items: baseline; gap: 5px;
text-shadow: 0 0 0 rgba(30,180,212,0);
transition: text-shadow 1.1s var(--ease);
}
/* カウントアップが完了した瞬間、計測が完了したような光を一瞬だけ添えます */
.stat.is-measured .stat__num { text-shadow: 0 0 22px rgba(30,180,212,.6); }
/* ▼ 1ブロックにつき1つだけ、アクセント色にできます（増やすと効果がなくなります） */
.stat--key .stat__num { color: var(--amber); }
.stat--key .stat__num small { color: var(--amber); opacity: .85; }
/* 数値の下に敷く目盛り */
.stat__scale {
height: 7px; margin-top: 16px;
background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 9px 100%;
border-bottom: 1px solid var(--line);
}
.stat__num small { font-size: .38em; font-weight: 500; letter-spacing: 0; color: var(--blue); }
.stat__label {
font-size: var(--fs-label); color: var(--muted);
margin: 16px 0 0; line-height: 1.8; letter-spacing: .06em;
}
/* --- 8-4. ソリューション ---------------------------------------------- */
.solutions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.solution {
position: relative;
background: var(--paper);
padding: clamp(30px, 3.4vw, 48px);
min-height: 320px;
display: flex; flex-direction: column;
transition: background .5s var(--ease);
overflow: hidden;
}
.solution::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
background: linear-gradient(90deg, var(--blue), var(--cyan));
transform: scaleX(0); transform-origin: left;
transition: transform .6s var(--ease);
}
.solution:hover::before { transform: scaleX(1); }
.solution:hover { background: #FBFDFE; }
.solution__no {
font-family: var(--font-sans);
font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; color: var(--blue);
}
.solution__title {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 600; line-height: 1.55;
margin: auto 0 0;
padding-top: 44px;
}
.solution__desc { font-size: var(--fs-body); color: var(--muted); line-height: 2; margin: 14px 0 0; }
.solution__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.solution__tags span {
font-size: var(--fs-label); letter-spacing: .12em; color: #5C6B80;
border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px;
}
/* --- 8-5. 製薬 / CDMO 特集ブロック ------------------------------------- */
.feature-split {
display: grid; grid-template-columns: 1.05fr .95fr;
gap: clamp(32px, 5vw, 80px); align-items: center;
}
/* 医薬・CDMO領域のビジュアル。ここは当社の注力領域なので、
紺で塗るのではなく、アクセント色（アンバー）で「ここが要点」だと示します */
/* 2026-08-17 作り直し
以前は大面積のアンバー地に、はみ出した巨大な円と目盛り模様を重ねていたが、
Momokaより「雑に見える」と指摘があり全面的に作り替えた。
そもそも本ファイル冒頭のルール「アンバーは面積を広げない」に反していた。
紺一色の落ち着いたパネルにし、装飾の円と模様は削除している。 */
/* 2026-09-09: 中身2つを 420px の箱の上端と下端に離して置いていたため、
間に400px近い空白ができ、Momokaより「異様に空いている。何か入れようとした
形跡か」と指摘があった。入れ忘れではなく、この2つの指定が原因。
min-height: 420px … 中身より箱が大きくなる
justify-content: space-between … その余りを中身の間に全部寄せる
高さは中身に任せ、ラベルと文の間隔は gap で決める形に変えた。 */
.feature-visual {
position: relative;
background: linear-gradient(160deg, #0C1E36 0%, #08192E 100%);
overflow: hidden; padding: clamp(30px, 3.2vw, 44px);
display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px);
border-radius: var(--radius);
min-height: 320px;
}
/* 2026-09-09: 箱に図版を敷いた。図はサイトで既に決めてあるモチーフだけで描いている
（style.css 冒頭の6章の記録：等高線＝実験条件の最適化・材料探索で実際に使う図、
目盛り＝ロゴの「I」由来）。数字・単位・凡例は入れていない。
入れると計測値に見えてしまい、「実データでない数字を計測値らしく見せない」に反するため。
差し替えるときは assets/img/art/ のファイル名を変えるだけでよい */
.feature-visual__fig { margin: 4px 0 0; }
.feature-visual__fig .iso { display: block; width: 100%; height: auto; }
/* 図の中の文字。段の名前は本文と同じゴシック、番号だけ等幅にする */
.feature-visual__fig .iso .iso__nm {
font-family: var(--font-sans);
font-size: 13.5px; font-weight: 600; letter-spacing: .02em;
}
.feature-visual__label {
font-family: var(--font-mono);
font-size: var(--fs-label); letter-spacing: .18em;
color: var(--cyan-soft);
}
.feature-visual__text {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 700;
/* 2026-09-09: 1.7 では2行の間が空きすぎて、1つの文に見えていなかった */
line-height: 1.45; color: #fff; margin: 0;
letter-spacing: -.02em;
}
/* --- 選ばれる理由（2026-09-10 追加）--------------------------------------
会社案内の「IDATENaseが選ばれる理由」をそのまま読める形にしたもの。
上段＝3つの強み（一文ずつ）、下段＝3本の柱（見出し＋3項目）。
柱は枠で囲まず、上端の罫線だけで区切る。囲むとカードが並んで見え、
このサイトの他の節（枠を使っていない）から浮くため。 */
.reasons {
list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0;
display: grid; gap: 14px;
}
.reasons li {
position: relative; padding-left: 26px;
font-size: var(--fs-body); font-weight: 600; color: var(--ink);
line-height: 1.85; max-width: 56em;
}
/* 行頭の印。ロゴの「I」の目盛りから取った短い縦線 */
.reasons li::before {
content: ""; position: absolute; left: 0; top: .72em;
width: 12px; height: 2px; background: var(--cyan);
}
/* 見出し下を2段組みにして、右の空きに図を置く */
.why-split__body .h-display { margin-top: 0; }
.why-split {
display: grid; grid-template-columns: 1.15fr .85fr;
gap: clamp(32px, 5vw, 72px);
/* 上揃え。中央揃えにすると、左の本文が図の高さぶん下に押されて
見出しとの間が100px以上空いてしまう（実測して直した） */
align-items: start;
}
/* 2026-09-10: 図の上下を左の本文（見出し〜3つの強み）に揃える。
Momokaより「余分な余白を無くしませんか」。
図は横長（460×327 ＝ 縦横比1.41）に描き直してあり、右カラムの幅に対して
本文とほぼ同じ高さになる。中央寄せではなく上下いっぱいに置く。 */
.why-split__fig { margin: 0; align-self: stretch; display: flex; align-items: center; }
.why-split__fig .art { display: block; width: 100%; height: auto; margin-left: auto; }
/* 図の中の文字。本文と同じ書体で、ラベルとして小さく */
.why-split__fig .art text {
font-family: var(--font-sans); font-size: 13px; font-weight: 600; letter-spacing: .02em;
}
/* 4本の線が順に引かれる */
[data-reveal="draw"] .conv {
stroke-dasharray: 320; stroke-dashoffset: 320; opacity: 0;
transition: stroke-dashoffset 1.2s var(--ease-io), opacity .3s linear;
}
[data-reveal="draw"].is-visible .conv {
stroke-dashoffset: 0; opacity: .45;
transition-delay: calc(.5s + var(--i) * .18s);
}
@media (max-width: 900px) {
.why-split { grid-template-columns: 1fr; gap: 34px; }
.why-split__fig .art { margin: 0 auto; }
}
.pillars {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(26px, 3vw, 48px);
margin-top: clamp(44px, 5vw, 68px);
}
.pillar { border-top: 2px solid var(--blue); padding-top: 22px; }
.pillar__title {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 700;
letter-spacing: -.02em; line-height: 1.45;
margin: 0 0 16px;
}
.pillar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pillar__list li {
position: relative; padding-left: 16px;
font-size: var(--fs-note); color: var(--ink-read); line-height: 1.85;
}
.pillar__list li::before {
content: ""; position: absolute; left: 0; top: .78em;
width: 5px; height: 5px; border-radius: 50%; background: var(--line-dark, #C7D3DC);
background: var(--mist-2);
outline: 1px solid var(--line);
}
@media (max-width: 700px) {
.pillars { grid-template-columns: 1fr; gap: 30px; }
}
/* 2026-09-19: Value（/recruit/#value）。左に名称、右に説明を置く行を縦に5つ並べる。
★最初は .pillars--5 として5列の横並びで作ったが、説明文を足したら
1行あたり14文字ほどになり、日本語の文章として読めなかった
（幅207px・14px で実測）。Valueは「並べる」より「読ませる」ものなので
行の形に変えた。.pillars--5 は使わなくなったので削除した。
★.phase（進め方）も左ラベル・右本文の型だが、あちらは縦レールと節点で
順番を示す作りなので使っていない。Valueに順番は無い。
★横罫は目盛りと同じ var(--line)。新しい色は作っていない。 */
.values { list-style: none; margin: clamp(40px, 4.5vw, 60px) 0 0; padding: 0; }
.value {
display: grid; grid-template-columns: 260px 1fr;
gap: clamp(20px, 3vw, 48px);
padding: clamp(26px, 3vw, 36px) 0;
border-top: 1px solid var(--line);
}
.value:last-child { border-bottom: 1px solid var(--line); }
.value__name {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 700;
letter-spacing: -.02em; line-height: 1.45; margin: 0;
}
/* 表のC列・D列1行目（原文）と、こちらで書いた説明とで、見た目を分けている。
どちらが原文かは HTML のコメントに書いてある。 */
.value__lead { font-size: var(--fs-body); font-weight: 600; color: var(--ink); line-height: 1.85; margin: 0; }
.value__desc { font-size: var(--fs-note); color: var(--ink-read); line-height: 1.95; margin: 12px 0 0; max-width: 54em; }
@media (max-width: 820px) {
.value { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; }
}
/* --- 進め方の詳細（2026-09-10 追加。事業内容ページ用）-------------------
会社案内の「提供の流れ」をそのまま読める形にしたもの。
左に段階（番号・名前・期間）、右にその内訳を並べる。
段階の左端に縦のレールが通り、番号の位置に節点が乗る。
内訳が1つの段階（STEP 04）もあるので、右は中身の数に追随させている。 */
.phase {
list-style: none; margin: clamp(44px, 5vw, 68px) 0 0; padding: 0;
position: relative;
}
/* 段階をつなぐ縦のレール */
.phase::before {
content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px;
background: var(--line);
transform-origin: center top; scale: 1 0;
transition: scale 1.3s var(--ease);
}
[data-reveal="rail"].is-visible.phase::before { scale: 1 1; }
.phase__step {
position: relative;
display: grid; grid-template-columns: 300px 1fr;
gap: clamp(20px, 4vw, 56px);
padding: 0 0 clamp(34px, 4vw, 52px) 30px;
}
.phase__step:last-child { padding-bottom: 0; }
/* 節点 */
.phase__step::before {
content: ""; position: absolute; left: 0; top: 4px;
width: 11px; height: 11px; border-radius: 50%;
background: var(--paper); border: 1.5px solid var(--blue);
opacity: 0; transform: scale(.4);
transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.phase__step:last-child::before { background: var(--amber); border-color: var(--amber); }
[data-reveal="rail"].is-visible .phase__step::before { opacity: 1; transform: scale(1); }
.phase__step > * { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal="rail"].is-visible .phase__step > * { opacity: 1; transform: none; }
[data-reveal="rail"].is-visible .phase__step:nth-child(1)::before { transition-delay: .5s; }
[data-reveal="rail"].is-visible .phase__step:nth-child(2)::before { transition-delay: .75s; }
[data-reveal="rail"].is-visible .phase__step:nth-child(3)::before { transition-delay: 1.0s; }
[data-reveal="rail"].is-visible .phase__step:nth-child(4)::before { transition-delay: 1.25s; }
[data-reveal="rail"].is-visible .phase__step:nth-child(1) > * { transition-delay: .62s; }
[data-reveal="rail"].is-visible .phase__step:nth-child(2) > * { transition-delay: .87s; }
[data-reveal="rail"].is-visible .phase__step:nth-child(3) > * { transition-delay: 1.12s; }
[data-reveal="rail"].is-visible .phase__step:nth-child(4) > * { transition-delay: 1.37s; }
.phase__no {
display: block;
font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
letter-spacing: .16em; color: var(--blue);
}
.phase__title {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 700;
margin: 8px 0 0; letter-spacing: -.02em;
}
/* 期間。数字が並ぶので等幅にして桁を揃える */
.phase__span {
font-family: var(--font-mono); font-size: var(--fs-note);
color: var(--muted); margin: 10px 0 0;
font-variant-numeric: tabular-nums;
}
.phase__body { display: grid; gap: clamp(18px, 2vw, 26px); align-content: start; }
.phase__item h4 {
font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 700;
margin: 0 0 6px; color: var(--ink);
}
.phase__item p {
font-size: var(--fs-note); color: var(--ink-read);
line-height: 1.9; margin: 0; max-width: 46em;
}
@media (max-width: 780px) {
.phase__step { grid-template-columns: 1fr; gap: 16px; padding-left: 26px; }
.phase__span { margin-top: 6px; }
}
/* --- 進め方のレール（2026-09-10 追加。トップページ用）------------------
事業内容ページの .flow が「枠付きのカード4枚＋矢印」なのに対し、
こちらは「1本のレールの上に節点が並ぶ」形。同じ中身を別の見せ方で出している。
枠線を使わないので、節どうしが地続きに見え、流れとして読める。
段を増やすときは を足すだけでよい（列数は中身に追随する）。 */
.rail {
list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: clamp(20px, 2.4vw, 36px);
position: relative;
}
/* レール本体。節点の中心を通る高さに置く */
.rail::before {
content: ""; position: absolute; left: 0; right: 0; top: 7px;
height: 1px; background: var(--line);
transform-origin: left center; scale: 0 1;
transition: scale 1.1s var(--ease);
}
[data-reveal="rail"].is-visible.rail::before { scale: 1 1; }
.rail__step { position: relative; padding-top: 30px; }
/* 節点 */
.rail__step::before {
content: ""; position: absolute; left: 0; top: 2px;
width: 11px; height: 11px; border-radius: 50%;
background: var(--paper);
border: 1.5px solid var(--blue);
opacity: 0; transform: scale(.4);
transition: opacity .45s var(--ease), transform .5s var(--ease);
}
/* 最後の節点だけ塗る。到達点だとわかるように */
.rail__step:last-child::before { background: var(--amber); border-color: var(--amber); }
[data-reveal="rail"].is-visible .rail__step::before { opacity: 1; transform: scale(1); }
[data-reveal="rail"].is-visible .rail__step:nth-child(1)::before { transition-delay: .55s; }
[data-reveal="rail"].is-visible .rail__step:nth-child(2)::before { transition-delay: .75s; }
[data-reveal="rail"].is-visible .rail__step:nth-child(3)::before { transition-delay: .95s; }
[data-reveal="rail"].is-visible .rail__step:nth-child(4)::before { transition-delay: 1.15s; }
/* 文字は節点より少し遅れて出す */
.rail__step > * { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal="rail"].is-visible .rail__step > * { opacity: 1; transform: none; }
[data-reveal="rail"].is-visible .rail__step:nth-child(1) > * { transition-delay: .68s; }
[data-reveal="rail"].is-visible .rail__step:nth-child(2) > * { transition-delay: .88s; }
[data-reveal="rail"].is-visible .rail__step:nth-child(3) > * { transition-delay: 1.08s; }
[data-reveal="rail"].is-visible .rail__step:nth-child(4) > * { transition-delay: 1.28s; }
[data-reveal="rail"] { opacity: 1; transform: none; }
.rail__no {
display: block;
font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
letter-spacing: .16em; color: var(--blue);
}
.rail__title {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 700;
margin: 8px 0 8px;
}
.rail__desc { font-size: var(--fs-note); color: var(--muted); line-height: 1.8; margin: 0; }
@media (max-width: 700px) {
/* 狭い画面では縦に積み、レールも縦線にする */
.rail { grid-template-columns: 1fr; gap: 26px; }
.rail::before { left: 5px; right: auto; top: 7px; bottom: 7px; width: 1px; height: auto;
transform-origin: center top; scale: 1 0; transition: scale 1.1s var(--ease); }
[data-reveal="rail"].is-visible.rail::before { scale: 1 1; }
.rail__step { padding-top: 0; padding-left: 26px; }
.rail__step::before { top: 4px; }
}
/* 番号付きリスト（法規制対応の流れなど） */
.steps { border-top: 1px solid var(--line); margin-top: 36px; }
.step {
display: grid; grid-template-columns: 54px 1fr;
gap: 18px; padding: 20px 0;
border-bottom: 1px solid var(--line);
align-items: baseline;
}
.step__no { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; color: var(--blue); }
.step__title { font-size: var(--fs-body); font-weight: 600; margin: 0; }
.step__desc { font-size: var(--fs-body); color: var(--muted); margin: 5px 0 0; line-height: 1.9; }
/* --- 8-5a. 開発フロー（4ステップの図） ---------------------------------
チラシ・ポスターの「開発フロー」図と同じ横並び。
カードの間の「▶」は装飾なので擬似要素で描き、読み上げには乗せない。
横幅が足りない画面では縦積みにし、矢印の向きも下向きに変える。 */
.flow {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(28px, 3vw, 44px);
}
.flow__step {
position: relative;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(22px, 2.4vw, 32px) clamp(16px, 1.6vw, 24px);
text-align: center;
}
/* カード間の矢印 */
.flow__step:not(:last-child)::after {
content: ""; position: absolute; top: 50%; right: calc(clamp(28px, 3vw, 44px) / -2);
width: 0; height: 0; transform: translate(50%, -50%);
border-left: 9px solid var(--blue);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.flow__no {
display: block;
font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
letter-spacing: .16em; color: var(--blue);
}
.flow__title {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 700;
margin: 10px 0 12px;
}
.flow__desc { font-size: var(--fs-body); line-height: 1.85; color: var(--muted); margin: 0; }
@media (max-width: 860px) {
.flow { grid-template-columns: 1fr; gap: 30px; }
.flow__step:not(:last-child)::after {
top: auto; right: 50%; bottom: -21px; transform: translate(50%, 0);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 9px solid var(--blue);
border-bottom: 0;
}
}
/* --- 8-5c. 募集職種（採用ページ）---------------------------------------
折りたたみは / の標準機能で、JavaScriptは使っていない。
職種が6件あり、すべて開いた状態だとページが長くなりすぎるため。 */
.jobs { border-top: 1px solid var(--line); margin-top: 36px; }
.job { border-bottom: 1px solid var(--line); }
.job__head {
display: grid; grid-template-columns: 1fr auto 20px;
align-items: center; gap: 16px;
padding: 24px 0; cursor: pointer;
list-style: none;
transition: padding-left .4s var(--ease);
}
.job__head::-webkit-details-marker { display: none; }
.job__head:hover { padding-left: 10px; }
.job__title { font-size: var(--fs-lead); font-weight: 700; }
.job__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.job__tags span {
font-size: var(--fs-label); letter-spacing: .06em; color: var(--blue);
border: 1px solid var(--line); border-radius: 999px;
padding: 4px 10px; white-space: nowrap;
}
/* 開閉のしるし（＋ / −） */
.job__icon { position: relative; width: 14px; height: 14px; justify-self: end; }
.job__icon::before,
.job__icon::after {
content: ""; position: absolute; left: 0; top: 50%;
width: 14px; height: 1.5px; background: var(--blue);
transition: transform .35s var(--ease);
}
.job__icon::after { transform: rotate(90deg); }
.job[open] .job__icon::after { transform: rotate(0); }
/* 2026-09-12: 業務内容をまだ受領していない職種（現在はバックオフィス）は
にせず、見出しの行だけを出している。開いても空の折りたたみは
壊れて見えるため。3列目の20pxは空のまま残してあるので、上下の職種と
タイトル・タグの位置が揃う。原文が届いて に戻すときは、
HTML側でこのクラスを外すだけでよい */
/* 2026-09-23: .job--nobody（中身の無い職種カード）の指定2件を削除した。
2026-09-12 にバックオフィス用として作ったが、2026-09-23 に原文が届いて
コーポレートスタッフとして に戻したため、使う要素が無くなった。
使われないCSSを残さない方針。中身の無い職種がまた出たら、ここに戻す。 */
/* 2026-09-25: 読み幅の 62em を、器ではなく中身に移した（Momokaより「このボタンがずれている」）。
★それまで .job__body 全体に max-width: 62em が掛かっており、
「この職種に応募する」ボタンまで内側に閉じ込められていた。
実測：職種の見出し行の右端は wrap から64px、ボタンは162px。98pxずれていた。
★62em は本文を読みやすくするための幅なので、本文にだけ残し、
ボタンは見出し行と同じ右端（64px）に揃うようにした。 */
.job__body { padding: 4px 0 32px; }
.job__body > *:not(.job__apply) { max-width: 62em; }
/* 2026-09-23: 業務内容を二つに分ける小見出し（コーポレートスタッフの
「人事」「広報」）。.job__sub より一段弱く、箇条書きの直前に置く。
原文の「◇ 人事」「◇ 広報」に当たる。他職種には無いが、同じ形で
分かれている原文が来たら使い回せる。 */
.job__group {
font-size: var(--fs-note); font-weight: 700; color: var(--ink);
margin: 18px 0 8px;
}
.job__sub {
font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em;
color: var(--blue); margin: 24px 0 10px;
}
.job__sub:first-child { margin-top: 0; }
/* 求人の本文も「読ませる文章」なので .lead と同じ設定にする（値を2箇所に持たない） */
.job__text { font-size: var(--fs-body); line-height: 1.8; color: var(--ink-read); margin: 0; }
@media (max-width: 700px) {
.job__head { grid-template-columns: 1fr 20px; row-gap: 10px; }
.job__tags { grid-column: 1 / -1; }
}
/* --- 8-5b. 3枚並びのカード（他ページへの導線に使う） --------------------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 900px) { .cards-3 { grid-template-columns: 1fr; } }
/* --- 8-6. 対象領域別ソリューション -------------------------------------
2026-08-16: 1行1領域の横並びリストから、現行サイト（Studio.Design版）と同じ
「写真＋見出し＋箇条書き」のカード2列に変更した。
1領域あたり7〜9項目あり、横並びの行では収まらないため。 */
.areas {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: clamp(28px, 3.4vw, 52px);
}
.area { display: flex; flex-direction: column; }
/* 2026-09-10: 一覧の最後に置く「掲載のない領域について」のカード。
5領域を2列で並べると最終行が1つ空くので、そこを相談導線にしている。
★番号は付けない。01〜05が実在の対応領域なので、06を振ると
6番目の領域だと誤解される（Momokaの指摘で削除した）。
番号が無いぶん、見出しの位置を他のカードと揃えるために上の余白を足している。 */
.area--ask .area__title { margin-top: 26px; }
.area--ask .area__body { display: flex; flex-direction: column; flex: 1; }
.area__ask-text {
font-size: var(--fs-note); color: var(--ink-read);
line-height: 1.95; margin: 16px 0 0; max-width: 34em;
}
/* 2026-09-20: Momokaの指示「お問合せボタンは右下に移動」。
もともと margin:auto 0 0 で下端にだけ寄せていた（左端のまま）。
text-align:right を足して右端にも寄せる。
★.btn は inline-flex なので、親の text-align で右に寄る。
ボタン自体に margin-left:auto を書く必要はない。
★下端に寄せる margin:auto 0 0 はそのまま。上の .area__ask-text との間が
空いて見えるのは、隣のカードと頭を揃えるために本文が短くても
枠の高さを保っているため（.area--ask .area__body の flex:1）。 */
.area__ask-action { margin: auto 0 0; padding-top: 26px; text-align: right; }
/* 写真の代わりに図を敷く枠。写真枠と同じ高さ・同じ地色 */
.area__media--fig { display: flex; align-items: center; justify-content: center; }
.area__media--fig .drift { position: static; width: 130%; height: 130%; transform: none; max-width: none; }
/* 写真枠。写真が未提供の領域も枠は保持し、カードの頭を揃える
（事例カードと同じ「薄いグレー地＋目盛り」の作法にそろえている） */
.area__media {
position: relative; aspect-ratio: 16 / 9; overflow: hidden;
background: var(--mist);
border: 1px solid var(--line);
border-radius: var(--radius);
}
/* 2026-09-23: 写真の上端に重ねていた目盛り（::before）を削除した。
Momokaの指摘「事業内容の写真にメモリ線いらない」。
★写真の上に線を引いているので、写真そのものが読みにくくなっていた。
目盛り線の役割は「セクションの始まり」だけに絞ったので（36本→8本）、
写真の縁に飾りとして置くのはその方針とも合わない。
★写真の枠（border + border-radius）は残している。 */
.area__media img {
position: relative; z-index: 1;
width: 100%; height: 100%; object-fit: cover;
transition: transform .9s var(--ease);
}
.area:hover .area__media img { transform: scale(1.04); }
.area__body { padding-top: 22px; }
.area__no {
display: block;
font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
letter-spacing: .18em; color: var(--blue);
}
.area__title {
font-family: var(--font-sans);
font-size: var(--fs-sub); font-weight: 700;
margin: 8px 0 18px;
}
.area__list { list-style: none; margin: 0; padding: 0; }
.area__list li {
position: relative; padding-left: 15px;
font-size: var(--fs-body); line-height: 2.05; color: var(--muted);
}
/* 中黒は現行サイトの表記にそろえる。テキストに直接書かず擬似要素で出すことで、
コピーしたときに記号が混ざらないようにしている */
.area__list li::before {
content: "・"; position: absolute; left: 0; color: var(--blue);
}
@media (max-width: 860px) {
.areas { grid-template-columns: 1fr; gap: 40px; }
}
.case__foot { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* --- 8-8c. 代表挨拶（ごあいさつ）---------------------------------------
2026-08-26 追加。現行サイト（idatenase.com/menu-1）のレイアウトを踏襲し、
左に円形の写真と肩書き・氏名・略歴、右に挨拶文を置く。
文字サイズは既存の段階のみ（18px＝lead、16px＝表の本文、11px＝eyebrow）。 */
/* セクション見出しを持たない節。ページ見出しの直後に本文が来るため上の余白を詰める */
.section--tight { padding-top: clamp(28px, 4vw, 56px); }
/* 2026-08-31: 左の列を 300px→340px、間隔を最大80px→56pxに詰めた。
300pxでは略歴が7行に折れて縦に伸び、右の挨拶文より下まで続いて空白ができていた
（Momokaの指摘） */
.message { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 3.6vw, 56px); margin-top: 56px; }
.message__photo {
width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
background: linear-gradient(150deg, var(--mist-2), #F7FAFB);
}
.message__photo img { width: 100%; height: 100%; object-fit: cover; }
.message__role { font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; color: var(--blue); margin-top: 28px; }
.message__name { font-family: var(--font-sans); font-size: var(--fs-lead); font-weight: 600; margin: 8px 0 0; }
.message__name span { font-size: var(--fs-note); font-weight: 500; letter-spacing: .04em; color: var(--muted); margin-left: 10px; }
/* 写真の下の説明書き。本文（挨拶文）ではなく補足なので --fs-note。
行間も 1.95→1.75 に詰めている */
.message__bio { font-size: var(--fs-note); color: var(--muted); line-height: 1.75; margin: 16px 0 0; }
.message__links { margin: 16px 0 0; }
.message__links a { font-size: var(--fs-label); letter-spacing: .08em; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
/* 2026-08-31: 行間 2.1→1.85、段落の間隔 1.7em→1.2em に詰めた。
7段落あり、行間2.1では1画面に収まらず読みづらかったため（Momokaの指摘）。
現行サイト（idatenase.com/menu-1）は 16px / 行間1.6。
あわせて文字サイズもリード文(19px)から本文(17px)の段階に変えた。
挨拶文は導入文ではなく本文なので、段階の割り当てとしてもこちらが正しい。
現行サイトの16pxより大きいので、定例の「文字は大きく」にも反しない。 */
/* 2026-09-24: 挨拶文を上下中央に寄せた（Momokaより「文章だけ上寄り」）。
★実測：左の列（写真・肩書き・氏名・略歴）は650pxまで埋まるのに、
右の挨拶文は437pxで終わり、右下に213pxの空白が残っていた。
中央に寄せると、その空白が上下に約107pxずつ分かれる。 */
.message__body { align-self: center; }
.message__body p { font-size: var(--fs-body); line-height: 1.85; color: var(--ink); margin: 0 0 1.2em; }
.message__body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
/* 2026-09-30: min-width:0 を足した。
★/message/ が390px幅で32pxはみ出していた原因。
p に word-break: auto-phrase（363行）が効いており、日本語が★文節単位でしか
折れない。そのため .message__bio の最小幅が「最長文節」＝402pxになり、
1fr のトラックが350pxまで縮めなかった（グリッドの子は min-width:auto が既定で、
中身の最小幅より狭くならない）。
★min-width:0 にしても文字はあふれない。実測で bio の scrollWidth と
表示幅が一致すること（350/350）を確認済み。auto-phrase は必要なら
文節の中でも折る。 */
.message { grid-template-columns: 1fr; gap: 36px; }
.message > * { min-width: 0; }
.message__photo { width: 200px; }
}
/* --- 8-9. ニュース / 記事リスト ---------------------------------------- */
.news { border-top: 1px solid var(--line); }
/* 2026-09-10: Momokaの指示でサムネイルを出し、カテゴリのラベルは外した。
1列目はもともとラベル用に148pxを取っていたので、その枠をそのまま
サムネイルに置き換えている（行の高さと文字の位置は変えていない）。 */
.news__item {
/* 日付は画面上は隠しているので列を占めない */
display: grid; grid-template-columns: 148px 1fr auto;
gap: clamp(12px, 2vw, 28px); align-items: center;
padding: 20px 0; border-bottom: 1px solid var(--line);
transition: padding-left .5s var(--ease), background .5s var(--ease);
}
/* 2026-09-23: 地色を mist から白へ（/news/ のカードと同じ理由）。
★トップのサムネイルにも白地のロゴ画像（ユシロ等）が入るので、
mist だと境目に線が見えて「画像が切れている」ように見える。
★.area__media の地色は mist のまま。あちらの写真は
全面に絵が入っていて（実測で6件とも100%）、継ぎ目が出ないため。
※2026-09-24：ここに並記していた .case__media は、導入事例ページ廃止に伴い削除した。 */
/* 2026-09-24: ここにあった .news__thumb / .news__thumb img / hover の3ルールを削除。
同じセレクタが同じ詳細度で下（2130行あたり）にもう一度書かれており、
後勝ちで上書きされて1つも効いていなかった。 */
@media (max-width: 700px) {
.news__item { grid-template-columns: 96px 1fr auto; gap: 14px; }
}
.news__item:hover { padding-left: 14px; background: linear-gradient(90deg, var(--mist), transparent 70%); }
/* 2026-08-19の定例の決定「ニュースの日付は表示しない」（更新が止まったときに
「更新のない会社」に見えるため）。
HTMLからは消さず、