/* ベース */
body {
    margin: 0;
	font-family: sans-serif;
}
body.noscroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
}
main {
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.visually-hidden {
	position: absolute;
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
}
h2 {
	margin-top: 36px;
	margin-bottom: 16px;
	font-size: x-large;
	font-weight: normal;
	letter-spacing: 0.2rem;
}
@media screen and (max-width: 639px) {
	h2 {
		margin-top: 24px;
		font-size: large;
	}
	
}
@media screen and (max-width: 639px) {
	.number-container > .number-img {
		width: 20vw;
	}
}
/* タイトル部分 */
.title {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
	text-align: center;
}
@media screen and (max-width: 1100px) {
	.title {
		top: 10%;
	}	
	
}
@media screen and (max-width: 639px) {
	.title {
		top: 5%;
		margin-top: 0;
	}	
}

.logo-img {
	border-radius: 12px;
	width: 600px;
	height: auto;
}
@media screen and (max-width: 1100px) {
	.logo-img {
		width: 55vw;
	}
}
@media screen and (max-width: 639px) {
	.logo-img {
		width: 90vw;
	}
}

@media screen and (max-width: 1000px) {
	.number-container > .number-img {
		width: 10vw;
	}
}
/* マップ部分 */
.map-bg {
	width: 100%;
}
@media screen and (min-width: 1000px) {
	.map-bg {
		background-image: url(../image/map-bg.jpg);
		background-size: auto 1984px;
		background-position: top center;
		background-repeat: repeat-x;
	}
	
}

.map-container {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 1100px;
}
.map-image {
	display: block;
	width: 100%;
	height: auto;
}
.pin {
	position: absolute;
	transform: translate(-50%, -100%);
	border-radius: 50%;
	box-shadow: 0 0 4px rgba(0,0,0,0.4);
	cursor: pointer;
	width: 6%;
	height: auto;
	object-fit: cover;
}
@media screen and (max-width: 639px) {
	.pin {
		width: 8%;
	}
	
}
.pin:hover {
	filter: brightness(0.9);
}
#kamaiizukaPin {
	top: 57%;
	left: 34%;
}
@media screen and (max-width: 639px) {
	#kamaiizukaPin {
		top: 53%;
		left: 27%;
	}	
}
#akizukiPin {
	top: 60%;
	left: 38%;
}
@media screen and (max-width: 639px) {
	#akizukiPin {
		top: 56%;
		left: 30%;
	}	
}
#soedaPin {
	top: 53%;
	left: 59%;
}
@media screen and (max-width: 639px) {
	#soedaPin {
		top: 49.7%;
		left: 58%;
	}	
}
#hitaPin {
	top: 71%;
	left: 71%;
}
@media screen and (max-width: 639px) {
	#hitaPin {
		top: 69%;
		left: 74%;
	}	
}
#p1Pin {
	top: 68%;
	left: 74%;
}
@media screen and (max-width: 639px) {
	#p1Pin {
		top: 67%;
		left: 79%;
	}	
}
#p2Pin {
	top: 65%;
	left: 75%;
}
@media screen and (max-width: 639px) {
	#p2Pin {
		top: 62%;
		left: 79%;
	}	
}
.arrow {
	position: absolute;
	width: 3%;
	height: auto;
	object-fit: cover;
}
#kamaiizukaArrow {
	top: 55.2%;
	left: 29%;
	transform: rotate(-112deg);
}	
@media screen and (max-width: 639px) {
	#kamaiizukaArrow {
		top: 52.2%;
		left: 21.5%;
		transform: rotate(-124deg);
	}	
}
#akizukiArrow {
	top: 58.5%;
	left: 33%;
	transform: rotate(-115deg);
}
@media screen and (max-width: 639px) {
	#akizukiArrow {
		top: 55%;
		left: 24.2%;
	}	
}
#soedaArrow {
	top: 51%;
	left: 61%;
	transform: rotate(106deg);
}
@media screen and (max-width: 639px) {
	#soedaArrow {
		top: 48.7%;
		left: 61.1%;
	}	
}
#hitaArrow {
	top: 70.5%;
	left: 71.8%;
	transform: rotate(140deg);
}	
@media screen and (max-width: 639px) {
	#hitaArrow {
		top: 68.7%;
		left: 75.3%;
	}	
}
#p1Arrow {
	top: 64.3%;
	left: 70.3%;
	transform: rotate(-43deg);
}		
@media screen and (max-width: 639px) {
	#p1Arrow {
		top: 64.1%;
		left: 75.5%;
		transform: rotate(-26deg);
	}	
}
#p2Arrow {
	top: 60.8%;
	left: 74%;
	transform: rotate(12deg);
}
@media screen and (max-width: 639px) {
	#p2Arrow {
		top: 59%;
		left: 78.4%;
		transform: rotate(15deg);
	}	
}
/* ポップアップ部分 */
.popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	border: 2px solid #ccc;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	background-color: white;
	padding: 24px;
	width: 90%;
	overflow: auto;
}
@media screen and (max-width: 639px) {
	.popup {
		padding: 24px 12px;
	}
	
}
.popup-content {
	margin-bottom: 8px;
	max-height: 80vh;
	overflow: auto;
}
.popup img {
	display: block;
	transition: transform 0.3s ease;
	margin: 0 auto;
	max-width: 100%;
	max-height: 80vh;
	border-radius: 12px;
}
.popup img.enlarged {
	max-width: none;
	max-height: none;
	width: 3960px;
	cursor: zoom-out;
}
.popup-label {
	position: absolute;
	top: 48px;
	right: 0;
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
	padding: 4px 24px;
	font-size: xx-large;
	letter-spacing: 0.1rem;
	pointer-events: none;
}
@media screen and (max-width: 639px) {
	.popup-label {
		top: 36px;
		margin-right: 12px;
		font-size: large;
	}
	
}
#popupCaption {
	margin: 24px 0;
	padding: 0;
	font-size: x-large;
	letter-spacing: 0.2rem;
}
@media screen and (max-width: 639px) {
	#popupCaption {
		margin: 8px 0 4px;
	}
	
}
.description {
	color: #fff;
	font-size: small;
	letter-spacing: 0.2rem;
}
.popup button {
	display: block;
	margin: 10px auto 0;
	cursor: pointer;
	padding: 6px 12px;
	font-size: 14px;
}
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	background: rgba(0, 0, 0, 0.4);
	width: 100%;
	height: 100%;
}
/* 写真ギャラリー部分 */
.gallery-wrapper {
	padding-top: 40px;
	padding-bottom: 140px;
    background-image: url(../image/section_bg.jpg);
    border-radius: 12px 12px 0 0;
}
@media screen and (max-width: 639px) {
	.gallery-wrapper {
		padding-top: 16px;
		padding-bottom: 64px;
	}	
}
.gallery-label {
	position: absolute;
	top: 16px;
	right: 0;
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
	padding: 4px 24px;
	font-size: large;
	letter-spacing: 0.1rem;
	pointer-events: none;
}
@media screen and (min-width: 640px) and (max-width: 1000px) {
	.gallery-label {
		top: 8px;
		margin-right: 0px;
		font-size: medium;
		padding: 0 4px;
	}
	
}
.traffic-container {
    width: 1000px;
    margin: 0 auto;
    border-radius: 12px 12px 0 0;
    background-color: #fff;
}
@media screen and (max-width: 1000px) {
	.traffic-container {
		width: 95%;
	}
	
}
.traffic-decoration {
	position: relative;
	height: 0;
}
#leftTree {
	position: absolute;
	bottom: 0;
	left: 73%;
	transform: translateX(-50%);
	width: 8vw;
	height: auto;
	z-index: 9;
	pointer-events: none;
}
@media screen and (min-width: 1000px) {
	#leftTree {
		width: 80px;
	}
	
}
#rightTree {
	position: absolute;
	bottom: 0;
	left: 79%;
	transform: translateX(-50%);
	width: 9vw;
	height: auto;
	z-index: 9;
	pointer-events: none;
}
@media screen and (min-width: 1000px) {
	#rightTree {
		width: 90px;
	}
	
}
.traffic-title-wrapper {
    border-radius: 12px 12px 0 0;
    background-image: url(../image/traffic-title-bg.jpg);
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;

    width: 100%;
    aspect-ratio: 1001/192;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
}
@media screen and (max-width: 639px) {
	.traffic-title-wrapper {
		background-image: url(../image/traffic-title-bg-sp.jpg);
		aspect-ratio: 710/190;
	}
	
}
.traffic-title {
	color: #fff;
}
.parking-container {
    width: 1000px;
    margin: 0 auto;
    background-color: #fff;
}
@media screen and (max-width: 1000px) {
	.parking-container {
		width: 95%;
	}
	
}
.parking-decoration {
	position: relative;
	height: 0;
}
#Mori {
	position: absolute;
	bottom: 0;
	left: 75%;
	transform: translateX(-50%);
	width: 30vw;
	height: auto;
	z-index: 9;
	pointer-events: none;
}
@media screen and (min-width: 1000px) {
	#Mori {
		width: 300px;
	}
	
}
.parking-title-wrapper {
    border-radius: 12px 12px 0 0;
	background-image: url(../image/parking-title-bg.jpg);
	background-size: 100% auto;
	background-position: top center;
	background-repeat: no-repeat;

	width: 100%;
    aspect-ratio: 1001/192;
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	text-align: center;
}
@media screen and (max-width: 639px) {
	.parking-title-wrapper {
		background-image: url(../image/parking-title-bg-sp.jpg);
		aspect-ratio: 710/190;
	}
}
.parking-title {
	color: #fff;
}
.note {
    margin-top: 4px;
	margin-bottom: 24px;
    color: #fff;
	font-size: small;
	letter-spacing: 0.1rem;
}
@media screen and (max-width: 639px) {
	.note {
		font-size: x-small;
	}
	
}
.image-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 100px;
	margin-right: 64px;
	margin-left: 64px;
    padding-bottom: 160px;
	gap: 96px;
}
@media screen and (max-width: 639px) {
    .image-gallery {
		margin-top: 32px;
		margin-right: 32px;
		margin-left: 32px;
		padding-bottom: 80px;
        grid-template-columns: repeat(1, 1fr);
        gap: 64px;
    }
}
.image-wrapper {
	position: relative;
}
.image-item {
	border-radius: 12px;
	overflow: hidden;
}
.number-container {
	position: absolute;
	top: -30px;
	left: -20px;
	z-index: 2;
}
@media screen and (max-width: 639px) {
	.number-container {
		top: -18px;
	}
	
}
.number-container>.number-img {
	width: 64px;
	height: auto;
}
@media screen and (max-width: 639px) {
	.number-container>.number-img {
		width: 20vw;
	}
	
}
.image-item img {
	display: block;
	cursor: pointer;
	width: 100%;
	height: auto;
}
.image-item img:hover {
	filter: brightness(0.9);
}
.caption {
	margin: 0;
	padding: 12px 8px;
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.1rem;
}
#point-gallery .caption{
    background-color: #516e13;
}
#parking-gallery .caption{
    background-color: #f2783b;
}
/* フッター部分 */
footer {
	background-image: url(../image/footer-bg.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 960/300;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	color: #333;
	font-size: 24px;
	letter-spacing: 0.2rem;
}
@media screen and (max-width: 639px) {
	footer {
		background-image: url(../image/footer-bg-sp.jpg);
		aspect-ratio: 750/408;
		font-size: 18px;
	}
	
}
.footer-container {
	margin: 0 auto;
	max-width: 800px;
}