/*
Theme Name: kotonoha-project
Theme URI: https://kotonoha-project.jp/
Author: kotonoha-project
Description: Kotonoha Project original minimal theme.
Version: 0.2
Text Domain: kotonoha-project
*/

/* ==================================================
   01. Base
================================================== */

body {
    margin: 0;
    background: #ffeef7;
    color: #333;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
    line-height: 1.8;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==================================================
   02. Header
================================================== */

.site-header {
    position: relative;
    padding: 28px 20px 24px;
    background:
        linear-gradient(
            rgba(255, 250, 252, 0.55),
            rgba(255, 250, 252, 0.55)
        ),
        url("img/header-pattern.jpeg");
    background-size: cover;
    background-position: center;
}

.site-header__inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 18px 20px;
    border-radius: 22px;
    background: rgba(255, 250, 252, 0.66);
}

.site-brand {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px;
    align-items: center;
}

.site-brand__image img {
    display: block;
    width: 120px;
    height: auto;
    border-radius: 18px;
    border: 1px solid rgba(247, 161, 196, 0.45);
}

.site-brand__text {
    min-width: 0;
}

.site-title {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
}

.site-title a {
    color: #333;
    text-decoration: none;
}

.site-description {
    margin: 10px 0 0;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ==================================================
   03. Navigation
================================================== */

.site-nav {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.site-nav a {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #f7a1c4;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
}


/* ==================================================
   04. Main
================================================== */

.site-main {
    max-width: 960px;
    margin: 24px auto;
    padding: 24px;
    background: #ffffff;
    border: 2px solid #f7a1c4;
    border-radius: 20px;
}


/* ==================================================
   05. Hero
================================================== */

.hero__eyebrow {
    margin: 0 0 14px;
    font-weight: 700;
}

.hero__title {
    margin: 0;
    font-size: 2rem;
    line-height: 1.4;
}

.hero__text {
    margin: 24px 0 0;
}


/* ==================================================
   06. Home Section
================================================== */

.home-section {
    margin-top: 32px;
}

.home-section h2 {
    margin: 0 0 16px;
}


/* ==================================================
   07. Home Cards
================================================== */

.home-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 32px;
}

.home-card {
    display: block;
    padding: 18px;
    border: 1px solid #f7a1c4;
    border-radius: 18px;
    background: #fffafc;
    color: #333;
    text-decoration: none;
}

.home-card:link,
.home-card:visited,
.home-card:hover,
.home-card:active {
    color: #333;
    text-decoration: none;
}

.home-card__label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #c8749b;
    letter-spacing: 0.08em;
}

.home-card strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.home-card p {
    margin: 0;
    font-size: 0.95rem;
    color: #555;
}

/* ==================================================
   08. Footer
================================================== */

.site-footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px 40px;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
    color: #555;
    font-size: 0.9rem;
}

.site-footer__left {
    text-align: left;
}

.site-footer__center {
    text-align: center;
    color: #c8749b;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.site-footer__right {
    text-align: right;
}

/* ==================================================
   09. Page
================================================== */

.page-content {
    width: 100%;
    max-width: none;
}

.page-title {
    margin: 0 0 28px;
    font-size: 2rem;
    line-height: 1.4;
}

.page-body p {
    margin: 0 0 1.4em;
}

.page-body h2 {
    margin: 2.2em 0 0.8em;
    padding-bottom: 0.35em;
    border-bottom: 2px solid #f7a1c4;
    font-size: 1.4rem;
}

.page-body h3 {
    margin: 1.8em 0 0.6em;
    color: #c8749b;
    font-size: 1.15rem;
}

.page-eyecatch {
    margin: 0 0 24px;
}

.page-eyecatch img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}

.page-eyecatch {
    margin: 0 0 24px;
}

.page-eyecatch img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
}


/* ==================================================
   10. GBSS
================================================== */

/* 10-01. GBSS本文
================================================== */

.gbss {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}

.gbss p {
    margin: 0 0 1.4em;
}

.gbss h2 {
    position: relative;
    margin: 2.4em 0 1em;
    padding: 14px 18px;
    border: 2px solid #f7a1c4;
    border-radius: 16px;
    background: linear-gradient(90deg, #fff7fb, #f6f1ff);
    font-size: 1.35rem;
    line-height: 1.5;
}

.gbss h2::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 24px;
    width: 70px;
    height: 22px;
    border-radius: 6px;
    background: rgba(247, 161, 196, 0.35);
    transform: rotate(-3deg);
}

.gbss h3 {
    margin: 2em 0 0.9em;
    padding: 0.25em 0 0.25em 0.65em;
    border-left: 5px solid #f7a1c4;
    color: #c8749b;
    font-size: 1.18rem;
    line-height: 1.5;
}

.gbss h3::before {
    content: "🌷 ";
    font-size: 0.9em;
}

.gbss h4 {
    display: inline-block;
    margin: 1.2em 0 0.6em;
    padding: 0.25em 0.7em;
    border-radius: 999px;
    background: #fff5fa;
    color: #777;
    font-size: 0.95rem;
    line-height: 1.4;
    font-weight: 700;
}

/* 10-02. GBSSカード
================================================== */

.gbss-cards,
.gbss-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
}

.gbss-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.gbss-card:link,
.gbss-card:visited,
.gbss-card:hover,
.gbss-card:active {
    color: #333;
    text-decoration: none;
}

.gbss-card:hover {
    transform: translateY(-2px);
    transition: 0.2s;
}

.gbss-card.expression {
    border-color: #d8b4fe;
}

.gbss-card__img img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.gbss-card__body {
    flex: 1;
}

.gbss-card__label {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #c8749b;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.gbss-card__title {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
}

.gbss-card__text {
    font-size: 14px;
    color: #666;
}

/* 10-03. GBSS目次
================================================== */

.gbss-toc {
    margin: 0 0 32px;
    padding: 16px 18px;
    border: 1px solid #f7a1c4;
    border-radius: 18px;
    background: #fffafc;
}

.gbss-toc-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 700;
    color: #c8749b;
}

.gbss-toc-list,
.gbss-toc-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gbss-toc-item {
    margin: 0.45em 0;
}

.gbss-toc-item--h2 > a {
    color: #444;
    text-decoration: none;
    font-weight: 600;
}

.gbss-toc-item--h3 {
    margin-left: 1em;
    font-size: 0.95rem;
}

.gbss-toc-item--h3 > a {
    color: #666;
    text-decoration: none;
}

.gbss-toc a:hover {
    text-decoration: underline;
}

/* 10-04. GBSS物語・引用
================================================== */

.gbss-story-note {
    margin: 1em 0 1.6em;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fffafc;
    border: 1px dashed #f7a1c4;
}

.gbss-story-card {
    margin: 1.6em 0 2em;
    padding: 16px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #f3bfd4;
}

.gbss-quote {
    margin: 1.2em 0;
    padding: 14px 16px;
    border-left: 3px solid #e3d7f4;
    background: #fdfaff;
    color: #444;
    font-weight: 600;
    line-height: 1.7;
}

.gbss-meaning-note {
    padding: 12px 16px;
    border-radius: 14px;
    background: #f8f3ff;
    font-weight: 600;
}

/* 10-05. GBSS自動一覧
================================================== */

.gbss-wbss-search {
    margin: 2.4em 0 0;
}

.gbss-wbss-search details {
    border: 1px solid #f7a1c4;
    border-radius: 18px;
    background: #fffafc;
    overflow: hidden;
}

.gbss-wbss-search summary {
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 700;
    color: #c8749b;
    list-style: none;
}

.gbss-wbss-search summary::-webkit-details-marker {
    display: none;
}

.gbss-wbss-search summary::after {
    content: "＋";
    float: right;
}

.gbss-wbss-search details[open] summary::after {
    content: "－";
}

.gbss-wbss-search ul {
    margin: 0;
    padding: 0 18px 18px 2em;
}

.gbss-wbss-search li {
    margin: 0.55em 0;
    line-height: 1.6;
}

.gbss-wbss-search a {
    color: #444;
    text-decoration: none;
}

.gbss-wbss-search a:hover {
    color: #c8749b;
    text-decoration: underline;
}

/* 10-06. GBSS戻る案内
================================================== */

.gbss-back-note {
    display: block;
    margin: 2em 0 0;
    font-size: 0.85rem;
    color: #777;
    text-align: right;
}

/* ==================================================
   20. WBSS
================================================== */

/* 20-01. WBSS紹介カード
   固定ページ /wbss/ の二段目
================================================== */

.wbss-intro-card {
  margin: 28px 0 36px;
  padding: 28px 32px;
  border: 1.5px solid #efb2cf;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8fc 0%, #ffffff 70%);
}

.wbss-intro-card h2 {
  margin: 0 0 18px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-size: 1.45rem;
  color: #d36b9f;
}

.wbss-intro-card p {
  margin: 0 0 24px;
  line-height: 1.9;
}

.wbss-intro-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.wbss-intro-buttons a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  padding: 14px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
}

.wbss-main-button {
  background: #df6fa7;
  color: #fff;
}

.wbss-sub-button {
  background: #fff;
  color: #d36b9f;
  border: 1.5px solid #df8fbb;
}

/* スマホ縦・横：ボタンは1列 */
@media (max-width: 900px) {
  .wbss-intro-card {
    padding: 22px 18px;
  }

  .wbss-intro-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .wbss-intro-buttons a {
    width: 100%;
  }
}


/* 20-02. WBSS最新10話カード
================================================== */

.wbss-latest-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0 36px;
}

.wbss-latest-card {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #efb2cf;
  border-radius: 12px;
  background: #fff;
  color: #333;
  text-decoration: none;
}

.wbss-latest-card__thumb img {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
}

.wbss-latest-card__title {
  display: block;
  font-weight: 700;
  line-height: 1.5;
}

.wbss-latest-card__date {
  display: block;
  margin-top: 2px;
  color: #888;
  font-size: 0.85rem;
}

.wbss-latest-card__arrow {
  color: #c8749b;
  font-size: 1.4rem;
}

.wbss-latest-section {
  margin: 28px 0 36px;
  padding: 28px 32px;
  border: 1.5px solid #efb2cf;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff8fc 0%, #ffffff 70%);
}

.wbss-latest-section h2 {
  margin: 0 0 18px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font-size: 1.45rem;
  color: #d36b9f;
}

.wbss-latest-section p {
  margin: 0 0 24px;
  line-height: 1.9;
}

@media (min-width: 700px) {
  .wbss-latest-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 699px) {
  .wbss-latest-card {
    grid-template-columns: 72px 1fr auto;
    min-height: 104px;
    padding: 12px;
    gap: 12px;
  }

  .wbss-latest-card__thumb img {
    width: 72px;
    height: 72px;
  }

  .wbss-latest-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* 2行まで表示 */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 20-03. WBSS コーヒーブレイク */
.wbss-pickup-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  align-items: center;

  padding: 12px;
  border: 1px solid #efb2cf;
  border-radius: 12px;
  background: #fff;

  text-decoration: none;
  color: #333;
}

.wbss-pickup-card__thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}

.wbss-pickup-card__body {
  display: block;
}

.wbss-pickup-card__title {
  display: block;
  font-weight: 700;
  line-height: 1.5;
}

.wbss-pickup-card__text {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  color: #777;
}

.wbss-pickup-card__arrow {
  font-size: 1.4rem;
  color: #c8749b;
}

.wbss-pickup-card img {
  max-width: 100%;
  height: auto;
}


/* ==================================================
   30. KPAI
   --------------------------------------------------
   KPAI = AI講座まわりの共通デザイン。

   注意：
   .kpai は「AI講座全体の共通ラッパー」。
   AIトップ / 小学生トップ / 各話本文で共通して使う。

   ただし、h2 は影響範囲が広い。
   .kpai h2 は KPAI内のすべての h2 に効くため、
   カード内タイトルやヒーロー内タイトルにも波及する。
   大きな余白・強い装飾は避ける。

   基本方針：
   - .kpai h2 は軽い見出し装飾のみ
   - 枠・背景・大きな余白は section / card 側で持つ
   - カード内タイトルは専用classを優先する
================================================== */


/* --------------------------------------------------
   30-00. KPAI variables
   --------------------------------------------------
   キャラクター色と会話アイコンの画像パス。
   会話ボックス kpai-talk 系で使用する。
-------------------------------------------------- */

:root {
    --kpai-sakura: #F7A1C4;
    --kpai-sumire: #B6A6E8;
    --kpai-hachi: #6F8FAF;

    --kpai-icon-sakura: url("/wp-content/uploads/kpai/kpai-icon-sakura.png");
    --kpai-icon-hachi: url("/wp-content/uploads/kpai/kpai-icon-hachi.png");
    --kpai-icon-sumire: url("/wp-content/uploads/kpai/kpai-icon-sumire.png");
}


/* --------------------------------------------------
   30-01. KPAI base wrapper
   --------------------------------------------------
   KPAI全体の共通ラッパー。
   AIトップ、小学生トップ、各話本文のすべてで使う。

   例：
   <div class="kpai">
   <div class="kpai kpai-ai-top">
   <div class="kpai kpai-ai-kids">
   <div class="kpai kpai-ai-kidstalk">
-------------------------------------------------- */

.kpai {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}


/* --------------------------------------------------
   30-02. KPAI framed blocks
   --------------------------------------------------
   枠つきの大きな部品。

   .kpai-hero
     AIトップの導入カード

   .kpai-lesson-header
     小学生トップや各講座入口の紹介カード

   .kpai-summary
     各話本文の「今日のまとめ」カード

   注意：
   ここは「枠・背景・余白」を持つ。
   中に h2 を入れると .kpai h2 が当たるため、
   タイトルは専用classを推奨。
-------------------------------------------------- */

.kpai-hero,
.kpai-lesson-header,
.kpai-summary {
    margin: 0 0 32px;
    padding: 26px 28px;
    border: 1.5px solid #efb2cf;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff8fc 0%, #f7f2ff 100%);
}


/* --------------------------------------------------
   30-03. KPAI framed block titles
   --------------------------------------------------
   枠つきカード内のタイトル用。
   h2ではなく、専用classで使う。

   例：
   <div class="kpai-lesson-header__title">小学生にもわかるAI講座</div>

   h2の本文見出しCSSと分離するためのクラス。
-------------------------------------------------- */

.kpai-lesson-header__title {
    margin: 0 0 16px;
    color: #d36b9f;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.5;
}


/* --------------------------------------------------
   30-04. KPAI labels
   --------------------------------------------------
   小さなラベル文字。
   AIの入口 / レベル表示 / 投稿番号などに使用。
-------------------------------------------------- */

.kpai-hero__label,
.kpai-lesson-number {
    margin: 0 0 10px;
    color: #c8749b;
    font-weight: 700;
    letter-spacing: 0.08em;
}


/* --------------------------------------------------
   30-05. KPAI headings
   --------------------------------------------------
   KPAI内のh2基本。

   注意：
   .kpai h2 は KPAI内すべてのh2に効く。
   そのため、強いmargin-topやカード風装飾は避ける。

   目的：
   - 見出しとして少し目立たせる
   - 下線で区切りを出す
   - 上方向には大きな余白を持たせない

   枠・大きな余白・カード風デザインは
   .kpai-hero / .kpai-lesson-header / .kpai-summary 側で管理する。
-------------------------------------------------- */

/* KPAI｜h2 基本 */
.kpai h2 {
    margin: 0 0 1.2em;
    padding: 0 0 0.35em;
    border: none;
    border-bottom: 2px solid #f3a4c8;
    background: none;
    color: #d36b9f;
    font-size: 1.4rem;
    line-height: 1.45;
}

.kpai h3 {
    margin: 0 0 16px;
    color: #d36b9f;
    font-size: 1.25rem;
}


/* --------------------------------------------------
   30-06. KPAI cards
   --------------------------------------------------
   AIトップや小学生トップで使うカード一覧。
   講座レベル別カードなど。

   .kpai-card-list
     カードを並べる親

   .kpai-card
     1枚のカード

   .kpai-card__level
     レベル表示

   .kpai-card--coming
     準備中カード

   .kpai-card--note
     参考・補足カード
-------------------------------------------------- */

.kpai-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.kpai-card {
    display: block;
    padding: 20px;
    border: 1px solid #efb2cf;
    border-radius: 18px;
    background: #fffafc;
    color: #333;
    text-decoration: none;
}

.kpai-card:hover {
    transform: translateY(-2px);
    transition: 0.2s;
}

.kpai-card__level {
    display: inline-block;
    margin-bottom: 8px;
    color: #c8749b;
    font-size: 0.9rem;
    font-weight: 700;
}

.kpai-card strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.kpai-card p {
    margin: 0 0 14px;
    color: #555;
}


/* --------------------------------------------------
   30-07. KPAI card buttons
   --------------------------------------------------
   カード内のボタン・ステータス表示。

   .kpai-card__button
     リンクボタン

   .kpai-card__status
     準備中などのラベル
-------------------------------------------------- */

.kpai-card__button,
.kpai-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    max-width: fit-content;

    margin-top: 18px;
    padding: 0.55em 1.2em;

    border-radius: 999px;
    background: #df6fa7;
    color: #fff;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.kpai-card--coming,
.kpai-card--note {
    opacity: 0.92;
}


/* --------------------------------------------------
   30-08. KPAI talk boxes
   --------------------------------------------------
   会話ボックス。

   基本HTML順：
   <div class="kpai-talk ...">
     <div class="kpai-talk__icon"></div>
     <div class="kpai-talk__body">...</div>
   </div>

   左右の切り替え：
   - 通常：左アイコン
   - .kpai-talk--right を追加：右アイコン

   キャラクター：
   - .kpai-talk--sakura
   - .kpai-talk--sumire
   - .kpai-talk--hachi
-------------------------------------------------- */

.kpai-talk {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 1.4em 0;
    padding: 1.75em 1.1em 1.1em;
    border-radius: 18px;
    background: #fff;
    line-height: 1.85;
    font-size: 1.05rem;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.kpai-talk::before {
    content: attr(data-label);
    position: absolute;
    top: -0.85em;
    left: 0.9em;
    padding: 0.28em 0.8em;
    border-radius: 999px;
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
}

.kpai-talk__icon {
    flex: 0 0 78px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.kpai-talk__body {
    flex: 1;
    min-width: 0;
}

.kpai-talk--right {
    flex-direction: row-reverse;
}

.kpai-talk--right::before {
    left: auto;
    right: 0.9em;
}


/* --------------------------------------------------
   30-09. KPAI talk characters
   --------------------------------------------------
   キャラクターごとの色・アイコン。
-------------------------------------------------- */

.kpai-talk--sakura {
    border: 2px solid rgba(247,161,196,.6);
    background: rgba(247,161,196,.10);
}

.kpai-talk--sakura::before {
    background: var(--kpai-sakura);
}

.kpai-talk--sakura .kpai-talk__icon {
    background-image: var(--kpai-icon-sakura);
}

.kpai-talk--sumire {
    border: 2px solid rgba(182,166,232,.6);
    background: rgba(182,166,232,.10);
}

.kpai-talk--sumire::before {
    background: var(--kpai-sumire);
}

.kpai-talk--sumire .kpai-talk__icon {
    background-image: var(--kpai-icon-sumire);
}

.kpai-talk--hachi {
    border: 2px dashed rgba(111,143,175,.65);
    background: rgba(111,143,175,.10);
}

.kpai-talk--hachi::before {
    background: var(--kpai-hachi);
}

.kpai-talk--hachi .kpai-talk__icon {
    background-image: var(--kpai-icon-hachi);
    border-radius: 40%;
    background-position: 50% 35%;
}


/* --------------------------------------------------
   30-10. KPAI note boxes
   --------------------------------------------------
   補足説明カード。
   単語説明、例、ちょっとした補足に使用。
-------------------------------------------------- */

.kpai-note {
    margin: 1.4em 0;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px dashed #efb2cf;
    background: #fffafc;
}

.kpai-note p {
    margin: 0 0 1em;
}

.kpai-note p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------
   30-11. KPAI inline text styles
   --------------------------------------------------
   文中の強調・単語表示。

   .kpai-word
     英単語などの見出し語

   .kpai-kana
     カタカナ読み

   .kpai-key
     重要語の強調
-------------------------------------------------- */

.kpai-word {
    display: inline-block;
    font-weight: 800;
    color: #d36b9f;
}

.kpai-kana {
    display: inline-block;
    margin-left: 0.4em;
    color: #777;
    font-size: 0.95em;
}

.kpai-key {
    font-weight: 800;
    color: #d36b9f;
}


/* --------------------------------------------------
   30-12. KPAI manual next button
   --------------------------------------------------
   旧・手動の「次のお話へ」ボタン。
   今後は [kpai_story_nav] を優先する場合あり。
-------------------------------------------------- */

.kpai-next {
    margin: 32px 0 0;
    text-align: center;
}

.kpai-next a {
    display: inline-block;
    padding: 0.8em 1.4em;
    border-radius: 999px;
    background: #df6fa7;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}


/* --------------------------------------------------
   30-13. KPAI child page cards
   --------------------------------------------------
   [kpai_child_pages title="お話一覧"] 用。

   小学生トップなどで、子ページ一覧をカード表示する。
-------------------------------------------------- */

.kpai-children {
    margin: 32px 0 0;
}

.kpai-children__title {
    margin: 0 0 18px;
    font-size: 1.3rem;
    color: #d36b9f;
}

.kpai-children__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.kpai-child-card {
    display: block;
    text-decoration: none;
    color: #333;
    background: #fffafc;
    border: 1.5px solid #efb2cf;
    border-radius: 18px;
    padding: 18px 18px 16px;
    transition: transform 0.2s ease;
}

.kpai-child-card:hover {
    transform: translateY(-2px);
}

.kpai-child-card__title {
    display: block;
    margin-bottom: 10px;
    font-size: 1.08rem;
    line-height: 1.5;
    color: #333;
}

.kpai-child-card__text {
    margin: 0 0 12px;
    color: #555;
    line-height: 1.8;
    font-size: 0.95rem;
}

.kpai-child-card__more {
    display: inline-block;
    padding: 0.45em 0.9em;
    border-radius: 999px;
    background: #df6fa7;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
}


/* --------------------------------------------------
   30-14. KPAI kids note
   --------------------------------------------------
   小学生向け共通メッセージ。

   「わからない字があったら、大人に聞いてね」
   の案内カード。

   HTMLは p を入れる前提：
   <div class="kpai-kids-note">
     <p>...</p>
   </div>
-------------------------------------------------- */

.kpai-kids-note {
    margin: 26px auto 32px;
    padding: 14px 18px;
    max-width: 760px;

    text-align: center;
    line-height: 1.9;
    font-size: 0.95rem;

    color: #6b4b5d;
    background: #fff8fc;
    border: 1.5px dashed #efb2cf;
    border-radius: 18px;
}

.kpai-kids-note p {
    display: inline-block;
    text-align: left;
}


/* --------------------------------------------------
   30-15. KPAI story navigation
   --------------------------------------------------
   [kpai_story_nav] 用。

   同じ親ページ内の前後ページを表示する。
   未公開ページはPHP側で表示しない想定。
-------------------------------------------------- */

.kpai-story-nav {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 34px 0 0;
}

.kpai-story-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0.7em 1.1em;
    border-radius: 999px;
    border: 1.5px solid #efb2cf;
    background: #fff8fc;
    color: #d36b9f;

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
}

.kpai-story-nav__next {
    margin-left: auto;
}


/* --------------------------------------------------
   30-16. KPAI responsive
   --------------------------------------------------
   KPAI専用のレスポンシブ調整。
   全体レスポンシブとは分けて管理する。
-------------------------------------------------- */

@media (min-width: 700px) {
    .kpai-card-list,
    .kpai-children__list {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .kpai-story-nav {
        flex-direction: column;
    }

    .kpai-story-nav__link {
        width: 100%;
        box-sizing: border-box;
    }

    .kpai-story-nav__next {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .kpai-hero,
    .kpai-lesson-header,
    .kpai-summary {
        padding: 22px 18px;
    }

    .page-title {
        font-size: 1.65rem;
        line-height: 1.35;
        word-break: keep-all;
    }

    .kpai h2 {
        font-size: 1.35rem;
    }

    .kpai-talk {
        gap: 14px;
        padding-top: 1.9em;
        font-size: 1.02rem;
    }

    .kpai-talk__icon {
        flex-basis: 72px;
        width: 72px;
        height: 72px;
    }

    .kpai-card__button,
    .kpai-card__status {
        font-size: 0.9rem;
        padding: 0.5em 1.05em;
    }
}


/* --------------------------------------------------
   30-X17. KPAI table of contents
   --------------------------------------------------
   KPAI各話本文の目次。
   PHP側で h2 / h3 を拾って「お話の流れ」として表示する。

   PHP側：
   - h2 の先頭に 🌸
   - h3 の先頭に 🌻

   CSS側：
   - 枠
   - 余白
   - 文字色
   - リストマーク非表示
-------------------------------------------------- */

.kpai-toc {
    margin: 0 0 32px;
    padding: 22px 24px;
    border: 1.5px solid #efb2cf;
    border-radius: 20px;
    background: #fffafc;
}

.kpai-toc-title {
    margin: 0 0 16px;
    padding: 0 0 0.45em;
    border-bottom: 2px solid #f3a4c8;
    color: #d36b9f;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.5;
}

.kpai-toc-list,
.kpai-toc-sublist {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kpai-toc-item {
    margin: 0 0 0.75em;
    padding: 0;
    list-style: none;
    line-height: 1.65;
}

.kpai-toc-item:last-child {
    margin-bottom: 0;
}

.kpai-toc-item--h2 > a {
    color: #333;
    text-decoration: none;
    font-weight: 800;
}

.kpai-toc-item--h3 {
    margin-left: 1.4em;
    font-size: 0.95rem;
}

.kpai-toc-item--h3 > a {
    color: #666;
    text-decoration: none;
    font-weight: 700;
}

.kpai-toc a:hover {
    color: #d36b9f;
    text-decoration: underline;
}

/* ==================================================
   80. Responsive
================================================== */

@media (max-width: 600px) {
    .site-header {
        padding: 20px 12px 20px;
    }

    .site-header__inner {
        padding: 16px;
    }

    .site-brand {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .site-brand__image img {
        width: 120px;
    }

    .site-title {
        font-size: 1.35rem;
    }

    .site-main {
        margin: 40px 20px;
        padding: 20px;
        border: 4px solid #f7a1c4;
        border-radius: 20px;
    }

    .home-links {
        grid-template-columns: 1fr;
    }

    .site-footer__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-footer__left,
    .site-footer__center,
    .site-footer__right {
        text-align: center;
    }

}