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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ color: #000; background:#fff url(../images/common/background.png)  repeat 0 0 ; background-size: calc(151/3000*100vw); } 

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

/* background */


/* header */
.part-header{ width: 14em; position: fixed; padding: 1em 0 0 1em; top:2em; right: 1em; /* visibility: hidden; opacity: 0; */ }
/* .init .part-header{ visibility: visible; opacity: 1; transition: opacity .5s ease 0s; } */
.cont-global-navi{ position: relative; }
.global-share{ width: 100%; margin: 0 0 2em 0; position: relative; order: 1; }
.global-share:before{ content:''; display: block; width: calc(258/3000*100vw); height: calc(9/3000*100vw); position: relative; margin: 0 0 .4em auto; background: url(../images/common/global-share-label.png) no-repeat center top; background-size: 100%; }
.global-share > ul{ display: flex; flex-wrap: nowrap; justify-content: flex-end; list-style-type: none; padding: 0; margin: 0 0 1em 0; }
.global-share > ul > li{ display: block; padding: 0 ; margin: 0 .95em 0 0; line-height: 1; }
.global-share > ul > li:last-child{ margin-right: 0; }
.global-share > ul > li a{ display: block; width: 2.2em; height: 2.2em; padding: .3em; text-align: center; color: #fff; line-height: 0; background-color: #000; }
.global-share > ul > li a:hover{ text-decoration: none; transform: scale(1.1,1.1); transform-origin: center center; }
.global-share > ul > li svg{ width: auto; height: 100%; }

.global-logo{ display: none; order: 2; }

.global-navi{ width: 100%; margin: 0 auto; position: relative; order: 3; }
.global-navi:before{ content:''; display: block; width: calc(258/3000*100vw); height: calc(9/3000*100vw); position: relative; margin: 0 0 .8em auto; background: url(../images/common/global-navi-label.png) no-repeat center top; background-size: 100%; }
.global-navi > ul{ display: block; list-style-type: none; padding: 0; margin: 0 0 .5em 0; text-align: right; }
.global-navi > ul > li{ display: block; padding: 0 ; margin: 0 0 1.3em 0; line-height: 1; }
.global-navi > ul > li a{ display: inline-block; color: #000;  }
.global-navi > ul > li a:hover{ text-decoration: none; transform: scale(1.1,1.1); transform-origin: center center; }
.global-navi > ul > li a > span{ font-size: 1.466em; letter-spacing: .1em; font-family: 'Josefin Sans', sans-serif;}
.global-navi > ul > li.cs a{ color: #666; pointer-events: none; }
.global-navi > ul > li.cs a > span{ color:#CCC; }

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

/* body */
.part-body{ margin: 0 auto; }
.cont-upper{ position: relative; }
.cont-middle{ position: relative; }
.cont-w800{ width: calc(1600/30*1em); }
.cont-w1000{ width: calc(2000/30*1em); }
.cont-w1200{ width: calc(2400/30*1em); }
.cont-w1050{ width: calc(2100/30*1em); }

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

.top-conttitle{ font-size: 1em; margin: 0 auto 2em auto; text-align: center; }
.top-conttitle > div{ display: inline-block; background-color: #000; color: #FFF; padding: .3em 2em; line-height: 1; letter-spacing: .4em; transform-origin: center center; transform: skew(-27.15deg,0); }
.top-conttitle > div span{ font-size: 2.2em; font-family: 'Makinas-4-Square', sans-serif; }

.sub-conttitle{ font-size: 1em; margin: 0 auto 2em auto; text-align: center; }
.sub-conttitle > div{ display: inline-block; background-color: #000; color: #FFF; padding: .3em 2em; line-height: 1; letter-spacing: .4em; transform-origin: center center; transform: skew(-27.15deg,0); }
.sub-conttitle > div span{ font-size: 2.2em; font-family: 'Makinas-4-Square', sans-serif; }

.sub-logo{ width: 14vw; position: fixed; top:2em; left:1em; z-index: 10; }

/* footer */
.part-footer{ background:#00a1e9; }
.cont-global-footer{ margin: 0 auto; padding:0; position: relative; text-align: center; }
.footer-pagetop{ width: calc( 196/30 * 1em ); height: calc( 190/30 * 1em ); position: fixed;  bottom:1.5em;  right:1em; z-index: 10; overflow: hidden; }
.footer-pagetop a{ display: block; position: relative; width: 100%; min-height: 100%; background:url(../images/footer-pagetop.png) no-repeat center center; background-size: contain; }
.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;}
.cont-footer{ padding: 2em; }
.footer-copyrihgt p{ color: #FFF; font-size: .8em; margin-bottom: 0; }

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

.bg-sk-l{ position: absolute; transform-origin: center top; transform: skew(-27.15deg,0); line-height: 0; }
.bg-sk-r{ position: absolute; transform-origin: center top; transform: skew(27.15deg,0); line-height: 0; }
.bg-hlz{ position: absolute; line-height: 0; }

.bg-sk-l.inview-act{ transform-origin: left top; }
.bg-sk-r.inview-act{ transform-origin: right top; }
.bg-hlz.inview-act{ transform-origin: left top; }

.bg-ylw{ background-color:#ffff00; }
.bg-grn{ background-color:#26ff00; }
.bg-ble{ background-color:#00a1e9; }
.bg-pnk{ background-color:#ff2c6d; }
.bg-wht{ background-color:#fff; }

.frame1-il{ color: #fff; font-weight: bold; display: inline-block; background-color: #ff8200; border-radius: 1.5em; padding: .5em 1em; }

.frame1-ol-il{ color: #ff8200; font-weight: bold; display: inline-block; border: #ff8200 solid .1em; border-radius: 1.5em; padding: .5em 1em; }

.sep-ic{ width: calc( 95/30*1em ); height: calc( 102/30*1em ); margin: 0 auto 1em auto; display: block; background: url(../images/common-sep-ic.png) no-repeat center center; background-size: contain; }

.cont-entries{ margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 3em; background-color: transparent; border-radius: 0; box-sizing: border-box; margin-bottom: 3em; }
.content-entry:last-child{margin-bottom: 0;}
.content-entry .entry-head{  color: #00a1e9; border-bottom: #00a1e9 solid calc(6/30*1em); margin-bottom: .9em; }
.content-entry .entry-body{ font-size: 1.1em; line-height: 1.5; }

.content-entry .entry-date{ font-size: .8em; line-height: 1; display: inline-block; position: relative; margin: 0 auto .5em auto; }
.content-entry .entry-date::before{ content:"≫ "; display: block; font-size: 1.4em; position: absolute; top:0; left: 0;}
.content-entry .entry-date > span{ display: inline-block; font-weight: bold; font-size: 1.333em; padding: 0 1.2em; line-height: 1; position: relative; }
.content-entry .entry-title{ font-size: 1em;  margin-bottom: .5em; }
.content-entry .entry-title > span{ font-size: 1.866em; font-weight: normal; line-height: 1.5; }

.modal-data{ display: none; }
.cont-modal{ width: 100%; max-width: 960px; margin: 0 auto; }
.frame-modal{ background-color: rgba(255,255,255,1); border:#00a1e9 solid calc(6/30*1em); padding: 3em; }

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

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

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

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

/* TOP-PAGE */
/* main */
.cont-top-visual{ position: relative;  }
.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 .bg{ width: 100%; top:0;position: relative; }
.kv-container .vis{ }
.kv-container .oa{ width: calc( 965/3000*100vw ); top:29.2vw; left: 0vw;  }
.kv-container .logo{ width: calc( 1005/3000*100% ); top:6vw; left: 1vw;  }
.kv-container .bg-line{ width: 100%; min-height: 100%; overflow: hidden; }
.kv-container .bg-line .line{ position: absolute; min-height: 100%; }
.kv-container .bg-line .line.line-a{ width: 5vw; top:0; left: 102.5vw; }
.kv-container .bg-line .line.line-b{ width: 35vw; top:0; left: 62vw; }
.kv-container .bg-line .line.line-c{ width: 10vw; top:0; left: 43.5vw; }
.kv-container .bg-line .line.line-d{ width: 5vw; top:0; left: 33.8vw; }
.kv-container .bg-line .line.line-e{ width: 5vw; top:0; left: 23.8vw; }

.kv-container .loading{ width: calc( 849/3000*100% ); top:27vw; left: 53vw; animation:3s linear infinite loading-anm; }
@keyframes loading-anm{ 0%{ transform:rotateY(0);} 100%{ transform:rotateY(360deg);}}

/* animetion init */
.kv-container .vis,
.kv-container .oa{ opacity: 0; }
.kv-container .bg-line .line{ min-height: 0px;}

.init .kv-container .loading{ opacity: 0; transition: all .5s ease .0s;  }
.init .kv-container .vis{ transform: scale(1.3,1.3) ; transform-origin: center bottom; }
.init .kv-container .oa{ left:-5vw; }
.init .kv-container .bg-line .line.line-a{ min-height: 100%; transition: all 1.0s ease 0s; }
.init .kv-container .bg-line .line.line-b{ min-height: 100%; transition: all 1.0s ease 0s; }
.init .kv-container .bg-line .line.line-c{ min-height: 100%; transition: all 1.0s ease .2s; }
.init .kv-container .bg-line .line.line-d{ min-height: 100%; transition: all 1.0s ease .3s; }
.init .kv-container .bg-line .line.line-e{ min-height: 100%; transition: all 1.0s ease .5s; }

.s1 .kv-container .vis{ transform: scale(1,1); opacity: 1; transition: all .5s ease .0s; }
.s1 .kv-container .oa{ left:0; opacity: 1; transition: all .5s ease .5s; }


/* news */
.cont-top-news{ max-width: 37em; position: absolute; top:-23vw; left: 2vw; margin-right: 1.3em; }
.cont-top-news:before{ content:''; display: block; width: calc(258/3000*100vw); height: calc(9/3000*100vw); position: relative; margin: 0 auto .4em 0; background: url(../images/top-news-label.png) no-repeat center top; background-size: 100%; }
.cont-top-news > .inner{ margin: 0 auto; padding:0; }
.news-container{ padding: 0; }
.news-container dl{ font-size: 1.0em; margin-bottom: 1.5em; }
.news-container dl:last-child{ margin: 0;}
.news-container dl dt{ display: block; margin: 0 0 .1em 0; }
.news-container dl dt > span{ font-weight: normal; font-size: 0.8em; }
.news-container dl dd{ display: block; font-size: 1.0em; line-height: 1.4;  }
.news-container dl dd a,
.news-container dl dd a:visited{ text-decoration: none; color: inherit; }
.news-container dl dd a:hover{ text-decoration: underline; color: inherit; }


/* movie */
.cont-top-movie{ overflow: hidden; }
.cont-top-movie > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }
.movie-container{max-width: 80em; margin: 0 auto; }

.movie-p-container{ padding:  0; margin: 0 auto; position: relative; }
.movie-p-container .video-embed{  }
.movie-p-navi{ display: flex; flex-wrap: wrap; justify-content: center; }
.movie-p-navi .th{ width: 33.3%; padding: 1em .5em; }
.movie-p-navi .th a:hover img{ transform: scale(1.1,1.1); }
.movie-p-navi .th a img{  }

.movie-bg-a.inview-act{ width: 30vw; min-height: 0; top:0; left: 0; }
.movie-bg-b.inview-act{ width: 30vw; min-height: 0; top:0; left: 80vw; }
.movie-bg-c.inview-act{ width: 5vw; min-height: 0; top:0; left: 70vw; }
.movie-bg-d.inview-act{ width: 1px; min-height: 12vw; top:0; left: 0; }

.movie-bg-a.inview-act-start{ min-height: 37vw;}
.movie-bg-b.inview-act-start{ min-height: 44vw;}
.movie-bg-c.inview-act-start{ min-height: 44vw;}
.movie-bg-d.inview-act-start{ width: 100%;}

/* pr */
.cont-top-pr{ overflow: hidden; }
.cont-top-pr > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }
.pr-container{max-width: 40em; margin: 0 auto; padding-top: 4em; }
.pr-bg-a.inview-act{ width: 1px; min-height: 3vw; top:0; left: 0; }
.pr-bg-a.inview-act-start{ width: 100%;}

/* story */
.cont-top-story{ overflow: hidden; }
.cont-top-story .inner{ padding: 0; }
.cont-top-story .top-conttitle{ position: absolute; top:2em; left:0; right:0; margin: 0 auto; z-index: 5; }
.cont-block-story{ position: relative; }
.cont-story-navi{ position: absolute; top:6em; left:0; right:0; margin: 0 auto; z-index: 5; }
.story-navi{ margin: 0 auto; }
.story-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; position: relative; }
.story-navi ul li{ width: 2.5em; display: block; margin: 0; padding: .1em .2em; position: relative;}
.story-navi ul li.n0{ width: 15em; }
.story-navi ul li.n11,
.story-navi ul li.n12{ width: 4.0em; }
.story-navi ul li.spc-sp{ display: none; }
.story-navi ul li a{ display: block; width: 100%; background-color: #fff; color: #000; text-align: center; transform-origin: center center; transform: skew(-27.15deg,0);position: relative; }
.story-navi ul li a span{ font-size: 1.5em; font-family: 'Makinas-4-Square', sans-serif; font-weight: 900;}
.story-navi ul li a:hover{ background-color: #ffff00; color: #000; text-decoration: none; }
.story-navi ul li.crt a{ background-color: #000; color: #fff; pointer-events: none; }
.story-navi ul li.cs a{ background-color: #fff; color: #999; pointer-events: none; }

.cont-story-data{ width:100%; min-height: 45vw; position: relative; }
.story-data{ position: relative; display: none; pointer-events:none; text-align: center; }
.story-data .story-block{ padding: 12em 0 2em 0; background-color: #ffff00; overflow: hidden; position: relative; overflow: hidden; }

.story-bg{ position: absolute; width: 100%; min-height: 100%; top:0; background-repeat: no-repeat; background-position: center top; background-size: cover; filter:blur(1px); z-index: 1; } 
.story-bg.inview-act{ transform: scale(1.5,1.5); opacity: .9; transform-origin: center center;}
.story-bg.inview-act-start{ transform: scale(1,1); opacity: .3; transform-origin: center center; transition-delay: 1.0s; }

.story-data .ep-title-label{ font-size: 1em; position: relative; z-index: 2; }
.story-data .ep-title-label span{ font-size: 1.8em;font-weight: 900; letter-spacing: .3em; }
.story-data .ep-title{ font-size: 1em; margin-bottom: 1.5em; filter: drop-shadow(.2em .2em 0 #fff); position: relative; z-index: 2; }
.story-data .ep-title span{ font-size: 3.0em;font-weight: 900; font-family: YakuHanMPs_Noto, "Noto Serif JP", serif; letter-spacing: .1em; }
.story-data .ep-slider-sceneImage{ max-width: 64%;  margin:0 auto 1.5em auto; position: relative; z-index: 2; }
.story-data .ep-slider-thumb{ width: 100%; margin: 0 auto 1.5em auto; display: flex; justify-content: center; position: relative; z-index: 2; }
.story-data .ep-slider-thumb > div{ width: 8em; padding: 0 .5em; transform-origin: center center; transform: skew(-27.15deg,0); pointer-events: all; }
.story-data .ep-slider-thumb > div:hover{ transform: scale(1.2,1.2); cursor: pointer; }
.story-data .ep-text{ margin-bottom: 1em; position: relative; z-index: 2; }
.story-data .ep-text p{ font-size: 1.333em; line-height: 1.8; letter-spacing: .1em; background-color: rgba(255,255,255,1); display: inline; filter: drop-shadow(-.2em 0 0 #fff); }
.story-data .ep-staff{ margin-bottom: 4em; position: relative; z-index: 2; }
.story-data .ep-staff p{ font-size: 1em; line-height: 1.8; letter-spacing: .1em; background-color: rgba(255,255,255,1);display: inline; filter: drop-shadow(-.2em 0 0 #fff); }
.story-data .ep-trailer{ max-width: 50%; margin: 0 auto 2em auto; pointer-events: all; position: relative; z-index: 2; }
.story-data.crt{ display: block; animation: fadeIn .5s 0s ease-out both;  }

/* introduction */
.story-data .intro-block{ padding: 12em 0 2em 0; background-color:#ffff00;  overflow: hidden; }
.story-data .intro-block .intro-title{ font-size: 1em; margin: 0 auto 2em auto; text-align: center; }
.story-data .intro-block .intro-title > div{ display: inline-block; color: #000; line-height: 1; letter-spacing: .4em; font-weight: bold; font-size: 1.4em; }
.story-data .intro-block .text{ position: relative; text-align: center; }
.story-data .intro-block .text > p{ font-size:1.333em; line-height: 2; letter-spacing: .2em; text-align: center; }

.intro-bg{ position: absolute; width: calc(1378/3000*100vw); height: calc(1015/3000*100vw); top:13vw; background: url(../images/top-intro-mark.png) no-repeat center top; background-size: 100%; } 
.intro-bg-a.inview-act{ left:28vw; }
.intro-bg-b.inview-act{ right:28vw; }
.intro-bg-a.inview-act-start{ left:-20vw; }
.intro-bg-b.inview-act-start{ right:-20vw; }




/* staffcast */
.cont-top-staffcast{ overflow: hidden; }
.cont-top-staffcast .top-conttitle > div{  background-color: #ff2c6d; color: #fff; }
.cont-top-staffcast > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }

.staffcast-container{ max-width: 70em; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-container > div{ width: calc((100% - 1.3em) / 2); }
.staffcast-container .l-col{ margin-right: 1.3em; text-align: center; }
.staffcast-container .r-col{ text-align: center; } 

.staffcast-list-text{ color:#ff2c6d; font-size: 1.2em; line-height: 1.7; font-weight: bold; }

.staffcast-bg-a.inview-act{ width: 5vw; min-height: 0; top:0; left: 90vw; }
.staffcast-bg-b.inview-act{ width: 5vw; min-height: 0; top:0; left: 99vw; }
.staffcast-bg-a.inview-act-start{ min-height: 46vw; }
.staffcast-bg-b.inview-act-start{ min-height: 46vw;  }


/* character */
.cont-top-character{ overflow: hidden; }
.cont-top-character .top-conttitle > div{  background-color: #fff; color: #00a1e9; }
.character-bg-a{ position: absolute; width: 120vw; height: 43vw; top:0; right:-5vw; background-color: #00a1e9; transform: skew(-27.15deg,0); } 
.character-bg-b{ position: absolute; width: 69vw; height: 33vw; top:6.8em; right:calc(-5vw + 7.8em); background-color: #fff; transform: skew(-27.15deg,0); } 
.character-bg-a.inview-act{ right:-120vw; }
.character-bg-b.inview-act{ right:calc(60vw + 7.8em); }
.character-bg-a.inview-act-start{ right:-5vw; }
.character-bg-b.inview-act-start{ right:calc(-5vw + 7.8em) }
.cont-top-character > .inner{ margin: 0 auto; padding-left: 0; padding-right: 0; }
.character-container{  position: relative; min-height: 37vw; }

.cont-character-navi{ width: 27.5vw; position: absolute; top:0; left: 0; z-index: 20; pointer-events: none; }
.character-navi ul{ display: block; margin: 0; padding: 0; position: relative; list-style-type: none; transform: skew(-27.15deg,0); transform-origin: right top; overflow: hidden; }
.character-navi ul > li{ display: block; width: 100%; margin: 0 0 .8em 0; padding: 0; position: relative; transform: skew(27.15deg,0); transform-origin: right top;}
.character-navi ul > li a{ display: block; width: 100%; padding: 1.2em 0 ; text-align: right; position: relative; pointer-events: auto; font-size: .8em; }
.character-navi ul > li a:before{ content: ""; display: block; width: 100%; min-height: 100%; background-color: #FFF; position: absolute; top:0; left: 0; background: #FFF url(../../assets/top/character/n1.png) no-repeat right center; background-size: 12em; }
.character-navi ul > li:nth-of-type(1) a:before{ background-image: url(../../assets/top/character/n1.png);}
.character-navi ul > li:nth-of-type(2) a:before{ background-image: url(../../assets/top/character/n2.png);}
.character-navi ul > li:nth-of-type(3) a:before{ background-image: url(../../assets/top/character/n3.png);}
.character-navi ul > li:nth-of-type(4) a:before{ background-image: url(../../assets/top/character/n4.png);}
.character-navi ul > li:nth-of-type(5) a:before{ background-image: url(../../assets/top/character/n5.png);}
.character-navi ul > li:nth-of-type(6) a:before{ background-image: url(../../assets/top/character/n6.png);}
.character-navi ul > li:nth-of-type(7) a:before{ background-image: url(../../assets/top/character/n7.png);}
.character-navi ul > li:nth-of-type(8) a:before{ background-image: url(../../assets/top/character/n8.png?0326);}
.character-navi ul > li a span{ margin: 0 10em 0 auto; display: block; line-height: 1; color:#00a1e9; font-family: 'Noto Serif JP', serif; font-weight: bold; position: relative;  z-index: 2; letter-spacing: .1em; font-size: 1.2em; }
.character-navi ul > li a:hover{ text-decoration: none; }
.character-navi ul > li a:hover:before{ background-color: #ffff00; }
.character-navi ul > li.crt{ }
.character-navi ul > li.crt a span{  }

.cont-character-data{ width: 57vw; min-height:33vw; position: absolute; top:0; left: 28vw; }
.character-data{ min-height:33vw; position: relative; display: none; }
.character-data:before{ content:""; position: absolute; width: .1vw; height: 5vw; top:1.5em; left:0; background-color: #ffff00; transform: skew(-27.15deg,0); transition: all 1.0s ease .5s;}
.character-data:after{ content:""; position: absolute; width: .1vw; height: 7vw; bottom:1.5em; left:-12em; background-color: #f3f3f3; transform: skew(-27.15deg,0); transition: width 1.0s ease .5s;}
.character-data.crt:before{ width: 65vw; }
.character-data.crt:after{ width: 65vw; }

.character-data .chr-img{ width: 20vw; position: absolute; top:-3vw; right: -3vw;  z-index:2; }
.character-data .chr-face{ width: 33vw; position: absolute; bottom:1vw; left:5vw; z-index:2; }

.character-data .chr-prof{ width: 45vw; min-height:5vw; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 3em 0; z-index:3; }
.character-data .chr-prof .name{ margin: 0 1.0em 0 0; position: relative; }
.character-data .chr-prof .name > span{ font-size: 2.266em; font-weight: 900; font-family: YakuHanMPs_Noto, "Noto Serif JP", serif; letter-spacing: .2em; line-height: 1; text-align: center;}
.character-data .chr-prof .cv{ color: #ffff00; background-color: #000; font-size: .9em; display: inline-block; margin: 0; position: relative; padding: .3em .4em; line-height: 1; font-weight: bold; }
.character-data .chr-prof .cv > span{ font-size: 1.333em; letter-spacing: .1em; }
.character-data .profile{ width: 45vw; margin-bottom: 0; font-size: 1.2em; letter-spacing: .1em; line-height: 2.0; position: relative; z-index:3; text-align: center; font-weight: bold; }

.character-data.crt{ display: block; }
.character-data.crt .chr-img{ animation: fadeIn .8s .2s ease-out both; }
.character-data.crt .chr-face{ animation: fadeIn .8s .5s ease-out both; }

/* onair */
.cont-top-onair{ overflow: hidden; }
.cont-top-onair .top-conttitle > div{  background-color: #26ff00; color: #000; }
.cont-top-onair > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }
.onair-container{ max-width: 45em; margin: 0 auto; text-align: center; letter-spacing: .1em; }

.onair-text-brd{ font-size: 2.4em; letter-spacing: .1em;filter: drop-shadow(.05em  .05em 0 #ff3ba3);  }
.onair-list{ margin: 0 auto .5em auto;  position: relative; }
.onair-list{ display: flex; flex-wrap: wrap; justify-content: center; text-align: left; padding: .5em; /*background-color: rgba(255,255,255,1);*/ }
.onair-list:before{ content:""; position: absolute; top:0; width: 100%; min-height: 100%;background-color: rgba(255,255,255,1);transform-origin: center top; transform: skew(-27.15deg,0); }

.onair-list > div{ position: relative; }
.onair-list.first{  }
.onair-list.atxrtp{ margin-left: 11em; margin-top: -.5em; }
.onair-list.atxrtp:before{transform-origin: center bottom; transform: skew(27.15deg,0); }
.onair-list .col-a{ width: 25%; }
.onair-list .col-b{ width: 75%; }
.onair-list .col-c{ width: 100%; }
.onair-list .col-d{ width: 75%; margin-left: 25%; }
.onair-list .name{ font-size: 1.2em; font-weight: bold; margin-bottom: 0; letter-spacing: .2em;}
.onair-list .schd{ font-size: 1.2em; margin-bottom: 0; letter-spacing: .2em; }
.onair-list .time{ font-size: 1.2em; margin-bottom: 0; letter-spacing: .2em; }
.onair-list .extr{ font-size: .9em; margin: .3em 0 0.1em 0; letter-spacing: .2em;}
a.onair-anchor{ text-decoration: none; color: #000; pointer-events: all; }
a.onair-anchor:hover{ color: #000; text-decoration: none; }
a.onair-anchor:hover .onair-list:before{ background-color: #ffff00; }

.onair-list-il-container{ max-width: 45em; margin: 0 auto; }
.onair-list-ildate{ text-align: center; font-weight: bold; font-size: .888em; color: #fff; letter-spacing: .15em; line-height: 1; padding: .5em 0; margin: 0 auto 1.5em auto; border: rgba(120,120,120,.3) solid 2px; }
.onair-list-ilttl{ text-align: center; font-weight: bold; font-size: .888em; color: #fff; letter-spacing: .15em; line-height: 1; padding: .5em 0; margin: 0 auto .5em auto; background-color: rgba(120,120,120,.3) ; }
.onair-list-il{ margin: 0 auto; text-align: center; }
.onair-list-il > a{ display: inline-block; background-color: rgba(120,120,120,.3); padding: .7em; margin: 0 .25em .5em .25em; color: #fff; text-decoration: none; font-weight: 600; }
.onair-list-il > a:hover{ background-color: #ba73c3; color: #FFF;}

.onair-bg-a.inview-act{ width: 100vw; min-height: 0; top:5.5vw; left: 26vw; }
.onair-bg-a.inview-act-start{ min-height: 34.5vw; }


/* bddvd */
.cont-top-bddvd{ overflow: hidden; background-color:#ff2c6d;  }
.cont-top-bddvd .top-conttitle > div{  background-color: #fff; color: #ff2c6d; }
.bddvd-bg-a{ position: absolute; width: 95vw; height: 30vw; top:12vw; right:0vw;  } 
.bddvd-bg-b{ position: absolute; width: 100vw; height: 80vw; top:35vw; left:-10vw ;  } 
.bddvd-bg-c{ position: absolute; width: 110vw; height: 3em; bottom:0; left:-5vw ;  } 
.bddvd-bg-a.inview-act{ right:-90vw; }
.bddvd-bg-b.inview-act{ left:15vw; }
.bddvd-bg-a.inview-act-start{ right:0vw; }
.bddvd-bg-b.inview-act-start{ left:-12vw }

.cont-top-bddvd > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }

.bddvd-container{ margin: 0 auto; }

.cont-bddvd-navi{ position: relative; margin: 0 auto 1em auto; z-index: 2; }
.bddvd-navi{ margin: 0 auto; }
.bddvd-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; position: relative; }
.bddvd-navi ul li{  display: block; margin: 0; padding: .1em .2em; position: relative;}
.bddvd-navi ul li.spc-sp{ display: none; }
.bddvd-navi ul li a{ display: block; width: 100%; padding: 0 .5em; background-color: #fff; color: #000; text-align: center; transform-origin: center center; transform: skew(-27.15deg,0);position: relative; }
.bddvd-navi ul li a span{ font-size: 1.5em; font-family: 'Makinas-4-Square', sans-serif; font-weight: 900;}
.bddvd-navi ul li a:hover{ background-color: #ffff00; color: #000; text-decoration: none; }
.bddvd-navi ul li.crt a{ background-color: #000; color: #fff; pointer-events: none; }
.bddvd-navi ul li.cs a{ background-color: #fff; color: #999; pointer-events: none; }

.bddvd-data{ display: none;}
.bddvd-data { max-width: 70em; margin: 0 auto; color: #000; padding: .3em;}
.bddvd-data > .block{ padding: 1em 0; margin-bottom: .3em; }
.bddvd-data > .block.block-btm{ margin-bottom: 0; }

.bddvd-data .bdv-prof{ }
.bddvd-data .bdv-prof .title{ font-size: 2.266em; font-weight: 900; margin-bottom: 0; text-align: center; }
.bddvd-data .bdv-prof .sale{ font-size: 2em; color: #ff2c6d; font-weight: 900; text-align: center;}
.bddvd-data .bdv-prof .data{ font-size: 1.066em; text-align: center;}
.bddvd-data .tk{line-height: 1.2; padding: .2em; margin-bottom: .5em; background-color: rgba(0,0,0,.05); font-weight: 900;}
.bddvd-data.crt{ display: block; animation: fadeIn 1.0s 0s ease-out both; }

.bnf-list{ display: flex; flex-wrap: wrap; margin-bottom: 1em; align-items: flex-start; }
.bnf-list > div{ border: #fff solid 2px; background-color: #fff; }
.bnf-list > .item-x1{ width: 100%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x2{ width: 50%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x3{ width: 33.33%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x3x2{ width: 66.66%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x4{ width: 25%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x1.x1-dbl{ width: 50%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list .item-col{ width: 100%; }
.bnf-list .item-col-x2{ width: calc((100% - (0.5em * 1)) / 2); margin-right: .5em; }
.bnf-list .item-col-x2:nth-of-type(2n){ margin-right: 0;}
.bnf-list .item-col-x2:last-child{ margin: 0; }
.bnf-list .item-col-x3{ width: calc((100% - (0.5em * 2)) / 3); margin-right: .5em; }
.bnf-list .item-col-x3:nth-of-type(3n){ margin-right: 0;}
.bnf-list .item-col-x3:last-child{ margin: 0; }
.bnf-list .item-col-x4{ width: calc((100% - (0.5em * 3)) / 4); margin-right: .5em; }
.bnf-list .item-col-x4:nth-of-type(4n){ margin-right: 0;}
.bnf-list .item-col-x4:last-child{ margin: 0; }

.bnf-list .shop{ width: 100%; font-size: 0.777em; color: #ff2c6d; padding: 0; margin-bottom: .5em; background-color: rgba(0,0,0,.05); }
.bnf-list .shop::before{ content:"● "; }
.bnf-list .thumb{ padding:1em 1em; text-align: center; margin: .5em auto ; }
.bnf-list .thumb{ display: flex; align-items: center; justify-content: center; vertical-align: middle; }
.bnf-list .thumb .inner{ height: 12em; }
.bnf-list .thumb .inner img.vt{ max-width: auto; height: 100%; width: auto\9;}
.bnf-list .thumb-np{ display: none; }
.bnf-list .data{ width: 100%; }
.bnf-list .excond{ font-size: 0.666em; color: #ff2c6d; margin-bottom: .3em; }
.bnf-list .name{ font-size: .8em; letter-spacing: -0.05em; margin-bottom: .3em; font-weight: 700; }
.bnf-list .cond{ font-size: 0.777em; margin-bottom: .3em; border:#ff2c6d solid 1px; display: inline-block; padding: .1em .2em; color: #ff2c6d; }
.bnf-list .start{ font-size: 0.666em;  }
.bnf-list .shop-link{ width: 100%; font-size: 0.666em; padding: .5em 0 0 0; text-align: left;  }

/* music */
.cont-top-music{ overflow: hidden; }
.cont-top-music .top-conttitle > div{  background-color: #ff2c6d; color: #fff; }
.cont-top-music > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }

.music-container{ max-width: 70em; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; }
.music-container > div{ width: calc((100% - 1.3em) / 2); }
.music-container .l-col{ margin-right: 1.3em; text-align: center; }
.music-container .r-col{ text-align: center; } 
.music-container .b-col{ text-align: center; } 

.music-list-text{ color:#ff2c6d; font-size: 1.2em; line-height: 1.7; font-weight: bold; }

.music-bg-a.inview-act{ width: 5vw; min-height: 0; top:0; left: 90vw; }
.music-bg-b.inview-act{ width: 5vw; min-height: 0; top:0; left: 99vw; }
.music-bg-a.inview-act-start{ min-height: 40vw; }
.music-bg-b.inview-act-start{ min-height: 40vw;  }


/* books */
.cont-top-books{ overflow: hidden; }
.cont-top-books .top-conttitle > div{  background-color: #000; color: #ffff00; }
.cont-top-books > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }
.books-container{ max-width: 70em; margin: 0 auto; text-align: center; letter-spacing: .1em; }


.books-list{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 1em auto; }
.books-list > div{ width: calc( 1 / 6 * 100% - 5 / 6 * 1em ); margin-bottom: 2em; margin-right: 1em; }
.books-list > div:nth-of-type(6n){ margin-right: 0;}
.books-list > div p{ font-size: .666em; margin-bottom: 0; letter-spacing: .05em; }
.books-list > div .thm{ margin-bottom: .25em; }

.books-att{ margin-bottom: 1em; text-align: center; }
.books-att > span{ display: inline-block; padding: .2em .4em; background-color: #ff2c6d; color: #FFF; font-weight: bold; }

.books-link-novels{ margin-bottom: 1em; text-align: center; }
.books-link-novels a{ display: inline-block; padding: 0.6em 1.6em 0.6em 1.6em ; border:#000 solid .2em ; text-decoration: none; font-size: 1em; font-weight: 600; line-height: 1; }
.books-link-novels a:before{ content:"> "; }
.books-link-novels a,
.books-link-novels a:visited,
.books-link-novels a:active{ color: #FFF; background-color: #000; }
.books-link-novels a:hover{ text-decoration: none; background-color: #ffff00; color: #000; }

.books-bg-a.inview-act{ width: 5vw; min-height: 0; top:10vw; left: -5vw; }
.books-bg-b.inview-act{ width: 5vw; min-height: 0; top:30vw; left: -5vw; }
.books-bg-c.inview-act{ width: 100vw; min-height: 0; top:0; left: 15vw; }
.books-bg-d.inview-act{ width: 100vw; min-height: 0; top:50vw; left: -15vw; }

.books-bg-a.inview-act-start{ min-height: 100vw; }
.books-bg-b.inview-act-start{ min-height: 100vw;  }
.books-bg-c.inview-act-start{ min-height: 28vw; }
.books-bg-d.inview-act-start{ min-height: 26vw; }


/* twitter */
.cont-top-twitter{ background-color: #00a1e9; }
.twitter-widget-container{ max-width: 30em; height: 100%; margin: 0 auto; position: relative; overflow: hidden; }
.twitter-widget-container iframe{ min-height: 100%; }



/* SUB-PAGE */
/* news */
.cont-sub-news{ overflow: hidden; }
.cont-sub-news .sub-conttitle > div{  background-color: #00a1e9; color: #fff; }
.cont-sub-news > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }
.sub-news-container{ max-width: 70em; margin: 0 auto; letter-spacing: .1em; }


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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* 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) {
body{ background:#fff url(../images/common/background.png)  repeat 0 0 ; background-size: calc(76/1000*100vw); } 
/* header */
.part-header{ width: 100%; position: fixed; padding: 0 2vw 0 0; top:0; right: 0; background: transparent url(none); }
.cont-global-navi{ display: none; flex-wrap: wrap; position: relative; }
.init.cont-global-navi{ display: none; flex-wrap: wrap; }
.global-share{ width: 100%; margin: 0 0 2vw 0; order: 2; }
.global-share:before{ width: calc(258/3000*100vw*4); height: calc(9/3000*100vw*4); margin: 0 0 1.4em auto; }
.global-share > ul{ margin: 0 0 1em 0; }
.global-share > ul > li{ margin: 0 1.15em 0 0; }
.global-share > ul > li:last-child{ margin-right: 0; }
.global-share > ul > li a{ width: 3.3em; height: 3.3em; padding: .3em; }
.global-share > ul > li a:hover{ transform: none; }

.global-logo{ display: block; width: 100%; margin: 1vw 0 2vw 0; position: relative; order: 3; }
.global-logo:before{ content:''; display: block; width: calc(258/3000*100vw*4); height: calc(9/3000*100vw*4); position: relative; margin: 0 0 1.4em auto; background: url(../images/common/global-kisaragi-label.png) no-repeat center top; background-size: 100%; }
.global-logo > div{ width: 10em; margin: 0 0 0 auto; }

.global-navi{ width: 100%; margin: 18vw 0 2vw 0; position: relative; order: 1; }
.global-navi:before{ width: calc(258/3000*100vw*4); height: calc(9/3000*100vw*4); margin: 0 0 1.4em auto; }
.global-navi > ul{ margin: 0 0 .5em 0; }
.global-navi > ul > li{ display: inline-block; margin:0 0 2em 2em; }
.global-navi > ul > li a:hover{ transform: none; }
.global-navi > ul > li a > span{ font-size: 2em; letter-spacing: .1em; }

.cont-sp-btn{ display: block; color:#482f21; width: 6vw; position: absolute; top:3vw; right: 2vw; z-index: 2; pointer-events: all; }
.cont-sp-btn a{ display: block; line-height: 0; }
.cont-sp-btn svg{ fill: currentColor; }
.cont-sp-btn .sp-navi-open{ display: block; }
.cont-sp-btn .sp-navi-close{ display: none; }

.part-header.on{ width: 100%; min-height: 100%; background: rgba(255,255,255,.95); transition: all .5s ease .0s; }
.part-header.on .cont-global-navi{ display: flex; }
.init .part-header.on .cont-global-navi{ display: flex; }
.part-header.on .cont-sp-btn .sp-navi-open{ display: none; }
.part-header.on .cont-sp-btn .sp-navi-close{ display: block; }


/* body */
.part-body{ margin: 0 auto; }
.cont-upper{ position: relative; }
.cont-middle{ position: relative; }
.cont-w800{ width: inherit; }
.cont-w1000{ width: inherit; }
.cont-w1200{ width: inherit; }
.cont-w1050{ width: inherit; }

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

.top-subtitle{ width: calc(940/30*1em*0.7); margin: 0 auto 2em auto; }
.sub-subtitle{ width: calc(940/30*1em*0.7); margin: 0 auto 2em auto; }

.sub-logo{ width: 60vw; position: relative; top:inherit; left:inherit; margin: 0 auto; padding: 2em 0; }



/* footer */
.footer-pagetop{ width: calc( 196/30 * 1em * 0.6 ); height: calc( 190/30 * 1em * 0.6 ); bottom:1em;  right:1em; }
.cont-footer{ padding: 2em; }
.footer-copyrihgt p{ color: #FFF; font-size: .6em; margin-bottom: 0; }


/* content */
.content-entry{ padding: 1.5em;  }
.modal-data{ display: none; }
.frame-modal{ padding: 1.5em; }


/* TOP-PAGE */
/* main */
.cont-top-visual{ position: relative;  }
.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 .bg{ width: 100%; top:0;position: relative; }
.kv-container .vis{ }
.kv-container .oa{ width: calc( 666/1000*100vw ); top:40vw; left: 13.5vw;  }
.kv-container .logo{ width: calc( 581/1000*100% ); top:2vw; left: 22.5vw;  }
.kv-container .bg-line{ width: 100%; min-height: 100%; overflow: hidden; }
.kv-container .bg-line .line{ position: absolute; min-height: 100%; }
.kv-container .bg-line .line.line-a{ width: 7vw; top:0; left: 132vw; }
.kv-container .bg-line .line.line-b{ width: 35vw; top:0; left: 90vw; }
.kv-container .bg-line .line.line-c{ width: 14vw; top:0; left: -20vw; }
.kv-container .bg-line .line.line-d{ width: 7vw; top:0; left: -34vw; }
.kv-container .bg-line .line.line-e{ width: 7vw; top:0; left: -48vw; }

.kv-container .loading{ width: calc( 600/1000*100% ); top:70vw; left: 0; right:0; margin: 0 auto;  }


/* animetion init */
.kv-container .vis,
.kv-container .oa{ opacity: 0; }
.kv-container .bg-line .line{ min-height: 0px;}

.init .kv-container .loading{ opacity: 0; transition: all .5s ease .0s;  }
.init .kv-container .vis{ transform: scale(1.3,1.3) ; transform-origin: center bottom; }
.init .kv-container .oa{ left:-5vw; }
.init .kv-container .bg-line .line.line-a{ min-height: 100%; transition: all 1.0s ease 0s; }
.init .kv-container .bg-line .line.line-b{ min-height: 100%; transition: all 1.0s ease 0s; }
.init .kv-container .bg-line .line.line-c{ min-height: 100%; transition: all 1.0s ease .2s; }
.init .kv-container .bg-line .line.line-d{ min-height: 100%; transition: all 1.0s ease .3s; }
.init .kv-container .bg-line .line.line-e{ min-height: 100%; transition: all 1.0s ease .5s; }

.s1 .kv-container .vis{ transform: scale(1,1); opacity: 1; transition: all .5s ease .0s; }
.s1 .kv-container .oa{ left:13.5vw; opacity: 1; transition: all .5s ease .5s; }


/* news */
.cont-top-news{ max-width: inherit; position: relative; top:inherit; left: inherit; margin-right: inherit; padding: 4em 0 0 0; background: url(../images/top-news-bg-upper-sp.png) no-repeat center top; background-size: 100%; }
.cont-top-news:before{ width: calc(258/3000*100vw*4); height: calc(9/3000*100vw*4); margin: 0 0 .4em 2em; }
.cont-top-news:after{ content:""; display: block; position: relative; width: 100%; height:calc(70/1000*100vw); background: url(../images/top-news-bg-bottom-sp.png) no-repeat center bottom; background-size: 100%;  }
.cont-top-news > .inner{ margin: 0 auto; padding:0 2em 1em 2em; }

/* movie */
.cont-top-movie > .inner{ margin: 0 auto; padding:1em 1em 2em 1em; }
.movie-container{max-width: 80%; margin: 0 auto; }

.movie-bg-a.inview-act{ width: 30vw; min-height: 0; top:0; left: 0; }
.movie-bg-b.inview-act{ width: 30vw; min-height: 0; top:0; left: 80vw; }
.movie-bg-c.inview-act{ width: 7vw; min-height: 0; top:0; left: 70vw; }
.movie-bg-d.inview-act{ width: 1px; min-height: 15vw; top:0; left: 0; }

.movie-bg-a.inview-act-start{ min-height: 42vw;}
.movie-bg-b.inview-act-start{ min-height: 60vw;}
.movie-bg-c.inview-act-start{ min-height: 67vw;}
.movie-bg-d.inview-act-start{ width: 100%;}

/* pr */
.cont-top-pr > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }
.pr-container{ max-width: inherit; margin: 0 auto; padding-top: 3em; }
.pr-bg-a.inview-act{ min-height: 6vw;  }


/* story */

.cont-top-story .inner{ padding: 0; }
.cont-story-navi{ top:6em;  }
.story-navi ul li{ width: 2.7em; padding: .2em .2em;}
.story-navi ul li.spc-sp{ display: block; width: 100%; height: 1px; }
.story-navi ul li a span{ font-size: 1.3em;}

.cont-story-data{ min-height: 45vw;  }
.story-data .story-block{ padding: 14em 0 2em 0; }

.story-data .ep-title-label span{ font-size: 1.8em; }
.story-data .ep-title span{ font-size: 2.2em; }
.story-data .ep-slider-sceneImage{ max-width: 90%; }
.story-data .ep-slider-thumb{ width: 100%; margin: 0 auto 1.5em auto; display: flex; justify-content: center; position: relative; z-index: 2;} 
.story-data .ep-slider-thumb > div{ width: 5em; padding: 0 .3em; }

.story-data .ep-text{ width: 90%; margin: 0 auto 1em auto;  }
.story-data .ep-text p{ font-weight: bold; }
.story-data .ep-staff{ width: 90%; margin: 0 auto 1em auto;  }
.story-data .ep-staff p{ font-size: 1em; }
.story-data .ep-trailer{ }
.story-data.crt{ display: block; }

/* introduction */
.story-data .intro-block{ padding: 14em 0 2em 0; }
.story-data .intro-block .text > p{ font-weight: bold; }
.intro-bg{ width: calc(1378/3000*100vw*2); height: calc(1015/3000*100vw*2); top:55vw; } 
.intro-bg-a.inview-act{ left:0; right: 0; margin: 0 auto; opacity: 0; top:75vw;  }
.intro-bg-b.inview-act{ display: none;}
.intro-bg-a.inview-act-start{left:0; right: 0; margin: 0 auto; opacity: 1; top:55vw; }
.intro-bg-b.inview-act-start{ display: none; }



/* staffcast */
.cont-top-staffcast > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }

.staffcast-container{ max-width: 70em; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-container > div{ width: 100%; }
.staffcast-container .l-col{ margin-right:0; margin-bottom: 1.3em; text-align: center; }
.staffcast-container .r-col{ text-align: center; } 

.staffcast-list-text{ color:#ff2c6d; font-size: 1.2em; line-height: 1.7; font-weight: bold; }

.staffcast-bg-a.inview-act{ width: 7vw; min-height: 0; top:0; left: 10vw; }
.staffcast-bg-b.inview-act{ width: 7vw; min-height: 0; top:0; left: 23vw; }
.staffcast-bg-a.inview-act-start{ min-height: 140vw; }
.staffcast-bg-b.inview-act-start{ min-height: 140vw;  }


/* character */
.character-bg-a{ position: absolute; width: 200vw; height: inherit; min-height: calc(100% - 2em); top:0; right:-100vw; } 
.character-bg-b{ position: absolute; width: 160vw; height: inherit; min-height: calc(100% - 18em - 3em ); top:25em; right:-10vw;  } 
.character-bg-a.inview-act{ right:-180vw; }
.character-bg-b.inview-act{ right:-10vw; }
.character-bg-a.inview-act-start{ right:-100vw; }
.character-bg-b.inview-act-start{ right:-10vw }
.character-container{  position: relative; min-height: inherit; }
.cont-character-navi{ width: 100%; position: relative; top:inherit; left: inherit; }

/* .cont-character-navi{ width: 27.5vw; position: absolute; top:0; left: 0; z-index: 20; pointer-events: none; } */
.character-navi ul{ display: flex; flex-wrap: wrap; margin: 0; padding: 0; position: relative; transform: skew(0,0); transform-origin: center top; overflow: hidden; }
.character-navi ul > li{ display: block; width: 48%; margin: 1%; padding: 0; position: relative; transform: skew(0,0); transform-origin: center top;}
.character-navi ul > li a{ display: block; width: 100%; padding: 1.2em 0 ; text-align: right; position: relative; pointer-events: auto; font-size: .8em; transform: skew(-27.5deg,0); background-color: #FFF; }
.character-navi ul > li a:before{ content: ""; display: block; width: 100%; min-height: 100%; background-color: transparent; position: absolute; top:0; left: 0; background-size: 10em; transform: skew(27.5deg,0);   }


.character-navi ul > li a span{ margin: 0 8.5em 0 auto; display: block; line-height: 1; color:#00a1e9; font-family: 'Noto Serif JP', serif; font-weight: bold; position: relative;  z-index: 2; letter-spacing: .1em; font-size: 1.2em; }
.character-navi ul > li a:hover{ text-decoration: none; background-color: #ffff00; }
.character-navi ul > li a:hover:before{ background-color: transparent; }
.character-navi ul > li.crt{ }
.character-navi ul > li.crt a span{  }


.cont-character-data{ width: inherit; min-height:inherit; position: relative; top:0; left: inherit; }
.character-data{ min-height:inherit;}

.character-data:before{ height: 10vw; top:2em; left:3.5em; }
.character-data:after{ display: none;}
.character-data.crt:before{ width: 165vw; }
.character-data.crt:after{ width: 165vw; }

.character-data .chr-img{ width: 50vw; position: relative; top:inherit; right: inherit; margin: 0 auto;}
.character-data .chr-face{ width: 70vw; position: relative; bottom:inherit; left:inherit; margin: 0 auto; }

.character-data .chr-prof{ width: 100vw; min-height:5vw; padding: 2.7em 0; margin: 0 auto ; }
.character-data .chr-prof .name{ margin: 0 1.0em 0 0; position: relative; }
.character-data .chr-prof .name > span{ font-size: 2.0em; font-weight: 900; font-family: YakuHanMPs_Noto, "Noto Serif JP", serif; letter-spacing: .2em; line-height: 1; text-align: center;}
.character-data .chr-prof .cv{ color: #ffff00; background-color: #000; font-size: .8em; display: inline-block; margin: 0; position: relative; padding: .3em .4em; line-height: 1; font-weight: bold; }
.character-data .chr-prof .cv > span{ font-size: 1.333em; letter-spacing: .1em; }
.character-data .profile{ width: 95vw; margin: 0 auto 1em auto; font-size: 1.2em; letter-spacing: .1em; line-height: 2.0; position: relative; z-index:3; text-align: center; font-weight: bold; }

/* .character-data.crt{ display: block; }
.character-data.crt .chr-img{ animation: fadeIn .8s .2s ease-out both; }
.character-data.crt .chr-face{ animation: fadeIn .8s .5s ease-out both; } */


/* onair */
.cont-top-onair > .inner{ margin: 0 auto; padding-left: 2em; padding-right: 2em; }
.onair-container{ max-width: inherit; letter-spacing: .1em; }
.onair-text-brd{ font-size: 1.933em; }
.onair-list{ margin: 0 auto .5em 2em; max-width: inherit; }
.onair-list.first{  }
.onair-list.atxrtp{ margin-left: 1em; margin-right: 1em;  }
.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-bg-a.inview-act{ width: 150vw; min-height: 0; top:15.5vw; left: 06vw; }
.onair-bg-a.inview-act-start{ min-height: 127vw; }


/* bddvd */
.cont-top-bddvd{  }
.cont-top-bddvd > .inner{ margin: 0 auto; padding-left: 2em; padding-right: 2em; }
.bddvd-bg-a{ position: absolute; width: 120vw; height: 60vw; top:33vw; right:-20vw;  } 
.bddvd-bg-b{ position: absolute; width: 130vw; height: 120vw; top:85vw; left:-10vw ;  } 
.bddvd-bg-c{ position: absolute; width: 110vw; height: 2em; bottom:0; left:-5vw ;  } 
.bddvd-bg-a.inview-act{ right:-90vw; }
.bddvd-bg-b.inview-act{ left:15vw; }
.bddvd-bg-a.inview-act-start{ right:-20vw; }
.bddvd-bg-b.inview-act-start{ left:-40vw }

.cont-top-bddvd > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }

.bddvd-container{ margin: 0 auto; }

.cont-bddvd-navi{ position: relative; margin: 0 auto 1em auto; z-index: 2; }
.bddvd-navi{ margin: 0 auto; }
.bddvd-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; position: relative; }
.bddvd-navi ul li{  display: block; margin: 0; padding: .1em .2em; position: relative;}
.bddvd-navi ul li.spc-sp{ display: none; }
.bddvd-navi ul li a{ display: block; width: 100%; padding: 0 .5em; background-color: #fff; color: #000; text-align: center; transform-origin: center center; transform: skew(-27.15deg,0);position: relative; }
.bddvd-navi ul li a span{ font-size: 1.5em; font-family: 'Makinas-4-Square', sans-serif; font-weight: 900;}
.bddvd-navi ul li a:hover{ background-color: #ffff00; color: #000; text-decoration: none; }
.bddvd-navi ul li.crt a{ background-color: #000; color: #fff; pointer-events: none; }
.bddvd-navi ul li.cs a{ background-color: #fff; color: #999; pointer-events: none; }

.bddvd-data{ display: none;}
.bddvd-data { max-width: 70em; margin: 0 auto; color: #000; padding: .3em;}
.bddvd-data > .block{ padding: 1em 0; margin-bottom: .3em; }
.bddvd-data > .block.block-btm{ margin-bottom: 0; }

.bddvd-data .bdv-prof{ }
.bddvd-data .bdv-prof .title{ font-size: 2.266em; font-weight: 900; margin-bottom: 0; text-align: center; }
.bddvd-data .bdv-prof .sale{ font-size: 2em; color: #ff2c6d; font-weight: 900; text-align: center;}
.bddvd-data .bdv-prof .data{ font-size: 1.066em; text-align: center;}
.bddvd-data .tk{line-height: 1.2; padding: .2em; margin-bottom: .5em; background-color: rgba(0,0,0,.05); font-weight: 900;}
.bddvd-data.crt{ display: block; animation: fadeIn 1.0s 0s ease-out both; }

.bnf-list > .item-x1{ width: 100%; }
.bnf-list > .item-x2{ width: 100%; }
.bnf-list > .item-x3{ width: 100%; }
.bnf-list > .item-x3x2{ width: 100%; }
.bnf-list > .item-x4{ width: 100%; }
.bnf-list > .item-x1.x1-dbl{ }

.bnf-list > .item-x1 .item-col-x2,
.bnf-list > .item-x2 .item-col-x2,
.bnf-list > .item-x3 .item-col-x2,
.bnf-list > .item-x3x2 .item-col-x2,
.bnf-list > .item-x4 .item-col-x2{ width: 100%; margin-right: 0 }

.bnf-list > .item-x1 .item-col-x3,
.bnf-list > .item-x2 .item-col-x3,
.bnf-list > .item-x3 .item-col-x3,
.bnf-list > .item-x3x2 .item-col-x3,
.bnf-list > .item-x4 .item-col-x3{ width: 100%; margin-right: 0 }

.bnf-list > .item-x1 .item-col-x4,
.bnf-list > .item-x2 .item-col-x4,
.bnf-list > .item-x3 .item-col-x4,
.bnf-list > .item-x3x2 .item-col-x4,
.bnf-list > .item-x4 .item-col-x4{ width: 100%; margin-right: 0 }

.bnf-list .thumb{ padding:0 1.5em;  }



/* music */
.cont-top-music > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }

.music-container{ max-width: 70em; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.music-container > div{ width: 100%; }
.music-container .l-col{ margin-right:0; margin-bottom: 1.3em; text-align: center; }
.music-container .r-col{ margin-bottom: 1.3em; text-align: center; } 
.music-container .b-col{ text-align: center; } 

.music-list-text{ color:#ff2c6d; font-size: 1.2em; line-height: 1.7; font-weight: bold; }

.music-bg-a.inview-act{ width: 7vw; min-height: 0; top:0; left: 10vw; }
.music-bg-b.inview-act{ width: 7vw; min-height: 0; top:0; left: 23vw; }
.music-bg-a.inview-act-start{ min-height: 140vw; }
.music-bg-b.inview-act-start{ min-height: 140vw;  }


/* books */
.cont-top-books > .inner{ margin: 0 auto; padding-left: 1em; padding-right: 1em; }
.books-container{ max-width: inherit; letter-spacing: .1em; font-size: .9em; }

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

.books-bg-a.inview-act{ width: 7vw; min-height: 300vw; top:10vw; left: -15vw; }
.books-bg-b.inview-act{ width: 7vw; min-height: 300vw; top:35vw; left: -15vw; }
.books-bg-c.inview-act{ width: 120vw; min-height: 0; top:0; left: -7vw; }
.books-bg-d.inview-act{ width: 120vw; min-height: 0; top:180vw; left: -15vw; }

.books-bg-a.inview-act-start{ width: 7vw; min-height: 300vw; top:10vw; left: -15vw; }
.books-bg-b.inview-act-start{ width: 7vw; min-height: 300vw; top:35vw; left: -15vw; }
.books-bg-c.inview-act-start{ min-height: 78vw; }
.books-bg-d.inview-act-start{ min-height: 76vw; }


/* SUB-PAGE */

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

}