/* 一列。写真は本文と同じ幅で縦に積む。数値はゴシック＋等幅数字で、指示書のように読ませる */
:root{
  --paper:#f7f5f1;
  --ink:#2a2724;
  --muted:#857f76;
  --rule:#e3ded6;
  --sage:#6b7a6a;
  --mincho:"Shippori Mincho",serif;
  --goth:"Zen Kaku Gothic New",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1a1917; --ink:#e9e5de; --muted:#9a938a; --rule:#34302b; --sage:#93a391;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#1a1917; --ink:#e9e5de; --muted:#9a938a; --rule:#34302b; --sage:#93a391;
  color-scheme:dark;
}

body{
  background:var(--paper); color:var(--ink);
  font-family:var(--mincho);
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0;
  -webkit-font-smoothing:antialiased;
}
.col{max-width:640px;margin:0 auto}

/* 校正用の枠。本番には出ない */
.proof{
  font-family:var(--goth); font-size:13px; line-height:1.9; color:var(--muted);
  border-bottom:1px solid var(--rule);
  padding-block:28px 24px; margin-bottom:8px;
}
.proof b{color:var(--ink);font-weight:500}
.seam{
  display:flex;align-items:center;gap:14px;
  font-family:var(--goth);font-size:11px;letter-spacing:.14em;color:var(--muted);
  margin-block:84px 0;
}
.seam::before,.seam::after{content:"";flex:1;height:1px;background:var(--rule)}

/* 1件 */
.case{padding-block:56px 0;display:flex;flex-direction:column;gap:40px}
.head{display:flex;flex-direction:column;gap:14px}
.eyebrow{
  font-family:var(--goth);font-size:11px;font-weight:500;
  letter-spacing:.18em;color:var(--sage);
  display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;
}
.eyebrow .num{font-variant-numeric:tabular-nums}
.eyebrow .base{color:var(--muted);letter-spacing:.1em}
h1{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(26px,6vw,34px);line-height:1.5;letter-spacing:.04em;
  margin:0;text-wrap:balance;
}

.shots{display:flex;flex-direction:column;gap:14px}
.shots img{display:block;width:100%;max-width:100%;height:auto}
figure{margin:0;display:flex;flex-direction:column;gap:9px}
figcaption{
  font-family:var(--goth);font-size:12px;line-height:1.7;color:var(--muted);
}

.body{display:flex;flex-direction:column;gap:1.5em}
.body p{
  margin:0;font-size:16.5px;line-height:2.15;letter-spacing:.03em;
}

/* スペック */
.spec{display:flex;flex-direction:column;gap:0;font-family:var(--goth)}
.spec h2{
  font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--sage);
  margin:0 0 14px;
}
.row{
  display:grid;grid-template-columns:5.5em 1fr;gap:4px 16px;
  padding-block:11px;border-top:1px solid var(--rule);
  font-size:14px;line-height:1.7;
}
.row:last-child{border-bottom:1px solid var(--rule)}
.row dt{color:var(--muted);font-size:12.5px;padding-top:.15em}
.row dd{margin:0;font-variant-numeric:tabular-nums}
/* 2本ある事例 */
.row.two{grid-template-columns:5.5em 1fr 1fr}
.pair-head{
  display:grid;grid-template-columns:5.5em 1fr 1fr;gap:16px;
  font-size:11px;letter-spacing:.1em;color:var(--sage);padding-bottom:9px;
}
.row dd.na{color:var(--muted)}
.row dd.wide{grid-column:2/4}
.row dd .from{display:block;font-size:11.5px;line-height:1.5;color:var(--muted);letter-spacing:.02em;margin-top:3px}
@media (max-width:430px){
  .row,.row.two,.pair-head{grid-template-columns:4.6em 1fr 1fr}
  .row{font-size:13.5px}
}

.tail{
  display:flex;flex-direction:column;gap:10px;
  font-family:var(--goth);font-size:13px;line-height:1.8;
}
.tail a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;align-self:flex-start}
.tail a:hover{border-bottom-color:var(--sage)}
.tail a:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

/* 末尾の貸し出し */
.rental{
  margin-top:8px;border-top:1px solid var(--rule);
  padding-block:34px 0;
  display:flex;flex-direction:column;gap:12px;
}
.rental h2{font-family:var(--mincho);font-weight:600;font-size:19px;margin:0;letter-spacing:.04em}
.rental p{margin:0;font-family:var(--goth);font-size:13.5px;line-height:1.95;color:var(--muted)}
.rental a{
  align-self:flex-start;margin-top:6px;
  font-family:var(--goth);font-size:13px;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--rule);border-radius:1px;
  padding:13px 26px;
}
.rental a:hover{border-color:var(--sage);color:var(--sage)}
.rental a:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

.end{padding-block:90px}

/* ───────────── ここから本番用に追加 ───────────── */

/* 仮ページ用の校正枠と区切りは本番では使いません */
.proof,.seam{display:none}

body{padding-block:0}
main.col{padding-block:0}

/* ページ送り */
.pager{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;
  font-family:var(--goth);font-size:13px;line-height:1.6;
  margin-block:72px 0;padding-top:26px;border-top:1px solid var(--rule);
}
.pager a,.pager span{min-width:0}
.pager a{color:var(--ink);text-decoration:none;display:block}
.pager a span{display:block;font-size:11px;letter-spacing:.12em;color:var(--muted);margin-bottom:5px}
.pager .next{text-align:right}
.pager a:hover{color:var(--sage)}
.pager a:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.pager .index{
  grid-column:1/3;order:-1;
  text-align:center;letter-spacing:.08em;
  border:1px solid var(--rule);border-radius:1px;padding:13px 0;margin-bottom:12px;
}
.pager .index:hover{border-color:var(--sage)}

/* 一覧ページ */
.list-head{padding-block:56px 0;display:flex;flex-direction:column;gap:1.4em}
.list-head h1{
  font-family:var(--mincho);font-weight:600;
  font-size:clamp(26px,6vw,34px);line-height:1.5;letter-spacing:.06em;margin:0;
}
.list-head p{margin:0;font-size:16px;line-height:2.1;letter-spacing:.03em}
.list-head p:first-of-type{font-size:17.5px;letter-spacing:.05em}
.list-head strong{font-weight:600}

.group{padding-block:64px 0}
.group-head{margin-bottom:28px;display:flex;flex-direction:column;gap:9px}
.group-head h2{
  font-family:var(--goth);font-size:11px;font-weight:500;
  letter-spacing:.18em;color:var(--sage);margin:0;
}
.group-head p{margin:0;font-family:var(--goth);font-size:13px;line-height:1.85;color:var(--muted)}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:34px 18px}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
/* 題が2行になっても、隣のカードと行がずれないように揃える */
@supports (grid-template-rows:subgrid){
  .card{display:grid;grid-template-rows:subgrid;grid-row:span 4;gap:0}
}
.card img{display:block;width:100%;height:auto;margin-bottom:13px}
.card-base{
  font-family:var(--goth);font-size:10.5px;letter-spacing:.1em;
  color:var(--muted);margin-bottom:6px;
}
.card-title{
  font-family:var(--mincho);font-weight:600;font-size:16.5px;line-height:1.6;
  letter-spacing:.04em;margin-bottom:7px;text-wrap:balance;line-break:strict;
}
.card-lead{
  font-family:var(--goth);font-size:12px;line-height:1.75;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.card:hover .card-title{color:var(--sage)}
.card:focus-visible{outline:2px solid var(--sage);outline-offset:4px}

.rental{margin-top:76px}

@media (max-width:430px){
  .cards{gap:30px 14px}
  .card-title{font-size:15.5px}
  .card-lead{font-size:11.5px}
  .pager{font-size:12.5px}
}


/* ───────────── LPのヘッダー/フッターを載せるための調整 ───────────── */
/* body の左右余白は main に移し、ヘッダー/フッターをLPと同じ幅にする */
body{padding-left:0;padding-right:0}
main.col{
  width:min(640px,calc(100% - 2 * max(16px,env(safe-area-inset-left,0px))));
  max-width:none;margin-inline:auto;line-height:normal;
}
/* LP側の見た目(フォント・行間・色)を、この頁の body 設定から切り離す */
.page{
  background:transparent;color:var(--text);
  font-family:var(--font-sans);line-height:1.9;
  --muted:#5B5A55;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .page{--text:#E9E4DC;--muted:#ADA59B;--btn:#E9E4DC}
  :root:not([data-theme="light"]) .site-header .logo img,
  :root:not([data-theme="light"]) .footer-logo{filter:invert(1)}
}
:root[data-theme="dark"] .page{--text:#E9E4DC;--muted:#ADA59B;--btn:#E9E4DC}
:root[data-theme="dark"] .site-header .logo img,
:root[data-theme="dark"] .footer-logo{filter:invert(1)}