﻿@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Orbitron:900');
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/* ------------------------
 for Wordpress styles
------------------------ */
/*************************
		nav-single
**************************/
.navSingle {
	margin: 100px 10px 0;
}
.navSingle a {
	padding: 3px 10px;
}
.navPrevious {
	float: left;
}
.navNext {
	float: right;
}


/* ---------- pagenation */

.pages {
	border: none !important;
}
.wp-pagenavi a, .wp-pagenavi span {
	border-radius: 5px;
	border: none !important;
}
.wp-pagenavi a:hover {
	color: #fff;
	background: #1557a0;
}
.wp-pagenavi .current {
	color: #fff;
	background: #e8480f;
}


/* --------------
 reset
-------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
ol,ul{list-style:none}
caption,th{text-align:left}
img {max-width:100% !important; height:auto;vertical-align: bottom;}
iframe {max-width:100% !important; border:none;}

/* --------------
 clearfix
-------------- */
.cf:after,
div:after,ul:after,ol:after,dl:after,
header:after,footer:after,
nav:after,section:after,article:after,aside:after,
.ulList li:after {
	content: ""; 
	display: block;
	clear: both;
}

.none {
	display: none;
}

/* --------------
 base
-------------- */
html {
	background: #fff;}
body {
	color: #111;
	font: 16px/1.4  "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'Lucida Grande',"メイリオ",Meiryo,sans-serif;
	background-color: #fff;
}
body * {
	box-sizing: border-box;
}

/* link */
a {
	color: #487ed3;
	text-decoration: none;
	word-break: break-all;
}
a:hover {
	color: #f77906 !important;
}
a:hover img {
	-moz-opacity: 0.8;
	opacity: 0.8;
}

mark {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcf87e+0,fcf87e+100&0+49,0+49,1+50 */
background: -moz-linear-gradient(top, rgba(252,248,126,0) 0%, rgba(252,248,126,0) 49%, rgba(252,248,126,1) 50%, rgba(252,248,126,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(252,248,126,0) 0%,rgba(252,248,126,0) 49%,rgba(252,248,126,1) 50%,rgba(252,248,126,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(252,248,126,0) 0%,rgba(252,248,126,0) 49%,rgba(252,248,126,1) 50%,rgba(252,248,126,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fcf87e', endColorstr='#fcf87e',GradientType=0 ); /* IE6-9 */
}

.montserrat {
	font-family: 'Montserrat',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",'Lucida Grande',"メイリオ",Meiryo,sans-serif;
}


/* --------------
 modules css
-------------- */



/* ---------- font color */
.clRed { color:#c1272d;}
.clBlue { color:#1d57aa;}
.clOg { color:#FB6500;}
.clGray { color: #666666;}
.clYlw { color: #EFBC0A;}
.clGrn { color: #40b516;}
.clPpl { color: #834cd8;}
.clSBlue { color: #16B7D1;}
.clPink { color: #ff1167; }
.clTeal { color: #21B3B1; }

.clNormal { color: #111; }

.clWt { color: #fff;}



.outlineWt {
	text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,
	 1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

/* ---------- font weight */
.thin {	font-weight: 100;}
.demilight {	font-weight: 300;}
.normal {	font-weight: 400;}
.midium {	font-weight: 500;}
.bold {	font-weight: 700;}
.black {	font-weight: 900;}

/* ---------- align */
.alc { text-align: center !important;}
.alr { text-align: right !important;}
.all { text-align: left !important;}

.alt { vertical-align: top !important;}
.alb { text-align: bottom !important;}
.alba { vertical-align: baseline !important;}


.alj {	
	/* 文字均等割付 */
 text-align: justify !important;
 text-justify: inter-ideograph !important;
}



.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}



/* ---------- float */
.noFloat { float: none !important;}
.flc { margin-left: auto; margin-right: auto; }


/* ---------- Cancele */
.both { clear: both;}

/* ---------- margin,padding */
.mb0 {	margin-bottom: 0px !important;}
.mb5 {	margin-bottom: 5px !important;}
.mb10 {	margin-bottom: 10px !important;}
.mb15 {	margin-bottom: 15px !important;}
.mb20 {	margin-bottom: 20px !important;}
.mb25 {	margin-bottom: 25px !important;}
.mb30 {	margin-bottom: 30px !important;}
.mb35 {	margin-bottom: 35px !important;}
.mb40 {	margin-bottom: 40px !important;}
.mb45 {	margin-bottom: 45px !important;}

.mb1rem {	margin-bottom: 1rem !important;}

.ml0 {	margin-left: 0px !important;}
.ml5 {	margin-left: 5px !important;}
.ml10 {	margin-left: 10px !important;}
.ml20 {	margin-left: 20px !important;}
.ml30 {	margin-left: 30px !important;}

.mr0 {	margin-right: 0px !important;}
.mr5 {	margin-right: 5px !important;}
.mr10 {	margin-right: 10px !important;}
.mr20 {	margin-right: 20px !important;}
.mr30 {	margin-right: 30px !important;}
.mr60 {	margin-right: 60px !important;}

.mt0 {	margin-top: 0px !important;}
.mt5 {	margin-top: 5px !important;}
.mt10 {	margin-top: 10px !important;}
.mt15 {	margin-top: 15px !important;}
.mt20 {	margin-top: 20px !important;}
.mt30 {	margin-top: 30px !important;}

.pb0 {	padding-bottom: 0px !important;}
.pb5 {	padding-bottom: 5px !important;}
.pb10 {	padding-bottom: 10px !important;}
.pb20 {	padding-bottom: 20px !important;}
.pb30 {	padding-bottom: 30px !important;}

.pt0 {	padding-top: 0px !important;}
.pt5 {	padding-top: 5px !important;}
.pt10 {	padding-top: 10px !important;}
.pt20 {	padding-top: 20px !important;}
.pt30 {	padding-top: 30px !important;}

.pl0 {	padding-left: 0px !important;}
.pl5 {	padding-left: 5px !important;}
.pl10 {	padding-left: 10px !important;}
.pl20 {	padding-left: 20px !important;}
.pl30 {	padding-left: 30px !important;}

.pr0 {	padding-right: 0px !important;}
.pr5 {	padding-right: 5px !important;}
.pr10 {	padding-right: 10px !important;}
.pr20 {	padding-right: 20px !important;}
.pr30 {	padding-right: 30px !important;}

/* ----- text */

.fs04 { font-size: 0.4em !important;}
.fs045 { font-size: 0.45em !important;}
.fs05 { font-size: 0.5em; }
.fs06 { font-size: 0.6em; }
.fs07 { font-size: 0.7em; }
.fs08 { font-size: 0.8em; }
.fs09 { font-size: 0.9em; }
.fs10 { font-size: 1.0em; }
.fs11 { font-size: 1.1em; }
.fs12 { font-size: 1.2em; }
.fs13 { font-size: 1.3em; }
.fs14 { font-size: 1.4em; }
.fs15 { font-size: 1.5em; }
.fs16 { font-size: 1.6em; }
.fs17 { font-size: 1.7em; }
.fs18 { font-size: 1.8em; }
.fs19 { font-size: 1.9em; }
.fs20 { font-size: 2.0em; }
.fs21 { font-size: 2.1em; }
.fs22 { font-size: 2.2em; }
.fs23 { font-size: 2.3em; }
.fs24 { font-size: 2.4em; }
.fs25 { font-size: 2.5em; }


.fs5vw { font-size: 5vw; }
.fs7vw { font-size: 7vw; }
.fs10vw { font-size: 10vw; }

@media screen and (min-width: 1001px) { /*以上の時*/
	
.fs5vw { font-size: 50px; }
.fs7vw { font-size: 70px; }
.fs10vw { font-size: 100px; }
}

/* ----- list */
.ulDisc {
	margin-left: 22px;
	line-height: 1.4;
	list-style: outside disc;
}
.ulSquare {
	margin-left: 22px;
	line-height: 1.4;
	list-style: outside square;
}

.olDecimal {
	margin-left: 22px;
	list-style: outside decimal;
}

.ulDisc li, .ulSquare li, .olDecimal li {
	margin-bottom: .3em;
}

/* ----- text */

/* ----- youtube */

.youtubeBox {
	position: relative;
	height: 0;
	padding: 0 ;
	padding-top: 56.27%;
}
.youtubeBox iframe {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}


/* ----- bg */

.bgBox {
	padding: 10px;
}
.bgBk10 {
	background: rgba(0,0,0,.1);
}
.bgBk30 {
	background: rgba(0,0,0,.3);
}
.bgBk60 {
	background: rgba(0,0,0,.6);
}
.bgWt30 {
	background: rgba(255,255,255,.3);
}
.bgWt60 {
	background: rgba(255,255,255,.6);
}
.bgWt {
	background: #fff;
}
.bgRed {
	background: #c1272d;
}
.bgRedImg {
	background: #c1272d url(https://m-78.jp/rb/wp-content/themes/rb/img/bg-red.jpg) top center repeat-y;
	background-size: 100% auto;
	color: #fff;
}
.bgRedImg a {
	color: #fff;
}
.bgGray {
	background: #e2e2e2;
	background: -moz-linear-gradient(-45deg, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
	background: -webkit-linear-gradient(-45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
	background: linear-gradient(135deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
	background-attachment: fixed;
}

.bgGray2 {
	background: #ccc;
	background: -moz-linear-gradient(45deg, #aaa 0%, #ccc 50%, #bbb 51%, #eee 100%);
	background: -webkit-linear-gradient(45deg, #aaa 0%,#ccc 50%,#bbb 51%,#eee 100%);
	background: linear-gradient(45deg, #aaa 0%,#ccc 50%,#bbb 51%,#eee 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaa', endColorstr='#eee',GradientType=1 );
	background-attachment: fixed;
}


/* ----- btn */

.btnA {
	display: inline-block;
	padding: .5em 1em;
	color: #000;
	background: rgba(255,255,255,.9);
	font-weight: 900;
	border: #000 solid 2px;
	box-shadow:
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff;
	font-size: 1.2em;
	line-height: 1;
}

.btnB {
	display: inline-block;
	padding: .3em 1em;
	color: #000;
	background: rgba(255,255,255,.8);
	font-weight: bold;
	border: #000 solid 1px;
	box-shadow:
		1px 1px 0 #fff,
		-1px 1px 0 #fff,
		1px -1px 0 #fff,
		-1px -1px 0 #fff;
	border-radius: 10px;
	line-height: 1;
}

.btnC {
	display: inline-block;
	padding: .2em .5em;
	background: #ddd;
	border-radius: 5px;
	box-shadow: 0 2px 0 #888;
	color: #444;
	line-height: 1;
}

.btnA.next,
.btnB.next {
	padding-right: 1.5em;
	position: relative;
}
.btnA .nextIcon ,
.btnB .nextIcon {
	position: absolute;
	right: .5em;
	height: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.btnA.btnLarge {
	padding-top: .8em;
	padding-bottom: .8em;
}
.btnB.btnLarge {
	padding-top: .5em;
	padding-bottom: .5em;
}




/* ----- bdr */


.bdrAll1s{
	border: #111 solid 1px;
}

.bdrRed{ border-color: #ff0023 !important;}
.bdrBlue{ border-color: #008ad7 !important;}
.bdrGrn{ border-color: #179e0a !important;}
.bdrPpl{ border-color: #943bc7 !important;}
.bdrYlw{ border-color: #d6a93b !important;}

.bdrGray { border-color: #aaa !important;}

.bdrGold { border-color: #D8B611 !important; }

hr.lineA {
	width: 100%;
	height: 0;
	border: 0;
	border-bottom: #aaa solid 1px;
}


.inlineblock {
	display: inline-block;
}
.block {
	display: block;
}


.lh10 {
	line-height: 1.0;
}





/* --------------
 common
-------------- */
/* =container
------------------------------------------------------------------------ **/
#container {
	position: relative;
	display: block;
}


/* =header
-------------------------------------------------------------- **/
#headWrap {
	position: relative;
	z-index: 10000000;
	background: #000;
}

#header {
	width: 100%;
}

#siteHeader img {
	vertical-align: middle;
}

/* =siteHeader
---------------------------------------------------- */
#logo {
	line-height: 1.1;
	float: left;
}
#logo a {
	color: #fff;
	display: block;
}
#bnrYoutube {
	padding: 2.5% 0;
	display: block;
	max-width: 640px;
	float: right;
	text-align: right;
}

/* =globalNav 
---------------------------------------------------- */
#globalNav {
	position: fixed;
	background: #fff;
	
	width: 100%;
	bottom: 0;
	border-top: #000 solid 1px;
	z-index: 10000000;
}
#globalNav a {
	line-height: 1;
	font-weight: bold;
	color: #000;
}
#globalNav a:hover {
	background: #000;
	color: #fff !important;
}
#globalNav a:hover svg .fill {
	fill: #fff !important;	
}
#globalNav .menuIcon {
	display: inline-block;
	width: 90%;
	max-width: 60px;
}

#globalNav .menuIcon svg {
	width: 100%;
	height: auto;
}
#globalNav .menuTxt {
	display: inline-block;
	width: 100%;
	padding-bottom: .5em;
}


#mainNav {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
}
#mainNav > * {
	width: calc((100% / 5) );
}

#mainNav > * >a {
	position: relative;
	display: block;
}

#mainNav:after{
	display: none;
}





/* =topNav 
---------------------------------------------------- */

#topNav {
	background: #fff;
	font-weight: bold;
	border-top: #000 solid 1px;
	border-bottom: #000 solid 1px;
	line-height: 1;
}
#topNav li {
	display: inline-block;
	position: relative;
	transform: skew(-10deg,0);
}
#topNav li + li:before {
	content: '';
	display: block;
	width: 1px;
	height: 50%;
	background: #aaa;
	position: absolute;
	left: -.2em;
	top:0;
	bottom: 0;
	margin: auto;
}
#topNav a {
	padding: .5em;
	padding-top: .7em;
	color: #111;
	display: block;
}
#topNav a:hover {
	color: #e62424 !important;
}

/* =visual
---------------------------------------------------- */
#visual {
}

/* =contents
-------------------------------------------------------------- **/
#main {
/*	padding-top: 30px;*/
	padding-bottom: 70px;
}
.contents {
	padding: 30px 0;
}
.contents p {
	margin-bottom: 1rem;
}


/* 画像中央寄せトリミング */
.centerPhoto {
	position: relative;
	/*width: 100%;*/
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	
}

.centerPhoto img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	max-height: 100%;
}

/* 4:3 */
.centerPhoto.size43 {
	padding-top: 75%;
}
/* 1:1 */
.centerPhoto.size11 {
	padding-top: 100%;
}
.centerPhoto.size11 img {
	transform: scale(1.5);
}





/* =headline / titles
---------------------------------------------------- */
.contents h1 {
	font-size: 2.0em;
	margin-bottom: 1.5rem;
	line-height: 1.1em;
}
.contents h2 {
	font-size: 1.6em;
	margin-top: 1rem;
	margin-bottom: .5rem;
	line-height: 1.1em;
}
.contents h3 {
	font-size: 1.4em;
	margin-top: 1rem;
	margin-bottom: .5rem;
	line-height: 1.1em;
}
.contents h4 {
	font-size: 1.1em;
	margin-top: 1rem;
	margin-bottom: .5rem;
	line-height: 1.1em;
}

#clm_page h2 {
	position: relative;
	border-top: #888 solid 2px;
	border-bottom: #888 double 4px;
	padding: .2em 0;
}
#clm_page h3 {
	position: relative;
	border-bottom: #888 solid 1px;
	padding: .2em 0;
}
#clm_page h4 {
	position: relative;
	border-bottom: #888 dashed 1px;
	padding: .2em 0;
}




/* =table
---------------------------------------------------- */
table,
th,
td {
	border-collapse: collapse;
	border:1px solid #aaa;
}
table {
	width: 100%;
}
th,
td {
	padding: 5px 10px;
}
th {
	text-align: center;
	vertical-align: top;
	background: rgba(0,0,0,.1);
}

.onairTbl {
	margin-bottom: 1rem;
}

.contents dt {
	font-weight: bold;
}
.contents dd {
	margin-left: .5em;
}



.itemList a {
/*	border: #333 solid 1px;
	padding: 5px;
	background: #fff;*/
	height: 100%;
}

/*.newsList li {
	padding-top: 1em;
}
.newsList a .datetime {
	position: absolute;
	bottom: 100%;
	width: 100%;
}
*/

.newsList a .datetime {
	line-height: 1;
	font-size: .8em;
/*	margin-top: -5px;
	margin-left: -5px;*/
	margin-bottom: 5px;
}
.newsList a .datetime time {
	display: inline-block;
	background: #aaa;
	color: #fff;
	padding: .2em .3em;
}

.newsList .centerPhoto {
	background: #b31c1c;
}
/* =footer
-------------------------------------------------------------- **/
#footer {
	position: relative;
	clear: both;
	/*background: rgba(42,21,88,.9);*/
	padding-top: 20px;
	color: #fff;
}

#footer a {
	color: #000;
}


/* =siteFooter
---------------------------------------------------- */

#siteFooter {
	margin-top: 3%;
	background: #ccc;
	border-top: #000 double 4px;
}

.footerNav {
	padding: .5rem;
}

/* =sns_area
-------------------------------------------------------------- **/
.snsBox {
	text-align: center;
}
.btnSns a {
	display: inline-block;
	padding: 8px 13px;
	border-radius: 5px;
	color: #fff !important;
	background: #ccc;
	box-shadow: 0 3px 0 #aaa;
	text-decoration: none;
	margin-bottom: 10px;
}
.btnSns a:hover {
	opacity: .7;
}
.btnTw a {
	background: #00acee;
	box-shadow: 0 3px 0 #0092ca;
}
.btnFb a {
	background: #3b5998;
	box-shadow: 0 3px 0 #2c4373;
}
.btnLine a {
	background: #00c300;
	box-shadow: 0 3px 0 #2f9427;
}

.postSns {
	margin-top: 20px;
	border-top: #aaa dashed 1px;
	padding-top: 10px;
}


/* =copyright
------------------------------------------ */
#copyright {
	padding: 5px 0;
	text-align: center;
	color: #fff;
	background: #000;
}
#copyright a {
	color: #FFF;
	text-shadow: 0 0 2px #000;
}

/* =pageTop
---------------------------------------------------- */
#pageTop {
	display: block;
	position: fixed;
	z-index: 1000;
}
#pageTop a {
	display: block;
	color: #fff;
	background: rgba(0,0,0,.3);
	padding: .3em .5em;
}

#pageTop a:hover {
	opacity: 0.8;
}



/* --------------
 home container
-------------- */
#visual {
	position: relative;
}
#visual a {
	position: absolute;
	display: block;
	width: 35%;
	height: 10%;
	border: #fff solid 1px;
	right: 7.5%;
}
#visual a:hover {
	background: rgba(255,255,255,.4);
}
#visual a.btn1 {
	top: 62%;
}
#visual a.btn2 {
	top: 74%;
}



#visual.addmovie a.btn1 {
	top: 54%;
}
#visual.addmovie a.btn2 {
	top: 65%;
}
#visual.addmovie a.btn3 {
	top: 77%;
	height: 17%;
}



.homeCont h1 {
	position: relative;
}
.homeCont h1 span {
	float: left;
	margin-right: .5em;
}
.homeCont h1:before {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: .10em;
	background: #ccc;
}
#homeNews.homeCont h1 small {
	max-width: calc( 100% - 6rem);
}
#homeWebcast.homeCont h1 small {
	max-width: calc( 100% - 165px);
}
#homeTwitter.homeCont h1 small {
	max-width: calc( 100% - 10rem);
}


#homeStory {
	padding: 0;
/*	background-color: #000;
	background-image:
		url(../img/bg-fire.png),
		url(../img/bg-water.png);
	background-size: 
		40% auto,
		40% auto;
	background-position:
		right -10% center,
		left -10% center;
	background-repeat: no-repeat, no-repeat;*/
}


.contents h1.toggle {
	position: relative;
	cursor: pointer;
	padding-right: .5em;
	font-size: 1.6em;
}
.contents h1.toggle:hover {
	text-shadow: 2px 2px 0 #ccc;
}

.contents h1.toggle .toggleIcon {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	font-size: .6em;
}
.contents h1.toggle.open .toggleIcon {
	transform: rotate(180deg);
}
.contents h1.toggle + .toggleBox {
	padding-top: 3%;
}


.introBox {
	border: #000 solid 1px;
	padding: 10px;
	background: rgba(255,255,255,.8);
}


.aboutList dt {
	font-size: 1.1em;
}
.aboutList dt:nth-of-type(n+1) {
	margin-top: .5em;
	
}

/* =story
---------------------------------------------------- */

#storyNav {
	padding: .1em .3em;
	border: #111 solid 1px;
	border-radius: 5px;
}
#storyNav li {
	display: inline-block;
}

.clmStory {
	border: #111 double 4px;
	margin-top: 2rem;
	padding: 5px;
	position: relative;
}
.clmStory h2 {
	margin-top: 0;
}


/* =character
---------------------------------------------------- */
#charaNav, #rbNav {
	text-align: center;
	margin-bottom: 1rem;
}
#charaNav {
	font-size: 1.2em;
	margin-bottom: 1.5rem;
}
#charaNav a, #rbNav a {
	display: block;
	padding: .3em .2em;
	border: #000 solid 1px;
	font-weight: bold;
	color: #000;
	height: 100%;
}
#charaNav a:hover, #rbNav a:hover {
	color: #000 !important;
	opacity: .7;
}



/* =cast
---------------------------------------------------- */
.box-quattrom {
	border: #ccc solid 2px;
}
#info-quattrom {
	border: #888 solid 2px;
	margin-bottom: 1rem;
}
#info-quattrom .inner {
	padding: 8px;
}
.inner-quattrom hr:last-child {
	display: none;
}

.inner-quattrom {
	padding: 5px;
}
#info-quattrom .leftBox {
	background: #A0A0A0;
}

.castBox h2 {
	position: relative;
	border-top: #aaa solid 2px;
	border-bottom: #aaa double 4px;
	padding: .2em 0;
}
.slider:not(.slick-initialized){
	display: none;
}
.slider .slick-slide {
	width: 100%;
}
.slider .slick-slide img {
	margin: auto;
}

.charaCont .charaBox.active {
	display: block;
}
.charaCont > .charaBox:not(.active) {
	display: none;
}
.typeNav img.active {
	opacity: 1;
}
.typeNav img:not(.active) {
	opacity: .5;
}


.box-rb {
	border: #D8B611 solid 10px;
	padding: 5px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3f3f3+41,ffffff+43,ffffff+59,f3f3f3+64,ededed+94 */
background: #f3f3f3; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f3f3f3 41%, #ffffff 43%, #ffffff 59%, #f3f3f3 64%, #ededed 94%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #f3f3f3 41%,#ffffff 43%,#ffffff 59%,#f3f3f3 64%,#ededed 94%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f3f3f3 41%,#ffffff 43%,#ffffff 59%,#f3f3f3 64%,#ededed 94%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#ededed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
	
}
.box-rosso {
	border: #ff0023 solid 10px;
	padding: 5px;
}

.box-blu {
	border: #008ad7 solid 10px;
	padding: 5px;
}

.clmRb > * {
	position: relative;
}
.typeNav {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 100000;
	width: 15%;
}


/* .expandField
------------------------- */

.expandField {
	width: 100% !important;
	display: block;
	/*background: rgba(0,0,0,.8);*/
	position: relative;
	overflow: hidden;
	margin: 0;
	float: left;
	border: #333 solid 5px;
	background: rgba(0,0,0,.3);
}
.expandField .btnClose {
	top: 0;
	right: 0;
	width: 37px;
	height: 37px;
	display: block;
	background: url(../img/btnClose.png@0525) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnPrev {
	top: 50%;
	transform: translateY(-50%);
	left: 3px;
	width: 19px;
	height: 37px;
	display: block;
	background: url(../img/btnPrev.png@0525) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnNext {
	top: 50%;
	transform: translateY(-50%);
	right: 3px;
	width: 19px;
	height: 37px;
	display: block;
	background: url(../img/btnNext.png@0525) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}

.expandField {
}
.expandField .selfRepInner {
	position: relative;
	padding: 40px;
}


.expandField .selfRepInner .secLeft {
	position: relative;
}

.expandField .selfRepInner .secLeft i {
	position: absolute;
	z-index: 10;
}
.expandField .selfRepInner .secLeft p {/* the_content */
}

.expandField .selfRepInner .secRight {
	text-align: left;
	/*background: rgba(255,255,255,.7);*/
}


.pointer {
	cursor: pointer;
}


.listCover .listItem {
	position: relative;
	margin: 5px 0;
	margin-right: -.35em;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	letter-spacing: normal;
	line-height: 1.2em;
	vertical-align: top;
	box-sizing: border-box;
}
.listCover .listItem.active:before {
	content: '';
	display: block;
	width: 0;
	height: 0;
	margin: auto;
	border-width: 15px 30px 0 30px ;
	border-style: solid;
	border-color: transparent;
	border-top-color: #000;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1;
}
.listCover .listItem:hover img {
	opacity: 1;
}
.listCover .listItem:hover .kaijuName,
.listCover .listItem.active .kaijuName {
	opacity: 1;
  transition: all 0.1s ease;
}
.kaijuName {
	opacity: 0;
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	color: #fff;
	font-weight: 900;
  transition: all 0.3s ease;
}
.kaijuName .inner {
	position: relative;
	width: 100%;
	height: 100%;
}
.kaijuName .inner .kaijuNameTxt {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
}

.selfRep {
	display: none;
}
.secRight {
	padding: 0 10px;
	padding-bottom: 10px;
}

.charaMetaList dt {
	float: left;
	width: 3.5em;
	clear: both;
	text-align: right;
	margin-right: .5em;
}


/* =movielist
---------------------------------------------------- */

.movieList li {
	border: #ccc solid 1px;
	padding: 5px;
}




/* =news
---------------------------------------------------- */

.pagination {
	text-align: center;
}
.pagination a,
.pagination span {
	display: inline-block;
	height: 100%;
	padding: .5em 0;
	width: 2em;
	border: #333 solid 1px;
	line-height: 1;
}
.pagination span.dots{
	border-color: transparent;
}
.pagination span.current{
	background: #ccc;
}
.pagination a:hover {
	background: #ccc;
}

.postBox {
	margin-bottom: 2rem;
}
.postBox h1 {
	padding: .3em;
	background: #eee;
}


