@charset "UTF-8";
/* CSS Document */
@media screen and (max-width:768px){
.sp{display:block;}
.pc{display:none;}


nav{font-family: 'Playfair Display', serif; background:rgba(255,255,255,0.85); padding:calc(20/768*100vw) ;  position: fixed; width: 100%; top: 0; z-index: 1000; letter-spacing:calc(3/768*100vw); opacity: 0;}
nav ul{ display: block; margin-left:calc(40/768*100vw); }
nav ul li{ color: #644a99; margin-right: calc(67/768*100vw);}
nav ul li.active a{color: #cb295b;}
nav ul li.close{color: #969696;}
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;
    }
nav ul li a:hover {
    color: #cb295b;
    }

nav.globalMenuSp {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
	height: 100vh;
    background: rgba(255,255,255,0.9);
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
	padding: 0;
}
 
nav.globalMenuSp ul {
    margin: 0 auto;
    padding: 0;
    width: 100%;
	padding-top: calc(40/768*100vw);
}
 
nav.globalMenuSp ul li {
    font-size: calc(40/768*100vw);
    list-style-type: none;
    padding: 0;
    width: 100vw;
    margin: calc(60/768*100vw) 0;
}
	nav ul li a{color: #644a99;}
 
 
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: calc(68/768*100vw);
    left: calc(40/768*100vw);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: calc(68/768*100vw);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 0;
    top: 0;
    width: calc(139/768*100vw);
    height: calc(139/768*100vw);
    cursor: pointer;
    z-index: 102;
    text-align: center;
	background:url("../images/menu.png") no-repeat;
	background-size: calc(139/768*100vw);
}
 
.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: calc(56/768*100vw);
    border-bottom: solid 2px #e43261;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: calc(41/768*100vw);
}
 
.navToggle span:nth-child(1) {
    top: calc(51/768*100vw);
}
 
.navToggle span:nth-child(2) {
    top: calc(68/768*100vw);
}
 
.navToggle span:nth-child(3) {
    top: calc(85/768*100vw);
}
 
.navToggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}

body{min-width:100vw;}
section{min-width:100vw; overflow-x: hidden;}
	
nav .official{position: relative; top:inherit; right:inherit; margin-top: calc(1150/798*100vw); font-size: calc(40/798*100vw); width: 100vw; height: auto;}
nav .official img{ width: calc(30/768*100vw); margin-left:0; margin-top: 0;}
nav .official a{background:#8c73c4; color: #fff;  width: calc(500/768*100vw); position: relative; z-index: 100; text-decoration: none; display: flex;  align-items: center;  justify-content: center; padding: 3vw;}

#second section .banner2{margin: calc(30/768*100vw) auto; width:calc(600/768*100vw);}
section#kv{height:calc(1169/768*100vw); position: relative; background:url("../images/kv-sp.jpg") no-repeat; background-size: cover; overflow: hidden; min-height: auto;}
section#kv h1{width: calc(550/768*100vw); min-width: auto; margin-top:calc(220/768*100vw);}
section#kv .update dl{width:calc(700/768*100vw);}	
section#kv .update dl dt{margin-right:calc(20/768*100vw); font-size:calc(26/768*100vw);}
section#kv .update dl dd{text-align: left; font-size:calc(26/768*100vw);}	

section#intro ul li { margin: -10% -3%; width: 95%;}
section h2{margin-top:calc(120/768*100vw); }	
section#intro .txt{margin-top:calc(80/768*100vw); }	
section#intro ul {margin: calc(130/768*100vw) auto calc(90/768*100vw);}
	
section#kv-about {
    height: calc(500/768*100vw);
    min-height: auto;
    position: relative;
    background: url(../images/about/kv-sp.png) no-repeat;
	margin-top: 0; background-size: cover;}

section#kv-about h1 {width: calc(600/768*100vw);padding-top: calc(190/768*100vw);min-width:auto;}	
section#kv-world h1 {width: calc(700/768*100vw);padding-top: calc(210/768*100vw);min-width:auto;}	
#second section h2 { margin: calc(100/768*100vw) auto calc(50/768*100vw); padding-top: 0;}
#second section h2 img{width: calc(650/768*100vw);	}
#second section h2::before { top: calc(88/768*100vw);}	
#second section .inner {display:inherit; margin:calc(50/768*100vw);}	
#second section .inner p.txt {margin:calc(60/768*100vw) 0 0 0;}
	
	

#second section#world .swiper-pagination-bullet {
    background-size: calc(82/768*100vw)!important;
    width: calc(82/768*100vw);
    height: calc(82/768*100vw); margin: 0 calc(5/768*100vw);}	

	.swiper-container{overflow: hidden;	}
#second section#world .swiper-button-next,#second section#world .swiper-button-prev {
    top: 40%;
    width:  calc(63/768*100vw);
    height:  calc(85/768*100vw);
    margin-top:  calc(-20/768*100vw);
    z-index: 10;
    cursor: pointer;
    -moz-background-size: calc(63/768*100vw) calc(85/768*100vw);
    -webkit-background-size: calc(63/768*100vw) calc(85/768*100vw);
    background-size:calc(63/768*100vw) calc(85/768*100vw);
    background-position: center;
    background-repeat: no-repeat;
}	
	#second section#world .swiper-button-next {right: 0;}
	#second section#world .swiper-button-prev {left: 0;}
	
#second section#world .chara01 {
    position: absolute;
    left: 0;
    top: calc(190/768*100vw);
	margin-left: 0;
	width: calc(240/768*100vw);}	
		
#second section#world .chara02 {
	min-width: auto;
    position: absolute;
    left: calc(540/768*100vw);
    top: calc(500/768*100vw);
    margin-left: 0;
    width: calc(320/768*100vw);}	
	
section#kv-world {
    height: calc(500/768*100vw);
    min-height: auto;
    position: relative;
    background: url(../images/world/kv-sp.png) no-repeat;
	margin-top: 0; background-size: cover;}
	
#second section#character ul {
    width: 100%;
    min-width: 100vw;
    margin: 0 auto;
	max-width: 100vw;}	
	
#second section#character ul li {
    display: inline-block;
    width: 45%;
    margin: 0 1%;
}	
	
#second p.txt01 {
    margin: calc(100/768*100vw) auto 0;
    width: calc(768/768*100vw);
}	

#second section p { font-size: calc(28/768*100vw);  line-height: calc(50/768*100vw);}
	
#second section#game ul.banner {
    width: 100%;
    min-width: 100vw;
    margin: 10vw auto 0;
    max-width: 100vw;
}
#second section#game ul.banner li {
    display: inline-block;
    width: 86vw;}
	
#second section#game ul.banner li + li{ margin-top:13vw;}		

#second section#game ul.banner li .fukidashi {position: absolute; right: -12%;top: -35%;}
#second section ul.banner {width: 86vw; margin: 5vw auto 0;}	
#second section h3 { font-size: calc(35/768*100vw); margin: 15vw auto 10vw; padding: 3vw;}
#second section .cd-box { width: 86vw;  margin: 0 auto 10vw; display: inherit;}	
#second section#cd .cd{padding-top:3vw;}
#second section .img {width: 100%;}	
#second section .data { width: 86vw;}
#second section dl.data-list { font-size: calc(30/768*100vw);
    line-height: calc(50/768*100vw);
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;}
#second section dl.data-list span.small{font-size: calc(24/768*100vw);}	
#second section dl.data-list dd { width: 63vw;
    padding: 0 0;
    margin-top: 5vw;
    background-size: 24vw 9vw;}
#second section dl.data-list dt { width:27vw;
    padding: 0 0;
    margin-top: 5vw;
    background-size: 23vw 9vw;
    margin-left: -4vw;}	
	

#second section#Blu-ray h5{font-size:4vw; margin-bottom: 2vw; line-height: 6vw; }
#second section#Blu-ray .tokuten p{ margin-bottom: 4vw;font-size: 3.2vw; line-height: 5.3vw; }
#second section#Blu-ray p.note{font-size:2.5vw; line-height: 4.3vw;  margin-top: -2vw;}
	
	#second section p.btn{margin: 5vw!important;}	
	
#second section#radio .movie{margin-top:calc(40/768*100vw);}	
	
#second iframe	{width:86vw; height:48vw; margin: 0;}

#second section#event dl.data-list dd {width:63vw;}
#second section#event dl.data-list {font-size: calc(30/768*100vw);
    line-height: calc(50/768*100vw);
        width: 100%;
    margin: 0;}	
#second section#event dl.data-list dt {
	width: 27vw;}	
	
#second section p.small { font-size:calc(24/768*100vw);  line-height: calc(36/768*100vw);}	
	
#second section#event {
    background: none;
    padding-bottom: calc(60/768*100vw);}	
	
#second section ul.list {
    width: 100%;
    max-width: calc(680/768*100vw);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
	flex-wrap: wrap;}	
	
#second section ul.list li {
    width: 100%;
    margin: 3%;
    padding: 5%;
    border: 3px #9ff0eb solid;
    position: relative;
    background: #fff;}	
	
#second section ul.list li p {
    font-size: calc(28/768*100vw);
    line-height: calc(40/768*100vw);
    margin-top: calc(24/768*100vw);
}
	
	#second section ul.list li.new::before {
    content: "";
    width: calc(120/768*100vw);
    height: calc(120/768*100vw);
    top: calc(-40/768*100vw);
    left: calc(-40/768*100vw);    background-size: calc(120/768*100vw) calc(120/768*100vw);
}
	
	
#second section .tokuten{width: calc(690/768*100vw);}
#second section .movie{width: calc(690/768*100vw);}
#second section .tokuten h4{ margin: calc(60/768*100vw) auto calc(20/768*100vw);  padding : calc(10/768*100vw);border-radius:calc(40/768*100vw);font-size: calc(36/768*100vw);}
#second section .movie h4{ margin: calc(60/768*100vw) auto calc(20/768*100vw);  padding : calc(10/768*100vw);border-radius:calc(40/768*100vw);font-size: calc(36/768*100vw);}
#second section .tokuten p{ font-size: calc(24/768*100vw); line-height:calc(36/768*100vw) ; text-align: left;}
#second section .tokuten img{width: 100%;}
#second section#cd p.notice {margin-top:calc(-10/768*100vw); font-size: calc(22/768*100vw); line-height: calc(30/768*100vw);}

#second section .accbox {
	width:calc(690/768*100vw);
}

/*ラベル*/
#second section .accbox label {
    margin: calc(20/768*100vw) auto calc(20/768*100vw);
    padding : calc(10/768*100vw);
	border-radius:calc(40/768*100vw);
	font-size: calc(36/768*100vw);
}


/*クリックで中身表示*/
#second section .cssacc:checked + .accshow {
    padding: 0;
	width:calc(650/768*100vw);
}
#second section .accbox label span::before {top: calc(13/768*100vw); width: calc(37/768*100vw); height: calc(24/768*100vw); left: calc(-60/768*100vw);background-size: calc(30/768*100vw) calc(20/768*100vw);}
#second section .accbox label span::after {top: calc(13/768*100vw); width: calc(37/768*100vw); height: calc(24/768*100vw); right: calc(-60/768*100vw);background-size: calc(30/768*100vw) calc(20/768*100vw);}

#second section .accbox h4 {color :#e43261; font-size: calc(40/768*100vw); padding: calc(17/768*100vw); position: relative; margin-top:calc(60/768*100vw);}
#second section .accbox h4::before {border-top:4px solid #e43261; content: ""; position: absolute; top: -9px; width: calc(690/768*100vw); left: 0;}
#second section .accbox h4::after {border-top:4px solid #e43261; content: ""; position: absolute; bottom: -9px; width: calc(690/768*100vw); left: 0;}
#second section .accbox .name {padding-top: calc(60/768*100vw);}
#second section .accbox dl {font-size: calc(22/768*100vw); }
#second section .accbox dl dt {color :#e43261; font-size: calc(22/768*100vw); margin-top:calc(30/768*100vw); margin-bottom: calc(10/768*100vw); line-height: calc(34/768*100vw);}
#second section .accbox dl dd {color :#434867; line-height: calc(34/768*100vw); font-size:calc(22/768*100vw);}
#second section .accbox ul.shop-list {display: flex;justify-content: space-between; flex-wrap: wrap;}
#second section .accbox ul.shop-list li{width: calc(650/768*100vw); }
#second section .accbox ul.shop-list li h4::before{width: calc(690/768*100vw); }
#second section .accbox ul.shop-list li h4::after{width: calc(690/768*100vw); }
#second section .accbox ul.shop-list li p{padding: calc(40/768*100vw) 0; font-size: calc(34/768*100vw);}
#second section .accbox ul.shop-list li p.note{font-size: calc(22/768*100vw)!important; line-height: calc(30/768*100vw)!important; text-align: left;}
#second section .accbox ul.shop-list li p.btn{margin: 0;padding-top: 0;}
#second section .accbox .ph{margin-top: calc(30/768*100vw);}
	

#second section .accbox ul.cast-link{ margin-top: calc(30/768*100vw);}
#second section .accbox ul.cast-link li{ margin: calc(10/768*100vw); font-size: calc(30/768*100vw); width:calc(300/768*100vw); padding: calc(20/768*100vw) 0;}
#second section .accbox ul.cast-link li a{ padding: calc(20/768*100vw) 0;}	
#second section .accbox ul.cast-link li span{ font-size: calc(22/768*100vw);}
	
#second section#cd p.txt{margin: calc(40/768*100vw); width: 90vw;}
#second section#cd #vocal p{font-size: calc(29/768*100vw); line-height: calc(50/768*100vw); margin: 0 auto 5vw;}
#second section #vocal .data{ width: 92vw;}
#second section #vocal .cd-box{width: 92vw;}
#second section #vocal dl.data-list { font-size: calc(28/768*100vw); line-height: calc(47/768*100vw);}
#second section #vocal dl.data-list dt{width: 31vw;}
#second section #vocal dl.data-list dd{width: 58vw; letter-spacing: 0;}	
#second section #vocal h3{margin: 5vw auto 10vw;}
#second section p.btn + .btn{margin-top: 0;}
	
section .pk-img-box {margin-top: 3vw;}
section .pk-img-box a{text-decoration: underline; font-size:3.4vw; color :#434867;}	
	
#footerboxin .base-footer-box{padding: 3vw 0;}
#footerboxin .flex2 {display:inherit;}
#footerboxin .base-footer-box div{width: 100%; max-width: 100%; padding: 1vw 0;}
#footerboxin .footer-left-box dl{width:47vw; margin: 0 auto; padding: 1vw 1vw 1vw 4vw; font-size: calc(20/768*100vw);}	
#footerboxin .snslink dt {width: calc(60/768*100vw);	}
	
#footerboxin .footer-right-box	{text-align: center; font-size: calc(18/768*100vw);}
#footerboxin .base-platform-icon{ align-items: center;  justify-content: center;}
	
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-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);
    }
  }