/* ============================================================
   KOMORE — Legal / Policy pages
   特定商取引法に基づく表記・利用規約・プライバシーポリシー
   Shared layout for the quiet editorial legal documents.
   ============================================================ */

body{ --gut: clamp(24px, 6vw, 110px); }

/* ——— page hero (unified with news-hero) ——— */
.legal-hero{ color:var(--ink); position:relative; overflow:hidden;
  padding-top:clamp(6rem,11vh,7.5rem); padding-bottom:clamp(1.6rem,3vw,2.2rem);
  background:var(--washi); }
.legal-hero .wrap{ position:relative; z-index:2; text-align:center; }
.legal-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1; letter-spacing:.06em; color:var(--ink); }
.legal-hero .legal-updated{ margin-top:1.3rem; font-family:var(--sans); font-size:.78rem;
  letter-spacing:.16em; color:var(--ink-mute); }

/* ——— mini-nav between legal docs (unified with news read-bar) ——— */
.legal-tabs{ position:sticky; top:0; z-index:40; background:var(--washi); }
.legal-tabs .wrap{ display:flex; gap:.4rem; flex-wrap:wrap; padding-block:1.1rem; justify-content:center; }
.legal-tabs a{ font-family:var(--sans); font-weight:400; font-size:.78rem; letter-spacing:.14em;
  padding:.7em 1.4em; color:var(--ink-mute); border:1px solid transparent; transition:.35s;
  white-space:nowrap; border-radius:4px; }
.legal-tabs a:hover{ color:var(--sumi); }
.legal-tabs a[aria-current="page"]{ color:var(--tea); background:var(--washi-2); }

/* ——— body ——— */
.legal-body{ padding-block:clamp(3.5rem,7vw,6rem) clamp(5rem,11vw,9rem); }
.legal-body .wrap{ max-width:1080px; }
.legal-lead{ font-family:var(--serif); font-weight:400; font-size:clamp(1.05rem,1.6vw,1.28rem);
  line-height:2; color:var(--ink); letter-spacing:.03em; max-width:none;
  padding-bottom:clamp(2.2rem,4vw,3rem); margin-bottom:clamp(2.5rem,4vw,3.4rem);
  border-bottom:1px solid var(--line); }

/* numbered articles — 利用規約 / プライバシーポリシー */
.legal-article{ padding-block:clamp(1.8rem,3.2vw,2.6rem); border-bottom:1px solid var(--line); }
.legal-article:first-of-type{ padding-top:0; }
.legal-article > h2{ display:flex; align-items:baseline; gap:1rem; font-family:var(--serif);
  font-weight:600; font-size:clamp(1.18rem,2vw,1.5rem); letter-spacing:.04em; line-height:1.45;
  color:var(--tea); margin-bottom:1.3rem; }
.legal-article > h2 .art-no{ flex:0 0 auto; font-family:var(--display); font-style:italic;
  font-weight:400; font-size:1.05em; color:var(--brass); line-height:1; }
.legal-article h3{ font-family:var(--sans); font-weight:500; font-size:1rem; letter-spacing:.04em;
  color:var(--ink); margin:1.8rem 0 .7rem; }
.legal-article p{ color:var(--ink); font-size:1rem; line-height:2; letter-spacing:.02em;
  margin:0 0 1.1rem; max-width:none; }
.legal-article p:last-child{ margin-bottom:0; }
.legal-article a{ color:var(--tea-mid); border-bottom:1px solid var(--line); transition:.3s; }
.legal-article a:hover{ color:var(--tea); border-color:var(--tea); }

/* ordered / unordered lists inside articles */
.legal-list{ margin:.4rem 0 1.2rem; padding:0; list-style:none; counter-reset:li; max-width:none; }
.legal-list > li{ position:relative; padding-left:2.4rem; margin-bottom:.85rem;
  color:var(--ink); font-size:1rem; line-height:1.95; letter-spacing:.02em; }
.legal-list.is-numbered > li{ counter-increment:li; }
.legal-list.is-numbered > li::before{ content:"("counter(li)")"; position:absolute; left:0; top:0;
  font-family:var(--display); font-style:italic; color:var(--brass); }
.legal-list.is-dot > li::before{ content:""; position:absolute; left:.55rem; top:.85em;
  width:5px; height:5px; border-radius:50%; background:var(--tea-mid); }

/* ——— definition table — 特定商取引法に基づく表記 ——— */
.tokusho-table{ border-top:1px solid var(--sumi); }
.tokusho-row{ display:grid; grid-template-columns:17rem 1fr; gap:1.5rem 3rem;
  padding:clamp(1.3rem,2.4vw,1.8rem) 0; border-bottom:1px solid var(--line); align-items:start; }
.tokusho-row dt{ font-family:var(--sans); font-weight:500; font-size:.92rem; letter-spacing:.06em;
  color:var(--tea); line-height:1.7; padding-top:.1rem; }
.tokusho-row dd{ margin:0; color:var(--ink); font-size:1rem; line-height:1.95; letter-spacing:.02em; }
.tokusho-row dd p{ margin:0 0 .8rem; }
.tokusho-row dd p:last-child{ margin-bottom:0; }
.tokusho-row dd a{ color:var(--tea-mid); border-bottom:1px solid var(--line); transition:.3s; }
.tokusho-row dd a:hover{ color:var(--tea); border-color:var(--tea); }
.tokusho-row dd .tok-note{ display:block; margin-top:.5rem; font-size:.84rem; color:var(--ink-mute); line-height:1.8; }
.tokusho-row dd .tok-sub{ display:block; font-family:var(--sans); font-weight:500; font-size:.9rem;
  letter-spacing:.04em; color:var(--tea); margin:1.4rem 0 .5rem; }
.tokusho-row dd .tok-sub:first-child{ margin-top:0; }
@media(max-width:680px){
  .tokusho-row{ grid-template-columns:1fr; gap:.45rem; padding-block:1.3rem; }
  .tokusho-row dt{ font-size:.78rem; letter-spacing:.14em; color:var(--brass); text-transform:uppercase; }
}

/* ——— closing contact note ——— */
.legal-foot-note{ margin-top:clamp(3rem,5vw,4.5rem); padding:clamp(1.8rem,3vw,2.6rem) 0 0; }
.legal-foot-note h2{ font-family:var(--serif); font-weight:600; font-size:1.1rem; letter-spacing:.05em;
  color:var(--tea); margin-bottom:.9rem; }
.legal-foot-note p{ margin:0; color:var(--ink); font-size:.96rem; line-height:1.95; }
.legal-foot-note a{ color:var(--tea-mid); border-bottom:1px solid var(--tea-mid); }

/* ——— enactment signature ——— */
.legal-enacted{ text-align:right; }
.legal-enacted .le-date{ font-family:var(--sans); font-size:.86rem; letter-spacing:.1em;
  color:var(--ink-mute); margin:0 0 .5rem; }
.legal-enacted .le-org{ font-family:var(--serif); font-weight:500; font-size:1.05rem;
  letter-spacing:.06em; color:var(--tea); margin:0; }