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





/* newSpot
========================================================= */

#newSpot { color: #000000; line-height: 1.0; }



@media screen and (max-width: 767px) {
	
}





/* spotMain
========================================================= */

#newSpot .spotMain {
	width: 100%;
	max-width: 1500px;
	background: url(/images/special/14/main_bg.jpg) no-repeat center top;
	background-size: 100%;
	margin: 0 auto;
}
#newSpot .spotMain h2 {
	 width: calc(600/1500 * 100%);
	 max-width: 600px;
	 min-width: 250px;
	 padding: 90px 0 0 0;
	 margin: 0 auto;
}
#newSpot .spotMain .lead {
	font-size: 17px;
	line-height: 1.7;
	text-align: center;
	padding: 90px calc(15/320 * 100%) 0;
}
#newSpot .spotMain .lead span { display: block; }
#newSpot .spotMain .sns_icon_area { margin: 25px 0 0 0; }



@media screen and (max-width: 767px) {
	#newSpot .spotMain h2 { padding: 20px 0 0 0; }
	#newSpot .spotMain .lead { font-size: 16px; text-align: left; padding: 50px calc(15/320 * 100%) 0; }
	#newSpot .spotMain .lead span { display: inline; }
}

@media screen and (max-width: 480px) {
	#newSpot .spotMain { background-size: 150%; }
}





/* spotArea
========================================================= */

#newSpot .spotArea { padding: 250px calc(15/320 * 100%) 0; position: relative; }
#newSpot .spotArea.yellow { margin: 60px 0 0 0; }
#newSpot .spotArea.blue, #newSpot .spotArea.pink { margin: 80px 0 0 0; }
#newSpot .spotArea h3 {
	width: calc(340/1100 * 100%);
	max-width: 340px;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
}
#newSpot .spotArea .inner {
	width: 100%;
	max-width: 1100px;
	border-style: solid;
	border-width: 20px;
	border-radius: 40px;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: calc(100% + 40px);
	box-sizing: border-box;
	padding: 160px calc(40/1100 * 100%) 60px;
	margin: 0 auto;
}
#newSpot .spotArea.yellow .inner {
	border-color: #ffed00;
	background-image: url(/images/special/14/area_bg_yellow.jpg);
}
#newSpot .spotArea.blue .inner {
	border-color: #8ed2f4;
	background-image: url(/images/special/14/area_bg_blue.jpg);
}
#newSpot .spotArea.pink .inner {
	border-color: #f8cdc9;
	background-image: url(/images/special/14/area_bg_pink.jpg);
}

#newSpot .spotArea h4 {
	width: 100%;
	max-width: 700px;
	height: 70px;
	border-radius: 35px;
	text-align: center;
	margin: 0 auto 55px;
	position: relative;
}
#newSpot .spotArea .layout1 + h4 { margin: 100px auto 55px; }
#newSpot .spotArea .layout2 + h4 { margin: 100px auto 55px; }
#newSpot .spotArea h4 span {
	width: 100%;
	font-size: 32px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 0 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#newSpot .spotArea h4 span br { display: none; }
#newSpot .spotArea.yellow h4 { background: #fff100; color: #eaa707; }
#newSpot .spotArea.blue h4 { background: #00aceb; color: #ffffff; }
#newSpot .spotArea.pink h4 { background: #ed7987; color: #ffffff; }
#newSpot .spotArea h4:after { position: absolute; right: 0; bottom: -30px; left: 0; margin: auto; }
#newSpot .spotArea.yellow h4:after { content: url(/images/special/14/area_arrow_yellow.png); }
#newSpot .spotArea.blue h4:after { content: url(/images/special/14/area_arrow_blue.png); }
#newSpot .spotArea.pink h4:after { content: url(/images/special/14/area_arrow_pink.png); }

#newSpot .spotArea .headLine { width: 100%; display: table; }
#newSpot .spotArea .headLine p,
#newSpot .spotArea .headLine h5 { display: table-cell; vertical-align: top; }
#newSpot .spotArea .headLine p { width: 70px; }
#newSpot .spotArea .headLine h5 { font-size: 30px; line-height: 1.5; font-weight: bold; }
#newSpot .spotArea .headLine h5 span { display: block; font-size: 16px; margin: 10px 0 0 0; }
#newSpot .spotArea .headLine p + h5 { padding: 15px 0 0 10px; }
#newSpot .spotArea .headLine div {
	display: inline-block;
	border: solid 1px #00aceb;
	color: #00aceb;
	font-size: 18px;
	font-weight: bold;
	box-sizing: border-box;
	padding: 7px 10px 5px;
}
#newSpot .spotArea .headLine div + h5 { display: block; margin: 10px 0 0 0; }

#newSpot .spotArea .layout1 { width: 100%; max-width: 940px; margin: 0 auto; }
#newSpot .spotArea .layout1 div + ul { width: 100%; display: table; margin: 20px 0 0 0; }
#newSpot .spotArea .layout1 div + ul li { display: table-cell; vertical-align: top; }
#newSpot .spotArea .layout1 div + ul li:nth-child(1) {
	width: calc(590/940 * 100%);
	border-right: solid 1px #cccccc;
	box-sizing: border-box;
	padding: 0 40px 0 0;
}
#newSpot .spotArea .layout1 div + ul li:nth-child(2) {
	width: calc(350/940 * 100%);
	padding: 0 0 0 40px;
}
#newSpot .spotArea .layout1 ul + ul { width: 100%; display: table; margin: 45px 0 0 0; }
#newSpot .spotArea .layout1 ul + ul li { width: 50%; display: table-cell; vertical-align: bottom; }
#newSpot .spotArea .layout1 ul + ul li img { width: calc(440/470 *100%); }
#newSpot .spotArea .layout1 ul + ul li:nth-child(2) { text-align: right; }
#newSpot .spotArea .layout1 ul + ul li.w780 { width: 100%; max-width: 780px; display: block; margin: 0 auto 0; }
#newSpot .spotArea .layout1 ul + ul li.w780 img { width: 100%; }

#newSpot .spotArea .layout2 { width: 100%; max-width: 940px; margin: 0 auto; }
#newSpot .spotArea .layout2 + .layout2 { margin: 80px auto 0; }
#newSpot .spotArea .layout2 ul:first-child { width: 100%; overflow: hidden; }
#newSpot .spotArea .layout2 ul:first-child li { width: calc(440/940 * 100%); float: left; }
#newSpot .spotArea .layout2 ul:first-child li:nth-child(2) { max-width: 440px; float: right; }
#newSpot .spotArea .layout2 ul:first-child li.w340 img { width: calc(340/440 *100%); display: block; }
#newSpot .spotArea .layout2 ul + ul { width: 100%; margin: 45px 0 0 0; overflow: hidden; }
#newSpot .spotArea .layout2 ul + ul li { width: calc(440/940 *100%); max-width: 440px; float: left; }
#newSpot .spotArea .layout2 ul + ul li:nth-child(2) { float: right; }
#newSpot .spotArea .layout2 ul + ul li.w680 { width: 100%; max-width: 680px; float: none; margin: 50px auto 0; }

#newSpot .spotArea .layout3 {
	width: 100%;
	max-width: 940px;
	border-radius: 30px;
	background: #eaf6fc;
	box-sizing: border-box;
	padding: 95px calc(30/940 * 100%) 40px;
	margin: 155px 0 0 0;
	position: relative;
}
#newSpot .spotArea .layout3 > div {
	max-width: 580px;
	position: absolute;
	top: -35px;
	right: 0;
	left: 0;
	margin: auto;
}
#newSpot .spotArea .layout3 ul { width: 100%; max-width: 860px; margin: 0 auto; overflow: hidden; }
#newSpot .spotArea .layout3 ul + ul { margin: 70px auto 0; }
#newSpot .spotArea .layout3 li { width: calc(440/860 * 100%); max-width: 440px; float: left; }
#newSpot .spotArea .layout3 li:nth-child(2) { width: calc(380/860 * 100%); max-width: 380px; float: right; }

#newSpot .spotArea .text { font-size: 15px; line-height: 1.8; }
#newSpot .spotArea .layout2 .text,
#newSpot .spotArea .layout3 .text { margin: 25px 0 0 0; }
#newSpot .spotArea .info { font-size: 13px; line-height: 1.7; }
#newSpot .spotArea .layout2 .text + .info,
#newSpot .spotArea .layout3 .text + .info { margin: 20px 0 0 0; }
#newSpot .spotArea .info span { display: block; font-weight: bold; }
#newSpot .spotArea .info dl { display: table; }
#newSpot .spotArea .info dt,
#newSpot .spotArea .info dd { display: table-cell; vertical-align: top; }
#newSpot .spotArea .info dt { width: 5em; text-align: right; }
#newSpot .spotArea figcaption { font-size: 13px; margin: 10px 0 0 0; }



@media screen and (max-width: 1100px) {
	#newSpot .spotArea { padding: calc(250/1100 * 100%) calc(15/320 * 100%) 0; position: relative; }
	#newSpot .spotArea .inner { padding: calc(160/1100 * 100%) calc(40/1100 * 100%) 60px; }
}

@media screen and (max-width: 767px) {
	#newSpot .spotArea { padding: 100px calc(15/320 * 100%) 0; }
	#newSpot .spotArea.yellow { margin: 40px 0 0 0; }
	#newSpot .spotArea.blue, #newSpot .spotArea.pink { margin: 60px 0 0 0; }
	#newSpot .spotArea .inner { border-width: 10px; border-radius: 15px; padding: 100px 15px 20px; }
	#newSpot .spotArea h3 { width: 170px; }
	#newSpot .spotArea h4 { height: 60px; border-radius: 30px; margin: 0 auto 40px; }
	#newSpot .spotArea .layout1 + h4 { margin: 70px auto 40px; }
	#newSpot .spotArea .layout2 + h4 { margin: 70px auto 40px; }
	#newSpot .spotArea h4 span { font-size: 18px; line-height: 1.2; }
	#newSpot .spotArea h4 span br { display: block; }
	
	#newSpot .spotArea .headLine p { width: 50px; }
	#newSpot .spotArea .headLine h5 { font-size: 19px; }
	#newSpot .spotArea .headLine h5 br { display: none; }
	#newSpot .spotArea .headLine h5 span { display: block; font-size: 14px; margin: 10px 0 0 0; }
	#newSpot .spotArea .headLine p + h5 { padding: 10px 0 0 10px; }
	#newSpot .spotArea .headLine div { width: 100%; font-size: 16px; text-align: center; }
	
	#newSpot .spotArea .layout1 div + ul li { display: block; }
	#newSpot .spotArea .layout1 div + ul li:nth-child(1) { width: 100%; border-right: none; padding: 0; }
	#newSpot .spotArea .layout1 div + ul li:nth-child(2) { width: 100%; padding: 20px 0 0 0; }
	#newSpot .spotArea .layout1 ul + ul { margin: 30px 0 0 0; }
	#newSpot .spotArea .layout1 ul + ul li { width: 100%; display: block; }
	#newSpot .spotArea .layout1 ul + ul li img { width: 100%; max-width: 440px; display: block; margin: 0 auto; }
	#newSpot .spotArea .layout1 ul + ul li:nth-child(2) { margin: 20px auto 0; }
	
	#newSpot .spotArea .layout2 + .layout2 { margin: 60px auto 0; }
	#newSpot .spotArea .layout2 ul:first-child li { width: 100%; float: none; }
	#newSpot .spotArea .layout2 ul:first-child li:nth-child(2) { float: none; margin: 30px auto 0; }
	#newSpot .spotArea .layout2 ul:first-child li.w340 img { margin: 0 auto; }
	#newSpot .spotArea .layout2 ul + ul { width: 100%; margin: 20px 0 0 0; overflow: hidden; }
	#newSpot .spotArea .layout2 ul + ul li { width: 100%; float: none; margin: 0 auto; }
	#newSpot .spotArea .layout2 ul + ul li:nth-child(2) { float: none; margin: 20px auto 0; }
	#newSpot .spotArea .layout2 ul + ul li.w680 { margin: 20px auto 0; }
	
	#newSpot .spotArea .layout3 { border-radius: 15px; padding: 40px 15px 20px; margin: 80px 0 0 0; }
	#newSpot .spotArea .layout3 > div { max-width: 270px; top: -15px; }
	#newSpot .spotArea .layout3 ul + ul { margin: 50px auto 0; }
	#newSpot .spotArea .layout3 li { width: 100%; float: none; }
	#newSpot .spotArea .layout3 li:nth-child(2) { width: 100%; float: none; margin: 20px auto 0; }
	
	#newSpot .spotArea .layout2 .text,
	#newSpot .spotArea .layout3 .text { margin: 15px 0 0 0; }
	#newSpot .spotArea figcaption { font-size: 12px; line-height: 1.5; }
}





/* spotBottom
========================================================= */

#newSpot .spotBottom { padding: 0 calc(15/320 * 100%); }
#newSpot .spotBottom .title {
	width: 100%;
	max-width: 1100px;
	height: 200px;
	border-radius: 30px;
	background: linear-gradient(90deg, #fbdcd5, #72caf3 25%, #ffffff 50%, #c9e2aa 75%, #fff100);
	margin: 120px auto 0;
	position: relative;
}
#newSpot .spotBottom .title h3 {
	width: 100%;
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#newSpot .spotBottom .title h3 span { display: block; font-size: 16px; line-height: 1.5; padding: 35px 0 0 0; }
#newSpot .spotBottom .title h3 span br { display: none; }

#newSpot .spotBottom ul { width: 100%; max-width: 1000px; display: table; margin: 50px auto 0; }
#newSpot .spotBottom ul + ul { margin: 80px auto 0; }
#newSpot .spotBottom li { width: calc(440/1000 * 100%); float: left; }
#newSpot .spotBottom li:nth-child(2) { width: calc(500/1000 * 100%); float: right; }

#newSpot .spotBottom .headLine { display: table; }
#newSpot .spotBottom .headLine p,
#newSpot .spotBottom .headLine h5 { display: table-cell; vertical-align: top; }
#newSpot .spotBottom .headLine p { width: 70px; }
#newSpot .spotBottom .headLine h5 { font-size: 30px; line-height: 1.5; font-weight: bold; padding: 15px 0 0 10px; }
#newSpot .spotBottom .text { font-size: 15px; line-height: 1.8; margin: 25px 0 0 0; }
#newSpot .spotBottom .info { font-size: 13px; line-height: 1.7; margin: 20px 0 0 0; }
#newSpot .spotBottom figcaption { font-size: 13px; line-height: 1.7; margin: 10px 0 0 0; }

#newSpot .spotBottom li.w320 figure { width: calc(320/500 * 100%); }
#newSpot .spotBottom li.w250 figure { width: calc(250/500 * 100%); position: relative; }
#newSpot .spotBottom li.w250 figcaption { position: absolute; bottom: -5px; right: -195px; }
#newSpot .spotBottom li.w490 figure { width: calc(490/500 * 100%); }



@media screen and (max-width: 767px) {
	#newSpot .spotBottom .title { height: 120px; border-radius: 15px; margin: 80px auto 0; }
	#newSpot .spotBottom .title h3 { font-size: 28px; }
	#newSpot .spotBottom .title h3 span { font-size: 14px; padding: 15px 0 0 0; }
	#newSpot .spotBottom .title h3 span br { display: block; }
	#newSpot .spotBottom ul { margin: 40px auto 0; }
	#newSpot .spotBottom ul + ul { margin: 60px auto 0; }
	#newSpot .spotBottom li { width: 100%; float: none; }
	#newSpot .spotBottom li:nth-child(2) { width: 100%; max-width: 500px; float: none; margin: 30px auto 0; }
	
	#newSpot .spotBottom .headLine p { width: 50px; }
	#newSpot .spotBottom .headLine h5 { font-size: 19px; padding: 10px 0 0 10px; }
	#newSpot .spotBottom .text { margin: 15px 0 0 0; }
	#newSpot .spotBottom figcaption { font-size: 12px; line-height: 1.5; }
	
	#newSpot .spotBottom li.w320 figure { margin: 0 auto; }
	#newSpot .spotBottom li.w250 figure { margin: 0 auto; }
	#newSpot .spotBottom li.w250 figcaption { position: static; }
	#newSpot .spotBottom li.w490 figure { width: 100%; }
}





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

.plusIssue { padding: 0 calc(15/320 * 100% ); margin: 100px 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: 80px 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; }
}