@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; }
}

#snsArea .sns_icon_area .fb-share-button,
#snsArea .sns_icon_area .twitter-share-button {
	display: inline-block;
	vertical-align: bottom;
}





/* entertainment
========================================================= */

#entertainment { line-height: 1.0; }



@media screen and (max-width: 767px) {
	
}





/* entertainmentMain
========================================================= */

#entertainment .main { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); margin: 20px 0 0 0; }
#entertainment .main h2 { width: 100%; max-width: 1100px; margin: 0 auto;}

#entertainment .main .lead {
	display: table;
	font-size: 20px;
	line-height: 1.9;
	text-align: center;
	margin: 40px auto 0;
}



@media screen and (max-width: 767px) {
	#entertainment .main .lead { font-size: 15px; text-align: left; margin: 20px 0 0 0; }
	#entertainment .main .lead br { display: none; }
}





/* content
========================================================= */

#entertainment section { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); }
#entertainment section .wrap { width: 100%; max-width: 920px; margin: 130px auto 0; }

#entertainment section h4 { width: calc(690/920 * 100%); max-width: 690px; margin: 60px auto 0; }
#entertainment section .data + h4 { margin: 100px auto 0; }
#entertainment section .content .spot { margin: 40px 0 0 0; }
#entertainment section .content .spot div > p {
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
	margin: 10px 0 0 0;
}
#entertainment section .content .spot ul { width: 100%; max-width: 800px; display: table; margin: 30px auto 0; }
#entertainment section .content .spot ul li:nth-child(1) {
	width: calc(380/800 * 100%);
	max-width: 380px;
	float: left;
}
#entertainment section .content .spot ul li:nth-child(2) {
	width: calc(380/800 * 100%);
	max-width: 380px;
	float: right;
}
#entertainment section .content .spot li > p {
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
	margin: 10px 0 0 0;
}
#entertainment section .spot ul + p,
#entertainment section .spot div + p {
	width: 100%;
	max-width: 800px; 
	font-size: 18px;
	line-height: 1.7;
	margin: 45px auto 0;
}
#entertainment section .data { 
	border-top: solid 1px #cccccc;
	border-bottom: solid 1px #cccccc;
	font-size: 16px;
	line-height: 1.7;
	padding: 25px 30px;
	margin: 50px 0 0 0;
	overflow: hidden;
}
#entertainment section .data > div { float: left; }
#entertainment section .data > div.w220 { width: 220px; float: left; margin: 0 30px 0 0; }

#entertainment section .content .bottom {
	border-radius: 40px;
	padding: 50px;
	margin: 100px 0 0 0;
}
#entertainment section .content .bottom.pink { background: #fb9bab; }
#entertainment section .content .bottom.green { background: #7bedab; }
#entertainment section .content .bottom.yellow { background: #f9ce3b; }
#entertainment section .content .bottom.violet { background: #d9a9f8 }
#entertainment section .content .bottom p:nth-child(1) {
	font-size: 30px;
	line-height: 1.3;
	font-weight: bold;
	text-align: center;
}
#entertainment section .content .bottom p:nth-child(1) span { font-weight: normal; }
#entertainment section .content .bottom p:nth-child(2) {
	font-size: 18px;
	line-height: 1.7;
	margin: 15px 0 0 0;
}


@media screen and (max-width: 767px) {
	#entertainment section .wrap { margin: 70px auto 0; }
	
	#entertainment section h4 { margin: 15px auto 0; }
	#entertainment section .data + h4 { margin: 70px auto 0; }
	#entertainment section .content .spot { margin: 20px 0 0 0; }
	#entertainment section .content .spot div > p { font-size: 13px; line-height: 1.5; }
	#entertainment section .content .spot div > p br { display: none; }
	
	#entertainment section .content .spot ul { margin: 20px auto 0; }
	#entertainment section .content .spot li > p { font-size: 13px; line-height: 1.5; }
	#entertainment section .spot ul + p,
	#entertainment section .spot div + p { font-size: 16px; margin: 30px auto 0; }
	#entertainment section .data {
		font-size: 14px;
		line-height: 1.5;
		padding: 20px;
		margin: 30px 0 0 0;
	}
	#entertainment section .data > div { display: table; float: none; margin: 0 auto 0; }
	#entertainment section .data p + div { margin: 15px auto 0; }
	#entertainment section .data > div.w220 { width: 220px; float: none; margin: 0 auto 20px; }
	
	#entertainment section .content .bottom { border-radius: 30px; padding: 30px; margin: 50px 0 0 0; }
	#entertainment section .content .bottom p:nth-child(1) { font-size: 20px; }
	#entertainment section .content .bottom p:nth-child(2) { font-size: 15px; margin: 10px 0 0 0; }
}





/* tower
========================================================= */

#entertainment section .tower { margin: 80px auto 0; }
#entertainment section .tower .lead { margin: 30px 0 0 0; }
#entertainment section .tower h4 { margin: 0 auto 0; }
#entertainment section .tower .lead h5 { font-size: 24px; line-height: 1.7; font-weight: bold; }
#entertainment section .tower .lead p { font-size: 18px; line-height: 1.7; padding: 30px 0 0 0; }
#entertainment section .tower .lead p:last-child { font-size: 14px; text-indent: -1em; padding: 50px 0 0 1em; }

#entertainment section .tower .spot { margin: 75px 0 0 0; }
#entertainment section .tower .spot + .spot { margin: 90px 0 0 0; }
#entertainment section .tower .spot div + p { max-width: 100%; font-size: 14px; text-align: center; margin: 10px 0 0 0; }
#entertainment section .tower .spot ul { width: 100%; max-width: 800px; display: table; margin: 30px auto 0; }
#entertainment section .tower .spot ul li p { display: table-cell; vertical-align: middle; }
#entertainment section .tower .spot ul li p:nth-child(1) { font-size: 18px; font-weight: bold; padding: 0 16px 0 0; }
#entertainment section .tower .spot ul li p:nth-child(2) {
	width: 130px;
	border-radius: 13px;
	background: #333333;
	color: #ffffff;
	font-size: 16px;
	line-height: 26px;
	text-align: center;
}
#entertainment section .tower .spot ul li:nth-child(2) {
	font-size: 40px;
	line-height: 1.25;
	font-weight: bold;
	margin: 15px 0 0 0;
}
#entertainment section .tower .spot ul li:nth-child(3) {
	font-size: 18px;
	line-height: 1.7;
	font-weight: bold;
	margin: 10px 0 0 0;
}
#entertainment section .tower .spot ul li:nth-child(3) span { font-size: 14px; font-weight: normal; }
#entertainment section .tower .spot ul + p { margin: 20px auto 0; }

#entertainment section .tower .bottom {
	border: solid 5px #000000;
	border-radius: 40px;
	padding: 45px;
	margin: 100px 0 0 0;
}
#entertainment section .tower .bottom ul { overflow: hidden; }
#entertainment section .tower .bottom ul li:nth-child(1) {
	width: calc(330/820 * 100%);
	max-width: 330px;
	float: left;
}
#entertainment section .tower .bottom ul li:nth-child(1) p { font-size: 14px; margin: 10px 0 0 0; }
#entertainment section .tower .bottom ul li:nth-child(2) {
	width: calc(450/820 * 100%);
	max-width: 450px;
	float: right;
}
#entertainment section .tower .bottom ul li:nth-child(2) p:nth-child(1) {
	font-size: 24px;
	line-height: 1.4;
	font-weight: bold;
}
#entertainment section .tower .bottom ul li:nth-child(2) p:nth-child(2) {
	font-size: 18px;
	line-height: 1.7;
	margin: 15px 0 0 0;
}



@media screen and (max-width: 767px) {
	#entertainment section .tower { margin: 50px auto 0; }
	#entertainment section .tower .lead { margin: 10px 0 0 0; }
	#entertainment section .tower .lead h5 { font-size: 20px; line-height: 1.5; font-weight: bold; }
	#entertainment section .tower .lead p { font-size: 16px; padding: 15px 0 0 0; }
	#entertainment section .tower .lead p:last-child { font-size: 13px; text-indent: -1em; padding: 30px 0 0 1em; }
	#entertainment section .tower .spot { margin: 50px 0 0 0; }
	#entertainment section .tower .spot + .spot { margin: 70px 0 0 0; }
	#entertainment section .tower .spot div + p { font-size: 13px; }
	#entertainment section .tower .spot ul li p:nth-child(1) { font-size: 16px; }
	#entertainment section .tower .spot ul li p:nth-child(2) { font-size: 13px; }
	#entertainment section .tower .spot ul li:nth-child(2) { font-size: 24px; }
	#entertainment section .tower .spot ul li:nth-child(3) { font-size: 16px; line-height: 1.5; margin: 5px 0 0 0; }
	#entertainment section .tower .spot ul li:nth-child(3) span { font-size: 13px; }
	
	#entertainment section .tower .bottom {
		border: solid 3px #000000;
		border-radius: 30px;
		padding: 27px;
		margin: 50px 0 0 0;
	}
	#entertainment section .tower .bottom ul li:nth-child(1) {
		width: 100%;
		display: table;
		float: none;
		margin: 0 auto;
	}
	#entertainment section .tower .bottom ul li:nth-child(1) p { font-size: 13px; margin: 10px 0 0 0; }
	#entertainment section .tower .bottom ul li:nth-child(2) {
		width: 100%;
		max-width: 100%;
		float: none;
		margin: 30px 0 0 0;
	}
	#entertainment section .tower .bottom ul li:nth-child(2) p:nth-child(1) { font-size: 20px; }
	#entertainment section .tower .bottom ul li:nth-child(2) p:nth-child(2) { font-size: 15px; margin: 10px 0 0 0; }
}





/* 汎用パーツ
========================================================= */

/* plusIssue
------------------------------------------ */

.plusIssue { display: table; padding: 0 calc(20/375 * 100% ); margin: 100px auto 40px; }
.plusIssue div { display: table-cell; vertical-align: middle; }
.plusIssue div:nth-child(1) { width: 140px; }
.plusIssue div:nth-child(2) { padding: 0 0 0 20px; }
.plusIssue p { text-align: center; }
.plusIssue p span { display: inline-block; padding: 0 0.5em; }
.plusIssue a {
	border: solid 2px #cacaca;
	display: table;
	font-size: 16px;
	padding: 0.5em 2em;
	margin: 15px auto 0;
}
.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: 80px auto 40px; }
	.plusIssue div { display: block; }
	.plusIssue div:nth-child(2) { padding: 0; }
	.plusIssue div:nth-child(1) { margin: 0 auto 15px; }
	.plusIssue a { font-size: 14px; }
	.plusIssue ul { font-size: 12px; }
}



/* detailsLink
------------------------------------------ */

.detailsLink1 { width: 100%; max-width: 200px; margin: 15px 0 0 0; }
.detailsLink1 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

.detailsLink2 { width: 100%; max-width: 260px; margin: 15px auto 0; }
.detailsLink2 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

@media screen and (min-width: 769px) {
	.detailsLink1 a { transition: 0.2s; }
	.detailsLink1 a:hover { background-color: #e6e6e6; color: #000000; }
	
	.detailsLink2 a { transition: 0.2s; }
	.detailsLink2 a:hover { background-color: #e6e6e6; color: #000000; }
}

@media screen and (max-width: 767px) {
	.detailsLink1 { margin: 15px auto 0; }
	.detailsLink2 { margin: 15px auto 0; }
}


