@charset "UTF-8";

/* ページ全体の設定 */
body {
	margin: 20px;
}
/* linkの設定 */
a {
	text-decoration: none;
	color: inherit;
}
a:hover {
	opacity: 0.6;
}


/* === 950px以下表示設定 === */
body {
	margin: 10px;
}
.grid {
	display: grid;
	grid: 100px 480px 200px 500px 300px 320px 480px 20px / 370px;
	row-gap: 2rem;
	justify-content: center;
	}

.midashi {
	font-family: "Gelasio", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size:18pt;
}

/* ヘッダーの設定 */
.header {
	font-family: "Gelasio", serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-size:18pt;
	display: grid;
	grid-template-columns: 120px auto;
	align-items: center;
}
/* mainの設定 */
.First {
	background-image: url(img01.jpg);
	background-repeat: no-repeat;
	border: 0;
	border-radius: 50px;
	corner-shape: round;
	padding: 20px;
	text-align: right;
}

.Bluesky { 
	justify-self: center;
}

.GoogleMap { 
	justify-self: center;
}

.History {
	background-image: url(img02.jpg);
	background-repeat: no-repeat;
	border: 0;
	border-radius: 50px;
	padding: 20px;
	corner-shape: round;
}

.footer {
		text-align: center;
}


/* === PC用表示設定 === */
@media (min-width: 950px) {
	body {
		margin: 50px;
	}
	.grid {
		display: grid;
		grid: 100px 480px 550px 350px 480px 80px / 450px 450px;
		row-gap: 3rem;
		justify-content: center;
	}
	.header { grid-area: 1 / 1 / 2 / 3; }
	.First { grid-area: 2 / 1 / 3 / 3; }
	.info { grid-area: 3 / 1 / 4 / 2; }
	.Bluesky { grid-area: 3 / 2 / 4 / 3; }
	.address { grid-area: 4 / 1 / 5 / 2; }
	.GoogleMap { grid-area: 4 / 2 / 5 / 3; }
	.History { grid-area: 5 / 1 / 6 / 3; }
	.footer { grid-area: 6 / 1 / 7 / 3; }
	.midashi {
		font-family: "Gelasio", serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
		font-size:21pt;
	}

/* ヘッダーの設定 */
	.header {
		font-family: "Gelasio", serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
		font-size:21pt;
		display: grid;
		grid-template-columns: 120px auto;
		align-items: center;
	}
/* mainの設定 */
	.First {
		background-image: url(img01.jpg);
		background-repeat: no-repeat;
		border: 0;
		border-radius: 40px;
		corner-shape: round;
		padding: 30px;
		text-align: right;
	}
	
	.Bluesky { 
		justify-self: center;
	}
	
	.GoogleMap { 
		justify-self: center;
	}
	
	.History {
		background-image: url(img02.jpg);
		background-repeat: no-repeat;
		border: 0;
		border-radius: 50px;
		padding: 30px;
		corner-shape: round;
	}
	
	.footer {
			text-align: center;
	}
}

/* === PC用表示ワイド設定 === */

@media (min-width: 1500px) {
	body {
		margin: 100px;
	}
}
/* === PC用表示設定ここまで === */