/* ============================================================
   @project 安田工業 / pages.css（下層ページ共通の追加スタイル）
   @status  project
   @requires tokens.css / style.css
   ============================================================ */

/* --- 下層ページの上部余白（固定ヘッダー分） ------------------- */
body:not(.home-page) { padding-top: var(--header-h); }

/* ============================================================
   ページヘッダー（下層FV）
   ============================================================ */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: var(--spacing-4xl) var(--spacing-3xl);
  background: var(--color-ink);
}
.page-hero__bp {
  position: absolute; inset: 0; z-index: 0; opacity: 0.5; pointer-events: none;
  background-image:
    linear-gradient(var(--color-blueprint-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-blueprint-dim) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 78%);
}
.page-hero .container { position: relative; z-index: 1; }
/* 協力会社ヒーローは背景オーバーレイ(.partners::after z-index:1)より前面に置く（見出しが暗くならないように） */
.page-hero.partners .container { z-index: 2; }
.page-hero.partners .partners__media { z-index: 0; }
.page-hero__en { font-family: var(--font-en-disp); font-size: clamp(40px, 8vw, 96px); letter-spacing: 0.06em; color: rgba(127,178,214,0.14); text-transform: uppercase; line-height: 1; }
.page-hero__title { font-family: var(--font-jp-serif); font-size: clamp(28px, 4vw, 48px); color:#fff; letter-spacing: 0.08em; margin-top: -0.3em; font-weight: 600; }
.page-hero__lead { color: var(--color-text-mute); margin-top: var(--spacing-md); max-width: var(--measure); }
.breadcrumb { display:flex; gap: 0.6em; font-size: var(--font-size-label); color: var(--color-text-mute); letter-spacing: 0.08em; margin-bottom: var(--spacing-lg); }
.breadcrumb a:hover { color: var(--color-accent-light); }

/* 汎用の本文リード＋見出し（暗色上） */
/* 折り返し幅はトークンで一本化する。ページ側のインライン指定（820px等）は使わない。
   2カラムの中に置いた .prose は列幅（最大580px程度）のほうが狭いので、この上限は当たらない。 */
.prose { max-width: var(--measure); }
.prose p { color: var(--color-text-mute); margin-bottom: 1.4em; line-height: 2.05; }
.prose p:last-child { margin-bottom: 0; }
.block-title { font-family: var(--font-jp-serif); font-size: clamp(22px, 2.6vw, 32px); color:#fff; letter-spacing: 0.06em; margin-bottom: var(--spacing-lg); font-weight: 600; line-height: 1.5; }
.block-title .en { display:block; font-family: var(--font-en-serif); font-size: 0.4em; letter-spacing: 0.3em; color: var(--color-accent-light); text-transform: uppercase; margin-bottom: 0.5em; }
.section--light .block-title, .section--white .block-title { color: var(--color-text-dark); }

/* ============================================================
   会社概要：代表挨拶（sticky）＋会社情報テーブル
   ============================================================ */
.president__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--spacing-3xl); align-items: start; }
.president__portrait .ph { aspect-ratio: 3/4; }
.company-visual { aspect-ratio: 16/7; width: 100%; object-fit: cover; display: block; }
.president__portrait img { aspect-ratio: 3/4; width: 100%; object-fit: cover; display: block; }
.president__portrait .name { margin-top: var(--spacing-md); font-family: var(--font-jp-serif); color:#fff; }
.president__portrait .name span { display:block; font-size: var(--font-size-small); color: var(--color-text-mute); letter-spacing: 0.08em; margin-top: 0.3em; }

/* 顔出しなしの署名パネル（青焼き背景＋引用符＋理念＋氏名） */
.president__sign {
  position: relative; overflow: hidden;
  border: 1px solid var(--color-line-dark);
  background: linear-gradient(160deg, var(--color-ink-3), var(--color-ink-2));
  padding: var(--spacing-2xl) var(--spacing-xl);
  min-height: 440px;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* 背景の明るい建築現場写真（IMG-20） */
.president__sign-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
/* 文字可読性のためのオーバーレイ（明るい印象を残しつつ下部を少し濃く） */
.president__sign::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(165deg, rgba(20,23,28,0.42) 0%, rgba(20,23,28,0.5) 55%, rgba(20,23,28,0.72) 100%);
}
.president__sign > *:not(.president__sign-bg) { position: relative; z-index: 2; }
.president__quote { font-family: var(--font-en-serif); font-size: 110px; line-height: 0.4; color: var(--color-accent-light); opacity: 0.85; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
.president__sign-word { font-family: var(--font-jp-serif); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.75; color: #fff; letter-spacing: 0.08em; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.president__sign .name { margin-top: 0; text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.president__sign .name span { color: #d8dde3; }
.president__msg p { color: var(--color-text-mute); margin-bottom: 1.5em; line-height: 2.1; }

.company-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--color-line-dark); }
.company-table th, .company-table td { text-align: left; padding: var(--spacing-md) var(--spacing-sm); border-bottom: 1px solid var(--color-line-dark); vertical-align: top; font-size: var(--font-size-small); }
.company-table th { width: 200px; color: var(--color-accent-light); font-weight: 500; letter-spacing: 0.08em; font-family: var(--font-jp-serif); }
.company-table td { color: var(--color-text-light); line-height: 1.9; }
.company-history { margin-top: var(--spacing-3xl); }
@media (max-width: 768px) { .company-history .company-table th { width: 88px; white-space: nowrap; } }
.access__map { margin-top: var(--spacing-lg); }
.access__map .ph { aspect-ratio: 16/7; }
.access__map iframe { display: block; width: 100%; height: 440px; border: 0; }
@media (max-width: 768px) { .access__map iframe { height: 320px; } }

/* ============================================================
   事業内容：工程フロー（ステッパー）＋強み
   ============================================================ */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg) var(--spacing-md); counter-reset: step; }
.flow__item {
  position: relative; padding: var(--spacing-lg);
  border: 1px solid var(--color-line-dark); background: rgba(39,46,57,0.3);
  transition: border-color var(--transition-slow), transform var(--transition-slow);
}
.flow__item:hover { border-color: var(--color-accent); transform: translateY(-4px); }
/* 工程番号。下層ページのヒーロー（.page-hero__en）と同じ「薄く大きな英字」の扱い */
.flow__item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0.08em; right: 0.18em;
  font-family: var(--font-en-disp); font-size: clamp(44px, 4.4vw, 68px);
  line-height: 1; letter-spacing: 0.02em;
  color: rgba(127,178,214,0.16);
  pointer-events: none;
}
/* 線画アイコン。端と角を丸めないと細い線が痩せて見えるので統一しておく */
.flow__icon {
  width: 44px; height: 44px; margin: var(--spacing-sm) 0;
  stroke: var(--color-blueprint); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* ウェイト無指定だと 400 になるが、読み込んでいる Noto Serif JP は 500/600/700 のみ。
   実際には最軽量の500が当たり、16pxの明朝が生成り地で痩せて見えていた。
   16pxでは 500→600 の差がほとんど出ないので、最大の700まで上げたうえで
   本文（16px）と差がつくよう18pxにする。明朝は小さいほど横線が消える。 */
.flow__name { font-family: var(--font-jp-serif); font-size: 18px; font-weight: 700; color:#fff; letter-spacing: 0.04em; }
.flow__desc { font-size: var(--font-size-small); color: var(--color-text-mute); margin-top: 0.4em; }

/* 明色地では、同じウェイトでも暗色地より線が痩せて見える（暗色地の白文字は
   にじんで太って見えるため）。生成りの面に限って見出しを1段上げる。 */
.section--kinari .sec-title { font-weight: 700; }

/* 生成りの面に置いたときの工程カード。トークンで拾えない部分
   （カード面・白文字・薄い工程番号・線画の色）だけを明色側へ寄せる。 */
.section--kinari .flow__item { background: rgba(255,255,255,0.62); }
.section--kinari .flow__name { color: var(--color-text-light); }
/* 生成り地に rgba(127,178,214,0.16) では番号が消えるので、理念区画の
   ウォーターマークと同系の青を使い、濃度だけ上げる */
.section--kinari .flow__item::before { color: rgba(94,139,176,0.24); }
.section--kinari .flow__icon { stroke: var(--color-accent); }
/* 方眼は暗色地で 0.5 に落としてある。明色地では線が消えるので等倍で使う */
.section--kinari .reliability__bp { opacity: 1; }

.strength-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
.strength-item { border-left: 2px solid var(--color-accent); padding-left: var(--spacing-lg); }
.strength-item__no { font-family: var(--font-en-disp); font-size: 13px; letter-spacing: 0.2em; color: var(--color-accent-light); }
.strength-item__title { font-family: var(--font-jp-serif); font-size: var(--font-size-h3); color:#fff; margin: 0.3em 0 0.5em; font-weight: 600; }
.strength-item__body { color: var(--color-text-mute); font-size: var(--font-size-small); line-height: 2; }

/* ============================================================
   施工実績：一覧グリッド
   ============================================================ */
.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
.work-card { border: 1px solid var(--color-line-dark); background: var(--color-ink-2); overflow: hidden; transition: border-color var(--transition-slow), transform var(--transition-slow); }
.work-card:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.work-card .ph { aspect-ratio: 4/3; }
.work-card img { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; }
.work-card__body { padding: var(--spacing-lg); }
.work-card__cat { font-family: var(--font-en-serif); font-size: 11px; letter-spacing: 0.2em; color: var(--color-accent-light); text-transform: uppercase; }
/* 長音符が行頭に落ちないように（「ワイナリ／ー）」の防止） */
.work-card__name { font-family: var(--font-jp-serif); font-size: var(--font-size-body); color:#fff; margin: 0.4em 0; line-break: strict; }
.work-card__term, .work-card__loc { font-size: var(--font-size-label); color: var(--color-text-mute); letter-spacing: 0.06em; }

/* 施工実績 詳細 */
.work-detail__grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--spacing-3xl); align-items: start; }
.work-detail__main .ph { aspect-ratio: 4/3; margin-bottom: var(--spacing-md); }
/* 詳細ページは切り抜かない。縦位置の写真も全体を見せる（高さだけ上限を置く） */
.work-detail__photo { display: block; width: auto; max-width: 100%; max-height: 720px; margin: 0 auto var(--spacing-md); }
.work-detail__thumbs { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--spacing-sm); }
.work-detail__thumbs .ph { aspect-ratio: 1/1; }
.work-detail__thumbs img { aspect-ratio: 1/1; width: 100%; object-fit: cover; display: block; }

.service-visual { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; }
.service-visual--portrait { aspect-ratio: 4/5; }

/* 「安田工業の仕事」。理念セクション（.creed）と同じ三層構成
   ＝ 写真(z0) → 暗いスクリム(z1) → 中身(z2)。事業内容ページの中で
   ここだけ写真を敷き、章の入口として重心を置く。 */
.ourwork {
  /* 写真の明るい部分（合板）に重なっても読めるよう、暗色面より濃くする */
  --color-text-light: #fff;
  --color-text-mute: rgba(255,255,255,0.86);
  --color-line-dark: rgba(255,255,255,0.26);
  --color-accent-light: #9CC6E4;
  position: relative;
  overflow: hidden;
  background: #0E1116;
}
/* 上下に食い込ませた分がパララックスの移動しろ（.creed__bg と同じ -8%） */
.ourwork__bg { position: absolute; inset: -8% 0; z-index: 0; }
.ourwork__img {
  position: absolute; inset: 0;
  background: url('../images/img-03-formwork.png') center / cover no-repeat;
}
.ourwork::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,14,18,0.78) 0%, rgba(11,14,18,0.68) 42%, rgba(11,14,18,0.88) 100%);
}
.ourwork > *:not(.ourwork__bg) { position: relative; z-index: 2; }
/* 写真の上なので、スクリムを濃くする代わりに影で可読性を担保する（.creed と同じ考え方） */
.ourwork .container { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }

/* ============================================================
   協力会社募集：メリット＋求める人物像
   ============================================================ */
/* auto-fit だと1200px幅で4列になり、本文が1行12文字まで詰まって
   「幅／広い」のように語が割れる。3列に固定して1行20文字前後を確保する。 */
.merit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); }
.merit-item { padding: var(--spacing-xl); border: 1px solid var(--color-line-dark); background: rgba(39,46,57,0.3); }
.merit-item__no { font-family: var(--font-en-disp); font-size: 13px; letter-spacing: 0.2em; color: var(--color-warm-light); }
.merit-item__title { font-family: var(--font-jp-serif); font-size: var(--font-size-h3); color:#fff; margin: 0.4em 0; font-weight: 600; }
.merit-item__point { color: var(--color-warm-light); font-size: var(--font-size-small); margin-bottom: 0.5em; }
.merit-item__body { color: var(--color-text-mute); font-size: var(--font-size-small); line-height: 2; }
.ptype { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--spacing-lg); }
.ptype-item { text-align:center; padding: var(--spacing-xl); border: 1px solid var(--color-line-dark); }
.ptype-item h4 { font-family: var(--font-jp-serif); color:#fff; font-size: var(--font-size-h3); margin-bottom: var(--spacing-sm); font-weight: 600; }
.ptype-item p { color: var(--color-text-mute); font-size: var(--font-size-small); }

/* ============================================================
   お問い合わせフォーム（種別→入力→確認→完了）
   ============================================================ */
.form { max-width: var(--measure); margin-inline: auto; }
.form__steps { display:flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-2xl); }
.form__steps li { flex:1; text-align:center; font-size: var(--font-size-label); letter-spacing: 0.08em; color: var(--color-text-mute); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--color-line-dark); }
.form__steps li.is-active { color:#fff; border-bottom-color: var(--color-accent); }
.form__type { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.form__type label { display:flex; align-items:center; gap: 0.7em; padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--color-line-dark); cursor:pointer; transition: border-color var(--transition-base), background var(--transition-base); }
.form__type label:hover { border-color: var(--color-accent); }
.form__type input:checked + span { color: var(--color-accent-light); }
.form__type label:has(input:checked) { border-color: var(--color-accent); background: rgba(94,139,176,0.08); }
.field { margin-bottom: var(--spacing-lg); }
.field label { display:block; font-size: var(--font-size-small); letter-spacing: 0.06em; margin-bottom: 0.5em; color: var(--color-text-light); }
.field label .req { color: var(--color-accent-light); font-size: 11px; margin-left: 0.5em; }
.field input, .field textarea, .field select {
  width:100%; padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-ink); border: 1px solid var(--color-line-dark); color:#fff;
  font: inherit; font-size: 16px; border-radius: 2px;
  transition: border-color var(--transition-base);
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color: var(--color-accent); }
.field textarea { min-height: 160px; resize: vertical; }
.form__actions { display:flex; gap: var(--spacing-md); justify-content: center; margin-top: var(--spacing-xl); flex-wrap: wrap; }
.form__note { text-align:center; color: var(--color-text-mute); font-size: var(--font-size-label); margin-top: var(--spacing-lg); }
.form__confirm dl { border-top: 1px solid var(--color-line-dark); }
.form__confirm div { display:grid; grid-template-columns: 200px 1fr; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-sm); border-bottom: 1px solid var(--color-line-dark); }
.form__confirm dt { color: var(--color-accent-light); font-size: var(--font-size-small); font-family: var(--font-jp-serif); }
.form__confirm dd { color:#fff; font-size: var(--font-size-small); white-space: pre-wrap; }
.form__done { text-align:center; padding-block: var(--spacing-2xl); }
.form__done .mark { font-size: 56px; color: var(--color-accent-light); }
.is-hidden { display: none !important; }

/* 電話CTA（協力会社・共通） */
.tel-cta { display:flex; flex-wrap:wrap; gap: var(--spacing-lg); align-items:center; justify-content:center; }

/* 公式LINE（お問い合わせページ）。QRはスマホでは出さない（その場で読めないため） */
.line-contact { display: grid; grid-template-columns: 1fr 200px; gap: var(--spacing-2xl); align-items: center; margin-top: var(--spacing-3xl); padding: var(--spacing-2xl); border: 1px solid var(--color-line-dark); }
.line-contact p { color: var(--color-text-mute); line-height: 2; margin-bottom: var(--spacing-lg); }
.line-contact__qr img { width: 200px; height: auto; display: block; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  /* 工程はタブレットでもPCと同じ3列のまま（640px以下で縦のタイムラインに切り替わる） */
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 3列のまま幅が詰まる帯域。余白を削って工程名と説明を1行に収める
   （32pxのままだと本文が111pxとなり「要望と条件を／確認」で折れて字間が開く） */
@media (max-width: 860px) {
  .flow { gap: var(--spacing-md) var(--spacing-sm); }
  .flow__item { padding: var(--spacing-md) var(--spacing-sm); }
  .flow__item::before { font-size: 44px; }
}
/* 余白を削りきってもなお詰まる帯域。18pxのままだと最長の「コンクリート打設」が
   内側150pxに収まらず2行になるので、本文と同じ16pxへ戻す
   （640px以下の縦タイムラインでも16px。寸法はそちらと揃う） */
@media (max-width: 720px) {
  .flow__name { font-size: var(--font-size-body); }
}
@media (max-width: 1024px) {
  .merit-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 求めるパートナー像。901〜975px は3列のままカード内側が151〜166pxまで痩せ、
   24pxの見出し「その他関連業種」（168px）が2行に折れる。列数と器の幅は動かさず、
   カードの内側余白と列間だけ削って見出しを1行に保つ（W=901でも内側190px確保）。 */
@media (min-width: 901px) and (max-width: 1024px) {
  .ptype { gap: var(--spacing-md); }
  .ptype-item { padding: var(--spacing-lg) var(--spacing-lg); }
}
@media (max-width: 900px) {
  .president__grid, .work-detail__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); }
  .president__portrait .ph { aspect-ratio: 16/10; max-width: 420px; }
  .president__portrait img { max-width: 420px; }
  .strength-list, .ptype { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .works-grid, .form__type, .merit-grid { grid-template-columns: 1fr; }
  /* 工程はカードをやめ、縦につながる時系列に。
     カードのまま9枚積むとこのセクションだけで4画面分になり、「流れ」が読めなくなるため。 */
  .flow { display: block; }
  .flow__item {
    display: grid; grid-template-columns: 44px 1fr; align-items: start;
    column-gap: var(--spacing-md); row-gap: 0;
    padding: 0 0 var(--spacing-lg) 0;
    border: none; background: none;
  }
  .flow__item:last-child { padding-bottom: 0; }
  .flow__item:hover { transform: none; }
  /* 番号を左の軸に戻す。丸い節を兼ねさせるので静的配置に */
  .flow__item::before {
    position: static; grid-column: 1; grid-row: 1 / span 2;
    align-self: start; justify-self: center;
    font-size: 15px; letter-spacing: 0.08em;
    color: var(--color-accent-light);
    padding-top: 0.15em;
  }
  /* 番号と番号をつなぐ縦線。最後の工程では引かない */
  .flow__item { position: relative; }
  .flow__item::after {
    content: ""; position: absolute; left: 21.5px; top: 2.1em; bottom: 0;
    border-left: 1px solid var(--color-line-dark);
  }
  .flow__item:last-child::after { display: none; }
  /* 生成り用のカード指定（面色・薄い番号）は、カードをやめるこの帯域では打ち消す。
     ここでの番号は装飾ではなく工程の目印なので、読める濃さに戻す */
  .section--kinari .flow__item { background: none; }
  .section--kinari .flow__item::before { color: var(--color-accent-light); }
  /* 工程をつなぐ縦線。#E3E5E8 では生成り地に埋もれて「流れ」が読めなくなるので、
     暗色地のときと同じ見え方（地との比 1.5 前後）になる青焼き寄りの線にする */
  .section--kinari .flow__item::after { border-left-color: rgba(94,139,176,0.42); }
  .flow__icon { display: none; }
  .flow__name { grid-column: 2; grid-row: 1; font-size: var(--font-size-body); }
  .flow__desc { grid-column: 2; grid-row: 2; margin-top: 0.2em; }
  .line-contact { grid-template-columns: 1fr; }
  .line-contact__qr { display: none; }
  .company-table th { width: 120px; }
  .form__confirm div { grid-template-columns: 110px 1fr; }
  .form__steps li { font-size: 10px; }
}

/* ============================================================
   会社概要：理念（企業理念・経営理念・社訓・行動指針）
   ============================================================ */
/* 前後の暗いセクションに対して、この区画だけ生成りの明るい面に反転する。
   既存部品（.prose など）はトークンを参照しているので、変数をここで差し替えれば
   個別のCSSを書き換えずに明色対応になる。#fff 直書きの箇所だけ後段で上書きする。 */
.philosophy {
  --color-text-light: #1A1D22;
  --color-text-mute:  #55606C;
  --color-line-dark:  #E3E5E8;
  --color-accent:     #5E8BB0;
  --color-accent-light: #3E617D;
  position: relative;
  /* clip であって hidden ではない。hidden はスクロールコンテナを作って
     子孫の position: sticky（目次）を無効化してしまう */
  overflow: clip;
  background: #F4F2ED;
  color: var(--color-text-light);
  /* 文節の切れ目でしか折らない。両端揃え（style.css）と併用しているので、
     行末は引き伸ばされて揃ったまま、「必要とさ／れる」のような語中の分断だけが消える。
     未対応ブラウザでは従来どおりの折り返しに戻るだけで崩れない。 */
  word-break: auto-phrase;
}

/* 青焼きの方眼。内側の .grid だけを JS で動かして視差をつける */
.philosophy__bp { position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; }
.philosophy__bp .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(94,139,176,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,139,176,0.20) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 78% 22%, #000 0%, transparent 72%);
}
.philosophy__watermark {
  position: absolute; top: var(--spacing-2xl); right: -0.06em; z-index: 0;
  font-family: var(--font-en-disp); font-size: clamp(56px, 11vw, 150px);
  letter-spacing: 0.04em; line-height: 1; color: rgba(94,139,176,0.10);
  pointer-events: none; user-select: none;
}
.philosophy .container { position: relative; z-index: 1; }

/* 暗いブロックが区画の末尾に来るので、下の余白は持たせない */
.philosophy { padding-bottom: 0; }

/* 目次のレール。区画の全高にわたる絶対配置の柱で、この中で目次を sticky させる。
   左端は .container（width: min(100% - 10vw, 1200px)）の左端に合わせている */
.ph-rail {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: max(5vw, calc((100% - var(--container-wide)) / 2));
  width: 200px; pointer-events: none;
}
/* 画面の高さの中央で止める。transform はレイアウト後に効くので、
   top で止まる位置を決めてから自身の高さの半分だけ引き上げている */
.ph-index { position: sticky; top: 50vh; transform: translateY(-50%); pointer-events: auto; }
/* 本文はレールの幅ぶん右へ寄せる。
   幅は .creed__inner と同じ基準（container-wide）にして、明るい側と
   暗い側で本文の左端（縦軸）を一致させる */
.ph-body {
  width: min(100% - 10vw, var(--container-wide)); margin-inline: auto;
  padding-left: calc(200px + var(--spacing-3xl));
}
.ph-index ol { display: flex; flex-direction: column; gap: var(--spacing-md); }
.ph-index a {
  display: flex; align-items: center; gap: 0.7em;
  font-size: var(--font-size-small); letter-spacing: 0.06em; line-height: 1.5;
  /* 未選択でも読めること。#F4F2ED 地に対して 4.83:1（AA基準 4.5:1 を満たす） */
  color: #656B73; transition: color var(--transition-base);
}
.ph-index .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; opacity: 0.45; transition: opacity var(--transition-base), transform var(--transition-base); }
.ph-index a:hover { color: var(--color-accent-light); }
.ph-index .is-current a { color: var(--color-text-light); }
.ph-index .is-current .dot { background: var(--color-accent); opacity: 1; transform: scale(1.25); }
/* 暗い写真ブロックに重なっている間（JSが付け外しする） */
.ph-index.is-on-dark a { color: rgba(255,255,255,0.60); }
.ph-index.is-on-dark .is-current a { color: #fff; }
.ph-index.is-on-dark .is-current .dot { background: #9CC6E4; }

/* 各ブロック。頭に細い横罫＋小ラベル */
.ph-block { padding-block: var(--spacing-3xl); border-top: 1px solid var(--color-line-dark); }
.ph-block:first-child { border-top: 0; padding-top: var(--spacing-xl); }
.ph-block__label {
  display: flex; align-items: center; gap: 0.7em;
  font-family: var(--font-en-serif); font-size: 12px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--color-accent-light);
  margin-bottom: var(--spacing-md);
}
.ph-block__label .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--color-accent); }
.ph-block__title { font-family: var(--font-jp-serif); font-size: var(--font-size-h3); font-weight: 600; letter-spacing: 0.1em; color: var(--color-text-light); margin-bottom: var(--spacing-xl); }
/* 46em＝736px で従来と同値。他の本文と同じトークンを参照させて基準を1本にする */
.ph-block__body { max-width: var(--measure); }

.philosophy__catch { position: relative; font-family: var(--font-jp-serif); font-size: clamp(26px, 3.6vw, 48px); color: var(--color-text-light); letter-spacing: 0.08em; line-height: 1.75; font-weight: 600; margin-bottom: var(--spacing-xl); }
.philosophy__quote { position: absolute; left: -0.55em; top: 0.12em; font-family: var(--font-en-serif); font-size: 1.9em; line-height: 0.4; color: var(--color-accent); opacity: 0.35; }
/* 大きな文字を両端揃えにすると、余りを埋めるために字間が過剰に開く。
   ディスプレイサイズの文言は行末を揃えず、自然な字間で組む。 */
.philosophy__lead { font-family: var(--font-jp-serif); font-size: clamp(19px, 2.4vw, 30px); color: var(--color-text-light); letter-spacing: 0.06em; line-height: 1.9; margin-bottom: var(--spacing-xl); text-align: start; }

/* ============================================================
   社訓・行動指針：夕暮れの現場写真を全幅で敷いた暗いブロック
   ============================================================ */
/* 左右とも裁ち落とす。.philosophy が overflow:clip なので横スクロールは出ない。
   親で明色に上書きしているトークンを、このブロックだけ暗色側へ戻す。 */
.creed {
  --color-text-light: #fff;
  /* 写真の明るい部分（夕日の周辺）に重なっても読めるよう、暗色面より濃くする */
  --color-text-mute: rgba(255,255,255,0.86);
  --color-line-dark: rgba(255,255,255,0.26);
  --color-accent: #7FB2D6;
  --color-accent-light: #9CC6E4;
  position: relative;
  padding-block: var(--spacing-4xl);
  overflow: hidden;
  background: #0E1116;
}
/* 中身はコンテナ幅。社訓とMission/Visionは目次のレールを避けて右へ寄せ、
   円の列だけは幅が要るのでコンテナいっぱいに使う */
/* 中身は全体を目次のレールの右へ寄せる。左端が揃い、円が目次に重ならない */
.creed__inner {
  width: min(100% - 10vw, var(--container-wide)); margin-inline: auto;
  padding-left: calc(200px + var(--spacing-3xl));
}
/* 写真（z0）→ スクリム（z1）→ 中身（z2）の3層。president__sign と同じ作り */
.creed__bg { position: absolute; inset: -8% 0; z-index: 0; }
.creed__img {
  position: absolute; inset: 0;
  background: url('../images/img-22-creed-bg.jpg') center / cover no-repeat;
}
.creed::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,14,18,0.74) 0%, rgba(11,14,18,0.62) 42%, rgba(11,14,18,0.86) 100%);
}
.creed > *:not(.creed__bg) { position: relative; z-index: 2; }
/* 写真の上なので、スクリムを濃くする代わりに影で可読性を担保する（.partners と同じ考え方） */
.creed__inner { text-shadow: 0 1px 12px rgba(0,0,0,0.55); }

/* 上段：社訓（左）＋ Mission / Vision（右） */
/* 右のMission/Vision/Valueのほうが背が高い。end で揃えると社訓が下に落ちて
   Missionと横並びにならないので、上端で揃える */
/* 1.25:0.75 だと字下げが復活する1201px直後で、社訓の必要幅に対する左カラムの
   余裕が3pxしかなく、丸め誤差だけで折り返す。1.3:0.7 にして20px前後を確保する
   （右のValueも241px確保でき、必要な196pxに対して余裕がある）。 */
.creed__head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--spacing-3xl); align-items: start; }
/* 右のMission/Vision/Valueのほうが背が高い。社訓はその中央に置く */
.creed__motto { align-self: center; }
/* 特大の文字は両端揃えにすると字間が破綻するので、行末を揃えない */
.creed__words {
  font-family: var(--font-jp-serif); font-weight: 600;
  font-size: clamp(30px, 4.4vw, 72px); line-height: 1.35; letter-spacing: 0.1em;
  color: #fff; text-align: start; text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.creed__words .sep { font-size: 0.52em; color: var(--color-accent); padding-inline: 0.12em; vertical-align: 0.14em; }
.creed__mv { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.creed__mv dt { font-family: var(--font-en-disp); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: 0.6em; }
/* 幅が狭く行数も少ないので、両端揃えだと字間が伸びる。行末は揃えない */
.creed__mv dd { color: var(--color-text-mute); font-size: var(--font-size-small); line-height: 2; text-align: start; }

/* 下段：行動指針＝5つの重なり合う円 */
/* 同じ写真ブロックの中の続きなので、セクション間と同じ 128px は空きすぎる */
.creed__conduct { margin-top: var(--spacing-2xl); }
.creed__subtitle { font-family: var(--font-jp-serif); font-size: var(--font-size-h3); font-weight: 600; letter-spacing: 0.1em; color: #fff; margin-bottom: var(--spacing-2xl); }
.creed__circles { display: flex; justify-content: center; }
/* min-height:0 が正円の要。フレックス項目は既定で min-height:auto を持ち、
   中身が要求する高さが aspect-ratio より優先される。そのため縦に伸びて
   border-radius:50% が楕円になり、overflow 未指定なので文字が輪郭の外へ出ていた。
   min-width:0 と対で 0 を指定し、常に幅基準の高さ（＝正円）を採らせる。 */
.creed-circle {
  flex: 1 1 0; aspect-ratio: 1 / 1; min-width: 0; min-height: 0;
  border: 1px solid rgba(255,255,255,0.42); border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center;
}
/* 内側の余白はパディングで取らない。フレックス項目の % パディングは
   自分の幅ではなく親（列全体）の幅を基準にするため、桁違いに大きくなる。
   代わりに中身の幅を円の直径に対する割合で決める */
/* 円は重なっているので、中心間隔（円の直径より狭い）を超える幅にすると
   隣の円の文章とぶつかる。70% が上限の目安。
   64%のままだと最長の本文（信頼・37字）を13px・3行で収めるのに直径264pxが要り、
   901〜1512pxのほぼ全域でその直径は確保できない（1100px付近では172pxしかない）。
   必要直径を下げる側で解決するため広げる。ただし70%ちょうどだと、直径が最小に
   なる1201px付近で文字ブロックの角が円弧の外に0.3pxはみ出すので66%にする
   （66%でも1行10文字入り、最長の本文は4行に収まる）。 */
.creed-circle > * { width: 66%; margin-inline: auto; }
/* 円の中は1行が短いので、語の保護が入ると行末が大きく余り、両端揃えで字間が開く */
.creed-circle .nobr { white-space: normal; }
/* 2つ目以降を食い込ませて輪郭を重ねる。塗りが無いので重なり順の調整は不要 */
.creed-circle + .creed-circle { margin-left: -6%; }
/* キーワードは円の中心軸に合わせて中央に。本文は左端揃え。
   text-align-last を指定しないと、全体に掛かっている start が最終行だけ左に寄せて
   「中央揃えの行と左揃えの行が混ざる」状態になる */
.creed-circle__key {
  font-family: var(--font-jp-serif); font-size: clamp(17px, 1.5vw, 22px);
  /* 0.9em だと中身の総高が円の内接高さを2〜3px超え、
     直径が最小になる1201px付近でキーワードと本文の角が円弧の外に出る */
  font-weight: 600; letter-spacing: 0.16em; color: #fff; margin-bottom: 0.6em;
  text-align: center; text-align-last: center;
}
/* 本文の行数が円ごとに違うと、中央揃えのせいでキーワードの高さがばらつく。
   3行分の高さを確保して5つの円で頭を揃える */
/* 本文は両端揃え。左揃えだと右側が空いて、塊が円の左に寄って見える。
   ただし1行14文字ほどしかないので、文節保護（auto-phrase）を効かせたままだと
   行末が手前で切れ、その余りを埋めるために字間が極端に開く。ここでは外す。 */
.creed-circle__body {
  /* 12px・4行・幅70%で、最長の本文に必要な直径は 171px。
     円が出る全ての幅（901px以上）で実直径が195px以上あるので収まる。 */
  font-size: var(--font-size-label); line-height: 1.95; color: var(--color-text-mute);
  min-height: calc(1.95em * 4);
  text-align: justify; text-align-last: start;
  word-break: normal;
}

/* この段差はナビのドロワー化（1024px）とは無関係。値を揃えたのではない。
   目次レールぶんの字下げ296pxが1024pxまで残ると、1025〜1200pxでは本文が
   922px→627pxへ急落し、社訓が2行に折れ・Valueの5語が2行に折れ・円の直径が
   172pxまで痩せて楕円になる。字下げを外す幅を .container と同じ1200pxに繰り上げる。 */
@media (max-width: 1200px) {
  /* 目次を隠したら、目次ぶんの字下げも必ず戻す */
  .ph-rail { display: none; }
  .ph-body, .creed__inner { padding-left: 0; }
  .creed__head { grid-template-columns: 1fr; gap: var(--spacing-2xl); align-items: start; }
  /* 1カラムになると幅が倍以上になり、指定した改行だと1行目が短く取り残される */
  .creed__mv br { display: none; }
}
@media (max-width: 900px) {
  /* 円を5つ横に並べると1行の文字数が足りなくなる。枠だけ残して縦積みに落とす */
  .creed__circles { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); }
  .creed-circle { aspect-ratio: auto; border-radius: 0; padding: var(--spacing-lg); text-align: start; }
  .creed-circle + .creed-circle { margin-left: 0; }
  .creed-circle > * { width: 100%; margin-inline: 0; }
  .creed-circle__body { min-height: 0; }
}