@charset "UTF-8";

:root {

	--ease-in: cubic-bezier(.5,0,1,.5) ;
	--ease-out:cubic-bezier(.35,.6,.4,1);
	--ease-in-out:cubic-bezier(0.9, 0.175, 0.175, 0.9);
	--easing: cubic-bezier(0.9, 0.175, 0.175, 0.9);	

}




body {
	width: 100%;
	height: auto;
	background: #000;
	color: #fff;
	padding: 0;
	margin: 0;
 font-family: "Helvetica Neue",    Arial,    "Hiragino Kaku Gothic ProN",    "Hiragino Sans",    Meiryo,    sans-serif;
}

body.fixed {
	display: fixed;
	overflow: hidden !important;
	width: 100%;
	height: 100vh;
}

body.loadingFinish {
	display: block;
	overflow: auto;
	overflow-x: hidden;
	height: auto;
}

body.modalMode {
	overflow: scroll;
	overflow-x: hidden;
}

#loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 50000;
	pointer-events: none;
	background: #000;
}

#loadingAnim {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.2);
	width: 30px;
	height: 30px;
	z-index: 9000;
	opacity: 1; 


}
#loadingAnim .loader {
  margin: 0 auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}





.loadingFinish #loadingAnim {
	opacity: 0;
}





.nolink {
	pointer-events: none;
	cursor: default;
}

.horoyoi-preload {
	width: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

.firstLoad {
	opacity: 0;
	transition: opacity 1s ease-out;
}

.firstLoad.in {
	opacity: 1;
}

#container {
	position: relative;
	pointer-events: none;
	opacity: 0;
	text-align: center;
	font-weight: 500;
	 background: #000;
}



.loadingFinish #container {
	opacity: 1;
	pointer-events: auto;
}

#globalNav {
	display: none;
}

.wfull,
.wFull {
	width: 100%;
	height: auto;
}

.fixed {
	width: 100%;
	height: 110vh;
	position: fixed;
	top: 0;
	left: 0;
}

.inview {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.inview.in {
	opacity: 1;
}

img, div, a {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	
}

img{ vertical-align: bottom;}

*:after, *:before {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.inView2{ border: solid 5px #369 !important }
.anim{ transition: all 500ms ease-out; }

.deco{ position: absolute; top: 0; left: 0;  width: 10vw; border: solid 0px #f30; opacity: 1;}

.deco2{ position: absolute; top: 0; left: 0;  width: 10vw; border: solid 0px #f30; transition: all 1000ms cubic-bezier(.35,.6,.4,1) 2000ms; opacity: 0;}


	
.wCenter{ position: relative; left: 50%; right: auto; transform: translate(-50%,0);}

.sns{text-align: center; margin: 0; padding: 0; }
.sns li{ display: inline-block; width: 8vw; margin: 0 2vw; }
.sns li a{ display: block;}
.sns li a:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 100%;}
.sns li .twitter {  background: url(../img/common/icon_twitter.png) center center no-repeat; background-size:contain;}
.sns li .facebook {  background: url(../img/common/icon_facebook.png) center center no-repeat; background-size:contain;}
.sns li .line {  background: url(../img/common/icon_line.png) center center no-repeat; background-size:contain;}

.noSectionBG{ background-image:none !important; background: transparent !important;}

.posA{ position: absolute;}

.posCenter{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.tCenter{ text-align: center;}

.linkBtn{ display: inline-block; margin-bottom: 3vw; cursor: pointer;}
.linkBtn.nolink{ cursor: default !important;}

.hoverAction{ transition: all 250ms cubic-bezier(.72,.46,.32,1.61) 0ms;}
.hoverAction:hover{ transform: scale(1.03);}

ul.list{ padding: 0 0 0 2em; margin-bottom: 1em;}
ul.list li{ padding: 0; margin-bottom: 0.4em; position: relative;}

ul.kome{ list-style: none; padding: 0 0 0 0.5em;margin-bottom: 1em;}
ul.kome li{ padding: 0 0 0 1.5em; margin-bottom: 0.4em;position: relative;}
ul.kome li:before{ content: '※'; display: inline-block; position: absolute; top: 0; left: 0;}


.modalOpen{ cursor: pointer;}

.btnArea{ width: 90%; margin: 0 auto 5vw auto; text-align: center !important}
.btnArea a.linkBtn,
.btnArea .linkBtn{ position: relative; display: block; align-items: center; background: #000; color: #fff; border-radius: 6vw; height: 12vw; text-decoration: none !important; line-height: 1; margin: auto; cursor: pointer; }
.btnArea .linkBtn.arrowR:after,
.btnArea .linkBtn.arrowD:after{ content: ''; display: block; position: absolute; width: 1vw; height: 1vw; top: 50%; right: 6vw; transform: translate(0,-50%) rotate(-45deg); border: solid 2px #fff; border-top: 0;border-left: 0;}

.btnArea.count_2{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.btnArea.count_2 .btnItem{ margin: 0 2vw;}

.btnItem.deactive{ pointer-events: none; opacity: .3;}


.btnArea.inView{ opacity: 0;}

.btnArea .linkBtn.arrowD:after{transform: translate(0,-60%) rotate(45deg);}

.btnArea .linkBtn span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; white-space: nowrap;}

.btnArea .linkBtn.ouboDoit{ font-weight: bold !important;}

.btnArea .linkBtn.iconClose{ font-size: 0.8em;}
.btnArea .linkBtn.iconClose:after{ content: '×'; display: block; position: absolute; width: auto; height: auto; top: 50%; right: 6vw; transform: translate(0,-50%) ; font-size: 1.2em; line-height: 1;}


.btnArea .linkBtn.whiteBG {background: #fff; color: #e60012;}
.btnArea .linkBtn.redBG {background: #e60012; color: #fff;}
.btnArea .linkBtn.blueBG {background: #b2edff; color: #0087b4;}
.btnArea .linkBtn.grayBG {background: #e6e6e6; color: #000;}
.btnArea .linkBtn.blackBG {}

.btnArea .linkBtn.whiteBG.shadow {box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.6);}
.btnArea .linkBtn.redBG.shadow {box-shadow: 0px 4px 0px 0px #80010c;}
.btnArea .linkBtn.blueBG.shadow {box-shadow: 0px 4px 0px 0px #0087b4;}




.tSpacing0{letter-spacing: 0.01em;}
.tNormal{ font-weight: 400;}
.tMidium{ font-weight: 500;}
.tBold{ font-weight: 700;}


.lineFrame { position: relative; width: 100vw; background: url(../images/music_parade/shindan/frame/base.png) center center repeat-y; background-size: 100% auto; text-align: center;}
.lineFrame:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/music_parade/shindan/frame/top.png) center top no-repeat; background-size: 100% auto;z-index: 1;}
.lineFrame .inWrap{ position: relative; z-index: 2;}
.lineFrame .inWrap:before,
.lineFrame .inWrap:after{content: ''; display: block; position: absolute;left: 0; width: 100%; height: 100%; }
.lineFrame .inWrap:before{ top: 0;background: url(../images/music_parade/shindan/frame/header.png) center top no-repeat; background-size: 100% auto; }
.lineFrame .inWrap:after{ bottom: 0; background: url(../images/music_parade/shindan/frame/header.png) center bottom no-repeat; background-size: 100% auto; }

.btnH{ width: auto; height: 14vw;}



/* ----- section ----- */









/* ----- read ----- */
section.area .read{   }
 section.area.inSectionView.is-show .read{}


	        








.modalArea{ position: fixed; top: 0; left: 0; z-index: 50; width: 100%; height: 100%; background: rgba(0,0,0,0.8);}
.modalArea .inWrap > .close{position: absolute; top: -12vw; right: -2vw; width: 10vw; height: 10vw;}
.modalArea .inWrap > .close:before,
.modalArea .inWrap > .close:after{ content: ''; display: block; width: 10vw; height: 4px; border-radius: 2px;  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); background: #fff;}
.modalArea .inWrap > .close:before{ transform: translate(-50%,-50%) rotate(-45deg); }
.modalArea .inWrap > .close:after{  transform: translate(-50%,-50%) rotate(45deg); }

.modalArea .inWrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90vw; min-height: 50vw; border: solid 0px #f30; transform-origin: center center; opacity: 0;transform: translate(-50%,-40%) scale(0.8); }

.modalArea.active .inWrap{opacity: 1;transform: translate(-50%,-50%) scale(1);  transition: all 600ms cubic-bezier(.42,.02,.5,1.56) 200ms;}

.modalArea .inWrap.scrollFrame{position: absolute; top: 0; left: 0; transform: translate(0,0); width: 100%; height: 100%; overflow: hidden; overflow-y: scroll;
	padding: 4em 0;
	box-sizing: border-box;
}
.modalArea .inWrap.scrollFrame > .close{
	    top: 4vw;
    right: 2vw;
}
.modalArea .inWrap.scrollFrame .content{ position: relative; top: 0; left: 0; transform: translate(0,0); width: 80%; margin:0 auto 5vw; background: #fff; color: #000; padding: 1em; border-radius: 2vw;}



.modalArea .closeBtn{ width: 70vw; margin: auto; padding-bottom: 20vw;}
	


body.resizing *,
body.resizing div{ transition-delay: 0ms !important; transition-duration: 0ms !important; animation-delay: 0ms !important; }