@charset "UTF-8";

/* L1 ######################################## Google Fonts / Local Fonts ######################################## */
@font-face {
	font-display: swap;
	font-family: 'DotGothic16';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/dotgothic16-v21-japanese_latin-regular.woff2') format('woff2');
}

/* L1 ######################################## ベースレイアウト ######################################## */
.omikuji-trigger-area {
	position: relative;
	margin: 20px auto;
	padding: 80px 0;
	text-align: center;
	z-index: 1;
}

.omikuji-trigger-area::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	
	background-image: url('../images/back_omikuji.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	
	-webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
	mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
	
	opacity: 0.3;
}

#btn-draw-omikuji {
	cursor: pointer;
	display: inline-block;
	max-width: 70%;
	max-height: 500px;
	width: auto;
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
	filter: drop-shadow(0 0 40px rgba(0, 0, 0, 1));
	transition: transform 0.1s;
	-webkit-tap-highlight-color: transparent;
}

#btn-draw-omikuji:hover {
	animation: omikuji-shake 0.4s infinite ease-in-out;
}

@keyframes omikuji-shake {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(3deg); }
	75% { transform: rotate(-3deg); }
	100% { transform: rotate(0deg); }
}

/* L2 **************************************** オーバーレイ / シーン管理 **************************************** */
#omikuji-overlay {
	overflow: hidden;
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 65536;
	width: 100%;
	height: 100%;
	font-family: 'DotGothic16', sans-serif;
}

.overlay-bg {
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.88);
}

#scene-container {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 100%;
	transition: opacity 0.5s ease;
}

#scene-container.fade-out {
	opacity: 0;
	pointer-events: none;
}

/* L2 **************************************** 背景演出 (空・後光・雲) **************************************** */
.new-year-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s ease;
}

.new-year-bg.is-visible {
	opacity: 1;
}

.sky-gradient {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #b3281e 0%, #e86b00 40%, #ffd700 75%, #fffbe0 100%);
}

.god-rays {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200vmax;
	height: 200vmax;
	opacity: 0;
	mix-blend-mode: screen;
	pointer-events: none;
	transform: translate(-50%, -50%);
	transition: opacity 1.0s ease;
}

.god-rays.is-visible {
	opacity: 1;
}

.god-rays::before,
.god-rays::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.god-rays::before {
	opacity: 0.4;
	background: conic-gradient(
		from 0deg,
		rgba(255, 255, 255, 0.8) 0deg 25deg,
		transparent 25deg 51deg,
		rgba(200, 200, 200, 0.6) 51deg 76deg,
		transparent 76deg 102deg,
		rgba(240, 240, 240, 0.7) 102deg 127deg,
		transparent 127deg 154deg,
		rgba(180, 180, 180, 0.5) 154deg 179deg,
		transparent 179deg 205deg,
		rgba(255, 255, 255, 0.8) 205deg 230deg,
		transparent 230deg 257deg,
		rgba(220, 220, 220, 0.6) 257deg 282deg,
		transparent 282deg 308deg,
		rgba(150, 150, 150, 0.5) 308deg 333deg,
		transparent 333deg 360deg
	);
	animation: rotate-cw 20s linear infinite;
}

.god-rays::after {
	opacity: 0.3;
	background: conic-gradient(
		from 30deg,
		rgba(255, 255, 255, 0.5) 0deg 20deg,
		transparent 20deg 51deg,
		rgba(180, 180, 180, 0.4) 51deg 71deg,
		transparent 71deg 102deg,
		rgba(230, 230, 230, 0.5) 102deg 122deg,
		transparent 122deg 154deg,
		rgba(160, 160, 160, 0.4) 154deg 174deg,
		transparent 174deg 205deg,
		rgba(255, 255, 255, 0.5) 205deg 225deg,
		transparent 225deg 257deg,
		rgba(200, 200, 200, 0.4) 257deg 277deg,
		transparent 277deg 308deg,
		rgba(140, 140, 140, 0.3) 308deg 328deg,
		transparent 328deg 360deg
	);
	animation: rotate-ccw 25s linear infinite;
}

.clouds-back {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 55vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cpath fill='%23E8E8E8' d='M0,600 V350 C50,330 100,280 180,300 C240,240 360,240 420,300 C480,260 580,260 640,300 C720,220 860,220 940,300 C1000,270 1100,270 1150,320 C1170,330 1190,340 1200,350 V600 H0 Z'/%3E%3C/svg%3E");
	background-size: 120vh 60vh;
	background-repeat: repeat-x;
	background-position: 0 bottom;
	opacity: 1;
	animation: cloud-scroll 60s linear infinite;
}

@keyframes cloud-scroll-front-1 { 0% { background-position-x: 0; } 100% { background-position-x: -140vh; } }
@keyframes cloud-scroll-front-2 { 0% { background-position-x: 0; } 100% { background-position-x: -160vh; } }
@keyframes cloud-scroll-front-3 { 0% { background-position-x: 0; } 100% { background-position-x: -168vh; } }
@keyframes cloud-scroll-front-4 { 0% { background-position-x: 0; } 100% { background-position-x: -180vh; } }
@keyframes cloud-scroll-mobile-normal { 0% { background-position-x: 0; } 100% { background-position-x: -160vw; } }


.clouds-1 {
	position: absolute;
	bottom: 28vh;
	left: 0;
	z-index: 20;
	width: 100%;
	height: 35vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cpath fill='%23E8E8E8' d='M0,600 V400 C80,380 150,250 300,300 C400,150 600,150 700,300 C800,220 950,220 1050,300 C1120,280 1180,350 1200,400 V600 H0 Z'/%3E%3C/svg%3E");
	background-size: 70vh 35vh;
	background-repeat: repeat-x;
	background-position: 0 bottom;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.5s ease;
	animation: cloud-scroll-front-1 60s linear infinite;
}

.clouds-1::after {
	content: "";
	position: absolute;
	top: 99%;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #E8E8E8;
}

@media screen and (max-aspect-ratio: 1/1) {
	.clouds-1 {
		top: 50%;
		bottom: auto;
		height: 120vh;
		margin-top: -18vw;
		background-size: 80vw 40vw;
		background-position-y: top;
		animation-name: cloud-scroll-mobile-normal;
		animation-duration: 80s;
	}
	
	.clouds-1::after {
		top: calc(40vw - 1px);
		height: 100vh;
	}
}

.clouds-2 {
	position: absolute;
	bottom: 18vh;
	left: 0;
	z-index: 40;
	width: 100%;
	height: 40vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cpath fill='%23F0F0F0' d='M0,600 V400 C 50,380 100,280 200,320 C 280,220 420,220 500,350 C 580,250 680,250 750,350 C 820,220 950,220 1050,350 C 1100,320 1150,380 1200,400 V600 H0 Z'/%3E%3C/svg%3E");
	background-size: 80vh 40vh;
	background-repeat: repeat-x;
	background-position: 0 bottom;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.5s ease;
	animation: cloud-scroll-front-2 40s linear infinite -15s;
}

.clouds-2::after {
	content: "";
	position: absolute;
	top: 99%;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #F0F0F0;
}

@media screen and (max-aspect-ratio: 1/1) {
	.clouds-2 {
		top: 50%;
		bottom: auto;
		height: 120vh;
		margin-top: -12vw;
		background-size: 80vw 40vw;
		background-position-y: top;
		animation-name: cloud-scroll-mobile-normal;
		animation-duration: 50s;
	}
	
	.clouds-2::after {
		top: calc(40vw - 1px);
		height: 100vh;
	}
}


.clouds-3 {
	position: absolute;
	bottom: 6vh;
	left: 0;
	z-index: 45;
	width: 100%;
	height: 42vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cpath fill='%23F8F8F8' d='M0,600 V400 C 50,380 100,280 200,320 C 280,220 420,220 500,350 C 580,250 680,250 750,350 C 820,220 950,220 1050,350 C 1100,320 1150,380 1200,400 V600 H0 Z'/%3E%3C/svg%3E");
	background-size: 84vh 42vh;
	background-repeat: repeat-x;
	background-position: 0 bottom;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.5s ease;
	animation: cloud-scroll-front-3 25s linear infinite;
}

.clouds-3::after {
	content: "";
	position: absolute;
	top: 99%;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #F8F8F8;
}

@media screen and (max-aspect-ratio: 1/1) {
	.clouds-3 {
		top: 50%;
		bottom: auto;
		height: 120vh;
		margin-top: 0vw;
		background-size: 80vw 40vw;
		background-position-y: top;
		animation-name: cloud-scroll-mobile-normal;
		animation-duration: 30s;
	}
	
	.clouds-3::after {
		top: calc(40vw - 1px);
		height: 100vh;
	}
}


.clouds-4 {
	position: absolute;
	bottom: -10vh;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 45vh;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cpath fill='%23FFFFFF' d='M0,600 V400 C80,380 150,250 300,300 C400,150 600,150 700,300 C800,220 950,220 1050,300 C1120,280 1180,350 1200,400 V600 H0 Z'/%3E%3C/svg%3E");
	background-size: 90vh 45vh;
	background-repeat: repeat-x;
	background-position: 0 bottom;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.5s ease;
	animation: cloud-scroll-front-4 15s linear infinite -25s;
}

.clouds-4::after {
	content: "";
	position: absolute;
	top: 99%;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #FFFFFF;
}

@media screen and (max-aspect-ratio: 1/1) {
	.clouds-4 {
		top: 50%;
		bottom: auto;
		height: 120vh;
		margin-top: 14vw;
		background-size: 80vw 40vw;
		background-position-y: top;
		animation-name: cloud-scroll-mobile-normal;
		animation-duration: 15s;
	}
	
	.clouds-4::after {
		top: calc(40vw - 1px);
		height: 100vh;
	}
}

/* 表示状態管理 */
.clouds-1.is-visible,
.clouds-2.is-visible,
.clouds-3.is-visible,
.clouds-4.is-visible {
	opacity: 1;
}

/* L3 ======================================== キャラクター ======================================== */
.kobushimaru-wrapper {
	overflow: visible;
	position: absolute;
	bottom: 35%;
	left: 50%;
	z-index: 30;
	width: 165vw;
	max-width: 200vh;
	height: 100vh;
	pointer-events: none;
	transform: translateX(-50%);
}

@media screen and (max-aspect-ratio: 1/1) {
	.kobushimaru-wrapper {
		top: 50%;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 165vw;
		max-width: none;
		height: auto;
		margin-top: 12vw; 
	}
}

.kobushimaru-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transform: translateY(105%);
	transition: transform 2.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
	--shake-amp: 1px;
}

.kobushimaru-container.is-active {
	opacity: 1;
	transform: translateY(53%);
}

.kobushimaru-container.is-talking {
	animation: talk-vibration 0.05s infinite alternate;
}

@keyframes talk-vibration {
	0% { margin-left: calc(var(--shake-amp) * -1); }
	100% { margin-left: var(--shake-amp); }
}

#kobushimaru-img {
	display: block;
	width: 100%;
	height: auto;
}

#hige-img {
	position: absolute;
	top: 35%;
	left: 50%;
	width: 20%;
	height: auto;
	transform: translateX(-50%);
	transform-origin: top right;
	animation: hige-cycle 6.0s infinite ease-in-out;
}

@keyframes hige-cycle {
	0%, 65% { transform: translateX(-50%) rotate(0deg); }
	70% { transform: translateX(-50%) rotate(-15deg); }
	85% { transform: translateX(-50%) rotate(-15deg); }
	90% { transform: translateX(-50%) rotate(0deg); }
	95% { transform: translateX(-50%) rotate(-5deg); }
	100% { transform: translateX(-50%) rotate(0deg); }
}

/* L3 ======================================== セリフ / UI ======================================== */
.dialogue-box {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: absolute;
	bottom: 5%;
	left: 5%;
	z-index: 100;
	width: 90%;
	height: 30%;
	min-height: 160px;
	padding: 0;
	box-sizing: border-box;
	color: #fff;
	font-family: 'DotGothic16', sans-serif;
	font-size: clamp(2.0rem, 5vw, 4.0rem);
	letter-spacing: 0.05em;
	line-height: 1.6;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	border: 4px solid #fff;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.65);
	background-image: 
		linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 3px 3px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
	transition: opacity 0.6s ease;
	-webkit-user-select: none;
	user-select: none;
}

@media screen and (max-aspect-ratio: 1/1) {
	.dialogue-box {
		top: 50%;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%); 
		margin-top: 12vw; 
	}
}

@media screen and (min-aspect-ratio: 1/1) {
	.dialogue-box {
		min-height: 80px;
		font-size: clamp(2.0rem, 5vh, 4.0rem);
	}

	#dialogue-text {
		padding-top: 4vh;
		padding-bottom: 4vh;
	}
}

.name-box {
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	position: absolute;
	top: auto;
	bottom: 100%;
	left: 0;
	z-index: 105;
	height: 1.8em;
	margin-bottom: 0.6em;
	padding: 0 1em;
	color: #fff;
	font-family: 'DotGothic16', sans-serif;
	font-size: 0.75em;
	font-weight: bold;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	border: 4px solid #fff;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.65);
	background-image: 
		linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 3px 3px;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0.6s ease;
}

.name-box.is-visible {
	visibility: visible;
	opacity: 1;
}

#dialogue-text {
	overflow-y: auto;
	width: 100%;
	height: auto;
	max-height: 100%;
	margin: 0;
	padding: 34px 24px;
	box-sizing: border-box;
	white-space: pre-wrap;
	word-wrap: break-word;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, black 1.5em);
	mask-image: linear-gradient(to bottom, transparent 0, black 1.5em);
}

#dialogue-text::-webkit-scrollbar {
	display: none;
}

.next-indicator {
	display: none;
	position: absolute;
	bottom: 15px;
	right: 20px;
	z-index: 50;
	color: #cc0000;
	font-size: 3.0rem;
	line-height: 1.0;
	filter: drop-shadow(0 2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff);
	animation: bounce 1s infinite ease-in-out;
}

.next-indicator.is-visible {
	display: block;
}

@keyframes bounce {
	0%, 100% { opacity: 1; transform: translateY(0); }
	50% { opacity: 0.8; transform: translateY(5px); }
}

.close-message {
	position: absolute;
	bottom: 5vh;
	z-index: 100;
	width: 100%;
	color: #fff;
	font-family: 'DotGothic16', sans-serif;
	font-size: 1.4rem;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.0s ease-in-out;
}

.close-message.is-visible {
	opacity: 1;
	animation: blink 3s infinite 1.0s;
}

@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.omikuji-close-btn {
	cursor: pointer;
	position: absolute;
	top: 15px;
	right: 20px;
	z-index: 70000;
	color: #fff;
	font-size: 40px;
	line-height: 1;
	opacity: 0.8;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
	transform: scale(1.0);
	transition: transform 0.2s, opacity 0.2s;
}

.omikuji-close-btn:hover {
	opacity: 1;
	transform: scale(1.1);
}

@media screen and (max-aspect-ratio: 1/1) {
	.omikuji-close-btn {
		top: 10px; 
		right: 15px;
		font-size: 32px;
	}
}

/* L4 ---------------------------------------- おみくじカード ---------------------------------------- */
.card-container {
	position: absolute;
	top: -150%;
	left: 50%;
	z-index: 60;
	width: auto;
	height: 70vh;
	aspect-ratio: 300 / 800;
	pointer-events: none;
	perspective: 1000px;
}

.card-container.is-clickable {
	cursor: pointer;
	pointer-events: auto;
	animation: card-hover 2.0s infinite ease-in-out !important;
}

.card-container.has-landed {
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
}

@keyframes card-hover {
	0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1.0); }
	50% { transform: translate(-50%, -53%) rotate(0deg) scale(1.02); }
}

.card-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	text-align: center;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card-front, .card-back {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	background-color: transparent;
}

.card-front img, .card-back img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.card-back img {
	position: relative;
	z-index: 5;
	pointer-events: auto !important;
}

.card-back {
	position: relative;
	transform: rotateY(180deg);
}

.card-back.is-rainbow {
	filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}

#card-effect {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: -1;
	width: 200vmax;
	height: 200vmax;
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%);
	-webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 70%);
	mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 70%);
	transition: opacity 0.3s;
}

#card-effect::before,
#card-effect::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0;
	mix-blend-mode: screen;
	transition: opacity 0.5s;
}

#card-effect.effect-normal::before {
	opacity: 0.8;
	background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.8) 0deg 25deg, transparent 25deg 51deg, rgba(200, 200, 200, 0.6) 51deg 76deg, transparent 76deg 102deg, rgba(240, 240, 240, 0.7) 102deg 127deg, transparent 127deg 154deg, rgba(180, 180, 180, 0.5) 154deg 179deg, transparent 179deg 205deg, rgba(255, 255, 255, 0.8) 205deg 230deg, transparent 230deg 257deg, rgba(220, 220, 220, 0.6) 257deg 282deg, transparent 282deg 308deg, rgba(150, 150, 150, 0.5) 308deg 333deg, transparent 333deg 360deg);
	animation: rotate-cw 10s linear infinite;
}

#card-effect.effect-normal::after {
	opacity: 0.6;
	background: conic-gradient(from 30deg, rgba(255, 255, 255, 0.5) 0deg 20deg, transparent 20deg 51deg, rgba(180, 180, 180, 0.4) 51deg 71deg, transparent 71deg 102deg, rgba(230, 230, 230, 0.5) 102deg 122deg, transparent 122deg 154deg, rgba(160, 160, 160, 0.4) 154deg 174deg, transparent 174deg 205deg, rgba(255, 255, 255, 0.5) 205deg 225deg, transparent 225deg 257deg, rgba(200, 200, 200, 0.4) 257deg 277deg, transparent 277deg 308deg, rgba(140, 140, 140, 0.3) 308deg 328deg, transparent 328deg 360deg);
	animation: rotate-ccw 12.5s linear infinite;
}

#card-effect.effect-rainbow::before {
	opacity: 1.0;
	background: conic-gradient(from 0deg, hsla(0, 100%, 60%, 0.7) 0deg 25deg, transparent 25deg 51deg, hsla(30, 100%, 60%, 0.7) 51deg 76deg, transparent 76deg 102deg, hsla(60, 100%, 60%, 0.7) 102deg 127deg, transparent 127deg 154deg, hsla(120, 100%, 60%, 0.7) 154deg 179deg, transparent 179deg 205deg, hsla(210, 100%, 60%, 0.7) 205deg 230deg, transparent 230deg 257deg, hsla(240, 100%, 60%, 0.7) 257deg 282deg, transparent 282deg 308deg, hsla(280, 100%, 60%, 0.7) 308deg 333deg, transparent 333deg 360deg);
	animation: rotate-cw 10s linear infinite;
}

#card-effect.effect-rainbow::after {
	opacity: 0.7;
	background: conic-gradient(from 25deg, hsla(0, 100%, 70%, 0.5) 0deg 20deg, transparent 20deg 51deg, hsla(30, 100%, 70%, 0.5) 51deg 71deg, transparent 71deg 102deg, hsla(60, 100%, 70%, 0.5) 102deg 122deg, transparent 122deg 154deg, hsla(120, 100%, 70%, 0.5) 154deg 174deg, transparent 174deg 205deg, hsla(210, 100%, 70%, 0.5) 205deg 225deg, transparent 225deg 257deg, hsla(240, 100%, 70%, 0.5) 257deg 277deg, transparent 277deg 308deg, hsla(280, 100%, 70%, 0.5) 308deg 328deg, transparent 328deg 360deg);
	animation: rotate-ccw 12.5s linear infinite;
}

@keyframes rotate-cw {
	0% { transform: rotate(0deg) scale(1.0); }
	50% { transform: rotate(180deg) scale(1.1); }
	100% { transform: rotate(360deg) scale(1.0); }
}

@keyframes rotate-ccw {
	0% { transform: rotate(0deg) scale(1.1); }
	50% { transform: rotate(-180deg) scale(1.0); }
	100% { transform: rotate(-360deg) scale(1.1); }
}

.result-name {
	cursor: pointer;
	position: absolute;
	top: -1.8em;
	left: 50%;
	z-index: 10;
	width: auto;
	color: #ffffff !important;
	font-family: 'DotGothic16', sans-serif;
	font-size: clamp(16px, 5vmin, 34px);
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	line-height: 1.2;
	text-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;
	opacity: 0;
	pointer-events: auto;
	transform: translateX(-50%);
	transition: opacity 0.5s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.result-name[href]:hover {
	transform: translateX(-50%) scale(1.1);
}

.result-name.is-visible {
	opacity: 1;
}

.animate-fall {
	animation: dropDown 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes dropDown {
	0% { top: -100%; transform: translateX(-50%) rotate(10deg); }
	100% { top: 50%; transform: translate(-50%, -50%) rotate(0deg); }
}

.is-flipped {
	transform: rotateY(180deg);
}

/* L5 ++++++++++++++++++++++++++++++++++++++++ 大盤振る舞いモード (ターゲット選択) / アーティスト生成 ++++++++++++++++++++++++++++++++++++++++ */
#artist figure {
	overflow: hidden;
	position: relative;
	border-radius: 4px;
	transition: background-color 0.4s ease;
}

#artist figure.is-target {
	background-color: #cc0000 !important;
}

#artist figure.is-target figcaption {
	color: #ffffff !important;
	font-weight: bold;
}

#artist figure figcaption {
	cursor: default;
	transition: color 0.4s ease;
}

#artist-grid figure {
	overflow: hidden;
	position: relative;
}

.artist-icons {
	display: flex;
	gap: 5px;
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 10;
}

.artist-icon-link {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	color: #ffffff !important;
	font-size: 14px;
	text-decoration: none !important;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.6);
	transition: background-color 0.3s ease, transform 0.2s;
}

.artist-icon-link:hover {
	color: #ffffff !important;
	background-color: rgba(204, 102, 0, 0.9);
	transform: scale(1.1);
}

.artist-icon-link i {
	margin: 0;
}

/* L6 ........................................ カウンター表示 (ドラムロール) ........................................ */

#total-count-display {
	display: none;
	justify-content: center;
	align-items: baseline;
	gap: 0.2em;
	width: fit-content;
	margin: 1em auto 0 auto;
	padding: 0.6em 1.5em 0.4em 1.5em;
	font-weight: bold;
	line-height: 1;
	background:	rgba(255, 255, 255, 0.8);
	border-radius: 20px;
}

#count-num {
	overflow: hidden;
	display: inline-flex;
	align-items: baseline;
	position: relative;
	top: 0.05em;
	height: 1.2em;
	font-size: 1.2em;
	color: #d92525;
}

.drum-digit {
	display: inline-block;
	position: relative;
	height: 1em;
	line-height: 1;
	overflow: hidden;
}

.drum-ribbon {
	display: flex;
	flex-direction: column;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.drum-char {
	height: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: pre; 
}

/* L5 ++++++++++++++++++++++++++++++++++++++++ アーティストリスト ++++++++++++++++++++++++++++++++++++++++ */

ul.artist-name-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none !important;
	max-width: 1000px;
	margin: 2em auto !important;
	padding: 0;
}

ul.artist-name-list li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

ul.artist-name-list li::before,
ul.artist-name-list li::after {
	content: none !important;
	display: none !important;
}

ul.artist-name-list li strong {
	font-weight: normal;
}

ul.artist-name-list li a {
	display: block;
	position: relative;
	top: 0;
	padding: 8px 12px;
	color: #333333;
	font-size: 1.4rem;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
	transition: all 0.2s ease;
}

ul.artist-name-list li a:hover {
	top: 2px;
	color: #336699;
	background-color: #fafafa;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
	ul.artist-name-list {
		gap: 8px;
		margin: 1.5em auto !important;
	}
	
	ul.artist-name-list li a {
		padding: 6px 10px;
		font-size: 1.2rem;
	}
}

/* L5 ++++++++++++++++++++++++++++++++++++++++ スマホ表示時のグリッド調整 ++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 768px) {
	#artist-grid {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 10px !important;
		margin-top: 1em;
	}
	
	#artist-grid figure {
		display: flex !important;
		flex-direction: column !important;
		width: calc((100% - 20px) / 3) !important;
		height: 100%;
		margin: 0 !important;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}
	
	#artist-grid figure + figure {
		margin-top: 0 !important;
	}
	
	#artist-grid figure img {
		display: block;
		width: 100%;
		max-width: none !important;
		height: auto;
		max-height: none !important;
		margin: 0 !important;
		aspect-ratio: 3 / 4 !important;
		object-fit: cover !important;
		object-position: top center !important;
	}
	
	#artist-grid figure.is-wide {
		width: calc(((100% - 20px) / 3) * 2 + 10px) !important;
	}
	
	#artist-grid figure.is-wide img {
		aspect-ratio: 16 / 9 !important;
	}
}

@media screen and (max-width: 520px) {
	#artist-grid figure {
		width: calc((100% - 10px) / 2) !important;
	}
	
	#artist-grid figure.is-wide {
		width: 92% !important;
		margin: 0 auto !important;
	}
	
	#artist-grid figure.is-wide img {
		aspect-ratio: 2 / 1 !important;
	}
}

/* L5 ++++++++++++++++++++++++++++++++++++++++ ヒント画像 ++++++++++++++++++++++++++++++++++++++++ */

.hint-img {
	visibility: hidden;
	position: absolute;
	bottom: 100%;
	right: 0;
	z-index: 105;
	width: auto;
	max-width: 18vw;
	max-height: 300px;
	margin-bottom: 0.6em;
	font-size: 0.75em;
	opacity: 0;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
	pointer-events: none;
}

.hint-img.is-visible {
	visibility: visible;
	opacity: 1;
}

@media screen and (max-aspect-ratio: 1/1) {
	.hint-img {
		max-height: 200px;
	}
}

/* L5 ++++++++++++++++++++++++++++++++++++++++ 画像保護 ++++++++++++++++++++++++++++++++++++++++ */

#kobushimaru-container img {
	pointer-events: none;
	-webkit-user-drag: none;
	user-drag: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* L5 ++++++++++++++++++++++++++++++++++++++++ スマホタップ時のハイライト無効化 ++++++++++++++++++++++++++++++++++++++++ */

.dialogue-box,
.omikuji-close-btn,
#btn-draw-omikuji,
.card-container,
.result-name {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
	outline: none;
}