/* stage-select.css
   親子向け（水色 × 薄ピンク × グレー）
   既存レイアウト・仕様は完全維持（残りグレーを“根絶”）
*/

/* =========================
   カラートークン
   ========================= */
:root{
  /* ✅ 地の色を「白」にする（グレーを絶対出さない） */
  --bg: #FFFFFF;
  --text: #3A3F45;

  /* ヘッダー */
  --nav: #EAF6FB;
  --navText: #3A3F45;
  --navBtn: #FFFFFF;
  --navBtnHover: #F2F2F2;

  /* カード */
  --card: #FFFFFF;
  --card2: #F6F8FB;
  --stroke: rgba(0,0,0,0.08);

  /* アクセント */
  --primary: #F6B1B8;
  --primaryText: #FFFFFF;

  /* 影（面に見えない程度に） */
  --shadow: 0 12px 28px rgba(0,0,0,0.10);
}

/* =========================
   リセット
   ========================= */
*{ box-sizing:border-box; }

/* =========================
   ベース（グレー絶対禁止）
   ========================= */
html, body{
  height: 100%;
  background: #FFFFFF !important;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif;
  background: var(--bg);
  color: var(--text);
  overscroll-behavior: none;
}

/* =========================
   ヘッダー
   ========================= */
.top-bar{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 12px;
  background: var(--nav);
  color: var(--navText);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.top-bar button{
  background: var(--navBtn);
  color: var(--navText);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 8px 14px;
  cursor:pointer;
  font-weight: 700;
}

.top-bar button:hover{
  background: var(--navBtnHover);
}

.title{
  font-weight: 900;
}

/* ===== ヘッダー左ロゴ ===== */
.top-bar--stage .top-bar__left{
  display:flex;
  align-items:center;
  gap:10px;
}

/* ===== ヘッダー左ロゴ：大きく（レイアウト崩さない） ===== */
.app-logo{
  height: 30px;      /* ← 28px → 40px にUP（まずはこのサイズ推奨） */
  width: auto;
  display: block;
  object-fit: contain;
}


/* ===== ヘッダー右 ===== */
.top-bar--stage .top-bar__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.ghost-btn{
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #FFFFFF;
  color: var(--navText);
  font-weight: 700;
}

/* =========================
   ページタイトル（白地に統一）
   ========================= */
.page-title-wrap{
  padding: 12px 12px 6px;
  background: #FFFFFF;
}

.page-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.02em;
  text-align: left !important;
}

/* =========================
   コンテンツラップ
   ========================= */
.wrap{
  padding: 14px;
  max-width: 560px;
  margin: 0 auto;
  background: #FFFFFF;
}

/* =========================
   ステージカルーセル
   ========================= */
.stage-carousel{
  width: 100%;
  margin: 0 auto 32px;
  background: #FFFFFF;
}

.carousel-head{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  margin-bottom: 10px;
  background: #FFFFFF;
}

.hint{
  text-align:center;
  opacity: 0.9;
  font-size: 13px;
  margin: 0;
}

.carousel-track{
  display:flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background: #FFFFFF;
}

.carousel-track::-webkit-scrollbar{
  height: 8px;
}
.carousel-track::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
.carousel-track::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.04);
  border-radius: 999px;
}

.carousel-help{
  text-align:center;
  font-size: 12px;
  opacity: 0.7;
  margin-top: 2px;
  background: #FFFFFF;
}

/* =========================
   ステージカード
   ========================= */
.stage-card{
  flex: 0 0 92%;
  max-width: 520px;
  scroll-snap-align: center;

  border: 1px solid var(--stroke);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  box-shadow: var(--shadow);
  color: var(--text);

  padding: 0;
  cursor: pointer;
  text-align: left !important;
  overflow: hidden;
  position: relative;

  min-height: 78vh;

  display: flex;
  flex-direction: column;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

@media (min-width: 520px){
  .stage-card{
    flex-basis: 78%;
    min-height: 72vh;
  }
}

.stage-card:hover{ transform: translateY(-2px); }
.stage-card:active{ transform: scale(0.99); }

.stage-card:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* =========================
   画像エリア
   ========================= */
.stage-card__media{
  width: 100%;
  height: 60vh;
  min-height: 380px;
  max-height: 620px;
  background: #EAF6FB;
  position: relative;
}

.stage-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stage-card__img--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .08em;
  color: rgba(58,63,69,0.7);
  background: #EAF6FB;
}

/* =========================
   下部テキスト
   ========================= */
.stage-card__body{
  padding: 16px 16px 20px;
  margin-top: auto;
  text-align: left !important;
}

.stage-card__title{
  font-size: 22px;          /* ✅ 18 → 22（安全に拡大） */
  font-weight: 900;
  margin: 0 0 8px;
  line-height: 1.25;
}

/* 端末が広いときは少し抑える（崩れ防止） */
@media (min-width: 520px){
  .stage-card__title{
    font-size: 21px;
  }
}

.stage-card__sub{
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* ✅ 重要：CTA右に進捗を出す“横並び行”を復元（レイアウト崩れ防止）
   - JS側で .stage-card__progress を追加している現仕様を前提に、ここで整える */
.stage-card__footer{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* 既存互換：もし .stage-card__cta が footer 外でも壊れないように */
.stage-card__cta{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primaryText);
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
}

/* 進捗表示 */
.stage-card__progress{
  font-size: 12px;
  font-weight: 800;
  color: rgba(58,63,69,0.78);
  white-space: nowrap;
}

/* =========================
   編集ボタン（既存維持）
   ========================= */
.edit-link-btn{
  width: 100%;
  margin-top: 14px;
  border: none;
  padding: 12px 12px;
  border-radius: 14px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

/* =========================
   モーダル（既存維持）
   ========================= */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 1000;
}
.modal.hidden{ display:none; }

.modal-content{
  width: 92%;
  max-width: 360px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 18px;
  text-align:center;
  color: var(--text);
}

.modal-content h2{ margin: 0 0 10px; }

.modal-content p{
  margin: 0 0 14px;
  line-height: 1.7;
  color: rgba(58,63,69,0.9);
}

.btn{
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

/* =========================
   未使用マップ関連
   ========================= */
.map-wrap,
.map-img,
.hotspot,
.label,
#mapArea,
#mapImage{
  display: none;
}

/* =========================
   図鑑サマリー
   ========================= */
.zukan-summary{
  margin-top: 24px;
  padding: 20px 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: #FFFFFF;
}
/* =========================
   お知らせ（NEW）
   ========================= */
.notice-panel{
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

.notice-title{
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--text);
}

.notice-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.notice-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(234,246,251,0.45); /* 水色うっすら */
  border: 1px solid rgba(0,0,0,0.05);
}

.notice-badge{
  flex: 0 0 auto;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  background: var(--primary);
  color: #fff;
  line-height: 1.2;
}

.notice-badge--info{
  background: #7FB9D6; /* やさしい青 */
}

.notice-text{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(58,63,69,0.95);
}
.quiz-corner {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.section-head h2{
  font-size: 15px;
  margin: 0;
}

.more-link{
  font-size: 12px;
  text-decoration: none;
  opacity: .8;
}

.quiz-corner-body{
  display:grid;
  gap:10px;
}

.quiz-card{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:12px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(0,0,0,0.06);
}

.quiz-badge{
  min-width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  background: rgba(0,0,0,0.06);
}

.quiz-title{
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

.quiz-meta{
  font-size: 11px;
  opacity: .7;
  margin-top: 2px;
}

.quiz-actions{
  display:flex;
  gap:10px;
  margin-top: 10px;
}

.btn-main, .btn-sub{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  border: none;
  cursor: pointer;
}

.btn-main{
  flex:1;
  font-weight:700;
  background: rgba(0,0,0,0.85);
  color:#fff;
}

.btn-sub{
  background: rgba(0,0,0,0.06);
}
/* ===== footer ===== */
.site-footer{
  margin-top: 18px;
  padding: 18px 0 24px;
  background: #fff;
}
.site-footer__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
  color: rgba(0,0,0,.55);
  font-size: 12px;
}
.site-footer__links a{
  color: rgba(0,0,0,.7);
  text-decoration: none;
}
.site-footer__links a:hover{
  text-decoration: underline;
}
.site-footer__links .sep{
  display: inline-block;
  margin: 0 8px;
  color: rgba(0,0,0,.35);
}
.site-footer__copy{
  margin-top: 8px;
  color: rgba(0,0,0,.45);
}
/* ✅ サービス紹介バナー */
.intro-banner{
  text-align: center;   /* 中央配置 */
  padding: 0;
  margin: 0;
}

.intro-banner__img{
  width: 370px;
  height: 50px;
  object-fit: cover;     /* はみ出しを中央トリミング */
  border-radius: 12px;   /* 丸みを残すなら */
}

.intro-banner__link:active{
  transform: scale(0.99);
}
/* バナーの下余白を削除 */
.intro-banner{
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ステージエリアの上余白を削除 */
.wrap{
  padding-top: 0;
}

/* 念のため */
.stage-carousel{
  margin-top: 0;
}
.intro-banner{
  margin-top: 5px;   /* ← 好みで 8〜16px くらい */
}
/* ===============================
   Responsive: tablet / PC 最適化
   スマホ(〜767px)は現状維持
   =============================== */

/* 画面が大きい時は、全体の“中身”を広げる */
@media (min-width: 768px){
  /* 余白を少し増やして読みやすく */
  .wrap{
    max-width: 960px;     /* ← ここで“スマホ幅固定”を脱却 */
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* タイトル周りも少し余裕 */
  .page-title-wrap{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ヘッダーも中央寄せで見栄えUP（クラスがある前提） */
  .top-bar--stage{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ステージの“見える面積”を増やす */
  .stage-carousel{
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* PCはさらに広く */
@media (min-width: 1024px){
  .wrap,
  .page-title-wrap,
  .top-bar--stage,
  .stage-carousel{
    max-width: 1120px;
  }
}

/* もしカルーセルのカードが小さいなら、PCだけ大きくする（クラス名は合わせて調整） */
@media (min-width: 768px){
  .carousel-card{
    width: 320px;         /* ← 例：カードが小さすぎる場合の対策 */
  }
}