/* ==================================================
   道南ペット霊園函館 スマートフォン専用CSS
   PC用の既存CSSは変更せず、このファイルだけ追加します。
   ================================================== */

/* 全画面共通：旧スマホサイト誘導の余白とバナーを無効化 */
body {
    padding-top: 0;
}
.splink {
    display: none;
}

/* PCでは、新しく追加したSPエリアを非表示 */
.sp-site {
    display: none;
}

/* 940px以下ではスマホ・タブレット専用表示に切り替える */
@media screen and (max-width: 940px) {

    html, body {
        height: auto;
    }
    body {
        background: #e2d1b3;
        text-align: left;
    }

    /* 既存のPC用サイトとフッターを隠す */
    #contentarea_bg,
    #footer_bg {
        display: none;
    }

    .sp-site {
        display: block;
        color: #222;
        font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
                     'メイリオ', Meiryo, sans-serif;
        font-size: 14px;
        line-height: 1.65;
        padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }
    .sp-site,
    .sp-site *,
    .sp-site *::before,
    .sp-site *::after {
        box-sizing: border-box;
    }
    .sp-site img {
        max-width: 100%;
            height: auto;
    display: block;
    margin: 0 auto;
    }
    .sp-site p {
        font-size: 13px;
        line-height: 1.65;
    }

    /* ----------------------------------------------
       ヘッダー
       ---------------------------------------------- */
    .sp-header {
        position: sticky;
        top: 0;
        z-index: 1100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 56px;
        padding: 4px 18px 4px 22px;
        background: #f4e8d7;
        border-bottom: 3px solid #dcc6a4;
    }
    .sp-header-logo {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        color: #d96837;
        text-decoration: none;
    }
    .sp-header-logo:visited,
    .sp-header-logo:hover {
        color: #d96837;
        text-decoration: none;
    }
    .sp-header-logo img {
        flex: none;
        width: 100%;
        height: 65px;
        margin-left: -10px;
       
        object-fit: contain;
         object-position: left center;
    }
    .sp-header-logo span {
        overflow: hidden;
        font-size: 15px;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .sp-menu-button {
        display: flex;
        flex: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 6px;
        margin-left: 10px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }
    .sp-menu-button span {
        display: block;
        width: 100%;
        height: 4px;
        background: #595959;
    }

    /* ハンバーガーを押すと開くメニュー */
    .sp-navigation {
        display: none;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        z-index: 1050;
        max-height: calc(100dvh - 126px);
        overflow-y: auto;
        background: #f4e8d7;
        box-shadow: 0 5px 8px rgba(0, 0, 0, .18);
    }
    .sp-navigation.is-open {
        display: block;
    }
    .sp-navigation ul {
        list-style: none;
        padding: 4px 20px 12px;
        margin: 0;
        font-size: 14px;
    }
    .sp-navigation li + li {
        border-top: 1px solid #ddc9b1;
    }
    .sp-navigation a {
        display: block;
        padding: 13px 8px;
        color: #612c03;
        font-weight: bold;
        text-decoration: none;
    }

    /* ----------------------------------------------
       ファーストビュー
       ---------------------------------------------- */
    .sp-fv {
        position: relative;
        height: 200px;
        overflow: hidden;
        background: #b7a184;
    }
    .sp-fv-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .sp-fv::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,.55), transparent 60%);
        pointer-events: none;
    }
    .sp-fv-text {
        position: absolute;
        right: 10px;
        bottom: 13px;
        left: 10px;
        z-index: 1;
        text-align: right;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0,0,0,.7);
    }
    .sp-fv h1 {
        float: none;
        margin: 0;
        color: #fff;
        font-size: clamp(15px, 4.4vw, 22px);
        font-weight: bold;
        line-height: 1.2;
        text-align: right;
    }
    .sp-fv p {
        margin-top: 4px;
        color: #fff;
        font-size: clamp(9px, 2.4vw, 11px);
        line-height: 1.3;
        text-align: right;
    }

    /* ----------------------------------------------
       白い本文エリア・冒頭の挨拶
       ---------------------------------------------- */
    .sp-content {
        width: calc(100% - 44px);
        max-width: 620px;
        margin: 14px auto 0;
        padding: 15px 34px 36px;
        background: #fff;
        box-shadow: 0 0 6px rgba(80, 55, 20, .1);
    }
    .sp-intro-visual {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 165px;
        overflow: hidden;
    }
    .sp-intro-image {
        position: absolute;
        top: 0;
        right: 0;
        width: 82%;
        height: 100%;
        object-fit: cover;

    }
    .sp-intro-title {
        position: relative;
        z-index: 1;
        padding: 10px 0;
    }
    .sp-intro-logo {
        display: block;
        width: 75px;
        height: auto;
        margin-bottom: 8px;
    }
    .sp-intro-title p {
        color: #d95d37;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.8;
    }
    .sp-intro-message {
        margin: 10px 0 17px;
        text-align: center;
    }
    .sp-intro-message p {
        font-size: 13px;
        font-weight: bold;
        line-height: 1.55;
    }
    .sp-intro-message p + p {
        margin-top: 7px;
    }

    /* ----------------------------------------------
       各セクション
       ---------------------------------------------- */
    .sp-section {
        border-top: 1px solid #f0806a;
        padding: 24px 0 22px;
    }
    .sp-section-title {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px 10px;
        margin: 0 0 12px;
        color: #dc603c;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
    }
    .sp-section-title .sp-plus {
        flex: none;
        color: #e7784a;
        font-size: 23px;
        line-height: 1;
    }
    .sp-section-title small {
        font-size: 11px;
        font-weight: normal;
    }
    .sp-section-lead {
        margin-bottom: 8px;
        font-weight: bold;
    }
    .sp-service-list,
    .sp-trust-list {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 13px;
        line-height: 1.65;
    }
    .sp-service-list li,
    .sp-trust-list li {
        position: relative;
        padding-left: 14px;
    }
    .sp-service-list li::before {
        content: '●';
        position: absolute;
        left: 0;
    }
    .sp-trust-list li::before {
        content: '■';
        position: absolute;
        left: 0;
    }
    .sp-note {
        margin-top: 10px;
        color: #e97866;
        font-size: 11px !important;
    }
    .sp-area-text {
        line-height: 1.8;
    }
    .sp-section-last p + p {
        margin-top: 10px;
    }

    /* ----------------------------------------------
       お客様からの声
       ---------------------------------------------- */
    .sp-voice-list {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .sp-voice-item {
        display: flex;
        align-items: center;
        min-height: 68px;
        padding: 5px 8px;
        border: 1px solid #e96d54;
        border-radius: 5px;
    }
    .sp-voice-person {
        flex: 0 0 62px;
        text-align: center;
        color: #e96d54;
        font-size: 10px;
    }
    .sp-voice-person img {
        display: block;
        width: 40px;
        height: 40px;
        margin: 0 auto;
        object-fit: contain;
    }
    .sp-voice-person span {
        display: block;
        line-height: 1.2;
    }
    .sp-voice-item p {
        color: #777;
        font-size: 12px;
        line-height: 1.5;
    }

    /* ----------------------------------------------
       フッター
       ---------------------------------------------- */
    .sp-footer {
        padding: 14px 14px 20px;
        background: #612c03;
        text-align: center;
        color: #fff;
    }
    .sp-footer-logo {
        display: block;
        width: 280px;
        height: auto;
        margin: 0 auto 7px;
    }
    .sp-footer p {
        color: #fff;
        font-size: 13px;
        line-height: 1.6;
    }
    .sp-footer .sp-copyright {
        margin-top: 12px;
        font-size: 8px;
    }

    /* ----------------------------------------------
       画面下に常時固定する電話ボタン
       ---------------------------------------------- */
    .sp-fixed-tel {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1200;
        padding-bottom: env(safe-area-inset-bottom);
        background: #fff;
        box-shadow: 0 -2px 6px rgba(0,0,0,.15);
    }
    .sp-fixed-tel-link {
        display: flex;
        min-height: 68px;
        color: #de5e3d;
        text-decoration: none;
    }
    .sp-fixed-tel-link:visited,
    .sp-fixed-tel-link:hover {
        color: #de5e3d;
        text-decoration: none;
    }
    .sp-fixed-tel-number {
        display: flex;
        flex: 0 0 51%;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        padding: 6px 3px;
        background: #fff;
    }
    .sp-tel-icon {
        flex: none;
        color: #e05c3e;
        font-size: 30px;
        line-height: 1;
    }
    .sp-tel-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
        line-height: 1.2;
    }
    .sp-tel-info strong {
        font-size: clamp(15px, 4.5vw, 21px);
        white-space: nowrap;
    }
    .sp-tel-info small {
        color: #222;
        font-size: 11px;
        white-space: nowrap;
    }
    .sp-fixed-tel-message {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        padding: 6px 7px;
        background: #50745B;
        color: #fff;
        font-size: clamp(10px, 2.8vw, 13px);
        line-height: 1.45;
    }
}

/* 小さめのスマホでは左右余白と文字を少し縮める */
@media screen and (max-width: 359px) {
    .sp-content {
        width: calc(100% - 28px);
        padding-right: 20px;
        padding-left: 20px;
    }
    .sp-header {
        padding-right: 12px;
        padding-left: 12px;
    }
    .sp-header-logo span {
        font-size: 12px;
    }
    .sp-tel-info small {
        font-size: 9px;
    }
    .sp-tel-icon {
        font-size: 25px;
    }
}


/* ==========================================
   スマホ用 全画面ナビゲーション
   ========================================== */

@media screen and (max-width: 940px) {

    /* メニュー全体を画面いっぱいに表示 */
    .sp-navigation {
        position: fixed;
        inset: 0;
        z-index: 1500;

        width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: none;

        padding: 60px 0 30px;

        background: #CC6345;
        box-shadow: none;
        overflow-y: auto;
    }

    /* メニューを開いた状態 */
    .sp-navigation.is-open {
        display: flex;
        flex-direction: column;
    }

    /* メニューの並び */
    .sp-navigation ul {
        width: 100%;
        margin: auto 0;
        padding: 0;
        list-style: none;
    }

    .sp-navigation li {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 65px;
        border: none;
    }

    .sp-navigation li + li {
        border: none;
    }

    /* メニューの文字 */
    .sp-navigation a,
    .sp-navigation a:visited,
    .sp-navigation a:hover {
        display: block;
        padding: 12px 16px;

        color: #FFFFFF;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
        text-decoration: none;
    }

    /* 最初の「トップページ」を「TOP」と表示 */
    .sp-navigation li:first-child a {
        font-size: 0;
    }

    .sp-navigation li:first-child a::before {
        content: "TOP";
        font-size: 18px;
    }


    /* ======================================
       メニュー表示中のヘッダー
       ====================================== */

    .sp-header:has(.sp-menu-button[aria-expanded="true"]) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 1600;

        width: 100%;
        height: 56px;
        padding: 0 26px 0 32px;

        background: #CC6345;
        border: none;
    }

    /* ロゴ横のサイト名を白くする */
    .sp-header:has(.sp-menu-button[aria-expanded="true"])
    .sp-header-logo,
    .sp-header:has(.sp-menu-button[aria-expanded="true"])
    .sp-header-logo:visited {
        color: #FFFFFF;
    }

    /* ロゴ画像を白色にする */
    .sp-header:has(.sp-menu-button[aria-expanded="true"])
    .sp-header-logo img {
        filter: brightness(0) invert(1);
    }

    /* ======================================
       閉じる（×）ボタン
       ====================================== */

    .sp-menu-button[aria-expanded="true"] {
        position: relative;
        left: 14px;

        width: 50px;
        height: 56px;
        margin: 0;
        padding: 0;

        
        border-radius: 0 0 4px 4px;
    }

    /* 3本線を重ねる */
    .sp-menu-button[aria-expanded="true"] span {
        position: absolute;
        top: 26px;
        left: 10px;

        width: 30px;
        height: 4px;

        background: #FFFFFF;
        border-radius: 2px;
    }

    /* 1本目を斜めに */
    .sp-menu-button[aria-expanded="true"] span:nth-child(1) {
        transform: rotate(45deg);
    }

    /* 真ん中の線を消す */
    .sp-menu-button[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    /* 3本目を逆方向に */
    .sp-menu-button[aria-expanded="true"] span:nth-child(3) {
        transform: rotate(-45deg);
    }

    /* メニュー表示中は背景をスクロールさせない */
    body:has(.sp-navigation.is-open) {
        overflow: hidden;
    }

}

/* 小さな画面ではヘッダーの左右余白を調整 */
@media screen and (max-width: 359px) {

    .sp-header:has(.sp-menu-button[aria-expanded="true"]) {
        padding-left: 12px;
        padding-right: 12px;
    }

}


/* ==========================================
   ご料金ページ スマートフォン専用CSS
   ========================================== */

@media screen and (max-width: 940px) {

    /* ページタイトル */
    .sp-price-page .sp-price-hero {
        padding: 35px 25px;
        background: #CC6345;
        color: #FFFFFF;
        text-align: left;
    }

    .sp-price-page .sp-price-hero span {
        display: block;
        color: #FFE5D8;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .sp-price-page .sp-price-hero h1 {
        float: none;
        margin: 8px 0 12px;
        color: #FFFFFF;
        font-size: 25px;
        font-weight: bold;
        line-height: 1.4;
    }

    .sp-price-page .sp-price-hero p {
        color: #FFFFFF;
        font-size: 13px;
        line-height: 1.7;
    }


    /* メインコンテンツ */
    .sp-price-page .sp-price-content {
        width: calc(100% - 28px);
        max-width: 760px;
        margin: 15px auto 25px;
        padding: 25px 18px 35px;
        background: #FFFFFF;
    }


    /* セクション */
    .sp-price-page .sp-price-section {
        margin-bottom: 35px;
    }

    .sp-price-page .sp-price-section + .sp-price-section {
        padding-top: 30px;
        border-top: 1px solid #ED9B84;
    }

    .sp-price-page .sp-price-title {
        margin-bottom: 12px;
        padding-left: 12px;
        border-left: 5px solid #E7784A;
        color: #D45E3D;
        font-size: 21px;
        font-weight: bold;
        line-height: 1.5;
    }

    .sp-price-page .sp-price-description {
        margin-bottom: 10px;
        color: #333333;
        font-size: 13px;
        line-height: 1.7;
    }

    .sp-price-page .sp-price-attention {
        display: inline-block;
        margin: 10px 0;
        padding: 7px 12px;
        border: 1px solid #D76A48;
        background: #FFF5EF;
        color: #B94628;
        font-size: 12px;
        font-weight: bold;
    }

    .sp-price-page .sp-price-subtitle {
        margin: 25px 0 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #E8D3C1;
        color: #C35B38;
        font-size: 16px;
        font-weight: bold;
    }


    /* 料金カードの並び */
    .sp-price-page .sp-price-grid,
    .sp-price-page .sp-urn-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }


    /* 火葬料金カード */
    .sp-price-page .sp-price-card {
        overflow: hidden;
        border: 1px solid #E3D4C6;
        border-radius: 6px;
        background: #FFFFFF;
    }

    .sp-price-page .sp-price-card h4 {
        padding: 12px 13px 5px;
        background: #FBF1E6;
        color: #9E452C;
        font-size: 17px;
        font-weight: bold;
    }

    .sp-price-page .sp-price-card h4 small {
        margin-left: 5px;
        color: #755B48;
        font-size: 12px;
        font-weight: normal;
    }

    .sp-price-page .sp-price-kind {
        padding: 0 13px 10px;
        background: #FBF1E6;
        color: #766658;
        font-size: 12px;
    }

    .sp-price-page .sp-price-card ul {
        margin: 0;
        padding: 8px 12px;
        list-style: none;
    }

    .sp-price-page .sp-price-card li {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 2px;
        border-bottom: 1px solid #F0E8E0;
    }

    .sp-price-page .sp-price-card li:last-child {
        border-bottom: none;
    }

    .sp-price-page .sp-price-card li span {
        color: #554A43;
        font-size: 12px;
        white-space: nowrap;
    }

    .sp-price-page .sp-price-card li strong {
        color: #352B26;
        font-size: 18px;
        font-weight: bold;
        white-space: nowrap;
    }

    /* 立会個別火葬の金額を強調 */
    .sp-price-page .sp-price-card li:first-child strong {
        color: #D15E39;
    }


    /* 注意書き */
    .sp-price-page .sp-price-notes {
        margin-top: 18px;
        padding: 14px;
        border: 1px solid #E8DFD7;
        background: #FBF8F4;
    }

    .sp-price-page .sp-price-notes p {
        margin-bottom: 7px;
        color: #635449;
        font-size: 12px;
        line-height: 1.8;
    }

    .sp-price-page .sp-price-notes p:last-child {
        margin-bottom: 0;
    }


    /* 骨壷・骨入れカード */
    .sp-price-page .sp-urn-grid {
        margin-top: 18px;
    }

    .sp-price-page .sp-urn-card {
        overflow: hidden;
        border: 1px solid #E3D4C6;
        border-radius: 6px;
        background: #FFFFFF;
    }

    .sp-price-page .sp-urn-card h3 {
        padding: 12px 13px;
        background: #FBF1E6;
        color: #9E452C;
        font-size: 17px;
        font-weight: bold;
    }

    .sp-price-page .sp-urn-card h3 small {
        margin-left: 5px;
        color: #755B48;
        font-size: 12px;
        font-weight: normal;
    }

    .sp-price-page .sp-urn-card ul {
        margin: 0;
        padding: 8px 12px;
        list-style: none;
    }

    .sp-price-page .sp-urn-card li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 8px;
        padding: 9px 2px;
        border-bottom: 1px solid #F0E8E0;
    }

    .sp-price-page .sp-urn-card li:last-child {
        border-bottom: none;
    }

    .sp-price-page .sp-urn-card li span {
        color: #554A43;
        font-size: 11px;
    }

    .sp-price-page .sp-urn-card li strong {
        color: #BC5736;
        font-size: 15px;
        font-weight: bold;
        white-space: nowrap;
    }


    /* 納骨・供養 */
    .sp-price-page .sp-memorial-list {
        margin-top: 15px;
    }

    .sp-price-page .sp-memorial-item {
        padding: 16px 13px;
        border-bottom: 1px solid #EDE0D5;
        background: #FFFFFF;
    }

    .sp-price-page .sp-memorial-item:nth-child(even) {
        background: #FDF7F0;
    }

    .sp-price-page .sp-memorial-item h3 {
        margin-bottom: 5px;
        color: #66452F;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-price-page .sp-memorial-item p {
        margin-bottom: 5px;
        color: #6B5D54;
        font-size: 12px;
    }

    .sp-price-page .sp-memorial-item strong {
        display: block;
        margin-top: 5px;
        color: #BF5839;
        font-size: 16px;
        font-weight: bold;
    }


    /* お問い合わせ案内 */
    .sp-price-page .sp-price-contact {
        margin-top: 30px;
        padding: 24px 15px;
        background: #FBF1E6;
        text-align: center;
    }

    .sp-price-page .sp-price-contact p {
        color: #674E3F;
        font-size: 13px;
        line-height: 1.8;
    }

    .sp-price-page .sp-price-contact a {
        display: block;
        max-width: 330px;
        margin: 15px auto;
        padding: 12px;
        border-radius: 5px;
        background: #D95D3D;
        color: #FFFFFF;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.5;
        text-decoration: none;
    }

    .sp-price-page .sp-price-contact a strong {
        font-size: 22px;
    }

}


/* タブレットではカードを2列に */
@media screen and (min-width: 650px) and (max-width: 940px) {

    .sp-price-page .sp-price-grid,
    .sp-price-page .sp-urn-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* 幅の狭いスマホ用微調整 */
@media screen and (max-width: 359px) {

    .sp-price-page .sp-price-content {
        width: calc(100% - 20px);
        padding-left: 12px;
        padding-right: 12px;
    }

    .sp-price-page .sp-price-card li strong {
        font-size: 16px;
    }

    .sp-price-page .sp-price-card li span {
        font-size: 11px;
    }

}


/* ==========================================
   霊園のご案内ページ専用
   ========================================== */

@media screen and (max-width: 940px) {

    /* --------------------------------------
       ページタイトル
       -------------------------------------- */

    .sp-info-page .sp-info-hero {
        padding: 38px 25px 34px;
        background: #CC6345;
        color: #FFFFFF;
        text-align: left;
    }

    .sp-info-page .sp-info-hero span {
        display: block;
        margin-bottom: 8px;
        color: #FFE2D5;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .sp-info-page .sp-info-hero h1 {
        float: none;
        margin: 0 0 12px;
        color: #FFFFFF;
        font-size: 27px;
        font-weight: bold;
        line-height: 1.4;
    }

    .sp-info-page .sp-info-hero p {
        color: #FFFFFF;
        font-size: 14px;
        line-height: 1.8;
    }


    /* --------------------------------------
       本文エリア
       -------------------------------------- */

    .sp-info-page .sp-info-content {
        width: calc(100% - 28px);
        max-width: 680px;
        margin: 15px auto 25px;
        padding: 25px 20px 40px;
        background: #FFFFFF;
    }

    .sp-info-page .sp-info-content p {
        font-size: 14px;
        line-height: 1.85;
    }


    /* --------------------------------------
       最初のご案内
       -------------------------------------- */

    .sp-info-page .sp-info-intro {
        padding-bottom: 24px;
    }

    .sp-info-page .sp-info-title {
        margin: 0 0 15px;
        padding-left: 12px;
        border-left: 5px solid #E7784A;
        color: #D45E3D;
        font-size: 20px;
        font-weight: bold;
        line-height: 1.5;
    }

    .sp-info-page .sp-info-intro p {
        color: #444444;
    }


    /* --------------------------------------
       合同慰霊祭
       -------------------------------------- */

    .sp-info-page .sp-info-memorial {
        overflow: hidden;
        margin-bottom: 30px;
        border: 1px solid #E7C5AE;
        border-radius: 6px;
        background: #FFF9F1;
    }

    .sp-info-page .sp-info-memorial-heading {
        padding: 14px 18px;
        background: #F5E7D7;
    }

    .sp-info-page .sp-info-memorial-heading span {
        display: block;
        color: #C37B55;
        font-size: 10px;
        font-weight: bold;
        letter-spacing: 1.5px;
    }

    .sp-info-page .sp-info-memorial-heading h3 {
        margin-top: 5px;
        color: #9B4C2F;
        font-size: 19px;
        font-weight: bold;
    }

    .sp-info-page .sp-info-memorial-body {
        padding: 16px 18px;
    }

    .sp-info-page .sp-info-memorial-date {
        margin-bottom: 10px;
        color: #8B482D;
        font-weight: bold;
    }

    .sp-info-page .sp-info-memorial-date strong {
        display: block;
        margin-top: 3px;
        color: #D6603D;
        font-size: 24px;
        line-height: 1.4;
    }

    .sp-info-page .sp-info-memorial-body p {
        color: #6A4C3B;
    }


    /* --------------------------------------
       各施設紹介セクション
       -------------------------------------- */

    .sp-info-page .sp-info-section {
        margin-top: 28px;
        padding-top: 28px;
        border-top: 1px solid #ED9B84;
    }

    .sp-info-page .sp-info-section-title {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 17px;
        color: #D45E3D;
        font-size: 19px;
        font-weight: bold;
        line-height: 1.5;
    }

    .sp-info-page .sp-info-plus {
        flex: none;
        color: #E7784A;
        font-size: 22px;
        line-height: 1;
    }


    /* --------------------------------------
       霊園景観・火葬炉写真
       -------------------------------------- */

    .sp-info-page .sp-info-main-photo {
        margin-bottom: 17px;
        text-align: center;
    }

    .sp-info-page .sp-info-main-photo img {
        display: block;
        width: 100%;
        max-width: 420px;
        height: auto;
        margin: 0 auto;
        border-radius: 5px;
    }

    .sp-info-page .sp-info-description {
        margin-bottom: 13px;
        color: #444444;
        line-height: 1.9;
    }


    /* --------------------------------------
       認可霊園情報
       -------------------------------------- */

    .sp-info-page .sp-info-license {
        margin-top: 22px;
        padding: 18px 15px;
        border: 1px solid #EAD9C7;
        background: #FBF6F0;
    }

    .sp-info-page .sp-info-small-heading {
        margin-bottom: 12px;
        color: #B75A3B;
        font-size: 15px;
        font-weight: bold;
    }

    .sp-info-page .sp-info-license ul {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .sp-info-page .sp-info-license li {
        padding: 7px 11px;
        border: 1px solid #E9CDB9;
        border-radius: 3px;
        background: #FFFFFF;
        color: #7E4A32;
        font-size: 12px;
        font-weight: bold;
    }


    /* --------------------------------------
       推薦・紹介
       -------------------------------------- */

    .sp-info-page .sp-info-recommend {
        margin-top: 22px;
    }

    .sp-info-page .sp-info-recommend h3 {
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #E8D4C2;
        color: #B95B3A;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-info-page .sp-info-recommend p {
        color: #555555;
    }


    /* --------------------------------------
       火葬システムの強調部分
       -------------------------------------- */

    .sp-info-page .sp-info-highlight {
        margin-top: 18px;
        padding: 18px 15px;
        border-left: 4px solid #DD7850;
        background: #FFF3E9;
        text-align: center;
    }

    .sp-info-page .sp-info-highlight strong {
        display: block;
        color: #B95837;
        font-size: 17px;
        line-height: 1.5;
    }

    .sp-info-page .sp-info-highlight p {
        margin-top: 5px;
        color: #654737;
        font-size: 13px;
        font-weight: bold;
    }


    /* --------------------------------------
       施設写真ギャラリー
       -------------------------------------- */

    .sp-info-page .sp-info-gallery-lead {
        margin-bottom: 17px;
        color: #555555;
    }

    .sp-info-page .sp-info-gallery {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 12px;
    }

    .sp-info-page .sp-info-gallery-item {
        min-width: 0;
        overflow: hidden;
        border: 1px solid #E8D9CB;
        border-radius: 5px;
        background: #FFFFFF;
    }

    .sp-info-page .sp-info-gallery-item img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 200 / 136;
        object-fit: cover;
    }

    .sp-info-page .sp-info-gallery-item p {
        padding: 10px 5px;
        background: #F8F0E7;
        color: #794A32;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.4;
        text-align: center;
    }


    /* --------------------------------------
       お問い合わせ案内
       -------------------------------------- */

    .sp-info-page .sp-info-contact {
        margin-top: 35px;
        padding: 25px 15px;
        background: #FBF1E6;
        text-align: center;
    }

    .sp-info-page .sp-info-contact h2 {
        margin-bottom: 12px;
        color: #B85D3D;
        font-size: 19px;
        font-weight: bold;
    }

    .sp-info-page .sp-info-contact p {
        color: #674E3F;
        font-size: 13px;
    }

    .sp-info-page .sp-info-contact a {
        display: block;
        max-width: 330px;
        margin: 18px auto 12px;
        padding: 14px 10px;
        border-radius: 5px;
        background: #D95D3D;
        color: #FFFFFF;
        text-decoration: none;
    }

    .sp-info-page .sp-info-contact a span {
        display: block;
        font-size: 12px;
        font-weight: bold;
    }

    .sp-info-page .sp-info-contact a strong {
        display: block;
        margin-top: 4px;
        font-size: 23px;
        font-weight: bold;
        line-height: 1.3;
    }

    .sp-info-page .sp-info-contact .sp-info-contact-note {
        color: #9D5A3F;
        font-size: 12px;
        font-weight: bold;
    }

}


/* ==========================================
   タブレット表示時の調整
   ========================================== */

@media screen and (min-width: 650px) and (max-width: 940px) {

    .sp-info-page .sp-info-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sp-info-page .sp-info-content {
        padding-left: 35px;
        padding-right: 35px;
    }

}


/* ==========================================
   小さなスマートフォン用の調整
   ========================================== */

@media screen and (max-width: 359px) {

    .sp-info-page .sp-info-content {
        width: calc(100% - 20px);
        padding-left: 14px;
        padding-right: 14px;
    }

    .sp-info-page .sp-info-section-title {
        font-size: 17px;
    }

    .sp-info-page .sp-info-gallery {
        gap: 10px;
    }

    .sp-info-page .sp-info-gallery-item p {
        font-size: 12px;
    }

}


/* ==========================================
   葬儀の流れページ専用CSS
   ========================================== */

@media screen and (max-width: 940px) {

    /* ページタイトル */
    .sp-flow-page .sp-flow-hero {
        padding: 38px 25px 34px;
        background: #CC6345;
        color: #FFFFFF;
        text-align: left;
    }

    .sp-flow-page .sp-flow-hero span {
        display: block;
        margin-bottom: 8px;
        color: #FFE2D5;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .sp-flow-page .sp-flow-hero h1 {
        float: none;
        margin: 0 0 12px;
        color: #FFFFFF;
        font-size: 27px;
        font-weight: bold;
        line-height: 1.4;
    }

    .sp-flow-page .sp-flow-hero p {
        color: #FFFFFF;
        font-size: 14px;
        line-height: 1.8;
    }


    /* 本文全体 */
    .sp-flow-page .sp-flow-content {
        width: calc(100% - 28px);
        max-width: 680px;
        margin: 15px auto 25px;
        padding: 25px 20px 40px;
        background: #FFFFFF;
    }

    .sp-flow-page .sp-flow-content p {
        font-size: 14px;
        line-height: 1.85;
    }


    /* 導入文 */
    .sp-flow-page .sp-flow-intro {
        margin-bottom: 22px;
    }

    .sp-flow-page .sp-flow-intro h2 {
        margin-bottom: 12px;
        color: #D45E3D;
        font-size: 20px;
        font-weight: bold;
    }

    .sp-flow-page .sp-flow-intro p {
        color: #555555;
    }


    /* 既存の葬儀の流れ画像 */
    .sp-flow-page .sp-flow-diagram {
        margin-bottom: 28px;
        padding: 12px;
        border: 1px solid #E8D9CB;
        background: #FBF6F0;
        text-align: center;
    }

    .sp-flow-page .sp-flow-diagram a {
        display: block;
        color: #B85D3D;
        text-decoration: none;
    }

    .sp-flow-page .sp-flow-diagram img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 10px;
    }

    .sp-flow-page .sp-flow-diagram span {
        color: #A05A40;
        font-size: 12px;
        text-decoration: underline;
    }


    /* 各セクション */
    .sp-flow-page .sp-flow-section {
        margin-top: 30px;
        padding-top: 28px;
        border-top: 1px solid #ED9B84;
    }

    .sp-flow-page .sp-flow-title {
        margin: 0 0 14px;
        padding-left: 12px;
        border-left: 5px solid #E7784A;
        color: #D45E3D;
        font-size: 21px;
        font-weight: bold;
        line-height: 1.5;
    }

    .sp-flow-page .sp-flow-lead {
        margin-bottom: 17px;
        color: #555555;
    }


    /* 火葬の手順 */
    .sp-flow-page .sp-flow-steps {
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: flow-step;
    }

    .sp-flow-page .sp-flow-steps li {
        position: relative;
        margin-bottom: 12px;
        padding: 15px 15px 15px 57px;
        border: 1px solid #E8D8C8;
        border-radius: 5px;
        background: #FFFDF9;
        counter-increment: flow-step;
    }

    .sp-flow-page .sp-flow-steps li::before {
        content: counter(flow-step);
        position: absolute;
        top: 14px;
        left: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #D96845;
        color: #FFFFFF;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-flow-page .sp-flow-steps strong {
        display: block;
        margin-bottom: 6px;
        color: #A44E32;
        font-size: 16px;
    }

    .sp-flow-page .sp-flow-steps p {
        color: #555555;
        font-size: 13px;
    }


    /* 注意事項 */
    .sp-flow-page .sp-flow-note {
        margin-top: 20px;
        padding: 16px;
        border: 1px solid #E8D9CB;
        border-radius: 4px;
        background: #FBF5ED;
    }

    .sp-flow-page .sp-flow-note h3 {
        margin-bottom: 9px;
        color: #A65436;
        font-size: 15px;
        font-weight: bold;
    }

    .sp-flow-page .sp-flow-note p {
        margin-bottom: 8px;
        color: #654F42;
        font-size: 12px;
    }

    .sp-flow-page .sp-flow-note p:last-child {
        margin-bottom: 0;
    }

    .sp-flow-page .sp-flow-attention {
        margin-top: 15px;
        color: #CC6345;
        font-size: 12px;
        font-weight: bold;
    }


    /* 一任個別火葬・2種類の方法 */
    .sp-flow-page .sp-flow-option {
        margin-top: 18px;
        border: 1px solid #E5D6C7;
        border-radius: 5px;
        overflow: hidden;
    }

    .sp-flow-page .sp-flow-option h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: #F5E7D7;
        color: #954C34;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-flow-page .sp-flow-option h3 span {
        color: #D36A48;
        font-size: 19px;
        font-weight: bold;
    }

    .sp-flow-page .sp-flow-list {
        margin: 0;
        padding: 15px 17px;
        list-style: none;
        background: #FFFFFF;
    }

    .sp-flow-page .sp-flow-list li {
        position: relative;
        margin-bottom: 12px;
        padding-left: 17px;
        color: #444444;
        font-size: 13px;
        line-height: 1.8;
    }

    .sp-flow-page .sp-flow-list li::before {
        content: "●";
        position: absolute;
        top: 0;
        left: 0;
        color: #D96845;
        font-size: 11px;
    }

    .sp-flow-page .sp-flow-list li:last-child {
        margin-bottom: 0;
    }


    /* ご遺体の安置方法 */
    .sp-flow-page .sp-flow-care-lead {
        margin-bottom: 20px;
        padding: 12px;
        background: #FFF3E9;
        color: #B2583C;
        font-weight: bold;
        text-align: center;
    }

    .sp-flow-page .sp-flow-care-item {
        margin-bottom: 23px;
    }

    .sp-flow-page .sp-flow-care-item h3 {
        margin-bottom: 12px;
        padding: 9px 12px;
        background: #F7EADD;
        border-left: 3px solid #D96845;
        color: #8A4A32;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-flow-page .sp-flow-care-item p {
        margin-bottom: 11px;
        color: #444444;
    }

    .sp-flow-page .sp-flow-care-item p:last-child {
        margin-bottom: 0;
    }


    /* 料金ページへのリンク */
    .sp-flow-page .sp-flow-bottom-link {
        margin-top: 32px;
        padding: 24px 15px;
        background: #FBF1E6;
        text-align: center;
    }

    .sp-flow-page .sp-flow-bottom-link p {
        margin-bottom: 15px;
        color: #654737;
        font-size: 13px;
    }

    .sp-flow-page .sp-flow-bottom-link a {
        display: block;
        max-width: 340px;
        margin: 0 auto;
        padding: 15px 12px;
        border-radius: 5px;
        background: #D95D3D;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
    }

    .sp-flow-page .sp-flow-bottom-link a:visited,
    .sp-flow-page .sp-flow-bottom-link a:hover {
        color: #FFFFFF;
    }

}


/* 小さなスマホ向け調整 */
@media screen and (max-width: 359px) {

    .sp-flow-page .sp-flow-content {
        width: calc(100% - 20px);
        padding-left: 14px;
        padding-right: 14px;
    }

    .sp-flow-page .sp-flow-title {
        font-size: 19px;
    }

    .sp-flow-page .sp-flow-steps li {
        padding-right: 11px;
        padding-left: 51px;
    }

}


/* ==========================================
   アクセスページ専用CSS
   ========================================== */

@media screen and (max-width: 940px) {

    /* ページタイトル */
    .sp-access-page .sp-access-hero {
        padding: 38px 25px 34px;
        background: #CC6345;
        color: #FFFFFF;
        text-align: left;
    }

    .sp-access-page .sp-access-hero span {
        display: block;
        margin-bottom: 8px;
        color: #FFE2D5;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .sp-access-page .sp-access-hero h1 {
        float: none;
        margin: 0 0 12px;
        color: #FFFFFF;
        font-size: 27px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-hero p {
        color: #FFFFFF;
        font-size: 14px;
        line-height: 1.8;
    }


    /* 本文全体 */
    .sp-access-page .sp-access-content {
        box-sizing: border-box;
        width: calc(100% - 28px);
        max-width: 680px;
        margin: 15px auto 25px;
        padding: 25px 20px 40px;
        background: #FFFFFF;
    }

    .sp-access-page .sp-access-content p {
        font-size: 14px;
        line-height: 1.85;
    }


    /* 冒頭のアクセス案内 */
    .sp-access-page .sp-access-intro {
        padding: 20px 15px;
        background: #FBF1E6;
        text-align: center;
    }

    .sp-access-page .sp-access-intro .sp-access-catch {
        color: #9D5035;
        font-size: 17px;
        font-weight: bold;
        line-height: 1.7;
    }

    .sp-access-page .sp-access-catch strong {
        display: block;
        margin: 7px 0 12px;
        color: #D45E3D;
        font-size: 25px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-intro > p:last-child {
        color: #665248;
        font-size: 13px;
    }


    /* 各セクション */
    .sp-access-page .sp-access-section {
        margin-top: 30px;
        padding-top: 25px;
        border-top: 1px solid #ED9B84;
    }

    .sp-access-page .sp-access-title {
        margin: 0 0 18px;
        padding-left: 12px;
        border-left: 5px solid #E7784A;
        color: #D45E3D;
        font-size: 21px;
        font-weight: bold;
        line-height: 1.5;
    }


    /* 霊園情報カード */
    .sp-access-page .sp-access-card {
        overflow: hidden;
        border: 1px solid #E5D6C7;
        border-radius: 5px;
        background: #FFFFFF;
    }

    .sp-access-page .sp-access-card h3 {
        padding: 15px;
        background: #F5E7D7;
        color: #8A472F;
        font-size: 18px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-detail {
        padding: 15px;
        border-bottom: 1px solid #EEE3D9;
    }

    .sp-access-page .sp-access-label {
        display: block;
        margin-bottom: 7px;
        color: #B95B3A;
        font-size: 13px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-detail p {
        color: #444444;
        font-size: 14px;
    }

    .sp-access-page .sp-access-map-button {
        display: block;
        margin: 15px;
        padding: 13px;
        border-radius: 4px;
        background: #D95D3D;
        color: #FFFFFF;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }

    .sp-access-page .sp-access-map-button:visited,
    .sp-access-page .sp-access-map-button:hover {
        color: #FFFFFF;
    }


    /* カーナビ注意事項 */
    .sp-access-page .sp-access-notice {
        margin-top: 18px;
        padding: 15px;
        border-left: 4px solid #D96845;
        background: #FFF3E9;
    }

    .sp-access-page .sp-access-notice strong {
        display: block;
        margin-bottom: 7px;
        color: #AD4B2F;
        font-size: 15px;
    }

    .sp-access-page .sp-access-notice p {
        color: #624B3D;
        font-size: 13px;
    }


    /* 電話番号・営業時間 */
    .sp-access-page .sp-access-contact-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sp-access-page .sp-access-contact-card {
        padding: 19px 15px;
        border: 1px solid #E8D9CB;
        border-radius: 5px;
        background: #FBF8F4;
        text-align: center;
    }

    .sp-access-page .sp-access-contact-card h3 {
        margin-bottom: 10px;
        color: #89503A;
        font-size: 15px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-phone {
        display: block;
        margin-bottom: 8px;
        color: #D45E3D;
        font-size: 25px;
        font-weight: bold;
        text-decoration: none;
    }

    .sp-access-page .sp-access-phone:visited {
        color: #D45E3D;
    }

    .sp-access-page .sp-access-hours {
        margin-bottom: 8px;
        color: #D45E3D;
        font-size: 25px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-contact-card p {
        color: #675246;
        font-size: 12px;
    }

    .sp-access-page .sp-access-other-tel {
        margin-top: 13px;
        color: #65554C;
    }

    .sp-access-page .sp-access-other-tel p {
        font-size: 12px;
    }


    /* Googleマップ */
    .sp-access-page #sp-access-map {
        scroll-margin-top: 75px;
    }

    .sp-access-page .sp-access-description {
        margin-bottom: 10px;
        color: #444444;
    }

    .sp-access-page .sp-access-map-hint {
        margin-bottom: 15px;
        color: #A05A40;
        font-size: 13px;
    }

    .sp-access-page .sp-access-map-frame {
        width: 100%;
        overflow: hidden;
        border: 1px solid #E5D6C7;
        border-radius: 5px;
        background: #F4E8D9;
    }

    .sp-access-page .sp-access-map-frame iframe {
        display: block;
        width: 100%;
        height: 380px;
        max-width: 100%;
        border: none;
    }


    /* 周辺案内図 */
    .sp-access-page .sp-access-local-map {
        margin-top: 25px;
        padding: 18px 15px;
        background: #FBF6F0;
        text-align: center;
    }

    .sp-access-page .sp-access-local-map h3 {
        margin-bottom: 13px;
        color: #8A4A32;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-local-map img {
        display: block;
        width: 100%;
        max-width: 225px;
        height: auto;
        margin: 0 auto;
    }


    /* 本社事務所 */
    .sp-access-page .sp-access-office {
        padding: 19px 15px;
        border: 1px solid #E8D9CB;
        background: #FBF8F4;
    }

    .sp-access-page .sp-access-office h3 {
        margin-bottom: 10px;
        color: #8A4A32;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-office p {
        margin-bottom: 9px;
        color: #555555;
        font-size: 13px;
    }

    .sp-access-page .sp-access-office .sp-access-office-label {
        margin-top: 12px;
        margin-bottom: 5px;
        color: #B95B3A;
        font-weight: bold;
    }


    /* ご来園前の案内 */
    .sp-access-page .sp-access-bottom {
        margin-top: 35px;
        padding: 25px 15px;
        background: #FBF1E6;
        text-align: center;
    }

    .sp-access-page .sp-access-bottom h2 {
        margin-bottom: 12px;
        color: #B85D3D;
        font-size: 20px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-bottom p {
        color: #674E3F;
        font-size: 13px;
    }

    .sp-access-page .sp-access-bottom a {
        display: block;
        max-width: 330px;
        margin: 18px auto 0;
        padding: 14px 10px;
        border-radius: 5px;
        background: #D95D3D;
        color: #FFFFFF;
        text-decoration: none;
    }

    .sp-access-page .sp-access-bottom a:visited,
    .sp-access-page .sp-access-bottom a:hover {
        color: #FFFFFF;
    }

    .sp-access-page .sp-access-bottom a span {
        display: block;
        font-size: 12px;
        font-weight: bold;
    }

    .sp-access-page .sp-access-bottom a strong {
        display: block;
        margin-top: 4px;
        font-size: 23px;
        font-weight: bold;
    }

}


/* タブレット表示 */
@media screen and (min-width: 650px) and (max-width: 940px) {

    .sp-access-page .sp-access-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-access-page .sp-access-map-frame iframe {
        height: 450px;
    }

}


/* 小さなスマートフォン */
@media screen and (max-width: 359px) {

    .sp-access-page .sp-access-content {
        width: calc(100% - 20px);
        padding-left: 14px;
        padding-right: 14px;
    }

    .sp-access-page .sp-access-title {
        font-size: 19px;
    }

    .sp-access-page .sp-access-phone,
    .sp-access-page .sp-access-hours {
        font-size: 21px;
    }

    .sp-access-page .sp-access-map-frame iframe {
        height: 320px;
    }

}


/* ==========================================
   アクセス：周辺案内図の拡大表示
   ========================================== */

@media screen and (max-width: 940px) {

    /* 通常の地図 */
    .sp-access-local-map img {
        cursor: zoom-in;
    }

    /* 拡大表示の背景 */
    .sp-map-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(0, 0, 0, 0.9);
        align-items: center;
        justify-content: center;
        padding: 15px;
        box-sizing: border-box;
    }

    /* 拡大表示中 */
    .sp-map-lightbox.is-open {
        display: flex;
    }

    /* 拡大した地図 */
    .sp-map-lightbox img {
        display: block;
        width: 100%;
        max-width: 800px;
        max-height: 85vh;
        max-height: 85dvh;
        height: auto;
        object-fit: contain;
    }

    /* 閉じるボタン */
    .sp-map-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
        border: none;
        border-radius: 50%;
        background: #CC6345;
        color: #FFFFFF;
        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        z-index: 1;
    }

}


/* ==========================================
   葬儀の流れ HTMLフローチャート
   ========================================== */

@media screen and (max-width: 940px) {

    /* 元の画像を非表示 */
    .sp-flow-page .sp-flow-diagram > a {
        display: none;
    }

    /* 元の画像エリアの装飾を解除 */
    .sp-flow-page .sp-flow-diagram {
        padding: 0;
        border: none;
        background: transparent;
    }

    /* フローチャート全体 */
    .sp-flow-page .sp-flow-chart {
        width: 100%;
        box-sizing: border-box;
        color: #333333;
        font-size: 15px;
        font-weight: bold;
        line-height: 1.5;
    }

    .sp-flow-page .sp-flow-chart * {
        box-sizing: border-box;
    }

    /* 共通の流れ */
    .sp-flow-page .sp-flow-chart-step {
        width: 100%;
        padding: 14px 10px;
        background: #FBF2CB;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
    }

    .sp-flow-page .sp-flow-chart-step small {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        font-weight: normal;
    }

    /* 火葬の部分だけ少し濃い色 */
    .sp-flow-page .sp-flow-chart-cremation {
        background: #F8E9AA;
    }

    /* 下向き矢印 */
    .sp-flow-page .sp-flow-chart-arrow {
        width: 0;
        height: 0;
        margin: 12px auto;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 13px solid #A0A0A0;
    }


    /* --------------------------------------
       火葬方法による分岐
       -------------------------------------- */

    .sp-flow-page .sp-flow-chart-branches {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 12px;
    }

    .sp-flow-page .sp-flow-chart-branch {
        min-width: 0;
        padding: 0 12px 18px;
        border-radius: 5px;
    }

    /* 合同火葬の背景 */
    .sp-flow-page .sp-flow-chart-combined {
        background: #F4F7EB;
        border: 1px solid #DFE8CA;
    }

    /* 立会個別火葬の背景 */
    .sp-flow-page .sp-flow-chart-individual {
        background: #F1F9F9;
        border: 1px solid #CDE5E3;
    }

    /* 分岐先の各ボックス */
    .sp-flow-page .sp-flow-chart-box {
        padding: 14px 8px;
        font-size: 16px;
        font-weight: bold;
        line-height: 1.5;
        text-align: center;
    }

    /* 合同火葬 */
    .sp-flow-page .sp-flow-chart-combined
    .sp-flow-chart-box {
        background: #E0E9CC;
    }

    .sp-flow-page .sp-flow-chart-combined
    .sp-flow-chart-box:last-child {
        background: #D6E4B9;
    }

    /* 立会個別火葬 */
    .sp-flow-page .sp-flow-chart-individual
    .sp-flow-chart-box {
        background: #C5E1DF;
    }

    .sp-flow-page .sp-flow-chart-individual
    .sp-flow-chart-box:nth-of-type(4) {
        background: #A9D5D2;
    }


    /* --------------------------------------
       ご供養方法・4つの行き先
       -------------------------------------- */

    .sp-flow-page .sp-flow-chart-destination-heading {
        position: relative;
        margin: 30px 0 12px;
        color: #538A86;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
    }

    /* 拾骨からの矢印 */
    .sp-flow-page
    .sp-flow-chart-destination-heading::before {
        content: "";
        position: absolute;
        top: -23px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 11px solid #A0A0A0;
    }

    /* 供養先を2列に並べる */
    .sp-flow-page .sp-flow-chart-destinations {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .sp-flow-page .sp-flow-chart-destinations div {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 75px;
        padding: 10px 5px;
        background: #A9D5D2;
        color: #293E3C;
        font-size: 13px;
        font-weight: bold;
        line-height: 1.5;
        text-align: center;
    }

}


/* ==========================================
   タブレットでは分岐を左右2列に
   ========================================== */

@media screen and (min-width: 650px) and (max-width: 940px) {

    .sp-flow-page .sp-flow-chart-branches {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

}


/* ==========================================
   小さいスマホ用
   ========================================== */

@media screen and (max-width: 359px) {

    .sp-flow-page .sp-flow-chart-step,
    .sp-flow-page .sp-flow-chart-box {
        font-size: 14px;
    }

    .sp-flow-page .sp-flow-chart-destinations div {
        font-size: 12px;
        min-height: 70px;
    }

}


/* ==========================================
   霊園のご案内：施設写真の拡大表示
   ========================================== */

@media screen and (max-width: 940px) {

    /* 通常の施設写真 */
    .sp-info-page .sp-info-gallery-item img {
        cursor: zoom-in;
    }

    /* 拡大表示の背景 */
    .sp-info-lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;

        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100vh;
        height: 100dvh;
        padding: 20px;

        box-sizing: border-box;
        background: rgba(0, 0, 0, 0.92);
    }

    /* 拡大表示中 */
    .sp-info-lightbox.is-open {
        display: flex;
    }

    /* 拡大した写真 */
    .sp-info-lightbox-image {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 85vh;
        max-height: 85dvh;
        height: auto;
        object-fit: contain;
    }

    /* 閉じるボタン */
    .sp-info-lightbox-close {
        position: absolute;
        top: 20px;
        right: 20px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 48px;
        height: 48px;

        border: none;
        border-radius: 50%;

        background: #CC6345;
        color: #FFFFFF;

        font-size: 30px;
        line-height: 1;
        cursor: pointer;
        z-index: 1;
    }

}


/* 施設写真の拡大表示をさらに大きく */
@media screen and (max-width: 940px) {

    .sp-info-lightbox {
        padding: 8px;
    }

    .sp-info-lightbox-image {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: 90vh;
        max-height: 90dvh;
        object-fit: contain;
    }

}


/* ==========================================
   ご料金ページ：参考画像
   ========================================== */

@media screen and (max-width: 940px) {

    .sp-price-page .sp-price-example {
        margin: 15px 0 25px;
        text-align: center;
    }

    .sp-price-page .sp-price-example img {
        display: block;
        width: 100%;
        max-width: 480px;
        height: auto;
        margin: 0 auto;
        border-radius: 5px;
    }

    .sp-price-page .sp-price-example p {
        margin-top: 8px;
        color: #888888;
        font-size: 11px;
        text-align: center;
    }

}

@media screen and (max-width: 940px) {

    .sp-intro-visual .sp-intro-image {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

}

@media screen and (max-width: 940px) {

    .sp-header:has(.sp-menu-button[aria-expanded="true"])
    .sp-header-logo img {
        position: relative;
        left: -10px;
    }

}


/* 520px以下でも画像サイズを固定 */
@media screen and (max-width: 520px) {

    .sp-intro-visual .sp-intro-image {
        width: 335px;
        max-width: none;
        height: auto;

        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

}

/* 420px以下では画像を少し小さく */
@media screen and (max-width: 420px) {

    .sp-intro-visual .sp-intro-image {
        width: 265px;
        max-width: none;
        height: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

}


/* 521px以上：画像が下のテキストと重ならないように */
@media screen and (min-width: 521px) and (max-width: 940px) {

    .sp-intro-visual {
        height: auto;
        min-height: 0;
    }

    .sp-intro-visual .sp-intro-image {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;

        display: block;
        width: 82%;
        height: auto;
        margin: 0 auto;
    }

    /* ロゴと文字は画像の上に重ねる */
    .sp-intro-visual .sp-intro-title {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        z-index: 1;
    }

}

/* 固定電話ボタンのアイコン画像 */
@media screen and (max-width: 940px) {

    .sp-tel-icon img {
        display: block;
        width: 28px;
        height: 28px;
        object-fit: contain;
    }

}

/* 見出しのプラス記号の文字化け対策 */
@media screen and (max-width: 940px) {

    .sp-plus,
    .sp-info-plus {
        font-size: 0 !important;
    }

    .sp-plus::before,
    .sp-info-plus::before {
        content: "+";
        font-size: 22px;
        font-weight: bold;
    }

}

/* 箇条書きの丸をCSSで描画 */
@media screen and (max-width: 940px) {

    .sp-flow-page .sp-flow-list li::before {
        content: "";
        position: absolute;
        top: 11px;
        left: 2px;
        width: 6px;
        height: 6px;
        background: #D96845;
        border-radius: 50%;
    }

}

@media screen and (max-width: 940px) {

    .sp-menu-button[aria-expanded="true"] {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        flex: 0 0 50px;
        box-sizing: border-box;
    }

}

/* メニュー開閉時のアニメーション */
@media screen and (max-width: 940px) {

    /* 閉じている状態 */
    .sp-navigation {
        display: flex;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        pointer-events: none;

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0s linear 0.3s;
    }

    /* 開いている状態 */
    .sp-navigation.is-open {
        display: flex;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0s;
    }

}

/* スマホメニューのリンク範囲を行全体に拡大 */
@media screen and (max-width: 940px) {

    .sp-navigation li {
        display: block;
        width: 100%;
        min-height: 0;
    }

    .sp-navigation li a {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 65px;
        padding: 12px 16px;
        box-sizing: border-box;

        text-align: center;
    }

    /* タップ時の反応 */
    .sp-navigation li a:active {
        background: rgba(255, 255, 255, 0.12);
    }

}

/* メニュー選択時の位置ずれ防止 */
@media screen and (max-width: 940px) {

    .sp-navigation {
        height: 100svh;
    }

    .sp-navigation li a:active {
        transform: none !important;
        translate: none !important;
    }

}

/* メニューをタップしたときの文字位置ずれを防止 */
@media screen and (max-width: 940px) {

    .sp-navigation li a,
    .sp-navigation li a:visited,
    .sp-navigation li a:hover,
    .sp-navigation li a:active,
    .sp-navigation li a:focus {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 65px;
        padding: 12px 16px;
        box-sizing: border-box;
        line-height: 1.4;
        transform: none !important;
        translate: none !important;
    }

}

/* スマホフッターのバナー */
@media screen and (max-width: 940px) {

    .sp-footer-banner {
        width: 100%;
        max-width: 280px;
        margin: 22px auto 18px;
    }

    .sp-footer-banner a {
        display: block;
        transition: opacity 0.3s ease;
    }

    .sp-footer-banner a:hover {
        opacity: 0.8;
    }

    .sp-footer-banner img {
        display: block;
        width: 60%;
        height: auto;
        margin: 0 auto;
    }

}



/* ==========================================
   全体調整：文字の視認性向上・グリーン追加
   ========================================== */

@media screen and (max-width: 940px) {

    /* ======================================
       1. 本文の文字サイズ・太さ
       ====================================== */

    .sp-site .sp-content p {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.85;
    }

    /* トップページの冒頭 */
    .sp-site .sp-intro-title p {
        font-size: 14px;
        font-weight: 700;
    }

    .sp-site .sp-intro-message p {
        font-size: 15px;
        font-weight: 700;
    }

    /* 箇条書き */
    .sp-site .sp-service-list li,
    .sp-site .sp-trust-list li,
    .sp-flow-page .sp-flow-list li {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.85;
    }

    /* トップページのお客様の声 */
    .sp-site .sp-voice-item p {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.7;
        color: black;
    }

    /* 小さな注釈 */
    .sp-site .sp-note {
        font-size: 13px !important;
        line-height: 1.7;
    }


    /* ======================================
       2. 見出しの文字サイズ
       ====================================== */

    /* トップページ */
    .sp-site .sp-section-title {
        font-size: 17px;
        font-weight: 700;
    }

    .sp-site .sp-section-title small {
        font-size: 13px;
        font-weight: 500;
    }

    /* ご料金 */
    .sp-price-page .sp-price-title {
        font-size: 23px;
    }

    .sp-price-page .sp-price-subtitle {
        font-size: 18px;
    }

    /* 霊園のご案内 */
    .sp-info-page .sp-info-title,
    .sp-info-page .sp-info-section-title {
        font-size: 21px;
    }

    /* 葬儀の流れ */
    .sp-flow-page .sp-flow-title {
        font-size: 23px;
    }

    /* アクセス */
    .sp-access-page .sp-access-title {
        font-size: 23px;
    }


    /* ======================================
       3. 料金表の文字サイズ
       ====================================== */

    /* ペットの種類 */
    .sp-price-page .sp-price-card h4 {
        font-size: 18px;
    }

    /* 犬種などの補足 */
    .sp-price-page .sp-price-kind,
    .sp-price-page .sp-price-card h4 small {
        font-size: 13px;
    }

    /* 料金項目 */
    .sp-price-page .sp-price-card li span {
        font-size: 13px;
        font-weight: 500;
    }

    /* 料金の金額 */
    .sp-price-page .sp-price-card li strong {
        font-size: 18px;
    }

    /* 骨壷・骨入れ */
    .sp-price-page .sp-urn-card h3 {
        font-size: 18px;
    }

    .sp-price-page .sp-urn-card h3 small {
        font-size: 13px;
    }

    .sp-price-page .sp-urn-card li span {
        min-width: 0;
        font-size: 13px;
        font-weight: 500;
    }

    .sp-price-page .sp-urn-card li strong {
        flex: none;
        font-size: 16px;
    }

    /* 各ページの注意書き */
    .sp-price-page .sp-price-notes p,
    .sp-flow-page .sp-flow-note p,
    .sp-access-page .sp-access-notice p,
    .sp-access-page .sp-access-contact-card p,
    .sp-access-page .sp-access-office p {
        font-size: 14px;
        line-height: 1.8;
    }

    /* 参考画像のキャプション */
    .sp-price-page .sp-price-example p {
        font-size: 13px;
    }


    /* ======================================
       4. フッター
       ====================================== */

    .sp-site .sp-footer > p:not(.sp-copyright) {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.9;
    }

    .sp-site .sp-footer-emergency {
        font-size: 14px;
        font-weight: 700;
    }

    .sp-site .sp-footer .sp-copyright {
        font-size: 10px;
        font-weight: 400;
    }

    /* 画面下部の固定電話ボタン */
    .sp-site .sp-tel-info small {
        font-size: 12px;
        font-weight: 600;
    }

    .sp-site .sp-fixed-tel-message {
        font-weight: 600;
    }


    /* ======================================
       5. グリーンのアクセント
       ====================================== */

    /* トップページの見出し装飾 */
    .sp-site .sp-section-title .sp-plus::before,
    .sp-info-page .sp-info-plus::before {
        color: #50745B;
    }

    /* トップページの区切り線 */
    .sp-site .sp-section {
        border-top-color: #A9C7AE;
    }

    /* 箇条書きの丸と四角 */
    .sp-site .sp-service-list li::before,
    .sp-site .sp-trust-list li::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 1px;
        width: 7px;
        height: 7px;
        background: #6E9878;
    }

    .sp-site .sp-service-list li::before {
        border-radius: 50%;
    }

    /* お客様の声の枠線 */
    .sp-site .sp-voice-item {
        border-color: #A9C7AE;
    }

    /* 各ページの見出し左側のライン */
    .sp-price-page .sp-price-title,
    .sp-info-page .sp-info-title,
    .sp-flow-page .sp-flow-title,
    .sp-access-page .sp-access-title {
        border-left-color: #6E9878;
    }

    /* 料金ページの小見出し */
    .sp-price-page .sp-price-subtitle {
        color: #50745B;
        border-bottom-color: #A9C7AE;
    }

    /* 料金カードの見出し */
    .sp-price-page .sp-price-card h4,
    .sp-price-page .sp-urn-card h3 {
        background: #EEF5ED;
        color: #50745B;
    }

    /* 霊園案内のギャラリー説明 */
    .sp-info-page .sp-info-gallery-item p {
        background: #EEF5ED;
        color: #50745B;
    }

    /* 葬儀の流れの箇条書き */
    .sp-flow-page .sp-flow-list li::before {
        background: #6E9878;
    }

    /* アクセスページの項目ラベル */
    .sp-access-page .sp-access-label {
        color: #50745B;
        font-size: 14px;
    }

    /* アクセスページの情報カード */
    .sp-access-page .sp-access-contact-card {
        background: #F3F7F0;
        border-color: #C9DCCB;
    }

}


/* ==========================================
   画面幅の小さいスマホ向け微調整
   ========================================== */

@media screen and (max-width: 359px) {

    .sp-price-page .sp-price-card li span,
    .sp-price-page .sp-urn-card li span {
        font-size: 12px;
    }

    .sp-price-page .sp-price-card li strong,
    .sp-price-page .sp-urn-card li strong {
        font-size: 16px;
    }

    .sp-site .sp-tel-info small {
        font-size: 10px;
    }

}


/* ==========================================
   グリーン強化：全5ページ共通
   ========================================== */

@media screen and (max-width: 940px) {

    /* グリーンの共通カラー */
    .sp-site {
        --green-main: #50765A;
        --green-deep: #3D624A;
        --green-soft: #E9F3E9;
        --green-line: #B5CFBA;
    }


    /* ======================================
       1. ページ全体
       ====================================== */

    /* ヘッダー下部のライン */
    .sp-site .sp-header {
        border-bottom-color: var(--green-line);
    }

    /* 白い本文エリア上部にアクセント */
    .sp-site .sp-content {
        border-top: 4px solid var(--green-line);
    }

    /* 全体のセクション区切り */
    .sp-site .sp-section,
    .sp-price-page .sp-price-section + .sp-price-section,
    .sp-info-page .sp-info-section,
    .sp-flow-page .sp-flow-section,
    .sp-access-page .sp-access-section {
        border-top-color: var(--green-line);
    }


    /* ======================================
       2. 下層ページのタイトル背景
       ====================================== */

    .sp-price-page .sp-price-hero,
    .sp-info-page .sp-info-hero,
    .sp-flow-page .sp-flow-hero,
    .sp-access-page .sp-access-hero {
        background: var(--green-main);
    }

    /* 英語の小見出し */
    .sp-price-page .sp-price-hero span,
    .sp-info-page .sp-info-hero span,
    .sp-flow-page .sp-flow-hero span,
    .sp-access-page .sp-access-hero span {
        color: #E4F2E6;
    }


    /* ======================================
       3. 各ページの見出し
       ====================================== */

    .sp-site .sp-section-title,
    .sp-price-page .sp-price-title,
    .sp-info-page .sp-info-title,
    .sp-info-page .sp-info-section-title,
    .sp-flow-page .sp-flow-title,
    .sp-access-page .sp-access-title {
        color: var(--green-deep);
    }

    /* 左側の装飾線 */
    .sp-price-page .sp-price-title,
    .sp-info-page .sp-info-title,
    .sp-flow-page .sp-flow-title,
    .sp-access-page .sp-access-title {
        border-left-color: var(--green-main);
    }

    /* トップページの装飾 */
    .sp-site .sp-plus::before,
    .sp-site .sp-info-plus::before {
        color: var(--green-main);
    }


    /* ======================================
       4. トップページ
       ====================================== */

    /* お客様の声 */
    .sp-site .sp-voice-item {
        background: #F5F9F4;
        border-color: var(--green-line);
    }

    .sp-site .sp-voice-person,
    .sp-site .sp-voice-person span {
        color: var(--green-deep);
    }

    /* 対応地域の文章 */
    .sp-site .sp-area-text {
        color: var(--green-deep);
        font-weight: 600;
    }


    /* ======================================
       5. ご料金ページ
       ====================================== */

    /* 料金カード全体 */
    .sp-price-page .sp-price-card,
    .sp-price-page .sp-urn-card {
        border-color: var(--green-line);
    }

    /* カード見出し */
    .sp-price-page .sp-price-card h4,
    .sp-price-page .sp-urn-card h3 {
        background: #DDECDD;
        color: var(--green-deep);
    }

    /* 犬種などの補足部分 */
    .sp-price-page .sp-price-kind {
        background: #F1F7F0;
    }

    /* 料金表の区切り */
    .sp-price-page .sp-price-card li,
    .sp-price-page .sp-urn-card li {
        border-bottom-color: #DCE9DD;
    }

    /* 注意事項 */
    .sp-price-page .sp-price-notes {
        background: #F1F7F0;
        border-color: var(--green-line);
    }

    /* 納骨・供養の交互背景 */
    .sp-price-page .sp-memorial-item:nth-child(even) {
        background: var(--green-soft);
    }

    /* 納骨・供養の見出し */
    .sp-price-page .sp-memorial-item h3 {
        color: var(--green-deep);
    }

    /* お問い合わせエリア */
    .sp-price-page .sp-price-contact {
        background: var(--green-soft);
    }

    .sp-price-page .sp-price-contact p {
        color: var(--green-deep);
    }


    /* ======================================
       6. 霊園のご案内
       ====================================== */

    /* 合同慰霊祭 */
    .sp-info-page .sp-info-memorial {
        background: #F5F9F3;
        border-color: var(--green-line);
    }

    .sp-info-page .sp-info-memorial-heading {
        background: #DDECDD;
    }

    .sp-info-page .sp-info-memorial-heading h3 {
        color: var(--green-deep);
    }

    /* 認可霊園情報 */
    .sp-info-page .sp-info-license {
        background: var(--green-soft);
        border-color: var(--green-line);
    }

    .sp-info-page .sp-info-small-heading {
        color: var(--green-deep);
    }

    .sp-info-page .sp-info-license li {
        border-color: var(--green-line);
        color: var(--green-deep);
    }

    /* 火葬システムの紹介 */
    .sp-info-page .sp-info-highlight {
        background: var(--green-soft);
        border-left-color: var(--green-main);
    }

    .sp-info-page .sp-info-highlight strong {
        color: var(--green-deep);
    }

    /* 写真ギャラリー */
    .sp-info-page .sp-info-gallery-item {
        border-color: var(--green-line);
    }

    .sp-info-page .sp-info-gallery-item p {
        background: #DDECDD;
        color: var(--green-deep);
    }

    /* お問い合わせ */
    .sp-info-page .sp-info-contact {
        background: var(--green-soft);
    }

    .sp-info-page .sp-info-contact h2 {
        color: var(--green-deep);
    }


    /* ======================================
       7. 葬儀の流れ
       ====================================== */

    /* 火葬手順カード */
    .sp-flow-page .sp-flow-steps li {
        background: #F6FAF5;
        border-color: var(--green-line);
    }

    /* 手順番号 */
    .sp-flow-page .sp-flow-steps li::before {
        background: var(--green-main);
    }

    .sp-flow-page .sp-flow-steps strong {
        color: var(--green-deep);
    }

    /* 注意事項 */
    .sp-flow-page .sp-flow-note {
        background: var(--green-soft);
        border-color: var(--green-line);
    }

    .sp-flow-page .sp-flow-note h3 {
        color: var(--green-deep);
    }

    /* 火葬方法の見出し */
    .sp-flow-page .sp-flow-option h3 {
        background: #DDECDD;
        color: var(--green-deep);
    }

    /* 安置方法の見出し */
    .sp-flow-page .sp-flow-care-item h3 {
        background: var(--green-soft);
        border-left-color: var(--green-main);
        color: var(--green-deep);
    }

    /* ご遺体の安置案内 */
    .sp-flow-page .sp-flow-care-lead {
        background: var(--green-soft);
        color: var(--green-deep);
    }

    /* 料金ページへの案内 */
    .sp-flow-page .sp-flow-bottom-link {
        background: var(--green-soft);
    }


    /* ======================================
       8. アクセス
       ====================================== */

    /* 冒頭の案内 */
    .sp-access-page .sp-access-intro {
        background: var(--green-soft);
    }

    .sp-access-page .sp-access-intro .sp-access-catch {
        color: var(--green-deep);
    }

    /* 霊園情報カード */
    .sp-access-page .sp-access-card {
        border-color: var(--green-line);
    }

    .sp-access-page .sp-access-card h3 {
        background: #DDECDD;
        color: var(--green-deep);
    }

    /* 住所・項目ラベル */
    .sp-access-page .sp-access-label {
        color: var(--green-deep);
    }

    /* Googleマップを見るボタン */
    .sp-access-page .sp-access-map-button {
        background: var(--green-main);
    }

    /* 電話番号・営業時間カード */
    .sp-access-page .sp-access-contact-card {
        background: var(--green-soft);
        border-color: var(--green-line);
    }

    .sp-access-page .sp-access-contact-card h3 {
        color: var(--green-deep);
    }

    /* 周辺案内図 */
    .sp-access-page .sp-access-local-map {
        background: var(--green-soft);
    }

    .sp-access-page .sp-access-local-map h3 {
        color: var(--green-deep);
    }

    /* 本社事務所 */
    .sp-access-page .sp-access-office {
        background: #F5F9F3;
        border-color: var(--green-line);
    }

    .sp-access-page .sp-access-office h3 {
        color: var(--green-deep);
    }

    /* ご来園前のご案内 */
    .sp-access-page .sp-access-bottom {
        background: var(--green-soft);
    }

    .sp-access-page .sp-access-bottom h2 {
        color: var(--green-deep);
    }


    /* ======================================
       9. フッター・固定電話ボタン
       ====================================== */

    /* フッター全体を深緑に */
    .sp-site .sp-footer {
        background: #355640;
    }

    /* フッター内の文字 */
    .sp-site .sp-footer p {
        color: #FFFFFF;
    }

    /* 画面下部の予約制案内 */
    .sp-site .sp-fixed-tel-message {
        background: var(--green-main);
    }

}

/* ==========================================
   骨壷・骨入れ 6枚の写真ギャラリー
   ========================================== */

@media screen and (max-width: 940px) {

    /* 2列で表示 */
    .sp-price-page .sp-price-example-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin: 18px 0 12px;
    }

    /* 各画像の枠 */
    .sp-price-page .sp-price-example-item {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4 / 3;
        padding: 6px;
        background: #F1F7F0;
        border: 1px solid #B5CFBA;
        border-radius: 5px;
        overflow: hidden;
    }

    /* 画像全体が収まるように表示 */
    .sp-price-page .sp-price-example-item img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
        object-fit: contain;
    }

    /* 写真下部の説明 */
    .sp-price-page .sp-price-example > p {
        margin-top: 12px;
        color: #50765A;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
    }

}


/* ==========================================
   税込価格の表示
   ========================================== */

/* PC・スマホ共通 */
.price-tax {
    display: block;
    margin-top: 3px;
    color: #50765A;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
}

/* PC版の料金表 */
#content_right .shoptable .price-tax,
#content_right .shoptable02 .price-tax {
    font-size: 11px;
    white-space: nowrap;
}

/* PC版の納骨料金 */
#content_right .pc-memorial-price {
    display: inline-block;
    vertical-align: top;
}

#content_right .pc-memorial-price .price-tax {
    font-size: 11px;
}


/* スマートフォン版 */
@media screen and (max-width: 940px) {

    /* 金額を右揃え */
    .sp-price-page .sp-price-card li strong,
    .sp-price-page .sp-urn-card li strong {
        display: block;
        text-align: right;
    }

    /* 税込価格 */
    .sp-price-page .price-tax {
        display: block;
        margin-top: 3px;
        color: #50765A;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        white-space: normal;
    }

    /* 納骨・供養の税込価格 */
    .sp-price-page .sp-memorial-item .price-tax {
        margin-top: 5px;
        font-size: 13px;
    }

}


/* ==========================================
   全ページ共通：文字の可読性向上
   グレーを黒に・文字を太めに
   ========================================== */

@media screen and (max-width: 940px) {

    /* --------------------------------------
       1. 本文全体の太さ
       -------------------------------------- */

    .sp-site .sp-content {
        color: #111111;
    }

    .sp-site .sp-content p,
    .sp-site .sp-content li {
        font-weight: 600;
    }

    /* 見出しはしっかり太字 */
    .sp-site .sp-content h2,
    .sp-site .sp-content h3,
    .sp-site .sp-content h4 {
        font-weight: 700;
    }


    /* --------------------------------------
       2. トップページ
       -------------------------------------- */

    /* サービス・信頼の箇条書き */
    .sp-site .sp-service-list li,
    .sp-site .sp-trust-list li {
        color: #111111;
        font-weight: 600;
    }

    /* お客様の声 */
    .sp-site .sp-voice-item p {
        color: #111111;
        font-weight: 600;
    }

    /* お客様の年代など */
    .sp-site .sp-voice-person {
        font-size: 12px;
        font-weight: 700;
    }

    /* 冒頭のキャッチコピー */
    .sp-site .sp-intro-title p,
    .sp-site .sp-intro-message p {
        font-weight: 700;
    }

    /* 写真上の補足文字 */
    .sp-site .sp-fv p {
        font-size: clamp(12px, 3vw, 14px);
        font-weight: 700;
    }

    /* セクション見出しの補足 */
    .sp-site .sp-section-title small {
        font-weight: 600;
    }


    /* --------------------------------------
       3. ご料金ページ
       -------------------------------------- */

    /* 説明文 */
    .sp-price-page .sp-price-description,
    .sp-price-page .sp-price-kind {
        color: #111111;
        font-weight: 600;
    }

    /* ペットの種類の補足 */
    .sp-price-page .sp-price-card h4 small,
    .sp-price-page .sp-urn-card h3 small {
        color: #111111;
        font-weight: 600;
    }

    /* 料金項目名 */
    .sp-price-page .sp-price-card li > span,
    .sp-price-page .sp-urn-card li > span {
        color: #111111;
        font-weight: 600;
    }

    /* 注意書き */
    .sp-price-page .sp-price-notes p {
        color: #111111;
        font-weight: 600;
    }

    /* 納骨・供養の説明 */
    .sp-price-page .sp-memorial-item p {
        color: #111111;
        font-weight: 600;
    }

    /* お問い合わせの説明 */
    .sp-price-page .sp-price-contact p {
        color: #111111;
        font-weight: 600;
    }

    /* 税込価格はグリーンを維持 */
    .sp-price-page .price-tax {
        color: #3D624A;
        font-weight: 700;
    }


    /* --------------------------------------
       4. 霊園のご案内
       -------------------------------------- */

    .sp-info-page .sp-info-intro p,
    .sp-info-page .sp-info-description,
    .sp-info-page .sp-info-memorial-body p,
    .sp-info-page .sp-info-recommend p,
    .sp-info-page .sp-info-gallery-lead,
    .sp-info-page .sp-info-highlight p,
    .sp-info-page .sp-info-contact p {
        color: #111111;
        font-weight: 600;
    }

    /* ギャラリー写真の説明 */
    .sp-info-page .sp-info-gallery-item p {
        font-weight: 700;
    }


    /* --------------------------------------
       5. 葬儀の流れ
       -------------------------------------- */

    .sp-flow-page .sp-flow-intro p,
    .sp-flow-page .sp-flow-lead,
    .sp-flow-page .sp-flow-steps p,
    .sp-flow-page .sp-flow-note p,
    .sp-flow-page .sp-flow-list li,
    .sp-flow-page .sp-flow-care-item p,
    .sp-flow-page .sp-flow-bottom-link p {
        color: #111111;
        font-weight: 600;
    }

    /* フローチャート */
    .sp-flow-page .sp-flow-chart {
        color: #111111;
        font-weight: 700;
    }

    .sp-flow-page .sp-flow-chart-step small {
        font-weight: 600;
    }


    /* --------------------------------------
       6. アクセス
       -------------------------------------- */

    .sp-access-page .sp-access-intro > p:last-child,
    .sp-access-page .sp-access-detail p,
    .sp-access-page .sp-access-notice p,
    .sp-access-page .sp-access-contact-card p,
    .sp-access-page .sp-access-other-tel p,
    .sp-access-page .sp-access-description,
    .sp-access-page .sp-access-map-hint,
    .sp-access-page .sp-access-office p,
    .sp-access-page .sp-access-bottom p {
        color: #111111;
        font-weight: 600;
    }


    /* --------------------------------------
       7. ページ上部・フッター
       -------------------------------------- */

    /* 下層ページのタイトル下の説明 */
    .sp-price-page .sp-price-hero p,
    .sp-info-page .sp-info-hero p,
    .sp-flow-page .sp-flow-hero p,
    .sp-access-page .sp-access-hero p {
        font-weight: 600;
    }

    /* フッターの住所・電話番号 */
    .sp-site .sp-footer > p:not(.sp-copyright) {
        font-weight: 700;
    }

    /* 固定電話ボタンの説明 */
    .sp-site .sp-fixed-tel-message {
        font-weight: 700;
    }

}

/* スマホヘッダーの文字の表示崩れを解消 */
@media screen and (max-width: 940px) {

    .sp-header-logo > span {
        display: none;
    }

}


/* ==========================================
   PC版：骨壷・骨入れ 6枚の写真ギャラリー
   ========================================== */

@media screen and (min-width: 941px) {

    .pc-price-example {
        width: 100%;
        max-width: 600px;
        margin: 25px auto 30px;
        text-align: center;
    }

    /* 3列×2段 */
    .pc-price-example-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    /* 写真の枠 */
    .pc-price-example-item {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 4 / 3;
        padding: 8px;
        box-sizing: border-box;
        background: #F1F7F0;
        border: 1px solid #B5CFBA;
        border-radius: 5px;
        overflow: hidden;
    }

    /* 写真を切らずに全体表示 */
    .pc-price-example-item img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
        margin: 0;
    }

    /* キャプション */
    .pc-price-example > p {
        margin-top: 12px;
        color: #50765A;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
    }

}