@charset "UTF-8";

/* --- スマホ版 基本設定 --- */
body.mobile-body { 
    font-family: sans-serif; 
    line-height: 1.6; 
    margin: 0; 
    padding: 10px; 
    background-color: #f9f9f9; 
    color: #333; 
}

h2.mobile-h2 { 
    font-size: 1.2rem; 
    border-left: 5px solid #DEB887; 
    padding-left: 10px; 
    margin-bottom: 10px; 
}

/* --- 地区切り替えボタン --- */
.area-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.area-btn {
    background: #fff;
    border: 2px solid #DEB887;
    border-radius: 8px;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
    height: 30px;
    overflow: hidden;
}

.area-btn img {
    display: block;
    width: auto !important; 
    max-width: 90% !important;
    height: auto !important;
    max-height: 50px !important;
    margin: 0 auto;
}

/* --- 地図・コンテナ --- */
/* 地図コンテナ内のテキスト配置を左寄せに強制 */
.map-container {
    text-align: left !important;
    padding-left: 0 !important;
    width: 100%; 
    height: 460px; /* 以前より高さを確保して注釈のスペースを作る */
    padding: 0;
    margin-bottom: 5px; 
    border-radius: 10px; 
    overflow: hidden; 
    border: 1px solid #ccc;
}

/* iframe内のコンテンツ（史跡名リストなど）の表示位置を調整 */
.map-iframe-responsive {
    display: block;
    margin-left: 0;
    margin-right: auto;
    height: 460px; /* map-container の値を再定義 */
}

/* もしリストが特定のクラス（例: site-list）で囲まれている場合 */
#site-list {
    padding-left: 5px; /* 画面端に密着しすぎない程度の微調整 */
    text-align: left;
}

/* --- 史跡リスト(カード形式) --- */
.site-card { 
    background: #fff; 
    border-radius: 8px; 
    padding: 12px; 
    margin-bottom: 10px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    border-left: 4px solid #DEB887; 
}

.site-title { 
    font-weight: bold; 
    font-size: 1.1rem; 
    color: #b45309; 
    display: block; 
    margin-bottom: 5px; 
}

.site-info { font-size: 0.9rem; color: #666; }

.action-icons { margin-top: 10px; display: flex; gap: 15px; }
.action-icons a { 
    display: flex; 
    align-items: center; 
    text-decoration: none; 
    font-size: 0.8rem; 
    color: #333; 
    border: 1px solid #ddd; 
    padding: 5px 10px; 
    border-radius: 5px; 
    background: #fefefe; 
}
.action-icons img { width: 24px; margin-right: 5px; }

/* --- ボタン類 (青色系) --- */
#refresh-btn, #map-pdf-btn, .site-link-btn {
    height: 34px;
    box-sizing: border-box;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    border: 1px solid #343a40;
    text-decoration: none;
    background-color: #619FDC;
    color: #ffffff !important;
}

.back-home { 
    display: block; 
    text-align: center; 
    margin: 20px 0; 
    padding: 15px; 
    background: #666; 
    color: #fff; 
    text-decoration: none; 
    border-radius: 8px; 
}

/* --- スマホ版ページ用の警告枠設定 --- */
.map-notice {
    display: block !important;
    border: 2px solid #DEB887 !important; /* 木枠風の茶色 */
    padding: 8px !important;
    margin: 10px auto !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    color: #333 !important;
    font-size: 0.9em !important;
    line-height: 1.4 !important;
    text-align: left !important;
    clear: both !important;
}

/* ============================================================
   子画面（1__G_...）専用：スマホ表示最適化
   ============================================================ */
@media screen and (max-width: 768px) {

    /* 全体の余白調整 */
    body.mobile-body {
        display: block !important;
        margin: 0 !important;
        padding: 4px !important;
        background-color: #fff !important;
    }

    /* 史跡名リスト：影をつけてスクロールを促す */
    body.mobile-body #marker_list {
        display: block !important;
        float: none !important;
        height: 95px !important;      
        overflow-y: scroll !important; 
        overflow-x: hidden !important; 
        -webkit-overflow-scrolling: touch !important; /* iPhoneスクロール滑らか */
        margin: 5px 0 !important;
        padding: 5px !important;
        border: 1px solid #aaa !important;
        background: #fdfdfd !important;
        box-shadow: inset 0 -12px 8px -10px rgba(0,0,0,0.2) !important;
    }

    /* 右端スクロールバー（PC・Android向け） */
    body.mobile-body #marker_list::-webkit-scrollbar { width: 8px; }
    body.mobile-body #marker_list::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    body.mobile-body #marker_list::-webkit-scrollbar-thumb { background: #888888; border-radius: 4px; }

    /* 史跡名テキストの整列 */
    body.mobile-body #marker_list li {
        flex: 0 1 auto !important;          /* 文字の長さに幅を合わせる */
        display: inline-block !important;   /* blockから変更して横に並ぶようにする */
        margin: 0 !important;
        padding: 2px 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        white-space: normal !important;     /* 長い名前の改行を許可 */
        text-align: left !important;
        text-decoration: underline;
    }

    /* みどり色の注釈 */
    body.mobile-body .course-note {
        display: block !important;
        margin: 5px 2px !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        color: #228B22 !important;
    }

    /* 地図の配置 */
    body.mobile-body #map_canvas {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 360px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #999 !important;
    }

    /* レイアウトを壊す改行タグを非表示 */
    body.mobile-body br[clear="all"] {
        display: none !important;
    }
}

/* ============================================================
   ここから追加：トップページ・その他共通のスマホ対応調整
   ============================================================ */

/* iPhone等で文字が勝手に小さくなるのを防ぐ */
html {
    -webkit-text-size-adjust: 100%;
}

/* リンクホバー時の半透明化 */
a:hover {
    opacity: 0.6;
    transition-duration: 0.3s;
}

/* --- 問い合わせフォーム・ポップアップ（モーダル）設定 --- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); /* 重複していたため統合 */
    z-index: 10000;
}

.modal-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 25px;
    width: 90%;
    max-width: 450px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    max-height: 90vh;
    overflow-y: auto;
}

.close-btn { float: right; font-size: 24px; cursor: pointer; color: #888; }
.form-group { margin-bottom: 12px; text-align: left; }
.form-group label { display: block; font-weight: bold; margin-bottom: 4px; font-size: 0.9em; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;
}
.required-label { color: red; font-size: 0.8em; }
.optional-label { color: gray; font-size: 0.8em; }

.submit-btn {
    background: #00B900; color: white; border: none; padding: 12px; width: 100%;
    font-size: 1em; font-weight: bold; border-radius: 4px; cursor: pointer; margin-top: 10px;
}
.submit-btn:hover { background: #009900; }


/* --- トップページ：スマホ向けレイアウト調整 --- */
@media screen and (max-width: 768px) {
    /* 全体の基本文字サイズ */
    body {
        font-size: 16px;
    }

    /* マップとマーカーリストを非表示にする */
    div#Contents div#map_canvas, 
    div#Contents ul#marker_list {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        visibility: hidden !important;
    }
    
    /* 地図の代わりに警告メッセージを表示 */
    #googlemap::after {
        content: "※スマートフォン用画面です。おすすめは、PC・タブレットからご覧ください。";
        display: block;
        font-size: 16px; 
        color: #d9534f;
        margin-top: 10px;
        font-weight: bold;
        background-color: #fff2f2;
        border: 2px solid #d9534f;
        border-radius: 8px;
        padding: 10px;
        text-align: center;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }

    /* テーブル内の文字と画像サイズ調整 */
    #top-table td {
        font-size: 14px !important;
    }
    #top-table img {
        max-width: 80px; 
        height: auto;
    }
}