/* =========================================================================
   お悩み解決の事例ページ（/function/case/<slug>）
   色のリズム：白(ヒーロー) → ネイビー(課題→解決) → 白(施策) → 薄ティール(結果)
   ========================================================================= */

.fcase-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- ヒーロー（白・左画像/右テキスト・CTAなし） ---------- */
.fcase-hero {
    background: #fff;
    padding: 48px 24px 52px;
}
.fcase-hero-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    align-items: center;
}
.fcase-hero-media { min-width: 0; }
.fcase-hero-media img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
    box-shadow: 0 10px 30px rgba(26, 42, 68, 0.12);
}
.fcase-hero-ph {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    background: #eef2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9bb0c4;
    font-size: 14px;
    font-weight: 600;
}
.fcase-hero-text { min-width: 0; }
.fcase-hero-title {
    color: var(--navy);
    font-size: clamp(24px, 2.4vw + 14px, 38px);
    font-weight: 800;
    line-height: 1.5;
    margin: 0 0 16px;
}
.fcase-hero-sub {
    color: var(--text-color);
    font-size: clamp(15px, 0.6vw + 13px, 18px);
    line-height: 1.9;
    margin: 0;
}

/* セクション小見出し（eyebrow） */
.fcase-eyebrow {
    display: block;
    text-align: center;
    color: var(--main-color);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 28px;
}
.fcase-eyebrow::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: var(--main-color);
    margin: 12px auto 0;
}
.fcase-eyebrow-dark { color: var(--main-color-dark); }

/* ---------- 課題 → 解決（ネイビー帯） ---------- */
.fcase-goal {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    padding: 52px 0 56px;   /* 左右は .fcase-container に一本化（二重padding解消） */
}
.fcase-goal-cards {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 18px;
    align-items: stretch;
}
.fcase-goal-card {
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px;
}
.fcase-goal-label {
    display: inline-block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 3px solid;
}
/* 課題：紺ラベル＋赤下線 / 解決：赤ラベル＋紺下線 */
.fcase-goal-label-problem { color: var(--navy); border-color: #e2574c; }
.fcase-goal-label-solution { color: #c0392b; border-color: var(--navy); }
.fcase-goal-card p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--navy);
    margin: 0;
}
.fcase-goal-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
}

/* ---------- fugulinkの施策（白） ---------- */
.fcase-measure {
    background: #fff;
    padding: 56px 0;
}
.fcase-h2 {
    text-align: center;
    font-size: clamp(22px, 2vw + 10px, 30px);
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 32px;
}
.fcase-measure-list {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
/* 1施策 = [テキスト | 画像] の2カラム */
.fcase-measure-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    background: #f6f8fa;
    border-radius: 16px;
    padding: 28px 30px;
}
.fcase-measure-text { min-width: 0; }
.fcase-measure-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 10px;
}
.fcase-measure-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}
.fcase-measure-card p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-color);
    margin: 0;
}
/* 施策内の「実物を見る」リンクボタン */
.fcase-measure-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 18px;
    background: var(--main-color);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, transform 0.15s;
}
.fcase-measure-link:hover {
    background: var(--main-color-dark);
    transform: translateY(-1px);
}
.fcase-measure-link i { font-size: 13px; }
/* 右：実画面/グラフ */
.fcase-measure-media { min-width: 0; }
.fcase-measure-media img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    box-shadow: 0 6px 20px rgba(26, 42, 68, 0.12);
}
.fcase-measure-ph {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    background: #e3e9ef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9bb0c4;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- 結果（薄いティール） ---------- */
.fcase-result {
    background: #e0f7fa;
    padding: 56px 0 60px;
    text-align: center;
}
.fcase-result-metric {
    font-size: clamp(22px, 2.2vw + 12px, 34px);
    font-weight: 800;
    color: var(--navy);
    margin: 0 0 14px;
    line-height: 1.5;
}
.fcase-result-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-color);
    max-width: 680px;
    margin: 0 auto;
}

/* ---------- よくある質問（FAQ） ---------- */
.fcase-faq {
    background: #fff;
    padding: 56px 0 60px;
}
.fcase-faq-list {
    max-width: 760px;
    margin: 28px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fcase-faq-item {
    border: 1px solid #e0e6eb;
    border-radius: 8px;
    background: #fafbfc;
    overflow: hidden;
}
.fcase-faq-q {
    position: relative;
    list-style: none;
    cursor: pointer;
    padding: 18px 48px 18px 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.6;
}
.fcase-faq-q::-webkit-details-marker { display: none; }
.fcase-faq-q::after {
    content: '＋';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
    font-weight: 700;
    font-size: 18px;
}
.fcase-faq-item[open] .fcase-faq-q::after { content: '−'; }
.fcase-faq-item[open] .fcase-faq-q {
    border-bottom: 1px solid #e0e6eb;
}
.fcase-faq-a {
    padding: 16px 20px 20px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-color);
}
.fcase-faq-a a { color: var(--main-color-dark); }

/* ---------- 他のお悩み（誘導） ---------- */
.fcase-related {
    background: #fff;
    padding: 56px 0 64px;
    text-align: center;
}
.fcase-related-lead {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.9;
    margin: 0 0 28px;
}
.fcase-related-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 34px;
    background: var(--navy);
    color: #fff;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fcase-related-btn:hover {
    background: var(--navy-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(26, 42, 68, 0.2);
}

/* fugulink活用方法：同カテゴリのお悩みカード（landing.css の lp-worry-card を流用） */
.fcase-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1040px;
    margin: 0 auto 36px;
    text-align: left;
}
@media (max-width: 900px) {
    .fcase-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .fcase-related-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---------- 事例一覧ページ（/function/cases） ---------- */
.fcaselist-section {
    padding: 8px 0 0;
}
/* 最後のカテゴリとCTA帯の間に余白を確保（事例一覧のみ） */
.fcaselist-section:last-child {
    padding-bottom: 56px;
}
.fcaselist-label {
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    margin: 44px 0 24px;
}
.fcaselist-label::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: var(--main-color);
    border-radius: 2px;
    margin: 12px auto 0;
}
.fcaselist-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 900px) {
    .fcaselist-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .fcaselist-grid { grid-template-columns: 1fr; gap: 16px; }
    .fcaselist-label { font-size: 19px; margin: 32px 0 18px; }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 768px) {
    .fcase-hero { padding: 40px 20px 44px; }
    .fcase-hero-inner { grid-template-columns: 1fr; gap: 24px; }
    .fcase-hero-media { order: -1; }

    /* 横余白は container に一本化（16pxに詰めてカードを広く）、縦だけ詰める */
    .fcase-container { padding: 0 16px; }
    .fcase-goal { padding: 32px 0 36px; }
    .fcase-measure { padding: 32px 0; }
    .fcase-result { padding: 36px 0 40px; }
    .fcase-related { padding: 36px 0 42px; }
    .fcase-h2 { margin-bottom: 20px; }
    .fcase-eyebrow { margin-bottom: 18px; }

    /* 施策カード：縦積み・画像を上・文章を下。余白を詰めて画像を大きく */
    .fcase-measure-list { gap: 16px; }
    .fcase-measure-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
    .fcase-measure-media { order: -1; }
}
@media (max-width: 600px) {
    /* 課題→解決 を縦積み・矢印を下向きに */
    .fcase-goal-cards { grid-template-columns: 1fr; }
    .fcase-goal-arrow { transform: rotate(90deg); padding: 4px 0; }
}

/* ============================================================
   オートコール 施策図（実画面は使わないCSS図解 / fl-autocall シリーズ）
   自動発信 ＋ 結果一覧（まとめて確認）が伝わる構成。送迎管理UIは不使用。
   ============================================================ */
.fcase-ac {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 12px;
    border: 1px solid rgba(26, 42, 68, .12);
    box-shadow: 0 6px 20px rgba(26, 42, 68, .12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fcase-ac__head {
    background: var(--navy);
    color: #fff;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
}
.fcase-ac__head > i { font-size: 14px; color: var(--main-color); }
.fcase-ac__live {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #80deea;
    font-weight: 500;
}
.fcase-ac__live i { font-size: 7px; }
.fcase-ac__body {
    background: #f5fafb;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fcase-ac__row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 9px;
    border: 1px solid rgba(26, 42, 68, .1);
    padding: 7px 10px;
}
.fcase-ac__row--active {
    border: 1.5px solid var(--main-color);
    box-shadow: 0 3px 12px rgba(0, 188, 212, .18);
}
.fcase-ac__hm { font-size: 13px; font-weight: 700; color: var(--navy); min-width: 42px; }
.fcase-ac__type { font-size: 11px; color: #78909c; min-width: 28px; }
.fcase-ac__bar { flex: 1; min-width: 14px; height: 6px; background: #80deea; border-radius: 3px; }
.fcase-ac__row--active .fcase-ac__bar { background: var(--main-color); }
.fcase-ac__badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--main-color-dark);
    background: #e0f7fa;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
}
.fcase-ac__badge i { font-size: 11px; }
.fcase-ac__badge--active { color: #fff; background: var(--main-color); }

/* ============================================================
   送迎 リアルタイム共有 概念図（fl-transfer）の case 用調整
   施策の画像列は幅が狭い（約434px）ので、トップと同じ「放射状」を
   保ったまま、ノード・中央カードを少しコンパクトにして収める。
   ベースの見た目は landing.css の fl-transfer を流用。
   ============================================================ */
.fcase-measure-media .fl-node {
    width: 72px;
    height: 72px;
    border-width: 2px;
    gap: 2px;
}
.fcase-measure-media .fl-node i { font-size: 19px; }
.fcase-measure-media .fl-node span { font-size: 10px; }
.fcase-measure-media .fl-info { width: 188px; }
.fcase-measure-media .fl-info__head { font-size: 11px; padding: 7px 10px; }
.fcase-measure-media .fl-info__body { padding: 9px 10px; gap: 8px; }
.fcase-measure-media .fl-info__row span { font-size: 11px; min-width: 36px; }
.fcase-measure-media .fl-bar { height: 7px; }

/* ============================================================
   オールインワン 機能チップ図（実画面不使用・CSS図解）
   ============================================================ */
.fcase-chips {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(26, 42, 68, .12);
    box-shadow: 0 6px 20px rgba(26, 42, 68, .12);
    overflow: hidden;
}
.fcase-chips__head {
    background: var(--navy);
    color: #fff;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
}
.fcase-chips__head i { font-size: 15px; color: var(--main-color); }
.fcase-chips__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background: #f5fafb;
}
.fcase-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid rgba(26, 42, 68, .12);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy);
    box-shadow: 0 1px 3px rgba(26, 42, 68, .06);
}
.fcase-chip i { font-size: 13px; color: var(--main-color); }

/* ============================================================
   ノート キャスト別×時系列 図（実画面不使用・CSS図解）
   ============================================================ */
.fcase-note {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(26, 42, 68, .12);
    box-shadow: 0 6px 20px rgba(26, 42, 68, .12);
    overflow: hidden;
}
.fcase-note__head {
    background: var(--navy);
    color: #fff;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
}
.fcase-note__head i { font-size: 15px; color: var(--main-color); }
.fcase-note__body {
    background: #f5fafb;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* 時系列を表す縦ライン */
    position: relative;
}
.fcase-note__body::before {
    content: "";
    position: absolute;
    left: 70px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: #cfe9ee;
}
.fcase-note__row {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.fcase-note__time {
    flex-shrink: 0;
    width: 46px;
    font-size: 11px;
    font-weight: 700;
    color: var(--main-color-dark);
    padding-top: 8px;
    text-align: right;
}
.fcase-note__bubble {
    position: relative;
    flex: 1;
    background: #fff;
    border: 1px solid rgba(26, 42, 68, .1);
    border-radius: 10px;
    padding: 9px 11px;
    font-size: 12.5px;
    color: var(--navy);
    line-height: 1.5;
}
/* 縦ライン上のドット */
.fcase-note__bubble::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--main-color);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cfe9ee;
}
.fcase-note__row--warn .fcase-note__bubble {
    border-color: #ffcc80;
    background: #fff8e1;
}
.fcase-note__row--warn .fcase-note__bubble::before { background: #fb8c00; }
.fcase-note__by {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    color: #78909c;
}

/* ============================================================
   ノート お知らせ・タスク ボード図（実画面不使用・CSS図解）
   ============================================================ */
.fcase-board {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(26, 42, 68, .12);
    box-shadow: 0 6px 20px rgba(26, 42, 68, .12);
    overflow: hidden;
}
.fcase-board__head {
    background: var(--navy);
    color: #fff;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
}
.fcase-board__head i { font-size: 15px; color: var(--main-color); }
.fcase-board__body {
    background: #f5fafb;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fcase-board__row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(26, 42, 68, .1);
    border-radius: 10px;
    padding: 10px 12px;
}
.fcase-board__ic { font-size: 15px; color: #90a4ae; flex-shrink: 0; }
.fcase-board__txt {
    flex: 1;
    font-size: 12.5px;
    color: var(--navy);
    line-height: 1.4;
}
.fcase-board__meta {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #78909c;
}
/* 完了タスク */
.fcase-board__row--done .fcase-board__ic { color: var(--main-color); }
.fcase-board__row--done .fcase-board__txt {
    color: #9e9e9e;
    text-decoration: line-through;
}
/* お知らせ */
.fcase-board__row--info { border-color: #b2ebf2; background: #e0f7fa; }
.fcase-board__row--info .fcase-board__ic { color: var(--main-color-dark); }
.fcase-board__row--info .fcase-board__meta { color: var(--main-color-dark); }

/* ============================================================
   ノート 店舗独自カテゴリ 図（実画面不使用・CSS図解）
   ============================================================ */
.fcase-cats {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(26, 42, 68, .12);
    box-shadow: 0 6px 20px rgba(26, 42, 68, .12);
    overflow: hidden;
}
.fcase-cats__head {
    background: var(--navy);
    color: #fff;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
}
.fcase-cats__head i { font-size: 15px; color: var(--main-color); }
.fcase-cats__body {
    background: #f5fafb;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fcase-cats__row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(26, 42, 68, .1);
    border-radius: 10px;
    padding: 10px 12px;
}
.fcase-cats__ic { font-size: 15px; color: #90a4ae; flex-shrink: 0; }
.fcase-cats__name { flex: 1; font-size: 13px; font-weight: 600; color: var(--navy); }
.fcase-cats__tag {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: #90a4ae;
    background: #eceff1;
    border-radius: 999px;
    padding: 2px 9px;
}
/* 店舗独自カテゴリ */
.fcase-cats__row--own { border-color: #b2ebf2; }
.fcase-cats__row--own .fcase-cats__ic { color: var(--main-color); }
.fcase-cats__tag--own { color: #fff; background: var(--main-color); }
/* カテゴリ追加 */
.fcase-cats__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px dashed var(--main-color);
    color: var(--main-color-dark);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 700;
    background: rgba(0, 188, 212, 0.05);
}

/* 写真＋下部キャプション帯（人物写真などに使用） */
.fcase-photo {
    position: relative;
    display: block;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(26, 42, 68, .12);
    line-height: 0;
}
.fcase-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
}
.fcase-photo__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 42, 68, 0.82);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    padding: 11px 12px;
}