/* =========================================================
   Mind Craft Fish — houjun.dev/mcf 共通スタイル
   Palette: 深海インク #0A3A57 / ラグーン #1690C6 / 浅瀬 #8ADCEC
            砂紙 #FFF7E6 / サンゴ #FF8A5C / コイン金 #FFC93C / 海藻 #2FBF71
   Type:    M PLUS Rounded 1c (見出し) + Zen Kaku Gothic New (本文)
   ========================================================= */
:root{
  --ink:#0A3A57;
  --lagoon:#1690C6;
  --shallow:#8ADCEC;
  --paper:#FFF7E6;
  --coral:#FF8A5C;
  --coin:#FFC93C;
  --kelp:#2FBF71;
  --text:#243B4A;
  --muted:#5B7386;
  --card:#FFFFFF;
  --radius:18px;
  --maxw:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.9;
  font-size:16px;
}
h1,h2,h3,.disp{
  font-family:"M PLUS Rounded 1c","Zen Kaku Gothic New",sans-serif;
  font-weight:800;
  line-height:1.4;
  color:var(--ink);
  letter-spacing:.02em;
}
a{color:var(--lagoon)}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,247,230,.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid rgba(10,58,87,.08);
}
.site-header .wrap{display:flex;align-items:center;gap:16px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
.brand .name{font-family:"M PLUS Rounded 1c";font-weight:900;color:var(--ink);font-size:1.02rem}
.site-nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.site-nav a{
  text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem;
  padding:7px 12px;border-radius:999px;
}
.site-nav a:hover{background:rgba(22,144,198,.12)}
.lang-pill{
  display:flex;align-items:center;gap:6px;
  border:2px solid rgba(10,58,87,.18);border-radius:999px;
  padding:4px 12px;font-size:.82rem;font-weight:700;color:var(--muted);
  background:#fff;
}
.lang-pill .soon{font-size:.7rem;color:#9AB0BF}
.nav-login{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  text-decoration:none;font-family:"M PLUS Rounded 1c";font-weight:800;font-size:.85rem;
  color:#fff;background:var(--ink);border-radius:999px;padding:8px 16px;
  box-shadow:0 3px 0 rgba(7,40,60,.4);transition:transform .15s ease,background .15s ease;
}
.nav-login:hover{background:var(--lagoon);transform:translateY(-1px)}

/* ---------- hero (sea) ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#BFF0F7 0%,var(--shallow) 18%,#3FB6DF 55%,var(--lagoon) 100%);
  padding:64px 0 140px;
}
.hero .wrap{position:relative;z-index:3;text-align:center}
.hero .app-eyebrow{
  display:inline-block;background:rgba(255,255,255,.85);color:var(--ink);
  font-weight:800;font-size:.85rem;border-radius:999px;padding:6px 16px;margin-bottom:18px;
}
.hero h1{color:#fff;font-size:clamp(1.7rem,4.6vw,2.9rem);margin:.2em 0;
  text-shadow:0 3px 0 rgba(10,58,87,.25)}
.hero .sub{max-width:640px;margin:14px auto 30px;font-size:1.05rem;
  color:#F2FBFF;text-shadow:0 1px 0 rgba(10,58,87,.25)}
.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.store-badge{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:var(--ink);color:#fff;border-radius:14px;padding:12px 22px;
  font-family:"M PLUS Rounded 1c";font-weight:800;font-size:1rem;
  box-shadow:0 6px 0 rgba(7,40,60,.45);
  transition:transform .15s ease;
}
.store-badge:hover{transform:translateY(-2px)}
.store-badge small{display:block;font-weight:500;font-size:.7rem;opacity:.8}
.hero-note{margin-top:14px;font-size:.85rem;color:#EAF8FD}

/* sunbeams */
.beam{position:absolute;top:-12%;width:180px;height:130%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 75%);
  transform:skewX(-14deg);filter:blur(6px)}
.beam.b1{left:12%}
.beam.b2{left:30%;width:90px;opacity:.7}
.beam.b3{right:16%;width:140px;opacity:.55}

/* swimming voxel fish + bubbles */
.sea-life{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fish{position:absolute;width:110px;height:auto;filter:drop-shadow(0 4px 0 rgba(7,40,60,.18))}
.swim-r{animation:swimR linear infinite}
.swim-l{animation:swimL linear infinite}
@keyframes swimR{from{transform:translateX(-160px)}to{transform:translateX(calc(100vw + 160px))}}
@keyframes swimL{from{transform:translateX(calc(100vw + 160px)) scaleX(-1)}to{transform:translateX(-160px) scaleX(-1)}}
.bubble{position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15));
  animation:rise linear infinite;opacity:.8}
@keyframes rise{to{transform:translateY(-120vh)}}
@media (prefers-reduced-motion:reduce){
  .swim-r,.swim-l,.bubble{animation:none}
  .bubble{display:none}
}

/* wave divider */
.wave{display:block;width:100%;height:70px;margin-top:-70px;position:relative;z-index:4}

/* ---------- sections ---------- */
section{padding:64px 0}
.section-title{text-align:center;font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 8px}
.section-lede{text-align:center;color:var(--muted);max-width:640px;margin:0 auto 40px}

/* trust pillars */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.pillar{
  background:var(--card);border-radius:var(--radius);padding:26px 24px;
  border:2px solid rgba(10,58,87,.07);
  box-shadow:0 4px 0 rgba(10,58,87,.06);
}
.pillar .ico{font-size:1.9rem;line-height:1}
.pillar h3{font-size:1.08rem;margin:12px 0 6px}
.pillar p{margin:0;font-size:.92rem;color:var(--muted)}

/* loop strip */
.loop{
  background:linear-gradient(90deg,#FFEFD8,#FFF7E6);
  border:2px dashed rgba(255,138,92,.5);
  border-radius:var(--radius);
  padding:22px 26px;display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;align-items:center;
  font-family:"M PLUS Rounded 1c";font-weight:800;color:var(--ink);
}
.loop .step{background:#fff;border-radius:12px;padding:8px 16px;box-shadow:0 3px 0 rgba(10,58,87,.08)}
.loop .arrow{color:var(--coral);font-size:1.2rem}

/* module cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{
  background:var(--card);border-radius:var(--radius);padding:22px;
  border:2px solid rgba(10,58,87,.07);
  box-shadow:0 4px 0 rgba(10,58,87,.06);
  transition:transform .15s ease;
}
.card:hover{transform:translateY(-4px)}
.card .tag{
  display:inline-block;font-size:.72rem;font-weight:800;border-radius:999px;
  padding:3px 10px;margin-bottom:10px;letter-spacing:.05em;
}
.tag.learn{background:rgba(22,144,198,.14);color:var(--lagoon)}
.tag.reward{background:rgba(255,201,60,.3);color:#8A6400}
.tag.home{background:rgba(47,191,113,.16);color:#177A48}
.card h3{font-size:1.02rem;margin:0 0 6px}
.card p{margin:0;font-size:.88rem;color:var(--muted)}

/* parents (dark) */
.parents{background:var(--ink);color:#DFF2FA}
.parents .section-title,.parents h3{color:#fff}
.parents .section-lede{color:#9CC6DB}
.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 28px;max-width:860px;margin:0 auto}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}
.check .ok{flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--kelp);color:#fff;display:grid;place-items:center;
  font-size:.8rem;font-weight:900;margin-top:5px}
.parents .fineprint{max-width:860px;margin:26px auto 0;font-size:.8rem;color:#8FB9CF}

/* faq preview + generic prose */
.faq-item{background:var(--card);border-radius:14px;border:2px solid rgba(10,58,87,.07);
  margin-bottom:12px;padding:4px 20px}
.faq-item summary{cursor:pointer;font-weight:800;color:var(--ink);padding:12px 0;list-style:none}
.faq-item summary::before{content:"🫧";margin-right:8px}
.faq-item p{margin:0 0 16px;color:var(--muted);font-size:.93rem}
.center{text-align:center}
.btn{
  display:inline-block;text-decoration:none;font-family:"M PLUS Rounded 1c";font-weight:800;
  background:var(--coral);color:#fff;border-radius:999px;padding:12px 30px;
  box-shadow:0 5px 0 #D96A42;transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 5px 0 rgba(10,58,87,.15);border:2px solid rgba(10,58,87,.15)}

/* CTA sea */
.cta{
  background:linear-gradient(180deg,var(--lagoon),#0F6E9C);
  color:#fff;text-align:center;border-radius:24px;
  padding:52px 24px;margin:0 20px;
}
.cta h2{color:#fff;margin-top:0}
.cta p{color:#D8F1FB}

/* ---------- footer ---------- */
.site-footer{background:#07293F;color:#9CC6DB;padding:44px 0 30px;margin-top:70px;font-size:.86rem}
.site-footer a{color:#CFE9F5;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.foot-grid{display:flex;flex-wrap:wrap;gap:28px 60px;margin-bottom:26px}
.foot-grid h4{color:#fff;font-size:.9rem;margin:0 0 10px;font-family:"M PLUS Rounded 1c"}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin:6px 0}
.copyright{border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-size:.78rem;color:#6E97AC}

/* ---------- sub pages (privacy / faq / support) ---------- */
.page-hero{
  background:linear-gradient(180deg,var(--shallow),#BFF0F7);
  padding:52px 0 40px;text-align:center;
}
.page-hero h1{margin:0;font-size:clamp(1.5rem,3.4vw,2.1rem)}
.page-hero p{color:#1B5876;margin:8px 0 0}
.prose{max-width:760px;margin:0 auto;padding:48px 20px 20px}
.prose h2{font-size:1.25rem;margin:2.2em 0 .6em;padding-left:14px;border-left:6px solid var(--coral);border-radius:2px}
.prose h3{font-size:1.05rem;margin:1.8em 0 .4em}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem;margin:1em 0}
.prose th,.prose td{border:1px solid rgba(10,58,87,.15);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:rgba(22,144,198,.08);font-weight:800;color:var(--ink)}
.prose .updated{color:var(--muted);font-size:.85rem}
.notice{
  background:rgba(255,201,60,.18);border:2px solid rgba(255,201,60,.6);
  border-radius:14px;padding:14px 18px;font-size:.9rem;margin:1.4em 0;
}
.contact-card{
  background:var(--card);border-radius:var(--radius);padding:26px;
  border:2px solid rgba(10,58,87,.07);box-shadow:0 4px 0 rgba(10,58,87,.06);
  margin:1.2em 0;
}
.contact-card .mail{font-family:"M PLUS Rounded 1c";font-weight:800;font-size:1.15rem;color:var(--ink)}

@media (max-width:640px){
  .site-header .wrap{height:auto;padding:10px 16px;flex-wrap:wrap}
  .site-nav{margin-left:0;width:100%;justify-content:flex-start}
  section{padding:48px 0}
  .fish{width:78px}
}