@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; }
}



/* nightTime
========================================================= */

.nightTimeWrap {
	background: url(/images/special/11/background.jpg) center top #000000;
	background-size: 100%;
	margin-top: 10px;
}
.nightTimeInner { width: 100%; max-width: 1500px; margin: 0 auto; padding: 80px 0 150px; }

@media screen and (max-width: 1500px) {
	.nightTimeWrap { background-size: 100%; }
	.nightTimeInner { background: none; transition: 0.3s ease; }
}

@media screen and (max-width: 767px) {
	.nightTimeInner { padding: 10px 0 50px; }
}



/* nightTimeMain
========================================================= */

#nightTimeMain { padding: 0 calc(10/320 * 100%); margin-top: 10px; }
#nightTimeMain .mainInner {
	max-width: 1100px;
	background: url(/images/special/11/main_bg.gif) center top #fffddf;
	background-size: 20%;
	position: relative;
	padding: 20px 0;
	margin: 0 auto 0;
}
#nightTimeMain .mainPc { position: absolute; top: -2.5%; }
#nightTimeMain .mainSp { display: none; }
#nightTimeMain .mainTitle {
	border: solid 4px #042275;
	box-sizing: border-box;
	padding: 48.5% 0 40px;
	margin: 0 20px;
}
#nightTimeMain .mainTitle .lead {
	width: calc(920/1050 * 100%);
	font-size: 17px;
	line-height: 30px;
	text-align: center;
	margin: 0 auto;
}
#nightTimeMain .mainTitle #snsArea { padding-top: 20px; }



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

@media screen and (max-width: 767px) {
	#nightTimeMain .mainPc { display: none; }
	#nightTimeMain .mainSp { display: block; position: absolute; top: -1.0%; }
	#nightTimeMain .mainTitle { padding: 85% 0 30px; }
	#nightTimeMain .mainTitle .lead {
		width: calc(260/290 * 100%);
		font-size: 15px;
		line-height: 26px;
		text-align: left;
	}
	#nightTimeMain .mainTitle .lead br { display: none; }
	#nightTimeMain .mainTitle #snsArea { padding-top: 0; }
}



/* nightTimeNav
========================================================= */

#nightTimeNav {
	padding: 0 calc(10/320 * 100%);
}
#nightTimeNav div {
	max-width: 960px;
	overflow: hidden;
	background: #fffddf;
	border-top: solid 2px #d1cfb5;
	margin: 0 auto;
	padding-bottom: 10px;
}
#nightTimeNav a {
	width: 20%;
	height: 130px;
	float: left;
	display: table;
	color: #042275;
	font-size: 22px;
	line-height: 34px;
	font-weight: bold;
	text-decoration: none;
	box-sizing: border-box;
	padding: 0 10px;
}
#nightTimeNav a p {
	border-right: solid 2px #042275;
	border-bottom: solid 2px #042275;
	border-left: solid 2px #042275;
	padding-bottom: 20px;
	position: relative;
}
#nightTimeNav a p:after {
	content: "";
	width: 20px;
	height: 20px;
	border-bottom: solid 2px #042275;
	border-right: solid 2px #042275;
	transform: rotate(45deg);
	position: absolute;
	right: 0;
	bottom: 15px;
	left: 0;
	margin: auto;
}
#nightTimeNav a p { display: table-cell; text-align: center; vertical-align: middle; }



@media screen and (min-width: 769px) {
	#nightTimeNav a:hover p { background: #042275; color: #ffffff; transition: 0.3s ease; }
	#nightTimeNav a:hover p:after { border-bottom: solid 2px #ffffff; border-right: solid 2px #ffffff; }
}

@media screen and (max-width: 1100px) {
	#nightTimeNav a { height: 100px; font-size: 16px; line-height: 28px; transition: 0.3s ease; }
}

@media screen and (max-width: 767px) {
	#nightTimeNav a {
		width: 100%;
		height: 50px;
		float: none;
		padding: 10px 10px 0 10px;
	}
	#nightTimeNav a p { border: solid 2px #042275; text-align: left; padding-bottom: 0; padding-left: 15px; }
	#nightTimeNav a p br { display: none; }
	#nightTimeNav a p:after {
		width: 10px;
		height: 10px;
		right: 15px;
		bottom: 15px;
		left: auto;
		margin: auto;
	}
}



/* nightTimeArea
========================================================= */

.nightTimeArea { padding: 110px calc( 10 / 320 * 100% ) 0; margin-top: -110px; }
.nightTimeArea + .nightTimeArea { margin: -10px auto 0; }
.nightTimeArea .areaMain { width: 100%; max-width: 1100px; padding-bottom: 80px; margin: 0 auto; }
#nightTimeArea0 .areaMain { background: #042275; margin-top: 75px; }
#nightTimeArea1 .areaMain { background: #dff2fc; margin-top: 40px; }
#nightTimeArea2 .areaMain { background: #fdeae4; margin-top: 90px; }
#nightTimeArea3 .areaMain { background: #fff45c; margin-top: 40px; }
#nightTimeArea4 .areaMain { background: #ebc8df; }
#nightTimeArea5 .areaMain { background: #d5ebe1; margin-top: 40px; }

.nightTimeArea .areaMain .areaTitle { text-align: center; position: relative; }
#nightTimeArea1 .areaMain .areaTitle img { position: absolute; top: -40px; left: 0; }
#nightTimeArea2 .areaMain .areaTitle img { position: absolute; top: -90px; left: 0; }
#nightTimeArea3 .areaMain .areaTitle img { position: absolute; top: -40px; left: 0; }
#nightTimeArea5 .areaMain .areaTitle img { position: absolute; top: -40px; left: 0; }

.nightTimeArea .areaMain .areaTitle h3 {
	font-size: 60px;
	line-height: 64px;
	font-weight: 700;
	position: relative;
	padding-top: 80px;
}
#nightTimeArea1 .areaMain .areaTitle h3 { color: #08aeec; }
#nightTimeArea2 .areaMain .areaTitle h3 { color: #f091a0; }
#nightTimeArea3 .areaMain .areaTitle h3 { color: #f39800; }
#nightTimeArea4 .areaMain .areaTitle h3 { color: #e16ea6; }
#nightTimeArea5 .areaMain .areaTitle h3 { color: #6bbc6e; }
.nightTimeArea .areaMain .areaTitle dl {
	width: calc(94/110 * 100%);
	color: #042275;
	padding-top: 40px;
	margin: 0 auto;
}
.nightTimeArea .areaMain .areaTitle dt { font-size: 28px; line-height: 40px; font-weight: 700; }
.nightTimeArea .areaMain .areaTitle dd { font-size: 17px; line-height: 30px; font-weight: 700; padding-top: 30px; }



.nightTimeArea .areaMain ul {
	width: calc(94/110 * 100%);
	overflow: hidden;
	padding-top: 80px;
	margin: 0 auto;
	position: relative;
}
.nightTimeArea .areaMain div.areaTitle + ul { padding-top: 70px; }
.nightTimeArea .areaMain ul + ul { padding-top: 120px; }
#nightTimeArea0 .areaMain ul + ul { padding-top: 100px; }
#nightTimeArea0 .areaMain ul { color: #ffffff; }
#nightTimeArea5 .areaMain div.areaWalk + ul { padding-top: 120px; }
#nightTimeArea5 .areaMain p.areaBath + ul { padding-top: 0; }

.nightTimeArea .areaMain li:nth-child(1) {
	float: left;
	width: calc(44/94 * 100%);
	max-width: 440px;
	margin-top: 20px;
}
#nightTimeArea0 .areaMain li:nth-child(1) { margin-top: 0; }
#nightTimeArea4 .areaMain li:nth-child(1) { margin-top: 0; }
.nightTimeArea .areaMain li:nth-child(2) {
	float: right;
	width: calc(45/94 * 100%);
	max-width: 450px;
	min-width: 240px;
}
.nightTimeArea .areaMain li:nth-child(3) {
	width: calc(250/940 * 100%);
	max-width: 250px;
	min-width: 200px;
	position: absolute;
	bottom: 0;
	left: calc(35/94 * 100%);
}
#nightTimeArea1 .areaMain li:nth-child(3) {
	width: calc(272/940 * 100%);
	max-width: 272px;
	min-width: calc(4/5 * 272px);
}
#nightTimeArea1 .areaMain li:nth-child(3) img.sp { display: none; }

.nightTimeArea .areaMain h4 {
	width: 440px;
	height: 60px;
	display: table-cell;
	background: #042275;
	color: #ffffff;
	border-radius: 60px 60px;
	font-size: 25px;
	line-height: 35px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	box-sizing: border-box;
	padding-top: 0.2em;
}
.nightTimeArea .areaMain h4 span { display: inline-block; }
#nightTimeArea0 .areaMain h4 { background: #ffffff; color: #042275; }

.nightTimeArea .areaMain h4 + p { font-size: 15px; line-height: 28px; padding-top: 15px; }
.nightTimeArea .areaMain div.data { font-size: 13px; line-height: 22px; padding-top: 25px; }
.nightTimeArea .areaMain div.data span { display: inline-block; }
.nightTimeArea .areaMain div.data span:nth-child(3) { display: block; }
.nightTimeArea .areaMain div.data table th { white-space: nowrap; text-align: right; }
.nightTimeArea .areaMain div.data table td a { display: inline-block; padding-left: 14px; position: relative; }
.nightTimeArea .areaMain div.data table td a:before {
	content: "";
	width: 6px;
	height: 6px;
	display: block;
	border-bottom: solid 1px #000000;
	border-left: solid 1px #000000;
	box-sizing: border-box;
	position: absolute;
	top: 10px;
	left: 0;
}
.nightTimeArea .areaMain div.data table td a:after {
	content: "";
	width: 9px;
	height: 8px;
	display: block;
	background: #ffffff;
	border: solid 1px #000000;
	box-sizing: border-box;
	position: absolute;
	top: 6px;
	left: 2px;
}
.nightTimeArea .areaMain div.btn { display: table; margin: 15px 0 0 0; }
.nightTimeArea .areaMain div.btn a {
	width: 190px;
	height: 35px;
	display: table-cell;
	background: #000000;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 15px;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	box-sizing: border-box;
	padding-top: 0.2em;
	cursor: pointer;
}
#nightTimeArea0 .areaMain div.btn a { background: #ffffff; color: #042275; }

#nightTimeArea5 .areaMain .areaWalk { padding-top: 80px; margin: 0 auto; }
#nightTimeArea5 .areaMain .areaWalk p:first-child {
	width: calc(34/110 * 100%);
	max-width: 340px;
	min-width: 250px;
	margin: 0 auto;
}
#nightTimeArea5 .areaMain .areaWalk ul { position: relative; padding-top: 30px; }
#nightTimeArea5 .areaMain .areaWalk li:nth-child(1) { margin-top: 0; }
#nightTimeArea5 .areaMain .areaWalk li:nth-child(2) { width: calc(44/94 * 100%); }
#nightTimeArea5 .areaMain .areaWalk li div.img { max-width: 440px; margin: 20px auto 0; }
#nightTimeArea5 .areaMain .areaWalk li:nth-child(2) div.img { position: absolute; bottom: 0; }

#nightTimeArea5 .areaMain p.areaBath { width: calc(94/110 * 100%); max-width: 578px; margin: 50px auto; }



















@media screen and (max-width: 940px) {
	.nightTimeArea .areaMain { padding-bottom: 50px; }
	
	.nightTimeArea .areaMain .areaTitle h3 { font-size: 40px; line-height: 42px; padding-top: 40px; }
	
	.nightTimeArea .areaMain div.areaTitle + ul { padding-top: 50px; }
	.nightTimeArea .areaMain ul + ul { padding-top: 70px; }
	#nightTimeArea0 .areaMain ul + ul { padding-top: 70px; }
	
	.nightTimeArea .areaMain li:nth-child(1) { float: none; width: 100%; max-width: 100%; transition: 0.3s ease; }
	.nightTimeArea .areaMain li:nth-child(2) { float: none; margin: 30px auto 0; transition: 0.3s ease; }
	.nightTimeArea .areaMain li:nth-child(3) { bottom: 0; left: 10%; }
	.nightTimeArea .areaMain h4 { width: 900px; margin: 0 auto 0; }
	
	#nightTimeArea5 .areaMain .areaWalk li:nth-child(2) { width: 100%; max-width: 100%; margin: 70px auto 0; }
	#nightTimeArea5 .areaMain .areaWalk li div.img { width: calc(44/94 * 100%); min-width: 250px; }
	#nightTimeArea5 .areaMain .areaWalk li:nth-child(2) div.img { position: static; }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
}

@media screen and (min-width: 769px) {
	.nightTimeArea .areaMain div.btn a:hover { background: #ff6600; transition: 0.3s ease; }
	#nightTimeArea0 .areaMain div.btn a:hover { background: #ff6600; color: #ffffff; transition: 0.3s ease; }
}

@media screen and (max-width: 767px) {
	.nightTimeArea { padding: 70px calc( 10 / 320 * 100% ) 0; margin-top: -70px; }
	
	#nightTimeArea0 .areaMain { margin-top: 50px; }
	#nightTimeArea1 .areaMain { margin-top: 0; }
	#nightTimeArea2 .areaMain { margin-top: 0; }
	#nightTimeArea3 .areaMain { margin-top: 0; }
	#nightTimeArea5 .areaMain { margin-top: 0; }
	
	.nightTimeArea .areaMain .areaTitle img { display: none; }
	
	.nightTimeArea .areaMain .areaTitle h3 { font-size: 24px; line-height: 30px; padding-top: 30px; }
	.nightTimeArea .areaMain .areaTitle dl { padding-top: 20px; }
	.nightTimeArea .areaMain .areaTitle dt { font-size: 18px; line-height: 30px; }
	.nightTimeArea .areaMain .areaTitle dd { font-size: 14px; line-height: 25px; text-align: left; padding-top: 20px; }
	.nightTimeArea .areaMain .areaTitle dd br { display: none; }
	
	.nightTimeArea .areaMain ul { padding-top: 50px; }
	.nightTimeArea .areaMain li:nth-child(1) { margin-top: 0; }
	.nightTimeArea .areaMain li:nth-child(3) { position: static; margin: 20px auto 0; }
	#nightTimeArea1 .areaMain li:nth-child(3) { width: calc(250/940 * 100%); min-width: 200px; }
	#nightTimeArea1 .areaMain li:nth-child(3) img.pc { display: none; }
	#nightTimeArea1 .areaMain li:nth-child(3) img.sp { display: block; }
	
	.nightTimeArea .areaMain h4 {
		height: 40px;
		border-radius: 40px 40px;
		font-size: 18px;
		line-height: 21px;
		boa-sizing: border-box;
		padding: 0.5em;
	}
	.nightTimeArea .areaMain div.data { padding-top: 10px; }
	.nightTimeArea .areaMain div.btn { margin: 15px auto 0; }
	
	#nightTimeArea5 .areaMain p.areaBath { margin: 40px auto; }
}



/* 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 { -webkit-transition: 0.2s ease; transition: 0.2s ease; }
	.detailsLink1 a:hover { background-color: #ff6600; }
	
	.detailsLink2 a { -webkit-transition: 0.2s ease; transition: 0.2s ease; }
	.detailsLink2 a:hover { background-color: #000000; color: #ffffff; }
}