/* ---------- subpage (reform / repair) 専用スタイル ----------
   styles.css を読み込んだ上で使う追加分。トップページには影響しない。 */

/* header */
.p-header{ background: var(--navy); border-bottom: 1px solid var(--line-on-dark); }
.p-header-inner{ display:flex; align-items:center; justify-content:space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.p-header .logo-en{ font-family: var(--serif-en); font-size: 16px; letter-spacing: 0.24em; color: var(--gold); }
.p-header .logo-jp{ font-family: var(--serif-jp); font-size: 12px; letter-spacing: 0.4em; color: var(--paper); margin-top: 2px; }
.p-nav{ display:flex; align-items:center; gap: 28px; font-size: 12px; letter-spacing: 0.18em; color: var(--paper); }
.p-nav a{ transition: color .25s ease; }
.p-nav a:hover{ color: var(--gold); }
.p-tel{ display:inline-flex; align-items:center; gap: 8px; font-family: var(--serif-en); font-size: 15px; letter-spacing: 0.08em; color: var(--paper); border: 1px solid var(--line-on-dark); padding: 8px 16px; }
.p-tel svg{ width: 14px; color: var(--gold); }
.p-tel:hover{ border-color: var(--gold); color: var(--gold); }

/* hero */
.p-hero{
  background:
    radial-gradient(ellipse at 20% 0%, rgba(201,168,76,0.10), transparent 55%),
    var(--navy);
  color: var(--paper);
  padding: 64px 0 72px;
}
.p-crumb{ display:flex; flex-wrap:wrap; gap: 10px; font-size: 11px; letter-spacing: 0.14em; color: rgba(250,250,248,0.5); margin-bottom: 36px; }
.p-crumb a{ color: var(--gold-soft); transition: color .25s ease; }
.p-crumb a:hover{ color: var(--gold); }
.p-hero h1{
  margin: 14px 0 0;
  font-family: var(--serif-jp); font-weight: 400;
  font-size: clamp(30px, 5.4vw, 50px);
  letter-spacing: 0.06em; line-height: 1.5;
}
.p-hero h1 .accent{ color: var(--gold); }
.p-hero-lead{ margin: 22px 0 0; max-width: 780px; color: rgba(250,250,248,0.72); font-size: 14px; line-height: 2.1; }
.p-hero .hero-license{ margin-top: 32px; }

/* works (simple grid) */
.p-works{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.p-work img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-work .work-cat{ margin-top: 16px; }
.p-work h3{ margin: 6px 0 0; font-family: var(--serif-jp); font-size: 16px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink); }
.p-work p{ margin: 8px 0 0; font-size: 13px; line-height: 1.9; color: var(--muted); }

/* faq */
.faq-list{ margin-top: 48px; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
  cursor: pointer; list-style: none;
  display: flex; gap: 16px; align-items: baseline;
  padding: 24px 4px;
  font-family: var(--serif-jp); font-size: 16px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::before{ content: "Q."; font-family: var(--serif-en); color: var(--gold); flex-shrink: 0; }
.faq-a{ display: flex; gap: 16px; padding: 0 4px 26px; }
.faq-a::before{ content: "A."; font-family: var(--serif-en); color: var(--muted); flex-shrink: 0; }
.faq-a p{ margin: 0; font-size: 14px; line-height: 2; color: var(--muted); }

/* misc */
.p-back{ margin-top: 40px; text-align: center; }

@media (max-width: 900px){
  .p-nav{ display: none; }
  .p-works{ grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 560px){
  .p-works{ grid-template-columns: 1fr; }
  .p-hero{ padding: 48px 0 56px; }
  .p-header .logo-en{ font-size: 13px; letter-spacing: 0.18em; }
  .p-header .logo-jp{ font-size: 11px; letter-spacing: 0.3em; }
  .p-tel{ font-size: 13px; padding: 6px 12px; white-space: nowrap; }
  .p-tel svg{ width: 12px; }
}