/* ============================================================
   kodomo-living.css
   こどもリビング読み物4本（ZSI-1629）専用
   ============================================================ */

/* --- §1 共通ベース（旧 contents-common.css）--- */
/* ============================================================
   読み物ページ共通CSS（contents-common.css）
   名古屋版からポーティング → 東京版として利用
   対象: こどもリビング記事（ZSI-1629）等
   ============================================================ */

/* --- CSS Custom Properties --- */
:root {
  --contents-max-width: 1024px;
  --contents-text: #333;
  --contents-bg: #fff;
  --contents-accent: #EE7949;
  --contents-border-radius: 8px;
}

/* ===== コンテナ ===== */
.contents-container {
  margin: 0 auto;
  max-width: var(--contents-max-width);
  padding: 16px;
  color: var(--contents-text);
  line-height: 1.8;
}

.contents-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== 記事タイトル（テキスト+CSS） ===== */
.contents-title {
  font-size: 2.6rem;
  font-weight: bold;
  text-align: center;
  padding: 20px 16px;
  margin-bottom: 16px;
  border-radius: var(--contents-border-radius);
  line-height: 1.4;
}

/* ===== 記事タイトル（画像版） ===== */
.contents-title-img {
  text-align: center;
  margin-bottom: 16px;
  border-radius: var(--contents-border-radius);
  overflow: hidden;
  background-color: #f5f5f5;
  min-height: 120px;
}

.contents-title-img img {
  width: 100%;
  height: auto;
}

/* SR-only（スクリーンリーダー用） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== 導入文 ===== */
.contents-intro {
  padding: 10px 0;
  margin-bottom: 24px;
  font-size: 1.6rem;
}

/* ===== プロフィールカード ===== */
.contents-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: var(--contents-border-radius);
  margin: 20px 0;
}

.contents-profile__img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  /* background-color: #ddd; */
}

.contents-profile__role {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.contents-profile__name {
  font-size: 2.0rem;
  font-weight: bold;
  display: inline-block;
  padding: 2px 12px;
  border-radius: 20px;
  margin-top: 4px;
}

/* ===== セクション ===== */
.contents-section {
  margin: 30px 0;
  padding: 20px 16px;
  border: 2px solid #ddd;
  border-radius: var(--contents-border-radius);
  position: relative;
}

.contents-section__title {
  font-size: 2.1rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.contents-section__subtitle {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 16px 0 8px;
  padding-left: 12px;
  border-left: 4px solid currentColor;
}

/* ===== Q&A ===== */
.contents-qa {
  margin: 16px 0;
}

.contents-qa dt {
  font-weight: bold;
  font-size: 2.0rem;
  margin-bottom: 4px;
}

.contents-qa dt .q-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  margin-right: 8px;
  flex-shrink: 0;
}

.contents-qa dd {
  margin: 4px 0 16px;
  padding-left: 36px;
  line-height: 1.8;
}

/* ===== アコーディオン ===== */
.contents-accordion {
  margin: 16px 0;
  border: 1px solid #e0e0e0;
  border-radius: var(--contents-border-radius);
  overflow: hidden;
}

.contents-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.contents-accordion__trigger:hover {
  background-color: #f5f5f5;
}

.contents-accordion__trigger .q-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  margin-right: 10px;
  flex-shrink: 0;
}

.contents-accordion__icon {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 8px;
}

.contents-accordion__icon::before,
.contents-accordion__icon::after {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  background-color: #666;
  position: relative;
}

.contents-accordion__icon::before {
  top: 9px;
}

.contents-accordion__icon::after {
  top: 7px;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.contents-accordion.is-open .contents-accordion__icon::after {
  transform: rotate(0deg);
}

.contents-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.contents-accordion.is-open .contents-accordion__body {
  max-height: 2000px;
}

.contents-accordion__content {
  padding: 16px;
  line-height: 1.8;
}

.contents-accordion__content .a-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
  margin-right: 8px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ===== ポイントカード ===== */
.contents-point {
  margin: 20px 0;
  padding: 20px 16px;
  border-radius: var(--contents-border-radius);
  position: relative;
}

.contents-point__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
  font-size: 0;
  /* hide text fallback */
  overflow: hidden;
  /* checkmark icon via inline SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
}

.contents-point__title {
  font-size: 2.0rem;
  font-weight: bold;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.contents-point__text {
  line-height: 1.8;
  margin-top: 8px;
}

/* ===== 横スクロール ===== */
.contents-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
  padding-bottom: 8px;
}

.contents-scroll-x::-webkit-scrollbar {
  height: 6px;
}

.contents-scroll-x::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.contents-scroll-x::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.contents-scroll-x__inner {
  min-width: 600px;
}

/* ===== タイムライン（24時間スケジュール） ===== */
.contents-timeline {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.6rem;
}

.contents-timeline th,
.contents-timeline td {
  padding: 6px 10px;
  border: 1px solid #e0e0e0;
  text-align: center;
  white-space: nowrap;
}

.contents-timeline td:nth-child(3) {
  white-space: normal;
  text-align: left;
  min-width: 200px;
}

.contents-timeline th {
  font-weight: bold;
  white-space: nowrap;
}

.contents-timeline .timeline-icon {
  display: inline-block;
  margin-right: 4px;
  font-size: 1.8rem;
}

/* ===== 吹き出し ===== */
.contents-balloon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0;
}

.contents-balloon--right {
  flex-direction: row-reverse;
}

.contents-balloon__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

.contents-balloon__body {
  position: relative;
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 85%;
  line-height: 1.7;
  font-size: 1.6rem;
}

.contents-balloon__body::before {
  content: '';
  position: absolute;
  top: 14px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.contents-balloon:not(.contents-balloon--right) .contents-balloon__body::before {
  left: -14px;
  border-right-color: inherit;
}

.contents-balloon--right .contents-balloon__body::before {
  right: -14px;
  border-left-color: inherit;
}

.contents-balloon__name {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 2px;
}

/* ===== メッセージ札（紙札風） ===== */
.contents-message {
  position: relative;
  background: #FFFDE7;
  border: 1px solid #F0E68C;
  border-radius: 4px;
  padding: 20px 20px 16px;
  margin: 20px 0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.08);
}

.contents-message::before {
  /* paperclip icon (ゼムクリップ) */
  content: '';
  position: absolute;
  top: -14px;
  left: 16px;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC6C6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(15deg);
}

.contents-message__label {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ::before アイコン 不要のため削除 */
.contents-message__text {
  line-height: 1.7;
  font-size: 1.6rem;
}

/* ===== 制度カード（名古屋市支援制度） ===== */
.contents-system-card {
  border: 2px solid #4FC3F7;
  border-radius: var(--contents-border-radius);
  padding: 16px;
  margin: 16px 0;
}

.contents-system-card__title {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contents-system-card__title .icon {
  font-size: 2.1rem;
}

.contents-system-card__text {
  font-size: 1.6rem;
  line-height: 1.7;
}

.contents-system-card__amount {
  font-size: 2.1rem;
  font-weight: bold;
  margin-top: 4px;
}

/* ===== CTAボタン ===== */
.contents-btn {
  display: block;
  width: 90%;
  max-width: 400px;
  margin: 20px auto;
  padding: 10px;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.contents-btn:hover {
  opacity: 0.85;
}

/* ===== 写真キャプション ===== */
.contents-figure {
  margin: 16px 0;
  text-align: center;
}

.contents-figure figcaption {
  font-size: 1.4rem;
  color: #777;
  margin-top: 6px;
}

/* ===== ラベル付きボックス ===== */
.contents-box {
  padding: 16px;
  margin: 16px 0;
  border-radius: var(--contents-border-radius);
}

.contents-box__label {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 20px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8px;
}

/* ===== 注釈 ===== */
.contents-note {
  font-size: 1.4rem;
  color: #888;
  margin-top: 16px;
  padding: 0 10px;
}

/* ===== チェックボックス風カード ===== */
.check-box {
  padding: 16px;
  margin: 16px 0;
  border-radius: 0;
  border: 2px solid #ccc;
  background-color: #fff;
  position: relative;
}

/* check-box icon removed */

/* ===== 座談会 吹き出し ===== */
.chat-bubble {
  position: relative;
  padding: 14px 16px 14px 16px;
  margin: 12px 0;
  border-radius: 12px;
  line-height: 1.7;
  font-size: 1.6rem;
}

.chat-speaker-name {
  font-weight: bold;
  font-size: 1.4rem;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-speaker-name::before {
  /* person/user icon */
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.chat-speaker-a {
  background-color: #E8F5E9;
  border-left: 4px solid #66BB6A;
}

.chat-speaker-a .chat-speaker-name {
  color: #2E7D32;
}

.chat-speaker-a .chat-speaker-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232E7D32'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.chat-speaker-b {
  background-color: #FFF3E0;
  border-left: 4px solid #FFA726;
}

.chat-speaker-b .chat-speaker-name {
  color: #E65100;
}

.chat-speaker-b .chat-speaker-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E65100'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.chat-speaker-c {
  background-color: #E3F2FD;
  border-left: 4px solid #42A5F5;
}

.chat-speaker-c .chat-speaker-name {
  color: #1565C0;
}

.chat-speaker-c .chat-speaker-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231565C0'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* ===== 制度バッジ ===== */
.system-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  background-color: #4FC3F7;
}

.system-badge::before {
  /* star icon for system badges */
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}


/* ============================================================
   レスポンシブ（PC: ≥768px）
   ============================================================ */
@media screen and (min-width: 768px) {
  .contents-container {
    padding: 32px;
  }

  .contents-title {
    font-size: 3.2rem;
    padding: 28px 24px;
  }

  .contents-intro {
    font-size: 2.0rem;
  }

  .contents-section__title {
    font-size: 2.4rem;
  }

  .contents-qa dt {
    font-size: 2.1rem;
  }

  .contents-qa dd,
  .contents-accordion__content,
  .contents-point__text,
  .contents-message__text,
  .contents-system-card__text {
    font-size: 1.8rem;
  }

  .contents-balloon__body {
    font-size: 1.8rem;
  }

  .contents-profile {
    padding: 20px 40px;
  }

  .contents-profile__img {
    width: 96px;
    height: 96px;
  }
}

/* SP: ≤400px 微調整 */
@media screen and (max-width: 400px) {
  .contents-profile {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .contents-balloon {
    gap: 8px;
  }

  .contents-balloon__avatar {
    width: 40px;
    height: 40px;
  }
}

/* --- §2 テーマカラー・記事別スタイル（旧 kodomo-living.css）--- */
/* ============================================================
   こどもリビング固有CSS（kodomo-living.css）
   記事ごとのテーマカラー + 固有レイアウト
   ============================================================ */

/* ============================================================
   1. テーマカラー定義
   ============================================================ */

/* --- フォールバック（:root） --- */
:root {
  --kl-primary: #4CAF50;
  --kl-primary-dark: #388E3C;
  --kl-primary-light: #E8F5E9;
  --kl-primary-bg: #F1F8E9;
  --kl-secondary: #64B5F6;
  --kl-secondary-dark: #1565C0;
  --kl-secondary-light: #E3F2FD;
  --kl-secondary-bg: #E8F0FA;
}

/* --- 記事1: 時短離乳食レシピ — サーモン×セージグリーン --- */
#babyfood-recipes {
  --kl-primary: #F8A794;
  --kl-primary-dark: #F37061;
  --kl-primary-light: #FDE7DF;
  --kl-primary-bg: #FEF3EF;
  --kl-secondary: #89B283;
  --kl-secondary-dark: #6B8E65;
  --kl-secondary-light: #D4E5CF;
  --kl-secondary-bg: #E5F0E1;
}

/* --- 記事2: ぐっすり睡眠 — ピンク×ラベンダーブルー --- */
#baby-sleep {
  --kl-primary: #F5A3C7;
  --kl-primary-dark: #F281B3;
  --kl-primary-light: #F0D8E9;
  --kl-primary-bg: #F7EBF3;
  --kl-secondary: #859BCF;
  --kl-secondary-dark: #4E88C7;
  --kl-secondary-light: #D0D9ED;
  --kl-secondary-bg: #E3E9F4;
}

/* --- 記事3: 夫婦座談会 — ティール×コーラル --- */
#parenting-talk {
  --kl-primary: #9BD1D2;
  --kl-primary-dark: #1FAEAE;
  --kl-primary-light: #DEEFF1;
  --kl-primary-bg: #EDF7F8;
  --kl-secondary: #F4846C;
  --kl-secondary-dark: #F4846C;
  --kl-secondary-light: #FDEAE2;
  --kl-secondary-bg: #FDEAE2;
  --kl-speaker-a: #1FAEAE;
  --kl-speaker-b: #F4846C;
}

/* --- 記事4: きょうだいの接し方 — グリーン（全体）+ 5セクション色 --- */
#siblings {
  --kl-primary: #8CC648;
  --kl-primary-dark: #6BA030;
  --kl-primary-light: #E8F5D8;
  --kl-primary-bg: #F0F8E8;
  --kl-secondary: #F05A7D;
  --kl-secondary-dark: #D04060;
  --kl-secondary-light: #FCDCE3;
  --kl-secondary-bg: #FEF0F2;
  --kl-section-eldest: #F05A7D;
  --kl-section-middle: #8CC648;
  --kl-section-younger: #30A4DC;
  --kl-section-youngest: #F68B33;
  --kl-section-only: #8C63AB;
}


/* ============================================================
   2. 共通ユーティリティ（全記事で利用）
   ============================================================ */

/* --- 注釈 --- */
.contents-note--right {
  text-align: right;
  margin-top: -10px;
  margin-bottom: 20px;
}

.contents-note--bottom {
  margin-top: 30px;
}

/* --- ポイントリスト (ul) --- */
.contents-point__list {
  list-style-type: disc;
  padding-left: 20px;
}

/* --- セクションタイトル（色バリエーション） --- */
.kl-section-title--primary {
  color: var(--kl-primary-dark);
  text-align: center;
  margin-top: 30px;
}

.kl-section-title--secondary {
  color: var(--kl-secondary-dark);
  text-align: center;
  margin-top: 50px;
}

.kl-section-title--tertiary {
  color: var(--kl-tertiary);
  text-align: center;
  font-size: 28px;
  margin-top: 50px;
}

.kl-section-title--mt50 {
  margin-top: 50px;
}

/* --- 小さい注釈 --- */
.kl-small-note {
  font-size: 14px !important;
  color: #666;
}

/* --- テキストマーカー（蛍光ペン風） --- */
.kl-marker--primary {
  background: linear-gradient(transparent 60%, var(--kl-primary-light) 60%);
}

.kl-marker--secondary {
  background: linear-gradient(transparent 60%, var(--kl-secondary-light) 60%);
}

/* --- margin-top ユーティリティ --- */
.kl-mt50 {
  margin-top: 50px;
}

.kl-mt30 {
  margin-top: 30px;
}

/* --- チェック柄背景（記事内ボックス用） --- */
.kl-plaid--warm {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgba(244, 162, 89, 0.18) 20px, transparent 20px),
    linear-gradient(rgba(244, 162, 89, 0.18) 20px, transparent 20px);
  background-position: 10px 10px;
  background-size: 40px 40px;
}

/* --- レシピラベルバッジ（初期/中期/後期等） --- */
#babyfood-recipes .contents-box__label {
  padding: 6px 16px;
  font-size: 2.0rem;
  border: 2px solid #333;
}

#babyfood-recipes .contents-box__label--primary {
  background-color: var(--kl-primary);
}

#babyfood-recipes .contents-box__label--secondary {
  background-color: var(--kl-secondary);
}

#babyfood-recipes .contents-box__label--tertiary {
  background-color: var(--kl-primary-dark);
}

.kl-label__sub {
  font-size: 1.6rem;
  margin-left: 8px;
  font-weight: normal;
}

/* --- CHECK!ボックス見出し（オレンジ背景・白文字・黒ボーダー） --- */
.kl-check-header {
  position: relative;
  top: -40px;
  margin-bottom: -56px;
  text-align: center;
}

.kl-check-heading {
  font-size: 2.0rem;
  font-weight: bold;
  background: var(--kl-primary-dark);
  color: #fff;
  border: 2px solid #333;
  border-radius: 30px;
  padding: 8px 24px;
  display: inline-block;
  position: relative;
}

.kl-check-label {
  position: absolute;
  top: -30px;
  left: -20px;
  font-weight: bold;
  color: var(--kl-primary-dark);
  font-size: 1.8rem;
  font-style: italic;
  transform: rotate(-6deg);
  white-space: nowrap;
}

/* --- レシピサブタイトル --- */
.kl-recipe-sub {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 4px;
  color: #333;
}

/* --- 参考ボックス --- */
.kl-ref-heading {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--kl-primary-dark);
}

.kl-ref-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.kl-ref-col {
  flex: 1;
  min-width: 250px;
}

.kl-ref-title {
  font-weight: bold;
  font-size: 1.6rem;
  color: var(--kl-primary-dark);
  margin-bottom: 8px;
}

/* --- h2内の食数表記（小さく） --- */
.kl-recipe-serving {
  font-size: 0.7em;
  font-weight: normal;
}

/* --- 材料名：参考リンク風（オレンジ＋参考サイズ） --- */
.kl-ing-name--ref {
  color: var(--kl-secondary-dark);
  font-size: 1.8rem;
}

.kl-ref-material {
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.kl-ref-subtitle {
  font-weight: bold;
  margin-bottom: 4px;
}

.kl-ref-steps {
  font-size: 1.6rem;
}

/* --- 材料リスト: ドットリーダーで量を右揃え --- */
.kl-ingredients-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 1列の材料リストは、2列レイアウトの1列分と同じ幅に */
.kl-ingredients-box>ul {
  max-width: calc(50% - 10px);
}

.kl-ingredients-box li {
  display: flex;
  align-items: baseline;
  line-height: 1.8;
}

.kl-ingredients-box li .kl-ing-name {
  white-space: nowrap;
  flex-shrink: 0;
}

.kl-ingredients-box li .kl-ing-dots {
  flex: 1;
  border-bottom: 2px dotted #999;
  margin: 0 6px;
  min-width: 16px;
  position: relative;
  bottom: 0.25em;
}

.kl-ingredients-box li .kl-ing-amount {
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* --- 材料2カラム --- */
.kl-ingredients-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.kl-ingredients-col {
  flex: 1;
  min-width: 140px;
}

/* --- 注釈マージン --- */
.kl-small-note--mt {
  margin-top: 10px;
}

/* --- 共通カスタムナンバリング（全記事で利用可能） --- */
.kl-steps {
  list-style: none;
  padding: 0;
  counter-reset: kl-step;
}

.kl-steps>li {
  counter-increment: kl-step;
  position: relative;
  padding-left: 0;
  margin-bottom: 12px;
  font-size: 1.6rem;
  line-height: 1.6;
}

.kl-steps>li::before {
  content: counter(kl-step) ".";
  font-size: 2.0rem;
  font-weight: bold;
  color: var(--kl-primary);
  margin-right: 6px;
}

#babyfood-recipes .kl-steps>li::before {
  color: var(--kl-primary-dark);
}

/* --- 工程写真（作り方ステップ内の小さい画像） --- */
.kl-step-text {
  flex: 1;
  min-width: 0;
}

.kl-step-img {
  display: block;
  max-width: 120px;
  flex-shrink: 0;
}

/* PC: テキストと工程写真を横並び */
.kl-steps>li:has(.kl-step-img) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

/* --- 見出し＋注釈の横並び --- */
.kl-subtitle-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.kl-subtitle-row .kl-small-note {
  flex-shrink: 0;
}

/* --- 手順2カラムグリッド（昆布だしCHECK等） --- */
.kl-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.kl-steps-grid__item {
  display: flex;
  flex-direction: column;
}

.kl-steps-grid__item .kl-steps {
  flex: 1;
}

.kl-steps-grid__item .kl-figure--episode {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .kl-steps-grid {
    grid-template-columns: 1fr;
  }

  /* SP: 工程写真を下に表示 */
  .kl-steps>li:has(.kl-step-img) {
    flex-wrap: wrap;
  }

  .kl-step-img {
    margin-top: 6px;
  }
}

@media screen and (max-width: 500px) {
  .kl-ingredients-grid {
    flex-direction: column;
    gap: 0;
  }

  .kl-ingredients-box>ul {
    max-width: 100%;
  }

  .kl-qa-grid {
    flex-direction: column;
  }
}


/* ============================================================
   2a. 図版ユーティリティ（全記事の figure/img 共通クラス）
   ============================================================ */

/* --- エピソード写真（大きめ、角丸8px） --- */
.kl-figure--episode {
  max-width: 300px;
  margin: 16px auto 0;
}

#baby-sleep .kl-figure--episode {
  max-width: 600px;
}

/* --- スケジュール表内写真（小さめ、角丸4px） --- */
.kl-figure--schedule {
  margin: 8px auto 0;
  max-width: 160px;
}

/* --- スケジュール表内並列写真 --- */
.kl-figure--schedule-pair {
  margin: 8px auto 0;
  max-width: 200px;
  display: flex;
  gap: 4px;
  justify-content: center;
}

/* --- 座談会内写真（キャプション付き） --- */
.kl-figure--chat {
  margin: 12px auto 0;
  max-width: 240px;
}

/* --- セクションイラスト（記事4: きょうだい等） --- */
.kl-figure--section-ill {
  text-align: center;
  margin: 0 auto 24px;
}

/* --- 制度セクション イラスト（記事4） --- */
.kl-figure--system-ill {
  text-align: center;
  margin: 24px auto 16px;
}

/* --- img: 幅100%・角丸8px --- */
.kl-figure__img--rounded {
  width: 100%;
  border-radius: 0;
}

/* --- img: 幅100%・角丸4px --- */
.kl-figure__img--small {
  width: 100%;
  border-radius: 4px;
}

/* --- 並列写真内の img は幅調整 --- */
.kl-figure--schedule-pair .kl-figure__img--small {
  width: calc(70% - 2px);
}

/* --- img: イラスト大（180px） --- */
/* .contents-container img (0,1,1) に勝つため詳細度を 0,2,0 に */
.contents-container .kl-figure__img--ill-lg {
  max-width: 180px;
}

/* --- img: イラスト小（100px） --- */
.contents-container .kl-figure__img--ill-sm {
  width: 100px;
}

/* --- figcaption --- */
.kl-figure__caption {
  margin-top: 4px;
  font-size: 1.4rem;
  text-align: left;
  color: #666;
}


/* ============================================================
   2b. プロフィール拡張（contents-common.css のオーバーライド）
   ============================================================ */

.contents-profile {
  background-color: #f7f9fd;
  border-radius: 12px;
  padding: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.contents-profile__role {
  text-align: center;
  font-weight: bold;
  font-size: 2.0rem;
  width: 100%;
  flex-shrink: 0;
  color: var(--kl-primary-dark);
}

.contents-profile__inner {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.contents-profile__img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.contents-profile__name {
  font-weight: bold;
  font-size: 2.1rem;
}

/* 名前バッジ（inline-block）の親divを中央寄せ */
.contents-profile>div {
  text-align: center;
  flex-basis: 100%;
}

.contents-profile__desc {
  font-size: 1.6rem;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

@media screen and (max-width: 768px) {
  .contents-profile__desc {
    text-align: left;
  }
}

/* --- プロフィール背景なし --- */
.contents-profile.contents-profile--no-bg {
  background-color: transparent !important;
}


/* ============================================================
   2c. チェックボックス風カード — 色バリエーション・タイトル
   ============================================================ */

.check-box__title {
  font-weight: bold;
  margin-bottom: 5px;
}

.check-box__title--primary {
  color: var(--kl-primary-dark);
}

.check-box__title--secondary {
  color: var(--kl-secondary-dark);
}

.check-box__title--tertiary {
  color: var(--kl-tertiary);
}


/* ============================================================
   3. 記事1: 時短離乳食レシピ
   ============================================================ */

#babyfood-recipes .contents-title {
  background-color: var(--kl-primary-light);
  color: var(--kl-primary-dark);
}

#babyfood-recipes .contents-profile {
  background-color: #fff;
  border: 2px solid var(--kl-primary-dark);
  margin-bottom: 90px;
}

#babyfood-recipes .contents-profile__name {
  background-color: var(--kl-primary-dark);
  color: #fff;
  border: 2px solid #333;
  display: inline-block;
  text-align: center;
  padding: 4px 20px;
  border-radius: 20px;
}

#babyfood-recipes .contents-profile__desc img {
  max-width: 180px;
}

/* --- 各レシピセクション共通 --- */
#babyfood-recipes .contents-section {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 60px 0;
}

/* --- セクション見出し: 左ボーダー + 白背景（ストライプなし） --- */
#babyfood-recipes .contents-section__subtitle {
  font-size: 2.0rem;
  border-left: 4px solid var(--kl-primary);
  color: var(--kl-primary-dark);
  background: none;
  padding: 8px 5px 8px 10px;
}

/* --- CHECK!ボックス内の「作り方」左線を除去 --- */
#babyfood-recipes .check-box .contents-section__subtitle {
  border-left: none;
  padding-left: 0;
}

#babyfood-recipes .contents-section__title {
  color: var(--kl-primary-dark);
}

/* --- 材料リスト: 黄色背景・枠線なし --- */
#babyfood-recipes .kl-ingredients-box {
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  background-color: #F7F8CE;
  border: none;
}

/* --- CHECK!ボックス・時短ポイント共通: オレンジ×黄色ギンガムチェック柄 --- */
#babyfood-recipes .check-box,
#babyfood-recipes .contents-message {
  background-color: #FDE7DF;
  background-image:
    linear-gradient(rgba(248, 167, 148, 0.15) 0%,
      rgba(248, 167, 148, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(246, 246, 190, 0.35) 50%,
      rgba(246, 246, 190, 0.35) 75%,
      transparent 75%,
      transparent 100%),
    linear-gradient(90deg,
      rgba(248, 167, 148, 0.15) 0%,
      rgba(248, 167, 148, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(246, 246, 190, 0.35) 50%,
      rgba(246, 246, 190, 0.35) 75%,
      transparent 75%,
      transparent 100%);
  background-size: 100px 100px;
}

#babyfood-recipes .check-box {
  border: 2px solid var(--kl-primary-dark);
  border-radius: 12px;
  padding: 16px;
  padding-top: 20px;
  margin: 70px 0 24px;
}

/* --- 参考セクション: チェック柄は不要 --- */
#babyfood-recipes .kl-ref-box {
  background-image: none;
  background-color: #FFF;
}

/* --- 時短ポイント固有（全レシピ共通デザイン） --- */
#babyfood-recipes .contents-message {
  border: 2px solid var(--kl-primary-dark);
  border-radius: 12px;
}

#babyfood-recipes .contents-message::before {
  display: none;
}

#babyfood-recipes .contents-message__label {
  color: var(--kl-primary-dark);
  font-weight: bold;
}

/* ---- 初期テーマ（オレンジ系）---- */
#babyfood-recipes .kl-theme--orange .contents-section__subtitle {
  border-left-color: var(--kl-primary-dark);
  color: var(--kl-primary-dark);
}

#babyfood-recipes .kl-theme--orange .contents-section__title {
  color: var(--kl-primary-dark);
}





#babyfood-recipes .contents-box__label--primary {
  background-color: var(--kl-primary-dark);
}

/* ---- 中期テーマ（グリーン系）---- */
#babyfood-recipes .kl-theme--green .contents-section__subtitle {
  border-left-color: #89B283;
  color: #6B8E65;
}

#babyfood-recipes .kl-theme--green .contents-section__title {
  color: #6B8E65;
}





#babyfood-recipes .contents-box__label--secondary {
  background-color: #89B283;
}

/* ---- 後期テーマ（ブラウン系）---- */
#babyfood-recipes .kl-theme--brown .contents-section__subtitle {
  border-left-color: #AF7763;
  color: #AF7763;
}

#babyfood-recipes .kl-theme--brown .contents-section__title {
  color: #AF7763;
}





#babyfood-recipes .contents-box__label--tertiary {
  background-color: #AF7763;
}

/* --- その他 article1 --- */
#babyfood-recipes .case-label {
  background-color: var(--kl-secondary-light);
  color: var(--kl-primary-dark);
  padding: 4px 16px;
  border-radius: 0;
}

#babyfood-recipes .q-mark,
#babyfood-recipes .a-mark {
  background-color: var(--kl-secondary) !important;
}

#babyfood-recipes .contents-accordion {
  border-color: var(--kl-primary-light);
}

#babyfood-recipes .contents-accordion__trigger {
  color: var(--kl-secondary-dark);
}

#babyfood-recipes .contents-timeline th {
  background-color: var(--kl-secondary-light);
  color: var(--kl-secondary-dark);
}

#babyfood-recipes .contents-point {
  background-color: var(--kl-primary-bg);
}

#babyfood-recipes .contents-point__number {
  background-color: var(--kl-primary-dark);
}

/* --- 昆布だし写真: 半分サイズ --- */
#babyfood-recipes .kl-steps-grid__item .kl-figure--episode {
  max-width: 150px;
}

/* --- レシピ完成写真: 大きく表示 --- */
#babyfood-recipes .contents-figure.kl-figure--episode {
  max-width: 480px;
}

/* --- 工程写真: 小さめ --- */
#babyfood-recipes .kl-step-img {
  max-width: 150px;
}


/* ============================================================
   4. 記事2: ぐっすり睡眠のヒント
   ============================================================ */

#baby-sleep .contents-title {
  background-color: var(--kl-primary-light);
  color: var(--kl-primary-dark);
}

#baby-sleep .contents-profile {
  background-color: var(--kl-primary-bg);
}

#baby-sleep .contents-profile__name {
  background: linear-gradient(180deg, #859BCF, #F0D8E9);
  color: #fff;
  display: inline-block;
  text-align: center;
  padding: 4px 20px;
  border-radius: 20px;
}

#baby-sleep .contents-profile__role {
  color: var(--kl-secondary-dark);
}

#baby-sleep .contents-section__title {
  color: #F281B3;
}

#baby-sleep .contents-section__subtitle {
  border-left-color: var(--kl-primary);
  color: var(--kl-primary-dark);
}

/* --- 育児編 h2 色 --- */
#baby-sleep .contents-section__title.kl-section-title--secondary {
  color: var(--kl-secondary-dark);
}

/* --- QAカラム背景 --- */
#baby-sleep .kl-qa-column {
  padding: 15px;
  border-radius: 12px;
}

#baby-sleep .kl-qa-grid--primary .kl-qa-column {
  background-color: var(--kl-primary-bg);
}

#baby-sleep .kl-qa-grid--secondary .kl-qa-column {
  background-color: var(--kl-secondary-bg);
}

/* --- chat-bubble 半透明白 --- */
#baby-sleep .chat-bubble {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

/* --- chat-bubble人型アイコン削除 --- */
#baby-sleep .chat-speaker-name::before {
  display: none;
}

/* --- Step見出しラベル（共通） --- */
.kl-step-label {
  font-size: 3.6rem;
  font-weight: bold;
  color: var(--kl-primary);
  margin-right: 8px;
}

/* --- article2: Step「STEP」文字を青に・小さめ --- */
#baby-sleep .kl-step-label {
  color: #4E88C7;
  font-size: 2.4rem;
}

/* --- article2: CHECK!ラベル（インライン配置） --- */
#baby-sleep .kl-check-label {
  position: static;
  display: inline-block;
  color: #7BAAD8;
  margin-right: 6px;
  font-size: 1.6rem;
  transform: rotate(-4deg);
}

/* --- Step数字丸背景（article2） --- */
#baby-sleep .kl-step-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #fff;
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1;
  margin-left: 4px;
  isolation: isolate;
}

#baby-sleep .kl-step-num::before {
  content: "";
  position: absolute;
  inset: -3px;
  background: linear-gradient(180deg, #859BCF, #F0D8E9);
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1;
}

/* --- グラデーション文字（睡眠等） --- */
.kl-gradient-badge {
  background: linear-gradient(180deg, #859BCF, #F0D8E9);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 4rem;
}

/* --- CHECK!ボックス背景色 --- */
#baby-sleep .contents-point {
  background-color: var(--kl-primary-bg);
  font-size: 1.8rem;
}

#baby-sleep .contents-point__number {
  background-color: var(--kl-primary-dark);
}

/* --- 睡眠Q&Aセクション: 上余白なし --- */
#baby-sleep .contents-section .kl-mt50 {
  margin-top: 0;
}

/* --- 記事2: セクション本文を1.8rem --- */
#baby-sleep .contents-section>p,
#baby-sleep .contents-point__text {
  font-size: 1.8rem;
}

/* --- 睡眠Q&Aタイトル: 1.5倍サイズ --- */
#baby-sleep .kl-section-title--primary.kl-mt50 {
  font-size: 3.15rem;
}

/* --- 「こんな時はどうする？」サブタイトル --- */
#baby-sleep .kl-qa-subtitle {
  font-size: 2.1rem;
  color: #4E88C7;
}

/* --- Q＆A の「＆」--- */
.kl-qa-amp {
  color: #7BAAD8;
}

/* --- check-box: 枠線削除 --- */
#baby-sleep .check-box {
  border: none;
  margin-top: 20px;
}

#baby-sleep .check-box p+p {
  margin-top: 8px;
}

#baby-sleep .check-box ul {
  margin-left: 16px;
}

/* --- article2: contents-section ふわっと青枠 --- */
#baby-sleep .contents-section {
  border: none;
  background: #fff;
  box-shadow: 0 0 15px 0 rgba(74, 111, 165, 0.8);
  padding: 30px;
  margin: 50px 0;
}

/* --- ルーティン化セクション: ふわっとグラデーション枠 --- */
#baby-sleep .kl-routine-section {
  border: none;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
}

#baby-sleep .kl-routine-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  z-index: -1;
}

#baby-sleep .kl-routine-section::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(180deg, #4E88C7, #F281B3);
  filter: blur(4px);
  z-index: -2;
}

#baby-sleep .kl-routine-section>.contents-section__title {
  color: #4E88C7;
}

#baby-sleep .kl-routine-section .check-box {
  border: none;
  padding: 0;
  margin-top: 16px;
}

/* --- 疑似チェックボックス（青・ピンク交互） --- */
#baby-sleep .kl-routine-section .check-box p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.6;
  font-size: 1.6rem;
}

#baby-sleep .kl-routine-section .check-box p::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 5px solid #4E88C7;
  border-radius: 5px;
  margin-top: 3px;
}

#baby-sleep .kl-routine-section .check-box:nth-child(even) p::before {
  border-color: #F281B3;
}

/* --- Q&Aマーク: 背景削除・青色 --- */
#baby-sleep .q-mark {
  background-color: transparent;
  color: #4E88C7;
  font-weight: bold;
  font-size: 3rem;
}

/* --- QA質問文: 青 --- */
#baby-sleep .kl-qa-question {
  color: #4E88C7;
}

/* --- QA見出し: デフォルト色に戻す --- */
#baby-sleep .contents-section__title.kl-section-title--primary {
  color: var(--kl-primary-dark);
  line-height: 1.4em;
  margin-bottom: 20px;
}

/* --- ピンク色ユーティリティ --- */
.kl-pink {
  color: #F281B3;
}

/* --- 青色ユーティリティ --- */
.kl-blue {
  color: #4E88C7;
}

/* --- 睦眠Q＆A見出しのQ・Aを大きく --- */
#baby-sleep .kl-section-title--primary .kl-blue,
#baby-sleep .kl-section-title--primary .kl-pink {
  font-size: 5.4rem;
  font-weight: bold;
}

/* --- article2: check-boxタイトルを青・大きめ --- */
#baby-sleep .check-box__title--primary {
  color: #4E88C7;
  font-size: 2.0rem;
}

#baby-sleep .kl-sleep-accent {
  color: #4E88C7;
  font-weight: bold;
}

/* --- Q&A回答段落マージン --- */
#baby-sleep .kl-qa-column p+p {
  margin-top: 8px;
  font-size: 1.8rem;
}

/* --- QA回答・Aマーク: ピンク --- */
#baby-sleep .kl-qa-answer {
  color: #F281B3;
}

#baby-sleep .kl-qa-answer__mark {
  color: #F281B3;
  font-size: 3rem;
}

/* --- ストライプ区切り線 --- */
.kl-stripe {
  height: 24px;
  width: 100%;
}

.kl-stripe--green {
  background: repeating-linear-gradient(112deg,
      var(--kl-primary-light) 0px,
      var(--kl-primary-light) 20px,
      var(--kl-primary-bg) 20px,
      var(--kl-primary-bg) 40px);
}

.kl-stripe--blue {
  background: repeating-linear-gradient(112deg,
      var(--kl-secondary-light) 0px,
      var(--kl-secondary-light) 20px,
      var(--kl-secondary-bg) 20px,
      var(--kl-secondary-bg) 40px);
}

/* --- 座談会プロフィール --- */
.kl-profile-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.kl-profile-card {
  flex: 1;
  min-width: 250px;
  text-align: center;
}

.kl-profile-card__img {
  width: 80px;
  height: auto;
  margin-bottom: 8px;
}

/* --- 話者ラベル --- */
.kl-speaker-label {
  font-weight: bold;
}

.kl-speaker-label--primary {
  color: var(--kl-primary-dark);
}

.kl-speaker-label--secondary {
  color: var(--kl-secondary-dark);
}

.kl-speaker-label--accent {
  color: var(--kl-speaker-b);
}

/* --- Q&Aレイアウト（2カラム） --- */
.kl-qa-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 40px;
}

.kl-qa-column {
  flex: 1;
  min-width: 300px;
}

/* --- Q&A質問 --- */
.kl-qa-question {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.kl-qa-question .q-mark {
  margin-right: 8px;
}

.kl-qa-question--secondary {
  color: var(--kl-secondary-dark);
}

/* --- Q&A回答 --- */
.kl-qa-answer {
  font-weight: bold;
  margin-bottom: 20px;
}

.kl-qa-answer--primary {
  color: var(--kl-primary-dark);
}

.kl-qa-answer__mark {
  font-size: 20px;
  font-weight: bold;
  margin-right: 8px;
}

/* --- 顔アイコン（Q/A） --- */
.kl-face-icon {
  display: inline-block !important;
  width: 36px !important;
  height: auto !important;
  vertical-align: middle;
  margin-right: 8px !important;
}

/* --- 話者別吹き出しカラー --- */
#baby-sleep .speaker-a .contents-balloon__avatar {
  background-color: var(--kl-primary);
}

#baby-sleep .speaker-a .contents-balloon__body {
  background-color: var(--kl-primary-light);
  border-color: var(--kl-primary-light);
}

#baby-sleep .speaker-a .contents-balloon__body::before {
  border-right-color: var(--kl-primary-light);
}

#baby-sleep .speaker-b .contents-balloon__avatar {
  background-color: var(--kl-speaker-b);
}

#baby-sleep .speaker-b .contents-balloon__body {
  background-color: #FFF0E0;
  border-color: #FFF0E0;
}

#baby-sleep .speaker-b .contents-balloon__body::before {
  border-right-color: #FFF0E0;
}

#baby-sleep .speaker-c .contents-balloon__avatar {
  background-color: var(--kl-secondary);
}

#baby-sleep .speaker-c .contents-balloon__body {
  background-color: var(--kl-secondary-light);
  border-color: var(--kl-secondary-light);
}

#baby-sleep .speaker-c .contents-balloon__body::before {
  border-right-color: var(--kl-secondary-light);
}

/* --- chat-bubble色オーバーライド --- */
#baby-sleep .chat-speaker-a {
  background-color: var(--kl-primary-light);
  border-left-color: var(--kl-primary-dark);
}

#baby-sleep .chat-speaker-a .chat-speaker-name {
  color: var(--kl-primary-dark);
}

#baby-sleep .chat-speaker-a .chat-speaker-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A9F6A'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

#baby-sleep .chat-speaker-b {
  background-color: var(--kl-primary-light);
  border-left-color: var(--kl-primary-dark);
}

#baby-sleep .chat-speaker-b .chat-speaker-name {
  color: var(--kl-primary-dark);
}

#baby-sleep .chat-speaker-b .chat-speaker-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234A9F6A'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

#baby-sleep .chat-speaker-c {
  background-color: var(--kl-secondary-bg);
  border-left-color: var(--kl-secondary-dark);
}

#baby-sleep .chat-speaker-c .chat-speaker-name {
  color: var(--kl-secondary-dark);
}

#baby-sleep .chat-speaker-c .chat-speaker-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236C8BC6'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

/* --- わが家ではこうしてました！セクション --- */
.kl-wagaya-section {
  padding: 30px;
  border-radius: 8px;
}

.kl-wagaya-title {
  color: var(--kl-primary-dark);
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.kl-wagaya-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.kl-wagaya-card {
  flex: 1;
  min-width: 250px;
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
}

.check-box.kl-wagaya-card--primary,
.kl-wagaya-card--primary {
  border: 2px solid var(--kl-primary-dark);
}

.check-box.kl-wagaya-card--secondary,
.kl-wagaya-card--secondary {
  border: 2px solid var(--kl-secondary-dark);
}

.kl-wagaya-card__title {
  font-weight: bold;
  margin-bottom: 10px;
}

.kl-wagaya-card__title--primary {
  color: var(--kl-primary-dark);
}

.kl-wagaya-card__title--secondary {
  color: var(--kl-secondary-dark);
}


/* ============================================================
   5. 記事3: 夫婦で話し合っておきたいこと
   ============================================================ */

#parenting-talk .contents-title {
  background-color: var(--kl-primary-light);
  color: var(--kl-primary-dark);
}

#parenting-talk .contents-profile {
  background-color: var(--kl-primary-light);
}

#parenting-talk .contents-profile__role {
  color: var(--kl-primary-dark);
}

#parenting-talk .contents-profile__name {
  background-color: var(--kl-primary);
  color: #fff;
  display: inline-block;
  text-align: center;
  padding: 4px 20px;
  border-radius: 20px;
}

/* --- 会話グリッド → 縦積みチャット風（talk-bubble含むグリッドのみ） --- */
#parenting-talk .kl-qa-grid:has(.kl-talk-bubble) {
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

#parenting-talk .kl-qa-grid:has(.kl-talk-bubble) .kl-qa-column {
  min-width: 100%;
}

/* --- 吹き出し共通 — チャット風横配置 --- */
#parenting-talk .kl-talk-bubble {
  position: relative;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 0;
  border-radius: 0;
  line-height: 1.7;
  font-size: 1.6rem;
  background-color: transparent;
  border-left: none;
}

/* 大隅さん = 緑系（アイコン左） */
#parenting-talk .kl-talk-bubble--a {
  flex-direction: row;
}

@media screen and (max-width: 768px) {

  #parenting-talk .kl-talk-bubble--a,
  #parenting-talk .kl-talk-bubble--b {
    align-items: center;
  }
}

#parenting-talk .kl-talk-bubble--a .kl-talk-speaker {
  color: var(--kl-primary-dark);
}

/* 伊藤さん = オレンジ系（アイコン右） */
#parenting-talk .kl-talk-bubble--b {
  flex-direction: row-reverse;
}

#parenting-talk .kl-talk-bubble--b .kl-talk-speaker {
  color: var(--kl-secondary-dark);
}

/* --- 話者ラベル — 縦配置（アイコン上・名前下） --- */
#parenting-talk .kl-talk-speaker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  min-width: 80px;
  max-width: 80px;
  gap: 4px;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.3;
}

/* --- 話者アイコン（丸・大きめ・色付き枠線） --- */
#parenting-talk .kl-talk-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0;
}

/* ============================================================
   括弧型コネクター（縦線 ＋ アイコン方向シェブロン）
   ============================================================ */

/* --- 縦線（::before） --- */
#parenting-talk .kl-talk-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
}

/* 大隅さん: 縦線はアイコン右側（テキスト手前） */
#parenting-talk .kl-talk-bubble--a::before {
  left: 100px;
  border-left: 2px solid var(--kl-primary);
}

/* 伊藤さん: 縦線はアイコン左側（テキスト手前） */
#parenting-talk .kl-talk-bubble--b::before {
  right: 100px;
  border-right: 2px solid var(--kl-secondary);
}

/* --- シェブロン（::after） — ＜＞矢印 --- */
#parenting-talk .kl-talk-bubble::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

/* 大隅さん: ＜ 左向きシェブロン */
#parenting-talk .kl-talk-bubble--a::after {
  left: 93px;
  border-bottom: 2px solid var(--kl-primary);
  border-left: 2px solid var(--kl-primary);
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* 伊藤さん: ＞ 右向きシェブロン */
#parenting-talk .kl-talk-bubble--b::after {
  right: 93px;
  border-top: 2px solid var(--kl-secondary);
  border-right: 2px solid var(--kl-secondary);
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* --- 吹き出し位置反転（色はそのまま） --- */
#parenting-talk .kl-talk-reversed .kl-talk-bubble--a {
  flex-direction: row-reverse;
}

#parenting-talk .kl-talk-reversed .kl-talk-bubble--b {
  flex-direction: row;
}

#parenting-talk .kl-talk-reversed .kl-talk-bubble--a::before {
  left: auto;
  right: 100px;
  border-left: none;
  border-right: 2px solid var(--kl-primary);
}

#parenting-talk .kl-talk-reversed .kl-talk-bubble--b::before {
  right: auto;
  left: 100px;
  border-right: none;
  border-left: 2px solid var(--kl-secondary);
}

#parenting-talk .kl-talk-reversed .kl-talk-bubble--a::after {
  left: auto;
  right: 93px;
  border-bottom: none;
  border-left: none;
  border-top: 2px solid var(--kl-primary);
  border-right: 2px solid var(--kl-primary);
}

#parenting-talk .kl-talk-reversed .kl-talk-bubble--b::after {
  right: auto;
  left: 93px;
  border-top: none;
  border-right: none;
  border-bottom: 2px solid var(--kl-secondary);
  border-left: 2px solid var(--kl-secondary);
}

/* --- Q&A色バリエーション --- */
#parenting-talk .q-mark--primary {
  background-color: var(--kl-primary-dark);
}

#parenting-talk .q-mark--secondary {
  background-color: var(--kl-secondary-dark);
}

#parenting-talk .a-mark--primary {
  background-color: var(--kl-primary-dark);
}

#parenting-talk .a-mark--secondary {
  background-color: var(--kl-secondary-dark);
}

/* --- Q&A回答行 --- */

/* --- contents-section: 枠線・パディングなし --- */
#parenting-talk .contents-section {
  border: none;
  padding: 0;
  margin: 50px 0;
}

/* --- セクション見出し: 上下1px線 --- */
#parenting-talk .contents-section__title {
  border-top: 1px solid var(--kl-primary-dark);
  border-bottom: 1px solid var(--kl-primary-dark);
  background: var(--kl-primary-bg);
  padding: 10px 0;
  color: var(--kl-primary-dark);
  font-size: 1.8rem;
}

/* --- h2 強調テキスト --- */
#parenting-talk .kl-em {
  font-size: 2.4rem;
}

/* --- h2 オレンジ系バリエーション --- */
#parenting-talk .kl-section-title--orange {
  border-color: var(--kl-secondary-dark);
  color: var(--kl-secondary-dark);
  background: var(--kl-secondary-light);
}

/* --- h2 背景なしバリエーション --- */
#parenting-talk .kl-section-title--no-bg {
  background: none;
}

/* --- h2 背景なし＋オレンジ --- */
#parenting-talk .kl-section-title--no-bg.kl-section-title--orange {
  background: none;
  border-color: var(--kl-secondary-dark);
  color: var(--kl-secondary-dark);
}

/* --- チェックボックス（サイドバー） --- */
#parenting-talk .check-box {
  border-radius: 0;
  padding: 16px;
  margin: 24px 0;
  overflow: hidden;
  font-size: 1.6rem;
}

/* --- サイドバー内の画像float --- */
#parenting-talk .check-box .kl-figure--chat {
  float: right;
  margin: 0 0 8px 12px;
  max-width: 160px;
}

/* --- 屋根型カード（家モチーフ） --- */
.kl-house-card {
  position: relative;
  padding: 40px 20px 20px;
  margin-top: 20px;
}

.kl-house-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(50% 0, 100% 35px, 100% 100%, 0 100%, 0 35px);
}

.kl-house-card--primary::before {
  background-color: var(--kl-primary-light);
}

.kl-house-card--secondary::before {
  background-color: var(--kl-secondary-light);
}

.kl-house-card__title {
  font-weight: bold;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.kl-house-card__title--primary {
  color: var(--kl-primary-dark);
}

.kl-house-card__title--secondary {
  color: var(--kl-secondary-dark);
}

/* --- わが家カード: 項目見出し --- */
.kl-house-card .kl-mb12,
.kl-house-card .kl-mt12 {
  font-size: 1.8rem;
  font-weight: bold;
}

.kl-house-card--primary .kl-mb12,
.kl-house-card--primary .kl-mt12 {
  color: var(--kl-primary-dark);
}

.kl-house-card--secondary .kl-mb12,
.kl-house-card--secondary .kl-mt12 {
  color: var(--kl-secondary-dark);
}

/* --- メッセージカード色分け --- */
#parenting-talk .contents-message::before {
  display: none;
}

#parenting-talk .contents-message--primary {
  border-color: var(--kl-primary);
  background-color: #fff;
}

#parenting-talk .contents-message--primary .contents-message__label {
  color: var(--kl-primary-dark);
}

#parenting-talk .contents-message--secondary {
  border-color: var(--kl-secondary);
  background-color: #fff;
}

#parenting-talk .contents-message--secondary .contents-message__label {
  color: var(--kl-secondary-dark);
}

/* --- 座談会プロフィール見出し（中央揃え・太字・2色） --- */
#parenting-talk .kl-talk-profiles-heading {
  text-align: center;
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.5;
  margin-top: 30px;
  margin-bottom: 0;
}

#parenting-talk .kl-talk-profiles-heading__green {
  color: var(--kl-primary-dark);
}

#parenting-talk .kl-talk-profiles-heading__orange {
  color: var(--kl-secondary-dark);
}

/* --- 座談会プロフィール2カラムレイアウト --- */
#parenting-talk .kl-talk-profiles {
  display: flex;
  gap: 24px;
  margin-top: 10px;
}

#parenting-talk .kl-talk-profiles__family {
  flex: 1;
  min-width: 0;
}

/* ファミリー紹介写真: 楕円切り抜きを解除 */
#parenting-talk .kl-talk-profiles__family .contents-profile__img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: initial;
}

/* 家族カード内プロフィール — 屋根型（kl-house-card風） */
#parenting-talk .kl-talk-profiles__family .contents-profile {
  position: relative;
  margin-top: 10px;
  margin-bottom: 0;
  padding-top: 40px;
  border-radius: 0;
  background-color: transparent;
}

#parenting-talk .kl-talk-profiles__family .contents-profile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 35px, 100% 100%, 0 100%, 0 35px);
}

/* 大隅さん（グリーン系） */
#parenting-talk .kl-talk-profiles__family--green .contents-profile::before {
  background-color: var(--kl-primary-light);
}

#parenting-talk .kl-talk-profiles__family--green .contents-profile__name {
  background-color: var(--kl-primary-dark);
}

/* 伊藤さん（オレンジ系） */
#parenting-talk .kl-talk-profiles__family--orange .contents-profile::before {
  background-color: var(--kl-secondary-light);
}

#parenting-talk .kl-talk-profiles__family--orange .contents-profile__name {
  background-color: var(--kl-secondary);
}

/* SP: 縦並び */
@media screen and (max-width: 767px) {
  #parenting-talk .kl-talk-profiles {
    flex-direction: column;
  }
}

/* --- 「わが家」カラムヘッダー --- */
#parenting-talk .kl-qa-column__header {
  font-weight: bold;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

/* --- ユーティリティ --- */
.kl-qa-grid--continued {
  margin-top: 0;
}

.kl-mb12 {
  margin-bottom: 12px;
}

.kl-mt12 {
  margin-top: 12px;
}


/* ============================================================
   6. 記事4: きょうだいそれぞれの接し方
   ============================================================ */

#siblings .contents-title {
  background-color: var(--kl-primary-light);
  color: var(--kl-primary-dark);
}

#siblings .contents-profile {
  background-color: #E8F5D8;
}

#siblings .contents-profile__role {
  color: #6BA030;
}

#siblings .contents-profile__name {
  background-color: #8CC648;
  color: #fff;
  display: inline-block;
  text-align: center;
  padding: 4px 20px;
  border-radius: 20px;
}

#siblings .contents-point {
  background-color: var(--kl-primary-bg);
}

#siblings .contents-point__number {
  background-color: var(--kl-primary-dark);
}

#siblings .contents-section__title {
  font-size: 3.6rem;
  text-align: left;
}

#siblings .contents-section__subtitle {
  margin-top: 20px;
}

/* --- Point数字アクセント --- */
.point-number {
  color: #F26640;
  font-size: 1.5em;
}

/* --- キーワードハイライト --- */
.kl-highlight {
  background: none;
  font-weight: bold;
}

.kl-highlight--primary {
  color: var(--kl-primary-dark);
}

.kl-highlight--secondary {
  color: var(--kl-secondary-dark);
}

h2 .kl-highlight,
h3 .kl-highlight {
  color: #F26640;
}

/* --- ワンポイント再デザイン --- */
#siblings .point-box__onepoint {
  background-color: transparent;
  border-left: none;
  border: 2px solid #F26640;
  padding: 15px;
  margin-top: 25px;
  position: relative;
}

#siblings .point-box__onepoint strong {
  color: #F26640;
  font-weight: bold;
  position: relative;
  display: inline-block;
  padding: 0 28px;
  position: absolute;
  top: -17px;
  background: #fff;
}

#siblings .point-box__onepoint strong::before,
#siblings .point-box__onepoint strong::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L9 9 1 12l8 3 3 8 3-8 8-3-8-3z' fill='%23F2C840' opacity='0.9'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

#siblings .point-box__onepoint strong::before {
  left: 0;
}

#siblings .point-box__onepoint strong::after {
  right: 0;
}

/* --- contents-message --- */
#siblings .contents-message::before {
  display: none;
}

#siblings .contents-message__label {
  font-weight: bold;
  font-size: 1.8rem;
}

/* --- 記事4: セクション別ハイライト --- */
#siblings .contents-section:nth-of-type(1) .kl-highlight {
  color: #E85D75;
}

#siblings .contents-section:nth-of-type(2) .kl-highlight {
  color: #4A9F4A;
}

#siblings .contents-section:nth-of-type(3) .kl-highlight {
  color: #3A7BC8;
}

#siblings .contents-section:nth-of-type(4) .kl-highlight {
  color: #D98B10;
}

#siblings .contents-section:nth-of-type(5) .kl-highlight {
  color: #8E44AD;
}

/* --- h2タイトル補足テキスト --- */
#siblings .kl-title-suffix {
  color: #333;
  font-size: 1.8rem;
  flex-shrink: 0;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  #siblings .kl-title-suffix {
    font-size: 1.6rem;
  }
}

/* --- 接し方のヒント（h3） --- */
#siblings .kl-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 20px 0 16px;
  font-size: 1.8rem;
}

#siblings .kl-hint__label {
  display: inline-block;
  padding: 6px 16px;
  border: 2px solid currentColor;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.5rem;
}

#siblings .kl-hint__text {
  font-weight: bold;
}

/* --- きょうだいセクション別カラー --- */
/* 長子: ピンク */
#siblings .kl-section-title--eldest {
  color: #E85D75;
}

#siblings .contents-section:nth-of-type(1) {
  border-color: #E85D75;
}

#siblings .contents-section:nth-of-type(1) .contents-section__subtitle {
  color: #E85D75;
  border-left-color: #E85D75;
}

#siblings .contents-section:nth-of-type(1) .kl-hint {
  color: #E85D75;
}

#siblings .contents-section:nth-of-type(1) .kl-hint__label {
  background: linear-gradient(to bottom, #fff, #FFF0F3);
}

#siblings .contents-section:nth-of-type(1) .check-box {
  border-color: #E85D75;
  background-color: #FFF8F9;
}

/* 中間子: グリーン */
#siblings .kl-section-title--middle {
  color: #5CB85C;
}

#siblings .contents-section:nth-of-type(2) {
  border-color: #5CB85C;
}

#siblings .contents-section:nth-of-type(2) .contents-section__subtitle {
  color: #4A9F4A;
  border-left-color: #5CB85C;
}

#siblings .contents-section:nth-of-type(2) .kl-hint {
  color: #4A9F4A;
}

#siblings .contents-section:nth-of-type(2) .kl-hint__label {
  background: linear-gradient(to bottom, #fff, #F0FAF0);
}

#siblings .contents-section:nth-of-type(2) .check-box {
  border-color: #5CB85C;
  background-color: #F5FBF5;
}

/* 2人きょうだいの下の子: ブルー */
#siblings .kl-section-title--younger {
  color: #4A90D9;
}

#siblings .contents-section:nth-of-type(3) {
  border-color: #4A90D9;
}

#siblings .contents-section:nth-of-type(3) .contents-section__subtitle {
  color: #3A7BC8;
  border-left-color: #4A90D9;
}

#siblings .contents-section:nth-of-type(3) .kl-hint {
  color: #3A7BC8;
}

#siblings .contents-section:nth-of-type(3) .kl-hint__label {
  background: linear-gradient(to bottom, #fff, #EBF4FC);
}

#siblings .contents-section:nth-of-type(3) .check-box {
  border-color: #4A90D9;
  background-color: #F0F7FE;
}

/* 末っ子: オレンジ */
#siblings .kl-section-title--youngest {
  color: #F5A623;
}

#siblings .contents-section:nth-of-type(4) {
  border-color: #F5A623;
}

#siblings .contents-section:nth-of-type(4) .contents-section__subtitle {
  color: #D98B10;
  border-left-color: #F5A623;
}

#siblings .contents-section:nth-of-type(4) .kl-hint {
  color: #D98B10;
}

#siblings .contents-section:nth-of-type(4) .kl-hint__label {
  background: linear-gradient(to bottom, #fff, #FFF8EB);
}

#siblings .contents-section:nth-of-type(4) .check-box {
  border-color: #F5A623;
  background-color: #FFFBF2;
}

/* 一人っ子: パープル */
#siblings .kl-section-title--only {
  color: #9B59B6;
  display: flex;
  align-items: center;
}

#siblings .kl-section-title--only img {
  flex-shrink: 1;
  min-width: 0;
}


#siblings .contents-section:nth-of-type(5) {
  border-color: #9B59B6;
}

#siblings .contents-section:nth-of-type(5) .contents-section__subtitle {
  color: #8E44AD;
  border-left-color: #9B59B6;
}

#siblings .contents-section:nth-of-type(5) .kl-hint {
  color: #8E44AD;
}

#siblings .contents-section:nth-of-type(5) .kl-hint__label {
  background: linear-gradient(to bottom, #fff, #F5EEF8);
}

#siblings .contents-section:nth-of-type(5) .check-box {
  border-color: #9B59B6;
  background-color: #FAF5FC;
}

/* --- 制度カード --- */
#siblings .kl-system-card {
  border-radius: 0;
  border: none;
}

#siblings .kl-system-card h4 {
  color: #F26640;
}

/* --- system-badge --- */
#siblings .system-badge {
  background-color: var(--kl-primary);
  color: var(--kl-secondary-dark);
  width: 80px;
  justify-content: center;
  font-size: 1.8rem;
}

#siblings .system-badge::before {
  display: none;
}

/* --- 2カラム → 1カラム レイアウト --- */
.kl-flex-wrap {
  margin-top: 50px;
}

.kl-flex-main {
  margin-bottom: 40px;
}

.kl-side-box {
  background-color: transparent;
  padding: 20px;
  border-radius: 8px;
}

.kl-side-box__title {
  color: var(--kl-secondary-dark);
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 2.1rem;
}

.kl-side-box__item {
  padding: 15px;
  margin-bottom: 15px;
}

.kl-side-box__item--yellow {
  background-color: #FFFBE8;
  border-left: 4px solid var(--kl-primary);
}

.kl-side-box__item--green {
  background-color: #E8F5E9;
  border-left: 4px solid var(--kl-secondary);
}

.kl-side-box__text {
  font-size: 1.6rem;
}

/* --- ポイントボックス --- */
.point-box {
  background-color: #fff;
  margin-bottom: 50px;
}

.point-box h3 {
  color: var(--kl-secondary-dark);
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 15px;
  border-bottom: 3px solid var(--kl-secondary);
  padding-bottom: 5px;
  display: inline-block;
}

.point-box p {
  font-size: 1.8rem;
}

.point-box__onepoint {
  background-color: var(--kl-primary-bg);
  padding: 15px;
  margin-top: 15px;
  border-left: 4px solid var(--kl-primary);
}

.point-box__onepoint strong {
  color: var(--kl-primary-dark);
  font-size: 2.0rem;
}

/* --- 制度カードラッパー --- */
.kl-system-wrap {
  background-color: var(--kl-secondary-bg);
  padding: 50px 30px;
  margin: 20px 0;
  border-radius: 8px;
  overflow: visible;
}

.kl-system-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kl-system-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.kl-system-card h4 {
  color: var(--kl-secondary-dark);
  font-size: 2.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.kl-system-note {
  font-size: 1.4rem;
  color: #666;
  margin-top: 20px;
  text-align: right;
}

/* --- イラスト横並びペア --- */
.kl-system-ill-pair {
  display: flex;
  justify-content: space-between;
}

.kl-system-ill-pair .kl-figure--system-ill {
  margin: 0;
}

/* 冒頭ペア: 上にはみ出す */
.kl-system-ill-pair:first-child {
  margin: -84px -40px -10px;
}

/* 末尾ペア: 下にはみ出す */
.kl-system-ill-pair:last-child {
  margin: -5px -36px -64px;
}

/* 赤ちゃんイラスト個別調整 */
.contents-container .kl-figure__img--ill-baby {
  width: 80px;
  padding: 15px 0 0;
}


/* ============================================================
   7. レスポンシブ
   ============================================================ */

@media screen and (min-width: 768px) {
  .contents-title {
    font-size: 3.2rem;
  }
}

@media screen and (max-width: 480px) {
  #parenting-talk .check-box--has-toy {
    padding-right: 16px;
    padding-bottom: 45px;
  }

  #parenting-talk .check-box__toy {
    width: 48px;
    right: 8px;
    bottom: -6px;
  }
}

/* 離乳食セクション(L1158)の500px MQより後に定義された .kl-qa-column(L1951)に負けないよう再掲 */
@media screen and (max-width: 500px) {
  .kl-qa-column {
    min-width: unset;
  }
}

/* --- article4 h2画像 --- */
#siblings .contents-section__title img {
  display: block;
  max-height: 48px;
  width: auto;
  height: auto;
  margin: 0;
}