body{
    background-color: #e2e1f2;
	height:100%;
}
h2{
    font-size: 14px;
}
h3{
    font-size: 19px;
}
h4{
    font-size: 17px;
}
header{
    background-color: #000;
    color: #fff;
}
main{
    padding: 1.5rem;
}
section{
    margin-bottom: 2rem;
}
.card{
    border-radius: 4px;
}
.card-body {
    padding: 1.2rem;
}
.card-img{
    border-radius: 4px;
    margin-bottom: 1rem;
}
.card-img:last-child {
    margin-bottom: 0;
}
/* modal */
.modal-content .close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    border: none;
    background: none;
}
.modal-content .close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

/* smt */
@media (max-width: 480px) {
    section{
        width: 100%;
    }
}

/* tablet */
@media (min-width: 481px) and (max-width: 1000px) {
    .container{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section{
        width: 20rem;
    }
}

/* pc */
@media (min-width: 1001px) {
    .container{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    section{
        width: 20rem;
        float: left;
        margin-left: 2rem;
        margin-right: 2rem;
    }
}