@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : top.css
Description :
===================================================================== */

/* =====================================================================
*    #header
* =================================================================== */
.header {
	position: relative;
	background: url(../images/bg_black.jpg) repeat center top;
	background-size: 20% auto;
	padding-bottom: 3.125%;
}

@media screen and (min-width:640px){
	.header {
		padding-bottom: 20px;
		background: url(../images/bg_black.jpg) repeat center top;
		background-size: 128px auto;
	}
}

@media screen and (min-width:700px){
	.header {
		padding-bottom: 0;
	}
}

/* .mainvisual
---------------------------------------------------------- */
.mainvisual {
	position: relative;
	overflow: hidden;
}

.mainvisual .site_ttl .img_lead {
	width: 4.0625%;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	margin-top: 3.75%;
	margin-left: 15.3125%;
}

.mainvisual .site_ttl .img_logo {
	width: 25.625%;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	margin-top: 3.125%;
	margin-left: -12.8125%;
}

.mainvisual .img_catch {
	width: 5.3125%;
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
	margin-top: 3.725%;
	margin-left: -20.625%;
}

.mainvisual .img_mainvisual {
	width: 109.375%;
	position: relative;
	left: 50%;
	margin-left: -54.6875%;
}

.mainvisual .img_onair {
	width: 100%;
	background: url(../images/bg_onair_sp.jpg) repeat center top;
	background-size: 43.75% auto;
	position: relative;
	bottom: 0;
	padding: 4.0625% 0 5.3125%;
}

.mainvisual .img_onair::after {
	content: "";
	width: 100%;
	height: 0;
	padding-top: 0.9375%;
	display: block;
	background: url(../images/bg_line.jpg) repeat-x center top;
	background-size: 56.25% auto;
	position: absolute;
	bottom: 0;
}

.mainvisual .img_onair img {
	width: 87.5%;
	margin: auto;
}

@media screen and (min-width:640px){
	.mainvisual .img_onair {
		background: url(../images/bg_onair_sp.jpg) repeat center top;
		background-size: 280px auto;
        position: relative;
    	bottom: 0;
		padding: 26px 0 34px;
	}

	.mainvisual .img_onair::after {
		padding-top: 6px;
		background: url(../images/bg_line.jpg) repeat-x center top;
		background-size: 360px auto;
	}

	.mainvisual .img_onair img {
		width: 530px;
	}
}

@media screen and (min-width:700px){
	.mainvisual {
		background: url(../images/bg_mainvisual_pc.jpg) no-repeat center top;
		background-size: 156.25% auto;
	}

	.mainvisual .site_ttl .img_lead {
		width: 2.34375%;
		margin-top: 1.5625%;
		margin-left: -19.6875%;
	}

	.mainvisual .site_ttl .img_logo {
		width: 14.84375%;
		margin-top: 1.5625%;
		margin-left: -35.15625%;
	}

	.mainvisual .img_catch {
		width: 3.125%;
		margin-top: 1.5625%;
		margin-left: -39.21875%;
	}

	.mainvisual .img_mainvisual {
		width: 93.75%;
		margin-left: -46.875%;
	}

	.mainvisual .img_mainvisual img {
		display: none;
	}

	.mainvisual .img_mainvisual::before {
		content: "";
		width: 100%;
		height: 0;
		padding-top: 44.1667%;
		display: block;
		background: url(../images/img_mainvisual_pc.png) no-repeat center top;
		background-size: 100% auto;
		position: relative;
	}

	.mainvisual .img_onair {
		width: 100%;
		background: url(../images/bg_onair_pc.png) repeat center bottom;
		background-size: 156.25% auto;
        position: absolute;
    	bottom: 0;
		padding: 0;
	}

	.mainvisual .img_onair::before {
		content: "";
		width: 79.6875%;
		height: 0;
		padding-top: 7.8125%;
		display: block;
		background: url(../images/img_onair_pc.png) no-repeat right top;
		background-size: 52% auto;
		margin: auto;
	}

	.mainvisual .img_onair::after {
		padding-top: 0.390625%;
		background: url(../images/bg_line.jpg) repeat-x center top;
		background-size: 28.125% auto;
	}

	.mainvisual .img_onair img {
		display: none;
	}
}

@media screen and (min-width:1280px){
	.mainvisual {
		background: url(../images/bg_mainvisual_pc.jpg) no-repeat center top;
		background-size: 2000px auto;
	}

	.mainvisual .img_onair {
		background: url(../images/bg_onair_pc.png) repeat center bottom;
		background-size: 2000px auto;
	}

	.mainvisual .img_onair::before {
		width: 1020px;
		padding-top: 100px;
	}

	.mainvisual .img_onair::after {
		padding-top: 5px;
		background: url(../images/bg_line.jpg) repeat-x center top;
		background-size: 360px auto;
	}
}

@media screen and (min-width:2000px){
	.mainvisual {
		background: url(../images/bg_mainvisual_pc.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.mainvisual .img_onair {
		background: url(../images/bg_onair_pc.png) repeat center bottom;
		background-size: 100% auto;
	}
}


/* =====================================================================
*    #main
* =================================================================== */

/* .movie
---------------------------------------------------------- */
.movie {
	background: url(../images/bg_movie.jpg) repeat center top;
	background-size: 43.75% auto;
}

.movie .inner {
	width: 87.5%;
	max-width: 560px;
	background-color: #fff;
}

.movie .movie_wrap {
	width: 92.8572%;
	padding-top: 14.2858%;
    margin: auto;
}

@media screen and (min-width:640px){
	.movie {
		background: url(../images/bg_movie.jpg) repeat center top;
		background-size: 280px auto;
	}
}

@media screen and (min-width:700px){
	.movie {
		background: url(../images/bg_movie.jpg) repeat center top;
		background-size: 21.875% auto;
	}

	.movie .inner {
		width: 95.3125%;
		max-width: 1220px;
	}

	.movie .movie_wrap {
		width: 65.5738%;
		padding-top: 4.9181%;
	}
}

@media screen and (min-width:700px){
	.introduction {
		background: url(../images/bg_introduction.jpg) repeat center top;
		background-size: 280px auto;
	}
}

/* .introduction
---------------------------------------------------------- */
.introduction {
	background: url(../images/bg_introduction.jpg) repeat center top;
	background-size: 43.75% auto;
}

.introduction .inner {
	width: 87.5%;
	max-width: 560px;
	background-color: #fff;
}

.introduction .ttl {
	width: 92.8572%;
	padding-top: 28.5715%;
	margin: auto;
}

.introduction .text {
	width: 92.8572%;
	padding-bottom: 17.8572%;
	margin: 7.1429% auto auto;
}

@media screen and (min-width:640px){
	.introduction {
		background: url(../images/bg_introduction.jpg) repeat center top;
		background-size: 280px auto;
	}
}

@media screen and (min-width:700px){
	.introduction {
		background: url(../images/bg_introduction.jpg) repeat center top;
		background-size: 21.875% auto;
	}

	.introduction .inner {
		width: 95.3125%;
		max-width: 1220px;
	}

	.introduction .ttl {
		width: 42.623%;
		padding-top: 9.8361%;
	}

	.introduction .text {
		width: 57.3771%;
		padding-bottom: 8.1968%;
		margin: 4.0984% auto auto;
	}

	.introduction .text::before {
		content: "";
		width: 100%;
		height: 0;
		padding-top: 128.5715%;
		display: block;
		background: url(../images/img_introduction_pc.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.introduction .text img {
		display: none;
	}
}

@media screen and (min-width:700px){
	.introduction {
		background: url(../images/bg_introduction.jpg) repeat center top;
		background-size: 280px auto;
	}
}

/* .cast
---------------------------------------------------------- */
.cast {
	background-color: #faf7ee;
	position: relative;
	padding-bottom: 17.1875%;
}

.cast::before {
	content: "";
	width: 100%;
	height: 0;
	padding-top: 17.1875%;
	display: block;
	background: url(../images/bg_line.jpg) repeat center top;
	background-size: 56.25% auto;
	position: absolute;
	bottom: 0;
}

.cast::after {
	content: "";
	width: 100%;
	height: 0;
	padding-top: 15.625%;
	display: block;
	background: url(../images/bg_cast.jpg) repeat center top;
	background-size: 9.6875% auto;
	position: absolute;
	bottom: 0;
}

.cast .ttl {
	width: 68.75%;
	padding-top: 15.625%;
	margin: auto;
}

.cast .inner {
	width: 81.25%;
	max-width: 520px;
	padding-bottom: 14.0625%;
	margin: auto;
}

.cast .photo_large {
	width: 96.1539%;
	padding-top: 9.6154%;
	margin: auto;
}

.cast .detail_large {
	width: 88.4616%;
	font-family: "Sawarabi Mincho";
	font-size: 1.4rem;
	line-height: 1.6em;
	margin-top: 11.5385%;
}

.cast .comment_ttl {
	width: 88.4616%;
	font-family: "Sawarabi Mincho";
	font-size: 1.4rem;
	line-height: 1.4286em;
	font-weight: bold;
	position: relative;
	box-sizing: border-box;
	padding-left: 5.7693%;
	margin-top: 7.6924%;
}

.cast .comment_ttl::before {
	content: "";
	width: 1.3044%;
	height: 0;
	padding-top: 8.6957%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

.cast .comment_text {
	width: 88.4616%;
	font-family: "Sawarabi Mincho";
	font-size: 1.2rem;
	line-height: 1.6em;
	box-sizing: border-box;
	padding-left: 5.7693%;
	margin-top: 5.7693%;
}

.cast .comment_text dt,
.cast .comment_text dd:not(:last-child) {
	padding-bottom: 1em;
}

@media screen and (min-width:640px){
	.cast {
		padding-bottom: 110px;
	}

	.cast::before {
		padding-top: 110px;
		background: url(../images/bg_line.jpg) repeat center top;
		background-size: 360px auto;
	}

	.cast::after {
		padding-top: 100px;
		background: url(../images/bg_cast.jpg) repeat center top;
		background-size: 62px auto;
	}

	.cast .ttl {
		width: 440px;
		padding-top: 100px;
	}

	.cast .inner {
		padding-bottom: 90px;
	}
}

@media screen and (min-width:700px){
	.cast .ttl {
		width: 34.375%;
		max-width: 440px;
		padding-top: 7.8125%;
	}

	.cast .inner {
		width: 95.3125%;
		max-width: 1220px;
		position: relative;
		padding-bottom: 10.15625%;
	}

	.cast .photo_large {
		width: 40.9837%;
		padding-top: 4.0984%;
		position: absolute;
		top: 0;
	}

	.cast .detail_large {
		width: 41.8033%;
		font-size: 1.9rem;
		line-height: 1.8em;
		padding-top: 8.1968%;
		margin-top: 0;
	}

	.cast .comment_ttl {
		width: 83.6066%;
		font-size: 1.8rem;
		line-height: 1.6667em;
		padding-left: 1.6394%;
		margin-top: 3.2787%;
	}

	.cast .comment_ttl::before {
		width: 0.2942%;
		padding-top: 2.9412%;
	}

	.cast .comment_text {
		width: 83.6066%;
		font-size: 1.6rem;
		line-height: 1.875em;
		padding-left: 1.6394%;
		margin-top: 1.2296%;
	}
}

@media screen and (min-width:1280px){
	.cast .ttl {
		padding-top: 100px;
	}

	.cast .inner {
		padding-bottom: 130px;
	}
}

/* .bg_cast_01 */
.cast .bg_cast_01 {
	position: relative;
	overflow: hidden;
}

.cast .bg_cast_01::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_01.jpg) repeat center top;
	background-size: 15.625% auto;
	position: absolute;
	top: 0;
	right: 50%;
	margin-right: 40.625%;
}

.cast .bg_cast_01::after {
	content: "";
	width: 3.125%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_01_line.jpg) no-repeat center top #faf7ee;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	right: 50%;
	margin-right: 40.625%;
}

.cast .bg_cast_01 .detail_large {
	margin-left: auto;
	margin-right: 0;
}

.cast .bg_cast_01 .comment_ttl {
	margin-left: auto;
	margin-right: 0;
}

.cast .bg_cast_01 .comment_ttl::before {
	background-color: #d4a831;
}

.cast .bg_cast_01 .comment_text {
	margin-left: auto;
	margin-right: 0;
}

.cast .bg_cast_01 .comment_text dt {
	color: #d4a831;
}

@media screen and (min-width:640px){
	.cast .bg_cast_01::before {
		background: url(../images/bg_cast_01.jpg) repeat center top;
		background-size: 100px auto;
		margin-right: 260px;
	}

	.cast .bg_cast_01::after {
		width: 20px;
		margin-right: 260px;
	}
}

@media screen and (min-width:700px){
	.cast .bg_cast_01::before {
		background: url(../images/bg_cast_01.jpg) repeat center top;
		background-size: 7.8125% auto;
		margin-right: 46.09375%;
	}

	.cast .bg_cast_01::after {
		width: 1.5625%;
		max-width: 20px;
		margin-right: 46.09375%;
	}

	.cast .bg_cast_01 .photo_large {
		left: 5.3279%;
	}

	.cast .bg_cast_01 .detail_large {
		padding-bottom: 15.7378%;
		margin-right: 8.1968%;
	}

	.cast .bg_cast_01 .comment_ttl {
		margin-right: 8.1968%;
	}

	.cast .bg_cast_01 .comment_text {
		margin-right: 8.1968%;
	}
}


@media screen and (min-width:1280px){
	.cast .bg_cast_01::before {
		background: url(../images/bg_cast_01.jpg) repeat center top;
		background-size: 100px auto;
		margin-right: 590px;
	}

	.cast .bg_cast_01::after {
		margin-right: 590px;
	}
}

/* .bg_cast_02 */
.cast .bg_cast_02 {
	position: relative;
	background-color: #fff;
	overflow: hidden;
}

.cast .bg_cast_02::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_02.jpg) repeat center top;
	background-size: 43.75% auto;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 40.625%;
}

.cast .bg_cast_02::after {
	content: "";
	width: 3.125%;
	height: 100%;
	display: block;
	background: url(../images/bg_cast_02_line.jpg) no-repeat center top #fff;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 40.625%;
}

.cast .bg_cast_02 .comment_ttl::before {
	background-color: #638c0b;
}

.cast .bg_cast_02 .comment_text dt {
	color: #638c0b;
}

@media screen and (min-width:640px){
	.cast .bg_cast_02::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
		background-size: 280px auto;
		margin-left: 260px;
	}

	.cast .bg_cast_02::after {
		width: 20px;
		margin-left: 260px;
	}
}

@media screen and (min-width:700px){
	.cast .bg_cast_02::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
		background-size: 21.875% auto;
		margin-left: 46.09375%;
	}

	.cast .bg_cast_02::after {
		width: 1.5625%;
		max-width: 20px;
		margin-left: 46.09375%;
	}

	.cast .bg_cast_02 .photo_large {
		right: 7.8689%;
	}

	.cast .bg_cast_02 .detail_large {
		padding-bottom: 12.9509%;
		margin-left: 8.1968%;
	}

	.cast .bg_cast_02 .comment_ttl {
		margin-left: 8.1968%;
	}

	.cast .bg_cast_02 .comment_text {
		margin-left: 8.1968%;
	}
}

@media screen and (min-width:1280px){
	.cast .bg_cast_02::before {
		background: url(../images/bg_cast_02.jpg) repeat center top;
		background-size: 280px auto;
		margin-left: 590px;
	}

	.cast .bg_cast_02::after {
		margin-left: 590px;
	}
}

/* .other_cast */
.other_cast {
	margin-top: 15.3847%;
}

.other_cast li {
	margin-top: 5.7693%;
}

.other_cast .photo {
	width: 61.5385%;
	margin: auto;
}

.other_cast .detail {
	font-family: "Sawarabi Mincho";
	font-size: 1.2rem;
	line-height: 1.6em;
	margin-top: 9.6154%;
}

@media screen and (min-width:700px){
	.other_cast {
		text-align: center;
		letter-spacing: -.40em;
		margin-top: 4.0984%;
	}

	.other_cast li {
		width: 26.2296%;
		text-align: left;
		letter-spacing: normal;
		display: inline-block;
		vertical-align: top;
		margin: 2.4591% 1.6394% auto;
	}

	.other_cast .photo {
		width: 100%;
	}

	.other_cast .detail {
		width: 93.75%;
		font-size: 2.0rem;
		line-height: 1.8em;
		margin: 12.5% auto auto;
	}
}

/* .staff
---------------------------------------------------------- */
.staff {
}

.staff .ttl {
	width: 68.75%;
	padding-top: 15.625%;
	margin: auto;
}

.staff .img_staff {
	width: 62.5%;
	padding-bottom: 14.0625%;
	margin: 12.5% auto auto;
}

@media screen and (min-width:700px){
	.staff .ttl {
		width: 34.375%;
		padding-top: 7.8125%;
	}

	.staff .img_staff {
		width: 73.4375%;
		padding-bottom: 7.03125%;
		margin: 3.90625% auto auto;
	}

	.staff .img_staff::before {
		content: "";
		width: 100%;
		height: 0;
		padding-top: 24.4681%;
		display: block;
		background: url(../images/img_staff_pc.jpg) no-repeat center top;
		background-size: 100% auto;
	}

	.staff .img_staff img {
		display: none;
	}
}

/* .music
---------------------------------------------------------- */
.music {
	background: url(../images/bg_music_01.jpg) repeat center top;
	background-size: 9.6875% auto;
	position: relative;
	overflow: hidden;
}

.music::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/bg_music_02.jpg) repeat center top;
	background-size: 20% auto;
	position: absolute;
	bottom: 0;
	right: 0;
	margin-bottom: 15.625%;
}

.music .ttl {
	width: 68.75%;
	padding-top: 15.625%;
	margin: auto;
}

.music .music_title {
	width: 1em;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 2.5rem;
	line-height: 1em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 40.625%;
	margin-right: 6.25%;
}

.music .artist_name {
	width: 1em;
	font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 1.2rem;
	line-height: 1em;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 46.875%;
	margin-right: 15.625%;
}

.music .music_img {
	width: 78.125%;
	padding-top: 12.5%;
	padding-bottom: 31.25%;
}

@media screen and (min-width:640px){
	.music {
		background: url(../images/bg_music_01.jpg) repeat center top;
		background-size: 62px auto;
	}

	.music::before {
		background: url(../images/bg_music_02.jpg) repeat center top;
		background-size: 128px auto;
	}
}

@media screen and (min-width:700px){
	.music {
		background: url(../images/bg_music_01.jpg) repeat center top;
		background-size: 4.84375% auto;
	}

	.music::before {
		background: url(../images/bg_music_02.jpg) repeat center top;
		background-size: 10% auto;
		right: 50%;
		margin-bottom: 0;
		margin-right: -47.65625%;
	}

	.music .ttl {
		width: 34.375%;
		padding-top: 7.8125%;
	}

	.music .music_title {
		width: 1em;
		font-size: 5.0rem;
		line-height: 1em;
		margin-top: 17.96875%;
		margin-right: 14.0625%;
	}

	.music .artist_name {
		width: 1em;
		font-size: 2.4rem;
		line-height: 1em;
		margin-top: 20.3125%;
		margin-right: 19.53125%;
	}

	.music .music_img {
		width: 39.0625%;
		padding-top: 3.90625%;
		padding-bottom: 7.8125%;
		margin: auto;
	}
}

@media screen and (min-width:1280px){
	.music {
		background: url(../images/bg_music_01.jpg) repeat center top;
		background-size: 62px auto;
	}

	.music::before {
		background: url(../images/bg_music_02.jpg) repeat center top;
		background-size: 128px auto;
		right: 50%;
		margin-bottom: 0;
		margin-right: -610px;
	}
}