@charset "UTF-8";
/*==============================================================================
1.トップとデザインが共通の箇所
2.イントロ
3.type
4.facility
==============================================================================*/


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

	1.トップとデザインが共通の箇所

==============================================================================================================================================================
============================================================================================================================================================*/
.page-bike #fv {
    & .fv-content {
        & .fv-content_h2 {
            &::before {
                background: url(../1_img/base/bg-black.jpg) no-repeat center / cover;
            }
            &::after {
                background: linear-gradient(180deg, rgba(100, 100, 100, 0) 30%, rgba(100, 100, 100, 0.53) 56%, rgba(100, 100, 100, 1) 87%);
            }
        }
    }
    & .fv-description {
        background-color: rgb(75 75 75 / 0.7);
        color: #fff;
    }

    /*======== モノの収納 =========*/
    & .fv-bike{
        & a{
            padding: 35px 10px 15px;

            &::after{
                width: 19px;
                aspect-ratio: 17 / 16;
                top: 10px;
                background: url(../1_img/base/icon-box.svg) no-repeat center / cover;
            }
        }
    }
}

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

	トップとデザインが共通の箇所 PC

==============================================================================*/
@media all and (min-width: 768px){
    .page-bike #fv {
        & .fv-description {
            background-color: #6d6d6d;
            color: #fff;
        }
        /*======== モノの収納 =========*/
        & .fv-bike{
            & a{
                padding: 50px 15px 20px;
                
                &::after{
                    top: 15px;
                }
            }
        }
    }
}


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

	2.イントロ

==============================================================================================================================================================
============================================================================================================================================================*/
/* スマホ時 */
@media all and (max-width: 767px){
    .page-bike #intro {
        & .intro-img {
            &::before {
                background: linear-gradient(0deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0.53) 60%, rgba(100, 100, 100, 1) 94%);
            }
        }
    }
}
#intro{
    & .intro-text{
        margin-top: 50px;

        & h2{
            margin-bottom: 20px;
            font-size: 1.6rem;
            line-height: 1.8;

            & span{
                margin-top: 20px;
                padding-right: 15px;
                padding-left: 15px;
                padding-bottom: 18px;
                display: inline-block;
                line-height: 1.8;
                font-size: 1.8rem;
            }
        }

        & p {
            line-height: 2.5;
        }
    }
}


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

	イントロ PC

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

            & h2{
                font-size: 2.8rem;

                & span{
                    margin-top: 0px;
                    padding-right: 0px;
                    padding-left: 0px;
                    line-height: 2;
                    font-size: 3.4rem;
                }
            }
            & p {
                line-height: 2.5;
            }
        }
    }
}


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

	3.type

==============================================================================================================================================================
============================================================================================================================================================*/
#type-bike{
    margin-top: 50px;
    padding: 80px 0 130px;
    background-color: var(--color-sub);
    clip-path: polygon(50% 0, 100% 60px, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px), 0 60px);
    position: relative;
    z-index: 2;

    & .intro{
        text-align: center;
        font-size: 1.3rem;
    }

    & .type-bike{
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 30px;


        & .type-bike_item{
            display: flex;
            flex-direction: column;
            gap: 10px;

            & .type-bike_img{

                & 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);
                }

                & .img_slider{
                    & img{
                        width: 100%;
                    }
                }
            }

            & .type-bike_thum{
                display: flex;
                gap: 10px;

                & img{
                    width: calc( (100% - 20px) / 3 );
                }
            }
        }
    }

    & .btn-wrap{
        margin-top: 40px;
        text-align: center;

        & .catch{
            margin-bottom: 15px;
            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;
                }
            }
        }
    }
}
/*==============================================================================

	type PC

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

        & .intro{
            font-weight: var(--weight-medium);
            font-size: 2.2rem;
        }

        & .type-bike{
            margin-top: 60px;
            gap: 60px;

            & .type-bike_item{
                flex-direction: row;
                gap: 30px;

                & .type-bike_img{
                    width: 710px;

                    & figcaption{
                        padding: 15px 10px;
                        font-size: 3.6rem;
                    }
                }

                & .type-bike_thum{
                    width: 260px;
                    flex-direction: column;
                    justify-content: flex-start;
                    gap: 22px;

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


        & .btn-wrap{
            margin-top: 90px;

            & .catch{
                margin-bottom: 35px;

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

                    &::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;
                    }
                }
            }

            & a{
                width: 460px;
                font-size: 2.4rem;
            }
        }
    }
}





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

	4.facility

==============================================================================================================================================================
============================================================================================================================================================*/
#facility{
    margin-top: -60px;
    padding: 100px 0 90px;
    position: relative;
    z-index: 1;
    background-color: var(--color-main);
    clip-path: polygon(100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px), 0 0);
    color: #fff;

    & .facility-content{
        display: flex;
        flex-direction: column;
        gap: 20px;

        & .f-img{
            display: flex;
            flex-direction: column;
            gap: 15px;

            & img{
                width: 100%;
            }
        }

        & h3{
            margin-top: 20px;
            color: var(--color-accent);
            font-family: var(--font-sub);
            font-weight: var(--weight-bold);
            font-size: 1.8rem;
            text-align: center;
        }

        & p{
            margin-top: 10px;
            font-size: 1.3rem;
            text-align: left;
        }
    }
}

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

	facility PC

==============================================================================*/
@media all and (min-width: 769px) {
    #facility{
        margin-top: -130px;
        padding: 260px 0 210px;
        clip-path: polygon(100% 0, 100% calc(100% - 130px), 50% 100%, 0 calc(100% - 130px), 0 0);

        & .facility-content{
            flex-direction: row;
            flex-wrap: wrap;
            gap: 60px 40px;

            & section{
                width: calc( (100% - 40px) / 2 );
                text-align: left;
            }

            & .w-100{
                width: 100%;

                & p{
                    text-align: center;
                }
            }

            & .f-img{
                flex-direction: row;
                gap: 40px;

                & img{
                    width: 100%;
                }
            }

            & h3{
                font-size: 2.8rem;
            }

            & p{
                font-size: 2.2rem;
            }
        }
    }
}