/* ================================================== */
/* ==================== Animation ==================== */
/* ================================================== */
:root {
	--ts_set05: all 0.5s ease-out 0s;
	--ts_set10: all 1s ease-out 0s;
}
.active {
	opacity: 1 !important;
	transform: unset;
}
@keyframes move_x{
	0%{
		opacity: 0;
		transform:translateX(4rem);}
	100%{
		opacity: 1;
		transform:translateX(0);}
}
@keyframes move_y{
	0%{
		opacity: 0;
		transform:translateY(4rem);}
	100%{
		opacity: 1;
		transform:translateY(0);}
}




#kv_set{
	opacity: 0;
}

#photo_set span{
	transition: var(--ts_set05);
	opacity: 0;
}
#photo_set.active span{
	opacity: 1;
}


#photo_set span:nth-of-type(2n){
	transition: var(--ts_set05);
	translate:100px 0;
	scale: 1.25;
}
#photo_set span:nth-of-type(2n-1){
	transition: var(--ts_set05);
	translate:-100px 0;
	scale: 1.25;
}
#photo_set.active span:nth-of-type(2n){
	translate:0 0;
	scale: 1;
}
#photo_set.active span:nth-of-type(2n-1){
	translate:0 0;
	scale: 1;
}
#photo_set span::after{
	transition: var(--ts_set05);
	transition-delay: 1.5s;
	opacity: 0;
}
#photo_set.active span::after{
	opacity: 1;
}
#photo_set span:nth-of-type(1){
	transition-delay: 0s;
}
#photo_set span:nth-of-type(2){
	transition-delay: 0.2s;
}
#photo_set span:nth-of-type(3){
	transition-delay: 0.4s;
}
#photo_set span:nth-of-type(4){
	transition-delay: 0.8s;
}
#photo_set span:nth-of-type(5){
	transition-delay: 1s;
}

#photo_set div:first-of-type::before ,
#photo_set div:first-of-type::after ,
#photo_set div:last-of-type::before,
#photo_set div:last-of-type::after {
	transition: var(--ts_set05);
	transform: scaleY(0);
}
#photo_set.active div:first-of-type::before ,
#photo_set.active div:first-of-type::after ,
#photo_set.active div:last-of-type::before,
#photo_set.active div:last-of-type::after {
	transform: unset;
}



#introduction > * {
	opacity: 0;
}
#introduction h3 {
	transition: var(--ts_set05);
	transition-delay: 0.5s;
	clip-path: inset(0 100% 0 0);
	opacity: 1;
}
#introduction h3.active {
	clip-path: inset(0 0 0 0);
}

#introduction div p:first-of-type ,
#introduction div p:last-of-type {
	transition: var(--ts_set05);
	transition-delay: 0.75s;
	clip-path: inset(0 100% 0 0);
}
#introduction div.active p:first-of-type ,
#introduction div.active p:last-of-type {
	clip-path: inset(0 0 0 0);
}

#introduction div::before {
	transition: var(--ts_set10);
	transition-delay: 1.5s;
	clip-path: inset(0 0 100% 0);
}
#introduction div::after {
	transition: var(--ts_set10);
	transition-delay: 1.5s;
	clip-path: inset(100% 0 0 0);
}
#introduction div.active::before {
	clip-path: inset(0 0 0 0);
}
#introduction div.active::after {
	clip-path: inset(0 0 0 0);
}

#project > * {
	opacity: 0;
	transition: var(--ts_set10);
}
#project > p {
	transform: translateX(50px);
}
#project > p.active {
	transform: translateX(0);
}

.sm {
	opacity: 0;
	transition: var(--ts_set05);
	transform: translateY(50px);
}
.sm.active {
	transform: translateY(0px);
}

#project h2 img:first-of-type {
	transition: var(--ts_set05);
	transform: translateY(100px);
	opacity: 0;
}
#project h2 img:last-of-type {
	transition: var(--ts_set05);
	transition-delay: 0.2s;
	transform: translateY(100px);
	opacity: 0;
}
#project h2.active img:first-of-type {
	transform: unset;
	opacity: 1;
}
#project h2.active img:last-of-type {
	transform: unset;
	opacity: 1;
}
#project li p {
	transition: var(--ts_set05);
	transition-delay: 0.25s;
	opacity: 0;
	transform: translateX(50px);
}
#project li h4 {
	transition: var(--ts_set05);
	transition-delay: 0.5s;
	opacity: 0;
	transform: translateX(50px);
}
#project li.active p {
	opacity: 1;
	transform: unset;
}
#project li.active h4 {
	opacity: 1;
	transform: unset;
}

#history h3 {
	opacity: 0;
	transition: var(--ts_set10);
	transform: translateX(100px) rotate(0deg);
}
.splide {
	opacity: 0;
	transition: var(--ts_set10);
	transition-delay: 0.5s;
	transform: translateX(200px);
}
#history h3.active {
	transform: translateX(0px) rotate(-5deg);
}
.splide.active {
	transform: unset;
}


#particle_box {
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: hidden;
	z-index: -10;
}


/* ================================================== */
/* ==================== 900px以上 ==================== */
/* ================================================== */
@media (min-width: 980px) {

#kv_set img {
	border-width: 0px;
	box-shadow: 0px 0px 0px #00000020;
}
#kv_set.active img {
	border-width: 8px;
	box-shadow: 0px 5px 10px #00000020;
}

#photo_set span:nth-of-type(1),
#photo_set span:nth-of-type(6){
	transition-delay: 0s;
}
#photo_set span:nth-of-type(2),
#photo_set span:nth-of-type(7){
	transition-delay: 0.2s;
}
#photo_set span:nth-of-type(3),
#photo_set span:nth-of-type(8){
	transition-delay: 0.4s;
}
#photo_set span:nth-of-type(4),
#photo_set span:nth-of-type(9){
	transition-delay: 0.6s;
}
#photo_set span:nth-of-type(5),
#photo_set span:nth-of-type(10){
	transition-delay: 0.8s;
}



}