/* layout sp
--------------------------------------------------*/
@media screen and (max-width: 640px) {

.op_anime01 {
	position: relative;
	width: 100%;
	height: 100%;
	display:block;
}


/* 初期：画面中央 */
.op_logo01_set_define{
	position:absolute;
	top:40vw;
	left:50%;
	width:100vw;
	height:auto;
	margin-left:-50vw; /* 幅の半分 */
	margin-top:0;    /* 高さの半分 */
	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:60vw;
	width:100vw;
	margin-left:-50vw; /* 幅の半分 */
	transform:none;
	opacity:1;
}

.op_logo01_define{
	position:relative;
	width:33vw;
	height:auto;
	margin:0 auto 4vw;
}

.op_text01_define{
	position:relative;
	width:60vw;
	height:auto;
	margin:0 auto 3vw;
}

.op_text02_define{
	position:relative;
	width:50vw;
	height:auto;
	margin:0 auto 0;
}








.op_logo01_set{
	position: absolute;
	top:60vw;
	left:50%;
	height:auto;
	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:20.5vw;
	margin-left:0;
	transform: scale(0.8);
  }
}



.op_logo01{
	position:absolute;
	width:50vw;
	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:40vw;
	opacity:0;
	width:80vw;
}

.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:50vw;
	opacity:0;
	width:58vw;
}

.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:-10vw;
	opacity:1;
  }
}

@keyframes op_logo01_move02 {
  0% {
    transform: scale(0.8);
	margin-top:-10vw;
		opacity:1;
  }
  100% {
    transform: scale(0.8);
	margin-top:-20vw;
	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:40vw;
		opacity:1;
	}
	100% {
		margin-top:30vw;
		opacity:1;
	}
}
	




.bl_parts{
	position:absolute;
	top:-50vw;
	left:50%;
	margin-left:24.5vw;
	transition-duration:2s;
	z-index:1;
	width:10vw;
	height:auto;
}

.bl_parts02{
	position:absolute;
	top:-150vw;
	left:50%;
	margin-left:10vw;
	transition-duration:2s;
	width:10vw;
	height:auto;
}

.bl_parts03{
	position:absolute;
	top:-100vw;
	left:50%;
	margin-left:32vw;
	transition-duration:2s;
	width:10vw;
	height:auto;
}


.bl_parts.active{
	top:34vw;
}


.bl_parts02.active{
	top:58vw;
}

.bl_parts03.active{
	top:48vw;
}


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


.bl_parts.active02{
	top:38vw;
}

.bl02{
	position:absolute;
	top:21vw;
	left:50%;
	margin-left:2vw;

	opacity:0;
	transform:scale(0.9);

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

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

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

.bl03{
	position:absolute;
	top:14vw;
	left:50%;
	margin-left:-14vw;

	opacity:0;

	transition:opacity 1.6s ease-out;

	width:87vw;
	height:auto;
}

.bl03.active{
	opacity:1;
}

.block_set{
	opacity:0;
}


.number{
	position:absolute;
	left:50%;
	top:35.3vw;
	margin-left:7.5vw;
	margin-top:-70vw;
	z-index:2;
	transition: margin-top 2.6s ease;
	width:30.5vw;
	height:auto;
	display:block;
}

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

.bl01_set{
	position:absolute;
	left:50%;
	top:5vw;
	margin-left:-37.5vw;
}

.bl02_set{
	position:absolute;
	left:50%;
	top:120vw;
	margin-left:20vw;
}

.bl03_set{
	position:absolute;
	left:50%;
	top:38vw;
	margin-left:-42vw;
}

.bl04_set{
	position:absolute;
	left:50%;
	top:108vw;
	margin-left:40vw;
	z-index:1;
}

.bl05_set{
	position:absolute;
	left:50%;
	top:62vw;
	margin-left:-45vw;
}

.bl06_set{
	position:absolute;
	left:50%;
	top:-10vw;
	margin-left:24vw;
}

.bl07_set{
	position: absolute;
	left:50%;
	top:5vw;
	margin-left:46vw;
}

.bl08_set{
	position:absolute;
	left:50%;
	top:82vw;
	margin-left:-46vw;
}

.bl09_set{
	position:absolute;
	left:50%;
	top:68vw;
	margin-left:-37.5vw;
}

.bl10_set{
	position:absolute;
	left:50%;
	top:100vw;
	margin-left:-65vw;
}

.bl11_set{
	position:absolute;
	left:50%;
	top:128vw;
	margin-left:-32vw;
}

.bl12_set{
	position:absolute;
	left:50%;
	top:100vw;
	margin-left:38vw;
}

.bl13_set{
	position:absolute;
	left:50%;
	top:150vw;
	margin-left:16vw;
}




.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:14vw;
	height:14vw;
	position:absolute;
	top:112vw;
	left:50%;
	margin-left:-7vw;

	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:14vw;
	left:50%;
	margin-left:-14vw;
	width:87vw;
	height:79.5vw;
	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:16.5vw;
	height:auto;
}

.bl02_set img{
	width:10vw;
	height:auto;
}

.bl03_set img{
	width:10vw;
	height:auto;
}

.bl04_set img{
	width:10vw;
	height:auto;
}

.bl05_set img{
	width:10vw;
	height:auto;
}

.bl06_set img{
	width:10vw;
	height:auto;
}

.bl07_set img{
	width:10vw;
	height:auto;
}

.bl08_set img{
	width:6vw;
	height:auto;
}

.bl09_set img{
	width:10vw;
	height:auto;
}

.bl10_set img{
	width:36.8vw;
	height:auto;
}

.bl11_set img{
	width:7vw;
	height:auto;
}

.bl12_set img{
	width:10vw;
	height:auto;
}

.bl13_set img{
	width:17vw;
	height:auto;
}


}