@charset "utf-8";

img {
	border: none;
	line-height: 0;
	vertical-align: bottom;
}


body,
header,
main,
section {
	display: block;
}

.tategaki {
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
ヘッダー
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

div#header_menu {
	background-color: #fff;
	padding: 30px 0 45px;
}

	div#header_menu > h1 {
		display: block;
		width: calc(100% - 160px);
		max-width: 300px;
		margin: 0 auto;
	}
	
		div#header_menu > h1 > a {
			display: block;
			width: 100%;
		}
		
			div#header_menu > h1 > a > img {
				width: 100%;
			}
		
		div#header_menu > h1 > p {
			font-size: 0.8em;
			text-align: center;
			margin: 10px auto 0;
			letter-spacing: 0.3em;
			text-indent: 0.3em;
		}
		

div#bg_box {
	height: 500px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

	div#header_menu > nav {
		display: flex;
		justify-content: center;
		max-width: 1280px;
		margin: 30px auto 0;
	}
	
		div#header_menu > nav > a {
			display: block;
			border-left: 1px #000 solid;
			width: 14.2857%;
			text-align: center;
			min-height: 130px;
			font-size: 1.6em;
			transition: 0.1s;
		}
		
		div#header_menu > nav > a:last-child {
			border-right: 1px #000 solid;
		}
		
		div#header_menu > nav > a:hover {
			background-color: #000;
			color: #fff;
		}
		
			div#header_menu > nav > a > span {
				text-align: left;
			}
		


@media screen and (max-width:750px){
		div#header_menu > nav > p {
			font-size: 1.2em;
			min-height: 100px;
		}
		
div#bg_box {
	height: 300px;
}
}

@media screen and (max-width:500px){
div#header_menu {
	padding: 15px 0 20px;
}

	div#header_menu > nav {
		margin: 20px auto 0;
	}
	
		div#header_menu > nav > a {
			font-size: 1.0em;
			min-height: 100px;
		}
		
div#bg_box {
	height: 180px;
}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
フッター
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

footer {
	margin:85px auto 0 auto;
	text-align: center;
	color: #51656f;
	position: relative;
}

	footer > img {
		width: calc(100% - 180px);
		max-width: 340px;
	}
	
		footer > p > br {
			display: none;
		}

	footer > ul {
		width: 100%;
		max-width: 1200px;
		margin:40px auto 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
		footer > ul > li {
			margin: 10px 20px;
		}
		
			footer > ul > li > a {
				text-decoration: none;
			}
			
			footer > ul > li > a:hover {
				text-decoration: underline;
			}
			
			footer > ul > li > a.instagram {
				display: block;
				width: 24px;
			}
			
				footer > ul > li > a.instagram > img {
					display: block;
					width: 100%;
				}
			
			
		
	
	footer > p {
		padding: 15px 0;
	}
	
		footer > p > br {
			display: none;
		}

@media screen and (max-width: 930px) {
	footer > ul {
		max-width: 330px;
		justify-content: center;
	}
}

@media screen and (max-width: 350px) {
	footer > p {
		font-size: 0.85em;
	}
}