@charset "utf-8";

/* 基礎レイアウト
========================================================= */

img { width: 100%; height: auto; vertical-align: top; }

#contentsheader {
	width: 100%;
	height: 360px;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
	overflow: hidden;
}
#contentsheader p.icon {
	width: 55px;
	height: 55px;
	background: url(/images/h1_special2_icon.svg) no-repeat;
	margin: 120px auto 25px;
}
#contentsheader h1 { color: #ffffff; font-size: 48px; margin-right: auto; margin-left: auto; }

@media screen and (max-width: 1199px) {
	#contentsheader { height: 320px; }
	#contentsheader p.icon { margin-top: 100px; }
}

@media screen and (max-width: 992px) {
	#contentsheader { height: 280px; }
	#contentsheader p.icon { margin-top: 80px; }
}

@media screen and (max-width: 768px) {
	#contentsheader { height: 240px; }
	#contentsheader p.icon { width: 44px; height: 44px; margin-top: 60px; margin-bottom: 22px; }
	#contentsheader h1 { font-size: 36px; }
}

@media screen and (max-width: 480px) {
	#contentsheader { height: 160px; }
	#contentsheader p.icon { width: 33px; height: 33px; margin-top: 40px; margin-bottom: 16px; }
	#contentsheader h1 { font-size: 24px; }
}



/* musicCity
========================================================= */



/*musicCityMain
========================================================= */

#musicCityMain { padding: 0 calc(10/320 * 100%); margin-top: 10px; }
#musicCityMain .mainInner { max-width: 1125px; display: table; margin: 0 auto; }
#musicCityMain .mainPc { }
#musicCityMain .mainSp { display: none; }
#musicCityMain .mainLead {
	font-size: 17px;
	line-height: 30px;
	text-align: center;
	margin: 25px auto 0;
}
#musicCityMain #snsArea { margin-top: 40px; }



@media screen and (max-width: 1100px) {
	#musicCityMain .mainTitle { margin: 0 10px; }
}

@media screen and (max-width: 767px) {
	#musicCityMain .mainLead { font-size: 15px; line-height: 26px; text-align: left; }
	#musicCityMain .mainLead br { display: none; }
	#musicCityMain #snsArea { margin-top: 0; }
}

@media screen and (max-width: 640px) {
	#musicCityMain { padding: 0; }
	#musicCityMain .mainPc { display: none; }
	#musicCityMain .mainSp { display: block; }
	#musicCityMain .mainLead { padding: 0 calc(10/320 * 100%); }
}



/* musicCityNav
========================================================= */

.musicCityNav { padding: 110px calc( 10 / 320 * 100%) 0; margin-top: -110px; }
.musicCityNav div { width: 100%; max-width: 940px; display: table; table-layout: fixed; margin: 60px auto 0;  }
.musicCityNav a {
	height: 120px;
	display: table-cell;
	color: #ffffff;
	font-size: 40px;
	line-height: 40px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	position: relative;
}
.musicCityNav a:nth-child(1) { background: #f39800; }
.musicCityNav a:nth-child(2) { background: #0493d3; }
.musicCityNav a:nth-child(3) { background: #ec4699; }
.musicCityNav a p { position: relative; }
.musicCityNav a p:after {
	content: "";
	display: block;
	width: 0;
	height: 3px;
	background: #ffffff;
	position: absolute;
	right: 0;
	bottom: -8px;
	left: 0;
	margin: auto;
}
.musicCityNav a.visit p:after { width: 2.3em; }



@media screen and (min-width: 769px) {
	.musicCityNav a:hover p:after { width: 2.3em; transition: 0.2s ease; }
}

@media screen and (max-width: 1025px) {
	.musicCityNav a { height: 80px; font-size: 30px; line-height: 30px; transition: 0.2s ease; }
	.musicCityNav a.visit p:after { height: 2px; bottom: -8px; }
}

@media screen and (max-width: 767px) {
	.musicCityNav { padding: 60px calc( 10 / 320 * 100%) 0; margin-top: -60px; }
	.musicCityNav div { width: 100%; max-width: 940px; display: table; table-layout: fixed; margin: 40px auto 0; }
	.musicCityNav a { height: 50px; font-size: 20px; line-height: 20px; }
	.musicCityNav a.visit p:after { bottom: -3px; }
}



/* musicCityContent
========================================================= */

#musicCityContent { padding: 75px calc(10/320 * 100%) 100px; }
#musicCityContent.area1 { background: url(/images/special/12/bg1.png) repeat-y center top #f39800; }
#musicCityContent.area2 { background: url(/images/special/12/bg2.png) repeat-y center top #0493d3; }
#musicCityContent.area3 { background: url(/images/special/12/bg3.png) repeat-y center top #ec4699; }

#musicCityContent .contentLead {
	color: #ffffff;
	font-size: 20px;
	line-height: 36px;
	font-weight: bold;
	text-align: center;
}

#musicCityContent .contentPrologue ul {
	max-width: 1060px;
	display: table;
	background: #fdf7d8;
	border-radius: 15px;
	padding: 25px 0;
	margin: 50px auto 0;
}
#musicCityContent .contentPrologue li { display: table-cell; vertical-align: middle; box-sizing: border-box; }
#musicCityContent .contentPrologue li:nth-child(1) {
	width: calc( 250 / 1060 * 100%);
	min-width: 230px;
	border-right: dashed 1px #f39800;
	color: #f39800;
	font-size: 20px;
	line-height: 32px;
	font-weight: bold;
	padding-left: 40px;
}
#musicCityContent .contentPrologue li:nth-child(2) {
	font-size: 15px;
	line-height: 28px;
	padding: 0 40px 0 50px;
}

#musicCityContent .contentGenre {
	max-width: 1060px;
	display: block;
	border-top: solid 2px #ffffff;
	border-bottom: solid 2px #ffffff;
	color: #ffffff;
	font-size: 26px;
	line-height: 28px;
	font-weight: bold;
	text-align: center;
	padding: 22px 0 20px;
	margin: 50px auto 0;
}
#musicCityContent .contentDeco + .contentGenre { margin: 60px auto 0; }

#musicCityContent .contentDeco { width: 74px; margin: 20px auto 0; }
#musicCityContent .content + .contentDeco { width: 74px; margin: 0 auto; }
#musicCityContent .contentPrologue + .contentDeco { width: 74px; margin: 30px auto 0; }
#musicCityContent .content {
	max-width: 1060px;
	background: #ffffff;
	border-radius: 30px;
	box-sizing: border-box;
	padding: 60px;
	margin: 0 auto;
}

#musicCityContent .content > ul { display: table; }
#musicCityContent .content > ul li { display: table-cell; vertical-align: top; }
#musicCityContent .content > ul li.conImg {
	width: calc(500 / 940 * 100%);
	max-width: 440px;
	padding-left: calc(60 / 940 * 100%);
}
#musicCityContent .content > ul li.conImgV {
	width: calc(500 / 940 * 100%);
	max-width: 310px;
	padding-left: calc(190 / 940 * 100%);
}

#musicCityContent .content .conTitle { display: table; font-size: 26px; line-height: 34px; font-weight: bold; }
#musicCityContent .content .conTitle span { display: inline-block; padding-right: 0.5em; }
#musicCityContent .content .conTitle span.fontS { font-size: 18px; }
#musicCityContent .content .conTitle dt,
#musicCityContent .content .conTitle dd { display: table-cell; vertical-align: middle; }
#musicCityContent .content .conTitle dt { width: 50px; padding-right: 10px; }
#musicCityContent.area1 .content .conTitle { color: #f39800; }
#musicCityContent.area2 .content .conTitle { color: #0493d3; }
#musicCityContent.area3 .content .conTitle { color: #ec4699; }
#musicCityContent .content .conCatch { font-size: 17px; line-height: 28px; font-weight: bold; margin-top: 20px; }
#musicCityContent .content .conText { font-size: 15px; line-height: 28px; margin-top: 20px; }

#musicCityContent .content .conData { font-size: 13px; line-height: 22px; margin-top: 35px; }
#musicCityContent .content .conData .fwB { font-weight: bold; }
#musicCityContent .content .conData span { display: inline-block; }
#musicCityContent .content .conData th { text-align: right; white-space: nowrap; }
#musicCityContent .content .conData .dataImg { width: calc(150 / 440 * 100%); float: right; margin-left: 10px; }

#musicCityContent .content .conBtm { margin-top: 50px; }
#musicCityContent .content .conBtm ul.loft { width: 100%; max-width: 940px; display: table; overflow: hidden; }
#musicCityContent .content .conBtm ul.loft li { float: left; }
#musicCityContent .content .conBtm ul.loft li:nth-child(1) { width: calc(180 / 940 * 100%); }
#musicCityContent .content .conBtm ul.loft li:nth-child(2) { width: calc(360 / 940 * 100%); }
#musicCityContent .content .conBtm ul.loft li:nth-child(3) { width: calc(360 / 940 * 100%); }
#musicCityContent .content .conBtm ul.loft li:nth-child(1),
#musicCityContent .content .conBtm ul.loft li:nth-child(2) { margin-right: calc(20 / 940 * 100%); }
#musicCityContent .content .conBtm .caption {
	font-size: 13px;
	line-height: 22px;
	margin: 5px 0 0 calc( 200 / 940 * 100%);
}
#musicCityContent .content .conBtm ul.union { width: 100%; max-width: 940px; display: table; overflow: hidden; }
#musicCityContent .content .conBtm ul.union li { float: left; }
#musicCityContent .content .conBtm ul.union li:nth-child(1) { width: calc(180 / 940 * 100%); max-width: 180px; }
#musicCityContent .content .conBtm ul.union li:nth-child(2) {
	margin: calc(30 / 940 * 100%) 0 0 calc(75 / 940 * 100%);
}
#musicCityContent .content .conBtm ul.union li:nth-child(2) div { color: #0493d3; font-weight: bold; }
#musicCityContent .content .conBtm ul.union table {
	background: #d8f1fc;
	font-size: 13px;
	line-height: 24px;
	margin-top: 3px;
}
#musicCityContent .content .conBtm ul.union table td:nth-child(1) { padding: 10px 0 10px 15px; }
#musicCityContent .content .conBtm ul.union table td:nth-child(2) { padding: 10px 15px 10px 40px; }
#musicCityContent .content .conBtm ul.union table td p:before {
	content: "";
	width: 4px;
	height: 4px;
	display: inline-block;
	border-radius: 4px;
	background: #333333;
	vertical-align: middle;
	margin-right: 6px;
}
#musicCityContent .content .conBtm ul.dug { width: 100%; max-width: 940px; display: table; overflow: hidden; }
#musicCityContent .content .conBtm ul.dug li { width: calc(300 / 940 * 100%); float: left; }
#musicCityContent .content .conBtm ul.dug li:nth-child(1),
#musicCityContent .content .conBtm ul.dug li:nth-child(2) { margin-right: calc(20 / 940 * 100%); }
#musicCityContent .content .conBtm ul.dice li { width: calc(375 / 940 * 100%); }



#musicCityContent .column { 
	width: 100%;
	max-width: 1060px;
	display: table;
	background: #d7f0fb;
	box-sizing: border-box;
	padding: 30px;
	margin: 50px auto 0;
}
#musicCityContent .column dl,
#musicCityContent .column p { display: table-cell; vertical-align: middle; }
#musicCityContent .column dl { width: calc(320 / 1000 * 100%); font-size: 0; }
#musicCityContent .column dt,
#musicCityContent .column dd { display: inline-block; vertical-align: middle; }
#musicCityContent .column dt { width: 80px; padding-right: 20px; }
#musicCityContent .column dd {
	color: #0493d3;
	font-size: 26px;
	line-height: 56px;
	font-weight: bold;
	white-space: nowrap;
	padding: 15px 0;
}
#musicCityContent .column dl + p { max-width: 500px; font-size: 15px; line-height: 28px; }
#musicCityContent .column p + p { width: 130px; padding-left: calc(50 / 1000 * 100%); }



@media screen and (max-width: 1125px) {
	#musicCityContent { padding: 50px calc(10/320 * 100%) 80px; transition: 0.2s ease; }
	#musicCityContent .content { padding: 30px; transition: 0.2s ease; }
}

@media screen and (max-width: 840px) {
	#musicCityContent .content > ul { position: relative; padding-top: 70px; }
	#musicCityContent.area2 .content > ul { padding-top: 40px; }
	#musicCityContent .content .conTitle { position: absolute; top: 0; }
	#musicCityContent .content .conCatch { margin-top: 0; }
	#musicCityContent .column dl { width: calc(250 / 1000 * 100%); }
}

@media screen and (max-width: 767px) {
	#musicCityContent { padding: 30px calc(10/320 * 100%) 50px; }
	
	#musicCityContent .contentLead { font-size: 15px; line-height: 26px; text-align: left; }
	#musicCityContent .contentLead br { display: none; }
	
	#musicCityContent .contentPrologue ul { border-radius: 10px; padding: 20px; margin: 30px auto 0; }
	#musicCityContent .contentPrologue li { display: block; }
	#musicCityContent .contentPrologue li:nth-child(1) {
		width: auto;
		min-width: auto;
		border-right: none;
		border-bottom: dashed 1px #f39800;
		font-size: 18px;
		line-height: 28px;
		text-align: center;
		padding: 0 0 10px 0;
	}
	#musicCityContent .contentPrologue li:nth-child(1) br { display: none; }
	#musicCityContent .contentPrologue li:nth-child(2) { font-size: 14px; line-height: 24px; padding: 15px 0 0 0; }
	
	#musicCityContent .contentGenre { font-size: 20px; line-height: 22px; padding: 15px 0 13px; margin: 30px auto 0; }
	#musicCityContent .contentDeco + .contentGenre { margin: 40px auto 0; }
	
	#musicCityContent .content { border-radius: 15px; padding: 20px; }
	#musicCityContent .contentDeco { margin: 10px auto 0; }
	#musicCityContent .contentLead + .contentDeco { margin: 15px auto 0; }
	
	#musicCityContent .content > ul { position: static; padding-top: 0; }
	#musicCityContent.area2 .content > ul { padding-top: 0; }
	#musicCityContent .content > ul li { display: block; }
	#musicCityContent .content > ul li.conImg {
		width: 100%;
		padding: 40px 0 0 0;
		margin: 0 auto;
	}
	#musicCityContent .content > ul li.conImgV {
		width: 100%;
		padding: 40px 0 0 0;
		margin: 0 auto;
	}
	#musicCityContent .content .conTitle { font-size: 20px; line-height: 26px; position: static; }
	#musicCityContent .content .conTitle span.fontS { font-size: 16px; }
	#musicCityContent .content .conCatch { font-size: 15px; line-height: 20px; margin-top: 15px; }
	#musicCityContent .content .conText { font-size: 14px; line-height: 24px; margin-top: 15px; }
	#musicCityContent .content .conData { margin-top: 20px; overflow: hidden; }
	#musicCityContent .content .conBtm { margin-top: 20px; }
	#musicCityContent .content .conBtm ul.loft { max-width: 440px; margin: 0 auto; }
	#musicCityContent .content .conBtm ul.loft li:nth-child(1) { width: 48.1%; display: block; }
	#musicCityContent .content .conBtm ul.loft li:nth-child(2) { width: 48%; float: right; }
	#musicCityContent .content .conBtm ul.loft li:nth-child(3) { width: 48%; float: right; margin-top: 1px; }
	#musicCityContent .content .conBtm ul.loft li:nth-child(1),
	#musicCityContent .content .conBtm ul.loft li:nth-child(2) { margin-right: 0; }
	#musicCityContent .content .conBtm .caption {
		font-size: 12px;
		line-height: 14px;
		text-align: center;
		margin: 5px 0 0 0;
	}
	#musicCityContent .content .conBtm ul.union li { float: none; display: table; }
	#musicCityContent .content .conBtm ul.union li:nth-child(1) { width: 48.0%; margin: 0 auto; }
	#musicCityContent .content .conBtm ul.union li:nth-child(2) { margin: 15px auto 0; }
	#musicCityContent .content .conBtm ul.union table { font-size: 12px; line-height: 22px; }
	#musicCityContent .content .conBtm ul.union table td { display: block; }
	#musicCityContent .content .conBtm ul.union table td:nth-child(1) { padding: 10px 10px 0 10px; }
	#musicCityContent .content .conBtm ul.union table td:nth-child(2) { padding: 0 10px 10px 10px; }
	#musicCityContent .content .conBtm ul.dug li { width: 48%; min-width: 220px; float: none; margin: 0 auto; }
	#musicCityContent .content .conBtm ul.dug li:nth-child(1),
	#musicCityContent .content .conBtm ul.dug li:nth-child(2) { margin: 0 auto 10px; }
	#musicCityContent .content .conBtm ul.dice li { width: 100%; max-width: 375px; margin: 0 auto; }
	
	#musicCityContent .column { padding: 20px; margin: 40px auto 0; }
	#musicCityContent .column dl,
	#musicCityContent .column p { display: table; }
	#musicCityContent .column dl { width: auto; }
	#musicCityContent .column dl + p { font-size: 14px; line-height: 24px; margin-top: 20px; }
	#musicCityContent .column p + p { width: 130px; padding-left: 0; margin: 20px auto 0; }
}

@media screen and (max-width: 480px) {
	#musicCityContent .content > ul li.conImgV { width: calc(310 / 440 * 100%); min-width: 180px; }
	#musicCityContent .content .conTitle dt { width: 45px; padding-right: 10px; }
}



/* musicCityPickUp
========================================================= */

#musicCityPickUp { background: #000000; padding: 100px calc(10/320 * 100%); }
#musicCityPickUp .pickupTitle { display: table; margin: 0 auto; }
#musicCityPickUp .pickupTitle p {
	color: #56dad7;
	font-size: 36px;
	line-height: 40px;
	font-weight: bold;
	margin: 40px;
}
#musicCityPickUp .pickupTitle:before { content: ""; display: block; height: 1px; background: #ffffff; }
#musicCityPickUp .pickupTitle:after { content: ""; display: block; height: 1px; background: #ffffff; }

#musicCityPickUp ul { width: 100%; max-width: 900px; overflow: hidden; margin: 70px auto 0; }
#musicCityPickUp ul + ul { margin: 80px auto 0; }
#musicCityPickUp li:nth-child(1) { width: calc(440 / 900 * 100%); color: #ffffff; max-width: 440px; float: left; }
#musicCityPickUp li:nth-child(2) { width: calc(340 / 900 * 100%); max-width: 340px; min-width: 220px; float: right; }
#musicCityPickUp .pickupCatch {
	height: 50px;
	display: block;
	border-radius: 12px;
	background: #ffffff;
	color: #56dad7;
	font-size: 22px;
	line-height: 52px;
	font-weight: bold;
	text-align: center;
}
#musicCityPickUp .pickupName { font-size: 26px; line-height: 36px; font-weight: bold; margin-top: 20px; }
#musicCityPickUp .pickupText { font-size: 15px; line-height: 28px; margin-top: 20px; }
#musicCityPickUp .pickupData { font-size: 13px; line-height: 22px; margin-top: 35px; }
#musicCityPickUp .pickupData a { color: #ffffff; }
#musicCityPickUp .pickupData .mailIcon {
	width: 11px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 7px;
}
#musicCityPickUp .pickupData th { text-align: right; white-space: nowrap; }



@media screen and (max-width: 767px) {
	#musicCityPickUp { padding: 40px calc(10/320 * 100%) 50px; }
	#musicCityPickUp .pickupTitle p { font-size: 24px; line-height: 26px; margin: 10px 20px; }
	
	#musicCityPickUp ul { margin: 30px auto 0; }
	#musicCityPickUp ul + ul { margin: 60px auto 0; }
	#musicCityPickUp li:nth-child(1) { width: 100%; float: none; margin: 0 auto; }
	#musicCityPickUp li:nth-child(2) { float: none; margin: 30px auto 0; }
	#musicCityPickUp .pickupCatch { height: 30px; border-radius: 6px; font-size: 18px; line-height: 34px; }
	#musicCityPickUp .pickupName { font-size: 20px; line-height: 30px; margin-top: 15px; }
	#musicCityPickUp .pickupText { font-size: 14px; line-height: 24px; margin-top: 10px; }
	#musicCityPickUp .pickupData { margin-top: 20px; }
}



/* plusIssue
========================================================= */

.plusIssue { padding: 0 calc( 15 / 320 * 100% ); margin: 50px 0 0 0; }
.plusIssue p { text-align: center; margin: 0 auto; }
.plusIssue p span { display: inline-block; padding: 0 0.5em; }
.plusIssue ul { display: table; font-size: 13px; line-height: 20px; margin: 15px auto 0; }
.plusIssue li { display: table-cell; vertical-align: top; }

@media screen and (max-width: 767px) {
	.plusIssue { margin: 30px 0 0 0; }
}



/* 汎用パーツ
========================================================= */

/* detailsLink
------------------------------------------ */

.detailsLink1 { max-width: 190px; margin-top: 15px; }
.detailsLink1 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	padding: 6px 5px 5px;
}

.detailsLink2 { max-width: 190px; margin-top: 15px; }
.detailsLink2 a {
	display: block;
	background-color: #ffffff;
	color: #333333;
	border-radius: 5px;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	padding: 6px 5px 5px;
}

@media screen and (min-width: 769px) {
	.detailsLink1 a { transition: 0.2s ease; }
	.detailsLink1 a:hover { background-color: #fe8781; }
	
	.detailsLink2 a { transition: 0.2s ease; }
	.detailsLink2 a:hover { background-color: #000000; color: #ffffff; }
}

@media screen and (max-width: 767px) {
	.detailsLink1 { margin: 15px auto 0; }
}