/* ==========================================================================
   1. 基本レイアウト（html, body, 共通設定）
   ========================================================================== */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "M PLUS 1", sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    color: #424242;
}

.site-content {
    display: flex;
    height: calc(100vh - 80px);
    width: 100%;
    position: relative;
}

#map-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

#map {
    flex-grow: 1;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

.map-logo {
    position: absolute;
    top: 10px;
    left: 20px;
    height: 50px;
    z-index: 1;
}

/* ==========================================================================
   2. フローティングナビゲーション（Info / Shopping）
   ========================================================================== */
/* 元のデザインを継承 */
.floating-nav-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    gap: 10px;
	left: 20px;
	bottom: 20px;
	flex-direction: column;
	align-items: flex-start;
}

.nav-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.nav-item:hover { transform: scale(1.05); }

.nav-icon-circle {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

.nav-icon-circle i { color: #ec407a; font-size: 26px; }

.nav-label {
    color: #ec407a;
    font-size: 18px;
    margin-left: 10px;
    white-space: nowrap;
    text-shadow: 0px 0px 3px #ffffff;
}

/* Googleマップ内のカスタムボタン */
.custom-map-control-button {
	bottom: 0 !important;
    background-color: #ec407a;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    margin-right: 20px;
    margin-bottom: 20px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.custom-map-control-button:hover { transform: scale(1.05); }

.custom-map-control-button i {
    pointer-events: none;
}

/* ==========================================================================
   3. 情報パネル（スポット詳細）
   ========================================================================== */
#spot-info-panel {
    position: fixed;
    top: 1%;
    right: 1%;
    width: 400px;
    height: calc(100vh - 2%);
    background-color: #ffffff;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    border-radius: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}

#spot-info-panel.active { opacity: 1; visibility: visible; }

#panel-main-image-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-bottom: 10px;
}

#panel-main-image-container .main-panel-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 8px 8px 0 0;
}

#close-panel-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    opacity: 50%;
}

.panel-content { padding: 0 10px 10px; }

.panel-title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px 0;
}

#panel-title { font-size: 24px; color: #333; margin: 0 0 0 10px; }

.directions-btn {
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 10px 0 0;
    background: none;
}
.directions-btn:hover { opacity: 0.5; }
.directions-btn i { color: #ec407a; font-size: 36px; }

/* --- タブ機能 --- */
.panel-tabs { display: flex; border-bottom: 1px solid #b5b5b5; position: relative; }
.tab-button {
    flex: 1; padding: 10px 0; background-color: transparent; border: none;
    cursor: pointer; font-size: 16px; color: #555; transition: all 0.2s;
    text-align: center; position: relative; z-index: 1; box-sizing: border-box;
}
.tab-button.active {
    background-color: #ffffff; border-bottom: 3px solid #424242;
    color: #424242; font-weight: bold;
}
.panel-tabs::after {
    content: ''; position: absolute; bottom: 0px; height: 3px; background-color: #424242;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    transform: translateX(var(--tab-offset, 0px)); width: var(--tab-width, 0px);
}

.tab-content { display: none; padding: 30px 10px; }
.tab-content.active { display: block; }
.tab-content p, .tab-content ul, .tab-content pre { line-height: 1.6; color: #555; margin: 0; }

/* ★重要：リストとリンクのスタイル★ */
.tab-content ul { list-style: none; padding: 0; }
.tab-content ul li { margin-bottom: 10px; }
.tab-content ul li .menu-name { margin-right: 5px; }
.tab-content a { color: #424242; text-decoration: none; }
.tab-content a:hover { text-decoration: underline; }

/* --- 基本情報タブ --- */
#tab-basic-info > div { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
#tab-basic-info > div > p, #tab-basic-info > div > div { flex-grow: 1; display: flex; flex-direction: column; }
#tab-basic-info > div > i {
    font-size: 26px; margin: 2px; width: 30px; text-align: center;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
#tab-basic-info > div:not(.has-multi-line) > i { align-self: self-start; }

/* 修正依頼リンクのコンテナ */
.edit-request-container {
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
}

/* 修正依頼リンク自体 */
a.edit-request-link {
    color: #888888;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s;
    display: inline-block;
	margin: 0 auto;
}

.edit-request-link:hover {
    text-decoration: underline;
}

/* --- 特典セクション --- */
#special-offer-section {
    display: block;
    visibility: visible;
    background: #d0f0ff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

/* ★特典メインがない（.no-content）時の制御★ */
#special-offer-section.no-content {
    background: #d0f0ff; /* 詳細があるなら背景色は維持 */
    padding: 0;          /* 全体のパディングを一旦リセット */
}

/* 特典メイン（タイトルと内容）を非表示にする */
#special-offer-section.no-content h3,
#special-offer-section.no-content #panel-offer-content {
    display: none !important;
}

/* ★ここがポイント：詳細（備考）だけを「詳細がある時だけ」表示させる★ */
#special-offer-section.no-content #panel-offer-details {
    display: block !important;
    visibility: visible !important;
    padding: 15px 10px; /* 詳細だけが残る時のための適切な余白 */
    text-align: left;    /* 詳細文言は左寄せが見やすい */
    font-size: 0.95em;
    line-height: 1.5;
}

/* --- 通常時（特典メインがある時）のパーツ --- */
.tab-content h3 {
    display: block; width: 180px; border-radius: 24px; font-size: 1em;
    margin: 0 auto 10px; text-align: center; line-height: 30px;
    color: #90caf9; background: #ffffff;
}

#panel-offer-content {
    display: block; width: 100%; border-bottom: solid 1px #ffffff;
    margin: 10px 0; padding-bottom: 10px; font-size: 1.4em;
    font-weight: bold; text-align: center;
}


/* --- その他要素 --- */
#panel-description { margin: 20px 0; }
.menu-list-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }

/* 写真ギャラリーの親コンテナ */
#panel-photos-gallery {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* 2列固定 */
    grid-template-rows: masonry;           /* ★ masonryが効かないブラウザへの予備策を下に書きます */
    gap: 10px;
    align-items: start;                    /* ★ これがiPhone Safariの上ズレを防ぎます */
}

/* masonry（Pinterest風）を全ブラウザで安定させるための代替案 */
@supports not (grid-template-rows: masonry) {
    #panel-photos-gallery {
        display: block !important;
        column-count: 2;
        column-gap: 10px;
    }
    
    #panel-photos-gallery img {
        break-inside: avoid;
        margin-bottom: 10px;
        /* ★ iPhone Safariの「一番上が下がる」問題を殺す魔法の一行 */
        display: inline-block; 
        vertical-align: top;
    }
}

/* ギャラリー内の各画像共通 */
#panel-photos-gallery img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    cursor: zoom-in;
    /* blockだとSafariで1枚目がズレることがあるので、あえてinline-blockに */
    display: inline-block;
    vertical-align: top;
}

/* モーダル全体の背景 */
.image-modal {
    display: none; /* 通常は非表示 */
    position: fixed;
    z-index: 10000; /* 全ての要素より上に */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* 黒背景（透過90%） */
    cursor: zoom-out;
}

/* 拡大される画像 */
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 80%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* モーダルの閉じるボタン */
.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2); /* 透過させた白 */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10002;
}

/* ==========================================================================
   4. 免責事項オーバーレイ
   ========================================================================== */

.disclaimer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* 地図を暗く隠す */
    z-index: 10000; /* 全てのものより上に */
    display: none; /* 初期状態は非表示（JSで制御） */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* ポップアップの白い箱 */
.disclaimer-content {
    background: #fff;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.disclaimer-content h2 {
    background: #f8f8f8;
    margin: 0;
    padding: 20px;
    font-size: 18px;
    text-align: center;
    border-bottom: 1px solid #eee;
    color: #424242;
	font-weight: normal;
}

/* スクロールする本文エリア */
.disclaimer-body {
    padding: 20px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: #616161;
}

.disclaimer-body h3 {
    font-size: 15px;
    color: #ec407a;
    margin: 15px 0 5px 0;
}

.disclaimer-body p {
    margin: 0 0 10px 0;
}

.disclaimer-body a {
    color: #616161;
}

.admin-link {
    margin-top: 20px;
    text-align: right;
    padding-top: 10px;
}

.admin-link {
    margin-top: 20px;
    text-align: right;
    padding-top: 10px;
}

/* 同意ボタン */
.disclaimer-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    text-align: center;
}

/* 最初はグレーで押せない状態 */
.agree-button {
    background: #ccc;
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    cursor: not-allowed;
    width: 100%;
    transition: all 0.3s;
    pointer-events: none;
    opacity: 0.6;
}

.agree-button.is-active {
    background: #ec407a;
    cursor: pointer;
    pointer-events: auto;
    opacity: 1;
}

.close-disclaimer {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 32px;
    line-height: 1;
    color: #9e9e9e;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 10;
}

.close-disclaimer:hover {
    color: #ec407a; /* ホバーでピンクに */
}

/* ==========================================================================
   5. レスポンシブデザイン
   ========================================================================== */
@media (max-width: 600px) {
	.map-logo {left: 10px;}
    .floating-nav-container { top: 10px; right: 10px; left: auto; flex-direction: row; height: 50px; }
    .nav-label { display: none; }
	.nav-icon-circle { width: 40px; height: 40px; margin: 5px 0;}
	.custom-map-control-button { width: 40px; height: 40px;}
    #spot-info-panel {
        top: auto; right: 0; bottom: -70vh; width: 100%; height: 70vh; margin: 0;
        border-radius: 10px 10px 0 0; box-shadow: 0 -3px 5px rgba(0,0,0,0.2);
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0); opacity: 1; visibility: visible; overflow-y: auto;
    }
    #spot-info-panel.active { transform: translateY(-100%); }
    #panel-main-image-container { height: 150px; overflow: hidden; margin-bottom: 0; border-radius: 10px 10px 0 0; }
    #panel-main-image-container .main-panel-image { width: 100%; height: 100%; object-fit: cover; border-radius: 10px 10px 0 0; }
    #close-panel-btn { top: 10px; right: 15px; color: #fff; opacity: 100%; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
    #panel-title { font-size: 20px; }

    .close-disclaimer {
        top: 10px;
        right: 15px;
        font-size: 36px;
    }
	

}