/* ===== カスタム ===== */

/* ========================================
//mvのスライド
=========================================== */
.swiper div { margin-top: 0; }
.swiper-wrapper { transition-timing-function: linear; }
.swiper-slide {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-slide figure {
	width: 100%;
	height: 100%;
}
.swiper-slide img {
	display: block;
	object-fit: cover;
    object-position: top;
	max-width: unset;
}
.autoSlider { padding-left: 100px;}

#index .mySwiper {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0;
}
#index .mySwiper .slide-02 figure img { object-position: 20vw; }

.carouselSlider .swiper-slide a:has(figure) { display: block;}

.mv .swiper-slide { background: var(--color-white); }
.carouselSlider * {margin-top: 0;}

@media (max-width: 720px) {
	#index .mySwiper .slide-02 figure img { object-position:12vw; }
}
@media (max-width: 520px) {
	#index .mySwiper .slide-01 figure img { object-position: -406px -100px;}
	#index .mySwiper .slide-02 figure img { object-position: -15vw; top: -20px;}
}


/* Animation */
@keyframes fade-in {
    0% {
		opacity:0;
	}
    100% {
		opacity:1;
	}
}


.order-in > * {
	transition: 1s;
}
.order-in-fast > * {
	transition: var(--transition);
}
:is(.order-in, .order-in-fast) > * {
	opacity:0;
	top:10px;
}
:is(.order-in, .order-in-fast) > *.visible {
	opacity:1;
	top:0;
}

.slide-in {
	transition: var(--transition);
	opacity:0;
}
.slide-in.slide-left {
	translate: -40px;
}
.slide-in.slide-left.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-right {
	translate: 40px;
}
.slide-in.slide-right.visible {
	translate: 0;
	opacity:1;
}
.slide-in.slide-up {
	transform: translateY(40px);
}
.slide-in.slide-up.visible {
	transform: translateY(0);
	opacity:1;
}
.slide-in.slide-down {
	transform: translateY(-40px);
}
.slide-in.slide-down.visible {
	transform: translateY(0);
	opacity:1;
}

.fade-in {
	opacity:0;
	transition: var(--transition);
}
.fade-in.visible {
	opacity:1;
}

.pop-in {
	opacity:0;
	transition: var(--transition);
}
.pop-in.visible {
	animation:pop-in 0.2s ease 0s forwards;
}
@keyframes pop-in {
	0% {
	  opacity: 0;
	  transform: scale(0.8);
	}
	100% {
	  opacity: 1;
	  transform: scale(1);
	}
}



/* Dialog */
dialog {
	position:fixed;
	inset: 0;
	/* top:50%; */
	/* left:50%; */
	/* translate: -50% -50%; */
	border:solid 1px var(--color-lightgray);
	border-radius:var(--radius);
	box-shadow:var(--shadow);
	min-width:400px;
	max-width:800px;
    max-height:80dvh;
    /* overflow-y: auto; */
	/* padding:var(--padding); */
	/* margin:0 !important; */
	margin: auto;
	z-index:10;
	/* zoom:1; */
}
dialog button.close {
    position:fixed;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    border-radius:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size:30px;
    background:var(--color-lightgray);
    color:var(--color-gray);
    border:none;
    cursor: pointer;
}

#nav-cover.is-dialog {
	background: rgba(0, 0, 0, 0.65); /* dialog 専用カラー */
}

/* Parallax */
.parallax {
	position:absolute;
}

@media (max-width:820px ){
    dialog {
        width:90vw;
		min-width:auto;
    }
}
@media (max-width: 768px) {
	.autoSlider { padding-inline: 170px;}
}
@media (max-width: 768px) {
	.autoSlider { padding-inline: 50px;}
}
@media (max-width:520px ){
    dialog {
        top:0;
        left:0;
        translate: 0 0;
        border:none;
        border-radius:0;
        box-shadow:none;
        max-height:none;
        width:100vw;
        height:100vh;
        z-index:20;
    }
}


/* scrolly */
.scrolly {
    --mask--top: 200px;
}
.scrolly__inner { position: relative; }
  
.scrolly__bg {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 0;
}
.scrolly__bg .bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    background-color: var(--main-color);
}

.scrolly[data-step="1"] .bg--1 { opacity: 1; }
.scrolly[data-step="2"] .bg--2 { opacity: 1; }
.scrolly[data-step="3"] .bg--3 { opacity: 1; }
.scrolly__mask {
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--mask--top);
	z-index: 2;
	pointer-events: none;
}
.scrolly__text {
	padding-block: var(--section-space);
	position: relative;
	z-index: 0;
}
.scene {
	padding-top: 100vh;
	padding-bottom: 30vh;
	position: relative;
}