/* ★自動生成: scripts/build-css.mjs。直接編集しない。
   編集するのは tokens.json（値）/ scripts/templates/wp-faithful-base.css（不変・共通）/ site/css/decorations.css（装飾）。 */

/* ---------- (1) tokens (:root) <- site/tokens.json ---------- */
:root {
  --wp--preset--color--base: #ffffff;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--ink: #0F2350;
  --wp--preset--color--ink-soft: #333333;
  --wp--preset--color--accent: #EF8C95;
  --wp--preset--color--page-backdrop: #d7dbe4;
  --wp--preset--color--error: #B3261E;
  --wp--preset--color--veil: rgba(255,255,255,0.4);
  --wp--preset--color--black: #000000;

  --wp--preset--font-family--en: "univers-next-pro", Arial, sans-serif;
  --wp--preset--font-family--jp: "dnp-shuei-gothic-gin-std", "Hiragino Sans", "Noto Sans JP", sans-serif;

  --wp--preset--font-size--micro: 12px;
  --wp--preset--font-size--caption: 13px;
  --wp--preset--font-size--nav: 14px;
  --wp--preset--font-size--body: 15px;
  --wp--preset--font-size--card-title: 18px;
  --wp--preset--font-size--h2: 24px;
  --wp--preset--font-size--h1: 36px;
  --wp--preset--font-size--display: 56px;

  --wp--preset--spacing--space-xs: 8px;
  --wp--preset--spacing--space-sm: 16px;
  --wp--preset--spacing--space-md: 24px;
  --wp--preset--spacing--space-lg: 40px;
  --wp--preset--spacing--space-xl: 64px;
  --wp--preset--spacing--space-2xl: 96px;
  --wp--preset--spacing--space-3xl: 120px;
  --wp--preset--spacing--space-4xl: 140px;

  --content-size: 960px;
}

/* ---------- (1b) 色ユーティリティ（tokens.colors から生成） ---------- */
/* WP プリセット色ユーティリティ（tokens.colors から生成）。背景透明バグ防止＝§2 */
.has-base-color { color: var(--wp--preset--color--base) !important; }
.has-white-color { color: var(--wp--preset--color--white) !important; }
.has-ink-color { color: var(--wp--preset--color--ink) !important; }
.has-ink-soft-color { color: var(--wp--preset--color--ink-soft) !important; }
.has-accent-color { color: var(--wp--preset--color--accent) !important; }
.has-page-backdrop-color { color: var(--wp--preset--color--page-backdrop) !important; }
.has-error-color { color: var(--wp--preset--color--error) !important; }
.has-veil-color { color: var(--wp--preset--color--veil) !important; }
.has-black-color { color: var(--wp--preset--color--black) !important; }
.has-base-background-color { background-color: var(--wp--preset--color--base) !important; }
.has-white-background-color { background-color: var(--wp--preset--color--white) !important; }
.has-ink-background-color { background-color: var(--wp--preset--color--ink) !important; }
.has-ink-soft-background-color { background-color: var(--wp--preset--color--ink-soft) !important; }
.has-accent-background-color { background-color: var(--wp--preset--color--accent) !important; }
.has-page-backdrop-background-color { background-color: var(--wp--preset--color--page-backdrop) !important; }
.has-error-background-color { background-color: var(--wp--preset--color--error) !important; }
.has-veil-background-color { background-color: var(--wp--preset--color--veil) !important; }
.has-black-background-color { background-color: var(--wp--preset--color--black) !important; }

/* ---------- (2) WP忠実ベース <- scripts/templates/wp-faithful-base.css ---------- */
/* =====================================================================
   wp-faithful-base.css — 実WordPress を忠実に再現する「不変ベース」
   ---------------------------------------------------------------------
   ★全プロジェクト共通。サイトごとに書き換えない（＝WPシミュレータ層）。
   過去の忠実性バグ（背景透明 / contentSize / columns縦揃え / cover padding /
   flex stretch / cover overlayのz-index）は全てこの層。1ファイルに固定して再発を防ぐ。

   使い方: 各サイトの style.css 冒頭で読み込む:
     @import "wp-faithful-base.css";
   このファイルは token 変数（--wp--preset--*）が :root で定義済みである前提。
   token は site の style.css / tokens.css 側で定義する（gen-root-css.mjs）。
   ===================================================================== */

/* box-sizing */
* { box-sizing: border-box; }
.wp-block-group { box-sizing: border-box; }

/* body margin: WP/テーマは body 既定 8px マージンを除去（alignfull が端まで届く前提）。
   静的にこれが無いと alignfull が 8px 内側に入り x=8/w=幅-16 で WP とズレる（型非依存）。 */
html, body { margin: 0; }

/* ★body 背景／文字色: WP の global-styles は body に background/color を必ず持つが、静的で未指定だと
   body が透明＝プレビューで暗幕が透けて「暗いサイト」に誤認、かつ WP と不一致になる（毎サイト踏む）。
   ここで必ず出す＝decorations で書き忘れても透明にならない。ページ背景は `base` スラッグが正
   （tokens.colors に base を置く＝自由デザインの約束）。未定義なら白にフォールバック。
   decorations の body 規則は style.css の後段なので、必要ならサイト側で上書きできる。 */
body { background-color: var(--wp--preset--color--base, #ffffff); color: var(--wp--preset--color--text, #2c2622); }

/* constrained: WP は constrained の「子」を contentSize 幅に絞る（blanket で属性を潰さない＝§4.6） */
.is-layout-constrained > * { max-width: var(--content-size, 1140px); margin-left: auto; margin-right: auto; }
.is-layout-constrained > .alignfull { max-width: none; }
.alignfull { max-width: none; width: 100%; }

/* ★block-gap（flow/constrained）: CSS の gap: は flex/grid 専用で flow には無効。WP は flow/constrained の
   子に margin-block-start で block-gap を入れる。これを忠実再現する（無いと blockGap 指定のセクションで
   子（FAQグループ・News行リスト等）が 0px で密着＝スペース欠け）。値はマークアップ側が
   --wp--style--block-gap で渡す（inject-block-gap.mjs が inline gap: から自動補完）。未設定なら 0＝無害。 */
.is-layout-constrained > * + *,
.is-layout-flow > * + * { margin-block-start: var(--wp--style--block-gap, 0); }

/* ★段落の既定マージン除去: WP/TT5 は core paragraph の margin を 0 にし、要素間スペースは block-gap
   （flow/constrained の margin-block-start）か flex/grid の gap で出す。静的の <p> は UA 既定の
   margin（上下 ~1em）を残すため、flex カード内（card-body / voice-card 等）で WP より縦が膨らみ
   measure の h が合わない（型非依存・毎サイト踏む）。ここで 0 にして静的==WP にする。 */
p { margin: 0; }

/* ★見出しの既定マージン除去: WP/TT5 は core heading の margin を 0 にし、要素間スペースは block-gap で出す。
   静的の hN は UA 既定マージン（~0.67em）を残すため WP より縦が膨らむ。**要素セレクタ（低詳細度）で 0** に
   するのがミソ: 上の `.is-layout-constrained > * + *`（block-gap）が勝てるので、非先頭の見出しは block-gap 分
   だけ離れ（WP と同じ）、先頭の見出しは 0 になる。`.wp-block-heading{margin:0}` を decorations に書くと
   block-gap と同詳細度で後勝ちし block-gap を殺す（plan の page-header で h1↔eyebrow 間が詰まる）ので、ここで element 指定にする。 */
h1, h2, h3, h4, h5, h6 { margin: 0; }

/* flex: WP は flex グループに align-items:flex-start を出力（子が内容幅に縮む。stretch だと見出し幅がズレる） */
.is-layout-flex { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--space-md, 24px); align-items: flex-start; }

/* columns: 縦揃えはクラス起点（blanket の align-items:center にしない＝§3.8） */
.wp-block-columns { display: flex; gap: var(--wp--preset--spacing--space-xl, 48px); }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column.is-vertically-aligned-center { align-self: center; }

.wp-block-image { margin: 0; }
.wp-block-image img { max-width: 100%; height: auto; }   /* WP/テーマ既定。無いと原寸画像がカラムを突き破る（初回バグの定番） */
/* 画像は既定で角丸なし（＝WP/TT5 の実挙動。四角が忠実）。角丸が欲しい設計の時だけ
   そのサイトの tokens/decorations で `.wp-block-image img{border-radius:…}` を付ける。
   ★ここに固定の border-radius を焼かない（全サイトの画像が勝手に丸くなる＝美的デフォルトの混入）。 */
/* ★constrained の「直接の子」画像は他の子と同様に中央寄せ（WP の実挙動）。
   上の margin:0 が constrained 子の中央寄せ（margin-inline:auto）を同詳細度で打ち消し、
   記事本文(article-body 等)直下の figure が左寄せになるのを防ぐ（型非依存・毎サイト踏む）。 */
.is-layout-constrained > .wp-block-image { margin-left: auto; margin-right: auto; }

/* テキスト配置 */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }

/* ★WP プリセット色ユーティリティ（has-{slug}-color / has-{slug}-background-color）は
   パレットのスラッグ依存なので、ここには固定で書かない。
   build-css.mjs が tokens.json の colors から生成して style.css に挿入する（!important も WP に合わせる）。
   無いと has-*-background-color が静的で無視され全セクション背景が透明になる（背景バグの元）。 */

/* ボタン（基本。色は has-スラッグ や インラインで付与） */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--space-sm, 16px); }
.wp-block-button__link {
  display: inline-block; text-decoration: none; cursor: pointer;
  padding: 16px 36px; /* TT5 既定ボタン padding（型非依存）。静的に無いと WP だけ大きくなる（h・x ズレ） */
  border-radius: 0;   /* 四角＝中立（WP/TT5 既定の pill を打ち消す）。build-theme-json がこの値を導出＝静的==WP。
                         ★角丸・hover・transition は"スタイル"なので焼かない。欲しい設計だけ decorations で付ける（REMOVED-STYLE-DEFAULTS.md）。 */
}
/* ★outline スタイル: WP core の「Outline」は透明背景＋2px 枠（枠色＝文字色 currentColor）。
   静的ベースに無いと is-style-outline ボタンが塗りボタンに見える（枠が出ない）。型非依存。
   枠色を文字と変えたい等の個別調整は当該ボタンの css 属性で。 */
.is-style-outline > .wp-block-button__link { background-color: transparent; border: 2px solid currentColor; }

/* 見出しフォントは"スタイル"（サイト毎の選択）→ 焼かない。未指定なら body フォントを継承（中立）。
   serif 見出しにしたい等はそのサイトの decorations で `.wp-block-heading{font-family:var(--…serif)}`。
   build-theme-json がその値を CSS から導出して global-styles に出すので静的==WP（REMOVED-STYLE-DEFAULTS.md）。 */

/* ★ロゴ（site-title）のリンク色: WP core は site-title の <a> を color:inherit にする
   （`.wp-block-site-title a{color:inherit}`）。静的でロゴを <p class="site-logo-text"><a> で書くと
   <a> が既定リンク色（青）になり WP と不一致＝毎サイト踏む。WP挙動を忠実再現する。 */
.site-logo-text a { color: inherit; text-decoration: none; }

.wp-block-list { padding-left: 1.2em; }
.wp-block-list li { margin-bottom: var(--wp--preset--spacing--space-xs, 8px); }
.wp-block-separator { border: none; border-top: 1px solid var(--wp--preset--color--border); margin: var(--wp--preset--spacing--space-xl, 48px) auto; }

/* Cover の WP プリミティブ（グラデ等の装飾はサイト側 style.css に書く）。
   ・padding:16px = WP core の最小 padding ・inner-container は z-index:2 で overlay の上 */
.wp-block-cover { position: relative; display: flex; align-items: center; overflow: hidden; padding: 16px; background-size: cover; background-position: center; }
.wp-block-cover__image-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; }

/* レスポンシブの不変部分（columns 縦積み・flex 均等カードの縦積み） */
@media (max-width: 768px) {
  .wp-block-columns { flex-direction: column; gap: var(--wp--preset--spacing--space-lg, 32px); }
  [style*="flex-basis:0"] { flex-basis: 100% !important; }
}

/* ---------- (3) サイト固有の装飾 <- site/css/decorations.css ---------- */
/* =====================================================================
   EARTH — decorations.css
   DESIGN.md 準拠。ブラー背景（アートワーク）の上に浮かぶ大きな角丸のすり
   ガラスパネル（グラスモーフィズム）。ディープネイビー #0F2350 × ピンク
   #EF8C95 の抑制された2色。欧文 Univers Next Pro / 和文 DNP 秀英角ゴシック銀 Std。
   ※ WordPress化は保留中。viewport単位を含む表現力の高いCSSを優先し、
     validate-blockmap は警告のみとする。ここでは leaf クラスと自己スコープを基本に書く。
   ===================================================================== */

/* ページ間遷移をクロスフェードで継ぐ（Chrome/Edge/Safari 18+。非対応は従来どおり）。
   ホームのセクション画像と遷移先の背景は同一画像なので、退場モーション→全面画像→
   次ページ背景が切れ目なくつながる */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

:root {
  /* ★2種のガラス質感を変数で切替:
     既定＝つるん光沢ガラス（ぼかし弱め＝クリアに透ける＋強い艶ハイライト）。
     hover/押下＝磨りガラス（ぼかし強め＝拡散＋マットな白）。 */
  /* blur は 8〜16px に収める（16px 超は GPU コストが指数的に増え見た目の向上もない）。
     saturate を高めに掛けて Apple 風の鮮やかさを出す（背後の色が濁らない）。 */
  --g-filter: blur(8px) saturate(1.4);            /* 既定＝光沢（クリア） */
  --g-filter-frost: blur(16px) saturate(1.8);     /* hover/押下＝磨りガラス */
  --glass-bg: rgba(255, 255, 255, 0.14);          /* 既定はクリア（低不透明） */
  --glass-strong: rgba(255, 255, 255, 0.44);      /* 磨りガラス時のマット地 */
  --glass-border: 1px solid rgba(255, 255, 255, 0.62);
  /* 上辺の光の反射（内側ハイライト） */
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /* 光沢の艶: 上辺の鋭いハイライト＋上半分の柔らかなシーン（つるん） */
  --glass-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 18px 32px -22px rgba(255, 255, 255, 0.7);
  /* 柔らかい落ち影（ネイビー寄りで作品となじむ）。影はガラスの立体化のみに使う。
     ★3層構成＝コンタクト（密・濃）＋ミッド＋アンビエント（遠・拡散・薄）。
     光源は真上で全サイト統一（水平オフセット0）。色は背景ネイビーの低彩度。 */
  --glass-shadow:
    0 1px 2px rgba(20, 24, 60, 0.10),
    0 8px 20px -12px rgba(20, 24, 60, 0.16),
    0 22px 55px -28px rgba(20, 24, 60, 0.24);
  --glass-shadow-lg:
    0 2px 3px rgba(20, 24, 60, 0.09),
    0 12px 28px -16px rgba(20, 24, 60, 0.17),
    0 34px 78px -30px rgba(20, 24, 60, 0.28);
  --glass-shadow-sm:
    0 1px 2px rgba(20, 24, 60, 0.11),
    0 4px 10px -4px rgba(20, 24, 60, 0.13),
    0 10px 26px -16px rgba(20, 24, 60, 0.20);
  /* 押し込まれて沈む表現（内側の影＝凹み。hover の浮上と対）。
     中央まで暗くするため「上辺の濃い影」＋「全周から内側へ広がる影」の2層。 */
  --glass-sunk-bg: rgba(15, 35, 80, 0.16);
  --glass-inset: inset 0 3px 9px rgba(15, 35, 80, 0.42), inset 0 0 20px rgba(15, 35, 80, 0.22);
  --header-h: 52px;
  --radius-panel: 32px;
  --radius-card: 24px;
  --radius-pill: 9999px;
  /* モーション・イージング（DESIGN §7）: 浮力／浮上／パネル開閉を集約。 */
  --ease-buoyant: cubic-bezier(0.34, 1.3, 0.44, 1);
  --ease-surface: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-slide: cubic-bezier(0.4, 0, 0.2, 1);
  /* 重なり順は数値を各コンポーネントへ直書きせず、役割で管理する。値は変更しない。 */
  --z-scroll-hint: 50;
  --z-floating-control: 60;
  --z-menu-panel: 90;
  --z-header: 100;
  --z-logo: 110;
  --z-control: 111;
  --z-control-active: 112;
  --z-loader: 200;
  --z-lightbox: 300;
}

/* backdrop-filter 非対応環境のフォールバック: ぼかしが効かないとガラス地
   （白0.14）だけでは写真背景の上で文字の可読性が保証されない → 地を不透明寄りに。
   変数の差し替えのみ＝block-mappable を保ったまま全パネルに効く。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-strong: rgba(255, 255, 255, 0.92);
  }
  /* ローカルで --glass-fill を薄く上書きしている長文パネルも底上げ */
  .article-panel, .form-panel { --glass-fill: rgba(255, 255, 255, 0.85); }
}

/* ---------- ベース（§15: body の weight/letter-spacing を明示） ---------- */
html { background-color: var(--wp--preset--color--page-backdrop); }
/* ★ブラー背景は body に載せる。ベースCSSの body{background-color:base(#fff)} を
   background ショートハンドで上書きしないと白い不透明地が画像を覆う（＝真っ白バグ）。 */
body {
  margin: 0;
  min-height: 100svh;
  background: var(--wp--preset--color--page-backdrop) url("../images/bg-2.jpg") center center / cover no-repeat fixed;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--jp);
  font-size: var(--wp--preset--font-size--body);
  /* 和文 dnp-shuei-gothic-gin-std は静的 400/500 の2ウェイト提供。
     本文400・見出し500が実フェイスに一致するので font-weight で普通に指定できる。 */
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
/* ページごとにブラー背景の色味を変える（DESIGN §8）。class は <html> に付くので body を子で指定 */
html.page-philosophy body { background-image: url("../images/bg-2.jpg"); }
html.page-journal body    { background-image: url("../images/bg-1.jpg"); }
html.page-news body       { background-image: url("../images/bg-3.jpg"); }
html.page-contact body    { background-image: url("../images/bg-4.jpg"); }
html.page-privacy body    { background-image: url("../images/bg-5.jpg"); }
html.page-404 body        { background-image: url("../images/404.jpg"); }
html[class*="page-journal-"] body { background-image: url("../images/bg-1.jpg"); }
html[class*="page-news-"] body    { background-image: url("../images/bg-3.jpg"); }

a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

.is-sub .site-main { padding-top: var(--header-h); }

/* 共通の中央カラム */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 112px 40px 128px;
}
.container.narrow { max-width: 960px; }

/* ---------- パンくずリスト ----------
   現在地は通常濃度、移動できる祖先のみ薄くして階層を静かに示す。 */
.breadcrumbs {
  margin-top: var(--wp--preset--spacing--space-xl);
  text-align: left;
}
.breadcrumbs__trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--space-xs);
  margin: 0;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--jp);
  font-size: var(--wp--preset--font-size--caption);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.breadcrumbs__link,
.breadcrumbs__separator,
.breadcrumbs__current.is-en {
  font-family: var(--wp--preset--font-family--en);
}
.breadcrumbs__link {
  color: var(--wp--preset--color--ink);
  opacity: 0.45;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.breadcrumbs__separator { opacity: 0.35; }
.breadcrumbs__current { opacity: 1; }
.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
  color: var(--wp--preset--color--accent);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumbs__link:focus-visible {
  outline: 1px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
}

/* ---------- 見出し（§15: 行間・字間・マージン明示） ---------- */
h1, h2, h3, h4, .wp-block-heading {
  color: var(--wp--preset--color--ink);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}
.eyebrow {
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 12px;
}

/* =====================================================================
   ヘッダー / ナビ（DESIGN §6.1）
   ===================================================================== */
/* 他のグラスパネルに合わせた、浮遊するピル型ヘッダー（§5 グラスモーフィズム） */
.site-header {
  position: fixed;
  top: 14px; left: 20px; right: 20px;
  margin: 0 auto;
  max-width: 1200px;
  z-index: var(--z-header);
  height: var(--header-h);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-shadow), var(--glass-gloss);
  transition: opacity 0.45s var(--ease-surface), transform 0.45s var(--ease-surface);
}
@media (prefers-reduced-motion: no-preference) {
  /* トップページから下層ページへ入った時だけ、ヘッダーを上から静かに表示する。 */
  html.js.is-sub.is-from-home .site-header {
    animation: headerIn 0.65s var(--ease-surface) 0.05s both;
  }
  @keyframes headerIn {
    from { opacity: 0; transform: translateY(-18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
/* 言語切替後の初期位置合わせでは、左上ロゴだけを即時に確定する。
   クラスは初期同期が終わった時点で main.js が外し、通常スクロール時の
   ロゴ移動はそのまま残す。 */
html.page-index.is-language-switch .home-corner-logo,
html.page-index.is-language-switch .hero-artwork-symbol,
html.page-index.is-language-switch .hero-bg-logo,
html.page-index.is-language-switch .hero-bg-logo > .hero-bg-logo__ink,
html.page-index.is-language-switch .hero-bg-logo > .hero-bg-logo__white {
  animation: none !important;
  transition: none !important;
}
html.page-index.is-language-switch .home-split__text {
  transform: translateX(0) !important;
  transition: none !important;
}
html.page-index.is-language-switch .home-split__text > * {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}
/* ホーム（page-index）: 白イントロの間はヘッダーを隠す。CSSで最初から隠す＝
   初回描画のフラッシュなし。main.js が IntersectionObserver で is-shown を切替、
   作品セクションに入るとともにフェードイン。JS無効時は .js が付かず常時表示 */
html.js.page-index .site-header {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
html.js.page-index .site-header.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.45s var(--ease-surface), transform 0.45s var(--ease-surface);
}
/* トップページはどの表示幅でもヘッダーを使わず、専用MENUだけを表示する。 */
html.page-index .site-header { display: none; }
/* ヘッダーを消したトップページでも、ホームへ戻れるロゴだけを左上に残す。 */
html.page-index .home-corner-logo {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  z-index: var(--z-control);
  margin: 0;
  line-height: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-surface),
    visibility 0s linear 0.8s;
}
/* イントロ中は表示せず、アートワークが現れた後に main.js が付与する。 */
html.page-index .home-corner-logo.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.8s var(--ease-surface),
    visibility 0s linear 0s;
}
html.page-index .home-corner-logo a {
  display: block;
  min-height: 22px;
}
html.page-index .home-corner-logo img {
  width: 118px;
  height: auto;
}
/* 言語切替: 共通ページでは左下に固定し、選択中の言語を沈みガラスで示す。
   トップのイントロ／アートワークでは作品ロゴと干渉するため非表示にする。 */
.language-switcher {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: var(--z-control-active);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-shadow-sm), var(--glass-gloss);
}
.language-switcher__link {
  min-width: 30px;
  min-height: 30px;
  padding: 5px 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--en);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
}
.language-switcher__link.is-current {
  background: var(--glass-sunk-bg);
  box-shadow: var(--glass-inset);
}
.language-switcher__link.is-disabled {
  opacity: 0.48;
  cursor: default;
}
.language-switcher__divider {
  width: 1px;
  height: 12px;
  background: rgba(15, 35, 80, 0.24);
}
/* 言語切替中も文字のレイアウトは動かさず、選択中のガラスだけを移動させる。 */
.language-switcher__link.liquid-glass-source,
.language-switcher__link.liquid-glass-target {
  z-index: 2;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.page-index.home-at-intro .language-switcher,
html.page-index.home-artwork-active .language-switcher {
  display: none;
}
.site-header__inner {
  height: 100%;
  padding: 0 14px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ロゴにもナビと同じグラスピルの hover（浮上＋磨りピル） */
.site-logo {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  margin-left: -14px; /* ピルの余白ぶん戻し、ロゴの左端位置は従来のまま */
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background 0.25s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease;
  min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
  .site-logo:hover {
    background: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
.site-logo img { width: 118px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a {
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, background 0.25s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease;
}
/* ホバー & 現在ページ = グラスピル（元 hover の見た目を現在ページにも適用し、位置を分かりやすく） */
.site-nav a.is-current {
  color: var(--wp--preset--color--ink);
  /* 白マット(--glass-strong 0.44)は強すぎるため控えめに。磨りのぼかしは保つ */
  background: rgba(255, 255, 255, 0.24);
  -webkit-backdrop-filter: var(--g-filter-frost);
  backdrop-filter: var(--g-filter-frost);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    color: var(--wp--preset--color--ink);
    background: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
/* 現在ページは「凹んで沈む」表現（hover の浮上と対）。アクセント縁＋内側の影＋わずかに押し込み */
/* 現在ページ＝沈み込みを優先。アクセントの明るい文字・縁は「浮いて」見えるので使わず、
   暗い地＋内側の影＋インク色の文字で recess（凹み）として示す。 */
.site-nav a.is-current {
  color: var(--wp--preset--color--ink);
  border-color: transparent;
  background: var(--glass-sunk-bg);
  box-shadow: var(--glass-inset);
  transform: translateY(1px);
}

/* ハンバーガー（SPのみ表示） */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background 0.2s ease,
    transform 0.42s var(--ease-buoyant),
    border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav-toggle:hover {
    background: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1px;
  margin: 4px auto;
  background: var(--wp--preset--color--ink);
  transition: transform 0.42s var(--ease-buoyant), opacity 0.25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* 全画面グラスメニュー（SP） */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu-panel);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--g-filter-frost);
  backdrop-filter: var(--g-filter-frost);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  overscroll-behavior: contain;
}
html.menu-open,
body.menu-open { overflow: hidden; }
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open {
  opacity: 1;
  transition: opacity 0.4s var(--ease-surface);
}
.mobile-nav { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.mobile-nav a {
  font-family: var(--wp--preset--font-family--en);
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  padding: 10px 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, background 0.25s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-nav a:hover {
    color: var(--wp--preset--color--ink);
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
.mobile-nav a.is-current {
  color: var(--wp--preset--color--ink);
  background: var(--glass-sunk-bg);
  -webkit-backdrop-filter: var(--g-filter-frost);
  backdrop-filter: var(--g-filter-frost);
  border-color: transparent;
  box-shadow: var(--glass-inset);
}

/* トップページ専用MENU。内部スクロールを止めず、全幅で右上に固定する。 */
html.page-index .home-menu {
  position: fixed;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: var(--z-control);
}
html.page-index .home-menu-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 44px;
  padding: 8px 16px;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.08em;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: var(--glass-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--glass-shadow-sm), var(--glass-gloss);
  cursor: pointer;
  transition: color 0.2s ease, background 0.25s ease,
    transform 0.42s var(--ease-buoyant), border-color 0.25s ease,
    box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  html.page-index .home-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.24);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
html.page-index .home-menu-trigger[aria-expanded="true"] {
  background: var(--glass-sunk-bg);
  box-shadow: var(--glass-inset);
  transform: translateY(1px);
}
html.page-index .home-menu-panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  width: 240px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--g-filter-frost);
  backdrop-filter: var(--g-filter-frost);
  border: var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-shadow), var(--glass-gloss);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.32s var(--ease-surface);
}
html.page-index .home-menu-panel[hidden] { display: none; }
html.page-index .home-menu-panel.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.32s var(--ease-surface), transform 0.32s var(--ease-surface);
}
html.page-index .home-menu.is-liquid-menu-transition .home-menu-panel {
  opacity: 1;
  pointer-events: none;
  transform: translateY(0);
  transition: none;
}
html.page-index .home-menu.is-liquid-menu-transition .home-menu-panel > a {
  opacity: 0;
}
html.page-index .home-menu-panel a {
  display: block;
  padding: 8px 12px;
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.14s ease, color 0.2s ease, background 0.25s ease,
    transform 0.42s var(--ease-buoyant), border-color 0.25s ease;
}
html.page-index .home-menu-panel a[data-focus-origin="pointer"]:focus,
html.page-index .home-menu-panel a[data-focus-origin="pointer"]:focus-visible {
  outline: none;
  outline-offset: 0;
}
html.page-index .home-menu-trigger[data-focus-origin="pointer"]:focus,
html.page-index .home-menu-trigger[data-focus-origin="pointer"]:focus-visible {
  outline: none;
  outline-offset: 0;
}
@media (hover: hover) and (pointer: fine) {
  html.page-index .home-menu-panel a:hover {
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
html.page-index .home-menu-panel a.is-current {
  background: var(--glass-sunk-bg);
  box-shadow: var(--glass-inset);
  transform: translateY(1px);
}

/* PCトップの操作系: MENUを右上へ置く。 */
@media (min-width: 768px) {
  html.page-index .home-menu {
    top: max(14px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
  }
  html.page-index .home-menu-panel {
    top: calc(100% + 12px);
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-12px);
  }
  html.page-index .home-menu-panel.is-open,
  html.page-index .home-menu.is-liquid-menu-transition .home-menu-panel {
    transform: translateY(0);
  }
}

/* =====================================================================
   ローディング（DESIGN §7: 白背景にロゴフェードイン）
   ===================================================================== */
/* JS が有効な時だけ表示（無効/失敗時にトップが白画面で固まるのを防ぐ） */
.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--wp--preset--color--white);
  place-items: center;
  transition: opacity 0.8s ease;
}
.js .loader { display: grid; }
.loader-logo {
  width: 150px;
  opacity: 0;
  animation: loaderFade 1.2s ease-out forwards;
}
@keyframes loaderFade { to { opacity: 1; } }
body.loaded .loader { opacity: 0; pointer-events: none; }

/* =====================================================================
   トップページ ヒーロー（DESIGN §5 キービジュアル・案A）
   ===================================================================== */
/* 構成: 背景=ブラーした top-bg ／全画面のアートワーク（フルートガラス越し）／
   右中央=クレジット・下中央=縦組みロゴ（全板が晴れた時に登場） */
.hero {
  scroll-snap-align: start;
  position: relative;
  min-height: 100svh;
  padding: 0;
}
.hero .wp-block-cover__image-background { object-fit: cover; object-position: center; }
.hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: calc(var(--header-h) + 28px) 40px 56px;
  box-sizing: border-box;
}
/* 全画面アートワーク: ブラー背景（top-bg=作品のブラー版）の上に重ね、
   一拍おいて「焦点が合う」ようにフェードイン（わずかな縮小の収束つき） */
.hero-artwork-full {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  overflow: hidden;
}
.hero-artwork-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 正方形の作品の「下端」を基準にトリミング（上側が切れる） */
  object-position: center bottom;
}
.hero-artwork-full.fade-in.is-visible {
  animation-name: heroReveal;
  animation-duration: 1.6s;
  animation-delay: 0.6s;
  animation-timing-function: var(--ease-surface);
}
/* 奥（小さい・深い）から手前へ浮上して全面に届く。縮んでいる間に見える縁の外は
   ブラー背景（＝同じ絵の水中）なので、水を抜けて上がってくるように見える。
   ★全画面の blur アニメは高コストのため使わない（ぼけ→鮮明はブラー背景との
   クロスフェードが担う） */
@keyframes heroReveal {
  0%   { opacity: 0; transform: translateY(26px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* 縦の磨りガラス（フルートガラス）: 全面アートワークの上に重ね、作品が縦のガラス板で
   分断されて見えるようにする。作品より後・ラベル(credit/logo)より前のDOM順なので、
   作品だけが磨りガラス越しにぼけ、文字は前面で鮮明なまま。単一ブロック＋自己完結クラス
   （block-mappable）。--slat-target＝基準幅、--slat-count＝板数、--slat＝均等化後の幅。 */
.hero-glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  pointer-events: none;
  --slat-target: 120px;
  --slat-count: 12;
  /* JS実行前／WebGL不可時も右端に端数板を作らない。WebGL有効時はmain.jsが
     表示幅から約120px刻みの板数を求め、同じ変数を実pxで上書きする。 */
  --slat: calc(100% / var(--slat-count));
  /* 磨り（ぼかし）と屈折はシェーダ側（.water-canvas, uGlass）が担当。ここは常時見える
     ガラスの分割線・シームのハイライト・板の明暗のみ（カーソルで晴れても残る枠）。
     WebGL不可時は下の backdrop-filter フロスト＋この陰影＝進歩的強化 */
  /* フルートの陰影＋分割線（板境界=影の谷＋ハイライト、板フチの明暗、交互の濃淡） */
  background-image:
    repeating-linear-gradient(90deg,
      rgba(30, 42, 80, 0.16) 0, rgba(30, 42, 80, 0.16) 1px,
      rgba(255, 255, 255, 0.75) 1px, rgba(255, 255, 255, 0.75) 2px,
      rgba(255, 255, 255, 0) 2px, rgba(255, 255, 255, 0) var(--slat)),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.30) 0,
      rgba(255, 255, 255, 0.06) 12px,
      rgba(255, 255, 255, 0.00) calc(var(--slat) * 0.5),
      rgba(30, 42, 80, 0.05) calc(var(--slat) - 12px),
      rgba(30, 42, 80, 0.10) var(--slat)),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) var(--slat),
      rgba(0, 0, 0, 0.04) var(--slat), rgba(0, 0, 0, 0.04) calc(var(--slat) * 2));
  /* WebGL不可・タッチ端末・reduced-motion 用のフロスト（磨りの実体）。
     シェーダが動く時は has-water（隣接兄弟）で無効化＝二重ぼかしを避け、
     カーソルで晴れる演出はシェーダ側が担う */
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
  backdrop-filter: blur(9px) saturate(1.05);
}
.hero-artwork-full.has-water + .hero-glass {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* フルートガラスの板フチ（シームのハイライト線）にも分光エッジ（§5・v1.15）を
   部分的に乗せる。mask は要素全体に効くので色ごとに擬似要素を分け、
   各板の境界1pxのハイライト線だけを着色（ピンク=画面左上域 / 水色=右下域）。
   is-all-clear では親ごと消えるので晴れた後には残らない */
.hero-glass::before,
.hero-glass::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hero-glass::before {
  background-image: repeating-linear-gradient(90deg,
    rgba(239, 140, 149, 0) 0, rgba(239, 140, 149, 0) 1px,
    rgba(239, 140, 149, 0.55) 1px, rgba(239, 140, 149, 0.55) 2px,
    rgba(239, 140, 149, 0) 2px, rgba(239, 140, 149, 0) var(--slat));
  -webkit-mask-image: linear-gradient(115deg, #fff 0%, transparent 30%);
          mask-image: linear-gradient(115deg, #fff 0%, transparent 30%);
}
.hero-glass::after {
  background-image: repeating-linear-gradient(90deg,
    rgba(194, 229, 235, 0) 0, rgba(194, 229, 235, 0) 1px,
    rgba(194, 229, 235, 0.8) 1px, rgba(194, 229, 235, 0.8) 2px,
    rgba(194, 229, 235, 0) 2px, rgba(194, 229, 235, 0) var(--slat));
  -webkit-mask-image: linear-gradient(115deg, transparent 45%, #fff 68%, transparent 92%);
          mask-image: linear-gradient(115deg, transparent 45%, #fff 68%, transparent 92%);
}
/* タッチ端末（=「なでて晴れる」が無い環境）は磨りを弱め、作品が常時読めるようにする */
@media (hover: none), (pointer: coarse) {
  .hero-glass {
    -webkit-backdrop-filter: blur(4px) saturate(1.03);
    backdrop-filter: blur(4px) saturate(1.03);
  }
}
/* ガラスの縦線は作品と同時に出現（heroReveal と同じ 0.6s 遅延）。汎用 fade-in の縦スライド
   (riseFromWater) だと線がずれるので、不透明度のみの fadeIn で上書き（縦線は動かさない）。 */
.hero-glass.fade-in.is-visible {
  animation: fadeIn 1.6s var(--ease-surface) 0.6s backwards;
  transition: opacity 0.8s ease;
}
/* 全板が晴れた（main.js が付与）: 縦線・陰影ごと消えて素の作品だけになる
   （後方の .fade-in.is-visible { opacity:1 } に勝つよう詳細度を上げる） */
.hero-glass.is-all-clear,
.hero-glass.fade-in.is-visible.is-all-clear { opacity: 0; }
/* クレジットと縦ロゴは「全板が鮮明になった瞬間」に登場（シェーダ動作時のみ）。
   has-water が無い環境（タッチ・WebGL不可・reduced-motion）は従来の1.3s遅延で出す */
.hero-artwork-full.has-water ~ .hero-definition,
.hero-artwork-full.has-water ~ .hero-credit,
.hero-artwork-full.has-water ~ .hero-bg-logo {
  opacity: 0;
  animation: none;
  transition: opacity 1.0s ease 0.15s;
}
/* 後方定義の .hero-bg-logo.fade-in.is-visible { animation: surfaceUp … } に勝つ */
.hero-artwork-full.has-water ~ .hero-bg-logo.fade-in.is-visible { animation: none; }
.hero-artwork-full.has-water ~ .hero-glass.is-all-clear ~ .hero-definition,
.hero-artwork-full.has-water ~ .hero-glass.is-all-clear ~ .hero-credit,
.hero-artwork-full.has-water ~ .hero-glass.is-all-clear ~ .hero-bg-logo {
  opacity: 1;
}
/* 地球の辞書本文: 下層セクションの左ガラス本文と同じ左端・上下中央に置く。 */
.hero-definition {
  position: absolute;
  z-index: 2;
  left: calc(max(20px, (100% - 1200px) / 2) + 28px);
  top: 50%;
  width: min(48vw, 520px);
  margin: 0;
  transform: translateY(-50%);
  color: var(--wp--preset--color--ink);
  font-weight: 500;
  text-align: left;
  text-shadow: 0 1px 2px rgba(15, 35, 80, 0.95),
    0 3px 12px rgba(15, 35, 80, 0.82);
  pointer-events: none;
  display: none;
}
/* タブレットでは、固定ロゴとMENUの間の実際の空間を基準に本文を中央へ置く。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-definition { top: calc(50% - 14px); }
}
.hero-definition__term {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
.hero-definition__body {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: 0.02em;
}
/* クレジット: 右・上下中央（全画面の作品の上）。 */
.hero-credit {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--ink);
  text-align: right;
  pointer-events: none;
}
@media (min-width: 768px) {
  html.page-index .hero .wp-block-cover__inner-container {
    --hero-brand-width: min(
      1280px,
      70vw,
      calc(100vw - max(20px, env(safe-area-inset-left)) - 72px),
      125svh
    );
  }
  /* PCでは作品上端の中央にクレジットを置く。既存のfade-inは縦方向だけを担当。 */
  .hero .wp-block-cover__inner-container > .hero-credit {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: 0;
    left: 0;
    width: auto;
    flex: none;
    text-align: center;
  }
}
/* 登場順: 背景（即）→ 作品 0.6s〜 → クレジット・ロゴ 1.3s */
.hero-definition.fade-in.is-visible,
.hero-credit.fade-in.is-visible { animation-delay: 1.3s; }

/* ---------- 水面ゆらぎ（カーソル）: main.js が実行時生成 ----------
   .water-canvas = WebGL でカーソルの通り道の画像が屈折して揺らぐ（本命）。
   .water-ring  = WebGL 不可環境のフォールバック（波紋リング）。
   どちらも DOM は JS 生成のみ＝ブロックマークアップ不変（WP化に影響しない）。 */
.water-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* canvas が画像描画を引き継ぐ（下の img は非表示・ドリフトはシェーダ側で再現） */
.has-water img,
.has-touch-water img { visibility: hidden; animation: none; }
.home-split__image.is-water-transition .water-canvas { visibility: hidden; }
.water-ring {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px; /* left/top は JS が px で設定（中心合わせ） */
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  /* 内側にもう一段薄い輪＝二重の波紋 */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: waterRing 1.5s var(--ease-surface) forwards;
}
@keyframes waterRing {
  0%   { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(11); }
}
/* （旧「額装の作品」.hero-artwork 一式は削除済み: 現マークアップは全画面の
   .hero-artwork-full で、額装・チルト・水面反映・creditIn は使われていない） */
/* アートワーク内の正規白ロゴ。PCでは文字が十分大きく見える横長サイズで左下に置く。 */
.hero-bg-logo {
  position: absolute;
  left: 50%;
  bottom: max(32px, 6svh);
  margin: 0 0 0 -26.5px;
  z-index: 1;
  pointer-events: none;
}
.hero-bg-logo img { width: 53px; height: auto; }
/* トップ左上のホームロゴと役割を分け、アートワークのロゴは各幅で表示する。 */
html.page-index .hero-bg-logo { display: none; }
/* 内部スクロール領域の外に置くことで、iOS Safariでもアートワークのロゴを
   次のセクションへまたいで画面上に保持し、縮小移動を途切れさせない。 */
html.page-index .home-logo-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-logo);
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
@media (min-width: 768px) {
  html.page-index .home-logo-overlay {
    --hero-brand-width: min(
      1280px,
      70vw,
      calc(100vw - max(20px, env(safe-area-inset-left)) - 72px),
      125svh
    );
  }
  html.page-index.home-artwork-active.home-artwork-clear .home-logo-overlay .hero-bg-logo,
  html.page-index.home-artwork-past .home-logo-overlay .hero-bg-logo {
    opacity: 1;
    visibility: visible;
  }
  html.page-index.home-artwork-active:not(.home-artwork-clear) .home-logo-overlay .hero-bg-logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  html.page-index.home-artwork-past .home-logo-overlay .hero-bg-logo {
    opacity: 1;
    visibility: visible;
  }
}
/* アートワーク中だけ、下層セクションの左上ロゴと同じ位置・サイズでシンボルだけを表示する。 */
.hero-artwork-symbol { display: none; }
@media (min-width: 768px) {
  html.page-index .hero-artwork-symbol {
    display: block;
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
    width: 22.33px;
    height: 22.33px;
    overflow: hidden;
    z-index: var(--z-control);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s var(--ease-surface), visibility 0s linear 0.8s;
  }
  html.page-index.home-artwork-active.home-artwork-clear .hero-artwork-symbol,
  html.page-index.home-artwork-past .hero-artwork-symbol {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
  }
  html.page-index .hero-artwork-symbol img {
    display: block;
    width: 22.33px;
    max-width: 22.33px;
    height: 22.33px;
  }
  html.page-index .hero-bg-logo {
    position: fixed;
    display: block;
    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
    width: var(--hero-brand-width);
    overflow: hidden;
    margin: 0;
    z-index: 3;
    visibility: hidden;
    opacity: 0;
    height: auto;
    transition:
      bottom 0.8s var(--ease-surface),
      left 0.8s var(--ease-surface),
      width 0.8s var(--ease-surface),
      height 0.8s var(--ease-surface),
      opacity 0.35s ease,
      visibility 0s linear 0.8s;
  }
  html.page-index.home-artwork-active .hero-bg-logo,
  html.page-index.home-artwork-past .hero-bg-logo {
    visibility: visible;
    transition:
      bottom 0.8s var(--ease-surface),
      left 0.8s var(--ease-surface),
      width 0.8s var(--ease-surface),
      height 0.8s var(--ease-surface),
      opacity 0.35s ease,
      visibility 0s linear 0s;
  }
  html.page-index.home-artwork-past .hero-bg-logo {
    left: calc(max(20px, env(safe-area-inset-left)) + 27.94px);
    bottom: calc(100dvh - 36.33px);
    width: 90.06px;
    height: 22.33px;
    opacity: 1 !important;
    animation: none;
    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
  }
  html.page-index.home-artwork-past .home-corner-logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
  html.page-index .hero-bg-logo > img {
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    display: block;
  }
  html.page-index .hero-bg-logo > .hero-bg-logo__ink {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s var(--ease-surface);
  }
  html.page-index.home-artwork-active .hero-bg-logo > .hero-bg-logo__white {
    /* 下の白SVGとガラス層を二重に重ねず、左パネルの --glass-fill と同じ
       rgba(255,255,255,0.74) をガラス層だけで表現する。 */
    opacity: 0;
    transition: opacity 0.8s var(--ease-surface);
  }
  html.page-index.home-artwork-past .hero-bg-logo > .hero-bg-logo__white {
    opacity: 1;
  }
  /* 大きいロゴだけ、他のパネルと同じ磨りガラス質感にする。
     文字の形状でマスクするため、ロゴ全体の矩形をぼかさず文字部分だけが
     背景を拡散し、白い光沢と薄い透過が残る。下層へ移動した後は通常の
     ネイビーロゴへ戻す。 */
  html.page-index .hero-bg-logo::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.74) 46%,
      rgba(255, 255, 255, 0.70) 100%);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    -webkit-mask: url("../images/earth-wordmark-white.svg?v=20260802-wordmark-2") center / 100% 100% no-repeat;
    mask: url("../images/earth-wordmark-white.svg?v=20260802-wordmark-2") center / 100% 100% no-repeat;
    filter: drop-shadow(0 1px 2px rgba(15, 35, 80, 0.18));
    transition: opacity 0.8s var(--ease-surface);
  }
  html.page-index.home-artwork-active .hero-bg-logo::before {
    opacity: 1;
  }
  html.page-index.home-artwork-past .hero-bg-logo > .hero-bg-logo__ink {
    opacity: 1;
  }
}
/* SPのアートワークは大きいロゴを左下に置く。Artwork by は現行SPの
   右側縦組みを維持し、次のセクションへ進んだ時だけロゴを左上へ収める。 */
@media (max-width: 767px) {
  html.page-index .hero-artwork-symbol {
    display: block;
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: max(20px, env(safe-area-inset-left));
    width: 22.33px;
    height: 22.33px;
    overflow: hidden;
    z-index: var(--z-control);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.8s var(--ease-surface), visibility 0s linear 0.8s;
  }
  html.page-index.home-artwork-active.home-artwork-ready .hero-artwork-symbol,
  html.page-index.home-artwork-past .hero-artwork-symbol {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
  }
  html.page-index.home-artwork-active.home-artwork-ready .hero-artwork-symbol,
  html.page-index.home-artwork-past .hero-artwork-symbol {
    transition: opacity 1.2s var(--ease-surface), visibility 0s linear 0s;
  }
  html.page-index .hero-artwork-symbol img {
    display: block;
    width: 22.33px;
    max-width: 22.33px;
    height: 22.33px;
  }
  html.page-index .hero-bg-logo {
    --hero-logo-start-bottom: calc(max(20px, env(safe-area-inset-bottom)) + 64px);
    --hero-logo-start-width: min(76vw, 360px);
    --hero-logo-start-height: min(18.6667vw, 88.42px);
    position: fixed;
    display: block;
    left: max(20px, env(safe-area-inset-left));
    top: auto;
    bottom: var(--hero-logo-start-bottom);
    width: var(--hero-logo-start-width);
    height: var(--hero-logo-start-height);
    overflow: hidden;
    margin: 0;
    z-index: 3;
    visibility: hidden;
    opacity: 0;
    transform: none;
    transition:
      left 1.2s var(--ease-surface),
      width 1.2s var(--ease-surface),
      height 1.2s var(--ease-surface),
      transform 1.2s var(--ease-surface),
      opacity 0.35s ease,
      visibility 0s linear 0.8s;
  }
  html.page-index.home-artwork-active.home-artwork-ready .hero-bg-logo,
  html.page-index.home-artwork-past .hero-bg-logo {
    visibility: visible;
    opacity: 1;
    transition:
      left 1.2s var(--ease-surface),
      width 1.2s var(--ease-surface),
      height 1.2s var(--ease-surface),
      transform 1.2s var(--ease-surface),
      opacity 1.0s ease,
      visibility 0s linear 0s;
  }
  html.page-index.home-artwork-active:not(.home-artwork-ready) .home-logo-overlay .hero-bg-logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  html.page-index.home-artwork-active.home-artwork-ready .home-logo-overlay .hero-bg-logo,
  html.page-index.home-artwork-past .home-logo-overlay .hero-bg-logo {
    animation: none;
  }
  /* アートワーク中は固定の下向き矢印と重ならないよう、ロゴを少し上へ置く。
     下層へ移った後の左上ロゴの位置は home-artwork-past で別途維持する。 */
  html.page-index.home-artwork-active.home-artwork-ready .home-logo-overlay .hero-bg-logo {
    bottom: var(--hero-logo-start-bottom);
    width: var(--hero-logo-start-width);
    height: var(--hero-logo-start-height);
    transform: none;
  }
  html.page-index.home-artwork-past .hero-bg-logo {
    left: calc(max(20px, env(safe-area-inset-left)) + 27.94px);
    top: auto;
    bottom: var(--hero-logo-start-bottom);
    width: 90.06px;
    height: 22.33px;
    transform: translate3d(0,
      calc(max(14px, env(safe-area-inset-top)) - 100dvh +
        var(--hero-logo-start-bottom) + 22.33px),
      0);
    opacity: 1;
    animation: none;
    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
  }
  html.page-index.home-artwork-past .hero-artwork-symbol {
    top: max(14px, env(safe-area-inset-top));
  }
  html.page-index.home-artwork-past .home-corner-logo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
  }
  html.page-index .hero-bg-logo > img {
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    display: block;
  }
  html.page-index .hero-bg-logo > .hero-bg-logo__ink {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s var(--ease-surface);
  }
  html.page-index.home-artwork-active .hero-bg-logo > .hero-bg-logo__white {
    opacity: 0;
    transition: opacity 1.2s var(--ease-surface);
  }
  html.page-index.home-artwork-past .hero-bg-logo > .hero-bg-logo__white {
    opacity: 1;
  }
  html.page-index .hero-bg-logo::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.74) 46%,
      rgba(255, 255, 255, 0.70) 100%);
    -webkit-backdrop-filter: var(--g-filter-frost);
    backdrop-filter: var(--g-filter-frost);
    -webkit-mask: url("../images/earth-wordmark-white.svg?v=20260802-wordmark-2") center / 100% 100% no-repeat;
    mask: url("../images/earth-wordmark-white.svg?v=20260802-wordmark-2") center / 100% 100% no-repeat;
    filter: drop-shadow(0 1px 2px rgba(15, 35, 80, 0.18));
    transition: opacity 1.2s var(--ease-surface);
  }
  html.page-index.home-artwork-active .hero-bg-logo::before {
    opacity: 1;
  }
  html.page-index.home-artwork-past .hero-bg-logo > .hero-bg-logo__ink {
    opacity: 1;
  }
  html.page-index .hero-bg-logo.fade-in.is-visible {
    animation: none;
  }
}
/* クレジットの文字と同じタイミング（1.3s）で水面から浮かび上がる */
.hero-bg-logo.fade-in.is-visible {
  animation: surfaceUp 1.0s var(--ease-surface) 1.3s both;
}

/* =====================================================================
   グラスパネル共通（DESIGN §5）
   ===================================================================== */
.glass {
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-gloss);
}

/* ★カーソルレンズ: ガラスの白い地をカーソル中心の「透明な穴」付きグラデにする。
   穴の部分は曇りが消え、下のブラー背景が透けて見える（backdrop-filter は残るので
   透けつつ滲む）。位置は JS が --lens-x/--lens-y に設定。要素外では穴を画面外へ退避。
   塗り色は --glass-fill（既定 --glass-bg。hover/active/長文パネルで切替）。 */
.glass,
.journal-card,
.news-item,
.site-header,
.home-menu-trigger {
  background: radial-gradient(circle var(--lens-r, 110px) at var(--lens-x, -999px) var(--lens-y, -999px),
    transparent 0, transparent 24%, var(--glass-fill, var(--glass-bg)) 66%);
}

/* ---- ガラス縁の彩り（分光エッジ） ----
   白い縁の上に、ガラスが光を分けるようなアクセント（ピンク）と水色 #C2E5EB を
   部分的にグラデーションで重ねる。実装は mask で中抜きした1.5pxのリング
   （::after）＝面のレンズ/ホバー背景・白い base の縁とは干渉しない。
   色が transparent の区間は下の白い縁がそのまま見える＝「部分的に」色づく */
/* ::after の基準位置。★.site-header は含めない（fixed を relative で上書きし
   ヘッダーが消える事故になる。fixed は absolute の基準になるのでそのままで良い） */
.glass, .journal-card, .news-item, .back-panel { position: relative; }
.site-nav a, .mobile-nav a, .site-logo, .footer-nav a, .tag-filter a, .form-submit { position: relative; }
.glass::after,
.journal-card::after,
.news-item::after,
.back-panel::after,
.back-to-top::after,
.site-header::after,
.site-logo::after,
.site-nav a::after,
.mobile-nav a::after,
.nav-toggle::after,
.home-menu-trigger::after,
.footer-nav a::after,
.tag-filter a::after,
.form-submit::after,
.home-split__image .img-view-more::after,
.home-split__text::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: linear-gradient(115deg,
    rgba(239, 140, 149, 0.55) 0%,
    rgba(239, 140, 149, 0) 22%,
    rgba(194, 229, 235, 0) 44%,
    rgba(194, 229, 235, 0.85) 62%,
    rgba(194, 229, 235, 0) 80%,
    rgba(239, 140, 149, 0.35) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
}
/* PCの縦組みラベルにはリングを付けず、SPでピル化した時だけ表示する。 */
.home-split__image .img-view-more::after { display: none; }
/* 対話要素は状態で色づく（ヘッダーピル本体は常時＝上の一覧に含まれたまま）:
   - ロゴピル = hover時
   - ナビピル = hover浮上時＋押下/現在ページ（沈み）時
   - フッターナビ = hover/押下（沈み）時
   - タグフィルタ・送信ボタン = 通常時から分光エッジを表示 */
.site-logo::after,
.site-nav a::after,
.mobile-nav a::after,
.nav-toggle::after,
.footer-nav a::after {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.home-menu-trigger::after {
  opacity: 1;
  transition: opacity 0.25s ease;
}
.tag-filter a::after,
.form-submit::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .site-logo:hover::after,
  .site-nav a:hover::after,
  .mobile-nav a:hover::after,
  .nav-toggle:hover::after,
  .home-menu-trigger:hover::after { opacity: 1; }
}
.site-logo:active::after,
.site-nav a.is-current::after,
.mobile-nav a.is-current::after,
.nav-toggle:active::after,
.home-menu-trigger[aria-expanded="true"]::after,
.footer-nav a:active::after { opacity: 1; }
/* ホームの左パネルは overflow:hidden なのでリングを内側に1px寄せて描く
   （左端は画面端＝グラデ左端のピンクは角丸の右側に出ないよう右半分だけ色づけ） */
.home-split__text::after {
  inset: 0;
  background: linear-gradient(115deg,
    rgba(194, 229, 235, 0) 40%,
    rgba(194, 229, 235, 0.8) 58%,
    rgba(194, 229, 235, 0) 74%,
    rgba(239, 140, 149, 0.4) 92%,
    rgba(239, 140, 149, 0) 100%);
}

/* =====================================================================
   ホーム: 白イントロ＋セクション概要（soi-tamba.com 参照の長尺スクロール型）
   ===================================================================== */
/* スクロール吸着（ホームのみ）: 参照サイトと同じく、ページ本体を固定し、
   6セクションを収めた内部コンテナだけをネイティブスクロールさせる。 */
html.page-index,
html.page-index body {
  height: 100%;
  overflow: hidden;
  overflow-anchor: none;
}
html.page-index .site-main {
  height: 100%;
  min-height: 0;
  padding-top: 0;
}
html.page-index .home-scroll {
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  scrollbar-width: none;
}
html.page-index .home-scroll::-webkit-scrollbar { display: none; }
html.page-index .home-scroll > .intro-white,
html.page-index .home-scroll > .hero,
html.page-index .home-scroll > .home-section {
  flex: none;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* 真っ白1画面＋ロゴのみ。ここだけ意図的に「ガラスの世界の前」の無音の白 */
.intro-white {
  scroll-snap-align: start;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.intro-logo { margin: 0; }
.intro-logo img { width: 190px; height: auto; }
/* 中央ロゴは余韻を残して、ゆっくり浮上する。 */
.intro-logo { animation: surfaceUp 1.8s var(--ease-surface) 0.45s both; }
/* 奥から手前への浮上（共通）: 下からゆっくり上がりながら現れる。
   ★blur も scale も使わない: 細い線のロゴは端数スケールのラスタライズで
   震えて見える（シマー）。移動＋透明度のみ＝完全にコンポジタ合成で安定 */
@keyframes surfaceUp {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* スクロールヒント: 底辺のない下向き三角形（シェブロン）をアクセント色で。
   fixed＝下にスクロールできる間は全セクションで表示し続け、最下部で消える（main.js） */
.intro-scroll {
  position: fixed;
  left: 0; right: 0; bottom: 30px;
  z-index: var(--z-scroll-hint);
  margin: 0;
  text-align: center;
  line-height: 0;
  pointer-events: none;
  animation: introHint 2.8s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
/* ロゴが表示されるまで、トップ専用MENUと下矢印は出さない。main.js が
   ロゴのアニメーション終了後にクラスを外し、ゆっくり表示する。 */
html.page-index .home-menu,
html.page-index .intro-scroll {
  transition: opacity 1s var(--ease-surface) 0.25s,
    visibility 0s linear 0.25s;
}
html.page-index.home-intro-pending .home-menu,
html.page-index.home-intro-pending .intro-scroll {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
/* pending解除後のMENUの終端状態を明示する。表示開始のフェードはmain.jsが
   visibilityを先に戻してからopacityを変えるため、履歴復帰でも取り残されない。 */
html.page-index:not(.home-intro-pending) .home-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 最初の白いイントロにはMENUを置かない。イントロから離れた時だけ
   main.jsがhome-at-introを外し、既存の表示タイミングへ戻す。 */
html.page-index.home-at-intro .home-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.intro-scroll.is-hidden { opacity: 0; }
.intro-scroll .chev-down {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-right: 1px solid var(--wp--preset--color--accent);
  border-bottom: 1px solid var(--wp--preset--color--accent);
  transform: rotate(45deg);
  pointer-events: auto;
  cursor: pointer;
}
.intro-scroll.is-hidden .chev-down { pointer-events: none; }
@keyframes introHint {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* セクション帯: 画面全体（100svh）に吸着。左半分＝白地に文章、
   右半分＝各詳細ページと同じ背景画像（クリックで詳細ページへ） */
.home-section {
  scroll-snap-align: start;
  min-height: 100svh;
}
/* ★セクション高さを 100svh に固定（デスクトップ）: 白スライドで文字カラムが
   極端に細くなる途中、テキストの折返しで内容高が一時的に膨張し、下のセクションの
   吸着点がアニメ中に動いて吸着がズレる（Journal 前後で顕著だった現象の正体）。
   高さを固定すれば隣の吸着点は常に不動。はみ出しは各カラムの overflow:hidden が刈る */
@media (min-width: 768px) {
  .home-section { height: 100svh; }
}
.home-split {
  gap: 0;
  margin: 0;
  --home-reveal-duration: 0.65s;
}
/* セクション背景 = 右カラムと同じ画像（main.js が実行時に img の src を敷く）。
   左のガラスパネルが「何かを透かす」ための下地。JS無効時は無地のまま＝白パネルで問題なし */
.home-split {
  background-size: cover;
  background-position: center;
}
/* 左パネル: 白ベタ→ガラス調（半透明白＋磨り backdrop-filter＋パネル右端のエッジ光沢）。
   下地は同セクションの画像なので、磨りガラス越しに同じ世界がうっすら透ける。
   ヘッダー等と同じカーソルレンズ: カーソル周囲だけ白い塗りが丸く抜け、
   磨りガラス越しの画像が透けて見える（--lens-x/y は main.js が更新） */
.home-split__text {
  position: relative;
  z-index: 1;
  --glass-fill: rgba(255, 255, 255, 0.74);
  /* 中心は完全透過にしない（塗りが濃い分、全抜きだと暗いシミに見える）。
     うっすら晴れる程度＝ヘッダーと同じ「レンズ」の質感 */
  background: radial-gradient(circle var(--lens-r, 110px) at var(--lens-x, -999px) var(--lens-y, -999px),
    rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.46) 24%, var(--glass-fill) 66%);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-right: var(--glass-border);
  /* 見えている角（画像側=右上・右下）を角丸に。左端は画面端なので直角のまま */
  border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
  box-shadow: var(--glass-gloss), 12px 0 32px -18px rgba(20, 24, 60, 0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  /* 左端をヘッダーのロゴ位置に揃える: ヘッダー= left20px・max-width1200px中央寄せ、
     ロゴはその内側28px。%は親（全幅）基準なので viewport 計算(100vw)は不要 */
  /* 固定ロゴの下端と固定MENUの上端の間を基準に上下中央へ置く。 */
  padding: max(36px, calc(env(safe-area-inset-top) + 36px)) 64px
    max(64px, calc(env(safe-area-inset-bottom) + 64px))
    calc(max(20px, (100% - 1200px) / 2) + 28px);
  box-sizing: border-box;
  overflow: hidden;
  transition: transform var(--home-reveal-duration) var(--ease-slide);
  will-change: transform;
}
/* 画像クリック時: 白面が左へ消え、画像が全面に広がってから遷移（main.js が切替） */
.home-split__text > * { transition: opacity 0.25s ease; }
.home-split.is-expanding .home-split__text > * { opacity: 0; }
.home-split.is-expanding .img-view-more { opacity: 0; }
.home-split.is-expanding .home-split__image .img-view-more {
  opacity: 1;
  pointer-events: none;
  animation: viewMoreExit 0.48s var(--ease-surface) both !important;
  transition: none;
}
@keyframes viewMoreExit {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(90deg); }
  68% { opacity: 1; transform: translate(calc(-50% + 92px), -50%) rotate(90deg); }
  100% { opacity: 0; transform: translate(calc(-50% + 140px), -50%) rotate(90deg); }
}
.home-split__text .eyebrow {
  color: var(--wp--preset--color--accent);
  opacity: 1;
}
.home-split__text h2 {
  font-size: var(--wp--preset--font-size--h2);
  margin: 14px 0 0;
}
.home-split__text .home-lead {
  max-width: 480px;
  margin: 20px 0 0;
  opacity: 0.9;
}
.home-split__text .home-entry-row {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 0;
}
.home-split__text .home-entry-row .date {
  font-family: var(--wp--preset--font-family--en);
  font-size: 13px;
  opacity: 0.7;
}
.home-split__text .home-entry-row a {
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 35, 80, 0.3);
  transition: border-color 0.2s ease;
}
.home-split__text .home-entry-row a:hover { border-bottom-color: var(--wp--preset--color--ink); }
/* 右側: 画像全面リンク。ホバーで「底辺のない右向き三角形（シェブロン）」カーソルに変わる */
.home-split__image {
  overflow: hidden;
}
/* PCは画像を常時フルブリードの背景層にし、61.8%幅の白ガラスだけを横移動する。
   transformのみを動かすため、スクロール中のレイアウトと吸着点は変化しない。 */
@media (min-width: 768px) {
  .home-split {
    position: relative;
    overflow: hidden;
  }
  .home-split__text {
    width: 61.8%;
    height: 100%;
    min-height: 100%;
    flex: none;
  }
  .home-split__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    margin: 0;
    flex: none;
  }
  .home-split.is-expanding .home-split__text {
    transform: translateX(calc(-100% - 2px));
  }
}
.home-split__image figure { margin: 0; height: 100%; }
.home-split__image a {
  display: block;
  position: relative;
  height: 100%;
  cursor: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20width="56"%20height="56"%20viewBox="0%200%2056%2056"><path%20d="M18%2010%20L38%2028%20L18%2046"%20fill="none"%20stroke="%230F2350"%20stroke-width="1.5"%20stroke-linecap="round"%20stroke-linejoin="round"/></svg>') 28 28, pointer;
}
/* （カーソルレンズの薄衣は廃止: カーソル周囲以外がわずかに曇って「暗く」見え、
   波紋の視認も妨げるため。画像は素通し＋波紋のみ） */
/* View more: 画像の左端・縦中央に右90度回転の縦書き（クリックは下の画像リンクが受ける） */
.home-split__image .img-view-more {
  position: absolute;
  /* フルブリード画像内で、白ガラスの右端から28pxの位置を保つ。 */
  left: calc(61.8% + 28px);
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 2;
  margin: 0;
  /* ヘッダーのナビと同じ文字仕様（en 14px / weight 300 / 字間 0.08em） */
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--ink);
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  pointer-events: none;
  transition: opacity 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* 画像ホバー（=シェブロンカーソルが出ている間）は VIEW MORE をアクセント色＋下線に */
.home-split__image:hover .img-view-more {
  color: var(--wp--preset--color--accent);
  border-bottom-color: var(--wp--preset--color--accent);
}
/* モバイルでは表示中のラベルを常時わずかに上下させる。 */
@keyframes viewMoreHint {
  0%, 100% { transform: translate(-50%, -50%) rotate(90deg); }
  50%      { transform: translate(-50%, calc(-50% + 6px)) rotate(90deg); }
}
/* スクロール出現: スクロール前は背景画像がセクション全面に広がっていて、
   画面に入ると左から白地が重なってくる（transform遷移＝is-expanding と同じ機構・
   0.65s）。fade-in はセクションに付けた IO トリガー
   （is-visible）としてだけ使い、セクション自体の浮上・フェードは無効化 */
.js .home-split.fade-in { opacity: 1; }
.home-split.fade-in.is-visible { animation: none; }
/* 初期状態＝白ガラスを画面外へ退避（デスクトップ・モーション許容時のみ。
   モバイルは縦積みのため対象外＝常に通常レイアウト） */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  /* リセット（画面外へ出たとき）もスライドで戻す＝画面下端に残った部分でも
     画像が「スッと広がる」モーションで現れる（突然の切替を避ける） */
  .js .home-split.fade-in:not(.is-visible) .home-split__text {
    transform: translateX(calc(-100% - 2px));
  }
  .js .home-split.fade-in:not(.is-visible) .home-split__text > * { opacity: 0; }
  /* 白地が広がってから本文がふわっと（クリック退場時 is-expanding は即時のまま） */
  .js .home-split.fade-in.is-visible:not(.is-expanding) .home-split__text > * { transition-delay: 0.3s; }
}
/* VIEW MOREは左ガラスパネルが展開し終わってから、下のレイヤーから右へ出す。
   animation-fill-mode は both で開始前の非表示を保ち、パネルの時間を待って
   transform と opacity を同時に動かす。 */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .home-split.fade-in.is-visible .img-view-more {
    animation: viewMoreIn 0.45s var(--ease-slide) var(--home-reveal-duration) both;
  }
}
@keyframes viewMoreIn {
  from { opacity: 0; transform: translate(calc(-50% - 28px), -50%) rotate(90deg); }
  to { opacity: 1; transform: translate(-50%, -50%) rotate(90deg); }
}
html .home-split.fade-in.is-visible .img-view-more.view-more-revealed {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(90deg);
  animation: none;
}
@media (hover: hover) and (pointer: fine) {
  html .home-split.fade-in.is-visible .home-split__image:hover .img-view-more.view-more-revealed,
  html .home-split.fade-in.is-visible .img-view-more.view-more-revealed:hover {
    animation: viewMoreHint 2.8s ease-in-out infinite;
  }
}
/* ブラウザ「戻る」での復元時はアニメなしで即座に元のレイアウトへ（main.js が付与） */
.home-split.no-anim,
.home-split.no-anim .home-split__text,
.home-split.no-anim .home-split__text > *,
.home-split.no-anim .home-split__image,
.home-split.no-anim .img-view-more { transition: none; }
.home-split.no-anim .home-split__image:hover .img-view-more { animation: none; }
.home-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 水面のように漂う（10秒周期・往復）。振幅・速さは分かりやすさ優先で調整済み。
     常に scale>1 を保ち、ドリフトしても縁が見えない（WebGL時はシェーダ側で同値を再現） */
  animation: bgDrift 7s ease-in-out infinite alternate;
}
@keyframes bgDrift {
  from { transform: scale(1.12) translate(2.4%, -1.8%); }
  to   { transform: scale(1.12) translate(-2.4%, 2.2%); }
}

/* View more ピル（form-submit と同じガラスピルの流儀） */
.view-more .wp-block-button__link {
  display: inline-block;
  min-height: 44px;
  padding: 12px 40px;
  border-radius: var(--radius-pill);
  border: var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  box-shadow: var(--glass-shadow-sm), var(--glass-gloss);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .view-more .wp-block-button__link:hover {
    --g-filter: var(--g-filter-frost);
    background: var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    transform: translateY(-2px);
  }
}

/* ページタイトルパネル（§6.3）: タイトル＋リード文を1行に収めるピル型ガラス。
   タイトル=左揃え / リード文=右揃え（文字サイズの大小は従来のまま） */
.page-title-panel {
  border-radius: var(--radius-pill);
  padding: 22px 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  text-align: left;
}
.page-title-panel h1 {
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--h1);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.page-title-panel .lead {
  margin: 0 0 0 auto;
  flex: 1 1 0;
  min-width: 0;
  text-align: right;
  font-size: var(--wp--preset--font-size--body);
  opacity: 0.85;
}
.mobile-only-break { display: none; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =====================================================================
   Philosophy / 記事本文パネル（§6.7）
   ===================================================================== */
.article-panel {
  /* 長文の可読性のため地をわずかに濃く（§5: 最大0.6まで許容）。ガラス感は保つ */
  --glass-fill: rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-panel);
  padding: 56px 60px;
  margin-top: 24px;
}
.article-panel h1 {
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--h1);
  font-weight: 400;
  letter-spacing: 0.03em;
}
.article-panel h2 {
  font-size: var(--wp--preset--font-size--h2);
  margin: 48px 0 20px;
}
.article-panel p { margin: 0 0 28px; }
.article-panel p:last-child { margin-bottom: 0; }
.article-panel .article-meta {
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--caption);
  letter-spacing: 0.04em;
  opacity: 0.85;
  margin: 14px 0 36px;
}
.article-panel .article-meta .tag { color: var(--wp--preset--color--accent); }
.article-panel figure { margin: 0 0 36px; }
.article-panel figure img { border-radius: var(--radius-card); width: 100%; }
.article-panel figcaption {
  font-size: var(--wp--preset--font-size--caption);
  opacity: 0.7;
  margin-top: 10px;
}
.article-lead {
  font-size: 17px;
  line-height: 2.1;
  margin: 0 0 36px;
}

/* 戻るパネル（§6.2） */
.back-panel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-sm), var(--glass-gloss);
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  transition: background 0.2s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .back-panel:hover {
    --g-filter: var(--g-filter-frost);
    background: var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
.back-panel .arrow { font-size: 16px; }

/* スクロール後に現れるトップへ戻るボタン。トップのシェブロンと同じ
   border-right / border-bottom の形を反転し、既存の小さなガラスUIに合わせる。 */
.back-to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: var(--z-floating-control);
  width: 52px;
  height: 52px;
  padding: 0;
  display: grid;
  place-items: center;
  border: var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  box-shadow: var(--glass-shadow-sm), var(--glass-gloss);
  color: var(--wp--preset--color--ink);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transform: translateY(8px);
  transition: opacity 0.25s ease, visibility 0.25s ease,
    transform 0.42s var(--ease-buoyant), background 0.2s ease,
    border-color 0.25s ease, box-shadow 0.25s ease, color 0.2s ease;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top .chev-down {
  display: block;
  width: 13px;
  height: 13px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(225deg);
}
.back-to-top.is-returning {
  pointer-events: none;
  animation: backToTopPress 0.62s var(--ease-buoyant);
}
.back-to-top.is-returning .chev-down {
  animation: backToTopArrow 0.62s var(--ease-surface);
}
@keyframes backToTopPress {
  0%   { transform: translateY(0) scale(1); }
  24%  { transform: translateY(2px) scale(0.92); }
  58%  { transform: translateY(-2px) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes backToTopArrow {
  0%   { opacity: 1; transform: translateY(0) rotate(225deg); }
  38%  { opacity: 1; transform: translateY(2px) rotate(225deg); }
  62%  { opacity: 0; transform: translateY(-12px) rotate(225deg); }
  63%  { opacity: 0; transform: translateY(12px) rotate(225deg); }
  100% { opacity: 1; transform: translateY(0) rotate(225deg); }
}
@media (hover: hover) and (pointer: fine) {
  .back-to-top.is-visible:hover {
    --g-filter: var(--g-filter-frost);
    background: var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    color: var(--wp--preset--color--accent);
    transform: translateY(-2px);
  }
}

/* 記事下部の一覧へ戻る導線 */
.article-footer { margin-top: 40px; text-align: center; }

/* =====================================================================
   タグフィルタ（ピル・§6.6）
   ===================================================================== */
/* フィルタ0件時の空状態（leaf クラス＝block-mappable） */
.filter-empty {
  margin: 24px 0 0;
  text-align: center;
  opacity: 0.7;
}
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 40px;
}
.tag-filter a {
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--glass-shadow-sm), var(--glass-gloss);
  transition: background 0.2s ease, color 0.2s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .tag-filter a:hover {
    --g-filter: var(--g-filter-frost);
    color: var(--wp--preset--color--ink);
    background: var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
.tag-filter a.is-active {
  --glass-fill: var(--glass-sunk-bg);
  --g-filter: var(--g-filter-frost);
  background: var(--glass-sunk-bg);
  box-shadow: var(--glass-inset);
  transform: translateY(1px);
  border-color: transparent;
}
.tag-filter a.is-active::after {
  opacity: 0;
}

/* 選択中のガラスを描く一時レイヤー。SVGは1要素・1pathだけを持ち、
   リンクの文字とレイアウトは元の要素側に残す。 */
.liquid-glass-host:not(.home-menu) {
  position: relative;
}
.language-switcher.liquid-glass-host {
  position: fixed;
}
.liquid-glass-host {
  isolation: isolate;
}
.liquid-glass-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* 遠い項目へ移る液体は途中のボタンより背面を通す。移動元・移動先は
   背景を透明化しているため、単一の液体シルエットだけがその位置に見える。 */
.liquid-glass-host > a,
.liquid-glass-host > .home-menu-trigger,
.liquid-glass-host > .home-menu-panel {
  position: relative;
  z-index: 2;
}
.liquid-glass-overlay path {
  fill: var(--liquid-glass-fill, var(--glass-sunk-bg));
  stroke: none;
  filter: none;
  mix-blend-mode: normal;
}
/* 白いイントロ上では既定の白ガラスが背景に埋もれるため、
   タッチ端末のMENU移動だけ沈みガラスを確実に視認できる濃さにする。 */
@media (max-width: 1023px) {
  html.page-index .home-menu .liquid-glass-overlay path {
    fill: var(--glass-sunk-bg) !important;
  }
}
.tag-filter.liquid-glass-host a {
  border-color: transparent;
}
.tag-filter.liquid-glass-host a::after {
  opacity: 1;
}
html.page-index .home-menu-trigger.liquid-glass-source,
html.page-index .home-menu-trigger.liquid-glass-target,
html.page-index .home-menu-panel.liquid-glass-source,
html.page-index .home-menu-panel.liquid-glass-target {
  z-index: 2;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html.page-index .home-menu-trigger.liquid-glass-source::after,
html.page-index .home-menu-trigger.liquid-glass-target::after {
  opacity: 0 !important;
}
/* MENUの開閉中は液体の輪郭が完成するまでカテゴリ文字を隠す。 */
html.page-index .home-menu-panel.liquid-glass-source > a,
html.page-index .home-menu-panel.liquid-glass-target > a {
  opacity: 0;
}
.site-nav a.liquid-glass-source,
.site-nav a.liquid-glass-target,
.mobile-nav a.liquid-glass-source,
.mobile-nav a.liquid-glass-target,
html.page-index .home-menu-panel a.liquid-glass-source,
html.page-index .home-menu-panel a.liquid-glass-target,
.tag-filter a.liquid-glass-source,
.tag-filter a.liquid-glass-target {
  z-index: 2;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1;
  border-color: transparent !important;
  box-shadow: none !important;
}
.site-nav a.liquid-glass-source::after,
.site-nav a.liquid-glass-target::after,
.mobile-nav a.liquid-glass-source::after,
.mobile-nav a.liquid-glass-target::after,
html.page-index .home-menu-panel a.liquid-glass-source::after,
html.page-index .home-menu-panel a.liquid-glass-target::after,
.tag-filter a.liquid-glass-source::after,
.tag-filter a.liquid-glass-target::after {
  opacity: 0 !important;
}
/* =====================================================================
   Journal 記事カード（3カラム・§6.5）
   ===================================================================== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.journal-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-lg), var(--glass-gloss);
  transition: background 0.3s ease, transform 0.55s var(--ease-buoyant), border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .journal-card:hover {
    --glass-fill: var(--glass-strong);
    --g-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
      0 2px 4px rgba(20, 24, 60, 0.06),
      0 18px 36px -20px rgba(20, 24, 60, 0.18),
      0 44px 92px -30px rgba(20, 24, 60, 0.32),
      var(--glass-highlight);
    transform: translateY(-6px);
  }
}
.journal-card .thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}
.journal-card .thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .journal-card:hover .thumb img { opacity: 0.9; }
}
.journal-card .card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.journal-card .card-title {
  font-size: var(--wp--preset--font-size--card-title);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
.journal-card .card-tag {
  font-size: 13px;
  color: var(--wp--preset--color--accent);
  margin: 0;
}
.journal-card .card-date {
  font-family: var(--wp--preset--font-family--en);
  font-size: 12px;
  opacity: 0.7;
  margin: 4px 0 0;
}

/* =====================================================================
   News 記事リスト（1カラム・グラスカード・§6.4）
   ===================================================================== */
.news-list { display: flex; flex-direction: column; gap: 40px; }
.news-item {
  display: block;
  border-radius: var(--radius-card);
  padding: 36px 40px;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow-lg), var(--glass-gloss);
  transition: background 0.3s ease, transform 0.55s var(--ease-buoyant), border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .news-item:hover {
    --glass-fill: var(--glass-strong);
    --g-filter: var(--g-filter-frost);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow:
      0 2px 4px rgba(20, 24, 60, 0.06),
      0 16px 32px -20px rgba(20, 24, 60, 0.17),
      0 40px 84px -30px rgba(20, 24, 60, 0.30),
      var(--glass-highlight);
    transform: translateY(-4px);
  }
}
.news-item .news-title {
  font-size: var(--wp--preset--font-size--h2);
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 14px;
}
.news-item .news-meta {
  font-size: var(--wp--preset--font-size--caption);
  margin: 0 0 16px;
}
.news-item .news-meta .date {
  font-family: var(--wp--preset--font-family--en);
  letter-spacing: 0.04em;
}
.news-item .news-meta .sep { opacity: 0.4; margin: 0 10px; }
.news-item .news-meta .tag { color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--nav); }
.news-item .news-lead { margin: 0; opacity: 0.9; }

/* =====================================================================
   NEWS / JOURNAL 画像ライトボックス
   ===================================================================== */
.lightbox-trigger { cursor: zoom-in; }
html.lightbox-open,
body.lightbox-open { overflow: hidden; }
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(15, 35, 80, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}
.image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}
.image-lightbox__close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.image-lightbox__close:hover,
.image-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.32);
}
.image-lightbox__figure {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(100%, 1200px);
  max-height: calc(100dvh - 80px);
  margin: 0;
}
.image-lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 144px);
  object-fit: contain;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  cursor: zoom-out;
}
.image-lightbox__caption {
  max-width: 720px;
  margin: 16px 0 0;
  color: #fff;
  font-size: var(--wp--preset--font-size--caption);
  line-height: 1.7;
  text-align: center;
}
.image-lightbox__caption[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .image-lightbox { transition: none; }
}

/* =====================================================================
   Contact フォーム（§6.8）
   ===================================================================== */
.form-panel {
  --glass-fill: rgba(255, 255, 255, 0.32);
  border-radius: var(--radius-panel);
  padding: 52px 56px;
  margin-top: 24px;
}
.form-intro { margin: 0 0 40px; opacity: 0.9; }
.site-form { display: flex; flex-direction: column; gap: 28px; }
.form-row { display: flex; flex-direction: column; gap: 10px; }
.form-row label {
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 0.02em;
}
.form-row .req {
  display: inline-block;
  margin-left: 10px;
  font-size: var(--wp--preset--font-size--caption);
  color: var(--wp--preset--color--accent);
}
.site-form input[type="text"],
.site-form input[type="email"],
.site-form select,
.site-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid rgba(15, 35, 80, 0.3);
  background: transparent;
  padding: 10px 2px;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--body);
  color: var(--wp--preset--color--ink);
  border-radius: 0;
  transition: border-color 0.2s ease;
}
.site-form textarea { min-height: 140px; resize: vertical; line-height: 1.8; }
/* select は OS 標準UIを消し、下線デザインに合う細いシェブロンを付ける */
.site-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F2350' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.site-form ::placeholder { color: var(--wp--preset--color--ink-soft); opacity: 0.6; }
.site-form input:focus,
.site-form select:focus,
.site-form textarea:focus {
  outline: none;
  border-bottom: 2px solid var(--wp--preset--color--ink);
}
.consent-row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.consent-row input { margin-top: 7px; width: auto; }
.consent-row label { line-height: 1.9; }
.form-submit {
  align-self: flex-start;
  margin-top: 8px;
  min-height: 44px;
  padding: 12px 40px;
  border-radius: var(--radius-pill);
  border: var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--g-filter);
  backdrop-filter: var(--g-filter);
  box-shadow: var(--glass-shadow-sm), var(--glass-gloss);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 400;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .form-submit:hover {
    --g-filter: var(--g-filter-frost);
    background: var(--glass-strong);
    border-color: rgba(255, 255, 255, 0.75);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
/* 送信完了メッセージ（§6.8） */
.form-done {
  display: none;
  font-size: 17px;
  line-height: 2;
}
/* 送信: フォームが静かに沈み、差し替え後の完了文が水面へ浮上する。 */
.site-form.is-leaving { opacity: 0; transition: opacity 0.25s ease; }
.site-form.is-sent { display: none; }
.form-panel.is-sent .form-done {
  display: block;
  animation: surfaceUp 0.6s var(--ease-surface) backwards;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* エラー表示（§6.8）: 挿入時に小さく浮上。色と配置は仕様のまま。 */
.field-error {
  width: 100%;
  color: var(--wp--preset--color--error);
  font-size: var(--wp--preset--font-size--caption);
  margin: 4px 0 0;
  animation: errorIn 0.25s var(--ease-surface) backwards;
}
@keyframes errorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-form [aria-invalid="true"] { border-bottom-color: var(--wp--preset--color--error); }

/* =====================================================================
   プライバシーポリシー（読みもの）
   ===================================================================== */
.policy h2 {
  font-size: 19px;
  margin: 44px 0 12px;
}
.policy h2:first-of-type { margin-top: 0; }
.policy p { margin: 0 0 20px; }
.policy .updated {
  font-size: var(--wp--preset--font-size--caption);
  opacity: 0.7;
  margin-top: 40px;
}

/* =====================================================================
   404
   ===================================================================== */
.error-panel {
  border-radius: var(--radius-panel);
  padding: 64px 56px;
  text-align: center;
}
.error-panel .code {
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--display);
  font-weight: 300;
  margin: 0 0 12px;
  /* 水にただよう404（introHintと同振幅・倍周期の漂い）。 */
  animation: float404 5.6s ease-in-out infinite;
}
@keyframes float404 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* =====================================================================
   フッター（§6.9 下層のみ・トップは非表示）
   ===================================================================== */
.site-footer { position: relative; z-index: 1; }
.is-home .site-footer { display: none; }
.site-footer__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 40px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.footer-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  text-align: center;
}
.footer-brand {
  margin: 0;
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 0.12em;
}
.footer-socials {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
}
.footer-social {
  position: relative;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0.72;
}
.footer-social img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* SNSは準備中。斜線で未リンク状態を明示し、まだクリックできない装飾にする。 */
.footer-social::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: calc(100% + 8px);
  border-top: 1.5px solid var(--wp--preset--color--accent);
  transform: rotate(-45deg);
  pointer-events: none;
}
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.footer-nav a {
  font-family: var(--wp--preset--font-family--en);
  font-size: var(--wp--preset--font-size--nav);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: color 0.2s ease, background 0.25s ease, transform 0.42s var(--ease-buoyant), border-color 0.25s ease;
}
/* hover はヘッダー通常時と同じクリアなガラス（磨りガラスの白マットは強すぎる） */
@media (hover: hover) and (pointer: fine) {
  .footer-nav a:hover {
    color: var(--wp--preset--color--ink);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--g-filter);
    backdrop-filter: var(--g-filter);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: var(--glass-shadow-sm), var(--glass-highlight);
    transform: translateY(-2px);
  }
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: var(--wp--preset--font-size--caption);
  margin: 0;
}
.footer-meta a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--wp--preset--color--ink); }
.footer-meta a:hover { color: var(--wp--preset--color--accent); }
.footer-copy { opacity: 0.85; }

/* =====================================================================
   押下（:active）＝凹んで沈む（hover の浮上と対・§5）
   ===================================================================== */
.site-logo:active,
.site-nav a:active:not(.liquid-glass-source):not(.liquid-glass-target),
.mobile-nav a:active:not(.liquid-glass-source):not(.liquid-glass-target),
.nav-toggle:active,
.home-menu-trigger:active:not(.liquid-glass-source):not(.liquid-glass-target),
.home-menu-panel a:active:not(.liquid-glass-source):not(.liquid-glass-target),
.footer-nav a:active,
.tag-filter a:active:not(.liquid-glass-source):not(.liquid-glass-target),
.back-panel:active,
.back-to-top:active,
.form-submit:active,
.view-more .wp-block-button__link:active,
.home-split__image .img-view-more:active,
.journal-card:active,
.news-item:active {
  --glass-fill: var(--glass-sunk-bg);
  --g-filter: var(--g-filter-frost);
  background: var(--glass-sunk-bg);
  box-shadow: var(--glass-inset);
  transform: translateY(1px);
  border-color: rgba(255, 255, 255, 0.4);
  /* 押下は速く沈み、解除後は各要素の浮力トランジションでゆっくり戻す。 */
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}

/* =====================================================================
   キーボードフォーカスの可視化（§9.3。グラス上でも見える濃いアウトライン）
   ===================================================================== */
a:focus-visible,
button:focus-visible,
.journal-card:focus-visible,
.news-item:focus-visible,
.back-panel:focus-visible,
.tag-filter a:focus-visible,
.form-submit:focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 3px;
}

/* =====================================================================
   モーション（§7）
   ===================================================================== */
/* 水中から浮かび上がる登場モーション。animation を使い、hover の transition と独立させる
   （同じ transform を entrance と hover の両方に使うと競合するため）。
   ぼかしが晴れながら上昇＝水面へ surface する質感。 */
.js .fade-in { opacity: 0; }
.fade-in.is-visible {
  opacity: 1;
  animation: riseFromWater 0.8s var(--ease-surface) backwards;
}
/* ★filter: blur のアニメは毎フレーム再ブラー＝高コスト（backdrop-filter 持ちの
   カードでは特に）。opacity/transform のみ＝コンポジタ合成で軽量に。 */
@keyframes riseFromWater {
  0%   { opacity: 0; transform: translateY(42px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* カード/リストは水中から順に浮かぶ（animation-delay は hover の transition に影響しない） */
.card-grid > .journal-card:nth-child(2) { animation-delay: 0.13s; }
.card-grid > .journal-card:nth-child(3) { animation-delay: 0.26s; }
.card-grid > .journal-card:nth-child(4) { animation-delay: 0.39s; }
.card-grid > .journal-card:nth-child(5) { animation-delay: 0.52s; }
.card-grid > .journal-card:nth-child(n+6) { animation-delay: 0.65s; }
.news-list > .news-item:nth-child(2) { animation-delay: 0.13s; }
.news-list > .news-item:nth-child(3) { animation-delay: 0.26s; }
.news-list > .news-item:nth-child(n+4) { animation-delay: 0.39s; }
/* タグ絞り込みの再表示: 同じ「浮上」の短縮版で配置変更をつなぐ。
   delayはmain.jsが0.06s刻みに設定し、終了時に消去する。 */
.journal-card.filter-in,
.news-item.filter-in {
  animation: riseFromWater 0.4s var(--ease-surface) backwards;
}
.filter-empty:not([hidden]) {
  animation: riseFromWater 0.4s var(--ease-surface) backwards;
}

/* 遅延読込画像のロードフェード（DESIGN §7）。JS無効時は通常表示する。 */
.js img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; }
.js img[loading="lazy"].is-loaded { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js .fade-in, .fade-in.is-visible { opacity: 1; transform: none; filter: none; animation: none; }
  .home-split.fade-in.is-visible .img-view-more { animation: none; }
  .home-split.fade-in.is-visible .home-split__image:hover .img-view-more { animation: none; }
  .water-ring, .water-canvas { display: none; }
  .has-water img { visibility: visible; }
  .loader-logo { opacity: 1; }
  /* グラスホバーの浮上は無効化（背景の強調のみ残す） */
  .site-logo:hover,
  .site-nav a:hover, .footer-nav a:hover, .mobile-nav a:hover,
  .nav-toggle:hover, .nav-toggle:active,
  html.page-index .home-menu-trigger:hover, html.page-index .home-menu-trigger:active,
  .journal-card:hover, .news-item:hover, .tag-filter a:hover,
  .back-panel:hover, .back-to-top:hover, .form-submit:hover,
  .view-more .wp-block-button__link:hover,
  .home-split__image .img-view-more:hover,
  .home-split__image .img-view-more:active { transform: none; }
  .back-to-top.is-returning,
  .back-to-top.is-returning .chev-down { animation: none; }
  .intro-scroll { animation: none; }
  .error-panel .code { animation: none; }
}

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (max-width: 1023px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  /* タブレット／モバイルは背景画像全体をリンクにせず、
     表示中のVIEW MOREだけを詳細ページへの入口にする。 */
  .home-split__image a {
    pointer-events: none;
    cursor: default;
  }
  .home-split__image .img-view-more {
    pointer-events: auto;
    cursor: pointer;
  }
}
/* タブレットは作品をそのまま見せ、PC専用の前面フルートガラスを使わない。 */
@media (min-width: 768px) and (max-width: 1023px) {
  html.page-index .hero-glass { display: none; }
  /* タブレットはフルートガラスを使わないが、作品の表示が完了するまでは
     大きなEARTHを出さない。 */
  html.page-index.home-artwork-active .hero-bg-logo,
  html.page-index.home-artwork-active .hero-credit {
    opacity: 1;
  }
  html.page-index.home-artwork-active:not(.home-artwork-ready) .home-logo-overlay .hero-bg-logo,
  html.page-index.home-artwork-active:not(.home-artwork-ready) .hero-artwork-symbol {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html.page-index.home-artwork-active.home-artwork-ready .home-logo-overlay .hero-bg-logo,
  html.page-index.home-artwork-active.home-artwork-ready .hero-artwork-symbol,
  html.page-index.home-artwork-past .home-logo-overlay .hero-bg-logo,
  html.page-index.home-artwork-past .hero-artwork-symbol {
    animation: none;
  }
  /* タブレットもSPと同じく、表示開始時刻は変えず、アートワークロゴの
     左下への移動・縮小とシンボルのフェードだけをゆっくり見せる。 */
  html.page-index.home-artwork-active.home-artwork-ready .home-logo-overlay .hero-bg-logo,
  html.page-index.home-artwork-past .home-logo-overlay .hero-bg-logo {
    transition:
      bottom 1.2s var(--ease-surface),
      left 1.2s var(--ease-surface),
      width 1.2s var(--ease-surface),
      height 1.2s var(--ease-surface),
      opacity 1s ease,
      visibility 0s linear 0s;
  }
  html.page-index.home-artwork-active.home-artwork-ready .hero-artwork-symbol,
  html.page-index.home-artwork-past .hero-artwork-symbol {
    transition: opacity 1.2s var(--ease-surface), visibility 0s linear 0s;
  }
  /* アートワーク中は下向き矢印と重ならないよう、ロゴを上へ移動する。 */
  html.page-index.home-artwork-active.home-artwork-ready .home-logo-overlay .hero-bg-logo {
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 72px);
  }
  /* --hero-brand-width は main.js が次セクションの左ガラスの実寸を設定する。
     初期描画だけは既存の大きさをフォールバックとして使い、表示開始時には
     実測値へ置き換える。 */
  html.page-index .home-logo-overlay {
    --hero-brand-width: min(
      1280px,
      70vw,
      calc(100vw - max(20px, env(safe-area-inset-left)) - 72px),
      125svh
    );
  }
  /* ロゴの左余白は下層ロゴと同じ位置に残し、右端だけ左ガラスの右端へ揃える。 */
  html.page-index .hero-bg-logo {
    width: calc(var(--hero-brand-width) - max(20px, env(safe-area-inset-left)));
  }
  /* VIEW MOREをモバイルと同じく、右下の上に戻るボタンの中心線へ揃える。 */
  .home-split__image .img-view-more {
    left: calc(100% - max(20px, env(safe-area-inset-right)) - 26px);
    white-space: nowrap;
  }
}
/* 履歴復帰中はPC・タブレット・モバイル共通で分割セクションを隠し、
   内部スクロール位置とガラス状態を確定してから再表示する。 */
html.page-index.is-restoring-home .home-split { visibility: hidden; }
@media (max-width: 767px) {
  :root { --header-h: 52px; }
  html.page-index .home-menu {
    top: max(14px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
  }
  html.page-index .home-menu-trigger {
    min-width: 48px;
    width: 48px;
    min-height: 48px;
    padding: 8px 4px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  html.page-index .home-menu-panel {
    top: calc(100% + 12px);
    right: 0;
    bottom: auto;
    left: auto;
    transform: translateY(-12px);
  }
  html.page-index .home-menu-panel.is-open,
  html.page-index .home-menu.is-liquid-menu-transition .home-menu-panel {
    transform: translateY(0);
  }
  .back-to-top {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }
  /* SPのトップアートワークはガラスレイヤーを重ねず、作品をそのまま見せる。 */
  html.page-index .hero-glass { display: none; }
  /* svhはアドレスバーを含む端末で画面より短くなることがあるため、
     対応ブラウザでは動的viewport高で次画像の露出を防ぐ。 */
  html.page-index .intro-white,
  html.page-index .hero,
  html.page-index .home-section {
    min-height: 100svh;
    min-height: 100dvh;
  }
  .site-header { top: 10px; left: 12px; right: 12px; }
  .site-header__inner { padding: 0 8px 0 18px; }
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  /* SPは縦積み: タイトル（左寄せ）→作品→クレジット（右寄せ） */
  .hero .wp-block-cover__inner-container {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    padding: calc(var(--header-h) + 20px) 20px 52px;
    /* ヒーロー本体と同じ動的viewport高に揃える。svhのままだと
       アドレスバーが縮んだ時にアートワーク層だけ短くなり、上下に
       背景の余白／次セクションの露出が出る。 */
    min-height: 100dvh;
  }
  .hero-definition {
    left: 30px;
    right: calc(max(16px, env(safe-area-inset-right)) * 2 + 68px);
    top: 50%;
    width: auto;
    transform: translateY(-50%);
  }
  .hero-definition__term {
    font-size: 18px;
    line-height: 1.5;
  }
  .hero-definition__body {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.55;
  }
  .hero-credit {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: 0;
    left: 0;
    width: auto;
    min-width: max-content;
    margin: 0;
    flex: none;
    font-size: 13px;
    white-space: nowrap;
    text-align: center;
    transform: none;
  }
  .hero-definition.fade-in.is-visible,
  .hero-credit.fade-in.is-visible {
    animation: heroMetaMobileIn 0.8s var(--ease-surface) 1.3s backwards;
  }
  @keyframes heroMetaMobileIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* 縦組みロゴを上げ、固定表示のスクロールヒント（chevron: bottom 30px＋34px＋バウンス6px）
     と重ならないようにする */
  .hero-bg-logo { bottom: max(92px, 12svh); }
  .container { padding: 96px 20px 96px; }
  .site-footer__inner { padding-inline: 20px; }
  .footer-nav {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .footer-nav a {
    padding-inline: 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  .page-title-panel {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    padding: 16px 26px;
    align-items: center;
    column-gap: 16px;
  }
  .page-title-panel .lead {
    margin: 0;
    text-align: right;
  }
  .mobile-only-break { display: initial; }
  .intro-logo img { width: 148px; }
  html.page-index .home-corner-logo {
    top: max(10px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
  }
  /* 分割セクションは全面の背景画像に左から白ガラスを重ねる。
     画像を右側だけの別レイヤーにすると、親背景とのcover位置がずれて
     境界に切れ目が出るため、PC・タブレットと同じ全面画像に戻す。 */
  .home-split {
    position: relative;
    display: block;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    --home-control-right: max(16px, env(safe-area-inset-right));
    --home-control-size: 48px;
    --home-control-half: 24px;
    /* 右側に見せる画像幅＝上に戻るボタン＋左右の同じ余白。 */
    --home-image-visible-width: calc(var(--home-control-size) + var(--home-control-right) + var(--home-control-right));
    --home-panel-width: calc(100% - var(--home-image-visible-width));
    --home-reveal-duration: 0.65s;
    /* VIEW MOREを押した時のガラス退場と、スクロール時の開閉を統一。 */
    --home-hide-duration: var(--home-reveal-duration);
    background-size: cover;
    background-position: center;
  }
  .home-split__text, .home-split__image { flex: none; }
  /* ロゴ左端揃え: モバイルはヘッダー left12px＋内側18px = 30px */
  .home-split__text {
    position: relative;
    z-index: 1;
    width: var(--home-panel-width);
    height: 100%;
    min-height: 100%;
    padding: max(36px, calc(env(safe-area-inset-top) + 36px)) 20px
      max(64px, calc(env(safe-area-inset-bottom) + 64px)) 30px;
    border-right: var(--glass-border);
    border-bottom: 0;
    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
    box-shadow: var(--glass-gloss), 12px 0 32px -18px rgba(20, 24, 60, 0.18);
    transition: transform var(--home-reveal-duration) var(--ease-slide);
  }
  .home-split__text h2 { font-size: 20px; }
  .home-split__image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    cursor: default;
  }
  .home-split__image,
  .home-split__image figure,
  .home-split__image a,
  .home-split__image img {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  .home-split__image figure { width: 100%; }
  /* SPでは背景画像の専用カーソルを止める。クリック可否は main.js が
     イベント発生元を見てVIEW MOREだけに限定する。 */
  .home-split__image a {
    pointer-events: none;
    cursor: default;
  }
  /* VIEW MOREはPC・タブレットと同じ縦書き表示に戻し、右下の
     「上に戻る」ボタンと同じ中心線へ置く。 */
  .home-split__image .img-view-more {
    left: calc(100% - var(--home-control-right) - var(--home-control-half));
    right: auto;
    top: 50%;
    bottom: auto;
    width: auto;
    min-height: 0;
    transform: translate(-50%, -50%) rotate(90deg);
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: var(--wp--preset--font-size--nav);
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: inherit;
    white-space: nowrap;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.25s ease, color 0.25s ease,
      border-color 0.25s ease, transform 0.42s var(--ease-buoyant);
  }
  .home-split__image .img-view-more::after { display: none; }
  .home-split__image:hover .img-view-more {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
  }
  @media (hover: hover) and (pointer: fine) {
    .home-split__image .img-view-more:hover {
      transform: translate(-50%, -50%) rotate(90deg);
    }
  }
  .home-split.fade-in.is-visible .home-split__image:hover .img-view-more,
  .home-split.fade-in.is-visible .img-view-more { animation: none; }
  .home-split__image .img-view-more:active,
  .home-split__image .img-view-more.is-pressed {
    color: var(--wp--preset--color--accent);
    border-bottom-color: var(--wp--preset--color--accent);
    transform: translate(-50%, -50%) rotate(90deg);
    transition-duration: 0.12s;
    transition-timing-function: ease-out;
  }
  .page-title-panel h1 { font-size: 28px; }
  .article-panel { padding: 36px 24px; }
  .article-panel h1 { font-size: 28px; }
  .article-panel h2 { font-size: 20px; }
  .form-panel { padding: 36px 24px; }
  .news-item { padding: 28px 24px; }
  .news-item .news-title { font-size: 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .error-panel { padding: 48px 24px; }
  /* タップで開いた直後はJSが本文へ初期フォーカスを移すため、
     キーボード用の四角いリングをピルの前に出さない。 */
  .mobile-menu[data-focus-origin="pointer"] .mobile-nav a:focus,
  .mobile-menu[data-focus-origin="pointer"] .mobile-nav a:focus-visible {
    outline: none;
    outline-offset: 0;
  }
  .nav-toggle[data-focus-origin="pointer"]:focus,
  .nav-toggle[data-focus-origin="pointer"]:focus-visible,
  .home-menu-trigger[data-focus-origin="pointer"]:focus,
  .home-menu-trigger[data-focus-origin="pointer"]:focus-visible {
    outline: none;
    outline-offset: 0;
  }
  .nav-toggle,
  .home-menu-trigger,
  .mobile-nav a { -webkit-tap-highlight-color: transparent; }
}

/* モバイルの白ガラスもタブレットと同じく、表示中セクションの状態で
   左から滑らかに現れる。スクロール停止判定に依存しないことで、慣性中の
   クラス切り替えによるカクつきを避ける。 */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .js .home-split.fade-in .home-split__text {
    transform: translateX(calc(-100% - 2px));
  }
  .js .home-split.fade-in.is-visible:not(.is-expanding) .home-split__text {
    transform: translateX(0);
  }
  .js .home-split.fade-in .home-split__text > * { opacity: 0; }
  .js .home-split.fade-in.is-visible:not(.is-expanding) .home-split__text > * {
    opacity: 1;
    transition-delay: 0.3s;
  }
  .js .home-split.fade-in .img-view-more {
    opacity: 0;
    animation: none;
  }
  .js .home-split.fade-in.is-visible:not(.is-expanding) .img-view-more {
    opacity: 1;
    /* 登場フェードだけを待たせ、hoverの背景・浮上・縁・影は即時に反応させる。 */
    transition-delay: 0.3s, 0s, 0s, 0s, 0s;
  }
  .js .home-split.is-expanding .home-split__text {
    flex-basis: auto;
    padding: max(36px, calc(env(safe-area-inset-top) + 36px)) 20px
      max(64px, calc(env(safe-area-inset-bottom) + 64px)) 30px;
    transform: translateX(calc(-100% - 2px));
  }
  .js .home-split.is-expanding .home-split__image { flex-basis: auto; }
}

/* モバイル／タブレットも、白ガラスの展開完了後にVIEW MOREを下層から
   右へ出す。入場完了後だけPCのhover時と同じ上下揺れへ切り替える。
   prefers-reduced-motionでは既存のアクセシビリティ設定を優先して停止する。 */
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .home-split.fade-in.is-visible:not(.is-expanding) .img-view-more:not(.view-more-revealed) {
    animation: viewMoreIn 0.45s var(--ease-slide) var(--home-reveal-duration) both;
  }
  .home-split.fade-in.is-visible:not(.is-expanding) .img-view-more.view-more-revealed {
    animation: viewMoreHint 2.8s ease-in-out infinite;
  }
}

/* 短い画面では、固定パネルの上下余白を少しだけ詰め、なお内容が多い場合は
   白ガラス内だけで読めるようにする。通常のスマートフォン・タブレットの
   レイアウトとPCの吸着位置は変更しない。 */
@media (max-width: 767px) and (max-height: 620px) {
  .home-split__text {
    padding-top: max(24px, calc(env(safe-area-inset-top) + 24px));
    padding-bottom: max(44px, calc(env(safe-area-inset-bottom) + 44px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home-split__text::-webkit-scrollbar { display: none; }
}