:root{
  --bg: #F5F3EE;
  --ink: #1A1C1A;
  --ink-soft: #3a3d38;
  --muted: #8a8d85;
  --rule: #d7d3c7;
  --sage: #9AAE94;
  --sage-deep: #6f8a6c;
  --serif: "Noto Serif JP", "Cormorant Garamond", serif;
  --display: "Cormorant Garamond", "Noto Serif JP", serif;
  --sans: "Noto Sans JP", "Inter", sans-serif;
  --ui: "Inter", "Noto Sans JP", sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:300; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--sage-deep); }
img{ display:block; max-width:100%; }
::selection{ background:var(--sage); color:#fff; }

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 28px;
  background: rgba(245,243,238,.82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(26,28,26,.06);
  font-family:var(--ui); font-size:clamp(13px, .9vw, 17px); letter-spacing:.14em; text-transform:uppercase;
}
.nav .logo img{ height:clamp(72px, 5.5vw, 96px); width:auto; mix-blend-mode:multiply; }
.nav ul{ display:flex; gap:clamp(24px, 2vw, 40px); list-style:none; }
.nav .book{ border:1px solid rgba(26,28,26,.5); font-size:clamp(13px, .9vw, 17px); padding:10px 18px; border-radius:999px; transition:background .3s,color .3s; white-space:nowrap; }
.nav .book:hover{ background:var(--ink); color:#fff; }
@media (max-width:900px){ .nav ul{ display:none; } }

.pagehead{ padding:190px 40px 50px; max-width:820px; margin:0 auto; }
.pagehead .back{
  font-family:var(--ui); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
  display:inline-block; margin-bottom:32px;
}
.pagehead h1{
  font-family:var(--display); font-style:italic; font-weight:300;
  font-size: clamp(56px, 8vw, 110px); line-height:.9; letter-spacing:-.02em;
}
.pagehead .sub{
  margin-top:24px;
  font-family:var(--serif); font-size:15px; letter-spacing:.3em; color:var(--muted);
}

.legal{ max-width:820px; margin:0 auto; padding:20px 40px 130px; }

/* dl table (tokushoho) */
.legal__table{ border-top:1px solid var(--rule); }
.legal__table > div{
  display:grid; grid-template-columns: 220px 1fr; gap:24px;
  padding:26px 4px; border-bottom:1px solid var(--rule);
}
.legal__table dt{
  font-family:var(--ui); font-size:11px; letter-spacing:.2em; color:var(--muted);
  padding-top:3px;
}
.legal__table dd{ font-size:13.5px; line-height:2.1; letter-spacing:.05em; color:var(--ink-soft); }
.legal__table dd a{ border-bottom:1px solid var(--rule); }
@media (max-width:700px){
  .legal__table > div{ grid-template-columns:1fr; gap:8px; }
}

/* articles (terms / privacy) */
.legal__intro{ font-size:13.5px; line-height:2.2; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:56px; }
.legal article{ margin-bottom:52px; }
.legal article h2{
  font-family:var(--serif); font-weight:500;
  font-size:17px; letter-spacing:.15em;
  margin-bottom:26px;
  padding-bottom:12px; border-bottom:1px solid var(--rule);
}
.legal article h3{
  font-family:var(--serif); font-weight:500;
  font-size:14px; letter-spacing:.1em;
  margin:30px 0 10px;
  color:var(--ink);
}
.legal article p, .legal article li{
  font-size:13.5px; line-height:2.2; letter-spacing:.05em; color:var(--ink-soft);
}
.legal article ol, .legal article ul{ padding-left:1.6em; display:flex; flex-direction:column; gap:6px; }
.legal article ol.circled{ list-style:none; padding-left:.2em; counter-reset:circled; }
.legal article ol.circled > li{ counter-increment:circled; }
.legal article ol.circled > li::before{ content:"①"; margin-right:.5em; color:var(--muted); }
.legal article ol.circled > li:nth-child(2)::before{ content:"②"; }
.legal article ol.circled > li:nth-child(3)::before{ content:"③"; }
.legal article ol.circled > li:nth-child(4)::before{ content:"④"; }
.legal article ol.circled > li:nth-child(5)::before{ content:"⑤"; }
.legal article ol.circled > li:nth-child(6)::before{ content:"⑥"; }
.legal article ol.circled > li:nth-child(7)::before{ content:"⑦"; }
.legal article ol.circled > li:nth-child(8)::before{ content:"⑧"; }
.legal article ol.circled > li:nth-child(9)::before{ content:"⑨"; }
.legal article ol.circled > li:nth-child(10)::before{ content:"⑩"; }
.legal article ol.circled > li:nth-child(11)::before{ content:"⑪"; }
.legal article ol.circled > li:nth-child(12)::before{ content:"⑫"; }
.legal article ol.circled > li:nth-child(13)::before{ content:"⑬"; }
.legal article ol.circled > li:nth-child(14)::before{ content:"⑭"; }
.legal article ol.circled > li:nth-child(15)::before{ content:"⑮"; }
.legal .note{ font-size:11px; color:var(--muted); line-height:2; }
.legal .date{ margin-top:60px; font-size:12px; color:var(--muted); text-align:right; }

.footstrip{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  max-width:1440px; margin:0 auto;
  padding:32px 40px;
  border-top:1px solid var(--rule);
  font-family:var(--ui); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.footstrip__links{ display:flex; gap:28px; flex-wrap:wrap; }
.footstrip__links a{ white-space:nowrap; }
@media (max-width:700px){
  .pagehead{ padding:150px 20px 40px; }
  .legal{ padding:10px 20px 90px; }
}

.nav__toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--ink); }
@media (max-width:900px){
  .nav__toggle{ display:inline-flex; }
  .nav.is-open ul{
    display:flex; flex-direction:column; gap:18px;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(245,243,238,.97);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    padding:20px 24px 26px;
    border-bottom:1px solid rgba(26,28,26,.08);
  }
}