@charset "utf-8";

/* CSS INFORMATION -====================================================
File name : music.css
Description : 主題歌
===================================================================== */

.music {
	padding: calc(120 / 750 * 100%) 0 calc(260 / 750 * 100%);
}

.music .inner {
	z-index: 1;
}

.music_img {
	margin-bottom: calc(35 / 650 * 100%);
}

.music_img::before,
.music_img::after {
	content: '';
	position: absolute;
	background: url(../images/deco/bg_deco1.png) no-repeat center/contain;
	width: calc(129 / 650 * 100%);
	padding-top: calc(127 / 650 * 100%);
}

.music_img::before {
	top: 0;
	left: 0;
	margin: calc(-50 / 650 * 100%) 0 0 calc(-50 / 650 * 100%);
}

.music_img::after {
	bottom: 0;
	right: 0;
	margin: 0 calc(-50 / 650 * 100%) calc(-50 / 650 * 100%) 0;
	z-index: -1;
}

.music_img_wrap::before {
	content: '';
	background: url(../images/deco/img_deco5.png) no-repeat center/contain;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(187 / 650 * 100%);
	padding-top: calc(240 / 650 * 100%);
	z-index: 1;
	margin: calc(-136 / 650 * 100%) 0 0 calc(-150 / 650 * 100%);
}

.music_img_wrap::after {
	content: '';
	background: url(../images/deco/img_deco2.png) no-repeat center/contain;
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(168 / 650 * 100%);
	padding-top: calc(118 / 650 * 100%);
	z-index: 1;
	margin: 0 calc(-85 / 650 * 100%) calc(-140 / 650 * 100%) 0;
}

.music_txt {
	text-align: center;
	margin-bottom: calc(50 / 650 * 100%);
}

.music_ttl {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 4rem;
	color: #9b200c;
	margin-bottom: .2em;
}

.music_artist {
	line-height: 1.2;
	display: block;
    font-size: 3rem;
}

.music_movie::before {
	content: '';
	position: absolute;
	background: url(../images/deco/bg_deco1.png) no-repeat center/contain;
	width: calc(129 / 650 * 100%);
	padding-top: calc(127 / 650 * 100%);
	top: 0;
	left: 0;
	margin: calc(-50 / 650 * 100%) 0 0 calc(-50 / 650 * 100%);
}

.music_movie::after {
	content: '';
	background: url(../images/deco/img_deco6.png) no-repeat center/contain;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(167 / 650 * 100%);
	padding-top: calc(162 / 650 * 100%);
	z-index: 1;
	margin: calc(-123 / 650 * 100%) 0 0 calc(-63 / 650 * 100%);
}

.music_movie_box {
	background: url(../images/original/bg_music_movie.png) no-repeat center/contain;
	width: calc(666 / 650 * 100%);
	padding: calc(26 / 650 * 100%);
	margin: 0 0 calc(50 / 650 * 100%) calc(-8 / 650 * 100%);
}

.music_movie_wrap {
	width: 100%;
	padding-top: 53.5%;
	/*	padding-top: 56.25%;*/
}

.music_movie iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

.music_comment_ttl {
	text-align: center;
	color: #9b200c;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size: 3.4rem;
	margin-bottom: calc(35 / 650 * 100%);
}

.music_comment_ttl::before,
.music_comment_ttl::after {
	content: '';
	position: absolute;
	background: url(../images/deco/bg_deco2.png) no-repeat center/contain;
	width: calc(39 / 650 * 100%);
	padding-top: calc(26 / 650 * 100%);
	top: 0;
	bottom: 0;
	margin: auto 0;
}

.music_comment_ttl::before {
	left: 0;
	margin-left: calc(130 / 650 * 100%);
}

.music_comment_ttl::after {
	right: 0;
	margin-right: calc(130 / 650 * 100%);
}

.music_comment_name {
    text-align: center;
    color: #9b200c;
    font-weight: 700;
    margin-bottom: .5em;
}

.music_comment_txt {
	margin-bottom: calc(50 / 650 * 100%);
}

.music_site {
	margin: calc(60 / 650* 100%) auto 0;
}


@media screen and (min-width: 768px) {
	.music {
		padding: calc(120 / 1200 * 100%) 0 calc(200 / 1200 * 100%);
	}

	.music_img {
		width: calc(488 / 1000 * 100%);
		margin: 0 auto calc(45 / 1000 * 100%);
	}

	.music_img::before,
	.music_img::after {
		width: calc(129 / 488 * 100%);
		padding-top: calc(127 / 488 * 100%);
	}

	.music_img::before {
		margin: calc(-50 / 488 * 100%) 0 0 calc(-51 / 488 * 100%);
	}

	.music_img::after {
		margin: 0 calc(-51 / 488 * 100%) calc(-50 / 488 * 100%) 0;
	}

	.music_img_wrap::before {
		-webkit-transform: rotate(-15deg);
		transform: rotate(-15deg);
		margin: calc(-52 / 488 * 100%) 0 0 calc(-145 / 488 * 100%);
	}

	.music_img_wrap::after {
		width: calc(131 / 488 * 100%);
		padding-top: calc(92 / 488 * 100%);
		margin: 0 calc(-91 / 488 * 100%) calc(-100 / 488 * 100%) 0;
	}

	.music_txt {
		margin-bottom: calc(20 / 1000 * 100%);
	}

	.music_ttl {
		font-size: 2.8rem;
		line-height: 1.2;
	}

	.music_artist,
	.music_label {
		display: inline;
		font-size: 1.8rem;
	}

	.music_ttl {
		font-size: 2.4rem;
		margin-bottom: .5em;
	}

	.music_artist {
		font-size: 2.6rem;
		margin-bottom: .7em;
	}

	.music_label {
		font-size: 1.6rem;
	}

	.music_movie {
		width: calc(466 / 1000 * 100%);
		margin: 0 auto;
	}

	.music_movie::before {
		width: calc(129 / 466 * 100%);
		padding-top: calc(127 / 466 * 100%);
		margin: calc(-50 / 466 * 100%) 0 0 calc(-51 / 466 * 100%);
	}

	.music_movie::after {
		width: calc(134 / 466 * 100%);
		padding-top: calc(129 / 466 * 100%);
		margin: calc(-95 / 466 * 100%) 0 0 calc(-90 / 466 * 100%);
	}

	.music_movie_box {
		padding: calc(19 / 466 * 100%);
		margin: 0 0 calc(50 / 466 * 100%);
	}

	.music_comment {
		width: calc(800 / 1000 * 100%);
		margin: 0 auto;
	}

	.music_comment_ttl {
		font-size: 2.4rem;
		margin-bottom: calc(20 / 800 * 100%);
	}

	.music_comment_ttl::before,
	.music_comment_ttl::after {
		width: calc(24 / 800 * 100%);
		padding-top: calc(16 / 800 * 100%);
	}

	.music_comment_ttl::before {
		margin-left: calc(260 / 800 * 100%);
	}

	.music_comment_ttl::after {
		margin-right: calc(260 / 800 * 100%);
	}
    
    .music_comment_name {
        margin-bottom: 1.2rem;
    }

	.music_comment_txt {
		margin-bottom: calc(15 / 800 * 100%);
	}

	.music_site {
		margin-top: calc(60/ 1000 * 100%) !important;
	}

}

@media screen and (min-width: 1200px) {
	.music {
		padding: 120px 0 200px;
	}

}