@charset "utf-8";
html,body {background-color: #1e1e1e; text-align: left; font-size: 14px; color:#000; line-height:100%;}
html,body {font-family: 'Lato',"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif; letter-spacing: 0.05em;}
html,body {height: 100%;}

.Lato3{font-weight: 300;}

#wrapper {height:100%}

a{color:#FFF}

/*-------------------
@preloader
-------------------*/
#preloader { width:100%; height:100%; position:fixed; z-index:1010; top:0px; left:0px; right:0px; bottom:0px; background:#1e1e1e;}

#loadingBar { width: 0%; height: 1px; background: #FFF; position: fixed; top: 50%; left: 0;  transition: all 0.2s linear 0s; }
/*-------------------------------
@SNS
-------------------------------*/
#social-container {margin: 20px 0 0 15px; width: 170px; height: 66px; padding:40px 0 0 20px}
#social-container li {float: left; display:block; height:30px; margin-left: 10px;}

.rollover:hover { filter:brightness(115%); transition: all 0.5s; cursor: pointer}
.rollover2:hover { opacity:0.7; transition: all 0.5s; cursor: pointer}

.menu_bg {position: fixed; z-index: 1000; background-color:rgba(30,30,30,.9);}
/*-------------------------------
@ Pagetop
-------------------------------*/
.arrow_r_b { position: fixed; width: 64px; height: 64px; bottom: 40px; right: 40px;}
.arrow_r_b:before { content: ''; width: 100%; height: 100%; background-color:rgba(45,45,45,.9); border-radius: 50%; position: absolute;}
.arrow_r_b:after { content: ''; width: 10px; height: 10px; border: 0; border-top: solid 2px #fff; border-right: solid 2px #fff; transform: rotate(-45deg); position: absolute; top: calc(50% - 4px); left: calc(50% - 6px); }
@media screen and (max-width : 1023px ){
	.arrow_r_b { width: 48px; height: 48px;  bottom: 20px; right: 4vw;}
	.arrow_r_b:after { width: 8px; height: 8px; top: calc(50% - 4px); left: calc(50% - 5px); }
}

/*-------------------------------
@ Navi Footer
-------------------------------*/
footer {position: relative; background-color: #000; text-align: center; color: #666; font-size:10px; height:80px; line-height: 80px}

@media screen and (min-width : 1024px ){
	.menu_bg {width: 100%; height:74px;}
	
	.tablet {display: none}
	
	nav > ul {position:fixed; top:30px; right: 10px; color: #FFF; z-index: 1000; }
	nav > ul > li {display: block; float: left; margin-right: 3vw;}
	nav .current {border-bottom: 2px solid #fff; padding:0 0 5px;}
	nav li a {color: #999; text-decoration: none;}
	nav li a:hover {color: #FFF; transition: all 0.5s; }
	
	nav ul ul {visibility: hidden; opacity: 0; transition: 0.4s ease-in-out; white-space: nowrap; width: 3em; margin-top: 4px}
	nav ul ul li a {display: block; padding: 6px 0}
	nav ul ul li:before {content:""; width:8px; height: 1px; background-color: #666; margin: 13px 6px 0 0; float: left;}
	nav ul li:hover > ul {visibility: visible; opacity: 1; transform: translateY(6px); }

	.pagetop {margin: 120px auto 0; width: 118px;}
}

@media screen and (min-width : 768px ){
	.sp {display: none}
}

@media screen and (max-width : 1023px ){
  .pc {display: none}
	body {-webkit-text-size-adjust: 100%; font-size: 14px;}
	
	.menu_bg {width: 50px; height:50px; right: 0;}
  
  header .menu { height: 50px; width: 50px; display: block; position: fixed; right: 0; z-index: 1001; }
	header .menu .menuInner { width: 30px; height: 30px; position: relative; margin:10px;}
  header .menu.active .menuInner span:before { transform: rotate(45deg)}
  header .menu.active .menuInner span:after { transform: rotate(-45deg)}
  header .menu .menuInner span:before, header .menu .menuInner span:after { content: ''; display: block; position: absolute; height: 1px; width: 30px; background-color: #FFF; transition: transform 0.4s ease-out;}
  header .menu .menuInner span {position: absolute; left: 0; top: 50%; }
	header .menu .menuInner span:before { transform: translateY(-3px); }
  header .menu .menuInner span:after { transform: translateY(3px); }
	
  .fixed {position: fixed;  width: 100%; height: 100%;}
  #drawer {width: 100%;  background-color:#000; display:none; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; overflow-y: scroll; -webkit-overflow-scrolling:touch; }
	nav > ul{padding:16vw 8vw; line-height:1;}
	nav > ul > li {display: block; font-size: 24px; color:#333; font-weight: 300; margin-bottom: 20px}
	nav li a {color: #FFF; text-decoration: none;}
	
	nav ul ul {line-height:1;}
	nav ul ul li {display: flex; align-items: center; font-size: 16px;margin-top: 15px}
	nav ul ul li:before {content:""; width:8px; height: 1px; background-color: #FFF; margin: 0 8px 0 0; float: left;}
	
	.pagetop {margin: 15vw auto 0; width: 25%;}
	
}

@media screen and (max-width : 768px ){
	footer {height:40px; line-height: 40px}
}