:root { color-scheme: light; --background:#F5F0E6; --card:#FBF8F2; --ink:#25231F; --muted:#777168; --line:#DDD5C8; --accent:#B75C55; --accent-dark:#8F4742; --shadow:0 10px 30px rgba(37,35,31,.055); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; background:var(--background); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP","Segoe UI",sans-serif; font-size:16px; line-height:1.85; }
a { color:inherit; text-decoration-color:rgba(183,92,85,.72); text-underline-offset:.18em; }
a:hover { color:var(--accent-dark); }
.site-header,.main,.site-footer { width:min(100% - 40px,1040px); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:26px 18px; }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); font-size:.98rem; font-weight:700; letter-spacing:.02em; text-decoration:none; }
.brand img { width:36px; height:36px; border:1px solid var(--line); border-radius:9px; object-fit:cover; }
.site-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 19px; font-size:.9rem; }
.site-nav a { color:var(--muted); text-decoration:none; } .site-nav a[aria-current="page"] { color:var(--ink); font-weight:700; }
.main { padding-block:22px 64px; }
.hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr); align-items:center; gap:clamp(32px,7vw,90px); padding:clamp(38px,7vw,82px) clamp(22px,6vw,76px); border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); }
.eyebrow { margin:0 0 15px; color:var(--accent-dark); font-size:.78rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.32; } h1 { font-size:clamp(2.25rem,7vw,4.5rem); } h2 { font-size:clamp(1.5rem,4vw,2.25rem); } h3 { font-size:1.05rem; }
p { margin:0; } .hero .tagline { margin-top:15px; font-size:clamp(1.15rem,2.5vw,1.5rem); font-weight:700; } .hero .lead { max-width:39rem; margin-top:28px; white-space:pre-line; }
.hero-mark { justify-self:center; width:min(100%,238px); aspect-ratio:1; border:1px solid var(--line); border-radius:18px; background:#f8f4eb; object-fit:cover; box-shadow:8px 9px 0 rgba(183,92,85,.2); }
.jump-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; } .jump-links a { display:inline-block; padding:9px 15px; border:1px solid var(--accent); border-radius:7px; color:var(--accent-dark); font-size:.92rem; font-weight:700; text-decoration:none; } .jump-links a:hover { background:var(--accent); color:#fff; }
.content-section { margin-top:clamp(48px,8vw,88px); } .section-heading { display:flex; align-items:baseline; gap:15px; padding-bottom:13px; border-bottom:1px solid var(--line); } .section-heading .section-label { color:var(--accent-dark); font-size:.79rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.language-block { margin-top:28px; } .language-label { display:inline-block; margin-bottom:13px; color:var(--muted); font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin:21px 0 0; padding:0; list-style:none; } .feature-list li,.faq-item,.policy-section { border:1px solid var(--line); border-radius:10px; background:var(--card); box-shadow:var(--shadow); }
.feature-list li { position:relative; padding:17px 18px 17px 40px; } .feature-list li::before { position:absolute; top:18px; left:18px; width:10px; height:10px; border-radius:50%; background:var(--accent); content:""; }
.page-intro { max-width:750px; padding:clamp(30px,5vw,54px); border-bottom:2px solid var(--accent); } .page-intro h1 { font-size:clamp(2rem,5vw,3.4rem); } .page-intro p { margin-top:15px; color:var(--muted); } .last-updated { margin-top:22px; color:var(--muted); font-size:.9rem; }
.policy-section,.faq-item { padding:clamp(20px,4vw,31px); } .policy-section + .policy-section,.faq-item + .faq-item { margin-top:13px; } .policy-section h3,.faq-item h3 { margin-bottom:12px; } .policy-section p + p,.faq-item p + p { margin-top:14px; } .policy-section ul { margin:13px 0 0; padding-left:1.25em; } .policy-section li + li { margin-top:4px; }
.faq-list { margin-top:28px; } .faq-item .answer-label { margin-bottom:5px; color:var(--accent-dark); font-size:.83rem; font-weight:700; }
.contact-card { margin-top:31px; padding:25px; border-left:4px solid var(--accent); background:rgba(251,248,242,.72); } .contact-card h2 { font-size:1.2rem; } .contact-card p { margin-top:8px; }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; padding-block:25px 39px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; } .footer-nav { display:flex; flex-wrap:wrap; gap:8px 17px; }
@media (max-width:680px) { .site-header,.main,.site-footer { width:min(100% - 28px,1040px); } .site-header { align-items:flex-start; flex-direction:column; gap:15px; } .site-nav { justify-content:flex-start; } .hero { grid-template-columns:1fr; } .hero-mark { order:-1; width:144px; justify-self:start; } .feature-list { grid-template-columns:1fr; } }