/* MIRAI no IRO no WA — shared styles (hand-drawn paper world) */
:root{
  --paper:#FAF8F2;
  --paper2:#F3EFE4;
  --ink:#33302B;
  --ink-soft:#6E6960;
  --line:#E5DFD0;
  --c1:#FF5E1F; --c2:#FFB000; --c3:#00B368; --c4:#0E8CEA; --c5:#7A2BEA; --c6:#FB2E7E;
  --hand:"Klee One","Noto Sans JP",cursive;
  --sans:"Noto Sans JP","Helvetica Neue",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:2;letter-spacing:.04em;font-size:15.5px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 22px}

/* ---------- topbar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(250,248,242,.94);border-bottom:1px solid var(--line)}
.tb-in{display:flex;align-items:center;justify-content:space-between;max-width:1160px;margin:0 auto;padding:10px 20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--hand);font-weight:600;font-size:1.02rem;letter-spacing:.06em}
.brand img{width:34px;height:auto}
nav.main{display:flex;gap:22px;align-items:center;font-size:.82rem;letter-spacing:.08em}
nav.main a.nl{color:var(--ink-soft);transition:color .25s;position:relative}
nav.main a.nl:hover{color:var(--ink)}
nav.main a.nl:hover::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));opacity:.7}
.btn-join{background:var(--ink);color:#fff;padding:8px 20px;border-radius:999px;font-size:.8rem;letter-spacing:.1em;transition:transform .25s,background .25s}
.btn-join:hover{transform:translateY(-1px);background:#000}
.lang-tg{border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.72rem;letter-spacing:.12em;cursor:pointer;background:#fff;color:var(--ink-soft)}
.menu-btn{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink)}
@media(max-width:880px){
  nav.main a.nl{display:none}
}

/* ---------- shared section bits ---------- */
section{padding:92px 0}
.eyebrow{font-family:var(--hand);font-weight:600;font-size:.85rem;letter-spacing:.24em;text-align:center;margin-bottom:12px}
.eyebrow.rainbow{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c5),var(--c6));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-family:var(--hand);font-weight:600;font-size:clamp(1.4rem,3.4vw,1.95rem);letter-spacing:.1em;text-align:center;line-height:1.95;margin-bottom:34px}
.lead{text-align:center;color:var(--ink-soft);max-width:660px;margin:-14px auto 44px;font-size:.95rem}
.crayon{position:relative;display:inline-block}
.crayon::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.42em;z-index:-1;border-radius:3px;background:linear-gradient(90deg,var(--c2),var(--c6));opacity:.28;transform:rotate(-.6deg)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}
.gray-in{filter:grayscale(1) opacity(.85);transition:filter 1.4s ease}
.gray-in.on{filter:grayscale(0) opacity(1)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 22px 40px;text-align:center;color:var(--ink-soft);font-size:.78rem;letter-spacing:.08em}
footer .f-nav{display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:center;margin:18px 0 26px;font-size:.8rem}
footer .f-nav a:hover{color:var(--ink)}
footer .f-pol{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:center;font-size:.72rem;margin-bottom:20px}
footer .f-pol a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line)}
footer .dots{display:flex;gap:7px;justify-content:center;margin-bottom:16px}
footer .dots i{width:9px;height:9px;border-radius:50%}

/* language-scoped blocks (long texts like policies) */
html[lang="en"] .jp-only{display:none}
html:not([lang="en"]) .en-only{display:none}

/* ---------- subpage shared ---------- */
.page-hero{padding:150px 22px 60px;text-align:center}
.page-hero h1{font-family:var(--hand);font-weight:600;font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:.12em;line-height:1.9}
.page-hero .sub{color:var(--ink-soft);font-size:.9rem;letter-spacing:.14em;margin-top:10px}
.prose{max-width:760px;margin:0 auto;padding:0 22px 90px}
.prose h2{text-align:left;font-size:1.15rem;margin:44px 0 12px}
.prose p,.prose li{font-size:.9rem;color:var(--ink-soft);margin-bottom:1em;line-height:2.2}
.prose ul{padding-left:1.3em}