html {
    /* background-color: none; */
}

body {
    font-family: 'Noto Serif Jp', serif;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2px;
}

/**
header
**/
header h3 {
    white-space: nowrap;
    text-align: center;
    font-size: 1.85rem;
    /* margin: 0 auto; */
}

header a {
    text-decoration: none;
}

header img {
    width: 567px;
    height: 113px;
}


/**
main
**/
.case_list {
    /* background-color: aqua; */
    margin: auto;
}

.case_list article {
    margin: 2%;
}
.case_header {
    display: flex;
    text-align: center;
    background-color: #8f0909;
    padding: 1%;
    font-size: 1.25rem;
    white-space: nowrap;
    color: white;
}

.case_title {
    margin-left: 30px;
}

.case_date {
    margin-right: 30px;
    margin-left: auto;
}

.case_content {
    font-size: 1.1rem;
    padding-top: 0.2%;
}


/**
footer
**/
footer {
    background-color: gray;
    text-align: center;
    padding: 7px 0;
    width: 100%;
}

footer p {
    /* color: #fff; */
    color: #fff;
    font-size: 0.875rem;
}


/**
media-query
**/
@media (max-width: 768px) {
    .wrapper{
        padding: 1%;
    }

    header {
        padding: 2%;
    }
    header h3 {
    text-align: center;
    font-size: 1rem;
    /* margin: 0 auto; */
    }
    
    header img {
        width: 80%;
        height: 80%;
        padding: 5px;
    }

    .case_header {
        text-align: center;
        display: block;
    }

    .case_header p {
        margin: auto;
        padding: 0.5%;
    }

    .case_num {
        font-size: 1.0rem;
    }

    .case_title {
        font-size: 1.2rem;
    }

    .case_date {
        font-size: 0.85rem;
    }
    .case_content {
        font-size: 1.2rem;
        padding: 3%;
    }
}