@charset "utf-8";
/************************************************

@PC - style.css v5.0.0

(c) ULM Co.,Ltd. - https://www.ulm-design.com
************************************************/
#main{
  opacity: 0;
}

.en,.contents-ttl {
  font-family: eldwin-script, sans-serif;
  font-weight: 400;
  font-style: normal;
}

#header,#logo,#txt0,#txt1,#roadshow,#main-intro,#main-bottom,#comment-btn,#prono-btn {
  opacity: 0;
}

#logo,#roadshow,#txt0,#txt1,#main-intro,#comment-btn,#prono-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#top-main {
  position: relative;
  width: 100%;
}

#mainimg {
  position: relative;
}

#mainph {
  margin: 0 0 0 auto;
}

#logo {

}

#roadshow {
  width: 10.86%;
}

#billing {
  width: 56.25%;
  max-width: 960px;
  margin: 50px auto 50px;
}

#txt0 {
  width: 57.97%;
  left: 26%;
  top: 13px;
}

#txt1 {
  width: 10.23%;
  /* position: absolute;
  width: 20%;
  bottom: 8%;
  right: 1.6%; */
}

#txt2 {
  /* position: absolute;
  width: 17%;
  bottom: -1%;
  left: -2%; */
}

#main-bottom {
  padding: 20px 5%;
}

.otameshi {
  width: 320px;
  margin: 30px auto 0;
}

.otameshi a:hover {
  opacity: .6;
}

.top-bnr {
  margin: 60px auto;
}

.top-bnr ul {
  margin: 20px auto 0;
}

.top-bnr li {
  width: 300px;
  padding: 10px;
}

.top-bnr a:hover{
  opacity: .8;
}

#comment-btn {
  transition: all .4s ease;
}

#comment-btn:hover {
  transform: scale(1.1);
  cursor: pointer;
}

#prono-btn a {
  display: block;
}

#prono-btn {
  transition: all .4s ease;
}

#prono-btn:hover {
  transform: scale(1.1);
  cursor: pointer;
}

.top-contents {
  background: url(../img/common/check_blue.png);
  text-align: center;
  padding: 10% 0;
  margin-top: -10%;
}

/*-------------------------------

#movie-thumb-container

-------------------------------*/
#trailer {
  margin: 50px auto;
}


#movie-container{
  /* width: 100%; */
  width: 96%;
  margin: 20px auto 0;
  padding: 0 0 25px;
}

#movie-nav{
}

.movie-nav-box{
  width: 50%;
}

.movie-nav-btn{
  display: block;
  min-height:40px;
  line-height:40px;
  letter-spacing: 3px;
  text-align:center;
  text-decoration: none;
  color:#fff;
  background: #000;
}

.movie-nav-btn.selected{
  color: #fff;
  background: #00ade9;
}

.movie-thumb-box{
  width: 100%;
  background: #000;
  position: relative;
}

.movie-thumb-box:before {
  content:"";
  display: block;
  padding-top: 54.25%;/* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}

.youtube {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.movie-thumb-list li {
  padding: 0 10px;
}

.movie-cap {
  text-align: center;
  padding: 10px;
  font-size: 1.2em;
  font-weight: bold;
}

.swiper-pagination-bullet-active{
  background: #00ade9;
}

.play-icon{
  color: #e60027;
  width: 52px;
  height: 58px;
  font-size: 60px;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  display: block;
  line-height: 1em;
  z-index: 1;
}

/*-------------------------------

contents

-------------------------------*/
.contents {
  position: relative;
}

.contents-inner {
  position: relative;
  margin: 0 auto;
  padding: 5% 0;
  max-width: 960px;
}


/* .contents-ttl {
  padding: 5%;
  color: #0569c7;
  font-size: 2em;
  letter-spacing: .2em;
  text-indent: .7em;
  text-align: center;
} */

.contents-ttl {
  padding: 30px;
  color: #feef1a;
  font-size: 80px;
  text-align: center;
  font-family: eldwin-script, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-indent: .7em;


  position: relative;
  transform: rotate(-5deg);
  display: inline-block;
  margin: 0 auto;
  padding: 10px 50px 10px 0;
}


.txt-container p {
  line-height: 2;
  padding: .7em 0;
  word-break: normal;
}

.pink {
  color: #e74291;
}

.ttl-img {
  transform: translate(0px, 100px);
  opacity: 0;
}

.ttl-img.in {
  animation: ttlin .7s ease forwards;
}

@keyframes ttlin {
  0% {
    transform: translate(0px, 100px);
    opacity: 0;
  }
  70% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate(0px, 10px);
    opacity: 1;
  }
}


/*-------------------------------

#about

-------------------------------*/
#about-ttl {
  position: relative;
  transform: rotate(-5deg);
  display: inline-block;
  margin: 0 auto;
  padding: 10px 50px 10px 0;
}

/* #about-ttl::after {
  content: "";
  background: url(../img/common/na.png) no-repeat top center;
  background-size: 44px;
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
} */

.about-ttl-container {
  padding: 120px 0 0;
  text-align: center;
  position: relative;
}

.about-ttl-img {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-right: -470px;
  width: 118px;
}

.wave {
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
}

#about-lead {
  background: url(../img/about/intro_bg.jpg) no-repeat top center;
  background-size: 100%;
  position: relative;
  z-index: 2;
}

#intro {
  position: relative;
  z-index: 2;
  color: #e74291;
  font-size: 20px;
  text-align: center;
  padding: 0;
}

#intro-lead {
  width: 80%;
  margin: 30px auto;
}

#story {
  background: url(../img/about/story_bg.jpg) no-repeat bottom center #fafafa;
  background-size: 100%;
  margin-top: -50px;
  padding: 0 0 52vw;
  font-size: 18px;
  text-align: center;
}

.intro-slide{
  position: relative;
  z-index: 2;
	width: 100%;
	height: 300px;
	background: url(../img/about/intro_slide.png) repeat-x;
	background-position: top left;
  background-size: auto 300px;
  box-shadow: 0 0 3px rgba(255,255,255,1);
	-webkit-animation-name: photoSlideLeft;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: photoSlideLeft;
	-moz-animation-duration: 20s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	animation-name: photoSlideLeft;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;

}

@-webkit-keyframes photoSlideLeft {
	0% {background-position: 0px 0px;}
	100% {background-position: -1396px 0px;}
}
@-moz-keyframes photoSlideLeft {
	0% {background-position: 0px 0px;}
	100% {background-position: -1396px 0px;}
}


/*-------------------------------

#cast

-------------------------------*/
#cast-ttl {
  position: relative;
  transform: rotate(-5deg);
  display: inline-block;
  margin: 0 auto;
  padding: 10px 50px 10px 0;
  color: #00a0ea;
}

/* #cast-ttl::after {
  content: "";
  background: url(../img/common/na.png) no-repeat top center;
  background-size: 44px;
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
} */

.cast-ttl-container {
  position: relative;
  background: url(../img/cast/cast_ttl_bg.png) no-repeat left center #feef1a;
  padding: 80px 0 0;
  text-align: center;
  overflow: hidden;
}

.cast-ttl-img {
  position: absolute;
  bottom: 0;
  right: 50%;
  margin-right: -400px;
  width: 226px;
}

#cast-inner {
  background: #fff;
  padding: 40px 0 80px;
}

.cast-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 120px;
  cursor: pointer;
}

.cast-btn:hover::after {
  transform: scale(1.2);
}

.cast-btn::after {
  background: url(../img/cast/open.png) no-repeat bottom right #e74291;
  background-size: 30px;
  border-radius: 30px;
  content: "";
  position: absolute;
  bottom: 6px;
  right: 0;
  width: 30px;
  height: 30px;
  transition: all .4s ease;
}

#cast-btn2::after,
#cast-btn3::after,
#cast-btn4::after,
#cast-btn5::after,
#cast-btn7::after ,
#cast-btn8::after{
  background: url(../img/cast/open.png) no-repeat bottom right #00ade9;
  background-size: 30px;
}

#cast-btn9::after,
#cast-btn10::after,
#cast-btn11::after {
  background: url(../img/cast/open.png) no-repeat bottom right #fbc61c;
  background-size: 30px;
}

#cast-btn0 {
  width: 180px;
  height: 180px;
  top: 164px;
  left: 288px;
}

#cast-btn1 {
  width: 180px;
  height: 180px;
  top: 219px;
  left: 491px;
}

#cast-btn0::after,
#cast-btn1::after {
  bottom: 14px;
  right: 7px;
}

#cast-btn2 {
  top: 399px;
  left: 788px;
}

#cast-btn3 {
  top: 505px;
  left: 593px;
}

#cast-btn4 {
  top: 175px;
  left: 78px;
}

#cast-btn5 {
  top: 360px;
  left: 78px;
}

#cast-btn6 {
  top: 3px;
  left: 180px;
}

#cast-btn7 {
  top: 485px;
  left: 320px;
}

#cast-btn8 {
  top: 666px;
  left: 789px;
}

#cast-btn9 {
  top: 717px;
  left: 120px;
}

#cast-btn10 {
  top: 717px;
  left: 268px;
}

#cast-btn11 {
  top: 717px;
  left: 416px;
}

.close-btn {
  width: 45px;
  position: absolute;
  top: -20px;
  right: -20px;
}

.cast-detail-container {
  display: none;
  background: rgba(255,255,255,.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}

.cast-detail-wrap {
  display: flex;
  width: 100%;
  min-height: 100%;
  justify-content: center;
  align-items: center;
}

.cast-detail {
  display: none;
  background: url(../img/common/check_blue.png);
  background-size: 32px;
  position: relative;
  width: 960px;
  margin: 5% auto;
  padding: 60px;
  border: 2px solid #add4e3;
}

.cast-txt {
  padding: 5% 0;
  text-align: center;
}

.prof {
  text-align: left;
  font-size: .8em;
}

.prof-ttl {
  color: #00ade9;
  margin-bottom: -.7em;
  padding: 0 !important;
}

.comment {
  margin: 30px 0 0;
  text-align: left;
  font-size: .8em;
}

.comment-ttl {
  color: #00ade9;
  margin-bottom: -.7em;
  padding: 0 !important;
}

.cast-name {
  color: #e74291;
  font-size: 1.4em;
  line-height: 1.3;
}

.cast-img {
  width: 250px;
  margin: 0 auto;
}

.chart {
  position: relative;
}

/*-------------------------------

photo

-------------------------------*/
.ph-list li{
  opacity: 0;
  width:  25%;
}



/*-------------------------------

#original

-------------------------------*/
#original {
  background: url(../img/original/bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}

#original-ttl {
  position: relative;
  transform: rotate(-5deg);
  display: inline-block;
  margin: 0 auto;
  padding: 10px 50px 10px 0;
}

/* #original-ttl::after {
  content: "";
  background: url(../img/common/na.png) no-repeat top center;
  background-size: 44px;
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
} */

.original-ttl-container {
  padding: 80px 0 20px;
  text-align: center;
  position: relative;
}

.original-txt-wrap {
  padding: 5% 0;

}


.original-txt {
  /* width: calc(100% - 420px); */
  flex: 1;
  padding: 0 40px;
}

.original-name {
  position: relative;
  color: #00a0ea;
  font-size: 1.4em;
  line-height: 1.3;
  padding: 20px 0;
}

.original-name ::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/director/line.png) repeat-x bottom left;
  left: 0;
  bottom: 0;
}

.original-txt-wrap {
  max-width: 1280px;
  margin: 0 auto;
}

.comics {
  width: 40%;
}

.comics-list li{
  padding: 10px;
}

.comics-txt {
  font-size: 13px;
  text-align: center;
}


/*-------------------------------

#director

-------------------------------*/
#director {
  /* background: url(../img/director/bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed; */
  background: url(../img/common/check_blue.png) 0% 0% / 32px;
}

#director-ttl {
  /* position: relative;
  transform: rotate(-5deg);
  display: inline-block;
  margin: 0 auto;
  padding: 10px 50px 10px 0; */
}

.director-ttl-container {
  padding: 80px 0 0;
  text-align: center;
  position: relative;
  background: #22bbf0;
  /* overflow: hidden; */
  z-index: 3;
}

.director-ttl-container::before {
  content: "";
  position: absolute;
  bottom: calc(-100% + 2px);
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/director/wave_blue.png) no-repeat top left;
  background-size: 100%;
}

/* #director .wave {
  position: absolute;
  bottom: calc(-100% + 2px);
  left: 0;
} */

.director-ttl-img {
  position: absolute;
  bottom: -10px;
  right: 50%;
  margin-right: -400px;
  width: 160px;
  z-index: 3;
}

.director-txt-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10% 0;
}

.director-txt {
  flex: 1;
  padding: 0 40px;
}

.director-name {
  position: relative;
  color: #00a0ea;
  font-size: 1.4em;
  line-height: 1.3;
  padding: 20px 0;
}

.director-name ::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(../img/director/line.png) repeat-x bottom left;
  left: 0;
  bottom: 0;
}


.director-img {
  width: 23%;
  min-width: 240px;
  padding: 0 40px;
}



/*-------------------------------

#anime

-------------------------------*/
#anime {
  background: url(../img/anime/bg.jpg) no-repeat top center;
  background-size: cover;
  padding: 0 0 10vw;
}

.anime-ttl-container {
  text-align: center;
  position: relative;
  padding: 5vw 0 0;
}

#anime-ttl {
  line-height: .8em;
  color: #fff;
}

.animationcs {
  display: block;
}

.anime-sub-box {
  width: 460px;
  margin: 20px auto 0;
  text-align: center;
  position: relative;
}

.anime-sub-box::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background: url(../img/anime/star.png) no-repeat top left;
  background-size: 100%;
}

.anime-sub-ttl {
  position: relative;
  display: inline-block;
  color: #e74291;
  text-align: center;
  background: #fff;
  margin: 20px 0;
  padding: 10px 15px 10px 30px;
  border: 1px solid #e74291;
  border-radius: 100px;
}

.anime-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 5% 30px;
}

.anime-item {
  background: url(../img/anime/line.png) repeat-x bottom left;
  background-size: 11px;
  display: flex;
  width: calc(100% / 5 - 20px);
  margin: 0 10px 20px;
  padding: 0 0 20px;

  cursor: pointer;
}

.anime-txt {
  align-self: center;
  text-align: center;
  flex: 1;
}

.anime-name {
  width: 70%;
  margin: 0 auto 20px;
}

.anime-cast {
  font-size: 1.2em;
}

.anime-detail-btn {
  width: 100px;
  position: relative;
  margin: 10px auto 0;
  padding: 0 20px 0 0;
}

.anime-detail-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  transition: all .4s ease;
}

.anime-img {
  flex: 1;
  align-self: flex-end;
}

.anime-staff-item {
  width: calc(100% / 3 - 20px);
  margin: 40px 10px 10px;
}

.anime-staff-item .anime-txt{
  text-align: left;
}

.anime-staff {
  font-size: .9em;
  margin: 0 0 5px;
}

/* .anime-staff-item .anime-detail-btn {
  width: 23%;
  max-width: 100px;
  padding: 0 10px 0 0;
} */


.anime-detail-container {
  display: none;
  background: rgba(255,255,255,.8);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

.anime-detail-wrap {
  display: flex;
  width: 100%;
  min-height: 100%;
  justify-content: center;
  align-items: center;
}

.anime-detail {
  display: none;
  background: url(../img/anime/bg.jpg) no-repeat top center;
  background-size: cover;
  position: relative;
  width: 960px;
  margin: 5% auto;
  padding: 60px;
  border: 2px solid #add4e3;
}

.anime-detail-inner {
  display: flex;
  flex-wrap: wrap;
}

.anime-detail .anime-img {
  flex: auto;
  align-self: center;
  width: 30%;
  margin: 0 auto;
  padding: 0 30px 0 0;
}

.anime-detail .anime-txt {
  flex: auto;
  width: 70%;
}

.anime-detail .anime-name {
  font-size: 1.4em;
  line-height: 1.3;
  margin: 20px auto 10px;
}

.anime-item:hover .anime-detail-icon{
transform: scale(1.2);
}

/*-------------------------------

#footer

-------------------------------*/
#footer {
  padding: 60px 5% 60px;
}

#footer-billing {
  width: 780px;
  margin: 0 auto;
}


/*-------------------------------

#soundtrack

-------------------------------*/
#soundtrack {
  position: absolute;
  bottom: 20px;
  right: 20px;
}


/*-------------------------------

loading-koteko

-------------------------------*/
#preloader.koteko {
  background: #bcedff;
}

#preloader-inner-koteko{
	width:100%;
	height:100%;
	display: flex;
  justify-content: center;
  align-items: center;
}

#preloader-koteko {
  width: 400px;
  position: relative;
}

.preloader-star-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.preloader-star0{
  background: url(../../assets/common/img/loading/star0.png) no-repeat bottom right;
  background-size: 25px;
  text-indent: -9999em;
  overflow: hidden;
	width:220px;
	height:220px;
	position:absolute;
	z-index:1;
	top: calc( 50% - 110px );
	left: calc( 50% - 110px );
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: round 1.2s infinite linear;
  animation: round 1.2s infinite linear;
}

.preloader-star1{
  background: url(../../assets/common/img/loading/star1.png) no-repeat top center;
  background-size: 20px;
  text-indent: -9999em;
  overflow: hidden;
	width:220px;
	height:220px;
	position:absolute;
	z-index:1;
	top: calc( 50% - 110px );
	left: calc( 50% - 110px );
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: round 1.2s infinite linear;
  animation: round 1.2s infinite linear;
}

.preloader-star2{
  background: url(../../assets/common/img/loading/star2.png) no-repeat bottom left;
  background-size: 10px;
  text-indent: -9999em;
  overflow: hidden;
	width:220px;
	height:220px;
	position:absolute;
	z-index:1;
	top: calc( 50% - 110px );
	left: calc( 50% - 110px );
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: round 1.2s infinite linear;
  animation: round 1.2s infinite linear;
}

.preloader-star3{
  background: url(../../assets/common/img/loading/kirakira.png) no-repeat bottom right;
  background-size: 60px;
  text-indent: -9999em;
  overflow: hidden;
	width:230px;
	height:230px;
	position:absolute;
	z-index:1;
	top: calc( 50% - 115px );
	left: calc( 50% - 115px );
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: round 1.7s infinite linear;
  animation: round 1.7s infinite linear;
}

.preloader-star4{
  background: url(../../assets/common/img/loading/kirakira1.png) no-repeat top left;
  background-size: 60px;
  text-indent: -9999em;
  overflow: hidden;
	width:230px;
	height:230px;
	position:absolute;
	z-index:1;
	top: calc( 50% - 115px );
	left: calc( 50% - 115px );
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: round 1.7s infinite linear;
  animation: round 1.7s infinite linear;
}

@-webkit-keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes round {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}