:root {
	--green: #00953B;
	--orange: #FC5527;
	--text: #4D4D4D;
	--bg_page: #E9FFF1;
	--white: #FFFFFF;
	--placeholder: #D9D9D9;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

html,
body {
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 900;
	color: var(--text);
	line-height: 1.5;
	min-height: 100vh;
	min-height: 100dvh;
}

html {
	background: #FFFFFF;
	overscroll-behavior: none;
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	background: #FFFFFF;
	overscroll-behavior: none;
	overflow-x: clip;
}
.sky_backdrop {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100vh;
	height: 100lvh;
	background: #87C8EE;
	z-index: 0;
	pointer-events: none;
	transform: translateZ(0);
	will-change: transform;
}
.bg_grass_fixed {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 163px;
	background: url('../img/bg_grass.svg') center bottom no-repeat;
	pointer-events: none;
	z-index: 0;
	transform: translateZ(0);
}

.page {
	width: 375px;
	margin: 0 auto;
	background: var(--bg_page);
	position: relative;
	overflow-x: clip;
	box-shadow: 0 6px 40px rgba(0, 0, 0, 0.14);
	z-index: 1;
	zoom: clamp(0.7, calc(100vw / 375px), 1.3);
}

/* ===== Sky clouds ===== */
.sky_clouds {
	display: none;
	z-index: 0;
}

@media (min-width: 600px) {
	.sky_clouds {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100vh;
		height: 100lvh;
		pointer-events: none;
		z-index: 0;
		overflow: hidden;
		transform: translateZ(0);
		will-change: transform;
	}
	.sky_clouds .cloud {
		position: absolute;
		width: 183px;
		height: auto;
		left: 0;
		animation: cloud_drift 60s linear infinite;
	}
	.sky_clouds .c1  { top:  4%; animation-duration: 136s; animation-delay: -17s;  }
	.sky_clouds .c2  { top: 11%; animation-duration: 162s; animation-delay: -94s;  }
	.sky_clouds .c3  { top: 19%; animation-duration: 122s; animation-delay: -48s;  }
	.sky_clouds .c4  { top: 26%; animation-duration: 150s; animation-delay: -119s; }
	.sky_clouds .c5  { top: 35%; animation-duration: 133s; animation-delay: -71s;  }
	.sky_clouds .c6  { top: 43%; animation-duration: 170s; animation-delay: -14s;  }
	.sky_clouds .c7  { top: 51%; animation-duration: 143s; animation-delay: -102s; }
	.sky_clouds .c8  { top: 59%; animation-duration: 129s; animation-delay: -54s;  }
	.sky_clouds .c9  { top: 67%; animation-duration: 156s; animation-delay: -133s; }
	.sky_clouds .c10 { top: 75%; animation-duration: 146s; animation-delay: -37s;  }

	@keyframes cloud_drift {
		from { transform: translateX(100vw); }
		to   { transform: translateX(-220px); }
	}

	@media (prefers-reduced-motion: reduce) {
		.sky_clouds .cloud { animation: none; }
	}
}

/* ===== PC side areas ===== */
.pc_left_area,
.pc_right_area {
	display: none;
}

@media (min-width: 1300px) {
	.pc_left_area {
		position: fixed;
		left: 0;
		top: 0;
		width: calc(50% - 244px);
		height: 100vh;
		height: 100dvh;
		z-index: 1;
		pointer-events: none;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 24px;
	}
	.pc_menu_wrap {
		position: relative;
		width: 400px;
	}
	.pc_menu_card {
		width: 400px;
		height: auto;
		display: block;
		pointer-events: auto;
		filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
	}
	.pc_menu_hit {
		position: absolute;
		left: 8%;
		width: 84%;
		height: 14%;
		background: transparent;
		border: none;
		padding: 0;
		cursor: pointer;
		pointer-events: auto;
	}
	.pc_menu_hit[data-cat="common"]   { top: 20%; }
	.pc_menu_hit[data-cat="keiba"]    { top: 35%; }
	.pc_menu_hit[data-cat="keirin"]   { top: 50%; }
	.pc_menu_hit[data-cat="autorace"] { top: 65%; }
	.pc_menu_hit[data-cat="loto"]     { top: 80%; }

	.pc_right_area {
		position: fixed;
		right: 0;
		top: 0;
		width: calc(50% - 244px);
		height: 100vh;
		height: 100dvh;
		z-index: 1;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 14px;
		padding: 0 24px;
	}
	.pc_qr_card {
		width: 100%;
		max-width: 255px;
		height: auto;
		pointer-events: auto;
		filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.16));
	}
}

/* ===== MV ===== */
.mv {
	position: relative;
	width: 375px;
	height: 712px;
	overflow: visible;
}

.mv_video {
	position: absolute;
	left: 0;
	top: 0;
	width: 375px;
	height: 712px;
	background: var(--bg_page);
	z-index: 0;
	overflow: hidden;
}
.mv_video video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.mv_video video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}
.mv_video video::-webkit-media-controls-overlay-play-button {
	display: none !important;
	-webkit-appearance: none;
}
.mv_video video::-webkit-media-controls-panel {
	display: none !important;
	-webkit-appearance: none;
}

.site_header {
	position: absolute;
	left: 0;
	top: -1px;
	width: 375px;
	height: 46px;
	background: #FFFFFF;
	z-index: 5;
}
.site_header img {
	position: absolute;
	left: 118px;
	top: 1px;
	width: 140px;
	height: 44px;
	object-fit: contain;
	display: block;
}

.mv_katakana {
	position: absolute;
	left: 108px;
	top: 105px;
	width: 159px;
	height: 42px;
	background: var(--green);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mv_katakana img {
	width: 130px;
	height: 24px;
	display: block;
}

.mv_title {
	position: absolute;
	left: 34px;
	top: 172px;
	width: 309px;
	height: 146px;
	z-index: 2;
}
.mv_title img {
	width: 100%;
	height: 100%;
	display: block;
}

.mv_copy {
	position: absolute;
	left: 30px;
	top: 343px;
	width: 315px;
	text-align: center;
	font-size: 21px;
	font-weight: 900;
	color: var(--text);
	line-height: 1.2;
	z-index: 2;
	margin: 0;
}
.mv_copy .hl { color: var(--orange); }

.mv_count {
	position: absolute;
	left: 99px;
	top: 433px;
	width: 198px;
	height: 81px;
	z-index: 2;
}
.mv_count img {
	display: block;
	width: 100%;
	height: 100%;
}

.mv_cta {
	position: absolute;
	left: 40px;
	top: 537px;
	width: 290px;
	height: 67px;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	display: block;
	text-decoration: none;
}
.mv_cta img {
	width: 100%;
	height: 100%;
	display: block;
}
.mv_cta:active { transform: translateY(2px); }

/* ===== Cheer explain ===== */
.cheer_explain {
	position: relative;
	width: 375px;
	height: 118px;
	margin: -73px auto 0;
	z-index: 3;
}
.cheer_explain_bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.cheer_explain_icon {
	position: absolute;
	left: 12px;
	top: 26px;
	width: 74px;
	height: 74px;
	z-index: 1;
}
.cheer_explain_icon img {
	width: 100%;
	height: 100%;
	display: block;
}
.cheer_explain_text {
	position: absolute;
	left: 98px;
	top: 28px;
	width: 270px;
	z-index: 1;
	color: #1F1F1F;
	font-weight: 900;
	font-size: 19px;
	line-height: 1.55;
	letter-spacing: 0.01em;
	margin: 0;
}
.cheer_explain_text .hilite_r { color: var(--orange); }
.cheer_explain_text .hilite_g { color: var(--green); }

/* ===== Updates section ===== */
.updates {
	background: var(--bg_page);
	padding-top: 31px;
	padding-bottom: 27px;
}
.updates_title {
	width: 240px;
	height: 30px;
	margin: 0 auto 28px;
}
.updates_title img {
	width: 100%;
	height: 100%;
	display: block;
}

/* ===== Tabs ===== */
.tabs {
	width: 375px;
	height: 42px;
	position: relative;
	z-index: 5;
}
.tabs.is_stuck {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.tabs_placeholder {
	width: 375px;
	height: 42px;
	display: none;
}
.tabs_placeholder.is_active {
	display: block;
}
@media (min-width: 1300px) {
	.tabs.is_stuck {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
	}
	.tabs_placeholder.is_active {
		display: none;
	}
}
.tabs_svg_holder {
	width: 100%;
	height: 100%;
	display: block;
	background: var(--bg_page);
}
.tabs_svg_holder svg {
	width: 100%;
	height: 100%;
	display: block;
}
.tab_hit {
	position: absolute;
	top: 0;
	width: 75px;
	height: 42px;
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}
.tab_hit[data-cat="common"]   { left: 0; }
.tab_hit[data-cat="keiba"]    { left: 75px; }
.tab_hit[data-cat="keirin"]   { left: 150px; }
.tab_hit[data-cat="autorace"] { left: 225px; }
.tab_hit[data-cat="loto"]     { left: 300px; }

/* ===== Card list ===== */
.card_list {
	width: 340px;
	margin: 16px auto 0;
	display: flex;
	flex-direction: column;
	gap: 17px;
}

.card {
	width: 340px;
	height: 602px;
	background: var(--white);
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	scroll-margin-top: 14px;
	transition: height 0.3s ease-out;
}
.card.is_open { height: 1360px; }
.card.no_transition,
.card.no_transition .detail_section { transition: none !important; }

.card_thumb {
	width: 340px;
	height: 180px;
	background: var(--placeholder);
	border-radius: 10px 10px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 12px;
	overflow: hidden;
}
.card_thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card_date {
	position: absolute;
	left: 17px;
	top: 195px;
	width: 130px;
	height: 21px;
	color: #4D4D4D;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: 14px;
	line-height: 21px;
	white-space: nowrap;
}

.card_platforms {
	position: absolute;
	left: 142px;
	top: 195px;
	width: 183px;
	height: 23px;
	display: flex;
	gap: 6px;
}
.platform_chip {
	width: 57px;
	height: 23px;
	display: block;
}

.card_cats {
	position: absolute;
	left: 15px;
	top: 226px;
	width: 310px;
	height: 24px;
	display: flex;
	gap: 6px;
}
.category_pill {
	width: 73px;
	height: 24px;
	display: block;
}

.card_voice_box {
	position: absolute;
	left: 15px;
	top: 265px;
	width: 310px;
	height: 169px;
}
.voice_top {
	position: absolute;
	left: 0;
	top: 0;
	width: 310px;
	height: 84px;
	background: var(--green);
	border-radius: 10px 10px 0 0;
	padding: 10px 16px 10px 55px;
	color: var(--white);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 18px;
	font-weight: 900;
	line-height: 1.56;
	display: flex;
	align-items: center;
}
.voice_text {
	font-size: 18px;
	font-weight: 900;
	line-height: 1.56;
	color: inherit;
	display: block;
}
.voice_avatar {
	position: absolute;
	left: 12px;
	top: 26px;
	width: 32px;
	height: 32px;
	z-index: 2;
}
.voice_arrow {
	position: absolute;
	left: 139px;
	top: 77px;
	width: 32px;
	height: 14px;
	background: var(--green);
	clip-path: polygon(50% 100%, 0 0, 100% 0);
	z-index: 2;
}
.voice_bottom {
	position: absolute;
	left: 0;
	top: 84px;
	width: 310px;
	height: 85px;
	background: var(--white);
	border: 3px solid var(--green);
	border-radius: 0 0 10px 10px;
	padding: 14px 16px;
	color: #4D4D4D;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 16px;
	font-weight: 900;
	display: flex;
	align-items: center;
	line-height: 1.56;
	box-sizing: border-box;
}

.card_cheer_btn {
	position: absolute;
	left: 15px;
	top: 441px;
	width: 91px;
	height: 91px;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.08s ease;
}
.card_cheer_btn img {
	width: 100%;
	height: 100%;
	display: block;
}
.card_cheer_btn:active { transform: translateY(2px) scale(0.96); }

.card_cheer_count {
	position: absolute;
	left: 107px;
	top: 457px;
	width: 204px;
	height: 48px;
}
.cheer_count_bg {
	position: absolute;
	left: 9px;
	top: 0;
	width: 199px;
	height: 48px;
	display: block;
	z-index: 0;
}
.cheer_count_text {
	position: absolute;
	left: 9px;
	top: 0;
	width: 199px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	z-index: 1;
	font-family: "Noto Sans JP", sans-serif;
	color: #4D4D4D;
	white-space: nowrap;
}
.cheer_count_label {
	font-weight: 900;
	font-size: 18px;
}
.cheer_count_num {
	font-weight: 900;
	font-size: 18px;
}

.more_btn {
	position: absolute;
	left: 83px;
	top: 542px;
	width: 173px;
	height: 40px;
	background: #FC5527;
	color: var(--white);
	border: none;
	border-radius: 0;
	box-shadow: 3px 3px 0 #E13405;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: 17px;
	cursor: pointer;
	transition: transform 0.08s ease, box-shadow 0.08s ease, top 0.3s ease-out;
}
.more_btn:active {
	transform: translate(3px, 3px);
	box-shadow: 0 0 0 #E13405;
}
.card.is_open .more_btn { top: 1290px; }
.card.is_open .detail_section { transition: opacity 0.3s 0.2s ease; }

.detail_section {
	position: absolute;
	left: 15px;
	right: 15px;
	top: 555px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0s ease;
}
.detail_body {
	padding: 0 12px;
	color: var(--text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
}
.detail_heading {
	min-height: 36px;
	padding: 0 12px;
	border-left: 6px solid var(--green);
	color: var(--text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	display: flex;
	align-items: center;
}
.detail_image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
	margin: 0 auto;
}
.detail_link {
	text-align: center;
	font-size: 14px;
	color: var(--text);
	line-height: 1.5;
	margin: 4px 0;
}
.detail_link a {
	color: #1A5AC8;
	text-decoration: underline;
	font-weight: 700;
}
.card.is_open .detail_section {
	opacity: 1;
	pointer-events: auto;
}

.empty_state {
	width: 340px;
	background: var(--white);
	border-radius: 10px;
	padding: 40px 20px;
	text-align: center;
	color: var(--text);
	font-size: 13px;
}

/* ===== Footer ===== */
.site_footer {
	width: 375px;
	height: 284px;
	position: relative;
	background: #FFE100;
	color: #000000;
	font-family: "Noto Sans JP", sans-serif;
	transform: translateZ(0);
	margin: 0 auto;
}
.site_footer_links {
	position: absolute;
	left: 20px;
	top: 20px;
	width: 335px;
	display: grid;
	grid-template-columns: 155px 155px;
	grid-template-rows: 37px 37px 37px 37px 37px;
	column-gap: 25px;
	list-style: none;
}
.site_footer_links.sp { display: none; }
body.is_sp .site_footer_links.pc { display: none; }
body.is_sp .site_footer_links.sp { display: grid; }
.site_footer_links li {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	color: #000000;
}
.site_footer_links a {
	color: #000000;
	text-decoration: none;
}
.site_footer_links a:hover { text-decoration: underline; }
.site_footer_copy {
	position: absolute;
	left: 33px;
	right: 33px;
	top: 240px;
	padding-top: 14px;
	border-top: 1px solid #404040;
	text-align: center;
	color: #000000;
	font-size: 10px;
	font-weight: 100;
	letter-spacing: 0.02em;
}

/* ===== PAGE TOP button ===== */
.pagetop_btn {
	position: fixed;
	bottom: 24px;
	right: max(16px, calc(50vw - 227.75px));
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--green);
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 900;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.pagetop_btn.is_visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.pagetop_btn:active { transform: translateY(2px); }
.pagetop_btn .arrow {
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 14px solid #FFFFFF;
	margin-bottom: 5px;
}

/* ===== Particle overlay ===== */
#ganbare_overlay {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 90;
	overflow: hidden;
}
.cheer_particle {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	pointer-events: none;
	will-change: transform, opacity;
	user-select: none;
}
.cheer_particle.is_confetti {
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
}
.cheer_particle.is_herd {
	filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.22));
}

/* ===== PC hover effects ===== */
@media (hover: hover) and (pointer: fine) {
	.site_header a,
	.mv_cta,
	.card_cheer_btn,
	.tab_hit,
	.pc_menu_hit,
	.tab_hit + button,
	.popup_link,
	#pagetop_btn {
		transition-property: transform, box-shadow, opacity, filter, background;
		transition-duration: 0.2s;
		transition-timing-function: ease;
	}

	.site_header a:hover img {
		transform: scale(1.06);
		transition: transform 0.2s ease;
	}

	.mv_cta:hover {
		transform: translateY(-2px);
		filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
	}

	.card_cheer_btn:hover {
		transform: scale(1.08);
		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
	}

	.more_btn:hover {
		transform: translate(-1px, -1px);
		box-shadow: 4px 4px 0 #E13405;
	}

	.tab_hit:hover {
		cursor: pointer;
	}

	.pc_menu_hit {
		cursor: pointer;
	}
	.pc_menu_card g[data-cat] {
		transition: transform 0.2s ease, filter 0.2s ease;
		transform-origin: left center;
		transform-box: fill-box;
	}
	.pc_menu_card g[data-cat].is_hover {
		transform: translateX(4px);
		filter: drop-shadow(0 3px 6px rgba(0, 149, 59, 0.28));
	}

	#tabs_svg_holder svg [data-cat] {
		transition: transform 0.18s ease;
		transform-origin: center;
		transform-box: fill-box;
	}
	#tabs_svg_holder svg [data-cat].is_hover {
		transform: scale(1.07);
	}

	.site_footer_links a:hover {
		text-decoration: underline;
	}

	#pagetop_btn:hover {
		transform: scale(1.08);
	}
}

/* ===== Touch device ===== */
@media (hover: none) and (pointer: coarse) {
	.mv_cta:active,
	.card_cheer_btn:active,
	.more_btn:active,
	#pagetop_btn:active {
		transform: none;
	}
	.more_btn:active {
		box-shadow: 3px 3px 0 #E13405;
	}
	.mv_cta:active,
	.more_btn:active,
	#pagetop_btn:active,
	.site_header a:active,
	.popup_link:active {
		opacity: 0.65;
		transition: opacity 0.08s ease;
	}
}

/* ===== body.ipad overrides ===== */
body.ipad .mv_copy { font-size: 27.3px; }
body.ipad .cheer_explain_text { font-size: 24.7px; }
body.ipad .card_thumb { font-size: 15.6px; }
body.ipad .card_date { font-size: 18.2px; }
body.ipad .voice_top { font-size: 23.4px; }
body.ipad .voice_text { font-size: 23.4px; }
body.ipad .voice_bottom { font-size: 20.8px; }
body.ipad .cheer_count_label { font-size: 23.4px; }
body.ipad .cheer_count_num { font-size: 23.4px; }
body.ipad .more_btn { font-size: 22.1px; }
body.ipad .detail_heading { font-size: 18.2px; }
body.ipad .detail_body { font-size: 18.2px; }
body.ipad .empty_state { font-size: 16.9px; }
body.ipad .site_footer_links li { font-size: 15.6px; }
body.ipad .site_footer_copy { font-size: 13px; }
body.ipad .pagetop_btn { font-size: 15.6px; }

/* Hide header on body.opapp */
body.opapp .site_header { display: none; }