/* 外構リフォームローンLP 共通CSS（4店舗共用）
   色・文字・余白は assets/css/common.css の正本トークンだけを使う（CLAUDE.md §1・§2）。 */

.loan-page{
  background:var(--paper);
  color:var(--ink-700);
  font-family:var(--font-main);
  font-size:var(--fs-m);
  line-height:1.9;
}
.loan-page *{box-sizing:border-box}
.loan-page img{display:block;max-width:100%;height:auto}
.loan-page a{color:inherit}

.loan-wrap{width:min(92%,1040px);margin:0 auto}
.loan-wrap--narrow{width:min(92%,760px)}

.loan-section{padding:calc(var(--space-xl) * 2) 0}
.loan-section--deep{background:var(--paper-deep)}

.loan-eyebrow{
  margin:0 0 var(--space-s);
  font-family:var(--font-serif);
  font-size:var(--fs-xs);
  letter-spacing:.24em;
  color:var(--accent-strong);
}
.loan-h2{
  margin:0 0 var(--space-m);
  font-family:var(--font-serif);
  font-size:var(--fs-xl);
  font-weight:500;
  line-height:1.5;
  color:var(--ink-900);
}
.loan-lead{margin:0 0 var(--space-l);max-width:42em}

/* ---- ボタン（エリアLPの cta-btn と同じ：枠線のみ・hoverで黒） ---- */
.loan-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(100%,260px);
  padding:14px 22px;
  border:1px solid color-mix(in srgb,var(--ink-900) 30%,transparent);
  border-radius:var(--radius-s,6px);
  background:transparent;
  color:var(--ink-900) !important;
  font-size:var(--fs-s);
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.3;
  text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}
.loan-btn:hover{background:var(--ink-900);border-color:var(--ink-900);color:var(--surface) !important}

/* ---- ヒーロー（写真の上は白文字） ---- */
.loan-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:min(78vh,620px);
  color:var(--surface);
  background:var(--ink-900);
  overflow:hidden;
}
.loan-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loan-hero__shade{
  position:absolute;inset:0;
  background:linear-gradient(0deg,color-mix(in srgb,var(--ink-900) 78%,transparent) 0%,color-mix(in srgb,var(--ink-900) 30%,transparent) 60%,transparent 100%);
}
.loan-hero__body{position:relative;width:min(92%,1040px);margin:0 auto;padding:var(--space-xl) 0 calc(var(--space-xl) * 1.5)}
.loan-hero__label{margin:0 0 var(--space-m);font-size:var(--fs-xs);letter-spacing:.2em}
.loan-hero__title{
  margin:0 0 var(--space-m);
  font-family:var(--font-serif);
  font-size:clamp(28px,5.2vw,var(--fs-xxl));
  font-weight:500;
  line-height:1.5;
  color:var(--surface);
}
.loan-hero__lead{margin:0 0 var(--space-l);max-width:34em;color:var(--surface)}
/* ヒーローCTA：エリアLPの hero-btn と同じ（白の下線＋矢印） */
.loan-hero__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0 0 5px;
  border-bottom:1px solid color-mix(in srgb,var(--surface) 90%,transparent);
  color:var(--surface) !important;
  font-size:var(--fs-s);
  font-weight:500;
  letter-spacing:.14em;
  text-decoration:none;
  transition:opacity .2s,border-color .2s;
}
.loan-hero__cta::after{content:"→";font-size:var(--fs-xs);letter-spacing:0}
.loan-hero__cta:hover{opacity:.82;border-color:color-mix(in srgb,var(--surface) 55%,transparent)}

/* ---- 金利：左に文章・右に表（カードにしない） ---- */
.loan-terms{display:grid;gap:var(--space-xl);grid-template-columns:minmax(0,1fr)}
.loan-rate{width:100%;border-collapse:collapse;border-top:1px solid var(--ink-900)}
.loan-rate th,.loan-rate td{padding:var(--space-m) 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.loan-rate thead th{font-size:var(--fs-xs);color:var(--ink-500);letter-spacing:.12em}
.loan-rate td:last-child,.loan-rate th:last-child{text-align:right}
.loan-rate td:last-child{font-family:var(--font-serif);font-size:var(--fs-l);color:var(--ink-900)}

.loan-example{margin:0}
.loan-example div{display:flex;justify-content:space-between;gap:var(--space-m);padding:var(--space-s) 0;border-bottom:1px solid var(--line)}
.loan-example dt{color:var(--ink-500)}
.loan-example dd{margin:0;color:var(--ink-900)}
.loan-example .is-key dd{font-family:var(--font-serif);font-size:var(--fs-l)}
.loan-sub{margin:var(--space-l) 0 var(--space-s);font-family:var(--font-serif);font-size:var(--fs-l);font-weight:500;color:var(--ink-900)}
.loan-note{margin:var(--space-m) 0 0;font-size:var(--fs-xs);line-height:1.9;color:var(--ink-500)}

@media (min-width:860px){
  .loan-terms{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:calc(var(--space-xl) * 1.5)}
}

/* ---- 進め方：縦の番号つき行（罫線で区切る） ---- */
.loan-flow{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink-900)}
.loan-flow li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:var(--space-m);padding:var(--space-l) 0;border-bottom:1px solid var(--line)}
.loan-flow__num{font-family:var(--font-serif);font-size:var(--fs-xl);line-height:1.2;color:var(--accent-strong)}
.loan-flow h3{margin:0 0 var(--space-s);font-family:var(--font-serif);font-size:var(--fs-l);font-weight:500;color:var(--ink-900)}
.loan-flow p{margin:0}

/* ---- 工事の順番：写真を大きく＋文章（左右交互ではなく写真帯） ---- */
.loan-photos{display:grid;gap:var(--space-s);grid-template-columns:1fr 1fr;margin:var(--space-l) 0}
.loan-photos figure{margin:0}
.loan-photos a{display:block}
.loan-photos figure:first-child{grid-column:1 / -1}
.loan-photos img{width:100%;aspect-ratio:3 / 2;object-fit:cover}
.loan-photos figure:first-child img{aspect-ratio:16 / 7}
.loan-photos figcaption{margin-top:var(--space-s);font-size:var(--fs-xs);color:var(--ink-500)}
.loan-items{margin:0;padding:0;list-style:none;columns:1}
.loan-items li{padding:var(--space-s) 0;border-top:1px solid var(--line)}
@media (min-width:700px){.loan-items{columns:2;column-gap:var(--space-xl)}}

/* ---- 店舗情報：2列の定義リスト ---- */
.loan-shop{margin:0;border-top:1px solid var(--ink-900)}
.loan-shop div{display:grid;grid-template-columns:7em minmax(0,1fr);gap:var(--space-m);padding:var(--space-m) 0;border-bottom:1px solid var(--line)}
.loan-shop dt{color:var(--ink-500);font-size:var(--fs-s)}
.loan-shop dd{margin:0}
.loan-links{margin:var(--space-l) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-m) var(--space-l)}
.loan-links a{color:var(--ink-900);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.loan-links a:hover{text-decoration-color:var(--accent-strong)}

/* ---- FAQ ---- */
.loan-faq{border-top:1px solid var(--ink-900)}
.loan-faq details{border-bottom:1px solid var(--line)}
.loan-faq summary{position:relative;padding:var(--space-m) var(--space-xl) var(--space-m) 0;cursor:pointer;list-style:none;color:var(--ink-900)}
.loan-faq summary::-webkit-details-marker{display:none}
.loan-faq summary::after{content:"+";position:absolute;right:var(--space-s);top:var(--space-m);font-family:var(--font-serif);color:var(--accent-strong)}
.loan-faq details[open] summary::after{content:"−"}
.loan-faq p{margin:0 0 var(--space-m)}

/* ---- 問い合わせ帯 ---- */
.loan-contact{padding:calc(var(--space-xl) * 1.5) 0;background:linear-gradient(180deg,var(--surface) 0%,var(--paper) 100%);color:var(--ink-700);text-align:center}
.loan-contact p{margin:0 0 var(--space-m)}
.loan-contact__tel{display:block;margin:var(--space-l) 0 var(--space-s);font-family:var(--font-serif);font-size:var(--fs-xl);letter-spacing:.06em;color:var(--ink-900);text-decoration:none}
.loan-contact__hours{font-size:var(--fs-s)}

/* ---- 注意書き・店舗リンク ---- */
.loan-legal{padding:var(--space-l) 0;border-top:1px solid var(--line)}
.loan-legal p{margin:0;font-size:var(--fs-xs);line-height:1.9;color:var(--ink-500)}

@media (max-width:600px){
  .loan-section{padding:var(--space-xl) 0}
  .loan-shop div{grid-template-columns:1fr;gap:0}
}