@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: 100%; position: absolute; top:0; display: flex; flex-wrap: wrap; z-index: 100;  }
.part-header.on{ height: 100vh; background: #f03489 url(../images/common-header-maple-sp.png) no-repeat right bottom; background-size: 100%; }
.cont-global-header{ display: none; }

.cont-header-logo{ display: none;}
.cont-header-menu{ display: none; }


.cont-global-navi{ width: 21.666em; position: absolute; margin: 0 auto; top:4.4em; left: 0; right: 0; order: 2; display: none; }
.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: .888em; padding-bottom: .888em; border-bottom: #000 dotted 2px; }
.global-navi > ul > li a{ font-size: 1.6em; color: #000; text-decoration: none; }
.global-navi > ul > li:nth-child(5){ border: none; }
.global-navi > ul > li:nth-child(5) svg{ width: .888em; height: auto; fill: currentColor; }

.cont-sp-btn{ width: 3.066em; height: 1.333em; margin: 0 1.6333em 0 auto; top:2.2em; display: block; order: 1; position: relative; }
.cont-sp-btn .sp-navi-open{ display: block; }
.cont-sp-btn .sp-navi-close{ display: none; }
.cont-sp-btn a{ color: #000; }
.cont-sp-btn svg{ width: 100%; height: auto; fill: currentColor; }
.part-header.w .cont-sp-btn a{ color: #FFF;  }

.part-header.on .cont-global-navi{ display: block; }
.part-header.on .cont-sp-btn .sp-navi-open{ display: none; }
.part-header.on .cont-sp-btn .sp-navi-close{ display: block; }


/* body */
.cont-upper{ position: relative; padding-bottom: 2em; }

.cont-middle{ position: relative; }
.cont-title{ font-size: 1em; text-align: center; margin-bottom: 2.666em; }
.cont-title > span{ display: block; font-size: 2.266em; 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.4em; }

/* footer */
.part-footer{ padding: 5.333em 0 0 0; }
.footer-navi{ display: none; }
.footer-logo{ width: 15.4em; margin: 0 auto 5em auto; }
.footer-share{ position: relative; margin-bottom: 6.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.1em; }
.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; }
.footer-sponsor > div:first-child{ width: 8.5em; margin-right: 2em; }
.footer-sponsor > div:last-child{ width: 7.833em;}

.footer-chara{ width: 13.166em; position: fixed; bottom: 0; right: -8.6em;transition: .2s all ease-in-out 0s; }
.footer-chara:hover{  right: -5.6em; }
.footer-chara{ pointer-events: none; opacity: 0;}

.footer-copyrihgt{ padding: 2em 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{ display: none; }

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

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

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

/* TOP-PAGE */
/* main */
.cont-top-visual{ width: 100%;  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: 33.866em; background-color: #f8f8f8; position: relative; }
.cont-top-visual .kv-container .vis{ width: 16em; top:inherit; bottom:0; right: 8.333em; }
.cont-top-visual .kv-container .vis2{ width: 13.433em; top:inherit; bottom:0; right: 0; }
.cont-top-visual .kv-container .catch{ width: 3.666em; left: 0;}
.cont-top-visual .kv-container .catch .cat1{ width: 1.733em; position: absolute; right: 0; background-color: #000; }
.cont-top-visual .kv-container .catch .cat2{ width: 1.733em; 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: 20.233em; top:29.433em; left: 0; right: 0; margin: 0 auto;}

.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 2.1s ease-out backwards;}
.cont-top-visual .kv-container .catch{ animation:fade-in 0.3s 2.5s ease backwards;}
.cont-top-visual .kv-container .catch .cat1 .mask{ animation:catch-mask 1s 3.0s ease-out backwards;}
.cont-top-visual .kv-container .catch .cat2 .mask{ animation:catch-mask 1s 3.5s 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: 6.5em 0 2em 0; }
.cont-top-sepmark > p{ display: block; width: 5.266em; margin: 0 auto; }

.cont-top-movie{ width: 21.666em; position: relative; margin: 0 auto; }
.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{ display: none;  }
.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: 3em 0 6.666em 0; }
.news-container{ width: 20em; margin: 0 0 0 auto; padding: 0; background-color: #f8f8f8; position: relative; }
.news-container ul{ width: 23.333em; display: block; list-style-type: none; margin:0; padding: 0; top:2.333em; left: -3.333em; position: relative; }
.news-container ul > li{  width: 21.666em; display: block; background-color: #FFF; display: flex; flex-wrap: wrap; margin: 0 auto 1.333em 0; }
.news-container ul > li .th{ width: 21.666em; min-height: 12em; background-color: #d8d8d8; }
.news-container ul > li .txt{ width: 21.666em; min-height: 12em; padding: 1.7333em 1.833em; }
.news-container ul > li .txt .date{ font-size: .866em; color: #ef3488; line-height: 1; margin-bottom: .7em; }
.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: 4em 0 2.8em 0; background-color: #f8f8f8; }
.cont-top-staffcast .cont-title{ position: relative; text-align: center; margin-bottom: 4em; }
.cont-top-staffcast .cont-title-sub{ margin-bottom: 2em; }
.staffcast-container{ width: 21.666em; margin: 0 auto; position: relative;text-align: center;}
.staffcast-list > div{ margin-bottom: 1.566em; }
.staffcast-container p{ margin-bottom: 0; /* line-height: 1; */ }
.staffcast-container .pos{ font-size: .666em; margin-bottom: .2em;  }
.staffcast-container .name{ font-size: 1.066em; margin-bottom: 0;  }
.staffcast-container .org{ font-size: .666em; margin-top: .8em; }

/* novelcomics */
.cont-top-novelcomics{ padding: 4em 0 4em 0; background-color: #000; color: #FFF; }
.cont-top-novelcomics .cont-title{ position: relative; text-align: center; margin-bottom: 4em; }
.cont-top-novelcomics .cont-title-sub{ margin-bottom: 1.333em; }
.novelcomics-container{ width: 21.666em; 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: 100%; margin-bottom: 1.8em; }
.novelcomics-container .right{ width: 19.333em; margin: 0 auto 3em auto; }
.novelcomics-container .bottom{ width: 100%; margin: 0 auto; padding-top: 2em; }
.novelcomics-container .label{ margin: 0 auto .8em auto; }
.novelcomics-container .left .label{ width: 7.766em; }
.novelcomics-container .right .label{ width: 8em; }
.novelcomics-container .credit{ font-size: .8em; margin-bottom: .8em;}
.novelcomics-container .pos{ margin-right: .5em;}

.novelcomics-list{ display: flex; flex-wrap: wrap; justify-content: center; }
.novelcomics-list > div{ width: calc( (100% - 1.6em) / 3 ); margin-bottom: .8em; }
.novelcomics-list > div:nth-of-type(3n-1){ margin-left: .8em; margin-right: .8em;}
.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: .4em .1em; position: absolute; top:-1.2em; left:14.1em; font-size: .7em; }
.novelcomics-sponsor{ display: flex; justify-content: center; }
.novelcomics-sponsor > div:first-child{ width: 6.333em; margin-right: 2em; }
.novelcomics-sponsor > div:last-child{ width: 9.46em;}

/* 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) {

}