/*===========================================================
HEADER MAIN-NAV　--ヘッダー・ナビ
lead-contents　--ヘッダー下のリードエリア
SECTION　--セクションの共通設定
それ以降は各セクションごとの設定
===========================================================*/


/* GENERAL STYLES
================================================== */
html {height:100% }

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {font-size:14px;}

p {line-height:140%;}

ul li {
    display:inline-block;
    list-style:none;
}

#colorize {font-size:40px}

.sp-none{display:none;}

.pd0{padding:0!important;}

/*テキストスタイル*/
.fw-b{font-weight: bold;}
.blue{color: #466eff;}
.yellow{color: #FFFF00!important;}
.red{color:#FF0000;}

.mb20 {margin-bottom: 20px;}

/* BIG VIDEO BACKGROUND
================================================== */
.big-background {
    text-align:center;
    position:relative;
    overflow:hidden;
}

.big-background-container .pc-none{display: none;}
.big-background-container .sp-none{display: block;}
@media screen and (max-width: 560px){
    .big-background-container .pc-none{display: block;}
    .big-background-container .sp-none{display: none;}
}




.headerImage{display:block;padding-top: 40px;}

.spsub-title{
    margin-bottom: 50px;
    position: relative;
    top: -48px;
}


/*HEADER MAIN-NAV
================================================== */
h1.top_logo {
    width: 200px;
    height: auto;
	display:block;
    margin: 0 auto;
    padding-top: 10px;
}

.sp_header{width:100%;}

/* header */
#top-head {
    top: -100px;
    position: absolute;
    width: 100%;
    margin: 100px auto 0;
    padding: 0px;
    z-index: 1000;
}
#top-head a,#top-head {
    /*color: #fff;*/
    text-decoration: none;
}

.inner h1 {
	margin: 0em 0;
}

/*ナビメニュー*/
#global-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -733px;
    background: #fff;
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.6);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    z-index: 1000;
}

#global-nav ul {
    display: block;
    right: 0;
    bottom: 0;
    font-size: 14px;
    max-width: none;
    padding:0px;
    margin:0px;
}

#global-nav ul li {
    position: static;
    display:block;
    width: 100%;
    border-bottom:1px solid rgba(255,255,255,0.6);
    z-index: 1000;
}

#global-nav ul li.headerTwitter,#global-nav ul li.headerInsta {
    width: 100%;
}

#top-head #global-nav ul li:nth-child(1n) a,.topCommonUl li:nth-child(1n) a h5 {
    color: #fff;
}

#top-head #global-nav ul li:nth-child(2n) a,.topCommonUl li:nth-child(2n) a h5 {
    color: #fff;
}

#top-head #global-nav ul li:nth-child(3n) a,.topCommonUl li:nth-child(3n) a h5 {
    color: #fff;
}

#top-head #global-nav ul li:nth-child(4n) a,.topCommonUl li:nth-child(4n) a h5 {
    color: #fff;
}

#top-head #global-nav ul li:nth-child(5n) a,.topCommonUl li:nth-child(5n) a h5 {
    color: #fff;
}

#global-nav ul li a {
    font-size: 110%;
    padding: 0 15px;
	display: none;
}

#global-nav ul li:not(:last-child):after{display: none;}

.main-gif{
   width: 100%;
}

/* Fixed */
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
    width: 100%;
	display: none;
    color: #fff;
    padding: 20px 0;
	background-color: #FF0000;
	display: block;
}

/* Fixed */
#top-head.fixed {
    padding-top: 0px;
    height: 40px;
}


/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right:10px;
    top: 10px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 15%;
    background: #fff;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    border-radius: 5px;
}
#nav-toggle span:nth-child(1) {
	top: 11px;
	left: 9px;
}
#nav-toggle span:nth-child(2) {
	top: 11px;
	left: 18px;
}
#nav-toggle span:nth-child(3) {
	top: 11px;
	left: 27px;
}
.big-background-single {z-index: 1000;}

#top-head,
.inner {
    width: 100%;
    padding: 0;
}
#top-head {
    top: 0;
    position: fixed;
    margin-top: 0;
}
/* Fixed reset */
#top-head.fixed {
    padding-top: 0;
    background: transparent;
}



#mobile-head {
    background: #ff0000;
    width: 47px;
    height: 47px;
    z-index: 999;
    position: relative;
	display: block;
	border-radius: 47px;
    margin: 15px 5px;
}
#top-head.fixed .logo,
#top-head .logo {
    position: absolute;
    left: 13px;
    top: 13px;
    color: #333;
    font-size: 26px;
}

#top-head .inner {
	width: auto;
	background: #fff;
}

#nav-toggle {display: block;}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
	top: 11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
/*   width: 0;
    left: 50%;*/
}
.open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
    /* #global-nav top + #mobile-head height */
    -moz-transform: translateY(800px);
    -webkit-transform: translateY(800px);
    transform: translateY(800px);
}

/*google翻訳*/
#google_translate_element {
    position:absolute;
	top: 20px; right:20px;
    z-index: 500;
}

@media screen and (max-width: 560px){
    #google_translate_element{
        top: auto;
        bottom: 4%;right: 50%;
        transform: translateX(50%);
    }

    .spHeaderLogo {
        width: 182px;
        height: 47px;
        display: block;
        position: absolute;
        right: 10px;
    }
    
    .spHeaderTwitter {
        width: 22px;
        height: 22px;
        display: block;
        position: absolute;
        right:54%;
        top: 12px;
    }

    .spHeaderInsta {
        width: 22px;
        height: 22px;
        display: block;
        position: absolute;
        right: 43%;
        top: 12px;
    }
    
    .countdownArea {
        width: 90%;
		bottom: -10%;
        padding-bottom: 40px;
    }

    .countdownText {
        font-size: 4vw;
        letter-spacing: 2vw;
    }

    .countdown {
        font-size: 8vw;
        letter-spacing: 4vw;
    }

    .time {
        font-size: 3vw;
        letter-spacing: 1vw; 
    }
    .btn02 {
        width: 240px;
        margin: 0px auto 20px;
        position: relative;
    }
}


/*lead-contents
===========================================================*/
.lead-text{
    font-size: 0;
    line-height: 0;
}

.lead-text p{font-size: 16px;}
.lead-text img{width: 100%;}

@media screen and (max-width: 560px){
    .lead-text.pc-none{display: block; padding: 0;}
}

@media screen and (max-width: 800px){
   *[class^="linup"] span{
        width:100%;
        padding: 0 10px;
    }
    *[class^="linup"] span img{width:100%; height: auto;}
}

.lead-photo{padding: 0 0 20px;}

.imgList1#topics{
    width: 100%;
    max-width:500px;
    padding: 0px 10px 30px;
}

.imgList1 figure{width: 100%; margin: 0px 0px 10px;}

.imgList1 figure:nth-child(2n+1) {
    margin-right: 0px;
}

.artistList > :first-child {
    margin-left: 10px;
}

/* @media screen and (max-width: 980px){
    .imgList1 figure{width: 210px;}
}
@media screen and (max-width: 720px){
    .imgList1 figure{width: 180px;}
}
@media screen and (max-width: 553px){
    .imgList1 figure{width: 300px;}
} */


.sp-mc{
    width:60%!important;
}


/*SECTION
================================================== */
.about-section {padding:30px 20px}

#about .pc-none{display: block;}
#about .sp-none{display: block;}
@media screen and (max-width: 560px){
    #aboutn .pc-none{display: block;}
    #about .sp-none{display: none;}
}

@media screen and (max-width: 560px){
    .about-section.pc-none{display: block;}        
}


.about-spimg img{
    width:100%;
    text-align: center;
}

/*見出し*/
h2.about-section-title {
         text-align: justify;
        /* padding: 20px 0 15px; */
        /* margin-bottom: 30px; */
        font-size: 44px;
        display: block;
}
h2.about-section-title img{max-height: 75px;}

h4{
    font-size:15px;
}

.small-background-section {padding:0px 0 40px;}



#topics{
    padding:20px 10px;
	max-width: 100%;
	box-sizing: border-box;
}

.floatbox {
	display: flex;
}

.lefttitle{
    width:75px;
}


/*-------- コンテンツのスタイル --------*/
.liststyle1 {margin-bottom: 25px;}

/*-------- 料金表 --------*/
.table01 {width: 100%;}

.table01 td {
  width: 100%;
  box-sizing: border-box;
}

.bannerList {
    width: 100%;
}

/* 
.bannerList li {
    float: none;
    width: 50%;
    padding-right: 0px;
}
 */

.pastPerformanceBanner {
    width: 100%;
}



/*NEWS
================================================== */
#topics-list {
    padding:0!important;
    margin:0!important;
	text-align: left;
}

#topics-list .tit_01 {
	text-align: left;
	padding-bottom: 9px;
}

ul#topics-list li span.update{ font-size:80%; }


/*マップ*/
.mapArea{width: 100%; max-width: 600px; height: 360px;}

/* TWITTER SECTION
================================================== */
#twitter-widget-0{width:90%!important;}

.bannerArea {
    text-align: center;
    width: 100%;
}

.bannerArea img {
    width: 80%;
}

/* PROFILE DETAIL
================================================== */
.prof_area {width: 90%;}

.prof_block_in {padding: 20px;}

.tit_01 {
    font-size: 15px;
    margin: 8px 0 8px 0;
}

.tit_01_2{font-size: 15px; margin: 8px 0;}

.prof_block img {float: none; margin-left: auto; margin-right: auto; display: block;}

.sec_title {color: #303a9a;}

.sec_title span {color: #f18d1a;}

.prof_text{float: none; margin-left: auto; margin-right: auto;}

.prof_text2 {height: 30px; font-size: 10px;}

.prof_col02 >*:first-child{float: none; width: 100%; margin-bottom: 20px;}
.prof_col02 >*:last-child{float: none; width: 100%;}

/*FOTTER-MENU
================================================== */
.fotter-menu-title {
    background-color: #212121;
    text-align: center;
    font-weight: 800;
    color: #fff;
    padding: 12px;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.6);
}

.topCommonUl{
	margin:0px!important;
	padding:0px!important;
}

.topCommonUl li {
	width:100%;
	padding: 0px 10px;
	position: relative;
	border-bottom: 1px solid rgba(255,255,255,0.6);
    background: #212121;
}
.topCommonUl li:after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -5px;
}
.topCommonUl li:after {
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
}

.topCommonUl li:last-child {
	border-bottom: none;
}

.topCommonUl li a:link,.topCommonUl li a:visited {
	color: #fff;
}

.topCommonUl li .listH3 {
	margin: 17px 0;
	color: #fff;
}

.topCommonUl li .textBlock {
	float: left;
	width: 100%;
	text-align:left;
	color: #000000;
}

.topCommonUl li .textBlock span {
	margin: 0 0;
	font-weight: normal;
	color: #7f899d;
	font-size: 12px;
}


/*footter
================================================== */
#fotter{padding: 15px 0;}

@media screen and (orientation: landscape) {
   /* 縦向きの場合のスタイル */
	.headerImage{
		padding-top:150px;
		margin-top:150px
	}
}

/* クレジット
================================================== */
.organizer-cont{
    font-size: 80%;
}


.ticket-btn{
	width:95%;
	margin:auto;
	text-align:center;
}

.attention {
    border: 2px solid #000;
    background: rgb(0 0 0 / 80%);
    padding: 0 30px;
    width: 100%;
    margin: auto;
}

.charaback {
	background-image: none;
	background-position: none;
	padding: 20px 0px 20px 0;
	background-repeat: no-repeat;
}

.about-section-title4 span {
	display: block;
}

#contacttext {
	max-width: 100%;
}
.contacttext-box {
	display: block;
	text-align: center;
}

#contacttext p {
	margin: 0px 20px 20px 20px;
}

#news {
	width: 90%;
	padding: 50px 20px;
	box-sizing: border-box;
}

#company {
	width: 90%;
	padding: 50px 20px;
	box-sizing: border-box;
}

.about-section-title3{
	font-size: 45px;
	line-height: 90%;
	margin-bottom: 7px;
}

.subtitle {
	font-size:16px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 20px;
}

.about-section-title3 span {
	display: block;
	font-size: 16px;
	font-weight: bold;
}

.business-box-in {
	padding: 0 10px 30px;
}

.business-box-in img {
	width: 100%;
}

.about-section-title2, .about-section-title4 {
	font-size: 45px;
	margin-bottom: 30px;
}

.about-section-title2 span, .about-section-title4 span {
	font-size: 16px;
    display:block;
}

.servicebox1,.servicebox2,.servicebox3 {
	padding: 40px 15px;
}

.serviceimg1 {
	width: 46px;
	height:60px;
	margin-right: 20px;
}

.serviceimg2 {
	width: 67px;
	height: 60px;
	margin-right: 20px;
}

.serviceimg3 {
	width: 63px;
	height: 60px;
	margin-right: 20px;
}

.table01 th {
	width: 20%;
	vertical-align: top;
	padding: 10px 0 0 0;
}

#company #topics {
	padding: 0px;
}

.contact {
	width: 100%;
}