/* Family One 営業デモ版 専用スタイル。dc3デザインシステムのトークンを再利用し、.f1-* プレフィックスで名前空間を分離する。 */

/* ==========================================================================
   Family One Design System — Design Tokens（Sprint3）
   ブランドカラー：Royal Blue（既存 --dc3-brand-blue #247bfb を正式採用、値は変更しない）
   既存ページの見た目を崩さないよう、値は既存 --dc3-* トークンと同じにして
   セマンティックな --f1-* 名で再定義する。以後の新規実装は --f1-* を参照すること。
   ========================================================================== */
:root {
  /* Color Tokens */
  --f1-color-primary: var(--dc3-brand-blue, #247bfb);        /* Primary: Royal Blue */
  --f1-color-primary-tint: var(--dc3-brand-blue-light, #deeeff);
  --f1-color-secondary: #ffffff;                              /* Secondary: White */
  --f1-color-surface: var(--dc3-surface, #f6f9fd);             /* Surface: Light Gray */
  --f1-color-border: var(--dc3-border, #e6ebf2);
  --f1-color-text: var(--dc3-ink, #1c2430);                    /* Text: Dark Gray */
  --f1-color-text-soft: var(--dc3-ink-soft, #5b6472);
  --f1-color-success: var(--dc3-cat-medical, #1f9d6e);         /* Success: Green */
  --f1-color-success-tint: var(--dc3-cat-medical-tint, #e6f7f0);
  --f1-color-warning: #a3760a;                                 /* Warning: Orange */
  --f1-color-warning-tint: var(--dc3-accent-yellow-tint, #fff8e0);
  --f1-color-error: #c94c4c;                                   /* Error: Red */
  --f1-color-error-tint: #fbe9e9;
  --f1-color-premium: #b8892b;                                 /* Premium: Gold（将来用、現時点で使用箇所なし） */
  --f1-color-premium-tint: #f7edd9;

  /* Typography Tokens */
  --f1-font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --f1-fs-h1: clamp(1.6rem, 6vw, 2.2rem);
  --f1-fs-h2: 1.1rem;
  --f1-fs-body: 0.86rem;
  --f1-fs-caption: 0.76rem;
  --f1-fs-button: 0.9rem;
  --f1-fw-heading: 900;
  --f1-fw-bold: 800;
  --f1-fw-regular: 400;
  --f1-lh-heading: 1.4;
  --f1-lh-body: 1.8;
  --f1-ls-heading: -0.01em;

  /* Spacing Tokens（8pxベースに統一） */
  --f1-space-1: 4px;
  --f1-space-2: 8px;
  --f1-space-3: 12px;
  --f1-space-4: 16px;
  --f1-space-5: 20px;
  --f1-space-6: 24px;
  --f1-space-7: 32px;
  --f1-space-8: 40px;

  /* Corner Radius Tokens（カード・ボタン・入力欄・画像すべて共通） */
  --f1-radius-sm: 12px;
  --f1-radius-md: 16px;
  --f1-radius-lg: 18px;
  --f1-radius-full: 999px;

  /* Shadow Tokens（弱め・統一・Apple風の高級感） */
  --f1-shadow-sm: 0 2px 14px rgba(28,36,48,0.06);
  --f1-shadow-md: 0 6px 24px rgba(28,36,48,0.08);

  /* Animation Tokens（自然で控えめな動きに統一、派手な演出は使用しない） */
  --f1-duration-fast: 0.15s;
  --f1-duration-base: 0.2s;
  --f1-duration-slow: 0.3s;
  --f1-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.f1-body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif; background: var(--dc3-white, #fff); color: var(--dc3-ink, #1c2430); }

/* ==========================================================================
   重ね順の基準（2026-08-06）
   ------------------------------------------------------------------------
   ヘッダーのドロップダウンがヒーロー画像の裏に隠れる不具合をきっかけに、
   重ね順を数値の付け合いではなく1本の段階として決め直した。
   新しく重なる要素を足すときは、必ずここのトークンから選ぶこと。
   個別のセレクタへ生の数値を書くと、また同じ問題が起きる。

   【この不具合の本当の原因は z-index ではなかった】
   .f1-header__nav に overflow-x:auto が付いていたため、その中にある
   position:absolute のドロップダウンが nav の枠でクリップされていた。
   overflow によるクリップは z-index をいくら上げても抜けられない。
   したがってヘッダー内でドロップダウンを含む要素には overflow を付けない。
   （下の .f1-header__nav のコメントも参照）
   ========================================================================== */
:root {
  --f1-z-base: 1;          /* 通常のコンテンツ内での前後関係 */
  --f1-z-sticky: 30;       /* ページ内の追従要素（目次・ジャンプナビ等） */
  --f1-z-header: 50;       /* サイトヘッダー */
  --f1-z-header-menu: 60;  /* ヘッダーのドロップダウン（ヘッダーより必ず上） */
  --f1-z-overlay: 200;     /* 画面を覆う暗幕（ドロワー等） */
  --f1-z-drawer: 210;      /* 暗幕の上に乗るドロワー本体 */
  --f1-z-modal: 300;       /* モーダル・ダイアログ */
  --f1-z-toast: 400;       /* トースト・通知 */
}

/* ヘッダーは backdrop-filter を持つため、それだけで重なりの基準面を作る。
   つまりヘッダーの中の要素は、どれだけ z-index を上げてもヘッダーの外へは出られない。
   ページ側の要素が --f1-z-header 以上を持たない限り、ヘッダーは常に前面に来る。 */
.f1-header { position: sticky; top: 0; z-index: var(--f1-z-header, 50); background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--dc3-border, #e6ebf2); padding-top: env(safe-area-inset-top); }
.f1-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
@media (min-width: 641px) {
  /* ロゴを「ブランドの顔」として大きく見せるため、PCヘッダーの余白も合わせて拡張する。 */
  .f1-header__inner { padding: 18px 28px; }
}
.f1-header__logo { font-weight: 900; font-size: 1.1rem; color: var(--dc3-brand-blue, #247bfb); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.f1-header__logo-img { height: 34px; width: auto; display: block; }
.f1-passport-logo { display: block; max-width: 260px; margin: 0 auto 16px; }
.f1-passport-hero { text-align: center; padding: 8px 0 24px; }
/* バッジ調整（2026-08-03）：ロゴの隣で同じ強さの要素として並ぶと目立ちすぎるため、
   サイズ・彩度・位置を一段落とし、あくまで補助ラベルに見えるようにする。 */
.f1-header__badge {
  font-size: 0.54rem; font-weight: 700; letter-spacing: 0.02em;
  background: var(--dc3-surface-muted, #eef0f4); color: #8a8f9c;
  padding: 2px 7px; border-radius: 999px;
  align-self: flex-start; margin-top: -2px; opacity: 0.85;
}
@media (max-width: 480px) {
  .f1-header__badge { font-size: 0.48rem; padding: 1px 6px; }
}

/* ==========================================================================
   共通ブランドロゴ（唯一のマークアップ。全ページ・全箇所で統一利用する）：
   PC（≥641px）→ロゴ②ワードマーク／モバイル（〜640px）→ロゴ①シンボル＋テキスト。
   表示サイズはコンテナ（ヘッダー／ヒーローオーバーレイ／ロゴ帯）ごとに個別指定する。
   ========================================================================== */
.f1-brand-logo { display: inline-flex; align-items: center; }
.f1-brand-logo__wordmark { display: none; }
.f1-brand-logo__wordmark img { display: block; width: auto; }
.f1-brand-logo__symbol { display: inline-flex; align-items: center; gap: 8px; }
.f1-brand-logo__symbol img { display: block; width: auto; border-radius: 6px; }
/* 検索画面 ヘッダーロゴ差替（2026-08-05）：モバイルの「シンボル＋テキスト」表示を
   「Family One」1行だけから「Family One／Passport」の2行組に変更し、幅を広げずに
   正式名称をフルで表示する（実機で「Fアイコンだけのロゴ」に見えていた問題への対応）。 */
.f1-brand-logo__symbol-text { display: flex; flex-direction: column; line-height: 1.15; letter-spacing: 0.01em; }
.f1-brand-logo__symbol-text-line1 { font-weight: 900; white-space: nowrap; }
.f1-brand-logo__symbol-text-line2 { font-weight: 600; opacity: 0.82; font-size: 0.7em; white-space: nowrap; }
@media (min-width: 641px) {
  .f1-brand-logo__wordmark { display: block; }
  .f1-brand-logo__symbol { display: none; }
}
/* ヘッダー内サイズ（2026-08-03再拡大→2026-08-05再調整）：ロゴは装飾ではなくブランドの顔という
   方針のもと、モバイルのシンボル＋2行テキストもさらに見やすいサイズへ拡大する。 */
.f1-header__logo .f1-brand-logo__wordmark img { height: 40px; }
.f1-header__logo .f1-brand-logo__symbol img { height: 42px; }
.f1-header__logo .f1-brand-logo__symbol-text-line1 { font-size: 1.2rem; color: var(--dc3-brand-blue, #247bfb); }
.f1-header__logo .f1-brand-logo__symbol-text-line2 { font-size: 0.8rem; color: var(--dc3-ink, #1c2430); }
/* PCのヘッダーロゴ拡大（2026-08-10）
   ==========================================================================
   ヘッダー左上はFアイコン単体ではなく、横長ロゴ
   「Family One Passport by 保育園connect」（images/brand/logo-wordmark.jpg）を使う。
   参照先は以前から正しかったが、小さく見えていた理由は素材の余白だった。

   実測（GDでインクの範囲を測定）：
     画像全体       1376 x 768
     ロゴ本体       1071 x 250（比率 4.28）／画像内の位置 x152〜1222, y259〜508
     余白           上 33.7% ／ 下 33.7% ／ 左 11.0% ／ 右 11.1%
     本体が占める面積 25.3%

   このため高さ60px指定では、実際に見えるロゴ本体は約83x20pxしかなく、
   ナビゲーションの文字より小さく見えていた。単純に幅を広げると、
   画像の3分の2を占める余白の分だけヘッダーが高くなってしまう。

   そこで **画像ファイルは一切加工せず**、CSSで余白部分だけを隠す。
   枠（.f1-brand-logo__wordmark）をロゴ本体と同じ比率4.28で作り、
   その中で画像を拡大・位置合わせして、本体だけが見えるようにする。
     img幅  128.48%  = 1376 / 1071
     left   -14.19%  = -152 / 1071（枠の幅に対する割合）
     top   -103.60%  = -259 / 250（枠の高さに対する割合）
   これでロゴ本体が枠いっぱいに表示される。1376px幅の素材を200px前後で
   使うため、拡大してもぼやけない。

   結果として、見えるロゴは約2.6倍になり、ヘッダーの高さはむしろ
   わずかに低くなる（60px → 42〜51px）。
   Fアイコン単体（.f1-brand-logo__symbol）は削除していない。
   スマホ幅では従来どおりFアイコン＋2行テキストを使う（省スペース用途）。
   ========================================================================== */
@media (min-width: 641px) {
  .f1-header__logo .f1-brand-logo__wordmark {
    display: block;
    position: relative;
    overflow: hidden;
    width: 180px;
    height: 42px;
  }
  .f1-header__logo .f1-brand-logo__wordmark img {
    position: absolute;
    width: 128.48%;   /* 1376 / 1071 */
    height: auto;
    left: -14.19%;    /* -152 / 1071 */
    top: -103.60%;    /* -259 / 250 */
    max-width: none;  /* 親テーマの img{max-width:100%} に潰されないようにする */
  }
}
@media (min-width: 1024px) {
  .f1-header__logo .f1-brand-logo__wordmark { width: 200px; height: 47px; }
}
@media (min-width: 1440px) {
  .f1-header__logo .f1-brand-logo__wordmark { width: 220px; height: 51px; }
}
/* 検索画面ヘッダー（.f1-nursery-rebrand-header内の.f1-header）：上下左右の余白を
   他のFamily Oneページのヘッダーと完全に揃える（同じ.f1-header__innerクラスを
   使っているため、通常は自動的に統一されるが、将来ページ固有の上書きが増えても
   ここが唯一の基準になるよう明示しておく）。 */
.f1-nursery-rebrand-header .f1-header__inner { padding: 14px 20px; }
@media (min-width: 641px) {
  .f1-nursery-rebrand-header .f1-header__inner { padding: 18px 28px; }
}
.f1-header__back { font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); text-decoration: none; }
/* 【不具合修正 2026-08-06】overflow-x:auto をやめた。
   CSSの仕様上、overflow-x が visible 以外だと overflow-y も auto として扱われる。
   そのためこの nav は上下にもクリップするスクロール枠になっており、
   中にある position:absolute のドロップダウンが nav の下端で切られていた。
   ユーザーには「メニューがヒーロー画像の裏に回って押せない」と見えていた。

   このナビはPC幅（901px以上）でしか出ず、項目数も限られるため横スクロールは不要。
   項目が増えたら折り返す（flex-wrap）ようにして、クリップそのものを無くす。
   ここへ overflow を再び足すと同じ不具合が再発するので注意すること。 */
.f1-header__nav { display: flex; flex-wrap: wrap; gap: 4px; overflow: visible; padding: 0 20px 12px; }

/* ドロップダウンの経路にある要素は絶対にクリップさせない。
   将来ここへ overflow:hidden や横スクロールを足しても、この宣言が後ろにあるため
   メニューが切れることはない。同じ不具合を二度起こさないための保険。 */
.f1-header,
.f1-header__inner,
.f1-header__nav,
.f1-header__dropdown { overflow: visible; }
.f1-header__nav-item { flex-shrink: 0; font-size: 0.82rem; font-weight: 700; padding: 8px 14px; border-radius: 999px; color: var(--dc3-ink-soft, #5b6472); text-decoration: none; background: var(--dc3-surface, #f6f9fd); }
.f1-header__nav-item.is-active { background: var(--dc3-brand-blue, #247bfb); color: #fff; }

.f1-footer { padding: 40px 20px calc(24px + env(safe-area-inset-bottom)); text-align: center; font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); border-top: 1px solid var(--dc3-border, #e6ebf2); margin-top: 48px; }
.f1-footer a { color: var(--dc3-brand-blue, #247bfb); text-decoration: none; font-weight: 700; }

/* LINE統合 Phase1：LIFF内表示は、LINEアプリ自体のヘッダー・戻る操作と二重に
   ならないよう簡略化する（family_one_is_liff_context()、?liff=1判定）。 */
.f1-header--liff { padding-bottom: 0; }
.f1-header--liff .f1-header__inner { justify-content: center; padding: 10px 20px; }
.f1-body--liff { padding-bottom: env(safe-area-inset-bottom); }
.f1-footer--liff { margin-top: 24px; padding: 20px; }

/* Family Dashboard：スマホファースト（1列）、480px以上で2列 */
.f1-dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 480px) { .f1-dashboard-grid { grid-template-columns: 1fr 1fr; } }
.f1-dashboard-card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); box-shadow: var(--dc3-shadow-sm, 0 2px 14px rgba(28,36,48,0.06)); text-decoration: none; color: inherit; min-height: 44px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.f1-dashboard-card:active { transform: scale(0.98); }
.f1-dashboard-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); margin-bottom: 4px; }
.f1-dashboard-card__title { font-size: 0.98rem; font-weight: 800; }
.f1-dashboard-card__desc { font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.6; }

.f1-dev-banner { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 800; color: var(--dc3-cat-sponsor, #c79427); background: var(--dc3-cat-sponsor-tint, #fbf3e2); padding: 6px 14px; border-radius: 999px; margin-bottom: 14px; }

.f1-disclaimer { font-size: 0.74rem; color: var(--dc3-ink-soft, #5b6472); background: var(--dc3-surface, #f6f9fd); border: 1px dashed var(--dc3-border, #e6ebf2); border-radius: 12px; padding: 12px 16px; margin-top: 16px; }

.f1-wrap { max-width: 720px; margin: 0 auto; padding: 24px 20px 40px; }

.f1-hero { position: relative; padding: 32px 0 20px; background: linear-gradient(180deg, var(--dc3-brand-blue-light, #deeeff) 0%, #fff 70%); }
.f1-hero__title { font-size: clamp(1.6rem, 6vw, 2.2rem); font-weight: 900; line-height: 1.4; margin: 8px 0; }
.f1-hero__sub { font-size: 0.95rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.8; margin: 0 0 20px; }

.f1-section { padding: 28px 0; border-bottom: 1px solid var(--dc3-border, #e6ebf2); }
.f1-section__title { font-size: 1.1rem; font-weight: 900; margin: 0 0 6px; }
.f1-section__desc { font-size: 0.84rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 16px; }

.f1-card { background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 16px; padding: 18px; box-shadow: var(--dc3-shadow-sm, 0 2px 14px rgba(28,36,48,0.06)); margin-bottom: 12px; }
.f1-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 480px) { .f1-card-grid { grid-template-columns: 1fr; } }

.f1-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: 14px; font-weight: 800; font-size: 0.9rem; text-decoration: none; border: none; cursor: pointer; }
.f1-btn--primary { background: var(--dc3-brand-blue, #247bfb); color: #fff; }
.f1-btn--ghost { background: #fff; color: var(--dc3-brand-blue, #247bfb); border: 1.5px solid var(--dc3-border, #e6ebf2); }
.f1-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.f1-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f1-list li { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; padding: 12px 14px; background: var(--dc3-surface, #f6f9fd); border-radius: 12px; }

/* ==========================================================================
   「今月やること」強調（2026-08-03）：Family One最大の価値のひとつのため、
   隣接する「あなたへのおすすめ」より視覚的な重みを持たせる（ブランドカラーの
   帯・大きめアイコン円・余白でメリハリを付ける。新しい配色は作らずブランド
   ブルーの濃淡のみで構成する）。
   ========================================================================== */
.f1-monthly-tasks {
  background: linear-gradient(180deg, var(--dc3-brand-blue-light, #deeeff) 0%, rgba(222,238,255,0.25) 100%);
  border: 1px solid var(--dc3-brand-blue-light, #deeeff);
  border-radius: var(--f1-radius-lg, 18px);
  padding: 24px 20px;
  margin: 8px 0;
}
.f1-monthly-tasks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f1-monthly-tasks__item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: var(--f1-radius-md, 14px);
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(28,36,48,0.05);
}
.f1-monthly-tasks__icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb);
}
.f1-monthly-tasks__item.is-done .f1-monthly-tasks__icon { background: var(--f1-color-success-tint, #e6f7f0); color: var(--f1-color-success, #1f9d6e); }
.f1-monthly-tasks__title { flex: 1; font-size: 0.92rem; font-weight: 700; }
.f1-monthly-tasks__due { flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #1656c9); }
.f1-monthly-tasks__item.is-done .f1-monthly-tasks__due { background: var(--f1-color-success-tint, #e6f7f0); color: var(--f1-color-success, #1f9d6e); }
.f1-home-today-card__link { margin-left: auto; flex-shrink: 0; font-size: 0.78rem; font-weight: 700; color: var(--dc3-brand-blue, #247bfb); text-decoration: none; white-space: nowrap; }

/* 緊急修正①：住所検索コンポーネント（共通・全画面で同一デザイン） */
.f1-address-selector { margin-bottom: 4px; }
.f1-address-selector__label { display: block; margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; }
.f1-address-selector__scope { margin: 0 0 8px; font-size: 0.74rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-address-selector__selected { margin-bottom: 8px; padding: 8px 12px; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); border-radius: 10px; font-size: 0.82rem; font-weight: 700; }
.f1-address-selector__selected.is-hidden { display: none; }
/* iOSの自動ズームを防止するため、住所検索コンポーネント内の入力・選択欄は16px以上を維持する */
.f1-address-selector input[type="text"].f1-wizard-input,
.f1-address-selector select.f1-wizard-input { font-size: 16px; }

/* RC2：営業モード価値訴求メッセージ（機能ではなく導入後の変化を伝える） */
.f1-sales-value-props { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (max-width: 640px) { .f1-sales-value-props { grid-template-columns: 1fr; } }
.f1-sales-value-props li { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 700; padding: 10px 12px; background: var(--f1-color-success-tint, #e6f7f0); color: var(--f1-color-success, #1f9d6e); border-radius: 12px; }

/* RC2：営業モード3分フロー（9ステップ）の案内ナビ */
.f1-sales-flow { margin-top: 14px; }
.f1-sales-flow__label { margin: 0 0 10px; font-size: 0.76rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); }
.f1-sales-flow__steps { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.f1-sales-flow__step { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--dc3-surface, #f6f9fd); color: var(--dc3-ink, #1c2430); text-decoration: none; border: 1.5px solid transparent; }
.f1-sales-flow__step:hover { border-color: var(--dc3-brand-blue, #247bfb); }
.f1-sales-flow__step.is-active { background: var(--dc3-brand-blue, #247bfb); color: #fff; }
.f1-sales-flow__num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,0.08); font-size: 0.66rem; }
.f1-sales-flow__step.is-active .f1-sales-flow__num { background: rgba(255,255,255,0.25); }
.f1-sales-flow__arrow { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); }

.f1-badge { display: inline-block; font-size: 0.68rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); margin-right: 4px; }
.f1-badge--warning { background: var(--f1-color-warning-tint, #fff8e0); color: var(--f1-color-warning, #a3760a); }
.f1-badge--success { background: var(--f1-color-success-tint, #e6f7f0); color: var(--f1-color-success, #1f9d6e); }
.f1-badge--accent { background: #fdeee0; color: #b9560f; }

/* 行政手続き改善（2026-08-04）：児童クラブ出し分け・パプリカBASE専用メニュー・おすすめ施設カード */
.f1-story-step__details[open] { padding-bottom: 4px; }
.f1-papurika-flow { margin: 8px 0 0; padding-left: 20px; font-size: 0.8rem; line-height: 1.8; color: var(--dc3-ink, #1c2430); }

.f1-papurika-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 16px; }
.f1-papurika-menu__item { display: flex; align-items: center; gap: 8px; padding: 14px 12px; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; background: #fff; text-decoration: none; color: var(--dc3-ink, #1c2430); font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: box-shadow 0.15s ease; }
.f1-papurika-menu__item:hover { box-shadow: var(--dc3-shadow-sm, 0 2px 14px rgba(28,36,48,0.06)); }
.f1-papurika-menu__item--details { flex-direction: column; align-items: stretch; }
.f1-papurika-menu__item--details summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.f1-papurika-menu__item--details summary::-webkit-details-marker { display: none; }
.f1-papurika-menu__item--details[open] { grid-column: 1 / -1; }
.f1-papurika-menu__body { margin-top: 12px; }
.f1-papurika-menu__body textarea { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 10px; padding: 8px 10px; font-size: 0.82rem; font-family: inherit; resize: vertical; }

.f1-papurika-announce { padding: 8px 0; border-top: 1px solid var(--dc3-border, #e6ebf2); }
.f1-papurika-announce:first-child { border-top: none; padding-top: 0; }
.f1-papurika-announce__date { font-size: 0.68rem; color: var(--dc3-ink-soft, #5b6472); margin: 0; }
.f1-papurika-announce__title { font-weight: 800; font-size: 0.82rem; margin: 2px 0; }
.f1-papurika-announce__body { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin: 0; line-height: 1.6; }

.f1-papurika-recommend { border: 1.5px solid #f3c294; background: linear-gradient(180deg, #fffaf3 0%, #ffffff 60%); }
.f1-papurika-recommend__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.f1-papurika-recommend__name { font-size: 1.1rem; font-weight: 800; margin: 0 0 2px; }
.f1-papurika-recommend__lead { font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 12px; }
.f1-papurika-recommend__features { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
.f1-papurika-recommend__features li { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: var(--dc3-ink, #1c2430); }
@media (max-width: 420px) { .f1-papurika-recommend__features { grid-template-columns: 1fr; } }

/* 未来の夢：不具合修正・UI改善（2026-08-04） */
.f1-dream-section__title { margin: 0 0 10px; font-size: 0.92rem; font-weight: 800; }
.f1-dream-empty-hint { font-size: 0.82rem; line-height: 1.7; color: var(--dc3-ink-soft, #5b6472); background: var(--dc3-surface, #f6f9fd); border-radius: 12px; padding: 14px 16px; margin: 0 0 10px; }
.f1-dream-card { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: #fff; }
.f1-dream-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.f1-dream-card__label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); }
.f1-dream-card__meta { margin: 2px 0; font-size: 0.8rem; color: var(--dc3-ink, #1c2430); }
.f1-dream-card__date { margin: 6px 0 10px; font-size: 0.74rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-dream-card__actions { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.f1-dream-field-label { display: block; margin: 12px 0 6px; font-size: 0.76rem; font-weight: 700; }
.f1-dream-field-label:first-child { margin-top: 0; }
.f1-dream-suggest { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--dc3-border, #e6ebf2); }
.f1-dream-suggest__title { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); }
.f1-dream-roadmap__steps { display: flex; flex-direction: column; gap: 4px; }
.f1-dream-roadmap__step { display: flex; align-items: baseline; gap: 8px; font-size: 0.8rem; }
.f1-dream-roadmap__stage { font-weight: 800; min-width: 3.5em; }
.f1-dream-roadmap__desc { color: var(--dc3-ink-soft, #5b6472); }
.f1-dream-roadmap__arrow { color: var(--dc3-border, #e6ebf2); font-size: 0.8rem; padding-left: 1.7em; }

.f1-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.f1-kpi { background: var(--dc3-surface, #f6f9fd); border-radius: 14px; padding: 16px; text-align: center; }

/* Business Portal MVP：施設編集フォーム等の2カラム項目グリッド（375px等の狭い画面では1カラムに折り返す） */
.f1-biz-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .f1-biz-form-grid-2 { grid-template-columns: 1fr; } }
.f1-kpi__value { font-size: 1.6rem; font-weight: 900; color: var(--dc3-brand-blue, #247bfb); }
.f1-kpi__label { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 4px; }

/* 不具合修正（2026-07-30）：Leafletは内部の地図タイル・コントロール（拡大縮小ボタン等）に
   z-index:400〜1000程度を自前で設定するため、地図コンテナ自体がスタッキングコンテキストを
   持たないと、サイドメニュー（z-index:50〜70）やモーダル・ダイアログ（z-index:90）より
   前面に表示されてしまう。#f1-map-canvasにposition:relative + 低いz-indexを与えて
   スタッキングコンテキストを確立し、内部のLeaflet要素をこのコンテナ内に封じ込める
   （Leaflet側のz-index値自体は変更しない。CSSの入れ子スタッキングコンテキストで解決する）。 */
#f1-map-canvas { width: 100%; height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid var(--dc3-border, #e6ebf2); position: relative; z-index: 1; }
#f1-map-canvas .leaflet-top,
#f1-map-canvas .leaflet-bottom { z-index: 5; }

.f1-timeline { position: relative; padding-left: 24px; }
.f1-timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--dc3-border, #e6ebf2); }
.f1-timeline-item { position: relative; margin-bottom: 18px; }
.f1-timeline-item::before { content: ""; position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--dc3-brand-blue, #247bfb); }
.f1-timeline-item__date { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); font-weight: 700; }
.f1-timeline-item__title { font-size: 0.92rem; font-weight: 800; margin-top: 2px; }

/* ==========================================================================
   Family Dashboard 2.0（Sprint2）追加スタイル
   既存クラスは一切変更せず、すべて新規クラスとして追加する。
   ========================================================================== */

/* ダッシュボード専用ラッパー：固定ボトムナビの分だけ下部余白を確保する */
.f1-wrap--dashboard { padding-bottom: 104px; }

/* Family Insight カード */
.f1-insight { background: linear-gradient(135deg, var(--dc3-brand-blue, #247bfb) 0%, #1a5fd6 100%); color: #fff; border-radius: 18px; padding: 20px; margin-bottom: 12px; }
.f1-insight__tag { display: inline-block; font-size: 0.68rem; font-weight: 800; background: rgba(255,255,255,0.22); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.f1-insight__headline { font-size: 1.02rem; font-weight: 900; line-height: 1.6; margin: 0 0 6px; }
.f1-insight__detail { font-size: 0.82rem; opacity: 0.92; line-height: 1.7; margin: 0; }

/* Morning Brief / 今日のタスク：アイコン付きリスト */
.f1-brief-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f1-brief-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; background: var(--dc3-surface, #f6f9fd); border-radius: 14px; }
.f1-brief-item__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); }
.f1-brief-item__title { font-size: 0.86rem; font-weight: 800; line-height: 1.5; }
.f1-brief-item__desc { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; }

.f1-today-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; margin-bottom: 10px; }
.f1-today-item__time { flex-shrink: 0; font-size: 0.8rem; font-weight: 900; color: var(--dc3-brand-blue, #247bfb); min-width: 48px; }
.f1-today-item__title { font-size: 0.86rem; font-weight: 700; }

/* 今月の準備状況：進捗バー（「家族スコア」という表現は使用しない） */
.f1-progress-card { background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 16px; padding: 18px; margin-bottom: 12px; }
.f1-progress-card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.f1-progress-card__label { font-size: 0.9rem; font-weight: 800; }
.f1-progress-card__value { font-size: 1.3rem; font-weight: 900; color: var(--dc3-brand-blue, #247bfb); }
.f1-progress-track { width: 100%; height: 10px; border-radius: 999px; background: var(--dc3-surface, #f6f9fd); overflow: hidden; }
.f1-progress-fill { height: 100%; border-radius: 999px; background: var(--dc3-brand-blue, #247bfb); transition: width 0.3s ease; }
.f1-progress-card__note { font-size: 0.74rem; color: var(--dc3-ink-soft, #5b6472); margin: 10px 0 0; line-height: 1.6; }

/* Family Passport「家族カルテ」化：完成度ウィジェット・未登録項目カード */
.f1-passport-completion { padding: 18px; }
.f1-passport-completion__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.f1-passport-completion__label { font-size: 0.9rem; font-weight: 800; }
.f1-passport-completion__percent { font-size: 1.6rem; font-weight: 900; color: var(--dc3-brand-blue, #247bfb); font-variant-numeric: tabular-nums; }
.f1-passport-completion__note { font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); margin: 12px 0 8px; }
.f1-passport-missing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f1-passport-missing-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--dc3-surface, #f6f9fd); border-radius: 10px; padding: 10px 12px;
}
.f1-passport-missing-list__label { font-size: 0.82rem; font-weight: 700; }
.f1-passport-missing-list__status { display: block; font-size: 0.7rem; color: var(--dc3-ink-soft, #5b6472); font-weight: 400; margin-top: 2px; }

/* 子どもカード：登録済み情報は閲覧ビュー、「編集する」で初めて入力欄を開く */
.f1-child-card__checklist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.f1-child-card__checklist li { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; }
.f1-child-card__checklist li svg { color: var(--f1-color-success, #1f9d6e); flex-shrink: 0; }
.f1-child-card__updated { font-size: 0.7rem; color: var(--dc3-ink-soft, #5b6472); margin: 10px 0 0; }
.f1-passport-edit-toggle { margin-top: 12px; }
.f1-passport-edit-toggle > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 700; color: var(--dc3-brand-blue, #247bfb);
  padding: 6px 14px; border: 1px solid var(--dc3-brand-blue, #247bfb); border-radius: 999px;
}
.f1-passport-edit-toggle > summary::-webkit-details-marker { display: none; }
.f1-passport-edit-toggle[open] > summary { background: var(--dc3-brand-blue, #247bfb); color: #fff; }
.f1-passport-edit-toggle__body { margin-top: 14px; }

/* Level2「家族カルテ」閲覧サマリー */
.f1-passport-summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f1-passport-summary-list li { display: flex; align-items: baseline; gap: 10px; font-size: 0.84rem; }
.f1-passport-summary-list li svg { flex-shrink: 0; margin-top: 2px; }
.f1-passport-summary-list .is-filled svg { color: var(--f1-color-success, #1f9d6e); }
.f1-passport-summary-list .is-empty svg { color: var(--dc3-ink-soft, #b9c0cb); }
.f1-passport-summary-list__label { font-weight: 700; min-width: 92px; flex-shrink: 0; }
.f1-passport-summary-list__value { color: var(--dc3-ink-soft, #5b6472); }
.f1-passport-summary-list .is-empty .f1-passport-summary-list__value { color: var(--dc3-ink-soft, #b9c0cb); }

/* Family Member Cards：横スクロール */
.f1-member-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; }
.f1-member-scroll::-webkit-scrollbar { display: none; }
.f1-member-card { flex-shrink: 0; width: 148px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 16px; padding: 16px; text-align: center; box-shadow: var(--dc3-shadow-sm, 0 2px 14px rgba(28,36,48,0.06)); }
.f1-member-card__icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); margin: 0 auto 10px; }
.f1-member-card__role { font-size: 0.86rem; font-weight: 900; }
.f1-member-card__note { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 6px; line-height: 1.6; }

/* 利用率向上UI/UX改修：主要機能ショートカット（横スクロール、次のカードが見えるサイズ） */
.f1-shortcut-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity; }
.f1-shortcut-scroll::-webkit-scrollbar { height: 5px; }
.f1-shortcut-scroll::-webkit-scrollbar-thumb { background: var(--dc3-border, #e6ebf2); border-radius: 999px; }
.f1-shortcut-card { position: relative; flex: 0 0 auto; width: 42vw; max-width: 168px; min-width: 128px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 16px; padding: 14px; text-decoration: none; color: inherit; box-shadow: var(--dc3-shadow-sm, 0 2px 14px rgba(28,36,48,0.06)); min-height: 44px; }
.f1-shortcut-card__icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); }
.f1-shortcut-card__title { font-size: 0.84rem; font-weight: 800; line-height: 1.4; }
.f1-shortcut-card__benefit { font-size: 0.68rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.5; }
.f1-shortcut-card__new { position: absolute; top: 10px; right: 10px; font-size: 0.6rem; font-weight: 900; color: #fff; background: #e0524a; padding: 2px 7px; border-radius: 999px; }
/* 第2フェーズ③：バッジ種別ごとの配色（新規トークンは作らず既存のカテゴリカラーを流用） */
.f1-shortcut-card__new--time_saving { background: var(--f1-color-success, #1f9d6e); }
.f1-shortcut-card__new--popular { background: #a3760a; }
/* 第2フェーズ②：右下に統一CTA「▶使ってみる」を表示する */
.f1-shortcut-card__cta { margin-top: auto; align-self: flex-end; font-size: 0.72rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); }

/* 利用率向上UI/UX改修：おすすめ機能カード */
.f1-recommend-action-card { border-color: var(--f1-color-primary, #247bfb); }

/* 利用率向上UI/UX改修：ジャンプナビ（画面内目次） */
.f1-jump-nav { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px; scrollbar-width: none; position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); margin: 0 -16px 8px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--dc3-border, #e6ebf2); }
.f1-jump-nav::-webkit-scrollbar { display: none; }
.f1-jump-nav__item { flex-shrink: 0; font-size: 0.76rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: var(--dc3-surface, #f6f9fd); color: var(--dc3-ink-soft, #5b6472); text-decoration: none; }
.f1-jump-nav__item:hover { background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); }

/* 利用率向上UI/UX改修：クイックスタート進捗 */
.f1-quickstart-card { border-color: var(--f1-color-primary, #247bfb); }
.f1-quickstart-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.f1-quickstart-step { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; padding: 10px 12px; border-radius: 12px; background: var(--dc3-surface, #f6f9fd); text-decoration: none; color: inherit; }
.f1-quickstart-step.is-done { color: var(--dc3-ink-soft, #5b6472); text-decoration: line-through; opacity: 0.7; }
.f1-quickstart-step__check { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; border: 2px solid var(--dc3-border, #e6ebf2); }
.f1-quickstart-step.is-done .f1-quickstart-step__check { background: var(--f1-color-success, #1f9d6e); border-color: var(--f1-color-success, #1f9d6e); color: #fff; }

/* 利用率向上UI/UX改修：Family Oneでできること（全機能一覧） */
.f1-feature-category { margin-bottom: 20px; }
.f1-feature-category__title { font-size: 0.84rem; font-weight: 900; margin-bottom: 10px; color: var(--f1-color-primary, #247bfb); }
.f1-feature-list-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--dc3-border, #e6ebf2); text-decoration: none; color: inherit; }
.f1-feature-list-item__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--dc3-surface, #f6f9fd); color: var(--dc3-brand-blue, #247bfb); flex-shrink: 0; }
.f1-feature-list-item__title { font-size: 0.86rem; font-weight: 800; }
.f1-feature-list-item__desc { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; line-height: 1.5; }

/* Family Timeline（Dashboard簡易版）：過去・現在・次・将来の4状態 */
.f1-mini-timeline { display: flex; flex-direction: column; gap: 8px; }
.f1-mini-timeline-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--dc3-surface, #f6f9fd); }
.f1-mini-timeline-item__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--dc3-border, #e6ebf2); }
.f1-mini-timeline-item.is-current { background: var(--dc3-brand-blue-light, #deeeff); }
.f1-mini-timeline-item.is-current .f1-mini-timeline-item__dot { background: var(--dc3-brand-blue, #247bfb); }
.f1-mini-timeline-item.is-past .f1-mini-timeline-item__dot { background: var(--dc3-cat-medical, #1f9d6e); }
.f1-mini-timeline-item__date { font-size: 0.7rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); min-width: 76px; flex-shrink: 0; }
.f1-mini-timeline-item__label { font-size: 0.84rem; font-weight: 700; }

/* 生活導線ミニ表示 */
.f1-route-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.84rem; font-weight: 700; }
.f1-route-row .f1-route-step { display: inline-flex; align-items: center; gap: 6px; }
.f1-route-row .f1-route-connector { color: var(--dc3-ink-soft, #5b6472); font-weight: 600; font-size: 0.78rem; }

/* 行政手続き進捗ステータスバッジ */
.f1-proc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--dc3-surface, #f6f9fd); border-radius: 12px; margin-bottom: 8px; }
.f1-proc-row__title { font-size: 0.84rem; font-weight: 700; }
.f1-proc-status { flex-shrink: 0; font-size: 0.66rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.f1-proc-status--done { background: var(--dc3-cat-medical-tint, #e6f7f0); color: var(--dc3-cat-medical, #1f9d6e); }
.f1-proc-status--in_progress { background: var(--dc3-accent-yellow-tint, #fff8e0); color: #a3760a; }
.f1-proc-status--todo { background: var(--dc3-surface, #f6f9fd); color: var(--dc3-ink-soft, #5b6472); border: 1px solid var(--dc3-border, #e6ebf2); }

/* Progressive Profiling 可視化 */
.f1-level-row { margin-bottom: 14px; }
.f1-level-row:last-child { margin-bottom: 0; }
.f1-level-row__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.f1-level-row__label { font-size: 0.8rem; font-weight: 700; }
.f1-level-row__percent { font-size: 0.78rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); }
.f1-level-row.is-future .f1-level-row__percent { color: var(--dc3-ink-soft, #5b6472); }
.f1-level-row .f1-progress-track { height: 8px; }
.f1-level-row.is-future .f1-progress-fill { background: var(--dc3-border, #e6ebf2); }

/* 将来構想・プライバシー安心カード */
.f1-future-note { display: flex; align-items: flex-start; gap: 10px; background: var(--dc3-cat-sponsor-tint, #fbf3e2); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; font-size: 0.78rem; color: #6b5115; line-height: 1.7; }
.f1-privacy-card { display: flex; gap: 12px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 16px; padding: 18px; }
.f1-privacy-card__icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); }
.f1-privacy-card__body { font-size: 0.8rem; line-height: 1.8; color: var(--dc3-ink-soft, #5b6472); }
.f1-privacy-card__body strong { color: var(--dc3-ink, #1c2430); }

/* 施設検索・Passport・Sponsorへの導線カード（大きめタップ領域） */
.f1-linkout-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 16px; padding: 16px 18px; text-decoration: none; color: inherit; box-shadow: var(--dc3-shadow-sm, 0 2px 14px rgba(28,36,48,0.06)); margin-bottom: 12px; min-height: 44px; }
.f1-linkout-card__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); }
.f1-linkout-card__title { font-size: 0.94rem; font-weight: 800; }
.f1-linkout-card__desc { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; line-height: 1.6; }
.f1-linkout-card__arrow { margin-left: auto; flex-shrink: 0; color: var(--dc3-ink-soft, #5b6472); }

/* 固定ボトムナビ（Dashboard専用。他ページの.f1-bodyには影響しない） */
.f1-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: rgba(255,255,255,0.98); backdrop-filter: blur(6px); border-top: 1px solid var(--dc3-border, #e6ebf2); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.f1-bottom-nav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; min-height: 44px; text-decoration: none; color: var(--dc3-ink-soft, #5b6472); font-size: 0.62rem; font-weight: 700; border-radius: 12px; }
.f1-bottom-nav__item.is-active { color: var(--dc3-brand-blue, #247bfb); background: var(--dc3-brand-blue-light, #deeeff); }

/* ==========================================================================
   Family One Component Library（Sprint3）
   既存クラスはそのまま維持し、未実装だったコンポーネントのみ新規追加する。
   すべて --f1-* Design Tokenを参照し、統一されたRadius/Shadow/Animationに揃える。
   ========================================================================== */

/* ボタン追加バリエーション（Primary/Outlineは既存 .f1-btn--primary / .f1-btn--ghost を流用） */
.f1-btn { transition: transform var(--f1-duration-fast) var(--f1-ease), box-shadow var(--f1-duration-base) var(--f1-ease); }
.f1-btn:active { transform: scale(0.97); }
.f1-btn--secondary { background: var(--f1-color-primary-tint); color: var(--f1-color-primary); }
.f1-btn--outline { background: #fff; color: var(--f1-color-primary); border: 1.5px solid var(--f1-color-border); }

/* Tag：Badgeより控えめなニュートラル表示（絞り込み条件・属性表示用） */
.f1-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; padding: 4px 12px; border-radius: var(--f1-radius-full); background: var(--f1-color-surface); color: var(--f1-color-text-soft); border: 1px solid var(--f1-color-border); }

/* Category Chip：選択可能なピル（地図カテゴリ・Demo Mode選択などに使用） */
.f1-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 8px 14px; border-radius: var(--f1-radius-full); background: var(--f1-color-surface); color: var(--f1-color-text-soft); border: 1px solid var(--f1-color-border); text-decoration: none; min-height: 36px; transition: background var(--f1-duration-base) var(--f1-ease), color var(--f1-duration-base) var(--f1-ease); }
.f1-chip.is-active { background: var(--f1-color-primary); color: #fff; border-color: var(--f1-color-primary); }
.f1-filter-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Empty State */
.f1-empty-state { text-align: center; padding: var(--f1-space-7) var(--f1-space-4); color: var(--f1-color-text-soft); }
.f1-empty-state__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--f1-color-surface); color: var(--f1-color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--f1-space-3); }
.f1-empty-state__title { font-size: 0.94rem; font-weight: 800; color: var(--f1-color-text); margin-bottom: 4px; }
.f1-empty-state__desc { font-size: 0.8rem; line-height: 1.7; }

/* Loading */
.f1-loading { display: inline-flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--f1-color-text-soft); }
.f1-loading__spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--f1-color-primary-tint); border-top-color: var(--f1-color-primary); animation: f1-spin 0.8s linear infinite; }
@keyframes f1-spin { to { transform: rotate(360deg); } }

/* Modal / Dialog（共通の土台、呼び出し側でトリガーを実装する想定） */
.f1-modal-overlay, .f1-dialog-overlay { position: fixed; inset: 0; background: rgba(20,26,36,0.44); display: none; align-items: flex-end; justify-content: center; z-index: var(--f1-z-modal, 300); }
.f1-modal-overlay.is-open, .f1-dialog-overlay.is-open { display: flex; }
.f1-modal { width: 100%; max-width: 480px; background: #fff; border-radius: var(--f1-radius-lg) var(--f1-radius-lg) 0 0; padding: var(--f1-space-6) var(--f1-space-5) calc(var(--f1-space-6) + env(safe-area-inset-bottom)); box-shadow: var(--f1-shadow-md); animation: f1-slide-up var(--f1-duration-slow) var(--f1-ease); }
.f1-dialog { width: calc(100% - 40px); max-width: 380px; margin: auto; background: #fff; border-radius: var(--f1-radius-md); padding: var(--f1-space-5); box-shadow: var(--f1-shadow-md); animation: f1-fade-in var(--f1-duration-base) var(--f1-ease); }
@keyframes f1-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes f1-fade-in { from { opacity: 0; } to { opacity: 1; } }
.f1-modal__title, .f1-dialog__title { font-size: 1rem; font-weight: 900; margin-bottom: var(--f1-space-3); }
.f1-dialog__actions { display: flex; gap: 10px; margin-top: var(--f1-space-4); }

/* Toast */
.f1-toast-stack { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--f1-z-toast, 400); display: flex; flex-direction: column; gap: 8px; width: calc(100% - 40px); max-width: 420px; pointer-events: none; }
.f1-toast { background: var(--f1-color-text); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 12px 16px; border-radius: var(--f1-radius-sm); box-shadow: var(--f1-shadow-md); text-align: center; animation: f1-fade-in var(--f1-duration-base) var(--f1-ease); }

/* Search Box */
.f1-search-box { display: flex; align-items: center; gap: 10px; background: var(--f1-color-surface); border: 1px solid var(--f1-color-border); border-radius: var(--f1-radius-full); padding: 12px 18px; min-height: 44px; }
.f1-search-box input { flex: 1; border: none; background: none; font-size: 0.88rem; color: var(--f1-color-text); outline: none; }
.f1-search-box__icon { flex-shrink: 0; color: var(--f1-color-text-soft); display: flex; }

/* Floating Action Button */
.f1-fab { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 70; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border-radius: var(--f1-radius-full); background: var(--f1-color-primary); color: #fff; font-size: 0.8rem; font-weight: 800; border: none; box-shadow: var(--f1-shadow-md); text-decoration: none; cursor: pointer; transition: transform var(--f1-duration-fast) var(--f1-ease); }
.f1-fab:active { transform: scale(0.96); }

/* AI Card / Government Card / Event Card / Sponsor Card：既存 .f1-card を土台に統一装飾を追加 */
.f1-ai-card, .f1-event-card, .f1-sponsor-card { background: #fff; border: 1px solid var(--f1-color-border); border-radius: var(--f1-radius-md); padding: var(--f1-space-4); box-shadow: var(--f1-shadow-sm); }
.f1-ai-card__reason { font-size: 0.8rem; color: var(--f1-color-text-soft); margin-top: var(--f1-space-2); line-height: var(--f1-lh-body); }
.f1-event-card__title { font-weight: var(--f1-fw-bold); font-size: 0.9rem; }
.f1-event-card__meta { font-size: 0.76rem; color: var(--f1-color-text-soft); margin-top: 4px; }
.f1-sponsor-card__name { font-weight: var(--f1-fw-bold); font-size: 0.9rem; margin-top: 8px; }

/* Demo Mode（Sprint3新機能）：ライフステージ切替ピッカー */
.f1-demo-fab { bottom: calc(76px + env(safe-area-inset-bottom)); background: var(--f1-color-text); }
.f1-demo-sheet-overlay { position: fixed; inset: 0; background: rgba(20,26,36,0.44); z-index: var(--f1-z-modal, 300); display: none; align-items: flex-end; justify-content: center; }
.f1-demo-sheet-overlay.is-open { display: flex; }
.f1-demo-sheet { width: 100%; max-width: 480px; max-height: 78vh; overflow-y: auto; background: #fff; border-radius: var(--f1-radius-lg) var(--f1-radius-lg) 0 0; padding: var(--f1-space-5) var(--f1-space-5) calc(var(--f1-space-6) + env(safe-area-inset-bottom)); box-shadow: var(--f1-shadow-md); animation: f1-slide-up var(--f1-duration-slow) var(--f1-ease); }
.f1-demo-sheet__title { font-size: 1rem; font-weight: 900; margin-bottom: 4px; }
.f1-demo-sheet__desc { font-size: 0.78rem; color: var(--f1-color-text-soft); margin-bottom: var(--f1-space-4); line-height: 1.7; }
.f1-demo-stage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 380px) { .f1-demo-stage-grid { grid-template-columns: repeat(2, 1fr); } }
.f1-demo-stage-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: var(--f1-radius-sm); border: 1.5px solid var(--f1-color-border); background: #fff; color: var(--f1-color-text-soft); font-size: 0.7rem; font-weight: 700; cursor: pointer; min-height: 44px; transition: border-color var(--f1-duration-base) var(--f1-ease), color var(--f1-duration-base) var(--f1-ease); }
.f1-demo-stage-btn.is-active { border-color: var(--f1-color-primary); color: var(--f1-color-primary); background: var(--f1-color-primary-tint); }
.f1-demo-badge { position: fixed; left: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 65; font-size: 0.66rem; font-weight: 800; background: rgba(28,36,48,0.85); color: #fff; padding: 6px 12px; border-radius: var(--f1-radius-full); pointer-events: none; }
[data-f1-stage] { display: none; }
[data-f1-stage].is-current-stage { display: block; }

/* ===================== Sprint MVP ===================== */

/* Demo Mode ON/OFF スイッチ（Demo Mode ON時のみライフステージ切替UIを表示） */
.f1-demo-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--f1-color-border); margin-bottom: var(--f1-space-4); }
.f1-demo-toggle-row__label { font-size: 0.86rem; font-weight: 800; }
.f1-demo-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.f1-demo-switch input { opacity: 0; width: 0; height: 0; }
.f1-demo-switch__track { position: absolute; inset: 0; background: var(--f1-color-border); border-radius: var(--f1-radius-full); transition: background var(--f1-duration-base) var(--f1-ease); cursor: pointer; }
.f1-demo-switch__track::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--f1-duration-base) var(--f1-ease); box-shadow: var(--f1-shadow-sm); }
.f1-demo-switch input:checked + .f1-demo-switch__track { background: var(--f1-color-primary); }
.f1-demo-switch input:checked + .f1-demo-switch__track::before { transform: translateX(20px); }
#f1-demo-mode-grid.is-hidden { display: none; }

/* Demo Mode OFF時はライフステージ変動ブロックを隠し、実データ/デフォルト表示を出す。
   デフォルト（Demo Mode未起動）は常に .f1-real-data を表示、[data-f1-stage] は
   従来通り is-current-stage の1件のみが表示される（未登録時の既定表示として機能する）。 */
.f1-demo-stage-wrap { display: none; }
body.f1-demo-mode-on .f1-demo-stage-wrap { display: block; }
body.f1-demo-mode-on .f1-real-data { display: none; }
.f1-real-data { display: block; }

/* Family Timeline内はflexレイアウトの直接の子である必要があるため、ブロック化せず
   displayをcontentsにしてラッパー自体をレイアウトから消す（表示/非表示の判定は変わらない）。 */
.f1-mini-timeline .f1-real-data { display: contents; }
body.f1-demo-mode-on .f1-mini-timeline .f1-demo-stage-wrap { display: contents; }
body.f1-demo-mode-on .f1-mini-timeline .f1-real-data { display: none; }

/* 未登録者向けオンボーディング誘導バナー */
.f1-onboard-banner { background: linear-gradient(135deg, var(--f1-color-primary), #4f94ff); color: #fff; border-radius: var(--f1-radius-lg); padding: var(--f1-space-5); margin-bottom: var(--f1-space-4); }
.f1-onboard-banner__title { font-size: 1rem; font-weight: 900; margin-bottom: 6px; }
.f1-onboard-banner__desc { font-size: 0.82rem; opacity: 0.92; line-height: 1.7; margin-bottom: 14px; }
.f1-onboard-banner .f1-btn--primary { background: #fff; color: var(--f1-color-primary); }

/* Welcome Wizard */
.f1-wrap--welcome { max-width: 480px; padding-top: var(--f1-space-6); }
/* 登録基盤刷新 最終段階 ■5：進捗バー */
.f1-wizard-progress { width: 100%; height: 6px; border-radius: var(--f1-radius-full); background: var(--f1-color-border); overflow: hidden; margin-bottom: 4px; }
.f1-wizard-progress__bar { height: 100%; background: var(--f1-color-primary, #247bfb); border-radius: var(--f1-radius-full); transition: width 0.3s ease; }
.f1-wizard-progress__label { text-align: right; margin: 4px 0 14px; }
.f1-wizard-step { display: none; }
.f1-wizard-step.is-active { display: block; animation: f1-fade-in var(--f1-duration-slow) var(--f1-ease); }
.f1-wizard-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: var(--f1-radius-sm); border: 1.5px solid var(--f1-color-border); font-size: 0.9rem; min-height: 44px; }
.f1-wizard-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: var(--f1-space-3); }
@media (max-width: 380px) { .f1-wizard-choice-grid { grid-template-columns: repeat(2, 1fr); } }
.f1-wizard-choice-grid .f1-chip { text-align: center; justify-content: center; padding: 12px 6px; min-height: 44px; cursor: pointer; }
.f1-chip--checkbox { justify-content: flex-start; cursor: pointer; }
.f1-chip--checkbox input[type="checkbox"] { accent-color: var(--f1-color-primary); width: 16px; height: 16px; flex-shrink: 0; }
@keyframes f1-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Phase2：実TOPページ（保育園connect本体、Family One入口化）専用スタイル
   既存の dc3-* クラスは変更せず、f1-* トークンのみを使って追記する。
   ========================================================================== */
.f1-hero-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--f1-space-3) 0; }
.f1-hero-flow__step { font-size: 0.78rem; font-weight: 800; padding: 5px 12px; border-radius: var(--f1-radius-full); background: rgba(255,255,255,0.16); color: inherit; }
.f1-hero-flow__arrow { font-size: 0.78rem; opacity: 0.6; }

.f1-life-timeline-diagram { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.f1-life-timeline-diagram__step { font-size: 0.76rem; font-weight: 700; padding: 6px 12px; border-radius: var(--f1-radius-full); background: var(--f1-color-surface); border: 1px solid var(--f1-color-border); color: var(--f1-color-text); }
.f1-life-timeline-diagram__arrow { font-size: 0.76rem; color: var(--f1-color-text-soft); }
@media (max-width: 640px) {
  .f1-life-timeline-diagram { flex-direction: column; align-items: flex-start; }
  .f1-life-timeline-diagram__arrow { align-self: flex-start; margin-left: 10px; }
}

/* ==========================================================================
   Phase2追加：ブランド移行告知（「保育園connectはFamily Oneへ進化しました」）
   PC=右上の小型バッジ／スマホ=ヘッダー直下の全幅バー。警告色は使わず
   Royal Blue/White/Light Grayのみで構成する。management by wp_options、
   表示ON/OFF・期間は family-one-admin-dashboard.php から設定する。
   ========================================================================== */
.dc3-root { position: relative; }

.f1-transition-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  max-width: 240px;
  background: #ffffff;
  border: 1px solid var(--f1-color-border);
  border-radius: var(--f1-radius-md);
  box-shadow: var(--f1-shadow-sm);
  padding: 12px 14px;
  display: none;
}
@media (min-width: 641px) {
  .f1-transition-badge { display: block; }
}
.f1-transition-badge__close {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--f1-color-text-soft);
  cursor: pointer;
  padding: 4px;
}
.f1-transition-badge__text {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--f1-color-text);
  line-height: 1.5;
  padding-right: 14px;
}
.f1-transition-badge__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--f1-color-primary);
  text-decoration: none;
}

.f1-transition-bar {
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--f1-color-surface);
  border-bottom: 1px solid var(--f1-color-border);
  padding: 8px var(--f1-space-4);
  font-size: 0.76rem;
}
@media (max-width: 640px) {
  .f1-transition-bar { display: flex; }
}
.f1-transition-bar__text {
  flex: 1;
  font-weight: 700;
  color: var(--f1-color-text);
  line-height: 1.4;
}
.f1-transition-bar__link {
  flex-shrink: 0;
  font-weight: 800;
  color: var(--f1-color-primary);
  text-decoration: none;
  white-space: nowrap;
}
.f1-transition-bar__close {
  flex-shrink: 0;
  border: none;
  background: none;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--f1-color-text-soft);
  cursor: pointer;
  padding: 4px 2px;
  min-width: 28px;
  min-height: 28px;
}
.f1-transition-notice.is-dismissed .f1-transition-badge,
.f1-transition-notice.is-dismissed .f1-transition-bar {
  display: none !important;
}

/* ==========================================================================
   緊急修正指示：Welcome Wizard 複数子ども対応
   ========================================================================== */
.f1-wizard-child-row {
  position: relative;
  background: var(--f1-color-surface);
  border: 1px solid var(--f1-color-border);
  border-radius: var(--f1-radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.f1-wizard-child-row__remove {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: none;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--f1-color-text-soft);
  cursor: pointer;
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
}
select.f1-wizard-input { appearance: none; background-color: #fff; }

/* ==========================================================================
   UI/UXブラッシュアップ（最優先）■4：生年月日ドラムピッカー（年・月・日の3<select>）
   iPhone/Android双方でネイティブのホイール（ドラム）式ピッカーとして開くように、
   ネイティブ<select>要素をそのまま使う（独自UIライブラリは追加しない）。
   ========================================================================== */
.f1-bdp__row { display: flex; gap: 8px; }
.f1-bdp__select {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 8px;
  border-radius: var(--f1-radius-sm);
  border: 1.5px solid var(--f1-color-border);
  font-size: 16px; /* iOS Safariでのズーム発生を防ぐため16px未満にしない */
  min-height: 44px; /* タップターゲット確保 */
  background-color: #fff;
  appearance: none;
  text-align: center;
}
.f1-bdp__select--year { flex: 1.3; }

/* ==========================================================================
   UI/UXブラッシュアップ（最優先）■5：子どもカード表示改善。
   名前／年齢／ライフステージ／園名・学校名（分かる場合のみ）を一目で把握できるようにする。
   ========================================================================== */
.f1-child-card__head { display: flex; align-items: center; gap: 8px; }
.f1-child-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--f1-color-primary-soft, #eaf1ff); color: var(--f1-color-primary, #247bfb); flex-shrink: 0; }
.f1-child-card__name { font-size: 1rem; }
.f1-child-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ==========================================================================
   Family One メインビジュアル（3姉妹の写真、メディアID63479）
   フルブリード背景＋Royal Blueの薄いグラデーションオーバーレイ。
   写真自体はトリミングせず、background-positionで顔が見える位置を
   ブレークポイントごとに調整する（コード監査ベース、実機確認は別途必要）。
   ========================================================================== */
.f1-hero-visual {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 22%;
  color: #fff;
  overflow: hidden;
}
.f1-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36,123,251,0.12) 0%, rgba(20,40,80,0.10) 45%, rgba(36,123,251,0.32) 100%);
  z-index: 1;
  pointer-events: none;
}
.f1-hero-visual > .dc3-wrap { position: relative; z-index: 2; }
.f1-hero-visual__logo {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 16px;
  filter: drop-shadow(0 2px 10px rgba(10,20,40,0.35));
}
.f1-hero-visual .dc3-hero__logo-badge {
  background: rgba(255,255,255,0.94);
  color: var(--f1-color-primary, #247bfb);
}
.f1-hero-visual .dc3-hero__headline,
.f1-hero-visual .dc3-hero__headline .accent {
  color: #fff;
  text-shadow: 0 2px 14px rgba(10,20,40,0.4);
}
.f1-hero-visual .dc3-hero__sub {
  color: rgba(255,255,255,0.94);
  text-shadow: 0 1px 8px rgba(10,20,40,0.35);
}
.f1-hero-visual .f1-hero-flow__step { background: rgba(255,255,255,0.24); color: #fff; }
.f1-hero-visual .f1-hero-flow__arrow { color: rgba(255,255,255,0.75); }
.f1-hero-visual .dc3-btn--ghost { border-color: rgba(255,255,255,0.75); color: #fff; }
.f1-hero-visual .dc3-hero__grid { display: block; }

/* 緊急修正②：以前はここに .f1-hero-visual の background-position をブレークポイント別に
   指定する別のルールがあり、下記（709行目付近）の正規ルールと同じセレクタ・同じ
   ブレークポイントに異なる値を設定していた（後着順のCSSカスケードにより常に下側が
   勝つため通常は問題化しないが、意図しない二重管理状態であり、将来ファイルの
   並び替え等があった場合に値が入れ替わるリスクがあった）。正規ルールへ一本化し、
   ここでは.dc3-heroのpadding調整のみを残す。 */
@media (max-width: 480px) {
  .f1-hero-visual .dc3-hero { padding-top: 32px; padding-bottom: 28px; }
}

/* ヒーロー写真レイヤー（<picture>＋<img>、WebP優先・JPEGフォールバック）。
   Gitで管理するブランドアセット（images/brand/hero-family.jpg/.webp）専用。
   background-imageをやめてimg要素にしたのは、<picture><source type="image/webp">による
   ブラウザ側フォーマット判定（UA判定を書かない）と、width/height/object-fitによる
   CLS対策を両立させるため。.f1-hero-visualの他のスタイル（文字色・グラデーション無効化等）
   はそのまま生かし、写真の描画方法だけをここで上書きする。 */
.f1-hero-photo-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.f1-hero-photo-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: center 68%;
}
/* 元画像刷新（2026-08-03）：新しいメインビジュアルは、PC版（hero-family.jpg）・
   スマホ版（hero-family-mobile.jpg）とも元画像から縦方向はクロップせず書き出して
   いるため、子どもたちの縦位置（画像高さの約55〜70%の帯）はどちらの画像でも共通。
   横長のPCコンテナほど上下を大きくクロップするため、position-yを高めにして
   常に頭から足先までが入るように補正する。実機スクリーンショットで確認のうえ微調整済み。 */
@media (max-width: 480px) {
  .f1-hero-photo-layer img { object-position: center 58%; }
}
@media (min-width: 481px) and (max-width: 900px) {
  .f1-hero-photo-layer img { object-position: center 66%; }
}
/* 【2026-08-10 PC表示の見切れ修正】
   PC（min-width:901px）の object-position を 70% → 58% にする。変更はこの1値のみ。
   画像・高さ・セクション構成・テキスト位置・ボタン位置はいずれも変更しない。

   元画像 hero-family.jpg は 2000×1500（4:3）。実測した被写体の縦位置は
     長女（後列）の頭頂 … 画像高さの約42%
     次女（右）の顔中心 … 約52%
     三女（前）の顔中心 … 約64%（あご下 約68%）
   コンテナは min-height:560px。object-fit:cover のため、可視範囲は
     可視率 v = 560 ÷ (0.75 × 画面幅)、可視開始 = position-y × (1 − v)
   で決まる。幅が広いほど v が小さく、上下が大きく切られる。

   70% のときの可視範囲
     1920px … 42.8%〜81.7%  ← 長女の頭頂42%が上端の外に出て見切れていた
     1440px … 33.7%〜85.6%
     1366px … 31.7%〜86.4%
   58%（顔の帯42%〜68%が可視範囲の中央に来る値）
     1920px … 35.4%〜74.3%  長女の頭頂まで6.6ポイントの余裕
     1440px … 27.9%〜79.8%
     1366px … 26.3%〜81.0%
      901px …  9.9%〜92.8%
   いずれの幅でも3人の顔が上下に切られない。 */
@media (min-width: 901px) {
  .f1-hero-photo-layer img { object-position: center 58%; }
}

/* Family Homeプレビュー：写真をカードのアクセントとして小さく添える（クロップなし・角丸） */
.f1-home-preview-photo {
  width: 100%;
  max-width: 260px;
  border-radius: var(--f1-radius-md);
  margin: 0 auto 16px;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 20%;
}

/* /familyone/ 側のヒーロー（.f1-hero）にも同じメインビジュアル演出を適用する場合の上書き */
.f1-hero-visual.f1-hero { background: none; }
.f1-hero-visual .f1-hero__title,
.f1-hero-visual .f1-hero__sub {
  color: #fff;
  text-shadow: 0 2px 12px rgba(10,20,40,0.4);
}

/* オープニング画面（未登録訪問者向け）のヒーローにも同じメインビジュアル演出を適用する場合の上書き。
   .f1-opening-hero自体の text-align:center はそのまま活かし、文字色・影のみ差し替える。 */
.f1-opening-hero.f1-hero-visual { text-align: center; }
.f1-opening-hero.f1-hero-visual .f1-opening-hero__title,
.f1-opening-hero.f1-hero-visual .f1-opening-hero__sub {
  color: #fff;
  text-shadow: 0 2px 12px rgba(10,20,40,0.4);
}

/* ==========================================================================
   Sprint4.5：Demo Mode 業種別営業シナリオ
   ========================================================================== */
.f1-demo-sheet__subtitle { font-size: 0.86rem; font-weight: 800; margin: 14px 0 4px; }
.is-hidden { display: none !important; }
body.f1-demo-mode-on #f1-demo-mode-sector-title,
body.f1-demo-mode-on #f1-demo-mode-sector-desc,
body.f1-demo-mode-on #f1-demo-mode-sector-grid {
  display: block !important;
}
#f1-demo-mode-sector-grid.is-hidden { display: none !important; }
.f1-demo-sector-block { display: none; }
.f1-demo-sector-block.is-current-sector { display: block; }
body.f1-demo-sector-selected .f1-demo-sector-wrap.is-hidden { display: block !important; }

/* ==========================================================================
   緊急修正指示：行政手続きSTEP3 認可保育園/企業主導型保育園 比較表示
   ========================================================================== */
.f1-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--f1-space-4); }
@media (max-width: 480px) {
  .f1-compare-grid { grid-template-columns: 1fr; }
}
.f1-compare-col { background: var(--f1-color-surface); border-radius: var(--f1-radius-sm); padding: 14px; text-align: center; }
.f1-compare-col__title { font-weight: 800; font-size: 0.82rem; margin-bottom: 10px; color: var(--f1-color-primary); }
.f1-compare-col__step { font-size: 0.78rem; font-weight: 700; background: #fff; border: 1px solid var(--f1-color-border); border-radius: var(--f1-radius-sm); padding: 8px 10px; }
.f1-compare-col__arrow { font-size: 0.78rem; color: var(--f1-color-text-soft); padding: 2px 0; }
.f1-compare-col__note { font-size: 0.68rem; color: var(--f1-color-text-soft); margin: 10px 0 0; line-height: 1.6; }

.f1-timeline-item__note {
  font-size: 0.78rem; font-weight: 700; color: var(--f1-color-primary);
  background: var(--f1-color-primary-tint, #e8f1ff); border-radius: var(--f1-radius-sm);
  padding: 8px 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.f1-step-list { margin: 0 0 10px; padding-left: 20px; font-size: 0.82rem; line-height: 1.9; }
.f1-step-list li { margin-bottom: 2px; }

/* ==========================================================================
   トップヒーロー ロゴ最終調整（実機iPhone確認を踏まえての再拡大）：
   Apple/Tesla/Googleのようにブランドで信頼を作る段階のため、
   「最初に目に入る」が「主役ではない」バランスを狙い、スマホ240〜280px・
   PC300〜360pxへ拡大（前回比約1.2倍）。上下の余白（padding）は
   意図的に変更せず、ロゴのサイズのみを拡大している。
   ロゴを写真セクションの外＝ページの素の白背景（.f1-hero-logo-band）に
   置くことで、白 on 白のまま拡大しても浮いて見えない。
   ロゴ画像は共通ブランド関数 family_one_get_brand_logo()（メディアID63491
   ＝横型ワードマーク「Family One Passport」）から取得する。
   ========================================================================== */
.f1-hero-logo-band {
  background: #fff;
  display: flex;
  justify-content: center;
  padding: 32px 16px 18px;
}
.f1-hero-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.f1-hero-logo .f1-brand-logo__wordmark img {
  display: block;
  width: clamp(280px, 74vw, 320px);
  height: auto;
}
.f1-hero-logo .f1-brand-logo__symbol img { height: 64px; width: 64px; }
.f1-hero-logo .f1-brand-logo__symbol-text { font-size: 1.4rem; color: var(--dc3-brand-blue, #247bfb); }
@media (min-width: 641px) {
  .f1-hero-logo-band { padding: 44px 16px 24px; }
  .f1-hero-logo .f1-brand-logo__wordmark img { width: clamp(360px, 26vw, 420px); }
}

.f1-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.92) 12%, rgba(255,255,255,0.55) 25%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, rgba(36,123,251,0.10) 0%, rgba(20,40,80,0.08) 55%, rgba(36,123,251,0.30) 100%);
}
/* .f1-hero-gradient を明示要素として導入したため、以前の::beforeベースのオーバーレイは無効化する */
.f1-hero-visual::before { content: none; }

/* 最終仕上げ：ヒーロー自体をフルブリード化（.f1-wrapの外）した際、中の見出し・CTAは
   ここでmax-width指定して読みやすい幅に収める（画面いっぱいに文字が伸びるのを防ぐ）。 */
.f1-hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 20px 36px;
}
@media (min-width: 641px) {
  .f1-hero-content { padding: 16px 20px 56px; }
}

.f1-hero-subnote {
  font-size: 0.72rem;
  color: var(--f1-color-text-soft, #5b6472);
  text-align: center;
  padding: 10px var(--f1-space-4, 16px) 0;
  max-width: 640px;
  margin: 0 auto;
}

/* ヒーロー写真：縦横比を維持しつつ、子ども3人が中央に収まるようobject-position調整。
   緊急修正②：.f1-hero-visual のbackground-position/min-heightは、このブロックのみを
   唯一の参照元とする（ページ別の個別height指定・重複ルールは持たない）。
   background-image + background-sizeはCSSのみで完結し、JSによる高さ再計算・
   リサイズ処理は一切行わない（状態を持たない静的レイアウト）。 */
@media (max-width: 480px) {
  .f1-hero-visual { background-position: center 14%; min-height: 460px; }
}
@media (min-width: 481px) and (max-width: 640px) {
  .f1-hero-visual { background-position: center 16%; min-height: 500px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .f1-hero-visual { background-position: center 22%; min-height: 520px; }
}
@media (min-width: 901px) {
  .f1-hero-visual { background-position: center 26%; min-height: 560px; }
}

.f1-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.f1-hero-cta-row .dc3-btn--primary { box-shadow: 0 6px 18px rgba(10,20,40,0.18); }

/* ファーストビューCTA刷新：行政手続きを1段目、施設を探す／地図から探すを2段目にする */
.f1-hero-cta-row--gov-first { flex-direction: column; align-items: flex-start; }
.f1-hero-cta-primary { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.f1-hero-cta-primary .f1-btn { box-shadow: 0 6px 18px rgba(10,20,40,0.18); align-self: flex-start; }
.f1-hero-cta-primary__note { font-size: 0.76rem; color: var(--f1-ink-soft, #5b6472); margin: 0; }
.f1-hero-cta-secondary-row { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) {
  .f1-hero-cta-primary .f1-btn { align-self: stretch; text-align: center; }
  .f1-hero-cta-secondary-row { width: 100%; }
  .f1-hero-cta-secondary-row .f1-btn { flex: 1; text-align: center; }
}

.f1-hero-tagline-accent {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--f1-color-primary, #247bfb);
}

/* ブランド体験メッセージ：機能説明（.f1-hero__sub）だけでは伝わらない温かさを、
   キャッチコピー直後の短い一文で補う（長文の説明文にしない）。 */
.f1-hero-brand-message {
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 800;
  color: var(--f1-color-primary, #247bfb);
  margin: 4px 0 0;
}
.f1-hero-visual .f1-hero-brand-message {
  color: #fff;
  text-shadow: 0 1px 12px rgba(8,18,42,0.4);
}

/* ==========================================================================
   Sprint5：Family Timeline Component（ビジュアル・ライフステージカルーセル）
   横スクロールのカードトラック。1カードに情報を詰め込みすぎず、
   アイコン+ステージ名+チップ最大2件のみを表示する（余白優先）。
   ========================================================================== */
.f1-life-timeline { padding: var(--f1-space-2, 8px) 0 var(--f1-space-4, 16px); }
.f1-life-timeline__track {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--f1-space-4, 16px) 14px;
}
.f1-life-timeline__track::-webkit-scrollbar { display: none; }
.f1-life-timeline__card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 132px;
  min-height: 148px;
  background: #fff;
  border: 1px solid var(--f1-color-border, #e6ebf2);
  border-radius: var(--f1-radius-lg, 18px);
  padding: 16px 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--f1-shadow-sm, 0 2px 14px rgba(28,36,48,0.06));
  transition: transform var(--f1-duration-base, 0.2s) var(--f1-ease, ease-out), box-shadow var(--f1-duration-base, 0.2s) var(--f1-ease, ease-out);
}
.f1-life-timeline__card:hover,
.f1-life-timeline__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--f1-shadow-md, 0 6px 24px rgba(28,36,48,0.08));
}
.f1-life-timeline__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--f1-color-primary-tint, #deeeff);
  color: var(--f1-color-primary, #247bfb);
  font-size: 1.35rem;
}
.f1-life-timeline__label {
  display: block;
  font-weight: 800;
  font-size: 0.86rem;
  margin-bottom: 8px;
}
.f1-life-timeline__chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.f1-life-timeline__chip {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--f1-color-text-soft, #5b6472);
  background: var(--f1-color-surface, #f6f9fd);
  border-radius: var(--f1-radius-full, 999px);
  padding: 3px 8px;
  line-height: 1.4;
}
/* Phase3：現在のLife Stageに該当するカードをハイライトする */
.f1-life-timeline__card.is-active {
  position: relative;
  border-color: var(--f1-color-primary, #247bfb);
  border-width: 2px;
  box-shadow: var(--f1-shadow-md, 0 6px 24px rgba(28,36,48,0.08));
}
.f1-life-timeline__current-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--f1-color-primary, #247bfb);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--f1-radius-full, 999px);
  white-space: nowrap;
}
.f1-life-timeline__arrow {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: var(--f1-color-text-soft, #5b6472);
  opacity: 0.5;
  padding: 0 2px;
}
.f1-life-timeline__cta {
  display: flex;
  justify-content: center;
  padding: 6px var(--f1-space-4, 16px) 0;
}
@media (min-width: 641px) {
  .f1-life-timeline__card { width: 152px; min-height: 164px; }
}
.f1-hero-cta-row .dc3-btn--ghost { background: rgba(255,255,255,0.9); color: var(--f1-color-primary, #247bfb); border-color: rgba(255,255,255,0.9); }

/* ==========================================================================
   重要バグ修正③：お子さま切替UI
   ========================================================================== */
.f1-child-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-bottom: 14px;
}
.f1-child-switcher::-webkit-scrollbar { display: none; }
.f1-child-switcher__chip {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--f1-color-text-soft, #5b6472);
  background: var(--f1-color-surface, #f6f9fd);
  border: 1px solid var(--f1-color-border, #e6ebf2);
  border-radius: var(--f1-radius-full, 999px);
  padding: 8px 14px;
  text-decoration: none;
  white-space: nowrap;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.f1-child-switcher__chip.is-active {
  background: var(--f1-color-primary, #247bfb);
  border-color: var(--f1-color-primary, #247bfb);
  color: #fff;
}

/* ==========================================================================
   営業MVP仕上げ：共通ヘッダー4区分ナビ（PCドロップダウン／モバイルハンバーガー）
   背景は白／薄いグレーを基調とし、Royal Blueは見出し・選択状態・CTAに限定する。
   ========================================================================== */
.f1-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.f1-header__hamburger span { display: block; height: 2px; width: 22px; background: var(--f1-color-text, #1c2430); border-radius: 2px; margin: 0 auto; }
.f1-header__back--desktop { display: inline-block; }

/* PCドロップダウン */
.f1-header__dropdown { position: relative; }
.f1-header__dropdown-trigger { border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.f1-header__dropdown-caret { font-size: 0.6rem; transition: transform 0.15s ease; }
.f1-header__dropdown.is-open .f1-header__dropdown-caret { transform: rotate(180deg); }
.f1-header__dropdown-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--f1-color-border, #e6ebf2);
  border-radius: var(--f1-radius-md, 16px);
  box-shadow: var(--f1-shadow-md, 0 6px 24px rgba(28,36,48,0.08));
  padding: 8px;
  z-index: var(--f1-z-header-menu, 60);
}
.f1-header__dropdown.is-open .f1-header__dropdown-panel { display: block; }
.f1-header__dropdown-panel a {
  display: block;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--f1-color-text, #1c2430);
  text-decoration: none;
  border-radius: var(--f1-radius-sm, 12px);
}
.f1-header__dropdown-panel a:hover,
.f1-header__dropdown-panel a:focus-visible { background: var(--f1-color-surface, #f6f9fd); color: var(--f1-color-primary, #247bfb); }

/* モバイル：ハンバーガードロワー */
.f1-nav-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,30,50,0.35);
  z-index: var(--f1-z-overlay, 200);
}
.f1-nav-drawer-overlay.is-open { display: block; }
.f1-nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 30px rgba(10,20,40,0.15);
}
.f1-nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  border-bottom: 1px solid var(--f1-color-border, #e6ebf2);
}
.f1-nav-drawer__title { font-weight: 900; font-size: 1rem; }
.f1-nav-drawer__close {
  border: none;
  background: var(--f1-color-surface, #f6f9fd);
  color: var(--f1-color-text, #1c2430);
  font-size: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.f1-nav-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.f1-nav-drawer__top-link {
  display: block;
  padding: 12px 6px;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--f1-color-text, #1c2430);
  text-decoration: none;
  border-bottom: 1px solid var(--f1-color-border, #e6ebf2);
}
.f1-nav-accordion { border-bottom: 1px solid var(--f1-color-border, #e6ebf2); }
.f1-nav-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 13px 6px;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--f1-color-text, #1c2430);
  cursor: pointer;
  min-height: 44px;
}
.f1-nav-accordion__caret { font-size: 0.7rem; color: var(--f1-color-text-soft, #5b6472); transition: transform 0.15s ease; }
.f1-nav-accordion.is-open .f1-nav-accordion__caret { transform: rotate(180deg); }
.f1-nav-accordion__panel { display: none; padding: 0 6px 10px 12px; flex-direction: column; }
.f1-nav-accordion.is-open .f1-nav-accordion__panel { display: flex; }
.f1-nav-accordion__panel a {
  padding: 10px 6px;
  font-size: 0.84rem;
  color: var(--f1-color-text-soft, #5b6472);
  text-decoration: none;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.f1-nav-accordion__panel a:hover,
.f1-nav-accordion__panel a:focus-visible { color: var(--f1-color-primary, #247bfb); }

body.f1-nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .f1-header__nav { display: none; }
  .f1-header__back--desktop { display: none; }
  .f1-header__hamburger { display: flex; }
}

/* 共通フッター4区分リンク */
.f1-footer__brand { margin-bottom: 18px; }
.f1-footer__brand p { margin: 2px 0; }
.f1-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 480px;
  margin: 0 auto 18px;
  text-align: left;
}
.f1-footer__col-title { font-weight: 900; font-size: 0.78rem; color: var(--f1-color-text, #1c2430); margin-bottom: 8px; }
.f1-footer__col a { display: block; padding: 4px 0; font-size: 0.76rem; font-weight: 600; }
.f1-footer__back { display: inline-block; margin-top: 8px; }
.f1-footer__note { margin-top: 14px; font-size: 0.68rem; opacity: 0.8; }

/* ==========================================================================
   Family One「困ったとき」（緊急時サポート）第1段階
   通常はRoyal Blue＋白基調。緊急ボタン・免責表示のみオレンジ/赤系アクセント（赤の全面使用は禁止）。
   片手操作前提：大きなボタン・大きな文字・重要項目を上部へ。
   ========================================================================== */
.f1-emergency-hero { padding-top: 4px; }
.f1-emergency-disclaimer { background: #fff7ed; border: 1px solid #fdba74; border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; }
.f1-emergency-disclaimer p { margin: 2px 0; font-size: 0.78rem; font-weight: 700; color: #9a3412; line-height: 1.6; }

.f1-emergency-symptom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f1-emergency-symptom-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 64px; padding: 14px 10px; border-radius: 16px;
  background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #1656c9);
  font-weight: 800; font-size: 0.92rem; line-height: 1.4; text-decoration: none;
  border: 1px solid rgba(22, 86, 201, 0.2);
}
.f1-emergency-symptom-btn--urgent { background: #fff0e6; color: #c2410c; border-color: #fdba74; grid-column: span 2; font-size: 1rem; }
@media (max-width: 480px) { .f1-emergency-symptom-grid { grid-template-columns: 1fr; } .f1-emergency-symptom-btn--urgent { grid-column: span 1; } }

.f1-emergency-alert {
  background: #fff0e6; border: 2px solid #f97316; color: #9a3412; font-weight: 800;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; font-size: 0.95rem; line-height: 1.7;
}
.f1-emergency-alert--caution { background: #fef2f2; border-color: #f87171; color: #991b1b; }

.f1-emergency-checklist { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.f1-emergency-checklist label { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 700; padding: 12px 14px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 12px; }
.f1-emergency-checklist input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
.f1-emergency-note { font-size: 0.8rem; color: var(--f1-ink-soft, #5b6472); line-height: 1.7; margin-top: 8px; }
.f1-emergency-list { margin: 8px 0 0; padding-left: 1.3em; font-size: 0.88rem; line-height: 1.9; color: var(--f1-color-text, #1c2430); }

.f1-emergency-contact-grid { display: flex; flex-direction: column; gap: 12px; }
.f1-emergency-contact { border-radius: 16px; padding: 16px; border: 1px solid var(--dc3-border, #e6ebf2); background: #fff; }
.f1-emergency-contact--primary { border-color: #fdba74; background: #fff8f1; }
.f1-emergency-contact__name { font-weight: 900; font-size: 0.98rem; margin-bottom: 6px; }
.f1-emergency-contact__tel {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; width: 100%;
  background: #f97316; color: #fff; font-weight: 900; font-size: 1.15rem; border-radius: 12px; text-decoration: none; margin: 4px 0 8px;
}
.f1-emergency-contact--primary .f1-emergency-contact__tel { background: #ea580c; }
.f1-emergency-contact__hours { font-size: 0.8rem; color: var(--f1-ink-soft, #5b6472); margin: 0 0 6px; line-height: 1.6; }
.f1-emergency-contact__link { display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--dc3-brand-blue, #1656c9); margin-bottom: 6px; }
.f1-emergency-contact__notes { font-size: 0.76rem; color: var(--f1-ink-soft, #5b6472); line-height: 1.6; margin: 4px 0; }
.f1-emergency-contact__source { font-size: 0.68rem; color: #9aa3b0; margin-top: 8px; border-top: 1px dashed var(--dc3-border, #e6ebf2); padding-top: 6px; }
.f1-emergency-contact__stale-badge { display: block; margin-top: 4px; color: #c2410c; font-weight: 800; }

.f1-link-back { display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--dc3-brand-blue, #1656c9); text-decoration: none; margin-bottom: 8px; }

/* Family Home上部：困ったとき導線カード */
.f1-emergency-home-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(135deg, #fff8f1, #fff); border: 1px solid #fdba74; border-radius: 16px;
  padding: 14px 16px; margin-bottom: 14px; text-decoration: none;
}
.f1-emergency-home-card__text strong { display: block; font-size: 0.95rem; color: #9a3412; }
.f1-emergency-home-card__text span { display: block; font-size: 0.76rem; color: var(--f1-ink-soft, #5b6472); margin-top: 2px; }
.f1-emergency-home-card__btn { flex-shrink: 0; background: #f97316; color: #fff; font-weight: 800; font-size: 0.8rem; padding: 10px 14px; border-radius: 999px; white-space: nowrap; }

/* 緊急サポート強化 第3段階：Family Emergency Card（Family Passportページ内） */
.f1-emergency-card-section { margin: 10px 0; }
.f1-emergency-card { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 16px; background: #fff; margin-bottom: 12px; }
.f1-emergency-card__head { font-weight: 900; font-size: 1rem; margin-bottom: 8px; color: var(--dc3-brand-blue, #1656c9); }
.f1-emergency-card__row { font-size: 0.84rem; line-height: 1.8; margin-bottom: 2px; }
.f1-emergency-card__form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--dc3-border, #e6ebf2); display: flex; flex-direction: column; gap: 8px; }
.f1-emergency-card__form label { font-size: 0.78rem; font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.f1-emergency-card__form input, .f1-emergency-card__form textarea { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 8px; padding: 8px; font-size: 0.85rem; font-family: inherit; }
.f1-emergency-card__edit-toggle { margin-top: 10px; }

/* Education Commons 正式ロゴ表示：比率変更禁止・十分な余白・白背景固定（白抜き版が無いため）。
   変形・影・装飾・グラデーション追加は行わない（imgタグをそのまま表示するのみ）。 */
.f1-ec-logo-band { background: #fff; border-radius: 16px; padding: 28px 24px; margin: 12px 0 20px; text-align: center; border: 1px solid var(--dc3-border, #e6ebf2); }
.f1-ec-logo-band__img { max-width: 280px; width: 100%; height: auto; display: inline-block; }
@media (max-width: 480px) { .f1-ec-logo-band { padding: 20px 16px; } .f1-ec-logo-band__img { max-width: 220px; } }

/* Education Commons ブランド組み込み：フッターのブランド階層（Family One を親ブランドとして視覚化） */
/* ブランド階層の統一感強化（2026-08-03）：Family Oneを親に、4ブランドをアイコン付き
   カードとして並べる。各ブランドに専用アクセスカラーを1色ずつ割り当て、左ボーダー・
   アイコン円で視覚的に見分けられるようにする（新しい配色体系は作らず、既存の
   ブランドブルー／カテゴリ色トークンの組み合わせのみで表現する）。 */
.f1-footer__brand-tree { max-width: 560px; margin: 16px auto; text-align: left; }
.f1-footer__brand-tree__root {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 900; font-size: 0.95rem; color: var(--f1-color-text, #1c2430); margin-bottom: 10px;
}
.f1-footer__brand-tree__root svg { color: var(--dc3-brand-blue, #247bfb); }
.f1-footer__brand-tree__children { display: flex; flex-direction: column; gap: 8px; }
.f1-footer__brand-tree__child {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; text-decoration: none;
  background: var(--dc3-surface, #f6f9fd);
  border-left: 3px solid var(--f1-brand-tree-accent, var(--dc3-brand-blue, #247bfb));
  border-radius: 0 var(--f1-radius-md, 14px) var(--f1-radius-md, 14px) 0;
  transition: transform var(--f1-duration-base, 0.2s) var(--f1-ease, ease-out);
}
.f1-footer__brand-tree__child:hover { transform: translateX(2px); }
.f1-footer__brand-tree__icon {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-top: 1px;
  background: #fff; color: var(--f1-brand-tree-accent, var(--dc3-brand-blue, #247bfb));
}
.f1-footer__brand-tree__body { display: block; }
.f1-footer__brand-tree__child strong { display: block; font-size: 0.8rem; color: var(--f1-brand-tree-accent, var(--dc3-brand-blue, #1656c9)); font-weight: 800; }
.f1-footer__brand-tree__child span { display: block; font-size: 0.68rem; color: var(--f1-ink-soft, #5b6472); margin-top: 2px; line-height: 1.5; }
.f1-footer__brand-tree__child--passport { --f1-brand-tree-accent: var(--dc3-brand-blue, #247bfb); }
.f1-footer__brand-tree__child--connect   { --f1-brand-tree-accent: var(--dc3-cat-medical, #1f9d6e); }
.f1-footer__brand-tree__child--commons   { --f1-brand-tree-accent: #5b5fc7; }
.f1-footer__brand-tree__child--business  { --f1-brand-tree-accent: var(--dc3-cat-sponsor, #c79427); }
@media (max-width: 480px) { .f1-footer__brand-tree { text-align: left; } }

/* 公開前追加修正（2026-07-21）Priority1：行政手続き完了チェック機能 */
.f1-proc-home-card__row { display: flex; gap: 18px; flex-wrap: wrap; }
.f1-proc-home-card__row > div { display: flex; flex-direction: column; }
.f1-proc-home-card__row strong { font-size: 1.3rem; font-weight: 900; color: var(--dc3-brand-blue, #247bfb); line-height: 1.2; }
.f1-proc-home-card__row span { font-size: 0.72rem; color: var(--f1-ink-soft, #5b6472); }

.f1-proc-child-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.f1-proc-child-tab { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--dc3-border, #e6ebf2); color: var(--f1-ink-soft, #5b6472); font-size: 0.78rem; font-weight: 700; text-decoration: none; }
.f1-proc-child-tab.is-active { background: var(--dc3-brand-blue, #247bfb); border-color: var(--dc3-brand-blue, #247bfb); color: #fff; }

.f1-proc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.f1-proc-card { background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 14px 16px; border-left: 4px solid var(--dc3-border, #e6ebf2); }
.f1-proc-card--now { border-left-color: #d94b4b; }
.f1-proc-card--soon { border-left-color: #c99a3a; }
.f1-proc-card--review { border-left-color: #8a63d2; }
.f1-proc-card--done { border-left-color: #1f9d6e; opacity: 0.75; }
.f1-proc-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.f1-proc-card__status { font-size: 0.68rem; font-weight: 800; color: var(--f1-ink-soft, #5b6472); }
.f1-proc-card--now .f1-proc-card__status { color: #d94b4b; }
.f1-proc-card--soon .f1-proc-card__status { color: #a3760a; }
.f1-proc-card--review .f1-proc-card__status { color: #6a3fc2; }
.f1-proc-card--done .f1-proc-card__status { color: #1f9d6e; }
.f1-proc-card__cal-badge { font-size: 0.64rem; color: var(--f1-ink-soft, #5b6472); }
.f1-proc-card__title { font-weight: 800; font-size: 0.92rem; margin-bottom: 2px; }
.f1-proc-card__child { font-size: 0.76rem; color: var(--f1-ink-soft, #5b6472); }
.f1-proc-card__deadline { font-size: 0.76rem; color: var(--f1-ink-soft, #5b6472); margin-bottom: 8px; }
.f1-proc-card__details { font-size: 0.78rem; color: var(--f1-ink-soft, #5b6472); margin: 6px 0; }
.f1-proc-card__details summary { cursor: pointer; font-weight: 700; color: var(--dc3-brand-blue, #247bfb); }
.f1-proc-card__details p { margin: 6px 0 0; line-height: 1.6; }
.f1-proc-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.f1-proc-card__actions-primary { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 8px; }
.f1-proc-card__actions-primary summary { list-style: none; }

/* 行政手続き「いまやること」拡張（2026-07-28） */
.f1-gov-window-badge { font-size: 0.64rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.f1-gov-window--before { background: var(--dc3-border, #e6ebf2); color: var(--f1-ink-soft, #5b6472); }
.f1-gov-window--open { background: var(--dc3-cat-medical-tint, #e6f7f0); color: var(--dc3-cat-medical, #1f9d6e); }
.f1-gov-window--soon { background: #fdecd2; color: #a3760a; }
.f1-gov-window--closed { background: #f4f6f9; color: #98a2b3; }
.f1-gov-next-action { display: flex; flex-direction: column; gap: 2px; background: var(--dc3-brand-blue-light, #deeeff); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.f1-gov-next-action__label { font-size: 0.64rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); letter-spacing: 0.04em; }
.f1-gov-next-action__text { font-size: 0.86rem; font-weight: 700; color: var(--f1-ink, #1c2430); line-height: 1.5; }
.f1-gov-fact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.f1-gov-fact { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: #f4f6f9; color: var(--f1-ink-soft, #5b6472); }
.f1-gov-fact--warn { background: #fdecea; color: #c0392b; }
.f1-gov-fact--status { background: var(--dc3-border, #e6ebf2); }
.f1-gov-progress-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--f1-ink-soft, #5b6472); }
.f1-proc-progress-select { font-size: 0.78rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--dc3-border, #e6ebf2); }
/* 提出書類UI改善（2026-07-28）：①②③…の丸数字で連番表示するための独自counter-style */
@counter-style f1-circled-numbers {
  system: cyclic;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫" "⑬" "⑭" "⑮" "⑯" "⑰" "⑱" "⑲" "⑳";
  suffix: " ";
}
.f1-gov-document-list { list-style: f1-circled-numbers; margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 10px; }
.f1-gov-document-list li { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 8px; padding: 8px 10px 8px 4px; }
.f1-gov-document-list__name { font-weight: 800; font-size: 0.84rem; }
.f1-gov-document-list__purpose { font-size: 0.78rem; color: var(--f1-ink, #1c2430); background: var(--dc3-brand-blue-light, #deeeff); border-radius: 6px; padding: 4px 8px; margin: 4px 0; line-height: 1.5; }
.f1-gov-document-list__purpose-label { font-weight: 800; color: var(--dc3-brand-blue, #247bfb); }
.f1-gov-document-list__meta { font-size: 0.72rem; color: var(--f1-ink-soft, #5b6472); margin-top: 2px; }
.f1-gov-document-list__links { display: flex; gap: 10px; margin-top: 4px; font-size: 0.76rem; }
.f1-gov-document-list__progress { margin-top: 6px; }
.f1-gov-document-list__progress label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--f1-ink-soft, #5b6472); }
.f1-gov-caution { color: #a3760a; }

/* よくある質問（FAQ）2026-07-29：ライフナビゲーション刷新 */
.f1-gov-faq { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.f1-gov-faq__item { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 8px; padding: 8px 10px; background: #fbfcfd; }
.f1-gov-faq__q { font-weight: 800; font-size: 0.82rem; color: var(--dc3-brand-blue, #247bfb); margin-bottom: 4px; }
.f1-gov-faq__a { font-size: 0.8rem; color: var(--f1-ink, #1c2430); line-height: 1.6; }

/* 「保護者が迷わない体験」STEPフロー（2026-07-28） */
.f1-gov-step-flow { background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.f1-gov-step-flow__lead { font-weight: 800; font-size: 0.88rem; margin: 0 0 10px; }
.f1-gov-step-flow__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.f1-gov-step-flow__item { display: flex; align-items: center; gap: 10px; padding: 8px 0; position: relative; }
.f1-gov-step-flow__item:not(:last-child)::after { content: "↓"; position: absolute; left: 26px; top: 100%; color: var(--dc3-border, #b9c2cf); font-size: 0.9rem; line-height: 1; }
.f1-gov-step-flow__num { flex: 0 0 auto; font-size: 0.66rem; font-weight: 800; color: #fff; background: var(--dc3-brand-blue, #247bfb); border-radius: 999px; padding: 3px 10px; }
.f1-gov-step-flow__label { font-size: 0.84rem; font-weight: 700; }
.f1-gov-step-flow__item.is-done .f1-gov-step-flow__num { background: var(--dc3-cat-medical, #1f9d6e); }
.f1-gov-step-flow__item.is-done .f1-gov-step-flow__label { color: var(--f1-ink-soft, #5b6472); text-decoration: line-through; }
.f1-gov-step-flow__done-mark { color: var(--dc3-cat-medical, #1f9d6e); font-weight: 800; }
.f1-gov-step-flow__item--final { font-weight: 800; color: var(--dc3-cat-medical, #1f9d6e); padding-top: 12px; }
.f1-gov-step-flow__item--final .f1-gov-step-flow__num { display: none; }

/* ライフイベント連携：ライフステージ別グルーピング（2026-07-28） */
.f1-gov-stage-badge { display: inline-block; font-size: 0.72rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); background: var(--dc3-brand-blue-light, #deeeff); border-radius: 999px; padding: 5px 12px; margin-bottom: 10px; }
.f1-gov-stage-group { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 12px; margin-bottom: 10px; padding: 0; }
.f1-gov-stage-group__label { cursor: pointer; font-weight: 800; font-size: 0.86rem; padding: 12px 14px; list-style: none; }
.f1-gov-stage-group__label::-webkit-details-marker { display: none; }
.f1-gov-stage-group__label::before { content: "▸ "; color: var(--dc3-brand-blue, #247bfb); }
.f1-gov-stage-group[open] .f1-gov-stage-group__label::before { content: "▾ "; }
.f1-gov-stage-group__body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }

/* ライフナビゲーション刷新（2026-07-29）：検索ボックス・切替タブ */
.f1-gov-search-box { display: flex; gap: 8px; }
.f1-gov-search-box__input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 999px; font-size: 0.86rem; }
.f1-gov-view-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.f1-gov-view-tabs__item { display: inline-block; font-size: 0.76rem; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: #f4f6f9; color: var(--f1-ink-soft, #5b6472); text-decoration: none; border: 1px solid transparent; }
.f1-gov-view-tabs__item.is-active { background: var(--dc3-brand-blue, #247bfb); color: #fff; }
.f1-gov-view-tabs__item:not(.is-active):hover { border-color: var(--dc3-brand-blue, #247bfb); }

/* 施設ピッカー（2026-07-28） */
.f1-facility-picker { position: relative; }
.f1-facility-picker__suggestions { list-style: none; margin: 2px 0 0; padding: 4px; position: absolute; z-index: 20; left: 0; right: 0; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 10px; box-shadow: var(--f1-shadow-md, 0 6px 20px rgba(20,26,36,0.12)); max-height: 220px; overflow-y: auto; }
.f1-facility-picker__suggestions li { padding: 8px 10px; border-radius: 6px; font-size: 0.82rem; cursor: pointer; }
.f1-facility-picker__suggestions li:hover { background: var(--dc3-brand-blue-light, #deeeff); }
.f1-facility-picker__linked { font-size: 0.72rem; color: var(--dc3-cat-medical, #1f9d6e); font-weight: 700; margin: 4px 0 0; }
.f1-facility-picker__unlinked { font-size: 0.7rem; color: var(--f1-ink-soft, #5b6472); margin: 4px 0 0; }

/* 現在利用施設（子ども単位）2026-07-29：ロック表示＋変更するボタン */
.f1-current-facility { margin-bottom: 10px; }
.f1-current-facility__title { font-size: 0.8rem; font-weight: 800; margin: 0 0 8px; color: var(--f1-ink-soft, #5b6472); }
.f1-current-facility__saved-msg { font-size: 0.78rem; font-weight: 700; color: #1f9d6e; margin: 0 0 8px; }
.f1-current-facility__name { font-size: 0.98rem; font-weight: 800; }
.f1-current-facility__type { display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--dc3-brand-blue, #247bfb); background: var(--dc3-brand-blue-light, #deeeff); border-radius: 999px; padding: 2px 9px; margin-top: 4px; }
.f1-current-facility__meta { font-size: 0.78rem; color: var(--f1-ink-soft, #5b6472); margin-top: 4px; }
.f1-current-facility__empty { font-size: 0.82rem; color: var(--f1-ink-soft, #5b6472); margin: 0 0 8px; }
.f1-current-facility__actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.f1-current-facility__field-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--f1-ink-soft, #5b6472); margin: 10px 0 4px; }

/* Family Home統合タイムライン（2026-07-28） */
/* AIホーム画面刷新（2026-07-29）：今日／今週／来月までの3段構成 */
.f1-home-timeline__bucket { margin-bottom: 18px; }
.f1-home-timeline__bucket-title { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 800; margin: 0 0 8px; }
.f1-home-timeline__bucket-count { font-size: 0.68rem; font-weight: 800; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); border-radius: 999px; padding: 2px 9px; }
.f1-home-timeline__bucket-empty { font-size: 0.78rem; color: var(--f1-ink-soft, #5b6472); margin: 0; }
.f1-home-timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f1-home-timeline__item { border: 1px solid var(--dc3-border, #e6ebf2); border-left: 4px solid var(--dc3-brand-blue, #247bfb); border-radius: 10px; }
.f1-home-timeline__item.is-urgent { border-left-color: #d94b4b; background: #fdecea; }
.f1-home-timeline__link { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-decoration: none; color: inherit; }
.f1-home-timeline__source { font-size: 0.64rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); letter-spacing: 0.02em; }
.f1-home-timeline__item.is-urgent .f1-home-timeline__source { color: #d94b4b; }
.f1-home-timeline__title { font-size: 0.88rem; font-weight: 800; }
.f1-home-timeline__summary { font-size: 0.78rem; color: var(--f1-ink-soft, #5b6472); }
.f1-home-timeline__days { align-self: flex-start; margin-top: 2px; font-size: 0.68rem; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #f4f6f9; color: var(--f1-ink-soft, #5b6472); }
.f1-home-timeline__item.is-urgent .f1-home-timeline__days { background: #d94b4b; color: #fff; }
.f1-home-timeline__documents { margin: 4px 0 2px; padding: 6px 10px; background: #f8fafc; border-radius: 8px; font-size: 0.74rem; line-height: 1.6; }
.f1-home-timeline__documents-label { font-weight: 800; color: var(--f1-ink-soft, #5b6472); margin-right: 6px; }
.f1-home-timeline__documents-list { color: var(--f1-ink, #1f2733); }

/* ライフステージナビ：ステージ帯（現在地→次→将来） */
.f1-stage-strip { margin: 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.f1-stage-strip__track { display: flex; align-items: flex-start; gap: 2px; min-width: max-content; padding: 4px 2px 8px; }
.f1-stage-strip__step { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; text-align: center; }
.f1-stage-strip__dot { width: 22px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--dc3-border, #e6ebf2); color: #fff; font-size: 0; flex-shrink: 0; }
.f1-stage-strip__step--completed .f1-stage-strip__dot { background: #2fa86b; }
.f1-stage-strip__step--current .f1-stage-strip__dot { background: var(--dc3-brand-blue, #247bfb); box-shadow: 0 0 0 4px var(--dc3-brand-blue-light, #deeeff); }
.f1-stage-strip__step--next .f1-stage-strip__dot { background: #fff; border: 2px solid var(--dc3-brand-blue, #247bfb); }
.f1-stage-strip__step--future .f1-stage-strip__dot { background: var(--dc3-border, #e6ebf2); }
.f1-stage-strip__label { font-size: 0.68rem; font-weight: 700; color: var(--f1-ink-soft, #5b6472); line-height: 1.3; }
.f1-stage-strip__step--current .f1-stage-strip__label { color: var(--dc3-brand-blue, #247bfb); font-weight: 900; }
.f1-stage-strip__step--next .f1-stage-strip__label { color: var(--f1-ink, #1f2733); font-weight: 800; }
.f1-stage-strip__facility { font-size: 0.62rem; font-weight: 800; color: #fff; background: var(--dc3-brand-blue, #247bfb); border-radius: 999px; padding: 2px 8px; margin-top: 1px; }
.f1-stage-strip__hint { font-size: 0.6rem; color: var(--f1-ink-soft, #5b6472); line-height: 1.3; }
.f1-stage-strip__arrow { color: var(--dc3-border, #e6ebf2); font-size: 0.9rem; padding-top: 3px; flex-shrink: 0; }

.f1-overview-card__stage { font-size: 0.68rem; font-weight: 700; color: var(--dc3-brand-blue, #247bfb); margin: 2px 0; }

/* Home下部：人生のタイムライン */
.f1-life-timeline__years { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.f1-life-timeline__year-block { display: flex; gap: 14px; padding-left: 2px; border-left: 3px solid var(--dc3-brand-blue-light, #deeeff); }
.f1-life-timeline__year { font-size: 0.92rem; font-weight: 900; color: var(--dc3-brand-blue, #247bfb); min-width: 62px; padding-left: 10px; }
.f1-life-timeline__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.f1-life-timeline__item { font-size: 0.8rem; color: var(--f1-ink, #1f2733); padding: 4px 0; }
.f1-life-timeline__item.is-estimate { color: var(--f1-ink-soft, #5b6472); }

/* ライフルート強化：準備チェックリスト */
.f1-stage-prep { margin-top: 14px; padding: 12px 14px; background: var(--dc3-surface, #f6f9fd); border-radius: 12px; }
.f1-stage-prep__title { font-size: 0.82rem; font-weight: 800; margin: 0 0 8px; }
.f1-stage-prep__estimate { font-weight: 500; color: var(--f1-ink-soft, #5b6472); font-size: 0.72rem; }
.f1-stage-prep__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.f1-stage-prep__item { font-size: 0.8rem; }
.f1-stage-prep__item-title { font-weight: 700; }
.f1-stage-prep__item-timing { color: var(--f1-ink-soft, #5b6472); font-size: 0.72rem; margin-left: 6px; }

/* ライフルート強化：1/3/5年後チェックポイント */
.f1-milestone-checkpoints { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.f1-milestone-checkpoint { flex: 1; min-width: 96px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--dc3-border, #e6ebf2); text-align: center; }
.f1-milestone-checkpoint__when { display: block; font-size: 0.68rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); }
.f1-milestone-checkpoint__label { display: block; font-size: 0.82rem; font-weight: 800; margin-top: 3px; }

/* ライフルート強化：家族カレンダー */
.f1-family-calendar-toggle { margin: 14px 0; }
.f1-family-calendar-toggle summary { cursor: pointer; font-size: 0.86rem; font-weight: 800; padding: 10px 4px; }
.f1-family-calendar { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.f1-family-calendar__row { display: flex; align-items: baseline; gap: 10px; padding: 7px 8px; border-bottom: 1px solid var(--dc3-border, #e6ebf2); font-size: 0.8rem; }
.f1-family-calendar__who { font-weight: 800; color: var(--dc3-brand-blue, #247bfb); min-width: 70px; flex-shrink: 0; }
.f1-family-calendar__title { flex: 1; color: var(--f1-ink, #1f2733); }
.f1-family-calendar__date { font-size: 0.72rem; color: var(--f1-ink-soft, #5b6472); flex-shrink: 0; }

/* ライフルート強化：先回り案内文・施設関連バッジ */
.f1-lookahead-message { font-size: 0.8rem; background: var(--dc3-accent-yellow-tint, #fff8e0); color: #7a5a00; padding: 8px 12px; border-radius: 10px; margin: 8px 0; display: flex; align-items: center; gap: 6px; }
.f1-home-timeline__facility-badge { display: inline-block; margin-left: 6px; font-size: 0.6rem; font-weight: 800; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); border-radius: 999px; padding: 1px 7px; }

/* 送迎ルート登録 */
.f1-checkbox-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; padding: 5px 10px; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 999px; cursor: pointer; }
.f1-checkbox-chip input { margin: 0; }
.f1-pickup-route-summary { margin-top: 8px; padding: 8px 10px; background: var(--dc3-surface, #f6f9fd); border-radius: 10px; }
.f1-pickup-route-summary__label { font-size: 0.68rem; font-weight: 800; color: var(--f1-ink-soft, #5b6472); margin: 0 0 4px; }
.f1-pickup-route-summary__row { display: flex; flex-direction: column; gap: 1px; padding: 3px 0; font-size: 0.78rem; }
.f1-pickup-route-summary__path { font-weight: 700; }
.f1-pickup-route-summary__participants { font-size: 0.7rem; color: var(--f1-ink-soft, #5b6472); }
.f1-proc-card__actions-primary summary::-webkit-details-marker { display: none; }

.f1-proc-child-group { margin-bottom: 22px; }
.f1-proc-child-group__title { font-size: 0.98rem; font-weight: 800; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1.5px solid var(--dc3-border, #e6ebf2); }
.f1-proc-tier-group { margin-bottom: 14px; }
.f1-proc-tier-group__label { font-size: 0.74rem; font-weight: 800; color: var(--f1-ink-soft, #5b6472); letter-spacing: 0.02em; margin-bottom: 6px; }

@media (max-width: 480px) {
	.f1-proc-card-grid { grid-template-columns: 1fr; }
	.f1-proc-card__actions .f1-btn { flex: 1 1 auto; min-height: 40px; } /* スマホでタップしやすいサイズを確保 */
	.f1-proc-card__actions-primary .f1-btn,
	.f1-proc-card__actions-primary summary.f1-btn { flex: 1 1 auto; min-height: 40px; }
}

/* 2026-07-22：保護者利用「完全無料」の明示（登録画面バナー・Family Home/Passportバッジ） */
.f1-free-banner { text-align: center; background: var(--f1-color-success-tint, #e6f7f0); border: 1px solid var(--f1-color-success, #1f9d6e); border-radius: 16px; padding: 20px 16px; margin-bottom: 16px; }
.f1-free-banner__emoji { font-size: 1.8rem; line-height: 1; margin-bottom: 8px; }
.f1-free-banner__title { font-size: 1rem; font-weight: 800; line-height: 1.6; color: var(--f1-color-success, #1f9d6e); margin: 0 0 12px; }
.f1-free-banner__list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 700; }
.f1-free-banner__note { margin: 0; font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); }

.f1-free-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; padding: 6px 14px; border-radius: 999px; background: var(--f1-color-success-tint, #e6f7f0); color: var(--f1-color-success, #1f9d6e); text-decoration: none; margin-top: 8px; }
.f1-free-badge__dot { font-size: 0.7rem; }

/* 2026-07-22：協賛申込フォーム共通スタイル・地域連携施設バッジ */
.f1-form-label { display: block; margin: 12px 0 4px; font-size: 0.82rem; font-weight: 700; }
.f1-form-input, .f1-form-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 8px; font-size: 0.9rem; font-family: inherit; }
.f1-form-textarea { resize: vertical; }
.dc-badge--service-listing { background: var(--dc3-cat-lesson-tint, #fdf1e6); color: var(--dc3-cat-lesson, #c97a2b); }

/* ==========================================================================
   Family Home完成（3秒で理解できるダッシュボード）：挨拶・今日のおすすめアクション・
   現在地・お知らせ・お気に入り
   ========================================================================== */
.f1-home-greeting { font-size: 0.86rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 14px; line-height: 1.7; }

.f1-home-hero-action { background: linear-gradient(135deg, var(--dc3-brand-blue, #247bfb), #1462cc); border-radius: 18px; padding: 16px 18px 14px; color: #fff; margin-bottom: 16px; }
.f1-home-hero-action__eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; margin: 0 0 6px; }
.f1-home-hero-action__title { font-size: 1.02rem; font-weight: 800; line-height: 1.5; margin: 0 0 4px; }
.f1-home-hero-action__meta { font-size: 0.78rem; opacity: 0.92; margin: 0 0 10px; }
.f1-home-hero-action__btn { display: inline-flex; align-items: center; gap: 5px; background: #fff; color: #1462cc; font-size: 0.78rem; font-weight: 800; padding: 8px 14px; border-radius: 10px; text-decoration: none; }

.f1-home-position { background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 16px; padding: 13px 15px; margin-bottom: 16px; }
.f1-home-position__label { font-size: 0.68rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); margin-bottom: 4px; }
.f1-home-position__name { font-size: 0.95rem; font-weight: 800; margin-bottom: 9px; }
.f1-home-position__name span { font-size: 0.78rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); margin-left: 6px; }
.f1-home-position__row { display: flex; gap: 16px; }
.f1-home-position__col { flex: 1; }
.f1-home-position__col-label { font-size: 0.68rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); margin-bottom: 4px; }
.f1-home-position__col ul { margin: 0; padding: 0; list-style: none; font-size: 0.76rem; line-height: 1.8; }
.f1-home-position__col--done li::before { content: "✔ "; color: var(--f1-color-success, #1f9d6e); font-weight: 800; }
.f1-home-position__col--next li::before { content: "・"; color: var(--dc3-brand-blue, #247bfb); }
.f1-home-position__link { display: block; text-align: right; font-size: 0.74rem; font-weight: 700; color: var(--dc3-brand-blue, #247bfb); text-decoration: none; margin-top: 8px; }

.f1-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.f1-section__more { font-size: 0.74rem; font-weight: 700; color: var(--dc3-brand-blue, #247bfb); text-decoration: none; white-space: nowrap; }

.f1-home-notice { display: flex; gap: 8px; background: #f6effb; border: 1px solid #c9a3e6; border-radius: 13px; padding: 10px 12px; }
.f1-home-notice__dot { width: 7px; height: 7px; border-radius: 50%; background: #a34fd1; flex-shrink: 0; margin-top: 5px; }
.f1-home-notice__title { font-size: 0.8rem; font-weight: 800; color: inherit; text-decoration: none; display: block; }
.f1-home-notice__date { font-size: 0.66rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; }

.f1-home-fav-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.f1-home-fav-row::-webkit-scrollbar { display: none; }
.f1-home-fav-chip { flex-shrink: 0; width: 110px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 13px; padding: 10px 11px; text-decoration: none; color: inherit; }
.f1-home-fav-chip__title { font-size: 0.76rem; font-weight: 800; line-height: 1.4; }

.f1-notify-bell { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); font-size: 0.78rem; font-weight: 800; color: #a34fd1; text-decoration: none; }

/* Family Medical Passport */
.f1-mp-tag { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472); cursor: pointer; user-select: none; }
.f1-mp-tag.is-on, .f1-mp-tag:has(input:checked) { background: var(--dc3-cat-medical-tint, #e6f7f0); border-color: var(--dc3-cat-medical, #1f9d6e); color: var(--dc3-cat-medical, #1f9d6e); }
.f1-mp-chart { margin-bottom: 4px; }
.f1-mp-chart__range { font-size: 0.68rem; color: var(--dc3-ink-soft, #5b6472); margin: 4px 0 0; }

/* 行政手続きTimeline：時系列・現在地モック（共通UIルール適用） */
:root {
  --f1-tl-urgent: #d9622f; --f1-tl-urgent-tint: #fbeae1;
  --f1-tl-warn: #a3760a; --f1-tl-warn-tint: #fff8e0;
  --f1-tl-soon: var(--dc3-cat-medical, #1f9d6e); --f1-tl-soon-tint: var(--dc3-cat-medical-tint, #e4f3ef);
  --f1-tl-later: var(--f1-primary, #247bfb); --f1-tl-later-tint: var(--f1-primary-tint, #deeeff);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --f1-tl-urgent: #f0855a; --f1-tl-urgent-tint: #3a2318; --f1-tl-warn: #e0b24e; --f1-tl-warn-tint: #3a2f13; }
}
:root[data-theme="dark"] { --f1-tl-urgent: #f0855a; --f1-tl-urgent-tint: #3a2318; --f1-tl-warn: #e0b24e; --f1-tl-warn-tint: #3a2f13; }

.f1-tl-position { background: linear-gradient(135deg, var(--f1-primary-tint, #deeeff), #fff 75%); border: 1px solid var(--f1-primary, #247bfb); border-radius: 20px; padding: 16px 17px; margin-bottom: 18px; }
.f1-tl-position__eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f1-primary, #247bfb); margin: 0 0 6px; }
.f1-tl-position__name { font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; }
.f1-tl-position__facts { display: flex; flex-wrap: wrap; gap: 6px; }
.f1-tl-fact { font-size: 0.68rem; font-weight: 700; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472); padding: 4px 10px; border-radius: 999px; }
.f1-tl-position__next { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--f1-border, #c6cedc); }
.f1-tl-position__next-label { font-size: 0.62rem; font-weight: 800; color: var(--f1-primary, #1462cc); letter-spacing: 0.04em; margin: 0 0 3px; }
.f1-tl-position__next-title { font-size: 0.82rem; font-weight: 800; margin: 0; color: var(--dc3-ink, #1c2430); }
.f1-tl-position__next-title span { display: block; font-size: 0.68rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; }
.f1-tl-position__stats { display: flex; gap: 10px; margin-top: 12px; }
.f1-tl-stat { flex: 1; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); border-radius: 12px; padding: 8px 10px; text-align: center; }
.f1-tl-stat__num { display: block; font-size: 1.05rem; font-weight: 800; color: var(--dc3-ink, #1c2430); font-variant-numeric: tabular-nums; }
.f1-tl-stat__label { display: block; font-size: 0.64rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; }

.f1-tl-axis { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 0.62rem; color: var(--dc3-ink-soft, #5b6472); padding: 0 2px 10px; }
.f1-tl-axis .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 3px; }
.f1-tl-axis .arrow { opacity: 0.5; }

.f1-tl-past { margin-bottom: 10px; }
.f1-tl-past summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: #fff; border: 1px dashed var(--f1-border, #e6ebf2); border-radius: 14px; color: var(--dc3-ink-soft, #5b6472); font-size: 0.78rem; font-weight: 700; }
.f1-tl-past summary::-webkit-details-marker { display: none; }
.f1-tl-past[open] summary { border-radius: 14px 14px 0 0; border-bottom: none; }
.f1-tl-past-list { background: #fff; border: 1px dashed var(--f1-border, #e6ebf2); border-top: none; border-radius: 0 0 14px 14px; padding: 4px 13px 10px; }
.f1-tl-past-item { padding: 6px 0; font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); border-bottom: 1px solid var(--f1-border, #e6ebf2); text-decoration: line-through; text-decoration-color: var(--dc3-ink-soft, #8993a4); }
.f1-tl-past-item:last-child { border-bottom: none; }
/* 完了日・取り消しボタン付きの完了済み表示（テキストのみ表示する旧レイアウトとは別の構造化表示。
   :has()はLINE内蔵ブラウザ等の互換性を考慮せず専用クラスで分岐する） */
.f1-tl-past-item--structured { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; text-decoration: none; }
.f1-tl-past-item__title { font-weight: 700; text-decoration: line-through; text-decoration-color: var(--dc3-ink-soft, #8993a4); }
.f1-tl-past-item__date { font-size: 0.68rem; color: var(--f1-ink-soft, #5b6472); }
.f1-tl-past-item form { margin-left: auto; }

/* 複数選択して一括完了 */
.f1-proc-card { position: relative; }
.f1-proc-card__select { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--f1-ink-soft, #5b6472); cursor: pointer; padding: 6px; }
.f1-proc-card__select input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
.f1-bulk-action-bar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px; background: #1f2733; color: #fff; border-radius: 14px; padding: 12px 16px; margin: 14px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.2); flex-wrap: wrap; }
.f1-bulk-action-bar__count { font-size: 0.8rem; font-weight: 800; margin-right: auto; }
.f1-bulk-action-bar .f1-btn--outline { border-color: rgba(255,255,255,0.4); color: #fff; }
.f1-bulk-action-bar .f1-btn--primary { background: var(--dc3-brand-blue, #247bfb); }

/* 公的健診／任意の定期検診の区別バッジ */
.f1-proc-card__official-badge { display: inline-block; font-size: 0.6rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.f1-proc-card__official-badge--official { background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); }
.f1-proc-card__official-badge--optional { background: #f4f0ff; color: #6a3fc2; }

/* おすすめ施設スロット（児童クラブ・歯科等、行政手続き連携） */
.f1-reco-slot__lead { font-size: 0.86rem; font-weight: 700; margin: 4px 0 12px; }
.f1-reco-slot__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.f1-reco-card { position: relative; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 16px; padding-top: 28px; }
.f1-reco-card__ad-label { position: absolute; top: 10px; left: 16px; font-size: 0.62rem; font-weight: 800; color: #a3760a; background: var(--dc3-accent-yellow-tint, #fff8e0); border-radius: 999px; padding: 2px 9px; }
.f1-reco-card__name { font-weight: 900; font-size: 0.98rem; margin-bottom: 2px; }
.f1-reco-card__type { font-size: 0.72rem; color: var(--f1-ink-soft, #5b6472); margin-bottom: 8px; }
.f1-reco-card__badges { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.f1-reco-card__badge { font-size: 0.78rem; color: var(--f1-ink, #1f2733); }
.f1-reco-card__badge.is-highlight { font-weight: 800; color: #1f9d6e; }
.f1-reco-card__actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.f1-reco-card__photo { margin: -12px -4px 8px; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; }
.f1-reco-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.f1-reco-card__review { font-size: 0.78rem; color: #e0a325; font-weight: 700; margin-bottom: 4px; }
.f1-reco-card__distance { font-size: 0.7rem; color: var(--f1-ink-soft, #5b6472); margin-bottom: 6px; min-height: 1em; }
.f1-reco-card__ai-reasons { background: var(--dc3-surface, #f6f9fd); border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; }
.f1-reco-card__ai-reasons-label { font-size: 0.68rem; font-weight: 800; margin: 0 0 4px; }
.f1-reco-card__ai-reasons-label span { font-weight: 400; color: var(--f1-ink-soft, #5b6472); font-size: 0.62rem; display: block; }
.f1-reco-card__ai-reasons ul { list-style: none; margin: 0; padding: 0; font-size: 0.76rem; display: flex; flex-direction: column; gap: 2px; }
.f1-reco-card--current { border-color: var(--dc3-brand-blue, #247bfb); border-width: 2px; }
.f1-reco-card__ad-label--current { color: #fff; background: var(--dc3-brand-blue, #247bfb); }

/* Family One パートナー枠（2026-08-04）：契約施設を「広告」ではなく信頼できる提携施設として
   見せるための控えめな差別化。派手な金色広告バッジにはせず、ブランドカラーの淡いトーンで
   「安心感」を出す（無料掲載カードとの視覚的な断絶を作りすぎない）。 */
.f1-reco-card--partner { border-color: var(--dc3-brand-blue-light, #b9d6ff); background: linear-gradient(180deg, #f6faff 0%, #ffffff 60%); }
.f1-reco-card__ad-label--partner { color: var(--dc3-brand-blue, #247bfb); background: var(--dc3-brand-blue-light, #deeeff); }
.f1-reco-slot__group-heading {
  grid-column: 1 / -1;
  margin: 4px 0 -2px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--dc3-ink-soft, #5b6472);
  padding-top: 10px;
  border-top: 1px solid var(--dc3-border, #e6ebf2);
}
.f1-reco-slot__group-heading:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.f1-reco-slot__group-heading--partner {
  color: var(--dc3-brand-blue, #247bfb);
  border-top-color: var(--dc3-brand-blue-light, #b9d6ff);
}
.f1-reco-slot__group-heading span { display: block; font-size: 0.7rem; font-weight: 600; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; }

/* ==========================================================================
   Family One Update（更新履歴）：2026-08-04
   「開発中」ではなく「より便利になった」という前向きな印象を優先し、派手な
   通知色（赤・警告色）は使わずブランドブルーの淡いトーンでまとめる。
   ========================================================================== */
.f1-update-widget {
  background: linear-gradient(180deg, #f6faff 0%, #ffffff 70%);
  border: 1px solid var(--dc3-brand-blue-light, #deeeff);
  border-radius: var(--f1-radius-lg, 16px);
  padding: 16px 18px;
  margin: 0 0 18px;
}
.f1-update-widget__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.f1-update-widget__badge {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
  color: #fff; background: var(--dc3-brand-blue, #247bfb);
  padding: 3px 10px; border-radius: 999px;
}
.f1-update-widget__month { font-size: 0.78rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); }
.f1-update-widget__lead { font-size: 0.8rem; font-weight: 800; margin: 8px 0 6px; }
.f1-update-widget__list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.f1-update-widget__list li { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--dc3-ink, #1c2430); }
.f1-update-widget__list li svg { color: var(--dc3-brand-blue, #247bfb); flex-shrink: 0; }
.f1-update-widget__more { font-size: 0.8rem; font-weight: 700; color: var(--dc3-brand-blue, #247bfb); text-decoration: none; }

.f1-update-history-group { padding-top: 20px; }
.f1-update-history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.f1-update-history-list li { background: var(--dc3-surface, #f6f9fd); border-radius: 12px; padding: 12px 14px; }
.f1-update-history-list__title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.88rem; margin: 0; }
.f1-update-history-list__title svg { color: var(--dc3-brand-blue, #247bfb); flex-shrink: 0; }
.f1-update-history-list__detail { font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.7; margin: 6px 0 0 22px; }

/* Family One Next Stage：親子ミッション */
.f1-mission-widget {
  background: linear-gradient(180deg, #f5faf3 0%, #ffffff 70%);
  border: 1px solid var(--f1-color-success-light, #d9efd0);
  border-radius: var(--f1-radius-lg, 16px);
  padding: 16px 18px;
  margin: 0 0 18px;
}
.f1-mission-widget__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.f1-mission-widget__badge {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em;
  color: #fff; background: var(--f1-color-success, #3a9c5a);
  padding: 3px 10px; border-radius: 999px;
}
.f1-mission-widget__list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.f1-mission-widget__list li { display: flex; align-items: flex-start; gap: 10px; }
.f1-mission-widget__check {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--f1-color-success, #3a9c5a);
}
.f1-mission-widget__text { display: flex; flex-direction: column; gap: 2px; }
.f1-mission-widget__title { font-size: 0.86rem; font-weight: 700; color: var(--dc3-ink, #1c2430); }
.f1-mission-widget__detail { font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.6; }
.f1-mission-widget__note { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); margin: 4px 0 0; }
.f1-reco-card__digest { background: var(--dc3-brand-blue-light, #deeeff); border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; }
.f1-reco-card__digest-label { font-size: 0.68rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); margin: 0 0 4px; }
.f1-reco-card__digest ul { list-style: none; margin: 0; padding: 0; font-size: 0.76rem; display: flex; flex-direction: column; gap: 2px; }
.f1-reco-card__personalized-reason { background: var(--dc3-accent-yellow-tint, #fff8e0); border-radius: 10px; padding: 8px 10px; margin: 4px 0 10px; }
.f1-reco-card__personalized-reason-label { font-size: 0.68rem; font-weight: 800; color: #a3760a; margin: 0 0 4px; }
.f1-reco-card__personalized-reason p:last-child { font-size: 0.8rem; margin: 0; }

/* 口コミ機能 */
.f1-reviews__category-summary { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 14px; padding: 0; font-size: 0.8rem; }
.f1-reviews__ai-summary { background: var(--dc3-surface, #f6f9fd); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.f1-reviews__ai-summary-label { font-size: 0.68rem; font-weight: 800; color: var(--f1-ink-soft, #5b6472); margin: 0 0 4px; }
.f1-reviews__sort { margin-bottom: 12px; font-size: 0.82rem; }
.f1-reviews__sort select { margin-left: 4px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--dc3-border, #e6ebf2); }
.f1-reviews__list { display: flex; flex-direction: column; gap: 12px; }
.f1-review-card { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 14px 16px; }
.f1-review-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.f1-review-card__stars { color: #e0a325; font-weight: 800; }
.f1-review-card__reviewer { font-size: 0.78rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); }
.f1-review-card__date { font-size: 0.7rem; color: var(--f1-ink-soft, #5b6472); margin-left: auto; }
.f1-review-card__comment { font-size: 0.86rem; line-height: 1.7; margin: 0 0 8px; }
.f1-review-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.f1-review-card__tag { font-size: 0.7rem; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); border-radius: 999px; padding: 2px 9px; }
.f1-review-card__reply { margin-top: 8px; padding: 10px 12px; background: var(--dc3-accent-yellow-tint, #fff8e0); border-radius: 10px; }
.f1-review-card__reply-label { font-size: 0.66rem; font-weight: 800; color: #a3760a; }
.f1-review-card__report { margin-top: 6px; }
.f1-review-card__report-btn { background: none; border: none; font-size: 0.68rem; color: var(--f1-ink-soft, #5b6472); text-decoration: underline; cursor: pointer; padding: 0; }
.f1-review-form-locked { background: var(--dc3-surface, #f6f9fd); border-radius: 12px; padding: 16px; text-align: center; }
.f1-review-form { margin-top: 10px; }
.f1-review-form__label { display: block; font-size: 0.8rem; font-weight: 800; margin: 12px 0 6px; }
/* 星評価の入力（2026-08-12 修正）
   DOMは 5→1 の順に並び、row-reverse で見た目は 1→5（左→右）になる。
   input を label の外へ出したため、
     input:checked ~ label span
   で「選んだ星」と「それより小さい値の星（DOM上の後続）」を
   まとめて着色できる＝選択が累積表示される。
   以前は input が label の内側にあり、選んだ星1つしか着色されず、
   ★5に見えていたのはホバー中だけだった（別項目へマウスを移すと戻って見えた）。 */
.f1-review-star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.f1-review-star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.f1-review-star-input label { cursor: pointer; line-height: 1; }
.f1-review-star-input span { font-size: 1.4rem; color: var(--dc3-border, #e6ebf2); cursor: pointer; }
/* 選択状態：選んだ星と、それ以下の星を着色する */
.f1-review-star-input input:checked ~ label span { color: #e0a325; }
/* ホバー中：指している星と、それ以下の星を着色する（選択状態より優先） */
.f1-review-star-input:hover input ~ label span { color: var(--dc3-border, #e6ebf2); }
.f1-review-star-input label:hover span,
.f1-review-star-input label:hover ~ label span { color: #e0a325; }
/* キーボード操作時の位置が分かるようにする */
.f1-review-star-input input:focus-visible + label span { outline: 2px solid var(--dc3-brand-blue, #247bfb); outline-offset: 2px; border-radius: 3px; }
/* 読み上げ用の数値（画面には出さない） */
.f1-review-star-input__sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.f1-review-form__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.f1-review-form__textarea { width: 100%; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 10px; padding: 10px; font-size: 0.85rem; }
.f1-reviews__form-toggle { margin-top: 16px; }
.f1-reviews__form-toggle summary { cursor: pointer; font-weight: 800; font-size: 0.88rem; padding: 10px 0; }
.notice-like { background: #eafaf1; color: #1f9d6e; border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; margin-bottom: 10px; }

/* 口コミ機能：発見導線・写真・トップページ導線（2026-07-29追加） */
.f1-facility-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--dc3-border, #e6ebf2); margin-bottom: 16px; position: sticky; top: 0; background: #fff; z-index: 10; }
.f1-facility-tabs__item { padding: 10px 16px; font-size: 0.84rem; font-weight: 800; color: var(--f1-ink-soft, #5b6472); text-decoration: none; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; }
.f1-facility-tabs__item.is-active { color: var(--dc3-brand-blue, #247bfb); border-bottom-color: var(--dc3-brand-blue, #247bfb); }
.f1-facility-tabs__rating { font-size: 0.7rem; color: #e0a325; font-weight: 700; }
.f1-facility-tabs__rating--none { color: var(--f1-ink-soft, #5b6472); font-weight: 400; }
.f1-reviews__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.f1-reviews__write-btn { font-size: 0.8rem; padding: 8px 16px; }
.f1-reviews__ai-summary--pending { opacity: 0.75; }
.f1-review-card__photos { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.f1-review-card__photo { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; }
.dc3-fcard__review { font-size: 0.76rem; color: #e0a325; font-weight: 700; margin-top: 2px; }
.f1-review-widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.f1-review-widget__title { font-size: 0.88rem; font-weight: 800; margin: 0 0 8px; }
.f1-review-widget__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f1-review-widget__list--ranked { list-style: decimal; padding-left: 20px; }
.f1-review-widget__list a { text-decoration: none; color: inherit; display: block; font-size: 0.8rem; }
.f1-review-widget__snippet { display: block; font-size: 0.72rem; color: var(--f1-ink-soft, #5b6472); }
.f1-review-widget__disclaimer { font-size: 0.66rem; color: var(--f1-ink-soft, #5b6472); margin: -4px 0 8px; }

/* Family One独自価値の強化（2026-07-29）：認証口コミ・AI要約・写真ギャラリー・タグランキング・AIおすすめ理由 */
.f1-review-card--compact { padding: 12px 14px; }
.f1-review-card__verified-badge { font-size: 0.68rem; font-weight: 800; color: #fff; background: #1f9d6e; border-radius: 999px; padding: 2px 9px; }
.f1-reviews__ai-summary-categories { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.78rem; display: flex; flex-direction: column; gap: 3px; }
.f1-photo-gallery { margin: 14px 0; }
.f1-photo-gallery__title { font-size: 0.9rem; font-weight: 800; margin: 0 0 8px; }
.f1-photo-gallery__group { margin-bottom: 12px; }
.f1-photo-gallery__group-title { font-size: 0.76rem; font-weight: 700; color: var(--f1-ink-soft, #5b6472); margin: 0 0 6px; }
.f1-photo-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.f1-photo-gallery__thumb { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 1 / 1; }
.f1-photo-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.f1-lightbox { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(10,14,20,0.9); align-items: center; justify-content: center; padding: 24px; }
.f1-lightbox:target { display: flex; }
.f1-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.f1-lightbox__close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 2rem; line-height: 1; text-decoration: none; }
.f1-reviews__tag-ranking { margin: 12px 0; }
.f1-reviews__tag-ranking-title { font-size: 0.78rem; font-weight: 800; color: var(--f1-ink-soft, #5b6472); margin: 0 0 6px; }
.f1-reviews__tag-ranking-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.f1-reviews__tag-ranking-list .f1-checkbox-chip.is-active { background: var(--dc3-brand-blue, #247bfb); color: #fff; }
.f1-reviews__tag-clear { font-size: 0.72rem; color: var(--f1-ink-soft, #5b6472); text-decoration: underline; }
.f1-reviews__similar-family { background: var(--dc3-brand-blue-light, #deeeff); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.f1-reviews__similar-family-title { font-size: 0.84rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); margin: 0 0 10px; }
.f1-reviews__list--similar { gap: 10px; }
.f1-review-form__photos { display: flex; flex-direction: column; gap: 8px; }
.f1-review-form__photo-slot { display: flex; gap: 8px; align-items: center; }
.f1-review-form__photo-slot input[type="file"] { flex: 1; min-width: 0; font-size: 0.76rem; }
.f1-review-form__photo-slot select { border-radius: 8px; border: 1px solid var(--dc3-border, #e6ebf2); padding: 4px 6px; font-size: 0.76rem; }
.dc3-fcard__ai-reasons { background: var(--dc3-surface, #f6f9fd); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.dc3-fcard__ai-reasons-label { font-size: 0.7rem; font-weight: 800; margin: 0 0 4px; }
.dc3-fcard__ai-reasons-disclaimer { font-weight: 400; color: var(--f1-ink-soft, #5b6472); font-size: 0.64rem; display: block; }
.dc3-fcard__ai-reasons ul { list-style: none; margin: 0; padding: 0; font-size: 0.76rem; display: flex; flex-direction: column; gap: 2px; }
.dc3-fcard--free-compact__ai-reasons { color: var(--f1-ink-soft, #5b6472); }

/* 行政へのご意見・待ち時間連携 */
.f1-proc-card__gov-links { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--dc3-border, #e6ebf2); display: flex; flex-direction: column; gap: 10px; }
.f1-required { font-size: 0.62rem; font-weight: 800; color: #a00; background: #fdecea; border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.f1-gov-feedback-toggle { margin-top: 8px; }
.f1-gov-feedback-toggle summary { cursor: pointer; font-weight: 800; font-size: 0.82rem; padding: 8px 0; color: var(--dc3-brand-blue, #247bfb); }
.f1-gov-feedback-form, .f1-gov-feedback-toggle form { display: flex; flex-direction: column; }
.f1-wait-time-summary { background: var(--dc3-surface, #f6f9fd); border-radius: 12px; padding: 14px 16px; margin: 8px 0; }
.f1-wait-time-summary__place { font-size: 0.78rem; font-weight: 800; margin: 0 0 6px; }
.f1-wait-time-summary__headline { font-size: 0.82rem; margin: 0 0 8px; }
.f1-wait-time-summary__headline strong { font-size: 1.3rem; color: var(--dc3-brand-blue, #247bfb); }
.f1-wait-time-summary__stats { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.76rem; display: flex; flex-direction: column; gap: 2px; }
.f1-wait-time-summary__quiet { font-size: 0.78rem; color: #1f9d6e; margin: 2px 0; }
.f1-wait-time-summary__busy { font-size: 0.78rem; color: #c0392b; margin: 2px 0; }
.f1-wait-time-summary__confidence { font-size: 0.68rem; color: var(--f1-ink-soft, #5b6472); margin: 8px 0 2px; }
.f1-wait-time-summary__updated { font-size: 0.66rem; color: var(--f1-ink-soft, #5b6472); margin: 0; }
.f1-wait-time-summary__collecting { font-size: 0.82rem; color: var(--f1-ink-soft, #5b6472); }

.f1-tl-road { position: relative; padding-left: 24px; margin-top: 14px; }
.f1-tl-road::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(to bottom, var(--f1-tl-urgent) 0%, var(--f1-tl-soon) 34%, var(--f1-tl-later) 68%, var(--f1-border, #e6ebf2) 100%); border-radius: 2px; }
.f1-tl-waypoint { position: relative; padding-bottom: 22px; }
.f1-tl-waypoint:last-child { padding-bottom: 2px; }
.f1-tl-waypoint__dot { position: absolute; left: -24px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2.5px solid var(--f1-border, #c6cedc); }
.f1-tl-waypoint--now .f1-tl-waypoint__dot { border-color: var(--f1-tl-urgent); box-shadow: 0 0 0 4px var(--f1-tl-urgent-tint); }
.f1-tl-waypoint--soon .f1-tl-waypoint__dot { border-color: var(--f1-tl-soon); }
.f1-tl-waypoint--later .f1-tl-waypoint__dot { border-color: var(--f1-tl-later); }
.f1-tl-waypoint__label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 800; margin-bottom: 10px; }
.f1-tl-waypoint__label .cap { font-size: 0.62rem; font-weight: 700; color: var(--f1-tl-urgent); background: var(--f1-tl-urgent-tint); padding: 1px 7px; border-radius: 999px; }
.f1-tl-waypoint--now .f1-tl-waypoint__label { color: var(--f1-tl-urgent); }
.f1-tl-waypoint--soon .f1-tl-waypoint__label { color: var(--f1-tl-soon); }
.f1-tl-waypoint__empty { font-size: 0.76rem; color: var(--dc3-ink-soft, #8993a4); background: #fff; border: 1px dashed var(--f1-border, #e6ebf2); border-radius: 14px; padding: 11px 13px; }

.f1-tl-badge--now { background: var(--f1-tl-urgent-tint); color: var(--f1-tl-urgent); }
.f1-tl-badge--check { background: var(--f1-tl-warn-tint); color: var(--f1-tl-warn); }
.f1-tl-badge--soon { background: var(--f1-tl-soon-tint); color: var(--f1-tl-soon); }
.f1-tl-badge--later { background: var(--f1-tl-later-tint); color: var(--f1-primary, #1462cc); }
.f1-tl-badge--done { background: var(--f1-color-success-tint, #e6f7f0); color: var(--f1-color-success, #1f9d6e); }

.f1-tl-facility-links { display: flex; flex-direction: column; gap: 8px; margin: 22px 0 4px; }
.f1-tl-facility-link { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); border-radius: 14px; padding: 12px 14px; text-decoration: none; color: var(--dc3-ink, #1c2430); box-shadow: 0 2px 14px rgba(28,36,48,0.06); }
.f1-tl-facility-link__icon { width: 30px; height: 30px; border-radius: 10px; background: var(--f1-primary-tint, #deeeff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--f1-primary, #1462cc); }
.f1-tl-facility-link__title { font-size: 0.78rem; font-weight: 800; flex: 1; }
.f1-tl-facility-link__arrow { color: var(--dc3-ink-soft, #8993a4); }

/* Family One標準Timeline UI：ドメインバッジ（Life Route／Home／Medical Passportで共通利用） */
.f1-domain-badge { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; margin-right: 6px; }
.f1-domain-badge--gov { background: #E7EEFA; color: #4A7CC9; }
.f1-domain-badge--edu { background: #F6ECE0; color: #B0733C; }
.f1-domain-badge--fac { background: var(--dc3-cat-medical-tint, #e4f3ef); color: var(--dc3-cat-medical, #3E8E7E); }
.f1-domain-badge--med { background: #FAE7EA; color: #C15C6B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .f1-domain-badge--gov { background: #1D2A40; color: #7DA3E0; }
  :root:not([data-theme="light"]) .f1-domain-badge--edu { background: #3A2E1C; color: #D2A063; }
  :root:not([data-theme="light"]) .f1-domain-badge--med { background: #3A1E22; color: #E08A96; }
}
:root[data-theme="dark"] .f1-domain-badge--gov { background: #1D2A40; color: #7DA3E0; }
:root[data-theme="dark"] .f1-domain-badge--edu { background: #3A2E1C; color: #D2A063; }
:root[data-theme="dark"] .f1-domain-badge--med { background: #3A1E22; color: #E08A96; }

/* Family One標準Timeline UI：家族全体の俯瞰ストリップ（Life Route／Home共通） */
.f1-overview-strip { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 18px; scrollbar-width: none; }
.f1-overview-strip::-webkit-scrollbar { display: none; }
.f1-overview-card { flex-shrink: 0; width: 138px; background: #fff; border: 1.5px solid var(--f1-border, #e6ebf2); border-radius: 16px; padding: 12px; box-shadow: 0 2px 14px rgba(28,36,48,0.06); text-align: left; text-decoration: none; color: inherit; display: block; }
.f1-overview-card.is-active { border-color: var(--f1-primary, #247bfb); background: var(--f1-primary-tint, #deeeff); }
.f1-overview-card__name { font-size: 0.84rem; font-weight: 800; margin: 0 0 6px; }
.f1-overview-card__facts { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.f1-overview-card__fact { font-size: 0.56rem; font-weight: 700; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472); padding: 2px 7px; border-radius: 999px; }
.f1-overview-card__stage-tag { font-size: 0.56rem; font-weight: 700; color: var(--f1-primary, #1462cc); background: var(--f1-primary-tint, #deeeff); border: 1px solid var(--f1-primary, #247bfb); padding: 2px 7px; border-radius: 999px; }
.f1-overview-card__next-label { font-size: 0.52rem; font-weight: 700; color: var(--dc3-ink-soft, #8993a4); margin: 8px 0 2px; text-transform: uppercase; letter-spacing: 0.03em; }
.f1-overview-card__next { font-size: 0.68rem; font-weight: 800; line-height: 1.45; color: var(--dc3-ink, #1c2430); }
.f1-overview-card__next-deadline { display: block; font-size: 0.58rem; color: var(--f1-tl-urgent, #d9622f); font-weight: 700; margin-top: 2px; }

/* Family One標準Timeline UI：Life Route専用の見出し区切り */
.f1-lr-divider { display: flex; align-items: center; gap: 10px; margin: 4px 2px 16px; }
.f1-lr-divider__line { flex: 1; height: 1px; background: var(--f1-border, #e6ebf2); }
.f1-lr-divider__label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dc3-ink-soft, #8993a4); white-space: nowrap; }

/* Family Home v3：家族全体サマリー（3指標） */
.f1-home-fsummary { display: flex; gap: 8px; margin-bottom: 14px; }
.f1-home-fsummary__stat { flex: 1; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); border-radius: 14px; padding: 11px 8px; text-align: center; box-shadow: 0 2px 14px rgba(28,36,48,0.06); }
.f1-home-fsummary__num { display: block; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.f1-home-fsummary__num--urgent { color: var(--f1-tl-urgent, #d9622f); }
.f1-home-fsummary__num--notify { color: #a34fd1; }
.f1-home-fsummary__label { display: block; font-size: 0.6rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); margin-top: 2px; }

/* Family Home v3：子ども別1行要約 */
.f1-home-child-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.f1-home-child-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); border-radius: 13px; padding: 10px 13px; text-decoration: none; color: inherit; }
.f1-home-child-row__name { font-size: 0.78rem; font-weight: 800; }
.f1-home-child-row__status { font-size: 0.7rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); display: flex; align-items: center; gap: 5px; }
.f1-home-child-row__status--now { color: var(--f1-tl-urgent, #d9622f); }
.f1-home-child-row__status--soon { color: var(--dc3-cat-medical, #1f9d6e); }
.f1-home-child-row__dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.f1-home-child-row__status--none .f1-home-child-row__dot { background: var(--f1-border, #c6cedc); }

/* Family Home v3：家族の成長ロードマップCTA（目立つ配置） */
.f1-home-lrcta { display: flex; align-items: center; gap: 11px; background: linear-gradient(135deg, var(--dc3-cat-medical, #3e8e7e), #2c6e60); color: #fff; border-radius: 16px; padding: 14px 16px; text-decoration: none; margin-bottom: 18px; box-shadow: 0 2px 14px rgba(28,36,48,0.06); }
.f1-home-lrcta__icon { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.f1-home-lrcta__body { flex: 1; display: flex; flex-direction: column; }
.f1-home-lrcta__title { font-size: 0.84rem; font-weight: 800; margin: 0 0 2px; }
.f1-home-lrcta__desc { font-size: 0.66rem; opacity: 0.9; margin: 0; }
.f1-home-lrcta__arrow { font-size: 1rem; }

/* ==========================================================================
   Family Medical Passport v3：やさしい医療デザイン
   Family Oneの既存ブランドカテゴリカラー（dc3-cat-*）をそのまま再利用し、
   Medicalだけ独立した配色にしない。
   ・受診＝ピンク（cat-mamacare）／予防接種＝ブルー（brand-blue）
   ・健診＝グリーン（cat-medical）／処方薬＝オレンジ（cat-lesson）
   ・身長体重＝パープル（cat-ai）／自由メモ＝グレー
   ========================================================================== */
:root {
  --f1-mp-brand: var(--dc3-cat-mamacare, #ec6f9b);
  --f1-mp-brand-tint: var(--dc3-cat-mamacare-tint, #fdedf3);
  --f1-mp-grad: linear-gradient(180deg, var(--dc3-cat-mamacare, #ec6f9b), #ffd9e4);
  --f1-mp-grad-btn: linear-gradient(135deg, var(--dc3-cat-mamacare, #ec6f9b), #ff8bab);
  --f1-cat-visit: var(--dc3-cat-mamacare, #ec6f9b); --f1-cat-visit-tint: var(--dc3-cat-mamacare-tint, #fdedf3);
  --f1-cat-vaccine: var(--dc3-brand-blue, #247bfb); --f1-cat-vaccine-tint: var(--dc3-brand-blue-light, #deeeff);
  --f1-cat-checkup: var(--dc3-cat-medical, #1f9d6e); --f1-cat-checkup-tint: var(--dc3-cat-medical-tint, #e6f7f0);
  --f1-cat-rx: var(--dc3-cat-lesson, #f2874a); --f1-cat-rx-tint: var(--dc3-cat-lesson-tint, #fef1e8);
  --f1-cat-growth: var(--dc3-cat-ai, #8b6fd1); --f1-cat-growth-tint: var(--dc3-cat-ai-tint, #f0ecfb);
  --f1-cat-memo: var(--dc3-ink-soft, #5b6472); --f1-cat-memo-tint: var(--dc3-surface, #f6f9fd);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --f1-mp-brand-tint: #3a1e2a; --f1-cat-visit-tint: #3a1e2a; --f1-cat-vaccine-tint: #1c2f4d; --f1-cat-checkup-tint: #163527; --f1-cat-rx-tint: #3a2818; --f1-cat-growth-tint: #29223d; --f1-cat-memo-tint: #1f2530; }
}
:root[data-theme="dark"] { --f1-mp-brand-tint: #3a1e2a; --f1-cat-visit-tint: #3a1e2a; --f1-cat-vaccine-tint: #1c2f4d; --f1-cat-checkup-tint: #163527; --f1-cat-rx-tint: #3a2818; --f1-cat-growth-tint: #29223d; --f1-cat-memo-tint: #1f2530; }

/* ①余白：カード間8〜12pxを確保 */
.f1-mp-section { margin-bottom: 20px; }
.f1-mp-card-stack { display: flex; flex-direction: column; gap: 10px; }
.f1-mp-wrap { padding: 4px 2px; }

/* 現在地ゾーン（白→ごく薄いピンクのグラデーション） */
.f1-mp-detail-zone { background: linear-gradient(180deg, #fff 0%, var(--f1-mp-brand-tint) 100%); border: 1px solid var(--f1-border, #e6ebf2); border-radius: 20px; padding: 18px; margin-top: 10px; }

/* 次の予定：白ベース＋ピンクアクセント（赤ベタ塗りにしない） */
.f1-mp-next { background: #fff; border: 1px solid var(--f1-mp-brand-tint); border-left: 4px solid var(--f1-mp-brand); border-radius: 16px; padding: 16px 17px; margin-bottom: 14px; }
.f1-mp-next__eyebrow { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f1-mp-brand); margin: 0 0 6px; }
.f1-mp-next__title { font-size: 0.95rem; font-weight: 800; margin: 0 0 3px; }
.f1-mp-next__date { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 9px; }
.f1-mp-next__countdown { display: inline-flex; align-items: center; gap: 5px; background: var(--f1-mp-grad); color: #fff; font-size: 0.78rem; font-weight: 800; padding: 5px 13px; border-radius: 999px; }
.f1-mp-next__countdown.is-overdue { background: var(--f1-tl-urgent, #d9622f); }

/* 健康の現在地：6項目要約グリッド */
.f1-mp-hsummary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.f1-mp-hs-item { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); border-radius: 13px; padding: 10px 11px; }
.f1-mp-hs-item__icon { font-size: 1.15rem; flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--dc3-surface, #f6f9fd); border-radius: 9px; }
.f1-mp-hs-item__label { font-size: 0.6rem; font-weight: 700; color: var(--dc3-ink-soft, #8993a4); display: block; }
.f1-mp-hs-item__value { font-size: 0.76rem; font-weight: 800; display: block; line-height: 1.35; }
.f1-mp-hs-item__value.is-alert { color: var(--f1-tl-urgent, #d9622f); }

/* 緊急時情報：通常は要約カードのみ */
.f1-mp-emergency-summary { display: flex; align-items: center; justify-content: space-between; background: var(--f1-tl-urgent-tint, #fbeae1); border: 1px solid var(--f1-tl-urgent, #d9622f); border-radius: 14px; padding: 11px 14px; margin-bottom: 8px; text-decoration: none; color: inherit; }
.f1-mp-emergency-summary__text { font-size: 0.78rem; font-weight: 800; color: var(--f1-tl-urgent, #d9622f); }
.f1-mp-emergency-exception { font-size: 0.7rem; font-weight: 700; color: var(--f1-tl-urgent, #d9622f); background: #fff; border: 1px solid var(--f1-tl-urgent, #d9622f); border-radius: 11px; padding: 8px 11px; margin-bottom: 14px; }

/* カテゴリ絵文字バッジ */
.f1-mp-type-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.64rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-right: 6px; white-space: nowrap; }
.f1-mp-type-badge--visit { background: var(--f1-cat-visit-tint); color: var(--f1-cat-visit); }
.f1-mp-type-badge--vaccine { background: var(--f1-cat-vaccine-tint); color: var(--f1-cat-vaccine); }
.f1-mp-type-badge--checkup { background: var(--f1-cat-checkup-tint); color: var(--f1-cat-checkup); }
.f1-mp-type-badge--rx { background: var(--f1-cat-rx-tint); color: var(--f1-cat-rx); }
.f1-mp-type-badge--growth { background: var(--f1-cat-growth-tint); color: var(--f1-cat-growth); }
.f1-mp-type-badge--memo { background: var(--f1-cat-memo-tint); color: var(--f1-cat-memo); }

/* 健康の成長記録：積み重なる楽しさを感じられる帯 */
.f1-mp-growth-band { background: linear-gradient(135deg, var(--f1-cat-growth-tint), #fff 70%); border: 1px solid var(--f1-cat-growth); border-radius: 18px; padding: 16px; margin-bottom: 18px; }
.f1-mp-growth-band__head { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 800; color: var(--f1-cat-growth); margin: 0 0 12px; }
.f1-mp-milestone-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.f1-mp-milestone-row::-webkit-scrollbar { display: none; }
.f1-mp-milestone { flex-shrink: 0; min-width: 84px; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); border-radius: 13px; padding: 10px; text-align: center; }
.f1-mp-milestone__icon { font-size: 1.3rem; margin-bottom: 4px; }
.f1-mp-milestone__value { font-size: 0.78rem; font-weight: 800; display: block; }
.f1-mp-milestone__date { font-size: 0.6rem; color: var(--dc3-ink-soft, #8993a4); display: block; margin-top: 2px; }

/* 記録追加：下部固定ボタン */
.f1-mp-add-fixed { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--f1-mp-grad-btn); color: #fff; border-radius: 16px; padding: 14px; font-size: 0.85rem; font-weight: 800; text-decoration: none; margin: 20px 0 4px; box-shadow: 0 4px 16px rgba(236,111,155,0.25); }

/* 記録追加ピッカー */
.f1-mp-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f1-mp-picker-item { display: flex; flex-direction: column; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--f1-border, #e6ebf2); border-radius: 15px; padding: 16px 10px; text-decoration: none; color: var(--dc3-ink, #1c2430); }
.f1-mp-picker-item__icon { font-size: 1.5rem; }
.f1-mp-picker-item__label { font-size: 0.74rem; font-weight: 700; text-align: center; }

/* ⑦アニメーション：控えめなフェード（prefers-reduced-motionを尊重） */
@media (prefers-reduced-motion: no-preference) {
  .f1-mp-card-stack > *, .f1-mp-milestone, .f1-mp-picker-item { animation: f1MpFadeIn 0.28s ease both; }
  .f1-mp-card-stack > *:nth-child(2) { animation-delay: 0.03s; }
  .f1-mp-card-stack > *:nth-child(3) { animation-delay: 0.06s; }
  .f1-mp-tab-panel { animation: f1MpFadeSlide 0.22s ease both; }
}
@keyframes f1MpFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes f1MpFadeSlide { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }

/* オープニング画面（未登録ユーザー専用の登録導線・登録率最大化版）。既存の
   f1-tl-*／f1-proc-card等の色トークンはそのまま再利用する。スマホのファースト
   ビュー1画面に「見出し→サンプルカルーセル→CTA」が収まることを優先し、
   余白・フォントサイズを他ページより詰めている。 */
.f1-opening { padding-bottom: 88px; }
.f1-opening-hero { padding: 14px 0 6px; text-align: center; }
.f1-opening-hero__title { font-size: 1.32rem; font-weight: 800; line-height: 1.4; margin: 0 0 8px; text-wrap: balance; }
.f1-opening-hero__sub { font-size: 0.85rem; color: var(--dc3-ink-soft, #5b6472); margin: 0; }

.f1-opening-sample-badge { background: var(--f1-color-warning-tint, #fff8e0); color: var(--f1-color-warning, #a3760a); }
.f1-opening-profile { animation: f1MpFadeIn 0.22s ease both; }

/* 【1】サンプルTimelineの自動カルーセル */
.f1-opening-carousel { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: var(--f1-radius-lg, 16px); padding: 12px 14px 14px; background: #fff; }
.f1-opening-carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.f1-opening-carousel__position { font-size: 0.78rem; font-weight: 800; color: var(--dc3-ink, #1c2430); text-align: right; }
.f1-opening-carousel__track { min-height: 118px; }
.f1-opening-carousel__slide { display: none; animation: f1MpFadeIn 0.28s ease both; }
.f1-opening-carousel__slide.is-active { display: block; }
.f1-opening-carousel__tier-label { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 8px; }
.f1-opening-carousel__dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.f1-opening-carousel__dot--now { background: var(--f1-tl-urgent); }
.f1-opening-carousel__dot--soon { background: var(--f1-tl-soon); }
.f1-opening-carousel__dot--later { background: var(--f1-tl-later); }
.f1-opening-carousel__slide .f1-proc-card { margin-bottom: 8px; }
.f1-opening-carousel__slide .f1-proc-card:last-child { margin-bottom: 0; }
.f1-opening-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.f1-opening-carousel__dot-btn { width: 20px; height: 6px; border-radius: 999px; border: none; background: var(--dc3-border, #e6ebf2); padding: 0; cursor: pointer; transition: background var(--f1-duration-fast, 0.15s) var(--f1-ease, ease); }
.f1-opening-carousel__dot-btn.is-active { background: var(--dc3-brand-blue, #247bfb); }

/* 【3】登録メリットの数字 */
.f1-opening-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.f1-opening-stat { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: var(--f1-radius-md, 12px); padding: 12px 10px; text-align: center; background: #fff; }
.f1-opening-stat__num { font-size: 1.1rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb); font-variant-numeric: tabular-nums; }
.f1-opening-stat__label { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); margin-top: 4px; }

/* 【2】登録すると見られる画面（半透明・ぼかしプレビュー） */
.f1-opening-locked { position: relative; border-radius: var(--f1-radius-lg, 16px); overflow: hidden; }
.f1-opening-locked__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; filter: blur(2.5px); opacity: 0.55; }
.f1-opening-locked__card { display: flex; align-items: center; gap: 8px; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: var(--f1-radius-md, 12px); padding: 12px 10px; font-size: 0.78rem; font-weight: 700; background: #fff; color: var(--dc3-ink, #1c2430); }
.f1-opening-locked__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(255,255,255,0.35);
}
.f1-opening-locked__lock { color: var(--dc3-brand-blue, #247bfb); }
.f1-opening-locked__overlay p { margin: 0; font-size: 0.84rem; font-weight: 800; color: var(--dc3-ink, #1c2430); text-shadow: 0 1px 2px rgba(255,255,255,0.8); }

.f1-opening-swipe-hint { text-align: center; margin: 4px 0 10px; }

/* ==========================================================================
   Family One ブランド体験刷新（オープニング画面ヒーロー〜状況選択）
   利用者の第一印象を「行政サイト」ではなく「家族に寄り添うブランド」にするための
   刷新。写真（青空・3姉妹）を主役に、ヒーローをフルブリード化し、ブランドストーリー・
   ライフステージタイムライン・Before→After・信頼エリアを追加する。
   ========================================================================== */

/* ---------- ヒーロー：写真が主役。ほぼフルスクリーンで最大化する ---------- */
.f1-opening-hero.f1-hero-visual {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-start;
  padding: 0;
}
@media (max-width: 640px) {
  /* スマホ：CTAが人物にかからないよう高さに余裕を持たせる（84vh→92vh）。 */
  .f1-opening-hero.f1-hero-visual { min-height: 92vh; }
}
/* 元画像刷新（2026-08-03）：新しいメインビジュアルは子どもたちが画面下寄りに立ち、
   足元の余白がほぼ無い構図のため、文字・CTAは下端ではなく上部の空（そら）の
   広い範囲に重ねる（「文字やCTAが顔に重ならない」「空の広がりを活かす」の両立）。
   PC・スマホとも上寄せで統一する。 */

/* ロゴ：ヒーロー写真の中に重ねる（白い帯を挟まず、写真が最初に見える主役になるように）。
   共通ブランドロゴマークアップ（.f1-brand-logo）を使い、PC→ロゴ②ワードマーク／
   モバイル→ロゴ①シンボル＋テキストをCSSのみで切り替える。
   再拡大（2026-08-03）：ロゴは「ブランド体験の入口」であり装飾ではないという方針のもと、
   従来比約1.7倍へ再拡大。写真・コピー・CTAとのバランスを見て、存在感がありつつ
   ヒーロー全体の主役（写真・子どもの笑顔）を邪魔しない範囲に留める。 */
.f1-hero-logo-overlay {
  position: absolute; top: 20px; left: 20px; z-index: 3;
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(4px);
  padding: 11px 20px; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(15,30,60,0.18);
  text-decoration: none;
}
.f1-hero-logo-overlay .f1-brand-logo__wordmark img { height: 34px; }
.f1-hero-logo-overlay .f1-brand-logo__symbol img { height: 32px; width: 32px; }
.f1-hero-logo-overlay .f1-brand-logo__symbol-text { font-size: 1rem; color: var(--dc3-ink, #1c2430); }
@media (min-width: 641px) {
  .f1-hero-logo-overlay { top: 32px; left: 40px; padding: 16px 28px; }
  .f1-hero-logo-overlay .f1-brand-logo__wordmark img { height: 64px; }
}

/* 元画像刷新（2026-08-03）：文字・CTAを上部の空へ重ねる構成に変更したため、
   グラデーションも上側だけを薄く暗くする（要望どおり5〜10%程度に抑え、
   青空の鮮やかさ・明るさは極力そのまま保つ）。子どもたちのいる中〜下段には
   影響させない。 */
.f1-opening-hero .f1-hero-gradient {
  background:
    linear-gradient(180deg,
      rgba(6,15,36,0.10) 0%,
      rgba(6,15,36,0.07) 20%,
      rgba(10,20,45,0) 42%,
      rgba(10,20,45,0) 100%);
}

/* コピー・CTAはヒーロー上部（空のエリア）に重ねる。ロゴオーバーレイ
   （左上のピル）と重ならないよう、ヘッダー相当の余白を上に確保する。 */
.f1-opening-hero .f1-hero-content {
  position: relative; z-index: 2; width: 100%;
  max-width: 760px; margin: 0 auto;
  padding: 96px 24px 8px;
  text-align: center;
}
@media (min-width: 641px) {
  .f1-opening-hero .f1-hero-content { padding: 140px 24px 8px; }
}
.f1-opening-hero.f1-hero-visual .f1-opening-hero__title {
  color: #fff; text-shadow: 0 2px 18px rgba(8,18,42,0.45);
  font-size: clamp(1.7rem, 5.6vw, 2.9rem);
}
/* 安心感を伝える一文：キャッチコピー直下、本文より一段大きく・軽い重みで。
   不具合修正：写真が無い場合（メディア取得失敗時のフォールバック分岐）はここが
   白文字のまま白背景に乗ってしまい読めなくなっていたため、既定は濃い色にし、
   写真ありのヒーロー上でのみ白文字へ上書きする。 */
.f1-hero-reassure {
  color: var(--dc3-ink, #1c2430);
  font-size: clamp(1rem, 2.4vw, 1.2rem); font-weight: 700;
  margin: 10px 0 0;
}
/* 不具合修正（2026-08-03）：日本語と半角の「Family One」が混ざる一文が、
   375〜430px幅のスマホでCSSの折り返し（word-break/overflow-wrap/明示的な
   width指定を含め複数試行）だけでは解消できず、.f1-hero-visualの
   overflow:hiddenと相まって右側が見えなくなっていた。原因調査を続けるより
   確実な対策を優先し、PHP側に改行専用のbr（.f1-mobile-break）を入れ、
   モバイル幅でのみ表示させることで確定的に2行に分ける（H1タイトルの
   改行と同じ手法）。 */
.f1-mobile-break { display: none; }
@media (max-width: 480px) {
  .f1-mobile-break { display: block; content: ""; }
}
.f1-opening-hero.f1-hero-visual .f1-hero-reassure {
  color: #fff; text-shadow: 0 1px 12px rgba(8,18,42,0.4);
}
.f1-opening-hero.f1-hero-visual .f1-opening-hero__sub {
  color: rgba(255,255,255,0.92); text-shadow: 0 1px 12px rgba(8,18,42,0.4);
  font-size: clamp(0.86rem, 1.8vw, 0.96rem);
  max-width: 44ch; margin: 10px auto 0;
}
.f1-hero-cta-stack { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.f1-hero-cta-stack .f1-btn { min-width: 240px; box-shadow: 0 12px 30px rgba(8,18,42,0.35); }
/* 利用無料バッジをヒーロー写真の上に置く場合は、背景の不透明度を上げて視認性を確保する */
.f1-hero-cta-stack .f1-free-badge { background: rgba(255,255,255,0.94); margin-top: 0; box-shadow: 0 4px 14px rgba(8,18,42,0.2); }

/* ==========================================================================
   【2026-08-13 緊急修正】ファーストビューで子どもの顔をUIが隠さない
   --------------------------------------------------------------------------
   何が起きていたか
     スマートフォンで、CTA「あなたに合った案内を始める」と「家族の利用は、
     ずっと無料」バッジが、後列の子の顔の真上に重なっていた。

   なぜ起きたか（実測にもとづく）
     ・スマホ用の元画像 hero-family-mobile.jpg は 900×1396（縦横比 0.645）。
     ・ヒーローの高さは 92vh。iPhone(390×844)ではコンテナの縦横比が 0.50 で、
       画像より横長になるため object-fit:cover は「高さを合わせて左右を切る」。
       つまり縦方向は一切切られず、子どもの顔は常に画像高さの
       約43%〜65%の帯に現れる（object-position-y を変えても動かない）。
     ・空（そら）の範囲は画像高さの上から約43%＝約333px。
       見出し＋安心文＋説明文で約301pxを使い切り、
       そのすぐ下に置かれたCTA＋バッジ（約88px）が顔の帯へ突き抜けていた。

   どう直したか
     ①ヒーローの高さを「画面の高さ」だけでなく「画面の幅」からも決める
       （max(92vh, 225vw)）。幅から決めることで、端末の縦の長さに左右されず
       空の高さが確保でき、機種による当たり外れが無くなる。
     ②見出し・安心文・説明文をスマホでだけ少し詰め、CTA＋バッジが
       空の範囲（顔の上）に収まるようにする。
     文字も写真も差し替えず、レイアウトの寸法だけで解決している。

   ここを触るときは必ず tools/f1-shot.ps1 で 375/390/412 幅の
   スクリーンショットを撮り、3人の顔にUIが重なっていないことを目で確認すること。
   ========================================================================== */
@media (max-width: 640px) {
  .f1-opening-hero.f1-hero-visual { min-height: max(92vh, 225vw); }

  /* 上の余白84pxは、左上のロゴピル（top:20px＋高さ約56px）を避けるための最小値。
     これより小さくすると見出しがロゴに重なる。 */
  .f1-opening-hero .f1-hero-content { padding: 84px 18px 8px; }

  .f1-opening-hero.f1-hero-visual .f1-opening-hero__title { font-size: 1.5rem; line-height: 1.36; }
  .f1-opening-hero.f1-hero-visual .f1-hero-reassure { font-size: 0.94rem; margin-top: 6px; line-height: 1.5; }
  .f1-opening-hero.f1-hero-visual .f1-opening-hero__sub { font-size: 0.8rem; margin-top: 8px; line-height: 1.65; }

  .f1-opening-hero .f1-hero-cta-stack { margin-top: 14px; gap: 8px; }
  .f1-opening-hero .f1-hero-cta-stack .f1-btn { min-width: 0; width: 100%; max-width: 300px; }
}

/* --------------------------------------------------------------------------
   PC・タブレットも同じ不具合が起きていた（今回の実測で判明。スマホだけの問題ではない）。
   1440×900 での実測値：
     ヒーロー 135〜909／顔の帯 411〜703
     安心文 415〜443・説明文 453〜519・CTA 541〜591・バッジ 603〜633
   つまり見出し以外のすべてが顔の帯に重なっていた。

   PCは画像（2000×1500）に対してコンテナが横長なので、object-fit:cover は
   「幅を合わせて上下を切る」＝object-position-y が効く。
   そこで空の見え方（object-position-y）を調整し、同時に上余白と見出しを詰めて、
   文字とCTAを顔の帯より上へ収める。ロゴは左上・文字は中央なので、
   上余白を減らしてもロゴとは重ならない。

   数字の根拠（W=画面幅、Vh=画面の高さ）
     ヒーロー高さ H = 0.86Vh、写真の描画高さ sh = 0.75W（2000×1500のため）
     顔の帯は画像の 42%〜69% ＝ 画面上では
       上端 = ヒーロー上端 + 0.315W − y×(sh−H)
       下端 = ヒーロー上端 + 0.5175W − y×(sh−H)   ※ y は object-position-y
     ・y を小さくすると顔は下がる（重なりは減るが、あごが画面外へ出る）
     ・y を大きくすると顔は上がる（あごは入るが、文字と重なりやすい）
     1366×768・1440×900・1920×1080 の3つを同時に満たす値が y=20% で、
     そのとき文字＋CTAの下端は 477px 以内に収める必要がある。
     そのため上余白 140→24px、見出しの最大サイズ 2.9→2.35rem に詰めている。
     （数値を動かすときは、この3サイズすべてで測り直すこと）
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .f1-opening-hero .f1-hero-content { padding: 24px 24px 8px; }
  .f1-opening-hero.f1-hero-visual .f1-opening-hero__title { font-size: clamp(1.7rem, 5.6vw, 2.35rem); }
  .f1-opening-hero .f1-hero-cta-stack { margin-top: 14px; gap: 8px; }
}
@media (min-width: 641px) {
  .f1-hero-photo-layer img { object-position: center 20%; }
}

/* 画面の縦が短い端末（iPhone SE 375×667 など）。
   写真の高さを少し抑え、文字も一段詰めて、3人の顔が下部ナビに隠れないようにする。 */
@media (max-width: 640px) and (max-height: 720px) {
  .f1-opening-hero.f1-hero-visual { min-height: max(88vh, 205vw); }
  .f1-opening-hero .f1-hero-content { padding: 76px 16px 8px; }
  .f1-opening-hero.f1-hero-visual .f1-opening-hero__title { font-size: 1.36rem; line-height: 1.32; }
  .f1-opening-hero.f1-hero-visual .f1-hero-reassure { font-size: 0.88rem; margin-top: 4px; }
  .f1-opening-hero.f1-hero-visual .f1-opening-hero__sub { font-size: 0.76rem; margin-top: 6px; line-height: 1.6; }
  .f1-opening-hero .f1-hero-cta-stack { margin-top: 10px; gap: 6px; }
}

/* ---------- 安心・信頼を伝えるエリア：ヒーロー直下、主役にはせず控えめな帯として ---------- */
.f1-trust-strip {
  background: var(--dc3-surface, #f6f9fd);
  border-bottom: 1px solid var(--dc3-border, #e6ebf2);
  padding: 16px 20px;
}
.f1-trust-strip__badge-row { display: flex; justify-content: center; margin-bottom: 10px; }
.f1-trust-badge {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2px; padding: 8px 18px; border-radius: 10px;
  background: #fff; border: 1px solid var(--dc3-brand-blue-light, #deeeff);
}
.f1-trust-badge__eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.01em; color: var(--dc3-brand-blue, #247bfb); }
.f1-trust-badge__title { font-size: 0.72rem; font-weight: 600; color: var(--dc3-ink-soft, #5b6472); }
.f1-trust-strip__inner {
  max-width: 1040px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
}
.f1-trust-strip__item {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.78rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472);
}
.f1-trust-strip__item svg { color: var(--dc3-brand-blue, #247bfb); flex-shrink: 0; }

/* ---------- ブランドストーリー：Family Oneの存在意義。短く・静かに ---------- */
.f1-brand-story { padding: 48px 20px; text-align: center; }
.f1-brand-story__inner { max-width: 620px; margin: 0 auto; }
.f1-brand-story__firsts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; }
.f1-brand-story__chip {
  font-size: 0.78rem; font-weight: 800; color: var(--dc3-brand-blue, #247bfb);
  background: var(--dc3-brand-blue-light, #deeeff); padding: 6px 14px; border-radius: 999px;
}
.f1-brand-story__lead { font-size: 1.02rem; font-weight: 800; color: var(--dc3-ink, #1c2430); line-height: 1.8; margin: 0 0 8px; }
.f1-brand-story__field-note { font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.8; margin: 14px 0 0; }

/* 共通の中央寄せセクション見出し（できること／ライフジャーニー／Before-Afterで共用） */
.f1-section-eyebrow { text-align: center; font-size: 0.98rem; font-weight: 900; color: var(--dc3-ink, #1c2430); margin: 0; }

/* ---------- ライフステージ全体を支えるタイムライン ---------- */
.f1-life-journey { padding: 8px 20px 36px; max-width: 1040px; margin: 0 auto; }
.f1-life-journey__head { text-align: center; margin-bottom: 6px; }
.f1-life-journey__desc { font-size: 0.84rem; color: var(--dc3-ink-soft, #5b6472); margin: 6px 0 0; }
.f1-life-journey__note { text-align: center; font-size: 0.7rem; color: var(--dc3-ink-soft, #5b6472); margin: 4px 0 0; }

/* ---------- Family Oneだけの価値：カード化せず、短い言葉と余白だけで伝える ---------- */
.f1-one-world { padding: 64px 20px; text-align: center; }
.f1-one-world__inner { max-width: 560px; margin: 0 auto; }
.f1-one-world__items {
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--dc3-brand-blue, #247bfb); line-height: 2; margin: 0 0 22px;
}
.f1-one-world__lead {
  font-size: clamp(1.15rem, 3.6vw, 1.5rem); font-weight: 900; color: var(--dc3-ink, #1c2430);
  line-height: 1.6; margin: 0 0 18px; text-wrap: balance;
}
.f1-one-world__brand {
  font-size: clamp(1.6rem, 5vw, 2.1rem); font-weight: 900; letter-spacing: 0.01em;
  color: var(--dc3-brand-blue, #247bfb); margin: 0;
}

/* ---------- Family Oneでできること：利用者視点のアイコンカード4項目 ---------- */
.f1-cando { padding: 40px 20px 8px; max-width: 1040px; margin: 0 auto; }
.f1-cando__head { text-align: center; margin-bottom: 20px; }
.f1-cando__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 641px) {
  .f1-cando__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}

/* ---------- Before → After：図で価値を伝える比較セクション ---------- */
.f1-before-after { padding: 32px 20px 8px; }
.f1-before-after__inner { max-width: 1040px; margin: 0 auto; }
.f1-ba-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; margin-top: 20px; }
@media (min-width: 761px) {
  .f1-ba-grid { grid-template-columns: 1fr auto 1fr; gap: 20px; }
}
.f1-ba-col { border-radius: 20px; padding: 22px 20px 24px; display: flex; flex-direction: column; }
.f1-ba-col--before { background: var(--dc3-surface, #f6f9fd); border: 1px solid var(--dc3-border, #e6ebf2); }
.f1-ba-col--after { background: linear-gradient(160deg, var(--dc3-brand-blue, #247bfb), var(--dc3-brand-blue-dark, #1a63d1)); color: #fff; }
.f1-ba-col__label { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.02em; margin: 0 0 14px; opacity: 0.85; }
.f1-ba-col__note { font-size: 0.82rem; line-height: 1.7; margin: 14px 0 0; }
.f1-ba-col--before .f1-ba-col__note { color: var(--dc3-ink-soft, #5b6472); }
.f1-ba-col--after .f1-ba-col__note { color: rgba(255,255,255,0.92); }
.f1-ba-scatter { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; align-content: flex-start; }
.f1-ba-chip {
  display: inline-block; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2);
  color: var(--dc3-ink, #1c2430); font-size: 0.8rem; font-weight: 700;
  padding: 9px 14px; border-radius: 10px; box-shadow: 0 2px 8px rgba(28,36,48,0.06);
  transform: rotate(var(--r, 0deg));
}
.f1-ba-path { flex: 1; display: flex; flex-direction: column; }
.f1-ba-path__step { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; font-weight: 700; padding: 4px 0; }
.f1-ba-path__step .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.f1-ba-path__step.is-current { font-weight: 900; }
.f1-ba-path__step.is-current .dot { background: #ffc93c; box-shadow: 0 0 0 4px rgba(255,201,60,0.35); }
.f1-ba-path__line { width: 2px; height: 16px; background: rgba(255,255,255,0.4); margin-left: 4px; }
.f1-ba-arrow { display: flex; align-items: center; justify-content: center; color: var(--dc3-brand-blue, #247bfb); transform: rotate(90deg); }
@media (min-width: 761px) { .f1-ba-arrow { transform: none; } }
.f1-ba-punch { text-align: center; font-size: 1.02rem; font-weight: 900; color: var(--dc3-ink, #1c2430); margin: 26px 0 0; }

/* ---------- 状況選択：ヒーローの青空の色を受け継ぐ帯で、白い断絶をつくらない ---------- */
.f1-situation-band { background: linear-gradient(180deg, #4f9fe6 0%, var(--dc3-brand-blue-light, #deeeff) 38%, #ffffff 100%); padding: 34px 20px 44px; }
.f1-situation-band__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.f1-situation-band__q { font-size: 1rem; font-weight: 900; color: var(--dc3-ink, #1c2430); margin: 0 0 18px; }
.f1-situation-band__grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 480px; margin: 0 auto; }
@media (min-width: 641px) {
  .f1-situation-band__grid { grid-template-columns: 1fr 1fr; max-width: 780px; }
  .f1-situation-chip--wide { grid-column: 1 / -1; }
}
.f1-situation-chip {
  display: block; background: #fff; color: var(--dc3-ink, #1c2430);
  font-size: 0.86rem; font-weight: 700; text-decoration: none;
  padding: 15px 18px; border-radius: 14px; text-align: left;
  box-shadow: 0 2px 14px rgba(28,36,48,0.08);
  border: 1px solid rgba(255,255,255,0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.f1-situation-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(28,36,48,0.14); }

/* ---------- 未来への期待：締めくくりの一文。装飾を増やさず余白と静かなトーンだけで ---------- */
.f1-closing-note { padding: 48px 20px 52px; text-align: center; }
.f1-closing-note__promise {
  font-size: clamp(1.3rem, 4vw, 1.7rem); font-weight: 900; color: var(--dc3-brand-blue, #247bfb);
  line-height: 1.5; margin: 0 0 20px; text-wrap: balance;
}
.f1-closing-note__text { font-size: 0.92rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); line-height: 1.9; margin: 0; text-wrap: balance; }

/* 【5】CTA直下の心理的ハードルを下げる3項目 */
.f1-opening-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; list-style: none; margin: 8px 0 0; padding: 0; }
.f1-opening-trust li { display: flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--dc3-ink-soft, #5b6472); font-weight: 700; }
.f1-opening-trust li svg { color: var(--f1-color-success, #1f9d6e); flex-shrink: 0; }

.f1-opening-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.98); backdrop-filter: blur(6px);
  border-top: 1px solid var(--dc3-border, #e6ebf2);
}
.f1-opening-sticky-cta .f1-btn { width: 100%; justify-content: center; }
@media (min-width: 900px) {
  .f1-opening-sticky-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .f1-opening-carousel__slide, .f1-opening-profile { animation: none; }
}

/* ==========================================================================
   Family One 共通目次（TOC）コンポーネント（2026-07-27 新規実装）
   モバイル・LINE内：折りたたみ式（.f1-toc[data-state="open"]で展開）
   PC（min-width:1024px）：常時展開の横並びピル表示＋現在地ハイライト
   ========================================================================== */
.f1-toc { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.97); backdrop-filter: blur(6px); border-bottom: 1px solid var(--dc3-border, #e6ebf2); }
.f1-toc__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; padding: 11px 4px; background: none; border: none; cursor: pointer; font-size: 0.84rem; font-weight: 700; color: var(--dc3-ink, #1c2430); font-family: inherit; }
.f1-toc__toggle-caret { font-size: 0.7em; transition: transform 0.2s ease; }
.f1-toc[data-state="open"] .f1-toc__toggle-caret { transform: rotate(180deg); }
.f1-toc__list { display: none; list-style: none; margin: 0; padding: 0 4px 12px; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.f1-toc[data-state="open"] .f1-toc__list { display: flex; }
.f1-toc__item--h3 { padding-left: 14px; }
.f1-toc__link { display: block; padding: 8px 10px; border-radius: 8px; font-size: 0.82rem; line-height: 1.4; color: var(--dc3-ink-soft, #5b6472); text-decoration: none; }
.f1-toc__link.is-active { background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); font-weight: 700; }
[data-f1-toc-heading] { scroll-margin-top: 118px; }

@media (min-width: 1024px) {
  .f1-toc__toggle { display: none; }
  .f1-toc__list { display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 12px 4px; max-height: none; overflow: visible; }
  .f1-toc__item--h3 { padding-left: 0; }
  .f1-toc__link { padding: 6px 14px; border-radius: 999px; background: var(--dc3-bg, #fff); border: 1px solid var(--dc3-border, #e6ebf2); white-space: nowrap; }
  .f1-toc__link.is-active { background: var(--dc3-brand-blue, #247bfb); color: #fff; border-color: var(--dc3-brand-blue, #247bfb); }
}

/* ==========================================================================
   サイト全体UX刷新 第1弾（2026-07-30）：安心バナー・進捗表示・行政用語の
   平易な説明・困ったときはこちらウィジェット
   ========================================================================== */
.f1-reassure-banner { background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); border-radius: 12px; padding: 12px 16px; font-size: 0.86rem; font-weight: 700; margin: 0 0 16px; }

/* UX改善Phase2（2026-08-27）：事業者向けページ（施設担当者ログイン等）と一般利用者向け画面の
   境界を明確にするための帯。一般ナビと同じ色調にしないことで一目で区別できるようにする。 */
.f1-business-banner { background: #2b2f3a; color: #fff; text-align: center; padding: 10px 16px; font-size: 0.82rem; font-weight: 700; }
.f1-business-banner a { color: #ffd166; text-decoration: underline; }

.f1-proc-progress { margin: 0 0 14px; }
.f1-proc-progress__label { font-size: 0.82rem; font-weight: 800; margin-bottom: 6px; }
.f1-proc-progress__bar { height: 8px; background: var(--dc3-border, #e6ebf2); border-radius: 999px; overflow: hidden; }
.f1-proc-progress__bar-fill { height: 100%; background: var(--f1-color-success, #1f9d6e); border-radius: 999px; transition: width 0.3s ease; }

.f1-proc-card__plain-description { font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.6; margin: 2px 0 8px; }

.f1-help-widget { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; margin: 20px 0; overflow: hidden; }
.f1-help-widget__summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-weight: 800; font-size: 0.9rem; background: var(--dc3-surface, #f6f9fd); }
.f1-help-widget__summary::-webkit-details-marker { display: none; }
.f1-help-widget__icon { font-size: 1.1rem; }
.f1-help-widget__body { padding: 14px 16px; }
.f1-help-widget__reassure { font-size: 0.84rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 12px; }
.f1-help-widget__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.f1-help-widget__list a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; text-decoration: none; color: var(--dc3-ink, #1c2430); }
.f1-help-widget__list a:hover { background: var(--dc3-surface, #f6f9fd); }
.f1-help-widget__list strong { display: block; font-size: 0.86rem; }
.f1-help-widget__link-desc { display: block; font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); font-weight: 400; }

/* ==========================================================================
   施設会員マイページ（Business Portal）：保存結果メッセージ・必須項目表示
   これまで成功／失敗のメッセージが無地のテキストで見分けが付かなかったため、
   色分けして視認性を上げる（PHP側で .is-success / .is-error を出し分ける）。
   忙しい合間にスマホで操作する施設スタッフが、保存できたかどうかを見落とさない
   ようにするための最小限の追加。既存のマークアップ・保存ロジックには手を加えない。
   ========================================================================== */
.facility-profile-message,
.facility-job-message,
.facility-content-message,
.facility-content-notice,
.facility-job-notice {
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 14px;
  background: var(--f1-color-surface, #f6f9fd);
  border: 1px solid var(--f1-color-border, #e6ebf2);
  color: var(--f1-color-text, #1c2430);
}
.facility-profile-message.is-success,
.facility-job-message.is-success,
.facility-content-message.is-success {
  background: var(--f1-color-success-tint, #e6f7f0);
  border-color: var(--f1-color-success, #1f9d6e);
  color: var(--f1-color-success, #1f9d6e);
}
.facility-profile-message.is-error,
.facility-job-message.is-error,
.facility-content-message.is-error {
  background: var(--f1-color-error-tint, #fbe9e9);
  border-color: var(--f1-color-error, #c94c4c);
  color: var(--f1-color-error, #c94c4c);
}
.facility-profile-pending-notice,
.facility-content-pending-notice,
.facility-job-pending-notice,
.facility-profile-readonly-notice,
.facility-content-readonly-notice,
.facility-job-readonly-notice {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--f1-color-warning-tint, #fff8e0);
  color: var(--f1-color-warning, #a3760a);
  font-weight: 700;
  font-size: 0.86rem;
  margin: 0 0 12px;
}
.facility-required-mark { color: var(--f1-color-error, #c94c4c); margin-left: 2px; font-weight: 800; }

/* ==========================================================================
   紹介機能UI改善（2026-08-04）：Home上部・マイページ・フローティングボタンに
   共通で使う紹介カード（family_one_render_referral_qr_card()）と、
   フローティングボタン（family_one_render_referral_fab()）のスタイル。
   既存トークン（--dc3-brand-blue等）・既存クラス（.f1-card, .f1-btn等）を踏襲する。
   ========================================================================== */
.f1-referral-card__qr-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 4px; }
.f1-referral-card__qr { flex-shrink: 0; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 12px; padding: 6px; }
.f1-referral-card__qr canvas, .f1-referral-card__qr img { display: block; max-width: 100%; height: auto; }
.f1-referral-card__qr-actions { flex: 1; min-width: 200px; }
.f1-referral-card__link { background: var(--dc3-surface-2, #f2f4f7); padding: 10px 12px; border-radius: 10px; font-size: 0.78rem; word-break: break-all; }
@media (max-width: 420px) { .f1-referral-card__qr-row { justify-content: center; } .f1-referral-card__qr-actions { min-width: 0; width: 100%; } }

/* フローティングボタン：右下・既存.f1-fabを踏襲しつつ、同ページに表示されうる
   Demo Modeボタン（.f1-demo-fab、同じ右下位置）と重ならないよう一段高い位置に置く。 */
.f1-referral-fab { bottom: calc(140px + env(safe-area-inset-bottom)); background: var(--dc3-brand-blue, #247bfb); }

/* モーダル閉じるボタン（土台のfamily_one_modal()自体は「呼び出し側で実装」前提のため、
   紹介モーダルではこの閉じるボタンを body_html の先頭に含めて表示する）。 */
.f1-modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--dc3-surface-2, #f2f4f7); color: var(--f1-color-text, #222); font-size: 1.1rem; line-height: 1; cursor: pointer; }

/* ==========================================================================
   Google Places連携（2026-08-04）：施設詳細ページの「Google情報」カード。
   既存の.f1-card / .f1-btn / 各種トークンを踏襲し、Family One口コミ
   （.f1-reviews系、下に別セクションとして続く）とは視覚的にも独立させる。
   ========================================================================== */
.f1-gplaces__lead { font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 12px; }
.f1-gplaces__pending p { line-height: 1.8; }
.f1-gplaces__rating-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.f1-gplaces__stars { color: #f5a623; font-size: 1.1rem; letter-spacing: 1px; }
.f1-gplaces__rating-num { font-weight: 900; font-size: 1.1rem; }
.f1-gplaces__review-count { font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); background: var(--dc3-surface, #f6f9fd); padding: 3px 10px; border-radius: 999px; }
.f1-gplaces__no-rating { font-size: 0.84rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-gplaces__facts { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f1-gplaces__facts li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86rem; }
.f1-gplaces__facts a { color: var(--dc3-brand-blue, #247bfb); text-decoration: none; font-weight: 700; }
.f1-gplaces__hours summary { cursor: pointer; font-weight: 700; }
.f1-gplaces__hours ul { list-style: none; margin: 6px 0 0 24px; padding: 0; font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); display: flex; flex-direction: column; gap: 2px; }
.f1-gplaces__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   クラウドファンディング（2026-08-04）：トップページ常設カード・進捗表示・
   支援コースカード・スポンサーカード・支援完了バッジ。
   ========================================================================== */
.f1-cf-top-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.f1-cf-top-card:hover { box-shadow: var(--dc3-shadow-md, 0 6px 24px rgba(28,36,48,0.1)); transform: translateY(-1px); }
.f1-cf-top-card__title { font-weight: 900; font-size: 1rem; margin-bottom: 10px; }
.f1-cf-top-card__stats { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
.f1-cf-top-card__stat { display: flex; flex-direction: column; }
.f1-cf-top-card__stat-num { font-weight: 900; font-size: 1.05rem; color: var(--dc3-brand-blue, #247bfb); }
.f1-cf-top-card__stat-label { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-cf-top-card__rate { font-size: 0.78rem; font-weight: 700; margin-top: 6px; color: var(--dc3-ink-soft, #5b6472); }

.f1-cf-progress-card__amount { font-size: 1.3rem; font-weight: 900; margin-bottom: 10px; }
.f1-cf-progress-card__amount span { font-size: 0.8rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); }
.f1-cf-progress-card__meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); }

.f1-cf-tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.f1-cf-tier-card { display: flex; flex-direction: column; }
.f1-cf-tier-card__name { font-weight: 900; font-size: 1rem; }
.f1-cf-tier-card__amount { font-size: 1.3rem; font-weight: 900; color: var(--dc3-brand-blue, #247bfb); margin: 4px 0; }
.f1-cf-tier-card__capacity { font-size: 0.72rem; font-weight: 800; color: var(--f1-color-warning, #a3760a); margin-bottom: 6px; }
.f1-cf-tier-card__desc { font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 8px; }
.f1-cf-tier-card__perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.f1-cf-tier-card__perks li { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8rem; }
.f1-cf-tier-card__cta { display: block; width: 100%; text-align: center; cursor: pointer; list-style: none; }
.f1-cf-tier-card__cta::-webkit-details-marker { display: none; }
.f1-cf-tier-card__note { font-size: 0.68rem; color: var(--dc3-ink-soft, #5b6472); text-align: center; margin: 6px 0 0; }
.f1-cf-tier-card__inline-form { margin-top: auto; }
.f1-cf-pledge-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--dc3-border, #e6ebf2); }
.f1-cf-pledge-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); }
.f1-cf-pledge-form input[type="text"], .f1-cf-pledge-form textarea { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 8px; padding: 8px 10px; font-size: 0.86rem; font-family: inherit; }
.f1-cf-pledge-form__checkbox { flex-direction: row !important; align-items: center; gap: 8px !important; }

.f1-cf-sponsor-card { text-align: center; }
.f1-cf-sponsor-card__logo { max-width: 100%; max-height: 60px; object-fit: contain; margin-bottom: 8px; }
.f1-cf-sponsor-card__name { font-weight: 800; font-size: 0.9rem; }
.f1-cf-sponsor-card__contribution { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin: 4px 0; }

.f1-cf-thanks-badge { width: 72px; height: 72px; border-radius: 50%; background: var(--dc3-brand-blue-light, #deeeff); color: var(--dc3-brand-blue, #247bfb); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.f1-modal { position: relative; }

/* ==========================================================================
   Family One：人気施設ランキング 公開UI（担当E・2026-08-05）
   family-one-facility-ranking-ui.php が使用する。既存トークン
   （--dc3-brand-blue等）・既存クラス（.f1-card, .f1-badge等）を踏襲し、
   新規クラスは f1-ranking- プレフィックスで統一する。
   ========================================================================== */
.f1-ranking-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

.f1-ranking-card { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 14px; padding: 14px 16px; box-shadow: var(--dc3-shadow-sm, 0 2px 14px rgba(28,36,48,0.06)); }
.f1-ranking-card__rank { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--dc3-surface, #f6f9fd); color: var(--dc3-ink-soft, #5b6472); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1rem; }
.f1-ranking-card__body { flex: 1; min-width: 0; }
.f1-ranking-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.f1-ranking-card__name { font-weight: 900; font-size: 1rem; color: var(--dc3-ink, #1f2733); text-decoration: none; }
a.f1-ranking-card__name:hover { color: var(--dc3-brand-blue, #247bfb); }
.f1-ranking-card__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.f1-ranking-card__meta-row { font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); display: flex; align-items: center; gap: 6px; }
.f1-ranking-card__meta-label { font-weight: 700; color: var(--dc3-ink, #1f2733); }
.f1-ranking-card__meta-row--google .f1-ranking-card__meta-value { color: #e0a325; font-weight: 700; }
.f1-ranking-card__meta-row--f1 .f1-ranking-card__meta-value { color: var(--dc3-brand-blue, #247bfb); font-weight: 700; }
.f1-ranking-card__meta-row--favorite .f1-ranking-card__meta-value { color: #c5221f; font-weight: 700; }

/* 上位3位の視覚的強調（金銀銅） */
.f1-ranking-card--gold { border-color: #e0b325; border-width: 2px; background: linear-gradient(180deg, #fffaf0 0%, #ffffff 55%); }
.f1-ranking-card--gold .f1-ranking-card__rank { background: #f5d565; color: #7a5b06; }
.f1-ranking-card--silver { border-color: #b9c1cc; border-width: 2px; background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 55%); }
.f1-ranking-card--silver .f1-ranking-card__rank { background: #dde3ea; color: #4a5563; }
.f1-ranking-card--bronze { border-color: #c98a55; border-width: 2px; background: linear-gradient(180deg, #fbf3ec 0%, #ffffff 55%); }
.f1-ranking-card--bronze .f1-ranking-card__rank { background: #e8c4a4; color: #7a4a1f; }

/* カテゴリ一覧ページ */
.f1-ranking-index-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
@media (max-width: 480px) { .f1-ranking-index-grid { grid-template-columns: 1fr; } }
.f1-ranking-index-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.f1-ranking-index-card__label { font-weight: 900; font-size: 0.95rem; color: var(--dc3-ink, #1f2733); }
.f1-ranking-index-card__preview { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-ranking-index-card__preview--empty { color: var(--dc3-ink-soft, #5b6472); font-style: italic; }

/* ==========================================================================
   人気施設ランキング 第2フェーズ（担当E・2026-08-05追記）：
   種類タブ・サービス条件チップ・拡張バッジ（サービス条件／現在利用中／AIおすすめ理由／
   急上昇の伸び／新着の公開日）。既存クラス（.f1-chip, .f1-filter-group, .f1-badge等）を
   踏襲し、新規クラスは f1-ranking- プレフィックスで統一する。
   ========================================================================== */
.f1-ranking-tabs { margin-top: 14px; }

/* あなたへのおすすめ：カテゴリ別グループ見出し（2026-08-18） */
.f1-ranking-group { margin-top: 22px; }
.f1-ranking-group + .f1-ranking-group { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--dc3-border, #e4e8ee); }
.f1-ranking-group__title { font-size: 1rem; font-weight: 900; color: var(--dc3-ink, #1f2733); margin: 0 0 4px; }
.f1-ranking-group__reason { font-size: 0.76rem; font-weight: 500; color: var(--dc3-ink-soft, #5b6472); }
.f1-ranking-service-filter { margin-top: 12px; }
.f1-ranking-service-filter__label { font-size: 0.78rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 6px; }
.f1-ranking-service-filter__note { font-size: 0.72rem; color: var(--dc3-ink-soft, #5b6472); margin: 6px 0 0; }

.f1-badge--current { background: #f1eafe; color: #6b3fa0; }

.f1-ranking-card__meta-row--growth .f1-ranking-card__meta-value { color: #1f9d6e; font-weight: 700; }
.f1-ranking-card__meta-row--published .f1-ranking-card__meta-value,
.f1-ranking-card__meta-row--note .f1-ranking-card__meta-value { color: var(--dc3-ink-soft, #5b6472); }

.f1-ranking-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.f1-ranking-card__reasons-title { font-size: 0.76rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); margin: 8px 0 2px; }
.f1-ranking-card__reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.f1-ranking-card__reasons li { font-size: 0.78rem; color: var(--dc3-ink, #1f2733); padding-left: 16px; position: relative; }
.f1-ranking-card__reasons li::before { content: "✓"; position: absolute; left: 0; color: var(--dc3-brand-blue, #247bfb); font-weight: 900; }

/* ==========================================================================
   規約・ポリシーの本文（2026-08-10）
   長文を読みやすくし、表がスマートフォンで横に溢れないようにする。
   本文は固定ページ側で管理しているため、ここでは体裁だけを整える。
   ========================================================================== */
.f1-legal-page__body { font-size: 0.92rem; line-height: 1.95; color: var(--dc3-ink, #1c2430); }
.f1-legal-page__body h2 {
  margin: 30px 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--dc3-brand-blue, #247bfb);
  font-size: 1.05rem;
  font-weight: 800;
}
.f1-legal-page__body h3 { margin: 20px 0 8px; font-size: 0.96rem; font-weight: 800; color: #2c5282; }
.f1-legal-page__body p { margin: 0 0 12px; }
.f1-legal-page__body ul { margin: 0 0 14px; padding-left: 1.3em; }
.f1-legal-page__body li { margin-bottom: 6px; }
.f1-legal-page__body a { color: var(--dc3-brand-blue, #247bfb); font-weight: 700; }
.f1-legal-page__body strong { font-weight: 800; }
.f1-legal-page__body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 16px;
  font-size: 0.86rem;
  -webkit-overflow-scrolling: touch;
}
.f1-legal-page__body th,
.f1-legal-page__body td {
  border: 1px solid var(--dc3-border, #e6ebf2);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  min-width: 7em;
}
.f1-legal-page__body th { background: var(--dc3-surface, #f6f9fd); font-weight: 800; white-space: nowrap; }
@media (max-width: 600px) {
  .f1-legal-page__body { font-size: 0.88rem; line-height: 1.9; }
  .f1-legal-page__body h2 { font-size: 1rem; margin-top: 24px; }
}

/* --------------------------------------------------------------------------
   子どもごとの色分け（family-one-child-color.php が唯一の割り当て元）

   きょうだいを複数登録している家庭で、いま見ているのがどの子の情報かを
   一目で分かるようにする。色は child_id から決まるので、Passport・
   行政手続き・タイムライン・おすすめのどこでも同じ子は同じ色になる。

   識別は「左の線」と「アイコンの地色」で行い、背景はごく淡くとどめる。
   文字色は変えない。色分けが読みにくさの原因にならないことを最優先する。
   -------------------------------------------------------------------------- */
.f1-child-tone-1,
.f1-child-tone-2,
.f1-child-tone-3,
.f1-child-tone-4,
.f1-child-tone-5,
.f1-child-tone-6 {
  border-left: 4px solid var(--f1-child-accent);
  background: var(--f1-child-soft);
}

.f1-child-tone-1 .f1-child-card__icon,
.f1-child-tone-2 .f1-child-card__icon,
.f1-child-tone-3 .f1-child-card__icon,
.f1-child-tone-4 .f1-child-card__icon,
.f1-child-tone-5 .f1-child-card__icon,
.f1-child-tone-6 .f1-child-card__icon {
  background: var(--f1-child-accent);
  color: #fff;
}

.f1-child-tone-1 { --f1-child-accent: #6f9ffb; --f1-child-soft: #eef4ff; }
.f1-child-tone-2 { --f1-child-accent: #4fb99a; --f1-child-soft: #ecf8f4; }
.f1-child-tone-3 { --f1-child-accent: #8f7fdc; --f1-child-soft: #f3f0fc; }
.f1-child-tone-4 { --f1-child-accent: #d9982a; --f1-child-soft: #fdf6e8; }
.f1-child-tone-5 { --f1-child-accent: #dd7b95; --f1-child-soft: #fdf0f4; }
.f1-child-tone-6 { --f1-child-accent: #3ea8cf; --f1-child-soft: #ebf6fb; }

/* 子ども切替チップ。選択中は地色を濃くせず、下線と左の点で示す
   （チップは面積が小さく、地色を濃くすると文字が読みにくくなるため）。 */
.f1-child-switcher__chip.f1-child-tone-1,
.f1-child-switcher__chip.f1-child-tone-2,
.f1-child-switcher__chip.f1-child-tone-3,
.f1-child-switcher__chip.f1-child-tone-4,
.f1-child-switcher__chip.f1-child-tone-5,
.f1-child-switcher__chip.f1-child-tone-6 {
  border-left: none;
  background: transparent;
  position: relative;
  padding-left: 22px;
}
.f1-child-switcher__chip[class*="f1-child-tone-"]::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--f1-child-accent);
}
.f1-child-switcher__chip[class*="f1-child-tone-"].is-active {
  background: var(--f1-child-soft);
  border-color: var(--f1-child-accent);
}

/* 凡例（どの色がどの子かを示す小さな並び） */
.f1-child-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.f1-child-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; }
.f1-child-legend .f1-child-legend__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--f1-child-accent); flex-shrink: 0; }

@media (max-width: 640px) {
  .f1-child-tone-1, .f1-child-tone-2, .f1-child-tone-3,
  .f1-child-tone-4, .f1-child-tone-5, .f1-child-tone-6 { border-left-width: 5px; }
}

/* --------------------------------------------------------------------------
   下部固定ナビを全ページで出すための余白と表示制御

   これまで下部ナビはどこからも呼ばれておらず、地図や送迎ルートに入ると
   他の機能へ移る手段がブラウザの戻るしか無い行き止まりになっていた。
   共通シェル（family_one_output_page）から全ページに出すようにしたため、
   ナビに隠れる分の余白をここで確保する。

   PCではヘッダーの主要ナビがあるので下部ナビは出さない（画面を狭めない）。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .f1-bottom-nav { display: flex; }
}
@media (min-width: 901px) {
  .f1-bottom-nav { display: none; }
}

/* 印刷時は出さない（レポート・書類の出力に混ざらないように） */
@media print {
  .f1-bottom-nav { display: none !important; }
}

/* 地図・送迎ルート等から他機能へ渡るための導線。
   ページ内に置くので、下部ナビとは別に「いま見ている内容の続き」を示す。 */
.f1-crosslinks { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.f1-crosslinks__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--dc3-border, #e6ebf2);
  background: #fff; color: var(--dc3-ink, #1f2937);
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
}
.f1-crosslinks__item:hover { border-color: var(--f1-color-primary, #247bfb); color: var(--f1-color-primary, #247bfb); }

/* 各ページ上部の戻る導線。共通ナビと併用する（戻るだけに頼らせない） */
.f1-page-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 0.84rem; font-weight: 700; color: var(--dc3-ink-soft, #5b6472); text-decoration: none; }
.f1-page-back:hover { color: var(--f1-color-primary, #247bfb); }

/* --------------------------------------------------------------------------
   Passport：登録済み項目は閉じて要約だけ見せる

   登録済みでも全部の入力欄が開いていたため、何が登録済みで何が未登録なのか
   分からず、毎回すべて入力し直すよう求められているように見えていた。
   登録済みは要約と「編集する」だけにし、押したときだけ開く。

   <details> は閉じていても中の入力欄はDOMに残って送信されるので、
   閉じたまま保存しても既存の値がそのまま送り返されるだけで消えない。
   -------------------------------------------------------------------------- */
.f1-passport-section { padding: 0; overflow: hidden; }
.f1-passport-section.is-filled { border-left: 3px solid var(--f1-color-success, #1f9d6e); }
.f1-passport-section.is-empty  { border-left: 3px solid var(--dc3-border, #e6ebf2); }

.f1-passport-section__details > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "status title action" "value value value";
  align-items: center;
  gap: 4px 10px;
  padding: 14px 16px;
}
.f1-passport-section__details > summary::-webkit-details-marker { display: none; }
.f1-passport-section__details > summary:hover { background: var(--f1-color-primary-tint, #deeeff); }

.f1-passport-section__status { grid-area: status; }
.f1-passport-section__title  { grid-area: title; font-weight: 700; font-size: 0.92rem; }
.f1-passport-section__value  { grid-area: value; font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.5; }
.f1-passport-section__value--todo { color: var(--dc3-ink-weak, #98a2b3); }
.f1-passport-section__action {
  grid-area: action;
  font-size: 0.78rem; font-weight: 700;
  color: var(--f1-color-primary, #247bfb);
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--f1-color-primary, #247bfb);
  border-radius: 999px;
  min-height: 32px;
  display: inline-flex; align-items: center;
}
.f1-passport-section__details[open] .f1-passport-section__action { color: var(--dc3-ink-soft, #5b6472); border-color: var(--dc3-border, #e6ebf2); }

.f1-passport-section__badge { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.f1-passport-section__badge--done { color: var(--f1-color-success, #1f9d6e); }
.f1-passport-section__badge--todo { color: var(--dc3-ink-weak, #98a2b3); }

.f1-passport-section__body { padding: 0 16px 16px; border-top: 1px solid var(--dc3-border, #e6ebf2); padding-top: 14px; }

@media (max-width: 640px) {
  .f1-passport-section__details > summary { padding: 12px 14px; }
  .f1-passport-section__title { font-size: 0.88rem; }
  .f1-passport-section__action { padding: 6px 10px; font-size: 0.74rem; }
  .f1-passport-section__body { padding: 12px 14px 14px; }
}

/* --------------------------------------------------------------------------
   選択式入力のチップ

   スマホ、とくにiPhone・LINE内ブラウザでは標準のドラム式selectが押しにくい。
   選択肢が少ない項目は、指で押せる大きさのボタン状にする。
   最小の高さを44pxにして、押し間違いを減らす。
   -------------------------------------------------------------------------- */
.f1-choice-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }

.f1-choice-chip { display: inline-flex; }
.f1-choice-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.f1-choice-chip span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--dc3-border, #e6ebf2);
  border-radius: 999px;
  background: #fff;
  color: var(--dc3-ink, #1f2937);
  font-size: 0.86rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.f1-choice-chip input:checked + span {
  background: var(--f1-color-primary, #247bfb);
  border-color: var(--f1-color-primary, #247bfb);
  color: #fff;
}
.f1-choice-chip input:focus-visible + span {
  outline: 2px solid var(--f1-color-primary, #247bfb);
  outline-offset: 2px;
}

/* 「まだ登録していない／なし／あり」は3択なので、横に並べて押しやすくする */
.f1-choice-chips--status { gap: 6px; }
.f1-choice-chips--status .f1-choice-chip span { min-height: 44px; padding: 8px 16px; }

.f1-medical-field { border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.f1-medical-field legend { font-size: 0.86rem; font-weight: 700; padding: 0 6px; }
.f1-medical-field__free { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-medical-field__free textarea { width: 100%; margin-top: 4px; }

@media (max-width: 640px) {
  .f1-choice-chip span { min-height: 44px; font-size: 0.84rem; }
}

/* --------------------------------------------------------------------------
   契約施設の情報更新画面

   契約施設は保育園だけではないため、業種を問わず使える見た目にする。
   1項目ごとに「何のための項目か」「記入例」「利用者に見えるかどうか」を添え、
   担当者が迷わず書けるようにする。
   -------------------------------------------------------------------------- */
.f1-facility-update__field { padding: 14px 0; border-bottom: 1px solid var(--dc3-border, #e6ebf2); }
.f1-facility-update__field:last-child { border-bottom: none; }

.f1-facility-update__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; margin-bottom: 4px; }
.f1-facility-update__badge { font-size: 0.68rem; font-weight: 700; color: #b26a00; background: #fdf6e8; border: 1px solid #e5c98a; border-radius: 999px; padding: 2px 8px; }
.f1-facility-update__vis { font-size: 0.68rem; font-weight: 700; color: var(--f1-color-success, #1f9d6e); background: #ecf8f4; border-radius: 999px; padding: 2px 8px; }
.f1-facility-update__vis--internal { color: var(--dc3-ink-soft, #5b6472); background: #f1f3f6; }

.f1-facility-update__desc { font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); margin: 0 0 6px; line-height: 1.5; }
.f1-facility-update__example { font-size: 0.76rem; color: var(--dc3-ink-weak, #98a2b3); margin: 4px 0 0; }

.f1-facility-update__field input[type="text"],
.f1-facility-update__field input[type="tel"],
.f1-facility-update__field input[type="url"],
.f1-facility-update__field input[type="email"],
.f1-facility-update__field input[type="number"],
.f1-facility-update__field select,
.f1-facility-update__field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 10px;
  font-size: 16px;   /* iPhoneで入力時に画面が拡大しないように16px以上を保つ */
  background: #fff;
}
.f1-facility-update__field textarea { min-height: 96px; line-height: 1.6; }

.f1-facility-update__history { padding: 10px 0; border-bottom: 1px dashed var(--dc3-border, #e6ebf2); font-size: 0.82rem; }
.f1-facility-update__history:last-child { border-bottom: none; }

@media (max-width: 640px) {
  .f1-facility-update__label { font-size: 0.86rem; }
}

/* 施設情報の確認状態。しばらく確認されていないときだけ色を変え、
   最新のときは静かに置く（毎回目立たせない）。 */
.f1-facility-update__status.is-fresh { border-left: 3px solid var(--f1-color-success, #1f9d6e); }
.f1-facility-update__status.is-stale { border-left: 3px solid #d9982a; background: #fdf6e8; }
.f1-facility-update__status .f1-btn { margin-right: 8px; margin-top: 4px; }

/* --------------------------------------------------------------------------
   契約施設のダッシュボード

   一般の利用者が Family Passport で家族の情報を管理するのと同じ見た目にそろえる。
   業務システムではなく、自分の施設を育てていく画面に見えるようにする。
   -------------------------------------------------------------------------- */
.f1-facility-portal__hero { background: linear-gradient(180deg, var(--f1-color-primary-tint, #deeeff), #fff); }
.f1-facility-portal__greeting { margin: 0; font-size: 0.82rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-facility-portal__name { margin: 2px 0 8px; font-size: 1.2rem; line-height: 1.4; }
.f1-facility-portal__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.f1-facility-portal__tag { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--f1-color-primary, #247bfb); color: var(--f1-color-primary, #247bfb); }
.f1-facility-portal__tag--listing { border-color: var(--f1-color-success, #1f9d6e); color: var(--f1-color-success, #1f9d6e); }

.f1-facility-portal__comp-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.88rem; font-weight: 700; }
.f1-facility-portal__comp-num { font-size: 1.5rem; color: var(--f1-color-primary, #247bfb); }
.f1-facility-portal__bar { height: 10px; border-radius: 999px; background: var(--dc3-border, #e6ebf2); overflow: hidden; margin: 8px 0; }
.f1-facility-portal__bar span { display: block; height: 100%; border-radius: 999px; background: var(--f1-color-primary, #247bfb); }
.f1-facility-portal__comp-note { font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); margin: 4px 0 0; }
.f1-facility-portal__missing { margin: 8px 0 0; padding-left: 1.1em; font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); }

/* 無料→有料の機能比較（facility-portal.php「現在のプラン」セクション） */
.f1-plan-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f1-plan-compare__col { background: #f7f9fc; border-radius: var(--f1-radius-md, 12px); padding: 12px; }
.f1-plan-compare__col--locked { background: var(--dc3-brand-blue-light, #deeeff); }
.f1-plan-compare__head { margin: 0 0 6px; font-size: 0.78rem; font-weight: 800; color: var(--dc3-ink-soft, #5b6472); }
.f1-plan-compare__list { margin: 0; padding-left: 1.1em; font-size: 0.8rem; line-height: 1.7; }
@media (max-width: 480px) {
  .f1-plan-compare { grid-template-columns: 1fr; }
}

.f1-facility-portal__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0; }
.f1-facility-portal__action {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "icon sub";
  gap: 2px 12px; align-items: center;
  padding: 14px 16px; border-radius: 14px; background: #fff;
  border: 1px solid var(--dc3-border, #e6ebf2); text-decoration: none; color: var(--dc3-ink, #1f2937);
  min-height: 64px;
}
.f1-facility-portal__action:hover { border-color: var(--f1-color-primary, #247bfb); }
.f1-facility-portal__action svg { grid-area: icon; color: var(--f1-color-primary, #247bfb); }
.f1-facility-portal__action-label { grid-area: label; font-weight: 700; font-size: 0.94rem; }
.f1-facility-portal__action-sub { grid-area: sub; font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-facility-portal__when { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); margin-left: 6px; }

.f1-passport-section__badge--partial { color: #b26a00; }
.f1-facility-update__saved { color: var(--f1-color-success, #1f9d6e); font-weight: 700; font-size: 0.86rem; margin: 0 0 10px; }

@media (min-width: 720px) {
  .f1-facility-portal__actions { grid-template-columns: 1fr 1fr; }
}

/* 事業者向けナビ。LINE内では共通ヘッダーが出ないため、画面内に行き先を置く。 */
.f1-facility-nav { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.f1-facility-nav::-webkit-scrollbar { display: none; }
.f1-facility-nav__item {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  background: #fff; border: 1px solid var(--dc3-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472);
}
.f1-facility-nav__item.is-active { background: var(--f1-color-primary, #247bfb); border-color: var(--f1-color-primary, #247bfb); color: #fff; }

/* 施設の写真管理。区分ごとに並べ、何がそろっていて何が足りないかが見えるようにする。 */
.f1-photo-group { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--dc3-border, #e6ebf2); }
.f1-photo-group__head { display: flex; align-items: baseline; gap: 8px; }
.f1-photo-group__label { font-weight: 700; font-size: 0.92rem; }
.f1-photo-group__count { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-photo-group__desc { margin: 2px 0 8px; font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-photo-group__empty { margin: 0; font-size: 0.8rem; color: var(--dc3-ink-soft, #5b6472); }

.f1-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.f1-photo-item { position: relative; border: 1px solid var(--dc3-border, #e6ebf2); border-radius: 12px; overflow: hidden; background: #fff; }
.f1-photo-item.is-main { border-color: var(--f1-color-primary, #247bfb); border-width: 2px; }
.f1-photo-item img { display: block; width: 100%; height: 120px; object-fit: cover; }
.f1-photo-item__badge { position: absolute; top: 6px; left: 6px; font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--f1-color-primary, #247bfb); color: #fff; }
.f1-photo-item__actions { display: flex; align-items: center; gap: 6px; padding: 6px; }
.f1-photo-item__actions select { flex: 1 1 auto; font-size: 0.76rem; padding: 4px 6px; }
.f1-photo-item__del { flex: 0 0 auto; font-size: 0.72rem; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--dc3-border, #e6ebf2); background: #fff; color: #b04a45; cursor: pointer; }
.f1-photo-item__del:hover { border-color: #b04a45; }
.f1-photo-upload { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--dc3-border, #e6ebf2); }
.f1-photo-upload input[type="file"] { display: block; width: 100%; font-size: 0.84rem; }

.f1-zip-result { margin-top: 6px; font-size: 0.84rem; }
.f1-btn--sm { font-size: 0.78rem; padding: 6px 12px; }

/* 営業デモ（legacy）であることの表示。実運用の画面と取り違えないように。 */
.f1-legacy-notice {
  margin: 8px 0 12px; padding: 10px 14px; border-radius: 10px;
  background: #fff6e5; border: 1px solid #e6c886; color: #6b4d10;
  font-size: 0.8rem; line-height: 1.6;
}
.f1-legacy-notice a { color: #1b5fbe; font-weight: 700; }

/* 契約施設のログイン。Family One の中にいることが分かる見た目にそろえる。 */
.f1-facility-login { max-width: 460px; margin: 0 auto; }
/* 【2026-08-14 不具合修正】施設担当者ログイン・パスワード再設定画面のロゴが
   原寸（Fアイコンが画面いっぱい）で表示され、横に約100pxはみ出していた。
   共通ロゴ（.f1-brand-logo）は、置く場所ごとに大きさを決める作りになっているが、
   この2画面だけ大きさの指定が無く、素材のサイズがそのまま出ていた。
   ここで大きさを決める。ロゴの中身・マークアップは変更しない。 */
.f1-facility-login__logo { text-align: center; margin: 0 0 14px; }
.f1-facility-login__logo .f1-brand-logo { justify-content: center; max-width: 100%; }
.f1-facility-login__logo .f1-brand-logo__symbol img { height: 44px; width: auto; }
.f1-facility-login__logo .f1-brand-logo__symbol-text-line1 { font-size: 1.15rem; color: var(--dc3-brand-blue, #247bfb); }
.f1-facility-login__logo .f1-brand-logo__symbol-text-line2 { font-size: 0.78rem; color: var(--dc3-ink, #1c2430); }
.f1-facility-login__logo .f1-brand-logo__wordmark img { height: 40px; width: auto; max-width: 100%; }
.f1-facility-login__form input[type="text"],
.f1-facility-login__form input[type="password"] { width: 100%; }

/* SiteGuardのCAPTCHA（family_one_render_login_captcha()）。
   同プラグインが自前で出す素のマークアップ（p > img/label/input）を、
   既存のログインフォームの見た目に合わせて最小限だけ調整する。 */
.f1-login-captcha { margin-top: 10px; }
.f1-login-captcha p { margin: 0 0 8px; }
.f1-login-captcha img { display: block; margin-bottom: 6px; border-radius: 6px; border: 1px solid var(--dc3-border, #e3e7ee); }
.f1-login-captcha input[type="text"] { width: 100%; max-width: 220px; }

/* 求人の一覧 */
.f1-job-list { list-style: none; margin: 0; padding: 0; }
.f1-job-item { padding: 12px 0; border-top: 1px solid var(--dc3-border, #e6ebf2); }
.f1-job-item:first-child { border-top: 0; padding-top: 0; }
.f1-job-item__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f1-job-item__badge { flex: 0 0 auto; font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--dc3-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472); }
.f1-job-item__badge.is-open { background: var(--f1-color-success, #1f9d6e); color: #fff; }
.f1-job-item__badge.is-waiting { background: #f0ad4e; color: #fff; }
.f1-job-item__title { font-weight: 700; font-size: 0.92rem; }
.f1-job-item__meta { margin: 4px 0 0; font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-job-item__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.f1-job-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
@media (min-width: 560px) { .f1-job-grid { grid-template-columns: 1fr 1fr; } }

/* LINE内フッターの事業者向け入口。家族向けの案内と見分けがつくように控えめに。 */
.f1-footer__note--facility { margin-top: 6px; font-size: 0.74rem; opacity: 0.85; }
.f1-top-facility-entry { border: 1.5px dashed var(--dc3-border, #e6ebf2); }
.f1-top-facility-entry:hover { border-color: var(--f1-color-primary, #247bfb); }

/* いま管理している施設。複数を担当している方だけに出す。 */
.f1-current-facility {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin: 0 0 12px; border-radius: 12px;
  background: var(--f1-color-primary-tint, #deeeff); border: 1px solid var(--f1-color-primary, #247bfb);
}
.f1-current-facility__label { display: block; font-size: 0.7rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-current-facility__name { font-size: 1rem; }
.f1-current-facility__role { margin-left: 8px; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: #fff; color: var(--f1-color-primary, #247bfb); }

/* 施設を選ぶ画面 */
.f1-switch-list { display: grid; gap: 10px; }
.f1-switch-item {
  display: grid; gap: 2px; text-align: left; width: 100%;
  padding: 16px; border-radius: 14px; background: #fff; cursor: pointer;
  border: 1px solid var(--dc3-border, #e6ebf2); min-height: 64px;
}
.f1-switch-item:hover { border-color: var(--f1-color-primary, #247bfb); }
.f1-switch-item.is-current { border-color: var(--f1-color-primary, #247bfb); border-width: 2px; background: var(--f1-color-primary-tint, #deeeff); }
.f1-switch-item__name { font-weight: 700; font-size: 1rem; }
.f1-switch-item__role { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-switch-item__now { font-size: 0.72rem; font-weight: 700; color: var(--f1-color-primary, #247bfb); }

/* 施設担当者のお申し込み */
.f1-facility-apply input[type="text"], .f1-facility-apply input[type="email"],
.f1-facility-apply input[type="tel"], .f1-facility-apply input[type="search"],
.f1-facility-apply select, .f1-facility-apply textarea { width: 100%; }
.f1-apply-results { display: grid; gap: 6px; margin-top: 8px; }
.f1-apply-result {
  display: grid; gap: 2px; text-align: left; width: 100%; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; background: #fff;
  border: 1px solid var(--dc3-border, #e6ebf2);
}
.f1-apply-result:hover { border-color: var(--f1-color-primary, #247bfb); }
.f1-apply-result span { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-apply-result__staff { color: #a8710f; }
.f1-apply-picked { margin-top: 10px; }
.f1-apply-picked__item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; margin-bottom: 6px; border-radius: 10px;
  background: var(--f1-color-primary-tint, #deeeff); font-size: 0.86rem; font-weight: 700;
}
.f1-apply-picked__del { border: 0; background: transparent; color: #b04a45; font-size: 0.76rem; cursor: pointer; }
.f1-apply-status { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; background: var(--dc3-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472); }
.f1-apply-status--approved { background: var(--f1-color-success, #1f9d6e); color: #fff; }
.f1-apply-status--submitted, .f1-apply-status--reviewing { background: #f0ad4e; color: #fff; }
.f1-apply-status--rejected, .f1-apply-status--returned, .f1-apply-status--suspended { background: #d9534f; color: #fff; }

/* 更新申請の状態バッジ（保存済み／申請済み／審査中／差戻し／承認済み／公開済み）。
   施設担当者側（/facility-update/）と運営側（/ops/facility-updates/）で共通に使う。 */
.f1-update-status { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: 6px; background: var(--dc3-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472); }
.f1-update-status--saved { background: var(--dc3-border, #e6ebf2); color: var(--dc3-ink-soft, #5b6472); }
.f1-update-status--submitted, .f1-update-status--reviewing { background: #f0ad4e; color: #fff; }
.f1-update-status--returned { background: #d9534f; color: #fff; }
.f1-update-status--approved { background: var(--f1-color-success, #1f9d6e); color: #fff; }
.f1-update-status--published { background: var(--f1-color-primary, #247bfb); color: #fff; }

.f1-update-status-card__head { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.f1-update-status-card__head .f1-update-status { margin-left: 0; }
.f1-update-status-card__meta { list-style: none; margin: 0 0 8px; padding: 0; font-size: 0.84rem; color: var(--dc3-ink-soft, #5b6472); }
.f1-update-status-card__meta li { margin: 2px 0; }
.f1-update-status-card__next { margin: 0; font-size: 0.86rem; }
.f1-update-status-card--submitted, .f1-update-status-card--reviewing { border-color: #f0ad4e; }
.f1-update-status-card--returned { border-color: #d9534f; }
.f1-update-status-card--approved { border-color: var(--f1-color-success, #1f9d6e); }
.f1-update-status-card--published { border-color: var(--f1-color-primary, #247bfb); }

/* 施設情報の入力状況。次に何をすればよいかを先に見せる。 */
.f1-update-progress__head { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; }
.f1-update-progress__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.f1-update-progress__list a { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: inherit; }
.f1-update-progress__list a:hover { background: var(--f1-color-primary-tint, #deeeff); }
.f1-update-progress__mark { font-weight: 700; text-align: center; }
.f1-update-progress__list li.is-done .f1-update-progress__mark { color: var(--f1-color-success, #1f9d6e); }
.f1-update-progress__list li.is-partial .f1-update-progress__mark { color: #b26a00; }
.f1-update-progress__list li.is-empty .f1-update-progress__mark { color: var(--dc3-ink-soft, #5b6472); }
.f1-update-progress__name { font-size: 0.88rem; }
.f1-update-progress__list li.is-done .f1-update-progress__name { color: var(--dc3-ink-soft, #5b6472); }
.f1-update-progress__count { font-size: 0.76rem; color: var(--dc3-ink-soft, #5b6472); }

/* セクションの状態。保存済みは静かに、未入力は目に留まるように。 */
.f1-update-section.is-done { border-color: var(--dc3-border, #e6ebf2); background: #fbfdfc; }
.f1-update-section.is-partial { border-color: #e6c886; }
.f1-update-section.is-todo { border-color: var(--f1-color-primary, #247bfb); }
.f1-update-section.is-pending { border-color: #d9982a; }
.f1-passport-section__badge--pending { color: #a8710f; }
.f1-update-section__summary-line { grid-column: 1 / -1; font-size: 0.78rem; color: var(--dc3-ink-soft, #5b6472); line-height: 1.5; margin-top: 2px; }

/* いま登録されている内容 */
.f1-update-section__saved { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: #f4f8f6; border: 1px solid #d6e5dd; }
.f1-update-section__saved-head { margin: 0 0 6px; font-size: 0.76rem; font-weight: 700; color: var(--f1-color-success, #1f9d6e); }
.f1-update-section__saved-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 0.82rem; }
.f1-update-section__saved-list dt { color: var(--dc3-ink-soft, #5b6472); white-space: nowrap; }
.f1-update-section__saved-list dd { margin: 0; word-break: break-word; }

/* 保存しました */
.f1-save-toast {
  position: sticky; top: 8px; z-index: 50; margin: 0 0 12px;
  padding: 12px 16px; border-radius: 12px; cursor: pointer;
  background: var(--f1-color-success, #1f9d6e); color: #fff; font-weight: 700; font-size: 0.9rem;
  box-shadow: 0 6px 18px rgba(31, 157, 110, 0.25);
  transition: opacity .4s ease, transform .4s ease;
}
.f1-save-toast.is-out { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.f1-save-toast__sub { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.95; margin-top: 2px; }

@media (max-width: 640px) {
  .f1-update-section__saved-list { grid-template-columns: 1fr; gap: 1px; }
  .f1-update-section__saved-list dt { font-size: 0.74rem; margin-top: 4px; }
}

/* LINEアプリ内フッターの主要メニュー（行き止まり防止）。
   画面下の固定ナビはLINEの操作を隠すため使わず、フッター内に1行で置く。 */
.f1-footer__liffnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  padding: 12px 16px 4px;
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: 10px;
}
.f1-footer__liffnav a {
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  opacity: 0.92;
  padding: 4px 2px;
}

/* ==========================================================================
   【2026-08-14】登録済みのお客さま向けトップ：スマートフォンのファーストビュー再設計
   --------------------------------------------------------------------------
   実機で見えていた問題（未登録の方向けのオープニング画面とは別の画面だった）
     ・写真の上にロゴ・見出し・説明文・青文字の一文・補足コピー・CTA3個が集中し過密
     ・大きな青いCTA「行政手続きを確認する」が子どもたちの上半身を横断
     ・共通ヘッダーのロゴのすぐ下に、ヒーロー内のロゴが重ねて出て二重に見える
     ・青文字の一文が写真に溶けて読めない

   考え方（優先順位）
     1. 子ども3人の写真   2. 主メッセージ   3. 主CTAは1つ   4. 補助導線はヒーローの下
   スマートフォンでは、写真の上に置くものを
     「見出し」「短い説明」「主CTA1つ」だけに絞る。
   「施設を探す」「地図から探す」は、すぐ下のクイックメニューに同じ行き先があるため、
   ヒーロー内では出さない（＝機能を削るのではなく、置き場所を1か所にまとめる）。
   PCは横幅を活かした従来のレイアウトのまま変えない。
   ========================================================================== */
@media (max-width: 640px) {
  /* 写真を主役にするため、空（そら）の面積を画面の幅からも決める。
     オープニング画面と同じ考え方（端末の縦の長さに左右されないようにする）。 */
  .f1-hero.f1-hero-visual { min-height: max(92vh, 225vw); }
  .f1-hero.f1-hero-visual .f1-hero-content { padding: 20px 18px 8px; }

  /* 共通ヘッダーに同じロゴが出ているので、写真の中のロゴは重ねない */
  .f1-hero.f1-hero-visual .f1-hero-logo-overlay { display: none; }

  .f1-hero.f1-hero-visual .f1-hero__title { font-size: 1.42rem; line-height: 1.4; margin: 0 0 8px; }
  .f1-hero.f1-hero-visual .f1-hero__sub { font-size: 0.82rem; line-height: 1.7; margin: 0 0 4px; }

  /* 写真に溶けて読めない・情報量を増やすだけの2つは、スマートフォンでは出さない
     （同じ内容は見出しと説明文で伝わっている） */
  .f1-hero.f1-hero-visual .f1-hero-tagline-accent { display: none; }
  .f1-hero.f1-hero-visual .f1-hero-brand-message { display: none; }

  /* 主CTAは1つだけ。補助の2つと、その下の細かい注記はヒーローに置かない */
  .f1-hero.f1-hero-visual .f1-hero-cta-row { margin-top: 12px; }
  .f1-hero.f1-hero-visual .f1-hero-cta-secondary-row { display: none; }
  .f1-hero.f1-hero-visual .f1-hero-cta-primary__note { display: none; }
  .f1-hero.f1-hero-visual .f1-hero-cta-primary .f1-btn {
    align-self: stretch;
    text-align: center;
    box-shadow: 0 10px 26px rgba(8,18,42,0.32);
  }
}

/* --------------------------------------------------------------------------
   ヒーロー直下の2つは、これまでCSSが1行も無く、素の青いリンク文字として
   表示されていた（実機で「表示崩れ」に見えていた正体）。
   Family Oneのカード・クイックメニューとして整える。
   -------------------------------------------------------------------------- */
.f1-hero-subnote + .f1-free-badge { display: inline-flex; margin: 0 auto 12px; }

.f1-passport-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin: 0 0 16px;
  border-radius: var(--f1-radius-lg, 14px);
  background: linear-gradient(135deg, #eef5ff 0%, #ffffff 70%);
  border: 1px solid var(--dc3-brand-blue-light, #deeeff);
  box-shadow: 0 2px 10px rgba(15,30,60,0.06);
  text-decoration: none;
  color: inherit;
}
.f1-passport-banner__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--f1-color-primary, #247bfb);
  color: #fff;
}
.f1-passport-banner__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.f1-passport-banner__title { font-weight: 800; font-size: 0.98rem; color: var(--dc3-ink, #1c2430); }
.f1-passport-banner__desc { font-size: 0.8rem; line-height: 1.6; color: var(--f1-color-text-soft, #5b6472); }
.f1-passport-banner__arrow { flex: 0 0 auto; margin-left: auto; color: var(--f1-color-primary, #247bfb); font-weight: 800; }

.f1-top-quicknav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
  margin: 0 0 20px;
}
.f1-top-quicknav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: var(--f1-radius-md, 12px);
  background: #fff;
  border: 1px solid var(--dc3-border, #e6ebf2);
  text-decoration: none;
  color: var(--dc3-ink, #1c2430);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.f1-top-quicknav__item svg { color: var(--f1-color-primary, #247bfb); }

/* 写真ヒーローの上に乗る細かい文字の読みやすさ（2026-08-14）
   PCで「検索して探す時代から、家族に寄り添う時代へ。」が青文字のまま青空に重なり、
   CTA下の注記が薄いグレーのまま芝生に重なって、どちらも読めなくなっていた。
   写真の上に出るときだけ白文字＋影にする（写真が無いページの色は変えない）。 */
.f1-hero-visual .f1-hero-tagline-accent {
  color: #fff;
  text-shadow: 0 1px 12px rgba(8,18,42,0.55);
}
.f1-hero-visual .f1-hero-cta-primary__note {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 10px rgba(8,18,42,0.6);
}

/* ==========================================================================
   【2026-08-14 追補】重要被写体（顔だけでなく頭の周り・上半身）を守る
   --------------------------------------------------------------------------
   判定を「顔の矩形に重なっていないか」から
   「頭の上の余白＋顔＋上半身（画像の高さの39.5%〜86%）に侵入していないか」へ
   厳しくしたところ、次の2点が引っかかった。実機で見ても確かに窮屈だったので直す。

   ① 未登録の方向けトップ（スマホ）：「家族の利用は、ずっと無料」が頭のすぐ上まで来ていた
      → 写真の高さを増やして空を広げ、文字まわりを詰める。
        画面の縦が短い端末では、説明文と安心文を出さず「見出し＋主CTA＋無料表示」に絞る
        （ヒーローに詰め込まないという今回の方針どおり）。
   ② 登録済みの方向けトップ（PC）：補助ボタンと注記が、後列の子の肩・頭の横に掛かっていた
      → スマホと同じ考え方で、補助ボタンはヒーローに置かず下のクイックメニューへ。
        注記は左の文字列の幅に収める。
   ========================================================================== */
@media (max-width: 640px) {
  .f1-opening-hero.f1-hero-visual { min-height: max(96vh, 245vw); }
  .f1-opening-hero .f1-hero-content { padding: 70px 18px 8px; }
  .f1-opening-hero.f1-hero-visual .f1-opening-hero__sub { margin-top: 6px; }
  .f1-opening-hero .f1-hero-cta-stack { margin-top: 12px; }
}
@media (max-width: 640px) and (max-height: 720px) {
  /* 画面の縦が短い端末は、写真・見出し・主CTAの3つに絞る。
     説明文と安心文を残すと、どう詰めても子どもの頭の上に文字が乗ってしまう。 */
  .f1-opening-hero.f1-hero-visual { min-height: max(88vh, 205vw); }
  .f1-opening-hero .f1-hero-content { padding: 66px 16px 8px; }
  .f1-opening-hero.f1-hero-visual .f1-opening-hero__title { font-size: 1.25rem; line-height: 1.32; }
  .f1-opening-hero.f1-hero-visual .f1-hero-reassure { display: none; }
  .f1-opening-hero.f1-hero-visual .f1-opening-hero__sub { display: none; }
  .f1-opening-hero .f1-hero-cta-stack { margin-top: 12px; gap: 6px; }
}

@media (min-width: 641px) {
  /* 補助ボタンはヒーローに置かない（同じ行き先がすぐ下のクイックメニューにある） */
  .f1-hero.f1-hero-visual .f1-hero-cta-secondary-row { display: none; }
  /* 注記は左の文章と同じ幅に収め、写真の人物側へはみ出させない */
  .f1-hero.f1-hero-visual .f1-hero-cta-primary__note { max-width: 250px; }
}

/* 補助ボタンをヒーローから外した結果、PCではヒーローが内容の高さまで縮み、
   写真の下側（前列の子の顔）が切れてしまった。写真の見せ場を確保する高さを持たせる
   （未登録の方向けのオープニング画面と同じ 86vh に揃える）。 */
@media (min-width: 641px) {
  .f1-hero.f1-hero-visual { min-height: 86vh; }
}

/* ==========================================================================
   【2026-08-17】PCトップ：三女（前列の子）の上半身まで自然に見せる＋入口を2つに
   --------------------------------------------------------------------------
   ① 写真の見え方
      PCは画像（2000×1500）に対してコンテナが横長なので、上下が切られる。
      これまで object-position-y を 20% にしていたため、画面に見えるのは
      画像の上から約73%までで、前列の子は顔の下あたりで切れていた。
      実測にもとづく計算（W=1440・画面の高さ900・ヒーロー86vhの場合）
        写真の描画高さ sh = 0.75W = 1080、ヒーロー高さ H = 774、切り取り幅 = 306
        画面の下端（900）で見えるのは 画像の (900 − ヒーロー上端 + 切り取り上) ÷ 1080
        前列の子の上半身（画像の約82%）まで入れるには 切り取り上 ≒ 122 が必要
        → y = 122 ÷ 306 ≒ 40%
      オープニング画面（未登録の方向け）は構図の条件が違うので 20% のまま。
      ここでは登録済みの方向けトップ（.f1-hero）だけを 40% にする。

   ② 入口を2つに
      「行政手続きを確認する」と「施設ランキングを見る」を同じ高さで横に並べる。
      スマートフォンは写真を主役にする方針のままなので、ランキング側は出さない
      （画面下の固定ナビから1タップで行ける）。
   ========================================================================== */
@media (min-width: 641px) {
  .f1-hero.f1-hero-visual .f1-hero-photo-layer img { object-position: center 40%; }

  .f1-hero-cta-primary__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
  .f1-hero-cta-primary__row .f1-btn { align-self: auto; }
  /* 写真の上に置く「もうひとつの入口」は、白抜きだと空に溶けるので背景を敷く */
  .f1-hero-visual .f1-hero-cta-primary__row .f1-btn--outline {
    background: rgba(255,255,255,0.94);
    border-color: rgba(255,255,255,0.94);
    color: var(--f1-color-primary, #247bfb);
    box-shadow: 0 6px 18px rgba(8,18,42,0.22);
  }
}
@media (max-width: 640px) {
  /* スマートフォンは主CTA1つのまま（現在の正常な状態を変えない） */
  /* 【2026-08-17 修正】スマートフォンでも「施設ランキングを見る」を出す。
     以前は写真を主役にするため主CTA1つに絞っていたが、PCと構成が食い違い、
     スマートフォンだけランキングへの入口が無くなっていた。
     横幅が足りないので縦に並べ、2つとも押せるようにする。 */
  .f1-hero.f1-hero-visual .f1-hero-cta-primary__row { flex-direction: column; gap: 8px; }
  .f1-hero.f1-hero-visual .f1-hero-cta-primary__row .f1-btn { width: 100%; max-width: 320px; text-align: center; }
  .f1-hero.f1-hero-visual .f1-hero-cta-primary__row .f1-btn--outline {
    background: rgba(255,255,255,0.94);
    border-color: rgba(255,255,255,0.94);
    color: var(--f1-color-primary, #247bfb);
    box-shadow: 0 6px 18px rgba(8,18,42,0.22);
  }
}

/* --------------------------------------------------------------------------
   PCトップの詰め（2026-08-17）
   写真の見せ方を変えた結果、子どもたちの位置が上がり、CTAと注記が
   「頭の上の安全マージン」に掛かるようになった。文字まわりを詰めて上へ寄せる。

   また、画面の縦が短いPC（1366×768など）はヒーロー自体が低くなるため、
   前列の子の上半身まで入れると、どう詰めても文字が頭に近づく。
   その場合は「重ならないこと」を優先して、写真の見せ方を元に戻す。
   -------------------------------------------------------------------------- */
@media (min-width: 641px) {
  .f1-hero.f1-hero-visual .f1-hero-content { padding-top: 8px; }
  .f1-hero.f1-hero-visual .f1-hero__title { margin: 4px 0; }
  .f1-hero.f1-hero-visual .f1-hero__sub { margin-bottom: 10px; }
  .f1-hero.f1-hero-visual .f1-hero-brand-message { margin-top: 2px; }
  .f1-hero.f1-hero-visual .f1-hero-cta-row { margin-top: 12px; }
  /* 注記は左側だけに収める（画面が広いほど子どもが中央に来るため） */
  .f1-hero.f1-hero-visual .f1-hero-cta-primary__note { max-width: 185px; }
}
@media (min-width: 641px) and (max-height: 849px) {
  .f1-hero.f1-hero-visual .f1-hero-photo-layer img { object-position: center 15%; }
}

/* さらに詰める：1440×900 で「施設ランキングを見る」が頭の上の安全マージンに
   24px入り込んでいたため、文字まわりをもう一段詰めて上へ寄せる。
   （本番には開発中デモの帯が無いぶん、さらに余裕が出る） */
@media (min-width: 641px) {
  .f1-hero.f1-hero-visual .f1-hero-content { padding-top: 0; }
  .f1-hero.f1-hero-visual .f1-hero__title { margin: 2px 0; }
  .f1-hero.f1-hero-visual .f1-hero__sub { margin-bottom: 4px; }
  .f1-hero.f1-hero-visual .f1-hero-brand-message { margin-top: 0; }
  .f1-hero.f1-hero-visual .f1-hero-cta-row { margin-top: 6px; }
}

/* ==========================================================================
   運営管理センター（/ops/）
   事務の方が毎日開く画面なので、装飾より「どこを押せばよいか」を優先する。
   ========================================================================== */
.f1-ops-portal { max-width: 920px; margin: 0 auto; padding: 20px 16px 40px; }
.f1-ops-portal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.f1-ops-portal__who { margin: 6px 0 0; font-size: 0.9rem; color: var(--f1-color-text-soft, #5b6472); }
.f1-ops-portal__role {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: var(--dc3-brand-blue-light, #deeeff); color: var(--f1-color-primary, #247bfb);
  font-size: 0.76rem; font-weight: 800;
}
.f1-ops-portal__logout { flex: 0 0 auto; }

.f1-ops-portal__section-title {
  font-size: 1rem; font-weight: 800; margin: 26px 0 10px;
  color: var(--dc3-ink, #1c2430);
}
.f1-ops-portal__waiting { margin-top: 4px; }
.f1-ops-portal__waiting-list { display: flex; flex-wrap: wrap; gap: 10px; }
.f1-ops-portal__waiting-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--f1-radius-md, 12px);
  background: #fff7ed; border: 1px solid #fed7aa;
  text-decoration: none; color: var(--dc3-ink, #1c2430); font-weight: 700;
}
.f1-ops-portal__waiting-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px;
  background: #ea580c; color: #fff; font-weight: 800;
}
.f1-ops-portal__clear { background: #f0fdf4; border-color: #bbf7d0; }

.f1-ops-portal__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
}
.f1-ops-portal__card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px; border-radius: var(--f1-radius-md, 12px);
  background: #fff; border: 1px solid var(--dc3-border, #e6ebf2);
  text-decoration: none; color: inherit;
}
.f1-ops-portal__card.is-main { border-color: var(--f1-color-primary, #247bfb); background: #f5f9ff; }
.f1-ops-portal__card.is-building { background: #f8fafc; color: var(--f1-color-text-soft, #5b6472); }
.f1-ops-portal__card-title { font-weight: 800; font-size: 0.96rem; }
.f1-ops-portal__card-desc { font-size: 0.82rem; line-height: 1.6; color: var(--f1-color-text-soft, #5b6472); }
.f1-ops-portal__card-note { font-size: 0.76rem; line-height: 1.6; color: #92700a; }
.f1-ops-portal__badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #fef3c7; color: #92700a; font-size: 0.7rem; font-weight: 800;
}
.f1-ops-portal__foot {
  margin-top: 28px; font-size: 0.8rem; line-height: 1.7;
  color: var(--f1-color-text-soft, #5b6472);
}

/* ==========================================================================
   運営管理センターの業務画面（/ops/配下）
   毎日開く画面なので、装飾より「どこを押すか」「いまどこにいるか」を優先する。
   ========================================================================== */
.f1-ops-nav {
  display: flex; gap: 6px; margin: 0 0 18px; padding-bottom: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.f1-ops-nav a {
  flex: 0 0 auto; padding: 8px 14px; border-radius: var(--f1-radius-full, 999px);
  background: #fff; border: 1px solid var(--dc3-border, #e6ebf2);
  text-decoration: none; color: var(--dc3-ink, #1c2430);
  font-size: 0.84rem; font-weight: 700; white-space: nowrap;
}
.f1-ops-nav a.is-active { background: var(--f1-color-primary, #247bfb); border-color: var(--f1-color-primary, #247bfb); color: #fff; }
.f1-ops-nav__home { font-weight: 800; }

.f1-ops-page__desc { font-size: 0.86rem; line-height: 1.7; color: var(--f1-color-text-soft, #5b6472); margin: 0 0 16px; }
.f1-ops-page__back { margin-top: 28px; }

.f1-ops-tabs { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.f1-ops-tabs__item {
  padding: 6px 14px; border-radius: var(--f1-radius-full, 999px);
  background: #f4f7fb; text-decoration: none; color: var(--f1-color-text-soft, #5b6472);
  font-size: 0.82rem; font-weight: 700;
}
.f1-ops-tabs__item.is-active { background: var(--dc3-brand-blue-light, #deeeff); color: var(--f1-color-primary, #247bfb); }

.f1-ops-table { display: flex; flex-direction: column; gap: 8px; }
.f1-ops-table__row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--f1-radius-md, 12px);
  background: #fff; border: 1px solid var(--dc3-border, #e6ebf2);
  text-decoration: none; color: inherit;
}
.f1-ops-table__row--link:hover { border-color: var(--f1-color-primary, #247bfb); }
.f1-ops-table__main { flex: 1 1 auto; min-width: 0; font-weight: 700; display: flex; flex-direction: column; gap: 3px; }
.f1-ops-table__sub { font-weight: 400; font-size: 0.8rem; color: var(--f1-color-text-soft, #5b6472); }
.f1-ops-table__link { flex: 0 0 auto; font-size: 0.82rem; font-weight: 700; color: var(--f1-color-primary, #247bfb); }

.f1-ops-badge {
  flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
  background: #f1f5f9; color: var(--dc3-ink, #1c2430); font-size: 0.74rem; font-weight: 800;
}
/* 確かめてほしいもの。赤ではなく橙にする（壊れている、ではなく、見てほしい） */
.f1-ops-badge--warn { background: #fff7ed; color: #b45309; }

/* 絞り込み・操作のひとまとまり。
   スマートフォンでは縦に積む（横に並べると入力欄が細くなって押しにくい）。 */
.f1-ops-form {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end;
  padding: 14px 16px; margin: 0 0 16px;
  background: #fff; border: 1px solid var(--dc3-border, #e6ebf2);
  border-radius: var(--f1-radius-md, 12px);
}
.f1-ops-form__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 0; }
.f1-ops-form__field > span { font-size: 0.78rem; font-weight: 700; color: var(--f1-color-text-soft, #5b6472); }
.f1-ops-form__field input,
.f1-ops-form__field select {
  width: 100%; padding: 9px 10px; font-size: 0.92rem;
  border: 1px solid var(--dc3-border, #e6ebf2); border-radius: var(--f1-radius-sm, 8px);
  background: #fff; color: var(--dc3-ink, #1c2430);
}
.f1-ops-form .f1-btn { flex: 0 0 auto; }
.f1-ops-form__note { flex: 1 1 200px; font-size: 0.8rem; color: var(--f1-color-text-soft, #5b6472); line-height: 1.6; }
@media (max-width: 600px) {
  .f1-ops-form { flex-direction: column; align-items: stretch; }
  .f1-ops-form .f1-btn { width: 100%; }
}

/* 表の行の中に置く小さな操作（権限の付け替えなど） */
.f1-ops-inline-form { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; flex-wrap: wrap; }
.f1-ops-inline-form select {
  padding: 7px 9px; font-size: 0.86rem;
  border: 1px solid var(--dc3-border, #e6ebf2); border-radius: var(--f1-radius-sm, 8px); background: #fff;
}

/* 操作の結果のお知らせ。消えないところに出す（トーストにしない） */
.f1-ops-notice { border-color: var(--f1-color-primary, #247bfb); background: #f5f9ff; }

.f1-ops-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 16px 0 0; }
.f1-ops-pager__now { font-size: 0.84rem; font-weight: 700; color: var(--f1-color-text-soft, #5b6472); }

.f1-ops-today__list { display: flex; flex-direction: column; gap: 10px; }
.f1-ops-today__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--f1-radius-md, 12px);
  background: #fff7ed; border: 1px solid #fed7aa;
}
.f1-ops-today__body { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; }
.f1-ops-today__label { font-weight: 800; }
.f1-ops-today__hint { font-size: 0.8rem; color: var(--f1-color-text-soft, #5b6472); }
.f1-ops-today__go { flex: 0 0 auto; }

.f1-ops-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.f1-ops-stats__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: var(--f1-radius-md, 12px);
  background: #fff; border: 1px solid var(--dc3-border, #e6ebf2);
}
.f1-ops-stats__value { font-size: 1.4rem; font-weight: 900; color: var(--f1-color-primary, #247bfb); }
.f1-ops-stats__label { font-size: 0.84rem; font-weight: 700; }
.f1-ops-stats__note { font-size: 0.74rem; color: var(--f1-color-text-soft, #5b6472); line-height: 1.6; }

.f1-ops-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.f1-ops-review__facility { font-weight: 800; }
.f1-ops-review__title { font-weight: 800; margin: 6px 0; }
.f1-ops-review__body { line-height: 1.9; margin: 8px 0; }
.f1-ops-review__meta { font-size: 0.8rem; color: var(--f1-color-text-soft, #5b6472); margin: 4px 0 0; }

.f1-ops-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.f1-ops-dl dt { font-size: 0.82rem; color: var(--f1-color-text-soft, #5b6472); font-weight: 700; }
.f1-ops-dl dd { margin: 0; font-weight: 700; word-break: break-word; }
@media (max-width: 480px) {
  .f1-ops-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .f1-ops-dl dd { margin-bottom: 10px; }
}

.f1-ops-diff { display: flex; flex-direction: column; gap: 12px; }
.f1-ops-diff__row {
  display: grid; grid-template-columns: 120px 1fr 1fr; gap: 10px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--dc3-border, #e6ebf2);
}
.f1-ops-diff__label { font-weight: 800; font-size: 0.86rem; }
.f1-ops-diff__before, .f1-ops-diff__after { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; }
.f1-ops-diff__tag {
  align-self: flex-start; padding: 2px 8px; border-radius: 999px;
  background: #f1f5f9; color: var(--f1-color-text-soft, #5b6472); font-size: 0.7rem; font-weight: 800;
}
.f1-ops-diff__tag--new { background: var(--dc3-brand-blue-light, #deeeff); color: var(--f1-color-primary, #247bfb); }
@media (max-width: 640px) {
  .f1-ops-diff__row { grid-template-columns: 1fr; gap: 6px; }
}

/* 口コミ承認後の「何が起きたか」の表示 */
.f1-ops-impact { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.f1-ops-impact__row { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.f1-ops-impact__label { font-size: 0.8rem; color: var(--f1-color-text-soft, #5b6472); min-width: 9em; font-weight: 700; }
.f1-ops-impact__value { font-weight: 800; }
.f1-ops-impact__value.is-changed { color: var(--f1-color-primary, #247bfb); }
.f1-ops-impact__note { font-size: 0.8rem; color: var(--f1-color-text-soft, #5b6472); margin: 6px 0 0; line-height: 1.7; }

/* 0歳向け 人気保育施設TOP10（制度をまたいだ横断ランキング）
   施設名だけでなく、どの制度の施設かが分かるようにバッジを添える。
   「確認済み」と「制度上対象・未確認」は色を分けて、混同しないようにする。 */
.f1-infant-top10 { margin: 0 0 20px; }
.f1-infant-top10__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.f1-infant-top10__item { display: flex; align-items: flex-start; gap: 10px; }
.f1-infant-top10__rank {
  flex: 0 0 auto; min-width: 26px; text-align: center;
  font-weight: 900; color: var(--f1-color-primary, #247bfb); line-height: 1.5;
}
.f1-infant-top10__body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: inherit;
}
.f1-infant-top10__name { font-weight: 700; line-height: 1.5; }
.f1-infant-top10__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.f1-infant-top10__type,
.f1-infant-top10__ok,
.f1-infant-top10__unknown {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; line-height: 1.6;
}
.f1-infant-top10__type { background: var(--dc3-brand-blue-light, #deeeff); color: var(--f1-color-primary, #247bfb); }
.f1-infant-top10__ok { background: #dcfce7; color: #15803d; }
.f1-infant-top10__unknown { background: #f1f5f9; color: var(--f1-color-text-soft, #5b6472); }
.f1-infant-top10__note {
  margin: 12px 0 0; font-size: 0.76rem; line-height: 1.8;
  color: var(--f1-color-text-soft, #5b6472);
}

/* 登録前ホームの0歳向けランキング（短い抜粋） */
.f1-infant-teaser { margin: 0 0 24px; }
.f1-infant-teaser__list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 16px; }
.f1-infant-teaser__item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--f1-radius-md, 12px);
  background: #fff; border: 1px solid var(--dc3-border, #e6ebf2);
  text-decoration: none; color: inherit;
}
.f1-infant-teaser__rank {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--f1-color-primary, #247bfb); color: #fff; font-weight: 900; font-size: 0.86rem;
}
.f1-infant-teaser__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.f1-infant-teaser__name { font-weight: 800; line-height: 1.5; }
.f1-infant-teaser__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.f1-infant-teaser__area {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: #f1f5f9; color: var(--f1-color-text-soft, #5b6472);
  font-size: 0.7rem; font-weight: 800;
}
.f1-infant-teaser__metrics {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 0.78rem; color: var(--f1-color-text-soft, #5b6472);
}
.f1-infant-teaser__metrics strong { color: var(--f1-color-primary, #247bfb); font-size: 0.9rem; }
.f1-infant-teaser__noreview { opacity: 0.8; }
.f1-infant-teaser__more { flex: 0 0 auto; font-size: 0.78rem; font-weight: 800; color: var(--f1-color-primary, #247bfb); }
.f1-infant-teaser__actions { margin-bottom: 18px; }
.f1-infant-teaser__passport {
  padding: 16px; border-radius: var(--f1-radius-lg, 14px);
  background: linear-gradient(135deg, #eef5ff 0%, #ffffff 70%);
  border: 1px solid var(--dc3-brand-blue-light, #deeeff);
}
.f1-infant-teaser__passport-lead { margin: 0 0 6px; font-weight: 800; line-height: 1.7; }
.f1-infant-teaser__passport-note {
  margin: 0 0 12px; font-size: 0.8rem; line-height: 1.8;
  color: var(--f1-color-text-soft, #5b6472);
}
@media (max-width: 480px) {
  .f1-infant-teaser__item { flex-wrap: wrap; }
  .f1-infant-teaser__more { width: 100%; text-align: right; }
}

/* ランキングの対象範囲を伝える一文。
   PCは見出しのすぐ下に小さめ、スマホは1〜2行で読めるようにする。 */
.f1-infant-scope {
  margin: 4px 0 12px;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--f1-color-text-soft, #5b6472);
}
@media (min-width: 641px) {
  .f1-infant-scope { font-size: 0.84rem; }
}

/* ランキングの考え方への導線（小さく、しかし必ず辿れるように） */
.f1-infant-scope--howto { margin: -6px 0 12px; font-size: 0.78rem; }
.f1-infant-scope--howto a { color: var(--f1-color-primary, #247bfb); font-weight: 700; }

/* ランキングの考え方：短い一文＋開いて読む詳細 */
.f1-ranking-note { margin: 0 0 14px; }
.f1-ranking-note__short { margin: 0 0 4px; font-size: 0.8rem; line-height: 1.7; color: var(--f1-color-text-soft, #5b6472); }
.f1-ranking-note__details > summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: 0.78rem; font-weight: 700; color: var(--f1-color-primary, #247bfb);
}
.f1-ranking-note__details > summary::-webkit-details-marker { display: none; }
.f1-ranking-note__details > summary::after { content: " ▼"; font-size: 0.7em; }
.f1-ranking-note__details[open] > summary::after { content: " ▲"; }
.f1-ranking-note__body {
  margin-top: 8px; padding: 12px 14px; border-radius: var(--f1-radius-md, 12px);
  background: #f8fafc; border: 1px solid var(--dc3-border, #e6ebf2);
}
.f1-ranking-note__body p { margin: 0 0 8px; font-size: 0.8rem; line-height: 1.9; }
.f1-ranking-note__body p:last-child { margin-bottom: 0; }
.f1-ranking-note__sep { color: var(--f1-color-text-soft, #5b6472); }

/* 「保育園を利用することも、子育ての選択肢のひとつです」
   説教や行政文書に見えないよう、やわらかいカードにする。 */
.f1-choice-card {
  margin: 0 0 20px; padding: 18px;
  border-radius: var(--f1-radius-lg, 14px);
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 70%);
  border: 1px solid #fed7aa;
}
.f1-choice-card__title { margin: 0 0 10px; font-size: 1rem; font-weight: 800; line-height: 1.6; }
.f1-choice-card__text { margin: 0 0 8px; font-size: 0.86rem; line-height: 1.95; }
.f1-choice-card__more { margin: 6px 0 0; font-size: 0.8rem; }
.f1-choice-card__more a { color: var(--f1-color-primary, #247bfb); font-weight: 700; }

.f1-choice-article { margin: 0 0 24px; }
.f1-choice-article__body p { margin: 0 0 12px; font-size: 0.9rem; line-height: 2; }
.f1-choice-article__next {
  margin-top: 16px; padding: 16px;
  border-radius: var(--f1-radius-md, 12px);
  background: #f8fafc; border: 1px solid var(--dc3-border, #e6ebf2);
}
.f1-choice-article__next-title { margin: 0 0 10px; font-weight: 800; font-size: 0.9rem; }
@media (min-width: 641px) {
  .f1-choice-card { padding: 22px 24px; }
  .f1-choice-card__title { font-size: 1.08rem; }
}