@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    box-sizing: border-box;
}

/* ブラウザ標準の余白を完全にリセット（隙間の原因） */
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

main {
    position: relative;
}

.breadcrumbs {
    padding: 20px;
    position: absolute;
}

body {
    /* ヘッダーの高さ分（ミドルバー約100px + ナビ約50px = 合計150px前後）を空ける */
    /* 数値は実際の表示を見て微調整してください */
    padding-top: 146px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
}

.wf-sawarabimincho {
    font-family: Sawarabi mincho
}

.mincho {
    font-family: 游明朝, Yu mincho, YuMincho, ヒラギノ明朝 Pro W3, Hiragino mincho Pro, HGS明朝E, ＭＳＰ明朝, MS PMincho, Times New Roman, Times, Garamond, Georgia, serif
}

.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.wf-hannari {
    font-family: Hannari
}

.f_red {
    color: red;
}

.f_black {
    color: #45403f;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 游明朝, Yu mincho, YuMincho, ヒラギノ明朝 Pro W3, Hiragino mincho Pro, HGS明朝E, ＭＳＰ明朝, MS PMincho, Times New Roman, Times, Garamond, Georgia, serif
}

p {
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

.gothic {
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

.content-text-area {
    max-width: 750px;
    /* 読みやすい幅に制限 */
    line-height: 1.8;
    /* 上品に見せるなら行間は広めが鉄則 */
    text-align: justify;
    text-justify: inter-character;
    /* 文字の間隔で調整する（日本語に必須） */
}

.bold {
    font-weight: bold;
}

/* ==========================================================================
   ページを開いた時にフェードインするアニメション
   ========================================================================== */
/* 1. 最初は完全に透明にしておく */
#fade-wrapper {
    opacity: 0;
    /* アニメーション設定：名前1.5秒 ふわっと 終了状態を維持 */
    animation: pageFadeIn 3.0s ease-out forwards;
    /* 読み込み時のチラつき防止のため、少しだけ待機 */
    animation-delay: 0.1s;
}

/* 2. 透明から不透明へ、下から上へ動く定義 */
@keyframes pageFadeIn {
    0% {
        opacity: 0;
        /*　transform: translateY(20px); /* 20px下からスタート */
    }

    100% {
        opacity: 1;
        /*　transform: translateY(0);    /* 本来の位置へ */
    }
}

/* ==========================================================================
   汎用アニメーション：ただのフェードイン（位置が動かないタイプ）
   ========================================================================== */
.fade-in {
    opacity: 0;
    /* 0.8秒かけて、滑らかに（ease-out）透明度だけを変化させる */
    transition: opacity 0.8s ease-out;
}

/* 画面内に入って「is-visible」クラスがついたら不透明にする */
.fade-in.is-visible {
    opacity: 1;
}

/*************　ヘッダー　　****************/
/* ==========================================================================
   PC Layout (1024px以上) - スリム版
   ========================================================================== */
@media screen and (min-width: 1024px) {
    .re_v2.l-header {
        width: 100%;
        background: #fff;
        position: relative;
        /* サブメニュー（全幅）の基準点 */
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
        position: fixed;
        /* 画面上部に固定 */
        top: 0;
        /* 一番上に配置 */
        left: 0;
        /* 左端に配置 */
        width: 100%;
        /* 横幅いっぱい */
        z-index: 9999;
        /* 他のコンテンツより上に表示 */
        background-color: #fff;
        /* 背景が透けないよう白に設定（必要に応じて調整） */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        /* 追従時に境目が見やすいよう軽い影を追加 */
    }

    /* --- 1段目: 高さを最小限に (全幅) --- */
    .re_v2 .header-top-bar {
        background: #444;
        color: #fff;
        padding: 4px 40px;
        /* 上下余白を4pxに縮小 */
        box-sizing: border-box;
    }

    .re_v2 .header-h1 {
        font-size: 11px;
        margin: 0;
        font-weight: normal;
        line-height: 1.2;
    }

    /* --- 2段目: 余白を詰めて圧迫感を解消 (全幅) --- */
    .re_v2 .header-middle-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 40px;
        /* 上下余白を10pxに縮小 */
        box-sizing: border-box;
    }

    .re_v2 .header-logo img {
        height: auto;
        max-height: 48px;
        /* ロゴを少しスリムに */
        display: block;
    }

    .re_v2 .header-info-group {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .re_v2 .header-btns {
        display: flex;
        gap: 20px;
    }

    .re_v2 .btn-blue {
        background: #4f64b3;
        color: #fff;
        text-decoration: none;
        padding: 8px 26px;
        border-radius: 4px;
        font-size: 16px;
        transition: opacity 0.3s;
        letter-spacing: 1.2px;
    }

    .re_v2 .btn-blue:hover {
        opacity: 0.8;
    }

    .re_v2 .btn-green {
        background: #438b5a;
        color: #fff;
        text-decoration: none;
        padding: 8px 26px;
        border-radius: 4px;
        font-size: 16px;
        transition: opacity 0.3s;
        letter-spacing: 1.2px;
    }

    .re_v2 .btn-green:hover {
        opacity: 0.8;
    }

    /* 電話番号エリアのスリム化 */
    .re_v2 .header-tel a {
        text-decoration: none;
        color: #000;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .re_v2 .tel-number {
        font-size: 28px;
        /* 34pxから28pxへサイズダウン */
        font-weight: bold;
        line-height: 1;
        color: #2c3e50;
    }

    .re_v2 .tel-caption {
        font-size: 10px;
        background: #7a756b;
        color: #fff;
        padding: 4px 20px 3px 20px;
        border-radius: 10px;
        margin-top: 3px;
    }



    /* ==========================================================================
   追加：資料請求・事前相談で5,000円割引 案内パーツ
   ========================================================================== */
    /* パーツ全体の横並びと配置 */
    .re_v2 .header-discount-notice {
        display: flex;
        align-items: center;
        gap: 10px;
        /* アイコンと文字の間の隙間 */
        background-color: #ffffff;
        /* 背景色（白） */
        padding: 2px 20px 2px 10px;
        border-radius: 6px;
        margin-left: auto;
    }

    /* 女性スタッフアイコン */
    .re_v2 .notice-icon img {
        display: block;
        border-radius: 50%;
        /* 丸型にくり抜く */
        width: 50px;
        height: 50px;
        object-fit: cover;
    }

    /* 案内テキスト全体 */
    .re_v2 .notice-text {
        font-size: 16px;
        line-height: 1.4;
        color: #333333;
        font-weight: bold;
    }

    /* 下段のテキスト */
    .re_v2 .notice-highlight {
        font-size: 16px;
        color: #333333;
    }

    /* 「5,000」の数字部分だけを大きく・赤く強調 */
    .re_v2 .notice-text .price {
        color: #e63946;
        /* 緊急ボタンと同じ目を引く赤色 */
        font-size: 20px;
        /* 文字を大きく */
        font-weight: 900;
        /* 文字を太く */

        margin: 0 2px;
        /* 数字の左右にわずかな隙間 */
    }

    .header_bold {
        font-weight: bold;
        font-size: 1.2rem;
        padding: 0 2px;
        color: #e8e956;
    }






    /* --- 3段目: 背景全幅 / メニュー中身1024px --- */
    .re_v2 .header-nav {
        border-top: 1px solid #e0e0e0;
        background: #fff;
        width: 100%;
    }

    .re_v2 .nav-fixed-width {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        min-height: 50px;
        /* 高さを50pxに設定 */
    }

    .re_v2 .nav-list {
        display: flex;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
        flex-grow: 1;
    }

    .re_v2 .nav-list>li {
        flex: 1;
        position: static;
        /* サブメニュー全幅のため */
        display: flex;
        align-items: center;
    }

    .re_v2 .nav-list>li>a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 5px;
        color: #333;
        text-decoration: none;
        font-weight: bold;
        font-size: 14px;
        transition: background 0.3s;
    }

    .re_v2 .nav-list>li:hover>a {
        background: #f9f9f9;
    }

    /* --- サブメニュー: 画面横いっぱいに広がる全幅仕様 --- */
    .re_v2 .nav-list .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #f8f7f5;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        justify-content: center;
        /* タイルを中央寄せ */
        flex-wrap: wrap;
        padding: 25px 20px;
        list-style: none;
        margin: 0;
        box-sizing: border-box;

        /* ふわっと表示のアニメーション */
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        pointer-events: none;
    }

    .re_v2 .nav-list li:hover>.sub-menu {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* サブメニュー内のタイル (300px幅のボックス並び) */
    .re_v2 .nav-list .sub-menu li {
        width: 300px;
        margin: 6px;
    }

    .re_v2 .nav-list .sub-menu li a {
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border: 1px solid #eee;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        text-decoration: none;
        transition: all 0.3s;
    }

    .re_v2 .nav-list .sub-menu li a:hover {
        border-color: #2b3694;
        color: #2b3694;
    }

    .re_v2 .nav-list .sub-menu li a::after {
        content: '\f061';
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 12px;
        color: #ccc;
    }

    /* お急ぎの方ボタン */
    .re_v2 .btn-emergency {
        background: #c3413b;
        color: #fff;
        padding: 0 50px;
        font-weight: bold;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        text-decoration: none;
    }
}

/* ==========================================================================
   Mobile Layout (767px以下)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .re_v2 .header-middle-bar {
        flex-direction: column;
        padding: 12px 10px;
        gap: 10px;
    }

    .re_v2 .header-info-group {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .re_v2 .header-btns {
        width: 100%;
        display: flex;
        gap: 5px;
    }

    .re_v2 .btn-blue {
        flex: 1;
        text-align: center;
        padding: 10px 5px;
        font-size: 13px;
    }

    .re_v2 .tel-number {
        font-size: 24px;
    }

    .re_v2 .header-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .re_v2 .nav-fixed-width {
        width: max-content;
        min-width: 100%;
        display: flex;
    }

    .re_v2 .nav-list {
        display: flex;
        margin: 0 !important;
        padding: 0 !important;
    }

    .re_v2 .nav-list>li>a {
        padding: 10px 12px;
        font-size: 13px;
        white-space: nowrap;
        border-right: 1px solid #eee;
    }

    .re_v2 .nav-list .sub-menu {
        display: none;
    }

    .re_v2 .btn-emergency {
        padding: 10px 15px;
        font-size: 14px;
    }
}


/*************　top画像　　****************/
/* ==========================================================================
   Main Visual Section (100vh・画像右下吸着)
   ========================================================================== */
.re_v2.main-visual {
    width: 100%;
    /* ヘッダーの高さ分を正確に引く（110pxは目安。ズレる場合は微調整） */
    height: calc(100vh - 140px);
    background-color: #ede7e2;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.re_v2 .mv-container {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    /* 告知帯以外の高さをすべて埋める */
    display: flex;
    align-items: center;
    /* テキストを垂直中央へ */
    position: relative;
}

/* 左側テキスト */
.re_v2 .mv-content {
    position: relative;
    z-index: 20;
    width: 65%;
    /* テキストが窮屈にならないよう少し広げました */
    padding-left: 6%;
}

.re_v2 .mv-sub-copy {
    font-size: 32px;
    /* 理想イメージに合わせてサイズアップ */
    margin-bottom: 40px;
    letter-spacing: 0.15em;
    /* 文字間隔を広げてゆとりを演出 */
    color: #333;
    font-weight: 500;
}

.re_v2 .mv-sub-copy span {
    font-size: 0.8em;
    /* 親の文字サイズ(32px)に対して約70%の大きさに */
    margin: 0 0.1em;
    /* 前後にわずかな隙間を作って読みやすく */
    font-weight: normal;
    /* 助詞を細くすることでさらにメインを際立たせる */
    vertical-align: baseline;
    /* 文字の底辺を合わせる */
}

/* --- 屋号ロゴ画像のサイズ調整 --- */
.re_v2 .mv-logo-text {
    margin-bottom: 60px;
    /* 下のコピーとの間隔をさらに広げました */
}

.re_v2 .mv-logo-text img.logo-mark {
    max-width: 580px;
    /* ロゴをより大きく強調 */
    width: 90%;
    height: auto;
    display: block;
    object-fit: contain;
}

.re_v2 .mv-main-copy {
    font-size: 36px;
    /* サブタイトルより一回り大きく */
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.re_v2 .mv-main-copy span {
    font-size: 0.8em;
    /* 親の文字サイズ(32px)に対して約70%の大きさに */
    margin: 0 0.1em;
    /* 前後にわずかな隙間を作って読みやすく */
    font-weight: normal;
    /* 助詞を細くすることでさらにメインを際立たせる */
    vertical-align: baseline;
    /* 文字の底辺を合わせる */
}

/* 価格表示 */
.re_v2 .mv-price-unit {
    display: flex;
    align-items: baseline;
    font-weight: bold;
    color: #000;
    position: relative;
}

.re_v2 .price-label {
    font-size: 48px;
    /* 「最安」をより目立たせます */
    margin-right: 20px;
    letter-spacing: 0.1em;
    position: relative;
    top: -5px;
}

.re_v2 .price-number {
    font-size: 140px;
    /* 圧倒的な存在感を出すための特大サイズ */
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: #7a0000;
}

.re_v2 .price-tax {
    font-size: 32px;
    margin-left: 10px;
    letter-spacing: 0.05em;
    color: #7a0000;
}

/* 右寄せ・下寄せ画像エリア（背景画像） */
.re_v2 .mv-image-area {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 1;
}

.re_v2 .mv-img {
    max-height: 100%;
    max-width: 80%;
    /* テキストが大きくなった分、重なりを調整 */
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom right;
}

/* 下部告知帯 */
.re_v2 .mv-announcement {
    background: #e7e0d3;
    width: 100%;
    height: 60px;
    /* 計算しやすいように高さを固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.re_v2 .mv-announcement p {
    font-size: 24px;
    margin: 0;
    letter-spacing: 0.1em;
}

/* --- トップ画像セクション専用の単位設定 --- */

/* 2段並びにするための親要素 */
.top-main-price-unit-group {
    display: flex;
    flex-direction: column;
    /* 上下並びにする */
    align-items: flex-start;
    /* 左揃え */
    justify-content: flex-end;
    /* 下（金額のライン）に寄せる */
    margin-left: 6px;
    /* 金額数字との間隔 */
    line-height: 1.1;
    /* 行間を詰める */
    margin-bottom: 0.5rem;
    /* 「円〜」が金額の数字の下端と揃うように調整 */
    position: absolute;
    top: 26px;
    left: 580px;
}

/* 上段：(税抜) */
.top-tax-note {
    font-size: 1.6rem !important;
    /* サイズ調整 */
    font-weight: bold;
    display: block;
    /* 確実に改行させる */
}

/* 下段：円〜 */
.top-price-unit-big {
    font-size: 3rem !important;
    /* サイズ調整 */
    font-weight: bold;
    white-space: nowrap;
    /* 改行させない */
    display: block;
}

/* 金額と単位を横に並べる箱の最終微調整 */
.main-price-box {
    display: flex;
    align-items: flex-end;
    /* 下端を揃える */
    color: #e60012;
    /* 赤色 */
}

/* ==========================================================================
   Mobile Layout (スマホ) 調整
   ========================================================================== */
@media screen and (max-width: 767px) {
    .re_v2 .mv-logo-text img.logo-mark {
        max-width: 280px;
        /* スマホではロゴを小さく */
        width: 90%;
        margin: 0 auto;
    }

    .re_v2 .mv-sub-copy {
        font-size: 16px;
    }

    .re_v2 .mv-main-copy {
        font-size: 16px;
    }

    .re_v2 .price-number {
        font-size: 70px;
    }

    .re_v2 .price-label {
        font-size: 20px;
    }
}

/* ==========================================================================
   Mobile Layout (スマホ)
   ========================================================================== */
@media screen and (max-width: 767px) {
    .re_v2.l-header {
        height: auto;
    }

    .re_v2.main-visual {
        height: auto;
        min-height: 100vh;
    }

    .re_v2 .mv-container {
        flex-direction: column;
        padding: 40px 20px;
    }

    .re_v2 .mv-content {
        width: 100%;
        text-align: center;
        padding-left: 0;
    }

    .re_v2 .price-number {
        font-size: 60px;
    }

    .re_v2 .mv-image-area {
        position: relative;
        width: 100%;
        height: 300px;
        margin-top: 20px;
    }

    .re_v2 .mv-img {
        max-height: 100%;
        margin: 0 auto;
    }

    .re_v2 .mv-announcement p {
        font-size: 18px;
    }
}


/* --- コンセプト画像セクション専用スタイル --- */

#concept-image-section {
    position: relative;
    width: 100%;
    /* 画面の高さに合わせる（ナビゲーションなどの高さを引く場合は調整） */
    height: calc(100vh - 200px);
    /* 背景画像の設定 */
    background-image: url('https://kochi-chokuso.jp/wp-content/uploads/2026/05/Z72_5977_R.png');
    /* 画像のパスを指定してください */
    background-size: cover;
    /* 画像を全画面に広げる */
    background-position: center center;
    /* 画像の中央を表示 */
    background-repeat: no-repeat;
    /* スクロールに追従させないための設定（これがポイント） */
    background-attachment: fixed;
    /* はみ出しを隠す */
    overflow: hidden;
    margin: 0;
    padding: 0;
}



/* 黒いマスク（オーバーレイ）の設定 */
#concept-image-section .cis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 黒色の透過。0.5（50%）を基準に好みの暗さに調整してください */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* コンテンツ全体の折り返し設定 */
#concept-image-section .cis-content-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    /* テキストを上下中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    /* マスクの上に配置 */
}

/* テキストコンテナの設定 */
#concept-image-section .cis-text-container {
    max-width: 800px;
    /* 読みやすい幅に制限 */
    width: 90%;
    text-align: center;
    color: #ffffff;
    /* 文字色は白 */
    padding: 20px;
}

/* 見出し（上品な明朝体） */
#concept-image-section .cis-title {
    font-family: "游明朝", "Yu Mincho", serif;
    /* 品格を出す明朝体 */
    font-size: 2.8rem;
    /* 大きめの見出し */
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 30px;
    letter-spacing: 0.15em;
    /* 文字間を少し広げて上品に */
    display: block;
}

/* 説明文 */
#concept-image-section .cis-description {
    font-family: "游明朝", "Yu Mincho", serif;
    /* 統一感のため明朝体。游ゴシックでも可 */
    font-size: 1.1rem;
    line-height: 2.0;
    /* 行間を広げて「ゆとり」を出す */
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9);
    /* 純白よりわずかに透過させて目に優しく */
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media (max-width: 768px) {
    #concept-image-section .cis-title {
        font-size: 2.0rem;
        /* スマホでは見出しを少し小さく */
        margin-bottom: 20px;
    }

    #concept-image-section .cis-description {
        font-size: 1.0rem;
        /* スマホでは説明文を調整 */
        line-height: 1.8;
    }

    /* iOS（iPhone）では fixed が効かない場合があるため、解除 */
    #concept-image-section {
        background-attachment: scroll;
    }
}







/*************　プラン　　****************/

/* タイトルエリア */
#plan-list-section .section-title-wrapper {
    text-align: center;
    margin: 60px 0 30px;
}

#plan-list-section .section-title-wrapper h2 {
    display: inline-block;
    position: relative;
    font-size: 26px;
    color: var(--text-dark);
    margin: 0;
    padding: 0 60px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

#plan-list-section .section-title-wrapper h2::before,
#plan-list-section .section-title-wrapper h2::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background-color: var(--main-gold);
}

#plan-list-section .section-title-wrapper h2::before {
    left: 0;
}

#plan-list-section .section-title-wrapper h2::after {
    right: 0;
}

#plan-list-section .section-title-wrapper .en-title {
    display: block;
    font-size: 14px;
    color: #b08d57;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

#plan-list-section .section-intro-text {
    text-align: center;
    color: var(--text-gray);
    font-size: 18px;
    margin: 0 auto 40px auto;
    line-height: 1.8;
    padding: 0 15px;
    max-width: 750px;
    font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

#plan-list-section {
    padding: 60px 20px;
    background-color: #fff;
    --main-gold: #d2af7a;
    --gonose-color: #1e3a5f;
    --text-dark: #333333;
    --text-gray: #70757a;
    --bg-panel: #fcfcfc;
    --font-gothic: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.plan_point {
    background-color: #F6F5F4;
    position: relative;
    padding: 40px 40px;
}

/* 親要素：横並びの設定 */
.plan_point_container {
    display: flex;
    justify-content: space-between;
    /* 均等に配置 */
    gap: 20px;
    /* カード同士の隙間 */
    max-width: 1200px;
    /* 全体の最大幅 */
    margin: 40px auto 80px auto;
    /* 上下に余白を作り中央寄せ */
    padding: 0 20px;
}

/* 各カードの設定 */
.plan_point_card {
    flex: 1;
    /* 3つとも同じ幅にする */
    background: #fbfbfb;
    border: 1px solid #e0e0e0;
    /* 薄いグレーの細い枠線 */
    padding: 40px 40px;
    text-align: center;
    transition: transform 0.3s ease;
    /* ホバー時の動き */
    position: relative
}

.plan_point_card::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 18px;
    height: 18px;
    border-top: 1px solid #b59a6d;
    border-left: 1px solid #b59a6d;
}

.plan_point_card::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 18px;
    height: 18px;
    border-bottom: 1px solid #b59a6d;
    border-right: 1px solid #b59a6d;
}

/* アイコン/数字の部分 */
.point_icon {
    font-family: "Bebas Neue", sans-serif;
    /* 以前導入したフォント */
    font-size: 1.5rem;
    color: #c58d2c;
    /* プラン共通のゴールド系 */
    margin-bottom: 10px;
    display: block;
}

/* カードの見出し（明朝体） */
.plan_point_card h3 {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

/* カードの説明文 */
.plan_point_card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    text-align: left;
    /* テキストは左寄せが読みやすい */
    /* font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; */
    font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* ホバーした時に少しだけ浮き上がらせる（上品な演出） */
.plan_point_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

/* スマホ表示の時は縦に並べる */
@media (max-width: 768px) {
    .plan_point_container {
        flex-direction: column;
    }
}







.plan-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
    /* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* 1. カードの基本状態 */
.plan-card {
    flex: 1;
    min-width: 280px;
    max-width: 340px;
    border: 1px solid #ccc;
    background: #fff;
    box-sizing: border-box;
    display: block;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #c9c9c9;
    text-decoration: none;
    color: inherit;

    /* 【重要】マウスを外した時の設定：遅延を 0s に上書きし、0.3s で戻るようにします */
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    transition-delay: 0s !important;
}

/* 2. スクロール前（fade-in-up） */
.plan-card.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
}

/* 3. 表示された瞬間（登場時のみスロー・時間差を有効化） */
.plan-card.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    /* 登場時のみ 0.8s かけて優雅に表示 */
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* 登場時の各カードの遅延設定（is-visibleがついている間だけ有効にする） */
.plan-card:nth-child(1).fade-in-up.is-visible {
    transition-delay: 0s;
}

.plan-card:nth-child(2).fade-in-up.is-visible {
    transition-delay: 0.2s;
}

.plan-card:nth-child(3).fade-in-up.is-visible {
    transition-delay: 0.4s;
}

.plan-card:nth-child(4).fade-in-up.is-visible {
    transition-delay: 0.6s;
}

/* 4. マウスホバー時 */
.plan-container .plan-card.is-visible:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    /* ホバー中も遅延は 0s */
    transition-delay: 0s !important;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.plan-header {
    padding: 12px;
    color: #fff;
    font-weight: 100;
    font-size: 1.25rem;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
}

.plan-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-color: #eee;
    display: block;
    object-fit: cover;
}

.plan-body {
    padding: 20px 10px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.plan-tags {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    gap: 4px;
}

.tag {
    flex: 1;
    border: 1px solid #ddd;
    font-size: 0.7rem;
    padding: 4px 0;
    color: #ccc;
    text-align: center;
}

.tag.active {
    font-weight: bold;
}

.discount-banner {
    border: 1px solid #e60012;
    color: #2b2b2b;
    font-size: 0.8rem;
    padding: 8px 5px;
    margin-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

.discount-banner::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 10px solid #e60012;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.discount-banner::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 9px solid #fff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    z-index: 1;
}

.waribiki-price {
    font-size: 1.2rem;
    color: #e60012;
}

.tax-in {
    font-size: 1.2rem;
}

/* 価格セクション：最新のアップ画像に基づき修正 */
.price-section {
    width: 98%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* 左右に均等配置 */
    margin: 0 auto;
}

/* 左側：一般価格セット */
.price-left {
    text-align: left;
}

.price-label-small {
    font-size: 0.7rem;
    color: #666;
    display: block;
    margin-bottom: -1px;
}

.old-price-box {
    position: relative;
    display: inline-block;
}

.old-price {
    font-size: 1.6rem;
    color: #555;
    line-height: 1;
}

.old-price-unit {
    font-size: 0.8rem;
    color: #555;
}

/* 打ち消し線（画像に合わせ太めに） */
.old-price-box::after {
    content: "";
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    height: 2px;
    background-color: #000;
}

/* 中央：矢印 */
.price-arrow {
    font-size: 1.2rem;
    padding-bottom: 5px;
    margin: 0 5px;
}

/* 右側：割引後価格セット */
.price-right {
    text-align: right;
}

.main-price-box {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    color: #e60012;
}

.main-price {
    font-size: 3rem;
    line-height: 0.85;
}

.main-price-unit-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 2px;
    line-height: 1;
}

.tax-note {
    font-size: 0.65rem;

}

.price-unit-big {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 3px;
}

/* 税込価格（右下隅） */
.tax-included-bottom {
    width: 100%;
    text-align: right;
    font-size: 0.75rem;
    color: #333;
    margin-top: 5px;
}

.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
}

/* プラン別カラー */
/* --- プラン別カラー設定 (枠・見出し・タグの色) --- */

/* 火葬式：ゴールド系 */
.plan-fire {
    border-color: #c58d2c;
}

.plan-fire .plan-header {
    background-color: #c58d2c;
}

.plan-fire .tag.active {
    border-color: #c58d2c;
    color: #c58d2c;
}

/* 直葬：紫系 */
.plan-direct {
    border-color: #8e727e;
}

.plan-direct .plan-header {
    background-color: #8e727e;
}

.plan-direct .tag.active {
    border-color: #8e727e;
    color: #8e727e;
}

/* 一日葬：青グレー系 */
.plan-oneday {
    border-color: #7b839b;
}

.plan-oneday .plan-header {
    background-color: #7b839b;
}

.plan-oneday .tag.active {
    border-color: #7b839b;
    color: #7b839b;
}

/* 家族葬：オリーブ系 */
.plan-family {
    border-color: #8b8f52;
}

.plan-family .plan-header {
    background-color: #8b8f52;
}

.plan-family .tag.active {
    border-color: #8b8f52;
    color: #8b8f52;
}

@media (max-width: 640px) {
    .plan-card {
        min-width: 100%;
    }
}


/* --- 上品な明朝体テキストボックス --- */
.elegant-text-box {
    position: relative;
    padding: 30px 40px;
    margin: 40px auto;
    max-width: 900px;
    /* サイトの幅に合わせて調整 */
    background-color: #fff;
    color: #333;
    line-height: 1.8;
    text-align: center;
}

/* 上下の細い二重線 */
.elegant-text-box::before,
.elegant-text-box::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    border-top: 1px solid #c58d2c;
    /* 金色（火葬式プランの色）をアクセントに */
    border-bottom: 1px solid #c58d2c;
}

.elegant-text-box::before {
    top: 0;
}

.elegant-text-box::after {
    bottom: 0;
}

/* 枠内のタイトル */
.elegant-box-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    display: block;
}

/* 枠内の文章 */
.elegant-box-content {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 1.05rem;
    text-align: left;
    /* 文章は左寄せが読みやすいです */
    display: inline-block;
    /* 中央寄せの中に左寄せを配置 */
}






/***************************************************************************
 Google口コミカセット 統合スタイル（スライダー ＆ グリッド 両対応）
 ***************************************************************************/

/* =============================================
   1. 共通変数・基本レイアウト
   ============================================= */
.kuchikomi-review-content {
    --main-gold: #d2af7a;
    --gonose-color: #1e3a5f;
    --text-dark: #333333;
    --text-gray: #70757a;
    --bg-panel: #fcfcfc;
    --font-gothic: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    padding-top: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

/* タイトルエリア */
.kuchikomi-review-content .section-title-wrapper {
    text-align: center;
    margin: 60px 0 30px;
}

.kuchikomi-review-content .section-title-wrapper h2 {
    display: inline-block;
    position: relative;
    font-size: 26px;
    color: var(--text-dark);
    margin: 0;
    padding: 0 60px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.kuchikomi-review-content .section-title-wrapper h2::before,
.kuchikomi-review-content .section-title-wrapper h2::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background-color: var(--main-gold);
}

.kuchikomi-review-content .section-title-wrapper h2::before {
    left: 0;
}

.kuchikomi-review-content .section-title-wrapper h2::after {
    right: 0;
}

.kuchikomi-review-content .section-title-wrapper .en-title {
    display: block;
    font-size: 14px;
    color: #b08d57;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.kuchikomi-review-content .section-intro-text {
    text-align: center;
    color: var(--text-gray);
    font-size: 15px;
    margin-bottom: 40px;
    line-height: 1.8;
    padding: 0 15px;
}

.kuchikomi-review-content .sp-only {
    display: none;
}

/* =============================================
   2. 総合評価パネル
   ============================================= */
.kuchikomi-review-content .rating-summary-panel {
    background-color: var(--bg-panel);
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 40px 20px 20px 20px;
    /* 1施設用に最大幅を500pxに制限 */
    max-width: 500px;
    /* 全デバイスで中央寄せを最優先（!important） */
    margin: 0 auto 50px !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
}

@media (min-width: 940px) {
    .kuchikomi-review-content .rating-summary-panel {
        margin: 0 auto 50px;
        /* PCサイズでは中央寄せ */
    }
}

.kuchikomi-review-content .google-rating-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}

.kuchikomi-review-content .rating-item {
    flex: 1;
    min-width: 250px;
    padding: 0 20px;
}

.kuchikomi-review-content .rating-divider {
    width: 1px;
    height: 80px;
    background-color: #ddd;
    margin: 0 10px;
}

.kuchikomi-review-content .rating-facility-name {
    display: block;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--text-dark);
    font-size: 18px;
    letter-spacing: 0.05em;
}

.kuchikomi-review-content .rating-score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 36px;
    color: var(--text-dark);
    font-weight: bold;
    font-family: 'Times New Roman', serif !important;
}

/* 星評価（共通） */
.kuchikomi-review-content .star-rating {
    display: flex;
    color: #ccc;
    font-size: 24px;
    letter-spacing: -1px;
}

.kuchikomi-review-content .star-rating .star {
    position: relative;
    display: inline-block;
}

.kuchikomi-review-content .star-rating .star.full {
    color: var(--main-gold);
}

.kuchikomi-review-content .star-rating .star.half::before {
    content: "★";
    position: absolute;
    left: 0;
    top: 0;
    width: 51%;
    overflow: hidden;
    color: var(--main-gold);
}

.kuchikomi-review-content .rating-count {
    color: var(--text-gray);
    font-size: 14px;
    font-weight: normal;
    margin-left: 4px;
}

.kuchikomi-review-content .rating-update-note {
    text-align: center;
    margin: 35px 0 0px;
    font-size: 13px;
    color: var(--text-gray);
}

/* =============================================
   3. 口コミカード（グリッド & スライダー共通）
   ============================================= */

/* グリッドレイアウト（一覧ページ用） */
.kuchikomi-review-content .kuchikomi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 10px 40px;
}

/* スライダー用設定（トップページ用） */
.kuchikomi-review-content .kuchikomi-slider-wrapper {
    position: relative;
    padding: 0 60px;
    max-width: 1400px;
    margin: 40px auto 30px;
}

.kuchikomi-review-content .kuchikomi-slider {
    margin: 0 -10px;
}

.kuchikomi-review-content .slick-track {
    display: flex !important;
}

.kuchikomi-review-content .slick-slide {
    height: inherit !important;
    display: flex !important;
}

/* カード本体 */
.kuchikomi-review-content .kuchikomi-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 6px solid var(--facility-color, var(--main-gold));
    border-radius: 4px;
    padding: 24px;
    margin: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    display: flex !important;
    flex-direction: column;
    flex: 1;
    text-align: left;
    cursor: pointer;
    transition: 0.3s ease;
    /* 変数を使わず、サイトの共通設定を直接指定します */
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

/* カード内のテキスト要素にも念のため適用 */
.kuchikomi-review-content .kuchikomi-card * {
    font-family: inherit !important;
}

.kuchikomi-review-content .facility-gonose {
    --facility-color: var(--gonose-color);
}

.kuchikomi-review-content .kuchikomi-facility {
    font-size: 11px;
    color: #fff;
    background: var(--facility-color, var(--text-gray));
    display: inline-block;
    padding: 3px 12px;
    border-radius: 2px;
    margin-bottom: 15px;
    align-self: flex-start;
    font-weight: bold;
}

.kuchikomi-review-content .kuchikomi-name {
    color: var(--text-dark);
    font-weight: bold;
    font-size: 17px;
    margin-bottom: 8px;
}

.kuchikomi-review-content .kuchikomi-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: nowrap;
}

.kuchikomi-review-content .kuchikomi-stars,
.kuchikomi-review-content .kuchikomi-stars .star-rating {
    font-size: 14px;
}

.kuchikomi-review-content .kuchikomi-date {
    color: var(--text-gray);
    font-size: 13px;
    white-space: nowrap;
}

.kuchikomi-review-content .kuchikomi-comment {
    line-height: 1.6;
    color: #444;
    font-size: 14.5px;
    white-space: pre-wrap;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* 5行で省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   4. スライダー矢印・ドット
   ============================================= */
.kuchikomi-review-content .slick-prev,
.kuchikomi-review-content .slick-next {
    width: 40px;
    height: 40px;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}

.kuchikomi-review-content .slick-prev {
    left: -45px;
}

.kuchikomi-review-content .slick-next {
    right: -45px;
}

.kuchikomi-review-content .slick-prev:before,
.kuchikomi-review-content .slick-next:before {
    color: #bbb !important;
    font-size: 40px;
    transition: 0.3s ease;
}

.kuchikomi-review-content .slick-dots {
    bottom: -30px;
}

.kuchikomi-review-content .slick-dots li button:before {
    color: var(--main-gold);
    font-size: 10px;
}

/* =============================================
   5. ポップアップ（モーダル）
   ============================================= */
#kuchikomi-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    padding: 15vh 20px;
    backdrop-filter: blur(3px);
}

#kuchikomi-modal.is-active {
    display: flex;
}

.modal-content-inner {
    background: #fff;
    width: 100%;
    max-width: 600px;
    max-height: 100%;
    padding: 40px;
    border-radius: 4px;
    border-top: 8px solid var(--modal-border-color);
    text-align: left !important;
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* --- 追記：モーダル全体の基本フォント --- */
    font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

/* ポップアップ内：子要素すべてにフォントを強制適用 */
.modal-content-inner *,
#modal-injected-content,
#modal-injected-content * {
    font-family: inherit !important;
}

/* ポップアップ内：全文表示を強制 (既存の記述) */
#modal-injected-content .kuchikomi-comment {
    -webkit-line-clamp: none !important;
    display: block !important;
    overflow: visible !important;
    white-space: pre-wrap !important;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    color: #bbb;
    z-index: 10;
}

body.modal-open {
    overflow: hidden;
}

/* =============================================
   6. ページネーション & 下部ボタン
   ============================================= */
.kuchikomi-pagination {
    text-align: center;
    margin: 40px 0 60px;
}

.kuchikomi-pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text-dark);
}

.kuchikomi-pagination .current {
    background: var(--main-gold);
    color: #fff;
    border-color: var(--main-gold);
}

/* 下部Googleマップリンク */
.kuchikomi-review-content .google-link-section {
    text-align: center;
    margin: 80px 0 60px;
    padding: 0 15px;
}

.kuchikomi-review-content .google-link-title {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-dark);
    margin-bottom: 30px;
}

.kuchikomi-review-content .google-link-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.kuchikomi-review-content .google-link-btn {
    display: inline-block;
    padding: 15px 30px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    min-width: 280px;
    font-family: var(--font-gothic) !important;
}

.kuchikomi-review-content .btn-gonose {
    background-color: var(--gonose-color);
    color: #fff !important;
}

/* =============================================
   7. レスポンシブ調整
   ============================================= */

/* タブレット (1024px以下) */
@media screen and (max-width: 1024px) {
    .kuchikomi-review-content .kuchikomi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ここにあった左右マージンの指定を削除し、
     上の .rating-summary-panel で指定した margin: 0 auto !important を適用させます */
}

/* スマホ (767px以下) */
@media screen and (max-width: 767px) {
    .kuchikomi-review-content .sp-only {
        display: inline;
    }

    /* タイトル */
    .kuchikomi-review-content .section-title-wrapper h2 {
        font-size: 20px;
        padding: 0 45px;
    }

    .kuchikomi-review-content .section-title-wrapper h2::before,
    .kuchikomi-review-content .section-title-wrapper h2::after {
        width: 30px;
    }

    /* グリッドを1列に */
    .kuchikomi-review-content .kuchikomi-grid {
        grid-template-columns: 1fr;
        margin: 0 10px 40px;
    }

    /* 評価パネルのスマホ用微調整 */
    .kuchikomi-review-content .rating-summary-panel {
        padding: 30px 15px 20px 15px;
        margin: 0 auto 50px !important;
        /* 中央寄せを維持 */
        width: 92%;
        /* 画面端に密着しないよう少し幅を持たせる */
    }

    .kuchikomi-review-content .google-rating-container {
        flex-direction: column;
        gap: 0;
    }

    .kuchikomi-review-content .rating-score-row {
        font-size: 32px;
    }

    .kuchikomi-review-content .rating-divider {
        width: 80%;
        height: 1px;
        margin: 20px auto;
        /* スマホ時は上下に余白 */
    }

    /* スライダー調整 */
    .kuchikomi-review-content .kuchikomi-slider-wrapper {
        padding: 0 10px;
    }

    .kuchikomi-review-content .slick-prev,
    .kuchikomi-review-content .slick-next {
        display: none !important;
    }
}

/* カードとボタン共通：ホバー時に色を薄くする */
.kuchikomi-review-content .kuchikomi-card:hover,
.kuchikomi-review-content .google-link-btn:hover {
    opacity: 0.7 !important;
    transition: 0.3s ease;
    cursor: pointer;
}

/* --- お支払い方法セクション専用スタイル --- */
#payment-methods-section {
    background-color: #f9f9f9;
    /* 非常に薄いグレーで区切りを明確に */
    padding: 80px 0;
    width: 100%;
}

#payment-methods-section .pms-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* メインタイトル */
#payment-methods-section .pms-main-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 1.8rem;
    color: #333;
    text-align: left;
    margin-bottom: 50px;
    letter-spacing: 0.05em;
}

/* フレックスボックス設定 */
#payment-methods-section .pms-flex-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

/* 左側テキスト */
#payment-methods-section .pms-left-text {
    flex: 1;
    display: flex;
    align-items: center;
    /* 垂直方向の中央揃え */
    min-height: 180px;
    /* 右側のカードの min-height と合わせるとより正確です */
}

#payment-methods-section .pms-left-text p {
    font-size: 1.1rem;
    line-height: 2.0;
    color: #444;
}

/* 右側カードエリア */
#payment-methods-section .pms-right-cards {
    flex: 2;
    display: flex;
    gap: 20px;
}

/* 各支払いカード */
#payment-methods-section .pms-card {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #eee;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    /* ほんの少し影をつけて上品に */
    text-align: center;
}

.pms-card:nth-child(2).fade-in-up {
    transition-delay: 0.2s !important;
}

.pms-card:nth-child(3).fade-in-up {
    transition-delay: 0.4s !important;
}

#payment-methods-section .pms-card-title {
    font-weight: bold;
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 10px;
}

#payment-methods-section .pms-card-sub {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 15px;
}

/* ロゴ配置場所 */
#payment-methods-section .pms-logo-placeholder {
    width: 100%;
    margin-top: auto;
}

#payment-methods-section .pms-logo-placeholder img {
    max-width: 100%;
    height: auto;
    max-height: 40px;
    /* ロゴの高さが揃うように調整 */
    object-fit: contain;
}

/* --- レスポンシブ（スマホ対応） --- */
@media (max-width: 1024px) {
    #payment-methods-section .pms-flex-box {
        flex-direction: column;
    }

    #payment-methods-section .pms-right-cards {
        width: 100%;
    }
}

@media (max-width: 768px) {
    #payment-methods-section .pms-main-title {
        font-size: 1.6rem;
    }

    #payment-methods-section .pms-right-cards {
        flex-direction: column;
    }

    #payment-methods-section .pms-card {
        min-height: auto;
    }
}

/* --- CVセクション専用スタイル --- */
#cv-footer-section {
    padding: 60px 0 100px;
    /* 下に画像がはみ出すスペースを確保 */
    background-color: #fff;
}

#cv-footer-section .cv-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* ステータス部分 */
#cv-footer-section .cv-status {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
    font-family: "Bebas Neue", sans-serif;
    font-size: 2rem;
}

#cv-footer-section .status-time {
    font-family: "Times New Roman", "Yu Mincho", "MS Mincho", serif;
}

#cv-footer-section .status-badge {
    font-size: 2rem;
    font-family: "Times New Roman", "Yu Mincho", "MS Mincho", serif;
}

/* メインの白い枠線ボックス */
#cv-footer-section .cv-main-box {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    padding: 30px 40px;
    position: relative;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* 電話エリア */
#cv-footer-section .cv-phone-area {
    flex: 1;
    border-right: 1px solid #eee;
    padding-right: 30px;
}

#cv-footer-section .cv-tags {
    display: flex;
    gap: 5px;
    padding-top: 16px;
}

#cv-footer-section .cv-tags span {
    font-size: 0.8rem;
    border: 1px solid #ccc;
    padding: 2px 6px;
    color: #666;
}

#cv-footer-section .cv-phone-number {
    font-size: 3.6rem;
    color: #2c3e50;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Bebas Neue', sans-serif;
}

#cv-footer-section .cv-phone-number .fas,
.fa-solid {
    font-weight: 600;
    font-size: 2.6rem;
}

/* ボタン・リードエリア */
#cv-footer-section .cv-btn-area {
    flex: 1.5;
    padding-left: 60px;
    padding-right: 200px;
    /* 画像と重ならないための余白 */
}

#cv-footer-section .cv-lead {
    font-size: 0.9rem;
    margin-bottom: 15px;
    color: #333;
}

#cv-footer-section .lead-item {
    margin-right: 20px;
}

#cv-footer-section .cv_bold {
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: bold;
}

#cv-footer-section .num,
#cv-footer-section .price {
    font-weight: bold;
    font-size: 1.8rem;
    color: #b08d57;
    /* ゴールドアクセント */
}

#cv-footer-section .cvtime {
    font-size: 2.8rem;
    /* ゴールドアクセント */
    font-family: "Times New Roman", "Yu Mincho", "MS Mincho", serif;
    font-weight: 500;
    /* 太すぎず細すぎないウェイト */
    letter-spacing: 0.05em;
    /* わずかに字間を空けてゆとりを出す */
    color: #b08d57;
    /* ゴールド・真鍮系の色にするとさらに上品です（任意） */
    font-variant-numeric: tabular-nums;
    /* 数字の幅を揃えてガタつきを防止 */
}

#cv-footer-section .cv-buttons {
    display: flex;
    gap: 30px;
}

#cv-footer-section .cv-buttons a {
    flex: 1;
    text-align: center;
    padding: 15px 10px;
    text-decoration: none;
    font-weight: 100;
    font-size: 0.9rem;
    transition: 0.3s;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

#cv-footer-section .cv-buttons a:hover {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

    /* 2. 影の分（2px）だけ右下に移動させる */
    transform: translate(2px, 2px);
}




/* ボタンの色分け（上品なグレー系） */
#cv-footer-section .btn-request {
    background-color: #4f64b3;
    color: #fff;
}

#cv-footer-section .btn-consult {
    background-color: #438b5a;
    color: #fff;
}

#cv-footer-section .cv-buttons a:hover {
    opacity: 0.8;
}

/* 人物画像 */
#cv-footer-section .cv-person {
    position: absolute;
    right: 0;
    bottom: -1px;
    /* ボックスの底に合わせる */
    width: 200px;
    /* サイズ調整 */
    z-index: 10;
}

#cv-footer-section .cv-person img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* レスポンシブ */
@media (max-width: 1024px) {
    #cv-footer-section .cv-main-box {
        flex-direction: column;
        padding-right: 40px;
        text-align: center;
    }

    #cv-footer-section .cv-person {
        position: static;
        margin: 20px auto -100px;
        /* スマホでは下に配置 */
    }

    #cv-footer-section .cv-phone-area {
        border-right: none;
        padding-right: 0;
        margin-bottom: 20px;
    }

    #cv-footer-section .cv-btn-area {
        padding-left: 0;
        padding-right: 0;
    }
}



/* --- 葬儀場一覧セクション（アニメーション進化版） --- */
#hall-list-section {
    position: relative;
    padding: 120px 0;
    width: 100%;
    overflow: hidden;
    background-color: #000;
    --main-gold: #d2af7a;
}

#hall-list-section .hall-section-bg {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    filter: blur(12px) brightness(0.6);
    z-index: 1;
}

#hall-list-section .hall-container {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    z-index: 2;
}

/* タイトル装飾 */
#hall-list-section .hall-title-wrap {
    text-align: center;
    margin-bottom: 70px;
}

#hall-list-section .hall-sub-title {
    display: block;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    font-size: 1rem;
    color: var(--main-gold);
    letter-spacing: 0.15em;
    margin-bottom: 10px;
}

#hall-list-section .hall-main-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 2.2rem;
    color: #fff;
    letter-spacing: 0.2em;
}

/* フレックスラッパー */
#hall-list-section .hall-flex-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    width: 100%;
}

/* カード本体 */
#hall-list-section .hall-card {
    position: relative;
    display: block;
    text-decoration: none;
    width: 100%;
    max-width: 600px;
    background: #ffffff;
    padding: 50px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* SVG枠線の設定 */
.hall-card-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: none;
    pointer-events: none;
    /* クリックを邪魔しない */
}

.hall-card-rect {
    width: 100%;
    height: 100%;

    transition: all 0.8s ease-in-out;
}

/* ホバー時の挙動 */
#hall-list-section .hall-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}



/* 中身のフェード演出 */
#hall-list-section .hall-name,
#hall-list-section .hall-image-box img,
#hall-list-section .hall-info-list {
    transition: opacity 0.5s ease;
}

#hall-list-section .hall-card:hover .hall-name,
#hall-list-section .hall-card:hover .hall-image-box img,
#hall-list-section .hall-card:hover .hall-info-list {
    opacity: 0.6;
}

/* 施設名 */
#hall-list-section .hall-name {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 1.7rem;
    margin-bottom: 40px;
    text-align: center;
    color: #333 !important;
}

/* 追加した説明文のスタイル */
.group-desc {
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #fff;
    max-width: 700px;
    margin: 0 auto;
    /* 中央寄せ */
    padding-top: 40px;

}

/* レイアウト */
#hall-list-section .hall-content-row {
    display: flex;
    align-items: center;
    gap: 35px;
}

#hall-list-section .hall-image-box {
    flex: 0 0 220px;
    overflow: hidden;
}

#hall-list-section .hall-image-box img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

/* 情報リスト */
#hall-list-section .hall-info-list dt {
    float: left;
    clear: left;
    width: 65px;
    border: 1px solid #999;
    font-size: 0.7rem;
    text-align: center;
    padding: 3px 0;
    margin-bottom: 12px;
    color: #333 !important;
}

#hall-list-section .hall-info-list dd {
    margin-left: 85px;
    padding: 4px 0;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: #555 !important;
}

/* スマホ対応 */
@media (max-width: 650px) {
    #hall-list-section .hall-content-row {
        flex-direction: column;
    }

    #hall-list-section .hall-image-box {
        width: 100%;
        max-width: 220px;
    }

    #hall-list-section .hall-info-list dd {
        margin-left: 0;
        text-align: center;
    }

    #hall-list-section .hall-info-list dt {
        float: none;
        margin: 0 auto 8px;
    }
}



/* --- 事前相談セクション --- */
#consultation-section {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

.consult-container {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 100vh;
    /* 全体の最小高さを100vhに */
}

/* 左側画像エリア */
.consult-image-wrap {
    flex: 0 0 50%;
    /* 画面の半分を占有 */
    padding-left: 5%;
    z-index: 2;
}

.consult-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.15);
}

/* 右側コンテンツエリア（背景グレー） */
.consult-content-box {
    flex: 0 0 60%;
    /* 画像と重ねるために少し広めに設定 */
    background-color: #f2f2f2;
    /* 薄いグレー */
    height: calc(100vh - 150px);
    /* 高さを100vhに固定 */
    display: flex;
    align-items: center;
    margin-left: -10%;
    /* 画像に重ねる */
    padding: 0 5% 0 15%;
    /* 重なり分、左パディングを多く取る */
    box-sizing: border-box;
}

.consult-inner {
    max-width: 600px;
}

/* テキスト装飾 */
.consult-sub-title {
    display: block;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    font-size: 1.1rem;
    color: #b08d57;
    margin-bottom: 10px;
    letter-spacing: 0.1rem;
}

.consult-main-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
}

.consult-lead {
    font-size: 0.95rem;
    line-height: 2;
    color: #444;
    margin-bottom: 50px;
}

/* ３つのお約束リスト */
.consult-promises {
    list-style: none;
    padding: 0;
    margin-bottom: 60px;
}

.consult-promises li {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.promise-num {
    font-family: 'Times New Roman', serif;
    font-size: 2.4rem;
    color: #ccc;
    /* 薄い数字 */
    margin-right: 20px;
    line-height: 1;
}

.consult-promises p {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
}

/* ボタンデザイン */
.consult-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 350px;
    height: 60px;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    position: relative;
    transition: all 0.3s ease;
}

.consult-btn:hover {
    background-color: #f9f9f9;
    border-color: #c58d2c;
    /* ホバーでゴールドに */
    transform: translateY(-2px);
}

.btn-arrow {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 1px;
    background-color: #333;
}

.btn-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: rotate(45deg);
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .consult-container {
        flex-direction: column;
    }

    .consult-image-wrap {
        flex: 0 0 auto;
        width: 90%;
        padding: 60px 0 0;
        margin: 0 auto;
    }

    .consult-content-box {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        margin-left: 0;
        padding: 60px 20px;
        margin-top: -100px;
        /* 画像と少し重ねる */
    }

    .consult-main-title {
        font-size: 1.8rem;
    }
}


/* --- お急ぎの方へセクション 完成版 --- */
#emergency-contact-section {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
}

.emergency-container {
    display: flex;
    position: relative;
    /* ヘッダーが80pxの場合の全画面設定 */
    height: calc(100vh - 80px);
    min-height: 650px;
    box-sizing: border-box;
}

/* 左側：テキストエリア（画像より前面に出す） */
.emergency-text-content {
    position: relative;
    flex: 0 0 55%;
    display: flex;
    align-items: center;
    padding-left: 6%;
    z-index: 10;
    /* 画像とグラデーションより上に */
}

.emergency-inner {
    max-width: 700px;
    width: 100%;
}

.emergency-main-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: #333;
    margin-bottom: 25px;
    line-height: 1.4;
}

.emergency-lead {
    font-size: 1.6rem;
    margin-bottom: 5px;
}

.emergency-sub-lead {
    font-size: 3rem;
    color: #c58d2c;
    margin-bottom: 30px;
    font-family: "游明朝", "Yu Mincho", serif;
}

/* ラベル表示 */
.emergency-labels {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.label-item {
    font-size: 0.8rem;
    border: 1px solid #333;
    padding: 5px 15px;
}

/* 電話番号 */
.emergency-tel-wrap {
    margin-bottom: 35px;
}

.emergency-tel {
    font-family: 'Arial Black', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    color: #000;
    text-decoration: none;
    line-height: 1;
    font-weight: 900;
}

/* ボタン：幅を広く、中央の穴を埋める存在感 */
.emergency-btn-wrap {
    width: 100%;
}

.emergency-red-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #c3413b;
    color: #fff !important;
    text-decoration: none;
    width: 100%;
    max-width: 500px;
    padding: 12px 0 18px 0;
    border-radius: 10px;
    position: relative;

    /* 初期位置（左上側） */
    top: 0;
    left: 0;

    /* 1. 右下に向けて「横5px・縦5px」のボカさない立体的な厚み（影）をつける */
    box-shadow: 5px 5px 0 #b32430;

    /* 立体ボタンは0.1秒〜0.15秒の超高速で沈むのが最も心地よい押し感になります */
    transition: all 0.12s ease-out;
    cursor: pointer;
}

/* 2. マウスホバー時（斜め右下にカチッと押し込まれる） */
.emergency-red-btn:hover {
    /* 影の厚みの分「右に5px、下に5px」ボタン自体を物理的に移動させる */
    top: 5px;
    left: 5px;

    /* ボタンが移動すると同時に、右下の影の厚みを完全にゼロ（相殺）にする */
    box-shadow: 0px 0px 0 #b32430;
}

.btn-main-text {
    font-size: 1.3rem;
    font-weight: bold;
}

.btn-sub-text {
    font-size: 0.8rem;
    background: #fff;
    color: #930812;
    padding: 2px 15px;
    border-radius: 20px;
    margin-top: 5px;
}

/* 右側：画像エリア（幅を広げて中央の空白をなくす） */
.emergency-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    /* 画面の65%を占有させることで中央に食い込ませる */
    height: 100%;
    z-index: 1;
}

.emergency-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    /* 人物を右に寄せて中央を空ける */
}

/* 白のグラデーション：画像と左側の白背景を滑らかに繋ぐ */
.emergency-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    /* グラデーションの範囲を広げて中央の空白感をなくす */
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 20%,
            rgba(255, 255, 255, 0) 100%);
    z-index: 2;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .emergency-container {
        flex-direction: column;
        height: auto;
    }

    .emergency-text-content {
        flex: 0 0 auto;
        padding: 60px 20px;
        text-align: center;
    }

    .emergency-labels {
        justify-content: center;
    }

    .emergency-image-wrap {
        position: relative;
        width: 100%;
        height: 400px;
    }

    .emergency-image-overlay {
        width: 100%;
        height: 40%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    }
}




/* Bebas Neueの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* セクション全体 */
#emergency-banner-section {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 70px 4%;
    box-sizing: border-box;
}

#emergency-banner-section .emergency-banner-container {
    width: 100%;
    max-width: 1200px;
}

#emergency-banner-section .emergency-banner-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 2.2rem;
    color: #e63946;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 600;
}

/* メインの枠線ボックス */
#emergency-banner-section .emergency-banner-main {
    display: flex;
    align-items: center;
    border: 1px solid #333;
    background-color: #fff;
    position: relative;
    padding: 20px 0;
    min-height: 150px;
    box-sizing: border-box;
}

/* 左：電話エリア */
#emergency-banner-section .emergency-banner-left {
    flex: 1.1;
    border-right: 1px solid #ccc;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 8px;
}

#emergency-banner-section .emergency-banner-labels {
    display: flex;
    gap: 8px;
    margin-bottom: 5px;
}

#emergency-banner-section .emergency-banner-labels span {
    font-size: 0.75rem;
    border: 1px solid #666;
    padding: 2px 8px;
}

/* 電話番号 (Bebas Neue) */
#emergency-banner-section .emergency-banner-tel {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4.1rem;
    color: #2c3e50;
    text-decoration: none;
    line-height: 1;
    letter-spacing: 0.05em;
}

/* 中央：テキストとボタン */
#emergency-banner-section .emergency-banner-center {
    flex: 1.6;
    padding: 0 40px;
    box-sizing: border-box;
}

#emergency-banner-section .emergency-banner-lead {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 12px;
    text-align: center;
}

/* アクション枠 */
#emergency-banner-section .emergency-banner-action {
    display: flex;
    align-items: center;
    border: 1px solid #e63946;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* 子要素のはみ出しをカット */
    text-decoration: none;
    box-shadow: 2px 2px 2px #851b1b;
}

#emergency-banner-section .emergency-banner-action:hover {
    opacity: 0.7;
    transition: 0.3s;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

    /* 2. 影の分（2px）だけ右下に移動させる */
    transform: translate(2px, 2px);
}

#emergency-banner-section .action-sub-text {
    flex: 1;
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.4;
    padding: 10px;
    color: #333;
}

/* ボタン：矢印が外に出ないよう再設計 */
#emergency-banner-section .emergency-banner-red-btn {
    flex: 1.2;
    background-color: #ff0000;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.15rem;
    padding: 18px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 要素を中央に寄せる */
    box-sizing: border-box;
    position: relative;
    transition: background-color 0.3s;
}

/* ボタンの中の矢印：干渉を防ぐため固有名称に変更 */
#emergency-banner-section .emergency-btn-arrow {
    margin-left: 10px;
    font-size: 1.3rem;
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
    /* 絶対に潰さない */
}

/* 右：画像 */
#emergency-banner-section .emergency-banner-right {
    width: 180px;
    position: relative;
    align-self: stretch;
}

#emergency-banner-section .staff-image {
    position: absolute;
    bottom: -21px;
    right: -50px;
    width: 250px;
    height: auto;
    z-index: 10;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    #emergency-banner-section {
        height: auto;
        padding: 60px 4%;
    }

    #emergency-banner-section .emergency-banner-main {
        flex-direction: column;
        border: none;
    }

    #emergency-banner-section .emergency-banner-left,
    #emergency-banner-section .emergency-banner-center {
        width: 100%;
        border: 1px solid #333;
        margin-bottom: 15px;
        padding: 25px 15px;
    }

    #emergency-banner-section .staff-image {
        display: none;
    }
}

/* セクション全体 */
#director-service-section {
    width: 100%;
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
}

.director-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    /* 上揃えにして画像とテキストの段差を作る */
    justify-content: space-between;
    padding: 0 4%;
}

/* 左側：テキスト群（少し下げる） */
.director-text-content {
    flex: 0 0 50%;
    margin-top: 20%;
    /* 画像より少し下げる */
}

.director-sub-title {
    display: block;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    font-size: 1.1rem;
    color: #b08d57;
    margin-bottom: 20px;
    letter-spacing: 0.1rem;
}

.director-main-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 2.2rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 40px;
}

.director-description {
    font-size: 1.05rem;
    line-height: 2;
    color: #444;
}

/* 右側：画像（右上配置） */
.director-image-wrap {
    flex: 0 0 45%;
}

.director-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.15);
}

/* --- アニメーション設定 --- */

/* 初期状態：透明で少し下に配置 */
.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 表示された時の状態 */
.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 順次浮き上がるためのディレイ（遅延）設定 */
.director-image-wrap.is-visible {
    transition-delay: 0.1s;
}

.director-sub-title.is-visible {
    transition-delay: 0.3s;
}

.director-main-title.is-visible {
    transition-delay: 0.5s;
}

.director-description.is-visible {
    transition-delay: 0.7s;
}

/* レスポンシブ */
@media (max-width: 1024px) {
    .director-container {
        flex-direction: column-reverse;
        align-items: center;
    }

    .director-text-content {
        width: 100%;
        margin-top: 40px;
        text-align: center;
    }

    .director-image-wrap {
        width: 90%;
    }
}

/* --- 事前相談セクション アニメーション設定 --- */

/* 共通の初期状態（まだ見えていない時） */
#consultation-section .fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* JavaScriptで画面内に入った時に付与されるクラス */
#consultation-section .fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 順次浮き上がるための時間差（ディレイ）調整 */
/* 画像 → サブタイトル → メインタイトル → リード文 → リスト → ボタン の順 */
#consultation-section .consult-image-wrap.is-visible {
    transition-delay: 0.1s;
}

#consultation-section .consult-sub-title.is-visible {
    transition-delay: 0.3s;
}

#consultation-section .consult-main-title.is-visible {
    transition-delay: 0.4s;
}

#consultation-section .consult-lead.is-visible {
    transition-delay: 0.5s;
}

/* 3つのお約束リストを1つずつずらして表示 */
#consultation-section .consult-promises li.fade-in-up:nth-child(1).is-visible {
    transition-delay: 0.6s;
}

#consultation-section .consult-promises li.fade-in-up:nth-child(2).is-visible {
    transition-delay: 0.7s;
}

#consultation-section .consult-promises li.fade-in-up:nth-child(3).is-visible {
    transition-delay: 0.8s;
}

#consultation-section .consult-btn-wrap.is-visible {
    transition-delay: 1.0s;
}

#news-column-section {
    width: 100%;
    padding: 100px 0;
    background-color: #f9f9f9;
}

.news-column-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 60px;
    /* お知らせとコラムの間隔 */
    padding: 0 4%;
}

.post-group {
    flex: 1;
}

.group-header {
    margin-bottom: 40px;
}

.group-sub {
    font-size: 0.9rem;
    color: #b08d57;
    display: block;
    margin-bottom: 10px;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    letter-spacing: 0.1rem;
}

.group-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 2.2rem;
    font-weight: 500;
}

/* 投稿リスト */
.post-list {
    border-top: 1px solid #ddd;
    margin-bottom: 30px;
}

.post-item {
    display: flex;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    transition: opacity 0.3s;
}

.post-item:hover {
    background: #575757;
    color: white;
    transition: 0.5s;
}

.post-item:hover {
    opacity: 0.6;
}

.post-date {
    font-size: 0.95rem;
    margin-right: 30px;
    flex-shrink: 0;
    /* 日付が潰れないように */
}

/* 【重要】タイトルはみ出し時の非表示設定 */
.post-title {
    font-size: 1.1rem;
    white-space: nowrap;
    /* 改行禁止 */
    overflow: hidden;
    /* はみ出し非表示 */
    text-overflow: ellipsis;
    /* 末尾を ... にする */
    flex-grow: 1;
}

/* ボタン */
.post-btn-wrap {
    display: flex;
    justify-content: flex-end;
}

.view-more-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    transition: 0.3s;
    background: #fff;

}

.view-more-btn:hover {
    background-color: #f9f9f9;
}

.view-more-btn .arrow {
    margin-left: 15px;
}

/* レスポンシブ：スマホでは1列に */
@media (max-width: 768px) {
    .news-column-container {
        flex-direction: column;
        gap: 80px;
    }

    .group-title {
        font-size: 1.8rem;
    }
}










#footer-seo-section {
    position: relative;
    width: 100%;
    min-height: 450px;
    /* 必要に応じて調整 */
    display: flex;
    align-items: center;
    padding: 80px 0;
    overflow: hidden;
    color: #fff;
    background-color: #000;
    /* 画像読み込み前の予備色 */
}

/* 背景画像とマスクの制御 */
.footer-seo-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.footer-seo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 黒の透過マスク */
.footer-seo-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    /* 数値を上げるとより暗くなります */
    z-index: 2;
}

/* コンテンツエリア */
.footer-seo-container {
    position: relative;
    max-width: 1300px;
    /* 少し広めにとっておきます */
    margin: 0;
    /* 中央寄せ(auto)を解除して左に寄せる */
    padding-left: 8%;
    /* ここで左端からの距離を調整してください（画像に合わせて） */
    padding-right: 4%;
    z-index: 3;
    box-sizing: border-box;
}

/* テキストを左に寄せるためのインナー */
.footer-seo-content-inner {
    max-width: 800px;
    /* 全体幅の中で左寄りに配置 */
    text-align: left;
    margin-right: auto;
    text-align: left;
}

.footer-seo-title {
    font-family: "游明朝", "Yu Mincho", serif;
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 40px;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.footer-seo-text {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    /* テキストはゴシックで読みやすく */
    font-size: 1rem;
    line-height: 2.2;
    text-align: justify;
    /* 両端揃え */
    opacity: 0.9;
}

/* アニメーションのディレイ設定 */
#footer-seo-section .footer-seo-title.is-visible {
    transition-delay: 0.2s;
}

#footer-seo-section .footer-seo-text.is-visible {
    transition-delay: 0.4s;
}

/* レスポンシブ */
@media (max-width: 768px) {
    #footer-seo-section {
        padding: 60px 0;
    }

    .footer-seo-title {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }

    .footer-seo-text {
        font-size: 0.95rem;
        line-height: 2;
    }
}
















#main-footer {
    background-color: #f8f9fa;
    /* 薄いグレー背景 */
    padding: 80px 0 20px;
    color: #333;
    font-size: 0.95rem;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 0.95rem;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    padding: 0 4%;
    gap: 40px;
}

/* 左側：ロゴ・情報 (1/3) */
.footer-info-side {
    flex: 1;
    /* 3分の1 */
}

.footer-logo {
    margin-bottom: 25px;
}

.footer-logo img {
    max-width: 280px;
    height: auto;
}

.company-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.footer-address p {
    line-height: 1.8;
    margin: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 0.95rem;
}

/* 右側：メニュー (2/3) */
.footer-menu-side {
    flex: 2;
    /* 3分の2 */
}

.footer-nav-columns {
    display: flex;
    justify-content: space-between;
}

.footer-nav-block {
    flex: 1;
}

/* 名前の前にハイフンを入れる設定 */
.footer-nav-block ul li a::before {
    content: "-";
    margin-right: 8px;
    color: #333;
}

.footer-menu-title {
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 10px;
}

/* WPデフォルトメニューのスタイル調整 */
.footer-nav-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-block ul li {
    margin-bottom: 12px;
}

.footer-nav-block ul li a {
    text-decoration: none;
    color: #444;
    transition: 0.3s;
    display: block;
}

.footer-nav-block ul li a:hover {
    color: #000;
    padding-left: 5px;
}

/* コピーライト */
.footer-copy {
    text-align: center;
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 0.8rem;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }

    .footer-nav-columns {
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-nav-block {
        flex: 0 0 45%;
    }
}



/* TOPに戻るボタンの基本スタイル */
.page-top-btn {
    position: fixed;
    right: 30px;
    /* 右端からの余白 */
    bottom: 30px;
    /* 下端からの余白 */
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    /* 透過した黒 */
    color: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    /* 少し角丸 */
    z-index: 9999;

    /* 初期状態は非表示（JSで制御） */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s, background-color 0.3s;
}

/* ホバー時に透過を少し濃くする */
.page-top-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 1 !important;
}

/* 矢印（CSSで作成） */
.arrow-up {
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(-45deg);
    margin-bottom: 5px;
    margin-top: 5px;
}

/* TOPの文字 */
.page-top-btn .text {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

/* スクロールして表示された時に付与されるクラス */
.page-top-btn.is-show {
    opacity: 1;
    visibility: visible;
}

/* スムーズスクロールの設定 */
html {
    scroll-behavior: smooth;
}





#customer-voice-section {
    padding: 100px 0;
    background-color: #f2f2f2;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

#customer-voice-section .slick-slide {
    border-left: 15px solid #f2f2f2;
    border-right: 15px solid #f2f2f2;
}

.voice-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 4%;
    position: relative;
}

.satisfaction-badge {
    position: absolute;
    top: -20px;
    /* 上からの位置（調整可） */
    right: 80px;
    /* 右端に固定 */
    width: 180px;
    /* バッジのサイズ */
    z-index: 10;
    /* コンテンツより前面に */
    /* ふわふわ浮いているようなアニメーション（任意） */
    animation: floating 3s ease-in-out infinite;
}

.satisfaction-badge img {
    width: 100%;
    height: auto;
    display: block;
}

/* 浮遊感のあるアニメーション設定 */
@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1px);
    }

    100% {
        transform: translateY(0);
    }
}

/* --- レスポンシブ対応（スマホ時） --- */
@media (max-width: 768px) {
    .satisfaction-badge {
        width: 120px;
        /* スマホでは少し小さく */
        top: -40px;
        /* タイトルに被らないよう調整 */
        right: 10px;
    }

    .voice-header {
        padding-top: 40px;
        /* バッジのための余白を確保 */
    }
}

/* 見出しエリアのスタイリング */
.voice-header {
    text-align: left;
    /* 画像に合わせて左寄せ */
    margin-bottom: 50px;
    padding: 0 30px;
}

/* 英語のサブタイトル（少し小さく、太字） */
.voice-sub-title {
    display: block;
    font-size: 1rem;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    color: #333;
    margin-bottom: 5px;
    color: #b08d57;
    letter-spacing: 0.1rem;
}

/* メインの見出し（游明朝で上品に） */
.voice-main-title {
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 2rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 25px;
    line-height: 1.3;
}

/* 説明文（少し細身の明朝体で読みやすく） */
.voice-lead-text {
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    letter-spacing: 0.02em;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .voice-header {
        text-align: center;
        /* スマホでは中央寄せが収まりが良い場合があります */
    }

    .voice-main-title {
        font-size: 1.5rem;
    }

    .voice-lead-text {
        font-size: 0.95rem;
        text-align: left;
        /* 文章が長い場合は左寄せを維持 */
    }
}

/* slickスライド間の隙間調整 */
.voice-item {
    padding: 10px;
    text-decoration: none;
    color: #2f2929;
}

.voice-card {
    border: 1px solid #ccc;
    background: #fff;
    height: 100%;
}

.voice-img img {
    width: 100%;
    height: auto;
    display: block;
}

.voice-content {
    padding: 20px;
}

/* ユーザー情報 */
.voice-user-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}

.user-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.user-tags {
    display: flex;
    gap: 5px;
}

.user-tags .tag {
    font-size: 0.7rem;
    border: 1px solid #333;
    padding: 2px 8px;
    border-radius: 2px;
    flex: none;
    color: #b08d57;
    font-weight: bold;
}

.user-icon img {
    width: 54px;
    height: auto;
}

/* 評価ボックス（ピンク背景） */
.voice-rating-box {
    background-color: #e5e2d4;
    /* デザインに合わせた薄いピンク */
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 20px;
    justify-content: center;

}

.rating-label {
    font-weight: bold;
    font-size: 0.9rem;
    margin-right: 30px;
    position: relative;
    top: 2px;
}

.rating-stars {
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-right: 10px;
}

.rating-number {
    font-size: 1.4rem;
    font-weight: bold;
}

/* コメント */
.voice-comment {
    font-size: 0.95rem;
    line-height: 1.8;
    font-weight: 500;
}

/* slickの矢印カスタマイズ */
.slick-prev:before,
.slick-next:before {
    color: #333;
}

/* --- アニメーション・ホバー演出の修正版 --- */

/* 1. カード自体の基本設定（ホバーに備える） */
#customer-voice-section .voice-card {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease,
        opacity 0.4s ease !important;
    cursor: pointer;
    will-change: transform, opacity;
    /* アニメーションを滑らかにする準備 */
    position: relative;
    z-index: 1;
    box-shadow: 2px 2px 2px #c9c9c9;
}

/* 2. マウスホバー時の挙動を最優先で適用 */
#customer-voice-section .voice-card:hover {
    transform: translateY(-12px) !important;
    /* 強制的に12px浮かす */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    opacity: 0.7 !important;
    /* 以前より少し強めに透過 */
    z-index: 10;
    /* 他のカードより前面に出す */
}

/* 3. スクロールで出現する際の設定（干渉防止のため分離） */
.voice-container.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.voice-container.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 重要：slickの枠内でカードが動けるスペースを確保 */
.voice-slider .slick-list {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: -20px !important;
    /* 上の余白を詰める調整 */
    overflow: visible !important;
    /* 浮き上がった時に切れないようにする */
}



/* ナビゲーションの基本状態 */
.header-nav {
    width: 100%;
    background-color: #fff;
    /* 背景色に合わせて調整 */
    z-index: 1000;
    transition: box-shadow 0.3s;
}

/* スクロールして固定された時のスタイル */
.header-nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* 浮いた感じを出す影 */
    animation: slideInDown 0.4s ease;
    /* ふわっと出すアニメーション */
}

@keyframes slideInDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* 固定した時にコンテンツがガクッと上がらないための余白調整用 */
body.nav-fixed-padding {
    padding-top: 60px;
    /* .header-navの高さに合わせて数値を調整 */
}


/* --- よくある質問セクション全体 --- */
#faq-section {
    padding: 80px 0;
    background-color: #fff;
}

.faq-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダーエリア */
.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.faq-sub {
    display: block;
    font-size: 0.9rem;
    color: #b08d57;
    letter-spacing: 0.1rem;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

.faq-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 5px 0 0 0;
}

/* 一覧を見るボタン */
.faq-link-btn {
    padding: 10px 25px;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.faq-link-btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px transparent;
}

/* --- 質問リスト構造 --- */
.faq-list {
    border-top: 1px solid #eee;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

/* --- QとAのアイコン（黒丸白字で統一） --- */
.faq-q-icon,
.faq-a-icon {
    width: 30px;
    height: 30px;
    background: #b08d57;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
    /* アイコンが潰れないように固定 */
}

/* --- 質問エリア (Q) --- */
.faq-question {
    display: flex;
    align-items: center;
    /* アイコンとテキストを縦中央に */
    padding: 25px 15px;
    cursor: pointer;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.faq-question:hover {
    background: #cec28f;
    transition: 0.4S;
    color: white;
}

.faq-question h3 {
    font-size: 1.1rem;
    margin: 0 0 0 15px;
    /* アイコンとの間隔 */
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
}

/* --- 開閉アローアイコン（強制的に右端へ） --- */
.faq-toggle-icon {
    width: 12px;
    height: 12px;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    transform: rotate(45deg);
    transition: transform 0.3s ease;

    /* 重要：これで前の要素との間を最大まで広げ、右端に固定します */
    margin-left: auto;

    flex-shrink: 0;
}

.faq-question:hover .faq-toggle-icon {
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
}

.faq-question.is-active .faq-toggle-icon {
    transform: rotate(-135deg);
}

/* --- 回答エリア (A) --- */
.faq-answer {
    display: none;
    background: #f9f9f9;
}

.faq-answer-inner {
    display: flex;
    align-items: flex-start;
    padding: 25px 15px;
    /* 質問側の「Qアイコン」の位置と合わせる */
    line-height: 1.8;
    color: #444;
}

.faq-a-text {
    flex: 1;
    margin-left: 15px;
    /* Qのh3のmarginと同じ値にすることで縦ラインを揃える */
    padding-top: 2px;
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 1.1rem;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .faq-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .faq-title {
        font-size: 1.5rem;
    }

    .faq-question,
    .faq-answer-inner {
        padding: 20px 10px;
    }

    .faq-question h3,
    .faq-a-text {
        margin-left: 10px;
        font-size: 1rem;
    }
}





/* =================================================
   オプション・追加料金セクション (最終版)
================================================= */

/* セクション全体：背景は白 */
#option-extra-section {
    width: 100%;
    padding: 100px 0;
    background-color: #ffffff;
    position: relative;
    /* 背景配置の基準 */
    overflow: hidden;
}

/* グレーの背景ブロックを擬似要素で作る */
#option-extra-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #f9f9f9;
    /* グレーの色 */

    /* clip-path で形を作る 
       (0 30%) = 左側は上から30%の位置からスタート
       (100% 0) = 右側は一番上（0%）の位置
       これで「途中から始まる斜め」になります。
    */
    clip-path: polygon(0 50%, 100% 20%, 100% 100%, 0 100%);
    z-index: 1;
    /* コンテンツの下に配置 */
}

/* コンテンツを背景より上に表示させる */
.option-extra-container {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

/* 共通テキストスタイル */
.option-extra-container .sub-title {
    display: block;
    font-size: 1.1rem;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    margin-bottom: 5px;
    color: #b08d57;
    letter-spacing: 0.1rem;
}

.option-extra-container .main-title {
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: #000;
}

.option-extra-container .lead-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
}

/* --- 1. オプション商品エリア --- */
.option-group {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 140px;
}

.option-text {
    flex: 0 0 42%;
}

.option-items {
    flex: 0 0 55%;
    display: flex;
    justify-content: flex-end;
    gap: 40px;
}

.option-item {
    text-align: center;
}

.option-item {
    text-align: center;
}

.option-item:nth-child(2).fade-in-up {
    transition-delay: 0.2s !important;
}

.option-item:nth-child(3).fade-in-up {
    transition-delay: 0.4s !important;
}

.option-img-box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
    background: #e0e0e0;
    /* 画像読み込み前の仮色 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.option-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.option-item:hover img {
    transform: scale(1.05);
}

.option-item p {
    font-weight: bold;
    font-size: 1.1rem;
    font-family: "Yu Gothic Medium", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* --- 2. 追加料金エリア --- */
.extra-charge-group {
    width: 100%;
}

.extra-charge-content {
    display: flex;
    align-items: center;
    gap: 80px;
}

/* 画像背後の白い装飾（filter: drop-shadowを使用） */
.extra-charge-image {
    flex: 0 0 50%;

}

.extra-charge-image img {
    width: 100%;
    display: block;
    border-radius: 2px;
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.15);
}

.extra-charge-text {
    flex: 1;
}

/* ボタンエリア：右寄せ */
.extra-charge-text .btn-area {
    margin-top: 50px;
    text-align: right;
}

/* --- 沈み込みボタン共通スタイル --- */
.btn-more-info {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 280px;
    padding: 18px 30px;
    background: #ffffff;
    color: #333;
    text-decoration: none;
    border: 1px solid #dddddd;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.15);
    /* 初期の影 */
    position: relative;
    top: 0;
    left: 0;
}

.btn-more-info .btn-arrow {
    font-size: 1.2rem;
    margin-left: 15px;
    transition: transform 0.2s ease;
}

/* ホバー時：右下に2px沈む */
.btn-more-info:hover {
    box-shadow: 0px 0px 0px transparent;
    transform: translate(2px, 2px);
}

.btn-more-info:hover .btn-arrow {
    transform: translateX(5px);
    /* 矢印だけ少し右に動かす演出 */
}

/* --- レスポンシブ対応 --- */
@media (max-width: 1024px) {
    #option-extra-section {
        padding: 60px 0;
        /* スマホでは斜め背景を解除するか、角度を緩める */
        background: #f5f5f5;
    }

    .option-group,
    .extra-charge-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .option-text,
    .option-items,
    .extra-charge-image,
    .extra-charge-text {
        flex: 0 0 100%;
        width: 100%;
    }

    .option-items {
        margin-top: 40px;
        justify-content: center;
        gap: 20px;
    }

    .option-img-box {
        width: 140px;
        height: 140px;
    }

    .extra-charge-image {
        filter: drop-shadow(10px 10px 0px #ffffff);
        margin-bottom: 40px;
    }

    .extra-charge-text .btn-area {
        text-align: center;
    }

    .pc-only {
        display: none;
    }

    .main-title {
        font-size: 1.75rem;
    }
}





/* --- インラインナビ全体 --- */
#inline-nav-section {
    padding: 100px 0;
    background-color: #fdfdfd;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

#inline-nav-section .sub-title {
    font-size: 0.9rem;
    color: #b08d57;
    letter-spacing: 0.1rem;
}

#inline-nav-section .nav-header {
    padding-bottom: 30px;
}

.inline-mega-menu {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: flex-start;
    /* 高さが違っても上に揃える */
}

/* 各メニューグループ */
.menu-group {
    flex: 1;
    background: #fff;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.menu-group:nth-child(2).fade-in-up.is-visible {
    transition-delay: 0.2s;
}

.menu-group:nth-child(3).fade-in-up.is-visible {
    transition-delay: 0.4s;
}

.menu-label {
    padding: 22px 25px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default;
    font-size: 1.05rem;
    font-family: "Yu Gothic", "游ゴシック", sans-serif;
}

.menu-plus {
    font-size: 1.4rem;
    font-weight: 300;
    transition: transform 0.3s ease;
    color: #999;
}

/* WPが書き出すリスト部分 */
.menu-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-dropdown ul {
    list-style: none;
    padding: 0 25px 20px 25px;
    margin: 0;
}

.menu-dropdown ul li a {
    display: block;
    padding: 12px 0;
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid #f9f9f9;
    transition: all 0.2s;
}

.menu-dropdown ul li a:hover {
    color: #b08d57;
    /* サイトのメインカラー等に合わせて変更 */
    padding-left: 8px;
}

/* --- ホバーアクション --- */
.menu-group:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    border-color: #ccc;
}

.menu-group:hover .menu-dropdown {
    max-height: 500px;
    /* メニューの長さに合わせて調整 */
}

.menu-group:hover .menu-plus {
    transform: rotate(45deg);
    color: #333;
}

/* レスポンシブ */
@media (max-width: 991px) {
    .inline-mega-menu {
        flex-direction: column;
    }

    .menu-group {
        width: 100%;
    }
}




#customer-voice-section1 {
    padding: 100px 0;
    background-color: #f2f2f2;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}



.voice-container1 {
    margin: 0 auto;
    position: relative;
}

.satisfaction-badge1 {
    position: absolute;
    top: -20px;
    /* 上からの位置（調整可） */
    right: 14%;
    /* 右端に固定 */
    width: 180px;
    /* バッジのサイズ */
    z-index: 10;
    /* コンテンツより前面に */
    /* ふわふわ浮いているようなアニメーション（任意） */
    animation: floating 3s ease-in-out infinite;
}

.satisfaction-badge1 img {
    width: 100%;
    height: auto;
    display: block;
}

/* 浮遊感のあるアニメーション設定 */
@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1px);
    }

    100% {
        transform: translateY(0);
    }
}

/* --- レスポンシブ対応（スマホ時） --- */
@media (max-width: 768px) {
    .satisfaction-badge1 {
        width: 120px;
        /* スマホでは少し小さく */
        top: -40px;
        /* タイトルに被らないよう調整 */
        right: 10px;
    }

    .voice-header1 {
        padding-top: 40px;
        /* バッジのための余白を確保 */
    }
}

/* 見出しエリアのスタイリング */
.voice-header1 {
    text-align: left;
    /* 画像に合わせて左寄せ */
    max-width: 1400px;
    margin: 0 auto 50px auto;
    padding: 0 4%;
    position: relative;
}

/* 英語のサブタイトル（少し小さく、太字） */
.voice-sub-title1 {
    display: block;
    font-size: 1rem;
    font-family: "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    color: #333;
    margin-bottom: 5px;
    color: #b08d57;
    letter-spacing: 0.1rem;
}

/* メインの見出し（游明朝で上品に） */
.voice-main-title1 {
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 2rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 25px;
    line-height: 1.3;
}

/* 説明文（少し細身の明朝体で読みやすく） */
.voice-lead-text1 {
    font-family: "Yu Mincho", "游明朝", serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    letter-spacing: 0.02em;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .voice-header1 {
        text-align: center;
        /* スマホでは中央寄せが収まりが良い場合があります */
    }

    .voice-main-title1 {
        font-size: 1.5rem;
    }

    .voice-lead-text1 {
        font-size: 0.95rem;
        text-align: left;
        /* 文章が長い場合は左寄せを維持 */
    }
}

/* slickスライド間の隙間調整 */
.voice-item1 {
    margin: 20px;
    text-decoration: none;
    color: #2f2929;
    display: flex;
    align-items: stretch;
}

.voice-card1 {
    border: 1px solid #ccc;
    background: #fff;
    height: 100%;
    overflow: hidden;

}

.voice-img1 img {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

.voice-content1 {
    padding: 20px;
}

/* ユーザー情報 */
.voice-user-info1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 15px;
}

.user-name1 {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.user-tags1 {
    display: flex;
    gap: 5px;
}

.user-tags1 .tag1 {
    font-size: 0.7rem;
    border: 1px solid #333;
    padding: 2px 8px;
    border-radius: 2px;
    flex: none;
    color: #b08d57;
    font-weight: bold;
}

.user-icon1 img {
    width: 54px;
    height: 57px;
}

/* 評価ボックス（ピンク背景） */
.voice-rating-box1 {
    background-color: #e5e2d4;
    /* デザインに合わせた薄いピンク */
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 20px;
    justify-content: center;

}

.rating-label1 {
    font-weight: bold;
    font-size: 0.9rem;
    margin-right: 30px;
    position: relative;
    top: 2px;
}

.rating-stars1 {
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-right: 10px;
}

.rating-number1 {
    font-size: 1.4rem;
    font-weight: bold;
}

/* コメント */
.voice-comment1 {
    font-size: 0.95rem;
    line-height: 1.8;
    font-weight: 500;
}

/* slickの矢印カスタマイズ */
.slick-prev:before,
.slick-next:before {
    color: #333;
}

/* --- アニメーション・ホバー演出の修正版 --- */

/* 1. カード自体の基本設定（ホバーに備える） */
#customer-voice-section1 .voice-card1 {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease,
        opacity 0.4s ease !important;
    cursor: pointer;
    will-change: transform, opacity;
    /* アニメーションを滑らかにする準備 */
    position: relative;
    z-index: 1;
    box-shadow: 2px 2px 2px #c9c9c9;
}

/* 2. マウスホバー時の挙動を最優先で適用 */
#customer-voice-section1 .voice-card1:hover {
    transform: translateY(-12px) !important;
    /* 強制的に12px浮かす */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important;
    opacity: 0.7 !important;
    /* 以前より少し強めに透過 */
    z-index: 10;
    /* 他のカードより前面に出す */
}

/* 3. スクロールで出現する際の設定（干渉防止のため分離） */
.voice-container1.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.voice-container1.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}




/* ==========================================================================
   1. フォーム全体のデザイン基盤
   ========================================================================== */
.sf-form-container {
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* ==========================================================================
   2. タイトル＆ステップナビゲーション（上部ヘッダーエリア）
   ========================================================================== */
.sf-form-title-box {
    background-color: #b08d57;
    /* ゴールド・ベージュ系のテーマカラー */
    padding: 35px 20px;
    text-align: center;
}

.sf-form-title {
    margin: 0 0 25px 0;
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.sf-step-wrapper {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.sf-step-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    position: relative;
}

/* ステップ同士を繋ぐ中央の横線 */
.sf-step-list::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.sf-step-item {
    flex: 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ステップの丸数字 */
.sf-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #cdaf7e;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: bold;
    margin-bottom: 8px;
    border: 2px solid #b08d57;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* ステップのテキスト */
.sf-step-txt {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* --- 【現在位置：アクティブ状態】のハイライト演出 --- */
.sf-step-item.is-active .sf-step-num {
    background: #fff;
    color: #b08d57;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
}

.sf-step-item.is-active .sf-step-txt {
    color: #fff;
    font-weight: bold;
}

/* ==========================================================================
   3. 入力エリア・項目レイアウト（2カラム設定）
   ========================================================================== */
.sf-form-fields {
    padding: 40px;
}

.sf-form-row {
    display: flex;
    padding: 25px 0;
    border-bottom: 1px dashed #e5e5e5;
    align-items: center;
}

.sf-form-row.border-none {
    border-bottom: none;
}

.sf-form-label {
    flex: 0 0 300px;
    padding-right: 20px;
    box-sizing: border-box;
}

.sf-form-label strong {
    font-size: 1.05rem;
    color: #333;
    line-height: 1.5;
}

/* 必須・任意バッジ */
.sf-required {
    display: inline-block;
    background: #e63946;
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
    vertical-align: middle;
}

.sf-optional {
    display: inline-block;
    background: #999999;
    color: #fff;
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
    vertical-align: middle;
}

.sf-form-input {
    flex: 1;
}

/* ==========================================================================
   4. 各種入力パーツの装飾
   ========================================================================== */
.sf-form-input input[type="text"],
.sf-form-input input[type="email"],
.sf-form-input input[type="tel"],
.sf-form-input select,
.sf-form-input textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    color: #333;
    box-sizing: border-box;
    background-color: #fafafa;
    transition: all 0.2s ease;
}

.sf-form-input input:focus,
.sf-form-input select:focus,
.sf-form-input textarea:focus {
    border-color: #b08d57;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
    outline: none;
}

/* 個別の横幅制限 */
.sf-form-input .form_name,
.sf-form-input .form_furi {
    max-width: 350px;
}

.sf-form-input .form_ken {
    max-width: 200px;
}

.sf-form-input .form_yubin {
    max-width: 180px;
}

.sf-form-input select {
    max-width: 250px;
    cursor: pointer;
}

.sf-zip-input {
    display: flex;
    align-items: center;
}

.sf-zip-mark {
    margin-right: 8px;
    font-weight: bold;
    color: #555;
    display: inline-block;
}

.sf-zip-row .wpcf7-form-control-wrap {
    display: inline-block;
}

/* ==========================================================================
   5. Contact Form 7特有のチェック・ラジオ・エラー文言設定
   ========================================================================== */
.sf-form-input span.wpcf7-list-item {
    display: inline-block;
    margin-right: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}

.sf-form-input span.wpcf7-list-item label {
    cursor: pointer;
    font-size: 0.95rem;
    color: #444;
}

.sf-form-input span.wpcf7-list-item input {
    margin-right: 5px;
}

.sf-checkbox-group .wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* リアルタイムバリデーション時のエラー文言スタイル（CF7用） */
.wpcf7-not-valid-tip {
    color: #e63946 !important;
    font-size: 0.85rem !important;
    margin-top: 6px !important;
    display: block !important;
    font-weight: bold !important;
}

/* ==========================================================================
   6. 確認画面（/request-confirm/）ボタン横並び ＆ 完全装飾
   ========================================================================== */
/* ① 親の箱：確実にフレックスボックスで横並びにする */
.sf-custom-btn-container {
    display: flex !important;
    flex-direction: row !important;
    /* 絶対に横一列 */
    justify-content: center !important;
    /* 中央寄せ */
    align-items: center !important;
    /* 上下の縦中心を完璧に揃える */
    gap: 24px !important;
    /* ボタン同士の横の隙間 */
    margin: 50px auto 30px !important;
    /* 上下に程よい余白 */
    width: 100% !important;
    max-width: 550px !important;
    /* ボタンが広がりすぎない制限 */
    clear: both !important;
    float: none !important;
}

/* 子の箱：テーマ側の不要なマージンや回り込みを完全リセット */
.sf-custom-btn-item {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ② 「戻る」ボタン自体のデザイン（左側） */
.sf-custom-btn-item.btn-back input[type="button"] {
    display: inline-block !important;
    background: #f4f4f4 !important;
    /* 目立ちすぎない薄いグレー */
    color: #666 !important;
    /* 文字色 */
    border: 1px solid #ccc !important;
    padding: 16px 50px !important;
    /* 送信ボタンと高さを完璧に合わせる */
    font-size: 1.1rem !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    /* 送信ボタンと同じ丸み */
    cursor: pointer !important;
    transition: background 0.3s, color 0.3s !important;
    width: auto !important;
    box-shadow: none !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 「戻る」ボタンのホバー時 */
.sf-custom-btn-item.btn-back input[type="button"]:hover {
    background: #e5e5e5 !important;
    color: #333 !important;
}

/* ③ 「送信する」ボタン自体のデザイン（右側・元の茶色を復活） */
.sf-custom-btn-item.btn-submit input[type="submit"] {
    display: inline-block !important;
    background: #b08d57 !important;
    /* 元の美しい茶色 */
    color: #fff !important;
    /* 文字は白 */
    border: none !important;
    padding: 16px 50px !important;
    /* 戻るボタンとサイズを統一 */
    font-size: 1.2rem !important;
    /* 文字を少し大きめに際立たせる */
    font-weight: bold !important;
    border-radius: 50px !important;
    /* 綺麗な丸型 */
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(176, 141, 87, 0.3) !important;
    /* 元の影を復活 */
    transition: all 0.3s ease !important;
    width: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 「送信する」ボタンのホバー時 */
.sf-custom-btn-item.btn-submit input[type="submit"]:hover {
    background: #967545 !important;
    /* 濃い茶色に変化 */
    transform: translateY(-2px) !important;
    /* 軽く浮き上がるアニメーション */
    box-shadow: 0 6px 20px rgba(176, 141, 87, 0.4) !important;
}

/* ==========================================================================
   10. 送信完了画面（/req_thanks/）下部メッセージ＆ボタン装飾
   ========================================================================== */
/* メッセージエリア全体の箱（白背景・角丸・影を整える） */
.sf-thanks-message-box {
    text-align: center !important;
    /* 文章をすべて中央寄せ */
    padding: 60px 30px !important;
    /* 上下にしっかり余白を作る */
    background: #fff !important;
    /* 清潔感のある白背景 */
    border-radius: 0 0 8px 8px !important;
    /* 上の茶色いヘッダーに合わせて下側だけ角丸 */

    margin-bottom: 40px !important;
}

/* 「資料請求ありがとうございました。」の大見出しテキスト */
.sf-thanks-lead {
    font-size: 20px !important;
    /* 文字を大きく */
    font-weight: bold !important;
    /* 太字 */
    color: #333 !important;
    /* 濃いグレー */
    margin: 0 0 24px 0 !important;
    /* 下に程よい隙間 */
    letter-spacing: 0.05em !important;
    /* 文字の間隔を少し広げて上品に */
    line-height: 1.4 !important;
}

/* 自動返信に関する説明テキスト */
.sf-thanks-txt {
    font-size: 15px !important;
    /* 読みやすい標準サイズ */
    color: #666 !important;
    /* 少し優しめのグレー */
    line-height: 1.8 !important;
    /* 行間をゆったり広げて読みやすく */
    margin: 0 0 40px 0 !important;
    /* ボタンとの間に広めの余白 */
    display: inline-block !important;
    /* スマホでの改行バランス調整用 */
    text-align: center !important;
}

/* 「トップページへ戻る」ボタンの箱 */
.sf-thanks-btn-wrap {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ボタン自体のデザイン（送信ボタンの茶色と完全に統一） */
a.sf-thanks-back-btn {
    display: inline-block !important;
    background: #b08d57 !important;
    /* フォームと統一した美しい茶色 */
    color: #fff !important;
    /* 文字は白 */
    text-decoration: none !important;
    /* 青い下線を完全に消す */
    padding: 16px 60px !important;
    /* 押しやすいサイズ感 */
    font-size: 1.1rem !important;
    font-weight: bold !important;
    border-radius: 50px !important;
    /* 綺麗な丸型 */
    box-shadow: 0 4px 15px rgba(176, 141, 87, 0.3) !important;
    /* 上品な影 */
    transition: all 0.3s ease !important;
    /* なめらかな変化 */
}

/* ボタンにマウスを乗せたとき（ホバー）の動き */
a.sf-thanks-back-btn:hover {
    background: #967545 !important;
    /* 濃い茶色に変化 */
    transform: translateY(-2px) !important;
    /* 軽く上に浮き上がる */
    box-shadow: 0 6px 20px rgba(176, 141, 87, 0.4) !important;
    color: #fff !important;
}

/* スマホ表示（横幅768px以下）での見栄え微調整 */
@media (max-width: 768px) {
    .sf-thanks-message-box {
        padding: 45px 20px !important;
    }

    .sf-thanks-lead {
        font-size: 20px !important;
    }

    .sf-thanks-txt {
        font-size: 14px !important;
        text-align: left !important;
        /* スマホでは左寄せの方が見やすい */
    }

    a.sf-thanks-back-btn {
        padding: 14px 40px !important;
        font-size: 1rem !important;
        width: 80% !important;
        /* スマホではボタンを少し横長に */
        max-width: 280px;
    }
}

/* ==========================================================================
   11. 事前相談フォーム（/consultation）専用・希望日時横並び調整
   ========================================================================== */
/* 上部のリード文（午後6時以降～） */
.sf-consultation-lead {
    text-align: center;
    padding-bottom: 25px;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #444;
}

/* 希望日時の親要素 */
.sf-consultation-datetime {
    display: block !important;
    width: 100% !important;
}

/* 各ブロック（場所・日・時間）の縦間隔 */
.sf-datetime-item {
    margin-bottom: 24px !important;
    width: 100% !important;
    display: block !important;
}

.sf-datetime-item:last-child {
    margin-bottom: 0 !important;
}

/* 【超強力】ラベルと入力枠を絶対に横並びにするフレックス要素 */
.sf-datetime-row {
    display: flex !important;
    flex-direction: row !important;
    /* 横並び */
    align-items: center !important;
    /* 縦方向を中央揃え */
    justify-content: flex-start !important;
    /* 左寄せ */
    width: 100% !important;
}

/* CF7が自動で生成するかもしれない邪魔なスパンタグの回り込みを解除 */
.sf-datetime-row .wpcf7-form-control-wrap {
    display: inline-block !important;
    width: auto !important;
    flex-grow: 0 !important;
}

/* 「希望場所：」「希望日：」「希望時間：」の文字幅をきれいに統一 */
.sf-datetime-item .sf-sub-label {
    flex-shrink: 0 !important;
    width: 90px !important;
    /* 幅を固定して揃える */
    font-size: 14px !important;
    font-weight: bold !important;
    color: #444 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* 【超強力】カレンダー入力欄自体の横幅をガチガチに制限して横に並べる */
.sf-datetime-item input[type="date"].form_cal {
    width: 220px !important;
    /* 広がりすぎないようサイズを固定 */
    max-width: 220px !important;
    min-width: 220px !important;
    flex-grow: 0 !important;
    /* 自動で広がろうとするのを阻止 */
    display: inline-block !important;
    /* 縦並びのブロック化を解除 */
    margin: 0 !important;
}

/* 【重要】翌日相談の注意書き：横並びから完全に独立させて真下に配置 */
.sf-date-notice {
    display: block !important;
    clear: both !important;
    /* 回り込みの不具合を完全に解除 */
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin: 10px 0 0 0px !important;
    /* 左側にラベル分の余白(90px)を空けて綺麗に配置 */
}

.sf-date-notice a {
    color: #b08d57 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* 下部のドメイン指定に関する注意書き */
.sf-domain-notice {
    color: #c0392b !important;
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    text-align: center;
    margin: 35px auto 10px !important;
    max-width: 600px;
}

/* ==========================================================================
   スマホ表示（横幅768px以下）用のレスポンシブ
   ========================================================================== */
@media (max-width: 768px) {

    /* スマホでは画面幅が狭いため、安全に縦並びに戻します */
    .sf-datetime-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .sf-datetime-item .sf-sub-label {
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    .sf-datetime-item input[type="date"].form_cal {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }

    .sf-date-notice {
        margin: 8px 0 0 0 !important;
    }

    .sf-consultation-lead,
    .sf-domain-notice {
        font-size: 13px !important;
        text-align: left !important;
    }
}

/* ==========================================================================
   12-2. WEB事前登録・完了画面（/relief-discount_thanks）専用装飾
   ========================================================================== */
.sf-thanks-container {
    max-width: 650px;
    margin: 0 auto;
    padding: 20px 0;
}

.sf-thanks-lead {
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 35px;
}

/* 案内ボックス全体 */
.sf-thanks-notice-box {
    background-color: #fdfbf7;
    border: 2px solid #b08d57;
    /* 共通のゴールド茶の太線 */
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden;
}

/* ボックスの見出しリボン */
.sf-notice-box-title {
    background-color: #b08d57;
    color: #fff !important;
    margin: 0 !important;
    padding: 12px 20px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center;
}

/* ボックスの中身 */
.sf-notice-box-body {
    padding: 25px 20px;
    text-align: center;
}

.sf-notice-highlight {
    font-size: 17px;
    line-height: 1.6;
    color: #222;
    margin: 0 0 10px 0;
}

.sf-notice-highlight strong {
    color: #b08d57;
    background: linear-gradient(transparent 60%, #f5ecd8 60%);
    /* マーカー風のアンダーライン */
}

.sf-notice-subtext {
    font-size: 15px;
    color: #444;
    margin: 0 0 25px 0;
}

.sf-notice-subtext strong {
    color: #c0392b;
    /* 5000円引きは赤文字で強調 */
    font-size: 18px;
}

/* メールが届かない場合のリカバリー枠 */
.sf-notice-fallback {
    background-color: #fff;
    border: 1px dashed #dcd1be;
    border-radius: 6px;
    padding: 15px 18px;
    text-align: left;
}

.sf-fallback-title {
    font-size: 16px;
    font-weight: bold;
    color: #444;
    margin: 0 0 6px 0;
}

.sf-fallback-text {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* 下部フッターエリア */
.sf-thanks-footer {
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.sf-footer-text {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 25px;
}

.sf-footer-contact {
    display: block;
    text-align: center;
    background-color: #f9f9f9;
    padding: 40px 30px;
    border-radius: 6px;
    max-width: 900px;
}

.sf-footer-contact p {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #444;
}

.sf-footer-contact p:last-child {
    margin-bottom: 0;
}

.sf-contact-company {
    font-weight: bold;
}

.sf-footer-contact a {
    color: #b08d57;
    font-weight: bold;
    text-decoration: none;
}

.sf-footer-contact a:hover {
    text-decoration: underline;
}

/* スマホ表示（横幅768px以下） */
@media (max-width: 768px) {

    .sf-thanks-lead,
    .sf-footer-text {
        font-size: 13px;
        text-align: left;
    }

    .sf-thanks-lead br,
    .sf-footer-text br {
        display: none;
        /* スマホでは変な位置での改行を防ぐ */
    }

    .sf-notice-box-title {
        font-size: 14px !important;
        text-align: left;
    }

    .sf-notice-highlight {
        font-size: 14px;
        text-align: left;
    }

    .sf-notice-highlight br {
        display: none;
    }

    .sf-notice-subtext {
        font-size: 13px;
        text-align: left;
    }

    .sf-footer-contact {
        display: block;
        padding: 15px;
    }
}

/* ==========================================================================
   【新設】WEB事前登録フォーム・最上部リード文エリアの装飾
   ========================================================================== */
/* リード文全体を囲む上品な薄ベージュのボックス */
.sf-discount-lead-box {
    background-color: #fdfbf7 !important;
    /* 柔らかな薄ベージュ */
    border: 1px solid #dcd1be !important;
    /* 落ち着いたゴールド茶の細線 */
    border-radius: 6px !important;
    /* 角を少し丸く */
    padding: 24px !important;
    /* 内側のゆとり */
    text-align: center !important;
    /* 文字を中央揃え */
    margin-bottom: 35px !important;
    /* 下の入力枠との間隔 */
    box-sizing: border-box !important;
}

/* ＼WEB限定／ 安心の事前登録～ のタイトル */
.sf-discount-title {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #b08d57 !important;
    /* サイト共通のゴールド茶色 */
    margin: 0 0 10px 0 !important;
    /* 下の説明文との間隔 */
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* お亡くなりになられた後でも～ の説明文 */
.sf-discount-text {
    font-size: 14px !important;
    color: #444444 !important;
    /* 読みやすい濃いグレー */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.7 !important;
}

/* ==========================================================================
   スマホ表示（画面横幅768px以下）での見やすさ調整
   ========================================================================== */
@media (max-width: 768px) {
    .sf-discount-lead-box {
        padding: 16px !important;
        /* スマホ用に余白を少し狭く */
        text-align: left !important;
        /* スマホの長文は左寄せの方が見やすいため変更 */
        margin-bottom: 25px !important;
    }

    .sf-discount-title {
        font-size: 15px !important;
        /* スマホ画面に合わせて文字を最適化 */
    }

    .sf-discount-text {
        font-size: 13px !important;
        /* スマホ画面に合わせて文字を最適化 */
    }
}





/* ==========================================================================
   14. お急ぎページ：【白背景】ご依頼後の流れセクション
   ========================================================================== */
.emg-section-flow {
    padding: 60px 0 0 0;
    /* 下部の余白を0にして縦線エリアと繋げます */
    background-color: #ffffff;
    /* 完全な白背景 */
}

.emg-section-flow .emg-flow-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ワンポイント大きく調整 */
.emg-section-flow .emg-flow-main-title {
    font-size: 32px !important;
    /* 28pxから拡大 */
    font-weight: bold !important;
    color: #222 !important;
    text-align: center !important;
    margin: 0 0 15px 0 !important;
    letter-spacing: 2px;
}

/* ワンポイント大きく調整 */
.emg-section-flow .emg-flow-main-sub {
    font-size: 16px;
    /* 14pxから拡大 */
    line-height: 1.8;
    color: #555;
    text-align: center;
    margin: 0 0 50px 0;
}

.emg-section-flow .emg-flow-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.emg-section-flow .emg-flow-card {
    flex: 1;
    background-color: #fff;
    border: 1px solid #e6dfd3;
    border-radius: 4px;
    padding: 30px 30px 25px 30px;
    text-align: center;
    min-height: 270px;
    /* 文字拡大に伴い高さを少し確保 */
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(176, 141, 87, 0.04);
}

/* ==========================================================================
   ご依頼後の流れ：カードと矢印の順番通りにディレイをかける設定
   ========================================================================== */

/* 1番目：【01 電話で依頼】（即時表示） */
.emg-section-flow .emg-flow-flex>*:nth-child(1).is-visible {
    transition-delay: 0s;
}

/* 2番目：【最初の矢印】 */
.emg-section-flow .emg-flow-line-arrow:nth-child(2).is-visible {
    transition-delay: 0.15s;
}

/* 3番目：【02 搬送】 */
.emg-section-flow .emg-flow-card:nth-child(3).is-visible {
    transition-delay: 0.3s;
}

/* 4番目：【2番目の矢印】 */
.emg-section-flow .emg-flow-line-arrow:nth-child(4).is-visible {
    transition-delay: 0.45s;
}

/* 5番目：【03 お打合せ】 */
.emg-section-discount-wrap .emg-flow-card:nth-child(5).is-visible,
/* クラス揺れ対策 */
.emg-section-flow .emg-flow-card:nth-child(5).is-visible {
    transition-delay: 0.6s;
}

/* 6番目：【3番目の矢印】 */
.emg-section-flow .emg-flow-line-arrow:nth-child(6).is-visible {
    transition-delay: 0.75s;
}

/* 7番目：【04 葬儀】 */
.emg-section-discount-wrap .emg-flow-card:nth-child(7).is-visible,
/* クラス揺れ対策 */
.emg-section-flow .emg-flow-card:nth-child(7).is-visible {
    transition-delay: 0.9s;
}

.emg-section-flow .emg-flow-num-wrap {
    margin-bottom: 15px;
}

.emg-section-flow .emg-flow-num {
    font-size: 28px;
    /* 26pxから拡大 */
    color: #b08d57;
    font-family: "Bebas Neue", sans-serif;
    border-bottom: 2px solid #b08d57;
    padding-bottom: 2px;
    display: inline-block;
}

/* ワンポイント大きく調整 */
.emg-section-flow .emg-flow-card-title {
    font-size: 22px !important;
    font-weight: 100;
    color: #222 !important;
    margin: 18px 0 16px 0 !important;
}

/* ワンポイント大きく調整 */
.emg-section-flow .emg-flow-card-text {
    font-size: 16px;
    /* 13pxから拡大 */
    line-height: 1.7;
    color: #444;
    /* よりハッキリした色味へ調色 */
    text-align: left;
    margin: 0;
}

.emg-section-flow .emg-flow-line-arrow {
    width: 30px;
    height: 3px;
    background-color: #b08d57;
    margin: 0 10px;
    position: relative;
    flex-shrink: 0;
}

.emg-section-flow .emg-flow-line-arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: -5px;
    width: 10px;
    height: 10px;
    border-top: 3px solid #b08d57;
    border-right: 3px solid #b08d57;
    transform: rotate(45deg);
}

/* -----------------------------------------
   セクションをまたぐ縦線と導入文の装飾
   ----------------------------------------- */
.emg-section-flow .emg-flow-connector-zone {
    text-align: center;
    margin-top: 60px;
    position: relative;
}

/* ワンポイント大きく調整 */
.emg-section-flow .emg-connector-intro-text {
    font-size: 21px;
    /* 18pxから拡大してインパクトを強化 */
    font-weight: bold;
    color: #413e3e;
    margin: 0 0 30px 0;
    letter-spacing: 0.5px;
}

span.emg-connector-emphasis {
    font-size: 1.8rem;
    position: relative;
    display: inline-block;
}

span.emg-connector-emphasis::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    /* 文字から下に4px離す調整 */
    width: 100%;
    /* 文字の横幅いっぱいに引く */
    height: 2px;
    /* 線の太さ */
    background-color: #b08d57;
}

.emg-section-flow .emg-story-vertical-line {
    width: 1px;
    height: 100px;
    /* 線の長さを少し延長 */
    background-color: #999999;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    margin-bottom: -50px;
    /* 下のセクションにめり込ませるマージン */
}

/* ==========================================================================
   13. お急ぎページ：【薄グレー背景】事前登録割引セクション
   ========================================================================== */
.emg-section-discount {
    padding: 90px 0 60px 0;
    background-color: #f4f4f4;
    /* お写真通りの綺麗な薄グレー背景 */
}

.emg-section-discount .emg-discount-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.emg-section-discount .emg-discount-story {
    text-align: center;
    margin-bottom: 45px;
}

.emg-section-discount .emg-story-badge {
    display: inline-block;
    background-color: #7f6b52;
    color: #fff;
    font-size: 14px;
    /* 13pxから拡大 */
    font-weight: bold;
    padding: 5px 18px;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-story-main {
    font-size: 26px !important;
    /* 24pxから拡大 */
    font-weight: bold !important;
    color: #111 !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-story-sub {
    font-size: 16px;
    /* 14pxから拡大 */
    line-height: 1.8;
    color: #333;
    max-width: 720px;
    margin: 0 auto;
}

.emg-section-discount .emg-story-sub strong {
    color: #b08d57;
    font-weight: bold;
}

.emg-section-discount .emg-discount-main-box {
    background-color: #fff;
    border: 2px solid #b08d57;
    border-radius: 8px;
    padding: 45px 30px 35px 30px;
    text-align: center;
    margin-bottom: 35px;
    box-shadow: 0 4px 20px rgba(176, 141, 87, 0.06);
}

.emg-section-discount .emg-catch-area {
    margin-bottom: 25px;
}

.emg-section-discount .emg-catch-label {
    display: block;
    font-size: 18px;
    /* 16pxから拡大 */
    font-weight: bold;
    color: #b08d57;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-catch-title {
    font-size: 36px !important;
    /* 32pxから拡大してメイン感を強調 */
    font-weight: bold !important;
    color: #222 !important;
    margin: 0 !important;
    letter-spacing: 1px;
}

.emg-section-discount .emg-step-block {
    background-color: #fdfbf7;
    border: 1px solid #e8e2d5;
    border-radius: 6px;
    padding: 22px;
    margin-bottom: 35px;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-step-header {
    font-size: 17px !important;
    /* 15pxから拡大 */
    font-weight: bold !important;
    color: #b08d57 !important;
    margin: 0 0 18px 0 !important;
}

.emg-section-discount .emg-step-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.emg-section-discount .emg-step-box {
    flex: 1;
    background-color: #fff;
    border: 1px solid #dcd1be;
    border-radius: 6px;
    padding: 12px 6px;
    min-height: 95px;
    /* 文字拡大に合わせて少し広げました */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.emg-section-discount .emg-step-highlight {
    background-color: #fff9f9;
    border: 1px solid #e74c3c;
}

.emg-section-discount .emg-step-num {
    display: block;
    font-size: 20px;
    /* 18pxから拡大 */
    font-weight: bold;
    color: #b08d57;
    margin-bottom: 2px;
}

.emg-section-discount .emg-step-highlight .emg-step-num {
    color: #e74c3c;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-step-text {
    font-size: 14px;
    /* 13pxから拡大 */
    line-height: 1.4;
    color: #333;
    margin: 0;
    font-weight: bold;
}

.emg-section-discount .emg-step-highlight .emg-step-text strong {
    color: #e74c3c;
    font-size: 15px;
    /* 14pxから拡大 */
}

.emg-section-discount .emg-step-arrow {
    font-size: 16px;
    /* 14pxから拡大 */
    color: #c5a059;
    font-weight: bold;
}

.emg-section-discount .emg-btn-area {
    margin-bottom: 18px;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-redirect-btn {
    display: inline-block;
    background: #b08d57;
    color: #fff !important;
    font-size: 20px !important;
    /* 18pxから拡大して押しやすく */
    font-weight: bold !important;
    text-decoration: none !important;
    padding: 18px 40px;
    /* ボタン全体のボリュームもアップ */
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(176, 141, 87, 0.3);
    transition: all 0.3s ease;
    max-width: 480px;
    width: 100%;
    box-sizing: border-box;
}

.emg-section-discount .emg-redirect-btn span {
    display: block;
    font-size: 12px;
    /* 11pxから拡大 */
    font-weight: normal;
    letter-spacing: 1px;
    margin-bottom: 3px;
    opacity: 0.9;
}

.emg-section-discount .emg-redirect-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(176, 141, 87, 0.5);
    background: linear-gradient(135px, #b08d57, #997845);
}

.emg-section-discount .emg-discount-note {
    font-size: 13px;
    /* 12pxから拡大 */
    color: #666;
    margin: 0;
}

.emg-section-discount .emg-discount-guide {
    background-color: #f5f2eb;
    border-radius: 6px;
    padding: 25px 30px;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-guide-heading {
    font-size: 15px !important;
    /* 14pxから拡大 */
    font-weight: bold !important;
    color: #333 !important;
    margin: 0 0 15px 0 !important;
    border-bottom: 1px solid #d8d0c2;
    padding-bottom: 8px;
}

.emg-section-discount .emg-guide-list li {
    margin-bottom: 18px !important;
}

.emg-section-discount .emg-guide-list li:last-child {
    margin-bottom: 0 !important;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-guide-title {
    display: block;
    font-size: 14px;
    /* 13pxから拡大 */
    color: #8a6d41;
    margin-bottom: 4px;
    font-weight: bold;
}

/* ワンポイント大きく調整 */
.emg-section-discount .emg-guide-text {
    font-size: 13px;
    /* 12pxから拡大 */
    line-height: 1.6;
    color: #444;
    margin: 0;
}

.emg-section-discount .pc-only {
    display: block;
}

.emg-section-discount .sp-only {
    display: none;
}

/* ==========================================================================
   スマホ表示（画面横幅768px以下）用の完全最適化
   ========================================================================== */
@media (max-width: 768px) {
    .emg-section-flow {
        padding: 40px 0 0 0;
    }

    .emg-section-flow .emg-flow-main-title {
        font-size: 24px !important;
    }

    .emg-section-flow .emg-flow-main-sub {
        font-size: 13px;
        text-align: left;
        margin-bottom: 30px;
    }

    .emg-section-flow .emg-flow-main-sub br {
        display: none;
    }

    .emg-section-flow .emg-flow-flex {
        flex-direction: column;
    }

    .emg-section-flow .emg-flow-card {
        width: 100%;
        min-height: auto;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .emg-section-flow .emg-flow-card-title {
        font-size: 16px !important;
    }

    .emg-section-flow .emg-flow-card-text {
        text-align: center;
        font-size: 13px;
    }

    .emg-section-flow .emg-flow-line-arrow {
        width: 1px;
        height: 25px;
        margin: 10px 0;
    }

    .emg-section-flow .emg-flow-line-arrow::after {
        right: -3px;
        bottom: 0;
        top: auto;
        transform: rotate(135deg);
    }

    .emg-section-flow .emg-connector-intro-text {
        font-size: 17px;
        padding: 0 10px;
    }

    .emg-section-flow .emg-story-vertical-line {
        height: 80px;
        margin-bottom: -40px;
    }

    .emg-section-discount {
        padding: 70px 0 40px 0;
    }

    .emg-section-discount .emg-story-badge {
        font-size: 12px;
        padding: 4px 12px;
    }

    .emg-section-discount .emg-story-main {
        font-size: 19px !important;
    }

    .emg-section-discount .emg-story-sub {
        font-size: 14px;
        text-align: left;
    }

    .emg-section-discount .emg-discount-main-box {
        padding: 30px 15px 25px 15px;
    }

    .emg-section-discount .emg-catch-label {
        font-size: 15px;
    }

    .emg-section-discount .emg-catch-title {
        font-size: 26px !important;
    }

    .emg-section-discount .emg-step-header {
        font-size: 15px !important;
    }

    .emg-section-discount .emg-step-flex {
        flex-direction: column;
        gap: 5px;
    }

    .emg-section-discount .emg-step-box {
        width: 100%;
        min-height: auto;
        padding: 12px 10px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }

    .emg-section-discount .emg-step-num {
        font-size: 18px;
    }

    .emg-section-discount .emg-step-text {
        text-align: left;
        font-size: 13px;
    }

    .emg-section-discount .emg-step-highlight .emg-step-text strong {
        font-size: 14px;
    }

    .emg-section-discount .emg-step-arrow {
        transform: rotate(90deg);
        padding: 2px 0;
    }

    .emg-section-discount .emg-redirect-btn {
        font-size: 17px !important;
        padding: 14px 20px;
    }

    .emg-section-discount .emg-redirect-btn span {
        font-size: 11px;
    }

    .emg-section-discount .emg-discount-note {
        font-size: 12px;
    }

    .emg-section-discount .emg-discount-guide {
        padding: 20px 15px;
    }

    .emg-section-discount .emg-guide-heading {
        font-size: 14px !important;
    }

    .emg-section-discount .emg-guide-title {
        font-size: 13px;
    }

    .emg-section-discount .emg-guide-text {
        font-size: 12px;
    }

    .emg-section-discount .pc-only {
        display: none;
    }

    .emg-section-discount .sp-only {
        display: block;
    }
}

ul.emg-guide-list {
    padding-left: 20px;
}





/* ==========================================================================
   [PC用スタイル] 1024px以上 (最大幅1200px、比率60%:40%に調整)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    #section-plan-detail {
        padding: 60px 0;
        background-color: #f7f6f2;
        font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    }

    #section-plan-detail .plan-container {
        max-width: 1240px;
        /* 左右余白20pxずつを含めて1200pxをシールド */
        margin: 0 auto;
        padding: 0 20px;
        box-sizing: border-box;
    }

    #section-plan-detail .plan-main-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        padding: 40px;
        display: flex;
        gap: 40px;
        align-items: flex-start;
        width: 100%;
        margin-bottom: 70px;
        box-sizing: border-box;
    }

    /* 画像エリアを 60% に割り当て */
    #section-plan-detail .plan-media {
        width: 55%;
        flex-shrink: 0;
    }

    #section-plan-detail .plan-media img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        display: block;
        object-fit: cover;
    }

    #section-plan-detail .plan-no-image {
        width: 100%;
        height: 360px;
        background-color: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        border-radius: 6px;
    }

    /* コンテンツ・価格エリアを 40% に割り当て */
    #section-plan-detail .plan-content {
        width: calc(45% - 40px);
        flex-grow: 1;
    }

    #section-plan-detail .plan-title {
        font-size: 32px;
        font-weight: 600;
        color: #2c2a29;
        margin: 0 0 18px 0;
        letter-spacing: 0.03em;
        line-height: 1.3;
    }

    #section-plan-detail .plan-description {
        border: 1px solid #dcd9d0;
        background-color: #faf9f6;
        padding: 18px 20px;
        margin-bottom: 25px;
        font-size: 14.5px;
        line-height: 1.65;
        color: #4a4a4a;
        border-radius: 4px;
        box-sizing: border-box;
    }

    #section-plan-detail .plan-discount-notice {
        margin-bottom: 15px;
        text-align: center;
    }

    #section-plan-detail .notice-text {
        font-size: 13px;
        color: #555555;
        border: 1px solid #d4a3a3;
        background-color: #fffcfc;
        padding: 5px 12px;
        border-radius: 3px;
        display: inline-block;
        width: 100%;
        position: relative;
        /* 【追加】下の金額（矢印）との間に突起分のスペースを作る */
        margin-bottom: 10px;
    }

    /* ==========================================================================
   吹き出しの三角形（突起部分）の定義
   ========================================================================== */
    /* 1. 三角形の内側の白い背景部分 */
    #section-plan-detail .notice-text::after {
        content: "";
        position: absolute;
        bottom: -8px;
        /* 枠線の外側に配置 */
        left: 70%;
        /* 右側の会員価格に向けるため、中央より右寄りに配置（※） */
        transform: translateX(-50%);
        border-width: 8px 8px 0;
        /* 下向きの三角形 */
        border-style: solid;
        border-color: #fffcfc transparent;
        /* 枠内と同じ白ベース */
        z-index: 2;
    }

    /* 2. 三角形の外側のうす赤色の枠線部分 */
    #section-plan-detail .notice-text::before {
        content: "";
        position: absolute;
        bottom: -9px;
        /* 白い三角より1px外側に出して線にする */
        left: 70%;
        /* afterと位置を合わせる */
        transform: translateX(-50%);
        border-width: 9px 9px 0;
        border-style: solid;
        border-color: #d4a3a3 transparent;
        /* 枠線と同じ色 */
        z-index: 1;
    }

    #section-plan-detail .notice-accent {
        color: #b33e3e;
        font-weight: bold;
        font-size: 15px;
    }

    #section-plan-detail .plan-price-area {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 30px;
        border-bottom: 1px dashed #dcd9d0;
        padding-bottom: 20px;
        box-sizing: border-box;
    }

    #section-plan-detail .price-general {
        color: #777777;
        padding-bottom: 5px;
        flex-shrink: 0;
    }

    #section-plan-detail .price-general .price-label {
        display: block;
        font-size: 14px;
        margin-bottom: 2px;
        color: #888888;
    }

    #section-plan-detail .price-general .price-value {
        font-size: 22px;
        text-decoration: line-through;
        font-weight: 500;
    }

    #section-plan-detail .price-arrow {
        text-align: center;
        padding-bottom: 8px;
        margin: 0 auto;
        padding-top: 10px;
    }

    #section-plan-detail .price-arrow::after {
        content: "▶";
        font-size: 13px;
        color: #bfa3a3;
    }

    #section-plan-detail .price-member {
        text-align: right;
        flex-shrink: 0;
    }

    /* 【修正】(税抜) を 円 の上に配置するボックスレイアウト */
    #section-plan-detail .price-main-row {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        line-height: 1;
    }

    #section-plan-detail .price-member .price-value {
        font-size: 60px;
        font-weight: 700;
        color: #b33e3e;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    #section-plan-detail .price-unit-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        margin-left: 4px;
        height: 48px;
        /* 金額の高さに追従 */
        position: relative;
        top: -10px;
        right: -6px;
    }

    #section-plan-detail .price-member .tax-label {
        font-size: 11px;
        color: #b33e3e;
        font-weight: normal;
        line-height: 1;
        margin-bottom: 5px;
        /* 円の上に浮かせる余白 */
        position: relative;
        right: 6px;
    }

    #section-plan-detail .price-member .price-unit {
        font-size: 18px;
        color: #b33e3e;
        font-weight: 700;
        line-height: 1;
    }

    #section-plan-detail .price-tax {
        font-size: 16px;
        color: #666666;
        margin-top: 8px;
        padding-right: 6px;
    }















    /* ==========================================================================
   PC Style (1024px ~)
   ========================================================================== */
    @media screen and (min-width: 1024px) {
        #section-plan-detail .plan-flow-tags {
            display: flex;
            justify-content: space-between;
            gap: 6px;
            width: 100%;
        }

        #section-plan-detail .flow-tag-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            font-size: 14px;
            border-radius: 2px;
            box-sizing: border-box;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }

        /* 共通：非アクティブ（チェックなし）のスタイル */
        #section-plan-detail .flow-tag-item.is-inactive {
            background-color: #f2f2f2;
            border: 1px solid #e0e0e0;
            color: #b8b8b8;
        }

        /* 共通：アクティブ時の基本設定（文字を白にして上品に） */
        #section-plan-detail .flow-tag-item.is-active {
            color: #ffffff;
        }

        /* プランごとのテーマカラー出し分け */
        /* 火葬式プラン */
        #section-plan-detail.plan-theme-kasoshikiplan .flow-tag-item.is-active {
            background-color: #c58d2c;
            border: 1px solid #c58d2c;
        }

        /* 直葬プラン */
        #section-plan-detail.plan-theme-chokusoplan .flow-tag-item.is-active {
            background-color: #8e727e;
            border: 1px solid #8e727e;
        }

        /* 一日葬プラン */
        #section-plan-detail.plan-theme-itinitisoplan .flow-tag-item.is-active {
            background-color: #7b839b;
            border: 1px solid #7b839b;
        }

        /* 家族葬プラン */
        #section-plan-detail.plan-theme-kazokusoplan .flow-tag-item.is-active {
            background-color: #8b8f52;
            border: 1px solid #8b8f52;
        }
    }

    /* ==========================================================================
   Tablet Style (768px ~ 1023px)
   ========================================================================== */
    @media screen and (min-width: 768px) and (max-width: 1023px) {
        #section-plan-detail .plan-flow-tags {
            display: flex;
            justify-content: space-between;
            gap: 6px;
            width: 100%;
        }

        #section-plan-detail .flow-tag-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            font-size: 13px;
            border-radius: 4px;
            box-sizing: border-box;
            letter-spacing: 0.05em;
            white-space: nowrap;
        }

        #section-plan-detail .flow-tag-item.is-inactive {
            background-color: #f2f2f2;
            border: 1px solid #e0e0e0;
            color: #b8b8b8;
        }

        #section-plan-detail .flow-tag-item.is-active {
            color: #ffffff;
            font-weight: 600;
        }

        /* 各プランカラー設定 */
        #section-plan-detail.plan-theme-kasoshikiplan .flow-tag-item.is-active {
            background-color: #c58d2c;
            border: 1px solid #c58d2c;
        }

        #section-plan-detail.plan-theme-chokusoplan .flow-tag-item.is-active {
            background-color: #8e727e;
            border: 1px solid #8e727e;
        }

        #section-plan-detail.plan-theme-itinitisoplan .flow-tag-item.is-active {
            background-color: #7b839b;
            border: 1px solid #7b839b;
        }

        #section-plan-detail.plan-theme-kazokusoplan .flow-tag-item.is-active {
            background-color: #8b8f52;
            border: 1px solid #8b8f52;
        }
    }

    /* ==========================================================================
   Smartphone Style (~ 767px)
   ========================================================================== */
    @media screen and (max-width: 767px) {
        #section-plan-detail .plan-flow-tags {
            display: flex;
            justify-content: space-between;
            gap: 4px;
            /* スマホ用に隙間をややタイトに */
            width: 100%;
        }

        #section-plan-detail .flow-tag-item {
            flex: 1;
            text-align: center;
            padding: 6px 0;
            /* スマホ用に上下パディングを微調整 */
            font-size: 11px;
            /* 画面に収まるよう文字サイズを調整 */
            border-radius: 4px;
            box-sizing: border-box;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }

        #section-plan-detail .flow-tag-item.is-inactive {
            background-color: #f2f2f2;
            border: 1px solid #e0e0e0;
            color: #b8b8b8;
        }

        #section-plan-detail .flow-tag-item.is-active {
            color: #ffffff;
            font-weight: 600;
        }

        /* 各プランカラー設定 */
        #section-plan-detail.plan-theme-kasoshikiplan .flow-tag-item.is-active {
            background-color: #c58d2c;
            border: 1px solid #c58d2c;
        }

        #section-plan-detail.plan-theme-chokusoplan .flow-tag-item.is-active {
            background-color: #8e727e;
            border: 1px solid #8e727e;
        }

        #section-plan-detail.plan-theme-itinitisoplan .flow-tag-item.is-active {
            background-color: #7b839b;
            border: 1px solid #7b839b;
        }

        #section-plan-detail.plan-theme-kazokusoplan .flow-tag-item.is-active {
            background-color: #8b8f52;
            border: 1px solid #8b8f52;
        }
    }


































    #section-plan-detail .plan-included-section {
        text-align: center;
        margin-top: 20px;
        width: 100%;
        max-width: 1200px;
    }

    #section-plan-detail .included-title {
        font-size: 24px;
        font-weight: 600;
        color: #2c2a29;
        margin-bottom: 45px;
        position: relative;
        display: inline-block;
        padding-bottom: 14px;
        letter-spacing: 0.03em;
    }

    #section-plan-detail .included-title::after {
        content: "";
        position: absolute;
        left: 35%;
        bottom: 0;
        width: 30%;
        height: 2px;
        background-color: #a39274;
    }

    /* Gridシステム：ガタつきを完全に根絶 */
    #section-plan-detail .included-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        width: 100%;
        text-align: left;
    }

    #section-plan-detail .included-item {
        background: #ffffff;
        border-radius: 6px;
        padding: 20px 16px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
        border: 1px solid #eae8e2;
        height: 100%;
    }

    #section-plan-detail .item-icon {
        flex-shrink: 0;
    }

    #section-plan-detail .item-icon img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        display: block;
    }

    #section-plan-detail .item-text {
        font-size: 14px;
        line-height: 1.4;
        color: #333333;
    }
}

/* ==========================================================================
   [タブレット用スタイル] 768px〜1023px
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #section-plan-detail {
        padding: 45px 0;
        background-color: #f7f6f2;
    }

    #section-plan-detail .plan-container {
        width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
    }

    #section-plan-detail .plan-main-card {
        background: #ffffff;
        border-radius: 10px;
        padding: 35px 30px;
        display: block;
        width: 100%;
        margin-bottom: 55px;
        box-sizing: border-box;
    }

    #section-plan-detail .plan-media {
        display: block;
        width: 100%;
        margin-bottom: 25px;
    }

    #section-plan-detail .plan-media img {
        width: 100%;
        height: auto;
        border-radius: 6px;
    }

    #section-plan-detail .plan-no-image {
        width: 100%;
        height: 300px;
        background-color: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
    }

    #section-plan-detail .plan-content {
        display: block;
        width: 100%;
    }

    #section-plan-detail .plan-title {
        font-size: 28px;
        margin: 0 0 15px 0;
        line-height: 1.35;
    }

    #section-plan-detail .plan-description {
        border: 1px solid #dcd9d0;
        background-color: #faf9f6;
        padding: 15px 18px;
        margin-bottom: 22px;
        font-size: 14px;
        line-height: 1.6;
        color: #4a4a4a;
        border-radius: 4px;
    }

    #section-plan-detail .plan-discount-notice {
        margin-bottom: 12px;
    }

    #section-plan-detail .notice-text {
        font-size: 12.5px;
        color: #555555;
        border: 1px solid #d4a3a3;
        background-color: #fffcfc;
        padding: 4px 10px;
        display: inline-block;
    }

    #section-plan-detail .notice-accent {
        color: #b33e3e;
        font-weight: bold;
    }

    #section-plan-detail .plan-price-area {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 25px;
        border-bottom: 1px dashed #dcd9d0;
        padding-bottom: 20px;
    }

    #section-plan-detail .price-general {
        color: #777777;
        padding-bottom: 2px;
    }

    #section-plan-detail .price-general .price-label {
        display: block;
        font-size: 11px;
        color: #888888;
    }

    #section-plan-detail .price-general .price-value {
        font-size: 17px;
        text-decoration: line-through;
    }

    #section-plan-detail .price-arrow {
        padding: 0 15px;
        color: #bfa3a3;
        font-size: 13px;
        padding-bottom: 4px;
    }

    #section-plan-detail .price-arrow::after {
        content: "▶";
    }

    #section-plan-detail .price-member {
        text-align: right;
    }

    #section-plan-detail .price-main-row {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        line-height: 1;
    }

    #section-plan-detail .price-member .price-value {
        font-size: 46px;
        font-weight: 700;
        color: #b33e3e;
    }

    #section-plan-detail .price-unit-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 4px;
    }

    #section-plan-detail .price-member .tax-label {
        font-size: 11px;
        color: #555555;
        margin-bottom: 3px;
    }

    #section-plan-detail .price-member .price-unit {
        font-size: 16px;
        color: #b33e3e;
        font-weight: 700;
    }

    #section-plan-detail .price-tax {
        font-size: 12.5px;
        color: #666666;
        margin-top: 4px;
    }

    #section-plan-detail .plan-flow-tags {
        display: flex;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        padding-top: 10px;
    }

    #section-plan-detail .flow-tag-item {
        flex: 1;
        text-align: center;
        padding: 7px 0;
        font-size: 12px;
        border-radius: 4px;
        white-space: nowrap;
    }

    #section-plan-detail .flow-tag-item.is-active {
        background-color: #f5efe6;
        border: 1px solid #c2b094;
        color: #5c4e37;
        font-weight: 600;
    }

    #section-plan-detail .flow-tag-item.is-inactive {
        background-color: #f2f2f2;
        border: 1px solid #e0e0e0;
        color: #b8b8b8;
    }

    #section-plan-detail .plan-included-section {
        text-align: center;
    }

    #section-plan-detail .included-title {
        font-size: 22px;
        margin-bottom: 35px;
        position: relative;
        display: inline-block;
        padding-bottom: 12px;
    }

    #section-plan-detail .included-title::after {
        content: "";
        position: absolute;
        left: 35%;
        bottom: 0;
        width: 30%;
        height: 2px;
        background-color: #a39274;
    }

    #section-plan-detail .included-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        width: 100%;
    }

    #section-plan-detail .included-item {
        background: #ffffff;
        border-radius: 6px;
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
        border: 1px solid #eae8e2;
        height: 100%;
    }

    #section-plan-detail .item-icon img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    #section-plan-detail .item-text {
        font-size: 13px;
        line-height: 1.4;
        color: #333333;
    }
}

/* ==========================================================================
   [スマホ用スタイル] 767px以下
   ========================================================================== */
@media screen and (max-width: 767px) {
    #section-plan-detail {
        padding: 25px 0;
        background-color: #f7f6f2;
    }

    #section-plan-detail .plan-container {
        width: 100%;
        padding: 0 16px;
        box-sizing: border-box;
    }

    #section-plan-detail .plan-main-card {
        background: #ffffff;
        border-radius: 8px;
        padding: 20px 16px;
        display: block;
        width: 100%;
        margin-bottom: 40px;
    }

    #section-plan-detail .plan-media {
        display: block;
        width: 100%;
        margin-bottom: 18px;
    }

    #section-plan-detail .plan-media img {
        width: 100%;
        height: auto;
        border-radius: 4px;
    }

    #section-plan-detail .plan-no-image {
        width: 100%;
        height: 190px;
        background-color: #eee;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
    }

    #section-plan-detail .plan-title {
        font-size: 22px;
        margin: 0 0 12px 0;
        line-height: 1.35;
    }

    #section-plan-detail .plan-description {
        border: 1px solid #dcd9d0;
        background-color: #faf9f6;
        padding: 12px 14px;
        margin-bottom: 18px;
        font-size: 13px;
        line-height: 1.55;
        color: #4a4a4a;
        border-radius: 4px;
    }

    #section-plan-detail .plan-discount-notice {
        margin-bottom: 10px;
    }

    #section-plan-detail .notice-text {
        font-size: 11px;
        color: #555555;
        border: 1px solid #d4a3a3;
        background-color: #fffcfc;
        padding: 5px 6px;
        display: block;
        text-align: center;
    }

    #section-plan-detail .notice-accent {
        color: #b33e3e;
        font-weight: bold;
    }

    #section-plan-detail .plan-price-area {
        display: block;
        width: 100%;
        margin-bottom: 20px;
        border-bottom: 1px dashed #dcd9d0;
        padding-bottom: 15px;
        text-align: center;
    }

    #section-plan-detail .price-general {
        display: block;
        color: #777777;
        margin-bottom: 6px;
    }

    #section-plan-detail .price-general .price-label {
        display: inline-block;
        font-size: 11px;
        margin-right: 5px;
        color: #888888;
    }

    #section-plan-detail .price-general .price-value {
        font-size: 15px;
        text-decoration: line-through;
    }

    #section-plan-detail .price-arrow {
        display: none;
    }

    #section-plan-detail .price-member {
        display: block;
        text-align: center;
    }

    #section-plan-detail .price-main-row {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        line-height: 1;
    }

    #section-plan-detail .price-member .price-value {
        font-size: 40px;
        font-weight: 700;
        color: #b33e3e;
    }

    #section-plan-detail .price-unit-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 3px;
    }

    #section-plan-detail .price-member .tax-label {
        font-size: 10px;
        color: #555555;
        margin-bottom: 2px;
    }

    #section-plan-detail .price-member .price-unit {
        font-size: 14px;
        color: #b33e3e;
        font-weight: 700;
    }

    #section-plan-detail .price-tax {
        font-size: 12px;
        color: #666666;
        margin-top: 5px;
    }

    #section-plan-detail .plan-flow-tags {
        display: flex;
        justify-content: space-between;
        gap: 4px;
        width: 100%;
    }

    #section-plan-detail .flow-tag-item {
        flex: 1;
        text-align: center;
        padding: 6px 0;
        font-size: 11px;
        border-radius: 3px;
        white-space: nowrap;
    }

    #section-plan-detail .flow-tag-item.is-active {
        background-color: #f5efe6;
        border: 1px solid #c2b094;
        color: #5c4e37;
        font-weight: 600;
    }

    #section-plan-detail .flow-tag-item.is-inactive {
        background-color: #f2f2f2;
        border: 1px solid #e0e0e0;
        color: #b8b8b8;
    }

    #section-plan-detail .plan-included-section {
        text-align: center;
        margin-top: 10px;
    }

    #section-plan-detail .included-title {
        font-size: 18px;
        margin-bottom: 25px;
        position: relative;
        display: inline-block;
        padding-bottom: 8px;
    }

    #section-plan-detail .included-title::after {
        content: "";
        position: absolute;
        left: 30%;
        bottom: 0;
        width: 40%;
        height: 2px;
        background-color: #a39274;
    }

    #section-plan-detail .included-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }

    #section-plan-detail .included-item {
        background: #ffffff;
        border-radius: 6px;
        padding: 12px 10px;
        display: flex;
        align-items: center;
        gap: 8px;
        border: 1px solid #eae8e2;
        height: 100%;
    }

    #section-plan-detail .item-icon img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    #section-plan-detail .item-text {
        font-size: 12px;
        line-height: 1.35;
        color: #333333;
    }
}





/* ==========================================================================
   PC Style (1024px ~)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    #cremation-fee-section {
        background-color: #f2f2f2;
        padding: 80px 0;
        font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
        color: #333333;
    }

    #cremation-fee-section .cremation-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 60px;
    }

    #cremation-fee-section .cremation-content {
        flex: 1;
    }

    #cremation-fee-section .cremation-title {
        font-size: 28px;
        font-weight: 500;
        margin-bottom: 30px;
        letter-spacing: 0.05em;
    }

    #cremation-fee-section .cremation-text {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 20px;
        letter-spacing: 0.03em;
    }

    #cremation-fee-section .cremation-note {
        font-size: 13px;
        color: #666666;
        line-height: 1.6;
    }

    #cremation-fee-section .cremation-table-wrap {
        width: 440px;
        flex-shrink: 0;
    }

    #cremation-fee-section .cremation-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px;
        /* 行間の隙間 */
    }

    #cremation-fee-section .table-head {
        background-color: #b5925e;
        color: #ffffff;
        font-size: 18px;
        font-weight: normal;
        padding: 15px;
        text-align: center;
        border-radius: 4px;
        letter-spacing: 0.05em;
    }

    #cremation-fee-section .cremation-table th:not(.table-head) {
        background-color: #b09b83;
        color: #ffffff;
        font-size: 16px;
        font-weight: normal;
        padding: 15px 20px;
        text-align: center;
        width: 40%;
        border-radius: 4px 0 0 4px;
        letter-spacing: 0.05em;
    }

    #cremation-fee-section .cremation-table td {
        background-color: #ffffff;
        font-size: 18px;
        font-weight: 500;
        text-align: right;
        padding: 15px 25px;
        width: 60%;
        border-radius: 0 4px 4px 0;
    }
}











/* ==========================================================================
   PC Style (1024px ~)
   ========================================================================== */
@media screen and (min-width: 1024px) {
    #section-funeral-flow {
        background-color: #ffffff;
        padding: 90px 0;
        font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
        color: #333333;
        /* スムーズスクロールを有効化 */
        scroll-behavior: smooth;
    }

    #section-funeral-flow .flow-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
    }

    /* メインタイトル */
    #section-funeral-flow .flow-main-title {
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 40px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #section-funeral-flow .flow-main-title::before,
    #section-funeral-flow .flow-main-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: #dddddd;
        max-width: 150px;
    }

    #section-funeral-flow .flow-main-title span {
        padding: 0 30px;
        letter-spacing: 0.05em;
    }

    /* 導入文 */
    #section-funeral-flow .flow-intro-text {
        max-width: 800px;
        margin: 0 auto 50px auto;
        text-align: center;
        font-size: 16px;
        line-height: 1.8;
        letter-spacing: 0.03em;
    }

    /* 流れのタグ */
    #section-funeral-flow .flow-tags-wrapper {
        display: flex;
        justify-content: center;
        gap: 12px;
        max-width: 760px;
        margin: 0 auto 60px auto;
    }

    #section-funeral-flow .flow-tag-item {
        display: block;
        flex: 1;
        text-align: center;
        padding: 14px 0;
        font-size: 15px;
        border-radius: 4px;
        box-sizing: border-box;
        letter-spacing: 0.05em;
        white-space: nowrap;
        text-decoration: none;
        /* リンクの下線を消す */
    }

    #section-funeral-flow .flow-tag-item.is-inactive {
        background-color: #f2f2f2;
        border: 1px solid #e0e0e0;
        color: #b8b8b8;
    }

    #section-funeral-flow .flow-tag-item.is-active {
        border: 1px solid transparent;
        color: #ffffff;
        font-weight: 600;
    }

    /* 内部リンク付きタグのホバー設定 */
    #section-funeral-flow .flow-tag-item.has-link {
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

    #section-funeral-flow .flow-tag-item.has-link:hover {
        opacity: 0.8;
    }

    /* 詳細リスト構造 */
    #section-funeral-flow .flow-details-list {
        max-width: 900px;
        margin: 0 auto;
    }

    #section-funeral-flow .flow-detail-card {
        background-color: #f7f7f7;
        padding: 40px 50px;
        display: flex;
        align-items: center;
        gap: 45px;
        border-radius: 4px;
        /* 固定ヘッダー（追従ヘッダー）がある場合のスクロール位置の余白調整用 */
        scroll-margin-top: 180px;
    }

    /* 左側の丸数字 */
    #section-funeral-flow .flow-card-number {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    #section-funeral-flow .flow-card-number .num-label {
        font-size: 12px;
        line-height: 1;
        margin-bottom: 4px;
        letter-spacing: 0.05em;
    }

    #section-funeral-flow .flow-card-number .num-value {
        font-size: 24px;
        font-weight: bold;
        line-height: 1;
        font-family: 'Times New Roman', serif;
    }

    /* 右側のテキスト */
    #section-funeral-flow .flow-card-content {
        flex: 1;
    }

    #section-funeral-flow .flow-card-title {
        font-size: 22px;
        font-weight: 500;
        margin-bottom: 15px;
        letter-spacing: 0.05em;
    }

    #section-funeral-flow .flow-card-text {
        font-size: 15px;
        line-height: 1.8;
        color: #444444;
    }

    /* 下矢印の区切り */
    #section-funeral-flow .flow-arrow-separator {
        width: 30px;
        height: 30px;
        margin: 25px auto;
        position: relative;
    }

    #section-funeral-flow .flow-arrow-separator::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        width: 16px;
        height: 16px;
        border-bottom: 2px solid #b09b83;
        border-right: 2px solid #b09b83;
        transform: rotate(45deg);
    }
}


/* ==========================================================================
   Tablet Style (768px ~ 1023px)
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #section-funeral-flow {
        background-color: #ffffff;
        padding: 70px 0;
        font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
        color: #333333;
        scroll-behavior: smooth;
    }

    #section-funeral-flow .flow-container {
        padding: 0 30px;
    }

    #section-funeral-flow .flow-main-title {
        font-size: 25px;
        margin-bottom: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #section-funeral-flow .flow-main-title::before,
    #section-funeral-flow .flow-main-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: #dddddd;
        max-width: 100px;
    }

    #section-funeral-flow .flow-main-title span {
        padding: 0 20px;
    }

    #section-funeral-flow .flow-intro-text {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 40px;
        padding: 0 20px;
    }

    #section-funeral-flow .flow-tags-wrapper {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 50px;
    }

    #section-funeral-flow .flow-tag-item {
        display: block;
        flex: 1;
        text-align: center;
        padding: 12px 0;
        font-size: 14px;
        border-radius: 4px;
        white-space: nowrap;
        text-decoration: none;
    }

    #section-funeral-flow .flow-tag-item.is-inactive {
        background-color: #f2f2f2;
        border: 1px solid #e0e0e0;
        color: #b8b8b8;
    }

    #section-funeral-flow .flow-tag-item.is-active {
        border: 1px solid transparent;
        color: #ffffff;
        font-weight: 600;
    }

    #section-funeral-flow .flow-tag-item.has-link {
        cursor: pointer;
        transition: opacity 0.3s ease;
    }

    #section-funeral-flow .flow-tag-item.has-link:hover {
        opacity: 0.8;
    }

    #section-funeral-flow .flow-detail-card {
        background-color: #f7f7f7;
        padding: 35px 40px;
        display: flex;
        align-items: center;
        gap: 35px;
        border-radius: 4px;
        scroll-margin-top: 80px;
    }

    #section-funeral-flow .flow-card-number {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    #section-funeral-flow .flow-card-number .num-label {
        font-size: 11px;
        margin-bottom: 2px;
    }

    #section-funeral-flow .flow-card-number .num-value {
        font-size: 22px;
    }

    #section-funeral-flow .flow-card-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    #section-funeral-flow .flow-card-text {
        font-size: 14px;
        line-height: 1.7;
    }

    #section-funeral-flow .flow-arrow-separator {
        width: 24px;
        height: 24px;
        margin: 20px auto;
        position: relative;
    }

    #section-funeral-flow .flow-arrow-separator::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 5px;
        width: 12px;
        height: 12px;
        border-bottom: 2px solid #b09b83;
        border-right: 2px solid #b09b83;
        transform: rotate(45deg);
    }
}




/* ==========================================================================
   Smartphone Style (~ 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
    #section-funeral-flow {
        background-color: #ffffff;
        padding: 50px 0;
        font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
        color: #333333;
        scroll-behavior: smooth;
    }

    #section-funeral-flow .flow-container {
        padding: 0 20px;
    }

    #section-funeral-flow .flow-main-title {
        font-size: 20px;
        margin-bottom: 25px;
        line-height: 1.4;
    }

    #section-funeral-flow .flow-main-title::before,
    #section-funeral-flow .flow-main-title::after {
        display: none;
    }

    #section-funeral-flow .flow-main-title span {
        padding: 0;
    }

    #section-funeral-flow .flow-intro-text {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 30px;
        text-align: left;
    }

    #section-funeral-flow .flow-tags-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 40px;
    }

    #section-funeral-flow .flow-tag-item {
        display: block;
        text-align: center;
        padding: 10px 0;
        font-size: 12px;
        border-radius: 4px;
        text-decoration: none;
    }

    #section-funeral-flow .flow-tag-item.is-inactive {
        background-color: #f2f2f2;
        border: 1px solid #e0e0e0;
        color: #b8b8b8;
    }

    #section-funeral-flow .flow-tag-item.is-active {
        border: 1px solid transparent;
        color: #ffffff;
        font-weight: 600;
    }

    #section-funeral-flow .flow-tag-item.has-link {
        cursor: pointer;
    }

    #section-funeral-flow .flow-tag-item.has-link:active {
        opacity: 0.7;
        /* スマホタップ時のフィードバック */
    }

    #section-funeral-flow .flow-detail-card {
        background-color: #f7f7f7;
        padding: 25px 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        border-radius: 4px;
        scroll-margin-top: 60px;
        /* スマホの追従ヘッダーに合わせた位置調整 */
    }

    #section-funeral-flow .flow-card-number {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #section-funeral-flow .flow-card-number .num-label {
        font-size: 9px;
        margin-bottom: 1px;
    }

    #section-funeral-flow .flow-card-number .num-value {
        font-size: 16px;
    }

    #section-funeral-flow .flow-card-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    #section-funeral-flow .flow-card-text {
        font-size: 13px;
        line-height: 1.6;
    }

    #section-funeral-flow .flow-arrow-separator {
        width: 20px;
        height: 20px;
        margin: 15px auto;
        position: relative;
    }

    #section-funeral-flow .flow-arrow-separator::before {
        content: "";
        position: absolute;
        top: 2px;
        left: 4px;
        width: 10px;
        height: 10px;
        border-bottom: 2px solid #b09b83;
        border-right: 2px solid #b09b83;
        transform: rotate(45deg);
    }
}







/* ==========================================================================
   PC Style (1024px ~) - Extra Fees Section
   ========================================================================== */
@media screen and (min-width: 1024px) {
    #section-plan-extra-fees {
        background-color: #f9f9f9;
        /* 流れと区別しやすくするため淡い背景色 */
        padding: 90px 0;
        font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif;
        color: #333333;
    }

    #section-plan-extra-fees .fees-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 40px;
    }

    /* メインタイトル */
    #section-plan-extra-fees .fees-main-title {
        font-size: 28px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 40px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #section-plan-extra-fees .fees-main-title::before,
    #section-plan-extra-fees .fees-main-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background-color: #dddddd;
        max-width: 150px;
    }

    #section-plan-extra-fees .fees-main-title span {
        padding: 0 30px;
        letter-spacing: 0.05em;
    }

    /* 導入説明文 */
    #section-plan-extra-fees .fees-intro-text {
        max-width: 900px;
        margin: 0 auto 60px auto;
        text-align: center;
        font-size: 15px;
        line-height: 1.8;
        letter-spacing: 0.02em;
    }

    #section-plan-extra-fees .fees-intro-text p {
        margin-bottom: 8px;
    }

    /* リスト構造 */
    #section-plan-extra-fees .fees-details-list {
        max-width: 960px;
        margin: 0 auto;
    }

    #section-plan-extra-fees .fees-detail-card {
        background-color: #ffffff;
        padding: 45px 50px;
        display: flex;
        align-items: flex-start;
        /* 上揃えに変更（文章量多いため） */
        gap: 40px;
        border-radius: 6px;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.02);
    }

    /* 左側バッジ：CASE表示 */
    #section-plan-extra-fees .fees-card-number {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    #section-plan-extra-fees .fees-card-number .num-label {
        font-size: 11px;
        line-height: 1;
        margin-bottom: 3px;
        letter-spacing: 0.05em;
    }

    #section-plan-extra-fees .fees-card-number .num-value {
        font-size: 26px;
        font-weight: bold;
        line-height: 1;
        font-family: 'Times New Roman', serif;
    }

    /* 右側テキストコンテンツ */
    #section-plan-extra-fees .fees-card-content {
        flex: 1;
    }

    #section-plan-extra-fees .fees-card-title {
        font-size: 21px;
        font-weight: 500;
        margin-bottom: 18px;
        letter-spacing: 0.03em;
        line-height: 1.4;
    }

    #section-plan-extra-fees .fees-card-text {
        font-size: 15px;
        line-height: 1.75;
        color: #444444;
    }

    #section-plan-extra-fees .fees-card-text strong {
        color: #b33e3e;
        /* 金額強調を上品な赤に */
        font-weight: 600;
    }

    #section-plan-extra-fees .fees-card-text-notice {
        font-size: 13px;
        color: #777777;
        margin-top: 10px;
    }

    #section-plan-extra-fees .fees-card-notes-block {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed #e0e0e0;
        font-size: 13px;
        color: #666666;
        line-height: 1.6;
    }

    /* ----------------------------------------------------------------------
       CASE 01 特殊仕様：左右2カラムの火葬料金表レイアウト
       ---------------------------------------------------------------------- */
    #section-plan-extra-fees .cremation-flex-wrapper {
        display: flex;
        gap: 40px;
        align-items: center;
        margin-top: 10px;
    }

    #section-plan-extra-fees .cremation-text-side {
        flex: 1.2;
    }

    #section-plan-extra-fees .cremation-table-side {
        flex: 0.8;
        background-color: #fcfbfa;
        border: 1px solid #e2deda;
        border-radius: 4px;
        overflow: hidden;
    }

    #section-plan-extra-fees .cremation-table-side .table-title {
        color: #ffffff;
        text-align: center;
        padding: 10px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.05em;
    }

    #section-plan-extra-fees .cremation-table-side .table-row {
        display: flex;
        border-bottom: 1px solid #e2deda;
    }

    #section-plan-extra-fees .cremation-table-side .table-row:last-child {
        border-bottom: none;
    }

    #section-plan-extra-fees .cremation-table-side .table-label {
        background-color: #b09b83;
        /* 薄いベージュ */
        color: white;
        padding: 12px 15px;
        font-size: 13px;
        font-weight: 600;
        width: 100px;
        display: flex;
        align-items: center;
    }

    #section-plan-extra-fees .cremation-table-side .table-value {
        background-color: #ffffff;
        padding: 12px 20px;
        font-size: 15px;
        font-weight: bold;
        flex: 1;
        text-align: right;
    }

    /* 区切り矢印 */
    #section-plan-extra-fees .fees-arrow-separator {
        width: 30px;
        height: 30px;
        margin: 25px auto;
        position: relative;
    }

    #section-plan-extra-fees .fees-arrow-separator::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        width: 16px;
        height: 16px;
        border-bottom: 2px solid #ccd0d4;
        border-right: 2px solid #ccd0d4;
        transform: rotate(45deg);
    }
}

/* ==========================================================================
   Tablet Style (768px ~ 1023px) - Extra Fees Section
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #section-plan-extra-fees {
        background-color: #f9f9f9;
        padding: 70px 0;
        font-family: "Noto Serif JP", serif;
    }

    #section-plan-extra-fees .fees-container {
        padding: 0 30px;
    }

    #section-plan-extra-fees .fees-main-title {
        font-size: 24px;
        margin-bottom: 35px;
    }

    #section-plan-extra-fees .fees-intro-text {
        font-size: 14px;
        margin-bottom: 45px;
    }

    #section-plan-extra-fees .fees-detail-card {
        padding: 35px 35px;
        gap: 30px;
    }

    #section-plan-extra-fees .fees-card-number {
        width: 75px;
        height: 75px;
    }

    #section-plan-extra-fees .fees-card-title {
        font-size: 19px;
    }

    #section-plan-extra-fees .cremation-flex-wrapper {
        flex-direction: column;
        /* タブレット幅で縦積みへ安全にシフト */
        gap: 20px;
    }

    #section-plan-extra-fees .cremation-table-side {
        width: 100%;
    }

    #section-plan-extra-fees .fees-arrow-separator {
        margin: 20px auto;
    }
}

/* ==========================================================================
   Smartphone Style (~ 767px) - Extra Fees Section
   ========================================================================== */
@media screen and (max-width: 767px) {
    #section-plan-extra-fees {
        background-color: #f9f9f9;
        padding: 50px 0;
        font-family: "Noto Serif JP", serif;
        color: #333333;
    }

    #section-plan-extra-fees .fees-container {
        padding: 0 20px;
    }

    #section-plan-extra-fees .fees-main-title {
        font-size: 20px;
        margin-bottom: 25px;
    }

    #section-plan-extra-fees .fees-main-title::before,
    #section-plan-extra-fees .fees-main-title::after {
        display: none;
    }

    #section-plan-extra-fees .fees-intro-text {
        font-size: 13.5px;
        line-height: 1.6;
        text-align: left;
        margin-bottom: 35px;
    }

    #section-plan-extra-fees .fees-detail-card {
        padding: 25px 20px;
        flex-direction: column;
        /* 縦積みレイアウト */
        gap: 15px;
    }

    #section-plan-extra-fees .fees-card-number {
        width: 65px;
        height: 65px;
    }

    #section-plan-extra-fees .fees-card-number .num-value {
        font-size: 20px;
    }

    #section-plan-extra-fees .fees-card-title {
        font-size: 17px;
        margin-bottom: 10px;
    }

    #section-plan-extra-fees .fees-card-text {
        font-size: 13.5px;
        line-height: 1.6;
    }

    /* CASE 01 スマホ用最適化 */
    #section-plan-extra-fees .cremation-flex-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    #section-plan-extra-fees .cremation-table-side {
        width: 100%;
    }

    #section-plan-extra-fees .cremation-table-side .table-label {
        width: 85px;
        padding: 10px;
        font-size: 12px;
    }

    #section-plan-extra-fees .cremation-table-side .table-value {
        padding: 10px 15px;
        font-size: 14px;
    }

    #section-plan-extra-fees .fees-arrow-separator {
        width: 20px;
        height: 20px;
        margin: 15px auto;
    }

    #section-plan-extra-fees .fees-arrow-separator::before {
        width: 10px;
        height: 10px;
    }
}





/* ==========================================================================
   商品説明セクション（2カラム・カードレイアウト）
   ========================================================================== */
#section-product-description {
    background-color: #eeebe6;
    /* 添付画像に合わせた上品な淡いウォームグレー */
    padding: 80px 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

#section-product-description .product-desc-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 導入・ヘッダー部分 */
#section-product-description .product-desc-header {
    text-align: center;
    margin-bottom: 60px;
}

#section-product-description .product-desc-en {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #2c2a29;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

#section-product-description .product-desc-title {
    font-size: 36px;
    font-weight: 600;
    color: #2c2a29;
    margin: 0 0 24px 0;
    letter-spacing: 0.1em;
}

#section-product-description .product-desc-lead {
    max-width: 780px;
    margin: 0 auto;
    font-size: 14.5px;
    line-height: 1.8;
    color: #333333;
    text-align: left;
}

/* 2カラムGrid配置 */
#section-product-description .product-desc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* 各商品カード */
#section-product-description .product-desc-card {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    box-sizing: border-box;
}

/* アイコン側（左側） */
#section-product-description .product-desc-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background-color: #8c2a12;
    /* 茶色系の背景（パス設定までのダミー色、不要なら削除可） */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

#section-product-description .product-desc-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* コンテンツ側（右側） */
#section-product-description .product-desc-content {
    flex-grow: 1;
}

#section-product-description .product-item-name {
    font-size: 18px;
    font-weight: 600;
    color: #2c2a29;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* プランタグの並び */
#section-product-description .product-plan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

#section-product-description .p-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1.2;
    background-color: #ffffff;
    display: inline-block;
}

#section-product-description .p-tag small {
    font-size: 9px;
    font-weight: normal;
}

/* 各プランの固有色テーマを反映（流れタグと同じ配色） */
#section-product-description .p-tag.tag-kasoshiki {
    border: 1px solid #c58d2c;
    color: #c58d2c;
}

#section-product-description .p-tag.tag-chokuso {
    border: 1px solid #8e727e;
    color: #8e727e;
}

#section-product-description .p-tag.tag-itinitiso {
    border: 1px solid #7b839b;
    color: #7b839b;
}

#section-product-description .p-tag.tag-kazokuso {
    border: 1px solid #8b8f52;
    color: #8b8f52;
}

/* 商品説明文 */
#section-product-description .product-item-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: #555555;
    margin: 0;
}

/* ==========================================================================
   レスポンシブ（タブレット・スマホ対応：1カラム化）
   ========================================================================== */
@media screen and (max-width: 900px) {
    #section-product-description {
        padding: 50px 0;
    }

    #section-product-description .product-desc-grid {
        grid-template-columns: 1fr;
        /* 画面が狭くなったら1カラムに綺麗に落とす */
        gap: 15px;
    }

    #section-product-description .product-desc-title {
        font-size: 28px;
    }

    #section-product-description .product-desc-card {
        padding: 18px;
        gap: 15px;
    }
}











/* ==========================================================================
   #hall_pg スタイル基盤
   ========================================================================== */
#hall_pg {
    width: 100%;
    background-color: #ffffff;
    color: #333333;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.8;
    letter-spacing: 0.03em;
    overflow-x: hidden;
}

#hall_pg img {
    max-width: 100%;
    height: auto;
    display: block;
}

.hall-header-title {
    text-align: center;
    padding: 120px 0 40px 0;
    font-size: 24px;
}

.hall-header-title h2 {
    font-weight: 100;
    ;
}

/* ==========================================================================
   流動的レイアウト（外観・内観・付帯設備）
   ========================================================================== */
#hall_pg .hall-fluid-section {
    width: 100%;
    box-sizing: border-box;
}

#hall_pg .hall-fluid-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

/* 画像ブロック（左・右共通の基本サイズ） */
#hall_pg .hall-fluid__media {
    width: 53%;
    flex-shrink: 0;
}

/* テキストブロック（左・右共通の基本サイズ） */
#hall_pg .hall-fluid__content {
    width: 39%;
    box-sizing: border-box;
    padding-top: 200px;
}

/* --------------------------------------------------------------------------
   各ブロックの個別配置調整（テキストや画像ブロック自体の高低差）
   -------------------------------------------------------------------------- */

/* ③ 外観ブロック (左画像・右テキスト) */
#hall_pg .-gaikan-block {
    padding-top: 60px;
    padding-bottom: 50px;
}

#hall_pg .-gaikan-block .hall-fluid__content {}

/* ④ 内観ブロック (左テキスト・右画像) */
#hall_pg .-naikan-block {
    padding-top: 120px;
    padding-bottom: 90px;
}

#hall_pg .-naikan-block .hall-fluid__media {
    width: 53%;

}

#hall_pg .-naikan-block .hall-fluid__content {
    margin-top: 0;
}

/* ⑤ 付帯設備ブロック (左画像・右テキスト) */
#hall_pg .-lobby-block {
    padding-top: 40px;
    padding-bottom: 140px;
}

#hall_pg .-lobby-block .hall-fluid__content {
    margin-top: -20px;
}

/* --------------------------------------------------------------------------
   テキスト装飾（共通）
   -------------------------------------------------------------------------- */
#hall_pg .hall-fluid__sub {
    font-size: 11px;
    color: #b0a9a4;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
}

#hall_pg .hall-fluid__title {
    font-size: 24px;
    font-weight: normal;
    color: #222222;
    margin-bottom: 20px;
}

#hall_pg .hall-fluid__desc {
    font-size: 16px;
    color: #555555;
    line-height: 1.9;
    text-align: justify;
}


/* ==========================================================================
   スライダー用・共通4連ナビゲーション（サイズ一律＆隙間固定版）
   Slickの自動横幅計算を打ち消し、全スライダー共通で一律のサイズ・余白にします
   ========================================================================== */

/* メイン画像を表示するエリア */
#hall_pg [class^="slider-main-"] {
    width: 100%;
    margin-bottom: 12px;
}

#hall_pg [class^="slider-main-"] .slider-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* 下の4連サムネイル画像を並べるコンテナ */
#hall_pg [class^="slider-nav-"] {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    /* ★サムネイル同士の間の隙間を一律8pxに固定 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
    max-width: 700px !important;
}

/* Slickが自動生成するトラックやリストの幅制限を解除し隙間を有効化 */
#hall_pg [class^="slider-nav-"] .slick-list,
#hall_pg [class^="slider-nav-"] .slick-track {
    display: flex !important;
    gap: 8px !important;
    /* 内部トラックにも等しく隙間を適用 */
    width: auto !important;
    transform: none !important;
}

/* サムネイル1枚あたるの親枠（サイズの一律固定） */
#hall_pg [class^="slider-nav-"] .nav-item,
#hall_pg [class^="slider-nav-"] .slick-slide {
    width: 80px !important;
    /* ★スライダーの種類に関わらず横幅を一律60pxに固定 */
    max-width: 80px !important;
    height: 60px !important;
    /* ★高さを一律40pxに固定 */
    margin: 0 !important;
    /* Slickの余計なマージンをリセット */
    padding: 0 !important;
    cursor: pointer;
    box-sizing: border-box !important;
    overflow: hidden;
    flex-shrink: 0 !important;
}

/* サムネイルの画像自体の調整 */
#hall_pg [class^="slider-nav-"] .nav-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* 画像の比率が違っても枠内に綺麗に収める */
    border: 1px solid #dcdcdc !important;
    transition: all 0.2s ease;
    opacity: 0.7;
}

/* サムネイルにマウスを乗せたとき */
#hall_pg [class^="slider-nav-"] .nav-item:hover img {
    opacity: 1;
}

/* 現在選択中のアクティブなサムネイルの枠線 */
#hall_pg [class^="slider-nav-"] .slick-current img,
#hall_pg [class^="slider-nav-"] .nav-item.is-active img {
    border-color: #cca566 !important;
    opacity: 1;
}


/* ==========================================================================
   ⑥ プラン別施設案内エリア（背景薄グレーの帯：画像左・テキスト右の等倍配置）
   ========================================================================== */
#hall_pg .hall-section {
    padding: 80px 0;
    width: 100%;
}

#hall_pg .hall-section.-white {
    background-color: #ffffff;
}

#hall_pg .hall-section.-gray-zone {
    background-color: #f4f4f2;
}

#hall_pg .hall-section .m-bottom-deep {
    margin-bottom: 80px;
}

#hall_pg .hall-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

#hall_pg .layout-left-img {
    flex-direction: row;
}

#hall_pg .hall-spatial__media {
    width: 52%;
    flex-shrink: 0;
}

#hall_pg .hall-spatial__content {
    width: 42%;
    padding-top: 10px;
    box-sizing: border-box;
    padding-top: 140px;
}

#hall_pg .hall-spatial__sub {
    font-size: 11px;
    color: #aaa;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}

#hall_pg .hall-spatial__title {
    font-size: 22px;
    font-weight: normal;
    color: #222222;
    margin-bottom: 15px;
}

#hall_pg .hall-spatial__desc {
    font-size: 13.5px;
    color: #555555;
    line-height: 1.85;
}


/* ==========================================================================
   その他下部共通（基本情報テーブル・360度ビュー・GoogleMap）
   ========================================================================== */
#hall_pg .hall-container-center {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

#hall_pg .section-title-direct {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 0.1em;
}

/* 360度ビュー */
#hall_pg .vr-content-wrapper {
    width: 100%;
    margin-bottom: 20px;
}

/* 基本情報テーブル */
#hall_pg .hall-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#hall_pg .hall-info-table tr {
    border-bottom: 1px solid #e0e0e0;
}

#hall_pg .hall-info-table th {
    width: 25%;
    text-align: left;
    padding: 15px 10px;
    font-size: 14px;
    font-weight: normal;
    color: #333;
}

#hall_pg .hall-info-table td {
    padding: 15px 10px;
    font-size: 14px;
    color: #555;
}

/* GoogleMap */
#hall_pg .-map-zone {
    padding: 0;
}

#hall_pg .map-iframe-wrapper iframe {
    width: 100% !important;
    height: 450px !important;
    border: none;
    display: block;
}


/* ==========================================================================
   レスポンシブ (スマートフォン表示)
   ========================================================================== */
@media screen and (max-width: 767px) {
    #hall_pg .hall-fluid-section {
        padding: 40px 0 !important;
    }

    #hall_pg .hall-fluid-container {
        flex-direction: column !important;
    }

    #hall_pg .hall-fluid__media,
    #hall_pg .hall-fluid__content {
        width: 100% !important;
        margin-top: 0 !important;
    }

    #hall_pg .hall-fluid__content {
        margin-top: 25px !important;
        padding: 0 5px;
    }

    /* スマホ画面でも均一なサイズと隙間（6px）を固定維持 */
    #hall_pg [class^="slider-nav-"] {
        max-width: 240px !important;
        gap: 6px !important;
        margin-top: 8px !important;
    }

    #hall_pg [class^="slider-nav-"] .slick-list,
    #hall_pg [class^="slider-nav-"] .slick-track {
        gap: 6px !important;
    }

    #hall_pg [class^="slider-nav-"] .nav-item,
    #hall_pg [class^="slider-nav-"] .slick-slide {
        width: 52px !important;
        max-width: 52px !important;
        height: 35px !important;
    }

    /* グレーゾーン（プラン別施設案内）のスマホ対応 */
    #hall_pg .hall-section {
        padding: 40px 0;
    }

    #hall_pg .hall-container {
        flex-direction: column !important;
    }

    #hall_pg .hall-spatial__media,
    #hall_pg .hall-spatial__content {
        width: 100% !important;
    }

    #hall_pg .hall-spatial__content {
        margin-top: 20px;
    }

    #hall_pg .hall-section .m-bottom-deep {
        margin-bottom: 40px;
    }

    /* 地図の高さスマホ調整 */
    #hall_pg .map-iframe-wrapper iframe {
        height: 300px !important;
    }
}








/* ==========================================================================
   .consultation_pg 内専用：クラス名を cons_pg_○○ に統一（最大幅1400px）
   ========================================================================== */

.consultation_pg .cons_pg_section {
    width: 100%;
    background-color: #ffffff;
    padding: 80px 0;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.8;
    letter-spacing: 0.03em;
    color: #333333;
}

.consultation_pg .cons_pg_container {
    max-width: 1400px;
    /* コンテンツ最大横幅を1400pxに設定 */
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   セクションタイトル（見出し左右の繊細なグレーライン）
   -------------------------------------------------------------------------- */
.consultation_pg .cons_pg_main_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: normal;
    color: #111111;
    margin-top: 0;
    margin-bottom: 60px;
    text-align: center;
    letter-spacing: 0.08em;
}

.consultation_pg .cons_pg_main_title::before,
.consultation_pg .cons_pg_main_title::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: #dbdbdb;
    max-width: 180px;
    /* 線の長さを上品に制限 */
}

.consultation_pg .cons_pg_main_title::before {
    margin-right: 30px;
}

.consultation_pg .cons_pg_main_title::after {
    margin-left: 30px;
}

/* --------------------------------------------------------------------------
   上部インフォメーション（画像とテキストの横並び設定）
   -------------------------------------------------------------------------- */
.consultation_pg .cons_pg_intro_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 40px;
}

.consultation_pg .cons_pg_intro_media {
    width: 35%;
    flex-shrink: 0;
    /* 画像の縮小を完全に防止 */
}

.consultation_pg .cons_pg_intro_media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.consultation_pg .cons_pg_intro_content {
    width: 65%;
    margin: 0 auto;
}

.consultation_pg .cons_pg_intro_text {
    font-size: 15px;
    color: #333333;
    line-height: 1.85;
    text-align: justify;
    margin: 0;
}

/* --------------------------------------------------------------------------
   下部4連グリッド（フレックスボックスで2列に整列）
   -------------------------------------------------------------------------- */
.consultation_pg .cons_pg_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    /* ボックス同士の縦横の隙間 */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.consultation_pg .cons_pg_card {
    width: calc(50% - 12px);
    /* 2つのボックスが等倍で綺麗に収まる計算 */
    background-color: #f5f5f5;
    /* イメージ通りの薄グレー背景 */
    padding: 45px 50px;
    box-sizing: border-box;
}

.consultation_pg .cons_pg_card_title {
    font-size: 21px;
    font-weight: normal;
    color: #5b4620;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 0.05em;
}

.consultation_pg .cons_pg_card_desc {
    font-size: 15px;
    color: #333333;
    line-height: 1.8;
    text-align: justify;
    margin: 0;
}

/* --------------------------------------------------------------------------
   レスポンシブ（スマートフォン表示）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .consultation_pg .cons_pg_section {
        padding: 50px 0;
    }

    .consultation_pg .cons_pg_container {
        padding: 0 20px;
    }

    .consultation_pg .cons_pg_main_title {
        font-size: 20px;
        margin-bottom: 40px;
    }

    .consultation_pg .cons_pg_main_title::before,
    .consultation_pg .cons_pg_main_title::after {
        max-width: 40px;
        margin-right: 15px;
        margin-left: 15px;
    }

    /* スマホ時は縦一列に配置 */
    .consultation_pg .cons_pg_intro_box {
        flex-direction: column;
        margin-bottom: 40px;
        gap: 20px;
    }

    .consultation_pg .cons_pg_intro_media {
        width: 100%;
    }

    .consultation_pg .cons_pg_intro_content {
        width: 100%;
    }

    .consultation_pg .cons_pg_intro_text {
        font-size: 14.5px;
    }

    /* 4枚のカードを縦1列に整列 */
    .consultation_pg .cons_pg_grid {
        flex-direction: column;
        gap: 16px;
    }

    .consultation_pg .cons_pg_card {
        width: 100%;
        padding: 30px 25px;
    }

    .consultation_pg .cons_pg_card_title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .consultation_pg .cons_pg_card_desc {
        font-size: 14px;
    }
}

.consultation_pg .fees-detail-card {
    margin-bottom: 40px;
}

.consultation_pg #section-plan-extra-fees .fees-card-title {
    color: #655236;
}





/* ==========================================================================
   .consultation_pg 内専用：「ご依頼後の流れ」3ステップ構成（最大幅1400px）
   ========================================================================== */

/* セクション全体の背景と余白（前のセクションと連続しても綺麗に見えるよう調整） */
.consultation_pg .cons_pg_section.-flow {
    width: 100%;
    background-color: #ffffff;
    padding: 100px 0;
    box-sizing: border-box;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", sans-serif;
    line-height: 1.8;
    letter-spacing: 0.03em;
    color: #333333;
}

.consultation_pg .cons_pg_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   上部ヘッダー（タイトル ＆ リード文）
   -------------------------------------------------------------------------- */
.consultation_pg .cons_pg_flow_header {
    text-align: center;
    margin-bottom: 60px;
}

.consultation_pg .cons_pg_flow_main_title {
    font-size: 28px;
    font-weight: normal;
    color: #222222;
    margin-top: 0;
    margin-bottom: 24px;
    letter-spacing: 0.08em;
}

.consultation_pg .cons_pg_flow_subtitle {
    font-size: 15px;
    color: #666666;
    line-height: 1.9;
    margin: 0;
}

/* --------------------------------------------------------------------------
   フローレイアウト（3連カード ＆ 矢印の並び）
   -------------------------------------------------------------------------- */
.consultation_pg .cons_pg_flow_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* カード1枚あたりの設計（3等分に最適化） */
.consultation_pg .cons_pg_flow_card {
    width: 30%;
    /* 3枚構成なので、矢印分の隙間を考慮して30%に設定 */
    background-color: #ffffff;
    border: 1px solid #e2e0da;
    /* イメージ通りの上品な薄いゴールド・ベージュ系枠線 */
    padding: 50px 40px 45px 40px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

/* ステップ番号 (01, 02, 03) */
.consultation_pg .cons_pg_flow_number {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #cca566;
    /* ゴールド系のテーマカラー */
    margin-bottom: 5px;
    position: relative;
}

/* 番号の下にある細いアンダーライン */
.consultation_pg .cons_pg_flow_number::after {
    content: "";
    display: block;
    width: 20px;
    height: 1.5px;
    background-color: #cca566;
    margin: 8px auto 0 auto;
}

/* カード内タイトル */
.consultation_pg .cons_pg_flow_card_title {
    font-size: 20px;
    font-weight: normal;
    color: #333333;
    margin-top: 15px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

/* カード内説明文 */
.consultation_pg .cons_pg_flow_card_desc {
    font-size: 14.5px;
    color: #555555;
    line-height: 1.8;
    text-align: justify;
    margin: 0;
}

/* --------------------------------------------------------------------------
   カード同士を繋ぐ矢印（CSSのみで美しく再現）
   -------------------------------------------------------------------------- */
.consultation_pg .cons_pg_flow_arrow {
    width: 16px;
    height: 16px;
    border-top: 2px solid #cca566;
    border-right: 2px solid #cca566;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin: 0 10px;
}

/* --------------------------------------------------------------------------
   レスポンシブ（スマートフォン表示：すべて縦並び化）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    .consultation_pg .cons_pg_flow_card {
        padding: 40px 25px;
    }

    .consultation_pg .cons_pg_flow_card_title {
        font-size: 18px;
    }
}

@media screen and (max-width: 767px) {
    .consultation_pg .cons_pg_section.-flow {
        padding: 60px 0;
    }

    .consultation_pg .cons_pg_container {
        padding: 0 20px;
    }

    .consultation_pg .cons_pg_flow_main_title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .consultation_pg .cons_pg_flow_subtitle {
        font-size: 13.5px;
        text-align: left;
    }

    /* スマホ時は縦並びに強制 */
    .consultation_pg .cons_pg_flow_flex {
        flex-direction: column;
        gap: 15px;
    }

    .consultation_pg .cons_pg_flow_card {
        width: 100%;
        padding: 35px 25px;
    }

    /* 矢印を「右向き」から「下向き」に反転させて間隔を整える */
    .consultation_pg .cons_pg_flow_arrow {
        transform: rotate(135deg);
        margin: 10px 0;
    }
}