/* ========== 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, 0.1);
  --city-solid: #0aa57d;
  --brand-blue: #0b6bd3;
  --container-pad-x: 20px;
  --section-gap-y: 80px;
}
* { 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) }
html,body{ overflow-x:clip; height:100% }
.section,.variants,.hero,#download{ scroll-margin-top:88px }

/* ========== TopNav / Hamburger ========== */
.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 }
.brand .brand-city{ color:var(--city-solid) }
.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 }

/* Hamburger */
.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, 560px); min-height: var(--hero-h); padding:14px 0 10px;
}
.hero__grid{
  position:relative; z-index:1; min-height: var(--hero-h);
  display:grid; grid-template-columns:1.05fr .95fr; gap:24px; align-items:center;
}
@media (max-width:1000px){ .hero__grid{ grid-template-columns:1fr; gap:16px } }

.kicker{
  display:inline-block; margin:0 0 8px; padding:6px 12px; font-weight:900; color:#0b3d68;
  font-size:clamp(1.06rem,2.8vw,1.32rem);
}
.hero__title{ margin:.5rem 0 1.5rem; line-height:1.02 }
.title-main,.title-city{ -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent }
.title-main{
  border-radius:12px; padding:6px; display:block; font-weight:900; letter-spacing:.01em;
  font-size:clamp(2.5rem,6.8vw,4rem);
  background:linear-gradient(90deg, rgba(8,78,154,.98), rgba(11,107,211,.98) 45%, rgba(42,162,255,.98));
  -webkit-text-stroke:.9px rgba(255,255,255,.98);
  text-shadow:0 1px 0 rgba(255,255,255,.88), 0 0 8px rgba(255,255,255,.35);
}
.title-city{
  border-radius:12px; padding:6px; display:block; margin-top:4px; font-weight:900; letter-spacing:.02em;
  font-size:clamp(1.9rem,5.4vw,3.2rem);
  background:linear-gradient(90deg, rgba(9,160,120,.98), rgba(5,138,96,.98) 50%, rgba(0,122,85,.98));
  -webkit-text-stroke:1.6px #fff;
  text-shadow:0 1px 0 rgba(255,255,255,.92), 0 0 10px rgba(255,255,255,.36), 0 6px 18px rgba(10,165,125,.28);
}
.float-text{ display:inline-block; animation: titleBob 7.5s ease-in-out infinite }
.float-text--delay{ animation-delay:.6s }
@keyframes titleBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }

.hero__tagline{ font-size:clamp(1.14rem,2.4vw,1.34rem); color:#26343d; margin:.4rem 0 .7rem }
.kv-brief{ list-style:none; padding:0; margin:.2rem 0 .6rem; 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 背景のデコ泡 */
.bubble-field{ position:absolute; inset:0; z-index:0; pointer-events:none }
.d-bubble{
  position:absolute; border-radius:50%; background:
    radial-gradient(35% 35% at 30% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 60%, rgba(255,255,255,.35) 72%, rgba(255,255,255,0) 74%),
    rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.5), 0 14px 26px rgba(0,0,0,.08);
}
.d1{ width:96px; height:96px; left:6%; top:6% } .d2{ width:74px; height:74px; left:42%; top:10% }
.d3{ width:124px; height:124px; right:6%; top:8% } .d4{ width:88px; height:88px; left:10%; bottom:8% }
.d5{ width:118px; height:118px; right:12%; bottom:10% } .d6{ width:64px; height:64px; left:-10px; top:34% }
.d7{ width:90px; height:90px; right:34%; top:-18px } .d8{ width:70px; height:70px; left:54%; bottom:-20px }

/* 写真“泡”（PCのみ表示） */
.kv-bubbles{ position:relative; height:100%; min-height:0; z-index:1 }
.bubble{ position:absolute; aspect-ratio:1/1; filter:drop-shadow(0 14px 26px rgba(0,0,0,.14)) }
.bubble--photo{ border-radius:50%; overflow:hidden }
.bubble--photo img{ width:100%; height:100%; object-fit:cover; filter:saturate(110%) contrast(104%) brightness(1.04) }
.bubble--photo::before, .bubble--photo::after, .bubble-gloss{ content:""; position:absolute; inset:0; pointer-events:none }
.bubble--photo::before{ background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.05) 30%, rgba(0,0,0,.08) 92%, rgba(0,0,0,.16) 100%); mix-blend-mode:multiply; border-radius:50% }
.bubble--photo::after{ background: radial-gradient(65% 65% at 50% 50%, transparent 62%, rgba(255,255,255,.6) 67%, rgba(116,185,255,.24) 74%, rgba(85,239,196,.22) 79%, transparent 86%); border-radius:50% }
.bubble-gloss{ background:
  radial-gradient(90% 65% at 20% 18%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 40%, rgba(255,255,255,0) 60%),
  radial-gradient(40% 30% at 70% 80%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%); border-radius:50%; transform: rotate(-8deg);
}
@keyframes driftA{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-18px,-14px) } }
@keyframes driftB{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(20px,-14px) } }
@keyframes driftC{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-16px,12px) } }
.animA{ animation: driftA 12s ease-in-out infinite } .animB{ animation: driftB 14s ease-in-out infinite .3s } .animC{ animation: driftC 16s ease-in-out infinite .6s }

/* 位置 */
.bL1{ width:34%; top:8%; right:4% }
.bL2{ width:28%; top:44%; right:20% }
.bL3{ width:24%; bottom:6%; right:6% }
.bL4{ width:22%; top:12%; left:2% }
.bL5{ width:20%; bottom:10%; left:10% }

/* SPはKV画像泡を非表示 */
@media (max-width:860px){ .kv-bubbles{ display:none } }

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

/* ========== Download Bar / Buttons ========== */
.download-bar{ margin: calc(var(--section-gap-y)*.6) auto 0 }
.dl-box{
  background: linear-gradient(90deg, #eef7ff, #f4fffb);
  border:1px solid #dbe7f4; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px;
}
.dl-title{ margin:0; font-size:1.22rem; color:#1f2c35 }
.dl-sub{ margin:.25rem 0 0; color:#566673; font-size:1.02rem }

.btn{
  --btn-bg:#fff; --btn-ink:#2b3a45; --btn-bd:#d7e2ee;
  display:inline-flex; align-items:center; gap:10px;
  min-height:48px; padding:1rem 1.3rem; 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-ico{ width:22px; height:22px; flex:0 0 auto }
.btn-sub{ font-weight:700; opacity:.9; margin-left:2px }
.btn--download{
  --btn-ink:#063152; font-size:1.06rem;
  background:linear-gradient(90deg,#a7d5ff,#c6e7ff 55%,#c9f6ea);
  border-color:#cfe8fb; box-shadow:0 10px 22px rgba(0,0,0,.1);
}
.btn--download:hover{ transform: translateY(-1px) }
@media (max-width:720px){
  .dl-box{ flex-direction:column; align-items:flex-start; gap:12px }
  .btn--download{ width:100%; justify-content:center }
}

/* ========== Variants / Sections ========== */
.variants{
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
  margin:22px auto var(--section-gap-y);
}
@media (max-width:1000px){ .variants{ grid-template-columns:1fr; gap:20px } }

.variant-card__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
@media (max-width:720px){ .variant-card__head{ flex-direction:column; align-items:flex-start; gap:6px } }

.variant-card{ background:var(--card); border-radius:22px; box-shadow:var(--shadow); padding:20px }
.variant-card__title{ font-size:1.22rem; margin:0; color:#21303a }
.tag{ display:inline-block; padding:.36rem .8rem; border-radius:10px; font-weight:900; font-size:.98rem; background:#fff; border:2px solid }
.tag--easy{ color:#0b3d68; border-color:#9fd0ff }
.tag--hard{ color:#0a3728; border-color:#8af0d5 }

.sheet-preview{ margin:12px 0 14px }
.sheet-preview img{
  width:100%; height:200px; object-fit:cover; border-radius:16px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.12));
}
@media (max-width:720px){ .sheet-preview img{ height:180px } }

.action-row{ display:flex; gap:12px; flex-wrap:wrap; margin:4px 0 0 }
.action-row.bubblep{ margin-top:2rem; }
.btn--ghost{ --btn-bg:#fff; --btn-ink:#2b3a45; --btn-bd:#d7e2ee; box-shadow:none; font-weight:800 }
@media (max-width:720px){
  .action-row .btn{ font-size:.95rem; padding:.8rem 1rem; min-height:44px; width:auto }
  .action-row .btn-ico{ width:20px; height:20px }
}

/* ヒント */
.variant-card__hints h3{ margin:.9rem 0 .5rem; font-size:1.02rem; color:#274353 }
.hint-grid{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)) }
@media (max-width:640px){ .hint-grid{ grid-template-columns:1fr } }
.hint{ display:inline-block; background:#f7fbff; border:1px solid #e6eef6; border-radius:999px; padding:.62rem 1rem; font-size:1rem }

/* 共通セクション */
.section{ margin: var(--section-gap-y) auto }
.section-head{ text-align:center; margin-bottom:18px }
.section-head h2{ margin:0 0 10px; font-size:clamp(1.28rem,2.8vw,1.78rem); 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 }

/* おさんぽビンゴとは？：PCは従来／SPは順番変更 */
.about-desktop{ display:block }
.about-mobile{ display:none }
.about-img{ max-width:920px; margin:12px auto }
.about-img img{
  width:100%; height:180px; object-fit:cover; border-radius:14px;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.1));
  background:linear-gradient(#fff,#fff) padding-box, radial-gradient(circle at 20% 10%, rgba(116,185,255,.35), rgba(85,239,196,.35)) border-box;
  border:2px solid transparent;
}
.about-photos{ position:relative; height:220px; max-width:920px; margin:16px auto 0 }
.about-compact{ height:200px }
.bubble-photo{ position:absolute; width:40%; max-width:380px }
.bubble-photo img{
  width:100%; height:180px; object-fit:cover; border-radius:14px;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.1));
  background:linear-gradient(#fff,#fff) padding-box, radial-gradient(circle at 20% 10%, rgba(116,185,255,.35), rgba(85,239,196,.35)) border-box;
  border:2px solid transparent;
}
.bubble-photo--left{ left:0; z-index:2; transform:rotate(-2deg) }
.bubble-photo--right{ right:0; transform:translateY(8px) rotate(3deg) }
@media (max-width:860px){
  .about-desktop{ display:none }
  .about-mobile{ display:block }
  .about-img img{ height:52vw; max-height:320px }
}

/* 保護者の方へ */
.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;
}

/* Map */
.chofu .map-embed{ margin-top:16px }
.chofu .map-embed iframe{ width:100%; height:320px; border:0; border-radius:14px }
@media (max-width:640px){ .chofu .map-embed iframe{ height:360px } }

/* 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: 120;            /* ← 前面へ（メニュー等より上） */
  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;
  pointer-events: auto;    /* ← 念のため明示 */
}
.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); }

/* セーフエリア内に収める（iOS Safari等） */
@supports (bottom: max(0px)){
  .toTopBubble{
    right: max(12px, env(safe-area-inset-right) + 12px);
    bottom: max(12px, env(safe-area-inset-bottom) + 12px);
  }
}

/* スマホでは少し小さめ */
@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; }

/* ========== 画面全体：漂うシャボン（クリックで弾ける） ========== */
/* 画面全体の漂うシャボン（ドキュメントに追随・横はみ出し禁止） */
/* ==== 画面全体シャボン（無限スクロール対策版） ==== */
/* === 画面全体シャボン（iPhone安定版）=== */
#floatingBubbles{
  position:absolute;           /* ← fixed不可。ドキュメント追随 */
  left:0; top:0;
  width:100%;
  height:1px;                  /* ← iOS: 0pxだと子が描画されない事あり */
  pointer-events:none;         /* 中の気泡のみ拾う */
  overflow:visible;            /* はみ出し描画OK（水平余白はJSで防止） */
  z-index:4;
  -webkit-transform: translateZ(0); /* iOS: 合成レイヤー化で安定 */
  /* contain: layout;  は削除（iOSで描画抜けの原因） */
}

.floating-bubble{
  position:absolute;
  border-radius:50%;
  pointer-events:auto;         /* クリックで弾ける */
  cursor:pointer;
  touch-action:manipulation;   /* iOSのタップ遅延回避 */
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.9), rgba(255,255,255,.3) 40%, transparent 70%),
    radial-gradient(circle at 70% 75%, rgba(116,185,255,.45), rgba(85,239,196,.3) 60%, transparent 80%);
  box-shadow:
    inset -5px -7px 12px rgba(255,255,255,.6),
    inset 6px 6px 14px rgba(0,0,0,.12);
  opacity:.65;
  animation: floatXY var(--dur,20s) ease-in-out infinite alternate;
  will-change: transform;
}

/* 漂いは相対移動のみ（スクロールは top 座標で表現） */
@keyframes floatXY{
  from{ transform: translate(0,0) scale(1) }
  to  { transform: translate(var(--tx,30px), var(--ty,-50px)) scale(1.08) }
}

/* 弾ける */
@keyframes bubblePop{
  0%  { transform:scale(1);   opacity:.7 }
  30% { transform:scale(1.4); opacity:1 }
  100%{ transform:scale(0);   opacity:0 }
}
.floating-bubble.is-pop{ animation: bubblePop .55s ease forwards }

/* 破片は wrap 内に（= 余白発生させない） */
#floatingBubbles .pop-dot{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.9), rgba(116,185,255,.5));
  pointer-events:none; animation: popFrag .9s ease-out forwards;
}
@keyframes popFrag{
  0%  { transform: translate(-50%,-50%) scale(.6); opacity:.9 }
  60% { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(1.1); opacity:.5 }
  100%{ transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(1.3); opacity:0 }
}

/* ToTop がSPで非表示になるケースの保険（常に表示） */
@media (max-width: 768px){
  #toTopBtn.toTopBubble{ display:grid !important; z-index:80; }
}

/* 上へ戻る用の破片レイヤー（固定） */
#bubbleFx{ position:fixed; inset:0; pointer-events:none; z-index:999 }

/* SP 改行ヘルパー */
.only-sp-br{ display:none }
@media (max-width:720px){ .only-sp-br{ display:inline } }

/* リビール */
.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;  /* ラベル中央揃え */
  }
}