@charset "UTF-8";
@import url(cmn.css);
@import url(base.css);

/*----------------------------
header
----------------------------*/

#mv{
	display: block;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

#mv.wrapper{
    max-width:1140px;
    padding-bottom:calc(var(--spacer)*5);
}

#mv h1{
    /*padding-top:calc(var(--spacer)*10);*/
    background:url("../images/mv-title-bg.webp") no-repeat;
    background-size:100% auto ;
    background-position: top center;
    padding-bottom:calc(var(--spacer)*3);
}
#mv .mv-date{
    text-align: center;
    
}
@media screen and (max-width: 768px){
    #mv.wrapper{
    padding-left:0;
    padding-right:0;
    padding-bottom:0;
    }
    #mv .mv-date{
    padding-bottom: 6vw;
    }
    #mv .mv-date img{
        width:80vw;
        height:auto;
    }
}


/*----------------------------
main
----------------------------*/
main{
    overflow-x: hidden;
}
main h3{
    border-top:1px solid var(--white);
    border-bottom:1px solid var(--white);
    margin-bottom:30px;
}
main h3 span{
    display: block;
    padding:calc(var--(spacer)*1.5);
}


#outline{
    background: url("../images/outline-bg.webp") no-repeat;
    background-attachment: fixed;
    background-position: top center;
    background-size:100% auto;
}
#outline .outer{
    max-width:1220px;
    padding-right:0;
    padding-left:0;
    width:100%;
    margin:auto;
}
#outline-dance.outer{
    background:url("../images/outline-dance-bg.webp") no-repeat;
    background-position: left top;
    /*border-bottom:1px solid var(--white);*/
    padding-bottom:calc(var(--spacer)*5);
    margin-bottom:calc(var(--spacer)*5);
}
#outline-contest.outer{
    background:url("../images/outline-contest-bg.webp") no-repeat;
    background-position: left top;
}
#outline h2,
#outline .flex{
    padding-bottom: 20px;
}
.outline-contest-img >*{
    padding-bottom:20px;
    text-align: center;
}
#outline dl{
    margin:10px 0;
    align-items: flex-start;
}
#outline dl dt{
    width:15%;
}
#outline dl dd{
    width:83%;
    padding:3px 0;
}
#outline dl dt span{
    font-size:calc(var(--font-size-base)*.88);/*16*/
    border:1px solid var(--primary);
    padding:3px 15px;
    color:var(--primary);
    display: block;
    text-align: center;
}
#outline #outline-contest dl dt span{
    border:1px solid var(--secondary);
    color:var(--secondary);
}
#danceday-special{
    background: url("../images/mv-bg2.webp") no-repeat;
    background-position: top center;
    background-size:100% auto ;
    padding-bottom:calc(var(--spacer)*5);
    margin-bottom:calc(var(--spacer)*10);
}
#shinsa{
    background: url("../images/mv-bg2.webp") no-repeat;
    background-attachment: fixed;
    background-position: top center;
    background-size:100% auto;
    padding-bottom:calc(var(--spacer)*5);
}

#entry{
    text-align: center;
}
#entry>section{
    padding-top:0;
    padding-bottom:0;
}
#entry .flex>section{
    flex: 1;
}
#entry-dance{
    background:var(--primary);
    padding-top:calc(var(--spacer)*5);
    padding-bottom:calc(var(--spacer)*5);
}
#entry-contest{
    background:var(--secondary);
    padding-top:calc(var(--spacer)*5);
    padding-bottom:calc(var(--spacer)*5);
}

@media screen and (max-width: 768px){
    #outline-dance.outer,
    #outline-contest.outer{
    background-size:30% auto;
}
#entry p.ac{
        text-align: left!important;
    }
    #danceday-special,
    #shinsa{
    background-position: top center;
    background-size:200% auto ;
}
#shinsa h5{
	text-align: left!important;
}
}
@media screen and (max-width: 390px){
    #outline-dance.outer,
    #outline-contest.outer{
    background-size:15% auto;
    }
}



/*----------------------------
loading
----------------------------*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background:#000;
    text-align:center;
    color:#fff;
    display: flex;
    justify-content:center;
    align-items:center;
}

/* Loading画像中央配置　*/
#splash_logo {
    display: inline-block;
    width:445px;
    height:401px;
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  
}
.splashUp{
animation-name: splashUpAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes splashUpAnime{
  from {
    opacity: 0;
  transform: translateY(40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}