/* Theme Name: SevenEstate Theme URI: http://www.7-estate.jp/ Author: 株式会社セブンエステート Description: 販売に自信あり！大阪府大阪市の土地売買、マンション分譲、一戸建て住宅の販売はセブンエステートにおまかせください！ Tags: 大阪市不動産,セブンエステート,sevenestate,豊中市不動産,吹田市不動産,東大阪市不動産,八尾市不動産,大阪市北部不動産,大阪市南部不動産,大阪市中部不動産,大阪市西部不動産,大阪市市東部不動産 */ @charset "utf-8"; /* @group Reset */ *{ margin: 0;padding: 0} a { text-decoration : underline; color: #000; } a:hover{ color: #036EB8; text-decoration: none;} a:hover img{ opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; } ul, ol { list-style : none} img { vertical-align : middle} input[type="text"] { padding: 0; border: none; border-radius: 0; outline: none; background: none; } textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none; padding: 0; border: 0; outline: none; background: transparent; } button, input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; border: none; outline: none; background: transparent; } /* @end */ /* @group Fluid-img */ img { max-width : 100%} /* @end */ /* @group HTML */ html { font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; font-weight:500; font-size : 100%; /*16px*/ line-height : 1.5; letter-spacing: 0.1em;} body { width: 100%; background: #F5F4F0; color: #272727} /* @end */ /* @group Heading */ h1 { font-size : 1.25rem; /* 20px */ line-height : 1 /* 20px */ } h2 { font-size : 1em; /* 16px */ line-height : 1.3333 /* 48px */ } h3 { font-size : 0.875em; /* 14px */ line-height : 1; /* 24px */ margin-bottom : 1em } main{ display:block; } /* @end */ /* @group Shear */ .pc{ display:none;} .sp{ display:inherit; } .tb{ display: none;} .tbsp{ display:inherit;} .red{ color: #FF0808} .blue{ color: #075B86} .white{ color:#fff } .roboto{ font-family: 'Roboto Condensed', sans-serif; font-weight:500; } .main-title{ font-size:2.25rem; color: #272727; } .title-design1{ font-size: 1.625rem; line-height: 140%; text-align: center; background: url(images/detail/line.png) no-repeat bottom center; padding-bottom: 20px; letter-spacing: 0.01em} .title-design1 span{ font-size: 1.25rem; display: block; font-weight: bold; } .title-design2{ font-size:1.125rem ; color: #0D82BD; margin-bottom: 10px } .title-design3{ background:url(images/sheare/house-icon-list.png) no-repeat left center; font-size: 1.375rem; text-align: left; padding-left: 60px; display: table-cell; vertical-align: middle; height: 50px; margin-bottom: 50px} .title-design4{ font-size: 1.4375rem; font-weight: bold; margin-bottom: 30px;} .title-design5{ border-bottom: 3px solid #000; margin-bottom: 25px; padding-bottom: 15px; font-size: 1.25rem; text-align: left; color: #075B86; margin-top: 50px} .bold{ font-weight: bold} .tenmincho{ font-family: "ten-mincho", serif; font-weight: 400; font-style: normal;} .font01{ font-family: "raleway", sans-serif; font-weight: 400; font-style: normal; } /* material-icons icon size */ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: 'liga'; } /* アイコンサイズ */ .material-icons.md-18 { font-size: 18px; } .material-icons.md-24 { font-size: 24px; } .material-icons.md-36 { font-size: 36px; } .material-icons.md-48 { font-size: 48px; } /* 背景が明るいとき用のアイコン色 */ .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } /* 背景が暗いとき用のアイコン色 */ .material-icons.md-light { color: rgba(255, 255, 255, 1); } .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } /* @end */ /* @group Header */ header{ background: #F5F4F0; width: 100%; position: fixed; top:0; border-bottom: 1px solid #fff; z-index: 70} header .hgr{ width: 93.75%; padding: 16px 3.33% 12px; overflow: hidden} header .hgr h1{ width: 53.82%; float: left} header .hgr nav{ width:30px; float: right; margin-top: 4px } /* @end */ /* @group ハンバーガーメニュー */ .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; } .menu-trigger { position: relative; width: 32px; height: 29px; z-index: 3 } .menu-trigger span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #3B3B3B; } .menu-trigger span:nth-of-type(1) { top: 0; } .menu-trigger span:nth-of-type(2) { top: 9px; } .menu-trigger span:nth-of-type(3) { bottom: 7px; } .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg); } .menu-trigger.active span:nth-of-type(2) { left: 200%; opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards; } @-webkit-keyframes active-menu-bar02 { 100% { height: 0; } } @keyframes active-menu-bar02 { 100% { height: 0; } } .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-8px) rotate(45deg); transform: translateY(-8px) rotate(45deg); } /* @end */ /* @group ヘッダーメニュー　dropdown-menu */ header .hgr .active span{ background-color: #fff;} .smp-dpmenu{ position:fixed; top: 0; right: 0; bottom: 0; left: 0; z-index:2; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-transition-duration:1s;background:#0D82BD;padding:0;max-height:0; text-align: left; font-size: 1.125rem; } .smp-dpmenu.open{padding:48px 0 0 0;max-height:34em;} .dropdown-menu{ overflow:hidden; width:97%; height: auto; overflow-y: auto; padding-left: 6% } .dropdown-menu li{ line-height:1em; list-style:none; border-bottom: #4BA2CE solid 1px; padding:15px 3%; overflow: hidden; font-size: 1rem} .dropdown-menu li a{display:block; color:#fff; margin-left: 3%; width:93.75%; text-decoration: none;} .dropdown-menu li a.btn{ float: left; background: none; width: 46%; padding-left: 0px; text-align: right;} .dropdown-menu li.dr-title{ border-bottom: 4px solid #fbf3d4; font-size: 1.25rem; padding: 30px 3%;} .dropdown-menu li.dr-title a{ color: #ce0501; background: none; padding-left: 0;} .dropdown-menu li a .material-icons{ vertical-align: -4px} .smp-dpmenu .contact-btn a{ width: 87.75%; margin: 30px auto 20px; background: #fff; text-align: center; text-decoration: none; overflow: hidden; display: block;} .smp-dpmenu .contact-btn a .telicon{ background: #075B86; padding: 10px; display: inline-block; float: left;} .smp-dpmenu .contact-btn a span{ display: block; padding-top: 9px; color: #3B3B3B; text-align: center; letter-spacing: 0.01em} .smp-dpmenu .dr-sub-menu{ width: 87.75%; margin: 20px auto; overflow: hidden;} .smp-dpmenu .dr-sub-menu li{ width: 31.3%; float: left; margin-right: 3%; letter-spacing: 0.01em} .smp-dpmenu .dr-sub-menu li a{ display: block; width: 100%; background: #fff; text-align: center; color: #272727; padding: 15px 0; font-size: 0.875rem; text-decoration: none} .smp-dpmenu .dr-sub-menu li:nth-child(3n){ margin-right: 0;} .smp-dpmenu .contact-btn a:hover{ opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; } .smp-dpmenu .dr-sub-menu li a:hover{ opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "alpha(opacity=60)"; } .smp-dpmenu p.add{ text-align: center; font-size: 0.875rem; color: #fff; margin-top: 20px; font-weight: normal; letter-spacing: 0.01em} /* @end */ .slide{ width: 100%; } .slide div{ background: #F5F4F0} .slide img{ width: 100%} .bx-wrapper{ margin-top: 60px} .roomplan-slider .bx-wrapper{ margin-top: 0} /* @main contents */ main{ width: 100%; padding-bottom: 80px} /* NEWS */ .sns-contents{ width: 93.75%; margin: 45px auto; overflow: hidden; } .news{ width: 100%;} .title-box{ width: 100%; overflow: hidden; margin-bottom: 35px} .title-box h1{ width: 78%; float: left; font-size: 2.25rem; font-weight: bold; line-height: 81%} .title-box h1 span{ font-size: 0.75rem; display: block} .title-box p a{ border: 1px solid #F5F4F0; border-radius: 5px; display: block; text-decoration: none; width: 20%; float: left; font-size: 0.75rem; text-align: right; margin-top: 32px; padding-left: 1%} .title-box p a:hover{ border: 1px solid #036EB8; border-radius: 5px } .title-box .main-title .material-icons{ vertical-align: -7px;} .news ul{ width: 100%;} .news ul li{ line-height: 180%; font-size: 0.875rem; overflow: hidden} .news ul li span{ margin-right: 15px; display: block; height: 30px; float: left;} .news ul li a{ text-decoration: none;} /* INSTAGRAM */ .instagram{ width: 100%; margin-top: 65px;} .instagram ul { width: 100%; overflow: hidden} .instagram ul li{ width: 31.3%; margin-right: 2%; float: left; height: 100px; border: 1px solid #ccc; overflow: hidden} .instagram ul li:nth-child(3n){ margin-right: 0;} /* CONCEPT */ .concept{ width: 100%; background: #fff; padding-top: 45px } .concept-box{ } .concept h1{ width: 93.75%; font-size: 2.25rem; font-weight: bold; line-height: 81%; margin: 0 auto 18px } .concept h1 span{ font-size: 0.75rem; display: block} .concept img{ margin: 20px 0; width: 100%;} .concept p{ line-height: 160%; width: 93.75%; margin: 0 auto; font-size: 0.875rem} .under-tab{ width: 85%; margin: 42px auto 70px; text-align: center; } .under-tab ul{ width: 100%; overflow: hidden} .under-tab ul li{ width: 100%; margin-bottom: 30px; text-align: center; font-weight: bold; font-size: 0.875rem} .under-tab ul li img{ margin-bottom: 10px;} .under-tab ul li .material-icons{ vertical-align: -7px} /*施工事例一覧*/ .works{width: 100%; margin: 40px auto;} .works h1{ width: 93.75%; font-size: 2.25rem; font-weight: bold; line-height: 81%; margin: 0 auto 18px } .works h1 span{ font-size: 0.75rem; display: block} .works .case-slider{ width: 100%; margin: 0 auto; overflow: hidden; background: #F5F4F0} .works .case-slider li{ width: 296px; height: auto; font-size: 0.875rem; text-align: center} .works .case-slider li .works-img{ height: auto; overflow: hidden; margin-bottom: 5px} .works .case-slider li img{ width: 100%; height: auto;} .more-btn a{ display: block; width: 60%; margin: 40px auto; border: 1px solid #000; padding: 10px 5%; text-align: center; font-family: 'Roboto', sans-serif; text-decoration: none; background: url(images/sheare/arrow-s.png) no-repeat 90% center} .more-btn a img{ float: right; margin-top: 5px} .more-btn a:hover{ background:#075B86; color: #fff } /*footer サブコンテンツ*/ .footer-subcontents{ width: 100%; margin: 0; } .footer-subcontents h1{ width: 93.75%; font-size: 1.625rem; font-weight: normal; line-height: 81%; margin: 0 auto 18px ; color: #fff} .footer-subcontents h1 span{ font-size: 0.75rem; display: block} .footer-subcontents .contact-box{ width: 100%; padding: 30px 0; background:url(images/sheare/contact-balloon.svg) no-repeat 90% 30px #0D82BD } .footer-subcontents .contact-box .tel a{ color: #fff; font-family: 'Roboto', sans-serif; text-decoration: none} .footer-subcontents .contact-box .tel{ margin-top: 39px; font-size: 2.5rem; text-align: center; font-weight: normal} .footer-subcontents .contact-box .tel span{ font-size: 1.125rem; color: #fff; font-weight: normal} .footer-subcontents .contact-box .holiday{ font-size: 0.875rem; color: #fff; text-align: center} .white-btn a{ display: block; width: 60%; margin: 20px auto; padding: 10px 5%; text-align: center; color: #272727; background: url(images/sheare/arrow-s.png) no-repeat 90% center #fff; text-decoration: none; background-size: 11%;} .green-btn a{ display: block; width: 60%; margin: 20px auto; padding: 10px 5%; text-align: center; color: #fff; background: url(images/sheare/arrow-s.png) no-repeat 90% center #00B900; text-decoration: none; background-size: 11%;} .white-btn a:hover{ background: #000; color: #fff;} .footer-subcontents .order-box{ width: 100%; padding: 30px 0; background:url(images/sheare/oreder-img.png) no-repeat top right #0C6B9B; background-size: 140%} .green-btn a:hover{ background: #000; color: #fff;} .footer-subcontents .order-box{ width: 100%; padding: 30px 0; background:url(images/sheare/oreder-img.png) no-repeat top right #0C6B9B; background-size: 140%} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("images/sheare/oreder-img@2x.png"); background-size: 320px 320px; } .footer-subcontents .order-box .infomation-txt{ text-align: center; color: #fff; font-size: 1.125rem; letter-spacing: 0.01em} .footer-subcontents .order-box .infomation-txt span{ display: block; font-size: 0.875rem; margin-top: 10px} footer{ width: 100%; padding: 20px 0 30px; text-align: center; background: #fff; padding-bottom: 60px;} footer img{ max-width: 100%; margin: 0 auto 10px} footer .copy{ text-align: center; color: #272727; font-size:0.625rem; letter-spacing: 0.01em } .gototop a{ display: block; width: 100%; text-align: center; color: #fff; background: #055177; position: fixed; bottom: 0; z-index: 71; height: 48px; text-decoration: none} /* @group Detail*/ #detail{ } .detail{ width: 93.75%; padding: 0 3%; } .housedetail-title{ padding-top: 90px; background: #fff} .housedetail-title h1{ background: url(images/detail/house-icon.svg) no-repeat left top; color: #0D82BD; font-size: 1.25rem; line-height: 120%; padding-left: 100px; vertical-align: middle; display: table-cell; height: 100px; padding-bottom: 30px} .house-slider{ width: 100%; margin: 0 0 50px; position: relative; } .house-slider .bx-wrapper{margin-top:0;} .house-slider .bx-wrapper .bx-viewport ul li{ width: 100%; height: 13em;} .house-slider .bx-wrapper .bx-viewport ul li img{ width: 100%; height: auto} .drawing-slide .bx-wrapper .bx-viewport ul li img{ width: 100%; height:auto; } .drawing-slide .bx-wrapper .bx-viewport ul li{ height: 400px; display: flex; justify-content: center; align-items: center; } .house-slider ul li img{ width: 100%; height: 100%} .cap-txt{ position: absolute; padding: 5px 0 5px 10px; width: 100%; font-size: 0.875rem; color: #fff; background-color: rgba(0,0,0,0.5); bottom: 0px} .detail-main{ width: 94%; padding: 5px 3% 30px} .detail-main .house-title{ width: 100%; text-align: center;} .detail-main .house-title h1{font-size: 1.875rem; line-height: 100%; margin-top: 30px} .detail-main .house-title h1 span{ display: block; font-size: 0.875rem; color: #006BBE} .detail-main .house-title h1 span:nth-child(2n){ color: #FF9D00} .detail-main .house-title .price{ color: #FF4500; font-size: 1.125rem; margin-top: 10px; font-weight: bold} .detail-main .house-title .price span{ font-weight: normal} .detail-main .house-deta{ width: 100%; margin-top: 30px; text-align: left} .detail-main .house-deta table{ width: 100%; font-size: 0.875rem; } .detail-main .house-deta table th,.detail-main .house-deta table td{ padding: 5px; border-bottom: 1px solid #E3E2DE; border-collapse: collapse; border-spacing: 0;} .detail-main .house-deta table th{ width: 30%} .detail-main .house-deta table td{ width: 70%} .recommended{ width: 93.75%; padding: 50px 3%; background: #fff;} .recommended .recomend-title{ font-size: 1.625rem; line-height: 140%; text-align: center; background: url(images/detail/line.png) no-repeat bottom center; padding-bottom: 20px; letter-spacing: 0.01em} .recommended .recomend-title span{ font-size: 1.25rem; display: block; font-weight: bold; } .recommended ul.point{ width: 100%; text-align: left; list-style-type: none; margin: 30px 0 20px 14px} .recommended ul.point li{ font-size: 1rem; line-height: 160%; font-weight: bold} .recommended ul.point li::before { font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f058"; margin-left:-14px; color: #0D82BD; } .recommended .specification{ width: 100%;} .recommended .specification .spec-box{ width: 100%; border: 1px solid #000; padding-bottom: 10px} .recommended .specification .spec-box h1{ background: #0D82BD; width: 100%; padding: 10px 0; text-align: center; color: #fff; font-weight: normal; font-size: 1rem } .recommended .specification .spec-box p{ padding: 10px 10px 30px 10px;} .recommended .specification .spec-box ul{ padding: 0 10px; list-style-type: none; margin-left: 14px} .recommended .specification .spec-box ul li{ font-size: 0.875rem; line-height: 160%; font-weight:bold} .recommended .specification .spec-box ul li::before { content: "■"; margin-left:-14px; } .contact-btn-area{ background:url(images/detail/contact-bg.png) no-repeat center center; width: 100%; padding: 30px 0; } .contact-btn-area ul { width: 93.75%; overflow: hidden; margin: 0 auto} .contact-btn-area ul li{ width: 100%; margin-bottom: 20px;} .contact-btn-area ul li.white-btn a{ width: 66%; background: url(images/sheare/arrow-s.png) no-repeat 95% center #fff;} .contact-btn-area ul li.white-btn a:hover{ background: #000; color: #fff;} .contact-btn-area ul li.green-btn a{ width: 66%; background: url(images/sheare/arrow-s.png) no-repeat 95% center #00B900} .contact-btn-area ul li.green-btn a:hover{ background: #000; color: #fff;} .house-detail{ width: 100%; background: #fff; padding: 50px 0;} .house-detail h1{ width: 93.75%; margin-bottom: 25px; font-size: 1.25rem; margin: 40px auto 20px} .house-detail h1 span{ font-size: 0.875rem;} .house-detail .house-detail-table-box{ width: 93.75%; margin: 0 auto;} .house-detail .house-detail-table-box table{ width: 100%; border: 1px solid #C6C6C6; border-collapse: collapse; margin-bottom: 20px} .house-detail .house-detail-table-box table th, .house-detail .house-detail-table-box table td{ border-bottom:1px solid #C6C6C6; border-left:1px solid #C6C6C6; padding: 10px; font-size: 0.875rem; text-align: left } .house-detail .house-detail-table-box table th{ width: 30%; background: #F5F4F0; font-weight: normal} .house-detail .house-detail-table-box table td{ width: 70%;} .local-infomation{ width: 100%; background: #fff;} .local-infomation h1{ width: 93.75%; margin-bottom: 15px; font-size: 1.25rem; margin: 0 auto 20px} .local-infomation ul.local-infomation-list{ width: 93.75%; overflow: hidden; margin: 20px auto 0} .local-infomation ul.local-infomation-list li{ float: left; margin-right: 2%; width: 48.8%; text-align: center; margin-bottom: 30px} .local-infomation ul.local-infomation-list li span img{ width: 100%; height: auto} .local-infomation ul.local-infomation-list li span{ width: 100%; height: auto; overflow: hidden; border: 1px solid #ccc ; display: block; margin-bottom: 5px; position: relative; text-align: center; align-items: center; display: flex; justify-content: center; } .local-infomation ul.local-infomation-list li i{ display: block; text-align: center; font-size: 0.875rem; font-style: normal; line-height: 140%} .local-infomation ul.local-infomation-list li:nth-child(2n){ margin-right: 0;} .landplan-roomplan{ width: 100%; background: #fff; padding: 10px 0} .landplan-roomplan .roomplan{ width: 93.75%; margin: 0 auto 50px;} .landplan-roomplan .roomplan h3{ font-size: 1.25rem; margin-bottom: 15px; } .landplan-roomplan .roomplan .roomplan-slider{ width: 94%; border:1px solid #ccc; height: 100%; padding: 20px 3%} .landplan-roomplan .roomplan .roomplan-slider img{ width: 100%; height: auto} .landplan-roomplan .landplan{ width: 93.75%; margin: 0 auto 50px; } .landplan-roomplan .landplan h3{ font-size: 1.25rem; margin-bottom: 15px; } .landplan-roomplan .landplan .landplan-box{width: 100%; border:1px solid #ccc; height: auto; padding: 20px 0} .landplan-roomplan .landplan .landplan-box img{ width: 100%; height: auto} .roomplan-slider .bx-wrapper .bx-viewport ul li{height: 100%;} .roomplan-slider .bx-wrapper .bx-pager{ background: #fff} /* 物件一覧 */ #underlist{ background: #fff; padding-top: 110px } .house-list-tab{ width: 100%; background: #F5F4F0; padding: 50px 0 0 0; margin-top: 50px} .house-list-tab .area{ width: 93.75%; margin: 0 auto; overflow: hidden} .house-list-tab .area .area-box{ width: 100%; margin-bottom: 30px; border-bottom: 1px #E5E5E3 solid; padding-bottom: 30px} .house-list-tab .area .area-box-last{ border-bottom: none} .house-list-tab .area .area-box ul { width: 100%; overflow: hidden} .house-list-tab .area .area-box ul li{ width: 48%; font-size: 0.875rem; text-align: center; float: left; margin-right: 2%; margin-bottom: 5px;} .house-list-tab .area .area-box ul li a{ border: 1px solid #707070; background: #fff; line-height: 120%; padding: 10px 2% 15px; width: 96%; text-decoration: none; display: block; height: auto} .house-list-tab .area .area-box ul li a:hover{ background: #0D82BD; color: #fff; } .house-list-tab .area .area-box ul li:nth-child(2n){ margin-right: 0;} .list{ width: 93.75%; margin: 50px auto; } .list h1{ margin-bottom: 20px;} .list .listbox-in{ width: 100%; overflow: hidden} .list .listbox-in a:hover .house-list{ display: block; box-shadow:0px 0px 7px 3px #d4d4d4; color: #000;} .list .listbox-in a:hover .house-list .more-btn-blue{ background: #075B86} .list .listbox-in .house-list{ width: 96%; overflow: hidden; margin: 20px 0; background: #F5F4F0; padding: 10px 2%} .list .listbox-in .house-list .house-img-left{ width: 40%; float: left } .list .listbox-in .house-list .house-img-left .house-img{ overflow: hidden; height:auto; width: 100%; margin-bottom: 10px;} .list .listbox-in .house-list .house-img-left .house-img img{ width: 100%; height: auto} .list .listbox-in .house-list .house-detail{ width: 58%; padding: 10px 0 10px 2%; background: #F5F4F0; float: left} .list .listbox-in .house-list .house-detail .housetitle{ font-size: 1.0625rem; margin-bottom: 10px; letter-spacing: 0.01em} .list .listbox-in .newhouse .house-detail .housetitle span{ margin-right: 10px; display: inline-block; margin-bottom: 5px; } .list .listbox-in .newhouse .house-detail .housetitle span.housetitle{ display: block; margin: 2px 0;} .list .listbox-in .oldhouse .house-detail .housetitle span{ margin-right: 10px; margin-bottom: 5px; display: inline-block;} .list .listbox-in .oldmansion .house-detail .housetitle span{ margin-right: 10px; margin-bottom: 5px; display: inline-block;} .house-detail .housetitle span.blue{ background: #0E9DC6; padding: 5px 10px; border-radius: 3px; font-size: 0.75rem; color: #fff; font-weight: bold; text-align: center; width: auto} .house-detail .housetitle span.orange{ background: #FF8B0F; padding: 5px 10px; border-radius: 3px; font-size: 0.75rem; color: #fff; font-weight: bold; text-align: center; width: auto} .house-detail .housetitle span.yellow{ background:#D3BC2A; padding: 5px 10px; border-radius: 3px; font-size: 0.75rem; color: #fff; font-weight: bold; text-align: center; width: auto} .house-detail .housetitle span.housetitle{ display: block; font-size: 1.0625rem; letter-spacing: 0.01em; color: #000; font-weight: bold} .house-detail .housetitle span.red{ background:#8F1316; border-radius: 3px; font-size: 0.75rem; color: #fff; font-weight: bold; text-align: center; width: auto} .house-detail .housetitle span.red i{padding: 5px 10px; font-style: normal; display: inline-block} .house-detail .housetitle span.green{ background:#15AF27; border-radius: 3px; font-size: 0.75rem; color: #fff; font-weight: bold; text-align: center; width: auto} .house-detail .housetitle span.green i{padding: 5px 10px; font-style: normal; display: inline-block} .list .listbox-in .house-list .house-detail .price-s{ text-align: left; font-size: 1rem; font-weight: bold} .list .listbox-in .house-list .house-detail ul{ width: 97%; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E3E2DE; margin-left: 3%} .list .listbox-in .house-list .house-detail ul li{ line-height: 170%; font-size: 0.875rem; letter-spacing: 0.01em} .list .listbox-in .house-list .more-btn-blue{ background: #0D82BD; color: #fff; text-align: center; padding: 6px 0; width: 100%; float: left; text-decoration: none; font-weight: normal} .list .listbox-in .house-list .more-btn-blue .material-icons{ vertical-align: -6px} .list .listbox-in .house-list .house-detail ul li.map-icon::before{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f3c5"; margin-left:-3%; color: #0D82BD; } .list .listbox-in .house-list .house-detail ul li.train-icon::before{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f238"; margin-left:-3%; color: #0D82BD; } .list .listbox-in .house-list .house-detail ul li.land-icon::before{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0b2"; margin-left:-3%; color: #0D82BD; } .list .listbox-in .house-list .house-detail ul li.house-icon::before{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f015"; margin-left:-3%; color: #0D82BD; } .contact-form-detail{ width: 93.75%; margin: 50px auto;} .contact-form-detail h1{font-size: 1.25rem; letter-spacing: 0.01em} .contact-form-detail table input[type='text'], .contact-form-detail table input[type='email'], .contact-form-detail table input[type='tel'] { width: 96%; height: 30px; border-radius: 4px; border: 1px solid #ccc; background: #fff} .contact-form-detail table { width: 100%; margin-top: 20px; font-size: 0.8975rem; border-collapse: collapse;} .contact-form-detail table th,.contact-form-detail .table-form td{ text-align: left; font-weight: normal; padding: 20px 0; border-bottom: 1px solid #C9C9C9} .contact-form-detail table th{ width: 40%;} .contact-form-detail table td{ width: 60%;} .contact-form-detail table th span.redat{ color:crimson; font-size: 0.75rem; display: block;} .contact-form-detail textarea{ width: 96%; border-radius: 4px; border: 1px solid #ccc; background: #fff} .contact-form-detail select{ width: 50%; padding:10px 2%; cursor: pointer; text-indent: 0.01px; text-overflow: ellipsis; border: 1px solid #bbbbbb; outline: none; background-image: none; box-shadow: none; -webkit-appearance: none; appearance: none; border-radius: 2px; background: #ffffff; } .contact-form-detail table td span.zipcode,.contact-form-detail table td span.address1{ width: 100% !important; overflow: hidden} .contact-form-detail .wpcf7-submit{ background:url(images/sheare/arrow-wh.png) no-repeat 90% center #055177; color: #fff; width: 300px; height: 60px; text-align: center; border: none; margin-top: 50px; font-size: 0.875rem; letter-spacing: 0.1em} .contact-form-detail .wpcf7-confirm{ background:url(images/sheare/arrow-wh.png) no-repeat 90% center #055177; color: #fff; width: 300px; height: 60px; text-align: center; border: none; margin-top: 30px; font-size: 0.875rem; letter-spacing: 0.1em} .contact-form-detail .wpcf7-back{ background:url(images/sheare/arrow-wh.png) no-repeat 90% center #4A4A4A; color: #fff; width: 300px; height: 60px; text-align: center; border: none; margin-top: 50px; font-size: 0.875rem; letter-spacing: 0.1em} .contact-form-detail .poricy{ font-size: 0.875rem; text-align: center; margin-top: 10px; } .wpcf7-form-control { max-width:100% } .base-box{ width: 93.75%; margin: 50px auto;} /* NEWS */ .news-list ul { width: 100%;} .news-list ul li{ border-bottom: 3px solid #000; padding-bottom: 10px; margin-bottom: 10px; font-size: 0.875rem; width: 100%} .news-list ul li span{ display: block; margin-bottom: 5px;} .news-list ul li a{ text-decoration: none} .news-list ul li a:hover{ text-decoration: underline} .news-detail{ width: 100%; margin-bottom: 200px; } .news-detail h1{ font-size: 1.4375rem; font-weight: bold; margin-bottom: 30px; } .news-detail h1 span{ margin-right: 20px; font-weight: bold} .news-detail p{ line-height: 190%; font-size: 0.875rem;} /* PORTFOLIO */ .portfolio-list ul{ width: 100%; overflow: hidden; margin-top: 60px} .portfolio-list ul li{ float: left; width: 49%; margin-right: 2%; font-size: 0.875rem; text-align: center; margin-bottom: 30px} .portfolio-list ul li:nth-child(2n){ margin-right: 0;} .portfolio-list ul li .case-box{ position: relative; padding-top: 15px} .portfolio-list ul li .case-box span{ position: absolute; top: 0; left: 2%; font-weight: bold; text-align: left; font-size: 1.125rem; border-bottom: 3px solid #000; padding-bottom: 3px} .portfolio-list ul li .case-box .case-img{ overflow:hidden; margin-bottom: 3px} .portfolio-list ul li .case-box .case-img img{ width: 100%; height: auto;} .portfolio-list .portfolio-title{ font-size: 1.875rem; font-weight: bold; margin-bottom: 30px} .portfolio-list .portfolio-title span{ display: block; font-weight: bold; margin-bottom: 5px} .portfolio-list p{ line-height: 200%; font-size: 0.875rem} .portfolio-list .portfolio-listimg{ width: 100%; margin-top: 30px;} .portfolio-list .portfolio-listimg img{ width: 100%; height: auto} .portfolio-list .portfolio-listimg ul{ width: 100%; overflow: hidden; margin-top: 20px;} .portfolio-list .portfolio-listimg ul li{ width: 49%; margin-right: 2%; float: left; overflow: hidden; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; position: relative; height: 110px;} .portfolio-list .portfolio-listimg ul li:nth-child(2n){ margin-right: 0} .cap-txt{padding: 10px 0 10px 10px; } /* 注文住宅 */ .zeh{ width: 93.75%; margin: 50px auto; overflow: hidden} .zeh .zeh-box{ width: 100%; margin: 0; } .zeh .zeh-box h1{ font-size: 2.5rem; text-align: center; margin-bottom: 30px} .zeh .zeh-box h1 span{ font-size: 1rem; display: block; line-height: 150%; margin-bottom: 10px} .zeh .zeh-box p{ width: 100%; font-size: 0.875rem; margin-bottom: 20px; line-height: 180% } .zeh img{ width: 100%} .customidbox{ height: 70px;} .submenu-list{ background: #EDE9DC; white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } .submenu-list ul{ width: 697px; display: flex; overflow: hidden; } .submenu-list ul li{ padding: 0; border-right: 1px solid #fff; width: 173px; float: left; text-align: center; } .submenu-list ul li.ov{background: #0D82BD; color: #fff;} .submenu-list ul li a{ color: #0D82BD; text-decoration: none; display: block;} .submenu-list ul li a:hover{ background: #0D82BD; color: #fff;} .submenu-list ul li span{ display: block; padding-top: 65px; padding-bottom: 25px;} .submenu-list ul li a span.liststyle01{ background:url(images/custom/house-icon1.svg) no-repeat center 20px; background-size:43px;} .submenu-list ul li.ov span.liststyle01{ background:url(images/custom/house-icon1-ov.png) no-repeat center 20px;} .submenu-list ul li:hover span.liststyle01{ background:url(images/custom/house-icon1-ov.png) no-repeat center 20px;} .submenu-list ul li a span.liststyle02{ background:url(images/custom/house-icon2.png) no-repeat center 20px;} .submenu-list ul li.ov span.liststyle02{ background:url(images/custom/house-icon2-ov.png) no-repeat center 20px;} .submenu-list ul li:hover span.liststyle02{ background:url(images/custom/house-icon2-ov.png) no-repeat center 20px;} .submenu-list ul li a span.liststyle03{ background:url(images/custom/house-icon3.png) no-repeat center 20px;} .submenu-list ul li.ov span.liststyle03{ background:url(images/custom/house-icon3-ov.png) no-repeat center 20px;} .submenu-list ul li:hover span.liststyle03{ background:url(images/custom/house-icon3-ov.png) no-repeat center 20px;} .submenu-list ul li a span.liststyle04{ background:url(images/custom/house-icon4.png) no-repeat center 20px;} .submenu-list ul li.ov span.liststyle04{ background:url(images/custom/house-icon4-ov.png) no-repeat center 20px;} .submenu-list ul li:hover span.liststyle04{ background:url(images/custom/house-icon4-ov.png) no-repeat center 20px;} .submenu-list ul li a span.liststyle05{ background:url(images/custom/house-icon5.png) no-repeat center 20px;} .submenu-list ul li.ov span.liststyle05{ background:url(images/custom/house-icon5-ov.png) no-repeat center 20px;} .submenu-list ul li:hover span.liststyle05{ background:url(images/custom/house-icon5-ov.png) no-repeat center 20px;} .custom-box{ width: 100%; margin: 85px 0;} .custom-box h1 span{ font-weight: bold} .custom-box h1.custom-maintitle{ font-size: 1.75rem; font-weight: normal; padding:0; text-align: center; border-bottom: 1px solid #000; margin:0 auto 85px; padding-bottom: 20px; width: 70% } .custom-box h1.custom-maintitle img{ width: 43px; height: auto} .custom{ width: 100%; margin-bottom: 50px} .custom h1{ font-size: 1.75rem; color: #0D82BD; margin: 20px auto; width: 93.75%;} .custom .custom-index { width: 93.75%; padding: 20px 3%; } .custom .custom-index h1{ width: 100%; } .custom .custom-index h2{ font-size: 1.25rem; margin-bottom: 20px;} .custom .custom-index p{ line-height: 160% } .custom .custom-index p span{ font-weight: bold; display: block; margin-top: 10px} .custom .bx-wrapper{ margin-top: 0;} .video { position:relative; width:100%; padding-top:56.25%; } .video iframe{ position:absolute; top:0; right:0; width:100%; height:100%; } .vex{ width: 93.85%; margin: 0 auto;} .vex h1{ width: 80%; margin: 50px auto} .vex .v-ex-main{ width: 100%; overflow: hidden; margin-bottom: 50px;} .vex .v-ex-main .vex-txt{ width: 100%; margin-bottom: 20px; } .vex .v-ex-main .vex-txt h2{ font-size: 1.875rem; margin-bottom: 20px; text-align: center} .vex .v-ex-main .vex-txt p{ font-size: 0.875rem; line-height: 180%;} .vex .v-ex-main img{ width: 100%; } .vex .point-box{ width: 100%; overflow: hidden} .vex .point-box .point{ border: 5px solid #43e2ff; border-radius: 8px; padding: 20px 2%; width: 93%; margin-bottom: 30px; text-align: center} .vex .point-box .point h4{ font-size: 1.25rem; margin-top: 30px; color: coral} .vex .point-box .point h5{ font-size: 1.125rem; margin-top: 18px; } .vex .point-box .point p{ font-size: 0.875rem; line-height: 170%; text-align: left; margin-top: 20px} .spec-inhouse{ background: #fff;} .zeh-box h2{ font-size: 1.5625rem; color:#075B86} .zeh-box h2 span{ font-size: 1rem; display: block; font-weight: normal} /* company */ .company{ width: 100%; background: #fff;} .company h3{ font-size: 1.125rem; text-align: center; margin: 40px auto; width: 93.75%; line-height: 140%} .company .aboutcontents{ width: 100%; overflow: hidden} .company .aboutcontents .blue-box{ width:100%; background: #0D82BD; padding: 30px 0} .company .aboutcontents h1{ font-size: 1.25rem; color: #fff; width: 93.75%; margin: 0 auto; margin-bottom: 20px; text-align: center} .company .aboutcontents p{ font-size: 0.875rem; color: #fff; line-height: 170%; width: 93.75%; margin: 0 auto} .company .aboutcontents .deep-blue-box{ width:100%; background: #0970A3; padding: 30px 0} .company-box h1{ font-size: 1.625rem; color: #000; border-bottom: 4px solid #000; padding-bottom: 35px; margin:0 auto 80px; width: 50%} .company-box{ text-align: center; margin: 100px auto 0; width: 93.75%; } .company-box img{ margin:0 auto 30px; width: 80%;} .company-box p{ line-height: 200%; font-size: 0.875rem} .company-box table.boder-line{ width: 93.75%; margin: 0 auto; border-collapse: collapse;} .company-box table.boder-box-recruit{ border-top: 1px solid #000} .company-box table.boder-box-recruit tr th{ border-right: 1px solid #000; vertical-align: top} .company-box table.boder-line tr th,.company-box table.boder-line tr td{ border-bottom: 1px solid #000; padding: 10px 0 10px 10px; font-size: 0.875rem; text-align: left} .company-box table.boder-line tr th{ width: 30%;} .company-box table.boder-line tr td{ width: 70%;} .company-box .add{ text-align: left} .googlemap{ width: 100%;} .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 20px } .ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .company-box ul.sales-results{ width: 93.75%; margin: 0 auto; overflow: hidden} .company-box ul.sales-results li{ border-bottom: 1px #000 solid; padding-bottom: 15px; margin-bottom: 15px; font-size: 0.875rem; text-align: left;} .company-box ul.sales-results li span{ text-align: left; display: block; float: right} .base-box .box ul{ width: 94%; margin: 20px 3% 0 3%} .base-box .box ul li{ list-style: disc; line-height: 160%; font-size: 0.875rem} .custom-index h2 img{ width: 40%;} /* buy */ .buy{ width: 100%;} .buy p{ width: 93.75%; margin: 40px auto; line-height: 160%; font-size: 0.875rem} .buy .buy-box{ width: 93.75%; margin: 0 auto;} .buy .buy-box h1{ border-left:4px solid #0074AF; padding-left: 10px; font-size: 1.75rem; font-weight: bold; line-height: 100%} .buy .buy-box p{ width: 100%; } .buy .buy-box h1 span{ font-size: 1rem; display: block} .buy .buy-box h2{ background: #000; padding: 10px 2%; width: 96%; color: #fff} .buy .buy-box .buy-box-in{ width: 100%; overflow: hidden; margin: 20px 0;} .buy .buy-box .buy-box-in img{ width: 100%;} .buy .buy-box .buy-box-in p{ width: 100%;} .buy .buy-box .buy-box-in p span{ color: #FF6C00; font-weight: bold} .buy .buy-box .atention{ background:#4FBEF7; padding: 10px 2%; color: #fff; margin-bottom: 50px} .buy .buy-box .atention div{ border: 2px solid #fff; } .buy .buy-box .atention div h1{ font-size: 1.5625rem; margin-top: 18px; text-align: center; border: none; margin-bottom: 0;} .buy .buy-box .atention div p{ font-size: 0.875rem; margin-top: 20px;} .buy .contact-box{background: #F5F5F5; width: 100%; padding: 50px 3%} .buy .contact-box h1{ background:url(images/other/baloon-blue.svg) no-repeat left top ; background-size: 100%; width: 94%; color: #fff; font-size:1rem; text-align: center; padding: 7px 0 30px} .buy .contact-box .info-box{ background: #fff; padding: 10px 2%; width: 90%} .buy .contact-box .info-box p{ margin: 10px auto;} .buy .contact-box .info-box div{ width: 100%;} .buy .contact-box .info-box div h2{ font-size: 1.5rem; text-align: center} .buy .contact-box .info-box div p{ font-size: 1.7rem; text-align: center; margin: 10px 0; font-weight: bold} /* renovation */ .renovation-title{ width: 93.75%; margin: 40px auto; background-image:url(images/other/renovation-img.png); background-size: 815px 463px; } .renovation-title h1{ font-size: 3.125rem; font-weight: bold; padding: 50px 2%;} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .renovation-title{ background-image: url("images/renovation-img@2x.png"); background-size: 815px 463px;} } .renovation{ width: 93.75%; margin: 30px auto; } .renovation p{ font-size: 0.875rem; line-height: 160%} .plan-box{ width: 100%; overflow: hidden; margin: 30px 0 50px} .plan-box .plan{ width: 96%; background: #EFEFEF; padding: 20px 2%; margin-bottom: 20px} .plan-box .plan .plan-title{ font-size: 1.125rem; margin-bottom: 20px} .plan-box .plan .plan-title span{ color: #2A54C6; font-weight: bold} .under-title h1{ border-left:4px solid #0074AF; padding-left: 10px; font-size: 1.75rem; font-weight: bold; line-height: 100%} .under-title h1 span{ font-size: 1rem; display: block} .renovation h3{ background: url(images/other/bg-bk.svg) no-repeat left center; background-size: 100%; color: #fff; width: 186px; padding: 22px 0 29px; text-align: center; margin: 30px auto; height: 25px} .renovation .flow-box{ width: 100%; border-bottom: 3px dashed #000; padding-bottom: 20px; margin-bottom: 20px} .renovation .flow-box h1{ font-size: 3.125rem; border-left:none; padding-left: 0px;} .renovation .flow-box h1 span{ font-size: 1.4375rem; display: inline-block; font-weight: bold} .renovation .flow-box p{ font-size: 0.875rem; font-weight: bold} .kiyaku{ text-align: center; margin-top: 20px;} .order-btn a{ display: block; background:#1548C6; padding: 20px 0; text-align: center; color: #fff; font-size: 1.2em; width: 80%; margin: 50px auto; text-decoration: none} .order-btn a:hover{ background: #47A6B5;} .voice-list article{ width: 100%; overflow: hidden;} .voice-list article .voice-img-thmb{ width: 100%; margin-bottom: 10px;} .voice-list article img{ width: 100%; height: auto} .voice-list article .voice-contents{ width: 100%; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 2px dashed #ccc;} .voice-list article .voice-contents h5{ font-size: 1rem; margin-bottom: 20px} .comment-title{ color: #ccc; font-size: 1rem; margin-bottom: 5px;} .voice-list p{ line-height: 120%; font-size: 0.75rem;} .voice-list h1.voice-detail-title{ font-size: 1.125rem; line-height: 130%; margin-bottom: 20px} .voice-list h1.voice-detail-title span{ margin-right: 10px; font-weight: bold; display: block} .voice-list .voice-img-box{ width: 100%; margin: 15px 0} .voice-list .voice-img-box ul{ overflow: hidden; } .voice-list .voice-img-box ul li{ list-style: none; margin-bottom: 10px;} .voice-list .voice-img-box ul li img{ width: 100%; height: auto} .voice-list .q-a{ border-bottom: 2px dotted #ccc; padding-bottom: 20px; margin-bottom: 20px;} .voice-list .q-a h5{ font-weight: bold; font-size: 0.875rem;} .voice-list .q-a p{ font-size: 0.75rem} .looftop{ width: 100%; background: #fff} .loof-top-maintitle{ width: 100%; background: url("images/looftop/main-img.png")top center; background-size: cover; padding: 100px 0} .loof-top-maintitle .looftop-maintop{ background:url("images/looftop/blue-bg-img.png"); width: 80%; padding: 10px 3% 30px; margin: 50px auto; border:1px solid #ccc; color: #fff; text-align: center} .loof-top-maintitle .looftop-maintop h2{ width: 94%; margin: 20px auto; font-size: 2rem; font-weight: bold;} .loof-top-maintitle .looftop-maintop h1{ font-size: 1.5625rem; margin-bottom: 20px} .loof-top-maintitle .looftop-maintop h5{ font-size: 1.125rem; margin-bottom: 20px} .loof-top-maintitle .looftop-maintop p{ font-size: 0.75rem; line-height: 180%} .ex-list-box { width: 93.75%; margin: 50px auto; text-align: center} .line-design{ width: 50%; border-right: 1px solid #000; padding: 40px 0 0 0; margin-bottom: 30px} .ex-list-box h1{ color: #055177; margin-bottom: 30px; font-size: 1.5rem; font-weight: bold} .ex-list-box p{ font-size: 0.75rem; line-height: 180%;} .ex-list-box ul{ margin: 30px 0; width: 100%; overflow: hidden} .ex-list-box ul li{ width: 49%; float: left; margin-right: 2%; font-size: 0.75rem; margin-bottom: 20px} .ex-list-box ul li:nth-child(2n){ margin-right: 0;} .ex-list-box ul li img{ margin-bottom: 5px;} .looftop-concept{ width: 94%; background: url("images/looftop/img-bg01.png")no-repeat center center; padding: 80px 3%; color: #fff; text-align: center} .looftop-concept h1{ font-size: 1.25rem; margin-bottom: 20px} .looftop-concept p{ font-size: 0.75rem; line-height: 200%} .item-list{ width: 100%; text-align: center; margin: 50px 0} .item-list h1{ color: #000; margin-bottom: 30px; font-size: 2.3rem; font-weight: bold} .item-list p{ font-size: 0.75rem; margin-bottom: 30px} .item-list ul{ width: 93.75%; overflow: hidden; margin: 0 auto} .item-list ul li{ width: 32%; margin-right: 2%; float: left; margin-bottom: 10px} .item-list ul li:nth-child(3n){ margin-right: 0;} .looftop-infomation{ width: 100%; background: url("images/looftop/img-bg02.png")no-repeat left top; background-size: cover; padding: 30px 0; text-align: center; color: #fff;} .looftop-infomation h1{ font-size: 1.25rem; margin-bottom: 20px} .looftop-infomation h5{ font-size: 0.875rem; margin-bottom: 20px;} .looftop-infomation p a{ display: block; background: url("images/looftop/arrows.svg")no-repeat 95% center #2E3C67; background-size: 7%; color: #fff; display: block; text-decoration: none; font-size: 0.75rem; padding: 15px 0; width: 80%; margin: 0 auto} .looftop-gallery{ width: 100%; margin: 70px 0; text-align: center} .looftop-gallery h1{ margin-bottom: 20px; font-size: 2.3rem; font-weight: bold} .looftop-gallery ul{ width: 93.75%; overflow: hidden; margin: 30px auto} .looftop-gallery ul li{ width: 49%; float: left; margin-right: 2%; margin-bottom: 10px} .looftop-gallery ul li:nth-child(2n){ margin-right: 0;} /*タブ切り替え全体のスタイル*/ .tabs { padding-bottom: 40px; width: 100%; margin: 0 auto;} .tab_item span{ font-size: 0.625rem;} /*タブのスタイル*/ .tab_item { width: calc(100%/3); height: 50px; line-height: 50px; font-size: 0.6875rem; text-align: center; color: #000; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease; border-bottom: 2px solid #000; letter-spacing: 0.01em; } .tab_item:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; clear: both; overflow: hidden; } /*選択されているタブのコンテンツのみを表示*/ #case:checked ~ #case_content, #equipment:checked ~ #equipment_content, #reform-list:checked ~ #reform-list_content{ display: block; } /*選択されているタブのスタイルを変える*/ .tabs input:checked + .tab_item { background: #000; color: #fff; } .footer-btn-content{ width: 100%; position: fixed; bottom: 0; z-index: 100} .footer-btn-content ul{ display: flex; align-items: center;} .footer-btn-content ul li{ width: 50%; text-align: center; } .footer-btn-content ul li a{ display: block; width: 100%; text-decoration: none; padding: 14px 0; color: #fff;} .footer-btn-content ul li.linebtn a{ background: #00B900; } .footer-btn-content ul li.telbtn a{ background: #0D82BD; } .china{ width: 100%;} .china .chead{ width: 100%; padding: 50px 0; text-align: center; background: url("images/china/head-bg-sp.png")no-repeat center center; background-size: cover; margin-top: 0} .china .chead h1 span{ background-color:rgba(255,255,255,0.8); color: #000; display: block; padding: 20px 2%; font-weight: bold} .china .chead h1{ border: 3px solid #fff; width: 90%; margin: 20px auto; padding: 4px; font-size: 1.125rem; line-height: 130%; } .china .ccontent{ width: 100%; margin:50px 0;} .china .ccontent h3{ text-align: center; font-size: 1rem; line-height: 180%; width: 94%; margin: 0 auto} .china .ccontent h3 span{ font-size: 1.125rem; font-weight: bold; color: #0D82BD} .china .ccontent article{ width: 100%; margin: 40px 0 } .china .ccontent article img{ width: 100%;} .china .ccontent article h2{ font-size: 1.25rem; border-left:4px solid #0D82BD; padding-left: 8px; margin-bottom: 30px} .china .ccontent article .cdetail{ width: 93.75%; margin: 30px auto;} .china .ccontent article .cdetail ul{ width: 80%; margin: 0 auto 40px; overflow: hidden} .china .ccontent article .cdetail ul li{ margin: 10px 0; float: left; width: 100%} .china .ccontent article .cdetail ul li img{ width: 100%} .china .ccontent article .cdetail p{ font-size: 0.875rem; line-height: 180%} .china .ccontent article .cdetail h4{ font-size:1rem; color: #0D82BD; font-weight: bold; margin-bottom: 20px} .chinacontents{padding-top: 77px;} /*768px*/ @media screen and (min-width : 768px){ .pc{ display:inherit;} .sp{ display:none; } .tb{ display:none; } .tbsp{ display:inherit;} /* @group Header */ header .hgr{ padding: 20px 3.33% 20px; } .bxslider li { display: none; } .bx-viewport .bxslider li { display: block !important;} /* @group お問い合せタブ */ .infomation-tab a{ display: block; background: #0D82BD; width: 24px; padding: 33px 14px; color: #fff; position: fixed; right: 0; z-index: 60; top:100px; text-decoration: none; letter-spacing: 0.01em} .infomation-tab-line a{ display: block; background: #00B900; width: 24px; padding: 33px 14px; color: #fff; position: fixed; right: 0; z-index: 60; top:369px; text-decoration: none; letter-spacing: 0.01em} .infomation-tab a span{ border: 1px solid #fff; border-radius: 300px; font-size:0.875rem; display: block; width: 100%; padding: 3px 0 0 0; text-align: center; height: 21px} .infomation-tab a p,.infomation-tab-line a p{ font-size:0.875rem; padding: 0 6px 0 3px; margin-top: 10px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; letter-spacing: 0.1em} .infomation-tab a:hover,.infomation-tab-line a:hover{ background: #000; } /* NEWS */ .news{ width: 48%; float: left} /* INSTAGRAM */ .instagram{ width: 48%; margin-top: 0; float: right} /* CONCEPT */ .concept{ width: 100%; background:url(images/home/concept-bg-img.png) no-repeat left top #fff; overflow: hidden} .concept-box{ background: #fff; width: 50%; float: right; padding: 50px 5%; margin-top: 50px} .concept h1{ width: 100%; margin: 0 0 18px 0 } .concept p{ width: 100%; margin: 0; } .under-tab{ width: 93.75%; margin: 42px auto; } .under-tab ul{ width: 100%; overflow: hidden} .under-tab ul li{ width: 32%; margin-bottom: 0; float: left; margin-right: 2%} .under-tab ul li:nth-child(3n){margin-right: 0} .more-btn a{ display: block; width: 20%; margin: 40px auto; border: 1px solid #000; padding: 10px 5%; text-align: center; font-family: 'Roboto', sans-serif; text-decoration: none; background: url(images/sheare/arrow-s.png) no-repeat 90% center} .more-btn a img{ float: right; margin-top: 5px} .more-btn a:hover{ background:#075B86; color: #fff } /*footer サブコンテンツ*/ .footer-subcontents{ overflow: hidden} .footer-subcontents h1{ font-size:1.75rem; font-weight: normal; line-height: 81%} .footer-subcontents .contact-box{ float: left; width: 46%; padding: 30px 2%; background:url(images/sheare/contact-balloon.png) no-repeat 90% 40px #0D82BD } .footer-subcontents .contact-box .tel{ margin-top: 63px; } .footer-subcontents .contact-box .contact-list{ width: 80%; margin: 0 auto} .footer-subcontents .contact-box .white-btn{ width: 49%; float: left; margin-right: 2%} .footer-subcontents .contact-box .white-btn a,.footer-subcontents .green-btn a{ display: block; width: 100%; padding: 10px 0;} .footer-subcontents .contact-box .green-btn{ width: 49%; float: left; } .footer-subcontents .order-box{ float: left; width: 46%; padding: 30px 2%; } .footer-subcontents .order-box .infomation-txt{ text-align: center; color: #fff; font-size: 1.125rem; letter-spacing: 0.01em} .footer-subcontents .order-box .infomation-txt span{ display: block; font-size: 0.875rem; margin-top: 10px} .gototop a{ display: block; width: 50px; text-align: center; color: #fff; background: #055177; position: fixed; bottom: 10px; z-index: 71; right: 10px; border-radius: 100px; padding-top:7px; height: 43px } .gototop a:hover{ background:#2D86B2 } footer{padding-bottom:20px;} footer img{ max-width: 100%; margin: 0 auto 10px} footer .copy{ text-align: center; color: #272727; font-size:0.625rem; letter-spacing: 0.01em } /* @group Detail*/ .detail-main{ width: 94%; padding: 30px 3%; margin-top: 20px; overflow: hidden} .detail-main .house-title{ width: 40%; text-align: left; float: left} .housedetail-title h1{ font-size: 1.5625rem; } .detail-main .house-deta{ width: 60%; margin-top: 0; float: left} .recommended ul.point{ width: 70%; text-align: left; list-style-type: none; margin: 30px auto} .recommended .specification{ width: 99%;} .recommended .specification .spec-box{ overflow: hidden} .contact-btn-area ul li{ width: 48%; margin-bottom: 0; margin-right: 4%; float: left} .contact-btn-area ul li:last-child{ margin-right: 0} .contact-btn-area ul li.white-btn a{ width: 90%} .contact-btn-area ul li.green-btn a{ width: 90%} .house-detail .house-detail-table-box table th{ width: 20%; background: #F5F4F0; font-weight: normal} .house-detail .house-detail-table-box table td{ width: 80%;} .local-infomation{ width: 100%; background: #fff; padding-bottom: 50px} .local-infomation h1{ width: 93.75%; margin-bottom: 15px; font-size: 1.25rem; margin: 0 auto 20px} .local-infomation ul.local-infomation-list{ width: 93.75%; overflow: hidden; margin: 20px auto 0} .local-infomation ul.local-infomation-list li{ float: left; margin-right: 1%; width: 32.5%; text-align: center; margin-bottom: 30px} .local-infomation ul.local-infomation-list li:nth-child(2n){ margin-right: 1%;} .local-infomation ul.local-infomation-list li:nth-child(3n){ margin-right: 0;} .landplan-roomplan{ width: 93.75%; padding: 10px 3.33%; overflow: hidden} .landplan-roomplan .roomplan{ width: 49%; margin: 0 1% 30px; float: left} .landplan-roomplan .roomplan .roomplan-slider{ height: 100%} .landplan-roomplan .landplan{ width: 49%; margin: 0 0 50px 0; float: left} .landplan-roomplan .landplan .landplan-box{width: 100%; border:1px solid #ccc; height: auto} /* 物件一覧 */ #underlist{ padding-top: 120px} .house-list-tab .area .area-box ul li a{ height: 45%} .house-list-tab .area .area-box ul li{width: 31.9%; margin-right: 2%;} .house-list-tab .area .area-box ul li:nth-child(2n){ margin-right: 2%;} .house-list-tab .area .area-box ul li:nth-child(3n){ margin-right: 0;} .list{ width: 93.75%; margin: 50px auto; } .list h1{ margin-bottom: 20px;} .list .listbox-in{ width: 100%; overflow: hidden} .list .listbox-in .house-list{ width: 49%; margin: 20px 2% 20px 0; padding: 0; float: left} .list .listbox-in .house-list .house-img-left{ width: 100%; float: none } .list .listbox-in .house-list .house-detail{ width: 96%; padding: 10px 2%; float: none} .list .listbox-in .house-list .house-detail ul{ width: 93.75%; padding: 10px 3.33%; margin-left: 0; height: 140px} .list .listbox-in a:nth-child(2n) .house-list{ margin-right: 0;} .cap-txt{ bottom: 0px} .portfolio-list .cap-txt{ bottom: 0px} .house-slider .bx-wrapper .bx-viewport ul li{ width: 100%; height: 450px;} .drawing-slide .bx-wrapper .bx-viewport ul li{ height: 283px; display: flex; justify-content: center; align-items: center; } .roomplan-slider .bx-wrapper .bx-viewport ul li{height: 100%;} .local-infomation ul.local-infomation-list li span{height: auto} .contact-form-detail h1{font-size: 1.25rem; letter-spacing: 0.01em} .base-box{ width: 93.75%; margin: 50px auto;} /* NEWS */ .news-list ul { width: 100%;} .news-list ul li{ border-bottom: 3px solid #000; padding-bottom: 20px; margin-bottom: 20px; font-size: 1rem; width: 100%} .news-list ul li span{ display: inline; margin-bottom: 0; margin-right: 30px; margin-bottom: 24px} /* PORTFOLIO */ .portfolio-list ul li{ width: 32%; margin-right: 2%; margin-bottom: 40px} .portfolio-list ul li:nth-child(2n){ margin-right: 2%;} .portfolio-list ul li:nth-child(3n){ margin-right: 0;} .portfolio-list ul li .case-box{ position: relative; padding-top: 20px} .portfolio-list ul li .case-box span{ left: 3%; font-size: 1.375rem; border-bottom: 4px solid #000; padding-bottom: 3px} .portfolio-list .portfolio-title{ font-size: 1.875rem; font-weight: bold; margin-bottom: 30px} .portfolio-list .portfolio-title span{ display: inline; margin-bottom: 0; margin-right: 20px} .portfolio-list p{ line-height: 200%; font-size: 0.875rem} .portfolio-list .portfolio-listimg{ width: 100%; margin-top: 50px;} .portfolio-list .portfolio-listimg img{ width: 100%; height: auto} .portfolio-list .portfolio-listimg ul{ width: 100%; overflow: hidden; margin-top: 40px;} .portfolio-list .portfolio-listimg ul li{ width: 32%; margin-right: 2%; float: left; overflow: hidden; margin-bottom: 15px; height: 150px;} .portfolio-list .portfolio-listimg ul li:nth-child(2n){ margin-right: 2%} .portfolio-list .portfolio-listimg ul li:nth-child(3n){ margin-right: 0} .portfolio-list .portfolio-listimg ul li a p.cap-txt{padding: 10px 0 10px 10px; } /* 注文住宅 */ .zeh{ width: 93.75%; margin: 50px auto; overflow: hidden} .zeh .zeh-box{ width: 49%; float: left } .zeh .zeh-box h1{ text-align: left; } .zeh .zeh-box h1 span{ font-size: 1rem; display: block; line-height: 150%; margin-bottom: 10px} .zeh .zeh-box p{ width: 100%; font-size: 0.875rem; margin-bottom: 20px; } .zeh img{ width: 43%; float: right} .custom-box{ width: 100%; padding: 85px 0; background: #F5F4F0; margin: 0} .custom-box h1.custom-maintitle{ font-size: 1.75rem; font-weight: normal; padding:0; text-align: center; border-bottom: 1px solid #000; margin:0 auto 85px; padding-bottom: 20px; width: 30% } .custom{ position: relative; margin: 85px 0 250px} .custom h1{ font-size: 1.75rem; color: #0D82BD; margin: 20px auto; width: 93.75%;} .custom img{ max-width: 100%} .custom .custom-index { width: 60%; padding: 20px 3%; position: absolute; top: 140px; right: 0; background: #F5F4F0} .custom .custom-index h1{ width: 100%; } .custom .custom-index h2{ font-size: 1.25rem; margin-bottom: 20px;} .custom .custom-index p{ line-height: 160%; font-size: 0.875rem } .rightbox .custom-index{ width: 60%; padding: 20px 3%; position: absolute; top: 140px; left: 0; background-color:rgba(245,244,240,0.95);} .rightbox .rightbox-img{ width: 100%; text-align: right} .cusom-slider01{ width: 100%;} .kitchen .custom-index{ position: inherit; top:0; width: 93.75%} .vex{ width: 93.85%; margin: 0 auto;} .vex h1{ width: 100%; margin: 90px 0; text-align: center} .vex .v-ex-main{ width: 100%; overflow: hidden; margin-bottom: 50px;} .vex .v-ex-main .vex-txt{ width: 49%; margin-bottom: 0; float: left;} .vex .v-ex-main .vex-txt h2{ font-size: 1.875rem; margin-bottom: 20px; text-align: left} .vex .v-ex-main .vex-txt p{ font-size: 0.875rem; line-height: 180%;} .vex .v-ex-main img{ width: 47%; float: right} .vex .point-box{ width: 100%; overflow: hidden; margin-bottom: 100px} .vex .point-box .point{ border: 5px solid #43e2ff; border-radius: 8px; padding: 20px 2%; width: 27%; margin-bottom: 30px; text-align: center; float: left; margin-right: 1%; height: 430px} .vex .point-box .point:last-child{margin-right:0} .vex .point-box .point h4{ font-size: 1.35rem; margin-top: 30px;} .vex .point-box .point h5{ font-size: 1.125rem; margin-top: 18px; } .vex .point-box .point p{ font-size: 0.875rem; line-height: 170%; text-align: left; margin-top: 20px} .spec-inhouse{ background: #fff;} /* company */ .company{ width: 100%; background: #fff;} .company h3{ font-size: 1.125rem; margin: 100px auto 50px; width: 93.75%; line-height: 160%} .company .aboutcontents{ width: 100%; overflow: hidden} .company .aboutcontents .blue-box{ width:44%; background: #0D82BD; padding: 30px 3%; float: left; height: 300px;} .company .aboutcontents h1{ font-size: 1.25rem; color: #fff; width: 93.75%; margin: 0 auto; margin-bottom: 20px; text-align: left} .company .aboutcontents p{ font-size: 0.875rem; color: #fff; line-height: 170%; width: 93.75%; margin: 0 auto} .company .aboutcontents .deep-blue-box{ width:44%; background: #0970A3; padding: 30px 3%; float: left; height: 300px;} .company-box h1{ font-size: 1.625rem; color: #000; border-bottom: 4px solid #000; padding-bottom: 35px; margin:0 auto 80px; width: 23%} .company-box{ text-align: center; margin: 100px auto; width: 93.75%; } .company-box img{ margin:0 auto 100px; width: auto;} .company-box p{ line-height: 200%; font-size: 0.875rem} .company-box table.boder-line{ width: 93.75%; margin: 0 auto 50px; border-collapse: collapse;} .company-box table.boder-line tr th,.company-box table.boder-line tr td{ border-bottom: 1px solid #000; padding: 20px 0 20px 20px; font-size: 0.875rem; text-align: left} .company-box table.boder-line tr th{ width: 30%;} .company-box table.boder-line tr td{ width: 70%;} .company-box .add{ text-align: left} .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 20px } .ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .company-box ul.sales-results{ width: 100%; margin: 0 auto; overflow: hidden} .company-box ul.sales-results li{ border-bottom: 1px #000 solid; padding-bottom: 15px; margin-bottom: 15px; font-size: 0.875rem; text-align: left; width: 49%; float: left; margin-right: 1%} .company-box ul.sales-results li span{ text-align: left; display: block; float: right} .company-box ul.sales-results li:nth-child(2n){ margin-right: 0;} .custom-index h2 img{ width: 24%;} /* renovation */ .renovation-title{ width: 93.75%; margin: 80px auto 40px; background-image:url(images/other/renovation-img.png); background-size: 815px 463px; } .renovation-title h1{ font-size: 3.125rem; font-weight: bold; padding: 90px 4%; text-align: right} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("images/renovation-img@2x.png"); background-size: 815px 463px; } .renovation{ width: 93.75%; margin: 50px auto; } .renovation p{ font-size: 0.875rem; line-height: 160%; font-weight: bold} .plan-box{ width: 100%; overflow: hidden; margin: 30px 0 50px} .plan-box .plan{ width: 45%; padding: 20px 2%; margin: 50px 0; float: left; margin-right: 2%} .plan-box .plan:nth-child(2n){ margin-right: 0} .plan-box .plan .plan-title{ font-size: 1.125rem; margin-bottom: 20px} .plan-box .plan .plan-title span{ color: #2A54C6; font-weight: bold} .plan-box .plan p{ font-weight: normal; font-size: 0.875rem} .under-title h1{ border-left:6px solid #0074AF; padding-left: 15px; font-size: 2.5rem; font-weight: bold; line-height: 100%} .under-title h1 span{ font-size: 1rem; display: block} .renovation h3{ margin: 50px 0; } .contactbtn{ width: 70%; margin: 100px auto 30px} /* buy */ .buy .buy-box h2{ text-align: center; padding: 15px 2%} .buy .buy-box .buy-box-in{ width: 100%; overflow: hidden} .buy .buy-box .buy-box-in img{ width: 45%; float: left; margin-right: 5%} .buy .buy-box .buy-box-in p{ width: 49%; float: left; margin-top: 0} .buy .buy-box .atention{ padding: 10px 1.5%; color: #fff; margin-bottom: 50px} .buy .buy-box .atention div h1{ font-size: 1.5625rem; margin-top: 20px; text-align: left; border: none; margin: 25px 2%;} .buy .buy-box .atention div p{ font-size: 0.875rem; margin: 20px 2%; width: 96%} .buy .contact-box h1{ font-size:1.3rem; padding: 23px 0 39px; margin-bottom: 15px} .buy .contact-box .info-box{ overflow: hidden} .buy .contact-box .info-box p{ width: 49%; float: left; margin: 20px 0} .buy .contact-box .info-box div{ width: 46%; float:right; } .buy .contact-box .info-box div h2{ font-size: 1.5rem; text-align: left; margin-top: 17px} .buy .contact-box .info-box div p{ font-size: 1.7rem; text-align: left; margin: 0; font-weight: bold; width: 100%} .buy .contact-box .info-box div p i{ display: inline;} .order-btn a{ width: 40%; } .voice-list article{ width: 100%; overflow: hidden; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 2px dashed #ccc;} .voice-list article .voice-img-thmb{ width: 30%; margin-bottom: 0; float: left; margin-right: 5%} .voice-list article .voice-contents{ width: 65%; margin-bottom: 0; padding-bottom: 0; float: left; border-bottom: none} .voice-list article .voice-contents h5{ font-size: 1.125rem; margin-bottom: 20px} .voice-list .comment-title{ color: #ccc; font-size: 1.125rem; margin-bottom: 5px;} .voice-list p{ line-height: 120%; font-size: 0.75rem;} .voice-list h1.voice-detail-title{ font-size: 1.125rem; line-height: 130%; margin-bottom: 20px} .voice-list h1.voice-detail-title span{ margin-right: 10px; font-weight: bold; display: block} .voice-list .voice-img-box{ width: 100%; margin: 15px 0} .voice-list .voice-img-box ul{ overflow: hidden; } .voice-list .voice-img-box ul li{ width: 49%; float: left; margin-right: 1%} .voice-list .voice-img-box ul li:last-child{ margin-right: 0;} .voice-list .q-a{ border-bottom: 2px dotted #ccc; padding-bottom: 20px; margin-bottom: 20px;} .voice-list .q-a h5{ font-weight: bold; font-size: 1rem; margin-bottom: 5px} .voice-list .q-a p{ font-size: 0.875rem} .looftop{ width: 100%; background: #fff} .loof-top-maintitle{ width: 100%; background: url("images/looftop/main-img.png")top center; background-size: cover; padding: 100px 0} .loof-top-maintitle .looftop-maintop{ background:url("images/looftop/blue-bg-img.png"); width: 60%; padding: 10px 3% 30px; margin: 50px auto; border:1px solid #ccc; color: #fff; text-align: center} .loof-top-maintitle .looftop-maintop h2{ width: 90%; margin: 20px auto; } .loof-top-maintitle .looftop-maintop h1{ font-size: 1.5625rem; margin-bottom: 20px} .loof-top-maintitle .looftop-maintop h5{ font-size: 1.125rem; margin-bottom: 20px} .loof-top-maintitle .looftop-maintop p{ font-size: 0.75rem; line-height: 180%} .ex-list-box { width: 93.75%; margin: 50px auto; text-align: center} .line-design{ width: 50%; border-right: 1px solid #000; padding: 40px 0 0 0; margin-bottom: 30px} .ex-list-box h1{ font-size: 1.7rem; margin-bottom: 30px; } .ex-list-box p{ font-size: 0.875rem; line-height: 180%;} .ex-list-box ul{ margin: 50px 0 100px; width: 100%; overflow: hidden} .ex-list-box ul li{ width: 32%; float: left; margin-right: 2%; font-size: 0.75rem; margin-bottom: 30px} .ex-list-box ul li:nth-child(2n){ margin-right: 2%;} .ex-list-box ul li:nth-child(3n){ margin-right: 0;} .ex-list-box ul li img{ margin-bottom: 5px;} .looftop-concept{ width: 94%; background: url("images/looftop/img-bg01.png")no-repeat center center; padding: 80px 3%; color: #fff; text-align: center} .looftop-concept h1{ font-size: 1.4375rem; margin-bottom: 20px} .looftop-concept p{ font-size: 0.875rem; line-height: 200%} .item-list{ width: 100%; text-align: center; margin: 50px 0} .item-list h1{ margin-bottom: 30px; font-size: 1.5625rem} .item-list p{ font-size: 0.875rem; margin-bottom: 30px} .item-list ul{ width: 93.75%; overflow: hidden; margin: 0 auto} .item-list ul li{ width: 23.5%; margin-right: 2%; float: left; margin-bottom: 20px} .item-list ul li:nth-child(3n){ margin-right: 2%;} .item-list ul li:nth-child(4n){ margin-right: 0} .looftop-infomation{ width: 100%; background: url("images/looftop/img-bg02.png")no-repeat left top; background-size: cover; padding: 70px 0; text-align: center; color: #fff;} .looftop-infomation h1{ font-size: 1.5625rem; margin-bottom: 20px} .looftop-infomation h5{ font-size: 0.875rem; margin-bottom: 30px;} .looftop-infomation p a{ display: block; background: url("images/looftop/arrows.svg")no-repeat 95% center #2E3C67; background-size: 7%; color: #fff; display: block; text-decoration: none; font-size: 0.875rem; padding: 20px 0; width: 400px; margin: 0 auto} .looftop-gallery{ width: 100%; margin: 70px 0; text-align: center} .looftop-gallery h1{ margin-bottom: 20px; font-size: 1.5625rem} .looftop-gallery ul{ width: 93.75%; overflow: hidden; margin: 30px auto} .looftop-gallery ul li{ width: 32%; float: left; margin-right: 2%; margin-bottom: 15px} .looftop-gallery ul li:nth-child(2n){ margin-right: 2%;} .looftop-gallery ul li:nth-child(3n){ margin-right: 0;} .china{ width: 100%;} .china .chead{ width: 100%; padding: 50px 0; text-align: center; background: url("images/china/head-bg-pc.png")no-repeat center center; background-size: cover; margin-top: 0} .china .chead h1 span{ background-color:rgba(255,255,255,0.8); color: #000; display: block; padding: 20px 2%; font-weight: bold} .china .chead h1{ border: 3px solid #fff; width: 80%; margin: 20px auto; padding: 4px; font-size: 1.0625rem; line-height: 130%; } .china .ccontent{ width: 100%; margin:50px 0;} .china .ccontent h3{ text-align: center; font-size: 1rem; line-height: 180%; width: 94%; margin: 0 auto} .china .ccontent h3 span{ font-size: 1.125rem; font-weight: bold; color: #0D82BD} .china .ccontent article{ width: 100%; margin: 40px 0; overflow: hidden} .china .ccontent article img{ width: 54%; float: left} .china .ccontent article h2{ font-size: 1.25rem; border-left:4px solid #0D82BD; padding-left: 8px; margin-bottom: 20px} .china .ccontent article .cdetail{ width: 40%; margin: 10px 2% 10px 0; float: right} .china .ccontent article .cdetail ul{ width: 100%; margin: 0 auto 20px; overflow: hidden} .china .ccontent article .cdetail ul li{ margin: 0 2% 0 0; float: left; width: 48%} .china .ccontent article .cdetail ul li:last-child{ margin-right: 0} .china .ccontent article .cdetail ul li img{ width: 100%} .china .ccontent article .cdetail p{ font-size: 0.875rem; line-height: 180%} .china .ccontent article .cdetail h4{ font-size:1rem; color: #0D82BD; font-weight: bold; margin-bottom: 20px} .china .ccontent article.cleft img{float: right} .tab_item span{ font-size: 0.75rem;} .tab_item {font-size: 1rem;} } /* @end */ /*1024px*/ @media screen and (min-width : 1024px) { .pc{ display:inherit;} .sp{ display:none; } .tb{ display:inherit;} .tbsp{ display:none;} /* @group Header */ header{ border-bottom: none} header .hgr{ width: 1080px; padding: 0; margin: 0 auto; padding: 15px 0; overflow: hidden} header .hgr h1{ width: 211px;} header .hgr .head-menu-sub{ width:632px; margin-top: 4px; float: right} header .hgr .head-menu-sub nav{ width: 100%; float: none;} header .hgr .head-menu-sub nav ul li{ margin-right: 1px; display: inline; font-size: 0.875rem; } header .hgr .head-menu-sub nav ul li a{ text-decoration: none; padding:0 10px} header .hgr .head-menu-sub nav ul li:last-child{ margin-right: 0;} header .hgr .head-menu-sub nav ul li.ov a,header .hgr .head-menu-sub nav ul li a:hover{ color: #0D82BD; font-weight: bold; border-bottom: 7px solid #0D82BD; padding-bottom: 22px } /* NEWS */ .sns-contents{ width: 1080px; } .news{ width: 352px; } .title-box{ width: 100%; overflow: hidden; margin-bottom: 35px} .title-box h1{ width: 280px; font-size: 2.5rem; font-weight: bold; line-height: 100%;} .title-box h1 span{ letter-spacing: 0.01em} .title-box p a{ width: 65px; float: right; padding-left: 4px; margin-top: 45px;} .news ul li{ line-height: 200%; } .news ul li a{ text-decoration: none;} /* INSTAGRAM */ .instagram{ width: 660px; } .instagram ul { width: 100%; overflow: hidden} .instagram ul li{ width: 196px; margin-right: 33px; height: 196px; } .instagram ul li:nth-child(3n){ margin-right: 0;} /* CONCEPT */ .concept-box{ background: #fff; width: 487px; float: right; padding: 74px 65px; margin-top: 117px} .concept h1{ width: 100%; margin: 0 0 18px 0 } .concept p{ width: 100%; margin: 0} .under-tab{ width: 1080px; margin: 50px auto 75px; } .under-tab ul{ width: 100%; overflow: hidden} .under-tab ul li{ width: 340px; margin-right:30px; font-size: 1rem} .under-tab ul li:nth-child(3n){margin-right: 0} /* WORKS */ .works{ width: 100%;} /*施工事例一覧*/ .works{width: 100%; margin: 40px auto;} .works h1{ width: 1080px; font-size: 2.5rem; } .works .case-slider{ width: 100%; margin: 0 auto; overflow: hidden; background: #F5F4F0} .more-btn a{ width: 280px; margin: 50px auto; padding: 10px 0; } .more-btn a:hover{ background:#075B86; color: #fff } /*footer サブコンテンツ*/ .footer-subcontents{ background:url(images/sheare/footer-contents-bg.png) no-repeat top center; background-size: 200%} .footer-subcontents h1{ width: 100%;} .ftcont{ width: 1080px; margin: 0 auto; overflow: hidden;} .footer-subcontents .contact-box{ width: 485px; padding: 30px 55px 30px 0; background:url(images/sheare/contact-balloon.png) no-repeat 85% 60px } .footer-subcontents .contact-box .tel{ margin-top: 20px; } .footer-subcontents .white-btn a{ width: 200px;} .footer-subcontents .green-btn a{ width: 200px;} .footer-subcontents .order-box .white-btn{ margin: 26px auto 20px;} .footer-subcontents .order-box{ float: left; width: 485px; padding: 30px 0 30px 55px; background:url(images/sheare/oreder-img.png)no-repeat top right; background-size: 100%} .footer-subcontents .order-box .infomation-txt{ text-align: center; color: #fff; font-size: 1.125rem; letter-spacing: 0.01em; margin-top: 39px;} .footer-subcontents .order-box .infomation-txt span{ display: block; font-size: 0.875rem; margin-top: 10px} .bx-wrapper{ margin-top: 35px} footer{ width: 100%; padding: 20px 0 30px; text-align: left;} footer img{ max-width: 100%; margin: 0 0 10px 0;} footer .copy{ text-align: center; } footer .ft{ width: 1080px; margin: 0 auto 60px; overflow: hidden} footer .ft .footer-menu{ width: 540px; float: left} footer .ft .company-info{ width: 540px; float: right; overflow: hidden} footer .ft .footer-menu ul{ width: 135px; float: left;} footer .ft .footer-menu ul li{ line-height: 200%; font-size: 0.75rem} footer .ft .footer-menu ul li a{ text-decoration: none} footer .ft .company-info h1{ width:100%; margin-bottom: 10px; text-align: right; float: right; } footer .ft .company-info .add{ text-align: right; font-size: 0.75rem} /* @group Detail*/ #detail{ background:url(images/detail/slider-bg.png) no-repeat center 771px #fff;} .detail{ width: 1080px; padding-top: 120px; margin: 0 auto} .house-slider{ width: 1000px; margin: 0 auto 20px; } .house-slider .bx-wrapper{margin-top:0;} .detail-main{ width: 1080px; padding: 80px 0 0 0; margin: 0 auto 100px; overflow: hidden} .detail-main .house-title{ width: 353px; text-align: center; } .detail-main .house-deta{ width: 697px; float: right} .detail-main .house-deta table{ width: 100%; font-size: 1rem; } .detail-main .house-deta table th{ width: 20%; padding: 5px} .detail-main .house-deta table td{ width: 80%; padding: 5px} .recommended{ width: 1080px; padding: 50px 0; margin: 20px auto} .recommended ul.point{ width: 700px; } .recommended ul.point li{ font-size: 1.375rem; line-height: 160%; font-weight: bold} .recommended .specification{ width: 100%;} .recommended .specification .spec-box{ width: 100%; overflow: hidden} .recommended .specification .spec-box p{ padding: 20px 20px 30px 20px;} .recommended .specification .spec-box ul{ padding: 0 20px;} .recommended .specification .spec-box ul{width: 471px; float: left; margin-right: 30px} .recommended .specification .spec-box ul:nth-child(2n){ margin-right: 0} .recommended .specification .spec-box ul li{ line-height: 200%; font-size: 0.875rem; } .contact-btn-area{ background:url(images/detail/contact-bg.png) no-repeat center center; width: 100%; padding: 30px 0; } .contact-btn-area ul{ width: 768px; overflow: hidden; margin: 0 auto; padding: 20px 0} .contact-btn-area ul li{ width: 340px; margin-bottom: 0; margin-right: 68px; float: left} .contact-btn-area ul li:last-child{ margin-right: 0} .contact-btn-area ul li.white-btn a{ width: 100%; margin: 0; padding: 10px 0;} .house-detail{ width: 1080px; padding: 50px 0; margin:0 auto} .house-detail h1{ width: 100%; margin: 40px 0 25px 0} .house-detail h1 span{ font-size: 0.875rem;} .house-detail .house-detail-table-box{ width: 100%; margin: 0; overflow: hidden} .house-detail .house-detail-table-box table{ width: 345px; float: left; margin-right: 20px;} .house-detail .house-detail-table-box table th{ width: 30%;} .house-detail .house-detail-table-box table th, .house-detail .house-detail-table-box table td{padding: 5px 10px;} .house-detail .house-detail-table-box table:nth-child(3n){ margin-right: 0;} .local-infomation{ width:1080px; margin: 0 auto} .local-infomation h1{ width: 100%; margin: 0 0 20px 0} .local-infomation ul.local-infomation-list{ width: 100%; overflow: hidden; margin: 20px 0 0 0} .local-infomation ul.local-infomation-list li{ float: left; margin-right: 40px; width: 238px; text-align: center; margin-bottom: 25px} .local-infomation ul.local-infomation-list li span{ height: 134px; } .local-infomation ul.local-infomation-list li:nth-child(2n){ margin-right: 40px;} .local-infomation ul.local-infomation-list li:nth-child(3n){ margin-right: 40px;} .local-infomation ul.local-infomation-list li:nth-child(4n){ margin-right: 0;} .landplan-roomplan{ width: 1080px; padding: 10px 0; margin: 0 auto} .landplan-roomplan .roomplan{ width: 524px; margin: 0 30px 50px 0; float: left} .landplan-roomplan .roomplan .roomplan-slider{ height: 410px} .landplan-roomplan .landplan{ width: 524px; margin: 0 0 50px 0; float: left} .landplan-roomplan .landplan .landplan-box{height: 410px} /* 物件一覧 */ .house-list-tab{ width: 1200px; padding: 50px 60px 0 60px; margin: 50px auto} .house-list-tab .area{ width: 890px; margin: 0 auto; overflow: hidden} .house-list-tab .area .area-box ul { width: 100%; overflow: hidden} .house-list-tab .area .area-box ul li{ width: 279px; margin-right: 25px; margin-bottom: 20px;} .house-list-tab .area .area-box ul li a{ height: auto} .house-list-tab .area .area-box ul li:nth-child(2n){ margin-right: 25px;} .house-list-tab .area .area-box ul li:nth-child(3n){ margin-right: 0;} .list{ width: 1080px; margin: 70px auto; } .list h1{ margin-bottom: 40px;} .list .listbox-in{ width: 100%; overflow: hidden} .list .listbox-in .house-list{ width: 350px; margin: 15px 15px 15px 0; padding: 0; float: left} .list .listbox-in a:nth-child(2n) .house-list{ margin-right: 15px;} .list .listbox-in a:nth-child(3n) .house-list{ margin-right: 0;} .list .listbox-in .house-list .house-detail{ width: 306px; padding: 15px 22px; height: 233px;} .house-slider .bx-wrapper .bx-viewport ul li{ width: 100%; height: 667px;} .drawing-slide .bx-wrapper .bx-viewport ul li{ width: 100%; height: 400px;} .roomplan-slider .bx-wrapper .bx-viewport ul li{height: 400px;} .contact-form-detail{ width: 1080px; margin: 50px auto;} .contact-form-detail table th{ width: 40%;} .contact-form-detail table td{ width: 60%;} .base-box{ width: 1080px; margin: 50px auto;} /* PORTFOLIO */ .portfolio-list{ margin: 100px auto 50px} .portfolio-list ul{ width: 1080px; } .portfolio-list ul li{ width: 320px; margin-right: 40px; font-size: 1rem; text-align: center; margin-bottom: 65px} .portfolio-list ul li:nth-child(2n){ margin-right: 40px;} .portfolio-list ul li:nth-child(3n){ margin-right: 0;} .portfolio-list ul li .case-box{ position: relative; padding-top: 25px} .portfolio-list ul li .case-box span{ top: 0; left: 15px; font-size: 1.875rem; border-bottom: 4px solid #000; padding-bottom: 5px} .portfolio-list ul li .case-box .case-img{ overflow:hidden; margin-bottom: 3px} .portfolio-list ul li .case-box .case-img img{ width: 100%; height: auto;} .portfolio-list .portfolio-listimg ul{ margin-top: 60px;} .portfolio-list .portfolio-listimg ul li{margin-bottom: 25px; height: 196px;} /* 注文住宅 */ .zeh{ width: 1080px; margin: 50px auto; } .zeh .zeh-box{ width: 558px; float: left } .zeh .zeh-box h1{ font-size: 3rem; } .zeh .zeh-box h1 span{ font-weight: normal} .zeh img{ width: 400px; float: right} .submenu-list{ width:100%} .submenu-list ul{ width: 697px; display: flex; overflow: hidden; margin: 0 auto} .submenu-list ul li{ padding: 0; border-right: 1px solid #fff; width: 173px; float: left; text-align: center; } .custom-box{ width: 100%; } .custom-box h1.custom-maintitle{ font-size: 1.875rem; font-weight: normal; padding:0; text-align: center; border-bottom: 1px solid #000; margin:0 auto 85px; padding-bottom: 20px; width: 240px } .custom{ position: relative; margin: 85px 0 200px} .custom h1{ font-size: 1.875rem; margin: 20px auto; width: 93.75%;} .custom img{ max-width: 100%} .custom .custom-index { width: 662px; padding: 50px; position: absolute; top: 200px; right: 0; background-color:rgba(245,244,240,0.95); z-index: 55} .custom .custom-index h1{ width: 100%; } .custom .custom-index h2{ font-size: 1.375rem; margin-bottom: 30px;} .custom .custom-index p{ line-height: 160%; font-size: 1rem } .rightbox .custom-index{ width: 662px; padding: 50px; position: absolute; top: 200px; left: 0; background-color:rgba(245,244,240,0.95);} .spec-inhouse{ width: 900px; margin: 0 auto; background: #fff} .cusom-slider01{ width: 100%; } .custom .bx-wrapper img{ width: 100%;} .kitchen .custom-index{ position: inherit; top:0; width: 800px} .video { width:980px; } .vex{ width: 100%; margin: 0 auto;} .vex .v-ex-main .vex-txt h2{ font-size: 2rem; margin-bottom: 36px; text-align: left; margin-top: 20px} .vex .v-ex-main .vex-txt p{ font-size: 0.875rem; line-height: 200%;} .vex .point-box .point{ padding: 20px; width: 236px; margin-bottom: 0; margin-right: 20px; height: 340px} .vex .point-box .point h4{ font-size: 1.5rem; margin-top: 30px;} .vex .point-box .point h5{ font-size: 1.125rem; margin-top: 18px; } .vex .point-box .point p{ font-size: 0.875rem; line-height: 170%; text-align: left; margin-top: 20px} .spec-inhouse{ background: #fff;} /* company */ .company h3{ margin: 100px auto 80px; } .company .aboutcontents .blue-box{ width:40%; background: #0D82BD; padding: 50px 5%; height: 250px;} .company .aboutcontents .deep-blue-box{ width:40%; background: #0970A3; padding: 50px 5%; height: 250px;} .company .aboutcontents h1{ font-size: 1.5625rem; margin-bottom: 40px; } .company .aboutcontents p{ line-height: 200%; } .company-box h1{ font-size: 1.625rem; color: #000; border-bottom: 4px solid #000; padding-bottom: 35px; margin:0 auto 80px; width: 135px} .company-box{ text-align: center; margin: 100px auto; width: 93.75%; } .company-box img{ margin:0 auto 100px; width: auto;} .company-box p{ line-height: 230%; font-size: 0.875rem} .company-box table.boder-line{ width: 1080px; margin: 0 auto 50px; border-collapse: collapse;} .company-box table.boder-line tr th,.company-box table.boder-line tr td{ border-bottom: 1px solid #000; padding: 18px 0 18px 18px; font-size: 1rem; text-align: left; line-height: 180%} .company-box table.boder-line tr th{ width: 200px;} .company-box table.boder-line tr td{ width: 840px;} .company-box .add{ text-align: left; width: 1080px; margin: 0 auto} .googlemap{ width: 1080px; margin: 0 auto} .company-box ul.sales-results{ width: 1080px; } .company-box ul.sales-results li{ width: 525px; margin-right: 30px} .custom-index h2 img{ width: 100px;} .cusom-slider03 .bx-wrapper .bx-viewport{ height: 513px !important} .list .listbox-in .house-list .house-detail .housetitle{ margin-bottom: 5px; height: 50px;} /* renovation */ .renovation-title{ width: 1080px; margin: 80px auto 40px; background:url(images/other/renovation-img.png) no-repeat left top; background-size: 815px 463px; height: 463px } .renovation-title h1{ font-size: 3.75rem; font-weight: bold; padding: 125px 4%; text-align: right} @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("images/renovation-img@2x.png"); background-size: 815px 463px; } .renovation{ width: 1080px; margin: 50px auto; } .renovation .flow-box{ padding-bottom: 50px; margin-bottom: 50px} .renovation h3{ font-size: 1.25rem; width: 186px; padding: 22px 0 29px; } .renovation .flow-box h1{ margin-bottom: 16px} .renovation .flow-box p { line-height: 180%; font-size: 1rem} .contactbtn{ width: 516px; } .renovation p{font-size: 1rem} .under-title h1{ font-size: 3.125rem} .under-title h1 span{ font-size: 1.4375rem} /* buy */ .buy p{ width: 1080px; font-weight: bold; margin: 80px auto; font-size: 1rem; line-height: 180%} .buy .buy-box{ width: 1080px; } .buy .buy-box h1{border-left: 8px solid #0074AF; padding-left: 25px; font-size: 3.125rem} .buy .buy-box h1 span{ font-size: 1.4375rem } .buy .buy-box .buy-box-in{margin: 40px 0;} .buy .buy-box h2{ font-size: 1.2rem; font-weight: normal} .buy .buy-box .buy-box-in img{ width: 331px; margin-right: 0;} .buy .buy-box .buy-box-in p{ width:713px; float: right; font-size: 1rem; line-height: 180%} .buy .buy-box .atention{ padding: 15px; margin-bottom: 100px } .buy .buy-box .atention div h1{ font-size: 1.5625rem; margin-top: 18px; border: none; margin-bottom: 0;} .buy .buy-box .atention div p{ font-size:1rem; margin-top: 20px;} .buy .contact-box h1{ width: 1080px; margin: 0 auto; font-size: 1.6rem; padding: 38px 0 76px;} .buy .contact-box .info-box{ width: 1040px; margin: 0 auto; padding: 20px} .buy .contact-box .info-box p{ font-size: 1.2rem} .buy .contact-box .info-box div h2{ font-size: 1.875rem} .buy .contact-box .info-box div p{ font-size: 3.125rem; width: 100%;} .order-btn a{ width: 300px; } .voice-list article{ width: 100%; overflow: hidden; margin-bottom: 50px; padding-bottom: 50px; border-bottom: 2px dashed #ccc;} .voice-list article .voice-img-thmb{ width: 320px; margin-bottom: 0; margin-right: 80px} .voice-list article .voice-contents{ width: 680px; margin-bottom: 0; padding-bottom: 0; border-bottom: none} .voice-list article .voice-contents h5{ font-size: 1.5625rem; margin-bottom: 40px} .voice-list article .voice-contents .comment-title{ color: #ccc; font-size: 1.25rem; margin-bottom: 5px;} .voice-list p{ line-height: 150%; font-size: 0.875rem;} .voice-list h1.voice-detail-title{ font-size: 1.4375rem; line-height: 130%; margin-bottom: 20px} .voice-list h1.voice-detail-title span{ display: inline} .voice-list .voice-img-box{ width: 100%; margin: 30px 0} .voice-list .q-a{ border-bottom: 2px dotted #ccc; padding-bottom: 30px; margin-bottom: 30px;} .voice-list .q-a h5{ font-weight: bold; font-size: 1.125rem; margin-bottom: 10px} .voice-list .q-a p{ font-size: 0.875rem} .looftop{ width: 100%; background: #fff} .loof-top-maintitle{ width: 100%; padding: 130px 0} .loof-top-maintitle .looftop-maintop{ width: 715px; padding: 70px 0; margin: 70px auto; } .loof-top-maintitle .looftop-maintop h2{ width: 100%; margin: 20px auto; font-size: 3rem;} .loof-top-maintitle .looftop-maintop h1{ font-size: 2.1875rem; margin-bottom: 40px} .loof-top-maintitle .looftop-maintop h5{ font-size: 1.25rem; margin-bottom: 20px} .loof-top-maintitle .looftop-maintop p{ font-size: 0.875rem; line-height: 180%} .ex-list-box { width: 1080px; margin: 50px auto; text-align: center} .line-design{ width: 50%; border-right: 1px solid #000; padding: 40px 0 0 0; margin-bottom: 30px} .ex-list-box h1{ margin-bottom: 30px; } .ex-list-box p{ font-size: 0.875rem; line-height: 180%;} .ex-list-box ul{ margin: 80px 0 100px; width: 100%; overflow: hidden} .ex-list-box ul li{ width: 254px; float: left; margin-right: 21px; font-size: 1rem; margin-bottom: 50px} .ex-list-box ul li:nth-child(2n){ margin-right: 21px} .ex-list-box ul li:nth-child(3n){ margin-right: 21px;} .ex-list-box ul li:nth-child(4n){ margin-right: 0;} .ex-list-box ul li img{ margin-bottom: 5px;} .looftop-concept{ width: 100%; background: url("images/looftop/img-bg01.png")no-repeat center center; padding: 140px 0; color: #fff; text-align: left} .looftop-concept h1{ font-size: 1.5625rem; margin: 20px auto 50px; width: 1080px; } .looftop-concept p{ font-size: 1rem; width: 1080px; margin: 15px auto; line-height: 200%} .item-list{ width: 1080px; text-align: center; margin: 50px auto} .item-list h1{margin-bottom: 30px; font-size:1.875rem} .item-list p{ font-size: 1rem; margin-bottom: 50px; font-weight: normal} .item-list ul{ width: 1080px; overflow: hidden; margin: 0 auto} .item-list ul.under-box{ width: 915px;} .item-list ul li{ width: 161px; margin-right: 22px; float: left; margin-bottom: 20px} .item-list ul li:nth-child(3n){ margin-right: 22px;} .item-list ul li:nth-child(4n){ margin-right: 22px} .item-list ul li:nth-child(6n){ margin-right: 0} .looftop-infomation{ width: 100%; background: url("images/looftop/img-bg02.png")no-repeat left top; background-size: cover; padding: 70px 0; text-align: center; color: #fff;} .looftop-infomation h1{ font-size: 1.875rem; margin-bottom: 40px} .looftop-infomation h5{ font-size: 1.125rem; margin-bottom: 30px; font-weight: normal} .looftop-infomation p a{ display: block; background: url("images/looftop/arrows.svg")no-repeat 95% center #2E3C67; background-size: 7%; color: #fff; display: block; text-decoration: none; font-size: 1.125rem; padding: 27px 0; width: 500px; margin: 0 auto} .looftop-gallery{ width: 980px; margin: 70px auto; text-align: center} .looftop-gallery h1{ margin-bottom: 20px; font-size: 1.875rem} .looftop-gallery ul{ width: 100%; overflow: hidden; margin: 30px auto} .looftop-gallery ul li{ width: 32%; float: left; margin-right: 2%; margin-bottom: 30px} .looftop-gallery ul li img{ width: 100%} .china .chead{ width: 100%; padding: 80px 0; text-align: center; background: url("images/china/head-bg-pc.png")no-repeat center center; background-size: cover; margin-top: 0} .china .chead h1 span{ background-color:rgba(255,255,255,0.8); color: #000; display: block; padding: 30px 2%; font-weight: bold} .china .chead h1{ border: 3px solid #fff; width: 80%; margin: 20px auto; padding: 4px; font-size: 1.25rem; line-height: 130%; } .china .ccontent{ width: 100%; margin:50px 0;} .china .ccontent h3{ text-align: center; font-size: 1rem; line-height: 180%; width: 94%; margin: 0 auto} .china .ccontent h3 span{ font-size: 1.25rem; font-weight: bold; color: #0D82BD} .china .ccontent article{ width: 100%; margin: 100px 0; overflow: hidden} .china .ccontent article img{ width: 54%; float: left} .china .ccontent article h2{ font-size: 1.25rem; border-left:4px solid #0D82BD; padding-left: 8px; margin-bottom: 20px} .china .ccontent article .cdetail{ width: 40%; margin: 10px 2% 10px 0; float: right} .china .ccontent article .cdetail ul{ width: 100%; margin: 0 auto 20px; overflow: hidden} .china .ccontent article .cdetail ul li{ margin: 0 2% 0 0; float: left; width: 48%} .china .ccontent article .cdetail ul li:last-child{ margin-right: 0} .china .ccontent article .cdetail ul li img{ width: 100%} .china .ccontent article .cdetail p{ font-size: 0.875rem; line-height: 180%} .china .ccontent article .cdetail h4{ font-size:1rem; color: #0D82BD; font-weight: bold; margin-bottom: 20px} .china .ccontent article.cleft img{float: right} .chinacontents{padding-top: 37px;} } /* @end */