/* ⚠️ ホバーの装飾はカンプに指定が無いため置かない（2026-08-12 ご指示）。
追加したくなったら、まず先方に仕様を確認すること。
キーボード操作の :focus-visible は別途 base.css に残してある（必須）。 */
/* ===========================================================
Base — reset, typography, shared primitives
共通パーツはここに置く。セクション側で再実装しないこと。
寸法に PROVISIONAL と書いてあるものは Figma 未実測。
最初にそのパーツを使うセクションの担当が実測して確定させる。
=========================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--bg-base);
color: var(--text);
font-family: var(--font-jp);
font-size: var(--fs-body);
line-height: var(--lh-normal);
/* palt は使わない。Figma の書き出しが詰め組みしていないため、
有効にすると全テキストが 1-3px 詰まってカンプとズレる。（LP と同じ判断） */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd {
margin: 0;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
:focus-visible {
outline: 3px solid var(--aixeed-green);
outline-offset: 3px;
}
/* --- Layout primitives ------------------------------------- */
/* 幅は絞らない。暗い帯（CAREERS・フッター）を画面いっぱいに伸ばすため。
中身は各セクションの .container が中央で止める。 */
/* 地色は body が持つ。.page 自体は塗らない（下層ページは全面が地色）。
z-index: 0 は必須。これが無いと .page が重なり順の文脈を作らないため、
ヒーローのアーチ（z-index: -1）が .page より後ろへ落ちて見えなくなる。 */
.page {
position: relative;
z-index: 0;
width: 100%;
overflow-x: clip;
}
/* --- トップページの「白 → 地色」の溶け ------------------------
カンプの `Rectangle 122`（X=0 Y=909 W=1366 H=7263）は
「上端が透明 → 下へいくほど地色」の線形グラデーション。
つまり背景ではなく、**固定されたアーチに覆いかぶさる幕**。
スクロールすると幕が上がってきてアーチを隠していく。
（アーチ側の position:fixed は 01-hero.css）
実測ストップ:
3% FFFFFF 不透明度0% → 幕の上から 7263*0.03 = 218px
6% EFF0EE 不透明度100% → 幕の上から 7263*0.06 = 436px
※ 2026-08-12 に --bg-base を実測値 EFF0EE へ変更（それまで F3F4F3 で据え置いていた）。
据え置きの理由だった「brand-sphere.webp に F3F4F3 が焼き込まれている」は、
透明背景の brand-sphere-only.webp に差し替え済みで解消していた。
:has() でヒーローのあるページ（＝トップ）だけに限定する。
下層ページに白＋幕が乗ると、上半分だけ白い別物になってしまうため。
万一 :has() が効かない環境では規則ごと落ちて全面が地色になる
＝下層が壊れる側ではなく、トップがおとなしくなる側に倒れる。 */
.page:has(.sec-hero) {
background-color: var(--surface);
}
/* ⚠️ z-index は **負の値** にすること。0 にすると「位置指定された要素」の層に入り、
position: static のままのセクション（`.sec-careers` / `.site-footer`）は
背景が本文より下の層に描かれるため、**幕がその背景だけを塗り潰す**。
実際に CAREERS の暗い帯（#1F1F1F）とフッターが消える不具合を出した。
負の値なら通常フローの中身より必ず奥に入るので、この事故が起きない。 */
.page:has(.sec-hero)::before {
content: '';
position: absolute;
z-index: -1;
top: 909px; /* 実測: Rectangle 122 の Y */
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
to bottom,
transparent 0,
transparent 218px,
var(--bg-base) 436px,
var(--bg-base) 100%
);
pointer-events: none;
}
/* コンテンツの左端がどこに来るか。セクション側で余白を合わせるのに使う。 */
:root {
--edge: max(var(--gutter), (100vw - var(--container)) / 2);
}
/* 追従ヘッダーの下に見出しが潜らないようにする。 */
[id] {
scroll-margin-top: 120px;
}
@media (max-width: 767px) {
[id] {
scroll-margin-top: 80px;
}
}
.container {
width: min(var(--container), 100% - 48px);
margin-inline: auto;
}
/* セクションの上下余白。カンプはかなり広い。PROVISIONAL */
.section {
position: relative;
padding-block: 120px;
}
/* 暗い面のセクション（CAREERS）。フッターとは別トーンなので分けてある。 */
.section--dark {
background: var(--bg-dark);
color: var(--text-invert);
}
.section--dark .sec-label {
color: var(--aixeed-green);
}
/* --- Section heading ---------------------------------------- */
/* 英字ラベル（OUR BUSINESS / ABOUT US / VISION / CAREERS）。
小サイズ・広い字送り・緑。LP の英字ウォーターマークとは別物。 */
/* カンプ実測（2026-08-12・Figmaのタイポグラフィパネル）:
Intel One Mono / Bold / 14px / 行間 17.3 / 字間 1px
⚠️ 以前は和文フォント・500・--fs-label で出していたが、いずれも誤り。
等幅フォントなので、読み込みに失敗して代替に流れると字送りが変わる。 */
.sec-label {
display: block;
margin-bottom: 24px; /* PROVISIONAL */
font-family: var(--font-label);
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
line-height: 17.3px;
color: var(--aixeed-green);
text-transform: uppercase;
}
/* 見出しは2行構成が基本。改行位置はカンプ通りに
で固定する。 */
.sec-head__ja {
font-size: var(--fs-h2);
font-weight: 700;
line-height: var(--lh-tight);
}
.sec-head__lead {
margin-top: 24px; /* PROVISIONAL */
font-size: var(--fs-body);
color: var(--text-muted);
}
/* --- Links & buttons ---------------------------------------- */
/* 「会社概要 →」型。下線付きテキストリンク＋右端に矢印。 */
.link-arrow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-bottom: 12px; /* PROVISIONAL */
border-bottom: 1px solid currentColor;
font-size: var(--fs-lead);
line-height: 1;
transition: opacity var(--dur) var(--ease);
}
/* 「サービス一覧 →」型。角丸のない細い枠のボタン。 */
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 320px; /* PROVISIONAL */
height: 56px; /* PROVISIONAL */
padding-inline: 32px;
border: 1px solid var(--text);
font-size: var(--fs-body);
line-height: 1;
transition: background-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.btn-outline__arrow {
position: absolute;
right: 24px; /* PROVISIONAL */
}
/* 「お問い合わせ →」型。CTA の丸ボタン。 */
.btn-circle {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 実測（Figma `Ellipse 29` + `Group 396` / CTA）:
円 141 × 141 / 線 #000000 1px 内側、
中身は 96 × 57.76 の縦Auto Layoutで間隔21。
⚠️ 塗りは**黒ベタ**（2026-08-12 ご指摘）。
以前は「塗りなし＋黒枠、ホバーで黒く反転」にしていた。
既定とホバーが逆で、カンプの見た目はホバー時にしか出ていなかった。
なお当時の実測メモには「塗りなし」と書いてあり、私の読み違いの可能性が高い。 */
gap: 21px;
width: 141px;
height: 141px;
border: 1px solid #000;
border-radius: 50%;
background: var(--text);
color: var(--text-invert);
font-size: var(--fs-sm);
line-height: 1;
}
/* ヘッダーの「資料請求」「お問い合わせ」。ピル型の小ボタン。 */
.btn-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px; /* PROVISIONAL */
padding-inline: 24px;
border-radius: var(--r-pill);
font-size: var(--fs-sm);
line-height: 1;
transition: opacity var(--dur) var(--ease);
}
.btn-pill--ghost {
border: 1px solid var(--border-soft);
}
.btn-pill--solid {
background: var(--text);
color: var(--text-invert);
}
/* --- 画像プレースホルダ（Figma書き出し待ち） ------------------
まだ書き出せていない画像・アイコンの場所取り。
寸法だけカンプに合わせてあるので、アセットが揃ったら ![]()
/