@charset "UTF-8";

html {
	height: 100%;
}

body {
	font-family: Open Sans, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

	margin: 100px; /* bodyの外側の余白を指定する */
	padding: 10px 10px 100px 10px; /* bodyの内側余白を指定する(上:右:下:左) */

}

header {
	position: fixed; /* ヘッダーを固定する */
	top: 0; /* 上部から配置の基準位置を決める */
	left: 0; /* 左から配置の基準位置を決める */
	width: 100%; /* ヘッダーの横幅を指定する */
	height: 80px; /* ヘッダーの高さを指定する */
	padding: 20px; /* ヘッダーの余白を指定する(上下左右) */
	background-color: #fff; /* ヘッダーの背景色を指定する */
	color: #000000; /* フォントの色を指定する */
}


#top_logo {
	margin: 0 auto;
	width:20%;
}

.top{
	width:10%;	
	margin-left:60px;
	margin-bottom:60px;

}

.Contents {
	width: 100%; /* コンテンツの横幅を指定する */
	overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
	margin-top: 0px;
	margin-bottom: 20px;
}

nav {
	width:100%;	
	height:auto;
	margin: 0 auto;
	overflow: hidden;
}

.navWrap {
	margin: 0 auto;
}

.navWrap ul {
	display:block;
	text-align: center;
}

.navWrap li {
	width:50%;
	float: left;
	height: 320px;
	margin-bottom: 100px;
}

.whatis {
	width:35%;
	float:left;
	margin-left:180px;

}
.shop {
	width:60%;	
	float:left;
	margin-top:150px;
	margin-left:30px;
}

.pro {
	width:60%;	
	float:left;
	margin-top:20px;
}

.ins {
	width:60%;
	float:left;
	margin-top:170px;
	margin-left:80px;
	
}
.mail {
	width:50%;	
	float:left;
	margin-left:50px;	
	margin-top:50px;
}

.th {
	width:30%;	
	float:left;
	margin-top:150px;
	margin-left:80px;	
}

.flogo {
	margin: 0 auto;
	margin-top:200px;
}

footer {
	position: fixed; /* フッターを固定する */
	bottom: 0; /* 上部から配置の基準位置を決める */
	left: 0; /* 左から配置の基準位置を決める */
	width: 100%; /* フッターの横幅を指定する */
	height: 100px; /* フッターの高さを指定する */
	padding:10px; /* フッター内側の余白を指定する(上下左右) */
	background-color: #fff; /* フッターの背景色を指定する */
	color: #000; /* フッターのフォントの色を指定する */
	font-size:12px;
	display: flex;
}



.fimg {
	width:45%;
}
.fimg img{
	float:right;
}

.ftext{
	text-align: left;
 	margin-top:50px; 
	width:400px;
}

.what_text{
	width:100%;
	margin-top:20px;
	font-size:18px;
	
	}
	
.sn{	
	margin-top:40px;
	margin-right:150px;
	float:right;
	width:20%;
	margin-bottom:50px;
}
	
.flogo{
	margin-top:200px;	
	
}

.profile_img{
	width:80%;	
	margin-left:60px;	
}

.profile_text{
	width:100%;
	margin-top:60px;
	padding-left:60px;	
	font-size:16px;
	
	}




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




.navWrap li {
	width:50%;
	float: left;
	height: 200px;
	margin-bottom: 70px;
}



.whatis {
	width:35%;
	float:left;
	margin-top:60px;
	margin-left:180px;

}


.shop {
	width:60%;	
	float:left;
	margin-top:170px;
	margin-left:30px;
}

.pro {
	width:60%;	
	float:left;
	margin-top:40px;
}

.ins {
	width:60%;
	float:left;
	margin-top:190px;
	margin-left:80px;
	
}
.mail {
	width:50%;	
	float:left;
	margin-left:70px;	
	margin-top:50px;
}

.th {
	width:30%;	
	float:left;
	margin-top:170px;
	margin-left:80px;	
}



.flogo {
	margin: 0 auto;
	margin-top:70px;
}


}




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

	margin: 30px; /* bodyの外側の余白を指定する */
	padding: 10px 10px 100px 10px; /* bodyの内側余白を指定する(上:右:下:左) */

}
	
	header {
	height: 80px; /* ヘッダーの高さを指定する */
	}
		
	#top_logo {
		margin-top:20px;
		width:40%;
	}
	
.navWrap li {
	width:50%;
	float: left;
	height: 320px;
	margin-bottom: 100px;
}
	
.top{
	width:10%;	
	margin-top:80px;
	margin-left:0px;
	margin-bottom:20px;

}
	nav {
		width:100%;	
	}

	.navWrap li {
		margin-top:30px;
		height: 110px;
	}
	
	.whatis {
		width:60%;
		margin-top:60px;
		margin-left:50px;
	}
	
	.shop {
		width:90%;
		margin-top:90px;
		margin-left:30px;
	}
	
	.pro {
		width:80%;
		margin-top:20px;
		margin-right:0px;
	}
	
	.ins {
		width:100%;
		margin-top:80px;
		margin-left:0px;
		float:left;
	}
	
	
	.mail {
		width:80%;
		margin-top:0px;
		margin-left:0px;
	}

	.th {
		width:60%;
		margin-top:50px;
		margin-left:10px;
	}


.fimg img{
	width:35%;
	margin-top:0px;
}

.ftext{
	text-align: left;
	width:600px;
	margin-top:10px;
}

#top_img{width:15%;}


.what_text{
	width:100%;
	margin-top:80px;
	margin-left:0px;
	font-size:14px;
	
	}


.profile_text{
	margin-top:20px;
	padding-left:0px;
	font-size:12px;
	
	}

.profile_img{
	width:120%;	
	margin-top:80px;

	margin-left:0px;
	margin-bottom:40px;
}

.flogo{
	margin-top:50px;	
	
}


.sn{	
	float:right;
	width:40%;
	margin-right:0px;
	margin-bottom:40px;
}

footer {
	position: fixed; /* フッターを固定する */
	bottom: 0; /* 上部から配置の基準位置を決める */
	left: 0; /* 左から配置の基準位置を決める */
	width: 100%; /* フッターの横幅を指定する */
	height: 50px; /* フッターの高さを指定する */
	padding:10px; /* フッター内側の余白を指定する(上下左右) */
	background-color: #fff; /* フッターの背景色を指定する */
	color: #000; /* フッターのフォントの色を指定する */
	font-size:12px;
	display: flex;
}