/* 2025/06/26 */

.well-07 .drawing-wrapper .title {
	top: 10%;
	left: 14%;
	width: 76.5%;
	height: 41.7%;
}
.well-07 .drawing-wrapper .duck {
	top: 31.4%;
	left: 32.7%;
	width: 48.1%;
	height: 32%;
}

.well-07 .drawing-wrapper:has(.wave:hover) .duck,
.well-07 .drawing-wrapper .duck:hover {
	z-index: 2;
	filter: drop-shadow(0 0 30px #bef8ff);
	animation: wiggle 2s ease infinite;
}

.well-07 .drawing-wrapper .tube {
	top: 50.3%;
	left: 13.3%;
	width: 27.5%;
	height: 15.4%;
}
.well-07 .drawing-wrapper .wave {
	top: 49.4%;
	left: 1.3%;
	width: 97.1%;
	height: 19.5%;
	background: url("/content/images/event/2025/WellnessLetter/07/img_float.png") no-repeat 0% 0% / 100% auto;
	transform-origin: center;
	animation: moveSide 2s ease-in-out infinite;
}

@keyframes moveSide {
	0% {
		transform: translateY(2%);
	}
	50% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(2%);
	}
}

.well-07 .link_wrapper {
	position: absolute;
	top: 15.6%;
	left: 10%;
	width: 80%;
	height: 73.35%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(4, 1fr);
	text-indent: -99999px;
}

/* 2025.07.24 */
.well-08 .section-02 {
	width: 100%;
	height: 0;
	padding-bottom: 166%;
	background: linear-gradient(131deg, #ddfffc 0%, #8cffaf 52%, #71e2fe 100%);
	overflow: hidden;
}

.well-08 .section-02::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200%;
	background: url("/content/images/event/2025/WellnessLetter/08/bg_02.webp") repeat-y bottom center / 100% auto;
	animation: moveToTop 5s cubic-bezier(0.165, 0.84, 0.44, 1) alternate 0s;
}

.well-08 .section-02 .list {
	top: 71.8%;
	left: 7.6%;
	width: 84.9%;
	height: 24.6%;
}

.well-08 .section-02 .title {
	top: 7.5%;
	left: 17.8%;
	width: 66.3%;
	height: 28%;
}

@keyframes moveToTop {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}

.well-08 .section-02 .waterMelon {
	top: 34%;
	left: 7.3%;
	width: 67.4%;
	height: 36%;
}
.well-08 .section-02 .giftBox {
	top: 43%;
	left: 12.8%;
	width: 15%;
	height: 9.3%;
}
.well-08 .section-02 .yellowFace {
	top: 57.5%;
	left: 26.6%;
	width: 15.3%;
	height: 9.7%;
}
.well-08 .section-02 .sliceMelon {
	top: 41.1%;
	left: 47.9%;
	width: 41.4%;
	height: 20.9%;
}

.well-08 .section-02 .drawing-item:hover img,
.well-08 .section-02 .drawing-item:focus img {
	animation: wiggle 1s ease infinite;
	filter: drop-shadow(10px 10px 30px #ddfffc);
}