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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */
body{font-family:YakuHanRPs,'M PLUS Rounded 1c', sans-serif, serif;}

/* ---- common style ---- */
a,a:visited {color: #f16900;}
a:hover,a:active {color: #601f10; }
a.ilink-fr{ color: #FFF; display: inline-block; padding: 5px; background: #7364AA; line-height: 0; margin-bottom: 10px; }
a.ilink-fr:hover{ color: #faaa00; background: #bb0000; }
.hv_fade{ opacity: 1; }
.hv_fade:hover{ opacity: 0.7; cursor: pointer; }
.ilink{ display: inline-block; padding: 0.3em 0.5em 0.2em 0.5em ; border: #f16900 solid 1px ; text-decoration: none; border-radius: .6em; font-size: 1em; font-weight: bold; }
.ilink,
.ilink:visited,
.ilink:active{ color: #f16900; }
.ilink:hover{ text-decoration: none; background-color: #f16900; color: #fff; }

/* font-color */
.ac-color1{color: #3b3b3b; }/* base color */
.ac-color2{color: #601f10; }/* brown */
.ac-color3{color: #f39800; }/* orange */
.ac-color4{color: #ffeeb7; }/* light yellow */

/* title */
.ttl1{color: #f16900; border: #f16900 solid .111em; padding: .4em; background-color: rgba(255,255,255,.7);  }
.ttl2{color: #601f10; border-bottom: #601f10 solid 1px;}
.ttl3{color: #FFF; background: #f16900; padding: .1em .3em;}
.ttl4{color: #601f10; background: #FFF; padding: .1em .3em;}

.l-line{ width: 100%; display: flex; flex-wrap: wrap; height: 100%; align-items: stretch; }
.l-line .container{ width: calc( 100% - .4em ); padding-left:.5em;  }
.l-line .ic{ width: .4em; /* height: 100%; */ display: flex; }
.l-line .ic > span{ display: block; width: 100%; /* height: 100%; */ background-color: #601f10; border-radius: .2em; }

/* table */
.table-a{ border-collapse: separate; border-spacing: 2px;}
.table-a th{ padding:0.5em; background-color:rgba(255,213,181,.8); font-weight: normal; text-align: inherit; vertical-align: top;  text-align: left; }
.table-a td{ padding:0.5em; background-color: rgba(255,255,255,.8); vertical-align: top; }

.list-a{  margin: 0 auto; display: flex; flex-wrap: wrap;  }
.list-a > div{ background-color: rgba(255,255,255,.02); width: 49%; margin: .3em .5%;   }

/* frame */
.frame-a{ background: rgba(255,255,255,0.6); box-sizing: border-box;}
.frame-b{ background: rgba(254,249,141,0.2); box-sizing: border-box;}
.frame-wp{ background: #FFF; border: #ff55be dotted 1px;}
.frame-k{ background: rgba(0,0,0,1); padding: .4em .5em;}
.frame-w{ background: rgba(255,255,255,1); padding: .4em .5em;}
.frame-img{ display: inline-block; border: rgba(80,124,251,0.3) solid 3px; box-sizing: border-box; line-height: 0; }

/* h-line */
hr.sld-brwn{ border-color: #601f10; border-width: .222em 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */ }
hr.sld-wht{ border-color: #fff; border-width: .222em 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */ }

hr.ac-line1{border-width: 0 0 .46em;border-style: solid;border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><circle fill="hsla(38, 100%, 50%, 1.0)" cx="1" cy="0.5" r="0.5"/></svg>') 0 0 100% repeat;width: 100%;}


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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- Structure ---- */
html{ height: 100%;}
body{ color: #3b3b3b; height: 100%; background:#fff467 url("../images/s3/background.webp") repeat-y center top; background-size: 100%; }
.wrapper{ width:100%; /* height: 100%; */ /* height: auto; */ position: relative; background:url("../images/s3/background-mp.webp") repeat-y center top; background-size: 100%;}
header,article,section,footer{ position: relative;  }

header{ margin-bottom: 0; }
header > .inner{ width: 100%; max-width: 1200px; margin: 0 auto;  position: relative;}
.sub-page header{ margin-bottom: 0; }
.sub-page header > .inner{ width: 100%; max-width: inherit; margin: 0 auto;  position: relative; height: 35.5vw; background: url("../images/s3/common-header-bg.webp") no-repeat center top; background-size: 100%; border-bottom: #fff467 solid 3px;}

.page-title{ width: 29em; position: absolute; bottom: 2.6em; margin: 0 auto; left: 0; right: 0; pointer-events: none; }
.page-title.off-set{ bottom: -0.3em; }
.page-title .ttl{ position: relative; text-align: center; }

article{ margin-bottom: 2em; }
article > .inner{ width: 100%; max-width: 1200px; margin: 0 auto;  position: relative;}

/* .sc-sct-ttl{ text-align: center; margin-bottom: .5em;} */


.sub-title{ width: 100%; max-width: 600px; display: block; padding: 2em 1em 0 1em; margin: 0 auto; }

footer{ width:100%; position: relative;}
footer{ text-align: center; }
footer > .inner{ width: 95%; max-width: 1140px; margin: 0 auto;  position: relative;}
.ft-copyrihgt{ font-size: 0.611em; color: #601f10;}
.ft-banner{ width: 100%; max-width: 1200px; margin: 0 auto; margin-bottom: 1em; display: flex; justify-content: center;}
.ft-banner > div{ width: 23%; margin: .5%; }
#PageTop{ width: 3.5em; margin: 0 0 1em auto; }

/* navi */
nav.global-navi{ display: block; width: 100%; max-width: 1200px; padding: 0; position: relative; top:0; z-index: 2; }
nav.global-navi .navi-body{ display: flex; align-items: flex-end; background:#f7ac00 url("../images/common-navi-bg.png") no-repeat center center ; border-radius: 0 0 1.1em 1.1em ; padding: 1.1em  1.1em ; background-size: cover; }
nav.global-navi .navi-body > div{ margin: .5% 1%; }

.sub-page nav.global-navi{ display: block; width: 100%; max-width: 1200px; padding: 0; margin: 0 auto; position: absolute; top:0; left:0; right: 0; }
.sub-page nav.global-navi .navi-body{ display: flex; align-items: flex-start; padding: .2em 1.5em 0 1.5em ; background: none;}
.sub-page nav.global-navi .navi-body > div{ margin: .5em .4% 0 .4%; }
.sub-page nav.global-navi .navi-body > div.spc{ width: 5%; }
.sub-page nav.global-navi .navi-body > div.navi-logo{ width: 30%; margin: 0 -1.5%; }

/* navi-sp */
nav.global-navi-sp{ display: block; width: 100%; padding: 0; position: relative; top:0; z-index: 2; }
nav.global-navi-sp > .inner{ background:#FFF url("../images/s3/navi/sp/bg.webp") no-repeat center top; background-size: 100%; }
nav.global-navi-sp .navi-body{ display: flex; flex-wrap: wrap; width: 100%; padding: 0 3%; margin: 0 auto 0 auto;}
nav.global-navi-sp .navi-body > div{ width: 48%; margin: 1% 1%; }
nav.global-navi-sp .navi-body > div.navi-logo{ width: 100%; margin: 0; padding: 25vw 25vw 0vw 25vw   ; text-align: center; }
nav.global-navi-sp .sp-navi-open{ display: block; padding: .5em 0; text-align: center; line-height: 0; background:#f7ac00 url(../images/common-navi-bg-sp.png) no-repeat top center ;background-size: cover; }
nav.global-navi-sp .sp-navi-open2{ display: block; margin-top: -1px; text-align: center; line-height: 0; }
nav.global-navi-sp .sp-navi-close{ display: block; position: relative; bottom:-1px; text-align: center; line-height: 0; border-bottom: #d61417 solid 2px; }
nav.global-navi-sp .navi-body.off{ display: none; }
nav.global-navi-sp .sp-navi-open.off{ display: none; }
nav.global-navi-sp .sp-navi-open2.off{ display: none; }
nav.global-navi-sp .sp-navi-close.off{ display: none; }
nav.global-navi-sp{ display: none; }

.sub-navi-stab{ width: 42.222em; margin: 0 auto; background:#f7ac00 url(../images/common-navi-bg.png) no-repeat center center ;border-radius: .6em .6em 0 0 ; padding: .3em 1.1em 0 1.1em ; background-size: 120%; position: absolute; bottom: 0; left: 0 ; right:0; }
.sub-navi-stab.off{ display: none; }
.sub-navi-stab > .inner{ margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: center; }

.sub-navi-stab > .inner > div{ width: 9.5em; padding: .2em .5em .2em .5em; margin: .2em 1% 0 1%; border-radius: .6em .6em 0 0 ; background-color: #fbd034; }
.sub-navi-stab > .inner > div.crt{ background-color: #f16900; }
.sub-navi-stab > .inner > div.cs{ background-color: #bcbcbc; opacity: .8; }
.sub-navi-stab > .inner > div.nonac{ pointer-events: none; }
.sub-navi-stab > .tab-shadow{ width: 100%; height: .666em; background: url(../images/s2/subnavi/tab-shadow.png) repeat-x center bottom; position: absolute; left: 0; bottom: 0; background-size: 979px; pointer-events: none; }

.sub-navi{ width: 96%; max-width: 960px; margin: 0 auto .5em auto; background:#f7ac00 url(../images/common-navi-bg.png) no-repeat center center ;border-radius: .6em ; padding: .3em  1.1em ; background-size: 120%; }
.sub-navi.off{ opacity: 0; }
.sub-navi > .inner{ width: 75%; margin: 0 auto; display: flex; flex-wrap: nowrap; }
.sub-navi > .inner > div{ margin: .5em 3%; }



/*  entry */
.entry-container{ width: 95%; max-width: 960px; margin: 0 auto; border: #fff solid .35em; background: rgba(255,255,255,.3);padding: 1.6em; box-sizing: border-box; border-radius: 0 1em 1em 1em;  }
.sc-content-entry{ padding: 1.6em; background: rgba(255,255,255,.6); margin: 0 auto 1.6em auto; box-sizing: border-box; border-radius: 0 1em 1em 1em;}
.sc-content-entry:last-child{margin-bottom: 0;}
.sc-content-entry .entry-head{ width: 100%; margin-bottom: 1.1em; display: flex; flex-wrap: wrap; height: 100%; align-items: stretch; }
.sc-content-entry .entry-date{ width: 100%; margin-bottom: .8em; color: #601f10; font-size: 0.666em;}
.sc-content-entry .entry-title{ width: calc( 100% - .4em ); padding-left:.2em; font-weight: bold; color: #601f10; font-size: 1.222em; word-break: break-all; }
.sc-content-entry .entry-ic{ width: .4em; /* height: 100%; */ display: flex; }
.sc-content-entry .entry-ic > span{ display: block; width: 100%; /* height: 100%; */ background-color: #601f10; border-radius: .2em; }
.sc-content-entry .entry-body{ padding: 0 ; font-size: .888em; line-height: 1.5; }
.sc-content-entry .entry-left{ width: 47.62%; margin-right: 1.9%; float: left; }
.sc-content-entry .entry-right{ width: 50.48%; float: left; }

.single-container{ width: 95%; max-width: 960px; margin: 0 auto; border: #fff solid .35em; background: rgba(255,255,255,.3) url(../images/common-entry-bg.png) repeat-y center 20% ; background-size: 100% auto; border-radius: 0 1em 1em 1em; }
.sc-content-single{ padding: 1.6em; margin: 0 auto 1.6em auto; box-sizing: border-box; border-radius: 0 1em 1em 1em;}

.frame-entry-cop{ padding: 1.6em; background: rgba(255,255,255,.6); margin: 0 auto 1.6em auto; box-sizing: border-box; border-radius: 0 1em 1em 1em;}

.sc-blk-ttl{ display: block; width: 100%; margin-bottom: 1em; }
.sc-blk-ttl .max470{ display: block; max-width: 470px; margin: 0 auto; }

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

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

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



/* Top */
#Page_Top .wrapper{ background-image: none; }
.sc-main{  padding-top: 1em; }
.sc-main > .inner{ position: relative; }
.sc-main .vis-grp{ position: relative; overflow: hidden; }
.sc-main .spc{ position: relative; }
.sc-main .vis-bg{ position: absolute; top:0; }
/*
.sc-main .vis-1{ width: 100%; position: absolute; top:25.45%; }
.sc-main .vis-2{ width: 76.5%; position: absolute; top:5.9%; right: .9%;}
.sc-main .vis-3{ width: 28.417%; position: absolute; top:.5%; left: 0; }
.sc-main .logo{ width: 62.5%; position: absolute; top:71.5%; left: 0; right: 0; margin: 0 auto; }
*/
.sc-main .catch{ width: 55.834%; position: absolute; top:-2%; left: 0; right: 0; margin: 0 auto; z-index: 3 ; pointer-events: none; }
.sc-onair .onair{ width: 98%; padding: 1em; margin: 0 auto 2em auto; text-align: center; }

.news-twitter{ display: flex; flex-wrap: wrap; margin-bottom: 1.5em;}
.news-twitter .sc-sct-ttl{ margin-bottom: .3em; }
.sc-movie,.sc-news,.sc-twitter{ width: 32.3%; }
.sc-movie,.sc-news{ margin-right: 1.5%; }
.box-top{ color: #FFF; padding: 1em; border: #fff solid .222em; background: rgba(96,31,16,.8); box-sizing: border-box; border-radius: 0 1em 1em 1em;}
.movie-container,.news-container,.twitter-container{ height: 220px; }
.movie-container p{ margin-bottom: 0; }
.news-headline { height: 210px; overflow-y: auto;}
.news-headline dl{ font-size: 1.0em; margin: 0 0 .9em 0;}
.news-headline dl:last-child{ margin: 0;}
.news-headline dl dt{ font-size: 0.66em; font-weight: normal; margin-bottom: 0; letter-spacing: 0.05em;  }
.news-headline dl dd{ font-size: 0.88em; line-height: 1.4; }
.news-headline dl dd a,
.news-headline dl dd a:visited{ text-decoration: none;color: #fff; }
.news-headline dl dd a:hover{ text-decoration: underline; /* color: #3b3b3b; */ }

.sc-banner{ }
.top-banner-grid{ justify-content: center; align-items: center;}

/* ON AIR */
#Page_Onair .single-container{ }
.onair-list{ font-size: 1.555em; margin: 0 auto; color: #601f10; font-weight: bold; }
.onair-list.exprd{ color: #a17b72; }
.onair-list dl{ width: 100%; margin: 0; padding: 0; padding: .4em; border-radius: .9em; margin-bottom: .3em; display: flex; list-style-type: none; }
.onair-list dt{ width: 39%; margin: 0; padding: 0; padding-right: 3%; text-align: right; vertical-align: top; display: block; }
.onair-list dd{ width: 60%; margin: 0; padding: 0; vertical-align: top; display: block; }
.onair-list .c1{ display: inline-block; width: 6.5em; }
.onair-list .c2{ display: inline-block; width: 6.5em; }
.onair-list .atxrpt{ display: inline-block; font-size: .6em; }
.onair-list a{ color: #601f10; text-decoration: underline; }
.onair-list2{ font-size: 1.111em; max-width: 750px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.onair-list2 > div{  width: inherit; margin: .3em .5%;  }
.onair-list2 a{ color: #601f10;  border:rgba(96,31,16,.9) solid 2px; display: block;padding: .4em .6em; border-radius: .6em; text-align: center;}
.onair-list2 a:hover{ background-color: #FFF; text-decoration: none; }
/* Staffcast */
#Page_Staffcast .single-container{ background-color: rgba(255,255,255,.6);}
.staff-list{ display: flex; flex-wrap: wrap; color: #601f10; }
.staff-list .sc-sct-ttl{ width: 8em; display: inline-block; }
.staff-list > .staff{ width: 45%; }
.staff-list > .cast{ width: 55%; }
.staff-list > .cast .cast-col{ display: flex; flex-wrap: wrap; margin-bottom: 1.5em;}
.staff-list > .cast .cast-col >div{ width: 25%; }
.staff-list .cat{ font-size: 0.888em; margin-bottom: .3em; font-weight: bold;}
.staff-list .pos{ font-size: 0.888em; margin:0; font-weight: bold;}
.staff-list .name{ font-size: 1.222em; margin-bottom: .7em;}
.staff-list .name.cmb{ margin-bottom: 0;}
.staff-list .ex{ font-size: 0.777em; margin-left: .5em; }

/* Story */
#Page_Story .single-container{ max-width: 1100px; background-color: rgba(255,255,255,.6);}
.intro-container{ width: 96%; margin: 0 auto; display: flex; flex-wrap: wrap; color: #601f10;}
.intro-container .left{ width: 64%; font-size: 1.333em;}
.intro-container .right{ width: 36%; text-align: center; }
.intro-container .ep-title{ width: 100%; text-align: center; margin-bottom: 1.5em; }

.sub-navi.story-navi{ max-width: 1100px; }
.sub-navi.story-navi > .inner{ width: 90%; justify-content: center;}
.sub-navi.story-navi > .inner > div{ width: auto; margin: .5em auto; }
.sub-navi.story-navi > .inner > div.cs{ opacity: .5; pointer-events: none; }

.story-ep-container{ width: 96%; margin: 0 auto;  }
.story-ep-container .ep-title{ text-align: center; margin-bottom: .5em; }
.story-ep-container .ep-staff{ margin: 0 1em; text-align: center; }
.story-ep-container .ep-text{ margin: 0 1em 2em 1em; text-align: center; }
.story-ep-container .ep-yokoku{ margin: 0 auto; width: 80%; max-width: 480px;}
.story-ep-container .slider-sceneImage{ margin: 1em 1em .2em 1em; }
.story-ep-container .slider-sceneImage .slick-slide {
  transition: .3s ease;
  transform: scale(.85);
  transform-origin: 100% 50%;
}
.story-ep-container .slider-sceneImage .slick-current {
  transform: scale(1);
  transform-origin: 50% 50%;
}
.story-ep-container .slider-sceneImage .slick-current + .slick-slide {
  transform-origin: 0 50%;
}

.story-ep-container .ep-yokoku{ text-align: center; }
.story-ep-container .ep-yokoku .thumb{ max-width: 480px; margin: 0 auto; }

#Outline{ margin-bottom: 2em; }
#StoryData{ display: none; }

/* Character */
/* #Page_Character  .wrapper{ background-image: none; } */
#Page_Character .single-container{ }
#Page_Character .sc-content-single{ padding-top: 0; }
.chara-navi { width: 100%; padding: 1em 0; border-bottom: #fff solid .35em; }
.chara-navi .inner{ width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }
.chara-navi .inner > div{ width: 49%; margin: .5%; }
#Page_Character .sc-sct-ttl{ width: 49%; margin: 0 auto 1em auto; }

.chara-container{ display: flex; flex-wrap: wrap; align-items: center; color: #601f10; margin-bottom: 1em; }
.chara-container .cont-left{ width: 40%;}
.chara-container .cont-right{ width: 60%; }
.chara-container .cont-right .frame-entry-cop{ padding: 1em; margin: 0; }
.chara-container .catch{ font-size: 1.333em; font-weight: bold; padding-bottom: .6em; margin-bottom: .6em; border-bottom: #601f10 solid 2px; }
.chara-container .name{ margin-bottom: .7em; }
.chara-container .name-l{ font-size: 1.777em; font-weight: bold; display: inline-block; padding-right: .8em; margin-right: .8em; border-right: #601f10 solid 2px;}
.chara-container .name-r{ font-size: 1.333em; display: inline-block;}
.chara-container .name-r span{ font-size: 0.8em; margin-right: 1em;}
.chara-container .prof{font-size: 1.111em;}

/* Products */
#Page_Products .single-container{ /*  background-color: rgba(255,255,255,.6); */}

.bnf-list{ display: flex; flex-wrap: wrap; margin-bottom: 1em; }
.bnf-list .item{ width: 32.3%; margin: 1.5% .5%; border-radius: 1em 1em 1em 1em; /* background-color: #FFF; */ padding: .5em; }
.bnf-list .thumb{ margin-bottom: .2em; }
.bnf-list .thumb-np{ margin-bottom: .2em; }
.bnf-list .shop{ font-size: 0.999em; color: #601f10; font-weight: bold; border-bottom:rgba(96,31,16,.9) solid 2px; padding-bottom: .2em; margin-bottom: .2em; }
.bnf-list .name{ font-size: 0.888em; color: #601f10; letter-spacing: -0.05em; border-bottom:rgba(96,31,16,.9) solid 2px; padding-bottom: .2em; margin-bottom: .2em; }
.bnf-list .cond{ font-size: 0.777em; }
.bnf-list .start{ font-size: 0.777em; }


.goods-list{ display: flex; flex-wrap: wrap;  color: #601f10; margin-bottom: 1em; }
.goods-list .item{ width: 24%; margin: 1.5% .5%; }
.goods-list .thumb{ border: rgba(96,31,16,.3) solid 2px; border-radius: 0 1em 1em 1em; overflow: hidden; margin-bottom: .2em; }
.goods-list .name{ font-size: 0.999em; letter-spacing: -0.05em; border-bottom:rgba(96,31,16,.9) solid 2px; padding-bottom: .2em; margin-bottom: .2em; }
.goods-list .spec{ font-size: 0.777em; }

/* Special */
#Page_Special .single-container{ }

.movie-list{ display: flex; flex-wrap: wrap; }
.movie-list > div{ width: 48%; margin: 1%; }
.movie-list > div .frame-entry-cop{ margin-bottom: 0; }
.movie-list > div p{ margin-bottom: 0; }

.pc-dur1{ animation-duration: 0;}
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

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

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

}
/* Custom 1440 ----------------------------------------------------------------------------- */
@media (max-width: 1439px) {

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

}
/* MD ----------------------------------------------------------------------------- */
@media (max-width: 991px) {

}
/* SM ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
.pc-dur1{ animation-duration: 1.0s;}


/* ---- Structure ---- */
body{ background-size: 100%; }
body{ background-image: url("../images/s3/background-sp.webp"); }
.wrapper{ background-image:url("../images/s3/background-mp-sp.webp");}

.list-a > div{ width: 99%; }

.sub-page header{ margin-bottom: 0; }
.sub-page header > .inner{ height: inherit; padding-bottom: 30.5vw; background: none; border-bottom: #fff467 solid 2px;}
#Page_News.sub-page header > .inner,
#Page_Character.sub-page header > .inner{ padding-bottom: 19.5vw; border:none; }

.page-title{ width: 100%; }

#PageTop{ width: 3.5em; margin: 0 auto 1em auto; }
.ft-banner{ flex-wrap: wrap;}
.ft-banner > div{ width: 80%; margin: .5em 0; }

/* navi */
nav.global-navi{ display: none; }
.sub-page nav.global-navi{ display: none; }
nav.global-navi-sp{ display: block; }

.sub-navi-stab{ width: 100%; }
.sub-navi > .inner{ width: 95%; }
.sub-navi > .inner > div{ margin: .5em 2%; }

/*  entry */
.entry-container{ /* width: 90%; */ padding: 1em;}
.sc-content-entry{ padding: 1em; margin-bottom: 1em; }
.single-container{ /* width: 90%; */ }
.sc-content-single{ padding: 1em; margin-bottom: 1em; }

/* TOP */
.news-twitter{ position: relative; bottom:inherit; width: 90%; margin: 0 auto; }
.sc-movie,.sc-news,.sc-twitter{ width: 100%; }
.sc-movie,.sc-news,.sc-twitter{ margin-right: 0; margin-bottom: 1.5em; }
.news-headline dl dt{ font-size: 0.88em;  }
.news-headline dl dd{ font-size: 1em;  }

.movie-container,.news-container,.twitter-container{ height: inherit; }
.news-headline { height: inherit; overflow-y: inherit;}
.news-headline dl{  }

/* ON AIR */
#Page_Onair .single-container{ }
.onair-list{ font-size: 1.333em; margin: 0 auto; color: #601f10; font-weight: bold; }
.onair-list dl{ flex-wrap: wrap; padding: 0; padding-bottom: .4em;}
.onair-list dt{ width: 100%; margin: 0; padding: 0; text-align: center; }
.onair-list dd{ width: 100%; margin: 0; padding: 0; text-align: center; }
.onair-list .c1{ /* display: block; width: 100%; */ }
.onair-list .atxrpt{ display: inline-block; font-size: .7em; }

.onair-list2 > div{  width: 99%;  }

/* Story */
/* #Page_Story .single-container{ max-width: 1100px; background-color: rgba(255,255,255,.6);} */
.intro-container{ width: 100%; }
.intro-container .left{ width: 100%; font-size: 1.11em; margin-bottom:  1.1em; }
.intro-container .right{ width: 100%; }

.sub-navi.story-navi > .inner{ width: 100%; flex-wrap: wrap;}
.sub-navi.story-navi > .inner > div{ width: auto; margin: .4em .9em; }
.sub-navi.story-navi > .inner > div.cs{ opacity: .5; pointer-events: none; }

/*
.sub-navi.story-navi > .inner > div:nth-child(1){ width: calc(104 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(2){ width: calc(15 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(3){ width: calc(23 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(4){ width: calc(22 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(5){ width: calc(23 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(6){ width: calc(22 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(7){ width: calc(24 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(8){ width: calc(24 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(9){ width: calc(24 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(10){ width: calc(24 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(11){ width: calc(41 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(12){ width: calc(31 * 0.04em); }
.sub-navi.story-navi > .inner > div:nth-child(13){ width: calc(38 * 0.04em); }
*/

.story-ep-container{ width: 100%; margin: 0 auto;  }

/* Staffcast */
#Page_Staffcast .single-container{ }
.staff-list > .staff{ width: 100%; text-align: center; margin-bottom: 1.5em; }
.staff-list > .cast{ width: 100%; text-align: center;}
.staff-list > .cast .cast-col{ justify-content: center; }
.staff-list > .cast .cast-col > div{ width: 50%; }

/* Character */
#Page_Character .single-container{ }
.chara-navi .inner > div{ width: 99%; margin: 1.5% .5%; }
#Page_Character .sc-sct-ttl{ width: 80%; }

.chara-container{ }
.chara-container .cont-left{ width: 100%; margin-bottom: .2em; padding: 0 10%;}
.chara-container .cont-right{ width: 100%; }
.chara-container .catch{ font-size: 1.222em; text-align: center; }
.chara-container .name{ margin-bottom: .7em; text-align: center;  }
.chara-container .name-l{ font-size: 1.555em; font-weight: bold; display: inline-block; padding-right: .6em; margin-right: .6em; border-right: #601f10 solid 2px;}
.chara-container .name-r{ font-size: 1.111em; display: inline-block;}
.chara-container .name-r span{ font-size: 0.8em; margin-right: .7em;}
.chara-container .prof{font-size: 1em; text-align: center; }

/* Products */
#Page_Products{ }
.bnf-list .item{ width: 98%; margin: 1.5% 1%; }
.goods-list .item{ width: 98%; margin: 1.5% 1%; }

/* Special */
#Page_Special .single-container{ }
.movie-list > div{ width: 100%; margin: 0 0 1em 0; }

}
/* XS ----------------------------------------------------------------------------- */
@media (max-width: 543px) {

}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {

}
/* pc - xlarge ----------------------------------------------------------------------------- */
@media (min-width: 1200px) {

}
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      

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

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

@-webkit-keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -15%, 0);
    transform: translate3d(0, -15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownSM {
  -webkit-animation-name: fadeInDownSM;
  animation-name: fadeInDownSM;
}

@-webkit-keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpSM {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpSM {
  -webkit-animation-name: fadeInUpSM;
  animation-name: fadeInUpSM;
}