@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css?family=Bebas+Neue|Roboto:100,300,400|Noto+Sans+JP:400,500,700&display=swap&subset=japanese");
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format("woff2"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format("woff"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format("opentype")
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
src: local("Noto Sans CJK JP"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format("woff2"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format("woff"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format("opentype")
}
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
src: local("Noto Sans CJK JP"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format("woff2"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format("woff"), url(http://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format("opentype")
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 100;
src: url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/NotoSerifCJKjp/NotoSerifJP-ExtraLight.otf) format("opentype");
font-display: swap
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 200;
src: url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/NotoSerifCJKjp/NotoSerifJP-Light.otf) format("opentype");
font-display: swap
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 400;
src: url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/NotoSerifCJKjp/NotoSerifJP-Regular.otf) format("opentype");
font-display: swap
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 500;
src: url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/NotoSerifCJKjp/NotoSerifJP-Medium.otf) format("opentype");
font-display: swap
}
@font-face {
font-family: 'Noto Serif Japanese';
font-style: normal;
font-weight: 600;
src: url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/NotoSerifCJKjp/NotoSerifJP-SemiBold.otf) format("opentype");
font-display: swap
}
@font-face {
font-family: 'fontello';
src: url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/fontello.eot?2411622);
src: url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/fontello.eot?2411622#iefix) format('embedded-opentype'), url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/fontello.woff?2411622) format('woff'), url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/fontello.ttf?2411622) format('truetype'), url(//certain-home.com/wp-content/themes/certainhome20250623/fonts/fontello.svg?2411622#fontello) format('svg');
font-weight: normal;
font-style: normal;
}
.light {
font-weight: 300
}
.regular {
font-weight: 400
}
.medium {
font-weight: 500
}
.bold {
font-weight: 700
}
.font-roboto {
font-family: 'Roboto';
}
.sans-serif {
font-family: "Noto Sans JP", "Open Sans", Helvetica, Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
.serif {
font-family: "Noto Serif Japanese", "Roboto Slab", Garamond, "Times New Roman", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, "HGS明朝E", "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ＭＳ Ｐ明朝", "MS PMincho", serif
} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img {
border: 0;
}
input {
border: 1px solid #b0b0b0;
padding: 3px 5px 4px;
color: #979797;
width: 190px;
}
ol, ul {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
line-height: 1.4;
}
abbr, acronym {
border: 0;
} html {
visibility: hidden;
}
html.wf-active, html.loading-delay {
visibility: visible;
}
html.loading-delay {
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein {
from {
opacity: 0; }
to {
opacity: 1; }
} body {  font-family: "Noto Sans JP", "Open Sans", Helvetica, Verdana, Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
background: #fff;
font-weight: 400;
font-size: 14px;
color: #000;
overflow-y: scroll;
overflow-x: hidden;
line-height: 1.9;
letter-spacing: 0.08em;
text-align: justify;
text-justify: inter-ideograph;
font-feature-settings: "palt";
}
.hover-bt{
cursor:pointer;
}
.hover-bt  img{
transition: opacity 0.3s ease;
opacity: 1; 
}
.hover-bt:hover  img{
opacity: 0.5
}
a {
color: #333;
text-decoration: none;
}
.clr {
clear: both;
}
.container > header {
padding: 30px 30px 10px 20px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
text-align: left;
}   .pc {
display: block !important;
}
.main-box { position: relative;
}
.bt:hover, .bt2:hover, .bt3:hover, .bt4:hover {
background-color: rgba(201, 0, 0, 1.00);
transition: background-color 0.2s;
} .cont1 {
background-color: #F7F7F6;
position: relative; }
.cont2 {
background-color: #fff;
z-index: 1000;
position: relative;
}
.future_title {
width: 135px; margin-right: auto;
margin-left: auto; padding-top: 100px;
padding-bottom: 80px;
}
.line {
margin-top: 10px;
margin-right: auto;
margin-left: auto;
width: 90px;
height: 2px;
background: #EC4E20;
} .online_banner {
position: relative;
overflow: hidden;
height: 100%;
}
.online_banner:before {
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
left:0;
right:0;
bottom:0;
margin: auto;
background: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/zoom_ph.jpg) no-repeat center center;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: absolute;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.online_banner:hover:before {
opacity: 1;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.051);
}  .flex-box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
} .cover-img {
background-repeat: no-repeat;
background-position: center top;
background-color: #FFFFFF;
background-size: cover;
position: relative;
}
.cover-img-center {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: #FFFFFF;
position: relative;
}
.contain-img-top {
background-repeat: no-repeat;
background-position: center top;
background-color: #FFFFFF;
background-size: contain;
position: relative;
}
.contain-img-bottom {
background-repeat: no-repeat;
background-position: center bottom;
background-color: #FFFFFF;
background-size: contain;
position: relative;
}
.contain-img-center {
background-repeat: no-repeat;
background-position: center center;
background-color: #FFFFFF;
background-size: contain;
position: relative;
}
.contain-img {
background-repeat: no-repeat;
background-position: center center;
background-color: #FFFFFF;
background-size: contain;
position: relative;
}
.auto-img {
background-repeat: no-repeat;
background-position: center top;
background-color: #FFFFFF;
background-size: auto;
position: relative;
}
.f1_title {
width: 30%;
margin-left: auto;
margin-right: auto;
margin-top: -9%;
}
.f3_title {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-top: -133px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
width: 288px;
}
.f3_title img {
width: 100%;
} .adjust-box4 {
position: relative;
width: 100%; height: auto;
background: #ccc;
margin-right: auto;
margin-left: auto;
}
.adjust-box8 ul li .caption {
font-size: 15px;
text-align: center;
color: #fff;
font-weight: 400;
}
.adjust-box8 ul li .caption a {
width: 100%;
height: 100%;
display: block;
color: #fff;
}
.adjust-box8 ul li .caption span {
font-size: 12px;
text-align: center;
color: #fff;
display: block;
}
.adjust-box8 ul li .mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: center;
align-items: center;
}
.adjust-box8 ul li p {
text-align: center;
}
@media screen and (max-width: 768px) {
.adjust-box8 ul li {
width: 50%; }
.adjust-box8 ul li img {
-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter: none;
} .adjust-box8 ul li .mask {
display: none;
opacity: 1 !important;
background-color: rgba(0, 0, 0, 0);
background-color: none;
}
.adjust-box8 ul li a {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: block
}
} .adjust-box7 {
position: relative;
width: 100%;
height: auto;
background: #fff;
margin-right: auto;
margin-left: auto; }
.adjust-box7 ul { display: block;
position: relative;
}
.adjust-box7 ul li img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
vertical-align: bottom !important;
}
.adjust-box7 ul li {
width: 25%; float: left;
position: relative;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: center;
align-items: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.adjust-box7 ul li .caption {
font-size: 15px;
text-align: center;
color: #fff;
font-weight: 400;
}
.adjust-box7 ul li .caption a {
width: 100%;
height: 100%;
display: block;
color: #fff;
}
.adjust-box7 ul li .caption span {
font-size: 12px;
text-align: center;
color: #fff;
display: block;
}
.adjust-box7 ul li .mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: center;
align-items: center;
}
.adjust-box7 ul li p {
text-align: center;
}
@media screen and (max-width: 768px) {
.adjust-box7 ul li {
width: 50%; }
.adjust-box7 ul li img {
-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter: none;
}
.adjust-box7 ul li .mask {
opacity: 1 !important;
background-color: rgba(0, 0, 0, .3);
}
} div.adjust-box6 p {
line-height: 1em;
}
.adjust-box6 ul { display: block;
position: relative;
}
.adjust-box6 ul li {
width: 25%;
height: 9vw;
float: left;
position: relative;   display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: center;
align-items: center; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.adjust-box6 ul li .caption {
font-size: 15px;
text-align: center;
color: #000;
font-weight: 400;
}
.adjust-box6 ul li .caption a {
width: 100%;
height: 100%;
display: block;
color: #fff;
}
.adjust-box6 ul li .caption span {
font-size: 12px;
text-align: center;
color: #fff;
display: block;
}
.adjust-box6 ul li .mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0; background-color: rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: center;
align-items: center;
}
.adjust-box6 ul li:hover .mask {
opacity: 1;
}
.linkcover {
position: relative; display: inline-block; box-sizing: border-box;
border: 1px solid white;
}
.linkcover::after {
content: ''; position: absolute; top: 0;
left: 0;
width: 100%;
height: 100%;
transition:  ease-out, transform 0.2s ease-out; background-color: rgba(232, 234, 234, 1); }
.linkcover:hover::after {
transform: scale(0.96, 0.9); 
}
.linkcover > * {
position: relative;
z-index: 2;
} .linkcover img {
width: 65%;
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.box-1x01:before {
content: "";
display: block;
padding-top: 8%;
}
.inner3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.inner3 ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.inner3 ul li { width: 12.5%;
float: left;
position: relative; overflow: hidden;
}
.inner3 ul li .caption {
font-size: 15px;
text-align: center; color: #fff;
font-weight: 400;
line-height: 1.3em;
}
.inner3 ul li .caption a {
width: 100%;
height: 100%;
display: block;
color: #fff;
}
.inner3 ul li .caption span {
font-size: 12px;
text-align: center;
color: #fff;
display: block;
}
.inner3 ul li .mask {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.1); -webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.inner3 ul li:hover .mask {
opacity: 1; }
.adjust-box {
position: relative;
width: 80%;
max-width: 1400px;
min-width: 900px;
height: auto;
background: #ccc;
margin-right: auto;
margin-left: auto;
}
.box-1x05:before {
content: "";
display: block;
padding-top: 37%;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.inner ul {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: table;
}
.inner ul li {
width: 50%;
position: relative; display: table-cell; } .adjust-box p {
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}
.f1img {
background-repeat: no-repeat;
background-position: center center;
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/future1img.jpg);
background-color: #FFFFFF;
background-size: cover;
} .work_title {
width: 162px;
height: 82px;
margin-right: auto;
margin-left: auto;
padding-bottom: 80px;
padding-left: 80px;
padding-right: 80px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
margin-bottom: 20px;
}
.bt_all {
height: 27px;
font-size: 12px;
display: flex;
align-items: center;
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #231815;
width: 110px;
justify-content: center;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
margin-bottom: 70px;
} .gap {
background: transparent center no-repeat; background-size: cover;
}
.future3_area {
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/CH-189-back2.jpg);
width: 100%;
height: 644px;
}
.future4_area {
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/ch-181_b.jpg);
width: 100%;
height: 518px;
position: relative;
overflow: hidden;
overflow-y: visible;
overflow-x: visible;
}
.future5_area {
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/ch-181.jpg);
width: 100%;
height: 518px;
position: relative;
overflow: hidden;
overflow-y: visible;
overflow-x: visible;
}
.message_area {
width: 980px;
margin-left: auto;
margin-right: auto;
height: 644px;
display: block;
background-position: 50px 120px;
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/daihyo.png);
background-repeat: no-repeat;
background-size: auto 550px;
position: relative;
}
.message_area2 {
width: 980px;
margin-left: auto;
margin-right: auto;
height: 644px;
display: block;
background-position: 50px 130px;
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/daihyo2.png);
background-repeat: no-repeat;
background-size: auto 530px;
position: relative;
}
.message_area4 {
width: 980px;
top: -12px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 530px;
display: block;
background-position: right 0px;
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/daihyo4.png);
background-repeat: no-repeat;
background-size: auto 530px;
position: absolute;
}
.message_area5 {
margin-top: -12px;
max-width: 980px;
width: 100%;
height: 530px;
display: block;
}
.message_area2 p.mess {
width: 400px;
padding-left: 290px;
padding-right: 290px;
padding-top: 300px;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0px;
color: #FFFFFF;
}
p.mess {
width: 500px;
padding-top: 310px;
top: 0px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
color: #FFFFFF;
}
.message_area4 p.mess {
width: 530px;
padding-top: 350px;
top: 0px;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
color: #FFFFFF;
}
.demo_support {
width: 80%;
max-width: 1400px;
min-width: 980px;
height: 100%;
background-color: #FFFFFF;
margin-left: 0px;
margin-right: 0px; display: flex;
justify-content: center;
align-items: center;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
position: absolute;
}
.white {
color: #fff;
} .modelhouse h1 {
font-size: 4.375vw;
color: #386A8B;
white-space: nowrap;
}
.modelhouse h2 {
font-size: 1.7vw;
display: flex !important;
align-items: flex-end !important;
white-space: nowrap;
}
.movie-logo {
width: 60px;
}
.vh-100-2 {
height: calc(100vw / 2) !important;
}
.vh-100-3 {
height: calc(100vw / 3) !important;
}
.vh-100-4 {
height: calc(100vw / 4) !important;
}
.vh-100-35 {
height: calc(100vw / 3.5) !important;
}
@media (min-width:768px) {
.vh-md-100-2 {
height: calc(100vw / 2) !important;
}
.vh-md-100-3 {
height: calc(100vw / 3) !important;
}
.vh-md-100-35 {
height: calc(100vw / 3.5) !important;
}
.vh-md-100-4 {
height: calc(100vw / 4) !important;
}
}
@media (min-width:992px) {
.movie-logo {
width: 5vw
}
.vh-lg-100-2 {
height: calc(100vw / 2) !important;
}
.vh-lg-100-3 {
height: calc(100vw / 3) !important;
}
.vh-lg-100-35 {
height: calc(100vw / 3.5) !important;
}
.vh-lg-100-4 {
height: calc(100vw / 4) !important;
}
}
@media (min-width:1200px) {
.vh-xl-100-2 {
height: calc(100vw / 2) !important;
}
.vh-xl-100-3 {
height: calc(100vw / 3) !important;
}
.vh-xl-100-35 {
height: calc(100vw / 3.5) !important;
}
.vh-xl-100-4 {
height: calc(100vw / 4) !important;
}
}
@media (min-width:1400px) {
.vh-xxl-100-2 {
height: calc(100vw / 2) !important;
}
.vh-xxl-100-3 {
height: calc(100vw / 3) !important;
}
.vh-xxl-100-35 {
height: calc(100vw / 3.5) !important;
}
.vh-xxl-100-4 {
height: calc(100vw / 4) !important;
}
}
.CB {
display: flex !important;
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
justify-content: center !important;
align-items: center !important;
}
.CB-resp {
display: flex !important;
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
justify-content: center !important;
align-items: center !important;
}
.CB-resp-b {
display: block;
}
.CBT-resp {
display: flex;
justify-content: left;
}
.CBL {
display: flex;
justify-content: left;
align-items: center;
}
.CBT {
display: flex;
justify-content: left;
}
.CBTj {
display: flex;
justify-content: space-between;
}
.CBTB {
display: flex !important;
align-items: flex-end !important;
}
.CBB {
display: flex;
justify-content: center;
align-items: flex-end !important;
}
.CB-colum {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.BB {
border: 3px solid #666;
}
.info {
position: relative;
top: 0;
left: 0;
width: 980px;
padding-top: 250px;
padding-bottom: 100px;
margin-left: auto;
margin-right: auto;
}
.info ul {
width: 100%;
height: 100%; }
.info ul li {
width: 50%;   }  .model-house_area {
padding-top: 3vw;
width: 90%;
margin: auto;
}
.model-house_area > div:nth-child(1) {
width: 56%;
height: calc(100vw * 0.18);
}
.model-house_area > div:nth-child(2) {
width: 44%;
height: calc(100vw * 0.18);
position: relative
}
.model-house_area div:nth-child(2) img {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
z-index: 1000;
max-width: 620px;
min-width: 310px;
}
.model-house_area h1 {
font-size: 4.375vw;
color: #386A8B;
white-space: nowrap;
}
.model-house_area h2 {
font-size: 1.7vw;
display: flex !important;
align-items: flex-end !important;
white-space: nowrap;
}
.model-house_area p {
font-size: 15px;
padding-left: 20px;
padding-right: 20px;
}
.model-house_area .sub-img {
height: calc((((100vw * 0.56) - 70px) * 0.3) * 0.67);
min-height: 110px;
max-height: 150px;
}
@media screen and (min-width:1263px) {
.model-house_area p {
font-size: 16px;
letter-spacing: .1em;
}
}
@media screen and (max-width:1112px) {
.model-house_area p {
font-size: 0.9rem;
padding-left: 20px;
padding-right: 20px;
}
.model-house_area h1 {
font-size: 4.2vw;
white-space: nowrap;
}
.model-house_area h2 {
font-size: 1.7vw;
white-space: nowrap;
}
.model-house_area > div:nth-child(1) {
height: 200px !important;
}
.model-house_area > div:nth-child(2) {
height: 200px !important;
position: relative
}
}
@media screen and (max-width:920px) {
.model-house_area p {
font-size: 0.8rem;
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width:768px) {
.model-house_area {
padding-top: 9vw;
width: 100%;
}
.model-house_area .sub-img {
margin-top: 1vw;
height: calc(100vw * 0.6);
max-height: inherit !important;
}
.model-house_area h1, .model-house_area h2 {
text-align: center !important;
}
.model-house_area h2 {
color: #386A8B;
font-weight: 600
}
.model-house_area h2 {
display: block !important;
}
.model-house_area > div:nth-child(1) {
height: inherit !important;
}
.model-house_area > div:nth-child(1), .model-house_area > div:nth-child(2), .model-house_area > div:nth-child(1) > div:nth-child(1), .model-house_area > div:nth-child(1) > div:nth-child(2) {
width: 100%;
}
}  .banner-plan_area {
width: 90%;
display: flex !important;
align-items: center !important;
justify-content: space-around;
}
.banner-plan_area li {
flex-grow: 1;
max-width: 600px;
margin-left: 10px;
margin-right: 10px;
}
.bunner_area_large {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
height: 100%;
}
.caset {
padding: 0px; box-shadow: 0px 17px 26px -12px rgba(0, 0, 0, 0.3); border-radius: 0px 0px 0px 0px;
}
.caset li {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
}
.caset.plan1 li {
background-color: rgba(255, 255, 255, 0.90);
}
.caset.plan2 li {
background-color: rgba(209, 236, 251, 0.90);
}
.caset.plan3 li {
background-color: rgba(43, 41, 42, 0.90);
color: #fff !important
}
.caset li div {
text-align: center;
}
@media screen and (max-width:768px) {
.banner-plan_area {
width: 100%;
display: block !important;
}
.banner-plan_area li {
flex-grow: 1;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.caset li {
margin-bottom: 0px;
}
} .bunner_area_large::before {
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.bunner_area, .bunner_area:after {
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/bunner.jpg);
width: 100%;
height: 188px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
font-size: 22px;
line-height: 1.4em;
}
.bunner_area p {
padding-bottom: 10px;
}
.bunner_area:hover {
color: #D2D2D4;
} .footer_area {
width: 100%;
text-align: center;
background-color: #E4E5E6;
}
.footer_area2 {
width: 100%;
background-color: #313132;
position: relative;
height: 385px;
padding-top: 45px;
color: #FFFFFF;
}
.footerAre {
width: 100%; background-color: #313132;
position: relative;
padding-top: 45px;
color: #FFFFFF;
}
ul.footer_nav {
display: flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
}
ul.footer_nav li {
padding-top: .2rem !important;
padding-bottom: .2rem !important
}
ul.footer_nav a {
color: #CBCBCB;
}
ul.footer_nav a:hover {
color: #fff;
}
ul.footer_nav ul {
border-left: 1px solid #979595;
padding-left: 30px;
padding-right: 20px;
height: 100%;
}
ul.footer_nav ul li.sub_menu {
font-size: 95%;
padding-left: 10px;
}
ul.footer_contact {
display: flex;
justify-content: center;
align-items: flex-end;
max-width: 980px;
min-width: 890px;
padding-top: 25px;
width: 90%;
margin-left: auto;
margin-right: auto;
color: #CBCBCB;
}
ul.footer_contact li {
padding-right: 10px
} .icon-scroll, .icon-scroll:before {
position: absolute;
left: 50%;
}
.icon-scroll {
width: 30px;
height: 54px;
margin-left: -15px;
bottom: 30px;
margin-top: -35px;
box-shadow: inset 0 0 0 2px #fff;
border-radius: 25px;
}
.icon-scroll:before {
content: '';
width: 4px;
height: 4px;
background: #fff;
margin-left: -2px;
top: 8px;
border-radius: 4px;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
@-webkit-keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(33px);
transform: translateY(33px);
}
}
@keyframes scroll {
0% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translateY(33px);
transform: translateY(33px);
}
} .header_img {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
position: relative;
height: 100%;
margin-top:120px;
}
.headArea {
margin-top: 120px;
}
.headImg {
position: relative;
}
.headImg::before {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
.bgB {
background-color: #000000;
}
.thum_img {
position: relative;
width: 100%;
height: auto;
background: #EEE;
}
.box-1x06:before {
content: "";
display: block;
padding-top: 52%; } .work_thum_table {
min-width: 980px;
max-width: 1400px;
width: 90%;
position: relative;
margin-left: auto;
margin-right: auto;
padding-bottom: 100px;
}
.work_thum_table ul { display: inline-block;
width: 100%;
}
.work_thum_table .imgWrap img {
-webkit-filter: grayscale(0%) !important;
-moz-filter: grayscale(0%) !important;
-o-filter: grayscale(0%) !important;
-ms-filter: grayscale(0%) !important;
filter: grayscale(0%) !important;
}
.work_thum li {
width: 33.333%;
height: calc(33vw * 0.9);
max-height: 450px;
min-height: 300px;
position: relative; float: left;
align-items: top;   } .newmark {
height: 20px;
display: block;
padding-bottom: 6px;
color: #D3101A;
}
.imgWrap {
overflow: hidden;
background: #000;
transition-duration: 0.3s;
cursor: pointer;
}
.imgWrap img, .imgWrap2 img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
transition-duration: 0.3s;
} .imgWrap:hover .mask {
opacity: 1; transition-duration: 0.3s; }
.imgWrap:hover img, .imgWrap2:hover img {
transform: scale(1.1);
transition-duration: 0.3s;
opacity: 0.8;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
filter: none;
}
.imgWrap2:hover .im-color {
transform: scale(1.1);
transition-duration: 0.3s;
opacity: 0.8;
filter: grayscale(0%);
}
.imgWrap img, .imgWrap2 img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
@media screen and (max-width: 768px) {
.imgWrap img, .imgWrap2 img {
-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter: none;
}
.more_link_bt .imgWrap img {
-webkit-filter: grayscale(100%) !important;
-moz-filter: grayscale(100%) !important;
-o-filter: grayscale(100%) !important;
-ms-filter: grayscale(100%) !important;
filter: grayscale(100%) !important;
filter: gray !important;
}
}
.work_data {
margin-top: 7%;
}
.work_data div {
line-height: 1.7;
letter-spacing: .03em;
}
.work_name {
color: #FFFFFF;
letter-spacing: 0.09em;
font-size: 18px;
}
.work_top_area {
height: 420px;
}
.work_explain_title {
color: #fff;
font-size: 21px;
text-align: justify;
font-weight: 500;
padding-bottom: 10px;
letter-spacing: 0.15em;
}
@media screen and (max-width: 768px) {
.work_explain_title {
font-size: 18px;
}
}
.work_explain {
color: #fff;
font-size: 13px;
text-align: justify;
font-weight: 400;
}
.explain {
padding-top: 20px;
color: #fff;
text-align: justify;
}
.max830 {
max-width: 830px !important;
}
.max900 {
max-width: 900px !important;
}
.max980 {
max-width: 980px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.max980forvoice {
max-width: 980px;
width: 90%;
}
.max90p-700 {
max-width: 700px;
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max90p-600 {
max-width: 600px;
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max90p-800 {
max-width: 800px;
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max94p-900 {
max-width: 900px;
width: 94%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max94p-980 {
max-width: 980px;
width: 94%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max96p-980 {
max-width: 980px;
width: 96%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max90p-980 {
max-width: 980px;
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max90p-900 {
max-width: 900px;
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max94p-900 {
max-width: 900px;
width: 94%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max96p-900 {
max-width: 900px;
width: 96%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max98p-900 {
max-width: 900px;
width: 98%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max90p-1300 {
max-width: 1300px;
width: 90%;
margin-right: auto;
margin-left: auto;
display: block;
}
.max100p-980 {
max-width: 980px;
width: 100%;
margin-right: auto;
margin-left: auto;
display: block;
}
.fL_ul900 {
max-width: 900px;
min-width: 600px;
margin-left: 30px;
margin-right: 30px;
}
.fL_ul900 li {
float: left;
}
.max760 {
max-width: 760px;
min-width: 600px;
width: 100%;
}
.max350 {
max-width: 350px;
min-width: 300px;
width: 100%;
font-weight: 400;
}
.dataile_table {
max-width: 980px;
margin-left: auto;
margin-right: auto; padding-bottom: 43px;
position: relative;
display: block
}
.bt3 {
height: 58px;
font-size: 13px;
display: flex;
align-items: center;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
color: #fff; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #231815;
width: 207px;
justify-content: center;
}
.imgWrap2 .mask {
width: 100%;
height: 100%;
position: absolute; top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0); display: flex;
justify-content: center;
align-items: center;
}
.imgWrap2 .mask p {
font-size: 15px;
color: #fff;
font-weight: 400;
}
.imgWrap2 .mask p span {
font-size: 12px;
text-align: center;
color: #fff;
display: block;
line-height: 0.8em;
}
.imgWrap2 {
overflow: hidden; background: #000; position: relative;
width: 440px;
height: 143px;
} .imgWrap2 img {
display: block;
opacity: 0.5;
width: 100%;
height: 143px;
transition-duration: 0.3s; object-fit: cover;
}
.imgWrap2 img:hover {
transform: scale(1.1); transition-duration: 0.3s; opacity: 1;
cursor: pointer;
}
.clr {
clear: both;
}
.box980 {
width: 980px;
margin-left: auto;
margin-right: auto; paddin-top: 3px;
} .morelink {
margin-top: 50px;
width: 100%; text-align: center;
}
.more_link_bt {
margin-top: 20px;
}
.more_link_bt img {
overtical-align: bottom;
}
.more_link_bt img {
display: block;
} .sekouArea {
max-width: 1010px;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
padding-top: 70px;
padding-bottom: 40px;
}
.sekouArea p {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 30px;
}
.sekouArea li:first-child {
padding-right: 12px;
width: 50%;
}
.sekouArea li:last-child {
padding-left: 12px;
width: 50%;
} .bt--cover {
text-align: center;
z-index: 300;
position: absolute;
top: 0;
left: 0;
margin: auto;
}
.max--cover {
margin: auto;
text-align: center;
z-index: 100;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.max1400 {
width: 80%;
max-width: 1400px;
min-width: 980px;
height: 550px;
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
position: relative;
} .kuzu, .kuzu800 {
margin-left: auto;
margin-right: auto;
display: block;
font-size: 12px;
color: #636363;
}
.kuzu {
width: 980px;
}
.kuzu800 {
width: 800px;
}
.kuzu span, .kuzu a, .kuzu800 span, .kuzu800 a {
color: #999999;
}
.copyright {
height: 56px;
background-color: #231815;
color: #BBBCBC;
font-size: 9px;
}
.ul_table {
max-width: 900px;
display: table;
width: 90%;
}
.ul_table {
position: absolute;
}
.ul_table li {
text-align: left;
display: table-cell;
vertical-align: top;
} .page_kuzu {
font-size: 12px;
}
.page_kuzu img {
padding-right: 10px;
}
.page_kuzu a {
color: #7F7A7A;
}
.breadcrumb {
padding: 0; list-style: none;
background-color: transparent;
border-radius: 4px
}
.breadcrumb > li {
display: inline-block
}
.breadcrumb > li + li:before {
content: "> ";
padding: 0 5px;
color: #333;
vertical-align: 1px
}
.breadcrumb > .active {
color: #333
}
.breadcrumb {
font-size: 12px
}
.breadcrumb, .breadcrumb a {
color: #b4b3b4
}
.breadcrumb > span {
margin-left: 1px;
margin-right: 1px
}
.breadcrumb > span:last-child {
color: #615f5f
} .max-1400 {
max-width: 1400px !important;
} .calc_heigt {
min-height:calc( 100vw * 0.6 );
margin-top: 56px;
}
@media (min-width:992px) {
.calc_heigt { min-height: calc( var(--vh) * 100 );
margin-top: 0px;
} } .resp-ul {
padding-left: 30px;
padding-right: 30px;
padding-top: 30px;
}
.resp-ul li {
width: 33.333%;
width: calc(100% / 3);
position: relative;
padding-left: 15px;
padding-right: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.resp-ul li div.p--abso-resp {
width: calc(100% - 30px);
}
.resp-ul li div img {
width: 100%;
height: auto;
}
@media screen and (max-width: 768px) {
.resp-ul li div.p--abso-resp {
width: 100%;
}
}
.center-block {
display: block;
margin-left: auto;
margin-right: auto
}
.img-responsive {
display: block;
max-width: 100%;
height: auto
}
a .img-responsive {
display: inline-block
}
.center_box {
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}
.flex_box {
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
}
.just_box {
width: 100%;
}
.center_div {
margin-left: auto;
margin-right: auto;
text-align: center;
width: auto;
}
.center_area {
margin-left: auto;
margin-right: auto;
}
.flex {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.respo-yes-br br {
display: none
}
.respo-no-br br {
display: block
} .select-wrap {
position: relative;
overflow: hidden;
display: inline-block;
min-width: 192px;
min-width: 12em;
background-color: #ffffff; border: 1px solid #c0c0c0;
color: #333;
}
.select-wrap br {
display: none;
}
.select-wrap select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
z-index: 2;
display: block;
width: 200%;
width: -webkit-calc(100% + 5em);
margin: 0;
padding: 11px 35px 11px 11px;
padding: .6875rem 2.1875rem .6875rem .6875rem;
background: transparent;
border: 0;
outline: none;
font-size: 16px;
font-size: 1rem;
line-height: 1.5;
}
.entypo-down-open-mini:before {
content: '';
font-family: 'entypo', sans-serif;
position: absolute;
z-index: 1;
top: 50%;
right: 12px;
right: .75rem;
margin-top: -8px;
margin-top: -.5rem;
font-size: 16px;
font-size: 1rem;
line-height: 1;
color: #333;
} .jump-next-bt {
display: flex !important;
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
justify-content: center !important;
align-items: center !important;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #005FA4;
color: #fff;
}
.jump-next-bt:hover {
background-color: #0576C9;
} @media (min-width:768px) {
.border-md-right-b {
border-right: 1px solid #000 !important;
}
} .decorated-btn {
background-color: #fff;
display: block;
width: 250px;
font-size: 18px;
cursor: pointer;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #000;
border: 2px solid #666;
border-radius: 3px;
transition: .4s;
}
.decorated-btn:hover {
background: #DA2525;
border: 2px solid #DA2525;
color: #fff;
} .section-news-and-banner .title-news small {
margin-left: 52px;
font-size: 12px
}
.section-news-and-banner .title-news .btn {
padding: 0px 20px 2px;
font-size: 10px
}
.section-news-and-banner .title-news .btn {
font-size: 10px !important;
display: flex !important;
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
justify-content: center !important;
align-items: center !important;
height: 22px !important;
width: 60px !important;
float: right !important;
}
.section-news-and-banner .title-news {
padding-bottom: 5px;
font-weight: 500;
border-bottom: 2px solid #000
}
.section-news-and-banner .title-news small {
margin-left: 52px;
font-size: 12px
}
.section-news-and-banner .title-news .cell {
vertical-align: top
}
.section-news-and-banner .dl-list-indent {
padding-top: 11px;
padding-bottom: 11px
}
.section-news-and-banner .dl-list-indent dt {
padding-right: 30px;
color: #576280
}
.section-news-and-banner .dl-list-indent + .dl-list-indent {
border-top: 1px solid #c5c5c4
}
.section-news-and-banner .dl-list-indent:last-of-type {
border-bottom: 1px solid #000
}
.section-news-and-banner .banner {
display: block; font-size: 16px;
letter-spacing: 4px;
color: #fff;
text-align: center
}
.section-news-and-banner .banner:hover {
opacity: .7;
text-decoration: none
}
.section-news-and-banner .banner small {
display: block;
font-size: 12px
}
.section-news-and-banner .banner.banner-voice {
background-repeat: no-repeat;
background-position: 95% 3px;
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/top_img/bg-voice2.png);
background-color: #8db7e9;
background-size: auto 130%;
}
.section-news-and-banner .banner.banner-contact {
background-color: #b72122
}
.section-news-and-banner .banner {
margin-top: 17px;
margin-bottom: 17px
}
.section-news-and-banner .title-news .cell {
vertical-align: top
}
.table-cell.bordered .cell {
padding: 0 10px;
margin-bottom: 35px;
border-left: 1px solid #666
}
.table-cell > .cell {
display: table-cell
}
.dl-list-indent {
margin-bottom: 0
}
.dl-list-indent, .dl-list-indent dd {
overflow: hidden;
zoom: 1
}
.dl-list-indent dd, .dl-list-indent dt {
display: table-cell;
line-height: 1.4;
vertical-align: top
}
.dl-list-indent dt {
padding-right: 5px;
font-weight: 400
}
.dl-list-indent dt img {
display: block
}
.dl-list-indent dd {
width: 10000px
} *******************************/
.arrow-hover-slide { overflow: hidden;
}
.arrow-hover-slide::before {
content: "》";
position: absolute;
top: 50%;
right: 0;
transform: translate(-50%, -50%);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.arrow-hover-slide:hover::before {
animation: arrow-slide 0.6s ease forwards;
}
@keyframes arrow-slide {
0% {
transform: translate(-50%, -50%) translateX(0);
opacity: 1;
}
49% {
transform: translate(-50%, -50%) translateX(100%);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) translateX(-100%);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) translateX(0);
opacity: 1;
}
} *******************************/
.link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 18px;
color: #222;
text-decoration: none;
position: relative;
cursor: pointer;
}
.arrow-container {
position: relative;
width: 40px;
height: 12px;
overflow: hidden;
}
.arrow {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
margin-left: 5px;
}
.arrow-line {
width: 25px;
height: 1px;
margin-bottom: -7px;
background-color: #666;
}
.arrow-head {
width: 10px;
height: 1px;
background-color: #666;
transform: rotate(40deg);
margin-left: -9px;
}
.arrow.clone {
transform: translate(-120%, -50%);
opacity: 0;
}
.animate .arrow.original {
transition: transform 0.4s ease, opacity 0.4s ease;
transform: translate(120%, -50%);
opacity: 0;
}
.animate .arrow.clone {
transition: transform 0.4s ease, opacity 0.4s ease;
transform: translate(0, -50%);
opacity: 1;
z-index: -1;
}  .voice__top {
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/voice/voice.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 500px;
}
@media (max-width: 768px) {
.voice__top {
background-image: url(//certain-home.com/wp-content/themes/certainhome20250623/images/voice/voice_sp.jpg);
height: 350px;
}
}