@charset"utf-8";
/*-------------------------
.drawer css カスタマイズ
---------------------------*/
.drawer-hamburger {
    background: rgba(255,0,0,1);
}
.drawer-hamburger:hover {
		background: rgba(255,0,0,0.8);
}
.drawer-nav {
    background: rgba(255,255,255,0.8);
		z-index: 2000; 
}
/*---------------------------
 header内　タブ階層の指定 
----------------------------*/
#warp2 {
		/*position: relative;*/
}

/*--------------------------
 header toplogo設定
--------------------------*/
.logo1 {
		width: 100%;
		max-width: 3000px:
		height: auto;
		/*max-height: 50px;*/
		/*background: rgba(49,140,192,0.4);*/
		background: linear-gradient(to bottom,rgba(12,105,184,0.4),transparent);
		border-top: 0.7rem solid rgba(49,140,192,1);/* 青色 */
		position: absolute;
		top: 0;
		left: 0;
		z-index: 200;
		z-index: 0 !important;/*--ドロップダウンメニューよりも下げることで今回の症状が改善されます。--*/
}
.logo2 {
		width: 100%;
		max-width: 1024px;
		height: auto;
		margin: auto;
}
.namebox {
		width:140px;
		max-width: 100%;
		height: auto;
		margin: 0.5% 0 0 1%;
		padding-bottom: 0.5%;
		float: left;
		/*background: red;*/
		
}
.namebox a {
	text-decoration: none;
}
.namebox img {
		width: 100%;
		max-width: 100px;
		height: auto;
		display: block;
		margin: auto;
}
.name1 {
		font-weight: bold;
		text-align: center;
		line-height: 1.5rem;
}
.namebox2 {
		float: left;
		margin: 0.5% 0 0 1%;
		/*background: yellow;*/
}
.namep1 {
		font-size: 1.3rem;
		line-height:1.3;
		font-weight: bold;
}
.namep2 {
		margin-top: 2%;
		font-size: 1.1rem;
		line-height: 1.2;
		font-weight: bold;
}
#head-bgi {
		width: 100%;
		max-width: 3000px;
		/*height: auto;*/
		height: 150px;
		background: url(../img/about-sky3.png);
		margin: auto;

}
/*--------------------------------
header以下　 bodyの全体幅 
---------------------------------*/
article {
		width: 100%;
		height: auto;
		background: linear-gradient(to top, rgba(255,255,255,0.0)70%, rgba(255,255,255,1.0)90%), url(../../img-body/planking.png) repeat;
		background: -moz-linear-gradient(to top, rgba(255,255,255,0.0)70%, rgba(255,255,255,1.0)90%), url(../img-body/planking.png) repeat;
		background: -webkit-linear-gradient(to top, rgba(255,255,255,0.0)70%, rgba(255,255,255,1.0)90%), url(../img-body/planking.png) repeat;
		background: -ms-linear-gradient(to top, rgba(255,255,255,0.0)70%, rgba(255,255,255,1.0)90%), url(../img-body/planking.png) repeat;
}
.main_box {
		width: 100%;
		max-width: 1024px;
		height: auto;
		margin: auto;
		background: linear-gradient(to top, rgba(255,255,255,0.7)50%, rgba(255,255,255,1)90%);
}
/*-------------------------------
    main_nav 
----------------------------------*/
.main_nav ul {
		max-width: 90%;
	  height: auto;
		margin: auto; /*--fiexd上にmargin-topは隙間できるので指定解除--*/
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		/*background: red;*/
}
.main_nav ul li {
		flex: 0 0 16.4%;
}
.main_nav ul li a {
		width: 100%;
		height: 3rem;
		display: block;
		margin: auto;
		position: relative;		
		background: rgba(200,251,201,1);
		color: rgba(0,128,0,1);
}
/*--a hover--*/
.main_nav ul li a:hover {
		background: rgba(49,140,192,1);
		color: rgba(255,255,255,1);
}

/*-- border solid 中央から--*/
.main_nav ul li a::before{
		content: "";
		position: absolute;
		border-bottom: solid 3px rgba(255,0,0,1);
		left: 0;
		bottom: 0;
		width: 100%;
		transform: scale(0, 1);
		transition: 0.4s;
}
.main_nav ul li a:hover::before {
		transform: scale(1);
}

/*--text 縦横中央---*/
.main_nav ul li a p {
		position: absolute;
		top: 50%;
		left: 50%;
    transform: translate(-50%,-50%);
		text-align: center;
		text-decoration: none;
}

.first-a {
		font-size: 0.85rem;
		font-weight: bold;
}
.first-b {
		font-size: 0.8rem;
}
/*--nav スクロール時固定表示時の指定--*/
.fixed {
    position: fixed;
    width: 100%;
    max-width: 1024px;
    /*width: 100%;*//*--100%は幅が右に大きくはみ出る--*/
    top: 0;
    z-index: 3000;
}

/*-----------------------------
		パンくずリスト
-----------------------------------*/
.breadcrumb_inner {
    width: 100%;
    max-width: 800px;
    margin: 1% auto;
    font-size: 0.8rem;
    color: blue;
}

/*----- h1 -----------------
  ご相談下さい　Consult
--------------------------*/
.line1 {
		width: 100%;
		max-width: 700px;
		line-height: 3rem;
		margin: 3% auto 0.5%;
		background:linear-gradient(to top,rgba(49,140,192,0.5) 10%,transparent),url(../img-body/backgroundcolor-write-10px.png)repeat;
		border-bottom: 4px solid rgba(49,140,192,1);
}
h1 {
		font-size: 2rem;
		text-align: center;
}

h3 {
		font-size: 1.5rem;
		text-align: center;
		margin: 3% auto 1%;
		color: #505050;
}
#consult {
		width: 90%;
		margin: auto;
		background: rgba(0,0,0,0.05);
		padding: 5%;
		border-radius: 20px;
}
.cons-li li {
		list-style-type: none;
		font-size: 1.1rem;
		line-height: 2rem;
}
#consult h4 {
		font-size: 1.5rem;
		line-height: 1.8rem;
}
#consult h5 {
		font-size: 1.2rem;
		margin: 3% 0 2%;
}
#consult p {
		font-size: 1.5rem;
		line-height: 1.7rem;
		margin: 2% 0;
		padding: 2%;
}
.cons-img img {
		width: 90%;
		height: auto;
		display: block;
		margin: 5% auto 2%;
}
#consult h6 {
		font-size: 1.2rem;
		margin: 6% 0 1%;
}
.cons-info {
		font-size: 1.2rem;
		line-height: 1.6rem;
		width: 100%;
		padding: 3%;
		background: #fff;
		border-radius: 20px;
}
.cons-info span {
		font-size: 3rem;
		line-height: 3.3rem;
}
.bef-no1 li::before {
		content: url(../img/no1.png);
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		padding-left: 2%;
} 
.bef-no1 li {
		list-style-type: none;
		/*color: red;*/
		position: relative;
		line-height: 5rem;
		font-size: 1.1rem;
		padding: 0 5% 0 12%;
		margin: 1% 0;
		background: rgba(255,255,255,1);
		border-radius: 10px;
}
/*-----------------------------------
	footer 
-----------------------------------*/
footer {
		max-width: 100%;
		width: 1024px;
		position: relative;
		/*height: 280px;*/
		background:linear-gradient(to top, rgba(255,255,255,1)60%, rgba(255,255,255,0.3)90%);
}
.ft_twon img {
		width: 100%;
		max-width: 1024px;
		height: auto;
		margin: auto;
}
.ft_p2_a {
		text-decoration: none;
}
/*------------------
		footer nav
-------------------*/
.ft_nav ul li a {
		width: 100%;
		height: 3rem;
		display: block;
		margin: auto;
		position: relative;		
}
.ft_nav ul li a:hover {
		background: #E7FFED; 
}

/*-- border solid 中央から--*/
.ft_nav ul li a::before{
		content: "";
		position: absolute;
		border-bottom: solid 3px rgba(49,140,192,1);
		left: 0;
		bottom: 0;
		width: 100%;
		transform: scale(0, 1);
		transition: 0.4s;
}
.ft_nav ul li a:hover::before {
		transform: scale(1);
}
/*--text 縦横中央---*/

.ft_nav ul li a p {
		position: absolute;
		top: 50%;
		left: 50%;
    transform: translate(-50%,-50%);
		text-align: center;
		text-decoration: none;
		/*font-size: 0.75rem;*/
}
.first-c  {
		font-size: 0.8rem;
		font-weight: bold;
}
.first-d  {
		font-size: 0.75rem;
}

/*-----------------------------
		body underline
------------------------------*/
#ft_line {
		max-width: 100%
		width: 3000px;
		height: 3rem;
		margin:0 auto 2%;
		background-color: transparent;
		/*background:linear-gradient(to top, rgba(49,140,192,0.5)60%, rgba(255,255,255,1)90%),url(../img-body/backgroundcolor-write-10px.png)repeat;*/
		border-bottom: 0.3rem solid rgba(49,140,192,1);/* 青色 */
}
#ft_line p {
		font-size: 0.8rem;
		text-align: center;
		line-height: 3rem;
}
/*-------------------
 topに戻る　buttom
--------------------*/
#top_r {
		position: fixed;
		bottom: 5%;
		left:2%;
}
#top_r img {
    width: 50px;
}







/*　画面サイズが568pxmまではここを読み込む　
	可変サイズ時の画像が大きいのでサイズ調整のためにだけ
	最小カラムを追記する　　　　　*/
@media screen and (min-width:320px) and (max-width:568px) {
		.namebox2, .main_nav ul, .breadcrumb, #warp2:before, #top_r {
				display: none;
	}
		.namebox img {
				width: 100%;
				max-width: 50px;
				height: auto;
	}    
		.name1 {
				font-size: 0.9rem;
	}
		.line1 {
				line-height: 3rem;
	}
		h1 {
				font-size: 1.5rem;
				text-align: center;
			
	} 
		/*----- h1 -----------------
  		ご相談下さい　Consult
		--------------------------*/   
		.bef-no1 li {
				line-height: 2.5rem;
				font-size: 1rem;
				padding: 0 5% 0 15%;
				/*list-style-type: none;/ baceと同様でコメント化
				color: red;
				position: relative;
				margin: 1% 0;
				background: rgba(255,255,255,1);
				border-radius: 10px;*/
	}
		.br::before {
				content:"\A";
				white-space: pre;
	}
		/*-----------------------------------
			footer 
		-----------------------------------*/
		address {
				/*background: yellow;*/
				width: 100%;
				height: auto;
				margin: -3% auto 2%;
				padding: 2% 2% 0 2% ;
	}
		.ft_p1, .ft_p2 {
				margin: 0 auto 2%;
				text-align: center;
				line-height: 1.1rem;
	}
		.ft_p2 {
				font-size: 0.95rem;
	}
		.ft_p1::first-line {
				font-size: 1rem;
				font-weight: bold;
				line-height: 2rem;
	}
		/*------------------
				footer nav
		-------------------*/
		.ft_nav ul {
				max-width: 100%;
				margin: 0 auto 0;
				display: flex;
				flex-wrap: wrap;
	}
		.ft_nav ul li {
				flex: 0 0 33.0%;
				margin-bottom: 2%;
	}
		.ft_nav ul li a {
				width: 100%;
				height: 2.5rem;
				display: block;
				margin: auto;
				position: relative;
				color: rgba(0,128,0,1);
	}
		/*---------------------
		responsive font-size
		---------------------*/
		#ft_line p {
			font-size: 0.7rem;
	}



}


/*　画面サイズが768pxmまではここを読み込む　*/	
@media screen and (min-width:569px) and (max-width:768px) {
		.namebox img {
				width: 100%;
				max-width: 80px;
				height: auto;
	}   
		.namep1 {
				font-size: 1.1rem;
				line-height:1.2;
				font-weight: bold;
	}
		.namep2 {
				margin-top: 1%;
				font-size: 1rem;
				line-height: 1;
				font-weight: 600;
	}  
	/*-------------------------------
    main_nav 
	-------------------------------*/
	/*--text 縦横中央---*/  
	.main_nav ul {
				max-width: 100%;
				height: auto;
				margin: auto;
	}
	    .first-a {
				font-size: 0.75rem;
				font-weight: bold;
				white-space: pre;
	}
			.first-b {
				font-size: 0.7rem;
			
	}
   	.drawer-nav, .drawer-hamburger, #warp2:before, #top_r {
				display: none;
	}
		/*----- h1 -----------------
  		ご相談下さい　Consult
		--------------------------*/   
		.bef-no1 li {
				line-height: 2.5rem;
				font-size: 1rem;
				padding: 0 5% 0 15%;
				/*list-style-type: none;/ baceと同様でコメント化
				color: red;
				position: relative;
				margin: 1% 0;
				background: rgba(255,255,255,1);
				border-radius: 10px;*/
	}
		.br::before {
				content:"\A";
				white-space: pre;
	}

	/*-----------------------------------
		footer 
	-----------------------------------*/
		address {
				/*background: red;*/
				width: 100%;
				max-width: 500px;
				height: auto;
				margin: -3% auto 0;
				padding: 2%;
				display: flex;
				justify-content: center;
	}
		address span {
				display: inline-block;
				line-height: 0.95rem;
	}
	.ft_p1, .ft_p2 {
				flex: 0 0 45%;
				font-size: 0.8rem:
				line-height: 1.1rem;
	}
	.ft_p1::first-line {
				font-size: 1rem;
				font-weight: bold;
				line-height: 1rem;
	}

		/*------------------
				footer nav
		-------------------*/
		.ft_nav ul {
				max-width: 100%;
				margin: 0 auto 0;
				display: flex;
				flex-wrap: wrap;
	}
		.ft_nav ul li {
				flex: 0 0 33.0%;
				margin-bottom: 2%;
	}
		.ft_nav ul li a {
				width: 100%;
				height: 2.5rem;
				display: block;
				margin: auto;
				position: relative;
				color: rgba(0,128,0,1);
	}



}





/*　画面サイズが769pxから1024pxまではここを読み込む　*/
@media screen and (min-width:769px) and ( max-width:1024px) {
    .drawer-nav, .drawer-hamburger {
				display: none ;
	}

	/*-----------------------------------
			footer 
		-----------------------------------*/
		footer {
				height: 280px;
	}
		address {
				/*background: yellow;*/
				width: 100%;
				max-width: 530px;
				height: auto;
				margin: -3% 0 0 auto;
				padding: 2%;
				display: flex;
	}
		address span {
			display: inline-block;
			line-height: 0.95rem;
	}
		.ft_p1, .ft_p2 {
				flex: 0 0 45%;
				line-height: 1.2rem;
	}
		.ft_p1::first-line {
				font-size: 1.1rem;
				font-weight: bold;
				line-height: 1.1rem;
	}
		/*------------------
				footer nav
		-------------------*/
		.ft_nav ul {
				max-width: 90%;
			  height: auto;
				margin: 1% auto 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
		}
		.ft_nav ul li {
				flex: 0 0 16.4%;
		}
		.ft_nav ul li a {
				width: 100%;
				height: 3rem;
				display: block;
				margin: auto;
				position: relative;		
				/*background: rgba(200,251,201,1);*/
				color: rgba(0,128,0,1);
		}

		/*-----------------
			footer logo
		------------------*/
		/*--画像の挿入--*/
		footer:before {
				position: absolute;
				content: url(../../img-footer/logo_house180.png);
				top: 9%;
				left: 10%;
	}






    
}

/*　画面サイズが769pxから1024pxまではここを読み込む　*/
@media screen and (min-width:1025px) and ( max-width:3000px) {
		 .drawer-nav, .drawer-hamburger {
				display: none ;
	}
	
	/*-----------------------------------
		footer 
	-----------------------------------*/
		footer {
				height: 280px;
	}
		address {
				/*background: yellow;*/
				width: 100%;
				max-width: 680px;
				height: auto;
				margin: -3% 0 0 auto;
				padding: 2%;
				display: flex;
				flex-wrap: wrap;
	}
		.ft_p1, .ft_p2 {
				flex: 0 0 50%;
				line-height: 1.3rem;
	}
		.ft_p1::first-line {
				font-size: 1.2rem;
				font-weight: bold;
				line-height: 1.2rem;
	}
		/*------------------
				footer nav
		-------------------*/
		.ft_nav ul {
				max-width: 90%;
			  height: auto;
				margin: 1% auto 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
		}
		.ft_nav ul li {
				flex: 0 0 16.4%;
		}
		.ft_nav ul li a {
				width: 100%;
				height: 3rem;
				display: block;
				margin: auto;
				position: relative;		
				/*background: rgba(200,251,201,1);*/
				color: rgba(0,128,0,1);
		}

		/*-----------------
			footer logo
		------------------*/
		/*--画像の挿入--*/
		footer:before {
				position: absolute;
				content: url(../../img-footer/logo_house180.png);
				top: 9%;
				left: 13%;
	}










}