.op_anime01 {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;   /* ★要素を縦並びにする */
	justify-content: center; /* 左右（主軸）の中央寄せ */
	align-items: center;     /* 上下（交差軸）の中央寄せ */
	z-index:1;
}

/* 初期：画面中央 */
.op_logo01_set_define{
	position:absolute;
	top:50%;
	left:50%;
	width:571px;
	height:320px;
	margin-left:-285.5px; /* 幅の半分 */
	margin-top:-160px;    /* 高さの半分 */
	opacity:0;
	transition:
		opacity 0.6s ease,
		top 0.6s ease,
		left 0.6s ease,
		margin-left 0.6s ease
}

/* フェードイン */
.op_logo01_set_define.center{
	transform: scale(1);
	animation: op_poyonInitial 0.6s ease-out forwards;
	opacity:0;
}

/* 最終位置 */
.op_logo01_set_define.end{
	top:calc(150px + 160px);
	left:50%;
	margin-left:-565px;
	transform:none;
	opacity:1;
}

.op_logo01_define{
	position:relative;
	width:220px;
	height:auto;
	margin:0 auto 25px;
}

.op_text01_define{
	position:relative;
	width:570px;
	height:auto;
	margin:0 auto 30px;
}

.op_text02_define{
	position:relative;
	width:414px;
	height:auto;
	margin:0 auto 0;
}





.op_logo01_set{
	position: absolute;
	top:200px;
	left:50%;
	height:320px;
	display: flex;
	flex-direction: column;   /* ★要素を縦並びにする */
	justify-content: center; /* 左右（主軸）の中央寄せ */
	align-items: center;     /* 上下（交差軸）の中央寄せ */
	z-index:1;
}

.op_logo01_set.active{
	animation: op_logo01_move_fix 0.8s cubic-bezier(.22,1,.36,1) forwards;
}


@keyframes op_logo01_move_fix {
  0% {
	margin-top:0px;
	margin-left:0px;
  }
  100% {
	margin-top:-50px;
	margin-left:-280px;
  }
}



.op_logo01{
	position:absolute;
	width:272px;
	height:auto;
	display:block;
	opacity:0;
}

.start {
	transform: scale(1);
	animation: op_poyonInitial 0.8s ease-out forwards;
	opacity:0;
}

.start02{
	animation: op_logo01_move 0.4s ease forwards;
}

.start03{
	animation: op_logo01_move02 0.4s ease  forwards;
}



.op_text01{
	position:absolute;
	margin-top:210px;
	opacity:0;
	width:570px;
}

.op_text01 img{
	width:100%;
	height:auto;
	display:block;
}

.op_text01.active{
	animation: fadeIn 0.4s ease forwards;
}


.op_text01.active02{
	animation: fadeIn02 0.4s ease forwards;
}


.op_text02{
	position:absolute;
	margin-top:290px;
	opacity:0;
	width:414px;
}

.op_text02 img{
	width:100%;
	height:auto;
	display:block;
}

.op_text02.active{
	animation: fadeIn 0.4s ease forwards;
}


@keyframes op_logo01_move {
  0% {
    transform: scale(1);
		opacity:1;
  }
  100% {
    transform: scale(0.8);
    margin-top: -80px;
	opacity:1;
  }
}

@keyframes op_logo01_move02 {
  0% {
    transform: scale(0.8);
    margin-top: -80px;
		opacity:1;
  }
  100% {
    transform: scale(0.8);
    margin-top: -140px;
	opacity:1;
  }
}


@keyframes op_poyonInitial {
	0% {
		transform: scale(1.5);
		opacity:0;
	}
	100% {
		transform: scale(1);
		opacity:1;
	}
}


@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}


@keyframes fadeIn02 {
	0% {
		margin-top: 210px;
		opacity:1;
	}
	100% {
		margin-top: 150px;
		opacity:1;
	}
}






.bl01{
	position:absolute;
	top:390px;
	left:50%;
	margin-left:284px;
	opacity:0;
	transition-duration:0.6s;
	transition-timing-function:cubic-bezier(.22,1,.36,1);
	transform: scale(0.8);
}


.bl01.active{
	opacity:1;
	transform: scale(1);
}

.bl01.none{
	opacity:0;
	transition-duration:0.2s;
	transform: scale(0.8);
}

.bl_parts{
	position:absolute;
	top:-200px;
	left:50%;
	margin-left:280px;
	transition-duration:2s;
	z-index:1;
	width:98px;
	height:auto;
}

.bl_parts02{
	position:absolute;
	top:-400px;
	left:50%;
	margin-left:180px;
	transition-duration:2s;
	width:98px;
	height:auto;
}

.bl_parts03{
	position:absolute;
	top:-300px;
	left:50%;
	margin-left:376px;
	transition-duration:2s;
	width:98px;
	height:auto;
}


.bl_parts.active{
	top:335px;
}


.bl_parts02.active{
	top:435px;
}

.bl_parts03.active{
	top:345px;
}


.bl_parts.none,
.bl_parts02.none,
.bl_parts03.none{
	top:-200px;
	transition-duration:0s;
}


.bl_parts.active02{
	top:316px;
}

.bl02{
	position:absolute;
	top:177px;
	left:50%;
	margin-left:88px;

	opacity:0;
	transform:scale(0.9);

	transition:
	opacity 0.8s ease-out,
	transform 1.2s cubic-bezier(.22,1,.36,1);
	width:482px;
	height:auto;
}

.bl02.active{
	opacity:1;
	transform:scale(1);
}

.bl02.none{
	opacity:0;
	transform:scale(1);
}

.bl03{
	position:absolute;
	top:115px;
	left:50%;
	margin-left:-55px;

	opacity:0;

	transition:opacity 1.6s ease-out;

	width:769px;
	height:auto;
}

.bl03.active{
	opacity:1;
}

.block_set{
	opacity:0;
}


.number{
	position:absolute;
	left:50%;
	top:301px;
	margin-left:137px;
	margin-top:-620px;
	z-index:2;
	transition: margin-top 2.6s ease;
	width:265px;
	height:auto;
	display:block;
}

.number.active{
	margin-top:0;
}

.bl01_set{
	position:absolute;
	left:50%;
	top:117px;
	margin-left:-654px;
}

.bl02_set{
	position:absolute;
	left:50%;
	top:580px;
	margin-left:-561px;
}

.bl03_set{
	position:absolute;
	left:50%;
	top:816px;
	margin-left:620px;
}

.bl04_set{
	position:absolute;
	left:50%;
	top:555px;
	margin-left:-346px;
}

.bl05_set{
	position:absolute;
	left:50%;
	top:502px;
	margin-left:-222px;
}

.bl06_set{
	position:absolute;
	left:50%;
	top:32px;
	margin-left:47px;
}

.bl07_set{
	position: absolute;
	left: 50%;
	top: -22px;
	margin-left: 331px;
}

.bl08_set{
	position:absolute;
	left:50%;
	top:181px;
	margin-left:635px;
}

.bl09_set{
	position:absolute;
	left:50%;
	top:542px;
	margin-left:-152px;
}

.bl10_set{
	position:absolute;
	left:50%;
	top:702px;
	margin-left:-900px;
}

.bl11_set{
	position:absolute;
	left:50%;
	top:800px;
	margin-left:-470px;
}

.bl12_set{
	position:absolute;
	left:50%;
	top:965px;
	margin-left:255px;
}

.bl13_set{
	position:absolute;
	left:50%;
	top:880px;
	margin-left:490px;
}




.bl01_set img,
.bl02_set img,
.bl03_set img,
.bl04_set img,
.bl05_set img,
.bl06_set img,
.bl07_set img,
.bl08_set img,
.bl09_set img,
.bl10_set img,
.bl11_set img,
.bl12_set img,
.bl13_set img{
	opacity:0;
	filter:blur(20px);
}



.bl01_set.floating{ animation: floating01 14.2s ease-in-out infinite; }
.bl02_set.floating{ animation: floating02 17.0s ease-in-out infinite; }
.bl03_set.floating{ animation: floating03 13.5s ease-in-out infinite; }
.bl04_set.floating{ animation: floating04 18.8s ease-in-out infinite; }
.bl05_set.floating{ animation: floating05 15.7s ease-in-out infinite; }
.bl06_set.floating{ animation: floating06 12.3s ease-in-out infinite; }
.bl07_set.floating{ animation: floating07 16.1s ease-in-out infinite; }
.bl08_set.floating{ animation: floating08 19.9s ease-in-out infinite; }
.bl09_set.floating{ animation: floating09 16.1s ease-in-out infinite; }
.bl10_set.floating{ animation: floating10 12.3s ease-in-out infinite; }
.bl11_set.floating{ animation: floating11 15.7s ease-in-out infinite; }
.bl12_set.floating{ animation: floating12 18.8s ease-in-out infinite; }
.bl13_set.floating{ animation: floating13 13.5s ease-in-out infinite; }

@keyframes floating01{
	0%{   transform:translateY(0px); }
	20%{  transform:translateY(-14px); }
	45%{  transform:translateY(6px); }
	70%{  transform:translateY(-9px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating02{
	0%{   transform:translateY(0px); }
	30%{  transform:translateY(-8px); }
	55%{  transform:translateY(10px); }
	80%{  transform:translateY(-5px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating03{
	0%{   transform:translateY(0px); }
	25%{  transform:translateY(-18px); }
	50%{  transform:translateY(4px); }
	75%{  transform:translateY(-11px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating04{
	0%{   transform:translateY(0px); }
	35%{  transform:translateY(-6px); }
	60%{  transform:translateY(12px); }
	85%{  transform:translateY(-8px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating05{
	0%{   transform:translateY(0px); }
	20%{  transform:translateY(-20px); }
	50%{  transform:translateY(5px); }
	75%{  transform:translateY(-10px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating06{
	0%{   transform:translateY(0px); }
	40%{  transform:translateY(-7px); }
	65%{  transform:translateY(9px); }
	85%{  transform:translateY(-4px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating07{
	0%{   transform:translateY(0px); }
	30%{  transform:translateY(-15px); }
	55%{  transform:translateY(7px); }
	80%{  transform:translateY(-12px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating08{
	0%{   transform:translateY(0px); }
	25%{  transform:translateY(-10px); }
	50%{  transform:translateY(8px); }
	78%{  transform:translateY(-6px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating09{
	0%{   transform:translateY(0px); }
	30%{  transform:translateY(-15px); }
	55%{  transform:translateY(7px); }
	80%{  transform:translateY(-12px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating10{
	0%{   transform:translateY(0px); }
	40%{  transform:translateY(-7px); }
	65%{  transform:translateY(9px); }
	85%{  transform:translateY(-4px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating11{
	0%{   transform:translateY(0px); }
	20%{  transform:translateY(-20px); }
	50%{  transform:translateY(5px); }
	75%{  transform:translateY(-10px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating12{
	0%{   transform:translateY(0px); }
	35%{  transform:translateY(-6px); }
	60%{  transform:translateY(12px); }
	85%{  transform:translateY(-8px); }
	100%{ transform:translateY(0px); }
}

@keyframes floating13{
	0%{   transform:translateY(0px); }
	25%{  transform:translateY(-18px); }
	50%{  transform:translateY(4px); }
	75%{  transform:translateY(-11px); }
	100%{ transform:translateY(0px); }
}



#cube3d{
	width:120px;
	height:120px;
	position:absolute;
	top:640px;
	left:50%;
	margin-left:-60px;

	opacity:0;
	transform:translateY(20px);
}

.line_set{
	opacity:0;
	transition-duration:0.2s;
}

.line_set.is-active{
	opacity:1;
}

#cube3d.is-active{
	animation:cubeFadeIn 1.2s ease forwards;
}


@keyframes cubeFadeIn{

	0%{
		opacity:0;
		transform:translateY(20px);
	}

	100%{
		opacity:1;
		transform:translateY(0px);
	}

}

#cube3d canvas{
	width:100% !important;
	height:100% !important;
	display:block;
}



.block_set{
	position:absolute;
	top:114px;
	left:50%;
	margin-left:-55px;
	width:769px;
	height:701px;
	overflow:hidden;
}

.block_set img{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	object-fit:cover;
}

.gray{
	filter:grayscale(100%);
	opacity:0.4;
}

.color{
	--r:0px;

	-webkit-mask-image:
		radial-gradient(
			circle at calc(50% - 100px) 50%,
			rgba(0,0,0,1) 0,
			rgba(0,0,0,1) calc(var(--r) - 150px),
			rgba(0,0,0,0) var(--r)
		);

	mask-image:
		radial-gradient(
			circle at calc(50% - 100px) 50%,
			rgba(0,0,0,1) 0,
			rgba(0,0,0,1) calc(var(--r) - 150px),
			rgba(0,0,0,0) var(--r)
		);
}



/* ブロックサイズ */
.bl01_set img{
	width:145px;
	height:auto;
}

.bl02_set img{
	width:96px;
	height:auto;
}

.bl03_set img{
	width:96px;
	height:auto;
}

.bl04_set img{
	width:96px;
	height:auto;
}

.bl05_set img{
	width:96px;
	height:auto;
}

.bl06_set img{
	width:96px;
	height:auto;
}

.bl07_set img{
	width:96px;
	height:auto;
}

.bl08_set img{
	width:96px;
	height:auto;
}

.bl09_set img{
	width:96px;
	height:auto;
}

.bl10_set img{
	width:347px;
	height:auto;
}

.bl11_set img{
	width:54px;
	height:auto;
}

.bl12_set img{
	width:54px;
	height:auto;
}

.bl13_set img{
	width:164px;
	height:auto;
}