:root {
  --ink: #17324d;
  --ink-deep: #10283d;
  --muted: #66788a;
  --paper: #fffdf9;
  --soft: #f3f7f8;
  --line: #dce5e8;
  --teal: #138a82;
  --teal-dark: #0b6b66;
  --orange: #f59e5b;
  --white: #fff;
  --container: 860px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.75 Arial, Helvetica, sans-serif; }
a { color: var(--teal-dark); text-underline-offset: 3px; }
.container { width: min(var(--container), calc(100% - 36px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(255,253,249,.96); }
.header-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: white; background: var(--ink); font-weight: 800; position: relative; }
.brand-mark::after { content: ""; position: absolute; top: 6px; left: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.brand strong { display: block; font-size: 19px; }
.brand small { display: block; color: var(--muted); font-size: 11px; }
.header-inner > a:last-child { font-size: 13px; font-weight: 700; }
.hero { padding: 58px 0 42px; background: linear-gradient(135deg, #eef8f6, #fff5eb); border-bottom: 1px solid var(--line); }
.eyebrow { color: var(--teal-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
h1 { margin: 10px 0 13px; color: var(--ink-deep); font-size: clamp(34px, 6vw, 50px); line-height: 1.2; letter-spacing: -1px; }
.hero p { max-width: 730px; margin: 0; color: var(--muted); font-size: 17px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.meta span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.75); color: var(--muted); font-size: 12px; }
main article { padding: 48px 0 70px; }
.notice { margin-bottom: 28px; padding: 17px 19px; border-left: 4px solid var(--teal); border-radius: 11px; background: var(--soft); }
.notice p { margin: 0; }
section { padding: 25px 0; border-bottom: 1px solid var(--line); }
section:last-child { border-bottom: 0; }
h2 { margin: 0 0 12px; color: var(--ink-deep); font-size: 25px; line-height: 1.35; }
h3 { margin: 19px 0 8px; font-size: 18px; }
p { color: #40566a; }
li { margin: 7px 0; color: #40566a; }
.policy-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.policy-table th, .policy-table td { padding: 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.policy-table th { background: var(--soft); }
.contact-box { padding: 22px; border-radius: 14px; background: var(--ink-deep); color: white; }
.contact-box h2, .contact-box p, .contact-box a { color: white; }
.site-footer { padding: 27px 0; background: #0c2234; color: #aebfcb; font-size: 12px; }
.footer-inner { display: flex; justify-content: space-between; gap: 20px; }
.site-footer a { color: white; }
.policy-list { display: grid; gap: 12px; padding: 0; list-style: none; }
.policy-list a { display: block; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: white; font-weight: 700; text-decoration: none; }
.policy-list a:hover { border-color: var(--teal); }
@media (max-width: 620px) {
  .brand small, .header-inner > a:last-child { display: none; }
  .hero { padding: 42px 0 34px; }
  h1 { font-size: 36px; }
  .policy-table { display: block; overflow-x: auto; }
  .footer-inner { flex-direction: column; }
}
@media print {
  .site-header, .site-footer { display: none; }
  body { background: white; }
  .hero { padding-top: 20px; background: white; }
}
