*{
    margin: 0;
    padding: 0;
}

html{
    scroll-behavior: smooth;
}

body{
    font-size: 16px;
    font-family: sans-serif;
}

p{
    font-family: serif;
    font-weight: 600;
}

h3{
    font-family: serif;
    font-weight: 1200;
}

.wrapper{
    margin:20px 20px 0 20px;
}

/*------------------------
  ヘッダー
------------------------*/

header{
    display: flex;
    justify-content: space-between;
}

h1{
    background-color: #333;
    color: #fff;
    padding: 5px 10px 5px 10px;

}

.nav-list{
    display: flex;
}

.nav-item{
    list-style: none;
    padding: 10px;
    margin: 5px 30px;
}

.nav-item a{
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}

/*------------------------
  メインビジュアル
------------------------*/

.img{
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    margin-top: 30px;
}

/*------------------------
  About&Bicycle 共通
------------------------*/
.sub-title{
    text-decoration: underline;
    margin: 150px 0 60px 0;
    text-align: center;
}


/*------------------------
  About
------------------------*/

.about{
    display: flex;
    width: 70%;
    margin: 0 auto;
}

.img2{
    border-radius: 50%;
    height: 200px;
    object-fit: cover;
    margin-right: 50px;
}


.profile h3{
    font-size: 17px;
    margin-bottom: 30px;
}

.profile p{
    font-size: 14px;
}


/*------------------------
  Bicycle
------------------------*/

.img-item{
    margin: 10px;
}

.img-item img{
    height: 200px;
}

.sub-visual{
    display: flex;
    justify-content: center;
}

.img-item h3{
    margin-top: 20px;
    text-align: center;
}

.img-item p{
    font-size: 12px;
    margin-top: 15px;
    text-align: center;
}

.aiyou{
    text-align: center;
    margin-bottom: 30px;
    font-size: 14px;
}



/*------------------------
  フッター
------------------------*/

footer{
    background-color: #333;
    height: 90px;
    margin-top: 50px;
}

footer p{
    text-align: center;
    font-size: 12px;
    color: #fff;
    padding-top: 40px;
}


@media screen and (max-width: 768px) {
	/* 768px以下に適用されるCSS */
    

    /*------------------------
     About&Bicycle 共通
    ------------------------*/
    .sub-title{
        text-decoration: underline;
        margin: 50px 0 20px 0;
        text-align: center;
    }

    /*------------------------
     About
    ------------------------*/

    .about{
        display: block;
        width: 80%;
        text-align: center;
    }

    .img2{
        margin: 60px auto;
    }

    /*------------------------
     Bicycle
    ------------------------*/

    .sub-visual{
        display: block;
        text-align: center;
        margin-top: 60px;
    }

    .img-item{
        margin-bottom: 70px;
    }

    .img-item img{
        width: 100%;
        object-fit: cover;
        height: 300px;
    }

    .img-item h3{
        margin-top: 30px;
    }

    .img-item p{
        font-size: 12px;
        margin-top: 20px;
    }

}