@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
green  #00BEA5   0,190,165
light  #A6E8DF 166,232,223
-----------------------------------------------*/

/*-----------------------------------------------
  title
-----------------------------------------------*/
#booking .title {
background-image: url("img/title_bg.jpg");
}
#booking .title_head::after {
content: "Booking system";
}
@media screen and (max-width: 800px) {
}


/*-----------------------------------------------
  lead
-----------------------------------------------*/
#booking .lead {
padding: 0 4%;
}
#booking .lead .text {
font-size: 1.2em;
font-weight: 500;
text-align: center;
}
#booking .lead .text strong {
color: #00BEA5;
}
@media screen and (max-width: 800px) {
	#booking .lead .text {
	font-size: 1em;
	text-align: justify;
	}
}

/*-----------------------------------------------
  area
-----------------------------------------------*/
#booking .system .link dl {
padding: 1em;
font-size: 1.25em;
font-weight: 500;
text-align: center;
color: #FFF;
background: #00BEA5;
border-radius: 10px;
}
#booking .system .link_head {
margin: 0 0.5em;
font-size: 1.5em;
}
#booking .system .link_button {
margin-top: 0.5em;
padding: 0.25em 0.5em;
color: #00BEA5;
background: #FFF;
border-radius: 6px;
}
#booking .system .link a:hover {
opacity: 0.8;
}

#booking .system .grid {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
#booking .system .area .name {
margin-top: 1.5em;
font-weight: 500;
}
#booking .system .area .name::before {
content: "■";
}
#booking .system .area .link {
margin-top: 4%;
}
#booking .system .area .address,
#booking .system .area .tel {
font-family: "Lexend", "Noto Sans JP", sans-serif;
font-weight: 500;
}
#booking .system .area .map {
margin-top: 20px;
}
#booking .system .area .map iframe {
width: 100%;
aspect-ratio: 1 / 1;
}
@media screen and (max-width: 800px) {
	#booking .system .link dl {
	display: block;
	padding: 2.5%;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	}
	#booking .system .link .button {
	width: 16em;
	margin: auto;
	margin-top: 0.25em;
	}
	#booking .system .link a:hover {
	opacity: 0.8;
	}

	#booking .system .grid {
	display: block;
	}
	#booking .system .area {
	width: 100%;
	}
	#booking .system .area.maebashi {
	padding: 0;
	}
	#booking .system .area.takasaki {
	margin-top: 12%;
	padding: 0;
	border: 0;
	}
}