/* CSS Document */
* {
	box-sizing: border-box;	
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.n_wrap ul,.n_wrap figure,.n_wrap dd {
	list-style-type: none;
	margin: 0;
	padding: 0;	
}
.n_wrap h3 {
	margin-bottom: 0;	
}
div.contents_area {
	padding-top: 0;	
}
div.n_wrap h1 {
	margin: 0 auto;
	width: 95%;	
}

/*ナビゲーション*/
.page_nav {
	border-bottom: 4px solid #039;
	height: 51px;
	background-image: -o-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 50%, #D6D6D6 100%);
	margin-bottom: 20px;	
}
.page_nav ul {
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	width: 570px;
}
.page_nav ul li {
	text-align: center;
	width: 190px;
	height: 51px;
	float: left;
	border-left: 1px solid #CCC;
	padding: 5px 0 5px 0;
}
.page_nav ul li:last-child {
	border-right: 1px solid #ccc;	
}
.page_nav ul li a {
	display: block;
	width: 100%;
	padding:0;
	background-image: -o-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: -moz-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: -webkit-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: -ms-linear-gradient(bottom, #FFFFFF 50%, #D6D6D6 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 50%, #D6D6D6 100%);
	margin-bottom: 5px solid #039;

}
.page_nav ul li a:hover {
	text-decoration: none;	
	opacity: 0.6;	
}
.page_nav ul li span {
	font-size: 11px;
	display: block;	
}

/*リード文*/
.n_lead p {
	width: 100%;
	margin: 20px 0 0 0;
	padding: 0;
}
.n_lead ul {
	width: 60%;
	margin: 20px auto 80px auto;
}
.n_lead ul li {
}
.n_lead ul li:nth-of-type(2) {
	margin: 0 5%;
}
.n_lead dl {
	width: 100%;
	font-size: 14px;
	margin-left: 0;
	margin-top: 4%; 
}
.n_lead dl dt {
	margin-bottom: 10px;
}
.n_lead dl dd {
	margin: 0 0 0 10px;
}
.n_lead {
	width: 82%;
	margin: 20px auto 40px auto;	
}
.lead01 {
	width: 50%;
	float: left;	
}
.lead02 {
	width: 41%;
	float: right;
	font-size: 14px;
}



/*ギャラリー*/
.n_gallery {
	width: 95%;
	margin: 20px auto;
	position: relative;
}
h2.n_title {
	font-size: 18px;
	font-weight: bold;
	padding-left: 15px;
	border-left: 8px solid #039;	
	border-bottom: 1px solid #039;
}
h2.n_title span {
	font-size: 14px;
}

.madori1,madori2 {
	width: 100%;
	margin-bottom: 20px;	
}
.madori_1F {
	width: 48%;
	float: left;
	position: relative;	
}
.madori_num {
	width: 50%;
	float: right;	
}
.madori_num ul:nth-of-type(1) li {
	width: 31%;	
	float: left;
	margin: 15% 2% 40px 0;
}
.madori_num ul:nth-of-type(2) li {
	margin: 0 0 10px 5%;
}
.madori_2F {
	width: 49%;
	position: relative;
	float: left;
}

.madori_RF {
	width: 47%;
	float: right;
	position: relative;	
}

div.contents_area .madori_1F p,div.contents_area .madori_2F p,div.contents_area .madori_RF p {
	margin: 0;
	padding: 0;	
}



	/*----各番号の画像配置----*/
	
	.m1 {
		position: absolute;
		width: 11%;	
		bottom: 12.5%;
		left: 39%;
	}
	.m2 {
		position: absolute;
		width: 17.2%;	
		bottom: 7.5%;
		left: 7.7%;
	}
	.m3 {
		position: absolute;
		width: 18.7%;	
		bottom: 11%;
		left: 55%;
	}
	.m4 {
		position: absolute;
		width: 30.7%;	
		bottom: 56.6%;
		left: 58%;
	}
	.m5 {
		position: absolute;
		width: 39.5%;	
		bottom: 4.5%;
		left: 2.5%;
	}
	.m6 {
		position: absolute;
		width: 24.5%;	
		bottom: 59.5%;
		left: 65.5%;
	}
	.m7 {
		position: absolute;
		width: 27.2%;	
		bottom: 12%;
		left: 8%;
	}


	/*----- モーダルウィンドウ -----*/
.madori_num li img {
	vertical-align: text-top;	
}
.madori_num li span.n_red {
	color: #e94b6b;
}
.madori_num li span.n_orange {
	color: #f39700;
}
.madori_num li {
	float: left;
	margin-left: 15px;	
}
.madori_num li a:hover {

}

#open01,#open02,#open03,#open04,#open05,#open06,#open07 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	z-index: 899;
}

.close_overlay {
	top:0 ;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: absolute;
	background: #000;
	opacity: 0.5;
	z-index: 898;
}

.modal_window {
	top: 35%;
	left: 45%;
	margin: -150px 0 0 -200px;
	width: 50%;
	text-align: center;
	display: block;
	background: #fff;
	position: absolute;
	z-index: 899;
	padding: 10px 10px 10px 10px;
box-shadow:rgba(46, 46, 46, 0.65098) 0px 0px 10px 3px;
-webkit-box-shadow:rgba(46, 46, 46, 0.65098) 0px 0px 10px 3px;
-moz-box-shadow:rgba(46, 46, 46, 0.65098) 0px 0px 10px 3px;
	border-radius: 5px;
}


.modal_window h2 {
	font-size: 15px;
	text-align: left;
	text-indent: 15px;
	font-weight: normal;
}
.modal_window h2 span.n_red {
	color: #e94b6b;	
}
.modal_window h2 span.n_orange {
	color: #f39700;
}
.modal_window h2 img {
	vertical-align: text-top;
}

.modal_window p:nth-of-type(2) {
	font-size: 13px;
	text-align: left;
}

/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}
div#modal div:target {
	-webkit-animation-name: modalFadeIn; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display:block;
}





/*素材へのこだわり*/
.n_material {
	width: 95%;
	margin: 0 auto 40px;
	padding-top: 10px;
	font-size: 14px;
}
.material_box ul {
	width: 95%;
	margin: 20px auto;	
}
.material_box ul li {
	width: 48%;
	float: left;
}
.material_box ul li:last-child {
	float: right;	
}
.material_box dt {
	font-weight: bold;
	color: #400000;
	margin-bottom: 10px;
}
.material_box dt span {
	font-size: 12px;
}

/*性能について*/
.n_performance {
	width: 95%;
	margin: 0 auto 40px;
	padding-top: 10px;
	font-size: 14px;
}
.n_performance img { width: auto; max-width: 100%;}

	/*-----  HSフレーム   -----*/


.p_box {
	width: 200px;
	float: left;	
}
.p_box p span {
	font-weight: bold;	
}
.p_box:nth-of-type(1) {
	width: 28%;	
}
.p_box:nth-of-type(2),.p_box:nth-of-type(3) {
 	width: 180px;
	margin-left: 5%;
	margin-bottom: 10px;
}
.p_box:nth-of-type(4) {
	clear: both;
	width: 100%;	
}
.madori_plan {
	width: 100%;
	margin: 0 auto;
	background-color: #e9eed3;	
	clear: both;
}
.madori_plan p:first-child {
	width: 60%;	
	float: left;
}
.madori_plan p:last-child {
	width: 35%;
	float: right;
}
.madori_plan span {
	font-weight: bold;	
}
.madori_plan span.red6m {
	color: #F00;	
}
.performance1 {
	border-bottom: 1px solid #666;
	padding-bottom: 20px;
}

	/*-----  24時間全熱交換型換気システム   -----*/
.performance2 {
	border-bottom: 1px solid #666;
	padding-bottom: 20px;
}
.p2:nth-of-type(odd) {
	width: 55%;	
	float: left;
	clear: left;
}
.p2:nth-of-type(even) {
	width: 30%;	
	float: left;
	margin-left: 5%;
	margin-bottom: 20px;
}


.p2:nth-of-type(1) h4 {
	color: #ec672e;
}
.p2:nth-of-type(3) h4 {
	color: #34ace3;
}

	/*----- 太陽光発電+HEMS -----*/
.performance3 {
	border-bottom: 1px solid #666;
	padding-bottom: 20px;
}
.performance3 h3 {
	margin-bottom: 20px;	
}
.p3 h4 {
	width: 170px;
	color: #fff;
	background-color: #4b4948;	
	padding: 3px 0 3px 5px;
}
.p3 span {
	font-weight: bold;	
}
.p3:nth-of-type(odd) {
	width: 55%;	
	float: left;
	clear: right;
}
.p3:nth-of-type(even) {
	width: 25%;
	float: right;
	margin-right: 15%;
	margin-bottom: 35px;
}

	/*----- ダブル断熱工法 -----*/
.performance4 {
	border-bottom: 1px solid #666;
	padding-bottom: 20px;
}
.p4:nth-of-type(1){
	width: 60%;	
	float: left;
}
.p4:nth-of-type(2){
	width: 20%;	
	float: right;
	margin-right: 10%;
}
.p4 span {
	font-weight: bold;	
}

	/*----- 真空トリプルガラス -----*/
.p5:nth-of-type(1){
	width: 60%;	
	float: left;
}
.p5:nth-of-type(2){
	width: 12%;	
	float: right;
	margin-right: 10%;
}
.p5 span {
	font-weight: bold;	
}






/*TOPへ*/
p.n_top {
	width: 60px;
	height: 60px;
	border-radius: 5px;	
	background: -moz-linear-gradient(top,  rgba(51,65,139,0.5) 0%, rgba(28,46,135,0.81) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,65,139,0.5)), color-stop(100%,rgba(28,46,135,0.81))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(51,65,139,0.5) 0%,rgba(28,46,135,0.81) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(51,65,139,0.5) 0%,rgba(28,46,135,0.81) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(51,65,139,0.5) 0%,rgba(28,46,135,0.81) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(51,65,139,0.5) 0%,rgba(28,46,135,0.81) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8033418b', endColorstr='#cf1c2e87',GradientType=0 ); /* IE6-9 */
	padding-top: 5px;
	position: fixed;
	right: 5%;
	bottom: 5%;
	cursor: pointer;
	text-align: center;
}
p.n_top span {
	display: block;
	color: #fff;
	margin-top:-8px;
	text-align: center;
	font-weight: bold;
}


@media only screen and (max-width: 1024px) {
	span.dis_none {
		display: none;	
	}
	/*map {
		display: none;	
	}*/
}



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

/*ナビゲーション*/
.page_nav {
	height: 45px;	
}
	
.page_nav ul {
	list-style-type: none;
	margin: 20px auto;
	padding: 0;
	width: 315px;
	font-size: 12px;
}
.page_nav ul li {
	text-align: center;
	width: 105px;
	float: left;
	border-left: 1px solid #CCC;
	height: 45px;
}
.page_nav ul li:last-child {
	border-right: 1px solid #ccc;	
}

	
/*リード文*/
.n_lead p {
	width: 90%;
	margin: 60px auto 40px auto;
}
.n_lead ul {
	width: 60%;
	margin: 30px auto;
}
.n_lead ul li {
	width: 100%;
	max-width: 180px;	
	float: none;
	margin: 0 auto 20px auto;
}
.n_lead ul li:nth-of-type(2) {
	margin: 0 auto 20px auto;
}
.n_lead {
	width: 95%;
	margin: auto;	
}
.lead01 {
	width: 100%;
	float: none;	
}
.lead02 {
	width: 100%;
	float: none;
}



/*ギャラリー*/
.madori_1F,.madori_2F,.madori_RF {
	width: 100%;
	max-width: 466px;
	margin: 10px auto;
	float: none;	
}
.n_lead dl {
	width: 250px;
	float: none;	
	font-size: 14px;
	margin: 5% 0 10% 0; 
}
.n_lead p {
	width: 100%;	
}
.madori_1F {
	margin-top: 200px;	
}
.madori_num {
	width: 100%;
	float: none;
	position: absolute;
	top: 20px;	
}
.madori_num ul:nth-of-type(1) li {
	width: 31%;	
	float: left;
	margin: 5% 2% 40px 0;
}
.madori_num ul:nth-of-type(2) li {
	margin: 0 0 10px 5%;
}





	/*モーダルウィンドウ*/
.modal_window {
	top: 8%;
	left: 4%;
	margin: 0;
	width: 92%;
	padding: 0 0 10px 0;
}
.close_overlay {
	height: 70%;
}




/*性能について*/
.madori_plan p:first-child {
	width: 100%;	
	float: none;
}
.madori_plan p:last-child {
	width: 100%;
	float: none;
}
.madori_plan {
	padding-top: 1px;	
}
.p_box img {
	width: 100%;	
}
.p_box:nth-of-type(2),.p_box:nth-of-type(3) {
 	width: 46%;
	margin-left: 0;
	margin-bottom: 20px;
	float: left;
}
.p_box:nth-of-type(3) {
	float: right;	
}
.p_box:nth-of-type(1) {
	width: 100%;
	float: none;	
}
	/*----- 24時間換気システム -----*/
.p2:nth-of-type(odd) {
	width: 100%;	
	float: none;
	clear: none;
}
.p2:nth-of-type(even) {
	width: 80%;	
	float: none;
	margin: 0 auto 20px auto;
}
.performance2 h3 img {
	width: 100%;	
}

	/*----- 太陽光発電+HEMS -----*/

.p3:nth-of-type(odd) {
	width: 100%;	
	float: none;
	clear: none;
}
.p3:nth-of-type(even) {
	width: 60%;
	float: none;
	margin: 0 auto 35px auto;
}
.performance3 h3 img {
	width: 100%;	
}

	/*----- ダブル断熱工法 -----*/
.p4:nth-of-type(1){
	width: 100%;	
	float: none;
}
.p4:nth-of-type(2){
	width: 60%;	
	float: none;
	margin: 0 auto 0 auto;
}
.performance4 h3 img {
	width: 100%	
}

	/*----- 真空トリプルガラス -----*/
.p5:nth-of-type(1){
	width: 100%;	
	float: none;
}
.p5:nth-of-type(2){
	width: 50%;	
	float: none;
	margin: 0 auto;
}


	
}

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

.material_box ul {
	width: 95%;
	margin: 0 auto;	
}
.material_box ul li {
	width: 100%;
	float: none;
	margin-bottom: 20px;
}
.material_box ul li:last-child {
	float: none;	
}
.material_box dl {
	margin: 0;	
}
.p_box {
	width: 100%;
	float: none;
	margin: auto;	
}
.p_box img {
	width: 100%;	
}
.p_box:nth-of-type(2),.p_box:nth-of-type(3) {
 	width: 46%;
	margin-left: 0;
	margin-bottom: 20px;
	float: left;
}
.p_box:nth-of-type(3) {
	float: right;	
}

	
}



/*---------------------------------------- area-youtube
*/

.model_nishinomiya #area-youtube {
	margin: 50px 25px;
}

.model_nishinomiya #area-youtube h3 {
	padding-bottom: 5px;
	text-align: center;
	font-size: 19px;
	color: #004097;
	border-bottom: 1px solid #004097;
}

.model_nishinomiya #area-youtube div {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.model_nishinomiya #area-youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}


.model_nishinomiya .text_link {
	max-width: 400px;
	width: 100%;
	padding-top: 20px;
	margin: 0 auto !important;
}
.model_nishinomiya .text_link a {
	position: relative;
	display: block;
	background-color: #fff;
	border: 1px solid #ccc;
	text-align: center;
	color: #004098;
	font-size: 16px;
	line-height: 56px;
	text-decoration: none;
}
.model_nishinomiya .text_link a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(-45deg);
	border-right: 1px solid #004098;
	border-bottom: 1px solid #004098;
	width: 8px;
	height: 8px;
}
.model_nishinomiya .text_link a:hover {
	opacity: 0.6;
}
@media only screen and (max-width: 480px) {
	.model_nishinomiya .text_link {
		padding-top: 10px;
	}
}