@charset "utf-8";
.omikuji_wrap {
		max-width: 550px;
		margin: 0 auto;
		padding-bottom: 40px;
}
.omikuji_cont {
		position: relative;
		transition: height 0.4s;
}
.omikuji_cont.isActive {
		height: 630px;
}
.omikuji_cont .resultCard {
		position: absolute;
		top: 0;
		left: 55px;
		width: 440px;
		height: 600px;
		opacity: 0;
		z-index: -1;
		pointer-events: none;
}
.resultCardFigure {
		background: #ffffb9;
		border-radius: 32px 32px 0 0;
		overflow: hidden;
		position: relative;
}
.resultCardFigure img {
		width: 100%;
		height: auto;
		opacity: 0;
}
.resultCardFigure .garland {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100px);
}
.resultCardFigure .bar {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		transform: translate(14.8px, 71.7px);
		z-index: 3
}
.resultCardFigure .over {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
}
.resultCardFigure .kamifubuki {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
}
.resultCardFigure .extraKamifubuki, .resultCardFigure .extraKamifubuki2 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2
}
.resultCard.isActive .resultCardFigure .bar {
		animation: barActive 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		animation-delay: 0.6s;
}
.resultCard.isActive .resultCardFigure .garland {
		animation: garlandActive 0.35s cubic-bezier(.34, 1.56, 0.64, 1) forwards;
		animation-delay: 0.9s;
}
.resultCard.isActive .resultCardFigure .over {
		animation: overActive 0.35s forwards;
		animation-delay: 0.95s;
}
.resultCard.isActive .resultCardFigure .kamifubuki {
		animation: kamifubukiActive 0.9s forwards;
		animation-delay: 0.95s;
}
@keyframes garlandActive {
		0% {
				transform: translateY(-100px);
		}
		100% {
				transform: translateY(0px);
		}
}
@keyframes barActive {
		0% {
				transform: translate(14.8px, 71.7px);
		}
		100% {
				transform: translate(0px, 0px);
		}
}
@keyframes overActive {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}
@keyframes kamifubukiActive {
		0% {
				opacity: 0;
				transform: scale(1.2)
		}
		100% {
				opacity: 1;
				transform: scale(1)
		}
}
.resultCardCaption {
		padding: 40px 10px;
		background: #E60012;
		border-radius: 0 0 32px 32px;
}
.resultCardCaption p {
		color: #fff;
		font-size: 20px;
		font-weight: 500;
		line-height: 1.8;
		text-align: center;
		opacity: 0;
}
.resultCardCaption p span {
		font-size: 130%;
		font-weight: 700;
}
.resultCard.isActive {
		opacity: 1;
		animation: zoomIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
		pointer-events: auto;
		z-index: 5;
}
.omikuji_ataru {
		margin: 0 auto 40px;
		position: relative;
		width: 300px;
		height: 300px;
		background-repeat: no-repeat;
		background-size: 2100px 300px;
		background-image: url("../re_images/omikuji_spriteV2.jpg");
}
.omikuji_ataru.eating {
		animation: ataruEat 2.3s steps(6) forwards;
}
@keyframes ataruEat {
		to {
				background-position: -1800px 0;
		}
}
.resultCard.isActive .resultCardFigure img {
		animation: fadeIn 0.5s forwards;
		animation-delay: 0.6s
}
.resultCard.isActive .resultCardCaption p {
		animation: fadeIn 0.5s forwards;
		animation-delay: 0.9s
}
.resultCard .resultAtaru {
		position: absolute;
		width: 245px;
		bottom: -35px;
		right: 400px;
		transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
		transform: translateX(80px);
		opacity: 0;
		transition-delay: 0.9s
}
.resultCard.isActive .resultAtaru {
		transform: translateX(0);
		opacity: 1;
}
.resultAtaru img {
		width: 100%;
		height: auto;
}
@keyframes fadeIn {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}
@keyframes zoomIn {
		0% {
				transform: scale(1.4);
				opacity: 0;
		}
		100% {
				transform: scale(1);
				opacity: 1;
		}
}
.draw_btn, .reload_btn {
		width: 280px;
		margin: 0 auto;
		font-weight: 600;
		font-size: 22px;
}
.draw_btn a {
		display: flex;
		justify-content: center;
		align-items: center;
		text-decoration: none;
		background: #E60012;
		color: #fff;
		border-radius: 60px;
		height: 78px;
		border: 2px solid #E60012;
		transition: background 0.4s;
		position: relative;
}
.reload_btn a {
		color: #E60012;
		text-decoration: none;
		text-align: center;
		display: flex;
		justify-content: center;
}
.reload_btn a span {
		display: inline-block;
		position: relative;
}
.reload_btn a span::after {
		content: '';
		display: block;
		position: absolute;
		bottom: -8px;
		left: 0;
		width: 100%;
		height: 2px;
		background: #E60012;
		transform-origin: left center;
		transform: scaleX(0);
		transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.draw_btn a::before, .draw_btn a::after {
		content: '';
		display: block;
		position: absolute;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-size: 100%;
}
.draw_btn a::before {
		background-image: url("../re_images/draw_btn_L.png");
		width: 47px;
		height: 85px;
		left: -22px;
		top: 0;
}
.draw_btn a::after {
		background-image: url("../re_images/draw_btn_R.png");
		width: 85px;
		height: 73px;
		top: 0;
		right: -38px;
}
.draw_btn a span, .reload_btn a span {
		display: inline-block;
		transform: translateY(-1px)
}
.reload_area .reload_btn_wrap {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
}
@media (hover: hover) {
		.draw_btn a:hover {
				background: #fff;
				color: #E60012;
		}
		.reload_btn a:hover span::after {
				transform: scaleX(1)
		}
}
.draw_status {
		text-align: center;
		position: relative;
		height: 60px;
}
.draw_status .draw_now {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: none;
		pointer-events: none;
}
.draw_now_txt {
		text-align: center;
		font-size: 24px;
		font-weight: 600;
		color: #E60012;
		line-height: 78px;
}
.reload_area {
		display: none;
		position: relative;
}
@media(max-width: 767px) {
		.omikuji_ataru {
				width: 300px;
				margin: 0 auto 30px;
				position: relative;
		}
		.draw_btn, .reload_btn {
				width: 200px;
				font-size: 16px;
		}
		.draw_btn a {
				height: 56px;
		}
		.draw_btn a::before {
				width: 33px;
				height: 60px;
				left: -23px;
				top: 0;
		}
		.draw_btn a::after {
				width: 60px;
				height: 52px;
				top: 3px;
				right: -31px;
		}
		.omikuji_cont.isActive {
				height: 430px;
		}
		.omikuji_cont .resultCard {
				left: calc(calc(100% - 280px) / 2);
				width: 280px;
				height: 350px;
		}
		.resultCardFigure {
				border-radius: 32px 32px 0 0;
				overflow: hidden
		}
		.resultCardFigure img {
				width: 100%;
				height: auto;
				opacity: 0;
		}
		.resultCardCaption {
				padding: 15px 0 30px;
				border-radius: 0 0 18px 18px;
		}
		.resultCardCaption p {
				font-size: 14px;
		}
		.resultCardCaption p span {
				font-size: 120%;
		}
		.resultCard .resultAtaru {
				width: 145px;
				bottom: -74px;
				right: -30px;
		}
}
/* =========== */
.extraKamifubuki, .extraKamifubuki2 {
		width: 100%;
		height: 100%
}
#confetti-canvas {
		transform: translate(-50%, -50%) scale(0.8);
		pointer-events: none;
}
@media(max-width: 767px) {
		#confetti-canvas {
				transform: translate(-50px, -25%) scale(0.8);
		}
}