@import url("/um/v7/css/reset.css");
@import url("https://www.tbs.co.jp/saitamanohost_tbs/css/snsicons.css");
@import url("keyframes.css");


@media all and (min-width: 768px) {
div.bn-recta {
	padding-top:40px;
	margin-bottom:40px;
}
}
@media all and (max-width: 767px) {
div.bn-recta {
	padding-top:20px;
	margin-bottom:20px;
}
}


/* =================================
	Web Fonts
================================= */
div.header header p,
div.stream aside div.unit h2,
div.story article header p > span,
div.sns > aside section h3,
div.inner > dl dt span.role,
div.stream > aside > div.unit p.csoon,
h2.h2-story > span.title > span,
section.story-bn ul li span a.lazy-done:before {
	font-family: "ta-mincho-gf-01", sans-serif;
	font-weight: 400;
	font-style: normal;
}
div.inner > dl dt span.role rt {
	font-family: "dnp-shuei-mincho-pr6", sans-serif;
}


div.wnew section h2 span,
div.menu nav ul li a span,
div.story article div.txt div.btn a,
div.chara article header h2 span,
div.story article header h2,
div.tbs-topics article header h2 span,
main > article > header h1 span,
.caststaff main > article > div.unit > article > h2,
.story main > article > div.outer > div.inner > h2.h2-story span.ep {
	font-family: "ta-f1blockline", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.caststaff main > article > header h1 span {
	letter-spacing:-0.2em;
}


/* =================================
	CSS
================================= */

/* link */
a:link {
	text-decoration:underline;
	color:#c00;
}
a:visited {
	text-decoration:none;
	color:#c00;
}
a:active {
	text-decoration:none;
	color:#c00;
}
a:hover {
	text-decoration:underline;
	color:#c00;
}

/* font size */
.xxl {
	font-size:150%;
}
.xl {
	font-size:125%;
}
.l {
	font-size:112.5%;
}
.s {
	font-size:83%;
}
.xs {
	font-size:75%;
}
.xxs {
	font-size:62.5%;
}

@media all and (max-width: 374px) {
.xl, .xxl {
	font-size:112.5%;
}
.s, .xs {
	font-size:62.5%;
}
}

/* smp br */
@media all and (min-width: 768px) {
.br-smp {
	display:none;
}
}

.ff {
	font-family:serif;
}
.lazy {
	display:block;
	position:relative;
}
.wbr {
	white-space: nowrap;
	display: inline-block;
}

/*	copyright
============================== */
div.copyright {
	background-color:hsla(50,78%,90%,.9);
}
div.copyright p {
	line-height:1.25;
	text-align:center;
}
div.copyright p > small {
	display:block;
}
@media all and (min-width: 768px) {
	div.copyright p {
		font-size:75%;
	}
	div.copyright p > small {
		padding:40px 0;
	}
	div.copyright p a:hover {
		text-decoration:none;
	}
}
@media all and (max-width: 767px) {
	div.copyright p {
		font-size:62.5%;
	}
	div.copyright p > small {
		padding:30px 12px;
	}
}

/*	background
============================== */
body {
	color: black;
	text-align:center;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust: 100%;
	font-family:"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}
div.cover {
	/*
	font-family: "biz-udmincho", sans-serif;
	font-weight: 400;
	font-style: normal;
	*/
	font-family: "dnp-shuei-mincho-pr6", sans-serif;
	font-weight: 400;
	font-style: normal;
	/**/
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
	overflow:hidden;
}
div.cover b {
	font-weight: 600;
}
@media all and (min-width: 768px) {
div.cover {
	padding-bottom:40px;
}
}
@media all and (max-width: 767px) {
div.cover {
	min-width:320px;
	padding-bottom:20px;
}
}

/*	fix bg
============================== */
body {
	background-color:#faa4a4;
}
@media all and (min-width: 768px) {
body {
	background-image: url(../img/bg.jpg?1);
	background-repeat:repeat;
	background-attachment:fixed;
	background-position: center center;
}
}
@media all and (max-width: 767px) {
body:before {
	content: "";
	width:100vw;
	height:100vh;
	background-image: url(../img/bg.jpg?1);
	position: fixed;
	background-repeat:repeat;
	background-position: center center;
	top: 0px;
	left: 0px;
	z-index: -1; 
}
}
/*	YouTube
============================== */
div.mov-inner {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-color:#000;
	background-size:cover;
}
div.mov-inner iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 768px) {
body.story main > article > div.mov-outer {
	margin:0 auto 40px;
	max-width:800px;
}
}
@media all and (max-width: 767px) {
body.story main > article > div.mov-outer {
	margin:0 12px 20px;
}
}
@media print {
div.mov-inner {
	display:none;
}
}


/*	YouTube buttons
============================== */
ul.yt-lists {
	width:100%;
	background-color:hsla(351,100%,73%,0.4);
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding:8px;
}
ul.yt-lists li:not(:last-child) {
	margin-right:8px;
}
ul.yt-lists li span, ul.yt-lists li a {
	display:block;
}
ul.yt-lists li a {
	text-decoration:none;
	color:#0c467c;
	background-color:#fff;
	padding:1em;
	line-height:1.5;
	position:relative;
	text-align:center;
}
ul.yt-lists li a.yt-playing {
	background-color:#186e84;
}
ul.yt-lists li a.yt-playing span {
	font-weight:bold;
	color:#ffe0f4;
}
ul.yt-lists li a.yt-playing:after {
	content:"NOW PLAYING";
	background-color:yellow;
	/**/
	/**/
	color:#000;
	display:inline-block;
	line-height:1.25;
	font-size:75%;
	padding:0.1em 0.5em;
	position:absolute;
	top:-4px;
	right:-4px;
}
@media all and (min-width: 768px) {
body.story div.yt-playlist {
	margin:0 auto 40px;
	max-width:800px;
}
ul.yt-lists li {
	width:calc((100% - 8*2px)/3);
}
ul.yt-lists li a span {
	font-size:112.5%;
}
}
@media all and (max-width: 767px) {

body.story div.yt-playlist {
	margin:0 12px 20px;
}
ul.yt-lists li {
	width:calc((100% - 8px)/2);
}
ul.yt-lists li:first-child {
	width:100%;
	margin-right:0;
	margin-bottom:8px;
}
ul.yt-lists li a span {
	font-size:83%;
}
}



/*	.header p
============================== */
div.header header p:not(.logo) {
	color:#000;
	text-align:center;
	line-height:1.5;
	/*text-shadow:2px 3px 3px hsla(0,0%,0%,0.2);
	text-shadow:1px 1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 2px 3px 0 #fff;*/
	margin-top:0.25em;
}
div.header header p:not(.logo) > span {
	display:inline-block;
	background-image: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(0.5, transparent), color-stop(0.5, hsla(50,78%,90%,.3)), to(hsla(50,78%,90%,.3)));
	background-image: linear-gradient(transparent 50%, hsla(50,78%,90%,.3) 50%);
	padding:0 0.25em;
	/*
	letter-spacing:0.1em;
	text-indent:0.1em;
	*/
	text-shadow:0 0 6px hsla(0,0%,0%,0.3);
}
div.header header p:not(.logo) > span > span {
	font-size:125%;
	color:#e4322e;
}
@media all and (min-width: 768px) {
div.header header p:not(.logo) {
	font-size:250%;
}
}
@media all and (max-width: 767px) {
div.header header p:not(.logo) {
	font-size:5vw;
}
}

/*	menu
============================== */
div.menu {
	background-color:hsla(50,78%,90%,.9);
}
div.menu nav {
	position:relative;
	z-index:2;
	text-align:left;
}
div.menu nav ul {
	display:flex;
	justify-content:center;
	width:100%;
}
div.menu nav ul li span,
div.menu nav ul li a {
	display:block;
}
div.menu nav ul li a {
	text-align:center;
	text-decoration:none;
	background-color:hsla(260,18%,25%,1);
	background-color:#455f88;
}
.about div.menu nav ul li.about a,
.story div.menu nav ul li.story a,
.caststaff div.menu nav ul li.staff a,
.character div.menu nav ul li.chara a,
.news div.menu nav ul li.news a,
div.menu nav ul li a:hover {
	background-color:#de7248;
}
div.menu nav ul li a span {
	color:#fcf8e0;
	text-shadow:2px 2px 4px hsla(0,0%,0%,0.6);
	display:block;
	line-height:1.5;
	border:2px solid #fcf8e0;
	padding:0.5em 0;
}
div.menu nav ul li:first-child a span {
	letter-spacing:-3px;
}
div.menu nav ul li a span:before {
	content:"";
	display:block;
	background-image:url(../img/glasses.png);
	background-position:center top;
	background-size:cover;
	background-repeat:no-repeat;
}
/*
div.menu nav ul li:nth-last-child(3) {
	opacity:0.5;
}
div.menu nav ul li:nth-last-child(3) a {
	cursor:default;
	pointer-events:none;
}
*/
@media all and (min-width: 768px) {
div.menu {
	padding:10px 0;
}
div.menu nav {
	max-width:1080px;
	margin:0 auto;
}
div.menu nav ul li {
	width:17%;
}
div.menu nav ul li:nth-child(1) {
	width:28%;
}
div.menu nav ul li:nth-child(2) {
	width:21%;
}
div.menu nav ul li:not(:last-child) {
	margin-right:0.5%;
}
div.menu nav ul li a {
	padding:6px;
	-webkit-box-shadow:hsla(260,18%,25%,1) 0 0 60px 0 inset;
	box-shadow:hsla(260,18%,25%,1) 0 0 60px 0 inset;
}
.about div.menu nav ul li.about a,
.story div.menu nav ul li.story a,
.caststaff div.menu nav ul li.staff a,
.character div.menu nav ul li.chara a,
.news div.menu nav ul li.news a,
div.menu nav ul li a:hover {
	-webkit-box-shadow:hsla(15,72%,45%,1) 0 0 60px 0 inset;
	box-shadow:hsla(15,72%,45%,1) 0 0 60px 0 inset;
}
div.menu nav ul li a span:before {
	width:96px;
	height:40px;
	margin:0 auto 10px;
}
}
@media all and (min-width: 980px) {
div.menu nav ul li a {
}
div.menu nav ul li a span {
	font-size:170%;
	font-size:150%;
}
}
@media all and (min-width: 768px) and (max-width: 979px) {
div.menu nav ul li a {
	padding:4px;
}
div.menu nav ul li a span {
	font-size:125%;
}
div.menu nav ul li a span:before {
	width:86px;
	height:36px;
	margin:0 auto 8px;
}
}
@media all and (max-width: 767px) {
div.menu {
	padding:2%;
}
div.menu nav ul {
	flex-wrap:wrap;
}
div.menu nav ul li:nth-child(1), div.menu nav ul li:nth-child(2) {
	width:49.5%;
	margin-bottom:1%;
}
div.menu nav ul li:nth-child(1), div.menu nav ul li:nth-child(3), div.menu nav ul li:nth-child(4) {
	margin-right:1%;
}
div.menu nav ul li:nth-child(3), div.menu nav ul li:nth-child(4), div.menu nav ul li:nth-child(5) {
	width:32.666666666666667%;
}
div.menu nav ul li a {
	padding:3px;
	-webkit-box-shadow:hsla(260,18%,25%,1) 0 0 30px 0 inset;
	box-shadow:hsla(260,18%,25%,1) 0 0 30px 0 inset;
}
.about div.menu nav ul li.about a,
.story div.menu nav ul li.story a,
.caststaff div.menu nav ul li.staff a,
.character div.menu nav ul li.chara a,
.news div.menu nav ul li.news a,
div.menu nav ul li a:hover {
	-webkit-box-shadow:hsla(15,72%,45%,1) 0 0 30px 0 inset;
	box-shadow:hsla(15,72%,45%,1) 0 0 30px 0 inset;
}
div.menu nav ul li a span {
	font-size:4.5vw;
}
div.menu nav ul li a span:before {
	width:82px;
	height:34px;
	margin:0 auto 6px;
}
}

/*	p.lines
============================== */
p.lines, dd.lines {
	background-position:left bottom;
	background-repeat:repeat;
	text-align:justify;
	text-justify:inter-ideograph;
	padding:0 0.75em;
}
@media all and (min-width: 768px) {
p.lines, dd.lines {
	font-size:125%;
	background-image:url(../img/line36.png);
	line-height:36px;
	background-size:36px 36px;
}
p.lines:not(:last-child), dd.lines:not(:last-child) {
	margin-bottom:36px;
}
}
@media all and (max-width: 767px) {
p.lines, dd.lines {
	font-size:112.5%;
	background-image:url(../img/line30.png);
	line-height:30px;
	background-size:30px 30px;
}
p.lines:not(:last-child), dd.lines:not(:last-child) {
	margin-bottom:30px;
}
}


/*	.pagetop
============================== */
div.pagetop {
	position:fixed;
	transition: right ease 1s;
	display:none;
	z-index:2;
}
div.pagetop a {
	display:block;
	background-image:url(../img/btn_pagetop.png?1);
	background-size:cover;
	text-indent:110%;white-space:nowrap;overflow:hidden;
	background-repeat:no-repeat;
	background-position:right bottom;
}
@media all and (min-width: 768px) {
div.pagetop {
	bottom:20px;
}
div.pagetop-on {
	right:0;
}
div.pagetop-off {
	right:-104px;
}
div.pagetop a {
	width:100px;
	height:100px;
}
}
@media all and (max-width: 767px) {
div.pagetop {
	bottom:72px;
}
div.pagetop-on {
	right:0;
}
div.pagetop-off {
	right:-70px;
}
div.pagetop a {
	width:68px;
	height:68px;
}
}