@charset "utf-8";
#page_top {
	background-image: url(../image/about/access/access-page_top@pc.webp);
}

#access {
	width: 100%;
	height: auto;
	padding: 104px 0 0;
}
	.access__inner {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}
		.access__gallery {
			width: 100%;
			height: auto;
			padding: 0 0 54px;
			margin: 0 auto;
			border-bottom: solid 1px var(--color--navy-3);
		}
			.access__gallery__inner {
				width: 90%;
				max-width: 720px;
				height: auto;
				margin: 0 auto;
			}
			.access__gallery__image {
				width: 100%;
				height: auto;
				margin: 0 auto 30px;
			}
			.access__gallery__details {
				width: 100%;
				height: auto;
				margin: 0 auto;
				position: relative;
			}
				.access__gallery__details__heading {
					width: 100%;
					height: auto;
					margin: 0 auto 5px;
					font-size: 25px;
					font-weight: 600;
					line-height: 1.2;
					color: var(--color--navy-3);
				}
				.access__gallery__details__title {
					width: 100%;
					height: auto;
					margin: 0 auto 10px;
					font-size: 36px;
					font-weight: 600;
					line-height: 1.2;
					color: var(--color--navy-3);
				}
				.access__gallery__details__sub_title {
					width: 100%;
					height: auto;
					margin: 0 auto 28px;
					font-size: 19px;
					font-weight: 600;
					line-height: 1.2;
					color: var(--color--navy-3);
				}
				.access__gallery__details__txt {
					width: 100%;
					height: auto;
					font-size: 15px;
					font-weight: 600;
					line-height: 1.6;
					color: var(--color--navy-3);
				}
				.access__gallery__details__cap {
					font-size: 15px;
					font-weight: 500;
					line-height: 1.6;
					color: #666666;
					position: absolute;
					top: 10px;
					right: 0;
				}
		.access__introduction {
			width: 100%;
			height: auto;
			padding: 58px 0 60px;
		}
			.access__introduction__inner {
				width: 90%;
				max-width: 720px;
				height: auto;
				margin: 0 auto;
				position: relative;
			}
				.access__introduction__swiper {
					width: 100%;
					height: auto;
					margin: 0 auto;
				}
					.access__contents {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;
						height: auto;
						margin: 0 auto;
					}
						.access__contents__details {
							width: calc((320 / 720) * 100%);
							height: auto;
						}
							.access__contents__heading {
								width: 100%;
								height: auto;
							}
							.access__introduction .access__contents__heading {
								margin-bottom: 36px;
							}
							.access__reservation .access__contents__heading {
								margin-bottom: 28px;
							}
								.access__contents__heading__sub_ttl {
									font-size: 13px;
									font-weight: 600;
									line-height: 1.1;
									color: #cccccc;
								}
								.access__contents__heading__ttl {
									font-size: 20px;
									font-weight: 600;
									line-height: 1.1;
									color: #cccccc;
								}
							.access__contents__name {
								width: 100%;
								height: auto;
								margin: 0 auto 18px;
								font-size: 24px;
								font-weight: 700;
								line-height: 1;
								color: var(--color--navy-3);
							}
							.access__contents__txt {
								font-size: 15px;
								font-weight: 600;
								line-height: 1.6;
								color: var(--color--navy-3);
							}
						.access__contents__image,
						.access__contents__map {
							width: calc((400 / 720) * 100%);
							height: auto;
						}
						.access__contents__map {
							aspect-ratio: 400 / 292;
						}
							.access__contents__map iframe {
								width: 100%;
								height: 100%;
							}
				.access__introduction_swiper__pagination {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 16px;
					width: 100%;
					height: auto;
					margin: 42px auto 0;
				}
					.access__introduction_swiper__pagination .swiper-pagination-bullet {
						display: block;
						width: 6px;
						height: 6px;
						padding: 0 !important;
						margin: 0 !important;
						border-radius: 9999px;
						background-color: var(--color--white);
						border: solid 1px var(--color--navy-3);
						transition: .8s;
					}
					.access__introduction_swiper__pagination .swiper-pagination-bullet-active {
						background-color: var(--color--navy-3);
					}
				.access__introduction_swiper_nav {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: calc(100% + 164px);
					height: auto;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 10;
					pointer-events: none;
				}
					.access__introduction_swiper_nav__prev,
					.access__introduction_swiper_nav__next {
						width: 35px;
						height: 35px;
						border-radius: 50%;
						pointer-events: auto;
						cursor: pointer;
					}
				@media (any-hover: hover) {
					.access__introduction_swiper_nav__prev,
					.access__introduction_swiper_nav__next {
						transition: .3s;
					}
					.access__introduction_swiper_nav__prev:hover,
					.access__introduction_swiper_nav__next:hover {
						opacity: .6;
					}
				}
		.access__reservation {
			width: 100%;
			height: auto;
			padding: 60px 0 150px;
		}
			.access__reservation__inner {
				width: 90%;
				max-width: 720px;
				height: auto;
				margin: 0 auto;
			}
							.access__contents__tel {
								width: 100%;
								height: auto;
								margin: 18px auto 26px;
								font-size: 24px;
								font-weight: 700;
								line-height: 1;
								letter-spacing: 0em;
								color: var(--color--navy-3);
							}
							.access__contents__btn_wrap {
								width: 198px;
								height: 42px;
							}
								.access__contents__btn {
									display: flex;
									justify-content: center;
									align-items: center;
									width: 100%;
									height: 100%;
									border-radius: 9999px;
									background-color: var(--color--navy-3);
									border: solid 1px var(--color--navy-3);
									font-size: 14px;
									font-weight: 600;
									line-height: 1;
									letter-spacing: 0.1em;
									color: var(--color--white);
								}
							@media (any-hover: hover) {
								.access__contents__btn {
									transition: .3s;
								}
								.access__contents__btn:hover {
									background-color: var(--color--white);
									color: var(--color--navy-3);
								}
							}

/* PC ================================================== */
@media all and (max-width: 899px){
				.access__introduction_swiper_nav {
					width: 100%;
					top: calc(100% - 3px);
				}
}


@media all and (min-width: 769px){

}

/* Tablet ================================================== */
@media all and (max-width: 768px){
#page_top {
	background-image: url(../image/about/access/access-page_top@sp.webp);
}

#access {
	padding: 22px 0 0;
}
	.access__inner {
		width: 100%;
		max-width: initial;
	}
		.access__gallery {
			padding: 0;
			border-bottom: none;
		}
			.access__gallery__inner {
				width: 100%;
				max-width: initial;
			}
			.access__gallery__image {
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
			.access__gallery__details {
				width: calc((310 / 390) * 100%);
				padding: 18px 0 62px;
			}
				.access__gallery__details__cap {
					width: 100%;
					height: auto;
					margin: 0 auto 8px;
					font-size: 14px;
					font-weight: 400;
					line-height: 1.6;
					color: #666666;
					position: initial;
				}
				.access__gallery__details__heading {
					margin: 0 auto;
					font-size: 19px;
					font-weight: 700;
				}
				.access__gallery__details__title {
					margin: 0 auto;
					font-size: 28px;
					font-weight: 700;
				}
				.access__gallery__details__sub_title {
					margin: 0 auto 12px;
					font-size: 19px;
					font-weight: 700;
					line-height: 1;
				}
				.access__gallery__details__txt {
					font-size: 14px;
					font-weight: 700;
					line-height: 1.7;
					letter-spacing: 0;
				}
		.access__introduction {
			padding: 0;
		}
			.access__introduction__inner {
				width: 100%;
				max-width: initial;
			}
					.access__contents {
						flex-direction: column-reverse;
						justify-content: flex-start;
					}
						.access__contents__details {
							width: 100%;
							padding: 46px 0 64px;
						}
							.access__introduction .access__contents__heading {
								margin-bottom: 20px;
							}
							.access__reservation .access__contents__heading {
								margin-bottom: 24px;
							}
								.access__contents__heading__sub_ttl {
									font-size: 14px;
									font-weight: 700;
									text-align: center;
								}
								.access__contents__heading__ttl {
									font-weight: 700;
									text-align: center;
								}
							.access__contents__name {
								margin: 0 auto 10px;
								text-align: center;
							}
							.access__contents__txt {
								font-size: 14px;
								font-weight: 400;
								line-height: 1.7;
								text-align: center;
							}
						.access__contents__image,
						.access__contents__map {
							width: 100%;
						}
				.access__introduction_swiper__pagination {
					margin: 0 auto;
					width: 100%;
					height: auto;
					position: absolute;
					bottom: auto !important;
					top: calc(((220 / 390) * 100vw) + 25px);
					left: 0;
					transform: translate(0, -50%);
					z-index: 10;
					pointer-events: none;
				}
					.access__introduction_swiper__pagination .swiper-pagination-bullet {
						display: block;
						width: 6px;
						height: 6px;
						padding: 0 !important;
						margin: 0 !important;
						border-radius: 9999px;
						background-color: var(--color--white);
						border: solid 1px var(--color--navy-3);
						transition: .8s;
					}
					.access__introduction_swiper__pagination .swiper-pagination-bullet-active {
						background-color: var(--color--navy-3);
					}
				.access__introduction_swiper_nav {
					width: calc((350 / 390) * 100vw);
					top: calc(((220 / 390) * 100vw) + 48px);
					transform: translate(-50%, 0%);
				}
					.access__introduction_swiper_nav__prev,
					.access__introduction_swiper_nav__next {
						width: 35px;
						height: 35px;
						border-radius: 50%;
						pointer-events: auto;
						cursor: pointer;
					}
				@media (any-hover: hover) {
					.access__introduction_swiper_nav__prev,
					.access__introduction_swiper_nav__next {
						transition: .3s;
					}
					.access__introduction_swiper_nav__prev:hover,
					.access__introduction_swiper_nav__next:hover {
						opacity: .6;
					}
				}

		.access__reservation {
			padding: 0;
		}
			.access__reservation__inner {
				width: 100%;
				max-width: initial;
			}
							.access__contents__tel {
								margin: 24px auto 54px;
								font-size: 24px;
								letter-spacing: 0em;
								text-align: center;
							}
							.access__contents__btn_wrap {
								width: 280px;
								height: 50px;
								margin: 0 auto;
							}
								.access__contents__btn {
									font-size: 16px;
									font-weight: 400;
								}
}
/* SP ================================================== */
@media all and (max-width: 575px){

}