/* =============================================================
   信和建設 — 余白 / Margin  |  margin.css
   -------------------------------------------------------------
   renewal.css の後に読み込む「Margin デザイン層」。
   マークアップとコピーは変更せず、CSS の層だけで
   和紙白 / 墨 / 1px罫線 / 明朝 / 大余白 / ゆっくりモーション を与える。

   戦略:
   [A] renewal.css が全ページ共通で使う CSS 変数（--r-* / --fp-* /
       --f-* / --pd-* / --en-font）を :root で再定義し、配色と書体を
       一括で Margin に寄せる。純黒・ゴールド・角丸・影を無効化する。
   [B] grain オーバーレイ（body::after、マークアップ不要）。
   [C] header / footer（旧 p-header / p-footer 系）の再スキン。
   [D] トップ（m-site）／[E] philosophy（philosophy-design / pd-*）
       ／[F] 下層 fp-*／[G] 生成ページ c-page-keyvisual 系。
   [H] margin.js の行リビール（.m-line / .m-reveal-line）スタイル。

   詳細度は「renewal のセレクタ + 1クラス/属性」を基本に上書きし、
   !important は色トークンの徹底など最小限に留める。
   ============================================================= */

/* =============================================================
   [A] トークン再定義 — 全デザインファミリーを Margin パレットに
   ============================================================= */
:root {
  /* Margin 原色 */
  --m-paper: #faf8f4; /* 和紙白 */
  --m-paper-dim: #f1ede6;
  --m-ink: #1f1d1a; /* 墨 */
  --m-rule: #e6e2da; /* 罫線 1px */
  --m-accent: #55504a; /* 消炭 */
  --m-dark: #141311; /* ヒーローの闇 */
  --m-dark-2: #0c0b0a;

  --m-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --m-sans: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --m-latin: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    serif; /* 英字=Cormorant Garamond・和文グリフは明朝へ */
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- renewal.css の共通トークンを上書き --- */
  /* 英字ラベル → Cormorant Garamond / 本文和文も明朝に統一 → Zen Old Mincho / 見出し → Zen Old Mincho */
  --en-font: "Cormorant Garamond", "Times New Roman", serif;

  /* r-* (トップの旧アトム・生成ページで一部使用) */
  --r-ink: #1f1d1a;
  --r-sub: #55504a;
  --r-gold: #55504a; /* ゴールド廃止 → 消炭に */
  --r-gold-l: #6b655d;
  --r-charcoal: #1f1d1a;
  --r-line: #e6e2da;
  --r-paper: #faf8f4;
  --r-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --r-sans: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    serif;

  /* fp-* (下層ページ群) */
  --fp-ink: #1f1d1a;
  --fp-muted: #55504a;
  --fp-line: #e6e2da;
  --fp-paper: #faf8f4;
  --fp-paper-deep: #f1ede6;
  --fp-sage: #8b8578;
  --fp-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fp-sans: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    serif;

  /* f-* (トップの一部) */
  --f-ink: #1f1d1a;
  --f-black: #141311;
  --f-brown: #35322d;
  --f-brown-soft: #55504a;
  --f-muted: #8b8578;
  --f-line: rgba(31, 29, 26, 0.14);
  --f-line-light: rgba(250, 248, 244, 0.28);
  --f-paper: #faf8f4;
  --f-paper-soft: #f1ede6;
  --f-white: #f4f1ec;
  --f-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-sans: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    serif;

  /* pd-* (philosophy) */
  --pd-ink: #1f1d1a;
  --pd-muted: #55504a;
  --pd-line: #e6e2da;
  --pd-paper: #faf8f4;
  --pd-serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --pd-sans: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN",
    serif;
}

/* 本文の地色と字送りを Margin の呼吸に。既存レイアウトは壊さない。 */
body {
  background: var(--m-paper);
  color: var(--m-ink);
  font-family: var(--m-mincho); /* style.css の游ゴシック既定を明朝へ上書き */
}
/* 背面の木漏れ日レイヤーが余白から透けるよう、面の下地は透過。
   地色は body 側（和紙白 / philosophy は白）が受け持つ */
.m-site,
.m-page,
.philosophy-design {
  background: transparent;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -------------------------------------------------------------
   墨見出しのコントラスト保証
   antialiased の Mincho 大見出しは #1F1D1A でも「薄いグレー」に
   見えてしまう。Margin の見出し（明朝・墨・紙地）は
   -webkit-font-smoothing:auto + weight 600 で「くっきり墨」にする。
   本文（Zen Old Mincho）は antialiased のまま残す。
   ------------------------------------------------------------- */
body .philosophy-design .pd-hero__inner h1,
body .philosophy-design .pd-image-essay__body h2,
body .philosophy-design .pd-axis__intro,
body .philosophy-design .pd-axis-item h3,
body .philosophy-design .pd-closing__copy h2,
body .philosophy-design .pd-closing__copy p,
body .m-page .fp-hero h1,
body .m-page .fp-lead-title,
body .m-page .fp-section-head h2,
body .m-page .fp-image-statement__copy h2,
body .m-page .fp-card h3,
body .m-page .fp-cta h2,
body .m-page .fp-single-hero__copy h1,
body .m-site .dialo-panel h2,
body .m-site .m-works h2,
body .m-site .work-row h3,
body .m-site .m-contact h2 {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* 分割リビールで内側 span に入った見出しにも同じ描画を継承させる */
.philosophy-design .pd-hero__inner h1 .m-line__inner,
.philosophy-design .pd-image-essay__body h2 .m-line__inner,
.philosophy-design .pd-closing__copy h2 .m-line__inner,
.m-page .fp-hero h1 .m-line__inner,
.m-page .fp-section-head h2 .m-line__inner,
.m-page .fp-image-statement__copy h2 .m-line__inner,
.m-page .fp-cta h2 .m-line__inner,
.m-page .fp-single-hero__copy h1 .m-line__inner {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* 角丸・影・強い色を全体的に沈める（Margin は角丸/影を使わない） */
.m-page img,
.m-page figure,
.m-site img,
.philosophy-design img,
.fp-hero__media img,
.fp-card__image img,
.fp-split__media img,
.fp-image-statement__media img,
.fp-post__thumb img {
  border-radius: 0 !important;
}

/* =============================================================
   [B] grain オーバーレイ（マークアップ不要）
   ============================================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ドロワー/ライトボックス展開中や印刷では grain を抑制 */
body.drawer-open::after,
html.is-fp-lightbox-open body::after {
  opacity: 0.02;
}

/* 背景動画（木漏れ日/固定背景）はオーナー指示（2026-07-23）で廃止 */

/* =============================================================
   [C] HEADER / FOOTER 再スキン（旧 p-header / p-footer 系）
   ============================================================= */

/* ---- ローディング演出 ----
   白面に SHINWA のワードマークが下から立ち上がり、1px の罫線が
   左→右に引かれる。margin.js が「最低1.6s表示 × load完了（最大2.4s）」の
   条件で is-done を付与し、同時に html.m-intro-done を立てて
   ヒーローの光スイープへ演出を引き継ぐ。 */
.m-loading {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s,
    visibility 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s;
}
.m-loading__inner {
  text-align: center;
}
.m-loading__en {
  margin: 0 0 18px;
  font-family: var(--m-latin);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--m-accent);
  opacity: 0;
  animation: m-loading-fade 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.55s forwards;
}
.m-loading__word {
  margin: 0;
  overflow: hidden;
  font-family: var(--m-latin);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* letter-spacing の右余りを打ち消して視覚中央に */
  line-height: 1.1;
  color: var(--m-ink);
}
.m-loading__word span {
  display: block;
  transform: translateY(110%);
  animation: m-loading-rise 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.15s
    forwards;
}
.m-loading__rule {
  display: block;
  width: min(220px, 36vw);
  height: 1px;
  margin: 26px auto 0;
  background: var(--m-rule);
  transform: scaleX(0);
  transform-origin: left center;
  animation: m-loading-rule 1.4s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
}
@keyframes m-loading-rise {
  to {
    transform: translateY(0);
  }
}
@keyframes m-loading-fade {
  to {
    opacity: 1;
  }
}
@keyframes m-loading-rule {
  to {
    transform: scaleX(1);
  }
}
.m-loading.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.m-loading.is-done .m-loading__inner {
  transform: translateY(-14px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .m-loading {
    transition: none;
  }
  .m-loading__en,
  .m-loading__word span,
  .m-loading__rule {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- 下層ページの入場演出 ----
   白い面が135度の柔らかい斜めエッジで左上→右下へ抜けていく
   （ヒーローの光スイープと同じ署名）。CSSアニメーションのみで
   完結するため JS 停止時も安全。pointer-events は常に none。 */
.m-page-veil {
  position: fixed;
  inset: 0;
  z-index: 9400;
  pointer-events: none;
  background: #fff;
  -webkit-mask-image: linear-gradient(
    135deg,
    /* 入場はトップのローディング明けと同じ「左上→右下へ抜ける」（オーナー指示 2026-07-21/28）。
       ロゴの先出し問題は sg-menu.php の m-veil-active（幕中はヘッダーを伏せる）で解決 */
      transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  mask-image: linear-gradient(
    135deg,
    /* 入場はトップのローディング明けと同じ「左上→右下へ抜ける」（オーナー指示 2026-07-21/28）。
       ロゴの先出し問題は sg-menu.php の m-veil-active（幕中はヘッダーを伏せる）で解決 */
      transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.08) 34%,
    rgba(0, 0, 0, 0.32) 38%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0.68) 42%,
    rgba(0, 0, 0, 0.92) 46%,
    #000 50%,
    #000
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 220% 220%;
  mask-size: 220% 220%;
  animation: m-page-veil-out 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.1s both
    1;
}
@keyframes m-page-veil-out {
  from {
    opacity: 1;
    -webkit-mask-position: 100% 100%;
    mask-position: 100% 100%;
  }
  82% {
    opacity: 1;
  }
  to {
    /* 終端で完全に消す。マスク終端(0%0%)は右下に薄い白(≒18%)が残るため、
       最後に opacity を0へ落として焼き付きを防ぐ */
    opacity: 0;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-page-veil {
    display: none;
  }
}

/* 旧ローディング（script.bundle.js 駆動）は非表示に固定する
   （マークアップは残す。円環ローディングはユーザー要望で廃止） */
body .js-loading {
  display: none !important;
}

/* トップの m-header / m-nav を全ページのグローバルナビに統一したため、
   旧ヘッダー（p-header）は全ページで非表示にする（l-home 限定の既存ルールは
   renewal.css 側にそのまま残る＝死にスタイル化するが削除しない）。 */
body .p-header {
  display: none !important;
}
/* 旧SPドロワー（script.bundle.js 駆動の p-hamburger / p-navbar）も
   フルスクリーンメニュー統一により全ページで廃止（マークアップは残す） */
body .p-hamburger,
body .p-navbar {
  display: none !important;
}

/* ---- フルスクリーンメニュー展開時の整合 ---- */
/* メニューはヘッダー（z-index:100）より上・grain（9000）より下に。
   パネル自体は速く開き（0.45s）、その上でコンテンツが順に立ち上がる */
body .m-nav {
  z-index: 8500;
  transition: opacity 0.45s ease, visibility 0.45s;
}
/* ヘッダー（ロゴ＋ハンバーガー）はメニューより上に置き、
   ハンバーガーの2本線をそのままXへ変形させて閉じる操作に使う。
   スクロール追従の固定表示（全ページ）。下層は本文上余白116pxが
   固定ヘッダー分を確保、トップはヒーローが背面に来る。 */
body .m-header {
  position: fixed;
  z-index: 8600;
}
body .m-nav .nav-close {
  display: none; /* 閉じる操作はハンバーガー（X変形）に一本化 */
}
body .m-menu span {
  transition: transform 0.7s var(--m-ease), background-color 0.7s var(--m-ease);
  /* renewal.css は right center。開状態(center)と支点が食い違うと
     トグルの途中で線が横に振れて「位置が変わった」ように見えるため、
     閉状態も center に統一（sg-menu.php と同じ対策・オーナー再指摘 2026-07-18） */
  transform-origin: center;
}
/* メニュー開閉（body overflow:hidden）でスクロールバーが消えると
   ページ幅が変わり、fixed ヘッダー右端のハンバーガーが横にカクッと
   動く。ガターを常時確保して幅を不変に（sg-menu.php と同じ対策）。 */
html {
  scrollbar-gutter: stable;
}
/* ホバー: 2本の線が互い違いに静かに滑る（閉じている時のみ） */
body .m-menu[aria-expanded="false"]:hover span:first-child {
  transform: translateX(-9px);
}
body .m-menu[aria-expanded="false"]:hover span:last-child {
  transform: translateX(9px);
}
/* 展開中: 線がXへ。メニューの紙地に乗るため墨色に */
body .m-menu[aria-expanded="true"] span.m-menu__line {
  top: 15px;
  background: var(--m-ink);
  transform-origin: center;
}
body .m-menu[aria-expanded="true"] span.m-menu__line--top,
body .m-menu[aria-expanded="true"]:hover span.m-menu__line--top {
  transform: rotate(24deg);
}
body .m-menu[aria-expanded="true"] span.m-menu__line--bottom,
body .m-menu[aria-expanded="true"]:hover span.m-menu__line--bottom {
  transform: rotate(-24deg);
}
/* メニュー内コンテンツのフェードイン。
   発火側（.is-open の段差ディレイ 0.16〜0.4s）は renewal.css に残っているが、
   初期状態の定義がフェーズ0撤去で失われていたため復元する */
.m-nav .nav-content-item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--m-ease), transform 0.7s var(--m-ease);
}
/* パネル(0.45s)が開き切ってからコンテンツが順に立ち上がるよう、
   ディレイは is-open 側にのみ付ける（閉じるときはディレイなしで即応）。
   順序: パネル → Contentsラベル(0.2s) → 写真(0.3s) → 項目(0.45s〜0.93s) → 会社情報(0.85s) */
.m-nav .nav-photo,
.m-nav .nav-info {
  transition: opacity 0.9s var(--m-ease), transform 0.9s var(--m-ease);
}
.m-nav .nav-contents {
  transition: opacity 0.6s ease, transform 0.7s var(--m-ease);
}
.m-nav.is-open .nav-contents {
  transition-delay: 0.2s;
}
.m-nav.is-open .nav-photo {
  transition-delay: 0.3s;
}
.m-nav.is-open .nav-info {
  transition-delay: 0.85s;
}
.m-nav.is-open .nav-content-item:nth-child(1) {
  transition-delay: 0.45s;
}
.m-nav.is-open .nav-content-item:nth-child(2) {
  transition-delay: 0.53s;
}
.m-nav.is-open .nav-content-item:nth-child(3) {
  transition-delay: 0.61s;
}
.m-nav.is-open .nav-content-item:nth-child(4) {
  transition-delay: 0.69s;
}
.m-nav.is-open .nav-content-item:nth-child(5) {
  transition-delay: 0.77s;
}
.m-nav.is-open .nav-content-item:nth-child(6) {
  transition-delay: 0.85s;
}
.m-nav.is-open .nav-content-item:nth-child(7) {
  transition-delay: 0.93s;
}
@media (prefers-reduced-motion: reduce) {
  .m-nav .nav-content-item,
  .m-nav .nav-photo,
  .m-nav .nav-info {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- ロゴ ---- */
body .r-logo-en {
  font-family: var(--m-latin);
  letter-spacing: 0.42em;
  font-weight: 400;
}
body .r-logo-ja {
  font-family: var(--m-mincho);
  letter-spacing: 0.22em;
  color: var(--m-accent);
}

/* ---- ヘッダーの帯：和紙白・1px下罫線・墨文字 ---- */
body .p-header {
  background: rgba(250, 248, 244, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid var(--m-rule);
  box-shadow: none;
  transition: background-color 0.6s var(--m-ease),
    border-color 0.6s var(--m-ease), color 0.6s var(--m-ease),
    -webkit-backdrop-filter 0.6s var(--m-ease),
    backdrop-filter 0.6s var(--m-ease);
}
body .p-header,
body .p-header .r-logo-en,
body .p-header-nav__child {
  color: var(--m-ink);
}

/* ヒーロー型ページの最上部は帯を透明に。スクロールで .r-is-solid → 和紙白の帯。
   透明状態の文字色はヒーローの明暗で分岐する:
     - トップ（.l-home）: 闇のヒーロー → 白文字
     - philosophy / company / concept: 明るい和紙白のヒーロー → 墨文字 */
body.r-hero-page .p-header:not(.r-is-solid) {
  background: transparent;
  border-bottom-color: transparent;
  /* none は補間不能値のため blur(0px) を使う（0.6s トランジションを効かせる） */
  -webkit-backdrop-filter: blur(0px) saturate(1);
  backdrop-filter: blur(0px) saturate(1);
}
/* 既定（明るいヒーロー）：透明状態でも墨文字 */
body.r-hero-page .p-header:not(.r-is-solid),
body.r-hero-page .p-header:not(.r-is-solid) .r-logo-en,
body.r-hero-page .p-header:not(.r-is-solid) .p-header-nav__child {
  color: var(--m-ink);
}
body.r-hero-page .p-header:not(.r-is-solid) .r-logo-ja {
  color: var(--m-accent);
}
/* トップだけは闇のヒーローなので白文字 */
body.l-home.r-hero-page .p-header:not(.r-is-solid),
body.l-home.r-hero-page .p-header:not(.r-is-solid) .r-logo-en,
body.l-home.r-hero-page .p-header:not(.r-is-solid) .r-logo-ja,
body.l-home.r-hero-page .p-header:not(.r-is-solid) .p-header-nav__child {
  color: #f4f1ec;
}

body.r-hero-page .p-header.r-is-solid {
  background: rgba(250, 248, 244, 0.82);
  border-bottom: 1px solid var(--m-rule);
}
body.r-hero-page .p-header.r-is-solid,
body.r-hero-page .p-header.r-is-solid .r-logo-en,
body.r-hero-page .p-header.r-is-solid .p-header-nav__child {
  color: var(--m-ink);
}
body.r-hero-page .p-header.r-is-solid .r-logo-ja {
  color: var(--m-accent);
}

/* ---- グローバルナビ：小さめ英字・字間広め・下線ホバー ---- */
body .p-header-nav__child {
  font-family: var(--m-latin);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 0.35em;
}
body .p-header-nav__child::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--m-ease);
}
body .p-header-nav__item:hover > .p-header-nav__child::after,
body .p-header-nav__item:focus-within > .p-header-nav__child::after {
  transform: scaleX(1);
}
body .p-header-nav__child:hover {
  color: inherit;
  opacity: 0.7;
}
body.r-hero-page .p-header.r-is-solid .p-header-nav__child:hover {
  color: var(--m-ink);
  opacity: 0.7;
}

/* ---- SERVICE メガメニュー → 静かなドロップダウン ---- */
body .p-header-secondary-nav {
  background: rgba(250, 248, 244, 0.96);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border-top: 1px solid var(--m-rule);
  border-bottom: 1px solid var(--m-rule);
  box-shadow: none;
}
body .p-header-secondary-nav__container {
  background: transparent;
}
body .p-header-secondary-nav__heading {
  font-family: var(--m-latin);
  letter-spacing: 0.3em;
  color: var(--m-ink);
  background: none;
}
body .p-header-secondary-nav__heading span {
  font-family: var(--m-mincho);
  letter-spacing: 0.12em;
  color: var(--m-accent);
}
body .p-header-secondary-nav__title {
  font-family: var(--m-mincho);
  letter-spacing: 0.1em;
  color: var(--m-ink);
}
body .p-header-secondary-nav__desc {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--m-accent);
  line-height: 1.9;
}
body .p-header-secondary-nav__link {
  border-top: 1px solid var(--m-rule);
  transition: opacity 0.4s var(--m-ease);
}
body .p-header-secondary-nav__link:hover {
  opacity: 0.6;
}

/* ---- ハンバーガー：細線・墨。トップ（闇ヒーロー）だけ最上部で白 ---- */
body .c-hamburger__line {
  background: var(--m-ink);
  height: 1px;
}
body.l-home.r-hero-page:not(.drawer-open) .p-hamburger .c-hamburger__line {
  background: #f4f1ec;
}
body.drawer-open .c-hamburger__line {
  background: var(--m-ink);
}

/* ---- SP ドロワー（p-navbar）：和紙白・全画面・明朝 ---- */
body .p-navbar {
  background: var(--m-paper);
}
body .p-navbar__container {
  background: var(--m-paper);
}
body .p-navbar__item > a {
  font-family: var(--m-mincho);
  letter-spacing: 0.12em;
  color: var(--m-ink);
}
body .p-navbar__item > a span {
  font-family: var(--m-latin);
  letter-spacing: 0.28em;
  color: var(--m-accent);
}
body .p-navbar-secondary {
  border-left: 1px solid var(--m-rule);
}
body .p-navbar-secondary__item a {
  font-family: var(--m-mincho);
  letter-spacing: 0.08em;
  color: var(--m-accent);
}

/* ---- フッター：CONTACT バナー ＋ 罫線ナビ ---- */
body .p-footer {
  background: var(--m-paper-dim);
  border-top: 1px solid var(--m-rule);
  color: var(--m-ink);
}
body .p-footer-contact {
  background: var(--m-ink);
  color: var(--m-paper);
}
body .p-footer-contact__en {
  font-family: var(--m-latin);
  letter-spacing: 0.42em;
  color: rgba(250, 248, 244, 0.7);
}
body .p-footer-contact__ja {
  font-family: var(--m-mincho);
  letter-spacing: 0.1em;
  color: var(--m-paper);
}
body .p-footer-nav__item > a {
  font-family: var(--m-latin);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--m-accent);
  text-transform: uppercase;
  transition: color 0.4s var(--m-ease);
}
body .p-footer-nav__item > a:hover {
  color: var(--m-ink);
}
body .p-footer-secondary__item a {
  font-family: var(--m-mincho);
  letter-spacing: 0.06em;
  color: var(--m-accent);
  text-transform: none;
}
body .p-footer__logo a {
  font-family: var(--m-mincho);
  letter-spacing: 0.14em;
  color: var(--m-ink);
}
body .p-footer__copy small,
body .p-footer__return-top a {
  font-family: var(--m-latin);
  letter-spacing: 0.28em;
  color: var(--m-accent);
}
/* フッターの円形矢印ボタン：純白円→細線の墨/紙に */
body .p-footer-contact .c-arrow-type1__circle-top {
  stroke: var(--m-paper);
}
body .p-footer-contact .c-arrow-type1__circle-bottom {
  stroke: rgba(250, 248, 244, 0.35);
}

/* =============================================================
   [C-2] グローバルナビ（m-header / m-nav）を
   全ページ共通に。header.php へ移設したため .m-site
   スコープに依存せず動くことを確認の上、下層ページ用の
   墨バリアントを補う。
   ============================================================= */

/* header.php へ移設後も .l-root 直下（未配置の祖先）に置かれるため、
   renewal.css の position:absolute; inset:0 0 auto はそのまま
   ページ最上部に重なる形で機能する（挙動は移設前と同一）。 */

/* トップ（l-home）はロゴ白・ハンバーガー白の透明オーバーレイ。
   下層は紙地のため正規の墨/カラーロゴ（logo.svg）に切り替える。
   メニュー展開中はどのページも紙地になるため墨ロゴを出す。
   -------------------------------------------------------------
   明暗の切替は display:none/block だと遷移できず「パッと」切り替わる。
   白ロゴ・墨ロゴを重ねて opacity でクロスフェードし「ふわっと」変える。
   白ロゴを通常フローで置いて箱の高さを決め、墨ロゴを絶対配置で重ねる。 */
.m-logo {
  position: relative;
}
.m-logo img {
  display: block;
  width: 100%;
  transition: opacity 0.7s var(--m-ease);
}
.m-logo .m-logo__dark {
  position: absolute;
  inset: 0;
}
/* 既定（トップ・ヒーロー上）: 白ロゴを見せ、墨ロゴは透明 */
.m-logo .m-logo__light {
  opacity: 1;
}
.m-logo .m-logo__dark {
  opacity: 0;
}
/* 墨ヘッダーにする条件（いずれも opacity クロスフェード）:
   ・下層ページ（元から紙地）
   ・トップでキービジュを過ぎた（body.is-header-solid＝margin.js が付与）
   ・メニュー展開中（どのページも紙地になる） */
body:not(.l-home) .m-logo .m-logo__light,
body.l-home.is-header-solid .m-logo .m-logo__light,
body:has(.m-nav.is-open) .m-logo .m-logo__light {
  opacity: 0;
}
body:not(.l-home) .m-logo .m-logo__dark,
body.l-home.is-header-solid .m-logo .m-logo__dark,
body:has(.m-nav.is-open) .m-logo .m-logo__dark {
  opacity: 1;
}
body:not(.l-home) .m-menu span,
body.l-home.is-header-solid .m-menu span {
  background: var(--m-ink);
}

/* フルスクリーンメニュー（.m-nav）は position:fixed で
   .m-site スコープに依存しない実装のため、下層でも同じ見た目で
   開く。追加の補完は不要（確認済み）。 */

/* =============================================================
   [D] トップページ（.m-site）
   ============================================================= */

/* ---- ヒーロー：初回リビールの「光が抜ける」下地は白。
   （闇下地だと像が結ぶ前の一瞬が黒く見えるため） ---- */
.m-site .m-hero {
  background: #fff;
}
/* renewal.css の brightness(.48) は暗すぎるため写真の実力を活かす明るさへ */
.m-site .hero-visual {
  filter: saturate(0.95) brightness(0.92) contrast(1.03);
}
.m-site .hero-veil {
  background: linear-gradient(
      180deg,
      rgba(10, 9, 8, 0.22) 0%,
      rgba(10, 9, 8, 0.06) 40%,
      rgba(10, 9, 8, 0.26) 100%
    ),
    radial-gradient(
      150% 110% at 30% 46%,
      rgba(10, 9, 8, 0) 30%,
      rgba(10, 9, 8, 0.2) 100%
    );
}
.m-site .hero-vertical p {
  font-family: var(--m-latin);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.72);
}
.m-site .hero-vertical h1 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #f4f1ec;
}
.m-site .hero-side-copy {
  font-family: var(--m-mincho);
  letter-spacing: 0.12em;
  color: rgba(244, 241, 236, 0.85);
}

/* ---- opening / philosophy 抜粋：闇から明けるトーン ---- */
.m-site .opening {
  background: var(--m-dark);
}
/* 背景動画（明るい foliage）を「爽やかに明るく」見せる。
   以前は闇に沈めていた（brightness 0.82＋濃い闇スクリム）が暗すぎたため、
   明るさ・彩度を上げて瑞々しい緑を活かし、スクリムは薄い縁だけに抑える。
   白文字の可読は下の text-shadow で担保する。
   tree-motion(z0/video) → 薄スクリム(z0後段) → copy(z1) の重なり。 */
/* 一旦、暗くかかっているものを全て外して素の動画にする:
   ・動画の filter を none（brightness 等の加工なし）
   ・renewal.css の暗幕 .opening-tree-motion::after を無効化
   ・こちらの ::before スクリムも無効化 */
.m-site .opening .opening-concept-video,
.m-site .opening video {
  filter: none !important;
}
.m-site .opening-tree-motion::after {
  background: none !important;
}
.m-site .opening::before {
  content: none;
}
/* 動画には暗幕/フィルターをかけず、白文字側だけで視認性を確保する。
   明るい空・葉の上でも読めるよう、縁の締まり＋広い暗いハローを重ねた
   強めの text-shadow を敷く（動画は明るいまま）。 */
.m-site .opening-vertical-copy p,
.m-site .opening-silent-copy p,
.m-site .opening-vertical-copy h2,
.m-site .opening-silent-copy span,
.m-site .opening-page-link span,
.m-site .opening-page-link em {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(0, 0, 0, 0.45);
}
.m-site .opening-vertical-copy p,
.m-site .opening-silent-copy p {
  font-family: var(--m-mincho);
  letter-spacing: 0.1em;
  color: #f4f1ec; /* 低不透明だと明るい背景に埋もれるため不透明の白に */
}
.m-site .opening-vertical-copy h2 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #f4f1ec;
}
.m-site .opening-silent-copy span {
  font-family: var(--m-latin);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(
    244,
    241,
    236,
    0.86
  ); /* 明るい背景でも読めるよう不透明度を上げる */
}
.m-site .opening-page-link span {
  font-family: var(--m-latin);
  letter-spacing: 0.3em;
  color: #f4f1ec;
}
.m-site .opening-page-link em {
  font-family: var(--m-mincho);
  font-style: normal;
  letter-spacing: 0.1em;
  color: rgba(244, 241, 236, 0.7);
}

/* ---- residence / dialo / works / contact：明けた和紙白の余白 ---- */
.m-site .residence-space,
.m-site .m-dialo,
.m-site .m-works,
.m-site .m-contact {
  background: var(--m-paper);
}
/* dialo は画像が全面を覆う full-bleed セクションのため、上辺の罫線は
   画像の上に線が乗って不自然になる（白地化で罫線が可視化した）。
   罫線はテキスト区切りとして機能する works / contact のみに残す。 */
.m-site .m-works,
.m-site .m-contact {
  border-top: 1px solid var(--m-rule);
}

.m-site .residence-en {
  font-family: var(--m-latin);
  letter-spacing: 0.08em; /* 大見出しサイズのため字間は詰める（0.42emだと見切れる） */
  text-transform: uppercase;
  color: var(--m-accent);
}
/* MARGIN（約4.65em幅）が列に収まる上限へ。renewal の 8.5vw だと見切れる */
@media (min-width: 901px) {
  .m-site .residence-en {
    font-size: clamp(44px, 7vw, 112px);
  }
}
.m-site .residence-sub,
.m-site .residence-copy p:not(.residence-en) {
  font-family: var(--m-mincho);
  letter-spacing: 0.08em;
  color: var(--m-accent);
}
.m-site .section-kicker {
  font-family: var(--m-latin);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--m-accent);
}
.m-site .dialo-panel h2,
.m-site .m-works h2,
.m-site .work-row h3,
.m-site .m-contact h2 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.m-site .dialo-panel p:not(.section-kicker),
.m-site .work-row p:not(.section-kicker) {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: #45413b;
}
.m-site .work-row > div span,
.m-site .work-spec li {
  font-family: var(--m-latin);
  letter-spacing: 0.28em;
  color: var(--m-accent);
}
.m-site .work-spec li {
  font-family: var(--m-mincho);
  letter-spacing: 0.05em;
  text-transform: none;
}
.m-site .m-text-link {
  font-family: var(--m-mincho);
  letter-spacing: 0.12em;
  color: var(--m-ink);
}
.m-site .contact-actions a {
  font-family: var(--m-mincho);
  letter-spacing: 0.1em;
  color: var(--m-ink);
}

/* statement コピーのリビールはブラーではなく「下からの立ち上がり」に統一
   （renewal.css の blur(8px) フェードを上書き。行送りは margin.js の m-line が担当） */
.m-page.has-fp-reveal .fp-image-statement__copy {
  filter: none;
  transform: translateY(46px);
  transition: opacity 1s var(--m-ease), transform 1.2s var(--m-ease);
}
.m-page.has-fp-reveal
  .fp-image-statement.is-fp-visible
  .fp-image-statement__copy {
  filter: none;
  transform: none;
}

/* dialo セクションは写真全面の上にテキストが乗るため白系に */
.m-site .m-dialo .section-kicker {
  color: rgba(244, 241, 236, 0.72);
}
.m-site .m-dialo .dialo-panel h2 {
  color: #f4f1ec;
}
.m-site .m-dialo .dialo-panel p:not(.section-kicker) {
  color: rgba(244, 241, 236, 0.92);
}
.m-site .m-dialo .m-text-link {
  color: #f4f1ec;
  border-color: rgba(244, 241, 236, 0.5);
}

/* =============================================================
   m-collage: Margin セクション — 写真の帯が左→右へ流れるマーキー
   -------------------------------------------------------------
   高さ・大きさをばらした写真の帯（2セット複製）を translate3d で
   ループさせる。各写真は白い霞（blur + brightness）がほどけて現れる。
   ホバーで一時停止。reduced-motion では静止。
   ============================================================= */
.m-site .m-collage {
  position: relative;
  padding: clamp(100px, 12vw, 180px) 0 clamp(80px, 10vw, 140px);
  overflow: hidden;
}
/* 見出し（MARGIN＋余白に住まう）は左、本文は右の2カラム。
   space-between で左右に寄せ、上端で揃える。モバイルは縦積みに戻す。 */
.m-site .m-collage__copy {
  max-width: min(
    1080px,
    92vw
  ); /* .residence-copy の 520px を上書きし2カラム幅を確保 */
  margin: 0 auto clamp(64px, 8vw, 120px);
  padding: 0 clamp(24px, 6vw, 100px);
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 120px);
}
.m-site .m-collage__copy-head {
  flex: 0 0 auto;
}
.m-site .m-collage__copy-body {
  flex: 0 1 clamp(360px, 42%, 560px);
}
.m-site .m-collage__marquee {
  position: relative; /* 白幕スイープ ::after の基準 */
  overflow: hidden;
  width: 100%;
  height: clamp(420px, 42vw, 680px); /* 帯の上下で画像がクロップされる */
}
.m-site .m-collage__track {
  display: flex;
  width: max-content;
  animation: m-collage-flow 52s linear infinite;
  will-change: transform;
}
.m-site .m-collage__set {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 20px);
  padding-right: clamp(8px, 1vw, 20px);
}
.m-site .m-collage__item {
  margin: 0;
  flex: none;
}
.m-site .m-collage__item .image-mask {
  display: block;
  overflow: hidden;
}
.m-site .m-collage__item .image-mask img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* サイズと縦位置: 参考サイトの密度（大きめ・間隔詰め・上下にはみ出す） */
.m-site .m-collage__item--1 {
  width: clamp(280px, 26vw, 440px);
  margin-top: 9vw;
}
.m-site .m-collage__item--1 .image-mask {
  aspect-ratio: 4 / 3;
}
.m-site .m-collage__item--2 {
  width: clamp(200px, 19vw, 320px);
  margin-top: -4vw;
  margin-left: -3vw;
}
.m-site .m-collage__item--2 .image-mask {
  aspect-ratio: 3 / 4;
}
.m-site .m-collage__item--3 {
  width: clamp(150px, 14vw, 230px);
  margin-top: 14vw;
}
.m-site .m-collage__item--3 .image-mask {
  aspect-ratio: 3 / 4;
}
.m-site .m-collage__item--4 {
  width: clamp(170px, 16vw, 260px);
  margin-top: -2vw;
}
.m-site .m-collage__item--4 .image-mask {
  aspect-ratio: 16 / 10;
}
.m-site .m-collage__item--5 {
  width: clamp(300px, 28vw, 470px);
  margin-top: 8vw;
  margin-left: -2vw;
}
.m-site .m-collage__item--5 .image-mask {
  aspect-ratio: 4 / 3;
}
.m-site .m-collage__item--6 {
  width: clamp(220px, 21vw, 350px);
  margin-top: -5vw;
}
.m-site .m-collage__item--6 .image-mask {
  aspect-ratio: 3 / 4;
}
.m-site .m-collage__item--7 {
  width: clamp(150px, 14vw, 230px);
  margin-top: 12vw;
  margin-left: -2.5vw;
}
.m-site .m-collage__item--7 .image-mask {
  aspect-ratio: 3 / 4;
}
.m-site .m-collage__item--8 {
  width: clamp(240px, 22vw, 370px);
  margin-top: 2vw;
}
.m-site .m-collage__item--8 .image-mask {
  aspect-ratio: 4 / 3;
}

/* =============================================================
   m-collage セクションのリビール（2系統に分離）
   - コピー（見出し＋本文）: 他ページと同じブラー→シャープを見出し→本文の
     時間差で。
   - マーキー（右→左に流れる画像帯）: 白い幕が「左→右」へ抜けて現す
     （画像の流れに合わせた水平スイープ）。
   ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* 霞フェードは使わずセクションは常在。中身を個別にリビールする */
  .m-site .m-collage[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* --- コピー: サイト標準のブラー→シャープ。見出し→本文の時間差 --- */
  .m-site .m-collage__copy-head,
  .m-site .m-collage__copy-body {
    opacity: 0;
    filter: blur(14px);
    transition: opacity 1.4s var(--m-ease), filter 1.4s var(--m-ease);
  }
  .m-site .m-collage__copy-body {
    transition-delay: 0.26s; /* 本文は見出しより後に立ち上がる */
  }
  .m-site .m-collage.is-visible .m-collage__copy-head,
  .m-site .m-collage.is-visible .m-collage__copy-body {
    opacity: 1;
    filter: blur(0);
  }

  /* --- マーキー: 白い幕が「左→右」へ抜けて画像帯を現す（90度・水平） --- */
  .m-site .m-collage__marquee::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background: #fff;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      transparent 40%,
      rgba(0, 0, 0, 0.08) 44%,
      rgba(0, 0, 0, 0.32) 48%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.68) 52%,
      rgba(0, 0, 0, 0.92) 56%,
      #000 60%,
      #000
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      transparent 40%,
      rgba(0, 0, 0, 0.08) 44%,
      rgba(0, 0, 0, 0.32) 48%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.68) 52%,
      rgba(0, 0, 0, 0.92) 56%,
      #000 60%,
      #000
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 220% 100%;
    mask-size: 220% 100%;
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%; /* 白面が全面を覆う位置 */
    opacity: 0; /* フェイルセーフ: ゲート無し（JS死亡）時は白面を出さない */
  }
  html.m-img-reveal .m-site .m-collage__marquee::after {
    opacity: 1;
  }
  /* マーキー自身が視界に入ってから（.m-collage__marquee[data-reveal] の
     is-visible）光が左→右へ抜ける。セクション上部のコピーで先に発動すると
     マーキーが画面外のうちに終わって「アニメが見えない」ため、帯が実際に
     見える位置で発動させる。スイープもゆっくりめ（2.6s）で視認性を上げる。 */
  .m-site .m-collage__marquee.is-visible::after {
    animation: m-collage-lightleak 2.6s cubic-bezier(0.645, 0.045, 0.355, 1)
      both;
  }
}
@keyframes m-collage-lightleak {
  from {
    opacity: 1;
    -webkit-mask-position: 100% 0%;
    mask-position: 100% 0%; /* 白面が全面を覆う */
  }
  82% {
    opacity: 1;
  }
  to {
    /* 終端は完全に消す（右端に薄い白が残らないよう opacity も落とす） */
    opacity: 0;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%; /* 左→右へ抜けて像が残る */
  }
}

@keyframes m-collage-flow {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0); /* 右から左へ流れる */
  }
}

/* リビールはセクション一括（<section data-reveal> に [K] の
   汎用ブラーリビールが掛かり、コピーと帯が丸ごと霞からほどける）。
   画像個別の演出は無効化: 統一斜めマスクも外して常時表示にする */
html.m-img-reveal .m-collage .image-mask img {
  /* 統一斜めマスク（renewal.css 末尾）と特異度が拮抗して負けるため
     !important で確実に無効化する。マーキー内の画像はセクション
     一括リビールのみで隠し、個別ワイプは走らせない */
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-position: 0 0 !important;
  mask-position: 0 0 !important;
  clip-path: none !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

@media (max-width: 900px) {
  .m-site .m-collage__copy {
    margin-bottom: 56px;
    /* 狭い画面では2カラムをやめて縦積み（見出し→本文） */
    flex-direction: column;
    gap: clamp(28px, 6vw, 48px);
  }
  .m-site .m-collage__copy-body {
    flex-basis: auto;
  }
  .m-site .m-collage__track {
    animation-duration: 64s;
  }
  .m-site .m-collage__marquee {
    height: clamp(300px, 88vw, 420px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-site .m-collage__track {
    animation: none;
  }
}

/* works の行を 1px 罫線で区切る（静かなリズム） */
.m-site .works-list .work-row {
  border-top: 1px solid var(--m-rule);
}
.m-site .works-list .work-row:last-child {
  border-bottom: 1px solid var(--m-rule);
}

/* フルスクリーンナビ：和紙白・明朝 */
.m-site .m-nav {
  background: var(--m-paper);
}
.m-nav .nav-contents p,
.m-nav .nav-photo p span {
  font-family: var(--m-mincho);
  letter-spacing: 0.14em;
}
.m-nav .nav-content-item > a {
  font-family: var(--m-latin);
  letter-spacing: 0.28em;
  color: var(--m-ink);
}
.m-nav .nav-content-item ul a,
.m-nav .nav-info p,
.m-nav .nav-address {
  font-family: var(--m-mincho);
  letter-spacing: 0.06em;
  color: var(--m-accent);
}
.m-nav .nav-info small {
  font-family: var(--m-latin);
  letter-spacing: 0.24em;
  color: var(--m-accent);
}

/* =============================================================
   [E] PHILOSOPHY（.philosophy-design / pd-*）
   ============================================================= */
.philosophy-design {
  background: #fff; /* Philosophy は白地 */
}
body.l-philosophy {
  background: #fff;
}
/* Philosophy の statement 画像の白幕も紙色ではなく白に */
body.l-philosophy .fp-image-statement__media {
  background: #fff !important;
}

/* pd-hero：他の下層ページ（fp-hero）と同じ意匠に統一 —
   大きなセリフ英字タイトル（Philosophy）＋ 小さめ和文リード。
   renewal.css の pd-hero（100svh・左寄せ・強い植物影・上罫線）を
   fp-hero の寸法（padding / タイトル clamp(62-112px) / 薄い影 / 下罫線）へ */
.philosophy-design .pd-hero {
  background: #fff;
  min-height: auto;
  padding: clamp(170px, 17vw, 250px) 0 clamp(90px, 10vw, 150px);
  border-bottom: 1px solid var(--m-rule);
  display: block;
}
.philosophy-design .pd-hero::before {
  opacity: 0.07;
} /* fp-hero と同じ薄さの植物影 */
.philosophy-design .pd-hero::after {
  content: none;
}
.philosophy-design .pd-hero__inner {
  width: var(--fp-inner, min(1160px, 86vw));
  margin: 0 auto;
  padding-top: 0;
}
.philosophy-design .pd-rule {
  display: none;
} /* fp-hero に上罫線は無い */
.philosophy-design .pd-hero .pd-kicker {
  margin: 0 0 clamp(20px, 2vw, 30px);
  font-family: var(--m-latin);
  font-weight: 400;
  font-size: clamp(62px, 8vw, 112px);
  line-height: 0.92;
  /* 他ページの大見出し（.m-page .fp-hero .fp-kicker）と字送りを揃える。
     以前は 0.015em で Philosophy だけ詰まって見えていた */
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--m-ink);
}
/* hero 以外の pd-kicker（本文中の英字ラベル）は従来のまま */
.philosophy-design .pd-kicker {
  font-family: var(--m-latin);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--m-accent);
}
/* image-essay の「MARGIN」は見出し的に大きく（オーナー指示 2026-07-23） */
.philosophy-design .pd-image-essay__body .pd-kicker {
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: 0.2em;
  line-height: 1.1;
  color: var(--m-ink);
}
.philosophy-design .pd-hero__inner h1 {
  font-family: var(--m-mincho);
  font-weight: 500;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.9;
  letter-spacing: 0.11em;
  color: var(--m-ink);
}

/* pd-opening：和紙白のオーバーレイに墨文字。
   背景動画は薄く透かし、紙の上に静かな明朝の墨を置く。 */
.philosophy-design .pd-opening {
  position: relative;
  /* 動画と同じ場面の poster を下地に敷く（上のスクリムで和紙白に洗われる）。
     動画が来る前・再生できない環境でも常に正しい場面が見える */
  background: url(../videos/philosophy-opening-bg-poster.jpg) center / cover
    no-repeat var(--m-paper);
}
/* 動画の上に敷く和紙白のスクリム。動画のどのフレームでも墨文字が
   立つ濃さを保つ。video(z0) → scrim(z1) → copy/text(z2)。 */
.philosophy-design .pd-opening::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.46) 42%,
      rgba(255, 255, 255, 0.38) 72%,
      rgba(255, 255, 255, 0.52) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.26) 45%,
      rgba(255, 255, 255, 0.46) 100%
    );
}
/* 動画は紙の下に淡く透ける程度に。
   iOS は動画レイヤーの初回合成でスクリムより上に生フレームを一瞬描く
   癖があるため、実際に再生が始まる（margin.js が is-m-video-live を
   付与する）までは透明にしておき、下地の poster（同じ場面）から
   切れ目なくフェードインさせる */
.philosophy-design .pd-opening__video {
  background: transparent;
  filter: brightness(1.02) saturate(0.85) contrast(1) !important;
  opacity: 0;
  transition: opacity 1.1s ease 0.1s;
  /* 合成レイヤーを読み込み時に確保し、スクロール到達時の
     レイヤー生成コストを先払いする（かくつき対策の一部） */
  will-change: opacity;
}
.philosophy-design .pd-opening__video.is-m-video-live {
  opacity: 1;
}
/* スマホの負荷対策: pd-opening の背景動画は filter を外す（フレーム毎合成が重い）。
   （旧・木漏れ日レイヤー m-sunlight の停止指定は背景動画廃止に伴い撤去） */
@media (max-width: 900px) {
  .philosophy-design .pd-opening__video {
    filter: none !important;
  }
}
.philosophy-design .pd-opening__copy .pd-opening__lead-line,
.philosophy-design .pd-opening__text {
  font-family: var(--m-mincho);
  letter-spacing: 0.1em;
  color: #45413b;
}
.philosophy-design .pd-opening__copy h2 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--m-ink);
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/* コピー領域は闇スクリム（z1）より前面へ。 */
.philosophy-design .pd-opening__copy,
.philosophy-design .pd-opening__text {
  position: relative;
  z-index: 2;
}

/* 見出し前の罫（—）は下層全ページで全廃（2026-07-20 オーナー指示） */

/* pd-image-essay
   前段の全面帯（余白は、静けさの設計である）を削除した 2026-07-18 以降、
   renewal 側の padding-top:2vh では動画セクションに詰まって見える。
   ページ主題（余白）どおり、下余白 24vh と対になる息の長い間合いを取る */
.philosophy-design .pd-image-essay {
  border-top: 1px solid var(--m-rule);
  background: #fff;
  padding-top: 22vh;
}
@media (max-width: 980px) {
  .philosophy-design .pd-image-essay {
    padding-top: 140px;
  }
}
.philosophy-design .pd-image-essay__body h2 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.philosophy-design .pd-image-essay__body p:not(.pd-kicker) {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.2;
  color: #45413b;
}

/* ---- 縦書きエッセイ構成（2026-07-18 オーナー選定）----
   ありがちな「左写真・右テキスト」をやめる。読み順は
   写真 →（右端）縦書き見出し → その左の小さな本文。
   本文列は見出しと同じ高さに伸ばし、キッカーを天・本文を地に置いて
   間の空白そのものを見せる。 */
.philosophy-design .pd-image-essay--tate .pd-image-essay__photo {
  grid-column: 2 / 7;
  align-self: center;
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__photo img {
  width: 100%;
  height: min(76vh, 720px);
  min-height: 480px;
  object-fit: cover;
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__body {
  grid-column: 8 / 13;
  max-width: none;
  align-self: center;
  display: flex;
  flex-direction: row-reverse; /* 縦書きの読み順: 右=見出し → 左=本文 */
  justify-content: flex-start;
  align-items: stretch;
  gap: clamp(48px, 5vw, 110px);
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__body h2 {
  writing-mode: vertical-rl;
  font-size: clamp(26px, 2.3vw, 38px);
  line-height: 2.3; /* 縦書きでは列間 */
  letter-spacing: 0.28em;
  margin: 0;
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__notes {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* キッカー=天 / 本文=地 */
}
.philosophy-design
  .pd-image-essay--tate
  .pd-image-essay__notes
  p:not(.pd-kicker) {
  margin: 48px 0 0;
}
@media (max-width: 980px) {
  /* オープニングの縦書き見出しを2列に収める（オーナー指示 2026-07-30）。
     <br>で2列を意図しているが、2列目「すべてを満たすことではない」(13字)が
     入りきらず「ない」が3列目へ溢れていた。縦書きでは height が行長にあたるため、
     13字×(1em+字間0.14em)=14.82em にゆとりを足した値を与えて折り返しを止める。
     em指定なのでフォントサイズが変わっても比率は崩れない */
  .philosophy-design .pd-opening__copy h2 {
    height: 15.5em;
  }

  /* スマホは pd-opening の縦書き見出しと同じ所作:
     写真 → 右寄り縦書き見出し → 横書き本文 */
  .philosophy-design .pd-image-essay--tate .pd-image-essay__photo img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .philosophy-design .pd-image-essay--tate .pd-image-essay__body {
    display: block;
    margin-top: 72px;
  }
  .philosophy-design .pd-image-essay--tate .pd-image-essay__body h2 {
    font-size: clamp(26px, 6.4vw, 36px);
    line-height: 2;
    letter-spacing: 0.22em;
    /* 縦書きの読み始め＝右端へ寄せる（縦書きブロックの幅は内容分しか
       ないため、左マージン auto で右に押す） */
    margin-left: auto;
  }
  .philosophy-design .pd-image-essay--tate .pd-image-essay__notes {
    display: block;
    max-width: 640px;
    margin-top: 64px;
  }
}

/* pd-axis：6項目を 1px 罫線グリッドに */
.philosophy-design .pd-axis {
  /* 上罫線はオーナー指示で削除（2026-07-30）。前後の区画とも白地で
     つながるため、線が無い方が余白が続いて見える */
  background: #fff;
  /* 旧 24vh（renewal.css）。前区画の下余白と積み重なって空白が膨らむため圧縮
     （オーナー指摘 2026-08-02） */
  padding-top: clamp(120px, 14vh, 180px);
}
.philosophy-design .pd-axis__intro p {
  font-family: var(--m-mincho);
  letter-spacing: 0.08em;
  color: var(--m-accent);
}
.philosophy-design .pd-axis-item {
  border-top: 1px solid var(--m-rule);
  /* 上は clamp・下は renewal の 86px で不揃い→下を上と揃えて詰める（オーナー指示 2026-07-23） */
  padding-top: clamp(2rem, 5vh, 3rem);
  padding-bottom: clamp(2rem, 5vh, 3rem);
}
.philosophy-design .pd-axis-item__en {
  font-family: var(--m-latin);
  font-weight: 500; /* Cormorant Garamond は EB Garamond より細見えするため小サイズラベルは 500 */
  /* 0.3em では最長の RELATION(8字/52px)が列1(360px)を超え本文と重なる。
     tracked-caps の上品さは保ちつつ、全ラベルが列内に収まる 0.14em に。 */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-accent);
}
.philosophy-design .pd-axis-item h3 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.philosophy-design .pd-axis-item p:not(.pd-axis-item__en) {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: #45413b;
}

/* pd-outro：締めのメッセージ（写真・CTAなし・共通CONTACTの手前）。
   中央揃えをやめ、他セクションと同じ左揃えの編集的レイアウトに（オーナー指示 2026-07-23） */
/* A案: 冒頭（pd-opening）と呼応する全幅の写真帯（オーナー指示 2026-07-30）。
   「文字→写真の縦積みが単調」の指摘を受けた組み替え。床の写真を区画全面に敷き、
   冒頭と同じ半透明の白ヴェール越しに墨文字を置いて、始まりと締めを同じ所作にする。
   重なり順: 写真(z0) → 白ヴェール(z1) → 文字(z2)。
   写真は絶対配置のためマークアップでは inner の外（sectionの直下）に置くこと */
.philosophy-design .pd-outro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip; /* hiddenのままだとview()の基準を奪う */
  background: #fff;
  padding: clamp(150px, 24vw, 300px) 0;
}
/* 白ヴェール。冒頭（0.26〜0.6）より透過を強め、床の木目と光を感じさせる。
   文字が乗る左側だけ少し濃くして墨の可読性を確保する */
.philosophy-design .pd-outro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.32) 46%,
      rgba(255, 255, 255, 0.22) 78%,
      rgba(255, 255, 255, 0.32) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.32) 0%,
      rgba(255, 255, 255, 0.16) 45%,
      rgba(255, 255, 255, 0.34) 100%
    );
}
.philosophy-design .pd-outro__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
/* スクロール視差（オーナー指示 2026-07-30）。sg-scrollfx（sg-menu.php）が
   .pd-outro__photo に --py を書き込み、ここで translate として消費する。
   振れ幅は帯の高さ×0.10（上限90px・画面端では最大約103px）のため、
   上下110pxのブリードで写真の切れ端が見えないようにする。
   reduced-motion では sg-scrollfx が起動せず --py は付かない（既定値0で静止） */
.philosophy-design .pd-outro__photo img {
  position: absolute;
  left: 0;
  top: -110px;
  display: block;
  width: 100%;
  height: calc(100% + 220px);
  object-fit: cover;
  object-position: center;
  translate: 0 var(--py, 0px);
}
/* スマホ視差: --pyはタッチでは書かれないためCSS scroll-drivenで代替（2026-08-07・
   keyframes sg-mplx-drift は全ページ共通の sg-menu.css で定義） */
@supports (animation-timeline: view()) {
  @media (pointer: coarse) {
    .philosophy-design .pd-outro__photo img {
      animation: sg-mplx-drift auto linear both;
      animation-timeline: view();
    }
  }
}
.philosophy-design .pd-outro__inner {
  position: relative;
  z-index: 2;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}
.philosophy-design .pd-outro__msg {
  position: relative; /* 背後の光だまり(::before)の基準 */
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: var(--m-mincho);
  font-weight: 500;
  font-size: clamp(
    20px,
    2.4vw,
    30px
  ); /* 各行が収まるサイズに抑え、1文字折返しを防ぐ */
  letter-spacing: 0.12em;
  line-height: 2.1;
  color: var(--m-ink);
  text-wrap: pretty;
}
/* 文字の背後にだけ敷く、ぼかした白だまり。
   写真のブラインド影が文字に重なる箇所でコントラストが2.6:1まで落ちたため
   （Canvas合成で実測）、光だまりで最暗部を持ち上げて可読性を確保する。
   端をぼかしてあるので「白い箱」ではなく床に落ちる光のように見える */
.philosophy-design .pd-outro__msg::before {
  content: "";
  position: absolute;
  inset: -40px -48px;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.42);
  filter: blur(30px);
  border-radius: 40px;
}
@media (max-width: 860px) {
  .philosophy-design .pd-outro__msg {
    font-size: clamp(15px, 4vw, 19px);
    letter-spacing: 0.08em;
    line-height: 2;
  }
  /* スマホは帯の上下を詰めすぎない（写真の空気を残す） */
  .philosophy-design .pd-outro {
    padding: clamp(120px, 30vw, 170px) 0;
  }
}
/* pd-closing：静かな結び（撤去済み・旧定義は残置） */
.philosophy-design .pd-closing {
  border-top: 1px solid var(--m-rule);
  background: #fff;
}
.philosophy-design .pd-closing__copy h2,
.philosophy-design .pd-closing__copy p {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--m-ink);
}

/* philosophy パララックス「窓抜き」方式（拡大ゼロ・オーナー指示 2026-07-22）:
   器を overflow:hidden の窓にし、内側画像を height:114% で少し高くして枠内を
   translateY でスライドさせる（margin-motion.js は data-mp-scale="1" で scale なし）。
   PCのみ（パララックス自体が desktop 限定） */
@media (min-width: 981px) {
  .philosophy-design .fp-hero__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1360 / 560;
    max-height: 620px;
    border-radius: 4px;
  }
  .philosophy-design .fp-hero__media img {
    position: absolute;
    left: 0;
    top: -7%;
    width: 100%;
    height: 114%;
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
  }
  .philosophy-design .pd-image-essay--tate .pd-image-essay__photo .image-mask {
    display: block;
    position: relative;
    overflow: hidden;
    height: min(76vh, 720px);
    min-height: 480px;
  }
  .philosophy-design .pd-closing__photo .image-mask {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
  }
  .philosophy-design
    .pd-image-essay--tate
    .pd-image-essay__photo
    .image-mask
    img,
  .philosophy-design .pd-closing__photo .image-mask img {
    position: absolute;
    left: 0;
    top: -7%;
    width: 100%;
    height: 114%;
    min-height: 0;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* ===== image-essay(tate): 全面写真＋白文字オーバーレイに刷新（オーナー選定 2026-07-23）。
   写真をセクション全面に敷き、暗幕の上に MARGIN・本文・縦書き見出しを白で重ねる ===== */
.philosophy-design .pd-image-essay--tate {
  position: relative;
  display: block;
  min-height: min(90vh, 860px);
  padding: 0;
  overflow: hidden;
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__photo {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__photo .image-mask {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.philosophy-design
  .pd-image-essay--tate
  .pd-image-essay__photo
  .image-mask
  img {
  position: absolute;
  left: 0;
  top: -7%;
  width: 100%;
  height: 114%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: cover;
}
.philosophy-design .pd-image-essay--tate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(14, 16, 20, 0.66),
    rgba(14, 16, 20, 0.3) 55%,
    rgba(14, 16, 20, 0.5)
  );
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__body {
  position: relative;
  z-index: 2;
  grid-column: auto;
  min-height: min(90vh, 860px);
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(40px, 6vw, 110px);
  padding: clamp(80px, 11vh, 150px) clamp(32px, 7vw, 110px);
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__body h2 {
  writing-mode: vertical-rl;
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 2.8vw, 44px);
  line-height: 2.15;
  letter-spacing: 0.28em;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45);
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__notes {
  max-width: 32em;
  display: block;
}
.philosophy-design .pd-image-essay--tate .pd-image-essay__notes .pd-kicker {
  color: #fff;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.philosophy-design
  .pd-image-essay--tate
  .pd-image-essay__notes
  p:not(.pd-kicker) {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4);
}
@media (max-width: 860px) {
  .philosophy-design .pd-image-essay--tate {
    min-height: auto;
  }
  .philosophy-design .pd-image-essay--tate .pd-image-essay__body {
    min-height: min(88vh, 720px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(26px, 7vw, 40px);
    padding: clamp(96px, 18vw, 140px) 28px;
  }
  .philosophy-design .pd-image-essay--tate .pd-image-essay__body h2 {
    writing-mode: horizontal-tb;
    font-size: clamp(24px, 6.4vw, 32px);
    line-height: 1.9;
    letter-spacing: 0.14em;
  }
  .philosophy-design .pd-image-essay--tate .pd-image-essay__notes {
    max-width: none;
  }
}

/* image-essay(tate) 写真なし版：全面写真＋暗幕を打ち消し、紙地に墨文字の
   編集レイアウトに（縦書き見出し右・MARGIN＋本文左）・オーナー指示 2026-07-23 */
.philosophy-design .pd-image-essay--tate.pd-image-essay--nophoto {
  min-height: auto;
  overflow: visible;
  /* 旧 clamp(160px,22vw,320px)。次区画(pd-axis)の上余白と積み重なって
     広幅で584pxの空白になっていたため圧縮（オーナー指摘 2026-08-02） */
  padding: clamp(110px, 12vw, 190px) clamp(24px, 8vw, 140px);
  background: #fff;
}
.philosophy-design .pd-image-essay--tate.pd-image-essay--nophoto::after {
  content: none;
}
/* 6視点と同じ2カラム編集レイアウト（左=大見出し / 右=本文・天揃え・左寄せ） */
.philosophy-design
  .pd-image-essay--tate.pd-image-essay--nophoto
  .pd-image-essay__body {
  min-height: auto;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr); /* 左=縦書き見出し(内容幅) / 右=本文が残り幅いっぱい */
  align-items: center;
  padding: 0;
  gap: clamp(56px, 7vw, 140px);
}
.philosophy-design
  .pd-image-essay--tate.pd-image-essay--nophoto
  .pd-image-essay__body
  h2 {
  grid-column: 1;
  writing-mode: vertical-rl; /* 縦書き（オーナー指示 2026-07-23） */
  color: var(--m-ink);
  text-shadow: none;
  font-size: clamp(32px, 3.4vw, 54px);
  line-height: 2.2;
  letter-spacing: 0.24em;
}
.philosophy-design
  .pd-image-essay--tate.pd-image-essay--nophoto
  .pd-image-essay__notes {
  grid-column: 2;
  max-width: none;
  display: block;
}
.philosophy-design
  .pd-image-essay--tate.pd-image-essay--nophoto
  .pd-image-essay__notes
  .pd-kicker {
  color: var(--m-ink);
  margin-bottom: clamp(40px, 5vw, 68px); /* MARGIN と本文の間を広く */
}
.philosophy-design
  .pd-image-essay--tate.pd-image-essay--nophoto
  .pd-image-essay__notes
  p:not(.pd-kicker) {
  color: #45413b;
  text-shadow: none;
  font-size: clamp(
    15px,
    1.15vw,
    18px
  ); /* 本文も少し大きめに（詰まり感の解消） */
  line-height: 2.5;
  letter-spacing: 0.1em;
}
@media (max-width: 860px) {
  .philosophy-design .pd-image-essay--tate.pd-image-essay--nophoto {
    padding: clamp(96px, 20vw, 150px) clamp(24px, 5vw, 64px);
  }
  .philosophy-design
    .pd-image-essay--tate.pd-image-essay--nophoto
    .pd-image-essay__body {
    min-height: auto;
    padding: 0;
    grid-template-columns: 1fr;
    gap: clamp(28px, 7vw, 44px);
  }
  .philosophy-design
    .pd-image-essay--tate.pd-image-essay--nophoto
    .pd-image-essay__body
    h2 {
    grid-column: auto;
    writing-mode: horizontal-tb; /* SPは横組みで積む */
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1.7;
  }
  .philosophy-design
    .pd-image-essay--tate.pd-image-essay--nophoto
    .pd-image-essay__notes {
    grid-column: auto;
  }
}

/* =============================================================
   [F] 下層ページ群（.m-page / fp-*）
   ============================================================= */
.m-page {
  background: var(--m-paper);
}

/* ---- fp-hero → Margin のページヘッダー：英字ラベル + 明朝大見出し + リード + 1px罫線 ---- */
.m-page .fp-hero::before {
  opacity: 0.07;
} /* 背景の植物影を薄く */
.m-page .fp-hero::after {
  background: var(--m-rule);
}
.m-page .fp-hero__copy {
  border-left: 0;
  /* 見出し・コピーの左端をKV画像(fp-hero__media=--fp-wide)の左端に揃える（オーナー指示 2026-07-23） */
  width: var(--fp-wide);
  padding-left: 0;
} /* タイトル左の縦線は無し */
/* fp-hero の「大見出し」は .fp-hero .fp-kicker（62-112px）— 英字セリフ（和文グリフは明朝へ滑落） */
.m-page .fp-hero .fp-kicker {
  font-family: var(--m-latin);
  font-weight: 400; /* Cormorant Garamond 400 — 大サイズは細めが上品 */
  letter-spacing: 0.04em;
  color: var(--m-ink);
}
/* 全面画像帯（fp-hero__media / fp-single-hero__media / fp-image-statement__media）は
   他の画像（fp-split / fp-card 等）と同じ挙動に揃える。ブラー結像の上書きを撤去し、
   renewal.css 末尾 Phase0 の -30度マスク拭き上げに一本化＝サイトの他画像と同一。
   透過部の下地対策として media 背景は透過にする（紙色を透けさせない）。 */
html.m-img-reveal .m-page .fp-hero__media,
html.m-img-reveal .m-page .fp-single-hero__media,
html.m-img-reveal .m-page .fp-image-statement__media,
html.m-img-reveal .m-page.has-fp-reveal .fp-image-statement__media:has(img) {
  background: transparent !important;
  background-color: transparent !important;
}
/* fp-image-statement のテキスト可読性スクリム(::after 暗いグラデ, z1)を無効化。
   -30度マスクで透明化した画像域にこのスクリムが乗り「灰色の下地」が出ていた
   （他画像 fp-split/fp-card にはスクリムが無く綺麗に -30度 が出る）。見出しは
   text-shadow で可読性を確保。これで他画像と同じ綺麗な拭き上げに揃う。 */
.m-page .fp-image-statement::after {
  display: none !important;
  background: none !important;
}
/* ヒーロー画像(fp-hero__media / fp-single-hero__media)は横長・薄型のため、-30度の
   斜めマスク帯では右下の隅を覆いきれず白が残る（構造的）。これらだけブラー結像
   （不透明・blur(16px)→0 + scale）にして白残りを回避する。全面画像帯
   (fp-image-statement) はユーザー希望で -30度（他画像と同じ動き）のまま。 */
html.m-img-reveal .m-page .fp-hero__media img,
html.m-img-reveal .m-page .fp-single-hero__media img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: blur(16px);
  transform: scale(1.06);
  transition: filter 2.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    transform 2.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}
html.m-img-reveal .m-page .fp-hero__media.is-shinwa-image-visible img,
html.m-img-reveal .m-page .fp-single-hero__media.is-shinwa-image-visible img {
  filter: blur(0);
  transform: scale(1);
}

/* fp-card--text（Dialo等の設計3軸カード）の表示リビール。
   既存の fade-up が効かない/気づきにくいケースがあるため、自己完結の
   リビールを高詳細度で付ける: 初期は opacity0＋translateY(40px)、
   is-fp-visible で結像。Space→Sense→Relation の順に段差。
   初期非表示は html.m-img-reveal ゲート配下のみ＝JS死亡時は素で見える
   （フェイルセーフ）。 */
@media (prefers-reduced-motion: no-preference) {
  html.m-img-reveal .m-page.has-fp-reveal .fp-card-grid--stack .fp-card--text {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.1s var(--m-ease), transform 1.1s var(--m-ease);
  }
  html.m-img-reveal
    .m-page.has-fp-reveal
    .fp-card-grid--stack
    .fp-card--text.is-fp-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .m-page.has-fp-reveal .fp-card-grid--stack .fp-card--text:nth-child(2) {
    transition-delay: 0.16s;
  }
  .m-page.has-fp-reveal .fp-card-grid--stack .fp-card--text:nth-child(3) {
    transition-delay: 0.32s;
  }
}
/* h1（小さな添え行）と section-head の kicker は英字ラベル調 */
.m-page .fp-hero h1,
.m-page .fp-lead-title,
.m-page .fp-section-head h2 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--m-ink);
}
.m-page .fp-section-head .fp-kicker {
  font-family: var(--m-latin);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--m-accent);
}

/* 記事末尾の「最近のお知らせ」は、下層ページの章見出しと同じ密度に。 */
.m-page .fp-single-related .fp-section-head h2 {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.42;
  letter-spacing: 0.08em;
}
@media (max-width: 700px) {
  .m-page .fp-single-related .fp-section-head h2 {
    font-size: clamp(28px, 8vw, 42px);
    line-height: 1.55;
  }
}
.m-page .fp-hero__lead,
.m-page .fp-body,
.m-page .fp-section-head p {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.2;
  color: #45413b;
}
/* 英字ラベル系は --m-latin（Cormorant Garamond 先頭・和文グリフは Zen Old Mincho に滑落）で統一 */
.m-page .fp-card__en,
.m-page .fp-card__role {
  font-family: var(--m-latin);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--m-accent);
}

/* ---- fp-section の地色（deep も和紙白の濃淡で） ---- */
.m-page .fp-section {
  background: var(--m-paper);
}
.m-page .fp-section--deep {
  background: var(--m-paper-dim);
}
.m-page .fp-section + .fp-section {
  border-top: 1px solid var(--m-rule);
}

/* ---- fp-card：静かなカード。角丸/影なし、hover は淡く ---- */
.m-page .fp-card {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.m-page .fp-card h3 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.m-page .fp-card p {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.1;
  color: #45413b;
}
.m-page .fp-card--text {
  border-top: 1px solid var(--m-rule);
  background: transparent;
}

/* ---- fp-image-statement：白文字が画像に乗る帯。
   画像の読み込み前（reveal 前）や明るい画像でも白飛びしないよう、
   闇の下地 + テキスト側スクリムで白コピーの可読を常に保証する。
   （白コピーで運用される philosophy の帯に限定。下層の墨コピー帯は対象外） ---- */
.philosophy-design .fp-image-statement {
  background: #1b1a17;
}
.philosophy-design .fp-image-statement__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(15, 14, 12, 0.72) 0%,
    rgba(15, 14, 12, 0.5) 42%,
    rgba(15, 14, 12, 0.22) 72%,
    rgba(15, 14, 12, 0.08) 100%
  );
}

/* ---- fp-split / fp-image-statement の見出し・本文 ---- */
.m-page .fp-image-statement__copy h2 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.m-page .fp-image-statement__copy p,
.m-page .fp-split__body p {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.2;
  color: #45413b;
}
.m-page .fp-split__body > .fp-kicker {
  font-family: var(--m-latin);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--m-accent);
}

/* ---- fp-list（会社概要表・works 詳細表）→ 1px 罫線ミニマル表 ---- */
.m-page .fp-list {
  border-top: 1px solid var(--m-rule);
}
.m-page .fp-list__row {
  border-bottom: 1px solid var(--m-rule);
}
.m-page .fp-list__term {
  font-family: var(--m-latin);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--m-accent);
}
.m-page .fp-list__desc {
  font-family: var(--m-mincho);
  letter-spacing: 0.06em;
  color: var(--m-ink);
}

/* ---- fp-cta / fp-link ---- */
.m-page .fp-cta h2 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.m-page .fp-link {
  font-family: var(--m-mincho);
  letter-spacing: 0.12em;
  color: var(--m-ink);
}

/* ---- fp-filter（カテゴリ絞り込み）→ 罫線タブ・英字 ---- */
.m-page .fp-filter a {
  font-family: var(--m-latin);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--m-accent);
  position: relative;
  padding-bottom: 0.4em;
  transition: color 0.5s var(--m-ease);
}
.m-page .fp-filter a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--m-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--m-ease);
}
.m-page .fp-filter a:hover {
  color: var(--m-ink);
}
.m-page .fp-filter a.is-current {
  color: var(--m-ink);
}
.m-page .fp-filter a.is-current::after {
  transform: scaleX(1);
}

/* ---- News archive：SHIN KA の Information と同じ可変幅 ---- */
.m-page .fp-archive--news .fp-archive__head,
.m-page .fp-archive--news > .fp-filter,
.m-page .fp-archive--news > .fp-post-grid,
.m-page .fp-archive--news > .fp-pagination {
  width: 88%;
  max-width: 1000px;
}
.m-page .fp-archive__head h1,
.m-page .fp-archive__head h2 {
  font-family: var(
    --m-latin
  ); /* Works/News など英字見出し。和文が来ても明朝に滑落 */
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.m-page .fp-archive__head p {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #45413b;
}

/* ---- fp-post（一覧カード）：罫線区切りの静かなカード ---- */
.m-page .fp-post {
  background: transparent;
  box-shadow: none;
}
.m-page .fp-post__meta,
.m-page .fp-post__meta * {
  font-family: var(--m-latin);
  letter-spacing: 0.22em;
  color: var(--m-accent);
}
.m-page .fp-post h2,
.m-page .fp-post h3,
.m-page .fp-post__title {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.m-page .fp-post__excerpt {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #45413b;
}

.m-page .fp-archive--news .fp-post-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.m-page .fp-archive--news .fp-post {
  padding: 0;
}

.m-page .fp-archive--news .fp-post:last-child {
  border-bottom: 1px solid rgba(32, 33, 29, 0.16);
}

.m-page .fp-archive--news .fp-post > a {
  display: block;
  padding: 29px 0 34px;
}

.m-page .fp-archive--news .fp-post__meta,
.m-page .fp-archive--news .fp-post__meta * {
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.06em;
}

.m-page .fp-archive--news .fp-post__meta {
  gap: 10px;
  margin: 0 0 14px;
}

.m-page .fp-archive--news .fp-post h2 {
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.m-page .fp-archive--news .fp-post__excerpt {
  display: none;
}

@media (min-width: 1200px) {
  .m-page .fp-archive--news .fp-post h2 {
    font-size: 18px;
  }
}

@media (max-width: 991px) {
  .m-page .fp-archive--news .fp-archive__head,
  .m-page .fp-archive--news > .fp-filter,
  .m-page .fp-archive--news > .fp-post-grid,
  .m-page .fp-archive--news > .fp-pagination {
    width: 84%;
  }

  .m-page .fp-archive--news .fp-post > a {
    padding: 29px 0 31px;
  }
}

/* ---- fp-pagination ---- */
.m-page .fp-pagination a,
.m-page .fp-pagination span,
.m-page .c-pagination-list a,
.m-page .c-pagination-list span {
  font-family: var(--m-latin);
  letter-spacing: 0.2em;
  color: var(--m-accent);
}
.m-page .c-pagination-list .current,
.m-page .fp-pagination .current {
  color: var(--m-ink);
}

/* ページネーション統一（オーナー指示 2026-07-28）＋四角枠化（2026-07-29）:
   数字だけでは現在位置が分かりにくいという指摘を受け、Cormorant の数字を
   細枠の四角で囲むボタン型に。style.css の旧48px角ボタン（黒枠・黒地反転）
   とは別物で、紙色に馴染む1px罫＋現在ページのみ墨地反転。
   セレクタは style.css と同指定・後読みのためこちらが勝つ */
.c-pagination-list {
  gap: clamp(10px, 1.2vw, 16px);
  align-items: center;
}
.c-pagination-list li {
  margin: 0;
  font-size: inherit;
}
/* .m-page 付きは、上の .m-page .c-pagination-list a（--m-accent）より
   詳細度を上げて works と同じ薄灰に揃えるため */
.c-pagination-list .page-numbers,
.m-page .c-pagination-list .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 46px;
  height: 46px;
  width: auto;
  padding: 0 12px;
  background: none;
  border: 1px solid #ddd8d0;
  border-radius: 0;
  line-height: 1;
  font-family: var(--m-latin);
  font-size: clamp(16px, 1.6vw, 19px);
  letter-spacing: 0; /* 枠内中央に置くため字間は詰める */
  color: #8f8b82; /* works の --stone と同値 */
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
/* 現在ページ: 墨地に紙色文字で一目で分かるように */
.c-pagination-list .page-numbers.current,
.m-page .c-pagination-list .page-numbers.current {
  background: var(--m-ink);
  border-color: var(--m-ink);
  color: #faf8f4;
  font-weight: 400;
}
/* 前へ/次へ矢印は works（--ink-soft）と同じ濃さ */
.c-pagination-list .page-numbers.prev,
.c-pagination-list .page-numbers.next,
.m-page .c-pagination-list .page-numbers.prev,
.m-page .c-pagination-list .page-numbers.next {
  color: #514d47;
}
/* 「…」は枠なしの区切り記号として扱う */
.c-pagination-list .page-numbers.dots,
.m-page .c-pagination-list .page-numbers.dots {
  border-color: transparent;
  min-width: 22px;
  padding: 0;
}
.c-pagination-list .page-numbers:focus,
.m-page .c-pagination-list .page-numbers:focus {
  color: var(--m-ink);
  border-color: #a89878; /* --brass */
}
@media (hover: hover) and (pointer: fine) {
  .c-pagination-list a.page-numbers:hover,
  .m-page .c-pagination-list a.page-numbers:hover {
    color: var(--m-ink);
    border-color: #a89878;
    background: rgba(168, 152, 120, 0.08);
  }
}
/* works は中央寄せのため、news（renewal.css で flex-start）も中央へ統一 */
.fp-pagination .c-pagination-list {
  justify-content: center;
}

/* ---- fp-single（works/news 詳細）---- */
.m-page .fp-single-hero__copy h1 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.m-page .fp-single-meta,
.m-page .fp-single-meta * {
  font-family: var(--m-mincho);
  letter-spacing: 0.06em;
  color: var(--m-accent);
}
.m-page .fp-single-body,
.m-page .fp-single-body p,
.m-page .wysiwyg-style-content p {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.2;
  color: #35322d;
}
.m-page .fp-single-body h2,
.m-page .fp-single-body h3,
.m-page .wysiwyg-style-content h2,
.m-page .wysiwyg-style-content h3 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}

/* ---- fp-award：ゴールド地を消炭系に、罫線で締める ---- */
.m-page .fp-award-feature {
  border-top: 1px solid var(--m-rule);
  background: var(--m-paper-dim);
}
.m-page .fp-award-feature h2,
.m-page .fp-award-feature h3 {
  font-family: var(--m-mincho);
  font-weight: 500;
  color: var(--m-ink);
}

/* 一般 c- ボタンを Margin ゴーストボタン調に（no-post/back 等） */
.m-page .c-button-type2,
.m-page a.c-button-type2 {
  font-family: var(--m-mincho);
  letter-spacing: 0.14em;
  color: var(--m-ink);
  border-color: var(--m-ink);
  border-radius: 0;
}
.m-page .c-no-post-message {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--m-accent);
}

/* =============================================================
   [G] 生成ページ（page.php / 404.php）: c-page-keyvisual 系
   最低限 Margin トーンに揃える。
   ============================================================= */
.l-container .c-page-keyvisual {
  background: var(--m-dark);
}
/* KVにアイキャッチ写真がある場合（page.php が has-photo を付与）:
   白見出しが明るい写真に沈まないよう薄い墨のスクリムを重ねる */
.l-container .c-page-keyvisual__photo.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 19, 16, 0.42),
    rgba(20, 19, 16, 0.3) 50%,
    rgba(20, 19, 16, 0.46)
  );
}
.l-container .c-page-heading__title,
.l-container .c-page-heading__title--white {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.l-container .c-page-heading__jp,
.l-container .c-page-heading__jp--white {
  font-family: var(--m-latin);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.l-container .p-page-single__body,
.l-container .p-page-single__body p,
.l-container .wysiwyg-style-content p {
  font-family: var(--m-sans);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 2.2;
  color: #35322d;
}
.l-container .p-page-single__body h2,
.l-container .p-page-single__body h3,
.l-container .wysiwyg-style-content h2,
.l-container .wysiwyg-style-content h3 {
  font-family: var(--m-mincho);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--m-ink);
}
.l-container .p-breadcrumb,
.l-container .p-breadcrumb * {
  font-family: var(--m-latin);
  letter-spacing: 0.18em;
}
.l-container .p-notfound-lead {
  font-family: var(--m-mincho);
  letter-spacing: 0.08em;
  color: var(--m-accent);
}
.l-container .p-notfound-button .c-button-type2 {
  font-family: var(--m-mincho);
  letter-spacing: 0.14em;
  color: var(--m-ink);
  border-color: var(--m-ink);
  border-radius: 0;
}
/* editor 出力の見出しに明朝 */
.wysiwyg-style-content h1,
.wysiwyg-style-content h4 {
  font-family: var(--m-mincho);
  font-weight: 500;
  color: var(--m-ink);
}

/* =============================================================
   [J] m-footer — フッター刷新（全ページ統一）
   footer.php の .p-footer を置き換えた新フッター。
   地: var(--m-dark)。上端の罫線は無し（墨地への切替そのものが合図）。
   ゴールド・影・角丸は使わない（Margin の規約）。
   ============================================================= */
.m-footer {
  /* 漆を思わせる、わずかに温かい墨黒。 */
  background: linear-gradient(135deg, #211e1a 0%, #191714 58%, #1d1a17 100%);
  color: rgba(244, 241, 236, 0.82);
}
.m-footer__inner {
  padding: clamp(96px, 14vh, 160px) 6vw clamp(40px, 6vh, 64px);
}

/* ---- statement ブロック ---- */
.m-footer__en {
  margin: 0 0 28px;
  font-family: var(--m-latin);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.6);
}
.m-footer__copy {
  margin: 0 0 44px;
  font-family: var(--m-mincho);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #f4f1ec;
}
.m-footer__contact {
  display: inline-flex;
  align-items: baseline;
  gap: 1em;
  color: #f4f1ec;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.4em;
  transition: opacity 0.4s var(--m-ease);
}
.m-footer__contact:hover {
  opacity: 0.7;
}
.m-footer__contact span {
  font-family: var(--m-latin);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.m-footer__contact em {
  font-family: var(--m-mincho);
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(244, 241, 236, 0.82);
}

/* ---- グリッド：nav + info（PC 2カラム / SP 1カラム） ---- */
.m-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  margin-top: clamp(72px, 10vh, 120px);
}
.m-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.m-footer__nav a {
  display: inline-block;
  font-family: var(--m-latin);
  /* 12px → 15px（オーナー指示 2026-07-30）。実効値は後読みの m-footer.css 側だが、
     読み込み順が変わっても崩れないよう両方を揃える */
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  line-height: 2.4;
  color: rgba(244, 241, 236, 0.82);
  text-decoration: none;
  transition: opacity 0.4s var(--m-ease);
}
.m-footer__nav a:hover {
  opacity: 0.6;
}
.m-footer__info {
  font-family: var(--m-mincho);
  letter-spacing: 0.06em;
  line-height: 2.1;
  color: rgba(244, 241, 236, 0.82);
}
.m-footer__info p {
  margin: 0 0 1em;
}
.m-footer__company a {
  color: #f4f1ec;
  text-decoration: none;
}
.m-footer__tel a,
.m-footer__sns a {
  color: rgba(244, 241, 236, 0.82);
  text-decoration: none;
  transition: opacity 0.4s var(--m-ease);
}
.m-footer__tel a:hover,
.m-footer__sns a:hover {
  opacity: 0.7;
}
.m-footer__sns a {
  font-family: var(--m-latin);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* ---- bottom：罫線 + copyright / Page Top 両端配置 ---- */
.m-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(64px, 8vh, 96px);
  padding-top: 28px;
  border-top: 1px solid rgba(244, 241, 236, 0.16);
}
.m-footer__top {
  font-family: var(--m-latin);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.82);
  text-decoration: none;
  transition: opacity 0.4s var(--m-ease);
}
.m-footer__top:hover {
  opacity: 0.6;
}
.m-footer__copyright {
  font-family: var(--m-latin);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(244, 241, 236, 0.6);
}

@media (max-width: 768px) {
  .m-footer__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .m-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 16px;
  }
}

/* =============================================================
   [H] margin.js の行リビール（.m-line / .m-reveal-line）
   ゆっくり（1.2〜1.6s, expo.out）行が下から立ち上がる。
   ============================================================= */
.m-line {
  display: block;
  overflow: hidden;
}
.m-line__inner {
  display: block;
  opacity: 0;
  filter: blur(16px);
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  will-change: opacity, filter;
}
.m-reveal-line.is-m-in .m-line__inner {
  opacity: 1;
  filter: blur(0);
}
/* 行を少しずつ遅らせる */
.m-reveal-line.is-m-in .m-line:nth-child(2) .m-line__inner {
  transition-delay: 0.12s;
}
.m-reveal-line.is-m-in .m-line:nth-child(3) .m-line__inner {
  transition-delay: 0.24s;
}
.m-reveal-line.is-m-in .m-line:nth-child(4) .m-line__inner {
  transition-delay: 0.36s;
}

/* 単一行（分割なし）もブラーから */
.m-reveal-line--single {
  opacity: 0;
  filter: blur(16px);
  transition: opacity 1.4s var(--m-ease), filter 1.4s var(--m-ease);
}
.m-reveal-line--single.is-m-in {
  opacity: 1;
  filter: blur(0);
}

.m-reveal {
  opacity: 0;
  filter: blur(14px);
  transition: opacity 1.4s var(--m-ease), filter 1.4s var(--m-ease);
}
.m-reveal.is-m-in {
  opacity: 1;
  filter: blur(0);
}

/* =============================================================
   レスポンシブ（375px 対応）
   ============================================================= */
@media (max-width: 560px) {
  body::after {
    opacity: 0.03;
  }
  /* fp-hero のラベル/リードが詰まりすぎないよう字間を少し詰める */
  .m-page .fp-hero .fp-kicker {
    letter-spacing: 0.02em;
  }
  .m-page .fp-card__en,
  .m-page .fp-list__term {
    letter-spacing: 0.2em;
  }
  body .p-header-nav__child {
    letter-spacing: 0.22em;
  }
}

/* =============================================================
   reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .m-line__inner {
    transform: none !important;
  }
  .m-reveal-line--single,
  .m-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  body::after {
    display: none;
  }
}

/* =============================================================
   [I] 和文本文の明朝チューニング — 英字セリフ/和文明朝の統一
   ============================================================= */
.m-site,
.m-page,
.philosophy-design {
  font-weight: 400;
  letter-spacing: 0.05em;
}
.m-site p,
.m-page p,
.philosophy-design p {
  font-weight: 400;
}

/* =============================================================
   [K] テキストリビールの統一（ブラー全廃・下からの立ち上がり）
   -------------------------------------------------------------
   テキスト表示は「ブラー→シャープ」で統一する:
   opacity 0→1 ＋ filter blur→0 ／ 1.6s ／ cubic-bezier(.165,.84,.44,1)。
   transform による移動は用いない。画像系（.image-mask 等の白幕マスク）は
   対象外。既存の transition-delay（時間差）は維持する。
   ============================================================= */

/* 遅延ユーティリティ（0.2s刻み・5段）。将来テンプレから .m-delay1〜5 として
   付与できるよう用意。現時点ではテンプレへの付与は行わない。 */
.m-delay1 {
  transition-delay: 0.2s;
}
.m-delay2 {
  transition-delay: 0.4s;
}
.m-delay3 {
  transition-delay: 0.6s;
}
.m-delay4 {
  transition-delay: 0.8s;
}
.m-delay5 {
  transition-delay: 1s;
}

/* ---- ヒーロー縦書きコピー（renewal.css:617-639 相当, blur(10px)） ---- */
.hero-vertical p,
.hero-vertical h1 {
  transform: none;
  filter: blur(16px);
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.is-ready .hero-vertical h1,
.is-ready .hero-vertical p {
  transform: none;
  filter: blur(0);
}

/* ---- philosophy pd-hero 見出し（renewal.css:2154-2172 相当, blur(10px)） ---- */
.pd-hero h1 {
  transform: none;
  filter: blur(16px);
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.is-ready .pd-hero .pd-kicker,
.is-ready .pd-hero h1 {
  transform: none;
  filter: blur(0);
}

/* ---- m-site / philosophy-design 汎用 [data-reveal]
   （renewal.css:5044-5056 相当。:not(.reveal-image) で画像系は除外済み。
   blur(8px) を全廃し、下からの立ち上がりに統一） ---- */
.m-site [data-reveal]:not(.reveal-image),
.philosophy-design [data-reveal]:not(.reveal-image) {
  transform: none;
  filter: blur(14px);
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.m-site [data-reveal].is-visible:not(.reveal-image),
.philosophy-design [data-reveal].is-visible:not(.reveal-image) {
  transform: none;
  filter: blur(0);
}
/* スマホもテキストはブラー結像で統一（オーナー指示 2026-07-17、
   「直ってない」再指摘 2026-07-18）。translateY のせり上がりは使わない。
   モバイル GPU 負荷を抑えるため PC の blur(14px) より浅い blur(10px) にし、
   renewal.js のモバイル即時発火（threshold 0.01）と合わせて
   「ぼやけた何かが後から突然結像する」知覚を避ける。 */
@media (max-width: 900px) {
  .m-site [data-reveal]:not(.reveal-image),
  .philosophy-design [data-reveal]:not(.reveal-image) {
    filter: blur(10px);
    transform: none;
    transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1),
      filter 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .m-site [data-reveal].is-visible:not(.reveal-image),
  .philosophy-design [data-reveal].is-visible:not(.reveal-image) {
    filter: blur(0);
    transform: none;
  }
}

/* ---- works 行の子要素（renewal.css:5134-5147 相当, blur(6px)） ---- */
.m-works .work-row > div {
  transform: none;
  filter: blur(14px);
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.m-works .work-row.is-visible > div {
  transform: none;
  filter: blur(0);
}

/* ---- fp-split__body（renewal.css:5482-5496 相当, blur(4px) !important）
   renewal 側が !important のため、同等以上の詳細度 + !important で上書き。
   時間差（.18s delay）は維持する。 ---- */
body .m-page.has-fp-reveal .fp-split .fp-split__body {
  transform: none !important;
  filter: blur(14px) !important;
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.18s,
    filter 1.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.18s !important;
}
body .m-page.has-fp-reveal .fp-split.is-fp-visible .fp-split__body {
  transform: none !important;
  filter: blur(0) !important;
}

/* ---- fp-image-statement__copy（renewal.css:3978-3989 相当, blur(8px)）
   既に margin.css [D] で translateY(46px) / filter:none に上書き済みだが、
   統一仕様（28px / 1.6s / cubic-bezier(.165,.84,.44,1)）に揃える ---- */
.m-page.has-fp-reveal .fp-image-statement__copy {
  transform: none;
  filter: blur(16px);
  transition: opacity 1.6s cubic-bezier(0.165, 0.84, 0.44, 1),
    filter 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.m-page.has-fp-reveal
  .fp-image-statement.is-fp-visible
  .fp-image-statement__copy {
  transform: none;
  filter: blur(0);
}

/* ---- reduced-motion セーフティネット ----
   renewal.css の reduce ブロックは [data-reveal] 系はカバー済みだが、
   .work-row > div と .fp-split__body は対象外のため、ここで即時表示を保証する。 */
@media (prefers-reduced-motion: reduce) {
  .hero-vertical h1,
  .hero-vertical p,
  .pd-hero h1,
  .pd-hero .pd-kicker,
  .m-site [data-reveal],
  .philosophy-design [data-reveal],
  .m-works .work-row > div,
  .m-page.has-fp-reveal .fp-split .fp-split__body,
  .m-page.has-fp-reveal .fp-image-statement__copy {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =============================================================
   [L] テキストリンクの2枚重ねホバー
   -------------------------------------------------------------
   マークアップは data-m-hover 属性の付与のみ（表示テキストと同一の
   文言。.m-text-link は既存の ::after が罫線に使われているため、
   ラベルを内側 span で包む最小限のマークアップ変更で対応 — 罫線は
   renewal.css 側で変更していない）。対象を overflow:hidden の
   inline-block にし、::after に attr(data-m-hover) を複製して下に
   待機させる。hover で本体・複製の両方を translateY(-100%) して
   入れ替える（0.4s cubic-bezier(.77,0,.175,1)）。
   ============================================================= */
.m-text-link span[data-m-hover],
.opening-page-link span[data-m-hover],
.m-footer__nav a[data-m-hover],
.m-footer__contact span[data-m-hover] {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
/* 2枚重ねスライドと既存のオパシティ減光が二重に効かないよう、
   data-m-hover を持つ要素では従来の :hover 減光を無効化する */
.m-footer__nav a[data-m-hover]:hover {
  opacity: 1;
}
.m-footer__contact:has(span[data-m-hover]):hover {
  opacity: 1;
}
.m-text-link span[data-m-hover]::after,
.opening-page-link span[data-m-hover]::after,
.m-footer__nav a[data-m-hover]::after,
.m-footer__contact span[data-m-hover]::after {
  content: attr(data-m-hover);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  text-decoration: underline;
}
@media (prefers-reduced-motion: no-preference) {
  .m-text-link span[data-m-hover],
  .opening-page-link span[data-m-hover],
  .m-footer__nav a[data-m-hover],
  .m-footer__contact span[data-m-hover],
  .m-text-link span[data-m-hover]::after,
  .opening-page-link span[data-m-hover]::after,
  .m-footer__nav a[data-m-hover]::after,
  .m-footer__contact span[data-m-hover]::after {
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .m-text-link:hover span[data-m-hover],
  .opening-page-link:hover span[data-m-hover],
  .m-footer__nav a[data-m-hover]:hover,
  .m-footer__contact:hover span[data-m-hover] {
    transform: translateY(-100%);
  }
  .m-text-link:hover span[data-m-hover]::after,
  .opening-page-link:hover span[data-m-hover]::after,
  .m-footer__nav a[data-m-hover]:hover::after,
  .m-footer__contact:hover span[data-m-hover]::after {
    transform: translateY(-100%);
  }
}

/* フッターは文字を上下させず、罫線だけを左から伸ばす。
   本文中のテキストリンクのスライド演出はそのまま残す。 */
.m-footer__nav a[data-m-hover] {
  overflow: visible;
  transition: color 0.4s var(--m-ease);
}
.m-footer__nav a[data-m-hover]::after {
  content: "";
  top: auto;
  bottom: -0.1em;
  width: 0;
  height: 1px;
  background: currentColor;
  text-decoration: none;
  transform: none;
  transition: width 0.45s var(--m-ease);
}
.m-footer__nav a[data-m-hover]:hover {
  opacity: 1;
  transform: none;
}
.m-footer__nav a[data-m-hover]:hover::after {
  width: 100%;
  transform: none;
}
.m-footer__contact:has(span[data-m-hover]) {
  position: relative;
  border-bottom: 0;
}
.m-footer__contact:has(span[data-m-hover])::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.45s var(--m-ease);
}
.m-footer__contact span[data-m-hover] {
  overflow: visible;
  transform: none;
}

.m-footer__contact:hover span[data-m-hover] {
  transform: none !important;
}
.m-footer__contact span[data-m-hover]::after {
  display: none;
}
.m-footer__contact:has(span[data-m-hover]):hover::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .m-text-link span[data-m-hover]::after,
  .opening-page-link span[data-m-hover]::after,
  .m-footer__nav a[data-m-hover]::after,
  .m-footer__contact span[data-m-hover]::after {
    display: none;
  }
}

/* スマホ/タブレットのテキストリビールは「下から上」ではなくブラー結像のみ
   （オーナー指示 2026-07-17・再指摘 2026-07-18）。translateY をどの層が
   再付与しても効かないよう !important のセーフティネットを最後に置く。
   画像系（.reveal-image / .image-mask 内包）は別機構のため対象外。 */
@media (max-width: 900px) {
  .m-site [data-reveal]:not(.reveal-image),
  .philosophy-design [data-reveal]:not(.reveal-image),
  .m-page [data-reveal]:not(.reveal-image) {
    transform: none !important;
  }
}

/* CONTACT 文言のSP専用改行（「から、」後で折り返す・オーナー指示 2026-07-23） */
.c-sp-br {
  display: none;
}
@media (max-width: 860px) {
  .c-sp-br {
    display: inline;
  }
}