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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html,body{ min-height:100%; position: relative; }
body{ color: #000; background: url("../images/common/background-brown.webp"); background-size: 100%; }

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

.part-background{ position: absolute; width: 100%; min-height:100%; overflow: hidden; }
.part-foreground{ position: absolute; width: 100%; min-height:100%; overflow: hidden; z-index: 999; pointer-events: none; }
.part-header{ position: relative; z-index: 500; }
.part-body{ position: relative; z-index: 1; }
.part-footer{ position: relative; z-index: 2; }

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

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

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

/* header */
.part-header{ width: 100%; height: 100%; padding-top: 6vw; position: absolute; pointer-events: none; }
.part-header:before{content:""; width: 100%; height: 100%; position: absolute; top:0; left:0; background: rgba(218, 201, 180, 0.95); visibility: hidden; opacity: 0; transition: all .2s ease 0s; pointer-events: all; }
.cont-global-logo{ display: none; }
.cont-global-navi{ width: calc(2000/3000*100vw); position: relative; margin: 0 auto; }
.cont-global-navi{ display: none; }

.global-navi{ width:100%; padding: calc(80/3000*100vw) calc(118/3000*100vw*6 - 8/3000*100vw) calc(80/3000*100vw*2 - 6/3000*100vw) 0; margin: 0 ; position: relative; }
.global-navi > ul{ display: flex; flex-wrap: wrap; justify-content: flex-start; flex-direction: row-reverse; list-style-type: none; padding: 0; margin: 0; position: relative; }
.global-navi > ul > li{ display: block; width: calc(118/3000*100vw); padding: 0 ; margin: 0 0 calc(80.0/3000*100vw) calc(117.0/3000*100vw); position: relative;}
.global-navi > ul > li a{ width: 100%; padding: 0; display: block; line-height: 1; position: relative; transform-origin: center center; pointer-events: all; transition: all .1s ease-out 0s; }
.global-navi > ul > li a:hover{ }
.global-navi > ul > li a:hover:before{ content:""; width: calc(27/3000*100vw); height: calc(288/3000*100vw); background: url("../images/navi/marker.png") no-repeat center center; background-size: contain; position: absolute; top:0.5vw; right:-1vw; }
.global-navi > ul > li a.cs{ opacity: .3; pointer-events: none;  }
.global-navi > ul > li a.hdn{ display: none;  }

.cont-sp-btn{ display: block; color:#000; width: calc(190/3000*100vw); position: absolute; top:1.0vw; left: 13vw; z-index: 2; pointer-events: all; }
.top-page .cont-sp-btn{ left:.2vw; }


.cont-sp-btn a{ display: block; line-height: 0; color:#fff; }
.cont-sp-btn svg{ fill: currentColor; }
.cont-sp-btn .sp-navi-open{ display: block; }
.cont-sp-btn .sp-navi-close{ display: none;  }
.spmenu-on .cont-sp-btn .sp-navi-open{ display: none; }
.spmenu-on .cont-sp-btn .sp-navi-close{ display: block; }

.spmenu-on .cont-global-navi{ display: block; }
.spmenu-on .part-header:before{ visibility: visible; opacity: 1; }


/* body */
.part-body{ position: relative; display: block; margin: 0; }
.part-body-side{ display: none; }
.part-body-main{ position: relative; width: 100%; background: url("../images/common/background-blue.webp"); background-size: 100%; }

.cont-upper{ position: relative; }
.sub-page .cont-upper{ display: none; }
.cont-middle{ position: relative; }
.sub-page .cont-middle{ }
.cont-bottom{ position: relative; }

.sub-logo{ width: calc(653/3000*100vw); position: relative; margin: 0 auto; padding: 3vw 0 3vw 0; }

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

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

.sub-subtitle{ font-size: 1em; width: calc(218/3000*100vw); margin: 0; z-index: 2; position: absolute; top:0; right: 13vw; }
.sub-subtitle > span{ }

.blocktitle{ font-size: 1em; line-height: 1; margin: 0 auto 1.5em auto; text-align: center; z-index: 2; position: relative; }
.blocktitle > p{ display: inline-block; padding: .5em; background-color: #000; margin: 0; color: #FFF; letter-spacing: .1em; }




/* footer */
.part-footer{ position: relative; }
.cont-global-footer{ width: 100%; margin: 0 auto; padding: 4vw 0 2vw 0 ; position: relative; text-align: center; }
.cont-global-footer:before{ content:""; width: 100%; height: calc( 175/3000 * 100vw ); position: absolute; top:-1.5vw; left:0; background:url("../images/common/footer-line.png") no-repeat center center; background-size: contain; pointer-events: none; }

.footer-pagetop{ width: calc( 200/3000 * 100vw ); height: calc( 269/3000 * 100vw ); position: fixed; bottom:3vw; right: 3vw; z-index: 10; margin: 0; }
.footer-pagetop a{ display: block; position: relative; width: 100%; min-height: 100%; background:url("../images/common/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(-2vw); transform: translateY(-2vw);} 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}}
@keyframes anm-pagetop-btn { 0% { opacity: 0; -webkit-transform: translateY(-2vw); transform: translateY(-2vw);} 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: 2vw 0; position: relative; }
.footer-logo{ width: calc( 282/3000 * 100vw ); margin: 0 auto 2vw auto; position: relative; }
.footer-copyrihgt p{ font-size: .9em; letter-spacing: .1em; 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(0,0,0,.05); font-weight: normal; text-align: inherit; vertical-align: top; text-align: left; }
.table-a td{ padding:0.5em; background-color:rgba(0,0,0,.025); vertical-align: top; }

.frame-a{ background-color:#FFF; padding: .2em;}
.frame-a > .dbl-l{ border:#000 solid 1px; }

.frame-b{ background-color: rgba(122, 76, 49, 0.2); padding: .5em; }
.frame-b2{ background-color: rgba(122, 76, 49, 0.2); padding: .176vw; }
.frame-b3{ background-color: rgba(122, 76, 49, 0.2); padding: 1px; }

.sep-a{ width: 100%; height: 1px; border-bottom: #000 dashed 1px; margin: 1em 0; }

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

.frame-g0{ background-color: #FFF; border:#7a4c31 solid .333vw; position: relative; padding: calc(.666vw + .176vw ); }
.frame-g0 > .bg{ width: calc(100% - .666vw * 2 ); min-height: calc(100% - .666vw * 2 ); border:#7a4c31 solid .176vw; position: absolute; top:.666vw; left:.666vw;); }

.frame-g1{ background-color: #FFF; border:#7a4c31 solid .333vw; position: relative; padding: calc(.666vw + .176vw ); }
.frame-g1 > .bg{ width: calc(100% - .666vw * 2 ); min-height: calc(100% - .666vw * 2 ); border:#7a4c31 solid .176vw; position: absolute; top:.666vw; left:.666vw; background: #FFF url("../images/common/frame-g1-bg.png") repeat left -0.6vw; background-size: auto calc( 116/3000 * 100vw ); }

.frame-g2{ background-color: #FFF; border:#7a4c31 solid .333vw; position: relative; padding: calc(.333vw + .176vw ); }
.frame-g2 > .bg{ width: calc(100% - .333vw * 2 ); min-height: calc(100% - .333vw * 2 ); border:#7a4c31 solid .176vw; position: absolute; top:.333vw; left:.333vw; background: #FFF url("../images/common/frame-g2-bg.webp") no-repeat right top; background-size: 100%; }

/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 3vw; }
.content-entry-wrap{ margin-bottom: 3vw; }
.content-entry{ padding: 0 2.5vw 2.5vw 2.5vw; }
.content-entry .entry-head{ margin-bottom: 0; position: relative; }
.content-entry .entry-date{ font-size: 1em; margin-bottom: .3vw; pointer-events: none; }
.content-entry .entry-date > span{ font-size: 0.8em; font-weight: bold; color: #9d2927; line-height: calc( 88/3000 * 100vw ); letter-spacing: .1em; margin-bottom: 0;}
/* .content-entry .entry-title{ padding: 1em 0 3.5em 0; margin-bottom: 0; position: relative; background: url("../images/news-sep.png") no-repeat center bottom; background-size: 10em; } */
.content-entry .entry-title{ padding: 0 0 0 2.5vw; margin-bottom: 1.8vw; position: relative; background: url("../images/sub-news-head-marker.png") no-repeat left .5vw; background-size: auto calc( 88/3000 * 100vw ); }
.content-entry .entry-title > span{ font-weight: bold; font-size: 1.333em; line-height: calc( 116/3000 * 100vw ); }

.content-entry .entry-body{ padding: 1.5em; font-size: 1.066em; line-height: 1.8; background: rgba(255, 255, 255, 0.9); border:#dac9b4 solid .176vw; }


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

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

/* 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{ position: relative; }
.cont-top-visual img{ width: 100%; height: auto; }
.cont-top-visual .kv-container{ position: relative; margin: 0 auto; padding: 0; overflow: hidden; }

.kv-container > div{ position: absolute; top:0; }
.kv-container .grp{ position: relative; top:inherit; display: none; }
.kv-container .grp.on{ display: block; }
.kv-container .grp > div{ position: absolute; top:0; }
.kv-container .grp .vis-grp{ position: relative; width: calc(2633/3000*100vw); margin: 0 auto 0 calc(100/3000*100vw); }
.kv-container .grp .vis-grp .bg{ position: relative; }
.kv-container .grp .vis-grp .vis{ position: absolute; top:0; }
.kv-container .grp .vis-grp .catch{ position: absolute;  }

.kv-container .badge{ width: calc(550/3000*100vw); position: absolute; top:45vw; right:calc(70/3000*100vw) ;}
.kv-container .logo{ width: calc(332/3000*100vw); position: absolute; top:0; right:calc(100/3000*100vw) ; }
.kv-container .oa{ width: calc(200/3000*100vw); position: absolute; top:0; top:2.0vw; right:calc(460/3000*100vw) ; }

.grp1 .catch{ width: calc(119/3000*100vw); top:3vw; left:5vw;}
.grp2 .catch{ width: calc(85/3000*100vw); top:3vw; left:5.5vw; }
.grp3 .catch{ width: calc(120/3000*100vw); top:3vw; left:5.5vw; }


.vis-switch-container{ padding: 1em 0 0 calc(100/3000*100vw); margin: 0; position: relative;  pointer-events: none; z-index: 2; }
.vis-switch{ display: flex; flex-wrap: wrap; justify-content: flex-start; }
.vis-switch > div{ width: calc(326/3000*100vw); margin-right: 1em; pointer-events: auto; line-height: 0; }
.vis-switch > div a{  }
.vis-switch > div.on a{ opacity: .6; pointer-events: none; }

/* #Foreground .opening{ display: none; } */
#Foreground .opening{ position: fixed; overflow: hidden; pointer-events: all; }
#Foreground .opening .op-paper{ width: 100%; height: 100vh; position: absolute; top:0; background-color: #000; padding: 0; z-index: 1; opacity: 1; }
#Foreground .opening .op-paper > .bg{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: #FFF url("../images/common/frame-g3-bg.png") repeat left 0; background-size: auto calc( 80/3000 * 100vw ); }
#Foreground .opening .op-cont{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; z-index: 2; }
#Foreground .opening .op-cont .anm-part{ position: relative; width: calc(254/3000*100vw); height: calc(1407/3000*100vw); line-height: 0; }
#Foreground .opening .op-cont .anm-part .logo{  width: 100%; position: relative; margin: 0 auto;}
#Foreground .opening .op-cont .anm-part .logo-k{ width: 100%; position: relative;  }
#Foreground .opening .op-cont .anm-part .logo-w{ width: 100%; position: absolute; top:0; left:0; }

.init #Foreground .opening .op-paper > .bg{ opacity: 0; }
.init #Foreground .opening .op-cont .anm-part .logo{ opacity: 0; transform: scale(1.1) rotateY(0deg) ; }
.init #Foreground .opening .op-cont .anm-part .logo-k{ opacity: 0; }

.s1 #Foreground .opening .op-cont .anm-part .logo{ opacity: 1; transform: scale(1) rotateY(0deg) ; transition: all .9s ease-out 0s; }

.s2 #Foreground .opening .op-cont .anm-part .logo-k{ opacity: 1; transition: all .5s ease-in-out 0s; }
.s2 #Foreground .opening .op-cont .anm-part .logo-w{ opacity: 0; transition: all .5s ease-out 0s; }
.s2 #Foreground .opening .op-paper > .bg{ opacity: 1; transition: all .5s ease-out .7s; }

.s5 #Foreground .opening{ opacity: 0; transition: all .5s ease-out .3s; }
.s6 #Foreground .opening{ display: none; }

.init .kv-container .grp .vis-grp{ opacity: 0; transform: scale(1.5,1.5); }
.init .kv-container .badge{ opacity: 0; transform: translateY(-20%); }
.init .kv-container .oa{ opacity: 0; transform: translateY(-20%); }
.init .kv-container .logo{ opacity: 0; transform: translateY(-20%); }

.s6 .kv-container .grp .vis-grp{ opacity: 1; transform: scale(1,1); transition: all .8s ease-in-out .1s; }
.s6 .kv-container .badge{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .2s;}
.s6 .kv-container .oa{ opacity: 1; transform: translateY(0); transition: all .5s ease-out .2s;}
.s6 .kv-container .logo{ opacity: 1; transform: translateY(0); transition: all .5s 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; }


/* news twitter */
.cont-top-news-twitter{ width: calc(2800/3000*100vw); padding: 1vw 0; margin: 0 auto;  }
.cont-top-news-twitter > .inner{ padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse; align-items:stretch; }
.cont-top-news,
.cont-top-twitter{ width: calc(1330/3000*100vw);}
.top-news-twitter-frame{  }
/* news */
.cont-top-news{  }
.top-news-container{ width: 100%; height: 100%; padding: 0; overflow: hidden; }
.top-news-container dl{ font-size: 1.0em; margin-bottom: 1em; padding: 1em 8em 1em 2em; background-color: #f2e7d9; border-left: #FFF solid .333em; position: relative; }
.top-news-container dl:before{ content:""; width: calc(100% - .333vw ); min-height: 100%; border-left:#FFF solid .176vw; position: absolute; top:0; left:.333vw; }
.top-news-container dl:last-child{ margin: 0;}
.top-news-container dl dt{ font-weight: normal; color: #9d2927; margin: 0 0 .5em 0; padding: 0; letter-spacing: 0.05em; line-height: 1; font-size: 1em; position: relative; }
.top-news-container dl dd{ font-size: 1.0em; line-height: 1.8; letter-spacing: 0.05em; color: #000; margin: 0; position: relative; }
.top-news-container dl dd a,
.top-news-container dl dd a:visited{ text-decoration: none; color: inherit; }
.top-news-container dl dd a:hover{ text-decoration: underline; color: inherit; }
/* twitter */
.cont-top-twitter{ padding: 1em; background-color: #f2e7d9; border-left: #FFF solid .333em; position: relative; }
.cont-top-twitter:before{ content:""; width: calc(100% - .333vw ); min-height: 100%; border-left:#FFF solid .176vw; position: absolute; top:0; left:.333vw; }
.twitter-widget-container{ width: 82%; height: 100%; position: relative; overflow: hidden; }
.twitter-widget-container iframe{ min-height: 100%; }
.twitter-timeline-container{ padding: 0  ; text-align: center; padding: 0; }
.tw-link-btn{ display: inline-block; background-color: #000; color: #FFF; padding: 1em 2em; border-radius: 1em; text-decoration: none; }
.tw-link-btn:hover{ color: #FFF; text-decoration: none; }

/* top-movie */
.cont-top-movie{ margin-bottom: 4vw; position: relative; }
.cont-top-movie > .inner{ padding: 3vw 0; }

.top-movie-bg{ width: 100%; height: 56.25vw; background-color: #000; position: absolute; top:0; left:0; z-index: 1; }
.top-movie-bg:before{ content:""; width: 100%; height: 2vw; position: absolute; top:-0.1px; left:0; z-index: 3; background: url("../images/top-movie-mask-upr.png") no-repeat center bottom; background-size: 100%; }
.top-movie-bg:after{ content:""; width: 100%; height: 3vw; position: absolute; bottom:0; left:0; z-index: 3; background: url("../images/top-movie-mask-btm.png") no-repeat center top; background-size: 100%; }
.top-movie-bg .dot{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: url("../images/top-movie-dot.png") repeat left top; pointer-events: none; }
.top-movie-bg .blk{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: rgba(0, 0, 0, 0.5); pointer-events: none; }

.top-movie-list{ width: calc(2200/3000*100vw); position: relative; margin: 0 auto .5em auto; filter: drop-shadow(0 0 .25em #000); z-index: 2; }
.top-movie-list .bg{ position: relative; z-index: 1; opacity: 0; }
.top-movie-list .thm{ opacity: 0; visibility: hidden; position: absolute; top:0; left:0; pointer-events: none; transition: all .25s ease-in-out 0s; z-index: 2; }
.top-movie-list .thm.on{ opacity: 1; visibility: visible; pointer-events: all; }
.top-movie-list .thm > a{ position: relative; display: block; background-color: transparent; pointer-events: auto; }
.top-movie-list .thm > a::after{ content:""; position: absolute; display: block; width:100%; height:100%; background: url("../images/movie-play-btn.png") no-repeat center center; background-size: calc(220/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(220/3000*100vw*1.1); }

/* .top-movie-navi{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; filter: drop-shadow(0 0 .25em #000); position: relative; z-index: 2; }
.top-movie-navi .thm{ width: calc(340/3000*100vw); margin: .5em; background-color: #000; }
.top-movie-navi .thm > a{ opacity: 0.5; }
.top-movie-navi .thm.crt{  }
.top-movie-navi .thm.crt > a{ opacity: 1; pointer-events: none; } */


.top-movie-navi{ width: 60%; margin: 0 auto; filter: drop-shadow(0 0 .25em #000); position: relative; z-index: 2; }
.top-movie-navi .thm{  margin: .5em; background-color: #000; }
.top-movie-navi .thm > a{ opacity: 0.5; }
.top-movie-navi .thm.crt{  }
.top-movie-navi .thm.crt > a{ opacity: 1; pointer-events: none; }

.top-movie-cursor{ position: absolute; width: 98%; bottom:7vw; left: 0; right: 0; margin: 0 auto; pointer-events: none; z-index: 2; }
.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(116/3000*100vw); height: calc(214/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.png") no-repeat center center; background-size: 80%; transform-origin: center center; }
.top-movie-cursor ul li a,
.top-movie-cursor ul li a:hover{ text-decoration: none; }
.top-movie-cursor ul li span:hover{ transform: scale(1.1,1.1);}
.top-movie-cursor ul li.left span{ transform: scale(-1,1); }
.top-movie-cursor ul li.left span:hover{ transform: scale(-1.1,1.1); }
.top-movie-cursor ul li.home span{ background-image: url("../images/common/back-btn-wh.png");  background-size: 100%; }
.top-movie-cursor ul li.off{ pointer-events: none; opacity: .5; }

/* .top-movie{ position: relative; width:100%; margin: 0 auto; }
.top-movie .thm{ padding: 0; transform-origin: center center; position: relative; text-align: center; }
.top-movie .thm img{ }
.top-movie .thm{ mask-image: url("../images/top-movie-mask.png"); mask-repeat: no-repeat; mask-position: 0 0; mask-size: 100%;
 -webkit-mask-image: url("../images/top-movie-mask.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0; -webkit-mask-size: 100%;}
.top-movie .thm > a{ position: relative; display: block; background-color: transparent; pointer-events: auto; }
.top-movie .thm > a::after{ content:""; position: absolute; display: block; width:100%; height:100%; background: url("../images/movie-play-btn.png") no-repeat center center; background-size: calc(220/3000*100vw); transform-origin: center center; pointer-events: none; top:0; left: 0; right: 0; margin: 0 auto; opacity: 1;  }
.top-movie .thm > a:hover::after{ background-size: calc(220/3000*100vw*1.1); }
.top-movie .thm > a .dot{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: url("../images/top-movie-dot.png") repeat left top; pointer-events: none; }

.top-movie .thm.sp{ display: none;} */


/* top-special */
.cont-top-special{ padding-bottom: 4vw;  }
.cont-top-special > .inner{ width: 100%; padding: 0; margin: 0 auto; background: url("../images/common/background-brown.webp"); background-size: 100%; }

/* .top-subtitle.special{ width: calc(448/3000*100vw); margin: 0 auto; right: 0; left:0;  } */
.top-subtitle.special{ right: 5vw; }

.special-container{ padding: 2vw 0 2vw 0; color: #FFF; position: relative; text-align: center; }

.special-list.v1{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  }
.special-list .sep{ width: 100%; height: 1px; }
.special-list .thm{ width: 25%; padding: .5em; }

.special-list-cursor{ position: absolute; width: 98%; bottom:5.5vw; left: 0; right: 0; margin: 0 auto; pointer-events: none; z-index: 2; }
.special-list-cursor ul{ display: flex; justify-content: space-between; margin: 0; padding: 0; list-style-type: none; }
.special-list-cursor ul li{ display: block; width:calc(116/3000*100vw); height: calc(214/3000*100vw); position: relative; pointer-events: all; cursor: pointer; }
.special-list-cursor ul li span{ display: block; width:100%; height: 100%; background: url("../images/common/cursor.png") no-repeat center center; background-size: 80%; transform-origin: center center; }
.special-list-cursor ul li a,
.special-list-cursor ul li a:hover{ text-decoration: none; }
.special-list-cursor ul li span:hover{ transform: scale(1.1,1.1);}
.special-list-cursor ul li.left span{ transform: scale(-1,1); }
.special-list-cursor ul li.left span:hover{ transform: scale(-1.1,1.1); }
.special-list-cursor ul li.home span{ background-image: url("../images/common/back-btn-wh.png");  background-size: 100%; }
.special-list-cursor ul li.off{ pointer-events: none; opacity: .5; }


/* top-onair */
.cont-top-onair{ margin-bottom: 4vw;  }
.cont-top-onair > .inner{ width: calc(2400/3000*100vw); padding: 0; margin: 0 auto; background-color: rgba(0, 0, 0, 0.096); }
.top-subtitle.onair{ right: 5vw;}
.onair-container{ padding: 4vw 0; color: #FFF; position: relative; text-align: center; }

.onair-catch{ font-size: 1.6em; font-weight: bold; letter-spacing: .1em; margin-bottom: .5em; }
.onair-catch > span{ color:#ff0000;}
.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: #fff; border: #fff 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; color:#000; background-color: #FFF; border:#7a4c31 double 3px; border-radius: 0; }
.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:#9d2927;}
.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: #fff; background-color: #e93922; }
a.onair-list:hover .name{ color: #fff;  }

.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: #fff; border-bottom: #FFF double 3px; border-radius: 0; }

.onair-list-il-container{ width: 90%; 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.25%; display: flex; align-items: center; justify-content: center; color:#9d2927; padding: .8em; color:#000; background-color: #FFF; border:#7a4c31 double 3px; border-radius: 0; text-decoration: none; }
/* .onair-list-il > a::before{ content:"> "; margin-right: .25em; } */
.onair-list-il > a span{ display: inline-block; font-size: 1.0em; }
.onair-list-il > a.cs{ pointer-events: none; }
.onair-list-il > a:hover{ background-color: #e93922; color: #fff;}


/* introduction */
.cont-top-intro{ margin-bottom: 4vw; }
.cont-top-intro > .inner{ width: calc(2400/3000*100vw); padding: 0; margin: 0 auto; }
.top-subtitle.intro{ right: 5vw; }

.intro-container{ padding: 4.6vw 2vw 8vw 2vw;}
.intro-container{ background-color: #FFF; border:#7a4c31 solid .333vw; position: relative; padding: calc(.666vw + .176vw ); }
.intro-container > .bg{ width: calc(100% - .666vw * 2 ); min-height: calc(100% - .666vw * 2 ); border:#7a4c31 solid .176vw; position: absolute; top:.666vw; left:.666vw; background: #FFF url("../assets/intro/bg.png") repeat left -0.6vw; background-size: cover; }

.intro-text{ position: relative; z-index: 3; width: calc(1264/3000*100vw); padding: 4em 0; margin: 0 auto ; }

/* staffcast */
.cont-top-staffcast{ margin-bottom: 4vw; }
.cont-top-staffcast > .inner{ width: calc(2400/3000*100vw); padding: 0; margin: 0 auto; }
.top-subtitle.staffcast{ right: 5vw; }

.staffcast-container{ padding: 4.6vw 4vw 4.6vw 4vw;}

.staffcast-label{ text-align: center; margin-bottom: 2em; letter-spacing: .1em; }
.staffcast-label > p{ display: inline-block; padding: .25em .5em; border:#000 double 3px; border-radius: .25em; font-size: 1.333em; font-weight: 600; line-height: 1; }
.staffcast-label > p span{ color:#e93922; }

.staffcast-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-list.staff{ width: 90%; margin: 0 0 0 auto; }
.staffcast-list .list-item.full{ width: 100%; }
.staffcast-list .list-item.half{ width: 50%; }
.staffcast-list .list-item.third{ width: 33.33%; }
.staffcast-list .list-item.quarter{ width: 25%; }
.staffcast-list .list-item.fifth{ width: 20%; }

.staffcast-list .staff-col{ width: 48%; position: relative; margin: 0; }
.staffcast-list .staff-col:first-child{ margin-right: 4%; }
.staffcast-list .list-item{ width: 100%; position: relative; display: flex; flex-wrap: wrap; flex-direction: column; margin-bottom: 2em; }
.staffcast-list.staff .list-item{ flex-direction: row ; justify-content: flex-end; text-align: left; margin-bottom: 1em; }
.staffcast-list.cast .list-item{ margin-bottom: 3em; }
.staffcast-list .pos{ display: block; font-size: 1.333em; font-weight: bold; letter-spacing: .05em;  margin-bottom: .4em; line-height: 1; }
.staffcast-list.staff .pos{ width: 49.9%; margin-bottom: inherit; margin-bottom: 0; }

.staffcast-list .name{ display: inline-block; font-size: 1.333em; font-weight: bold; letter-spacing: .05em; margin-bottom: 0; line-height: 1.5; }
.staffcast-list.staff .name{ width: 50.1%; display: block; margin-bottom: .5em; line-height: 1; }

.staffcast-list .exname{ display: block; font-size: .8em; letter-spacing: .1em; padding-top: .5em; margin-bottom: 0; line-height: 1; }
.staffcast-list .org{ display: block; font-size: .6em; font-weight: normal; margin-top: .4em; }
.staffcast-list .eng{ color: #9d2927; display: block; font-size: .6em; font-weight: normal; margin-top: .4em; }

.staffcast-list .cmt{ display: inline-block; width: 2.4em; position: absolute; top:-1.25em; left:calc(50% + 3.25em); text-decoration: none; pointer-events: auto; }
.staffcast-list .cmt:hover{transform: scale(1.1); text-decoration: none; cursor: pointer; }

.staffcast-list .cmt.ex1{ top:-.25em; left:calc(50% + 9.0em);}

.staffcast-list .list-item.sep-pc{ width: 100%; height: 1px; margin: 0; padding: 0; }
.staffcast-list .list-item.sep-sp{ display: none; }

.cont-modal.cmt{ width: 66vw;  }
.comment-frame{ padding: 3em;  }
.comment-frame > div{ }
.comment-frame .pdg{ padding: 5em 3em; color:#505456; letter-spacing: .05em; }


/* top-story */
.cont-top-story{ margin-bottom: 4vw; position: relative; }
.cont-top-story > .inner{ padding: 3vw 0; }
.top-subtitle.story{ top:3vw; right: 5vw; }

.top-story-bg{ width: 100%; height: 56.25vw; height: 100%; background-color: #000; position: absolute; top:0; left:0; z-index: 1; }
.top-story-bg:before{ content:""; width: 100%; height: 2vw; position: absolute; top:-2px; left:0; z-index: 3; background: url("../images/top-movie-mask-upr.png") no-repeat center bottom; background-size: 100%; }
.top-story-bg:after{ content:""; width: 100%; height: 3vw; position: absolute; bottom:-2px; left:0; z-index: 3; background: url("../images/top-movie-mask-btm.png") no-repeat center top; background-size: 100%; }
.top-story-bg .dot{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: url("../images/top-story-dot.png") repeat left top; pointer-events: none; }
.top-story-bg .blk{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: #f2e7d9; pointer-events: none; }

#StoryBgSlider{ width: 100%; min-height: 100%; overflow: hidden; position: absolute; top:0; left:0; background-size: cover; background-position: center center; opacity: 1;   mix-blend-mode: overlay; }
/* #StoryBgSlider{ background-image: url("../assets/story/1/1.webp"); } */

.story-container{ min-height: 40vw; position: relative; padding-top: 2em; padding-bottom: 2em; }

#StoryCont{ position: relative; z-index: 3; }
.cont-story-navi{ width: 52.5%; margin: 0 auto 5em auto; position: relative; text-align: center; z-index: 3; }
.story-navi{ width: 100%; display: inline-block; margin: 0 auto;  padding: .5em 3em; border-radius: 0; background-color: rgba(0,0,0,.85); position: relative; z-index: 1; }
.story-navi:before,
.story-navi:after{ content:""; display: block; width: 1.6em; height: 3.2em; position: absolute; top:0.2em; left:0; background: url("../images/top-story-navi-marker.png") no-repeat center center; background-size: auto 80%; z-index: 2; pointer-events: none; }
.story-navi:after{ left:inherit; right: 0; transform: rotate(180deg); }
.story-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.story-navi ul li{ display: block; margin: .25em .4em; padding:0; text-align: center; font-weight: 600; }
/* .story-navi ul li:after{ display: inline-block; content:"／"; font-size: 1.2em; line-height: 1; color: #fff; padding: 0 .25em; } */
.story-navi ul li.sep-pc{ width: 100%; height: 1px; padding: 0; margin: 0; }
.story-navi ul li.sep-pc:after{ display: none; }
.story-navi ul li.last-pc:after{ display: none; }
.story-navi ul li.sep-sp{ display: none; }
.story-navi ul li a{ display: inline-block; color: #fff; padding: .4em; transition: all .1s ease 0s; text-decoration: none; position: relative; line-height: 1; letter-spacing: .1em; }
.story-navi ul li a span{ font-size: 1.3em; position: relative;  }
.story-navi ul li a:hover{ color: #ff0000; }
.story-navi ul li.crt a{ pointer-events: none; color: #000; background-color: #FFF; }
.story-navi ul li.cs a{ pointer-events: none; color:#aeaeae; }

.cont-story-data{ width:100%; margin: 0 auto; position: relative; z-index: 2;  }
.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; padding: 0 ; }

.story-data .ep-slider-sceneImage{ width: calc(1600/3000*100vw); margin:0 auto 5em 3em ; position: relative; filter: drop-shadow(0 0 .5em rgba(0, 0, 0, 0.5)); z-index: 2;  }
.story-data .ep-slider-sceneImage{ }
.story-data .ep-slider-sceneImage .sld{ position: relative; padding: .5em; text-align: center; background-color: #FFF; }
.story-data .ep-slider-sceneImage .sld img{  }

.ep-slider-dots{ text-align: center; pointer-events: auto; position: absolute; top:31.5vw; left:0; right: 0; margin: 0 auto;}
.ep-slider-dots ul{ display: inline-block; position: relative; 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: #000; font-size: 1.0em; text-indent: 0px; position: absolute; top: 0; left: 0;}
.ep-slider-dots li.slick-active button:before { content: "◆";}

.ep-text-group{ width: calc(1160/3000*100vw); margin:0 ; padding: 2.5em 0 0 0; position: absolute; top:0; left:55vw; z-index: 2;  }

.ep-title-container{ text-align: center; width: inherit; margin: 0 auto 1.0em auto; position: relative; z-index: 2; }
.story-data .ep-number{ text-align: center; margin-bottom: 1em; letter-spacing: .2em; }
.story-data .ep-number > p{ display: inline-block; padding: .25em .5em; border:#000 double 3px; border-radius: .25em; font-size: 1.333em; font-weight: 600; line-height: 1; }
.story-data .ep-number > p span{ color:#ff0000; }
.story-data .ep-title{ display: inline-block; color:#000; font-size: 2.4em; font-weight: 600; margin: 0 0 .75em 0; line-height: 1.5; letter-spacing: .1em; position: relative; }
.story-data .ep-title > p{ margin-bottom: 0; }
.story-data .ep-title > p span{ color:#ff0000; }
.story-data .ep-title [data-ruby]::before { top: -1.0em; transform: scale(0.4,0.45); }

.story-data .ep-text{  color:#000; margin-bottom: 2em; }
.story-data .ep-text p{ font-size: 1.2em; font-weight: 600; 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{ display: inline-block; padding: 0 1em; margin: 0 auto 2em auto; position: relative; z-index: 2; }
.story-data .ep-staff p{ color:#303030; font-size: .8em; line-height: 1.8; letter-spacing: .1em; display: inline; margin: 0; }

.story-data .ep-trailer{ width: 20em; margin: 0 auto auto 20em; position: relative; z-index: 2; pointer-events: all; filter: drop-shadow(0 0 .5em rgba(0, 0, 0, 0.5)); }
.story-data .ep-trailer a{ display: block;   position: relative; line-height: 1; }
.story-data .ep-trailer .cap{ width: 9em; display:block; text-align: center; font-size: .8em; letter-spacing: .1em; font-weight: bold; margin: 0; position: absolute; bottom:-.75em; left:0; right: 0; margin: 0 auto; padding: .5em 1em; background-color:#000; color: #fff; }
.story-data .ep-trailer .cap span{ color: #ff0000; }

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

/* character */
.cont-top-character{ margin-bottom: 4vw; }
.cont-top-character > .inner{ width: calc(2400/3000*100vw); padding: 0; margin: 0 auto; }
.top-subtitle.character{ right: 5vw; }

.character-container{ padding: 4.6vw 2vw 4.6vw 2vw; background: url("../images/common/frame-p1-bg.png") no-repeat center top; background-size: 100% 100% ;  }

#CharaCont{ position: relative; }
.cont-character-navi{ margin: 0 auto; position: relative; z-index: 5; }
.character-navi{ width: 95%; margin: 0 auto 1em 0; }
.character-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.character-navi ul li{ width: 9vw; display: block; margin: 0; padding:.5em; }
.character-navi ul li a{ display: block; position: relative; transform-origin: center center; pointer-events: all; cursor: pointer; opacity: .5; }
.character-navi ul li a:hover{ text-decoration: none;  transform: scale(1.05); }
.character-navi ul li.crt a{ pointer-events: none; opacity: 1; }
.character-navi ul li.sep,
.character-navi ul li.sep-pc,
.character-navi ul li.sep-sp{ width: 100%; height: 1px; padding: 0; }
.character-navi ul li.sep-sp{ display: none; }


.character-data{ width:100%; min-height: 55vw; position: relative; display: none; pointer-events:none;  }
.character-data .chr-img{ position: relative; z-index: 3; width: calc(640/3000*100vw); margin: 0 auto auto 1vw ;  }
#C2.character-data .chr-img{ width: calc(750/3000*100vw); margin: 0 auto auto 1vw ;  }
#C7.character-data .chr-img{ width: calc(720/3000*100vw); margin: 0 auto auto 1vw ;  }
#C8.character-data .chr-img{ width: calc(720/3000*100vw); margin: 0 auto auto 1vw ;  }
.character-data .chr-face{ position: absolute; z-index: 3; width: calc(640/3000*100vw); margin: 0; top:2vw; right: 7.5vw; }
.character-data .chr-prof{ position: absolute; z-index: 5; width: calc(780/3000*100vw); margin: 0; top:11vw; left:23vw;  }
.character-data .prof-name{ width: calc(486/3000*100vw); padding: 0; margin: 0 auto 2em auto; text-align: center; position: relative; }
.character-data .prof-text{ padding: 0; text-align: center; }
.character-data .prof-text .text{ margin: 0; font-size: 1.2em; font-weight: normal; 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: translateX(10%);}
  100% { opacity: 1; transform: translateX(0);}
}
.character-data.crt .chr-prof{ animation: anm-character-face-change .5s .05s ease-out both running; }
.character-data.crt .chr-face{ animation: anm-character-face-change .5s .05s ease-out both running; }
@keyframes anm-character-face-change {
  0% { opacity: 0; transform: translateX(-10%);}
  100% { opacity: 1; transform: translateX(0);}
}

/* comics */
.cont-top-comics{ padding-bottom: 4vw; }
.cont-top-comics > .inner{ width: calc(2400/3000*100vw); padding: 0; margin: 0 auto; }
.top-subtitle.comics{ right: 5vw; }

.comics-container{ padding: 4.6vw 2vw 4.6vw 2vw; background: url("../images/common/frame-p1-bg.png") no-repeat center top; background-size: 100% 100% ;  }
.comics-text{ text-align: center; margin-bottom: 2em; }
.comics-banner{ width: calc(748/3000*100vw); margin: 0 auto; }

.comics-tpc{ position: relative; }
.comics-tpc .tpc-img{ width: calc(408/3000*100vw); position: absolute; top:7.5vw; left:-11vw;}

.comics-list{ width: calc(1800/3000*100vw); margin: 0 auto 2em auto; }
.comics-list a{  }
.comics-list a img{  }






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

.cont-cat-navi{ width: calc(2000/3000*100%); position: relative; margin: 0 auto 1em auto;}
.cat-navi{ width: 100%; margin: 0; position: relative; }
.cat-navi > ul{ display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; list-style-type: none; padding: 0; margin: 0; position: relative; }
.cat-navi > ul > li{ display: block; padding: 0 ; margin: .25em ; letter-spacing: .1em; line-height: 1; position: relative;}
.cat-navi > ul > li.sep{ width: 100%; height: 1px; margin: 0 ; }
.cat-navi > ul > li a{ color: #000; padding: .75em 1em ; text-decoration: none; position: relative; display: block; pointer-events: auto; background: #FFF; border:#7a4c31 double 3px; }
.cat-navi > ul > li a .label{ padding-left: 1em; font-size: 1.1em; position: relative; }
.cat-navi > ul > li a .label:before{ content:"> "; margin-right: .25em; display: inline-block; position: absolute; top:.35em; left:0;}
.cat-navi > ul > li a:hover{ text-decoration: none; color: #9d2927; border-color: #9d2927; }
.cat-navi > ul > li.crt a{ text-decoration: none; color: #9d2927; border-color: #9d2927; pointer-events: none;}

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

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

.sub-news-container{ width: calc(2000/3000*100vw); margin: 0 auto; }

/* bddvd */
.cont-sub-bddvd{ }
.cont-sub-bddvd > .inner{ width: calc(2000/3000*100vw); padding: 0; margin: 0 auto; }

.sub-bddvd-container{ width: calc(2000/3000*100vw); padding: 3em 0 0 0; margin: 0 auto 3em auto; }
.bddvd-data{ margin-bottom: 5em; }
.bddvd-title{}

.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{ width: 100%; padding: .3em; margin-bottom: 1em; color: #9d2927; font-weight: bold; border:#9d2927 solid .133em; }
.bnf-list .shop::before{ content:""; }
.bnf-list .shop::after{ content:""; }
.bnf-list .shop p{ font-size: .9em; }
.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: flex; justify-content: center; align-items: center; height: 15em; 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 .data{ width: 100%; text-align: center; }
.bnf-list .excond{ font-size: 0.666em; color: #7a4c31; margin-bottom: .3em; }
.bnf-list .name{ font-size: .9em; letter-spacing: -0.05em; margin-bottom: .3em; }
.bnf-list .cond{ font-size: 0.777em; margin-bottom: .3em; background-color: #7a4c31; display: inline-block; padding: .2em .3em; color: #FFF; }
.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: 25%; margin: 0; padding: 0; }
.bnf-list > .item-h .data{ width: 75%; margin: 0 ; padding: 0 0 0 1em; text-align: left; }


/* music */
.cont-sub-music{ }
.cont-sub-music > .inner{ width: calc(2000/3000*100vw); padding: 0; margin: 0 auto; }

.sub-music-container{ width: calc(2000/3000*100vw); padding: 3em 0 0 0; margin: 0 auto 3em auto; }

.music-data{ margin-bottom: 5em; }
.music-title{}

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

.music-artist-list{ display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column; }
.music-artist-list > p{ display: inline-block; margin: .5em;  position: relative; }
.music-artist-list > p .cmt{ display: inline-block; width: 1.75em; position: absolute; top:-0.125em;  text-decoration: none; pointer-events: auto; }

.music-prof{ width: 50%; margin: 0 auto 1em auto; background-color: rgba(0,0,0,.1); color: #eea; padding: 1em; letter-spacing: .1em; position: relative; }
.music-prof::before{ content:""; width: 2em; height: 1px; background-color: #feff01; position: absolute; top:.25em; left:-.8em; transform: rotate(-45deg); }
.music-prof::after{ content:""; width: 2em; height: 1px; background-color: #feff01; position: absolute; bottom:.25em; right:-.8em; transform: rotate(-45deg); }


/* special */
.cont-sub-special{ }
.cont-sub-special > .inner{ width: calc(2000/3000*100vw); padding: 0; margin: 0 auto; }

.sub-special-container{ width: calc(2000/3000*100vw); margin: 0 auto; }

.clb-bsd-cmt-frame{ background: #FFF url("../assets/special-clb-bsd/fig-c2.webp") no-repeat 31em -7em; background-size: 30em; }
.intknk-q{ padding: 0 0 0 3.75em; color:#9d2927; font-weight: bold; display: block; position: relative; margin-bottom: .5em; }
.intknk-q::before{ content:"―――"; left:0; display: inline-block; position: absolute;}
.intknk-a{ padding: 0 0 0 3.75em; display: block; position: relative; margin-bottom: .5em; }
.intknk-a::before{ content:"センセー"; left:0; display: inline-block; position: absolute; transform: scaleX(0.8); transform-origin: left top; }
.intknk-b{ padding: 0 0 0 3.75em; display: block; position: relative; margin-bottom: .5em; }
.intknk-b::before{ content:"太宰"; left:0; display: inline-block; position: absolute; }

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

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

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

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

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

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

.part-background{ 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 */
#Background  > div{ width: 100%; min-height: 100%; position: absolute; top:0; }

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

/* header */
.part-header{ width: 100%; height: 100%; padding-top: 6vw; position: absolute; pointer-events: none; }
.cont-global-logo{ display: none; }
.cont-global-navi{ width: 90%; position: relative; margin: 0 auto; }
.cont-global-navi{ display: none; }

.global-navi{ padding: calc(80/3000*100vw*2) calc(118/3000*100vw*3*2 - 8/3000*100vw*2) calc(80/3000*100vw*4*2 - 6/3000*100vw*2) 0; }
.global-navi > ul > li{ width: calc(118/3000*100vw*2); margin: 0 0 calc(80/3000*100vw*2) calc(117.5/3000*100vw*2); }
.global-navi > ul > li a:hover:before{ width: calc(27/3000*100vw*2); height: calc(288/3000*100vw*2); top:calc(0.5vw*1.5); right:calc(-1vw*2); }

.cont-sp-btn{ display: block; color:#000; width: 10vw; position: absolute; top:1vw; left: 1vw; z-index: 2; pointer-events: all; }


/* body */

.sub-logo{ width: calc(653/3000*100vw*1.8); padding: 3vw 0 5vw 0; }
.top-subtitle{ font-size: 1em; width: calc(218/3000*100vw*1.5); margin: 0; z-index: 2; position: absolute; top:0; right: 1vw; }
.sub-subtitle{ font-size: 1em; width: calc(218/3000*100vw*1.5); margin: 0; z-index: 2; position: absolute; top:0; right: 1vw; }


/* footer */
.part-footer{ position: relative; }
.cont-global-footer{ width: 100%; padding: 4vw 0 2vw 0 ; }
.footer-pagetop{ width: calc( 200/3000 * 100vw*2 ); height: calc( 269/3000 * 100vw*2 ); position: fixed; bottom:1em; right: 1em; }
.cont-footer{ padding: 2vw 0; position: relative; }
.footer-logo{ width: calc( 282/3000 * 100vw *2 ); margin: 0 auto 4vw auto; }
.footer-copyrihgt p{ font-size: .6em; }

/* content */



.frame-g1{ background-color: #FFF; border:#7a4c31 solid .666vw; position: relative; padding: calc(.666vw + .333vw ); }
.frame-g1 > .bg{ width: calc(100% - .666vw * 2 ); min-height: calc(100% - .666vw * 2 ); border:#7a4c31 solid .333vw; position: absolute; top:.666vw; left:.666vw; background: #FFF url("../images/common/frame-g1-bg.png") repeat left -1.1vw; background-size: auto calc( 116/3000 * 100vw * 2 ); }

.frame-g2{ background-color: #FFF; border:#7a4c31 solid .666vw; position: relative; padding: calc(.666vw + .333vw ); }
.frame-g2 > .bg{ width: calc(100% - .666vw * 2 ); min-height: calc(100% - .666vw * 2 ); border:#7a4c31 solid .333vw; position: absolute; top:.666vw; left:.666vw; background: #FFF url("../images/common/frame-g2-bg.webp") no-repeat right top; background-size: 150%; }

/* 1 */
.cont-entries{ padding: 0; margin: 0 auto; padding-bottom: 6vw; }
.content-entry-wrap{ margin-bottom: 6vw; }
.content-entry{ padding: 0 3vw 3vw 3vw; }
.content-entry .entry-head{ }
.content-entry .entry-date{ font-size: 1em; margin-bottom: 1.0vw; }
.content-entry .entry-date > span{ font-size: 0.8em; line-height: calc( 88/3000 * 100vw * 2 );}
.content-entry .entry-title{ padding: 0 0 0 4vw; margin-bottom: 3.7vw; background-size: auto calc( 88/3000 * 100vw * 2 ); background-position: left 0.8vw; }
.content-entry .entry-title > span{ font-weight: bold; font-size: 1.066em; line-height: calc( 116/3000 * 100vw * 2 ); }
.content-entry .entry-body{ padding: .75em; font-size: 1.0em; line-height: 1.5; border:#dac9b4 solid .333vw; }


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

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

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

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


/* TOP-PAGE */
/* main */
.kv-container .grp > div{ position: absolute; top:0; }
.kv-container .grp .vis-grp{ position: relative; width: 100%; margin: 0 ; }

.kv-container .logo{ width: calc(332/3000*100vw*1.5); top:-2vw; right:-2vw ; }
.kv-container .oa{ width: calc(200/3000*100vw*1.5); top:64.0vw; right:2.0vw ; }

.grp1 .catch{ width: calc(119/3000*100vw*1.75); top:16vw; left:2vw;}
.grp2 .catch{ width: calc(85/3000*100vw*1.75); top:16vw; left:3vw; }
.grp3 .catch{ width: calc(120/3000*100vw*1.6); top:16vw; left:2.5vw; }

.vis-switch-container{ padding: .75em 0 0 .75em; }
.vis-switch > div{ width: calc(326/3000*100vw*2.7); margin-right: .9em; margin-bottom: .9em; }


#Foreground .opening .op-paper > .bg{ background-size: auto calc( 80/3000 * 100vw *2 ); }
#Foreground .opening .op-cont{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; }
#Foreground .opening .op-cont .anm-part{ width: calc(254/3000*100vw*2); height: calc(1407/3000*100vw*2);  }

/* news twitter */
.cont-top-news-twitter{ width: 90%; padding: .75em 0; margin: 0 auto;  }
.cont-top-news-twitter > .inner{ flex-direction: row-reverse; }
.cont-top-news,
.cont-top-twitter{ width: 100%;}
.twitter-timeline-container{ padding: 0  ; text-align: center; padding: 2em 0; }
.tw-link-btn{ display: inline-block; background-color: #000; color: #FFF; padding: 1em 2em; border-radius: 1em; text-decoration: none; }

/* news */
.cont-top-news{  margin-bottom: 6vw; }
.top-news-container{ width: 100%; height: 100%; padding: 0; overflow: hidden; }
.top-news-container dl{ margin-bottom: .5em; padding: 1em 4em 1em 1em; border-left: #FFF solid .666em; }
.top-news-container dl:before{ width: calc(100% - .666vw );border-left:#FFF solid .333vw; left:.666vw; }
.top-news-container dl:last-child{ margin: 0;}
.top-news-container dl dt{ margin: 0 0 .25em 0; }
.top-news-container dl dd{ font-size: 1.0em; line-height: 1.5;}

/* twitter */
.cont-top-twitter{ padding: 1em; border-left: #FFF solid .666em; }
.cont-top-twitter:before{ width: calc(100% - .666vw ); min-height: 100%; border-left:#FFF solid .333vw; left:.666vw; }
.twitter-widget-container{ width: 86%;  }


/* top-movie */
.cont-top-movie{ margin-bottom: 4vw; position: relative; }
.cont-top-movie > .inner{ padding: 6vw 0; }

.top-movie-bg{ width: 100%; height: calc(56.25vw * 1.3 ); background-color: #000; position: absolute; top:0; left:0; z-index: 1; overflow: hidden; }
.top-movie-bg:before{ height: 5vw; top:-0.1px; background-size: 200%; }
.top-movie-bg:after{ height:8vw; bottom:0; background-size: 200%; }

.top-movie-bg .thm{ width: 130%; margin-left: -15%; }

/* .top-movie-list{ width: 80%; margin: 0 auto .5em auto;  }
.top-movie-list .thm > a::after{ background-size: calc(220/3000*100vw*1.5);  }
.top-movie-list .thm > a:hover::after{ background-size: calc(220/3000*100vw*1.6); }

.top-movie-navi .thm{ width: 23vw; margin: .5em; } */

.top-movie-navi{ width: 75%; }

.top-movie-cursor{  width: 98%; bottom:7.5vw; }
.top-movie-cursor ul li{ width:calc(116/3000*100vw*1.5); height: calc(214/3000*100vw*1.5);  }

/* top-special */
.cont-top-special{ padding-bottom: 6vw;  }
.cont-top-special > .inner{ width: 100%; }
/* .top-subtitle.special{ width: calc(448/3000*100vw*2);  } */
.top-subtitle.special{ right: 5vw; }
.special-container{ padding: 5vw 0 5vw 0;}

.special-list.v1{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center;  }
.special-list .sep{ width: 100%; height: 1px; }
.special-list .thm{ width: 50%; padding: .5em; }
.special-list .dmmy{ display: none; }

.special-list-cursor{  width: 99%; bottom:2.5vw; }
.special-list-cursor ul li{ width:calc(116/3000*100vw*1.5); height: calc(214/3000*100vw*1.5);  }


/* .cont-top-movie{ margin-bottom: 6vw; position: relative; }
.cont-top-movie > .inner{ padding: 0; }
.top-movie .thm{ mask-image: url("../images/top-movie-mask-sp.png"); mask-repeat: no-repeat; mask-position: 0 0; mask-size: 100%;
 -webkit-mask-image: url("../images/top-movie-mask-sp.png"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 0 0; -webkit-mask-size: 100%;}
.top-movie .thm > a::after{ background-size: calc(220/3000*100vw*1.5); }
.top-movie .thm > a:hover::after{ background-size: calc(220/3000*100vw*1.6); }
.top-movie .thm.pc{ display: none;}
.top-movie .thm.sp{ display: block;} */


/* onair */
.cont-top-onair > .inner{ width: 90%; }
.top-subtitle.onair{ right: 5vw; }


.onair-catch{ font-size: 1.1em; 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: .75em;  }
.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.0em; margin-bottom: .15em; }
.onair-list .schd{ font-size: .9em; }
.onair-list .time{ font-size: .9em;  }
.onair-list .extr{ font-size: .9em; }

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

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



/* introduction */
.cont-top-intro{ margin-bottom: 6vw; }
.cont-top-intro > .inner{ width: 90%; }
.top-subtitle.intro{ right: 5vw; }

.intro-container{ padding: 4.6vw 2vw 8vw 2vw;}
.intro-container{ background-color: #FFF; border:#7a4c31 solid .666vw; position: relative; padding: calc(.666vw + .333vw ); }
.intro-container > .bg{ width: calc(100% - .666vw * 2 ); min-height: calc(100% - .666vw * 2 ); border:#7a4c31 solid .333vw; position: absolute; top:.666vw; left:.666vw; background: #FFF url("../assets/intro/bg-sp.png") no-repeat center center; background-size: cover; }

.intro-text{ position: relative; z-index: 3; width: 85%; padding: 3em 0; margin: 0 auto ; }

/* staffcast */
.cont-top-staffcast{ margin-bottom: 6vw; }
.cont-top-staffcast > .inner{ width: 90%; padding: 0; margin: 0 auto; }
.top-subtitle.staffcast{ right: 5vw; }
.staffcast-container{ padding: 10vw 2vw 8vw 2vw;}

.staffcast-label{ text-align: center; margin-bottom: 2em; letter-spacing: .1em; }
.staffcast-label > p{ display: inline-block; padding: .25em .5em; border:#000 double 3px; border-radius: .25em; font-size: 1.0em; font-weight: 600; line-height: 1; }
.staffcast-label > p span{ color:#e93922; }

.staffcast-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; }
.staffcast-list.staff{ width: 100%; margin: 0 auto; }
.staffcast-list .sep-pc{ width: 100%; height: 0; margin: 0; padding: 0; }
.staffcast-list .sep-sp{ display: none; }
.staffcast-list .list-item.full{ width: 100%; }
.staffcast-list .list-item.half{ width: 100%; }
.staffcast-list .list-item.third{ width: 100%; }
.staffcast-list .list-item.quarter{ width: 50%; }
.staffcast-list .list-item.fifth{ width: 50%; }

.staffcast-list .staff-col{ width: 90%; position: relative; margin: 0 0 0 10%; }
.staffcast-list .staff-col:first-child{ margin-right: 0; margin-bottom: 0; }
.staffcast-list .list-item{ width: 100%; margin-bottom: 2em; }
.staffcast-list.staff .list-item{ margin-bottom: 1em; }
.staffcast-list.cast .list-item{ margin-bottom: 2em; }
.staffcast-list .pos{ font-size: 1.0em; }
.staffcast-list .name{ font-size: 1.0em; }
.staffcast-list .exname{ font-size: .7em; }
.staffcast-list .cmt{ width: 2.0em; top:-1.0em; left:calc(50% + 3em);  }

.staffcast-list .cmt.ex1{ top:-.25em; left:calc(50% + 5.0em);}

.staffcast-list .list-item.sep-pc{ display: none; }
.staffcast-list .list-item.sep-sp{ display: block; width: 100%; height: 1px; margin: 0; padding: 0; }

.cont-modal.cmt{ width: 90vw; }
.comment-frame{ padding: 2em; }



/* top-story */
.cont-top-story{ margin-bottom: 4vw; position: relative; }
.cont-top-story > .inner{ padding: 6vw 0 ; }
.top-subtitle.story{ top:5vw; right: 5vw; }

.top-story-bg{ width: 100%;  background-color: #000; position: absolute; top:0; left:0; z-index: 1; overflow: hidden; }
.top-story-bg:before{ height: 5vw; top:-0.1px; background-size: 200%; }
.top-story-bg:after{height:8vw; bottom:0; background-size: 200%;}
.top-story-bg .dot{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: url("../images/top-story-dot.png") repeat left top; pointer-events: none; }
.top-story-bg .blk{ width: 100%; min-height: 100%; position: absolute; top:0; left:0; background: #f2e7d9; pointer-events: none; }

#StoryBgSlider{ width: 100%; min-height: 100%; overflow: hidden; position: absolute; top:0; left:0; background-size: cover; background-position: center center; opacity: 1;   mix-blend-mode: overlay; }
/* #StoryBgSlider{ background-image: url("../assets/story/1/1.webp"); } */

.story-container{ min-height: 190vw; position: relative; padding-top: .75em; padding-bottom: 2em; }

#StoryCont{ position: relative; z-index: 3; }
.cont-story-navi{ width: 77.5%; margin: 0 auto 2em 1em; position: relative; z-index: 3; }
.slnav .story-container{ padding-top: 2em; }
.slnav .cont-story-navi{ margin-bottom: 3em; }
.story-navi{ padding: .25em 0; }
.story-navi:before,
.story-navi:after{ content:""; display: block; width: 1.4em; height: 2.0em; top:0.3em; left:0; }
.story-navi:after{ top:inherit; bottom: 0.3em; left:inherit; right: 0; }

.story-navi ul li:after{ font-size: 1.0em; padding: 0 .25em; }
.story-navi ul li.sep-pc,
.story-navi ul li.sep-pc:after{ display: none; }
.story-navi ul li.last-pc:after{ display: inline-block;; }
.story-navi ul li.last-sp:after{ display: none; }
.story-navi ul li.sep-sp{ display: block; }
.story-navi ul li.sep-sp{ width: 100%; height: 1px; padding: 0; margin: 0; }
.story-navi ul li.sep-sp:after{ display: none; }
.story-navi ul li a span{ font-size: 1em;  }


.cont-story-data{ width:100%; margin: 0 auto; position: relative; z-index: 2;  }
.cont-story-data{  }

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

.story-data .ep-slider-sceneImage{ width: 90%; margin:0 auto 4em auto; }
.story-data .ep-slider-sceneImage .sld{ padding: .25em;  }
.ep-slider-dots{ top:55vw; }

.ep-text-group{ width:95%; margin:0 ; padding: 0; position: relative; top:inherit; left:inherit; margin: 0 auto; }
.story-data .ep-number{ text-align: center; margin-bottom: 0; letter-spacing: .2em; }
.story-data .ep-number > p{ font-size: 1.0em;  }
.story-data .ep-title{  font-size: 1.8em; }
.story-data .ep-title [data-ruby]::before { top: -1.0em; transform: scale(0.4,0.45); }

.story-data .ep-text{  color:#000; margin-bottom: 1em; }
.story-data .ep-text p{ font-size: 1em; }

.story-data .ep-trailer{ width: 20em; margin: 0 auto;  }

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


/* character */
.cont-top-character{ margin-bottom: 6vw; }
.cont-top-character > .inner{ width: 90%; }
.top-subtitle.character{ right: 5vw; }

.character-container{ padding: 8.6vw 2vw 8.6vw 2vw;  ;  }

.cont-character-navi{ margin: 0 auto 4em auto; position: relative; z-index: 5; }
.character-navi{ width: 80%; margin: 0 auto 0 0; }
.character-navi ul{ display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style-type: none; }
.character-navi ul li{ width: 17vw; display: block; margin: 0; padding:.35em; }
.character-navi ul li a{ display: block; position: relative; transform-origin: center center; pointer-events: all; cursor: pointer; opacity: .5; }
.character-navi ul li.sep-pc{ display: none; }
.character-navi ul li.sep-sp{ display: block; }

.character-data{ min-height: 55vw; }
.character-data .chr-img{ position: relative; z-index: 3; width: calc(640/3000*100vw*2); margin: 0 auto 2em 2vw ;  }
#C2.character-data .chr-img{ width: calc(750/3000*100vw*2); margin: 0 auto auto 1vw ;  }
#C7.character-data .chr-img{ width: calc(720/3000*100vw*2); margin: 0 auto auto 1vw ;  }
#C8.character-data .chr-img{ width: calc(720/3000*100vw*2); margin: 0 auto auto 1vw ;  }
.character-data .chr-face{ position: absolute; z-index: 3; width: calc(640/3000*100vw*1.75); margin: 0; top:22vw; right: 2.5vw; }
.character-data .chr-prof{ position: relative; z-index: 5; width: 100%; margin: 0; top:inherit; left:inherit;  }
.character-data .prof-name{ width: calc(486/3000*100vw*2); margin: 0 auto 1.5em auto; }
.character-data .prof-text .text{ font-size: .9em;  letter-spacing: -.025em; }
.character-data .prof-text .text [data-ruby]::before { top: -1.7em; }


/* comics */
.cont-top-comics{ padding-bottom: 6vw; }
.cont-top-comics > .inner{ width: 90%; }
.top-subtitle.comics{ right: 5vw; }
.comics-container{ padding: 4.6vw 2vw 4.6vw 2vw; }
.comics-text{  }
.comics-banner{ width: calc(748/3000*100vw*2); }
.comics-tpc .tpc-img{ width: calc(408/3000*100vw*1.5); top:20vw; left:-16vw;}
.comics-list{ width: 95%; margin-bottom: 1em; }







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

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

.cat-navi > ul > li{ margin: .25em ; }
.cat-navi > ul > li a{ padding: .5em .75em ; }
.cat-navi > ul > li a .label{ font-size: .9em; }




/* news */
.cont-sub-news{ }
.cont-sub-news > .inner{ width: 100%; }
.sub-news-container{ width: 90%; margin: 0 auto; }

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

.sub-bddvd-container{ width: 90%; margin: 0 auto; }
.bddvd-data{ margin-bottom: 3em; }
.bddvd-title{}


.bnf-list{ width: 88%; display: flex; flex-wrap: wrap; margin: 0 auto; justify-content: center; 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: 100%; 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{ padding: .3em; margin-bottom: 1em; font-weight: bold; background: url("../images/sub-news-bg.webp?v2") repeat left top; background-size: 33em; }
.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 .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 20%; }
.bnf-list > .item-h .data{ width: 100%; margin: 0 ; padding: 0 ; text-align: left; }


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

.sub-music-container{ width: 90%; margin: 0 auto; }

.music-data{ margin-bottom: 3em; }
.music-title{}

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

.sub-special-container{ width: 90%; margin: 0 auto; }

.clb-bsd-cmt-frame{ padding-bottom: 20em; background-position: 4em 21em; background-size: 25em; }
.intknk-q{ padding: 0; color:#9d2927; margin-bottom: .9em; font-weight: bold; }
.intknk-q::before{ content:""; margin-left: 0; margin-right: 0;}
.intknk-a{ padding: 0;  margin-bottom: .9em; }
.intknk-a::before{ content:"センセー："; display: block; position: relative; transform: scaleX(1);  }
.intknk-b{ padding: 0;  margin-bottom: .9em; }
.intknk-b::before{ content:"太宰："; display: block; position: relative; transform: scaleX(1);  }


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

}