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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ color: #fff; background:#000; }

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: absolute; z-index: 500; }
.part-body{ position: relative; }
.part-footer{ 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; }

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

/* header */
.part-header{  }
.cont-global-navi{ width: 100%; height: 100vh; padding: 5em 0 0 0; background-color: rgba(0,0,0,.95); position: fixed; top:0; }
.cont-global-navi .v1{ width: calc(1073/3000*100vw); height: calc(1334/3000*100vw); background: url("../images/navi/v1.png") no-repeat top center; background-size: contain; position: absolute; top:0; left:0; pointer-events: none; }
.cont-global-navi .v2{ width: calc(731/3000*100vw); height: calc(523/3000*100vw); background: url("../images/navi/v2.png") no-repeat top center; background-size: contain; position: absolute; top:36vw; left:60vw; pointer-events: none; }
.cont-global-navi .v3{ width: calc(944/3000*100vw); height: calc(939/3000*100vw); background: url("../images/navi/v3.png") no-repeat top center; background-size: contain; position: absolute; top:10vw; right:0; pointer-events: none; }

.global-logo{ width: calc(806/3000*100vw); margin: 0 auto 5em auto; }
.global-navi{ width:100%; margin: 0 auto 2em auto ; position: relative;  }
.global-navi > ul{ display: flex; flex-wrap: wrap; justify-content: center; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-navi > ul > li{  display: block; text-align: center; padding: 0 0 2.2em 0 ; margin: 0 0 2em 0 ; line-height: 1; position: relative; background: url("../images/navi/marker.png") no-repeat center bottom; background-size: 2em; filter: drop-shadow(0 0 .5em rgba(0,0,0,1));}
.global-navi > ul > li.sep-pc{ width: 100%; height: 0; background: none; padding: 0; margin: 0; }
.global-navi > ul > li.gn1,
.global-navi > ul > li.gn2,
.global-navi > ul > li.gn5,
.global-navi > ul > li.gn6{ margin-left: .75em ; margin-right: .75em; }

.global-navi > ul > li a{ display: block; font-weight: 900; line-height: 1; color: #fff; position: relative; transform-origin: center center; pointer-events: all; }
.global-navi > ul > li a > span.t{ display: block; font-size: 3.2em; letter-spacing: -0.1em; position: relative; transform: scaleX(.80);}
.global-navi > ul > li a > span{ display: block; font-size: 1.8em; letter-spacing: -0em; position: relative; transform: scaleX(.80);}
.global-navi > ul > li a:hover{ text-decoration: none; color:#ffdc00; }

.global-share{ display: flex; justify-content: center; }
.global-share > div{ width: 3.9vw; margin: 0 .5em; }
.global-share a{ display: block; }
.global-share a:hover{ transform: scale(1.05); }

.language-btn{ width: calc(600/3000*100vw); position: absolute; top:1.3vw; right: 1.3vw; }
.language-btn a{ display: block; }
.language-btn a:hover{ transform: scale(1.05); }

.cont-sp-btn{ display: block; width: 6.66vw; position: fixed; top:1.3vw; left: 1.3vw; z-index: 2; pointer-events: all; }
.cont-sp-btn a{ display: block; line-height: 0; color:#fff; }
.cont-sp-btn svg{ fill: currentColor; }
.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; }

.cont-global-navi{ opacity: 0; pointer-events: none; transition: all .3s ease-out 0s; }
.spmenu-on .cont-global-navi{ opacity: 1; pointer-events: auto; }
.sub-page .cont-global-navi{ width: 100%; }

.global-navi > ul > li a{  pointer-events: none; }
.spmenu-on .global-navi > ul > li a{  pointer-events: all; }
.spmenu-on .language-btn{ position: fixed; }

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

.cont-upper{ position: relative; z-index: 2; }
.cont-middle{ position: relative; z-index: 1; }
.cont-bottom{ position: relative; }

.top-page .cont-middle::before{ content:""; width: calc(488/3000*100vw); height: calc(5961/3000*100vw); background: url("../images/vhl.png") no-repeat top center; background-size: contain; position: absolute; top:50vw; right:0; z-index: 10; pointer-events: none;  }
.top-page .cont-middle::after{ content:""; width: calc(488/3000*100vw); height: calc(5961/3000*100vw); background: url("../images/vhl.png") no-repeat top center; background-size: contain; position: absolute; top:80vw; left:0; z-index: 10; pointer-events: none; transform: rotate(180deg); }

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

.top-subtitle{ font-size: 1em; margin: 0 auto 2em auto; padding: 0; text-align: center; z-index: 2; position: relative; line-height: 1; }
.top-subtitle p{ font-size: 4em; font-weight: 900; letter-spacing: -0.1em; margin-bottom: 0; transform: scaleX(0.8); }
.top-subtitle > span{ display: block; font-size: 2.6em; font-weight: 900; letter-spacing: -0.05em; transform: scaleX(0.8); }

.sub-logo{ width: calc(600/3000*100vw); padding: 1em 0; position: relative; margin: 0 auto; z-index: 51; }


/* footer */
.part-footer{ display: none; }
.cont-global-footer{ margin: 0 auto; padding: 2em 0 0 0; position: relative; text-align: center; }
.footer-pagetop{ width: calc( 351/3000 * 100vw ); height: calc( 69/3000 * 100vw ); position: absolute; top:3em; right: 2em; 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: top center; }
.footer-pagetop a:hover{ transform: scale(1.1); }
/* .footer-pagetop{ opacity: 0;}
.footer-pagetop.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-share{ display: flex; justify-content: center; }
.footer-share > div{ width: 3.9vw; margin: 0 .5em; }
.footer-share a{ display: block; }
.footer-share a:hover{ transform: scale(1.05); }

.footer-copyrihgt{ padding: 1.5em 0; }
.footer-copyrihgt p{ font-size: .8em; margin-bottom: 0; color: #e62278; filter: drop-shadow(1px 1px 0 #000); }

/* 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(255,255,255,.05); font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; }
.table-a td{ padding:0.5em; background-color:rgba(255,255,255,.025); vertical-align: top; }

.frame-a{ background-color:rgba(100,100,100,.3);}
.frame-b{ background-color:#e62278;}

.border-a{ border: #FFF solid 1px; }

.sep-a{ border-top: #e62278 solid 1px; height: 1px; }

/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 4em; margin-bottom: 3em; background-color: rgba(20,20,20,.9); border-top:#e62278 solid .666em;  }
.content-entry .entry-head{ margin-bottom: 0; position: relative; text-align: left; }
.content-entry .entry-date{ font-size: 1em; margin-bottom: 0; pointer-events: none;  }
.content-entry .entry-date > span{ display: inline-block; padding: .35em 0; font-size: 1.333em; font-weight: 900; line-height: 1; letter-spacing: .1em; margin-bottom: 0;  }
.content-entry .entry-title{ padding: .25em 0 1em 0; margin-bottom: 0; position: relative; color: #e62278; }
.content-entry .entry-title > span{ font-weight: 900; font-size: 1.733em; line-height: 1.5; }

.content-entry .entry-body{ padding: 1em 0; font-size: 1.333em; text-align: left; }


.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%; max-width: 70vw; margin: 0 auto; }

.frame-modal{ display: flex; flex-wrap: nowrap; justify-content: center; background:#000; padding: 2em 1.5em; position: relative; color: #000; }
.frame-modal .main{ background: url("../images/common/modal-bg-main.png") repeat-y top center; background-size: 100%; width:auto; padding: 1em; }
.frame-modal .r{ background: url("../images/common/modal-bg-r.png") repeat-y top left; background-size: 100%; width:45px; }
.frame-modal .l{ background: url("../images/common/modal-bg-l.png") repeat-y top right; background-size: 100%; width:45px; }

.castframe{ position: relative; padding: .75em; background-color: #e62278; line-height: 1; }
.castframe > img{ position: relative; z-index: 1; }
.castframe::before{ content:""; width: calc(368/3000*100vw); height:calc(369/3000*100vw); position: absolute; top:-7vw; left:-5vw; background: url("../images/common/castframe-lt.png") no-repeat center center; background-size: contain; z-index: 2; }
.castframe::after{ content:""; width: calc(311/3000*100vw); height:calc(302/3000*100vw); position: absolute; bottom:-3vw; right:-4vw; background: url("../images/common/castframe-rb.png") no-repeat center center; background-size: contain; z-index: 2; }
.castframe.nosplat::before{ display: none; }
.castframe.nosplat::after{ display: none; }

/* colorbox customize */
#colorbox{}
#cboxOverlay{ background:rgba(0,0,0,.6) ; /*background:rgba(0,0,0,.7) ;*/ }
#cboxTitle{ visibility: hidden; }
#cboxContent{/*  margin:3.61em 2.22em 0 2.22em; */ background:rgba(0,0,0,0); position: relative;}
#cboxLoadedContent{ padding:3.61em 2.22em 0 2.22em; border:none; background:rgba(0,0,0,0); }
#cboxClose{top: 0 /* -3.61em */ ; right: inherit /* 0.27em */ ; left:2.2em; display:block; background:url("../images/navi/sp-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"); }
.cboxIframe{ background: transparent; }
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

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

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

/* TOP-PAGE */
/* main */
.cont-top-visual{ position: relative; padding-bottom: 1.5em; }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{ position: relative; margin: 0 auto; 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 0 0; }
.kv-container .grp .vis-grp .bg{ position: relative; }
.kv-container .grp .vis-grp .vis{ position: absolute; top:0; }
.kv-container .oa{ width: calc(1506/3000*100vw); top:inherit; bottom:4.0vw; left: 0; right: 0; margin: 0 auto; }

.vis-switch-container{ margin: 0; position: absolute; bottom:-6vw; left:0; right:0; pointer-events: none; z-index: 2; }
.vis-switch{ display: flex; flex-wrap: wrap; justify-content: center; }
.vis-switch > div{ width: calc(362/3000*100vw); height: calc(364/3000*100vw); margin: 1em; pointer-events: auto; line-height: 0; }
.vis-switch > div a{ display: block; width: 100%; min-height: 100%; position: relative; line-height: 0; filter:drop-shadow( 0 0 .25em #000 ) ; }
.vis-switch > div.on a{ pointer-events: none; filter:drop-shadow( 0 0 .25em #ffdc00 ) drop-shadow( 0 0 .25em #ffdc00 ) drop-shadow( 0 0 .25em #ffdc00 ); }


/* #Foreground .opening{ display: none; } */
#Foreground .opening{ position: fixed; overflow: hidden; }
#Foreground .opening .bg{ width: 100%; height: 100vh; position: absolute; top:0; background-color: #000; }
#Foreground .opening .op-cont{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; }
#Foreground .opening .op-cont .anm-part{ position: relative; width: calc(1400/3000*100vw*0.5); height: calc(1800/3000*100vw*0.5); line-height: 0; }
#Foreground .opening .op-cont .anm-part .part{ width: 100%; height: 100%; position: absolute; top:0; opacity: 0; }

.init #Foreground .opening .op-cont .anm-part .p1{ transform: translateY(-15%); }
.init #Foreground .opening .op-cont .anm-part .p2{ transform: translateY(-15%); }
.init #Foreground .opening .op-cont .anm-part .p3{ transform: scale(1.2); }
.init #Foreground .opening .op-cont .anm-part .p4{ transform: translateY(15%); }
.init #Foreground .opening .op-cont .anm-part .p5{ transform: translateY(15%); }
.init #Foreground .opening .op-cont .anm-part .p6{ transform: translateY(15%); }
.init #Foreground .opening .op-cont .anm-part .p7{ transform: rotate(-30deg); }

.s1 #Foreground .opening .op-cont .anm-part .p1{ opacity: 1; transform: translateY(0); transition: all 1.0s ease-out 0s; }
.s1 #Foreground .opening .op-cont .anm-part .p2{ opacity: 1; transform: translateY(0); transition: all 1.0s ease-out .1s; }
.s1 #Foreground .opening .op-cont .anm-part .p3{ opacity: 1; transform: scale(1); transition: all 1.0s ease-out .4s; }
.s1 #Foreground .opening .op-cont .anm-part .p4{ opacity: 1; transform: translateY(0); transition: all 1.0s ease-out .2s; }
.s1 #Foreground .opening .op-cont .anm-part .p5{ opacity: 1; transform: translateY(0); transition: all 1.0s ease-out .3s; }
.s1 #Foreground .opening .op-cont .anm-part .p6{ opacity: 1; transform: translateY(0); transition: all 1.0s ease-out .4s; }
.s1 #Foreground .opening .op-cont .anm-part .p7{ opacity: 1; transform: rotate(0); transition: all 1.0s ease-out 1s; }
.s2 #Foreground .opening .op-cont{ opacity: 0; transform: scale(1.5) rotate(10deg); transition: all .5s ease-out 0s; }
.s2 #Foreground .opening .bg{ opacity: 0; transition: all .5s ease-out .3s; }

.init .kv-container .grp .vis-grp{ transform: scale(1.5,1.5) rotate(-30deg); transform-origin: 50% 25%; }
.init .kv-container .oa{ opacity: 0; transform: translateY(-30%); }
.s2 .kv-container .grp .vis-grp{ transform: scale(1,1) rotate(0deg); transition: all .8s ease-out .1s; }
.s2 .kv-container .oa{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .4s; }

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


/* top-movie */
.cont-top-movie{ z-index: 6; }
.cont-top-movie{ margin: 0 auto; background: url("../images/movie-bg.png") repeat-y center top; background-size: 100%; }
.cont-top-movie.cont-top-content > .inner{ padding:8em 0 4em 0; }
.cont-top-movie .movie-list{ width: calc(2084/3000*100vw); height: calc(1066/3000*100vw);  position: relative; margin: 0 auto; background: url("../images/movie-thumb-bg.png") no-repeat center center; background-size: 100%; }
.cont-top-movie .movie-list .thm{ padding: 1em 5em; /*width: calc(1720/3000*100vw);*/  }
.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%; height:7vw; background:rgba(0,0,0,.9) url("../images/common/play-btn.png") no-repeat center center; background-size: auto 2.3em; transform-origin: center center; top:12.5vw; left: 0; right: 0; margin: 0 auto; opacity: .5; pointer-events: none; }
.cont-top-movie .movie-list .thm a:hover::after{ opacity: 1; }

.top-movie-cursor{ position: absolute; width: 80vw; top:22vw; 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(96/3000*100vw); height: calc(171/3000*100vw); position: relative; pointer-events: all; cursor: pointer; }
.top-movie-cursor ul li.slick-disabled{ opacity: .4; pointer-events: none; }
.top-movie-cursor ul li span{ display: block; width:100%; height: 100%; background:  url("../images/top-movie-cursorbtn.png") no-repeat center center; background-size: 100%; transform-origin: center center; }
.top-movie-cursor ul li.right span{ transform: scale(-1,1); }

/* .top-movie-dots{ text-align: center;}
.top-movie-dots ul{ display: block; list-style-type: none; padding: 0; margin: 0; }
.top-movie-dots li { display: inline-block; margin: 0 3em 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: #d9d7d5; font-size: 1em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.top-movie-dots li.slick-active button:before { color: #58c3e0;} */

.cont-top-movie .bits{ width: calc(445/3000*100vw); height: calc(855/3000*100vw); background: url("../images/movie-bits.png") no-repeat center center; background-size: contain; position: absolute; bottom: -13vw; left: 0; }


/* news twitter */
.cont-top-news-twitter{ z-index: 5; }
.cont-top-news-twitter{ margin: 0 auto; background: url("../images/news-twitter-bg.png") repeat-y center top; background-size: 100%; border: #000 solid 1.3em; }
.cont-top-news-twitter > .inner{ padding: 5em 2em 7em 2em; display: flex; flex-wrap: wrap; justify-content: space-around; align-items:stretch; }
.cont-top-news,
.cont-top-twitter{ width: calc(1290/3000*100vw); }
.top-news-twitter-frame{ width: calc(1290/3000*100vw); height: calc(873/3000*100vw); background: url("../images/news-twitter-hd-bg.png") no-repeat center top; background-size: contain; }
/* news */
.cont-top-news{  }
.top-news-container{ width: 100%; height: 100%; padding: 2.5em; overflow: hidden; }
.top-news-container dl{ font-size: 1.0em; margin-bottom: 2em; }
.top-news-container dl:last-child{ margin: 0;}
.top-news-container dl dt{ font-weight: 900; color: #000; background:url("../images/news-marker.png") no-repeat left top; background-size: 1em;  margin: 0 0 .5em 0; padding: 0 0 0 1.2em; letter-spacing: 0.05em; line-height: 1;  font-size: 1.333em; }
.top-news-container dl dd{ font-size: 1.333em; line-height: 1.4; letter-spacing: 0.05em; color: #000; }
.top-news-container dl dd a,
.top-news-container dl dd a:visited{ text-decoration: none; color: inherit; }
.top-news-container dl dd a:hover{ text-decoration: underline; color: inherit; }
/* twitter */
.cont-top-twitter{ }
.twitter-widget-container{ height: 100%; position: relative; overflow: hidden; }
.twitter-widget-container iframe{ min-height: 100%; }
.twitter-timeline-container{ padding: 0 2.5em 0 0 ; }

.cont-top-news-twitter .bits{ width: calc(581/3000*100vw); height: calc(669/3000*100vw); background: url("../images/news-twitter-bits.png") no-repeat center center; background-size: contain; position: absolute; bottom: -10.5vw; right: -1.3em; }
.cont-top-news-twitter .bits2{ width: calc(531/3000*100vw); height: calc(481/3000*100vw); background: url("../images/news-twitter-bits2.png") no-repeat center center; background-size: contain; position: absolute; top: -5.5em; left: 6vw; }
.cont-top-news-twitter .bits3{ width: calc(433/3000*100vw); height: calc(258/3000*100vw); background: url("../images/news-twitter-bits3.png") no-repeat center center; background-size: contain; position: absolute; top: -1.3em; left: 50vw; }
.cont-top-news-twitter .bits4{ width: calc(215/3000*100vw); height: calc(172/3000*100vw); background: url("../images/news-twitter-bits4.png") no-repeat center center; background-size: contain; position: absolute; bottom: 1vw; left: 38vw; }


/* top onair */
.cont-top-onair{ z-index: 4; }
.cont-top-onair{ margin: 0 auto;color: #000; background:#FFF url("../images/onair-bg.webp") repeat-y center -10em; background-size: 100%; }
.cont-top-onair > .inner{ padding: 5em 0; }
.cont-top-onair .top-subtitle{ color: #000; }

.onair-text1{ width: calc(2223/3000*100vw); margin: 0 auto 4em auto; }
.onair-text2{ width: calc(2262/3000*100vw*0.9); margin: 0 auto; filter: drop-shadow(.5em 0 .2em rgba(0, 78, 255, 0.25)) drop-shadow(-.5em 0 .2em rgba(0, 78, 255, 0.25));}
.onair-text3{ width: calc(1456/3000*100vw); margin: 0 auto; filter: drop-shadow(.5em 0 .2em rgba(0, 78, 255, 0.25)) drop-shadow(-.5em 0 .2em rgba(0, 78, 255, 0.25));}
.onair-str-ttl1{ text-align: center; margin: 0 auto 1em auto; }
.onair-str-ttl1 > p{ margin: 0; padding: 0 .4em; font-size: 2.2em; font-weight: 900; display: inline-block; background-color: #F9DD4A; position: relative; transform: skewX(-15deg) ;  }

.onair-list-block{ display: inline-block; color: #F9DD4A; padding: .5em .75em; background-color: #000; border:none; border-radius: 0; text-decoration: none; font-weight: 900; letter-spacing: .1em;  }

.onair-list{ margin: 0 auto ; max-width: 55em; }
.onair-list{ display: flex; flex-wrap: wrap; justify-content: center; text-align: left; padding: 1.5em; background-color: rgba(0,0,0,.8); border-top:#ff0078 solid 1px; border-radius: 0; }
.onair-list.str{ border-color:#00daff ; }
.onair-list.first{ border-top:none;  }
.onair-list .col-a{ width: 27.5%; }
.onair-list .col-b{ width: 72.5%; }
.onair-list .col-c{ width: 100%; }
.onair-list .col-d{ width: 72.5%; margin-left: 27.5%; }
.onair-list .name{ font-size: 1.3em; font-weight: bold; margin-bottom: 0; letter-spacing: .1em; display: inline-block; color: #ff0078;}
.onair-list.str .name{ color:#00daff ; }
.onair-list .schd{ font-size: 1.3em; font-weight: bold; margin-bottom: 0; letter-spacing: .1em; }
.onair-list .time{ font-size: 1.3em; font-weight: bold; margin-bottom: 0; letter-spacing: .1em; }
.onair-list .extr{ font-size: .9em; font-weight: bold; margin: .3em 0 0.1em 0; letter-spacing: .1em;}
a.onair-list { text-decoration: none; color: #000; pointer-events: all; }
a.onair-list:hover{ color: #000; background-color: #F9DD4A; }

.onair-list-il{ max-width: 70%; margin: 0 auto 2em auto; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.onair-list-il > a{ width: 24%; margin: 0.5%; display: block; color: #F9DD4A; padding: .75em .25em; background-color: #000; border:none; border-radius: 0; text-decoration: none; font-weight: 900; }
.onair-list-il > a.cs{ pointer-events: none; }
.onair-list-il > a:hover{ background-color: #F9DD4A; color: #000;}


/* top introduction */
.cont-top-intro{ z-index: 4; }
.cont-top-intro{ margin: 0 auto; background: url("../images/intro-bg.png") repeat-y center top; background-size: 100%; }
.cont-top-intro > .inner{ padding: 5em 0; }
.cont-top-intro .top-subtitle{ color: #000; }
.intro-container{ line-height: 2; text-align: center; color: #000; font-size: 1.666em; font-weight: 900; font-style: italic; letter-spacing: .1em; }
.intro-container .text{ margin-bottom: 0; }

.cont-top-intro .text-bg{ width: calc(1406/3000*100vw*1.1); height: calc(1640/3000*100vw*1.1); background: url("../images/intro-text-bg.png") no-repeat center center; background-size: contain; position: absolute; top: -0.5vw; left:0; right: 0; margin: 0 auto; }


/* top story */
.cont-top-story{ z-index: 3; }
.cont-top-story{ margin: 0 auto; background: url("../images/story-bg.webp") repeat-y center top; background-size: 100%; }
.cont-top-story > .inner{ padding: 5em 0; }
.cont-top-story .top-subtitle{ color: #FFF; }
.story-container{ line-height: 2; text-align: center; color: #000; letter-spacing: .1em; }
.story-container .text{ margin-bottom: 0; }

.cont-story-navi{ width: 100%; padding-top: 3vw; margin: 0 auto; position: relative; z-index: 3; }
.cont-story-navi:before{ content:""; display: block; width: 100%; height: 12vw; background: #000; position: absolute; top:0; transform: skewY(-2.5deg); }
.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: 5em; height: 5em; display: block; margin: .5em; padding:0; text-align: center; }
.story-navi ul li.spc-sp{ display: none; }
.story-navi ul li a{ width: 5em; height: 5em; padding-top: .25em; color: #FFF; display: block; width: 100%; transition: all .1s ease 0s; text-decoration: none; position: relative; line-height: 1; }
.story-navi ul li a span{ font-size: 2.6em; font-weight: 900; position: relative; display: block; line-height: 1; margin-bottom: .1em; }
.story-navi ul li a span.lbl{ font-size: .7em; margin-bottom: 0; }
.story-navi ul li a:hover{ color: #ff4b21; }
.story-navi ul li.crt a{ pointer-events: none; color: #15d002; }
.story-navi ul li.cs a{ pointer-events: none; color: #aaa; }

.cont-story-data{ width:calc(2400/3000*100vw); min-height: 60vw; margin: 0 auto; position: relative; position: relative; z-index: 2; }
.cont-story-data{ background:#15d002; }
.cont-story-data:before{ content:""; width: calc(2459/3000*100vw); height: calc(1919/3000*100vw); position: absolute; top:2vw; left:-1vw; background: url("../images/story-data-bg.webp"); background-size:contain; transform: rotate(3deg); }

.story-data{ display: none; }
.story-data{ position: relative; pointer-events:none; text-align: center;  }
.story-data .episode-container{ position: relative; padding: 6em 4em 7em 4em ; color: #FFF; }

.story-data .ep-slider-sceneImage{ width: calc(1720/3000*100vw); max-width: 1680px; margin:0 auto  ; position: relative; z-index: 2;  }
.story-data .ep-slider-sceneImage .sld{ position: relative; padding: 0; text-align: center;  }
.story-data .ep-slider-sceneImage .sld img{  }

.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: #343434; font-size: 1.25em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.ep-slider-dots li.slick-active button:before { color: #15d002;}

.story-data .ep-title-block{ display: block; font-size: 1em; margin-bottom: 3em; font-weight: normal; }
.story-data .ep-number{ font-size: 2.3em; font-weight: 900; margin-bottom: 0; padding-left: .5em; letter-spacing: 0; position: absolute; display: inline-block; }
.story-data .ep-number > span{ font-size: .6em; display: inline-block; position: absolute; top:.2em; left:0; }
.story-data .ep-title{ font-size: 2.3em; font-weight: 900; margin-bottom: 0; padding: .5em 0 0 1.5em; letter-spacing: 0; position: relative; display: inline-block; }
#S10.story-data .ep-title,#S11.story-data .ep-title,#S12.story-data .ep-title{ padding-left: 2.25em }
.story-data .ep-title > span{  }
.story-data .ep-text{  }
.story-data .ep-text p{ font-size: 1.6em; font-weight: 900; font-style: italic; letter-spacing: .05em; line-height: 2;  margin: 0;}
.story-data .ep-text p [data-ruby]::before { top: -1.3em; transform: scale(0.45,0.5); width: 222%;  }

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




/* top staffcast */
.cont-top-staffcast{ z-index: 3; }
.cont-top-staffcast{ margin: 0 auto; background: url("../images/staffcast-bg.png") repeat-y center top; background-size: 100%; }
.cont-top-staffcast > .inner{ padding: 6em 0; }
.cont-top-staffcast .top-subtitle{ margin-bottom: 4em; }
.staffcast-container{ width: 70%; margin: 0 auto; }
.staffcast-label{ text-align: center; margin-bottom: 3em; }
.staffcast-label > span{ display: inline-block; padding: .3em .3em; font-size: 1.666em; font-weight: 900; border:#FFF solid .233em; line-height: 1; }

.staffcast-list{ font-weight: 900; line-height: 1; }
.staffcast-list .list-item{ width: 100%; margin-bottom: 2em; letter-spacing: .05em; position: relative; display: flex; flex-wrap: wrap; padding: 0; }
.staffcast-list .list-item .pos{ width: 46%; display: block; font-size: 1.333em; margin: 0; padding-right: .5em; text-align: right; position: relative; }
.staffcast-list .list-item .name{ width: 54%; display: block; font-size: 1.666em; margin: 0; padding-top: .5em; text-align: left;  position: relative;}
.staffcast-list .list-item .name > span{ display: inline-block; position: relative;}
.staffcast-list .list-item .exname{ width: 54%; margin-left: 46%; font-size: 1em; margin-bottom: 0; padding-top: .5em; text-align: left; }
.staffcast-list .list-item .cmt{ display: inline-block; width: 1.25em; margin: 0 0 0 .25em; position: relative; text-decoration: none; pointer-events: auto; transform: translateY(-3%); }
.staffcast-list .list-item .cmt:hover{transform: scale(1.2); text-decoration: none; cursor: pointer; }

.comment-container{ padding: 4em 1em; }

.cont-top-staffcast .bits{ width: calc(598/3000*100vw); height: calc(667/3000*100vw); background: url("../images/staffcast-bits.png") no-repeat center center; background-size: contain; position: absolute; bottom: -10.5vw; right: 1.3em; }
.cont-top-staffcast .bits2{ width: calc(523/3000*100vw); height: calc(498/3000*100vw); background: url("../images/staffcast-bits2.png") no-repeat center center; background-size: contain; position: absolute; top: 1em; left: 30vw; }
.cont-top-staffcast .bits3{ width: calc(672/3000*100vw); height: calc(923/3000*100vw); background: url("../images/staffcast-bits3.png") no-repeat center center; background-size: contain; position: absolute; top: 5vw; right: 0; }


/* top character */
.cont-top-character{ z-index: 2; }
.cont-top-character{ margin: 0 auto; background: url("../images/character-bg.jpg") no-repeat center top; background-size: cover; }
.cont-top-character > .inner{ padding: 4em 0 2em 0; }
.cont-top-character .top-subtitle{ margin-bottom: 4em; }
.character-container{ width: calc(2400/3000*100vw); margin: 0 auto;  }

#CharaCont{ position: relative; }
.cont-character-navi{ width: 100%; margin: 0 auto 2em auto; position: relative; z-index: 5; }
.character-navi{ width: 100%; }
.character-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.character-navi ul li{ width: calc(358/3000*100vw); height: calc(360/3000*100vw); display: block; margin: .25em; padding:0; }
.character-navi ul li a{ display: inline-block; position: relative; transform-origin: center center; text-decoration: none; pointer-events: auto; cursor: pointer; background: url("../assets/character/navi-bg-off.png") no-repeat top center; background-size: contain; }
.character-navi ul li a:hover{ text-decoration: none; transform: scale(1.1); }

.character-navi ul li.crt{ }
.character-navi ul li.crt a{ pointer-events: none; background-image: url("../assets/character/navi-bg-on.png"); }
.character-navi ul li.sep-sp{ display: none; }

.cont-character-data{ width:100%; min-height: 55vw; position: relative; }
.character-data{ width:100%; padding: 0; min-height: 55vw; position: relative; pointer-events:none; color: #FFF; display: none; }

.character-data .chr-img{ position: relative; z-index: 4; width: 38%; margin: 0 auto 0 0;  }
.character-data .chr-prof{ position: absolute; z-index: 5; width: 62%; top:0; left:41%; padding-top: 4em; }
.character-data .prof-name{ width: 100%; padding: .8em 0; margin: 0 0 2em 0; position: relative;}
.character-data .prof-name .name{ display: block; margin-bottom: .5em; position: relative; z-index: 2; }
.character-data .prof-name .name p{ display: block; font-size: 3.0em; font-weight: 900; letter-spacing: 0.05em; color: #f7493e; margin-bottom: 0; }
.character-data .prof-name .name p .aka{ font-size: .6em; padding-left: 0em; }
.character-data .prof-name .cv{ display: block; position: relative; z-index: 2; }
.character-data .prof-name .cv p{ display: block; font-size: 1.633em; letter-spacing: 0.05em; font-weight: 900; margin-bottom: 0; }
.character-data .prof-text{ position: relative;  }
.character-data .prof-text .text{ font-size: 1.633em; font-weight: 900; letter-spacing: .05em; line-height: 2;  }
.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);}
}


/* top music */
.cont-top-music{ z-index: 2; overflow: hidden; }
.cont-top-music{ margin: 0 auto; background: url("../images/music-bg.webp") repeat-y center top; background-size: 100%; }
.cont-top-music > .inner{ padding: 6em 0; }
.cont-top-music .top-subtitle{ margin-bottom: 4em; }
.top-music-container{ width: 75%; margin: 0 auto; text-align: center; }

.music-list{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.music-list .music-data{ width: 50%; padding: 0 2em 2em 2em; }

.music-data-label{ font-size: 2em; letter-spacing: 0.05em; font-weight: 900; margin-bottom: 0; color:#34eb1c; }
.music-data-title{ font-size: 2.133em; letter-spacing: 0.05em; font-weight: 900; margin-bottom: 0; color:#000; filter:drop-shadow(0 0 .05em #FFF) drop-shadow(0 0 .05em #FFF) drop-shadow(0 0 .05em #FFF); }
.music-data-name{ font-size: 2em; letter-spacing: 0.05em; font-weight: 900; margin-bottom: 0; color:#000; filter:drop-shadow(0 0 .05em #FFF) drop-shadow(0 0 .05em #FFF) drop-shadow(0 0 .05em #FFF); }
.music-data-cmt{ padding-top: .5em; width: 2em; margin: 0 auto;}
.music-data-photo{ padding: 6em 4em 3em 4em; position: relative; pointer-events: none; }
.music-data-photo .frame{ position: relative; padding: .333em; background-color: #000; z-index: 2; }
.music-data-photo .bg{ width: 42em; position: absolute; top:-3.5em; left:-4em; z-index: 1; }
.music-data-btn{ margin: 0 auto; z-index: 2; position: relative;}
.music-data-btn .ilink{ border-color:#000; font-size: 1.3em; }
.music-data-btn .ilink:before{ content:"▶︎ "; }
.music-data-btn .ilink,
.music-data-btn .ilink:visited,
.music-data-btn .ilink:active{ color: #fff; background-color: #000; }
.music-data-btn .ilink:hover{ text-decoration: none; background-color: #000; color: #e62278; }

/* top books */
.cont-top-books{ z-index: 2; }
.cont-top-books{ margin: 0 auto; background: url("../images/books-bg.png") repeat-y center top; background-size: 100%; }
.cont-top-books > .inner{ padding: 6em 0; }
.cont-top-books .top-subtitle{ margin-bottom: 4em; }
.books-container{ width: 75%; margin: 0 auto; text-align: center; }

.books-list{ display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto 1em auto; }
.books-list > div{ width: calc( (1 / 4 * (100% + 2em)) - 2em ); margin-bottom: 2em; margin-right: 2em; }
.books-list > div:nth-of-type(4n){ margin-right: 0;}
.books-list > div p{ font-size: 1em; margin-bottom: 0; letter-spacing: .05em; text-align: left; }
.books-list > div .thm{ margin-bottom: .25em; }
.books-list > div .cap{ margin-bottom: 0; text-align: left; }

/* top campaign */
.cont-top-campaign{ z-index: 1; }
.cont-top-campaign{ margin: 0 auto; background: url("../images/campaign-bg.png") repeat-y center top; background-size: 100%; }
.cont-top-campaign > .inner{ padding: 7.5em 0; }
.cont-top-campaign .top-subtitle{ margin-bottom: 4em; }
.campaign-container{ text-align: center; }

.campaign-banner{ width: calc(640/3000*100vw); margin: 0 auto; }

.cont-top-campaign .bits{ width: calc(733/3000*100vw); height: calc(339/3000*100vw); background: url("../images/campaign-bits.png") no-repeat center center; background-size: contain; position: absolute; bottom: 0; left: 0; }
.cont-top-campaign .bits2{ width: calc(440/3000*100vw); height: calc(531/3000*100vw); background: url("../images/campaign-bits2.png") no-repeat center center; background-size: contain; position: absolute; top: 13em; right: 5vw; }
.cont-top-campaign .upper{ width: 100%; height: calc(289/3000*100vw); background: url("../images/campaign-bg-upper.png") no-repeat center center; background-size: contain; position: absolute; top: -1px; }


/* SUB-PAGE */
.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 43em);}

/* news */
#Page_News{ background: url("../images/sub-news-bg.png") repeat-y center top; background-size: 100%; }
.cont-sub-news{ margin: 0 auto; }
.cont-sub-news > .inner{ padding: 4em 0; }
.cont-sub-news .top-subtitle{ margin-bottom: 4em; }
.sub-news-container{ width: 75%; margin: 0 auto; }


/* music */
#Page_Music{ background: url("../images/sub-news-bg.png") repeat-y center top; background-size: 100%; }
.cont-sub-music{ margin: 0 auto; }
.cont-sub-music > .inner{ padding: 4em 0; }
.cont-sub-music .top-subtitle{ margin-bottom: 4em; }
.sub-music-container{ width: 75%; margin: 0 auto; text-align: center; background-color: rgba(20,20,20,.9);}


/* goods */
#Page_Goods{ background: url("../images/sub-news-bg.png") repeat-y center top; background-size: 100%; }
.cont-sub-goods{ margin: 0 auto; }
.cont-sub-goods > .inner{ padding: 4em 0; }
.cont-sub-goods .top-subtitle{ margin-bottom: 4em; }
.sub-goods-container{ width: 75%; margin: 0 auto; }

.cont-sub-goods .cont-tiles{ margin: 0 auto;  }

.goods-list{ display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto; align-items: stretch;  }
.goods-list .goods-data{ width: 24%; margin: 0.5%; padding: .5em; background-color: rgba(255,255,255,.0); position: relative; overflow: hidden; }

.goods-list .goods-data-img{ width: 100%; height: 18vw; padding: 0 0 .5em 0; display: table-cell; text-align: center; vertical-align: middle; }
.goods-list .goods-data-name{ padding: .5em .5em; font-size: .8em; color: #fff; background-color: #e62278; font-weight: 900; }

.goods-list .goods-data-detail{ padding: .5em 0 .5em 0; margin-bottom: 0; padding-bottom: 0; font-size: .8em;}
.goods-list .goods-data-data{ padding: .5em 0 .5em 0; padding-bottom: 0; font-size: .8em; /*color: #1ea728;*/ }
.goods-list .goods-data-table{ border-collapse:separate; border-spacing: 2px; }
.goods-list .goods-data-table th{ color: #999; background-color: rgba(0,0,0,0.0); font-weight: 500; font-size: .8em; padding: 0 .2em; }
.goods-list .goods-data-table td{ padding: 0 .2em; font-size: .8em; }
.goods-list .goods-data-link{ padding: 0; font-size: .8em; margin-bottom: 0; }


/* .cont-news-cursor{ width: 70%; margin: 0 auto; position: relative; }
.news-cursor{ position: relative; }
.news-cursor ul{ display: flex; flex-wrap: nowrap; justify-content: center; margin: 0; padding: 0em 0 0em 0; list-style-type: none; }
.news-cursor ul{justify-content: space-between; }
.news-cursor ul li{ display: block; }
.news-cursor ul li a{ display: block; }
.news-cursor ul li a span{ display: block; width: 5.666em; height: 5.666em; }
.news-cursor ul li#NewsPls a span{ background: url("../images/news/pager-pls.png") no-repeat center center; background-size: contain;}
.news-cursor ul li#NewsHome a span{ background: url("../images/news/pager-home.png") no-repeat center center; background-size: contain;}
.news-cursor ul li#NewsCsrL a span{ background: url("../images/news/pager-csr-l.png") no-repeat center center; background-size: contain;}
.news-cursor ul li#NewsCsrR a span{ background: url("../images/news/pager-csr-r.png") no-repeat center center; background-size: contain;}
.news-cursor ul li.off a{ pointer-events: none; opacity: .5;  }
.news-cursor ul li#NewsPls,
.news-cursor ul li#NewsHome{ display: none; } */



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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* 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{ font-size: calc((100vw / 750) * 25); }
/* header */
.part-header{  }
.cont-global-navi{ width: 100%; height: 100vh; padding: 2.5em 0 0 0; background-color: rgba(0,0,0,.95); position: fixed; top:0; }
.cont-global-navi .v1{ top:16vw; left:0; transform-origin: left top; transform: scale(1.2); z-index: 1; }
.cont-global-navi .v2{ top:115vw; left:58vw; transform-origin: center top; transform: scale(1.2); z-index: 1; }
.cont-global-navi .v3{ top:80vw; right:0; transform-origin: right top; transform: scale(1.2); z-index: 1; }

.global-logo{ width: calc(806/3000*100vw*1.4); margin: 0 auto 3.5em auto; position: relative; z-index: 5; filter: drop-shadow(0 0 .25em #000); }
.global-navi{ margin: 0 auto 1em auto ; z-index: 5; filter: drop-shadow(0 0 .25em #000); }
.global-navi > ul > li{ width: 45%; padding: 0 0 1.4em 0 ; margin: 0 0 1em 0 ; background-size: 1.2em;}
.global-navi > ul > li.sep-pc{ display: none; }
.global-navi > ul > li.gn1,
.global-navi > ul > li.gn2,
.global-navi > ul > li.gn5,
.global-navi > ul > li.gn6{ margin-left: inherit ; margin-right: inherit; }
.global-navi > ul > li a > span.t{ font-size: 1.6em; }
.global-navi > ul > li a > span{ font-size: 1.2em; }

.global-share > div{ width: 8vw; margin: 0 .5em; }
.language-btn{ width: calc(600/3000*100vw*1.2); top:1.3vw; right: 1.3vw; }
.cont-sp-btn{ width: 8vw; top:1.3vw; left: 1.3vw;  }


/* body */

.cont-middle::before{ width: calc(488/3000*100vw); height: calc(5961/3000*100vw); top:150vw; }
.cont-middle::after{ width: calc(488/3000*100vw); height: calc(5961/3000*100vw); top:380vw; }

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

.top-subtitle{ margin: 0 auto 1em auto; }
.top-subtitle p{ font-size: 1.8em; }
.top-subtitle > span{ font-size: 1.2em; }

.sub-logo{ width: calc(600/3000*100vw*1.4); padding: .5em 0; }

/* footer */
.cont-global-footer{ margin: 0 auto; padding: 2em 0 0 0; position: relative; text-align: center; }
.footer-pagetop{ width: calc( 351/3000 * 100vw *1.5 ); height: calc( 69/3000 * 100vw * 1.5 ); top:2.5em; right: 1em;  }
.footer-share > div{ width: 8vw; margin: 0 .5em; }

/* content */
/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 1.5em; margin-bottom: 3em; border-width: .333em;  }
.content-entry .entry-date > span{ font-size: 1em; font-weight: 900; }
.content-entry .entry-title > span{ font-size: 1.2em;  }
.content-entry .entry-body{ font-size: 1.133em; }

.cont-modal{ max-width: inherit; }
.frame-modal{ padding: 1.2em 1em; }
.frame-modal .r{ width:90px; }
.frame-modal .l{ width:90px; }

.castframe{  padding: .5em; }
.castframe::before{ width: calc(368/3000*100vw*1.8); height:calc(369/3000*100vw*1.8); top:-12vw; left:-10vw; }
.castframe::after{ width: calc(311/3000*100vw*1.8); height:calc(302/3000*100vw*1.8); bottom:-7vw; right:-8vw; }


/* TOP-PAGE */
/* main */
.cont-top-visual{ padding-bottom: .75em; }
.kv-container .oa{ width: calc(1506/3000*100vw*1.4); bottom:4.0vw;  }
#Foreground .opening .op-cont .anm-part{ width: calc(1400/3000*100vw*0.8); height: calc(1800/3000*100vw*0.8);  }

.vis-switch-container{ margin: 0; position: absolute; bottom:-12vw; left:0; right:0; pointer-events: none; z-index: 2; }
.vis-switch{ display: flex; flex-wrap: wrap; justify-content: center; }
.vis-switch > div{ width: calc(362/3000*100vw*1.5); height: calc(364/3000*100vw*1.5); margin: .75em; }

/* top-movie */
.cont-top-movie{ background-image: url("../images/movie-bg.png"); }
.cont-top-movie.cont-top-content > .inner{ padding:2em 0 2em 0; }
.cont-top-movie .movie-list{ width: calc(2084/3000*100vw*1.3); height: calc(1066/3000*100vw*1.3);  }
.cont-top-movie .movie-list .thm{ padding: .5em 2em; /*width: calc(1720/3000*100vw*1.3);*/  }
.cont-top-movie .movie-list .thm a::after{ height:4em; background-size: auto 1.4em; top:4.5em; }
.cont-top-movie .movie-list .thm a:hover::after{ opacity: 1; }

.top-movie-cursor{ position: absolute; width: 98vw; top:27vw; }
.top-movie-cursor ul li{  width:calc(96/3000*100vw*1.3); height: calc(171/3000*100vw*1.3);  }

.cont-top-movie .bits{ width: calc(445/3000*100vw); height: calc(855/3000*100vw); bottom: -19vw;  }

/* news twitter */
.cont-top-news-twitter{ background-image: url("../images/news-twitter-bg.png"); border-width:.8em; }
.cont-top-news-twitter > .inner{ padding: 2em 0 3em 0; justify-content: center;  }
.cont-top-news,
.cont-top-twitter{ width: 100%; }
.top-news-twitter-frame{ width: calc(1290/3000*100vw*1.9); height: calc(873/3000*100vw*1.9); margin: 0 auto; }
/* news */
.cont-top-news{ margin-bottom: 1.5em; }
.top-news-container{ padding: 1.0em 2em 1em 1em; }
.top-news-container dl{ margin-bottom: 1em; }
.top-news-container dl dt{ margin: 0 0 .25em 0; font-size: 1em; }
.top-news-container dl dd{ font-size: 1em; line-height: 1.2; }
/* twitter */
.twitter-timeline-container{ padding: 0 2.5em 0 0 ; }

.cont-top-news-twitter .bits{ width: calc(581/3000*100vw*1.2); height: calc(669/3000*100vw*1.2); bottom: -14.5vw; right: -.8em; }
.cont-top-news-twitter .bits2{ width: calc(531/3000*100vw*1.2); height: calc(481/3000*100vw*1.2); top: -1.5em; left: 18vw; }
.cont-top-news-twitter .bits3{ width: calc(433/3000*100vw*1.2); height: calc(258/3000*100vw*1.2); top: -.8em; left: 55vw; }
.cont-top-news-twitter .bits4{ width: calc(215/3000*100vw*1.2); height: calc(172/3000*100vw*1.2); bottom: 1vw; left: 38vw; }


/* top onair */
.cont-top-onair > .inner{ padding: 2em 0 3em 0; }
.onair-text1{ width: 100%; margin: 0 auto 2em auto; }
.onair-text2{ width: 85%; margin: 0 auto; }
.onair-text3{ width: 85%; margin: 0 auto; }
.onair-str-ttl1 > p{ padding: 0 .5em; font-size: 1.4em; }



.onair-list-block{ display: inline-block; color: #F9DD4A; padding: .5em .75em; background-color: #000; border:none; border-radius: 0; text-decoration: none; font-weight: 900; letter-spacing: .1em;  }

.onair-list{ margin: 0 auto ; max-width: inherit; }
.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-il{ max-width: 95%; }
.onair-list-il > a{ width: 48%; margin: 0.5%; font-size: .9em; }

/* top introduction */
.cont-top-intro{ background-image: url("../images/intro-bg.png") ; overflow: hidden; }
.cont-top-intro > .inner{ padding: 2em 0 5em 0; }
.intro-container{ font-size: 1.333em; letter-spacing: .05em; }
.intro-container .text{ margin-bottom: 0; }

.cont-top-intro .text-bg{ width: calc(1406/3000*100vw*2.8); height: calc(1640/3000*100vw*2.8); background-image: url("../images/intro-text-bg.png"); top: 3.5vw; left:-14vw; right: inherit; }


/* top story */
.cont-top-story{ background-image: url("../images/story-bg.webp") ; background-size: 150%; }
.cont-top-story > .inner{ padding: 2em 0 3em 0; }

.cont-story-navi{ padding-top: 3vw; }
.cont-story-navi:before{ height: 40vw; top:0; transform: skewY(-2.5deg); }
.story-navi{ width: 90%; padding: .25em;  }
.story-navi ul li{ width: 3.5em; height: 3.5em; margin: .4em;  }
.story-navi ul li a{ width: 3.5em; height: 3.5em; padding-top: .25em;  }
.story-navi ul li a span{ font-size: 2.0em; }
.story-navi ul li a span.lbl{ font-size: .6em; }

.cont-story-data{ width:90%; min-height: 140vw; }
.cont-story-data:before{ width: 100%; height: 98%; top:6vw; left:0; transform: rotate(.5deg); }

.story-data{ display: none; }
.story-data{ position: relative; pointer-events:none; text-align: center;  }
.story-data .episode-container{ position: relative; padding: 4em 3em 3em 3em ; color: #FFF; }

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

.ep-slider-dots{ margin-top: .5em; }
.ep-slider-dots li button:before { font-size: 1.0em;}

.story-data .ep-title-block{ display: block; font-size: 1em; margin-bottom: 2em; font-weight: normal; }
.story-data .ep-number{ font-size: 2em; padding-left: .5em; position: relative; display: inline-block; }
.story-data .ep-number > span{ font-size: .6em; top:.2em; left:0; }
.story-data .ep-title{ font-size: 1.6em; padding: .5em 0 0 0; display: block; }
#S10.story-data .ep-title,#S11.story-data .ep-title,#S12.story-data .ep-title{ padding: .5em 0 0 0; }
.story-data .ep-title > span{  }
.story-data .ep-text{  }
.story-data .ep-text p{ font-size: 1.066em; text-align: left;}

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


/* top staffcast */
.cont-top-staffcast{ background-image: url("../images/staffcast-bg.png"); background-size: 130%; }
.cont-top-staffcast > .inner{ padding: 3em 1em; }
.cont-top-staffcast .top-subtitle{ margin-bottom: 3em; }
.staffcast-container{ width: 90%; margin: 0 auto; }
.staffcast-label{ margin-bottom: 1.5em; }
.staffcast-label > span{ padding: .3em .3em; font-size: 1.133em; border-width:.133em;  }

.staffcast-list{ font-weight: 900; }
.staffcast-list .list-item{ margin-bottom: 1.5em; letter-spacing: .05em; }
.staffcast-list .list-item .pos{ width: 100%; font-size: 1.0em; padding-right: 0; text-align: center; }
.staffcast-list .list-item .name{ width: 100%; font-size: 1.333em; padding-top: .25em; text-align: center;}
.staffcast-list .list-item .exname{ width: 100%; margin-left: inherit; font-size: .8em; padding-top: .25em; text-align: center; }
.staffcast-list .list-item .cmt{ transform: translateY(-8%); }

.cont-top-staffcast .bits{ width: calc(598/3000*100vw*1.2); height: calc(667/3000*100vw*1.2); bottom: -10.5vw; right: .5em; }
.cont-top-staffcast .bits2{ width: calc(523/3000*100vw*1.2); height: calc(498/3000*100vw*1.2); top: 1.3em; left: 23vw; }
.cont-top-staffcast .bits3{ width: calc(672/3000*100vw*1.2); height: calc(923/3000*100vw*1.2); top: 15vw; right: 0; }


/* top character */
.cont-top-character{ background-image: url("../images/character-bg-sp.jpg"); background-size: cover; }
.cont-top-character > .inner{ padding: 2em 0 1em 0; }
.cont-top-character .top-subtitle{ margin-bottom: 3em; }
.character-container{ width: 100%;  }

#CharaCont{ position: relative; }
.cont-character-navi{ width: 100%; margin: 0 auto 1em auto; position: relative; z-index: 5; }
.character-navi ul li{ width: calc(358/3000*100vw * 1.75); height: calc(360/3000*100vw * 1.75); }
.character-navi ul li.sep-sp{ display: block; width: 100%; height: 1px; }

.cont-character-data{ min-height: 55vw; }
.character-data{ min-height: 55vw; display: none; overflow: hidden; }

.character-data .chr-img{ position: relative; width: 60%; margin: 0 auto 0 -14%;  }
.character-data .chr-prof{ position: absolute; z-index: 5; width: 55%; top:0; left:40%; padding-top: 2em; filter: drop-shadow(0 0 .25em #000); }
.character-data .prof-name{ width: 100%; padding: .8em 0; margin: 0 0 1em 0; position: relative;}
.character-data .prof-name .name{ display: block; margin-bottom: .5em; position: relative; z-index: 2; }
.character-data .prof-name .name p{ font-size: 1.633em; }
.character-data .prof-name .cv{ display: block; position: relative; z-index: 2; }
.character-data .prof-name .cv p{ font-size: 1.033em; }
.character-data .prof-text{ position: relative;  }
.character-data .prof-text .text{ font-size: 1.133em; }
.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);}
}


/* top music */
.cont-top-music{  background-size: 150%; background-position: right top; }
.cont-top-music > .inner{ padding: 3em 0; }
.cont-top-music .top-subtitle{ margin-bottom: 2em; }
.top-music-container{ width: 100%; margin: 0 auto; text-align: center; }

.music-list{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; }
.music-list .music-data{ width: 100%; padding: 0 2em 2em 2em; }

.music-data-label{ font-size: 1.5em;  }
.music-data-title{ font-size: 1.633em;  }
.music-data-name{ font-size: 1.5em; }
.music-data-cmt{ width: 1.5em;}
.music-data-photo{ padding: 3em 5em 1.5em 5em;  }
.music-data-photo .frame{  }
.music-data-photo .bg{ width: 28em; top:-2.5em; left:-1em;  }
.music-data-btn .ilink{ font-size: 1.0em; }

/* top books */
.cont-top-books{ background-image: url("../images/books-bg.png"); }
.cont-top-books > .inner{ padding: 3em 0; }
.cont-top-books .top-subtitle{ margin-bottom: 2em; }
.books-container{ width: 85%; margin: 0 auto; text-align: center; }

.books-list > div{ width: calc( (1 / 3 * (100% + 1em)) - 1em ); margin-bottom: 1em; margin-right: 1em; }
.books-list > div:nth-of-type(4n){ margin-right: 1em;}
.books-list > div:nth-of-type(3n){ margin-right: 0;}


/* top campaign */
.cont-top-campaign{ background-image: url("../images/campaign-bg.png"); }
.cont-top-campaign > .inner{ padding: 3em 0; }
.cont-top-campaign .top-subtitle{ margin-bottom: 4em; }
.campaign-banner{ width: calc(640/3000*100vw*3); }

.cont-top-campaign .bits{ width: calc(733/3000*100vw); height: calc(339/3000*100vw); bottom: 0; left: 0; }
.cont-top-campaign .bits2{ width: calc(440/3000*100vw); height: calc(531/3000*100vw); top: 13em; right: 5vw; }
.cont-top-campaign .upper{ width: 100%; height: calc(289/3000*100vw); background-image: url("../images/campaign-bg-upper.png"); }


/* SUB-PAGE */
.sub-page .cont-upper{ }
.sub-page .cont-middle{ min-height: calc(100vh - 43em);}

/* news */
#Page_News{ background: url("../images/sub-news-bg.png") repeat-y center top; background-size: 100%; }
.cont-sub-news{ margin: 0 auto; }
.cont-sub-news > .inner{ padding: 1.5em 0; }
.cont-sub-news .top-subtitle{ margin-bottom: 2em; }
.sub-news-container{ width: 90%; }

/* goods */
#Page_Goods{ background: url("../images/sub-news-bg.png") repeat-y center top; background-size: 100%; }
.cont-sub-goods{ margin: 0 auto; }
.cont-sub-goods > .inner{ padding: 1.5em 0; }
.cont-sub-goods .top-subtitle{ margin-bottom: 2em; }
.sub-goods-container{ width: 80%;  }

.goods-list .goods-data{ width: 100%; margin: 0.5%; padding: .5em; background-color: rgba(0,0,0,.5); position: relative; overflow: hidden; }
.goods-list .goods-data-img{ width: 100%; height: inherit; padding: 0 0 .5em 0; display: table-cell; text-align: center; vertical-align: middle; }
.goods-list .goods-data-name{ padding: .5em .5em; font-size: 1em; }
.goods-list .goods-data-detail{ font-size: 1em;}
.goods-list .goods-data-data{ font-size: 1em;  }



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

}