@charset "UTF-8";

#zadankai-club-logo-wrapper { border-radius: 24px; background: #FFFFFF; position: relative; overflow: hidden; }
#zadankai-club-logo-background { width: 100%; height: auto; display: block; }
#zadankai-club-logo { width: auto; height: 320px; top: 50%; left: 50%; position: absolute; translate: -50% -50%; filter: drop-shadow(0 0 1px #CCCCCC); animation: moveLogo 4s ease-in-out infinite; }

@keyframes moveLogo {
	0% { top: 50%; }
	50% { top: calc(50% - 16px); }
	100% { top: 50%; }
}

#zadankai-club-logo-link {
	bottom: 24px;
	left: 50%;
	padding: 8px 32px;
	border-radius: 8px;
	background: #004488;
	position: absolute;
	transition: background 0.25s;
	translate: -50% 0;
	font-size: 24px;
	color: #FFFFFF;
	font-weight: bold;

	&:after { content: "▶"; top: 50%; right: 8px; position: absolute; translate: 0 -50%; font-size: 10px; }
	&:hover { background: #42A1FF; text-decoration: none; }
}

#stats dl { display: flex; gap: 16px 32px; }
#stats div { padding: 24px; border-radius: 16px; background: var(--mimasenka-light-orange); flex: 1; text-align: center; }
#stats dt { color: var(--mimasenka-orange); }
#stats dd { font-size: 200%; font-weight: bold; }

.page-section footer a {
	margin-top: 32px;
	padding: 16px;
	background: var(--mimasenka-light-brown);
	display: block;
	font-weight: bold;
	color: var(--mimasenka-brown);
	text-align: center;
	text-decoration: none;
	transition: 0.25s;
	transition-property: background, color;

	&:hover { background: var(--mimasenka-brown); color: var(--mimasenka-light-brown); }
}

#news li time { display: block; }
#news li + li { margin-top: 8px; padding-top: 8px; border-top: 1px solid #CCCCCC; }

@media (width <= 640px) {
	#zadankai-club-logo-wrapper { width: 100%; height: 400px; border-radius: 0; }
	#zadankai-club-logo-background { width: auto; height: 360px; top: 0; left: 50%; position: absolute; translate: -50% 0; }
	#zadankai-club-logo { top: calc((100% - 40px) / 2); height: 160px; }
	#zadankai-club-logo-link { width: 100%; bottom: 0; left: 0; right: 0; padding: 0 16px; border-radius: 0; translate: 0 0; font-size: 16px; line-height: 40px; }
	#zadankai-club-logo-link:after { right: 16px; }
	#stats dl { flex-wrap: wrap; }
	#stats div { width: 100%; flex: auto; }
}