/* =======================================================
   共通スタイル (shared.css)
   対象: リラクゼーション、お食事、お問い合わせ
   - ブロックエディタ連動：和モダン高級仕様 -
======================================================= */

/* =======================================================
   ルール・注意事項セクション（お問い合わせ案内兼用）
======================================================= */
/* --- 1. ルール・注意事項ボックス全体（点線枠） --- */
.msm-shared-rule-box {
    background-color: #fbfaf8 !important; /* 温かみのある和紙調グレー */
    border: 1px dashed #c8c4b7 !important; /* 上品で繊細な点線 */
    border-radius: 2px !important;
    padding: clamp(40px, 6vw, 60px) clamp(20px, 4vw, 40px) !important;
    margin: clamp(60px, 10vw, 100px) auto !important;
    width: 100% !important; 
    max-width: 1000px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* --- 2. セクション見出し（和モダン格上げ・フォーム見出し兼用） --- */
h2.msm-shared-rule-title,
h3.msm-shared-rule-title,
p.msm-shared-rule-title,
.wp-block-heading.msm-shared-rule-title,
h2.msm-shared-form-title,
.wp-block-heading.msm-shared-form-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
    color: #222222 !important;
    letter-spacing: 0.15em !important;
    margin-top: 0 !important;
    margin-bottom: clamp(30px, 5vw, 40px) !important;
    line-height: 1.4 !important;
    position: relative !important;
    display: inline-block !important;
    padding-bottom: 15px !important;
}

/* 見出し下の美しいゴールドアクセント */
.msm-shared-rule-title::after,
.msm-shared-form-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 40px !important;
    height: 1px !important;
    background-color: #c1a15f !important;
}

/* --- 3. テキストのラッパー（左揃え長文用） --- */
.msm-shared-rule-text-wrapper {
    width: 100% !important; 
    max-width: 750px !important;
    margin: 0 auto clamp(30px, 5vw, 40px) auto !important;
    text-align: left !important;
}

/* --- 4. ルール説明テキスト（左揃え用） --- */
.msm-shared-rule-text {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
    color: #555555 !important;
    line-height: 2 !important;
    letter-spacing: 0.05em !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

.msm-shared-rule-text:last-child {
    margin-bottom: 0 !important;
}

/* --- 5. ルール説明テキスト（中央揃え用・お問い合わせページなど） --- */
.msm-shared-rule-text-center {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
    color: #555555 !important;
    line-height: 2 !important;
    letter-spacing: 0.05em !important;
    margin-top: 0 !important;
    margin-bottom: clamp(30px, 5vw, 40px) !important;
    text-align: center !important;
}

/* --- 6. ボタン群の中央揃え --- */
.msm-shared-rule-box .wp-block-buttons {
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- 7. ボタン本体（黒・TOP合わせ角丸3px） --- */
.msm-shared-rule-btn .wp-block-button__link {
    display: inline-block !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
    padding: 16px 50px !important;
    border-radius: 3px !important; 
    text-decoration: none !important;
    letter-spacing: 0.1em !important;
    transition: background-color 0.3s ease !important;
    box-sizing: border-box !important;
    border: none !important;
}

.msm-shared-rule-btn .wp-block-button__link:hover {
    background-color: #333333 !important;
}

/* =======================================================
   共通メニューカードセクション（リラクゼーション・お食事用）
======================================================= */
/* --- 8. メニューセクション全体背景 --- */
.msm-shared-menu-section {
    background-color: #f8f7f5 !important; 
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(60px, 10vw, 100px) 5% !important;
    box-sizing: border-box !important;
}

/* --- 9. メニュー見出し --- */
h2.msm-shared-menu-title,
.wp-block-heading.msm-shared-menu-title {
    text-align: center !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
    color: #111111 !important;
    letter-spacing: 0.15em !important;
    margin-top: 0 !important;
    margin-bottom: clamp(40px, 6vw, 60px) !important;
    line-height: 1.4 !important;
}

/* --- 10. カードを並べるグリッドラッパー --- */
.msm-shared-menu-grid {
    width: 100% !important; 
    max-width: 1000px !important;
    margin: 0 auto clamp(20px, 4vw, 40px) auto !important;
    gap: clamp(20px, 4vw, 40px) !important;
}

/* --- 11. カード単体のデザイン --- */
.msm-shared-menu-card {
    background-color: #ffffff !important;
    border-radius: 4px !important;
    overflow: hidden !important; 
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.02) !important; 
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #e8e4db !important; 
    box-sizing: border-box !important;
}

/* --- 12. 画像エリア（ダミー用） --- */
.msm-shared-menu-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important; 
    background-color: #f2f0eb !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.msm-shared-menu-image p {
    color: #888888 !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    font-family: "Noto Sans JP", sans-serif !important;
}

/* --- 13. テキストエリア（余白） --- */
.msm-shared-menu-body {
    padding: clamp(20px, 4vw, 30px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; 
}

/* メニュー名（下線＆ゴールドの和紙スタイル） */
.msm-shared-menu-name {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.1rem, 1.5vw, 1.2rem) !important;
    color: #222222 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e8e4db !important;
    padding-bottom: 10px !important;
    position: relative !important;
}

.msm-shared-menu-name::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 30px !important;
    height: 1px !important;
    background-color: #c1a15f !important;
}

/* メニュー説明 */
.msm-shared-menu-desc {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
    color: #666666 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* =======================================================
   共通イントロダクションセクション（店舗紹介など）
======================================================= */
/* --- 14. イントロセクション全体背景（グレー版） --- */
.msm-shared-intro-section {
    background-color: #f8f7f5 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-top: clamp(60px, 10vw, 100px) !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    padding-bottom: clamp(100px, 15vw, 160px) !important; 
}

/* --- 15. イントロセクション全体背景（白背景版） --- */
.msm-shared-intro-section-white {
    background-color: #ffffff !important; 
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: clamp(60px, 10vw, 100px) 5% !important; 
    overflow: hidden !important; 
}

/* --- 16. 上段2カラムのラッパー --- */
.msm-shared-intro-wrapper {
    width: 100% !important; 
    max-width: 1000px !important;
    margin: 0 auto clamp(40px, 6vw, 60px) auto !important;
    gap: clamp(30px, 5vw, 60px) !important;
    box-sizing: border-box !important;
}

/* カラムの膨張を防止 */
.msm-shared-intro-wrapper > .wp-block-column {
    min-width: 0 !important; 
    word-break: break-word !important; 
    box-sizing: border-box !important;
}

/* --- 17. 画像ダミー枠 --- */
.msm-shared-intro-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    background-color: #f2f0eb !important;
    border-radius: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: 1px solid #e8e4db !important;
}

.msm-shared-intro-image p {
    color: #888888 !important;
    font-size: clamp(0.8rem, 1vw, 0.9rem) !important;
    margin: 0 !important;
    font-family: "Noto Sans JP", sans-serif !important;
}

/* --- 18. テキストエリア --- */
/* セクション見出し（左ゴールドラインで引き締め） --- */
h2.msm-shared-intro-title,
.wp-block-heading.msm-shared-intro-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.4rem, 2vw, 1.8rem) !important;
    color: #222222 !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    letter-spacing: 0.1em !important;
    line-height: 1.4 !important;
    border-left: 2px solid #c1a15f !important; 
    padding-left: 15px !important;
}

/* 本文テキスト --- */
.msm-shared-intro-text {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.95rem, 1.2vw, 1rem) !important;
    color: #555555 !important;
    line-height: 2 !important;
    letter-spacing: 0.05em !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

/* 営業時間などの補足テキスト --- */
.msm-shared-intro-note {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
    color: #888888 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

/* --- 19. 下段アクションボックス（白い箱） --- */
.msm-shared-action-box {
    background-color: #ffffff !important;
    border: 1px solid #e8e4db !important;
    border-radius: 4px !important;
    width: 100% !important; 
    max-width: 1000px !important;
    margin: clamp(40px, 6vw, 60px) auto 0 auto !important;
    padding: clamp(40px, 6vw, 60px) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.03) !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* ギミック説明テキスト --- */
.msm-shared-action-text {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
    color: #666666 !important;
    line-height: 1.8 !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    letter-spacing: 0.05em !important;
}

/* --- 20. 白抜きボタン（アウトライン・TOP合わせ角丸3px） --- */
.msm-shared-action-box .wp-block-buttons {
    justify-content: center !important;
    margin: 0 !important;
}

.msm-shared-btn-outline .wp-block-button__link {
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #111111 !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
    padding: 16px 50px !important;
    border-radius: 3px !important; 
    text-decoration: none !important;
    letter-spacing: 0.1em !important;
    border: 1px solid #111111 !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.msm-shared-btn-outline .wp-block-button__link:hover {
    background-color: #111111 !important;
    color: #ffffff !important;
}


/* =======================================================
   追加：お問い合わせフォーム セクション
======================================================= */
/* --- 21. フォームの白いカードコンテナ --- */
.msm-shared-form-box {
    background-color: #ffffff !important;
    border: 1px solid #e8e4db !important;
    border-radius: 4px !important;
    width: 100% !important;
    max-width: 800px !important; 
    margin: 0 auto !important;
    padding: clamp(40px, 6vw, 80px) clamp(20px, 5vw, 60px) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    /* ★修正点：見出しを確実に中央寄せにするため、親箱に text-align: center を追加 */
    text-align: center !important; 
}

/* --- 22. 見出しは上で定義した .msm-shared-form-title を使用 --- */
h2.msm-shared-form-title,
.wp-block-heading.msm-shared-form-title {
    margin-bottom: clamp(40px, 8vw, 60px) !important; 
}

/* --- 23. フォーム入力エリアのラッパー --- */
.msm-shared-form-wrapper {
    width: 100% !important;
    margin: 0 auto !important;
    /* ★修正点：見出し以外（フォームのラベル等）はしっかり左寄せに戻す */
    text-align: left !important; 
}

/* --- 24. ラベル（項目名）とバッジの横並び --- */
.msm-shared-form-wrapper label,
.msm-shared-form-wrapper .wpcf7-list-item-label,
.msm-shared-form-wrapper .smf-item__label {
    display: flex !important;
    align-items: center !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 0.95rem !important;
    color: #333333 !important;
    margin-bottom: 10px !important;
    margin-top: 30px !important;
    font-weight: 500 !important;
}

/* 最初の項目の上余白を消す */
.msm-shared-form-wrapper > *:first-child label,
.msm-shared-form-wrapper .smf-item:first-child .smf-item__label {
    margin-top: 0 !important;
}

/* --- 25. 「必須」「任意」バッジ --- */
/* 必須バッジ（上品な赤） */
.msm-form-req {
    background-color: #b74a4a !important; 
    color: #ffffff !important;
    font-size: 0.75rem !important;
    padding: 2px 8px !important;
    border-radius: 2px !important;
    margin-left: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}

/* 任意バッジ（薄いグレー） */
.msm-form-opt {
    background-color: #e8e4db !important;
    color: #666666 !important;
    font-size: 0.75rem !important;
    padding: 2px 8px !important;
    border-radius: 2px !important;
    margin-left: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}

/* --- 26. 入力フィールド共通 --- */
.msm-shared-form-wrapper input[type="text"],
.msm-shared-form-wrapper input[type="email"],
.msm-shared-form-wrapper input[type="tel"],
.msm-shared-form-wrapper select,
.msm-shared-form-wrapper textarea {
    width: 100% !important;
    padding: 15px !important;
    border: 1px solid #e8e4db !important;
    border-radius: 2px !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 1rem !important;
    color: #333333 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* セレクトボックスの背景は和紙調グレー */
.msm-shared-form-wrapper select {
    background-color: #f8f7f5 !important;
    cursor: pointer !important;
}

/* フォーカス状態（アクセントゴールド） */
.msm-shared-form-wrapper input:focus,
.msm-shared-form-wrapper select:focus,
.msm-shared-form-wrapper textarea:focus {
    border-color: #c1a15f !important;
    outline: none !important;
    box-shadow: 0 0 5px rgba(193, 161, 95, 0.2) !important;
}

.msm-shared-form-wrapper textarea {
    min-height: 200px !important;
    resize: vertical !important;
}

/* --- 27. プライバシーポリシーのチェックボックス --- */
.msm-shared-form-wrapper .wpcf7-list-item,
.msm-shared-form-wrapper .smf-checkbox {
    display: block !important;
    text-align: center !important;
    margin-top: 40px !important;
}

.msm-shared-form-wrapper input[type="checkbox"] + span,
.msm-shared-form-wrapper .smf-checkbox__label {
    color: #666666 !important;
    font-size: 0.9rem !important;
    font-family: "Noto Sans JP", sans-serif !important;
}

/* --- 28. 送信ボタン（黒い3px角丸・ワイヤーフレーム準拠） --- */
.msm-shared-form-wrapper input[type="submit"],
.msm-shared-form-wrapper button[type="submit"],
.msm-shared-form-wrapper .wpcf7-submit,
.msm-shared-form-wrapper .smf-button {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 40px auto 0 !important;
    padding: 18px 20px !important;
    background-color: #111111 !important;
    color: #ffffff !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    border: none !important;
    border-radius: 3px !important; /* ★ここも完璧に3pxに統一！ */
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.msm-shared-form-wrapper input[type="submit"]:hover,
.msm-shared-form-wrapper button[type="submit"]:hover,
.msm-shared-form-wrapper .wpcf7-submit:hover,
.msm-shared-form-wrapper .smf-button:hover {
    background-color: #333333 !important; 
}