/* -----------------------------------------------

point-02

----------------------------------------------- */
.lp_wrap .point-02 {
	background: url(../images/point_02_bg.png) no-repeat top center / 100% auto, #f1ebdd;
}

.lp_wrap .point-02 .grid-box {
	display: grid;
}
.lp_wrap .point-02 .grid-box .grid {
	grid-area: 1 / 1;
}

/* --- check --- */
.lp_wrap .point-02 .check .blink.trigger {
	opacity: 0;
}

.lp_wrap .point-02 .check .blink.trigger.move {
	animation: checkBlink 2s ease-in-out forwards;
}

.lp_wrap .point-02 .check .underLine::after {
	background: url(../images/point_02_check_ttl_line.png) no-repeat center bottom / 100% auto;
	width: 100%;
	height: min(calc(19/750 * 100vw), 19px);
	left: 0;
}

.lp_wrap .point-02 .check .balloon {
	animation: fuwafuwa 2s ease-in-out infinite;
}

/* --- birth --- */
.lp_wrap .point-02 .birth .txt-box {
	position: relative;
}

.lp_wrap .point-02 .birth .txt-box.trigger::before {
	content: '';
	width: 100%;
	height: 100%;
	background: url(../images/point_02_birth_01_mask.png) no-repeat center top / 100% auto;
	position: absolute;
	top: 0;
	left: 0;
	clip-path: inset(0);
	transition: all 1s 0s ease-in-out;
}

.lp_wrap .point-02 .birth .txt-box.trigger.move::before {
	clip-path: inset(0 0 0 100%);
}

/* --- review --- */
.lp_wrap .point-02 .review {
	background: url(../images/point_02_review_bg.png) no-repeat center top / 100% auto, #f1ebdd;
}

.lp_wrap .point-02 .ttl {
	position: relative;
	margin-bottom: max(calc(-89/750 * 100vw), -89px);
}
.lp_wrap .point-02 .ttl.trigger.move::before {
	content: '';
	width: min(calc(392/750 * 100vw), 392px);
	height: min(calc(62/750 * 100vw), 62px);
	border-radius: min(calc(5/750 * 100vw), 5px);
	position: absolute;
	left: min(calc(179/750 * 100vw), 179px);
	top: min(calc(85/750 * 100vw), 85px);
	border: min(calc(1/750 * 100vw), 1px) solid #fff;
	clip-path: inset(min(calc(5/750 * 100vw), 5px));
}
.lp_wrap .point-02 .ttl.trigger.move::before {
	animation: square_line 1.3s ease-in-out forwards;
}

@keyframes square_line {
	0% {
		clip-path: inset(min(calc(5/750 * 100vw), 5px));
	}
	25% {
		clip-path: inset(0 min(calc(5/750 * 100vw), 5px) min(calc(5/750 * 100vw), 5px) min(calc(5/750 * 100vw), 5px));
	}
	50% {
		clip-path: inset(0 0 min(calc(5/750 * 100vw), 5px) min(calc(5/750 * 100vw), 5px));
	}
	75% {
		clip-path: inset(0 0 0 min(calc(5/750 * 100vw), 5px));
	}
	100% {
		clip-path: inset(0);
	}
}

.lp_wrap .point-02 .stars {
	display: grid;
}
.lp_wrap .point-02 .stars > p,
.lp_wrap .point-02 .star-container {
	grid-area: 1 / 1;
}
.lp_wrap .point-02 .star-container {
	width: 93.06%;
	max-width: 698px;
	margin: min(calc(127/750 * 100vw), 127px) auto 0;
	display: flex;
	gap: min(calc(10/750 * 100vw), 10px);
}

.lp_wrap .point-02 .star {
	width: min(calc(132/750 * 100vw), 132px);
	height: min(calc(126/750 * 100vw), 126px);
	opacity: 0;
	/* 初期状態では非表示 */
	transform: rotate(-144deg);
}
.lp_wrap .point-02 .stars.trigger.move .star {
	animation: rotate-show 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	animation-delay: var(--delay);
}

@keyframes rotate-show {
	0% {
		opacity: 0;
		transform: rotate(-144deg);
	}
	20% {
		opacity: 1;
	}
	50% {
		opacity: 1;
		transform: rotate(0deg);
	}
	100% {
		opacity: 1;
		transform: rotate(0deg);
	}
}

.lp_wrap .point-02 .review .grid-box .grid-01 {
	z-index: 2;
	transition-delay: 0s;
}

/* --- barista --- */
.lp_wrap .point-02 .barista {
	background: url(../images/point_02_barista_bg.png) no-repeat center top / 100%;
}
.lp_wrap .point-02 .barista .image {
	margin-top: -4.3%;
}
.lp_wrap .point-02 .barista .grid-box .grid-01 {
	z-index: 2;
}
.lp_wrap .point-02 .barista .grid-box .grid-02 {
	transition-delay: 0s;
}
.lp_wrap .point-02 .barista .grid-box .grid-04 {
	transition-delay: 0.5s;
}
.lp_wrap .point-02 .barista .grid-box .grid-05 {
	transition-delay: 0.75s;
}
.lp_wrap .point-02 .barista .grid-box .grid-06 {
	transition-delay: 1.25s;
}