/* legal.css — shared styles for GARLAND legal pages (terms / privacy / tokushoho)
 * Consumes tokens.css. Editorial document layout matching the corporate LP brand
 * (cork paper · deep-green headings · gold hairlines · Zen Old Mincho + Noto Sans JP + Cinzel).
 */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-inline: max(0px, env(safe-area-inset-left));
}

/* Subtle cork-paper grain (brand texture, same as the LP) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.30; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--color-selection); }

/* Scrollbar — cork track + bronze-gold thumb (matches the LP) */
html { scrollbar-width: thin; scrollbar-color: var(--color-accent-strong) var(--color-paper-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-paper-2); }
::-webkit-scrollbar-thumb { background: var(--color-accent-strong); border-radius: var(--radius-pill); border: 3px solid var(--color-paper-2); }
::-webkit-scrollbar-corner { background: var(--color-paper-2); }
@media (hover: hover) { ::-webkit-scrollbar-thumb:hover { background: var(--color-accent); } }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

a { color: var(--color-green); }

/* ---- Wide container (nav + footer) ---- */
.l-bar { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--page-gutter); }

/* ---- Top bar — edge-aligned wordmark + back-home ---- */
.l-nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--color-paper-blur);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--color-rule); }
.l-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-sm); }
.l-wordmark { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; color: var(--color-green); }
.l-wordmark img { height: 30px; width: 30px; object-fit: contain; }
.l-wordmark span { font-family: var(--font-latin); font-weight: 600; letter-spacing: 0.22em; font-size: var(--text-md); }
.l-back { font-size: var(--text-sm); color: var(--color-ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
.l-back .arr { transition: transform var(--dur-short) var(--ease-out); display: inline-block; }
@media (hover: hover) { .l-back:hover { color: var(--color-green); } .l-back:hover .arr { transform: translateX(-3px); } }

/* ---- Document ---- */
.l-doc { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--page-gutter);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }

.l-eyebrow { font-family: var(--font-latin); text-transform: uppercase; letter-spacing: 0.30em;
  font-size: var(--text-xs); font-weight: 600; color: var(--color-accent-strong); display: block; }
.l-doc h1 { font-family: var(--font-display); color: var(--color-green); font-weight: 700;
  font-size: var(--text-2xl); line-height: 1.35; letter-spacing: 0.01em; margin: var(--space-sm) 0 0;
  word-break: keep-all; overflow-wrap: anywhere; }
.l-intro { margin-top: var(--space-lg); color: var(--color-ink-soft); }

.l-rule { height: 1px; background: var(--color-rule); border: 0; margin-block: var(--space-xl); }

.l-section { margin-top: var(--space-xl); }
.l-section h2 { font-family: var(--font-display); color: var(--color-green); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.45; letter-spacing: 0.01em; margin: 0 0 var(--space-sm);
  word-break: keep-all; overflow-wrap: anywhere; }
.l-section p { margin: 0; color: var(--color-ink-soft); }
.l-section p + p { margin-top: var(--space-sm); }

/* Enumerations (禁止事項 / 利用目的 等) */
.l-list { margin: var(--space-sm) 0 0; padding-left: 1.4em; color: var(--color-ink-soft); }
.l-list li { margin-top: var(--space-2xs); padding-left: var(--space-2xs); }
.l-list li::marker { color: var(--color-accent-strong); }

.accent { color: var(--color-accent-strong); }
.l-doc a:not(.l-back) { color: var(--color-green); text-decoration: none; border-bottom: 1px solid var(--color-accent); }
@media (hover: hover) { .l-doc a:not(.l-back):hover { color: var(--color-accent-strong); } }

/* ---- 特商法 — label/value rows (colophon style, matches LP 会社概要) ---- */
.l-table { margin-top: var(--space-xl); }
.l-table dl { margin: 0; }
.l-row { display: grid; grid-template-columns: 1fr; gap: var(--space-3xs) var(--space-lg);
  padding-block: var(--space-md); border-top: var(--rule); }
.l-row:last-child { border-bottom: var(--rule); }
.l-row dt { font-family: var(--font-display); font-weight: 700; color: var(--color-green); }
.l-row dd { margin: 0; color: var(--color-ink-soft); line-height: 1.9; }
.l-row dd .note { display: block; margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-faint); }
@media (min-width: 48rem) { .l-row { grid-template-columns: 14rem minmax(0, 1fr); } }

/* ---- Contact block ---- */
.l-contact { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: var(--rule-strong); }
.l-contact h2 { font-family: var(--font-display); color: var(--color-green); font-weight: 700;
  font-size: var(--text-lg); margin: 0 0 var(--space-sm); }
.l-contact p { margin: 0; color: var(--color-ink-soft); line-height: 1.9; }

/* ---- Footer ---- */
.l-foot { border-top: var(--rule); margin-top: var(--space-2xl); }
.l-foot__inner { padding-block: var(--space-xl); display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-md) var(--space-lg); }
.l-foot__mark { display: inline-flex; align-items: center; gap: var(--space-2xs); text-decoration: none; }
.l-foot__mark span { font-family: var(--font-latin); letter-spacing: 0.22em; color: var(--color-green); font-weight: 600; font-size: var(--text-sm); }
.l-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
.l-foot__links a { color: var(--color-green); text-decoration: none; font-size: var(--text-sm); white-space: nowrap; position: relative; }
.l-foot__links a[aria-current="page"] { color: var(--color-ink-faint); }
.l-foot__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
@media (hover: hover) { .l-foot__links a:not([aria-current]):hover::after { transform: scaleX(1); } }
.l-foot__copy { color: var(--color-ink-faint); font-size: var(--text-sm); letter-spacing: 0.02em; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; }
}