/* Eureka Labo ワイヤーフレーム — 白・黒・グレーのみ／文字・余白・幅は スタイルガイド.md の値だけを使う */
/* ブレークポイントはこの2つだけ。3つ目を作らない（増やすときはスタイルガイド.md も直す）
   760px … スマホかどうか。段組みの1カラム化、メニューの開き方、代表紹介やお知らせの並び（JS も (max-width: 760px) で揃える）。
            ヒーローの粒子演出（particle-flow.js）は、760px より広ければ動く。760px 以下は動かさず、できあがった形（ロゴ・キャッチ・メッシュ）だけ出す
   1024px … 1024px より広いときだけ、トップの事業内容がスクロールで切り替わりプロダクトが重なってくる演出（main.js）と、
             下層ページ（会社概要・事業内容）の「見出し左・中身右」の2カラム＋右のナビぶんの余白が働く。
             1024px 以下は、事業内容は3枚とも開いて縦積み、下層ページは見出しを上に積んでナビを中身の上に重ねる
   文字・余白は 760px→1440px のあいだ clamp() で連続して変わるので、この2つ以外に段は無い */
:root {
  --c-bg: #ffffff;
  --c-text: #1a1a1a;
  --c-sub: #666666;
  --c-line: #999999;
  --c-line-soft: #d4d4d4;
  --c-fill: #eeeeee;
  --c-fill-soft: #f6f6f6; /* --c-fill より薄いグレー。トップの事業内容の2枚目のカードで使う */
  --c-fill-strong: #dddddd;
  --c-dark-soft: #3a3a3a; /* 黒地のカードの濃さ（薄い → 濃い：--c-dark-soft → --c-dark → --c-text）。トップの事業内容の3枚で使う */
  --c-dark: #2a2a2a;
  --c-banana: #ffe135; /* バナナモードの黄色（白・黒・グレーの例外。代表写真の裏のボタンなど） */

  --ff-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --ff-read: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif; /* 文章用（見出し・タイトル・ボタン・メニュー以外）：端末の標準フォント（Mac・iPhone はヒラギノ、Windows は游ゴシック）。読み込みなし */
  --ff-display: "Cinzel", serif;
  --ff-eyebrow: "Lato", sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --fs-display: clamp(40px, -4.7059px + 5.8824vw, 80px);
  --fs-h1: clamp(32px, -3.7647px + 4.7059vw, 64px);
  --fs-h2: clamp(20px, 15.5294px + 0.5882vw, 24px);
  --fs-h3: clamp(20px, 11.0588px + 1.1765vw, 28px);
  --fs-quote: clamp(20px, -2.3529px + 2.9412vw, 40px); /* 代表メッセージの一言（会社概要） */
  --fs-lead: clamp(16px, 7.0588px + 1.1765vw, 24px);
  --fs-body: clamp(16px, 11.5294px + 0.5882vw, 20px);
  --fs-body2: clamp(12px, 7.5294px + 0.5882vw, 16px); /* 本文2：本文より1段階小さい（トップのお知らせカードのタイトル） */
  --fs-body-sub: clamp(16px, 13.7647px + 0.2941vw, 18px); /* 下層ページ（TOP 以外）の本文。下層の本文はすべてこれにそろえる */
  --fs-note: clamp(12px, 7.5294px + 0.5882vw, 16px);

  --lh-head: 1;
  --lh-display: 1; /* セクションの英字見出し。上下の見えない余白をなくす */
  --lh-body: 1.7;
  --lh-about: 2; /* 「ひらめきの実験場」の本文だけの特例 */
  --lh-body2: 1.7;

  --sp-section: clamp(64px, 28.2353px + 4.7059vw, 96px);
  --sp-head: clamp(32px, -3.7647px + 4.7059vw, 64px);
  --sp-title: clamp(16px, 7.0588px + 1.1765vw, 24px);
  --sp-item: clamp(48px, 30.1176px + 2.3529vw, 64px);

  --max: 980px;
  --max-narrow: 800px; /* トップの代表紹介の幅 */
  --max-wide: 1200px;
  --gutter: clamp(16px, 7.0588px + 1.1765vw, 24px);
  --radius-card: 32px;
  --radius-pill: 999px;
  --radius-field: 16px; /* 入力欄の角丸（お問い合わせ） */
  --menu-inset: 16px;  /* メニューの画面の端からの浮き */
  --radius-menu: 28px; /* 開いたメニューの角丸 */
  --menu-logo-h: 56px; /* メニューのロゴの段の高さ */
  --menu-nav-w: 232px; /* 開いたメニュー（リンク）の幅：一番長い「プライバシーポリシー」16px×10字＋左の「‹」48px＋右 24px。実際の幅は sidebar.js が測る */
  --cut-slant: 120px;  /* セクション区切りの斜めの高低差 */
  --sep-line: 150px;   /* トップのお知らせと CTA の間の縦線の長さ */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-ja);
  font-weight: var(--fw-medium); /* 本文は 500。このフォントの 400 は細く見える */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { font-weight: var(--fw-bold); line-height: var(--lh-head); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
small, .note { font-size: var(--fs-note); line-height: 1.6; color: var(--c-sub); }
/* 文章は --ff-read、見出し・タイトル・ボタン・メニューは --ff-ja（Zen Kaku）。
   中身（main）の段落・箇条書き・表を文章として --ff-read にし、その中のタイトル類（ニュースの題・日付・タグ・番号・ひとこと説明・ボタン・パンくず）は --ff-ja に戻す */
main :where(p, li, td, th, dd) { font-family: var(--ff-read); }
main :where(.title, .date, .tag, .num, .meta, .product-tagline, .more, .btn, .crumbs li) { font-family: var(--ff-ja); }
.lead { font-size: var(--fs-lead); }
a { color: inherit; }
img { max-width: 100%; }

.container {
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ページ内リンクの飛び先を画面の上端にくっつけない */
[id] { scroll-margin-top: 16px; }
.logo { font-size: var(--fs-h3); font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ボタン */
.btn {
  display: inline-block;
  border: 1px solid var(--c-text);
  border-radius: var(--radius-pill);
  padding: 8px 24px;
  line-height: 1.5;
  text-decoration: none;
  background: var(--c-bg);
  font-size: var(--fs-body);
  font-family: inherit;
  font-weight: var(--fw-black);
  color: var(--c-text);
}
.btn-lg { padding: 24px 64px; font-size: var(--fs-h3); line-height: var(--lh-head); }
.btn[disabled] { border-color: var(--c-line); color: var(--c-sub); background: var(--c-fill); cursor: not-allowed; }
/* セクション内のページへのリンク：白背景・黒枠線のピル型（下線・矢印なし） */
.more {
  display: inline-block;
  align-self: flex-start; /* 縦並びの flex の中でも横に伸ばさない */
  margin-top: var(--sp-title);
  padding: 8px 24px;
  font-size: var(--fs-note);
  line-height: 1.5;
  background: var(--c-bg);
  border: 1px solid var(--c-text);
  border-radius: var(--radius-pill);
  color: var(--c-text);
  text-decoration: none;
}

/* セクション */
.sec {
  padding: var(--sp-section) 0;
}
.sec h2 { margin-bottom: var(--sp-title); }
.sec p + p { margin-top: 16px; }
.tentative { font-size: var(--fs-note); color: var(--c-sub); font-weight: 400; }
.eyebrow { font-size: var(--fs-note); color: var(--c-sub); letter-spacing: 0.1em; }

/* セクション見出し：英字（ディスプレイ）の右に日本語ラベル（高さの中央でそろえる） */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 24px;
  margin-bottom: calc(var(--sp-head) / 2);
}
.sec-head .display {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--c-text);
}
/* 英字見出しの横の小さいラベル（事業内容 など）。英語版では英字見出しそのものが見出し要素になる（同じ言葉が2つ並ぶため）ので、その場合は大きさを変えない */
.sec-head h1:not(.display), .sec-head h2:not(.display) { font-size: var(--fs-note); font-weight: var(--fw-medium); margin: 0; }
.sec-head h1.display, .sec-head h2.display { margin: 0; }
.sec-head + .mt-m { margin-top: 0; }
/* 見出し直下の一文：見出しに寄せ、下の図とは間を空ける */
.sec-head:has(+ .sec-lead) { margin-bottom: var(--sp-title); }
.sec-lead { margin-bottom: var(--sp-head); }
@media (width <= 760px) {
  .sec-head { display: block; }
  .sec-head h1, .sec-head h2 { margin: 0; }
}

/* 画像の枠 */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-fill);
  border: 1px solid var(--c-line);
  color: var(--c-sub);
  font-size: var(--fs-note);
  min-height: 200px;
  padding: 16px;
}
.ph-square { aspect-ratio: 1 / 1; min-height: 0; }
.ph-wide { aspect-ratio: 16 / 9; min-height: 0; }

/* グリッド */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.split-r { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
@media (width <= 760px) {
  .g2, .g3, .g4, .split, .split-r { grid-template-columns: minmax(0, 1fr); }
}

.card { border: 1px solid var(--c-line); padding: 24px; }
.card h3 { margin-bottom: 8px; }

/* ヒーロー */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-text);
  color: var(--c-bg);
  border-bottom: 0;
}
.hero .container { width: 100%; }
.hero .eyebrow { color: #cccccc; font-family: var(--ff-eyebrow); font-weight: var(--fw-light); font-size: var(--fs-h2); line-height: var(--lh-head); }
/* キャッチの現行フォント（Wix 専用・モリサワ「フォーク」と推定）は使えないので、Regular で代用 */
.hero h1 { margin: 8px 0 0; font-size: var(--fs-display); letter-spacing: 0.1em; font-weight: var(--fw-regular); }
/* 粒子（particle-flow.js）が読み込めなかったときは、ロゴ・アイブロウ → キャッチの順に出す。
   読み込みを待つ間はロゴも隠しておく（粒より先に実体のロゴが一瞬見えないように） */
.hero { position: relative; overflow: hidden; }
.hero .container { position: relative; }
.hero.is-intro .hero-logo,
.hero.is-intro .eyebrow,
.hero.is-intro h1 { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.4,0,.2,1), transform 400ms cubic-bezier(.4,0,.2,1); }
.hero.is-intro h1 { transition-delay: 400ms; }
.hero.is-ready .hero-logo,
.hero.is-ready .eyebrow,
.hero.is-ready h1 { opacity: 1; transform: none; }
/* 実体のロゴ（黒地なので白に反転）。粒子が動かないときは、アイブロウの上に普通に並ぶ */
.hero-logo { display: block; width: min(480px, 80%); height: auto; margin: 0 auto var(--sp-title); filter: invert(1); }
/* 粒子が動くとき：ロゴとアイブロウは粒の位置に合わせて particle-flow.js が置く（--x・--y は画面の座標、--w はロゴの幅）。キャッチは粒で描くので HTML の文字は隠したまま */
/* 事業内容へ抜けたあと（is-done）は、ヒーローの中の同じ位置に置いて、ヒーローと一緒にスクロールさせる */
.pf-stage:is(.is-on, .is-done) .hero-logo,
.pf-stage:is(.is-on, .is-done) .hero .eyebrow { position: fixed; left: var(--x); top: var(--y); margin: 0; translate: -50% -50%; }
.pf-stage.is-done .hero .container { position: static; }
.pf-stage.is-done > .about { position: sticky; top: 0; z-index: 5; } /* ひらめきだけ貼り付けて、電球の続きを進める（舞台の高さは particle-flow.js が決める）。文字とボタンは電球のキャンバス（z-index: 4）より手前 */
.pf-stage.is-done .hero-logo,
.pf-stage.is-done .hero .eyebrow { position: absolute; }
.pf-stage:is(.is-on, .is-done) .hero-logo { width: var(--w); max-width: none; opacity: 0; transform: none; transition: opacity 800ms cubic-bezier(.4,0,.2,1); }
.pf-stage:is(.is-on, .is-done) .hero.is-logo .hero-logo { opacity: 1; }
.pf-stage:is(.is-on, .is-done) .hero .eyebrow { white-space: nowrap; translate: -100% -50%; font-size: var(--fs); } /* --x はロゴの右端。--fs はロゴの幅に合わせた大きさ */
.pf-stage:is(.is-on, .is-done) .hero .eyebrow { transform: none; transition: none; } /* 出方（位置・濃さ）は particle-flow.js が毎フレーム決める */
.pf-hero { position: absolute; top: 0; z-index: 1; pointer-events: none; }
/* ロゴのグリッジ（particle-flow.js）：ロゴの形に切り抜いた色の写し。ふだんは見えず、ときどき一瞬だけずれて出る */
.hero-glitch { display: none; }
.pf-stage:is(.is-on, .is-done) .hero-glitch {
  display: block; position: fixed; left: var(--x); top: var(--y); translate: -50% -50%; width: var(--w); max-width: none; height: auto;
  opacity: 0; mix-blend-mode: screen; pointer-events: none;
}
/* 横線のノイズ：ロゴと同じ枠に、細い横線を並べる（位置・長さ・濃さは particle-flow.js がグリッジのたびに決める） */
.hero-noise { display: none; }
.pf-stage:is(.is-on, .is-done) .hero-noise { display: block; position: fixed; left: var(--x); top: var(--y); translate: -50% -50%; width: var(--w); aspect-ratio: 1080 / 135; pointer-events: none; }
.hero-noise span { position: absolute; display: block; background: #ffffff; opacity: 0; }
.pf-stage.is-done :is(.hero-glitch, .hero-noise) { position: absolute; }
/* ヒーローの背景（ブロブ・メッシュ。particle-flow.js）：いちばん奥 */
.pf-hero-bg { position: absolute; top: 0; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .hero.is-intro .eyebrow,
  .hero.is-intro h1 { transition-duration: 0.01ms; transition-delay: 0ms; }
}

/* 私たちについて */
.about { text-align: center; }
.about h2 { font-size: var(--fs-h1); letter-spacing: 0.2em; margin-bottom: var(--sp-title); }
/* 英語版：字間を詰める。日本語の 0.2em のままだと英語は横に伸びて1行に収まらない */
html[lang="en"] .about h2 { letter-spacing: 0; }
.about p { font-size: var(--fs-body); letter-spacing: 0.1em; line-height: var(--lh-about); }

/* プロダクト：ふりがな → 名前 → ひとこと の3段（中央ぞろえ） → 本文 → 幅いっぱいの画像 */
.product-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; margin-bottom: var(--sp-title); }
.product-name { font-size: var(--fs-h1); line-height: 1; margin-bottom: 0; }
.product-kana { display: block; font-weight: var(--fw-bold); font-size: var(--fs-lead); line-height: var(--lh-head); color: var(--c-sub); margin-bottom: 0; }
.product-tagline { font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-head); color: var(--c-sub); margin-bottom: 8px; } /* 下の画像・本文との間を見出しの余白より 8px 広く */
.product .ph { margin-top: var(--sp-title); }

/* AIを中心にした3領域の図 */
.ai-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ".   a   ."
    "b   ai  c";
  gap: 24px 32px;
  align-items: center;
  margin: 8px 0 24px;
}
.ai-map .area-a { grid-area: a; }
.ai-map .area-b { grid-area: b; }
.ai-map .area-c { grid-area: c; }
.ai-core {
  grid-area: ai;
  justify-self: center;
  width: 140px;
  height: 140px;
  border: 2px solid var(--c-text);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h2);
  font-weight: 700;
  background: var(--c-fill);
}
.ai-map .node { border: 1px solid var(--c-line); padding: 16px; text-align: center; background: var(--c-bg); }
.ai-map .node h3 { margin-bottom: 4px; }
.ai-map-lg .ai-core { width: 200px; height: 200px; font-size: var(--fs-h1); }
.ai-map-lg .node { padding: 24px; }
.ai-map .node .num { font-size: var(--fs-note); color: var(--c-sub); display: block; }
@media (width <= 760px) {
  .ai-map {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ai" "a" "b" "c";
  }
  .ai-core, .ai-map-lg .ai-core { width: 112px; height: 112px; font-size: var(--fs-h2); }
}
/* トップの事業内容：見出し（右端にリンク）→ 横並びの3枚（左 1/4 は空ける）。1画面の高さに収める */
.page-top main .sec.sec-biz { padding: 0; }
.sec-biz > .container {
  height: 100svh;
  padding-top: var(--sp-head);
  padding-bottom: var(--sp-head);
  display: flex;
  flex-direction: column;
}
.biz-headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-title);
  margin-bottom: calc(var(--sp-head) / 2);
}
.biz-headrow .sec-head { margin-bottom: 0; }
/* 3枚の横アコーディオン。閉じた1枚は帯だけ、開いた1枚が残りの幅を全部取る。
   どの1枚も背景（::before）は右端まで伸ばし、後ろの1枚ほど上に重ねる。右上・右下の角は3枚そろって外枠の角丸になる */
.biz-acc {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: flex-end; /* 3枚とも閉じているときは右端に寄せる */
  margin-left: 25%;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.biz-panel {
  position: relative;
  display: flex;
  flex: 0 0 64px;
  min-width: 0;
  color: var(--c-bg); /* 黒地のカードなので白い文字 */
}
.biz-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  z-index: -1;
  background: var(--biz-bg);
  border-radius: var(--radius-card) 0 0 var(--radius-card);
}
.biz-panel.is-open { flex-grow: 1; }
/* 黒地の3段階：01 がいちばん薄く、後ろに重なる 03 ほど濃い（重なりの境目が見えるように） */
.biz-panel:nth-child(1) { z-index: 1; --biz-bg: var(--c-dark-soft); }
.biz-panel:nth-child(2) { z-index: 2; --biz-bg: var(--c-dark); }
.biz-panel:nth-child(3) { z-index: 3; --biz-bg: var(--c-text); }
.biz-tab {
  flex: 0 0 64px;
  margin: 0;
  padding: var(--sp-title) 0;
  font-size: var(--fs-h3);
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  align-items: center;
}
.biz-tab button {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  writing-mode: inherit;
  text-orientation: inherit;
  cursor: pointer;
}
.biz-tab button:focus-visible { outline: 2px solid var(--c-bg); outline-offset: 4px; }
/* 英語版：閉じた帯の見出しは、1文字ずつ縦に積む（text-orientation: upright）と読めないので、
   横書きのまま 90 度回す（mixed）。番号「01」は text-combine-upright でそのまま立てておく */
html[lang="en"] .biz-tab { text-orientation: mixed; }
.biz-tab .num { text-combine-upright: all; font-size: var(--fs-note); color: var(--c-line); margin-bottom: 8px; }
.biz-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--sp-title) / 2); /* 絵（立体）を下の説明のカードに寄せる */
  padding: var(--sp-title) var(--sp-head);
  overflow: hidden;
  opacity: 0;
  position: relative;
  isolation: isolate; /* 地のメッシュ（::before）を中身の後ろに敷く */
}
.biz-panel.is-open .biz-body { opacity: 1; }
.biz-body .ph {
  flex: 0 1 auto;
  height: 68%; /* 絵を大きく。中身は上下の中央にそろうので、そのぶん上の余白も狭くなる */
  min-height: 0;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  background: var(--c-bg);
}
/* 文章とボタンを白いカードで包む。絵はカードの外（上） */
.biz-card {
  flex: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-title);
  padding: var(--sp-title);
  background: var(--c-bg);
  color: var(--c-text);
  border-radius: var(--radius-card);
}
.biz-body p { max-width: 36em; }
.biz-body .more { margin-top: 0; }
/* 開閉の動き。スクロールはスイッチで、位置を越えたら main.js が .is-open を付け替え、時間でシュッと開く */
.biz-panel { transition: flex-grow 450ms cubic-bezier(.16, 1, .3, 1); }
.biz-body { transition: opacity 200ms ease-in; }
.biz-panel.is-open .biz-body { transition: opacity 300ms cubic-bezier(.16, 1, .3, 1) 150ms; }
/* 3枚とも閉じた状態から 01 が出てくるときは、開く速さは 02・03 と同じまま、開き始めを 450ms 遅らせる（main.js が .from-closed を付ける）。
   見出しが上端に着いてから開ききるまで 900ms */
.biz-acc.from-closed .biz-panel.is-open { transition-delay: 450ms; }
/* 見出し：画面に入ったら main.js が .is-in を付け、下からふわっと浮き出る */
.biz-headrow .sec-head { opacity: 0; transform: translateY(24px); transition: opacity 800ms ease-out, transform 800ms cubic-bezier(.16, 1, .3, 1); }
.biz-headrow .sec-head.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .biz-panel, .biz-acc.from-closed .biz-panel.is-open, .biz-body, .biz-panel.is-open .biz-body, .biz-headrow .sec-head { transition-duration: 0.01ms; transition-delay: 0s; }
}

/* PC：セクションを3画面ぶんの長さにし、中身は画面に止めておく。最初は3枚とも閉じていて、
   セクションに来たら 01、1/3 を越えたら 02、2/3 を越えたら 03 が開く（main.js）。帯を押すとその1枚の位置までスクロールする。
   さらに1画面ぶん延ばし、その間は次のプロダクトを画面の上に貼り付けたまま、入れ替える。
   事業内容の中身は左へずれながら透明になり、背景はプロダクトと同じ黒へ暗くなる。それと重なるように、プロダクトが右から入ってくる。
   入りきったあとも少しのあいだは止まったまま（余白）。
   縦は sticky で止め（.biz-stage の中で、最後の空き1画面ぶんだけ貼り付く）、横と透明度は main.js がスクロール量に合わせて変える。はみ出しは .page-top main の overflow-x: clip で隠す */
@media (width > 1024px) {
  .page-top main .sec.sec-biz { display: block; height: calc(100svh * 4); }
  .sec-biz > .container { position: sticky; top: 0; }
  .page-top main .sec.product { position: sticky; top: 0; z-index: 1; margin-top: -200svh; }
  .biz-stage::after { content: ""; display: block; height: 100svh; }
}
/* 動きを減らす設定では横には動かさず、最後の1画面で下からせり上がって重なるだけにする */
@media (width > 1024px) and (prefers-reduced-motion: reduce) {
  .page-top main .sec.product { position: relative; margin-top: -100svh; }
  .biz-stage::after { display: none; }
}

/* 1024px 以下：横に並べると狭いので、3枚とも開いた状態で縦に積む。リンクは見出しの下 */
@media (width <= 1024px) {
  .sec-biz > .container { height: auto; }
  .biz-headrow { display: block; }
  .biz-acc { display: grid; justify-content: normal; gap: var(--sp-title); margin-left: 0; overflow: visible; border-radius: 0; }
  .biz-panel { display: block; padding: var(--sp-title); background: var(--biz-bg); border-radius: var(--radius-card); }
  .biz-panel::before { display: none; }
  .biz-tab { writing-mode: horizontal-tb; padding: 0; display: block; }
  .biz-tab button { cursor: default; }
  .biz-tab .num { display: block; }
  .biz-body { opacity: 1; padding: var(--sp-title) 0 0; }
  .biz-body .ph { height: auto; width: 50%; }
}


/* ニュース一覧 */
[data-news-loading] { visibility: hidden; } /* ニュースを Wix から読み込み中（news-feed.js が外す） */
/* トップのお知らせ：PC は2カラム（左に細い見出し、右にカードが残りの幅いっぱい）。スマホは縦に積む */
@media (width > 760px) {
  .page-top .sec-news > .container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-head);
    max-width: calc(var(--max-wide) + var(--gutter) * 2);
  }
  .sec-news .sec-head { display: block; margin-bottom: 0; } /* 「お知らせ」を英字の下に回して、左の列を細くする */
  .sec-news .sec-head h2:not(.display) { margin-top: 8px; }
  .page-top .sec-news .wide { max-width: none; margin: 0; }
}
/* お知らせと CTA の間の、まん中の縦線。上は白に近いグレー → 下は文字の黒のグラデーション。長さ --sep-line ぶんを間に足す（前後のセクションの余白はそのまま） */
.sec-cut {
  width: 1.5px;
  height: var(--sep-line);
  margin: 0 auto;
  background: linear-gradient(var(--c-fill-soft), var(--c-text));
}
/* スクロールに合わせて上から下へ伸びる：線が画面の下から入ってきたら伸び始め、画面のまん中に来たところで伸びきる。戻すと縮む。
   この機能が使えないブラウザ（Firefox など）と、動きを減らす設定では、最初から伸びた線のまま */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec-cut { animation: sec-cut-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes sec-cut-grow { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
/* 画像つきのカード。左に日付・種別・タイトル、右に表紙画像。カード全体がリンク */
.news-cards { list-style: none; padding: 0; display: grid; gap: 12px; }
.sec-news .wide > .more { display: table; margin-left: auto; margin-right: auto; } /* ボタンはカードの列の中央に */
.news-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30%;
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  background: var(--c-bg);
}
.news-card:hover { border-color: var(--c-text); }
.news-card .txt { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px var(--sp-title); }
.news-card .meta { display: flex; gap: 12px; align-items: baseline; }
.news-card .date { font-size: var(--fs-note); font-weight: var(--fw-bold); color: var(--c-sub); }
.news-card .tag { border-radius: var(--radius-pill); padding: 0 12px; border-color: var(--c-line-soft); } /* 種別はピル型（下層ページの .page-sub .tag と同じ） */
.news-card .title { font-size: var(--fs-body2); font-weight: var(--fw-bold); line-height: var(--lh-body2); }
.news-card img, .news-card .ph { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; min-height: 0; object-fit: cover; border: 0; }
/* 表紙画像が無い記事の枠（［画像なし］）は、縦横比から横幅を割り出してカードを押し広げてしまうので、縮めてよいことにする */
.news-card .ph { min-width: 0; }
@media (width <= 760px) {
  .news-card { grid-template-columns: minmax(0, 1fr); }
  .news-card img, .news-card .ph { order: -1; height: auto; }
}
.news-list { list-style: none; padding: 0; border-top: 1px solid var(--c-line); }
.news-list li {
  display: grid;
  grid-template-columns: 110px 90px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--c-line-soft);
  align-items: baseline;
}
.news-list .date { font-size: var(--fs-note); font-weight: var(--fw-bold); color: var(--c-sub); }
.news-list .title { font-size: var(--fs-lead); font-weight: var(--fw-bold); }
.tag { font-size: var(--fs-note); border: 1px solid var(--c-line); padding: 0 8px; justify-self: start; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-top: 8px; }

/* トップの代表紹介：肩書（上）→ 名前 → ふりがな（下）。肩書とふりがなは小さく1行ずつ */
.founder-role, .founder-kana { display: block; font-weight: var(--fw-regular); }
.founder-role { margin-bottom: 8px; }
.founder-kana { margin-top: 8px; }
/* トップの代表紹介：経歴の抜粋（年＋1行、線で区切る） */
.founder-history-title { margin: var(--sp-title) 0 8px; font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: var(--lh-head); }
.founder-history { list-style: none; padding: 0; border-top: 1px solid var(--c-line-soft); }
.founder-history li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-line-soft);
}
.founder-history .year { font-weight: var(--fw-bold); }
.founder-history .year + span { font-size: var(--fs-note); } /* 説明文は本文より1段階小さく */
@media (width <= 760px) {
  .founder-history li { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* 会社概要の代表紹介：実績の箇条書き */
.founder-works { margin-top: 8px; }
.founder-works li + li { margin-top: 8px; }
.founder-top { align-items: center; }
@media (width <= 760px) {
  .news-list li { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
  .news-list li .title { grid-column: 1 / -1; }
}
.tabs { display: flex; gap: 0; margin-bottom: 24px; flex-wrap: wrap; }
.tabs button { border: 1px solid var(--c-line); padding: 8px 16px; margin-right: -1px; background: var(--c-bg); color: var(--c-text); font: inherit; cursor: pointer; }
.tabs button.on { background: var(--c-text); color: var(--c-bg); border-color: var(--c-text); }

/* CTA */
.cta { text-align: center; }
.cta h2 { font-size: var(--fs-h1); margin-bottom: var(--sp-head); }
/* トップのボタン（お問い合わせ・「〜へ」）：乗せたら白黒を反転、押している間は少し縮む（押し込んだ感じ）。
   縮みは transform ではなく scale で（ひらめきの「会社概要へ」が出てくる演出の transform とぶつけない） */
/* 下層ページ（.page-sub）も同じ動き。押せない送信ボタンは除く（:where で包んで強さは元のまま。ひらめきの「会社概要へ」の出方や、動きを減らす設定を上書きしない） */
:is(.page-top, .page-sub) main :is(.btn, .more):where(:not([disabled])) { transition: background-color 150ms ease-out, color 150ms ease-out, scale 150ms ease-out; }
:is(.page-top, .page-sub) main :is(.btn, .more):where(:not([disabled])):is(:hover, :focus-visible) { background: var(--c-text); color: var(--c-bg); }
:is(.page-top, .page-sub) main :is(.btn, .more):where(:not([disabled])):active { scale: .96; }
.page-top main .product .more:is(:hover, :focus-visible) { border-color: var(--c-bg); } /* 黒い背景の上では、反転したボタンが溶けないように枠を白に */
@media (prefers-reduced-motion: reduce) { :is(.page-top, .page-sub) main :is(.btn, .more) { transition-duration: 0.01ms; } }

/* 表 */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 8px; text-align: left; vertical-align: top; }
.data-table th { width: 30%; font-weight: 700; background: var(--c-fill); }
@media (width <= 760px) {
  .data-table th, .data-table td { display: block; width: 100%; }
}

/* 箇条書き */
.list { padding-left: 1.4em; }
.list li + li { margin-top: 4px; }
.timeline { list-style: none; padding: 0; border-left: 2px solid var(--c-line); }
.timeline li { padding: 0 0 16px 16px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; background: var(--c-bg); border: 2px solid var(--c-text); border-radius: 50%; }

/* MVV */
.mvv dt { font-size: var(--fs-note); color: var(--c-sub); margin-top: 24px; }
.mvv dt:first-child { margin-top: 0; }
.mvv dd { margin: 4px 0 0; font-size: var(--fs-h3); line-height: var(--lh-head); }
.mvv dd ol { font-size: var(--fs-body); font-weight: 400; padding-left: 1.4em; }

/* 事業ブロック */
.biz-sub { border-left: 3px solid var(--c-line); padding-left: 12px; margin-top: var(--sp-title); }
.biz-sub h3 { margin-bottom: 4px; }

/* 記事 */
.article { max-width: 760px; }
.article .meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.article h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-title); }
.article .body p { margin-top: 16px; }
.article .body h2 { margin-top: 48px; }

/* フォーム */
.form { max-width: 720px; }
.field { margin-top: 24px; }
.field label, .field .lbl { display: block; font-weight: 700; margin-bottom: 8px; }
.req, .opt { font-size: var(--fs-note); font-weight: 400; margin-left: 8px; color: var(--c-sub); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--c-line);
  padding: 12px;
  font: inherit;
  font-size: var(--fs-body);
  background: var(--c-bg);
  color: var(--c-text);
  border-radius: 0;
}
.field textarea { min-height: 160px; }
.check { display: flex; gap: 8px; align-items: flex-start; }
.check input { margin-top: 8px; }
.submit-row { margin-top: 32px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.form [hidden] { display: none; } /* 送信後に欄とボタンを隠す（.btn の display より強くする） */
/* 送信の結果（contact-form.js が文言と data-state を入れる）。出るときに薄く浮かび上がる */
.form-status { color: var(--c-sub); animation: form-status-in 150ms ease-out; }
.form-status[data-state="done"], .form-status[data-state="error"] { color: var(--c-text); font-weight: var(--fw-bold); }
@keyframes form-status-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .form-status { animation-duration: 0.01ms; } }

/* ポリシー */
.policy { font-size: var(--fs-body-sub); line-height: var(--lh-body2); }
.policy h2 { font-size: var(--fs-body); font-weight: var(--fw-medium); margin: 32px 0 8px; }
.policy p + p, .policy p + ul, .policy ul + p { margin-top: 12px; }

.card .ph + h3 { margin-top: 16px; }
a.node { display: block; text-decoration: none; }
a.node:hover { border-color: var(--c-text); }

/* 余白ユーティリティ */
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 16px; }
.mt-l { margin-top: 32px; }

/* 代表メッセージの一言 */
.quote { font-size: var(--fs-h2); }

/* 実画像（ロゴ・代表写真） */
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 20px; width: auto; }
.photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border: 1px solid var(--c-line); }

/* トップだけ：各セクションを1画面ぶんの高さにし、画像は画面の端まで（フルブリード） */
/* 横にはみ出したもの（右下の雲など）はここで切る。body ではなく main に付けるのは、
   body の overflow はブラウザが「画面（ビューポート）の指定」として横取りし、body 自身は切らなくなるため
   （切るつもりが、どこも切らずに右へスクロールできる状態になる）。clip は hidden と違ってスクロールの枠を作らないので、
   中の sticky（事業内容・プロダクト・舞台）は画面に貼り付いたまま効く */
.page-top main { overflow-x: clip; }
/* トップ：画面の外（Mac で端を越えて引っぱったときに見える部分）を、上ではヒーローと同じ黒に。ページ本体は body の白のまま */
html:has(.page-top) { background: var(--c-text); }
/* 下半分までスクロールしたら白に戻す（main.js が .is-lower を付ける）。一番下で引っぱったときは白が見える */
html.is-lower:has(.page-top) { background: var(--c-bg); }
.page-top main .sec {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-top main .sec > .container { width: 100%; }
/* 中身をカードの幅いっぱいに使う（左右は --gutter だけ空ける） */
.page-top .container-full { max-width: none; }
/* 見出しは左端から、中身は Euthopia のカードと同じ幅（最大 --max-wide・中央寄せ）にそろえる */
.page-top .wide { max-width: var(--max-wide); margin-left: auto; margin-right: auto; }
/* トップのプロダクト：白地に見出し → クリームの角丸カード（名前 → 左に画像・右に本文とリンク）。画像の下はカードから少しはみ出す */
/* セクション全体は真っ黒・白文字。カードは白・黒文字 */
.page-top main .sec.product {
  background: var(--c-text);
  color: var(--c-bg);
  border-bottom: 0;
  /* 見出しの高さを事業内容（上から --sp-head）にそろえる。中央寄せにしない */
  padding-top: var(--sp-head);
  min-height: calc(100svh + var(--sp-section) + var(--cut-slant) / 2); /* 黒を1画面より少し長くし、白（代表紹介）に変わる前に間を持たせる。貼り付く長さは事業内容側で決まるので影響しない */
  /* 下端は右下がりの斜めに切る（左端が --cut-slant ぶん高い）。切った三角の半分だけ黒を延ばし、代表紹介を半分引き上げて、黒と白の量は真っすぐのときと同じにする */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut-slant)));
  justify-content: flex-start;
}
.product .sec-head { margin-bottom: 32px; }
.product .sec-head .display { color: var(--c-bg); }
/* カードの幅は最大 1200px（--max-wide）。画面が狭いときは左右にガターを残して一緒に縮む */
.product-card {
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--max-wide);
  margin: 0 auto var(--sp-head);
  padding-top: 32px;
  background: var(--c-bg);
  color: var(--c-text);
  border-radius: var(--radius-card);
}
/* 左に画像（600px）、右に本文とリンク（画像の上端にそろえる）。画像の下はカードから少しはみ出す */
.product-body {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  margin-bottom: calc(var(--sp-head) * -1); /* 画像の下をカードからはみ出させる（画像そのものにかけると揃えがずれるため、外側にかける） */
}
/* 本文の下のリンクは、本文に対して左右の中央に置く */
/* 画像はふたの右に透明な余白（幅の約 9%）があるので、本文をその中へ --sp-title ぶん食い込ませてふたに近づける（本文は画像の上の方に収まるので、横に広い本体とは重ならない） */
/* 上端は画像の上端から本文1行分（--fs-body × --lh-body）下げる */
.product-text { display: flex; flex-direction: column; margin-left: calc(var(--sp-title) * -1); margin-top: calc(var(--fs-body) * var(--lh-body)); }
.product-text .more { align-self: center; }
.product-img {
  display: block;
  width: 100%;
  height: auto;
}
/* スマホは縦並び：本文とリンク → 画像（画像の下をはみ出させるため最後に置く） */
@media (width <= 760px) {
  .product-body { display: flex; flex-direction: column; gap: var(--sp-title); }
  .product-text { order: -1; margin-left: 0; margin-top: 0; }
}

/* トップの代表：上に文章（左）と写真（右）を一塊（2:1）、その下に経歴。全体の幅は最大 --max-narrow で中央に。スマホでは写真 → 文章 → 経歴の順 */
@media (width > 760px) {
  .split-photo-right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.split-photo-right .photo, .split-photo-right .photo-flip { order: 1; }
.page-top .photo { border: 0; border-radius: var(--radius-card); }
@media (width <= 760px) {
  .split-photo-right .photo, .split-photo-right .photo-flip { order: 0; }
}
.page-top main #founder { padding-top: calc(var(--sp-section) * 2); margin-top: calc(var(--cut-slant) / -2); } /* 黒から白に変わったあと、中身までの間を広めに。引き上げはプロダクトの斜めの分 */
.page-top .founder { max-width: var(--max-narrow); margin-left: auto; margin-right: auto; }
.page-top #founder .sec-head { justify-content: center; } /* 見出し（Founder 代表紹介）は中央に */
.page-top .founder .founder-history-title { margin-top: 64px; } /* 上の塊（文章と写真）と経歴の間 */
.page-top .founder > .more { display: table; margin-left: auto; margin-right: auto; } /* ボタンは左右の中央に */
/* 代表写真の隠し要素：ホバー（スマホはタップ・キーボードはフォーカス）で横に裏返り、裏は写真の背景に近いグレー地にミニバナナとひとこと */
.photo-flip { perspective: 1200px; cursor: pointer; }
.photo-flip-inner { position: relative; transform-style: preserve-3d; transition: transform 600ms cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .photo-flip:hover .photo-flip-inner { transform: rotateY(180deg); }
}
.photo-flip:focus-visible .photo-flip-inner, .photo-flip.is-flipped .photo-flip-inner { transform: rotateY(180deg); }
.photo-flip .photo, .photo-back { backface-visibility: hidden; }
.photo-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--c-fill-strong); /* 写真の背景（明るいグレー）に近い色 */
  color: var(--c-text);
  border-radius: var(--radius-card);
  text-align: center;
}
.mini-banana { display: block; width: 60%; aspect-ratio: 1; }
.photo-back-text { font-size: var(--fs-note); line-height: 1.6; }
/* 裏の「バナナモード：OFF」：押したくなるようにボタンの形（押す所は写真全体＝founder-flip.js）。ひとことより目立たない小さめ。乗せたら黄色 */
.photo-back-mode {
  border: 1px solid var(--c-text);
  border-radius: var(--radius-pill);
  padding: 4px 16px;
  background: var(--c-bg);
  font-size: var(--fs-note);
  font-weight: var(--fw-black);
  line-height: 1.5;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}
.photo-back-mode:hover { background: var(--c-banana); }
/* バナナモードの確認（banana-mode.js が作る <dialog>）：白地・角丸、後ろを薄く暗く。開くときは下からふわっと */
.banana-dialog { border: 0; padding: 0; max-width: calc(100vw - 32px); border-radius: var(--radius-card); background: var(--c-bg); color: var(--c-text); }
.banana-dialog[open] { animation: banana-in 250ms cubic-bezier(.16, 1, .3, 1); }
.banana-dialog::backdrop { background: rgb(0 0 0 / .4); }
.banana-dialog form { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 48px; text-align: center; }
.banana-dialog-text { font-size: var(--fs-h2); font-weight: var(--fw-bold); }
.banana-dialog-note:empty { display: none; } /* 終わるときは出さない */
.banana-dialog-note { margin-top: -16px; max-width: 28em; }
.banana-dialog-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.banana-dialog .btn { cursor: pointer; }
.banana-dialog .btn[value="ok"] { background: var(--c-text); color: var(--c-bg); } /* 決める方は黒地。乗せたら白地に反転 */
.page-top main .banana-dialog .btn[value="ok"]:is(:hover, :focus-visible) { background: var(--c-bg); color: var(--c-text); }
/* バナナモード：全画面に開いたメニュー（会社情報）の背景に、バナナの房を大きく置く。文字を邪魔しないよう薄く、右下に寄せる */
.is-banana .sb-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/banana/banana-bunch.webp") right 4% bottom 6% / min(46%, 520px) auto no-repeat;
  opacity: .22;
  pointer-events: none;
}
.is-banana .sb-company, .is-banana .sb-legal { position: relative; } /* 文字はバナナより手前に */
@media (width <= 760px) {
  .is-banana .sb-full::before { background-size: min(70%, 320px) auto; background-position: right -8% bottom 4%; opacity: .16; }
}
/* バナナモードの間だけ左上に出す「OFF」ボタン（banana-mode.js が作る）。押すとその場で通常に戻る。メニュー（.sb）と同じ層 */
.banana-off { display: none; position: fixed; top: 16px; left: 16px; z-index: 30; font-size: var(--fs-note); cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out, scale 150ms ease-out; }
.is-banana .banana-off { display: inline-block; animation: banana-in 250ms cubic-bezier(.16, 1, .3, 1); }
.banana-off:is(:hover, :focus-visible) { background: var(--c-text); color: var(--c-bg); }
.banana-off:active { scale: .96; }
/* バナナモード：お問い合わせのボタンは、乗せたら黒ではなく黄色に（まわりに飛ぶバナナは banana-confetti.js） */
.is-banana .page-top main .cta .btn:where(:not([disabled])):is(:hover, :focus-visible) { background: var(--c-banana); color: var(--c-text); }
.banana-confetti { position: fixed; z-index: 20; pointer-events: none; line-height: 1; will-change: transform, opacity; } /* 粒のキャンバス（4）より手前・メニュー（30）より奥 */
@keyframes banana-in { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  .banana-dialog[open], .is-banana .banana-off { animation-duration: 0.01ms; }
}
/* 画面に入ったら下から順にふわっと出す（founder-reveal.js が .reveal → .is-in を付ける）。動きはひらめきの文字と同じ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms cubic-bezier(.4,0,.2,1), transform 400ms cubic-bezier(.4,0,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
/* ボタン（.btn・.more）は、ふわっと出る動きと、乗せたときの反転・押したときの縮みを両方持つ（後者だけだと出る動きが消える） */
:is(.page-top, .page-sub) main :is(.btn, .more).reveal { transition: opacity 400ms cubic-bezier(.4,0,.2,1), transform 400ms cubic-bezier(.4,0,.2,1), background-color 150ms ease-out, color 150ms ease-out, scale 150ms ease-out; }

/* メニュー（ヘッダー・フッターの代わり）：右上のロゴ＋お問い合わせ → ホバーでページへのリンク → 「‹」かページの一番下で会社情報まで。動きは sidebar.js */
/* 位置・大きさ・角丸は段階とスクロール量から JS で決める（どの段階でもページの上に重なり、本文は押しのけない） */
.sb {
  position: fixed;
  z-index: 30;
  overflow: hidden;
  background: transparent; /* 1段階目は背景なし。開いたら黒（.is-open） */
  color: var(--c-bg);
  transition: opacity .3s ease, visibility .3s ease, background-color .25s ease;
}
.sb.is-open { background: var(--c-text); }
.sb.is-anim { transition: opacity .3s ease, visibility .3s ease, background-color .25s ease, left .35s ease, top .35s ease, width .35s ease, height .35s ease, border-radius .35s ease; }
/* ページの一番上（ヒーロー）では出さない */
.sb.is-off { opacity: 0; visibility: hidden; }
.sb a { text-decoration: none; }
/* リンクのホバー：下線は出さず、少しグレーになって光の帯が左から右へサッと流れる */
:is(.sb-company .ext, .sb-legal) a:hover {
  color: transparent;
  background-image: linear-gradient(100deg, #aaaaaa 0 40%, #ffffff 50%, #aaaaaa 60% 100%);
  background-size: 300% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sb-sheen .6s ease-out;
}
@keyframes sb-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* 上の段：ロゴ、その下に右寄せでお問い合わせ（1段階目はこれだけ）。右上を起点に広がるので、開いても位置は変わらない。「‹」は開いたときだけ左上に出る */
.sb-top { position: absolute; top: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; padding-bottom: 12px; }
.sb-logo {
  display: grid;
  place-items: center;
  height: var(--menu-logo-h);
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
/* お問い合わせはロゴの下、ロゴの文字の右端にそろえる */
.sb-cta {
  flex: none;
  margin-right: 24px;
  padding: 8px 16px;
  line-height: 1.5;
  border-radius: var(--radius-pill);
  background: var(--c-text);
  color: var(--c-bg);
  font-size: var(--fs-note);
  font-weight: var(--fw-black);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
/* 開いたら黒地の上なので白地・黒字に反転 */
.sb.is-open .sb-cta { background: var(--c-bg); color: var(--c-text); }
.sb.is-open .sb-cta:hover { background: var(--c-fill-strong); }
.sb-logo { flex: none; } /* バーの幅が足りなくてもロゴを縮めない */
.sb-logo img { display: block; width: auto; max-width: none; height: 20px; filter: invert(1); } /* 黒のロゴを白に */
/* 1段階目（背景なし）は白で描いて下地との差をとる：白地の上は黒、黒地の上は白に、文字ごとに切り替わる。お問い合わせも白地・黒字で描いて同じく反転させる */
.sb:not(.is-open) { mix-blend-mode: difference; }
.sb:not(.is-open) .sb-cta { background: var(--c-bg); color: var(--c-text); }
/* 会社情報を開く「‹」：開いたときだけ、左端の高さ中央に枠なしで。押せる範囲は縦長に広めにとる */
.sb-more {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 96px;
  margin-top: -48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-line);
  cursor: pointer;
  opacity: var(--more-o, 0);
  transition: color .15s ease-out;
}
.sb-more:hover { color: var(--c-bg); }
.sb-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .35s ease; }
.sb-more svg { transform: rotate(180deg); } /* 左へ広げる「‹」 */
.sb-more[aria-expanded="true"] svg { transform: none; } /* 全画面のときは「›」＝戻す */

/* 2段階目：ページ移動のリンク。右上を起点に広がるので右寄せ。3段階目になっても位置・大きさは変わらない */
.sb-nav {
  position: absolute;
  top: var(--top-h, 104px);
  right: 0;
  width: var(--nav-w, 280px);
  padding: 8px 24px 24px 48px; /* 左は「‹」のぶん空ける */
  opacity: var(--nav-o, 0);
}
.sb-nav ul { list-style: none; padding: 0; text-align: right; }
/* リンクの色：ふだんはグレー、今いるページは白。ホバーすると左から白が満ちていき、外すと引いていく */
.sb-nav a {
  display: inline-block;
  padding: 4px 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  color: transparent;
  background-image: linear-gradient(90deg, var(--c-bg) 0 45%, var(--c-line) 55% 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position .4s cubic-bezier(.4, 0, .2, 1);
}
.sb-nav a:hover, .sb-nav a:focus-visible, .sb-nav a[aria-current="page"] { background-position: 0 0; }
/* 言語の切り替え：ページのリンクの下に小さく2つ並べる。いま見ている言語は白（aria-current="true"）、もう一方はグレー。
   ページのリンクと同じ塗りの仕掛け（左から白が満ちる）をそのまま使う。リンクにしているのは、JS が切れていても切り替わるようにするため */
.sb-nav .lang { margin-top: 16px; display: flex; gap: 12px; justify-content: flex-end; }
.sb-nav .lang a { flex: none; white-space: nowrap; font-size: var(--fs-note); font-weight: var(--fw-regular); }
.sb-nav .lang a[aria-current="true"] { background-position: 0 0; }

/* 3段階目：リンクの左側の空いたところに会社情報。大きさは固定しておき、バーの大きさで見える範囲だけを変える（中身が折り返し直さない） */
.sb-full {
  position: absolute;
  top: 0;
  right: var(--nav-w, 280px);
  width: calc(100vw - var(--menu-inset) * 2 - var(--nav-w, 280px));
  height: calc(100vh - var(--menu-inset) * 2);
  display: flex;
  flex-direction: column;
  align-items: center; /* 中身は左右の余白をそろえて真ん中に */
  padding: 64px;
  border-right: 1px solid #333333;
  opacity: var(--full-o, 0);
  overflow-y: auto;
}
/* ロゴを左、ほかの中身を右の列に。ロゴと中身をひとまとまりで真ん中に（上下は残りの高さの真ん中）。間にグレーの縦線 */
.sb-company { display: grid; grid-template-columns: auto minmax(0, 560px); column-gap: 64px; margin: auto 0; }
.sb-company > * { grid-column: 2; }
.sb-company .logo { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; padding-right: 64px; border-right: 1px solid var(--c-line); }
.sb-company .logo img { height: 32px; width: auto; filter: invert(1); }
.sb-company .addr { margin-top: 0; font-size: var(--fs-lead); }
.sb-company .ext { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; padding: 0; margin-top: 24px; }
.sb-company .ext a { display: inline-block; }
/* コピーライトとプライバシーポリシーは一番下の真ん中に横並び */
.sb-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 64px; color: #cccccc; }
.sb-legal a { color: #cccccc; }

/* ページの一番下（main の最後の余白）：一番下に着いたら、バーが自動で全画面に開く（sidebar.js）。
   「ご相談はお気軽に」のお問い合わせボタンがあるページは、ボタンが画面の上へ消えたところで着くよう sidebar.js が高さを決め直す。ないページは画面の 1/3 */
.sb-tail { height: calc(100vh / 3); }

@media (width <= 760px) {
  /* スマホ：リンクは幅いっぱい、会社情報はその下 */
  .sb-nav { left: 0; width: auto; }
  .sb-full { top: var(--nav-h, 0px); right: 0; left: 0; width: auto; height: auto; align-items: flex-start; padding: 24px; border-right: 0; border-top: 1px solid #333333; }
  .sb-company { display: block; }
  .sb-company .addr { margin-top: 32px; font-size: var(--fs-body); }
  .sb-company .logo { padding-right: 0; border-right: 0; }
  .sb-legal { justify-content: flex-start; margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb, .sb.is-anim, .sb-more svg { transition: none; }
}

/* トップの粒子演出（particle-flow.js）：粒子でセクションをつなぐ */
.pf-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; } /* 事業内容のカード（z-index 1〜3）より上 */
.hero .container, .about .container { position: relative; z-index: 5; }
/* 舞台：ヒーロー（奥）とひらめき（手前）を同じ場所に重ねて画面に貼り付ける。舞台の高さ − 1画面ぶんが演出に使うスクロール量
   （2画面ぶんでヒーロー → ひらめき。延ばすときは particle-flow.js の HOLD と合わせる） */
/* 枠で包むと style.css の「main > .sec」が効かなくなるので、同じ形（1画面ぶんの高さ・中央寄せ）をここで付ける */
.pf-stage > .sec {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pf-stage > .sec > .container { width: 100%; }
/* 貼り付けは particle-flow.js が動いたときだけ（動かなければ普通に縦に並ぶ） */
.pf-stage.is-on { height: 300svh; }
.pf-stage.is-on > .sec { position: sticky; top: 0; }
/* 貼り付けるとセクションごとに重なりの層ができるので、奥から ヒーロー → キャンバス（z-index: 4）→ ひらめき の順に明示する */
.pf-stage.is-on > .hero { z-index: 0; }
.pf-stage.is-on > .about { z-index: 5; }
.pf-stage.is-on > .about { margin-top: -100svh; }
/* ひらめきに切り替わったら奥のヒーローを外し、ひらめきを舞台の先頭に（位置は変わらない） */
.pf-stage.is-about > .hero { display: none; }
.pf-stage.is-about > .about { margin-top: 0; }
/* ひらめき：電球ができあがってから、見出し → 本文1行目 → 2行目 → 3行目 → リンクの順に浮かぶ */
/* 本文は1行ずつ（.ln）。改行の位置は元の <br> と同じ */
.about .ln { display: block; }
/* 上から降りてくる。出るときは1段ずつゆっくり（遅れと長さは .is-in 側）、引っ込めるときはそろってすぐ */
.about.is-intro h2, .about.is-intro .ln, .about.is-intro .more { opacity: 0; transform: translateY(-24px); transition: opacity 300ms ease-out, transform 300ms ease-out; }
.about.is-in h2, .about.is-in .ln, .about.is-in .more { opacity: 1; transform: none; transition-duration: 700ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.about.is-in .ln:nth-child(1) { transition-delay: 350ms; }
.about.is-in .ln:nth-child(2) { transition-delay: 700ms; }
.about.is-in .ln:nth-child(3) { transition-delay: 1050ms; }
.about.is-in .more { transition-delay: 1400ms; }
/* 「会社概要へ」は乗せたときの反転・押したときの縮み（上のトップのボタン）も遅れずに動かす */
.about.is-intro .more { transition-property: opacity, transform, background-color, color, scale; transition-duration: 300ms, 300ms, 150ms, 150ms, 150ms; transition-timing-function: ease-out; }
.about.is-in .more { transition-duration: 700ms, 700ms, 150ms, 150ms, 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1), cubic-bezier(.4,0,.2,1), ease-out, ease-out, ease-out; transition-delay: 1400ms, 1400ms, 0s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) { .about.is-intro .more, .about.is-in .more { transition-duration: 0.01ms; } }
/* サイト内のページから来たとき（particle-flow.js が演出を飛ばす）：ロゴ・アイブロウ・ひらめきの文字を、出る動きなしで最初から出す。描き終えたら .pf-skip は外れる */
.pf-stage.pf-skip .hero-logo, .pf-stage.pf-skip .hero .eyebrow, .pf-stage.pf-skip .about :is(h2, .ln, .more) { transition: none; }

/* 事業内容のカード：絵の場所（.ph）は大きさだけ残して、丸と文字は消す。ここに果物（particle-flow.js）が来る */
.sec-biz .biz-body .ph { background: none; }
/* 「事業内容へ」：本文（最大 36em・中央寄せ）の右端にそろえる */
.sec-biz .biz-body .more { align-self: flex-end; margin-right: max(0px, (100% - 36 * var(--fs-body)) / 2); } /* 36em は本文の文字サイズで測る */

/* ひらめき → 事業内容の流れ（particle-flow.js）：ページの中に置く縦長のキャンバス。位置と高さは JS が決める。ひらめきの文字（z-index 5）と事業内容のカードの下 */
.pf-stream { position: absolute; left: 0; top: 0; height: 0; width: 100%; z-index: 0; pointer-events: none; } /* top・height は JS が決める。先に 0 を入れておくのは、入れないとキャンバスが素のまま（高さ 150px）ページの一番下にぶら下がり、ページが下へ伸びてしまうため */
/* 流れは事業内容のカードの後ろを通す：事業内容の中身（見出し・カード）を流れより手前に出す。
   PC はもともと画面に貼り付く（sticky）ので重なり順だけ、貼り付かないとき（スマホ・スクロール連動のないブラウザ）は位置も付ける */
.sec-biz > .container { z-index: 1; }
@media (width <= 1024px) { .sec-biz > .container { position: relative; } }
@supports not (animation-timeline: view()) { .sec-biz > .container { position: relative; } }

/* 事業内容：カードごとの果物のキャンバス（particle-flow.js）を、絵の場所いっぱいに置く */
.sec-biz .biz-body .ph { position: relative; }
.pf-card { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* PC：カードの中身は開いたときの幅に固定し、透明にしない（上の .biz-body の開閉より優先）。
   カードが閉じても中身は動かず、上から重なってくる次のカードに隠れていく。開いたときの幅＝カードの並びの幅（画面の 3/4）− 帯 3本 */
@media (width > 1024px) {
  .sec-biz .biz-panel .biz-body { flex: none; width: calc((100vw - var(--gutter) * 2) * 0.75 - 64px * 3); opacity: 1; animation: none; }
}

/* プロダクト紹介：中身は粒のキャンバス（particle-flow.js）より手前に出す */
.page-top main .sec.product > * { position: relative; z-index: 5; }
/* 落ちるミニバナナ（product-rain.js）：プロダクトに敷き、中身より奥に。斜めの切り口（clip-path）でいっしょに切れる */
.page-top main .sec.product > .product-rain { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* 右下の雲（product-clouds.js）：プロダクトに敷き、中身より奥に。プロダクトの下端に寄せ、枠の高さの 12% ぶん下へはみ出させる（少しだけ見切れる）。
   はみ出したぶんは、プロダクトの下端の斜めの切り口（clip-path）で切れて、雲が区切りに沈んでいるように見える（右ほど切り口が低いので、左の雲ほど深く切れる）。
   バナナモードでは出さない（代わりにバナナが降る） */
.page-top main .sec.product > .product-clouds {
  --pc-w: min(53.2vw, 871px); /* 44vw・720px の 1.21 倍（1.1 倍を2回） */
  --pc-h: calc(var(--pc-w) * 0.68); /* 元の画面の切り出し（幅 55vw・高さ 60vh）を 1440×900 の画面で見たときの比率 */
  position: absolute; z-index: 0; right: calc(var(--pc-w) * -0.08); bottom: calc(var(--pc-h) * -0.12); /* 右へ枠の幅の 8% はみ出させて、盛り上がった所を右端にかける（右端の上に黒いすき間が出ないように） */
  width: var(--pc-w); height: var(--pc-h); pointer-events: none;
}
@media (width <= 1024px) { .page-top main .sec.product > .product-clouds { --pc-w: 87.1vw; } } /* 72vw の 1.21 倍 */
.is-banana .product-clouds { display: none; }
.product-clouds-defs { position: absolute; width: 0; height: 0; }
/* 雲1つ：輪郭をゆらすフィルター（Euthopia と同じ）。雲ごとに周期と始まりをずらして、ゆっくり上下に浮き沈みする。画面に入っている間だけ動かす */
.product-cloud {
  position: absolute; overflow: visible; filter: url(#pc-wavy); transform-origin: center bottom;
  animation: pc-bob calc(7s + var(--i) * 2s) ease-in-out calc(var(--i) * -2.5s) infinite paused;
  /* スクロールに合わせた左右の動き（product-clouds.js が --pc-shift を 0〜1 で渡す）。浮き沈み（translate）とは別に重ねる */
  transform: translateX(calc(var(--pc-shift, 0) * var(--pc-dist)));
}
/* 右へずれる量：奥ほど小さく（Euthopia の雲が流れ去るときの 奥30・中50 の比）。消えきらない量にとどめる */
.product-cloud.is-far { --pc-dist: 12vw; }
.product-cloud.is-mid { --pc-dist: 20vw; }
.product-clouds.is-playing .product-cloud { animation-play-state: running; }
@keyframes pc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) { .product-cloud { animation: none; } }
/* キャンバスの基準にするため。1024px より広いときは sticky（上の @media）がその役をするので、1024px 以下だけ付ける */
@media (width <= 1024px) {
  .page-top main .sec.product { position: relative; }
}

/* 代表紹介とニュースの間の区切り（banana-band.js）：黒い横長の台形。上の辺は右肩上がり、下の辺は右肩下がりで、左端が細く右端が太い。
   上下の辺の傾きはプロダクトの下端の斜めと同じ（画面の幅で --cut-slant）。左端の高さは --cut-slant の 4 倍、右端は 6 倍。
   中ではプロダクトの背景と同じミニバナナが降っていて、黒い窓からのぞいて見える。バナナの層はスクロールより遅く動く（パララックス） */
.banana-band {
  position: relative;
  height: calc(var(--cut-slant) * 6);
  background: var(--c-text);
  clip-path: polygon(0 var(--cut-slant), 100% 0, 100% 100%, 0 calc(100% - var(--cut-slant)));
}
.banana-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ===== 下層ページ（事業内容・会社概要・ニュース・記事・お問い合わせ・プライバシー）：TOP の部品で、演出なし・シンプルに =====
   body に .page-sub を付けたページだけに効く。TOP（.page-top）には効かない */
/* 本文は 18px（--fs-body-sub）にそろえる。メニューは TOP と同じ大きさのままにするため main の中だけ
   palt：かな・約物を字の形に合わせて詰める（Zen Kaku Gothic New は字面が小さく、そのままだと字間が広く見える） */
.page-sub main { font-size: var(--fs-body-sub); font-feature-settings: "palt"; }
/* 節と節のあいだは余白1つぶん（上下の余白が重ならないように） */
.page-sub main .sec + .sec { padding-top: 0; }
.page-sub .narrow { max-width: var(--max-narrow); }

/* ページの頭：パンくず → 英字（Cinzel）＋日本語ラベル → リード文 */
/* ページの一番上から始める：上は右上のメニューと同じ浮きだけ。パンくずはメニューのロゴと同じ高さの帯に入れて、ロゴと横一列にそろえる */
.page-head { padding-top: var(--menu-inset); }
.page-head .crumbs { min-height: var(--menu-logo-h); align-items: center; margin-bottom: 8px; }
@media (width <= 760px) { .page-head .sec-head .display { max-width: 7em; } .page-head .crumbs { max-width: 45%; margin-left: 0; } } /* スマホは右上のメニューにかからないよう、長い英字（Privacy Policy）とパンくずは折り返す */
.page-head .sec-head { margin-bottom: 0; }
.page-head .sec-head h1:not(.display) { font-size: var(--fs-note); font-weight: var(--fw-medium); line-height: var(--lh-head); }
.page-lead { max-width: var(--max-narrow); margin-top: var(--sp-title); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin-bottom: var(--sp-title); font-size: var(--fs-note); line-height: 1.6; color: var(--c-sub); }
.crumbs li + li::before { content: "／"; margin-right: 8px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* 節の見出し：日本語（太字）の右に小さな英字（Cinzel）。TOP の見出し（英字が大きく日本語が小さい）を裏返した形 */
.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-top: var(--sp-title); margin-bottom: calc(var(--sp-head) / 2); }
.sub-head h2 { font-size: var(--fs-h3); line-height: var(--lh-head); margin: 0; }
.sub-head .en { font-family: var(--ff-display); font-weight: var(--fw-bold); font-size: var(--fs-note); line-height: var(--lh-head); letter-spacing: 0.1em; color: var(--c-sub); }
.sub-head .tentative { flex-basis: 100%; }
/* 節の中の小見出し */
.page-sub .sub-title { font-size: var(--fs-h2); line-height: var(--lh-head); margin: calc(var(--sp-head) / 2) 0 var(--sp-title); }

/* グレーの角丸カード（TOP の事業内容と同じ質感）。枠線なし */
.soft-card { background: var(--c-fill-soft); border-radius: var(--radius-card); padding: calc(var(--sp-head) / 2); }
.soft-card h3 { font-size: var(--fs-body); line-height: var(--lh-head); margin-bottom: 12px; }
.soft-card p { font-size: var(--fs-body-sub); line-height: var(--lh-body2); }

/* 画像の仮枠・写真：枠なし・角丸（TOP と同じ） */
.page-sub .ph { border: 0; border-radius: var(--radius-card); }
.page-sub .photo { border: 0; border-radius: var(--radius-card); }

/* ページ内の目次：ピル型のリンクを横に並べる */
.page-toc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.page-toc .more { margin-top: 0; }

/* 締めのお問い合わせ：TOP と同じ伸びる縦線 → 帯。縦線の上に余白を1つ */
.page-sub .sec-cut { margin-top: var(--sp-section); }
.page-sub .sec-cut + .cta { padding-top: var(--sp-section); }

/* --- 事業内容 --- */
/* 人間 × AI の図（ファーストビュー・目次を兼ねる）：黒いカードの地に、上は白いカード（人間｜Eureka Labo とめぐる矢印｜AI）、下に矢印と3つの領域の白いカード
   黒いカードの地は、代表メッセージの一言・フッターと同じ方眼のメッシュと右上からの光（下の .fc-quote::before, .sb::before の段で共通） */
.biz-map { position: relative; isolation: isolate; overflow: hidden; container-type: inline-size; padding: var(--sp-head); border-radius: var(--radius-card); background: var(--c-text); }
.biz-map::before { --melt: linear-gradient(195deg, rgb(0 0 0 / 0.15) 10%, #000 70%); z-index: -1; } /* メッシュは全体に、光の強い右上ほど溶かす（一言のカードと同じ） */
.biz-map::after { z-index: -1; }
/* 上の白いカード：左右の文字の列が同じ幅になるよう 1fr｜図｜1fr。人間は右寄せで名前 → 項目、AI は左寄せで項目 → 名前（斜めに向かい合う）。
   幅は --max まで使う（--max-narrow 800px だと左右の列が 194px で頭打ちになり、英語版の「Human」が入りきらない） */
.biz-core { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-title); max-width: var(--max); margin: 0 auto; padding: calc(var(--sp-head) / 2); border-radius: var(--radius-card); background: var(--c-bg); }
.core-side ul { list-style: none; padding: 0; font-size: var(--fs-note); line-height: var(--lh-body2); }
/* 「人間（Human）」と「AI」は同じ大きさ・同じ書体。AI 側には lang="en" が付いていて、書体の読み込みに失敗したときに
   別の代替書体を拾いうるので、書体はここで両方にまとめて指定する（片側だけに書くと差が出る） */
.core-name { font-size: var(--fs-h1); font-weight: var(--fw-black); line-height: var(--lh-head); font-family: var(--ff-ja); overflow-wrap: normal; } /* overflow-wrap: normal … body の anywhere を打ち消す。英語版の「Human」が Huma / n と割れないように */
.core-human { text-align: right; }
.core-human .core-name { margin-bottom: var(--sp-title); }
.core-ai { display: flex; flex-direction: column-reverse; }
.core-ai .core-name { margin-top: var(--sp-title); }
/* まんなか：めぐる2本の矢印（上は右→左、下は左→右）の中に、薄い ✕ を敷いてロゴと一言 */
.core-center { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 300px; aspect-ratio: 1; }
.core-cycle { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--c-line); stroke-width: 4; color: var(--c-line); }
.core-cycle marker path { fill: currentColor; stroke: none; }
.core-x { position: absolute; inset: 0; margin: auto; width: 128px; height: 128px; }
.core-x::before, .core-x::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 24px; margin-top: -12px; border-radius: var(--radius-pill); background: var(--c-fill-strong); rotate: 45deg; }
.core-x::after { rotate: -45deg; }
.core-logo, .core-tag { position: relative; }
.core-logo { width: 200px; height: auto; }
.core-tag { font-size: var(--fs-note); font-weight: var(--fw-bold); line-height: var(--lh-head); }
/* 上のカードから下の3枚へ分かれる矢印（左は左下、まんなかは下、右は右下へ） */
.biz-arrows { justify-items: center; padding: var(--sp-title) 0; }
.biz-arrows svg { width: 32px; height: 32px; fill: none; stroke: var(--c-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.biz-arrows svg:first-child { rotate: 45deg; }
.biz-arrows svg:last-child { rotate: -45deg; }
/* 下の3つの領域：白いカード。押すとその節へ */
.biz-index { list-style: none; padding: 0; }
.biz-index a { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; padding: calc(var(--sp-head) / 2); border-radius: var(--radius-card); background: var(--c-bg); text-align: center; text-decoration: none; transition: background-color 150ms ease-out; }
.biz-index a:hover, .biz-index a:focus-visible { background: var(--c-fill); }
.biz-index .num, .area-head .num { font-family: var(--ff-display); font-weight: var(--fw-bold); color: var(--c-sub); }
.biz-index .num { font-size: var(--fs-note); line-height: var(--lh-head); }
.biz-index h3 { font-size: var(--fs-body); line-height: 1.6; margin: 0; }
.biz-index p { font-size: var(--fs-body-sub); line-height: var(--lh-body2); color: var(--c-sub); }
/* 黒いカードの中が 960px より狭いとき（右にメニューぶん空けるので、画面幅だけでは決まらない。カードの中の幅で見る）は、
   左右の列に「人間」「Human」が入りきらないので、
   上のカードを縦に積み（人間 → 図 → AI）、下の3枚も縦に積んで、矢印はまんなかの1本だけ。
   名前と項目は横に並べる：人間は名前の右に項目、AI は名前の左に項目。項目は名前の側に寄せて、上下で向かい合わせる */
@media (width <= 760px) { .biz-map { padding: calc(var(--sp-head) / 2) var(--gutter); } }
@container (max-width: 960px) {
  .biz-core { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .biz-index { grid-template-columns: minmax(0, 1fr); }
  .core-human, .core-ai { display: flex; align-items: center; gap: var(--sp-title); }
  .core-human { text-align: left; }
  .core-ai { flex-direction: row-reverse; text-align: right; }
  .core-human .core-name, .core-ai .core-name { margin: 0; } /* 横並びなので、縦に積むための余白は gap に任せる */
  .core-center { width: min(300px, 100%); }
  .biz-arrows svg:not(:nth-child(2)) { display: none; }
}
/* 各領域：番号を見出しの左に */
.area-head .num { font-size: var(--fs-h3); line-height: var(--lh-head); }
/* 01〜03 の節の頭（ファーストビューと01・節と節の境目）：中身の幅の 1/5 の短い横線を真ん中に。線の上は余白（--sp-section）、線の下も同じだけ空ける */
.page-sub :is(#product, #development, #consulting) > .container::before { content: ""; display: block; width: 20%; height: 1px; margin: 0 auto var(--sp-section); background: var(--c-line-soft); }
/* 横線はスクロールに合わせて真ん中から左右へ伸びる：画面の下から入ってきたら伸び始め、画面のまん中に来たところで伸びきる（縦の線の sec-cut-grow の横向き）。
   この機能が使えないブラウザと、動きを減らす設定では、最初から伸びた線のまま。ふわっと出る動きは business-reveal.js */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-sub :is(#product, #development, #consulting) > .container::before { animation: line-grow-x linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes line-grow-x { from { scale: 0 1; } to { scale: 1 1; } }
.area-card { margin-top: var(--sp-title); } /* 取り組み・できること：本文の下（画像の横）にグレーのカードで */
.area-card .list { list-style: none; padding-left: 0; } /* 取り組み・できることの項目は点なし */
/* 01 の取り組み：左に小さめの説明、右にサービス名のボタン（上下の中央） */
.area-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-title); }
.area-items li + li { margin-top: var(--sp-title); }
.area-items .item-desc { font-size: var(--fs-note); line-height: var(--lh-body2); }
.area-items .more { margin: 0; }
.split-r > div > .area-head:first-child { padding-top: 0; } /* 見出しを文章の列の頭に入れたので、上の余白をなくして画像の上端と見出しの上端をそろえる */
/* 02 は左右を入れ替え：画像（細い列）が左、見出しと文章（広い列）が右。スマホは縦に積み、ほかの節と同じく文章 → 画像の順 */
.split-r.is-flip { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.split-r.is-flip > :last-child { order: -1; }
@media (width <= 760px) {
  .split-r.is-flip { grid-template-columns: minmax(0, 1fr); }
  .split-r.is-flip > :last-child { order: 0; }
}
@media (prefers-reduced-motion: reduce) { .biz-index a { transition-duration: 0.01ms; } }
/* 事業内容のファーストビュー：ページの見出しの下に、画面幅いっぱい（左右はメニューと同じ浮き）の黒いカード（中身は上の人間 × AI の図）。見出し＋カードで最低1画面
   説明文は白でカードの中の一番上・中央に、その下に図を置く */
.page-full .page-head { display: flex; flex-direction: column; min-height: 100svh; }
.page-full .page-head > .container { margin-inline: 0; } /* 縦並びの flex の中では左右の auto の余白で中身の幅に縮んで真ん中に寄るので、外して幅いっぱい（見出しは左上）に戻す */
.biz-hero { flex: 1; display: flex; flex-direction: column; justify-content: center; margin: var(--sp-title) var(--menu-inset) var(--menu-inset); }
.biz-hero .biz-core { width: 100%; } /* 縦並びの flex の中で左右 auto の余白だと中身の幅に縮むので、幅いっぱい（最大 --max-narrow）に */
.biz-hero .page-lead { max-width: var(--max-narrow); margin: 0 auto var(--sp-head); text-align: center; text-wrap: balance; color: var(--c-bg); } /* 説明文だけ黒い地の上に白で（白いカードの中の文字は黒のまま） */
/* 自社プロダクトの画像：黒い角丸のカードに Euthopia のノートパソコンを載せる（TOP のプロダクト紹介と同じ画像） */
.product-shot { background: var(--c-text); border-radius: var(--radius-card); padding: var(--sp-title); }
.product-shot img { display: block; width: 100%; height: auto; }
/* 画像そのものをカードに：角を丸めて切り抜くだけ（余白・地の色なし） */
.shot-card { aspect-ratio: 3 / 4; border-radius: var(--radius-card); overflow: hidden; } /* 縦長（3:4）に切り抜く */
.shot-card img { display: block; width: 100%; height: 100%; object-fit: cover; } /* 縦横比の合わない画像ははみ出た分を切る */
#product .shot-card img { object-position: 60% 50%; } /* バーチャルオフィス（横長）は左右を切り、中央やや右（会議室〜My Agent のあたり）を残す */
#consulting .shot-card img { object-position: 33% 50%; } /* 03 の写真（横長）は左から 33% の位置を基準に切る（左右の切れる量が 1:2） */

/* --- 会社概要 --- */
/* ミッション・ビジョン・バリュー：カードの中で、項目名（左）と中身（右）の2列 */
.page-sub .mvv { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: var(--sp-title) var(--sp-title); align-items: baseline; }
.page-sub .mvv dt { margin: 0; font-weight: var(--fw-medium); }
.page-sub .mvv dd { margin: 0; font-weight: var(--fw-bold); }
.page-sub .mvv dd ol { margin: 0; line-height: var(--lh-body); }
/* 代表メッセージ：一言を大きく、名前は写真の下 */
.page-sub .quote { font-size: var(--fs-quote); line-height: 1.6; margin-bottom: calc(var(--sp-head) / 2); } /* 写真の右の列の頭に。下の文章との間は、カードの上端からの余白（カードの内側の余白）と同じ */
.msg-name { margin-top: 12px; font-size: var(--fs-body); line-height: var(--lh-head); }
.msg-name .note { display: block; margin-top: 8px; font-weight: var(--fw-regular); }
.msg-sign { text-align: right; }
/* 署名：本文から間を空け、肩書きは小さくグレー、名前は大きく太く（2段） */
#message .msg-sign { margin-top: calc(var(--sp-head) / 2); }
.msg-sign-role, .msg-sign-name { display: block; }
.msg-sign-role { font-size: var(--fs-body2); color: var(--c-sub); }
.msg-sign-name { margin-top: 8px; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-head); }
/* 代表紹介：名前の段 → 要約 → 歩み（TOP の「経歴抜粋」と同じ形）→ 実績のカード → 技術のタグ */
.profile-name { font-size: var(--fs-h2); line-height: var(--lh-head); margin-bottom: var(--sp-title); }
.profile-name .note { display: block; margin-top: 8px; font-weight: var(--fw-regular); }
.page-sub .founder-history li { grid-template-columns: 7em minmax(0, 1fr); align-items: baseline; padding: 12px 0; }
.page-sub .founder-history .year + span { font-size: var(--fs-body-sub); line-height: var(--lh-body2); }
.page-sub .founder-history .year { line-height: var(--lh-body2); }
@media (width <= 760px) {
  .page-sub .founder-history li { grid-template-columns: minmax(0, 1fr); }
}
/* 技術：ピル型のタグ */
.page-sub .tags .tag { border-radius: var(--radius-pill); padding: 4px 12px; border-color: var(--c-line-soft); }
/* 会社概要の表：カードにせず、中身の列にだけ下線。見出し列はグレー文字で線なし */
.page-sub .data-table { line-height: var(--lh-body2); }
@media (width > 1024px) { .page-wide .data-table { width: auto; } } /* 表は中身の長さの幅に（右へ寄せるのは下の線の段で） */
.page-sub .data-table th, .page-sub .data-table td { padding: 16px 16px 16px 0; }
.page-sub .data-table td { border-bottom: 1px solid var(--c-line-soft); }
.page-sub .data-table th { width: 10em; background: none; color: var(--c-sub); font-weight: var(--fw-medium); }
/* 試し：会社概要の表（PC）。表は中身の列の右に寄せ、その左に縦のグレーの線。
   中身の列を [空き 3][線＋空き 2][表] に分ける。見出し〜線：線〜項目名 がおよそ 2：1 になる（見出しの列との間のぶんを足して、3：2 で分ける） */
@media (width > 1024px) {
  .page-wide #data .side-body { display: flex; }
  .page-wide #data .side-body::before { content: ""; flex: 3 1 0; }
  .page-wide #data .side-body::after { content: ""; order: 1; flex: 2 1 0; min-width: var(--sp-title); border-left: 1px solid var(--c-line-soft); } /* 狭い画面でも線と項目名の間は最低 --sp-title 空ける */
  .page-wide #data .data-table { order: 2; flex: 0 1 auto; }
}
@media (width <= 760px) {
  .page-sub .data-table th { width: 100%; padding-bottom: 0; }
  .page-sub .data-table td { padding-top: 4px; }
  .page-sub .mvv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .page-sub .mvv dd + dt { margin-top: var(--sp-title); }
}

/* --- ニュース --- */
/* 種別：ピル型（見た目だけ） */
.page-sub .tabs { gap: 8px; }
.page-sub .tabs button { margin-right: 0; padding: 4px 16px; border-color: var(--c-line-soft); border-radius: var(--radius-pill); font-size: var(--fs-note); line-height: 1.6; }
.page-sub .tabs button.on { border-color: var(--c-text); }
/* 一覧：日付・種別（ピル）・タイトル。タイトルは本文の大きさの太字 */
.page-sub .tag { border-radius: var(--radius-pill); padding: 0 12px; border-color: var(--c-line-soft); }
.page-sub .news-list { border-top-color: var(--c-text); }
.news-list li[hidden] { display: none; } /* 種別タブで隠した記事（li の display: grid より強く） */
.page-sub .news-list li { grid-template-columns: 5.5em 5em minmax(0, 1fr); gap: 16px; padding: var(--sp-title) 16px; }
.page-sub .news-list .title { font-size: var(--fs-body); line-height: 1.6; text-decoration: none; }
/* 記事の行：行全体がリンク（タイトルのリンクを行いっぱいに広げる）。乗せたら行ごと薄いグレーに */
.page-sub .news-list li:has(a.title) { position: relative; transition: background-color 150ms ease-out; }
.page-sub .news-list a.title::after { content: ""; position: absolute; inset: 0; }
.page-sub .news-list li:has(a.title:is(:hover, :focus-visible)) { background: var(--c-fill-soft); }
@media (prefers-reduced-motion: reduce) { .page-sub .news-list li:has(a.title) { transition-duration: 0.01ms; } }
@media (width <= 760px) {
  .page-sub .news-list li { grid-template-columns: auto minmax(0, 1fr); }
}
/* 記事：中央の読む列。日付・種別 → タイトル → アイキャッチ → 本文 */
.page-sub .article, .article-crumbs { max-width: var(--max-narrow); margin-left: auto; margin-right: auto; } /* パンくずは記事の外（読み込み中も見えるように） */
.page-sub .article h1 { font-size: var(--fs-h3); line-height: 1.6; margin-bottom: calc(var(--sp-head) / 2); }
.page-sub .article .ph, .page-sub .article .cover { width: 100%; height: auto; border-radius: var(--radius-card); }
.page-sub .article .body { margin-top: calc(var(--sp-head) / 2); }
.page-sub .article .body h2 { font-size: var(--fs-h2); line-height: 1.6; margin-top: var(--sp-head); }
.page-sub .article .body img { width: 100%; height: auto; border-radius: var(--radius-card); }
.page-sub .article .back { display: table; margin: var(--sp-head) auto 0; }

/* --- お問い合わせ --- */
.contact-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; max-width: var(--max-narrow); }
.contact-mail p { font-size: var(--fs-body-sub); }
.contact-mail a { font-weight: var(--fw-bold); }
.page-sub .form { max-width: var(--max-narrow); }
.page-sub .field { margin-top: var(--sp-title); }
.page-sub .field:first-child { margin-top: 0; }
.page-sub .field input[type="text"], .page-sub .field input[type="email"], .page-sub .field input[type="tel"], .page-sub .field select, .page-sub .field textarea {
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  background: var(--c-fill-soft);
  padding: 12px 16px;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.page-sub .field :is(input, select, textarea):focus { outline: none; border-color: var(--c-text); background: var(--c-bg); }
.page-sub .req, .page-sub .opt { display: inline-block; margin-left: 12px; padding: 0 8px; border-radius: var(--radius-pill); line-height: 1.6; vertical-align: middle; }
.page-sub .req { background: var(--c-text); color: var(--c-bg); }
.page-sub .opt { border: 1px solid var(--c-line-soft); }
.page-sub .check { align-items: center; font-weight: var(--fw-regular); }
.page-sub .check input { width: 1em; height: 1em; margin: 0; accent-color: var(--c-text); }
.page-sub .submit-row { flex-direction: column; justify-content: center; margin-top: calc(var(--sp-head) / 2); }
@media (prefers-reduced-motion: reduce) { .page-sub .field :is(input, select, textarea) { transition-duration: 0.01ms; } }

/* --- プライバシーポリシー --- */
.page-sub .policy { max-width: var(--max-narrow); }
.page-sub .policy h2 { padding-top: var(--sp-title); border-top: 1px solid var(--c-line-soft); margin: calc(var(--sp-head) / 2) 0 12px; font-weight: var(--fw-bold); line-height: var(--lh-head); }
.page-sub .policy .soft-card { margin-top: var(--sp-title); }
.page-sub .policy .soft-card p { font-size: inherit; line-height: inherit; }
.policy-date { margin-top: calc(var(--sp-head) / 2); text-align: right; }

/* --- 試し：見出し左・中身右のレイアウト（body に .page-wide を付けたページだけ。いまは会社概要） ---
   ブラウザの幅いっぱいを使い（左右は --gutter だけ空ける）、ページの見出しは TOP のセクション見出しと同じく左端から。
   節は、見出しを左の列・中身（.side-body）を右の列に並べる。1024px 以下は見出しを中身の上に積み、ナビは中身の上に重ねる */
@media (width > 1024px) { :is(.page-wide, .page-full) main .container { max-width: none; } } /* 2カラムのときだけ幅いっぱいを使う。1024px 以下は他の下層ページと同じ中央寄せ（--max）にそろえる */
.page-wide main .sec > .container { display: grid; grid-template-columns: var(--menu-nav-w) minmax(0, 1fr); gap: 0 var(--menu-inset); align-items: start; } /* 見出しの側は右と同じ 264px（16＋232＋16）で固定、中身だけが伸び縮みする */
.page-wide .sub-head { padding-top: 0; margin-bottom: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
.page-wide .sub-head .en { order: -1; color: var(--c-line); } /* 英字（薄いグレー）を上の段、日本語を下の段に */
/* 代表紹介は節ごと薄いグレーの地に。上の節と地の色が分かれるので、上の余白も戻す */
.page-wide #founder { background: var(--c-fill-soft); padding-top: var(--sp-section); }
.page-wide #history { padding-top: var(--sp-section); } /* これまでの歩みは白い地。上の代表紹介（グレー）と地の色が分かれるので、上の余白を戻す */
@media (width > 1024px) { .page-wide #history .side-body { padding-top: calc((var(--fs-note) + 8px + var(--fs-h3)) * 2); } } /* 中身は見出し（英字 → 8px → 日本語）の高さの2つぶん下げて始める。1024px 以下は見出しの下に積むので不要 */
/* メッセージ〜名前・紹介文は白い角丸のカードに（灰色の地から浮かせる） */
.founder-card { background: var(--c-bg); border-radius: var(--radius-card); padding: calc(var(--sp-head) / 2); }
/* 代表メッセージの3枚：左に写真（2段ぶんの高さいっぱい）、右に一言のカード → メッセージと署名のカード。スマホは縦に積む */
.founder-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-title); }
.fc-photo { grid-row: span 2; }
.fc-photo .photo { height: 100%; aspect-ratio: auto; }
.fc-quote { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--c-text); color: var(--c-bg); } /* 一言のカードは黒地に白文字。文字のかたまりをカードの中央に */
/* 一言のカードの地：TOP のヒーローと同じ方眼のメッシュ（動きなし）をカード全体に。四辺の近く（--sp-head / 2）だけ透明に消して、辺とはつなげない。
   光は右上から差して端へ消える。光の強いところではメッシュも溶けて、光と一体に見せる */
/* 方眼のメッシュと右上からの光（一言のカードとフッターで共通）。見える範囲は --melt で決める（195deg＝右上から差す光と同じ角度） */
.fc-quote::before, .sb::before, .biz-map::before, .sec-biz .biz-body::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgb(255 255 255 / 0.14) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 255 255 / 0.14) 1px, transparent 1px);
  background-size: calc(var(--sp-head) / 2) calc(var(--sp-head) / 2); background-position: right -1px top -1px;
  --fade: calc(var(--sp-head) / 2);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), var(--melt);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), var(--melt);
  mask-composite: intersect; }
.fc-quote::after, .sb::after, .biz-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(195deg, rgb(255 255 255 / 0.16), transparent 70%); } /* 右上から差す光。光の境目（帯）が横に寝た斜めになる角度。180deg に近いほど境目が水平に、225deg で 45 度、270deg に近いほど垂直に */
/* 一言のカード：メッシュは全体に。光の強い右上ほど線が溶けて薄くなる（完全には消さず、いちばん薄いところで 15% 残す） */
.fc-quote::before { --melt: linear-gradient(195deg, rgb(0 0 0 / 0.15) 10%, #000 70%); }
/* フッター（メニューの全画面）：逆に、メッシュは左下の 1/4 ほどにだけ見せる。全画面のときだけ出す（--full-o は sidebar.js）。中身の後ろに敷く */
.sb::before { --melt: linear-gradient(195deg, transparent 70%, #000 90%); }
.sb::before, .sb::after { z-index: -1; opacity: var(--full-o, 0); transition: opacity .3s ease; }
/* トップの事業内容のカード：メッシュは中身（帯＝タイトルより右）にだけ。左下の斜め半分（左上の角と右下の角を結ぶ線より下）に見せ、右上へ斜めに消す。光は付けない（3段階の濃さを見せるため）
   to bottom left：カードの縦横の比率が変わっても、消える境目（50%）がいつも左上の角と右下の角を結ぶ対角線になる */
.sec-biz .biz-body::before { --melt: linear-gradient(to bottom left, transparent 40%, #000 60%); z-index: -1; }
.fc-quote .quote { position: relative; z-index: 1; }
.fc-quote .quote { margin: 0; text-align: left; } /* かたまりの中では左寄せ */
@media (width <= 760px) {
  .founder-cards { grid-template-columns: minmax(0, 1fr); }
  .fc-photo { grid-row: auto; }
  .fc-photo .photo { height: auto; aspect-ratio: 3 / 4; }
}
#message p, .page-wide .data-table td { font-weight: var(--fw-regular); } /* 試し：代表メッセージの本文・会社概要の表の中身は標準の太さ（400）に */
.founder-card .quote { font-family: var(--ff-read); } /* 試し：会社概要の一言は、見出しだが文章と同じフォントに（太さ・大きさはそのまま） */
/* 右は、開いたメニューの幅＋メニューの両側の浮き（--menu-inset）ぶん空ける。開いたメニューと中身の間が、メニューと画面の右端の間と同じになる。
   左も同じ --menu-inset にそろえる。1024px 以下は空けない（ナビは中身の上に重なる） */
@media (width > 1024px) { .page-wide .sub-head { padding-left: calc(var(--sp-head) / 2); } } /* 節の見出しは左の列の中で一段下げる */
@media (width > 1024px) { :is(.page-wide, .page-full) main .container { padding-left: var(--menu-inset); padding-right: calc(var(--menu-inset) * 2 + var(--menu-nav-w)); } }
@media (width > 1024px) { .page-full main .sec > .container { padding-left: calc(var(--menu-inset) * 2 + var(--menu-nav-w)); } } /* .page-full は節の中身の左も右と同じだけ空ける（会社概要の左の列と同じ幅）。ページの見出しは左上のまま */
@media (width <= 1024px) {
  .page-wide main .sec > .container { grid-template-columns: minmax(0, 1fr); }
  .page-wide .sub-head { margin-bottom: calc(var(--sp-head) / 2); }
}

/* 試し：会社概要の「これまでの歩み」を縦のタイムラインに。3列（年・月・できごと）のグリッドで、1行＝1つの年
   行の高さは最低 --row-h でそろえ、年と年の間の線の長さを同じにする。できごとはふつう年の真横（1行目を年の中央の高さに）。
   期間のまとまり（.at-mid・.at-year）は --row でその年の行に入れる。枠が縦に伸びたら、その行が伸びて年と年の間隔が広がる
   線は年の列の中央に1本（最初の年の中央から一番下まで）。最後の行（.is-fade。年は書かない）のぶんで線を薄く消す（この先も続く）
   年は一言と同じ大きさ（--fs-quote）。年の地はセクションの背景と同じ白にして、線を年の上下で切る。月・できごとの1行目は、年の文字の中央の高さにそろえる
   （.timeline は別の古い部品の名前で使われているので、ぶつからないよう別名にする） */
.history-line { position: relative; --fs-year: var(--fs-quote); --year-w: calc(var(--fs-year) * 3); --year-c: calc(var(--fs-year) / 2 + 8px); --row-h: calc(var(--sp-section) + var(--sp-title)); display: grid; grid-template-columns: var(--year-w) 3em minmax(0, 1fr); grid-auto-rows: minmax(var(--row-h), auto); column-gap: var(--sp-title); font-family: var(--ff-read); line-height: var(--lh-body2); }
.history-line .year { grid-column: 1; position: relative; display: flex; justify-content: center; align-items: flex-start; }
/* 線：最初の年の中央から下まで1本。最後の1行ぶんで薄く消す（この先も続く）。年の地（白）が線を年の上下で切る */
.history-line::before { content: ""; position: absolute; left: calc(var(--year-w) / 2 - 1px); top: var(--year-c); bottom: 0; width: 2px; background: linear-gradient(var(--c-line-soft) calc(100% - var(--row-h)), transparent); }
/* 年はペラっとめくれるように出る（上の辺を軸に、奥に倒れていた板が手前に起きる）。company-reveal.js が .reveal → .is-in を付ける */
.history-line .year > span.reveal { opacity: 0; transform: perspective(400px) rotateX(-90deg); transform-origin: 50% 0; transition: opacity 400ms cubic-bezier(.16,1,.3,1), transform 400ms cubic-bezier(.16,1,.3,1); }
.history-line .year > span.reveal.is-in { opacity: 1; transform: none; }
.history-line .year > span { position: relative; padding: 8px 0; background: var(--c-bg); color: var(--c-sub); font-size: var(--fs-year); font-weight: var(--fw-bold); line-height: var(--lh-head); } /* 年：濃いグレー */
.history-line .month { margin-top: calc(var(--fs-year) / 2 + 8px - 0.85em); }
.history-line .event { margin-top: calc(var(--fs-year) / 2 + 8px - 0.85em - 16px - 1px); } /* 枠の内側の余白と枠線のぶん上へ */
.history-line .month { grid-column: 2; font-weight: var(--fw-bold); color: var(--c-line); } /* 月：年より薄いグレー */
.history-line .event { grid-column: 3; align-self: start; margin-bottom: var(--sp-title); padding: 16px var(--sp-title); border: 1px solid var(--c-line-soft); border-radius: var(--radius-field); font-size: var(--fs-body); } /* できごとごとに角丸の線で囲む。見出しは本文より一段大きく（箇条書きは下で 16px） */
/* 期間のまとまり（.at-mid・.at-year）も、ほかのできごとと同じように並べる。--row でどの年の行に入るかだけ決める。
   絶対配置にすると行の高さに数えられないので、画面が狭くて枠が縦に伸びたとき、上下の枠と重なってしまう。
   並べておけば枠どうしの間（--sp-title）が必ず空き、はみ出したぶんは年と年の間隔が広がって、線も一緒に伸びる */
.history-line .event.at-mid, .history-line .event.at-year { grid-row: var(--row); }
.history-line .event ul { margin-top: 8px; padding-left: 1.2em; font-size: var(--fs-body2); color: var(--c-sub); }
.history-line .event li + li { margin-top: 4px; }
.history-line .is-key { font-weight: var(--fw-bold); }

/* 会社概要：線がスクロールに合わせて上から下へ伸びる（TOP のお知らせと CTA の間の線と同じ動き。sec-cut-grow）。
   線が画面の下から入ってきたら伸び始め、画面のまん中あたりで伸びきる。会社概要の表の左の線、これまでの歩みの線とも、1本のまま伸びる。
   この機能が使えないブラウザと、動きを減らす設定では、最初から伸びた線のまま。ふわっと出る動きは company-reveal.js */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .page-wide #data .side-body { view-timeline: --data-line block; }
    .page-wide #data .side-body::after { animation: sec-cut-grow linear both; animation-timeline: --data-line; animation-range: entry 0% cover 50%; }
    .history-line { view-timeline: --history-line block; }
    .history-line::before { animation: sec-cut-grow linear both; animation-timeline: --history-line; animation-range: entry 0% cover 50%; }
  }
}