body{
    line-height: 1.5;
    color: black;
}
img{
    width: 100%;
    height:auto;
}

.container{
    max-width: 990px;
    width: 90%;
    margin: auto;
    padding: 25px 0;
}
a{
    text-decoration: none;
    color: black;
    
}
a:hover{
    opacity: 1;

}

/* header */

header{
    position: fixed;
    top: 0;
    background-color: #eef1eb;
    background: rgba(84, 83, 83, 0.1);
    width: 100%;
    margin: auto;
    padding: 5px 0;

}
header .container{
    display: flex;
    justify-content: space-between;
    padding: 0;

}

.header-title{
    font-size: 40px;
    font-weight: bold;
}
.header-right{
    display: flex;
    justify-content: space-between;

}
.header-nav{
    display: flex;
    align-items: center;
}
.header-nav-item{
    font-size: 20px;
    margin-left:20px;

}
.header-nav-item:hover{
    opacity: 0.7;
}

/* section */
section{
    text-align: center    ;
}
.section-title{
    font-size: 40px;
    padding: 30px 0;
    /* opacity: 1.0; */

}
 /* top */
.top-title{
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 50px;
}
.top{
    background-image: url(./img/25681788_m.jpg);
    background-size:100% auto;
    padding: 150px 0;
    background-repeat: no-repeat;
    margin-top: 96px;

}

.top-coment{
    font-size: 25px;
}

/* about */
.about{
    background-color: #8CD790;
}
.about-content{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.about-left{
    width:25%;
    margin:0 30px;
    border-radius: 999px;
}
.about-right{
    font-size: 25px;
    text-align: left;
    margin:0 30px;
}

/*  service*/
.service{
    background-color: #eef1eb;

}
.service-content{
    display: flex;
    justify-content: space-between;
}
.service-content-item{
    border: 1px solid;
}

.service-content-item{
    width: 30%;
    margin-left: 20px;
}
.service-content-title{
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 5px;
}
.service-content-text{
    text-align: left;
    padding: 0 20px;
}
/* artifact */

.artifact{
    background-color: #8CD790;
}
.artifact .container{
    display: flex;
    justify-content: space-between    ;
    font-size: 25px;
}
.artifact-left,.artifact-right{
    width: 45%;
}


.artifact-text{
    text-align: left;
    font-size: 15px;
    margin-top: 10px;
}
.artifact-link:hover{
    opacity: 0.7;
}

/* contact */
.contact{
    background-color: #eef1eb;

}
input[type="email"]{
    display: block;
    margin: auto;
    margin-bottom: 20px;
    width: 500px;
    height: 40px;
    text-align: center;
    font-size: 20px;
    border-radius: 50px;
    border: 1px solid;
    text-align: left;
}
.btn{
    display: inline-block;
    width: 150px;
    height: auto;
    font-size: 20px;
    border-radius: 999px;
    border: 1px solid;
    background-color:#fbdbed;

}
.btn:hover{
    opacity: 0.8;
    cursor: pointer;
}
/* footer */

footer{
    background-color: #2f2e2e;
}

footer .container{
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}
.copyright{
    color: white;

}



/* ============================================================================= */
/* スマホ用 */
@media only screen and (max-width:767px){
    header .container{
        flex-direction: column;
    }
    
    .header-title{
        font-size: 35px;
        text-align: center;
    }
    .header-right{
        margin: auto;
    
    }
    /* .header-nav{
    } */
    .header-nav-item{
        font-size: 20px;
        margin-left:0px;
        margin: 0 4px;
    
    }
    /* section */
    section{
        text-align: center    ;
    }
    .section-title{
        font-size: 40px;
        padding: 30px 0;
    }
     /* top */
    .top-title{
        font-size: 35px;
        margin-bottom: 20px;
        width: auto;
    }
    .top{
        padding: 0px 0;
        background-repeat: no-repeat;
    }
    
    .top-coment{
        font-size: 20px;
    }
    
    /* about */
    .about-left{
        width:100%;
        margin:0 0px;
        margin-right: 15px;
    }
    .about-right{
        font-size: 15px;
        margin:0 0px;
    }
    
    /*  service*/
    /* .service{
    } */
    .service-content{
        /* display: flex; */
        flex-direction: column;
    }
    .service-content-item{
        width: 100%;
        margin-left: 0px;
        margin-bottom: 10px;
    }
    /* artifact */
    /* .artifact{
    } */
    .artifact .container{
        display: flex;
        flex-direction: column;
    }
    .artifact-left,.artifact-right{
        width: 100%;
    }
    
    .item-1{
        margin-top: 10px;
    }
    
    .artifact-text{
        text-align: left;
        font-size: 15px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    
    /* contact */
    input[type="email"]{
        width: 200px;
        font-size: 15px;
        text-align: center;
    }
   
    .copyright{
        /* color: white; */
        font-size: 10px;
        margin:auto;
    
    }
}