/* ============================================================
   base.css — 全ページ共通スタイル
   mockups/02-kokuyo.html のCSSを下敷きに整理。
   読み込み順: tokens.css → base.css → ページ固有 style
   ============================================================ */

/* ---------- リセット ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
img, svg, video, canvas{ display:block; max-width:100%; }
ul, ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* ---------- html / body 基本 ---------- */
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-jp); line-height:var(--leading-body);
  font-feature-settings:"palt"; -webkit-font-smoothing:antialiased;
  /* 印刷・PDF化でも背景の濃色・グラデを保持する（ダーク基調が白飛びしないように） */
  -webkit-print-color-adjust:exact; print-color-adjust:exact;

  /* ---- 日本語の折り返し（2026-09-02 追加） ----
     ブラウザは既定で日本語をどこでも改行するため「設計しま／す。」「仕組みにし／た。」のように
     語の途中で割れる。auto-phrase は文節の切れ目で折り返させ、pretty は最終行に1〜2文字だけ
     取り残されるのを避ける。いずれも未対応ブラウザは値を無視するだけ（表示は従来どおり）。
     ※個別の <span style="white-space:nowrap;"> は、未対応環境でも効く保険として残してある。 */
  word-break:auto-phrase;
  text-wrap:pretty;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--violet); color:#fff; }

/* ---------- 印刷・PDF化（共有用の見栄え調整） ---------- */
@media print{
  @page{ size:1280px 1810px; margin:0; }                  /* デスクトップ幅で出力（A4幅だとモバイル表示に落ちる）・全面ダークで白縁を出さない */
  .skip-link{ display:none !important; }                 /* スキップリンクが各ページに写るのを防ぐ */
  .header{ position:absolute !important; }                /* 固定ヘッダーのゴースト重なりを防ぎ先頭に1回だけ表示（旧クラス名.site-headerのバグ修正 2026-07-07） */
  .scroll-cue{ display:none !important; }                 /* 「SCROLL」インジケータは紙面で不要 */
  section{ break-inside:avoid; }                          /* セクションのページ跨ぎを極力避ける */
  .card, .flow-step, .value-row{ break-inside:avoid; }    /* カード類の途中分断を防ぐ */
  /* background-clip:text のグラデ文字は印刷時に箱状のアーティファクトが出るため単色に切替 */
  .headline .grad, .nar-body em, .why-body em, .def-body em, .story-body em,
  .model-eq .x, .f-x .f-x-glyph, .xf-x{
    background:none !important;
    color:var(--violet) !important;
    -webkit-text-fill-color:var(--violet);
  }
}

/* ---------- スキップリンク ---------- */
.skip-link{
  position:fixed; top:12px; left:12px; z-index:100;
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-radius:8px;
  padding:10px 18px; font-size:13px; letter-spacing:.04em;
  transform:translateY(-220%); transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ---------- タイポ階層 ---------- */
h1, h2, h3, h4{ line-height:1.5; font-weight:600; }
.section-title{
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(28px,3.4vw,44px); line-height:1.8; letter-spacing:.05em;
}
.section-lede{
  margin-top:24px; font-size:var(--fs-body); line-height:2.1;
  color:var(--text-body); max-width:var(--measure);
}
.prose{ max-width:var(--measure); line-height:var(--leading-body); }
.prose p + p{ margin-top:1.6em; }

/* ---------- 英語キッカー ---------- */
.kicker{
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-sub); margin-bottom:28px;
  display:flex; align-items:center; gap:14px;
}
.kicker::before{
  content:""; width:44px; height:1px; flex:none;
  background:var(--violet);
}
.kicker--grad::before{ background:linear-gradient(90deg,var(--platinum),var(--cyan)); }
.kicker--center{ justify-content:center; }

/* ---------- セクション共通 ---------- */
.section{ position:relative; border-top:1px solid var(--line); }
.section-inner{
  max-width:var(--max-w); margin:0 auto;
  padding:clamp(88px,12vh,150px) var(--pad);
}
.section--center .section-inner{ text-align:center; }
.section--center .section-lede{ margin-left:auto; margin-right:auto; }

/* ---------- ヘッダー（固定・スクロールで凝縮 .scrolled） ---------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad);
  background:linear-gradient(rgba(7,11,20,.78), rgba(7,11,20,.42) 70%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:padding .4s var(--ease);
}
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(7,11,20,.92);
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity .4s var(--ease);
}
.header.scrolled{ padding:10px var(--pad); }
.header.scrolled::before{ opacity:1; }
/* ロゴはヘッダーの上下中央に。ブランドタグが2段になったため baseline 揃えだとロゴだけ半行浮く（2026-09-17 押谷指示・案A） */
.brand{ display:flex; align-items:center; gap:14px; }
.brand-logo{ font-family:var(--font-en); font-weight:700; font-size:22px; letter-spacing:.05em; }
.brand-tag{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-sub); letter-spacing:.12em; }
/* ブランドタグは全言語で2段：1行目「INTELLECTUAL POWER —」、2行目に事務所名を1行で（2026-09-17 押谷「日本語も — で分ける」）*/
.brand-tag{ white-space:nowrap; }
.brand-tag-firm{ display:block; }
.nav{ display:flex; align-items:center; gap:30px; }
/* 2語のラベル（Why IPX）が途中で折れると、ヘッダが2段になって崩れる。
   Team を足して横幅の余裕が減ったため明示した（2026-09-28）。これで880pxまで1段を保つ（860px以下はハンバーガー）。 */
.nav-link{
  white-space:nowrap;
  font-family:var(--font-en); font-size:13.5px; font-weight:500; letter-spacing:.06em;
  color:var(--text-sub); position:relative; padding:4px 0;
  transition:color .35s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.nav-link:hover{ color:var(--text); }
.nav-link:hover::after{ transform:scaleX(1); }
/* 言語切替（押すと開くメニュー・2026-09-17 案B）。中身は sync-includes が languages.json から生成 */
.lang{ position:relative; }
/* 言語切替ボタンも折り返さない。中国語（中文）のようにラベルが短いと flex で潰されて2行になり、
   ヘッダが2段になっていた（Team追加前から880pxで発生・2026-09-28 修正）。 */
.lang-btn{
  white-space:nowrap;

  display:inline-flex; align-items:center; gap:7px;
  /* 切替メニューの項目（.lang-menu li a）は --font-jp なので、ボタンだけ --font-en だと
     同じ言語名が2つの書体で並んで見える（2026-09-28 押谷指摘）。ボタン側をメニューに合わせた。
     Space Grotesk は日本語・中国語・韓国語の字を持たないため、ボタンに「日本語」「中文」「한국어」が
     入るとOS標準フォントで代替表示され、メニューとさらにズレていた。--font-jp なら全7言語でそろう。
     ★ font-size と letter-spacing はメニュー（13.5px・字間なし）に合わせないこと（2026-09-28 押谷決定）。
     ボタンがそろえる相手は横に並ぶ .nav-link（Space Grotesk 13.5px・字間.06em）であってメニューではない。
     IBM Plex Sans JP は Space Grotesk より字が背高で、大文字の実高は 12.5px で 9.71px ≒ Recruit の 9.45px。
     13.5px にすると 10.49px（約11%大）で Deutsch だけ浮く（実測・drafts/lang_font_確認_20260928/案AB_モック_20260928_v2.html）。
     字間 .04em もナビ .06em → ボタン .04em → メニューなし、と役割順に並べた値。 */
  font-family:var(--font-jp); font-size:12.5px; letter-spacing:.04em; color:var(--text);
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 12px 6px 11px;
  cursor:pointer; transition:border-color .35s var(--ease), background .35s var(--ease);
}
.lang-btn:hover, .lang-btn[aria-expanded="true"]{ border-color:#3A4352; background:rgba(255,255,255,.03); }
.lang-globe{ color:var(--text-sub); }
.lang-caret{ font-size:10px; color:var(--text-sub); transition:transform .3s var(--ease); }
.lang-btn[aria-expanded="true"] .lang-caret{ transform:rotate(180deg); }
.lang-menu{
  display:none; position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  min-width:176px; margin:0; padding:6px; list-style:none;
  background:#151B27; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.lang.open .lang-menu{ display:block; }
.lang-menu li a, .lang-menu li span[aria-disabled]{
  display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px;
  font-size:13.5px; color:var(--text); text-decoration:none;
}
.lang-menu li a:hover{ background:#1E2634; }
.lang-menu li span[aria-disabled]{ opacity:.4; cursor:default; }
.lang-code{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--text-sub); width:22px; }
.lang-menu li.is-current a{ color:var(--violet-label); }
.lang-menu li.is-current .lang-code{ color:var(--violet-label); }
.nav-cta{
  font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.06em;
  background:var(--amber); color:var(--amber-ink);
  padding:10px 24px; border-radius:999px;
  box-shadow:0 0 24px rgba(245,196,94,.22);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.nav-cta:hover{ box-shadow:0 0 36px rgba(245,196,94,.45); transform:translateY(-1px); }

/* ---------- モバイル ハンバーガー & 全画面オーバーレイメニュー ---------- */
.nav-toggle{
  display:none; /* デスクトップは非表示。表示は @media(max-width:860px) 側 */
  position:relative; z-index:2;
  width:44px; height:44px; padding:0; margin-left:4px;
  background:transparent; border:0; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.nav-toggle span{
  display:block; width:24px; height:2px; border-radius:2px; background:var(--text);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:104px var(--pad) calc(env(safe-area-inset-bottom, 0px) + 40px);
  background:
    radial-gradient(60vmax 40vmax at 80% -10%, rgba(138,107,255,.14), transparent 60%),
    rgba(7,11,20,.98);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu-inner{ display:flex; flex-direction:column; gap:6px; width:100%; max-width:520px; }
.m-link{
  font-family:var(--font-en); font-size:clamp(20px,5vw,24px); font-weight:500;
  letter-spacing:.04em; color:var(--text); padding:12px 0;
  position:relative; width:max-content; max-width:100%;
  transition:color .35s var(--ease);
}
.m-link::after{
  content:""; position:absolute; left:0; bottom:5px; width:100%; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.m-link:hover::after, .m-link:focus-visible::after{ transform:scaleX(1); }
.m-foot{
  margin-top:40px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.m-foot .lang-menu{ right:auto; left:0; top:auto; bottom:calc(100% + 8px); }   /* モバイルはボタンが画面下寄りなので、上に向けて開く（下だと画面外に切れる） */
body.menu-open{ overflow:hidden; }
body.menu-open .header::before{ opacity:1; }
@media (min-width:861px){ .mobile-menu{ display:none; } }
@media (prefers-reduced-motion:reduce){ .mobile-menu, .nav-toggle span{ transition:none; } }

/* ---------- CTAボタン（アンバー・本文用） ---------- */
.btn-cta{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-en); font-size:14px; font-weight:700; letter-spacing:.06em;
  background:var(--amber); color:var(--amber-ink);
  padding:16px 36px; border-radius:999px;
  box-shadow:0 0 28px rgba(245,196,94,.22);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn-cta:hover{ box-shadow:0 0 48px rgba(245,196,94,.5); transform:translateY(-2px); }

/* ---------- テキストリンク（矢印付き） ---------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-size:var(--fs-caption); font-weight:700; letter-spacing:.06em;
  color:var(--text); position:relative; padding-bottom:6px;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transform:scaleX(.4); transform-origin:left; transition:transform .45s var(--ease);
}
.link-arrow:hover::after{ transform:scaleX(1); }

/* ---------- カード共通 ---------- */
.card{
  display:block; background:var(--card);
  border:1px solid var(--line); border-radius:14px;
  padding:30px 28px;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease),
             transform .35s var(--ease), background .35s var(--ease);
}
.card:hover{
  border-color:rgba(53,214,240,.45);
  background:var(--layer-raised);
  box-shadow:0 0 28px rgba(53,214,240,.10);
  transform:translateY(-3px);
}

/* ---------- フッター ---------- */
/* ★フッターは帯（--layer）である。したがって各ページの最後のセクションは必ず地（--bg）にすること。
     最後のセクションに style="background:var(--layer);" を付けると、帯のフッターと境目が消えて
     紺色が一枚につながる（insights では下から1664pxが切れ目なしになっていた）。
     2026-09-12 に4ページを地へ戻した：insights #interviews／about/background #skills／
     why-ipx/borderless #meet／why-ipx/quality-speed #ipx-hub（これは前の #governance と帯が隣接していた分）。
     セクションどうしの「地→地」はサイト内に137箇所あり普通の形（.section の border-top が区切る）。
     新しいセクションを足すときは「帯→帯」と「帯で終わる」の2つを作らないこと。 */
.footer{ border-top:1px solid var(--line); background:var(--layer); }

/* ---------- 帯セクションの中のカード（2026-08-29 H案・押谷決定） ----------
   地の色(--bg)の上ではカードを明るく浮かせ、帯(--layer)の上では逆に黒へ沈める。
   こうすると、どちらのセクションでもカードの浮き具合がほぼ揃う（1.220:1 / 1.210:1）。
   帯は --layer のまま（紺）を保つので、セクションの区切りは残る。
   ※帯にしたいセクションは <section class="section section--band"> と書く。インラインstyleは使わない。
     2026-09-12 に判定をクラスへ移した（旧 section[style*="--layer"] は style 属性の文字列一致だったため、
     書き方が1文字でも揺れると静かに外れ、カードが帯の上で #1C212B のまま＝1.076:1 でほぼ見えなくなる）。
     置換は20箇所／17ページ。全115セクション・1035項目を描画して照合し、見た目の差分ゼロを確認済み。
     ※上記の「未統合5セクション」（.definition / .position / .reframe / .engine）は 2026-09-15 時点で解消済み。
       いずれも section--band を併記する形になっており、帯の中でカードが黒くなる上書きが効いている（実ファイルで確認）。 */
.section--band{
  background:var(--layer);
  --card:#000000;
  --layer-raised:#0F1012;
  --line:#222C40;
}
/* 帯の中でも、小さなタグチップだけは黒に沈めず一段明るい面にする（2026-09-04 押谷指示）。
   カードは面積が大きいので黒に沈めると映えるが、チップは小さく沈みすぎるため。
   値は :root の --layer-raised と同じ #262C38。上のブロックで --layer-raised を #0F1012 に
   上書きしているため、ここでは変数ではなく実際の色で書いている（変更時は tokens.css と揃える）。
   帯 #121A2C からの浮きは 1.240:1（黒のときは 1.210:1）で、明るい方向に同程度浮く。
   ※2026-09-06 統合：9-03の初版ルール（background:#12161F・border-color:#2E3646）と同一セレクタで二重定義になっていたため1ルールにまとめた。背景は本ルールの #262C38 が勝っていたので見た目は不変、border-color は初版の値を引き継ぐ。 */
.section--band .tag-chip{ background:#262C38; border-color:#2E3646; }
/* 公式アカウント（フッター） */
/* 公式アカウントのアイコン。各社が配布する白（単色）版の形をそのまま使うため色は #fff 固定。
   色の変更は X/YouTube/Facebook いずれも禁止なので、ホバーは色ではなく濃さで返す。 */
/* 3列の1行目を同じ高さ（--footer-line）の箱にし、ロゴ・メニュー・アイコンの中心を1本の線に揃える（2026-09-16 押谷指摘）。
   以前の margin-top:22px はこの揃えを壊していたので撤去。 */
.footer-sns{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; height:var(--footer-line); }
.footer-sns a{
  display:inline-flex; color:#fff; text-decoration:none;
  transition:opacity .3s var(--ease);
}
.footer-sns a:hover{ opacity:.65; }
/* 各社の公式ファイルは viewBox 内の余白の取り方が異なるため、viewBox を中身の実寸に
   合わせたうえで「高さ」で揃える（パスの座標は公式のまま一切変えていない）。
   高さの値は Chrome で実寸描画し、塗られている面積を実測して決めた（2026-09-08）。
   実測: X 26% / YouTube 89% / note 84% / Facebook 59%（枠に対する塗り率）。
   塗り面積を完全に揃えると X が 27.7px になり不自然なので、外形と塗りの両方で調整する。 */
.footer-sns svg{ height:17.5px; width:auto; fill:currentColor; display:block; }
.footer-sns .sns-fb{   height:17px; }     /* べた塗りの円。外形が最大だったので下げる */
.footer-sns .sns-note{ height:16.5px; }   /* べた塗りの正方形。最も重いので一番小さく */
.footer-sns .sns-yt{   height:14px; }     /* 横長。高さを抑え、幅で存在感を出す */
.footer-sns a[aria-label="X"] svg{ height:15.5px; } /* 四隅まで届く形なので、同じ高さでも円や角丸より大きく見える。19→17→15.5 と実際に見て詰めた（押谷判断 2026-09-09） */

.footer-inner{
  --footer-line:28px;                       /* 3列の1行目の高さ。ロゴ・メニュー・SNSの中心をここで揃える */
  max-width:var(--max-w); margin:0 auto;
  padding:56px var(--pad) 44px;
  display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; align-items:flex-start;
}
.footer-logo{ font-family:var(--font-en); font-weight:700; font-size:20px; letter-spacing:.05em; line-height:var(--footer-line); }
.footer-tagline{
  margin-top:10px; font-family:var(--font-mono);
  font-size:var(--fs-label); letter-spacing:.2em; color:var(--text-sub);
}
.footer-nav ul{ display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; min-height:var(--footer-line); }
.footer-nav a{
  font-family:var(--font-en); font-size:var(--fs-caption); font-weight:500; letter-spacing:.06em;
  color:var(--text-sub); transition:color .3s var(--ease);
}
.footer-nav a:hover{ color:var(--text); }
.footer-legal{
  border-top:1px solid var(--line);
  background:var(--bg);
  padding:18px var(--pad);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;
  font-size:var(--fs-label); color:var(--text-sub); letter-spacing:.06em;
}
.footer-legal-nav{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.footer-legal-nav a{
  font-size:11.5px; color:var(--text-sub); letter-spacing:.06em;
  transition:color .3s var(--ease);
}
.footer-legal-nav a:hover{ color:var(--text); }

/* ---------- スクロール連動リビール [data-reveal] ----------
   JS有効時（html.js）のみ初期非表示にし、.in-view で表示する。
   JS無効環境では最初から表示される（コンテンツ喪失を防ぐ）。 */
.js [data-reveal]{
  opacity:0; transform:translateY(20px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--reveal-delay,0s);
}
.js [data-reveal].in-view{ opacity:1; transform:none; }

/* ---------- レスポンシブ ---------- */
@media (max-width:860px){
  .nav{ gap:18px; }
  .nav-link, .nav > .lang{ display:none; }
  .brand-tag{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .footer-inner{ flex-direction:column; gap:28px; }
  .footer-legal{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   下層ページ共通コンポーネント（Wave 2〜: ハブ・サービス詳細）
   ============================================================ */

/* ---------- ページヒーロー（粒子なしの簡素版） ---------- */
.page-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(48vmax 30vmax at 82% -10%, rgba(138,107,255,.14), transparent 60%),
    radial-gradient(36vmax 24vmax at 8% 110%, rgba(53,214,240,.08), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.page-hero-inner{
  max-width:var(--max-w); margin:0 auto;
  padding:clamp(150px,20vh,210px) var(--pad) clamp(60px,9vh,100px);
}
.crumb{
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.18em;
  color:var(--text-sub); margin-bottom:34px;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.crumb a{ transition:color .3s var(--ease); }
.crumb a:hover{ color:var(--text); }
.crumb .sep{ opacity:.5; }
.page-title{
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(32px,4.6vw,56px); line-height:1.6; letter-spacing:.05em;
}
.page-lede{
  margin-top:26px; font-size:var(--fs-body); line-height:2.2;
  color:var(--text-body); max-width:var(--measure);
}

/* ---------- 汎用グリッド ---------- */
.grid-2{ margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.grid-3{ margin-top:56px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
/* カードが4枚のときの 2×2（auto-fit だと広い画面で 3+1 に片寄るため）。grid-2/grid-3 に併記して使う */
.grid-2x2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px){ .grid-2x2{ grid-template-columns:1fr; } }  /* 640 はスタートアップページで先に採用していた値に合わせた */

/* ---------- 番号付きカード（提供メニュー・柱カード等） ---------- */
.card-no{ font-family:var(--font-mono); font-size:var(--fs-num); letter-spacing:.2em; color:var(--violet-label); }
.card-name{ margin-top:14px; font-size:19px; letter-spacing:.04em; }
.card-desc{ margin-top:12px; font-size:var(--fs-sub); line-height:2.0; color:var(--text-body); }
.card-sub{ margin-top:18px; display:flex; flex-direction:column; gap:8px; }
/* 箇条書きはカードの説明文（.card-desc）と同じ色・行間にする。2026-09-15 押谷判断。
   8月のタイポ刷新で .card-desc は読み文の明るさ（--text-body）へ上げたが、ここだけ脚注色
   （--text-sub）と行間1.8のまま残っていた。大きさは元から同じ15px＝差は色と行間だけだった。 */
.card-sub li{
  position:relative; padding-left:16px;
  font-size:var(--fs-sub); color:var(--text-body); letter-spacing:.03em; line-height:2.0;
}
.card-sub li::before{ content:""; position:absolute; left:0; top:.85em; width:7px; height:1px; background:var(--cyan); }
.card-more{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  font-family:var(--font-en); font-size:var(--fs-caption); font-weight:700; letter-spacing:.08em;
  color:var(--cyan);
}

/* ---------- ステップフロー ---------- */
.flow{ margin-top:56px; display:grid; gap:14px; max-width:860px; }
.flow-step{
  display:flex; gap:24px; align-items:baseline;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px 28px;
}
.flow-no{ font-family:var(--font-en); font-weight:700; font-size:15px; color:var(--violet-label); flex:none; min-width:2.2em; }
.flow-name{ font-size:15.5px; font-weight:600; letter-spacing:.04em; }
.flow-desc{ margin-top:8px; font-size:var(--fs-sub); line-height:2.0; color:var(--text-body); }

/* ---------- FAQ ---------- */
.faq{ margin-top:56px; display:grid; gap:12px; max-width:860px; }
.faq details{ background:var(--card); border:1px solid var(--line); border-radius:12px; }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 24px;
  font-size:var(--fs-sub); font-weight:600; letter-spacing:.04em;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:var(--font-en); color:var(--cyan); font-size:18px; flex:none;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq-a{ padding:0 24px 22px; font-size:var(--fs-body); line-height:2.1; color:var(--text-body); max-width:var(--measure); }

/* ---------- 情報テーブル（事務所概要等） ---------- */
.info-table{ margin-top:56px; width:100%; max-width:860px; border-collapse:collapse; }
.info-table th, .info-table td{
  border-bottom:1px solid var(--line); padding:20px 8px; text-align:left; vertical-align:top;
  font-size:var(--fs-sub); line-height:1.9;
}
/* 項目名は値（td・15px）と同じ大きさに。以前は 11px の等幅で小さく読みにくかった（2026-09-16 押谷指示）。色はグレーのまま残し「項目／値」の区別は色で付ける */
.info-table th{
  width:9em; font-size:var(--fs-sub); letter-spacing:.06em;
  color:var(--text-sub); font-weight:500;
}
.info-table td a{
  color:var(--cyan); border-bottom:1px solid rgba(53,214,240,.4);
  transition:border-color .3s var(--ease);
}
.info-table td a:hover{ border-bottom-color:var(--cyan); }

/* ---------- CTAバンド（下層ページ末尾の誘い） ---------- */
.cta-band{
  background:
    radial-gradient(60vmax 42vmax at 50% 115%, rgba(138,107,255,.16), transparent 62%),
    var(--layer);
  text-align:center;
}
.cta-title{
  font-family:var(--font-min); font-weight:600;
  font-size:clamp(26px,3.2vw,40px); line-height:1.9; letter-spacing:.05em;
  max-width:30em; margin:0 auto;
}
.cta-sub{ margin:22px auto 0; font-size:var(--fs-body); line-height:2.1; color:var(--text-body); max-width:var(--measure); }
.cta-btn-row{ margin-top:44px; }

/* ---------- 補足ノート ---------- */
.note{ margin-top:20px; font-size:var(--fs-caption); color:var(--text-sub); letter-spacing:.03em; line-height:1.9; }

/* ---------- メンバーカード（About > Members・領域チームページ共用） ---------- */
.member-grid{
  margin-top:36px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:20px;
}
.member-card{ padding:0; overflow:hidden; text-align:center; }
.member-card .m-photo{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  background:var(--layer-raised);
  filter:grayscale(1); transition:filter .45s var(--ease);
}
.member-card:hover .m-photo{ filter:grayscale(0); }
.member-card .m-body{ padding:18px 14px 22px; }
/* 字間は .14em。FOUNDING PARTNER (COO/CTO) が1行に収まる上限で、これを超えると
   カードごとに役職が2行になり氏名の行がそろわなくなる（2026-09-13 実測） */
.m-role{ font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--violet-label); }
.m-name{ margin-top:8px; font-size:15.5px; font-weight:600; letter-spacing:.06em; }
.m-sub{ margin-top:6px; font-size:var(--fs-caption); color:var(--text-sub); letter-spacing:.05em; }
.m-tags{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.tag-chip{
  display:inline-block; font-size:var(--fs-label); letter-spacing:.04em; color:var(--text-sub);
  border:1px solid var(--line); border-radius:999px; padding:2px 10px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
a.tag-chip:hover{ border-color:var(--cyan); color:var(--text); }
/* 細かい分野（アサイン用の技術分野マトリクスの12分野）。大きいタグの下に小さく1行で並べる。
   ◎と○は区別しない。2026-09-29 奥村決定 */
.m-fields{ margin-top:10px; font-size:11.5px; line-height:1.75; letter-spacing:.03em; color:var(--text-sub); opacity:.85; }
/* 細かい分野での絞り込み（メンバー一覧の弁理士欄・assets/js/member-filter.js）。JS が動くときだけ出す。2026-09-29 */
.field-filter{ display:none; margin-top:28px; flex-direction:column; gap:10px; scroll-margin-top:120px; }
.js .field-filter{ display:flex; }
.ff-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; color:var(--violet-label); }
.ff-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.ff-group{ min-width:6.5em; font-size:var(--fs-caption); color:var(--text-sub); letter-spacing:.05em; }
button.tag-chip{ background:none; font-family:inherit; line-height:inherit; cursor:pointer; }
button.tag-chip:hover{ border-color:var(--cyan); color:var(--text); }
.tag-chip.is-active{ border-color:var(--cyan); color:var(--text); background:rgba(53,214,240,.08); }
.ff-status{ min-height:1.7em; font-size:var(--fs-caption); color:var(--text-sub); letter-spacing:.04em; }
.ff-reset{ margin-left:12px; background:none; border:0; padding:0; font:inherit; color:var(--cyan); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.member-card.is-hidden, .member-grid.is-hidden, .group-head.is-hidden{ display:none; }
.m-fields a, .side-list li a{ transition:color .3s var(--ease); }
.m-fields a:hover, .side-list li a:hover{ color:var(--cyan); }

/* 役職グループ見出し */
.group-head{ margin-top:64px; display:flex; align-items:baseline; gap:14px; }
.group-name{ font-size:19px; font-weight:600; letter-spacing:.06em; }
.group-en{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; color:var(--text-sub); }

/* イニシャルのみのスタッフ表記 */
.initial-list{ margin-top:20px; display:flex; flex-wrap:wrap; gap:10px; }
.initial-chip{
  font-family:var(--font-en); font-size:var(--fs-caption); letter-spacing:.08em;
  color:var(--text-sub); background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
a.initial-chip:hover{ border-color:var(--cyan); color:var(--text); }
.m-name a{ transition:color .3s var(--ease); }
.m-name a:hover{ color:var(--cyan); }

/* ---------- 個人プロフィールページ ---------- */
.profile-grid{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(32px,6vw,80px); align-items:start;
}
/* 個別ページの写真は最初からカラー。一覧は「どの人を見るか選ぶ」画面なので白黒＋ホバーで色を戻すが、
   個別ページは選んだあとの画面で、白黒にしても情報が増えない（2026-09-16 押谷決定） */
.profile-side .m-photo{
  display:block; width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:14px; border:1px solid var(--line);
  background:var(--layer-raised);
}
.side-block{ margin-top:28px; }
.side-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; color:var(--violet-label); }
.side-list{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.side-list li{
  font-size:var(--fs-sub); color:var(--text-sub); letter-spacing:.03em;
  border:1px solid var(--line); border-radius:999px; padding:4px 12px;
}
.prof-reading{
  display:block; margin-top:12px;
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.24em; color:var(--text-sub);
}
.prof-sec{ margin-top:52px; }
.prof-sec:first-child{ margin-top:0; }
.prof-h{
  font-family:var(--font-mono); font-size:var(--fs-label); font-weight:500;
  letter-spacing:.22em; color:var(--text-sub);
  display:flex; align-items:center; gap:14px;
}
.prof-h::after{ content:""; height:1px; flex:1; background:var(--line); }
.prof-list{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.prof-list li{
  position:relative; padding-left:18px;
  font-size:var(--fs-sub); line-height:2.0; color:var(--text-sub);
}
.prof-list li::before{ content:""; position:absolute; left:0; top:.95em; width:8px; height:1px; background:var(--cyan); }
.prof-list a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
/* 本文の中のリンク（奥村さんのメディア出演の前書きで使う。2026-09-29 追加）。一覧のリンクと同じ見た目 */
.prof-prose a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.prof-prose{ margin-top:16px; font-size:var(--fs-body); line-height:2.2; color:var(--text); max-width:var(--measure); }
.prof-prose p + p{ margin-top:1.4em; }
details.prof-fold{ margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
details.prof-fold summary{
  cursor:pointer; list-style:none; padding:16px 22px;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
details.prof-fold summary::-webkit-details-marker{ display:none; }
details.prof-fold summary::after{
  content:"+"; font-family:var(--font-en); color:var(--cyan); font-size:17px; flex:none;
  transition:transform .3s var(--ease);
}
details.prof-fold[open] summary::after{ transform:rotate(45deg); }
details.prof-fold .prof-list{ margin:0; padding:0 22px 20px; }
@media (max-width:860px){
  .profile-grid{ grid-template-columns:1fr; }
  .profile-side{ max-width:340px; }
}

/* ---------- 下層ページ・レスポンシブ ---------- */
@media (max-width:860px){
  .flow-step{ flex-direction:column; gap:10px; }
  .info-table th{ width:8em; }
}

/* ---------- IP × ○ = X：可変スロット（TOP/Why IPX/Services/ブランドストーリー共用） ---------- */
/* ○ が提示順に入れ替わり「○＝可能性」（ブランドの式）で着地する。挙動は assets/js/xformula.js。 */
.xformula{
  margin-top:56px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
  gap:0 clamp(10px,1.8vw,22px);
  font-family:var(--font-en); font-weight:500;
  font-size:clamp(30px,5.2vw,58px); letter-spacing:.02em; line-height:1.2;
}
.xf-term{ color:var(--platinum); }                    /* IP＝知財・普遍（白金） */
.xf-op{ color:var(--violet); font-weight:400; }       /* × と = */
.xf-slot{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:4.6em;                                    /* 語幅の揺れで「= X」が動かないよう固定 */
  padding:0 .1em;
}
.xf-word{
  color:var(--cyan);                                  /* 掛け合わせる相手＝変数（シアン） */
  font-family:var(--font-min); font-weight:600;
  font-size:.62em; letter-spacing:.06em;
  transition:opacity .38s var(--ease), transform .38s var(--ease);
}
.xf-x{                                                /* 答え＝可能性（交点で生まれる色） */
  font-weight:700;
  background:linear-gradient(94deg,var(--cyan) 4%,var(--violet) 72%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(138,107,255,.35));
}
.xformula.is-swapping .xf-word{ opacity:0; transform:translateY(-.32em); }
.xf-caption{
  margin-top:22px; font-family:var(--font-mono);
  font-size:var(--fs-caption); color:var(--text-sub); letter-spacing:.08em;
  transition:opacity .38s var(--ease);
}
.xf-caption.is-swapping{ opacity:0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .js [data-reveal]{ opacity:1; transform:none; }
}