@charset "UTF-8";



#container {

overflow: hidden; }



blockquote {font-size: 100%; }

embed,

iframe,

object {

max-width: 100%; }

.section {

padding-top: 50px;

padding-bottom: 50px; }

.section .section {

padding-top: 0;

padding-bottom: 0; }

body {

-webkit-font-smoothing: antialiased; }

img {

height: auto;

max-width: 100%; }

a {

transition: color 0.4s, background-color 0.4s, border-color 0.4s, text-decoratin 0.4s; }





ul.iconButton{

top: 18rem;

left: 0;

width: 60px;

font-size: 3.2rem;

font-weight: 700;

position: fixed;

transition: all 0.3s;

z-index: 500;

text-align: center;

margin-bottom: 0;

}

ul.iconButton li{

display: inline-block;

}

ul.iconButton li a{

width: 60px;

height: 60px;

background: #E74F91;

display: block;

color: #fff;

opacity: 0.7;

padding-top: 0.8rem;

margin-bottom: 1rem;

}

ul.iconButton li:nth-child(2) a{

background: #00C7EB;

top: 25rem;

}

ul.iconButton li a:hover {

opacity: 1;

transition: all 0.3s;

}



#loading {

position: fixed;

top: 0;

left: 0;

bottom: 0;

z-index: 99999;

width: 100%;

height: 100%;

background: #E74F91;

}

#loading_box {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 100%;

text-align: center;

}

.loading-one {

display: inline-block;

border-top: 1px solid #ffffff;

border-bottom: 1px solid #ffffff;

}

.loading-one p.loading-txt {

color: #fff;

font-size: 2rem;

letter-spacing: 0.25rem;

line-height: 2.0;

padding: 2rem 0;

font-family: sans-serif;

}

.animation_loading {

animation: equalizer_loading 7000ms infinite;

animation-iteration-count: 10;

}

@keyframes equalizer_loading {

0% {width: 70%;}

10% {width: 50%;}

20% {width: 100%;}

30% {width: 30%;}

40% {width: 50%;}

50% {width: 70%;}

60% {width: 50%;}

70% {width: 30%;}

80% {width: 100%;}

90% {width: 30%;}

100% {width: 70%;}

}



#pagetop {

position: fixed;

bottom: 1rem;

right: 1rem;

z-index: 100;

width: 6rem;

height: 6rem;

display: inline-flex;

justify-content: center;

align-items: center;

background: #E74F91;

}

#pagetop a {

color: #fff;

font-size: 3rem;

display: flex;

justify-content: center;

align-items: center;

width: 100%;

height: 100%;

}

.al_c {

text-align: center !important;

}

.al_l {

text-align: left;

}

.mg_auto {

margin: 0 auto;

text-align: center;

}

.po_r {

position: relative;

}

.flex {

display: flex;

}

.fd_re {

flex-direction: row-reverse;

}

.jc_c {

justify-content: center;

}

.jc_sb {

justify-content: space-between;

}

.jc_sa {

justify-content: space-around;

}

.ai_c {

align-items: center;

}

.as_fs {

align-self: flex-start;

}

.mb_s {

margin-bottom: 5rem !important;

}

.mb_m {

margin-bottom: 8rem !important;

}

.mb_l {

margin-bottom: 12rem !important;

}

.mt_m {

margin-top: 8rem !important;

}

.pt_m {

padding-top: 5rem;

}

.mr_3 {

margin-right: 3rem;

}

.mb_-2 {

margin-bottom: -2rem;

}

.mr_-2 {

margin-right: -2rem;

}

.mr_-3 {

margin-right: -3rem;

}

.ml_-2 {

margin-left: -2rem;

}

.ml_-3 {

margin-left: -3rem;

}

.mt_-3{

margin-top: -3rem;

}

.mt_-6{

margin-top: -6rem;

}

.txt_l {

font-size: 2.6rem;

}

.txt_s {

font-size: 2rem !important;

}

p.note {

font-size: 1.5rem;

font-weight: 300;

line-height: 1.3;

text-align: left;

}

.di_b {

display: block;

}

.z-1 {

z-index: -1;

}

.z10 {

z-index: 10;

position: relative;

}

br.nopc {

display: none;

}

.only_sp{

display: none;

}



.index .firstmovie{

display: none;

}



/* .container.header {

position:absolute;

display: flex;

align-items: center;

z-index: 10;

width: 100%;

} */

.header {

height: 100px;

position: relative;

z-index: 3;

background-color: #fff;

 }

header {

width: 100%;

display: block;

padding: 0;

}

header .inner {

width: 100%;

height: 100px;

display: flex;

justify-content: space-between;

align-items: center;

background-color: #fff;

padding: 0 2rem;

}

header .logo {

width: 240px;

position: fixed;

}

header nav ul{

width: 100%;

/* display: flex; */

align-items: center;

justify-content: space-around;

margin-bottom: 0;

}

.gnavi li::before,

.gnavi li::after {

position: absolute;

z-index: -1;

display: block;

content: '';

}

.gnavi li,

.gnavi li::before,

.gnavi li::after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

-webkit-transition: all .3s;

transition: all .3s;

}

.gnavi li{

display: block;

margin: 0;

padding: 2rem 0;

font-size: 2.4rem;

font-weight: 700;

text-align: center;

position: relative;

z-index: 2;

color: #fff;

line-height: 50px;

line-height: 1.2;

}

.gnavi li.cs{

opacity: 0.6;

}

.gnavi li a {

color: #ffffff;

display:block;

white-space:nowrap;

transition: all .3s;

line-height: 1.2;

font-weight: 700;

}

.gnavi li a:hover{

transform: translate(3px,3px);

}

.gnavi li span {

margin-top: 0;

display: block;

font-size: 1.4rem;

font-weight: normal;

font-family: 'Yusei Magic', sans-serif;

}

header nav{

width: 20rem;

top:100px;

right: 0;

display: none;

position: fixed;

background: rgba(231, 79, 145, 0.9);



}

header nav ul{

display: block;

margin: 0 auto;

width: 100%;

}

header nav ul li{

margin: 0 auto;

text-align: center;

border-bottom: 1px #fff dashed;

}

header nav ul li:last-child{

border: none;

}

header nav ul li a{

display: block;

color: #fff !important;

}

#nav_toggle{

right: 1rem;

top: auto;

padding: 0 8px 0 8px;

display: block;

position: fixed;

width: 60px;

height: 60px;

z-index: 100;

background: #E74F91;

zoom: 1;

}

#nav_toggle div {

position: relative;

margin-top: 10px;

}

#nav_toggle span{

display: block;

height: 3px;

background: #fff;

position:absolute;

width: 100%;

left: 0;

-webkit-transition: 0.5s ease-in-out;

-moz-transition: 0.5s ease-in-out;

transition: 0.5s ease-in-out;

}

#nav_toggle span:nth-child(1){

top:0;

}

#nav_toggle span:nth-child(2){

top:18px;

}

#nav_toggle span:nth-child(3){

top:37px;

}

.open #nav_toggle span:nth-child(1) {

top: 18px;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

transform: rotate(135deg);

}

.open #nav_toggle span:nth-child(2) {

width: 0;

left: 50%;

}

.open #nav_toggle span:nth-child(3) {

top: 18px;

-webkit-transform: rotate(-135deg);

-moz-transform: rotate(-135deg);

transform: rotate(-135deg);

}

.info{

display: flex;

justify-content: center;

align-items: center;

margin-top: -80px;

}

.info h3{

margin: 0 2rem 0 0;

font-size: 2rem;

}

.info ul{

display: flex;

flex-direction: column;

margin-bottom: 0;

overflow-x: hidden;

overflow-y: scroll;

height: 5.5rem;

}

.info ul li{

display: flex;

border-bottom: dashed 2px rgba(240, 172, 202, 0.5);

padding: 1.5rem 0;

font-weight: 400;

color: #DA437C;

}

.info ul li:last-child{

border-bottom: none;

}

.info ul li time{

display: block;

font-weight: 800;

margin-right: 1.5rem;

}

.info ul li a {

transition: all 0.3s;

color: #DA437C;

display: flex;

}

.info ul li a:hover,.news .info ul li a:after {

background: rgba(241, 241, 163, 0.8);

}



.main {

padding-top: 15rem;

}

.index .main {

padding-top: 0;

}

section.hero {

width: 100%;

overflow: hidden;

position: relative;

padding-bottom: 0;

text-align: center;

background-color: #fff;

}

.hero figure.fg_hero {

background-image: url(../images/fg_hero.png);

background-size: cover;

background-position: center center;

background-repeat: no-repeat;

width: 100%;

height: 1000px;

overflow: hidden;

text-indent: -9999px;

}

.hero .box h1,.hero p{

margin: 0;

}

.hero .box{

position: absolute;

bottom: 5rem;

left: 0;

right: 0;

margin: 0 auto;

width: 100%;

}

.hero .box ul{

display: flex;

justify-content: space-between;

margin: 0 0 0 8rem;

}

.hero figure{

animation-delay: 1s;

}

.hero h1{

animation-delay: 1.5s;

}

.hero .vol2{

animation-delay: 2.5s;

}

.hero .vol1{

animation-delay: 3s;

}

.fadeUp {

animation-name:fadeUpAnime;

animation-duration:1s;

animation-fill-mode:forwards;

opacity: 0;

}

@keyframes fadeUpAnime{

from {

opacity: 0;

transform: translateY(20px);

}

to {

opacity: 1;

transform: translateY(0);

}

}



.intro p.lead{

font-size: 5.5rem;

top: 46%;

position: absolute;

bottom: auto;

right: auto;

z-index: 2;

width: 100%;

text-align: center;

}

.intro p.lead span{

background: rgba(252, 252, 94, 0.8);

transform: rotate(5deg);

font-family: 'Yusei Magic', sans-serif;

color: #000;

display: inline-block;

padding: 0 2rem 0.3rem;

}

.intro p b{

color: #E74F91;

font-family: inherit;

font-weight: normal;

}

.intro ul{

display: flex;

flex-wrap: wrap;

z-index: 5;

margin-bottom: 3rem;

margin-top: -1px;

}

.intro ul li{

width: 50%;

margin-bottom: -2px;

}

.intro p{

font-family: 'Yusei Magic', sans-serif;

font-size: 4rem;

text-align: center !important;

margin: 0 auto;

}

.intro figure{

margin: 3rem 0;

}



.lineup ul li,

.special ul li{

border: 6px solid #E74F91;

width: 48%;

position: relative;

background-color: #fff;

}

.lineup ul li:nth-child(even),

.special ul li.vol2{

border: 6px solid #51BDC5;

}

.lineup ul li .vol,

.special ul li .vol{

position: absolute;

top: -3px;

left: 0;

}

.lineup ul li .vol img,

.special ul li .vol img{

width: 110px;

}

.lineup ul li .star{

position: absolute;

top: -4rem;

right: -1rem;

}

.lineup ul li figure{

margin-top: 8rem;

}

.lineup ul li h3{

font-size: 2rem;

font-weight: bold;

margin: 1.5rem 0;

}

.lineup ul li ul.spec li{

border: none;

width: 100%;

font-size: 1.6rem;

margin-bottom: 1rem;

}

.lineup ul li figure.op{

margin: 2rem 0;

}



.story h3{

margin-bottom: 8rem;

}

.story ul li{

display: flex;

align-items: center;

margin-bottom: 8rem;

}

.story ul li h4{

display: inline-block;

margin-top: 0;

padding: 1.5rem 1rem 1.5rem 2.5rem;

}

.story ul li p{

margin: 2rem 4rem;

font-size: 2rem;

}

.story ul li h4 + p{

font-size: 3rem;

}

.story ul li .block{

width: 50%;

position: relative;

text-align: left;

padding-bottom: 2rem;

}

.story ul li.rui .block,

.story ul li.yua .block{

margin-left: 5rem;

margin-right: -8rem;

}

.story ul li.miyako .block,

.story ul li.kirame .block{

margin-right: 5rem;

margin-left: -8rem;

}

.story ul li .star{

position: absolute;

top: -8rem;

right: 0;

}

.story ul li figure{

margin-top: -3rem;

}

.story ul li.rui{

background: url(../images/bg_story1.png);

background-size: cover;

filter: drop-shadow(-10px 10px 0px #E0F9B2);

}

.story ul li.rui figure{



}

.story ul li.rui h4{

background-color: #E0F9B2;

}

.story ul li.rui .block{

background: rgba(240, 252, 217, 0.9);

}



.story ul li.miyako{

background: url(../images/bg_story2.png);

background-size: cover;

filter: drop-shadow(-10px 10px 0px #FAF0B3);

}

.story ul li.miyako figure{



}

.story ul li.miyako h4{

background-color: #FAF0B3;

}

.story ul li.miyako .block{

background: rgba(253, 248, 217, 0.9);

}



.story ul li.yua{

background: url(../images/bg_story3.png);

background-size: cover;

filter: drop-shadow(-10px 10px 0px #BDF4DF);

}

.story ul li.yua figure{



}

.story ul li.yua h4{

background-color: #BDF4DF;

}

.story ul li.yua .block{

background: rgba(221, 250, 239, 0.9);

}



.story ul li.kirame{

background: url(../images/bg_story4.png);

background-size: cover;

filter: drop-shadow(-10px 10px 0px #BFF4FD);

}

.story ul li.kirame figure{



}

.story ul li.kirame h4{

background-color: #BFF4FD;

}

.story ul li.kirame .block{

background: rgba(223, 250, 254, 0.9);

}



.gallery ul {

display: flex;

justify-content: space-between;

  flex-wrap: wrap;

margin: 4rem 0 10rem;

}

.gallery ul:after,

.gallery ul:before{

  content:"";

  display:block;

  width: 31%;

  height:0;

}

.gallery ul:before{

  order:1;

}

.gallery ul li {

width: 31%;

margin-bottom: 4rem;

}

.gallery ul li img {

filter: drop-shadow(0.5rem 0.5rem 0px #E74F91);

}







.special ul {

flex-wrap: wrap;

}

.special ul:after,

 .special ul:before{

content: "";

display: block;

width: 48%;

height: 0;

}

 .special ul:before{

order: 1;

}

.special ul li{

padding: 5rem 0 3rem;

width: 48%;

margin-bottom: 5rem;

}

.special ul li h3{

font-size: 2.4rem;

font-weight: bold;

margin: 1.5rem 0 0.5rem;

}

.special p{

font-size: 1.6rem;

margin: 0 0 1.5rem;

}

.special .btn2{

margin-bottom: 1rem;

}





.index .movie ul{

margin: 4rem auto 2rem !important;

display: flex;

justify-content: center;

text-align: center;

}

.index .movie ul li p{

color: #fff;

}



.index .movie ul.slider{

margin: 0 auto 4rem;

display: flex;

justify-content: space-between;

text-align: center;

}

.index .movie ul li{

margin-right: 2rem;

margin-left: 2rem;

}

.slick-slide img {

width: 100%;

height: auto;

}

.index .movie ul.slider li p{

color: #fff;

}

.slick-prev, .slick-next {

z-index: 1;

width: 4rem !important;

height: 4rem !important;

}

.slick-arrow:before{

content:""!important;

width: 100%!important;

height: 100%!important;

position: absolute;

top: 0;

left: 0;

}

.slick-prev:before {

content: "" !important;

background-image: url(../images/ico_arw1.png) !important;

background-size: contain!important;

transform: rotate(-90deg);

}

.slick-next:before {

content: "" !important;

background-image: url(../images/ico_arw1.png) !important;

background-size: contain!important;

transform: rotate(90deg);

}

.slick-prev {

left: -60px !important;

}

.slick-next {

right: -60px !important;

}

.thumb {

margin: 20px 0 0;

}

.thumb .slick-slide {

cursor: pointer;

}

.thumb .slick-slide:hover {

opacity: .7;

}

.slick-prev:before, .slick-next:before{

color: #fff !important;

font-size: 5rem !important;

}

.slick-dots{

bottom: -3rem !important;

}

.slick-dots li button:before{

font-size: 1.5rem !important;

color: #fff !important;

}



.spec .wrap{

display: flex;

justify-content: space-between;

}

.spec .block{

width: 50%;

}

.spec dl{

display: flex;

justify-content: center;

color: #555;

}

.spec dl dt{

width: 30%;

text-align: right;

padding-right: 2rem;

}

.spec dl dd{

width: 70%;

text-align: left;

}

footer {

padding: 4rem 0;

width: 100%;

font-weight: 300;

text-align: center;

background: #fff;

filter: drop-shadow(-3px 0 3px rgba(0,0,0,0.1));

}

footer ul.foot_nav {

display: none;

justify-content: center;

color: #E74F91;

margin: 0 auto 3rem;

text-align: center;

}

footer ul.foot_nav li {

border-left: solid 2px #E74F91;

padding: 0 1.5rem;

}

footer ul.foot_nav li:first-child {

border-left: none;

}

footer ul.foot_nav li.cs {

color: rgba(231, 79, 145, 0.3);

}

footer ul.foot_nav a {

color: #E74F91;

}

footer ul.imagebanner {

margin-bottom: 4rem;

}

footer ul.imagebanner li {

margin: 0 2rem;

}

footer small {

width: auto;

display: inline-block;

}

/********* pc下層ページ *********/



.about .main p.txt_type1{

font-size: 3.6rem;

}

.about .main ul li{

position: relative;

margin-bottom: 12rem;

}

.about .main ul li span{

position: absolute;

top: auto;

left: auto;

}

.about .main ul.point1 li span.a1{

top: -18rem;

left: -3rem;

}

.about .main ul.point1 li span.a2{

top: 26rem;

left: 0;

right: 0;

margin: auto;

}

.about .main ul.point1 li span.a3{

bottom: -4rem;

right: -4rem;

}

.about .main ul.point2 li span.a1{

top: -5rem;

right: -1rem;

}

.about .main ul.point2 li span.a2{

bottom: 7rem;

right: 7rem;

}

.about .main ul.point2 li span.a3{

top: -5rem;

left: -5rem;

}

.about .main ul.point3 li span.a1{

top: -6rem;

left: 2rem;

}

.about .main ul.point3 li span.a2{

top: -3rem;

right: 1rem;

}

.about .main ul.point3 li span.a3{

bottom: -6rem;

left: -2rem;

}

.about .main ul.point3 li span.a4{

top: 19rem;

left: 0;

right: 0;

margin: auto;

}

.about .main ul.point3 li span.a5{

bottom: 8rem;

left: 0;

right: 0;

margin: auto;

}

.yurayura1{

z-index: 1;

transform-origin: center bottom;

animation: yurayura1 3s linear infinite;

}

@keyframes yurayura1 {

0% , 100%{transform: rotate(4deg);}

50%{transform: rotate(-4deg);}

}



.kaiten1:hover {

  animation: kaiten1 1s linear infinite;

animation-iteration-count: 1;

}

 

@keyframes kaiten1 {

  0%  { transform: rotateY(0deg); }

  100% { transform: rotateY(360deg); }

}

.bound{

transform: scale(1);

}

.bound:hover{

  -webkit-animation: bound 1s ease-in; 

  -moz-animation:    bound 1s ease-in; 

  animation: bound 1s ease-in;

}

@keyframes bound {

  /** 開始時は１倍の大きさ */

  from { transform: scale(1); }

  /** 0%～25%にかけて1.15倍する */

  25% { transform: scale(1.15); }

  /** 25%～50%にかけて0.95倍する */

  50% { transform: scale(0.95); }

  /** 50%～75%にかけて1.05倍する */

  75% { transform: scale(1.05); }

  /** 終了時は元の大きさに戻す */

  to { transform: scale(1); }

}



.flash1{

animation: flash1 5s linear infinite;

}

@keyframes flash1 {

0%,60%,70%,80%,100% {opacity: 1;}

65%,75% {opacity: 0;}

}

.flash2{

animation: flash2 8s linear infinite;

}

@keyframes flash2 {

0%,80%,100% {opacity: 1;}

90% {opacity: 0.2;}

}

.chara .main{

padding-bottom: 8rem;

}

.chara.charaindex .main{

padding-bottom: 10rem;

}

.chara.charaindex .btnArea .block{

margin-bottom: 2rem;

}

.chara .btnArea .block{

background: rgba(253, 219, 227, 0.8);

padding:5rem 1.5rem ;

margin-top: 5rem;

}

.chara .btnArea .block.sub{

background: rgba(253, 243, 216, 0.8);

margin: 0;

}

.chara .btnArea .block h3{

color: #F570AA;

font-family: 'Yusei Magic', sans-serif;

margin-bottom: 2rem;

}

.chara .btnArea .block.sub h3{

color: #F7B52D;

}

.chara .btnArea .block.sub ul li {

margin: 0 0.8rem;

}

.chara .btnArea ul{

margin-bottom: 0.5rem;

}

.chara .btnArea ul li{

margin: 0 0.5rem;

filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.1));

transition: all 0.3s;

}

.chara .btnArea ul li:hover{

filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.05));

transition: all 0.3s;

}

.chara .charaArea{

margin: 3rem 0 18rem;

}

.chara.sub .charaArea,.chara.chara5 .charaArea{

margin-bottom: 6rem;

}

.chara .charaArea .block{

position: relative;

}

.chara .charaArea .block.left{

margin: -6rem 0 -30rem 0;

width: 72%;

}

.chara.sub .charaArea .block.left{

margin: -6rem 0 0 0;

width: 90%;

}

.chara.sub.chara6 .charaArea .block.left{

margin: -6rem -10rem 0 -5rem;

width: 100%;

}

.chara.sub.chara6 .charaArea .block.left figure{

margin-left: -20rem;

}

.chara.sub.chara8 .charaArea .block.left{

margin-right: -8rem;

}



.chara.sub .charaArea .block.left figure{

height: 74rem;

overflow: hidden;

}

.chara.chara2 .charaArea .block.left {

margin-bottom: -12rem;

width: 82%;

}

.chara.chara2 .charaArea .block.left figure {

margin-right: -5rem;

}

.chara.chara3 .charaArea .block.left{

margin: -6rem 0 -22rem 0;

width: 100%;

}

.chara.chara4 .charaArea .block.left{

margin: -6rem 0 -22rem 0;

width: 92%;

}

.chara.chara5 .charaArea .block.left{

width: 130%;

}

.chara.chara9 .charaArea .block.left{

width: 85%;

}

.chara.chara10 .charaArea .block.left{

width: 65%;

}

.chara.chara10 .charaArea .block.left figure{

margin-left: 5rem;

margin-right: 0;

}

.chara.chara11 .charaArea .block.left{

width: 70%;

}

.chara.chara11 .charaArea .block.left figure{

margin-left: 3rem;

margin-right: 3rem;

}

.chara.chara12 .charaArea .block.left{

width: 70%;

}

.chara.chara12 .charaArea .block.left figure{

margin-left: 9rem;

margin-right: 4rem;

}



.chara.chara4 .charaArea .block.left figure{

margin: 0 -15rem 0 -15rem;

}

.chara .charaArea .block.left p{

position: absolute;

left: 0;

top: 10rem;

}

.chara.sub .charaArea .block.left p{

top: 2rem;

}

.chara.chara5 .charaArea .block.left figure{

opacity: 0.5;

margin-top: 12rem;

}

.chara.chara5 .charaArea .block.left p{

left: 2rem;

}

.chara .charaArea .block.left span{

position: absolute;

z-index: 1;

right: -8rem;

bottom: 6rem;

}

.chara.chara1 .charaArea .block.left span{

bottom: 10rem;

}

.chara.chara2 .charaArea .block.left span{

bottom: -4rem;

}

.chara.chara3 .charaArea .block.left span{

right: auto;

left: 10rem;

}

.chara.chara4 .charaArea .block.left span{

right: -1rem;

}



.chara .charaArea .block h3{

margin: 6rem 0 -3rem;

}

.chara .charaArea .block p.intro{

font-size: 2.2rem;

width: 100%;

margin: 0 auto;

text-align: left;

}

.chara .charaArea .block p.impression{

margin: 4rem 0 10rem;

}



.modaal-wrapper [tabindex="0"] {

width: 1300px;

margin: 0 auto;

}

.modaal-container{

    max-width: 1200px;

}

.modaal-close:focus:after,

.modaal-close:focus:before,

.modaal-close:hover:after,

.modaal-close:hover:before {

background: #E74F91 !important;

}



@media screen and (max-height: 900px){

.modaal-video-container {

    max-width: 1200px !important;

max-height:731px !important;

}

}



.chara .charaArea .block.left span.btn_main2{

bottom: 42rem;

right: 7rem;

width: 120px;

height: 120px;

font-size: 1.8rem;

display:flex;

justify-content: center;

align-items: center;

line-height: 1.2;

letter-spacing: -0.1rem;

transition: 0.5s;

filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));

}

.chara.chara2 .charaArea .block.left span.btn_main2{

bottom: 30rem;

right: 4rem;

}

.chara.chara3 .charaArea .block.left span.btn_main2{

bottom: 60rem;

left: 13rem;

}

.chara .charaArea .block.left span.btn_main2 a{

color: #E74F91;

font-weight: bold;

}

.chara .charaArea .block.left span.btn_main2 a:active{

opacity: 0.7;

}



.chara_main2 .main{

padding: 0;

text-align: center;

}



.chara_main2 .main .btn_close a{

position: fixed;

bottom: 0;

right: 1rem;

font-size: 4rem;

z-index: 1;

color: #E74F91;

opacity: 0.7;

transition: 0.5s;

}

.chara_main2 .main .btn_close a:hover{

opacity: 1;

transition: 0.5s;

}



.chara .voice_wrap{

display: flex;

margin-bottom: 2rem;

align-items: center;

}

.chara .voice_wrap p.cv{

font-size: 2.2rem;

background-color: #fff;

color: #E74F91;

padding: 1.5rem 2rem;

white-space: nowrap;

margin: 0 2rem 0 0;

}

.chara .voice_wrap .voice{

display: flex;

align-items: center;

justify-content: center;

background-color:#00A7CC;

color: #fff;

width: 100%;

padding: 1rem 0;

position: relative;

}

.chara .voice_wrap .voice .new{

position: absolute;

top: -1rem;

left: -1rem;

}

.chara .voice_wrap .voice h4{

margin: 0 1.5rem;

}

.chara .voice_wrap .voice .box{

width: 4rem;

height: 4rem;

background-color:#fff;

border-radius: 5rem;

margin: 0 1.5rem 0 0;

filter: drop-shadow(1px 1.5px 2px rgba(100,100,100,0.7));

}

.chara .voice ul.jp-controls{

margin: 0;

}

.chara .voice ul.jp-controls{

margin-bottom: 0;

}

.chara .voice ul.jp-controls li{

margin-bottom: 0;

margin-top: 0.5rem;

}

.chara .voice ul.jp-controls li a{

color: #00A7CC;

width: 100%;

height: 40px;

font-weight: bold;

display: block;

font-size: 2.2rem;

}





.gallery .main ul {

display: flex;

justify-content: space-between;

  flex-wrap: wrap;

margin: 10rem 0;

}

.gallery .main ul:after,

.gallery .main ul:before{

  content:"";

  display:block;

  width: 23%;

  height:0;

}

.gallery .main ul:before{

  order:1;

}

.gallery .main ul li {

width: 23%;

margin-bottom: 3rem;

}



#movie, #cp, #banner, #twsozai, #syokai, #tenpo,#original, #yonkoma, #movie {

padding-top:20rem;

margin-top:-20rem;

}



.youtube {

position: relative;

width: 100%;

padding-top: 56.25%;

}

.youtube iframe {

position: absolute;

top: 0;

right: 0;

width: 100%;

height: 100%;

}



.download .block {

margin: 0 2rem;

padding: 2rem 0 6rem;

}

.download dl {

display: flex;

justify-content: space-between;

margin: 1rem auto;

width: 80%;

background-color: #F0F0F0;

padding: 2rem 4rem;

}

.download dt {

font-size: 2.2rem;

}







/*==================1400==================*/

@media screen and (max-width:1400px){



section.hero {

zoom: 0.8;

}

/* .hero figure {

margin-top: 4rem;

} */

}

/*==================1220==================*/

@media screen and (max-width:1220px){



ul.iconButton{

top: auto;

bottom: 0;

left: 0;

}

.container.header {

height: 100px;

}

header .logo {

width: 200px;

}

.gnavi li{

margin: 0 1.2rem;

}

section.hero {

zoom: 0.6;

}

.main {

padding-top: 10rem;

}





.download .main dt {

font-size: 2.2rem;

}



}

/*==================980==================*/

@media screen and (max-width:980px){



header .logo {

width: 150px;

}

.info{

margin-top: 0;

font-size: 80%;

}

.info h3{

display: none;

}

section.hero {

zoom: 0.50;

}

.hero figure {

margin-top: 8rem;

}

.main {

padding-top: 10rem;

}

.intro p.lead{

font-size: 2rem;

}



.story h3{

zoom: 0.6;

}

.story ul li .star{

zoom: 0.7;

top: -2rem;

}



.story ul li{

flex-direction: column-reverse;

}

.story ul li .block{

width: 100%;

zoom: 0.8;

margin-left: 0 !important;

margin-right: 0 !important;

}

.story ul li h4 + p{

font-size: 2.4rem;

}

.story ul li figure{

margin-top: 1rem;

width: 80%;

}





.download .main dl {

flex-direction: column;

width: 100%;

}



}

/*==================600==================*/

@media screen and (max-width:600px){



html{

font-size: 50%;

}

.mr_3 {

margin-right: 0;

}

.mb_-2 {

margin-bottom: 0;

}

.mr_-2 {

margin-right: 0;

}

.mr_-3 {

margin-right: 0;

}

.ml_-2 {

margin-left: 0;

}

.ml_-3 {

margin-left: 0;

}

.mt_-3{

margin-top: 0;

}

.mt_-6{

margin-top: 0;

}



.intro p{

font-size: 2.4rem;

}



.flex_d_c{

flex-direction:column !important;

margin: 0 !important;

width: 100% !important;

text-align: center;

}

.flex_d_c li{

margin-bottom: 5rem;

}

.only_pc,

.chara .main p.intro br{

display: none;

}

.only_sp{

display: block;

}

.ta_l_onlysp{

text-align: left;

}



br.nosp,

p.nosp br{

display: none;

}

.modaal-wrapper [tabindex="0"] {

width: auto;

}

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

.container.header{

height: auto;

background-image: none;

filter: none;

padding: 0;

}

header .inner {

height: 60px;

padding: 0;

}

header .logo {

width: 120px;

margin: 5px 0 0 5px;

}

header {

padding: 0;

}

header nav{

width: 50%;

top:85px;

}



.main{

padding-top: 4rem;

}

.header {

height: 85px;

 }

.container.header header .inner {

width: 100%;

padding: 0;

justify-content: space-between;

align-items:flex-start;

}

#nav_toggle{

right: 0.8em;

}

.block.sp100 {

width: 100% !important;

}

#content {

margin: 3em 0 3em;

}

.info ul{

height: 3rem;

}

.info ul li{

padding: 0.5rem 0;

}



.hero {

min-width: 0;

}

section.hero,

header .logo {

zoom: 1;

}

.hero figure.fg_hero {

background-image: url(../images/fg_hero_sp.png);

height: 290px;

margin-top: 0;

}

.hero .box{

bottom: 2rem;

}

.hero .box h1{

width: 70%;

margin: 0 auto;

}

.hero .box ul{

margin: 0 -1rem 0 2rem;

}

.lineup ul li{

width: 100%;

}

.lineup ul li .vol,

.special ul li .vol{

}

.lineup ul li .star,

.lineup ul li figure{

zoom: 0.6;

}





.special ul li{

width: 100%;

}

.special ul li figure{

zoom: 0.7;

}



.movie ul li{

width: 90%;

margin: 1rem auto 4rem;

}

.spec .wrap {

display: flex;

}

.spec .block {

width: 100%;

}

.spec dl{

font-size: 1.5rem;

}

.spec dl dt{

width: 30%;

}

.spec dl dd{

width: 70%;

}

footer {

padding: 4rem 0;

}

/********* sp下層ページ *********/





.about .main ul li{

margin-bottom: 6rem;

}

.about .main ul li span{

width: 25%;

}



.about .main ul.point1 li span.a1{

top: -7rem;

left: -2rem;

}

.about .main ul.point1 li span.a2{

top: 9rem;

}



.about .main ul.point1 li span.a3{

bottom: -2rem;

right: -1rem;

}

.about .main ul.point2 li span.a2{

bottom: 2rem;

right: 3rem;

width: 32%;

}

.about .main ul.point2 li span.a3{

top: -4rem;

left: -1rem;

}

.about .main ul.point3 li span.a1{

top: -5rem;

left: -2rem;

}

.about .main ul.point3 li span.a3{

bottom: -4rem;

left: 1rem;

width: 22%;

}

.about .main ul.point3 li span.a4{

top: 6rem;

width: 90%;

}

.about .main ul.point3 li span.a5{

bottom: 2rem;

width: 90%;

}

.chara.charaindex .main{

padding-bottom: 0;

}

.chara .main,.chara.sub .main{

padding-bottom: 1rem;

}

.chara.chara1 .main{

padding-bottom: 1rem;

}

.chara .btnArea{

margin-bottom: 4rem;

}

.chara .btnArea .block.sub ul{

width: 100%;

flex-wrap : wrap;

justify-content:center;

}

.chara .btnArea .block.sub ul li{

width:17%;

margin:1rem 0.6rem ;

}

.chara .charaArea{

margin: 0;

}

.chara.sub .charaArea{

margin: 0;

}

.chara.chara.charaindex .btnArea .block{

padding:5rem 1.5rem ;

}

.chara .charaArea .block.left p{

top: 0rem;

left: -1rem;

width: 5rem;

}

.chara.sub .charaArea .block.left p{

top: -3rem;

}

.chara.chara2 .charaArea .block.left p{

width: 6rem;

}

.chara.chara3 .charaArea .block.left p{

top: -3rem;

width: 4rem;

}

.chara.chara4 .charaArea .block.left p{

top: 4rem;

width: 4rem;

}

.chara.chara5 .charaArea .block.left p{

top: 0;

left: 0;

width: 3rem;

}

.chara.chara6 .charaArea .block.left p{

width: 3.5rem;

}

.chara.chara9 .charaArea .block.left p{

width: 3.5rem;

}

.chara.chara11 .charaArea .block.left p{

width: 3.5rem;

}



.chara.sub.chara8 .charaArea .block.left p{

left: -2rem;

}

.chara.sub.chara9 .charaArea .block.left{

width: 170% !important;

}



.chara.sub.chara9 .charaArea .block.left p{

left: -1rem;

top: -3rem;

}

.chara.chara3 .charaArea .block.left figure{

margin-left: -2rem;

}

.chara.chara3 .charaArea .block.left span{

left: 0;

}

.chara.chara2 .charaArea .block.left figure{

margin-right: -2rem;

}

.chara .charaArea .block p.impression{

margin: 4rem 0 4rem;

}

.chara.chara5 .charaArea .block p.impression{

margin-top: 2rem;

}

.chara .charaArea .block.left{

margin: 3rem 1rem 5rem 0;

width: 300%;

}

.chara.sub .charaArea .block.left figure{

height: 30rem;

}

.chara.sub .charaArea .block.left{

margin: 3rem 1rem 0rem 0 !important;

width: 150% !important;

}

.chara.sub.chara6 .charaArea .block.left figure{

margin: 0 -5rem 0 -6rem;

}

.chara.sub.chara7 .charaArea .block.left figure{

margin: 0 -4rem 0 -4rem;

}

.chara.sub.chara7 .charaArea .block h3{

width: 50%;

margin: 1rem auto -3rem;

}

.chara.chara10 .charaArea .block.left figure{

margin-left: 0;

margin-right: -5rem;

}

.chara.chara11 .charaArea .block.left figure,

.chara.chara12 .charaArea .block.left figure{

margin-left: -2rem;

margin-right: -4rem;

}

.chara.chara2 .charaArea .block.left {

margin-bottom: 5rem;

width: 320%;

}

.chara.chara3 .charaArea .block.left {

margin: 3rem 1rem 5rem 0;

width: 300%;

}

.chara.chara4 .charaArea .block.left{

margin: 3rem 1rem 5rem 0;

width: 240%;

}

.chara.chara4 .charaArea .block.left figure{

margin: 0 -7rem 0 -8rem;

}

.chara.chara5 .charaArea .block.left{

margin: 5rem 0rem 0 0;

width: 170%;

}

.chara.chara5 .charaArea .block.left figure{

margin: 0 1rem 0 0;

}

.chara .charaArea .block.left span{

right: auto;

left: 0;

bottom: -7rem;

width: 12rem;

}

.chara.chara1 .charaArea .block.left span{

bottom: -7rem;

}

.chara .charaArea .block.left span.btn_main2{

width: 6rem;

height: 5rem;

bottom: 6rem;

}

.chara.chara2 .charaArea .block.left span.btn_main2{

bottom: 10rem;

}

.chara.chara3 .charaArea .block.left span.btn_main2{

bottom: 14rem;

left: 4rem;

}

.chara.chara4 .charaArea .block.left span.btn_main2{

bottom: 12rem;

}

.chara .charaArea .block h3{

margin: 3rem 0 -3rem;

}

.chara .charaArea .block p.intro{

width: 100%;

font-size: 1.3rem;

}



.chara .voice_wrap p.cv{

background-color: #fff;

color: #E74F91;

padding: 0.5rem 1rem;

margin: 0 0 1rem 0;

}

.chara .voice_wrap .voice .new{

top: -2rem;

}

.chara .voice_wrap{

flex-direction: column;

}

.chara .voice_wrap .voice h4{

margin: 0 0.5rem;

font-size: 1.6rem;

white-space:normal;

width: 25%;

}



#movie, #cp, #banner, #twsozai, #syokai, #tenpo,#original,#yonkoma, #movie {

padding-top:7rem;

margin-top:-7rem;

}





/* ------- */



#pagetop.btn::after {

margin: 0 0 0.2em;

}

.gnavi {

zoom: 1;

}

.gnavi li {



}

.gnavi li span {

font-size: 1.6rem;

}

.gnavi li a {

width:auto;

height: auto;

background:none;

background-position: 0;

text-indent:0;

white-space:nowrap;

transition: all .3s;

}

.gnavi li a:hover {

background-position: 0;

transition: all .3s;

}





#nav_toggle{

padding: 0 7px 0 8px;

width: 60px;

height: 60px;

zoom: 0.8;

}



}