@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
}

#wrap
{
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}

header{
    display: flex;
    padding: 0 2%;
    justify-content: space-between; /*両端に配置*/
    align-items: center; /*垂直中央揃え*/
    background-image: url(images/bg.png);
}

h1{
    font-family: 'Kiwi Maru', serif;
    font-size: 3.5em;
}

.midashi{
    padding: 1rem 1rem;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}

.komidashi{
      text-align: center;
}

 h2{
    font-family: 'Cairo', sans-serif;
    font-size: 2.5em;
    text-align: center;
}

h3{
    font-family: 'Kiwi Maru', serif;
    text-align: center;
}

ul{
    list-style: none;
    display: flex;   
}

li{
    padding-left: 2em;
}

li a{
    font-size: 1.3em;
    text-decoration: none;
}

.top img{
    width: 100%;
}

article{
    padding: 0 2%;
}


/*作品*/
.works,.about{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 5em;
}
.works section{
    padding:  10px;
    width: 30%;
}
.works img{
    width: 100%;
    
}

/* 最後のコンテンツを左寄せにする指定 */
.works:after {
    content: "";
    display: block;
    width: 40%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

/*紹介*/
.about {
    display: flex;
    flex-wrap: wrap;
}

.about span{
    padding:  10px;
    width: 50%;   
}

.about img{
    margin-top: 20px;
    width: 200px;
    height: 200px;
    justify-content: center;
}

.intro{
    width: 100%;
}

.prf{
    margin-top: 20px;
    justify-content: center;
}

.name{
    font-size: 2em;
    font-family: 'Dosis', sans-serif;
    letter-spacing: 2px;
    border-bottom: 3px solid #000;
    margin-bottom: 20px;
}

.skill{
    font-size: 1.3em;
    font-family: 'Kiwi Maru', serif;
    letter-spacing: 2px;
    border-bottom: 2px solid #000;
    margin-top: 10px;
    margin-bottom: 20px;
}

/*フッター*/
footer{
    background-color: antiquewhite;
    text-align: center;
}


/*レスポンシブ_タブレット*/

@Media screen and (max-width:1024px){
    
    /* main */
.works {
    display: flex;
    flex-wrap: wrap; /*折り返し*/
    justify-content: space-around;
}

.works section {
    padding:  10px;
    width: 40%;
}

.about img{
    width: 150px;
    height: 150px;
    margin-top: 30px;
    margin-left: 50px;
}

}

/*scrollTop*/
#scrollTop {
    position: fixed;
    bottom: 20px;
    right: 10px;
    font-size: 2em;

}

/*スマホ*/
@Media screen and (max-width:599px){
    /* header */
h1{
    font-size: 2.5em;
}

    li{
        font-size: 0.8em;
    }
    
    /* main */
.works section {
    padding:  10px;
    width: 100%;
    margin-bottom: 20px;
}

h3{
    padding-right: 10px;
    text-align: right;
}

.about img{
    width: 100px;
    height: 100px;
    margin-top: 30px;
    margin-left: 50px;
}

}