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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ color: #000; background:#fff url("../images/common/footer-bg4.webp") no-repeat center bottom; background-size: 100%; }


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: 500; }
.part-body{ position: relative; }
.part-footer{ position: relative; }
.pm-wrp{ width: 100%; max-width: 1500px; margin: 0 auto; position: relative; }

/* 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; pointer-events: none; }
#Background .page-bg{ background: url("../images/common/background4.webp") no-repeat center top; background-size: 100%; position: fixed; }
.top-page #Background .page-bg{ opacity: .4; }
/* #Background .plxbg{ width: 100%; height: 100%; min-height: 100%; position: absolute; pointer-events: none; }
#Background .plxbg-1{ background: url("../images/common/background.webp") repeat center top; background-size: calc( 530/3000 * 100vw ); }
#Background .frame{ border:#fef9e6 solid .666em; } */
/* foreground */
#Foreground  > div{ width: 100%; min-height: 100%; position: absolute; top:0; pointer-events: none; }
#Foreground .opening{ }

.background-line-a{ width: 100%; height: 100%; position: fixed; top:0; overflow: hidden; }
.background-line-a > div{ width: 120%; height: 10em; background-color: rgba(120, 214, 252, 0.4); transform: rotate(-10deg); transform-origin: center right; position: absolute; top:4vw; right: -10%; }

.background-line-b{ width: 100%; height: 100%; position: fixed; top:0; overflow: hidden; }
.background-line-b > div{ width: 120%; height: 15em; background-color: #fff; opacity: .6; transform: rotate(10deg); transform-origin: center left; position: absolute; top:3em; left: -10%; }
.background-line-b:after{ content:""; width: 120%; height: 3em; background-color: #fff; opacity: .6; transform: rotate(10deg); transform-origin: center left; position: absolute; top:18.5em; left: -10%; display: block; }

.background-line-a > div{ animation:anm-scale-hrz-rot .5s ease-out .5s 1 normal both paused; }
.s1 .background-line-a > div{ animation-play-state: running; }
.background-line-b > div{ animation:anm-scale-hrz-rot2 .5s ease-out .8s 1 normal both paused; }
.s1 .background-line-b > div{ animation-play-state: running; }
.background-line-b:after{ animation:anm-scale-hrz-rot2 .5s ease-out 1.0s 1 normal both paused; }
.s1 .background-line-b:after{ animation-play-state: running; }

/* header */
.part-header{ width: 100%; position: fixed; top:0; left:0; pointer-events: none; }
.top-page .part-header{  }
.cont-global-logo{ width: calc(438/3000*100%); margin: 0 auto 1% 0; }
.cont-global-logo a{ pointer-events: auto; }
.cont-global-navi{ width: calc(400/3000*100%); position: relative; padding: 0; margin: 0 auto 0 calc(70/3000*100%); }
.top-page .cont-global-navi{  }

.global-navi{ width: 100%; margin: 0 auto 5% 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 .125em 0; letter-spacing: .1em; line-height: 1; position: relative;}
.global-navi > ul > li.sep{ width: 100%; height: 1px; background-color: #000; margin: .5em 0 .625em 0; }
.global-navi > ul > li a{ color: #000; padding: .4em .125em; text-decoration: none; position: relative; display: block; pointer-events: auto; }
.global-navi > ul > li a:before{ content:""; width: 100%; height: 100%; position: absolute;top:0; left:0; background: linear-gradient(90deg, rgba(207,194,255,1) 0%, rgba(207,194,255,1) 30%, rgba(207,194,255,0) 100%); visibility: hidden; }
.global-navi > ul > li a .label{ font-size: 1.2em; position: relative; }
.global-navi > ul > li a .label:before{ content:":"; }
.global-navi > ul > li a:hover{ text-decoration: none;}
.global-navi > ul > li a:hover:before{ visibility: visible;}
.global-navi > ul > li.crt a:before{ visibility: visible;}
.global-navi > ul > li.cs a{ pointer-events: none; color: #CCC; }
.global-navi > ul > li.cs a{  }

.global-sns{ width: 100%; margin: 0 auto 10% 0; position: relative; }
.global-sns > ul{ display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: row; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-sns > ul > li{ width: 12%; display: block; padding: 0 ; margin: 0 .5em ; letter-spacing: .1em; line-height: 1; position: relative;}
.global-sns > ul > li.gny{ width: 17%;}
.global-sns > ul > li a{ padding: 0; text-decoration: none; position: relative; display: block; pointer-events: auto; }
.global-sns > ul > li a:hover{ transform: scale(1.05); }

.global-banner{ width: 100%; margin: 0 0 0 0; position: relative; }
.global-banner > ul{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-banner > ul > li{ display: block; padding: 0 ; margin: 0 0 .5em 0; letter-spacing: .1em; line-height: 1; position: relative;}
.global-banner > ul > li a{ padding: 0; text-decoration: none; position: relative; display: block; pointer-events: auto; }
.global-banner > ul > li a:hover{ transform: scale(1.05); }

.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%; padding-bottom: 3em; }
.top-page .part-body-main{ position: relative; width: 100%; padding-bottom: 0; }
.cont-upper{ position: relative; z-index: 3; }
.cont-middle{ position: relative; z-index: 2; }

.cont-top-content > .inner{ padding: 0; margin: 0 auto;}
.cont-sub-content > .inner{ width: calc(1920/3000*100%); position: relative; padding: .25em 0; margin: 0 1.5% 2% auto; }

.top-subtitle{ font-size: 1em; margin: 0 auto ; padding: .5em .25em; text-align: center; z-index: 2; position: relative; line-height: 1; display: block; border-top: #000 solid 1px; border-bottom: #000 solid 1px; }
.top-subtitle .tp{ font-size: .8em; margin: 0; }

.sub-subtitle{ height: 5em; font-size: 1em; margin: 0 auto 3em auto ; padding: 0; text-align: center; z-index: 2; position: relative; line-height: 1; background-color: rgba(255, 178, 79, 0.4); overflow: hidden; text-align: right;}
.sub-subtitle .tp{ width: 100%; max-width: 1500px; margin: 0 auto; color: #fff; font-size:5.5em; font-weit: 700; letter-spacing: .05em; position: absolute; bottom:-.2em; right: 0; left:0; padding: 0 .2em 0 0; font-family: "Libre Baskerville", serif; }
.sub-subtitle .tp:before{ content:":"; }
.sub-subtitle-ja{ width: 100%; max-width: 1500px; font-size: 1em; text-align: right; display: inline-block; color: #000; font-size:2.5em; font-weit: 700; letter-spacing: .05em; padding: 0 .4em 0 0; margin: 0 auto; z-index: 3; position: absolute; line-height: 1; top:1.5em; left:0; right: 0;  }

.cont-sub-navi-left{ width: calc(360/3000*100%); position: absolute; top:0; left: 16.66em; }
.cont-sub-navi-left.fullwidth{ width: calc(2450/3000*100%); left: 16.66em; background-color: rgba(255, 255, 255, 0.95); border-top:#000 solid 1px; border-bottom:#000 solid 1px;}
.sub-navi-left{ width: 100%; margin: 0; position: relative; }
.sub-navi-left > ul{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; list-style-type: none; padding: 0; margin: 0; position: relative; }
.sub-navi-left > ul > li{ display: block; padding: 0 ; margin: 0 0 .125em 0; letter-spacing: .1em; line-height: 1; position: relative;}
.sub-navi-left > ul > li a{ color: #000; padding: .5em ; text-decoration: none; position: relative; display: block; pointer-events: auto; background: rgba(229, 229, 229, 0.9); }
.sub-navi-left > ul > li a .label{ font-size: 1.0em; position: relative; }
.sub-navi-left > ul > li a .label:before{ content:"> "; }
.sub-navi-left > ul > li a:hover{ text-decoration: none; background: rgba(207,194,255,0.9); }
.sub-navi-left > ul > li.crt a{ text-decoration: none; background: rgba(207,194,255,0.9); pointer-events: none;}
.sub-navi-left > ul > li.cs a{ pointer-events: none; color: #CCC; }
.sub-navi-left > ul > li.cs a{ display: none; }

.sub-cattitle{ width: calc(1920/3000*100%); position: relative; padding: .25em 0; margin: 0 1.5% 2% auto; /*background: rgba(255,255,255,.8);*/ background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 20%, rgba(255,255,255,.9) 80%, rgba(255,255,255,0) 100%);}
.sub-cattitle .tp{ margin: 0 auto; font-size:1.4em; font-weit: 700; letter-spacing: .05em; text-align: center; }

.cont-cat-navi{ width: calc(1920/3000*100%); position: relative; margin: 0 1.5% 2% 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: 0 ; margin: .125em ; letter-spacing: .1em; line-height: 1; position: relative;}
.cat-navi > ul > li.sep{ width: 100%; height: 1px; margin: 0 ; }
.cat-navi > ul > li a{ color: #FFF; padding: .5em 1em ; text-decoration: none; position: relative; display: block; pointer-events: auto; background: rgba(102, 102, 102, 0.9); }
.cat-navi > ul > li a .label{ padding-left: 1em; font-size: 1.1em; position: relative; }
.cat-navi > ul > li a .label:before{ content:"> "; margin-right: .25em; display: inline-block; position: absolute; top:.35em; left:0; transform: rotate(90deg); }


.cat-navi.story-navi > ul > li a{ padding: .5em 1em ; }
.cat-navi.story-navi > ul > li a .label{ padding-left: 0; font-size: 1.1em; position: relative; }
.cat-navi.story-navi > ul > li a .label:before{ content:"#"; margin: 0; display: inline-block; position: absolute; top:-0.2em; left:-0.75em; transform: rotate(0deg) scale(.6); }
.cat-navi.story-navi > ul > li.bn0 a .label:before{ display: none; }

.cat-navi > ul > li a:hover{ text-decoration: none; color: #000; background: rgba(207,194,255,0.9); }
.cat-navi > ul > li.crt a{ text-decoration: none; color: #000; background: rgba(207,194,255,0.9); pointer-events: none;}
.cat-navi > ul > li.cs a{ pointer-events: none; color: #CCC; }
.cat-navi > ul > li.cs a{ display: none; }

.block-title{ font-size: 1.8em; letter-spacing: .05em; margin-bottom: 1.5em; font-family: YakuHanMPs, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; }


/* footer */
.part-footer{ background-size: contain; }
.cont-global-footer{ margin: 0 auto; padding: 2% 0 0 0; position: relative; text-align: center; }
.footer-pagetop{ width: calc( 100/30 * 1em ); height: calc( 100/30 * 1em ); position: absolute; bottom:-1em; left:inherit; right: 1em; margin: 0 auto; z-index: 10; }
.footer-pagetop a{ display: block; position: relative; width: 100%; min-height: 100%; background:url("../images/navi/pagetop.png") no-repeat center center; background-size: contain; transform-origin: center center; }
.footer-pagetop a:hover{ transform: scale(1.1); }

.cont-footer{ width: 100%; margin: 0 auto; padding: 2% 0 3%; position: relative; background-color: rgba(209, 148, 68, 0.2); }

.footer-copyrihgt{ width: 100%; padding: 0; margin: 0 0 .5% 0; text-align: center; position: relative; }
.footer-copyrihgt p{ display: inline-block; font-size: .6em; color:#353535; margin: 0;}

.footer-banner{ width: 100%; margin: 0 auto 3% auto; position: relative; }
.footer-banner > ul{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; list-style-type: none; padding: 0; margin: 0; position: relative; }
.footer-banner > ul > li{ width: 12.5%; display: block; padding: 0 ; margin: 0 .25em; letter-spacing: .1em; line-height: 1; position: relative;}
.footer-banner > ul > li a{ padding: 0; text-decoration: none; position: relative; display: block; pointer-events: auto; }
.footer-banner > ul > li a:hover{ transform: scale(1.05); }

.footer-logo{ width: calc( 777/3000 * 100% ); margin: 0 auto; position: relative; }




/* 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;  }

hr.sep{ border-color: #000; border-width: 1px 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */}

.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: rgba(172, 153, 227, 0.15); }


/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 0; margin: 0 0 3em 0; position: relative; background: rgba(255,255,255,.8) ; border:#000 solid 1px;}
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 3em 3em 0 3em; }
.content-entry .entry-date{ font-size: 1em; margin: 0 0 .5em 0; text-align: left; pointer-events: none; line-height: 1; letter-spacing: .1em; color:#796bae; }
.content-entry .entry-title{ padding: .5em 0; margin: 0; position: relative; text-align: left; border-top:#000 solid 1px; border-bottom:#000 solid 1px; color: #000;  font-size: 1.5em; font-weight: bold; letter-spacing: .05em; line-height: 1.5; }
.content-entry .entry-body{ padding: 1em 3em 3em 3em; font-size: 1.0em; color: #000; font-family: YakuHanRPs,"Noto Sans JP", sans-serif; letter-spacing: .05em; line-height: 1.8; position: relative; }
.content-entry .nav-pad{ display: none; }
.content-entry .entry-tag{ display: none; }


.cont-singles{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-single{ padding: 0 2em; color: #91b9ed;  }

.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; }

/* modaal */
.modaal-overlay{ background: rgba(255,255,255,.95); }
.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: 3em; height: 3em;}
.modaal-close:before,.modaal-close:after{ background-color: #000; 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: #ac99e3;}
.modaal-close:hover:before,.modaal-close:hover:after{background: #ac99e3;}

/* colorbox customize */
#colorbox{}
#cboxOverlay{ background:rgba(255,255,255,.8) ; /*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"); }


@-webkit-keyframes anm-scale-hrz {
    from { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); }
    to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
@keyframes anm-scale-hrz {
    from { -webkit-transform: scale3d(0, 1, 1); transform: scale3d(0, 1, 1); }
    to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}
.anm-scale-hrz { -webkit-animation-name: anm-scale-hrz; animation-name: anm-scale-hrz; }


@-webkit-keyframes anm-scale-vtc-skw {
    from { -webkit-transform: skew(0,-10deg) scale3d(1, 0, 1) ; transform: skew(0,-10deg) scale3d(1, 0, 1) ; }
    to { -webkit-transform: skew(0,-10deg) scale3d(1, 1, 1) ; transform: skew(0,-10deg) scale3d(1, 1, 1) ; }
}
@keyframes anm-scale-vtc-skw {
    from { -webkit-transform: skew(0,-10deg) scale3d(1, 0, 1) ; transform: skew(0,-10deg) scale3d(1, 0, 1) ; }
    to { -webkit-transform: skew(0,-10deg) scale3d(1, 1, 1) ; transform: skew(0,-10deg) scale3d(1, 1, 1) ; }
}
.anm-scale-vtc-skw { -webkit-animation-name: anm-scale-vtc-skw; animation-name: anm-scale-vtc-skw; }

@-webkit-keyframes anm-scale-hrz-rot {
    from { -webkit-transform: rotate(-10deg) scale3d(0, 1, 1) ; transform: rotate(-10deg) scale3d(0, 1, 1) ; }
    to { -webkit-transform: rotate(-10deg) scale3d(1, 1, 1) ; transform: rotate(-10deg) scale3d(1, 1, 1) ; }
}
@keyframes anm-scale-hrz-rot {
    from { -webkit-transform: rotate(-10deg) scale3d(0, 1, 1) ; transform: rotate(-10deg) scale3d(0, 1, 1) ; }
    to { -webkit-transform: rotate(-10deg) scale3d(1, 1, 1) ; transform: rotate(-10deg) scale3d(1, 1, 1) ; }
}
.anm-scale-hrz-rot { -webkit-animation-name: anm-scale-hrz-rot; animation-name: anm-scale-hrz-rot; }

@-webkit-keyframes anm-scale-hrz-rot2 {
    from { -webkit-transform: rotate(10deg) scale3d(0, 1, 1) ; transform: rotate(10deg) scale3d(0, 1, 1) ; }
    to { -webkit-transform: rotate(10deg) scale3d(1, 1, 1) ; transform: rotate(10deg) scale3d(1, 1, 1) ; }
}
@keyframes anm-scale-hrz-rot2 {
    from { -webkit-transform: rotate(10deg) scale3d(0, 1, 1) ; transform: rotate(10deg) scale3d(0, 1, 1) ; }
    to { -webkit-transform: rotate(10deg) scale3d(1, 1, 1) ; transform: rotate(10deg) scale3d(1, 1, 1) ; }
}
.anm-scale-hrz-rot2 { -webkit-animation-name: anm-scale-hrz-rot2; animation-name: anm-scale-hrz-rot2; }


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

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

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

/* TOP-PAGE */
.top-page .cont-upper{ min-height: calc(100vh - 16em);}

/* main */
.cont-top-visual{ position: relative; overflow: hidden; }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{  position: relative; margin: 0 auto; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ width: calc(2000/3000*100%); height: 100vh; /*max-height:2653px;*/  margin: 0 0 0 calc(500/3000*100%); position: relative; top:4em; overflow: hidden; }
.kv-container .grp .bg{ position: relative; }
.kv-container .grp .vis{ width: 100%; position: absolute; top:0; left:0; opacity: 0; }
.kv-container .grp .vis.vis4{  }

.kv-container .catch{ width: calc(63/3000*100%); top:7em; right: 19em;  filter: drop-shadow(0 0 .3em #1c72c9) drop-shadow(0 0 .4em #1c72c9) drop-shadow(0 0 .1em #1c72c9); opacity: 0; transition: all 1.0s ease 0s; }
.kv-container .catch2{ width: calc(63/3000*100%); top:7em; right: 19em;  filter: drop-shadow(0 0 .2em #b8242f) drop-shadow(0 0 .4em #b8242f) drop-shadow(0 0 .1em #b8242f); opacity: 0; transition: all 1.0s ease 0s; }
.kv-container .catch3{ width: calc(63/3000*100%); top:7em; right: 19em;  filter: drop-shadow(0 0 .2em #4e167c) drop-shadow(0 0 .4em #4e167c) drop-shadow(0 0 .1em #4e167c); opacity: 0; transition: all 1.0s ease 0s; }
.kv-container .catch4{ width: calc(70/3000*100%); top:8em; right: 18.5em;  filter: drop-shadow(0 0 .2em #000000) drop-shadow(0 0 .4em #000000) drop-shadow(0 0 .1em #000000); opacity: 0; transition: all 1.0s ease 0s; }

.kv-container[data_vis="1"] .catch{ opacity: 1; filter: drop-shadow(0 0 .3em #aa33db) drop-shadow(0 0 .4em #aa33db) drop-shadow(0 0 .1em #aa33db); }
.kv-container[data_vis="2"] .catch{ opacity: 1; filter: drop-shadow(0 0 .3em #4a8dc7) drop-shadow(0 0 .4em #1c72c9) drop-shadow(0 0 .1em #1c72c9); }
.kv-container[data_vis="3"] .catch2{ opacity: 1;  }
.kv-container[data_vis="4"] .catch3{ opacity: 1;  }
.kv-container[data_vis="5"] .catch4{ opacity: 1; }

.kv-container .oa1{ width: calc(2000/3000*100em); top:.25em; left: 16.65em;  }
/* .kv-container .oa2{ width: calc(1184/3000*100em); top:3.0em; left: 16.65em;  }
.kv-container .oa3{ width: calc(1081/3000*100em); top:5.5em; left: 16.65em;  }
.kv-container .oa3{ width: calc(1081/3000*100em); top:.5em; left: 16.65em;  }

.kv-container .oa4{ width: calc(700/3000*100em); top:.5em; left: 16.65em;  }*/

.kv-container .logo{ display: none; }

.kv-container .oa1,
.kv-container .oa2,
.kv-container .oa3{ opacity: 0;}

/* .s0 .kv-container .catch5{ opacity: 1; transition: all 1.0s ease 1.0s;  } */
.s0 .kv-container .oa1{ opacity: 1; transition: all 1.0s ease 1.5s;  }
.s0 .kv-container .oa2{ opacity: 1; transition: all 1.0s ease 1.75s;  }
.s0 .kv-container .oa3{ opacity: 1; transition: all 1.0s ease 2s;  }




/* top-upper-right */
.cont-top-upper-right{ width: calc(450/3000*100%); padding: 0; position: absolute; top:.75em; right: .75em; }



/* top-movie */
.cont-top-movie{ margin-bottom: .5em; position: relative; }
.cont-top-movie > .inner{ }
.top-movie-list{ width: 100%; position: relative; margin: 0 auto; }
/* no slick ver */
.top-movie-list .thm{ width: 100%; padding:0; position: relative;text-align: center; line-height: 0; }
.top-movie-list .thm .thumb{ margin: 0; }
.top-movie-list .thm .title{ display: none; }
.top-movie-list .thm a{ display: inline-block; pointer-events: auto; overflow: hidden; line-height: 0; border:#000 solid 1px ; padding: 0;}

/* .top-movie-list .thm a::after{ content:""; position: absolute; display: block; width:100%; height:100%; background: url("../images/common/play-btn.png") no-repeat center center; background-size: calc(198/3000*100vw); transform-origin: center center; pointer-events: none; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1; }
.top-movie-list .thm a:hover::after{ background-size: calc(198/3000*100vw*1.1); } */
.top-movie-cursor{ display: none; }

.top-movie-dots{ text-align: center; padding-top: .5em;}
.top-movie-dots ul{ display: block; list-style-type: none; padding: 0; margin: 0; }
.top-movie-dots li { display: inline-block; margin: 0 2.5em 0 -1em; padding: 0;}
.top-movie-dots button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.top-movie-dots li button { position: relative; text-indent: -9999px;}
.top-movie-dots li button:before { content: "◇"; color: #000; font-size: 1em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.top-movie-dots li.slick-active button:before {content: "◆";  color: #000;}


/* top-news */
.cont-top-news{ margin-bottom: 1.5em; }
.cont-top-news > .inner{  }
.top-subtitle.news{ width: 100%; position: absolute; top:0; left:0; }

.top-news-container{  width: 100%; padding:0; margin: 0 auto; }
.top-news-container > a{ display: block; padding: .25em; margin-bottom: .25em; pointer-events: all; letter-spacing: .1em; background-color: rgba(254, 254, 254, 0.5); }
.top-news-container > a dl{ padding: 0; margin: 0; display: block; }
.top-news-container > a dl dt{ width: inherit; font-size: .8em; color: #796bae; display: inline-block; padding: 0 ; margin: 0 0 .15em 0; line-height: 1; font-weight: normal; }
.top-news-container > a dl dt:before{ content:"- "; }
.top-news-container > a dl dd{ width:100%; font-size: .9em; color: inherit; display: block; padding: 0; margin: 0; line-height: 1.5; }
.top-news-container > a,
.top-news-container > a:visited{ text-decoration: none; color: #000; }
.top-news-container > a:hover{ text-decoration: underline; color: #796bae; }
.top-news-container > a.nonlink{ pointer-events: none; }


/* X */
.cont-top-x{ }
.cont-top-x > .inner{ }
.twitter-widget-container{ width: 100%; margin: 0; padding: 0;  position: relative; overflow: hidden;  }
.twitter-widget-container iframe{ min-height: 100%; }
.twitter-timeline-container{ padding: 0; }





/* SUB-PAGE */

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

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{}
.sub-subtitle.news{  }
.sub-news-container{ position: relative; }

.news-pager{ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; margin-bottom: 4em; }
.news-pager-l,
.news-pager-r{ display: block; width: 10%; margin: 0; text-align: center; }
.news-pager-l a,
.news-pager-r a{ display: block; text-align: center; font-size: 4em; text-decoration: none; position: relative; }
.news-pager-l.off a,
.news-pager-r.off a{ opacity: .3; pointer-events: none; }


/* onair */
.cont-sub-onair{ }
.cont-sub-onair > .inner{}
.cont-onair-block .onair-block:nth-of-type(odd){ background-color: rgba(0,0,0,.05); }
.cont-onair-block .onair-block:nth-of-type(even){ background-color: rgba(0,0,0,.02); }
.onair-block{ display: flex; flex-wrap: wrap; padding:.45em 0; margin: 0 0 .9em 0; text-align: left; }
.onair-block .col-a{ width: 28%; padding: 0 1%; }
.onair-block .col-b{ width: 32%; padding: 0 1%; }
.onair-block .col-b span{ font-size: .888em; }
.onair-block .col-b2{ width: 72%; padding: 0 1%; }
.onair-block .col-b2 span{ font-size: .888em; }
.onair-block .col-c{ width: 18%; padding: 0 1%; }
.onair-block .col-d{ width: 22%; padding: 0 1%; }
.onair-block .col-e{ width: 72%; margin-left: 28%; padding: 0 1%; }
.onair-block .col-f{ width: 100%; }
.onair-block a:link,
.onair-block a:visited{ color: #000; }
.onair-block a:hover,
.onair-block a:active {color: #d064e1; }

.cont-streaming-block .streaming-block{ }
.streaming-block{ display: flex; flex-wrap: wrap; }
.streaming-block > div{ width: 32.33%; padding: 1%; margin: .5%; text-align: left; font-size: .888em; background-color: rgba(0,0,0,.05); }
.streaming-block a:link,
.streaming-block a:visited{ color: #000; }
.streaming-block a:hover,
.streaming-block a:active {color: #d064e1; }


/* story */
.cont-sub-story{ position: relative;  }
.cont-sub-story > .inner{  }

.cont-episode-block{ }
.episode-block{ padding: 3em 5.5em; text-align: center; position: relative; overflow: hidden; }

.episode-block:before{ content:""; width: 110%; height: 2em; background-color: rgba(172, 153, 227, 0.5); transform: rotate(-10deg); transform-origin: right top; position: absolute; bottom:0; right: -5%; }
.episode-block .ep-label{ width: 110%; height: 5.5em; text-align: left; line-height: 1; padding: 1em 0 0 6.5%; background-color: rgba(172, 153, 227, 0.5); transform: rotate(-10deg); transform-origin: left bottom; position: absolute; top:0; left: -5%;}
.episode-block .ep-label > span{ font-size: calc((92 / 16) * 1em); color: #181716; font-weight: thin; display: block; opacity: .5; }
.episode-block .ep-number{ font-weight: bold; margin-bottom: 1.0em }
.episode-block .ep-subtitle{ font-size: calc((32 / 16) * 1em); margin-bottom: 1.5em; font-weight: bold; }
.episode-block .ep-text{ text-align: left; margin-bottom: 3em; line-height: 1.8; }
.episode-block .ep-staff{ font-size: calc((12 / 16) * 1em); }

.episode-block .ep-movie-block{ display: flex; flex-wrap: wrap; justify-content: center; padding-top: 1em; }
.episode-block .ep-movie{ width: 85%; margin-bottom: 1em; text-align: left; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.episode-block .ep-movie .thumb{ width: 100%; order: 2; }
.episode-block .ep-movie .title{ width: 80%; padding: .3em 0; line-height: 1; background: linear-gradient(to right, rgba(172, 153, 227, 0), rgba(172, 153, 227, .6), rgba(172, 153, 227, 0)); order: 1; margin-bottom: .5em; }
.episode-block .ep-movie .title > span{ font-size: .9em; filter: drop-shadow(1px 1px 0 #FFF); }


.ep-slider-thumb{ display: flex; flex-wrap: wrap; padding: .2em 0; margin-bottom: 2em; }
.ep-slider-thumb > div{ width: 16.666%; padding: .2em; }
.ep-slider-thumb.max10 > div{ width: 20%; padding: .2em; }
.ep-slider-thumb > div:first-child{ padding-left:0; }
.ep-slider-thumb > div:last-child{ padding-right:0; }


.cont-intro-block{ overflow: hidden; position: relative; }
.cont-intro-block:before{ content:"";width: 100%; height: 100%; opacity: .25; position: absolute; background: url("../assets/intro/bg.png") no-repeat center top; background-size: 100%; }
.cont-intro-block.intro2:before{ background-image: url("../assets/intro/bg2.png"); }
.cont-intro-block.intro3:before{ background-image: url("../assets/intro/bg3.png"); }
.intro-block{ padding: 3em 4.5em; text-align: left; position: relative; }
/* .intro-block.crt{ display: block; visibility: visible; } */

.intro-block .ep-number{ font-weight: bold; margin-bottom: 1.0em; text-align: center; }
.intro-block .intro-title{ width: 100%; position: relative; font-size: calc((32 / 16) * 1em); margin-bottom: 1.5em; font-weight: bold; text-align: center; }
.intro-block .intro-catch{ width: 47%; position: absolute; top:7.5em; right: 5%; font-size: calc((24 / 16) * 1em); line-height: 1.8; text-align: left; }
.intro-block .intro-text{ width: 47%; position: absolute; top:20.5em; right: 5%; text-align: left; margin-bottom: 3em; line-height: 1.8; }
.intro-block .intro-image{ width: 43%; position: relative; }
.intro2 .intro-block .intro-text{ top:16.5em; }
.intro3 .intro-block .intro-catch{ top:8.5em; font-size: calc((20 / 16) * 1em); line-height: 1.6; }
.intro3 .intro-block .intro-text{ top:17.5em; line-height: 1.6; }
.intro3 .intro-block .intro-image{ padding-bottom: 6em; }
.intro4 .intro-block .intro-text{ top:9.5em; line-height: 1.6; }
.intro4 .intro-block .intro-image{ padding-bottom: 6em; }

/*
.intro-block .intro-catch{  animation:fadeIn 1.5s ease-out 1.0s 1 normal both paused; }
.intro-block .intro-text{ animation:fadeIn 1.5s ease-out 1.5s 1 normal both paused; }
.intro-block .intro-image{ animation:fadeIn 1.5s ease-out 0.5s 1 normal both paused; }

.loaded .intro-block .intro-catch{ animation-play-state: running; }
.loaded .intro-block .intro-text{ animation-play-state: running; }
.loaded .intro-block .intro-image{ animation-play-state: running; }
 */

/* character */
.cont-sub-character{  }
.cont-sub-character > .inner{ width: calc(2460/3000*100%); }
/* .cont-sub-content > .inner{ width: calc(1920/3000*100%); position: relative; padding: .25em 0; margin: 0 1.5% 2% auto; } */

.character-navi-btn{ width: 100%; padding: .5em .5em; }
.character-navi-btn a{ display: block; text-align: center; position: relative; color: #000; }
.character-navi-btn a:hover{ text-decoration: none; color: #796bae; }
.character-navi-btn .label{ padding-left: 1em; font-size: 1.1em; position: relative; }
.character-navi-btn .label:before{ content:"> "; margin-right: .25em; display: inline-block; position: absolute; top:.0em; left:0; transform: rotate(90deg); }
.charamenu-on .character-navi-btn .label:before{ transform: rotate(-90deg); }

.character-navi{ padding: 2%; display: none; flex-wrap: wrap; justify-content: center; position: relative; pointer-events: auto; }
.charamenu-on .character-navi{ display: flex; }
.character-navi .navi-grp{ display: inline-block; }
.character-navi .brl{ display: block; width: 100%; height: 1px; overflow: hidden; }
.character-navi .navi-grp .label{ display: block; width: calc( 100% - 1em ); margin: 0 auto; line-height: 1; padding: .25em 0; background-color: rgba(172, 153, 227, 0.3); text-align: center; }
.character-navi .navi-grp .label span{ display: block; font-size: .8em; white-space: nowrap; }
.character-navi .navi-grp > ul{ display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; margin: 0; padding: 0; /* justify-content: center; */ }
.character-navi .navi-grp > ul > li{ width: 6em; padding: 0; display: block; margin: .75em .5em; padding: 0; line-height: 1; position: relative; }
.character-navi .navi-grp > ul > li.spc-half{ width: 1em; }
.character-navi .navi-grp > ul > li > a{ display: block; text-decoration: none; background-color: rgba(0,0,0,.15); position: relative; }
.character-navi .navi-grp > ul > li > a:hover{ background-color: rgba(172, 153, 227, 1); text-decoration: none; }
.character-navi .navi-grp > ul > li > a > span{ display: block; position: relative; }
.character-navi .navi-grp > ul > li > a > span:before{ content:""; position: absolute; pointer-events: none; }
.character-navi .navi-grp > ul > li.crt > a{ background-color: rgba(172, 153, 227, 1); }

.cont-character-block{ width: 100%; min-height: 60em; padding: 3em 0; position: relative; }
.character-block{ position: relative; display: none; }
.character-block.crt{ display: block; }
.character-block .col-c{ width: 50%; position: relative; margin: 0 auto 0 2em; }
.character-block .col-f{ width: 40%; position: absolute; top:3em; right: 8em; z-index: 2; }
.character-block .col-prof{ width: 40%; padding: 1.5em 2em; background-color: rgba(255,255,255,.8); border-top: #000 1px solid; border-bottom: #000 1px solid; text-align: center; position: absolute; top:calc( 3em + 16.4em ); right: 8em; z-index: 2;  }
.character-block .col-prof .name{ margin-bottom: 0; }
.character-block .col-prof .name span{ font-size: 2em; }
.character-block .col-prof .name span.s1{ font-size: 1.8em; }
.character-block .col-prof .name-e{ color: #000; margin-bottom: 1.5em }
.character-block .col-prof .name-e span{ font-size: 1.2em; }
.character-block .col-prof .cv{ margin-bottom: 1.5em; letter-spacing: .05em; }
.character-block .col-prof .cv span{ font-size: 1.2em; display: inline-block; padding: .2em .4em; background-color: rgba(0,0,0,.06); }
.character-block .col-prof .text{ text-align: left; font-size: 1.2em; line-height: 1.8; letter-spacing: .05em; margin-bottom: 0; }

.background-character-line{ width: 100%; height: 100%; position: absolute; top:0; overflow: hidden; display: none; }
.background-character-line.on{ display: block; }
.background-character-line > div{ width: 120%; height: 5em; background-color: #fff; transform: rotate(-10deg); transform-origin: center right; position: absolute; top:15em; right: -10%; opacity: .5; }


.character-block .col-c{ animation:fadeIn .5s ease-out .1s 1 normal both paused; }
.character-block .col-f{ animation:fadeIn .5s ease-out .9s 1 normal both paused; }
.character-block .col-prof{ animation:fadeIn 1.0s ease-out .5s 1 normal both paused; }
.character-block.crt .col-c{ animation-play-state: running; }
.character-block.crt .col-f{ animation-play-state: running; }
.character-block.crt .col-prof{ animation-play-state: running; }

.background-character-line > div{ animation:anm-scale-hrz-rot .5s ease-out .2s 1 normal both paused; }
.background-character-line.on > div{ animation-play-state: running; }

body[data-chara="1"] .background-character-line > div{ background-color: #f3b15f; }
body[data-chara="1"] .character-block .col-prof{ border-color: #f3b15f; }
body[data-chara="1"] .character-block .col-prof .name-e{ color: #f3b15f; }

body[data-chara="2"] .background-character-line > div{ background-color: #c1b8d7; }
body[data-chara="2"] .character-block .col-prof{ border-color: #c1b8d7; }
body[data-chara="2"] .character-block .col-prof .name-e{ color: #ab9fca; }

body[data-chara="3"] .background-character-line > div{ background-color: #d3d2c9; }
body[data-chara="3"] .character-block .col-prof{ border-color: #d3d2c9 ; }
body[data-chara="3"] .character-block .col-prof .name-e{ color: #c4c2ad ; }

body[data-chara="4"] .background-character-line > div{ background-color: #96c4fe; }
body[data-chara="4"] .character-block .col-prof{ border-color: #96c4fe; }
body[data-chara="4"] .character-block .col-prof .name-e{ color: #96c4fe; }

body[data-chara="5"] .background-character-line > div{ background-color: #fea4b7; }
body[data-chara="5"] .character-block .col-prof{ border-color:#fea4b7 ; }
body[data-chara="5"] .character-block .col-prof .name-e{ color:#fea4b7 ; }

body[data-chara="6"] .background-character-line > div{ background-color: #c63a6c; }
body[data-chara="6"] .character-block .col-prof{ border-color: #c63a6c; }
body[data-chara="6"] .character-block .col-prof .name-e{ color:#c63a6c; }

body[data-chara="7"] .background-character-line > div{ background-color: #c190de; }
body[data-chara="7"] .character-block .col-prof{ border-color:#c190de ; }
body[data-chara="7"] .character-block .col-prof .name-e{ color: #c190de; }

body[data-chara="8"] .background-character-line > div{ background-color: #ffd790; }
body[data-chara="8"] .character-block .col-prof{ border-color: #ffd790; }
body[data-chara="8"] .character-block .col-prof .name-e{ color: #c7a569; }

body[data-chara="9"] .background-character-line > div{ background-color: #e35353; }
body[data-chara="9"] .character-block .col-prof{ border-color: #e35353; }
body[data-chara="9"] .character-block .col-prof .name-e{ color: #e35353; }

body[data-chara="10"] .background-character-line > div{ background-color: #7d9688; }
body[data-chara="10"] .character-block .col-prof{ border-color: #7d9688 ; }
body[data-chara="10"] .character-block .col-prof .name-e{ color: #7d9688 ; }

body[data-chara="11"] .background-character-line > div{ background-color: #ccf2ff; }
body[data-chara="11"] .character-block .col-prof{ border-color: #ccf2ff ; }
body[data-chara="11"] .character-block .col-prof .name-e{ color: #5dbcdd ; }

body[data-chara="12"] .background-character-line > div{ background-color: #c3c3c3; }
body[data-chara="12"] .character-block .col-prof{ border-color: #c3c3c3 ; }
body[data-chara="12"] .character-block .col-prof .name-e{ color: #c3c3c3 ; }

body[data-chara="13"] .background-character-line > div{ background-color: #e8d9e9; }
body[data-chara="13"] .character-block .col-prof{ border-color: #e8d9e9 ; }
body[data-chara="13"] .character-block .col-prof .name-e{ color: #d4b0d6 ; }

body[data-chara="14"] .background-character-line > div{ background-color: #c7afef; }
body[data-chara="14"] .character-block .col-prof{ border-color: #c7afef; }
body[data-chara="14"] .character-block .col-prof .name-e{ color: #c7afef ; }

body[data-chara="15"] .background-character-line > div{ background-color: #cb4142; }
body[data-chara="15"] .character-block .col-prof{ border-color: #cb4142 ; }
body[data-chara="15"] .character-block .col-prof .name-e{ color: #cb4142 ; }

body[data-chara="16"] .background-character-line > div{ background-color: #58575d; }
body[data-chara="16"] .character-block .col-prof{ border-color: #58575d ; }
body[data-chara="16"] .character-block .col-prof .name-e{ color: #58575d ; }

body[data-chara="17"] .background-character-line > div{ background-color: #b273b4; }
body[data-chara="17"] .character-block .col-prof{ border-color: #b273b4 ; }
body[data-chara="17"] .character-block .col-prof .name-e{ color: #b273b4 ; }

body[data-chara="18"] .background-character-line > div{ background-color: #1d3631; }
body[data-chara="18"] .character-block .col-prof{ border-color: #1d3631 ; }
body[data-chara="18"] .character-block .col-prof .name-e{ color: #1d3631 ; }

body[data-chara="18"] .background-character-line > div{ background-color: #1d3631; }
body[data-chara="18"] .character-block .col-prof{ border-color: #1d3631 ; }
body[data-chara="18"] .character-block .col-prof .name-e{ color: #1d3631 ; }

body[data-chara="19"] .background-character-line > div{ background-color: #ffed96; }
body[data-chara="19"] .character-block .col-prof{ border-color: #ffed96 ; }
body[data-chara="19"] .character-block .col-prof .name-e{ color: #cdbe78 ; }

body[data-chara="20"] .background-character-line > div{ background-color: #fdc084; }
body[data-chara="20"] .character-block .col-prof{ border-color: #fdc084 ; }
body[data-chara="20"] .character-block .col-prof .name-e{ color: #d39f6b ; }

body[data-chara="21"] .background-character-line > div{ background-color: #6bb490; }
body[data-chara="21"] .character-block .col-prof{ border-color: #6bb490; }
body[data-chara="21"] .character-block .col-prof .name-e{ color: #6bb490; }

body[data-chara="22"] .background-character-line > div{ background-color: #8990c8; }
body[data-chara="22"] .character-block .col-prof{ border-color: #8990c8; }
body[data-chara="22"] .character-block .col-prof .name-e{ color: #8990c8; }

body[data-chara="23"] .background-character-line > div{ background-color: #f8d773; }
body[data-chara="23"] .character-block .col-prof{ border-color: #f8d773; }
body[data-chara="23"] .character-block .col-prof .name-e{ color: #d1b560; }

body[data-chara="24"] .background-character-line > div{ background-color: #ffc4e9; }
body[data-chara="24"] .character-block .col-prof{ border-color: #ffc4e9; }
body[data-chara="24"] .character-block .col-prof .name-e{ color: #e298c6; }

body[data-chara="25"] .background-character-line > div{ background-color: #fafafa; }
body[data-chara="25"] .character-block .col-prof{ border-color:#9faba5; }
body[data-chara="25"] .character-block .col-prof .name-e{ color:#9faba5; }

body[data-chara="26"] .background-character-line > div{ background-color: #fff7a9; }
body[data-chara="26"] .character-block .col-prof{ border-color: #fff7a9; }
body[data-chara="26"] .character-block .col-prof .name-e{ color:#d6ce83; }

body[data-chara="27"] .background-character-line > div{ background-color: #daabeb; }
body[data-chara="27"] .character-block .col-prof{ border-color:#daabeb ; }
body[data-chara="27"] .character-block .col-prof .name-e{ color: #daabeb; }

body[data-chara="28"] .background-character-line > div{ background-color: #29a1e6; }
body[data-chara="28"] .character-block .col-prof{ border-color: #29a1e6; }
body[data-chara="28"] .character-block .col-prof .name-e{ color: #29a1e6; }

body[data-chara="29"] .background-character-line > div{ background-color: #e46bbf; }
body[data-chara="29"] .character-block .col-prof{ border-color: #e46bbf; }
body[data-chara="29"] .character-block .col-prof .name-e{ color: #e46bbf; }

body[data-chara="30"] .background-character-line > div{ background-color: #ffdbdb; }
body[data-chara="30"] .character-block .col-prof{ border-color: #ffdbdb ; }
body[data-chara="30"] .character-block .col-prof .name-e{ color: #e9aaaa ; }

body[data-chara="31"] .background-character-line > div{ background-color: #999; }
body[data-chara="31"] .character-block .col-prof{ border-color: #999; }
body[data-chara="31"] .character-block .col-prof .name-e{ color: #999; }

body[data-chara="32"] .background-character-line > div{ background-color: #fefefe; }
body[data-chara="32"] .character-block .col-prof{ border-color: #bab9b2; }
body[data-chara="32"] .character-block .col-prof .name-e{ color: #bab9b2; }

body[data-chara="33"] .background-character-line > div{ background-color: #604c41; }
body[data-chara="33"] .character-block .col-prof{ border-color: #604c41; }
body[data-chara="33"] .character-block .col-prof .name-e{ color: #604c41; }

body[data-chara="34"] .background-character-line > div{ background-color: #ba9778; }
body[data-chara="34"] .character-block .col-prof{ border-color: #ba9778; }
body[data-chara="34"] .character-block .col-prof .name-e{ color: #ba9778; }

body[data-chara="35"] .background-character-line > div{ background-color: #ffe38f; }
body[data-chara="35"] .character-block .col-prof{ border-color: #ffe38f; }
body[data-chara="35"] .character-block .col-prof .name-e{ color: #dfc169; }

body[data-chara="36"] .background-character-line > div{ background-color: #999; }
body[data-chara="36"] .character-block .col-prof{ border-color: #999; }
body[data-chara="36"] .character-block .col-prof .name-e{ color: #999; }

body[data-chara="37"] .background-character-line > div{ background-color: #c7afef; }
body[data-chara="37"] .character-block .col-prof{ border-color: #c7afef; }
body[data-chara="37"] .character-block .col-prof .name-e{ color: #c7afef; }

body[data-chara="38"] .background-character-line > div{ background-color: #846b45; }
body[data-chara="38"] .character-block .col-prof{ border-color: #846b45; }
body[data-chara="38"] .character-block .col-prof .name-e{ color: #846b45; }

body[data-chara="39"] .background-character-line > div{ background-color: #cb4142; }
body[data-chara="39"] .character-block .col-prof{ border-color: #cb4142; }
body[data-chara="39"] .character-block .col-prof .name-e{ color: #cb4142; }

body[data-chara="40"] .background-character-line > div{ background-color: #8D55A3; }
body[data-chara="40"] .character-block .col-prof{ border-color: #8D55A3; }
body[data-chara="40"] .character-block .col-prof .name-e{ color: #8D55A3; }

body[data-chara="41"] .background-character-line > div{ background-color: #fec382; }
body[data-chara="41"] .character-block .col-prof{ border-color: #fec382; }
body[data-chara="41"] .character-block .col-prof .name-e{ color: #fec382; }

body[data-chara="42"] .background-character-line > div{ background-color: #fec382; }
body[data-chara="42"] .character-block .col-prof{ border-color: #fec382; }
body[data-chara="42"] .character-block .col-prof .name-e{ color: #fec382; }

body[data-chara="43"] .background-character-line > div{ background-color: #fec382; }
body[data-chara="43"] .character-block .col-prof{ border-color: #fec382; }
body[data-chara="43"] .character-block .col-prof .name-e{ color: #fec382; }

body[data-chara="44"] .background-character-line > div{ background-color: #684d33; }
body[data-chara="44"] .character-block .col-prof{ border-color: #684d33; }
body[data-chara="44"] .character-block .col-prof .name-e{ color: #684d33; }

body[data-chara="45"] .background-character-line > div{ background-color: #f3b15f; }
body[data-chara="45"] .character-block .col-prof{ border-color: #f3b15f; }
body[data-chara="45"] .character-block .col-prof .name-e{ color: #f3b15f; }

body[data-chara="46"] .background-character-line > div{ background-color: #da5149; }
body[data-chara="46"] .character-block .col-prof{ border-color: #da5149; }
body[data-chara="46"] .character-block .col-prof .name-e{ color: #da5149; }

body[data-chara="47"] .background-character-line > div{ background-color: #6c5040; }
body[data-chara="47"] .character-block .col-prof{ border-color: #6c5040; }
body[data-chara="47"] .character-block .col-prof .name-e{ color: #6c5040; }

body[data-chara="48"] .background-character-line > div{ background-color: #ffeab2; }
body[data-chara="48"] .character-block .col-prof{ border-color: #ffeab2; }
body[data-chara="48"] .character-block .col-prof .name-e{ color: #ffeab2; }


/* staffcast */
.cont-sub-staffcast{ }
.cont-sub-staffcast > .inner{ }
.sub-subtitle.staffcast{  }
.staffcast-container{  }

.cont-staffcast-block{ }
.staffcast-block{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 1em; }
.staffcast-block > .pos{ width: calc(50% - .5em); margin-right: 1em; color:#796bae; text-align: right; }
.staffcast-block > .name{ width: calc(50% - .5em); text-align: left; font-family: YakuHanMPs, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif; }


.staffcast-list .cmt{ display: inline-block; width: 1.75em; position: absolute; top:-.65em; left:calc(50% - 2.0em); text-decoration: none; pointer-events: auto; }
.staffcast-list .cmt.ch2{ left:calc(50% - 4em); }
.staffcast-list .cmt.ch4{ left:calc(50% - 5em); }
.staffcast-list .cmt.ch5{ left:calc(50% - 5.5em); }
.staffcast-list .cmt.ch6{ left:calc(50% - 3.5em); }
.staffcast-list .cmt.ch8{ left:calc(50% - 7.5em); }
.staffcast-list .cmt.ch13{ left:calc(50% - 10.5em); }
.staffcast-list .cmt:hover{transform: scale(1.1); text-decoration: none; cursor: pointer; }
.staffcast-cs{ font-size: 1.2em; letter-spacing: .1em; margin-bottom: 2em; color: #AAA; }

.comment-btn{ display: inline-block; position: absolute; margin: -0.25em 0 0 0; transform: scale(.8); }
.comment-btn:hover{ transform: scale(1); }

.comment-frame{ position: relative; }
.comment-frame .comment-body{ width: 64vw; margin: 0 auto; position: relative; }
.comment-frame .comment-body{ padding: 3em 6em; background-color: #FFF; border: #796bae solid 1px; }
.comment-name{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; margin-bottom: 1em; }
.comment-name p{ font-weight: bold; margin: 0; padding: .6em 1em; letter-spacing: .05em; text-align: center; }
.comment-name p.pos{ padding-top: .8em; border-bottom:#796bae double 1px; }
.comment-name p.name{ border-left: none;letter-spacing: .1em;  }
.comment-name p.name span{ font-size: 1.333em; }
.comment-name p.name-e{ padding-top: .8em; border-left: none; }



/* music */
.cont-sub-music{  }
.cont-sub-music > .inner{  }


/* movie */
.cont-sub-movie{  }
.cont-sub-movie > .inner{  }
.cont-movie-block{ display: flex; flex-wrap: wrap; justify-content: flex-start; }
.movie-block{ width: 48%;margin: 1%; background-color: #181716; border: #796bae solid 1px; box-sizing: border-box; position: relative; margin-bottom: 3em; }
.movie-block .thumb{ margin-bottom: 0; position: relative; }
.movie-block .title{ width: 100%; height: 100%; top:0; position: absolute; overflow: hidden; pointer-events: none; }
.movie-block .title > span{ font-size: calc((14 / 16) * 1em); color: #fff; font-weight: bold; display: block; }
.movie-block .title > span{ width: 110%; height: 1.8em; padding: .1em 0 .1em 6.5%; background-color: #796bae; transform: rotate(-10deg); transform-origin: center left; position: absolute; top:4.5em; left: -5%; }

/* special */
.cont-sub-special{  }
.cont-sub-special > .inner{  }


/* theater */
.cont-sub-theater{  }
.cont-sub-theater > .inner{  }


/* event */

.sponsorship-list{ display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
.sponsorship-list > div{ margin: 1em 2em; }
.sponsorship-list > .sep{ display: block; width: 100%; height: 1px; margin: 0;  }
.sponsorship-list > .sp-pc{ display: block; width: 100%; height: 1px; margin: 0;  }
.sponsorship-list > .sp-sep{ display: none; }
.sponsorship-list > .sl1{ width: 5em; }
.sponsorship-list > .sl2{ width: 5em; }
.sponsorship-list > .sl3{ width: 14em; }
.sponsorship-list > .sl4{ width: 14em; }
.sponsorship-list > .sl5{ width: 14em; }
.sponsorship-list > .sl6{ width: 10em; }
.sponsorship-list > .sl7{ width: 14em; }
.sponsorship-list > .sl8{ width: 14em; }
.sponsorship-list > .sl9{ width: 12em; }

.sponsorship-list > .bl1{ width: 15em; }
.sponsorship-list > .bl2{ width: 15em; }

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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* 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{ background-size: 250%; }

/* background */
#Background .page-bg{ background-image: url("../images/common/background.webp"); background-size: 200%; position: fixed; }
.background-line-a > div{ height: 7em;  top:4em;  }
.background-line-b > div{ height: 12em; top:7em; }
.background-line-b:after{ height: 2em; top:20.5em; }
/* foreground */

/* header */
.part-header{ width: 100%; height: 100%; position: fixed; top:0; left:0; pointer-events: none; background-color: rgba(255, 255, 255,0); transition: all .3s ease-out 0s; }
.top-page .part-header{ }
.cont-global-logo{ width: calc(438/3000*100vw*3.0); margin: 0 auto; padding: .5em 0 0 0; position: relative; }
.cont-global-navi{ width: 100%; position: relative; padding: 1em 0 0 0; margin: 0 auto; }
.global-navi{ width: 80%; margin: 0 auto 1em auto;  }
.global-navi > ul{ justify-content: flex-start; flex-direction: row; }
.global-navi > ul > li{ width: 50%; margin: .25em 0 ; }
.global-navi > ul > li.sep{ margin: .5em 0 .5em 0; }

.global-sns{ width: 80%; margin: 0 auto 2em auto; }
.global-sns > ul{ justify-content: center; }
.global-sns > ul > li{ width: 10%; margin: 0 .75em ;}
.global-sns > ul > li.gny{ width: 14%;}

.global-banner{ width: 80%; margin: 0 auto; }
.global-banner > ul{ justify-content: center; flex-direction: row; }
.global-banner > ul > li{ width: 70%; padding: 0 ; margin: .5em; }

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

.cont-sp-btn{ display: block; width: calc(130/1000*100vw); padding: 0 .5em .5em 0; position: absolute; top:0; left:0; z-index: 2; pointer-events: all; overflow: hidden; border-radius: 0 0 3em 0; }
.cont-sp-btn a{ display: block; line-height: 0; text-decoration: none; }
.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 .part-header{ background-color: rgba(255, 255, 255,1); pointer-events: auto; }
.spmenu-on .part-header:before{ visibility: visible; opacity: 1; }
.spmenu-on .part-header:after{ visibility: visible; opacity: 1; }



/* body */
.cont-top-content > .inner{ padding: 0; margin: 0 auto;}
.cont-sub-content > .inner{ width: 100%; margin: 0 auto; padding: 0; }



.sub-subtitle{ height: 3.5em; margin: 0 auto 1.75em auto;}
.sub-subtitle .tp{ font-size:3em; bottom:-.2em; padding: 0 .2em 0 0; }
.sub-subtitle-ja{ font-size:1.75em; padding: 0 .4em 0 0; top:1.5em; }

.cont-sub-navi-left{ width: 100%; position: relative; top:inherit; left: inherit; margin-bottom: 1em; }
.cont-sub-navi-left.fullwidth{ width: 100%; position: absolute; left: inherit;}
.sub-navi-left{ width: 95%; margin: 0 auto; }
.sub-navi-left > ul{ justify-content: center; flex-direction: row; }
.sub-navi-left > ul > li{ margin: .125em; }
.sub-navi-left > ul > li a{ padding: .5em; }

.sub-cattitle{ width: 95%; padding: .25em 0; margin: 0 auto 1em auto; }
.sub-cattitle .tp{ font-size:1.3em; }

.cont-cat-navi{ width: 95%; position: relative; margin: 0 auto 1em auto;}

.cat-navi > ul > li{ margin: .125em ; }
.cat-navi > ul > li a{ padding: .5em 1em ; }
.cat-navi > ul > li a .label{ font-size: 1.0em; }

.block-title{ font-size: 1.6em; letter-spacing: .05em; margin-bottom: 1.5em; }


/* footer */
.part-footer{ background-size: contain; }
.cont-global-footer{ margin: 0 auto; padding: 2% 0 0 0; position: relative; text-align: center; }
.footer-pagetop{ width: calc( 100/30 * 1em * .7 ); height: calc( 100/30 * 1em * .7 ); bottom:0; right: 1em; }
.cont-footer{ width: 100%; margin: 0 auto; padding: 2% 0 3%; }

.footer-copyrihgt{ margin: 0 0 .5% 0;  }
.footer-copyrihgt p{ font-size: .6em; margin: 0 0 .5em 0; line-height: 1;}

.footer-banner{ width: 100%; margin: 0 auto 3% auto; }
.footer-banner > ul > li{ width: 45%; margin: .25em; }

.footer-logo{ width: 70%; margin: 0 auto; position: relative; }




/* content */


/* 1 */
.cont-entries{ padding-bottom: 2em; }
.content-entry{ margin: 0 0 2em 0; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 1.5em 1.5em 0 1.5em; }
.content-entry .entry-date{ font-size: 1.1em; margin: 0 0 .5em 0; }
.content-entry .entry-title{ padding: .5em 0; font-size: 1.333em;  }
.content-entry .entry-body{ padding: 1em 1.5em 1.5em 1.5em; font-size: 1.0em; }


/* modaal */
.modaal-inner-wrapper{ padding: 60px 0; }
.modaal-close{ right: 2.5em; top: 1.5em; width: 2em; height: 2em;}
.modaal-close:before,.modaal-close:after{ top: .4em; left: 2em; width: .3em; height: 3em; }



/* TOP-PAGE */
/* main */
.cont-top-visual{ position: relative; overflow: hidden; /*padding-bottom: 7em;*/ padding-bottom: 8em; margin: 0 auto 2em auto; }
.kv-container .grp{ width: 100%; height: 100vh; /*max-height:2653px;*/  margin: 0;  }
.kv-container .grp .bg{ position: relative; }
.kv-container .grp .vis{ width: 100%; position: absolute; top:0; left:0; opacity: 0; }

.kv-container .catch{ width: calc(63/3000*100%*2); top:6em; right: .5em; }
.kv-container .catch2{ width: calc(63/3000*100%*2); top:6em; right: .5em; }
.kv-container .catch3{ width: calc(63/3000*100%*2); top:6em; right: .5em; }
.kv-container .catch4{ width: calc(70/3000*100%*2); top:8em; right: .5em; }

.kv-container .oa1{ width: 75%; top:.5em; left: inherit; right: .5em; }

.kv-container .logo{ display: block; width: 70%; top:36.5em; left: 0; right: 0; margin: 0 auto; filter: drop-shadow(0 0 .3em #fff) drop-shadow(0 0 .4em #fff); }

.kv-container .logo{ opacity: 0;}

.s0 .kv-container .logo{ opacity: 1; transition: all 1.0s ease 0s;  }


/* top-upper-right */
.cont-top-upper-right{ width: 85%; padding: 0; margin: 0 auto; position: relative; top:inherit; right: inherit; }




/* SUB-PAGE */

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

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{ width: 90%; }

/* onair */
.cont-sub-onair{ }
.cont-sub-onair > .inner{ width: 90%; }
.onair-block .col-a{ width: 100%; }
.onair-block .col-b{ width: 100%; }
.onair-block .col-b2{ width: 100%; }
.onair-block .col-c{ width: 27%; }
.onair-block .col-d{ width: 37%; }
.onair-block .col-e{ width: 100%; margin-left: 0; }
.onair-block .col-f{ width: 100%; }

.streaming-block > div{ width: 49%; text-align: left; }


/* story */
.cont-sub-story{  }
.cont-sub-story > .inner{ width: 90%; }

.cont-episode-block{ }
.episode-block{ padding: 1.0em 1em; text-align: center; position: relative; overflow: hidden; }
.episode-block:before{ height: 1em; }
.episode-block .ep-label{ height: 2.7em; padding: .5em 0 0 6.5%; }
.episode-block .ep-label > span{ font-size: calc((46 / 16) * 1em); }

.episode-block .ep-number{ font-size: calc((14 / 16) * 1em); margin-bottom: 1.0em }
.episode-block .ep-subtitle{ font-size: calc((22 / 16) * 1em); margin-bottom: 1.0em; }
.episode-block .ep-text{ font-size: calc((14 / 16) * 1em); margin-bottom: 3em;}
.episode-block .ep-staff{ font-size: calc((10 / 16) * 1em); }

.ep-slider-thumb{ display: flex; flex-wrap: wrap; padding: .2em 0; margin-bottom: 1em; }
.ep-slider-thumb > div{ width: 16.666%; padding: .2em; }
.ep-slider-thumb > div:first-child{ padding-left:0; }
.ep-slider-thumb > div:last-child{ padding-right:0; }


/*
.cont-intro-block{ overflow: hidden; position: relative; }
.cont-intro-block:before{ content:"";width: 100%; height: 100%; position: absolute; background: url(../assets/intro/bg.png) no-repeat center top; background-size: 100%; }
*/
.intro-block{ padding: 1.5em 1.0em; text-align: left; position: relative; }

.intro-block .intro-title{ width: inherit; position: relative; font-size: calc((22 / 16) * 1em); margin-bottom: 1.5em; font-weight: bold; text-align: center; }
.intro-block .intro-catch{ width: inherit; position: relative; top:inherit; right: inherit; font-size: calc((18 / 16) * 1em); text-align: center; }
.intro-block .intro-text{ width: inherit; position: relative; top:inherit; right: inherit; font-size: calc((15 / 16) * 1em);text-align: left; margin-bottom: 0; line-height: 1.8; }
.intro-block .intro-image{ width: inherit; position: relative; padding: 0 2em; margin-bottom: 1em; }

.intro2 .intro-block .intro-text{ top:inherit; }
.intro3 .intro-block .intro-catch{ top:inherit; font-size: calc((16 / 16) * 1em); line-height: 1.6; }
.intro3 .intro-block .intro-text{ top:inherit; line-height: 1.6; }
.intro3 .intro-block .intro-image{ padding: 0 2em; }
.intro4 .intro-block .intro-text{ top:inherit; }
.intro4 .intro-block .intro-image{ padding: 0 2em; }

/* character */
.cont-sub-character{  }
.cont-sub-character > .inner{ width: 100%; }

.character-navi-btn{ padding: .5em .5em; }
.character-navi-btn .label{ font-size: 1.0em; }

.character-navi{ padding: 2%; }
.charamenu-on .character-navi{ display: flex; }
.character-navi .navi-grp{ display: inline-block; }
.character-navi .brl{ display: block; width: 100%; height: 1px; overflow: hidden; }
.character-navi .navi-grp .label{ width: calc( 100% - .5em ); margin: 0 auto .5em auto; }
.character-navi .navi-grp .label span{ font-size: .7em; }
.character-navi .navi-grp > ul > li{ width: 4.25em; margin: 0 .25em .5em .25em; }
.character-navi .navi-grp > ul > li.spc-half{ width: 1.5em; }

.cont-character-block{ width: 100%; min-height: 60em; padding: 3em 0; position: relative; }
.character-block{ position: relative; display: none; }
.character-block.crt{ display: block; }
.character-block .col-c{ width: 100%; position: relative; margin: 0 auto ; }
.character-block .col-f{ width: 70%; position: relative; top:inherit; right: inherit; margin: 0 auto;}
.character-block .col-prof{ width: 90%; padding: 1.5em .5em; background-color: rgba(255,255,255,.8); position: relative; top:inherit; right: inherit; margin: 0 auto; }
.character-block .col-prof .name span{ font-size: 1.7em; }
.character-block .col-prof .name span.s1{ font-size: 1.5em; }
.character-block .col-prof .name-e span{ font-size: 1.2em; }
.character-block .col-prof .cv span{ font-size: 1.1em; }
.character-block .col-prof .text{ font-size: 1.1em; }

.background-character-line{ width: 100%; height: 100%; position: absolute; top:0; overflow: hidden; display: none; }
.background-character-line.on{ display: block; }
.background-character-line > div{ height: 5em; top:15em; right: -10%;  }


/* staffcast */
.cont-sub-staffcast{ }
.cont-sub-staffcast > .inner{ width: 90%; }

.cont-staffcast-block{ }
.staffcast-block{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 1em; }
.staffcast-block > .pos{ width: 100%; margin: 0 auto .125em auto; text-align: center; line-height: 1; }
.staffcast-block > .name{ width: 100%; text-align: center; }

.staffcast-list .cmt{ font-size: .9em; width: 1.75em; top:-.65em; left:calc(50% - 2.0em); }

.comment-frame{  }
.comment-frame .comment-body{ width: 96%;  }
.comment-frame .comment-body{ padding: 2em 2em; }
.comment-name{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; margin-bottom: 1em; }
.comment-name p{ font-weight: bold; margin: 0; padding: .6em 1em; letter-spacing: .05em; text-align: center; }
.comment-name p.pos{ padding-top: .8em; border-bottom:#796bae double 1px; }
.comment-name p.name{ border-left: none;letter-spacing: .1em;  }
.comment-name p.name span{ font-size: 1.333em; }
.comment-name p.name-e{ padding-top: .8em; border-left: none; }


/* bddvd */
.cont-sub-bddvd{  }
.cont-sub-bddvd > .inner{ width: 90%; }


/* music */
.cont-sub-music{  }
.cont-sub-music > .inner{ width: 90%; }


/* movie */
.cont-sub-movie{  }
.cont-sub-movie > .inner{ width: 90%; }
.cont-movie-block{ justify-content: center; }
.movie-block { width: 90%; margin-bottom: 1em; }
.movie-block .thumb{ margin-bottom: 0; position: relative; }
.movie-block .title > span{ font-size: calc((10 / 16) * 1em); }
.movie-block .title > span{ height: 1.8em;  top:2.9em; }


/* theater */
.cont-sub-theater{ }
.cont-sub-theater > .inner{ width: 90%; }


/* event */

.sponsorship-list{ display: flex; justify-content: space-around; flex-wrap: wrap; align-items: center; }
.sponsorship-list > div{ margin: 1em 1em; }
.sponsorship-list > .sep{ }
.sponsorship-list > .sp-pc{ display: none; }
.sponsorship-list > .sp-sep{ display: block; width: 100%; height: 1px; margin: 0; }
.sponsorship-list > .sl1{ width: 3.0em; }
.sponsorship-list > .sl2{ width: 3.0em; }
.sponsorship-list > .sl3{ width: 9.5em; }
.sponsorship-list > .sl4{ width: 9.5em; }

.sponsorship-list > .sl5{ width: 9.5em; }
.sponsorship-list > .sl6{ width: 7.5em; }
.sponsorship-list > .sl7{ width: 9.5em; }
.sponsorship-list > .sl8{ width: 9.5em; }
.sponsorship-list > .sl9{ width: 8.5em; }

.sponsorship-list > .bl1{ width: 15em; }
.sponsorship-list > .bl2{ width: 15em; }
.sponsorship-list > .bl3{ width: 15em; }


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

}