/* =============================================================================
   ぼうけんメダル (Odymeda)
   DESIGN.md の「SuperHi × Rainbow — Style Reference」による実装。

   SuperHi の青い教室・切り絵の形を画面の骨格に、Rainbow の空、雲、虹色の
   やわらかな光をヒーローと製品の見本に重ねる。UIで使う主役色は Iris だけ。
   赤・黄・緑・桃・空色は、子どもの冒険を彩る飾りであり、操作の意味を持たない。
   日本語の丸い字形と、Rainbow の大きな表示文字を両立するため、書体は
   M PLUS Rounded 1c を表示（700–900）/ 本文（400–500）に使い分ける。
   ============================================================================= */

:root { --ink:#111118; --canvas:#f0f6ff; --paper:#fff; --frost:#e1edff; --muted:#676a78; --iris:#2727e6; --tangerine:#ff8a00; --pink:#ff54bb; --red:#ff4141; --yellow:#ffda00; --sky:#91d8ec; --green:#16ab59; --font-rounded:'M PLUS Rounded 1c',ui-rounded,'Hiragino Maru Gothic ProN',sans-serif; --page-width:1200px; --section-gap:96px; --card-radius:32px; --button-radius:999px; --shape-shadow:0 3px 0 var(--ink); }
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--canvas); font-family:var(--font-rounded); font-size:18px; font-weight:400; line-height:1.55; letter-spacing:.01em; }
img { max-width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; }
:focus-visible { outline:3px solid var(--pink); outline-offset:4px; }
.container { width:min(100%,var(--page-width)); margin:0 auto; padding:0 32px; } .text-center { text-align:center; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { color:var(--ink); }

/* Header — SuperHi の軽い教室のような白い棚 */
.navbar { position:relative; z-index:10; padding:16px 0; background:color-mix(in srgb,var(--canvas) 92%,white); border-bottom:1px solid var(--frost); }
.nav-container,.nav-actions,.brand-logo,.nav-links { display:flex; align-items:center; }.nav-container { gap:24px; }.brand-logo { gap:10px; flex:none; }.logo-icon { width:45px; height:45px; border:2px solid var(--ink); border-radius:15px; }.logo-text { font-size:18px; font-weight:800; line-height:1.05; }.logo-text small { display:block; font-size:12px; font-weight:500; letter-spacing:.08em; }.nav-links { gap:22px; margin-left:auto; }.nav-links a { font-size:15px; font-weight:700; }.nav-links a:hover { color:var(--iris); }.nav-actions { gap:10px; margin-left:16px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:12px 24px; border:2px solid transparent; border-radius:var(--button-radius); font-size:16px; font-weight:800; line-height:1.2; cursor:pointer; transition:transform 160ms ease,background-color 160ms ease,border-color 160ms ease; }.btn:hover { transform:translateY(-2px); }.btn-primary { color:#fff; background:var(--iris); border-color:var(--iris); box-shadow:var(--shape-shadow); }.btn-primary:hover { background:#1d1db5; }.btn-secondary,.btn-outline { color:var(--ink); background:var(--paper); border-color:var(--ink); box-shadow:var(--shape-shadow); }.btn-secondary:hover,.btn-outline:hover { background:var(--yellow); }.btn-lang { min-height:42px; padding:8px 13px; color:var(--ink); background:transparent; border-color:transparent; box-shadow:none; font-weight:700; }.btn-sm { min-height:42px; padding:9px 16px; font-size:14px; }.btn-lg,.btn-xl { min-height:58px; padding:14px 28px; font-size:17px; }.btn-block { width:100%; }.btn small { font-size:12px; font-weight:500; opacity:.8; }.apple-icon { font-size:20px; line-height:1; }.mobile-menu-toggle { display:none; width:44px; height:44px; padding:10px; border:2px solid var(--ink); border-radius:50%; background:#fff; cursor:pointer; }.mobile-menu-toggle span { display:block; width:18px; height:2px; margin:3px auto; background:var(--ink); }

/* Hero — Rainbow の空気と SuperHi の大きな切り絵 */
.hero { position:relative; isolation:isolate; padding:96px 0 80px; background:radial-gradient(circle at 82% 12%,#fff7c7 0 7%,transparent 7.3%),radial-gradient(circle at 95% 44%,#ffbac4 0 10%,transparent 10.3%),radial-gradient(circle at 6% 80%,#91d8ec 0 11%,transparent 11.3%),linear-gradient(155deg,#dff2ff 0%,#f0f6ff 46%,#f6ecff 100%); }.hero::before,.hero::after { position:absolute; content:''; z-index:-1; pointer-events:none; }.hero::before { width:200px; height:100px; top:80px; right:4%; background:var(--yellow); clip-path:polygon(50% 0,61% 34%,98% 35%,68% 56%,79% 94%,50% 72%,20% 94%,32% 56%,2% 35%,39% 34%); transform:rotate(13deg); }.hero::after { width:160px; height:160px; left:-65px; top:145px; border-radius:50%; background:var(--red); }.hero-content { position:relative; max-width:850px; }.badge-pill { display:inline-flex; padding:8px 16px; border:2px solid var(--ink); border-radius:var(--button-radius); background:var(--paper); box-shadow:3px 3px 0 var(--ink); font-size:14px; font-weight:700; }.hero-title { max-width:850px; margin:24px 0; font-size:clamp(52px,8.1vw,92px); font-weight:900; line-height:1.04; letter-spacing:-.055em; }.hero-title .highlight { position:relative; z-index:0; white-space:nowrap; }.hero-title .highlight::after { position:absolute; z-index:-1; content:''; height:.35em; right:-.04em; bottom:.05em; left:-.05em; border-radius:50%; background:linear-gradient(90deg,#ffdb65,#ff96ca,#9ae5f6); transform:rotate(-2deg); }.hero-subtitle { max-width:620px; margin-bottom:28px; font-size:clamp(18px,2vw,21px); line-height:1.55; }.hero-buttons { display:flex; flex-wrap:wrap; gap:14px; }.hero-stats { display:flex; gap:16px; margin-top:54px; }.stat-item { flex:1; min-width:150px; padding:20px; border:2px solid var(--ink); border-radius:24px; background:var(--paper); box-shadow:var(--shape-shadow); }.stat-item:nth-child(2) { transform:translateY(12px); background:#fff8d6; }.stat-item:nth-child(3) { background:#e5f8ed; }.stat-num { display:block; font-size:35px; font-weight:900; line-height:1; letter-spacing:-.04em; }.stat-label { display:block; margin-top:7px; font-size:14px; font-weight:700; line-height:1.35; }

section:not(.hero) { padding:var(--section-gap) 0; }.section-header { max-width:780px; margin-bottom:44px; }.section-header.text-center { margin-right:auto; margin-left:auto; }.section-title,.cta-title { font-size:clamp(38px,5vw,58px); font-weight:900; line-height:1.12; letter-spacing:-.045em; }.section-subtitle,.cta-subtitle { color:var(--muted); font-size:19px; }

/* App screenshots are product objects, on soft Rainbow clouds. */
.hero-showcase { position:relative; padding-top:54px!important; padding-bottom:54px!important; overflow:hidden; background:linear-gradient(180deg,#f7ecff 0%,#e1edff 100%); }.hero-showcase::before { position:absolute; top:-72px; left:7%; width:160px; height:160px; content:''; border-radius:50%; background:#94ffe8; }.hero-showcase::after { position:absolute; right:-50px; bottom:-120px; width:340px; height:340px; content:''; border-radius:50%; background:#ffa4ce; }.hero-visual,.shot-row { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }.shot { margin:0; }.shot img { display:block; height:auto; padding:7px; border:3px solid var(--ink); border-radius:32px; background:var(--paper); box-shadow:8px 8px 0 rgba(17,17,24,.14),inset 0 0 0 2px white; }.shot-phone img { width:250px; }.shot-watch img { width:205px; }.hero-visual .shot-phone { transform:rotate(4deg) translateY(10px); }.hero-visual .shot-watch { transform:rotate(-5deg); }

/* SuperHi の白いカードと切り絵のアクセント */
.features { position:relative; background:var(--canvas); }.features::before { position:absolute; top:65px; right:6%; width:82px; height:82px; content:''; background:var(--green); clip-path:polygon(50% 0,100% 100%,0 100%); transform:rotate(17deg); }.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; counter-reset:feature; }.feature-card,.price-card { position:relative; border:2px solid var(--ink); border-radius:var(--card-radius); background:var(--paper); box-shadow:var(--shape-shadow); }.feature-card { padding:28px; }.feature-card::before { display:grid; place-items:center; width:48px; height:48px; margin-bottom:22px; border:2px solid var(--ink); border-radius:50%; background:var(--yellow); font-size:18px; font-weight:900; counter-increment:feature; content:counter(feature); }.feature-card:nth-child(2)::before { background:var(--pink); }.feature-card:nth-child(3)::before { background:var(--sky); }.feature-card h3,.plan-header h3 { font-size:25px; font-weight:800; line-height:1.25; }.feature-card p,.plan-header p,.plan-features { color:var(--muted); font-size:16px; line-height:1.65; }.feature-card strong,.deep-text strong { color:var(--ink); font-weight:800; }
.deep-dive { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#fff 0%,#f8fbff 46%,#fff3fb 100%); }.deep-dive::before { position:absolute; z-index:0; top:22%; right:-90px; width:290px; height:290px; content:''; border-radius:50%; background:#d9f8ff; }.deep-dive::after { position:absolute; z-index:0; bottom:10%; left:-45px; width:110px; height:110px; content:''; background:var(--yellow); clip-path:polygon(50% 0,61% 36%,100% 50%,61% 64%,50% 100%,39% 64%,0 50%,39% 36%); transform:rotate(-12deg); }.deep-dive > .container { position:relative; z-index:1; }.deep-item,.deep-item.reverse { display:grid; grid-template-columns:minmax(0,1fr) 220px; grid-template-areas:"text visual"; align-items:center; gap:80px; margin-bottom:96px; }.deep-item.reverse { grid-template-columns:220px minmax(0,1fr); grid-template-areas:"visual text"; }.deep-text { grid-area:text; min-width:0; }.deep-visual { grid-area:visual; display:flex; align-items:center; justify-content:center; width:220px; min-width:0; padding:7px; border-radius:50%; background:radial-gradient(circle at 35% 30%,white,#dff2ff 62%,#d9c5ff); }.deep-tag { display:inline-block; margin-bottom:12px; padding:6px 13px; border-radius:var(--button-radius); background:var(--frost); color:var(--iris); font-size:13px; font-weight:800; }.deep-text h3 { margin-bottom:18px; font-size:clamp(30px,3.5vw,43px); font-weight:900; line-height:1.16; letter-spacing:-.035em; }.deep-text p { color:var(--muted); line-height:1.7; }.deep-visual .shot-phone { display:block; flex:0 0 205px; width:205px; }.deep-visual .shot-phone img { width:100%; }
.medals-showcase { background:linear-gradient(180deg,#f0f6ff,#fff7e7); }.medals-showcase .section-header { text-align:center; }.medals-showcase .shot { transform:rotate(-2deg); }.medals-showcase .shot:nth-child(even) { transform:rotate(3deg) translateY(16px); }
.pricing { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(180deg,#fff3fb 0%,#fff 42%,#f0f6ff 100%); }.pricing::before { position:absolute; z-index:0; top:13%; left:-80px; width:240px; height:240px; content:''; border-radius:50%; background:#ffe8a8; }.pricing::after { position:absolute; z-index:0; right:8%; bottom:7%; width:100px; height:100px; content:''; border:18px solid #ffbac4; border-radius:50%; }.pricing > .container { position:relative; z-index:1; }.pricing-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }.price-card { display:flex; flex-direction:column; padding:36px 28px 28px; }.price-card.featured { border-color:var(--iris); background:#f4f4ff; }.popular-badge { position:absolute; top:-20px; left:28px; padding:7px 15px; border:2px solid var(--ink); border-radius:var(--button-radius); background:var(--yellow); box-shadow:2px 2px 0 var(--ink); font-size:13px; font-weight:800; }.price { margin:20px 0 8px; font-size:39px; font-weight:900; letter-spacing:-.04em; }.price small { font-size:14px; font-weight:500; }.plan-features { display:grid; flex:1; gap:9px; margin:24px 0; padding:0; list-style:none; }
.faq { background:var(--canvas); }.faq-accordion { max-width:840px; margin:auto; border-top:2px solid var(--ink); }.faq-item { border-bottom:2px solid var(--ink); }.faq-question { display:flex; width:100%; padding:23px 4px; justify-content:space-between; gap:24px; border:0; color:var(--ink); background:transparent; text-align:left; font-weight:800; cursor:pointer; }.faq-icon { color:var(--iris); font-size:28px; transition:transform 160ms ease; }.faq-item.active .faq-icon { transform:rotate(45deg); }.faq-answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows 200ms ease; }.faq-answer>p { overflow:hidden; margin:0; color:var(--muted); line-height:1.65; }.faq-item.active .faq-answer { grid-template-rows:1fr; }.faq-item.active .faq-answer>p { padding:0 4px 24px; }
.cta { background:linear-gradient(135deg,#8ce8ff 0%,#e0e5ff 32%,#ffdcf0 66%,#fff1b0 100%); }.cta .container { padding:78px 32px; }.cta-title { max-width:760px; margin-right:auto; margin-left:auto; }.cta-subtitle { max-width:700px; margin:20px auto 28px; color:var(--ink); }.cta-buttons { display:flex; justify-content:center; }.cta-version { margin-bottom:0; font-size:14px; font-weight:700; }
.footer { padding:64px 0 26px; color:#fff; background:var(--ink); }.footer-container { display:flex; justify-content:space-between; gap:42px; }.footer-brand { max-width:470px; }.footer-brand .logo-text,.footer-brand p,.footer-links a { color:#fff; }.footer-brand .logo-icon { border-color:#fff; }.footer-brand p { margin-top:18px; color:#cfd1e5; }.footer-links { display:flex; flex-wrap:wrap; align-content:flex-start; gap:12px 24px; }.footer-links a { font-size:15px; font-weight:700; }.footer-links a:hover { color:var(--yellow); }.footer-bottom { margin-top:44px; padding-top:20px; border-top:1px solid #454653; color:#cfd1e5; font-size:13px; }.footer-bottom p { margin:0; }
@media (max-width:1050px) { .nav-links { display:none; }.nav-links.active { position:absolute; top:76px; right:20px; left:20px; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:12px; border:2px solid var(--ink); border-radius:24px; background:#fff; box-shadow:var(--shape-shadow); }.nav-links.active a { padding:12px 16px; }.nav-actions { margin-left:auto; }.mobile-menu-toggle { display:block; }.deep-item,.deep-item.reverse { grid-template-columns:1fr; grid-template-areas:"text" "visual"; gap:38px; margin-bottom:72px; }.deep-visual { justify-self:center; } }
@media (max-width:680px) { :root { --section-gap:70px; } body { font-size:16px; }.container { padding:0 20px; }.navbar { padding:11px 0; }.logo-icon { width:40px; height:40px; }.nav-actions .btn-primary { display:none; }.hero { padding:66px 0 62px; }.hero::before { width:120px; height:65px; top:40px; right:-20px; }.hero-title { font-size:clamp(46px,14vw,64px); }.hero-subtitle { font-size:17px; }.hero-buttons { flex-direction:column; }.hero-buttons .btn { width:100%; }.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:35px; }.stat-item { min-width:0; padding:14px 10px; border-radius:19px; }.stat-item:nth-child(2) { transform:none; }.stat-num { font-size:27px; }.stat-label { font-size:11px; }.section-title,.cta-title { font-size:39px; }.section-subtitle,.cta-subtitle { font-size:17px; }.features-grid,.pricing-cards { grid-template-columns:1fr; }.feature-card { padding:24px; }.deep-item { gap:28px; }.shot-phone img { width:205px; }.shot-watch img { width:163px; }.hero-visual { gap:12px; }.hero-showcase { padding-top:38px!important; padding-bottom:38px!important; }.deep-visual { width:100%; min-width:0; padding:17px; }.deep-visual .shot-phone { flex-basis:205px; width:205px; }.faq-question { font-size:16px; }.cta .container { padding:56px 20px; }.footer-container { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }