@charset "utf-8";
:root{--brown:#3c190b;--brown2:#6e2b0d;--orange:#d86b0b;--vermilion:#b83a16;--gold:#d79b16;--yellow:#ffd45a;--cream:#fff3d2;--paper:#f7f3ed;--ink:#34241d;--muted:#766b64;--shadow:0 18px 45px rgba(61,39,25,.1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.7;letter-spacing:.025em}
a{color:inherit}
img{display:block;max-width:100%}
.shuffle-hero{position:relative;min-height:580px;display:grid;place-items:center;overflow:hidden;text-align:center;color:#fff;background:radial-gradient(circle at 50% 15%,rgba(255,242,177,.28),transparent 31%),linear-gradient(145deg,#dc7917 0%,#9e3f0d 52%,#3d190b 100%);border-bottom:5px solid var(--gold);isolation:isolate}
.shuffle-hero:before,.shuffle-hero:after{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(255,212,90,.2);border-radius:50%;z-index:0}.shuffle-hero:before{left:-110px;top:-90px}.shuffle-hero:after{right:-130px;bottom:-90px;width:350px;height:350px}
.shuffle-hero__inner{position:relative;z-index:2;width:min(760px,calc(100% - 32px));padding:48px 15px}
.event-logo{width:min(330px,65vw);margin:0 auto 5px;filter:drop-shadow(0 12px 16px rgba(45,12,2,.28))}
.hero-kicker{margin:0;color:#fff2b4;font-size:12px;font-weight:900;letter-spacing:.2em}
.shuffle-hero h1{margin:8px 0 14px;font:900 clamp(46px,8vw,78px)/1 Arial,sans-serif;letter-spacing:.03em;text-shadow:0 4px 0 rgba(65,20,4,.25)}
.shuffle-hero h1 em{font-style:normal;color:var(--yellow)}
.hero-copy{font-size:clamp(18px,3vw,25px);font-weight:900;line-height:1.55}
.vote-bonus{display:inline-flex;align-items:center;gap:18px;margin-top:15px;padding:11px 22px;border:1px solid rgba(255,212,90,.8);border-radius:999px;background:rgba(36,15,7,.38);box-shadow:0 8px 22px rgba(45,12,2,.2)}
.vote-bonus small{font-weight:800}.vote-bonus strong{font-size:19px}.vote-bonus b{font:900 35px/1 Arial;color:var(--yellow)}
.hero-back{position:absolute;left:20px;top:20px;z-index:5;padding:9px 15px;border:1px solid rgba(255,255,255,.45);border-radius:999px;color:#fff;text-decoration:none;font-size:12px;font-weight:800;background:rgba(35,15,8,.34);backdrop-filter:blur(5px)}
.hero-decor{position:absolute;inset:0;z-index:1;pointer-events:none}.hero-decor i{position:absolute;width:8px;height:16px;background:var(--yellow);opacity:.65;transform:rotate(28deg)}.hero-decor i:nth-child(1){left:8%;top:22%;background:#fff0a6}.hero-decor i:nth-child(2){left:17%;bottom:16%;background:#8f2516;transform:rotate(71deg)}.hero-decor i:nth-child(3){left:38%;top:11%;background:#ffd760;transform:rotate(117deg)}.hero-decor i:nth-child(4){right:34%;bottom:12%;background:#f5a623;transform:rotate(43deg)}.hero-decor i:nth-child(5){right:15%;top:18%;background:#fff4c7;transform:rotate(146deg)}.hero-decor i:nth-child(6){right:7%;bottom:28%;background:#df5b27;transform:rotate(93deg)}
#page{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:64px 0 70px}
.schedule-intro{text-align:center;margin:0 auto 42px;max-width:900px}.schedule-intro>span{font:800 11px/1 Arial;color:var(--orange);letter-spacing:.22em}.schedule-intro h2{margin:12px 0 15px;font-size:clamp(25px,4vw,38px);color:var(--brown)}.schedule-intro>p{max-width:760px;margin:8px auto;color:var(--muted)}

.area-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin: 26px auto 0;
	padding: 14px;
	/* border: 1px solid rgba(60,25,11,.1); */
	border-radius: 14px;
	/* background: rgba(255,255,255,.72); */
	/* box-shadow: 0 8px 28px rgba(61,39,25,.06); */
}



.area-nav a{position:relative;min-width:112px;padding:9px 15px 9px 28px;border:1px solid rgba(60,25,11,.11);border-radius:999px;color:#493b34;background:#fff;text-decoration:none;font-size:12px;font-weight:800;transition:border-color .18s,transform .18s,box-shadow .18s}.area-nav a:before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--nav-color,#ccc);box-shadow:0 0 0 3px rgba(0,0,0,.05);transform:translateY(-50%)}.area-nav a:hover{border-color:var(--nav-color,#aaa);transform:translateY(-1px);box-shadow:0 5px 14px rgba(61,39,25,.08)}
#list{display:block}.area-block{overflow:hidden;scroll-margin-top:16px;margin:0 0 40px;border:1px solid var(--area-color1,#ccc);border-radius:16px;background-color:var(--area-bg,rgba(204,204,204,.1));box-shadow:var(--shadow)}
.area-heading{display:flex;align-items:baseline;gap:14px;padding:18px 24px;color:var(--area-text,#fff);background:linear-gradient(rgba(8,8,8,.3),rgba(8,8,8,.3)),linear-gradient(115deg,var(--area-color1,#ccc),var(--area-color2,#ccc));text-shadow:0 1px 2px rgba(0,0,0,.62)}.area-heading span{font:800 10px/1 Arial;letter-spacing:.16em;color:inherit;opacity:.78}.area-heading h2{margin:0;font-size:26px;letter-spacing:.04em}.area-heading p{margin:0 0 0 auto;font-size:12px;font-weight:800;color:inherit;opacity:.8}
.boy-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:0;padding:18px;list-style:none}
.boy-card {
	min-width: 0;
	overflow: hidden;
	border: 1px solid rgba(60,25,11,.11);
	border-radius: 11px;
	background: rgba(0,0,0,0.75);
	box-shadow: 0 3px 12px rgba(61,39,25,.055);
	transition: transform .2s,box-shadow .2s,border-color .2s;
}

.boy-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.24);box-shadow:0 10px 24px rgba(61,39,25,.12)}.boy-card a{display:block;height:100%;text-decoration:none}.boy-photo{position:relative;overflow:hidden;aspect-ratio:1/1;background:#e7e1da}.boy-photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.boy-card:hover .boy-photo img{transform:scale(1.025)}
.boy-photo span {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: calc(100% - 14px);
	padding: 4px 9px;
	border-radius: 0 9px 0 0;
	color: var(--shop-text,#fff);
	background: linear-gradient(rgba(0,0,0,.36),rgba(0,0,0,.36)),linear-gradient(110deg,var(--shop-color1,#ccc),var(--shop-color2,#ccc));
	font-size: 10px;
	font-weight: 800;
	line-height: 1.45;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* text-shadow: 0 1px 2px rgba(0,0,0,.78); */
	box-shadow: 1px -1px 0 rgba(255,255,255,.08);
}
.boy-info{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:46px;padding:8px 10px;text-align:left;border-top:1px solid rgba(255,255,255,.12)}

.boy-info h3 {
	min-width: 0;
	margin: 0;
	color: #fff;
	font-size: 18px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.boy-info h3 small {
	font-size: 10px;
	margin-left: 2px;
	color: #ccc;
}
.period {
	flex: 0 0 auto;
	margin: 0;
	color: #ffd45a;
	font: 900 13px/1.3 Arial,sans-serif;
	white-space: nowrap;
}
.period i {
	padding: 0 2px;
	color: #d86b0b;
	font-style: normal;
}
.empty-state{padding:55px 20px;text-align:center;border:1px solid var(--gold);border-radius:16px;background:#fff}.bottom-back{display:flex;align-items:center;justify-content:center;gap:18px;width:min(560px,100%);margin:52px auto 22px;padding:15px 22px;border-radius:999px;color:#fff;background:linear-gradient(100deg,#8e3b12,#c87518);box-shadow:0 5px 0 #61260d;text-decoration:none;font-weight:900}.bottom-back span{font-size:22px}.page-note{text-align:center;color:var(--muted);font-size:11px}
footer{padding:28px 20px;text-align:center;color:#e7d0b7;background:#1f0d05;font-size:10px;letter-spacing:.12em}
@media(max-width:900px){.boy-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.shuffle-hero{min-height:540px}.hero-back{left:12px;top:12px}.shuffle-hero__inner{padding-top:70px}.vote-bonus{flex-direction:column;gap:2px;border-radius:16px}#page{padding-top:48px}.schedule-intro{margin-bottom:32px}.area-nav{gap:7px;padding:10px}.area-nav a{min-width:0;padding:8px 12px 8px 26px;font-size:11px}.boy-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:11px}.area-block{margin-bottom:28px;border-radius:13px}.area-heading{display:flex;align-items:center;padding:14px 16px}.area-heading span{display:none}.area-heading h2{font-size:21px}.area-heading p{font-size:10px}.boy-info{min-height:43px;padding:7px 8px}.boy-info h3{font-size:16px}.period{font-size:11px}}
@media(max-width:380px){#page{width:min(100% - 20px,1180px)}.boy-grid{gap:8px;padding:8px}.boy-photo span{font-size:9px}.boy-info{padding:6px}.boy-info h3{font-size:15px}.period{font-size:10px}.area-nav a{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.boy-card,.boy-photo img,.area-nav a{transition:none}}