/* ==========================================
   Phase6-2: デザインシステム基盤
   既存の --color-blue / --color-lb（style.css内で定義済み）を拡張するのみで、
   既存のCSSセレクタ・ルールは一切変更・上書きしない。
   全クラスは "dc-" プレフィックスの新規クラスとして追加する（既存クラスとの衝突を避けるため）。
   ========================================== */

:root {
  /* 既存トークンの参照＋拡張トークン */
  --dc-color-primary: var(--color-blue, #247bfb);
  --dc-color-primary-light: var(--color-lb, #deeeff);
  --dc-color-premium: #f6b83f;
  --dc-color-premium-bg: #fff8ea;
  --dc-color-sponsor: #d0422c;
  --dc-color-sponsor-bg: #fdecea;
  --dc-color-official: #c79427;
  --dc-color-verified: #2e8b57;
  --dc-color-verified-bg: #eaf7ee;
  --dc-color-text: var(--_color-text, #23221f);
  --dc-color-border: #e0e4ea;
  --dc-color-line: #06c755;

  --dc-radius-card: 12px;
  --dc-radius-badge: 999px;
  --dc-radius-button: 8px;

  --dc-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);

  --dc-space-xs: 4px;
  --dc-space-sm: 8px;
  --dc-space-md: 16px;
  --dc-space-lg: 24px;

  --dc-tap-min: 44px; /* スマホでの最小タップ領域 */
}

/* ---- セクション見出し ---- */
.dc-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dc-color-text);
  margin: var(--dc-space-lg) 0 var(--dc-space-md);
  padding-left: var(--dc-space-sm);
  border-left: 4px solid var(--dc-color-primary);
  line-height: 1.4;
}

/* ---- カードUI ---- */
.dc-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-card);
  box-shadow: var(--dc-shadow-card);
  overflow: hidden;
  margin-bottom: var(--dc-space-md);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.dc-card--premium {
  border: 2px solid var(--dc-color-premium);
}
.dc-card--sponsor {
  border: 2px solid var(--dc-color-sponsor);
}
.dc-card--free {
  box-shadow: none;
}
.dc-card__link-area {
  display: block;
  color: inherit;
  text-decoration: none;
}
.dc-card__body {
  padding: var(--dc-space-md);
  line-height: 1.7; /* 文字の詰まり防止 */
}
.dc-card__actions {
  padding: 0 var(--dc-space-md) var(--dc-space-md);
}

/* ---- バッジUI ---- */
.dc-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-xs);
  margin-bottom: var(--dc-space-sm);
}
.dc-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--dc-radius-badge);
  white-space: nowrap;
  line-height: 1.8;
}
.dc-badge--official {
  background: var(--dc-color-official);
  color: #fff;
}
.dc-badge--premium {
  background: var(--dc-color-premium-bg);
  color: var(--dc-color-premium);
  border: 1px solid var(--dc-color-premium);
}
.dc-badge--sponsor {
  background: var(--dc-color-sponsor-bg);
  color: var(--dc-color-sponsor);
  border: 1px solid var(--dc-color-sponsor);
}
.dc-badge--standard {
  background: var(--dc-color-primary-light);
  color: var(--dc-color-primary);
}
.dc-badge--verified {
  background: var(--dc-color-verified-bg);
  color: var(--dc-color-verified);
  border: 1px solid var(--dc-color-verified);
}
.dc-badge--info-complete {
  background: #f5f5f5;
  color: #555;
  border: 1px solid #ccc;
}
.dc-badge--updated {
  background: #fff;
  color: #888;
  border: 1px solid #ddd;
}

/* ---- ボタンUI（スマホ優先：タップ領域44px以上） ---- */
.dc-btn-group {
  display: flex;
  gap: var(--dc-space-sm);
  flex-wrap: wrap;
}
.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dc-tap-min);
  padding: var(--dc-space-sm) var(--dc-space-md);
  border-radius: var(--dc-radius-button);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  flex: 1 1 auto;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.dc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  opacity: 1;
}
.dc-btn--line {
  background: var(--dc-color-line);
  color: #fff;
  box-shadow: 0 2px 6px rgba(6, 199, 85, 0.35);
}
.dc-btn--tel {
  background: var(--dc-color-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(36, 123, 251, 0.35);
}
.dc-btn--inquiry {
  background: #fff;
  color: var(--dc-color-primary);
  border: 2px solid var(--dc-color-primary);
}
.dc-btn--detail {
  background: var(--dc-color-primary-light);
  color: var(--dc-color-primary);
}

/* ---- 特徴タグ ---- */
.dc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-xs);
  list-style: none;
  padding: 0;
  margin: var(--dc-space-sm) 0;
}
.dc-tag-list li {
  background: var(--dc-color-primary-light);
  color: var(--dc-color-primary);
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: var(--dc-radius-badge);
}

/* ---- スマホ優先レイアウト基盤 ---- */
.dc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-md);
}
@media (min-width: 768px) {
  .dc-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dc-space-md);
  }
}

/* 画像アスペクト比の統一（カードのガタつき防止） */
.dc-card__image-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f5f5f5;
}
.dc-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================
   Phase6-3: 完成度向上（アニメーション・カード立体感・ボタン強化・
   スマホ固定CTA・スポンサー枠の自然な見せ方）
   既存のPhase6-2クラス・変数はそのまま利用し、上書きはしない（追加のみ）。
   ========================================== */

/* ---- ①アニメーション：フェードイン（IntersectionObserverと連動。JS未対応環境では即表示） ---- */
.dc-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.dc-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* JS無効時のフォールバック：一定時間後は必ず見える状態にする（CSSのみでの保険） */
@media (prefers-reduced-motion: reduce) {
  .dc-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- ②カードデザイン：立体感・ホバー ---- */
.dc-card:hover {
  box-shadow: 0 8px 20px rgba(36, 123, 251, 0.15);
  transform: translateY(-4px);
}
.dc-card--premium:hover {
  box-shadow: 0 8px 24px rgba(246, 184, 63, 0.3);
}
.dc-card--sponsor:hover {
  box-shadow: 0 8px 24px rgba(208, 66, 44, 0.25);
}
.dc-card--free:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* ---- ③ボタン：押したくなるCTA ---- */
.dc-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
/* お気に入りボタン（WP Favorite Posts の wpfp_link() 出力を包む想定） */
.dc-favorite-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dc-tap-min);
  min-height: var(--dc-tap-min);
  border-radius: var(--dc-radius-badge);
  background: #fff;
  border: 2px solid #ffb3c0;
  transition: transform 0.15s ease;
}
.dc-favorite-wrap:hover {
  transform: scale(1.08);
}

/* ---- ④スマホ最適化：固定CTAバー ---- */
.dc-sticky-cta {
  display: none;
}
@media (max-width: 767px) {
  .dc-sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid var(--dc-color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
    padding: var(--dc-space-sm) var(--dc-space-md);
    gap: var(--dc-space-sm);
  }
  .dc-sticky-cta .dc-btn {
    flex: 1 1 auto;
  }
  /* 固定CTAの分、ページ下部に余白を確保（最後のセクションが隠れないように） */
  .nurserysingle {
    padding-bottom: 72px;
  }
}

/* ---- セクション同士のつながり（施設詳細ページを「1つのホームページ」らしく見せる） ---- */
.dc-section {
  margin-top: var(--dc-space-lg);
  padding-top: var(--dc-space-lg);
  border-top: 1px solid var(--dc-color-border);
}
.dc-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ---- ⑦広告：「地域の子育て応援企業」の自然な見せ方（広告感を抑えたカード型） ---- */
.dc-sponsor-banner {
  background: var(--dc-color-primary-light);
  border-radius: var(--dc-radius-card);
  padding: var(--dc-space-md);
  text-align: center;
}
.dc-sponsor-banner__label {
  display: block;
  font-size: 0.75rem;
  color: var(--dc-color-primary);
  font-weight: 700;
  margin-bottom: var(--dc-space-sm);
}
.dc-sponsor-banner__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--dc-space-md);
}
.dc-sponsor-banner__item {
  background: #fff;
  border-radius: var(--dc-radius-button);
  padding: var(--dc-space-sm) var(--dc-space-md);
  font-size: 0.85rem;
  color: var(--dc-color-text);
  box-shadow: var(--dc-shadow-card);
}

/* ---- カルーセル用の最小限のスタイルフック（Slick Carousel既存導入済み・矢印/ドットの見た目のみ調整） ---- */
.dc-carousel .slick-dots li button:before {
  color: var(--dc-color-primary);
}
.dc-carousel .slick-prev:before,
.dc-carousel .slick-next:before {
  color: var(--dc-color-primary);
}

/* ---- 近隣おすすめ施設・お知らせ/イベントの簡易カードリスト（施設詳細ページ内で使用） ---- */
.dc-mini-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-sm);
}
.dc-mini-card {
  display: flex;
  gap: var(--dc-space-sm);
  align-items: center;
  padding: var(--dc-space-sm);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-button);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.dc-mini-card:hover {
  background: var(--dc-color-primary-light);
}
.dc-mini-card__thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--dc-radius-button);
  object-fit: cover;
  flex-shrink: 0;
  background: #f5f5f5;
}
.dc-mini-card__body {
  flex: 1 1 auto;
  min-width: 0;
}
.dc-mini-card__title {
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-mini-card__meta {
  font-size: 0.75rem;
  color: #888;
}

/* ---- 口コミ表示 ---- */
.dc-review {
  padding: var(--dc-space-md);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-card);
  margin-bottom: var(--dc-space-sm);
}
.dc-review__rating {
  color: var(--dc-color-premium);
  font-weight: 700;
}
.dc-review__reply {
  margin-top: var(--dc-space-sm);
  padding: var(--dc-space-sm) var(--dc-space-md);
  background: var(--dc-color-primary-light);
  border-radius: var(--dc-radius-button);
  font-size: 0.9rem;
}

/* ---- 求人/お知らせ/イベント一覧カード共通の文字スタイル（新規テンプレートパーツ用） ---- */
.dc-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: var(--dc-space-xs) 0;
  line-height: 1.5;
}
.dc-card__facility {
  font-size: 0.85rem;
  color: var(--dc-color-primary);
  margin: 0 0 var(--dc-space-xs);
}
.dc-card__meta {
  font-size: 0.8rem;
  color: #777;
  margin: 2px 0;
}
.dc-card__salary {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dc-color-text);
  margin: var(--dc-space-xs) 0 2px;
}
.dc-card__location {
  font-size: 0.85rem;
  color: #777;
  margin: 0;
}
.dc-empty {
  color: #999;
  padding: var(--dc-space-md);
  text-align: center;
}

/* ==========================================
   Phase7-1: 掲載効果レポート（施設会員マイページ用）
   既存クラス・変数は変更せず、新規クラスのみ追加する。
   ========================================== */

/* ---- 数値カード：数字を大きく目立たせる ---- */
.dc-effectiveness-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--dc-space-md);
  list-style: none;
  margin: 0 0 var(--dc-space-md);
  padding: 0;
}
@media (min-width: 768px) {
  .dc-effectiveness-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.dc-effectiveness-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dc-effectiveness-label {
  font-size: 0.8rem;
  color: #777;
}
.dc-effectiveness-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dc-color-primary);
  line-height: 1.2;
}
.dc-effectiveness-mom {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dc-color-verified);
  margin: var(--dc-space-sm) 0 0;
  padding-top: var(--dc-space-sm);
  border-top: 1px dashed var(--dc-color-border);
}

/* ---- 30日間の簡易推移（ラベル無しのミニバー・CSSのみ） ---- */
.dc-trend-30 {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  margin: var(--dc-space-sm) 0 var(--dc-space-md);
}
.dc-trend-30__bar {
  flex: 1 1 0;
  background: var(--dc-color-primary-light);
  border-radius: 2px 2px 0 0;
}

/* ---- 営業導線（押し売り感を抑えた自然なCTA） ---- */
.dc-sales-cta {
  margin-top: var(--dc-space-lg);
  padding: var(--dc-space-md);
  background: var(--dc-color-primary-light);
  border-radius: var(--dc-radius-card);
  text-align: center;
}
.dc-sales-cta__headline {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dc-color-text);
  margin: 0 0 var(--dc-space-sm);
}
.dc-sales-cta .dc-btn-group {
  justify-content: center;
}
.dc-sales-cta .dc-btn {
  flex: 0 1 auto;
}

/* ==========================================
   追加機能: 近くのおすすめ施設ウィジェット
   既存の .dc-card / .dc-badge / .dc-btn 等はそのまま再利用し、レイアウト用クラスのみ追加。
   ========================================== */
.dc-recommend-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--dc-space-md);
}
.dc-recommend-card {
  margin-bottom: 0;
}

/* ==========================================
   検索フォーム: 町名検索・施設種別グループ表示
   ========================================== */
.dc-town-search {
  margin: var(--dc-space-sm) 0 var(--dc-space-md);
}
.dc-town-search select {
  width: 100%;
  padding: var(--dc-space-sm) var(--dc-space-md);
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-button);
  font-size: 1rem;
  min-height: var(--dc-tap-min);
  background: #fff;
}
.dc-facility-type-group {
  margin-bottom: var(--dc-space-sm);
}
.dc-facility-type-divider {
  border: none;
  border-top: 1px dashed var(--dc-color-border);
  margin: var(--dc-space-sm) 0;
}

/* ==========================================
   TOPページ: 新ヒーローセクション
   ========================================== */
.dc-hero {
  position: relative;
  background: linear-gradient(135deg, var(--dc-color-primary-light) 0%, #ffffff 70%);
  padding: var(--dc-space-lg) var(--dc-space-md);
}
.dc-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-lg);
}
.dc-hero__text {
  flex: 1 1 320px;
}
.dc-hero__logo {
  max-width: 220px;
  height: auto;
  margin-bottom: var(--dc-space-md);
}
.dc-hero__catch {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--dc-color-text);
  margin: 0 0 var(--dc-space-sm);
}
.dc-hero__sub {
  font-size: 1rem;
  color: #555;
  margin: 0 0 var(--dc-space-md);
}
.dc-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-sm);
}
.dc-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dc-tap-min);
  padding: var(--dc-space-sm) var(--dc-space-lg);
  border-radius: var(--dc-radius-button);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  background: var(--dc-color-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(36, 123, 251, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dc-hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(36, 123, 251, 0.4);
}
.dc-hero__image-wrap {
  flex: 1 1 280px;
  text-align: center;
}
.dc-hero__image-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: var(--dc-radius-card);
}
@media (max-width: 767px) {
  .dc-hero {
    padding: var(--dc-space-md);
  }
  .dc-hero__catch {
    font-size: 1.25rem;
  }
  .dc-hero__cta-group {
    flex-direction: column;
  }
  .dc-hero__cta {
    width: 100%;
  }
}

/* ヒーロー内：プレミアム/オフィシャルスポンサーの目立たせ表示 */
.dc-hero-highlight {
  margin-top: var(--dc-space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-sm);
}
.dc-hero-highlight__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* ==========================================
   Phase13: UI・UX全面刷新
   既存クラス(nurserysingle-*, topsearch-*, c-entries等)を維持しつつ、
   デザイントークン(dc-*)で視覚的に統一する。ロジック・マークアップは変更しない。
   ========================================== */

/* ---- 検索結果一覧：カード間の余白・グリッド感を強化 ---- */
.c-entries--panel.c-entries--nursery,
.c-entries--panel {
  gap: var(--dc-space-md);
}
.c-entries__item {
  display: flex;
}
.c-entries__item .dc-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Phase17: 検索結果・カテゴリ一覧カードをdc3-fcardへ刷新した際のグリッド適合 */
.c-entries__item .dc3-fcard {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.c-entries__item .dc3-fcard .dc3-fcard__body {
  flex: 1;
}

/* ---- 検索フォーム：見出し・区切りの統一 ---- */
.topsearch-subtitle {
  display: flex;
  align-items: baseline;
  gap: var(--dc-space-sm);
  padding-left: var(--dc-space-sm);
  border-left: 4px solid var(--dc-color-primary);
}
.topsearch-subtitle--main {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dc-color-text);
}
.topsearch-subtitle--sub {
  font-size: 0.75rem;
  color: #888;
}
.dc-town-search select:focus {
  outline: 2px solid var(--dc-color-primary);
  outline-offset: 1px;
}

/* ---- 施設詳細ページ：アクセス情報リストの現代化 ---- */
.nurserysingle-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dc-color-text);
  margin: var(--dc-space-lg) 0 var(--dc-space-md);
  padding-left: var(--dc-space-sm);
  border-left: 4px solid var(--dc-color-primary);
  line-height: 1.4;
}
.nurserysingle-accesslist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-sm);
}
.nurserysingle-accesslist--item {
  display: flex;
  align-items: center;
  gap: var(--dc-space-sm);
  padding: var(--dc-space-sm) var(--dc-space-md);
  background: #fafbfc;
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-button);
  font-size: 0.95rem;
}
.nurserysingle-accesslist--item img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nurserysingle-accesslist--item.facility-type {
  background: var(--dc-color-primary-light);
  border-color: var(--dc-color-primary);
}
.nurserysingle-accesslist--item .facility-type-label {
  font-weight: 700;
  color: var(--dc-color-primary);
}
.nurserysingle-accesslist--item a {
  color: var(--dc-color-primary);
  text-decoration: none;
  word-break: break-all;
}
.nurserysingle-accesslist--map a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dc-tap-min);
  width: 100%;
  padding: var(--dc-space-sm) var(--dc-space-md);
  background: var(--dc-color-primary);
  color: #fff !important;
  border-radius: var(--dc-radius-button);
  font-weight: 700;
  text-decoration: none;
}
.nurserysingle-access--gmap {
  margin-top: var(--dc-space-sm);
  border-radius: var(--dc-radius-card);
  overflow: hidden;
}
.nurserysingle-access--gmap iframe {
  display: block;
}

/* ---- 施設詳細ページ：受入定員 ---- */
.nurserysingle-capacity--box {
  display: flex;
  align-items: baseline;
  gap: var(--dc-space-md);
  padding: var(--dc-space-md);
  background: var(--dc-color-verified-bg);
  border: 1px solid var(--dc-color-verified);
  border-radius: var(--dc-radius-card);
}
.nurserysingle-capacity--default {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dc-color-text);
}
.nurserysingle-capacity--default span {
  font-size: 1rem;
  font-weight: 400;
  margin-left: 2px;
}
.nurserysingle-capacity--allowable {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dc-color-verified);
}

/* ---- 施設詳細ページ：週間受入対応表 ---- */
.nurserysingle-weekly--table {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dc-space-sm);
}
@media (max-width: 480px) {
  .nurserysingle-weekly--table {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nurserysingle-weekly--table li {
  display: flex;
  align-items: center;
  gap: var(--dc-space-xs);
  padding: var(--dc-space-sm);
  background: #fafbfc;
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-button);
  font-size: 0.85rem;
}
.nurserysingle-weekly--table .week {
  font-weight: 700;
  min-width: 1.5em;
}
.nurserysingle-weekly--table .saturday {
  color: var(--dc-color-primary);
}
.nurserysingle-weekly--table .holiday {
  color: var(--dc-color-sponsor);
}
.nurserysingle-weekly--table .circle {
  color: var(--dc-color-verified);
  font-weight: 700;
}
.nurserysingle-weekly--table .line {
  color: #ccc;
}

/* ---- 施設詳細ページ：園の特徴タグ ---- */
.nurserysingle-featurelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dc-space-xs);
}
.nurserysingle-featurelist--item {
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: var(--dc-radius-badge);
  background: #f0f0f0;
  color: #888;
}
.nurserysingle-featurelist--item.answer {
  background: var(--dc-color-primary-light);
  color: var(--dc-color-primary);
  font-weight: 700;
}
.nurserysingle-featureiconlist {
  list-style: none;
  margin: var(--dc-space-sm) 0 0;
  padding: 0;
  display: flex;
  gap: var(--dc-space-sm);
}

/* ---- 施設詳細ページ：求人一覧 ---- */
.nurserysingle-joblist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dc-space-sm);
}
.nurserysingle-joblist--item a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--dc-space-md);
  background: #fff;
  border: 1px solid var(--dc-color-border);
  border-radius: var(--dc-radius-card);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.nurserysingle-joblist--item a:hover {
  box-shadow: var(--dc-shadow-card);
  transform: translateY(-2px);
}
.nurserysingle-joblist--title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--dc-color-text);
}
.nurserysingle-joblist--salary {
  color: var(--dc-color-sponsor);
  font-weight: 700;
}
.nurserysingle-joblist--type,
.nurserysingle-joblist--category,
.nurserysingle-joblist--hours,
.nurserysingle-joblist--location {
  font-size: 0.8rem;
  color: #777;
}

/* ---- 施設詳細ページ：解決策への導線 ---- */
.single-view-daycare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dc-tap-min);
  margin-top: var(--dc-space-sm);
  padding: var(--dc-space-sm) var(--dc-space-md);
  border: 1px solid var(--dc-color-primary);
  border-radius: var(--dc-radius-button);
  color: var(--dc-color-primary) !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ---- TOPページ：セクション全体の横幅を揃える ---- */
.dc-section,
.dc-hero__inner {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================================================
   Phase13-2: デザイン全面刷新（承認済みモックの本実装）
   「保育園検索サイト」から「鹿児島の子育てライフプラットフォーム」へ。
   既存の dc-* トークン・クラスは変更しない。新規クラスは "dc2-" プレフィックスで
   完全に分離し、旧TOP/検索/施設詳細の名残（未使用になったdc-hero等）と衝突しない。
   ================================================================ */
:root {
  --dc2-coral: #ff7a6b;
  --dc2-coral-tint: #ffece9;
  --dc2-teal: #2aa8a0;
  --dc2-teal-tint: #e3f6f4;
  --dc2-violet: #8b6fd1;
  --dc2-violet-tint: #f0ecfb;
  --dc2-surface-alt: #f4f7fc;
  --dc2-radius-lg: 26px;
  --dc2-shadow-float: 0 14px 36px rgba(32, 36, 45, 0.16);
}

.dc2-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.dc2-section { padding: 34px 0; }
.dc2-section + .dc2-section { border-top: 1px solid var(--dc-color-border); }
.dc2-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.dc2-section__head h2 { font-size: 1.15rem; font-weight: 900; margin: 0; }
.dc2-section__head .dc2-more { font-size: 0.82rem; font-weight: 700; color: var(--dc-color-primary); text-decoration: none; white-space: nowrap; }
.dc2-eyebrow { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; color: var(--dc-color-primary); text-transform: uppercase; margin-bottom: 6px; }

/* ---- ヒーロー ---- */
.dc2-hero { padding: 40px 0 0; background: radial-gradient(120% 100% at 0% 0%, var(--dc-color-primary-light), transparent 60%); }
.dc2-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; }
.dc2-hero__headline { font-size: 2.1rem; font-weight: 900; line-height: 1.4; margin: 0; }
.dc2-hero__headline .accent { color: var(--dc-color-primary); }
.dc2-hero__sub { font-size: 1rem; color: #555; margin: 16px 0 26px; max-width: 40ch; }
.dc2-hero__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.dc2-btn-lg { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: var(--dc-radius-badge); font-weight: 800; font-size: 0.95rem; border: none; cursor: pointer; text-decoration: none; min-height: var(--dc-tap-min); }
.dc2-btn-lg--fill { background: var(--dc-color-primary); color: #fff !important; box-shadow: 0 10px 24px rgba(36, 123, 251, 0.32); }
.dc2-btn-lg--ghost { background: #fff; color: var(--dc-color-text) !important; border: 1.5px solid var(--dc-color-border); }
.dc2-hero__photo { position: relative; border-radius: var(--dc2-radius-lg); overflow: hidden; aspect-ratio: 5/4; box-shadow: var(--dc2-shadow-float); }
.dc2-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .dc2-hero__grid { grid-template-columns: 1fr; }
  .dc2-hero__headline { font-size: 1.5rem; }
  .dc2-hero { padding-top: 24px; }
}

/* ---- ライフステージ 横スクロール ---- */
.dc2-stage-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.dc2-stage-row::-webkit-scrollbar { display: none; }
.dc2-stage { flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; text-decoration: none; }
.dc2-stage__circle { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; box-shadow: var(--dc-shadow-card); transition: transform 0.15s ease; }
.dc2-stage:hover .dc2-stage__circle { transform: translateY(-3px); }
.dc2-stage__label { font-size: 0.76rem; font-weight: 700; color: var(--dc-color-text); text-align: center; }

/* ---- カテゴリアイコングリッド ---- */
.dc2-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.dc2-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border-radius: var(--dc-radius-card); background: var(--dc2-surface-alt); text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dc2-cat:hover { transform: translateY(-3px); box-shadow: var(--dc-shadow-card); }
.dc2-cat__circle { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dc2-cat__label { font-size: 0.76rem; font-weight: 700; color: var(--dc-color-text); text-align: center; line-height: 1.3; }
@media (max-width: 900px) { .dc2-cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .dc2-cat-grid { grid-template-columns: repeat(3, 1fr); } .dc2-cat__label { font-size: 0.68rem; } }

/* ---- 施設カード（おすすめ／人気） ---- */
.dc2-facility-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1000px) { .dc2-facility-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dc2-facility-row { grid-template-columns: 1fr; } }
.dc2-facility-row.dc2-facility-row--scroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.dc2-facility-row--scroll .dc2-fcard { flex: 0 0 240px; scroll-snap-align: start; }
.dc2-fcard { border: 1px solid var(--dc-color-border); border-radius: var(--dc-radius-card); overflow: hidden; background: #fff; box-shadow: var(--dc-shadow-card); transition: transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none; color: inherit; display: block; }
.dc2-fcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(32, 36, 45, 0.14); }
.dc2-fcard__photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--dc2-surface-alt); }
.dc2-fcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.dc2-status-pill { position: absolute; top: 10px; left: 10px; font-size: 0.68rem; font-weight: 800; padding: 4px 11px; border-radius: var(--dc-radius-badge); }
.dc2-status-pill--open { background: var(--dc2-coral-tint); color: var(--dc2-coral); }
.dc2-status-pill--tour { background: var(--dc2-teal-tint); color: var(--dc2-teal); }
.dc2-status-pill--seats { background: var(--dc-color-premium-bg); color: var(--dc-color-premium); }
.dc2-status-pill--few { background: #fdf0d8; color: #b9790c; }
.dc2-fcard__heart { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; color: var(--dc2-coral); }
.dc2-fcard__body { padding: 13px 14px 15px; }
.dc2-fcard__name { font-size: 0.96rem; font-weight: 800; margin-bottom: 2px; }
.dc2-fcard__cat { font-size: 0.74rem; color: var(--dc-color-primary); font-weight: 700; margin-bottom: 2px; }
.dc2-fcard__addr { font-size: 0.72rem; color: #9aa1af; margin-bottom: 8px; }
.dc2-fcard__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.dc2-tag-chip { font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: var(--dc-radius-badge); background: var(--dc2-surface-alt); color: #666; }
.dc2-fcard__foot { display: flex; align-items: center; justify-content: space-between; }
.dc2-rating { font-size: 0.78rem; font-weight: 700; color: var(--dc-color-premium); }
.dc2-rating span { color: #9aa1af; font-weight: 500; }
.dc2-empty-note { color: #9aa1af; font-size: 0.85rem; padding: 20px; text-align: center; background: var(--dc2-surface-alt); border-radius: var(--dc-radius-card); }

/* ---- 3カラム: 豆知識／空き枠／イベント ---- */
.dc2-daily-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .dc2-daily-row { grid-template-columns: 1fr; } }
.dc2-daily-card { border-radius: var(--dc-radius-card); padding: 20px; border: 1px solid var(--dc-color-border); background: #fff; }
.dc2-daily-card--tip { background: linear-gradient(150deg, #20242d 0%, #313847 100%); color: #fcfaf5; border: none; position: relative; overflow: hidden; text-decoration: none; display: block; }
.dc2-daily-card--tip::after { content: ""; position: absolute; right: -26px; top: -26px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, var(--dc-color-premium) 0%, transparent 72%); opacity: 0.5; }
.dc2-daily-card__label { font-size: 0.7rem; font-weight: 800; color: #9aa1af; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.dc2-daily-card--tip .dc2-daily-card__label { color: var(--dc-color-premium); text-transform: uppercase; letter-spacing: 0.06em; }
.dc2-daily-card--tip h3 { font-size: 1.15rem; font-weight: 900; line-height: 1.5; margin: 0 0 8px; position: relative; color: #fff; }
.dc2-daily-card--tip p { font-size: 0.84rem; color: rgba(252, 250, 245, 0.78); line-height: 1.7; position: relative; margin: 0; }
.dc2-daily-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.dc2-daily-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.84rem; padding-bottom: 11px; border-bottom: 1px dashed var(--dc-color-border); }
.dc2-daily-list li:last-child { border-bottom: none; padding-bottom: 0; }
.dc2-daily-list .dc2-name { font-weight: 700; text-decoration: none; color: inherit; display: block; }
.dc2-daily-list .dc2-sub { display: block; font-size: 0.72rem; color: #9aa1af; font-weight: 400; }
.dc2-chip-few { font-size: 0.68rem; font-weight: 800; padding: 3px 9px; border-radius: var(--dc-radius-badge); background: var(--dc-color-premium-bg); color: var(--dc-color-premium); white-space: nowrap; flex-shrink: 0; }
.dc2-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--dc2-violet-tint); color: var(--dc2-violet); flex-shrink: 0; }
.dc2-event-date b { font-size: 0.92rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dc2-event-date small { font-size: 0.56rem; }
.dc2-daily-list--events li { align-items: flex-start; }

/* ---- パートナー ---- */
.dc2-partner-row { display: flex; gap: 12px; flex-wrap: wrap; }
.dc2-partner-pill { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--dc-radius-badge); background: var(--dc2-surface-alt); font-size: 0.82rem; font-weight: 700; color: #555; text-decoration: none; }
.dc2-partner-pill .dc2-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc-color-premium); }

/* ================================================================
   Phase13-2: 検索画面
   ================================================================ */
.dc2-search-head { padding: 18px 0 6px; }
.dc2-search-head__area { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; color: var(--dc-color-primary); background: var(--dc-color-primary-light); padding: 6px 14px; border-radius: var(--dc-radius-badge); margin-bottom: 10px; }
.dc2-step { padding: 22px 0; border-top: 1px solid var(--dc-color-border); }
.dc2-step:first-of-type { border-top: none; }
.dc2-step__num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dc-color-text); color: #fff; font-size: 0.72rem; font-weight: 800; margin-right: 9px; }
.dc2-step h3 { display: inline; font-size: 1.05rem; font-weight: 800; vertical-align: middle; }
.dc2-step__sub { font-size: 0.8rem; color: #888; margin: 8px 0 16px 33px; }
.dc2-type-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px) { .dc2-type-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .dc2-type-grid { grid-template-columns: repeat(3, 1fr); } }
.dc2-type-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 15px 5px; border-radius: var(--dc-radius-card); border: 1.5px solid var(--dc-color-border); background: #fff; cursor: pointer; transition: 0.15s ease; }
.dc2-type-card:hover { border-color: var(--dc-color-primary); }
.dc2-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.dc2-type-card:has(input:checked) { border-color: var(--dc-color-primary); background: var(--dc-color-primary-light); box-shadow: 0 0 0 3px rgba(36, 123, 251, 0.12); }
.dc2-type-card__ico { width: 38px; height: 38px; border-radius: 12px; background: var(--dc2-surface-alt); display: flex; align-items: center; justify-content: center; }
.dc2-type-card:has(input:checked) .dc2-type-card__ico { background: var(--dc-color-primary); color: #fff; }
.dc2-type-card__label { font-size: 0.7rem; font-weight: 700; text-align: center; line-height: 1.3; }
.dc2-town-select-v2 select { width: 100%; padding: 14px 16px; border: 1.5px solid var(--dc-color-border); border-radius: var(--dc-radius-card); font-size: 0.95rem; font-weight: 700; min-height: var(--dc-tap-min); background: #fff; }
.dc2-cond-list { display: flex; flex-direction: column; gap: 10px; }
.dc2-cond-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--dc-color-border); border-radius: var(--dc-radius-card); background: #fff; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.dc2-cond-row input { width: 20px; height: 20px; accent-color: var(--dc-color-primary); }
.dc2-search-cta-wrap { position: sticky; bottom: 0; z-index: 20; background: linear-gradient(#fcfaf5 30%, #fcfaf5); padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px)); margin-top: 10px; border-top: 1px solid var(--dc-color-border); }
.dc2-search-cta { width: 100%; border: none; cursor: pointer; padding: 16px; border-radius: var(--dc-radius-card); background: var(--dc-color-primary); color: #fff; font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 22px rgba(36, 123, 251, 0.35); min-height: var(--dc-tap-min); }

/* ================================================================
   Phase13-2: 施設詳細ページ
   ================================================================ */
.dc2-detail-photo { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--dc2-radius-lg); margin-bottom: 22px; }
.dc2-detail-photo img { width: 100%; height: 100%; object-fit: cover; }
.dc2-detail-title__badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.dc2-detail-title h1 { font-size: 1.5rem; font-weight: 900; margin: 0; }
.dc2-detail-title__sub { font-size: 0.88rem; color: #666; margin-top: 6px; }
.dc2-vacancy-panel { border-radius: var(--dc2-radius-lg); padding: 20px; background: var(--dc-color-verified-bg); border: 1px solid rgba(46, 139, 87, 0.25); margin: 20px 0; }
.dc2-vacancy-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dc2-vacancy-panel__head strong { font-size: 1rem; font-weight: 900; color: var(--dc-color-verified); }
.dc2-vacancy-panel__head time { font-size: 0.72rem; color: #888; }
.dc2-vacancy-ages { display: flex; gap: 8px; flex-wrap: wrap; }
.dc2-vacancy-age { flex: 1 1 auto; min-width: 72px; background: #fff; border-radius: var(--dc-radius-button); padding: 10px 8px; text-align: center; }
.dc2-vacancy-age__label { font-size: 0.7rem; color: #888; font-weight: 700; }
.dc2-vacancy-age__value { font-size: 1.05rem; font-weight: 900; color: var(--dc-color-verified); font-variant-numeric: tabular-nums; }
.dc2-cta-duo { display: flex; gap: 10px; margin-bottom: 24px; }
.dc2-cta-duo .dc2-btn { flex: 1; }
.dc2-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-radius: var(--dc-radius-card); font-weight: 800; font-size: 0.9rem; border: none; text-decoration: none; min-height: var(--dc-tap-min); }
.dc2-btn--primary { background: var(--dc-color-primary); color: #fff !important; box-shadow: 0 8px 18px rgba(36, 123, 251, 0.3); }
.dc2-btn--ghost { background: #fff; color: var(--dc-color-text) !important; border: 1.5px solid var(--dc-color-border); }
.dc2-detail-section { margin-bottom: 26px; }
.dc2-detail-section h2 { font-size: 1.02rem; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.dc2-detail-section h2 .dc2-num { width: 22px; height: 22px; border-radius: 50%; background: var(--dc-color-text); color: #fff; font-size: 0.68rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dc2-photo-strip { display: flex; gap: 8px; overflow-x: auto; }
.dc2-photo-strip img { width: 130px; height: 130px; object-fit: cover; border-radius: var(--dc-radius-button); flex-shrink: 0; }
.dc2-video-box { aspect-ratio: 16/9; max-width: 480px; border-radius: var(--dc-radius-card); background: var(--dc-color-text); display: flex; align-items: center; justify-content: center; color: #fff; }
.dc2-feature-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dc2-feature-tag { font-size: 0.82rem; font-weight: 700; padding: 7px 14px; border-radius: var(--dc-radius-badge); background: var(--dc-color-primary-light); color: var(--dc-color-primary); }
.dc2-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 480px; }
.dc2-info-box { padding: 14px; border-radius: var(--dc-radius-card); background: var(--dc2-surface-alt); border: 1px solid var(--dc-color-border); }
.dc2-info-box__label { font-size: 0.72rem; color: #888; font-weight: 700; margin-bottom: 4px; }
.dc2-info-box__value { font-size: 1rem; font-weight: 800; }

/* ================================================================
   Phase15-1: デザインシステム刷新（Apple/Airbnb/Notion/Mercari/Google的な
   余白多め・写真中心・カードUI・丸み・柔らかいブルー・白ベース・高級感）
   クラスは dc3- prefix で統一し、Phase13-2(dc2-)とは独立させる。
   ================================================================ */
:root {
  /* ブランドカラー：ロゴ基準。既存の--dc-color-primary(#247bfb)をそのままブランドブルーとして正式採用 */
  --dc3-brand-blue: var(--dc-color-primary, #247bfb);
  --dc3-brand-blue-dark: #1a63d1;
  --dc3-brand-blue-light: var(--dc-color-primary-light, #deeeff);
  --dc3-accent-yellow: #ffc93c;
  --dc3-accent-yellow-tint: #fff8e0;
  --dc3-white: #ffffff;
  --dc3-ink: #1c2430;
  --dc3-ink-soft: #5b6472;
  --dc3-surface: #f6f9fd;
  --dc3-surface-2: #eef4fb;
  --dc3-border: #e6ebf2;

  /* カテゴリカラー */
  --dc3-cat-medical: #1f9d6e;
  --dc3-cat-medical-tint: #e6f7f0;
  --dc3-cat-mamacare: #ec6f9b;
  --dc3-cat-mamacare-tint: #fdedf3;
  --dc3-cat-lesson: #f2874a;
  --dc3-cat-lesson-tint: #fef1e8;
  --dc3-cat-ai: #8b6fd1;
  --dc3-cat-ai-tint: #f0ecfb;
  --dc3-cat-sponsor: #c79427;
  --dc3-cat-sponsor-tint: #fbf3e2;

  /* 角丸・影（大きめの角丸と柔らかい影で高級感を出す） */
  --dc3-radius-sm: 14px;
  --dc3-radius-md: 22px;
  --dc3-radius-lg: 32px;
  --dc3-radius-full: 999px;
  --dc3-shadow-sm: 0 2px 14px rgba(28, 36, 48, 0.06);
  --dc3-shadow-md: 0 10px 30px rgba(28, 36, 48, 0.09);
  --dc3-shadow-lg: 0 24px 60px rgba(28, 36, 48, 0.14);
  --dc3-shadow-hover: 0 16px 36px rgba(36, 123, 251, 0.20);

  /* 余白スケール（大きめ、Apple/Airbnb的な「間」の演出） */
  --dc3-sp-1: 8px;
  --dc3-sp-2: 16px;
  --dc3-sp-3: 24px;
  --dc3-sp-4: 40px;
  --dc3-sp-5: 64px;
  --dc3-sp-6: 96px;

  --dc3-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ダークモード対応可能構造（今回は本格実装しないが、トークンの受け皿を用意しておく） */
@media (prefers-color-scheme: dark) {
  :root {
    --dc3-white: #14181f;
    --dc3-ink: #eef1f6;
    --dc3-ink-soft: #a8b0bd;
    --dc3-surface: #1b2029;
    --dc3-surface-2: #232a35;
    --dc3-border: #2c3340;
  }
}

.dc3-root { background: var(--dc3-white); color: var(--dc3-ink); }
.dc3-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.dc3-section { padding: var(--dc3-sp-5) 0; }
.dc3-section--alt { background: var(--dc3-surface); }
.dc3-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dc3-sp-2); margin-bottom: var(--dc3-sp-3); flex-wrap: wrap; }
.dc3-section__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--dc3-brand-blue); text-transform: uppercase; margin-bottom: 8px; }
.dc3-section__title { font-size: 1.5rem; font-weight: 900; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
.dc3-section__desc { font-size: 0.92rem; color: var(--dc3-ink-soft); margin-top: 6px; max-width: 56ch; }
.dc3-section__more { font-size: 0.85rem; font-weight: 700; color: var(--dc3-brand-blue); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s var(--dc3-ease); }
.dc3-section__more:hover { gap: 8px; }

/* ---- 共通カード（角丸・影・ホバー・アニメーション） ---- */
.dc3-card { background: var(--dc3-white); border-radius: var(--dc3-radius-md); box-shadow: var(--dc3-shadow-sm); border: 1px solid var(--dc3-border); overflow: hidden; transition: transform 0.3s var(--dc3-ease), box-shadow 0.3s var(--dc3-ease); text-decoration: none; color: inherit; display: block; }
.dc3-card:hover { transform: translateY(-6px); box-shadow: var(--dc3-shadow-hover); }
.dc3-card__img { aspect-ratio: 4/3; overflow: hidden; background: var(--dc3-surface-2); position: relative; }
.dc3-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--dc3-ease); }
.dc3-card:hover .dc3-card__img img { transform: scale(1.06); }
.dc3-card__body { padding: var(--dc3-sp-2) var(--dc3-sp-2) var(--dc3-sp-3); }

/* スクロール演出：要素が画面に入るとふわっと現れる（prefers-reduced-motionに配慮） */
.dc3-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--dc3-ease), transform 0.6s var(--dc3-ease); }
.dc3-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .dc3-reveal { opacity: 1; transform: none; transition: none; }
  .dc3-card, .dc3-card__img img { transition: none; }
}

/* ---- Skeleton loading ---- */
.dc3-skeleton { position: relative; overflow: hidden; background: var(--dc3-surface-2); border-radius: var(--dc3-radius-sm); }
.dc3-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: dc3-shimmer 1.4s infinite; }
@keyframes dc3-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- ①ファーストビュー ---- */
.dc3-hero { position: relative; padding: var(--dc3-sp-4) 0 var(--dc3-sp-5); background: linear-gradient(180deg, var(--dc3-brand-blue-light) 0%, var(--dc3-white) 65%); overflow: hidden; }
.dc3-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .dc3-hero__grid { grid-template-columns: 1fr; gap: 28px; } .dc3-hero__photo { order: -1; } }
.dc3-hero__photo { border-radius: var(--dc3-radius-lg); overflow: hidden; box-shadow: var(--dc3-shadow-lg); aspect-ratio: 16/9; }
.dc3-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc3-hero__logo-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--dc3-white); border-radius: var(--dc3-radius-full); padding: 8px 18px 8px 8px; box-shadow: var(--dc3-shadow-sm); margin-bottom: var(--dc3-sp-2); }
.dc3-hero__logo-badge img { width: 32px; height: 32px; border-radius: 50%; }
.dc3-hero__logo-badge span { font-size: 0.8rem; font-weight: 800; color: var(--dc3-ink); }
.dc3-hero__headline { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; line-height: 1.4; margin: 0 0 var(--dc3-sp-2); text-wrap: balance; }
.dc3-hero__headline .accent { color: var(--dc3-brand-blue); }
.dc3-hero__sub { font-size: 1.02rem; color: var(--dc3-ink-soft); margin: 0 0 var(--dc3-sp-3); max-width: 46ch; }
.dc3-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.dc3-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: var(--dc3-radius-full); font-weight: 800; font-size: 0.95rem; border: none; cursor: pointer; text-decoration: none; min-height: 48px; transition: transform 0.2s var(--dc3-ease), box-shadow 0.2s var(--dc3-ease); }
.dc3-btn:hover { transform: translateY(-2px); }
.dc3-btn--primary { background: var(--dc3-brand-blue); color: #fff !important; box-shadow: 0 12px 26px rgba(36, 123, 251, 0.34); }
.dc3-btn--ghost { background: var(--dc3-white); color: var(--dc3-ink) !important; border: 1.5px solid var(--dc3-border); }
.dc3-btn--yellow { background: var(--dc3-accent-yellow); color: #4a3800 !important; box-shadow: 0 12px 26px rgba(255, 201, 60, 0.35); }

/* ---- ②ライフステージ 横スクロール ---- */
.dc3-stage-row { display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.dc3-stage-row::-webkit-scrollbar { display: none; }
.dc3-stage { flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 96px; text-decoration: none; }
.dc3-stage__circle { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: var(--dc3-shadow-sm); transition: transform 0.3s var(--dc3-ease), box-shadow 0.3s var(--dc3-ease); }
.dc3-stage:hover .dc3-stage__circle { transform: translateY(-4px) scale(1.05); box-shadow: var(--dc3-shadow-md); }
.dc3-stage__label { font-size: 0.8rem; font-weight: 700; color: var(--dc3-ink); text-align: center; }

/* ---- ③カテゴリ（大きめ、アイコン+名称+説明） ---- */
.dc3-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dc3-cat-card { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px; border-radius: var(--dc3-radius-md); background: var(--dc3-white); border: 1px solid var(--dc3-border); text-decoration: none; box-shadow: var(--dc3-shadow-sm); transition: transform 0.3s var(--dc3-ease), box-shadow 0.3s var(--dc3-ease); }
.dc3-cat-card:hover { transform: translateY(-6px); box-shadow: var(--dc3-shadow-md); }
.dc3-cat-card__icon { width: 56px; height: 56px; border-radius: var(--dc3-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.dc3-cat-card__name { font-size: 1.02rem; font-weight: 800; color: var(--dc3-ink); }
.dc3-cat-card__desc { font-size: 0.8rem; color: var(--dc3-ink-soft); line-height: 1.6; }
@media (max-width: 1000px) { .dc3-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .dc3-cat-grid { grid-template-columns: repeat(2, 1fr); } .dc3-cat-card { padding: 18px 14px; } }

/* ---- ④AIおすすめ ---- */
.dc3-ai-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 800; padding: 5px 12px; border-radius: var(--dc3-radius-full); background: var(--dc3-cat-ai-tint); color: var(--dc3-cat-ai); }
.dc3-facility-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .dc3-facility-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dc3-facility-row { grid-template-columns: 1fr; } }
.dc3-facility-row--scroll { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; }
.dc3-facility-row--scroll .dc3-fcard { flex: 0 0 250px; scroll-snap-align: start; }
.dc3-fcard { background: var(--dc3-white); border-radius: var(--dc3-radius-md); overflow: hidden; box-shadow: var(--dc3-shadow-sm); border: 1px solid var(--dc3-border); transition: transform 0.3s var(--dc3-ease), box-shadow 0.3s var(--dc3-ease); text-decoration: none; color: inherit; display: block; }
.dc3-fcard:hover { transform: translateY(-6px); box-shadow: var(--dc3-shadow-hover); }
.dc3-fcard__photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--dc3-surface-2); }
.dc3-fcard__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--dc3-ease); }
.dc3-fcard:hover .dc3-fcard__photo img { transform: scale(1.06); }
.dc3-fcard__pill { position: absolute; top: 10px; left: 10px; font-size: 0.66rem; font-weight: 800; padding: 4px 11px; border-radius: var(--dc3-radius-full); }
.dc3-fcard__pill--ai { background: var(--dc3-cat-ai-tint); color: var(--dc3-cat-ai); }
.dc3-fcard__pill--sponsor { background: var(--dc3-cat-sponsor-tint); color: var(--dc3-cat-sponsor); }
.dc3-fcard__pill--open { background: var(--dc3-cat-medical-tint); color: var(--dc3-cat-medical); }
/* Family One RC2 Founding Partner Program：他の左上ピルと重ならないよう右上に配置する */
.dc3-fcard__pill--founder { left: auto; right: 10px; top: 10px; background: #fdf3e0; color: #9a6b12; }
.dc3-fcard__body { padding: 14px 16px 16px; }
.dc3-fcard__name { font-size: 0.98rem; font-weight: 800; margin-bottom: 4px; }
.dc3-fcard__reason { font-size: 0.74rem; color: var(--dc3-cat-ai); font-weight: 700; margin-bottom: 6px; }
.dc3-fcard__meta { display: flex; align-items: center; gap: 10px; font-size: 0.74rem; color: var(--dc3-ink-soft); flex-wrap: wrap; }
.dc3-fcard__meta strong { color: var(--dc3-ink); }

/* ---- ⑤空き枠情報 ---- */
.dc3-availability-list { display: flex; flex-direction: column; gap: 10px; }
.dc3-availability-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--dc3-radius-sm); background: var(--dc3-white); border: 1px solid var(--dc3-border); }
.dc3-avail-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.82rem; padding: 6px 14px; border-radius: var(--dc3-radius-full); }
.dc3-avail-badge--open { background: var(--dc3-cat-medical-tint); color: var(--dc3-cat-medical); }
.dc3-avail-badge--few { background: var(--dc3-accent-yellow-tint); color: #a3760a; }
.dc3-avail-badge--none { background: #fdecea; color: #c62828; }

/* ---- ⑥イベント / ⑦子育て情報マガジン ---- */
.dc3-magazine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .dc3-magazine-grid { grid-template-columns: 1fr; } }
.dc3-magazine-card__tag { display: inline-block; font-size: 0.68rem; font-weight: 800; padding: 4px 12px; border-radius: var(--dc3-radius-full); background: var(--dc3-brand-blue-light); color: var(--dc3-brand-blue); margin-bottom: 10px; }
.dc3-magazine-card__title { font-size: 1rem; font-weight: 800; line-height: 1.5; margin-bottom: 6px; }
.dc3-magazine-card__excerpt { font-size: 0.8rem; color: var(--dc3-ink-soft); line-height: 1.7; }
.dc3-event-date-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--dc3-radius-sm); background: var(--dc3-cat-lesson-tint); color: var(--dc3-cat-lesson); flex-shrink: 0; }
.dc3-event-date-badge b { font-size: 1.1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.dc3-event-date-badge small { font-size: 0.6rem; }

/* ---- ⑧スポンサー ---- */
.dc3-sponsor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .dc3-sponsor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dc3-sponsor-grid { grid-template-columns: 1fr; } }
.dc3-sponsor-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--dc3-radius-md); background: linear-gradient(135deg, var(--dc3-cat-sponsor-tint), var(--dc3-white)); border: 1px solid var(--dc3-border); text-decoration: none; }
.dc3-sponsor-card__badge { width: 40px; height: 40px; border-radius: 50%; background: var(--dc3-cat-sponsor); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.dc3-sponsor-card__name { font-size: 0.9rem; font-weight: 800; color: var(--dc3-ink); }
.dc3-sponsor-card__label { font-size: 0.68rem; color: var(--dc3-cat-sponsor); font-weight: 700; }

/* ---- ⑩口コミ ---- */
.dc3-review-card { padding: 20px; }
.dc3-review-card__stars { color: var(--dc3-accent-yellow); font-size: 0.9rem; margin-bottom: 8px; }
.dc3-review-card__body { font-size: 0.86rem; color: var(--dc3-ink); line-height: 1.8; margin-bottom: 10px; }
.dc3-review-card__meta { font-size: 0.74rem; color: var(--dc3-ink-soft); }

/* ---- ⑪地域ランキング ---- */
.dc3-rank-list { display: flex; flex-direction: column; gap: 10px; }
.dc3-rank-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--dc3-radius-sm); background: var(--dc3-white); border: 1px solid var(--dc3-border); text-decoration: none; }
.dc3-rank-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.9rem; background: var(--dc3-surface-2); color: var(--dc3-ink-soft); flex-shrink: 0; }
.dc3-rank-row:nth-child(1) .dc3-rank-num { background: #ffe9a8; color: #8a6d00; }
.dc3-rank-row:nth-child(2) .dc3-rank-num { background: #e6e9ee; color: #55606e; }
.dc3-rank-row:nth-child(3) .dc3-rank-num { background: #f3ddc8; color: #8a5a2b; }
.dc3-rank-name { font-weight: 800; font-size: 0.9rem; color: var(--dc3-ink); flex: 1; }
.dc3-rank-score { font-size: 0.76rem; color: var(--dc3-ink-soft); }

/* ---- ⑫AI相談（準備中のCTAとして実装。実際のチャット機能は将来接続） ---- */
.dc3-ai-chat-teaser { border-radius: var(--dc3-radius-lg); background: linear-gradient(135deg, #2b2f6b, #4a3f8f); color: #fff; padding: var(--dc3-sp-4); position: relative; overflow: hidden; }
.dc3-ai-chat-teaser::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, var(--dc3-cat-ai) 0%, transparent 70%); opacity: 0.5; }
.dc3-ai-chat-teaser__bubble { position: relative; background: rgba(255, 255, 255, 0.12); border-radius: var(--dc3-radius-md); padding: 16px 20px; font-size: 0.95rem; margin-bottom: var(--dc3-sp-2); max-width: 30ch; backdrop-filter: blur(4px); }
.dc3-ai-chat-teaser h2 { position: relative; font-size: 1.3rem; font-weight: 900; margin: 0 0 8px; }
.dc3-ai-chat-teaser p { position: relative; opacity: 0.85; font-size: 0.85rem; margin: 0 0 var(--dc3-sp-2); }
.dc3-ai-chat-teaser__personas { position: relative; display: flex; gap: 10px; flex-wrap: wrap; }
.dc3-ai-chat-teaser__persona { background: rgba(255, 255, 255, 0.14); border-radius: var(--dc3-radius-full); padding: 8px 16px; font-size: 0.78rem; font-weight: 700; }

.dc3-empty-note { color: var(--dc3-ink-soft); font-size: 0.85rem; padding: 28px 20px; text-align: center; background: var(--dc3-surface); border-radius: var(--dc3-radius-md); border: 1px dashed var(--dc3-border); }

/* Phase16: 事業者向けページ（保育事業者さまへ）専用コンポーネント */
.dc3-pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dc3-pillar-card { padding: 26px 24px; border-radius: var(--dc3-radius-md); background: var(--dc3-white); border: 1px solid var(--dc3-border); box-shadow: var(--dc3-shadow-sm); }
.dc3-pillar-card__icon { width: 48px; height: 48px; border-radius: var(--dc3-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--dc3-brand-blue-light); color: var(--dc3-brand-blue); margin-bottom: 14px; }
.dc3-pillar-card__title { font-size: 1.02rem; font-weight: 800; margin-bottom: 8px; }
.dc3-pillar-card__desc { font-size: 0.86rem; color: var(--dc3-ink-soft); line-height: 1.8; }

.dc3-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dc3-pricing-card { display: flex; flex-direction: column; padding: 26px 22px; border-radius: var(--dc3-radius-md); background: var(--dc3-white); border: 1px solid var(--dc3-border); box-shadow: var(--dc3-shadow-sm); position: relative; }
.dc3-pricing-card--featured { border: 2px solid var(--dc3-brand-blue); box-shadow: var(--dc3-shadow-md); }
.dc3-pricing-card--sponsor { background: linear-gradient(160deg, var(--dc3-cat-sponsor-tint), var(--dc3-white) 55%); border-color: var(--dc3-cat-sponsor); }
.dc3-pricing-card__ribbon { position: absolute; top: -12px; left: 20px; background: var(--dc3-brand-blue); color: #fff; font-size: 0.68rem; font-weight: 800; padding: 5px 14px; border-radius: var(--dc3-radius-full); box-shadow: var(--dc3-shadow-sm); }
.dc3-pricing-card__name { font-size: 1.05rem; font-weight: 900; margin-bottom: 4px; }
.dc3-pricing-card__note { font-size: 0.74rem; color: var(--dc3-ink-soft); min-height: 1.6em; margin-bottom: 14px; }
.dc3-pricing-card__price { font-size: 1.9rem; font-weight: 900; color: var(--dc3-ink); margin-bottom: 2px; }
.dc3-pricing-card__price span { font-size: 0.85rem; font-weight: 700; color: var(--dc3-ink-soft); margin-left: 4px; }
.dc3-pricing-card__price small { font-size: 1.1rem; margin-right: 2px; }
.dc3-pricing-card__quota { font-size: 0.74rem; font-weight: 700; color: var(--dc3-brand-blue); margin-bottom: 16px; }
.dc3-pricing-card__features { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.dc3-pricing-card__features li { font-size: 0.82rem; color: var(--dc3-ink); line-height: 1.5; padding-left: 22px; position: relative; }
.dc3-pricing-card__features li::before { content: "✓"; position: absolute; left: 0; color: var(--dc3-brand-blue); font-weight: 900; }
.dc3-pricing-card__features li.is-added { color: var(--dc3-ink); font-weight: 700; }
.dc3-pricing-card__features li.is-added::before { content: "＋"; }

.dc3-cf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.dc3-cf-card { text-align: center; padding: 22px 14px; border-radius: var(--dc3-radius-md); background: var(--dc3-white); border: 1px solid var(--dc3-border); box-shadow: var(--dc3-shadow-sm); }
.dc3-cf-card__icon { font-size: 1.6rem; margin-bottom: 10px; }
.dc3-cf-card__name { font-size: 0.92rem; font-weight: 800; margin-bottom: 6px; }
.dc3-cf-card__price { font-size: 1.15rem; font-weight: 900; color: var(--dc3-brand-blue); margin-bottom: 6px; }
.dc3-cf-card__note { font-size: 0.72rem; color: var(--dc3-ink-soft); }
.dc3-pricing-card { position: relative; }
.dc3-pricing-card__ribbon { white-space: nowrap; }

@media (max-width: 900px) {
  .dc3-pillar-grid, .dc3-pricing-grid { grid-template-columns: 1fr; }
  .dc3-cf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phase17: 施設詳細ページ */
.dc3-detail-badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dc3-detail-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 800; padding: 6px 14px; border-radius: var(--dc3-radius-full); background: var(--dc3-surface-2); color: var(--dc3-ink-soft); }
.dc3-detail-badge--sponsor { background: var(--dc3-cat-sponsor-tint); color: var(--dc3-cat-sponsor); }
.dc3-detail-badge--premium { background: var(--dc3-accent-yellow-tint); color: #a3760a; }
.dc3-detail-badge--standard { background: var(--dc3-brand-blue-light); color: var(--dc3-brand-blue); }
.dc3-detail-badge--verified { background: var(--dc3-cat-medical-tint); color: var(--dc3-cat-medical); }

.dc3-detail-hero { position: relative; border-radius: var(--dc3-radius-lg); overflow: hidden; box-shadow: var(--dc3-shadow-md); aspect-ratio: 16/9; margin-bottom: var(--dc3-sp-3); background: var(--dc3-surface-2); width: 100%; box-sizing: border-box; }
.dc3-detail-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 緊急修正①：写真未登録施設向けプレースホルダー（Royal Blue系グラデーション、Design System準拠） */
.dc3-detail-hero--placeholder { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; background: linear-gradient(135deg, var(--dc3-brand-blue-light, #deeeff) 0%, #fff 100%); color: var(--dc3-brand-blue); }

/* RC2 施設カード・詳細ページ共通テンプレート統一①：カテゴリ別写真プレースホルダー（family_one_render_photo_placeholder()）。
   .dc3-detail-hero--placeholder と同じ考え方をカード（.dc3-fcard__photo内、アスペクト比は親に追従）にも適用し、
   写真の有無でHTML構造・幅の基準が変わらないようにする。カテゴリごとにアイコンの背景色（tint/accent）だけを変える。 */
.dc3-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--dc3-ph-tint, var(--dc3-brand-blue-light, #deeeff)) 0%, #fff 100%); color: var(--dc3-ph-accent, var(--dc3-brand-blue)); }
.dc3-fcard__photo .dc3-photo-placeholder { position: absolute; inset: 0; }

.dc3-vacancy-panel { border-radius: var(--dc3-radius-md); padding: 22px; background: var(--dc3-cat-medical-tint); border: 1px solid rgba(31, 157, 110, 0.25); margin-bottom: var(--dc3-sp-3); }
.dc3-vacancy-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dc3-vacancy-panel__head strong { font-size: 0.95rem; font-weight: 900; color: var(--dc3-cat-medical); }
.dc3-vacancy-panel__head time { font-size: 0.7rem; color: var(--dc3-ink-soft); }

/* 緊急修正①：施設詳細ページ最上部の「ファーストビュー」カード。写真の有無に関わらず
   幅の基準を自身（width:100%; box-sizing:border-box）に持たせ、内部のCTAボタン行が
   写真要素の存在に依存しないようにする。以前はインラインstyleで指定していたものを
   専用クラスへ集約した。 */
.dc3-detail-firstview { width: 100%; box-sizing: border-box; padding: 0; overflow: hidden; margin-bottom: var(--dc3-sp-3); }

/* 緊急修正①：CTAボタン行。flex-basisを明示し（ショートハンドflex:1のflex-basis:0%が
   flex-direction:columnの環境で幅計算を不安定にし得るため）、モバイルでも
   flex:1 1 100%で確実に横幅いっぱいのブロックとして積むようにする
   （文字が1文字ずつ縦に表示される崩れを構造的に防ぐ）。 */
.dc3-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--dc3-sp-3); width: 100%; box-sizing: border-box; }
.dc3-cta-row .dc3-btn { flex: 1 1 160px; justify-content: center; min-width: 140px; box-sizing: border-box; white-space: normal; }

.dc3-detail-section { margin-bottom: var(--dc3-sp-4); }
.dc3-detail-section__title { font-size: 1.05rem; font-weight: 900; margin: 0 0 14px; }

.dc3-info-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dc3-info-box { background: var(--dc3-white); border: 1px solid var(--dc3-border); border-radius: var(--dc3-radius-sm); padding: 14px; }
.dc3-info-box__label { font-size: 0.7rem; font-weight: 700; color: var(--dc3-ink-soft); margin-bottom: 4px; }
.dc3-info-box__value { font-size: 0.95rem; font-weight: 800; color: var(--dc3-ink); }

.dc3-locked-teaser { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--dc3-radius-md); background: var(--dc3-surface); border: 1px dashed var(--dc3-border); font-size: 0.82rem; color: var(--dc3-ink-soft); }
.dc3-locked-teaser__icon { font-size: 1.3rem; flex-shrink: 0; }
.dc3-locked-teaser a { color: var(--dc3-brand-blue); font-weight: 700; text-decoration: none; }

.dc3-access-row { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--dc3-ink); padding: 10px 0; border-bottom: 1px solid var(--dc3-border); }
.dc3-access-row:last-child { border-bottom: none; }
.dc3-access-row .ico { flex-shrink: 0; }

.dc3-detail-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; gap: 10px; padding: 12px 16px; background: var(--dc3-white); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.1); border-top: 1px solid var(--dc3-border); }
.dc3-detail-sticky-cta .dc3-btn { flex: 1 1 auto; justify-content: center; }
/* RC2 施設詳細ページ共通テンプレート統一⑤：family_one_render_cta_row()をsticky領域にそのままネストできるようにする */
.dc3-detail-sticky-cta > .dc3-cta-row { display: flex; flex: 1; gap: 10px; margin: 0; flex-wrap: nowrap; overflow-x: auto; }
@media (min-width: 901px) { .dc3-detail-sticky-cta { display: none; } }

/* Phase18: 会社概要ページ */
.dc3-company-greeting { display: grid; grid-template-columns: 220px 1fr; gap: var(--dc3-sp-3); align-items: center; }
.dc3-company-info-table th, .dc3-company-info-table td { word-break: break-word; }
@media (max-width: 640px) {
  .dc3-company-greeting { grid-template-columns: 1fr; }
  .dc3-company-greeting img { max-width: 220px; margin: 0 auto; }
  .dc3-company-info-table { min-width: 0 !important; }
  .dc3-company-info-table th { width: auto !important; display: block; padding-bottom: 4px !important; }
  .dc3-company-info-table td { display: block; padding-top: 0 !important; padding-bottom: 14px !important; }
  .dc3-company-info-table tr { display: block; }
}

/* ==========================================================================
   Phase19: モバイルUI全面再設計
   PC版の縮小・縦積みではなく、モバイル専用のコンポーネント設計として再構築する。
   ブレークポイントは640pxを基本とし、375〜430pxの実機幅はrem/clamp()/%で自然に収まる設計とする。
   ========================================================================== */

:root {
  --dc3-header-h: 64px;
}

/* ---- ②共通ヘッダー：高さ固定・safe-area対応・スクロール時の重なり解消 ---- */
html { scroll-padding-top: calc(var(--dc3-header-h) + env(safe-area-inset-top, 0px) + 12px); }

@media (max-width: 782px) {
  .l-header {
    background-color: rgba(255, 255, 255, 0.96) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--dc3-border, #e6ebf2);
  }
  .l-header--sticky-sm {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .l-header__content {
    min-height: var(--dc3-header-h);
    display: flex;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .c-site-branding__title .custom-logo,
  .c-site-branding__title img {
    max-width: 68px;
    width: auto;
    max-height: 36px;
    height: auto;
  }
  .c-site-branding__description { display: none; }
}

/* ---- 旧ページタイトルヘッダー（画像タイトル）を、dc3ヒーローを持つページでは非表示に ---- */
.dc3-page-header--hidden { display: none !important; }
.dc3-page-header {
  padding: 28px 20px 20px;
  text-align: center;
}
.dc3-page-header .c-entry__title--title {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--dc3-ink, #1c2430);
}

/* ---- ③文字設計：モバイル専用タイポグラフィスケール ---- */
@media (max-width: 640px) {
  body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  .dc3-wrap, .dc3-root { max-width: 100%; }
  img { max-width: 100%; height: auto; }
  .dc3-wrap { padding-left: 20px; padding-right: 20px; }
  .dc3-hero__headline { font-size: clamp(28px, 7.5vw, 34px); line-height: 1.35; }
  .dc3-section__title { font-size: clamp(22px, 6vw, 26px); margin-bottom: 4px; }
  .dc3-section__desc, .dc3-hero__sub, .dc3-pillar-card__desc { font-size: 15px; line-height: 1.75; }
  .dc3-card__body, .dc3-fcard__body { font-size: 15px; }
  .dc3-section__eyebrow, .dc3-fcard__meta, .dc3-pricing-card__note { font-size: 13px; }
  .dc3-section { padding: 48px 0; }
  .dc3-section__head { margin-bottom: 20px; }
  p { line-height: 1.75; }
}

/* ---- ⑤CTA/リンクの統一：角丸12〜16px、タップ領域確保 ---- */
@media (max-width: 640px) {
  .dc3-btn {
    border-radius: 14px;
    min-height: 50px;
    font-size: 15px;
  }
  .dc3-hero__ctas, .dc3-cta-row {
    flex-direction: column;
  }
  /* 緊急修正①：flex:1（flex-basis:0%）はflex-direction:column環境で幅の解釈が
     不安定になり得るため、flex-basisを明示した1 1 100%へ統一し、widthだけに
     頼らない（文字が1文字ずつ縦に表示される崩れの再発防止）。 */
  .dc3-hero__ctas .dc3-btn, .dc3-cta-row .dc3-btn {
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .dc3-section__more {
    font-size: 14px;
  }
}

/* ---- ⑥TOPヒーロー：モバイルでの表示順序をCSS orderで並び替え ----
   DOM順は変えず、flexの order のみでモバイル時の見た目の順序を
   ①ブランドバッジ→②見出し→③説明→④CTA→⑤写真 に変更する。 */
@media (max-width: 640px) {
  .dc3-hero__grid {
    display: flex;
    flex-direction: column;
  }
  .dc3-hero__logo-badge { order: 1; }
  .dc3-hero__headline { order: 2; }
  .dc3-hero__sub { order: 3; margin-bottom: 20px; }
  .dc3-hero__ctas { order: 4; margin-bottom: 28px; }
  .dc3-hero__photo {
    order: 5;
    border-radius: 20px;
    margin: 0;
  }
  .dc3-hero { padding-top: 24px; padding-bottom: 32px; }
}

/* ---- ⑦ライフステージ導線：アイコン統一・補足テキスト・スクロールバー非表示 ---- */
.dc3-stage-row { scrollbar-width: none; -ms-overflow-style: none; }
.dc3-stage-row::-webkit-scrollbar { display: none; height: 0; }
.dc3-stage__icon { display: flex; align-items: center; justify-content: center; }
.dc3-stage__note { font-size: 11px; color: var(--dc3-ink-soft); text-align: center; }
@media (max-width: 640px) {
  .dc3-stage { width: 76px; }
  .dc3-stage__circle { width: 56px; height: 56px; }
  .dc3-stage__label { font-size: 12.5px; }
}

/* ---- ⑧カテゴリ一覧：2列カード化・タップフィードバック ---- */
@media (max-width: 640px) {
  .dc3-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dc3-cat-card { padding: 18px 14px; flex-direction: row; align-items: center; gap: 12px; }
  .dc3-cat-card__icon { width: 44px; height: 44px; flex-shrink: 0; }
  .dc3-cat-card__name { font-size: 14px; }
}
.dc3-cat-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dc3-cat-card:active { transform: scale(0.96); box-shadow: var(--dc3-shadow-sm); }
.dc3-cat-card__count { display: block; font-size: 11px; color: var(--dc3-ink-soft); margin-top: 2px; font-weight: 600; }

/* ---- ⑨AIおすすめ・施設カード列：モバイルは横スクロール、次カードが少し見える ---- */
@media (max-width: 640px) {
  .dc3-facility-row {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .dc3-facility-row::-webkit-scrollbar { display: none; }
  .dc3-facility-row .dc3-fcard { flex: 0 0 82%; scroll-snap-align: start; }
  .dc3-fcard__photo { aspect-ratio: 4/3; border-radius: 16px 16px 0 0; }
}

/* ---- ⑪料金プラン：モバイル専用カード（ランク別配色・機能の折りたたみ） ---- */
@media (max-width: 640px) {
  .dc3-pricing-grid { grid-template-columns: 1fr; gap: 24px; }
  .dc3-pricing-card { padding: 24px 20px; }
}
.dc3-pricing-card--free { background: var(--dc3-surface); }
.dc3-pricing-card--basic { background: linear-gradient(180deg, #eaf6ff 0%, var(--dc3-white) 45%); border-color: #bfe4fb; }
.dc3-pricing-card--standard { background: linear-gradient(180deg, var(--dc3-brand-blue-light) 0%, var(--dc3-white) 45%); border-color: var(--dc3-brand-blue); }
.dc3-pricing-card--premium-tier { background: linear-gradient(160deg, #ece8fb 0%, var(--dc3-white) 50%); border-color: #6a5acd; }
.dc3-pricing-card--official { background: linear-gradient(160deg, var(--dc3-cat-sponsor-tint) 0%, var(--dc3-white) 50%); border-color: var(--dc3-cat-sponsor); }
.dc3-pricing-card--top { background: linear-gradient(160deg, #1c2430 0%, #2b3346 60%); border-color: #d4af37; color: #fff; }
.dc3-pricing-card--top .dc3-pricing-card__name,
.dc3-pricing-card--top .dc3-pricing-card__price,
.dc3-pricing-card--top .dc3-pricing-card__features li { color: #fff; }
.dc3-pricing-card--top .dc3-pricing-card__note,
.dc3-pricing-card--top .dc3-pricing-card__price span { color: #d4af37; }
.dc3-pricing-card__more { margin: -8px 0 16px; }
.dc3-pricing-card__more summary {
  color: var(--dc3-brand-blue); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none;
}
.dc3-pricing-card__more summary::-webkit-details-marker { display: none; }
.dc3-pricing-card__more summary::after { content: " ▾"; }
.dc3-pricing-card__more[open] summary::after { content: " ▴"; }
.dc3-pricing-card__actions { display: flex; gap: 8px; }
.dc3-pricing-card__actions .dc3-btn { flex: 1; padding-left: 10px; padding-right: 10px; font-size: 13.5px; }
.dc3-pricing-card--top .dc3-pricing-card__more summary { color: #d4af37; }

/* ---- ⑦よくある質問（FAQ） ---- */
#dc3-op-faq summary { list-style: none; }
#dc3-op-faq summary::-webkit-details-marker { display: none; }
#dc3-op-faq summary::after { content: "＋"; float: right; color: var(--dc3-brand-blue); font-weight: 900; }
#dc3-op-faq details[open] summary::after { content: "－"; }

/* ---- ⑫クラウドファンディング：カード内の重複「近日公開」を隠し、上部1回のみ表示 ---- */
.dc3-cf-card__note--soon { display: none; }
.dc3-cf-card__target { font-size: 11px; color: var(--dc3-ink-soft); margin-top: 4px; line-height: 1.5; }
.dc3-cf-card--supporter { border-top: 3px solid #8a8f98; }
.dc3-cf-card--bronze { border-top: 3px solid #b08d57; }
.dc3-cf-card--silver { border-top: 3px solid #a7adb5; }
.dc3-cf-card--gold { border-top: 3px solid #d4af37; }
.dc3-cf-card--diamond { border-top: 3px solid #7fd8e8; background: linear-gradient(160deg, #eefcff 0%, var(--dc3-white) 55%); }
@media (max-width: 640px) {
  .dc3-cf-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---- ⑮広告カード：統一フォーマット ---- */
.dc3-ad-card {
  display: block; width: 100%; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--dc3-border); position: relative; text-decoration: none; max-height: 120px;
}
.dc3-ad-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc3-ad-card__label {
  position: absolute; top: 8px; left: 8px; background: rgba(0, 0, 0, 0.55); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: 0.05em;
}

/* ---- ⑯背景装飾：CTA・入力欄周辺には出さず、控えめな不透明度に統一 ---- */
.dc3-decor { opacity: 0.05; pointer-events: none; }

/* ---- ⑰TOPページ固定CTA：コンパクトな単一ボタンへ ---- */
.dc3-top-sticky-cta {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: none;
}
.dc3-top-sticky-cta .dc3-btn {
  width: 100%;
  height: 58px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(36, 123, 251, 0.28);
}
@media (max-width: 640px) {
  .dc3-top-sticky-cta { display: block; }
  body.home { padding-bottom: 86px; }
}

/* ---- ⑬お問い合わせフォーム：入力欄・種別選択のモバイル最適化 ---- */
@media (max-width: 640px) {
  .smf-form input[type="text"],
  .smf-form input[type="email"],
  .smf-form input[type="tel"],
  .smf-form select,
  .smf-form textarea {
    min-height: 52px;
    border-radius: 12px !important;
    font-size: 16px;
  }
  .smf-form textarea { min-height: 120px; }
  .smf-form .smf-form-group__title { margin-bottom: 8px; }
  .smf-form button[type="submit"], .smf-form input[type="submit"] {
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
  }
  .grecaptcha-badge { margin: 0 auto; }
}
.dc3-contact-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
.dc3-contact-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 16px 10px; border-radius: 14px; border: 1.5px solid var(--dc3-border); background: var(--dc3-white);
  font-size: 13px; font-weight: 700; color: var(--dc3-ink); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.dc3-contact-type-card.is-selected, .dc3-contact-type-card:active {
  border-color: var(--dc3-brand-blue); background: var(--dc3-brand-blue-light); color: var(--dc3-brand-blue);
}

/* ---- ⑭お気に入り空状態 ---- */
.dc3-fav-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  padding: 56px 24px; max-width: 420px; margin: 0 auto;
}
.dc3-fav-empty__icon {
  width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--dc3-cat-mamacare-tint, #fdedf3); color: var(--dc3-cat-mamacare, #ec6f9b); margin-bottom: 8px;
}
.dc3-fav-empty__title { font-size: 17px; font-weight: 800; color: var(--dc3-ink); margin: 0; }
.dc3-fav-empty__desc { font-size: 14px; color: var(--dc3-ink-soft); line-height: 1.7; margin: 0 0 8px; }

/* ---- 汎用アイコン ---- */
.dc3-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

/* Phase20: 検索条件（feature）チップUI */
.dc3-cond-groups { display: flex; flex-direction: column; gap: 16px; }
.dc3-cond-group--more { display: none; }
.dc3-cond-group--more.is-expanded { display: block; }
.dc3-cond-group__label { font-size: 13px; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 8px; }
.dc3-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.dc3-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--dc3-border, #e6ebf2); background: var(--dc3-white, #fff); color: var(--dc3-ink, #1c2430); font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; user-select: none; }
.dc3-chip input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.dc3-chip__icon { opacity: 0.75; }
.dc3-chip.is-selected { background: var(--dc3-brand-blue, #247bfb); border-color: var(--dc3-brand-blue, #247bfb); color: #fff; }
.dc3-chip.is-selected .dc3-chip__icon { opacity: 1; color: #fff; }
.dc3-chip:active { transform: scale(0.97); }
.dc3-cond-more-btn { display: block; margin: 14px auto 0; padding: 10px 20px; min-height: 40px; border-radius: 999px; border: 1.5px solid var(--dc3-border, #e6ebf2); background: var(--dc3-white, #fff); color: var(--dc3-brand-blue, #247bfb); font-size: 13.5px; font-weight: 800; cursor: pointer; }

/* Phase20: 検索結果カード・施設詳細の対応サービスバッジ */
.dc3-feature-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dc3-feature-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--dc3-surface, #f6f9fd); color: var(--dc3-ink-soft, #5b6472); font-size: 11.5px; font-weight: 700; }
.dc3-feature-badge .dc3-icon { opacity: 0.7; }

/* RC2 施設カード共通テンプレート統一④⑤：キャッチコピー・おすすめ理由プレースホルダー（カード内） */
.dc3-fcard__catchphrase { font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.6; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc3-fcard__reason-placeholder { font-size: 0.68rem; color: var(--dc3-ink-faint, #9aa3b0); margin-top: 6px; }
/* カード内CTA：写真の有無でレイアウトを変えない。flex-basis を明示し縦積み崩れを防ぐ（176e7f6と同じ考え方） */
.dc3-fcard__cta { padding: 0 16px 16px; }
.dc3-fcard__cta .dc3-btn { flex: 1 1 auto; justify-content: center; padding: 10px; font-size: 0.8rem; min-height: auto; }

/* RC2 ライブカメラ機能強化：検索結果カードの専用バッジ（一般タグ.dc3-feature-badgeとは別、主要特徴として強調表示） */
/* 施設表示・AIレコメンド改善■2：視覚的な強調度をさらに上げる（サイズ・色・配置）。単独行でカード最上段に固定表示する */
.dc3-fcard__camera-badge { display: flex; align-items: center; gap: 6px; padding: 8px 14px; margin: 0 0 8px; border-radius: 10px; background: linear-gradient(135deg, #1f9d6e, #17b978); color: #fff; font-size: 13px; font-weight: 900; box-shadow: 0 3px 10px rgba(31, 157, 110, 0.35); order: -1; }

/* RC2 ライブカメラ機能強化：詳細ページ【見える安心】専用カード */
/* 施設表示・AIレコメンド改善■2：より目立つよう境界線・影を強化 */
.dc3-camera-highlight { padding: 20px; border: 2px solid #1f9d6e; background: linear-gradient(135deg, #f0faf5, #ffffff); box-shadow: 0 4px 16px rgba(31, 157, 110, 0.18); }
.dc3-camera-highlight__head { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 900; color: #1f9d6e; margin-bottom: 8px; }
.dc3-camera-highlight__lead { font-size: 0.92rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.8; margin: 0 0 10px; }
.dc3-camera-highlight__list { margin: 0; padding-left: 1.2em; font-size: 0.86rem; color: var(--dc3-ink, #202632); line-height: 1.9; }

/* 施設表示・AIレコメンド改善■1：無料掲載の病児・病後児対応施設のコンパクトカード（写真枠なし） */
.dc3-fcard--sc-compact { display: block; padding: 12px 14px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 12px; text-decoration: none; color: inherit; box-shadow: none; }
.dc3-fcard--sc-compact:hover { transform: none; box-shadow: var(--dc3-shadow-sm, 0 2px 8px rgba(28,36,48,0.08)); }
.dc3-fcard--sc-compact__name { font-weight: 800; font-size: 0.86rem; margin-bottom: 4px; }
.dc3-fcard--sc-compact__row { font-size: 0.74rem; color: var(--dc3-ink-soft, #5b6472); margin-bottom: 2px; }
.dc3-fcard--sc-compact__tags { display: flex; gap: 4px; margin-top: 4px; }

/* 公開前追加修正（2026-07-21）Priority2：無料掲載施設の一覧圧縮カード（写真枠・余白を一切持たない）。
   有料カード(.dc3-fcard__photo等)とは別クラスのため、有料側のスタイルには影響しない。 */
.dc3-fcard--free-compact { display: block; padding: 12px 14px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 12px; text-decoration: none; color: inherit; box-shadow: none; }
.dc3-fcard--free-compact:hover { transform: none; box-shadow: var(--dc3-shadow-sm, 0 2px 8px rgba(28,36,48,0.08)); }
.dc3-fcard--free-compact__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.dc3-fcard--free-compact__name { font-weight: 800; font-size: 0.92rem; line-height: 1.35; }
.dc3-fcard--free-compact__free-badge { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); background: var(--dc3-surface-2, #f2f4f7); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.dc3-fcard--free-compact__row { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin-bottom: 2px; }
.dc3-fcard--free-compact__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dc3-fcard--free-compact__tag { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--dc3-surface-2, #f2f4f7); color: var(--dc3-ink-soft, #5b6472); font-size: 0.66rem; font-weight: 700; }
.dc3-fcard--free-compact__footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--dc3-border, #e6ebf2); }
.dc3-fcard--free-compact__link { font-size: 0.76rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); }
.dc3-fcard--free-compact__upsell { font-size: 0.66rem; color: var(--dc3-accent-orange, #c2410c); font-weight: 700; }
@media (max-width: 640px) {
	.dc3-fcard--free-compact { padding: 10px 12px; }
	.dc3-fcard--free-compact__name { font-size: 0.86rem; }
	.dc3-fcard--free-compact__upsell { display: none; } /* スマホでは1画面の表示件数を優先し、訴求文は省略する */
}

/* RC2 ライブカメラ機能強化：おすすめ理由リストの✓表示形式 */
.dc3-reason-card__list { margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.9rem; font-weight: 700; line-height: 1.9; }
.dc3-reason-card__list li { padding-left: 1.3em; text-indent: -1.3em; }
.dc3-reason-card__list li::before { content: "✓ "; color: #1f9d6e; }
.dc3-detail-feature-grid { display: flex; flex-wrap: wrap; gap: 10px; }
/* 最終ブラッシュアップ②：バッジ視認性向上。既存トークンのみ使用し、独自デザインは作らない。 */
.dc3-detail-feature-item { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 12px; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); font-size: 13.5px; font-weight: 800; border: 1px solid transparent; }
.dc3-detail-feature-item .dc3-icon { opacity: 0.85; }

/* Phase20: ②検索条件エリアの自動折りたたみ（検索実行後はコンパクトな概要バーへ） */
.dc3-search-summary-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; margin-bottom: 14px; border-radius: var(--dc3-radius-md, 22px); background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); font-size: 13.5px; font-weight: 800; }
.dc3-search-summary-bar span { display: inline-flex; align-items: center; gap: 8px; }
.dc3-search-form--collapsed { display: none; }

/* Phase20: ⑤施設種別アコーディオン（details/summaryをdc3トーンへ） */
.dc3-type-accordion summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; padding: 4px 0; }
.dc3-type-accordion summary::-webkit-details-marker { display: none; }
.dc3-type-accordion summary::after { content: '▾'; margin-left: auto; font-size: 13px; color: var(--dc3-ink-soft, #5b6472); transition: transform 0.2s ease; }
.dc3-type-accordion[open] summary::after { transform: rotate(180deg); }
.dc3-type-accordion summary h3 { margin: 0; font-size: 1rem; font-weight: 800; }

/* Phase20: ⑥無料掲載カードのコンパクト表示（写真非表示時は密度を上げる） */
.dc3-fcard--compact { display: flex; align-items: center; }
.dc3-fcard--compact .dc3-fcard__body { padding: 12px 16px; }
.dc3-fcard--compact .dc3-fcard__name { font-size: 0.86rem; margin-bottom: 2px; }
.dc3-fcard--compact .dc3-fcard__meta { font-size: 0.68rem; }

/* Phase21: ⑨ハンバーガーメニューのグループ見出し（design-system.jsが挿入するli要素） */
.c-drawer__menu .dc3-drawer-group-label {
  display: block;
  padding: 14px 20px 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--dc3-ink-soft, #5b6472);
  text-transform: uppercase;
  list-style: none;
}
.c-drawer__menu .dc3-drawer-group-label:first-child { padding-top: 6px; }

/* RC2 緊急サポート強化 第2段階パートA：病児・病後児保育の専用カード（カード・詳細ページ共通、design-system.css側） */
.f1-sick-child-card { border-color: rgba(249, 115, 22, 0.35); background: linear-gradient(135deg, #fff8f1, #fff); padding: 16px; margin-top: 10px; }
.f1-sick-child-card__head { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.95rem; color: #c2410c; margin-bottom: 8px; }
.f1-sick-child-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.f1-sick-child-tag { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: #fff0e6; color: #c2410c; font-size: 0.7rem; font-weight: 800; }
.f1-sick-child-card__row { font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); margin-bottom: 4px; line-height: 1.7; }
.f1-sick-child-card__row strong { color: var(--dc3-ink, #202632); }
.f1-sick-child-card__cta { display: flex; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap; }
.f1-sick-child-card__cta .dc3-btn { flex: 1 1 140px; justify-content: center; }
.f1-sick-child-card__updated { font-size: 0.68rem; color: #9aa3b0; border-top: 1px dashed var(--dc3-border, #e6ebf2); padding-top: 6px; margin: 0; }
.f1-sick-child-card__stale { display: block; color: #c2410c; font-weight: 800; margin-top: 2px; }

/* パートB：もしもの時に備えて（事前登録の備え導線）。赤で煽らず、ロイヤルブルー・白・オレンジで安心感を出す */
.f1-sick-child-prep { border: 1px solid var(--dc3-brand-blue-light, #deeeff); background: linear-gradient(135deg, #f2f7ff, #fff); border-radius: var(--dc3-radius-md, 14px); padding: 16px; margin: 10px 0; }
.f1-sick-child-prep__title { font-weight: 900; font-size: 0.95rem; color: var(--dc3-brand-blue, #1656c9); margin-bottom: 6px; }
.f1-sick-child-prep__body { font-size: 0.85rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.8; margin: 0 0 6px; }
.f1-sick-child-prep__target { font-size: 0.76rem; color: #9aa3b0; margin: 0 0 10px; }
.f1-sick-child-prep__cta { display: flex; gap: 8px; flex-wrap: wrap; }
.f1-sick-child-prep__cta .dc3-btn { flex: 1 1 140px; justify-content: center; }

/* RC2 施設情報品質統一 第3段階：情報完成度スコア・情報鮮度表示（Business Portal・管理画面共通） */
.f1-completion-card { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: var(--dc3-radius-md, 14px); padding: 16px; background: #fff; margin-bottom: 12px; }
.f1-completion-card__head { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
.f1-completion-card__percent { font-weight: 900; font-size: 1.1rem; color: var(--dc3-brand-blue, #1656c9); }
.f1-completion-card__bar { height: 8px; border-radius: 999px; background: var(--dc3-surface, #f6f9fd); margin: 8px 0; overflow: hidden; }
.f1-completion-card__bar-fill { height: 100%; background: var(--dc3-brand-blue, #1656c9); border-radius: 999px; }
.f1-completion-card__missing { font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); margin: 0; line-height: 1.7; }
.f1-freshness-note { font-size: 0.72rem; color: #9aa3b0; margin: 6px 0; line-height: 1.7; }
.f1-freshness-note__stale { display: inline-block; margin-left: 4px; color: #c2410c; font-weight: 800; }

/* 安心・安全情報セクション：警告色の多用を避け、他の安全項目と並列に淡々と表示する（Royal Blue＋白基調） */
.f1-safety-info__lead { font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.7; margin: 0 0 12px; }
.f1-safety-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .f1-safety-info__grid { grid-template-columns: 1fr; } }
.f1-safety-info__item { padding: 12px 14px; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 10px; background: var(--dc3-surface, #f6f9fd); }
.f1-safety-info__label { font-size: 0.72rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); margin-bottom: 4px; }
.f1-safety-info__value { font-size: 0.86rem; color: var(--dc3-ink, #202632); line-height: 1.7; }
.f1-safety-info__sub { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 4px; }

/* Family Support（応援・協賛）Phase1：画面・データ設計。決済は未実装のため準備中バッジを必ず表示する */
.f1-support-section { border-color: var(--dc3-brand-blue-light, #deeeff); }
.f1-support-lead { font-size: 0.85rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.8; margin: 0 0 10px; }
.f1-support-note { font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-support-note--success { color: #1f9d6e; font-weight: 700; }
.f1-support-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.f1-support-amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 480px) { .f1-support-amount-grid { grid-template-columns: repeat(2, 1fr); } }
.f1-support-amount-btn { display: flex; align-items: center; justify-content: center; padding: 12px; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 10px; font-weight: 800; font-size: 0.9rem; cursor: pointer; }
.f1-support-amount-btn input { display: none; }
.f1-support-amount-btn:has(input:checked) { border-color: var(--dc3-brand-blue, #1656c9); background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #1656c9); }
.f1-support-custom-input, .f1-support-select, .f1-support-textarea, .f1-support-text-input { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 8px; padding: 10px; font-size: 0.88rem; font-family: inherit; width: 100%; box-sizing: border-box; }
.f1-support-field-label { font-size: 0.76rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); }

.f1-support-bp-section { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 16px; background: #fff; margin: 12px 0; }

/* Education Commons ブランド組み込み：TOPページ導線セクション（主要CTAより控えめなトーン） */
.dc3-ec-teaser { max-width: 640px; margin: 0 auto; text-align: center; padding: var(--dc3-sp-3, 16px) 0; }
.dc3-ec-teaser__logo { max-width: 160px; margin: 0 auto 16px; }
.dc3-ec-teaser__logo img { width: 100%; height: auto; display: block; }
.dc3-ec-teaser__title { font-size: 1.15rem; font-weight: 800; color: var(--dc3-ink, #202632); margin: 0 0 10px; }
.dc3-ec-teaser__desc { font-size: 0.86rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.9; margin: 0 0 16px; }
.dc3-ec-teaser__roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.dc3-ec-teaser__role { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--dc3-surface, #f6f9fd); color: var(--dc3-ink-soft, #5b6472); font-size: 0.74rem; font-weight: 700; }
@media (max-width: 480px) { .dc3-ec-teaser__logo { max-width: 120px; } .dc3-ec-teaser__title { font-size: 1.02rem; } }