/* キッズ集 ハブサイト共通スタイル
   /spots/ は独立した /spots/style.css を使うため、こちらは ハブ + /edu/ + /goods/ + /articles/ 用 */

:root {
  --color-primary: #ff8a65;
  --color-primary-dark: #e07252;
  --color-navy: #1a2233;
  --color-text: #333;
  --color-text-soft: #666;
  --color-text-faint: #888;
  --color-border: #e4e8ef;
  --color-card-bg: #fff;
  --color-bg: #fafbfc;
  --color-cream: #fdf6e8;
  --radius: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
}

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== ハブヘッダー（全ページ共通） ===== */
.hub-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.hub-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hub-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-navy);
  font-size: 1.1em;
}
.hub-brand:hover { text-decoration: none; }
.hub-brand-emoji { font-size: 1.4em; }
.hub-nav {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.hub-nav::-webkit-scrollbar { display: none; }
.hub-nav a {
  padding: 6px 9px;
  color: var(--color-text-soft);
  font-size: .86em;
  border-radius: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .15s, color .15s;
}
.hub-nav a:hover {
  background: var(--color-cream);
  color: var(--color-primary-dark);
  text-decoration: none;
}
.hub-nav a.active {
  background: var(--color-primary);
  color: #fff;
}

/* ===== メイン ===== */
.hub-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

/* ===== ヒーロー ===== */
.hub-hero {
  text-align: center;
  padding: 40px 20px 30px;
}
.hub-hero h1 {
  font-size: 2em;
  margin: 0 0 12px;
  color: var(--color-navy);
  line-height: 1.4;
}
.hub-hero-lead {
  font-size: 1.05em;
  color: var(--color-text-soft);
  margin: 0;
}

/* ===== セクション見出し ===== */
.hub-section-title {
  font-size: 1.3em;
  margin: 32px 0 16px;
  color: var(--color-navy);
  border-left: 4px solid var(--color-primary);
  padding-left: 12px;
  /* 長い英字ラベル（LEGO BOOST/Sphero/… 等）がスマホ幅で折り返せず
     ページ全体を横に押し広げるのを防ぐ（2026-07-05 スマホはみ出し点検） */
  overflow-wrap: anywhere;
}

/* ===== ツールカード ===== */
.hub-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.hub-tool-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  color: var(--color-text);
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
}
.hub-tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.hub-tool-emoji {
  font-size: 2.2em;
  margin-bottom: 8px;
}
.hub-tool-card h3 {
  margin: 0 0 8px;
  font-size: 1.1em;
  color: var(--color-navy);
}
.hub-tool-card p {
  margin: 0 0 12px;
  font-size: .92em;
  color: var(--color-text-soft);
  flex-grow: 1;
}
.hub-tool-cta {
  font-size: .92em;
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* ===== 記事リスト ===== */
.hub-article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.hub-article-list li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.hub-article-list li a {
  color: var(--color-navy);
  font-weight: 600;
  font-size: .95em;
}
.hub-article-empty {
  color: var(--color-text-faint);
  font-style: italic;
}

/* ===== 運営方針 ===== */
.hub-about-list {
  margin: 0;
  padding-left: 20px;
}
.hub-about-list li {
  margin-bottom: 8px;
  font-size: .95em;
  color: var(--color-text-soft);
}
.hub-about-list strong {
  color: var(--color-navy);
}

/* ===== フッター ===== */
.hub-footer {
  text-align: center;
  padding: 30px 20px 40px;
  color: var(--color-text-faint);
  font-size: .85em;
  border-top: 1px solid var(--color-border);
  margin-top: 40px;
}
.hub-footer p { margin: 6px 0; }
.hub-footer-disclosure {
  font-size: .85em;
  color: var(--color-text-faint);
}

/* ===== /edu/, /goods/ 共通 ===== */
.page-hero {
  padding: 30px 20px 20px;
  text-align: center;
}
.page-hero h1 {
  font-size: 1.7em;
  margin: 0 0 8px;
  color: var(--color-navy);
}
.page-hero p {
  color: var(--color-text-soft);
  margin: 0;
}

.compare-table-wrap {
  overflow-x: auto;
  margin: 20px 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9em;
}
/* スマホで列が潰れて1文字ずつ折り返すのを防ぐ：各列に最小幅を与えて
   テーブルを横スクロール(.compare-table-wrap の overflow-x:auto)させる。
   先頭列(サービス名)は sticky で左に固定し、横スクロール中も見えるようにする。 */
.compare-table th,
.compare-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  min-width: 108px;
}
.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky;
  left: 0;
  min-width: 124px;
  background: #fff;
  z-index: 2;
}
.compare-table thead th:first-child {
  background: var(--color-cream);
  z-index: 3;
}
.compare-table thead th {
  background: var(--color-cream);
  color: var(--color-navy);
  font-weight: 600;
}
.compare-table tbody tr:hover { background: #fafbfc; }
.compare-table .price-cell { white-space: nowrap; }

.affiliate-card {
  background: var(--color-cream);
  border: 1px solid #f0c674;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 16px 0;
}
.affiliate-card h4 {
  margin: 0 0 8px;
  font-size: 1em;
  color: var(--color-navy);
}
.affiliate-card a {
  display: inline-block;
  padding: 8px 14px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 6px;
  font-size: .9em;
  font-weight: 600;
  margin: 4px 6px 4px 0;
}
.affiliate-card a:hover { background: var(--color-primary-dark); text-decoration: none; }
.affiliate-card a.secondary { background: var(--color-navy); }
.affiliate-card a.secondary:hover { background: #344057; }

/* 提携準備中（ASP承認待ち）の非リンク化 — 景表法のおとり広告リスク回避 */
.affiliate-card span.aff-pending,
span.aff-pending {
  display: inline-block;
  padding: 8px 14px;
  margin: 4px 6px 4px 0;
  background: #cccccc;
  color: #555555;
  border-radius: 6px;
  font-weight: 600;
  font-size: .92em;
  cursor: not-allowed;
  opacity: .85;
  position: relative;
}
span.aff-pending::after {
  content: " (提携準備中)";
  font-size: .82em;
  font-weight: 400;
  opacity: .8;
}

.pr-notice {
  display: inline-block;
  background: #f0c674;
  color: #5c4220;
  font-size: .75em;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}

/* ===== カテゴリカード（/goods/ トップ等） ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.category-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--color-text);
  transition: transform .15s, border-color .15s;
}
.category-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  text-decoration: none;
}
.category-card-emoji { font-size: 1.8em; margin-bottom: 6px; }
.category-card h3 { margin: 0 0 4px; font-size: 1em; color: var(--color-navy); }
.category-card p { margin: 0; font-size: .85em; color: var(--color-text-soft); }

/* ===== レスポンシブ ===== */
@media (max-width: 768px) {
  .hub-main { padding: 16px; }
}
@media (max-width: 600px) {
  /* 横幅を活かす（左右余白を詰めて本文を広く） */
  .hub-main { padding: 14px; }
  .hub-header-inner { padding: 10px 14px; gap: 8px; }

  /* ヒーロー＝縦の間延びを抑える */
  .hub-hero { padding: 24px 6px 18px; }
  .hub-hero h1 { font-size: 1.5em; line-height: 1.35; margin-bottom: 10px; }
  .hub-hero-lead { font-size: .98em; }
  .page-hero { padding: 20px 6px 14px; }
  .page-hero h1 { font-size: 1.4em; }

  /* セクション見出し */
  .hub-section-title { font-size: 1.15em; margin: 26px 0 12px; }

  /* ナビ＝折返しで散らからないよう、横スクロールの1行に */
  .hub-nav {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .hub-nav::-webkit-scrollbar { display: none; }
  .hub-nav a { white-space: nowrap; padding: 8px 12px; }

  /* カード＝余白とグリッド間隔を詰める */
  .hub-tool-grid,
  .hub-article-list { grid-template-columns: 1fr; gap: 12px; }
  .category-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
  .hub-tool-card { padding: 16px; }
  .hub-tool-emoji { font-size: 2em; }
  .category-card { padding: 13px; }
  .category-card-emoji { font-size: 1.6em; }

  /* 比較表＝横スクロール前提でフォント/余白を圧縮 */
  .compare-table { font-size: .85em; }
  .compare-table th,
  .compare-table td { padding: 8px 10px; }

  /* アフィリ/CTAボタン＝タップしやすく */
  .affiliate-card a,
  .affiliate-card span.aff-pending,
  span.aff-pending { padding: 10px 14px; }

  /* フッターの間延びを抑える */
  .hub-footer { padding: 24px 16px 32px; margin-top: 28px; }
}
@media (max-width: 380px) {
  .hub-hero h1 { font-size: 1.35em; }
  .category-grid { grid-template-columns: 1fr; }
}

/* ===== breadcrumb (injected) ===== */
.breadcrumb{font-size:.8rem;line-height:1.4}
.breadcrumb-inner{list-style:none;margin:0 auto;padding:6px 16px 0;max-width:900px;display:flex;flex-wrap:wrap;align-items:center;gap:2px 0}
.breadcrumb-item{display:inline-flex;align-items:center;min-width:0}
.breadcrumb--top{padding-top:4px}
.breadcrumb--bottom{margin-top:10px;border-top:1px solid #e0e0e0}
.breadcrumb--bottom .breadcrumb-inner{padding:10px 16px}
.breadcrumb a{color:#6b6b6b;text-decoration:none;white-space:nowrap}
.breadcrumb a:hover{color:#e65100;text-decoration:underline}
.breadcrumb .sep{margin:0 8px;color:#9a9a9a}
.breadcrumb .current{color:#1a1a1a;font-weight:600;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== 地図CTA（トップの主役導線） ===== */
.map-cta {
  display: flex;
  align-items: stretch;
  margin: 4px auto 8px;
  max-width: 860px;
  background: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
.map-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.map-cta-visual {
  position: relative;
  flex: 0 0 38%;
  min-height: 150px;
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.55) 34px 36px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.55) 34px 36px),
    linear-gradient(135deg, #dcefd8, #cfe8f5);
}
.map-pin { position: absolute; font-size: 22px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.map-pin.p1 { top: 14%; left: 18%; font-size: 26px; }
.map-pin.p2 { top: 52%; left: 62%; }
.map-pin.p3 { top: 26%; left: 70%; }
.map-pin.p4 { top: 62%; left: 26%; }
.map-pin.p5 { top: 40%; left: 44%; font-size: 24px; }
.map-cta-body { flex: 1; padding: 18px 20px; text-align: left; }
.map-cta-title { font-size: 1.25em; font-weight: 700; color: var(--color-navy); margin-bottom: 6px; }
.map-cta-desc { font-size: .92em; color: var(--color-text-soft); margin: 0 0 12px; line-height: 1.6; }
.map-cta-btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: .98em;
}
.map-cta:hover .map-cta-btn { background: var(--color-primary-dark); }
@media (max-width: 640px) {
  .map-cta { flex-direction: column; }
  .map-cta-visual { flex: none; min-height: 110px; }
  .map-cta-body { padding: 14px 16px; }
  .map-cta-btn { display: block; text-align: center; }
}