@charset "UTF-8";
/*
 music.css（ファイル名変更可）
 本サイト各ページ用CSS
*/

.d-box-body{
	background-color: #000000;
	width: 100%;
	margin: 2.1% auto 15%;
	padding: 15% 0 10%;
	min-height: 500px;
	-webkit-transform: skewY(-10deg);
	-moz-transform: skewY(-10deg);
	-o-transform: skewY(-10deg);
}

#music.d-area {
	margin: 30px auto 60px;
}


.music-inner .d-box-body .music-overview{
	color: #ffffff;
	-webkit-transform: skewY(10deg);
	-moz-transform: skewY(10deg);
	-o-transform: skewY(10deg);
}

.music-inner h2.d-box-title{
	margin-left: auto;
	margin-right: 6%;
	width: 100%;
	max-width: 240px;
	height: auto;
	max-height: 106px;
	padding-top: calc(106 / 1000 * 100%);
	background-image: url("../images/music/title.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
	overflow: hidden;
	font-size: 0;
	position: relative;
	z-index: 100;
}

.music-inner .d-box{
	text-align: center;
	font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	transform: rotate(0.05deg);
}


.music-overview-box{
	width: 90%;
	margin: 0 auto;
	padding: 1% 0;
	-webkit-transform: skewY(-10deg);
	-moz-transform: skewY(-10deg);
	-o-transform: skewY(-10deg);
	min-height: 300px;
}

.music-overview-box h3{
	text-align: right;
	font-size: 3rem;
}

#themesong h3{
	letter-spacing: 0.5rem;
	margin-right: 5%;
}

#soundtrack h3{
	margin-right: 2%;
}


#themesong{
	background-color: #770010;
	margin-bottom: 5%;
}

#soundtrack{
	background-color: #3a0001;
}

.music-overview-box-inner{
	-webkit-transform: skewY(10deg);
	-moz-transform: skewY(10deg);
	-o-transform: skewY(10deg);
	padding: 30px 0 50px 0;
}

.music-overview-box-inner .comingsoon{
	font-size: 2rem;
	text-align: center;
	padding: 80px 0;
}

#soundtrack .music-overview-box-inner{
	padding: 30px 0 50px 0;
}

#themesong h4{
	font-size: 3rem;
	line-height: 4rem;
	color: #b1b383;
	margin-bottom: 30px;
}

#themesong h4 span{
	font-size: 1.4rem;
	color: #ffffff;
}

#themesong p{
	font-size: 2rem;
}

#themesong p span{
	font-size: 1.6rem;
}

#themesong p#themesong-image{
	width: 60%;
	margin: 30px auto;
}

#themesong p#themesong-image img{
	width: 100%;
}


#soundtrack h4{
	font-size: 2.2rem;
	color: #b1b383;
}

#soundtrack h4 span{
	font-size: 1.8rem;
}

#soundtrack h5{
	font-size: 2.4rem;
	margin-bottom: 50px;
}

#soundtrack p{
	font-size: 2rem;
}

#soundtrack p span{
	font-size: 1.4rem;
}

#soundtrack p#soundtrack-image{
	width: 60%;
	margin: 30px auto;
}

#soundtrack p#soundtrack-image img{
	width: 100%;
}



/* ---------------------------------
 SP（〜600px）
--------------------------------- */
@media only screen and (max-width: 600px) {

#music.d-area {
	margin: 0px auto 60px;
}
	
.music-overview-box h3{
	font-size: 2rem;
}

#themesong h4{
	font-size: 2.5rem;
	line-height: 3.5rem;
	color: #b1b383;
}

#themesong h4 span{
	font-size: 1.4rem;
}

#themesong h5{
	font-size: 2rem;
}

#themesong p{
	font-size: 1.6rem;
}

#themesong p span{
	font-size: 1.2rem;
}

#themesong p#themesong-image{
	width: 80%;

}
	
#soundtrack h4{
	font-size: 1.7rem;
	color: #b1b383;
}

#soundtrack h4 span{
	font-size: 1.4rem;
}

#soundtrack h5{
	font-size: 2rem;
}

#soundtrack p{
	font-size: 1.8rem;
}

#soundtrack p span{
	font-size: 1.2rem;
}

#soundtrack p#soundtrack-image{
	width: 80%;

}

}

/* ------------------------------------------------------------------
 SP 〜 tablet（〜992px）
------------------------------------------------------------------ */
@media screen and (max-width: 992px) {
}

/* ---------------------------------
 PC（993px〜）
--------------------------------- */
@media screen and (min-width: 993px) {
}