@charset "utf-8";

header,
main,
footer {
	display: block;
	width: 100%;
	min-width: 1200px;
	overflow: auto;
}

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

}

/*������������������������������������������������������������
header
������������������������������������������������������������*/

header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-image: url('../img/header_bg.jpg');
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

	header > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: row-reverse;
		width: 100%;
		max-width: 860px;
		margin: 0 6% 0 auto;
	}
	
		header > div > h1 {
			display: block;
			width: 100%;
			max-width: 172px;
		}
		
			header > div > h1 > img {
				width: 100%;
			}
			
		header > div > ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
			flex-direction: row-reverse;
			width: calc(100% - 225px);
			margin: 60px 0 180px;
		}
		
			header > div > ul > li {
				width: 100%;
				max-width: 34px;
			}
			
			header > div > ul > li.icon {
				max-width: 50px;
			}
			
				header > div > ul > li > a {
					display: block;
					width: 100%;
					padding: 5px;
					box-sizing: border-box;
				}
				
				header > div > ul > li > a:hover {
					background-color: rgba(255,255,255,0.5);
				}
				
				
					header > div > ul > li > a > img {
						width: 100%;
					}
		
		header > div > a {
			display: block;
			width: 100%;
			max-width: 182px;
			padding: 5px;
			box-sizing: border-box;
		}
		
		header > div > a:hover {
			background-color: rgba(255,255,255,0.5);
		}
		
		
			header > div > a > img {
				width: 100%;
			}
		
		header > div > h1.page {
			max-width: 32px;
			margin: 60px 50px 130px auto;
		}

@media screen and (max-width: 1200px) {
	header {
		min-height: 0;
		height: 850px;
	}
}

/*������������������������������������������������������������
footer
������������������������������������������������������������*/

footer {
	display: block;
	width: calc(100% - 20px);
	margin: 170px auto 0;
}

	footer > img {
		display: block;
		width: 100%;
		max-width: 102px;
		margin: 0 auto;
	}
	
	footer > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: row-reverse;
		width: 100%;
		max-width: 650px;
		margin: 60px auto 0;
	}
	
		footer > ul > li {
			width: 100%;
			max-width: 28px;
		}
		
		footer > ul > li.icon {
			max-width: 38px;
		}
		
			footer > ul > li > a {
				display: block;
				width: 100%;
				padding: 5px;
				box-sizing: border-box;
			}
			
			footer > ul > li > a:hover {
				opacity: 0.5;
			}
			
			
				footer > ul > li > a > img {
					width: 100%;
				}
	
	footer > p {
		width: 100%;
		margin: 70px auto;
		text-align: center;
		font-size: 1.1em;
	}