/* TOKIWA – works-detail */
/* ===== 施工実績詳細 page ===== */
.w-intro{ text-align:center; }
.w-intro .en{ font-family:var(--f-en); font-style:italic; font-size:14px; letter-spacing:.3em; color:var(--c-gold); }
.w-intro h2{ margin-top:26px; font-weight:300; font-size:clamp(20px,2.8vw,30px); letter-spacing:.26em; line-height:2.2; }
.w-intro p{ max-width:620px; margin:32px auto 0; color:var(--c-ink-soft); text-align:left; }
@media (min-width:721px){ .w-intro p{ text-align:center; } }

/* フルブリード写真：横幅いっぱい */
.g-full{ padding:0; }
.g-full .ph{ height:clamp(420px,86vh,820px); }

/* 2枚オフセット */
.g-duo{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(18px,2.6vw,36px); padding:clamp(56px,8vw,120px) var(--pad-x); align-items:start; }
.g-duo figure:nth-child(1){ grid-column:1 / span 7; }
.g-duo figure:nth-child(1) .ph{ aspect-ratio:4/3; }
.g-duo figure:nth-child(2){ grid-column:8 / span 5; margin-top:clamp(48px,9vw,140px); }
.g-duo figure:nth-child(2) .ph{ aspect-ratio:3/4; }
.g-duo figcaption{ padding-top:14px; font-size:11.5px; letter-spacing:.2em; color:var(--c-ink-soft); }

/* 設計ポイント：写真は画面端まで、テキストはinner */
.point{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:center; }
.point + .point{ margin-top:clamp(64px,9vw,128px); }
.point .ph{ grid-column:1 / span 7; height:clamp(320px,52vw,620px); }
.point-body{ grid-column:8 / span 4; padding-right:var(--pad-x); padding-left:clamp(32px,4.5vw,80px); }
.point--rev .ph{ grid-column:6 / span 7; grid-row:1; }
.point--rev .point-body{ grid-column:2 / span 4; grid-row:1; padding-right:clamp(32px,4.5vw,80px); padding-left:var(--pad-x); }
.point-body em{ display:block; font-family:var(--f-en); font-style:italic; font-size:14px; letter-spacing:.22em; color:var(--c-gold); }
.point-body h3{ margin-top:12px; font-weight:300; font-size:clamp(18px,2vw,22px); letter-spacing:.2em; line-height:1.9; }
.point-body p{ margin-top:18px; font-size:13px; color:var(--c-ink-soft); }

/* 建築概要 */
.data-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,88px); align-items:start; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th, .data-table td{ padding:16px 6px; border-bottom:1px solid var(--c-line); text-align:left; vertical-align:top; font-weight:300; }
.data-table th{ width:34%; font-size:12px; letter-spacing:.24em; color:var(--c-gold); white-space:nowrap; }
.data-table td{ font-size:13.5px; letter-spacing:.1em; }
.data-photo .ph{ aspect-ratio:4/3; }

/* お客様の声（引用） */
.w-voice{ background:var(--c-beige); }
.w-voice blockquote{ margin:0 auto; max-width:760px; text-align:center; }
.w-voice .qmark{ font-family:var(--f-en); font-size:64px; line-height:1; color:var(--c-gold); }
.w-voice p{ margin-top:8px; font-size:clamp(14.5px,1.6vw,16.5px); letter-spacing:.14em; line-height:2.4; }
.w-voice footer{ margin-top:28px; font-size:12px; letter-spacing:.26em; color:var(--c-ink-soft); }

/* 関連施工事例 */
.rel-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px); }
.rel-card .ph{ aspect-ratio:4/3; }
.rel-card h3{ margin-top:14px; font-weight:400; font-size:14px; letter-spacing:.14em; }
.rel-card span{ font-family:var(--f-en); font-size:11.5px; letter-spacing:.18em; color:var(--c-gold); }
.back-link{ margin-top:clamp(52px,6vw,72px); text-align:center; }

@media (max-width:720px){
  .g-duo figure:nth-child(1){ grid-column:1 / -1; }
  .g-duo figure:nth-child(2){ grid-column:2 / -1; margin-top:0; }
  .point, .point--rev{ display:block; }
  .point .ph{ height:64vw; }
  .point-body, .point--rev .point-body{ padding:28px var(--pad-x) 0; }
  .data-grid{ grid-template-columns:1fr; }
  .rel-grid{ grid-template-columns:1fr; }
}