@charset "UTF-8";

body.facility {
	#mainv {
		width: 100%;
		height: 300px;
		background: url(../images/facility/mainv.jpg) no-repeat center center/cover;
		padding-top: 120px;
	}
	#facility {
		padding: 0 0 60px;
		.subContents2 {
			.leadtext {
				font-size: 1.125rem;
				font-weight: bold;
				text-align: center;
				margin-bottom: 30px;
			}
			.mainfig {
				margin: 0 0 60px;
			}
			.gaiyo {
				margin-bottom: 60px;
				.box {
					margin-bottom: 40px;
					display: flex;
					justify-content: space-between;
					.address {
						width: 320px;
						.btnbox {
							margin-top: 20px;
							.rbtn {
								width: 100%;
								padding-top: 5px;
								padding-bottom: 5px;
							}
						}
					}
					iframe {
						width: 400px;
						height: 200px;
					}
				}
				.maintext {
				}
			}
			.feature {
				margin-bottom: 60px;
				.box {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					& li {
						width: 340px;
						margin-bottom: 50px;
						h3 {
							font-weight: 700;
							line-height: 1.5;
							margin: 10px 0 10px;
						}
					}
				}
			}
			.btns {
				position: relative;
				display: flex;
				justify-content: center;
				& div {
					margin: 0 10px;
				}
			}
		}
	}
}


@media screen and (max-width:756px) {
	body.facility {
		#mainv {
			width: 100vw;
			height: 32vw;
			background: url(../images/facility/mainv_sp.jpg) no-repeat center top/100% auto;
			padding-top: 10vw;
			& h1 {
				& img {
					width: auto;
					height: 5vw;
				}
			}
		}
		&.step {
			#mainv {
				& h1 {
					& img {
						height: 14vw;
					}
				}
			}
		}
		#facility {
			padding: 0 0 10vw;
			.subContents2 {
				.leadtext {
					margin-bottom: 5vw;
				}
				.mainfig {
					margin: 0 0 10vw;
				}
				.gaiyo {
					margin-bottom: 10vw;
					.box {
						margin-bottom: 25vw;
						display: block;
						.address {
							width: 100%;
							margin-bottom: 5vw;
							position: relative;
							.btnbox {
								width: 100%;
								margin-top: 0;
								position: absolute;
								bottom: calc(-330px - 15vw);
								left: 0;
							}
						}
						iframe {
							width: 100%;
							height: 300px;
						}
					}
					.maintext {
					}
				}
				.feature {
					margin-bottom: 10vw;
					.box {
						display: block;
						& li {
							width: 100%;
							margin-bottom: 10vw;
							h3 {
							}
						}
					}
				}
				.btns {
					text-align: center;
					display:block;
					& div {
						margin: 0 0 5vw;
					}
				}
			}
		}
	}
}