@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap');

#header {
	max-width: 1020px;
	text-align: left;
	margin: 0 auto;
	position: relative;
	padding: 25px 0;
	display: flex;
	gap: 10px 20px;
	justify-content: space-between;
	align-items: center;
}

#h-logo {
}

#h-btn {
	border: 1px solid #A34D6A;
	border-radius: 3px;
	background: linear-gradient(to bottom, #C24C51, #A12F34);
}

#h-btn a {
	display: block;
	padding: 9px 17px;
	border: 1px solid #C36665;
	border-radius: 3px;
	color: #F0DCDC;
	font-family: "MS PGothic", "Osaka", arial, helvetica, sans-serif;
	font-size: 81.25%;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
	white-space: nowrap;
}

@media screen and (max-width: 1020px) {
	#header {
		margin: 0 20px;
	}
}

@media screen and (max-width: 767px) {
	#h-btn a {
		font-size: 75%;
	}
}

@media screen and (max-width: 640px) {
	#header {
		padding: 10px 0;
		flex-direction: column;
	}
}


#bodyArea {
	padding-top: 0;
}

@media screen and (max-width: 1060px) {
	#mainArea .content {
		margin: 0 20px;
	}
}

#mainArea .content .img {
	text-align: center;
}

#mainArea .content img {
	vertical-align: bottom;
}

#mainArea .content a {
	color: #333;
}

#mainArea .content h1 {
	margin-top: 46px;
	font-size: 250%;
	text-align: center;
}

#mainArea .content h1 span {
	display: inline-block;
	text-align: left;
}

#mainArea .content section {
	margin-bottom: 98px;
}

#mainArea .content h2 {
	font-size: 225%;
	text-align: center;
}

#mainArea .content p,
#mainArea .content ul {
	font-size: 175%;
	line-height: 1.5;
}

#mainArea .content .more {
	margin-top: 24px;
}

#mainArea .content .more a::before {
	content: '\25B7';
	display: inline-block;
	font-weight: bold;
}

#mainArea .restaurant {
	margin-top: 60px;
}

#mainArea .restaurant h2 {
	margin-bottom: 60px;
	color: #8B8A8A;
	font-family: 'M PLUS 1p', sans-serif;
	font-size: 150%;
	font-weight: 400;
	letter-spacing: .04em;
}

#mainArea .restaurant .imgs {
	display: flex;
	gap: 8px;
	justify-content: center;
}

#mainArea .features ul {
	text-align: center;
}

#mainArea .features ul li {
	margin-bottom: 1em;
	padding-left: 0;
	background: none;
}

#mainArea .hole .img,
#mainArea .published .img  {
	margin-bottom: 60px;
}

#mainArea .hole .holes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 40px;
}

#mainArea .hole .holes > div {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 16px;
}

#mainArea .hole .holes figcaption {
	color: #8B8A8A;
	font-size: 75%;
	text-align: center;
}

#mainArea .published h2 {
	font-size: 250%;
}

#mainArea .published .img:nth-of-type(2) {
	margin: 128px auto;
}

#mainArea .btn {
	width: fit-content;
	max-width: 100%;
	margin: 48px auto 0;
	border: 1px solid #A34D6A;
	border-radius: 3px;
	background: linear-gradient(to bottom, #C24C51, #A12F34);
}

#mainArea .btn a {
	display: block;
	padding: 9px 17px;
	border: 1px solid #C36665;
	border-radius: 3px;
	color: #F0DCDC;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
	text-align: center;
}

@media screen and (max-width: 767px) {
	#mainArea .content h1 {
		margin-top: 24px;
		font-size: 200%;
	}
	
	#mainArea .content section {
		margin-bottom: 60px;
	}
	
	#mainArea .content h2 {
		font-size: 175%;
	}
	
	#mainArea .content p,
	#mainArea .content ul {
		font-size: 137.5%;
	}
	
	#mainArea .restaurant {
		margin-top: 40px;
	}
	
	#mainArea .restaurant h2 {
		margin-bottom: 40px;
		font-size: 150%;
	}
	
	#mainArea .hole .img,
	#mainArea .published .img {
		margin-bottom: 32px;
	}
	
	#mainArea .hole .holes {
		grid-template-columns: 100%;
	}
	
	#mainArea .published .img:nth-of-type(2) {
		margin: 60px auto;
	}
}