@charset "utf-8";

@import url(default.css);
@import url(base.css?style=ver20250609);


	#contentheader{
		/*height:130px;*/
		background-color:#f2e290;
		/*border-bottom:1px dotted #006ab3;*/
	}
	.fixedHeader#index #contentheader{
	}


	#innerwrapper{
		background-image:url(../heating-unit/images/bg_content-menu.png);
	}

@media screen and (max-width:1020px){
	
	#contentheader{
		/*height:60px !important;*/
		background-color:#f2e290;
	}
	
}

@media screen and (max-width:640px){
	
	#innerwrapper{
		height:auto;
		background-color:#94cff7;
	}
	
}
	
	#index #contentheader{
		height:80px;
		border-bottom:none;
	}
	
	.fixedHeader #contentheader{border-bottom:none;}

	
		#innerwrapper{
			background-color:#f2e290;
		}


	


			#contentheader-inner h2{
				/*width:320px;*/
				margin-right:40px;
				float:left;
			}
		
		@media screen and (max-width:1020px){
			
			#contentheader-inner h2 img{
				width:300px;
				margin-top:13px;
			}
			
		}
	
	
				#cotentmenu li a{color:#665e33;}
				#cotentmenu li span{
					color:#665e33;
				}
				#index #cotentmenu li span{
					background-color: #fff1c0;
				}

				#outline #cotentmenu li span{
					background-color: #fff;
				}
				
				#cotentmenu li a:hover{color:#998d4c;}




			@media screen and (max-width:640px){

				#cotentmenu li span{
					background-color: #fff;
					-moz-box-shadow:0 0 0 1px #665e33 inset;
					-webkit-box-shadow:0 0 0 1px #665e33 inset;
					box-shadow:0 0 0 1px #665e33 inset;
				}

				#cotentmenu li a{
					color:#fff;
					background-color:#665e33;
				}
				
				#cotentmenu li a:hover{
					color:#665e33;
					background-color: background-color: #fff1c0;
					-moz-box-shadow:0 0 0 1px #665e33 inset;
					-webkit-box-shadow:0 0 0 1px #665e33 inset;
					box-shadow:0 0 0 1px #665e33 inset;
				}

			}				

		#sidebar li a{color:#006ab3;}
		#sidebar li a:hover{color:#c00;}


/*********************    ********************/


	#index #imagemain{
		background-image:url(../heating-unit/images/img_heating-unit.jpg);
		background-repeat:no-repeat;
		background-position:50% 0;
		background-color:#fff1c0;
	}
		
				
	.fixedHeader#index #imagemain{
		padding-top:80px;
		background-position:50% 80px;
	}

@media screen and (max-width:640px){
				
	.fixedHeader#index #imagemain{
		background-color:#f2e290;
	}
}
	
		#imagemain-inner{
			position:relative;
			max-width:980px;
			width:100%;
			height:244px;
			margin:0 auto;
			padding-top:56px;
			z-index:2;
		}
		

			#maincatch{
				max-width:677px;
				width:90%;
				margin:0 0 30px 15px;				
			}
			#maincatch img{width:100%;}

			#maincatch2{
				display:none;			
			}
			#maincatch2 img{width:100%;}

			.addcatch{
				width:400px;
				height: 30px;
				margin:0 0 0 15px;
				padding: 10px 0;
				font-size:1.4em;
				font-weight: 700;
				text-align:center;
				background-color: #fff;
				float: right;
				position: relative;
				left: -10%;
			}

		@media screen and (max-width:980px){

			#maincatch{
				margin:0 5% 30px;	
			}

			.addcatch{
				margin: 0 auto;
				float: none;
				left:0;
			}

		}

		@media screen and (max-width:770px){

			#maincatch{
				display:none;				
			}

			#maincatch2{
				display:block;
				max-width:377px;
				width:80%;
				margin:10px auto 0;	
				position:relative;
				top:0;			
			}

			.addcatch{
				max-width: 380px;
				width: 90%;
				margin: 0 auto -50px;
				padding:5px 0;
				font-size: 1.2em;
				top:180px;
			}

		}

		@media screen and (max-width:430px){
			
			.addcatch{
				top:160px;
			}

		}

		@media screen and (max-width:370px){
			
			.addcatch{
				font-size: 1.1em;
			}

		}

		.contentlabel{
			color:#665e33;
			background:#f2e291;
		}



			.unititem{
				width:360px;
				float:left;
			}


		#catch_heating-unit{
			max-width:700px;
			width:100%;
			margin:0 auto 30px;
			
		}
		#catch_heating-unit img{width:100%;}



	/* 浴室 */

	#bathroom{
		position:relative;
		max-width:980px;
		width:100%;
		margin:0 auto;
	}

		#bathroom-inner{
			position:relative;
			max-width:980px;
			width:100%;
			margin:0 auto -220px;
			padding-top:220px;
			top:-220px;
		}

	.content{
		width:780px;
		float:right;
	}

@media screen and (max-width:1020px){

	.content{
		max-width:780px;
		width:90%;
		margin:0 auto 25px;
		float:none;
		position: relative;
		top:25px;
	}

}

@media screen and (max-width:480px){

	.content{
		margin:0 auto 20px;
		top:20px;
	}

}

		#bathroom .subtitle{
			position:relative;
			margin-bottom:-30px;
			top:-30px;
		}

	@media screen and (max-width:1020px){
	
		#bathroom .subtitle{
			position:relative;
			top:-30px;
		}
	
	}


		.subcontent h4{
			position:relative;
			height:35px;
			font-size:1.0em;		
			font-weight:bold;
		}

		#bathroom #secchi-rei{
			max-width:500px;
			width:64%;
			float:left;
		}
		
	@media screen and (max-width:980px){

		#bathroom #secchi-rei{
			max-width:500px;
			width:100%;
			margin:0 auto;
			float:none;
		}

		#bathroom #secchi-rei p{
			width:100% !important;
			margin:0;
		}
		

		#bathroom #secchi-rei img:nth-of-type(1){
			width:43%;
			float:left;
		}

		#bathroom #secchi-rei img:nth-of-type(2){
			width:54%;
			float:right;
		}
		
	}
		

			#bathroom #secchi-rei p{
				margin:0;
				float:left;
			}

			#bathroom #secchi-rei p:nth-of-type(1){
				width:215px;
				margin-right:15px;
			}
			#bathroom #secchi-rei p:nth-of-type(2){width:268px;}



			#bathroom #unit-rei{
				width:250px;
				float:right;
			}
			
		@media screen and (max-width:980px){

			#bathroom #unit-rei{
				clear:both;
				max-width:360px;
				width:100%;
				margin:0 auto;
				padding:30px 0;
				float:none;
			}
			
		}
	
	
				#bathroom #unit-rei table{
					width:100%;
					border-collapse:collapse;
				}
				
					#bathroom #unit-rei th,
					#bathroom #unit-rei td{
						border:1px solid #ccc;
					}

					#bathroom #unit-rei th{
						padding:4px;
						font-size:90%;
						line-height:100%;
						background:#ffd900;
					}

					#bathroom #unit-rei td{
						padding:7px;
						text-align:center;
						line-height:120%;
					}


		#bathroom4{
			max-width:360px;
			width:100%;
			margin:30px 0;
			float:right;
		}
		
	@media screen and (max-width:840px){

		#bathroom4{
			display:block;
			margin:30px auto;
			float:none;
		}
		
	}

		#temp-sensor{
			width:100%;
			margin-top:20px;
		}
		
	@media screen and (max-width:840px){

		#temp-sensor{
			max-width:380px;
			width:100%;
			margin:0 auto;
			float:none;
		}
		
	}

			#temp-sensor .contentlabel{
				margin:0;
			}
			
				#sensorimage{
					text-align:center;
					margin-top:30px;
				}
				
				#sensorleft{
					width:50%;
					float:left;
				}

			@media screen and (max-width:840px){
				
				#sensorleft{
					width:100%;
					float:none;
				}

			}
				
				
				#sensorleft table{
					width:100%;
					border-collapse:collapse;
				}
				
					#sensorleft th,
					#sensorleft td{
						border:1px solid #ccc;
					}

					#sensorleftr th{
						padding:4px;
						font-size:90%;
						line-height:100%;
						background:#e2f2da;
					}

					#sensorleft tr:first-child th{
						background-image:url(../shared/line_naname.png);
						background-repeat:no-repeat;
						background-size:100% 100%;
						padding:5px 5px 2px;
						font-weight:normal;
						border-bottom:none;
						border-right:none;
					}
					#sensorleft tr:first-child th p{
						width:50%;
						float:right;
						margin:0;
					}
					#sensorleft tr:first-child th p:last-child{
						clear:right;
						float:left;
						color:#665e33;
					}

					#sensorleft td{
						padding:7px;
						text-align:center;
						line-height:120%;
					}
					#sensorleft tr:nth-of-type(1) td{background:#ffd900;}

					#hosyo-badge{
						position:relative;
						width:74px;
						height:74px;
						margin-bottom:-78px;
						left:720px;
					}

				@media screen and (max-width:860px){

					#hosyo-badge{
					}

				}

				@media screen and (max-width:840px){

					#hosyo-badge{
						display:block;
						margin:0 auto -100px;
						top:-440px;
						left:170px;
					}

				}

				@media screen and (max-width:480px){

					#hosyo-badge{
						left:140px;
					}

				}


	/* 詳細 */

	#detail{
		background:url(../heating-unit/images/bg_detail.png) repeat-x;
		padding-bottom:40px;
	}

		#detail-inner{
			position:relative;
			width:980px;
			margin:0 auto -220px;
			padding-top:220px;
			top:-220px;
		}

		#detail-inner .subtitle{
			position:relative;
			margin-bottom:-30px;
			top:-30px;
		}

			#detail1{
				width:380px;
				margin:0 0 0 5px;
				float:left;
			}

		
		#detail .contentlabel{margin:40px 0 28px;}
				
				#detail-inner table{
					width:100%;
					border-collapse:collapse;
				}
				
					#detail-inner th,
					#detail-inner td{
						border:1px solid #ccc;
					}

					#detail-inner th{
						width:50%;
						padding:7px 0;
						font-size:90%;
						line-height:100%;
						background:#ffd900;
					}

					#detail-inner td{
						padding:10px 0;
						text-align:center;
						line-height:120%;
					}


			#detail .unititem{
				width:340px;
				padding:0 20px;
			}

				#detail .unititem ol{
					height:120px;
					margin:0 0 20px 15px;
				}

					#detail .unititem li{
						line-height:170%;
						margin-bottom:10px;
					}




/*********************  商品概要  ********************/


	.outline #content-wrapper{
		max-width:980px;
		width:100%;
		margin:0 auto;
		padding-top:10px;
	}
	.fixedHeader.outline #content-wrapper{padding-top:188px;}

		.outline #content-wrapper .content{
			padding:0 0 60px;
		}
	
	@media screen and (max-width:1020px){

		.outline #content-wrapper .content{
			margin-top:-30px;
			padding:0 0 80px;
		}
	
	}


	/***********  オプション  **********/

	#option #content-wrapper{
		padding-bottom:20px;
	}

		#option #content-wrapper .content{
			padding-top:50px;
		}

	@media screen and (max-width:1020px){

		#option #content-wrapper .content{
			margin-top:-30px;
			padding:0 0 80px;
		}

	}

	
		#option .contentlabel{margin:20px 0 28px;}


			#option .imagelist{
				max-width:400px;
				width:100%;
				margin:0 auto;
			}
					
				#option .imagelist li{
					width:50%;
					float:left;
					text-align:center;
					list-style:none;
					font-size:85%;
				}

					
				#option .imagelist li img{width:78%;}

						
	
		#option #table1{
			max-width:760px;
			width:100%;
			margin:0 auto 30px;
		}

		#option #table2{
			max-width:500px;
			width:100%;
			margin-right:10px;
			float:right;
		}

	@media screen and (max-width:770px){

		#option #table2{
			margin:0 auto;
			float:none;
		}

	}

		#option #table1 table,
		#option #table2 table{
			width:100%;
			border-collapse:collapse;
		}
		
			#img-danday1{
				width:82px;
				height:102px;
				position:relative;
				margin:0 0 -102px;
				top:-88px;
				left:685px;
			}
	
			#option #table1 th,
			#option #table2 th{
				padding:10px 0;
				color:#665e33;
				font-weight:normal;
				background:#fff1c0;
				line-height:130%;
				font-size:85%;
			}
			#option #table2 th{
				color:#1e4d00;
				background:#e7f2e0;
			}

			#option #table2 tr:first-child td{
				color:#1e4d00;				background:#e7f2e0;

			}

			#option #table1 .tableheader th{
				color:#fff1c0;
				background:#998d4c;
				font-weight:bold;
			}
			#option #table1 .tableheader th:nth-of-type(1){color:#fff1c0;font-weight:normal;}
			#option #table1 .tableheader th:nth-last-of-type(1){border-left:1px solid #fff;}
			#option #table1 .tableheader th:nth-last-of-type(2){border-right:1px solid #fff;}



			#option #table1 .tableheader th:first-child{
				background-image:url(../shared/line_naname.png);
				background-repeat:no-repeat;
				background-size:100% 100%;
				padding:5px 5px 2px;
				font-weight:normal;
				border-bottom:none;
				border-right:none;
			}
			#option #table1 .tableheader th:first-child p{
				width:50%;
				float:right;
				margin:0;
			}
			#option #table1 .tableheader th:first-child p:last-child{
				clear:right;
				float:left;
			}


			#option #table2 tr:first-child th{
				background-image:url(../shared/line_naname.png);
				background-repeat:no-repeat;
				background-size:100% 100%;
				padding:5px 5px 2px;
				font-weight:normal;
				border-bottom:none;
				border-right:none;
			}
			#option #table2 tr:first-child p{
				width:50%;
				float:right;
				margin:0;
			}
			#option #table2 tr:first-child p:last-child{
				clear:right;
				float:left;
			}


	
			#option #table1 td,
			#option #table2 td{
				padding:10px 0;
				font-size:90%;
				text-align:center;
				line-height:130%;
			}
			#option #table1 td{width:35%;}

		@media screen and (max-width:640px){
			#option #table1 td{width:40%;}
		}


		#image3{
			width:calc(100% - 520px);
			float:left;
			display:-webkit-flex;
			display:flex;
			justify-content: center;
			-webkit-align-items:center;
			align-items:center;
		}
		#image3 .inner{
			width: 100%;
			text-align: center;
		}

	@media screen and (max-width:980px){
		
		#image3{
			margin-left:0;
		}

	}

	@media screen and (max-width:770px){
		
		#image3{
			display:block;
			width:auto;
			margin:0 auto 20px;
			float:none;
		}

	}




	.iotflow{margin-bottom: 50px;}

		.iotflow .image1{
			width:100%;
			height:auto;
			
		}
		.iotflow .image2{display: none;}

	@media screen and (max-width:640px){

		.iotflow .image1{display: none;}
		.iotflow .image2{
			display: block;
			max-width: 360px;
			width:100%;
			height:auto;
			margin: 0 auto;
		}

	}




		.iotflow + table{
			max-width:640px;
			width:100%;
			margin:0 auto;
			border-collapse:collapse;
		}

	@media screen and (max-width:770px){

		.iotflow + table br{display: none;}

	}

	@media screen and (max-width:480px){

		.iotflow + table{
			max-width: 360px;
			width:100%;
			margin:0 auto;
		}
		.iotflow +  table br{display: inline;}

	}


			.iotflow + table th{
				padding: 3px;
				color:#fff;
				border:1px solid #369;
				background-color: #369;
			}

			.iotflow + table td{
				padding:10px 20px 10px 10px;
				border:1px solid #369;
			}
			.iotflow + table td p{
				margin: 0;
				line-height: 1.5em;
			}


			.linkfh-call{
				max-width: 780px;
				width: 100%;
				margin:0 auto 50px;
			}
			.linkfh-call img{
				width: 100%;
				height: auto;
			}

		@media screen and (max-width:480px){

			.linkfh-call{
				margin:0 auto 20px;
			}
		}


			.link-ban{
				max-width: 640px;
				width: 100%;
				margin:30px auto 50px;
				position: relative;
			}
				.link-ban img{
					width: 100%;
					height: auto;
				}
				.link-ban p{
					margin: 0 0 3px;
					color:#c33;
				}

		@media screen and (max-width:480px){

			.link-ban{
				margin:30px auto;
			}
			
		}



			#option .r-num{
				margin-right: 20px;
				position: relative;
				left:20px;
			}

			#option .r-num:before{
				margin-right:-16px;
				color:#369;
				position:relative;
				left:-20px;
			}
			#option .r-num1:before{content:"❶"}
			#option .r-num2:before{content:"❷"}
			#option .r-num3:before{content:"❸"}
			#option .r-num4:before{content:"❹"}
			#option .r-num5:before{content:"❺"}


		.iotflow + table + ul{
			margin: 30px auto;
		}

			.iotflow + table + ul li{
				margin-left: 20px;
				margin-bottom: 5px;
			}

			#option ol.remarkstext{
				margin:0 0 0 20px;
			}

				#option ol.remarkstext li{
					margin-bottom:5px;
				}

				#option ol.remarkstext ul{
					margin:0 0 0 20px;
				}
			
		.iotflow + table + ul + .iotflow{
			margin-bottom:20px;
		}
	


		#tableiot{
			width:500px;
			float:right;
			display:-webkit-flex;
			display:flex;
			justify-content: center;
			-webkit-align-items:center;
			align-items:center;
		}

	@media screen and (max-width:770px){

		#tableiot{
			width:100%;
			margin:0 auto;
			float:none;
		}

	}

		#tableiot table{
			width:100%;
			border-collapse:collapse;
		}
	
			#tableiot th{
				padding:10px 0;
				color:#072400;
				font-weight:normal;
				background:#e3f1ff;
				line-height:130%;
				font-size:85%;
			}
			#tableiot th{
				background:#e7f2e0;
				color:#1e4d00;
			}

			#tableiot tr:first-child td{
				background:#e7f2e0;
				color:#1e4d00;
			}

			#tableiot tr:first-child th{
				background-image:url(../shared/line_naname.png);
				background-repeat:no-repeat;
				background-size:100% 100%;
				padding:5px 5px 2px;
				font-weight:normal;
				border-bottom:none;
				border-right:none;
			}
			#tableiot tr:first-child p{
				width:50%;
				float:right;
				margin:0;
			}
			#tableiot tr:first-child p:last-child{
				clear:right;
				float:left;
			}
	
			#tableiot td{
				padding:10px 0;
				font-size:90%;
				text-align:center;
				line-height:130%;
			}

		
		#iotimage{
			width:calc(100% - 520px);
			float:left;
			display:-webkit-flex;
			display:flex;
			justify-content: center;
			-webkit-align-items:center;
			align-items:center;
		}
		#iotimage .inner{
			width: 100%;
		}

	@media screen and (max-width:770px){
		
		#iotimage{
			width:100%;
			float:none;
			margin: 0 auto;
		}

	}
		
		#iotimage p{
			margin-top:5px;
			font-size: 0.98em;
			text-align: center;
			line-height: 1.4em;
			position: relative;
		}
		
		#iotimage img{
			display:block;
			margin:0 auto;
		}