/* =======================================================
   アクセス（交通案内）ページ専用スタイル (access.css)
   - ブロックエディタ連動：和モダン高級仕様 -
======================================================= */

/* --- 1. セクション全体を囲む大枠 --- */
.msm-access-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: clamp(60px, 10vw, 120px) 5% !important; 
    box-sizing: border-box !important;
}

/* --- 2. セクション見出し --- */
/* 英語表記 (ACCESS) */
.msm-access-title-en {
    text-align: center !important;
    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: 0 auto 8px auto !important;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 8px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* 日本語表記 (アクセス) */
h2.msm-access-title-ja,
h2.msm-access-title,
.wp-block-heading.msm-access-title-ja,
.wp-block-heading.msm-access-title {
    text-align: center !important;
    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;
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    margin-bottom: clamp(40px, 6vw, 60px) !important;
    margin-block-end: clamp(40px, 6vw, 60px) !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
}

/* --- 3. メインコンテンツの器（最大幅1000px制限・中央寄せ） --- */
.msm-access-box {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    display: block !important; 
}

/* --- 4. 【上段】Googleマップ埋め込み枠 --- */
.msm-access-map-wrapper {
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #e8e4db !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03) !important;
    border-radius: 2px !important;
    margin: 0 auto clamp(30px, 5vw, 40px) auto !important;
    margin-block-start: 0 !important;
    margin-block-end: clamp(30px, 5vw, 40px) !important;
}

.msm-access-map-wrapper iframe {
    width: 100% !important;
    height: clamp(350px, 45vw, 550px) !important;
    border: none !important;
    display: block !important;
}

/* --- 5. 【下段】施設名・住所テキストエリア --- */
/* 施設名 */
.msm-access-facility-name {
    text-align: center !important;
    display: block !important;
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.2rem, 2vw, 1.4rem) !important;
    color: #222222 !important;
    letter-spacing: 0.15em !important;
    margin: 0 auto 12px auto !important;
    margin-block-start: 0 !important;
    margin-block-end: 12px !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* 住所 */
.msm-access-address {
    text-align: center !important;
    display: block !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.9rem, 1.2vw, 1rem) !important;
    color: #555555 !important;
    letter-spacing: 0.08em !important;
    margin: 0 auto !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* =======================================================
   交通案内カードセクション（電車・バス）
======================================================= */
/* --- 6. 全幅グレー背景コンテナ --- */
.msm-access-bg-gray {
    background-color: #f8f7f5 !important; /* 冷たいグレーから温かみのある色へ */
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(60px, 10vw, 100px) 5% !important;
    box-sizing: border-box !important;
}

/* 2カラムラッパー */
.msm-access-cards-wrapper {
    max-width: 1000px !important;
    margin: 0 auto !important;
    gap: clamp(20px, 4vw, 40px) !important;
}

/* --- 7. カード単体の装飾 --- */
.msm-access-card {
    background-color: #ffffff !important;
    border: 1px solid #e8e4db !important; /* 繊細な枠線を追加 */
    border-radius: 4px !important; /* 丸みを抑えて凛とした印象に */
    padding: clamp(30px, 5vw, 50px) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02) !important;
    height: 100% !important; 
    box-sizing: border-box !important;
}

/* カード見出し（和モダンアップグレード） */
h3.msm-access-card-title,
p.msm-access-card-title,
div.msm-access-card-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.2rem, 2vw, 1.4rem) !important;
    color: #222222 !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid #e8e4db !important; /* 細く上品な下線 */
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
    position: relative !important; /* ゴールドラインの基点 */
}

/* 見出し下のゴールドアクセント */
.msm-access-card-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 40px !important;
    height: 1px !important;
    background-color: #c1a15f !important;
}

/* カード本文 */
.msm-access-card-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: 0 !important;
}

/* =======================================================
   お車でお越しの方・自転車バイクでお越しの方（共通カード枠）
======================================================= */
/* --- 8 & 18. 全体を囲む大きな白いカード枠（高級感アップグレード） --- */
.msm-access-car-card,
.msm-access-bike-card {
    background-color: #ffffff !important;
    border: 1px solid #e8e4db !important; /* 黒枠をやめ、上品な淡い枠線へ */
    border-radius: 2px !important; /* シャープな印象へ */
    width: 100% !important;
    max-width: 1000px !important; 
    margin: clamp(60px, 10vw, 100px) auto !important; 
    padding: clamp(40px, 6vw, 60px) !important; 
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.03) !important; /* ふんわりとした影 */
    box-sizing: border-box !important;
}

/* --- 9 & 19. カード大見出し（和モダンアップグレード） --- */
h3.msm-access-car-title,
p.msm-access-car-title,
div.msm-access-car-title,
h3.msm-access-bike-title,
p.msm-access-bike-title,
div.msm-access-bike-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
    color: #222222 !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid #e8e4db !important; /* 細く上品な下線 */
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    line-height: 1.4 !important;
    position: relative !important; /* ゴールドラインの基点 */
}

/* 大見出し下のゴールドアクセント */
.msm-access-car-title::after,
.msm-access-bike-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 60px !important;
    height: 1px !important;
    background-color: #c1a15f !important;
}

/* --- 10 & 20. 通常テキスト --- */
.msm-access-car-text,
.msm-access-bike-text {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.95rem, 1.2vw, 1rem) !important;
    color: #444444 !important;
    line-height: 2 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: clamp(30px, 5vw, 40px) !important; 
}

/* --- 11 & 24. 割引・案内サービス（温かみのある和紙調ボックスへ） --- */
.msm-access-discount-box,
.msm-access-bike-note-box {
    background-color: #fbfaf8 !important; /* 冷たいグレーから温かい和紙色へ */
    border: 1px solid #f0eee8 !important;
    border-radius: 2px !important;
    padding: clamp(20px, 4vw, 30px) !important;
}

.msm-access-discount-box {
    margin-bottom: clamp(40px, 6vw, 60px) !important; 
}

.msm-access-bike-note-box {
    margin-bottom: 0 !important;
}

/* 赤字の注意書き（色を少し落ち着かせ品良く） */
.msm-access-discount-alert {
    color: #b32424 !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.95rem, 1.2vw, 1rem) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* ボックス内のテキスト */
.msm-access-discount-text,
.msm-access-bike-note-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;
    margin: 0 !important;
}

/* =======================================================
   駐車場アクセス手順・駐輪場画像エリア
======================================================= */
/* --- 12 & 22. 小見出し（明朝体＋ゴールドラインで高級感アップ） --- */
.msm-access-step-title,
.msm-access-bike-subtitle {
    font-family: "Noto Serif JP", serif !important; /* 明朝体に格上げ */
    font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important;
    color: #222222 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    letter-spacing: 0.08em !important;
    border-left: 2px solid #c1a15f !important; /* 左にゴールドのアクセント */
    padding-left: 12px !important;
}

.msm-access-step-title {
    margin-bottom: 25px !important;
}

/* --- 13. 3カラムラッパーの余白調整 --- */
.msm-access-steps-wrapper {
    margin-bottom: clamp(40px, 6vw, 60px) !important;
}

/* --- 14 & 21. 各手順の写真（ダミーグループ用） --- */
.msm-access-step-image,
.msm-access-bike-image {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; 
    background-color: #f2f0eb !important; /* ダミー画像も少し温かいグレーへ */
    border-radius: 2px !important;
    margin-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

/* --- 15 & 23. 各手順の説明テキスト --- */
.msm-access-step-text,
.msm-access-bike-subtext {
    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-top: 0 !important;
    margin-bottom: 20px !important;
}

/* =======================================================
   YouTube道案内動画セクション
======================================================= */
/* --- 16. 赤い背景のラッパー（日本の伝統的な深紅へ変更） --- */
.msm-access-youtube-wrapper {
    background-color: #b30000 !important; /* 深みと品のある赤 */
    width: 100% !important;
    padding: clamp(30px, 5vw, 50px) 20px !important;
    text-align: center !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(179, 0, 0, 0.15) !important; /* 赤い影をほんのり */
}

/* --- 17. バナー内のテキスト --- */
.msm-access-youtube-text {
    color: #ffffff !important;
    font-family: "Noto Serif JP", serif !important; /* YouTubeバナーも明朝体で上品に */
    font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important;
    letter-spacing: 0.15em !important;
    margin: 0 !important;
    display: inline-block !important; 
}


/* =======================================================
   追加：自転車・バイクでお越しの方（駐輪場のご案内）セクション
======================================================= */
/* --- 18. 全体を囲む大きな白いカード枠（車セクションと同じデザイン） --- */
.msm-access-bike-card {
    background-color: #ffffff !important;
    border: 1px solid #222222 !important; 
    border-radius: 4px !important;
    width: 100% !important;
    max-width: 1000px !important; 
    /* 車のカードとの間に均等な余白を確保 */
    margin: clamp(60px, 10vw, 100px) auto !important; 
    padding: clamp(40px, 6vw, 60px) !important; 
    box-sizing: border-box !important;
}

/* --- 19. カード見出し --- */
h3.msm-access-bike-title,
p.msm-access-bike-title,
div.msm-access-bike-title {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
    color: #111111 !important;
    letter-spacing: 0.1em !important;
    border-bottom: 2px solid #222222 !important;
    padding-bottom: 15px !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 1.4 !important;
}

/* --- 20. 通常テキスト（施設内に...） --- */
.msm-access-bike-text {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.95rem, 1.2vw, 1rem) !important;
    color: #444444 !important;
    line-height: 2 !important;
    letter-spacing: 0.05em !important;
    margin-bottom: clamp(30px, 5vw, 40px) !important; 
}

/* --- 21. 2カラム写真（ダミーグループ用スタイル） --- */
.msm-access-bike-image {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important; /* 横長の美しい比率に固定 */
    background-color: #c4c4c4 !important; 
    border-radius: 4px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

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

/* --- 22. 各駐輪場の小見出し --- */
.msm-access-bike-subtitle {
    font-family: "Noto Serif JP", serif !important;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem) !important;
    color: #333333 !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    letter-spacing: 0.05em !important;
}

/* --- 23. 各駐輪場の説明テキスト --- */
.msm-access-bike-subtext {
    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-top: 0 !important;
    margin-bottom: 20px !important;
}

/* --- 24. 利用可能時間のグレーボックス --- */
.msm-access-bike-note-box {
    background-color: #f2f2f2 !important;
    border-radius: 4px !important;
    padding: clamp(15px, 3vw, 25px) !important;
    margin-bottom: 0 !important;
}

.msm-access-bike-note-text {
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem) !important;
    color: #555555 !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}