@charset "UTF-8";

#house-header {background-image: url("../img/diy-header.jpg");}
#contents{padding: 0;}

#movie {
	padding-top: 80px;
	padding-bottom: 100px;
}
@media only screen and (max-width: 800px)  {
	#movie {
		padding-top: 0;
		padding-bottom: 80px;
	}
}
#movie .video-wrap {
	width: 100%;/*背景色を横幅いっぱいに広げる*/
	text-align: center;
	margin: auto;
	background: #f0f0f0;
}
#movie .video-wrap video {
	width: 100%;
	cursor: pointer;
}

#diy-01 {
	padding-bottom: 130px;
}
@media only screen and (max-width: 800px)  {
	#diy-01 {
		padding-bottom: 80px;
	}	
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
#diy-01 .pc { display: block !important; }
#diy-01 .sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 800px) {
#diy-01 .pc { display: none !important; }
#diy-01 .sp { display: block !important; }
}
#diy-01 .container {
	padding : 60px;
}
@media only screen and (max-width: 800px)  {
	#diy-01 .container {
		padding : 40px 10px;
	}
	#diy-01 h3 {
		padding-left:20px;
	}
}
#diy-01 .panel-inner {
	text-align: center;
	padding-top: 50px;
}
#diy-01 .panel-inner img {
	width: 670px;
	max-width: 100%;
	margin:0 auto;
}
/*
@media only screen and (max-width: 800px)  {
	#diy-01 h3 img {
		width:
	}
}
*/
.diy-02-title,
.diy-03-title {
	background-color: #042275;
	text-align: center;
	padding-top: 120px;
	padding-bottom: 50px;
}
@media only screen and (max-width: 800px)  {
	.diy-02-title,
	.diy-03-title {
		padding-top: 50px;
		padding-bottom: 50px;
	}	
}

#house-03 .img-wrap {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 30px;
}
#h03-txt p span {
	background-color: #ffff00;
}


#house-03{padding: 0;position: relative;}
#h03-img {width: 50%;padding-top: 50%;background: url("../img/diy-02-2.jpg") no-repeat center center;background-size: cover;}
#h03-txt {width: 50%;background-color: #fff;padding: 6.944444444444%;}
#h03-txt h2{margin-bottom: 28px;padding-bottom: 30px;border-bottom: 1px dotted #ccc;line-height: 1;}
@media (max-width: 960px) {
	#h03-txt h2{margin-bottom: 18px;padding-bottom: 20px;}
}
@media (max-width: 767px) {
	#h03-img {width: 100%;padding-top: 85%;}
	#h03-txt {width: 100%;padding: 10%;}
}




#house-04{padding: 80px 0 120px;position: relative;text-align: center;}
#house-04 h2{text-align: center;margin-bottom: 60px;line-height: 1;}
#house-04 dt{background-color: #F2F4F8;line-height: 38px;}
#house-04 dd{padding: 15px 0 35px;position: relative;}
#house-04 dd::after{content: '';width: 100%;height: 6px;background: url("../img/prod-04-arrow.svg") no-repeat center center;position: absolute;left: 0;bottom: 15px;}
#house-04 dd:last-child{padding-bottom: 0;}
#house-04 dd:last-child::after{display: none;}
@media (max-width: 767px) {
	#house-04{padding: 60px 0 80px;}
	#house-04 h2{margin-bottom: 45px;}
	#house-04 dd{text-align: justify;}
}

#house-05{padding: 0;margin-bottom: 120px;position: relative;}
#h05-img {width: 50%;padding-top: 50%;background: url("../img/diy-03-2.jpg") no-repeat center center;background-size: cover;}
#h05-txt {width: 50%;background-color: #fff;padding: 6.944444444444%;} 
#h05-txt h2{margin-bottom: 60px;line-height: 1;text-align: center;}
#h05-txt dt{font-weight: bold;margin-bottom: 5px;padding-bottom: 5px;border-bottom: 1px dotted #ccc;color: #042275;position: relative;padding-left: 1.4em;text-indent: -1.4em;}
#h05-txt dt::before {content: 'Q. ';}
#h05-txt dd{padding-bottom: 30px;padding-left: 1.4em;text-indent: -1.4em;position: relative;}
#h05-txt dd::before {content: 'A. ';color: #33A1DB;}
#h05-txt dd:last-child{padding-bottom: 0;}
@media (max-width: 960px) {
	#h05-txt h2{margin-bottom: 45px;}
}
@media (max-width: 767px) {
	#house-05{margin-bottom: 80px;}
	#h05-img {width: 100%;padding-top: 85%;}
	#h05-txt {width: 100%;padding: 10%;}
}

.panel{background-color: #fff;padding: 90px 5.555555555556%;}
@media (max-width: 960px) {
	.panel{padding: 60px 5.555555555556%;}
}