@charset "UTF-8" ;

html {
	font-size: 100% ;
}

body {
	font-family: "Yu Gothic Medium", "ŸàƒSƒVƒbƒN Medium", "YuGothic", "ŸàƒSƒVƒbƒN‘Ì", "ƒqƒ‰ƒMƒmŠpƒS" "sans-serif";
	line-height: 1.7 ;
	color: #443322 ;
	background-color: #fdfdfd ;
}

a {
	text-decoration: none ;
}

img {
	max-width: 100% ;
}

h2 {
	font-size: 1.2rem ;
	padding: 0px 0px ;
	color: #333333 ;
}

h3 {
	font-size: 2rem ;
	width: 100% ;
	padding: 5px 0px ;
	color: #a97910 ;
	border-bottom: 2px #00bd solid ;
	margin-top: 50px ;
	text-align: center ;
}

.wrapper {
	max-width: 1600px ;
	margin: 0 auto ;
	padding: 0 4% ;
}

.page-title {
	font-size: 3.5rem ;
	font-family: "Merriweather", "serif" ;
	text-transform: uppercase ;
	font-weight: normal ;
	color: #ffffff ;
	margin-top: 100px ;
}


.page-header{
    background: #6c621d ;
    display: flex ;
    padding: 10px 20px ;
	top:0;
    position: fixed ;
    justify-content: space-between ;
    width: 100% ;
}

.header-logo img{
    height: 100px ;
    width: auto ;
}

.header-inner {
	text-align: center ;
	color: #ffffff ;
}

#maincontents {
	padding-top: 150px ;
}

#location {
	padding: 4% 0 ;
}

#location .wrapper {
	display: flex ;
	justify-content: space-between ;
}

.location-info {
	width: 32% ;
}

.location-info p {
	padding: 12px 10px ;
}

.location-map {
	width: 64% ;
}

#sns {
	background: #faf7f0 ;
	padding: 4% 0 ;
}

#sns .wrapper {
	display: flex ;
	justify-content: space-between ;
}

#sns .sub-title {
	margin-bottom; 30px ;
}

.sns-box {
	width: 30% ;
}

iframe {
	width: 100% ;
}

footer {
	background: #6c621d ;
	height: 50px ;
	content: "";
	display: block;
	clear: both;
	padding: 20px 50px; 0px 0px ;
	text-align: right ;
	color: #ffffff ;
}

/* gatefold */
.gatefold {
	width: 100%;
	height: 100%;
}

.gatefold::before,
.gatefold::after {
	content: '';
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	background: url(../img/woodwall.jpg) top center no-repeat;
	background-size: cover;
	-webkit-transition: all 1s;
	transition: all 1s;
	z-index: 1;
}

.gatefold::before {
	left: 0;
	clip: rect(0px 50vw 100vh 0px);
}

.gatefold::after {
	right: 0;
	clip: rect(0px 100vw 100vh 50vw);
}

/* contents */
.header,
.contents,
.footer {
	max-width: 1000px;
	margin: 0 auto;
	padding: 80px 0;
	text-align: center;
}

.contents {
	padding: 0;
}

.contents__inner {
	box-sizing: border-box;
	max-width: 680px;
	height: 100%;
	margin: 40px auto 0;
	padding: 20px;
	text-align: left;
	background: #eee;
}

.contents__inner h2 {
	padding: 10px;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid #666;
}

.btn__box {
	text-align: center;
}

.btn__box a {
	display: inline-block;
	width: 250px;
	height: 50px;
	margin: 0 auto;
	line-height: 50px;
	font-size: 13px;
	color: #000;
	border: 1px solid #000;
}

/* checkbox */
.check {
	display: none;
}

.switch {
	position: fixed;
	left: 0;
	right: 0;
	width: 300px;
	height: 140px;
	margin: auto;
	font-size: 80px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	text-shadow: 5px 5px 10px rgba(0,0,0,.8);
	color: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
	visibility: visible;
	opacity: 1;
	z-index: 2;
}

.switch.slide {
	top: 10%;
}
.switch.slide::before {
	content: 'slide';
	-webkit-transition: all .5s;
	transition: all .5s;
}

.switch.Enter {
	top: 50%;
}
.switch.Enter::before {
	content: 'Enter';
	-webkit-transition: all .5s;
	transition: all .5s;
}

.switch.push {
	top: 50%;
}
.switch.push::before {
	content: 'push';
	-webkit-transition: all .5s;
	transition: all .5s;
}

.switch.pull {
	top: 70%;
}
.switch.pull::before {
	content: 'pull';
	-webkit-transition: all .5s;
	transition: all .5s;
}

.check.Enter:checked ~ .switch.Enter::before {
	content: 'close';
	opacity: .0;
}
.check.slide:checked ~ .switch.push,
.check.slide:checked ~ .switch.Enter,
.check.slide:checked ~ .switch.pull,
.check.Enter:checked ~ .switch.slide,
.check.Enter:checked ~ .switch.push,
.check.Enter:checked ~ .switch.pull,
.check.push:checked ~ .switch.slide,
.check.push:checked ~ .switch.Enter,
.check.push:checked ~ .switch.pull,
.check.pull:checked ~ .switch.slide,
.check.pull:checked ~ .switch.Enter,
.check.pull:checked ~ .switch.push {
	visibility: hidden;
	opacity: 0;
}

.check.Enter:checked ~ .gatefold::before {
	-webkit-transform: translate3d(-550px,0,0);
	transform: translate3d(-550px,0,0);
	opacity: 0;
}
.check.Enter:checked ~ .gatefold::after {
	-webkit-transform: translate3d(550px,0,0);
	transform: translate3d(550px,0,0);
	opacity: 0;
}


/* insta */
.gallery{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.gallery-item{
	text-align: center ;
	padding: 10px 10px ;
	list-style: none ;
    flex: 1 1 30%;
    -ms-flex: 1 1 30%;
}

@media (max-width: 600px) {

.gatefold::before,
.gatefold::after {
	content: '';
	position: fixed;
	top: 0;
	width: 100%;
	height: 100vh;
	background: url(../img/woodwall-sp.jpg) top center no-repeat;
	background-size: cover;
	-webkit-transition: all 1s;
	transition: all 1s;
	z-index: 1;
}


.page-header{
    background: #6c621d ;
    display: flex ;
    padding: 10px 20px ;
	top:0;
    position: relative ;
    justify-content: space-between ;
    width: 100% ;
}

.header-logo img{
	text-align: center ;
    height: auto ;
    max-width: 80% ;
}

.header-inner {
	text-align: left ;
	padding: 5px 10px ;
	color: #ffffff ;
}

#maincontents {
	padding-top: 20px ;
}

#location .wrapper ,
#sns .wrapper {
	flex-direction: column ;
}
.location-info ,
.location-map ,
.sns-box {
	width: 100%
}

.sns-box {
	max-width: 80% ;
	margin-bottom: 30px ;
}

/* insta */
.gallery{
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.gallery-item{
	text-align: center ;
	padding: 10px 10px ;
	list-style: none ;
    flex: 1 1 45%;
    -ms-flex: 1 1 45%;
}

}