@charset "utf-8";

@media screen and ( min-width:768px ) { /* PC ==================== */
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
}

.bg-character{
	top:0;

}
.content-footer{
	z-index: 4;
}
.content-blue-bg{
  width:100%;
  padding:20px 30px 30px 30px;
  background-color: #07587c;
  border-radius: 20px;
  position: relative;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
	.content-blue-bg{
  padding:20px 30px 30px 30px;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
.content-blue-bg{
  padding:10px 10px 20px 10px;
}
}
.cast h3{
	text-align:center;
	margin:30px 0 10px 0;
	padding:0 0 5px 0;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
	.cast h3{
	font-size:180%;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
		.cast h3{
	font-size:150%;
}
}
.cast dt,
.staff dt{
	float: left;
	text-align: right;
	margin: 5px 0;
}
.cast dd,
.staff dd{
	float: right;
	text-align: left;
	margin: 5px 0;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
	.cast dt,
.staff dt{
	width:48%;
	font-size:120%;
}
.cast dd,
.staff dd{
	width:48%;
	font-size:120%;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
.cast dt{
	width:48%;
	font-size: 80% !important;
}
.cast dd{
	width:48%;
	font-size: 80% !important;
}

.staff dt{
	width:40%;
	font-size: 80% !important;
}
.staff dd{
	width:56%;
		font-size: 80% !important;
}
}


.pic_cast{
	width:50%;
	position:absolute;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
	.pic_cast{
	top:-200px;
	right:-150px;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
		.pic_cast{
	top:-100px;
	right:-90px;
}
}

.staff h3{
	text-align:center;
	font-size:150%;
}