@charset "utf-8";
/* 見出し */
.subt {
	display: block;
	box-sizing: border-box;
	padding: 8px 6px 8px;
	margin: 10px auto 10px;
	text-align: center;
	line-height: 1;
	font-size: 160%;
	font-weight: 700;
	color: #ff5fb7;
	text-shadow: 1px 2px #fff;
}
@media screen and (max-width: 619px) {
	.subt {
		margin: 10px auto;
	}
}
.s_heading {
	box-sizing: border-box;
	padding: 0 0.5em;
	margin: 8px 0 8px;
	color: #ff5fb7;
	text-shadow: none;
	display: inline-block;
	line-height: 1.5;
	border-left: solid 0.5em #ff5fb7;
}
/*Coming soon*/
.comingsoon {
	padding: 20px 0;
	text-align: center;
	text-shadow: 2px 2px #fff;
}
/* introduction */
#wrap_introduction .entrybox02 {
	width: 100%;
	padding: 50px 10px;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	background: url("../images/under/entry_bg.png") repeat center top;
	border: solid 1px #fff;
}
.introductionbox {
	text-align: center;
}
/* 場面写 */
.thum {
	margin: 20px 0 0;
	text-align: center;
}
.thum img {
	border: solid 1px #c8c2ff;
	margin: 0 6px 0;
}
@media screen and (max-width: 619px) {
	.thum {
		text-align: center;
	}
	.thum img {
		max-width: 90%;
		height: auto;
		margin: 0 1% 10px;
	}
}
/* episodes */
#epinav {
	margin: 20px 10px 20px 10px;
	padding: 0;
	text-align: center;
	clear: both;
}
#epinav a {
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	background-color: #ff5fb7;
	border: solid 2px #fff;
	padding: 8px 18px;
	margin: 2px 0;
	border-radius: 12px;
	display: inline-block;
}
#epinav a:hover {
	color: #fff;
	background-color: #c8c2ff;
	border: solid 2px #fff;
}
.current_page {
	color: #fff;
	background-color: #85d8ff;
	padding: 8px 18px;
	margin: 2px 0;
	border: solid 2px #85d8ff;
	border-radius: 12px;
	display: inline-block;
}
/* キャラクター */
.chara_li1 {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 0 0;
	padding: 0;
	text-align: center;
	text-shadow: 1px 2px #fff;
}
.chara_li2 {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	text-shadow: 1px 2px #fff;
}
.chara_li1 li {
	width: 50%;
	box-sizing: border-box;
	text-align: left;
	padding: 0 0 0 0;
	margin: 0 auto 60px auto;
	position: relative;
}
.chara_li2 li {
	width: 50%;
	box-sizing: border-box;
	text-align: left;
	padding: 0 0 0 0;
	margin: 0 auto 60px auto;
	position: relative;
}
.chara_li1 li img, .chara_li2 li img {
	width: 100%;
}
@media screen and (max-width: 619px) {
	.chara_li2 {
		display: inherit;
		flex-wrap: wrap;
	}
	.chara_li1 li {
		width: 98%;
		padding: 0 0 0 0;
		margin: 0 auto 60px auto;
	}
	.chara_li2 li {
		width: 98%;
		padding: 0 0 0 0;
		margin: 0 auto 60px auto;
	}
}
/* スタキャス */
.staffbox {
	box-sizing: border-box;
	margin: 0 1% 0 1%;
	padding: 0;
}
.staffbox li {
	box-sizing: border-box;
	text-align: center;
	padding: 0 0 2% 0;
}
.staffbox span {
	display: block;
	font-size: 90%;
	color: #ff5fb7;
	font-weight: 900;
	padding: 0 0 0.5% 0
}
.staffbox2 {
	width: 100%;
	box-sizing: border-box;
	margin: 0 1% 20px 1%;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.staffbox2 li {
	width: 50%;
	box-sizing: border-box;
	text-align: center;
	padding: 0 0 2% 0;
}
.staffbox2 span {
	display: block;
	font-size: 90%;
	color: #ff5fb7;
	font-weight: 900;
	padding: 0 0 0.5% 0
}
/*コメント用モーダル*/
.modal_wrap input {
	display: none;
}
.modal_overlay {
	display: flex;
	justify-content: center;
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	transition: opacity 0.5s, transform 0s 0.5s;
	transform: scale(0);
}
.modal_trigger {
	position: absolute;
	width: 100%;
	height: 100%;
}
.modal_content {
	align-self: center;
	box-sizing: border-box;
	position: relative;
	width: 96%;
	max-width: 900px;
	padding: 40px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, .6);
	vertical-align: middle;
	transition: 0.5s;
}
.close_button {
	z-index: 20;
	position: absolute;
	top: 10px;
	right: 10px;
	color: #696969 !important;
	font-size: 30px;
	font-weight: 700;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	display: inline-block;
	vertical-align: middle;
	background: #fff;
	width: 1em;
	height: 1em;
	border: 0.1em solid currentColor;
	border-radius: 50%;
	box-sizing: content-box;
}
.close_button > span {
	width: 70%;
	height: 0.1em;
	color: #696969;
	background: currentColor;
	border-radius: 0.1em;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.close_button > span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	transform: rotate(90deg);
}
.modal_wrap input:checked ~ .modal_overlay {
	opacity: 1;
	transform: scale(1);
	transition: opacity 0.5s;
}
.modal_wrap input:checked ~ .modal_overlay .modal_content {
	transform: translateY(20px);
}
.modal_content p {
	text-align: left;
	overflow: hidden;
	padding: 10px;
}

p.comment_title {
	font-size: 140%;
	position: relative;
	overflow: hidden;
	background-image: radial-gradient(circle, #ffa5cf 3px, transparent 3px);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 22px 6px;
	padding-bottom: 16px;
}
.comment_title strong {
	color: #ff5fb7;
	font-weight: 600;
}

.modal_content p.comment_txt{
	padding:16px;
}

.modal_content p.comment_txt strong{
	font-weight: 600;
	color: #ff5fb7;

}
.modal_content p.comment_txt strong::before{
	content: "●"
}

.comment_img {
	float: left;
	padding: 10px 20px 10px 10px;
	width: 30%;
}
@media screen and (max-width: 619px) {
	.modal_content {
		align-self: flex-start;
	}
	.comment_img {
		float: inherit;
		padding: 0 0 10px 0;
		width: 100%;
	}
}
/* 放送局情報 */
/*テキストボタン*/
.txtbtn {
	text-align: center;
}
.txtbtn a {
	display: inline-block;
	padding: 10px 16px;
	background: #ff5fb7;
	color: #fff;
	text-shadow: 1px 2px #333;
	text-align: center;
	margin: 6px;
	border-radius: 14px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border: solid 2px #fffe9d;
	box-shadow: 2px 2px #fffe9d;
}
.txtbtn a:hover {
	background: #c8c2ff;
	text-shadow: 1px 1px #333;
	color: #fff;
	border: solid 2px #fffe9d;
}