* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

#content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

#header {
    width: 100%;
    margin: 0;
    padding: 0;
}


#footer {
    width: 100%;
    padding: 5px 0;
    font-size: 0.7em;
    color: #666;
    text-align: center;
}

#course {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: #333;
}

#course>div {
    text-align: center;
}

#course h1 {
    margin: 0;
    padding: 5px 0;
    font-size: 0.95em;
    text-align: center;

    color: #333;
    border-bottom: solid 1px #666;
}

#course h1 a{
    text-decoration: none;
}

#course a {
    color: #333;
}

#course ul {
    margin: 0 auto;
    padding: 0.5em 0;
}

#course li {
    padding: 0.2em 0;
    font-size: 0.95em;
    list-style-type: none;
}

/*-------- PC表示 --------*/
@media screen and (min-width: 800px) {
    #header img {
        width: 100%;
    }

    .mech,
    .eee,
    .cis,
    .st,
    .cee,
    .cms {
        width: 20%;
    }

    .special,
    .water,
    .green {
        width: 100%;
    }

    .pc {
        display: none;
    }

}

/*-------- スマホ表示 --------*/
@media screen and (max-width: 800px) {
    #header img {
        width: 100%;
    }

    .mech,
    .eee,
    .cis,
    .st,
    .cee,
    .cms,
    .special {
        width: 50%;
    }

    .water,
    .green {
        width: 100%;
    }

    .sp {
        display: none;
    }
}

.mech {
    border-right: solid 1px rgba(130, 180, 230, 1);
    border-left: solid 1px rgba(130, 180, 230, 1);
    border-bottom: solid 1px rgba(130, 180, 230, 1);
}

.mech h1 {
    height: calc(2em + 10px);
    line-height: 2em;
    background-image: linear-gradient(90deg, rgba(130, 180, 230, 1), rgba(170, 210, 250, 1) 40% 60%, rgba(130, 180, 230, 1));
}

.eee {
    border-left: solid 1px rgba(190, 210, 75, 1);
    border-right: solid 1px rgba(190, 210, 75, 1);
    border-bottom: solid 1px rgba(190, 210, 75, 1);
}

.eee h1 {
    height: calc(2em + 10px);
    line-height: 2em;
    background-image: linear-gradient(90deg, rgba(190, 210, 75, 1), rgba(230, 250, 175, 1) 40% 60%, rgba(190, 210, 75, 1));
}

.cis {
    border-left: solid 1px rgba(255, 135, 110, 1);
    border-right: solid 1px rgba(255, 135, 110, 1);
    border-bottom: solid 1px rgba(255, 135, 110, 1);
}

.cis h1 {
    height: calc(2em + 10px);
    line-height: 2em;
    background-image: linear-gradient(90deg, rgba(255, 135, 110, 1), rgba(255, 210, 200, 1) 40% 60%, rgba(255, 135, 110, 1));
}

.st {
    border-left: solid 1px rgba(215, 150, 120, 1);
    border-right: solid 1px rgba(215, 150, 120, 1);
    border-bottom: solid 1px rgba(215, 150, 120, 1);
}

.st h1 {
    height: calc(2em + 10px);
    line-height: 2em;
    background-image: linear-gradient(90deg, rgba(215, 150, 120, 1), rgba(255, 200, 180, 1) 40% 60%, rgba(215, 150, 110, 1));
}

.cee {
    border-left: solid 1px rgba(230, 190, 55, 1);
    border-right: solid 1px rgba(230, 190, 55, 1);
    border-bottom: solid 1px rgba(230, 190, 55, 1);
}

.cee h1 {
    height: calc(2em + 10px);
    line-height: 1em;
    background-image: linear-gradient(90deg, rgba(230, 190, 55, 1), rgba(255, 255, 165, 1) 40% 60%, rgba(230, 190, 55, 1));
}

.cms {
    border-left: solid 1px rgba(135, 215, 210, 1);
    border-right: solid 1px rgba(135, 215, 210, 1);
    border-bottom: solid 1px rgba(135, 215, 210, 1);
}

/*-------- PC表示 --------*/
@media screen and (min-width: 800px) {
    .cms h1 {
        height: calc(2em + 10px);
        line-height: 1em;
        background-image: linear-gradient(90deg, rgba(135, 215, 210, 1), rgba(150, 245, 200, 1) 40% 60%, rgba(135, 215, 210, 1));
    }
}

/*-------- スマホ表示 --------*/
@media screen and (max-width: 800px) {
    .cms h1 {
        height: calc(2em + 10px);
        line-height: 2em;
        background-image: linear-gradient(90deg, rgba(135, 215, 210, 1), rgba(150, 245, 200, 1) 40% 60%, rgba(135, 215, 210, 1));
    }
}

.water {
    border-left: solid 1px rgba(50, 155, 255, 1);
    border-right: solid 1px rgba(50, 155, 255, 1);
    border-bottom: solid 1px rgba(50, 155, 255, 1);
}

.water h1 {
    height: calc(2em + 10px);
    line-height: 2em;
    background-image: linear-gradient(90deg, rgba(50, 155, 255, 1), rgb(187, 220, 252) 40% 60%, rgba(50, 155, 255, 1));
}

.green {
    border-left: solid 1px rgba(165, 125, 255, 1);
    border-right: solid 1px rgba(165, 125, 255, 1);
    border-bottom: solid 1px rgba(165, 125, 255, 1);
}

/*-------- PC表示 --------*/
@media screen and (min-width: 800px) {
    .green h1 {
        height: calc(2em + 10px);
        line-height: 2em;
        background-image: linear-gradient(90deg, rgba(165, 125, 255, 1), rgba(235, 225, 255, 1) 40% 60%, rgba(165, 125, 255, 1));
    }
}

/*-------- スマホ表示 --------*/
@media screen and (max-width: 800px) {
    .green h1 {
        height: calc(2em + 10px);
        line-height: 1em;
        background-image: linear-gradient(90deg, rgba(165, 125, 255, 1), rgba(235, 225, 255, 1) 40% 60%, rgba(165, 125, 255, 1));
    }
}