@charset "UTF-8"; /*----------------------------------------------------- Reset ----------------------------------------------------- */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section , main { display: block; } a:link, a:visited, a:hover, a:active { color: #323232; text-decoration: none; } body { line-height: 1; text-align: justify; background: #fff; color: #323232; font-family: 'A1明朝' , '中ゴシックBBB', "Cardo" , 'sans-serif', 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } * { margin: 0; padding: 0; } img { max-width: 100%; width: 100%; height: auto; vertical-align: bottom; flex-shrink: 0; } picture { display: block; } span.uwa { vertical-align: top; font-size: 30%; } /*滞在色変*/ #Index nav.localnav #menu01 a , #Outline nav.localnav #menu02 a , #Plan nav.localnav #menu03 a , #Location nav.localnav #menu04 a , #Quality nav.localnav #menu05 a { color: #515151; } /*オーバーレイ*/ .overlay { background: #fff; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; } /*fade*/ .fade { opacity: 0; transition: opacity 1.5s; } .fade.is_inview { opacity: 1; transition-delay: .8s; } .fade_early { opacity: 0; transition: opacity 1s; } .fade_early.is_inview { opacity: 1; transition-delay: .1s; } .fadeup { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform .8s; } .fadeup.is_inview { opacity: 1; transform: translateY(0); transition-delay: .1s; } .fadeup02 { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform .8s; } .fadeup02.is_inview { opacity: 1; transform: translateY(0); transition-delay: .2s; } .fadeup03 { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform 1s; } .fadeup03.is_inview { opacity: 1; transform: translateY(0); transition-delay: .3s; } .center { text-align: center; } .left { text-align: left; } .right { text-align: right; } /*----------------------------------------------------- common ----------------------------------------------------- */ h1 , h2 , h3 , h4 , h5 { font-feature-settings: "palt"; font-weight: initial; line-height: 1.5; } .pc { display: block; } .tab { display: none; } .sp { display: none; } p { font-feature-settings: "palt"; line-height: 1.6; } p.annotation { font-size: 10px; } p.small { font-size: 10px!important; margin-top: 5px; letter-spacing: -.02em; } p.subttl { font-size: clamp(1.125rem, 1.094rem + 0.16vw, 1.25rem); line-height: 35px; color: #BB915C; margin-bottom: 20px; } /*[data-overDirection="full"] { width: 100vw; margin: 0 calc(50% - 50vw); }*/ [data-size="w750"]{ max-width: 750px; margin: 0 auto; } [data-size="w850"]{ max-width: 850px; width: 90%; margin: 0 auto; } [data-size="w900"]{ max-width: 900px; width: 90%; margin: 0 auto; } [data-size="w1000"]{ max-width: 1000px; width: 90%; margin: 0 auto; } [data-size="w1200"]{ max-width: 1200px; width: 90%; margin: 0 auto; } [date-font="gothic"] { font-family: '中ゴシックBBB'; } :root { --green-color: #008d54; --yellowgreen-color: #94b428; --blown-color: #6c4432; --emeraldgreen-color: #4ac0a0; --gothic-font: Gothic Medium BBB , "Hiragino Kaku Gothic ProN"; } .line { border:solid #bb915c82 .3px; margin-bottom: 40px; } .center { text-align: center; } .left { text-align: left; } .right { text-align: right; } .mgn10 { margin-bottom: 10px; } .mgn20 { margin-bottom: 20px; } .mgn30 { margin-bottom: 30px; } /*----------------------------------------------------- headまわり ----------------------------------------------------- */ #main { position: relative; top: 37px; padding-bottom: 37px; margin-top: 0px; } /*下層ページ 冒頭共通*/ .pages .head_area { height: 330px; margin: 0 auto 110px; } .pages .head_area .head_inner { position: relative; max-width: 1920px; height: 100%; display: flex; align-items: center; justify-content: center; } .pages .head_area h3 { display: flex; flex-direction: column; justify-content: center; color: #fff; } .pages .head_area h3 img { margin: 0 auto 15px; } .pages .head_area span { font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem); text-align: center; } .pages .head_area p.annotation { display: block; position: absolute; right: 3%; bottom: 3%; text-align: right; color: #fff; } .pages .intro { position: relative; } .pages .intro_inner::before { content: ''; position: absolute; background: url("../img/quality/intro_bg01.png")no-repeat; background-size: cover; width: 150px; height: 160px; bottom: 30%; z-index: -1; } .pages .intro::after { content: ''; position: absolute; background: url("../img/quality/intro_bg02.png")no-repeat; background-size: cover; width: 150px; height: 160px; bottom: 10%; right: 0; z-index: -1;} .pages .intro_inner { display: flex; justify-content: space-between; margin-bottom: 50px; position: relative; } .pages .intro_inner::before { content: ''; display: block; background: url("../img/quality/intro_leaf.png")no-repeat; background-size: contain; width: 100px; height: 54px; position: absolute; z-index: -1; left: -10%; top: -9%; } .pages .intro p.intro_ttl { font-size: clamp(1.125rem, 0.991rem + 0.57vw, 1.563rem); line-height: 2; margin-bottom: 50px; } .pages .intro p.txt { font-size: clamp(0.813rem, 0.774rem + 0.16vw, 0.938rem); line-height: 35px; } .pages .intro p.annotation { right: 10px; bottom: 10px; margin-right: 0; margin-left: auto; text-align: right; } .pages .intro .txt_wrap { width: 50%; } .pages .intro .ph_wrap { width: 50%; } /*----------------------------------------------------- Top ----------------------------------------------------- */ #Index #main { overflow: hidden; } #Index .kv { width: 100%; background: url("../img/top/kv_bg.png")no-repeat; background-size: 100%; } #Index .kv_wrapper { position: relative; } #Index .kv_inner { padding-top: 150px; max-width: 1400px; width: 90%; margin: 0 auto 20px; } #Index .yokoku_wrap { top: 3%; position: absolute; z-index: 10; margin: 0 auto; right: 0; left: 0; font-family: var(--gothic-font); } #Index .yokoku_wrap .yokoku_inner { display: flex; align-items: center; justify-content: center; } #Index .yokoku_wrap .yokoku_inner p.ttl { width: 70px; text-align: center; font-size: 13px; border: 1px solid #fff; padding: 5px; box-sizing: border-box; display: block; margin-right: 10px; white-space: nowrap; color: #fff; } #Index .yokoku_wrap .yokoku_inner p.yokoku_txt { font-size: clamp(0.625rem, 0.587rem + 0.16vw, 0.75rem); display: flex; align-items: center; color: #fff; } #Index .cv_area { padding: 85px 5%; } #Index .cv_area .cv_area_ttl { font-size: clamp(2.188rem, 1.797rem + 1.95vw, 3.75rem); text-align: center; margin-bottom: 35px; line-height: 1.1; } #Index .cv_area .cv_btn { max-width: 600px; margin: 0 auto; background: var(--green-color); text-align: center; box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.2); transition: .2s cubic-bezier(0.45, 0, 0.55, 1); cursor: pointer; } #Index .cv_area .cv_btn a { font-size: clamp(1.563rem, 1.516rem + 0.23vw, 1.75rem); color: #fff; padding: 30px 5%; display: block; } #Index .cv_area .cv_btn:hover { transform: translateY(5px); box-shadow: none; } #Index .cv_area .cv_btn img { max-width: 37px; vertical-align: 1px; } #Index .information { background: #f4edd8; padding: 60px 0 100px; } #Index .information p.info_txt { line-height: 1.6; text-align: center; margin-bottom: 20px; } #Index .information h3 { text-align: center; } #Index .information h3 img { max-width: 212px; width: 100%; margin: 0 auto 45px; } #Index .information dl { font-size: 15px; width: 100%; height: 100%; overflow-y: scroll; padding-top: 10px; box-sizing: border-box; font-family: '中ゴシックBBB'; } #Index .information dl div { display: flex; flex-wrap: wrap; justify-content: center; } #Index .information dl div:not(:last-child) { margin-bottom: 20px; } #Index .information dl dt { margin-right: 10px; } #Index .point_area_txt { width: 90%; margin: -40px auto 60px; text-align: center; } #Index .point_area_img { background: #f4edd8; padding: 10px 5%; box-sizing: border-box; } #Index .point_area_img picture { max-width: 900px; margin: 0 auto; } #Index .point_area_txt01 { font-size: clamp(0.938rem, 0.797rem + 0.7vw, 1.5rem); } #Index .point_area_txt02 { font-size: clamp(1.375rem, 1.219rem + 0.78vw, 2rem); margin-bottom: 25px; } #Index .highlight span { position: relative; z-index: 0; } #Index .highlight span::before { content: ""; position: absolute; left: 0; bottom: -.2em; width: 100%; height: 0.6em; background: linear-gradient(to right, #fdfd96, #7efcb4); z-index: -1; } #Index .point_area_txt03 { font-size: clamp(1.375rem, 1.141rem + 1.17vw, 2.313rem); color: var(--green-color); } #Index .point_area_ttl span { font-size: clamp(1.75rem, 1.531rem + 1.09vw, 2.625rem); } #Index .point_area_ttl { font-size: clamp(3rem, 2.656rem + 1.72vw, 4.375rem); margin-bottom: 40px; line-height: 1.2; } #Index .point_area_subttl { font-size: clamp(1.375rem, 1.219rem + 0.78vw, 2rem); color: var(--green-color); } #Index .concept_area { background: url("../img/top/concept_bg.png")no-repeat; background-size: cover; padding: 100px 0; background-position: bottom; min-height: 2186px; position: relative; } #Index .concept_area::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 100%); pointer-events: none; } #Index .concept_area h3 { text-align: center; } #Index .concept_area h3 img { max-width: 135px; width: 100%; margin: 0 auto 70px; } #Index .concept_area .concept_txt_wrap { background: #FFF; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.85) 90%, rgba(255, 255, 255, 0) 100%); padding: 70px 30px; box-sizing: border-box; max-width: 750px; width: 90%; margin: 0 auto; text-align: center; position: relative; } #Index .concept_area .concept_txt_wrap .img01 { position: absolute; right: -250px; top: -30px; max-width: 340px; } #Index .concept_area .concept_txt_wrap .img02 { position: absolute; left: -250px; top: 26%; max-width: 340px; } #Index .concept_area .concept_txt_wrap .img03_leaf { position: absolute; right: -61px; top: 26%; max-width: 108px; } #Index .concept_area .concept_txt_wrap .img03 { position: absolute; right: -150px; top: 44%; max-width: 260px; } #Index .concept_area .concept_txt { font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); line-height: 2; margin-bottom: 30px; } #Index .concept_area+p.annotation { text-align: right; padding-right: 5%; } #Index .contents_area { padding: 80px 0; } #Index .contents_area h3 { text-align: center; } #Index .contents_area h3 img { max-width: 160px; width: 100%; margin: 0 auto 70px; } #Index .contents_links_wrap { margin-bottom: 60px; } #Index .contents_links { padding: 20px; box-sizing: border-box; width: 100%; height: 300px; display: flex; align-items: center; transition: .5s; } #Index .contents_links:hover { opacity: .5; } #Index .contents_links:not(:last-child) { margin-bottom: 50px; } #Index .contents_links:last-child { margin-bottom: 60px; } #Index .contents_links.plan { background: url("../img/top/contents_plan.png")no-repeat; background-size: cover; } #Index .contents_links.access { background: url("../img/top/contents_access.png")no-repeat; background-size: cover; } #Index .contents_links.quality { background: url("../img/top/contents_quality.png")no-repeat; background-size: cover; } #Index .contents_links_txtarea { background: #fff; width: 300px; height: 260px; display: flex; align-items: baseline; flex-direction: column; justify-content: center; padding: 40px; box-sizing: border-box; box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.2); } #Index .contents_links_txtarea h4 { font-size: 25px; color: var(--green-color); margin-bottom: 10px; } #Index .contents_links_txt { font-size: 15px; margin-bottom: 20px; } #Index .contents_links.plan .contents_links_txtarea, #Index .contents_links.quality .contents_links_txtarea { margin: 0 0 0 auto; } #Index .more_btn { background: #fff; border: 1px solid var(--green-color); width: 100%; padding: 13px 20px; box-sizing: border-box; position: relative; cursor: pointer; text-align: center; } #Index .more_btn:after { content: ""; width: 0%; height: 100%; background: var(--green-color); color: #fff; position: absolute; transition: all 0.4s ease-in-out; top: 0; right: 0; } #Index .contents_links:hover .more_btn::after { right: auto; left: 0; width: 100%; } #Index .more_btn span { position: relative; box-sizing: border-box; text-align: center; color: var(--green-color); z-index: 20; transition: all 0.3s ease-in-out; } #Index .contents_links .btn_arrow { margin-right: 5px; line-height: 0; } #Index .contents_links .btn_arrow svg { fill: var(--green-color); width: 41px; height: 9px; vertical-align: 3px; transition: all 0.3s ease; } #Index .contents_links:hover span { color: #fff; } #Index .contents_links:hover .btn_arrow svg { fill: #fff; } /*----------------------------------------------------- Page Common ----------------------------------------------------- */ .floor_kind_wrap { display: flex; justify-content: space-between; } .floor_kind_wrap .txt_wrap { display: flex; flex-direction: column; background: #ffffffd4; padding: 20px 30px; height: 100%; position: relative; } .floor_kind_wrap .kind_item:not(:first-of-type) .txt_wrap::before { content: ''; border-left: 1px solid #997660; left: 0; width: 1px; height: 85%; position: absolute; } .floor_kind_wrap .kind_item { display: flex; flex-direction: column; width: calc(100% / 3); } .floor .txt_wrap .name_wrap p { color: #51311a; } .floor_kind_wrap .name_wrap { text-align: center; margin-bottom: 10px; } .floor_kind_wrap .name_wrap p.name_img { font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); line-height: 1; margin-bottom: 5px; } .floor_kind_wrap .name_wrap p.name { font-size:clamp(1.563rem, 1.484rem + 0.39vw, 1.875rem); line-height: 1; margin-bottom: 5px; } .floor_kind_wrap p.kind_txt { font-size: 13px; line-height: 22px; text-align: left; margin-bottom: 0; text-align: justify; } #Plan .floor_kind_wrap .txt_wrap { background: #FAF4E8; margin-bottom: 0!important; } #Plan .floor_kind_wrap { margin-bottom: 60px; } /*----------------------------------------------------- Quality Page General Styles ----------------------------------------------------- */ #Plan h3 img { max-width: 110px; } #Plan .head_area { background: url("../img/plan/head.png") no-repeat; background-size: cover; background-position: center; } #Plan .pages .intro .txt_wrap { text-align: left; } /* Text Sizes */ #Plan p.txt15 { font-size: clamp(0.875rem, 0.859rem + 0.08vw, 0.938rem); } /*-----------------------------------------------------   Anchor Menu ----------------------------------------------------- */ #Plan .anchor_menu_wrap { background: #f4edd8; } #Plan ul.menu { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 50px 0; gap: 25px; max-width: 750px; margin: 0 auto; } #Plan ul.menu li { width: calc(100% / 3 - 20px); display: flex; align-items: center; justify-content: center; transition: 0.3s ease-in-out; } #Plan ul.menu li:hover { opacity: .5; } /*-----------------------------------------------------   Common Title Style ----------------------------------------------------- */ #Plan .anchor_ttl { font-size: clamp(1.563rem, 1.406rem + 0.78vw, 2.188rem); text-align: center; margin-bottom: 20px; line-height: 1.3; display: inline-block; } #Plan .anchor_subttl { font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); margin-bottom: 10px;} #Plan .anchor_ttl.grade::after { content: ''; display: block; background: linear-gradient(to right, #FFFF99, #5EE191); height: 5px; right: 0; left: 0; width: 100%; } /*-----------------------------------------------------   Location Section ----------------------------------------------------- */ #Plan #Location_anchor { background: url("../img/plan/location_bg.png")no-repeat; background-size: cover; background-position: bottom; width: 100%; min-height: 1750px; padding: 100px 0 40px; position: relative; margin-bottom: 100px; } #Plan #Location_anchor .annotation { position: absolute; right: 5%; bottom: 1%; color: #fff; } #Plan #Location_anchor .txt_wrap { margin-bottom: 30px; text-align: center; } #Plan #Location_anchor .txt_wrap p { text-align: center;color:#fff } /*-----------------------------------------------------   landscape Section ----------------------------------------------------- */ #Plan .landscape { margin-bottom: 150px; position: relative; } #Plan .landscape::before { content: ''; display: block; background: url("../img/plan/landscape_leaf01.png")no-repeat; background-size: contain; position: absolute; left: 0; top: 10%; width: 176px; height: 380px; z-index: -1; } #Plan .landscape::after { content: ''; display: block; background: url("../img/plan/landscape_leaf02.png")no-repeat; background-size: contain; position: absolute; right: 0; bottom: 10%; width: 245px; height: 275px; z-index: -1; } #Plan .landscape .anchor_ttl span { display: block; font-size: clamp(0.813rem, 0.672rem + 0.7vw, 1.375rem);} /*-----------------------------------------------------   House Section ----------------------------------------------------- */ #Plan #House_anchor { padding: 0 0 100px; } #Plan #House_anchor .anchor_ttl span { display: block; font-size: clamp(0.813rem, 0.672rem + 0.7vw, 1.375rem);} #Plan #House_anchor .parth01 , #Plan #House_anchor .parth02 { margin-bottom: 60px; position: relative; } #Plan #House_anchor .parth01:before { content: ''; display: block; background: url("../img/plan/parth01_leaf01.png")no-repeat; background-size: contain; width: 125px; height: 155px; left: 0; bottom: 10%; position: absolute; z-index: -1; } #Plan #House_anchor .parth01:after { content: ''; display: block; background: url("../img/plan/parth01_leaf02.png")no-repeat; background-size: contain; width: 193px; height: 475px; right: 0; bottom: 10%; position: absolute; z-index: -1; } #Plan #House_anchor .parth02:before { content: ''; display: block; background: url("../img/plan/parth02_leaf01.png")no-repeat; background-size: contain; width: 140px; height: 100px; left: 0; top: 10%; position: absolute; z-index: -1; } #Plan #House_anchor .parth01 picture , #Plan #House_anchor .parth02 picture { margin-bottom: 5px; } #Plan .txt_wrap { margin-bottom: 30px; text-align: center; } /* Trees */ #Plan #House_anchor .trees { background: url("../img/plan/trees_bg.png")no-repeat; background-size: cover; padding: 60px 0 90px;} #Plan #House_anchor .trees picture { margin-bottom: 30px; } #Plan #House_anchor .trees p.annotation { text-align: right; } /* Floor & Beam */ #Plan #House_anchor .floor .floor_ph, #Plan #House_anchor .beam_ph { position: relative; margin-bottom: 50px; } #Plan #House_anchor .floor .floor_ph .annotation, #Plan #House_anchor .beam_ph .annotation { position: absolute; right: 5%; bottom: 2%; } #Plan #House_anchor .beam_ph .annotation { color: #fff; } /* Beam Bnr */ #Plan .beam_bnr { background: #F4EDD8; padding: 50px 0; margin-top: 60px; } #Plan .beam_bnr p { font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); text-align: center; margin-bottom: 20px; } #Plan .beam_bnr a { max-width: 600px; width: 100%; margin: 0 auto; display: block; } #Plan .beam_bnr a img { box-shadow: 1px 4px 10px #ababab; transition: .5s;} #Plan .beam_bnr a:hover img { box-shadow: 2px 5px 15px #827c7c; } /*-----------------------------------------------------   Madori Section ----------------------------------------------------- */ #Plan #Madori_anchor { margin-bottom: 100px; } #Plan #Madori_anchor .txt_wrap { text-align: center; margin-bottom: 0; } #Plan #Madori_anchor .anchor_ttl { margin-bottom: 70px; } /*#Plan #Madori_anchor .anchor_ttl.grade::after { background: linear-gradient(to right, #FFFF99, #5EE191); }*/ /* Madori Intro */ #Plan #Madori_anchor .madori_intro { background: #F5F5F2; position: relative; padding: 40px 50px 50px; box-sizing: border-box; margin-bottom: 100px; } #Plan #Madori_anchor .madori_intro::before { content: ''; background: linear-gradient(90deg, #ffff99 25%, #93ffd1 75%); width: 100%; height: 100%; position: absolute; right: -10px; top: -10px; z-index: -1; } #Plan #Madori_anchor .madori_intro::after { content: ''; background: linear-gradient(90deg, #FFBEFF 25%, #A1FFFF 75%); width: 100%; height: 100%; position: absolute; right: 10px; top: 10px; z-index: -1; } #Plan #Madori_anchor .madori_intro .pickup { max-width: 140px; width: 100%; margin: 0 auto 30px; } #Plan #Madori_anchor .pickup_ttl { font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); text-align: center; margin-bottom: 30px; } #Plan #Madori_anchor .pickup_ttl span { color: var(--green-color); } #Plan #Madori_anchor .pickup_flex { display: flex; justify-content: space-between; gap: 20px; } #Plan #Madori_anchor .pickup_img { max-width: 320px; width: 100%; } #Plan #Madori_anchor .pickup_txt { text-align: left; font-size: clamp(0.813rem, 0.766rem + 0.23vw, 1rem); margin-bottom: 20px; } #Plan #Madori_anchor .txt_wrap .pickup_img { width: 98%; margin: 0 auto; } /*-----------------------------------------------------   plan ----------------------------------------------------- */ #Plan .plan { border-top: 2px solid var(--green-color); border-bottom: 2px solid var(--green-color); padding: 40px 0; } #Plan .plan_ttl_flex { display: flex; gap: 20px; align-items: center; margin-bottom: 30px; } #Plan .plan_ttl_flex img { max-width: 230px; } #Plan .plan_ttl_flex .plan_ttl { font-size: clamp(1.125rem, 1.078rem + 0.23vw, 1.313rem); } #Plan .plan .kukaku { margin-bottom: 20px; } #Plan .plan .point { margin-bottom: 60px; } #Plan .plan .madori { width: 95%; margin: 0 auto 60px; } #Plan .plan .madori img { text-align: center; } #Plan .plan_img { margin-bottom: 30px; } #Plan .plan_img picture { margin-bottom: 5px; } #Plan .plan_img .annotation { text-align: right; } /* plan_option */ #Plan .plan_option { display: flex; align-items: center; justify-content: space-between; gap: 20px; } #Plan .plan_option .floor { display: flex; max-width: 500px; width: 100%; } #Plan .plan_option .floor_ph, #Plan .plan_option .txt_wrap { width: 50%; } #Plan .plan_option .txt_wrap { padding: 25px; box-sizing: border-box; } #Plan .plan_option .floor_ttl { font-size: clamp(1.125rem, 1.078rem + 0.23vw, 1.313rem); color: var(--blown-color); line-height: 1.3; margin-bottom: 10px; } #Plan .plan_option .floor_ttl span { display: block; } #Plan .plan_option .floor_ttl span:first-child { font-size: clamp(0.875rem, 0.828rem + 0.23vw, 1.063rem); } #Plan .plan_option .floor_ttl span:last-child { font-size:clamp(0.75rem, 0.703rem + 0.23vw, 0.938rem); } #Plan .plan_option .floor_txt { font-size: clamp(0.75rem, 0.719rem + 0.16vw, 0.875rem); text-align: left; } #Plan .plan_option .icon { max-width: 350px; width: 100%; } /* plan_option 個別 */ #Plan .plan_option .maple .txt_wrap { background: url("../img/plan/plan_maple_bg.png")no-repeat; } #Plan .plan_option .walnut .txt_wrap { background: url("../img/plan/plan_walnut_bg.png")no-repeat; } /*-----------------------------------------------------   Bnr Link & Page Last ----------------------------------------------------- */ #Plan .bnr_link { background: #F4EDD8; padding: 40px 0 50px; margin-bottom: 40px; } #Plan .bnr_link .bnr_link_inner { text-align: center; } #Plan .bnr_link .bnr_link_inner .bnr_link_ttl { font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); margin-bottom: 20px; } #Plan .bnr_link a img { max-width: 600px; margin: 0 auto; box-shadow: 1px 4px 10px #ababab; transition: .5s;} #Plan .bnr_link a:hover img { box-shadow: 2px 5px 15px #827c7c; } #Plan .pagelast { font-family: var(--gothic-font); } /*----------------------------------------------------- Quality Page General Styles ----------------------------------------------------- */ #Quality h3 img { max-width: 190px; } #Quality .head_area { background: url("../img/quality/head.png") no-repeat; background-size: cover; background-position: center right; } #Quality p.anchor_ttl { font-size: clamp(1.125rem, 0.938rem + 0.94vw, 1.875rem); height: 50px; line-height: 50px; background: var(--blown-color); margin-bottom: 25px; text-align: center; color: #fff; } #Quality .kozo p.anchor_ttl, #Quality #Structure_anchor p.anchor_ttl { font-size: clamp(1.125rem, 0.938rem + 0.94vw, 1.875rem); height: 50px; line-height: 50px; background: var(--emeraldgreen-color); margin-bottom: 25px; text-align: center !important; color: #fff !important; } #Quality h5 { font-size: clamp(0.875rem, 0.76rem + 0.49vw, 1.25rem); background: #dad0cc; padding: 10px; text-align: left; margin-bottom: 10px; } #Quality #Structure_anchor h5 { background: #DCEBEC; color: #509C9E; } #Quality p.sec_ttl { font-size: clamp(1.125rem, 0.991rem + 0.57vw, 1.563rem); margin-bottom: 5px; text-align: center; } #Quality p.sec_txt { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); } #Quality .txt_area { text-align: center; margin-bottom: 40px; } #Quality .flex { display: flex; justify-content: space-between; } #Quality .harf48 { width: 48%; margin-bottom: 40px; } #Quality .item { margin-bottom: 30px; width: 48%; } #Quality .item_wrap { display: flex; flex-wrap: wrap; justify-content: space-between; } #Quality .item_wrap_annotation { margin-bottom: 45px; } #Quality .con_txt_wrap { width: 100%; } #Quality .box_img { max-width: min(100%, 230px); width: 100%; } #Quality .inner_flex, #Quality .inner_flex_pc { display: flex; justify-content: space-between; gap: 10px; } #Quality picture.main { margin: 0 0 5px; } #Quality .font-size95 { font-size: 95%; } /* Text Sizes */ #Quality p.txt12 { font-size: clamp(0.625rem, 0.594rem + 0.16vw, 0.75rem); } #Quality p.txt15 { font-size: clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); } #Quality p.txt16 { font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); margin-bottom: 30px; } #Quality p.txt17 { font-size: clamp(0.813rem, 0.75rem + 0.31vw, 1.063rem); line-height: 22px; } #Quality p.txt20 { font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem); } #Quality p.txt21 { font-size: clamp(0.813rem, 0.688rem + 0.63vw, 1.313rem); line-height: 18px; } #Quality p.gothic_ttl { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); margin-bottom: 10px; border-bottom: 1px solid; } #Quality p.gothic_ttl.none { border-bottom: none; margin-bottom: 5px; line-height: 1.3; } #Quality p.gothic_mini { font-size: 10px; line-height: 17px; } #Quality p.mini10 { font-size: 10px; line-height: 16px; } /*----------------------------------------------------- Anchor Menu ----------------------------------------------------- */ #Quality .anchor_menu_wrap { background: #f4edd8; margin-bottom: 100px; padding: 50px 0; } #Quality ul.menu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 25px; } #Quality ul.menu li { width: calc(100% / 3 - 20px); display: flex; align-items: center; justify-content: center; transition: 0.3s ease-in-out; background: var(--blown-color); } #Quality ul.menu li:hover { background: var(--emeraldgreen-color); } #Quality ul.menu li a { width: 100%; padding: 15px; display: block; text-align: center; color: #fff; font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); } /*----------------------------------------------------- Floor Section ----------------------------------------------------- */ #Quality .floor { background: url("../img/plan/fl_bg.png")no-repeat; background-size: cover; padding: 100px 0; position: relative; } #Quality .floor p.floor_ttl { font-size: clamp(1rem, 0.781rem + 1.09vw, 1.875rem); margin-bottom: 40px; text-align: center; } #Quality .floor h4 { font-size: 50px; text-align: center; margin-bottom: 45px; line-height: 1; } #Quality .floor p.floor_txt { margin-bottom: 60px; text-align: center; font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); } #Quality .floor p.annotation { display: block; position: absolute; right: 10px; bottom: 10px; text-align: right; color: #fff; } /*----------------------------------------------------- Kitchen Section ----------------------------------------------------- */ #Quality #Kitchen_anchor { margin-bottom: 100px; } #Quality #Kitchen_anchor .head { margin-bottom: 20px; } #Quality #Kitchen_anchor .dairiseki { padding: 30px 50px; background: url("../img/quality/dairiseki_bg.png") no-repeat; background-size: cover; width: 100%; height: 100%; margin: 20px 0 90px; box-sizing: border-box; } #Quality #Kitchen_anchor .dairiseki .intro { display: block; text-align: center; margin-top: 0; margin-bottom: 30px; } #Quality #Kitchen_anchor .dairiseki p.detail_ttl { font-size: clamp(1rem, 0.781rem + 1.09vw, 1.875rem); margin-bottom: 15px; } #Quality #Kitchen_anchor .dairiseki p.txt { font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); line-height: 36px; } #Quality #Kitchen_anchor .dairiseki .flex:first-of-type { margin-bottom: 40px; } #Quality #Kitchen_anchor .dairiseki .flex { display: flex; justify-content: space-between; align-items: flex-start; } #Quality #Kitchen_anchor .dairiseki .img { width: min(100%, 220px); } #Quality #Kitchen_anchor .dairiseki .txt_wrap { width: min(100%, 195px); } #Quality #Kitchen_anchor p.obi { text-align: center; background: #fff; font-size: clamp(0.813rem, 0.734rem + 0.39vw, 1.125rem); color: var(--blown-color); border: 1px solid var(--blown-color); padding: 5px 0; margin-bottom: 10px; letter-spacing: .15em; } #Quality #Kitchen_anchor .harf { width: 48%; } #Quality #Kitchen_anchor .harf img { width: 100%; margin-bottom: 10px; } #Quality #Kitchen_anchor .harf p.gothic_ttl { line-height: 1.2; border-bottom: none; padding-bottom: 0; } #Quality .quality_flex { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } #Quality .flex_go { display: flex; justify-content: space-between; gap: 10px; } #Quality .flex_go:not(:last-child) { margin-bottom: 15px; } #Quality .flex_go .harf img { width: 100%; } #Quality .harf48 .harf_flex { width: 48%; } #Quality .harf48 > div:not(:last-child) { margin-bottom: 20px; } #Quality .nomgn { margin-bottom: 0 !important; } /*----------------------------------------------------- Bathroom Section ----------------------------------------------------- */ #Quality #Bathroom_anchor { margin-bottom: 85px; } #Quality #Bathroom_anchor .head { margin-bottom: 20px; } #Quality #Bathroom_anchor .txt_area > p { text-align: center; } #Quality #Bathroom_anchor .flex { flex-wrap: wrap; } #Quality #Bathroom_anchor .flex_pc { display: flex; justify-content: space-between; gap: 10px; } #Quality .dressing, #Quality .toilet { margin-top: 100px; } #Quality .dressing .txt_area { text-align: center; } #Quality .dressing .item_wrap, #Quality .toilet .item_wrap { width: 48%; } #Quality .dressing .item_wrap > div { width: 100%; } #Quality .dressing .item, #Quality .toilet .item { margin-bottom: 15px; } #Quality picture.mahobin_logo { max-width: 150px; margin-left: auto; margin-right: 0; } #Quality picture.osoji_logo { max-width: 186px; margin-left: auto; margin-right: 0; } #Quality picture.haisuiko_logo { max-width: 141px; margin-left: auto; margin-right: 0; } /*----------------------------------------------------- Entrance Section ----------------------------------------------------- */ #Quality #Entrance_anchor { margin-bottom: 100px; } #Quality #Entrance_anchor .head { margin-bottom: 20px; } #Quality #Entrance_anchor .txt_area > p { text-align: center; } #Quality #Entrance_anchor picture.entrance_box02_img01 { max-width: 141px; width: 60%; margin-right: 0; margin-left: auto; } #Quality #Entrance_anchor picture.entrance_box02_img02 { max-width: 230px; width: 100%; margin: 0 auto; } /*----------------------------------------------------- Eco Section ----------------------------------------------------- */ #Quality #Eco_anchor { margin-bottom: 90px; } #Quality #Eco_anchor .head { margin-bottom: 20px; } #Quality #Eco_anchor .txt_area > p { text-align: center; } #Quality #Eco_anchor .item_wrap .item { margin-bottom: 0; } #Quality #Eco_anchor .item_wrap .item > div:first-child { margin-bottom: 40px; } #Quality .glas_wrap { background: url("../img/quality/others_bg.png") no-repeat; background-size: cover; width: 100%; height: 100%; padding: 40px; margin: 50px 0; box-sizing: border-box; } #Quality .glas_wrap p.glas_ttl { font-size: clamp(0.938rem, 0.781rem + 0.78vw, 1.563rem); line-height: 34px; text-align: center; color: #3B77AC; } #Quality .glas_wrap p.obi { background: #5f99bf; color: #FFFF8D; padding: 10px 0; font-size: clamp(0.938rem, 0.781rem + 0.78vw, 1.563rem); text-align: center; } #Quality .glas_wrap .obi_txt { margin-bottom: 20px; } #Quality .glas_wrap .others_img { max-width: 430px; } #Quality .glas_wrap .others_img01-2 { max-width: 270px; width: 48%; } #Quality .glas_wrap .txt_wrap { width: 50%; } #Quality .glas_wrap p.small_ttl { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); line-height: 22px; font-family: "A1ゴシック R"; color: #3B77AC; } #Quality .glas_wrap .glas_wrap_syanetu_img { width: 100%; } #Quality picture.others_img04_last { margin: 10px 0; } #Quality .cp_wrap { background: #fff; padding: 20px; margin: 30px 0 0; box-shadow: 0px 0px 30px -5px #a2c2df; } #Quality .cp_wrap p.cp_ttl { font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem); } #Quality .cp_wrap .flex_mark { display: flex; justify-content: space-between; align-items: center; } #Quality .glas_wrap img.mark { max-width: 85px; margin-left: 20px; } #Quality .cp_wrap .image_flex { width: 50%; } #Quality .cp_wrap .flex_harf { width: 48%; } #Quality .point_wrap { background: #ffffe7; padding: 30px; margin-bottom: 20px; } #Quality .point_wrap p.point_ttl { font-size: 24px; font-family: "A1ゴシック R"; position: relative; display: inline-block; color: #109342; } #Quality .point_wrap p.point_ttl::before { position: absolute; content: ''; display: inline-block; left: -20px; top: -5px; width: 3px; height: 150%; background: #109342; border-radius: 3px; transform: rotate(-25deg); } #Quality .point_wrap p.point_ttl::after { position: absolute; content: ''; display: inline-block; right: -15px; top: -5px; width: 3px; height: 150%; background: #109342; border-radius: 3px; transform: rotate(25deg); } #Quality .point_wrap .flex p.point_sec_ttl { line-height: 20px; padding-bottom: 5px; border-bottom: 1px solid #109342; margin-bottom: 10px; } #Quality .point_wrap .harf { position: relative; width: 45%; } #Quality .point_wrap .harf:first-child::after { position: absolute; content: ''; background: url("../img/quality/others_arrow.svg") no-repeat; width: 42px; height: 55px; display: inline-block; background-size: contain; top: 160px; right: -60px; } #Quality .point_wrap p.mark_ttl { font-family: "A1ゴシック R"; line-height: 25px; color: #109342; text-align: center; font-size: clamp(0.813rem, 0.583rem + 0.98vw, 1.563rem); } #Quality .point_wrap .mark_wrap { max-width: 700px; margin: 0 auto; } #Quality .point_wrap .mark { max-width: 100px; width: 100%; margin-right: 20px; } #Quality .point_wrap .mark_wrap .txt_wrap { width: 100%; } #Quality .point_wrap p.txt_ttl { font-family: "A1ゴシック R"; font-size: clamp(0.813rem, 0.755rem + 0.24vw, 1rem); } #Quality .point_wrap .mark_wrap .txt_ttl { font-weight: 500; color: #109342; line-height: 18px; } #Quality .point_wrap span.orange { font-size: clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); color: #e8494a; text-decoration: underline; } #Quality .point_last { text-align: center; } #Quality .point_last picture { max-width: 450px; margin: 0 auto; } /*----------------------------------------------------- Others Section ----------------------------------------------------- */ #Quality #Others_anchor { margin-bottom: 100px; } #Earthquake_anchor .con_txt_wrap { margin-right: 0; margin-bottom: 10px; } /*----------------------------------------------------- Structure & Guarantee Section ----------------------------------------------------- */ #Quality ul.menu02 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 25px; max-width: 800px; margin: 45px auto 85px; width: 90%; } #Quality ul.menu02 li { transition: 0.3s ease-in-out; cursor: pointer; width: 115px; height: 115px; position: relative; } #Quality ul.menu02 li img { height: auto; left: 0; position: absolute; width: 100%; transition: opacity 0.4s ease; } #Quality ul.menu02 .swap-img img.normal { opacity: 1; z-index: 1; } #Quality ul.menu02 .swap-img img.hover { opacity: 0; z-index: 2; } @media (hover: hover) { #Quality ul.menu02 .swap-img:hover img.normal { opacity: 0; } #Quality ul.menu02 .swap-img:hover img.hover { opacity: 1; } } @media (hover: none) { #Quality ul.menu02 .swap-img img.normal { opacity: 0; } #Quality ul.menu02 .swap-img img.hover { opacity: 1; } } #Quality #Structure_anchor p.sec_txt { margin-bottom: 20px!important; } #Quality #Structure_anchor .kozo .intro, #Structure_anchor .blk .intro { text-align: center; margin-bottom: 70px; } #Quality #Structure_anchor .lead { display: flex; align-items: center; width: 100%; height: 482px; } #Quality #Structure_anchor .menu02_ttlblock { position: absolute; left: 15%; } #Quality #Structure_anchor .lead_ttl { font-size: clamp(1.25rem, 1.172rem + 0.39vw, 1.563rem); text-align: center; margin-bottom: 55px; } #Quality #Structure_anchor .lead_ttl span { font-size: clamp(1.688rem, 1.563rem + 0.63vw, 2.188rem); } #Quality #Structure_anchor .lead_txt { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); text-align: center; margin-bottom: 80px; } #Quality #Structure_anchor .contents { background: #f0f0ea; padding: 60px 0; overflow: hidden; } #Quality #Structure_anchor .contents p.ttl { font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); line-height: 1.3; margin-bottom: 10px; } #Quality #Structure_anchor .contents p.ttl span.big { font-size: clamp(1.688rem, 1.578rem + 0.55vw, 2.125rem); } #Quality #Structure_anchor .contents p.txt { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); } #Quality span.red { color: #e8494a; } #Quality #Structure_anchor .lead_box { background: #fff; } #Quality #Structure_anchor .lead_box .lead_box_inner { padding: 50px; box-sizing: border-box; } #Quality #Structure_anchor .lead_box .lead_box_inner .contents_flex { display: flex; justify-content: space-between; gap: 30px; } #Quality #Structure_anchor .lead_box .txt_wrap { width: calc(100% - 375px); } #Quality #Structure_anchor .lead_box .lead_box_inner picture { max-width: 375px; width: 100%; } #Quality #Structure_anchor .lead_box .txt_wrap div:not(:last-child) { margin-bottom: 20px; } /* Earthquake-resistant */ #Quality #Earthquake-resistant .lead { background: url("../img/quality/earthquake-resistant_bg.png") no-repeat; background-size: cover; background-position: right center; } #Quality #Earthquake-resistant .contents { background: #f0f0ea; padding: 60px 0; overflow: hidden; } #Quality #Earthquake-resistant .earthquake-resistant_intro01 { margin-bottom: 55px; } #Quality #Earthquake-resistant .earthquake-resistant_intro02 { margin-bottom: 30px; } #Quality #Earthquake-resistant .contents.bf { background: #e1e1e1; } #Quality #Earthquake-resistant .bf_obi { background: #323232; width: 100%; padding: 30px 5%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } #Quality #Earthquake-resistant .bf_obi picture { max-width: 457px; width: 100%; } #Quality #Earthquake-resistant .bf .contents_flex { display: flex; justify-content: space-between; margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px solid #323232; } #Quality #Earthquake-resistant .bf .contents_flex > div { width: 48%; } #Quality #Earthquake-resistant .bf .contents_flex .column { display: flex; flex-direction: column; } #Quality #Earthquake-resistant .bf .contents_flex .column picture { margin-top: auto; margin-bottom: 20px; } #Quality #Earthquake-resistant .bf .sec03.contents_flex { flex-direction: row-reverse; } #Quality #Earthquake-resistant .bf .sec04 .contents_flex { margin-bottom: 30px; padding-bottom: 0; border-bottom: none; flex-direction: row-reverse; } #Quality #Earthquake-resistant .bf .sec04 .bf_sec04_img { margin-bottom: 20px; } /* Fire-resistance */ #Quality #Fire-resistance .lead { background: url("../img/quality/fireresistance_bg.png") no-repeat; background-size: cover; background-position: right center; } #Quality #Fire-resistance .lead_box { margin-bottom: 50px; } #Quality #Fire-resistance .lead_box .contents_flex { border-bottom: 1px solid #323232; margin-bottom: 60px; padding-bottom: 60px; } #Quality #Fire-resistance .lead_box .contents_flex:nth-child(even) { flex-direction: row-reverse; border-bottom: none; margin-bottom: 0; padding-bottom: 0; } #Quality #Fire-resistance .contents_flex { display: flex; justify-content: space-between; } #Quality #Fire-resistance .contents_flex > div { width: 48%; } #Quality #Structure_anchor .sec02 .head_border { padding: 15px 25px; border-top: 1px solid #3c3c3c; border-bottom: 1px solid #3c3c3c; font-size: clamp(1.25rem, 1.094rem + 0.78vw, 1.875rem); margin-bottom: 50px; } #Quality #Structure_anchor .sec02 .contents_flex { display: flex; justify-content: space-between; } #Quality #Fire-resistance .sec02 { margin-bottom: 50px; } #Quality #Fire-resistance .sec03_ttl { text-align: center; color: #fff; background: #716864; padding: 5px; box-sizing: border-box; margin-bottom: 35px; font-size: clamp(1.125rem, 1.063rem + 0.31vw, 1.375rem); letter-spacing: .2em; } #Quality #Fire-resistance .sansyutu { padding: 20px 40px; background: #fff; margin-top: 20px; } #Quality #Fire-resistance .sansyutu p.sansyutu_ttl { font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); text-align: center; margin-bottom: 10px; border-bottom: 1px solid #3c3c3c; padding-bottom: 10px; } #Quality #Fire-resistance .sansyutu .sansyutu_flex { display: flex; justify-content: space-between; margin-bottom: 30px; gap: 20px; } #Quality #Fire-resistance .sansyutu p.sansyutu_subttl { font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); } #Quality #Fire-resistance .sansyutu p.sansyutu_subtxt { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); } #Quality #Fire-resistance .sansyutu p.annotation { font-size: clamp(0.625rem, 0.594rem + 0.16vw, 0.75rem); font-family: var(--gothic-font); margin-top: 30px; } /* Durability */ #Quality #Durability .lead { background: url("../img/quality/durability_bg.png") no-repeat; background-size: cover; background-position: right center; } #Quality #Durability .lead_ttl { margin-bottom: 0; } #Quality #Durability .ls30_wrapper { background: #f0f0ea; padding: 0 0 60px; } #Quality #Durability .ls30 { background: #fff; padding: 50px 0; } #Quality #Durability .ls30 .durability_intro { max-width: 730px; margin: 0 auto 30px; } #Quality #Durability .ls30 p.txt { text-align: center; font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); } #Quality .contents_whitebox_wrapper { padding: 60px 0 0; background: #f0f0ea; } #Quality .contents_whitebox_wrapper .ttl { text-align: center; font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); margin-bottom: 60px; } #Quality .contents_whitebox { background: #fff; padding: 30px; box-sizing: border-box; } #Quality .contens_ttl_flex { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; } #Quality .contens_ttl_flex img { max-width: 130px; } #Quality .contens_ttl_flex p.contens_ttl { font-size: clamp(1.125rem, 0.859rem + 1.33vw, 2.188rem); } #Quality #Durability .yane { margin-bottom: 60px; } #Quality #Durability .contents_inner_flex { display: flex; justify-content: space-between; gap: 10px; } #Quality #Durability .contents_inner_flex .durability_yane_ls30 { max-width: 80px; } #Quality #Durability .durability_yane_img p { font-size: 30px; margin-bottom: 10px; } #Quality #Durability .durability_yane_img picture { max-width: 435px; width: 100%; } #Quality #Durability .contents_inner_flex .txt_wrap { max-width: 285px; width: 100%; } #Quality #Durability .contents_inner_flex .ttl { text-align: left; margin-bottom: 20px; } #Quality #Durability .durability_ari_img { margin-bottom: 20px; } #Quality #Durability .durability_ari_img picture { margin-bottom: 10px; } /* Thermal */ #Quality #Thermal .lead { background: url("../img/quality/thermal_bg.png") no-repeat; background-size: cover; background-position: right center; } #Quality #Thermal .intro_flex { display: flex; justify-content: center; gap: 40px; margin-bottom: 65px; } #Quality #Thermal .intro_flex picture { max-width: 425px; width: 100%; } #Quality #Thermal .intro_flex p.ttl { font-size: clamp(1.25rem, 1.141rem + 0.55vw, 1.688rem); } #Quality #Thermal .intro_flex p.ttl span { font-size: clamp(1.688rem, 1.484rem + 1.02vw, 2.5rem); } #Quality #Thermal .intro_flex p.txt20 { font-size: 20px; } #Quality #Thermal picture.thermal_main_ttl { max-width: 445px; margin: 0 auto 60px; } #Quality #Thermal picture.thermal_main { width: 100vw; margin: 0 calc(50% - 50vw) 70px; } #Quality #Thermal picture.thermal_sec_ttl { max-width: 750px; margin: 0 auto 40px; } #Quality #Thermal .sec { max-width: 900px; width: 100%; margin: 0 auto 65px; background: #fff; } #Quality #Thermal .sec:last-child { margin-bottom: 0; } #Quality #Thermal .sec_inner { max-width: 800px; padding: 50px; } #Quality #Thermal .sec.sec01 .sec_inner { padding-bottom: 20px; } #Quality #Thermal .sec_ttl { display: flex; align-items: stretch; margin-bottom: 35px; } #Quality #Thermal .sec_ttl p.num { font-size: clamp(1.5rem, 0.938rem + 2.81vw, 3.75rem); background: var(--emeraldgreen-color); text-align: center; width: 95px; height: 95px; color: #fff; display: flex; align-items: center; justify-content: center; } #Quality #Thermal .sec_ttl p.ttl { font-size: clamp(1.125rem, 0.906rem + 1.09vw, 2rem); background: #d6ebe0; margin-bottom: 0; width: 100%; display: flex; align-items: center; padding-left: 30px; box-sizing: border-box; } #Quality #Thermal .sec .sec_txt { font-size: clamp(1rem, 0.891rem + 0.55vw, 1.438rem); } #Quality #Thermal .sec picture.thermal_sec03_img01 { margin-bottom: 50px; } #Quality #Thermal .sec04 { max-width: 900px; margin: 0 auto; } #Quality #Thermal .sec04 article:not(:last-child) { margin-bottom: 50px; } #Quality #Thermal .sec04 .sec04_ttl { font-size: clamp(1.5rem, 1.328rem + 0.86vw, 2.188rem); margin-bottom: 30px; } #Quality #Thermal .sec04 .txt20 { margin-bottom: 40px; } #Quality #Thermal .sec04 picture.thermal_sec04_img01 { margin-bottom: 40px; } #Quality #Thermal .sec04 .features { display: flex; gap: 10px; justify-content: space-between; } #Quality #Thermal .sec04 .features_box { width: calc(90% / 3); position: relative; } #Quality #Thermal .sec04 .features_box:not(:last-child)::after { content: ''; width: 4px; height: 100%; position: absolute; top: 0; right: -9%; background-image: radial-gradient(circle, #666 2px, transparent 2px); background-repeat: repeat-y; background-size: 4px 12px; } #Quality #Thermal .sec04 .features_box .features_icon { max-width: 105px; margin: 0 auto 10px; } #Quality #Thermal .sec04 p.features_ttl { font-size: clamp(1.125rem, 1.063rem + 0.31vw, 1.375rem); margin-bottom: 10px; } /* 60-Years Guarantee */ #Quality #Years60 .lead { background: url("../img/quality/years60_bg.png") no-repeat; background-size: cover; background-position: right bottom; } #Quality #Years60 .contents { background: #f0f0ea; padding: 60px 0; overflow: hidden; padding-bottom: 180px; } #Quality #Years60 .contents_whitebox_wrapper { padding-top: 0; } #Quality #Years60 .contents_whitebox { margin-bottom: 130px; } #Quality #Years60 .years60_hosyo_img { margin: 40px 0 20px; } #Quality #Years60 .after_service_img { max-width: 270px; width: 100%; margin: 0 auto 30px; } #Quality #Years60 .obi { text-align: center; color: #fff; background: var(--blown-color); padding: 15px; box-sizing: border-box; font-size: clamp(1.125rem, 1.031rem + 0.47vw, 1.5rem); margin-bottom: 25px; line-height: 1; } #Quality #Years60 p.af_txt01 { text-align: center; font-size: clamp(1.688rem, 1.563rem + 0.63vw, 2.188rem); margin-bottom: 25px; line-height: 1; } #Quality #Years60 p.af_txt02 { text-align: center; } #Quality #Years60 .years60_af { margin: 35px 0; } /*----------------------------------------------------- Map & Outline ----------------------------------------------------- */ #Map { margin: 90px 0 170px; } #Map #main { margin-bottom: 80px; padding-top: 80px; } #Map #main.pages { background: #fafaf9; margin-bottom: 140px; } #Map .head { text-align: center; } #Map p.ttl { font-size: clamp(0.938rem, 0.752rem + 0.93vw, 1.563rem); letter-spacing: .2em; color: #BB915C; margin-bottom: 100px; border-bottom: 1px solid #BB915C; display: inline-block; padding-bottom: 5px; } #Map h3 { font-size: clamp(1.25rem, 1.172rem + 0.39vw, 1.563rem); text-align: center; margin-bottom: 90px; color: var(--green-color); } #Map .address { display: flex; align-items: center; background: #fff; font-size: clamp(0.813rem, 0.688rem + 0.63vw, 1.313rem); color: #3c3c3c; margin-bottom: 80px; border: 1px solid #f4edd8; box-sizing: border-box; } #Map .address picture { max-width: 546px; width: 50%; } #Map .address p { width: 50%; font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); text-align: center; } #Map .map_img01 { max-width: 1000px; margin: 0 auto 10px; } #Map .btn_wrap { max-width: 600px; margin: 0 auto 90px; } #Map .btn_wrap .flex { display: flex; justify-content: space-between; gap: 40px; } #Map .btn_wrap a.btn { max-width: 280px; width: 100%; font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); transition: 0.3s ease-in-out; background: var(--green-color); color: #fff; padding: 20px 30px; text-align: center; } #Map .btn_wrap a.btn:hover { opacity: .6; } #Map .btn_wrap p.btn_ttl { font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); text-align: center; margin-bottom: 15px; } /* Outline */ #Outline { margin-bottom: 140px; } #Outline [data-size="w900"] { width: 90%; margin-bottom: 130px; } #Outline .h3_wrap { display: block; text-align: center; } #Outline h3{ font-size:clamp(1.25rem, 1.172rem + 0.39vw, 1.563rem); text-align:center; margin:0 0 60px; color:var(--green-color); } #Outline h4 { color: #464646; letter-spacing: 0; margin-bottom: 15px; font-size: clamp(0.813rem, 0.64rem + 0.73vw, 1.375rem); text-align: center; } #Outline table { width: 100%; margin-bottom: 70px; border-collapse: collapse; border-top: 1px solid #b8a395; color: #464646; } #Outline table:nth-of-type(2) { margin-bottom: 20px; } #Outline table tr{ border-bottom:1px solid #b8a395; } #Outline table th{ background:#f4edd8; width:30%; padding:10px 20px; font-weight:normal; font-size: clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); box-sizing: border-box; } #Outline table td{ padding: 5px 20px; font-size:clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); line-height:26px; } #Outline .date { font-size:clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); line-height:26px; text-align: right; } #Outline .btn{ width: 280px; background: #B08F71; color: #fff; text-align: center; font-size: clamp(1rem, 0.87rem + 0.65vw, 1.438rem); padding: 20px 0; display:block; margin:0 auto; transition: .5s; } #Outline .btn:hover { opacity: .5; } #Outline .yokoku { margin-bottom: 50px; display: flex; justify-content: space-between; } #Outline .yokoku p.ttl { text-align: center; font-size: clamp(0.813rem, 0.672rem + 0.7vw, 1.375rem); border: 1px solid #464646; display: flex; justify-content: center; align-items: center; width: 240px; margin-right: 20px; } #Outline .yokoku p { width: calc(100% - 170px); font-size: clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); line-height: 25px; } /*----------------------------------------------------- Location ----------------------------------------------------- */ #Location .head_area { background: url("../img/location/head.png")no-repeat; background-size: cover; background-position: center; margin-bottom: 0; } #Location .head_area h3 img { max-width: 450px; width: 100%; } #Location .pages .intro::before { content: ''; display: block; background: url("../img/location/intro_bg.png")no-repeat; background-size: cover; width: 100%; min-height: 550px; z-index: -1; position: absolute; } #Location .pages .intro_inner { padding-top: 110px; } #Location .anchor_menu_wrap { background: #F9F6EB; padding: 40px 0; } #Location ul.menu { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 25px; } #Location ul.menu.column4 { margin-bottom: 25px; } #Location ul.menu.column4 li { width: calc(100% / 4 - 20px); } #Location ul.menu.column3 li { width: calc(100% / 3 - 20px); } #Location ul.menu li { width: calc(100% / 3 - 20px); display: flex; align-items: center; justify-content: center; transition: 0.3s ease-in-out; background: var(--blown-color); } #Location ul.menu li:hover { background: #4c1b05; } #Location ul.menu li.current { background: var(--emeraldgreen-color); } #Location ul.menu li a { width: 100%; padding: 15px; display: block; text-align: center; color: #fff; font-size: clamp(1rem, 0.938rem + 0.31vw, 1.25rem); } #Location .mgn60 { margin-bottom: 60px; } #Location .txt15 { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); } #Location .txt23 { font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); } #Location #Access_anchor .anchor_obi { background: #B7E6D9; } #Location .anchor_obi { background: #F4EDD8; overflow: hidden; height: 250px; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 100px; } #Location .anchor_obi picture.ph { max-width: 280px; position: absolute; top: 0; } #Location .anchor_obi picture.leaf { max-width: 230px; position: absolute; right: 0; } #Location .anchor_obi h4 { font-size: clamp(1.188rem, 0.984rem + 1.02vw, 2rem); text-align: center; color: var(--blown-color); z-index: 1; position: relative; } #Location .anchor_obi h4 span { font-size: clamp(0.75rem, 0.688rem + 0.31vw, 1rem); display: block; } #Location #Access_anchor .anchor_intro { display: flex; justify-content: space-between; gap: 50px; margin-bottom: 100px; } #Location .anchor_intro .txt_wrap { width: 30em; } #Location .anchor_intro picture { max-width: 565px; width: 100%; } #Location .sec { margin-bottom: 100px; } #Location .anchor_intro .txt23 { margin-bottom: 30px; } #Location .head { margin-bottom: 60px; } #Location .sec_ttl { font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); margin-bottom: 60px; text-align: center; } #Location .train .train_img01 { margin-bottom: 60px; } #Location .car .car_img01 { margin-bottom: 60px; } #Location #Shopping_anchor .anchor_obi { margin-bottom: 60px; } #Location #Shopping_anchor .info_open .open_txt { max-width: 545px; width: 100%; margin: 0 auto 30px; } #Location .anchor_inner .flex { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 30px; flex-wrap: wrap; } #Location .anchor_inner .flex .box { width: calc(100% / 2 - 20px); } #Location .anchor_inner .sp_flex { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 60px; } #Location .anchor_inner .sp_flex .box { width: calc(92% / 3); margin-bottom: 30px; } #Location .anchor_inner .sp_flex::after { content: ''; display: block; width: calc(92% / 3); } #Location .anchor_inner .ph { margin-bottom: 10px; } #Location .anchor_inner { margin-bottom: 140px; position: relative; } #Location .anchor_inner .txt23 { text-align: center; margin-bottom: 40px; } #Location .pages .intro .txt_wrap, #Location .pages .intro .ph_wrap { position: relative; } #Location .pages .intro .txt_wrap::before { content: ''; display: block; position: absolute; background: url("../img/location/intro_leaf01.png")no-repeat; width: 100px; height: 54px; background-size: contain; z-index: -1; left: -30%; top: -5%; } #Location .pages .intro .txt_wrap::after { content: ''; display: block; position: absolute; background: url("../img/location/intro_leaf03.png")no-repeat; width: 173px; height: 77px; background-size: contain; z-index: -1; bottom: -3%; left: 4%; } #Location .pages .intro .ph_wrap::after { content: ''; display: block; position: absolute; background: url("../img/location/intro_leaf02.png")no-repeat; width: 55px; height: 22px; background-size: contain; z-index: -1; right: -30%; bottom: -5%; } #Location #Park_anchor .anchor_inner .txt23 { color: #fff; } #Location #Park_anchor [data-size="w900"] { padding: 60px 0; } #Location #Park_anchor .park_contents { background: #a8d4b891; } #Location #Park_anchor .park_contents_ttl { text-align: center; font-size: clamp(1.125rem, 1.047rem + 0.39vw, 1.438rem); margin-bottom: 40px; } #Location #Park_anchor .anchor_inner { margin-bottom: 0; } #Location #Park_anchor .park_contents_flex { display: flex; justify-content: space-between; } #Location #Park_anchor .park_contents_flex:not(:last-child) { margin-bottom: 90px; } #Location #Park_anchor .park_contents_inner { padding: 60px 40px; } #Location #Park_anchor .leftbox, #Location #Park_anchor .rightbox { width: 48%; } #Location #Park_anchor .leftbox .phwrap { margin-bottom: 40px; } #Location #Park_anchor .rightbox { background: #fff; padding: 50px; box-sizing: border-box; } #Location #Park_anchor .rightbox .subimg_ttl { font-size: clamp(0.938rem, 0.891rem + 0.23vw, 1.125rem); color: var(--blown-color); } #Location #Park_anchor .rightbox .txt12 { font-size: clamp(0.625rem, 0.594rem + 0.16vw, 0.75rem); } #Location #Park_anchor .rightbox article:not(:last-child) { margin-bottom: 30px; } #Location #Park_anchor .anchor_obi { margin-bottom: 0; } #Location #Park_anchor .anchor_inner::before { content: ''; display: block; background: url("../img/location/park_bg01.png")no-repeat; background-size: cover; width: 100%; height: 800px; z-index: -1; position: absolute; } #Location #Park_anchor .anchor_inner::after { content: ''; display: block; background: url("../img/location/park_bg02.png")no-repeat; background-size: cover; width: 100%; height: 800px; z-index: -1; position: absolute; bottom: 0; background-position: bottom; } #Location #Life_anchor { max-width: 700px; width: 90%; margin: 0 auto; } #Location #Life_anchor .life_ttl { font-size: clamp(1.625rem, 1.531rem + 0.47vw, 2rem); text-align: center; margin-bottom: 20px; color: var(--blown-color); position: relative; } #Location #Life_anchor .life_ttl::after { content: ''; display: block; background: url("../img/location/life_leaf.png")no-repeat; width: 173px; height: 47px; background-size: contain; position: absolute; right: -10%; top: 10%; } #Location #Life_anchor .category-title { margin-bottom: 10px; border-bottom: 2px solid; font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); } #Location #Life_anchor .items-list { flex: 1; } #Location #Life_anchor .item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e7e7e7; font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); gap: 30px; } #Location #Life_anchor .items-list .item:last-child { border-bottom: none; } #Location #Life_anchor .item-details { text-align: right; white-space: nowrap; flex-shrink: 0; } #Location #Life_anchor .info-section { margin-bottom: 40px; } #Location #Life_anchor .item-name { line-height: 1.4; } #Location #Park_anchor .anchor_inner { position: relative; } #Location #Park_anchor .anchor_inner p.annotation { position: absolute; right: 5%; bottom: 1%; color: #fff; } /* .bc-iframe, .bc-iframe body, .bc-player-default_default, .bc-player-default_default .vjs-poster { background-color: #151B17; } .vjs-control-bar,.vjs-dock-text { display: none !important; } */ @media print { header , footer { display: none!important; } } /*ノートPC*/ @media (max-width: 1600px) and (max-height: 900px) { } /*DynaBook*/ @media (max-width: 1263px) and (max-height: 569px) { } @media only screen and (max-width: 1023px){ .tab { display: block; } #Index #main { padding-top: 0; top: 0; } #Index .yokoku_wrap { width: 100%; } #Index .point_area_txt { margin: 30px auto 40px; } #Index nav.localnav #menu01 a, #Outline nav.localnav #menu02 a, #Plan nav.localnav #menu03 a, #Location nav.localnav #menu04 a, #Quality nav.localnav #menu05 a { background: #f4edd8; } #Location .pages .intro .ph_wrap::after { right: 0; } } @media only screen and (max-width: 980px){ } @media only screen and (max-width: 834px){ #Index .kv_inner { width: 100vw; margin: 0 calc(50% - 50vw); } } @media only screen and (max-width: 700px){ #Index .kv { background: url(../img/top/kv_bg_sp.png) no-repeat; background-size: 100%; } #Index .kv_inner { padding-top: 180px; } } /*　600pxからレスポンシブ*/ @media only screen and (max-width: 600px){ .pc { display: none; } .sp { display: block; } .annotation { line-height: 16px; } .mgn10 { margin-bottom: 5px; } #main { top: 8px; padding-top: 50px; } #main.pages { overflow: hidden; padding-top: 0; padding-bottom: 0; margin-bottom: 150px; top: 0; } #Index .yokoku_wrap .yokoku_inner { display: block; } #Index .yokoku_wrap .yokoku_inner p.ttl { width: 100%; margin-right: 0; margin-bottom: 5px; } #Index .information h3 img { width: 51%; margin-bottom: 30px; } #Index .information dl div { justify-content: flex-start; line-height: 1.4; } #Index .information dl div:not(:last-child) { gap: 5px; } #Index .information { padding: 40px 0 50px; } #Index .kv_inner { padding-top: 200px; } #Index .point_area_ttl { margin-bottom: 20px; line-height: 1.1; } #Index .point_area_txt { margin-top: 60px; } #Index .point_area_img { padding: 40px 5%; } #Index .cv_area .cv_area_ttl { font-size: clamp(2.188rem, 1.797rem + 1.95vw, 3.75rem); margin-bottom: 20px; } #Index .cv_area { padding: 40px 5%; } #Index .cv_area .cv_btn a { padding: 15px 5%; } #Index .concept_area .concept_txt_wrap { padding: 40px 20px; } #Index .concept_area .concept_txt { text-align: left; } #Index .contents .landplan .txt_wrap h4 img { max-width: 255px; margin-bottom: 10px; } #Index .contents .location .txt_wrap h4 img { max-width: 205px; margin-bottom: 10px; } #Index .contents .quality .txt_wrap h4 img { max-width: 90px; margin-bottom: 10px; } #Index .contents .txt_wrap h4, #Index .contents .txt_wrap p.contents_txt { margin-bottom: 20px; line-height: 26px; } #Index .contents { margin-bottom: 120px; } #Index .cv a.link_btn span::after { width: 5%; margin-left: 5px; vertical-align: -1px; } #Index .concept_area_logo_wrap p.kv_logo_copy { line-height: 22px; } #Index .contents .gallery .txt_wrap h4 img { max-width: 87px; margin-bottom: 10px; } #Index .information dl { height: 100px; } #Index .information p.info_txt { text-align: left; } #Index .concept_area { background: url(../img/top/concept_bg_sp.png) no-repeat; padding: 40px 0 280px; background-size: cover; background-position: bottom; min-height: inherit; } #Index .concept_area h3 img { width: 29%; margin-bottom: 30px; } #Index .concept_area .concept_txt_wrap .img01 { position: initial; max-width: initial; width: 100%; margin: 30px auto 0; } #Index .contents_area { padding: 40px 0; } #Index .contents_area h3 img { width: 32%; margin-bottom: 40px; } #Index .contents_links_txtarea { display: none; } #Index .contents_links.plan, #Index .contents_links.access, #Index .contents_links.quality { height: initial; background: initial; padding: 0; } #Index .contents_links_sp { box-shadow: 5px 5px 7px 0px rgba(0, 0, 0, 0.2); } #Index .contents_links:not(:last-child) { margin-bottom: 40px; } #Index .contents_links_wrap { margin-bottom: 50px; } .pages .head_area { height: 120px; margin-bottom: 50px; } .pages .head_area h3 img { margin: 0 auto 3px; } .pages .head_area h3 { max-width: 200px; width: 100%; padding: 10px 20px; } .pages .intro { flex-wrap: wrap; margin-bottom: 0; } .pages .intro_inner { display: block; } .pages .intro .txt_wrap , .pages .intro .ph_wrap { width: 100%; margin-bottom: 50px; } .pages .intro p.intro_ttl { line-height: 35px; margin-bottom: 20px; } .pages .intro p.txt { line-height: 26px; } .pages .intro_inner::before { width: 70px; height: 24px; top: -3%; left: 0; } .floor_kind_wrap { flex-wrap: wrap; } .floor_kind_wrap .kind_item { width: 100%; } .floor_kind_wrap .kind_item:not(:first-of-type) .txt_wrap::before{ content: none; } .floor_kind_wrap .kind_item:not(:last-child) { margin-bottom: 20px; } #Plan h3 img { max-width: 68px; } #Plan ul.menu { padding: 40px 0; gap: 15px; } #Plan ul.menu li { width: calc(100% / 3 - 10px); } #Plan .anchor_ttl { margin-bottom: 10px; } #Plan #Location_anchor { background: url("../img/plan/location_bg_sp.png")no-repeat; background-size: cover; padding: 40px 0 280px; margin-bottom: 40px; min-height: inherit; } #Plan #Location_anchor .txt_wrap, #Plan .txt_wrap { margin-bottom: 15px; } #Plan #House_anchor { padding: 0 0 40px; } #Plan .landscape { margin-bottom: 80px; } #Plan #House_anchor .parth01 , #Plan #House_anchor .parth02 { margin-bottom: 20px; } #Plan .landscape::before { top: 0; width: 76px; height: 110px; } #Plan .landscape::after { bottom: 25%; width: 105px; height: 145px; } #Plan #House_anchor .parth01:after { width: 93px; height: 235px; bottom: 50%; } #Plan #House_anchor .parth02:before { width: 100px; top: -20%; } #Plan #House_anchor .trees { padding: 40px 0; } #Plan #House_anchor .trees picture { margin-bottom: 15px; } #Plan .floor_kind_wrap { margin-bottom: 40px; } #Plan #House_anchor .beam_ph { margin-bottom: 30px; } #Plan .beam_bnr { padding: 40px 0; margin-top: 40px; } #Plan #Madori_anchor { margin-bottom: 40px; } #Plan #Madori_anchor .anchor_ttl { margin-bottom: 30px; } #Plan #Madori_anchor .madori_intro { padding: 30px 20px; margin-bottom: 40px; } #Plan #Madori_anchor .madori_intro::before { right: -5px; top: -5px; } #Plan #Madori_anchor .madori_intro::after { right: 5px; top: 5px; } #Plan #Madori_anchor .madori_intro .pickup { width: 40%; margin: 0 auto 20px; } #Plan #Madori_anchor .pickup_flex { display: block; } #Plan #Madori_anchor .pickup_img { margin: 0 auto 20px; } #Plan #Madori_anchor .pickup_txt { margin-bottom: 20px; } #Plan .plan { padding: 20px 0; } #Plan .plan:nth-child(even) { border-top: none; } #Plan .plan_ttl_flex { display: block; } #Plan .plan_ttl_flex img { max-width: 120px; margin-bottom: 10px; } #Plan .plan .point, #Plan .plan .madori { margin-bottom: 40px; } #Plan .plan_option { display: block; } #Plan .plan_option .floor { max-width: initial; margin-bottom: 20px; } #Plan .plan_option .txt_wrap { padding: 15px 10px; } #Plan .plan_option .floor_ttl { line-height: 1; } #Plan .plan_option .floor_ttl span:first-child { margin-bottom: 5px; } #Plan .plan_option .icon { max-width: inherit; margin: 0 auto; } #Plan .bnr_link { padding: 30px 0 40px; } #Plan .bnr_link .bnr_link_inner .bnr_link_ttl { margin-bottom: 10px; } #Location .pages .intro_inner { padding-top: 50px; } #Location .head_area h3 img { max-width: 250px; } #Location ul.menu.column4 li { width: 100%; } #Location ul.menu.column4 { margin-bottom: 10px; } #Location ul.menu { gap: 10px; } #Location ul.menu.column3 li { width: calc(100% / 2 - 5px); } #Location .anchor_obi { height: 120px; margin-bottom: 40px; } #Location .anchor_obi picture.ph { max-width: 135px; } #Location .anchor_obi h4 { left: 20%; line-height: 1.1; } #Location .anchor_obi h4 span { margin-top: 3px; } #Location .anchor_obi picture.leaf { max-width: 70px; bottom: 10px; } #Location #Access_anchor .anchor_intro { display: block; margin-bottom: 50px; } #Location .anchor_intro .txt_wrap { width: 100%; margin-bottom: 20px; } #Location #Life_anchor .info-section { flex-direction: column; border-bottom: none; margin-bottom: 20px; } #Location #Life_anchor .category-title { width: 100%; border-right: none; border-bottom: 2px solid #333; background-color: transparent; padding: 10px 5px; box-sizing: border-box; } #Location #Life_anchor .item { display: block; padding: 10px 5px; } #Location #Life_anchor .item-details { display: block; padding-top: 4px; } #Location .head { width: 100vw; margin: 0 calc(50% - 50vw) 40px; } #Location .sec_ttl { margin-bottom: 30px; text-align: left; } #Location .sec { margin-bottom: 40px; } #Location .car .car_img01 { margin-bottom: 20px; } #Location #Shopping_anchor .anchor_obi { margin-bottom: 40px; } #Location .anchor_inner .txt23 { text-align: left; margin-bottom: 20px; } #Location .anchor_inner .flex { display: block; } #Location .anchor_inner .flex .box { width: 100%; margin-bottom: 20px; } #Location .anchor_inner .sp_flex .box { width: calc(94% / 2); } #Location .anchor_inner .sp_flex { gap: 15px; margin-bottom: 20px; } #Location .anchor_inner { margin-bottom: 40px; } #Location .anchor_inner .sp_flex::after { width: calc(94% / 2); } #Location #Park_anchor .anchor_inner p.annotation { bottom: 0; } #Location #Park_anchor [data-size="w900"] { padding: 40px 0; } #Location #Park_anchor .park_contents_inner { padding: 30px 20px; } #Location #Park_anchor .park_contents_flex { display: block; } #Location #Park_anchor .leftbox, #Location #Park_anchor .rightbox { width: 100%; } #Location #Park_anchor .park_contents_ttl { margin-bottom: 20px; } #Location #Park_anchor .leftbox { margin-bottom: 30px; } #Location #Park_anchor .rightbox { padding: 40px; } #Location #Park_anchor .leftbox .phwrap { margin-bottom: 30px; } #Location #Park_anchor .park_contents_flex:not(:last-child) { margin-bottom: 40px; } #Location ul.menu li a { line-height: 1.2; } #Location #Life_anchor .life_ttl::after { width: 83px; height: 22px; right: 0; top: 80%; } #Location .train .train_img01 > img { max-width: initial; width: initial; height: 370px; } #Access .intro { margin-bottom: 0; } #Access .head_area { background: url("../img/access/head_sp.png")no-repeat; background-size: cover; background-position: bottom right; } #Access h3 img { width: 132px; } #Access .intro .flex { margin-bottom: 50px; } #Access .mark img.train { width: 105px; } #Access .train_contents .contents { background: url(../img/access/sakura_bg_sp.png) no-repeat; margin-bottom: 70px; background-position: left top; background-size: contain; padding-top: 100px; } #Access .line { text-align: left; } #Access .train_contents .map p::after { content: none; } #Access .train_contents .map p::before { top: -70px; right: 0; left: 0; margin: 0 auto; } #Access .train_contents picture.train_img01 { margin-bottom: 100px; } #Access .train_contents .map p { line-height: 22px; margin-bottom: 10px; } #Access .line , #Access .train_contents picture.train_map , #Access .car_contents .line , #Access p.h_subtxt , #Access .bus_contents .bus_img01 , #Access .bus_contents .bus_img02 { margin-bottom: 30px; } #Access .train_contents article:first-child , #Access .daia_wrap , #Access .train_contents .sub_contents , #Access .car_contents , #Access .bus_contents { margin-bottom: 70px; } #Access p.h_subtxt { line-height: 1.5; } #Access .daia_wrap p.annotation { text-align: left; } #Access .desk_ttl { line-height: 20px; margin-bottom: 30px; } #Access picture.train_toyota { width: 100%; } #Access .mark img.car { width: 80px; } #Access .mark img.bus { width: 102px; } #Access .contents .mark { margin-bottom: 20px; } #Access .flex { flex-direction: column; } #Access .bus_contents .bus_img03 { width: 100%; margin-right: 0; margin-bottom: 30px; } #Access .bus_contents .bus_img04 { width: 100%; } #Access .car_wrap picture.car_img01 { margin-bottom: 10px; } #Access .car_contents .car_wrap { margin-bottom: 30px; } #Access .car_contents .car_wrap > p.annotation { text-align: left; } #Access .last { margin-bottom: 90px; } #Quality h3 img { max-width:128px; } #Quality h5 { padding: 10px 7px; } #Quality p.anchor_ttl { line-height: 45px; height: 45px; margin-bottom: 20px; } #Quality .anchor_menu_wrap { padding: 40px 0; margin-bottom: 40px; } #Quality ul.menu { margin: 0; gap: 0; } #Quality ul.menu li { width: calc(100% / 2 - 5px); } #Quality ul.menu li:nth-child(n+3) { margin-top: 10px; } #Quality ul.menu li a { padding: 20px 10px; } #Quality ul.menu li.kitchen img { max-width: 70px; } #Quality ul.menu li.bathroom img { max-width: 60px; } #Quality ul.menu li.entrance img { max-width: 63px; } #Quality ul.menu li.eco img { max-width: 67px; } #Quality ul.menu li.others img { max-width: 61px; } #Quality ul.menu li.earthquake img { max-width: 131px; } #Quality ul.menu02 { justify-content: center; gap: 15px; margin: 35px auto; } #Quality ul.menu02 li { width: 87px; height: 87px; } #Quality .txt_area { margin-bottom: 30px; } #Quality p.txt12 { margin-bottom: 10px; } #Quality p.txt16 { margin-bottom: 0; } #Quality p.txt21 { font-size: 16px; line-height: 24px; text-align: left; margin-bottom: 10px; } #Quality p.gothic_ttl { margin-bottom: 5px; } #Quality .harf48 { width: inherit; margin-bottom: 15px; } #Quality .harf48 > div:not(:last-child) { margin-bottom: 10px; } #Quality .item { width: 100%; margin-bottom: 15px; } #Quality .con_txt_wrap { margin-bottom: 10px; } #Quality .box_img { max-width: inherit; } #Quality .quality_flex { display: block; } #Quality .floor { padding: 40px 0; background-position: center; } #Quality section p[class$="_ttl"] { margin-bottom: 20px; } #Quality .floor h4 { margin-bottom: 30px; } #Quality .floor p.floor_ttl { line-height: 34px; margin-bottom: 30px; } #Quality .floor p.floor_txt { text-align: center; line-height: 26px; margin-bottom: 30px; } .floor_kind_wrap .kind_item { width: 100%; } .floor_kind_wrap .kind_item:not(:last-child) { margin-bottom: 20px; } #Quality #Kitchen_anchor, #Quality #Bathroom_anchor, #Quality #Entrance_anchor, #Quality #Eco_anchor { margin-bottom: 40px; } #Quality #Kitchen_anchor .flex , #Quality #Kitchen_anchor .dairiseki .flex { display: block; } #Quality #Kitchen_anchor .dairiseki .img , #Quality #Kitchen_anchor .dairiseki .txt_wrap { width: 48%; } #Quality #Kitchen_anchor .dairiseki .counter .img { width: 100%; } #Quality #Kitchen_anchor .item_wrap .flex { display: flex; } #Quality #Kitchen_anchor .quality_flex .flex { display: flex; } #Quality #Kitchen_anchor .quality_flex .flex .harf_flex { width: 48%; } #Quality #Kitchen_anchor .dairiseki { background: url(../img/quality/dairiseki_bg_sp.png) no-repeat; background-size: cover; padding: 30px 5%; width: 100vw; margin: 40px calc(50% - 50vw) 30px; } #Quality #Kitchen_anchor p.obi { margin-bottom: 10px; } #Quality .dairiseki p.detail_ttl { line-height: 30px; } #Quality .flex_go:not(:last-child) { margin-bottom: 15px; } #Quality .dressing, #Quality .toilet { margin-top: 20px; } #Quality .dressing .item_wrap, #Quality .toilet .item_wrap { width: 100%; } #Quality #Entrance_anchor .box_img { width: 70%; margin: 10px auto 0; } #Quality #Eco_anchor .item_wrap .item { margin-bottom: 40px; } #Quality .glas_wrap { margin: 0; padding: 25px 15px; } #Quality .glas_wrap p.glas_ttl { line-height: 28px; margin-bottom: 20px; } #Quality .glas_wrap p.obi { margin-bottom: 10px; } #Quality .glas_wrap img.mark { max-width: 70px; margin-left: 15px; } #Quality .glas_wrap .others_img01-2 { width: 68%; margin: 15px auto; } #Quality .glas_wrap .glas_wrap_syanetu_img { margin: 10px auto; } #Quality .point_wrap { padding: 20px 10px; } #Quality .point_wrap .harf { width: 100%; } #Quality .point_wrap .harf:first-child { margin-bottom: 70px; } #Quality .point_wrap .harf:first-child::after { transform: rotate(90deg); top: inherit; right: 0; left: 0; margin: 0 auto; } #Quality .point_wrap p.point_ttl { font-size: 16px; margin-bottom: 13px; } #Quality .point_wrap .flex p.point_sec_ttl { font-size: 13px; } #Quality .point_wrap .con_txt_wrap { margin-right: 0; } #Quality .point_wrap p.mark_ttl { text-align: left; line-height: 17px; } #Quality .point_wrap .mark { max-width: 70px; margin-right: 10px; } #Quality .cp_wrap .flex { display: block; } #Eco_anchor .glas_wrap .cp_wrap .image_flex { width: 100%; } #Eco_anchor .glas_wrap .cp_wrap .image_flex .flex { display: flex; } #Eco_anchor .glas_wrap .mark_wrap { display: flex; } #Quality .toilet .item { width: 48%; } #Quality #Structure_anchor p.sec_ttl, #Quality #Structure_anchor p.sec_txt { margin-bottom: 10px; } #Quality #Structure_anchor .lead { max-height:150px; background-size: 100%; } #Quality #Earthquake-resistant .lead { background-image: url(../img/quality/earthquake-resistant_bg_sp.png); } #Quality #Fire-resistance .lead { background-image: url(../img/quality/fireresistance_bg_sp.png); } #Quality #Durability .lead { background-image: url(../img/quality/durability_bg_sp.png); } #Quality #Thermal .lead { background-image: url(../img/quality/thermal_bg_sp.png); } #Quality #Years60 .lead { background-image: url(../img/quality/years60_bg_sp.png); } #Quality #Structure_anchor .lead_ttl { margin-bottom: 30px; } #Quality #Structure_anchor .lead_txt { margin-bottom: 25px; } #Quality #Structure_anchor .contents { padding: 40px 0; margin-bottom: 0; } #Quality #Structure_anchor .kozo .flex { display: block; } #Quality #Structure_anchor .kozo .box { width: 100%; margin-bottom: 40px; } #Quality #Structure_anchor .lead_box .lead_box_inner { padding: 20px; } #Quality #Structure_anchor .lead_box .lead_box_inner .contents_flex { flex-direction: column; /*margin-bottom: 40px; padding-bottom: 40px;*/ } #Quality #Structure_anchor .lead_box .txt_wrap { width: 100%; } #Quality #Earthquake-resistant .bf .contents_flex { flex-direction: column; margin-bottom: 40px; padding-bottom: 40px; } #Quality #Earthquake-resistant .bf .contents_flex > div { width: 100%; } #Quality #Earthquake-resistant .bf .sec03.contents_flex { flex-direction: column-reverse; gap: 20px; } #Quality #Earthquake-resistant .bf .sec03.contents_flex picture { margin-bottom: 0; } #Quality #Earthquake-resistant .bf .sec04 .contents_flex { flex-direction: column-reverse; gap: 20px; margin-bottom: 0; } #Quality #Earthquake-resistant .bf .sec04 .bf_sec04_img { margin-bottom: 10px; } #Quality #Fire-resistance .contents_flex { display: block; } #Quality #Fire-resistance .contents_flex > div:first-of-type { width: 100%; } #Quality #Fire-resistance .contents_flex .txt_wrap { width: 100%; } #Quality #Fire-resistance .lead_box .lead_box_inner .sec01.contents_flex { flex-direction: column-reverse; margin-bottom: 0; padding-bottom: 0; } #Quality #Structure_anchor .sec02 .head_border { padding: 15px; margin-bottom: 30px; } #Quality #Structure_anchor .sec02 .contents_flex { flex-direction: column; } #Quality #Fire-resistance .sansyutu { padding: 20px; } #Quality #Fire-resistance .sansyutu .sansyutu_flex { flex-direction: column; gap: 15px; margin-bottom: 15px; } #Quality #Fire-resistance .sansyutu p.annotation { margin-top: 15px; } #Quality #Fire-resistance .sec03 .fireresistance_sec03_img01 { width: 100%; } #Quality #Fire-resistance .lead_box .contents_flex { margin-bottom: 40px; padding-bottom: 40px; } #Quality .contents_whitebox_wrapper { padding: 40px 0 0; } #Quality .contents_whitebox_wrapper .ttl { margin-bottom: 40px; } #Quality .contents_whitebox { padding: 20px; } #Quality #Structure_anchor #Durability .lead_ttl { margin-bottom: 0; } #Quality #Durability .yane { margin-bottom: 40px; } #Quality #Durability .contents_inner_flex { display: block; } #Quality .contens_ttl_flex img { width: 33%; } #Quality #Thermal picture.thermal_main_ttl { margin-bottom: 40px; } #Quality #Thermal .intro_flex { display: block; } #Quality #Thermal .intro_flex picture { margin: 20px auto 0; } #Quality #Thermal picture.thermal_main { margin-bottom: 20px; } #Quality #Thermal .sec { margin-bottom: 40px; } #Quality #Thermal .sec.sec01 { margin-bottom: 40px; } #Quality #Thermal .sec_inner { padding: 20px; } #Quality #Thermal .sec_ttl { margin-bottom: 15px; } #Quality #Thermal .sec_ttl p.num { width: 35px; height: 35px; } #Quality #Thermal .sec_ttl p.ttl { padding-left: 10px; } #Quality #Thermal .sec picture.thermal_sec03_img01 { margin-bottom: 20px; } #Quality #Thermal .sec04 .sec04_ttl { margin-bottom: 0; } #Quality #Thermal .sec04 .features { display: block; } #Quality #Thermal .sec04 .features_box { width: 100%; padding: 10px 5%; box-sizing: border-box; } #Quality #Thermal .sec04 .features_box:not(:last-child)::after { width: 100%; background-repeat: repeat-x; background-size: 12px 9px; right: 0; top: initial; bottom: -100%; } #Quality #Structure_anchor #Years60 .contents { padding-bottom: 60px; } #Quality #Years60 .contents_whitebox { margin-bottom: 50px; } #Quality #Years60 p.af_txt01 { margin-bottom: 15px; } #Quality #Years60 .years60_af { margin: 25px 0; } #Map { margin: 50px 0 40px; } #Map #main { padding-top: 40px; } #Map h3 { margin-bottom: 20px; } #Map p.ttl { margin-bottom: 20px; } #Map .address { display: block; margin-bottom: 30px } #Map .address picture { max-width: initial; width: 100%; } #Map .address p { width: 100%; padding: 5px 0; } #Map .btn_wrap { margin-bottom: 35px; } #Map .btn_wrap p.btn_ttl { margin-bottom: 15px; } #Map .btn_wrap .flex { justify-content: center; } #Map .btn_wrap a.btn { max-width: 233px; padding: 15px 20px; } #Map #main.pages { margin-bottom: 110px; } #Outline { margin-bottom: 0; } #Outline h4 { margin-bottom: 20px; } #Outline table:nth-of-type(2) { margin-bottom: 20px; } #Outline #main { padding-top: 60px; } #Outline .yokoku p.ttl { margin-bottom: 10px; } #Outline table{ border-bottom: 1px solid #b8a395; margin-bottom: 40px; } #Outline table tr{ display:flex; flex-direction:column; border:none; } #Outline table tr th{ text-align:center; border-top:1px solid #b8a395; border-bottom:1px solid #b8a395; width:100%; } #Outline table tr:first-of-type th{ border-top:none; } #Outline table td{ padding:8px 0; width:100%; text-align:center; line-height: 16px; } #Outline table td　{ line-height:20px; } #Outline .date{ margin: 20px 0 0; line-height: 20px; } #Outline .btn{ display:none; } #Outline .yokoku { margin-bottom: 20px; } #Outline .ttl { margin-bottom: 20px; } #Outline .yokoku p { width: 100%; line-height: 16px; } #Outline h3 { margin-bottom: 40px; } #Outline .yokoku { flex-wrap: wrap; } #Outline .yokoku p.ttl { width: 100%; margin-right: 0; margin-bottom: 15px; padding: 10px 5px; } }