:root {
  --retro-ivory: #f4edd8;
  --retro-ivory-dark: #dfd5b6;
}

#id_imgK2026 {
	//position:relative; 
	display:flex; 
	justify-content:center; 
	align-items:center; 
	width:100%; 
	height:100%; 
	border-radius:30px; 
	background:url(../images/kenminsai_2026/img_kenminsai2026_1.jpg) no-repeat center center; 
	background-size:100% 100%;
}
#id_imgRunner {
	//margin-top:138px; 
	margin-left:5%; 
	width:69%;
	height:186px;
	opacity:0.0;
	transform-origin:center bottom;
	//animation: zooming 7s ease-in 2s 1 normal forwards, vanishing 2s ease-in 10s 1 normal forwards;
}
.fade-in {
	animation: zooming 7s ease-in 2s 1 normal forwards;
}
.fade-out {
	animation: vanishing 2s ease-in 1 normal forwards;
}

#id_goaltape {
	position:absolute; 
	left:0; 
	top:250px; 
	width:100%;
	opacity:0.0;
	//animation: disp-goal 2.8s ease-in 6.2s 1 normal forwards, vanishing-goal 2s ease-in 10s 1 normal forwards;
}
.fade-in-goal {
	animation: disp-goal 1.5s ease-in 7.5s 1 normal forwards;
}
.fade-out-goal {
	animation: vanishing-goal 1s ease-in 1 normal forwards;
}

#id_imgRunner2 {
	position:absolute; 
	left:0; 
	top:150px; 
	width:100%;
	height:200px;
	opacity:0.0;
	//animation: dispRunner 5s ease-in 8.3s 1 normal forwards;
}
.fade-in-toprunner {
	animation: dispRunner 4.3s ease-in 1.2s 1 normal forwards;
}

#id_crackerbtn {
	padding: 12px 30px;
	font-size: 15px;
	background-color: #ff3366;
	color: white;
	border: none;
	border-radius: 30px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	position:relative; 
	display:block; 
	margin-top: 5px;
	margin-left:auto;
	margin-right:auto;
}
#id_crackerCanvas {
	position:absolute; 
	left:0; 
	top:0;
	//border:3px solid #ff0000;
}
@keyframes zooming {
	0% {  transform:scale(0.2) translateY(0px); opacity:0.3; }
	30% { transform:scale(0.3) translateY(50px); opacity:0.8; }
	100%{ transform:scale(0.7) translateY(80px); opacity:1.0; }
}
@keyframes vanishing {
	0% {  transform:scale(0.7) translateY(80px); opacity:1.0; }
	100%{ transform:scale(0.7) translateY(80px); opacity:0.0; }
}
@keyframes disp-goal {
	0% {  opacity:0.0; }
	80% {  opacity:0.5; }
	100%{ opacity:1.0; }
}
@keyframes vanishing-goal {
	0% {  opacity:1.0; }
	100%{ opacity:0.0; }
}
@keyframes dispRunner {
	0% {  opacity:0.0; }
	100%{ opacity:1.0; }
}

/* ボタンパネル */
.button-panel {
  position: absolute;
  top: 120px;
  //left: 20%;
  //width:50%
  //transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3%;
  z-index: 10;
  opacity:0.0;
  border:1px solid #808080;
  border-radius:10px;
  background-color:#d3d3d3;
  padding:2px 6px 5px 5px;
  //animation: dispBotton 2.8s ease-in 6.2s 1 normal forwards;
}
@keyframes dispBotton {
	0% {  opacity:0.0; }
	80% {  opacity:0.5; }
	100%{ opacity:1.0; }
}
.fan-btn {
  width: 34px;
  height: 24px;
  border: none;
  border-radius: 6px;
  font-size: 20px;
  font-weight: bold;
  color: #4a3c2c;
  cursor: pointer;
  background: linear-gradient(to bottom, #ffffff 0%, var(--retro-ivory) 100%);
  box-shadow: 
    0 4px 0 var(--retro-ivory-dark),
    0 5px 6px rgba(0,0,0,0.3);
  transition: all 0.1s ease;
}
.fan-btn.active {
  //background: linear-gradient(to bottom, var(--retro-ivory-dark) 0%, #c5ba99 100%);
  background: linear-gradient(to bottom, var(--retro-ivory-dark) 0%, #32cd32 100%);
  box-shadow: 
    0 0px 0 var(--retro-ivory-dark),
    inset 0 3px 5px rgba(0,0,0,0.3);
  transform: translateY(4px);
  color: #222;
}
.fade-out-button-panel {
	animation: vanishing-button-panel 7.0s ease-in 6.0s 1 normal forwards;
}
@keyframes vanishing-button-panel {
	0% {  opacity:1.0; }
	70% {  opacity:1.0; }
	100%{ opacity:0.0; }
}

/* 結果パネル */
#id_result {
  position: absolute;
  top: 20px;
  //left: 20%;
  font-size:180%;
  font-weight:bold;
  border:1px solid #808080;
  border-radius:10px;
  background-color:#d3d3d3;
  padding:5px 13px 4px 13px;
  color:#4169e1;
  font-family:'Hachi Maru Pop', cursive;
  line-height:1.2;
  text-align:center;
  opacity:0.0;
}
.fade-in-out-result {
	animation: resultcomment 8.0s ease-in 5.0s 1 normal forwards;
}
@keyframes resultcomment {
	0% {  opacity:0.0; }
	22%{ opacity:1.0; }
	80%{ opacity:1.0; }
	100%{ opacity:0.0; }
}

#id_restart {
	opacity:0.0; 
	position: absolute;
	top: 317px;
	right: 5%;
	background:#00ff00;
	z-index: 10;
}
.fade-in-restart {
	animation: disprestart 1.0s ease-in 11.5s 1 normal forwards;
}
@keyframes disprestart {
	0% {  opacity:0.0; }
	100%{ opacity:1.0; }
}