/* ============================================================
   case-rich.css — 施工事例ページ Phase 1 リッチ仕様
   既存 style.css は一切変更せず、本ファイルにすべて記述。
   全クラスに .case-rich- プレフィックス / 変数は --cr- プレフィックス
   （既存の --text-dark 等と衝突しないよう独自名前空間）
   ============================================================ */

:root {
    --cr-accent: #f0825a;      /* アクセントオレンジ */
    --cr-accent-dark: #d96a44;
    --cr-bg: #f7f6f1;          /* ベージュ背景 */
    --cr-text: #2c2c2a;        /* 本文ダーク */
    --cr-border: #b8b6ac;      /* 罫線ライト */
    --cr-white: #ffffff;
    --cr-header-offset: 80px;  /* 固定ヘッダー分のスクロールオフセット */
    --cr-radius: 10px;
    --cr-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* 滑らかアンカースクロール（E-30）。オフセットは scroll-padding-top で確保 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--cr-header-offset);
}

/* ============================================================
   1. Ken Burns ヒーロー（A-6）
   既存 .case-hero 内の img に .case-rich-hero-img を付与
   ============================================================ */
.case-hero {
    overflow: hidden;
}
.case-hero .case-rich-hero-img {
    width: 100%;
    transform-origin: center center;
    will-change: transform;
    animation: caseRichKenBurns 20s ease-in-out infinite alternate;
}
@keyframes caseRichKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

/* ============================================================
   4. 読了率バー（C-20）— JSが body 直下に生成
   ============================================================ */
.case-rich-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}
.case-rich-progress__fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cr-accent);
    transition: width 0.1s linear;
}

/* ============================================================
   3. 目次 + スクロール連動（C-19）
   ============================================================ */
.case-rich-article-layout {
    display: block;
}
.case-rich-toc {
    margin: 0 0 32px;
    background: var(--cr-bg);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    padding: 16px 18px;
}
.case-rich-toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--cr-text);
    padding: 0;
}
.case-rich-toc__toggle-icon {
    transition: transform 0.3s ease;
    font-size: 12px;
}
.case-rich-toc.is-open .case-rich-toc__toggle-icon {
    transform: rotate(180deg);
}
.case-rich-toc__list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.case-rich-toc__item { margin: 0; }
.case-rich-toc__link {
    display: block;
    padding: 7px 10px;
    border-left: 3px solid transparent;
    color: #5b5b56;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.case-rich-toc__link:hover {
    color: var(--cr-accent-dark);
    background: rgba(240, 130, 90, 0.08);
}
.case-rich-toc__link.is-active {
    color: var(--cr-accent-dark);
    border-left-color: var(--cr-accent);
    background: rgba(240, 130, 90, 0.1);
    font-weight: 700;
}

/* モバイル：アコーディオン（既定で閉じる） */
@media (max-width: 1023px) {
    .case-rich-toc__list {
        overflow: hidden;
        max-height: 0;
        margin-top: 0;
        transition: max-height 0.35s ease, margin-top 0.35s ease;
    }
    .case-rich-toc.is-open .case-rich-toc__list {
        max-height: 70vh;
        margin-top: 14px;
        overflow-y: auto;
    }
}

/* デスクトップ：左サイドバー固定（>1024px） */
@media (min-width: 1024px) {
    .case-rich-article-layout {
        display: flex;
        align-items: flex-start;
        gap: 40px;
    }
    .case-rich-toc {
        flex: 0 0 220px;
        position: sticky;
        top: var(--cr-header-offset);
        margin-bottom: 0;
    }
    .case-rich-toc__toggle {
        cursor: default;
        pointer-events: none;
    }
    .case-rich-toc__toggle-icon { display: none; }
    .case-rich-toc__list {
        max-height: none !important;
        margin-top: 14px !important;
    }
    .case-rich-article-body {
        flex: 1 1 auto;
        min-width: 0; /* flex item のはみ出し防止 */
    }
}

/* ============================================================
   2. マスonryギャラリー + ライトボックス（A-7）
   ============================================================ */
.case-rich-gallery {
    columns: 3 220px;
    column-gap: 14px;
    margin: 28px 0;
}
.case-rich-gallery figure,
.case-rich-gallery .case-rich-gallery-item {
    break-inside: avoid;
    margin: 0 0 14px;
    border-radius: 8px;
    overflow: hidden;
}
.case-rich-gallery img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    border-radius: 8px;
    transition: transform 0.4s ease, filter 0.3s ease;
}
.case-rich-gallery img:hover {
    transform: scale(1.02);
    filter: brightness(1.05);
}
.case-rich-gallery figcaption {
    font-size: 13px;
    color: #6c6c66;
    padding: 6px 2px 0;
}
/* 本文画像も拡大対象であることを示すカーソル */
.case-rich-zoomable { cursor: zoom-in; }

/* ライトボックス本体（JSが body 直下に生成） */
.case-rich-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 18, 0.92);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.case-rich-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
.case-rich-lightbox__stage {
    max-width: 92vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.case-rich-lightbox__img {
    max-width: 92vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: var(--cr-shadow);
    user-select: none;
    -webkit-user-drag: none;
}
.case-rich-lightbox__caption {
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    text-align: center;
    color: #f2f2ee;
    font-size: 14px;
    padding: 0 20px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.case-rich-lightbox__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.case-rich-lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); }
.case-rich-lightbox__btn--prev { left: 16px; }
.case-rich-lightbox__btn--next { right: 16px; }
.case-rich-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.case-rich-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }
.case-rich-lightbox__counter {
    position: absolute;
    top: 22px;
    left: 20px;
    color: #f2f2ee;
    font-size: 14px;
    letter-spacing: 0.05em;
}
@media (max-width: 768px) {
    .case-rich-gallery { columns: 2 140px; }
    .case-rich-lightbox__btn { width: 42px; height: 42px; font-size: 22px; }
}

/* ============================================================
   7-A. 記事内 FAQ アコーディオン（本文中 HTML を JS で開閉化）
   ============================================================ */
.case-rich-faq {
    margin: 40px 0;
}
.case-rich-faq__heading {
    font-size: 22px;
    margin-bottom: 18px;
    color: var(--cr-text);
}
.case-rich-faq-item {
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--cr-white);
}
.case-rich-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    padding: 16px 18px;
    font-weight: 700;
    color: var(--cr-text);
    background: var(--cr-bg);
    list-style: none;
}
.case-rich-faq-q::before {
    content: "Q";
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--cr-accent);
    margin-right: 4px;
}
.case-rich-faq-q::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
    color: var(--cr-accent);
    transition: transform 0.3s ease;
}
.case-rich-faq-item.is-open .case-rich-faq-q::after {
    transform: rotate(45deg);
}
.case-rich-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0 18px;
}
.case-rich-faq-item.is-open .case-rich-faq-a {
    padding: 16px 18px;
}
.case-rich-faq-a > *:first-child { margin-top: 0; }
.case-rich-faq-a > *:last-child { margin-bottom: 0; }

/* ============================================================
   7-B. 静的 Q&A ウィジェット（footer.php に常設・全ページ）
   ============================================================ */
.case-rich-qa-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--cr-accent);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--cr-shadow);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}
.case-rich-qa-launcher:hover {
    transform: scale(1.06);
    background: var(--cr-accent-dark);
}
.case-rich-qa-launcher.is-hidden { display: none; }

.case-rich-qa-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 360px;
    height: 500px;
    max-height: calc(100vh - 40px);
    background: var(--cr-white);
    border-radius: 14px;
    box-shadow: var(--cr-shadow);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.case-rich-qa-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.case-rich-qa-header {
    background: var(--cr-accent);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}
.case-rich-qa-header h3 {
    font-size: 15px;
    margin: 0;
    font-weight: 700;
}
.case-rich-qa-header small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 2px;
}
.case-rich-qa-close {
    border: none;
    background: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.case-rich-qa-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
    background: var(--cr-bg);
    -webkit-overflow-scrolling: touch;
}
.case-rich-qa-msg {
    margin-bottom: 12px;
    display: flex;
}
.case-rich-qa-msg--bot { justify-content: flex-start; }
.case-rich-qa-msg--user { justify-content: flex-end; }
.case-rich-qa-bubble {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
.case-rich-qa-msg--bot .case-rich-qa-bubble {
    background: var(--cr-white);
    border: 1px solid var(--cr-border);
    border-bottom-left-radius: 4px;
    color: var(--cr-text);
}
.case-rich-qa-msg--user .case-rich-qa-bubble {
    background: var(--cr-accent);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.case-rich-qa-bubble .case-rich-qa-q-title {
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.case-rich-qa-bubble a {
    color: var(--cr-accent-dark);
    text-decoration: underline;
    font-weight: 700;
}
.case-rich-qa-msg--user .case-rich-qa-bubble a { color: #fff; }
.case-rich-qa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.case-rich-qa-chip {
    border: 1px solid var(--cr-border);
    background: var(--cr-white);
    color: var(--cr-text);
    border-radius: 16px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    font-family: inherit;
}
.case-rich-qa-chip:hover {
    background: var(--cr-accent);
    color: #fff;
    border-color: var(--cr-accent);
}
.case-rich-qa-footer {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--cr-border);
    background: var(--cr-white);
}
.case-rich-qa-input {
    flex: 1 1 auto;
    border: 1px solid var(--cr-border);
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    min-width: 0;
}
.case-rich-qa-input:focus { border-color: var(--cr-accent); }
.case-rich-qa-send {
    flex: 0 0 auto;
    border: none;
    background: var(--cr-accent);
    color: #fff;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease;
}
.case-rich-qa-send:hover { background: var(--cr-accent-dark); }

/* モバイル：全画面 */
@media (max-width: 767px) {
    .case-rich-qa-panel {
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
}

/* ============================================================
   アクセシビリティ：モーション低減設定
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .case-hero .case-rich-hero-img { animation: none; }
    .case-rich-progress__fill,
    .case-rich-faq-a,
    .case-rich-qa-panel,
    .case-rich-lightbox,
    .case-rich-gallery img { transition: none; }
}

/* ============================================================
   ============================================================
   G1 機能追加（CSS純粋追加・追記のみ / 2026-05-27）
   C-11 h2番号バッジ / C-12 h2アンダーライン / C-13 画像拡大アイコン
   C-14 FAQ開閉アニメ強化
   ・他ファイル不変。既存ルールは変更せず、必要箇所のみ後勝ち上書き。
   ・!important 不使用。新規クラスは .case-rich- 維持。
   ============================================================
   ============================================================ */

/* 仕様で参照される --accent-orange 等のエイリアス（値は Phase1 の --cr-* と同一）。
   ※ --text-dark は style.css に別値(#1a202c)で既存のため再定義せず、--cr-text(#2c2c2a) を使う。 */
:root {
    --accent-orange: var(--cr-accent);   /* #f0825a */
    --bg-beige:      var(--cr-bg);        /* #f7f6f1 */
    --border-light:  var(--cr-border);    /* #b8b6ac */
}

/* === C-11: h2番号バッジ（建築誌の章番号スタイル） ===
   ・case記事本文の h2 を左寄せ化し、左に「01」「02」… を自動採番で表示。
   ・FAQ見出し(.case-rich-faq__heading)・関連事例h2(レイアウト外)は対象外。
   ・番号は h2 の左 padding 内にハング（目次サイドバーと衝突させない）。 */
.case-detail .case-rich-article-layout {
    counter-reset: caseRichH2;
}
.case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading) {
    counter-increment: caseRichH2;
    text-align: left;          /* 既存の中央寄せ(.section-content h2)を後勝ちで左寄せに */
    padding-left: 4rem;        /* 番号バッジのハング領域 */
    /* position:relative は既存 .case-detail .section-content h2 で設定済み */
}
.case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading)::before {
    content: counter(caseRichH2, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 1rem;        /* テキストとの間隔の意図値 */
    font-family: 'Times New Roman', serif;
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
    color: var(--accent-orange);
}

/* === C-12: h2スクロール連動アンダーライン（左→右に伸びる） ===
   既存 .case-detail .section-content h2::after（中央グレー絶対配置の下線）を
   同要素で後勝ち上書き。絶対配置を解除し、フロー内の左基点バーに置換。 */
.case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading)::after {
    content: '';
    display: block;
    position: static;          /* 既存の position:absolute を解除 */
    left: auto;
    bottom: auto;
    transform: none;           /* 既存の translateX(-50%) を解除 */
    width: 0;
    height: 2px;
    margin-top: 0.5rem;
    background: var(--accent-orange);
    transition: width 0.6s ease-out;
}
.case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading):hover::after,
.case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading).case-rich-h2-visible::after {
    width: 40px;               /* マウスを離しても/可視クラスが付けば残る */
}

/* C-11/C-12 モバイル（768px以下）: 番号は上に・小さく */
@media (max-width: 768px) {
    .case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading) {
        padding-left: 0;
    }
    .case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading)::before {
        position: static;
        display: block;
        transform: none;
        top: auto;
        font-size: 2rem;
        margin-right: 0;
        margin-bottom: 0.25rem;
    }
}

/* === C-13: 画像ホバーで「拡大」アイコン浮上 ===
   クリックでのライトボックスは既存JSのまま（変更不要）。
   マウスデバイス(@media hover:hover)のみオーバーレイ表示。 */
.case-rich-gallery figure,
.case-rich-single-image {
    position: relative;
}
@media (hover: hover) {
    .case-rich-gallery figure::after,
    .case-rich-single-image::after {
        content: "\1F50D";     /* 🔍 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: var(--cr-text);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        opacity: 0;
        pointer-events: none;  /* クリックは画像へ透過（既存ライトボックス維持） */
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .case-rich-gallery figure:hover::after,
    .case-rich-single-image:hover::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}
/* 画像自体の軽ズーム・zoom-in カーソルは Phase1 既存（.case-rich-gallery img）を活用。
   単体画像にも保険でカーソルとズームを付与（任意マークアップ用）。 */
.case-rich-single-image img {
    cursor: zoom-in;
    transition: transform 0.4s ease;
}
@media (hover: hover) {
    .case-rich-single-image:hover img {
        transform: scale(1.02);
    }
}

/* === C-14: FAQ開閉アニメーション強化 ===
   ※ 既存JS(initFAQ)は .is-open のトグルに加え style.maxHeight を実体高さでインライン指定する実装。
     そのため max-height は JS が正確制御（固定500pxより良い）→ CSSでは触れず、
     opacity フェードとトランジション時間(0.4s ease-in-out)のみ後勝ちで強化する。
     +/-（45°回転）アイコンは Phase1 で実装済み。 */
.case-rich-faq-item .case-rich-faq-a {
    opacity: 0;
    transition: max-height 0.4s ease-in-out,
                opacity 0.4s ease-in-out,
                padding 0.4s ease-in-out;
}
.case-rich-faq-item.is-open .case-rich-faq-a {
    opacity: 1;
}

/* G1分のモーション低減対応（追記） */
@media (prefers-reduced-motion: reduce) {
    .case-detail .case-rich-article-layout h2:not(.case-rich-faq__heading)::after,
    .case-rich-gallery figure::after,
    .case-rich-single-image::after,
    .case-rich-single-image img { transition: none; }
}

/* ============================================================
   ============================================================
   G2 機能追加（JS連動 / 2026-05-27）
   A-4 画像フェードイン用クラス / A-7 次の事例サジェストカード
   ・case-rich.css 追記のみ。!important 不使用。.case-rich- プレフィックス維持。
   ============================================================
   ============================================================ */

/* === A-4: 画像フェードイン（JSが .case-rich-fade-in を付与、可視で .is-visible） ===
   既存 .case-rich-gallery img / .case-rich-single-image img の transition より
   詳細度を上げ、opacity を確実にトランジションさせる。 */
.case-rich-gallery figure img.case-rich-fade-in,
.case-rich-single-image img.case-rich-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.case-rich-gallery figure img.case-rich-fade-in.is-visible,
.case-rich-single-image img.case-rich-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* フェード後もホバー軽ズーム(Phase1/G1)を維持するための合成 transform */
@media (hover: hover) {
    .case-rich-gallery figure img.case-rich-fade-in.is-visible:hover,
    .case-rich-single-image:hover img.case-rich-fade-in.is-visible {
        transform: translateY(0) scale(1.02);
    }
}

/* === A-7: 次の事例サジェスト === */
.case-rich-next-suggest {
    position: fixed;
    right: 24px;
    bottom: 100px; /* Q&Aウィジェット(56px)＋余白の上に配置 */
    z-index: 9998; /* Q&Aウィジェットより下、ライトボックスより下 */
    background: white;
    border: 1px solid var(--border-light, #b8b6ac);
    border-radius: 12px;
    padding: 16px 48px 16px 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    max-width: 320px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
}
.case-rich-next-suggest.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.case-rich-next-suggest__link {
    text-decoration: none;
    color: var(--cr-text, #2c2c2a);
    display: block;
}
.case-rich-next-suggest__label {
    font-size: 0.75rem;
    color: var(--cr-accent, #f0825a);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}
.case-rich-next-suggest__title {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 4px;
}
.case-rich-next-suggest__arrow {
    font-size: 1.1rem;
    color: var(--cr-accent, #f0825a);
    margin-top: 4px;
}
.case-rich-next-suggest__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--border-light, #b8b6ac);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}
.case-rich-next-suggest__close:hover {
    background: rgba(0, 0, 0, 0.06);
}
@media (max-width: 768px) {
    .case-rich-next-suggest {
        right: 16px;
        bottom: 90px;
        max-width: calc(100vw - 32px);
    }
}

/* G2分のモーション低減対応（JS側でも適用回避するが二重の保険） */
@media (prefers-reduced-motion: reduce) {
    .case-rich-gallery figure img.case-rich-fade-in,
    .case-rich-single-image img.case-rich-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .case-rich-next-suggest { transition: none; }
}

/* ============================================================
   ============================================================
   G3 機能追加（ヒーロー系 / 2026-05-27）
   S-3 パララックス（ラッパー） / B-8 シネマグラフ風 光の明滅
   ・既存 .case-hero（flex・額装ベージュ）と Ken Burns を破壊しない。
   ・case-rich.css 追記のみ。!important 不使用。プレフィックス維持。
   ============================================================
   ============================================================ */

/* B-8 の ::after 基準点。既存 .case-hero に position 指定が無いため追加（競合なし）。 */
.case-hero {
    position: relative;
}

/* === S-3: パララックス（JSが --case-rich-parallax-y を更新） ===
   既存は img が .case-hero の flex 子。JSが下記ラッパーで img を内包する。
   width:100% で従来の全幅レイアウト（.case-hero img の width:100% / max-height:70vh /
   object-fit:contain）を維持する（ラッパー化による収縮を防ぐ）。
   Ken Burns は子の .case-rich-hero-img 側で継続（親=パララックス／子=スケールの2層）。 */
.case-rich-hero-parallax-wrapper {
    width: 100%;
    transform: translate3d(0, var(--case-rich-parallax-y, 0px), 0);
    will-change: transform;
}

/* === B-8: シネマグラフ風（光の明滅オーバーレイ） === */
.case-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        ellipse at 30% 70%,
        rgba(255, 200, 100, 0.18),
        transparent 70%
    );
    mix-blend-mode: soft-light; /* 夜/昼カットとも自然な“光”の重なり（選定理由は報告参照） */
    pointer-events: none;       /* クリックは画像へ透過 */
    opacity: 0.4;
    z-index: 2;                 /* 画像の上 */
    animation: caseRichLightFlicker 6s ease-in-out infinite alternate;
}

@keyframes caseRichLightFlicker {
    0%   { opacity: 0.4; }
    50%  { opacity: 0.9; }
    100% { opacity: 0.4; }
}

/* G3 モーション低減対応 */
@media (prefers-reduced-motion: reduce) {
    .case-rich-hero-parallax-wrapper { transform: none; }
    .case-hero::after { animation: none; opacity: 0.5; }
}

/* ============================================================
   ============================================================
   G4 機能追加（マークアップ駆動UI / 2026-05-27）
   S-1 昼夜スライダー / S-2 ホットスポット注釈
   ・case-rich.css 追記のみ。!important 不使用。.case-rich- プレフィックス維持。
   ・本文内の生成imgは style.css の .section-content img(margin:40px等/詳細度0,2,1)を
     同詳細度＋後読み込みで打ち消す（座標ズレ・全幅崩れ防止）。
   ============================================================
   ============================================================ */

/* === S-1: 昼夜スライダー === */
.case-rich-day-night-slider {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    aspect-ratio: 4 / 3; /* 画像読込後にJSが実比率へ更新 */
    background: #1a1a1a;
    user-select: none;
    -webkit-user-select: none;
}
.case-rich-dns__container {
    position: relative;
    width: 100%;
    height: 100%;
}
/* style.css の .case-detail .section-content img(0,2,1) を同詳細度＋後勝ちで打ち消す */
.case-rich-day-night-slider img.case-rich-dns__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    object-fit: cover;
    display: block;
}
.case-rich-dns__img--day {
    z-index: 1;
}
.case-rich-dns__night-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 左=昼(下層) / 右=夜(この層)。仕様の本文・ラベル位置に合わせ右側に夜を表示 */
    clip-path: inset(0 0 0 var(--dns-clip, 50%));
    z-index: 2;
}
.case-rich-dns__divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: white;
    transform: translateX(-50%);
    z-index: 3;
    cursor: ew-resize;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    touch-action: none; /* ドラッグ中のスクロール抑止（画像本体は通常スクロール可） */
}
.case-rich-dns__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
    cursor: ew-resize;
    touch-action: none;
}
.case-rich-dns__handle:hover,
.case-rich-dns__handle:focus {
    transform: translate(-50%, -50%) scale(1.1);
    outline: 2px solid var(--cr-accent, #f0825a);
    outline-offset: 4px;
}
.case-rich-dns__handle-arrow {
    font-size: 0.75rem;
    color: var(--cr-text, #2c2c2a);
    line-height: 1;
}
.case-rich-dns__label {
    position: absolute;
    top: 16px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 0.85rem;
    border-radius: 4px;
    z-index: 4;
    pointer-events: none;
}
.case-rich-dns__label--day { left: 16px; }
.case-rich-dns__label--night { right: 16px; }

@media (max-width: 768px) {
    .case-rich-day-night-slider { margin: 1.5rem 0; }
    .case-rich-dns__handle { width: 40px; height: 40px; }
}

/* === S-2: ホットスポット注釈 === */
.case-rich-hotspot-image {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 2rem auto;
    /* overflow:visible（吹き出しが画像上に出るため）。角丸は img 側で担保。 */
}
/* style.css の .section-content img(margin:40px等/0,2,1) を同詳細度＋後勝ちで打ち消す */
.case-rich-hotspot-image img.case-rich-hotspot-image__img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    border-radius: 8px;
}
.case-rich-hotspot-image__dot {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cr-accent, #f0825a);
    color: white;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: bold;
    line-height: 1;
    padding: 0;
}
.case-rich-hotspot-image__dot::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: var(--cr-accent, #f0825a);
    opacity: 0.4;
    animation: caseRichHotspotPulse 2s ease-out infinite;
}
@keyframes caseRichHotspotPulse {
    0%   { transform: scale(1); opacity: 0.4; }
    100% { transform: scale(2); opacity: 0; }
}
.case-rich-hotspot-image__dot:hover,
.case-rich-hotspot-image__dot:focus {
    background: #d96a44;
    outline: none;
}
/* a11y: キーボードフォーカスは可視（マウスフォーカスのみ outline:none） */
.case-rich-hotspot-image__dot:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--cr-accent, #f0825a);
}
.case-rich-hotspot-image__dot-icon { pointer-events: none; }

.case-rich-hotspot-image__tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 24px)); /* 既定: ドット上・中央 */
    background: white;
    border: 1px solid var(--cr-border, #b8b6ac);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    max-width: 280px;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.case-rich-hotspot-image__tooltip.is-open {
    opacity: 1;
    pointer-events: auto;
}
.case-rich-hotspot-image__tooltip-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--cr-accent, #f0825a);
    margin-bottom: 4px;
}
.case-rich-hotspot-image__tooltip-desc {
    font-size: 0.85rem;
    color: var(--cr-text, #2c2c2a);
    line-height: 1.5;
}
/* 吹き出しの矢印（既定: 下向き＝ツールチップ下端から下のドットを指す） */
.case-rich-hotspot-image__tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}
/* 位置自動調整: 右端寄り(ドットが右80%以上) → 左へ寄せる */
.case-rich-hotspot-image__tooltip.is-position-right {
    transform: translate(calc(-100% + 16px), calc(-100% - 24px));
}
.case-rich-hotspot-image__tooltip.is-position-right::after {
    left: auto;
    right: 16px;
    transform: none;
}
/* 左端寄り(ドットが左20%以下) → 右へ寄せる */
.case-rich-hotspot-image__tooltip.is-position-left {
    transform: translate(-16px, calc(-100% - 24px));
}
.case-rich-hotspot-image__tooltip.is-position-left::after {
    left: 16px;
    transform: none;
}
/* 上部寄り(ドットが上30%以下) → 下向きに表示（矢印は上向き） */
.case-rich-hotspot-image__tooltip.is-position-bottom {
    transform: translate(-50%, 24px);
}
.case-rich-hotspot-image__tooltip.is-position-bottom.is-position-left {
    transform: translate(-16px, 24px);
}
.case-rich-hotspot-image__tooltip.is-position-bottom.is-position-right {
    transform: translate(calc(-100% + 16px), 24px);
}
.case-rich-hotspot-image__tooltip.is-position-bottom::after {
    top: -8px;
    bottom: auto;
    border-top: none;
    border-bottom: 8px solid white;
}

@media (max-width: 768px) {
    .case-rich-hotspot-image__tooltip {
        min-width: 180px;
        max-width: 240px;
        font-size: 0.8rem;
    }
}

/* G4 モーション低減対応 */
@media (prefers-reduced-motion: reduce) {
    .case-rich-hotspot-image__dot::before { animation: none; }
    .case-rich-dns__handle,
    .case-rich-hotspot-image__tooltip { transition: none; }
}

/* === Q&Aウィジェット 非表示化（2026/05/27） ===
   実装は footer.php / case-rich.js / faq.json に残し、CSSで表示のみ抑制。
   トップレベル要素は .case-rich-qa-launcher（💬ボタン）と .case-rich-qa-panel（パネル本体）の2つ。
   ※ footer.php に .case-rich-qa-widget は存在しないため対象外（実クラスのみ指定）。
   将来復活させる場合は、この1ブロックを削除すればOK。 */
.case-rich-qa-launcher,
.case-rich-qa-panel {
    display: none;
}