@font-face { font-family:'Noto Sans JP'; src:local('Noto Sans JP'),url('/assets/NotoSansJP-VF.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'Noto Serif JP'; src:local('Noto Serif JP'),url('/assets/NotoSerifJP-VF.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
:root { --paper:#f5f4ee; --ink:#203e35; --accent:#b9cba6; --muted:#53685c; }
* { box-sizing:border-box; }
html { color:var(--ink); background:var(--paper); scroll-behavior:auto; }
body { margin:0; font-family:'Noto Sans JP','Yu Gothic',Meiryo,sans-serif; font-size:17px; line-height:1.7; overflow-wrap:anywhere; }
h1,h2,h3,.brand,.numbers { font-family:'Noto Serif JP','Yu Mincho',serif; font-weight:400; }
h1,h2,h3,p,figure { margin:0; }
h1 { font-size:clamp(30px,2.55vw,48px); line-height:1.6; }
h2 { font-size:clamp(26px,2vw,36px); line-height:1.55; margin-bottom:24px; }
h3 { font-size:28px; line-height:1.55; margin-bottom:16px; }
p+p { margin-top:16px; }
a { color:inherit; text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--ink); outline-offset:3px; box-shadow:0 0 0 6px white; }
.hero-panel a:focus-visible { outline-color:white; box-shadow:0 0 0 6px var(--ink); }
.skip-link { position:absolute; top:0; left:16px; padding:12px; background:white; transform:translateY(-120%); z-index:2; }
.skip-link:focus { transform:none; }
.site-header { background:white; min-height:112px; padding:24px 4.17%; display:flex; align-items:center; gap:32px; }
.brand { font-size:36px; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.tagline { margin-left:auto; font-size:16px; }
.site-header nav a { display:inline-flex; min-height:44px; align-items:center; text-decoration:none; font-size:16px; }
.hero { display:grid; grid-template-columns:62.5% 37.5%; }
.hero-photo { width:100%; height:700px; object-fit:cover; }
.hero-panel { padding:66px 9% 48px; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:28px; }
.hero-panel .eyebrow { color:var(--accent); }
.hero-panel h1 { font-size:clamp(32px,2.5vw,48px); }
.hero-panel .summary { font-size:22px; }
.disclosure { font-size:17px; }
.button { display:inline-flex; justify-content:center; align-items:center; text-align:center; min-height:56px; padding:12px 24px; background:var(--accent); color:var(--ink); text-decoration:none; border-radius:2px; font-weight:500; }
.hero-panel .button { width:100%; }
.caption { font-size:14px; color:var(--muted); padding:20px 4.17%; }
.container { max-width:1440px; width:calc(100% - 80px); margin:0 auto; }
.top-reading { padding:48px 0; }
.article-link { display:block; padding:24px 0; border-top:1px solid #bdc6b8; }
.article-link h3 { margin-bottom:8px; }
.policy { padding:40px; background:white; margin:16px 0 64px; }
.policy p { max-width:85ch; }
.article { padding-top:32px; padding-bottom:64px; }
.breadcrumb { font-size:14px; margin-bottom:40px; }
.article-heading h1 { max-width:850px; margin-bottom:24px; }
.article-heading .subtitle { font-size:22px; margin-bottom:24px; }
.meta { color:var(--muted); font-size:16px; }
.toc { display:flex; gap:24px; margin:30px 0 32px; }
.toc a { min-width:200px; }
.article-intro { display:grid; grid-template-columns:600px 1fr; gap:48px; margin-bottom:40px; align-items:start; }
.article-intro img { width:100%; height:360px; object-fit:cover; }
.article-intro .caption { padding:16px 0 0; }
.article-intro h2 { margin:0 0 24px; }
.spec-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.spec-card { background:white; border:1px solid #c4cbbf; padding:24px; }
.numbers { font-size:36px; margin:20px 0 8px; }
.spec-card dl { margin:0; }
.spec-card dt { font-weight:600; margin-top:20px; }
.spec-card dd { margin:8px 0 0; }
.note { margin:24px 0 36px; }
.diagrams { margin:36px 0; scroll-margin-top:24px; }
.diagrams h2 { margin-bottom:16px; }
.diagrams .caption { padding:0 0 16px; }
.elevations,.plans { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:24px 0; }
.elevation,.plan-card { background:white; border:1px solid #c4cbbf; padding:24px; }
.elevation-sku { font-family:'Noto Serif JP','Yu Mincho',serif; font-size:22px; text-align:center; margin-bottom:8px; }
.elevation-body { --pxcm:6; width:104px; margin:16px auto 12px; border:1px solid var(--ink); background:white; }
.drawer { height:calc(var(--h) * var(--pxcm) * 1px); display:flex; align-items:center; justify-content:center; font-size:14px; border-bottom:1px solid var(--ink); text-align:center; }
.drawer:last-child { border-bottom:0; }
.drawer-s { background:white; color:var(--ink); }
.drawer-m { background:var(--accent); color:var(--ink); }
.drawer-l { background:var(--ink); color:#fff; }
.drawer-body { background:white; color:var(--muted); font-size:12px; }
.plan-frame { --pxcm:8; --outer-w:17; --outer-d:45; width:calc(var(--outer-w) * var(--pxcm) * 1px); height:calc(var(--outer-d) * var(--pxcm) * 1px); margin:16px auto; border:2px solid var(--ink); display:flex; align-items:center; justify-content:center; background:#fff; }
.plan-max { width:calc(var(--wmax) * var(--pxcm) * 1px); height:calc(var(--depth) * var(--pxcm) * 1px); border:2px solid var(--ink); display:flex; justify-content:center; }
.plan-min { width:calc(var(--wmin) * var(--pxcm) * 1px); height:100%; background:var(--accent); }
.table-scroll { overflow:auto; margin:24px 0; }
.table-scroll:focus-visible { outline-offset:0; }
table { border-collapse:collapse; width:100%; min-width:600px; font-size:17px; background:white; }
caption { text-align:left; font-weight:600; padding:12px 0; }
th,td { text-align:left; padding:16px; border:1px solid #c4cbbf; }
th { background:#e7ecdf; }
.measure { background:white; padding:40px; margin:48px 0; }
.measure li { padding-left:8px; margin:24px 0; }
.measure li h3 { font-size:26px; }
.measure label { display:flex; gap:12px; padding:8px 0; min-height:44px; align-items:flex-start; }
input[type=checkbox] { width:24px; height:24px; flex-shrink:0; accent-color:var(--ink); }
.source-links { display:flex; flex-wrap:wrap; gap:24px; margin:24px 0; }
.source-links a { max-width:100%; }
.external-note { font-size:14px; margin-left:4px; }
.sources { scroll-margin-top:24px; }
.site-footer { background:white; padding:40px 4.17%; display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.site-footer p { font-size:14px; }
.site-footer>a:last-child { min-height:44px; display:inline-flex; align-items:center; }
@media (hover:hover) and (pointer:fine) { .button:hover { background:#cfddc0; } a:not(.button):hover { text-decoration:underline; } }
@media (max-width:1200px) {
  .hero { grid-template-columns:55% 45%; }
  .hero-panel { padding:40px; }
  .article-intro { grid-template-columns:45% 1fr; gap:32px; }
  .tagline { display:none; }
  .site-header nav { margin-left:auto; }
}
@media (max-width:760px) {
  .site-header { min-height:72px; padding:12px 24px; gap:16px; }
  .brand { font-size:26px; }
  .site-header nav { display:none; }
  .tagline { display:block; margin-left:auto; font-size:14px; }
  .tagline { max-width:110px; }
  .hero { display:flex; flex-direction:column; }
  .hero-photo { height:310px; }
  .hero-panel { padding:24px; gap:24px; }
  .hero-panel h1 { font-size:32px; }
  .hero-panel .summary { font-size:18px; }
  .hero-panel .eyebrow { font-size:14px; }
  .caption { padding:24px; }
  .container { width:calc(100% - 48px); }
  .top-reading { padding:32px 0; }
  .policy { padding:24px; }
  .article { padding-top:24px; }
  .breadcrumb { margin-bottom:24px; font-size:12px; }
  .article-heading h1 { font-size:30px; margin-bottom:24px; }
  .article-heading .subtitle { font-size:17px; }
  .toc { gap:8px; margin:24px 0; }
  .toc a { min-width:0; flex:1; padding:12px 8px; }
  .article-intro { display:flex; flex-direction:column; gap:24px; }
  .article-intro img { height:260px; }
  .article-intro h2 { font-size:27px; }
  .spec-cards { grid-template-columns:1fr; gap:16px; }
  .plans { grid-template-columns:1fr; }
  .elevation-body { --pxcm:4; }
  .plan-frame { --pxcm:6; }
  .elevation,.plan-card { padding:16px; }
  .elevation-sku { font-size:18px; }
  .spec-card { padding:24px; }
  .numbers { font-size:28px; }
  .measure { padding:24px; margin:32px 0; }
  .measure ol { padding-left:20px; }
  .measure li h3 { font-size:23px; }
  .source-links { flex-direction:column; gap:16px; }
  .site-footer { padding:24px; }
}
@media (max-width:350px) { .container { width:calc(100% - 32px); } .site-header { padding:12px 16px; } .hero-panel { padding:24px 16px; } .tagline { max-width:85px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }