@charset "UTF-8";
/* CSS Document */

#main-img {
	position:relative;
	width:100%;
	height:816px;
	background:URL(../img/top/main-img.jpg) no-repeat center center;
	background-size:cover;
}
#main-logo {
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
#scroll-btn {
	position:absolute;
	left:50%;
	bottom:60px;
	-webkit-transform:translate(-50%,0);
	-ms-transform:translate(-50%,0);
	transform:translate(-50%,0);
}
#scroll-btn a {
	display:block;
	color:#FFF;
	font-size:1.066rem;
	letter-spacing:1px;
}
#scroll-btn a::after {
	content:'';
	display:block;
	width:46px;
	height:46px;
    border-top:2px solid #FFF;
    border-right:2px solid #FFF;
	-webkit-transform:translate(0, -20%) rotate(135deg);
	-ms-transform:translate(0, -20%) rotate(135deg);
	transform:translate(0, -20%) rotate(135deg);
}






#category-block {
}
#category-block ul {
}
#category-block ul li {
	position:relative;
	float:left;
	width:176px;
	height:176px;
	background:#DDD;
}
#category-block ul li + li {
	margin-left:30px;
}
#category-block ul li:nth-of-type(3n+1) {
	clear:left;
	margin-left:0;
}
#category-block ul li:nth-of-type(n+4) {
	margin-top:30px;
}
#category-block ul li a {
	display:-webkit-box;
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
	
	width:100%;
	height:100%;
	color:#FFF;
	font-size:1.333rem;
	font-weight:bold;
}

#category-block ul li:nth-of-type(1) a,
#category-block ul li:nth-of-type(6) a,
#category-block ul li:nth-of-type(8) a,
#category-block ul li:nth-of-type(10) a,
#category-block ul li:nth-of-type(15) a,
#category-block ul li:nth-of-type(17) a,
#category-block ul li:nth-of-type(19) a {
	background:#373F51;
}
#category-block ul li:nth-of-type(2) a,
#category-block ul li:nth-of-type(4) a,
#category-block ul li:nth-of-type(9) a,
#category-block ul li:nth-of-type(11) a,
#category-block ul li:nth-of-type(13) a,
#category-block ul li:nth-of-type(18) a,
#category-block ul li:nth-of-type(20) a {
	background:#000000;
}
#category-block ul li:nth-of-type(3) a,
#category-block ul li:nth-of-type(5) a,
#category-block ul li:nth-of-type(7) a,
#category-block ul li:nth-of-type(12) a,
#category-block ul li:nth-of-type(14) a,
#category-block ul li:nth-of-type(16) a,
#category-block ul li:nth-of-type(21) a {
	background:#4B3C1B;
}

#category-block ul li:nth-of-type(3n+1)::before,
#category-block ul li:nth-of-type(3n+2)::before {
	position:absolute;
	display:block;
	content:'';
	right:-15px;
	top:-25px;
	width:1px;
	height:19px;
	background:#B28500;
}
#category-block ul li:nth-of-type(3n+1)::after,
#category-block ul li:nth-of-type(3n+2)::after {
	position:absolute;
	display:block;
	content:'';
	right:-24px;
	top:-16px;
	width:19px;
	height:1px;
	background:#B28500;
}
#category-block ul li:nth-of-type(1)::before,
#category-block ul li:nth-of-type(2)::before,
#category-block ul li:nth-of-type(1)::after,
#category-block ul li:nth-of-type(2)::after {
	display:none;
}




#contents-right {
	position:relative;
}


#information-block {
	overflow:scroll;
	height:457px;
	padding:30px;
	border:1px solid #B28500;
}
#information-block dl {
	font-size:0.866rem;
	line-height:1.8;
}
#information-block dl dt {
	color:#8C6700;
	font-weight:bold;
}
#information-block dl dt span.title-style{
	color:#000;
	font-weight:bold;
	font-size:15px;
}
#information-block dl dd {
}
#information-block dl + dl {
	margin-top:2em;
	padding-top:2em;
	border-top:1px solid #DDD;
}
#section-banner {
	position:absolute;
	right:0;
	bottom:0;
}


#section-instagram {
	width:1030px;
	margin:0 auto;
	margin-top:60px;
	-webkit-transform:translate(15px, 0);
	-ms-transform:translate(15px, 0);
	transform:translate(15px, 0);
}
#section-instagram .sec-ttl {
	margin-left:-30px;
}
#section-instagram .sec-body {
	margin-top:20px;
}
#instagram-block {
	position:relative;
}
.bx-wrapper {
	margin-bottom:0 !important;
	border:none !important;
	-moz-box-shadow:none !important;
	-webkit-box-shadow:none !important;
	box-shadow:none !important;
}
#instagram-prev {
	position:absolute;
	left:0;
	top:50%;
	-webkit-transform:translate(-50px, -50%);
	-ms-transform:translate(-50px, -50%);
	transform:translate(-50px, -50%);
}
#instagram-prev a {
	position:relative;
	display:block;
	text-indent:-9999px;
}
#instagram-prev a:after {
	position:absolute;
	top:50%;
	left:0;
	content:'';
	display:block;
	width:24px;
	height:24px;
    border-top:2px solid #333;
    border-right:2px solid #333;
	-webkit-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transform:translate(0, -50%) rotate(-135deg);
	-ms-transform:translate(0, -50%) rotate(-135deg);
	transform:translate(0, -50%) rotate(-135deg);
}
#instagram-next {
	position:absolute;
	right:0;
	top:50%;
	-webkit-transform:translate(20px, -50%);
	-ms-transform:translate(20px, -50%);
	transform:translate(20px, -50%);
}
#instagram-next a {
	position:relative;
	display:block;
	text-indent:-9999px;
}
#instagram-next a:after {
	position:absolute;
	top:50%;
	right:0;
	content:'';
	display:block;
	width:24px;
	height:24px;
    border-top:2px solid #333;
    border-right:2px solid #333;
	-webkit-transform-origin:50% 50%;
	-ms-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-transform:translate(0, -50%) rotate(45deg);
	-ms-transform:translate(0, -50%) rotate(45deg);
	transform:translate(0, -50%) rotate(45deg);
}
#instagram-selector {
	display:none;
}





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

	#main-img {
		width:100%;
		height:100vh;
	}
	#main-logo {
		width:60vw;
		-webkit-transform:translate(-50%,-68%);
		-ms-transform:translate(-50%,-68%);
		transform:translate(-50%,-68%);
	}
	#scroll-btn {
		bottom:14vh;
	}
	#scroll-btn a::after {
		width:12vw;
		height:12vw;
	}
	
	
	
	#category-block ul li {
		width:43vw;
		height:43vw;
	}
	#category-block ul li + li {
		margin-left:4vw;
	}
	#category-block ul li:nth-of-type(3n+1) {
		clear:none;
		margin-left:4vw;
	}
	#category-block ul li:nth-of-type(2n+1) {
		clear:left;
		margin-left:0;
	}
	#category-block ul li:nth-of-type(n+3) {
		margin-top:4vw;
	}
	
	#category-block ul li:nth-of-type(1) a,
	#category-block ul li:nth-of-type(6) a,
	#category-block ul li:nth-of-type(7) a,
	#category-block ul li:nth-of-type(12) a,
	#category-block ul li:nth-of-type(13) a,
	#category-block ul li:nth-of-type(18) a,
	#category-block ul li:nth-of-type(19) a {
		background:#373F51;
	}
	#category-block ul li:nth-of-type(2) a,
	#category-block ul li:nth-of-type(3) a,
	#category-block ul li:nth-of-type(8) a,
	#category-block ul li:nth-of-type(9) a,
	#category-block ul li:nth-of-type(14) a,
	#category-block ul li:nth-of-type(15) a,
	#category-block ul li:nth-of-type(20) a,
	#category-block ul li:nth-of-type(21) a {
		background:#000000;
	}
	#category-block ul li:nth-of-type(4) a,
	#category-block ul li:nth-of-type(10) a,
	#category-block ul li:nth-of-type(11) a,
	#category-block ul li:nth-of-type(16) a,
	#category-block ul li:nth-of-type(17) a {
		background:#4B3C1B;
	}
	
	#category-block ul li:nth-of-type(3n+1)::before,
	#category-block ul li:nth-of-type(3n+2)::before,
	#category-block ul li:nth-of-type(3n+1)::after,
	#category-block ul li:nth-of-type(3n+2)::after {
		display:none;
	}
	
	#category-block ul li:nth-of-type(2n-1)::before {
		position:absolute;
		display:block;
		content:'';
		right:-2vw;
		top:-3.4vw;
		width:1px;
		height:3vw;
		background:#B28500;
	}
	#category-block ul li:nth-of-type(2n-1)::after {
		position:absolute;
		display:block;
		content:'';
		right:-3.4vw;
		top:-2vw;
		width:3vw;
		height:1px;
		background:#B28500;
	}
	#category-block ul li:nth-of-type(1)::before,
	#category-block ul li:nth-of-type(1)::after {
		display:none;
	}





	#contents-right {
		position:static;
		margin-top:10vw;
	}
	
	
	#information-block {
		overflow:auto;
		height:auto;
		padding:1.5rem;
	}
	#section-banner {
		position:static;
	}





	#section-instagram {
		width:100%;
		margin:0 auto;
		margin-top:10vw;
		padding:0 4vw;
		-webkit-transform:translate(0, 0);
		-ms-transform:translate(0, 0);
		transform:translate(0, 0);
	}
	#section-instagram .sec-ttl {
		width:40vw;
		margin:0 auto;
	}
	#section-instagram .sec-body {
		margin-top:3vw;
	}
	.instagram-box img {
		width:44vw;
		margin-left:1vw;
	}
	#instagram-prev,
	#instagram-next {
		display:none;
	}
	#instagram-selector {
		display:block;
		position:relative;
		overflow:hidden;
		margin-top:5vw;
	}
	#instagram-selector > div {
		position:relative;
		left:50%;
		float:left;
	}
	#instagram-selector > div > div {
		position:relative;
		left:-50%;
		float:left;
		width:4vw;
		height:4vw;
	}
	#instagram-selector > div > div + div {
		margin-left:5vw;
	}
	#instagram-selector > div > div a {
		display:block;
		width:100%;
		height:100%;
		background:#BBB;
		border-radius:2vw;
		text-indent:-9999px;
	}
	#instagram-selector > div > div a.active {
		background:#D8B046;
	}
}


@media screen and (max-width: 812px) and (orientation: landscape) {
	#main-img {
		height:300vh;
	}
	#main-logo {
		-webkit-transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
	}
	#scroll-btn {
		bottom:10vh;
	}
}