@charset "UTF-8";

/*----------------------
common
----------------------*/


html{
font-family: "EB Garamond","游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", "Noto Serif JP", serif;
color:#333;
position:relative;
width:100%;
height:100%;
}

body{
position:relative;
width:100%;
height:100%;
-webkit-text-size-adjust:100%;
}

ul li{
list-style:none;
}

::selection {
background: #333;
color: #fff;
}

::-moz-selection {
background: #333;
color: #fff;
}


/*----------------------
a hover
----------------------*/

a, a:visited, input[type="submit"] {
text-decoration:none;
-webkit-transition:0.2s;
-moz-transition:0.2s;
-o-transition:0.2s;
-ms-transition:0.2s;
transition:0.2s;
opacity:1;
filter:alpha(opacity100);
-ms-filter:"alpha(opacity=100)";
-khtml-opacity:1;
-moz-opacity:1;
color:#333;
}

a:hover, input[type="submit"]:hover {
opacity:.5;
filter:alpha(opacity50);
-ms-filter:"alpha(opacity=50)";
-khtml-opacity:.5;
-moz-opacity:.5;
}

:focus {
outline:0;
}


/*----------------------
input textarea
----------------------*/

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

input[type="text"],
textarea{
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px #ccc solid;
	box-sizing: border-box;
	padding: 6px;
}

textarea{
	resize: none;
}

input[type="submit"]{
	border: none;
	color: #fff;
	background: #000;
	padding: 15px;
	text-align: center;
	box-sizing: border-box;
	font-size: 11px;
	letter-spacing: 0.2em;
	cursor: pointer;
}


/*----------------------
clearfix
----------------------*/

.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
 
.clearfix:after{
clear:both;
}

.clearfix{
zoom:1;
}


.sp{
	display: none;
}

.pc{
	display:block;
}


/* wrapper */
#wrapper{
	width: 100%;
	height: 100%;
}


/* overlay */
#overlay{
display:none;
}

#menuBtn{
display:none;
}

#drawer{
display:none;
}

#drawer.open{
display:none;
}

.scroll-prevent {
  position: fixed;
}



/* header */
header{
	/*width: 220px;
	background: #fff;
	height: 100%;
	min-height: 450px;*/
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 0px;
	left: 0px;
}

header h1,
#drawer h1{
	width: 100px;
	height: 54px;
	display: block;
	margin: 50px auto 0 50px;
	color:#fff;
	padding: 0;
	position: relative;
	z-index: 1001;
}

header h1 a,
#drawer h1 a{
	display: block;
	margin: 0 auto;
	width: 100px;
	height: 0;
	padding-top: 54px;
	overflow: hidden;
	background-image:url("../images/h1_logo.png");
	background-size: 100px auto;
	background-repeat:no-repeat;
	color:#fff;
	line-height: 2;
	position: relative;
	opacity: 1;
}

header .pcMenu{
	display:block;
	text-align:center;
	width:100%;
	position:absolute;
	top:68px;
	box-sizing:border-box;
	padding-left:100px;
}

header .pcMenu li{
	display:inline-block;
}

header .pcMenu li a{
	letter-spacing:0.15em;
	margin:0 14px;
	font-size:17px;
}


.spMenu{
	font-size: 20px;
	position:absolute;
	display:block;
	top:52%;
	left:50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	line-height: 2.5em;
	letter-spacing: 0.1em;
	text-align:center;
}

.spMenu ul{
	margin-bottom: 12px;
	margin-top: 8px;
}

.spMenu ul li{
	margin-left: 10px;
	line-height: 2em;
	letter-spacing: 0.05em;
}

.spMenu .selected{
	font-weight: 600;
}


/*menuBtn*/
#menuBtn{
display:none;
position:fixed;
right:50px;
top:50px;
width:28px;
height:16px;
cursor:pointer;
/*-webkit-transition: all .4s;
-moz-transition: all .4s;
-o-transition: all .4s;
transition: all .4s;*/

z-index: 2002;
}

#menuBtn.close{
/*left:235px;*/
}

#menuBtn .icon{
display:block;
position:absolute;
top:8px;
right:0px;
width:28px;
height:1px;
background:#000;
	opacity:0.4;
filter:alpha(opacity40);
-ms-filter:"alpha(opacity=40)";
-khtml-opacity:0.4;
-moz-opacity:0.4;
transition:1s;
/*transition:.2s;*/
}

#menuBtn .icon::before,
#menuBtn .icon::after{
display:block;
content:"";
position:absolute;
width:28px;
height:1px;
background:#000;
transition:1s;
/*transition:.3s;*/
}

#menuBtn .icon::before{
margin-top:-6px;
}

#menuBtn .icon::after{
margin-top:6px;
}



/* closeBtn */
#closeBtn{

}

#closeBtn {
display:block;
width: 36px;
height: 36px;
position: absolute;
top:16px;
right: 16px;
cursor: pointer;
}
#closeBtn span::before,
#closeBtn span::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 34px;
  height: 1px;
  background: #000;
	opacity:0.4;
filter:alpha(opacity40);
-ms-filter:"alpha(opacity=40)";
-khtml-opacity:0.4;
-moz-opacity:0.4;
}
#closeBtn span::before {
  transform: rotate(-45deg);
}
#closeBtn span::after {
  transform: rotate(45deg);
}

/* drawer */

#drawer{

display: flex;
justify-content: center;
align-items: center;

position: fixed;
background: rgba(255, 255, 255, 0.95);
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s, visibility 0.5s, height 0.5s;
overflow: hidden;
/*
top: 0;
top: -100%;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transition: all 0.45s;
*/
z-index: 2002;
}


#drawer.open{
	/*
-webkit-transform: translate3d(0, 100%, 0);
-moz-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
*/
opacity: 1;
visibility: visible;
height: 100%;
}


.spMenu ul{
	margin-top: 0px;
}

.spMenu ul li{
	line-height: 2.6em;
}



#storeLinkSelect{
	padding:30px;
	text-align:center;
	font-weight: 300;
	box-sizing:border-box;
	width:350px;
}

#storeLinkSelect h3{
	letter-spacing: 0.2em;
	font-weight: 300;
	font-size:14px;
	white-space: nowrap;
	line-height:1.6;
	margin-bottom:25px;
}

#storeLinkSelect ul.linkBtns{
	margin-bottom:30px;
	display:table;
	box-sizing:border-box;
	table-layout: fixed;
	width:100%;
}


#storeLinkSelect ul.linkBtns li{
	display:table-cell;
	box-sizing:border-box;
	vertical-align: middle;
	width:50%;
}

#storeLinkSelect ul.linkBtns li:first-child{
	padding-right:5px;
}

#storeLinkSelect ul.linkBtns li:last-child{
	padding-left:5px;
}

#storeLinkSelect ul.linkBtns li a{
	padding:8px 30px;
	display:block;
	border:1px solid #333;
	letter-spacing: 0.2em;
	font-weight: 600;
	font-size:10px;
	width:100%;
	box-sizing:border-box;
}

#storeLinkSelect p.copyright{
	font-size:8px;	
	letter-spacing: 0.15em;
	white-space: nowrap;
}


/* #main */
#main{
	min-height: 100%;
	margin-bottom: -70px;
	/*padding-left: 220px;
	padding-right: 20px;*/
}


#contents{
	/*padding-top: 20px;*/
	padding-bottom: 70px;
	letter-spacing: 0.2em;
	font-weight: 300;
}



.pageBack{
	display: none;
}



/* footer */
footer{
	position: relative;
	text-align:center;
	width:100%;
}

footer .copy{
	padding-top: 3px;
	letter-spacing: 0.08em;
	font-size:12px;
}


/* fade */

.blurIn{
	opacity: 0;
  filter: blur(10px);
  transition: all 1s ease-in;
}

.blurIn.scrollin{
	opacity: 1;
  filter: blur(0px);
}


.fadein {
opacity:0;
transform:translate(0, 16px);
transition: all 0.8s;
}

.fadein.scrollin {
opacity:1;
transform:translate(0, 0);
}


.slideIn {
opacity:0;
transform:translate(16px, 0);
transition: all 0.8s;
}

.slideIn.scrollin {
opacity:1;
transform:translate(0, 0);
}

.delay05s{transition-delay:0.4s;}
.delay1s{transition-delay:1s;}
.delay15s{transition-delay:1.6s;}







@media (max-width: 1170px) {
	header .pcMenu li a{
	font-size:14px;
	}
}




@media (max-width: 900px) {


.sp{
	display: block;
}

.pc{
	display:none;
}

#drawer.open{
display:block;
}
	
/* header */
header{
	width: 100%;
	height: 80px;
	min-height: 80px;
	top: 0;
	left: 0;
}

header h1,
#drawer h1{
	display:block;
	width: 60px;
	height: 32px;
	margin: 20px auto 0 20px;
	/*width: 36px;
	height: 57px;
	margin: 12px auto 0 auto;
	padding: 0 0;*/
}

#drawer h1{
	position:absolute;
	top:20px;
	left:20px;
	margin:0;
}

header h1 a,
#drawer h1 a{
	width: 60px;
	padding-top: 32px;
	background-size: 60px auto;
}
	
header .pcMenu{
	display:none;	
}

#menuBtn{
right:20px;
top:26px;
width:28px;
height:28px;
display:block;
}

#menuBtn .icon{
width:28px;
}
	
#menuBtn .icon::before,
#menuBtn .icon::after{
width:28px;
}

#menuBtn .icon::before{
margin-top:-12px;
}

#menuBtn .icon::after{
margin-top:12px;
}

#storeLinkSelect{
	width:100%;
}


/* main */
#main{
	min-height: 100%;
	/*padding-left: 15px;
	padding-right: 15px;*/
	margin-bottom: -82px;
}

#contents{
	padding-top: 100px;
	padding-bottom: 82px;
}

	
.pageBack{
	display: block;
	width: 100%;
}
	
.pageBack a{
	display: block;
	position: relative;
	border: none;
	color: #fff;
	background: #000;
	padding: 15px;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	font-size: 11px;
	letter-spacing: 0.2em;
	cursor: pointer;
	margin-bottom: 15px;
	font-weight: 400;
}

.pageBack a::after{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
box-sizing: border-box;
left: 10px;
width: 3px;
height: 3px;
border: 3px solid transparent;
border-right: 3px solid #fff;
}


/* footer */
footer{
	padding: 35px 0px 20px 0px;
	text-align: center;
}

footer .copy{
	font-size:10px;
}

	
.fadein {

}


}