@charset "utf-8";


/* ----------------------------------------------------------------------
	
	 WE GOT MUSIC css
	
---------------------------------------------------------------------- */



/* - 共通内容
---------------------------- */


html {
-webkit-font-smoothing: antialiased;
}

body {
	font-size: 100%;
	font-family: 'Karla', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	color:#666;
	background-color:#f9f9f9;
	background-color:#FFF;
	-webkit-font-smoothing: subpixel-antialiased;
}


svg {
	padding-right:6px;
}


#wrapper {
	width:100%;
	box-sizing:border-box;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
	width /***/: auto;/*IE8のみ適用*/
}

a {
	border: none;
	color: #666;
	text-decoration: none;
}

br.sp {
	display:none;
}


/* - 共通メニュー
---------------------------- */

#allmenu{
        display: none;
        width: 100%;
        height:100%;
        position: fixed;
        top: 0;
		left:0;
        z-index: 300;
        background: rgba(0,0,0,0.75);
}

div.menu_area {
	display:table;
	width:100%;
	height:100%;
	position:relative;
	box-sizing:border-box;
	padding-left:50px;
}

div.menu_area > .inner {
	display:table-cell;
	vertical-align:middle;
}


#allmenu ul.menu_nav {
	text-align:left;
}

#allmenu ul.menu_nav li {
	font-size:2.0rem;
	margin-top:20px;
	letter-spacing:2px;
}

#allmenu ul.menu_nav li i {
	padding-right:8px;
	font-size:1.8rem;
	vertical-align:middle;
	
}

#allmenu ul.menu_nav li:first-child {
	margin-top:0;
}

#allmenu ul.menu_nav li a {
	color:#FFF;
	font-family: 'Brandon Grotesque light', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	font-weight:300;
	text-decoration:none;
	-webkit-transition:0.4s ease;
  	-moz-transition:0.4s ease;
  	transition:0.4s ease;
}

#allmenu ul.menu_nav li a:hover {
	color:#f7f41e;
}

#allmenu ul.menu_nav li a svg {
	font-size: 1.6rem;
	padding-right: 0.5em;
}


/* - メインメニュー
---------------------------- */

.header_area {
	width:100%;
	position:absolute;
	top:-100px;
	/*z-index:200;*/
	margin-top:100px;
	/*background-color:#333;*/
}

.header_area.con_head {
	
	background-color:#4f5f3a;
}


.header_area .menu_inner {
	width:100%;
	display:table;
	box-sizing:border-box;
	position:relative;
	padding:15px 10px 15px 20px;
	padding-top:40px;
}

.header_area .menu_inner .logo_block {
	text-align:left;
	display:table-cell;
	box-sizing:border-box;
	vertical-align:middle;
	line-height:0;
	/*width:120px;*/
}

.header_area .menu_inner .logo_block h1 a {
	
}

.header_area .menu_inner .logo_block h1 a .logo_top {
	display:inline-block;
	font-size: 1.3rem;
	line-height: 1.4;
	text-align: center;
}

.header_area .menu_inner .logo_block h1 a .logo_top p.img {
	font-size:0;
}

.header_area .menu_inner .logo_block h1 a .logo_top p.name {
	font-family: 'Brandon Grotesque black', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	font-weight:300;
	letter-spacing:2px;
	font-size:0.75rem;
	margin-top:8px;
}

.header_area .menu_inner .logo_block h1 a .logo_top p.name > span.jp {
	display:block;
	color:#ff7b7b;
}

.header_area .menu_inner .logo_block img {
	max-width:76px;
	width:100%;
	
}


.header_area .menu_inner .menu_block {
	text-align:right;
	display:table-cell;
	vertical-align:middle;
	box-sizing:border-box;	
	padding-top:0;
	font-size:0;
}


ul.g_navi {
	display:inline-block;
}

ul.g_navi > li {
	display:inline-block;
	font-size:0.9rem;
	letter-spacing:1px;
	position:relative;
 }
 
/* ul.g_navi > li:first-child {
	 margin-left:0;
 }
 
  ul.g_navi > li:last-child {
	  margin-right:20px;
  }*/
 
 ul.g_navi > li svg {
	 padding-right:0;
	
 }

ul.g_navi > li a {
	display:block;
	-webkit-transition:0.2s ease;
  	-moz-transition:0.2s ease;
  	transition:0.2s ease;
	box-sizing:border-box;
	font-family: 'Brandon Grotesque light', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	font-weight:300;
	letter-spacing:2px;
	color:#666;
	padding:10px 20px;
	box-sizing:border-box;
	background-color:#FFF;
}

ul.g_navi > li a:hover {
	background-color:#848484;
	color:#FFF;
}

/*ul.g_navi > li a::after {
	position:absolute;
	top:110%;
	left:0;
	width:100%;
	height:3px;
	background-color:#ff3857;
	content:'';
	opacity:0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

ul.g_navi > li a:hover::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}*/


ul.g_navi > li.rotate a {
	transition: transform 0.9s ease-out;
}

ul.g_navi > li.rotate a:hover {
	transform: rotateX(360deg);
}

ul.g_navi > li.sns {
	padding:0;
	font-size:1.1rem;
}

ul.g_navi > li.tw {
	padding:0 5px;
}

ul.g_navi > li.tw a {
	padding:0 5px;
	/*color:#069cfb;*/
}

ul.g_navi > li.sc a {
	/*color:#ff5634;*/
}


ul.g_navi > li.sns a {
	display:block;
	padding:5px;
	font-size:1.1rem;
}


ul.g_navi > li a:hover {
	/*color:#2f4428;*/
}




/* ヘッダー固定後*/

.header_area.fixed {
	top: 0;
	margin-top:0;
    position: fixed;
	/*background-color: rgba(255, 255, 255, 0.6);*/
    transition: top 0.4s ease-in ;
    -webkit-transition: top 0.4s ease-in ;
    -moz-transition: top 0.4s ease-in ;
	z-index:400;
	background:transparent;
}

#wrapper.on_all .header_area.fixed {
}

.header_area.fixed div.site_nav ul.site_bar {
	display:none;
}

.header_area.fixed .menu_inner {
	padding:10px;
}

.header_area.fixed .menu_inner .logo_block { }
.header_area.fixed .menu_inner .logo_block img { max-width:56px; }


.header_area.fixed .menu_inner .logo_block h1 a .logo_top p.name {
	display:none;
}


.header_area.fixed .menu_inner .menu_block {
	text-align:right;
	display:table-cell;
	vertical-align:middle;
	box-sizing:border-box;	
	padding-top:0;	
}

/*レスポンシブメニュー　ここから*/


.res_menu {
	display:none;
}


#toggle {
	display:inline-block;
	position:relative;
	z-index:400;
	/*padding:10px;*/
	/*padding-bottom:6px;*/
	box-sizing:border-box;
	text-align:center;
	/*padding:20px;
	background-color:rgba(0,0,0,0.7);*/
	display:none;
}

#toggle > p {
	color:#FFF;
	padding-bottom:5px;
	font-size:1.1rem;
	
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  width: 24px;
  height: 18px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #666;
  border-radius: 4px;
}

#wrapper.on_all .menu-trigger span { background-color:#FFF; }

.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 8px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}


.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) rotate(-45deg);
  transform: translateY(8px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) rotate(45deg);
  transform: translateY(-8px) rotate(45deg);
}



/* - TOP部分
---------------------------- */
#top_body {
	display:table;
	width:100%;
}

#top_body.on_bg {
	width:100%;
	height:100%;
	background-image:url(images/bg_main1.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	position:relative;
}

#top_body > .top_title {
	display:table-cell;
	vertical-align:middle;
}

#top_body.on_bg > .top_title {
	width:100%;
	height:100%;
	background-image:url(images/bg/01.png);
	position:relative;
	
}



#top_body > .top_title > .top_title_block {
	text-align:center;
	opacity:0;
	animation: obj_fade_in 1.2s ease-out 0.3s 1 forwards;
	-webkit-animation: obj_fade_in 1.2s ease-out 0.3s 1 forwards;
}

#top_body > .top_title > .top_btn {
	text-align:center;
	opacity:0;
	animation: obj_fade_in 0.5s ease-out 1.1s 1 forwards;
	-webkit-animation: obj_fade_in 0.5s ease-out 1.1s 1 forwards;
}

#top_body > .top_title > .top_title_block > h1 {
	text-align:center;
	line-height:0;

}

#top_body > .top_title > .top_title_block > h1 img {
	max-width:380px;
}


ul.enter_btn {
	display:inline-block;
	margin-top:100px;
	font-size:0rem;
}

ul.enter_btn > li {
	display:inline-block;
	font-family: 'Brandon Grotesque black', 'YuGothic', 'Yu Gothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', sans-serif;
	font-weight:300;
	letter-spacing:2px;
}

ul.enter_btn > li:first-child {
	padding-right:40px;
	box-sizing:border-box;
}

ul.enter_btn > li:last-child {
	padding-left:40px;
	box-sizing:border-box;
}

ul.enter_btn > li a {
	display:block;
	color:#FFF;
	font-size:0.8rem;
	background:#444;
	background:#484848;
	padding:12px 0;
	width:240px;
	border-radius:30px;
	box-sizing:border-box;
}

#top_body.on_bg ul.enter_btn > li a {
	color:#FFF;
	background:transparent;
	border:1px solid #FFF;
}

ul.enter_btn > li a > span.jp {
	color:#ff7b7b;
	margin-left:0.4rem;
}

#top_body.on_bg ul.enter_btn > li a > span.jp {
	color:#FFF;
}

/*フッター　SNS設定*/

ul.sns_list {
	display:inline-block;
}

ul.sns_list > li {
	display:inline-block;
	padding:0 5px;
}

ul.sns_list > li a {
	color:#333;
}

ul.sns_list > li svg {
	font-size:1.1rem;
}


/*フェードイン　設定*/

@keyframes obj_fade_in {
    from{ opacity: 0; }
    to{ opacity: 1; }
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


@media screen and (max-width: 979px) {
	
ul.g_navi {
	display:none;
}

#toggle {
	display:inline-block;
}

div.menu_area {
	padding-left:30px;
}


}

@media screen and (max-width: 680px) {
	

div.menu_area {
	padding-left:15px;
}

#allmenu ul.menu_nav li {
	font-size:1.4rem;
	margin-top:15px;
}


#allmenu ul.menu_nav li a svg {
	padding-right:10px;
	font-size:1.3rem;
}

.header_area .menu_inner {
	padding:10px;
	padding-top:20px;
}

/*.header_area .menu_inner .logo_block h1 a .logo_top p.name > span.jp {
	display: inline-block;
	padding-left: 0.5em;
}*/


ul.enter_btn > li:first-child {
	padding-right:20px;
}

ul.enter_btn > li:last-child {
	padding-left:20px;
}

ul.enter_btn > li a {
	width:200px;
}


}

@media screen and (max-width: 480px) {

#top_body > .top_title > .top_title_block > h1 img {
	max-width:220px;
}

ul.enter_btn {
	margin-top:70px;
	font-size:0rem;
}

ul.enter_btn > li:first-child {
	padding-right:10px;
}

ul.enter_btn > li:last-child {
	padding-left:10px;
}

ul.enter_btn > li a {
	width:170px;
	border-radius:20px;
}



}