@charset "UTF-8";

/** .content-main */
.page9 .content-main .circle-item-wrap {
	display: flex;
	flex-wrap: wrap;
	width: 548px;
	margin-left: 60px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap {
		width: 71.3541vh;
		margin-left: 7.8125vh;
	}
}

.page9 .content-main .circle-item-wrap .circle-item {
	width: 249px;
	height: 249px;
	margin: 15px 0;
	border-radius: 50%;
	background-image: url(/teaching/sagamihara/page9/img/circle.png);
	background-size: cover;
	transform: translateY(100px) rotateY(180deg);
	animation: slideUpKuruKuru 1s ease forwards;
	opacity: 0;
	text-align: center;
	cursor: pointer;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item {
		width: 32.4218vh;
		height: 32.4218vh;
		margin: 1.9531vh 0;
	}
}

.page9 .content-main .circle-item-wrap .circle-item:nth-child(1) {
	animation-delay: .2s;
}
.page9 .content-main .circle-item-wrap .circle-item:nth-child(2) {
	animation-delay: .4s;
}
.page9 .content-main .circle-item-wrap .circle-item:nth-child(3) {
	animation-delay: .6s;
}
.page9 .content-main .circle-item-wrap .circle-item:nth-child(4) {
	animation-delay: .8s;
}
.page9 .content-main .circle-item-wrap .circle-item:nth-child(even) {
	margin-left: 25px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item:nth-child(even) {
		margin-left: 3.2552vh;
	}
}

.page9 .content-main .circle-item-wrap .circle-item:nth-child(odd) {
	margin-right: 25px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item:nth-child(odd) {
		margin-right: 3.2552vh;
	}
}

.page9 .content-main .circle-item-wrap .circle-item .circle-title {
	width: 100%;
	margin-top: 30px;
	color: #fff;
	font-size: 35px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item .circle-title {
		margin-top: 3.9062vh;
		font-size: 4.5572vh;
	}
}

.page9 .content-main .circle-item-wrap .circle-item .circle-img {
	margin: 0 auto;
}
.page9 .content-main .circle-item-wrap .circle-item.shopping .circle-img {
	width: 125px;
	height: 130px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item.shopping .circle-img {
		width: 16.276vh;
		height: 16.927vh;
	}
}

.page9 .content-main .circle-item-wrap .circle-item.preservation .circle-img {
	width: 62px;
	height: 146px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item.preservation .circle-img {
		width: 8.0729vh;
		height: 19.0104vh;
	}
}

.page9 .content-main .circle-item-wrap .circle-item.cooking .circle-img {
	width: 151px;
	height: 121px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item.cooking .circle-img {
		width: 19.6614vh;
		height: 15.7552vh;
	}
}

.page9 .content-main .circle-item-wrap .circle-item.meal .circle-img {
	width: 174px;
	height: 112px;
}

@media screen and (max-height: 768px) {
	.page9 .content-main .circle-item-wrap .circle-item.meal .circle-img {
		width: 22.6562vh;
		height: 14.5833vh;
	}
}

.page9 .children-msg-img-wrap {
	position: absolute;
	top: calc(50% - 280px);
	right: calc(50% - 530px);
	width: 217px;
	height: 98px;
	transform: translate(-50%, -50%) rotate(0) scale(0);
	animation: fadeInMsg .3s ease 1.2s forwards, fuwafuwa 2s ease 1.5s infinite;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page9 .children-msg-img-wrap {
		top: calc(50% - 36.4583vh);
		right: calc(50% - 69.0104vh);
		width: 28.2552vh;
		height: 12.7604vh;
	}
}

.page9 .children-img-wrap {
	position: absolute;
	top: calc(50% - 130px);
	right: calc(50% - 580px);
	width: 260px;
	height: 197px;
	transform: translate(100px, -50%);
	animation: slideLeftEx .3s ease 1s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page9 .children-img-wrap {
		top: calc(50% - 16.927vh);
		right: calc(50% - 75.5208vh);
		width: 33.8541vh;
		height: 25.651vh;
	}
}

.page9 .bird-msg-img-wrap {
	position: absolute;
	right: calc(50% - 550px);
	bottom: calc(50% - 120px);
	width: 217px;
	height: 98px;
	transform: translate(-50%, -50%) rotate(0) scale(0);
	animation: fadeInMsg .3s ease 1.6s forwards, fuwafuwa 2s ease 1.9s infinite;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page9 .bird-msg-img-wrap {
		right: calc(50% - 71.6145vh);
		bottom: calc(50% - 15.625vh);
		width: 28.2552vh;
		height: 12.7604vh;
	}
}

.page9 .bird-img-wrap {
	position: absolute;
	right: calc(50% - 620px);
	bottom: calc(50% - 420px);
	width: 237px;
	height: 223px;
	transform: translate(-50%, 100px) scale(0);
	animation: fadeInBird .3s ease 1.4s forwards;
	opacity: 0;
}

@media screen and (max-height: 768px) {
	.page9 .bird-img-wrap {
		right: calc(50% - 80.7291vh);
		bottom: calc(50% - 54.6875vh);
		width: 30.8593vh;
		height: 29.0364vh;
	}
}

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

@media screen and (max-height: 768px) {
	.page9 .dlg .dlg-inner {
		width: 85.9375vh;
		height: 48.177vh;
		padding: 2.6041vh 3.9062vh;
		border: .7812vh solid #53b98d;
		border-radius: 2.6041vh;
	}
}

.page9 .dlg .dlg-inner.is-show {
	display: block;
}
.page9 .dlg .dlg-inner .dlg-close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	transition: all .3s;
}

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

.page9 .dlg .dlg-inner .dlg-close-btn:hover {
	opacity: .7;
}
.page9 .dlg .dlg-inner .dlg-close-btn img {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
}
.page9 .dlg .dlg-inner .dlg-title {
	color: #53b98d;
	font-size: 50px;
}

@media screen and (max-height: 768px) {
	.page9 .dlg .dlg-inner .dlg-title {
		font-size: 6.5104vh;
	}
}

.page9 .dlg .dlg-inner .dlg-text-wrap .dlg-text {
	padding-left: 1em;
	text-indent: -1em;
}
.page9 .dlg .dlg-inner .dlg-text-wrap .dlg-text .li-inside {
	color: #53b98d;
}
.page9 .dlg .dlg-inner .dlg-text-wrap .dlg-text .ruby-wrap .ruby-rt {
	left: calc(50% + 1.5em);
}
.page9 .dlg .dlg-inner .dlg-text-wrap .dlg-text .ruby-wrap .ruby-rt.ex {
	left: calc(50% + 2.5em);
}
.page9 .dlg .dlg-inner.shopping .dlg-img-wrap {
	position: absolute;
	top: 100px;
	right: 30px;
	width: 190px;
	height: 194px;
}

@media screen and (max-height: 768px) {
	.page9 .dlg .dlg-inner.shopping .dlg-img-wrap {
		top: 13.0208vh;
		right: 3.9062vh;
		width: 24.7395vh;
		height: 25.2604vh;
	}
}

.page9 .dlg .dlg-inner.preservation .dlg-img-wrap {
	position: absolute;
	top: 40px;
	right: 100px;
	width: 94px;
	height: 224px;
}

@media screen and (max-height: 768px) {
	.page9 .dlg .dlg-inner.preservation .dlg-img-wrap {
		top: 5.2083vh;
		right: 13.0208vh;
		width: 12.2395vh;
		height: 29.1666vh;
	}
}

.page9 .dlg .dlg-inner.cooking .dlg-img-wrap {
	position: absolute;
	top: 100px;
	right: 30px;
	width: 214px;
	height: 172px;
}

@media screen and (max-height: 768px) {
	.page9 .dlg .dlg-inner.cooking .dlg-img-wrap {
		top: 13.0208vh;
		right: 3.9062vh;
		width: 27.8645vh;
		height: 22.3958vh;
	}
}

.page9 .dlg .dlg-inner.meal .dlg-img-wrap {
	position: absolute;
	top: 100px;
	right: 30px;
	width: 276px;
	height: 178px;
}

@media screen and (max-height: 768px) {
	.page9 .dlg .dlg-inner.meal .dlg-img-wrap {
		top: 13.0208vh;
		right: 3.9062vh;
		width: 35.9375vh;
		height: 23.177vh;
	}
}