:root{--ink:#22332B;--amber:#C08A2D;--amber-soft:#D9A94E;--paper:#F5F3EA;--moss:#DDE4DB;--line:#CFCDBE;
--serif:'Shippori Mincho',serif;--sans:'Zen Kaku Gothic New',sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.85;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
/* 木漏れ日 signature */
.komorebi{position:relative;overflow:hidden;background:var(--ink)}
.komorebi::before,.komorebi::after{content:"";position:absolute;inset:-20%;pointer-events:none;
background:radial-gradient(circle at 22% 30%,rgba(217,169,78,.34),transparent 42%),
radial-gradient(circle at 68% 18%,rgba(217,169,78,.22),transparent 38%),
radial-gradient(circle at 82% 62%,rgba(245,243,234,.14),transparent 34%),
radial-gradient(circle at 42% 78%,rgba(217,169,78,.16),transparent 40%)}
.komorebi::after{background:radial-gradient(circle at 55% 45%,rgba(221,228,219,.10),transparent 46%)}
.komorebi>*{position:relative;z-index:1}
/* header */
header{background:rgba(245,243,234,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:var(--serif);font-size:1.35rem;letter-spacing:.28em;font-weight:600}
.logo span{color:var(--amber)}
nav.menu{display:flex;gap:1.4em;font-size:.86rem}
nav.menu a:hover{color:var(--amber)}
/* hero */
.hero{color:var(--paper);padding:96px 0 88px;text-align:center}
.hero .kicker{letter-spacing:.5em;font-size:.78rem;color:var(--amber-soft);margin-bottom:1.4em}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,4.6vw,2.9rem);letter-spacing:.14em;line-height:1.9}
.hero p.lead{margin-top:1.6em;font-size:.95rem;color:rgba(245,243,234,.82);letter-spacing:.06em}
.hero .cta{display:inline-block;margin-top:2.4em;border:1px solid var(--amber-soft);color:var(--amber-soft);
padding:.8em 2.6em;letter-spacing:.3em;font-size:.82rem;transition:.25s}
.hero .cta:hover{background:var(--amber-soft);color:var(--ink)}
/* sections */
section{padding:72px 0}
.sec-head{display:flex;align-items:baseline;gap:1em;margin-bottom:2em}
.sec-head h2{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.16em}
.sec-head .en{font-size:.72rem;letter-spacing:.32em;color:var(--amber);text-transform:uppercase}
.sec-note{font-size:.88rem;margin:-1.2em 0 2em;color:#4c5a52}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;transition:.25s;border-radius:2px}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(34,51,43,.12)}
.card .head{height:104px;display:flex;align-items:flex-end;padding:14px 16px;color:var(--paper)}
.card .head .nm{font-family:var(--serif);font-size:1.05rem;letter-spacing:.06em;line-height:1.5}
.card .body{padding:16px;flex:1;display:flex;flex-direction:column;gap:.55em}
.card .city{font-size:.78rem;color:#5c6a62;letter-spacing:.04em}
.card .price{font-size:.9rem;color:var(--amber);font-weight:700}
.card .tags{display:flex;flex-wrap:wrap;gap:.45em;margin-top:auto;padding-top:.6em}
.tag{font-size:.7rem;border:1px solid var(--line);padding:.15em .7em;border-radius:999px;color:#4c5a52;background:var(--paper)}
/* area chips */
.areas{display:flex;flex-wrap:wrap;gap:.7em}
.areas a{border:1px solid var(--ink);padding:.55em 1.6em;font-size:.86rem;letter-spacing:.14em;transition:.2s;border-radius:2px}
.areas a:hover{background:var(--ink);color:var(--paper)}
/* criteria */
.criteria{background:var(--moss)}
.criteria ol{list-style:none;counter-reset:c;display:grid;gap:1.1em;max-width:760px}
.criteria li{counter-increment:c;background:#fff;border:1px solid var(--line);padding:1.1em 1.3em 1.1em 3.6em;position:relative;border-radius:2px}
.criteria li::before{content:counter(c,cjk-ideographic);position:absolute;left:1.1em;top:1.05em;
font-family:var(--serif);color:var(--amber);font-size:1.15rem}
.criteria li b{display:block;letter-spacing:.06em}
.criteria li small{color:#4c5a52}
/* supervision */
.super{border:1px solid var(--amber);background:#fff;padding:1.4em 1.6em;display:flex;gap:1.2em;align-items:flex-start;border-radius:2px}
.super .mark{font-family:var(--serif);color:var(--amber);font-size:1.5rem;line-height:1}
.super p{font-size:.88rem}
/* facility page */
.f-hero{color:var(--paper);padding:72px 0 56px}
.f-hero .crumb{font-size:.76rem;letter-spacing:.1em;color:rgba(245,243,234,.65);margin-bottom:1.6em}
.f-hero .crumb a:hover{color:var(--amber-soft)}
.f-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.6vw,2.2rem);letter-spacing:.1em}
.f-hero .city{margin-top:.6em;color:var(--amber-soft);font-size:.9rem;letter-spacing:.08em}
.f-body{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.f-desc{font-size:.98rem}
.f-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);font-size:.88rem}
.f-table th,.f-table td{padding:.85em 1em;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.f-table th{width:6.5em;color:#4c5a52;font-weight:500;background:var(--paper)}
.f-actions{display:flex;flex-direction:column;gap:.7em;margin-top:1.2em}
.btn{display:block;text-align:center;padding:.85em;letter-spacing:.2em;font-size:.84rem;border-radius:2px;transition:.2s}
.btn-amber{background:var(--amber);color:#fff}.btn-amber:hover{background:#a9761f}
.btn-line{border:1px solid var(--ink)}.btn-line:hover{background:var(--ink);color:var(--paper)}
.notice{font-size:.76rem;color:#6a7168;margin-top:1em}
/* article */
.article{max-width:720px;margin:0 auto}
.article h1{font-family:var(--serif);font-weight:500;font-size:1.7rem;letter-spacing:.1em;line-height:1.8;margin-bottom:.5em}
.article .meta{font-size:.8rem;color:#6a7168;margin-bottom:2.2em}
.article h2{font-family:var(--serif);font-weight:500;font-size:1.25rem;letter-spacing:.08em;margin:2.2em 0 .8em;
padding-left:.8em;border-left:3px solid var(--amber)}
.article p{margin-bottom:1.2em;font-size:.96rem}
.article ul{margin:0 0 1.2em 1.4em;font-size:.96rem}
.article li{margin-bottom:.4em}
/* footer */
footer{background:var(--ink);color:rgba(245,243,234,.8);padding:54px 0 40px;font-size:.82rem;margin-top:40px}
footer .cols{display:flex;flex-wrap:wrap;gap:2.5em;justify-content:space-between;align-items:flex-start}
footer .logo{color:var(--paper);margin-bottom:.8em}
footer nav{display:flex;flex-direction:column;gap:.5em}
footer a:hover{color:var(--amber-soft)}
footer .copy{margin-top:2.6em;font-size:.72rem;color:rgba(245,243,234,.45);letter-spacing:.1em}
@media(max-width:780px){.f-body{grid-template-columns:1fr}nav.menu{gap:.9em;font-size:.78rem}
.hero{padding:72px 0 64px}section{padding:52px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}