@charset "utf-8";
/* CSS Document */

#main { clear:both; width:100%; text-align:center; margin:0 auto; }
#main:after { content:" "; display:block; clear:both;}

.box { clear:both; max-width:96%; width:1200px; margin:0 auto; }
.box:after { content:" "; display:block; clear:both;}

/* ===================================================================
 mv
=================================================================== */
#mv-top { clear:both; width:100%; margin:0 auto; padding:0; text-align:center; }
#mv-top:after { content:" "; display:block; clear:both;}
#mv-top .mv-txt { text-align:center; margin:0 auto; 
    color: #FFF;
    text-shadow: 0 0 7px #AB6A54,
    0 0 7px #B87B4F,
    0 0 7px #B87B4F,
    0 0 7px #B87B4F;
}

#mv-top h2 { text-align:center; font-size:32px; padding:0; margin:0; line-height:1.5; }
#mv-top h2 strong { text-align:center; font-size:41px; padding: 0; margin:0; font-weight:normal;}

@media screen and (min-width: 641px) {
	#mv-top { position: relative; }
	#mv-top .mv-txt { position:absolute; top: 60%; left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	 }
}

@media screen and (max-width: 640px) {
	#mv-top { height:260px; background:url(../parts/mv.jpg) no-repeat center top; background-size: auto 260px; }
	#mv-top .mv-txt { text-align:center;}
	#mv-top img { display:none; }
	#mv-top h2 { font-size:19px; padding-top:120px; }
	#mv-top h2 strong { font-size:27px; }
	#mv-top p { font-size:30px;}
}

#top-news { clear:both; width:100%; margin:0 auto 80px auto; padding:35px 0; text-align:center; background:#EEE; }
#top-news:after { content:" "; display:block; clear:both;}
#top-news h3 { width:10%; float:left; margin:0 auto; padding:0; text-align:left;  }
#top-news dl { width:70%; float:left; padding:0; margin:5px 0 0 0; }
#top-news dt,
#top-news dd { padding: 15px 10px 5px 20px; text-align:left;}
#top-news dt { width: 200px; float: left; color:#202020;}
#top-news dd { margin-left: 200px; }
#top-news dd:after { content: ''; display: block; clear: both;}
#top-news .go-next { float:left; width:20%; text-align:right; padding-top:15px;}
#top-news a:bt {}
#top-news dd.pdf a { background:url(../parts/ico_pdf.png) no-repeat right 2px; padding-right:20px; }

@media screen and (max-width:960px){
	#top-news h3 { width:10%; float:left; margin:0 auto; padding:0; text-align:left;  }
	#top-news dl { width:90%; float:left; padding:0; margin:5px 0 0 0; }
	#top-news .go-next { clear:both; float:none; width:90%; text-align:center; padding-top:25px;}
}

@media screen and (max-width:640px){
	#top-news dt { width: 100%; float: none; color:#202020;}
	#top-news dd { margin-left: 0; padding-top:0; }
}


/* 見学会・イベント
-------------------------------------------------------------------- */
#top-event { clear:both; width:100%; margin:0 auto 80px auto; padding:0; }
#top-event:after { content:" "; display:block; clear:both;}
#top-event h3 { margin:0 auto 1em auto; padding:0 0 0 0.2em; text-align:center; font-size:33px; letter-spacing:0.2em; line-height:1.4; color:#000; background:url(../parts/ico_3point.png) no-repeat center 1.45em; }
#top-event h3 span { font-size:12px; color:#66A61E; font-weight:bold; letter-spacing:0.05em; }
#top-event .photo { float:left; width:33.33333333333333%;}
#top-event .photo img { width:400px; height:300px; object-fit: cover;}
#top-event .txt { float:right; width:61.5%; text-align:left;}
#top-event h4 { margin:0 auto 20px auto; padding:0; text-align:left; font-size:23px; color:#000; border-bottom:1px solid #000;  }
#top-event ul { margin:0 auto 20px auto;}
#top-event li.day { padding:0 0 0 22px; margin-bottom:5px; font-size:18px; font-weight:bold; background:url(../parts/ico_calendar.png) no-repeat 1px 6px; }
#top-event li.time { padding:0 0 0 22px; background:url(../parts/ico_clock.png) no-repeat left 4px; }
#top-event li.add { padding:0 0 0 22px; background:url(../parts/ico_map.png) no-repeat 1px 3px; }
#top-event .go-next { padding-top:30px; padding-bottom:15px;}
#top-event .go-next a.bt { padding-right:60px; padding-left:50px; }

@media screen and (max-width:640px){
	#top-event h3 { font-size:28px; letter-spacing:0.1em; }
	#top-event .photo { float:none; width:100%; margin-bottom:15px;}
	#top-event .txt { float:none; width:100%; }
}


/* 施工事例
-------------------------------------------------------------------- */
#top-gallery { clear:both; width:100%; margin:0 auto 80px auto; padding:80px 0 80px 0; background:#EEE; }
#top-gallery:after { content:" "; display:block; clear:both;}
#top-gallery h3 { margin:0 auto 1em auto; padding:0 0 0 0.2em; text-align:center; font-size:33px; letter-spacing:0.2em; line-height:1.4; color:#000; background:url(../parts/ico_3point.png) no-repeat center 1.45em; }
#top-gallery h3 span { font-size:12px; color:#66A61E; font-weight:bold; letter-spacing:0.05em; }
#top-gallery ul { width:96%; max-width:1200px; margin:0 auto; }
#top-gallery ul:after { content:" "; display:block; clear:both;}
#top-gallery li { position: relative;  float:left; width:48.333333333333336%; margin:0.8333333333333334%; background:#fff; padding:4.166666666666666%; }
#top-gallery li:after { content:" "; display:block; clear:both;}
#top-gallery li .txt { width:80%; color:#fff; text-align:center; margin:0 auto; padding:0; position:absolute; 
top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
 }

#top-gallery li a { background:#000; display: block; }
#top-gallery li a .txt { display:none;}
#top-gallery li a:hover .txt { display: block;}
#top-gallery li a:hover img{ opacity:0.45; filter: alpha(opacity=45); -webkit-transition: all .3s; transition: all .3s; }

#top-gallery li .txt h4 { margin:0 auto ; padding:0 0 0.6em 0; text-align:center; font-size:17px; letter-spacing:0.12em; line-height:1; color:#fff; }
#top-gallery li .txt p { font-size:15px; text-align:center; background:url(../parts/ico_3point_w.png) no-repeat center top; padding-top:1em; }

@media only screen and (min-width: 641px) {
	#top-gallery ul { width:96%; max-width:1200px; margin:0 auto; 
	display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex;
    -webkit-box-lines:multiple; -moz-box-lines:multiple; -webkit-flex-wrap:wrap; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; }
	#top-gallery ul li { width:48.333333333333336%; margin: 0 0.8333333333333334% 22px 0.8333333333333334%; background:#fff; padding:25px 4.166666666666666%; -webkit-flex-direction: row; flex-direction: row;}
	#top-gallery ul::after{ content:""; display: block; width:48.333333333333336%; margin: 0 0.8333333333333334% 22px 0.8333333333333334%; padding:25px 4.166666666666666%;  }
	#top-gallery img { width:480px; height:360px; object-fit: cover;}
}


@media only screen and (max-width: 640px) {
	#top-gallery h3 { font-size:28px; letter-spacing:0.1em; }
	#top-gallery ul li { float:none; width:96%; margin:0 auto 25px auto ; padding:8.32%; background:#fff; }
}

#top-gallery .go-next { padding-top:10px; padding-bottom:15px;}
#top-gallery .go-next a.bt { padding-right:60px; padding-left:50px; }


/* Instagramバナー
-------------------------------------------------------------------- */
#top-banner { clear:both; width:94%; margin:0 auto 80px auto; padding:80px 0 80px 0; background:#fff; }
#top-banner img.sp { display: none;}

@media screen and (max-width:640px){
	#top-banner img.pc { display: none; }
	#top-banner img.sp { display: block;}
}


/* 家づくり
-------------------------------------------------------------------- */
#top-method { clear:both; width:100%; margin:0 auto 80px auto; padding:0; }
#top-method:after { content:" "; display:block; clear:both;}
#top-method h3 { margin:0 auto 1em auto; padding:0 0 0 0.2em; text-align:center; font-size:33px; letter-spacing:0.2em; line-height:1.4; color:#000; background:url(../parts/ico_3point.png) no-repeat center 1.45em; }
#top-method h3 span { font-size:12px; color:#66A61E; font-weight:bold; letter-spacing:0.05em; }

#top-method .go-next { clear:both; padding-top:50px; padding-bottom:15px;}
#top-method .go-next a.bt { padding-right:60px; padding-left:50px; }

.top-build ul { width:100%; text-align:center; margin:0 auto; }
.top-build li { width:100%; height:420px; padding:50px 0 0 0; font-weight:16px; text-align:center; color:#111;}
.top-build li:after { content:" "; display:block; clear:both;}
.top-build li h4 { font-size:37px; margin:20px auto 0 auto; padding-bottom:16px; font-weight:bold; font-family:"Noto Sans Japanese"; }
.top-build li.build01 h4 { background:url(../parts/build_ico01.png) no-repeat center bottom; }
.top-build li.build02 h4 { background:url(../parts/build_ico02.png) no-repeat center bottom; }
.top-build li.build03 h4 { background:url(../parts/build_ico03.png) no-repeat center bottom; }
.top-build li h5 { font-size:20px; margin:10px auto; font-weight:bold; }
.top-build li p { margin:0 auto; text-align:left; }
.top-build li .txt { width:34%; text-align:center; margin-left:6%; padding:40px 3% 0 3%; height:320px; background-color:rgba(255,255,255,0.35);}
.top-build li.build02 .txt { margin-left:60%;}
.top-build li.build01 { background:url(../parts/build01.jpg) no-repeat right top;}
.top-build li.build02 { text-align:right; background:url(../parts/build02.jpg) no-repeat right top;}
.top-build li.build03 { background:url(../parts/build03.jpg) no-repeat right top;}

.top-build li a { text-decoration:none; color:#111;}

@media screen and (max-width:1199px){
	#top-method h3 { font-size:28px; letter-spacing:0.1em;}
	.top-build li .txt { width:54%; }
	.top-build li.build02 .txt { margin-left:40%;}
}


@media screen and (max-width:640px){
	#top-method h3 { font-size:28px; letter-spacing:0.1em;}
	.top-build li .txt { width:96%; text-align:center; margin:0 auto; padding:40px 3% 0 3%; height:320px; background-color:rgba(255,255,255,0.35);}
	.top-build li.build02 .txt { margin-left:auto;}
}

/* リフォーム
-------------------------------------------------------------------- */
#top-reform { width:100%; text-align:center; background:url(../parts/top_reform.jpg) no-repeat right top; padding:0; margin-bottom:60px; }
#top-reform .txt { width:40%; text-align:center; padding:100px 5% 0 5%; background:url(../parts/top_reform_txt.png) no-repeat right top;  }
#top-reform .txt h3 { margin:0 auto 1em auto; padding:0 0 0 0.2em; text-align:center; font-size:33px; letter-spacing:0.2em; line-height:1.4; color:#000; background:url(../parts/ico_3point.png) no-repeat center 1.45em; }
#top-reform .txt h3 span { font-size:12px; color:#fff; font-weight:bold; letter-spacing:0.05em; }
#top-reform .txt p { text-align:left; color:#fff;  }

#top-reform .go-next { padding-top:30px; padding-bottom:15px;}
#top-reform .go-next a.bt { padding-right:60px; padding-left:50px; }

#top-reform .top-reform-sp { display:none; }

@media screen and (max-width:1400px){
	#top-reform { background:url(../parts/top_reform.jpg) no-repeat right -350px top 0; }
}

@media screen and (max-width:1360px){
	#top-reform .txt { width:60%; }
}

@media screen and (min-width:961px){
	#top-reform { height:640px; }
	#top-reform .txt { height:640px; }
}

@media screen and (max-width:960px){
	#top-reform { width:100%; text-align:center; background:none; margin-bottom:60px; }
	#top-reform .txt h3 { font-size:25px; letter-spacing:0.1em; }
	#top-reform .txt { width:100%; background: none; background-color:#66A51E; margin-bottom:0; padding:30px 5% 15px 5%; ; }
	#top-reform .top-reform-sp { display: block; }
	#top-reform .go-next a.bt { padding-right:40px; padding-left:30px; }
}

/* かたやまのコト
-------------------------------------------------------------------- */

.top-company { width:100%; text-align:center; color:#111; margin-bottom:60px; }
.top-company:after { content:" "; display:block; clear:both;}
.top-company h3 { margin:0 auto 1em auto; padding:0; text-align:center; font-size:33px; letter-spacing:0.2em; line-height:1.4; color:#111;}
.top-company h3 span { font-size:12px; color:#66A61E; font-weight:bold; letter-spacing:0.05em; }

.top-company ul { width:100%; text-align:center; margin:0 auto; }
.top-company li { float:left; width:50%; height:400px; padding:160px 0 0 0; font-weight:16px; text-align:center;}
.top-company .txt { width:60%; text-align:center; margin:0 auto; padding:40px 3% 20px 3%; background-color:rgba(255,255,255,0.35);}
.top-company li h3 { font-size:25px; padding-bottom:5px; margin-bottom:12px; background:url(../parts/ico_line.png) no-repeat center bottom; }
.top-company li p { }
.top-company li.koto01 { background:url(../parts/koto01.jpg) no-repeat center top;}
.top-company li.koto02 { background:url(../parts/koto02.jpg) no-repeat center top;}
.top-company li.koto03 { background:url(../parts/koto03.jpg) no-repeat center top;}
.top-company li.koto04 { background:url(../parts/koto04.jpg) no-repeat center top;}

.top-company li a { color:#111; text-decoration:none; display:block; font-weight:bold; }

@media screen and (max-width:640px){
	.top-company h3 { font-size:28px; letter-spacing:0.1em; }
	.top-company .txt { width:90%; padding:12px 3% 3px 3%; }
	.top-company li { float:none; width:100%; height:180px; padding:40px 0 0 0; font-weight:16px; text-align:center;}
	.top-company li.koto01 { background:url(../parts/koto01.jpg) no-repeat center 50%; background-size: 100% auto;}
	.top-company li.koto02 { background:url(../parts/koto02.jpg) no-repeat center 50%; background-size: 100% auto;}
	.top-company li.koto03 { background:url(../parts/koto03.jpg) no-repeat center 50%; background-size: 100% auto;}
	.top-company li.koto04 { background:url(../parts/koto04.jpg) no-repeat center 50%; background-size: 100% auto;}
}

@media screen and (max-width:460px){
	.top-company li.koto01,
	.top-company li.koto02,
	.top-company li.koto03,
	.top-company li.koto04 { background-size: auto 180px;}
}


/* テキストボックス
-------------------------------------------------------------------- */

.top-tbox { clear:both; width:96%; max-width:1200px; margin:0 auto; text-align:center; border: 5px solid #EEE; padding:30px 20px 15px 20px; }
.top-tbox table { width: 80%; margin: 30px auto; border-collapse: collapse;}
.top-tbox table th,
.top-tbox table td { border: 1px solid #111; padding: 10px; vertical-align: middle; text-align: center;}
.top-tbox table thead th { color: #FFF; font-weight: bold; background: #555;}
.top-tbox table thead th:first-of-type { color: #555; background: #FFF;}
.top-tbox table thead td { color: #111; font-weight: bold; background: #EEE;}
.top-tbox table tbody td { color: #111;}

@media screen and (max-width:460px){
	.top-tbox { padding:12px 12px 5px 12px; text-align:left;}
}