/***********************************************************

 * top

************************************************************/
.container{
	background: #670909;
}
@media screen and (max-width: 640px) {
	.container{
	}
}
/*--------------------------------------*/
.main{
	background: url("../img/top/visual02_pc.jpg") no-repeat center top,#670909;
	background-size: cover;
	padding-bottom: 73%;
}
@media screen and (max-width: 640px) {
	.main{
		background: url("../img/top/visual02_sp.jpg") no-repeat center top,#670909;
		background-size: 100% auto;
	  padding: 0;
    overflow: hidden;
	}
}

/*--------------------------------------*/
.main > div{
  position: absolute;
}
.kv-parts{
  position: absolute;
  top: 0;
  left: 2.17%;
  width: 47.3%;
}
.kv-parts img:last-child{
  position: absolute;
  top: 0;
  left: 0;
}
._hashtag{
	width: 46%;
  margin: 3% auto;
}
._copy{
  width: 2%;
  top: 0;
  left: 4%;
  padding-top: 20%;
}
._title-set{
  width: 48%;
  right: 5%;
  top: 10%;
}
._academy{
  position: relative;
  width: 95%;
  margin: 0 auto;
}
.red{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.blink{
  opacity: 1;
}
._title{
	width: 100%;
  right: 1.5%;
  bottom: 20%;
}
._roadshow{
  width: 25%;
  margin: 2% auto 7%;
}
.main ._kansou-cp{
  width: 15%;
  top: 0;
  left: 1%;
  padding-top: 55%;
}
.main ._dvd-bnr{
  width: 15%;
  top: 0;
  left: 1%;
  padding-top: 55%;
}
.main ._comment-bnr{
  width: 15%;
  top: 0;
  right: 1%;
  padding-top: 65%;
}
@media screen and (max-width: 640px) {
  .main > div{
  }
  .kv-parts{
    width: 94%;
    left: 3%;
    margin-top: 59%;
  }
  ._hashtag{
    top: 0;
    width: 48%;
    margin: 4% auto;
  }
  ._copy{
    width: 10%;
    left: 6%;
    padding-top: 100%;
  }
  ._academy{
    width: 94%;
    position: relative !important;
    padding-top: 13%;
    margin: 0 auto;
  }
  .red{
    position: absolute;
    padding-top: 13.9%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  ._title-set{
    position: relative !important;
    width: 95%;
    top: 0;
    padding-top: 110%;
    right: 0;
    left: 0;
    margin: auto;
  }
  ._title{
  }
  ._roadshow{
    margin: 3% auto 10%;
  }
  .main ._kansou-cp,
  .main ._dvd-bnr,
  .main ._comment-bnr{
    display: none;
  }
}
.others{
  position: static;
  /*padding: 0;*/
}
._catch{
  width: 64%;
  right: 0;
  left: 0;
  margin: auto;
}
._credit{
  width: 55%;
  right: 0;
  left: 0;
  margin: auto;
}
.others ._kansou-cp,
.others ._dvd-bnr,
.others ._comment-bnr{
  display: none;
}
._collabo-mv{
  width: 20%;
  margin: 5% auto;
}
._spotyfy{
  width:600px;
  position: relative;
  margin: 5% auto;
}
@media screen and (max-width: 640px) {
  ._catch{
    position: relative !important;
    width: 95%;
    bottom: auto;
    padding-top: 15%;
  }
  ._credit{
    position: relative !important;
    width: 95%;
    bottom: auto;
    padding-top: 10%;
  }
  .others ._kansou-cp,
  .others ._dvd-bnr,
  .others ._comment-bnr{
    display: block;
    width: 50%;
    margin: 5% auto 20px;
  }
  ._collabo-mv{
    width: 80%;
    margin: 5% auto;
  }
  ._spotyfy{
    width: 92.8vw;
    text-align: center;
  }
}
/* sns */
/*._sns{
  position: absolute;
  top: 3%;
  left: 2.5%;
  z-index: 9;
}
@media screen and (max-width: 640px) {
  ._sns{
    top: 0;
    padding-top: 2.5%;
    z-index: 1;
  }
}*/

/* nav */
.navi{
  /*padding: 50px 0;*/
}
.navi-wrapper{
}
.navi-list{
	display: flex;
	justify-content: center;
  max-width: 800px;
  width: 88%;
  margin: 0 auto;
  flex-wrap: wrap;
}
.navi-list-item{
	max-width: 250px;
	width: calc((100% / 3) - 10px);
  margin: 5px;
}
.navi-list-item.-about{
	max-width:inherit;
	width: 100%;
}
.navi-list-item a{
  font-family: 'Righteous', cursive;
  background: #E60012;
	font-size: 20px;
	text-align: center;
	font-weight: 100;
	letter-spacing: .1em;
	padding: 10px;
	display: block;
	transition: all .5s;
  color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 2px 0px rgba(78,12,9,.7);
  line-height: 30px;
}
.navi-list-item a:hover{
	background: #152BFB;
}
@media screen and (max-width: 1200px) {
  .navi-list-item a{
    font-size: 1.5vw;
    padding: 1vw;
    line-height: 1.2;
  }
}
@media screen and (max-width: 640px) {
  .navi-list-item{
    width: calc((100% / 2) - 10px);
    margin: 5px;
  }
  .navi-list-item:first-of-type{
  }
  .navi-list-item a{
    font-size: 20px;
    padding: 10px;
  }
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}


.banner{
  background: #13157C;
  padding: 0 0 30px;
}
.bnr-area{
  display: flex;
  justify-content: center;
  align-content: center;
}
.bnr-area li{
  max-width: 300px;
  width: 45%;
  margin: 0 5px 10px;
}

#c2-container{
  font-family: "Roboto","Helvetica Neue",YakuHanJP, 'Noto Sans JP',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Osaka,"CI",Meiryo,"メイリオ","lroSVbN","ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight:500;
}
#c2-container.c2-mix .c2-user-txt,
#c2-container.c2-mix .nophoto .c2-user-txt{
  font-size: 18px;
}
#c2-container.c2-mix .c2-container-inner > li > .inner{
  /*background: rgba(0,0,0,.6);
  color: #fff;*/
  word-break: break-all;
}
#c2-container.c2-mix .c2-container-inner > li{
  width: 25%;
}
@media screen and (max-width: 1000px) {
  #c2-container.c2-mix .c2-container-inner > li{
    width: 33.3333%;
  }
}
@media screen and (max-width: 640px) {
  #c2-container.c2-mix .c2-container-inner > li{
    width: 100%;
  }
}