html{
overflow-x: hidden;
}

body{
line-height: 1.8;
font-family:  "游ゴシック, ヒラギノ角ゴ ProN W3", HiraKakuProN-W3,  "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
color: #fff;
background-color: #fff;
background-attachment: fixed;
overflow-x: hidden;
}

#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

p{
margin:  10px 0;
font-size: 1em;
}

.pc{display:block;}
.sp{display:none;}
.ssp{display:none;}

img {
max-width:100%;
vertical-align: bottom;
}

ul li{
line-height: 1.8;
}

ul.br{
margin-left: 1.4em;
text-indent: -1.4em;
}

small{font-size: 0.6;}

a{
color: #fff;
text-decoration: underline;
word-break: break-all;
}

a:hover{
text-decoration: none;
}

a img{
transition:0.5s;
}

a img:hover{
opacity: 0.5 ;
}

.cf:before,
.cf:after {
content: " "; 
display: table; 
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

.fadein_c {
opacity : 0;
transform : translate(0, 0);
transition : all 1500ms;
}
.fadein_c.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein_xxx {
opacity : 0;
transform : translate(0, 0);
transition : all 3000ms;
}
.fadein_xxx.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein{
opacity : 0;
transform : translate(0, 50px);
transition : all 1500ms;
}

.fadein.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein02 {
opacity : 0;
transform : translate(-150px, 0);
transition : all 1500ms;
}
.fadein02.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.fadein03 {
opacity : 0;
transform : translate(150px, 0);
transition : all 1500ms;
}
.fadein03.scrollin {
opacity : 1;
transform : translate(0, 0);
}

.dli-external-link {
display: inline-block;
color: #fff;
line-height: 1;
width: 0.7em;
height: 0.7em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: none;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link > span {
position: absolute;
top: -0.24em;
right: -0.3em;
width: 45%;
height: 45%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: none;
box-shadow: -0.1em 0.1em 0 0.1em none;
box-sizing: border-box;
}

.dli-external-link > span::before {
content: '';
position: absolute;
top: 0.06em;
right: 0.05em;
width: 0.05em;
height: 0.6em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.dli-external-link-event {
display: inline-block;
vertical-align: middle;
color: #fb467d;
line-height: 1;
width: 0.5em;
height: 0.5em;
border: 0.1em solid currentColor;
border-radius: 0.1em;
background: #fff;
box-sizing: content-box;
position: relative;
margin: 0 5px
}

.dli-external-link-event > span {
position: absolute;
top: -0.1em;
right: -0.1em;
width: 40%;
height: 40%;
border: 0.1em solid currentColor;
border-bottom: 0;
border-left: 0;
background: #fb467d;
box-shadow: -0.1em 0.1em 0 0.1em #fff;
box-sizing: border-box;
}

.dli-external-link-event > span::before {
content: '';
position: absolute;
top: -0.05em;
right: -0.1em;
width: 0.1em;
height: 0.5em;
background: currentColor;
transform: rotate(45deg);
transform-origin: top center;
}

.center{
text-align: center;	
}

h2{
text-align: center;
margin-bottom: 50px;
}

h3{
color: #fb467d;
text-align: center;
}

hr{
margin: 30px 0;
}

/* main_area */

.main_area{
/* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background: url("../images/img_main_mv_pc.jpg") 0 no-repeat #161616;
background-size: contain;
position:relative;
padding-top: 62.5%;
width:100%;
margin-top: 0;
margin-bottom: 100px;
z-index: 1;
}

.main_area_inner{
position:absolute;
top: 0px;
width:100%;
}

.img-main-01{
position: absolute;
left:52%;
width:47%;
margin-top:7%;
z-index:0;
opacity : 0;
transform : translate(50, 0px);
transition : all 1000ms;
}

.img-main-01.act{
opacity : 1;
transform : translate(0, 0);
}

.img-main-02{
position: absolute;
left:56%;
width:41%;
margin-top:27%;
z-index:0;
opacity : 0;
transform : translate(50px, 0px);
transition : all 1000ms;
}

.img-main-02.act{
opacity : 1;
transform : translate(0, 0);
}

.m_txt{
text-align: center;
width: 98%;
margin: auto 1%;
}

/* area_01 */

.area_01{
width: 100%;
margin: 100px auto;
margin-top: -100px;
padding-top: 100px;
padding-bottom: 150px;
position:relative;
background-color: #161616;
}

.area_01 .bg-01{
position: absolute;
left:0%;
width:20%;
margin-top:-13%;
z-index:0;
}

.area_01 .bg-02{
width:75%;
margin-left:25%;
margin-top:4%;
z-index:0;
}

/* area_02 */

.area_02{
width: 100%;
margin-top: -100px;
padding-top: 100px;
padding-bottom: 200px;
}

.area_02_inner{
width: 1000px;
margin: 0 auto;
}

.area_02 .info-table{
margin-bottom: 100px;
background-color: rgba(255,255,255,0.7);
border: solid 1px #000;
border-radius: 50px;
padding: 5% 10%;
}

.area_02 table{
width: 100%;
color: #000;
}

.area_02 table th{
width: 30%;
border-right: solid 1px #000;
color: #161616;
}

.area_02 table td{
width: 70%;
padding: 2% 5%;
}

.area_02 a{
color: #fb467d;
}

/* area_03 */

.area_03{
width: 100%;
margin-top: -100px;
padding-top: 100px;
background-color: #161616;
position: relative;
}

.area_03_inner{
width: 1000px;
margin: 0 auto 100px;
}

.bg-03{
background-image: url(../images/cast_bg_01.png),url(../images/cast_bg_02.png);
background-position: -5% 10%,115% 110%;/*表示する位置*/
background-size: 35%,50%;/*背景画像の大きさ*/
background-repeat: no-repeat,no-repeat;/*画像が繰り返すのを防ぐ*/
animation: blink linear infinite 2s;
}

ul.cast_list{
margin: 50px auto;
padding-left: 0;
}

ul.cast_list li{
width: 30%;	
margin-right: 5%;
margin-bottom: 50px;
list-style: none;
float: left;
}

ul.cast_list li:nth-child(3n){
margin-right: 0;
}

ul.sns_list{
width: 100%;
margin: 20px 27.5%;
padding-left: 0;
}

ul.sns_list li{
width: 10%;	
margin-right: 4.5%;
margin-bottom: 50px;
list-style: none;
float: left;
}

ul.sns_list li:last-child{
margin-right: 0;
}

ul.sns_list_01{
width: 100%;
margin: 20px 45%;
padding-left: 0;
}

ul.sns_list_01 li{
width: 10%;	
margin-bottom: 50px;
list-style: none;
float: left;
}

ul.sns_list_02{
width: 100%;
margin: 20px auto;
padding-left: 0;
}

ul.sns_list_02 li{
width: 10%;	
margin: 0 4.5% 50px 36.5%;
list-style: none;
float: left;
}

ul.sns_list_02 li:last-child{
margin: 0 36.5% 50px 0;
}



/* area_04 */

.area_04{
width: 100%;
padding-top: 100px;
padding-bottom: 100px;
}

.area_04_inner{
width: 1000px;
margin: 0 auto 100px;
}

.area_04 .schedule-table{
margin-bottom: 150px;
background-color: rgba(255,255,255,0.7);
border: solid 1px #000;
border-radius: 50px;
padding: 5% 10%;
}

.area_04 .schedule-table table{
width: 100%;
color: #000;
}

.area_04 .schedule-table table th{
width: 30%;
color: #fff;
}

.area_04 .schedule-table table th p{
background-color: #fb467d;
border-radius: 50px;
padding: 10px 0;
}

.area_04 .schedule-table table td{
width: 70%;
padding: 2% 5%;
}

.area_04 .schedule-table a{
color: #fb467d;
}

/* area_05 */

.area_05{
width: 100%;
margin-top: -100px;
padding-top: 100px;
background-color: #161616;
padding-bottom: 100px;
}

.area_05_inner{
width: 1000px;
margin: 0 auto 100px;
}

.bg-05{
background-image: url(../images/ticket_bg_01.png),url(../images/ticket_bg_02.png);
background-position: -5% 10%,115% 105%;
background-size: 35%,50%;
background-repeat: no-repeat,no-repeat;
animation: blink linear infinite 2s;
}

.area_05 .ticket_box .thd{
width: 100%;
background-color: #fb467d;
color: #fff;
font-weight: bold;
font-size: 1.4em;
border-radius: 50px 50px 0px 0px;
text-align: center;
padding: 30px 0;
margin:50px 0 0;
}

.area_05 .ticket_box a{
color: #fb467d;
}

.area_05 .ticket_box.red .thd{
background-color: #f93c3c;
}

.area_05 .ticket_box .tdate{
background-color: #fff;
border: solid 2px #fb467d;
border-radius: 0px 0px 50px 50px;
margin:0 0 50px;
text-align: center;
padding: 30px 0;
color: #2F2F2F;
font-size: 1.5em;
font-weight: bold;
}

.area_05 .ticket_box .red_txt{
color: red;
font-size: 0.9em;
text-align: center;
margin: 3%;
}

.area_05 .ticket_box.red .tdate{
border: solid 2px #f93c3c;
}

.ticket-btn {
cursor: pointer;
transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
background: #fb467d;
border: 2px solid #fb467d;
border-radius: 60px;
color: #fff;
display: block;
font-weight: bold;
max-width: 40%;
padding: 15px 40px;
margin: 30px 30%;
}

.ticket-btn.red {
background: #f93c3c;
border: 2px solid #f93c3c;
}

.ticket-btn.press {
box-shadow: 0 4px 0 #c93864; 
text-align: center;
}

.ticket-btn.red.press {
box-shadow: 0 4px 0 #c43535; 
}

.ticket-btn.press:hover {
transform: translateY(4px);
box-shadow: none;
}

.ticket-btn.press a {
text-decoration: none;
color: #fff;
}

/* area_06 */

.area_06{
width: 100%;
padding-top: 100px;
padding-bottom: 100px;
}

.area_06_inner{
width: 1000px;
margin: 0 auto 100px;
}

.area_06{
color: #000;
}

.area_06 a{
color: #fb467d;
}

.movie-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:0 0 50px;
}

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

/* area_07*/

.area_07{
width: 100%;
margin-top: -100px;
padding-top: 100px;
background-color: #161616;
padding-bottom: 100px;
}

.area_07_inner{
width: 1000px;
margin: 0 auto 100px;
}

.area_07 .bonus_box .bhd{
width: 100%;
background-color: #fb467d;
color: #fff;
font-weight: bold;
font-size: 1.4em;
border-radius: 50px 50px 0px 0px;
text-align: center;
padding: 30px 0;
margin:50px 0 0;
}

.area_07 .bonus_box .btxt{
background-color: #fff;
border: solid 2px #fb467d;
border-radius: 0px 0px 50px 50px;
margin:0 0 50px;
text-align: center;
padding: 30px 0;
color: #fb467d;
font-size: 1.5em;
font-weight: bold;
}

.area_07 p{
text-align: center;
}

/* .bg-07{
background-image: url("../images/goods_bg.jpg");
background-position: bottom;
background-repeat: repeat-x;
} */

.cs{
text-align: center;
font-size: 2.4em;
font-weight: bold;
padding: 50px 0;
}

/* area_08 */

.area_08{
width: 100%;
padding-top: 100px;
padding-bottom: 200px;
}

.area_08_inner{
width: 1000px;
margin: 0 auto;
}

.area_08 .info-table{
margin-bottom: 100px;
background-color: rgba(255,255,255,0.7);
border: solid 1px #000;
border-radius: 50px;
padding: 5% 10%;
}

.area_08 table{
width: 100%;
color: #000;
}

.area_08 table th{
width: 30%;
border-right: solid 1px #000;
color: #161616;
}

.area_08 table td{
width: 70%;
padding: 2% 5%;
}

.area_08 a{
color: #fb467d;
}

.area_08 p{
color: #000;
margin: 0;
}

.area_08 iframe{
margin: 50px auto;
}

/* area_09 */

.area_09{
width: 100%;
margin-top: -100px;
padding-top: 100px;
background-color: #161616;
padding-bottom: 100px;
}

.area_09_inner{
width: 1000px;
margin: 0 auto;
}

.accordion {
max-width: 100%;
margin-bottom: 7px;
background-color: #fb467d;
border-radius: 25px;
}

.accordion summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 1em 2em;
color: #fff;
font-weight: 600;
cursor: pointer;
}

.accordion summary::-webkit-details-marker {
display: none;
}

.accordion summary::before,
.accordion summary::after {
width: 3px;
height: .9em;
border-radius: 5px;
background-color: #fff;
content: '';
}

.accordion summary::before {
position: absolute;
right: 2em;
rotate: 90deg;
}

.accordion summary::after {
transition: rotate .3s;
}

.accordion[open] summary::after {
rotate: 90deg;
}

.accordion p {
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 2em 1.5em;
color: #fff;
transition: transform .5s, opacity .5s;
}

.accordion[open] p {
transform: none;
opacity: 1;
}

.inquiry{
text-align: center;
margin: 100px 0 0;
}

.inquiry a{
color: #ff477f;
text-decoration: none;
}

/* footer */

footer{
border-top: solid 2px #ff477f;
padding: 30px 0;
background-color: #161616;
}

.footer_inner{
width: 1200px;
margin: 0 auto;
position: relative;
}

ul.list_notes{
padding: 0;
list-style: none;
font-size: 0.5em;
text-align: left;
font-weight:500;
margin: 3% 5%;
}

ul.list_notes li{
text-indent: -1em;
padding-left: 1em;
}

ul.list_notes_schedule{
padding: 0;
list-style: none;
font-size: 0.8em;
font-weight:500;
margin: 3% 0;
color: #000;
}

ul.list_notes_schedule li{
text-indent: -1em;
padding-left: 1em;
}

ul.list_t_schedule{
padding: 0;
list-style: none;
text-align: left;
font-size: 0.6em;
font-weight:500;
margin: 3% 0;
color: #000;
margin: 3% 5%;
}

/*tickettop */

#tickettop {
position: fixed;
bottom: 10px;
right: 10px;
z-index: 1000;
line-height: .1;
cursor: pointer;
}

#tickettop {
display: none;
}

/*1200*/

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

/* area_02 */

.area_02_inner{
width: 94%;
margin: 0 3% 0px;
padding-top: 0;
}

/* area_03 */

.area_03_inner{
width: 94%;
margin: 0 3% 0;
padding-top: 0;
}

.bg-03{
background-image: none;
}

.bg-05{
background-image: none;
}

.bg-07{
background-image: none;
}

/* area_04 */

.area_04{
padding-top: 0;
}

.area_04_inner{
width: 94%;
margin: 100px 3% 0px;
}

/* area_05 */

.area_05_inner{
width: 94%;
margin: 0px 3% 0px;
padding-top: 0;
}

.area_05 .ticket_box .thd{
padding: 30px 0;
margin:50px 0 0;
}

.area_05 .ticket_box .tdate{
margin:0 0 100px;
padding: 30px 0;
font-size: 1.5em;
}

.ticket-btn {
max-width: 60%;
padding: 15px 40px;
margin: 30px 20%;
font-size: 0.8em;
}

/* area_06 */

.area_06_inner{
width: 94%;
margin: 0px 3% 0px;
padding-top: 0;
padding-bottom: 100px;
}	

/* area_07 */

.area_07_inner{
width: 94%;
margin: 0px 3% 0px;
padding-top: 0;
padding-bottom: 0;
}

.area_07 .bonus_box .bhd{
padding: 30px 0;
margin:50px 0 0;
}

.area_07 .bonus_box .btxt{
margin:0 0 100px;
padding: 30px 0;
font-size: 1.5em;
}

/* area_08 */

.area_08_inner{
width: 94%;
margin: 0 3% 0px;
padding-top: 0;
}

/* area_09 */

.area_09_inner{
width: 94%;
margin: 0 3% 0px;
padding-top: 0;
}

.footer_inner{
width: 94%;
margin: 0 3%;
}
}

/*950*/

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

.main_area{
margin-top: 56px;
}

}

/*SP*/

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

body{
font-size: 0.9em;
}

.pc{display:none;}
.sp{display:block;}

.main_area{
padding-top: 156.25%;
background: url("../images/img_main_mv_sp.jpg") 0 no-repeat #161616;
background-size: contain;
position:relative;
margin-bottom: 100px;
}

.img-main-01{
position: absolute;
left:-3%;
width:100%;
margin-top:76%;
z-index:1;
opacity : 0;
transform : translate(50, 0px);
transition : all 1000ms;
}

.img-main-01.act{
opacity : 1;
transform : translate(0, 0);
}

.img-main-02{
position: absolute;
left:-1%;
width:100%;
margin-top:115%;
z-index:0;
opacity : 0;
transform : translate(0px, 50px);
transition : all 1000ms;
}

.img-main-02.act{
opacity : 1;
transform : translate(0, 0);
}

h2 img{
width: 100%;
}

.m_txt{
margin-bottom: 30px;
}

/* area_01 */

.area_01{
padding-bottom: 50px;		
}

.area_01-inner{
width: 94%;
margin: 100px 3% 100px;
margin: -100px auto 100px;
padding-top: 100px;
position:relative;
}

.area_01 .bg-01{
position: absolute;
left:0%;
width:20%;
margin-top:3%;
z-index:0;
}

.area_01 .bg-02{
width:77%;
margin-left:24%;
margin-top:11%;
z-index:0;
}

/* area_02 */

.area_02 .info-table{
margin-bottom: 50px;
padding: 5% 5%;
}

.area_02 table th{
width: 30%;
}

.area_02 table td{
width: 70%;
padding: 3% 5%;
}

/* area_03 */

ul.cast_list li{
width: 48%;
margin-right: 4%;
margin-bottom: 20px;
}

ul.cast_list li:nth-child(3n){
margin-right: 4%;
}

ul.cast_list li:nth-child(2n){
margin-right: 0;
}

ul.sns_list{
width: 100%;
margin: 20px 27.5%;
padding-left: 0;
}

ul.sns_list li{
width: 10%;
margin-right: 7.5%;
margin-bottom: 50px;
}

ul.sns_list li:nth-child(2n){
margin-right: 7.5%;
}

ul.sns_list li:nth-child(3n){
margin-right: 0;
}	

ul.sns_list_01{
width: 100%;
margin: 20px 45%;
padding-left: 0;
}

ul.sns_list_01 li{
width: 10%;	
margin-bottom: 50px;
}

ul.sns_list_02{
width: 100%;
margin: 20px auto;
padding-left: 0;
}

ul.sns_list_02 li{
width: 10%;	
margin: 0 7.5% 50px 36.25%;
}

ul.sns_list_02 li:last-child{
margin: 0 36.25% 50px 0;
}

/* area_04 */

.area_04 .schedule-table{
margin-bottom: 150px;
padding: 5% 5%;
}

.area_04 .schedule-table table th{
width: 35%;
}

.area_04 .schedule-table table td{
width: 65%;
padding: 3% 5%;
}

/* area_05 */

.area_05 .ticket_box .thd{
padding: 15px 0;
margin:50px 0 0;
}

.area_05 .ticket_box .tdate{
margin:0 0 50px;
padding: 15px 0;
font-size: 1.2em;
}

.ticket-btn {
max-width: 80%;
padding: 15px 40px;
margin: 30px 10%;
font-size: 0.8em;
}

/* area_07 */

.area_07 .bonus_box .bhd{
padding: 15px 0;
margin:50px 0 0;
}

.area_07 .bonus_box .btxt{
margin:0 0 50px;
padding: 15px 0;
font-size: 1.2em;
}	

/* area_08 */

.area_08 .info-table{
margin-bottom: 50px;
padding: 5% 5%;
}

.area_08 table th{
width: 30%;
}

.area_08 table td{
width: 70%;
padding: 3% 5%;
}

#tickettop {
width: 25%;
}

a img{
transition:none;
}

a img:hover{
opacity: 100%;
}

}

.cast_txt{
text-align: center;
min-height: 24%;
}

@media screen and (max-width: 1200px) {
.cast_txt{
text-align: center;
min-height: 20%;
}
}

@media screen and (max-width: 850px) {
.cast_txt{
text-align: center;
min-height: 25%;
}
}

@media screen and (max-width: 765px) {
.cast_txt{
text-align: center;
min-height: 25%;
}
}

@media screen and (max-width: 500px) {
.cast_txt{
text-align: center;
min-height: 28%;
}
}

@media screen and (max-width: 400px) {
.cast_txt{
text-align: center;
min-height: 27%;
}
}

.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10000;
background-color: #fb467d;
display: flex;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2.5s forwards;
}

@keyframes fadeOut {
0% {
opacity: 1;
}

100% {
opacity: 0;
visibility: hidden;
}
}

.loading__logo {
opacity: 0;
animation: logo_fade 2s 0.5s forwards;
width: 300px;
}

@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}

60% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 0;
}
}

/* xxx */

.xxx{
width: 100%;
background-color: #161616;
padding-top: 3000px;
padding-bottom: 150px;
text-align: center;
transition: opacity 0.3s ease;
}

.xxx img{
opacity: 1;
transition: opacity 1.3s ease-in-out;
}