@charset "UTF-8";
/*==============================================================================
1.共通事項
2.fv
3.intro
4.howto
5.type
6.voice
7.info
==============================================================================*/


/*============================================================================================================================================================
==============================================================================================================================================================

	1.共通事項

==============================================================================================================================================================
============================================================================================================================================================*/


/*============================================================================================================================================================
==============================================================================================================================================================

	2.fv

==============================================================================================================================================================
============================================================================================================================================================*/
#fv{
    height: calc(100svh - 68px);
    position: relative;

    & .slider-fv{
        pointer-events: none;
    }

    & .fv-content{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;

        & .fv-content_text{
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 70%;
            /* bottom: calc(30% - 45px); */
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-feature-settings: "vert" on;
            color: #fff;
            font-family: var(--font-sub);
            font-weight: var(--weight-bold);
            font-size: 1.9rem;
            letter-spacing: 0.2em;

            & p{
                display: flex;
                align-items: start;
                flex-direction: column;
                gap: 10px;
                line-height: 1;

                & img{
                    width: 80px;
                }

                & span{
                    display: none;
                }
            }
        }

        & .fv-content_h2{
            width: 100%;
            height: 40%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            z-index: 2;
            left: 0;
            bottom: 0;
            pointer-events: none;

            &::before{
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                bottom: 0;
                background: var(--bg-img) no-repeat center / cover;
                clip-path: polygon(50% 55px, 100% 0, 100% 100%, 0 100%, 0 0);
            }

            &::after{
                content: "";
                width: 100%;
                height: 50%;
                position: absolute;
                left: 0;
                bottom: 0;
                background: linear-gradient(180deg,rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.53) 56%, rgba(255, 255, 255, 1) 87%);
            }

            & img{
                margin-top: 10%;
                width: clamp(180px, 60vw, 300px);
                position: relative;
                z-index: 2;
            }
        }
    }

    & .fv-description{
        padding: 10px;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-align: center;
        font-size: 1.4rem;
        letter-spacing: 0.15em;
        background-color: rgb(75 75 75 / 0.8);
    }

    /*======== バイクガレージ =========*/
    & .fv-bike{
        position: absolute;
        top: 70px;
        right: 0;
        writing-mode: vertical-rl;
        text-align: center;

        & a{
            display: block;
            padding: 40px 10px 15px;
            position: relative;
            background-color: var(--color-accent);
            border-radius: 10px 0 0 10px;
            font-size: 1.1rem;
            font-weight: var(--weight-bold);

            &::after{
                content: "";
                width: 28px;
                aspect-ratio: 70 / 43;
                position: absolute;
                top: 15px;
                left: 50%;
                transform: translateX(-50%);
                background: url(../1_img/base/icon-bike.svg) no-repeat center / cover;
            }
        }
    }
}

#fv .slick-slider,
#fv .slick-list,
#fv .slick-track,
#fv .slick-slide{
    height: 100%;
}
#fv picture{
    width: 100%;
}
#fv picture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@supports (-webkit-appearance: none) and (not (contain: paint)) {
    #fv .fv-content .fv-content_text p > span span{
        margin-inline-start: -0.5em;
    }
}

/*==============================================================================

	fv PC

==============================================================================*/
@media all and (min-width: 768px){
    #fv{
        height: auto;

        & .fv-slider{
            height: 800px;
        }
        & .fv-content{
            height: 800px;
            padding-top: 130px;

            & .fv-content_text{
                margin: 0 auto;
                width: 1000px;
                position: relative;
                align-items: end;
                justify-content: left;
                top: 80px;
                left: unset;
                transform: translateX(0);
                z-index: 3;

                & p{
                    & img{
                        width: 130px;
                    }
                }
            }

            & .fv-content_h2{
                width: 100%;
                height: 370px;
                display: flex;
                align-items: end;

                &::before{
                    clip-path: polygon(50% 140px, 100% 0, 100% 100%, 0 100%, 0 0);
                }

                &::after{
                    content: none;
                }

                & img{
                    margin-bottom: 40px;
                    width: 450px;
                    height: auto;
                }
            }
        }

        & .fv-description{
            padding: 15px;
            position: static;
            font-size: 2.8rem;
            background-color: rgb(75 75 75 / 1);
        }

        /*======== バイクガレージ =========*/
        & .fv-bike{
            top: 170px;

            & a{
                padding: 50px 15px 20px;
                font-size: 1.8rem;

                &::after{
                    width: 32px;
                    top: 20px;
                }
            }
        }
    }
}

/*============================================================================================================================================================
==============================================================================================================================================================

	3.intro

==============================================================================================================================================================
============================================================================================================================================================*/
#intro{

    & .intro-img{
        height: 60vh;
        position: relative;

        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        &::before,
        &::after{
            content: "";
            width: 100%;
            height: 50%;
            position: absolute;
            left: 0;
        }

        &::before{
            top: 0;
            background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.53) 60%, rgba(255, 255, 255, 1) 94%);
        }

        &::after{
            bottom: -1px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.53) 60%, rgba(255, 255, 255, 1) 94%);
        }
    }

    & .intro-text{
        margin-top: -2em;
        text-align: center;

        & h2{
            margin-bottom: 30px;
            line-height: 2.5;
            font-size: 1.8rem;
            font-weight: var(--weight-bold);
            font-family: var(--font-sub);
        }

        & p{
            line-height: 3.5;
        }

        & .border-dotted{
            font-weight: var(--weight-bold);
            line-height: 2;
        }
    }
    /* 見学会 */
    & .intro-visit{
        margin-top: 65px;
        text-align: center;

        & .fukidashi-wrap{
            margin-bottom: 20px;
            font-size: 2.2rem;
            font-family: var(--font-sub);
        }

        & img{
            width: 80%;
            height: auto;
        }
    }

}
/*==============================================================================

	intro PC

==============================================================================*/
@media all and (min-width: 768px){
    #intro{
        margin-top: 20px;

        & .intro-img{
            height: 600px;
        }

        & .intro-text{

            & h2{
                font-size: 3rem;

                & img{
                    width: 300px;
                }
            }

            & p{
                line-height: 3.5;
                font-size: 2.2rem;
            }

            & .border-dotted{
                line-height: 2.5;
            }
        }
        /* 見学会 */
        & .intro-visit{
            margin-top: 65px;

            & .fukidashi-wrap{
                font-size: 3.4rem;
            }

            & img{
                width: 1000px;
            }
        }

    }
}

/*============================================================================================================================================================
==============================================================================================================================================================

	4.howto

==============================================================================================================================================================
============================================================================================================================================================*/
#howto{
    margin-top: 50px;
    padding: 80px 0 100px;
    background-color: var(--color-main);
    clip-path: polygon(50% 0, 100% 60px, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px), 0 60px);
    color: #fff;

    /* 利用シーン */
    & .howto-ol-wrap{
        & ol{
            opacity: 1;
            transform: translate(0);
            flex-direction: column;
            gap: 50px 0;

            & li{
                opacity: 0;
                transform: translateY(-30px);
                transition: 1000ms;
                padding: 0 20px;

                & h3{
                    text-align: center;

                    & span{
                        padding-left: 40px;
                        display: inline-block;
                        position: relative;
                        font-size: 1.8rem;
                        font-weight: var(--weight-bold);

                        &::before{
                            content: "";
                            aspect-ratio: 62 / 60;
                            width: 35px;
                            position: absolute;
                            top: 0;
                            left: -10px;
                            background-size: 100% auto;
                        }
                    }

                    & em{
                        color: var(--color-accent);
                    }
                }

                &.started{
                    opacity: 1;
                    transform: translateY(0px);
                }
            }
            
            & li:nth-of-type(1) h3 span::before{
                background-image: url(../1_img/base/icon-num-1.svg);
            }
            & li:nth-of-type(2) h3 span::before{
                background-image: url(../1_img/base/icon-num-2.svg);
            }
            & li:nth-of-type(3) h3 span::before{
                background-image: url(../1_img/base/icon-num-3.svg);
            }

            & figure{
                margin-top: 20px;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 35px 0;

                & img{
                    order: 2;
                }
                & figcaption{
                    padding: 5px;
                    order: 1;
                    width: 100%;
                    position: relative;
                    background-color: #fff;
                    color: var(--color-main);
                    font-weight: var(--weight-bold);
                    border-radius: 30px;

                    &::after{
                        content:"";
                        width: 20px;
                        height: 15px;
                        position: absolute;
                        top: calc(100% - 1px);
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: inherit;
                        clip-path: polygon(0 0, 50% 100%, 100% 0);
                    }
                }
            }
        }
    }

    & .howto-text{
        padding: 0;
        margin-top: 40px;
        text-align: center;
        font-weight: var(--weight-bold);
        line-height: 2.2;
        font-size: 1.6rem;

        & p{
            display: inline-block;
            text-align: justify;

            & span{
                color: var(--color-accent);
            }
        }
    }
}
/*==============================================================================

	howto PC

==============================================================================*/
@media all and (min-width: 768px){
    #howto{
        margin-top: 120px;
        padding: 130px 0 160px;
        clip-path: polygon(50% 0, 100% 130px, 100% calc(100% - 130px), 50% 100%, 0 calc(100% - 130px), 0 130px);

        /* 利用シーン */
        & .howto-ol-wrap{
            & ol{
                flex-direction: row;
                justify-content: space-between;
                gap: 0;

                & li{
                    width: calc(300px);
                    padding: 0;

                    & h3{
                        & span{
                            padding-top: 90px;
                            padding-left: 0;
                            font-size: 2.1rem;

                            &::before{
                                width: 62px;
                                top: 0;
                                left: 50%;
                                transform: translateX(-50%);
                            }
                        }
                    }
                }

                & figure{
                    margin-top: 20px;
                    gap: 35px 0;

                    & img{
                        order: 1;
                    }
                    & figcaption{
                        order: 2;
                        font-size: 1.5rem;

                        &::after{
                            content:"";
                            top: -14px;
                            transform: translateX(-50%) scale(1,-1);
                        }
                    }
                }
            }
        }

        & .howto-text{
            padding: 0;
            margin-top: 80px;
            text-align: center;
            font-size: 2rem;

            & p{
                text-align: center;
            }
        }
    }
}

/*============================================================================================================================================================
==============================================================================================================================================================

	5.type

==============================================================================================================================================================
============================================================================================================================================================*/
#type{
    margin-top: 50px;

    & .catch{
        margin-bottom: 20px;
        text-align: center;

        & span{
            padding: 0 20px;
            display: inline-block;
            position: relative;
            font-size: 1.3rem;
            font-weight: var(--weight-bold);
            letter-spacing: 0.2em;

            &::before,
            &::after{
                content: "";
                width: 40px;
                height: 3px;
                position: absolute;
                bottom: 10px;
                background-image: url(../1_img/base/border-dotted.svg);
                background-repeat: repeat-x;
                background-size: auto 3px;
            }

            &::before{
                left: 0;
                transform: rotate(60deg);
                background-position: left center;
            }
            &::after{
                right: 0;
                transform: rotate(-60deg);
                background-position: right -3px center;
            }
        }
    }

    & .slick-track{
        padding: 0 30px;
        display: flex;
        gap: 0 30px;
    }
    & .slick-arrow.prev {
        left: 30px;
        transform: translateY(-50%);
    }
    & .slick-arrow.next {
        right: 30px;
        transform: translateY(-50%);
    }

    & .type-slider__item{
        width: calc(100vw - 100px);
        border-radius: 12px;
        overflow: hidden;

        & figure{
            & figcaption{
                padding: 15px 10px;
                text-align: center;
                font-size: 1.8rem;
                font-family: var(--font-sub);
                font-weight: var(--weight-bold);
                background-color: var(--color-accent);
            }
        }

        & .type-slider__item-img{
            aspect-ratio: 26 / 27;

            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }

    & .button-wrap{
        text-align: center;
    }
}
/*==============================================================================

	type PC

==============================================================================*/
@media all and (min-width: 768px){
    #type{
        margin-top: 120px;

        & .catch{
            margin-bottom: 40px;

            & span{
                padding: 0 100px;
                font-size: 3rem;

                &::before,
                &::after{
                    width: 104px;
                    height: 6px;
                    bottom: 40px;
                    background-size: auto 6px;
                }

                &::before{
                    left: -15px;
                    background-position: left center;
                }
                &::after{
                    right: -15px;
                    background-position: right -6px center;
                }
            }
        }

        & .slick-track{
            gap: 0 100px;
        }
        & .slick-arrow.prev {
            margin-left: -550px;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
        }
        & .slick-arrow.next {
            margin-right: -550px;
            right: 50%;
            transform: translateY(-50%) translateX(50%);
        }

        & .type-slider{
            margin-bottom: 0;
        }
        & .type-slider__item{
            width: 1000px;

            & figure{
                & figcaption{
                    padding: 20px;
                    font-size: 3em;
                }
            }

            & .type-slider__item-img{
                aspect-ratio: unset;

                & img{
                    width: 100%;
                    height: auto;
                }
            }
        }

        & .button-wrap{
            margin-top: 70px;
            text-align: center;

            & .button{
                font-size: 1.8rem;
            }
        }
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	6.voice

==============================================================================================================================================================
============================================================================================================================================================*/
#voice{
    margin-top: 50px;
    padding: 40px 0 80px;
    background-color: var(--color-sub);
    clip-path: polygon(100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px), 0 0);

    & .voice-slider{
        margin-bottom: 0;
        padding-bottom: 30px;

        & .slick-arrow.prev {
            margin-top: -20px;
            left: 5px;
            transform: translateY(-50%);
        }
        & .slick-arrow.next {
            margin-top: -20px;
            right: 5px;
            transform: translateY(-50%);
        }

        & .slick-dots {
            bottom: 0px;

            & li.slick-active button {
                background: var(--color-accent);
            }
        }
    }
    & .slick-track {
        display: flex;
        gap: 20px;

        & .voice-slider__item{
            padding: 40px 20px 30px;
            width: calc(100vw - 80px);
            background-color: #fff;
            clip-path: polygon(25px 0%, calc(100% - 25px) 0%, 100% 25px, 100% calc(100% - 25px),calc(100% - 25px) 100%, 25px 100%, 0% calc(100% - 25px), 0% 25px);

            & .voice-slider__figure{
                padding-bottom: 10px;
                display: flex;
                align-items: center;
                gap: 0 10px;
                border-bottom: 1px solid var(--color-font);

                & .voice-slider__figure-img{
                    flex-shrink: 0;
                }
                & .voice-slider__status{
                    color: var(--color-accent);
                    font-family: var(--font-sub);
                    font-weight: var(--weight-bold);
                }
                & .voice-slider__text{
                    font-size: 1.2rem;
                    font-weight: var(--weight-bold);
                }
            }

            & .voice-slider__info{
                margin-top: 20px;

                & li{
                    display: flex;
                    gap: 0 5px;

                    & .voice-slider__cate{
                        width: 80px;
                        color: #fff;
                        font-size: 1.2rem;
                        font-weight: var(--weight-bold);
                        text-align: center;
                        letter-spacing: 0.1em;
                        background-color: var(--color-accent);
                    }

                    & .voice-slider__detail{
                        font-size: 1.2rem;
                    }
                }

                & li + li{
                    margin-top: 5px;
                }
            }

            & .voice-slider__comment{
                margin-top: 10px;
                font-size: 1.2rem;
            }
        }


    }

    & .slick-slide {
        height: auto !important;
    }

}
/*==============================================================================

	voice PC

==============================================================================*/
@media all and (min-width: 768px){
    #voice{
        margin-top: 130px;
        padding: 70px 0 140px;
        background-color: var(--color-sub);
        clip-path: polygon(100% 0, 100% calc(100% - 130px), 50% 100%, 0 calc(100% - 130px), 0 0);

        & .voice-slider{
            margin-bottom: 0;
            padding-bottom: 90px;

            & .slick-arrow.prev {
                margin-top: -45px;
                margin-left: calc(-580px - 50px);
                left: 50%;
            }
            & .slick-arrow.next {
                margin-top: -45px;
                margin-right: calc(-580px - 50px);
                right: 50%;
            }
        }
        & .slick-track {
            gap: 0 40px;

            & .voice-slider__item{
                padding: 40px 20px 30px;
                width: 360px;

                & .voice-slider__figure{
                    padding-bottom: 20px;
                    gap: 0 15px;

                    & .voice-slider__figure-img{
                        width: 82px;
                    }
                    & .voice-slider__text{
                        font-size: 1.8rem;
                    }
                }

                & .voice-slider__info{
                    margin-top: 20px;
                    padding: 0 10px;

                    & li{
                        display: flex;
                        gap: 0 5px;

                        & .voice-slider__cate{
                            width: 95px;
                            font-size: 1.5rem;
                        }

                        & .voice-slider__detail{
                            font-size: 1.5rem;
                        }
                    }

                    & li + li{
                        margin-top: 10px;
                    }
                }

                & .voice-slider__comment{
                    margin-top: 15px;
                    padding: 0 10px;
                    font-size: 1.4rem;
                }
            }


        }

        & .slick-slide {
            height: auto !important;
        }

    }
}





/*============================================================================================================================================================
==============================================================================================================================================================

	7.info

==============================================================================================================================================================
============================================================================================================================================================*/
#info{
    margin-top: 50px;

    & .catch{
        margin-bottom: 10px;
        text-align: center;

        & span{
            padding: 0 40px;
            display: inline-block;
            position: relative;
            font-size: 1.4rem;
            font-weight: var(--weight-bold);
            letter-spacing: 0.2em;

            &::before,
            &::after{
                content: "";
                width: 32px;
                height: 3px;
                position: absolute;
                bottom: 10px;
                background-image: url(../1_img/base/border-dotted.svg);
                background-repeat: repeat-x;
                background-size: auto 3px;
            }

            &::before{
                left: 0;
                transform: rotate(60deg);
                background-position: left center;
            }
            &::after{
                right: 0;
                transform: rotate(-60deg);
                background-position: right -3px center;
            }

            & em{
                font-size: 1.8rem;
                color: var(--color-accent);
            }
        }
    }

    /* スライダー */
    & .slick-track{
        padding: 0 30px;
        display: flex;
        gap: 0 30px;
    }
    & .slick-arrow.prev {
        left: 30px;
        transform: translateY(-50%);
        transition: background-color 500ms;
    }
    & .slick-arrow.next {
        right: 30px;
        transform: translateY(-50%);
        transition: background-color 500ms;
    }

    & .info-slider__item{
        width: calc(100vw - 100px);

        & figure{

            & figcaption{
                margin-top: 20px;
                text-align: center;
                font-size: 1.6rem;

                & h3{
                    font-weight: var(--weight-bold);
                    font-family: var(--font-sub9);
                }
                & address{
                    margin-top: 10px;
                }
                & p{
                    margin-top: 10px;
                    font-size: 1.4rem;
                }
            }
        }

        & .info-slider__item-img{
            aspect-ratio: 28 / 19;

            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }

    /* ボタン */
    & .btn-wrap{
        margin-top: 40px;
        display: flex;
        gap: 20px 0;
        flex-direction: column;
        align-items: center;
        
        & .button{
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    /* 地図 */
    & iframe{
        margin-top: 40px;
        width: 100%;
        height: 160px;
    }
}

/*==============================================================================

	info PC

==============================================================================*/
@media all and (min-width: 768px){
    #info{
        margin-top: 120px;

        & .catch{
            margin-bottom: 40px;

            & span{
                padding: 0 70px;
                font-size: 3rem;

                &::before,
                &::after{
                    width: 54px;
                    height: 6px;
                    bottom: 20px;
                    background-size: auto 6px;
                }

                &::before{
                    left: -15px;
                    background-position: left center;
                }
                &::after{
                    right: -15px;
                    background-position: right -6px center;
                }

                & em{
                    font-size: 3.6rem;
                }
            }
        }

        /* スライダー */
        & .slick-track{
            gap: 0 100px;
        }
        & .slick-arrow.prev {
            margin-left: -550px;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
        }
        & .slick-arrow.next {
            margin-right: -550px;
            right: 50%;
            transform: translateY(-50%) translateX(50%);
        }

        & .info-slider{
            margin-bottom: 0;
        }
        & .info-slider__item{
            width: 1000px;

            & figure{

                & figcaption{
                    margin-top: 40px;

                    & h3{
                        font-size: 2.8rem;
                    }
                    & address{
                        margin-top: 20px;
                        font-size: 1.8rem;
                    }
                    & p{
                        font-size: 1.6rem;
                    }
                }
            }

            & .info-slider__item-img{
                aspect-ratio: unset;

                & img{
                    width: 100%;
                    height: auto;
                }
            }
        }

        /* ボタン */
        & .btn-wrap{
            margin-top: 40px;
            gap: 40px;
            flex-direction: row;
            justify-content: center;
            
            & .button{
                height: 60px;
            }
        }

        /* 地図 */
        & iframe{
            margin-top: 80px;
            height: 380px;
        }
    }
}