@charset "utf-8";

body {
    margin: 0;
    height: 100svh;
    font-family: 'Noto Sans JP', sans-serif;
}

.nChildPageSlide {
    width: 100%;
    height: 100%;
}

.nFrameWrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nFrameWrap video,
.nFrameWrap img {
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
}

#nMainContentWrap {
    position: relative;
    height: 100dvh;
    aspect-ratio: 9 / 16;
    margin: auto;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    background-color: #FAFAFA;
}


.nSlideButtons {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 0 1rem;
}

.nSlideButtons > h2 {
    text-align: center;
    margin: 0 0 1rem;
    background-color: #CCC;
    color: #FFF;
    padding: 0.8rem 0.5rem;
    font-size: 1.4rem;
}

.nSlideButtonList {
    display: flex;
    gap: 1rem;
}

.nSlideButtonList > span,
.nSlideButtonList > a {
    width: 100%;
    display: block;
    font-size: 1.3rem;
    flex: 1;
    background-color: #CCC;
    color: #FFF;
    text-decoration: none;
    padding: 0.8rem 0.5rem;
    text-align: center;
    border-radius: 0.5rem;
    box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.5);

}


#nMainPageSlide {
    --swiper-navigation-size: 1.5rem;
    --swiper-theme-color: #000;
    width: 100%;
    height: 100%;
}

#nMainPageSlide .swiper-slide {
    width: 100% !important;
    min-height: 100% !important;
}


#nMainPageSlide .swiper-button-next,
#nMainPageSlide .swiper-button-prev {
    /*background-color: rgba(0,0,0,0.3);*/
    width: 2rem;
    height: 100%;
    top: 0;
    margin: 0;
    font-weight: 700;
    color: #888888;
    mix-blend-mode: difference;
}

#nMainPageSlide .swiper-button-next {
    right: 0;
}

#nMainPageSlide .swiper-button-prev {
    left: 0;
}

#nMainPageSlide .nSlideButtonDown,
#nMainPageSlide .nSlideButtonUp {
    width: 100%;
    height: 2rem;
}

#nMainPageSlide .nSlideButtonDown {
    top: unset;
    left: 0;
    bottom: 0;

    /*transform: translateX(-50%) rotate(90deg);*/
}

#nMainPageSlide .nSlideButtonUp {
    top: 0;
    left: 0;
    bottom: unset;
    /*transform: translateX(-50%) rotate(90deg);*/
}

#nMainPageSlide .nSlideButtonLeft:after {
    position: absolute;
    animation: leftRight 1s infinite;
}

#nMainPageSlide .nSlideButtonRight:after {
    position: absolute;
    animation: leftRight 1s 0.5s infinite;
}

#nMainPageSlide .nSlideButtonUp:after {
    transform: rotate(90deg);
    position: absolute;
    animation: upDown 1s infinite;
}

#nMainPageSlide .nSlideButtonDown:after {
    transform: rotate(90deg);
    position: absolute;
    animation: upDown 1s 0.5s infinite;
}

@keyframes leftRight {
    from {
        left: 0.5rem;
    }
    50% {
        left: 0.7rem;
    }
    to {
        left: 0.5rem;
    }
}

@keyframes upDown {
    from {
        bottom: 0.2rem;
    }
    50% {
        bottom: 0rem;
    }
    to {
        bottom: 0.2rem;
    }
}

#nMainPageSlide .swiper-button-disabled {
    opacity: 0;
}


#nBackgroundCont {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#nBackgroundCont video,
#nBackgroundCont > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 0;
    position: relative;
}

#nBackgroundContLeft {
    position: absolute;
    height: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    /*right: calc(50% + 16rem);*/
    width: calc(50%);
    text-align: right;
    overflow: hidden;
}

#nBackgroundContRight {
    position: absolute;
    height: 100%;
    z-index: 1;
    right: 0;
    top: 0;
    /*left: calc(50% + 16rem);*/
    width: calc(50%);
    overflow: hidden;
}

#nBackgroundContLeft img,
#nBackgroundContRight img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

#nBackgroundContLeft img {
    object-position: right;
}

#nBackgroundContRight img {
    object-position: left;
}

@media (max-aspect-ratio: 1.3) {

}

#nMainPageSlide .swiper-pagination {
    top: unset;
    bottom: 0;

}

#nMainPageSlide .nChildPageSlide .swiper-pagination {
    right: 0.2rem;
    bottom: 2rem;
    transform: unset;
    border-radius: 0.25rem;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.2);
}

#nMainPageSlide .nChildPageSlide .swiper-pagination .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
    margin: 0;
    background-color: transparent;
}

#nMainPageSlide .nChildPageSlide .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #000000;
}

#nMainPageSlide .nChildPageSlide .swiper-scrollbar-vertical {
    height: 15svh;
    width: 0.5rem;
    top: unset;
    bottom: 0;
}


#nMainPageSlide .swiper-scrollbar.swiper-scrollbar-horizontal {
    width: 100% !important;
    bottom: 0 !important;
    left: 0 !important;
}

#nFrontPage #nMainContentWrap,
#nLpArchivePage #nMainContentWrap {
    overflow-y: auto;
}

#nFrontPage #nMainContentWrap::-webkit-scrollbar,
#nLpArchivePage #nMainContentWrap::-webkit-scrollbar {
    display: none;
}

.nSampleLpList {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 4%;
}

.nSampleLpList article {
    width: 48%;

    position: relative;
}

.nSampleLpList article > div > a {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
    box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.3);
}

.nSampleLpList article > div > a img,
.nSampleLpList article > div > a video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.nSampleLpList article > h3 {
    text-align: center;
    margin: 0;
    padding: 0.5rem 0;
}


#nSampleLp {
    padding: 1rem;
}


.nSlideButtons .nPageAction {
    position: relative;
    margin-bottom: 1rem;
    height: 1rem;
}

.nSlideButtons .nPageAction > span {
    position: absolute;
    width: 100%;
    height: 1rem;
    background-color: #CCC;

    animation: slideAction01 2s ease-in-out infinite;
}

@keyframes slideAction01 {
    from {
        clip-path: polygon(
                0 0.9rem,
                calc(1rem - 0.3rem) 0.9rem,
                calc(1rem - 1rem) 0,
                calc(1rem - 0.9rem) 0,
                1rem 100%,
                0% 100%
        );
    }
    50% {
        clip-path: polygon(
                0 0.9rem,
                calc(100% - 0.3rem) 0.9rem,
                calc(100% - 1.5rem) 0,
                calc(100% - 1.3rem) 0,
                100% 100%,
                0% 100%
        );
    }

    to {
        clip-path: polygon(
                calc(100% - 0.3rem) 0.9rem,
                calc(100% - 0.3rem) 0.9rem,
                calc(100% - 1.5rem) 0,
                calc(100% - 1.4rem) 0,
                100% 100%,
                calc(100% - 0.7rem) 100%
        );

    }
}

.nSlideAction {
    width: 0.5rem;
    height: 50svh;
    position: relative;
    z-index: 10;
    filter:drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.6));
}

.nSlideAction > span {
    position: absolute;
    background-color: #FFF;
    display: block;
    width: 0.8rem;
    height: 100%;



    animation: slideAction02 1.5s ease-in-out infinite;
    transform-origin: center;
}
.nSlideAction > span:nth-of-type(2) {
    transform: rotate(-90deg);
}
@keyframes slideAction02 {
    from {
        clip-path: polygon(
                0 0,
                0 1rem,
                0.8rem 0,
                0.2rem 0,
                0.2rem 0
        );
    }
    50% {
        clip-path: polygon(
                0 0,
                0 100%,
                0.8rem calc(100% - 1rem),
                0.2rem calc(100% - 1rem),
                0.2rem 0
        );
    }
    to {
        clip-path: polygon(
                0 calc(100% - 1rem),
                0 100%,
                0.8rem calc(100% - 1rem),
                0.2rem calc(100% - 1rem),
                0.2rem calc(100% - 1rem)
        );
    }
}


#nPageSlideAction {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    place-content: center;
    pointer-events: none;
}



#nMainPageSlide .swiper-button-next, #nMainPageSlide .swiper-button-prev {
    width: 50%;
    height: 2rem;
    /* filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.6));
     mix-blend-mode: unset;*/
    top: unset;
    bottom: 0;
}

#nMainPageSlide .swiper-button-next:after, #nMainPageSlide .swiper-button-prev:after {
    display: none;
}

#nMainPageSlide .nSlideButtonRight:before {
    transform: scaleX(-1);
}

#nMainPageSlide .nSlideButtonUp {
    left: 0;
    top: unset;
    bottom: 50%;
    transform: rotate(90deg) translateX(-100%);
    transform-origin: bottom left;
}

#nMainPageSlide .nSlideButtonDown {
    left: 0;
    top: 50%;
    bottom: unset;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: top left;
}

#nMainPageSlide .swiper-button-next:before,
#nMainPageSlide .swiper-button-prev:before {
    content: '';
    position: absolute;
    background-color: #CCC;
    display: block;
    width: 100%;
    height: 100%;
    clip-path: polygon(
            1rem 50%,
            1rem 50%,
            1rem 50%

    );

}

#nMainPageSlide .swiper-button-next.nActive:before,
#nMainPageSlide .swiper-button-prev.nActive:before {
    animation: slideArrowAction 1.5s ease-in-out forwards;
    animation-iteration-count: 2;
}


@keyframes slideArrowAction {
    from {
        clip-path: polygon(
                calc(100% - 2rem) 50%,
                calc(100% - 1rem) calc(50% - 0.5rem),
                calc(100% - 1rem) calc(50% - 0.1rem),
                calc(100% - 1rem) calc(50% - 0.1rem),
                calc(100% - 1rem) calc(50% + 0.1rem),
                calc(100% - 1rem) calc(50% + 0.1rem),
                calc(100% - 1rem) calc(50% + 0.5rem)
        );
    }
    50% {
        clip-path: polygon(
                1rem 50%,
                2rem calc(50% - 0.5rem),
                2rem calc(50% - 0.1rem),
                calc(100% - 1rem) calc(50% - 0.1rem),
                calc(100% - 1rem) calc(50% + 0.1rem),
                2rem calc(50% + 0.1rem),
                2rem calc(50% + 0.5rem)
        );
    }
    90% {
        opacity: 1;
    }
    to {
        clip-path: polygon(
                1rem 50%,
                2rem calc(50% - 0.5rem),
                2rem calc(50% - 0.1rem),
                2rem calc(50% - 0.1rem),
                2rem calc(50% + 0.1rem),
                2rem calc(50% + 0.1rem),
                2rem calc(50% + 0.5rem)
        );
        opacity: 0;
    }
}




.nSlideButtonList > a:active {
    animation: buttonHover 0.3s ease-in-out forwards;
}

@keyframes buttonHover {
    from {
        transform: scale(1);
    }
    60% {
        transform: scale(0.9);
    }
    80% {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}