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

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* ---- fonts ---- */
/* Windows 用 Medium 指定の游ゴシック */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}
/* font-weight: bold の時は通常どおり Bold 書体を使わせる */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

.s-serif2018{font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.serif2018{font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;}


html,
body{ background:#4e0032; color: #333; height: 100%; line-height: 1.5; font-size: 18px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }


/* style  ----------------------------------------------------------------------------- */
a,a:visited { color:#C36;}
a:hover,a:active { color:#CC0;}
/* improve link */
.ilink{}
.ilink:before{ content:"＞ "; }

.color0{ color: #333; }/*  */
.color1{ color: #C36; }/* pink */
.color2{ color: #ff77b7; }/* light pink */
.color3{ color: #cc2674; }/* dark pink - onair */
.color4{ color: #391365; }/* purple */
.color5{ color: #056374; }/* green - staffcast */

.size20{ font-size: 1.1111em; }
.size22{ font-size: 1.2222em; }
.size24{ font-size: 1.3333em; }

.ttl-a{ color: #391365 ; background: #e6d5f9; background: url(../images/common-camp-bg.jpg);  padding: 0.2em; }

.table-a{ }
.table-a th{ padding:0.5em; background-color: #cc2674;border: #cc2674 solid 1px; font-weight: normal; text-align: inherit; vertical-align: top; color: #FFF; text-align: left; }
.table-a td{ padding:0.5em; background-color: rgba(255,255,255,.7);border: #cc2674 solid 1px; vertical-align: top; }

.table-n{ border-collapse: collapse; box-sizing: border-box; }
.table-n th{ padding:0.5em 0.5em; text-align: left; font-weight: normal; vertical-align: top; box-sizing: border-box; }
.table-n td{ padding:0.5em 0.5em; vertical-align: top; box-sizing: border-box; }

.table-x{ border-collapse: collapse; box-sizing: border-box; }
.table-x th{ padding:0.5em 0.5em; text-align: left; font-weight: normal; vertical-align: top; box-sizing: border-box; }
.table-x td{ padding:0.5em 0.5em; vertical-align: top; box-sizing: border-box; }

/* goods 2018.3.16 */
.table-g{ border-collapse: collapse; box-sizing: border-box; }
.table-g th{ padding:0 0.5em; text-align: left; font-weight: normal; vertical-align: top; box-sizing: border-box; }
.table-g td{ padding:0 0.5em; vertical-align: top; box-sizing: border-box; }

/* news 2018.3.16 */
.table-n2{ border-collapse: separate; border-spacing: 2px; box-sizing: border-box; }
.table-n2 th{ padding:0.5em 0.5em; background: #cc2674; color: #FFF; font-weight: normal; text-align: left; box-sizing: border-box; word-break: break-all;}
.table-n2 td{ padding:0.5em 1em; color: #cc2674; background: #FFF; border:#cc2674 solid 1px; box-sizing: border-box;}

.frame-a{ background: rgba(255,255,255,0.2); border: #e6d5f9 solid 1px; box-sizing: border-box;}

.contframe_a{ padding:10px; background:url(../images/common-contframe_a-bg.jpg) repeat left top ; background-size: 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
.contframe_a > .container{ background: #FFF; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
.contframe_a > .block-ttl{ text-align: center; margin-bottom: 0; }

.hr-purple{ border-color: #391365; border-width: 1px 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */}
/* 4.5 */
.hr-purpleDot{ border-color: #391365; border-width: 1px 0px 0px 0px; border-style: dotted; height: 1px; /* 高さ(IE) */}
/* 4.10 */
.hr-pink{ border-color: #cc2674; border-width: 1px 0px 0px 0px; border-style: solid; height: 1px; /* 高さ(IE) */}
.hr-pinkDot{ border-color: #cc2674; border-width: 1px 0px 0px 0px; border-style: dotted; height: 1px; /* 高さ(IE) */}

.entry{ margin: 0 auto ; padding: 0 ; box-sizing: border-box;}
.entry .entry-head{ width: 100%; }
.entry .entry-date{ width: 90px; padding:15px 0; line-height: 1; color: #FFF; background-color: #cc2674; font-size: 14px; text-align: center; }
.entry .entry-date span{ font-size: 10px; margin-bottom: 0; display: block; }
.entry .entry-title{ line-height: 1.2; padding: 12px 30px; text-align: center; background: url(../images/news-entry-head_bg.jpg); color: #FFF; word-break: break-all; }
.entry .entry-body{ padding: 0px 30px 30px 120px; margin-top: -30px; }
.entry .entry-body p:last-child{ margin-bottom: 0; }

.hide{ display: none;}
.hide-pc{ display: none; }
.hide-sp{ display: inherit;}

/* youtube embed responsive */
.video-embed {position: relative;height: 0;padding: 30px 0 56.25%;overflow: hidden;}
.video-embed iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* colorbox customize */
#cboxOverlay{background:#FFF;}
#cboxContent{margin-top:60px;background:#FFF;}
#cboxLoadedContent{border:5px solid #FFF; background:#fff;}
#cboxClose{top:-55px; right:5px; display:block; background:url(../images/lib/colorbox/close.png) no-repeat top center; width:50px; height:50px; }
#cboxClose:hover{ background-position: top center; }
#cboxPrevious{top:-55px; left:5px; display:block; background:url(../images/lib/colorbox/prev.png) no-repeat top center; width:50px; height:50px; }
#cboxPrevious:hover{ background-position: top center; }
#cboxNext{top:-55px; left:65px; display:block; background:url(../images/lib/colorbox/next.png) no-repeat top center; width:50px; height:50px; }
#cboxNext:hover{ background-position: top center; }

/* slick fix */
.slick-list,.slick-slide {outline: none !important;}/* Chromeでフォーカス時の枠線を消す */
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
html,
body{ background-image: url(../images/common-bgptn.jpg); background-repeat: repeat-x; background-position: center 77px; background-size: 40px;}
body > #Wrap {height: auto;}
#Wrap{ width:100%; min-height: 100%; height: auto !important; margin: 0 auto; position: relative; top:0; z-index: 50; }
#Wrap{ }
#Wrap > .inner{ height: 100%; }
#Wrap > .inner > .container{ width: 100%; height: 100%; margin: 0 auto;}

/* Head Area */
#Head{ width: 100%; position: relative; }
#Head > .inner{ width: 100%; max-width: 1220px; margin: 0 auto; position: relative; }

#Logo{ width: 19.6%; margin: 0; line-height: 0; position: absolute; top:22px; left: 25px; z-index: 101;}
#Navi{ width: 100%; height: 79px ; border-bottom: #FFF solid 1px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5); background: url(../images/common-navi-bg.png) repeat-x center top; position: relative; z-index: 100; }
#Navi .inner{ max-width: 1220px;  margin: 0 auto; position: relative;}

.global-menu{ padding: 0 0 0 18%; margin: 0; list-style-type: none; display: block; letter-spacing: -0.4em; position: absolute; top:25px; z-index: 105; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;flex-direction: row; justify-content: center; align-items: baseline; flex-wrap: nowrap;}
.global-menu li{ margin: 0 1.2% 0 0; list-style-type: none; display: inline-block; letter-spacing: 0; line-height: 0;}
/* 4.6 STORY add
.global-menu li:nth-child(1){ width: 8.26%; }
.global-menu li:nth-child(2){ width: 8.6%; }
.global-menu li:nth-child(3){ width: 18.4%; }
.global-menu li:nth-child(4){ width: 15.8%; }
.global-menu li:nth-child(5){ width: 15.1%; }
.global-menu li:nth-child(6){ width: 13.7%; }
.global-menu li:nth-child(7){ width: 11.2%; }
*/
.global-menu li:last-child{ display: none;  }
#NaviSpBtn{ display: none; }
.page-title{ width: 100%; height: 77px; text-align: center;background: url(../images/common-pagetitle-bg.png) repeat-x center top;  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5);position: relative; z-index: 99; }
.page-title .inner{ width: 100%; height: 77px; text-align: center;background: url(../images/common-pagetitle-mark.png) no-repeat center top; }
.page-title .inner img{ position: relative; top:10px; }
#SubNavi{ width: 100%; height: 49px ; border-top: #e95098 solid 1px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5); background: #520f2e url(../images/common-submenu-bg.png) repeat-x center top; position: relative; z-index: 99; }
#SubNavi .inner{ width: 100%; height: 49px; text-align: center; background: url(../images/common-submenu-mark.png) no-repeat center top; }
.sub-menu{ max-width: 1000px; padding: 0; margin: 0 auto; list-style-type: none; text-align: center; letter-spacing: -0.4em; position: relative; top:6px;  display: -webkit-box;display: -webkit-flex;display: -ms-flexbox; display: flex; flex-direction: row; justify-content: center; flex-wrap: nowrap;}
.sub-menu li{ margin: 0 1.5% 0 0; list-style-type: none; display: inline-block; letter-spacing: 0; line-height: 0;}
#ContentNavi{ margin-bottom: 1em; text-align: center; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;flex-direction: row; justify-content: center; flex-wrap: wrap;}
#ContentNavi > div{ display: block; width: 31%; margin: .5%; }


/* Content Area */
#Content{ max-width: 900px; margin: 0 auto ; margin-bottom: 1em; }
#Content > .inner{ padding: 30px; background: #FFF no-repeat center top; position: relative;}
.content-inner-expad{ padding: 0 30px; }
.cat-title{ line-height: 1.2; padding: 10px 10px 8px 10px; margin-bottom: 20px; text-align: center; background: url(../images/common-cattitle-bg.jpg); color: #FFF; word-break: break-all;}
.cont-title{ line-height: 1.1; font-size: 1.111em; padding: 10px 10px 8px 10px; margin-bottom: 20px; text-align: center; background: url(../images/common-conttitle-bg.jpg); color: #FFF; word-break: break-all;}
/* 3.19 SPECIAL .cont-title-spe */
.cont-title-spe{ line-height: 1.1; font-size: 1.111em; padding: 10px 10px 8px 10px; text-align: center; background: url(../images/common-conttitle-spe-bg.jpg); color: #FFF; word-break: break-all;}
/* 4.10 OA .cont-title-oa */
.cont-title-oa{ line-height: 1.1; font-size: 1em; padding: 10px 10px 8px 10px; text-align: center; background: url(../images/common-conttitle-oa-bg.jpg); color: #222; word-break: break-all;}


/* Bottom Area */
#Bottom{ width: 100%; margin: 0 auto; position: relative; }
#Bottom > .inner{ width: 100%; position: relative; line-height: 0; }

/* Footer */
#Footer{ background: url(../images/common-footer-line.png) repeat-x center top; }
#Footer > .inner{ width: 100%; margin: 0 auto; padding: 2em 0 2em 0; text-align: center; }
#Footer #FooterBanner{ margin: 0 auto; text-align: center; padding: 0 0 .7em 0; margin: 0 ; }
#Footer #FooterBanner ul{ display: block; list-style-type: none; margin: 0; padding: 0.5em 0;}
#Footer #FooterBanner ul > li{ display: inline-block; margin: 0; padding: 0 0;}
#Footer #Copyright{ color: #FFF; font-size: 0.722em; display: inline-block; line-height: 1; }

/* Fix Area */
#PageTopBtn{ width: 76px; height: 76px; position: fixed; bottom: 1em; right: 1em; line-height: 0; }
#PageTopBtn .cursor{ position: absolute; top:0; }
/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 

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

■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* SUB-PAGE ----------------------------------------------------------------------------- */
/* News */
#Page_News #Content > .inner{ background-image: url(../images/news-content-bg.jpg); }

/* Onair */
#Page_Onair #Content > .inner{ background-image: url(../images/onair-content-bg.jpg); }
.table-onair{ width: 100%; border-top: #cc2674 solid 1px; }
.table-onair tr{ border-bottom: #cc2674 solid 1px;}
.table-onair th{ width: 30%; padding:12px 2% 12px 0; text-align: right; color: #cc2674; font-weight: normal; vertical-align: top; box-sizing: border-box;}
.table-onair td{ width: 66%; padding:12px 0 12px 2%; text-align: left; vertical-align: top; box-sizing: border-box; }

/* Story */
#Page_Story #Content > .inner{ background-image: url(../images/story-content-bg.jpg); padding: 30px 0 0 0; }
#Page_Story #ContentNavi > div{ display: block; width: 31%; margin: .5%; }
.story-navi{ padding: 0 30px; font-size: 1.222em; margin-bottom: 1.2em; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;flex-wrap: wrap; justify-content: left; box-sizing: border-box; }
/* 最初の数話を過ぎたらコメントアウトしてください
.story-navi{ justify-content: center; } */
.story-navi > div{ width: 16.66%; min-width: 4.5em; padding: 0.2em;  box-sizing: border-box;}
.story-navi > div a{ width: 100%; padding: 3px 3px; border-radius: .4em; color:#2f7bcf; border: #6495cb solid 3px; background-color:rgba(255,255,255,1.0); text-decoration: none; display: block; text-align: center; box-sizing: border-box; }
.story-navi > div a:hover{ color:#FFF; background-color:#2f7bcf; }
.story-navi > div.cs a{ color:#a4a4a4; border: #a4a4a4 solid 2px; background-color:rgba(255,255,255,0.1); pointer-events : none; }
#Outline { padding: 0.1em 0 0 0; margin-bottom: 1em; position: relative;}
#Outline .ep-title{ font-size: 1.333em; margin-bottom: 0.5em; line-height: 1.1; padding: 10px 10px 8px 10px; text-align: center; background: url(../images/story-conttitle-bg.jpg); color: #FFF; word-break: break-all;}
#Outline .ep-number{ }
#Outline .ep-subt{ }
#Outline .ep-staff{ font-size: 0.777em; margin-bottom: 1.1em; text-align: center; word-break: break-all;}
#Outline .ep-text{ color:#2f7bcf; line-height: 1.5; width: 100%; margin: 0 0 1.5em 0; word-break: break-all; }
#Outline .ep-movie{ text-align: center; }
#Outline .ep-movie-title{}
#Outline #slider{ max-width: 860px; width: 100%; margin: 0 auto 1em auto; }
#Outline #slider ul{ display: block; padding: 0; margin: 0; list-style-type: none; }
#Outline #slider ul li{ display: block; padding: 0; margin: 0; line-height: 0; }
#Outline #slider .sceneImage{ width: 100%; padding: 0; height: 56.25%;  /* border: rgba(255,255,255,0.1) solid 1px; */ box-sizing: border-box; line-height: 0; }
#Outline #slider .sceneImage li{ width: 100%; height: 56.25%; float: left; }
#Outline #slider .thumb{ width: 100%; margin: 0 auto; display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;justify-content: center; }
#Outline #slider .thumb li{ margin: 0; line-height: 0; float: left; }

/* Staffcast */
#Page_Staffcast #Content > .inner{ background-image: url(../images/staffcast-content-bg.jpg); }
.table-staffcast{ width: 100%; border-collapse: collapse; box-sizing: border-box; }
.table-staffcast th{ width: 49%; padding:0 1% 0.5% 0; text-align: right; color: #056374; font-weight: normal; vertical-align: top; box-sizing: border-box; }
.table-staffcast td{ width: 49%; padding:0 0 0.5% 1%; text-align: left; vertical-align: top; box-sizing: border-box; }

/* Character */
#Page_Character #Content > .inner{ background-image: none; padding: 0; line-height: 0;}
#Page_Character .bg{ display: block; }
#Page_Character .bg-smp{ display: none;}
#Page_Character #SubNavi{ height: 99px; }
#Page_Character #SubNavi .inner{ height: 99px;}
#slick_charanavi{ width: 100%; max-width: 720px; margin: 0 auto; position: relative; top:5px; }
#slick_charanavi .charanavi-left,#slick_charanavi .charanavi-right{ width: 56px; height: 86px; padding: 2px; line-height: 1; }
#slick_charanavi .charanavi-left{ float: left; }
#slick_charanavi .charanavi-right{ float: left;}
#slick_charanavi .charanavi-list{ width: calc(100% - 120px); display: block; list-style-type: none; margin: 0; padding: 0; position: relative; line-height: 0; float: left;}
#slick_charanavi .charanavi-list li{ display: block; list-style-type: none; margin: 0; padding: 2px; position: relative; line-height: 0; float: left;}
#slick_charanavi .charanavi-list li:focus{outline: none;}
#slick_charanavi .charanavi-list li span{line-height: 1;}
#slick_charanavi .charanavi-list li span img{}
#CharacterList{ width: 100%; max-width: 900px; position: absolute; top:0;}
.chara-set{ position: relative; display: none; }
.chara-set .chara-bgspc{ display: block; position: relative; }
.chara-set .chara-bgspc-smp{ display: none; position: relative; }
.chara-set .chara-prof{ width: 66.667%; position: absolute; top:2.2%; right: 2.2%; }
.chara-set .chara-stand{ width: 60%; position: absolute; top:2.2%; left: -10%;}
.chara-set .chara-stand2{ width: 60%; position: absolute; top:2.2%; left: -10%; display: none;}
.chara-set .chara-face{ width: 66.667%; position: absolute; bottom:2.2%; right: 2.2%; }
.chara-set .chara-change{ width: 53px; position: absolute; top:3.2%; left: 3.2%; }

/* Products */
#Page_Products #Content .inner{ background-image: url(../images/products-content-bg.jpg); }
.music-left{ width:42.8572%; margin-right: 2.3%; float: left;}
.music-right{ width:54.762%; float: left;}

/* music flexbox */
.flex-music { width: 100%;
  display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; flex-wrap: wrap; justify-content: center;
}
.flex-music > div { margin-right: 5px; max-width: 135px; }
.flex-music > div:last-child { margin: 0; }


.benefits-block-pdg{ padding: 5px; }
.benefits-block{ padding: 0; margin:0; background-color: #FFF; border:#e6d5f9 solid 1px;  text-align: center; }
.benefits-block .b-title{ display: block; background-color: #e6d5f9; background: url(../images/common-camp-bg.jpg); color: #391365; padding: 3px; margin-bottom: 0; }
.benefits-block .sep-r{ border-right: #e6d5f9 solid 1px; }
.benefits-block div{ box-sizing: border-box; }
.benefits-block div p{ padding: 0.2em 0; font-size: 0.85em; margin:0 0 0.2em 0; border-bottom:#e6d5f9 solid 1px; }
.benefits-block div p:nth-child(1){  }
.benefits-block div p:nth-child(2){ }
.benefits-block div p:nth-child(3){ min-height: 1em; }
.benefits-block div p:nth-child(3){ border-bottom: none; }
.benefits-block div p.thumb{ border-bottom: none; margin-bottom: 0; min-height: 140px; }
.benefits-block div p.thumb-np{ border-bottom: none; margin-bottom: 0; min-height: 140px; display: none; }
.benefits-block div p.thumb-np img{ display: none; }
.bd_th{ padding: 5em 0; background-color: #FFF; border:#0877e8 solid 1px; }
.bd_tkt-ttl{ color: #391365; padding-bottom: 0.2em; margin-bottom: 16px; border-bottom: #391365 solid 1px; }
.bd_spec-table{ font-size: 0.7272em; width: 100%; box-sizing: border-box;  border-bottom:#391365 solid 1px;}
.bd_spec-table tr{ border-top:#391365 solid 1px; }
.bd_spec-table th,
.bd_spec-table td{ padding: 10px 0; }
.bd_spec-table th{ padding-right: 10px; font-weight: normal; text-align: left; }
.products-campain-bg{ /* line-height: 1.1; font-size: 1.111em; color: #FFF; text-align: center; margin-bottom: 20px;*/
padding: 10px; background: url(../images/common-camp-bg.jpg); word-break: break-all;}

/* Special */
#Page_Special #Content .inner{ background-image: url(../images/special-content-bg.jpg); }
#Page_Special .content-navi-btn{ border-color: #60a400 ; color: #60a400;  }
#Page_Special .content-navi-btn:hover{ color: #60a400; }
.cast-comment-block{ padding: 1em; background: #FFF;}
.cast-comment-block .q{ padding: 0.4em 0.5em; margin-bottom: 1.5em; background: #576b00; color: #FFF; text-align: center; }
.cast-comment-block .set{ padding: 0 1em;}
.cast-comment-block .set .ic{margin-right: 1em; float: left; }
.cast-comment-block .set .a{ padding-top: 1em; color: #930000; }

/* TOP-PAGE ----------------------------------------------------------------------------- */
.top-page {  }
.top-page #Wrap > .inner > .container{ min-width: 1000px; }

.top-page #Head{ margin-bottom: 20px;}
.top-page .global-menu{ padding: 0 9% 0 9%; margin: 0 auto; left:0; right:0;}

/* 4.4 */
.top-page #HeadLeft{ width: 240px; padding-right: 20px; position: relative; top:0; left:0; }
.top-page #HeadRight{ width: calc(100% - 260px); position: absolute; top:0; right:0; margin: 0 0 0 auto; }
/* .top-page #HeadLeft{ width: 240px; padding-right: 20px; position: absolute; top:0; left:0; }
.top-page #HeadRight{ width: calc(100% - 260px); position: relative; top:0; right:0; margin: 0 0 0 auto; } */
.top-page #Logo{ width: 329px; height: 216px; position: relative; top:30px; left: 0; margin-bottom: 40px; }

/* 3.28 */
.top-page #TopBnr{ }

.top-page #Movie{ margin-bottom: 10px; line-height: 0; }
.top-page #News{ margin-bottom: 10px; }
.top-page #News .news-list{ line-height: 1.2; text-align: left;  }
.top-page #News .news-list dl{ margin: 0 ; padding:10px; list-style-type: none; display: table; position: relative; }
.top-page #News .news-list dl dt{ display: block;  margin: 0; padding: 0; color:#ff77b7; font-size: 10px; }
.top-page #News .news-list dl dt span:after{ content:"."; }
.top-page #News .news-list dl dd{ display: block; margin: 0; padding: 0; font-size: 12px; word-break: break-all; }
.top-page #News .news-list dl dd a{ text-decoration: underline; color: #1D1D1D; }
.top-page #News .news-list dl dd a:hover{ text-decoration: underline; color:#ff77b7;}
.top-page #Twitter{ margin-bottom: 10px; line-height: 0; }
.top-page .twitter-hash{ margin: 0; text-align: center; padding: 10px 10px 0px 10px;}



/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      
                                                                           
                                                                           
                     ■                                                     
 ■■    ■■            ■  ■             ■■■                     ■            
 ■■    ■■            ■               ■   ■                                 
 ■■■  ■ ■   ■■■   ■■■■  ■  ■■■      ■     ■  ■   ■   ■■■  ■ ■ ■   ■■■  ■■■ 
 ■ ■  ■ ■  ■  ■  ■■ ■■  ■  ■  ■     ■     ■  ■   ■  ■  ■  ■■  ■  ■  ■  ■   
 ■ ■  ■ ■  ■   ■ ■   ■  ■   ■■■     ■     ■  ■   ■  ■   ■ ■   ■  ■   ■ ■■  
 ■  ■■  ■  ■■■■■ ■   ■  ■ ■■  ■     ■     ■  ■   ■  ■■■■■ ■   ■  ■■■■■   ■■
 ■  ■■  ■  ■     ■■ ■■  ■ ■   ■      ■  ■■   ■  ■■  ■     ■   ■  ■        ■
 ■      ■   ■■■   ■■■■  ■  ■■■■       ■■■■■   ■■ ■   ■■■  ■   ■   ■■■  ■■■ 
                                                                           
                                                                           
                                                                           
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ 
*/
/* PC - middle ----------------------------------------------------------------------------- */
@media (max-width: 1199px) {


}
/* pad - small ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
/* style */
.table-a th,.table-a td{ width: inherit; display: block; }
.table-x th,.table-x td{ width: inherit; display: block; }
.entry .entry-date{ width: 70px; padding:10px 0; }
.entry .entry-title{ padding: 10px 20px;  }
.entry .entry-body{ padding: 0px 20px 20px 90px; margin-top: -25px; }

.sp-pd20h{ padding: 0 20px; }
.sp-al-ct{ text-align: center; }

.pcbr {display: none;}
.pcbr:before {content: "" ;}
.spbr:before {content: "\A" ;white-space: pre ;}
.hide-pc{ display: inherit; }
.hide-sp{ display: none;}


html,
body{ font-size: 14px;}
#Wrap > .inner{ min-width: inherit;}

#Logo{ width: 235px; margin: 0 auto; line-height: 0; position: absolute; top:10px; left: 0; right: 0; z-index: 101;}
#Navi{ width: 100%; height: 134px ; z-index: 100; }
.global-menu{ width: 100%; padding: 0; margin: 0; background-color: rgba(0,0,0,0.8); display: none; top:0px; z-index: 105; flex-direction: column; justify-content: center; flex-wrap: wrap;}
.global-menu li{ margin: 0 ; padding: 10px 0; display: block; border-top: #f60966 solid 1px; text-align: center;}
/*
.global-menu{ width: 100%; padding: 0; margin: 0; background-color: rgba(0,0,0,0.8); display: none; top:0px; z-index: 105;}
.global-menu li{ margin: 0 ; padding: 10px 0; display: block; border-top: #f60966 solid 1px; text-align: center; }
*/
.global-menu li:last-child{ display: block; }
/*
.global-menu li:nth-child(1),
.global-menu li:nth-child(2),
.global-menu li:nth-child(3),
.global-menu li:nth-child(4),
.global-menu li:nth-child(5),
.global-menu li:nth-child(6),
.global-menu li:nth-child(7){ width: 100%; }
*/
#NaviSpBtn{ display: block; position: absolute; top: 50px; right: 10px; z-index: 104; }
#ContentNavi{ margin-bottom: 1.5em; }
#ContentNavi > div{ display: block; width: 47%; margin: 1.5% ;  }

#Content > .inner{ padding: 30px 0;}
.content-inner-expad{ padding: 0 ; }
#Footer #Copyright{ font-size: 8px; }
#Footer #FooterBanner ul > li{ display: block; margin: 0 0 5px 0;}

/* Fix Area */
#PageTopBtn{ width: 50px; height: 50px; position: fixed; bottom: 1em; right: 1em; }


/* ----- SUB-PAGE ----- */
/* Onair */
.table-onair{ width: 100%; }
.table-onair th{ width: 100%; padding:12px 0 0px 0; text-align: center; color: #cc2674; font-weight: normal; vertical-align: top; box-sizing: border-box;}
.table-onair td{ width: 100%; padding:5px 0 12px 0; text-align: center; vertical-align: top; box-sizing: border-box; }
/* Story */
#Outline .ep-staff{ width: 95%; margin: 0 auto 1.1em auto; }
#Outline .ep-text{ width: 95%; margin: 0 auto 1.5em auto; }
/* Staffcast */
.table-staffcast{  }
.table-staffcast th{ width: 100%; padding:0 0 0.5% 0; text-align: center;  }
.table-staffcast td{ width: 100%; padding:0 0 1.9% 0; text-align: center; }
/* Character */
.chara-set .chara-change{ width: 43px; position: absolute; top:3.2%; left: 3.2%; }
/* Products */
.music-left{ width:100%; margin: 0 0 2.3% 0; float: none;}
.music-right{ width:100%; float: none;}
/* Special */
.cast-comment-block{ padding: 0.5em;}
.cast-comment-block .q{ padding: 0.5em; }
.cast-comment-block .set{ margin-bottom: 1em; padding: 0 .5em; }
.cast-comment-block .set .ic{ display: block; width: 20%; margin-right: 5%; float: left; }
.cast-comment-block .set .a{ display: block; width: 75%; padding-top: 0;float: left; }

/* ----- TOP-PAGE ----- */
.top-page #Wrap > .inner > .container{ min-width: inherit; }
.top-page #Head{ margin-bottom: 10px;}
.top-page #Navi{ height: 34px ; }
.top-page .global-menu{ padding: 0;}
.top-page #NaviSpBtn{ display: block; position: absolute; top: 6px; right: 10px; z-index: 104; }

.top-page #HeadLeft{ width: calc(100% - 20px); padding-right: 0; margin: 0 auto; position: inherit; top:inherit; left:inherit; }
.top-page #HeadRight{ width: 100%; position: relative; top:0px; right:0; margin: 0 ; }
.top-page #Logo{ width: 55%; height: inherit; position: absolute; top:-40px; left: 0; right: inherit; margin-bottom: inherit; z-index: 100; }
.top-page #Movie{ width: 50%; max-width: 240px; position: relative; top:-20px; right: 0; margin: 0 0 10px auto;}

}
/* smp - X small (for Character Page) ----------------------------------------------------------------------------- */
@media (max-width: 480px) {
#Page_Character .bg{ display: none; }
#Page_Character .bg-smp{ display: block;}
.chara-set .chara-bgspc{ display: none; position: relative; }
.chara-set .chara-bgspc-smp{ display: block; position: relative; }
.chara-set .chara-prof{ width: 92%; position: absolute; top:1.4%; right: 0; left:0; margin: 0 auto; }
.chara-set .chara-stand{ width: 72%; position: absolute; top:28%; right: 0; left:0; margin: 0 auto; }
.chara-set .chara-stand2{ width: 72%; position: absolute; top:28%; right: 0; left:0; margin: 0 auto; display: none;}
.chara-set .chara-face{ width: 92%; position: absolute; bottom:2.2%; right: 2.2%; }
.chara-set .chara-change{ width: 53px; position: absolute; top:32.2%; left: 10%; }
}
/* smp - X small ----------------------------------------------------------------------------- */
@media (max-width: 420px) {

.twitter-block iframe { width: 740px !important; }

.sub-menu{ max-width: 420px; }
.sub-menu li{ margin: 0; list-style-type: none; display: inline-block; letter-spacing: 0; line-height: 0;}

}
/* pc - large ----------------------------------------------------------------------------- */
@media (min-width: 768px) {
/* style */
.spbr {display: none;}
.spbr:before {content: "" ;}
}


/*
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■      
                                                                           
                                                                           
   ■           ■                  ■   ■              
   ■                              ■                  
  ■ ■   ■■■■   ■  ■■■ ■■■   ■■■  ■■■■ ■   ■■■   ■■■■ 
  ■ ■   ■■  ■  ■  ■  ■■  ■  ■  ■  ■   ■  ■■ ■■  ■■  ■
 ■   ■  ■   ■  ■  ■  ■   ■   ■■■  ■   ■  ■   ■  ■   ■
 ■■■■■  ■   ■  ■  ■  ■   ■ ■■  ■  ■   ■  ■   ■  ■   ■
 ■   ■  ■   ■  ■  ■  ■   ■ ■   ■  ■   ■  ■■ ■■  ■   ■
■     ■ ■   ■  ■  ■  ■   ■  ■■■■  ■■  ■   ■■■   ■   ■
                                                                           
                                                                           
                                                                           
■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■  
*/
.dly-5{ animation-delay: 0.5s;}
.dly1{ animation-delay: 1.0s;}
.dly1-5{ animation-delay: 1.5s;}
.dly2{ animation-delay: 2.0s;}
.dly2-5{ animation-delay: 2.5s;}
.dly3{ animation-delay: 3.0s;}
.dly4{ animation-delay: 4.0s;}
.dly5{ animation-delay: 5.0s;}
.dur-5{ animation-duration: 0.5s;}
.dur1{ animation-duration: 1.0s;}
.dur1-5{ animation-duration: 1.5s;}
.dur2{ animation-duration: 2.0s;}
.dur2-5{ animation-duration: 2.5s;}
.dur3{ animation-duration: 3.0s;}
.dur4{ animation-duration: 4.0s;}
.dur5{ animation-duration: 5.0s;}

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