@charset "UTF-8"; /* CSS Document */ /* 基本-モバイルファースト ======================================================================================================== */ .template_detail{ margin-bottom: 60px; } .template_detail_header{ margin-bottom: 20px; } .template_detail_header .icon{ display: flex; margin-bottom: 10px; } .template_detail_header .icon img{ height: 20px; margin-left: 5px; } .template_detail_header .icon img:first-child{ margin-left: 0; } .template_detail_header .text{ text-align: left; } .template_detail_header .text .name{ } .template_detail_header .type{ display: inline-block; vertical-align: middle; line-height: 1; padding: 5px; text-align: center; border: solid 1px #111; } /* .template_detail.type_land .template_detail_header .type{ color: #5E9546;} .template_detail.type_house .template_detail_header .type{ color: #ff5a5a;} .template_detail.type_mansion .template_detail_header .type{ color: #FF7D00;} */ .template_detail_header .text .name .p{ font-size: 24px; display: block; } .template_detail_header .text .price{ color: #b3203a; line-height: 1; font-weight: bold; display: flex; align-items: center; } .template_detail_header .text .price dt{ font-size: 20px; margin-top: 0.5em; } .template_detail_header .text .price dd{ font-size: 40px; } .template_detail_header .text .price .price_unit{ font-size: 30px; } .template_detail_header .text .outline{ display: flex; flex-wrap: wrap; margin-bottom: 20px; } .template_detail_header .text .outline dt{ background-color: #eee; line-height: 1; padding: 5px; margin-top: 10px; text-align: center; white-space: nowrap; width: calc(4em + 10px); } .template_detail_header .text .outline dd{ width: calc(100% - 4em - 10px); line-height: 25px; margin-top: 10px; padding-left: 10px; text-align: left; } .template_detail .mylist_btn{ } .template_detail .mylist_btn table{ width: 100% !important; } .template_detail .mylist_btn td{ padding: 0; margin: 0; } .template_detail .mylist_btn .bookmarked{ text-indent: -9999em; position: relative; text-align: left; width: 220px; } .template_detail_header .mylist_btn .bookmarked{ width: 100%; } .template_detail .mylist_btn .bookmarked input{ -webkit-appearance: none; border: none; display: block; background-color: transparent; background-image: url("../search/images/file/bt_mylist_off.gif"); background-repeat: no-repeat; background-position: center center; background-size: auto 25px; width: 100%; height: 40px; border: solid 1px #999; text-indent: -9999em; padding: 0; margin: 0; } .template_detail .mylist_btn .bookmarked_txt{ display: none; } .template_detail .mylist_btn .bookmarked a{ display: block; margin-top: -1.8em; background-image: url("../search/images/file/bt_mylist_on.gif"); background-repeat: no-repeat; background-position: center center; background-size: auto 25px; width: 220px; height: 40px; border: solid 1px #b3203a; text-indent: -9999em; } .template_detail .common_contact_btn li{ margin-top: 10px; } .template_detail .common_contact_btn li a{ display: block; text-decoration: none; font-size: 18px; font-weight: bold; color: #fff; padding: 10px; text-align: center; } .template_detail .common_contact_btn li.shiryouseikyu a{ background-color: #b3203a; } .template_detail .common_contact_btn li.reservation a{ background-color: #e48837; } .template_detail .openhouse{ margin-bottom: 10px; } .template_detail .photo_gallery{ text-align: center; } .template_detail .photo_gallery .bx-wrapper{ margin-bottom: 10px; } .template_detail .photo_gallery .bxslider li{ text-align: center; } .template_detail .photo_gallery .bxslider li img{ /* max-height: 65vw; */ aspect-ratio: 4/3; object-fit: contain; } .template_detail .photo_gallery .main_photo .bx-wrapper .bx-controls-direction a{ border-radius: 0; width: 30px; height: 30px; margin-top: 0; top: calc(32.5vw - 15px); } .template_detail .photo_gallery .main_photo .bx-wrapper .bx-controls-direction a.bx-prev{ left: 0px; } .template_detail .photo_gallery .main_photo .bx-wrapper .bx-controls-direction a.bx-next{ right: 0px; } .template_detail .photo_gallery .main_photo .bx-wrapper .bx-controls-direction a.bx-prev::before{ left: 10px; } .template_detail .photo_gallery .main_photo .bx-wrapper .bx-controls-direction a.bx-next::before{ right: 10px; } .template_detail .photo_gallery .img_comment{ font-size: 10px; } .template_detail .photo_gallery .slider_tm_box{ width: 280px; margin: 0 auto; } .template_detail .photo_gallery .slider_tm_box li{ } .template_detail .photo_gallery .slider_tm_box img{ width: 60px; height: 38px; object-fit: cover; opacity: 0.5; } .template_detail .photo_gallery .slider_tm_box .active img{ opacity: 1; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a{ width: 30px; height: 38px; top: 0; margin: 0; background-color: #b3203a; border-radius: 0; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-prev{ left: -35px; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-next{ right: -35px; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-prev::before{ left: 10px; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-next::before{ right: 10px; } .template_detail .panorama_box{ text-align: center; } .template_detail .panorama_box div{ margin-bottom: 20px; } .template_detail .panorama_box div:last-child{ margin-bottom: 40px; } .template_detail .panorama_box a{ display: inline-block; } .template_detail .panorama_box img{ height: 50px; } .template_detail .detail_comment{ display: flex; } .template_detail .detail_comment em{ display: grid; place-content: center; font-weight: bold; width: 80px; height: 80px; border-radius: 50%; background-color: #b3203a; color: #fff; text-align: center; } .template_detail .detail_comment p{ flex: 1; margin-left: 1em; } .template_detail .detail_staff .inner{ background-color: #f7e8eb; padding: 10px; display: flex; margin-bottom: 40px; } .template_detail .detail_staff .photo{ width: 80px; text-align: center; } .template_detail .detail_staff .photo img{ max-width: 80px; max-height: 120px; } .template_detail .detail_staff .text{ flex: 1; margin-right: 10px; text-align: left; } .template_detail .detail_staff .text h4{ color: #b3203a; font-weight: bold; margin-bottom: 5px; } .template_detail .detail_staff .text p{ } .template_detail .detail_feature ul{ text-align: left; display: flex; flex-wrap: wrap; } .template_detail .detail_feature li img{ width: 15vw; height: auto; display: inline-block; vertical-align: middle; margin: 0 1vw; } .template_detail .loan_simulation{ border: solid 3px #b3203a; border-radius: 5px; padding: 10px; text-align: center; } .template_detail .loan_simulation h4{ display: inline-block; text-align: center; color: #b3203a; font-size: 18px; font-weight: bold; border-bottom: solid 2px #b3203a; padding-bottom: 5px; margin-bottom: 20px; } .template_detail .loan_simulation .inner{ } .template_detail .loan_simulation h5{ } .template_detail .loan_simulation h5 .mi{ display: inline-block; vertical-align: middle; margin-right: 0.5em; } .template_detail .loan_simulation h5 .hensaigaku #price_monthly{ display: inline-block; vertical-align: middle; font-size: 30px; line-height: 1.2; font-weight: bold; color: #b3203a; } .template_detail .loan_simulation h5 .hensaigaku #price_monthly span{ font-size: 20px; } .template_detail .loan_simulation .research{ } .template_detail .loan_simulation .research dl{ display: flex; flex-wrap: wrap; } .template_detail .loan_simulation .research dt{ width: 30%; border-top: solid 1px #DDD; padding-top: 10px; margin-top: 10px; } .template_detail .loan_simulation .research dd{ width: 70%; text-align: right; border-top: solid 1px #DDD; padding-top: 10px; margin-top: 10px; display: flex; } .template_detail .loan_simulation .research dd input{ flex-grow: 1; margin-left: 1em; } .template_detail .loan_simulation .research dd span{ display: block; white-space: nowrap; } .template_detail .loan_simulation .research_btn{ margin-top: 10px; } .template_detail .loan_simulation .research_btn a{ display: block; text-decoration: none; background-color: #b3203a; color: #FFF; padding: 10px; border-radius: 5px; } .template_detail .detail_outline{ text-align: center; } .template_detail .detail_outline th, .template_detail .detail_outline td{ border: solid 1px #ddd; padding: 10px; } .template_detail .detail_outline th{ background-color:#eee; font-weight: bold; } .template_detail .detail_outline td{ text-align: left; vertical-align: middle; } .template_detail .under_my_list{ } .template_detail .under_my_list .mylist_btn .bookmarked_txt{ display: block; margin-top: -1.3em; font-size: 10px; } .template_detail .google_map iframe{ height: 250px; vertical-align: top; margin-bottom: 10px; } .template_detail .google_map .root_btn a{ display: block; } .template_detail .detail_contact{ border: solid 2px #b3203a; padding: 10px; } .template_detail .detail_contact .info{ margin-bottom: 10px; } .template_detail .detail_contact .info dt{ font-size: 20px; font-weight: bold; } .template_detail .detail_contact .tel{ text-align: center; } .template_detail .detail_contact .tel address{ display: flex; justify-content: center; align-items: center; line-height: 1; margin-bottom: 10px; } .template_detail .detail_contact .tel address .icon img{ height: 30px; } .template_detail .detail_contact .tel address a{ font-size: 32px; font-weight: bold; color: #b3203a; } #history{ text-align: center; } .kome{ text-align: left; } .kome li{ font-size: 12px; list-style: disc; margin-left: 20px; } /* 多棟表示の子物件 */ #tatou_child .accordion{ } #tatou_child .accordion_title{ display: block; background-color: #00b6e8; color: #fff; font-weight: 600; padding: 10px; cursor: pointer; position: relative; } #tatou_child .accordion_title::before{ content: "\307B\304B\306E\533A\753B\3082\898B\308B"; display: inline; } #tatou_child .accordion_title.open::before{ content: "\9589\3058\308B"; } #tatou_child .accordion_title::after{ content: ""; display: block; width: 8px; height: 8px; position: absolute; top: 0; bottom: 0; right: 13px; margin: auto 0; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(135deg); transition: all 0.2s ease; } #tatou_child .accordion_title.open::after{ transform: rotate(-45deg); } #tatou_child .accordion_inner{ display: none; } #tatou_child .secInfoBox{ border-top: solid 3px #00b6e8; padding-top: 20px; margin-bottom: 20px; text-align: left; } #tatou_child .secInfoBox:first-child{ border-top: none; /* padding-top: 0px; */ } #tatou_child .secInfoBox h3{ display: inline-block; font-weight: bold; color: #FFF; line-height: 1; background-color: #00b6e8; padding: 10px; } #tatou_child .secInfoBox .catch_copy{ display: block; font-weight: bold; } #tatou_child .secInfoBox .secInfoBoxContImg{ margin-bottom: 20px; } #tatou_child .secInfoBox .sliderInfo img{ max-height: 67vw; } #tatou_child .secInfoBox .listCommon li{ display: flex; justify-content: space-between; border-bottom: solid 1px #DDD; padding: 5px 0; } #tatou_child .secInfoBox .listCommon li p{ width: 100%; display: flex; justify-content: space-between; } #tatou_child .secInfoBox .secInfoBoxDetail .secInfoBoxDetailBtn{ color: #00b6e8; border: solid 3px #00b6e8; border-radius: 8px; text-align: center; padding: 5px 0; /* font-size: 1.25em; */ width: 50%; margin: 5% auto; } #tatou_child .secInfoBox .secInfoBoxDetail .secInfoBoxDetaiCont{ display: block !important; text-align: center; } #tatou_child .secInfoBox .secInfoBoxDetail .secInfoBoxDetaiCont img{ max-height: 67vw; } /* スマホのみ======================================================================================================== */ @media print and (max-width: 750px), screen and (max-width: 750px){ body { padding-bottom: 60px; } .template_detail .detail_header_contact .common_contact_btn{ width: 100%; display: flex; position: fixed; bottom: 0; left: 0; z-index: 11111; } .template_detail .detail_header_contact .common_contact_btn li{ margin-top: 0; width: 50%; } .template_detail .detail_outline table{ display: block; border-left: solid 1px #ddd; border-bottom: solid 1px #ddd; } .template_detail .detail_outline tr{ display: flex; flex-wrap: wrap; } .template_detail .detail_outline th, .template_detail .detail_outline td{ border-bottom: none; border-left: none; box-sizing: border-box; font-size: 12px; } .template_detail .detail_outline th{ width: 35%; } .template_detail .detail_outline td{ width: 65%; } .kome li{ font-size: 10px; } } /* PCのみ======================================================================================================== */ @media print and (min-width: 751px), screen and (min-width: 751px){ .back_list{ margin-bottom: 20px; } .template_detail{ margin-bottom: 100px; font-size: 16px; } .template_detail_header{ margin-bottom: 40px; grid-template-columns: auto 220px; display: grid; } .template_detail_header .icon { grid-area: 1 / 1 / 2 / 3; } .template_detail_header .text { grid-area: 2 / 1 / 3 / 2; } .template_detail_header .detail_header_contact { grid-area: 2 / 2 / 3 / 3; } .template_detail_header .icon{ margin-bottom: 0px; } .template_detail_header .icon img{ height: 25px; } .template_detail_header .text{ } .template_detail_header .text .name{ margin: 10px 0; } .template_detail_header .type{ display: inline-block; vertical-align: middle; line-height: 1; padding: 5px; margin-right: 0.5em; text-align: center; border: solid 1px #111; } .template_detail_header .text .name .p{ display: inline-block; vertical-align: middle; font-size: max(30px,2.8vw); line-height: 1.4; } .template_detail_header .text .price{ margin-top: -10px; margin-bottom: 10px; } .template_detail_header .text .outline{ } .template_detail .mylist_btn input:hover{ opacity: 0.8; cursor: pointer; } .template_detail .mylist_btn .bookmarked a:hover{ opacity: 0.8; } .template_detail .common_contact_btn li a{ padding: 15px; } .template_detail .photo_gallery { position: relative; width: 1000px; margin-right: auto; margin-left: auto; } .template_detail .photo_gallery .main_photo{ min-height: 750px; } .template_detail .photo_gallery .bxslider li img{ max-width: 1000px; max-height: 750px; width: 1000px; height: 750px; object-fit: contain; } .template_detail .photo_gallery .img_comment{ font-size: 14px; } .template_detail .photo_gallery .main_photo .bx-wrapper .bx-controls-direction a{ top: calc(375px - 15px); } .template_detail .photo_gallery .slider_tm_box{ display: inline-block; width: 910px; } .template_detail .photo_gallery .slider_tm_box li{ text-align: center; width: 180px; height: 135px; } .template_detail .photo_gallery .slider_tm_box li a{ display: block; position: relative; } .template_detail .photo_gallery .slider_tm_box img{ width: 180px; height: 135px; object-fit: contain; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a { width: 40px; height: 135px; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-prev{ left: -45px; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-next{ right: -45px; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-prev::before{ left: 15px; } .template_detail .photo_gallery .slider_tm_box .bx-wrapper .bx-controls-direction a.bx-next::before{ right: 15px; } .template_detail .panorama_box{ display: flex; justify-content: center; align-items: center; } .template_detail .panorama_box div{ margin: 0 10px 60px !important; } .template_detail .detail_comment em{ width: 120px; height: 120px; font-size: 20px; } .template_detail .feature h4{ font-size: 20px; padding-bottom: 10px; margin-bottom: 40px; } .template_detail .feature .inner span img{ width: 60px; margin: 5px; } .template_detail .detail_staff .inner{ padding: 30px; justify-content: space-between; } .template_detail .detail_staff .photo{ width: 100px; margin-bottom: 0; } .template_detail .detail_staff .photo img{ max-width: 100px; max-height: 150px; } .template_detail .detail_staff .text{ } .template_detail .detail_staff .text h4{ font-size: 20px; } .template_detail .detail_feature ul{ justify-content: center; } .template_detail .detail_feature li img{ width: 75px; margin: 0 10px; } .template_detail .loan_simulation{ border-radius: 10px; padding: 20px; } .template_detail .loan_simulation h4{ font-size: 30px; padding-bottom: 10px; margin-bottom: 40px; } .template_detail .loan_simulation h5{ font-size: 20px; } .template_detail .loan_simulation h5 .hensaigaku #price_monthly{ font-size: 50px; } .template_detail .loan_simulation h5 .hensaigaku #price_monthly span{ font-size: 30px; } .template_detail .loan_simulation .research{ display: flex; align-items: center; justify-content: space-between; } .template_detail .loan_simulation .research dl{ display: table; width: 80%; min-width: 820px; } .template_detail .loan_simulation .research dt{ display: table-cell; width: auto; text-align: left; border-top: none; border-left: solid 1px #DDD; padding: 0 0 0 10px; } .template_detail .loan_simulation .research dt:first-child{ border-left: none; padding: 0px; } .template_detail .loan_simulation .research dd{ display: table-cell; width: auto; border-top: none; padding: 0 10px 0 0; margin-top: 0; } .template_detail .loan_simulation .research dd input{ flex-grow: inherit; margin-left: 0; width: 90px; display: inline-block; vertical-align: middle; } .template_detail .loan_simulation .research dd span{ display: inline-block; vertical-align: middle; } .template_detail .loan_simulation .research_btn{ margin-top: 0px; width: 180px; } .template_detail .loan_simulation .research_btn a{ font-size: 18px; } .template_detail .detail_outline table{ width: 100%; border-collapse: collapse; border-spacing: 0; } .template_detail .detail_outline th, .template_detail .detail_outline td{ padding: 15px; } .template_detail .detail_outline th{ width: 150px; font-weight: normal; } .template_detail .google_map iframe{ height: 500px; margin-bottom: 40px; } .template_detail .google_map .root_btn a{ width: 300px; margin: 0 auto; } .template_detail .under_my_list .mylist_btn a:hover{ opacity: 0.8; } .template_detail .under_my_list .mylist_btn img{ width: 300px; } .template_detail .detail_contact{ padding: 30px 0; } .template_detail .detail_contact_inner{ display: flex; justify-content: space-between; } .template_detail .detail_contact .info{ width: calc((100% - 330px)/2); border-right: solid 1px #111; text-align: center; } .template_detail .detail_contact .info dl{ display: inline-block; text-align: left; } .template_detail .detail_contact .info dt{ font-size: 24px; } .template_detail .detail_contact .tel{ width: calc((100% - 300px)/2); } .template_detail .detail_contact .common_contact_btn{ width: 300px; margin-right: 30px; } .template_detail .detail_contact .common_contact_btn li:first-child{ margin-top: 0; } #history{ } /* 多棟表示の子物件 */ #tatou_child .secInfoBox{ padding-top: 40px; margin-bottom: 40px; } #tatou_child .secInfoBox .r_blockname{ font-size: 20px; } #tatou_child .secInfoBox .catch_copy{ font-size: 20px; margin-bottom: 10px; } #tatou_child .secInfoBox .secInfoBoxCont{ display: flex; flex-wrap: wrap; justify-content: space-between; } #tatou_child .secInfoBox .secInfoBoxContImg{ width: 100%; margin-bottom: 40px; } #tatou_child .secInfoBox .secInfoBoxContImg .bx-wrapper{ width: 600px; margin: 0 auto; } #tatou_child .secInfoBox .sliderInfo img{ max-width: 600px; max-height: 400px; } #tatou_child .secInfoBox .secInfoBoxContTxt{ width: 380px; } #tatou_child .secInfoBox .listCommon li{ font-size: 16px; padding: 10px 0; } #tatou_child .secInfoBox .secInfoBoxDetail{ width: 600px; } #tatou_child .secInfoBox .secInfoBoxDetail .secInfoBoxDetaiCont source, #tatou_child .secInfoBox .secInfoBoxDetail .secInfoBoxDetaiCont img{ max-width: 600px; max-height: 400px; } }