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

body{
padding:0;
margin: 0;
color:#fff;
text-align:center;
font-size:12px;
line-height:1.5em;
font-family: 'Noto Sans JP', sans-serif;
background: url(../images/common/bg.png) center center no-repeat;
background-size: cover;
min-height: 100vh;
}

a img{border:none;}
img{ max-width: 100%; height: auto!important;}
a img:hover,
.btn a:hover{     
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;  
	opacity: 0.8;  
	filter: alpha(opacity=20);  
}

*:focus {
  outline: none;
}

.pc_elm{ display: none!important;}
.sp_elm{ display: block!important;}

@media screen and (max-width: 728px) {
.pc_elm{ display: block!important;}
.sp_elm{ display: none!important;}
}

.btn{ padding: 50px 0 0 0;}

.btn a,
.btn a:hover,
.btn a:active,
.btn a:visited{ display: block; background: #000; color: #fff;  padding:25px 30px 25px 20px; min-width: 200px;  font-size: 15px; text-decoration: none!important; position: relative;line-height: 0; text-align: center;}
.btn a::after{ content: ""; height: 0.8em; width: 0.8em; background: url(../images/common/arrow_w.svg) center center no-repeat; position: absolute; right: 10px; transform: translate(0%,-50%); display: block; top: 51%;}

@media screen and (max-width: 728px) {
  .btn{ padding: 50px 5% 0 5%;}
}


.menu { height: 8px; position: absolute; right: 3%; top:35px; width: 30px; z-index: 99999999; }
body.fixed .menu, body.active .menu {z-index: 99999999999;}

.menu_box ul{ display: block;}
.menu__line{ background: #fff; display: block; height: 1px; position: absolute; transition:transform .3s; width: 100%; }
.menu__line--bottom{ bottom: -2px; width: 100%; }
.menu__line--middle{ bottom: 16px; width: 100%; }
.menu__line--middle.active{ opacity: 0; }
.menu__line--bottom.active{ width: 100%; }
.menu__line--top.active{ top: 0; transform: rotate(25deg); background: #fff; }
.menu__line--bottom.active{ bottom: 7px; transform: rotate(155deg); background: #fff;}

.sp_menu {
    position: fixed;
    right: 5vw;
    top: 10px;
    z-index: 99999999;
}

@media screen and (max-width: 728px) {
.menu{ display: block;}
}

/*gnav*/
.gnav{ background: #000; display: none; height: 100%; position: fixed; width: 100%; z-index:999999; top:0;  }
.gnav__wrap{ align-items:center; display: flex; height: 100%; justify-content: center; position: absolute; width: 100%; }

.gnav h1{ position: absolute; left: 5vw; top:30px; }

.gnav a,
.gnav a:hover,
.gnav a:active,
.gnav a:visited{ color: #FFF; text-decoration: none;}

.gnav ul{ list-style: none; line-height: 2.5em;}

.gnav ul.sns li{ width: 30px;}
.gnav .label{ width: 50px; margin: 0 auto;}

.gnav__wrap .inner .menu_box {
    display: flex;
    align-items: center;
  }

.gnav__wrap .inner .menu_box .box{align-items: baseline;}
.gnav__wrap .inner .menu_box .box li span{ margin-left: 15px;font-size: 15px;  font-weight: 300; font-family: 'Oswald', sans-serif;
}

.gnav__wrap .inner .menu_box .box ul li a:hover{
	-webkit-transition: 0.3s ease-in-out;  
	-moz-transition: 0.3s ease-in-out;  
	-o-transition: 0.3s ease-in-out;  
	transition: 0.3s ease-in-out;  
	opacity: 0.4;  
	filter: alpha(opacity=60);  
}


.gnav__wrap ul.navi_menu{ list-style: none; font-family: 'Lora', serif; font-size: 18px; line-height: 3em; margin-bottom: 30px; }

.gnav__wrap ul.sns{ display: flex; justify-content: center; align-items: center; list-style: none; margin-bottom: 15px; }
.gnav__wrap ul.sns li{ margin: 0 5px;}
.gnav__wrap ul.sns img{ height: 20px!important;}

@media screen and (max-width: 728px) {
  .gnav__wrap .inner .menu_box {
      border-left: none;
      padding: 0px;
  }
  .gnav__wrap .inner .menu_box .box li{ font-size: 25px; line-height: 2em; }
  .gnav__wrap .inner .menu_box .box li span { font-size: 11px; }
}

.main_area{  padding: 5vh 0; max-width: 1200px; margin: 0 auto;}


@media screen and (max-width: 1200px) {
  .main_area{ height: auto!important; padding: 5vh 0; margin: 0 5%;}
}

.main_area img {
width: 100%;
height: auto;
margin-bottom: 0px;
}

@media screen and (max-width: 728px) {
  .main_area img{ height: auto!important; margin: 0 0 30px 0;}
}

.main_area ul{ display: flex; justify-content: center; list-style: none; font-family: 'Lora', serif; font-size: 14px; line-height: 1.5em;margin-bottom: 50px; margin-top: 15px; }
.main_area ul li{ margin: 0 15px;}
.main_area ul li a,
.main_area ul li a:hover,
.main_area ul li a:active,
.main_area ul li a:visited{ color: white; text-decoration: none;}

@media screen and (max-width: 728px) {
  .main_area ul{ display: block; }
  .main_area ul li{ margin: 0 15px 5px 15px;}

}


footer{ height: auto; padding-bottom: 50px;}
body.under footer{ height: auto;}
footer ul{ display: flex; justify-content: center; align-items: center; list-style: none; margin-bottom: 15px; }
footer ul li{ margin: 0 5px;}
footer ul img{ height: 20px!important;}
footer .copy{ font-size: 10px;}

body.under header h1{ width: 120px; padding-top: 30px;  padding-bottom: 40px; margin: 0 auto;}
body.under header h2{ font-family: 'Lora', serif; font-size: 25px; line-height: 1.5em; font-weight: 300;padding-bottom: 30px;}

body.under .main_area{ height: auto; padding: 0; max-width: 740px; padding-bottom: 80px; margin: 0 auto; text-align: left;}
body.under .main_area .lang{ text-align: center; padding-bottom: 30px;}

body.under .main_area a,
body.under .main_area a:hover,
body.under .main_area a:active,
body.under .main_area a:visited{ font-family: 'Lora', serif; font-size: 13px; line-height: 1.5em; color: white; text-decoration: underline;}

body.under .main_area a:hover{ text-decoration: none;}

body.under .main_area .text_box p{ margin-bottom: 20px;}



body.under .main_area.disco{ text-align: center;font-family: 'Lora', serif;}

body.under .main_area.disco h3{ padding-bottom: 50px;}
body.under .main_area.disco h3 span{ border-bottom: 1px solid white;}

body.under .main_area.disco .box{ border-bottom: 1px solid #fff; padding-bottom: 50px; margin-bottom: 50px;}
body.under .main_area.disco .box:last-child{ border-bottom: 0; }
body.under .main_area.disco figure{ line-height: 0; margin-bottom: 0px;}
body.under .main_area.disco h2{ font-size: 150%; line-height: 1.5em; margin-bottom: 8px;}
body.under .main_area.disco p{ font-size: 100%; line-height: 1.5em; margin-bottom: 8px;}
body.under .main_area.disco div{ font-size: 10px; line-height: 1.5em;}

body.under .main_area.disco .tracklist{ line-height: 1.5em; padding-bottom: 15px;}

body.under .main_area.bio{ text-align: center; padding: 50px 0 80px 0; font-family: 'Lora', serif; }

body.under .main_area.bio .div_2 a{  display: block; }
body.under .main_area.bio .div_2 a:first-child{ margin-bottom: 15px; }



@media screen and (max-width: 728px) {
  body.under .main_area.disco{ margin: 0 5%;}
}

#video-area {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

#video {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    min-height: 100%;
    min-width: 100%;
}

@media screen and (max-width: 600px) {
  #video {
      position: absolute;
      z-index: -1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 120%;
      height: auto;
      min-height: 100%;
      min-width: 100%;
  }
}

@media screen and (max-width: 450px) {
  #video {
      position: absolute;
      z-index: -1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 150%;
      height: auto;
      min-height: 100%;
      min-width: 100%;
  }
}




@media screen and (max-width: 728px) {
  body.under .main_area{ margin: 0 5%;}
}

.main_area.bio figure{ line-height: 0;}
.main_area.bio .text_box{
  margin-bottom: 50px;
}