@media screen and (max-width: 767px) {
    html {
        font-family: "Noto Sans JP", sans-serif;
        overflow:hidden;
    }

    body {
        background-color:gray;
        padding:0;
        margin:0;
    }

    *{
        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:5vw;
        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%);
        z-index:2;
    }

    .first-line-container{
        display:none;
    }

    .second-line-container{
        display:none;
    }

    .third-line-container{
        display:none;
        /* 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:70dvh;
    }

    #top-batsu-mobile{
        display: none;
        position:absolute;
        top:0;
        height:5dvh;
        width:100vw;
        background-color: #3B3838;
    }

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

    .leaflet-control-zoom{
        margin:0;
        left:0;
        float:left;
        margin-left: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;
    }

    #main-container-mobile {
        width:100vw;
        height:7dvh;
        position:absolute;
        bottom:0;
        background-color: white;
        box-shadow:0 -3px 5px rgba(0, 0, 0, 0.5);
        display:flex;
    }

    .button-container {
        flex: 1; /* Divide the width equally among the 4 sections */
        display: flex;
        flex-direction: column; /* Align content vertically */
        align-items: center; /* Center content horizontally */
        justify-content: center; /* Center content vertically */
        border-right: 1px solid #ddd; /* Add right border for separation */
        text-align: center;
    }

    .button-container:last-child {
        border-right: none;
    }

    .main-container-mobile-logo {
        vertical-align: middle;
    }

    .main-container-mobile-logo .fa{
        font-size:5vw;
        color:#3B3838
    }
    
    .main-container-mobile-text {
        font-size: auto;
        font-weight: bold;
        color: #3B3838;
    }

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

    .leaflet-bottom{
        bottom:7.5dvh;
        font-size:0.5em;
    }

    #menu-container-mobile{
        position:absolute;
        top:2vw;
        right:5vw;
        width:15vw;
        height:15vw;
        background-color: white;
        border-radius: 2vw;
        box-shadow:0 3px 5px rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: column; /* Align content vertically */
        align-items: center; /* Center content horizontally */
        justify-content: center; /* Center content vertically */
        text-align: center;
    }

    #menu-container-mobile:active{
        box-shadow:none;
        top:9px;
    }

    .fa-bars{
        vertical-align: bottom;
    }

    .menu-container-mobile-text{
        display: inline-flex;
        align-items:flex-start;
        justify-content: center;
    }

    /**************** main-logo-container ****************/
    #main-logo-container {
        height: 7dvh;  /* 親要素の高さ */
        display: none;  /* フレックスボックスで配置 */
        align-items: center;  /* 垂直方向の中央揃え */
        justify-content: flex-start;  /* 水平方向の開始位置 */
        position: absolute;
        bottom: 0;
        width: 100%;  /* 幅を100%に設定 */
    }
    
    #main-logo-ref {
        display: flex;
        align-items: center;  /* 縦方向の中央揃え */
        text-decoration: none;
        height: 100%;  /* 親要素の高さに合わせる */
        box-shadow:0 -3px 5px rgba(0, 0, 0, 0.5);
    }
    
    #main-logo-image {
        width: 30%;  /* 画像の幅を30%に設定 */
        height: auto;  /* アスペクト比を保つ */
        padding-left: 4vw;  /* 左のパディング */
    }
    
    #main-logo-sub {
        display: none;  /* サブタイトルを非表示 */
    }

    /**************** 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(45deg);
        display:inline-block;
        width: 2vw;
        height: 2vw;
        margin-left:7%;
        margin-right:10%;
        border-top: 1vw solid #3B3838;
        border-left: 1vw solid #3B3838;
        vertical-align: -2px;
    }

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

    .subject{
        cursor:pointer;
        width:100%;
        height:fit-content;
    }

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

    .subject * {
        font-size:5vw;
    }

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

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

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

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

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

    .range-separater{
        color:#777777;
        font-size:4vw;
        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:3vw;
        color:#777777;
        margin:0;
    }

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

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

    #search-condition-container{
        height:81dvh;
        width:100vw;
        position:absolute;
        bottom:14dvh;
        overflow-y: scroll;
        overflow-x:hidden;
    }

    #search-condition-container::-webkit-scrollbar {
        width: 1vw;
    }

    #search-condition-container::-webkit-scrollbar-button {
        display: none;
    }

    #search-condition-container::-webkit-scrollbar-track {
        background-color: #D9D9D9;
    }

    #search-condition-container::-webkit-scrollbar-thumb {
        background-color: #3B3838;
    }

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

    #button-place-name{
        font-size:3vw;
        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: text-top;
    }


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

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

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

    .content-arrow{
        transform: rotate(-135deg);
        display:inline-block;
        width: 1vw;
        height: 1vw;
        border-top: 0.5vw solid #777777;
        border-left: 0.5vw 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:3vw;
        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:2.5vw;
        font-style:normal;
    }

    .input-specific-station{
        font-size:3vw;
        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:60%;
    }

    /**************** 検索ボタン ****************/
    #search-execute{
        width:100%;
        text-align: center;
        position:fixed;
        bottom:7dvh;
        height:7dvh;
        background-color: white;
        z-index:2;
    }

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


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

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

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

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

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

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

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

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

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

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

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

    .result-item-list{
        display:flex;
        align-items: center;
        width:96%;
        height:14vw;
        font-size:4vw;
        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{
        font-size:6vw;
        height:80%;
        width:20%;
    }

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

    .result-item-decimal{
        font-size:3vw;
        vertical-align: text-top;
        transform: translateY(-1vw);
    }

    .result-item-marketprice{
        font-size:6vw;
        display:flex;
        align-items: center;
        justify-content: center;
        height:80%;
        width:20%;
    }

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

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

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

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

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

    .invisible-hiragana{
        visibility: hidden;
    }

    .result-item-pin{
        height:auto;
        width:17.5%;
    }

    .result-item-img-container{
        height:10vw;
        width:6.5vw;
        margin:auto;
    }

    .result-item-pin-img{
        height:90%;
        width:90%;
    }

    .pager-arrow{
        float:none;
        cursor: pointer;
        display:inline-block;
        vertical-align: middle;
        width: 3vw;
        height: 3vw;
        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:1vw 2vw;
        margin:0 0.5vw;
        font-size:4vw;
        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;
        font-size:3vw;
    }

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

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

    #link-title-line-right{
        display:none;
        float:right;
        width:20%;
        margin-top:1.2vw;
        border-bottom:2px solid #777777;
    }

    #search-result-container{
        height:88dvh;
        width:100vw;
        position:absolute;
        bottom:7dvh;
        overflow-y: scroll;
        overflow-x:hidden;
    }

    #search-result-container::-webkit-scrollbar {
        width: 1vw;
    }

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

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

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


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

    #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:none;
        float:right;
        height:50%;
        width:55%;
        border-bottom:2px solid #777777;
    }

    #order-by-container{
        height:fit-content;
        display:flex;
        justify-content: flex-end;
    }

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

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

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

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

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

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

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

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

    #result-head{
        display:flex;
        width:96%;
        margin:0 3%;
        margin-top: 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:3vw;
        font-weight:bold;
        text-align: center;
        display: grid;
        place-items: center;
    }

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

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

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

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

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

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

    #result_display_container{
        height:55dvh;
    }

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

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

    #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:3vw;
    }


    /**************** detail-container ****************/
    .detail-item-container{
        height:100%;
    }

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

    .detail-price-container{
        display:flex;
        padding-left:3vw;
        margin-left:2vw;
        margin-right:3vw;
        border-bottom:1.5px solid #777777;
    }

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

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

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

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

    #detail-container{
        height:88dvh;
        width:100vw;
        position:absolute;
        bottom:7dvh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

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

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

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

    #landname-container{
        align-items: center;
        height:fit-content;
        margin-top:2.5dvh;
        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:6vw;
    }

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

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

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

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

    .subject-result{
        width:100%;
        height:fit-content;
        line-height:2vw;
        padding-top:0;
        margin-top:5vw;
        margin-left:7vw;
        display: flex; /* フレックスボックスを有効に */
        align-items: center; /* 垂直方向に中央揃え */
        justify-content: space-between; /* アイコンとテキストを左、線を右へ */
    }

    .subject-result i, 
    .subject-result h2 {
        display: inline-block; /* アイコンとh2をインラインブロックで並べる */
        margin: 0; /* 不要なマージンを削除 */
    }

    .result-line-right {
        flex-grow: 1; /* 余ったスペースを占める */
        height: 1px; /* 線の高さを指定 */
        margin-left: 10px; /* アイコンとh2からの余白を追加 */
    }

    #result-line-right-yellow{
        border-bottom:2px solid #FFC611;
        background-color: yellow; /* 線の色を黄色に */
    }

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

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

    #detail-price-graph{
        margin-top:5vw;
        margin-left:10vw;
    }

    #annual_change{
        margin-left:0.5vw;
    }

    #graph{
        width:95%;
        height:40vw;
        border:2px solid #777777;
    }

    #detail-marketprice{
        margin-top:5vw;
        margin-bottom:7vw;
        margin-left:10vw;
        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:3vw;
        margin-bottom:0.3vw;
        border-bottom:1.5px solid #777777;
    }

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

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

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

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

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

    .detail-marketprice-table-price{
        width:10vw;
        text-align: center;
    }
    .detail-marketprice-table-bcr, .detail-marketprice-table-fsi{
        width:10vw;
        text-align: center;
    }
    .detail-marketprice-table-date{
        width:25vw;
        text-align: center;
    }

    .detail-marketprice-table-plan{
        width:30vw;
        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:7dvh;
        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:2.5vw;
        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:4vw;
        margin-left:10vw;
        margin-top:5vw;
        margin-bottom:1.5vw;
    }

    #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:10vw;
        margin-right:1vw;
    }

    #detail-train-table-title li{
        margin-bottom:0.2vw;
        font-size:3vw;
        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:32.5%;
        text-align: center;
    }

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

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

    #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:10vw;
        margin-right:1vw;
        margin-block-start:0;
        margin-block-end:0;
    }

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

    .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:32.5%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .detail-train-table-onfoot{
        width:25%;
        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:none;
        flex-direction:column;
        position:absolute;
        top:25vw;
        right:5%;
    }

    #modal-links div{
        cursor: pointer;
        width:10vw;
        height:10vw;
        border-radius:50dvh;
        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-top:3vw;
    }

    .modal-fa{
        display:none;
        font-size:4vw;
        padding:0;
    }

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

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

    /* 凡例コンテナ（右下に固定・横並び） */
    #legendContainer {
    position: absolute;
    bottom: 10dvh;
    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, 0.8vw, 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(0.8rem, 0.8vw, 1rem);
    }

    /* 浸水凡例は表示切替用に個別クラス */
    .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: 2dvh;
        height: 2dvh;
    }

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

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

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

    .batsu-mobile{
        cursor: pointer;
        display: block;
        position: relative;
        top:0.5dvh;
        width: 4dvh;
        height: 4dvh;
        background: #3B3838;
        right: -85vw;
    }

    .batsu-mobile::before, .batsu-mobile::after{
        content: "";
        position: absolute;
        top: 50%;
        left: 98%;
        width: 2px; /* 棒の幅（太さ） */
        height: 4dvh; /* 棒の高さ */
        background: white;
    }

    .modal-container{
        display:none;
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        height:fit-content;
        width:100vw;
        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:6vw;
        font-weight:bold;
        text-align: left;
    }

    .modal-text-title{
        font-size:4vw;
        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:75%;
    }

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

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

    #modal-layer{
        width:100%;
    }

    .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-text{
        font-size:3vw;
        font-weight:bold;
        margin:1vw 0;
    }

    .modal-layer-text{
        cursor: pointer;
        font-size:3vw;
        font-weight:bold;
        margin:0.5vw 0;
        padding-left:1vw;
        align-items: center;
    }

    .modal-layer-text input {
        margin-right: 5px;

        /* 中央配置のための補助的スタイル（flex前提） */
        display: inline-block;
    }

    #target-language-choice{
        color:white;
        background-color: #3B3838;
        user-select: none;      /* テキスト選択を禁止 */
        outline: none;          /* クリック時のアウトラインを非表示 */
        -webkit-tap-highlight-color: transparent; /* モバイルでのタップ時ハイライト防止 */
    }

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

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

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

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

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

    #modal-contact-name{
        font-size:4vw;
        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:3.7vw;
        width:auto;
        padding:0.2vw 1vw;
        border-radius: 10%;
        background-color: #3B3838;
    }

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

    #modal-contact-note{
        font-size:2vw;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

    #modal-placename{
        width:100vw;
        height:fit-content;
        max-height:80dvh;
    }

    #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:3vw;
        width:50vw;
        margin:0 auto;
        padding:0.2vw 0;
        padding-left:0.2vw;
        vertical-align: middle;
    }

    #modal-placename-search-button{
        width:8vw;
        margin-left:10px;
        display:flex;
        justify-content: center;
        align-items: center;
    }

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

    #modal-placename-result-container{
        max-height:40dvh;
        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: 6vw;
        height: 6vw;
    }

    .modal-placename-banner-batsu::before, .modal-placename-banner-batsu::after {
        content: "";
        position: absolute;
        top:50%;
        left: 98%;
        width: 2px; /* 棒の幅（太さ） */
        height: 4vw; /* 棒の高さ */
        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:3vw;
        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:100vw;
        height:fit-content;
        max-height:80dvh;
    }

    #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:4vw;
        width:60vw;
        margin:0 auto;
        padding:0.2vw 0;
        padding-left:0.2vw;
        vertical-align: middle;
    }

    #modal-trainline-result-container{
        max-height:40dvh;
        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: 6vw;
        height: 6vw;
    }

    .modal-trainline-banner-batsu::before, .modal-trainline-banner-batsu::after {
        content: "";
        position: absolute;
        top:50%;
        left: 98%;
        width: 2px; /* 棒の幅（太さ） */
        height: 4vw; /* 棒の高さ */
        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:5vw;
        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;
    }

}