/*
Theme Name: Interaction Works
Theme URI: https://interaction-works.co.jp/
Description: Interaction Works Inc. コーポレートサイト用オリジナルテーマ。トップLP（front-page.php）と PHILOSOPHY 下層（page-philosophy.php）、サイト共通の自作ヘッダー/フッター（オーバーレイメニュー・固定 BACK TO TOP）を提供します。
Author: Interaction Works Inc.
Version: 2.3.5
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: interaction-works
*/

/* ============================================================
   Interaction Works Inc.
   Main color: #C79F62
   ============================================================ */
:root {
  --gold: #C79F62;
  --black: #111111;
  --dark: #1a1a1a;
  --text: #222;
  --gray: #888;
  --line: #e5e5e5;
  --bg: #ffffff;
  --font-en: 'proxima-nova', 'Proxima Nova', 'ProximaNova', 'Poppins', 'Noto Sans JP', sans-serif;
  --font-jp: 'Noto Sans JP', sans-serif;
  --wrap: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-jp);
  color: var(--text);
  background: var(--bg);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---- common section label ---- */
.sec-label {
  display: table; /* 文字幅にフィット */
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .06em;
  /* 2026-09-02: PHILOSOPHY の「Interaction Creates Value.」と同じサイズ感に拡大 */
  font-size: clamp(24px, 4vw, 48px);
  line-height: 1; /* 先頭のゴールドマーク（.phi-mark）を行ボックスに合わせるため */
  white-space: nowrap; /* マークと文字が別行に折れないように */
  position: relative;
  margin-bottom: 40px;
  color: var(--black);
}
/* 下線は廃止（2026-09-02）。先頭のゴールドの斜めマーク .phi-mark を全ページ共通のあしらいにした */
.sec-label--light { color: #fff; }

/* ---- buttons (left→right fill on hover) ---- */
.btn-black,
.btn-white {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-en);
  letter-spacing: .15em;
  font-weight:600;
}
.btn-black::before,
.btn-white::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -20%;
  width: 140%; /* skew の三角欠けを覆うため左右に余白 */
  background: var(--gold);
  transform: skewX(-18deg) scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.7,.02,.3,1);
  z-index: -1;
}
.btn-black:hover::before,
.btn-white:hover::before { transform: skewX(-18deg) scaleX(1); } /* 斜めに広がる */

.btn-black {
  gap: 30px;
  min-width: 180px;
  padding: 15px 22px;
  background: var(--black);
  color: #fff;
  font-size: 12px;
}
.btn-black__arrow { font-size: 15px; }

.btn-white {
  gap: 26px;
  min-width: 150px;
  padding: 13px 20px;
  background: #fff;
  color: var(--black);
  font-size: 11px;
  transition: color .35s;
}
.btn-white:hover { color: #fff; }

/* ============================================================
   コピー・画像保存の抑止
   ※ブラウザ仕様上の完全な防止は不可能（開発者ツール等では取得可能）。
     一般ユーザー向けの抑止策として、テキスト選択・右クリック・
     画像のドラッグ保存・iOSの長押し保存を無効化する
   ============================================================ */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* フォーム類（HubSpot埋め込み含む）は入力・コピーできるように残す */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}
img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* 画像単体への右クリック/長押しを親要素へ逃がす */
}

/* ============================================================
   ページ遷移ワイプ
   縦のゴールドの斜め線が中央に現れ、横に広がって画面を覆う。
   到着後は覆った状態から中央の斜め線へ収束して消える（main.js が要素生成）
   ============================================================ */
.pagewipe {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
}
.pagewipe::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 260vw;
  height: 140%;
  margin-left: -130vw;
  background: var(--gold);
  transform: skewX(-24deg) scaleX(0);
  transform-origin: center;
}
/* 遷移前: 細い縦の斜め線 → 横に広がって覆う */
.pagewipe.is-out { pointer-events: auto; }
.pagewipe.is-out::before {
  animation: iwWipeIn .62s cubic-bezier(.65,.05,.36,1) forwards;
}
@keyframes iwWipeIn {
  0%   { transform: skewX(-24deg) scaleX(0); }
  28%  { transform: skewX(-24deg) scaleX(.004); } /* 細い線として一瞬とどまる */
  100% { transform: skewX(-24deg) scaleX(1); }
}
/* 遷移後: 覆った状態から中央の斜め線へ収束して消える */
.pagewipe.is-cover::before { transform: skewX(-24deg) scaleX(1); }
.pagewipe.is-cover.is-reveal::before {
  animation: iwWipeOut .6s cubic-bezier(.65,.05,.36,1) forwards;
}
@keyframes iwWipeOut {
  0%   { transform: skewX(-24deg) scaleX(1); }
  72%  { transform: skewX(-24deg) scaleX(.004); }
  100% { transform: skewX(-24deg) scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pagewipe::before { animation: none !important; transform: skewX(-24deg) scaleX(0) !important; }
}

/* ============================================================
   Header
   ============================================================ */
.header {
  position: absolute; /* ロゴは追従しない（ハンバーガーのみ .header__toggle が fixed で追従） */
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  padding: 26px 40px;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header__logo {
  display: flex;
  align-items: center;
}
.header__logo-img {
  height: 26px;
  width: auto;
}

.header__toggle {
  width: 34px; height: 14px;
  position: fixed; /* ハンバーガーだけはスクロールに追従 */
  top: 26px; right: 40px;
  background: none; border: none;
  cursor: pointer;
  z-index: 110;
}
.header__toggle span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: var(--black);
  transition: .35s;
}
/* 二本線 */
.header__toggle span:nth-child(1) { top: 0; }
.header__toggle span:nth-child(2) { bottom: 0; }
/* 暗い背景のセクション（PROJECTS / FOOTER）に重なったら白へ反転 */
.header.is-dark .header__logo-img { filter: brightness(0) invert(1); }
.header.is-dark .header__toggle span { background: #fff; }
.header__logo-img { transition: filter .3s ease; }

/* メニュー展開中はハンバーガーを隠す（CLOSE ボタンで閉じる） */
.header.is-open .header__toggle { opacity: 0; visibility: hidden; pointer-events: none; }

/* ===== global nav overlay ===== */
.gnav {
  position: fixed;
  inset: 0;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease; /* 少しゆっくり開閉（2026-09-14） */
  z-index: 105;
}
.header.is-open .gnav { opacity: 1; visibility: visible; }

/* left visual：PROJECTS サムネイルのカルーセル（約1.5秒ごとに自動でクロスフェード・ループ。
   枚数は最大6枚。main.js が .is-active を付け替える） */
.gnav__visual {
  position: relative;
  width: 38%;
  max-width: 620px;
  background: #1a1712;
  flex-shrink: 0;
  overflow: hidden;
}
.gnav__carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.gnav__carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.gnav__slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.05s ease; /* .7s → 1.05s（スライド切替と合わせて1.5倍ゆっくり） */
}
.gnav__slide.is-active { opacity: 1; }
/* 下部の丸インジケーター */
.gnav__dots {
  position: absolute;
  left: 0; right: 0; bottom: 28px;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 2;
}
.gnav__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.gnav__dot:hover { background: rgba(255,255,255,.7); }
.gnav__dot.is-active { background: #fff; transform: scale(1.15); }

/* right black panel */
.gnav__panel {
  position: relative;
  flex: 1;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 70px clamp(40px, 6vw, 100px);
}

/* メニュー内ロゴ: CLOSE と同じ高さ・メニュー項目と左端を揃える（黒地なので白抜き） */
.gnav__logo {
  position: absolute;
  top: 64px;
  left: calc(clamp(40px, 6vw, 100px) + 30px);
  display: flex;
  align-items: center;
}
/* フッターと同じ構成: マーク画像（左3本が白・右1本がゴールド）＋白いワードマーク文字 */
.gnav__logo { gap: 10px; }
.gnav__logo-mark { height: 22px; display: inline-flex; align-items: center; flex-shrink: 0; }
.gnav__logo-markimg { height: 22px; width: auto; display: block; }
.gnav__logo-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
}

/* close button */
.gnav__close {
  position: absolute;
  top: 64px;
  right: clamp(40px, 6vw, 100px);
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .22em;
  color: #fff;
  transition: color .3s;
}
.gnav__close:hover { color: var(--gold); }
.gnav__close-line { display: block; width: 46px; height: 1px; background: currentColor; }

/* menu list */
.gnav__list { padding-left: 30px; }
.gnav__list li { margin: 4px 0; }
.gnav__list a {
  position: relative;
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: .12em;
  line-height: 1.45;
  /* ホバーで左→右へゴールドがワイプする（フッターメニューと同じ挙動） */
  background-image: linear-gradient(to right, var(--gold) 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position .5s ease;
}
.gnav__list a:hover { background-position: 0 0; }
.gnav__list .is-active a { background-position: 0 0; }
.gnav__marker {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .5em;
  color: var(--gold);
}

/* foot: sns + copyright */
.gnav__foot {
  align-self: center;
  text-align: left;
  min-width: 260px;
}
.gnav__sns {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 30px;
}
.gnav__sns a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 14px;
  letter-spacing: .06em;
  color: #e6e6e6;
  transition: color .3s;
}
.gnav__sns a:hover { color: var(--gold); }
.gnav__sns-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  color: #fff;
}
.gnav__sns-ico svg { width: 100%; height: 100%; }
.gnav__sns-ico--be {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -.03em;
}
.gnav__copy {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .08em;
  color: #8a8a8a;
}

/* ============================================================
   Loading（白背景・中央に0→100のカウント・完了後フェードアウト）
   ============================================================ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s ease;
}
.loader.is-done {
  opacity: 0;
  pointer-events: none;
}
.loader__num {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 30px; /* 画面幅によらず固定 */
  line-height: 1;
  letter-spacing: .02em;
  color: var(--black);
  font-variant-numeric: tabular-nums; /* 桁が増えても揺れない */
}
@media (prefers-reduced-motion: reduce) {
  .loader { transition: opacity .2s ease; }
}

/* ============================================================
   Hero (First View)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh; /* スマホのアドレスバー分で下に白が出ないよう実表示高さに追従 */
  min-height: 620px;
  background: #f7f7f5;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* ===== ファーストビュー：3層の斜め線（＼グレー×複数 と ／ゴールド が交差） ===== */
/* すべて一定方向へ無限ループ（背景位置を1周期ぶんずらすので継ぎ目なし） */

/* 1本目（最背面）：細い線（左斜め ＼）→ 右方向へ無限ループ
   横長要素を transform で流すのでタイル境界のシームが出ない */
.hero__bg,
.hero__lines,
.hero__lines-thin {
  /* 線1本ずつを子要素 <i> に分割し、それぞれ別の速度・位相で流す
     （1枚の繰り返し背景だとレイヤー内の線が全て同調してしまうため） */
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero__bg i,
.hero__lines i,
.hero__lines-thin i {
  position: absolute;
  top: 0;
  /* 移動量109.47vwでも端が画面に入らない幅（HANDOVER 6-3 のルール） */
  left: calc(-120vw + var(--o, 0vw));
  width: 340vw;
  height: 100%;
  will-change: transform;
  animation-duration: var(--d, 40s);
  animation-delay: var(--dl, 0s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
/* 最背面のヘアライン（右斜め／・1周期100vwに1本・左方向へ） */
.hero__bg i {
  background-image: repeating-linear-gradient(114deg,
    rgba(0,0,0,.10) 0, rgba(0,0,0,.10) 1px,
    transparent 1px, transparent 100vw);
  animation-name: heroFlowThin;
}
@keyframes heroFlowThin {
  from { transform: translateX(0); }
  to   { transform: translateX(-109.47vw); } /* 100vw / cos24・左方向 */
}

/* 2本目（中間）：太めのグレー帯（左斜め ＼・1周期100vwに1本・左方向へ） */
.hero__lines i {
  background-image: repeating-linear-gradient(66deg,
    rgba(120,120,120,.16) 0, rgba(120,120,120,.16) 8vw,
    transparent 8vw, transparent 100vw);
  animation-name: heroFlowThin;
}

/* 3本目（最前面）：ゴールドの太線1本（右斜め ／）→ 反対（左）方向へ無限ループ
   グレー/細線と同じ「横長要素＋transform」方式。周期を100vwにして常に約1本が全面を横切る */
.hero__shape {
  position: absolute;
  top: 0; left: -150vw;
  width: 400vw; height: 100%;
  background-image: repeating-linear-gradient(114deg,
    var(--gold) 0, var(--gold) 11vw,
    transparent 11vw, transparent 100vw);
  opacity: .95;
  will-change: transform;
  animation: heroFlowGold 18s linear infinite;
}
@keyframes heroFlowGold {
  from { transform: translateX(0); }
  to   { transform: translateX(-109.47vw); } /* 100vw / cos24（左方向・反対） */
}

/* 追加①：細いグレー線（左斜め ＼・1周期100vwに1本・右方向へ） */
.hero__lines-thin i {
  background-image: repeating-linear-gradient(66deg,
    rgba(120,120,120,.22) 0, rgba(120,120,120,.22) 2px,
    transparent 2px, transparent 100vw);
  animation-name: heroFlowThin2;
}
@keyframes heroFlowThin2 {
  from { transform: translateX(0); }
  to   { transform: translateX(109.47vw); } /* 100vw / cos24・右方向 */
}

/* 追加②：ゴールドと同じくらいの太さのグレー線（左斜め ＼・ゴールドと反対の傾き）
   → ゴールドの線の手前（最前面）に重ねて交差させる・右方向へループ */
.hero__lines-front {
  position: absolute;
  /* 右へ142.3vw動くため、要素の左端が画面内に入らないよう広めに確保する
     （足りないと帯が要素の端で断ち切られ、三角形に見えてしまう） */
  top: 0; left: -200vw;
  width: 500vw; height: 100%;
  background-image: repeating-linear-gradient(66deg,
    rgba(110,110,110,.34) 0, rgba(110,110,110,.34) 11vw,
    transparent 11vw, transparent 130vw);
  will-change: transform;
  animation: heroFlowFront 20s linear infinite;
  animation-delay: -7s;
}
@keyframes heroFlowFront {
  from { transform: translateX(0); }
  to   { transform: translateX(142.3vw); } /* 130vw / cos24（右方向・＼と同向き） */
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 40px;
}
.hero__title {
  font-family: var(--font-en);
  font-weight: 700;
  /* 折り返さず必ず1行に収める（最長フレーズ基準で自動縮小） */
  font-size: min(11.8vw, 150px);
  letter-spacing: .01em;
  color: var(--black);
  line-height: 1.08;
  text-align: center;
}
/* 巨大な単語がランダム文字を経由して解読される（スクランブル）アニメーション（THE TRIANGLE 風） */
.hero__word-mask {
  display: block;
  line-height: 1.08;
}
.hero__word {
  display: inline-block;
  /* 段落を作らず、常に1行で表示する */
  white-space: nowrap;
}
/* スクランブル中のランダム文字（未確定）を少し薄く見せる */
.hero__word .glitch,
.hero__sub .glitch {
  opacity: .55;
}
/* スクランブル中の文字幅を固定し、解読中に1行の長さが伸び縮みしないようにする */
.hero__word .glitch {
  display: inline-block;
  width: .48em;
  text-align: center;
}
.hero__sub {
  margin-top: 26px;
  font-size: clamp(16px, 1.9vw, 22px); /* 日本語テキストをもう一回り大きく */
  font-weight: 700;
  letter-spacing: .12em;
  color: #3E3A39;
  text-align: center;
  min-height: 1.3em;
}
.hero__scroll {
  position: absolute;
  left: 40px; bottom: 40px;
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .3em;
  color: #999;
  z-index: 3;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 46px;
  background: #bbb;
  margin: 12px auto 0;
}

/* ============================================================
   Philosophy
   ============================================================ */
.philosophy {
  position: relative;
  padding: 150px 0 170px;
  overflow: hidden;
}
.philosophy__circle {
  position: absolute;
  top: 50%;
  right: 0;                /* 右端で見切れないよう少し左へ */
  transform: translateY(-50%);
  /* 左のラベル列を含むぶん広げる（max-width で自動縮小するため本文とは干渉しない） */
  width: 860px;
  max-width: 48.5vw;
  z-index: 0;
  pointer-events: none;
}

/* ---- 螺旋ファネル（PHILOSOPHY の背景図） ----
   スクロールで描画範囲に入ると、矢印が下から上へ渦を巻いて描かれ、
   背面のゴールドの淡い円が同じタイミングで徐々に大きくなる。 */
.pfunnel {
  display: block;
  width: 100%;
  overflow: visible;
}
/* 背面のゴールドの円：矢印の描画に合わせて拡大 */
.pfunnel__glow {
  transform: scale(.55);
  opacity: 0;
  transition: transform 2.2s cubic-bezier(.22,.61,.36,1), opacity 1s ease;
}
/* ファネルのリング */
.pfunnel__dash {
  fill: none;
  stroke: var(--black);
  stroke-width: 1.1;
  stroke-dasharray: 3 5;
  opacity: .32;
}
/* 点線リングの描画リビール（mask内の白線。--len/--d/--dl はマークアップで指定） */
.pfunnel__dashreveal {
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: var(--len, 2000);
  transition-property: stroke-dashoffset;
  transition-duration: var(--d, .3s);
  transition-delay: var(--dl, 0s);
  transition-timing-function: cubic-bezier(.333,0,.667,1);
}
/* 渦を巻く線：下（小）から上（大）へ順に描かれる */
.pfunnel__spiral,
.pfunnel__stem {
  fill: none;
  stroke: var(--black);
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 一本の線で下（小）から上（大）へ渦を巻きながら描かれる。
   dasharray は main.js が実際の線長から設定する（ここの値は読み込み前のフォールバック） */
.pfunnel__spiral {
  /* --len は main.js が線の実長を入れる（未設定時のフォールバックが3000）。
     4本のリングを等速で順に描くため、duration/delay はマークアップの
     インライン変数 --d / --dl（apply_exact.js が線長から算出）で渡す */
  stroke-dasharray: var(--len, 3000);
  stroke-dashoffset: var(--len, 3000);
  transition-property: stroke-dashoffset;
  transition-duration: var(--d, 2s);
  transition-delay: var(--dl, 0s);
  transition-timing-function: cubic-bezier(.333,0,.667,1);
}
/* 最上段（Lottie: Step04_line は終端の減速が強い） */
.pfunnel__spiral--tail { transition-timing-function: cubic-bezier(.333,0,.244,1); }
/* 矢印の軸：最上段リングが閉じた直後、右側面から上へ伸びる
   （参考サイトと同じ挙動。--len はマークアップのインラインstyleで実長を渡す） */
.pfunnel__stem {
  stroke-dasharray: var(--len, 130);
  stroke-dashoffset: var(--len, 130);
  transition-property: stroke-dashoffset;
  transition-duration: .4s;
  transition-delay: 1.4s;
  transition-timing-function: cubic-bezier(.36,0,0,1);
}
/* 矢じり：塗りの三角形。線が矢じりの位置まで到達するのに合わせて表示 */
.pfunnel__arrow {
  fill: var(--black);
  stroke: none;
  opacity: 0;
  transition: opacity .1s ease;
  transition-delay: 1.73s;
}
/* リング内の英字（白フチで背後の線を途切れさせる＝参考動画と同じ見え方） */
.pfunnel__label {
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  text-anchor: middle;
  fill: #3E3A39;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3.5px;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .33s ease, transform .33s cubic-bezier(.333,0,.667,1);
  transition-delay: calc(var(--i) * .22s);
}
/* 左側のラベル列（01→05） */
.pfunnel__legend {
  opacity: 0;
  transition: opacity .33s ease;
  transition-delay: calc(var(--i) * .24s);
}
.pfunnel__legend-dot { fill: var(--gold); }
/* 点・数字・文字の縦中心を揃える（テキストはベースラインではなく中央基準で配置） */
.pfunnel__legend-num,
.pfunnel__legend-jp {
  dominant-baseline: central;
}
.pfunnel__legend-num {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  fill: #8a7a5e;
}
.pfunnel__legend-jp {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .06em;
  fill: #3E3A39;
}
.pfunnel__legend-line {
  fill: #bdb5a7;
  transform: scaleX(0);
  transform-origin: left;
  transform-box: fill-box;
  transition: transform .4s cubic-bezier(.333,0,.667,1);
  transition-delay: calc(var(--i) * .27s);
}
.philosophy__circle.is-inview .pfunnel__legend-line { transform: scaleX(1); }
/* PC / SP で構成の異なる2つのSVGを出し分ける */
.pfunnel--sp { display: none; }

/* SP版は viewBox が小さいので、線幅と文字サイズを合わせる */
.pfunnel--sp .pfunnel__spiral,
.pfunnel--sp .pfunnel__stem { stroke-width: 2; }
.pfunnel--sp .pfunnel__dash { stroke-width: .7; stroke-dasharray: 2 3.5; }
.pfunnel--sp .pfunnel__label { font-size: 12px; stroke-width: 2.5px; }
.pfunnel--sp .pfunnel__legend-num { font-size: 10px; }
.pfunnel--sp .pfunnel__legend-jp { font-size: 15px; }

/* ---- 描画範囲に入ったら再生 ---- */
.philosophy__circle.is-inview .pfunnel__glow { transform: scale(1); opacity: 1; }
.philosophy__circle.is-inview .pfunnel__dashreveal { stroke-dashoffset: 0; }
.philosophy__circle.is-inview .pfunnel__spiral { stroke-dashoffset: 0; }
.philosophy__circle.is-inview .pfunnel__stem { stroke-dashoffset: 0; }
.philosophy__circle.is-inview .pfunnel__arrow { opacity: 1; }
.philosophy__circle.is-inview .pfunnel__label { opacity: .9; transform: translateY(0); }
.philosophy__circle.is-inview .pfunnel__legend { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pfunnel__glow, .pfunnel__dash, .pfunnel__dashreveal, .pfunnel__spiral, .pfunnel__stem, .pfunnel__arrow, .pfunnel__label, .pfunnel__legend, .pfunnel__legend-line {
    transition: none;
  }
}

.philosophy__inner {
  position: relative;
  z-index: 2;
  margin-left: 14.7vw;
  padding: 0 40px;
}
.philosophy__lead {
  font-size: 18px;
  letter-spacing: .04em;
  color: #444;
  margin-bottom: 42px;
}
/* 下の h2(.philosophy__catch) より一回り小さい太字の見出し */
.philosophy__sub-catch {
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 24px);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--black);
  margin-bottom: 14px;
}
.philosophy__catch {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(24px, 4vw, 48px);
  letter-spacing: .04em;
  color: var(--black);
  margin-bottom: 42px;
}

/* ============================================================
   Projects
   ============================================================ */
.projects {
  background: var(--black);
  padding: 70px 0 0;
  color: #fff;
}
.projects > .sec-label {
  /* PHILOSOPHY と同じ字下げに揃える */
  margin: 0 0 40px 14.7vw;
  padding-left: 40px;
}

.projects__slider {
  position: relative;
  overflow: hidden;
}
.projects__track {
  display: flex;
  transition: transform 1s cubic-bezier(.65,.05,.36,1); /* slide anime = 1s */
}
.pslide {
  position: relative;
  flex: 0 0 100%;
  height: 100vh;
  overflow: hidden;
}
.pslide__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pslide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.1) 100%);
}
.pslide__body {
  position: relative;
  z-index: 2;
  /* 他セクションと同じ字下げに揃える */
  margin: 0 0 0 14.7vw;
  padding: 0 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pslide__title {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 78px); /* PC 最大 78px */
  letter-spacing: .02em;
  line-height: 1.1;
}
/* タイトル直下のサブタイトル（抜粋・日本語名） */
.pslide__sub {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.6;
}
.pslide__place {
  margin-top: 8px;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .1em;
  margin-bottom: 40px;
}
.pslide__body .btn-white { align-self: flex-start; }

.projects__arrows {
  position: absolute;
  left: 50%; bottom: 34px; /* 左右中央（2026-09-15） */
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 14px;
}
.parrow {
  width: 68px; height: 68px;
  border: 1px solid rgba(255,255,255,.6);
  background: transparent;
  color: #fff;
  border-radius: 50%;
  font-size: 30px;
  cursor: pointer;
  transition: .3s;
  line-height: 1;
}
.parrow:hover { background: var(--gold); border-color: var(--gold); }

/* VIEW ALL PROJECTS — full width clickable */
.projects__viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  background: var(--black);
  transition: background .3s;
}
.projects__viewall:hover { background: #000; }
.projects__viewall-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: .18em;
  color: #fff;
  position: relative;
}
.projects__viewall-text::after {
  content: "";
  position: absolute;
  left: 0; bottom: -10px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s;
}
.projects__viewall:hover .projects__viewall-text::after { transform: scaleX(1); }

/* ============================================================
   Company
   ============================================================ */
.company {
  background: var(--bg);
  color: var(--black);
  padding: 130px 0 140px;
}
.company__inner {
  margin-left: 14.7vw;
  padding: 0 40px;
}
.company__label {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  margin-bottom: 34px;
}
.company__label + .company__founders { margin-bottom: 90px; }

/* ---- FOUNDERS ---- */
.company__founders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 60px;
  max-width: 900px;
}
.founder { display: flex; gap: 26px; }
.founder__photo {
  flex: 0 0 150px;
  align-self: flex-start; /* 高さが本文に引き伸ばされないようにする */
  aspect-ratio: 3 / 4;
  background: #f2f0ec; /* 白背景なので写真枠はごく薄いグレーに */
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder__photo span {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .16em;
  color: #b9a88c;
}
/* 実写真（2026-09-02 支給）。枠の 3:4 に合わせて中央をトリミング */
.founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.founder__name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
}
.founder__name-en {
  display: block;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  color: #8a7a5e;
  margin-top: 4px;
}
.founder__role {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: .04em;
  line-height: 1.8;
  color: #6d6459;
}
.founder__text {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.95;
}

/* ---- BUSINESS ---- */
.company__business {
  max-width: 900px;
  border-top: 1px solid var(--line);
  margin-bottom: 54px;
}
.cbiz {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.cbiz__title {
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .06em;
}
.cbiz__text {
  font-size: 14px;
  letter-spacing: .04em;
  line-height: 1.9;
}

/* ============================================================
   Biography
   ============================================================ */
.biography {
  padding: 120px 0 140px;
  overflow: hidden; /* 右へのはみ出しをビューポート端で切る */
}
/* ラベルとフッター（矢印・VIEW MORE）は PHILOSOPHY と同じ字下げに揃える */
.biography__head,
.biography__foot {
  margin: 0 0 0 14.7vw;
  padding: 0 40px;
}
/* スライダーは左端をコンテナに合わせ、右はビューポート外へはみ出す */
.biography__slider {
  overflow: hidden;
  /* カードの開始位置も PHILOSOPHY の字下げに合わせる。
     ループ用の複製カードが左の余白に見えないよう、padding ではなく margin で空ける */
  margin-left: calc(14.7vw + 40px);
  margin-bottom: 50px;
}
.biography__track {
  display: flex;
  gap: 30px;
  transition: transform .7s cubic-bezier(.65,.05,.36,1);
  /* 横スワイプはスライダーが受け取り、縦スクロールはページに任せる */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.biography__track.is-dragging { cursor: grabbing; }
.biography__track img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* 画像のネイティブドラッグを止める */
}
/* リンク（a）のネイティブドラッグも止める。これが動くと pointer イベントが cancel されスワイプできない */
.biography__track a {
  -webkit-user-drag: none;
  user-drag: none;
}
.bcard {
  flex: 0 0 380px; /* 一回り大きく */
}
.bcard__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.bcard__thumb {
  aspect-ratio: 4 / 3;
  background: #f2f2f2;
  overflow: hidden;
  margin-bottom: 22px;
}
.bcard__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* カテゴリー（タイトルの上） */
.bcard__cat {
  margin-bottom: 8px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #3E3A39;
}
.bcard__ttl {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 16px;
  min-height: 72px;
}
.bcard__date {
  font-family: var(--font-en);
  font-size: 14px;
  color: var(--gray);
  letter-spacing: .05em;
}
/* VIEW MORE を左端に置き、その右に矢印（2026-09-15） */
.biography__foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
}
.biography__arrows { display: flex; gap: 10px; }
.barrow {
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--black);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: .3s;
  line-height: 1;
}
.barrow:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative; /* BACK TO TOP の絶対配置の基準 */
  background: var(--black);
  color: #fff;
  padding: 90px 0 0;
}
.footer__container {
  /* 他セクションと同じ字下げに揃える */
  margin: 0 0 0 14.7vw;
  padding: 0 40px;
}
/* ロゴ行（PC）: 下のカラムと同じグリッドにし、ロゴを OFFICE と同じ 2 カラム目の左端に揃える */
.footer__logo-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr 0.9fr;
  gap: 40px;
  margin-bottom: 64px;
}
.footer__logo {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* ロゴマーク（インラインSVG）：左3本を白、右1本をゴールドで表示 */
.footer__logo-mark {
  height: 20px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.footer__logo-markimg {
  height: 20px; /* 隣のワードマーク文字（20px）に合わせる */
  width: auto;
  display: block;
}
/* ワードマークは白文字（HTMLテキスト） */
.footer__logo-text {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
  color: #fff;
  white-space: nowrap;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1.3fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.footer__nav li { margin-bottom: 16px; }
/* ホバーで左→右へふわっと色が変わる（グラデーションをテキストにクリップ） */
.footer__nav a {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .1em;
  background-image: linear-gradient(to right, var(--gold) 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position .5s ease;
}
.footer__nav a:hover { background-position: 0 0; }

.footer__office-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--gold);
  margin-bottom: 14px;
}
.footer__company {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 26px;
  letter-spacing: .04em;
}
.footer__office-body {
  font-size: 13px;
  line-height: 2;
  color: #bbb;
}
.footer__sns { margin-top: 34px; }
.footer__sns-label {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--gold); /* OFFICE ラベルと同じゴールド */
  margin-bottom: 12px;
}
.footer__sns-list {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.footer__sns-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .05em;
  color: #ddd;
  transition: color .3s;
}
.footer__sns-list a:hover { color: var(--gold); }
.footer__sns-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  color: #fff;
}
.footer__sns-ico svg { width: 100%; height: 100%; }

.footer__copy {
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 40px;
  text-align: center;
}
.footer__copy small {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .1em;
  color: #888;
}

/* ============================================================
   Back to top（フッター内で絶対配置）
   ============================================================ */
.footer__backtotop {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* フッターと同じ背景色に統一（画像・グラデーションは廃止） */
  background: var(--black);
}
.footer__backtotop-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.backtotop__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s;
}
.footer__backtotop:hover .backtotop__btn { background: #fff; color: var(--black); }
.backtotop__btn svg { width: 10px; height: 10px; }
.backtotop__label {
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: .3em;
  color: #f0f0f0;
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */
@media (max-width: 768px) {
  .header { padding: 18px 20px; }
  .header__logo-img { height: 22px; }
  .header__toggle { top: 18px; right: 20px; } /* 固定トグルの位置もヘッダー余白に合わせる */

  /* ---- global nav (mobile) ---- */
  .gnav__visual { display: none; }
  .gnav__panel {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 84px 26px 40px;
    gap: 0;
    overflow-y: auto;
  }
  .gnav__logo { top: 24px; left: 24px; }
  .gnav__logo { gap: 8px; }
  .gnav__logo-mark, .gnav__logo-markimg { height: 16px; }
  .gnav__logo-text { font-size: 16px; } /* CLOSE と重ならないサイズ */
  .gnav__close { top: 26px; right: 24px; }
  .gnav__close-line { width: 34px; }
  .gnav__list { padding-left: 26px; margin-top: 24px; }
  .gnav__list a { font-size: 30px; letter-spacing: .1em; }
  .gnav__marker { left: -26px; }
  .gnav__foot {
    align-self: stretch;
    margin-top: 46px;
    min-width: 0;
  }
  .gnav__sns { gap: 22px; }

  .hero { min-height: 560px; }
  /* SPは画面が狭くvw基準の移動量が小さくなるため、時間を詰めて速度を保つ
     （各レイヤーの比率は保ったまま＝同調しない） */
  /* 最背面の線は1本ずつ個別速度（子要素の --d）で流れるためSPでの一括上書きはしない */
  .hero__shape       { animation-duration: 13s; }
  .hero__lines-front { animation-duration: 14s; }
  .hero__inner { padding: 0 24px; }
  .hero__scroll { left: 20px; bottom: 24px; }
  .hero__sub { font-size: 15px; letter-spacing: .08em; }

  .philosophy { padding: 90px 0 100px; }
  .philosophy__inner { padding: 0 24px; margin-left:initial; }
  .philosophy__lead {
    font-size:14px;
  }
  /* SPでは図を本文の上に置く（DOM順で既に先頭なので静的配置に戻すだけ） */
  .philosophy__circle {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0 12px;
    margin-bottom: 34px;
  }
  /* SPは横幅に合わせた別構成のSVGへ差し替える */
  .pfunnel--pc { display: none; }
  .pfunnel--sp { display: block; }

  /* SPは PHILOSOPHY 側も字下げなしなので、こちらも戻す */
  .projects > .sec-label { margin-left: 0; padding-left: 24px; }
  .pslide { height: 100vh; height: 100svh; } /* スマホは画像を画面いっぱいの高さに */
  .pslide__body { margin-left: 0; padding: 0 24px; }
  .pslide__title { font-size: 33px; } /* スマホ 33px */
  .pslide__sub { font-size: 13px; margin-top: 10px; }
  .projects__arrows { bottom: 24px; }
  .projects__viewall { height: 120px; }
  .projects__viewall-text { font-size: 17px; }

  .biography { padding: 80px 0 90px; }
  .biography__head,
  .biography__foot { margin-left: 0; padding: 0 24px; }

  /* Company */
  .company { padding: 80px 0 90px; }
  .company__inner { margin-left: 0; padding: 0 24px; }
  .company__founders {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .company__label + .company__founders { margin-bottom: 60px; }
  .founder { gap: 18px; }
  .founder__photo { flex-basis: 112px; }
  .founder__name { font-size: 18px; }
  .cbiz {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .cbiz__title { font-size: 15px; }
  .cbiz__text { font-size: 13px; }
  .biography__slider { margin-left: 24px; }
  .bcard { flex: 0 0 300px; }
  .bcard__ttl { min-height: 0; }
  .biography__foot { flex-direction: column; gap: 26px; align-items: flex-start; }

  .footer { padding: 60px 0 0; }
  .footer__container { margin-left: 0; padding: 0 24px; }
  .footer__logo-row { display: block; text-align: center; margin-bottom: 44px; }
  .footer__cols {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer__nav a { font-size: 22px; }

  /* back to top（SP は通常配置・中央/横並び・背景写真なし） */
  .footer__backtotop {
    position: static;
    width: 100%;
    height: auto;
    background: none;
  }
  .footer__backtotop::before { display: none; }
  .footer__backtotop-inner {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 26px 0 6px;
  }
  .backtotop__label { writing-mode: horizontal-tb; letter-spacing: .18em; color: #8f8f8f; }
}

@media (max-width: 420px) {
  .bcard { flex: 0 0 78vw; }
}

/* ============================================================
   Philosophy（下層ページ）
   ============================================================ */
/* 見出し前のゴールドの平行四辺形マーク。
   PHILOSOPHY下層だけでなく、トップの各セクションタイトル（.sec-label）・
   PROJECTS/NEWS/CONTACT（.prj-top__title）・COMPANY（.cmp__title）にも共通で付ける（2026-09-02） */
.phi-mark {
  /* タイトルの行ボックス全体と同じ高さに揃える（emベース・line-height:1 前提） */
  display: inline-block;
  width: .58em;
  height: 1em; /* line-height:1 のタイトルボックスと同じ高さ */
  margin-right: .38em;
  background: var(--gold);
  transform: skewX(-14deg);
  vertical-align: -.147em; /* proxima-nova実測: ボックス下端(ディセント+負の行間)まで下げる */
}

/* ---- Philosophy top ---- */
.phi-top {
  padding: 190px 0 150px;
  background: var(--bg);
}
.phi-top__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: right;
}
.phi-top__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(40px, 4.8vw, 68px); /* 下層ページタイトル共通サイズ */
  letter-spacing: .02em;
  color: var(--black);
  line-height: 1;
  margin-bottom: 78px;
}
.phi-top__block { margin-bottom: 44px; }
.phi-top__lead,
.phi-top__para {
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 2.1;
  color: #4a4a4a;
}
.phi-top__lead {
  font-weight: 500;
  color: var(--black);
  margin-bottom: 20px;
}
.phi-top__catch { margin-top: 70px; }
.phi-top__catch-jp {
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .18em;
  color: var(--black);
  margin-bottom: 6px;
}
.phi-top__catch-en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: .01em;
  color: var(--black);
}
/* 右から左へふわっと表示 */
.phi-top__block,
.phi-top__catch,
.phi-top__title {
  opacity: 0;
  transform: translateX(46px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--i, 0) * .12s);
}
.phi-top.is-inview .phi-top__block,
.phi-top.is-inview .phi-top__catch,
.phi-top.is-inview .phi-top__title {
  opacity: 1;
  transform: none;
}

/* ---- 左に固定するインデックス（PC） ---- */
.phi-nav {
  position: fixed;
  left: 4.6vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
  pointer-events: none;
}
.phi-nav.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
/* フッター手前では固定を解除し、05本文の下端ラインに留める（top は main.js が算出） */
.phi-nav.is-docked {
  position: absolute;
  transform: none;
}
.phi-nav ol { list-style: none; }
.phi-nav li { padding-left: calc(var(--i) * 16px); }
.phi-nav a {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 2.6;
  color: var(--black);
  transition: color .35s ease;
}
.phi-nav__num { margin-right: 18px; }
.phi-nav li.is-current a { color: var(--gold); }

/* ---- 01〜05 セクション ---- */
.phi-sec {
  position: relative;
  /* 高さを全セクション同一（100vh）に固定：枠幅=高さ×0.78 が揃い、
     隣接する写真の接合辺がピクセル単位で一致する */
  height: 100vh;
  height: 100dvh;
  min-height: 700px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
}
.phi-sec__visual {
  position: absolute;
  /* 上下1pxはみ出させて、丸め誤差による白いヘアラインを防ぐ */
  top: -1px; bottom: -1px;
  left: 17%;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
/* 扉: 斜めの細い線が現れ、その角度のまま左右に開いて写真が現れる。
   斜めの角度は全セクション 17.2° に統一（--poly=開いた形 / --polyline=細線、
   いずれも各画像の写真領域から再計算した値をマークアップ側で指定） */
/* 枠は全セクション同一サイズ（高さ×0.78）・画像は中央配置。
   これにより写真の幅・位置・角度がセクション間で完全に揃う */
.phi-sec--rl {
  --poly: 3% 0%, 51.3% 0%, 91% 100%, 42.7% 100%;
  --polyline: 26.4% 0%, 28% 0%, 67.7% 100%, 66.1% 100%;
  --drift-from: 3%;  /* 右から左へ */
  --drift-to: -3%;
}
.phi-sec--lr {
  /* ＼の完全ミラー（同一バウンディングボックス）。これにより
     隣接セクションの接地辺のX範囲が完全に一致し、写真同士が隙間なく連結する */
  --poly: 42.7% 0%, 91% 0%, 51.3% 100%, 3% 100%;
  --polyline: 66.1% 0%, 67.7% 0%, 28% 100%, 26.4% 100%;
  --drift-from: -3%; /* 左から右へ */
  --drift-to: 3%;
}
.phi-sec__door {
  height: 100%;
  aspect-ratio: 0.78;
  min-width: 0; /* flexアイテムとして画像幅に引っ張られないように */
  display: flex;
  justify-content: center;
  clip-path: polygon(var(--polyline));
  opacity: 0;
  transition:
    clip-path 1.1s cubic-bezier(.65,.05,.36,1) .3s,
    opacity .35s ease .05s;
}
.phi-sec.is-inview .phi-sec__door {
  clip-path: polygon(var(--poly));
  opacity: 1;
}
/* 写真本体：斜めの枠は固定したまま、枠の中で写真がゆっくり横に流れ続ける（2026-09-02）。
   01/03/05（--rl）は右→左、02/04（--lr）は左→右から始まり、端で折り返す。
   写真は白地に斜めの帯で書き出されているため、そのまま動かすと白地が枠に入る。
   scale(1.16) で帯を枠より一回り大きくして、±3% の移動でも白地が見えないようにしている
   （帯幅≒画像幅の48% → 拡大で片側約3.6%の余裕）。画像差し替え時は帯の余白を再確認すること */
.phi-sec__visual img {
  height: 100%;
  width: auto;
  max-width: none;
  flex: none;
  display: block;
  transform: translateX(var(--drift-from, 3%)) scale(1.16);
  animation: phiDrift 10s ease-in-out infinite alternate; /* 14s → 10s（動きを少し速く・2026-09-16） */
  animation-play-state: paused;
}
.phi-sec.is-inview .phi-sec__visual img { animation-play-state: running; }
@keyframes phiDrift {
  from { transform: translateX(var(--drift-from, 3%)) scale(1.16); }
  to   { transform: translateX(var(--drift-to, -3%)) scale(1.16); }
}
.phi-sec__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 4.6vw;
  text-align: right;
}
.phi-sec__title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 64px);
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--black);
  margin-bottom: 60px;
}
.phi-sec__num { margin-right: 28px; }
.phi-sec__jp {
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--black);
  margin-bottom: 46px;
}
.phi-sec__text {
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 2.6; /* 一画面に収まる行間 */
  color: #3E3A39;
}
/* テキストは扉に少し遅れて表示 */
.phi-sec__title,
.phi-sec__jp,
.phi-sec__text {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.phi-sec__jp { transition-delay: .18s; }
.phi-sec__text { transition-delay: .3s; }
.phi-sec.is-inview .phi-sec__title,
.phi-sec.is-inview .phi-sec__jp,
.phi-sec.is-inview .phi-sec__text { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .phi-top__block, .phi-top__catch, .phi-top__title,
  .phi-sec__door, .phi-sec__title, .phi-sec__jp, .phi-sec__text { transition: none; }
  .phi-sec__visual img { animation: none; transform: scale(1.16); }
}

/* ---- SP ---- */
/* ============================================================
   Projects 一覧ページ（参考: the-triangle.jp/projects）
   静的: projects.html ／ WP: archive-project.php（投稿タイプ project）
   ============================================================ */
.prj { background: var(--bg); }
.prj-top { padding: 175px 0 64px; }
.prj-top__inner { position: relative; }
/* パンくず: 左側・タイトルの高さに揃える */
.prj-top__bc {
  position: absolute;
  left: 18.5%;
  top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
}
.prj-top__bc a { color: var(--black); }
.prj-top__bc a:hover { color: var(--gold); }
.prj-top__bc-line { display: block; width: 22px; height: 1px; background: #b5b5b5; }
.prj-top__bc-cur { color: var(--gold); }
/* 見出しブロック: 画面の中央から始まる（参考サイトの配置） */
.prj-top__head { margin-left: 50%; }
.prj-top__title {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: clamp(40px, 4.8vw, 68px);
  letter-spacing: .06em;
  line-height: 1;
  color: var(--black);
}
/* タイトル下の説明文（.prj-top__sub）は 2026-09-06 に廃止 */

/* ---- 絞り込みドロップダウン（YEAR / CATEGORY）: 見出しと同じ左端から並べる ---- */
.afl {
  display: flex;
  gap: 40px;
  margin: 110px 0 0 50%;
}
.afl__dd { position: relative; width: 180px; }
.afl__btn {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid var(--black);
  background: none;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--black);
  text-align: left;
  cursor: pointer;
  transition: color .3s;
}
.afl__btn:hover { color: var(--gold); }
.afl__label { display: none; }
.afl__value {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.afl__arrow {
  width: 0;
  height: 0;
  margin-left: 12px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid currentColor;
  transition: transform .3s;
}
.afl__dd.is-open .afl__arrow { transform: rotate(180deg); }
.afl__list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 10px 0 12px;
  list-style: none;
  background: #f2f2f2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility 0s .25s;
}
.afl__dd.is-open .afl__list {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s, transform .25s;
}
.afl__opt {
  display: block;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  background: none;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--black);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s;
}
.afl__opt:hover, .afl__opt.is-current { color: var(--gold); }

/* ---- 一覧グリッド: 4列・細い目地・下に大きめの行間 ---- */
.prj-list { padding: 0 0 140px; } /* 左右余白なし＝画面端まで全幅 */
.prj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 上限4カラム。幅に応じて3→2→1へ */
  gap: 56px 0; /* 投稿同士は隙間なしで密着（クライアント指示） */
}
@media (max-width: 1280px) {
  .prj-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .prj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .prj-grid { grid-template-columns: 1fr; gap: 36px 0; }
}
.pcard__link { display: block; }
.pcard__thumb {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #eee;
}
.pcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ホバー: 少し薄暗くなりながらズームイン */
  transition: transform 1s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.pcard__link:hover .pcard__thumb img,
.pcard__link:focus-visible .pcard__thumb img {
  transform: scale(1.08);
  filter: brightness(.55);
}
.pcard__ttl {
  margin-top: 16px;
  padding: 0 14px;
  font-family: var(--font-en);
  font-size: 16px; /* PC 16px（900px以下は12px） */
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--black);
}
/* サブタイトル（抜粋・日本語名） */
.pcard__sub {
  margin-top: 4px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--black);
}
.pcard__place {
  margin-top: 3px;
  padding: 0 14px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9b9b9b;
}
/* ---- JOURNAL 一覧（旧 News）: 3カラム・9件ずつページ送り ---- */
.nws-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 上限3カラム。幅に応じて2→1へ */
  gap: 40px 0; /* 投稿同士は左右密着 */
  padding: 0;
  list-style: none;
}
@media (max-width: 1100px) {
  .nws-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .nws-grid { grid-template-columns: 1fr; gap: 36px 0; }
}
.ncard__thumb {
  aspect-ratio: 3 / 2;
  background: #ececec;
  overflow: hidden;
}
.ncard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.ncard__link { display: block; color: inherit; text-decoration: none; }
.ncard__link:hover .ncard__thumb img,
.ncard__link:focus-visible .ncard__thumb img {
  transform: scale(1.08);
  filter: brightness(.55);
}
/* 画像直下に隙間を空けず、カテゴリー → タイトル → 日付＋矢印 */
.ncard__body {
  position: relative;
  padding: 10px 14px 0; /* 画像は密着、テキストだけ内側に寄せる */
}
.ncard__cat {
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #3E3A39; /* 濃いグレー（2026-09-14） */
}
.ncard__ttl {
  margin-top: 10px;
  padding-right: 40px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.9;
  color: var(--black);
}
.ncard__date {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .14em;
  color: #9b9b9b;
}
.ncard__arrow {
  position: absolute;
  left: calc(100% - 42px); /* 左端を固定し、ホバー時は矢頭ごと右へ伸びる */
  bottom: 14px;
  width: 28px;
  height: 1px;
  background: var(--black);
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
/* 矢じり: 線の右端を軸に、左上へ伸びる短い斜線（→ の上側の矢頭） */
.ncard__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 1px;
  background: var(--black);
  transform: rotate(45deg);
  transform-origin: right center;
}
.ncard__link:hover .ncard__arrow { width: 40px; }

/* ---- ページネーション（PROJECTS / JOURNAL 共通） ---- */
.pgn { margin-top: 90px; }
.pgn__list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
}
.pgn__item .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  color: #9b9b9b;
  text-decoration: none;
  transition: color .3s ease;
}
.pgn__item a.page-numbers:hover { color: var(--black); }
.pgn__item .page-numbers.current { color: var(--black); border-bottom: 1px solid var(--gold); }
.pgn__item .page-numbers.dots { min-width: 20px; }
.pgn__item .prev,
.pgn__item .next { gap: 6px; padding: 0 14px; color: var(--black); }
.pgn__arrow { font-size: 16px; line-height: 1; }

/* 投稿が無い場合（WP） */
.prj-empty { padding: 40px 0 80px; text-align: center; color: var(--gray); letter-spacing: .1em; }

@media (max-width: 900px) {
  .prj-top { padding: 130px 0 44px; }
  .prj-top__bc { position: static; margin: 0 24px 26px; }
  .prj-top__head { margin-left: 0; padding: 0 24px; }
  .afl { flex-wrap: wrap; gap: 24px; margin: 48px 24px 0; }
  .afl__dd { width: calc(50% - 12px); }
  .afl__btn, .afl__opt { font-size: 13px; }
  .prj-list { padding: 0 0 90px; }
  .ncard__ttl { font-size: 12px; }
  .pgn { margin-top: 56px; }
  .pgn__list { font-size: 11px; gap: 2px; }
  .pgn__item .page-numbers { min-width: 30px; height: 30px; padding: 0 4px; }
  .pgn__item .prev, .pgn__item .next { padding: 0 8px; }
  .pcard__ttl { font-size: 12px; margin-top: 12px; }
  .pcard__sub { font-size: 11px; }
  .pcard__place { font-size: 9px; }
}

/* ============================================================
   Company ページ（company.html / template-company.php）
   写真は支給待ちのため、モック同様ゴールドの仮枠（SINGLE/DOUBLE SHOT）を表示
   ============================================================ */
.cmp { background: var(--bg); padding: 170px 0 150px; }
.cmp__inner { max-width: 1500px; margin: 0 auto; padding: 0 40px; }
/* ページタイトル: 右寄せ＋下線 */
.cmp__title {
  width: fit-content;
  margin-left: auto;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(40px, 4.8vw, 68px); /* 下層ページタイトル共通サイズ */
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--black);
}
/* FOUNDERS / BUSINESS / SERVICE / OFFICE の見出し。
   2026-09-02: 下のゴールド斜めバーを廃止し、共通タイトルと同じ先頭のゴールドマーク（.phi-mark）に統一 */
.cmp-label {
  width: fit-content;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .08em;
  line-height: 1;
  white-space: nowrap;
  color: var(--black);
}
.cmp-label--right { margin-left: auto; }

/* ---- FOUNDERS ---- */
.cmp-founders {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 0 9%;
  margin-top: 48px;
}
/* 写真の仮枠 */
.cmp-ph {
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-ph span {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3em;
  color: #e8382f;
}
.cmp-ph--double { width: 100%; aspect-ratio: 5 / 8; }
.cmp-founder { margin-top: 56px; }
.cmp-founder + .cmp-founder { margin-top: 96px; }
.cmp-founder__row { display: flex; align-items: flex-end; gap: 32px; }
.cmp-founder__row .cmp-ph { flex: 0 0 min(270px, 42%); aspect-ratio: 1 / 1; }
/* 実写真（2026-09-02 支給）: DOUBLE SHOT のみ使用（SINGLE SHOT は 2026-09-07 に削除） */
.cmp-photo { display: block; object-fit: cover; }
.cmp-photo--double { width: 100%; height: auto; }
.cmp-founder__name { flex: 1; text-align: right; }
.cmp-founder__name-jp {
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--black);
}
.cmp-founder__name-en {
  margin-top: 10px;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 16px;
  letter-spacing: .16em;
  color: var(--black);
}
.cmp-founder__role {
  margin-top: 30px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--black);
}
.cmp-founder__desc {
  margin-top: 10px;
  text-align: right;
  font-size: 13px;
  letter-spacing: .12em;
  color: #3E3A39;
}

/* ---- BUSINESS（1セクション・本文）---- */
.cmp-business { margin-top: 150px; }
.cmp-business__body { margin-top: 52px; padding-left: 24px; max-width: 980px; }
.cmp-business__body p {
  font-size: 15px;
  letter-spacing: .1em;
  line-height: 2.2;
  color: var(--black);
}
.cmp-business__body p + p { margin-top: 1.6em; }
/* PC: 日本語を文節単位で折り返す（.nb で囲んだ語句の途中では改行しない）。SP は通常の折り返し */
@media (min-width: 901px) { .cmp .nb { display: inline-block; } }
.cmp-business__catch {
  margin-top: 2.2em !important;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px) !important;
  letter-spacing: .02em !important;
  line-height: 1.3 !important;
}
.cmp-business__catch + p { margin-top: .9em !important; }

/* ---- SERVICE（6項目・2カラム）---- */
.cmp-service { margin-top: 150px; }
.cmp-service__list {
  margin-top: 52px;
  padding-left: 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 6%;
}
.cmp-service__item {
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
}
.cmp-service__item dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.cmp-service__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .06em;
  color: var(--black);
}
.cmp-service__jp {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #8a7a5e;
}
.cmp-service__item dd {
  margin-top: 16px;
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 2;
  color: #3E3A39;
}

/* ---- OFFICE ---- */
.cmp-office { margin-top: 150px; }
.cmp-office__grid { margin-top: 52px; }
.cmp-office__info { padding-left: 24px; }
.cmp-office__name-jp { font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--black); }
.cmp-office__name-en { margin-top: 6px; font-family: var(--font-en); font-size: 16px; letter-spacing: .1em; color: var(--black); }
.cmp-office__rows { margin-top: 48px; }
.cmp-office__row { display: grid; grid-template-columns: 72px 1fr; gap: 40px; margin-bottom: 34px; }
.cmp-office__row dt {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .08em;
  color: #9b9b9b;
  text-align: right;
  padding-top: 3px;
}
.cmp-office__row dd {
  font-family: var(--font-en);
  font-size: 16px;
  letter-spacing: .1em;
  line-height: 1.9;
  color: var(--black);
}
.cmp-office__map { aspect-ratio: 16 / 10; background: #eee; }
.cmp-office__map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .cmp { padding: 120px 0 90px; }
  .cmp__inner { padding: 0 24px; }
  .cmp-founders { grid-template-columns: 1fr; margin-top: 36px; }
  .cmp-ph--double { aspect-ratio: 4 / 5; margin-bottom: 44px; }
  .cmp-founder { margin-top: 40px; }
  .cmp-founder + .cmp-founder { margin-top: 64px; }
  .cmp-founder__row { gap: 20px; }
  .cmp-founder__row .cmp-ph { flex-basis: 44%; }
  .cmp-founder__name { padding-bottom: 12px; }
  .cmp-founder__name-jp { font-size: 19px; }
  .cmp-founder__name-en { font-size: 13px; }
  .cmp-founder__role { font-size: 12px; margin-top: 22px; }
  .cmp-founder__desc { font-size: 12px; }
  .cmp-business { margin-top: 90px; }
  .cmp-business__body { margin-top: 36px; padding-left: 0; }
  .cmp-business__body p { font-size: 13px; letter-spacing: .06em; line-height: 2; }
  .cmp-service { margin-top: 90px; }
  .cmp-service__list { margin-top: 30px; padding-left: 0; grid-template-columns: 1fr; }
  .cmp-service__item { padding: 22px 0 26px; }
  .cmp-service__en { font-size: 17px; }
  .cmp-service__jp { font-size: 12px; }
  .cmp-service__item dd { font-size: 13px; }
  .cmp-office { margin-top: 90px; }
  .cmp-office__info { padding-left: 0; }
  .cmp-office__grid { grid-template-columns: 1fr; gap: 44px; margin-top: 36px; }
  .cmp-office__row { grid-template-columns: 56px 1fr; gap: 22px; margin-bottom: 26px; }
  .cmp-office__row dd { font-size: 14px; }
}

/* ============================================================
   News 詳細ページ（single-news.php / news-detail.html）
   note 風の1カラム表示。背景はトップの斜めライン模様を薄く連結
   ============================================================ */
.nsg {
  position: relative;
  padding: 150px 0 110px;
  background:
    repeating-linear-gradient(108deg, transparent 0, transparent 420px, rgba(17,17,17,.05) 420px, rgba(17,17,17,.05) 421px),
    repeating-linear-gradient(108deg, transparent 0, transparent 980px, rgba(199,159,98,.12) 980px, rgba(199,159,98,.12) 987px),
    var(--bg);
}
.nsg__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.nsg__eyecatch img { width: 100%; height: auto; display: block; }
/* カテゴリー・日付（アイキャッチとタイトルの間） */
.nsg__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: .2em;
  color: #9b9b9b;
}
.nsg__cat { font-weight: 600; text-transform: uppercase; color: var(--black); }
.nsg__cat + .nsg__date::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 18px; vertical-align: middle; background: #bbb; }
.nsg__meta + .nsg__title { margin-top: 14px; }
/* タイトル＝記事冒頭の太いキャッチ（note と同じく本文の一部のように見せる） */
.nsg__title {
  margin-top: 44px;
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .05em;
  color: var(--black);
}
/* 本文（WYSIWYG出力）: note に準じた読みやすい組版 */
.nsg__body { margin-top: 8px; }
.nsg__body p {
  margin: 2em 0;
  font-size: 15px;
  line-height: 2.3;
  letter-spacing: .05em;
  color: #333;
}
.nsg__body h2 {
  margin: 84px 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--black);
}
.nsg__body h3 {
  margin: 44px 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--black);
}
.nsg__body img { display: block; width: 100%; height: auto; margin: 52px 0; }
.nsg__body hr {
  border: 0;
  width: 200px;
  height: 1px;
  background: #b5b5b5;
  margin: 84px 0;
}
.nsg__body a { text-decoration: underline; }
.nsg__body a:hover { color: var(--gold); }
/* 前後の記事ナビ */
.nsg__nav {
  max-width: 720px;
  margin: 100px auto 0;
  padding: 44px 24px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
  gap: 64px;
}
.nsg__nav a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--black);
  transition: color .3s;
}
.nsg__nav a:hover { color: var(--gold); }
.nsg__nav-item--empty { color: #c9c9c9; font-size: 14px; letter-spacing: .16em; }
/* ---- 記事末尾の「ご相談はこちら」バナー（JOURNAL 詳細 / PROJECTS 詳細 共通・functions.php iw_contact_banner） ---- */
.cta { max-width: 960px; margin: 100px auto 0; padding: 0 24px; }
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 80px 44px 64px;
  background: #f2efe9;
}
.cta__text { position: relative; min-width: 0; }
.cta__label {
  position: relative;
  margin: 0 0 10px;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  color: #555;
}
.cta__ttl {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--black);
}
.cta__sub { margin: 0; font-size: 12px; letter-spacing: .1em; line-height: 1.8; color: #6b6b6b; }
.cta__btn { flex-shrink: 0; min-width: 220px; padding: 18px 28px; }
/* PROJECTS 詳細では黒いギャラリーの直下に置く（緑枠のイメージ位置） */
.psg .cta { margin-top: 90px; }
@media (max-width: 900px) {
  .cta { margin-top: 64px; }
  .psg .cta { margin-top: 56px; }
  .cta__inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 24px; }
  .cta__ttl { font-size: 16px; }
  .cta__btn { width: 100%; min-width: 0; }
}

/* 記事下: 直近3ヶ月で読まれている記事（ニュース一覧と同じカード・3カラム） */
.nsg-rel { padding-top: 110px; }
.nsg-rel__ttl {
  margin: 0 0 40px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--black);
}
@media (max-width: 900px) {
  .nsg-rel { padding-top: 64px; }
  .nsg-rel__ttl { font-size: 13px; margin-bottom: 28px; }
}

/* ============================================================
   Contact ページ（contact.html / template-contact.php）
   フォーム本体は HubSpot 埋め込み（プレースホルダーを確保）
   ============================================================ */
.ctc { background: var(--bg); padding: 0 0 140px; }
.ctc__inner { max-width: 1500px; margin: 0 auto; padding: 0 40px; }
.ctc-form { margin-top: 70px; border-top: 1px solid #d9d9d9; padding-top: 26px; }
.ctc-form__head { display: flex; justify-content: space-between; align-items: baseline; }
.ctc-form__label {
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--black);
}
.ctc-form__required {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--black);
}
/* HubSpot フォーム埋め込み先（コードは .ctc-form__embed 内に貼る） */
.ctc-form__embed { margin-top: 40px; min-height: 480px; }
/* フォームは HTML 描画（hs-form-html）で埋め込んでいるため、ページ側の CSS が届く。
   Inquiry Details（textarea）は入力しやすいよう高さを確保 */
.ctc-form__embed textarea,
.ctc-form__embed .hsfc-TextareaInput { min-height: 200px; }

@media (max-width: 900px) {
  .nsg { padding: 120px 0 80px; }
  .nsg__nav { gap: 36px; }
  .ctc { padding: 0 0 90px; }
  .ctc__inner { padding: 0 24px; }
  .ctc-form { margin-top: 44px; }
  .ctc-form__embed { min-height: 420px; }
}

/* ============================================================
   Privacy Policy ページ（page-privacy.php）
   見出しブロックは他の下層ページと共通（.prj-top）。本文は中央 1 カラム、
   各見出しは共通のゴールドマーク（.phi-mark）付き
   ============================================================ */
.pp { background: var(--bg); padding: 30px 0 150px; }
.pp__inner { max-width: 860px; margin: 0 auto; padding: 0 40px; }
.pp__lead,
.pp__sec p {
  font-size: 15px;
  line-height: 2.3;
  letter-spacing: .05em;
  color: #333;
}
.pp__sec p + p { margin-top: 1.6em; }
.pp__sec { margin-top: 84px; }
.pp__sec--cookie { margin-top: 120px; padding-top: 72px; border-top: 1px solid #d9d9d9; }
.pp__h2 {
  width: fit-content;
  margin-bottom: 26px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1; /* 先頭のゴールドマーク（.phi-mark）を行ボックスに合わせるため */
  color: var(--black);
}
.pp__h2--lg { font-size: 24px; margin-bottom: 40px; }
.pp__h3 {
  margin: 44px 0 14px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--black);
}
.pp__list {
  margin: 1.4em 0 0;
  padding-left: 2.2em;
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .05em;
  color: #333;
}
.pp__list li { padding-left: .3em; }
.pp__list li + li { margin-top: .3em; }
.pp__contact { margin-top: 1.8em !important; }
.pp__sign { margin-top: 1.8em !important; }
.pp__link { text-decoration: underline; text-underline-offset: .2em; color: var(--black); }
.pp__link:hover { color: var(--gold); }

@media (max-width: 900px) {
  .pp { padding: 10px 0 90px; }
  .pp__inner { padding: 0 24px; }
  .pp__lead, .pp__sec p, .pp__list { font-size: 13px; letter-spacing: .04em; line-height: 2.1; }
  .pp__sec { margin-top: 60px; }
  .pp__sec--cookie { margin-top: 84px; padding-top: 52px; }
  .pp__h2 { font-size: 17px; margin-bottom: 20px; }
  .pp__h2--lg { font-size: 20px; margin-bottom: 30px; }
  .pp__h3 { font-size: 15px; margin: 34px 0 12px; }
}

/* ============================================================
   Projects 詳細ページ（project-detail.html / single-projects.php）
   白い頭部（パンくず・タイトル・メタ・ヒーロー・クレジット）＋
   黒背景のギャラリー（本文 the_content をそのまま流し込む）
   ============================================================ */
.psg { background: var(--bg); padding-top: 170px; }
.psg__head { margin-left: 18.8%; padding-right: 24px; }
.psg__bc {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
}
.psg__bc a { color: var(--black); }
.psg__bc a:hover { color: var(--gold); }
.psg__bc-line { display: block; width: 22px; height: 1px; background: #b5b5b5; }
.psg__bc-cur { color: var(--gold); text-transform: uppercase; }
.psg__title {
  margin-top: 34px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 50px);
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--black);
}
/* タイトル直下のサブタイトル（抜粋・例: ホテルサンライフガーデン 芙蓉） */
.psg__sub {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.6;
  color: var(--black);
}
.psg__meta {
  margin-top: 12px;
  display: flex;
  align-items: center;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--black);
}
.psg__meta span + span {
  margin-left: 18px;
  padding-left: 18px;
  border-left: 1px solid #c9c9c9;
}
.psg__hero { margin: 56px 3.3vw 0; }
.psg__hero img { width: 100%; height: auto; display: block; }
/* クレジット（Area / Completion / Photo by …） */
.psg__credits {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin: 22px calc(3.3vw + 12.5%) 74px;
}
.psg__credits-main { font-family: var(--font-en); font-size: 11px; letter-spacing: .12em; line-height: 2.1; color: #3E3A39; }
.psg__credits-photo { font-family: var(--font-en); font-size: 11px; letter-spacing: .12em; color: #3E3A39; white-space: nowrap; }
/* 黒背景のギャラリー: 本文をそのまま流し込む */
.psg__gallery {
  background: #000;
  padding: 100px 0 120px;
}
.psg__body { max-width: 1600px; margin: 0 auto; }
.psg__body img {
  display: block;
  height: auto;
  max-width: 82%;
  margin: 0 auto 100px;
}
/* WPの配置ブロックに対応（左右寄せ・全幅） */
.psg__body .alignleft, .psg__body img.left { margin-left: 0; }
.psg__body .alignright, .psg__body img.right { margin-right: 0; margin-left: auto; }
.psg__body .alignfull img, .psg__body img.full { max-width: 100%; }
/* WP本体のフロートを無効化（フロートだと黒背景の高さに含まれず画像が途中で切れる）。
   回り込みは使わず、余白で左・中央・右の位置決めをする */
.psg__body .alignleft,
.psg__body .alignright,
.psg__body .aligncenter { float: none !important; }
.psg__body figure.alignleft img  { margin-left: 0;    margin-right: auto; }
.psg__body figure.alignright img { margin-left: auto; margin-right: 0; }
.psg__body figure.aligncenter img { margin-left: auto; margin-right: auto; }
.psg__body { display: flow-root; } /* 念のため他ブロックのフロートも内包する */
.psg__body p {
  max-width: 720px;
  margin: 0 auto 60px;
  padding: 0 24px;
  font-size: 14px;
  line-height: 2.3;
  letter-spacing: .05em;
  color: #cfcfcf;
}
.psg__body figure { margin: 0; }
.psg__body figure img { margin-bottom: 0; }
.psg__body figure { margin-bottom: 100px; }
/* YouTube等の埋め込み: 写真と同じ幅で、動画の比率（16:9）そのまま・切り取りなしで表示（2026-09-15）。
   テーマは responsive-embeds 未宣言のためコアのアスペクト比CSSは効かない。ここで独自に制御する */
.psg__body .wp-block-embed { max-width: 82%; margin: 0 auto 100px; }
.psg__body .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.psg__body .wp-block-embed__wrapper::before { display: none; }
.psg__body .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none; /* コアの .wp-block-embed iframe { max-width:100% } と競合しないよう明示 */
  border: 0;
}

/* 記事下のプロジェクト一覧（.prj-grid を流用） */
.psg__list { padding-top: 110px; }

@media (max-width: 900px) {
  .psg { padding-top: 120px; }
  .psg__list { padding-top: 64px; }
  .psg__head { margin-left: 0; padding: 0 24px; }
  .psg__title { font-size: 26px; }
  .psg__sub { font-size: 13px; margin-top: 10px; }
  .psg__meta { font-size: 11px; }
  .psg__hero { margin: 36px 0 0; }
  .psg__credits { flex-direction: column; margin: 18px 24px 50px; }
  .psg__gallery { padding: 60px 0 70px; }
  .psg__body img { max-width: 92%; margin-bottom: 56px; }
  .psg__body figure { margin-bottom: 56px; }
  .psg__body .wp-block-embed { max-width: 92%; margin-bottom: 56px; }
}

/* 高さの低い画面では本文がはみ出す恐れがあるため可変高さに戻す */
@media (max-height: 730px) and (min-width: 901px) {
  .phi-sec { height: auto; min-height: 100vh; }
}

@media (max-width: 900px) {
  .phi-nav { display: none; }

  .phi-top { padding: 130px 0 90px; }
  .phi-top__inner { padding: 0 24px; }
  .phi-top__title { margin-bottom: 48px; }
  .phi-top__lead, .phi-top__para { font-size: 13px; letter-spacing: .1em; line-height: 2; }
  .phi-top__block { margin-bottom: 34px; }
  .phi-top__catch { margin-top: 48px; }

  /* SPは画像を背景に敷き、本文をその上に重ねる */
  .phi-sec {
    display: block;
    min-height: 0;
    padding: 90px 0 100px;
  }
  .phi-sec__visual {
    position: absolute;
    inset: 0;
    left: 0;
    height: auto;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    z-index: 1;
  }
  .phi-sec__body { position: relative; z-index: 2; padding: 0 24px; }
  .phi-sec__title { margin-bottom: 28px; }
  .phi-sec__jp { margin-bottom: 22px; }
  /* SPは1行が折り返さない字送りにする */
  .phi-sec__text { line-height: 2.2; font-size: 13px; letter-spacing: .06em; }
  .phi-sec__jp { font-size: 14px; letter-spacing: .12em; }
  /* 白い縁取りはファイル末尾の Philosophy SP ブロックで指定 */
}

/* iPad・スマホ（〜900px）: 右寄せ本文が斜め写真の暗部に重なるため、
   文字にキレのある白い縁取り（小さい半径のにじみを重ねる）を付けて可読性を確保する。
   写真を隠すパネルや行背景は使わない（2026-09-14） */
@media (max-width: 900px) {
  .phi-sec__body { padding: 0 24px; }
  .phi-sec__title,
  .phi-sec__jp,
  .phi-sec__text {
    /* 小さい半径を多く重ねて輪郭をカチッと、外側を少し広げて背景の暗部を確実に抑える（2026-09-15 強め） */
    text-shadow:
      0 0 1px #fff, 0 0 1px #fff, 0 0 2px #fff, 0 0 2px #fff,
      0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff,
      0 0 8px #fff, 0 0 12px rgba(255,255,255,.9),
      0 0 18px rgba(255,255,255,.75);
  }
  .phi-sec__text { color: var(--black); }
}
}
}