@charset "UTF-8";

/* CSS Document */

dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,p,blockquote,fieldset,div {
  margin: 0;
  padding: 0;
}

table,pre,code,select,input,textarea,kbd,var,ins,del,samp {
  font-size: 12px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

h1,h2,h3,h4,h5,h6 {
  font-weight: normal;
  font-size: 12px;
}

ul li,ol li {
  list-style: none;
}

table,th,td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

th,caption {
  text-align: left;
}

address,cite,dfn,em,b,strong,var,th,ins,del,samp {
  font-weight: normal;
  font-style: normal;
}

img,fieldset {
  border: 0;
}
a:hover  img {
-moz-opacity:0.80;
opacity:0.80;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";

}



a:focus{outline:none;} 

a {overflow:hidden;}
a{
	color: #222;
	text-decoration: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0)_;
}
a:visited{
	color: #222;
	text-decoration: none;
}
a:hover{
	color: #666;
	text-decoration:underline;
}


img{
	line-height:1;
}


.cf:after {
	content:".";
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	font-size:0px;
}

.cf {
	min-height:1px;
	zoom:1;
}



.areaSP{
	display:none;
}

.spIm{
	display:none;
}
.spIm2{
	display:none;
}
/*-----------------------------------------------
	BASE
-----------------------------------------------*/
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
html,body{
height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background-color:#000;
	color: #fff;
	text-align: center;
	line-height: 1.6;
	height: 100%;
}



/*-----------------------------------------------
	LAYOUT
-----------------------------------------------*/


.area{
	width: 980px;
	margin: 0 auto;
}



/*-----------------------------------------------
	FOOTER
-----------------------------------------------*/
.footerArea{
	background-color:#111;
	padding-top:3em;
	font-family: 'Abel', sans-serif;
	letter-spacing: 0.02em;
	color:#fff;
}
.footerArea p.logo{
	text-align:center;
	margin-bottom:3em;
}
.footerArea p.title{
	text-align: center;
	margin-bottom: 3em;
	font-size: 18px;
}
.footerArea p.title span{
	border-bottom:1px solid #fff;
	padding:0 0.5em;
	padding-bottom:0.3em;
}
.footerArea .footMenu{
	text-align: center;
	position: relative;
	overflow: hidden;
	margin-bottom:3em;
	font-size: 15px;
}
.footerArea .footMenu span{
	font-size:12px;
}
.footerArea .footMenu ul{
	margin-bottom:1em;
}

.footerArea .footMenu li{
	display:inline-block;
	padding:0 15px;

}
.footerArea .footMenu{
	color:#999;
}
.footerArea .footMenu a:link{
	color:#fff;
}
.footerArea .footMenu a:visited{
	color:#fff;
}
.footerArea .footMenu a:hover{
	color:#fff;
	text-decoration:underline;
}

.footer{
	padding: 1em 0;
	text-align: center;
	background-color: #000;
	margin-top: 0px;
	color:#666;
	font-size:12px;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.05em;
	font-weight:normal;
}
.footerArea .sns{
	margin-bottom:3em;
}
.pagetop{
	position: fixed;
    bottom: 20px;
	right:-40px;
    -webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
	z-index:99;
}
.pagetop.act{
	right:20px;
}

/*-----------------------------------------------
	FOOTER
-----------------------------------------------*/
/*-----------------------------------------------
	SNS
-----------------------------------------------*/
.sns{
	text-align:center;
	margin: 0 auto;
	
}

.sns li{
	display:inline-block;
	padding: 0 0.5em;
}
.sns a{
	text-align:center;
	position:relative;
	display:block;
	color:#fff;
	text-decoration: none;
	font-size:15px;
	border-radius: 50%;
	line-height: 40px;
	background-color:#222;
	width: 40px;
	height: 40px;
}
.sns a:hover{
	background-color:#444;
}
/*-----------------------------------------------
	sns
-----------------------------------------------*/



/*-----------------------------------------------
	ハンバーガー
-----------------------------------------------*/
.nav{
	position:absolute;
	right:2em;
	top:2em;
	cursor: pointer;
	z-index:1003;
	padding:5px;
}
.nav p.tx{
	font-size:14px;
	font-family: 'Abel', sans-serif;
	color:#fff;
	display:block;
	float:left;
	margin-right:0.5em;
}
.navBtn {
	width:28px;
	float:left;
}
.navBtn span.line {
	display: block;
	height: 2px;
	width: 100%;
	background: #fff;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}


.navBtn span.line:nth-of-type(3) {
	margin-bottom:0.1em;
}
.navBtn span.line:nth-of-type(2),
.navBtn span.line:nth-of-type(3) {
margin-top: 6px;
}
#wrapper.navOpen .nav{
	position:fixed;
}
#wrapper.navOpen .nav p.tx{
	opacity:0;
}
#wrapper.navOpen .navBtn span.line:nth-of-type(1) {
        -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
        -ms-transform: translateY(8px) translateX(0) rotate(45deg);
        transform: translateY(8px) translateX(0) rotate(45deg);
		height: 2px;
}
#wrapper.navOpen .navBtn span.line:nth-of-type(2) {
       
        opacity: 0;
        
}
#wrapper.navOpen .navBtn span.line:nth-of-type(3) {
        -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
        -ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
        transform: translateY(-8px) translateX(0) rotate(-45deg);
		height: 2px;
}
ul.delay-show li{
	opacity:0;
}

/* オーバーレイ */
.overlay {
	background-color: rgba( 0, 0, 0, 0.8 );
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 1000;
}



.topPan{
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1002;
	width: 100%;
	max-width: 100%;
	height: 100%;
	background: #000;
	transition: all .5s ease-in-out;
	-webkit-transform: translateX(105%);
	transform: translateX(105%);
	-webkit-overflow-scrolling: touch;
}
#wrapper.navOpen .topPan{
	-webkit-transform: translateX(0%);
  	transform: translateX(0%);
  	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	
	
}
body.open{
	overflow: hidden;
	
}
.topPan p.t2{
	font-family: 'Abel', sans-serif;
	letter-spacing: 0.05em;
    font-weight: 500;
	font-size:26px;
	margin-bottom:2em;
	display:block;
}
.topPan p.t2 a:link{
	color:#fff;
}
.topPan p.t2 a:visited{
	color:#fff;
	text-decoration:none;
}
.topPan p.t2 a:hover{
	color:#fff;
	text-decoration:none;
	opacity:0.6;
}
.topPan ul.menu{
	text-align:left;


}
.topPan ul.menu li{
	margin-bottom:1em;
	padding-bottom:0em;
	font-family: 'Abel', sans-serif;
    letter-spacing: 0.05em;
    font-weight: 500;
	font-size:22px;
	color:#808080;
	line-height:1;
}
.topPan ul.menu li.t1{
	font-size:32px;
	margin-bottom:0.5em;
}
.topPan ul.menu li.t1 span{
	font-size:13px;
}
.topPan ul.menu li span{
	display:block;
	font-size:12px;
	letter-spacing: 0.02em;
	font-weight:normal;
	font-family: "Noto Sans JP";
	line-height:1.2;
}
.topPan ul.menu li span.en{
	font-family: 'Abel', sans-serif;
    letter-spacing: 0;
	color:#fff;
	font-size:18px;
    font-weight: 700;
}
.topPan ul.menu li a span{
	color:#999;
}

.topPan ul.menu li a:hover,.topPan ul.menu li a:hover span.en{
	opacity:0.6;
}
.topPan ul.menu ul{
	padding-top:15px;
	padding-bottom:0.5em;
	padding-left:20px;
	border-left:1px solid #808080;
	margin-left:15px;
	margin-top:10px;
}

.topPan ul.menu ul li{
	margin-bottom:0.5em;
}
.topPan ul.menu li:last-child,.topPan ul.menu ul li.t1:last-child {
	margin-bottom:0;
}


.topPan ul.menu a:visited{
	color:#fff;
	text-decoration:none;
}
.topPan ul.menu a:hover{
	color:#fff;
	text-decoration:none;
}


.topPan .sns{
	text-align:left;
	padding-top:4em;
}
.topPan .sns p{
	font-size:14px;
	letter-spacing: 0.02em;
	font-weight:700;
	font-family: "Noto Sans JP";
	margin-bottom:1.5em;
}
.topPan .sns li{
	padding:0;
	margin-right:1em;
}
.topPan .sns li:last-child{
	margin-right:0;
}

.topPanArea{
	padding:10em 0em 3em 0em;
	width:960px;
	margin:0 auto;
	
}

.topPan .blockMain{
	text-align:center;
}
.topPan .block1{
	float:left;
	width:50%;
}
.topPan .block2{
	float:left;
	width:50%;
}

.topPan .block3{
	float:left;
	width:35%;
}
.topPan .block4{
	text-align:left;
	display:inline-block;
}

/* ローディング */
#loader-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background:#fff;
  z-index:1005;
}
.loaderArea {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
  z-index:1006;
}
.loader,
.loader:after {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.loader {
  margin:0px auto;
  font-size: 5px;
  position: relative;
  text-indent: -9999em;
  border-top: 0.8em solid rgba(131,131,131, 0.2);
  border-right: 0.8em solid rgba(131,131,131, 0.2);
  border-bottom: 0.8em solid rgba(131,131,131, 0.2);
  border-left: 0.8em solid #a9a9a9;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}




/* ヘッダー */
.header{
	padding:2em 0;
	position:fixed;
	width:100%;
	top:0;
	left:0;
	z-index: 100;
	transition: 0.5s;
}

.header.act{
	background-color: rgba( 0, 0, 0, 1 );
}
.header.act h1{
	margin:0 auto;
}
.header.hide{
    transform: translateY(-100%);
}
#wrapper.navOpen .header.hide{
    transform:none;
}
.header h1{
	width:70px;
	margin-left:2em;
}
.header h1 .bk{
	display:none;
}
.header h1 img{
	width:100%;
	height:auto;
}

.header.act h1 .bk{
	display:block;
}
.header.act h1 .white{
	display:none;
}