/* Dynamic Typeの影響を防ぐ */
body, html {
    -webkit-text-size-adjust: 100%; /* iOSでの動的文字サイズ変更を無効化 */
    text-size-adjust: 100%;        /* その他ブラウザでの動的文字サイズ変更を無効化 */
    font-size: 100%;              /* デフォルトのフォントサイズを100%に */
}

/* ボタンやリンクも影響を防ぐ */
button, .close-button {
    font-size: 16px; /* ボタンや閉じるアイコンの文字サイズを固定 */
    user-select: none; /* 選択無効化 */
    cursor: pointer; /* ポインタ表示 */
    -webkit-text-size-adjust: 100%; /* iOSでの文字サイズ変更無効化 */
    text-size-adjust: 100%;
}

/* バナーのスタイル */
.banner {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: 'Arial', sans-serif;
    z-index: 1000;
    white-space: nowrap; /* 改行を防止 */
    border: 2px solid #003366; /* バナーの枠に色を追加 */
}

.banner-item {
    padding: 10px 30px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    width: 100px; /* 各アイテムの幅を均等に設定 */
}

.banner-item:hover {
    color: #0066cc;
}

.banner-item.selected {
    background-color: #003366; /* 選択されたアイテムの背景色を青に変更 */
    color: #fff; /* 選択されたアイテムの文字色を白に変更 */
}

.banner-item:not(.selected) {
    background-color: #fff; /* 非選択アイテムの背景色を白に設定 */
    color: #003366; /* 非選択アイテムの文字色を青に設定 */
}

/* 地図表示用の枠 */
#map-container {
    width: 100%;
    height: calc(100vh - 40vh); /* ルート案内パネル分の高さを引く */
    position: relative;
    z-index: 1;
    margin: 0; /* マージンをリセット */
    padding: 0; /* パディングをリセット */
}

/* 地図を表示する領域の高さを調整して、ルート案内パネルのスペースを確保 */
#map {
    height: 100%;
    width: 100%;
}

/* ルート案内パネルのスタイル */
#directions-panel {
    position: relative;
    width: 100%;
    background: white;
    padding: 10px;
    border-top: 1px solid #ccc;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
    height: 40vh; /* パネルの高さを40%に固定 */
    overflow-y: auto;
    margin-top: 10px; /* 上部に若干の隙間を追加 */
    margin: 0; /* マージンをリセット */
}

/* ヘッダー部分はスクロールせずに固定 */
.directions-header {
    padding-bottom: 10px;
    margin-top: 10px;  /* 上部に10pxの隙間を追加 */
}

/* ステップ部分のみスクロール */
.directions-steps {
    height: 120px; /* 固定の高さに設定 */
    overflow-y: auto;
    padding-right: 10px;
}

.directions-steps ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.directions-steps li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

/* 閉じるアイコンの余白 */
.directions-header span {
    margin-right: 50px; /* 右側に余白を追加 */
}

/* 所要時間の余白 */
.directions-header .duration {
    margin-right: 50px; /* 所要時間の右側に余白を追加 */
}

/* ルート案内パネルを表示している時は、地図の高さを調整 */
.map-with-directions #map {
    height: calc(100vh - 40vh) !important;
}

/* アイコン一覧のスタイル */
#icon-list {
    position: absolute;
    top: 40px; /* 画面上部から40pxの位置に表示 */
    display: none;
    padding: 20px;
    font-family: Arial, sans-serif;
    margin-top: 50px;
    width: 100%; /* リスト全体の幅を100%に設定 */
}

.icon-item {
    display: flex;
    align-items: center;
    padding: 10px 0; /* 上下のパディング */
    border-top: 1px solid #ccc; /* 上に灰色の線 */
    border-bottom: 1px solid #ccc; /* 下に灰色の線を追加 */
    margin: 0; /* 余白をなくす */
}

.icon-item img {
    width: 32px;
    height: 32px;
    margin-right: 10px;
}

/* ダイアログのスタイル */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* 背景を暗くする */
    display: none; /* 初期状態では非表示 */
    align-items: center;
    justify-content: center;
    z-index: 4000;
    touch-action: none; /* 背景でのタッチ操作を無効化 */
}

/* ダイアログのコンテンツ */
.dialog-content {
    display: flex;
    flex-direction: column;
    width: 90%; /* 必要に応じて調整 */
    max-width: 600px;
    height: 85%; /* ダイアログ全体の高さ */
    background: white;
    border-radius: 8px;
    overflow: hidden; /* 全体のスクロールを防止 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    font-size: 16px; /* 文字サイズを固定 */
    line-height: 1.5; /* 行間を固定 */
    user-select: none; /* テキスト選択を無効化 */
    -webkit-user-select: none; /* Safari用 */
    -ms-user-select: none; /* IE用 */
}

/* 固定ヘッダー部分 */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
    font-size: 18px; /* ヘッダーの文字サイズを固定 */
    font-weight: bold;
    line-height: 1.5; /* 行間を固定 */
    user-select: none; /* 選択無効化 */
}

/* スクロール可能なコンテンツ部分 */
.scrollable-content {
    flex: 1; /* 残りの領域を占有 */
    overflow-y: auto; /* 縦スクロールを有効化 */
    padding: 20px; /* 内側の余白を追加 */
    max-height: calc(85vh - 60px); /* ダイアログ全体の高さからヘッダーの高さを引いた値 */
    -webkit-overflow-scrolling: touch; /* iOSやWebViewでの慣性スクロールを有効化 */
    touch-action: pan-y; /* 縦方向のパン操作を許可 */
}

/* 固定フッター部分 */
.dialog-footer {
    padding: 20px; /* フッター内全体に余白を追加 */
    background: #f5f5f5; /* 背景色 */
    border-top: 1px solid #ccc; /* 上部の線 */
    text-align: center; /* 中央揃え */
    flex-shrink: 0; /* 高さを固定 */
}

/* 閉じるボタン */
.close-button {
    position: absolute; /* 他の要素の影響を排除 */
    top: 10px; /* ヘッダーの上部からの距離 */
    right: 20px; /* ヘッダーの右側からの距離 */
    font-size: 24px; /* ボタンのフォントサイズ */
    color: #333; /* ボタンの文字色 */
    cursor: pointer; /* ホバー時にポインタを表示 */
    z-index: 100; /* 他の要素より前面に表示 */
}

/* チェックボックスのスタイル */
.checkbox {
    display: flex; /* チェックボックスとラベルを横並びに配置 */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: flex-start; /* 左揃えに配置 */
    padding-left: 20px; /* 左側に余白を追加 */
    padding-bottom: 10px; /* 下側に余白を追加 */
    width: auto; /* 必要な幅だけ確保 */
    margin: 0; /* 外側の余白をリセット */
}

.checkbox input {
    margin-right: 10px; /* チェックボックスとラベルの間に適切な余白 */
}

.icon-location {
    background-image: url('/icons/common/current-location.png'); /* 現在地アイコンのURL */
}

/* 現在地アイコン、ルートアイコンのスタイル */
.icon-inline {
    display: inline-block;
    vertical-align: middle;
    width: 48px; /* アイコンの幅 */
    height: 48px; /* アイコンの高さ */
    background-size: cover;
}

/* テキストの改行設定 */
.dialog-content p {
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* 見出しのスタイル */
.dialog-content h3 {
    margin: 0; /* 上下の余白をリセット */
    padding: 0; /* パディングもリセット */
    font-size: 18px; /* フォントサイズ */
    color: #333;
    flex: 1; /* ヘッダー全体の幅を使わせる */
}

/* ダイアログ内の項目名 */
.dialog-content .label {
    font-weight: bold;
    margin-top: 10px;
}

/* ローディングインジケータ用のスタイル */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #003366;
    flex-direction: column;
    pointer-events: none;  /* Now Loading中でもクリックをブロックしないようにする */
}

/* スピナーのスタイル */
.spinner {
    border: 8px solid #f3f3f3; /* 外側の円の色 */
    border-top: 8px solid #3498db; /* 上部の部分の色 */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin-bottom: 20px; /* テキストとのスペース */
}

/* スピナーのアニメーション */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 現在位置アイコンのスタイル */
#current-location-icon {
    position: absolute;
    right: 20px;
    bottom: 40px;
    width: 50px;
    height: 50px;
    background-color: #fff;
    background-image: url('/icons/common/current-location.png'); /* アイコンのURL */
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 2000;
}

.route-active #current-location-icon {
    bottom: calc(40vh + 20px) !important; /* ルート案内時にアイコンを上へ移動 */
    z-index: 2000;
}

/* チュートリアルダイアログのスタイル */
#tutorial-dialog {
    z-index: 4000; /* ローディングインジケータの上に表示されるようにz-indexを高く設定 */
    pointer-events: auto;  /* チュートリアルダイアログはクリック可能に設定 */
}

#custom-popup {
    position: absolute;
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    line-height: 1.5;
    z-index: 1000;
}

/* 背景を暗くするオーバーレイ */
#overlay {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
    z-index: 9999; /* ダイアログの背面に表示 */
}

/* カスタムダイアログのスタイル */
#custom-alert {
    display: none; /* 初期状態は非表示 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 12px;
    width: 90%; /* 全体画面幅の90% */
    max-width: 400px; /* 最大幅を400pxに設定 */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    padding: 20px;
    z-index: 10000;
    font-family: 'Arial', sans-serif;
    text-align: left; /* 文字を左寄せに */
    font-size: 16px; /* デフォルトのフォントサイズ */
}

/* アラートタイトルのスタイル */
#custom-alert .alert-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

/* アラートメッセージのスタイル */
#custom-alert .alert-message {
    font-size: 16px;
    color: #555;
    margin-bottom: 80px;
}

/* ボタンスタイル */
#custom-alert .alert-button {
    position: absolute;  /* 絶対配置に変更 */
    right: 20px;         /* 右から20pxの位置に固定 */
    bottom: 20px;        /* 下から20pxの位置に固定 */
    padding: 12px;
    background-color: #007BFF;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    width: auto;  /* 幅を自動調整に設定 */
}

/* 時間フィルタ全体のスタイル */
.time-filter {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    background-color: #003366; /* バナーと同じ背景色 */
    border-radius: 30px; /* 角を丸く */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    padding: 0; /* 内側の余白を削除 */
    width: auto; /* 必要な幅だけを確保 */
    border: none;
    text-align: left;
}

/* プルダウンメニュー自体のスタイル */
#time-filter {
    appearance: none; /* デフォルトの矢印を無効化 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #003366; /* バナーと同じ背景色 */
    color: #fff; /* 文字色を白に設定 */
    font-size: 16px;
    font-weight: bold; /* 太字 */
    border: none; /* 枠線を削除 */
    padding: 10px 20px; /* 内側の余白を調整 */
    border-radius: 30px; /* 角を丸く */
    cursor: pointer;
    width: auto; /* 親要素に合わせた幅 */
    text-align: left;
    box-sizing: border-box;
}

/* オプション項目のスタイル */
#time-filter option {
    background-color: #fff; /* ドロップダウンメニューの背景色 */
    color: #003366; /* ドロップダウンメニューの文字色 */
    font-weight: bold;
    text-align: left;
}

/* IE/Edge用の矢印アイコン非表示 */
#time-filter::-ms-expand {
    display: none;
}

.time-filter.hidden {
    display: none; /* 非表示にする */
}

/* スマートフォン画面に対応したレイアウト */
@media screen and (max-width: 768px) {
    /* バナーのスタイルを調整 */
    .banner {
        top: 15px; /* スペースを少し小さく */
        left: 50%;
        transform: translateX(-50%);
        width: 90%; /* バナー全体の幅を90%に変更 */
        font-size: 14px; /* フォントサイズを少し小さく */
    }

    .banner-item {
        padding: 8px 15px; /* スマホ用にパディングを縮小 */
        font-size: 14px; /* フォントサイズを小さく */
        width: 50%; /* 各アイテムの幅を50%に設定（2つのアイテムを同じ幅に） */
        box-sizing: border-box; /* パディングと幅の扱いを均等に */
        text-align: center; /* テキストを中央揃えにする */
    }

    #map {
        height: calc(100vh - 10px); /* 画面全体の高さから50px引いて調整 */
        margin-bottom: 10px; /* 下部に50pxの余白を追加 */
    }

    /* 地図表示エリアの調整 */
    #map-container {
        height: 80vh; /* 画面の80%に高さを調整 */
    }

    /* ルート案内パネルを少し小さくする */
    #directions-panel {
        height: 35vh; /* 高さを35%に固定 */
        padding: 5px; /* 内側のパディングを小さくする */
    }

    /* 現在地アイコンの位置を調整（スマホ専用） */
    #current-location-icon {
        bottom: 80px;
    }

    /* アイコンリストの表示を調整 */
    #icon-list {
        top: 20px; /* リストの表示位置を調整 */
        width: 95%; /* リスト全体の幅を95%に設定 */
    }

    /* チュートリアルダイアログの幅を調整 */
    .dialog-content {
        width: 90%; /* ダイアログの幅を狭める */
        height: 90%; /* 高さを85%から90%に拡大 */
        max-height: 90vh; /* 最大高さを90%に設定 */
    }

    .scrollable-content {
        max-height: calc(90vh - 60px); /* ダイアログ全体の高さからヘッダーの高さを引いた値 */
    }

    /* スマートフォン用に現在地アイコンのサイズを調整 */
    #current-location-icon, #route-icon {
        width: 40px; /* サイズを小さくする */
        height: 40px; /* サイズを小さくする */
    }

    /* ローディングインジケータのテキストサイズを調整 */
    #loading-overlay {
        font-size: 18px; /* テキストサイズを小さくする */
    }

    .spinner {
        width: 40px; /* スピナーのサイズを小さくする */
        height: 40px; /* スピナーのサイズを小さくする */
        border-width: 6px; /* ボーダーの幅を調整 */
    }

    /* パネルが開いているときの地図の高さを調整 */
    .map-with-directions {
        height: calc(100vh - 35vh) ; /* ルート案内パネルに合わせて地図の高さを調整 */
    }

    .route-title {
        font-size: 14px; /* タイトルの文字を小さく */
    }

    .route-details {
        font-size: 12px; /* 距離と時間の文字を小さく */
    }

    .directions-steps {
        font-size: 12px; /* ステップの文字も小さく */
    }

    .step-item {
        font-size: 12px; /* 文字サイズを小さくする */
    }

    .step-item div {
        text-align: left;
    }

    #custom-alert {
        width: 80%; /* 幅を80%に縮小 */
        max-width: 300px; /* 最大幅を300pxに制限 */
    }

    #custom-alert .alert-button {
        right: 10px;  /* スマホ表示時にボタンを右端に寄せる */
        bottom: 10px; /* スマホ表示時にボタンを下端に寄せる */
        padding: 10px; /* パディングを少し小さくする */
        font-size: 14px; /* フォントサイズを少し小さくする */
    }

    #route-icon {
        left: 10px; /* 左端にさらに近づける */
        width: 50px; /* アイコンのサイズを小さく */
        height: 50px; /* アイコンのサイズを小さく */
        padding: 8px; /* 内側のパディングを縮小 */
    }

    #dialog-body {
        flex: 1; /* 残りの領域を占有 */
        overflow-y: auto; /* 縦スクロールを有効化 */
        -webkit-overflow-scrolling: touch; /* iOSやWebViewでの慣性スクロールを有効化 */
        touch-action: pan-y; /* タッチイベントを縦方向スクロールのみに制限 */
        font-size: 16px; /* 本文の文字サイズを固定 */
        line-height: 1.5; /* 行間を固定 */
        user-select: none; /* 選択無効化 */
    }

    .time-filter {
        top: 70px; /* 上部からの距離を調整 */
    }
}