@charset "UTF-8";

/** .content-title */
.page23 .content-title {
	width: 860px;
	margin-top: 10px;
	margin-bottom: 50px;
	margin-left: 20px;
}

@media screen and (max-height: 768px) {
	.page23 .content-title {
		width: 111.9791vh;
		margin-top: 1.302vh;
		margin-bottom: 6.5104vh;
		margin-left: 2.6041vh;
	}
}

/** .content-main */
.page23 .content-main {
	position: relative;
	width: 860px;
	height: 440px;
	margin: 0 auto;
	background-image: url(/teaching/sagamihara/page23/img/main_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}

@media screen and (max-height: 768px) {
	.page23 .content-main {
		width: 111.9791vh;
		height: 57.2916vh;
	}
}

.page23 .content-main::before {
	position: absolute;
	top: calc(50% - 100px);
	right: calc(50% - 50px);
	width: 28px;
	height: 41px;
	background-image: url(/teaching/sagamihara/page23/img/light.png);
	background-size: cover;
	transform: translate(-50%, -50%);
	animation: pikapika 2s ease 2.9s infinite;
	opacity: 0;
	content: '';
}

@media screen and (max-height: 768px) {
	.page23 .content-main::before {
		top: calc(50% - 13.0208vh);
		right: calc(50% - 6.5104vh);
		width: 3.6458vh;
		height: 5.3385vh;
	}
}

.page23 .content-main .step-img-wrap.step1 {
	position: absolute;
	top: calc(50% - 190px);
	right: calc(50% - 590px);
	width: 404px;
	height: 173px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease .4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step1 {
		top: calc(50% - 24.7395vh);
		right: calc(50% - 76.8229vh);
		width: 52.6041vh;
		height: 22.526vh;
	}
}

.page23 .content-main .step-img-wrap.step2 {
	position: absolute;
	right: calc(50% - 470px);
	bottom: calc(50% - 190px);
	width: 127px;
	height: 214px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease 1.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step2 {
		right: calc(50% - 61.1979vh);
		bottom: calc(50% - 24.7395vh);
		width: 16.5364vh;
		height: 27.8645vh;
	}
}

.page23 .content-main .step-img-wrap.step2-point {
	position: absolute;
	right: calc(50% - 650px);
	bottom: calc(50% - 310px);
	width: 316px;
	height: 128px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease 2.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step2-point {
		right: calc(50% - 84.6354vh);
		bottom: calc(50% - 40.3645vh);
		width: 41.1458vh;
		height: 16.6666vh;
	}
}

.page23 .content-main .step-img-wrap.step3 {
	position: absolute;
	right: calc(50% - 390px);
	bottom: calc(50% - 330px);
	width: 179px;
	height: 234px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease 2.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step3 {
		right: calc(50% - 50.7812vh);
		bottom: calc(50% - 42.9687vh);
		width: 23.3072vh;
		height: 30.4687vh;
	}
}

.page23 .content-main .step-img-wrap.step4 {
	position: absolute;
	right: calc(50% - 200px);
	bottom: calc(50% - 315px);
	width: 200px;
	height: 188px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease 3.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step4 {
		right: calc(50% - 26.0416vh);
		bottom: calc(50% - 41.0156vh);
		width: 26.0416vh;
		height: 24.4791vh;
	}
}

.page23 .content-main .step-img-wrap.step5 {
	position: absolute;
	bottom: calc(50% - 210px);
	left: calc(50% - 230px);
	width: 287px;
	height: 169px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease 4.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step5 {
		bottom: calc(50% - 27.3437vh);
		left: calc(50% - 29.9479vh);
		width: 37.3697vh;
		height: 22.0052vh;
	}
}

.page23 .content-main .step-img-wrap.step5-point {
	position: absolute;
	bottom: calc(50% - 300px);
	left: calc(50% - 310px);
	width: 281px;
	height: 140px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease 4.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step5-point {
		bottom: calc(50% - 39.0625vh);
		left: calc(50% - 40.3645vh);
		width: 36.5885vh;
		height: 18.2291vh;
	}
}

.page23 .content-main .step-img-wrap.step6 {
	position: absolute;
	top: calc(50% - 130px);
	left: calc(50% - 220px);
	width: 397px;
	height: 265px;
	transform: translate(-50%, -50%);
	animation: fadeInEx .3s ease 5.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .step-img-wrap.step6 {
		top: calc(50% - 16.927vh);
		left: calc(50% - 28.6458vh);
		width: 51.6927vh;
		height: 34.5052vh;
	}
}

.page23 .content-main .map-point {
	position: absolute;
	width: 60px;
	height: 60px;
	border-radius: 45px;
	box-shadow: 0 4px #036f86;
	transform: translate(-50%, -50%);
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point {
		width: 7.8125vh;
		height: 7.8125vh;
		border-radius: 5.8593vh;
		box-shadow: 0 .5208vh #036f86;
	}
}

.page23 .content-main .map-point:hover {
	box-shadow: none;
}
.page23 .content-main .map-point.point1 {
	top: calc(50% - 20px);
	right: calc(50% - 350px);
	animation: fadeInEx .3s ease 1.4s forwards;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point1 {
		top: calc(50% - 2.6041vh);
		right: calc(50% - 45.5729vh);
	}
}

.page23 .content-main .map-point.point1:hover {
	top: calc(50% - 16px);
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point1:hover {
		top: calc(50% - 2.0833vh);
	}
}

.page23 .content-main .map-point.point2 {
	right: calc(50% - 370px);
	bottom: calc(50% - 210px);
	animation: fadeInEx .3s ease 2.4s forwards;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point2 {
		right: calc(50% - 48.177vh);
		bottom: calc(50% - 27.3437vh);
	}
}

.page23 .content-main .map-point.point2:hover {
	bottom: calc(50% - 214px);
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point2:hover {
		bottom: calc(50% - 27.8645vh);
	}
}

.page23 .content-main .map-point.point3 {
	bottom: calc(50% - 150px);
	left: calc(50% - 160px);
	animation: fadeInEx .3s ease 4.4s forwards;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point3 {
		bottom: calc(50% - 19.5312vh);
		left: calc(50% - 20.8333vh);
	}
}

.page23 .content-main .map-point.point3:hover {
	bottom: calc(50% - 154px);
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point3:hover {
		bottom: calc(50% - 20.052vh);
	}
}

.page23 .content-main .map-point.point4 {
	bottom: calc(50% - 110px);
	left: calc(50% - 410px);
	animation: fadeInEx .3s ease 4.4s forwards;
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point4 {
		bottom: calc(50% - 14.3229vh);
		left: calc(50% - 53.3854vh);
	}
}

.page23 .content-main .map-point.point4:hover {
	bottom: calc(50% - 114px);
}

@media screen and (max-height: 768px) {
	.page23 .content-main .map-point.point4:hover {
		bottom: calc(50% - 14.8437vh);
	}
}

.page23 .bird-msg-img-wrap {
	position: absolute;
	top: calc(50% - 305px);
	right: calc(50% - 450px);
	width: 127px;
	height: 89px;
	transform: translate(-50%, -50%) rotate(0) scale(0);
	animation: fadeInMsg .3s ease 6.2s forwards, fuwafuwa 2s ease 6.7s infinite;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .bird-msg-img-wrap {
		top: calc(50% - 39.7135vh);
		right: calc(50% - 58.5937vh);
		width: 16.5364vh;
		height: 11.5885vh;
	}
}

.page23 .bird-img-wrap {
	position: absolute;
	top: calc(50% - 245px);
	right: calc(50% - 580px);
	width: 144px;
	height: 135px;
	transform: translate(-50%, 100px) scale(0);
	animation: fadeInBird .3s ease 6s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .bird-img-wrap {
		top: calc(50% - 31.901vh);
		right: calc(50% - 75.5208vh);
		width: 18.75vh;
		height: 17.5781vh;
	}
}

/** dlg */
.page23 .dlg {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 100%;
	background-color: rgba(0 0 0 / 30%);
}
.page23 .dlg.is-show {
	display: block;
}
.page23 .dlg .dlg-inner {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 660px;
	height: 360px;
	padding: 40px 80px 0;
	border: 6px solid #64b3da;
	border-radius: 20px;
	background-color: #fff;
	transform: translate(-50%, -50%);
	animation: fadeIn .3s ease .2s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner {
		width: 85.9375vh;
		height: 46.875vh;
		padding: 5.2083vh 10.4166vh 0;
		border: .7812vh solid #64b3da;
		border-radius: 2.6041vh;
	}
}

.page23 .dlg .dlg-inner.is-show {
	display: block;
}
.page23 .dlg .dlg-inner .dlg-number {
	position: absolute;
	top: calc(50% - 150px);
	left: calc(50% - 310px);
	width: 100px;
	height: 100px;
	transform: translate(-50%, -50%);
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner .dlg-number {
		top: calc(50% - 19.5312vh);
		left: calc(50% - 40.3645vh);
		width: 13.0208vh;
		height: 13.0208vh;
	}
}

.page23 .dlg .dlg-inner .dlg-close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	transition: all .3s;
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner .dlg-close-btn {
		top: 1.302vh;
		right: 1.302vh;
		width: 4.8177vh;
		height: 4.8177vh;
	}
}

.page23 .dlg .dlg-inner .dlg-close-btn:hover {
	opacity: .7;
}
.page23 .dlg .dlg-inner .dlg-close-btn img {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
}
.page23 .dlg .dlg-inner .dlg-text {
	width: 332px;
	font-size: 25px;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
	font-weight: 300;
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner .dlg-text {
		width: 43.2291vh;
		font-size: 3.2552vh;
	}
}

.page23 .dlg .dlg-inner.dlg4 .dlg-text {
	width: 500px;
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner.dlg4 .dlg-text {
		width: 65.1041vh;
	}
}

.page23 .dlg .dlg-inner.dlg1 .dlg-img-wrap {
	position: absolute;
	right: calc(50% - 410px);
	bottom: calc(50% - 180px);
	width: 197px;
	height: 148px;
	transform: translate(-50%, -50%);
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner.dlg1 .dlg-img-wrap {
		right: calc(50% - 53.3854vh);
		bottom: calc(50% - 23.4375vh);
		width: 25.651vh;
		height: 19.2708vh;
	}
}

.page23 .dlg .dlg-inner.dlg2 .dlg-img-wrap {
	position: absolute;
	right: calc(50% - 400px);
	bottom: calc(50% - 180px);
	width: 201px;
	height: 148px;
	transform: translate(-50%, -50%);
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner.dlg2 .dlg-img-wrap {
		right: calc(50% - 52.0833vh);
		bottom: calc(50% - 23.4375vh);
		width: 26.1718vh;
		height: 19.2708vh;
	}
}

.page23 .dlg .dlg-inner.dlg3 .dlg-img-wrap {
	position: absolute;
	right: calc(50% - 430px);
	bottom: calc(50% - 230px);
	width: 251px;
	height: 164px;
	transform: translate(-50%, -50%);
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner.dlg3 .dlg-img-wrap {
		right: calc(50% - 55.9895vh);
		bottom: calc(50% - 29.9479vh);
		width: 32.6822vh;
		height: 21.3541vh;
	}
}

.page23 .dlg .dlg-inner.dlg4 .dlg-img-wrap {
	position: absolute;
	right: calc(50% - 440px);
	bottom: calc(50% - 200px);
	width: 299px;
	height: 124px;
	transform: translate(-50%, -50%);
}

@media screen and (max-height: 768px) {
	.page23 .dlg .dlg-inner.dlg4 .dlg-img-wrap {
		right: calc(50% - 57.2916vh);
		bottom: calc(50% - 26.0416vh);
		width: 38.9322vh;
		height: 16.1458vh;
	}
}