html,
body {
    height: 100%;
    /* シニア向け可読性: 16px → 20px (+25%) — Phase G-1 second-pass */
    font-size: 20px;
    animation: fadeIn .8s normal;
    /* Phase G-1 twenty-first-pass: 通常 Safari の URL バー auto-hide 時に灰色の帯が
       見えていた問題を解消。body 背景を Google Maps の地表色に統一 → 隙間がマップ色に。 */
    background-color: #e5e3df;
    line-height: 1.8;

    /* Phase G-1 seventh-pass: ピンチズームで画面全体が拡大されてフッターが消える問題を防ぐ
       - touch-action: pan-x pan-y → 縦横スクロールは許可、ピンチズーム禁止
       - text-size-adjust → iOS Safari の自動文字拡大を抑制
       - overscroll-behavior → スクロール慣性での親要素スクロール抑制
       注: #map 内は Google Maps が独自に touch-action を制御するので影響なし */
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
}

/* Phase G-1 twenty-second-pass: PWA standalone 対応を撤廃（ホーム画面追加機能は諦め）
   通常 Safari / Chrome ブラウザの統一レイアウトのみ維持する。 */

/* --- 打ち合わせ(7) 合意: シニア向けタップ領域保証 --- */
.hw-footer-nav a, .hw-footer-nav button, .tool-btn, .top-icon, .fab-button, .action-btn, .comment-submit {
    min-height: 44px;
    min-width: 44px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select {
    min-height: 44px;
    font-size: 16px; /* iOSのズーム抑制 */
}

@keyframes fadeIn {
    /*animation-nameで設定した値を書く*/

    0% {
        opacity: 0
    }

    /*アニメーション開始時は不透明度0%*/

    100% {
        opacity: 1
    }

    /*アニメーション終了時は不透明度100%*/

}

button img,
button svg{
    width: 60px;
    height: 60px;
    margin:0px auto 0px auto;
}

.button-box{
    font-size: 2.5vw;
    height: 100%;
}

.button-box button{
    height: 100%;
}

        #map {
            /* Phase G-1 tenth-pass: Google Maps SDK が inline style で position:relative を
               書き込むため、CSS では !important で強制上書き。画面全体固定。 */
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1;
        }

        .control {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px;
            /* background: #eee; */
            background-color: orange;
            z-index: 1100;
            box-shadow: 0 0 2px 1px #aaa;
        }


        .corss-box {
            position: relative;
            width: 100%;
            height: 50%;
        }

        #corss_mark {
            position: absolute;
            width: 50px;
            height: 50px;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -25px;
            pointer-events: none;
        }

        /* Phase G-1 twentieth-pass: 全モード（通常ブラウザ / Safari / standalone）で同じ位置に固定
           Safari の URL バー auto-hide や iOS の env() 不安定性に依存しない安全策
           top: 50px でノッチ(~47px) を確実に回避 */
        #houi {
            position: fixed;
            z-index: 1000;
            width: 100px;
            height: 100px;
            background-color: white;
            border-radius: 50%;
            left: 10px;
            top: 50px;
            pointer-events: none;
            box-shadow: 0 0 1px 1px #aaa;
        }

        #houi.hw{
            background-image: url('../images/direction_base.svg');
        }
        #houi.ck{
            background-image: url('../images/direction_base_checker.svg');
        }

        #distance{
            position: absolute;
            width: 100px;
            top: 100px;
            text-align: right;
            width: 100px;
        }

        #bearing{
            position: absolute;
            width: 100px;
            height: 100px;
            top: 0px;
            left: 0;
        }

        #bearing_text{
            position: absolute;
            width: 100px;
            left: 150px;
            text-align: right;
        }


        .custom-map-control-button {
            background-color: #fff;
            border: 0;
            border-radius: 5px;
            box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
            margin: 10px;
            padding: 10px;
            font: 400 18px Roboto, Arial, sans-serif;
            overflow: hidden;
            height: 50px;
            cursor: pointer;
            width: 50px;
        }

        .search-box{
            background-color: #f5f5f5;
            padding: 10px 10px;
            position: absolute;
            /* bottom: 0; */
            /* 経路ボタン追加で高さが増えたため top:-80px だと下端が画面上部にはみ出す。
               transform で画面外へ完全に隠し、.active で降ろす（上部の謎バー対策 2026-05-26）。 */
            top: 0;
            transform: translateY(-110%);
            transition: transform .4s ease;
            width: 100%;
            z-index: 1500;
            box-shadow: 0 0 1px 1px #aaa;
        }

        .search-box input{
            border-radius: 10px;
            width: 90%;
            /* 4/30 白崎様要望: 旧版のコンパクトサイズに戻す（長い住所が入りきらないため） */
            min-height: auto;
            height: 32px;
            font-size: 14px;
            padding: 4px 8px;
            box-sizing: border-box;
        }
        .search-box button#search_button{
            min-height: auto;
            height: 32px;
            padding: 0 10px;
            font-size: 14px;
        }

        .search-box.active{
            top: 0px;
            transform: translateY(0);
            /* bottom: 100px; */
        }

        /* 5/1 白崎様要望: cross mark がパン中もはっきり見えるように拡大 + 中央配置を確実に */
        #cross_mark{
            width: 56px;
            height: 56px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            z-index: 1500;
            pointer-events: none;
            opacity: 0.95;
        }

        /* 4/30 白崎様要望: 旧 hw.kaiun-houi.com 相当のコンパクトサイズ + コンパスとの被り解消
           - コンパスは left:28 / width:100px → 右端 128px
           - パネル: left:140px から右側に配置（コンパスの右隣）
           - max-width: 220px、画面端まで -16px の右余白
           - 内容（差 0時間22分 等）に合わせてコンパクトに */
        #jisa{
            position: fixed !important;
            top: 14px !important;
            left: 140px !important;
            right: auto !important;
            transform: translateY(-180px) !important;
            opacity: 0 !important;
            transition: transform .35s ease, opacity .25s ease !important;
            /* 内容（現/正/差）に幅をフィットさせ、右側の白い余白を出さない */
            width: max-content !important;
            max-width: calc(100vw - 156px) !important;
            margin: 0 !important;
            z-index: 1100 !important;
            display: block !important;
            pointer-events: auto !important;
            font-size: 18px !important;
        }

        #jisa.active{
            transform: translateY(0) !important;
            opacity: 1 !important;
        }

        /* 狭い画面（iPhone SE/13mini 等）はコンパスの直下に縦配置 */
        @media (max-width: 380px) {
            #jisa{
                top: 138px !important;
                left: 8px !important;
                right: auto !important;
                width: max-content !important;
                max-width: calc(100vw - 16px) !important;
            }
        }

        table.table{
            width: 100%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.25);
        }

        /* 4/30 白崎様要望: シニア向けに字を大きく */
        table.table td{
            padding: 8px 12px;
            font-size: 17px;
        }
        table.table td:first-child{
            font-weight: bold;
            color: #888;
            font-size: 15px;
            width: 32px;
        }
        table.table td:last-child{
            font-weight: 600;
            color: #333;
        }

        table.table tr:nth-child(2) td{
            border-bottom: 1px solid #aaa;
            border-top: 1px solid #aaa;
        }

        #display_line.active,
        #time.active,
        #search.active,
        #henkaku.active
        {
            background-color: #ffc653;
        }


        /* Phase G-1 fifteenth-pass: 本家(hw.kaiun-houi.com)と同等のサイズ感に縮小
           html { font-size:18px } の拡大影響を打ち消すため #jisa_calc 内は固定 14px
           Phase G-1 nineteenth-pass: z-index を 1100 に上げて自動記録 pill より前面に */
        #jisa_calc{
            /* position:absolute だと bottom:-120vh がページ下方に伸びてスクロール領域を拡張し、
               下スクロールで隠しパネルに到達して見えてしまう不具合があった（白崎様報告）。
               fixed にしてビューポート固定のオーバーレイにし、スクロールで到達しないようにする。 */
            position: fixed;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
            max-width: 360px;
            width: 90vw;
            left: 50%;
            transform: translateX(-50%);
            padding: 16px 18px;
            z-index: 1100;
            transition: .5s;
            bottom:  -120vh;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.55;
            box-sizing: border-box;
        }

        #jisa_calc.active{
            bottom: 110px;
        }

        /* Phase G-1 seventeenth-pass v5: appearance:none で OS と Tailwind の両矢印を消し、
           自前 SVG 矢印を 1 つだけ表示する */
        #jisa_calc select{
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            border-radius: 6px;
            padding: 6px 30px 6px 12px !important;
            margin: 0 6px 6px 0 !important;
            font-size: 16px;
            min-width: 60px;
            line-height: 1.4;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
            background-repeat: no-repeat !important;
            background-position: right 9px center !important;
            background-size: 11px 11px !important;
            border: 1px solid #d0d0d0;
            color: #333;
        }
        #jisa_calc select::-ms-expand{ display: none; }
        #jisa_calc .pb-4{
            padding-bottom: 8px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2px;
        }

        #jisa_calc .area{
            font-size: 18px;
            color: #333;
            font-weight: bold;
            padding: 0 0 8px;
            line-height: 1.5;
        }

        option{
            padding: 8px;
        }

.btn{
    border-radius: 5px;
    background-color: #eee;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border:1px solid #ccc;
    font-size: 14px;
}

.jisa_calc_table{
    width: 100%;
    table-layout: fixed;
}
/* 4/30 白崎様要望: シニア向けに字を大きく */
.jisa_calc_table td{
    width: 50%;
    padding: 9px 8px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 17px;
    font-weight: 700;
}

.gm-control-active{
    /* top: -10px !important; */
}

#search_button{
    min-width: 50px;
    padding: 5px 10px;
    background-color: white;
    border-radius: 10px;
    margin-left: 5px;
}

.start_btn{
    position: absolute;
    width: 200px;
    text-align: center;
    height: 30px;
    line-height: 30;
    margin-left: -100px;
    margin-top: -15px;
    left: 50%;
    top: 50%;
    z-index: 3000;
}

.user-control-btn{
    position: absolute;
    bottom: 100px;
    right: 0;
    background-color: #aaa;
    padding: 20px;
    color:white;
    /* width: 220px; */

}

.user-control-btn a{
    display: inline-block;
    width: 100%;
    height: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.user-table.table th,
.user-table.table td{
    padding: 15px;
    text-align: center;
}

.user-table thead th{
    background-color: #bbddf6;
}

select#continue_flag_select{
    padding: 5px 20px;
    width: 200px;
}

.error.text-danger{
    font-weight: bold;
    color:#a00;
}

.login-title{
    font-weight: bold;
    font-size: 1.2rem;
}

button a{
    width: 100%;
    height: 100%;
}

#myTable_filter{
    padding-bottom: 10px !important;
}

.dataTables_length#myTable_length select{
    padding-right: 30px;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after{
    right:4px !important;
}

table.dataTable{
    font-size: 12px;
}

.cross-mark-box{
    position: relative;
}

.houi-mark{
    width:15px;
    height:15px;
    background:rgba(0,0,0.1);
}
.mark1{
    position: absolute;
    z-index: 100;
}

@media screen and (max-width: 375px){
    
    #jisa{
        margin-left: -38px;
    }
    
}


.search-box #history-list {
    display: none;
}

.search-box.active #history-list {
    display: block;
}

#history-list li{
    list-style-type: none;
    border-bottom:1px solid #ddd;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-close{
    width: 25px;
    text-align: center;
}

#history-list li span{
    display: inline-block;
    width: 100%;
}