@charset "UTF-8";

/*margin はTOPにつける！！*/
/*margin-bottom は内容物の最後のbottomにつける！！*/

body{
	font-family: 'Noto Sans Japanese-r','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','Meiryo','メイリオ','Verdana','ＭＳ Ｐゴシック',sans-serif,FontAwesome;
	color: #fff;
	background-color: #000;
	width: 100%;
}
section{
	padding-top: 1rem;
	padding-bottom: 3rem;
}
h2{
	font-size: 2.3rem;
}
h3,
h4{
	font-size: 1.5rem;
}
h3 + *,
h4 + *{
	margin-top: 1rem;
}
img{
	vertical-align: top;
}

.bold{
	font-weight: bold;
}
.center{
	text-align: center;
}
.kome{
	font-size: 0.6rem;
}
.red.kome{
	border: 1px solid #ff00c8;
	color: #ff00c8;
}
.blue-icon{
	background: #00a1e9;
	border-radius: 5px;
	color: #fff;
	font-size: 0.8em;
	padding: 0.2rem;
}



/*----------------------
配置
----------------------*/
.posr{
	position: relative;
}
.mt10{
	margin-top: 1%;
}
.clm2{
	display: flex;
}

/*----------------------
背景
----------------------*/
#bg *{
	box-sizing: border-box;
}

.wrap-inner{
	background-color: #000;
	overflow: hidden;
}
.s1{
	background: #444444;
}
.s2{
	background: #d3d3d3;
	color: #000;
}





/*----------------------
看板
----------------------*/
.hero{
	background: #000 url(img/kanban_bg.png) no-repeat scroll center top;
	overflow: hidden;
	background-size: 115%;
}
.kanban1,
.kanban2,
.kanban3,
.illust{
	position: absolute;
	display: block;
}
.item_pno{
	font-size: 0.8em;
}
h2 .kome{
	font-size: 1.8rem;
}

/*----------------------
看板
----------------------*/
.hero{
	background-position: left 30% bottom;
	min-height: 400px;
}
.kanban1,
.kanban2,
.kanban3{
	width: 150%;
	left: -25%;
}
.catch{
	text-align: center;
	margin-top: 2vh;
}
.catch h2{
	font-size: 1em;
}
.catch img{
	width: 45%;
}
.item {
	width: 25%;
	display: block;
	margin: 0 auto;
}
.item_name{
	color: #fff;
	text-align: center;
	margin-top: 1rem;
}
/*----------------------
TVCM
----------------------*/
.movie .youtube{
	position: relative;
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding-top: 56.25%;
}
.movie .youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*----------------------
S1
----------------------*/
.s1 p.kome{
	text-align: right;
}


/*----------------------
S2
----------------------*/
.s2{
	padding-bottom: 0;
}
.s2 .intro{
	background: #d3d3d3;
	color: #000;
}
.s2 > div > div{
	padding: 0.5rem 2.5%;
}
.s2 .s2p02{
	background: #000;
	color: #fff;
}
.s2 .exam{
	/*margin-top: 2rem;*/
	background: url() #e1eaef;
	padding-bottom: 3rem;
}
.s2 .graph{
	width: 50%;
	margin: 0 auto;
}
.s2 .graph_title{
	text-align: center;
}
.s2 .exam02,
.s2 .kome{
	margin-top: 2rem;
}
/*----------------------
温水洗浄コース・部屋干しコース
----------------------*/
.s3,
.s4{
	background: #fff;
	color: #000;
	padding-top: 0;
}
.s3 h4{
	color: red;
}
.s4 h4{
	color: #029fea;
}
.s3 .course,
.s4 .course{
	width: 150px;
	display: block;
}
.s3 .s3p01 .img p{
	display: flex;
}
.s3 div .clm2{
	margin-top: 3rem;
}
.s3 .txt{
	overflow: hidden;
}
.s3 .stamp{
	width: 30%;
	float: left;
}
.s3 > div:nth-child(n+2),
.s4 > div:nth-child(n+2){
	margin-top: 1rem;
	width: 97%;
	margin-right: auto;
	margin-left: auto;
}

.s4p02 .clm2 .txt{

}
.s4p02 .clm2 .pict,
.s4p03 .clm2 .pict{
	float: right;
	width: 30%;
}
.s4 .pict{

}


/*----------------------
14のコース
----------------------*/
.s5{
	background: #fff;
	color: #000;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.s5 > *{
	width: 97%;
	margin: 0 auto;
}
.s5 > div ~ div{
	margin-top: 3rem;
}
.s5 h3{
	background: #029fea;
	color: #fff;
	padding: 0.5rem;
}
.course_icons{

}
.course_icons ul{
	margin: 1rem auto 0;
}
.course_icons ul li{
	margin-top: 1rem;
}
.course_icons dl{
	overflow: hidden;
}
.course_icons dt{
	border-radius: 8px;
	padding: 0.5rem;
	margin-bottom: 1rem;
}
.course_icons .course01 dt,
.course_icons .course04 dt{
	border: 1px solid #ddd;
}
.course_icons .course02 dt{
	background: #43bffb;
	color: #fff;
}
.course_icons .course03 dt{
	background: #ff9d01;
	color: #fff;
}
.course_icons dd{
	width: 50%;
	float: left;
}

/*----------------------
便利
----------------------*/
.sub_head{
	background: #bbb;
	color: #fff;
	padding: 0.5rem;
}
.sky{
	background: #e9fbff;
	padding: 1rem;
}

/*----------------------
製品仕様
----------------------*/
.s6 .table{
	margin-top: 1rem;
}
.s6 .table div{

}
.s6 .table dl{
	text-align: center;
	border-top: 1px solid #fff;
	padding: 0.5rem;
}
.s6 .table dt{

}
.s6 .table dd{

}
.s6 .table{

}


/*スマホのみ適応 -767pxまで- */
@media screen and (max-width: 767px) {
	.sm-none{
		display: none;
	}
	.clm2{
		display: inherit;
	}
}
/*スマホ・iPadまで適応*/
@media screen and (max-width: 1024px) {
	/*----------------------
	配置
	----------------------*/

}

/*iPad縦以上適応*/
@media screen and (min-width: 768px) {
	.hero .item_name{
		width: 55%;
		float: left;
	}
	.item_name{
		margin-top: 0.5rem;
	}
	.catch img {
		width: 23%;
	}
	.hero{
		min-height: 580px;
	}
	/*section:not(.hero){
		padding-top: 1rem;
	}*/
	h3{
		font-size: 2rem;
	}
	.s1 h3:after{
		content: "";
		display: block;
		width: 23em;
		height: 2px;
		background: #fff;
		margin: 0 auto;
	}
	.s1 .ag_yu{
		width: 60%;
		margin: 0 auto;
	}
	.s2 .exam02{
				margin-top: 0rem;
			}
	.s3 .stamp{
		width: auto;
		margin-right: 1rem;
	}
	/*.s4 .clm2{
		display: flex;
	}
	.s5 .clm2{
		display: flex;
	}*/
	.s5 .clm2 div:nth-child(2n){
		margin-left: 1vw;
	}
	.s5 .clm2:nth-of-type(2){
		margin-top: 1vh;
	}
	/*.s6 .clm2{
		display: flex;
	}*/


}

/*PC以上・iPad横以上適応*/
@media screen and (min-width: 1024px) {
			.pc-none{
				display: none;
			}
			section:not(.hero){
				padding-top: 5rem;
			}
			h2{
				font-size: 2.7rem;
			}
			h2 .kome{
				display: block;
				font-size: 2rem;
			}
			.hero{
				background-size: 100%;
				overflow: hidden;
				min-height: 580px;
			}
			.hero .item_name{
				width: 40%;
			}
			.catch {
				width: 60%;
				float: right;
			}
			.item_name,
			.item_pno{
				text-shadow: none;
			}
			.item_name{
				text-align: right;
				padding-right: 5%;
				top: 0%;
				font-size: 2rem;
			}
			.item_pno{
				text-align: right;
				top: 0%;
				margin-top: 2.25rem;
				font-size: 1rem;
			}
			section.s2{
				padding-top: 0;
			}
			.s2 h3{
				font-size: 4.5rem;
			}

			#main section:not(.hero){
				width: 100%;
			}
			#main #s1{
				margin-top: 0;
			}

			.clm2 > div:nth-child(1){
				margin-right: 1rem;
			}
			/*flex の順番を変える*/
			.clm2.reverse{

			}
			.clm2.reverse div:nth-child(1){
				order: 2;
				margin-right: 0rem;
			}
			.clm2.reverse div:nth-child(2){
				order: 1;
				margin-right: 1rem;
			}
			/*.s3 div:nth-child(n+2),
			.s4 div:nth-child(n+2){
				width: 100%;
			}*/

			.s3 .big,
			.s4 .big{
				font-size: 2.5em;
				border-bottom: dotted 6px;
				margin-bottom: 1em;
				margin-top: 2em;
			}

			.s3 .course{
				width: 200px;
			}
			.s4 .course{
				width: 300px;
			}
			#s4 .s4p04{
				margin-top: 5rem;
			}
			.s4p04 .clm2{
				justify-content: space-around;
			}
			.s4p04 .clm2 .txt{
				flex-basis: 45%;
				max-width: 45%;
			}
			.exam .clm2 div{
				justify-content: space-between;
				flex: 1;
			}
			.s2 .graph{
				width: 100%;
			}
			.s2 .graph_title{
				font-size: 1.4rem;
			}
			.s2 > div > div{
				width: 85%;
				margin: 0rem auto;
				padding: 3rem 0;
			}
			#main section.s3{
				padding-top: 0;
			}
			.s3 > div:not(.kanban),
			.s4 > div:not(.kanban),
			.s5 > div{
				width: 80%;
			}
			.s5 h3{
				width: 100%;
				text-align: center;
				margin-bottom: 3rem;
			}
			.s5 .clm2{

			}
			.s5 h4{
				color: #029fea;
			}
			.course_icons{
				width: 90%;
				margin: 0 auto;
			}
			.course_icons ul{
				display: flex;
			}
			.course_icons ul li{
				flex: 1;
				margin-right: 5px;
			}
			.course_icons dt{
				text-align: center;
			}
			.course_icons ul li:nth-child(1){
				flex-basis: 24%;
				max-width: 48%;
			}
			.course_icons dl:not(.course01) dd{
				float: none;
				width: 100%;
			}
			.cnv3 dt,
			.cnv4 dt{
				color: #029fea;
				font-size: 1.25rem;
			}

			.convenient .clm2 img{
				margin: 0 auto;
				display: block;
			}
			.convenient .clm2 .cnv1 img{
				width: 50%;
			}
			.convenient .clm2 .cnv2 img{
				width: 80%;
			}
			.convenient .clm2 .cnv3 p:nth-child(2){
				flex-basis: 50%;
				max-width: 30%;
			}
			.convenient .clm2 .cnv4 p:nth-child(2){
				flex-basis: 100%;
				max-width: 50%;
			}
			.sky{
				flex-basis: 50%;
				max-width: 48%;
			}

			.s6{
				background: #f2f2f2;
				color: #000;
			}
			.s6 h3{
				text-align: center;
			}
			.s6 .clm2{
				width: 85%;
				margin: 3rem auto;
			}
			.s6 .table{
				width: 60%;
				margin: 0 auto;
			}
			.s6 .table{
				margin-top: 2rem;
			}
			.s6 .table dl{
				border-top: 1px solid #000;
				display: flex;
			}
			.s6 .table dl > *{
				display: block;
				width: 100%;
			}
			.s6 .table dt{
				flex-basis: 23rem;
				max-width: 23rem;
				text-align: left;
				text-indent: 1rem;
			}
			.s6 .table dd{
				text-align: center;
			}
			.table_after{
				width: 50%;
				margin: 3rem auto 6rem;
			}
			.ion{
				background: #fff;
			}
			.ion a{
				line-height: 100px;
			}
			.ion img{
				width: 120px;
				margin: 10px 10px 10px 20px;
			}
			.btn{

			}
			.btn a{
				display: block;
				padding: 1rem;
				text-align: center;
				flex: 1;
				border: 1px solid;
				background: #fff;
			}
			.btn a:nth-child(1){
				margin-right: 1rem;
			}


			/*----------------------
			パワフル・静音・省エネ
			----------------------*/
			.s6 .w85,
			.s7 .w85,
			.s8 .w85,
			.s13 .w85{
				margin: 3rem 7% auto auto;
				width: 75%;
			}
}
@media screen and (min-width: 1100px) {
	.hero {
		min-height: 730px;
	}
}