/* --- Scoped styles: apply only inside [id="735QuickReference"] --- */
[id="735QuickReference"] {
  --fg:#222;
  --muted:#666;
  --acc:#0ea5e9;
  --border:#e5e7eb;
}

/* コンテナとタイポ */
[id="735QuickReference"] section {
  max-width:960px;
  margin:0 auto;
  padding:24px;
  color:var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
[id="735QuickReference"] h2 {
  font-weight:800;
  letter-spacing:.01em;
  margin:0;
  font-size:clamp(1rem,2.5vw,1.5rem);
}
[id="735QuickReference"] .lead {
  color:var(--muted);
  font-size:clamp(0.875rem,2vw,1rem);
  line-height:1.5;
}
[id="735QuickReference"] .tag {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#e0f2fe;
  color:#0369a1;
  font-weight:700;
  font-size:0.875rem;
  line-height:1.4;
}

/* ルートの開閉ブロック */
[id="735QuickReference"] #rootToggle {
  border:2px solid #f9a75a;
  border-radius:12px;
  background:#fff;
}
[id="735QuickReference"] #rootToggle > summary {
  cursor:pointer;
  padding:16px;
  font-weight:800;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
[id="735QuickReference"] #rootToggle > summary::-webkit-details-marker {
  display:none;
}
[id="735QuickReference"] #rootToggle .chev {
  transition:transform .2s ease;
  display:inline-block;
}
[id="735QuickReference"] #rootToggle[open] .chev {
  transform:rotate(90deg);
}
[id="735QuickReference"] #rootToggle .content {
  padding:0 16px 16px;
}

/* 入力＆ナビエリア（基準年ブロック） */
[id="735QuickReference"] .control {
  display:flex;
  flex-direction:column;    /* 縦並び */
  align-items:center;       /* 中央寄せ */
  gap:12px;
  margin:14px 0 10px;
  padding:20px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#f8fafc;
  text-align:center;
}

[id="735QuickReference"] .control label {
  font-weight:700;
  font-size:1rem;
  line-height:1.4;
  text-align:center;
  width:100%;
}

/* 入力ボックス（1行・コンパクト） */
[id="735QuickReference"] .control input {
  display:block;
  flex:0 0 auto;              /* 伸びない・潰れない固定要素として扱う */
  width:100%;
  max-width:300px;
  box-sizing:border-box;
  background-color:#fff;
  text-align:center;
  font-size:16px;
  font-weight:500;
  color:#111;
  border:1px solid #cbd5e1;
  border-radius:10px;

  height:42px;                /* 1行固定高さ */
  line-height:42px;           /* テキストを縦中央に */
  padding:0 12px;             /* 上下は0、左右だけ余白 */
}

/* 年移動ボタン群 */
[id="735QuickReference"] .year-nav-buttons {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:stretch;
  gap:8px;
  width:100%;
  max-width:800px;
  box-sizing:border-box;
  margin-top:12px;
}

[id="735QuickReference"] .year-nav-buttons button {
  flex:1 1 0;
  border-radius:10px;
  border:1px solid #cbd5e1;
  background:#fff;
  cursor:pointer;
  font-size:0.95rem;
  font-weight:600;
  line-height:1.4;
  padding:10px 14px;
  white-space:nowrap;
  text-align:center;
  box-sizing:border-box;
  color:#111;
}
[id="735QuickReference"] .year-nav-buttons button:hover {
  background:#f8fafc;
}

/* 今年ボタンの強調（赤系） */
[id="735QuickReference"] .year-nav-buttons #thisYear {
  color:#dc2626;
  font-weight:700;
  border-color:#fca5a5;
  background:#fff5f5;
}
[id="735QuickReference"] .year-nav-buttons #thisYear:hover {
  background:#fee2e2;
}

/* ヘルプテキスト */
[id="735QuickReference"] #help {
  color:var(--muted);
  font-size:0.85rem;
  line-height:1.5;
  text-align:left;
  width:100%;
  max-width:800px;
}

/* 年表示（基準年：2025年（令和7）など） */
[id="735QuickReference"] .stack {
  display:grid;
  gap:6px;
}
[id="735QuickReference"] .muted {
  color:var(--muted);
  line-height:1.4;
  font-size:0.9rem;
}

/* 満年齢・数え年のdetailsブロック */
[id="735QuickReference"] details.block {
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
[id="735QuickReference"] details.block > summary {
  cursor:pointer;
  padding:12px 16px;
  font-weight:700;
  font-size:clamp(0.95rem,2vw,1rem);
  line-height:1.4;
}
[id="735QuickReference"] details.block > div {
  padding:0 16px 16px;
}

/* テーブルラッパー */
[id="735QuickReference"] .table-wrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
  margin-top:10px;
}

/* テーブル本体 */
[id="735QuickReference"] table {
  width:100%;
  border-collapse:collapse;
  min-width:480px;
  table-layout:auto;
}

/* セルのベース共通 */
[id="735QuickReference"] th,
[id="735QuickReference"] td {
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:clamp(0.8rem,2vw,0.95rem);
  line-height:1.4;
  white-space:nowrap;
  padding:10px 8px;
  background-clip:padding-box;
  color:#111;
}

/* ヘッダーセル（祝い年/生まれ年...） */
[id="735QuickReference"] thead th {
  background: linear-gradient(to right, #edf2f7, #f8fafc);
  position:sticky;
  top:0;
  font-weight:700;
  color:#111;
  z-index:1;
}

/* 各年齢行ごとのセル背景グラデ（視認性UP） */
/* 1行目 = 3歳想定：ピンク系（さらに薄く） */
[id="735QuickReference"] tbody tr:nth-child(1) td {
  background: linear-gradient(to right, #fff2f5 0%, #fff8fa 100%);
}

/* 2行目 = 5歳想定：ブルー系（さらに薄く） */
[id="735QuickReference"] tbody tr:nth-child(2) td {
  background: linear-gradient(to right, #edf8ff 0%, #f8fcff 100%);
}

/* 3行目 = 7歳想定：オレンジ/ゴールド系（さらに薄く） */
[id="735QuickReference"] tbody tr:nth-child(3) td {
  background: linear-gradient(to right, #fff6e2 0%, #fffaf0 100%);
}

/* キャプション（テーブル見出し） */
[id="735QuickReference"] caption {
  text-align:left;
  font-weight:800;
  padding:4px 0;
  font-size:clamp(0.9rem,2vw,1rem);
  line-height:1.4;
  color:#111;
}

/* 説明文など */
[id="735QuickReference"] .note {
  color:var(--muted);
  font-size:clamp(0.8rem,2vw,0.94rem);
  margin-top:8px;
  line-height:1.5;
}

/* CTAボタン（中央配置・オレンジ丸型） */
[id="735QuickReference"] .cta {
  display:block;
  margin:20px auto 0;
  padding:14px 28px;
  border-radius:999px;
  background:#f47c3c;          /* 店舗ボタンカラー推定 */
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:clamp(0.9rem,2vw,1rem);
  line-height:1.4;
  text-align:center;
  box-sizing:border-box;
  box-shadow:0 3px 6px rgba(0,0,0,0.1);
  transition:background .25s ease-in-out, transform .15s ease-in-out,
             box-shadow .15s ease-in-out;
}
[id="735QuickReference"] .cta:hover {
  background:#e96b26;
  transform:translateY(-1px);
  box-shadow:0 5px 10px rgba(0,0,0,0.12);
}

/* --- Responsive tweaks --- */
@media (max-width: 768px) {

  [id="735QuickReference"] section {
    padding:16px 12px;
  }

  [id="735QuickReference"] #rootToggle > summary {
    padding:12px;
    font-size:0.95rem;
  }

  [id="735QuickReference"] #rootToggle .content {
    padding:0 12px 12px;
  }

  /* 基準年ボックスの中身を少しコンパクトに */
  [id="735QuickReference"] .control {
    gap:10px;
    padding:16px;
  }

  [id="735QuickReference"] .control label {
    width:100%;
    font-size:0.95rem;
  }

  [id="735QuickReference"] .control input {
    flex:0 0 auto;          /* スマホでも縦伸びさせない */
    width:100%;
    max-width:260px;
    height:40px;
    line-height:40px;
    font-size:16px;
  }

  /* スマホでは年移動ボタンを縦積みにして押しやすく */
  [id="735QuickReference"] .year-nav-buttons {
    flex-direction:column;
    max-width:260px;
    width:100%;
  }

  [id="735QuickReference"] .year-nav-buttons button {
    width:100%;
  }

  [id="735QuickReference"] details.block > summary {
    padding:10px 12px;
  }
  [id="735QuickReference"] details.block > div {
    padding:0 12px 12px;
  }

  [id="735QuickReference"] th,
  [id="735QuickReference"] td {
    padding:8px 6px;
    font-size:0.8rem;
  }

  [id="735QuickReference"] #help {
    font-size:0.8rem;
    max-width:260px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width: 480px) {
  [id="735QuickReference"] section {
    padding:12px 8px;
  }

  [id="735QuickReference"] h2 {
    font-size:1rem;
  }

  [id="735QuickReference"] #rootToggle > summary {
    padding:10px;
  }

  [id="735QuickReference"] #rootToggle .content {
    padding:0 10px 10px;
  }

  [id="735QuickReference"] .control {
    padding:12px;
    gap:10px;
  }

  [id="735QuickReference"] .lead {
    font-size:0.85rem;
  }

  [id="735QuickReference"] .tag {
    font-size:0.75rem;
    padding:2px 6px;
  }

  [id="735QuickReference"] details.block > summary {
    padding:8px 10px;
    font-size:0.9rem;
  }

  [id="735QuickReference"] details.block > div {
    padding:0 10px 10px;
  }

  [id="735QuickReference"] th,
  [id="735QuickReference"] td {
    padding:6px 4px;
    font-size:0.75rem;
  }

  [id="735QuickReference"] .cta {
    width:100%;
    max-width:280px;
    text-align:center;
    padding:14px 20px;
    margin-top:20px;
    box-sizing:border-box;
  }

  [id="735QuickReference"] .note {
    font-size:0.8rem;
  }

  [id="735QuickReference"] caption {
    font-size:0.85rem;
  }
}

@media (max-width: 360px) {
  [id="735QuickReference"] th,
  [id="735QuickReference"] td {
    padding:5px 3px;
    font-size:0.7rem;
  }

  [id="735QuickReference"] caption {
    font-size:0.8rem;
  }
}

/* 基準年の入力フィールド（1行固定） */
[id="735QuickReference"] .control input,
[id="735QuickReference"] .control textarea {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;

  /* 見た目 */
  background-color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  border: 1px solid #cbd5e1;
  border-radius: 10px;

  /* 高さを物理的に固定する */
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 12px !important;

  /* textareaの場合のデフォ動作つぶし */
  min-height: 42px !important;
  max-height: 42px !important;
  resize: none !important;
  overflow-y: hidden !important;
}