@charset "UTF-8";

/* =========================================================
   1. 変数・基本設定
========================================================= */
:root {
    --base: #fdfcf5;
    --main: #333333;
    --gold: #d4b67b;
    --pearl: #fdfaf2;
    --accent: #a40000;
    
    /* フォントの並びを最適化：
       1. iPhone/Macで最も美しい「ヒラギノ」を先頭に。
       2. Windowsで標準の「游明朝」を次に。
       3. Webフォント（外部リクエスト）を一切使わないことで、PSIスコアを最大化します。
    */
    --font: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "Yu Mincho", "游明朝", "YuMincho", "MS PMincho", serif;
}

/* --- 共通設定 --- */

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html { 
    font-size: 17px; 
    scroll-behavior: smooth; 
}

body { 
    font-family: var(--font); 
    color: var(--main); 
    background: var(--base); 
    line-height: 2.1; 
    overflow-x: hidden; 

    /* 文字をより鮮明に、美しく見せるためのレンダリング最適化 */
    -webkit-font-smoothing: antialiased; /* Mac/iOSでの文字のギザギザを抑える */
    -moz-osx-font-smoothing: grayscale; /* Firefox用 */
    text-rendering: optimizeLegibility;   /* カーニング（文字間隔）を最適化 */
}

/* =========================================================
   mainコンテンツの開始位置と装飾
========================================================= */
main {
    width: 100%;
    background-color: var(--base); /* 明るいアイボリーに統一 */
    margin-top: 0; 
}

/* 制御用チェックボックスの非表示 */
.menu-cb, input[name="ryokan-slide"] { display: none; }

/* =======================================a==================
   2. 共通パーツ（ボタン・飾り紐・プレースホルダー）
========================================================= */
/* ボタン共通（8pxの柔らかい角丸） */
.btn-reserve, .btn-reserve_outline {
    padding: 5px 12px; text-decoration: none; border-radius: 8px;
    display: inline-block; cursor: pointer; transition: 0.4s; font-size: 0.95rem; text-align: center;
}
/* 文字色を白 (#fff) に強制し、ホバー時は赤にする */
.btn-reserve { 
    background: var(--accent); 
    color: #fff !important; /* !importantを追加して白を強制 */
    border: 1px solid var(--accent); 
}

.btn-reserve:hover {
    background: #fff;
    color: var(--accent) !important;
}
.btn-reserve_outline { border: 1px solid var(--gold); color: var(--gold); }
.btn-reserve_outline:hover { background: var(--pearl); }

/* 既存の .btn-reserve のデザインをベースに、余白とサイズを最適化 */
.btn-content {
    display: inline-block !important;
    background: transparent !important; /* 背景を透明（または白）に */
    color: var(--accent) !important;    /* 文字色をエンジに */
    border: 1.5px solid var(--accent);  /* エンジの枠線をつける */
    padding: 5px 15px !important;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: bold;
    transition: 0.4s;
    
    margin-top: 2.5rem !important;
    margin-bottom: 1.5rem !important;
}

/* ホバーした時にだけエンジ色で塗りつぶす（上品な演出） */
.btn-content:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

.btn-content.sub-btn {
  background: transparent;
  color: #b40000;
  border: 1px solid #b40000;
}

/* ボタンのラッパー */
.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* テキストリンク（プラン詳細など） */
.more-link { color: var(--main); text-decoration: none; border-bottom: 1px solid var(--main); padding-bottom: 5px; transition: 0.3s; font-size: 0.95rem; }
.more-link:hover { color: var(--accent); border-color: var(--accent); }

/* 飾り紐（セクション区切り） */
.section-divider { width: 100%; display: flex; justify-content: center; align-items: center; padding: 20px 0; }
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 3px; max-width: 300px; opacity: 0.6; background: linear-gradient(to bottom, transparent 33%, var(--gold) 33%, var(--gold) 66%, transparent 66%); }
.section-divider::before { margin-right: 25px; } .section-divider::after { margin-left: 25px; }
.divider-knot { width: 14px; height: 14px; border: 1px solid var(--gold); transform: rotate(45deg); background: var(--base); display: flex; align-items: center; justify-content: center; }
.divider-knot::after { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }

/* 画像プレースホルダー */
.img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #e0ddd0; color: #888; font-size: 0.9rem; }

/* 画面には表示させず、スクリーンリーダーや検索エンジンにのみ認識*/
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 共通のテキスト余白クラス（段落間のゆとり） */
.text-margin p {
    margin-bottom: 1.8rem;
}

/* 最後の段落と、その後に続くボタンとの距離をさらに確保 */
.text-margin p:last-child {
    margin-bottom: 2.5rem; 
}

/* =========================================================
   文字色（汎用パーツ）
========================================================= */
.text-red {
    /* サイトのボタンや和の雰囲気に合わせた赤 */
    color: #A6192E !important; 
}

/* ついでに太字にする設定も作っておくと便利です */
.font-bold {
    font-weight: bold;
}

/* =========================================================
   配置（汎用パーツ）
========================================================= */

.text-center {
  text-align: center;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* テキストやインライン要素用 */
.text-left   { text-align: left; }
.text-right  { text-align: right; }
.text-center { text-align: center; }

/* 画像やブロック要素（divなど）用 */
.left-block {
  display: block;
  margin-right: auto;
  margin-left: 0;
}

.right-block {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

/* Flexboxによる配置（親要素に指定） */
.flex-left   { display: flex; justify-content: flex-start; }
.flex-right  { display: flex; justify-content: flex-end; }
.flex-center { display: flex; justify-content: center; }


/* --- 共通設定（PC向け） --- */
.pc-only { display: block !important; }
.sp-only { display: none !important; }

.no-padding { padding: 0 !important; }
.no-padding-top { padding-top: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }

/* --- Margin (外側の余白) 調整 --- */
.no-margin { margin: 0 !important; }
.no-margin-top { margin-top: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }

.margin-top-s { margin-top: 1rem !important; }
.margin-top-m { margin-top: 2.5rem !important; }
.margin-top-l { margin-top: 5rem !important; }

.margin-bottom-s { margin-bottom: 1rem !important; }
.margin-bottom-m { margin-bottom: 2.5rem !important; }
.margin-bottom-l { margin-bottom: 5rem !important; }

.page-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 50px;
    height: 50px;
    background: rgba(139, 0, 0, 0.8) !important;
    color: #fff !important;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    z-index: 9999;
    font-size: 1.2rem;
    
    /* --- JSなしで「スクロールしたら出す」魔法 --- */
    /* 最初は透明 */
    opacity: 0;
    visibility: hidden;
    
    /* スクロールに応じてアニメーションを動かす設定 */
    animation: fade-in linear forwards;
    animation-timeline: scroll();
    animation-range: 0 1100px; /* 0～500pxスクロールする間に徐々に表示 */
}

@keyframes fade-in {
    to {
        opacity: 1;
        visibility: visible;
    }
}

/* ホバー演出 */
.page-top:hover {
    background: #a00000;
    transform: scale(1.1);
}


/* =========================================================
   3. ヘッダー & パンくず
========================================================= */
header {
    width: 100%;
    min-height: 80px;
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;

    /* --- 修正部分：明るく上品な和柄背景へ --- */
    /* ベースの色（アイボリー） */
    background-color: rgba(253, 252, 245, 0.7); /* --baseの色を透過 */

    /* すりガラス効果は維持して、後ろのコンテンツとなじませる */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px); /* Safari対応 */

    /* 下部に極細のゴールドの線を入れ、境界をはっきりさせる */
    border-bottom: 1px solid rgba(212, 182, 123, 0.3); /* --goldを薄く */
}

/* ロゴの色を、背景に合わせて濃い色（--main）に変更 */
.logo {
    color: var(--main); /* #fffから変更 */
    text-decoration: none;
    font-size: 1.6rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    z-index: 1100;
}

/* ナビゲーションリンクの色も濃い色に変更 */
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}
.nav-links a {
    color: var(--main); /* #fffから変更 */
    text-decoration: none;
    font-size: 0.95rem;
    transition: 0.3s;
}
/* ホバー時はアクセントカラーに */
.nav-links a:hover {
    color: var(--accent);
    opacity: 1; /* 透明度は戻す */
}

/* 現在のページのメニューを赤くする場合 */
.nav-links li.active a {
    color: #cc0000; /* 赤 */
}

/* パンくずリスト：ヘッダーの色に合わせて明るく上品に */
.breadcrumb-container { 
    width: 100%; 
    max-width: 1200px; 
    margin: 80px auto 0; 
    padding: 20px 5% 10px; /* 上下の余白を調整 */
}

.breadcrumb-list { 
    display: flex; 
    list-style: none; /* 箇条書きのポッチを消す */
    font-size: 0.8rem; 
    padding: 0;
    margin: 0;
}

/* リンクの装飾（青色と下線を完全に消す） */
.breadcrumb-item a { 
    color: #343434; /* 落ち着いたグレー */
    text-decoration: none; 
    transition: 0.3s;
}

/* ホバーした時だけメインカラーに */
.breadcrumb-item a:hover {
    color: var(--main);
}

/* 区切り文字をゴールドに */
.breadcrumb-item + .breadcrumb-item::before { 
    content: "/"; 
    margin: 0 12px; 
    color: var(--gold); 
}

/* 現在のページ（リンクなし）の文字色 */
.breadcrumb-item.aria-current-page { 
    color: var(--main); 
    font-weight: 700; 
}


/* =========================================================
   4. HEROセクション & スクロールアニメーション
========================================================= */
#hero { width: 100%; height: 100vh; position: relative; overflow: hidden; background: #000; margin-top: 0; /* ここも0にして、画面最上部(top:0)に配置する */}
.slider { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.slide { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; animation: sliderAnime 15s infinite; }
.slide-1 { background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8)), url('images/hero-bride-makeup.jpg'); animation-delay: 0s; }
.slide-2 { background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.5)), url('images/kimono-collection.jpg'); animation-delay: 5s; }
.slide-3 { background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.7)), url('images/hero-wedding-shrine.jpg'); animation-delay: 10s; }
@keyframes sliderAnime { 0% { opacity: 0; transform: scale(1); } 15% { opacity: 1; } 33% { opacity: 1; } 48% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; } }

.hero-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 90%; z-index: 10; }
.hero-title { font-size: clamp(1.8rem, 6.5vw, 3.8rem); letter-spacing: 0.15em; margin-bottom: 15px; }
.hero-subtitle { font-size: 1.1rem; letter-spacing: 0.1em; }

.scroll-down { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; text-decoration: none; z-index: 10; }
.scroll-down-text { font-size: 0.8rem; letter-spacing: 0.1em; }
.scroll-down-line { width: 1px; height: 50px; background: rgba(255,255,255,0.3); margin: 10px auto 0; position: relative; overflow: hidden; }
.scroll-down-line::after { content: ''; position: absolute; top: -50px; left: 0; width: 100%; height: 100%; background: #fff; animation: lineAnim 2s infinite; }
@keyframes lineAnim { 100% { top: 50px; } }


/* =========================================================
   5. 各レイアウト（婚礼・プラン・コレクション）
========================================================= */
.feature-section, .plans-section, .collection-section, .ryokan-section, .access-section { 
    padding: 60px 5%; max-width: 1200px; margin: 0 auto; 
}
.container, .container_twoCol { 
    display: flex; align-items: center; gap: 80px; justify-content: space-between; 
}
/* 店舗案内のコンテナを調整 */
.container_access {
    display: flex;
    align-items: stretch; /* 左右の高さを揃える */
    gap: 60px; /* テキストと地図の間の距離 */
}

/* 右側の地図エリアを調整 */
.access-section .collection-gallery_right {
    flex: 1.2;
    width: 100%;
    height: 500px;
    margin-bottom: 0;
    /* 追加：グリッド解除と角丸の維持 */
    display: block; 
    overflow: hidden;
    border-radius: 20px; 
}

/* 地図(iframe)を親の幅・高さに完全にフィットさせる */
.access-section .collection-gallery_right iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
    display: block;
}


/* 中央に寄せるためのコンテナ */
.container_single_col {
    max-width: 900px; /* 少し幅を絞ると読みやすくなります */
    margin: 0 auto;
    text-align: center;
}

/* 情報リストの幅調整 */
.info-list-narrow {
    max-width: 600px; /* リストが広がりすぎないように固定 */
    margin: 40px auto;
    text-align: left; /* リストの中身は左揃えが綺麗 */
}

/* 地図のラッパー（角丸と影） */
.map-wrapper-wide {
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    width: 100%;
}

/* ボタンの中央寄せ */
.access-info-centered .btn-content {
    margin-top: 20px;
    margin-bottom: 20px;
}

.sub-label { display: block; color: var(--accent); font-size: 0.9rem; letter-spacing: 0.15em; margin-bottom: 1rem; font-weight: 700; }
h2, .section-main-title { font-size: 1.8rem; margin-bottom: 1.8rem;
    letter-spacing: 0.05rem; line-height: 1.8; }

/* --- 追加: h3 のスタイル定義 --- */
h3 {
    font-size: 1.25rem;
    margin-top: 20px;
    margin-bottom: 5px;
	line-height: 1.9;
    letter-spacing: -0.05rem;
    color: var(--main);
}

.feature-img { flex: 1.2; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #e0ddd0; }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.feature-img picture { display: block; width: 100%; height: 100%; }

/* --- プランセクション全体の調整 --- */
.plans-section {
    background-color: var(--base); /* 背景はアイボリー */
    padding: 80px 5%;
}

/* グリッドレイアウト（3並び） */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* カード本体：背景を白にして影をつける */
.plan-card {
    background: #fafafa;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03); /* 非常に薄い枠線で白背景を際立たせる */
}

.plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* 画像：余白なしでカード上部に密着 */
.plan-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.plan-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字エリア：ここをサンプル同様、たっぷりの白背景と余白にする */
.plan-info {
    padding: 25px 25px 35px; /* 上左右にゆとりを持たせる */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* カード内のタイトル：全般のh3設定をリセットして最適化 */
.plan-info h3 {
    font-size: 1.25rem;
    margin: 0 0 10px 0 !important; /* 上の余白を消して画像との距離を詰める */
    color: var(--main);
    line-height: 1.9;
    min-height: 2em; /* 2行～3行で高さが揃うように固定 */
}

/* 料金：アクセントカラーで強調 */
.plan-price {
    font-size: 1.4rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
    border-bottom: 1px solid var(--pearl); /* 下に薄い線を入れて区切る */
    padding-bottom: 10px;
}


/* リスト全体の設定：黒丸を完全に消す */
.plan-details {
    list-style: none !important; /* 強制的にデフォルトの黒丸を削除 */
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.8;
}

/* 各リスト項目：菱形の位置を調整 */
.plan-details li {
    position: relative;
    padding-left: 1.5em; /* 菱形の分だけ左に余白を作る */
    margin-bottom: 8px;
    list-style-type: none !important; /* 念押しでここでも黒丸を消す */
}

/* 菱形（◆）のデザイン：文字化けしないコードを使用 */
.plan-details li::before {
    content: "\25c6"; 
    position: absolute;
    left: 0;
    color: var(--gold);
    font-size: 0.7rem;
    top: 0; /* 上下の位置がズレる場合はここを調整 */
}

/* --- アップグレードオプションのスタイル --- */
.upgrade-options {
    margin-top: 40px;
    padding: 30px;
    background: #f9f9f9; /* 控えめな背景色 */
    border-radius: 8px;
}

.upgrade-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #d4af37; /* ゴールド系の細い線 */
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
}

.upgrade-table {
    display: grid;
    grid-template-columns: 1fr 1fr; /* PCでは2列並べる */
    gap: 15px 40px;
}

.upgrade-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 5px;
}

.item-name {
    font-size: 0.95rem;
    color: #444;
}

.item-price {
    font-weight: bold;
    color: #6d4e05; /* 落ち着いたゴールド系 */
    font-size: 0.9rem;
}


/* ===============================
ワイド画像（フル幅・WebP対応版）
================================ */
#wedding-intro-wide .container {
    display: block;
}

#wedding-intro-wide .feature-text-block {
    flex: none;
    width: 100%;
}

.feature-wide-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    background: #e0dddd;
    margin: 0 0 40px 0;
}

/* pictureタグ自体の設定 */
.feature-wide-img picture {
    display: block; /* 隙間を消すために必須 */
    width: 100%;
    height: auto;   /* 100%ではなくautoにすることで、画像の比率を守る */
}

/* 画像（WebP/JPEG共通）の設定 */
.feature-wide-img img {
    width: 100%;
    height: auto;   /* 比率を維持する最重要設定 */
    display: block;
    object-fit: cover;
}

/* [1] 親の見出し：画像の上に載せるための土台 */
.main-catch {
    position: absolute !important; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 100%;
    margin: 0 !important;
    text-align: center;
}

/* [2] 中の文字：サイズや色の指定 */
.catch-copy-red {
    display: inline-block;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: 0.25em !important;
    line-height: 1.2;
    text-transform: uppercase;
    color: #A6192E !important; 
    
    /*【重要】文字の後ろに強力な白いボカシを敷きます */
    text-shadow: 
        0 0 20px rgba(255, 255, 255, 1), /* 濃い白のボカシ */
        0 0 10px rgba(255, 255, 255, 0.8),
        0 2px 4px rgba(0, 0, 0, 0.3) !important; /* 少し黒い影を入れて締める */
}


.feature-text, .collection-text_left { 
    flex: 1; 
}


/* 画像（WebP/JPEG共通）の設定 */
.wide-img img {
    width: 100%;
    height: auto;   /* 比率を維持する最重要設定 */
    display: block;
    object-fit: cover;
}

/* SNS専用行の余白を詰める */
.sns-item {
    margin-top: 10px !important; /* 上の空行を詰める */
    text-align: center; /* ラベル（Social Media）ごと中央へ */
}

.sns-item .label {
    display: block;
    margin-bottom: 12px; /* 見出しとアイコンの距離を適正に */
}

/* アイコンを左右中央に（justify-content） */
.sns-center {
    display: flex;
    justify-content: center; /* 左右中央 */
    align-items: center;
}

/* グレーの円のデザイン */
.insta-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    background: #f4f4f4;
    color: #333;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* ホバー時の「和の赤」 */
.insta-btn:hover {
    background: #A6192E;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* ===============================
テキストブロック（中央寄せ）
================================ */

.feature-text-block {
  max-width: 720px;       /* ← 横幅制御（重要） */
  margin: 40px auto;      /* ← 中央寄せ */
  text-align: center;     /* ← 高級感出る */
  padding: 0 20px;
}

/* 見出し */
.feature-text-block h2 {
  font-size: 2rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 説明文 */
.feature-text-block .desc {
  color: #555;
  line-height: 1.8;
  margin-bottom: 30px;
}

.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.plan-img { width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; position: relative; }
.plan-img img { width: 100%; height: 100%; object-fit: cover; }

.collection-gallery_right { flex: 1.5; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gallery-item { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #eee; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   6. 提携旅館（スライダー修正版）
========================================================= */
.ryokan-gallery_left { 
    flex: 1.5;           /* 画像側を少し広くする */
    position: relative; 
    border-radius: 12px; 
    overflow: hidden; 
    aspect-ratio: 3 / 2;  /* 高さを固定せず、3:2の比率を維持 */
}

/* スライダー内のラッパー設定（高さを親に追従させる） */
.slider-wrapper {
    width: 100%;
    height: 100%;
}

.slides-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 300%; 
    height: 100%; 
    display: flex; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); 
}

.slide-item { 
    width: 33.3333%; 
    height: 100%; 
}

.slide-item img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

/* テキスト側の調整（少し余白を持たせる） */
.ryokan-text_right {
    flex: 1;
    padding-left: 20px;
}

#r-slide1:checked ~ .slides-container { transform: translateX(0%); }
#r-slide2:checked ~ .slides-container { transform: translateX(-33.3333%); }
#r-slide3:checked ~ .slides-container { transform: translateX(-66.6666%); }

.slider-nav_arrows { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 15px; transform: translateY(-50%); z-index: 10; }
.arrow-left, .arrow-right { width: 45px; height: 45px; background: rgba(0,0,0,0.2); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.arrow-set { display: none; width: 100%; justify-content: space-between; position: absolute; left: 0; padding: 0 15px; }
#r-slide1:checked ~ .slider-nav_arrows .for-r-slide1, #r-slide2:checked ~ .slider-nav_arrows .for-r-slide2, #r-slide3:checked ~ .slider-nav_arrows .for-r-slide3 { display: flex; }


/* =========================================================
   7. 店舗情報・アクセス & フッター
========================================================= */
.container_access { align-items: flex-start; }
.access-title { letter-spacing: 0.3em; }

.info-item.full-width {
    width: 100%;
    border-bottom: 1px solid #e0e0e0; /* これが一本目の長い線 */
    padding-bottom: 20px;
    margin-bottom: 30px;
}

/* 2段目（営業時間・定休日の行全体）を包む箱の底に線を引く */
.info-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #e0e0e0; /* これが二本目の長い線 */
    padding-bottom: 20px;
    margin-bottom: 40px;
}

/* 2カラムの中身 */
.info-col {
    flex: 1;
}

/* 以下、ラベルの色などの調整 */
.label {
    display: block;
    color: #8b2e16; /* 渋い赤色 */
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.access-btns { margin-top: 40px; }
.access-map { flex: 1.2; height: 450px; background: #f7f7f7; border-radius: 12px; overflow: hidden; width: 100%; }
.map-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; border: 1px dashed #ccc; }

/* =========================================================
   フッター（配色を明るく上品に修正）
========================================================= */
.footer { 
    padding: 20px 5%; 
    background: var(--pearl); /* 真っ黒から明るいパール色へ */
    color: #222;
    text-align: center; 
    border-top: 1px solid rgba(212, 182, 123, 0.3); /* 上部に薄いゴールドの線 */
    /* 念のため追加 */
    box-sizing: border-box; 
}

.footer-logo { 
    font-size: 1.2rem; 
    letter-spacing: 0.4em; 
    margin-bottom: 5px; 
    color: var(--main);
    font-weight: 700;
}

/* ★追加：プライバシーポリシー等のリンク設定 */
.footer-links {/* リンクの親要素の色も、薄すぎない色に指定 */
    color: #343434 !important; 
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--main) !important;
    text-decoration: none !important; /* アンダーラインを強制削除 */
    font-size: 0.7rem !important;    /* 文字を小さく */
    display: inline-block;
    line-height: 1.5;
}

.footer-links a:hover {
    opacity: 1;
}

.copyright { 
    font-size: 0.7rem;               /* リンクに合わせて少し調整 */
    opacity: 0.7;                    /* 少し薄くして上品に */
    letter-spacing: 0.05em;
    display: block;
    margin-top: 5px;
}

.btn-line {
  display: inline-block;
  background: #008000;
  color: #fff;
  padding: 14px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

/* ===============================
FAQ - Luxury Style（完全独立）
================================ */
.faq-lux {
  padding: 80px 20px;
  font-family: "Hiragino Mincho ProN", serif;
}

.faq-lux__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* タイトル */
.faq-lux__header {
  text-align: center;
  margin-bottom: 60px;
}

.faq-lux__sub {
  display: block;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #a67c52;
  margin-bottom: 10px;
}

.faq-lux__title {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #333;
}

/* リスト */
.faq-lux__list {
  border-top: 1px solid #ddd;
}

/* 各項目 */
.faq-lux__item {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}

/* 質問 */
.faq-lux__item summary {
  cursor: pointer;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: #222;
  position: relative;
  padding-right: 30px;
  list-style: none;
}

/* デフォルト矢印消す */
.faq-lux__item summary::-webkit-details-marker {
  display: none;
}

/* カスタム矢印 */
.faq-lux__item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  color: #a67c52;
  transition: transform 0.3s ease;
}

/* 開いた時 */
.faq-lux__item[open] summary::after {
  content: "−";
}

/* 回答 */
.faq-lux__item p {
  margin-top: 15px;
  line-height: 1.9;
  font-size: 14px;
  color: #555;
}

/* ホバー（高級感） */
.faq-lux__item summary:hover {
  color: #a67c52;
}
/* 2カラム */
.faq-lux--grid .faq-lux__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}



/* =========================================================
   8. レスポンシブ (スマホ対応)
========================================================= */
@media (max-width: 768px) {
    html { font-size: 18px; }/* 16pxから変更 */
    #hero { height: 70vh; }

    /* 背景画像切替（SP用画像がある場合） */
    .slide-1 { background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8)), url('images/hero-bride-makeup.jpg'); }
    .slide-2 { background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.5)), url('images/kimono-collection.jpg'); }
    .slide-3 { background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.7)), url('images/hero-wedding-shrine.jpg'); }
    
    /* レイアウトを縦並びに変更 */
    .container, .container_twoCol, .container_access { 
        flex-direction: column; 
        gap: 40px; 
        text-align: center; 
    }

    /* 全ての主要画像エリアのサイズをスマホ向けに最適化 */
    .feature-img, .ryokan-gallery_left, .gallery-item, .access-map, .plan-img { 
        width: 100%; 
        height: auto !important; 
        aspect-ratio: 4 / 3;
    }

    .slide-item img { height: 100%; }
    .plans-grid { grid-template-columns: 1fr; }
    .ryokan-text_right { padding-left: 0; }

    /* --- ハンバーガーメニューの形状と色 --- */
    .menu-trigger { display: block; width: 40px; height: 28px; position: relative; z-index: 1100; cursor: pointer; }
    .menu-trigger span { 
        display: block; 
        width: 100%; 
        height: 3px; 
        background-color: var(--accent) !important; /* 三本線を赤に固定 */
        position: absolute; 
        transition: 0.4s; 
    }
    .menu-trigger span:nth-child(1) { top: 0; }
    .menu-trigger span:nth-child(2) { top: 12px; }
    .menu-trigger span:nth-child(3) { bottom: 0; }

    /* メニュー開閉時のアニメーション */
    .menu-cb:checked ~ header .menu-trigger span:nth-child(1) { transform: translateY(12px) rotate(-45deg); }
    .menu-cb:checked ~ header .menu-trigger span:nth-child(2) { opacity: 0; }
    .menu-cb:checked ~ header .menu-trigger span:nth-child(3) { transform: translateY(-13px) rotate(45deg); }

    /* --- ナビゲーションメニュー本体（高さ90%・半透明） --- */
    nav { 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 85%; 
        height: 90vh !important; /* 下部10%を空ける */
        background-color: rgba(18, 18, 18, 0.8) !important; 
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex; 
        align-items: center; 
        justify-content: center;
        overflow: hidden;
        
        /* 初期状態（閉じている時） */
        opacity: 0;
        visibility: hidden;
        transition: 0.4s;
    }

    /* チェック時（開いている時）の表示 */
    .menu-cb:checked ~ header nav { 
        opacity: 1;
        visibility: visible;
    }
　　.menu-cb:checked ~ header .logo { color: #fff; } 
	
    .nav-links { flex-direction: column; gap: 25px; }
    .nav-links a { 
        color: #fff !important; 
        font-size: 1.4rem; 
        letter-spacing: 0.2em; 
		margin-top: 20px; /* ここで「提携旅館」との距離を調整します */
    }
	
    /* パンくずが消えた分、メイン画像を上に詰める */
    main {
        margin-top: 0 !important;
    }
    #hero {
        margin-top: 0px; /* ヘッダーの高さ分だけ空ける */
    }
	.sp-no-padding-top { padding-top: 0 !important; }
    .sp-no-margin-top { margin-top: 0 !important; }
	
	.sp-margin-top-s { margin-top: 1.5rem !important; }
    .sp-margin-top-m { margin-top: 3rem !important; }
    .sp-margin-top-l { margin-top: 4.5rem !important; }

    .sp-margin-bottom-s { margin-bottom: 1.5rem !important; }
    .sp-margin-bottom-m { margin-bottom: 3rem !important; }
    .sp-margin-bottom-l { margin-bottom: 4.5rem !important; }
    
    /* 逆にスマホだけガッツリ空けたい時用 */
    .sp-margin-bottom-l { margin-bottom: 60px !important; }
	
    .pc-only { display: none !important; }
    .sp-only { display: inline !important; } /* <br> などに使うため inline に設定 */

    /* スマホでは文字サイズに合わせて余白を微調整（必要に応じて） */
    .text-margin p {
        margin-bottom: 1.5rem;
    }
    .text-margin p:last-child {
        margin-bottom: 2.2rem;
    }
	
    .container, .container_twoCol, .container_access {
        display: block !important; /* flexを解除して縦に積む */
    }

    /* 2. Shop Information の各項目を横幅いっぱい(col-xs-12相当)にする */
    .shop-info-item {
        width: 100% !important;
        margin-bottom: 30px; /* 項目ごとの間隔 */
        text-align: center;  /* テキストを中央揃えに */
    }

    /* 3. 画像がある場合は、テキストとの間に余白を作る */
    .feature-img, .feature-text, .collection-text_left {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* 4. セクション全体の左右余白を調整 */
    .feature-section, .plans-section, .collection-section, .ryokan-section, .access-section {
        padding: 60px 8%; /* スマホで見やすい余白に */
    }
	/* 地図自体の上の余白も念押しで設定 */
	
    .map-placeholder {
        padding-top: 30px !important;
        min-height: 250px; /* スマホで地図が見えやすい最低限の高さ */
    }
	
.page-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background: rgba(139, 0, 0, 0.8); /* エンジ色を少し透けさせる */
    color: #fff !important;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    text-decoration: none;
    z-index: 9999;
    font-size: 1.2rem;
    transition: 0.3s;
}

    .page-top {
        width: 40px;
        height: 40px;
        line-height: 40px;
        right: 15px;
        bottom: 15px;
    }

/* =========================================================
   婚礼・フォトページ専用：最終調整（Heroなし版）
========================================================= */

/* 1. ヘッダーの下にコンテンツを正しく配置するための余白 */
main {
    padding-top: 100px; 
}

/* 2. 婚礼・フォトプランのカード内テキスト装飾 */
.plan-price {
    font-size: 1.5rem;
    color: var(--accent);
    font-weight: 700;
    margin: 10px 0;
    font-family: var(--font);
}

.plan-details {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1.8;
}

.plan-details li::before {
    content: "・";
    color: var(--accent);
    font-weight: bold;
    margin-right: 5px;
}

/* 3. 慶事サポート（出張着付け等）のリスト装飾 */
.support-list {
    list-style: none;
    padding: 0;
    margin: 2rem;
}

.support-list li {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed var(--gold);
    padding: 12px 0;
    font-size: 0.95rem;
}



/* トップへ戻るボタン（既存のスタイルがある場合は調整） */
.page-top {
    display: inline-block;
    margin-bottom: 15px;
    color: #666;
    text-decoration: none;
    font-size: 1.2rem;
}

	
/* 料金表エリアの幅調整 */
.support-policy-area {
    max-width: 800px;
    margin: 2rem auto;
}

/* 料金項目の1行 */
.info-item-price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem 0;
    transition: 0.3s;
}

/* ホバーで少しだけ浮き上がらせる（任意） */
.info-item-price:hover {
    background-color: rgba(212, 182, 123, 0.05); /* --goldを薄く */
}

/* 左側のテキスト */
.price-label {
    font-weight: 700;
    text-align: left;
    color: var(--main);
    flex: 1;
}

/* 右側の金額 */
.price-value {
    font-weight: 700;
    color: var(--main);
    white-space: nowrap;
    padding-left: 20px;
    font-family: var(--font);
}

}

/* =========================================================
   旅館一覧（Ryokan List）専用スタイル
========================================================= */

/* カード全体の質感を向上 */
.ryokan-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ホバー時に画像がじわっと拡大 */
.ryokan-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(164, 0, 0, 0.08); /* --accentの色を薄く影に */
}

.ryokan-card .plan-img {
    position: relative;
    overflow: hidden;
}

.ryokan-card .plan-img img {
    transition: transform 0.8s ease;
}

.ryokan-card:hover .plan-img img {
    transform: scale(1.1);
}

/* 宿泊特典バッジ */
.benefit-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.1em;
    z-index: 2;
}

/* エリアタグ */
.area-tag {
    display: inline-block;
    border: 1px solid var(--gold);
    color: var(--gold);
    font-size: 0.65rem;
    padding: 2px 8px;
    margin-bottom: 10px;
    border-radius: 2px;
}

/* 説明文のフォント微調整 */
.ryokan-desc {
    font-size: 0.85rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}
	/* =========================================================
   旅館一覧：ワイドカード形式（1行1枚）
========================================================= */
.ryokan-wide-card {
    display: flex;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
    margin-bottom: 60px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    text-decoration: none; /* リンク全体を覆う場合 */
    color: inherit;
}

.ryokan-wide-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 60px rgba(164, 0, 0, 0.1);
}

/* 画像エリア */
.ryokan-wide-img {
    flex: 1.4; /* 画像を少し広めに */
    position: relative;
    overflow: hidden;
    min-height: 400px;
}

.ryokan-wide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.ryokan-wide-card:hover .ryokan-wide-img img {
    transform: scale(1.05);
}

/* テキストエリア */
.ryokan-wide-info {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.ryokan-wide-info h3 {
    font-size: 1.8rem;
    margin: 0 0 15px 0 !important;
    color: var(--main);
    letter-spacing: 0.1em;
	line-height: 1.9;
}

.ryokan-tag-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* スマホ対応 */
@media (max-width: 992px) {
    .ryokan-wide-card {
        flex-direction: column;
    }
    .ryokan-wide-img {
        min-height: 300px;
    }
    .ryokan-wide-info {
        padding: 30px;
    }
}



/* 3. 画像：少し暗くして文字を読みやすくする（オーバーレイ） */
.hero-visual-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 黒30%のフィルムを載せる */
    z-index: 1; /* 画像の上、文字の下 */
}

/* 4. テキストブロック：画像の上に配置 */
.feature-text-block.over-image {
    position: absolute;
    top: 50%; /* 上から50%の位置 */
    left: 50%; /* 左から50%の位置 */
    transform: translate(-50%, -50%); /* 真ん中に持ってくる */
    
    width: 90%; /* 横幅に少し余裕を持たせる */
    max-width: 720px; /* 広がりすぎないように固定 */
    z-index: 2; /* 最前面 */
    
    /* 文字の色を白にする */
    color: #fff !important;
    text-align: center; /* 中央寄せ */
    margin: 0 !important; /* 位置合わせのためにマージンを消す */
    padding: 0;
}

/* カード内のテキスト装飾（白文字化） */
.feature-text-block.over-image h1 {
    color: #fff !important;
    font-size: 2.5rem; /* サイズ調整 */
    letter-spacing: 0.1em;
}

.feature-text-block.over-image .desc {
    color: #fff !important; /* 透明度を上げても良い */
    opacity: 0.9;
}

/* SPタグ（Partner Hotels）の色調整 */
.feature-text-block.over-image .sub-label {
    color: #fff !important; /* 白にするか、ゴールド系にするか */
    /* color: #d4b67b; ゴールド系 */
}
	

/* =========================================================
   ふたり散歩
========================================================= */	
.section-title-area {
  text-align: center;
  margin-bottom: 60px;
}
	

	
/* -------------------------------------------
  MJR Map Section (Premium Design)
---------------------------------------------- */
.mjr-map-section {
  padding: 40px 0 50px 0;
}

.mjr-map-header {
  text-align: center;
  margin-bottom: 40px;
}

.mjr-map-sub {
  display: block;
  font-family: 'Times New Roman', serif;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: #72560d; /* ゴールド系 */
  margin-bottom: 10px;
}

.mjr-map-outer {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  padding: 15px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.mjr-map-inner {
  position: relative;
  padding-bottom: 50%; /* PCアスペクト比 */
  height: 0;
  overflow: hidden;
  /* 高級感を出すためのフィルター */
  filter: grayscale(100%) contrast(1.1) brightness(0.95);
  transition: filter 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}


	
.mjr-map-inner iframe {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100% !important; /* 親の1400pxに合わせる */
  height: 100% !important;
}
	
.credit-text {
    margin: 8px 0 24px;   /* 上下に適度な余白 */
    font-size: 13px;      /* 小さめで控えめに */
    color: #555;          /* グレーで落ち着かせる */
    font-family: var(--font); /* システム明朝 */
    line-height: 1.6;
    padding: 30px 20px;
    text-align: left;     /* 基本は左寄せ */
}

.credit-text-gallery {
  font-size: 12px;
  color: #777;
  margin-top: 10px;
}

/* 特定の場所だけ右寄せにしたい場合、HTMLに直接 class="credit-text tar" と書けるようにする */
.tar {
    text-align: right;
}


/* 散歩マップ */
.ikaho-map-inner {
  display: flex;
  gap: 40px;
  align-items: center;
}

.ikaho-map-img {
  flex: 1.2;
  text-align: center;
}

.ikaho-map-img img {
  width: 85%;
  border-radius: 12px;
}

.map-note {
  font-size: 13px;
  color: #333;
  margin-top: 10px;
}

.ikaho-map-text {
  flex: 1;
}


	
/* -------------------------------------------
  フローティングCTA（SVG内蔵）
---------------------------------------------- */

.floating-cta {
  position: fixed;
  right: 16px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1000;
}

/* 共通ボタン */
.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  transition: all 0.3s ease;
}

/* アイコン（1回だけ） */
.cta-btn svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* LINE */
.cta-btn.line {
  background: rgba(6, 199, 85, 0.9);
}

/* Instagram */
.cta-btn.insta {
  background: linear-gradient(135deg,
    rgba(253,29,29,0.9),
    rgba(193,53,132,0.9),
    rgba(131,58,180,0.9)
  );
}

/* hover */
.cta-btn:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.1);
}

/* 予約 */
.cta-btn.reserve {
  width: auto;
  padding: 0 16px;
  background: #c5a46d; /* ゴールド */
  color: #000;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* 予約アイコン */
.cta-btn.reserve svg {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}



/* =========================================================
   8. レスポンシブ (1024pxからナビバーに切り替え)
========================================================= */

@media (max-width: 1024px) {
    /* PC用の横並びナビを非表示 */
    header .nav-links {
        display: none !important;
    }

    /* 三本線スイッチを表示 */
    .menu-trigger {
        display: block !important;
        width: 40px;
        height: 28px;
        position: relative;
        z-index: 1100;
        cursor: pointer;
    }
    
    .menu-trigger span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: var(--accent) !important; /* エンジ色 */
        position: absolute;
        transition: 0.4s;
    }
    
    .menu-trigger span:nth-child(1) { top: 0; }
    .menu-trigger span:nth-child(2) { top: 12px; }
    .menu-trigger span:nth-child(3) { bottom: 0; }

    /* メニュー開閉アニメーション（×印にする） */
    .menu-cb:checked ~ header .menu-trigger span:nth-child(1) { transform: translateY(12px) rotate(-45deg); }
    .menu-cb:checked ~ header .menu-trigger span:nth-child(2) { opacity: 0; }
    .menu-cb:checked ~ header .menu-trigger span:nth-child(3) { transform: translateY(-13px) rotate(45deg); }

 
  /* --- ナビゲーションメニュー本体（修正版） --- */
nav { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 85% !important; /* 右側に余白を作る設定を維持 */
    height: 90vh !important; 
    
    /* 背景を「rgba(0, 0, 0, 0.95)」に変更：ほぼ黒にして文字を浮かせる */
    background-color: rgba(18, 18, 18, 0.95) !important; 
    
    /* すりガラス効果を強める */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    overflow: hidden;
    
    /* 初期状態（閉じている時） */
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    z-index: 1050;
}

    /* メニュー表示の連動 */
    .menu-cb:checked ~ header nav {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* メニュー内のリンクを縦並びにする */
    .menu-cb:checked ~ header nav .nav-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* リンクの文字改行防止 */
/* スマホナビ内のリンク設定（統合版） */
.nav-links a {
    color: #ffffff !important;         /* 確実に白 */
    font-size: 1.3rem;                 /* 読みやすい大きさ */
    letter-spacing: 0.15em;             /* 和のゆとり */
    font-weight: 500;                  /* 少し太くして視認性アップ */
    white-space: nowrap !important;    /* 意図しない改行を防止 */
    
    /* 文字に薄い影をつけて、背景がどんな画像でも輪郭をはっきりさせる */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
    
    /* タップしやすくするための余白 */
    display: block;
	line-height: 1.0;     /* 行の高さ自体はタイトに */
    padding: 0;
}
}

/* 768px以下の調整（上の設定をベースにする） */
@media (max-width: 768px) {
    .container, .container_twoCol, .container_access {
        display: block !important;
        text-align: center;
    }
    nav {
        width: 85% !important;
        height: 90vh !important;
    }
}
	
/* =========================================================
   レスポンシブ (スマホ対応)
========================================================= */
@media (max-width: 768px) {
    /* スマホでは文字を少し小さく */
    .feature-text-block.over-image h1 {
        font-size: 1.8rem;
    }
    .feature-text-block.over-image .desc {
        font-size: 0.9rem;
        br { display: none; } /* 改行を消す */
    }
	
  .mjr-map-inner:hover {
    filter: grayscale(0%) contrast(1) brightness(1);
  }

    .info-item-price {
        align-items: flex-start; /* 二行になった時も上に揃える */
    }
    .price-label {
        font-size: 0.9rem;
    }
    .price-value {
        font-size: 1rem;
    }
	
    .container_access {
        display: block !important;
    }
    .access-section .collection-gallery_right {
        height: 300px; /* スマホでは少し高さを抑える */
        margin-top: 30px;
    }

.map-wide-img {
  width: 100%;
  display: flex;
  justify-content: center; /* 子要素（img）を中央に配置 */
}

.map-wide-img img {
  height: auto;
  display: block;
  margin: 0 auto; /* 中央寄せの予備設定 */
  
  /* スマホ（デフォルト）の設定 */
  width: 100%;
}


  .ikaho-map-inner {
    flex-direction: column;
    text-align: center;
  }

  .ikaho-map-text {
    text-align: center;
  }

/* スマホ用マップ */

 .map-wide-img img {
    width: 100%;
  }
	
/* スマホ用HERO */
  .hero {
    max-width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .hero img {
    width: 100%;
    height: 90vh;
    object-fit: cover;
  }
 .hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}
	
    .footer-inner {
        padding: 30px 15px; /* モバイルでは少し余白をタイトに */
    }
    .footer-links a {
        font-size: 0.75rem; /* 小さな画面では少し文字を落とす */
    }


/* ===============================
FAQ - Luxury Style（完全独立）
================================ */
/* スマホは1列 */

  .faq-lux--grid .faq-lux__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }



/* スマホでは1列にする */
@media (max-width: 767px) {
    .upgrade-table {
        grid-template-columns: 1fr;
    }
    .upgrade-options {
        padding: 20px;
    }
	
	.catch-copy-red {
    font-size: 24px;      /* PCでは少し大きめに */
    color: #a6192e;      /* 和の赤 */
    letter-spacing: 0.2em;
    font-weight: bold;
    display: inline-block;
}

    .catch-copy-red {
        font-size: 18px !important; /* スマホでは小さく */
        letter-spacing: 0.1em;
    }

 .btn-group {
    justify-content: center;
    text-align: center;
  }

  .btn-content {
    margin-left: 0;
  }
	
	
}