/* ---------------------------------スクロールガイド
html
            <div class="scroll-guide">
                <a href="#main">
                    <p class="bodoni -bold">Scroll</p>
                    <div class="slider">
                        <span class="prgrsbar"></span>
                        <span class="ball"></span>
                    </div>
                </a>
            </div>

*/
.scroll-guide {
    position: absolute;
    left: 0;
    bottom: 64px;
    /* opacity: 0; */
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
    z-index: 10;
}

.scroll-guide p {
    font-size: 14px;
    letter-spacing: 0.1em;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.scroll-guide .slider {
    height: 60px;
    position: relative;
}

.scroll-guide .slider .prgrsbar {
    display: inline-block;
    margin-top: 20px;
    width: 1px;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 50%;
}

.scroll-guide .slider .ball {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    top: 24px;
    left: 44%;
    -webkit-animation: scroll_ball 1.4s infinite ease-in-out;
    animation: scroll_ball 1.4s infinite ease-in-out;
}

@-webkit-keyframes scroll_ball {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    60% {
        -webkit-transform: translateY(38px);
        transform: translateY(38px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(38px);
        transform: translateY(38px);
        opacity: 0;
    }
}

@keyframes scroll_ball {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    60% {
        -webkit-transform: translateY(38px);
        transform: translateY(38px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(38px);
        transform: translateY(38px);
        opacity: 0;
    }
}

/* ---------------------------------ページトップガイド
html
<div id="pagetop" class="pagetop show white" style="bottom: 110px;">
	<a href="#">
		<div class="slider"><span class="prgrsbar"></span><span class="ball"></span></div>
		<p class="garamond">Page top</p>
	</a>
</div>
*/
.pagetop {
    position: fixed;
    left: -5%;
    bottom: 50px;
    -webkit-transition: 0.6s ease opacity;
    transition: 0.6s ease opacity;
}

.pagetop a {
    color: black;
}

.pagetop .slider {
    height: 50px;
    position: relative;
}

.pagetop .slider .prgrsbar {
    background: black;
    display: inline-block;
    margin-top: 20px;
    width: 1px;
    height: 100%;
    position: absolute;
    top: -54px;
    left: 50%;
}

.pagetop .slider .ball {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: black;
    position: absolute;
    top: 5px;
    left: 45%;
    -webkit-animation: scroll_ball_rev 1.4s infinite ease-in-out;
    animation: scroll_ball_rev 1.4s infinite ease-in-out;
}

.pagetop p {
    font-size: 14px;
    letter-spacing: 0.1em;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    mix-blend-mode: difference;
}

@-webkit-keyframes scroll_ball_rev {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    60% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        opacity: 0;
    }
}

@keyframes scroll_ball_rev {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }

    60% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-34px);
        transform: translateY(-34px);
        opacity: 0;
    }
}

/* ---------------------------------ハンバーガー+SPナビゲーション
html（ハンバーガー）
            <div id="js-headerbtn" class="header_btn">
              <span></span>
              <span></span>
            </div>
html（ナビゲーション）
<nav id="js-headernav" class="sp-nav">
                    <ul>
                        <li>
                            <a href="#">HOME</a>
                        </li>
                        <li>
                            <a href="#">CONCEPT</a>
                        </li>
                        <li>
                            <a href="#">MENU</a>
                        </li>
                        <li>
                            <a href="#">INSTAGRAM</a>
                        </li>
                    </ul>
                </nav>
*/
.header_btn {
    display: none;
    width: 60px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 19;
    cursor: pointer;
}

@media screen and (width <=850px) {
    .header_btn {
        display: block;
    }
}

.header_btn span {
    width: 100%;
    height: 3px;
    background: var(--color-black);
    position: absolute;
    right: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.header_btn span:first-child {
    top: 35px;
}

.header_btn span:nth-child(2) {
    top: 45px;
}

.header_btn span:last-child {
    top: 55px;
}

.header_btn.active span {
    background: var(--color-white);
}

.header_btn.active span:first-child {
    top: 40%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.header_btn.active span:nth-child(2) {
    display: none;
}

.header_btn.active span:last-child {
    top: 40%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@keyframes fadeIn {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        display: block;
        opacity: 1;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

.sp-nav {
    display: none;
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.85);
}

.sp-nav.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.3s ease-in 0s forwards;
}

.sp-nav ul {
    border-top: 3px solid #ffffff;
    border-bottom: 3px solid #ffffff;
    padding: 50px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.sp-nav ul li+* {
    margin-top: 4em;
}

.sp-nav ul li a {
    font-size: 18px;
    letter-spacing: 0.18em;
    color: var(--color-white);
    font-weight: bold;
    position: relative;
    display: block;
    width: 100%;
}

.sp-nav ul li a::before,
.sp-nav ul li a::after {
    content: '';
    display: block;
    border-bottom: 1px solid #ffffff;
    position: absolute;
    bottom: 3px;
    width: 0;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.sp-nav ul li a::before {
    left: 50%;
}

.sp-nav ul li a::after {
    right: 50%;
}

.sp-nav ul li a:hover::before,
.sp-nav ul li a:hover::after {
    width: 50%;
}


.sp-nav .nav_item {
    margin-right: 0;
}

.sp-nav .nav_item a span img {
    width: 20px;
    filter: invert(100%);
    opacity: 1;
}

/* ---------------------------------Swiper
*/
.swiper-wrap {
    margin: 0 calc(50% - 50vw);
    height: inherit;
    max-width: 100vw;
    position: relative;
    overflow: hidden;
}

@keyframes zoom-slide {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

.swiper {
    height: 100%;
}

.swiper-slide {
    height: 100%;
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
    animation: zoom-slide 11s linear 0s 1 normal both;
}

.slide-img {
    height: 100%;
}

.img_s {
    display: none;
}

@media screen and (width<=600px) {
    @keyframes zoom-slide {
        0% {
            transform: translateX(10px);
        }

        100% {
            transform: translateX(-10px);
        }
    }

    .slide-img img {
        transform: scale(1.05);
    }

    .img_l {
        display: none;
    }

    .img_s {
        display: block;
    }
}

.slide-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* ---------------------------------スクロールアニメーション
*/

.fade-in {
    filter: blur(6px);
    opacity: 0;
    transform: translate(0, 30px) scale(1.1);
    transition: all 0.8s ease-in-out;
}

.scroll-in {
    filter: blur(0);
    opacity: 1;
    transform: translate(0, 0) scale(1);
}