@charset "UTF-8";
/* CSS Document */
::selection {
    background: #644a99;
    color: #fff;
}

::-moz-selection {
    background: #644a99;
    color: #fff;
}

.fadein{opacity:0;}
.sp{display:none;}

nav{ background: -moz-linear-gradient(left, rgba(123,135,213,0.9), rgba(108,219,207,0.9));
  background: -webkit-linear-gradient(left, rgba(123,135,213,0.9), rgba(108,219,207,0.9));
  background: linear-gradient(to right, rgba(123,135,213,0.9), rgba(108,219,207,0.9));  position: sticky; width: 100%; top: 0; z-index: 1000; letter-spacing:1; opacity: 0; min-width: 1200px;}
nav ul{ display: flex; margin-left:40px;  height: 45px; align-items: center;}
nav ul li{font-size:19px; color: #fff; margin-right: 30px; position: relative;}
nav ul li.active a{color: #cb295b;}
nav ul li a{text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	color: #fff;font-family: 'Quicksand', sans-serif;
    }
nav ul li a:hover {
    color: #fcff5c;
    }

nav ul li.new:before{content:'';display:block;border-radius:100px;width:10px;height:10px;background:rgba(203, 41, 91, 0.81);position:absolute;top:-8px;left:-20px;z-index:11;}
nav ul li.new:after{content:'';display:block;border-radius:100px;width:10px;height:10px;background:rgba(203, 41, 91, 0.61);position:absolute;top:-8px;left:-20px;animation: anime01 1.5s ease;animation-iteration-count: infinite;z-index:10;}

@keyframes anime01 {
	0% {transform:scale(1);}
	100% {transform:scale(2);opacity:0.3;}
}

nav .official{position: absolute; top:0; right:0; height: 45px; font-size: 18px;}
nav .official img{ width: 23px; margin-left:20px; margin-right:20px; }
nav .official a{background:#cb295b; color: #fff;  width:204px; position: relative; z-index: 100; text-decoration: none; display: block; margin: 0 auto;    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s; height: 100%; font-family: 'Quicksand', sans-serif;align-items: center; display: flex;}
nav .official a:hover{background:#8c73c4;}



@keyframes pulsate {
    0%   { transform: scale(1, 1); }
    50%  { opacity: 1; }
    100% { transform: scale(4, 4); opacity: 0.0; }
}


section{position:relative; text-align: center; letter-spacing:1px; min-width: 1200px;}
section p,section dl dt,section dl dd,section ul li{font-family: 'Noto Sans JP', sans-serif; }
section h2{margin-top: 80px; font-family: 'Playfair Display', serif;  color: #644a99; letter-spacing:calc(3/1920*100vw); opacity: 0; font-weight: normal;}

body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height:100vh;
  background:url("../images/bg.jpg") center no-repeat;
  background-size:cover;
  min-width: 1200px;
}

section#kv{height:calc(1065/1920*100vw); min-height:660px; position: relative; background:url("../images/kv.jpg") no-repeat; background-size: cover; }
section#kv h1{width: calc(554/1600*100vw); min-width: 415px; margin: 0 auto 0; opacity: 0; padding-top: 10%;}
section#kv h1 img{width: 100%;}
section#kv .update {background: rgba(163,250,239,0.9); padding:10px 0; position: absolute; bottom:0; width: 100%; color: #434867;;}
section#kv .update span{color:#e43261; font-family: 'Quicksand', sans-serif;}
section#kv .update dl{font-size:16px; display: flex; margin: 0 auto; justify-content: center; align-items: center;}
section#kv .update dl dt{ font-family: 'Quicksand', sans-serif;  margin-right:20px;}
section#kv .update dl dd{ font-family: 'Noto Sans JP', sans-serif; color: #434867;}
section#kv .update dl dd a{color: #434867!important; text-decoration: underline;}

section#intro .txt{margin-top:60px;}
section#intro ul {width: 100%; max-width:1600px; margin:40px auto 0;}
section#intro ul li{display: inline-block; margin: 0 -3%; width: 50%;}
section#intro ul li img{width: 100%;}
section#intro ul li a{z-index: 100; position: relative; transition: filter 0.3s ease;}
section#intro ul li a:hover {  filter: brightness(1.2); }

#second section .banner2{margin-top: 20px;}

/* about
--------------------------------------------------------------------------- */
section#kv-about{height:calc(601/1920*100vw); min-height:375px; position: relative; background:url("../images/about/kv.png") no-repeat; background-size: cover; margin-top: -40px;}
section#kv-about h1{width: calc(628/1600*100vw); min-width: 471px; margin: 0 auto 0; opacity: 0; padding-top: 12.5%;}
section#kv-about h1 img{width: 100%;}
section#kv-world{height:calc(601/1920*100vw); min-height:375px; position: relative; background:url("../images/world/kv.png") no-repeat; background-size: cover; margin-top: -40px;}
section#kv-world h1{width: calc(905/1600*100vw); min-width: 678px; margin: 0 auto 0; opacity: 0; padding-top: 12.5%;}
section#kv-world h1 img{width: 100%;}

#second section h2 {margin:70px auto 50px;padding-top: 50px;}
#second section h2::before{content:""; width:100%; height:5px; background:url("../images/line.gif") center repeat-x;display: block; top:140px; position: absolute;z-index: -1;}

#second section#character ul {width: 100%; min-width: 1200px; margin: 0 auto;  max-width: 1600px;}
#second section#character ul li{display: inline-block; width: 30%; margin: 0 1%;}
#second section#character ul li img{width: 100%;}
#second section#character ul + ul{margin-top:3vw;}

#second section#world{position: relative; overflow-x: hidden;}
#second section#world .chara01{position: absolute; left:50%;  top: 290px; margin-left: -370px;}
#second section#world .chara02{position: absolute; left:63%;  top: 50%;  z-index: 10; width: 24vw; min-width: 288px; max-width:336px;}
#second section#world .chara02 img{width:100%;}
.swiper-container{padding-bottom: 70px; overflow: visible!important; max-width: 1600px;}
#second section#world .swiper-slide img{width:100%; opacity: 0.5;}
#second section#world .swiper-slide-active img{opacity: 1;}
#second section#world .swiper-button-next,#second section#world .swiper-button-prev {
    position: absolute;
    top: 41%;
    width: 63px;
    height: 85px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    -moz-background-size: 63px 85px;
    -webkit-background-size: 63px 85px;
    background-size:63px 85px;
    background-position: center;
    background-repeat: no-repeat;
}
#second section#world .swiper-button-next{background: url("../images/about/next.png") no-repeat; right: 22%; left: auto;}
#second section#world .swiper-button-prev{background: url("../images/about/prev.png") no-repeat; left: 22%; right: auto;}
#second section#world .swiper-pagination-bullet{background: url("../images/about/btn-Q1.png") no-repeat; background-size:82px; width: 82px; height: 82px; opacity: 1;}
#second section#world .swiper-pagination-bullet:nth-child(2){background: url("../images/about/btn-Q2.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(3){background: url("../images/about/btn-Q3.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(4){background: url("../images/about/btn-Q4.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(5){background: url("../images/about/btn-Q5.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(6){background: url("../images/about/btn-Q6.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active{background: url("../images/about/btn-Q1_on.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active{background: url("../images/about/btn-Q2_on.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(3).swiper-pagination-bullet-active{background: url("../images/about/btn-Q3_on.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(4).swiper-pagination-bullet-active{background: url("../images/about/btn-Q4_on.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(5).swiper-pagination-bullet-active{background: url("../images/about/btn-Q5_on.png") no-repeat;}
#second section#world .swiper-pagination-bullet:nth-child(6).swiper-pagination-bullet-active{background: url("../images/about/btn-Q6_on.png") no-repeat;}

#second section#about{position: inherit;}

#second section .inner{display: flex; align-items: center; justify-content: center;}
#second section .inner p.txt{margin-left: 30px;}
#second p.txt01{margin:80px auto 0; width: 817px;}
#second section p{color: #434867; font-size: 23px; line-height: 50px;}
#second section p.small{font-size: 20px; line-height: 40px;}
#second section p strong{color: #e43261; }

#second section#cd .cd{padding-top:40px;}
#second section .cd-box {width: 1040px; margin: 0 auto 40px; display: flex; align-items: normal;  justify-content: center;}
#second section h3{color: #fff; font-size: 38px; margin:90px auto 50px; background: #576db2; padding: 25px;}
#second section h3 span{ font-weight: 700;}
#second section dl.data-list{color: #434867; font-size: 17px; line-height: 30px;margin-left: 30px;}
#second section dl.data-list span.small{font-size: 14px;}
#second section dl.data-list dt{color: #fff; width: 130px; display: inline-block; background:url("../images/world/txt-bg.png") no-repeat center;padding:10px; }
#second section dl.data-list dd{ width: 430px; display: inline-block; text-align: left; vertical-align: top; padding:10px; }
#second section .img{width: 380px;}
#second section .data{width: 630px;}
#second section p.btn {margin-top: 20px; margin-bottom: 20px!important;}
#second section p.btn a{transition: filter 0.3s ease;}
#second section p.btn a:hover {  filter: brightness(1.2); }
#second section p.btn + .btn{margin-top: 0;}

#second section#event{ background:url("../images/world/bg-chara.png") no-repeat center; background-position-y: 190px; padding-bottom: 120px;}
#second section#event dl.data-list{width: 780px; margin: 30px auto; font-size: 22px; line-height: 38px;}
#second section#event dl.data-list dt{width: 200px; }
#second section#event dl.data-list dd{width: 400px;}


#second section#radio .movie{margin-top: 40px;}

#second section ul.banner {text-align: center; margin: 40px auto 0;}
#second section ul.banner li{display: inline-block; margin:0 10px; position: relative;}
#second section ul.banner li a{transition: filter 0.3s ease;}
#second section ul.banner li a:hover {  filter: brightness(1.2); }
#second section#game ul.banner {width: 100%; min-width: 1200px; margin: 50px auto 0;  max-width: 1600px;}
#second section#game ul.banner li{display: inline-block; width: 40%; margin: 0 1%;}
#second section#game ul.banner li img{width: 100%;}
#second section#game ul.banner li .fukidashi{position: absolute; right: -17%; top: -35%; z-index: 100; width: 47%;}
#second section#game ul.banner li .fukidashi img{}

#second section ul.list{width:90%; max-width:1600px; display: flex;align-items: center;  justify-content: center; margin: 0 auto;flex-wrap: wrap;}
#second section ul.list li{box-shadow: 0 10px 25px 0 rgba(167, 177, 252, 0.4); width: 28%;　width:28%; margin: 1%; padding: 1%; border: 3px #9ff0eb solid; position: relative; background: #fff;}
#second section ul.list li img{width:100%;}
#second section ul.list li .day{color: #e43261; font-family: 'Quicksand', sans-serif; text-align: right; font-size:20px;}
#second section ul.list li p{font-size:15px; line-height: 24px; text-align: left; margin-top: 20px;}
#second section ul.list li.new::before{content:""; width:65px; height:66px; background:url("../images/world/new.png") center no-repeat;display: block; top: -20px; left: -20px; position: absolute;z-index: 10;}

#second .banner {text-align: center; margin: 60px auto;}
#second .banner a{z-index: 100; position: relative; transition: filter 0.3s ease;}
#second .banner a:hover {  filter: brightness(1.2); }

#second section .tokuten{margin: 0 auto; padding: 0; width: 1000px;}
#second section .tokuten h4{background:#e43261; border-radius:30px;font-size: 36px;  margin: 60px auto 30px; padding : 10px; color :#fff;}
#second section .movie {width: 1000px;margin: 0 auto; }
#second section .movie h4{background:#e43261; border-radius:30px;font-size: 36px;  margin: 60px auto 30px; padding : 10px; color :#fff;}
#second section .tokuten p{font-size: 20px;}


#second section .accbox {
    margin: 0 auto;
    padding: 0;
	width:1000px;
}

/*ラベル*/
#second section .accbox label {
    display: block;
    margin: 60px auto 0;
    padding : 10px;
    color :#fff;
    background :#576db2;
    cursor :pointer;
    transition: all 0.5s;
	border-radius:30px;
	font-size: 36px;
}

/*ラベルホバー時*/
#second section .accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
#second section .accbox input {
    display: none;
}

/*中身を非表示にしておく*/
#second section .accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}


/*クリックで中身表示*/
#second section .cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    opacity: 1;
	width:900px;
    margin: 0 auto;
}
#second section .accbox label span::before {content: ""; position: absolute; top: 16px; width: 37px; height: 24px; left: -60px;background:url("../images/world/arrow.png") center no-repeat;}
#second section .accbox label span::after {content: ""; position: absolute; top: 16px; width: 37px; height: 24px; right: -60px;background:url("../images/world/arrow.png") center no-repeat;}
#second section .accbox label span {	position: relative;}
#second section .accbox img{width:100%;}

#second section .accbox h4 {color :#e43261; font-size: 33px; font-weight: bold; border-top:1px solid #e43261; border-bottom:1px solid #e43261; padding: 17px; position: relative;margin-top: 70px;}
#second section .accbox h4::before {border-top:4px solid #e43261; content: ""; position: absolute; top: -9px; width: 900px; left: 0;}
#second section .accbox h4::after {border-top:4px solid #e43261; content: ""; position: absolute; bottom: -9px; width: 900px; left: 0;}
#second section .accbox .name { padding-top:60px;}
#second section .accbox dl {font-size: 16px; font-weight: bold; text-align: left;}
#second section .accbox dl dt {color :#e43261; font-size: 16px; font-weight: bold; margin-top: 30px; margin-bottom: 10px;}
#second section .accbox dl dd {color :#434867; line-height: 25px;font-size: 14px;}
#second section .accbox ul.shop-list {display: flex;justify-content: space-between; flex-wrap: wrap;}
#second section .accbox ul.shop-list li{width: 400px; }
#second section .accbox ul.shop-list li h4::before{width: 400px; }
#second section .accbox ul.shop-list li h4::after{width: 400px; }
#second section .accbox ul.shop-list li p{padding: 20px 0; font-size: 18px!important; line-height: 30px!important; margin-bottom: 10px!important;margin-top: 0!important;}
#second section .accbox ul.shop-list li p.note{font-size: 16px; line-height: 26px; text-align: left;}
#second section .accbox ul.shop-list li p.btn{margin: 0;}
#second section .accbox .ph{margin: 30px auto 40px; width: 70%;}

#second section .accbox ul.cast-link{display: flex; justify-content: center; flex-wrap: wrap; margin-top: 30px;}
#second section .accbox ul.cast-link li{ background:#434867; margin: 10px; font-size: 20px; width: 175px; padding: 10px 0;}
#second section .accbox ul.cast-link li span{ font-size: 16px; }
#second section .accbox ul.cast-link li a{color :#fff; padding: 10px 0 ; transition: all 0.5s;}
#second section .accbox ul.cast-link li a:hover { color:#b3c0e6;}


#second section#cd .movie {display: flex; justify-content: center; flex-wrap: wrap;}
#second section .movie iframe{margin:10px;}

#second section#cd p.notice {margin-top:10px; font-size: 14px; line-height: 20px;}
#second section#cd p.notice a{color:#e43261; text-decoration: underline;}

#second section#cd p.txt{margin-bottom: 50px;}
#second section#cd #vocal p{font-size: 18px; line-height: 36px; margin-bottom: 30px;}
#second section #vocal .data{ width: 710px;}
#second section #vocal .cd-box{width: 1100px;}
#second section #vocal dl.data-list {font-size: 16px;  line-height: 32px;}
#second section #vocal dl.data-list dt{width: 150px;}
#second section #vocal dl.data-list dd{width: 490px;}
#second section #vocal h3{margin: 40px auto 50px;}	
#second section#Blu-ray h5{color: #e43261; font-size: 23px; margin-bottom: 20px; text-align: left; font-weight: bold;}
#second section#Blu-ray p{ margin-bottom: 30px;}
#second section#Blu-ray .tokuten p{ margin-bottom: 45px;font-size: 17px; line-height: 28px; text-align: left;}
#second section#Blu-ray p.note{font-size: 15px; line-height: 26px;  margin-top: -20px;}


section .pk-img-box {margin-top: 30px;}
section .pk-img-box a{text-decoration: underline; font-size:24px; color :#434867;}

/* footer
--------------------------------------------------------------------------- */
#footerboxin {color: #434343; background-color:#d4d9fa;}
#footerboxin .snslink{	text-align: left; }
#footerboxin .base-footer-box{justify-content: space-between;}
#footerboxin .base-footer-box div{width: 33%;}


#sns { text-align: center; margin: -30px auto 70px; width: 100%;  }
#sns img { margin: 0 10px; }
#sns ul li{display: inline-block;}
#foot {position: relative; padding-bottom: 20px; text-align: center; font-size: 13px;}
#foot address { display: none; }
#foot address span { display: block; text-indent: -9999px; overflow: hidden;}
#foot .banners { text-align: center; margin: 30px auto; max-width: 800px; }
#foot .banners img { padding: 5px; margin: 0;}
#foot .banners span{ color:#333;}
#foot #copy { font-size: 12px; color:#666; }
#foot .bannerstxt {padding-bottom: 20px;}
#foot .bannerstxt li{display:inline-block; padding: 5px;}




img {
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.img-blur {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;
  opacity: 1;
  transition: .8s;
}

@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}

.anime1 {
    animation-name: fade-1;
    animation-duration: 1.0s; /*アニメーション時間*/
    animation-timing-function: ease-out; /*アニメーションさせるイージング*/
    animation-delay: 0.5s; /*アニメーション開始させる時間*/
    animation-iteration-count: 1; /*繰り返し回数*/
    animation-direction: normal; /*往復処理をするかどうか*/
    animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
  }
  @keyframes fade-1 {
    0% {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }



.anime2 {
    animation-name: fade-2;
    animation-duration: 1.0s; /*アニメーション時間*/
    animation-timing-function: ease-out; /*アニメーションさせるイージング*/
    animation-delay: 0.5s; /*アニメーション開始させる時間*/
    animation-iteration-count: 1; /*繰り返し回数*/
    animation-direction: normal; /*往復処理をするかどうか*/
    animation-fill-mode: forwards; /*アニメーション後のスタイルをどうするか*/
  }
  @keyframes fade-2 {
    0% {
      opacity: 0;
      transform: translate3d(0, 20px, 0) rotate(90deg);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(90deg);
    }
  }


body {
    -webkit-animation: fadeIn 1.5s ease 0s 1 normal;
    animation: fadeIn 1.5s ease 0s 1 normal;
  min-width: 1200px;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0
    }

    100% {
      opacity: 1
    }
  }