@charset "UTF-8";

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0.04em; /* 文字と文字の間に少しだけゆとりを持たせ、雑誌やパンフレットのような上品さを演出 */
}
/* =================================================================
   レスポンシブ対応共通設定（画面幅 640px 以下：スマホ・タブレット）
   ================================================================= */

@media screen and (max-width: 900px) {
    /* スマホ表示ではスマホ用メインビジュアル・メニューを表示する */
    .sp-top-visual {
        display: block !important;
    }
    /* スマートフォン表示のときは、このクラスが付いた要素を非表示にする */
    .pc-only-image {
        display: none !important;
    }
    /* ==========================================================
       スマホ表示のとき、ヘッダーのロゴを小さくする
       ========================================================== */
    .site-logo {
        width: 40% !important;       /* スマホ画面に対するロゴの幅（お好みで 40%〜60% に調整可能） */
        max-width: 200px !important; /* 大きくなりすぎるのを防ぐ上限値 */
        height: auto !important;
        display: block !important;
        margin: 15px auto !important; /* 中央寄せにしつつ上の余白を調整 */
    }
    /* ロゴの周りにある余分な余白（パディングやマージン）をコンパクトにする */
    .background_0, 
    .background_2 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* スマホ用トップヘッダー帯を画面幅いっぱいに完全にフィットさせる */
    .mobile-top-bar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: #8a9c8a !important;
        color: #ffffff !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
    }
    .mobile-top-text {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .mobile-top-bar .topbutton {  
        border-radius: 4px !important;
        background-color: transparent !important;
        border: solid 1px #ffffff !important;
        padding: 6px 8px !important; 
        cursor: pointer !important;
    }

    /* 下層ページのスマホ用メインビジュアル画像も画面左右いっぱいに広げる */
    .sp-top-visual img {
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        height: auto !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    
    /* ==========================================================
       4分割メニュー全体を画面左右いっぱいに広げる（全ページ共通）
       ========================================================== */
    .nopc-menu-table {
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 2. 各ページのヘッダ画像（タイトル画像）を画面端まで拡張 */
    .article-body > div.mb-10 > img,  
    .article-body > div.mb-20 > img,
    .article-body > div.mb-40 > img {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        height: auto !important;
    }

    /* 記事のタイトルや見出しがスマホ等で綺麗に折り返されるようにする設定 */
    .article-body h1, 
    .article-body h2, 
    .article-body h3,
    .itemTitle {
        font-size: 18px !important;
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;      /* ★追加：強制1行化を解除して自然な折り返しを許可 */
        line-height: 1.5 !important;         /* ★追加：複数行になったときに文字が重ならないよう行間を調整 */
        width: 100% !important;              /* ★追加：横幅をスマホの画面幅にきっちり収める */
        max-width: 100% !important;          /* ★追加：はみ出し防止の念押し */
        box-sizing: border-box !important;
    }
    /* 3. オーナー画像を画面端まで拡張 */
    .floatLeftPic,
    .floatRightPic {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        float: none !important;
    }
    .floatLeftPic img,
    .floatRightPic img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    /* ハンバーガーメニュー全体（背景透過 ＆ 高さ・レイアウト調整） */
    #slide_box {
        display: none; 
        position: fixed !important;
        top: 15px !important;         /* 画面の上下に少し余白を持たせる場合 */
        left: 10px !important;        /* 左右に少し余白を持たせる場合 */
        width: calc(100% - 20px) !important;
        
        /* ▼ 高さの調整（画面いっぱいにせず、内容に合わせてコンパクトにする場合） */
        height: auto !important;
        max-height: 90vh !important;  /* 画面の高さを超えないようにしつつ制限する */
        
        /* ▼ 透過の調整（rgbaの最後の数値 0.85 で透明度を調整できます。1に近いほど濃く、0に近いほど透明になります） */
        background-color: rgba(138, 156, 138, 0.85) !important; 
        
        z-index: 9999 !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        border-radius: 6px !important; /* 角丸にするとすっきり見えます */
    }

    #batsu {
        float: right !important;
        font-size: 40px !important;
        color: white !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }

    #slide_box .menu-title {
        color: white !important;
        font-size: 15px !important;
        font-weight: bold !important;
        margin-bottom: 20px !important;
        margin-top: 10px !important;
        line-height: 1.5 !important;
        clear: both !important;
    }

    #slide_box a {
        color: #fff !important;
        line-height: 30px !important;
        border-bottom: solid 1px #ffffff !important;
        display: block !important;
        text-decoration: none !important;
        padding: 10px 0 10px 10px !important;
        font-size: 16px !important;
    }

    /* 1. 画面全体の横スクロール防止 ＆ スマホ時のみ縦スクロールバー非表示 */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. ボックスサイズの基準統一 */
    * {
        box-sizing: border-box !important;
    }

    /* 3. 画像のレスポンシブ化 */
    img, picture, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 4. 左右のベース余白を最小限にして幅を拡張する */
    .layout_centering {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }



    /* ==========================================================
       スマホ用静止画像（sp-static-image）は横幅いっぱいに表示する
       ========================================================== */

    .sp-static-image {
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        height: auto !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
/* ==========================================================
       スライダー周辺の親ラッパーに残る不要な高さ・余白を完全クリア
       ========================================================== */
    div[style*="position:relative"][style*="height"],
    div[style*="width:900px"][style*="height"] {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ロゴ周辺のコンテナの余白も詰める */
    .background_0, 
    .background_2,
    .layout_centering {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    





    /* 5. 内側の背景や記事枠のパディングを解除 */
    .background_0, .background_1, .background_2, .background_3, .background_3_2,
    .layout_leftbox, .box.leftbox, .sidebar,
    #page_contents_bg, #page_contents, .article-body,
    .text-center {
        width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: static !important;
    }

/* 6. インラインスタイルの絶対配置や固定幅・高さを解除 */
    div[style*="position:absolute"],
    div[style*="position: absolute"],
    div[style*="width:900px"],
    div[style*="height:378px"],
    div[style*="height:398px"],
    div[style*="height:210px"] { /* ← ★ここ（height:210pxの解除）を追加 */
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        float: none !important;
        margin: 0 !important;
    }

    /* 7. インラインスタイルの固定高さを解除 */
    div[style*="height:398px"], div[style*="height: 398px"],
    div[style*="height:378px"], div[style*="height: 378px"] {
        height: auto !important;
    }

    /* 8．PC用のスライダーを完全に隠す */
    #camera_wrap_1,
    .camera_wrap {
        display: none !important;
    }

        /* 9. スライダー下のボタンの縦積み調整 */
    .slideP, #top_2, #top_3 {
        position: static !important;
        width: 100% !important;
        margin: 10px 0 !important;
        text-align: center !important;
    }
    .topMenu {
        table-layout: fixed;
        width: 100%;
        border-collapse: collapse;
    }
    .topMenu td {
        background-color: #231815 !important;
        padding: 4px 2px !important; /* 上下パディングを狭くして高さを低く抑える */
        text-align: center !important;
        border: solid 1px #ffffff !important;
    }
    .topMenu a {
        color: White !important;
        text-decoration: none !important;
        display: block !important;
    }
    .topMenu .title {
        font-size: 10px !important;
        line-height: 2.0 !important;
        font-weight: bold !important;
        text-transform: uppercase;
        margin: 0 !important;
    }
    .topMenu .sub {
        font-size: 10px !important;
        line-height: 2.0 !important;
        font-weight: bold !important;
        margin: 0 !important;
        color: #ddd !important;
    }

/* ==========================================================
       オーナー写真の回り込み（float）を解除し、スマホでは中央に配置する
       ========================================================== */
    .floatRightPic {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto 20px auto !important;
    }

    .floatRightPic img {
        display: block !important;
        width: 80% !important;       /* スマホ画面に対する写真の大きさを調整 */
        max-width: 280px !important; /* 大きくなりすぎるのを防ぐ最大幅 */
        height: auto !important;
        margin: 0 auto !important;
    }

    .floatLeftPic {
        float: none !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto 20px auto !important;
    }

    .floatLeftPic img {
        display: block !important;
        width: 80% !important;       /* スマホ画面に対する写真の大きさを調整 */
        max-width: 280px !important; /* 大きくなりすぎるのを防ぐ最大幅 */
        height: auto !important;
        margin: 0 auto !important;
    }

    /* ==========================================================
       hn 見出しの背景残り・文字見切れを完全に解消する
    ========================================================== */
    h1{

        background: #fff !important; /* 背景色・画像・グラデーションをすべて白にリセット */
        background-image: none !important; /* 強制的に背景画像を消去 */

        padding:5px;
        padding-bottom:4px;
        padding-top:5px;
        padding-left:10px;
        font-size:18px;
        color: #8a9c8a;	
        font-weight:bold;				
        border-bottom:solid 2px #8a9c8a;
        border-left:solid 0px #8a9c8a;

        margin-bottom: 10px;
        margin-top: 0px;
        /* ▼ ここから追加：高さ固定を解除して、見切れと線の位置を直す ▼ */
        height: auto !important;
        line-height: 1.5 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    
    }

    h3
        {
            padding: 5px !important;
            font-size: 10px;
            color: #8a9c8a;	
            font-weight: bold;				
            background: #fff !important; 
            background-image: none !important; 
            background-color: #ffffff;
            border: solid 1px #8a9c8a;
            margin-bottom: 25px;
            margin-top: 20px;
            clear: both;

            /* ▼ ここから追加：固定幅と高さを解除して文字見切れを防ぐ設定 ▼ */
            width: 100% !important;
            max-width: 100% !important;
            height: auto !important;
            box-sizing: border-box !important;
            overflow-wrap: break-word !important; /* 長い文字が来ても枠内で折り返す */
        }
        
    h4 {
        background: #fff !important; /* 背景色・画像・グラデーションをすべて白にリセット */
        background-image: none !important; /* 強制的に背景画像を消去 */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        overflow-wrap: break-word !important;
        float: none !important;
        clear: both !important;
        
        /* ▼ スマホでの中央揃えを確実に効かせるための追加・調整 ▼ */
        display: flex !important;
        justify-content: center !important;  /* ★追加：横方向を中央に寄せる */
        align-items: center !important;      /* ★追加：縦方向も中央に寄せる */
        text-align: center !important;
        
        font-size: 14px;
        color: #8a9c8a;
        border-bottom: dotted 2px #8a9c8a;	
    }


    .voice-title-orange {
            font-size: 14px !important;    /* スマホのときだけ14pxに上書き */
        }
        
    .voice-title-purple {
            font-size: 14px !important;    /* スマホのときだけ14pxに上書き */
        }
    .voice-user {
            font-size: 12px !important;    /* スマホのときだけ12pxに上書き */
            color: #8a9c8a !important;
            font-weight:bold;			
        }
        

/* ==========================================================
       「サロンからのご挨拶」見出しとオーナー写真の間の余白調整
       ========================================================== */
    /* 見出し（画像）の下部にマージンを持たせる */
    .column-heading img {
        margin-bottom: 25px !important; /* お好みに応じて 20px〜30px で調整可能です */
    }




/* ==========================================================
       スマホ専用追加コンテンツ（写真1枚 ＆ 予約ボタン）
       ========================================================== */
    .sp-only-contents {
        display: block !important;
        width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }

    /* 写真1枚のスタイル（画面幅いっぱいにきれいにおさめる） */
    .sp-single-photo {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    .sp-single-photo img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        border-radius: 4px !important;
        object-fit: cover !important;
    }

    /* ご予約はこちらボタンのスタイル */
    .sp-reserve-area {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* ==========================================================
       スマホ表示のとき、予約カレンダーのサイズを小さくする
       ========================================================== */
    .flatpickr-calendar {
        transform: scale(0.85) !important; /* 全体を85%のサイズに縮小（必要に応じて 0.8〜0.9 で微調整可能です） */
        transform-origin: top center !important; /* 上部中央を基準に縮小させる */
    }

/* ==========================================================
       コラム一覧のスマホ用2列化
       ========================================================== */
    .columnList {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important; /* 内部のfloatを確実に囲う */
    }
    .columnList .itemBox {
        width: 48% !important;       /* 2列にするため幅を約半分に設定 */
        max-width: 48% !important;
        float: left !important;      /* 左に回り込ませて横並びにする */
        margin: 0 4% 20px 0 !important; /* 右側に少し隙間をあける */
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    /* 2列のうち、右側のアイテム（偶数番目）は右マージンをゼロにする */
    .columnList .itemBox:nth-child(even) {
        margin-right: 0 !important;
    }
    .columnList .itemBox > a {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .columnList .itemPicFrame {
        width: 100% !important;
        max-width: 100% !important;
        height: 100px !important;      /* ★写真の高さを固定（※お好みで 100px〜130px に調整可能です） */
        overflow: hidden !important;   /* 枠からはみ出た部分を綺麗に切り取る */
        margin: 0 0 5px 0 !important; 
        padding: 0 !important;
        text-align: center !important;
        line-height: 0 !important;
    }
    .columnList .itemPicFrame img {
        width: 100% !important; 
        max-width: 100% !important;
        height: 100% !important;       /* ★高さをフレームに合わせる */
        object-fit: cover !important;  /* ★縦横比を維持したまま枠いっぱいにトリミング */
        object-position: top !important; /* ★この1行を追加して上部を基準にする */
        display: block !important;
        margin: 0 !important;
    }

    .columnList .itemTitle {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px 0 !important; 
        padding: 0 0 6px 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
        font-size: 13px !important;
        font-weight: bold !important;
        border: none !important;
        line-height: 1.4 !important;
    }
    
    /* タイトル文字自体の色（リンクが含まれている場合も考慮） */
    .columnList .itemTitle,
    .columnList .itemTitle a {
        color: #937c6b !important; /* ★文字の色 */
        text-decoration: underline !important; /* 各行の文字ごとに下線を付ける */
    }
    .columnList .itemText {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        text-align: left !important;
        font-size: 11px !important; /* 2列の幅に合わせて文字サイズを少し調整 */
    }


    /* ==========================================================
       スマホ表示のときだけ「お客様の声」のバナーリンクを非表示にする
       ========================================================== */
    a[href="voice.html"],
    img[src*="okyakusamanokoe_off.png"] {
        display: none !important;
    }


/* ==========================================================
       スマホ表示のとき、サイドバー内の「MENU一覧」を非表示にする
       ========================================================== */
    .layout_rightbox .button2istitem {
        display: none !important;
    }
    /* ==========================================================
       スマホ表示のとき、サイドバーの「ご予約はこちら」を非表示にする
       ========================================================== */
    .layout_rightbox a[href="/reserve.php"] {
        display: none !important;
    }

/* ==========================================================
       png画像を背景にして「ご予約はこちら」の文字を重ねるスタイル
       ========================================================== */
    .sp-reserve-banner {
        display: block !important;
        width: 100% !important;
        height: 50px !important; /* ※使用するpng画像の高さに合わせて調整してください */
        background-image: url('/img/reservation-bg.png') !important; /* 使用したいpng画像のパス */
        background-size: 100% 100% !important; /* 画像を引き延ばして枠に合わせる場合 */
        background-repeat: no-repeat !important;
        background-position: center !important;
        
        /* 文字の配置・装飾 */
        color: #ffffff !important;          /* 文字の色（画像に合わせて調整してください） */
        font-size: 16px !important;         /* 文字のサイズ */
        text-align: center !important;      /* 左右中央揃え */
        line-height: 40px !important;       /* 高さと同じ値を指定すると上下中央に配置されます */
        text-decoration: none !important;   /* 下線を消す */
        box-sizing: border-box !important;
        border-top: solid 5px #b7c2b6;
        border-bottom: solid 5px #b7c2b6;
        width: 80%; 
        margin-bottom: 0px !important;

    }



/* ==========================================================
       スマホ表示のとき、サイドバーのコラム画像を画面左右いっぱいに広げる(>:直下要素指定)
       ========================================================== */
    .layout_rightbox > a[href="/column.html"] {
        display: block !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        box-sizing: border-box !important;
        margin-bottom: -80px !important; /* ★この1行を追加して下のclip分の余白を詰める */
    }
    .layout_rightbox > a[href="/column.html"] img {
        width: 100vw !important;
        max-width: none !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        clip-path: inset(0 0 100px 0) !important; /* ★ここを追加：下からnnpx分を削る */
    }
/* ==========================================================
       スマホ表示のとき、サイドバー（.layout_rightbox）の右側余白を無くして画面いっぱいに広げる
       ========================================================== */
    .layout_rightbox {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
        padding: 0 10px !important; /* 画面端に少し余白を持たせる場合 */
        margin: 0 !important;
    }

    /* ==========================================================
       メディア掲載情報：スマホ表示のときは画像を非表示、テキスト見出しを表示する
       ========================================================== */
    .media-banner-pc {
        display: none !important;
    }
    .media-banner-sp {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important; /* ★文字を中央寄せにする */
    }

/* ==========================================================
       スマホ表示のとき、メディア掲載の「詳細ボタン」を非表示にする(>直下指定)
       ========================================================== */
    .layout_rightbox > a[href="/media.html"] {
        display: none !important;
    }

/* ==========================================================
       スマホ表示のとき、Facebookウィジェットを非表示にする
       ========================================================== */
    .layout_rightbox .fb-page,
    .layout_rightbox #fb-root {
        display: none !important;
    }

    /* サイドバー内の画像やテーブルがはみ出したり縮こまったりするのを防ぐ */
    .layout_rightbox table {
        width: 100% !important;
        max-width: 100% !important;
    }
    .layout_rightbox img {
        max-width: 100% !important;
        height: auto !important;
    }


    /* PC用のヘッダーメニューをスマホ表示では非表示 */
    #headerMenu {
        display: none !important;
    }

    /* スマホ表示のとき、外側の背景コンテナの背景や不要なボックスを無効化する */
    .background_0, 
    .background_2 {
        background: none !important;
        background-image: none !important;
        background-color: #fff !important; /* 必要に応じて背景色を白などに指定 */
    }
    /* ==========================================================
       スマホ表示のとき、スマホ専用テキストメニューを表示・装飾する
       ========================================================== */
    .sp-text-menu-box {
        display: block !important;
        margin-top: 25px;
        margin-bottom: 20px !important; /* ★ここに下の隙間を指定します（お好みで 15px〜30px 等に調整可能です） */
        border: 1px solid #8a9c8a;
        background: #fff;
    }


    .sp-menu-header {
        background-color: #8a9c8a;
        color: #ffffff;
        padding: 12px 10px;
        font-weight: bold;
        line-height: 1.5;
    }
    .sp-menu-sub {
        font-size: 11px;
        font-weight: normal;
        color: #f0f0f0;
    }
    .sp-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sp-menu-list li {
        border-bottom: 1px dotted #8a9c8a;
    }
    .sp-menu-list li:last-child {
        border-bottom: none;
    }
    .sp-menu-list li a {
        display: block;
        padding: 12px 15px;
        text-decoration: none;
        color: #333;
    }

    /* access画面などのGoogleマップ（iframe）の高さと幅をスマホ用に調整する */
    .article-body iframe,
    div iframe[src*="google.com/maps"] {
        width: 100% !important;
        height: 350px !important; /* ★スマホで見やすい高さ（300px〜350px程度）に固定 */
        display: block !important;
        border: none !important;
    }
    
    /* マップを囲んでいる親要素の余分な高さやスタイルをクリアする */
    .article-body div[style*="height"] {
        height: auto !important;
        min-height: 0 !important;
    }






/* ==========================================================
       スマホ表示のとき、フッター周りのレイアウト崩れを解消する
========================================================== */
    
    /* 1. PC用のフッターリンク群（#footcontents）はスマホでは非表示にする */
    .background_4 #footcontents {
        display: none !important;
    }

    /* 2. フッターのロゴをスマホ画面の中央に綺麗に配置する */
    .background_4 footer {
        text-align: center !important;
        padding: 5px 0 !important;
    }

    .background_4 footer img {
        float: none !important;
        display: block !important;
        margin: 0 auto !important;
        margin-top: 15px !important;   /* 元の 60px から狭く調整します */
        margin-bottom: 15px !important;
        max-width: 80% !important; /* スマホ画面に合わせて縮小 */
        height: auto !important;
    }
    
    /* 背景画像の収まりを綺麗にする設定（必要に応じて） */
    .background_4 {
        background-size: cover !important;
        background-position: center center !important;
    }


/* ==========================================================
       スマホ表示のとき、フッター背景の固定高さを解除してぴったり合わせる
       ========================================================== */
    .background_4,
    .background_4 .layout_centering,
    .background_4 footer {
        height: auto !important;
        min-height: 0 !important;
    }



}
/* ==========================================================
       スマホ表示用の定義（End）
========================================================== */






/* =================================================================
   PC画面（幅 769px 以上）ではスマホ専用パーツを完全に非表示にする
   ================================================================= */
@media screen and (min-width: 901px) {
    .mobile-top-bar,
    .sp-static-image,
    .nopc-menu, 
    .sp-text-menu-box,
    #slide_box, 
    .sp-reserve-banner,
    .nopc-menu-table {
        display: none !important;
    }
 

}