#roadgamen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100dvh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 背景色や透明度はJSとインラインで制御するから書かなくていい */
}

/* 最初はメインコンテンツを隠しておく */
#main-content {
    visibility: hidden;
}

/* このクラスがついたらフェードインする */
#roadgamen.fade-in {
    opacity: 1;
}

/* --- ヘッダー全体のレイアウト設定 --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    height: 60px;
    background-color: #4169e1;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* --- 拡大鏡・選択封印の魔法 --- */
    -webkit-user-select: none;  /* テキスト選択を禁止 */
    -webkit-touch-callout: none; /* 長押しメニュー（拡大鏡含む）を禁止 */
     user-select: none;
}

/* ヘッダーとタブバー、およびその中身全てを長押し禁止にする */
header, 
header *, 
#tab-bar, 
#tab-bar * {
    -webkit-touch-callout: none !important; /* iPhoneの拡大鏡・メニューを殺す */
    -webkit-user-select: none !important;    /* 文字選択を禁止 */
    user-select: none !important;
    -webkit-tap-highlight-color: transparent; /* タップ時のグレーの影を消す */
}

/* ついでに画像全般も長押し禁止（ロゴとかアイコン守る用） */
img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}


/* ついでにタブバーも同じように守っておくと安心 */
#tab-bar, 
#tab-bar * {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}


/* ロゴの画像を中央に固定するための設定 */
/* --- メイン画面のヘッダー（青背景のやつ）だけに効かせる --- */
body > header h1 {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    margin: 0;
}

/* メニューボタンとお知らせボタンのサイズを統一（ロゴのセンター維持に必須） */
#menu-btn, #news-menu-btn {
    width: 40px;        /* 三本線とお知らせボタンの横幅を揃える */
    min-width: 40px;    /* 縮まないように固定 */
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* --- お知らせベルアイコンの枠（親要素） --- */
#news-menu-btn {
    position: relative; /* バッジ（absolute）の基準にする */
    cursor: pointer;
    width: 45px;
    height: 60px; /* ヘッダーの高さに合わせる */
    display: flex;
    justify-content: center; /* ベルを中央に置く */
    align-items: center;
    -webkit-tap-highlight-color: transparent; /* タップ時の青枠を消す */
}

/* ベルアイコン本体 */
#news-menu-btn img {
    display: block;
    width: 24px;
    height: 24px;
    margin-top: 5px; /* iOSのステータスバーを避けてちょっと下げる（お好みで） */
}

/* style.css の 123行目あたり */
#news-badge {
    position: absolute;
    top: 18px;
    right: 0px;
    width: 10px;
    height: 10px;
    background-color: #ff0000 !important;
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 999;
    
    /* display: none; はここには書かず、下の指定に任せる */
    display: none; 
}

/* クラス「is-unread」がついた時だけ表示する */
#news-badge.is-unread {
    display: block !important;
}

/* タップした時の反応 */
#news-menu-btn:active, #menu-btn:active {
    opacity: 0.5;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    overflow: hidden;

    /* --- ここが拡大鏡（楕円形）を殺すポイント --- */
    -webkit-user-select: none;
    user-select: none;
    
    /* ダブルタップのズームと、変な編集モードへの移行を禁止 */
    touch-action: pan-x pan-y;
    scrollbar-width: none;
        /* Chrome, Safari, Edge */
    ::-webkit-scrollbar {
        display: none;
    }
}

* {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    -webkit-user-drag: none;
}

/* ついでにimgタグ単体にも念押しで設定 */
img {
    pointer-events: none; /* 画像への全てのタッチイベントを無視する（一番強力） */
}

:root {
    --kurayama-blue: #4169e1; /* 倉市交の深い青 */
    --status-green: #00c853; /* 通常運行の緑 */
    --status-orange: #ffb000; /*遅延時の橙 */
    --status-red: #ff4141; /* 運休・運転見合わせ時の赤 */
}

/* 運行情報バー */
.info-bar {
    background: white;
    margin: 15px;
    padding: 15px;
    padding-top: 0px;
    border-radius: 8px;
    border: solid 0.5px #cccccc;
    display: flex;
    justify-content: space-between; /* 👈 これで左右にパカッと分かれる */
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: bold;
    cursor: pointer; /* 👈 押せる感が出るからおすすめ */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.info-bar:active {
    background-color: #f0f0f0; /* 押した時に少し暗くなる */
    transform: scale(0.98);    /* ほんの少しだけ凹む */
}

/* 左側の「地下鉄運行情報」エリア */
.info-left {
    display: flex;
    align-items: center;
    gap: 8px; /* アイコンと文字の隙間 */
}

/* 右側の「通常運行 ＞」エリア */
.info-right {
    display: flex;
    align-items: center;
    gap: 10px; /* 通常運行と矢印の隙間 */
    margin-top: 10px;
}

.info-right span {
    margin-right: -2px;
}

/* 矢印（＞）の色とサイズ調整 */
.fa-chevron-right {
    color: #ccc;      /* 主張しすぎない薄いグレー */
    font-size: 0.9em;  /* ほんの少し小さくするとオシャレ */
}

.status-ok {
    color: var(--status-green);
}

.status-dr {
    color: var(--status-orange);
}

.status-st {
    color: var(--status-red);
}

/* メニューグリッド */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 横に4つ並べる */
    gap: 10px;
    padding: 0 15px;
}

/* メニューグリッド内の各アイテムを縦並びにする */
.menu-item, .btn-position {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center;    /* 左右中央 */
    justify-content: center;
    text-align: center;
    gap: 5px;               /* アイコンと文字の間の余白 */
    padding: 10px 5px;      /* 押しやすいように内側の余白を調整 */
}

.menu-item {
  /* これを入れると、長押しした時のシステムの反応がさらに鈍くなる */
  -webkit-touch-callout: none;
  
  /* ボタン内の画像が邪魔しないように */
  pointer-events: auto; 
}

/* アイコン自体の調整（iタグでもimgタグでも） */
.menu-item i, .btn-position img {
    margin-bottom: 0 !important; /* 余計な下余白を消す */
    font-size: 24px;             /* アイコンサイズ */
}

/* 文字の調整 */
.menu-item span, .btn-position span {
    font-size: 11px;
    line-height: 1.2;
    display: block;
}

.menu-item i {
    font-size: 24px;
    margin-bottom: 8px;
}

.menu-item span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.menu-item img {
  /* 画像そのものは「触れないもの」として扱う */
  pointer-events: none;
  /* ドラッグ禁止（念押し） */
  -webkit-user-drag: none;
}

/* 最初は警告画面を隠しておく */
#pc-limit {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100dvh;
    background-color: #4169e1; /* 倉市交ブルーで統一 */
    color: white;
    z-index: 10000; /* 全ての上に置く */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: sans-serif;
}

/* 431px以上の画面（PCとか）の場合 */
@media screen and (min-width: 431px) {
    #pc-limit {
        display: flex; /* 警告を出す */
    }
    header, .main-menu, #roadgamen {
        display: none !important; /* アプリの中身を完全に消す */
    }
}

/* search.html とか 2回目以降の index.html 用 */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4169e1; /* スプラッシュの色 */
    z-index: 10000;
    display: none; /* ← 最初は隠しておく！ */
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* 画面中央に小さく出すクルクル */
#page-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 77, 161, 0.2); /* 倉市交ブルーの薄い版 */
    border-top: 3px solid #004da1; /* 倉市交ブルー */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 9999;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 1. 窓（main-menu）の設定 */
.main-menu {
    /* 位置の固定（しゅんが計算した通り！） */
    margin-top: calc(0px + env(safe-area-inset-top));
    margin-bottom: calc(60px + env(safe-area-inset-bottom));
    height: calc(100% - 65px - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));

    /* ここが重要！中身をスクロールできるようにする */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;

    /* 念のため、中身が横に揺れへんようにガード */
    overflow-x: hidden;
    padding-bottom: 20px; /* 一番下までスクロールした時の「遊び」を作る */
}

/* iframeの基本形だけ決めておく */
.mado-inner {
    width: 100%;
    border: none;
    position: absolute;
    left: 0;
}

#tab-bar {
    position: fixed;
    bottom: 0; /* 地面にピタッとくっつける */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 630px;
    
    /* 高さは「基本の高さ ＋ 下の余白分」 */
    height: 65px;
    padding-bottom: 10px;
    padding-top: 5px;
    
    background-color: #ffffff;
    border-top: 1px solid #ddd;
    z-index: 9999;
    display: flex !important;
    justify-content: space-around;
    align-items: center; /* アイコンを中央に */
    box-sizing: border-box;

    /* 念のための保険（白い影） */
    box-shadow: 0 50px 0 0 #ffffff;
}

/* もし中のボタンも縦になってるならこれも追加 */
#tab-bar div, #tab-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 10px;
}

.btn-position {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #4169e1, #1e90ff); /* 倉山市カラーの青 */
    color: white;
    text-decoration: none;
    padding: 12px;
    border-radius: 8px;
    margin-top: 10px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.status-box {
    margin-left: 10px;
    margin-right: 10px;
}

/* タブの基本スタイル */
.tab-item {
    position: relative; /* インジケーターを配置する基準にする */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 50px;
    color: #888;
    transition: all 0.2s ease;
    padding-bottom: 5px;
}

/* アクティブな時の文字とアイコンの色 */
.tab-item.active {
    color: #004da1; /* 倉市交ブルー（仮） */
}

/* インジケーターの土台 */
.tab-item.active::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 45px;      /* 最終的な太さ */
    height: 3px;
    background-color: #004da1;
    border-radius: 2px;
    left: 50%;
    transform: translateX(-50%);
    
    /* クラスに関係なく、この要素が出現した時にアニメーションさせる */
    animation: lineExtend 0.4s ease-out forwards;
}

/* animateクラスがついた瞬間に、0から45pxに伸びる動きをさせる */
.tab-item.active.animate::after {
    animation: lineExtend 0.4s ease-out;
}

@keyframes lineExtend {
    0% { width: 0; }
    100% { width: 45px; }
}

/* 最初は画面の右外（100%の位置）に置いておく */
.side-page {
    position: fixed;
    top: 0;
    left: 100%; 
    width: 100%;
    height: 100%;
    background: white;
    z-index: 11000; /* ヘッダーやタブバーより手前に出す */
    transition: transform 0.3s ease-out; /* 0.3秒でシュッと動く */
}

/* --- side-page（右からスライド）内のヘッダー調整 --- */
.side-page header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff; /* パネル内は白 */
    color: #333333;
    padding: 0 15px;
    height: 60px;
}

/* --- side-page（走行位置など）のヘッダー調整 --- */
/* h1でもpでも、どちらを使っても真ん中に来るようにする */
.side-page header h1,
.side-page header p {
    flex: 1;              /* 左右のボタン以外のスペースを全部使う */
    display: flex;
    justify-content: center;
    align-items: center;  /* 上下も中央に */
    margin: 0;
    font-size: 16px;      /* タイトルっぽいサイズ */
    color: #333;
}

/* 戻るボタンと、右側のバランス用スペース（重石）を45pxで統一 */
.side-page .back-btn,
.side-page .header-right-space {
    width: 45px;
    min-width: 45px;
    display: flex;
    align-items: center;
}

/* クラスが付いたら左に100%分戻る（画面に収まる） */
.side-page.is-open {
    transform: translateX(-100%);
}

/* 画面の中身を隠す真っ白な壁 */
#loading-overlay {
    display: none;
    position: fixed;
    top: 65px;    /* ヘッダーの高さ分下げる */
    bottom: 65px; /* タブバーの高さ分上げる */
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 9990; /* ヘッダーやタブバーよりは下 */
}

/* クルクルを目隠しより上に持ってくる */
#page-spinner {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35px;
    height: 35px;
    border: 4px solid rgba(65, 105, 225, 0.1);
    border-top: 4px solid #4169e1; /* 倉市交ブルー */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 9991; /* 目隠しより少し上 */
}

.tab-item img {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
}

#side-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px; /* スマホ幅に対してこれくらいが「整う」 */
    height: 100%;
    background-color: white;
    z-index: 10001;
    transform: translateX(-100%); /* 最初は左に隠す */
    transition: transform 0.3s ease; /* スライドのアニメーション */
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
}

#side-menu.open {
    transform: translateX(0); /* 出てくる */
}

#menu-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 10000;
}

/* メニュー内のヘッダーの高さと位置を合わせる */
.menu-header-area {
    /* ヘッダーと同じ高さの計算にする */
    height: calc(65px + env(safe-area-inset-top)); 
    padding-top: env(safe-area-inset-top); 
    display: flex;
    align-items: center;
    position: relative;
}

#menu-close {
    position: absolute;
    /* padding-top分を考慮して、中央に見えるように調整 */
    bottom: 20px; 
    left: 15px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

/* ×印を作るための棒 */
.close-bar {
    position: absolute;
    top: 12px;
    width: 25px;
    height: 2px;
    background-color: #333; /* メニュー内は白背景やから黒っぽい色で */
}

.close-bar.top {
    transform: rotate(45deg);
}

.close-bar.bottom {
    transform: rotate(-45deg);
}

/* メニュー全体のコンテンツエリア */
.menu-content {
    /* 上下に20px、左右に20pxの余白を空ける */
    padding: 7px; 
    
    /* もし左右だけ調整したいならこれ */
    /* padding-left: 20px; */
    /* padding-right: 20px; */
}

/* ユーザーカード（ポイントのところ）も微調整 */
.user-status-card {
    /* もし全体にpaddingを入れたなら、こっちのmarginは0でもええかも */
    margin-bottom: 20px; 
    width: 100%; /* 親要素の幅いっぱいに広げる */
    box-sizing: border-box; /* 余白を含めたサイズ計算にする（超重要！） */
    padding-left: 15px;
    padding-bottom: 10px;
    border-bottom: solid 1px #cccccc;
}

/* メニューリストのアイコンと文字の間隔 */
.menu-list li {
    padding: 10px 0; /* 上下だけpaddingにして、左右は親の.menu-contentに任せる */
    padding-left: 10px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px #cccccc;
}

.menu-list li img {
    margin-right: 10px;
}

.menu-list {
    padding-left: 20px;
}

.login-btn {
    display: block;
    background-color: #4169e1;
    color: #ffffff;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 10px;
    width: 190px;
    text-align: center;
}

.status-sheet {
    position: fixed;
    bottom: -100%; /* 最初は隠す */
    left: 0;
    width: 100%;
    height: 70dvh; /* 画面の7割の高さ */
    /* 1. 影を「上方向だけ」に限定する */
    /* 0px(横) -5px(縦：マイナスは上) 15px(ぼかし) で、下には影を出さない */
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
    background: white;
    border-radius: 20px 20px 0 0;
    z-index: 10001; /* オーバーレイ(1000想定)より上に置く */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
    overflow-y: auto;
    touch-action: none; /* ブラウザ標準のスクロールを止めて、JSのドラッグを優先させる */
    will-change: transform; /* アニメーションを滑らかにするおまじない */
}

.status-sheet.open {
    bottom: 0;
}

.sheet-handle {
    width: 40px;
    height: 5px;
    background: #ccc;
    border-radius: 10px;
    margin: -10px auto 15px;
}

.submit-btn {
    color: #ffffff;
    background-color: #4169e1;
}

/* ログイン状態による出し分け */
.status-logged-view { display: none; } /* 基本は隠す */

/* ログイン済みクラス(is-logged)がついた時の動き */
.user-status-card.is-logged .status-unlogged-view { display: none; }
.user-status-card.is-logged .status-logged-view { display: block; }

/* ログイン後の会員番号の見た目（お好みで！） */
.user-id-badge {
    font-size: 11px;
    color: #666;
    margin-bottom: 10px;
}
.user-name {
    font-weight: bold;
    color: var(--kurayama-blue);
}

/* --- My駅セクション全体 --- */
.my-station-section {
    margin-top: 20px;
    padding-bottom: 10px;
}

/* ヘッダー：タイトルと編集ボタン */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 15px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-link {
    font-size: 12px;
    color: #4169e1;
    border: 1px solid #4169e1;
    padding: 3px 15px;
    border-radius: 20px;
    font-weight: bold;
    background: #fff;
    cursor: pointer;
}

/* --- スライド（Swiper）設定 --- */
.myStationSwiper {
    width: 100%;
    padding-bottom: 40px !important;
}

/* --- 駅カード本体 --- */
.station-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin: 0 15px;
    width: calc(100% - 30px);
    border: 1px solid #f0f0f0;
}

/* 駅名エリア全体の配置 */
.card-top {
    display: flex;
    justify-content: space-between; /* 左・中・右に振り分ける */
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
}

/* 左右のアイコンサイズ固定 */
.header-icon-left, .header-icon-right {
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.line-badge {
    background: #4169e1;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 10px;
}

/* 中央の駅名グループ */
.station-title-center {
    display: flex;
    align-items: center; /* ナンバリングと駅名の高さを合わせる */
    gap: 10px; /* ナンバリングと駅名の隙間 */
}

/* ナンバリング画像 */
.station-numbering {
    height: 28px; /* 画像の高さは適宜調整してな */
    width: auto;
}

/* 駅名（漢字とよみがな）を縦に並べる */
.station-name-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左寄せ */
}

/* 漢字の駅名 */
.station-name-kanji {
    font-weight: bold;
    font-size: 22px;
    color: #222;
    line-height: 1.1;
}

/* よみがな（漢字のすぐ下） */
.station-name-yomi {
    font-size: 11px;
    color: #888;
    font-weight: normal;
    margin-top: -2px; /* 漢字に少し近づける */
}

/* --- 列車一覧レイアウト（一直線の横並び） --- */
.train-row-standard {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f9f9f9;
    gap: 12px;
}

/* のりば：上が数字、下が「のりば」文字（縦線なし） */
.platform-box-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45px;
    flex-shrink: 0;
}
.p-num-large {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    line-height: 1;
}
.p-unit-small {
    font-size: 9px;
    color: #888;
    margin-top: 2px;
}

/* 種別ラベル（四角い背景） */
.train-type-badge-rect {
    background-color: #666;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* 時刻：黒色、行先と同サイズ（17px） */
.train-time-text {
    font-size: 17px;
    font-weight: bold;
    color: #000;
    width: 55px;
    text-align: center;
    flex-shrink: 0;
}

/* 行き先 */
.destination-text {
    font-size: 17px;
    font-weight: bold;
    color: #333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 下部アクションボタン（四隅を囲った独立ボタン） --- */
.card-actions-row {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding-top: 5px;
}

.action-outline-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #4169e1;
    color: #4169e1;
    padding: 10px 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    background: #fff;
    cursor: pointer;
}

/* スライド用ページネーション（ドット） */
.swiper-pagination-bullet-active {
    background: #4169e1 !important;
}

/* 未登録時のカード（動画再現） */
.no-station-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 20px;
    padding-top: 60px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin: 0 15px;
    width: calc(100% - 30px);
    border: 1px solid #f0f0f0;
    height: 350px;
}

/* --- シンプルな右から左へのスライド ＆ 指定ボタンのみ底固定 --- */

/* 設定パネルの中身全体を固定 */
#settings-sheet .sheet-content {
    position: relative !important;
    width: 100% !important;
    height: calc(100% - 5px) !important; /* ハンドル分を引いた高さ */
    padding: 0 !important;
    overflow: hidden !important;
}

/* 2つの画面共通のスタイル（絶対配置で重ねる） */
#settings-sheet .sheet-view {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    /* ★しゅんが消してくれた周りのpaddingは0のまま、ボタンの高さ分（下側だけ90px）余白を開けてリストがボタンの裏に隠れないようにする */
    padding: 0 0 0px 0 !important; 
    overflow-y: auto !important; /* 縦スクロールは画面ごとに独立 */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; /* 滑らかなスライド */
    will-change: transform;
    background: #fff !important; /* 背景が透けないように白に固定 */
    display: flex !important;    /* 縦並びのレイアウトにする */
    flex-direction: column !important;
}

/* 中のボディ要素を縦いっぱいに広げる */
#settings-sheet .sheet-body {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* ★ターゲットの2つの保存ボタンだけを一番下に固定する */
#settings-sheet .save-main-btn {
    margin-top: auto !important; /* リストが短くても長くても、自動で一番下に押し下げる */
    margin-bottom: 0px !important; /* 画面のいっちゃん底との間に少し隙間を作る */
    margin-left: 20px !important;  /* ボタンの左側に綺麗な余白を作る */
    margin-right: 20px !important; /* ボタンの右側に綺麗な余白を作る */
    width: calc(100% - 40px) !important; /* 左右の余白分を引いて画面からはみ出すのを防ぐ */
    position: sticky !important; /* スクロールしても常に底に固定 */
    bottom: 30px !important;
    z-index: 10 !important;
    flex-shrink: 0 !important; /* ボタンが縦に潰れるのを防ぐ */
}

/* 編集モードへ入るボタン（これは底に固定せず、リストのすぐ下にそのまま残す） */
#settings-sheet .edit-mode-btn {
    margin-left: 20px !important;
    margin-right: 20px !important;
    width: calc(100% - 30px) !important;
}

/* 【初期状態】My駅一覧（最初から画面内に表示） */
#settings-sheet #view-list {
    transform: translateX(0);
    z-index: 1;
}

/* 【初期状態】全駅一覧（最初は画面の右外に隠しておく） */
#settings-sheet #view-edit {
    transform: translateX(100%);
    z-index: 2; /* My駅一覧より上に重ねる */
}

/* 全駅一覧がアクティブになったら、右から左へスライドインしてくる */
#settings-sheet #view-edit.active {
    transform: translateX(0);
}

/* 設定画面内のパーツを「くらナビ」仕様に */
.sheet-view { display: none; }
.sheet-view.active { display: block; }

.sheet-desc { font-size: 13px; color: #666; margin-bottom: 20px; line-height: 1.5; }

.station-row, .selection-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    padding-top: 0px;
    border-bottom: 1px solid #f0f0f0;
}

.save-main-btn {
    width: 100%; background: var(--kurayama-blue); color: #fff; border: none;
    padding: 15px; border-radius: 12px; font-weight: bold; font-size: 16px;
    margin-top: 20px;
}

.edit-mode-btn {
    width: 100%; background: #fff; border: 1px solid var(--kurayama-blue);
    color: var(--kurayama-blue); padding: 12px; border-radius: 12px;
    font-weight: bold; margin-top: 15px;
}

.line-btn {
    flex: 1; border: 1px solid #ddd; background: #fff; padding: 8px; border-radius: 20px;
}
.line-btn.active { border-color: var(--kurayama-blue); color: var(--kurayama-blue); background: rgba(65, 105, 225, 0.1); }

/* 設定パネルも運行情報と同じ動きにする */
#settings-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 80vh; /* 画面の8割くらい */
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 2000;
    transform: translateY(100%); /* 最初は隠しておく */
    transition: transform 0.3s ease-out; /* これがアニメーションの正体！ */
    display: block; /* style.cssで消してたらこれを有効に */
}

/* openクラスがついたら画面に出てくる */
#settings-sheet.open {
    transform: translateY(0);
}

/* 背景を暗くするオーバーレイの基本設定 */
#sheet-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1500;
    display: none; /* 最初は隠す */
}

/* 設定パネルの初期状態とアニメーション */
#settings-sheet {
    display: block !important; /* JSで消さないように固定 */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 85vh; /* 運行情報と同じくらいの高さ */
    background: #fff;
    border-radius: 20px 20px 0 0;
    z-index: 10001;
    transform: translateY(100%); /* 最初は下に見切れてる */
    transition: transform 0.3s ease-out; /* これがヌルヌルの正体！ */
}

/* openがついた時だけ上に上がってくる */
#settings-sheet.open {
    transform: translateY(0);
}

/* ==========================================
   My駅設定パネル内・駅一覧のレイアウト完全修正
   ========================================== */

/* 1. 一覧画面の行（アイコン ➔ 駅名 ➔➔➔➔ ラジオボタン ➔ 右余白） */
#settings-sheet .station-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 左から順番に並べる */
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 一覧の駅名（松ヶ崎） */
#settings-sheet .station-row .st-name {
    text-align: left !important;
    margin-left: 12px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #333 !important;
    flex-grow: 1 !important; /* ★駅名の右側を広げて、ラジオボタンを右端に飛ばす */
}

/* ==========================================
   ★ラジオボタンの見た目を、走行位置の丸枠と完全統一！
   ========================================== */

/* ブラウザ標準のダサい丸ポチの見た目をリセットして、走行位置のグレーの丸枠を作る */
#settings-sheet .station-row input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    outline: none !important;
    margin: 0 !important;
    margin-right: 8px !important; /* ★右端のちょい余白！ */
    
    /* 走行位置のカスタムラジオボタンのサイズと枠線を完全トレース */
    width: 20px !important;
    height: 20px !important;
    border: 1px solid #ccc !important; /* 未選択時のグレーの丸枠 */
    border-radius: 50% !important;     /* 綺麗な真ん丸にする */
    background-color: #fff !important;
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

/* ★選択（checked）された時：真ん中に綺麗な青いポチを浮かび上がらせる（二重丸デザイン） */
#settings-sheet .station-row input[type="radio"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* 丸のど真ん中に固定 */
    width: 10px !important;
    height: 10px !important;
    background-color: #4169e1 !important; /* 中の青丸 */
    border-radius: 50% !important;
    display: block !important;
}


/* ==========================================
   2. 編集画面の行（チェックボックス側も右端・右余白に綺麗に揃える）
   ========================================= */
#settings-sheet .selection-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

#settings-sheet .selection-row span {
    text-align: left !important;
    font-size: 16px !important;
    flex-grow: 1 !important;
}

#settings-sheet .selection-row input[type="checkbox"] {
    margin: 0 !important;
    margin-right: 8px !important; /* 右端のちょい余白 */
    transform: scale(1.1) !important;
    cursor: pointer;
    flex-shrink: 0 !important;
}

/* =========================================
   くらナビアプリ公式：標準共通ラジオボタン本体（.radio-btn）
   ========================================= */

/* ラジオボタン本体（OS標準の見た目を完全にリセットして共通化） */
input[type="radio"].radio-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 1px solid #ccc !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important; /* サイズ計算を枠線内側に固定 */
    overflow: hidden !important;       /* ★これで内側のグレーが枠線から絶対にはみ出さないようにする */
    transition: background-color 0.1s, transform 0.1s !important;
}

/* ★これや！タップした瞬間（:active）：枠線の内側の丸い空間だけがぴったり灰色に染まる */
input[type="radio"].radio-btn:active {
    background-color: rgba(0, 0, 0, 0.1) !important; /* 画像の赤い円のサイズぴったりに灰色が入る */
    transform: scale(0.9) !important; /* ふにゅっと縮むエフェクト */
}

/* チェックが入った時の真ん中の青ポチ */
input[type="radio"].radio-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important; /* 初期状態は中央でサイズ0 */
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    transition: 120ms transform ease-in-out !important; /* 120msでシュッと広がる */
    background-color: #4169e1 !important; /* 安定のくらナビブルー */
}

/* チェックされたらサイズを1にして出現させる */
input[type="radio"].radio-btn:checked::before {
    transform: translate(-50%, -50%) scale(1) !important;
}

.radio-btn {
        color: #333;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        padding: 5px; 
        border-radius: 4px;
    }

/* =========================================
   くらナビアプリ公式：標準共通チェックボックス本体（.check-btn）
   ========================================= */

/* チェックボックス本体（OS標準の見た目を完全にリセットして共通化） */
input[type="checkbox"].check-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 17px !important;
    height: 17px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important; /* ★チェックボックスは綺麗な角丸の四角 */
    background-color: transparent !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* 内側のグレーやチェックマークを枠線から絶対にはみ出させない */
    transition: background-color 0.1s, transform 0.1s !important;
}

/* ★タップした瞬間（:active）：ラジオボタンと同じく、枠線の内側ジャストサイズだけを灰色にする */
input[type="checkbox"].check-btn:active {
    background-color: rgba(0, 0, 0, 0.1) !important; /* 20pxの四角の内側だけがぴったり灰色に */
    transform: scale(0.9) !important; /* ふにゅっと縮む心地いいエフェクト */
}

/* ★チェックが入った時：ボタン全体をくらナビブルーに染める */
input[type="checkbox"].check-btn:checked {
    background-color: #4169e1 !important;
    border-color: #4169e1 !important;
}

/* ★チェックが入った時の「白レ点マーク」（疑似要素で描画） */
input[type="checkbox"].check-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 45% !important;
    left: 50% !important;
    width: 3px !important;  /* レ点マークの短い棒 */
    height: 8px !important; /* レ点マークの長い棒 */
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important; /* 下と右の線だけ残してレ点にする */
    transform: translate(-50%, -50%) rotate(45deg) scale(0) !important; /* 初期状態は回転させてサイズ0 */
    transform-origin: center !important;
    transition: 120ms transform ease-in-out !important; /* 120msでシュッと出現 */
}

/* チェックされたら白レ点をスケール1にして出現させる */
input[type="checkbox"].check-btn:checked::before {
    transform: translate(-50%, -50%) rotate(45deg) scale(1) !important;
}

/* 縦並びにするためのブロック */
.destination-block {
  display: flex;
  flex-direction: column;
  justify-content: center; 
  flex: 1;                 
}

/* 上側にくる経由地（ふりがなサイズ・灰色） */
.via-text {
  font-size: 0.75rem;       /* 小さめ */
  color: #757575;           /* 控えめなグレー */
  font-weight: normal;      
  margin-bottom: 1px;       /* 下の行き先との隙間 */
}

/* 下側にくる行き先テキスト */
.destination-text {
  font-size: 1.1rem; 
  font-weight: bold;
  color: #333;
  margin-top: -3px;
}

/* ① 均一系統（オレンジ地に白文字） */
.route-flat {
  background-color: #0000ff !important;
  color: #ffffff !important;
}

/* ② 均一系統・循環（200番台など：緑地に白文字） */
.route-loop {
  background-color: #ff8c00 !important;
  color: #ffffff !important;
}

/* ③ 調整系統（多区間・整理券：白地に黒文字、または青地に白文字） */
/* ※京都市バスは「白地に黒文字（外枠あり）」か「青地に白文字」が定番やね！ */
.route-multi {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #1a1a1a; /* 白地の場合は枠線があると引き締まる */
}

/* --- ドット（ページネーション）の見た目を完全制御 --- */
.swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #ccc !important; /* 未選択時はグレー */
    opacity: 1 !important;
    margin: 0 4px !important;
    transition: background 0.2s ease !important;
}

/* アクティブな時だけ青くする */
.swiper-pagination-bullet-active {
    background: #4169e1 !important; /* くらナビブルー */
}

/* ドットの親要素を中央寄せにする */
.swiper-pagination {
    bottom: 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

#install-steps-area {
    width: 100%;
    max-width: 400px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    
    /* --- ここを追加 --- */
    max-height: 65dvh;    /* 画面の高さの半分までしか広げない */
    overflow-y: auto;     /* 溢れたら自動でスクロールさせる */
    -webkit-overflow-scrolling: touch; /* iPhoneでヌルヌル動かす */
}

/* ドットの親要素の位置を微調整 */
#guide-sheet .swiper-pagination {
    bottom: 107px !important; /* 今の値より小さく（上に）してくれ */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}