/* ========== Tokens / Base ========== */
:root{
  --bg:#fdfdfd; --ink:#2b2f33; --muted:#5f6b76;
  --hero-top:#f7fbff; --hero-mid:#eaf6ff; --hero-bottom:#fff8ec;
  --card:#fff; --shadow:0 16px 40px rgba(0,0,0,.1);
  --container-pad-x:20px; --section-gap-y:80px;
  --brand-acc:#0b6bd3;
      --brand-blue: #0b6bd3;
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Rounded Mplus 1c","Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.85; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100% }
.container{ max-width:1120px; margin:auto; padding:0 var(--container-pad-x) }
.section{ margin: var(--section-gap-y) auto }
.section,.hero{ scroll-margin-top:88px }

/* ========== TopNav（ブランド非表示） ========== */
.topnav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom:1px solid #edf1f5;
}
.topnav .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--container-pad-x);
}
.brand {
    color: var(--brand-blue);
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}
.nav-spacer{ width:120px; height:1px } /* 左側の余白バランス */
.menu{ display:flex; gap:16px; list-style:none; margin:0; padding:0 }
.menu a{ color:#42505a; text-decoration:none; font-weight:800; padding:6px 0; white-space:nowrap }
.nav-toggle{
  display:none; position:relative; width:42px; height:36px; border:0; background:transparent; cursor:pointer;
}
.nav-toggle__bar{ position:absolute; left:8px; right:8px; height:3px; background:#42505a; border-radius:2px }
.nav-toggle__bar:nth-child(1){ top:9px } .nav-toggle__bar:nth-child(2){ top:16.5px } .nav-toggle__bar:nth-child(3){ top:24px }
.topnav.is-open .nav-toggle__bar:nth-child(1){ transform: translateY(7.5px) rotate(45deg) }
.topnav.is-open .nav-toggle__bar:nth-child(2){ opacity:0 }
.topnav.is-open .nav-toggle__bar:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg) }
@media (max-width:920px){
  .nav-toggle{ display:inline-block }
  .menu{
    position:fixed; left:12px; right:12px; top:56px;
    display:grid; gap:0; background:#fff; border:1px solid #edf1f5; border-radius:14px; padding:8px 0;
    box-shadow:0 20px 40px rgba(0,0,0,.1);
    transform: translateY(-18px); opacity:0; pointer-events:none;
    transition: opacity .18s ease, transform .18s ease; z-index:45;
  }
  .topnav.is-open .menu{ transform:none; opacity:1; pointer-events:auto }
  .menu li{ border-bottom:1px solid #eef2f6 } .menu li:last-child{ border-bottom:0 }
  .menu a{ display:block; padding:14px 16px; font-size:1.05rem }
}

/* ========== Hero ========== */
.hero{
  position:relative; color:#263238;
  background:linear-gradient(180deg,var(--hero-top) 0%,var(--hero-mid) 58%,var(--hero-bottom) 100%);
  --hero-h: clamp(340px, 56vw, 520px); min-height: var(--hero-h); padding:18px 0 12px;
}
.hero__grid{
  position:relative; z-index:1; min-height: var(--hero-h);
  display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; gap:16px } }

.kicker{
  display:inline-block; margin:0 0 8px; padding:6px 12px; border-radius:12px;
  border:2px solid rgba(11,107,211,.28); font-weight:900; color:#0b3d68; background:#fff;
  font-size:clamp(1.06rem,2.8vw,1.32rem);
}
.hero__title{ margin:.5rem 0 1.1rem; line-height:1.08 }
.title-main{
  display:block; font-weight:900; letter-spacing:.01em; font-size:clamp(2.2rem,6.2vw,3.6rem);
  color:#0b3d68;
}
.title-sub{ display:block; font-weight:800; color:#075596; margin-top:.1rem }
.hero__tagline{ font-size:clamp(1.08rem,2.2vw,1.24rem); color:#26343d; margin:.5rem 0 .7rem }
.kv-brief{ list-style:none; padding:0; margin:.2rem 0 .9rem; color:#4c5a64 }
.kv-brief--stack li{ margin:.24rem 0; line-height:1.75; position:relative; padding-left:16px }
.kv-brief--stack li::before{
  content:""; position:absolute; left:0; top:.82em; width:7px; height:7px; border-radius:50%;
  background: radial-gradient(circle at 40% 30%, #74b9ff, #55efc4);
}
.hero-actions{ margin-top:.8rem }

.kv-art{ display:flex; align-items:center; justify-content:center }
.kv-badge{
  display:grid; place-items:center; width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #a7d5ff, #c9f6ea);
  color:#063152; font-weight:900; box-shadow:0 16px 40px rgba(0,0,0,.12);
  letter-spacing:.06em; text-align:center; line-height:1.2;
}

.divider-curve{ display:block; width:100%; height:84px } .divider-curve path{ fill:#fff }

/* ========== Buttons ========== */
.btn{
  --btn-bg:#fff; --btn-ink:#2b3a45; --btn-bd:#d7e2ee;
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:1rem 1.2rem; border-radius:14px; border:2px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-ink); font-weight:900; text-decoration:none; cursor:pointer;
}
.btn--accent{
  --btn-ink:#063152;
  background:linear-gradient(90deg,#a7d5ff,#c6e7ff 55%,#c9f6ea);
  border-color:#cfe8fb; box-shadow:0 10px 22px rgba(0,0,0,.1);
}
.btn--accent:hover{ transform: translateY(-1px) }

/* ========== Content blocks ========== */
.section-head{ text-align:center; margin-bottom:18px }
.section-head h2{ margin:0 0 10px; font-size:clamp(1.28rem,2.6vw,1.7rem); color:#20303a }
.section-lead{ color:#60707e; margin:0 }
.prose{ max-width:760px; margin:20px auto 0; color:#41505b; font-size:clamp(1.02rem,2vw,1.08rem); line-height:1.9 }
.prose p{ margin:.9rem 0 }

/* 保護者カード */
.parent-card{
  max-width:900px; margin:18px auto 0; padding:20px;
  background:#fff; border:none; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.parent-list{ list-style:none; padding:0; margin:0 0 12px; font-size:1.07rem; line-height:1.95; color:#2b3740 }
.parent-list li{ position:relative; padding-left:16px; margin:.2rem 0 }
.parent-list li::before{
  content:""; position:absolute; left:0; top:.84em; width:6px; height:6px; border-radius:50%; background:#9fc9ff;
}
.note.clean{
  margin:12px 2px 0; padding:12px; border-radius:10px;
  background:#fff7e8; border:1px solid #ffe2b3; color:#5a3c14;
}

/* Footer */
.site-footer{
  background: linear-gradient(135deg, #f7faff 0%, #e6f7ff 100%);
  color:#444; padding:2.5rem 1rem; text-align:center;
}
.site-footer .footer-inner{ max-width:960px; margin:0 auto }
.footer-nav{
  margin-bottom:1rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem;
}
.footer-nav a{ color:#0077aa; font-weight:600; text-decoration:none }
.footer-nav a:hover{ text-decoration:underline }
.footer-credits{ font-size:.9rem; color:#666 }

/* ToTop（丸ボタン） */
.toTopBubble{
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(116,185,255,.7), rgba(85,239,196,.55));
  box-shadow: inset 0 0 12px rgba(255,255,255,.5), 0 10px 24px rgba(0,0,0,.15);
  border: 1px solid rgba(255,255,255,.4);
  transition: transform .2s ease, opacity .3s ease;
}
.bubble-arrow{ width: 26px; height: 26px; stroke: #fff; opacity:.9; filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); }
.toTopBubble .shine{ position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.6), transparent 40%); opacity:.6; }
.toTopBubble:hover{ transform: scale(1.1) }
@media (max-width:720px){ .toTopBubble{ width:56px; height:56px } .bubble-arrow{ width:22px; height:22px } }
@keyframes popButton{ 0%{transform:scale(1);opacity:1}40%{transform:scale(1.2);opacity:.8}100%{transform:scale(0);opacity:0} }
.toTopBubble.is-pop{ animation: popButton .5s ease forwards }
@keyframes returnBubble{ 0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1} }
.toTopBubble.is-return{ animation: returnBubble .4s ease forwards }

/* Reveal */
.reveal{ opacity:0; transform:translateY(16px); transition: opacity .6s ease, transform .6s ease }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none } }

/* ==== サブページ共通（フッター吸着） ==== */
body.subpage{ min-height:100dvh; display:flex; flex-direction:column }
.subpage main{ flex:1 0 auto }
.subpage h1{
  font-size:1.9rem; font-weight:900; color:#0b6bd3; text-align:center; margin:4rem 0 3rem;
}
.subpage h1::after{
  content:""; display:block; width:60px; height:4px; margin:.75rem auto 0; border-radius:2px;
  background: linear-gradient(90deg, #4fc3f7, #81d4fa);
}
.subpage h2{ font-size:1.24rem; font-weight:800; color:#20303a; border-left:4px solid #74b9ff; padding-left:.6rem; margin:2rem 0 1rem }
.subpage p{ margin-bottom:1rem }
.subpage p, .subpage li{ color:#2b2f33; line-height:1.9; font-size:1.02rem }
.subpage .embed-card{
  background:#fff; border:1px solid #e6eef6; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.05); padding:12px; overflow:hidden;
}

/* サブページ：トップへ戻る（シンプル泡） */
.back-to-top{ text-align:center; margin:4rem 0 6rem }
.btn-back-bubble{
  display:inline-block; padding:.75rem 1.6rem; border-radius:999px; background:#74b9ff; color:#fff;
  font-weight:700; text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-back-bubble:hover{ transform: translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.18); background:#4aa3f0 }
@keyframes bubble-pop{ 0%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.3); opacity:.8 } 100%{ transform:scale(0); opacity:0 } }

/* ========== Other Areas（画像なしのリンクカードを整える） ========== */
#other-areas .variants,
.variants.variants--mini{
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 820px){
  #other-areas .variants,
  .variants.variants--mini{ grid-template-columns: 1fr ;}
}

#other-areas .variant-card,
.variant-card--compact{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid #e6d9c8;                /* 茶系テーマに合わせた枠 */
  background:
    linear-gradient(180deg, #fff, #fffdf8);  /* ほのかな段差 */
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease;
}
#other-areas .variant-card:hover,
.variant-card--compact:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

#other-areas .variant-card__head{
  margin: 0;
  gap: 10px;
  display: flex;
  align-items: center;
}
#other-areas .variant-card__title{
  margin: 0;
  font-size: 1.06rem;
  color: #3b2e1f;
}

/* ボタン周りを右寄せ・コンパクトに */
#other-areas .action-row{
  margin: 0 0 0 auto;
}
#other-areas .action-row .btn{
  min-height: 42px;
  padding: .7rem 1rem;
}
#other-areas .action-row .btn-ico{
  width: 18px; height: 18px;
}

/* タグの色（既存のeasy/hardに加えてポータル用） */
.tag--portal{
  color: #355e3b;               /* グリーン寄りで差別化 */
  border-color: #b8ddb9;
  background: #fff;
}
/* === Other Areas：SPで見出し→ボタンの縦並び === */
@media (max-width: 820px){
  #other-areas .variant-card,
  .variant-card--compact{
    flex-direction: column;   /* 横→縦 */
    align-items: stretch;     /* 横幅いっぱいで揃える */
    gap: 10px;
    text-align: left;
  }

  #other-areas .variant-card__head{
    width: 100%;
    margin: 0;
  }

  /* ボタン行を下段・全幅に */
  #other-areas .action-row{
    margin: 0;                /* 右寄せ解除 */
    width: 100%;
    justify-content: flex-start;
  }
  #other-areas .action-row .btn{
    width: 100%;              /* タップしやすいよう全幅 */
    min-height: 48px;
    justify-content: center;  /* ラベル中央揃え */
  }
}