@charset "utf-8";
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

 ■■■  ■                    ■                   
■     ■                    ■                   
■    ■■■■ ■ ■ ■   ■   ■■■ ■■■■ ■   ■  ■ ■  ■■■ 
 ■■   ■   ■■  ■   ■  ■■ ■  ■   ■   ■  ■■  ■  ■ 
  ■■■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■   ■
    ■ ■   ■   ■   ■  ■     ■   ■   ■  ■   ■■■■■
■   ■ ■   ■   ■  ■■  ■■    ■   ■  ■■  ■   ■    
■■■■  ■■  ■    ■■ ■   ■■■  ■■   ■■ ■  ■    ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; }
body{ font-size: 15px; color: #000; background:#ef3488; position: relative; } 

header,article,section,footer{ position: relative; width: 100%; display: block; }
.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }

.part-background{ position: absolute; height:100%; width: 100%; overflow: hidden; }
.part-header{ position: relative; }
.part-body{ position: relative; }
.part-footer{ position: relative; }

/* header */
.part-header{ width: 15em; position: absolute; top:0; /* left: calc( 50vw + 35em ); */ right:0; display: flex; flex-wrap: wrap; z-index: 100; }
.cont-global-header{ width: 100%; padding-top: 3em; }
.cont-header-logo{ width: 7.4em; margin: 0 auto 3em auto; }
.cont-header-menu{ height: 1.9em; line-height: 1; margin-bottom: 2em; text-align: center; background:url(../images/top-menu-marker.svg) no-repeat center bottom; background-size: .444em auto; }
.cont-header-menu > p{font-size: .733em; margin: 0;}
.part-header.w .cont-header-menu > p{ color: #FFF; }

.cont-global-navi{ width: 100%; position: relative; }
.global-navi{ position: relative; }
.global-navi > ul{ display: block; list-style-type: none; margin: 0; padding: 0; text-align: center; }
.global-navi > ul > li{ display: block; margin: 0; padding: 0; line-height: 1; margin-bottom: 1.666em; position: relative; }
.global-navi > ul > li a{ font-size: 1em; color: #000; text-decoration: none; position: relative; }
.part-header.w .global-navi > ul > li a{ color: #FFF;  }
.global-navi > ul > li:nth-child(4){ margin-bottom: 3.6em; }
.global-navi > ul > li:nth-child(5) img{ width: 1.333em; }
.global-navi > ul > li:nth-child(5) svg{ width: 1.333em; height: auto; fill: currentColor; }

.cont-sp-btn{ width: 100%; display: none; }

/* body */
.cont-upper{ position: relative; }

.cont-middle{ position: relative; }
.cont-title{ font-size: 1em; }
.cont-title > span{ display: block; font-size: 4.2em; line-height: 1; margin-bottom: .222em; }
.cont-title > span.jsbt{ font-size: 1em; }
.cont-title-sub{ font-size: 1em; text-align: center; }
.cont-title-sub span{ font-size: 1.733em; }

/* footer */
.part-footer{ }
.cont-global-footer{ width: 64%; max-width: 64em; margin: 0 auto; padding: 7.666em 0 0 0; position: relative;text-align: center; }
.footer-navi{ position: relative; margin-bottom: 6em; }
.footer-navi > ul{ display: flex; justify-content: center; list-style-type: none; margin: 0; padding: 0; text-align: center; }
.footer-navi > ul > li{ display: block; margin: 0; padding: 0; line-height: 1; margin: 0; }
.footer-navi > ul > li::after{ content:""; margin: 0 1em; display: inline-block; width: 2em; height: .35em; border-top: #000 solid 1px; }
.footer-navi > ul > li:last-child::after{ display: none; }
.footer-navi > ul > li a{ font-size: 1em; color: #000; text-decoration: none; display: inline-block; }
.footer-logo{ width: 28.1em; margin: 0 auto 5em auto; }
.footer-share{ position: relative; margin-bottom: 12.6em; }
.footer-share > ul{ display: flex; justify-content: center; align-items: center; list-style-type: none; margin: 0; padding: 0; text-align: center; }
.footer-share > ul > li{ display: block; margin: 0; padding: 0; line-height: 1; margin: 0 1.5em; }
.footer-share > ul > li:nth-child(2) img{ width: 1.333em;  }
.footer-share > ul > li:last-child img{ width: 0.633em; }

.footer-sponsor{ display: flex; justify-content: center; position: relative; }
.footer-sponsor > div:first-child{ width: 12.5em; margin-right: 3em; position: relative; }
.footer-sponsor > div:last-child{ width: 11.5em; position: relative;}

.footer-chara{ width: 13.166em; position: fixed; bottom: 0; right: -8.6em; z-index: 10000; transition: .2s all ease-in-out 0s; }
.footer-chara:hover{  right: -5.6em; }

.footer-copyrihgt{ width: 64%; max-width: 64em; margin: 0 auto; padding: 3.33em 0; text-align: center;  }
.footer-copyrihgt p{font-size: 1em; margin: 0; transform: scale(0.666, 0.666);transform-origin:left top 0; width: 150%; }
/* content */

.content-modal{ max-width: 920px; background-color: #FFF; border:#1f3c8c solid .333em ; border-radius: 2em; margin: 0 auto 1em auto; padding: 0; overflow: auto; }


.mouse-follower{
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0; 
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  z-index: 1000;
  transition: transform ease .1s;
  text-align: center;
  color: #ef3488;
  animation:mouse-follower 0.3s 0s ease-out backwards;
  display: none; 
}
.mouse-follower svg{ width: 100%; height: auto; fill: currentColor;}
.mouse-follower.l2{ display: none; opacity: 0;}
.mouse-follower.l3{ display: none; opacity: 0;}
.mouse-follower.l4{ display: none; opacity: 0;}
.mouse-follower.flw-no{ opacity: 0;}/* 無し */

.mouse-follower.flw-1{ color: #10cb77; mix-blend-mode: color;  }/* ピンク地：黒文字 メニュー */
/* .mouse-follower.flw-1.l2{ opacity: 1; color: #ef3488; mix-blend-mode: screen; display: flex;}  */
.mouse-follower.flw-1.l2{ opacity: 1; color: #ef3488; mix-blend-mode: screen; display: flex;} 
.mouse-follower.flw-1.l3{ opacity: 1; color: #fff; mix-blend-mode: overlay; display: flex; }
.mouse-follower.flw-1.l4{ opacity: 1; color: #d2abbd; mix-blend-mode: color-burn; display: flex; }


.mouse-follower.flw-2{ color: #ef3488; mix-blend-mode: darken;}/* 白地：黒文字 */
.mouse-follower.flw-3{ color: #ef3488; mix-blend-mode: lighten;}/* 黒地：白文字 */

.mouse-follower.flw-4{ color: #10cb77; mix-blend-mode: color; }/* ピンク地：黒文字 */
.mouse-follower.flw-4.l2{ opacity: 1; color: #ef3488; mix-blend-mode: screen; display: flex;} 
.mouse-follower.flw-4.l3{ opacity: 1; color: #fff; mix-blend-mode: overlay; display: flex; }
.mouse-follower.flw-4.l4{ opacity: 1; color: #d2abbd; mix-blend-mode: color-burn; display: flex; }




.mouse-follower.is-active {
  display: flex;
}
/* a.flw-4{ z-index: 50; position: relative; } */


/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

              ■                 ■                
■             ■  ■       ■      ■               ■
■             ■                 ■               ■
■  ■■■■    ■■■■  ■ ■   ■ ■   ■■■■  ■   ■  ■■■   ■
■  ■■  ■  ■■ ■■  ■  ■  ■ ■  ■■ ■■  ■   ■  ■  ■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■   ■■■  ■
■  ■   ■  ■   ■  ■  ■ ■  ■  ■   ■  ■   ■ ■■  ■  ■
■  ■   ■  ■■ ■■  ■   ■■  ■  ■■ ■■  ■  ■■ ■   ■  ■
■  ■   ■   ■■■■  ■   ■   ■   ■■■■   ■■ ■  ■■■■  ■

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Modal */
#Modal_data{ display: none; }

/* TOP-PAGE */
/* main */
.cont-top-visual{ width: 70%; max-width: 70em; margin: 0 auto; position: relative; }
.cont-top-visual .kv-container{ position: relative; }
.cont-top-visual .kv-container > div{ position: absolute; top:0; }
.cont-top-visual .kv-container .bg{ width: 100%; height: 62.666em; background-color: #f8f8f8; position: relative; }
.cont-top-visual .kv-container .vis{ width: 32.133em; top:inherit; bottom:0; right: 18.566em; }
.cont-top-visual .kv-container .vis2{ width: 26.966em; top:inherit; bottom:0; right: 0; }
.cont-top-visual .kv-container .catch{ width: 10.066em; left: -2.333em;}
.cont-top-visual .kv-container .catch .cat1{ width: 4.533em; position: absolute; right: 0; background-color: #000; }
.cont-top-visual .kv-container .catch .cat2{ width: 4.533em; position: relative; background-color: #000; }
.cont-top-visual .kv-container .catch .mask{ background-color: #000; width: 100%; line-height: 0; /* height: 100%; */ position: absolute; bottom:0; }
.cont-top-visual .kv-container .logo{ width: 18.7em; top:2.888em; right: .8em;}


.cont-top-visual .kv-container .logo{ animation:fade-in-down 0.6s .5s ease-out backwards;}
.cont-top-visual .kv-container .vis2{ animation:fade-in 1.0s .5s ease backwards;}
.cont-top-visual .kv-container .vis{ animation:vis 0.4s 1.4s ease-out backwards;}
.cont-top-visual .kv-container .catch{ animation:fade-in 0.3s 2.0s ease backwards;}
.cont-top-visual .kv-container .catch .cat1 .mask{ animation:catch-mask 1s 2.5s ease-out backwards;}
.cont-top-visual .kv-container .catch .cat2 .mask{ animation:catch-mask 1s 3.0s ease-out backwards; }

.inview{ animation:inview 0.4s .2s ease-out both paused; }
.inview-start{ animation:inview-start 0.4s .2s ease-out both running; }

.cont-top-sepmark{ width: 100%; position: relative; padding: 4em 0; }
.cont-top-sepmark > p{ display: block; width: 6.666em; margin: 0 auto; }

.cont-top-movie{ width: 19.333em; position: absolute; top:46.666em; /* left:calc( 50vw - 50em ); */ left: 0; z-index: 2; }
.movie-container{ position: relative; }
.movie-container a{ display: block; position: relative; overflow: hidden; }
.movie-container a:after{ content:""; width: 100%; min-height: 100%; background: url(../images/top-movie-mark.svg) no-repeat center center; background-size: 5.4em auto; position: absolute; top:0; left: 0; transition: .2s all ease-in-out 0s; }
.movie-container a:hover:after{ background-size: 5.4em auto; transform: scale(1.2, 1.2);transform-origin:center center 0; }

.cont-top-cr{ transform: rotate(90deg);transform-origin:left top 0; position: absolute; top:22.5em; /* left:calc( 50vw - 50em + 2.3em ); */ left:2.3em;  }
.cont-top-cr > p{ font-size: 1em; margin: 0; transform: scale(0.666, 0.666);transform-origin:left top 0; }

/* news */
.cont-top-news{ padding-bottom: 6.666em; }
.cont-top-news .cont-title{ position: absolute; top:2.333em; left: calc( 50vw - 35em ); }
.news-container{ width: calc( 49em + 2.666em + ( 50vw - 35em ) ); margin: 0 0 0 auto; padding: 2.666em 0 2.666em 2.666em; background-color: #f8f8f8; position: relative; }
.news-container ul{ width: 49em; display: block; list-style-type: none; margin: 0; padding: 0; }
.news-container ul > li{ display: block; background-color: #FFF; display: flex; margin-bottom: 5px; }
.news-container ul > li .th{ width: 14em; /* min-height: 7.867em; background: #d8d8d8 ; */ }
.news-container ul > li .txt{ width: calc(100% - 14em); padding: 1.7em 1.7em; }
.news-container ul > li .txt .date{ font-size: .866em; color: #ef3488; line-height: 1; margin-bottom: .6em; }
.news-container ul > li .txt .hdl{ margin-bottom: 0; }
.news-container ul > li .txt .hdl a{ color:#000; text-decoration: none; }
.news-more-btn{ display: block; line-height: 1; position: absolute; bottom:-4.1em; left:calc( 49em - 16em + 2.666em ); }
.news-more-btn span{ font-size: 1.266em; }
.news-more-btn a{ width: 16em; padding: 2.2em 0; display: block; background-color: #000; color: #FFF; text-align: center; text-decoration: none; }
.news-more-btn a:hover{ background-color: #FFF; color: #000; }

/* staffcast */
.cont-top-staffcast{ padding: 6.666em 0 2.8em 0; background-color: #f8f8f8; }
.cont-top-staffcast .cont-title{ position: relative; text-align: center; margin-bottom: 5.5em; }
.cont-top-staffcast .cont-title-sub{ margin-bottom: 3.833em; }
.staffcast-container{width: 64%; max-width: 64em; margin: 0 auto; position: relative;text-align: center;}
.staffcast-list > div{ margin-bottom: 3.833em; }
.staffcast-container p{ margin-bottom: 0; /* line-height: 1; */ }
.staffcast-container .pos{ margin-bottom: .5em;  }
.staffcast-container .name{ font-size: 1.4em; margin-bottom: 0;  }
.staffcast-container .org{ margin-top: .8em; }

/* novelcomics */
.cont-top-novelcomics{ padding: 6.666em 0 6.666em 0; background-color: #000; color: #FFF; }
.cont-top-novelcomics .cont-title{ position: relative; text-align: center; margin-bottom: 7.5em; }
.cont-top-novelcomics .cont-title-sub{ margin-bottom: 1.333em; text-align: left; }
.novelcomics-container{width: 64%; max-width: 64em; margin: 0 auto; position: relative;text-align: center; display: flex; flex-wrap: wrap; justify-content: space-between;}
/*
.novelcomics-container .left{ width: 44.791%; }
.novelcomics-container .right{ width: 46.642%; }
*/
.novelcomics-container .left{ width: 20em; }
.novelcomics-container .right{ width: 38.53em; margin-bottom: 3em; }
.novelcomics-container .bottom{ width: 100%; padding-top: 2em; }
.novelcomics-container .label{ margin: 0 auto .8em 0; }
.novelcomics-container .left .label{ width: 10.033em; }
.novelcomics-container .right .label{ width: 9.666em; }
.novelcomics-container .credit{ margin-bottom: 1.5em; text-align: left;}
.novelcomics-container .pos{ margin-right: .5em;}

.novelcomics-list{ display: flex; flex-wrap: wrap; }
.novelcomics-list > div{ width: calc( (100% - 3em) / 4 ); margin-bottom: 1em; margin-right: 1em; }
.novelcomics-list > div:nth-of-type(4n){ margin-right: 0;}
.novelcomics-list > div.blnk{ background-color: #333; }

.novelcomics-org-banner{ margin-bottom: 3em; position: relative; }
.novelcomics-org-banner > .att{ display: inline-block; background-color: #f03489; color: #FFF; line-height: 1; padding: .5em .2em; position: absolute; top:-1.2em; left:38.2em; }
.novelcomics-sponsor{ display: flex; justify-content: center; }
.novelcomics-sponsor > div:first-child{ width: 9.033em; margin-right: 3em; }
.novelcomics-sponsor > div:last-child{ width: 13.5em;}

/* SUB-PAGE */

/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Custom 1920 ----------------------------------------------------------------------------- */
@media (max-width: 1919px) {
}
/* Custom 1500 ----------------------------------------------------------------------------- */
@media (max-width: 1439px) {
body{ font-size: calc((100vw / 1500) * 15); }
}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {
}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {

}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
body{ font-size: calc((100vw / 750) * 30); }
}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {

}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {

}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {

}