:root{
  --ink:#14161a; --ink-2:#4a5058; --paper:#f4f1ec; --card:#ffffff;
  --brick:#b5462f; --brick-2:#8e3422; --mortar:#e3ded5; --line:#1a1c20;
  --acc:#f0c14b;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Shippori Mincho","Yu Mincho",serif; line-height:1.4; font-weight:600}
a{color:var(--brick-2)}
img,svg{max-width:100%;display:block}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}

/* ---- brick grid background band ---- */
.brickband{
  background-color:var(--mortar);
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.10) 1px,transparent 1px),
    linear-gradient(0deg,rgba(0,0,0,.10) 1px,transparent 1px);
  background-size:56px 28px;
  background-position:0 0;
}

/* ---- header ---- */
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--line)}
.hd{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.logo i{width:22px;height:22px;background:var(--brick);border:2px solid var(--line);display:block}
nav ul{display:flex;gap:22px;list-style:none;font-size:14px}
nav a{color:var(--ink);text-decoration:none}
nav a:hover{color:var(--brick-2)}
.navbtn{display:none;background:none;border:2px solid var(--line);padding:6px 10px;font-size:13px;cursor:pointer}

/* ---- buttons ---- */
.btn{
  display:inline-block;padding:13px 26px;background:var(--brick);color:#fff;
  text-decoration:none;font-weight:700;font-size:15px;
  border:2px solid var(--line);box-shadow:5px 5px 0 var(--line);
}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--line)}
.btn.ghost{background:var(--card);color:var(--ink)}

/* ---- hero : asymmetric 7/5 ---- */
.hero{border-bottom:2px solid var(--line);padding:0}
.hero-in{display:grid;grid-template-columns:1.25fr .95fr;min-height:520px}
.hero-l{padding:64px 40px 64px 0;display:flex;flex-direction:column;justify-content:center}
.hero-r{border-left:2px solid var(--line);position:relative;overflow:hidden}
.tag{display:inline-block;font-size:12px;letter-spacing:.16em;border:2px solid var(--line);padding:5px 12px;margin-bottom:22px;background:var(--acc)}
.hero h1{font-size:clamp(28px,4.2vw,48px);margin-bottom:20px}
.hero p.lead{font-size:17px;color:var(--ink-2);margin-bottom:30px;max-width:34em}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.microfact{margin-top:34px;display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.microfact b{display:block;font-size:20px;color:var(--ink);font-family:"Shippori Mincho",serif}

/* ---- offset section frame ---- */
section{padding:78px 0}
.head{max-width:44em;margin-bottom:38px}
.head span{font-size:12px;letter-spacing:.18em;color:var(--brick-2);display:block;margin-bottom:10px}
.head h2{font-size:clamp(23px,3vw,33px)}
.head p{color:var(--ink-2);margin-top:12px}

/* ---- masonry-ish staggered cards ---- */
.stagger{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{background:var(--card);border:2px solid var(--line);padding:26px}
.card h3{font-size:19px;margin-bottom:10px}
.card p{font-size:14.5px;color:var(--ink-2)}
.c-a{grid-column:1/span 5}
.c-b{grid-column:6/span 4;margin-top:44px}
.c-c{grid-column:10/span 3;margin-top:14px}
.c-d{grid-column:2/span 4;margin-top:-10px}
.c-e{grid-column:6/span 5}
.c-half{grid-column:span 6}
.c-third{grid-column:span 4}
.c-8{grid-column:span 8}
.c-4{grid-column:span 4}
.num{font-family:"Shippori Mincho",serif;font-size:34px;color:var(--brick);border-bottom:2px solid var(--line);display:inline-block;line-height:1;padding-bottom:6px;margin-bottom:14px}

/* two-column split with sticky note */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--line);background:var(--card)}
.split>div{padding:30px}
.split>div+div{border-left:2px solid var(--line)}
.split h3{font-size:18px;margin-bottom:12px}
.split ul{margin-left:18px;font-size:14.5px;color:var(--ink-2)}

/* price */
.price{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.p1{grid-column:1/span 4}
.p2{grid-column:5/span 4;margin-top:-22px}
.p3{grid-column:9/span 4;margin-top:22px}
.pcard{background:var(--card);border:2px solid var(--line);padding:26px;box-shadow:6px 6px 0 var(--line)}
.pcard .amt{font-family:"Shippori Mincho",serif;font-size:30px;margin:8px 0 4px}
.pcard .unit{font-size:12px;color:var(--ink-2)}
.pcard ul{margin:16px 0 0 18px;font-size:14px;color:var(--ink-2)}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:14.5px}
th,td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
th{background:var(--mortar);font-weight:600}

/* faq */
details{background:var(--card);border:2px solid var(--line);padding:16px 20px;margin-bottom:12px}
details summary{cursor:pointer;font-weight:700;font-size:15.5px}
details p{margin-top:10px;font-size:14.5px;color:var(--ink-2)}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{font-size:13px;display:block;margin-bottom:6px}
.form input,.form select,.form textarea{
  width:100%;padding:11px;border:2px solid var(--line);background:var(--card);
  font-family:inherit;font-size:15px;
}
.form .full{grid-column:1/-1}
.note{font-size:12.5px;color:var(--ink-2);margin-top:10px}
.msg{margin-top:14px;font-size:14px;padding:12px;border:2px solid var(--line);background:var(--acc);display:none}

/* footer */
footer{border-top:2px solid var(--line);padding:46px 0 30px;font-size:13.5px;color:var(--ink-2)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-bottom:28px}
footer a{color:var(--ink-2)}
.disc{border:2px solid var(--line);background:var(--card);padding:18px;font-size:12.5px;margin-bottom:22px}
.opinfo dt{font-weight:700;color:var(--ink);margin-top:8px;font-size:13px}
.opinfo dd{margin:0 0 4px}

/* cookie banner */
#cbar{position:fixed;left:0;right:0;bottom:0;z-index:99;background:var(--card);border-top:2px solid var(--line);padding:16px 20px;display:none}
#cbar .in{max-width:1180px;margin:0 auto;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13.5px}
#cbar button{padding:9px 16px;border:2px solid var(--line);background:var(--brick);color:#fff;font-weight:700;cursor:pointer;font-size:13px}
#cbar button.no{background:var(--card);color:var(--ink)}

/* legal pages */
.legal{max-width:820px;margin:0 auto;padding:60px 20px 80px}
.legal h1{font-size:30px;margin-bottom:8px}
.legal .upd{font-size:13px;color:var(--ink-2);margin-bottom:34px}
.legal h2{font-size:19px;margin:34px 0 10px;padding-left:12px;border-left:5px solid var(--brick)}
.legal p,.legal li{font-size:15px;color:#2c3036}
.legal ul,.legal ol{margin:10px 0 10px 22px}
.back{display:inline-block;margin-top:40px;font-size:14px}

@media(max-width:900px){
  nav ul{display:none}
  .hero-in{grid-template-columns:1fr}
  .hero-l{padding:44px 0}
  .hero-r{border-left:none;border-top:2px solid var(--line);min-height:280px}
  .stagger>*,.price>*{grid-column:1/-1 !important;margin-top:0 !important}
  .split{grid-template-columns:1fr}
  .split>div+div{border-left:none;border-top:2px solid var(--line)}
  .form{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
}