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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ color: #006eb2; background:#fff url("../images/common/background.webp") repeat-y center top; background-size: 100%; }

.fnt-b{ font-weight: medium; }
.fnt-b{ font-weight: 500; }

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%; height: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: 500; }
.part-body{ position: relative; }
.part-footer{ position: relative; display: none; }

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

/* background */
#Background  > div{ width: 100%; min-height: 100%; position: absolute; top:0; }
#Background .bg-animeation{ overflow: hidden; }
.line_bg_anm1{ position: relative; opacity: 0;  }
.inview-act-start .line_bg_anm1{ animation: line_bg_anm1 .75s .25s ease-in-out both 1 running; }
@keyframes line_bg_anm1 {
  0% { opacity: 0; transform: translate(-30%,-30%); }
  100% { opacity: 1; transform: translate(0%,0%)); }
}
.inview-act-start .line_bg_anm2{ animation: line_bg_anm2 .75s .5s ease-in-out both 1 running; }
@keyframes line_bg_anm2 {
  0% { opacity: 0; transform: translate(30%,-30%); }
  100% { opacity: 1; transform: translate(0%,0%)); }
}
.inview-act-start .line_bg_anm3{ animation: line_bg_anm3 .75s .25s ease-in-out both 1 running; }
@keyframes line_bg_anm3 {
  0% { opacity: 0; transform: translate(-30%,30%); }
  100% { opacity: 1; transform: translate(0%,0%)); }
}

.circle_bg_anm1{ position: relative; opacity: 0; transform: rotateZ(-180deg); }
.inview-act-start .circle_bg_anm1{ animation: circle_bg_anm1 2s .5s ease-in-out both 1 running; }
@keyframes circle_bg_anm1 {
  0% { opacity: 0; transform: rotateZ(-180deg); }
  100% { opacity: 1; transform: rotateZ(0deg); }
}
.circle_bg_anm2{ position: relative; opacity: 0; transform: rotateZ(180deg); }
.inview-act-start .circle_bg_anm2{ animation: circle_bg_anm2 2s .7s ease-in-out both 1 running; }
@keyframes circle_bg_anm2 {
  0% { opacity: 0; transform: rotateZ(180deg); }
  100% { opacity: 1; transform: rotateZ(0deg); }
}

.circle_bg_anm1loop{ position: relative; opacity: 0; transform: rotateZ(-180deg); }
.inview-act-start .circle_bg_anm1loop{ animation: circle_bg_anm1sub 5s .5s ease-in-out both infinite running; }
@keyframes circle_bg_anm1loop {
  0% { opacity: 0; transform: rotateZ(-180deg); }
  5% { opacity: 1; transform: rotateZ(0deg); }
  100% { opacity: 0; transform: rotateZ(0deg); }
}
.circle_bg_anm2loop{ position: relative; opacity: 0; transform: rotateZ(180deg); }
.inview-act-start .circle_bg_anm2loop{ animation: circle_bg_anm2sub 6s 2.7s ease-in-out both infinite running; }
@keyframes circle_bg_anm2loop {
  0% { opacity: 0; transform: rotateZ(180deg); }
  5% { opacity: 1; transform: rotateZ(0deg); }
  100% { opacity: 0; transform: rotateZ(0deg); }
}

.bg-animeation .staffcast-l1{ width: calc(3000/3000*100vw); position: absolute; top:210vw; left:0vw; }
.bg-animeation .staffcast-l1 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }
.bg-animeation .staffcast-l2{ width: calc(1845/3000*100vw); position: absolute; top:213vw; right:0vw; }
.bg-animeation .staffcast-l2 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }

.bg-animeation .comics-l1{ width: calc(1708/3000*100vw); position: absolute; top:250vw; left:0vw; }
.bg-animeation .comics-l1 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }
.bg-animeation .comics-l2{ width: calc(1219/3000*100vw); position: absolute; top:259vw; left:0vw; }
.bg-animeation .comics-l2 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }
.bg-animeation .comics-l3{ width: calc(1931/3000*100vw); position: absolute; top:330vw; left:0vw; }
.bg-animeation .comics-l3 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }

.bg-animeation .news-c1{ width: calc(2200/3000*100vw); position: absolute; top:90vw; left:-40vw; }
.bg-animeation .news-c1 > div{ position: relative; opacity: .5; transform: rotateZ(30deg); }
.bg-animeation .news-c2{ width: calc(2200/3000*100vw); position: absolute; top:91vw; left:-40vw; }
.bg-animeation .news-c2 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }

.bg-animeation .intro-c1{ width: calc(1762/3000*100vw); position: absolute; top:150vw; right:-5vw; }
.bg-animeation .intro-c1 > div{ position: relative; opacity: .6; transform: rotateZ(30deg); }

.bg-animeation .staffcast-c1{ width: calc(1422/3000*100vw); position: absolute; top:210vw; left:-5vw; }
.bg-animeation .staffcast-c1 > div{ position: relative; opacity: 1; transform: rotateZ(210deg); }

.bg-animeation .comics-c1{ width: calc(2650/3000*100vw); position: absolute; top:260vw; right:-20vw; }
.bg-animeation .comics-c1 > div{ position: relative; opacity: 1; transform: rotateZ(30deg); }
.bg-animeation .comics-c2{ width: calc(2650/3000*100vw); position: absolute; top:261vw; right:-20vw; }
.bg-animeation .comics-c2 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }

.bg-animeation .character-c1{ width: calc(1500/3000*100vw); position: absolute; top:40vw; left:0; right:0; margin: 0 auto; }
.bg-animeation .character-c1 > div{ position: relative; opacity: .5; transform: rotateZ(30deg); }
.bg-animeation .character-c2{ width: calc(1550/3000*100vw); position: absolute; top:41vw; left:0; right:0; margin: 0 auto; }
.bg-animeation .character-c2 > div{ position: relative; opacity: .5; transform: rotateZ(0deg); }
.bg-animeation .character-c3{ width: calc(2100/3000*100vw); position: absolute; top:25vw; left:0; right:0; margin: 0 auto; }
.bg-animeation .character-c3 > div{ position: relative; opacity: .5; transform: rotateZ(-30deg); }

.bg-animeation .special-c1{ width: calc(2200/3000*100vw); position: absolute; top:-20vw; left:-40vw; }
.bg-animeation .special-c1 > div{ position: relative; opacity: .5; transform: rotateZ(30deg); }
.bg-animeation .special-c2{ width: calc(2200/3000*100vw); position: absolute; top:21vw; right:-40vw; }
.bg-animeation .special-c2 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }

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

/* header */
.part-header{ width: 100%; position: relative; pointer-events: none; position: absolute; padding: .5em 0; margin: 0 auto; }
.sub-page .part-header{ position: relative; background: #FFF ; padding-bottom: calc(2em + 0em); border-bottom:#10c4ff solid 1px; }
.cont-global-logo{ display: none; }
.cont-global-navi{ width: 100%;  }

.global-navi{ display: flex; justify-content: center; margin: 0 auto ; position: relative; }
.global-navi > ul{ display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; padding: 1.6em 0 0 0; margin: 0; position: relative; filter: drop-shadow( 0 0 .25em #FFF) drop-shadow( 0 0 1px #FFF) ; }
.top-page .global-navi > ul{ filter: drop-shadow( 0 0 .25em #fff) drop-shadow( 0 0 1px #112) drop-shadow( 0 0 2px #112) ; }
.global-navi > ul > li{ display: block; padding:0 ; margin: 0; text-align: center; position: relative; }
.global-navi > ul > li.sep{ width: 1.25em; height: 1.5em; background: url("../images/navi/sep.png") no-repeat center .35em; background-size: 1.0em; }
.global-navi > ul > li a{ width: 100%; padding: 0 .15em; display: block; letter-spacing: .05em; line-height: 1; position: relative; color: #006eb3; text-decoration: none; transform-origin: center center; pointer-events: all; font-family: 'Charm', cursive; font-weight: 400; font-size: 1.7em; }
.top-page .global-navi > ul > li a{ color: #fff; }
.global-navi > ul > li a:hover{ color: #c79c07; transform: scale(1.05); }

.header-background{ width: 100%; min-height: 100%; position: absolute; top:0; overflow: hidden; display: none; }
.sub-page .header-background{display: block; }
.header-c1{ width: 50vw; position: absolute; top:-45vw; left:25vw;}
.header-c1 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s .6s ease-in-out both infinite running; }
.header-c2{ width: 35vw; position: absolute; top:15vw; left:40vw;}
.header-c2 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s -.6s ease-in-out both infinite running; }
.header-c3{ width: 50vw; position: absolute; top:-25vw; left:15vw; transform: rotate(60deg); opacity: .5;}
.header-c3 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s 2.6s ease-in-out both infinite running; }
.header-c4{ width: 40vw; position: absolute; top:-20vw; left:50vw; transform: rotate(-60deg);}
.header-c4 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s 3.6s ease-in-out both infinite running; }

.cont-sp-btn{ display: none; }


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


.cont-upper{ width: 100%; margin: 0 auto; position: relative; z-index: 2; }
.sub-page .cont-upper{ display: none; }
.cont-middle{ width: 100%; margin: 0 auto; position: relative; overflow: visible; z-index: 1; }
.sub-page .cont-middle{  }
.cont-bottom{ width: 100%; margin: 0 auto; position: relative; }

.sub-logo{ display: none; width: calc(590/3000*100vw); position: relative; padding-top: 3em; margin: 0 auto 2em auto; z-index: 2; }

.cont-season-btn{ width: 100%; height: 3.5em; position: relative; border-bottom:#10c4ff solid 1px; background-color: #FFF; /*background: linear-gradient(0deg,rgba(0, 110, 179, 1) 0%, rgba(11, 172, 206, 1) 100%);*/ pointer-events: auto; }
.cont-season-btn nav{ display: flex; position: absolute; justify-content: center; top:calc(.7em); left:0; right:0; margin: 0 auto; }
.cont-season-btn nav .sn{ width: calc(427/3000*100vw); height: calc(126/3000*100vw); margin: 0 .25em; text-align: center; }
.cont-season-btn nav .sn a{ display: block; width: 100%; height: 100%; position: relative; text-decoration: none; color: #006eb3;  font-family: 'Charm', cursive; font-weight: 400; line-height: 1.3; }
.cont-season-btn nav .sn a span{  font-size: 2em; letter-spacing: .05em; }
.cont-season-btn nav .sn a:hover,
.cont-season-btn nav .sn.crt a{ color: #FFF; background: url("../images/navi/season-navi-bg.webp") no-repeat center top; background-size: contain; }
.cont-season-btn nav .sn.crt a{ pointer-events: none; }
.cont-season-btn nav .sn.off a{ color: #aaa; }
.cont-season-btn nav .sn.off a{ pointer-events: none; }

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

.top-subtitle{ font-size: 1em; width: calc(900/3000*100vw); margin: 0 auto 2.5em auto; z-index: 2; position: relative; }
.top-subtitle > span{}

.top-subtitle-marker{ width: calc(99/3000*100vw); height: calc(114/3000*100vw);  background:url("../images/top-title-marker.png") no-repeat center center; background-size: contain; margin: 0 auto 2.5em auto; }

.sub-subtitle{ font-size: 1em; width: calc(900/3000*100vw); margin: 0 auto 3em auto; z-index: 2; position: relative; }
.sub-subtitle > span{ }

.block-title2{ padding: 1em 0; text-align: center; border-top: 1px solid; border-bottom: 1px solid; border-image: linear-gradient(to right, rgba(16, 196, 255, 0),#10c4ff,#006eb3, #10c4ff,rgba(16, 196, 255, 0)) 1; background-color: rgba(255, 255, 255, 0.5); }
.block-title2 .label{ font-size: 1.6em; letter-spacing: .05em; font-family:YakuHanJPs_Noto, 'Noto Sans JP', sans-serif; }

.cont-cat-navi{ position: relative; margin: 0 auto;}
.cat-navi{ width: 100%; margin: 0; position: relative; }
.cat-navi > ul{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; list-style-type: none; padding: 0; margin: 0; position: relative; }
.cat-navi > ul > li{ display: block; padding: 3px ; margin: .5em ; letter-spacing: .1em; line-height: 1; position: relative; border:#006eb2 solid 2px; border-radius: 2em;}
.cat-navi > ul > li.sep{ width: 100%; height: 1px; padding: 0; margin: 0 ; border:none; }
.cat-navi > ul > li a{ padding: .75em 1em; text-decoration: none; position: relative; display: block; pointer-events: auto;  background-color: #fff; color: #006eb2; border:#006eb2 solid 1px; border-radius: 2em; }
.cat-navi > ul > li a .label{ font-size: 1.1em; font-weight: normal; position: relative; }
.cat-navi > ul > li a:hover{ color: #c79c07;}
.cat-navi > ul > li.crt{ border-color: #c79c07;}
.cat-navi > ul > li.crt a{ border-color: #c79c07;color: #c79c07; pointer-events: none;}

/* pagetop */
.global-pagetop{ width: 100%; height: calc( 200/3000 * 100vw ); margin: 0 0 2em 0; position: sticky; bottom:2em; z-index: 10; pointer-events: none; }
.pagetop-button{ width: calc( 200/3000 * 100vw ); height: calc( 200/3000 * 100vw ); position: relative; margin: 0 2em 0 auto; pointer-events: auto; }
.pagetop-button a{ display: block; position: relative; width: 100%; min-height: 100%; background:url("../images/common/pagetop.png") no-repeat center center; background-size: contain; }
.pagetop-button a:hover{ transform: scale(1.1); }
.pagetop-button{ opacity: 0; }
.pagetop-button.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;}


/* footer */
.cont-global-footer{ width: 100%; margin: 0 auto; padding: 2em 0; position: relative; text-align: center; background: linear-gradient(0deg, rgba(0,196,181,1) 0%, rgba(0,193,208,1) 100%); }

.footer-background{ width: 100%; min-height: 100%; position: absolute; top:0; overflow: hidden; }
.footer-c1{ width: 50vw; position: absolute; top:-35vw; left:25vw;}
.footer-c1 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s .6s ease-in-out both infinite running; }
.footer-c2{ width: 35vw; position: absolute; top:5vw; left:40vw;}
.footer-c2 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s -.6s ease-in-out both infinite running; }
.footer-c3{ width: 50vw; position: absolute; top:-15vw; left:15vw; transform: rotate(60deg); opacity: .5;}
.footer-c3 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s 2.6s ease-in-out both infinite running; }
.footer-c4{ width: 40vw; position: absolute; top:-10vw; left:50vw; transform: rotate(-60deg);}
.footer-c4 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s 3.6s ease-in-out both infinite running; }

.footer-logo{ width: 100%; position: relative; z-index: 3; }
.footer-logo > div{ position: relative; width: calc( 329/3000 * 100vw ); margin: 0 auto 1.5em auto;  }
.footer-copyrihgt{ position: relative; z-index: 3; }
.footer-copyrihgt p{ font-size: .9em; margin-bottom: 0; color: #FFF; }


/* content */
.inview{ animation:inview 0.4s .2s ease-out both paused; }
.inview-start{ animation:inview-start 0.4s .2s ease-out both running; }
.inview-act{ transform-origin: left top; transition: all .5s ease .1s;  }

.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{ background-color:#FFF; padding: .2em;}
.frame-a > .dbl-l{ border:#000 solid 1px; }

.frame-b{ background-color:#FFF; padding: 1.5em; border:#80ceff solid 1px;}

.frame-c{ padding: .5em; display: block; background-color: rgba(243, 254, 254, 0.5); position: relative; }
.frame-c:before{ content:""; pointer-events: none; width: 3em; height: 3em; position: absolute; top:0; right:0; border-top:#c79c07 solid 1px; border-right:#c79c07 solid 1px; }
.frame-c:after{ content:""; pointer-events: none; width: 3em; height: 3em; position: absolute; bottom:0; left:0; border-bottom:#c79c07 solid 1px; border-left:#c79c07 solid 1px; }

.sep-line-a{ width: 100%; height: 3px; margin: 1em 0; border-top:#c79c07 solid 1px; border-bottom:#10c4ff solid 1px; }

.text-box-a{ padding: 1.25em; background-color: rgba(243, 254, 254, 0.5); position: relative; }
.text-box-a:before{ content:""; pointer-events: none; width: 5em; height: 5em; position: absolute; top:0; right:0; border-top:#c79c07 solid 1px; border-right:#c79c07 solid 1px; }
.text-box-a:after{ content:""; pointer-events: none; width: 5em; height: 5em; position: absolute; bottom:0; left:0; border-bottom:#c79c07 solid 1px; border-left:#c79c07 solid 1px; }
.text-box-a .text{ margin: 0; letter-spacing: .05em; line-height: 2; position: relative; z-index: 6; }

.sdw-1{ filter: drop-shadow(0 0 .5em rgba(0,0,0,1)); }
.sdw-2{ filter: drop-shadow(0 0 .5em #d7000f); }
.sdw-3{ text-shadow:-1px 0px 0px #000,1px 0px 0px #000; filter: drop-shadow(0 0 .5em #fb00ff); }

/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 0; margin: 0 0 8em 0; position: relative; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 1em 0; z-index: 2; }
.content-entry .entry-date{ color: #c79c07; font-family: 'Charm', cursive; font-weight: 400; margin-bottom: 0; pointer-events: none; text-align: center; }
.content-entry .entry-date > span{ display: inline-block; font-size: 1.333em; line-height: 1; letter-spacing: .1em; padding: .25em .5em; margin-bottom: .5em;  border-bottom:#c79c07 solid 1px;}
.content-entry .entry-title{ display: flex; flex-wrap: nowrap; align-items: center; padding: 1.5em 0 0 0; margin-bottom: 0; position: relative; border-top:#10c4ff solid 1px; }
.content-entry .entry-title .marker{ width:5em; padding-right: 1.5em; position: relative; }
.content-entry .entry-title .text{ color: #006eb2; position: relative; line-height: 1.8; }
.content-entry .entry-title .text > span{ font-weight: 700; font-size: 1.466em; background-color: rgba(0,195,180,.0); padding: 0; letter-spacing: .1em; }
.content-entry .entry-body{ position: relative; padding: .5em 0 0 0; font-size: 1.2em; letter-spacing: .05em; line-height: 1.8;  z-index: 2; }

.entry-background{ width: 100%; min-height: 100%; position: absolute; top:0; z-index: 1; }
.entry-background .sub-c1{ width: calc(2650/3000*100vw); position: fixed; top:10%; right:-20vw; }
.entry-background .sub-c1 > div{ position: relative; opacity: .4; transform: rotateZ(30deg); }
.entry-background .sub-c2{ width: calc(2650/3000*100vw); position: fixed; top:11%; right:-20vw; }
.entry-background .sub-c2 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }
.entry-background .sub-c3{ width: calc(1200/3000*100vw); position: fixed; top:30%; left:-20vw; }
.entry-background .sub-c3 > div{ position: relative; opacity: .3; transform: rotateZ(30deg); }
.entry-background .sub-c4{ width: calc(900/3000*100vw); position: fixed; top:50%; right:-20vw; }
.entry-background .sub-c4 > div{ position: relative; opacity: .5; transform: rotateZ(-30deg); }
.entry-background .sub-c5{ width: calc(1500/3000*100vw); position: fixed; top:70%; left:-20vw; }
.entry-background .sub-c5 > div{ position: relative; opacity: .1; transform: rotateZ(30deg); }
.entry-background .sub-c6{ width: calc(1500/3000*100vw); position: fixed; top:71%; left:-20vw; }
.entry-background .sub-c6 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }

.content-single{ padding: 0; margin: 0 0 8em 0; position: relative; }
.content-single .entry-head{ margin-bottom: 0; position: relative; padding: 1em 0; z-index: 2; }
.content-single .entry-title{ display: flex; flex-wrap: nowrap; align-items: center; padding: 0 0 1em 0; margin-bottom: 0; position: relative; border-bottom:#10c4ff solid 1px; }
.content-single .entry-title .text{ color: #c79c07; position: relative; line-height: 1.8; }
.content-single .entry-title .text > span{ font-weight: 700; font-size: 1.466em; background-color: rgba(0,195,180,.0); padding: 0; letter-spacing: .1em; }
.content-single .entry-body{ position: relative; padding: .5em 0 0 0; font-size: 1.2em; letter-spacing: .05em; line-height: 1.8;  z-index: 2; }

.modal-data{ display: none; }
.cont-modal{ width: 100%; margin: 0 auto; }
.modal-il-container{ width: calc(2400/3000*100vw); margin: 0 auto; background-color: #FFF; }

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

.files-cont-navi{ position: relative; display: flex; }
.cont-files-data{ position: relative; }
.files-data{ position: relative; display: none; pointer-events:auto; }
.files-data.crt{ display: block; animation: fadeIn .5s 0s ease-out both;  }

/* modaal */
.modaal-overlay{ background: rgba(242,246,255,.9); }
.modaal-wrapper{ overflow-x: hidden; }
.modaal-inner-wrapper{ padding: 80px 0; }
.modaal-container{ background-color: transparent; box-shadow:none; max-width: inherit; }
.modaal-content-container{ padding: 0; }
.modaal-video-wrap{ margin: auto auto; }
.modaal-close{ right: 2.5em; top: 1.5em; width: 5em; height: 5em; }
/* .modaal-close:before,.modaal-close:after{ background-color: #505456; border-radius: 0; top: .4em; left: 2em; width: .4em; height: 4em; }
.modaal-close:focus,.modaal-close:hover {background: transparent;}
.modaal-close:focus:before,.modaal-close:focus:after{background: #e93922;}
.modaal-close:hover:before,.modaal-close:hover:after{background: #ee86a7;} */
.modaal-wrapper .modaal-close{ background:url("../images/common/modal-close.png") no-repeat center center; background-size:contain;}
.modaal-close:hover { transform: scale(1.1); }
.modaal-close:before,.modaal-close:after{ display: none; }

/* colorbox customize */
#colorbox{}
#cboxOverlay{ background:rgba(255,255,255,.5) ; /*background:rgba(0,0,0,.7) ;*/ }
#cboxTitle{ visibility: hidden; }
#cboxContent{/*  margin:3.61em 2.22em 0 2.22em; */ background:rgba(255,255,255,0); position: relative;}
#cboxLoadedContent{ padding:3.61em 2.22em 0 2.22em; border:none; background:rgba(255,255,255,0); }

#cboxClose{top: 0 /* -3.61em */ ; right: 0 /* 0.27em */ ; display:block; background:url(../images/lib/colorbox/close.png) no-repeat top center; background-size: contain; width:3.34em ; height:3.34em ; }
#cboxClose:hover{ background-position: top center; }
#cboxPrevious{top:60%; left: 0.27em /* -2.22em */; display:block; background:url(../images/lib/colorbox/prev.png) no-repeat top center; background-size: contain; width:1.667em ; height: 5em ; }
#cboxPrevious:hover{ background-position: top center; }
#cboxNext{top:60%; left:inherit; right: 0.27em /* -2.22em */; display:block; background:url(../images/lib/colorbox/next.png) no-repeat top center; background-size: contain; width:1.667em ; height: 5em ; }
#cboxNext:hover{ background-position: top center; }
#cboxCurrent{ display: none !important; }
#cboxLoadingGraphic{ background-image: url(../images/lib/colorbox/loading-custom.gif); }
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

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

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

/* TOP-PAGE */
/* main */

.cont-top-visual{ position: relative; text-align: center; }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{ position: relative; margin: 0 auto; /*padding: 0 0 9vw 0;*/ padding: 0 0 10vw 0; overflow: hidden; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ position: relative; top:inherit; 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; }
.kv-container .nvbg{ display: none; width: 100%; height: 6vw; background: linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.4) 49.5%,rgba(255,255,255,0.4) 50.5%, rgba(255,255,255,0) 80%); top:0; left:0; right: 0; margin: 0 auto; }
.kv-container .logo{ width: calc(2001/3000*100vw*0.85); top:105vw; left:0; right: 0; margin: 0 auto; filter: drop-shadow( 0 0 .25em #FFF) drop-shadow( 0 0 1px #FFF) ;  }
.kv-container .oa{ width: calc(1624/3000*100vw); top:143vw; left:0; right: 0; margin: 0 auto; }
.kv-container .badge{ width: calc(543/3000*100vw); top:94vw; right: 1vw; margin: 0; }
.kv-container .badge2{ width: calc(543/3000*100vw); top:74vw; right: 1vw; margin: 0; }

.kv-container .catch{ width: calc(198/3000*100vw); top:7vw; left:2.0vw; margin: 0; visibility: hidden; }
.kv-container .catch2{ width: calc(198/3000*100vw); top:7vw; left:2.0vw; margin: 0; visibility: hidden; }
.kv-container[data-kv="k1"] .catch{ visibility: visible; }
.kv-container[data-kv="k2"] .catch{ visibility: visible; }
.kv-container[data-kv="k3"] .catch{ visibility: visible; }
.kv-container[data-kv="k4"] .catch2{ visibility: visible; }
/* .kv8 .kv-container .catch{ visibility: hidden; } */

.kv-container .vis-switch{ /*width: 30vw;*/ display: flex; flex-wrap: nowrap; justify-content: center; position: absolute; top: unset; top:132vw; left:0; right: 0; margin: 0 auto; z-index: 2;  filter: drop-shadow(.25em .25em 0 rgba(60, 176, 236, 0.2)); }
.kv-container .vis-switch > div{ width: 10vw; padding: .5em; margin: 0; }
.kv-container .vis-switch > div a{ display: block; position: relative; line-height: 1; border:#FFF solid 3px; border-radius: 15em; }
.kv-container .vis-switch > div a span{ display: block; }
.kv-container .vis-switch > div.on{ pointer-events: none; }
.kv-container .vis-switch > div.on a{ border-color: #006eb2;}
.kv-container .vis-switch > div.on a span{ opacity: 1; }

#Foreground .opening{ position: fixed; overflow: hidden; pointer-events: all; }
#Foreground .opening .bg{ width: 100%; height: 100vh; position: absolute; top:0; background:#fff url("../assets/top/op/bg.webp") no-repeat center center; background-size: cover; }
#Foreground .opening .lbg{ width: 100%; height: 100vh; position: absolute; top:0; background:#fff url("../images/common/background.webp") repeat-y center top; background-size: 100%; }
#Foreground .opening .logo{ width: calc(1370/3000*100vw); position: absolute; top:15vh; left:0; right: 0; margin: 0 auto; opacity: 1;}
#Foreground .opening .oa{ width: calc(1624/3000*100vw); position: absolute; top:calc(15vh + 23vw); left:0; right: 0; margin: 0 auto; opacity: 1;}
#Foreground .opening .line{ width: 100%; height: 100vh; position: absolute; top:0; overflow: hidden; }

#Foreground .opening .line .op-l1{ width: calc(1763/3000*100vw); position: absolute; top:-45vw; left:-20vw }
#Foreground .opening .line .op-l2{ width: calc(2985/3000*100vw); position: absolute; top:30vw; left:-45vw }
#Foreground .opening .line .op-l3{ width: calc(780/3000*100vw); position: absolute; top:-10vw; left:47.5vw }
#Foreground .opening .line .op-l4{ width: calc(2430/3000*100vw); position: absolute; top:-10vw; left:23vw }
#Foreground .opening .line .op-c1{ width: calc(1944/3000*100vw); position: absolute; top:10vw; left:15vw }
#Foreground .opening .line .op-c2{ width: calc(2403/3000*100vw); position: absolute; top:5vw; left:13vw }

#Foreground .opening .line .op-c1 .circle_bg_anm1{ position: relative; opacity: 0; transform: rotateZ(-180deg); }
#Foreground .opening .line .op-c2 .circle_bg_anm2{ position: relative; opacity: 0; transform: rotateZ(60deg); }

/* cookie */
.fst #Foreground .opening .vis{ opacity: 1; }
.vst #Foreground .opening { display: none; }

.kv-container .grp .vis-grp .vis{ transform: scale(1.75) translateY(15%); opacity: 0; }
.yoko .kv-container .grp .vis-grp .vis{ transform: scale(1.6) translateY(15%); }
.kv-container .logo{ opacity: 0; transform: stranslateY(-10%); }
.kv-container .oa{ opacity: 0; transform: stranslateY(10%);  }
.kv-container .badge{ opacity: 0; transform: scale(1.1); }
.kv-container .badge2{ opacity: 0; transform: scale(1.1); }
.kv-container .catch{ opacity: 0; transform: stranslateY(10%);  }
.kv-container .catch2{ opacity: 0; transform: stranslateY(10%);  }
.kv-container .vis-switch{ opacity: 0; visibility: hidden; pointer-events: none; }

#Foreground .opening .logo{ opacity: 0; }
#Foreground .opening .oa{ opacity: 0; }
#Foreground .opening .line .op-l1{ opacity: 0; }
#Foreground .opening .line .op-l2{ opacity: 0; }
#Foreground .opening .line .op-l3{ opacity: 0; }
#Foreground .opening .line .op-l4{ opacity: 0; }
#Foreground .opening .line .op-c1{ width: calc(1944/3000*100vw); position: absolute; top:10vw; left:15vw }


.s0 #Foreground .opening .line .op-c1 .circle_bg_anm1{ animation: circle_bg_anm1 1s .0s ease-in-out both 1 running; }
.s0 #Foreground .opening .line .op-c2 .circle_bg_anm2{ animation: circle_bg_anm2 1s .5s ease-in-out both 1 running; }

.s1 #Foreground .opening .line .op-l1{ opacity: 1; transform: translate(0%,0%); transition: all .5s ease-out 0s; }
.s1 #Foreground .opening .line .op-l2{ opacity: 1; transform: translate(0%,0%); transition: all .5s ease-out 0.1s; }
.s1 #Foreground .opening .line .op-l3{ opacity: 1; transform: translate(0%,0%); transition: all .5s ease-out 0.2s; }
.s1 #Foreground .opening .line .op-l4{ opacity: 1; transform: translate(0%,0%); transition: all .5s ease-out 0.3s; }
.s1 #Foreground .opening .logo{ opacity: 1; transition: all 1.0s ease-out .5s; }
.s1 #Foreground .opening .oa{ opacity: 1; transition: all 1.0s ease-out .75s; }

.s4 #Foreground .opening .lbg{ opacity: 0;  transition: all 1.0s ease-out 0s; }

.s5 .kv-container .grp .vis-grp .vis{ opacity: 1; transition: all 1.75s ease-out .25s; }
.s5 #Foreground .opening{ opacity: 0; transition: all 1.0s ease-out 0s; pointer-events: none; }

.s6.tate .kv-container .grp .vis-grp .vis{ transform: scale(1) translateY(0); transition: all 3.5s ease-in-out 0s; }
.s6.yoko .kv-container .grp .vis-grp .vis{ transform: scale(1.5) translateY(0); transition: all 3.5s ease-in-out 0s; }

.s7 .kv-container .logo{ opacity: 1; transform: stranslateY(0%); transition: all 1.25s ease-out 0s; }
.s7 .kv-container .oa{ opacity: 1; transform: stranslateY(0%); transition: all 1.25s ease-out 0s; }
.s7 .kv-container .badge{ opacity: 1; transform: scale(1); transition: all 1.25s ease-out .5s; }
.s7 .kv-container .badge2{ opacity: 1; transform: scale(1); transition: all 1.25s ease-out 1s; }
.s7 .kv-container .catch{ opacity: 1; transform: stranslateY(0%); transition: opacity 1.25s ease-out 1.75s, transform 1.25s ease-out 1.75s; }
.s7 .kv-container .catch2{ opacity: 1; transform: stranslateY(0%); transition: opacity 1.25s ease-out 1.75s, transform 1.25s ease-out 1.75s; }
.s7 .kv-container .vis-switch{ opacity: 1; visibility: visible; pointer-events: auto; transition: all 1.25s ease-out 2s;}

.s8 #Foreground .opening{ opacity: 0; pointer-events: none; }
/* .s8.tate .kv-container .grp .vis-grp .vis{ transform: scale(1) translateY(0%); transition: all 1.75s ease-in-out 0s; } */
.s8.yoko .kv-container .grp .vis-grp .vis{ transform: scale(1) translateY(0%); transition: all 1.75s ease-in-out 0s; }

/* .s8 .kv-container .grp .vis-grp .vis{ transform: scale(1) translateY(0%); opacity: 1; } */


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

/* top-navi */
.cont-top-navi{ display: none;  }

.top-page .cont-middle{ margin-top: -.2em; }


/* top-movie */
.cont-top-movie{ z-index: 6; }
.cont-top-movie{ margin: -5.2vw auto 0 auto; padding: 6vw 0 2vw 0; background: rgba(255, 255, 255, 0.25); }
.cont-top-movie.cont-top-content > .inner{ padding:1em 0; }
.cont-top-movie .movie-list{ width: 100%; display: flex; justify-content: center; align-items: stretch; position: relative; margin: 0 auto;  filter: drop-shadow(.25em .25em 0 rgba(60, 176, 236, 0.2)); }
.cont-top-movie .movie-list .thm{ width: calc(1720/3000*100vw); margin: 0 1em; }
.cont-top-movie .movie-list .thm-side{ width: 10em; background-color: #1e1e1e; flex-grow: 2; }
.cont-top-movie .movie-list .thm a{ position: relative; display: block; pointer-events: all; cursor: pointer; }
.cont-top-movie .movie-list .thm a::after{ content:""; position: absolute; display: block; width:100%; min-height:100%; background:url("../images/common/play-btn.png") no-repeat center center; background-size: 7em; transform-origin: center center; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1; pointer-events: none; }
.cont-top-movie .movie-list .thm a:hover::after{ background-image:url("../images/common/play-btn.png"); background-size: 7.7em; }

.cont-top-movie .movie-list .thm > a{ opacity: 1; }
/* .cont-top-movie .movie-list .thm.slick-current > a{ opacity: 1; pointer-events: auto; } */

.top-movie-cursor{ position: relative; width: 98vw; top:inherit; 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(240/3000*100vw); height: calc(200/3000*100vw); position: relative; pointer-events: all; cursor: pointer; }
.top-movie-cursor ul li span{ display: block; width:100%; height: 100%; background: url("../images/common/cursor.webp") no-repeat center center; background-size: 58.67%; transform-origin: center center; }
.top-movie-cursor ul li a,
.top-movie-cursor ul li a:hover{ text-decoration: none; }
.top-movie-cursor ul li span:hover{ transform: scale(1.1,1.1);}
.top-movie-cursor ul li.left span{ transform: scale(-1,1); }
.top-movie-cursor ul li.left span:hover{ transform: scale(-1.1,1.1); }
.top-movie-cursor ul li.off{ pointer-events: none; opacity: .5; }


/* top-banner */
.cont-top-banner{ position: relative;  }

.top-banner-container{  display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.top-banner-container .banner{ width:calc(1300/3000*100vw); text-align: center; margin: 1em; }

/* top-news */
.cont-top-news{ position: relative;  }

.cont-top-news > .inner{ width: calc(1800/3000*100vw); margin: 0 auto; padding: 3em 0; position: relative; }
.top-news-container{ padding:0; position: relative; z-index: 3; }
.top-news-container > a{ display: block; padding: 1em 0; margin-bottom: .5em; pointer-events: all; letter-spacing: .1em; }
.top-news-container > a dl{ padding: 0; margin: 0; display: flex; flex-wrap: nowrap; align-items: stretch; }
.top-news-container > a dl dt{ width: 14%; font-size: 1.133em; display: block; padding: .25em .5em; margin: 0; line-height: 1.5; font-weight: normal; color: #c79c07; border-bottom:#c79c07 solid 1px; }
.top-news-container > a dl dd{ width: 86%; font-size: 1.133em; display: block; padding: .25em .5em; margin: 0; line-height: 1.5; border-bottom:#10c4ff solid 1px; }
.top-news-container > a,
.top-news-container > a:visited{ text-decoration: none; color: #006eb2; }
.top-news-container > a:hover{ text-decoration: none; color: #c79c07; border-color:#c79c07;  }
.top-news-container > a:hover dl dd{ border-color:#c79c07;  }

.news-more-button{ text-align: right; font-size: 1.5em; font-family: 'Charm', cursive; }
.news-more-button > a,
.news-more-button > a:visited{ text-decoration: none; color: #006eb2; }
.news-more-button > a:hover{ text-decoration: none; color: #c79c07; text-decoration: none; }







/* SUB-PAGE */

.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 20vw);}

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.news{ width: calc(234/3000*100vw); margin: 0 auto 4em auto;  }
.sub-news-container{ position: relative; }

.onairlist-news{}
.onairlist-news > a{ display: block; margin-right: 1em; }
.onairlist-news > a:before{ content:"> "; }
.onairlist-news > a,
.onairlist-news > a:visited,
.onairlist-news > a:active{ color: #006eb2; background-color: transparent; }
.onairlist-news > a:hover{ text-decoration: none; color: #c79c07;  }

/* onair */
.cont-sub-onair{ }
.cont-sub-onair > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.onair{ width: calc(310/3000*100vw); margin: 0 auto 4em auto;  }
.sub-onair-container{ position: relative; }

.onair-list-container{ max-width: 80%; margin: 0 auto; }
.onair-list{ margin: 0 auto .5em auto ; }
.onair-list{ display: flex; flex-wrap: wrap; justify-content: center; text-align: left; padding: 1.0em; background-color: #fff; border-radius: 1em; border:#006eb2 solid .2vw; }
.onair-list.first{  }
.onair-list .col-a{ width: 41%; }
.onair-list .col-b{ width: 59%; }
.onair-list .col-c{ width: 100%; }
.onair-list .col-d{ width: 59%; margin-left: 41%; }
.onair-list .name{ font-size: 1.2em; font-weight: bold; margin-bottom: 0; letter-spacing: .05em; color: #006eb2; }
.onair-list .schd{ font-size: 1.2em; font-weight: bold; margin-bottom: 0; letter-spacing: .05em; color: #006eb2; display: inline-block; width: 6.5em; }
.onair-list .time{ font-size: 1.2em; font-weight: bold; margin-bottom: 0; letter-spacing: .05em; color: #006eb2; display: inline-block; }
.onair-list .extr{ font-size: .9em; font-weight: bold; margin: .3em 0 0.1em 0; letter-spacing: .05em; color: #006eb2;}
a.onair-list { text-decoration: none; color: #000; pointer-events: all; }
a.onair-list:hover{ color: #000; background-color: #08936c; }

.onair-list-il-container{ max-width: 55em; margin: 0 auto;  }
.onair-list-il{ margin: 0 auto; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.onair-list-il > a{ width: 32%; margin: 0.5%; display: flex; align-items: center; justify-content: center; color: #006eb2; padding: .5em .2em; background-color: #fff; border:#006eb2 solid .2vw; border-radius: 1em; text-decoration: none; font-weight: 600; }
.onair-list-il > a span{ display: block;  }
.onair-list-il > a.cs{ pointer-events: none; }
.onair-list-il > a:hover{ background-color: #006eb2; color: #fff;}


/* intro */
.cont-sub-intro{ }
.cont-sub-intro > .inner{ width: 100%; margin: 0 auto;  }
.sub-subtitle.intro{ width: calc(596/3000*100vw); margin: 0 auto 4em auto;  }
.sub-intro-container{ position: relative; }
.intro-text{ font-size: 1.4em; line-height: 2.0; letter-spacing: .05em; text-align: center; position: relative; z-index: 3; }
/* .intro-text p{ margin: 0; font-size: 1.466em; letter-spacing: .05em; line-height: 2.4; position: relative; z-index: 6; } */


/* story */
.cont-sub-story{ }
.cont-sub-story > .inner{ width: 100%; margin: 0 auto;  }
.sub-subtitle.story{ width: calc(252/3000*100vw); margin: 0 auto 4em auto;  }
.sub-story-container{ position: relative; }

#StoryCont{ background-color: rgba(88, 190, 255, 0.2); padding-top: 3vw; padding-bottom: 3vw;  }

.cont-story-navi{ width: 90%; margin: 0 auto; }
.story-navi{ width: 100%; margin: 0 auto;  padding: .25em; border-radius: 0; }
.story-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.story-navi ul li{ width: 3.5em; height: 3.5em; display: block; margin: .5em; padding:0; text-align: center; }
.story-navi ul li.n0{ width: 10.5em; }
.story-navi ul li.spc-sp{ display: none; }
.story-navi ul li a{ width: 3.5em; height: 3.5em; padding-top: 1.1em; color: #006eb2; background: #fff; border-radius: 100vw; display: block; width: 100%; transition: all .1s ease 0s; text-decoration: none; position: relative; line-height: 1; }
.story-navi ul li.n0 a{ width: 10.5em; }
.story-navi ul li a span{ font-size: 1.4em; font-weight: normal; font-family: 'Charm', cursive; position: relative; }
.story-navi ul li.n0 a span{ font-size: 1.6em; letter-spacing: .05em; }
.story-navi ul li a:hover{ transform: scale(1.1,1.1); color: #c79c07; }
.story-navi ul li.crt a{ pointer-events: none; background-color:#c79c07; color: #fff; }
.story-navi ul li.cs a{ pointer-events: none; opacity: .5; }

.cont-story-data{ width:100%; min-height: 60vw; margin: 0 auto; position: relative;  }
.cont-story-data{  }

.story-data{ display: none; }
.story-data{ position: relative; pointer-events:none; text-align: center;  }
.story-data .episode-container{ position: relative; padding: 1em 0 ; }

.story-data .ep-slider-sceneImage{ width: 100%; margin:0 auto 2em auto ; position: relative; z-index: 2;  }
.story-data .ep-slider-sceneImage .sld{ position: relative; padding: 1em; text-align: center;  }
.story-data .ep-slider-sceneImage .sld .img{ border-radius: 0; border:#FFF solid 4px; overflow: hidden; }

.ep-slider-dots{ text-align: center; margin-top: 1em; pointer-events: auto;}
.ep-slider-dots ul{ display: block; list-style-type: none; padding: 0; margin: 0; }
.ep-slider-dots li { display: inline-block; margin: 0 3em 0 -1em; padding: 0;}
.ep-slider-dots button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.ep-slider-dots li button { position: relative; text-indent: -9999px;}
.ep-slider-dots li button:before { content: "●"; color: #fff; font-size: 1.0em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.ep-slider-dots li.slick-active button:before { color: #c79c07;}

.ep-text-container{ text-align: center; width: inherit; margin: 0 auto 1em auto; position: relative; z-index: 2; }

.story-data .ep-number{ display: inline-block; color:#006eb2;  padding: .5em 8.5em; border-bottom:#006eb2 solid 1px;  margin-bottom: 1em; letter-spacing: .2em; position: relative; }
.story-data .ep-number > span{  font-size: 1.6em; font-family: 'Charm', cursive; }
.story-data .ep-number.intro{ padding: 2.5em 10.5em; border-bottom:#006eb2 solid 1px;  margin-bottom: 3.5em; letter-spacing: .2em; position: relative; }
.story-data .ep-number.intro > span{  font-size: 2.9em;  }

.story-data .ep-title{ font-size: 1em; margin-bottom: 2em; letter-spacing: .2em; position: relative; }
.story-data .ep-title > span{ color:#006eb2; font-size: 2.6em; font-weight: bold; }
.story-data .ep-title [data-ruby]::before { top: -1.0em; transform: scale(0.4,0.45); }
.story-data .ep-sep{ width: 100%; height: 1px; background-color: #000; margin: 0 auto 1em auto; }

.story-data .ep-text{ max-width: 55%; padding: 2em; margin: 0 auto; background-color: rgba(243, 254, 254, 0.5); position: relative; }
.story-data .ep-text:before{ content:""; pointer-events: none; width: 5em; height: 5em; position: absolute; top:0; right:0; border-top:#c79c07 solid 1px; border-right:#c79c07 solid 1px; }
.story-data .ep-text:after{ content:""; pointer-events: none; width: 5em; height: 5em; position: absolute; bottom:0; left:0; border-bottom:#c79c07 solid 1px; border-left:#c79c07 solid 1px; }
.story-data .ep-text p{ margin: 0; font-size: 1.4em; letter-spacing: .05em; line-height: 2; position: relative; z-index: 6; }

.story-data .ep-staff{ margin-bottom: 2em; position: relative; z-index: 2; }
.story-data .ep-staff p{ color:#006eb2; font-size: 1em; line-height: 1.8; letter-spacing: .1em; display: inline; }

.story-data .ep-trailer{ width: 40%; margin: 0 auto; position: relative; pointer-events: auto; z-index: 2; }
.story-data .ep-trailer .thm a{ position: relative; display: block; pointer-events: all; cursor: pointer; }
.story-data .ep-trailer .thm a::after{ content:""; position: absolute; display: block; width:100%; min-height:100%; background:url("../images/common/play-btn.png") no-repeat center center; background-size: 7em; transform-origin: center center; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1; pointer-events: none; }
.story-data .ep-trailer .thm a:hover::after{ background-image:url("../images/common/play-btn.png"); background-size: 7.7em; }


.story-data.crt{ display: block; animation: fadeIn .5s 0s ease-out both;  }


/* staffcast */
.cont-sub-staffcast{ }
.cont-sub-staffcast > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.staffcast{ width: calc(542/3000*100vw); margin: 0 auto 4em auto;  }

.staffcast-container{ position: relative;  }
.staffcast-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-list > div{ width: 25%; }
.staffcast-list > div.full{ width: 100%; }
.staffcast-list > div.p60{ width: 60%; }
.staffcast-list > div.p50{ width: 50%; }
.staffcast-list > div.p40{ width: 40%; }
.staffcast-list > div.p33{ width: 30%; }
.staffcast-list > div.p30{ width: 30%; }
.staffcast-list > div.p25{ width: 25%; }
.staffcast-list > div.p20{ width: 20%; }
.staffcast-list > div.sep{ width: 100%; height: 1px; }
.staffcast-list > div.sep.pc{  }
.staffcast-list > div.sep.sp{ display: none; }
.staffcast-list > div > div{ margin-bottom: 2em; position: relative; }
.staffcast-list .pos{ display: block; font-size: 1.2em; letter-spacing: .05em;  margin-bottom: .5em; line-height: 1; }
.staffcast-list .name{ display: inline-block; font-size: 1.4em; font-weight: 700; letter-spacing: .1em; margin-bottom: 0; line-height: 1; position: relative; }
.staffcast-list .ext{ display: block; font-size: .9em; letter-spacing: .1em; padding-top: .5em; margin-bottom: 0; line-height: 1; }

.staffcast-list .cmt{ display: inline-block; width: 1.5em; position: absolute; top:-0.3em; left:calc(50% + 2.0em); text-decoration: none; pointer-events: auto; transition: all .25s ease-out 0s; }
.staffcast-list .cmt.ch2{ left:calc(50% + 1.5em); }
.staffcast-list .cmt.ch4{ left:calc(50% + 2.5em); }
.staffcast-list .cmt.ch5{ left:calc(50% + 3.0em); }
.staffcast-list .cmt.ch6{ left:calc(50% + 3.5em); }
.staffcast-list .cmt.ch7{ left:calc(50% + 4em); }
.staffcast-list .cmt.ch8{ left:calc(50% + 4.5em); }
.staffcast-list .cmt.ch9{ left:calc(50% + 5em); }
.staffcast-list .cmt.ch10{ left:calc(50% + 5.5em); }
.staffcast-list .cmt:hover{transform: scale(1.1) rotate(45deg); text-decoration: none; cursor: pointer; }

.comment-container{ width: calc(2400/3000*100vw); padding: 4em; margin: 0 auto; background-color: #FFF; filter: drop-shadow(.5em .5em 0 rgba(60, 176, 236, 0.2)); }

.comment-head{ padding: 0 0 1em 5em; background:url("../images/top-title-marker.png") no-repeat left .4em; background-size: calc(99/3000*100vw);  }
.comment-head .pos{ color: #006eb2; font-size: 1.333em; margin-bottom: .25em; }
.comment-head .name{ color: #c79c07; font-size: 1.6em; font-weight: bold; margin-bottom: 0; }
.comment-sep{ height: 1px; position: relative; background-color:#006eb2; margin-bottom: 1em; }
.comment-sep:before{ content:""; display: block; width: 10em; height: 1px; position: absolute; top:0; left:0; background-color:#c79c07; }
.comment-text{ color: #006eb2;}



/* character */
.cont-sub-character{ }
.cont-sub-character > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.character{ width: calc(462/3000*100vw); margin: 0 auto 4em auto;  }
.sub-character-container{ position: relative; }

#CharaCont{ position: relative; }
.cont-character-navi{ margin: 0 auto; position: relative; z-index: 5; }
.character-navi{ width: 100%; margin: 0 auto }
.character-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.character-navi ul li{ width: 10vw; display: block; margin: 0; padding:.5em; }
.character-navi ul li a{ display: block; position: relative; transform-origin: center center; pointer-events: all; cursor: pointer; background-color: #006eb2; border-radius: 5em; overflow: hidden; }
.character-navi ul li a:hover{ text-decoration: none;  transform: scale(1.1); }
.character-navi ul li.crt a{ pointer-events: none; background-color: #c79c07; }
.character-navi ul li.sep{ width: 100%; height: 1px; }
.character-navi ul li.sep-pc{ width: 100%; height: 1px; }
.character-navi ul li.sep-sp{ display: none; }

.cont-character-data{ width:100%; padding-bottom: 5vw; position: relative; }
.character-data{ width:100%; min-height: 50em; position: relative; pointer-events:none; display: none; }

.character-data .chr-img{ position: relative; width: calc(1000/3000*100vw); margin: 0 auto 0 0; 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 .chr-prof{ position: absolute; width: calc(960/3000*100vw); top:8em; left:32.5em; z-index: 3; }
.character-data .chr-prof .chr-switch{ width: calc(160/3000*100vw); position: absolute; top:-1vw; left:-7.5vw; pointer-events: auto; }
#C3.character-data .chr-prof .chr-switch{ top:5vw; }

.character-data .chr-prof .chr-switch a{ display: block; position: relative; transform-origin: center center; transition: all .25s ease-out 0s; pointer-events: all; cursor: pointer; }
.character-data .chr-prof .chr-switch a:hover{ transform: scale(1.1) rotate(370deg); }
.character-data .prof-name{ padding: 0 0 1em 5em; background:url("../images/top-title-marker.png") no-repeat left .4em; background-size: calc(99/3000*100vw);  }
.character-data .prof-name .name{ color: #c79c07; margin-bottom: .25em; }
.character-data .prof-name .name span{ font-size: 1.6em; font-weight: bold; letter-spacing: 0.1em; }
.character-data .prof-name .cv{ color: #006eb2; margin-bottom: 0; }
.character-data .prof-name .cv span{ font-size: 1.333em; letter-spacing: 0.1em; }

.character-data .prof-text{ padding: 1.25em; background-color: rgba(243, 254, 254, 0.5); position: relative; }
.character-data .prof-text:before{ content:""; pointer-events: none; width: 5em; height: 5em; position: absolute; top:0; right:0; border-top:#c79c07 solid 1px; border-right:#c79c07 solid 1px; }
.character-data .prof-text:after{ content:""; pointer-events: none; width: 5em; height: 5em; position: absolute; bottom:0; left:0; border-bottom:#c79c07 solid 1px; border-left:#c79c07 solid 1px; }
.character-data .prof-text .text{ margin: 0; font-size: 1.3em; letter-spacing: .05em; line-height: 2; position: relative; z-index: 6; }

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


/* bddvd */
.cont-sub-bddvd{ }
.cont-sub-bddvd > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.bddvd{ width: calc(684/3000*100vw); margin: 0 auto 4em auto;  }
.sub-bddvd-container{ position: relative; }


/* music */
.cont-sub-music{ }
.cont-sub-music > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.music{ width: calc(277/3000*100vw); margin: 0 auto 4em auto;  }
.sub-music-container{ position: relative; }


/* comics */
.cont-sub-comics{ }
.cont-sub-comics > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.comics{ width: calc(314/3000*100vw); margin: 0 auto 4em auto;  }
.sub-comics-container{ position: relative; }

.comics-text{ text-align: center; letter-spacing: .1em; line-height: 1.7; margin-bottom: 3em;  }
.comics-list a{ line-height: 0; }
.comics-list a img{ border:#006eb2 solid 1px; }
.comics-banner{ width: 18em; margin: 0 auto; }
.comics-banner a{ line-height: 0; }
.comics-banner a img{ border:#006eb2 solid 1px;}


/* special */
.cont-sub-special{ }
.cont-sub-special > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.special{ width: calc(344/3000*100vw); margin: 0 auto 4em auto;  }
.sub-special-container{ position: relative; }

.special-cstpr-navi{ margin-bottom: 0; flex-wrap: wrap; }
.special-cstpr-navi .nv{ padding: 2px; margin: 0 .5em .5em 0; border:#80ceff solid 1px; background-color: #FFF;}
.special-cstpr-navi .nv a{ display: block; padding: .3em 1.45em; color: #006eb2; font-size: 1.1em; font-weight:bold; border:#c79c07 solid 1px;}
.special-cstpr-navi .nv.crt{  pointer-events: none; background-color: #80ceff; }
.special-cstpr-navi .nv.crt a{ color: #fff; border-color:#FFF; }


/* movie */
.cont-sub-movie{ }
.cont-sub-movie > .inner{ width: calc(2000/3000*100vw); margin: 0 auto;  }
.sub-subtitle.movie{ width: calc(273/3000*100vw); margin: 0 auto 4em auto;  }
.sub-movie-container{ 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,article,section,footer{ position: relative; width: 100%; display: block; }
.lo-part,.lo-cont{ position: relative; width: 100%; display: block; }

.part-background{ }
.part-foreground{ }
.part-header{ }
.part-body{ }
.part-footer{ }

/* background */
#Background  > div{ width: 100%; min-height: 100%; position: absolute; top:0; }
.bg-animeation .staffcast-l1{ width: calc(3000/3000*100vw); position: absolute; top:330vw; left:0vw; }
.bg-animeation .staffcast-l1 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }
.bg-animeation .staffcast-l2{ width: calc(1845/3000*100vw); position: absolute; top:363vw; right:0vw; }
.bg-animeation .staffcast-l2 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }

.bg-animeation .comics-l1{ width: calc(1708/3000*100vw); position: absolute; top:480vw; left:0vw; }
.bg-animeation .comics-l1 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }
.bg-animeation .comics-l2{ width: calc(1219/3000*100vw); position: absolute; top:489vw; left:0vw; }
.bg-animeation .comics-l2 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }
.bg-animeation .comics-l3{ width: calc(1931/3000*100vw); position: absolute; top:540vw; left:0vw; }
.bg-animeation .comics-l3 > div{ position: relative; opacity: 1; transform: rotateZ(0deg); }

.bg-animeation .news-c1{ width: calc(2200/3000*100vw*1.5); position: absolute; top:100vw; left:-85vw; }
.bg-animeation .news-c1 > div{ position: relative; opacity: .5; transform: rotateZ(30deg); }
.bg-animeation .news-c2{ width: calc(2200/3000*100vw*1.5); position: absolute; top:101vw; left:-85vw; }
.bg-animeation .news-c2 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }

.bg-animeation .intro-c1{ width: calc(1762/3000*100vw*1.5); position: absolute; top:220vw; right:-25vw; }
.bg-animeation .intro-c1 > div{ position: relative; opacity: .6; transform: rotateZ(30deg); }

.bg-animeation .staffcast-c1{ width: calc(1422/3000*100vw*1.5); position: absolute; top:365vw; left:-5vw; }
.bg-animeation .staffcast-c1 > div{ position: relative; opacity: 1; transform: rotateZ(210deg); }

.bg-animeation .comics-c1{ width: calc(2650/3000*100vw*1.5); position: absolute; top:510vw; right:-40vw; }
.bg-animeation .comics-c1 > div{ position: relative; opacity: 1; transform: rotateZ(30deg); }
.bg-animeation .comics-c2{ width: calc(2650/3000*100vw*1.5); position: absolute; top:511vw; right:-40vw; }
.bg-animeation .comics-c2 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }

.bg-animeation .character-c1{ width: calc(1500/3000*100vw*1.5); position: absolute; top:40vw; }
.bg-animeation .character-c1 > div{ position: relative; opacity: .5; transform: rotateZ(30deg); }
.bg-animeation .character-c2{ width: calc(1550/3000*100vw*1.5); position: absolute; top:41vw; }
.bg-animeation .character-c2 > div{ position: relative; opacity: .5; transform: rotateZ(0deg); }
.bg-animeation .character-c3{ width: calc(2100/3000*100vw*1.5); position: absolute; top:25vw; }
.bg-animeation .character-c3 > div{ position: relative; opacity: .5; transform: rotateZ(-30deg); }

.bg-animeation .special-c1{ width: calc(2200/3000*100vw*1.5); position: absolute; top:-40vw; left:-60vw; }
.bg-animeation .special-c1 > div{ position: relative; opacity: .5; transform: rotateZ(30deg); }
.bg-animeation .special-c2{ width: calc(2200/3000*100vw*1.5); position: absolute; top:81vw; right:-40vw; }
.bg-animeation .special-c2 > div{ position: relative; opacity: .2; transform: rotateZ(-30deg); }

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

/* header */
.part-header{ width: 100%; height: 100%; position: fixed; pointer-events: none; background-color: rgba(255,255,255,0); transition: all .25s ease-out 0s; overflow: hidden; }
.sub-page .part-header{ position: fixed; background-color: rgba(255,255,255,0); padding-bottom: inherit; border-bottom:none; }
/* .part-header:before{ content:""; width: 100%; min-height: 75vw; position: absolute; top:-27vw; background: #f9f3ef; transform: skewY(-15deg); visibility: hidden; opacity: 0; transition: all .5s ease-out 0s; }
.part-header:after{ content:""; width: 100%; min-height: 15vw; position: absolute; top:125vw; background: #ffe8f7; transform: skewY(-15deg); visibility: hidden; opacity: 0; transition: all .5s ease-out .1s; } */
.cont-global-logo{ width: 40vw; margin: 0 auto; padding: 1vw 0 2vw 0 ; position: relative; z-index: 3; }
.cont-global-logo{ display: none;}
.cont-global-navi{ min-height: 100%; padding: 1em 0 0 0; margin: 0 auto; }

.global-navi{ width:100%; margin: 0 auto 2em auto ; position: relative; }
.global-navi > ul{ display: block; padding: 0; margin: 0; }
.top-page .global-navi > ul{ filter: drop-shadow( 0 0 .25em #FFF) drop-shadow( 0 0 1px #FFF) ; }
.global-navi > ul > li{ width: 100%; display: block; padding:.25em 0 ; margin: 0 auto; text-align: center; position: relative; }
.global-navi > ul > li.sep{ width: 1.0em; height: 1.0em; background: url("../images/navi/sep.png") no-repeat center .0em; background-size: contain; }
.global-navi > ul > li a{ padding: 0; font-size: 1.5em; }
.top-page .global-navi > ul > li a{ color: #006eb3; }
.global-navi > ul > li.gn0{ display: none; }





.header-background{ width: 100%; min-height: 100%; position: absolute; top:0; overflow: hidden; display: none; }
.sub-page .header-background{ display: none; }
.header-c1{ width: 75vw; position: absolute; top:-5vw; left:-5vw; opacity: .7;}
.header-c1 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s .6s ease-in-out both infinite running; }
.header-c2{ width: 50vw; position: absolute; top:55vw; left:50vw; opacity: .4;}
.header-c2 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s -.6s ease-in-out both infinite running; }
.header-c3{ width: 75vw; position: absolute; top:15vw; left:15vw; transform: rotate(60deg); opacity: .2;}
.header-c3 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s 2.6s ease-in-out both infinite running; }
.header-c4{ width: 60vw; position: absolute; top:10vw; left:90vw; transform: rotate(-60deg); opacity: .4;}
.header-c4 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s 3.6s ease-in-out both infinite running; }

.cont-global-logo,
.cont-global-navi{ display: none; }

.cont-sp-btn{ display: block; width: 10vw; position: absolute; top:.5em; right:.5em; z-index: 2; pointer-events: all; }
.cont-sp-btn .sp-navi-open{ display: block; }
.cont-sp-btn .sp-navi-close{ display: none; }
.spmenu-on .cont-sp-btn .sp-navi-open{ display: none; }
.spmenu-on .cont-sp-btn .sp-navi-close{ display: block; }


/* .spmenu-on .cont-global-logo, */
.spmenu-on .cont-global-navi{ display: block; }
.spmenu-on .cont-global-logo{ display: block; }
.spmenu-on .part-header{ background-color: rgba(255,255,255,1); pointer-events: auto; }
.spmenu-on .header-background{ display: block; }
.spmenu-on .sub-page .header-background{ display: block; }

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

.cont-upper{ }
.sub-page .cont-upper{ display: none; }
.cont-middle{ }
.sub-page .cont-middle{ padding-top: 1em; }
.cont-bottom{ }

.sub-logo{ width: 45%;  }

.cont-season-btn{ display: block; width: 100%; height: 2.4em; margin-bottom: 1.5em; border-top:#10c4ff solid 1px; }
.cont-season-btn nav{ top:calc(.5em - 1px); }
.cont-season-btn nav .sn{ width: calc(427/3000*100vw*2.25); height: calc(126/3000*100vw*2.25); margin: 0 .25em; }
.cont-season-btn nav .sn a{ line-height: 1.4; }
.cont-season-btn nav .sn a span{  font-size: 1.3em;  }

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

.top-subtitle{ width: 70%; }
.top-subtitle-marker{ width: calc(99/3000*100vw*2); height: calc(114/3000*100vw*2); margin: 0 auto 1.5em auto; }

.sub-subtitle{ width: 70%; }

.block-title2{ padding: 1em 0; }
.block-title2 .label{ font-size: 1.2em; letter-spacing: .05em; }

.cat-navi > ul > li{ padding: 1px; ; margin: .4em ; border-radius: 2em; border-width: 1px;}
.cat-navi > ul > li.sep{ }
.cat-navi > ul > li a{ padding: .5em .75em; border-radius: 2em; }
.cat-navi > ul > li a .label{ font-size: .9em;  }

/* pagetop */
.global-pagetop{ height: calc( 200/3000 * 100vw * 1.75 ); margin: 0 0 1em 0; position: sticky; bottom:1em; }
.pagetop-button{ width: calc( 200/3000 * 100vw * 1.75 ); height: calc( 200/3000 * 100vw * 1.75 ); margin: 0 1em 0 auto; }

/* footer */
.cont-global-footer{ padding: 2em 0; }
.footer-logo{ width: 100%; position: relative; z-index: 3; }
.footer-logo > div{ width: calc( 329/3000 * 100vw * 3 ); margin: 0 auto 1.5em auto;  }
.footer-copyrihgt{  }
.footer-copyrihgt p{ font-size: .7em; }

.footer-c1{ width: 75vw; position: absolute; top:-35vw; left:25vw;}
.footer-c1 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s .6s ease-in-out both infinite running; }
.footer-c2{ width: 50vw; position: absolute; top:5vw; left:40vw;}
.footer-c2 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s -.6s ease-in-out both infinite running; }
.footer-c3{ width: 75vw; position: absolute; top:-15vw; left:15vw; transform: rotate(60deg); opacity: .5;}
.footer-c3 .circle_bg_anm1loop{ animation: circle_bg_anm1loop 5s 2.6s ease-in-out both infinite running; }
.footer-c4{ width: 60vw; position: absolute; top:-10vw; left:50vw; transform: rotate(-60deg);}
.footer-c4 .circle_bg_anm2loop{ animation: circle_bg_anm1loop 5s 3.6s ease-in-out both infinite running; }


/* content */
/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 0; margin: 0 0 8em 0; position: relative; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 1em 0; }
.content-entry .entry-date > span{ font-size: 1.2em;  }
.content-entry .entry-title{ flex-wrap: wrap; justify-content: center; padding: 1.5em 0 0 0; }
.content-entry .entry-title .marker{ width:3em; padding: 0; position: relative; order: 2; }
.content-entry .entry-title .text{ width: 100%; margin-bottom: 1em; order: 1; }
.content-entry .entry-title .text > span{  font-size: 1.2em; }
.content-entry .entry-body{ font-size: 1.0em; }

.content-single{ padding: 0; margin: 0 0 8em 0; position: relative; }
.content-single .entry-head{ margin-bottom: 0; position: relative; padding: 1em 0; }
.content-single .entry-title{ flex-wrap: wrap; padding: 0 0 0 0; }
.content-single .entry-title .text{ width: 100%; margin-bottom: 1em; order: 1; }
.content-single .entry-title .text > span{ font-size: 1.2em; }
.content-single .entry-body{ font-size: 1.0em; }

.modal-data{ display: none; }
.cont-modal{ width: 100%; max-width: 960px; margin: 0 auto; }
.modal-il-container{ width: 90%; }

.frame-modal{ background-color: #000; border:#252525 solid 0em; border-width: 4em 2em 4em 2em; padding: 2em; }
.frame-modal .entry-body p{ font-size: 1.2em; line-height: 1.5; letter-spacing: .1em; }

/* modaal */

.modaal-close{ right: .5em; top: .5em; width: 3em; height: 3em; }




/* TOP-PAGE */
/* main */
.cont-top-visual .kv-container{ padding: 0 0 18.5vw 0; }
.kv-container .logo{ width: calc(2001/3000*100vw*0.9); top:105vw; left:0; right: 0; margin: 0 auto; }
.kv-container .oa{ width: calc(1624/3000*100vw*1.2); top:150.5vw; left:0; right: 0; margin: 0 auto; }
.kv-container .badge{ width: calc(543/3000*100vw*1.2); top:95vw; right: -2vw; margin: 0; }
.kv-container .badge2{ width: calc(543/3000*100vw*1.15); top:70vw; right: -2vw; margin: 0; }
.kv-container .nvbg{ display: none; }
/* .kv-container .catch{ width: 100%; top:14vw; left: 0; margin: 0; } */
.kv-container .catch{ width: calc(198/3000*100vw*1.2); top:4vw; left:2vw; margin: 0; }
.kv-container .catch2{ width: calc(198/3000*100vw*1.1); top:4vw; left:2vw; margin: 0; }

.kv-container .vis-switch{ /*width: 54vw;*/ top:133vw; left:0; right:0; margin: 0 auto; filter: drop-shadow(.25em .25em 0 rgba(60, 176, 236, 0.2)); }
.kv-container .vis-switch > div{ width: 16vw; padding: .25em; }
.kv-container .vis-switch > div a{ display: block; position: relative; line-height: 1; border:#FFF solid 2px; border-radius: 5em; }


#Foreground .opening .logo{ top:25vh; left:0; width: 60%; }
#Foreground .opening .oa{ top:calc(25vh + 29vw); width: 85%; }

#Foreground .opening .line .op-l1{ top:-15vw; left:-20vw }
#Foreground .opening .line .op-l2{ top:60vw; left:-45vw }
#Foreground .opening .line .op-l3{ top:20vw; left:47.5vw }
#Foreground .opening .line .op-l4{ top:20vw; left:23vw }
#Foreground .opening .line .op-c1{ top:40vw; left:15vw }
#Foreground .opening .line .op-c2{ top:35vw; left:13vw }

/* cookie */
/* .fst #Foreground .opening .vis{ opacity: 1; }
.vst #Foreground .opening { display: none; }

.s0 #Foreground .opening .vis{ transform: scale(4) rotate(0deg); transition: all 2.0s ease-out 0s; }
.s0 #Foreground .opening .mask{ transform: scale(5.5); transition: all 1.0s ease-out 0s; }

.s2 #Foreground .opening .logo{ opacity: 1;  transition: all 1.0s ease-out 0s; }
.s2 #Foreground .opening .oa{ opacity: 1;  transition: all 1.0s ease-out 1.0s; }

.s5 #Foreground .opening .vis{ transform: scale(1) rotate(0deg); top:0; left:0; transition: all 1.0s ease-out 0s; }
.s5 #Foreground .opening .mask{ transform: scale(9.5); opacity: 0; transition: all 1.0s ease-out 0s; }
.s5 #Foreground .opening .logo{ top: 10vw;  transition: all 1.0s ease-out 0s; }
.s5 #Foreground .opening .oa{ top: 27vw;  transition: all 1.0s ease-out 0s; }

.s7 #Foreground .opening .vis{ opacity: 0; transition: all .25s ease-out 0s; }
.s7 #Foreground .opening .logo{ opacity: 0; transition: all .25s ease-out 0s; }
.s7 #Foreground .opening .oa{ opacity: 0; transition: all .25s ease-out 0s; }
.s7 #Foreground .opening{ opacity: 0; transition: all .25s ease-out .25s; pointer-events: none; } */


/* top-navi */
.cont-top-navi{ display: none; }



/* top-movie */
.cont-top-movie{ margin: 0 auto; padding: 5vw 0 0 0;}
.cont-top-movie.cont-top-content > .inner{ padding:.5em 0; }
.cont-top-movie .movie-list .thm{ width: 80%; margin: 0 .5em; }
.cont-top-movie .movie-list .thm-side{ width: 1em; }
.cont-top-movie .movie-list .thm a::after{ background-size: 4em; }
.cont-top-movie .movie-list .thm a:hover::after{ background-size: 4.5em; }

.top-movie-cursor{ width: 75%; padding-top: 1em; }
.top-movie-cursor ul li{  display: block; width:calc(240/3000*100vw*1.5); height: calc(200/3000*100vw*1.5);  }
.top-movie-cursor ul li span{ background-size: 100%;}

/* .top-movie-cursor{ position: relative; width: 98vw; top:inherit; 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(240/3000*100vw); height: calc(200/3000*100vw); position: relative; pointer-events: all; cursor: pointer; }
.top-movie-cursor ul li span{ display: block; width:100%; height: 100%; background: url("../images/common/cursor.webp") no-repeat center center; background-size: 58.67%; transform-origin: center center; }
.top-movie-cursor ul li a,
.top-movie-cursor ul li a:hover{ text-decoration: none; }
.top-movie-cursor ul li span:hover{ transform: scale(1.1,1.1);}
.top-movie-cursor ul li.left span{ transform: scale(-1,1); }
.top-movie-cursor ul li.left span:hover{ transform: scale(-1.1,1.1); }
.top-movie-cursor ul li.off{ pointer-events: none; opacity: .5; } */


/* top-banner */
.cont-top-banner{ position: relative;  }

.top-banner-container{  }
.top-banner-container .banner{ width:80%; margin: 1em; }


/* top-news */
.cont-top-news{ position: relative;  }
.cont-top-news > .inner{ width: 90%; margin: 0 auto; padding: 3em 0; }
.top-news-container > a{ padding: 1em 0; margin-bottom: .25em; }
.top-news-container > a dl dt{ width: 25%; font-size: .8em; line-height: 1.95; }
.top-news-container > a dl dd{ width: 75%; font-size: 1.0em; line-height: 1.5; }




/* intro */
.cont-top-intro{ position: relative; }
.cont-top-intro > .inner{ width: 90%; margin: 0 auto; padding: 3em 0; }
.top-subtitle.intro{ width: calc(992/3000*100vw*1.5); margin: 0 auto 1.5em auto; }
/* .intro-text{ font-size: 1.2em; line-height: 2.0; letter-spacing: .05em; text-align: center; } */






/* SUB-PAGE */


.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 25vw);}

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{ width: 90%; margin: 0 auto ; }
.sub-subtitle.news{ width: calc(234/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-news-container{ position: relative; }


/* onair */
.cont-sub-onair{ }
.cont-sub-onair > .inner{ width: 90%; margin: 0 auto ; }
.sub-subtitle.onair{ width: calc(310/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-onair-container{ position: relative; }

.onair-list-container{ max-width: inherit; }
.onair-list{ margin: 0 auto .5em auto; max-width: inherit; padding: 1em; border-width: .4vw; }
.onair-list.first{  }
.onair-list .col-a{ width: 100%; }
.onair-list .col-b{ width: 100%; }
.onair-list .col-c{ width: 100%; }
.onair-list .col-d{ width: 100%; margin-left: 0; }

.onair-list .name{ font-size: 1.13em; margin-bottom: .25em; }
.onair-list .schd{ font-size: 1em; }
.onair-list .time{ font-size: 1em;  }
.onair-list .extr{ font-size: .8em; }

.onair-list-il > a{ width: 49%; margin: 0.5%; border-width: .4vw; }

/* intro */
.cont-sub-intro{ }
.cont-sub-intro > .inner{ width: 90%; margin: 0 auto;  }
.sub-subtitle.intro{ width: calc(596/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.intro-text{ font-size: 1.4em; line-height: 2.0; letter-spacing: .05em; text-align: center; position: relative; z-index: 3; }

/* story */
.cont-sub-story{ }
.cont-sub-story > .inner{ width: 100%; margin: 0 auto;  }
.sub-subtitle.story{ width: calc(252/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-story-container{ position: relative; }

#StoryCont{ padding-top: 3vw; padding-bottom: 3vw;  }

.cont-story-navi{ width: 95%; margin: 0 auto; }
.story-navi{ width: 100%; margin: 0 auto;  padding: .25em; border-radius: 0; }
.story-navi ul li{ width: 2.75em; height: 2.75em; display: block; margin: .35em; padding:0; text-align: center; }
.story-navi ul li.n0{ width: 11.5em; }
.story-navi ul li.spc-sp{ display: block; width: 100%; height: 1px; }
.story-navi ul li a{ width: 2.75em; height: 2.75em; padding-top: .9em; }
.story-navi ul li.n0 a{ width: 11.5em; }
.story-navi ul li a span{ font-size: 1.2em; }


.cont-story-data{ min-height: 60vw;  }

.story-data .episode-container{ padding: 1em 0 ; }

.story-data .ep-slider-sceneImage{ width: 100%; margin:0 auto 1em auto ;  }
.story-data .ep-slider-sceneImage .sld{ padding: 0;  }

.story-data .ep-number.intro{ padding: 1.5em 5.5em; border-bottom:#006eb2 solid 1px;  margin-bottom: 2.5em; letter-spacing: .2em; position: relative; }
.story-data .ep-number.intro > span{  font-size: 2.4em;  }
.story-data .ep-title{ font-size: 1em; margin-bottom: 2em; letter-spacing: .2em; position: relative; }
.story-data .ep-title > span{ color:#006eb2; font-size: 2.0em; font-weight: bold; }
.story-data .ep-title [data-ruby]::before { top: -1.0em; transform: scale(0.4,0.45); }
.story-data .ep-sep{ width: 100%; height: 1px; background-color: #000; margin: 0 auto 1em auto; }

.story-data .ep-text{ max-width: 90%;  }

.story-data .ep-staff p{  font-size: .8em; }

.story-data .ep-trailer{ width: 90%; }
.story-data .ep-trailer .thm a::after{ background-size: 4em; }
.story-data .ep-trailer .thm a:hover::after{ background-size: 4.5em; }

.story-data .intro-text{ max-width: 90%; padding: 2em 2em;  }
.story-data .intro-text p{ margin: 0; font-size: 1.4em; letter-spacing: .05em; line-height: 2.0; position: relative; z-index: 6; }



/* staffcast */
.cont-sub-staffcast{ }
.cont-sub-staffcast > .inner{ width: 90%; margin: 0 auto; }
.sub-subtitle.staffcast{ width: calc(542/3000*100vw*1.5); margin: 0 auto 1em auto;  }

.staffcast-list > div{ width: 50%; }
.staffcast-list > div.full{ width: 100%; }
.staffcast-list > div.p60{ width: 100%; }
.staffcast-list > div.p50{ width: 100%; }
.staffcast-list > div.p40{ width: 100%; }
.staffcast-list > div.p33{ width: 100%; }
.staffcast-list > div.p30{ width: 50%; }
.staffcast-list > div.p25{ width: 50%; }
.staffcast-list > div.p20{ width: 50%; }
.staffcast-list > div.sep{ width: 100%; height: 1px; }
.staffcast-list > div.sep.pc{ display: none; }
.staffcast-list > div.sep.sp{ display: block; }
.staffcast-list > div > div{ margin-bottom: 2em; position: relative; }
.staffcast-list .pos{ font-size: 1.0em;}
.staffcast-list .name{ font-size: 1.2em; }
.staffcast-list .ext{ font-size: .8em; }

.comment-container{ width: 90%; padding: 2em;  }
.comment-head{ padding: 0 0 .25em 3em; background-position: left .8em; background-size: calc(99/3000*100vw*2);  }
.comment-head .pos{ font-size: 1.2em; margin-bottom: .1em; }
.comment-head .name{ font-size: 1.4em; }
.comment-sep:before{ width: 7em; }

/* character */
.cont-sub-character{ }
.cont-sub-character > .inner{ width: 100%; margin: 0 auto;  }
.sub-subtitle.character{ width: calc(462/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-character-container{ position: relative; }

.character-navi ul li{ width: 16vw; padding:.125em; }
.character-navi ul li a{ border-radius: 5em;  }
.character-navi ul li.sep{ }
.character-navi ul li.sep-pc{ display: none; }
.character-navi ul li.sep-sp{ display: block; width: 100%; height: 1px; }

.cont-character-data{ width:100%; padding-bottom: 5vw; position: relative; }
.character-data{ width:100%; min-height: 50em; position: relative; pointer-events:none; display: none; }

.character-data .chr-img{ position: relative; z-index: 5; width: 80%; margin: 0 auto;  }
.character-data .chr-prof{ position: relative; width: 90%; margin: 0 auto; top:inherit; left:inherit; z-index: 3; }

.character-data .chr-prof .chr-switch{ width: calc(160/3000*100vw*2.5); position: absolute; top:-2vw; left:77vw; pointer-events: auto; }
#C3.character-data .chr-prof .chr-switch{ top:-2vw; }

.character-data .prof-name{ padding: 0 0 1em 3em; background-position: left .8em; background-size: calc(99/3000*100vw*2);  }
.character-data .prof-name .name{ margin-bottom: .25em; }
.character-data .prof-name .name span{ font-size: 1.4em; }
.character-data .prof-name .cv span{ font-size: 1.2em; }

.character-data .prof-text{ padding: 1.25em; }
.character-data .prof-text .text{ font-size: 1.2em;  }

.character-data.crt{ display: block; }


/* bddvd */
.cont-sub-bddvd{ }
.cont-sub-bddvd > .inner{ width: 90%; margin: 0 auto ; }
.sub-subtitle.bddvd{ width: calc(684/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-bddvd-container{ position: relative; }


/* music */
.cont-sub-music{ }
.cont-sub-music > .inner{ width: 90%; margin: 0 auto ; }
.sub-subtitle.music{ width: calc(277/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-music-container{ position: relative; }


/* comics */
.cont-sub-comics{ }
.cont-sub-comics > .inner{ width: 90%; margin: 0 auto; }
.sub-subtitle.comics{ width: calc(314/3000*100vw*1.5); margin: 0 auto 1em auto;  }
.top-comics-container{ position: relative; }
.comics-text{ }
.comics-banner{ width: 14em; }


/* special */
.cont-sub-special{ }
.cont-sub-special > .inner{ width: 90%; margin: 0 auto ; }
.sub-subtitle.special{ width: calc(344/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-special-container{ position: relative; }

.special-cstpr-navi .nv{ padding: 2px; margin: 0 .5em .5em 0; }
.special-cstpr-navi .nv a{ padding: .3em 1.25em;  font-size: 1.1em; }


/* movie */
.cont-sub-movie{ }
.cont-sub-movie > .inner{ width:90%; margin: 0 auto;  }
.sub-subtitle.movie{ width: calc(273/3000*100vw*1.5); margin: 0 auto 2em auto;  }
.sub-movie-container{ position: relative; }


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

}