@charset "utf-8";
/* CSS Document */


 <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>コテージ利用料金表</title>
    <style>
        /* ==========================================================================
           1. 共通リセット & 共通デザイン（PC・スマホ共通）
           ========================================================================== */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
body {
    font-family: ...;
    background: ...;
    overflow-x: hidden; /* 💡 画面の横揺れ・右側へのはみ出しを完全に防ぐ */
}


        .container {
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
        }

        section {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.7);
        }

        h2 {
            font-size: 1.5rem;
            font-weight: 800;
            margin-bottom: 25px;
            position: relative;
            padding-left: 15px;
            display: inline-block;
            background: linear-gradient(90deg, #0284c7, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 15%;
            height: 70%;
            width: 5px;
            background: linear-gradient(to bottom, #0284c7, #3b82f6);
            border-radius: 4px;
        }

        .info-list li {
            list-style: none;
            margin-bottom: 15px;
            color: #334155;
            font-size: 0.95rem;
        }

        .price-list li {
            list-style: none;
            position: relative;
            padding-left: 30px;
            margin-bottom: 14px;
            color: #334155;
            font-size: 0.95rem;
        }
        .price-list li::before {
            content: counter(li-counter);
            counter-increment: li-counter;
            position: absolute;
            left: 0;
            top: 2px;
            background: linear-gradient(135deg, #f97316, #ffedd5);
            color: #ea580c;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: bold;
        }
        .price-list { counter-reset: li-counter; }

        .date-dl {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 12px 15px;
        }
        .date-dl dt {
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 6px;
            text-align: center;
            font-size: 0.9rem;
        }
        .date-dl dd { color: #334155; align-self: center; font-size: 0.95rem; }

        .gaiyou-box {
            margin-top: 20px;
            background: linear-gradient(90deg, #f0fdf4, #e0f2fe);
            border-left: 5px solid #10b981;
            padding: 15px;
            border-radius: 0 12px 12px 0;
            font-size: 0.9rem;
        }

        /* ==========================================================================
           2. 【パソコン用レイアウト】表示設定
           ========================================================================== */
        .pc-only-block { display: block; }
        .sp-only-block { display: none; }

        .pc-table-view {
            width: 100%;
            border-collapse: collapse;
            text-align: center;
            font-size: 0.95rem;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
        }

        .pc-table-view th, .pc-table-view td {
            padding: 12px 10px;
            border: 1px solid #e2e8f0;
            vertical-align: middle;
        }

        .table-main-title {
            background: linear-gradient(90deg, #0284c7, #60a5fa);
            color: #ffffff;
            font-size: 1.2rem;
            padding: 16px !important;
            font-weight: 800;
        }

        .table-header-row th {
            background: #e0f2fe;
            color: #0369a1;
            font-weight: 700;
        }

        .price-棟 {
            font-weight: 700;
            color: #0f172a;
            font-size: 1.05rem;
        }
        
        .price-名 {
            color: #059669;
            font-size: 0.8rem;
            background: #dcfce7;
            display: inline-block;
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: 600;
        }

        .room3-row { background-color: #fffff0; }
        .room3-text { color: #dc2626; font-size: 0.75rem; font-weight: bold; display: block; }

        .spec-cell {
            text-align: left;
            font-size: 0.8rem;
            color: #475569;
            padding: 20px 15px !important;
            background: #fafafa;
        }
        .spec-cell p { margin-bottom: 6px; position: relative; padding-left: 12px; }
        .spec-cell p::before { content: "•"; color: #3b82f6; position: absolute; left: 0; font-weight: bold; }

        .pc-rental-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
        }
        .pc-rental-table th {
            background: linear-gradient(90deg, #8b5cf6, #d946ef);
            color: white;
            padding: 12px;
            font-weight: 800;
        }
        .pc-rental-table td {
            padding: 12px;
            border-bottom: 1px solid #e2e8f0;
        }
/* 💡 テーブルを横スクロールさせるための重要な命令 */
.table-responsive {
    width: 100%;
    overflow-x: auto;            /* 横方向にはみ出た場合のみスクロールバーを出す */
    -webkit-overflow-scrolling: touch; /* スマホで指を滑らせたときの動きを滑らかにする */
    margin-bottom: 20px;
}

.table-responsive table {
    min-width: 600px; /* 💡 スマホ画面でも表が潰れないよう、最低の横幅をガチッと固定する */
}
        /* ==========================================================================
           3. 【最重要：スマートフォン表示】はみ出しを消し、データを完全網羅する挙動CSS
           ========================================================================== */
        @media (max-width: 767px) {
			
		             /* ==========================================================================
               スマホ用：テーブルの横スクロール＆案内テキスト設定（ダブり・2行化を完全解消）
               ========================================================================== */
            
            /* 1. 【共通の土台】スクロール自体は両方のテーブルで動くように設定 */
            .table-responsive {
                position: relative;
                width: 100%;
                overflow-x: auto !important;       /* 横スクロールを有効にする */
                -webkit-overflow-scrolling: touch; /* スマホのスクロールを滑らかにする */
                margin-bottom: 25px;
                padding-top: 30px !important;      /* 💡 案内テキストを表示する隙間を上に空ける */
            }

            /* スマホ画面でも表が潰れて文字が縦長にならないよう、最低の横幅を固定 */
            .table-responsive table {
                min-width: 600px !important; 
            }

            /* 2. 【2重表示の完全リセット】
               もし古い一括設定が残っていても、ここで一度リセットして2行化を完全に防ぎます */
            .table-responsive::before {
                display: none !important;
                content: "" !important;
            }

            /* 3. 💡【メイン料金表（#hyo）】のすぐ上だけに1行表示 */
            #hyo .table-responsive::before {
                display: block !important; /* 強制的に表示 */
                content: "👉 横にスクロールしてご覧ください" !important;
                position: absolute;
                top: 4px;
                right: 5px;
                font-size: 0.75rem;       
                font-weight: bold;
                color: #64748b;           
                background: rgba(255, 255, 255, 0.85);
                padding: 2px 6px;
                border-radius: 4px;
                border: 1px solid #e2e8f0;
                z-index: 10;
            }

            /* 4. 💡【レンタル用品表（#rentaru）】のすぐ上だけに1行表示 */
            #rentaru .table-responsive::before {
                display: block !important; /* 強制的に表示 */
                content: "👉 横にスクロールしてご覧ください" !important;
                position: absolute;
                top: 4px;
                right: 5px;
                font-size: 0.75rem;       
                font-weight: bold;
                color: #64748b;           
                background: rgba(255, 255, 255, 0.85);
                padding: 2px 6px;
                border-radius: 4px;
                border: 1px solid #e2e8f0;
                z-index: 10;
            }
			            /* 💡 スマホのとき、連泊案内が縦長に潰れるのを防ぎ、横幅をゆったり広げる命令 */
            .gaiyou-box {
                width: 100% !important;
                min-width: 650px !important; /* 💡 上のテーブルと横幅をぴったり同じに揃える */
                margin-top: 20px !important;
                font-size: 0.85rem !important; /* スマホで見やすい文字の大きさに微調整 */
                white-space: nowrap;          /* 💡 文字が途中で変に改行されて縦長になるのを防ぐ */
            }

			
		}