/* ============================================================
   @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: 640px; }
.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); }

/* 汎用の本文リード＋見出し（暗色上） */
.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 { position: sticky; top: calc(var(--header-h) + var(--spacing-lg)); }
.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; }
.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); }
.flow__item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-en-disp); font-size: 13px; letter-spacing: 0.2em; color: var(--color-accent-light);
}
.flow__icon { width: 44px; height: 44px; margin: var(--spacing-sm) 0; stroke: var(--color-blueprint); fill: none; stroke-width: 1.5; }
.flow__name { font-family: var(--font-jp-serif); font-size: var(--font-size-body); color:#fff; }
.flow__desc { font-size: var(--font-size-small); color: var(--color-text-mute); margin-top: 0.4em; }

.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; }
.work-card__term { 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 { aspect-ratio: 4/3; width: 100%; object-fit: cover; display: block; margin-bottom: 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; }

/* ============================================================
   協力会社募集：メリット＋求める人物像
   ============================================================ */
.merit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 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: 760px; 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; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .works-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .president__grid, .work-detail__grid { grid-template-columns: 1fr; gap: var(--spacing-2xl); }
  .president__portrait { position: static; }
  .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) {
  .flow, .works-grid, .form__type { grid-template-columns: 1fr; }
  .company-table th { width: 120px; }
  .form__confirm div { grid-template-columns: 110px 1fr; }
  .form__steps li { font-size: 10px; }
}