@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; } .back_list { display: none; } /* スマホのみ======================================================================================================== */ @media print and (max-width: 820px), screen and (max-width: 820px) { 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: 821px), screen and (min-width: 821px) { .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; top: -90px; } .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; } } @media print and (min-width: 751px), screen and (min-width: 751px) { .template_detail .photo_gallery .bxslider li { width: 1000px; height: 750px; display: flex !important; align-items: center; justify-content: center; } .template_detail .photo_gallery .bxslider li img { width: 70% !important; height: auto !important; max-width: 700px; max-height: 560px; object-fit: contain; } } @media print and (min-width: 751px), screen and (min-width: 751px) { .template_detail .photo_gallery .bxslider li { width: 1000px; height: 750px; display: flex !important; flex-direction: column; align-items: center; justify-content: center; } .template_detail .photo_gallery .bxslider li img { width: 70% !important; height: auto !important; max-width: 700px; max-height: 560px; object-fit: contain; margin: 0; } .template_detail .photo_gallery .bxslider li .img_comment { position: static !important; display: block !important; width: auto !important; margin: 8px 0 0 !important; padding: 0 !important; text-align: center; font-size: 14px; line-height: 1.5; } } /* 2026/05/14 追記 */ .loan_simulation .attention { padding: 5vw; font-size: 12px; border: solid 1px #f7e8eb; text-align: left; background-color: #f7e8eb; margin: 18px 0 0; border-radius: 5px; } .loan_simulation .attention dt { display: block; font-weight: bold; color: #b3203a; } @media print and (min-width: 751px), screen and (min-width: 751px) { .loan_simulation .attention { padding: 1vw; } } /* 2026/06/01 追記 */ /* 現地販売 */ .template_detail_header .open_house { display: none; } .template_detail_header .open_house.is-show { display: block; grid-column: 1 / -1; flex-basis: 100%; width: min(1000px, calc(100vw - 40px)); margin: 40px auto; padding: 32px 38px; background: #fff7fa; border: 2px solid #f3c8d3; border-left: 8px solid #bd173b; box-shadow: 0 8px 22px rgba(189, 23, 59, 0.08); box-sizing: border-box; line-height: 1.9; } .template_detail_header .open_house .r_open_title_detail { margin-bottom: 12px; color: #bd173b; font-size: 21px; font-weight: bold; } .template_detail_header .open_house .r_openschedule_detail, .template_detail_header .open_house .r_opentime_detail, .template_detail_header .open_house .r_open_action_detail { font-size: 15px; color: #222; } .template_detail_header .open_house .r_open_action_detail { margin-top: 6px; color: #bd173b; font-weight: bold; } @media print and (max-width: 750px), screen and (max-width: 750px) { .template_detail_header .open_house.is-show { padding: 20px 25px; } } /* 2026/06/29 追記 */ /* iPadだけの調整 */ @media screen and (min-width: 751px) and (max-width: 820px) { .template_detail .photo_gallery .slider_tm_box { width: 65%; } .template_detail .photo_gallery .bxslider li { height: auto !important; justify-content: flex-start !important; } .template_detail .photo_gallery .main_photo .bx-wrapper .bx-controls-direction a { top: calc(200px - 15px); } .template_detail_header .open_house.is-show { width: 100%; } }