/* ==========================================================================
   ポピーKids English - スタートガイドプラス
   各教材のレベル差ページ
   ========================================================================== */

/* --------------------------------------------------------------------------
   ベース
   -------------------------------------------------------------------------- */
html {
  font-family: 'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: 'Zen Maru Gothic', sans-serif;
}

#pke {
  background-color: #8f92c8;
}

#pke h2 {
  color: #cccde7;
}

footer p {
  text-align: center;
}

/* --------------------------------------------------------------------------
   レイアウト
   -------------------------------------------------------------------------- */
.page-frame {
  max-width: 980px;
  width: 80%;
  margin: 1rem auto;
  background-color: #fff;
  border-radius: 0.5rem;
  padding-bottom: 3rem;
}

.page-inner {
  width: 100%;
  display: flex;
  justify-content: center;
}

article {
  width: 100%;
}

/* --------------------------------------------------------------------------
   見出し
   -------------------------------------------------------------------------- */
h2 {
  text-align: center;
  font-size: 1.618rem;
}

h3 {
  text-align: center;
  font-size: 1.618rem;
}

.section-title {
  color: #8f92c8;
  border-bottom: 1px dotted #cccde7;
}

/* --------------------------------------------------------------------------
   レベル差グリッド
   5列構成: [教材名] [ページ種別] [レベル①] [レベル②] [レベル③]
   -------------------------------------------------------------------------- */
.level-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1.5fr 1.5fr;
  width: 100%;
  border-top: 1px solid #333;
}

/* --------------------------------------------------------------------------
   セル共通スタイル
   -------------------------------------------------------------------------- */
.cell,
.row-label,
.cell--merged,
.level-header,
.header-spacer {
  min-width: 0;
  font-size: 90%;
  border-bottom: 1px solid #333;
}

.row-label {
  padding: 0.4rem;
}

.cell,
.cell--merged {
  padding: 0.5rem;
}

/* --------------------------------------------------------------------------
   行1: PC用ヘッダー（レベル名表示）
   -------------------------------------------------------------------------- */
.header-spacer {
  grid-column: 1 / 3;
  grid-row: 1;
  background: #fff;
  /* border-bottom なし（元の box-kakusu に合わせる） */
  border-bottom: none;
}

.level-header {
  grid-row: 1;
  padding: 0.4rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   行2〜4: ポピペンBook セクション
   -------------------------------------------------------------------------- */

/* 教材名ラベル: 3行分にまたがる */
.book-label--tpen {
  grid-column: 1 / 2;
  grid-row: 2 / 5;
  background: #fff;
  padding: 0.4rem;
  font-weight: bold;
  font-size: 120%;
  line-height: 2rem;
  margin-top: 1rem;
  border-bottom: 1px solid #333;
}

/* ページ種別ラベル（ストーリー・ドリル・えじてん） */
.row-label {
  grid-column: 2 / 3;
}

/* レベル①〜③のデータセル */
.cell {
  /* grid-column は自動配置（3・4・5列目に流れる） */
}

/* えじてん: レベル②③統合セル */
.cell--merged {
  grid-column: 4 / 6;
  background-color: #e0ebaf;
}

/* --------------------------------------------------------------------------
   行5: おはなしBook セクション
   -------------------------------------------------------------------------- */
.book-label--ohanashi {
  grid-column: 1 / 3;
  background: #fff;
  padding: 0.4rem;
  font-weight: bold;
  font-size: 120%;
  line-height: 2rem;
  margin-top: 1rem;
  border-bottom: 1px solid #333;
}

.book-description {
  grid-column: 3 / 6;
  background: #fff;
  padding: 0.4rem;
  font-size: 90%;
  margin-top: 1rem;
  border-bottom: 1px solid #333;
}

/* --------------------------------------------------------------------------
   レベルバッジ（丸いラベル）
   -------------------------------------------------------------------------- */
.level-badge p {
  display: inline-block;
  text-align: center;
  border-radius: 2rem;
  padding: 0 0.2rem;
  width: 4rem;
  line-height: 1.2rem;
  font-size: 80%;
  margin: 0.1rem 0;
  color: #fff;
}

/* --------------------------------------------------------------------------
   表示切り替え（PC / タブレット / モバイル）
   -------------------------------------------------------------------------- */

/* タブレット */
@media (min-width: 601px) and (max-width: 899px) {
  .page-frame {
    width: 90%;
    padding: 0.5rem 1.5rem 3rem;
  }

  .level-grid {
    grid-template-columns: 1.2fr 1.2fr 1.5fr 1.5fr 1.5fr;
  }

  .cell,
  .row-label,
  .cell--merged,
  .level-header,
  .book-label--tpen,
  .book-label--ohanashi,
  .book-description {
    padding: 0.6rem;
  }
}

/* PC */
@media (min-width: 900px) {
  .mobile-only {
    display: none;
  }

  article {
    width: 88%;
  }
}

@media (max-width: 600px) {
  .level-grid {
    grid-template-columns: 1fr;
  }

  /* モバイルでは全セルを1列に */
  .header-spacer,
  .book-label--tpen,
  .book-label--ohanashi,
  .book-description,
  .row-label,
  .cell--merged {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }

  .book-label--tpen {
    grid-row: auto;
  }

  .pc-only {
    display: none;
  }
}

@media (max-width: 459px) {
  .page-frame {
    width: 94%;
    padding: 1rem;
  }

  .page-inner {
    padding: 0 0.2rem;
  }
}