@charset "utf-8";
/* CSS Document */
.img-frame{
   position: relative;
   width: 100%;
   height: 90vh;
   overflow: hidden;
   margin: 0 auto;
}
.img-01, .img-02, .img-03, .img-04, .img-05, .img-06, .img-07{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('../image/toppage1.jpg');
   animation: slide-animation-01 48s infinite;
}
.img-02{
   background-image: url('../image/toppage4.jpg');
   animation: slide-animation-02 48s infinite;
}
.img-03{
   background-image: url('../image/toppage2.jpg');
   animation: slide-animation-03 48s infinite;
}
.img-04{
   background-image: url('../image/toppage5.jpg');
   animation: slide-animation-04 48s infinite;
}
.img-05{
   background-image: url('../image/toppage3.jpg');
   animation: slide-animation-05 48s infinite;
}
.img-06{
   background-image: url('../image/toppage6.jpg');
   animation: slide-animation-06 48s infinite;
}
.img-07{
   background-image: url('../image/toppage1.jpg');
   animation: slide-animation-07 48s infinite;
}
.scroll-section {
	position: relative;
	height: 500vh; /* ← スクロールの長さでスピード調整 */
}

.pinned {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.image-track {
	display: flex;
	transition: transform 0.1s linear;
}

.image-track img {
	width: calc((100vh/10)*20);
	height: 100vh;
	object-fit: cover;
	flex-shrink: 0;
}


@keyframes slide-animation-01 {
	0% {opacity: 1;transform: scale(1.1);}
	16% {opacity: 0;transform: scale(1.2);}
	32% {opacity: 0;}
	48% {opacity: 0;}
	64% {opacity: 0;}
	80% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide-animation-02 {
	0% {opacity: 0;transform: scale(1.2);}
	16% {opacity: 1;transform: scale(1.1);}
	32% {opacity: 0;transform: scale(1.0);}
	48% {opacity: 0;}
	64% {opacity: 0;}
	80% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide-animation-03 {
	0% {opacity: 0;}
	16% {opacity: 0;transform: scale(1.0);}
	32% {opacity: 1;transform: scale(1.1);}
	48% {opacity: 0;transform: scale(1.2);}
	64% {opacity: 0;}
	80% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide-animation-04 {
	0% {opacity: 0;}
	16% {opacity: 0;}
	32% {opacity: 0;transform: scale(1.2);}
	48% {opacity: 1;transform: scale(1.1);}
	64% {opacity: 0;transform: scale(1.0);}
	80% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide-animation-05 {
	0% {opacity: 0;}
	16% {opacity: 0;}
	32% {opacity: 0;}
	48% {opacity: 0;transform: scale(1.1);}
	64% {opacity: 1;transform: scale(1.0);}
	80% {opacity: 0;transform: scale(1.2);}
	100% {opacity: 0;}
}
@keyframes slide-animation-06 {
	0% {opacity: 0;}
	16% {opacity: 0;}
	32% {opacity: 0;}
	48% {opacity: 0;}
	64% {opacity: 0;transform: scale(1.2);}
	80% {opacity: 1;transform: scale(1.1);}
	100% {opacity: 0;transform: scale(1.0);}
}
@keyframes slide-animation-07 {
	0% {opacity: 0;}
	16% {opacity: 0;}
	32% {opacity: 0;}
	48% {opacity: 0;}
	64% {opacity: 0;}
	80% {opacity: 0;transform: scale(1.0);}
	100% {opacity: 1;transform: scale(1.1);}
}
@media (max-width:1600px) {
	.img-frame {
		width: 100vw;
		height: calc((100vw / 16)*9)
	}
}