@charset "UTF-8";

.fLogo{margin-top:0!important;}



/**************************************************************
リセット
***************************************************************/
h1, h2, h3, h4, h5 {
    font-size: 1.4rem;
    margin: 0;
    padding: 0;
}
img{width: 100%;height: auto;vertical-align: bottom;}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #444;
}

a:hover {
    text-decoration: underline;
    color: #000;
}

/************************************************************
カラーピッカー
*************************************************************/
/*フォントカラー #000000 */
.clr00 {color: #000000;}
.clr01 {color: red;font-size:0.8rem}

/*ボーダーカラー*/
.bd01 {
    border-color: #0086d1;
}

.bd02 {
    border-color: #dfd6bc;
}

.bd03 {
    border-color: #92c186;
}

/*背景カラー*/
.bg00{background:white;}
.bg01 {
    background: #dfd6bc;
}
.bg02 {
    background: #92c186;
}

/************************************************************
フォントピッカー
*************************************************************/
body {
    color: #000000;
    background-color: #dfd6bc;
    font: 400 normal 1em "Noto Sans JP", serif;
}

.serif {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
}

/************************************************************
スイッチ
*************************************************************/
.pc {
    display: block !important;
}

.sp {
    display: none !important;
}

@media screen and (max-width: 640px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}

/************************************************************
メインカラム設定
*************************************************************/
#wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width:100vw;
}

header {
    width: 1200px;
    height: 100px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 2rem;
}

#contentWrapper {
    width: 100%;
}

main {
    max-width: 1000px !important;
    padding: 0;
    margin: 0 auto;
}

footer {
    position:relative;
    height: 139px;
    background: #92c186;
    margin-top: auto;
}
.footer_uma_box{ position:absolute; left:calc(50% + 500px); width:120px; }

.headerContents {

    margin: 0 auto;
    display: flex;
    flex-wrap: wrap
}
.footerContents {
    width: 1250px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap
}
footer .copyright {
    bottom:0; left:40%;
    position: absolute;
    color: white;
    font-size: 0.9rem;
    display: block;
    width: 20rem;
}
.topPageHeaderWidth {/*max-width: 100vw;*/}
.topPageHeaderWidth {
    max-width: 1300px !important;
    margin-bottom:2rem;
}
#pageContents {
    width: 1000px;
    display: flex;
    flex-wrap: wrap;
    margin: 2rem 0;
}
#pageItem {
    width: 540px;
    margin: 0 10px;
    display: flex;
    flex-wrap: wrap;
}
.sideCol {
    width: 220px !important;
    height: 530px;
}
.fabarea {width: 50%;}
.fabBox{
    width:10rem; height:100%;
    margin-left:auto; margin-right:0;
    padding:1rem 2rem 0;
    font-size:0.8rem;
    background:white;
    text-align:center;
    cursor: pointer;
}
.fabBox span { font-size:1.6rem; color:#0086d1; }
.fabBox i { font-size:1.8rem; color:#0086d1; }
#innerWrapper{ width:1010px; display: flex; flex-wrap: wrap; margin-left:auto;margin-right:auto;  }
@media screen and (max-width: 640px) {
    #wrapper{width:100vw;}
    header {
        width:100%;
        height: 60px;
        margin-bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 989;
        background-color:white;
    }
    .logoarea {padding-top:0.5rem}
    #innerWrapper{ width:100%;

        margin: 0;
        padding: 0;
    }
    main {
        max-width: 100vw !important;
        width:100%!important;
        padding: 0!important;
        margin: 0!important;
    }
    #contentWrapper {
        margin-left:0;
        margin-bottomm:2rem;
        width: 100vw;
        margin-top: 60px;
        padding-top: 0;
    }
    #pageContents {
        width: 100vw;
        display: flex;
        flex-wrap: wrap;
        margin: 2rem 0;
    }
    .headerContents,
    .footerContents {
        width: 100%;
        margin: auto;
    }
    #pageItem {
        width: 100%;
        margin: 0 10px;
        display: flex;
        flex-wrap: wrap;
    }
    .topPageHeaderWidth {
        min-width: 100vw !important;
    }
    footer .copyright {
        position: absolute;
        bottom: 0;
        right: 100px;
        color: white;
        font-size: 0.9rem;
        display: block;
        width: 20rem;
        left: 3rem;

    }
}

/************************************************************
共通パーツ
*************************************************************/

/*___いいねボタン________________________________*/
.btn-good{
    width:80%;
    height:2.4rem;
    border:2px solid #0086d9;
    color:#0086d9;
    font-weight:bold;
    padding:0.2rem;}
.btn-dtl{
    width:80%;
    height:2.4rem;
    background:#0086d1;
    color:white;
    font-weight:bold;
    padding:0.2rem;
}
.btn-dtl:hover{background: #00639d; color:white;}
.btn-good:hover{background: #fafafa; color:#0086d9;}

/*___トップページタブ_____________________________*/
.tab-area {cursor: pointer;margin-bottom:1rem;}
.tab {width: 49%;padding: 1px;text-align: center;}
.tab.active {color: #fff; display:none;}
.tab img{ width:100%; height:auto;}
.panel ,
.hdnImg{display: none;}
.panel.active,
.hdnImg.active{display: block;}

.searchGuide { width:90%; margin:auto; padding-top:2rem; margin-bottom:2rem; display:flex; justify-content: center; }
.searchGuide p{position:relative; margin-right:2%; margin-top:1rem; width:75%; border-radius:4px; padding:0.2rem; background:#e0edff;}
@media screen and (max-width: 640px) {
    .searchGuide p {
        margin-top:0;
    }
}
.searchGuide span{position:absolute; top:-2.0rem; left:-0.6rem; padding:0.5rem; background:#0086d1; color:white;}
.uma_guide{ width:20%; }
.tab.active .hdnImg{display: block;}

/*___ページャー______________________________________________*/
#pagination{ margin:1rem auto 2rem; }
ul#pager{display:flex; margin:auto; box-sizing: border-box; justify-content: center;}
ul#pager li{
    display:block;
    min-width:30px; height:30px;
    margin:0 10px 0 0;
    background:white;
    border:1px solid #0086d1; text-align:center }
ul#pager li a{
    padding:4px;
    line-height:20px;
    text-decoration:none;
    display:block;
    font-weight:bold; color:black
}
ul#pager li.selected a { background:#e0e0e0; color:#0086d1; }

/*___パンくずリスト______________________________________________*/
#breadcrumb{
    width:1000px;
    margin:0 auto;
}
/*お気に入りページ*/
.fabItem { width:100%; margin-bottom: 1rem }

@media screen and (max-width: 640px) {
    /*___パンくずリスト______________________________________________*/
    #breadcrumb {
       width: 100%;
        margin: 1rem auto;
        font-size:0.8rem;
    }
    .breadcrumb{ margin-left:0.4rem; }
/*___スマホサイト専用トップページタブ_____________________________*/
    .tab-area {
        height:140px;
        display: flex;
        cursor: pointer;
        margin-bottom:2rem;
    }
    .tab {
        width: calc(100%/3);
        padding: 1px;
        text-align: center;
        position:relative;
    }
    .tab.active {
        color: #fff;
        display:block;
    }
    .tab img{ width:100%; height:auto; position:absolute; top:0; left:0;}
    .panel ,
    .hdnImg{
        display: none;
    }
    .panel.active,
    .hdnImg.active{
        display: block;
    }
    .panel-area{margin-top:0;padding:0.2rem;}
    #searchPanel>#searchBox{padding-top:1rem}

    #searchForm{width:100%;background:white; padding-top:1rem}
    #searchForm p {text-align: left; text-indent:1rem;font-size:0.8rem;}
    #searchForm dl{
        width: 90%;
        margin:0 5%;
        display: flex; flex-wrap: wrap;
        border: solid 1px #e1e1e1;
        border-bottom:0;
        width: 100%;
    }
    #searchForm dt{width: 100%;
        vertical-align: middle;
        text-align: left;
        text-indent:1rem;
        padding-top:0.5rem;
        background: #f1f1f1;
        border-right:2px solid #e5e5e5;
        border-bottom:2px solid #e5e5e5;
    }
    #searchForm dd{width:100%;
        border-bottom:2px solid #e5e5e5;
        margin-bottom:0;
    }
    #searchForm ul{width:100%; display:flex; flex-wrap: wrap; margin-bottom:0; padding-top:0.5rem;padding-bottom:0.5rem;}
    #searchForm li{width:50%}
    #searchForm dl {width:90%; margin:0 auto;}
    #searchForm li:nth-last-child(1){border-bottom:0;}
    #searchForm .buttonArea {
        width: 100%;
        padding:1rem 0;
    }
    #searchForm .buttonArea button {
        width: 60%!important;
        margin-left:20% !important;
        margin-right:20% !important;
    }

/*___スマホサイト専用バーガーメニュー______________________________*/
        #propSearchMenu,#innerWrapper #propSearchMenu {
        width: 100%;
        z-index: 9999;
        padding: 0;
        position: fixed;
        top: 60px;
        right: -120%;
        height: 100vh;
        transition: all 0.6s;
        background-color: white;
    }
    .floorPlans{display:flex; flex-wrap: wrap; width:100%;}
    .floorPlans li{ width:50%; }
    .floorPlans li label{ display:block; }
    #propSearchMenu.panelactive {right: 0 !important;}
    #propSearchMenu.panelactive nav.bdrDiv {
        position: fixed;
        z-index: 995;
        width: 100vw;
        height: 70vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fabBox p {
        position: static;
        color: white;
        font-size: 0.6rem;
        top: 0;
        right: 0;
    }
    .burger p {
        position: fixed;
        color: white;
        font-size: 0.6rem;
        top: 41px;
        right: 15px;
    }
    .openbtn {
        width: 50px;
        height: 50px;
        position: fixed;
        z-index: 9999;
        top: 2px;
        right: 10px;
        cursor: pointer;
    }
    .viewCount{
        position:relative;
        width:100%;
        margin:auto;
    }

    .goodcount{ font-size:1.5rem; color:#0066a1; font-weight:700 }
    .fabBox {
        position:relative;
        width: 5rem;
        height: 50px;
        margin: 0 3rem 0 auto;
        z-index: 9999;
        padding: 0.3rem 2rem 0 1rem;
        font-size:0.8rem;
        background:white;
        text-align:center;
    }
    .fabBox>p>span{
        position: absolute;
        top: 1.4rem;left:2.2rem;
        color: #0086d1;
        font-size:1rem;
        font-weight: bold;
        line-height: 18px;
        text-align: center;
        background: white;border-radius: 9px;
        border:1px solid #0086d1;
        min-width: 18px;padding: 0 2px;
        box-sizing: border-box;}
    .fabBox i {
        font-size: 2rem;
        color: #0086d1;
    }
    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
        left: 14px;
        height: 3px;
        border-radius: 2px;
        background-color: #0086d1;
        width: 45%;
    }
    .openbtn span:nth-of-type(1) {
        top: 15px;
    }
    .openbtn span:nth-of-type(2) {
        top: 23px;
    }
    .openbtn span:nth-of-type(3) {
        top: 31px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    .openbtn.active span:nth-of-type(3) {
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
}

/* 画面上部のフリーワード検索ボックス */
#searchBoxForm{
    max-width: 1000px;
    margin: 0 auto;
}
#searchBox {
    width: 77%;
    margin: 0 3rem 1.5rem auto;
    display: flex;
    flex-wrap: wrap;
}
input[name="railway_name"]{line-height:2.25rem}

#searchBox .formparts {
    width: 70%;
    margin-right: 1rem;
}
#searchBox .buttonArea {width: 20%;}
@media screen and (max-width: 640px) {
    #searchBox .formparts {width: 75%;margin-right: 0.5rem;}
    #searchBox .buttonArea {width: 22%;text-align: left;}
}


.top_serach_box {
    height: 48px;
    line-height: 44px;
    padding-left: 50px;
    font-size: 0.8rem;
    font-weight: bold;
    border: 2px solid #0086d1;
    background: white url("../img/searchIcon.gif") no-repeat 10px 8px;
}

.btn-search {
    width: 100%;
    height: 3rem;
    line-height:2.25rem;
    background-color: #0086d1;
    color: white;
    font-size: 1rem;
    padding:0;
}

.btn-xs {
    width: 30%;
    height: 3rem;
    line-height:2.25rem;
    background-color: #0086d1;
    color: white;
    font-size: 1rem;
    padding:0;
}

.btn-search,
.top_serach_box {
    box-shadow: 0 3px 3px 1px rgba(0, 0, 0, 0.2);
}

.btn-search:hover {
    background-color: #0066a1;
    color: white;
}

/*広告エリア*/
.adareaL {
    width: 1000px;
    margin: 1rem auto 1rem;
    text-align: center;
}
.adsareaS {
    width: 125px;
    height: 125px;
    margin: 0.8rem auto; /* 上下マージンを追加し、左右は自動で中央に配置 */
    display: flex; /* Flexboxを使用して中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    overflow: hidden; /* 画像がはみ出る場合のため */
    box-sizing: border-box; /* ボックスサイズを含める */
}

.adsareaS img {
    width: 125px;
    height: 125px;
    object-fit: cover; /* 画像が枠内に収まるように調整 */
}

/*ヘッダー内コンテンツ*/
.logoarea {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
}

.logoBlock {
    width: 16rem;
    display: flex;
    flex-wrap: wrap;
}

.titleBlock {
    width: calc(100% - 16rem);
    font-size: 1.6rem;
    font-weight: bold;
    color: #0086d1;
}

.titleBlock span.serif {
    font-weight: bolder;
    font-size: 2rem;
}

.logoarea img {
    width: 100%;
}

/*フッター内コンテンツ*/
ul.snsIcon{
    margin: 1rem auto 0;
    display: flex;
    justify-content: end;
    width: 85%;
    color: white;
    font-size: 0.8rem;
}
ul.footerNav {
    margin: 1rem auto 0;
    display: flex;
    justify-content: end;
    width: 100%;
    color: white;
    font-size: 0.8rem;
}
ul.snsIcon li{ font-size:1.4rem;padding-left:2rem;  }
.footerContents { position:relative; }
ul.footerNav li {
    line-height: 2rem;
}
ul.footerNav li a {
    text-decoration: none;
    color: white;
}
ul.footerNav li::after {
    content: '|';
    padding-left: 1.5rem;
    margin-right: 1.5rem;
}
ul.footerNav li:nth-last-child(1)::after {
    content: '';
    padding-left: 1.5rem;
    margin-right: 1.5rem;
}
ul.snsIcon li {
    width: 60px;
}
.fNav{ margin-left:3rem }


@media screen and (max-width: 640px) {
    #searchBox {
        width: 86%; margin-left:8%; margin-right:4%; margin-top:1rem;
    }
    #footerAdArea{margin-top:2rem}
    .fabarea{ }
    .fNav{
        border-left:1px solid white;
        margin-top:5px;margin-left:1rem;
        padding-top:0;padding-left:0.5rem;
    }
    .footerContents {
        display: flex;
        flex-wrap: wrap;
    }
    .footerNav {
        margin-top: 0;
        margin-bottom: 0;
    }
    ul.footerNav {
        margin-top: 6px;
        margin-left:0.8rem;
        width: 100%;
        margin-bottom: 0;
        display: block;
        color: white;
        font-weight: normal;
        font-size: 0.8rem;
    }
    ul.footerNav li {
        line-height: 1.4rem;
    }
    ul.footerNav li::after {
        content: '';
        padding-left: 0;
        margin-right: 0;
    }
    ul.footerNav li:nth-last-child(1)::after {
        content: '';
        padding-left: 0;
        margin-right: 0;
    }
    .fLogo {
        width: 40%;
        margin-left: 0.4rem;
        margin-right: 1rem;
        position: relative;
    }
    .fLogo img {
        width: 100%;
        position: relative;
    }
    ul.snsIcon {
        display: none;
    }
    /*広告エリア*/
    .adareaL {
        width: 90%;
        margin: auto;
    }
    .adareaL img{width:100%;}
    .adsareaS {
        width: 100%;
        margin-bottom: 1.46rem;
        display: block !important;
    }
    .copyright {
        display: block;
        position: absolute;
        top: 115px;
        left: 0;
        text-align: center;
        width: 100vw;
    }
}

/************************************************************
ページ固有パーツ
*************************************************************/
/*
    トップページ
*/
h3.searchTitle{
    color:#144c6f;
    font-size:2rem;
    margin-left:1rem;
    margin-top:0.8rem;
    margin-bottom:1.5rem;
}
h3.searchTitle span{
    font-size:1.4rem;
}

.uma {
    margin-bottom: -11px;
    z-index: 100;
    position: relative;
}

.menu {
    height: auto;
    margin-top:0.5rem;
    margin-bottom: 2rem;
    z-index: -10;
}

.menu li {
    height: 61px;
    margin-bottom: 0.5rem;
}

/* トップページ日本地図 */
#mapSelector {
    height: 510px;
    border: 2px solid #0086d1;
    border-radius: 5px;
    background: white url("../img/map.png") no-repeat center;
    position: relative;
}
#mapSelector div.areaGroup {
    position: absolute;
    width: 6.5rem;
    background-color: white;
    border: 2px solid #235778;
    border-radius: 5px;
}
#mapSelector div.areaGroup ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0;
    padding-left: 10%;
    padding-bottom: 3%;
}
#mapSelector div.areaGroup li {
    min-width: 2.5rem;
    font-size: 0.8rem;
}
#mapSelector label.areaName {
    display: block;
    padding-left: 1.1rem;
    text-align: left;
    position: relative;
    font-weight: bold;
}
#mapSelector label.areaName::before {
    font-family: 'FontAwesome', serif;
    content: '\f3c5';
    position: absolute;
    left: 0.2rem;
    top: 0.25rem;
}
#mapSelector a.links {
    display: block;
}
#hokkaido {
    top: 2rem;
    left: 20rem;
    width: 5rem !important;
}
#hokkaido label.areaName::before {
    color: #2b5199;
}
#touhoku {
    top: 9rem;
    left: 26rem;
}
#touhoku label.areaName::before {
    color: #359dd1;
}
#koushin {
    top: 9.2rem;
    left: 14rem;
    width: 8.5rem !important;
}
#koushin label.areaName::before {
    color: #04a65e;
}
#kantou {
    top: 15rem;
    left: 26rem;
}
#kantou label.areaName::before {
    color: #1eaea4;
}
#tokai {
    top: 22rem;
    left: 22rem;
}
#tokai label.areaName::before {
    color: #7cbd3c;
}
#kansai {
    top: 22rem;
    left: 15rem;

}
#kansai label.areaName::before {
    color: #f1623e;
}
#chugoku {
    top: 13.2rem;
    left: 6.5rem;
}
#chugoku label.areaName::before {
    color: #f3a63a;
}
#shikoku {
    top: 24rem;
    left: 8rem;
}
#shikoku label.areaName::before {
    color: #f53f32;
}
#kyushu {
    top: 20em;
    left: 0.4rem;
}
#kyushu label.areaName::before {
    color: #f77992;
}
#okinawa {
    top: 4.3rem;
    left: 2rem;
    width: 4rem !important;
}
#okinawa label.areaName::before {
    color: #4bbfff;
}
/*検索用ページ*/
#searchForm dl {
    width: 90%;
    display: flex;
    flex-flow: column;
    margin:0 auto 2rem;
    border: solid 2px #0086d1;
    border-radius:5px;
}
#searchForm dl dt{
    line-height:2rem;
    background:#0086d1;
    text-align:center;
    color:white;
}
#searchForm dl dd{
    padding:1.5rem;
}
#searchForm ul{
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
}
#searchForm ul li{
    width:25%;
    padding:0.5rem;
    font-size:1rem;
}
#searchForm p { padding-left:1rem; }
#searchPanel{min-height:564px;background:white;border: 2px solid #0086d1;
    border-radius: 5px; position:relative;}
#searchForm .buttonArea {
    width: 100%;
    margin-bottom: 2rem;
}
#searchForm .buttonArea button {
    width: 40%;
    margin-left: 30%;
    margin-right:30%;
    height: 3rem;
    font-weight: bold;
}

.town-filter {
    display: flex;
    justify-content: flex-end;
}

.town-filter p {
    font-size: 0.6rem;
    margin-bottom: 0;
    padding-right: 115px;
    width: 145%;
}

.town-filter button {
    width: 80%;
}

.estate-search {
    display:flex;
    justify-content:center;
}

.estate-search button {
    display:flex;
    justify-content:center;
    width:20%;
    align-items:center;
}


@media screen and (max-width: 640px) {
    /*スマホ版検索用ページ*/
    .town-filter {
        display: flex;
        justify-content: center;
    }

    .town-filter p {
        display: flex;
        justify-content: center;
        font-size: 0.8rem;
        padding-right: 0px;
        width: 100%;
    }

    .town-filter button {
        margin-left: 30px;
        justify-content: center;
        width: 80%;
    }
}

@media screen and (max-width: 640px) {
/*__ スマホ版エリアセレクタ___________________*/
    #areaSelector{
        height:auto;
        background-image: none;
        position:static;
    }
    #areaSelector div.areaGroup{
        position:static;
        max-width:100%;
        background-color:white;
        border:2px solid #dadada;
        border-top:0;
        border-bottom:1px solid #dadada;
        border-radius:0;
    }
    #areaSelector div.areaGroup ul{
        display: flex;
        flex-flow: wrap;
        justify-content:space-between;
        margin-bottom: 0;
        width: 100%;
        padding: 2% 1% 0;
    }
    #areaSelector div.areaGroup li{width:32%; line-height:1.2rem; padding:0; margin-bottom:2%; font-size:0.9rem; text-align:center; border:1px solid #dadada;}
    #areaSelector label.areaName{  display: block; padding-top:0.4rem; padding-bottom:0.4rem; padding-left:2rem; text-align: left; position:relative; font-weight:bold; font-size:1.4rem; border-bottom:2px solid #dadada; background-color: #eaeaea; }
    #areaSelector label.areaName::before{
        font-family: 'FontAwesome', serif;
        content:'\f3c5';
        position:absolute;
        left:0.5rem;
    }
    #hokkaido,#tohoku,#koushin,#tokai,#chugoku,#shikoku,#okinawa{width:100% !important;}
    #areaSelector .links{display:block; width:100%; line-height:2.2rem;}
    #areaSelector .links:hover{ text-decoration: none; color:#fafafa; background-color: #ddd;  line-height:2.2rem;}


    #searchForm ul li{
        width:33%;
        padding:0.5rem;
        font-size:0.9rem;
    }
}

/*___検索条件パネル______________________________________________________________*/
.floorPlans{display:flex; flex-wrap: wrap; width:100%;}
.floorPlans li{ width:50%; }
.floorPlans li label{ display:block; }
.btn-propSearch{display:block;margin:auto;background-color:#0086d1;padding-right:2rem;color:white;font-weight:bold;position:relative;box-shadow: 0 3px 3px 1px rgba(52, 52, 52, 0.2);}
.btn-propSearch:hover{color:white;box-shadow:none;}
.btn-propSearch::after{font-family: 'FontAwesome'; content: "\f0da";position: absolute;top: 50%;right: 10px;margin-top: -12px;}
#propSearchMenu h2{ margin-bottom:20px; font-size:1.4rem; line-height:2.4rem; color:white; background-color:#515151; text-align:center; }
#propSearchMenu section{padding:0 13px; margin-bottom:1.5rem;}
.srchSelect{width:100%; display:inline-block;  font-size:0.8rem;}
.custom-select::after {border-top-color: blue;}
.front{width:60%; display:inline-block; }
.front .srchSelect{ width:70%; }
.aftr{width:40%; display:inline-block; }
.front::after{display:inline-block;content: '～';margin-left:13px;}
.srchLabel{
    width:100%;line-height:1.5rem;
    margin-bottom:1rem;
    display:block;
    border-left:4px solid #0086d1;
    font-weight:bold; text-indent:0.5rem;
    font-size:1.4rem; color:#0086d1;
}
.srchBtn{
    width:100%;
    background-color:#fafafa;
    margin-bottom:0.5rem;
    display:block;
    font-weight:bold; font-size:1rem;
    border:2px solid #c1cccf; border-radius: 8px;
    position:relative;
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 255, .1);}
.srchBtn::after{
    font-family: 'FontAwesome', serif;
    content:'\f144';
    position:absolute;
    top: 50%;
    right: 10px;
    margin-top: -12px;
    color:#397597;
}

/*お知らせ*/
#newsarea {
    max-width: 1000px;
    margin: auto auto 2rem;
    padding: 1rem 0;
    background: white;
    position: relative;
}

#newsarea ul {
    width: 90%;
    margin: 0 auto;
    font-size: 1.3rem;
}

#newsarea ul li {
    display: flex;
    flex-wrap: wrap;
    padding-right: 2rem;
    position: relative;
    margin-bottom: 1rem
}

#newsarea ul li::after {
    position: absolute;
    content: '>';
    top: 0;
    right: 0;
    font-weight: bold;
    color: #0086d1;
}

span.newsDate, span.newsTitle {
    padding-bottom: 1rem;
    display: block;
    border-bottom: 1px solid #ddd;
}

span.newsDate {width: 30%;}
span.newsTitle {
    width: 70%;
    display: block;
    border-bottom: 1px solid #ddd;
}
@media screen and (max-width: 640px) {
    span.newsDate, span.newsTitle {
        padding-bottom: 0.5rem;
        display: block;
        border-bottom:0;
        font-size:1rem;
    }
    span.newsDate {width: 30%; color:#0086d1; font-weight:bold; font-size:0.9rem;}
}


.labelTitle {
    display: block;
    width: 30%;
    margin: 2rem 0 1rem 0;
    padding: 0 1rem;
    color: #0086d1;
    background: white;
    border-left: 4px solid #0086d1;
    font: bold 1.6rem/1 "Noto Sans JP", serif;
    line-height: 2rem;
    text-indent: 0.8rem;
}
@media screen and (max-width: 640px) {
    .labelTitle{ width:60%;margin-left:0.2rem; }
    .topPage #pageItem{margin-left:0; margin-right:0;}
}
#watchmore {
    width: 200px;
    height: 4rem;
    background: white;
    margin: 1.5rem auto 3rem;
    border: 2px solid #0086d1;
    border-radius: 0;
}
#closeAnnouncement{
    width: 200px;
    height: 4rem;
    background: white;
    margin: 1.5rem auto 3rem;
    border: 2px solid #0086d1;
    border-radius: 0;
}
a.btn-more {
    height: 4rem;
    padding: 0;
    display: block;
    text-align: center;
    line-height: 3.8rem;
    font-weight: bold;
    color: #0086d1;
    font-size: 1.2rem;
}
a.btn-more:hover {
    text-decoration: none;
    color: #0066a1;
}
@media screen and (max-width: 640px) {


    /*ボタン*/
    section.btnArea {
        height: 6rem;
        margin-top: 1rem;
        margin-bottom: 2rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }


}

/*物件一覧ページ*/
main#lists{ width:calc(100% - 280px - 2rem); margin: 0 0 0 2rem;}
.bdrDiv {
    margin-bottom:2rem;
    border: 2px solid #a8b7b9;
    border-radius: 5px;
    background:white;
}
#innerWrapper #propSearchMenu {
    width: 280px;
    padding: 0;

}
#counter {
    width:100%;
    line-height: 5rem;
    margin-bottom:1.5rem;
    display: flex;
    flex-wrap: wrap;
    position:relative;
}
#counter p {
    width: 55%;
    margin-bottom:0;
    padding-left:2rem;
    font-size: 1.6rem;
    font-weight: bold;
    background: white;
}
#counter .sortArea{ width:45%;text-align:right; margin-bottom:0; position:absolute; left:55%; top:1.5rem;}
#counter select.sort{ width:45%; display:inline-block; font-size:0.8rem; }
.listItem{border:2px solid #dcdcdc; border-bottom:0; background:white; border-top-right-radius:5px; border-top-right-radius:5px;}
.listItem h3{
    line-height:2rem;
    margin-bottom:0;
    padding-left:1rem;
    display:block;
    font-size:1.2rem;font-weight:bold;
    position:relative;
    color:#203864;
}
.listItem h3.new:before,
.listItem h3.update:before,
.listItem h3.sold:before{color:red; font-size:0.6rem; position:absolute; top:-1rem; left:0;}
.listItem h3.new:before{content: '【新着】';}
.listItem h3.update:before{content:'【価格更新】';}
.listItem h3.sold:before{content:'【売約済み】';}
.itemImg {
    width: 280px; /* 固定幅 */
    display: flex;
    align-items: center; /* 垂直方向の中央配置 */
    position: relative; /* スライダーの位置調整に必要 */
}

.swiper {
    width: 100%; /* スライダーの幅を親要素に合わせる */
    height: 100%; /* スライダーの高さを親要素に合わせる */
    position: absolute; /* 親要素に対して絶対位置 */
    top: 0;
    left: 0;
}

.swiper-wrapper {
    display: flex;
    align-items: center; /* 垂直方向の中央配置 */
    height: 100%; /* スライダーの高さに合わせる */
    padding: 0; /* パディングをリセット */
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    width: 280px!important;
    height: 280px!important;
    overflow: hidden;
    position: relative;
}

.swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.itemDatas{width:calc(100% - 280px)}
.itemComment{width:100%; background-color:#f1f7fa; padding:15px 10px; display:flex;}
.itemComment span{ display:block; width:9rem; font-weight:bold;color:#0086d1}
.itemComment p{width:calc(100% - 8rem); margin-right:1rem; }
.dataArea{ display:flex; flex-wrap: wrap; }
.dataZone{min-height:205px; border-top: 2px solid #e5e5e5;border-bottom: 2px solid #e5e5e5;margin-left: 20px; flex-wrap:wrap; height:280px;}
.dataZone span{display:block; font-weight:bold;margin-bottom: 5px;}
.dataZone .itemData2 span{display:block; font-weight:normal!important;}
.dataZone.fav {
    border-top: none;
    border-bottom: none;
}
.itemData1{margin-top:1rem; margin-bottom:1rem;}
.itemData2{width:35%; margin-top:1rem; font-size:0.9rem; margin-bottom:1rem; margin-left:0.2rem;}
.linkArea{ width:100%; height:3rem; margin:0.8rem 0; display:flex; flex-wrap: wrap; text-align: center; }
.linkArea a{ display:block; padding-top:0.3rem; width:50%; height:3rem; text-decoration: none;margin-bottom: 0;}

span::before{font-family: "Font Awesome 6 Free";color:#0086d1; margin-right:0.5rem;}
span.address::before{ content: "\f3c5";}
span.access::before{ content: "\f4d7";}
span.house::before{ content: "\e50d";}
span.bldArea::before{content: "\f1ad";}
span.reformed::before{content: "\f6e3";}
span.layout::before{content: "\f279";}
span.lndArea::before{content: "\e52f";}

.companyInfo{ display:flex; flex-wrap: wrap; height:4rem; background:#0086d1; border: 2px solid #dcdcdc; border-top:0; border-bottom-right-radius:5px; border-bottom-left-radius:5px;}
.companyInfoItem{width:100%; text-align:center; line-height:2rem; font-size:0.8rem; color:#fafafa;}
.bxshdw{box-shadow: 3px 2px 15px -5px #a6a6a6; margin-bottom:2rem;}
@media screen and (max-width: 640px) {
    .companyInfo{ margin:0; }
    .bxshdw{ margin-bottom: 2rem; padding:0; box-shadow: none; }
    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;
        width: 100% !important;/* スライドの幅を親要素に合わせる */
        overflow: hidden;
        position: relative;
    }
    
    .swiper-slide img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
.swiper-button-next:after, .swiper-button-prev:after{ font-size:1.2rem!important;}
span.estTtl{font-size:0.9rem; color:#444;}
/*___アコーディオン用_________________________________________*/
.accordion {
    max-width: 300px;
    margin: 0 auto;
    position:relative;
    z-index: 1000;
}
.accordion .accordion_header {
    z-index: +1;
    cursor: pointer;
    transition-duration: 0.2s;
}

.accordion .accordion_inner {
    width: 100%;
    position:absolute;
    top:0;left:-250px;
    box-sizing: border-box;
    background:white;
    animation-name:fadeOutAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    display:none;
}
.accordion .accordion_inner h4 {
    padding:0.5rem;
    margin-bottom:1rem;

    font-size:1.2rem;
    background:#0086d1;
    color:white;
    text-align:center;
    border-top-right-radius: 8px;
}
.accordion_inner .formParts{
    width:90%;
    margin:auto;
}
.formParts input{font-size:0.8rem;}
.formParts button.btn { width:90%; margin:1rem auto; }
.cityZ{ z-index: 3000; }
.stationZ{ z-index: 1500;}
.interZ{ z-index: 1000;}
.accordion .accordion_inner.open{
    display:block;
    animation-name:fadeInAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity:0;
    left:250px;
}

@keyframes fadeInAnime{
    from {opacity: 1;}
    to {opacity: 0;}
}

@keyframes fadeInAnime{
    from {opacity: 0;}
    to {opacity: 1;}
}

@media screen and (max-width: 640px) {
    .accordion {
        max-width: 100%;
    }
    .accordion .accordion_header {
        z-index: +1;
        cursor: pointer;
        transition-duration: 0.2s;
        position:static;
    }

    .accordion .accordion_inner {
        width: 100%;
        margin-bottom:0.4rem;
        border: 1px solid #0086d1;
        position:static;
        box-shadow: none;
        box-sizing: border-box;
        background:white;
        animation-name:fadeOutAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        border-radius:8px;
        display:none;
    }
    .accordion .accordion_inner.open{
        border-radius:8px;
        display:block;
        padding-bottom:1rem;
        animation-name:fadeInAnime;
        animation-duration:1s;
        animation-fill-mode:forwards;
        opacity:0;
        left:0;
    }
    .accordion .accordion_inner h4 {
        padding:0.5rem;
        font-size:1.2rem;
        background:#0086d1;
        color:white;
        text-align:center;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
    }
    .accordion_inner .formParts{
        width:90%;
        padding-top:0.5rem;
        margin:auto;
    }
    .formParts input{font-size:0.8rem;}
    .formParts button.btn { width:90%; margin:1rem auto; }
    .cityZ{ z-index: 3000; }
    .stationZ{ z-index: 1500;}
    .interZ{ z-index: 1000;}
}


/***************************************************
    物件詳細ページ
****************************************************/
main#detail{ width:730px; margin-top:2rem; margin-right:1.25rem }
aside.infoArea{ width:250px; margin:0; padding:0; }
#titleArea{width:100%; margin-bottom:2rem; box-sizing:border-box; background: #fafafa; border-top:4px solid #0086d1; box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3); }
.detailTitle{line-height:1.9rem; font-size:1.6rem; color:#333; font-weight:bold;padding: 18px 18px; }
.detailBtnArea{width:40%; padding-left:0; display:flex;}
.btnBox{display:flex; justify-content: center; margin-bottom:1rem; }
.ttlView{padding-left:0.8rem; padding-top:0.5rem}
.goodcount{ font-size:1.5rem; font-weight:700; color:#0066a1; }
main#detail .goodbtn{
    position:relative;
    height: 2rem;
    width: 8.5rem;
    display: flex;
    font-size: 1rem;
}
.btn-fab{
    margin-left: 1rem;
    margin-top: 0.6rem;
    background: white;
    color: #0086d1;
    border: 1px solid #0086d1;
    font-size: 0.9rem;
}
.btn-fab i {color:#0086d1;}
.btn-fab:hover i{ color:white; }
#photoArea{
    width:100%;
    display:flex;
}

#gallery{width:480px; height:360px; margin:0;}
#slideNav{width:300px; margin:0;}
#slideNav h2{ margin-top:0; }
#priceArea{
    margin-bottom:0;
    padding-top:0.5rem; padding-bottom:0.5rem;
    background:white; border-top-right-radius: 5px;border-top-left-radius: 5px;
    display:flex; justify-content: space-between;
}
.pricePart {width: 60%;font-weight: bold; padding-left:0.5rem}
#property {
    margin-top: 0.5rem;
    margin-bottom:0; padding-bottom:1.5rem;
}
dl#gaiyou {
    display: flex;
    align-items: center;
    align-items:stretch;
    flex-wrap: wrap;
    border: 2px solid #eaecee;
    border-bottom: 0;
    margin-bottom: 0;
    background:white;
}
dl#gaiyou dt {
    width: 20%;
    padding: 0.5rem;
    border-bottom: 2px solid #eaecee;
    display: flex; text-align:center;
    align-items: center;
    background-color: #f4f7fa;
}
dl#gaiyou dd.wide {
    width: 80%;
    align-self: normal;
}
dl#gaiyou dd {
    width: 30%;
    border-bottom: 2px solid #eaecee;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 5px;
}
#recommend{
    background: white;
    width: 100%;
    margin-bottom:2rem;
    padding:1.5rem 5%;
    border-top: 0;
    box-sizing: border-box;
    display: flex;
}

#property h3, #infoArea h3 {
    font-size: 1rem;
    border-left: 2px solid #20648a;
    background-color: #f9f9f9;
    line-height: 2rem;
    text-indent: 1rem;
    margin-bottom: 0.5rem;
}
#sns { background: white;
    margin-bottom: 0;
    padding-bottom: 2rem;
    padding-top: 2.5rem;
    margin-top: -1.5rem;
}
.sns{ margin-bottom:2rem;
    background-color: #f9f9f9;
 }

.icon-facebook {
    color: #3b5998; /* Facebook color */
    margin-bottom: 40px;
}
.icon-instagram {
    color: #E4405F; /* Instagram color */
    margin-bottom: 40px;
}
.icon-x-twitter {
    color: #1DA1F2; /* Twitter (X) color */
    margin-bottom: 40px;
}
.icon-tiktok {
    color: #010101; /* TikTok color */
    margin-bottom: 40px;
}
.icon-threads {
    color: #000000; /* Threads color */
    margin-bottom: 40px;
}
.icon-line {
    color: #00c300; /* LINE color */
    margin-bottom: 40px;
}

#compInfoArea{ background-color: #397597; display:flex; margin-bottom:2rem; }

.photoPart{text-align:right;padding-right:0.5rem;}

.commentPart p {margin-bottom:0.2rem;word-break: break-all;position:relative; margin-left:2%; border-radius:4px; padding:0.2rem; background:#e0edff;}
.commentPart p:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -30px;
    margin-top: -1rem;
    border: 1rem solid transparent;
    border-right: 1rem solid #e0edff;
    z-index: 0;
}
@media screen and (max-width: 640px) {
    .commentPart p {
        margin-top:10px;
    }
    .commentPart p:before {
        top: -30px; /* 矢印を上に移動 */
        left: 10px; /* 矢印を中央寄りに調整 */
        margin-top: 0; /* マージントップをリセット */
        border: 1rem solid transparent;
        border-bottom: 1rem solid #e0edff;
    }
}

.commentPart h4{ border-left:2px solid #004371; color:#004371; font-size:1rem; border-bottom:2px solid #e5e5e5; line-height:1.8rem; text-indent:0.5rem; }
.embedding{width:600px; margin:1rem auto 2rem;}
.video{width:100%;}
iframe.aspect{ width:100%; aspect-ratio: 16 / 9; }
#compInfoArea .infos,
#compInfoArea .contacts{width:50%;padding: 3rem 0 3rem 4rem;}
#compInfoArea .contacts{padding-left:0;}
#compInfoArea span{ display:block; color:white;}
#compInfoArea .infos{padding-top:4rem;padding-left:1.5rem; font-size:1.2rem}
#compInfoArea .infos span{text-indent:0rem;}
span.infoName{font-weight:bold; font-size:1.6rem; text-indent: 0!important;}
span.phoneTitle{ text-align:center; width:100%; }
button.btn-seikyu,
button.btn-line{display:block;width:65%; margin-left:auto; margin-right:auto;height:3rem;border-radius:3rem;color:white;font-weight:bold; font-size:1rem;}
button.btn-seikyu{margin-bottom:1rem; height:3rem; background-color: #f49724;}
button.btn-line{ background-color:#06c755; }
.phoneN{ font-size:2.6rem; font-weight:bold; text-align:center; width:100%;}
.googleMapArea{text-align: center; width:100%;}
.googleMapArea img {width:100%;}
#contactInfo h3{background-color:#515151; border-top:4px solid #0086d1; border-top-right-radius:8px;border-top-left-radius:8px; font-weight:normal; color:white;text-align: center; font-size:1.3rem; line-height: 2.6rem; }
#contactInfo{margin-top:2rem; padding-bottom:1.5rem; background:white; border-radius: 8px;}
.contactInfoContent{padding:1rem;}
.contactInfoContent p{font-size:0.9rem; padding-left:0.3rem;text-align:center;}
.companyName{font-weight:bold;display:block;margin-bottom:0.5rem; text-align:center;}
.photoName{width:85%; display:flex; justify-content: center; flex-wrap: wrap; margin:0 auto;text-align: center}
.photoName .item{width:50%;}
.photoName .item span{display: block; }
.staffPhotos>span{display: block; text-align: center;}
.contactfor {margin-top:2rem;}
.contactfor span.phoneTitle{ margin:0 auto; font-weight:bold;text-align:center; width:65%; display:block; }
.contactfor .phoneN{ font-size:1.6rem; color:#387496; text-align:center; display:block;width:100%; }
.contactfor button.btn-seikyu,
.contactfor button.btn-line{margin:1.5rem auto;}
.contactfor button.btn-line{}
.goodbtn{ background:#397597; color:white; margin-top:0.6rem; padding:4px 8px; border-radius: 4px; font-size:0.9rem; }
.goodbtn span{background-color: white; color:#397597; padding-left:3px; padding-right:3px; border-radius: 3px;}
.goodbtn i {
    position: absolute;
    left: 6rem;
    top: 0.5rem; }
.regFav{ border:2px solid #397597; color:#397597;padding:2px 6px; border-radius: 4px; font-size:0.9rem;font-weight:bold; }
.snsIcons {
    margin: 1rem auto;
    display: flex;
    justify-content: space-between;
    max-width: 500px;
    color: #666;
    font-weight: bold;
    font-size: 2rem;
}
label.linkTitle{
    display: block;
    line-height:1.4rem;
    color:white;
    text-align: center;
    background: #0086d1;
    border-radius: 3px;
}
span.price {
    font-size: 2rem;
    color: red;
}
aside .sns{
    margin-top:2rem; margin-bottom:2rem;
    padding:0.5rem;
    background: white;
    border-radius:5px;
    position:relative;
}
aside .sns label.linkTitle{
    display: block;
    width:70%; line-height:1.4rem;
    position:absolute;
    top:-0.7rem; left:0.5rem;
    font-size:0.8rem; color:white;
    text-align: center;
    background: #0086d1;
    border-radius: 3px;
}

aside .snsIcons{font-size:1.5rem;}
aside .snsIcons li{text-align: center;margin-right: 0.8rem;margin-left: 0.8rem;}
#infoArea{ margin-bottom:2rem;}
#infoArea .neighbors{border:2px solid #e2e2e2; padding:1rem; margin-bottom:2rem; background:white;}
#infoArea .neighbors ul{display: flex; flex-wrap: wrap;}
#infoArea .neighbors ul li{width:50%;}

/*___新ギャラリー___________________________________________*/
.slider-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.main-slider-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
    max-width: 500px;
}
.main-slider {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-slider div {
    display: flex;
    justify-content: center;
    align-items: center;
}
.thumbnail-slider-wrapper .bx-wrapper {
    padding-bottom: 1rem;
}
.bx-wrapper {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    position: relative; /* 親要素を相対位置に設定 */
    text-align: center; /* 水平中央揃え */
}
.bx-wrapper img {
    width:auto;
    height: auto;    /* 高さを自動で調整し、アスペクト比を保つ */
    display: inline-block !important; /* インラインブロックにして水平中央揃え */
}
.comments-area {
    width: 500px;
    text-align: left;
    background: rgba(0, 0, 0, 0.7);
    border-right: 5px solid white;
    border-left: 5px solid white;
    border-bottom: 5px solid white;
    color: white;
    padding: 0.5rem 1rem;
}
.comments-area p {
    margin: 0;
}
.main-slider-wrapper {
    position: relative; /* スライダー内で矢印を配置するために必要 */
}

.slider-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none; /* スライダーの画像上でのクリックを防ぐため */
    z-index: 10; /* 矢印が画像の上に表示されるようにする */
}

.slider-controls .btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all; /* 矢印のクリックを有効にするため */
}

.slider-controls .btn img {
    width: 16px; /* アイコンのサイズ調整 */
    height: auto;
}

.slider-controls .btn.prev {
    left: 10px; /* 左側に配置 */
}

.slider-controls .btn.next {
    right: 10px; /* 右側に配置 */
}

.slider-controls .btn.prev::before {
    content: '<';
}

.slider-controls .btn.next::before {
    content: '>';
}
.thumbnail-slider-wrapper {
    width: 31%;
    position: relative;
    background: white;
}
.thumbnail-slider {
    display: flex;
    flex-wrap: wrap;
}
.thumbnail-slider .thumbnail-slide {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.thumbnail-slider .thumbnail-slide div {
    width: 50%; /* 2列にするために幅を50%に設定 */
    padding: 5px;
    box-sizing: border-box;
}
.thumbnail-slider img {
    width: 100px;
    height: 100px;
    cursor: pointer;
}
.thumbnail-slider .active-thumb {
    border: 2px solid #0086d1; /* 赤枠のスタイル */
}
.bx-wrapper .bx-prev, .bx-wrapper .bx-next {
    display: none; /* 標準の矢印を非表示にする */
}
.custom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding: 0 .5rem;
}
.custom-prev, .custom-next {
    background: #ddd;
    color: #333;
    padding: 5px 10px;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
}
.bx-wrapper .bx-pager {
    text-align: center;
    margin-top: 10px;
}
.comment {
    display: none; /* コメントは初期状態では非表示 */
}
@media screen and (max-width: 640px) {
    .slider-wrapper {
        display: block;
    }
    .main-slider-wrapper {
        width: 100%;
    }
    .bx-wrapper { max-width:100vw!important; }
    .main-slider {
        width: 100%;
    }
    .thumbnail-slider-wrapper {
        width: 100%;
        margin-top: 0;
        padding-top:0.5rem
    }
    .thumbnail-slider-wrapper .bx-wrapper {
        width: 100% !important;
        max-width: 100%;
    }
    .thumbnail-slide {
        width: 100vw !important;
        max-width: 100vw !important;
    }
    .thumbnail-slider .thumbnail-slide div {
        width: 25%; /* 4列にするために幅を25%に設定 */
    }
    .custom-controls {
        margin-top: 0;
        padding:0.8rem 0.5rem
    }
    .comments-area {
        width: 100%;
        text-align: left;
        background: rgba(0, 0, 0, 0.7);
        border-right: 5px solid white;
        border-left: 5px solid white;
        border-bottom: 5px solid white;
        color: white;
        padding: 0.5rem 1rem;
    }
    .comments-area p {
        margin: 0;
    }
}





/*___ギャラリー_____________________________________*/
#photoArea {
    width: 730px;
    margin-bottom:2rem;
    padding-bottom:0.5rem;
    display: flex;
    flex-wrap: wrap;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    justify-content: space-around;
    background:white;
}
.slick-dots li button:before{
    font-size: 8px!important;
    color: #0086d1!important;
}
div.arrowBtnL,
div.arrowBtnR{ position:absolute; width:62px; padding:0; border:0; bottom:0; }
div.arrowBtnL{left:0.5rem;}
div.arrowBtnR{right:0.5rem;}
#galArea{ padding:0.3rem; border:1px solid #dadada; border-radius: 4px; position:relative;}
#galArea p{width:216px; margin:auto; font-size:0.8rem}
.gallery {
    width: 480px;
}
.thumb-btn {
    width: 225px;
    height: 310px;
    display:flex;
    flex-wrap: wrap;
    padding-bottom:1rem;
    margin-bottom:0!important;
}
ul.thumb-btn li {width: 10%;}
.slick-dots {display:flex; justify-content: center; bottom:2rem!important; }
li.mainPhoto div.caption{ line-height:2.4rem; width:100%; padding-left:0.8rem; bottom:0; left:0; background:black; opacity:0.7; color:white; display:flex; align-items: baseline;}
li.mainPhoto div.caption p,
li.mainPhoto div.caption span{ display:block; margin-right:0.5rem; line-height:2.4rem; margin-bottom:0; word-break: break-all;}
li.mainPhoto div.caption span{
    min-width: 5em;
    text-align: left;
}
li.mainPhoto div.caption p{
    line-height: 1.5;
    margin-bottom: 12px;
}
li.galleryThumb{width:96%!important}
li.galleryThumb div.caption{ display:none; }
ul.lessImages{ width:240px; }
ul.lessImages:after{
    content: "";
    display: block;
    clear: both;	 }
li.imgBox{ width:49%; float:left; margin-right:2%; margin-bottom:0.3rem}
li.imgBox:nth-child(2n){ margin-right:0; }
ul.lessImages .caption{display:none;}

@media screen and (max-width: 640px) {
    /*___物件詳細ページ____________________________________________________*/

    /* ギャラリー */
    #priceArea{display:block;}
    #galArea {width:100%;border:0;padding-bottom: 1.4rem}
    .slick-prev, .slick-next { position:absolute; top:110%!important; color:#333; }
    .slick-prev{ left:25px!important; }
    .slick-next{ right:40px!important; }
    ul.lessImages{ width:96%; margin:auto; }
    li.imgBox{ width:30%; padding:0.4rem;float:left; margin-right:7%; margin-bottom:0.6rem}
    div.arrowBtnL{left:0;}
    div.arrowBtnR{right:0;}
    .thumb-btn {
        width: 100%;
        height: 360px;
        display:flex;
        flex-wrap: wrap;
        padding:1rem 0;
        margin-right:0.4rem;
    }
    .slick-prev:before, .slick-next:before { color:#333!important; font-size:2rem!important; }
    #innerWrapper #propSearchMenu {
        width: 100%;
        margin-top:0;
        padding: 0;

    }
    #counter {
        line-height:3rem;
        display:block;
        font-size:1rem;
        position: static;
        padding-top: 1rem;
        margin-bottom: 1rem;
        background-color: transparent;
    }

    #counter p {
        width:100%;
        margin-bottom:1rem;
        padding-left:1rem;
        font-size: 1.4rem;
        font-weight: bold;
    }

    #counter .sortArea {
        width: 100%;
        position: static;
        text-align: center;
        margin-bottom: 0;
    }

    #counter select.sort {
        width: 48%;
        display: inline-block;
    }

    main#lists {
        width: 100%;
        margin: 0 0 1.5rem;
        padding: 0;
        background-color: #f4f4f4
    }

    .itemDatas {
    }

    .listItem {
        min-height: 370px;
        background-color: white;
        border: 0;
        margin-bottom: 2rem;
        margin-right: 0;
        margin-left: 0;
        padding: 0;
    }
    @media screen and (max-width: 640px) {
        .listItem {
            margin-bottom:0;
        }
     }
    .listItem h3 {
        display: block;
        line-height: 2rem;
        font-size: 1.2rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        margin-bottom: 0;
        min-height:2rem;
    }

    .itemImg {
        width: 100%;
    }

    .itemImg img {
        width: 100%;
    }

    .itemDatas {
        width: 100%;
        position: relative;
    }

    .itemComment {
        width: 100%;
        background-color: transparent;
        margin: 0;
        font-size:0.8rem;
        position: static;
        display:block;
    }

    .itemComment span {
        font-weight: bold;
    }

    .itemComment p {
        display: inline;
    }

    .dataArea {
        min-height: 23rem;
        margin-bottom: 15px;
    }

    .dataZone {
        width: 100%; height: auto;
        min-height:10rem;
        margin-left: 0; margin-bottom:0;
        border-top: 2px solid #e5e5e5;border-bottom:0;
        position: relative;
    }

    .dataZone span {
        display: block;
        margin-left: 0;
    }
    .itemData1,
    .itemData2{
        width:40%; height:auto;
        margin-top:0.8rem;
        font-weight:400;
    }
    .itemData1 {width:100%;}
    .itemData1 span{padding-left:1.2rem;}
    .itemData2 {margin-left:0}
    .linkArea {
        margin: 0;
        position: relative;
        top: 0;
        width: 100%;
    }
    .linkArea a {
        width: 50%;
        height: 1.5rem;
        display: block;
        font-weight: bold;
        color: #203864;
        text-align: center;
        margin: 0;
        padding: 0;
        line-height: 1.5rem
    }

    .linkArea a.posi {
        padding-bottom: 1.8rem;
    }
    span.price {
    }
    .address,
    .access,
    .house {
        position: relative;
        line-height: 22px;
        margin-bottom: 0.5rem;
    }
/*
    .address::before,
    .access::before,
    .house::before,
    .bldArea::before,
    .layout::before,
    .reformed::before,{
        content: "";
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        background: none;
        width: 0;
        height: 0;
        font-weight:bold;
    }
*/
    .btn-good {
        width: 80%;
        border: 2px solid #203864;
        font-weight: bold;
    }
    .detailTitle{width:40%; line-height:4rem; padding-left:0.5rem; font-size:1.2rem; color:#333; }
    main#detail{ margin-top:0; }
    main#detail .goodbtn {position:relative;}
    main#detail .goodbtn  i {
        position: absolute;
        left: 6rem;
        top: 0.5rem;
    }
    .detailTitle {
        width: 40%;
        line-height: 4rem;
        padding-left: 0.5rem;
        font-size: 1.2rem;
        color: #333;
    }
    .btn-fab {
        margin-left: 1rem;
        margin-top: 0.6rem;
        background: white;
        color: #0086d1;
        border: 1px solid #0086d1;
    }
    main#detail .goodbtn {
        line-height: 1.5rem;
        width: 8rem;
        display: flex;
        font-size: 1rem;
        text-indent: 0.4rem;
    }
    .thumb-btn {
        width: 100%;
        height: auto;
        display:flex;
        flex-wrap: wrap;
        padding:1rem 0;
        margin-right:0.2rem;
        margin-left:0.3rem;
    }
    ul.thumb-btn li {
        width: 5%;
    }
    main#detailArea {
        width: 100%;
    }
    #searchPanel {
        width: 100%;
    }
    #compInfoArea {
        flex-wrap: wrap;
    }
    #titleArea {
        height:auto;
        padding-right: 0 !important;
    }
    #recommend {
        padding: 0 0 1.5rem;
        margin-top: 0;
        margin-bottom: 0;
        display:block;
    }

    #recommend .col-10 {
        width: 100%;
    }
    .snsIcons {
        margin: 1rem auto;
        padding-left:1rem;padding-right:1rem;
        display: flex;
        justify-content: space-between;
        max-width: 500px;
        color: #666;
        font-weight: bold;
        font-size: 1.7rem;
    }
    #photoArea{
        width:100%;
        display:flex; justify-content: space-between;
        border:2px solid #e2e2e2;
        background:white;
    }
    dl#gaiyou {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        border: 2px solid #eaecee;
        border-bottom: 0;
        margin-bottom: 0;
    }
    dl#gaiyou dt {
        width: 100%;
        padding: 0.5rem;
        border-bottom: 2px solid #eaecee;
        display: flex;
        align-items: center;
        background-color: #f4f7fa;
    }
    dl#gaiyou dd {
        width: 100%;
        padding: 0.5rem;
        border-bottom: 2px solid #eaecee;
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }
    dl#gaiyou dd.wide {
        width: 100%;
        align-self: normal;
        padding: 0.5rem;
    }
    .goodbtn {
        background: #397597;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .goodbtn span {
        width: 2rem;
        display: block;
        background-color: white;
        color: #397597;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 3px;
        font-size: 0.8rem;
        text-indent: 0.1rem;
    }
    .regFav {
        width: 95%;
        border: 2px solid #397597;
        color: #397597;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: bold;
    }

    .slick-slide img {
        width: 100%;
    }

    .pricePart {
        width: 100%;
    }

    .photoPart {
        width:60%;
        padding-top:1.5rem;
        margin-left:20%;
        margin-right:20%;
        text-align: center;
    }

    .commentPart {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .commentPart p {
        padding-right: .5rem;
        padding-left: .5rem;
        margin-bottom: 0;
    }

    #recommend span {
        display: block;
        margin-top: 0;
    }

    #compInfoArea {
        padding-bottom: 1rem;
    }

    #compInfoArea .infos {
        width: 100%;
        padding: 2rem 1.5rem 0;
    }

    #compInfoArea .contacts {
        width: 100%;
        padding: 0.5rem 1.5rem;
    }

    #compInfoArea .contacts .phoneTitle {
        width: 100%;
        padding: 1rem 1.5rem 0;
    }

    #compInfoArea .contacts .phoneN {
        width: 100%;
        padding: 0 1.5rem;
        font-size: 2rem;
    }

    #compInfoArea button.btn-seikyu,
    #compInfoArea button.btn-line {
        width: 80%;
        height: 3rem;
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-radius: 3rem;
        color: white;
        font-weight: bold;
        font-size: 1rem;
    }

    #compInfoArea button.btn-seikyu {
        margin-bottom: 1rem;
        height: 3rem;
        background-color: #f49724;
    }

    #compInfoArea button.btn-line {
        background-color: #06c755;
    }

    #infoArea li {
        padding: 0.4rem 0 0.4rem 0.2rem
    }

    #titleArea h2 {
        font-size: 1.5rem;
        color: #333;
        line-height: 2.5rem;
        margin-bottom: 0;
    }

    .snsIcons li {
        padding: 0.2rem 0.1rem;
        text-align: center;
        margin-right:0;
    }

    .embedding {
        width: 90vw;
        margin: 1rem auto;
    }

    .video {
        width: 100%;
    }

    .aspect {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .gallery {
        width: 100%;
        height: auto;
    }




}
dl#gaiyou dd.wide {
    width: 80%;
    align-self: normal;
}
dl#gaiyou dd {
    width: 30%;
    border-bottom: 2px solid #eaecee;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 5px;
    word-break: break-all;
}

#property h3, #infoArea h3 {
    font-size: 1rem;
    border-left: 2px solid #20648a;
    background-color: #f9f9f9;
    line-height: 2rem;
    text-indent: 1rem;
    margin-bottom: 0.5rem;
}
#sns { background: white;
    margin-bottom: 0;
    padding-bottom: 2rem;
    padding-top: 2.5rem;
    margin-top: -1.5rem;
}

#sns .sns{
    max-width:30rem;
    margin-left:auto;margin-right:auto; margin-bottom:2rem;
    padding-left: 1rem; padding-right:1rem;
    position:relative;
    border:2px solid #0086d1; border-radius:5px;
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.2);
}
#sns .sns label.linkTitle{
    width:12rem; line-height:2rem;
    position:absolute; top:-1rem; left:0.5rem;
    font-size:0.8rem; color:white; text-align:center;
    background:#0086d1; border-radius:5px;
}

#compInfoArea{ background-color: #397597; display:flex; margin-bottom:2rem; }

.photoPart{text-align:right;padding-right:0.5rem;}
.commentPart h4{ border-left:2px solid #004371; color:#004371; font-size:1rem; border-bottom:2px solid #e5e5e5; line-height:1.8rem; text-indent:0.5rem; }
.embedding{width:600px; margin:1rem auto;
    padding: 0 1rem 1rem;
}
.ytLabel{
    font-size: 1rem;
    border-left: 2px solid #20648a;
    background-color: #f9f9f9;
    line-height: 2rem;
    text-indent: 1rem;
    margin-bottom: 1rem;
}

.video{width:100%;}
iframe.aspect{ width:100%; aspect-ratio: 16 / 9; }
#compInfoArea .infos,
#compInfoArea .contacts{width:50%;padding: 3rem 0 3rem 4rem;}
#compInfoArea .contacts{padding-left:0;}
#compInfoArea span{ display:block; color:white;}
#compInfoArea .infos{padding-top:4rem;padding-left:1.5rem; font-size:1.2rem}
#compInfoArea .infos span{text-indent:0rem;}
#compInfoArea .infos a{
    word-break: break-all;
    max-width: 100%;
    overflow-wrap: break-word;
    color:white;
    font-size: large;
}
span.infoName{font-weight:bold; font-size:1.5rem; text-indent: 0!important;}
span.staffName{font-weight:bold; font-size:1.2rem; text-indent: 0!important;}
span.phoneTitle{ text-align:center; width:100%; }
button.btn-seikyu{
    display:block;
    position:relative;
    width:84%;
    margin-left:auto;
    margin-right:auto;
    height:3rem;
    border-radius:3rem;
    color:white;
    font-weight:bold;
    font-size:1rem;
    padding-left: 2.5rem; /* アイコンの幅とスペースを調整する */
    text-align: center; /* テキストを中央に配置 */
}
button.btn-line{
    display:block;
    position:relative;
    width:84%;
    margin-left:auto;
    margin-right:auto;
    height:3rem;
    border-radius:3rem;
    color:white;
    font-weight:bold;
    font-size:1rem;
    padding-left: 1.5rem; /* アイコンの幅とスペースを調整する */
    text-align: center; /* テキストを中央に配置 */
}
button.btn-seikyu:hover{ background-color: #f6b86c;}
button.btn-line:hover{ background-color: #54d087; }
button.btn-line::after {
    font-family: "Font Awesome 6 Brands";
    content: "\f3c0";
    display:block;
    position:absolute;
    top:0.4rem;left:1rem;
    width:1.5rem; height:1.5rem;
    font-size:1.5rem; font-weight:normal;

}
button.btn-seikyu::after {
    font-family: "Font Awesome 6 Free"; /* Font Awesome のフォントファミリー */
    content: "\f0e0"; /* メールアイコンの Unicode コード */
    display:block;
    position:absolute;
    top:0.4rem;left:1rem;
    width:1.5rem; height:1.5rem;
    font-size:1.5rem; font-weight:normal;

}
.btn:hover{ color:white; background-color: #0086d1;}
button.btn-seikyu{margin-bottom:1rem; height:3rem; background-color: #f49724;}
button.btn-line{ background-color:#06c755; }
.phoneN{ font-size:2.6rem; font-weight:bold; text-align:center; width:100%;}
.googleMapArea{text-align: center; width:100%;}
.googleMapArea img {width:100%;}
.photoName .item{width:50%;}
.photoName .item span{display: block; }
.staffPhotos>span{display: block; text-align: center;}
.contactfor {margin-top:2rem;}
.contactfor span.phoneTitle{ margin:0 auto; font-weight:bold;text-align:center; width:65%; display:block; }
.goodbtn{ background:#397597; color:white; margin-top:0.6rem; padding:4px 8px; border-radius: 4px; font-size:0.9rem; }
.goodbtn span{background-color: white; color:#397597; padding-left:3px; padding-right:3px; border-radius: 3px;}
.goodbtn i {
    position: absolute;
    left: 6rem;
    top: 0.5rem; }
.regFav{ border:2px solid #397597; color:#397597;padding:2px 6px; border-radius: 4px; font-size:0.9rem;font-weight:bold; }
.snsIcons {
    margin: 1rem auto;
    display: flex;
    justify-content: space-between;
    max-width: 500px;
    color: #666;
    font-weight: bold;
    font-size: 2rem;
}
span.price {
    font-size: 2rem;
    color: red;
}
aside .snsIcons{font-size:1.5rem}
aside .snsIcons li{text-align: center;margin-right: 0.2rem;margin-left: 0.2rem;}
#infoArea{ margin-bottom:2rem;}
#infoArea .neighbors{border:2px solid #e2e2e2; padding:1rem; margin-bottom:2rem; background:white;}
#infoArea .neighbors ul{display: flex; flex-wrap: wrap;}
#infoArea .neighbors ul li{width:50%;}

@media screen and (max-width: 640px) {
    .detailTitle{width:40%; line-height:4rem; padding-left:0.5rem; font-size:1.2rem; color:#333; }
    main#detail{ margin-top:0; }
    main#detail .goodbtn {position:relative;}
    main#detail .goodbtn  i {
        position: absolute;
        left: 6rem;
        top: 0.5rem;
    }
    .detailBtnArea {width: 100%;padding-left: 0; display:flex; justify-content:flex-end}

    .detailTitle {
        width: 100%;
        line-height: 4rem;
        padding-left: 0.5rem;
        padding-right:0.5rem;
        font-size: 1.2rem;
        color: #333;
    }
    .btn-fab {
        margin-left: 1rem;
        margin-top: 0.6rem;
        background: white;
        color: #0086d1;
        border: 1px solid #0086d1;
    }
    .btnBox {
        display: block;
        margin-bottom: 0.5rem;
    }
    main#detail .goodbtn {
        line-height: 1.5rem;
        width: 8rem;
        display: flex;
        font-size: 1rem;
        text-indent: 0.4rem;
    }
    .ttlView{ width:30%;  margin-bottom:0 }
    .thumb-btn {
        width: 100%;
        height: auto;
        display:flex;
        flex-wrap: wrap;
        padding:1rem 0;
        margin-right:0.2rem;
        margin-left:0.3rem;
    }
    ul.thumb-btn li {
        width: 5%;
    }
    .slick-dots {display:flex!important; justify-content: center;}
    main#detailArea {
        width: 100%;
    }
    .slick-dotted.slick-slider{margin-left:0;}
    #searchPanel {
        width: 100%;
        padding-top:0.5rem;
    }
    #compInfoArea {
        flex-wrap: wrap;
    }
    #recommend {
        padding: 0 0 1.5rem;
        margin-top: 0;
        margin-bottom: 0;
        display:block;
    }

    #recommend .col-10 {
        width: 100%;
    }
    .snsIcons {
        margin: 1rem auto;
        padding-left:1rem;padding-right:1rem;
        display: flex;
        justify-content: space-around;
        max-width: 500px;
        color: #666;
        font-weight: bold;
        font-size: 1.7rem;
    }
    #photoArea{
        width:100%;
        display:flex; justify-content: space-between;
        border:2px solid #e2e2e2;
        background:white;
    }
    dl#gaiyou {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        border: 2px solid #eaecee;
        border-bottom: 0;
        margin-bottom: 0;
    }
    dl#gaiyou dt {
        width: 100%;
        padding: 0.5rem;
        border-bottom: 2px solid #eaecee;
        display: flex;
        align-items: center;
        background-color: #f4f7fa;
    }
    dl#gaiyou dd {
        width: 100%;
        padding: 0.5rem;
        border-bottom: 2px solid #eaecee;
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }
    dl#gaiyou dd.wide {
        width: 100%;
        align-self: normal;
        padding: 0.5rem;
    }
    .goodbtn {
        background: #397597;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8rem;
    }
    .goodbtn span {
        width: 2rem;
        display: block;
        background-color: white;
        color: #397597;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 3px;
        font-size: 0.8rem;
        text-indent: 0.1rem;
    }
    .regFav {
        width: 95%;
        border: 2px solid #397597;
        color: #397597;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.8rem;
        font-weight: bold;
    }

    .slick-slide img {
        width: 100%;
    }

    .pricePart {
        width: 100%;
    }

    #sns .sns {
        width:95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
        position: relative;
        border: 2px solid #0086d1;
        border-radius: 5px;
        box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.2);
    }

    .photoPart {
        width:60%;
        padding-top:1.5rem;
        margin-left:20%;
        margin-right:20%;
        text-align: center;
    }

    .commentPart {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }

    .commentPart p {
        padding-right: .5rem;
        padding-left: .5rem;
        margin-bottom: 0;
    }

    #recommend span {
        display: block;
        margin-top: 0;
    }

    #compInfoArea {
        padding-bottom: 1rem;
    }

    #compInfoArea .infos {
        width: 100%;
        padding: 2rem 1.5rem 0;
    }

    #compInfoArea .contacts {
        width: 100%;
        padding: 0.5rem 1.5rem;
    }

    #compInfoArea .contacts .phoneTitle {
        width: 100%;
        padding: 1rem 1.5rem 0;
    }

    #compInfoArea .contacts .phoneN {
        width: 100%;
        padding: 0 1.5rem;
        font-size: 1.4rem;
    }

    #compInfoArea button.btn-seikyu,
    #compInfoArea button.btn-line,
    #compInfoArea button.btn-phone {
        width: 80%;
        height: 3rem;
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-radius: 3rem;
        color: white;
        font-weight: bold;
        font-size: 1rem;
    }
    #compInfoArea button.btn-phone {
        background-color: #e8a36e;
        margin-bottom:1rem;
    }

    #compInfoArea button.btn-seikyu {
        margin-bottom: 1rem;
        height: 3rem;
        background-color: #f49724;
    }

    #compInfoArea button.btn-line {
        background-color: #06c755;
    }

    #infoArea li {
        padding: 0.4rem 0 0.4rem 0.2rem
    }
    .snsIcons li {
        padding: 0.2rem 0.1rem;
        text-align: center;
        margin-right:0;
    }

    .embedding {
        width: 90vw;
        margin: 1rem auto;
        padding:0.5rem;
    }

    .video {
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .video iframe{width:100%; height:100%;}
    .aspect {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .gallery {
        width: 100%;
        height: auto;
    }
}

/***************************************************
    エリア・沿線・IC 検索
****************************************************/
#searches {background:white; border:2px solid #a7ceee; position:relative; border-radius:5px; width:calc(100% - 440px - 2rem); margin-left:auto;margin-right:auto;margin-bottom:2rem;}
#searches.myfab { background:none;border:0; }
ul.srchMtrx{ width:100%; margin:0; padding:0; display:flex; flex-wrap:wrap; }
ul.srchMtrx li{ width: 33%;
    text-align: left;
    padding: 0.4rem;
    font-size: 0.8rem; }
#searches .btn_area{ width:60%; margin-left:auto; margin-right:auto; position:absolute; bottom:2rem;left:7.8rem; }
#searches dl.searchPages{width: 90%;
    display: flex;
    flex-flow: column;
    margin: 0 auto 6.4rem;
    border: solid 2px #0086d1;
    border-radius: 5px;}
#searches dl.searchPages.area{width: 90%;
    margin: 0 auto 0.4rem!important;
}
#searches dl.searchPages dt{
    line-height: 2rem;
    background: #0086d1;
    text-align: center;
    color: white;
}
#searches dl.searchPages dd{ padding: 1.5rem;}
#searches dl.searchPages #searchBox {
    width: 77%;
    margin: 1.5rem auto 1.5rem auto;
    display: flex;
    flex-wrap: wrap;
}
#searches #searchBox .buttonArea{
    width:20%;
}
.searchForm p {
    padding-left: 1rem;
}
.searchForm{margin-bottom:7rem;}
.btnW70{ width:70%; margin:2rem auto; position:absolute; bottom:0; left:15%; }
@media screen and (max-width: 640px){
    ul.srchMtrx li{width:33%;}

}
/***************************************************
    お気に入りページ
****************************************************/
.favorite-box {
    display: flex;
}

.favorite-sideCol {
    margin: auto 5px;
}

.favorite-bxshdw{
    width: 100%;
    margin-bottom:2rem;
}
@media screen and (max-width: 640px) {
    .favorite-bxshdw{
        width: 100%;
    }
}
main#favorite{
    width: 100%;
}

/***************************************************
    問い合わせ/固定ページ
****************************************************/
main#pages{ 
    width:calc(100% - 220px - 220px);
    background:white;
    border: 2px solid #0086d1;
    border-radius: 5px;
 }
main#pages section{
    width:90%;
    margin:30px;
 }

 main#pages section p{
    margin-top:30px;
 }

 main#pages section p.announcement {
    overflow-wrap: break-word;
    max-width: 100%;
}
/***************************************************
    トップへ戻る
****************************************************/
/*リンク見た目*/
#page-top a{
    display: flex;
    justify-content:center;
    align-items:center;
    background:#0086d1;
    border-radius: 5px;
    width: 60px;
    height: 60px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size:0.7rem;
    font-weight:bold;
    transition:all 0.3s;
}

#page-top a:hover{background: #777;}

/*右下に固定*/
#page-top {position: fixed;right: 50px;z-index: 2;opacity: 0;transform: translateY(100px);}
@media screen and (max-width:640px) {#page-top {right: 20px;}}
/*　動き上　*/
#page-top.UpMove{animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{
    from {opacity: 0;transform: translateY(100px);}
    to {opacity: 1;transform: translateY(0);}
}
/*　動き下　*/
#page-top.DownMove{animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{
    from {opacity: 1;transform: translateY(0);}
    to {opacity: 1;transform: translateY(100px);}
}

/* 240610 */
#syosai,
#reform,
#setsubi,
#event,
#biko {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    border: 2px solid #eaecee;
    border-bottom: 0;
    margin-bottom: 20px;
    background: white;
}
dl#gaiyou{
    margin-bottom: 20px;
}
dl#gaiyou dt,
#syosai dt,
#reform dt,
#setsubi dt,
#event dt,
#biko dt{
    width: 20%;
    padding: 15px 5px;
    border-bottom: 2px solid #eaecee;
    background-color: #f4f7fa;
    display: grid;
    place-items: center;
    font-size: 14px;
}
dl#gaiyou dd,
#syosai dd,
#reform dd,
#setsubi dd,
#event dd,
#biko dd{
    width: 30%;
    border-bottom: 2px solid #eaecee;
    margin-bottom: 0;
    word-break: break-all;
    padding: 15px;
    letter-spacing: .05em;
    line-height: 1.8;
    font-size: 14px;
    display: grid;
    place-items: center start;
}
dl#gaiyou dd.wide,
#syosai dd.wide,
#reform dd.wide,
#setsubi dd.wide,
#event dd.wide,
#biko dd.wide {
    width: 80%;
    align-self: normal;
}
#property h3, #infoArea h3{
    margin-bottom:0;
    line-height: inherit;
    padding: 14px 17px;
    font-size: 20px;
    text-indent: inherit;
}
aside .snsIcons{
    width: 185px;
}
aside .sns label.linkTitle{
    left: 50%;
    margin-left: -87px;
}