:root{
  --ink:#1c1c1a; --mute:#6b6b66; --line:#dcdcd6; --bg:#faf9f6; --panel:#fff;
  --accent:#2f4a3f; --accent2:#b4653a; --band:#eceae3;
  --f-min: "Hiragino Mincho ProN","Yu Mincho",serif;
  --f-san: "Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-san);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
/* skeleton banner */
.skel{background:var(--accent);color:#fff;font-size:12px;letter-spacing:.06em;padding:7px 0}
.skel a{color:#fff}
.skel .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.skel b{font-weight:700}
.skel .sp{margin-left:auto;opacity:.85}
/* header */
header.site{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{font-family:var(--f-min);font-size:20px;letter-spacing:.16em;line-height:1.1;text-decoration:none;white-space:nowrap}
.logo small{display:block;font-size:9px;letter-spacing:.22em;color:var(--mute);font-family:var(--f-san)}
nav.main{display:flex;gap:20px;font-size:12.5px;letter-spacing:.09em;flex-wrap:wrap}
nav.main a{text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-bottom-color:var(--accent)}
.btn{display:inline-block;border:1px solid var(--accent);color:var(--accent);background:none;padding:9px 16px;font-size:12px;letter-spacing:.08em;text-decoration:none;cursor:pointer}
.btn--fill{background:var(--accent);color:#fff}
.btn--sm{padding:6px 12px;font-size:11px}
header.site .btn{margin-left:auto}
/* photo placeholder */
.ph{position:relative;background:repeating-linear-gradient(45deg,#e8e6df,#e8e6df 8px,#eeece6 8px,#eeece6 16px);border:1px dashed #b9b7ae;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;color:#5d5b54;font-size:12px;line-height:1.6}
.ph--hero{min-height:420px}
.ph--card{min-height:170px}
.ph--wide{min-height:260px}
.ph b{display:block;font-size:11px;letter-spacing:.08em;color:var(--accent2);margin-bottom:4px}
/* hero */
.hero{position:relative;margin-bottom:8px}
.hero__copy{padding:52px 0 28px}
.hero h1{font-family:var(--f-min);font-size:clamp(34px,5.4vw,60px);line-height:1.14;margin:0 0 14px;font-weight:400}
.hero p.sub{margin:0 0 22px;color:var(--mute);font-size:15px}
/* sections */
section{padding:46px 0;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}
.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--accent2);margin:0 0 8px}
h2.sec{font-family:var(--f-min);font-size:clamp(22px,2.8vw,32px);margin:0 0 6px;font-weight:400}
.lead{color:var(--mute);margin:0 0 22px;font-size:14.5px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none}
.card__b{padding:15px 16px 18px}
.card h3{font-family:var(--f-min);font-size:17px;margin:0 0 6px;font-weight:400}
.card p{margin:0 0 10px;font-size:13px;color:var(--mute)}
.meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--mute);letter-spacing:.04em}
.badge{display:inline-block;font-size:10.5px;letter-spacing:.06em;padding:3px 8px;border:1px solid var(--line);background:var(--band);color:var(--ink)}
.badge--book{border-color:var(--accent);color:var(--accent)}
.badge--enq{border-color:var(--accent2);color:var(--accent2)}
.badge--chk{border-color:#c8a24a;color:#8a6d1f;background:#fdf8ea}
/* finder */
.finder{background:var(--panel);border:1px solid var(--line);padding:18px}
.finder .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.finder label{font-size:11px;letter-spacing:.1em;color:var(--accent);min-width:96px}
.finder .opt{border:1px solid var(--line);padding:6px 12px;font-size:12px;background:#fff;color:var(--mute)}
/* note */
.why{border-left:3px solid var(--accent);background:#f2f1ec;padding:10px 14px;font-size:12.5px;color:#43433f;margin:14px 0 0}
.why b{color:var(--accent)}
.band{background:var(--band)}
table.t{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.t th,table.t td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
table.t th{background:var(--band);font-weight:600;font-size:12px}
footer.site{border-top:1px solid var(--line);padding:34px 0 60px;font-size:12px;color:var(--mute);background:var(--panel)}
footer.site .wrap{display:flex;gap:26px;flex-wrap:wrap}
.stack>*+*{margin-top:14px}
@media(max-width:760px){header.site .wrap{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}nav.main{order:3;width:100%}header.site .btn{margin-left:0}}

/* --- 印刷（A4）。M-4 対応 --- */
@page{size:A4;margin:14mm 12mm}
@media print{
  body{background:#fff;font-size:10.5pt}
  .skel{display:none}
  header.site{position:static;border-bottom:1px solid #000}
  header.site .btn{display:none}
  nav.main{font-size:9pt}
  section{padding:16px 0;break-inside:auto}
  .wrap{max-width:none;padding:0}
  .hero__copy{padding:18px 0 12px}
  .hero h1{font-size:24pt}
  h2.sec{font-size:15pt;break-after:avoid}
  h3,h4{break-after:avoid}
  .ph{min-height:0!important;padding:10px;background:#f3f3f0}
  .ph--hero{min-height:70mm!important}
  .ph--wide{min-height:40mm!important}
  .ph--card{min-height:26mm!important}
  .card,.finder,.why{break-inside:avoid}
  table.t{font-size:9pt;break-inside:auto}
  table.t th,table.t td{padding:5px 6px}
  table.t tr{break-inside:avoid}
  .grid{gap:10px}
  a{text-decoration:none}
  footer.site{padding:16px 0 0}
}
/* --- 狭い画面での表の横スクロール --- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:560px){
  table.t{font-size:12px}
  table.t th,table.t td{padding:6px 7px}
  .hero h1{font-size:30px}
  section{padding:30px 0}
}