@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600&display=swap');
@import url('//fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Noto+Sans+JP:wght@400;600&display=swap');
body {
font-family:'Shippori Mincho B1', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', YuMincho, '游明朝', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif;
  font-weight: 500;
    color: #eee;
    font-size: 1em;
    line-height: 1.75;
    word-wrap: break-word;
    overflow-y: scroll;
    overflow-x: hidden;

        width: 100%;
        /*height: 100vh;*/
    background:  #0c0c0c;
    background-repeat: no-repeat;
    background-size: cover;
    background-position:top center;
    background-attachment: fixed;
    z-index: -1;
}



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

} /**/





/* Loading　*/
#splash {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #000;
    text-align: center;  color:#fff;

}
#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#splash_logo svg {
width: 150px;

}

@media screen and (max-width: 992px) {
#splash_logo svg {


}
}/**/

/*========= SVG ===============*/
#mask .st0 {
    fill: none;
    stroke: #fff;
    stroke-width: 100; /*線の太さを指定する*/
 stroke-miterlimit: 10;
    stroke-dasharray: 1500; /* 線の間隔を指定する */
    stroke-dashoffset: 1500; /* 線の位置を指定する */
}

/*画面遷移*/
.splashbg {
   display: none;
    position: fixed;
    transform: scale(100);
    background-color: #682888; /*伸びる背景色の設定*/
    z-index: 999;
    
    
}
body.appear .splashbg {
    display: block;
    animation-name: PageAnime;
    animation-fill-mode: forwards;
}
@keyframes PageAnime {
    0% { /*丸のスタート位置と形状*/
        transform: scale(100);
    }
    100% { /*丸の終了位置と形状*/
        transform: scale(0);
        display: none; /*終了時は消える*/
    }
}


/* ------------
* common 
 ------------ */
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    color: #333;
    outline: none;
    text-decoration: none;
}
a:hover, a:active {
    text-decoration: none;
}
*:focus {
    outline: none;
}
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}
a:hover img {
 filter: drop-shadow(3px 3px 5px #000);
}
.text-center {
    text-align: center;
    margin: 0 auto;
}
.text-left {
    text-align: left;
    margin: 0;
}
.text-right {
    text-align: right;
    margin: 0;
}

::selection {   
  background-color: #cd001a;
}


span.red {
 
    background:linear-gradient(transparent 60%, #ac1011 60%);
 
}


p {
    text-align: justify;
    line-height: 2;
    letter-spacing: 0.05rem;
}
#wrapper {
    width: 100%;
    overflow: hidden;
    z-index: 4;
}
main {
    width: 100%; 
}
#particles-js {
    position: absolute; /*描画固定*/
    z-index: 1; /*描画を一番下に#wrapperはz-index: 4;*/
    width: 100%;
    min-height: 100%;
}


figcaption{font-size: 0.8em;
    color: #999;padding:0.3em;
}


/* ------------
 * font-family
 ------------ */
h3{font-family: 'Shippori Mincho B1', 'ヒラギノ明朝 ProN W3', 'HiraMinProN-W3', YuMincho, '游明朝', 'ＭＳ Ｐ明朝', 'MS PMincho', 'MS 明朝', serif;}

h2, .al,.button-arrow, .button-more, .copyright, #g-nav-list,.title-alname,.entry-date,footer .footer{
font-family: "Libre Caslon Display", serif;
}

p{font-family: "Noto Sans JP", sans-serif;}



h2 {
    text-transform: uppercase;
    font-size: 2.4rem;
    margin: 0 auto;
    padding:30px 0 ;
    text-align: center;
    max-width: 600px;
    line-height: 1;
    font-weight: 400;letter-spacing: 0.2em;
    background-position: 50% 0;
    animation-name: skeleton;
    animation-timing-function: linear;
    animation-duration: 10s;
    animation-iteration-count: 5;
}
h2 span {
    display: block;
    font-size: 0.8rem;
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 400;
}
@keyframes skeleton {
    0% {
        background-position: 50% 0;
    }
    33.3% {
        background-position: 60% 0;
    }
    66.6% {
        background-position: 50% 0;
    }
}


/* ------------------------------------------------------------------- 
 * responsive:
 * h2
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
header{padding-top: 70px;}
    
    
    h2 {font-size: 2rem;
        line-height: 1.2;
        font-weight: 900;
    }
}/*end*/


/* ------------------------------------------------------------------- 
 * top 8d1e24
 * ------------------------------------------------------------------- */
#top {
    position: relative;
    width: 100%;
    overflow: hidden;
}
#top.active {
    opacity: 1;
}
#top .bg_mc {
    width: 100%;
    max-width: 100%;
    margin: auto;
    text-align: center;
    overflow: hidden;
    position: relative;
   
}
#top .title {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    /*filter: drop-shadow(0px 0px 30px rgba(22, 22, 22, 0.9)) drop-shadow(0px 0px 2px rgba(22, 22, 22, 0.8));*/
}
#top .bg_mc img{
   /*animation: flicker-1 5s 3;*/
}

h1{margin: 0;padding: 0;}


#top .copy {
    position: absolute;
    left: 0%;
   width: 100%;
    top: 0;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * top
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    #top {
        width: 100%;
        height: 100%;
    }
    #top .bg_mc {
        max-width: 100%;
    }
    #top .title {
  
    }
    #top .copy {
  
    }
} /*end*/
@keyframes blurblur {
    0% {
        filter: blur(30px);
        transform: scale(1.2);
    }
    66.6% {
        filter: blur(0);
        transform: scale(1);
    }
    100% {
        filter: blur(0);
        transform: scale(1);
    }
}
@keyframes fadeup {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes flicker- {
    0%, 100% {
        opacity: 1;
    }
    41.99% {
        opacity: 1;
    }
    42% {
        opacity: 0;
    }
    43% {
        opacity: 0;
    }
    43.01% {
        opacity: 1;
    }
    47.99% {
        opacity: 1;
    }
    48% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    49.01% {
        opacity: 1;
    }
}

@keyframes flicker-1 {
  0% {
    transform: none;
  }
  44% {
    transform: none;
  }
  44.3% {
    transform: skewX(6deg);
  }
  44.6% {
    transform: skewX(-6deg);
  }
  44.8% {
    transform: none;
  }
  66% {
    transform: none;
  }
  66.2% {
    transform: skewX(8deg);
  }
  66.4% {
    transform: skewX(-8deg);
  }
  66.6% {
    transform: none;
  }
  80% {
    transform: none;
  }
  80.2% {
    transform: skewX(40deg);
  }
 80.4% {
    transform: skewX(-40deg);
  }
  80.6% {
    transform: none;
  }
  96% {
    transform: none;
  }
  96.2% {
    transform: skewX(6deg);
  }
  96.4% {
    transform: skewX(-6deg);
  }
  96.6% {
    transform: none;
  }
}

/* ------------------------------------------------------------------- 
 * topics
 * ------------------------------------------------------------------- */
#topics {  
    margin: 0 auto;
    padding: 50px 0;
}
.topics-content {
    padding: 0 0 0;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
    text-align: center;
}

#topics h2{  
max-width:300px;
}
.topics-L {
    width: 20%;vertical-align: top; 
}
.topics-R {
    width: 60%;
}
#homenews {
    width: auto;
    margin-top: 30px;
    min-height: 280px; /*218px;*/height:auto;
    overflow: auto;
    padding: 0;
}
#feed ul.entry {display: block;text-align: left;
    padding: 15px 0;
    margin: 0;
 width: 100%;
    
}

#feed ul.entry li{border-bottom: 1px solid #999;}

#feed ul.entry li .entry-date {display: inline-block;min-width:80px;
    padding: 0;
    margin: 0 15px 0 0 ;
    color: #ac1011;
    text-align: left;
    line-height: 1.2;
}

#feed ul.entry li a, #feed ul.entry li a:visited {
    font-weight: 400;
    text-decoration: none;
    color: #333;
}
#feed ul.entryli a:hover, #feed ul.entry li a:focus {
    text-decoration: none;
    color: #ac1011;
}
.notice{line-height: 2;}

.notice a {
	display: flex;
    justify-content: space-between;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 80%;
	margin:1rem auto 0;
	padding: 0.5rem 4rem;
	font-weight: bold;
	color: #eee;
	position: relative;
	transition: 0.5s;border-bottom: 1px solid #666;
}
.notice a::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	right: 1em;
	transform: translateY(calc(-50% - 2px)) rotate(45deg);
	width: 10px;
	height: 1px;
	background: #eee;
}
.notice a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	width: 30px;
	height: 1px;
	background-color:#eee;
}

.notice a:hover::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	  right: 10px;
	transform: translateY(calc(-50% - 2px)) rotate(45deg);
	width: 10px;
	height: 1px;background: #ac1011;
}
.notice a:hover {
color:#ac1011;border-bottom: 1px solid #ac1011;
}
.notice a:hover::after {
    right: 10px;
    width: 30px;background-color:#ac1011;
}



.kokuchi-area {
    padding: 0px 0 30px;
    text-align: center;
    width: 90%;
    max-width: 1100px;
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto;
}
.kokuchi-L {
    width: 50%;
    padding: 0 20px 0 0;
}
.kokuchi-R {
    width: 50%;
    padding: 0;
}
.kokcuhi-img {
    width: 90%;
    max-width: 540px;
}
.kokcuhi-img a img:hover {
    opacity: 0.5;
    transition: 0.3s;
}




/* ------------------------------------------------------------------- 
 * responsive:
 * topics
 * ------------------------------------------------------------------- */
@media screen and (max-width:1240px) {

    
    #topics {
        width: 100%;
        max-width: 100%;    padding: 30px 0;
    }
    
    #topics h2{  
max-width:200px;
}
    
   .notice a {font-size: 0.8em;
	display: block;
	text-align:left;
	text-decoration: none;
	width: 96%;
	margin:1rem 0 0;
	padding: 0.5rem 3rem 0.5rem 0;
	font-weight: bold;
	color: #eee;
	position: relative;
	transition: 0.5s;border-bottom: 1px solid #666;
}
    
    
    .topics-content {
        padding: 5px 0 0;
        width: 100%;
        display: block;
        margin: 0 auto;
        text-align: center;
        max-width: 90%;
    }
    .topics-L {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .topics-R {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    #homenews {
        margin: 15px auto 0;
        padding: 0;
        min-width: 90%;
        min-height: 200px;
    }
    .entry {
        padding: 10px 0;
        display: block;
    }
    .entry-date {
        width: 100%;
    }
    .entry > h4 {
        width: 100%;
        font-size: 0.8em;
        line-height: 1.8;
    }
    

} /*end*/
@media screen and (max-width: 992px) {
    .kokuchi-area {
        display: block;
        padding: 15px 0;
        text-align: center;
        width: 90%;
        max-width: 540px;
        margin: 0 auto;
    }
    .kokuchi-L {
        width: 100%;
        padding: 0 0 20px 0;
    }
    .kokuchi-R {
        width: 100%;
    }
}
    


/* ------------------------------------------------------------------- 
 * topics Movie
 * ------------------------------------------------------------------- */
#topics-movie {
  padding:50px 0;
background-color: rgba(0,0,0,1);
}

#topics-movie h2 {
  color: #f5f5f5;
}

#topics-movie .videos {
  width: 100%;
  max-width: 90%;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
.col_1 {
  width: 100%;
  max-width: 944px;text-align: center;
  margin: 0 auto;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * topics Movie
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1240px) {
  #topics-movie {  background-size: 100%;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 0;
    text-align: center;   padding: 60px 0 80px;
  }
  iframe {
    width: 100%;
  }
  .col_1 {
    width: 100%;
    max-width: 96%;
    margin: 0 auto;
    text-align: center;
  }

} /*end*/


/* ------------------------------------------------------------------- 
 * intro
 * ------------------------------------------------------------------- */


#intro .intro-area{width: 100%;
    position: relative;
    display: flex;
   justify-content: flex-start;/*左寄せで配置*/
    flex-wrap: wrap;
    margin:0 auto ;z-index: 1;left: 0;
}

#intro h2{width:5%;
    position: absolute;right:0;z-index: 3;}


#intro .intro-area .img{
    width:65%;z-index: 1;margin: 0;padding: 0;
}

#intro .intro-area .content{
    width:35%;
    background:#0c0c0c;
color: #eee;
    position: relative;margin-left: -150px;
    top:200px;z-index: 2;padding:0;
}



#intro .intro-area .content .content-area{
    padding:0 50px; 
}

#intro .img h3{
width: 100%;
}


#intro .intro-area .content-area p{
     margin:0 0 15px 0;font-size: 0.9em;
}
#intro .intro-area .content-area p strong{
  background:linear-gradient(transparent 80%, #ad1326 80%);
}

.intro2 {
    width:100%;
  max-width:60%;margin:30px auto 60px;
}

#intro .intro2 .content{
    width:90%;margin:0 auto 60px;
}



/* ------------------------------------------------------------------- 
 * responsive:
 * intro
 * ------------------------------------------------------------------- */

@media screen and (max-width:992px) {
#intro .intro-area{position: initial;display: block;
}
  
#intro h2{width:10%;}
    
    
    #intro .intro-area .img{
    width:90%;
}
#intro .intro-area .content{position: initial;
  width:90%;
margin:0 auto; top:0;border: none;
}



    
#intro .intro-area .content .content-area{
    padding:30px 0; 
}


.intro2 {
  max-width:100%;margin:0 auto 30px;
}
}/**/



/* ------------------------------------------------------------------- 
 * story
 * ------------------------------------------------------------------- */


#story .story-area{width: 100%;
    position: relative;
    display: flex;
   justify-content: flex-start;/*左寄せで配置*/
    flex-wrap: wrap;
    margin:60px auto 200px 0;z-index: 1;left: 0;
}

#story  h2{width:5%;
    position: absolute;right:0;}

  



#story .story-area .img{
    width:65%;z-index: 1;margin: 0;padding: 0;
}

#story .story-area .content{
    width:35%;
    background:#0c0c0c;
color: #eee;
    position: relative;margin-left: -150px;
    top:200px;z-index: 2;padding:0 15px;
}

#story .story-area .content-area{
    padding:40px;   
}

#story .story-area .content-area h3{
     text-align: center;
    font-size: 1rem;
    margin: 0 0 30px 0;color: #0069A0;
}


#story .story-area .content-area p{
     margin:0 0 30px 0;font-size: 0.9em;
}
#story .story-area .content-area p strong{
  background:linear-gradient(transparent 80%, #ad1326 80%);
}

/* ------------------------------------------------------------------- 
 * responsive:
 * story
 * ------------------------------------------------------------------- */

@media screen and (max-width:992px) {
#story .story-area{position: initial;display: block;margin:  60px auto 30px;
}
#story h2{width:10%;}
      
#story .story-area .img{
    width:90%;
    z-index: 2;
}


#story .story-area .content{position: initial;
  width:90%;
margin:0 auto; 
}

#story .story-area .content-area{
    padding:30px 0;


}
}/**/


/* ------------------------------------------------------------------- 
 * comment
 * ------------------------------------------------------------------- */
#comment{
    padding: 60px 0;
}

#comment h2{  
max-width:380px;
}


.comment-area {

    width: 100%;
    max-width: 80%;
    padding: 0 0 50px;
    margin: 0 auto;
    text-align: center；
}
.comment-L {
    width: 60%;
    padding: 0;margin:auto;
 
}
.comment-R {
    width: 54%;
    padding:30px;margin:auto;
}

.comment-R h3{font-size:1.4em;}
.comment-R p{font-size:0.9em;}

    
    /* ------------------------------------------------------------------- 
 * responsive:
 * comment
 * ------------------------------------------------------------------- */

@media screen and (max-width:992px) {
#comment h2{  
max-width:240px;
}
.comment-area {


    max-width: 90%;
    padding: 0;

}
.comment-L {
    width: 100%;
    padding: 0;margin:auto;
 
}
    

.comment-R {
    width: 100%;
    padding: 0;margin:auto;
}
}/**/

    
    
    
/* ------------------------------------------------------------------- 
 * schedule
 * ------------------------------------------------------------------- */
#schedule {
    padding: 60px 0;
}
.ticket-area {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 80%;
    padding: 0 0 50px;
    margin: 0 auto;
    text-align: center；
}
.ticket-L {
    text-align: left;
    width: 60%;
    padding: 0 30px 0 60px;
 
}
    .ticket-area .place {
color: #cd001b;display: block;
    }

   .ticket-area h3 {font-size: 1.8rem;
    }

    .inquiry {

    }




.komidashi {
    
    padding: 3px 10px 2px;
    font-size: 0.9rem;
    margin: 0 auto;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * ticket
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
    #schedule {
        margin: 0 auto 0;
        padding: 0;
        text-align: center;
        width: 100%;
        max-width: 100%;
    }
    
    
        #schedule h2{
        margin:auto;
        width: 80%;
    }
    
    .ticket-area {
        display: block;
        width: 100%;
        max-width: 94%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
    }
    .ticket-area .place {
        font-size: 1.5rem;
    }
    .ticket-area h3 {
        font-size: 1.2rem;
    }
    .ticket-L {
        text-align: center;
        width: 100%;
        padding: 0;
        border-left: none;
    }
    .ticket-R {
        text-align: center;
        width: 100%;
        padding: 0;
    }
    .tokyo-sch, .osaka-sch {
        width: 100%;
        max-width: 100%;
    }
    .onsale {
        font-size: 1rem;
        padding: 0.2em 0;
        margin: 0 auto 1rem;
        text-align: center;
        width: 100%;
    }
.price ,.after{
    text-align: center;
}

    .inquiry {
        margin: 1em auto;
        text-align: center;
    }
    .pg-content {
        border: 1px solid #999;
        width: 100%;
        max-width: 94%;
        padding: 0 0 15px;
    }
    .pg-L {
        padding: 1em 0;
        font-size: 0.9em;
    }
    .pg-R {
        padding: 1em 0;
        font-size: 0.9em;
    }

} /*end*/


/*==================================================
矢印ボタンチケット PC
===================================*/
.button-ticket {
    font-size: 1em;
    font-weight: 600;
    display: inline-block;
    background: #55217b;
    color: #86cab6;
    width: 60%;
    max-width: 300px;
    padding: 10px 30px 10px 20px;
    text-align: center;
    margin: 0;
    border: 1px solid #86cab6;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    line-height: 1.4;
}
.button-ticket::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #63176f;
    border-bottom: 1px solid #63176f;
    transform: skew(45deg);
    transition: .3s;
}
.button-ticket:hover {
    background: #63176f;
    color: #ffff99;
}
.button-ticket:hover::after {
    right: 10px;
    width: 30px;
    border-right: 2px solid #deba82;
    border-bottom: 1px solid #deba82;
}
/*==================================================
チケットエリアの先行 PC
===================================*/
.button-preticket {
    font-size: 1.1em;
    font-weight: 600;
    display: inline-block;
    background: #f5f5f5;
    color: #deba82;
    width: 60%;
    padding: 10px 30px 10px 20px;
    text-align: center;
    margin: 0 0 20px;
    border: 1px solid #deba82;
    cursor: pointer;
    position: relative;
    text-decoration: none;

}
.button-preticket::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #deba82;
    border-bottom: 1px solid #deba82;
    transform: skew(45deg);
    transition: .3s;
}
.button-preticket:hover {
    background: #0f0f0f;
}
.button-preticket:hover::after {
    right: 10px;
    width: 30px;
    border-right: 2px solid #deba82;
    border-bottom: 1px solid #deba82;
}
/*==================================================
矢印ボタンキャスト
===================================*/
.button-arrow {
    font-size: 0.8rem;
    display: inline-block;
    width: 75%;
    max-width: 140px;
    padding: 5px 40px 4px 10px;
    text-align: center;
    color: #f5f5f5;
    margin: 8px 0 0 0;
    border: 1px solid #aaa;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.button-arrow::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 30px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #ccc;
    border-bottom: 1px solid #ccc;
    transform: skew(45deg);
    transition: .3s;
}
.button-arrow:hover {
    background: #f5f5f5;
    color: #333;
}
.button-arrow:hover::after {
    right: 10px;
    width: 20px;
}
/*==================================================
モアニュース
===================================*/
.button-more {
    font-weight: 600;
    display: inline-block;
    width: 200px;
    padding: 5px 30px 5px 20px;
    text-align: center;
    color: #ac1011;
    margin: 1rem 0;
    border: 1px solid #ac1011;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.button-more::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #ac1011;
    border-bottom: 1px solid #ac1011;
    transform: skew(45deg);
    transition: .3s;
}
.button-more:hover {
    background: #ddd;
    color: #ac1011;
}
.button-more:hover::after {
    right: 10px;
    width: 30px;
    border-right: 2px solid #333;
    border-bottom: 1px solid #333;
}
/*==================================================
劇場ボタンチケット
===================================*/
.halllink {
    text-align: right;
    max-width: 100%;
}
.button-hall {
    font-size: 0.6em;
    font-weight: 600;
    display: inline-block;
    width: 110px;
    padding: 2px 30px 2px 20px;
    text-align: center;
    color: #999;
    margin: 0;
    border: 1px solid #999;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.button-hall::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    right: 20px;
    width: 20px;
    height: 5px;
    border: none;
    border-right: 2px solid #999;
    border-bottom: 1px solid #999;
    transform: skew(45deg);
    transition: .3s;
}
.button-hall:hover {
    color: #cd001a; border: 1px solid #cd001a;
}
.button-hall:hover::after {
    right: 10px;
    width: 30px;
    border-right: 2px solid #cd001a;
    border-bottom: 1px solid #cd001a;
}
/* ------------------------------------------------------------------- 
 * responsive:
 * button
 * ------------------------------------------------------------------- */
/*==================================================
矢印ボタンチケット SP
===================================*/
@media screen and (max-width:992px) {
    .halllink {
        text-align: right;
        max-width: 100%;
    }
    .button-ticket {
        font-size: 0.9em;
        font-weight: 600;
        width: 80%;
        padding: 10px 30px 10px 20px;
    }
    .button-preticket {
        font-size: 0.9em;
        font-weight: 600;
        width: 80%;
        padding: 10px 30px 10px 20px;
    }
    .button-haraimodoshi {
        font-size: 0.9em;
        font-weight: 600;
        width: 80%;
        padding: 10px 30px 10px 20px;
    }
    .button-arrow {
        font-size: 0.8em;
        width: 70%;
    }
    .button-othervisual {
        padding: 5px 38px 5px 5px;
        font-size: 0.8em;
    }
} /**/
/*
---------------------------------------------
profile
---------------------------------------------
*/
.profilenote {
    background: #fff;
    background-image: url("https://www.yoidoretenshi-stage.jp/img/extra_clean_paper.png");
    background-repeat: repeat;
}
.profile-content {
    font-size: 1rem;
    position: relative;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: top;
    margin: 0 auto;
    text-align: center;
    max-width: 90%;
}
.profile-L {
    width: 25%;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}
.profile-L img {

}
.title-profilename {
    font-size: 2.1rem;
    line-height: 1.1;
    text-align: center;
    margin: auto;
    padding: 1rem 0 0;
}
.title-profilename span {
    font-size: 1rem;
    letter-spacing: 0.5rem;
}
.title-alname {
    font-size: 0.9rem;
    margin-bottom: 21px;
    letter-spacing: 0.1rem;
}
.title-profile {
    font-size: 0.8rem;
}
.profile-R {
    width: 65%;
    margin: 0 auto;
    padding: 2.3rem 6% 1rem 3%;
    text-align: center;
}
.profile-content h3 {
    font-size: 1.1em;
    color: #ccc;
    text-align: left;
    line-height: 1.8em;
    padding: 0.8em 0 0.2em 0;
    margin: 0;
}
.profile-content p {
    text-align: left;
    letter-spacing: 0.03rem;
    padding: 0;
    margin: 0;
}
p.comment-txt {
    text-align: justify;
    margin-bottom: 1em;
}
p.profile-txt {
    font-size: 0.85rem;
    line-height: 1.4rem;
    text-align: justify;
}
p.comment-midashi{margin:0 auto 1em;text-align: center;}
p.profile-midashi{margin:0 auto 0.2em;text-align: center;}
.comment-midashi img,.profile-midashi img{width: 120px;}


/* ------------------------------------------------------------------- 
 * responsive:
 * profile
 * ------------------------------------------------------------------- */
@media screen and (max-width:992px) {
.profilenote {position: absolute; z-index: 9;
    background: #fff;
    background-image: url("https://www.yoidoretenshi-stage.jp/img/extra_clean_paper.png");
    background-repeat: repeat;
} 
    
    
    .note {
        width: 100%;
        padding: 0;

    }

    .profile-content {display: block;
    width: 100%;
    max-width: 90%;margin: auto;
}
    
   .title-profilename {
    font-size: 1.8rem;
 
} 
    .profile-L {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 20px 0 40px;
    }
    
.profile-L img {width: 60%;

}
    
    .profile-R {
        width: 100%;
        padding: 0 0 20px;
    }

    .profile-content h3 {
        text-align: left;
        line-height: 1.8em;
        padding: 0;
        margin: 0.5em 0;
    }
} /*end*/

/*===========================================================*/
/*ナビ
/*===========================================================*/
#g-nav {
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position: fixed;
    z-index: -1;
    opacity: 0; /*はじめは透過0*/
    /*ナビの位置と形状*/
    top: 0;
    width: 100%;
    height: 100vh; /*ナビの高さ*/
    background-color: rgba(0, 0, 0, 0.9);
    background-size: cover;
    /*動き*/
    transition: all 0.3s;
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive {
    opacity: 1;
    z-index: 999;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh; /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
    display: none;
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
    display: block;
}
.nav-fix {
    position: fixed;
    top: 0;
    z-index: 999;
    padding: 0 0 0 10px;
    transition: 0.2s;
    opacity: 0;
}
.nav-fix img{width:130px;
}



#freepage .copyright {
    color: #ccc;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7em;
}
#freepage .noise {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
}
@media screen and (max-width: 1200px) {
    .nav-fix {
        display: none;
    }
} /*end*/
#g-nav-list {
    display: none;
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list {
    display: block;
}
/*ナビゲーション*/
#g-nav ul {
    opacity: 0;
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#g-nav.panelactive ul {
    opacity: 1;
    flex-wrap: wrap;
}
#g-nav.panelactive li {
    text-align: center;
    width: 100%;
}
#g-nav.panelactive li a {
    padding: 10px 0;
    color: #fff;
}


.tw-img {
    width: 30px;
}

.in-img {
   width: 30px;
}

.follow {
    text-transform: none;
    font-size: 0.7rem;
    display: flex;
    align-items: stretch;
    text-align: center;
    margin: auto;
    width: 150px;
    padding: 10px 0;
}

.follow li {
    width: 70px;
    height: 50px;
    padding: 8px 0 0;
    text-align: center;
    margin: auto;
}


/*===========================================================*/
/*左から右に線
/*===========================================================*/
@media screen and (min-width: 1200px) { /* 1200px以上の場合に適用 */
    .gnavi {
        width: 100%;
        max-width: 500px;
    }
} /*end*/
@media screen and (max-width: 992px) {
    #g-nav {}
    .gnavi {
        width: 100%;
        max-width: 90%;
    }
}
.gnavi {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 500;
    /*background-color:rgba(0,0,0,0.9);*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;
}
.gnavi a, .gnavi a:visited {
    display: block;
    padding: 10px 5px;
    color: #fffefb;
    /*background-color:rgba(255,39,98,1);*/
    /*background-color:rgba(0,0,0,1);*/
    text-decoration: none;
}
.gnavi {
    line-height: 1.2;
}
.gnavi span {
    display: block;
    font-size: 0.5rem;
}
.nav01d li a {
    /*線の基点とするためrelativeを指定*/
    position: relative;
}
.nav01d li.current a, .nav01d li a:hover {
    color: rgba(255, 255, 255, 1);
}
.nav01d li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 8px;
    left: 40%;
    /*線の形状*/
    width: 20%;
    height: 2px;
    background: rgba(255, 255, 255, 1);
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1); /*X方向0、Y方向1*/
    transform-origin: left top; /*左上基点*/
}
/*現在地の形状の設定*/
.nav01d li.current a::after {
    transform: scale(0.2, 1); /*X方向に0.2スケール拡大*/
}
/*現在地を含むhoverの設定*/
.nav01d li.current a:hover::after, .nav01d li a:hover::after {
    transform: scale(1, 1); /*X方向にスケール拡大*/
}
/*===================================
/* 順番に現れる（CSS）
===================================*/
.nav01d li:nth-of-type(1) {
    animation-delay: .2s;
}
.nav01d li:nth-of-type(2) {
    animation-delay: .4s;
}
.nav01d li:nth-of-type(3) {
    animation-delay: .4s;
}
.nav01d li:nth-of-type(4) {
    animation-delay: .6s;
}
.nav01d li:nth-of-type(5) {
    animation-delay: .6s;
}
.nav01d li:nth-of-type(6) {
    animation-delay: .8s;
}
.nav01d li:nth-of-type(7) {
    animation-delay: .8s;
}
.nav01d li:nth-of-type(8) {
    animation-delay: 1s;
}
/*FOLLOW*/
.nav01d li:nth-of-type(9) {
    animation-delay: 1s;
}
.nav01d li:nth-of-type(10) {
    animation-delay: 1s;
}
.nav01d li:nth-of-type(11) {
    animation-delay: 1s;
}
.nav01d li:nth-of-type(12) {
    animation-delay: 1s;
}
/*===================================
×
===================================*/
/*ボタン外側*/
.openbtn {
    position: fixed;
    display: block;
    top: 15px;
    right: 15px;
    z-index: 9999; /*ボタンを最前面に*/
    cursor: pointer;
    width: 60px;
    height: 40px;
    /*background: #666;*/
}
/*ボタン内側*/
.openbtn span {
    display: inline-block;
    transition: all .4s; /*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    background: #fff;box-shadow: 3px 2px 2px #ac1011;
}
.openbtn span:nth-of-type(1) {
    top: 15px;
    width: 75%;
}
.openbtn span:nth-of-type(2) {
    top: 22px;
    width: 75%;
    /*background: #666;*/
}
.openbtn span:nth-of-type(3) {
    top: 29px;
    width: 75%;
}
/*activeクラスが付与されると線が回転して×になる*/
.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-135deg);
    width: 70%;
}
.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(135deg);
    width: 70%;
}

/*===================================
FOOTER
===================================*/



footer .footer {width: 100%;background: #000;
    overflow: hidden;
    padding: 60px 0;

}
footer .footer .footer_logo {
    max-width:400px;
    margin: 60px auto 30px;
}



    footer .staff-credit {
        color: #ccc;
        margin: 0 auto;
        text-align: center;
        font-size: 0.8em;
    }
    footer .copyright {
        color: #ccc;
        margin: 0 auto;
        text-align: center;
        font-size: 0.8em;
    }

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

    footer .footer {position: absolute;
        padding: 60px 0;
    }
    

    footer .footer .footer_logo {
        width: 50%; 
    }

} /*end*/

/*===================================
ANIme
===================================*/

.fadeIn {
    opacity: 0;
    transition: 1s;
    transform: translateY(0px);
}
.fadeIn.is-inview {
    transform: translateY(0);
    opacity: 1;
}
.fadeInUp {
    opacity: 0;
    transition: 1s;
    transform: translateY(20px);
}
.fadeInUp.is-inview {
    transform: translateY(0);
    opacity: 1;
}
.blurUp {
    opacity: 0;
    transition: 1s;
    filter: blur(30px);
    transform: scale(1.2);
}
.blurUp.is-inview {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}
.blurUpLeft {
    opacity: 0;
    transition: 1s;
    filter: blur(50px);
    clip-path: inset(5%);
}
.blurUpLeft.is-inview {
    opacity: 1;
    clip-path: inset(0%);
    filter: blur(0);
    transform: scale(1);
}
.clipDown {
    opacity: 0;
    transition: 1s;
    clip-path: inset(0% 0% 100% 0);
}
.clipDown.is-inview {
    clip-path: inset(0%);
    opacity: 1;
}

.fadeInRight{
  opacity: 0;
 transition: 2s;transform: translateX(30%);
}
.fadeInRight.is-inview {
  opacity: 1;
transform: translateX(0);
}


.fadeInLine{width: 100%;
  opacity: 0;background: #cd001a;height:1px;
  transform: translate(-100%, 0);
  transition: 1s;
}
.fadeInLine.is-inview{
  transform: translate(0, 0);
  opacity: 1;
}


    
/* ------------------------------------------------------------------- 
 * overlay banner
 * ------------------------------------------------------------------- */
.foot-kokuchi img {
    width: 130px;
    height: 133px;
}
.foot-kokuchi-img {
    width: 100%;
}
.foot-adjust {
    padding-left: 30px;
}
.fix-pc {
    position: fixed;
    animation-name: fadey_bottom_start;
    animation-duration: 9s;
    z-index: 998;
    left: 0;
    bottom: 0;
}
.fix-pc-wrap {
    margin: 0;
    line-height: 1;
}
.fix-pc-wrap a {
    display: flex;
    position: relative;
    padding: 0.1rem 0 0;
    min-width: 160px;
    transition: 0.3s;
}
.fix-pc-wrap a:hover {
    opacity: 0.8;
    filter: alpha(opacity=80);
}
/* ------------------------------------------------------------------- 
 * responsive:
 * overlay banner
 * ------------------------------------------------------------------- */
@media screen and (max-width:1024px) {
    .foot-kokuchi img {
        width: 90px;
        height: 99px;
    }
    .foot-kokuchi-img {
        width: 90px;
    }
    .foot-adjust {
        padding-left: 0px;
    }
    .fix-sp {
        width: 100%;
        max-width: 200px;
        position: fixed;
        animation-name: fadey_bottom_start;
        animation-duration: 9s;
        z-index: 998;
        left: 0;
        bottom: 0;
    }
    .fix-sp-wrap {
        margin: 0;
        line-height: 1;
    }
    .fix-sp-wrap a {
        display: flex;
        position: relative;
        padding: 0.1rem 0 0;
        min-width: 90px;
        transition: 0.3s;
    }
    .fix-sp-wrap a:hover {
        opacity: 0.8;
        filter: alpha(opacity=80);
    }
} /*end*/
    
@keyframes fadey_bottom_start {
    0% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
/*-------------------------------------------------------------------*/


.kome {
    list-style: none;
    padding-left: 1.5em;
    margin-left: 0.5em;
}
.kome li {
    text-indent: -1.5em;
    line-height: 1.7;
}
.kome li:before {
    content: "※";
    margin-right: 0.5em;
}

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

.mt-1, .pt-1 {
    padding-top: 0.5em;
}
.mt-2, .pt-2 {
    padding-top: 1em;
}
.mt-3, .pt-3 {
    padding-top: 1.5em;
}
.mt-4, .pt-4 {
    padding-top: 2em;
}
.mt-5, .pt-5 {
    padding-top: 2.5em;
}
.mb-1, .pb-1 {
    padding-bottom: 0.5em;
}
.mb-2, .pb-2 {
    padding-bottom: 1em;
}
.mb-3, .pb-3 {
    padding-bottom: 1.5em;
}
.mb-4, .pb-4 {
    padding-bottom: 2em;
}
.mb-5, .pb-5 {
    padding-bottom: 2.5em;
}
/* ------------------------------------------------------------------- 
 * e.t.c
/*-------------------------------------------------------------------*/
.pc {
    display: block !important;
}
.sp {
    display: none !important;
}
/* ------------------------------------------------------------------- 
 * responsive:
 *  e.t.c
 * ------------------------------------------------------------------- */
@media screen and (max-width: 992px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: block !important;
    }
} /*end*/