body {
    padding-top: 100px;
    background-color: #d2d3f6;
    background-image: url('img/D341FFB1-5EBC-421A-8DE8-97245177F394.jpg');
    background-size: cover;
    /* border: solid 3px #000000; */
}

.starter-template {
    
    margin: auto 50px 0px;
    padding: 5px 15px;
    background-color: rgb(209, 253, 249,0.7);
    /* border: solid 3px #000000; */
}
.starter-template li {
    list-style: none;
}
.info-template {
    margin: 10px 50px;
    padding: 5px 15px;
    background-color: rgba(218, 224, 248, 0.7);
    /* border: solid 3px #000000; */
}
.info-template li {
    list-style: none;
}
.skill-template {
    list-style: nane;
    margin: 10px 50px;
    padding: 5px 15px;
    background-color: rgba(244, 249, 217, 0.663);
    /* border: solid 3px #000000; */
}
.skill-template li {
    list-style: none;
}
.works {
    margin: 10px 50px;
    padding: 5px 15px;
    background-color: rgb(255, 228, 232, 0.7);
    /* border: solid 3px #000000; */

}
.future {
    margin: 10px;
    padding: 5px 15px;
    /* border: solid 3px #000000; */
}
.smoking {
    margin: 10px;
    padding: 5px 15px;
    /* border: solid 3px #000000; */
}

.kinnji {
    margin: 10px;
    padding: 5px 15px;
    /* border: solid 3px #000000; */
}

footer {
    text-align: center;
    width: 100%;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.861);
    font-family: serif;
    font-size: 20px;
    /* border: solid 3px #000000; */
}
.header {
    position: fixed;
    overflow: hidden;
    background: #ffffff;
    /* border: solid 3px #000000; */
    width: 100%;
    justify-content: space-between;
    display: flex;
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    align-items: center; /* 中の要素を上下中央に並べる */
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
}
.header h1 {
    margin: 10px;
    font-family: fantasy;
    font-size: 40px;
    /* border: solid 3px #000000; */
    vertical-align: middle;
}
#nav {
    text-align: center;
    overflow: hidden;
    list-style: none;
    width: 100%;
    margin: 10px ;
    /* border: solid 3px #000000; */
}
#nav li {
    display: inline-block;

    text-align: center;
    line-height: 50px;
    /* border: solid 3px #000000; */
}
#nav li a {
    color: #596ffb;
    font-weight: bold;
    /* border: solid 3px #000000; */
}
.contact {
    margin: 10px ;
    padding: 10px 15px;
    background-color: rgba(216, 246, 208, 0.7);
    /* border: solid 3px #000000; */
}
.contact li { 
    list-style: none;
}
#icon {
    height: 40px;
    width: auto;
    /* border: solid 3px #000000; */
}