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

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

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

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

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

.part-background{ position: absolute; width: 100%; 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; }

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

/* background */
#Background  > div{ width: 100%; min-height: 100%; position: absolute; top:0; pointer-events: none; }
#Background .ft-line{ min-height: unset; top:unset; width: 100%; height: 17.5vw; background-color: rgba(192, 129, 255, 0.2); position: absolute; bottom:0; right:-40vw; transform: rotate(-45deg); }
#Background .top-line1{ background: url("../images/top-line1.png") no-repeat center 285vw; background-size: 100%;  }
#Background .top-line2{ background: url("../images/top-line2.png") no-repeat center 390vw; background-size: 100%;  }
#Background .plxbg{ width: 100%; height: 100%; min-height: 100%; position: absolute; pointer-events: none; }
#Background .plxbg-1{ background: url("../images/common/background-1.png") repeat center top; background-size: 100%; }
#Background .plxbg-2{ background: url("../images/common/background-2.png") repeat center top; background-size: 100%; }

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

/* header */
.part-header{ width: calc(800/3000*100%); height: inherit; position: absolute; pointer-events: none; }
.top-page .part-header{ width: calc(1000/3000*100%); }
.cont-global-logo{ display: none;}
.cont-global-navi{ width: 100%; position: relative; padding: 19.0em 0 0 0; margin: 0 auto; }
.top-page .cont-global-navi{ padding-top: 33.5em; }

.global-navi{ width: calc(606/3000*100vw); margin: 0 auto; position: relative; }
.global-navi > ul{ display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: column; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-navi > ul > li{ display: block; padding: 0 ; margin: 0; position: relative;}
.global-navi > ul > li a{ width: calc(606/3000*100vw); height: calc(110/3000*100vw); padding: 0; display: block; line-height: 1; position: relative; pointer-events: all; background: url("../images/navi/navi5.webp?v1") no-repeat left 0; background-size: calc(1212/3000*100vw); overflow: hidden; }
.global-navi > ul > li a .label{ position: absolute; top:-10vw; }
.global-navi > ul > li.gn1 a{ width: calc(606/3000*100vw); background-position-y: calc(0/3000*100vw*-1);}
.global-navi > ul > li.gn2 a{ width: calc(606/3000*100vw); background-position-y: calc(128/3000*100vw*-1);}
.global-navi > ul > li.gn3 a{ width: calc(606/3000*100vw); background-position-y: calc(256/3000*100vw*-1);}
.global-navi > ul > li.gn4 a{ width: calc(606/3000*100vw); background-position-y: calc(384/3000*100vw*-1);}
.global-navi > ul > li.gn5 a{ width: calc(606/3000*100vw); background-position-y: calc(512/3000*100vw*-1);}
.global-navi > ul > li.gn6 a{ width: calc(606/3000*100vw); background-position-y: calc(640/3000*100vw*-1);}
.global-navi > ul > li.gn7 a{ width: calc(606/3000*100vw); background-position-y: calc(790/3000*100vw*-1);}
.global-navi > ul > li.gn8 a{ width: calc(606/3000*100vw); background-position-y: calc(956/3000*100vw*-1);}
.global-navi > ul > li.gn9 a{ width: calc(606/3000*100vw); background-position-y: calc(1110/3000*100vw*-1);}
.global-navi > ul > li.gn10 a{ width: calc(606/3000*100vw); background-position-y: calc(1251/3000*100vw*-1);}
.global-navi > ul > li.gn11 a{ width: calc(606/3000*100vw); background-position-y: calc(1380/3000*100vw*-1);}

.global-navi > ul > li a:hover{ background-position-x: calc(600/3000*100vw*-1); }
.global-navi > ul > li.crt a{ opacity: 1; pointer-events: none; background-position-x: calc(600/3000*100vw*-1); }
.global-navi > ul > li.cs a{ opacity: 1; pointer-events: none;  }
.global-navi > ul > li a.hdn{ display: none; }

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

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

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

.sub-logo{ width: calc(396/3000*100vw); position: absolute; top:2.5vw; left:7vw; z-index: 2; }

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

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

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

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

.sub-content-container{  }



.subnavi-cursor{ position: absolute; width: 96%; bottom:.3vw; left: 2%;  pointer-events: none; }
.subnavi-cursor ul{ display: flex; justify-content: space-between; margin: 0; padding: 0; list-style-type: none; }
.subnavi-cursor ul li{ display: block; width:calc(172/3000*100vw); height: calc(79/3000*100vw); position: relative; pointer-events: all; cursor: pointer; }
.subnavi-cursor ul li span{ display: block; width:100%; height: 100%; background: url("../images/common/cursor.png") no-repeat center center; background-size: 100%; transform-origin: center center; }
.subnavi-cursor ul li span:hover{ background-image: url("../images/cursor-hv.png"); }
.subnavi-cursor ul li.right span{ transform: scale(-1,1); }

/* footer */
.part-footer{ position: relative; }
.cont-global-footer{ width: 100%; margin: 0 auto; padding: 5em 0 1em 0; position: relative;  }
.footer-pagetop{ width: calc( 199/3000 * 100vw ); height: calc( 157/3000 * 100vw ); position: fixed; bottom:7em; right: 3em; z-index: 10; margin: 0; }
.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; }
.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;}

.cont-footer{ width:calc(1920/3000*100vw); padding: 0; margin: 0 10vw 0 auto; text-align: right; }
.footer-copyrihgt p{ font-size: .9em; }


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

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

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



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

.sdw-t1{ filter: drop-shadow(1px 1px 0 #ffe382); }
.sdw-t2{ filter: drop-shadow(1px 1px 0 #ebaffe); }

/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3em; }
.content-entry{ padding: 0; margin: 0 0 1em 0; position: relative; border-image: url("../images/sub-news-bg.png") 33% fill / 3.3vw repeat ;  }
/* .content-entry:after{ content:""; width: 2em; height: 2em; position: absolute; bottom: -5em; left: 0; right: 0; margin: 0 auto; background: url("../images/sub-news-sep-marker.png") no-repeat center center; background-size: contain; } */
/* .content-entry:before{ content:"";  position: absolute; bottom: -5em; background: url("../images/sub-news-sep-illust.png") no-repeat center center; background-size: contain; display: none; } */
/* .content-entry.typ-a:before{ width: 5em; height: 5em; bottom: -7.5em; left: -2em; transform: scale(-1,1) rotate(-35deg); }
.content-entry.typ-b:before{ width: 7em; height: 7em; bottom: -7.5em; right: -6em; } */
.content-entry .entry-head{ margin-bottom: 0; position: relative; padding: 4.0em 4em 3.5em 4em; }
.content-entry .entry-date{ padding: 0 0 0 3.5vw; font-size: 1em; margin-bottom: 0; pointer-events: none;  }
.content-entry .entry-date > span{ color: #1e59a1; line-height: 1; letter-spacing: .1em; margin-bottom: 0;}
.content-entry .entry-title{ padding: 0 0 0 3.5vw; margin-bottom: 0; position: relative;  }
.content-entry .entry-title > span{ color: #1e59a1;  font-size: 1.466em; line-height: 1.5; }
.content-entry .entry-body{ padding: 5.5em 3.25em 3.25em 3.25em; font-size: 1.2em; color: #1e59a1; letter-spacing: .05em; line-height: 1.8; position: relative; background:url("../images/sub-news-sep.png") no-repeat center top; background-size: calc(149/3000*100vw); }

.content-accordion .acd-check{ display: none;}
.content-accordion .acd-head{ position: relative; }
.content-accordion .acd-head::after{ content:"＋"; display: inline-block; font-size:1.5em; padding: .5em 0 .4em 0; width: 2em; text-align: center; line-height: 1; background-color: #FFF; border:#1e59a1 solid 1px; font-weight: bold; color: #1e59a1; position: absolute; top:2.75em; left:2.5em; pointer-events: none;}
.content-accordion .acd-body{ display: none; height: 0; overflow: hidden; transition: 0.5s all ease 0.5s; }
.content-accordion .acd-check:checked ~ .acd-body{ display: inherit; height: inherit; transition: 0.5s all ease 0s;}
.content-accordion .acd-check:checked ~ .acd-head::after{ content:"−";}

.content-link .lnk-head{ position: relative; }
.content-link .lnk-head::after{ content:">"; display: inline-block; font-size:1.5em; padding: .5em 0 .4em 0; width: 2em; text-align: center; line-height: 1; background-color: #FFF; border:#1e59a1 solid 1px; font-weight: bold; color: #1e59a1FF; position: absolute; top:2.75em; left:2.5em; pointer-events: none;}
.content-link .lnk-head a{ display: block; text-decoration: none; }


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

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

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

.comment-frame{ position: relative; }
.comment-frame .comment-body{ width: 50vw; margin: 0 auto; position: relative; }
.comment-frame .comment-body{ padding: 3em;  border-image: url("../images/sub-news-bg.png") 33% fill / 3.3vw repeat ;  }
.comment-frame .sep{ height: 5.5em; position: relative; background:url("../images/sub-news-sep.png") no-repeat center center; background-size: calc(149/3000*100vw); }


/* modaal */
.modaal-overlay{ background: rgba(255,255,255,.75); }
.modaal-wrapper{ overflow-x: hidden; }
.modaal-inner-wrapper{ padding: 80px 0; }
.modaal-container{ background-color: transparent; box-shadow:none; max-width: inherit; }
.modaal-content-container{ padding: 0; }
.modaal-video-wrap{ margin: auto auto; }
.modaal-close{ right: 2.5em; top: 1.5em; width: 3em; height: 3em;}
.modaal-close:before,.modaal-close:after{ background-color: #1e59a2; border-radius: 0; top: .4em; left: 2em; width: .4em; height: 4em; }
.modaal-close:focus,.modaal-close:hover {background: transparent;}
.modaal-close:focus:before,.modaal-close:focus:after{background: #fe75a6;}
.modaal-close:hover:before,.modaal-close:hover:after{background: #fe75a6;}

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

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

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

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

/* TOP-PAGE */
/* main */
.cont-top-visual{ width: 100%; position: relative; margin: 0 auto; padding: 2.8vw 3.3vw 4.2vw 3.3vw; }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{ width: calc(2000/3000*100%); position: relative; margin: 0 0 0 auto; }
.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ position: relative; top:inherit; display: none; }
.kv-container .grp.on{ display: block; }
.kv-container .grp > div{ position: absolute; top:0; }
.kv-container .grp .vis-grp{ position: relative; width: 100%; margin: 0 auto; }
.kv-container .grp .vis-grp .bg{ position: relative; }
.kv-container .grp .vis-grp .vis{ position: absolute; top:0; }
.kv-container .oa{ width: calc(1026/3000*100vw); top:.25vw; left:28.0vw; margin: 0 auto; }
.kv-container .logo{ width: calc(766/3000*100vw); top:0vw; left:-30.0vw; margin: 0; }

.vis-switch-container{ margin: 0; position: absolute; bottom:0vw; right:3vw; pointer-events: none; z-index: 2; }
.vis-switch{ display: flex; flex-wrap: wrap; justify-content: center; }
.vis-switch > div{ width: 7vw; height: 7vw; margin: .5em; pointer-events: auto; line-height: 0; }
.vis-switch > div a{ display: inline-block; width: 100%; min-height: 100%; border:#1e59a2 solid 1px; border-radius: 20vw; background: #FFF; line-height: 0; position: relative; overflow: hidden; }
/* .vis-switch > div a:after{ content:"VISUAL CHANGE"; display: block; width: 100%; color:#1e59a2; font-size: 0.7em; letter-spacing: .1em; position: absolute; bottom:-1em; right:0; text-align: right; } */
.vis-switch > div.on a{ pointer-events: none; border-color:#5a91dc; }
.vis-switch > div.on a img{ opacity: .5; }
.vis-switch > div.on a:after{ opacity: .5; }

/* #Foreground .opening{ display: none; } */
#Foreground .opening{ position: fixed; overflow: hidden; pointer-events: all; display: flex; justify-content: center; align-items: center; background-color: #FFF; }
#Foreground .opening .bg{ width: 100%; height: 100vh; position: absolute; top:0; background: url("../images/top-line1.png") no-repeat center center; background-size: 100%; }
#Foreground .opening .fig{ width: calc(800/3000*100vw); height: calc(800/3000*100vw); position: relative;  }
#Foreground .opening .fig .back{ position: relative; line-height: 0; }
#Foreground .opening .fig .sdw{ position: absolute; line-height: 0; top:0; left:0; }
#Foreground .opening .fig .type{ position: absolute; line-height: 0; top:0; left:0; display: flex; flex-wrap: nowrap; width: 100%; height: 100%; }
#Foreground .opening .fig .type > div{ display: block; width: 33.33%; height: 100%; background:url("../assets/top/op/logo-type.webp") no-repeat left top; background-size: calc(800/3000*100vw); transform-origin: center center; }
#Foreground .opening .fig .type .a{ background-position: 0 0; }
#Foreground .opening .fig .type .b{ background-position: calc(800/3000*100vw*-0.333) 0; }
#Foreground .opening .fig .type .c{ background-position: calc(800/3000*100vw*-0.666) 0; }

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

.kv-container .grp .vis-grp .vis{ transform: scale(1.1); opacity: 0; }
.kv-container .logo{ opacity: 0; transform: translateY(-10%); }
.kv-container .oa{ opacity: 0; transform: translateY(30%);  }

#Foreground .opening .bg{ opacity: 0;}
#Foreground .opening .fig .back{ opacity: 0; transform: scale(1.5); }
#Foreground .opening .fig .sdw{ opacity: 0; transform: translate(-5%,-5%); }
#Foreground .opening .fig .type > div{ opacity: 0; transform: translateY(-5%); }

.s0 #Foreground .opening .fig .type .c{ opacity: 1; transform: translateY(0); transition: all .5s ease-out 0s; }
.s0 #Foreground .opening .fig .type .b{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .25s; }
.s0 #Foreground .opening .fig .type .a{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .5s; }

.s1 #Foreground .opening .fig .sdw{ opacity: 1; transform: translate(0,0); transition: all 1.0s ease-out 0s; }
.s1 #Foreground .opening .fig .back{ opacity: 1; transform: scale(1.1); transition: all .5s ease-in-out .5s; }
.s1 #Foreground .opening .bg{ opacity: 1; transition: all 1.0s ease-in-out .5s; }

.s3 #Foreground .opening{ opacity: 0; transition: all .25s ease-out .65s; pointer-events: none; }
.s4 #Foreground .opening{ opacity: 0; pointer-events: none; }

.s4 .kv-container .grp .vis-grp .vis{ transform: scale(1); opacity: 1; transition: all .75s ease-out 0s; }
.s4 .kv-container .logo{ opacity: 1; transform: translateY(0%); transition: opacity .75s ease-out 0s, transform .5s ease-out 0s; }
.s4 .kv-container .oa{ opacity: 1; transform: translateY(0%); transition: all 0s ease-out 0s; }

.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{ margin-bottom: 2em; position: relative; }
.cont-top-movie > .inner{ padding: 2em 0 1em 0; }
.top-movie-list{ width: calc(2000/3000*100vw); position: relative; margin: 0 auto; }

.top-movie-list .thm{ width: 100%; position: relative;text-align: center; line-height: 0; border-image: url("../images/top-movie-frame.png") 33% fill / 6.6vw repeat ; padding: 3.3vw; }
.top-movie-list .thm > a{ display: inline-block; pointer-events: auto; overflow: hidden; line-height: 0; }
.top-movie-list .thm > a::after{ content:""; position: absolute; display: block; width:100%; height:100%; background: url("../images/common/play-btn.png") no-repeat center center; background-size: calc(224/3000*100vw); transform-origin: center center; pointer-events: none; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1; }
.top-movie-list .thm > a:hover::after{ background-size: calc(224/3000*100vw*1.1); }
.top-movie-cursor{ display: none; }

.top-movie-dots{ text-align: center;}
.top-movie-dots ul{ display: block; list-style-type: none; padding: 0 0 0 0; margin: 0; }
.top-movie-dots li { display: inline-block; margin: 0 4em 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: 1.5em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.top-movie-dots li.slick-active button:before { color: #5a91dc;}

/* .top-movie-cursor{ position: absolute; width: 80vw; top:21vw; 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(113/3000*100vw); height: calc(68/3000*100vw); position: relative; pointer-events: all; cursor: pointer; }
.top-movie-cursor ul li span{ display: block; width:100%; height: 100%; background:  url("../images/common/cursor-r.png") no-repeat center center; background-size: 100%; transform-origin: center center; }
.top-movie-cursor ul li.left span{ transform: scale(-1,1); }
.top-movie-cursor ul li:hover{ transform: scale(1.1); } */

/* top-news */
.cont-top-news{  }
.cont-top-news > .inner{ width: calc(2000/3000*100vw); padding:4em 0 ; margin: 0 auto; padding: 0; margin: 0 auto; }
.top-subtitle.news{ width: calc(421/3000*100vw);  }

.top-news-container{  width: 60%; padding:0; min-height: 20vw; margin: 0 auto; }
.top-news-container > a{ display: block; margin-bottom: 1.5em; pointer-events: all; letter-spacing: .1em; }
.top-news-container > a dl{ padding: 0; margin: 0; display: flex; flex-wrap: nowrap; align-items: center; }
.top-news-container > a dl dt{ width: inherit; font-size: .8em; display: inline-block; padding: 0 1.5em 0 0 ; margin: 0; line-height: 1.5; font-weight: normal; text-align: center; }
.top-news-container > a dl dd{ width:100%; font-size: 1em; display: block; padding: .25em 0; margin: 0; line-height: 1.5; }
.top-news-container > a,
.top-news-container > a:visited{ text-decoration: none; color: #1e59a1; }
.top-news-container > a:hover{ text-decoration: none; color: #c76226; }


/* top-onair */
.cont-top-onair{ position: relative;  }
.cont-top-onair > .inner{ width: calc(2400/3000*100vw); margin: 0 auto; padding: 3em 0 3em 0; }
.top-subtitle.onair{ width: calc(495/3000*100vw); margin: 0 auto 3em auto; z-index: 3;}
.onair-container{ padding: 0; color: #3d4d62; position: relative; text-align: center; }

.onair-catch{ font-size: 2.0em; font-weight: normal; letter-spacing: .1em; margin-bottom: .5em; }
.onair-catch > span{ color:#5a91dc;}
.onair-catch2{ font-size: 1.6em; margin-bottom: 1em; }

.onair-label{ text-align: center; margin-bottom: 1em;}
.onair-label > span{ display: inline-block; font-size: 1.2em; letter-spacing: .05em; padding: .25em .5em; color: #3d4d62; border: #3d4d62 solid .133em; border-radius: .5em; }

.onair-label2{ position: relative; text-align: center; }
.onair-label2 > span{ display: inline-block; color: #fff; font-weight: bold; background-color: #ffc600; border-radius: 2em; padding: .5em 2em ; position: relative; }

.onair-list-container{ max-width: 40vw; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto 2em auto; }
.onair-list{ width: 100%; margin: .5% 0 ; }
.onair-list{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; text-align: left; padding: 1.0em; background-color: #FEFAF2; border:#FBE9DD solid 1px; border-radius: 2em; }
.onair-list.first{  }
.onair-list .col-a{ width: 35%; }
.onair-list .col-b{ width: 65%; }
.onair-list .col-c{ width: 100%; }
.onair-list .col-d{ width: 65%; margin-left: 35%; }
.onair-list .name{ font-size: 1.3em; font-weight: normal; margin-bottom: 0; letter-spacing: .05em; color:#5a91dc;}
.onair-list .schd{ font-size: 1.3em; font-weight: normal; margin-bottom: 0; letter-spacing: .05em; display: inline-block; width: 6.5em; }
.onair-list .time{ font-size: 1.3em; font-weight: normal; margin-bottom: 0; letter-spacing: .05em; display: inline-block; }
.onair-list .extr{ font-size: 1em; font-weight: normal; margin: .3em 0 0.1em 0; letter-spacing: .05em; }
a.onair-list { text-decoration: none; color: #000; pointer-events: all; }
a.onair-list:hover{ color: #000; background-color: #08936c; }

.onair-abema-logo{ width: 15em; margin: 0 auto 2em auto; }

.onair-list-il-ttl{ text-align: center; margin-bottom: 2em;}
.onair-list-il-ttl > span{ display: inline-block; font-size: 1.2em; letter-spacing: .05em; padding: .25em .5em; color: #3d4d62; border: #3d4d62 solid .133em; border-radius: .5em; }

.onair-list-il-container{  margin: 0 auto;  }
.onair-list-il{ 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: flex; align-items: center; justify-content: center; color:#5a91dc; padding: 1.0em; background-color: #FEFAF2; border:#FBE9DD solid 1px; border-radius: 2em; text-decoration: none; }
/* .onair-list-il > a::before{ content:"> "; margin-right: .25em; } */
.onair-list-il > a span{ display: inline-block; font-size: 1.2em; }
.onair-list-il > a.cs{ pointer-events: none; }
.onair-list-il > a:hover{ background-color: #5a91dc; color: #fff;}



/* top-intro */
.cont-top-intro{ position: relative;  }
.cont-top-intro > .inner{ width: calc(2400/3000*100vw); margin: 0 auto; padding: 3em 0 3em 0; }
.top-subtitle.intro{ width: calc(986/3000*100vw); margin: 0 auto 3em auto; z-index: 3;}
.intro-text{ font-size: 1.333em; line-height: 2.0; letter-spacing: .1em; text-align: center; color: #3d4d62; position: relative; z-index: 3; }


/* top-staffcast */
.cont-top-staffcast{ position: relative; }
.cont-top-staffcast > .inner{ width: calc(2000/3000*100vw); margin: 0 auto; padding: 3em 0 3em 0; }
.top-subtitle.staffcast{ width: calc(823/3000*100vw); }
.staffcast-container{ padding: 1em 0; color: #3d4d62; position: relative;  }

.staffcast-list-title{ text-align: center; margin-bottom: 2em;}
.staffcast-list-title > span{ display: inline-block; font-size: 1.2em; letter-spacing: .05em; padding: .25em .5em; color: #3d4d62; border: #3d4d62 solid .133em; border-radius: .5em; }
.staffcast-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-list > div{ width: 25%; }
.staffcast-list.cs > div{ width: 25%;  }
.staffcast-list > div.full{ width: 100%; }
.staffcast-list > div.p60{ width: 60%; }
.staffcast-list > div.p50{ width: 50%; }
.staffcast-list > div.p40{ width: 40%; }
.staffcast-list > div.p33{ width: 30%; }
.staffcast-list > div.p30{ width: 30%; }
.staffcast-list > div.p25{ width: 25%; }
.staffcast-list > div.p20{ width: 20%; }
.staffcast-list > div.sep{ width: 100%; height: 1px; }
.staffcast-list > div.sep.pc{  }
.staffcast-list > div.sep.sp{ display: none; }
.staffcast-list > div > div{ margin-bottom: 3em; position: relative; }
.staffcast-list .pos{ display: block; font-size: 1.2em; color: #5a91dc; letter-spacing: .05em;  margin-bottom: .5em; line-height: 1; }
.staffcast-list.cs .pos{ color: #AAA;  }
.staffcast-list .name{ display: inline-block; font-size: 1.333em; letter-spacing: .05em; margin-bottom: 0; line-height: 1; position: relative; }
.staffcast-list .ext{ display: block; font-size: .8em; letter-spacing: .1em; padding-top: .5em; margin-bottom: 0; line-height: 1; }
.staffcast-list .cmt{ display: inline-block; width: 1.25em; position: absolute; top:-0.25em; left:calc(50% + 2.0em); text-decoration: none; pointer-events: auto; }
.staffcast-list .cmt.ch2{ left:calc(50% + 1.5em); }
.staffcast-list .cmt.ch4{ left:calc(50% + 2.5em); }
.staffcast-list .cmt.ch5{ left:calc(50% + 3.0em); }
.staffcast-list .cmt.ch6{ left:calc(50% + 3.5em); }
.staffcast-list .cmt:hover{transform: scale(1.1); text-decoration: none; cursor: pointer; }
.staffcast-cs{ font-size: 1.2em; letter-spacing: .1em; margin-bottom: 2em; color: #AAA; }




/* top-character */
.cont-top-character{ position: relative; }
.cont-top-character > .inner{ width: calc(2400/3000*100vw); margin: 0 auto; padding: 3em 0 3em 0; }
.top-subtitle.character{ width: calc(786/3000*100vw); }

#CharaCont{ position: relative;  }
.cont-character-navi{ width: 100%; margin: 0 auto 3em 0; position: relative; z-index: 5; }
.character-navi{ width: 100%; }
.character-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0; padding: 0; list-style-type: none; }
.character-navi ul li{ display: block; margin: 0 .5em; padding:.25em; }
.character-navi ul li a{ width: calc(200/3000*100vw); height: calc(200/3000*100vw); background-color: #FFF; border:#d7bee1 dashed .233em; border-radius: 10em; display: block; position: relative; transform-origin: center center; pointer-events: all; cursor: pointer; overflow: hidden; }
.character-navi ul li a img{ position: relative; z-index: 2; }
.character-navi ul li a:hover{ text-decoration: none; transform: scale(1.1); }
.character-navi ul li a:hover::after{ border-color:#d64dff; transform: rotate(45deg) scale(.9);}
.character-navi ul li.crt{ }
.character-navi ul li.crt a{ pointer-events: none; background-color: #adc9f0; border-style: solid; }
.character-navi ul li.sep{ width: 100%; height: 1px; margin: 0; padding: 0; }
.character-navi ul li.sep-sp{ display: none; width: 100%; height: 1px; margin: 0; padding: 0; }

.cont-character-data{ width:100%; min-height: 60vw; position: relative; }
.character-data{ width:100%; min-height: 60vw; position: relative; display: none; pointer-events:none;  }

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

.character-data .chr-prof{ position: absolute; top:6vw; left:38vw; z-index: 3; width: calc(1021/3000*100vw); margin: 0 auto;  }
/* .character-data .chr-prof .chr-switch{ width: calc(152/3000*100vw); position: absolute; top:0; left:0; pointer-events: auto; } */
.character-data .chr-prof .prof-frame{ position: relative; z-index: 3;  }

.character-data .prof-name{ padding: 0 0 1.5em 0; margin-bottom: 1.25em; display: flex; flex-direction: column; position: relative; background:url("../images/common/sep-b.png") no-repeat center bottom; background-size: calc(1025/3000*100vw); }
.character-data .prof-name .name{ display: block; margin-right: .5em; }
.character-data .prof-name .name span{ color: #5a91dc; font-size: 2.2em; letter-spacing: 0.05em; }
.character-data .prof-name .cv{ display: block; }
.character-data .prof-name .cv span{ font-size: 1.333em; letter-spacing: 0.05em; }
.character-data .prof-text{ margin-bottom: 2em; }
.character-data .prof-text .text{ margin: 0; font-size: 1.2em;  letter-spacing: .025em; line-height: 2; position: relative; z-index: 6; }
.character-data .prof-text .text [data-ruby]::before { top: -1.7em; }

.character-data.crt{ display: block; }
.character-data.crt .chr-img{ animation: anm-character-change .5s .05s ease-out both running; }
@keyframes anm-character-change {
  0% { opacity: 0; transform: translateY(-5%);}
  100% { opacity: 1; transform: translateY(0);}
}
.subnavi-cursor.character-cursor{ width: 100%; top:35vw; bottom:inherit; left: 0;  }


/* top-music */
.cont-top-music{ position: relative; }
.cont-top-music > .inner{ width: calc(2000/3000*100vw); margin: 0 auto; padding: 3em 0 3em 0; }
.top-subtitle.music{ width: calc(468/3000*100vw); }

.music-text{ text-align: center; margin-bottom: 2em; }


/* top-comics */
.cont-top-comics{ position: relative; }
.cont-top-comics > .inner{ width: calc(2000/3000*100vw); margin: 0 auto; padding: 3em 0 3em 0; }
.top-subtitle.comics{ width: calc(529/3000*100vw); }

.comics-text{ text-align: center; margin-bottom: 2em; }
.comics-origin-link{ text-align: center; margin-bottom: 2em;  }

.comics-new{ text-align: center; padding-top: 2em; margin-bottom: 4em; position: relative; }
.comics-new .thm{ width: calc(629/3000*100vw); margin: 0 auto; position: relative; z-index: 2; }
.comics-new .thm img{  border: #5a91dc solid 1px; }
.comics-new .catch{ width: calc(443/3000*100vw); position: absolute; top:-7.5em; right:11.5em; z-index: 1; }

.comics-list{ display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0 auto 1em auto; }
.comics-list > div{ width: calc( (1 / 4 * (100% + 1.5em)) - 1.5em ); margin-bottom: 1.5em; margin-right: 1.5em; }
.comics-list > div:nth-of-type(4n){ margin-right: 0;}
.comics-list > div p{ font-size: 1em; margin-bottom: 0; letter-spacing: .05em; text-align: left; }
.comics-list > div .thm img{  border: #5a91dc solid 1px; }


/* SUB-PAGE */

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

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{ width: calc(1920/3000*100vw); padding:4em 0 ; margin: 0 auto 0 calc(800/3000*100vw); }
.sub-subtitle.news{ width: calc(421/3000*100vw);  }
.sub-news-container{ position: relative; }
.news-twt-btn{ width: 12.5em; margin-bottom: .25em; }

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



.cont-story-navi{ width: 100%; margin: 0 auto 1.0em auto; }
.story-navi{ width: 100%; margin: 0 auto;  padding: .25em; border-radius: 0; }
.story-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.story-navi ul li{ width: 4.5em; height: 4.5em; display: block; margin: .25em; padding:0; text-align: center; }
.story-navi ul li.spc-sp{ display: none; }
.story-navi ul li a{ width: 4.5em; height: 4.5em; padding-top: 1.5em; color: #5a91dc; background: #eaf2fd; border:#fff solid 2px; border-radius: 4em; 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: 1.4em; font-weight: bold; position: relative; }
.story-navi ul li a:hover{ transform: scale(1.1,1.1);  }
.story-navi ul li.crt a{ pointer-events: none; background-color:#f7dce6; color: #a66eb3; border-color:#fff; transform: scale(1.2,1.2); }
.story-navi ul li.cs a{ pointer-events: none; background: #fff; color: #DDD; border:#eee dashed 2px; }

.story-container{ background-color: #dce8f8; background: linear-gradient(135deg, #f7dce6 0%, #dce8f8 70%, #dce8f8 100%); border-radius: 3em; padding: 4em ; }

.cont-story-data{ width:100%; min-height: 60vw; margin: 0 auto; position: relative;  }
.cont-story-data{  }
.cont-story-data:before{ content:""; width: 100%; height: 100%; position: absolute; top:0; left:0;  }

.story-data{ display: none; }
.story-data{ position: relative; pointer-events:none; text-align: center;  }
.story-data .episode-container{ position: relative; border-radius: 2em; overflow: hidden; background-color: #FFF; }

.story-data .ep-slider-sceneImage{ width: inherit; max-width: 1680px; margin:0 auto 2em 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: #eee; font-size: 1.0em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.ep-slider-dots li.slick-active button:before { color: #5a91dc;}

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

.story-data .ep-number{ color:#5a91dc; font-size: 1.6em; font-weight: normal; margin-bottom: .5em; letter-spacing: .1em; position: relative; }
.story-data .ep-number > span{  }
.story-data .ep-title{ color:#5a91dc; font-size: 2.6em; font-weight: normal; margin-bottom: .5em; letter-spacing: .1em; position: relative; }
.story-data .ep-title > span{  }
.story-data .ep-title [data-ruby]::before { top: -1.0em; transform: scale(0.4,0.45); }
.story-data .ep-sep{ width: 100%; height: 1px; background-color: #000; margin: 0 auto 1em auto; }
.story-data .ep-text{  background-color: #FFF; color: #3d4d62; padding: 1em 2em; }
.story-data .ep-text p{ font-size: 1.433em; font-weight: normal; letter-spacing: .05em; line-height: 2;  margin: 0;}
.story-data .ep-text p [data-ruby]::before { top: -1.7em; transform: scale(0.45,0.5); width: 222%;  }
.story-data .ep-staff{ margin-bottom: 1em; position: relative; padding: 1em 2em; }
.story-data .ep-staff p{ color:#b9cbe6; font-size: .8em; line-height: 1.8; letter-spacing: .1em; display: inline; }

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

/* top-bddvd */
.cont-sub-bddvd{ position: relative; }
.cont-sub-bddvd > .inner{ width: calc(1920/3000*100vw); padding:4em 0 ; margin: 0 auto 0 calc(800/3000*100vw); }
.sub-subtitle.bddvd{ width: calc(488/3000*100vw); }

.bddvd-text{ text-align: center; margin-bottom: 2em; }

.bnf-list{ width: 83%; display: flex; flex-wrap: wrap; margin: 0 auto; align-items: flex-start; }
.bnf-list > div{ }
.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-x4x3{ width: 75%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x5{ width: 20%; 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-x3x2{ width: calc((100% - (0.5em * 2)) / 3 * 2); margin-right: .5em; }
.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 > .item-h{ width: 100%; margin: 0 0 1em 0 ; padding: 0;  }
.bnf-list > .item-h .item-col{ width: 100%; margin: 0 0 1em 0 ; padding: 0 0 1em 0; border-bottom: #bba194 dashed 1px; display: flex; flex-wrap: wrap; align-items: top; }

.bnf-list > .item-h .item-col:last-child{ margin: 0 0 1em 0 ; padding: 0; border: none; }

.bnf-list .shop{  margin-bottom: 1em; font-weight: normal; background: #1e59a2; color: #FFF;padding: .2em .5em; border-radius: .25em; }
.bnf-list .shop::before{ content:""; }
.bnf-list .shop::after{ content:""; }
.bnf-list .thumb{ padding:0; text-align: center; margin: .5em auto ; }
.bnf-list .thumb{ display: flex; align-items: center; justify-content: center; vertical-align: middle; }
.bnf-list .thumb .inner{ /*min-height: 13em;*/ position: relative; }
.bnf-list .thumb .inner a{ display: block; /*height: 13em;*/ position: relative; }
.bnf-list .thumb .inner img.vt{ max-width: auto; height: 13em; width: auto\9;}
.bnf-list .thumb.np{ pointer-events: none;  }
.bnf-list .thumb.np .inner{ padding: 0 8em; }
.bnf-list .data{ width: 100%; text-align: center; }
.bnf-list .excond{ font-size: 0.666em; color: #5a91dc; margin-bottom: .3em; }
.bnf-list .name{ font-size: 1em; letter-spacing: -0.05em; margin-bottom: .3em; }
.bnf-list .cond{ font-size: 0.777em; margin-bottom: .3em; background-color: #5a91dc; display: inline-block; padding: .2em .6em; color: #FFF; border-radius: 3em; }
.bnf-list .start{ font-size: 0.666em; margin-bottom: .3em; }
.bnf-list .shop-link{ width: 100%; font-size: 0.666em; padding: .5em 0 0 0; }

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

.bnf-list > .item-h .thumb{ width: 100%; margin: 0; padding: 0 0 1em 0; }
.bnf-list > .item-h .data{ width: 100%; margin: 0 ; padding: 0; text-align: left; }

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

.music-text{ text-align: center; margin-bottom: 2em; }

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

.cont-special-navi{ width: 100%; margin: 0 auto 1.0em auto; }
.special-navi{ width: 100%; margin: 0 auto;  padding: .25em; border-radius: 0; }
.special-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.special-navi ul li{ width: inherit; display: block; margin: .25em .5em; padding:0; text-align: center; }
.special-navi ul li.spc-sp{ display: none; }
.special-navi ul li a{ padding: 1.0em 1.5em ; color: #5a91dc; background: #eaf2fd; border:#fff solid 2px; border-radius: 4em; display: block; width: 100%; transition: all .1s ease 0s; text-decoration: none; position: relative; line-height: 1; }
.special-navi ul li a span{ font-size: 1.3em; font-weight: bold; position: relative; }
.special-navi ul li a:hover{ transform: scale(1.1,1.1);  }
.special-navi ul li.crt a{ pointer-events: none; background-color:#f7dce6; color: #a66eb3; border-color:#fff; transform: scale(1.0,1.0); }
.special-navi ul li.cs a{ pointer-events: none; background: #fff; color: #DDD; border:#eee dashed 2px; }


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

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

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

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

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

/* background */
#Background .ft-line{ min-height: unset; top:unset; width: 100%; height: 25vw; bottom:0; right:-40vw; }
#Background .top-line1{ background: url("../images/top-line1.png") no-repeat center 905vw; background-size: 150%;  }
#Background .top-line2{ background: url("../images/top-line2.png") no-repeat center 1290vw; background-size: 150%;  }
#Background .plxbg{ width: 100%; height: 100%; min-height: 100%; position: absolute; pointer-events: none; }
#Background .plxbg-1{ background: url("../images/common/background-1.png") repeat center top; background-size: 150%; }
#Background .plxbg-2{ background: url("../images/common/background-2.png") repeat center top; background-size: 150%; }


/* foreground */

/* header */
.part-header{ width: 100%; height: 100%; position: fixed; pointer-events: none; background-color: rgba(255,255,255,0); transition: all .3s ease-out 0s; }
.top-page .part-header{ width: 100%; }
/* .part-header:before{ content:""; width: 100%; height: 100%; visibility: visible; opacity: 1; } */

.cont-global-logo{ width: 10em; margin: 0 auto; padding: 1em 0 .5em 0; position: relative; }

.cont-global-navi{ width: 100%; position: relative; padding: 1em 0 0 0; margin: 0 auto; }
.top-page .cont-global-navi{ padding-top: 1em; }

.global-navi{ width: calc(606/3000*100vw*3); margin: 0 auto; position: relative; }
.global-navi > ul{ display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: column; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-navi > ul > li{ display: block; padding: 0 ; margin: 0; position: relative;}
.global-navi > ul > li a{ width: calc(606/3000*100vw*3); height: calc(105/3000*100vw*3); padding: 0; display: block; line-height: 1; position: relative; pointer-events: all; background-size: calc(1212/3000*100vw*3); overflow: hidden; }
.global-navi > ul > li a .label{ position: absolute; top:-10vw; }
.global-navi > ul > li.gn1 a{ width: calc(606/3000*100vw*3); background-position-y: calc(0/3000*100vw*-3);}
.global-navi > ul > li.gn2 a{ width: calc(606/3000*100vw*3); background-position-y: calc(128/3000*100vw*-3);}
.global-navi > ul > li.gn3 a{ width: calc(606/3000*100vw*3); background-position-y: calc(256/3000*100vw*-3);}
.global-navi > ul > li.gn4 a{ width: calc(606/3000*100vw*3); background-position-y: calc(384/3000*100vw*-3);}
.global-navi > ul > li.gn5 a{ width: calc(606/3000*100vw*3); background-position-y: calc(512/3000*100vw*-3);}
.global-navi > ul > li.gn6 a{ width: calc(606/3000*100vw*3); background-position-y: calc(640/3000*100vw*-3);}
.global-navi > ul > li.gn7 a{ width: calc(606/3000*100vw*3); background-position-y: calc(790/3000*100vw*-3);}
.global-navi > ul > li.gn8 a{ width: calc(606/3000*100vw*3); background-position-y: calc(956/3000*100vw*-3);}
.global-navi > ul > li.gn9 a{ width: calc(606/3000*100vw*3); background-position-y: calc(1110/3000*100vw*-3);}
.global-navi > ul > li.gn10 a{ width: calc(606/3000*100vw*3); background-position-y: calc(1251/3000*100vw*-3);}
.global-navi > ul > li.gn11 a{ width: calc(606/3000*100vw*3); background-position-y: calc(1380/3000*100vw*-3);}

.global-navi > ul > li a:hover{ background-position-x: calc(600/3000*100vw*-3); }
.global-navi > ul > li.crt a{ opacity: 1; pointer-events: none; background-position-x: calc(600/3000*100vw*-3); }
.global-navi > ul > li.cs a{ opacity: 1; pointer-events: none;  }

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


.cont-sp-btn{ display: block; color:#000; width: calc(130/1000*100vw); position: absolute; top:0; right:0; z-index: 2; pointer-events: all; }
.cont-sp-btn a{ display: block; line-height: 0; text-decoration: none; }
.cont-sp-btn .sp-navi-open{ display: block; }
.cont-sp-btn .sp-navi-close{ display: none; }
.spmenu-on .cont-sp-btn .sp-navi-open{ display: none; }
.spmenu-on .cont-sp-btn .sp-navi-close{ display: block; }

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


/* body */
.sub-logo{ width: calc(396/3000*100vw*1.75); position: absolute; top:2.5vw; left:2.5vw; z-index: 2; }

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

.top-subtitle{ margin: 0 auto 2em auto; }
.sub-subtitle{  margin: 0 auto 4em auto; }
.sub-blocktitle{ margin: 0 auto 2em auto; }
.sub-content-container{  }


/* footer */
.part-footer{ position: relative; }
.cont-global-footer{ width: 100%; margin: 0 auto; padding: 3em 0 1em 0; position: relative;  }
.footer-pagetop{ width: calc( 199/3000 * 100vw*1.5 ); height: calc( 157/3000 * 100vw*1.5 ); position: fixed; bottom:3em; right: 1em; }

.anm-pagetop-btn { -webkit-animation-name: anm-pagetop-btn; animation-name: anm-pagetop-btn;}

.cont-footer{ width:calc(1920/3000*100vw); padding: 0; margin: 0 1em 0 auto; text-align: right; }
.footer-copyrihgt p{ font-size: .8em; margin-bottom: 0; }


/* content */
.cont-entries{ padding-bottom: 3em; }
.content-entry{ margin: 0 0 1em 0;  border-image: url("../images/sub-news-bg.png") 33% fill / 6.6vw repeat ;  }
/* .content-entry:after{ content:""; width: 2em; height: 2em; position: absolute; bottom: -5em; left: 0; right: 0; margin: 0 auto; background: url("../images/sub-news-sep-marker.png") no-repeat center center; background-size: contain; } */
/* .content-entry:before{ content:"";  position: absolute; bottom: -5em; background: url("../images/sub-news-sep-illust.png") no-repeat center center; background-size: contain; display: none; } */
/* .content-entry.typ-a:before{ width: 5em; height: 5em; bottom: -7.5em; left: -2em; transform: scale(-1,1) rotate(-35deg); }
.content-entry.typ-b:before{ width: 7em; height: 7em; bottom: -7.5em; right: -6em; } */
.content-entry .entry-head{  padding: 1.3em 1.75em 1.5em 1.75em; }
.content-entry .entry-date{ padding: 0 0 0 8.5vw; }
.content-entry .entry-date > span{ font-size: .8em; }
.content-entry .entry-title{ padding: 0 0 0 8.5vw; }
.content-entry .entry-title > span{ font-size: 1.066em; }
.content-entry .entry-body{ padding: 3.5em 1.75em 1.75em 1.75em; font-size: 1.0em; background:url("../images/sub-news-sep.png") no-repeat center top; background-size: calc(149/3000*100vw*2); }

.content-accordion .acd-check{ display: none;}
.content-accordion .acd-head{ position: relative; }
.content-accordion .acd-head::after{ content:"＋"; display: inline-block; font-size:1.0em; padding: .5em 0 .4em 0; width: 2em; text-align: center; line-height: 1; background-color: #FFF; border:#1e59a1 solid 1px; font-weight: bold; color: #1e59a1; position: absolute; top:1.75em; left:1.75em; pointer-events: none;}
.content-accordion .acd-body{ display: none; height: 0; overflow: hidden; transition: 0.5s all ease 0.5s; }
.content-accordion .acd-check:checked ~ .acd-body{ display: inherit; height: inherit; transition: 0.5s all ease 0s;}
.content-accordion .acd-check:checked ~ .acd-head::after{ content:"−";}

.content-link .lnk-head{ position: relative; }
.content-link .lnk-head::after{ content:">"; display: inline-block; font-size:1.5em; padding: .5em 0 .4em 0; width: 2em; text-align: center; line-height: 1; background-color: #FFF; border:#1e59a1 solid 1px; font-weight: bold; color: #1e59a1FF; position: absolute; top:2.75em; left:2.5em; pointer-events: none;}
.content-link .lnk-head a{ display: block; text-decoration: none; }

.comment-frame{ position: relative; }
.comment-frame .comment-body{ width: 90%; margin: 0 auto; position: relative; }
.comment-frame .comment-body{ padding: 1.5em;  border-image: url("../images/sub-news-bg.png") 33% fill / 6.6vw repeat ;  }
.comment-frame .sep{ height: 5.5em; position: relative; background:url("../images/sub-news-sep.png") no-repeat center center; background-size: auto 50%; }


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



/* TOP-PAGE */
/* main */
.cont-top-visual .kv-container{ width: 100%; position: relative; padding-bottom: 15vw; margin: 0 auto; }
.kv-container .oa{ width: calc(1026/3000*100vw*2.1); top:0vw; left:0; right: 0; margin: 0 auto; filter: drop-shadow(0 0 .2em #FFF) drop-shadow(0 0 .2em #FFF);  }
.kv-container .logo{ width: calc(766/3000*100vw*1.2); top:86vw; left:63vw; right: 0; margin: 0 auto; filter: drop-shadow(0 0 .2em #FFF) drop-shadow(0 0 .1em #FFF); }
.kv-container[data_vis="1"] .logo{ top:19vw; left:0; right: 0; margin: 0 auto; }

.vis-switch-container{ bottom:0vw; right:0; left:0; margin: 0 auto; }
.vis-switch > div{ width: 12vw; height: 12vw; margin: .5em; }
.vis-switch > div a{ padding: .125em;}
.vis-switch > div a:after{ font-size: 0.5em; text-align: center; }


/* #Foreground .opening{ display: none; } */

#Foreground .opening .fig{ width: 60vw; height: 60vw; }
#Foreground .opening .fig .type > div{ background-size: 60vw; }
#Foreground .opening .fig .type .a{ background-position: 0 0; }
#Foreground .opening .fig .type .b{ background-position: calc(60vw*-0.333) 0; }
#Foreground .opening .fig .type .c{ background-position: calc(60vw*-0.666) 0; }


/* top-movie */
.cont-top-movie{ margin-bottom: 0; position: relative; }
.cont-top-movie > .inner{ padding: 0; }
.top-movie-list{ width: 90%; position: relative; margin: 0 auto; }
.top-movie-list .thm{ border-image: url("../images/top-movie-frame.png") 33% fill / 13.2vw repeat ; padding: 6.2vw; }

.top-movie-dots li { margin: 0 4em 0 -1em; }
.top-movie-dots li button:before { font-size: 1.5em; }


/* top-news */
.cont-top-news > .inner{ width: 90%; padding:2em 0 ; }
.top-subtitle.news{ width: calc(421/3000*100vw*1.5);  }
.top-news-container{  width: 100%;  }
.top-news-container > a dl dd{ width:100%; font-size: 1em; display: block; padding: .25em 0; margin: 0; line-height: 1.25; }


/* onair */
.cont-top-onair > .inner{ width: 90%; padding: 2em 0; }
.top-subtitle.onair{ width: calc(495/3000*100vw*1.5); margin: 0 auto 2em auto; }


.onair-catch{ font-size: 1.4em; margin-bottom: .75em; }
.onair-catch2{ font-size: 1.1em; margin-bottom: 2em; }

.onair-label{ margin-bottom: 2em;}
.onair-label > span{ font-size: 1.0em; }

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

.onair-list .name{ font-size: 1.1em; margin-bottom: .25em; }
.onair-list .schd{ font-size: 1.0em; }
.onair-list .time{ font-size: 1.0em;  }
.onair-list .extr{ font-size: .9em; }

.onair-abema-logo{ width: 15em; margin: 0 auto 2em auto; }

.onair-list-il > a{ width: 39%; margin: 0.5%; padding: .5em; }
.onair-list-il > a span{ display: inline-block; font-size: 1.0em; }




/* top-intro */
.cont-top-intro > .inner{ width: 90%; padding: 2em 0; }
.top-subtitle.intro{ width: calc(986/3000*100vw*1.5); margin: 0 auto 2em auto; }
.intro-text{ font-size: 1.0em; line-height: 2.0; letter-spacing: .05em;  }


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

.staffcast-list-title{ margin-bottom: 2em;}
.staffcast-list-title > span{ font-size: 1.0em; }

.staffcast-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-list > div{ width: 50%; }
.staffcast-list.cs > div{ width: 40%; }
.staffcast-list > div.full{ width: 100%; }
.staffcast-list > div.p60{ width: 100%; }
.staffcast-list > div.p50{ width: 100%; }
.staffcast-list > div.p40{ width: 100%; }
.staffcast-list > div.p33{ width: 100%; }
.staffcast-list > div.p30{ width: 50%; }
.staffcast-list > div.p25{ width: 50%; }
.staffcast-list > div.p20{ width: 50%; }
.staffcast-list > div.sep{ width: 100%; height: 1px; }
.staffcast-list > div.sep.pc{ display: none; }
.staffcast-list > div.sep.sp{ display: block; }
.staffcast-list > div > div{ margin-bottom: 2em; position: relative; }
.staffcast-list .pos{ font-size: 1.0em; }
.staffcast-list.cs .pos{ color: #AAA;  }
.staffcast-list .name{ font-size: 1.2em; }
.staffcast-list .ext{ font-size: .8em; }
.staffcast-list .cmt{ width: 1.5em; }


/* top-character */
.cont-top-character > .inner{ width:100%; margin: 0 auto; padding: 3em 0; }
.top-subtitle.character{ width: calc(786/3000*100vw*1.5); }

#CharaCont{ position: relative;  }
.cont-character-navi{ margin: 0 auto 1em 0;  }
.character-navi{ }
.character-navi ul li{  margin: 0 .125em; padding:.125em; }
.character-navi ul li a{ width: calc(200/3000*100vw*2.25); height: calc(200/3000*100vw*2.25); border:#d7bee1 dashed .233em; border-radius: 10em;}
.character-navi ul li.sep-sp{ display: block; }

.cont-character-data{ width:100%; min-height: 60vw; position: relative; }
.character-data{ width:100%; min-height: 60vw; position: relative; display: none; pointer-events:none;  }

.character-data .chr-img{ width: 80%; margin: 0 auto; }
.character-data .chr-img .figure{ display: none; }
.character-data .chr-img .figure.nochange{ display: block; }
.character-data[data-swt="1"] .chr-img .figure.fig1{ display: block; }
.character-data[data-swt="2"] .chr-img .figure.fig2{ display: block; }

.character-data .chr-prof{ position: relative; top:unset; left:unset; z-index: 3; width: 70%; margin: 0 auto;  }
/* .character-data .chr-prof .chr-switch{ width: calc(152/3000*100vw); position: absolute; top:0; left:0; pointer-events: auto; } */
.character-data .chr-prof .prof-frame{ position: relative; z-index: 3;  }

.character-data .prof-name{ padding: 0; margin-bottom: 1.25em; }
.character-data .prof-name .name{ }
.character-data .prof-name .name span{ font-size: 1.6em; }
.character-data .prof-name .cv{ display: block; }
.character-data .prof-name .cv span{ font-size: 1.2em; }
.character-data .prof-text{ }
.character-data .prof-text .text{ font-size: 1.0em; }



/* top-comics */
.cont-top-comics > .inner{ width: 90%; margin: 0 auto; padding: 2em 0; }
.top-subtitle.comics{ width: calc(529/3000*100vw*1.5); }

.comics-origin-link{  font-size: .8em; }

.comics-new{ padding-top: 2em; margin-bottom: 2em;}
.comics-new .thm{ width: calc(629/3000*100vw*2); }
.comics-new .catch{ width: calc(443/3000*100vw*1.9);top:-3.5em; right:.5em; }

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


/* SUB-PAGE */

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

/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{ width: 90%; padding:3em 0 ; margin: 0 auto; }
.sub-subtitle.news{ width: calc(421/3000*100vw*1.5);  }
.sub-news-container{ position: relative; }
.news-twt-btn{ width: 12.5em; margin-bottom: .25em; }

/* story */
.cont-sub-story{ }
.cont-sub-story > .inner{ width: 100%; padding:3em 0 ; margin: 0 auto; }
.sub-subtitle.story{ width: calc(465/3000*100vw*1.5); }

.cont-story-navi{ width: 90%; margin: 0 auto 1.0em auto; }
.story-navi{ width: 100%; margin: 0 auto;  padding: .25em; border-radius: 0; }
.story-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.story-navi ul li{ width: 3.5em; height: 3.5em;  }
.story-navi ul li.spc-sp{ display: none; }
.story-navi ul li a{ width: 3.5em; height: 3.5em; padding-top: 1.0em; }
.story-navi ul li a span{ font-size: 1.4em; }

.story-container{ border-radius: 0; padding: 1em ; }

.cont-story-data{ width:100%; min-height: 60vw; margin: 0 auto; position: relative;  }
.cont-story-data{  }
.cont-story-data:before{ content:""; width: 100%; height: 100%; position: absolute; top:0; left:0;  }

.story-data .episode-container{border-radius: 1.5em; }

.story-data .ep-number{ font-size: 1.2em;}
.story-data .ep-number > span{  }
.story-data .ep-title{ font-size: 1.80em;}
.story-data .ep-title > span{  }
.story-data .ep-title [data-ruby]::before { top: -1.0em; transform: scale(0.4,0.45); }
.story-data .ep-text p{ font-size: 1.1em; }
.story-data .ep-text p [data-ruby]::before { top: -1.7em; transform: scale(0.45,0.5); width: 222%;  }
.story-data .ep-staff p{ font-size: .8em; }


/* bddvd */
.cont-sub-bddvd{ }
.cont-sub-bddvd > .inner{ width: 90%; padding:3em 0 ; margin: 0 auto; }
.sub-subtitle.bddvd{ width: calc(488/3000*100vw*1.5); }

.bddvd-text{ text-align: center; margin-bottom: 2em; }

.bnf-list{ width: 88%; display: flex; flex-wrap: wrap; margin: 0 auto; align-items: flex-start; }
.bnf-list > div{ }
/* .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-x4x3{ width: 75%; margin: 0 ; padding: .5em .25em; display: flex; flex-wrap: wrap; align-items: top; }
.bnf-list > .item-x5{ width: 20%; 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-x3x2{ width: calc((100% - (0.5em * 2)) / 3 * 2); margin-right: .5em; }
.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 > .item-h{ width: 100%; margin: 0 0 1em 0 ; padding: 0;  }


.bnf-list .shop{ }
.bnf-list .thumb{ padding:0; text-align: center; margin: .5em auto ; }
.bnf-list .thumb{ display: flex; align-items: center; justify-content: center; vertical-align: middle; }
.bnf-list .thumb .inner{ /*min-height: 13em;*/ position: relative; }
.bnf-list .thumb .inner a{ display: block; /*height: 13em;*/ position: relative; }
.bnf-list .thumb .inner img.vt{ max-width: auto; height: 13em; width: auto\9;}
.bnf-list .thumb.np{ pointer-events: none;  }
.bnf-list .thumb.np .inner{ padding: 0; }
.bnf-list .data{ width: 100%; text-align: center; }
.bnf-list .excond{ font-size: 0.8em;  }
.bnf-list .name{ font-size: 1em;  }
.bnf-list .cond{ font-size: 0.9em; }
.bnf-list .start{ font-size: 1em;  }
.bnf-list .shop-link{ width: 100%; font-size: 0.666em; padding: .5em 0 0 0; }

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

.bnf-list > .item-h .thumb{ width: 100%; margin: 0; padding: 0; }
.bnf-list > .item-h .thumb.np{ width: 100%; margin: 0; padding: 0 10%; }
.bnf-list > .item-h .data{ width: 100%; margin: 0 ; padding: 2em 0 0 0 ; text-align: left; }

/* music */
.cont-sub-music{ }
.cont-sub-music > .inner{ width: 90%; padding:3em 0 ; margin: 0 auto; }
.sub-subtitle.music{ width: calc(468/3000*100vw*1.5); }

.music-text{ text-align: center; margin-bottom: 2em; }

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

.cont-special-navi{ width: 100%; margin: 0 auto 1.0em auto; }
.special-navi{  }
.special-navi ul{  }
.special-navi ul li{ margin: .25em .25em; }
.special-navi ul li.spc-sp{ display: block; }
.special-navi ul li a{ padding: 1.0em 1.5em ; }
.special-navi ul li a span{ font-size: 1.0em; }
.special-navi ul li.crt a{ transform: scale(1.0,1.0); }



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

}