/* ============================================================
   お悩み別ナビ  CSS  v4   2026-06-25
   変更（v3→v4）：
     ・説明文をさらに拡大（本文級に：約21px）
     ・見出しブロックの上下余白を均等化＋見出しとカードの間に余白を追加
   ----------------------------------------------------------
   （v3の変更）
     ・見出し/カテゴリ名/説明文を拡大（H1・リード文級に）
     ・リンクの下線を削除（ホバー時のピンクのハイライトは維持）
     ・ルートページ用のタイル表示（中央アイコン・4列）に対応
   対象：<div id="frt-childCat"> 内に nayamicat_logic_v3.js が描画
   配色は :root トークン（frt_itemDesc 同梱）を使用。直書きしない。
   ============================================================ */

.frt-childCat {
  margin: var(--fr-space-xl) 0;   /* v4:上下を均等に */
}

/* ブロック見出し（例：子供のケアを、もっと絞り込んで探す） */
.frt-childCat__title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--fr-color-main);
  text-align: center;
  margin: 0 0 var(--fr-space-lg);   /* v4:見出しとカードの間に余白 */
  letter-spacing: .02em;
  line-height: 1.4;
}
/* 見出し下の補足文（ルートのみ：今の気持ちに合う…） */
.frt-childCat__sub {
  font-size: 1rem;
  color: var(--fr-color-sub);
  text-align: center;
  margin: 0 0 var(--fr-space-md);
  line-height: 1.7;
}

/* カード並び：スマホ1列 → タブレット2列 → PC3列 */
.frt-childCat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fr-space-sm);
}
@media (min-width: 600px) {
  .frt-childCat__list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .frt-childCat__list { grid-template-columns: 1fr 1fr 1fr; }
}

.frt-childCat__item { margin: 0; }

/* カード本体（リンク全体がクリック領域） */
.frt-childCat__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: var(--fr-color-white);
  border: 1px solid var(--fr-color-border);
  border-radius: var(--fr-radius);
  padding: var(--fr-space-md);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
/* ▼下線を削除（テーマ側の a 下線を確実に打ち消す） */
.frt-childCat a.frt-childCat__link,
.frt-childCat a.frt-childCat__link:hover,
.frt-childCat a.frt-childCat__link:focus,
.frt-childCat .frt-childCat__name {
  text-decoration: none !important;
}
/* ▼ホバー：ピンクのハイライト（これは維持） */
.frt-childCat__link:hover,
.frt-childCat__link:focus-visible {
  border-color: var(--fr-color-main);
  background: var(--fr-color-main-light);
  box-shadow: 0 2px 8px rgba(184, 80, 143, .12);
}

/* 見出し行：アイコン＋カテゴリ名 */
.frt-childCat__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 .45rem;
}
.frt-childCat__head:last-child { margin-bottom: 0; }  /* 説明文が無いカードは余白を詰める */

.frt-childCat__icon {
  flex: 0 0 auto;
  width: 2rem;
  text-align: center;
  font-size: 1.8rem;
  color: var(--fr-color-main);
  line-height: 1;
}

.frt-childCat__name {
  font-size: 1.6rem;          /* v2:1.2rem → 拡大（H1級） */
  font-weight: 700;
  color: var(--fr-color-main);
  line-height: 1.4;
}
.frt-childCat__name::after {
  content: "\203A";           /* › */
  margin-left: .35em;
  color: var(--fr-color-main);
  font-weight: 400;
}

.frt-childCat__desc {
  font-size: 1.3rem;          /* v4:本文級に拡大（約21px） */
  line-height: 1.85;
  color: var(--fr-color-sub);
}

/* ============================================================
   タイル表示（ルートページ ct1135：トップページ風）
   中央アイコン・名前のみ・PCは4列
   ============================================================ */
@media (min-width: 900px) {
  .frt-childCat--tiles .frt-childCat__list { grid-template-columns: repeat(4, 1fr); }
}
.frt-childCat--tiles .frt-childCat__link {
  align-items: center;
  text-align: center;
  padding: var(--fr-space-lg) var(--fr-space-md);
}
.frt-childCat--tiles .frt-childCat__head {
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.frt-childCat--tiles .frt-childCat__icon {
  width: auto;
  font-size: 2.4rem;          /* タイルはアイコン大きめ（トップページ風） */
}
.frt-childCat--tiles .frt-childCat__name {
  font-size: 1.2rem;          /* タイルの名前はトップページに合わせ控えめ */
}
.frt-childCat--tiles .frt-childCat__name::after { content: none; }  /* タイルは矢印なし */