:root{
  --bg:#f7f3ff; --bg2:#efeaff; --card:#ffffff; --card2:#faf7ff;
  --ink:#4b4270; --muted:#9a8fc0; --line:#ece4fb;
  --accent:#b39ae8; --accent2:#f2a6cf; --gold:#f4c65d;
  --radius:22px; --maxw:960px;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); font-size:16px; line-height:1.8;
  font-family:"Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN",-apple-system,BlinkMacSystemFont,"Noto Sans JP",sans-serif;
  background:
    radial-gradient(1000px 600px at 82% -10%, rgba(242,166,207,.20), transparent),
    radial-gradient(900px 520px at 8% 0%, rgba(179,154,232,.22), transparent),
    linear-gradient(180deg,var(--bg),var(--bg2));
  min-height:100vh;
}
a{color:inherit}
html,body{overflow-x:hidden; max-width:100%}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* header */
.site-header{position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  background:rgba(255,255,255,.78); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:62px}
.logo{display:flex; align-items:center; gap:8px; font-weight:800; text-decoration:none; letter-spacing:.02em}
.logo-mark{color:var(--gold); font-size:20px}
.nav-actions{display:flex; align-items:center; gap:18px}
.navlink{color:var(--muted); text-decoration:none; font-size:14px; font-weight:600}
.navlink:hover{color:var(--ink)}

/* buttons */
.btn{display:inline-block; border:none; cursor:pointer; font-weight:700; text-decoration:none;
  padding:12px 22px; border-radius:999px; font-size:15px; transition:transform .05s, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-primary{color:#fff; background:linear-gradient(120deg,#b39ae8,#d6a6e6);
  box-shadow:0 8px 22px rgba(179,154,232,.38)}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink)}
.btn-lg{padding:15px 34px; font-size:17px}

/* hero */
.hero{text-align:center; padding:70px 0 40px}
.eyebrow{color:var(--accent2); font-weight:700; letter-spacing:.14em; font-size:12px}
.hero h1{font-size:40px; line-height:1.3; margin:14px 0 10px; font-weight:900}
.hero h1 .hl{background:linear-gradient(120deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p.lead{color:var(--muted); font-size:17px; max-width:620px; margin:0 auto 26px}

/* cards */
.card{background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  box-shadow:0 10px 30px rgba(150,120,210,.10)}
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.section{padding:44px 0}
.section h2{font-size:24px; font-weight:800; text-align:center; margin:0 0 6px}
.section .sub{color:var(--muted); text-align:center; margin:0 0 26px}
.feature .ic{font-size:26px}
.feature h3{margin:10px 0 6px; font-size:17px}
.feature p{color:var(--muted); font-size:14px; margin:0}

/* form */
.form-card{max-width:520px; margin:0 auto}
label{display:block; font-size:13px; color:var(--muted); font-weight:700; margin:0 0 6px}
.field{margin-bottom:18px}
select,input[type=text],input[type=email],input[type=password]{
  width:100%; padding:13px 14px; border-radius:12px; border:1px solid var(--line);
  background:#f4effd; color:var(--ink); font-size:16px}
.dob{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px}

/* result */
.result-hero{text-align:center; padding:34px 0 8px}
.result-hero .guide{color:var(--gold); font-weight:700; letter-spacing:.06em}
.result-hero h1{font-size:30px; margin:8px 0 4px; font-weight:900}
.badge-row{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px 0}
.chip{border:1px solid var(--line); background:#f4effd; color:var(--muted);
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:600}
.strength-list{list-style:none; padding:0; margin:0}
.strength-list li{padding:9px 0 9px 26px; position:relative; border-bottom:1px dashed var(--line)}
.strength-list li:before{content:"✦"; color:var(--accent); position:absolute; left:2px}
.timeline{list-style:none; padding:0; margin:0}
.timeline li{display:flex; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line)}
.timeline .yr{font-weight:800; min-width:96px; color:var(--accent2)}
.timeline .th{font-weight:700}
.timeline .ag{color:var(--muted); font-size:13px; margin-left:auto}
.kbadge{display:inline-block; font-size:13px; color:var(--muted)}

/* manual (取扱説明書) */
.manual-cover{text-align:center; padding:20px 0 26px}
.manual-badge{display:inline-block; letter-spacing:.14em; font-size:11px; font-weight:800;
  color:var(--accent2); border:1px solid var(--line); border-radius:999px; padding:5px 14px}
.manual-title{font-size:30px; font-weight:900; margin:16px 0 6px; line-height:1.3}
.manual-catch{color:var(--muted); margin:0 auto 14px; max-width:560px}
.grid-2{grid-template-columns:1fr 1fr}
.sec-no{font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--accent2); margin-bottom:2px}
.sec-h{margin:0 0 10px; font-size:17px}

/* compat people */
.compat-people{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:14px; flex-wrap:wrap}
.compat-person{background:#f4effd; border:1px solid var(--line); border-radius:14px; padding:14px 18px; min-width:150px}
.cp-name{font-weight:800; font-size:16px}
.cp-key{color:var(--accent2); font-size:13px; font-weight:700; margin-top:2px}
.cp-birth{color:var(--muted); font-size:12px; font-weight:700; margin-top:4px}
.compat-x{color:var(--gold); font-weight:900; font-size:22px}

/* stat bars */
.stats{display:grid; gap:11px}
.stat{display:flex; align-items:center; gap:12px}
.stat-label{min-width:66px; font-size:13px; font-weight:700; color:var(--muted)}
.stat-track{flex:1; height:9px; border-radius:999px; background:#f4effd; overflow:hidden}
.stat-fill{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--accent2),var(--accent))}
.stat-val{min-width:26px; text-align:right; font-weight:800; font-size:13px}

/* monthly themes */
.months{list-style:none; padding:0; margin:0}
.month{display:flex; gap:16px; padding:12px 0; border-bottom:1px solid var(--line)}
.month:last-child{border-bottom:none}
.mo-ym{min-width:86px; font-weight:800; font-size:15px; color:var(--accent2)}
.mo-now{display:inline-block; margin-left:6px; background:var(--gold); color:#1a1030;
  font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; vertical-align:middle}
.mo-label{font-weight:800; font-size:16px}
.mo-hint{color:var(--muted); font-size:14px; margin-top:2px}
.month.is-current{background:linear-gradient(90deg,rgba(244,213,141,.12),transparent);
  border-radius:12px; padding-left:12px; margin-left:-12px}

/* landing (mockup layout) */
.logo-wordmark{height:26px; width:auto; display:block}
/* hero with overlay */
.hero-bg{position:relative; width:100%; aspect-ratio:16/9; max-height:600px;
  background-size:cover; background-position:center 32%; border-radius:28px; overflow:hidden;
  box-shadow:0 16px 44px rgba(150,120,210,.20)}
.hero-overlay{position:absolute; left:0; right:0; bottom:0; padding:30px 20px 26px; text-align:center;
  background:linear-gradient(to top, rgba(247,243,255,.96), rgba(247,243,255,.78) 46%, rgba(247,243,255,0))}
.hero-title{font-size:30px; line-height:1.3; font-weight:900; color:var(--accent); margin:0 0 14px;
  text-shadow:0 2px 10px rgba(255,255,255,.7)}
.hero-login{color:var(--muted); font-weight:700; text-decoration:none; font-size:14px}
.lp-lead{color:var(--muted); font-size:16px; margin:0 auto; max-width:620px}
@media (max-width:640px){
  .hero-bg{aspect-ratio:3/4; background-position:center 22%; max-height:none}
  .hero-title{font-size:24px}
}

.lp-cards2{grid-template-columns:1.4fr 1fr}
.card-h{margin:0 0 14px; font-size:17px}
.know-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.know-tile{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none;
  background:#faf7ff; border:1px solid var(--line); border-radius:16px; padding:16px 8px; transition:transform .06s, box-shadow .2s}
.know-tile:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(150,120,210,.16)}
.know-ic{font-size:26px}
.know-label{font-size:13px; font-weight:800; color:var(--ink)}
.support-card{position:relative}
.support-list{list-style:none; padding:0; margin:0}
.support-list li{padding:9px 0 9px 26px; position:relative; border-bottom:1px dashed var(--line); font-size:14px}
.support-list li:before{content:"✓"; color:var(--accent2); position:absolute; left:2px; font-weight:800}
.support-mirme{position:absolute; right:16px; bottom:14px; opacity:.9}

.can-grid{grid-template-columns:repeat(3,1fr)}
.can-card{position:relative; text-align:center; text-decoration:none; display:block}
.can-card:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(150,120,210,.18)}
.can-ic{margin-bottom:6px}
.can-title{margin:6px 0 6px; font-size:16px}
.can-desc{color:var(--muted); font-size:13px; margin:0}
.soon-badge{position:absolute; top:12px; right:12px; background:var(--accent2); color:#fff;
  font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px}
.time-badge{position:absolute; top:12px; right:12px; background:#f4effd; color:var(--muted);
  font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; border:1px solid var(--line)}
.menu-cat{font-size:19px; font-weight:900; margin:26px 0 12px}
.can-card.is-soon{opacity:.62; pointer-events:none}
.can-card{padding-top:38px}

@media (max-width:820px){
  .lp-hero{grid-template-columns:1fr; text-align:center}
  .lp-tagline{font-size:34px}
  .lp-cards2{grid-template-columns:1fr}
  .can-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .can-grid{grid-template-columns:1fr} }

/* mirme mascot */
.mirme-say{display:flex; align-items:center; gap:12px; justify-content:center; margin:8px 0 4px; flex-wrap:wrap}
.mirme-bubble{position:relative; background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:10px 16px; font-weight:700; color:var(--ink);
  box-shadow:0 6px 18px rgba(150,120,210,.12); max-width:360px}
.mirme-img{display:inline-block; vertical-align:middle; filter:drop-shadow(0 6px 10px rgba(150,120,210,.18))}
.mirme-ph{display:inline-block}
.mirme-hero{text-align:center; margin-bottom:6px}
.logo .mirme-img{margin-right:2px}

/* paywall */
.paywall{text-align:center; border-style:dashed}
.paywall-lock{font-size:30px}
/* pricing */
.plan{display:flex; flex-direction:column; position:relative}
.plan-name{margin:0 0 6px; font-size:16px; color:var(--muted)}
.plan-price{font-size:30px; font-weight:900; margin-bottom:14px}
.plan-per{font-size:14px; color:var(--muted); font-weight:700}
.plan-list{list-style:none; padding:0; margin:0 0 18px; flex:1}
.plan-list li{padding:8px 0 8px 24px; position:relative; border-bottom:1px dashed var(--line); font-size:14px}
.plan-list li:before{content:"✓"; color:var(--accent2); position:absolute; left:2px; font-weight:800}
.plan-featured{border-color:var(--gold); box-shadow:0 8px 30px rgba(244,213,141,.14)}
.plan-badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(120deg,var(--gold),#ffd9a0); color:#1a1030;
  font-size:12px; font-weight:800; padding:4px 14px; border-radius:999px}

/* life map (図解) */
.lifemap{position:relative; padding-top:64px}
.lifebar{display:flex; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.lifeseg{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:12px 2px; position:relative}
.lifeseg + .lifeseg{border-left:1px dashed rgba(255,255,255,.7)}
.seg-age{font-size:10px; font-weight:800; color:var(--muted)}
.seg-title{font-size:11px; font-weight:800; color:var(--ink); writing-mode:horizontal-tb; white-space:nowrap}
.seg-c0{background:#efe7ff}.seg-c1{background:#ffe9f4}.seg-c2{background:#e7f3ff}
.seg-c3{background:#fff3e0}.seg-c4{background:#e9fbef}
.lifeseg.is-current{outline:3px solid var(--accent); outline-offset:-3px; z-index:1}
.lifebar-scale{display:flex; justify-content:space-between; color:var(--muted); font-size:11px; font-weight:700; margin-top:6px}
.life-marker{position:absolute; top:0; transform:translateX(-50%); text-align:center; z-index:2;
  display:flex; flex-direction:column; align-items:center; line-height:1}
.life-marker-label{font-size:11px; font-weight:900; color:var(--accent); margin-top:2px}
.life-marker-pin{color:var(--accent); font-size:12px}
@media (max-width:640px){ .seg-title{display:none} .lifeseg.is-current .seg-title{display:block; font-size:10px} }

/* deep dive (いまの章) */
.deep-dive{border-color:var(--accent); box-shadow:0 12px 34px rgba(179,154,232,.22)}
.dd-story{font-weight:700; margin:0 0 14px}
.dom-list{display:grid; gap:10px}
.dom-row{display:grid; grid-template-columns:150px 1fr; gap:10px; align-items:start;
  background:#faf7ff; border:1px solid var(--line); border-radius:14px; padding:12px 14px}
.dom-label{font-size:13px; font-weight:800}
.dom-text{font-size:14px; color:var(--ink)}
@media (max-width:640px){ .dom-row{grid-template-columns:1fr} .dom-label{margin-bottom:2px} }

/* chapter details */
.ch-doms{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.ch-dom{background:#faf7ff; border:1px solid var(--line); border-radius:12px; padding:9px 12px;
  font-size:13px; color:var(--ink)}
.ch-dom b{display:block; font-size:12px; margin-bottom:2px; color:var(--muted)}
@media (max-width:640px){ .ch-doms{grid-template-columns:1fr} }

/* year list (12年詳細) */
.year-list{list-style:none; padding:0; margin:0}
.year-item{padding:16px 0; border-bottom:1px solid var(--line)}
.year-item:last-child{border-bottom:none}
.year-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.year-head .yr{font-weight:900; color:var(--accent2); min-width:74px}
.year-head .th{font-weight:800}
.year-head .ag{color:var(--muted); font-size:13px; margin-left:auto}
.milestone{background:var(--gold); color:#5b4a12; font-size:11px; font-weight:800;
  padding:2px 10px; border-radius:999px}
.year-hint{color:var(--muted); font-size:13px; margin-top:3px}
.year-detail{margin-top:10px; background:#faf7ff; border:1px solid var(--line); border-radius:14px; padding:12px 16px}
.yd-try b{font-size:12px; color:var(--muted)}
.yd-try ul{margin:6px 0 0; padding-left:18px}
.yd-try li{font-size:13px; padding:2px 0}
.yd-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.yd-chip{font-size:12px; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:5px 12px}

/* life chapters */
.chapters{list-style:none; padding:0; margin:0}
.chapter{display:flex; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.chapter:last-child{border-bottom:none}
.ch-age{min-width:92px; font-weight:800; font-size:14px; line-height:1.4}
.ch-year{font-weight:600; font-size:11px; color:var(--muted)}
.ch-title{font-weight:800; font-size:16px}
.ch-desc{color:var(--accent2); font-size:13px; font-weight:700; margin:1px 0 3px}
.ch-hint{color:var(--muted); font-size:14px}
.chapter.is-current{background:linear-gradient(90deg,rgba(185,139,255,.14),transparent);
  border-radius:12px; padding-left:12px; margin-left:-12px}
.ch-now{color:var(--gold); font-size:12px; font-weight:800; margin-left:4px}

/* footer */
.footer{border-top:1px solid var(--line); margin-top:50px; padding:26px 0; color:var(--muted); font-size:13px}
.footer-inner{display:flex; flex-direction:column; gap:12px}
.disclaimer{margin:0; font-size:12px; color:#8c82b6}
.footer-links{display:flex; gap:18px; flex-wrap:wrap}
.footer-links a{color:var(--muted); text-decoration:none}

.hide-sm{}
@media (max-width:720px){
  .hero h1{font-size:30px} .grid-3,.grid-2{grid-template-columns:1fr}
  .hide-sm{display:none} .dob{grid-template-columns:1fr 1fr 1fr}
}