@charset "utf-8";

/* =============================================================================
   common.css — 全ページ共通コンポーネント（2026-07-01）
   -----------------------------------------------------------------------------
   enqueue 順: reset → foundation → style.css(legacy) → **common** → page CSS。
   → 旧 style.css の汎用規則を common が上書きし、ページ固有の見せ方は page CSS が上書きする。
   「共通ルールを整備し、ページ固有は個別対応」の共通側。foundation トークンで構成。
   ============================================================================ */

/* ===== ページ見出し帯（英字ラベル + 言語トグル） =============================
   マークアップ: .menu-container > (.menu > h1.menu-en) [+ .lang-menu]
   各ページはこの帯をそのまま使う。幅を変えたいページは .menu-container を上書き。 */
#content-wrapper.c-page-heading-shell::before {
  display: none;
  height: 0;
  margin: 0;
}

#content-wrapper.c-page-heading-shell > #content {
  margin-block-start: 0;
}

.c-page-heading {
  box-sizing: border-box;
  padding-block: var(--space-page-heading-start) var(--space-page-heading-end);
}

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--container-box);   /* 中身を --container(960)に保つ（gutter は狭い画面のみ効く） */
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-block-start: var(--space-sm);  /* ヘッダーとの上部余白を確保 */
}

.menu-container.c-page-heading {
  align-items: center;
  margin-block-start: 0;
}

.menu-container.c-page-heading .menu {
  display: flex;
  align-items: center;
  margin-block-end: 0;
}

.menu-container.c-page-heading .lang-menu p {
  line-height: var(--lh-snug);
}

.menu {
  margin-bottom: var(--space-sm);   /* 見出し下の余白（旧 20px 相当・空きすぎを解消） */
}

h1.menu-en {
  display: inline-block;
  padding: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-lg);
  font-weight: var(--font-latin-strong-weight);
  letter-spacing: 0.02em;
  line-height: var(--lh-tight);
  color: var(--color-text-muted);   /* ページ名は本文より一段弱い共通ラベル */
}

/* ===== 本文へのスキップ =====================================================
   ヘッダーの前に置き、キーボードで最初の Tab に出る。既定は画面外へ逃がすだけで、
   フォーカスが来たら左上に出る。

   ⚠️ `display:none` / `visibility:hidden` で隠さない（フォーカスできず機能しない）。
   ⚠️ z-index はレガシーのドロワー/オーバーレイ（生値 2000/3000）より上に要る。
      `--z-*` スケールの上限は `--z-toast: 1000` でここまで届かないので、
      スケールを引き上げるまでは生値で置く（`theme/CLAUDE.md` の z-index 注記）。 */
.c-skip-link {
  position: fixed;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 4000;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-heading);
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  text-decoration: none;
  /* 自身の高さ + 上端の余白 + 枠線ぶん、画面の上へ逃がす。 */
  transform: translateY(calc(-100% - var(--space-xs) - 2px));
}

.c-skip-link:focus {
  transform: none;
}

/* スキップ先。プログラム的にフォーカスを受けるだけの器なので、ここにリングは出さない
   （本文全体を囲む枠になり、次の Tab で入る実際の操作対象が読み取れなくなる）。
   ⚠️ 消してよいのは `tabindex="-1"` の受け皿だけ。素の `outline: none` を広げないこと。 */
#content[tabindex="-1"]:focus,
#top-hero[tabindex="-1"]:focus {
  outline: none;
}

/* 英字ラベルに添える和文。ページ名は `h1.menu-en` ひとつが受け持つので、
   ここは見出しにしない（h1 を2つ並べると構造がページ名を2つ持つことになる）。 */
.menu__note {
  display: inline;
  margin: 0 0 0 var(--space-xs);   /* 英字ラベルとの間。旧 h1.menu-en の padding-right 相当 */
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-tight);
  vertical-align: 2px;
  color: var(--color-text-muted);
}

/* ===== 読み込み中の見え方（`js/page-reveal.js`）=================================
   罫線は CSS なので即描画され、文字はフォント待ち、画像は読み込み待ちになる。
   放っておくと「線だけ引かれて文字と画像が抜けた状態」が一瞬見えるので、
   初期表示に要るものが揃うまで `#content` を伏せ、一度だけフェードで出す。

   ⚠️ **向きを逆にしない**。既定は見えていて、JS が `html[data-page-reveal]` を
   立てたときだけ隠す。CSS 側で隠して JS で見せる形にすると、JS が落ちた瞬間に
   ページの中身が消える。属性が付かない環境では以下は一切効かない。

   ⚠️ 伏せ方は `opacity` に限る。`display` にすると寸法が無くなり、伏せている間に
   位置や高さを読む処理（Vision の段送り）が狂う。`visibility` は中へのフォーカスまで止める。 */
#content {
  transition: opacity var(--reveal-dur) var(--ease);
}

[data-page-reveal] #content {
  opacity: 0;
}

/* 画像保存操作の抑止。リンクやカルーセル操作を妨げないプロパティだけを指定する。 */
img:not([data-image-protection="off"]) {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* 画像の読み込みフェード（サイト共通）。初期状態は「見えている」で、
   js/image-fade.js が html に data-image-fade を立てたときだけ隠す。
   JS が動かない環境ではこのブロックごと効かないので画像は消えない。
   個別に切りたい要素には data-image-fade="off" を付ける。
   ヘッダー・フッターと Top ヒーローは #content の外なので対象外。

   ⚠️ 範囲指定の #content は必ず :where() で包む。ID を素で書くと特異度が (1,2,1) になり、
   img 自身の opacity で出し分けを行っているコンポーネントに勝ってしまう。
   実際に Vision の写真（.vision-stage__photo は img そのもの）を全部 opacity 1 にして
   重ね、切り替えを殺した。このフェードは**最も弱い層**であるべきで、opacity に意見を
   持つコンポーネントには必ず譲る。現状 (0,1,1)/(0,2,1)。 */
/* JS の inScope と同じ除外条件。除外画像は loaded が付かないため隠さない。 */
[data-image-fade] :where(#content) img:not(:where([data-image-fade="off"], [data-image-fade="off"] *, .work-reveal *)) {
  opacity: 0;
  transition: opacity var(--reveal-dur) var(--ease);
}

[data-image-fade] :where(#content) img.is-image-loaded:not(:where([data-image-fade="off"], [data-image-fade="off"] *, .work-reveal *)) {
  opacity: 1;
}

/* 画像とその装飾を一緒に表示する任意のグループ。寸法は待機中も保持する。 */
[data-image-fade] :where(#content) [data-image-fade-group] {
  transition: opacity var(--reveal-dur) var(--ease);
}

[data-image-fade] :where(#content) [data-image-fade-group]:not(.is-image-loaded):not(.is-image-fallback) {
  opacity: 0;
}

/* 複数写真を持つグループ（カルーセル）は1枚目の準備まで装飾も伏せる（残りは後から読む）。
   `.is-image-fallback` は待ち上限を超えた合図。写真が揃わなくても本文と操作へ
   到達させるため、ここで伏せるのをやめる（届いた画像は後から普通に描画される）。 */
[data-image-fade-groups] :where(#content) [data-image-fade-group="first"]:not(.is-image-loaded):not(.is-image-fallback) {
  opacity: 0;
  pointer-events: none;
}

.lang-menu p {
  margin: 0;
  font-family: var(--font-latin);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);   /* faint(#a8a8a8) は AA 未達 → muted(#6b6b6b ≈5:1) */
}
.lang-menu p a {
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease);
}
.lang-menu p a:hover { color: var(--color-text); }
.lang-menu p .current { color: var(--color-heading); }

/* ===== 共通ボタン ==========================================================
   `.c-button` を新規マークアップで使う。CF7 送信ボタン等の既存クラスは page CSS 側。 */
.c-button {
  display: inline-block;
  min-width: 200px;
  padding: var(--space-xs) var(--space-xl);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.c-button:hover { background: var(--color-link-hover); }
.c-button:active { transform: translateY(1px); }
.c-button:disabled,
.c-button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}
/* 罫線ボタン（従属アクション用） */
.c-button--outline {
  background: transparent;
  color: var(--color-heading);
  border: 1px solid var(--color-line-strong);
}
.c-button--outline:hover {
  background: var(--color-heading);
  color: #fff;
}

/* ===== DS 基本ルール（基線）================================================
   ここは reset → foundation → style.css(legacy) より後段に読まれる共通層。
   レガシー style.css の未レイヤ規則に「勝てる」唯一の場所なので、
   全ページに効かせたい基線（タイポ基線・フォーカス・選択・プロース）を集約する。
   ページ固有の見せ方は page CSS（さらに後段）が上書きする。 */

/* --- #1 タイポ基線 --------------------------------------------------------
   style.css の body{font-size:13px} を DS の 16px 基線へ統一する（common は後段）。
   移行済みページの font-size 明示（13px 回避）は冗長になるが害はない。
   font-family/line-height/color もトークンへ寄せる（width/height は触らない）。 */
body {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-family: var(--font-base);
  /* 和文の基本書体（セザンヌ・試行中）はキット収録が 500 だけなので、600 / 700 の指定を合成太字にしない
     （字形が潰れる）。太さの指定は 500 で出る。欧文の Helvetica も強調を 400 で出す方針なので合成は要らない。 */
  font-synthesis-weight: none;
  color: var(--color-text);
}

/* リンク基線: foundation @layer base の `a` は未レイヤ style.css に負けるため、
   後段 common で DS リンク色（--color-link = 本文色）と motion を確定させる。
   明示色を持つリンク（nav / .prose a / ボタン等）は各自の色が後段/固有度で勝つ。 */
a {
  color: var(--color-link);
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-link-hover); }

/* --- #2 フォーカス / 選択（a11y 基線）-------------------------------------
   reset.css の a:focus{outline:none} がフォーカス表示を全滅させていた。
   キーボード操作時（:focus-visible）だけリングを復活させる。
   a:focus-visible は reset の a:focus と同 specificity で、common が後段なので勝つ。 */
:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}
/* マウス／タッチ由来の focus ではリングを出さない */
:focus:not(:focus-visible) { outline: none; }

/* --- #3 フォーム部品の基線（オプトイン）----------------------------------
   レガシー入力や CF7・ヘッダー検索を巻き込まないよう、bare 要素ではなく
   .c-form ラッパ配下だけに効かせる。新規マークアップは .c-form を付ける。 */
.c-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.c-form textarea,
.c-form select {
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color var(--dur-fast) var(--ease);
}
.c-form input:focus,
.c-form textarea:focus,
.c-form select:focus { border-color: var(--color-heading); }
.c-form ::placeholder { color: var(--color-text-faint); opacity: 1; }

/* --- #4 プロース基線（エディタ生成の本文）--------------------------------
   .prose = 新規用の DS プロースクラス。.tex = レガシー本文ラッパ（editor 生成）。
   両者に同じ基線を与え、単一ページ限定でなく page.php fallback 等でも読みやすくする。
   single-topics は singular_style.css（さらに後段）が固有の見せ方を上書きするので安全。
   値は singular / editor-style と揃える（editor-style は TinyMCE 制約で実値ミラー）。 */
.prose,
.tex {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
}
/* 段落間は 24px。16px だと書き手が「1行空け」に足りないと感じ、テキストタブで
   `<br>` だけの行（実測 32px）を挟んで余白を作る運用になっていた。24px で両者が
   並ぶので、その回避策が要らなくなる。2026-09-17 に実記事で比較して決定。 */
.prose p + p,
.tex p + p { margin-top: var(--space-md); }

.prose h2, .tex h2 { font-size: var(--fs-xl); margin: var(--space-lg) 0 var(--space-sm); }
.prose h3, .tex h3 { font-size: var(--fs-lg); margin: var(--space-md) 0 var(--space-xs); }
.prose h4, .tex h4 { font-size: var(--fs-md); margin: var(--space-md) 0 var(--space-xs); }

.prose a, .tex a { color: var(--color-link); text-decoration: underline; }
.prose a:hover, .tex a:hover { color: var(--color-link-hover); }

.prose ul, .tex ul { list-style: disc; margin: 0 0 1em 1.5em; }
.prose ol, .tex ol { list-style: decimal; margin: 0 0 1em 1.5em; }
.prose li, .tex li { margin-bottom: 0.3em; }

.prose img, .tex img { max-width: 100%; height: auto; }
.prose figure, .tex figure { margin: var(--space-md) 0; }
.prose figcaption, .tex figcaption,
.prose .wp-caption-text, .tex .wp-caption-text {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3xs);
  line-height: var(--lh-snug);
}

.prose table, .tex table { width: 100%; border-collapse: collapse; margin: var(--space-md) 0; }
.prose th, .tex th,
.prose td, .tex td {
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-line);
  line-height: var(--lh-snug);
  vertical-align: top;
  text-align: left;
}

.prose blockquote, .tex blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-line-strong);
  color: var(--color-text-muted);
}
.prose hr, .tex hr {
  border: 0;
  border-top: 1px solid var(--color-line);
  margin: var(--space-lg) 0;
}

/* --- #5 本文フロー --------------------------------------------------------
   直下ブロックの余白を上側だけで管理する再利用可能なStackパターン。
   見出し・図版などの例外値は利用側のコンポーネントCSSで追加する。 */
.prose-flow > :not(style, script) {
  margin-block: 0;
}

.prose-flow > :not(style, script) + :not(style, script) {
  margin-block-start: var(--flow-space, var(--space-md));
}

/* --- #6 ユーティリティ ----------------------------------------------------
   広い画面でだけ効く任意改行。原稿側で行末を決めたい本文に使う。
   狭い画面では折り返しが崩れるため無効化する。 */
@media (max-width: 768px) {
  br.u-br-wide {
    display: none;
  }

  /* 狭い画面では消す区切り（改行に置き換えたときの字間など）。 */
  .u-sep-wide {
    display: none;
  }
}

/* 狭い画面でだけ効く任意改行（u-br-wide の逆）。住所の郵便番号の後など。 */
@media (min-width: 769px) {
  br.u-br-narrow {
    display: none;
  }
}

/* --- #7 写真の軽量版の器（`inc/light-images.php` の gkk_light_picture()）-----
   軽量版を画面の幅と倍率で出し分ける <picture> は箱を作らない。中の img を今までどおり
   親の箱に直接載せ、`height: 100%`・`object-fit` などの指定をそのまま効かせる。
   出すファイルの選び方は display に関わらず <source> の条件で決まる。 */
.gkk-picture {
  display: contents;
}