@charset "utf-8";

body {
	background-color: #ecf9fd;									/* 問題01：背景色を指定 */
	color: #333;
}

.header {
	padding: 100px 20px;
	margin-bottom: 60px;
	background-image: url("../images/hero1.jpg");									/* 問題02：背景画像を指定 */
	background-size:cover;
	background-position: center;
	text-align: center;
}

.header header h1 {
	font-size: 3.5em;												/* 問題03：文字サイズを指定 */
	padding: 0 0 40px 0;
	color: #fff;												/* 問題04：文字色を指定 */
	font-weight: bold;
	text-shadow: 0px 0px 5px #000, 0px 0px 5px #000;
}

.header header h1 span {
	padding: 0 40px 0 0;
	font-size: 0.8em;
}

.header header p {
	font-size: 1.2em;
	color: #fff;
	text-shadow: 0px 0px 5px #000, 0px 0px 5px #000;
}

.spots .container {
	width: 960px;												/* 問題05：ボックスの横幅を指定 */
	margin: 0 auto;
	padding: 20px;
}

.spots h2 {
	margin:  0px 0px 30px 0px;												/* 問題06：マージンを指定 */
	font-size: 1.8em;
	font-weight:bold;												/* 問題07：文字の太さを指定 */
	color: #005340;
	border-bottom: 5px #005340 double;
	line-height: 1.4;												/* 問題08：行間を指定 */
}

.spots h2::before {
	content: '';
	display: inline-block;
	width: 35px;
	height: 44px;												/* 問題09：ボックスの高さを指定 */
	background-image: url(../images/walk.png);
	background-size: contain;
	background-repeat: no-repeat;
}

.spots .spots-photo {
	padding: 0 0 20px 0;												/* 問題10：パディングを指定 */
	display: flex;
	gap: 20px;
}

.spots .spots-photo img {
	width: calc((100% - 60px) / 4);
	border-radius: 10px;												/* 問題11：角の丸みを指定 */
}

.spots .spots-text h3 {
	padding: 10px 0;
	font-size: 1.4em;
	color: #005340;
	font-weight: bold;
}

.spots .spots-text h3::before {
	content: '◆';
	margin-right: 3px;
}

.spots .spots-text p {
	margin: 0 0 0 20px;
}

.spots .spots-text dl {
	margin: 0 0 0 20px;
}

.spots .spots-text dl dt {
	float: left;
}

.spots .spots-text dl dd {
	margin-left: 120px;
}

.spots .spots-text ul {
	margin: 0 0 0 40px;
}

footer {
	padding: 100px 20px;
	margin: 60px 0 0 0;
	background-image: url('../images/hero2.jpg');
	background-size: cover;
	background-position: center;
	font-size: 0.9em;
	text-align: center;												/* 問題12：文字の配置位置を指定 */
	color: #fff;
	text-shadow: 0px 0px 5px #000, 0px 0px 5px #000;
}