@charset "utf-8";

/* ---------------------------------------------------------------------------------
base */

*{}

@media(max-width:750px){
	
body{ font-size:140%;}

}

li img{ width:100%;}

img{ vertical-align:bottom;}

a:link{ color:#ee6fb2;text-decoration: none;}
a:visited{ color:#ee6fb2;text-decoration: none;}
a:active{ color:#ee6fb2;text-decoration:underline;}
a:hover{ color:#ff0000;text-decoration:none;}


body{ background:#fff ; height:100%; width:100%;}

@media(max-width:750px){

body{  background:#fff ; border: 10px solid #ec74a9; }
 
}

p{ line-height: 1.8em;}

.hrTac img{ width:100%;}
img{ width:100%;}








/* ---------------------------------------------------------------------------------
contents */



.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}







/* ---------------------------------------------------------------------------------
top */




  


@media(max-width:750px){

}



a.arrowBtn{ display:block; color:#fff; font-weight:bold; background:#322; text-align:center;padding:15px; position:relative; margin-left:auto; margin-right:auto; width:80%; max-width:600px;
/* box-shadow */
box-shadow:-2px 0px 0px -50px #75dc90;

/* border-radius */
border-radius:5px;
}


a.arrowBtn::after{
	content:"";
	display: block;
	width:6px;
	height:6px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	position: absolute;
	left:20px;
	top:50%;
	margin-top:-4px;
}


a.arrowBtn:hover{ background:#000;}



/* ---------------------------------------------------------------------------------
common */





/* ---------------------------------------------------------------------------------
INTRO */

#INTRO{padding-top: 0;background: #ec74a9; min-height: 600px; margin-top: 105px;}
#INTRO >.inner{ position: relative; width: 1000px; margin: 0 auto; }

#INTRO h3{ font-size: 18px;}

#INTRO ul{ width: auto; position: relative;}
#INTRO ul li{ width: 450px; position: absolute;}

#INTRO ul li.introImg01{ top: -100px; left: 0;}
#INTRO ul li.introImg02{ top: 50px; right: 0;}
#INTRO ul li.introImg03{ top: 225px; left: 50px; }
#INTRO ul li.introImg04{ top: 365px; right: 150px; width: 150px; }

@media(max-width:750px){
#INTRO{ min-height: 1200px; }
#INTRO >.inner{ position: relative; width: auto; margin: 0 auto;}
#INTRO h3{ font-size: 30px;}
    
#INTRO ul li{ width: 650px; position: relative;}
    #INTRO ul li.introImg01{ top: -50px; left: 50px;}
#INTRO ul li.introImg02{ top: 0px; left: 50px;}
#INTRO ul li.introImg03{ top: 50px; left: 50px; }
#INTRO ul li.introImg04{ top: 100px; left: 220px; width: 300px;padding-bottom: 150px }
    
    
    
}





#EVENT{padding-top: 0;background: #fff; min-height: 600px; margin-top: 105px;}
#EVENT >.inner{ position: relative; width: 1000px; margin: 0 auto; position: relative;}

#EVENT h2{font-family: 'Anton', sans-serif; color: #000; font-weight: normal; line-height: 1.1em;font-size: 40px; position: absolute; left: 0; top: 0; opacity: 0;}




#ACCESS{padding-top: 0;background: #fff; min-height: 600px; margin-top: 105px;}
#ACCESS >.inner{ position: relative; width: 1000px; margin: 0 auto; position: relative;}

#ACCESS h2{font-family: 'Anton', sans-serif; color: #000; font-weight: normal; line-height: 1.1em;font-size: 40px; margin-bottom: 50px;opacity: 0;}

#ACCESS .gMap{ width: 700px; margin-bottom: 50px; filter: grayscale(); margin: 0 auto 50px;}

#ACCESS p{ line-height: 1.4em; margin-bottom: 1em; text-align: center;}



#subCont{padding-top: 0;background: #fff; min-height: 600px; margin-top: 0;}
#subCont >.inner{ position: relative; width: 1000px; margin: 0 auto; position: relative;}

#subCont h2{font-family: 'Anton', sans-serif; color: #000; font-weight: normal; line-height: 1.1em;font-size: 40px; margin-bottom: 50px;}



@media(max-width:750px){
#EVENT h2{font-family: 'Anton', sans-serif; color: #000; font-weight: normal; line-height: 1.1em;font-size: 60px; position: relative; left: 0; top: 0;}
#EVENT >.inner{ position: relative; width: auto; margin: 0 50px; position: relative;}
#ACCESS h2{font-family: 'Anton', sans-serif; color: #000; font-weight: normal; line-height: 1.1em;font-size: 60px; margin-bottom: 50px; }
#ACCESS >.inner{ position: relative; width: auto; margin: 0 50px; position: relative;}
    
#ACCESS .gMap{ width: auto; margin-bottom: 50px; filter: grayscale(); margin: 0 auto 50px;}
    
#subCont{padding-top: 0;background: #fff; min-height: 600px; margin-top: 0;}
#subCont >.inner{ position: relative; width: auto; margin: 0 auto; position: relative;}

#subCont h2{font-family: 'Anton', sans-serif; color: #000; font-weight: normal; line-height: 1.1em;font-size: 40px; margin-bottom: 50px;}
}





@media(min-width:751px){
    
#exMV{}
#exMV >.inner{width:auto; border-bottom:1px dashed #ccc;padding-bottom:25px;margin-bottom:25px;}

#exMV.mvYoko{}
#exMV.mvYoko .imgBox{ margin-bottom: 20px;}
#exMV.mvYoko .textBox{ font-size: 20px; text-align: center;}
#exMV.mvYoko .artistName{font-size: 70%;display: block;}
#exMV.mvYoko .exName{display: block; font-size: 130%;}
#exMV.mvYoko .date{ font-size: 70%;}

#exMV.mvTate >.inner{ display: table;}
#exMV.mvTate .imgBox{  display: table-cell; width: 230px;}
#exMV.mvTate .textBox{ display: table-cell; vertical-align:middle;font-size: 20px; text-align: left; padding-left: 30px;}
#exMV.mvTate .artistName{font-size: 70%; display: block;}
#exMV.mvTate .exName{ position: relative;text-indent: -0.5em; display: block;}
#exMV.mvTate .date{ font-size: 70%;}

#exMV.mvSQ{}
#exMV.mvSQ >.inner{ width: 500px;text-align: center; margin: 0 auto 0px auto;}
#exMV.mvSQ .imgBox{ margin-bottom: 20px; text-align: center; width: 380px; display: inline-block;}
    
#exMV .kyosan{ font-size: 65%; line-height: 1.4em;}
    
#exMV.mvSQ .textBox{ font-size: 20px; text-align: center;display: block;}
#exMV.mvSQ .artistName{font-size: 70%; display: block;}
#exMV.mvSQ .exName{display: block;font-size: 110%;display: block;}
#exMV.mvSQ .date{ font-size: 70%;}

#exMV .imgBox{ -moz-box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);
-webkit-box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);
-ms-box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);
box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);}
    
}



a.instaLink{ display: inline-block; border: 1px solid #333; padding: 0.5em 2em; line-height: 1em; margin-top: 10px; color: #333; font-size: 14px;}
a.instaLink:hover{background: #ec74a9; border-color: #ec74a9; color: #fff;}

a.spaceLink{ display: inline-block; border: 1px solid #333; padding: 0.5em 2em; line-height: 1em; margin-top: 10px; color: #333; font-size: 14px;}
a.spaceLink:hover{background: #ec74a9; border-color: #ec74a9; color: #fff;}




@media(max-width:750px){


#exMV{ width: auto; margin: 0 auto; position: relative;}
#exMV >.inner{width:auto;margin: 50px 50px 0 }

#exMV{}
#exMV >.inner{ width: auto;text-align: center; margin: 50px 50px 50px 50px; border-bottom: 1px dashed #ccc;padding-bottom: 1em}
#exMV .imgBox{ margin-bottom: 20px; text-align: center; width: auto; display: inline-block;}
#exMV .textBox{ font-size: 20px; text-align: center;}
#exMV .artistName{font-size: 25px;}
#exMV .exName{ font-size:30px;}
#exMV .date{ font-size: 100%; display: block;}

    
a.instaLink{ display: inline-block; border: 1px solid #333; padding: 0.5em 2em; line-height: 1em; margin-top: 10px; color: #333; font-size: 30px;}
a.instaLink:hover{background: #ec74a9; border-color: #ec74a9; color: #fff;}

a.spaceLink{ display: inline-block; border: 1px solid #333; padding: 0.5em 2em; line-height: 1em; margin-top: 10px; color: #333; font-size: 30px;}
a.spaceLink:hover{background: #ec74a9; border-color: #ec74a9; color: #fff;}

}
	

#exMV .imgBox{ -moz-box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);
-webkit-box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);
-ms-box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);
box-shadow: 0px 0px 9px 1px rgba(189, 189, 189, 0.2);}

    






.past{
width: 100%;
margin: 0 auto ;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 15px;
row-gap: 15px;  
    padding-top: 30px;
    margin-bottom: 30px;
}

.past li{  display: table;}
.past li .imgBox{ width: 20%; margin-right: 5%; display: table-cell; vertical-align: middle; border: 1px solid #eee}
.past li .textBox{ width: 80%; display: table-cell; vertical-align: middle; padding: 0 20px 0 10px;}

.past .artistName{display: block; font-size: 10px; margin-bottom: 3px; line-height: 1.2em;}
.past .exName{display: block; font-size: 12px; margin-bottom: 3px; line-height: 1.2em;}
.past .date{display: block; font-size: 10px; margin-bottom: 3px; line-height: 1.2em;}


@media(max-width:750px){

.past{
width: 100%;
margin: 0 auto ;
display: grid;
grid-template-columns: repeat(1, 1fr);
column-gap: 15px;
row-gap: 15px;  
    padding-top: 30px;
    margin-bottom: 30px;
}
.past li .imgBox{ width: 20%; margin-right: 5%; display: table-cell; vertical-align: middle; border: 1px solid #eee}
.past li .textBox{ width: 80%; display: table-cell; vertical-align: middle; padding: 0 20px 0 10px;}
.past .artistName{display: block; font-size: 20px; margin-bottom: 3px; line-height: 1.2em;}
.past .exName{display: block; font-size: 28px; margin-bottom: 3px; line-height: 1.2em;}
.past .date{display: block; font-size: 20px; margin-bottom: 3px; line-height: 1.2em;}
}






















.acd-check{
    display: none;
}
.acd-label{
    background:url(../images/acPlus.png) no-repeat right  50%;
    background-size:20px 20px;
  background-position: right 15px center;
    color: #555;
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    padding: 25px 20px;
    font-size: 16px;
    position: relative;
    z-index: 1;
    border-top: 1px solid #eee
}


.acd-label span.hsize{ font-size: 190%; margin-right: 10px; color: #aaa}
.acd-content span.hsize{ font-size: 190%; margin-right: 10px; color: #aaa}


.acd-content{
    position: relative; top: -30px;
    z-index: 0;
    height: 0;
    opacity: 0;
    padding: 0 30px 0 30px;
    transition: 0.5s;
    visibility: hidden;
}
.acd-check:checked + .acd-label + .acd-content{
    height: auto;
    opacity: 1;
    padding: 50px 30px 30px 30px;
    visibility: visible;
    background: #fff;
}



.acd-check:checked + .acd-label{
    background: url(../images/acMinus.png) no-repeat right top;
    background-size:20px 20px;
  background-position: right 15px center;
}

@media(max-width:750px){
    
.acd-label{
    font-size: 26px;
    padding-right: 2em;
}
    .acd-content p{ font-size: 26px;}
    
}

.acd-content p{ position: relative;}
.acd-content a{position: relative; z-index: 10;}







#RESERVE{ margin-bottom: 100px;}

#reserveParts { width:100%;  text-align: center;}

#reserveParts h2{opacity: 0;
font-family: 'Anton', sans-serif; color: #000; text-align: left;
font-weight:normal; font-size:40px; line-height:1em;padding:0 0 35px 0;
}

#reserveParts>.inner{width:1000px; margin: 0 auto;padding:60px 25px 50px;}

.HPG_reserveGadgetsFooter img{width: auto;}
.resBlock{ width: 700px !important; margin: 0 auto; overflow: hidden;}



@media(max-width:750px){

#reserveParts h2{
font-family: 'Anton', sans-serif; color: #000; text-align: left;
font-weight:normal; font-size:60px; line-height:1em;padding:0 0 35px 0;
}
#reserveParts>.inner{width:auto; margin: 0 auto;padding:60px 25px 50px;}
}












#subVisual{text-align: center;
    padding: 200px 0;
}
#subVisual img{
   width: 260px; 
}


@media(max-width:750px){

#subVisual{text-align: center;
    padding: 200px 0;
}
#subVisual img{
   width: 400px; 
}


}



.copy{ padding: 100px 0;}







.dlTable {
    width: 100%; /* テーブルの横幅を500pxに指定 */
    display: flex; /* 子要素のdtとddを横並びにする */
    flex-wrap: wrap; /* 1つのdtとddで1行になるよう改行させる */
}
.dlTable dt,
.dlTable dd {
    box-sizing: border-box; /* widthの計算を楽にするため */
    padding-bottom: 26px;
    font-family: source-han-sans-japanese, sans-serif;
font-weight: 500;
font-style: normal;
}
.dlTable dt {
    font-size: 16px; /* フォントサイズを16pxに指定 */
    width: 80px; /* dt（見出し項目）の横幅を200pxに指定 */
}
.dlTable dd {
    width: calc(100% - 80px); /* テーブル幅からdtを引いた分の横幅を指定。 */
    font-size: 14px; /* フォントサイズを16pxに指定 */
}

/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:750px) {

    .dlTable {
        width: 100%; /* 横幅をpxではなく、幅いっぱいに指定。 */
        border-left: none; /* テーブルの左の線を消す */
        display: block; /* 横並びにさせないようブロック要素にする */
        margin-bottom: 30px;
    }
    .dlTable dt,
    .dlTable dd {
        border-right: none; /* セルの右の線を消す */
        width: 100%; /* 横幅を幅いっぱいに指定 */
        padding: 10px 0; /* 各セルに余白を取る */
        text-align: center;
    }
    .dlTable dt {
        border-bottom: none; /* 下の線を消す（ddの下の線が残る） */
        padding-bottom: 0; /*ddとの距離を近づけるため、0にする*/
    font-size: 30px; 
    }
    .dlTable dd {
    font-size: 20px; 
        padding-bottom: 20px;
    
    }

}





@media(min-width:751px){

}

@media(max-width:750px){

}



/* ---------------------------------------------------------------------------------
INFO2 */









@media(max-width:750px){


}



/* ---------------------------------------------------------------------------------
RESULT */


/* ---------------------------------------------------------------------------------
MESSAGE */



@media(max-width:750px){






}


/* ---------------------------------------------------------------------------------
RANKING */


@media(max-width:750px){


}








/* ---------------------------------------------------------------------------------
top concept */




@media(max-width:750px){


} /* Responsive End */












/* ---------------------------------------------------------------------------------
footer */



@media(max-width:750px){



}



/* ---------------------------------------------------------------------------------
onebox */



@media(max-width:750px){
	

}





/* ---------------------------------------------------------------------------------
yoko */





/* ---------------------------------------------------------------------------------
kekka */









/* ---------------------------------------------------------------------------------
common */


.clear{ clear:both;}
.tac{ text-align:center !important;}

@media(min-width:751px){
.sp{ display:none !important;}
} /* Responsive End */

@media(max-width:750px){
.pc{ display:none !important; }
} /* Responsive End */

@media(max-width:750px){
#commonFooter{ display:none !important; }
}

@media(max-width:750px){
#commonFooter{ display:none !important; }
}


@media(max-width:750px){
.tac_pc{ text-align:left !important;}
.tac_sp{ text-align:center !important;}
}

@media(min-width:751px){
.tac_pc{ text-align:center !important;}
.tac_sp{ text-align:left !important;}
}







.eventHeader{ padding:0 0 20px 0;}
.evDate{font-size:140%; margin-right:20px; color:#ec74a9;}
.guestName{ font-weight:bold; font-size:140%; display:block; margin-bottom:0.3em;}

.eventListArea article{padding-bottom:50px;}
.eventListArea article >.inner dl{ margin-bottom:25px; padding-left:25px; padding-top:25px; border-top:1px dashed #ccc;}
.eventListArea article >.inner dl:first-child{ border-top:4px solid #444;}
.eventListArea article >.inner dt{ font-size:18px; font-weight:bold; margin-bottom:0.5em; color:#ec74a9;}
.eventListArea article >.inner dd{padding-left:25px;font-size:14px; line-height:1.6em}

.eventListArea dt span{ font-size:80%; color:#34638F; margin-left:25px; font-weight:normal; display:block;}

.eventListArea h3{ font-size:200%; margin-bottom:20px; line-height: 1.2em;}


.eventListArea table{ margin-left:30px;}
.eventListArea table th{ text-align:left; width:30%; padding-bottom:5px; padding-left:3px}
.eventListArea table td{ width:90%;padding-bottom:20px;}
.eventListArea table td.crn{ width:5%;}


.toDaysArtists{ width:100%; margin:0 auto; padding:50px; border:1px solid #ec74a9;}
.toDaysArtists h4{ font-size:20px; margin-bottom:25px;}
.toDaysArtists dl{ width:159px;margin-right:20px;margin-bottom:20px; float:left;}
.toDaysArtists dl:nth-child(4n+1){ margin-right:0;}
.toDaysArtists dt{ width:auto;  }
.toDaysArtists dt img{ width:100%;}
.toDaysArtists dd{ text-align:center;}

.eventVisual{margin-bottom:50px; text-align: center;}
.eventVisual img{ width:70%; margin: 0 auto;}

@media(max-width:750px){

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

.eventListArea{margin:0 30px;}

.eventListArea article{ padding-bottom:50px;}
.eventListArea article >.inner dl{ margin-bottom:25px; padding-left:25px; padding-top:25px; border-top:1px dashed #ccc;}
.eventListArea article >.inner dl:first-child{ border-top:4px solid #444;}
.eventListArea article >.inner dt{ font-size:30px; font-weight:bold; margin-bottom:0.5em;}
.eventListArea article >.inner dd{padding-left:25px;font-size:26px; line-height:1.3em}

.eventListArea dt span{ font-size:80%; color:#ec74a9; margin-left:25px; font-weight:normal;}

.eventListArea h3{ font-size:28px; margin-bottom:20px;}


.eventListArea table{ margin-left:30px;}
.eventListArea table th{ text-align:left; width:30%; padding-bottom:5px; padding-left:3px}
.eventListArea table td{ width:90%;padding-bottom:20px;}
.eventListArea table td.crn{ width:5%;}


.toDaysArtists{ width:100%; margin:0 auto; padding:50px; border:1px solid #ec74a9;}
.toDaysArtists h4{ font-size:28px; margin-bottom:25px;}
.toDaysArtists dl{ width:250px;margin-right:20px;margin-bottom:20px; float:left;}
.toDaysArtists dl:nth-child(2n+1){ margin-right:0;}
.toDaysArtists dt{ width:auto;  }
.toDaysArtists dt img{ width:100%;}
.toDaysArtists dd{}

}








.spaceEvents{}


@media(min-width:751px){
.spaceEvents article{ width:30%; margin-right:5%; float:left;}
.spaceEvents article:nth-child(3n){ margin-right:0;}
}
@media(max-width:750px){
.spaceEvents article{ width:90%; margin:0;}
}


.spaceEvents article img{ width:100%;}
.spaceEvents figcaption{ padding:1em; font-size:90%;}


.spaceEvents:before,
.spaceEvents:after {content: " ";display:table;}
.spaceEvents:after {clear: both;}
.spaceEvents{*zoom: 1;}

.spaceVisual{ margin-bottom:1em;}
.spaceVisual img{ width:100%;}