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

/* 特徴：横幅いっぱいの写真＋重なるテキストカード */
.feat{ position:relative; }
.feat + .feat{ margin-top:clamp(64px,9vw,128px); }
.feat .ph{ width:88%; height:clamp(360px,58vw,680px); }
.feat--rev .ph{ margin-left:auto; }
.feat-card{
  position:relative; z-index:2;
  width:min(560px, 92%);
  margin:clamp(-72px,-8vw,-110px) 0 0 auto;
  background:var(--c-base); padding:clamp(30px,4vw,52px);
}
.feat--rev .feat-card{ margin-left:0; margin-right:auto; }
.feat-card em{ display:block; font-family:var(--f-en); font-style:italic; font-size:14px; letter-spacing:.22em; color:var(--c-gold); }
.feat-card h3{ margin-top:12px; font-weight:300; font-size:clamp(18px,2vw,22px); letter-spacing:.2em; line-height:1.9; }
.feat-card p{ margin-top:16px; font-size:13px; color:var(--c-ink-soft); }

/* 標準仕様 */
.spec-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--c-line); border:1px solid var(--c-line); }
.spec-list li{ background:var(--c-base); padding:clamp(24px,3vw,38px); }
.spec-list em{ display:block; font-family:var(--f-en); font-style:italic; font-size:12px; letter-spacing:.22em; color:var(--c-gold); }
.spec-list h3{ margin-top:8px; font-weight:400; font-size:14.5px; letter-spacing:.16em; }
.spec-list p{ margin-top:10px; font-size:12.5px; color:var(--c-ink-soft); line-height:1.9; }

/* ギャラリー：横幅いっぱい3枚流し */
.pd-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.2vw,18px); padding:0; }
.pd-gallery .ph{ height:clamp(240px,38vw,520px); }
.pd-gallery .ph:nth-child(2){ margin-top:clamp(28px,4vw,64px); }

/* 間取りイメージ */
.plan-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(36px,6vw,88px); align-items:center; }
.plan-frame{
  aspect-ratio:4/3; border:1px solid var(--c-line); background:var(--c-ivory);
  display:grid; place-items:center; text-align:center;
}
.plan-frame span{ font-family:var(--f-en); font-style:italic; font-size:18px; letter-spacing:.24em; color:var(--c-gold); }
.plan-frame small{ display:block; margin-top:10px; font-size:11px; letter-spacing:.2em; color:var(--c-ink-soft); }
.plan-list li{ display:flex; gap:18px; padding:16px 4px; border-bottom:1px solid var(--c-line); font-size:13px; }
.plan-list li:first-child{ border-top:1px solid var(--c-line); }
.plan-list b{ font-weight:400; white-space:nowrap; letter-spacing:.14em; }
.plan-list span{ color:var(--c-ink-soft); }

/* おすすめポイント */
.reco{ counter-reset:reco; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px); }
.reco li{ counter-increment:reco; }
.reco li::before{
  content:"0" counter(reco);
  font-family:var(--f-en); font-style:italic; font-size:30px; letter-spacing:.1em; color:var(--c-gold-pale);
}
.reco h3{ margin-top:10px; font-weight:400; font-size:15px; letter-spacing:.16em; }
.reco p{ margin-top:10px; font-size:12.5px; color:var(--c-ink-soft); line-height:1.9; }

/* FAQ（アコーディオン） */
.faq{ max-width:var(--w-narrow); margin-inline:auto; }
.faq details{ border-bottom:1px solid var(--c-line); }
.faq details:first-of-type{ border-top:1px solid var(--c-line); }
.faq summary{
  display:flex; align-items:baseline; gap:20px; padding:24px 8px;
  cursor:pointer; list-style:none; font-size:14px; letter-spacing:.12em;
  transition:opacity .4s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ opacity:.6; }
.faq summary::before{ content:"Q"; font-family:var(--f-en); font-style:italic; font-size:19px; color:var(--c-gold); }
.faq summary::after{ content:"＋"; margin-left:auto; color:var(--c-gold); font-weight:300; transition:transform .4s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ display:flex; gap:20px; padding:0 8px 26px; font-size:13px; color:var(--c-ink-soft); }
.faq .a::before{ content:"A"; font-family:var(--f-en); font-style:italic; font-size:19px; color:var(--c-ink); line-height:1.6; }

@media (max-width:960px){
  .spec-list{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reco{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .feat .ph{ width:100%; }
  .feat-card, .feat--rev .feat-card{ width:calc(100% - var(--pad-x)); margin:-46px auto 0; }
  .spec-list{ grid-template-columns:1fr; }
  .pd-gallery{ grid-template-columns:1fr; }
  .pd-gallery .ph{ height:62vw; }
  .pd-gallery .ph:nth-child(2){ margin-top:0; }
  .plan-grid{ grid-template-columns:1fr; }
}