@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/*メイン start*/
.map-title{
	place-items: center;
	margin: 50px auto 50px auto;
}
.map-title p{
	font-size: 1.4rem;
	font-weight: 600;
}
.map-section{
	width: 100%;
	background-color: #f4fafe;
	padding-bottom: 100px;
}
.map-google{
	margin-bottom: 20px;
}
.google-link{
	width: 15%;
	margin: 0px auto 50px auto;
	background-color: rgb(83, 152, 248);
	place-items: center; 
	border-radius: 10px;
}
.google-link p{
	color: white;
	font-weight: 600;
	text-align: center;
	padding: 10px 0px 10px 0px;
}
.adress-section{
	width: 100%;
	background-color: white;
}
.adress-content{
	width: 40%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	"name"
	"adress"
	"pay";
	padding: 50px 0px;
	margin: 100px auto;
}
.adress-content h1, .adress-content p{
	color:rgb(84, 84, 84);
}
.name{
	grid-area: name;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.adress{
	grid-area: adress;
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
}
.pay{
	grid-area: pay;
	width: 50%;
	margin: 30px auto;
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
}
.pay img{
	width: 60%;
}
.access-title{
	width: 100%;
}
.access-title h1{
	font-size: 1.2rem;
	text-align: center;
}
.access-section{
	background-color: #f4fafe;
	padding: 100px 0px 50px 0px;
}
.access-means{
	width: 70%;
	max-width: 1000px;
	margin: auto auto 50px auto;
	display: grid;
	grid-template-columns: 2fr 1fr 5fr 1fr 1fr;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	background-color: white;
	border-radius: 10px;
	grid-template-areas: 
	"boxA boxB boxC boxD boxE";
}
.boxA{
	grid-area: boxA;
}
.boxB{
	grid-area: boxB;
	text-align: center;
}
.boxC{
	grid-area: boxC;
	text-align: center;
}
.boxD{
	grid-area: boxD;
	text-align: center;
}
.boxE{
	grid-area: boxE;
	text-align: center;
}
.access-means img{
	width: 50%;
	text-align: center;
}
.access-means h1{
	font-size: 1.2rem;
	font-weight: 500;
}
.access-means p{
	text-align: left;
}
.access-map{
	width: 50%;
	margin: 100px auto 0px auto;
	max-width: 600px;
}
/*メイン end*/
}
@media screen and (min-width: 481px) and (max-width: 1024px){
/*メイン start*/
.map-title{
	place-items: center;
	margin: 50px auto 50px auto;
}
.map-title p{
	font-size: 1.4rem;
	font-weight: 600;
}
.map-section{
	width: 100%;
	background-color: #f4fafe;
	padding-bottom: 100px;
}
.map-google{
	margin-bottom: 20px;
}
.google-link{
	width: 30%;
	min-width: 200px;
	margin: 0px auto 50px auto;
	background-color: rgb(83, 152, 248);
	place-items: center; 
	border-radius: 10px;
}
.google-link p{
	color: white;
	font-weight: 600;
	text-align: center;
	padding: 10px 0px 10px 0px;
}
.adress-section{
	width: 100%;
	background-color: white;
}
.adress-content{
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	"name"
	"adress"
	"pay";
	padding: 50px 0px;
	margin: 100px auto;
}
.adress-content h1, .adress-content p{
	color:rgb(84, 84, 84);
}
.name{
	grid-area: name;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.adress{
	grid-area: adress;
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
}
.pay{
	grid-area: pay;
	width: 100%;
	margin: 30px auto;
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: left;
}
.pay img{
	width: 70%;
	max-width: 300px;
}
.access-title{
	width: 100%;
}
.access-title h1{
	font-size: 1.2rem;
	text-align: center;
}
.access-section{
	background-color: #f4fafe;
	padding: 100px 0px 50px 0px;
}
.access-means{
	width: 90%;
	max-width: 750px;
	margin: auto auto 50px auto;
	display: grid;
	grid-template-columns: 2fr 1fr 5fr 1fr 1fr;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	background-color: white;
	border-radius: 20px;
	grid-template-areas: 
	"boxA boxB boxC boxD boxE";
}
.boxA{
	grid-area: boxA;
}
.boxB{
	grid-area: boxB;
	text-align: center;
}
.boxC{
	grid-area: boxC;
	text-align: center;
}
.boxD{
	grid-area: boxD;
	text-align: center;
}
.boxE{
	grid-area: boxE;
	text-align: center;
}
.boxA p, .boxB p, .boxC p, .boxD p, .boxE p{
	font-size: 0.9rem;
} 
.access-means img{
	width: 50%;
	text-align: center;
}
.access-means h1{
	font-size: 1.2rem;
	font-weight: 500;
}
.access-means p{
	text-align: left;
}
.access-map{
	width: 70%;
	margin: 100px auto 0px auto;
	min-width: 400px;
}
/*メイン end*/
}
@media screen and (max-width: 480px){
/*メイン start*/
.map-title{
	text-align: center;
	margin: 50px auto 50px auto;
}
.map-title p{
	font-size: 1.4rem;
	font-weight: 600;
}
.map-section{
	width: 100%;
	background-color: #f4fafe;
	padding-bottom: 100px;
}
.map-google{
	margin-bottom: 20px;
}
.google-link{
	width: 30%;
	min-width: 200px;
	margin: 0px auto 50px auto;
	background-color: rgb(83, 152, 248);
	place-items: center; 
	border-radius: 10px;
}
.google-link p{
	color: white;
	font-weight: 600;
	text-align: center;
	padding: 10px 0px 10px 0px;
}
.adress-section{
	width: 100%;
	background-color: white;
}
.adress-content{
	width: 90%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
	"name"
	"adress"
	"pay";
	padding: 50px 0px;
	margin: 5px auto;
}
.adress-content h1, .adress-content p{
	color:rgb(84, 84, 84);
}
.name{
	grid-area: name;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.adress{
	grid-area: adress;
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: center;
}
.pay{
	grid-area: pay;
	width: 100%;
	margin: 30px auto;
	display: flex;
	flex-flow: column;
	align-items: center;
	text-align: left;
}
.pay img{
	width: 70%;
	max-width: 300px;
}
.access-title{
	width: 100%;
}
.access-title h1{
	font-size: 1.2rem;
	text-align: center;
}
.access-section{
	background-color: #f4fafe;
	padding: 50px 0px 50px 0px;
}
.access-means{
	width: 90%;
	max-width: 1000px;
	margin: auto auto 50px auto;
	display: grid;
	grid-template-columns: 2fr 5fr;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	background-color: white;
	border-radius: 20px;
	grid-template-areas: 
	"boxA boxA"
	"boxB boxC"
	"boxD boxE";
	gap: 10px;
	padding: 10px 0px;
}
.boxA{
	grid-area: boxA;
}
.boxB{
	grid-area: boxB;
	text-align: center;
}
.boxC{
	grid-area: boxC;
	/*text-align: center;*/
}
.boxD{
	grid-area: boxD;
	text-align: center;
}
.boxE{
	grid-area: boxE;
	/*text-align: center;*/
}
.boxA p, .boxB p, .boxC p, .boxD p, .boxE p{
	font-size: 0.9rem;
} 
.access-means img{
	width: 50%;
	text-align: center;
}
.access-means h1{
	font-size: 1.2rem;
	font-weight: 500;
}
.access-means p{
	text-align: left;
}
.access-map{
	width: 70%;
	margin: 100px auto 0px auto;
	min-width: 400px;
}
/*メイン end*/
}