@media screen and (min-width: 768px) {

    html, body {
        font-family: "Noto Sans JP", sans-serif;
        background-color:gray;
        padding:0;
        margin:0;
        height:100%;
        width:100%;
    }

    *{
        z-index:1;
    }

    h1, h2, h3{
        font-weight:normal;
        margin:0;
    }

    select, option, input{
        color:#777777;
    }

    a, a:visited, a:hover, a:active {
        text-decoration: none;
    }

    ul{
        padding-inline-start:0;
    }

    input:focus {
        outline:none;
        border-bottom: 2px solid #3B3838;
    }

    select:hover{
        cursor: pointer;
    }

    select:focus{
        outline:none;
        border-bottom: 2px solid #3B3838;
    }

    .fa{
        color:#3B3838;
        font-size:1vw;
        padding-right:6%;
    }

    .std-container{
        background-color:white;
        box-shadow: 0 0 2px rgb(0 0 0/20%),0 -1px 0 rgb(0 0 0/2%);
    }

    .first-line-container{
        width:15%;
        margin-left:1%;
    }

    .second-line-container{
        /* width:27%; */
        width:2%;
        margin-left:0.2vw;
    }

    .third-line-container{
        /* width:27%; */
        width:2%;
        margin-left:0.2vw;
    }

    .arrow {
        cursor: pointer;
    }

    .text-input{
        color:#777777;
        height:fit-content;
        border:1.5px solid #777777;
    }

    .btn{
        color:white;    
        border:none;
        position:relative;
        background-color: #777777;
        box-shadow:0px 3px #3B3838;
    }

    .btn:hover{
        background-color: #505050;
        cursor: pointer;
    }

    .btn:active{
        box-shadow:none;
        top:3px;
    }

    #lines-title{
        display:flex;
        height:3.5vw;
    }

    #lines{
        display:flex;
        max-height:70vh;
    }

    #top-batsu-mobile{
        display: none;
    }

    /**************** OSM ****************/
    .leaflet-top{
        position:absolute;
        margin:0;
        margin-top:50vh;
        right:0;
    }

    .leaflet-control-zoom{
        margin:0;
        right:0;
        float:right;
        margin-right:1vw;
    }

    .leaflet-popup-content-wrapper{
        border-radius: 5px;
        padding:0;
        padding-top:20px;
    }

    .leaflet-popup-content-wrapper *{
        font-family: "Noto Sans JP", sans-serif;
    }

    .leaflet-popup-content{
        margin:0;
    }

    .custom-popup-shozai-chiban{
        padding:5px;
        background-color: #3B3838;
        color:white;
        font-weight:bold;
    }

    .custom-popup-container{
        display: flex;
        align-items: center;    /* 垂直方向の中央揃え */
        height: 100%; /* 親要素の高さに応じて調整 */
    }

    .custom-popup-coin{
        height:1em;
        margin:0 0.2em;
        position:relative;
        top:0.1em;
    }

    .custom-popup{
        float:left;
        font-weight:bold;
        font-size:2em;
        border-bottom:1.5px solid #777777;
    }

    .custom-popup-decimal{
        font-size:0.7em;
        vertical-align: text-top;
        position:relative;
        top:0.3em;
    }

    .custom-popup-unit{
        font-size:0.5em;
    }

    .custom-popup-detail{
        font-size:0.9em;
        margin:0.5em auto;
    }

    .custom-popup-detail:hover{
        cursor: pointer;
        color:white;
        background-color: #3B3838;
    }

    .leaflet-control-attribution{
        z-index:2;
    }

    /**************** main-logo-container ****************/
    #main-logo-container{
        height:fit-content;
        display:block;
        position:relative;
    }

    #main-logo-ref{
        height:fit-content;
        display: block;
        text-decoration:none;
    }

    #main-logo-image{
        max-width:60%;
        height:auto;
        padding-top:10%;
        padding-right:20%;
        padding-left:20%;
    }

    #main-logo-sub{
        color:#3B3838;
        font-size:0.5vw;
        letter-spacing:0.6vw;
        text-indent:0.6vw;
        max-width:100%;
        text-align:center;
        padding-bottom:5%;
        margin:0 0;
    }


    /**************** first-line-container title ****************/
    .title-container{
        margin-top:1%;
    }

    .line-title{
        height:100%;
        position:relative;
        display:flex;
        align-items: center;
        justify-content: center;
    }

    .line-title h1{
        font-size:1vw;
        padding-top:0.5vw;
        padding-bottom:0.5vw;
        display:none;
    }

    .line-title .arrow{
        position:absolute;
        top:40%;
        /* left:8%; */
        left:30%;
    }

    #condition-title-arrow{
        left:8%;
    }

    #condition-title-arrow{
        transform: rotate(45deg);
        width: 0.5vw;
        height: 0.5vw;
        border-top: 0.15vw solid #3B3838;
        border-left: 0.15vw solid #3B3838;
    }

    #condition-title h1{
        display:block;
    }


    /**************** second-line-container title ****************/
    #result-title-arrow{
        transform: rotate(135deg);
        cursor: pointer;
        width: 0.5vw;
        height: 0.5vw;
        border-top: 0.15vw solid #3B3838;
        border-left: 0.15vw solid #3B3838;
    }


    /**************** third-line-container title ****************/
    #result-detail-arrow{
        transform: rotate(135deg);
        cursor: pointer;
        width: 0.5vw;
        height: 0.5vw;
        border-top: 0.15vw solid #3B3838;
        border-left: 0.15vw solid #3B3838;
    }

    /**************** search-condition-container ****************/
    .subject-arrow{
        transform: rotate(-135deg);
        display:inline-block;
        width: 0.5vw;
        height: 0.5vw;
        margin-left:8%;
        margin-right:10%;
        border-top: 0.15vw solid #3B3838;
        border-left: 0.15vw solid #3B3838;
        vertical-align: -2px;
    }

    .search-condition{
        position:relative;
        height:fit-content;
        z-index:2;
    }

    .subject{
        cursor:pointer;
        padding-top:20px;
        width:100%;
        height:fit-content;
    }

    .subject h2{
        display:inline-block;
        font-size:0.8vw;
        font-weight:bold;
    }

    .search-detail{
        width:92%;
        /* margin + arrow傾き分 */
        margin-left:calc(8% + 0.25vw);
        border-left:2px solid;
    }

    .search-items{
        display:none;
        margin-left:8%;
        padding-top:10px;
        padding-bottom:15px;
    }

    .fa-circle-bylaw{
        font-size:0.4vw;
        vertical-align:top;
    }

    .range-search{
        font-size:1vw;
        display: inline-block;
        padding-right:2.1vw;
        text-align:right;
        border:none;
        border-bottom: 1.5px solid #777777;
        width:23%;
    }

    .range-search-unit{
        font-size:0.5vw;
        color:#777777;
        margin-left:-2vw;
    }

    .range-separater{
        color:#777777;
        font-size:1vw;
        vertical-align: middle;
    }

    .choice-status{
        color:#777777;
        margin:0;
        margin-top:10px;
        margin-left:2%;
        font-size:0.6vw;
    }

    .search-sub-title{
        font-weight:normal;
        font-size:0.7vw;
        color:#777777;
        margin:0;
    }

    .train-search-minutes-title{
        font-size:0.5vw;
        display:inline-block;
    }

    .text-input:focus{
        outline:1.5px solid #3B3838;
        border-bottom:1.5px solid #3B3838;
    }

    #search-condition-container{
        height:fit-content;
        margin-top:1%;
    }

    /**************** 地名 ****************/
    #search-detail-landname{
        border-color: #A9D18E;
    }

    #button-place-name{
        font-size:0.6vw;
        border:none;
        width:70%;
        height:fit-content;
        vertical-align: middle;
        padding:0.2vw 0;
        margin-left:0.5vw;
        padding-left:0.2vw;
    }

    .fa-book-open{
        text-align: center;
        width:1vw;
    }

    .fa-yen-sign{
        text-align: center;
        width:1vw;
    }

    .fa-train{
        text-align: center;
        width:1vw;
    }

    .fa-circle-check-placename{
        visibility: hidden;
        color:green;
        height:0.6vw;
        vertical-align: middle;
    }


    /**************** 価格 ****************/
    .range-title{
        color:#777777;
        font-size: 0.5vw;
        margin-right:5%;
        margin-left:2%;
        font-style: normal;
    }

    .range-up-rate{
        width:20%;
        font-size:0.8vw;
        padding-right:0.8vw
    }

    .range-up-rate-unit{
        margin-left:-0.6vw;
    }

    .content-arrow{
        transform: rotate(-135deg);
        display:inline-block;
        width: 0.2vw;
        height: 0.2vw;
        margin-left:3%;
        border-top: 0.1vw solid #777777;
        border-left: 0.1vw solid #777777;
        vertical-align: -1px;
    }

    .range-row{
        text-align:right;
        margin-right:6%;
        padding-bottom:0.8vw;
    }

    .range-row .range-up-rate{
        width:23%;
    }

    #search-detail-landprice{
        border-color: #FFC611;
    }

    #search-up-rate{
        width:80%;
        margin-left:10%;
        margin-bottom:1.5vw;
    }

    #search-up-rate-sub-container{
        display:none;
        margin-left:0.42vw;
        border-left: 0.05vw solid #777777;
    }


    /**************** 鉄道 ****************/
    .to-station-select{
        margin-left:2%;
        text-align:right;
        border:none;
        border-bottom: 1.5px solid #777777;
        width:40%;
    }

    #search-detail-train{
        border-color: #5195D3;
    }

    #button-nearest_station{
        font-size:0.6vw;
        border:none;
        width:50%;
        height:fit-content;
        vertical-align: middle;
        padding:0.2vw 0;
        margin-left:0.5vw;
        padding-left:0.2vw;
    }

    .fa-circle-check-station{
        visibility: hidden;
        color:green;
        height:0.6vw;
        vertical-align: middle;
    }

    #choice-status-station{
        color:#777777;
        text-align: right;
        margin:0;
        margin-top:2px;
        margin-right:3vw;
        font-weight: normal;
    }

    #on-foot, #by-train{
        font-size:0.5vw;
        font-style:normal;
    }

    .input-specific-station{
        font-size:0.6vw;
        width:90%;
        padding:0.2vw 0;
        margin-left:0.5vw;
        padding-left:0.2vw;
        overflow-x:hidden;
    }

    .input-specific-station-container{
        display:inline-block;
        width:50%;
    }

    /**************** 検索ボタン ****************/
    #search-execute{
        width:100%;
        text-align: center;
    }

    #search-execute-button{
        font-weight:bold;
        width:fit-content;
        margin:1vw 0;
        padding: 0.1vw 2vw;
        font-size:1vw;
    }


    /**************** search-result-container ****************/
    .fa-link{
        padding-right:3%;
    }

    .site-link-item{
        display:flex;
        align-items: center;
        justify-content: center;
        margin-top:0.8vw;
    }

    #site-icon-container{
        display:flex;
        align-items: center;
        justify-content: center;
        width:100%;
        overflow: hidden;
    }

    .site-item-arrow{
        cursor: pointer;
        display:inline-block;
        width: 0.9vw;
        height: 0.9vw;
        margin-top:1vw;
    }

    .arrow-left{
        transform: rotate(-45deg);
        float:left;
        border-top: 0.15vw solid #3B3838;
        border-left: 0.15vw solid #3B3838;
        margin-left:1vw;
    }

    .arrow-right{
        transform: rotate(45deg);
        float:right;
        border-top: 0.15vw solid #3B3838;
        border-right: 0.15vw solid #3B3838;
        margin-right:1vw;
    }

    .site-icon{
        display:inline-block;
        text-align: center;
        margin:0 2%;
    }

    .site-icon a{
        display:block;
        width:100%;
    }

    .site-img{
        width:100%;
        height:auto;
        border:0.1vw solid #777777;
    }

    .site-title{
        color: #777777;
        font-style:normal;
        text-align: center;
        font-size:0.6vw;
    }

    .result-head-unit{
        font-size:0.5vw;
    }

    .result-item-list{
        display:flex;
        align-items: center;
        width:96%;
        height:3vw;
        font-size:1.25vw;
        font-weight: bold;
        text-align: center;
        margin:0 3%;
        margin-top:0.1vw;
    }

    .result-item-list *{
        user-select: none;      /* テキスト選択を禁止 */
        outline: none;          /* クリック時のアウトラインを非表示 */
        -webkit-tap-highlight-color: transparent; /* モバイルでのタップ時ハイライト防止 */
    }

    .result-item-list:hover{
        background-color: #3B3838;
        cursor: pointer;
    }

    .result-item-list:hover *{
        color:white;
    }

    .result-item-color{
        height:90%;
        width:1%;
    }

    .result-item-landprice{
        height:80%;
        width:15%;
    }

    .result-item-lastyear{
        font-size: 0.6vw;
        margin-top: -0.3vw;
    }

    .result-item-decimal{
        font-size:0.6vw;
        vertical-align: text-top;
    }

    .result-item-marketprice{
        height:80%;
        width:15%;
    }

    .result-item-landname{
        height:60%;
        width:29%;
        vertical-align: middle;
        text-align:left;
    }

    .result-item-pref{
        font-size:0.8vw;
        vertical-align: middle;
        margin:0;
    }

    .result-item-nearest-station{
        font-size:0.6vw;
        vertical-align: middle;
        margin:0;
        width:20%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .result-item-nearest-station-minute{
        font-size:0.6vw
    }

    .result-item-address{
        font-size:0.6vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        margin:0;
    }

    .invisible-hiragana{
        visibility: hidden;
    }

    .result-item-pin{
        height:2vw;
        width:20%;
        vertical-align: center;
    }

    .result-item-img-container{
        height:2vw;
        width:1.3vw;
        margin:auto;
    }

    .result-item-pin-img{
        height:90%;
        width:90%;
        margin-top:0.1vw;
    }

    .pager-arrow{
        float:none;
        cursor: pointer;
        display:inline-block;
        vertical-align: middle;
        width: 0.5vw;
        height: 0.5vw;
        margin-top:0.1vw;
    }

    .result-pager-number, .result-pager-abbre-start, .result-pager-abbre-end{
        display:inline-block;
        list-style: none;
        vertical-align: middle;
        padding:0.1vw 0.2vw;
        margin:0 0.2vw;
        font-size:1vw;
        user-select: none;      /* テキスト選択を禁止 */
        outline: none;          /* クリック時のアウトラインを非表示 */
        -webkit-tap-highlight-color: transparent; /* モバイルでのタップ時ハイライト防止 */
    }

    .result-pager-number:hover{
        cursor: pointer;
    }

    #current-page{
        background-color: #3B3838;
        color: white;
        font-weight:bold;
    }

    #subject-site-link{
        width:100%;
        height:fit-content;
        padding-top:0;
        display: flex;
        align-items: center;
    }

    #subject-site-link .fa{
        margin-left:4%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #subject-site-link h2{
        display: flex;
        flex-direction: column; /* 上下に2行表示 */
        justify-content: center;
    }

    #pr-title{
        font-size:0.8vw;
    }

    #pr-subtitle{
        font-size:0.7vw;
    }

    #link-title-line-right{
        display:inline-block;
        float:right;
        flex-grow: 1;
        margin-top:1.2vw;
        border-bottom:2px solid #777777;
    }

    #search-result-container{
        visibility: hidden;
        opacity:0;
        height:37vw;
        margin-top:1%;
        padding-bottom:2.5vw;
        overflow: hidden;
    }


    #search-result{
        margin-top:0.4vw;
    }

    #subject-search-result{
        width:100%;
        padding-top: 1%;
        height:2vw;
        line-height:2vw;
    }

    #subject-search-result > * {
        height:fit-content;
        vertical-align: middle;
        margin-top:0.4vw;
    }

    #subject-search-result .fa{
        margin-left:4%;
        vertical-align: middle;
    }

    #result-title-line-right{
        display:inline-block;
        float:right;
        height:50%;
        width:55%;
        border-bottom:2px solid #777777;
    }

    #order-by-container{
        height:1.5vw;
    }

    #order-by-contents{
        display:inline;
        float:right;
        margin-right:3vw;
        position:relative;
        z-index:2;
    }

    #order-by-contents:hover{
        cursor: pointer;
    }

    #order-by{
        margin-left:0.1vw;
        font-size:0.7vw;
        font-weight:bold;
        box-shadow:0 1px #3B3838;
        user-select: none;      /* テキスト選択を禁止 */
        outline: none;          /* クリック時のアウトラインを非表示 */
        -webkit-tap-highlight-color: transparent; /* モバイルでのタップ時ハイライト防止 */
    }

    .fa-sort{
        display:inline;
        font-size:0.7vw;
        padding-right:0;
    }

    #order-by-choice-container *{
        z-index:2;
    }

    #order-by-choice-container{
        position:absolute;
        width:8vw;
        height:fit-content;
        background-color: white;
        border:1.5px solid #3B3838;
        left: 0;
        right: calc(2vw + 10px);
        margin:0 auto;
        box-shadow: 0 0 2px rgb(0 0 0/20%),0 -1px 0 rgb(0 0 0/2%);
    }

    #order-by-choice-list{
        margin:0;
    }

    .order-by-choice{
        list-style-type: none;
        font-size:0.6vw;
        border-bottom:1px solid #777777;
    }

    #result-head{
        display:flex;
        width:96%;
        margin:0 3%;
        margin-top: 0.3vw;
        margin-bottom:0.2vw;
        padding-bottom:0.2vw;
        border-bottom:1.5px solid #7777779d;
    }

    #result-head:hover{
        cursor: pointer;
        user-select: none;      /* テキスト選択を禁止 */
        outline: none;          /* クリック時のアウトラインを非表示 */
        -webkit-tap-highlight-color: transparent; /* モバイルでのタップ時ハイライト防止 */
    }

    #result-head h3{
        font-size:0.6vw;
        font-weight:bold;
        text-align: center;
        display: grid;
        place-items: center;
    }

    #blank-for-color{
        width:1%;
    }

    #result-head-landprice{
        width: 15%;
    }

    #result-head-marketprice{
        width:15%;
    }

    #result-head-landname{
        width:29%;
    }

    #result-head-nearest-station{
        width:20%;
    }

    #result-head-pin{
        width:20%;
    }

    #result_display_container{
        height:22vw;
    }

    #result-items{
        width:100%;
        height:100%;
        margin:0;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #result-items::-webkit-scrollbar {
        width: 0.5vw;
    }

    #result-items::-webkit-scrollbar-button {
        display: none;
    }

    #result-items::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    #result-items::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

    #result-pager-list{
        width:fit-content;
        margin:0 auto;
        margin-top:0.5vw;
        margin-bottom:1vw;
    }


    /**************** detail-container ****************/
    .detail-item-container{
        height:33.2vw;
        overflow-y: scroll;
    }

    .detail-item-container::-webkit-scrollbar {
        width: 0.5vw;
    }

    .detail-item-container::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    .detail-item-container::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

    .subject-result{
        width:100%;
        height:2vw;
        line-height:2vw;
        padding-top:0;
        margin-top:2vw;
    }

    .subject-result > *{
        height:fit-content;
        vertical-align: middle;
        margin-top:0.4vw;
    }

    .subject-result .fa{
        margin-left:8%;
    }

    .result-line-right{
        display:inline-block;
        float:right;
        height:50%;
        width:70%;
    }

    .detail-price-title{
        font-weight:bold;
        font-size:0.7vw;
        margin-left:2vw;
        margin-bottom:0.3vw;
    }

    .detail-price-container{
        display:flex;
        padding:0 1vw;
        border-bottom:1.5px solid #777777;
    }

    .detail-price-container>*{
        margin:0;
    }

    .detail-price{
        font-size:1.5vw;
        font-weight:bold;
    }

    .detail-price-decimal{
        font-size:0.7vw;
        vertical-align: top;
    }

    .detail-price-unit{
        margin-left:0.2vw;
        font-size:0.7vw;
        align-self: flex-end;
        margin-bottom:0.2vw;
    }

    #detail-container{
        visibility:hidden;
        opacity:0;
        height:38vw;
        margin-top:1%;
        overflow: hidden;
    }

    #landname-container{
        align-items: center;
        height:fit-content;
        margin-top:1vw;
        padding:0.4vw 0;
        background-color: #3B3838;
        overflow-y:scroll;
        /* スクロールバーを非表示にする設定 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Internet Explorer 10+ */
    }

    #landname-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge */
    }

    #detail-pref{
        color:white;
        font-weight:bold;
        margin:0;
        margin-left:2vw;
        font-size:1vw;
    }

    #detail-address{
        color:white;
        font-weight:bold;
        margin:0;
        margin-left:2vw;
        display:inline-block;
        font-size:0.8vw;
        vertical-align: top;
    }

    #land-usage-title{
        color:white;
        font-size:0.6vw;
        margin:0;
        margin-right:1vw;
        float:right;
    }

    #land-usage{
        font-weight:bold;
        font-size:0.8vw;
    }

    #detail-price{
        display:flex;
        align-items: center;
        margin-top:1vw;
    }

    #result-line-right-yellow{
        border-bottom:2px solid #FFC611;
    }

    #detail-price-number{
        color:#EBA20F;
    }

    #detail-uprate-number{
        color:green;
    }

    #detail-price-graph{
        margin-top:1vw;
    }

    #annual_change{
        margin-left:0.5vw;
    }

    #graph{
        width:85%;
        height:10vw;
        margin-left:2vw;
        border:2px solid #777777;
    }

    #detail-marketprice{
        margin-top:1vw;
        overflow-x: hidden;
    }

    #detail-market-price-table{
        width:100%;
        margin:0 2vw;
        overflow-x:scroll;
        white-space: nowrap;
        display:inline-block;
    }

    #detail-market-price-table::-webkit-scrollbar {
        height: 0.2vw;
    }

    #detail-market-price-table::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    #detail-market-price-table::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

    #detail-marketprice-table-title, #detail-marketprice-container {
        min-width: 40vw; /* 必要に応じて十分に大きい横幅に設定 */
    }

    #detail-marketprice-table-title{
        display: flex;
        list-style:none;
        padding:0;
        margin-top:0.2vw;
        margin-bottom:0.3vw;
        border-bottom:1.5px solid #777777;
    }

    #detail-marketprice-table-title li{
        margin-bottom:0.2vw;
        font-size:0.6vw;
        font-weight:bold;
    }

    #detail-marketprice-table-title-placename{
        width:12vw;
        text-align: center;
    }

    #detail-marketprice-table-title-price{
        width:4.5vw;
        text-align: center;
    }
    #detail-marketprice-table-title-bcr, #detail-marketprice-table-title-fsi{
        width:3vw;
        text-align: center;
    }
    #detail-marketprice-table-title-date{
        width:6vw;
        text-align: center;
    }

    #detail-marketprice-table-title-plan{
        width:15vw;
        text-align: center;
    }

    .detail-marketprice-table-placename{
        width:12vw;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .detail-marketprice-table-price{
        width:4.5vw;
        text-align: center;
    }
    .detail-marketprice-table-bcr, .detail-marketprice-table-fsi{
        width:3vw;
        text-align: center;
    }
    .detail-marketprice-table-date{
        width:6vw;
        text-align: center;
    }

    .detail-marketprice-table-plan{
        width:15vw;
        text-align: center;
    }

    #detail-marketprice-table-title li, .detail-marketprice-table li {
        flex-shrink: 0;
    }

    .detail-marketprice-table{
        display: flex;
        flex-shrink: 0;
        list-style:none;
        padding:0;
        margin:0.1vw 0;
    }

    #detail-marketprice-container{
        max-height:10vw;
        overflow-y: scroll;
        overflow-x:visible;
    }

    #detail-marketprice-container::-webkit-scrollbar {
        width: 0.5vw;
    }

    #detail-marketprice-container::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    #detail-marketprice-container::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

    .detail-marketprice-table li{
        margin-bottom:0.2vw;
        font-size:0.6vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .market-price-unit{
        font-size:0.4vw;
        display:inline;
    }

    #result-line-right-blue{
        border-bottom:2px solid #5195D3;
    }




    .detail-train-title{
        font-weight:bold;
        font-size:0.7vw;
        margin-left:2vw;
        margin-bottom:0.3vw;
    }

    #detail-train{
        margin-top:1vw;
        margin-bottom:2vw;
    }

    #detail-train-table-title{
        display: flex;
        list-style:none;
        padding:0;
        margin-top:0.2vw;
        margin-bottom:0.3vw;
        border-bottom:1.5px solid #777777;
        margin-left:2vw;
        margin-right:1vw;
    }

    #detail-train-table-title li{
        margin-bottom:0.2vw;
        font-size:0.6vw;
        font-weight:bold;
        display: grid;
        place-items: center;
    }

    #detail-train-table-title-lineimage{
        width:10%;
        text-align: center;
    }

    #detail-train-table-title-linename, #detail-train-table-title-statinname{
        width:40%;
        text-align: center;
    }

    #detail-train-table-title-onfoot{
        width:10%;
        text-align: center;
    }

    #detail-train-table-title-onfoot span{
        font-size:0.5vw;
    }

    #detail-train-container{
        max-height:10vw;
    }

    .detail-train-table{
        display: flex;
        list-style:none;
        padding:0;
        margin-bottom:0.2vw;
        place-items: center;
        margin-left:2vw;
        margin-right:1vw;
        margin-block-start:0;
        margin-block-end:0;
    }

    .detail-train-table li{
        font-size:0.6vw;
    }

    .detail-train-table-lineimage{
        display:flex;
        justify-content: center;
        width:10%;
        text-align: center;
    }

    .detail-train-table-lineimage img{
        width:50%;
        height:auto;
    }

    .detail-train-table-linename, .detail-train-table-statinname{
        width:40%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .detail-train-table-onfoot{
        width:10%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #result-line-right-blue{
        border-bottom:2px solid #5195D3;
    }


    /**************** 全体absolute表示アイテム ****************/
    .modal{
        z-index:3;
    }

    #modal-links{
        display:flex;
        position:absolute;
        top:5%;
        right:5%;
    }

    #modal-links div{
        cursor: pointer;
        width:3vw;
        height:3vw;
        border-radius:3vw;
        background-color: white;
        box-shadow: 0 0 2px rgb(0 0 0/50%),0 1px 0 rgb(0 0 0/2%);
        display:flex;
        align-items: center;
        justify-content: center;
        margin:0 1vw;
    }

    .modal-fa{
        font-size:1.5vw;
        padding:0;
    }

    #price-gauge{
        display:flex;
        align-items: center;
        justify-content: center;
        position:absolute;
        height:fit-content;
        width:fit-content;
        padding:0.5vw;
        bottom:1.5%;
        right:1%;
        background-color: white;
        box-shadow: 0 0 2px rgb(0 0 0/20%),0 -1px 0 rgb(0 0 0/2%);
    }

    #price-gauge-img{
        width:7vw;
        height:auto;
    }

    /* 凡例コンテナ（右下に固定・横並び） */
    #legendContainer {
    position: absolute;
    bottom: 1.5em;
    right: 1em;
    display: flex;
    align-items: flex-end; /* 高さを中身に合わせる */
    gap: 1em;
    z-index: 1;
    }

    /* 凡例の共通スタイル */
    .legend {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #999;
    border-radius: 0.5em;
    padding: 0.8em;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    color: #333;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    height: auto; /* 中身にフィットさせる */
    }

    /* 凡例内の色ボックス */
    .legend i {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.4em;
    vertical-align: middle;
    }

    /* 凡例タイトル */
    .legend h4 {
    margin: 0 0 0.5em;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    }

    /* 浸水凡例は表示切替用に個別クラス */
    .flood-legend {
    z-index: 101;
    }

    /**************** モーダル表示中アイテム ****************/

    .loading-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }

    .no-data-message {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ffc;
        border: 1px solid #cc9;
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 16px;
        z-index: 10000;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    #modal-overlay{
        display:none;
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 2;
    }

    .batsu {
        cursor: pointer;
        display: block;
        position: relative;
        width: 1.5vw;
        height: 1.5vw;
    }

    .batsu::before, .batsu::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 96%;
        width: 2px; /* 棒の幅（太さ） */
        height: 1vw; /* 棒の高さ */
        background: #3B3838;
    }

    .batsu::before {
        transform: translate(-50%,-50%) rotate(45deg);
    }

    .batsu::after {
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .modal-container{
        display:none;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        height:fit-content;
        width:fit-content;
        margin:auto;
        background-color: white;
        box-shadow: 0 0 2px rgb(0 0 0/20%),0 -1px 0 rgb(0 0 0/2%);
        z-index: 3;
    }

    .modal-container > *{
        width:97%;
        padding-left:3%;
    }

    .modal-title{    
        padding-top:0.8vw;
        padding-bottom:0.8vw;
        background-color: #3B3838;
        color: white;
        font-size:1.2vw;
        font-weight:bold;
        text-align: left;
    }

    .modal-text-title{
        font-size:1vw;
        font-weight:bold;
        margin-top:1vw;
        position:relative;
    }

    .right-line{
        position:absolute;
        top:50%;
        right:0%;
        width:80%;
        border-bottom: 1.5px solid#FFC611;
    }

    #land-price-right-line{
        width:85%;
    }

    #transaction-right-line{
        width:80%;
    }

    .modal-content-container{
        margin-bottom:1vw;
    }

    .modal-text{
        font-size:0.8vw;
        font-weight:bold;
        margin:1vw 0;
    }

    #modal-layer{
        width:20%;
    }

    .modal-layer-text {
        display: flex;              /* 横並びにする */
        align-items: center;        /* 縦中央揃え */
        font-size: 0.8vw;
        font-weight: bold;
        margin: 0.5vw 0;
        padding-left: 1vw;
        cursor: pointer;
    }
      
    .modal-layer-text input[type="checkbox"] {
    margin-right: 5px;
    }

    .modal-layer-text:hover{
        cursor: pointer;
        color:white;
        background-color: #3B3838;
    }

    #modal-language{
        width:30%;
    }

    #target-language-choice{
        color:white;
        background-color: #3B3838;
    }

    .modal-language-text{
        cursor: pointer;
        font-size:0.8vw;
        font-weight:bold;
        margin:0.5vw 0;
        padding-left:1vw;
    }

    #modal-contact{
        width:55%;
    }

    #modal-contact-dev{
        font-size:1vw;
        font-weight:bold;
        margin-bottom:0;
    }

    #modal-contact-profile-container{
        display:flex;
        width:80%;
        align-items: center;
        margin-bottom:2vw;
        margin-left:1vw;
    }

    #modal-contact-img{
        height:7vw;
        width:auto;
        padding:0;
        border-radius:7vw;
        border:2px solid #3B3838;
    }

    #modal-contact-profile-detail{
        margin-left:2vw;
    }

    #modal-contact-name{
        font-size:1.5vw;
        font-weight:bold;
        margin:0;
        margin-bottom:0.8vw;
        color:#3B3838;
    }

    #modal-contact-x-link{
        display:flex;
        align-items: center;
    }

    #modal-contact-x-img{
        cursor: pointer;
        height:0.8vw;
        width:auto;
        padding:0.2vw 0.4vw;
        border-radius: 10%;
        background-color: #3B3838;
    }

    #modal-contact-x-id{
        margin-left:0.3vw;
        font-size:0.8vw;
        color:#3B3838;
    }

    #modal-data{
        width:55%;
    }

    .modal-text-source{
        font-size:0.8vw;
        margin:0.5vw 0;
    }

    #modal-bylaw{
        width:55%;
        height:75%;
        overflow-y: scroll;
    }

    #modal-bylaw::-webkit-scrollbar {
        width: 0.5vw;
    }

    #modal-bylaw::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    #modal-bylaw::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

    #modal-bylaw-content-container{
        width:95%;
        margin:0;
        margin-bottom:2vw;
    }

    #bylaw-date{
        text-align: right;
        margin-right:5%;
    }

    .modal-text-bylaw{
        margin:0;
        font-size:0.8vw;
    }

    #modal-text-bylaw-note{
        font-size:0.6vw;
        margin-bottom:0.2vw;
    }

    .modal-text-tab{
        margin-left:2vw;
    }

    .modal-text-tab-text{
        margin-left:1vw;
    }

    .modal-text-bylaw::marker{
        font-size:0.5vw;
    }

    /* 地名検索モーダル */

    #modal-placename{
        width:70%;
        height:fit-content;
        max-height:80vh;
    }

    #modal-placename-content-container {
        width:100%;
        padding-left:0;
        margin:0;
        margin-bottom:2vw;
    }

    #modal-placename-search-container{
        width:fit-content;
        text-align: center;
        margin:0 auto;
        margin-top:0.3vw;
    }

    #modal-placename-search-input-container{
        display:flex;
    }

    #modal-placename-search{
        font-size:0.6vw;
        width:20vw;
        margin:0 auto;
        padding:0.2vw 0;
        padding-left:0.2vw;
        vertical-align: middle;
    }

    #modal-placename-search-button{
        width:2vw;
        margin-left:10px;
        justify-content: center;
    }

    .free-placename-search-fa{
        font-size:0.8vw;
        margin:0 3px;
        color:white;
    }

    #modal-placename-result-container{
        max-height:40vh;
        margin-top:1vw;
        overflow-y: scroll;
    }

    #modal-placename-result-container::-webkit-scrollbar {
        width: 0.5vw;
    }

    #modal-placename-result-container::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    #modal-placename-result-container::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

    .modal-placename-banner{
        vertical-align: middle;
    }

    .modal-placename-banner:hover{
        cursor: pointer;
    }

    .modal-placename-arrow{
        margin-left:2%;
        margin-right:1.5%;
        vertical-align: calc(50% - 0.5vw);
    }

    .modal-placename-banner h2{
        display:inline-block;
    }

    .modal-placename-banner-batsu {
        cursor: pointer;
        display:inline-block;
        position:relative;
        width: 1vw;
        height: 1vw;
    }

    .modal-placename-banner-batsu::before, .modal-placename-banner-batsu::after {
        content: "";
        position: absolute;
        top:30%;
        left: 98%;
        width: 2px; /* 棒の幅（太さ） */
        height: 0.5vw; /* 棒の高さ */
        background: #3B3838;
    }

    .modal-placename-banner-batsu::before {
        transform: translate(-50%,-50%) rotate(45deg);
    }

    .modal-placename-banner-batsu::after {
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .modal-placename-line, .modal-placename{
        accent-color:#3B3838;
    }

    #modal-placename-search-complete{
        font-size:1vw;
        font-weight:bold;
        display:block;
        height:fit-content;
        width:fit-content;
        margin:2vw 0;
        padding:0.3vw 0.5vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .modal-placename-container{
        display:flex;
        flex-wrap:wrap;
        padding:0.3vw 1.5vw;
        margin:0 auto;
        margin-left:calc(2% + 0.35vw - 1px);
        border-left: 2px solid #3B3838;
    }

    .modal-placename-label{
        margin-right:1vw;
    }

    .modal-placename-label:hover{
        cursor: pointer;
    }

    /* 駅名検索モーダル */

    #modal-trainline{
        width:70%;
        height:fit-content;
        max-height:80vh;
    }

    #modal-trainline-content-container {
        width:100%;
        padding-left:0;
        margin:0;
        margin-bottom:2vw;
    }

    #modal-trainline-search-container{
        width:fit-content;
        text-align: center;
        margin:0 auto;
        margin-top:0.3vw;
    }

    #modal-trainline-search{
        font-size:0.6vw;
        width:20vw;
        margin:0 auto;
        padding:0.2vw 0;
        padding-left:0.2vw;
        vertical-align: middle;
    }

    #modal-trainline-result-container{
        max-height:40vh;
        margin-top:1vw;
        overflow-y: scroll;
    }

    #modal-trainline-result-container::-webkit-scrollbar {
        width: 0.5vw;
    }

    #modal-trainline-result-container::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    #modal-trainline-result-container::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

    .modal-trainline-banner{
        vertical-align: middle;
    }

    .modal-trainline-banner:hover{
        cursor: pointer;
    }

    .modal-trainline-arrow{
        margin-left:2%;
        margin-right:1.5%;
        vertical-align: calc(50% - 0.5vw);
    }

    .modal-trainline-banner h2{
        display:inline-block;
    }

    .modal-trainline-banner-batsu {
        cursor: pointer;
        display:inline-block;
        position:relative;
        width: 1vw;
        height: 1vw;
    }

    .modal-trainline-banner-batsu::before, .modal-trainline-banner-batsu::after {
        content: "";
        position: absolute;
        top:30%;
        left: 98%;
        width: 2px; /* 棒の幅（太さ） */
        height: 0.5vw; /* 棒の高さ */
        background: #3B3838;
    }

    .modal-trainline-banner-batsu::before {
        transform: translate(-50%,-50%) rotate(45deg);
    }

    .modal-trainline-banner-batsu::after {
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .modal-trainline-line, .modal-trainline-station{
        accent-color:#3B3838;
    }

    #modal-trainline-search-complete{
        font-size:1vw;
        font-weight:bold;
        display:block;
        height:fit-content;
        width:fit-content;
        margin:2vw 0;
        padding:0.3vw 0.5vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .modal-trainline-station-container{
        display:flex;
        flex-wrap:wrap;
        padding:0.3vw 1.5vw;
        margin:0 auto;
        margin-left:calc(2% + 0.35vw - 1px);
        border-left: 2px solid #3B3838;
    }

    .modal-trainline-station-label{
        margin-right:1vw;
    }

    .modal-trainline-station-label:hover{
        cursor: pointer;
    }

    /* モバイル用 */
    #main-container-mobile{
        display:none;
    }
    #main-container-mobile *{
        display:none;
    }

    #menu-container-mobile{
        display:none;
    }
    #menu-container-mobile *{
        display:none;
    }

}