/* =======================================================
   営業時間・料金ページ専用スタイル (hours.css)
   - ブロックエディタ連動：和モダン高級仕様 -
======================================================= */

/* -------------------------------------------------------
   1. 共通：セクション外枠＆見出し
------------------------------------------------------- */
/* セクション全体を囲む大枠（制限を解除して画面幅いっぱいに広げる） */
.msm-hours-container,
.msm-price-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(60px, 10vw, 120px) 5% !important;
    box-sizing: border-box !important;
}

/* セクション共通見出し */
.msm-hours-title {
    text-align: center !important;
    margin-bottom: clamp(30px, 5vw, 50px) !important;
}

/* 見出し：英語表記（アクセントゴールド） */
.msm-hours-title-en {
    display: block !important;
    font-family: 'Frank Ruhl Libre', "Noto Serif JP", serif !important;
    font-size: 0.85rem !important;
    color: #c1a15f !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 8px !important;
}

/* 見出し：日本語表記（端正な明朝体） */
.msm-hours-title-ja {
    display: block !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.5rem, 2vw, 2rem) !important;
    color: #111111 !important;
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
}


/* -------------------------------------------------------
   2. 営業時間セクション専用スタイル
------------------------------------------------------- */
/* 営業時間ボックス（最大1000px制限・中央寄せ） */
.msm-hours-box {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    background-color: #f8f7f5 !important; /* 上品な和紙調のグレー */
    border: 1px solid #eae8e1 !important; 
    border-radius: 4px !important; 
    padding: clamp(40px, 6vw, 60px) 20px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01) !important; 
}

/* ボックス内のメインテキスト (平日 10:00～...) */
.msm-hours-main-text {
    font-family: 'Frank Ruhl Libre', "Noto Serif JP", serif !important;
    color: #222222 !important;
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    letter-spacing: 0.1em !important;
    line-height: 1.8 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* ボックス内のサブテキスト (最終受付・年中無休...) */
.msm-hours-sub-text {
    font-family: "Noto Sans JP", sans-serif !important;
    color: #666666 !important;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
    letter-spacing: 0.08em !important;
    margin: 0 !important;
}


/* -------------------------------------------------------
   3. 入浴用品（販売）セクション専用スタイル
------------------------------------------------------- */
/* 注意書きテキスト（段落ブロック用・中央寄せと上品な余白） */
.msm-amenity-note {
    text-align: center !important;
    font-family: "Noto Sans JP", sans-serif !important;
    color: #555555 !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
    line-height: 2 !important;
    margin-top: 0 !important;
    margin-bottom: clamp(30px, 5vw, 40px) !important;
    letter-spacing: 0.08em !important;
}


/* -------------------------------------------------------
   4. 料金表＆入浴用品共通：テーブル装飾（最大1000px制限）
------------------------------------------------------- */
/* 複数のテーブルや黒帯ブロックを隙間なく美しく結合する箱（最大1000px制限・中央寄せ） */
.msm-price-box {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
}

/* テーブル外枠のリセット */
.msm-price-table {
    margin: 0 !important;
    width: 100% !important;
}

.msm-price-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: "Noto Serif JP", serif !important;
    margin: 0 !important;
}

/* セルの基本枠線・余白設定 */
.msm-price-table th,
.msm-price-table td {
    border: 1px solid #e8e4db !important;
    padding: clamp(20px, 4vw, 30px) clamp(15px, 3vw, 25px) !important;
    vertical-align: middle !important;
    line-height: 1.8 !important;
}

/* 【重要】左列（項目名）：優先度を最上位に引き上げ、テーマの初期白背景を強制上書き */
.msm-price-table table th,
.msm-price-table table tbody tr th,
.msm-price-table table tbody tr td:first-child {
    width: 30% !important;
    background-color: #fcfbf9 !important; /* 品のある淡い和紙調グレー */
    color: #333333 !important;
    font-weight: 400 !important;
    text-align: left !important;
    letter-spacing: 0.08em !important;
}

/* 【重要】右列（料金）：優先度を引き上げて白背景を維持 */
.msm-price-table table td,
.msm-price-table table tbody tr td:last-child {
    width: 70% !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    text-align: left !important;
    letter-spacing: 0.05em !important;
}

/* 結合時のボーダー（線）の重複を綺麗に回避する設定 */
.msm-price-table:first-of-type table {
    border-bottom: none !important;
}
.msm-price-table:last-of-type table {
    border-top: none !important;
}

/* 黒い帯（お得な回数券セパレーター） */
.msm-price-separator {
    background-color: #1a1a1a !important; /* 高級感のあるスミクロ */
    color: #ffffff !important;
    text-align: center !important;
    padding: clamp(15px, 2.5vw, 20px) !important;
    margin: 0 !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.1em !important;
    border-left: 1px solid #1a1a1a !important;
    border-right: 1px solid #1a1a1a !important;
}

/* 右列内の補足テキスト（※印の注意書き部分） */
.msm-price-table td p {
    margin: 0 !important;
}
.msm-price-table td p + p {
    margin-top: 10px !important;
    font-size: 0.85rem !important;
    color: #888888 !important;
    font-family: "Noto Sans JP", sans-serif !important;
}


/* -------------------------------------------------------
   5. レスポンシブ対応（スマホ表示時の最適化）
------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* テーブルをスマホでは縦並びに切り替える */
    .msm-price-table th,
    .msm-price-table td,
    .msm-price-table table tbody tr td:first-child,
    .msm-price-table table tbody tr td:last-child {
        display: block !important;
        width: 100% !important;
        text-align: center !important; /* スマホ環境では中央揃えが美しい */
    }
    
    /* スマホ縦並び時の境界線の調整 */
    .msm-price-table th,
    .msm-price-table table tbody tr td:first-child {
        border-bottom: none !important;
        padding-bottom: 10px !important;
    }
    
    .msm-price-table td,
    .msm-price-table table tbody tr td:last-child {
        padding-top: 5px !important;
    }
}