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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ color: #000; background:#FFF; }
body,
.fnt-bsc{ font-family: YakuHanRPs, "M PLUS Rounded 1c", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;}
.fnt-bsc.noyh{ font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif; }
.fnt-dsp1{ }
.fnt-ac0{ color:#08187e; }
.fnt-ac1{ color:#a400ec; }
.fnt-ac2{ color:#ff48a6; }
.fnt-ac3{ color:#11d3ca; }
.fnt-ac4{ color:#0900c4; }

a,a:visited {color: #ff48a6;}
a:hover,a:active {color: #ff48a6; }

.ilink{ display: inline-block; padding: 0.6em .6em 0.6em .6em ; border:#ff48a6 solid 1px ; border-radius: 0; text-decoration: none; font-size: 1em; font-weight: normal; line-height: 1; }
.ilink:before{ content:"> "; }
.ilink,
.ilink:visited,
.ilink:active{ color: #ff48a6; background-color: transparent; }
.ilink:hover{ text-decoration: none; background-color: #ff48a6; color: #fff; }
.ilink.off{ pointer-events: none; border-color: #666; color:#666; }

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

.part-background{ position: absolute; width: 100%; min-height:100%; overflow: hidden; }
.part-foreground{ position: absolute; width: 100%; min-height:100%; overflow: hidden; z-index: 999; pointer-events: none; }
.part-header{ position: relative; z-index: 1000; }
.part-body{ position: relative; }
.part-footer{ position: relative; }

/* lazyestload */
img { transition: filter 1.5s;}
img.lazyestload { width: 100%; filter: blur(8px);}

/* background */
#Background > div{ width: 100%; min-height: 100%; position: absolute; top:0; pointer-events: none; }

/* foreground */
#Foreground > div{ width: 100%; min-height: 100%; position: absolute; top:0; pointer-events: none; }




/* header */
.part-header{ width: 100%; height: 100vh; position: fixed; top:0; left:0; background:#a400ec; pointer-events: none; }
.part-header::before{ content:""; width: 100%; height: 100vh; position: absolute; top:0; left:0;pointer-events: none; background: url("../../assets/img/common/navi/background.webp") repeat-y center top; background-size: 100%; pointer-events: none; }

.cont-nv-btn{ display: block; width: calc(200/3000*100em); height: calc(211/3000*100em); position: absolute; top:3.3em; right: 3.3em; z-index: 3; pointer-events: all; }
.cont-nv-btn a{ display: block; width: 100%; min-height: 100%; text-align: center; line-height: 0; background: url("../../assets/img/common/navi/open.webp") no-repeat center center; background-size: contain ; position: relative; }
.cont-nv-btn a:hover{ text-decoration: none; transform: scale(1.1);}
.cont-nv-btn .navi-open{ display: block; }
.cont-nv-btn .navi-close{ display: none; }
.cont-nv-btn a.navi-close{ background-image: url("../../assets/img/common/navi/close.webp"); }

.cont-sns-btn{ display: block; width: calc(200/3000*100em); height: calc(211/3000*100em); position: absolute; top:12.5em; right: 3.3em; z-index: 3; pointer-events: all; }
.cont-sns-btn a{ display: block; width: 100%; min-height: 100%; text-align: center; line-height: 0; background: url("../../assets/img/common/navi/x.webp") no-repeat center center; background-size: contain ; position: relative; }
.cont-sns-btn a:hover{ text-decoration: none; transform: scale(1.1);}

.cont-global-navi{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; position: relative; padding: 0; margin: 0 auto; z-index: 2; }

.global-logo{ width: 45%; padding: 0; margin: 0; z-index: 2; }
.global-logo > div{ width: calc( 675/3000 * 100em ); padding: 17em 0 0 0; margin: 0 auto; }

.global-navi{ width: 42%; margin: 0; padding: 8em 0 0 0; position: relative; }
.global-navi > ul{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-navi > ul > li{ display: block; padding: 0 ; margin: 0 0 2.0em 0; position: relative;}
.global-navi > ul > li.gn1{ width: calc(324/3000*100em); }
.global-navi > ul > li.gn2{ width: calc(309/3000*100em); }
.global-navi > ul > li.gn3{ width: calc(697/3000*100em); }
.global-navi > ul > li.gn4{ width: calc(585/3000*100em); }
.global-navi > ul > li.gn5{ width: calc(532/3000*100em); }
.global-navi > ul > li.gn6{ width: calc(378/3000*100em); }

.global-navi > ul > li a{ padding: 0; display: block; line-height: 1; position: relative; pointer-events: all; text-decoration: none;  transition: all .3s ease-out 0s;}
.global-navi > ul > li a::before{ content:""; width: calc(57/3000*100em); height: calc(59/3000*100em); position: absolute; top:.7em; left:-3.5em; opacity: 0; pointer-events: none; background: url("../../assets/img/common/navi/ic.webp") repeat-y center top; background-size: 100%; pointer-events: none; transition: all .3s ease-out 0s; }
.global-navi > ul > li a:hover{ transform: translateX(5%); }
.global-navi > ul > li a:hover::before{ transform: translateX(50%) rotate(60deg); opacity: 1; }

.part-header{ background-color: rgba(128, 188, 253, 0); background-image: none; transition: background-color .2s ease-out 0s; }
.part-header:before{ opacity: 0; transition: opacity .5s ease-out .2s; }
.part-header:before{ visibility: hidden; }
.cont-global-navi{ display: none; }

.spmenu-on .cont-nv-btn .navi-open{ display: none; }
.spmenu-on .cont-nv-btn .navi-close{ display: block; }
.spmenu-on .part-header{ background-color: rgba(128, 188, 253, 1); pointer-events: auto; }
.spmenu-on .part-header:before{ opacity: 1; }
.spmenu-on .part-header:before{ visibility: visible; }
.spmenu-on .cont-global-navi{ display: flex; }

.modal-on .cont-nv-btn,
.modal-on .cont-sns-btn{ visibility: hidden; }



/* footer */
.part-footer{ min-height:1em; position: relative; background:url("../../assets/img/common/bg-footer.webp") no-repeat center bottom; background-size: 100%; }
.cont-global-footer{ width: 100%; margin: 0 auto; padding: 13em 0 2em 0; position: relative; }
.cont-global-footer:before{ content:""; width: calc( 186/3000 * 100em ); height:  calc( 183/3000 * 100em ); margin: 0 auto; position: absolute; top:3.5em; left:0; right: 0; background:url("../../assets/img/common/ic-footer.webp") no-repeat center center; background-size: contain; pointer-events: none; animation:floating 1s .1s ease-in-out both alternate infinite running;  }

.footer-share{ position: relative; margin: 0 auto 2em auto; text-align: center; }
.footer-share:before{ content:"SHARE"; color: #FFF; font-size: .9em; letter-spacing: .1em; }
.footer-share div{ display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; list-style-type: none; padding: 0; margin: 0; position: relative; }
.footer-share div > a{ width: calc( 80/3000 * 100em ); height:  calc( 80/3000 * 100em ); display: block; padding: 0; margin: .5em 1em; position: relative; background: no-repeat center center; background-size: contain; }
.footer-share div > a.x{ background-image: url("../../assets/img/common/share-x.webp"); }
.footer-share div > a.ln{ background-image: url("../../assets/img/common/share-line.webp"); }
.footer-share div > a.fb{ background-image: url("../../assets/img/common/share-fb.webp"); }
.footer-share div > a:hover{ transform: scale(1.1); }

.footer-copyrihgt{ margin: 0 auto 2em auto; text-align: center; }
.footer-copyrihgt p{ color: #fff; font-size: .9em; letter-spacing: .1em; margin: 0; }
.footer-privacy{ margin: 0 auto; text-align: center; }
.footer-privacy{ color: #fff; letter-spacing: .1em; margin: 0; }
.footer-privacy a{ font-size: .9em; text-decoration: underline; color: #fff; }




/* body */
.part-body{ position: relative; display: block; margin: 0; }
.part-body-side{ display: none; }
.part-body-main{ position: relative; width: 100%; }

.cont-upper{ position: relative; }
.cont-middle{ position: relative; overflow: hidden; }
.cont-bottom{ position: relative; }

.cont-top-content > .inner{ padding: 3.3em 0; margin: 0 auto;}
.cont-sub-content > .inner{ padding: 0; margin: 0 auto;}

.top-subtitle{ font-size: 1em; margin: 0 auto; z-index: 2; position: relative; }
.top-subtitle span{ display: block; margin: 0 auto; position: relative; }

.block-title{ font-size: 1em; margin: 0 auto; z-index: 2; position: relative; }
.block-title > span{ display: block; margin: 0 auto; position: relative;}

.sub-content-container{  }

.cont-end-bar{ width: 100%; height: 2em; position: relative; overflow: hidden; }
.cont-end-bar::before{ content:""; display: block; width: 100%; height: 100%; position: absolute; top:0; left:0; background-color: #ff48a6; }
.cont-end-bar::after{ content:""; display: block; width: 100%; height: 100%; position: absolute; top:0; left:0; background:  url("../../assets/img/common/cont-end-bar.webp?v1") repeat-x 0 0; background-size: auto 100%; }

.cont-end-bar::after{ animation:anm-cont-end-bar-after 40s 0s ease-out both infinite running;}
.cont-end-bar.inview-act::before{ animation:anm-cont-end-bar-before .3s .1s ease-out both paused;}
.cont-end-bar.inview-act-start::before{ animation-play-state:running; }

@keyframes anm-cont-end-bar-before {
0% { width: 1px; }
100% { width: 100%; }
}
@keyframes anm-cont-end-bar-after {
0% { background-position-x:0; }
100% { background-position-x:100vw; }
}

.eci-cont{ width: 100%; height: 100%; position: absolute; top:0; pointer-events: none; }
.eci-cont .item{ position: absolute; }

.subnavi-cursor{ position: absolute; width: 96%; top:0; left: 0; right: 0; margin: 0 auto; pointer-events: none; }
.subnavi-cursor ul{ display: flex; justify-content: space-between; margin: 0; padding: 0; list-style-type: none; }
.subnavi-cursor ul li{ display: block; width:calc(140/3000*100em); height: calc(140/3000*100em); position: relative; pointer-events: auto; cursor: pointer;  }
.subnavi-cursor ul li span{ display: block; width:100%; height: 100%; background:  url("../../assets/img/common/btn-cursor.webp") no-repeat center center; background-size: 100%; transform-origin: center center; }
.subnavi-cursor ul li span:hover{ transform: scale(1.1,1.1); }
.subnavi-cursor ul li.left span{ transform: scale(-1,1); }
.subnavi-cursor ul li.left span:hover{ transform: scale(-1.1,1.1); }
.subnavi-cursor ul li.off{ pointer-events: none; opacity: .5; }
.subnavi-cursor ul li a{ text-decoration: none; }

.cont-pagetop-btn{ width: calc( 200/3000 * 100em ); height: calc( 211/3000 * 100em ); position: fixed ; bottom:3.3em; right: 3.3em; z-index: 10; }
.cont-pagetop-btn a{ width: 100%; height: 100%; margin: 0; display: block; position: relative; background:url("../../assets/img/common/btn-pagetop.webp?v2") no-repeat center center; background-size: contain; }
.cont-pagetop-btn a:hover{ transform: scale(1.1); }
.cont-pagetop-btn{ opacity: 0;}
.cont-pagetop-btn.start{ animation: anm-pagetop-btn .5s 0s ease-out both running;}
@-webkit-keyframes anm-pagetop-btn { 0% { opacity: 0; -webkit-transform: translateY(-2em); transform: translateY(-2em);} 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}}
@keyframes anm-pagetop-btn { 0% { opacity: 0; -webkit-transform: translateY(-2em); transform: translateY(-2em);} 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}}
.anm-pagetop-btn { -webkit-animation-name: anm-pagetop-btn; animation-name: anm-pagetop-btn;}


/* content */
.inview{ animation:inview .5s .1s ease-out both paused; }
.inview-start{ animation:inview-start .5s .1s ease-out both running; }
.inview-act{ animation-play-state:paused; }
.inview-act-start{ animation-play-state:running; }

.table-a{ border-collapse: separate; border-spacing: 2px;}
.table-a th{ padding:0.5em; background-color:rgba(0,0,0,.05); font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; }
.table-a td{ padding:0.5em; background-color:rgba(0,0,0,.025); vertical-align: top; }

.frame-a{ border:#202020 solid 1px; background-color: #000; }

.sep-a{ height: .4em; background-color: #a400ec; filter:drop-shadow(0 .233em 0 #11d3ca); }

.sqr-image-box{ width: 27em; height: 27em; background-color: #FFF; position: relative; }
.sqr-image-box img{display: block; width: 100%; height: 100%; object-fit: scale-down;}

.cont-tiles{ display: flex; flex-wrap: wrap; justify-content: center;  }

.modal-data{ display: none; }
.cont-modal{ width: 100%; margin: 0 auto; }

.block-data{ display: none; }
.block-data.crt{ display: inherit; }

.cont-modal.comment{ width: 66em;  }


/* modaal */
.modaal-overlay{ background: #faf6f4 url("../../assets/img/common/ptn-white-dot.webp?v1") no-repeat 0 0; background-size: 100%;; }
.modaal-wrapper{ overflow-x: hidden; }
.modaal-inner-wrapper{ padding: 80px 0; }
.image-typ2 .modaal-inner-wrapper{ padding: 80px 25%; }
.modaal-container{ color: inherit; background-color: transparent; box-shadow:none; max-width: inherit; }
.modaal-content-container{ padding: 0; }
.modaal-video-wrap{ margin: auto auto; }
.modaal-wrapper .modaal-close{ right: 3.3em; top: 3.3em; width: calc(200/3000*100em); height: calc(211/3000*100em); background: url("../../assets/img/common/navi/close.webp") no-repeat center center; background-size: contain ; border-radius: 0;}

.modaal-close:before,.modaal-close:after{ display: none; }
.modaal-close:focus,.modaal-close:hover { transform: scale(1.1); }
.modaal-close:focus:before,.modaal-close:focus:after{background: #a47f39;}
.modaal-close:hover:before,.modaal-close:hover:after{background: #a47f39;}


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

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

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

/* TOP-PAGE */
/* main */
.cont-top-visual{ width: 100%; position: relative; margin: 0 auto; padding: 0; display: block;   }
.cont-top-visual::before{ content:""; display: block; width: 100%; height: 100%; position: absolute; top:0; pointer-events: none; background: url("../../assets/img/top/bg-kv.webp?v1") no-repeat center top; background-size: 100%;  }
.cont-top-visual img{ width: 100%; height: auto; }

.cont-top-visual .kv-container{ width: calc(2000/3000*100em); height: calc(2800/3000*100em); margin: 0 auto 0 23em; position: relative; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ width:100%; margin: 0 auto; position: relative; top:0em; display: none; }
.kv-container .grp.on{ display: block; }
.kv-container .grp > div{ position: absolute; top:0; }
.kv-container .grp .vis-grp{ position: relative; width: 100%; margin: 0 auto; }
.kv-container .grp .vis-grp .bg{ position: relative; }
.kv-container .grp .vis-grp .vis{ position: absolute; top:0; }


.cont-top-visual .logo{ width: calc(900/3000*100em); position: absolute; top:2.3em; left:2.3em; }
.cont-top-visual .oa{ width: calc(617/3000*100em); position: absolute; top:19.7em; left:6.8em;}

.cont-top-visual::before{ opacity: 0; }
.kv-container .grp .vis-grp{ transform: scale(1.1); opacity: 0; transform-origin: center bottom; }
.cont-top-visual .logo{ opacity: 0; transform: translateY(-10%); }
.cont-top-visual .oa{ opacity: 0; transform: scale(1.1);}

.s0 .cont-top-visual::before{ opacity: 1; transition: opacity .3s ease-out 0s }
.s0 .kv-container .grp .vis-grp{ transform: scale(1.0); opacity: 1; transition: all .75s ease-in-out .2s; }

.s1 .cont-top-visual .logo{ opacity: 1; transform: translateY(0%); transition: opacity .75s ease-out 0s, transform .5s ease-out 0s; }
.s1 .cont-top-visual .oa{ opacity: 1; transform: scale(1); transition: opacity .75s ease-out .1s, transform .25s ease-out 0s; }
.s1 .kv-container .grp .vis-grp{ animation:floating-vis 3s 0s ease-in-out both alternate infinite running; }

@keyframes floating-vis {
0% { transform:translateY(0%); }
100% { transform:translateY(-2%); }
}

.kv-container .grp{ transform: scale(1.1,1.1) ; transform-origin: center center; opacity: 0; }
.kv-container .grp.on{ transform: scale(1,1); opacity: 1; transition: all 1.0s ease .0s; }



/* top-movie */
.cont-top-movie{ overflow: hidden; }
.cont-top-movie .background{ display: block; width: 130%; height: 130em; position: absolute; top:-15%; left:-15%; background:  url("../../assets/img/top/bg-kv.webp?v1") no-repeat 0 -30em; background-size: 100%; filter: blur(5px); }
.cont-top-movie > .inner{ min-height: 44em; padding: 4em 0; }

.top-movie-list{ width: calc(1920/3000*100em); /*width: 100%;*/ position: relative; margin: 0 auto; }

.thm.youtube-thm{ width: 100%; max-width: 1920px; position: relative; text-align: center; line-height: 0; padding: 0; }
.thm.youtube-thm > a{ display: inline-block; pointer-events: auto; overflow: hidden; line-height: 0; position: relative; border-radius: 2em; border:#FFF solid .333em; }
.thm.youtube-thm > a::after{ content:""; position: absolute; display: block; width:100%; height:100%; background: url("../../assets/img/common/btn-play.webp") no-repeat center center; background-size: calc(240/3000*100em); transform-origin: center center; pointer-events: none; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1; }
.thm.youtube-thm > a:hover::after{ background-size: calc(240/3000*100em*1.1); }

.top-movie-cursor{ position: absolute; width: 79em; top:20em; left: 0; right: 0; margin: 0 auto; pointer-events: none; }
.top-movie-cursor ul{ display: flex; justify-content: space-between; margin: 0; padding: 0; list-style-type: none; }
.top-movie-cursor ul li{ display: block; width:calc(140/3000*100em); height: calc(140/3000*100em); position: relative; pointer-events: none; cursor: pointer; opacity: 0.3; }
.top-movie-cursor ul li span{ display: block; width:100%; height: 100%; background:  url("../../assets/img/common/btn-cursor.webp") no-repeat center center; background-size: 100%; transform-origin: center center; }
.top-movie-cursor ul li.left span{ transform: scale(-1,1); }
.top-movie-cursor ul li:hover{ transform: scale(1.1); }



/* top-news */
.cont-top-news{ background-color: #faf6f4;}
.cont-top-news::before{ content:""; display: block; width: 100%; height: 100%; position: absolute; top:0; background:  url("../../assets/img/common/ptn-white-dot.webp?v1") no-repeat 0 0; background-size: 100%; }
.cont-top-news > .inner{ min-height:55em;  }
.top-subtitle.news span{ width: calc(532/3000*100em); margin-bottom: 3.3em; }
.top-news-container{ width: calc(1600/3000*100em); margin: 0 auto; position: relative;  }

.news-headline{ min-height: 20em; padding: 3em 0 3em 0; }
.news-headline a{ width: 100%; display: block; margin-bottom: 1.25em; padding: 0 0 1.25em 0; position: relative; border-bottom:#a400ec solid 1px; }
.news-headline dl{ font-size: 1.2em; margin: 0; display: block; position: relative;}
.news-headline dl dt{ display: block; position: relative; margin: 0 0 .5em 0; padding: 0; font-size: .9em; font-weight: normal; line-height: 1; letter-spacing: 0.1em; color: #a400ec; }
.news-headline dl dd{ width: 100%; display: block; position: relative; margin: 0; padding: 0; font-size: 1em; line-height: 1.5; letter-spacing: 0.1em; }
.news-headline a,
.news-headline a:visited{ text-decoration: none; color: #08187e; }
.news-headline a:hover{ color:#a400ec; }
.news-more-btn{ width: calc(360/3000*100em); margin: 0 auto; }

.cont-top-news .eci-cont .item.i1{ width: calc(323/3000*100em); top:-2.8em; right: 6.6em; }
.cont-top-news .eci-cont .item.i2{ width: calc(468/3000*100em); top:2.8em; left: -2.7em; }
.cont-top-news .eci-cont .item.i3{ width: calc(415/3000*100em); top:31em; right: -2.5em; }

.cont-top-news .eci-cont .item.i1.inview-act{ animation:floating 1.5s .1s ease-in-out both alternate infinite paused; }
.cont-top-news .eci-cont .item.i1.inview-act-start{ animation-play-state:running; }

.cont-top-news .eci-cont .item.i2.inview-act{ animation:rotate 30s -0.5s linear both infinite paused; }
.cont-top-news .eci-cont .item.i2.inview-act-start{ animation-play-state:running; }

.cont-top-news .eci-cont .item.i3.inview-act{ animation:floating 2s -1s ease-in-out both alternate infinite paused; }
.cont-top-news .eci-cont .item.i3.inview-act-start{ animation-play-state:running; }



/* top-intro */
.cont-top-intro{ background: #FFF url("../../assets/img/intro/background.webp?v1") no-repeat center center; background-size: 100%; }
.cont-top-intro > .inner{ min-height: 71em; padding: 4.7em 0; }
.top-subtitle.intro span{ width: calc(1161/3000*100em); margin-bottom: 4.5em; }

.intro-container{  position: relative; }
.intro-catch{ width: calc(1754/3000*100em); margin: 0 auto 3.3em auto; }
.intro-text{ text-align: center; margin: 0 auto; position: relative; color: #08187e; }
.intro-text p{ font-size: 1.666em; font-weight: bold; line-height: 2.0; letter-spacing: .1em; margin-bottom: 1.5em; position: relative;  }
.intro-text p.mkw{ font-weight: bold; font-size: 1.8em; margin: 0; }
.intro-text p [data-ruby]::before { top: -1.5em;  }
.intro-text p span{ display: inline-block; transform: scaleX(.9);  }

.cont-top-intro .eci-cont .item.i1{ width: calc(477/3000*100em); top:-8em; left: 5em; }
.cont-top-intro .eci-cont .item.i2{ width: calc(543/3000*100em); top:25em; right: -1.5em; }
.cont-top-intro .eci-cont .item.i3{ width: calc(519/3000*100em); top:49em; left: -2.5em; }

.cont-top-intro .eci-cont .item.i1.inview-act{ animation:floating 2s .1s ease-in-out both alternate infinite paused; }
.cont-top-intro .eci-cont .item.i1.inview-act-start{ animation-play-state:running; }

.cont-top-intro .eci-cont .item.i2.inview-act{ animation:rotate 30s -0.5s linear both infinite paused; }
.cont-top-intro .eci-cont .item.i2.inview-act-start{ animation-play-state:running; }

.cont-top-intro .eci-cont .item.i3.inview-act{ animation:floating 2.5s -1s ease-in-out both alternate infinite paused; }
.cont-top-intro .eci-cont .item.i3.inview-act-start{ animation-play-state:running; }

@keyframes floating {
0% { transform:translateY(5%); }
100% { transform:translateY(-5%); }
}


/* top-caststaff */
.cont-top-caststaff{ background-color: #faf6f4;}
.cont-top-caststaff::before{ content:""; display: block; width: 100%; height: 100%; position: absolute; top:0; background:  url("../../assets/img/common/ptn-white-dot.webp?v1") no-repeat 0 0; background-size: 100%; }
.cont-top-caststaff > .inner{ min-height:81em; padding: 4.7em 0; }
.top-subtitle.caststaff span{ width: calc(975/3000*100em); margin-bottom: 4.6em; }
.caststaff-container{ position: relative;  margin:0 auto 4em auto; }

.block-title.cast span{ width: calc(254/3000*100em); margin:0 auto 3em auto; }
.block-title.staff span{ width: calc(291/3000*100em); margin:0 auto 3em auto; }

.caststaff-list{ width: 70%; margin:0 auto 3em auto;  text-align: center; display: flex; flex-wrap: wrap; justify-content: center; position: relative; z-index: 3; }
.caststaff-list.staff{ margin-bottom: 0; }
.caststaff-list > div{ width: 25%; margin-bottom: 3.5em; position: relative; }
.caststaff-list > div.sep{ width: 100%; height: 1px; margin-bottom: 0; }
.caststaff-list > div.nmgb{ margin-bottom: .5em; }
.caststaff-list > div.full{ width: 100%; }
.caststaff-list > div.p60{ width: 60%; }
.caststaff-list > div.p50{ width: 50%; }
.caststaff-list > div.p40{ width: 40%; }
.caststaff-list > div.p33{ width: 30%; }
.caststaff-list > div.p30{ width: 30%; }
.caststaff-list > div.p25{ width: 25%; }
.caststaff-list > div.p20{ width: 20%; }
.caststaff-list > div > div{ margin: 0; position: relative; color: #333333; }
.caststaff-list .pos{ display: block; font-size: 1.3em; letter-spacing: .1em;  margin: 0 0 .2em 0; line-height: 1; color:#a400ec; }
.caststaff-list .pos > span{ display: inline-block; transform: scaleX(.9); }
.caststaff-list .name{ display: block; font-size: 2.1em; letter-spacing: .1em; margin: 0; line-height: 1.3; }
.caststaff-list .name > span{ display: inline-block; transform: scaleX(.9); }
.caststaff-list .exname{ display: block; font-size: 1.1em; letter-spacing: .1em; padding-top: .2em; margin: 0; line-height: 1.2; }
.caststaff-list .exname > span{ display: inline-block; transform: scaleX(.9); }
.caststaff-list .logo-sck{ width: calc(779/3000*100em); padding-top: .5em; margin: 0 auto; }

.caststaff-list .cmt-btn{ display: block; width: calc(81/3000*100em); height: calc(81/3000*100em);background:  url("../../assets/img/common/btn-comment.webp?v1") no-repeat center center; background-size: contain; position: absolute; top:0.5em; left: calc(50% + 2.0em + 2em); text-decoration: none; pointer-events: auto; transition: all .15s ease-out 0s; }
.caststaff-list .cmt-btn:hover{transform: scale(1.1); text-decoration: none; cursor: pointer; }
.caststaff-list .cmt-btn.ch2{ left:calc(50% + 1.6em + 2em); }
.caststaff-list .cmt-btn.ch3{ left:calc(50% + 1.8em + 2em); }
.caststaff-list .cmt-btn.ch3_5{ left:calc(50% + 2.6em + 2em); }
.caststaff-list .cmt-btn.ch4{ left:calc(50% + 3.2em + 2em); }
.caststaff-list .cmt-btn.ch5{ left:calc(50% + 4.3em + 2em); }
.caststaff-list .cmt-btn.ch5_5{ left:calc(50% + 4.9em + 2em); }
.caststaff-list .cmt-btn.ch6{ left:calc(50% + 5.4em + 2em); }
.caststaff-list .cmt-btn.ch7{ left:calc(50% + 4em + 2em); }
.caststaff-list .cmt-btn.ch8{ left:calc(50% + 4.5em + 2em); }
.caststaff-list .cmt-btn.ch9{ left:calc(50% + 5em + 2em); }
.caststaff-list .cmt-btn.ch10{ left:calc(50% + 5.5em + 2em); }
.caststaff-list .cmt-btn.ch11{ left:calc(50% + 6em + 2em); }
.caststaff-list .cmt-btn.ch12{ left:calc(50% + 6.5em + 2em); }
.caststaff-list .cmt-btn.ch13{ left:calc(50% + 7em + 2em); }
.caststaff-list .cmt-btn.ch14{ left:calc(50% + 7.5em + 2em); }

.cont-modal.comment{ width: 80em;  }
.comment-frame{ position: relative; margin: 0 auto; padding: 1em ; }

.cont-top-caststaff .eci-cont .item.i1{ width: calc(390/3000*100em); top:10em; right: -2.5em; }
.cont-top-caststaff .eci-cont .item.i2{ width: calc(424/3000*100em); top:32em; left: -1.5em; }

.cont-top-caststaff .eci-cont .item.i1.inview-act{ animation:floating 1.5s .1s ease-in-out both alternate infinite paused; }
.cont-top-caststaff .eci-cont .item.i1.inview-act-start{ animation-play-state:running; }

.cont-top-caststaff .eci-cont .item.i2.inview-act{ animation:rotate 20s -0.5s linear both infinite paused; }
.cont-top-caststaff .eci-cont .item.i2.inview-act-start{ animation-play-state:running; }


/* top-character */
.cont-top-character{ min-height: 1em; background: #FFF url("../../assets/img/character/background.webp?v1") no-repeat center center; background-size: 100%; }
.cont-top-character::before{ content:""; display: block; width: calc(2400/3000*100em); height: 100%; margin: 0 auto; position: absolute; top:0; left:0; right:0; border-left:#a400ec solid .4em; border-right:#a400ec solid .4em; filter:drop-shadow(.233em 0 0 #11d3ca); }
.cont-top-character > .inner{ padding: 4.7em 0 0 0; }
.top-subtitle.character span{ width: calc(886/3000*100em); margin-bottom: 4.5em; }

.character-container{ width: 100%; margin:0 auto; position: relative; }


#CharaCont{ position: relative; }
.cont-character-navi{ width: 100%; margin: 0 auto 3em auto; position: relative; z-index: 5; }
.character-navi{ width: 100%; }
.character-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.character-navi ul li{ width: calc(240/3000*100em); height: calc(240/3000*100em); display: block; margin: .5em; padding:0; }
.character-navi ul li.br{ width: 100%; height: 0; margin: 0; padding:0; }
.character-navi ul li.br-sp{width: 100%; height: 0; margin: 0; padding:0; display: none; }
.character-navi ul li a{ display: block; width: 100%; min-height: 100%; position: relative; transform-origin: center center; pointer-events: all; cursor: pointer; background: url("../../assets/img/character/navi.webp") no-repeat 0 0; background-size: calc(720/3000*100em); }
.character-navi ul li.n1 a{ background-position-x: 0 ; }
.character-navi ul li.n2 a{ background-position-x: calc(240/3000*100em*-1) ; }
.character-navi ul li.n3 a{ background-position-x: calc(240/3000*100em*-2) ; }
.character-navi ul li a:before{ content:""; width: 100%; height: 100%; background: url("../../assets/img/character/navi-frame-off.webp") no-repeat center center; background-size: contain; pointer-events: none; position: absolute; top:0; }
.character-navi ul li a:hover{ text-decoration: none; transform: scale(1.1); }
.character-navi ul li.crt a{ pointer-events: none; }
.character-navi ul li.crt a:before{ background-image: url("../../assets/img/character/navi-frame-on.webp") }

.cont-character-data{ width:100%; min-height: 55em; position: relative; }
.character-data{ width:100%; min-height: 55em; position: relative; display: none;  }

.character-data .chr-img{ width: calc(1200/3000*100em); top:-23em; left:.5em; position: absolute; z-index: 1;  }
.character-data .chr-img .figure{ display: none; }
.character-data .chr-img .figure.nochange{ display: block; }
.character-data[data-swt="1"] .chr-img .figure.fig1{ display: block; }
.character-data[data-swt="2"] .chr-img .figure.fig2{ display: block; }

.character-data .prof-face{ width: calc(480/3000*100em); top:-11em; right:14em; position: absolute; z-index: 1; }
.character-data .prof-face .face{ display: none; }
.character-data .prof-face .face.nochange{ display: block; }
.character-data[data-swt="1"] .prof-face .face.fig1{ display: block; }
.character-data[data-swt="2"] .prof-face .face.fig2{ display: block; }

.character-data .chr-prof{ width: calc(1080/3000*100em); margin: 0 auto; position: relative; z-index: 3; text-align: center; border:#a400ec solid 1px;  }

.character-data .chr-prof .name{ padding: .5em; position: relative; }
.character-data .chr-prof .name > div{ background-color: rgba(255, 255, 255, 0.5); padding: 1em 0; }
.character-data .chr-prof .name span{ font-size: 3em; font-weight: bold; color: #a400ec; letter-spacing: 0.1em; }
.character-data .chr-prof .name span.sf{ font-size: 2em; }
.character-data .chr-prof .name span ruby{ ruby-align: center; }
.character-data .chr-prof .name span ruby rt{ font-size: 30%; letter-spacing: 20%; }
.character-data .chr-prof .cv{ display: block; padding: .5em; letter-spacing: 0.1em; position: relative; border-top:#a400ec solid 1px; border-bottom:#a400ec solid 1px; }
.character-data .chr-prof .cv span{ font-size: 1.5em; color: #0900c4; }
.character-data .chr-prof .text{ padding: .5em; position: relative; }
.character-data .chr-prof .text > div{ background-color: rgba(255, 255, 255, 0.5); padding: 2em 1.5em; line-height: 2;letter-spacing: .05em; }
.character-data .chr-prof .text p{ margin: 0; font-size: 1.3em; color: #0900c4; position: relative; z-index: 6; }
.character-data .prof-text .text [data-ruby]::before { top: -1.7em; }

.character-data.crt{ display: block; }
.character-data.crt .chr-img{ animation: anm-character-change .5s .05s ease-out both running; }
.character-data.crt .prof-face{ animation: anm-character-change2 .5s .05s ease-out both running; }
@keyframes anm-character-change {
  0% { opacity: 0; transform: translateY(5%);}
  100% { opacity: 1; transform: translateY(0);}
}
@keyframes anm-character-change2 {
  0% { opacity: 0; transform: translateY(-5%);}
  100% { opacity: 1; transform: translateY(0);}
}

.subnavi-cursor.character-cursor{ width: 11em; top:50em; bottom:inherit; left: 0; z-index: 5; }



/* top-comics */
.cont-top-comics{ background-color: #fff;}
.cont-top-comics::before{ content:""; display: block; width: 100%; height: 100%; position: absolute; top:0; background:  url("../../assets/img/common/ptn-grid.webp?v1") repeat 0 0; background-size: calc(80/3000*100em); }
.cont-top-comics > .inner{ min-height:92em; padding: 4.7em 0 3em 0; }
.top-subtitle.comics span{ width: calc(730/3000*100em); margin-bottom: 2em; }
.comics-container{ position: relative;  margin:0 auto 4em auto; }

.comics-text{ margin: 0 auto 3em auto; text-align: center; color: #333333; }
.comics-text p{ letter-spacing: .1em; margin-top: 0; transform: scaleX(.9); }

.comics-list{ width: calc(2600/3000*100em); display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto 3em auto; }
.comics-list > div{ width: calc( (1 / 5 * (100% + 1em)) - 1em ); margin-bottom: 1em; margin-right: 1em; text-align: center; }
.comics-list > div:nth-of-type(5n){ margin-right: 0;}
.comics-list > div .thm{ display: block; margin-bottom: 0; }
.comics-list > div .thm:hover{ transform: scale(1.05); }

.comics-link{ width: calc(631/3000*100em); margin: 0 auto; }


.cont-top-comics .eci-cont .item.i1{ width: calc(461/3000*100em); top:-3em; left: -2em; }
.cont-top-comics .eci-cont .item.i2{ width: calc(683/3000*100em); top:6em; right: -6.5em; }
.cont-top-comics .eci-cont .item.i3{ width: calc(367/3000*100em); top:65em; right: 8em; }

.cont-top-comics .eci-cont .item.i1.inview-act{ animation:rotate 10s -0.5s linear both infinite paused; }
.cont-top-comics .eci-cont .item.i1.inview-act-start{ animation-play-state:running; }

.cont-top-comics .eci-cont .item.i2.inview-act{ animation:floating 2s .1s ease-in-out both alternate infinite paused; }
.cont-top-comics .eci-cont .item.i2.inview-act-start{ animation-play-state:running; }

.cont-top-comics .eci-cont .item.i3.inview-act{ animation:floating 3s -1s ease-in-out both alternate infinite paused; }
.cont-top-comics .eci-cont .item.i3.inview-act-start{ animation-play-state:running; }


/* SUB-PAGE */

.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 41.5em);}
.sub-page .cont-sub-content{ min-height: calc(100vh - 41.5em);}


/* news */
.sub-subtitle.news{ width: calc(571/3000*100em); }
.cont-sub-news{ min-height: 1em; position: relative;}
.cont-sub-news > .inner{ padding: 1.666em 0; }

.sub-news-container{ width: 100%; margin: 0 auto; position: relative; }




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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* Custom 1920 ----------------------------------------------------------------------------- */
@media (max-width: 1919px) {
}
/* Custom 1400 ----------------------------------------------------------------------------- */
@media (max-width: 1399px) {

}
/* LG ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {

}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {
}
/* lt768 ----------------------------------------------------------------------------- */
@media (min-width:768px) {
}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ }

/* header */
.part-header{ }
.part-header::before{ background-size: auto 100%; }

.cont-nv-btn{ width: calc(200/3000*100em*0.5); height: calc(211/3000*100em*0.5); top:1.0em; right: 1.0em; }
.cont-sns-btn{ width: calc(200/3000*100em*0.5); height: calc(211/3000*100em*0.5); top:6em; right: 1.0em; }

.cont-global-navi{ }

.global-logo{ width: 90%; padding: 0; margin: 0; z-index: 2; }
.global-logo > div{ width: 12em; padding: 1em 0 0 0; margin: 0 auto 2.5em auto; }

.global-navi{ width: 100%; margin: 0; padding: 0; position: relative; }
.global-navi > ul{ margin: 0 auto 0 5em; transform: scale(0.65); transform-origin: center top; }
.global-navi > ul > li{  margin: 0 0 2.5em 0; }




/* footer */
.part-footer{ min-height:1em; background-size: auto 100%; }
.cont-global-footer{ width: 100%; margin: 0 auto; padding: 9em 0 2em 0; position: relative; }
.cont-global-footer:before{ width: calc( 186/3000 * 100em * 0.7 ); height: calc( 183/3000 * 100em * 0.7 ); top:2.5em; }

.footer-share{ margin: 0 auto 2em auto;  }
.footer-copyrihgt{ font-size: .8em; margin: 0 auto 2em auto; }
.footer-privacy a{ font-size: 1em; }



/* body */
.part-body{ }
.part-body-side{ }
.part-body-main{ }

.cont-upper{ }
.cont-middle{ }
.cont-bottom{ }

.cont-top-content > .inner{ padding: 2em 0; margin: 0 auto;}
.cont-sub-content > .inner{ padding: 0; margin: 0 auto;}

.cont-end-bar{ height: 1em; }

.subnavi-cursor ul li{ width:calc(140/3000*100em*0.7); height: calc(140/3000*100em*0.7); }

.cont-pagetop-btn{ width: calc( 200/3000 * 100em * 0.5 ); height: calc( 211/3000 * 100em * 0.5 ); bottom:1.0em; right: 1.0em; }

.sep-a{ height: .2em; background-color: #a400ec; filter:drop-shadow(0 .133em 0 #11d3ca); }

/* modaal */
.modaal-overlay{ background-size: 200%;; }
.modaal-inner-wrapper{ padding: 80px 0; }
.modaal-wrapper .modaal-close{ right: 1.0em; top: 1.0em; width: calc(200/3000*100em*0.5); height: calc(211/3000*100em*0.5);}



/* TOP-PAGE */
/* main */
.cont-top-visual{ width: 100%; position: relative; margin: 0 auto; padding: 6em 0 6em 0; display: block; }
.cont-top-visual::before{ top:0; pointer-events: none;  background-size: auto 115%;  }
.cont-top-visual img{ width: 100%; height: auto; }

.cont-top-visual .kv-container{ width: 100%; height: calc(100vw*1.4); margin: 0 auto; position: relative; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ width:100%; margin: 0 auto; position: relative; top:0em; display: none; }
.kv-container .grp.on{ display: block; }
.kv-container .grp > div{ position: absolute; top:0; }
.kv-container .grp .vis-grp{ position: relative; width: 100%; margin: 0 auto; }
.kv-container .grp .vis-grp .bg{ position: relative; }
.kv-container .grp .vis-grp .vis{ position: absolute; top:0; }

.cont-top-visual .logo{ width: 13em; position: absolute; top:1em; left:.5em; }
.cont-top-visual .oa{ width: 23em; position: absolute; top:47em; left:2.5em; right: inherit; }



/* top-movie */
.cont-top-movie{}
.cont-top-movie .background{ width: 180%; height: 180em; position: absolute; top:-40%; left:-40%; background-position: 0 -19em; background-size: 100%; filter: blur(4px); }
.cont-top-movie > .inner{ min-height: 18em; padding: 2em 0; }

.top-movie-list{ width: 82%; }
.thm.youtube-thm > a{ border-radius: 2em; border:#FFF solid .233em; }
.thm.youtube-thm > a::after{ background-size: calc(240/3000*100em*0.45); }
.thm.youtube-thm > a:hover::after{ background-size: calc(240/3000*100em*0.45*1.1); }

.top-movie-cursor{ width: 99%; top:8em;}
.top-movie-cursor ul li{ width:calc(140/3000*100em*0.45); height: calc(140/3000*100em*0.45);  }



/* top-news */
.cont-top-news{ }
.cont-top-news::before{ background-size: 200%; }
.cont-top-news > .inner{  min-height:41em; }
.top-subtitle.news span{ width: calc(532/3000*100em*0.45); margin-bottom: 2em; }
.top-news-container{ width: 80%; }

.news-headline{ min-height: 20em; padding: 1em 0 1em 0; }
.news-headline a{ margin-bottom: 1.25em; padding: 0 0 1.25em 0; }
.news-headline dl{ font-size: 1.1em; }

.news-more-btn{ width: calc(360/3000*100em*0.7);  }

.cont-top-news .eci-cont .item.i1{ width: calc(323/3000*100em*0.45); top:-1.4em; right: 2.3em; }
.cont-top-news .eci-cont .item.i2{ width: calc(468/3000*100em*0.45*0.8); top:1.8em; left: -1.5em; }
.cont-top-news .eci-cont .item.i3{ width: calc(415/3000*100em*0.45); top:35em; right: -1.3em; }



/* top-intro */
.cont-top-intro{ background-size: 150%; }
.cont-top-intro > .inner{ min-height: 51em; padding: 3em 0; }
.top-subtitle.intro span{ width: calc(1161/3000*100em*0.45); margin-bottom: 3em; }

.intro-container{ }
.intro-catch{ width: 95%; margin: 0 auto 2em auto; }
.intro-text p{ font-size: 1.2em; }
.intro-text p.mkw{ font-size: 1.4em;  }

.cont-top-intro .eci-cont .item.i1{ width: calc(477/3000*100em*0.45); top:-4em; left: -1em; }
.cont-top-intro .eci-cont .item.i2{ width: calc(543/3000*100em*0.45); top:15em; right: -1.5em; }
.cont-top-intro .eci-cont .item.i3{ width: calc(519/3000*100em*0.45*0.8); top:35em; left: -1.5em; }



/* top-caststaff */
.cont-top-caststaff{ }
.cont-top-caststaff::before{ background-size: 200%; }
.cont-top-caststaff > .inner{ min-height:82em; padding: 3em 0; }
.top-subtitle.caststaff span{ width: calc(975/3000*100em*0.45); margin-bottom: 3em; }
.caststaff-container{ position: relative;  margin:0 auto 2em auto; }

.block-title.cast span{ width: calc(254/3000*100em*0.6); margin:0 auto 1.5em auto; }
.block-title.staff span{ width: calc(291/3000*100em*0.6); margin:0 auto 1.5em auto; }

.caststaff-list{ width: 98%; margin:0 auto 2em auto; }
.caststaff-list.staff{ margin-bottom: 0; }
.caststaff-list > div{ width: 25%; margin-bottom: 2.0em; position: relative; }
.caststaff-list > div.sep{ width: 100%; height: 1px; margin-bottom: 0; }
.caststaff-list > div.nmgb{ margin-bottom: .5em; }
.caststaff-list > div.full{ width: 100%; }
.caststaff-list > div.p60{ width: 100%; }
.caststaff-list > div.p50{ width: 100%; }
.caststaff-list > div.p40{ width: 100%; }
.caststaff-list > div.p33{ width: 100%; }
.caststaff-list > div.p30{ width: 100%; }
.caststaff-list > div.p25{ width: 100%; }
.caststaff-list > div.p20{ width: 100%; }
.caststaff-list > div > div{ margin: 0; position: relative; color: #333333; }
.caststaff-list .pos{ display: block; font-size: 1.1em; letter-spacing: .025em;  margin: 0 0 .2em 0; line-height: 1; color:#a400ec; }
.caststaff-list .pos > span{ display: inline-block; transform: scaleX(.9); }
.caststaff-list .name{ font-size: 1.6em; }
.caststaff-list .exname{ font-size: 1em; }
.caststaff-list .logo-sck{ width: calc(779/3000*100em*0.65);  }

.caststaff-list .cmt-btn{ width: calc(81/3000*100em*0.7); height: calc(81/3000*100em*0.7); top:0.7em; left: calc(50% + 2.0em + 2em); }
.caststaff-list .cmt-btn.ch2{ left:calc(50% + 1.8em + 2em); }
.caststaff-list .cmt-btn.ch3{ left:calc(50% + 1.8em + 2em); }
.caststaff-list .cmt-btn.ch3_5{ left:calc(50% + 1.9em + 2em); }
.caststaff-list .cmt-btn.ch4{ left:calc(50% + 2.3em + 2em); }
.caststaff-list .cmt-btn.ch5{ left:calc(50% + 2.6em + 2em); }
.caststaff-list .cmt-btn.ch5_5{ left:calc(50% + 2.9em + 2em); }
.caststaff-list .cmt-btn.ch6{ left:calc(50% + 4em + 2em); }
.caststaff-list .cmt-btn.ch7{ left:calc(50% + 4em + 2em); }
.caststaff-list .cmt-btn.ch8{ left:calc(50% + 4.5em + 2em); }
.caststaff-list .cmt-btn.ch9{ left:calc(50% + 5em + 2em); }
.caststaff-list .cmt-btn.ch10{ left:calc(50% + 5.5em + 2em); }
.caststaff-list .cmt-btn.ch11{ left:calc(50% + 6em + 2em); }
.caststaff-list .cmt-btn.ch12{ left:calc(50% + 6.5em + 2em); }
.caststaff-list .cmt-btn.ch13{ left:calc(50% + 7em + 2em); }
.caststaff-list .cmt-btn.ch14{ left:calc(50% + 7.5em + 2em); }

.cont-modal.comment{ width: 100%;  }
.comment-frame{ position: relative; margin: 0 auto; padding: 1em ; }

.cont-top-caststaff .eci-cont .item.i1{ width: calc(390/3000*100em*0.45); top:5em; right: -1.3em; }
.cont-top-caststaff .eci-cont .item.i2{ width: calc(424/3000*100em*0.45); top:25em; left: -0.7em; }



/* top-character */
.cont-top-character{ min-height: 1em; background-size: 300%; }
.cont-top-character::before{ width: 90%; border-left:#a400ec solid .2em; border-right:#a400ec solid .2em; filter:drop-shadow(.133em 0 0 #11d3ca); }
.cont-top-character > .inner{ padding: 2em 0 0 0; }
.top-subtitle.character span{ width: calc(886/3000*100em*0.45); margin-bottom: 3em; }

.character-container{ padding-bottom: 3em; }

.cont-character-navi{ margin: 0 auto 1.5em auto; }
.character-navi ul{ justify-content: center;  }
.character-navi ul li{ width: calc(240/3000*100em*0.6); height: calc(240/3000*100em*0.6); margin: .5em; }
.character-navi ul li a{ background-size: calc(720/3000*100em*0.6); }
.character-navi ul li.n1 a{ background-position-x: 0 ; }
.character-navi ul li.n2 a{ background-position-x: calc(240/3000*100em*-1*0.6) ; }
.character-navi ul li.n3 a{ background-position-x: calc(240/3000*100em*-2*0.6) ; }

.cont-character-data{ width:100%; min-height: 75em; position: relative; }
.character-data{ width:100%; min-height: 75em; position: relative; display: none;  }

.character-data .chr-img{ width: calc(1200/3000*100em*0.6); top:inherit; left:inherit; position: relative; margin: 0 auto 5em 0; }
.character-data .prof-face{ width: calc(480/3000*100em*0.6); top:6em; right:1em; }
.character-data .chr-prof{ width: 80%; }

.character-data .chr-prof .name span{ font-size: 1.8em; }
.character-data .chr-prof .name span.sf{ font-size: 1.4em; }
.character-data .chr-prof .cv span{ font-size: 1.333em; }
.character-data .chr-prof .text > div{ padding: 2em 1.5em; }
.character-data .chr-prof .text p{ font-size: 1.2em; }

.subnavi-cursor.character-cursor{ width: 8em; top:53.5em; bottom:inherit; left: 0;  }



/* top-comics */
.cont-top-comics{ }
.cont-top-comics::before{ background-size: calc(80/3000*100em*0.8); }
.cont-top-comics > .inner{ min-height:72em; padding: 3em 0 3em 0; }
.top-subtitle.comics span{ width: calc(730/3000*100em*0.45); margin-bottom: 2em; }
.comics-container{ position: relative;  margin:0 auto 4em auto; }

.comics-text{ margin: 0 auto 3em auto; text-align: center; color: #333333; }
.comics-text p{ letter-spacing: .1em; margin-top: 0; transform: scaleX(.9); }

.comics-list{ width: 90%; margin: 0 auto 1.5em auto; }
.comics-list > div{ width: calc( (1 / 3 * (100% + 1em)) - 1em ); margin-bottom: 1em; margin-right: 1em; text-align: center; }
.comics-list > div:nth-of-type(5n){ margin-right: 1em;}
.comics-list > div:nth-of-type(3n){ margin-right: 0;}
.comics-list > div .thm{ display: block; margin-bottom: 0; }
.comics-list > div .thm:hover{ transform: scale(1.05); }

.comics-link{ width: calc(631/3000*100em*0.7); margin: 0 auto; }


.cont-top-comics .eci-cont .item.i1{ width: calc(461/3000*100em*0.45); top:-1.5em; left: -1em; }
.cont-top-comics .eci-cont .item.i2{ width: calc(683/3000*100em*0.45); top:3em; right: -3.5em; }
.cont-top-comics .eci-cont .item.i3{ width: calc(367/3000*100em*0.45); top:62em; right: 1em; }




/* SUB-PAGE */

.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 50em);}
.sub-page .cont-sub-content{ min-height: calc(100vh - 50em);}




/* SM ----------------------------------------------------------------------------- */
@media (orientation: portrait) and (max-width: 767px) {

}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {

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

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

}