/*  すべての設定*/
* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    font-family: "Playfair Display", serif;
}

li,
pd {
    line-height: 1.7;
}

img {
    max-width: 100%;
}


a:link {
    color: #BCD3BC;
    text-decoration: none;
}


a:visited {
    color: #BCD3BC;
    text-decoration: none;
}


a:hover {
    color: #BCD3BC;
    text-decoration: none;
}


a:active {
    color: #BCD3BC;
    text-decoration: none;
}

body {
    margin: 0 0 0 0;
}



/*  ヘッダー*/
nav ul {
    color: #BCD3BC;
    font-size: 32px;
    padding: 20px 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
    gap: 50px;
    background-color: #EFF9EF;


}

/*  ヒーロー*/
.name {
    margin-top: 0;
}

/*  メイン*/
main {
    max-width: 1000px;
    margin: 0 auto;

}

h2 {
    font-size: 48px;
    color: #BCD3BC;
    text-align: center;
    margin-bottom: 0;
}

h3 {
    font-size: 24px;
    color: #00341B;
    text-align: center;
    margin-bottom: 0;
    margin-top: 0;


}

h4 {
    text-align: center;
    margin-top: 0;
}

.profiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin: 40PX 60px 0 60px;
}

.skills {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 80px;
    text-align: center;
    background-color: #EFF9EF;
    padding: 10px 60px 0 60px;
}

.skill_title {
    background-color: #EFF9EF;
    padding-top: 30px;
    margin-bottom: 0;
}

.works {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    text-align: center;
    padding: 50px 60px 0 60px;
}

.trip {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

video {
    width: 600px;

}

.roomba {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 50PX 50px;
    text-align: center;
}

.wedding {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin: 50PX 100px;
    text-align: center;
}

/*  フッター*/
footer {
    color: white;
    background-color: #00341B;
    text-align: center;
    padding: 10px 0;
}

/*  個別のスタイル*/
/* index */
/* モバイル */
@media(max-width:767px) {
    nav ul {
        flex-wrap: wrap;
        gap: 20px;
        padding: 0;
        list-style-type: none;
        display: flex;
        justify-content: center;
    }

    .name img {
        height: 300px;
        object-position: center;
        object-fit: cover;
    }

    main {
        max-width: 1000px;
        padding: 0;
        margin: 0;
    }

    h2 {
        text-align: center;
        margin-bottom: 0;
    }

    h3 {
        font-size: 18px;
        text-align: center;
        margin-bottom: 0;
        margin-top: 0;
    }

    h4 {
        text-align: center;
        margin-top: 0;
    }

    .profiles {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 20px;
    }

    .skills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        text-align: center;
        padding: 50px 40px 0 40px;
    }

    .works {
        display: grid;
        grid-template-columns: 1fr;
    }

    .trip {
        text-align: center;
        margin: 50px 30px;
    }














}