/* ================================================================
   dorirun-ui.css  v1.0  (2026-08-12)
   WordPress カスタマイザー > 追加CSS に貼り付けて使用
   すべてのクラスは dr- 接頭辞で AFFINGER5 との競合を回避
   モバイルファースト設計（最小ブレークポイントから記述）
   ================================================================ */

/* ── CSS カスタムプロパティ ──────────────────────────────────── */
:root {
  /* 科目カラー（ヒーローバナー実測色由来・淡い背景＋濃いテキスト設計）
     各科目: --dr-{科目}        = ピル文字 / スタンプ文字（濃い同系色）
             --dr-{科目}-bg     = ピル背景（最も淡い）
             --dr-{科目}-stamp  = スタンプ背景（ピルより少し濃い淡色） */

  /* 国語：暖色オレンジ系（バナー #FF7000 由来） */
  --dr-kokugo:          #8C3C00;
  --dr-kokugo-bg:       #FFF5EE;
  --dr-kokugo-stamp:    #FFE0C0;

  /* 算数・数学：青系（バナー #2050A0 / #0080E0 由来） */
  --dr-sansu:           #1A4A90;
  --dr-sansu-bg:        #EDF5FF;
  --dr-sansu-stamp:     #C5E0F8;
  --dr-sugaku:          #1A4A90;
  --dr-sugaku-bg:       #EDF5FF;
  --dr-sugaku-stamp:    #C5E0F8;

  /* 生活：黄緑系（バナー #60B020 由来） */
  --dr-seikatsu:        #3A7000;
  --dr-seikatsu-bg:     #EEF8DE;
  --dr-seikatsu-stamp:  #D2EFA8;

  /* 理科：緑系（生活との差別化） */
  --dr-rika:            #0A5840;
  --dr-rika-bg:         #E4F7EF;
  --dr-rika-stamp:      #B0E8D0;

  /* 社会：黄橙系（バナー #FFB000 由来） */
  --dr-shakai:          #7A5500;
  --dr-shakai-bg:       #FFF8DC;
  --dr-shakai-stamp:    #FFE8A0;

  /* 英語：紫系 */
  --dr-eigo:            #5030A0;
  --dr-eigo-bg:         #F0EAFC;
  --dr-eigo-stamp:      #DDD0F8;

  /* ボタン（グレードカード・プリントカード共通・バナー水色系）
     バナー実測 #0080E0 (sky blue 3.3%) を軸に白地コントラスト4.5:1以上に調整。
     プライマリ: 水色 #0070C0 ＋ 白テキスト（白地比 5.1:1）
     アウトライン: 枠線・文字 #0070C0（白地比 5.1:1） */
  --dr-btn-primary:      #0070C0;
  --dr-btn-primary-text: #FFFFFF;
  --dr-btn-outline:      #0070C0;

  /* UI 共通トークン */
  --dr-border:          #E0E0E0;
  --dr-bg-card:         #FFFFFF;
  --dr-radius:          8px;
  --dr-text:            #333333;
  --dr-text-sub:        #666666;
  --dr-gap:             12px;
  --dr-shadow-hover:    0 4px 12px rgba(0, 0, 0, 0.10);
  --dr-card-hover-border: #0070C0;  /* カードホバー時の枠線色（ボタン水色と統一） */

  /* 準備中バッジ */
  --dr-badge-soon-bg:   #FFF3CD;
  --dr-badge-soon-text: #856404;
}


/* ================================================================
   1. カードグリッド  .dr-card-grid
      プリントカードを並べるためのグリッドコンテナ
      モバイル 2列 → タブレット 3列 → PC 4列
   ================================================================ */
.dr-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dr-gap);
  /* AFFINGER6 .post ul:not(...) が詳細度(0,6,1)でdisc指定するため !important で上書き */
  list-style: none !important;
  padding: 0;
  margin: 0;
}

@media (min-width: 600px) {
  .dr-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .dr-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ================================================================
   2. プリントカード  .dr-print-card  (v2 — 2026-08-12改訂)
      1プリントにつき1カード（<div>）。
      下部にもんだい／こたえのダウンロードボタンを2つ横並び。
      こたえが存在しない場合は1ボタン（.dr-print-card__btns--single）。

      HTML構造:
        <li>
          <div class="dr-print-card">
            <div class="dr-print-card__frame">
              <img src="...q-preview.webp" alt="..." ...>
            </div>
            <p class="dr-print-card__title">ひらがな①</p>
            <div class="dr-print-card__btns">
              <a href="...q.png" class="dr-print-card__dl dr-print-card__dl--q"
                 download="..." target="_blank">もんだい</a>
              <a href="...a.png" class="dr-print-card__dl dr-print-card__dl--a"
                 download="..." target="_blank">こたえ</a>
            </div>
          </div>
        </li>
   ================================================================ */

.dr-print-card {
  display: flex;
  flex-direction: column;
  background: var(--dr-bg-card);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-radius);
  overflow: hidden;
  box-sizing: border-box;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.dr-print-card:hover {
  box-shadow: var(--dr-shadow-hover);
  border-color: var(--dr-card-hover-border);
}

/* 画像枠（A4縦比率 1 : √2 ≈ 1 : 1.414）
   object-fit: contain で A4横も比率を崩さず内包する */
.dr-print-card__frame {
  width: 100%;
  aspect-ratio: 1 / 1.414;
  background: #FFFFFF;
  border-bottom: 1px solid var(--dr-border);
  overflow: hidden;
  flex-shrink: 0;
}

/* AFFINGER が .entry-content img に max-width:100%/height:auto を適用するため
   詳細度 0-2-0 で上書き（テーマ側は 0-1-1 程度） */
.dr-print-card .dr-print-card__frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;     /* AFFINGER の max-width:100% を無効化 */
  object-fit: contain;
  vertical-align: middle;
}

/* カードタイトル（2行でトリミング） */
.dr-print-card__title {
  padding: 8px 10px 6px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dr-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
  word-break: break-all;
  margin: 0;
}

/* ボタン行 — デフォルト2列グリッド（もんだい + こたえ） */
.dr-print-card__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 8px 8px;
  flex-shrink: 0;
}

/* こたえなし（1ボタン）: 1列いっぱいに */
.dr-print-card__btns--single {
  grid-template-columns: 1fr;
}

/* もんだい・こたえ・かいせつ 3ボタン: 3等分 */
.dr-print-card__btns--triple {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ダウンロードボタン共通 */
a.dr-print-card__dl,
a.dr-print-card__dl:link,
a.dr-print-card__dl:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 2px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  transition: opacity 0.15s ease;
}

a.dr-print-card__dl:hover,
a.dr-print-card__dl:focus-visible {
  opacity: 0.80;
  text-decoration: none;
}

/* もんだいボタン（塗り） */
a.dr-print-card__dl--q,
a.dr-print-card__dl--q:link,
a.dr-print-card__dl--q:visited {
  background: var(--dr-btn-primary);
  color: var(--dr-btn-primary-text);
  border: 1.5px solid var(--dr-btn-primary);
}

/* こたえボタン（アウトライン） */
a.dr-print-card__dl--a,
a.dr-print-card__dl--a:link,
a.dr-print-card__dl--a:visited {
  background: transparent;
  border: 1.5px solid var(--dr-btn-outline);
  color: var(--dr-btn-outline);
}

/* かいせつボタン（塗り・緑） */
a.dr-print-card__dl--e,
a.dr-print-card__dl--e:link,
a.dr-print-card__dl--e:visited {
  background: var(--dr-seikatsu);
  color: #FFFFFF;
  border: 1.5px solid var(--dr-seikatsu);
}


/* ================================================================
   3. 科目ピル  .dr-subject-pill  +  修飾クラス .dr-pill-{科目}
      科目を色で示す丸いバッジ。スタンプ（丸1文字）＋科目名テキスト。
      --sm 修飾でスタンプのみのコンパクト表示にも対応
   ================================================================ */
.dr-subject-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;               /* スタンプ ↔ テキスト間隔 (6px → 10px, +4px) */
  padding: 6px 14px 6px 8px;  /* L:8px・R:14px — 左右バランスを改善 */
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  min-height: 44px;       /* タップ領域 44px 確保 */
  text-decoration: none;
  box-sizing: border-box;
}

/* 丸い1文字スタンプ（色は各科目クラスで指定） */
.dr-subject-pill__stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.88rem;
  font-weight: 900;
  flex-shrink: 0;
}

/* コンパクト版（グレードカード内のスタンプ並びに使用）
   背景なし・スタンプのみを残す。gap は本体と同値を継承する設計。 */
.dr-subject-pill--sm {
  padding: 0;
  min-height: unset;
  gap: 10px;               /* 本体と同値（テキスト付き使用時のため） */
  background: transparent;
}

.dr-subject-pill--sm .dr-subject-pill__stamp {
  width: 34px;
  height: 34px;
  font-size: 0.9rem;
}

/* ── 科目別カラー（ピル: 淡い背景＋濃いテキスト） ──────────── */
.dr-pill-kokugo   { background: var(--dr-kokugo-bg);   color: var(--dr-kokugo);   }
.dr-pill-sansu    { background: var(--dr-sansu-bg);    color: var(--dr-sansu);    }
.dr-pill-sugaku   { background: var(--dr-sugaku-bg);   color: var(--dr-sugaku);   }
.dr-pill-seikatsu { background: var(--dr-seikatsu-bg); color: var(--dr-seikatsu); }
.dr-pill-rika     { background: var(--dr-rika-bg);     color: var(--dr-rika);     }
.dr-pill-shakai   { background: var(--dr-shakai-bg);   color: var(--dr-shakai);   }
.dr-pill-eigo     { background: var(--dr-eigo-bg);     color: var(--dr-eigo);     }

/* スタンプ: ピルより少し濃い同系淡色の背景＋濃いテキスト（白文字なし） */
.dr-pill-kokugo   .dr-subject-pill__stamp { background: var(--dr-kokugo-stamp);   color: var(--dr-kokugo);   }
.dr-pill-sansu    .dr-subject-pill__stamp { background: var(--dr-sansu-stamp);    color: var(--dr-sansu);    }
.dr-pill-sugaku   .dr-subject-pill__stamp { background: var(--dr-sugaku-stamp);   color: var(--dr-sugaku);   }
.dr-pill-seikatsu .dr-subject-pill__stamp { background: var(--dr-seikatsu-stamp); color: var(--dr-seikatsu); }
.dr-pill-rika     .dr-subject-pill__stamp { background: var(--dr-rika-stamp);     color: var(--dr-rika);     }
.dr-pill-shakai   .dr-subject-pill__stamp { background: var(--dr-shakai-stamp);   color: var(--dr-shakai);   }
.dr-pill-eigo     .dr-subject-pill__stamp { background: var(--dr-eigo-stamp);     color: var(--dr-eigo);     }


/* ================================================================
   4. 学年グリッド & 学年カード  .dr-grade-grid  /  .dr-grade-card
      TOPページの学年一覧。
      レイアウト: 左=学年名+科目スタンプ / 右=ボタン2つ縦積み / 左右中央揃え
      レスポンシブ: モバイル 1列 → 560px〜 2列 → 768px〜 3列
   ================================================================ */
.dr-grade-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /* モバイル: 1列（横レイアウトのため幅を確保） */
  gap: 12px;
  /* AFFINGER6 .post ul:not(...) が詳細度(0,6,1)でdisc指定するため !important で上書き */
  list-style: none !important;
  padding: 0;
  margin: 0;
}

@media (min-width: 560px) {
  .dr-grade-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .dr-grade-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dr-grade-card {
  display: flex;
  flex-direction: row;     /* 横並び: 左=情報 / 右=ボタン */
  align-items: center;     /* 左右を上下中央揃え */
  background: var(--dr-bg-card);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-radius);
  padding: 12px 14px;
  gap: 12px;
  box-sizing: border-box;
}

/* 左カラム（学年名 + 科目スタンプ） */
.dr-grade-card__left {
  flex: 1;
  min-width: 0;            /* flex子がコンテンツ幅を超えないよう */
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dr-grade-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dr-text);
  margin: 0;
  line-height: 1.3;
  overflow-wrap: break-word;
}

/* 科目スタンプの並び（.dr-subject-pill--sm を内包） */
.dr-grade-card__stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* 右カラム: ボタン2つを縦積み */
.dr-grade-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* ボタン共通（<a> タグ使用。AFFINGER5 グローバル a スタイルを :link/:visited で明示上書き）
   アイコン: inline SVG を fill="currentColor" で配置（ホバー時自動変色） */
a.dr-grade-card__btn,
a.dr-grade-card__btn:link,
a.dr-grade-card__btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.15s;
  box-sizing: border-box;
}

a.dr-grade-card__btn:hover,
a.dr-grade-card__btn:focus-visible {
  opacity: 0.80;
  text-decoration: none;
}

/* inline SVG アイコン */
a.dr-grade-card__btn svg {
  flex-shrink: 0;
  display: block;
}

/* 塗り（メインCTA・プリント一覧） */
a.dr-grade-card__btn--primary,
a.dr-grade-card__btn--primary:link,
a.dr-grade-card__btn--primary:visited {
  background: var(--dr-btn-primary);
  color: var(--dr-btn-primary-text);
  border: 2px solid var(--dr-btn-primary);
}

/* アウトライン（サブCTA・学習のヒント / 学習コンテンツ） */
a.dr-grade-card__btn--outline,
a.dr-grade-card__btn--outline:link,
a.dr-grade-card__btn--outline:visited {
  background: transparent;
  border: 2px solid var(--dr-btn-outline);
  color: var(--dr-btn-outline);
}


/* ================================================================
   5. 単元見出し  h3.dr-unit-heading
      科目ピル配下の単元名ラベル。準備中バッジ .dr-badge-soon を同行に含める。
      <h3> タグに付与する（SEO・アクセシビリティ・アンカーリンクのため必須）。

      AFFINGER6 Customizer CSS (st-themecss-loader.php) の h3 規則:
        .post h3:not([class^="is-style-st-heading-custom-"])
               :not([class*=" is-style-st-heading-custom-"])
               :not(.st-css-no):not(.st-matome):not(.rankh3):not(.post-card-title):not(#reply-title)
        → 詳細度 1-7-1。
        適用プロパティ: background #3dc2ff、color #fff、position relative、
                        border none、margin-bottom 30px、padding 10px!important。
        さらに ::after / ::before で下向き三角の装飾（詳細度 1-7-2）。

      Override: 詳細度 1-7-1 に揃えた規則で上書き。
                Additional CSS はテーマ CSS より後に読まれるため同詳細度でも勝つ。
                ::after / ::before も同詳細度 1-7-2 でリセット。
   ================================================================ */

/* ── base: .post 以外のコンテキスト ── */
h3.dr-unit-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: 3px solid var(--dr-border);
  padding: 5px 0 5px 10px;
  margin: 14px 0 6px;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dr-text);
  box-sizing: border-box;
  position: static;
}

/* ── .post コンテキスト: AFFINGER6 Customizer 詳細度 1-7-1 を同詳細度で上書き ── */
/* :not(.st-css-no):not(.st-matome) を追加し 1-7-1 に揃える */
.post .entry-content h3.dr-unit-heading:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome) {
  background: transparent;
  border-top: none;
  border-bottom: none;
  border-left: 3px solid var(--dr-border);
  padding: 5px 0 5px 10px !important;
  margin: 14px 0 6px;
  font-size: 0.93rem;
  line-height: 1.4;
  color: var(--dr-text);
  position: static;
}

/* Customizer が追加する下向き三角装飾（::after / ::before）をリセット — 詳細度 1-7-2 */
.post .entry-content h3.dr-unit-heading:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::after,
.post .entry-content h3.dr-unit-heading:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::before {
  display: none;
  content: none;
}

/* 準備中バッジ */
.dr-badge-soon {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.7;
  background: var(--dr-badge-soon-bg);
  color: var(--dr-badge-soon-text);
  white-space: nowrap;
  vertical-align: middle;
}


/* ================================================================
   6. セクション見出し  h2.dr-section-heading
      アイコン＋テキストの横並び形式。
      <h2> タグに付与する（SEO・アクセシビリティ・アンカーリンクのため必須）。

      AFFINGER6 Customizer CSS (st-themecss-loader.php) の h2 規則:
        .post h2:not([class^="is-style-st-heading-custom-"])
               :not([class*=" is-style-st-heading-custom-"]):not(.st-css-no)
        → 詳細度 0-4-1。
        適用プロパティ: color #3dc2ff、background-color transparent、
                        overflow hidden、text-align center、
                        padding 10px 20px !important、border none。

      Override: :not(.h2modoki) を追加し詳細度を 0-5-1 に上げて上書き。
                padding は Customizer が !important を使うため、こちらも !important。
                text-align のみ明示リセット（左揃えにするため）。
                overflow は意図的に設定しない:
                  Customizer の overflow:hidden が残るが、これは意図的。
                  AFFINGER6 の JS が h2 内に span.st-dash-design を注入し、
                  その ::before/::after が position:absolute; width:1000% の
                  水平線を描画する。overflow:hidden がないと 1000% 幅の要素が
                  ページ全体に漏れ出して横スクロールが発生する（2026-08-12確認）。
   ================================================================ */

/* ── .post / .page コンテキスト: AFFINGER6 Customizer 詳細度 0-4-1 を 0-5-1 で上書き ── */
/* :not(.h2modoki) を追加し 0-5-1 に揃える */
.post .entry-content h2.dr-section-heading:not(.h2modoki),
.page .entry-content h2.dr-section-heading:not(.h2modoki) {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border-top: none;
  border-bottom: 2px solid var(--dr-border);
  border-left: none;
  padding: 0 0 8px 0 !important;
  margin: 28px 0 14px;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dr-text);
  box-sizing: border-box;
  text-align: left;
}

/* アイコン（絵文字または SVG を子要素として配置） */
.dr-section-heading__icon {
  font-size: 1.15em;
  line-height: 1;
  flex-shrink: 0;
}

/* guide h2 のみ上マージンを広げる（プリントセクション→ガイドセクションの大区切り）
   h2#guide の id セレクタで詳細度 (1,3,1) を確保し、基本ルール (0,4,1) を上書き */
.page .entry-content h2#guide:not(.h2modoki) {
  margin-top: 60px;
}


/* ================================================================
   7. つまずき解説セクション (2026-08-12 追加)
      h3.dr-guide-subject-heading  科目別 h3（科目ピルを内包）
      h4.dr-article-unit-heading   単元別 h4（単元グループの区切り）
      .dr-article-list             記事カードのコンテナ（<div>使用）
      a.dr-article-card            横並び記事カード（左サムネイル・右テキスト）
   ================================================================ */

/* ── h3.dr-guide-subject-heading ── */
/* 科目ピルのみを内包するh3。AFFINGER6 Customizer の詳細度 1-7-1 と同値で上書き。
   dr-unit-heading と同じ :not() チェーンを使用（#reply-title を含め 1-7-1 確保）。 */

h3.dr-guide-subject-heading {
  display: flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 24px 0 10px;
  line-height: 1;
}

.post .entry-content h3.dr-guide-subject-heading:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome) {
  background: transparent;
  border: none;
  padding: 0 !important;
  margin: 24px 0 10px;
  line-height: 1;
  color: inherit;
  position: static;
}

.post .entry-content h3.dr-guide-subject-heading:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::after,
.post .entry-content h3.dr-guide-subject-heading:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::before {
  display: none;
  content: none;
}


/* ── h4.dr-article-unit-heading ── */
/* 単元グループの区切り見出し。
   AFFINGER6 Customizer (st-themecss-loader.php) の h4 規則 (2026-08-12 実測):
     .post h4:not([class^="is-style-st-heading-custom-"])
            :not([class*=" is-style-st-heading-custom-"])
            :not(.st-css-no):not(.st-matome):not(.rankh4):not(.point)
     → 詳細度 (0,7,1)。
     適用: border-left:5px solid #3dc2ff; color:#3dc2ff; background:#eefaff;
           padding-left:20px; padding-top:10px; padding-bottom:10px (すべて !important なし)。
   Override: .post/.page コンテキストで (0,7,1) に揃えた規則で上書き。
             Additional CSS はテーマ CSS より後に読まれるため同詳細度でも勝つ。 */

h4.dr-article-unit-heading {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dr-text-sub);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dr-border);
  padding: 0 0 5px 0;
  margin: 16px 0 8px;
  line-height: 1.4;
}

.post .entry-content h4.dr-article-unit-heading:not(.st-css-no):not(.st-matome):not(.rankh4):not(.point),
.page .entry-content h4.dr-article-unit-heading:not(.st-css-no):not(.st-matome):not(.rankh4):not(.point) {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dr-text-sub);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--dr-border);
  padding: 0 0 5px 0 !important;
  margin: 16px 0 8px;
  line-height: 1.4;
  position: static;
}

.post .entry-content h4.dr-article-unit-heading:not(.st-css-no):not(.st-matome):not(.rankh4):not(.point)::after,
.post .entry-content h4.dr-article-unit-heading:not(.st-css-no):not(.st-matome):not(.rankh4):not(.point)::before,
.page .entry-content h4.dr-article-unit-heading:not(.st-css-no):not(.st-matome):not(.rankh4):not(.point)::after,
.page .entry-content h4.dr-article-unit-heading:not(.st-css-no):not(.st-matome):not(.rankh4):not(.point)::before {
  display: none;
  content: none;
}


/* ── .dr-article-list ── */
/* 記事カードのコンテナ。<div> 使用でリストマーカー問題を回避。 */
/* スマートフォン: 1列 / 600px以上: 2列グリッド */
.dr-article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0;
  margin: 0 0 12px;
}

@media (min-width: 600px) {
  .dr-article-list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* details は必ずグリッド全幅（summary ボタンが右カード列にはみ出さないよう） */
.dr-article-list > .dr-article-details {
  grid-column: 1 / -1;
}

/* details 内カードラッパー — 外側と同じ 2列グリッドを再現 */
.dr-article-details__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

@media (min-width: 600px) {
  .dr-article-details__cards {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}


/* ── a.dr-article-card ── */
/* 横並び記事カード。左サムネイル（16:9）＋右テキスト（タイトル＋「読む →」）。
   プリントカードとの区別: サムネイルが横長（16:9）、ダウンロードボタンなし。 */

a.dr-article-card,
a.dr-article-card:link,
a.dr-article-card:visited {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: var(--dr-bg-card);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-radius);
  padding: 10px;
  text-decoration: none;
  color: var(--dr-text);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
  overflow: hidden;
}

a.dr-article-card:hover,
a.dr-article-card:focus-visible {
  box-shadow: var(--dr-shadow-hover);
  border-color: var(--dr-card-hover-border);
  text-decoration: none;
}

/* サムネイル（16:9固定、object-fit: cover） */
.dr-article-card__thumb {
  flex-shrink: 0;
  width: 120px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--dr-border);
}

/* 2列グリッド時（600-899px）はサムネイルを 120px のまま維持。
   900px 以上でカード1列あたりの幅が十分に広がってから拡大する。 */
@media (min-width: 900px) {
  .dr-article-card__thumb {
    width: 160px;
  }
}

/* AFFINGER6 は .entry-content img に max-width:100%/height:auto を設定するため上書き */
.dr-article-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  vertical-align: middle;
}

/* 右カラム（タイトル＋「読む →」） */
.dr-article-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* タイトル（2行クランプ） */
.dr-article-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--dr-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  word-break: break-all;
}

/* 「読む →」ラベル */
.dr-article-card__read {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dr-btn-outline);
  line-height: 1;
}


/* ================================================================
   8. ページナビ  .dr-page-nav  (v2 — 2026-08-12 全面改訂)
      単元一覧ナビ。プリント／ガイド 2セクションをパネルにまとめる。
      HTML構造:
        <div class="dr-page-nav">
          <div class="dr-page-nav__section dr-page-nav__section--print">
            <div class="dr-page-nav__header dr-page-nav__header--print">
              <svg class="dr-page-nav__icon">...</svg> プリントを探す
            </div>
            <div class="dr-page-nav__content">
              <div class="dr-page-nav__row">
                <span class="dr-page-nav__subject dr-page-nav__subject--kokugo">国語</span>
                <div class="dr-page-nav__chips">
                  <a href="#..." class="dr-page-nav__chip">ひらがな</a> ...
                </div>
              </div>
            </div>
          </div>
          <div class="dr-page-nav__section dr-page-nav__section--guide">...</div>
        </div>
   ================================================================ */

/* ── パネル ── */
.dr-page-nav {
  border: 1px solid var(--dr-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 16px 0 28px;
}

/* ── セクション区切り ── */
.dr-page-nav__section + .dr-page-nav__section {
  border-top: 1px solid var(--dr-border);
}

/* ── セクションヘッダー（帯） ── */
.dr-page-nav__header {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
}

/* プリント: 塗り水色 */
.dr-page-nav__header--print {
  background: var(--dr-btn-primary);
  color: var(--dr-btn-primary-text);
}

/* ガイド: 淡い青 */
.dr-page-nav__header--guide {
  background: var(--dr-sansu-bg);
  color: var(--dr-sansu);
}

/* ヘッダー内 SVG アイコン */
.dr-page-nav__icon {
  flex-shrink: 0;
  display: block;
  width: 16px;
  height: 16px;
}

/* ── コンテンツエリア ── */
.dr-page-nav__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px 12px;
  background: var(--dr-bg-card);
}

/* ── 科目行（subject tag + chips） ── */
/* max-content 列: 科目タグをコンテンツ幅ぴったりに確保し、チップ列との境界を完全に固定する。
   inline-flex は grid 子要素で挙動が不定のため flex に変更。 */
.dr-page-nav__row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}

/* ── 科目タグ（行見出しバッジ） ── */
.dr-page-nav__subject {
  display: flex;   /* inline-flex から変更 — grid 子要素として確実にブロック化 */
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  min-height: 44px;
  min-width: 3rem;
}

/* 背景を本色、文字を白に：コントラスト比 kokugo≈8.8:1 / sansu≈8.8:1 / seikatsu≈5.3:1 */
.dr-page-nav__subject--kokugo  { background: var(--dr-kokugo);   color: #fff; }
.dr-page-nav__subject--sansu   { background: var(--dr-sansu);    color: #fff; }
.dr-page-nav__subject--seikatsu{ background: var(--dr-seikatsu); color: #fff; }

/* ── チップ群コンテナ ── */
.dr-page-nav__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-width: 0;  /* grid 子要素のオーバーフロー防止 */
}

/* ── 単元チップ ── */
a.dr-page-nav__chip,
a.dr-page-nav__chip:link,
a.dr-page-nav__chip:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 11px;
  border: 1.5px solid var(--dr-border);
  border-radius: 8px;
  background: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dr-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  box-sizing: border-box;
}

a.dr-page-nav__chip:hover,
a.dr-page-nav__chip:focus-visible {
  background: var(--dr-sansu-bg);
  border-color: var(--dr-btn-primary);
  color: var(--dr-sansu);
  text-decoration: none;
}


/* ================================================================
   9. 解説記事 折りたたみ  .dr-article-details（2026-08-12 追加）
      <details>/<summary> による「ほかの記事を見る」トグル。
      AFFINGER6 の affinger-style.css は summary { display: block } を
      グローバルに設定するため、::marker は消えている。
      カスタムインジケーターを ::before で代替する。
   ================================================================ */

/* AFFINGER6 が .wp-block-details に当てる border/margin/padding を打ち消す
   （.dr-article-details は .wp-block-details とは別クラスだが念のため） */
.dr-article-details {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ── サマリーボタン ── */
summary.dr-article-details__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  margin-top: 6px;
  border: 1.5px dashed var(--dr-border);
  border-radius: var(--dr-radius);
  background: var(--dr-bg-card);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dr-btn-outline);
  cursor: pointer;
  list-style: none;   /* display:block でも念のため */
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* AFFINGER6 が消しても念のため両方指定 */
summary.dr-article-details__toggle::-webkit-details-marker { display: none; }
summary.dr-article-details__toggle::marker              { display: none; }

/* 折りたたみインジケーター（▶ → ▼） */
summary.dr-article-details__toggle::before {
  content: '\25B6';   /* ▶ */
  font-size: 0.55em;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.dr-article-details[open] > summary.dr-article-details__toggle::before {
  transform: rotate(90deg);
}

/* ホバー */
summary.dr-article-details__toggle:hover,
summary.dr-article-details__toggle:focus-visible {
  background: var(--dr-sansu-bg);
  border-color: var(--dr-btn-primary);
  color: var(--dr-sansu);
}

/* details open 時の内部カードは .dr-article-details__cards で gap 管理するため
   個別の margin-top は不要（gap: 8px が適用される） */


/* ================================================================
   10. 学年ページ バナー  .dr-page-banner（2026-08-12 追加）
       ページ最上部に設置する横長バナー画像のラッパー。
   ================================================================ */

.dr-page-banner {
  margin: 0 0 24px;
  overflow: hidden;
  border-radius: 8px;
}

.dr-page-banner img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}


/* ================================================================
   11. 準備中案内パネル  .dr-coming-soon（2026-08-12 追加）
       プリント未公開学年ページで h2#print 直下に使用する「準備中」告知ブロック。
       配色: --dr-badge-soon-bg（#FFF3CD）/ --dr-badge-soon-text（#856404）
             既存の「準備中バッジ」トークンを転用して大きなパネルに仕立てる。
             枠線の中間色 #DEB640 はアンバー系パレットから導出した非トークン値。
       アイコン: Bootstrap Icons bi-clock をインライン SVG（fill="currentColor"）で
                HTML 側に埋め込む。他コンポーネント（ボタン・ナビ・カード）と同方針。
   ================================================================ */

.dr-coming-soon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--dr-badge-soon-bg);                /* #FFF3CD アンバー淡 */
  color: var(--dr-badge-soon-text);                   /* #856404 アンバー濃 */
  border: 1.5px solid #DEB640;                        /* 輪郭：中間アンバー */
  border-left: 4px solid var(--dr-badge-soon-text);  /* 左アクセント */
  border-radius: var(--dr-radius);                    /* 8px — カード角丸と統一 */
  padding: 22px 24px;                                 /* 余白広め（情報量少ないため） */
  margin: 0 !important;                               /* AFFINGER6 .entry-content p を上書き */
  font-size: 0.9rem;
  line-height: 1.8;
  font-weight: 500;
}

/* インライン SVG アイコン（fill="currentColor" でテキスト色を継承） */
.dr-coming-soon__icon {
  flex-shrink: 0;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: 2px;   /* テキスト1行目の上端と揃える */
}


/* ================================================================
   12. ホームページ ヒーローセクション  .dr-hero  (2026-08-13 追加)
   ================================================================ */
.dr-hero {
  text-align: center;
  padding: 2.5em 1.5em 2em;
  background: linear-gradient(145deg, #EDF5FF 0%, #FFF5EE 100%);
  border-radius: 14px;
  margin-bottom: 0;
}

.dr-hero-catchcopy {
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--dr-text);
  margin: 0 0 0.5em;
}

.dr-hero-sub {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dr-text-sub);
  margin: 0 0 1.2em;
}

/* BOX外サイト紹介文（3段落）*/
.dr-hero-desc {
  font-size: 0.9375rem;      /* 15px */
  color: var(--dr-text-sub);
  line-height: 1.95;
  max-width: 760px;
  margin: 2.5em auto 3em;
  text-align: left;
}

.dr-hero-desc p + p {
  margin-top: 0.9em;
}

/* 検索フォーム */
.dr-hero-search {
  margin: 1.2em auto 0.8em;
  max-width: 480px;
}

.dr-hero-search-wrap {
  display: flex;
  gap: 6px;
  background: #fff;
  border: 2px solid var(--dr-btn-outline);
  border-radius: 99px;
  padding: 4px 4px 4px 16px;
  box-sizing: border-box;
}

.dr-hero-search__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.9rem;
  background: transparent;
  color: var(--dr-text);
  min-width: 0;
}

.dr-hero-search__input::placeholder {
  color: #aaa;
}

.dr-hero-search__btn {
  flex-shrink: 0;
  padding: 8px 18px;
  background: var(--dr-btn-primary);
  color: #fff;
  border: none;
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.dr-hero-search__btn:hover {
  opacity: 0.85;
}

/* タグチップ群（ヒーロー内） */
.dr-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin: 0.5em 0 0;
}

.dr-hero-chips-label {
  font-size: 0.78rem;
  color: var(--dr-text-sub);
  white-space: nowrap;
}

/* 汎用チップ（ヒーロー & つまずきセクション共用）*/
a.dr-chip,
a.dr-chip:link,
a.dr-chip:visited {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border: 1.5px solid var(--dr-btn-outline);
  border-radius: 99px;
  background: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dr-btn-outline);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

a.dr-chip:hover,
a.dr-chip:focus-visible {
  background: var(--dr-btn-outline);
  color: #ffffff;
  text-decoration: none;
}

/* つまずきセクション チップ群コンテナ */
.dr-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0.5em 0 1.5em;
}


/* ================================================================
   13. 使い方 3ステップ  .dr-steps  (2026-08-13 追加)
   ================================================================ */
.dr-steps {
  display: flex;
  gap: 1.5em;
  flex-wrap: wrap;
  margin: 1em 0 1.5em;
}

.dr-step {
  flex: 1 1 160px;
  min-width: 160px;
  max-width: 100%;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--dr-border);
  border-radius: 12px;
  padding: 1.5em 1em 1.2em;
  box-sizing: border-box;
}

.dr-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dr-btn-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  margin: 0 auto 0.6em;
}

.dr-step-icon {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 0.6em;
  color: var(--dr-btn-primary);
}

.dr-step-icon svg {
  width: 100%;
  height: 100%;
}

.dr-step p {
  font-size: 0.82rem;
  color: var(--dr-text-sub);
  margin: 0;
  line-height: 1.65;
}

/* h3 override — AFFINGER6 Customizer 詳細度 1-7-1 をコンテキスト追加で上書き */
.post .entry-content .dr-step h3:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome),
.page .entry-content .dr-step h3:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome) {
  background: transparent;
  border: none;
  padding: 0 !important;
  margin: 0 0 0.4em;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dr-text);
  position: static;
  text-align: center;
}

.post .entry-content .dr-step h3:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::after,
.post .entry-content .dr-step h3:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::before,
.page .entry-content .dr-step h3:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::after,
.page .entry-content .dr-step h3:not(#reply-title):not(.rankh3):not(.post-card-title):not(.st-css-no):not(.st-matome)::before {
  display: none;
  content: none;
}


/* ================================================================
   14. 学年カード 準備中ボタン / 中学生通知  (2026-08-13 追加)
   ================================================================ */
a.dr-grade-card__btn--disabled,
a.dr-grade-card__btn--disabled:link,
a.dr-grade-card__btn--disabled:visited {
  background: var(--dr-badge-soon-bg);
  border: 2px solid #DEB640;
  color: var(--dr-badge-soon-text);
  cursor: default;
  pointer-events: none;
}

.dr-jhs-notice {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--dr-badge-soon-bg);
  color: var(--dr-badge-soon-text);
  border: 1.5px solid #DEB640;
  border-left: 4px solid var(--dr-badge-soon-text);
  border-radius: var(--dr-radius);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.6;
}


/* ================================================================
   15. TOPページ 学年ブロック  .dr-grade-section  (2026-08-13 追加)
       各学年のブロックを縦積みで表示し、記事カードを6列グリッドで並べる。
       モバイル 2列 → タブレット 3列 → PC 6列
   ================================================================ */

.dr-grade-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 学年ブロック 外枠 ── */
.dr-grade-block {
  border: 1px solid var(--dr-border);
  border-radius: 12px;
  background: var(--dr-bg-card);
  overflow: hidden;
}

/* ── ヘッダー行 ── */
.dr-grade-block__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border-bottom: 1px solid var(--dr-border);
  flex-wrap: wrap;
  row-gap: 8px;
}

/* 学年番号 + 名前 + スタンプ まとめ */
.dr-grade-block__title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* 学年数字の丸バッジ */
.dr-grade-block__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--dr-btn-primary);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}

/* 学年ラベル（<a>タグ化済み。リンクスタイルを継承リセット） */
.dr-grade-block__label,
.dr-grade-block__label:link,
.dr-grade-block__label:visited {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dr-text) !important;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
}
.dr-grade-block__label:hover {
  text-decoration: underline dotted !important;
  opacity: 0.85;
}

/* スタンプ群 */
.dr-grade-block__stamps {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.dr-grade-stamp {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.5;
}

.dr-grade-stamp.--kokugo  { background: var(--dr-kokugo-stamp);  color: var(--dr-kokugo);  }
.dr-grade-stamp.--sansu   { background: var(--dr-sansu-stamp);   color: var(--dr-sansu);   }
.dr-grade-stamp.--seikatsu{ background: var(--dr-seikatsu-stamp);color: var(--dr-seikatsu);}

/* ボタン群（ヘッダー右側） */
.dr-grade-block__btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* 汎用ボタン */
.dr-grade-btn,
a.dr-grade-btn,
a.dr-grade-btn:link,
a.dr-grade-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 99px;
  font-size: 0.8125rem;      /* 13px */
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
  line-height: 1;
  border: 1.5px solid transparent;
}

.dr-grade-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

a.dr-grade-btn:hover,
a.dr-grade-btn:focus-visible {
  opacity: 0.82;
  text-decoration: none;
}

.dr-grade-btn--primary {
  background: #0060A8;
  color: #fff !important;
  border-color: #0060A8;
}

.dr-grade-btn--outline {
  background: #fff;
  color: var(--dr-btn-outline) !important;
  border-color: var(--dr-btn-outline);
}

/* イラストプレースホルダー */
.dr-grade-block__illo {
  flex-shrink: 0;
  width: 200px;
  height: 66px;
  display: block;
}

.dr-grade-block__illo svg,
.dr-grade-block__illo img {
  display: block;
  width: 100%;
  height: 100% !important;  /* AFFINGER6の height:auto !important を上書き */
  object-fit: contain;
  max-width: none;
}

@media (max-width: 767px) {
  .dr-grade-block__illo { display: none; }
}

/* ── 記事カードグリッド（タブレット・PC: 4列） ── */
.dr-grade-block__articles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 14px;
}

/* ── モバイル：横並びカードリスト（〜767px） ── */
@media (max-width: 767px) {
  .dr-grade-block__articles {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 14px 12px;
  }
  /* 4枚目を非表示（3本表示） */
  .dr-grade-block__articles a.dr-article-mini:nth-child(4),
  a.dr-article-mini.dr-article-mini--hide-mobile {
    display: none !important;
  }
}

/* ── 記事ミニカード（タブレット・PC：縦積みグリッド） ── */
a.dr-article-mini,
a.dr-article-mini:link,
a.dr-article-mini:visited {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  color: var(--dr-text);
  border-radius: var(--dr-radius);
  transition: box-shadow 0.15s;
}

a.dr-article-mini:hover,
a.dr-article-mini:focus-visible {
  box-shadow: var(--dr-shadow-hover);
  text-decoration: none;
}

/* body ラッパー */
.dr-article-mini__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 「読む →」: デスクトップ非表示、モバイルで表示 */
.dr-article-mini__read {
  display: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dr-btn-outline);
  line-height: 1;
}

/* ── サムネイル共通ベース（全幅・contain）── */
/* 重要: このブロックはモバイル @media より前に置くこと。
   後ろに置くと width:100% がモバイルの width:120px を上書きしてしまう。 */
.dr-article-mini__thumb {
  position: relative;
  background: #fff;
  border-radius: var(--dr-radius);
  overflow: hidden;
}

/* PC/タブレット：4:3 padding trick で縦比率を確保 */
@media (min-width: 768px) {
  .dr-article-mini__thumb {
    width: 100%;
    padding-top: 75%;
  }
}

.dr-article-mini__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center;
  background: #fff;
}

.dr-article-mini__no-thumb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #bbb;
}

/* 2行クランプタイトル */
.dr-article-mini__title {
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  padding: 0 2px;
  color: var(--dr-text);
}

/* ── モバイル：横並びカード（〜767px）── */
/* このブロックはサムネイルベースルールより後に置く必要がある。
   同一セレクターは後勝ちのため、ここで width:120px が width:100% を上書きできる。 */
@media (max-width: 767px) {
  a.dr-article-mini,
  a.dr-article-mini:link,
  a.dr-article-mini:visited {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    background: var(--dr-bg-card);
    border: 1px solid var(--dr-border);
    border-radius: var(--dr-radius);
    padding: 10px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }

  a.dr-article-mini:hover,
  a.dr-article-mini:focus-visible {
    box-shadow: var(--dr-shadow-hover);
    border-color: var(--dr-card-hover-border);
    text-decoration: none;
  }

  .dr-article-mini__thumb {
    flex-shrink: 0;
    width: 120px;
    min-width: 120px;
    height: 90px;
    padding-top: 0;
    border-radius: 4px;
  }

  .dr-article-mini__body {
    flex: 1;
    min-width: 0;
    gap: 6px;
  }

  .dr-article-mini__title {
    font-size: 0.85rem;
    font-weight: 600;
  }

  .dr-article-mini__read {
    display: block;
  }
}

/* ── もっと見るボタン ── */
.dr-grade-block__more {
  text-align: center;
  padding: 0 14px 12px;
}

a.dr-grade-block__more-btn,
a.dr-grade-block__more-btn:link,
a.dr-grade-block__more-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 20px;
  border: 1.5px solid var(--dr-btn-outline);
  border-radius: 99px;
  color: var(--dr-btn-outline) !important;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

a.dr-grade-block__more-btn:hover,
a.dr-grade-block__more-btn:focus-visible {
  background: var(--dr-btn-primary);
  color: #fff !important;
  border-color: var(--dr-btn-primary);
  text-decoration: none;
}

/* ================================================================
   16. フロントページ専用: 旧ウィジェットエリア非表示
       (2026-08-15 フロントページ固定ページ化対応)
   ================================================================ */

/* sidebar-12 (トップページ上部): 検索・カテゴリ・タグ・記事一覧ウィジェット */
.front-page .top-wbox-t {
  display: none !important;
}

/* sidebar-13 (トップページ下部の旧PVランキング枠): #st-page より後の要素のみ対象
   ページ内の .top-wbox-u (#st-page 内のもの) は除外 */
.front-page #st-page ~ .top-wbox-u {
  display: none !important;
}

/* ================================================================
   17. コンテンツ幅拡張・サイドバー (2026-08-15 広告配置対応)
   ================================================================ */

/* コンテンツ最大幅を 1060px → 1300px に拡張 */
.st-content-width,
#st-menuwide,
nav.smanone,
nav.st5,
#st-header-cardlink,
#st-menuwide div.menu,
#st-menuwide nav.menu,
#st-header,
#st-header-under-widgets-box,
#st-footer-under-widgets-box,
#content,
#footer-in,
#headbox {
  max-width: 1300px !important;
}

/* 記事単体ページ: 本文の最大幅を制限（読みやすさ確保） */
@media screen and (min-width: 768px) {
  .single .entry-content {
    max-width: 780px;
  }
}

/* ----------------------------------------------------------------
   サイドバーウィジェット共通スタイル
   ---------------------------------------------------------------- */

/* 学年から探すウィジェット */
.dr-sidebar-grade-nav {
  margin-bottom: 4px;
}

.dr-sidebar-grade-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.dr-sidebar-grade-list li {
  border-bottom: 1px solid #eee;
}

.dr-sidebar-grade-list li:last-child {
  border-bottom: none;
}

.dr-sidebar-grade-list a,
.dr-sidebar-grade-list a:link,
.dr-sidebar-grade-list a:visited {
  display: block;
  padding: 9px 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dr-text-main) !important;
  text-decoration: none;
}

.dr-sidebar-grade-list a:hover {
  color: var(--dr-btn-primary) !important;
  text-decoration: none;
}

/* このサイトについてウィジェット */
.dr-sidebar-profile {
  margin-bottom: 4px;
}

.dr-sidebar-profile p + p {
  margin-top: 0;
}

/* ----------------------------------------------------------------
   サイドバー検索ウィジェット (.dr-side-search)
   ---------------------------------------------------------------- */
.dr-side-search {
  background: #EDF5FF;
  border-radius: 10px;
  padding: 14px 12px 12px;
}

.dr-side-search__form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dr-side-search__input {
  flex: 1;
  min-width: 0;
  border: 2px solid #C5E0F8;
  border-radius: 20px;
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
  background: #fff;
  color: #333;
}

.dr-side-search__input:focus {
  border-color: #0070C0;
}

.dr-side-search__btn {
  flex-shrink: 0;
  background: #0070C0;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
}

.dr-side-search__btn:hover {
  background: #005BA0;
}

.dr-side-search__chips {
  margin-top: 10px;
}

.dr-side-search__label {
  display: block;
  font-size: 10px;
  color: #888;
  margin-bottom: 5px;
  line-height: 1.4;
}

.dr-side-search__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dr-side-search__chip,
.dr-side-search__chip:link,
.dr-side-search__chip:visited {
  background: #fff;
  border: 1px solid #0070C0;
  color: #0070C0 !important;
  border-radius: 14px;
  padding: 3px 9px;
  font-size: 12px;
  text-decoration: none !important;
  line-height: 1.4;
  display: inline-block;
}

.dr-side-search__chip:hover {
  background: #E3F2FD;
  text-decoration: none !important;
}

/* ── 新着グリッド（[dorirun_latest] 用）── */
.dr-latest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 0;
}

@media (max-width: 767px) {
  .dr-latest-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 0 12px;
  }
}

/* ── サイドバー開始位置（記事ページ: h1上端に揃える）── */
.single #side {
  padding-top: 98px;
}
@media (max-width: 767px) {
  .single #side {
    padding-top: 0;
  }
}

/* ── 学年ページ: AFINGERアイキャッチ自動挿入を非表示（コンテンツ内バナーと二重表示防止）── */
.page .st-eyecatch-under {
  display: none;
}

/* ================================================================
   学年ナビ カード型ウィジェット  .dr-grade-nav-list / .dr-grade-nav-card
   (旧 .dr-sidebar-grade-list から置き換え 2026-08-16)
   ================================================================ */
.dr-grade-nav-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dr-grade-nav-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  background: var(--dr-surface, #fff);
  text-decoration: none !important;
  color: var(--dr-text-main) !important;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.dr-grade-nav-card:hover {
  background: #f0f6ff;
  border-color: var(--dr-btn-primary, #3dc2ff);
  box-shadow: 0 2px 6px rgba(61,194,255,0.15);
  text-decoration: none !important;
}

.dr-grade-nav-card__name {
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.dr-grade-nav-card__pills {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* カード内スタンプはやや小さめ */
.dr-grade-nav-card .dr-subject-pill--sm {
  padding: 0;
  min-height: unset;
  background: transparent;
  gap: 0;
}

.dr-grade-nav-card .dr-subject-pill--sm .dr-subject-pill__stamp {
  width: 26px;
  height: 26px;
  font-size: 0.72rem;
}

/* ================================================================
   スマホハンバーガーメニュー スタイル第2段階 (2026-08-16)
   対象: .acordion_tree ul.menu (smartphone-menu スロット / メニューID:77)
   ================================================================ */

/* ── 全体: 区切り線を薄いグレー下線のみに変更（水色廃止） ── */
.acordion_tree ul.menu li a {
  border-bottom: 1px solid #e0e0e0 !important;
  border-top: none !important;
  min-height: 44px;
  align-items: center;
  box-sizing: border-box;
}

/* ── セクション見出し (.dr-menu-header) ── */
.acordion_tree ul.menu li.dr-menu-header {
  cursor: default !important;
}
.acordion_tree ul.menu li.dr-menu-header > a {
  pointer-events: none !important;
  cursor: default !important;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #888 !important;
  background: #f3f3f3 !important;
  min-height: 34px;
  padding: 6px 15px;
  border-bottom: 1px solid #e0e0e0 !important;
}
/* 矢印アイコンを非表示 */
.acordion_tree ul.menu li.dr-menu-header > a .st-svg-angle-right,
.acordion_tree ul.menu li.dr-menu-header > a .st-svg-angle-down,
.acordion_tree ul.menu li.dr-menu-header > a .fa {
  display: none !important;
}

/* ── 中学生項目 (.dr-menu-chugaku): 文字色をやや薄く ── */
.acordion_tree ul.menu li.dr-menu-chugaku > a {
  color: #666 !important;
}
.acordion_tree ul.menu li.dr-menu-chugaku > a:hover {
  color: #222 !important;
}

/* ── ホーム (.dr-menu-home): 下余白でグレードセクションと視覚的に分離 ── */
.acordion_tree ul.menu li.dr-menu-home {
  margin-bottom: 6px;
}

/* ── お問い合わせ (.dr-menu-contact): 上余白+上線でグレードセクションと視覚的に分離 ── */
.acordion_tree ul.menu li.dr-menu-contact {
  margin-top: 6px;
}
.acordion_tree ul.menu li.dr-menu-contact > a {
  border-top: 1px solid #e0e0e0 !important;
}