/* 
* 新築詳細画面 css
----------------------------------------------- */
#loanSimulation form {
    display: flex;
    flex-flow: row wrap;
}

#loanSimulation .row {
    display: flex;
    flex-flow: row wrap;
    border: 1px solid #aaaaaa;
    margin-bottom: 10px !important;
    padding: 10px;
}
/* ヘッダー画像表示部分 */
.page-guide.detail-guide .base-wid {
    width: 100%;
    margin: 0 auto;
}
/* ヘッダー画像プレビューの設定 */
.page-guide.detail-guide .base-wid .main-img {
    width: 65%;
    display: inline-block;
    margin-left: 15%;
}
/* ヘッダー画像横のサムネイル画像の領域の設定 */
.page-guide.detail-guide .base-wid .sub-img-area {
    width: 10%;
    display: inline-block;
    margin-left: 2%;
    vertical-align: top;
}
/* サムネイル画像部分の大きさ設定 */
.page-guide.detail-guide .base-wid .sub-img {
    margin-top: 10px;
    width: 65%;
    max-height: 480px;
}
/* サムネイル画像枠線 */
.page-guide.detail-guide .base-wid .sub-img .item {
    border: 1px solid black;
}
/* サムネイル画像ホバーしたときの設定 */
.page-guide.detail-guide .base-wid .sub-img .item:hover {
    scale: 1.1;
    transition: 1s;
}
/* ヘッダー画像下の詳細情報の設定 */
.page-guide.detail-guide .base-wid .main-detail {
    width: 65%;
    margin-left: 15%;
}
.page-guide.detail-guide .base-wid .main-detail h2 {
    font-size: 20px;
}

/* モデルハウス詳細情報 */

/** 諸元項目 */
.mainArea > .detail-guide > .detail-grid > .specification-contents,
.mainArea > .detail-guide > .detail-grid > .header-info-transition {
    width: 65%;
    margin-left: 15%;
}
.mainArea > .detail-guide > .detail-grid > .specification-contents .main {
    width: 100%;
}
.mainArea > .detail-guide > .detail-grid > .specification-contents .main > div:first-child {
    margin: 0;
    width: calc(50% - var(--m));
}
.mainArea > .detail-guide > .detail-grid > .specification-contents .main > div:last-child {
    margin: 0 0 0 auto;
    width: calc(50% - var(--m));
}

/** お気に入り登録ボタン */
.mainArea > .detail-guide > .detail-grid > .specification-contents .fav-content-block {
    margin-top: 30px;
}
/* ココプレ検索結果用カード */
/* 結果の領域の設定 */
.kokopre-search-center {
    margin: auto;
}
.kokopre-fontw {
    color: white;
}
/* カードの大きさを設定 */
.kokopre-card-scale {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    zoom: 0.582;
    margin: 0 2px 0 0;
}
.kokopre-card-scale:hover {
    z-index: 1;
}
.card-tochi-list__item {
    background-color: #ffffff;
}
.kokopre-card {
    transition: 0.5s;
}
.kokopre-card:hover {
    scale: 2;
    border: 1px solid #6bcff6;
}
/* ココプレできる土地の背景設定 */
.tochi-kokopre {
    background-color: #004890;
    padding-top: 10px;
    padding-bottom: 10px;
}
/* ボタンの設定 */
.model-btn-base {
    width: 55%;
    margin: auto;
    font-size: 20px;
}
.funds .btn,
.property .btn {
    width: 100%;
    padding: 5px 0 5px 0;
    display: block;
    position: relative;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    line-height: 2;
    transition-timing-function: linear;
    transition-duration: 0.2s;
    transition-property: background-color, color, opacity;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.btn.btn_green {
    background-color: #087f83;
    color: #fff;
}
.btn.btn_orange {
    background-color: #f15929;
    color: #fff;
}
/*Firefox用*/
@-moz-document url-prefix() {
    .kokopure-card-item > .card-prop-list {
        width: 100%;
    }
    .kokopre-card-scale {
        --scale: 0.552;
        transform-origin: 50% 50%;
        transform: scale(0.552);
        margin: calc(var(--list-guide-post-list__item-width) / 2.5 * -1)
            calc(
                (
                        var(--list-guide-post-list__item-width) -
                            (var(--list-guide-post-list__item-width) * var(--scale))
                    ) * -1 / 2
            );
    }
}
/** スマホサイズ */
@media (max-width: 736px) {
    /** 全体 */
    html,
    body,
    .pageContent.wrapperContent {
        min-width: 0 !important;
    }
    /** 横幅 */
    .mainArea > .detail-guide > .detail-header-contents,
    .mainArea > .detail-guide > .detail-grid > .detail-body-contents,
    .page-guide.detail-guide .base-wid .main-detail {
        width: 90%;
    }

    /** メイン画像 */
    .header-view-area > .header-view-img {
        height: 265.8px;
    }
    .header-view-area > .header-view-img > .img-layer-area > .layer-img > img {
        height: 100% !important;
        width: auto !important;
    }
    .header-view-modal_content {
        max-width: 350px;
        min-width: 350px;
        top: 20%;
        left: calc(50% - 175px);
    }
    .header-view-title-item[data="kouzu"] {
        font-size: 8px;
    }
    .header-view-img .header-view-bottom-info .header-view-bottom-v-all p {
        font-size: 8px;
    }

    #pictureslider .slick-prev:before,
    #kouzuslider .slick-prev:before,
    #pictureslider .slick-next:before,
    #kouzuslider .slick-next:before {
        left: 10%;
    }

    /** 画面上部 物件情報 */
    .page-guide.detail-guide .base-wid .main-detail {
        margin: auto;
    }
    .header-info-area > .header-info-panel {
        display: block;
    }
    .header-info-area .header-info-contents {
        display: block !important;
    }
    .header-info-area > .header-info-contents > div:first-child,
    .header-info-area > .header-info-contents > div:last-child {
        width: 100%;
    }

    /** 商談中 */
    .syodan-note {
        left: 0;
    }

    /** ココプレリスト */
    .kokopure-card-list > .kokopure-card-item {
        height: auto;
    }
    .kokopure-card-item > .card-prop-list > .card-prop-list__item {
        width: 50%;
        margin: 0 0 2% 0;
    }

    /** 諸元 */
    #Specifications > .item-table > .main {
        display: block;
    }
    #Specifications > .item-table > .main > div:first-child,
    #Specifications > .item-table > .main > div:last-child {
        width: 100%;
    }
    #Specifications .table-itme {
        display: none;
    }

    /** この物件は、私達が取り扱いしています */
    .shop-detail .shop-block {
        display: block;
    }
    .shop-detail .shop-block .detailArea {
        width: 100% !important;
        padding-left: 0 !important;
    }
    .shop-detail .shop-block .detailArea th {
        min-width: 50px;
    }

    /** 色々知りたいQ&A */
    .q-a-block .q-a-item {
        width: 48%;
        margin: 0 1% 2% 1%;
    }
    .q-a-block .q-a-item:nth-child(3n) {
        margin: 0 1% 2% 1%;
    }

    /** プロから素敵な提案 */
    .proposal-area {
        width: 100%;
        padding: 0;
    }
    .proposal-main-img {
        padding: 15px 0;
    }
    .proposal-thumbnail-img,
    .proposal-estate-item {
        display: none;
    }
    .proposal-sub-block .proposal-sub-item {
        width: 48%;
        margin: 0 1%;
    }

    /** ボタン */
    .btn-base {
        width: 70%;
    }
    .funds .btn,
    .sheet .btn,
    .property .btn {
        font-size: 14px;
    }
    .page-guide .btn-base {
        padding-bottom: 10px;
    }
    .detail-grid .fav-content-block .btn-block {
        width: 80%;
    }

    /** プロから素敵なダイアログ */
    .proposal-modal_content {
        max-width: 350px;
        min-width: 350px;
    }
    .proposal-modal .title-area .proposal_ttl div a {
        bottom: 6px;
    }
    .proposal-dialog-block .proposal-dialog-item {
        width: 100%;
        margin-left: 0;
    }
    .proposal-dialog-item .detail-text {
        width: 100%;
    }
    .proposal-dialog-block .proposal-dialog-item > ul {
        display: none;
    }
    .proposal-dialog-block .proposal-dialog-img > ul {
        display: block;
    }

    /** ココプレダイアログ */
    .kokopre-info-modal_content {
        height: auto;
        min-height: 0;
        min-width: 350px;
        max-width: 350px;
        left: calc(50% - 175px);
        margin-left: 0;
    }

    /** クロスメーターダイアログ */
    .yestate-modal_content {
        min-width: 350px;
        max-width: 350px;
        height: calc(90vh - 85px);
    }
    .cross-meter-content {
        zoom: 40% !important;
    }
    /** フッター TODO 2024/07/18 後々共有CSSに移動予定 */
    footer .footer-block .footer-nav {
        flex-flow: column;
    }
    footer .horizontal-line {
        display: none;
    }
    .footer .footer-wrap {
        padding: 8% 0;
    }
    .footer .footer-wrap .inner {
        display: block;
    }
    .footer .footer-logo {
        width: 100%;
        margin-bottom: 3%;
    }
    .footer .footer-logo h5 {
        font-size: 14px;
    }
    .footer .footer-nav {
        width: 100%;
        padding-left: 0;
        flex-flow: column;
    }
    .footer .footer-nav .nav-items {
        margin-right: 0;
    }
    .footer .footer-nav .nav-items a {
        position: relative;
        font-size: 3.6vw;
        padding-right: 0;
        margin-bottom: 0;
        border-right: none;
        line-height: 3;
    }
    .footer .footer-bottom {
        padding: 3% 0;
    }
    .footer .footer-bottom .inner {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .footer .footer-bottom .copy {
        font-size: 3.4vw;
    }
    .footer .footer-bottom ul {
        margin-left: 0;
    }
    .footer .footer-bottom ul li a {
        color: #ffffff;
        font-size: 3.4vw;
    }
    footer .flex-flow {
        flex-flow: column;
    }
    footer .vertical-line {
        display: none;
    }
    footer .left,
    footer .center,
    footer .right {
        width: 100% !important;
    }
}
/** タブレットサイズ */
@media (min-width: 736px) and (max-width: 1024px) {
    /** 全体 */
    html,
    body,
    .pageContent.wrapperContent {
        min-width: 0 !important;
    }
    /** 横幅 */
    .mainArea > .detail-guide > .detail-header-contents,
    .mainArea > .detail-guide > .detail-grid > .detail-body-contents,
    .page-guide.detail-guide .base-wid .main-detail {
        width: 90%;
    }

    /** メイン画像 */
    .header-view-area > .header-view-img {
        height: 531.6px;
    }
    .header-view-area > .header-view-img > .img-layer-area > .layer-img > img {
        height: 100% !important;
        width: auto !important;
    }
    .header-view-modal_content {
        max-width: unset;
        min-width: unset;
        width: calc(100% - 100px);
        top: 20%;
        left: 50px;
    }
    .header-view-title-item[data="kouzu"] {
        font-size: 8px;
    }
    .header-view-img .header-view-bottom-info .header-view-bottom-v-all p {
        font-size: 8px;
    }

    #pictureslider .slick-prev:before,
    #kouzuslider .slick-prev:before,
    #pictureslider .slick-next:before,
    #kouzuslider .slick-next:before {
        left: 10%;
    }

    /** 画面上部 物件情報 */
    .page-guide.detail-guide .base-wid .main-detail {
        margin: auto;
    }
    .header-info-area > .header-info-panel {
        display: block;
    }
    .header-info-area .header-info-contents {
        display: block !important;
    }
    .header-info-area > .header-info-contents > div:first-child,
    .header-info-area > .header-info-contents > div:last-child {
        width: 100%;
    }

    /** 商談中 */
    .syodan-note {
        left: 0;
    }

    /** ココプレリスト */
    .kokopure-card-list > .kokopure-card-item {
        height: auto;
    }
    .kokopure-card-item > .card-prop-list > .card-prop-list__item {
        width: 50%;
        margin: 0 0 2% 0;
    }

    /** 諸元 */
    #Specifications > .item-table > .main {
        display: block;
    }
    #Specifications > .item-table > .main > div:first-child,
    #Specifications > .item-table > .main > div:last-child {
        width: 100%;
    }
    #Specifications .table-itme {
        display: none;
    }

    /** この物件は、私達が取り扱いしています */
    .shop-detail .shop-block {
        display: block;
    }
    .shop-detail .shop-block .detailArea {
        width: 100% !important;
        padding-left: 0 !important;
    }
    .shop-detail .shop-block .detailArea th {
        min-width: 50px;
    }

    /** 色々知りたいQ&A */
    .q-a-block .q-a-item {
        width: 48%;
        margin: 0 1% 2% 1%;
    }
    .q-a-block .q-a-item:nth-child(3n) {
        margin: 0 1% 2% 1%;
    }

    /** プロから素敵な提案 */
    .proposal-area {
        width: 100%;
        padding: 0;
    }
    .proposal-main-img {
        padding: 15px 0;
    }
    .proposal-thumbnail-img,
    .proposal-estate-item {
        display: none;
    }
    .proposal-sub-block .proposal-sub-item {
        width: 48%;
        margin: 0 1%;
    }

    /** ボタン */
    .btn-base {
        width: 70%;
    }
    .funds .btn,
    .sheet .btn,
    .property .btn {
        font-size: 14px;
    }
    .page-guide .btn-base {
        padding-bottom: 10px;
    }
    .detail-grid .fav-content-block .btn-block {
        width: 80%;
    }

    /** プロから素敵なダイアログ */
    .proposal-modal_content {
        max-width: 350px;
        min-width: 350px;
    }
    .proposal-modal .title-area .proposal_ttl div a {
        bottom: 6px;
    }
    .proposal-dialog-block .proposal-dialog-item {
        width: 100%;
        margin-left: 0;
    }
    .proposal-dialog-item .detail-text {
        width: 100%;
    }
    .proposal-dialog-block .proposal-dialog-item > ul {
        display: none;
    }
    .proposal-dialog-block .proposal-dialog-img > ul {
        display: block;
    }

    /** ココプレダイアログ */
    .kokopre-info-modal_content {
        height: auto;
        width: calc(100% - 200px);
        min-width: unset;
        max-width: unset;
        left: 100px;
        margin-top: calc((100vh - 100px) / 2);
        margin-left: 0;
    }
    
    /** クロスメーターダイアログ */
    .yestate-modal_content {
        min-width: 90%;
        max-width: 90%;
        height: auto;
    }
    /** おすすめ情報(広告) */
    .sideContent-phone-area {
        height: unset;
    }
    .slick-slider .slick-track, .slick-slider .slick-list {
        width: unset !important;
        display: flex;
        flex-direction: row;
    }

    /** フッター TODO 2024/07/18 後々共有CSSに移動予定 */
    /* footer .footer-block .footer-nav {
        flex-flow: column;
    } */
    footer .horizontal-line {
        display: none;
    }
    .footer .footer-wrap {
        padding: 8% 0;
    }
    .footer .footer-wrap .inner {
        display: block;
    }
    .footer .footer-logo {
        width: 100%;
        margin-bottom: 3%;
    }
    .footer .footer-logo h5 {
        font-size: 14px;
    }
    .footer .footer-nav {
        width: 100%;
        padding-left: 0;
        /* flex-flow: column; */
    }
    .footer .footer-nav .nav-items {
        margin-right: 0;
    }
    .footer .footer-nav .nav-items a {
        position: relative;
        font-size: 3.6vw;
        padding-right: 0;
        margin-bottom: 0;
        border-right: none;
        line-height: 3;
    }
    .footer .footer-bottom {
        padding: 3% 0;
    }
    .footer .footer-bottom .inner {
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    .footer .footer-bottom .copy {
        font-size: 3.4vw;
    }
    .footer .footer-bottom ul {
        margin-left: 0;
    }
    .footer .footer-bottom ul li a {
        color: #ffffff;
        font-size: 3.4vw;
    }
    footer .flex-flow {
        flex-flow: column;
    }
    footer .vertical-line {
        display: none;
    }
    footer .left,
    footer .center,
    footer .right {
        width: 100% !important;
    }
}