@charset "UTF-8";
/*
 * Theme Name: Cocoon Child - マチベスト プログラミング教室
 * Template: cocoon-master
 */
/* ===== カラー・タイポグラフィトークン ===== */
/* マチベスト プログラミング教室カラーテーマ */
/* B路線：緑メイン・クリーム背景・オレンジアクセント */
/* 親御さんへの信頼感 ＋ 子どもへの親しみやすさ */
:root {
  /* Primary: 緑 */
  --mb-primary: #3D8B5E;
  --mb-primary-dark: #2E6A47;
  --mb-primary-light: #EAF4EE;
  /* Accent: オレンジ */
  --mb-accent: #F07D2E;
  --mb-accent-dark: #D4611B;
  --mb-accent-light: #FFF3E8;
  /* Background */
  --mb-bg: #FAFAF7;
  --mb-bg: #F6FAF7;
  --mb-bg-section: #F4F4EF;
  --mb-surface: #FFFFFF;
  /* Text */
  --mb-text-primary: #1E2A22;
  --mb-text-secondary: #5A6B60;
  --mb-text-muted: #9AABA0;
  /* Border */
  --mb-border: #D8E4DC;
  --mb-border-strong: #B0C9BA;
  /* Layout */
  --sidebar-width: 300px;
  /* ----------------------------------------
     カテゴリカラー
  ---------------------------------------- */
  /* 子ども向け：オレンジ〜イエロー */
  --mb-kids-from: #F07D2E;
  --mb-kids-to: #FFD700;
  --mb-kids-text: #7A3800;
  --mb-kids-light: #FFF8E8;
  /* 大人向け：ブルー〜グリーン */
  --mb-adult-from: #2563EB;
  --mb-adult-to: #3CB371;
  --mb-adult-text: #0F2D70;
  --mb-adult-light: #EEF4FF;
  /* 既存コードとの互換エイリアス */
  --primary-color: var(--mb-primary);
  --accent-color: var(--mb-accent);
  --bg-color: var(--mb-bg);
  --text-color: var(--mb-text-primary);
}

/* ===== ベーススタイル（Cocoon上書きリセット） ===== */
body {
  margin: 0;
  background-color: var(--mb-bg) !important;
  color: #000 !important;
  font-size: 16px !important;
  /* font-family: どちらかを有効にする */
  font-family: YuGothic, "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; /* 和文ベース */
  /* font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif !important; */ /* 欧文ベース */
}

main {
  padding-top: 24px !important;
}

a {
  text-decoration: none;
}
a:hover {
  color: #1967d2 !important;
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
}

p strong {
  background: -webkit-linear-gradient(transparent 60%, #ffff8e 0);
}

/* ----------------------------------------
   ヒーローエリア（トップページ）
---------------------------------------- */
.mb-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 24px;
  background-color: var(--mb-primary-light);
  background-image: radial-gradient(circle at 10% 80%, rgba(61, 139, 94, 0.12) 0%, transparent 50%), radial-gradient(circle at 90% 20%, rgba(240, 125, 46, 0.08) 0%, transparent 50%);
  text-align: center;
}
.mb-hero__badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 16px;
  border-radius: 20px;
  background: var(--mb-accent-light);
  color: var(--mb-accent-dark);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.mb-hero__title {
  margin: 0 0 16px;
  color: var(--mb-text-primary);
  font-size: clamp(24px, 5vw, 40px);
  font-weight: bold;
  line-height: 1.3;
}
.mb-hero__title em {
  color: var(--mb-primary);
  font-style: normal;
}
.mb-hero__lead {
  max-width: 600px;
  margin: 0 auto 32px;
  color: var(--mb-text-secondary);
  font-size: 16px;
  line-height: 1.8;
}
.mb-hero__cta {
  display: inline-block;
  padding: 14px 36px;
  border-radius: 40px;
  background: var(--mb-accent);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mb-hero__cta:hover {
  background: var(--mb-accent-dark);
  color: #fff !important;
  text-decoration: none;
  transform: translateY(-2px);
}
.mb-hero__count {
  margin-top: 24px;
  color: var(--mb-text-muted);
  font-size: 13px;
}
.mb-hero__count strong {
  color: var(--mb-primary);
  font-size: 20px;
}

.mb-header #header-container {
  background-color: #f6faf7 !important;
}
.mb-header .header-container {
  padding: 12px 0px !important;
}
.mb-header .navi-in ul li {
  width: auto;
}
.mb-header .navi-in ul li a {
  padding: 0 20px;
}

/* ===== 記事カード・教室カード ===== */
/* ----------------------------------------
   教室カード一覧（グリッド）
---------------------------------------- */
.mb-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin: 32px 0;
}

.mb-school-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  background: var(--mb-surface);
  box-shadow: 0 2px 8px rgba(30, 42, 34, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mb-school-card__thumb {
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--mb-primary-light);
}
.mb-school-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-school-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}
.mb-school-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.mb-school-card__tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
  font-size: 11px;
  font-weight: bold;
}
.mb-school-card__tag--age {
  background: var(--mb-accent-light);
  color: var(--mb-accent-dark);
}
.mb-school-card__tag--online {
  background: #EEF2FF;
  color: #4455CC;
}
.mb-school-card__name {
  margin: 0 0 8px;
  color: var(--mb-text-primary);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}
.mb-school-card__area {
  margin: 0 0 12px;
  color: var(--mb-text-muted);
  font-size: 13px;
}
.mb-school-card__area::before {
  content: "📍 ";
}
.mb-school-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--mb-border);
  color: var(--mb-text-secondary);
  font-size: 13px;
}

/* ----------------------------------------
   ランキングカード（既存）
---------------------------------------- */
.mb-ranking-card, .mb-ranking-card.rk-item, .mb-ranking-card.ranking-item {
  position: relative;
  margin-bottom: 40px;
  padding: 30px;
  border: solid 1px var(--mb-border);
  border-radius: 10px;
  background: var(--mb-surface);
  box-shadow: none !important;
}
.mb-ranking-card .rank-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -15px;
  left: -15px;
  width: 50px;
  height: 50px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--mb-text-primary);
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.mb-ranking-card .rank-1 {
  background: var(--mb-accent);
}
.mb-ranking-card .item-content {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}
.mb-ranking-card .item-thumb {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 150px;
  border-radius: 8px;
  background: var(--mb-bg-section);
  color: var(--mb-text-muted);
  font-size: 12px;
}
.mb-ranking-card .item-details h2 {
  margin: 0 0 10px;
  color: var(--mb-primary);
  font-size: 22px;
}
.mb-ranking-card .spec-tags {
  margin-bottom: 10px;
}
.mb-ranking-card .tag {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
  font-size: 12px;
}
.mb-ranking-card .item-table {
  width: 100%;
  margin-bottom: 15px;
  border-collapse: collapse;
  font-size: 14px;
}
.mb-ranking-card .item-table th,
.mb-ranking-card .item-table td {
  padding: 8px;
  border: 1px solid var(--mb-border);
  text-align: left;
}
.mb-ranking-card .item-table th {
  width: 30%;
  background: var(--mb-bg-section);
}

/* ===== 記事詳細ページ ===== */
/* ----------------------------------------
   記事本文エリア（Cocoon上書き）
---------------------------------------- */
.mb-article .entry-title {
  margin: 0 0 16px;
}
.mb-article .entry-content {
  margin-top: 48px;
  /* 見出しh2 */
}
.mb-article .entry-content h2 {
  position: relative;
  padding: 12px 16px 12px 20px;
  border: none;
  border-left: 4px solid var(--mb-primary);
  border-radius: 0 8px 8px 0;
  background: var(--mb-primary-light);
  color: var(--mb-text-primary);
  font-size: 20px;
}
.mb-article .entry-content h2::before {
  display: none;
}
.mb-article .entry-content {
  /* 見出しh3 */
}
.mb-article .entry-content h3 {
  padding: 8px 0 8px 12px;
  border: none;
  border-left: 3px solid var(--mb-accent);
  color: var(--mb-text-primary);
  font-size: 18px;
}
.mb-article .entry-content {
  /* テーブル */
}
.mb-article .entry-content figure.wp-block-table table,
.mb-article .entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.mb-article .entry-content figure.wp-block-table table th,
.mb-article .entry-content figure.wp-block-table table td,
.mb-article .entry-content table th,
.mb-article .entry-content table td {
  padding: 8px 12px;
  border: 1px solid var(--mb-border);
  text-align: left;
  vertical-align: top;
}
.mb-article .entry-content figure.wp-block-table table th,
.mb-article .entry-content table th {
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
  font-weight: bold;
}
.mb-article .entry-categories-tags {
  margin-bottom: 48px;
}
.mb-article .post-date,
.mb-article .post-update,
.mb-article .post-author,
.mb-article .amp-back,
.mb-article .entry-category {
  display: inline;
  padding: 2px;
  font-size: 14px !important;
}
.mb-article {
  /* 目次 */
}
.mb-article .toc {
  display: table;
  width: 100%;
  padding: 1em 1.6em;
  border: 1px solid var(--mb-border-strong);
  font-size: 0.9em;
}
.mb-article .toc a {
  text-decoration: underline;
  text-underline-offset: 0.33em;
  text-decoration-thickness: 0.05em;
  text-decoration-style: dashed;
}
.mb-article {
  /* 前後記事・関連記事 */
}
.mb-article .pager-post-navi a.a-wrap:hover,
.mb-article .related-entries a.a-wrap:hover {
  color: var(--mb-text-primary) !important;
  text-decoration: none;
}
.mb-article .pager-post-navi img,
.mb-article .related-entries img {
  border: solid 1px var(--mb-border) !important;
}

/* ----------------------------------------
   教室基本情報テーブル
---------------------------------------- */
.mb-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}
.mb-info-table th,
.mb-info-table td {
  padding: 12px 16px;
  border: 1px solid var(--mb-border);
  text-align: left;
  vertical-align: top;
}
.mb-info-table th {
  width: 30%;
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
  font-weight: bold;
  white-space: nowrap;
}
.mb-info-table td {
  background: var(--mb-surface);
  color: var(--mb-text-primary);
}
@media screen and (max-width: 480px) {
  .mb-info-table {
    display: block;
  }
  .mb-info-table tr {
    display: block;
    margin-bottom: 1px;
  }
  .mb-info-table th,
  .mb-info-table td {
    display: block;
    width: 100%;
    white-space: normal;
  }
}

/* 公式サイトボタン */
.mb-official-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  background: var(--mb-primary);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s ease;
}
.mb-official-btn::after {
  content: "↗";
  font-size: 13px;
}
.mb-official-btn:hover {
  background: var(--mb-primary-dark);
  color: #fff !important;
  text-decoration: none;
}

/* 評価・星 */
.mb-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.mb-rating__stars {
  color: var(--mb-accent);
  font-size: 18px;
  letter-spacing: 2px;
}
.mb-rating__score {
  color: var(--mb-text-primary);
  font-size: 20px;
  font-weight: bold;
}
.mb-rating__count {
  color: var(--mb-text-muted);
  font-size: 13px;
}

/* ----------------------------------------
   コメント欄
---------------------------------------- */
.mb-comments .commets-list li:not(:first-child) {
  padding-top: 12px;
  margin-top: 12px;
  border-top: solid 1px var(--mb-border);
}
.mb-comments .comment-form-wrap button {
  margin-top: 32px;
}
.mb-comments .pagination-next-link,
.mb-comments .comment-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--mb-border);
  border-radius: 24px;
  background-color: var(--mb-surface);
  color: var(--mb-text-primary);
  font-size: 1.2em;
  text-align: center;
  text-decoration: none;
}

/* ===== サイドバー・ウィジェット ===== */
/* コンテンツレイアウト */
/* MEMO：sidebarから移動させる */
.mb-content .content-in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.mb-content .column-full-wide .content-in {
  width: 1256px;
}
.mb-content .main,
.mb-content .sidebar {
  border: 1px solid var(--mb-border);
}
@media screen and (min-width: 901px) {
  .mb-content .main,
  .mb-content .sidebar {
    border-radius: 12px;
  }
  .mb-content .main {
    padding: 40px !important;
  }
}
.mb-content h1 {
  margin-bottom: 24px !important;
}

/* サイドバー */
.mb-sidebar .sidebar .wp-block-categories .post-count::before {
  content: "（";
}
.mb-sidebar .sidebar .wp-block-categories .post-count::after {
  content: "）";
}
.mb-sidebar .wp-block-group a {
  font-size: 14px;
  line-height: 1.3em;
}
.mb-sidebar .wp-block-group a:hover {
  background-color: var(--mb-bg-section);
  color: var(--mb-text-primary) !important;
  transition: all 0.2s ease;
}

.sidebar {
  padding: 0 !important;
  background-color: transparent !important;
  border: none !important;
}
.sidebar .widget {
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  padding: 20px;
}

.mb-footer #footer {
  background-color: #fff;
}

/* ===== A11y・ユーティリティ・共通パーツ ===== */
/* ----------------------------------------
   アクセシビリティ（WCAG 2.1 AA）
---------------------------------------- */
/* スキップリンク */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  display: block;
  padding: 8px 16px;
  background: var(--mb-primary);
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

/* フォーカスリング */
:focus-visible {
  outline: 3px solid var(--mb-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----------------------------------------
   タグ・カテゴリ
---------------------------------------- */
.mb-taxonomy .cat-label,
.mb-taxonomy .tag-label {
  border-radius: 16px;
  color: #fff !important;
}
.mb-taxonomy .cat-link,
.mb-taxonomy .tag-link {
  padding: 2px 12px !important;
  border-radius: 12px;
  font-size: 12px;
}
.mb-taxonomy .cat-link:hover {
  color: #fff !important;
  text-decoration: none;
}
.mb-taxonomy .tag-link:hover {
  color: inherit !important;
  text-decoration: none;
}
.mb-taxonomy .tagcloud {
  display: inherit;
}
.mb-taxonomy .tagcloud a {
  display: inline-block;
  margin: 2px;
  border-radius: 20px;
  color: var(--mb-text-primary);
  font-size: 12px;
  text-decoration: none;
}
.mb-taxonomy .tagcloud a:hover {
  background-color: var(--mb-bg-section) !important;
  color: var(--mb-text-primary) !important;
}

/* プログラミング教室タグ */
.mb-prog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.mb-prog-tags a {
  display: inline-block;
  padding: 4px 14px;
  border: 1.5px solid var(--mb-border-strong);
  border-radius: 20px;
  color: var(--mb-text-secondary);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.mb-prog-tags a:hover {
  border-color: var(--mb-primary);
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark) !important;
  text-decoration: none;
}

/* ----------------------------------------
   SNSシェアボタン
---------------------------------------- */
/* ----------------------------------------
   フォーム
---------------------------------------- */
.mb-form input[type=submit],
.mb-form input[type=text],
.mb-form input[type=password],
.mb-form input[type=date],
.mb-form input[type=email],
.mb-form input[type=number],
.mb-form input[type=search],
.mb-form input[type=tel],
.mb-form input[type=url],
.mb-form textarea,
.mb-form select,
.mb-form .search-edit {
  border-radius: 24px;
}
.mb-form .wp-block-search__label {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}
.mb-form .wp-block-search__inside-wrapper {
  position: relative;
}
.mb-form .sidebar .wp-block-search__button {
  position: absolute;
  top: calc(50% - 12px);
  right: 3px;
  padding: 0 8px;
  border: none;
  border-radius: 24px;
  background-color: transparent;
  color: var(--mb-border);
  font-size: 0;
  cursor: pointer;
}
.mb-form .sidebar .wp-block-search__button::after {
  display: inline-block;
  position: absolute;
  top: 11px;
  right: 16px;
  transform: translateY(-50%);
  color: var(--mb-border);
  font-size: 20px;
  font-family: "FontAwesome";
  font-weight: 900;
  content: "\f002";
  pointer-events: none;
}

/* ----------------------------------------
   セクション区切り
---------------------------------------- */
.mb-section {
  padding: 48px 0;
}
.mb-section--alt {
  background: var(--mb-bg-section);
}
.mb-section__header {
  margin-bottom: 32px;
  text-align: center;
}
.mb-section__title {
  margin: 0 0 8px;
  color: var(--mb-text-primary);
  font-size: clamp(20px, 3vw, 28px);
  font-weight: bold;
}
.mb-section__title::after {
  display: block;
  width: 40px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--mb-primary);
  content: "";
}
.mb-section__lead {
  color: var(--mb-text-muted);
  font-size: 15px;
}

/* ----------------------------------------
   注意書き・インフォメーション
---------------------------------------- */
.mb-notice {
  padding: 16px 20px;
  border-left: 4px solid var(--mb-border-strong);
  border-radius: 0 8px 8px 0;
  background: var(--mb-bg-section);
  color: var(--mb-text-secondary);
  font-size: 14px;
  line-height: 1.7;
}
.mb-notice--info {
  border-color: var(--mb-primary);
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
}
.mb-notice--caution {
  border-color: var(--mb-accent);
  background: var(--mb-accent-light);
  color: var(--mb-accent-dark);
}

.eye-catch {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 24px !important;
  border-radius: 12px !important;
}
.eye-catch img {
  border-radius: 12px !important;
}
.eye-catch .cat-label {
  top: 1em !important;
  left: 1em !important;
}

.wp-block-latest-posts li {
  position: relative;
  margin-bottom: 12px;
  padding: 10px 0px 10px 18px;
  border-bottom: 1px dashed var(--mb-border);
}
.wp-block-latest-posts li::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 18px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-radius: 2px;
  background: var(--mb-primary);
}
.wp-block-latest-posts a {
  padding: 6px !important;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.3em;
}
.wp-block-latest-posts a:hover {
  background-color: var(--mb-bg-section);
  color: var(--mb-text-primary) !important;
  text-decoration: none;
}

/* ===== カテゴリカラー設計 ===== */
/* Cocoonの .cat-{スラッグ} に対してグラデーションを上書き */
/* スラッグはカテゴリ確定後に修正してください          */
/* ----------------------------------------
   ミックスイン：グラデーションバッジ
---------------------------------------- */
/* ----------------------------------------
   子ども向けプログラミング教室
   スラッグ例：kids-programming
---------------------------------------- */
.cat-kids-programming {
  /* カードサムネイル枠・カテゴリラベル */
}
.cat-kids-programming .cat-label,
.cat-kids-programming .card-thumb-frame::after,
.cat-kids-programming .entry-card .card-thumb-frame {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to)) !important;
  color: #fff !important;
  border: none !important;
}
.cat-kids-programming {
  /* CTAボタン */
}
.cat-kids-programming .mb-cta-btn {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to)) !important;
  color: #fff !important;
  border: none !important;
}

/* ----------------------------------------
   大人向けプログラミング教室
   スラッグ例：adult-programming
---------------------------------------- */
.cat-adult-programming .cat-label,
.cat-adult-programming .card-thumb-frame::after,
.cat-adult-programming .entry-card .card-thumb-frame {
  background: linear-gradient(135deg, var(--mb-adult-from), var(--mb-adult-to)) !important;
  color: #fff !important;
  border: none !important;
}
.cat-adult-programming .mb-cta-btn {
  background: linear-gradient(135deg, var(--mb-adult-from), var(--mb-adult-to)) !important;
  color: #fff !important;
  border: none !important;
}

/* ----------------------------------------
   セクションヘッダー（ページ内で使用）
---------------------------------------- */
/* 子ども向けセクション背景 */
.mb-section-kids {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  color: #fff;
}

/* 大人向けセクション背景 */
.mb-section-adult {
  background: linear-gradient(135deg, var(--mb-adult-from), var(--mb-adult-to));
  color: #fff;
}

/* ----------------------------------------
   カテゴリバッジ（インライン）
---------------------------------------- */
.mb-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.6;
}
.mb-badge--kids {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  color: #fff;
}
.mb-badge--adult {
  background: linear-gradient(135deg, var(--mb-adult-from), var(--mb-adult-to));
  color: #fff;
}
.mb-badge--primary {
  background: var(--mb-primary);
  color: #fff;
}
.mb-badge--muted {
  background: var(--mb-bg-section);
  color: var(--mb-text-secondary);
  border: 1px solid var(--mb-border);
}

/* ===== ★1 プログラミング教室トップページ ===== */
/* ----------------------------------------
   共通レイアウト
---------------------------------------- */
.mb-top__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.mb-top__layout {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  margin-bottom: 64px;
}
.mb-top__main {
  flex: 1;
  min-width: 0;
}
.mb-top__aside {
  width: 300px;
  flex-shrink: 0;
}
@media screen and (max-width: 900px) {
  .mb-top__layout {
    flex-direction: column;
  }
  .mb-top__aside {
    width: 100%;
  }
}

/* ----------------------------------------
   ヒーロー（カテゴリトップ見出し）
---------------------------------------- */
.mb-top-hero {
  padding: 48px 20px;
  text-align: center;
  background-color: #fff;
  margin: 0 -40px;
}
.mb-top-hero__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 16px;
  border-radius: 20px;
  background: var(--mb-primary-light);
  border: 1.5px solid var(--mb-primary);
  color: var(--mb-primary-dark);
  font-size: 13px;
  font-weight: bold;
}
.mb-top-hero__title {
  margin: 0 0 12px;
  color: var(--mb-text-primary);
  font-size: clamp(22px, 4vw, 36px);
  font-weight: bold;
  line-height: 1.3;
}
.mb-top-hero__title em {
  color: var(--mb-primary);
  font-style: normal;
}
.mb-top-hero__lead {
  max-width: 560px;
  margin: 0 auto;
  color: var(--mb-text-secondary);
  font-size: 15px;
  line-height: 1.8;
}

/* ----------------------------------------
   カテゴリ選択カード（子ども / 大人）
---------------------------------------- */
.mb-top-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}
@media screen and (max-width: 640px) {
  .mb-top-categories {
    grid-template-columns: 1fr;
  }
}

.mb-top-cat-card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--mb-border);
  background: var(--mb-surface);
  box-shadow: 0 2px 12px rgba(30, 42, 34, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mb-top-cat-card__header {
  padding: 24px 24px 20px;
  color: #fff;
}
.mb-top-cat-card--kids .mb-top-cat-card__header {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
}
.mb-top-cat-card--adult .mb-top-cat-card__header {
  background: linear-gradient(135deg, var(--mb-adult-from), var(--mb-adult-to));
}
.mb-top-cat-card__icon {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}
.mb-top-cat-card__title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: bold;
}
.mb-top-cat-card__sub {
  font-size: 13px;
  opacity: 0.9;
}
.mb-top-cat-card__body {
  padding: 20px 24px 24px;
}
.mb-top-cat-card__desc {
  color: var(--mb-text-secondary);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.mb-top-cat-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.mb-top-cat-card__cta {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.mb-top-cat-card__cta:hover {
  opacity: 0.88;
  color: #fff !important;
  text-decoration: none;
}
.mb-top-cat-card--kids .mb-top-cat-card__cta {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
}
.mb-top-cat-card--adult .mb-top-cat-card__cta {
  background: linear-gradient(135deg, var(--mb-adult-from), var(--mb-adult-to));
}

/* ----------------------------------------
   検索ユニット（カテゴリ内）
---------------------------------------- */
.mb-search-unit {
  padding: 24px;
  border-radius: 12px;
  border: 2px solid var(--mb-border);
  background: var(--mb-surface);
  margin-bottom: 32px;
}
.mb-search-unit--kids {
  border-color: var(--mb-kids-from);
}
.mb-search-unit--adult {
  border-color: var(--mb-adult-from);
}
.mb-search-unit__form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.mb-search-unit__form input,
.mb-search-unit__form select {
  flex: 1;
  padding: 11px 14px;
  border: 1.5px solid var(--mb-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--mb-text-primary);
  background: var(--mb-surface);
}
.mb-search-unit__form input:focus,
.mb-search-unit__form select:focus {
  outline: none;
  border-color: var(--mb-primary);
}
@media screen and (max-width: 640px) {
  .mb-search-unit__form {
    flex-direction: column;
  }
}
.mb-search-unit__btn {
  padding: 11px 28px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.mb-search-unit__btn:hover {
  opacity: 0.88;
}
.mb-search-unit__btn--kids {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
}
.mb-search-unit__btn--adult {
  background: linear-gradient(135deg, var(--mb-adult-from), var(--mb-adult-to));
}
.mb-search-unit__sub {
  font-size: 13px;
  padding-top: 16px;
  border-top: 1px solid var(--mb-border);
}
.mb-search-unit__label {
  display: block;
  margin-bottom: 8px;
  color: var(--mb-text-primary);
  font-weight: bold;
  font-size: 13px;
}
.mb-search-unit__area-links {
  margin-bottom: 14px;
  line-height: 2;
}
.mb-search-unit__area-links a {
  color: var(--mb-primary);
  font-weight: bold;
  font-size: 13px;
  margin-right: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mb-search-unit__area-links a:hover {
  color: var(--mb-primary-dark) !important;
}
.mb-search-unit__hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mb-search-unit__hashtag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.2s;
}
.mb-search-unit__hashtag:hover {
  opacity: 0.8;
  text-decoration: none;
}
.mb-search-unit__hashtag--kids {
  background: var(--mb-kids-light);
  color: var(--mb-kids-text);
  border: 1px solid #FDDEA0;
}
.mb-search-unit__hashtag--adult {
  background: var(--mb-adult-light);
  color: var(--mb-adult-text);
  border: 1px solid #BFCFEE;
}

/* ----------------------------------------
   セクション見出し
---------------------------------------- */
.mb-top-section {
  margin-bottom: 40px;
}
.mb-top-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: bold;
  color: var(--mb-text-primary);
  margin: 0 0 24px;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--mb-border);
}
.mb-top-section__title::before {
  content: "";
  display: block;
  width: 6px;
  height: 1.2em;
  border-radius: 3px;
}
.mb-top-section__title--kids::before {
  background: linear-gradient(180deg, var(--mb-kids-from), var(--mb-kids-to));
}
.mb-top-section__title--adult::before {
  background: linear-gradient(180deg, var(--mb-adult-from), var(--mb-adult-to));
}

/* ----------------------------------------
   ピックアップグリッド（3列）
---------------------------------------- */
.mb-top-pickup {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media screen and (max-width: 900px) {
  .mb-top-pickup {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 480px) {
  .mb-top-pickup {
    grid-template-columns: 1fr;
  }
}

.mb-top-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mb-border);
  border-radius: 10px;
  background: var(--mb-surface);
  font-size: 13px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mb-top-card__thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--mb-bg-section);
}
.mb-top-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-top-card__body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mb-top-card__name {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--mb-text-primary);
  line-height: 1.4;
}
.mb-top-card__rating {
  font-size: 14px;
  font-weight: bold;
  color: var(--mb-accent);
}
.mb-top-card__rating span {
  color: var(--mb-text-muted);
  font-size: 11px;
  font-weight: normal;
  margin-left: 4px;
}
.mb-top-card__link {
  margin-top: auto;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
.mb-top-card__link--kids {
  color: var(--mb-kids-from);
}
.mb-top-card__link--adult {
  color: var(--mb-adult-from);
}
.mb-top-card__link:hover {
  text-decoration: underline;
}

/* ----------------------------------------
   記事一覧（コンパクト）
---------------------------------------- */
.mb-top-articles {
  padding: 20px;
  border: 1px solid var(--mb-border);
  border-radius: 10px;
  background: var(--mb-surface);
  margin-bottom: 32px;
}
.mb-top-articles__title {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 16px;
  color: var(--mb-text-primary);
}
.mb-top-articles__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mb-top-articles__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mb-bg-section);
}
.mb-top-articles__item:last-child {
  border-bottom: none;
}
.mb-top-articles__thumb {
  width: 88px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--mb-bg-section);
}
.mb-top-articles__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mb-top-articles__name {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mb-text-primary);
}

/* ----------------------------------------
   FAQ
---------------------------------------- */
.mb-top-faq {
  padding: 20px;
  border: 1px solid var(--mb-border);
  border-radius: 10px;
  background: var(--mb-surface);
  margin-bottom: 32px;
}
.mb-top-faq__title {
  font-size: 17px;
  font-weight: bold;
  margin: 0 0 16px;
  color: var(--mb-text-primary);
}
.mb-top-faq__item {
  padding: 14px;
  border-radius: 8px;
  background: var(--mb-bg-section);
  border: 1px solid var(--mb-border);
  margin-bottom: 10px;
}
.mb-top-faq__item:last-child {
  margin-bottom: 0;
}
.mb-top-faq__q {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 14px;
}
.mb-top-faq__q::before {
  content: "Q. ";
}
.mb-top-faq__q--kids {
  color: var(--mb-kids-from);
}
.mb-top-faq__q--adult {
  color: var(--mb-adult-from);
}
.mb-top-faq__a {
  margin: 0;
  font-size: 13px;
  color: var(--mb-text-secondary);
  line-height: 1.7;
}

/* ----------------------------------------
   サイドバーウィジェット
---------------------------------------- */
.mb-top-widget {
  padding: 20px;
  border: 1px solid var(--mb-border);
  border-radius: 10px;
  background: var(--mb-surface);
  margin-bottom: 24px;
  border-top: 4px solid var(--mb-border);
}
.mb-top-widget--kids {
  border-top-color: var(--mb-kids-from);
}
.mb-top-widget--adult {
  border-top-color: var(--mb-adult-from);
}
.mb-top-widget--review {
  border-top-color: var(--mb-primary);
}
.mb-top-widget__title {
  font-weight: bold;
  font-size: 15px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--mb-border);
  color: var(--mb-text-primary);
}
.mb-top-widget__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mb-top-widget__rank-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--mb-text-primary);
}
.mb-top-widget__rank-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--mb-text-secondary);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}
.mb-top-widget__rank-num--1 {
  background: var(--mb-accent);
}
.mb-top-widget__review {
  font-size: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--mb-border);
}
.mb-top-widget__review:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.mb-top-widget__review strong {
  display: block;
  margin-bottom: 4px;
  color: var(--mb-text-primary);
}
.mb-top-widget__review p {
  margin: 0;
  color: var(--mb-text-secondary);
  line-height: 1.6;
}

/* ----------------------------------------
   セクション区切り
---------------------------------------- */
.mb-top-divider {
  border: none;
  border-top: 2px dashed var(--mb-border);
  margin: 48px 0;
}

/* トップページのみ main・sidebar 背景色を上書き（PC のみ） */
@media screen and (min-width: 900px) {
  body.home .main,
  body.front-top-page .main {
    background-color: #fafaf7 !important;
    background-color: #f6faf7 !important;
    border: none !important;
  }
  body.home .sidebar,
  body.front-top-page .sidebar {
    background-color: #fafaf7 !important;
    background-color: #f6faf7 !important;
  }
}
/* ===== ★2 エリア別 教室一覧ページ ===== */
/* 例：佐久市の子ども向けプログラミング教室一覧         */
/* ----------------------------------------
   ページヘッダー（カテゴリグラデーション）
---------------------------------------- */
.mb-arc-header {
  padding: 36px 20px 32px;
  color: #fff;
  text-align: center;
  /* 子ども向け（デフォルト） */
  background: linear-gradient(135deg, var(--mb-kids-from) 0%, var(--mb-kids-to) 100%);
  /* 大人向けは body.category-adult-programming でこれを上書き */
}
.category-adult-programming .mb-arc-header {
  background: linear-gradient(135deg, var(--mb-adult-from) 0%, var(--mb-adult-to) 100%);
}
.mb-arc-header__breadcrumb {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 12px;
}
.mb-arc-header__breadcrumb a {
  color: #fff;
  text-decoration: underline;
}
.mb-arc-header__title {
  margin: 0 0 8px;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.mb-arc-header__count {
  font-size: 14px;
  opacity: 0.9;
}
.mb-arc-header__count strong {
  font-size: 20px;
  font-weight: bold;
}

/* ----------------------------------------
   エリアナビ（近隣エリア）
---------------------------------------- */
.mb-arc-area-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  background: var(--mb-surface);
  border-bottom: 1px solid var(--mb-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.mb-arc-area-nav__label {
  color: var(--mb-text-muted);
  font-weight: bold;
  white-space: nowrap;
}
.mb-arc-area-nav__link {
  padding: 3px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--mb-border);
  color: var(--mb-text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}
.mb-arc-area-nav__link:hover, .mb-arc-area-nav__link--active {
  border-color: var(--mb-kids-from);
  background: var(--mb-kids-light);
  color: var(--mb-kids-text) !important;
  text-decoration: none;
}

/* ----------------------------------------
   フィルターバー
---------------------------------------- */
.mb-arc-filter {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.mb-arc-filter__label {
  font-size: 13px;
  color: var(--mb-text-muted);
  font-weight: bold;
  white-space: nowrap;
}
.mb-arc-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mb-arc-filter__tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--mb-border);
  background: var(--mb-surface);
  color: var(--mb-text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.mb-arc-filter__tag:hover, .mb-arc-filter__tag--active {
  border-color: var(--mb-kids-from);
  background: var(--mb-kids-light);
  color: var(--mb-kids-text) !important;
  text-decoration: none;
}

/* ----------------------------------------
   メインレイアウト
---------------------------------------- */
.mb-arc-layout {
  max-width: 1200px;
  margin: 28px auto 64px;
  padding: 0 20px;
  display: flex;
  gap: 32px;
}
.mb-arc-layout__main {
  flex: 1;
  min-width: 0;
}
.mb-arc-layout__aside {
  width: 280px;
  flex-shrink: 0;
}
@media screen and (max-width: 900px) {
  .mb-arc-layout {
    flex-direction: column;
  }
  .mb-arc-layout__aside {
    width: 100%;
  }
}

/* ----------------------------------------
   ランキングカード（一覧）
---------------------------------------- */
.mb-arc-item {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  background: var(--mb-surface);
  box-shadow: 0 2px 8px rgba(30, 42, 34, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mb-arc-item:hover {
  box-shadow: 0 6px 20px rgba(30, 42, 34, 0.1);
  transform: translateY(-2px);
}
.mb-arc-item {
  /* 順位バッジ */
}
.mb-arc-item__rank {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  background: var(--mb-text-secondary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.mb-arc-item__rank--1 {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
}
.mb-arc-item__rank--2 {
  background: #9AABA0;
}
.mb-arc-item__rank--3 {
  background: #B87333;
}
.mb-arc-item {
  /* サムネイル */
}
.mb-arc-item__thumb {
  flex-shrink: 0;
  width: 200px;
  height: 136px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mb-bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mb-text-muted);
  font-size: 12px;
}
.mb-arc-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 640px) {
  .mb-arc-item__thumb {
    width: 100%;
    height: 180px;
  }
}
.mb-arc-item {
  /* 詳細 */
}
.mb-arc-item__body {
  flex: 1;
  min-width: 0;
}
.mb-arc-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.mb-arc-item__name {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: bold;
  color: var(--mb-text-primary);
  line-height: 1.3;
}
.mb-arc-item__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 14px;
}
.mb-arc-item__rating-stars {
  color: var(--mb-accent);
  letter-spacing: 1px;
}
.mb-arc-item__rating-score {
  font-weight: bold;
  color: var(--mb-text-primary);
  font-size: 16px;
}
.mb-arc-item__rating-count {
  color: var(--mb-text-muted);
  font-size: 12px;
}
.mb-arc-item {
  /* スペックテーブル */
}
.mb-arc-item__specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 16px;
}
.mb-arc-item__specs th,
.mb-arc-item__specs td {
  padding: 6px 10px;
  border: 1px solid var(--mb-border);
  text-align: left;
}
.mb-arc-item__specs th {
  width: 28%;
  background: var(--mb-bg-section);
  color: var(--mb-text-secondary);
  font-weight: bold;
  white-space: nowrap;
}
.mb-arc-item__specs td {
  color: var(--mb-text-primary);
}
.mb-arc-item {
  /* CTAボタン */
}
.mb-arc-item__cta {
  display: flex;
  gap: 10px;
}
@media screen and (max-width: 640px) {
  .mb-arc-item {
    flex-direction: column;
  }
}

/* CTAボタン共通 */
.mb-arc-btn {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.mb-arc-btn:hover {
  opacity: 0.85;
  text-decoration: none;
}
.mb-arc-btn--primary {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  color: #fff;
}
.mb-arc-btn--primary:hover {
  color: #fff !important;
}
.mb-arc-btn--secondary {
  background: var(--mb-surface);
  color: var(--mb-primary);
  border: 1.5px solid var(--mb-primary);
}
.mb-arc-btn--secondary:hover {
  color: var(--mb-primary-dark) !important;
}

/* ----------------------------------------
   サイドバー（一覧ページ用）
---------------------------------------- */
.mb-arc-widget {
  padding: 18px;
  border: 1px solid var(--mb-border);
  border-radius: 10px;
  background: var(--mb-surface);
  margin-bottom: 20px;
}
.mb-arc-widget__title {
  font-weight: bold;
  font-size: 14px;
  color: var(--mb-text-primary);
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid var(--mb-border);
}
.mb-arc-widget__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mb-arc-widget__links a {
  font-size: 13px;
  color: var(--mb-text-secondary);
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 1px dashed var(--mb-border);
}
.mb-arc-widget__links a:hover {
  color: var(--mb-primary) !important;
  text-decoration: none;
}
.mb-arc-widget__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mb-arc-widget__tags a {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid var(--mb-border);
  color: var(--mb-text-secondary);
  font-size: 12px;
  text-decoration: none;
  transition: all 0.15s ease;
}
.mb-arc-widget__tags a:hover {
  border-color: var(--mb-kids-from);
  background: var(--mb-kids-light);
  color: var(--mb-kids-text) !important;
  text-decoration: none;
}

/* ========================================
   ★2 カテゴリーテンプレート (rk-* クラス)
   category-programming.php が出力する実クラス
======================================== */
/* グラデーションヘッダー */
.rk-arc-header {
  padding: 36px 20px 32px;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--mb-kids-from) 0%, var(--mb-kids-to) 100%);
}
.rk-arc-header__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.rk-arc-header__breadcrumb {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 12px;
}
.rk-arc-header__breadcrumb a {
  color: #fff;
  text-decoration: underline;
}
.rk-arc-header__title {
  margin: 0 0 8px;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: bold;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.rk-arc-header__count {
  font-size: 14px;
  opacity: 0.9;
}
.rk-arc-header__count strong {
  font-size: 20px;
  font-weight: bold;
}

/* ラッパー / メインカラム */
.rk-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

.rk-main { /* 将来サイドバー対応のため残す */ }

/* ----------------------------------------
   ランキングカード (.rk-item)
---------------------------------------- */
.rk-item {
  position: relative;
  margin-bottom: 28px;
  padding: 24px;
  border: 1px solid var(--mb-border);
  border-radius: 12px;
  background: var(--mb-surface);
  box-shadow: 0 2px 8px rgba(30, 42, 34, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.rk-item:hover {
  box-shadow: 0 6px 20px rgba(30, 42, 34, 0.1);
  transform: translateY(-2px);
}

/* 順位バッジ */
.rk-badge {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  background: var(--mb-text-secondary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 1;
}
.rk-badge.rank-1 {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
}
.rk-badge.rank-2 {
  background: #9AABA0;
}
.rk-badge.rank-3 {
  background: #B87333;
}

/* カード内レイアウト */
.rk-content {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 640px) {
  .rk-content {
    flex-direction: column;
  }
}

/* サムネイル */
.rk-thumb {
  flex-shrink: 0;
  width: 200px;
  height: 140px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--mb-bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mb-text-muted);
  font-size: 12px;
}
.rk-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media screen and (max-width: 640px) {
  .rk-thumb {
    width: 100%;
    height: 180px;
  }
}

/* テキスト詳細エリア */
.rk-details {
  flex: 1;
  min-width: 0;
  /* スクール名リンク */
}
.rk-details h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.3;
  /* Cocoon のデフォルトborderをリセット */
  border: none;
  padding: 0;
  background: none;
}
.rk-details h2::before {
  display: none;
}
.rk-details h2 a {
  color: var(--mb-primary);
  text-decoration: none;
}
.rk-details h2 a:hover {
  color: var(--mb-primary-dark) !important;
  text-decoration: underline;
}
.rk-details p {
  font-size: 14px;
  color: var(--mb-text-secondary);
  margin: 0 0 12px;
}

/* タグ */
.rk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.rk-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 14px;
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
  font-size: 12px;
  font-weight: bold;
}

/* スペックテーブル */
.rk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 0;
}
.rk-table th,
.rk-table td {
  padding: 6px 10px;
  border: 1px solid var(--mb-border);
  text-align: left;
}
.rk-table th {
  width: 28%;
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
  font-weight: bold;
  white-space: nowrap;
}
.rk-table td {
  color: var(--mb-text-primary);
}

/* CTAエリア */
.rk-cta {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
@media screen and (max-width: 480px) {
  .rk-cta {
    flex-direction: column;
  }
}

/* ボタン共通 */
.rk-btn {
  flex: 1;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.rk-btn:hover {
  opacity: 0.85;
  text-decoration: none;
}

/* メインCTA（公式サイト）*/
.rk-btn-main {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  color: #fff;
}
.rk-btn-main:hover {
  color: #fff !important;
}

/* サブCTA（詳細レビュー）*/
.rk-btn-sub {
  background: var(--mb-surface);
  color: var(--mb-primary);
  border: 1.5px solid var(--mb-primary);
}
.rk-btn-sub:hover {
  color: var(--mb-primary-dark) !important;
}

/* ページネーション */
.rk-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.rk-pagination a,
.rk-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  color: var(--mb-text-primary);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.15s ease;
}
.rk-pagination a:hover,
.rk-pagination span:hover {
  border-color: var(--mb-kids-from);
  color: var(--mb-kids-from) !important;
  text-decoration: none;
}
.rk-pagination .current {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  border-color: var(--mb-kids-from);
  color: #fff;
}

/* ========================================
   ページネーション（mb-arc 系）
======================================== */
/* ----------------------------------------
   ページネーション
---------------------------------------- */
.mb-arc-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.mb-arc-pagination a,
.mb-arc-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-border);
  color: var(--mb-text-primary);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: all 0.15s ease;
}
.mb-arc-pagination a:hover,
.mb-arc-pagination span:hover {
  border-color: var(--mb-kids-from);
  color: var(--mb-kids-from) !important;
  text-decoration: none;
}
.mb-arc-pagination .current {
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  border-color: var(--mb-kids-from);
  color: #fff;
}

/* ===== ★3 教室詳細ページ ===== */
/* ----------------------------------------
   教室ヘッダー
---------------------------------------- */
.mb-det-header {
  padding: 32px 20px 28px;
  background: var(--mb-primary-light);
  border-bottom: 1px solid var(--mb-border);
}
.mb-det-header__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.mb-det-header__breadcrumb {
  font-size: 12px;
  color: var(--mb-text-muted);
  margin-bottom: 16px;
}
.mb-det-header__breadcrumb a {
  color: var(--mb-text-secondary);
  text-decoration: none;
}
.mb-det-header__breadcrumb a:hover {
  color: var(--mb-primary) !important;
}
.mb-det-header__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.mb-det-header__name {
  margin: 0 0 12px;
  color: var(--mb-text-primary);
  font-size: clamp(20px, 4vw, 32px);
  font-weight: bold;
  line-height: 1.3;
}
.mb-det-header__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mb-det-header__rating-stars {
  color: var(--mb-accent);
  font-size: 20px;
  letter-spacing: 2px;
}
.mb-det-header__rating-score {
  font-size: 22px;
  font-weight: bold;
  color: var(--mb-text-primary);
}
.mb-det-header__rating-count {
  font-size: 13px;
  color: var(--mb-text-muted);
}

/* ----------------------------------------
   メインレイアウト
---------------------------------------- */
.mb-det-layout {
  max-width: 1200px;
  margin: 32px auto 64px;
  padding: 0 20px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.mb-det-layout__main {
  flex: 1;
  min-width: 0;
}
.mb-det-layout__aside {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 80px; /* ヘッダー高さに合わせて調整 */
}
@media screen and (max-width: 900px) {
  .mb-det-layout {
    flex-direction: column;
  }
  .mb-det-layout__aside {
    width: 100%;
    position: static;
  }
}

/* ----------------------------------------
   スティッキーCTAボックス（サイドバー）
---------------------------------------- */
.mb-det-cta-box {
  padding: 24px;
  border: 2px solid var(--mb-kids-from);
  border-radius: 12px;
  background: var(--mb-surface);
  text-align: center;
}
.mb-det-cta-box__name {
  font-size: 15px;
  font-weight: bold;
  color: var(--mb-text-primary);
  margin: 0 0 12px;
}
.mb-det-cta-box__rating {
  margin-bottom: 16px;
  font-size: 22px;
  color: var(--mb-accent);
  font-weight: bold;
}
.mb-det-cta-box__rating span {
  font-size: 13px;
  color: var(--mb-text-muted);
  font-weight: normal;
  margin-left: 6px;
}
.mb-det-cta-box__btn {
  display: block;
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  margin-bottom: 10px;
  transition: opacity 0.2s ease;
}
.mb-det-cta-box__btn::after {
  content: " →";
}
.mb-det-cta-box__btn:hover {
  opacity: 0.88;
  color: #fff !important;
  text-decoration: none;
}
.mb-det-cta-box__sub-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1.5px solid var(--mb-primary);
  color: var(--mb-primary);
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  transition: all 0.2s ease;
}
.mb-det-cta-box__sub-btn:hover {
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark) !important;
  text-decoration: none;
}
.mb-det-cta-box__note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--mb-text-muted);
}

/* ----------------------------------------
   教室サムネイル
---------------------------------------- */
.mb-det-thumb {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  aspect-ratio: 16/7;
  background: var(--mb-bg-section);
}
.mb-det-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------
   教室基本情報テーブル
---------------------------------------- */
.mb-det-info {
  margin-bottom: 32px;
}
.mb-det-info__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: bold;
  color: var(--mb-text-primary);
  margin: 0 0 16px;
  padding-left: 14px;
  border-left: 4px solid var(--mb-primary);
}
.mb-det-info__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.7;
}
.mb-det-info__table th,
.mb-det-info__table td {
  padding: 12px 16px;
  border: 1px solid var(--mb-border);
  text-align: left;
  vertical-align: top;
}
.mb-det-info__table th {
  width: 28%;
  background: var(--mb-primary-light);
  color: var(--mb-primary-dark);
  font-weight: bold;
  white-space: nowrap;
}
.mb-det-info__table td {
  background: var(--mb-surface);
  color: var(--mb-text-primary);
}
@media screen and (max-width: 480px) {
  .mb-det-info__table {
    display: block;
  }
  .mb-det-info__table tr {
    display: block;
    margin-bottom: 2px;
  }
  .mb-det-info__table th,
  .mb-det-info__table td {
    display: block;
    width: 100%;
    white-space: normal;
  }
}

/* ----------------------------------------
   コンテンツセクション（本文内）
---------------------------------------- */
.mb-det-section {
  margin-bottom: 40px;
}
.mb-det-section__title {
  position: relative;
  padding: 12px 16px 12px 20px;
  border-left: 4px solid var(--mb-primary);
  border-radius: 0 8px 8px 0;
  background: var(--mb-primary-light);
  color: var(--mb-text-primary);
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 16px;
}
.mb-det-section__body {
  color: var(--mb-text-primary);
  font-size: 15px;
  line-height: 1.8;
}

/* ----------------------------------------
   口コミ・レビューカード
---------------------------------------- */
.mb-det-reviews {
  margin-bottom: 32px;
}

.mb-det-review-card {
  padding: 20px;
  border: 1px solid var(--mb-border);
  border-radius: 10px;
  background: var(--mb-surface);
  margin-bottom: 16px;
}
.mb-det-review-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mb-det-review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mb-bg-section);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mb-det-review-card__meta {
  flex: 1;
}
.mb-det-review-card__name {
  font-weight: bold;
  font-size: 14px;
  color: var(--mb-text-primary);
}
.mb-det-review-card__date {
  font-size: 12px;
  color: var(--mb-text-muted);
}
.mb-det-review-card__stars {
  color: var(--mb-accent);
  font-size: 16px;
  letter-spacing: 1px;
}
.mb-det-review-card__text {
  font-size: 14px;
  color: var(--mb-text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ----------------------------------------
   関連教室
---------------------------------------- */
.mb-det-related {
  margin-bottom: 40px;
}
.mb-det-related__title {
  font-size: 20px;
  font-weight: bold;
  color: var(--mb-text-primary);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mb-border);
}
.mb-det-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media screen and (max-width: 640px) {
  .mb-det-related__grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------
   記事下CTA（スクロール後誘導）
---------------------------------------- */
.mb-det-bottom-cta {
  padding: 32px;
  border-radius: 12px;
  text-align: center;
  background: linear-gradient(135deg, var(--mb-kids-from), var(--mb-kids-to));
  color: #fff;
  margin-bottom: 40px;
}
.mb-det-bottom-cta__title {
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 8px;
}
.mb-det-bottom-cta__lead {
  font-size: 14px;
  opacity: 0.9;
  margin: 0 0 20px;
}
.mb-det-bottom-cta__btn {
  display: inline-block;
  padding: 14px 40px;
  border-radius: 40px;
  background: #fff;
  color: var(--mb-kids-from);
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.mb-det-bottom-cta__btn:hover {
  transform: translateY(-2px);
  color: var(--mb-kids-from) !important;
  text-decoration: none;
}

/*# sourceMappingURL=style.css.map */