html,body
{
	margin:0px !important;
	padding:0px !important;
	font-family: 'Noto Serif JP', serif;
	font-size:16px;
	font-weight:200;
	line-height:24px;
	color:#333;
	background:#fff;
}

a
{
	color:#000;
	text-decoration:none;
}

a:hover
{
	text-decoration: underline;
}

h1
{
	line-height:36px;
	font-size:36px;
	font-weight:300;
	color:#000;
	letter-spacing: 1px;
	text-transform: uppercase;
}

h2
{
	margin:0px 0px 20px 0px;
	padding:0px;
	line-height:26px;
	font-size:20px;
	font-weight:300;
}

h3
{
	margin:0px 0px 20px 0px;
	padding:0px;
	line-height:20px;
	font-size:16px;
	font-weight:300;
}

blockquote
{
	margin:0px 0px 20px 0px;
	padding:0px;
}

.hr
{
	display:block;
	margin:0px auto 40px auto;
	width:240px;
	max-width:100%;
	height:2px;
	background:#000;
}

.container
{
	clear:both;
	float:left;
	width:100%;
}

.content
{
	margin:0px auto;
	padding:0px 40px;
	width:100%;
	max-width:980px;
	box-sizing:border-box;
}

.container::after,
.content::after
{
	display:block;
	content:'';
	clear:both;
	float:left;
	width:100%;
	height:0px;
}

#header
{
	z-index:2;
	position:fixed;
	padding:40px 0px 20px 0px;
	width:100%;
	height:140px;
	top:0px;
	left:0px;
	background:#fff;
	box-sizing:border-box;
}

#header > .content
{
	position:relative;
	height:80px;
}

#header > .content::after
{
	position:absolute;
	top: 0px;
	left:20px;
	content:' ';
	display:block;
	height:2px;
	width:calc(100% - 40px);
	background:#000;
}

#header > .content > section::before
{
	position:absolute;
	top: 0px;
	left:20px;
	content:' ';
	display:block;
	height:800px;
	width:2px;
	background:#000;
}

#header > .content > section::after
{
	position:absolute;
	top: 0px;
	right:20px;
	content:' ';
	display:block;
	height:800px;
	width:2px;
	background:#000;
}

#header > .content a#logo
{
	float:left;
	margin:40px 0px 0px 20px;
	line-height:20px;
	font-size:24px;
	font-weight:200;
	letter-spacing:7px;
	text-transform:uppercase;
}

#header > .content a#logo:hover
{
	text-decoration:none;
}

#header > .content a#mobile
{
	overflow:hidden;
	position:absolute;
	top:43px;
	right:60px;
	width:17px;
	height:17px;
	text-indent:-9999px;
}

#header > .content a#mobile::before
{
	position:absolute;
	top:3px;
	left:0px;
	content:' ';
	display:block;
	width:18px;
	height:2px;
	background:#000;
	transition:all 200ms;
}

#header > .content a#mobile::after
{
	position:absolute;
	bottom:3px;
	left:0px;
	content:' ';
	display:block;
	width:18px;
	height:2px;
	background:#000;
	transition:all 200ms;
}

#header > .content a#mobile:hover::before,
#header > .content a#mobile:hover::after
{
	background:#000;
}

#header.open > .content a#mobile::before
{
	top:1.5px;
	left:-3px;
	transform: rotate(-45deg);
	transform-origin: top right;
}

#header.open > .content a#mobile::after
{
	bottom:1.5px;
	left:-3px;
	transform: rotate(45deg);
	transform-origin: bottom right;
}

#header > .content ul
{
	overflow:hidden;
	position:absolute;
	top:100px;
	left:22px;
	float:right;
	max-height:0px;
	margin:0px 0px 0px 0px;
	padding:0px 40px;
	width:calc(100% - 42px);
	list-style:none;
	text-align:right;
	background:rgba(242,242,242,0.9);
	box-sizing:border-box;
	transition: all 400ms;
}

#header.open > .content ul
{
	opacity:1;
	padding:10px 40px;
	max-height:60px;
}

#header > .content ul li
{
	display:inline-block;
	line-height:20px;
	font-size:14px;
	font-weight:200;
}

#header > .content ul li::before
{
	content:'/';
	margin:0px 5px;
}

#header > .content ul li:first-child::before
{
	display:none;
}

#header > .content ul li.active a
{
	font-weight:500;
}

#main
{
	margin:80px 0px 40px 0px;
}

#main > .content
{
	min-height:calc(100vh - 120px);
}

#main > .content > section
{
	position:relative;
	clear:both;
	float:left;
	padding-top:40px;
	padding-bottom:20px;
	width:100%;
	min-height:calc(100vh - 120px);
	box-sizing:border-box;
}

#main > .content > section::before
{
	position:absolute;
	top:0px;
	left:-20px;
	display:block;
	content:' ';
	height:100%;
	width:2px;
	background:#000;
}

#main > .content > section::after
{
	position:absolute;
	top:0px;
	right:-20px;
	display:block;
	content:' ';
	height:100%;
	width:2px;
	background:#000;
}

#main > .content > section .inner
{
	margin:10% auto 10% auto;
	width:70%;
	text-align:center;
}

#main > .content ul.gallery
{
	clear:both;
	float:left;
	width:100%;
	margin:0px;
	padding:10px;
	list-style:none;
	box-sizing:border-box;
}

#main > .content ul.gallery > li
{
	float:left;
	padding:10px;
	width:33.33%;
	box-sizing:border-box;
}

#main > .content ul.gallery > li > div
{
	position:relative;
	display:block;
	width:100%;
	height:0%;
	padding-bottom:133.33%;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	transform:scale(1);
	transition: all 200ms;
}

#main > .content ul.gallery > li > div > a
{
	opacity:0;
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	background-image: linear-gradient(to bottom right, rgba(255,255,255,0.25), rgba(255,255,255,0.75));
	transition: all 400ms;
}

#main > .content ul.gallery > li > div:hover
{
	transform:scale(1.025);
}

#main > .content ul.gallery > li > div > a:hover
{
	opacity:1;
}

#main > .content ul.gallery > li > div > a > span
{
	position: absolute;
	top: 50%;
	left: 50%;
	text-align:center;
	transform: translate(-50%, -50%);
}

#footer
{
	z-index:2;
	position:fixed;
	bottom:0px;
	left:0px;
	padding:10px 0px;
	width:100%;
	height:40px;
	line-height:20px;
	font-size:14px;
	text-align:center;
	background:#fff;
	box-sizing:border-box;
}

#footer > .content
{
	position:relative;
	height:20px;
}

#footer > .content::before
{
	position:absolute;
	top:-10px;
	left:20px;
	content:' ';
	display:block;
	height:2px;
	width:calc(100% - 40px);
	background:#000;
}

@media screen and (min-width: 768px)
{
	#main > .content ul.gallery > li:nth-child(9n+1) > div
	{
		padding-bottom:calc(266.66% + 20px);
	}

	#main > .content ul.gallery > li:nth-child(9n+2),
	#main > .content ul.gallery > li:nth-child(9n+5)
	{
		width:66.66%;
	}

	#main > .content ul.gallery > li:nth-child(9n+2) > div,
	#main > .content ul.gallery > li:nth-child(9n+5) > div
	{
		padding-bottom:calc(64.313%);
	}

	#main > .content ul.gallery > li:nth-child(9n+5),
	#main > .content ul.gallery > li:nth-child(9n+7)
	{
		clear:both;
	}

}

@media screen and (min-width:480px) and (max-width: 767px)
{
	#main > .content ul.gallery > li
	{
		width:50%;
	}

	#main > .content ul.gallery > li:nth-child(6n+1) > div
	{
		padding-bottom:calc(266.66% + 20px);
	}

	#main > .content ul.gallery > li:nth-child(6n+4)
	{
		width:100%;
	}

	#main > .content ul.gallery > li:nth-child(6n+4) > div
	{
		padding-bottom:calc(50% - 10px);
	}
}

@media screen and (max-width:479px)
{
	.hide-mobile
	{
		display:none;
	}

	#main > .content ul.gallery > li
	{
		width:100%;
	}

	#main > .content ul.gallery > li > div
	{
		padding-bottom:133.33%;
	}
}