/* ========== Tokens / Base (Tama Zoo：茶 × グリーン) ========== */
:root{
  /* ベース */
  --bg:#fdfbf7;
  --ink:#2b2f33;
  --muted:#5f6b76;

  /* ヒーロー背景（茶→薄グリーン→薄ベージュ） */
  --hero-top:#f3f1e7;
  --hero-mid:#ecf5ea;
  --hero-bottom:#f8f2e6;

  --card:#fff;
  --shadow:0 16px 40px rgba(0,0,0,.10);

  /* ブランド / 差し色 */
  --brand-main:#6f4e2c;   /* 濃い茶 */
  --brand-sub:#8a5a2b;    /* さらに濃い茶 */
  --accent-green:#2e7d32; /* しっかり濃い葉色（文字/ボタン） */
  --leaf:#7fbf6a;         /* 中間の葉色（タグ/罫線） */
  --leaf-soft:#eaf6e8;    /* ごく薄いミント（背景） */

  /* 足跡カラー */
  --paw-brown:#5a4633;
  --paw-green:#4d7b3a;

  --container-pad-x:20px;
  --section-gap-y:80px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
html,body{ height:100%; overflow-x:clip }
body{
  margin:0; background:var(--bg); color:var(--ink);
  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{ max-width:100%; display:block }
.container{ max-width:1120px; margin:auto; padding:0 var(--container-pad-x) }
.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 #efe6d9;
}
.topnav .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--container-pad-x);
}
.brand{ color:var(--brand-main); font-weight:900; text-decoration:none; white-space:nowrap }
.brand .brand-city{ color:var(--brand-sub) }
.menu{ list-style:none; display:flex; gap:16px; margin:0; padding:0 }
.menu a{ color:#4a3a2a; 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:#5a4836; 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; z-index:45;
    display:grid; gap:0; background:#fff; border:1px solid #efe6d9; 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;
  }
  .topnav.is-open .menu{ transform:none; opacity:1; pointer-events:auto }
  .menu li{ border-bottom:1px solid #f2e9dc } .menu li:last-child{ border-bottom:0 }
  .menu a{ display:block; padding:14px 16px; font-size:1.05rem }
}

/* ========== Hero（茶×グリーン + 足跡散らし） ========== */
.hero{
  position:relative; color:#2d241a;
  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:#6b4a2f;
  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{
  display:block; padding:6px; border-radius:12px; font-weight:900; letter-spacing:.01em;
  font-size:clamp(2.5rem,6.8vw,4rem);
  background:linear-gradient(90deg,#6f4e2c,#8a6a3e 45%,#b88e56);
  -webkit-text-stroke:.9px #fff;
  text-shadow:0 1px 0 rgba(255,255,255,.88), 0 0 8px rgba(255,255,255,.24);
}
.title-city{
  display:block; padding:6px; margin-top:4px; border-radius:12px; font-weight:900; letter-spacing:.02em;
  font-size:clamp(1.9rem,5.4vw,3.2rem);
  background:linear-gradient(90deg,#8b6a3c,#7a5430 50%,#6b4726);
  -webkit-text-stroke:1.4px #fff;
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.3), 0 6px 18px rgba(127,191,106,.22);
}
.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:#3a2e23; margin:.4rem 0 .7rem }
.kv-brief{ list-style:none; padding:0; margin:.2rem 0 .6rem; color:#5a4836 }
.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%, #c6a76d, var(--leaf));
}

/* ========== ヒーロー：足跡（肉球） ========== */
.paw-field{ position:absolute; inset:0; z-index:0; pointer-events:none }

/* 共通：茶とグリーンを交互に混ぜる */
.paw-field .paw:nth-child(2n){ --paw-color: var(--paw-green); }

/* 画像なし肉球（ベース） */
.paw{
  --paw-color: var(--paw-brown);
  position:absolute; width:92px; height:92px; opacity:.26;
  transform: rotate(var(--rot,0deg));
}
.paw::before{
  content:""; position:absolute; border-radius:50%;
  width:54px; height:46px; left:19px; top:36px;
  background: radial-gradient(circle at 35% 30%, rgba(0,0,0,.22), rgba(0,0,0,.06) 60%, transparent 80%), var(--paw-color);
}
.paw::after{
  content:""; position:absolute; border-radius:50%;
  width:18px; height:18px; left:12px; top:16px; opacity:.95;
  background: radial-gradient(circle at 35% 30%, rgba(0,0,0,.22), rgba(0,0,0,.06) 60%, transparent 80%), var(--paw-color);
  box-shadow:
    18px -2px 0 0 var(--paw-color),
    38px  0   0 0 var(--paw-color),
    56px -2px 0 0 var(--paw-color);
}

/* 画像入り肉球（大きめ・円クリップ・重ね順維持） */
.paw--img{
  width:120px; height:120px;       /* 大きく */
  opacity:.85;                      /* 画像が映える透明度 */
  --paw-color: var(--paw-brown);

  /* 掌の幾何（::before と img で共有） */
  --palm-left: 24px;
  --palm-top:  44px;
  --palm-w:    80px;
  --palm-h:    66px;

  /* 画像の直径（円） */
  --img-size:  86px;
}
.paw--img::before{
  content:""; position:absolute; border-radius:50%;
  left:var(--palm-left); top:var(--palm-top);
  width:var(--palm-w); height:var(--palm-h);
  background: radial-gradient(circle at 35% 30%, rgba(0,0,0,.22), rgba(0,0,0,.06) 60%, transparent 80%), var(--paw-color);
  z-index:0;
}
.paw--img::after{
  content:""; position:absolute; border-radius:50%;
  width:22px; height:22px; left:18px; top:22px;
  background: radial-gradient(circle at 35% 30%, rgba(0,0,0,.22), rgba(0,0,0,.06) 60%, transparent 80%), var(--paw-color);
  box-shadow:
    32px  0   0 0 var(--paw-color),
    60px  2px 0 0 var(--paw-color),
    88px  0   0 0 var(--paw-color);
  z-index:2;
}
.paw--img img{
  position:absolute;
  left: calc(var(--palm-left) + var(--palm-w)/2);
  top:  calc(var(--palm-top)  + var(--palm-h)/2);
  width: var(--img-size);
  height: var(--img-size);
  transform: translate(-50%,-50%);
  border-radius:50%;
  clip-path: circle(50% at 50% 50%);
  object-fit:cover;
  z-index:1;                         /* 掌の上／指の下 */
  filter: saturate(110%) contrast(104%) brightness(1.04);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

/* 足跡 位置（16個） */
.p1{ left:6%;  top:10%;  --rot:-12deg }
.p2{ right:8%; top:8%;   --rot: 15deg }
.p3{ left:14%; bottom:12%; --rot:-4deg }
.p4{ right:4%; bottom:10%; --rot: 22deg }
.p5{ left:44%; top:42%;  --rot:-18deg }
.p6{ right:34%; top:28%; --rot: 8deg }
.p7{ left:10%; top:40%; --rot:6deg }
.p8{ right:12%; top:46%; --rot:-10deg }
.p9{ left:32%; top:14%; --rot:18deg }
.p10{ right:28%; bottom:16%; --rot:-14deg }
.p11{ left:52%; bottom:8%; --rot:10deg }
.p12{ right:6%;  top:54%; --rot:-6deg }
.p13{ left:22%; top:66%; --rot:-9deg }
.p14{ right:22%; top:62%; --rot:9deg }
.p15{ left:58%; top:18%; --rot:-15deg }
.p16{ right:16%; top:22%; --rot:12deg }

/* 反応（SPで足跡を減らす）
   - ~1024px: 12個に削減
   - ~820px : 8個に削減（画像入りを優先して残す）
   - ~640px : 4個に削減（p1, p2, p8(画像), p9(画像)）
*/
@media (max-width:1024px){
  .paw-field .p13, .paw-field .p14, .paw-field .p15, .paw-field .p16{ display:none }
}
@media (max-width:820px){
    .paw--img{opacity:.45;}
  .paw-field .p7, .paw-field .p10, .paw-field .p11, .paw-field .p12{ display:none }
}
@media (max-width:640px){
    .paw--img{opacity:.45;}
  .paw-field .p3, .paw-field .p4, .paw-field .p5, .paw-field .p6{ 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, #f5ecd9, #e8f4e5 55%, #eaf6e8);
  border:1px solid #e1e9d8; 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:#3d2e1c }
.dl-sub{ margin:.25rem 0 0; color:#5a4836; 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:#254127; font-size:1.06rem;
  background:linear-gradient(90deg,#f5ecd9,#e8f4e5 55%,#eaf6e8);
  border-color:#e1e9d8; box-shadow:0 10px 22px rgba(0,0,0,.08);
}
.btn--download:hover{ transform: translateY(-1px) }
.btn--accent{
  --btn-ink:#fff;
  background: var(--brand-main);
  border-color: rgba(0,0,0,.08);
  color:#fff;
}
.btn--accent:hover{ filter: brightness(1.05) }
.btn--ghost{ --btn-bg:#fff; --btn-ink:#3d2e1c; --btn-bd:#e6d9c8; box-shadow:none; font-weight:800 }

@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{ background:var(--card); border-radius:22px; box-shadow:var(--shadow); padding: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__title{ font-size:1.22rem; margin:0; color:#3b2e1f }

.tag{ display:inline-block; padding:.36rem .8rem; border-radius:10px; font-weight:900; font-size:.98rem; background:#fff; border:2px solid }
.tag--easy{ color:#255c2a; border-color: var(--leaf) }
.tag--hard{ color:#6b4a26; border-color:#f3c979 }

.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 }
@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 }
}

/* 共通セクション */
.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:#3b2e1f }
.section-lead{ color:#5a4836; margin:0 }
.prose{ max-width:760px; margin:20px auto 0; color:#473a2b; font-size:clamp(1.02rem,2vw,1.08rem); line-height:1.9 }
.prose p{ margin:.9rem 0 }

/* おさんぽビンゴとは？：PC=2枚、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(200,170,120,.22), rgba(127,191,106,.22)) 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(200,170,120,.22), rgba(127,191,106,.22)) 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:linear-gradient(180deg,#ffffff, #f7fbf6);
  border:1px solid #e6efe4;
  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:#cddfc7;
}
.note.clean{
  margin:12px 2px 0; padding:12px; border-radius:10px;
  background:#fffbe9; border:1px solid #ffe2b3; color:#5a3c14;
}

/* Footer */
.site-footer{
  background: linear-gradient(135deg, #f7efe3 0%, #efe3d2 100%);
  color:#504235; 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:#2e7d32; font-weight:600; text-decoration:none }
.footer-nav a:hover{ color:#245f27; text-decoration:underline }
.footer-credits{ font-size:.9rem; color:#7a6a58 }

/* 右下：上へ戻る（肉球デザイン） */
.toTopBubble{
  position: fixed; right:18px; bottom:18px; z-index:120;
  width:62px; height:62px; border-radius:50%;
  display:grid; place-items:center; pointer-events:auto;
  background: radial-gradient(circle at 30% 28%, #fff9f0, #e6f2e5 70%);
  border: 1px solid rgba(77, 123, 58, .25);
  box-shadow: inset 0 0 10px rgba(255,255,255,.65), 0 10px 20px rgba(0,0,0,.16);
  transition: transform .2s ease, opacity .3s ease;
}
.toTopBubble:hover{ transform: scale(1.1) }
.toTopBubble .bubble-arrow{ display:none } /* ← アイコン非表示（肉球のみ） */
.toTopBubble .shine{
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 26% 26%, rgba(255,255,255,.55), transparent 42%);
  opacity:.7;
}
/* ボタンの肉球（マーク寄りの配置） */
.toTopBubble::before{
  content:""; position:absolute; left:50%; top:50%;
  width:34px; height:28px; border-radius:50%;
  transform: translate(-50%,-32%) rotate(4deg);
  background: radial-gradient(circle at 35% 30%, #4f3a22, #3a2b18);
  box-shadow: inset 0 0 6px rgba(255,255,255,.3);
}
.toTopBubble::after{
  content:""; position:absolute; left:45%; top:33%;
  width:10px; height:10px; border-radius:50%;
  transform: translate(-90%,-92%);
  background: radial-gradient(circle at 35% 30%, #4f3a22, #3a2b18);
  box-shadow: -12px 2px 0 0 #3a2b18, 14px 0 0 0 #3a2b18, 27px 2px 0 0 #3a2b18;
}

/* 安全領域（iOS） */
@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 }
}

/* 弾ける→再出現（JSでクラス付与想定） */
@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{ 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:var(--brand-main); 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, #d5ba8c, #b88e56);
}
.subpage h2{ font-size:1.24rem; font-weight:800; color:#3b2e1f; border-left:4px solid #d5ba8c; 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 #e6d9c8; 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:#b88e56; 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:#a77946 }

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

/* ========== 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;  /* ラベル中央揃え */
  }
}