@charset "utf-8";

/*------------------------------*/
/* ページ固有設定*/
/*------------------------------*/

/*------------------------------*/
/* SCROLL 枠 */
.scroll_frame {
	position:absolute;
	width:50px;
	left:50%;
	transform: translateX(-50%);
	color:#009ae3;
	font-size:12px;
	background-image: url('/image/vertical_line_no.png');
	background-image: url('/image/vertical_line.webp');
	background-position: center;
	background-repeat: repeat-y;
}

/* 針 */
.needle_core {
	position: absolute;
	top:0p;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(50%, -50%);
	font-size:20px;
	transition: 0.3s;
	animation: needleMove 2.5s linear infinite;
}

/* アニメーション定義 */
@keyframes needleMove {
	0% { top: 0px; }
	100% { top: 100%; }
}

/*------------------------------*/
/* サブタイトル帯 */
.subtitle_box {
  background-color: #009ae3;
  padding: 10px;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
	color:#ffffff;
}

/*------------------------------*/
/* グリッドアニメーション */
.pixel_art_frame {
	position: relative;
}
.pixel_overlay {
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display: grid;
	grid-template-columns: repeat(7, 1fr); /* 10列 */
	grid-template-rows: repeat(7, 1fr); /* 10行 */
}
.pixel_art_sel {
	overflow: hidden;
}
.pixel_art_sel_inner {
	background-color:rgba(255,255,255,1);
	width:100%;
	height:100%;
}

.pixel_art_animation_l {
	animation: animation_l 0.5s linear forwards; /* 時間指定 */
}
@keyframes animation_l {
	100% {
		transform: translateX(calc(-100% - 1px));
		-webkit-transform: translateX(calc(-100% - 1px));
	}
}

.pixel_art_animation_r {
	animation: animation_r 0.5s linear forwards; /* 時間指定 */
}
@keyframes animation_r {
	100% {
		transform: translateX(calc(100% + 1px));
		-webkit-transform: translateX(calc(100% + 1px));
	}
}