/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@charset "UTF-8";

.works {
    background-image: url(../img/mobile.jpg);
}

.eyecatch {
    background-color: rgba(0, 128, 128, 0.5);
}

.d_nav {
    color: #fdfdfd;
    padding: 5px 20px;
    background-color: rgba(0, 128, 128);
}

.c2-main {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 90px 1fr;
    grid-template-columns: 90px 1fr;
    -ms-grid-columns: calc(5.625rem + ((1vw - 3.78px) * 15.3846)) 1fr;
    grid-template-columns: calc(5.625rem + ((1vw - 3.78px) * 15.3846)) 1fr;
    -ms-grid-rows: (auto)[4];
    grid-template-rows: repeat(4, auto);
}

.c2-main > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.c2-main > *:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

.c2-main > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

.c2-main > *:nth-child(7) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(8) {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
}

.c2-main > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.c2-main > *:nth-child(3) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(4) {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

.c2-main > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
}

.c2-main > *:nth-child(7) {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
}

.c2-main > *:nth-child(8) {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
}

.c2-title-1 {
    display: none;
}

.c2-content-1 {
    display: none;
}

.c2-title-2 {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 1;
    grid-row: 1;
    background-color: rgb(234, 234, 234);
    border-top: 1px solid rgb(162, 162, 162);
    border-left: 1px solid rgb(162, 162, 162);
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: center;
    -ms-flex-line-pack: center;
        align-content: center;
}

.c2-content-2 {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 1;
    grid-row: 1;
    border-top: 1px solid rgb(162, 162, 162);
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: left;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 5px 20px 5px 20px;
}

.c2-title-3 {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 2;
    grid-row: 2;
    background-color: rgb(234, 234, 234);
    border-left: 1px solid rgb(162, 162, 162);
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: center;
    -ms-flex-line-pack: center;
        align-content: center;
}

.c2-content-3 {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 2;
    grid-row: 2;
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: left;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 5px 20px 5px 20px;
}

.c2-title-4 {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 3;
    grid-row: 3;
    background-color: rgb(234, 234, 234);
    border-left: 1px solid rgb(162, 162, 162);
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: center;
    -ms-flex-line-pack: center;
        align-content: center;
}

.c2-content-4 {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 3;
    grid-row: 3;
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: left;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 5px 20px 5px 20px;
}

.c2-title-5 {
    -ms-grid-column: 1;
    grid-column: 1;
    -ms-grid-row: 4;
    grid-row: 4;
    background-color: rgb(234, 234, 234);
    border-left: 1px solid rgb(162, 162, 162);
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: center;
    -ms-flex-line-pack: center;
        align-content: center;
}

.c2-content-5 {
    -ms-grid-column: 2;
    grid-column: 2;
    -ms-grid-row: 4;
    grid-row: 4;
    border-right: 1px solid rgb(162, 162, 162);
    border-bottom: 1px solid rgb(162, 162, 162);
    text-align: left;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 5px 20px 5px 20px;
}

/* ##### 画面の横幅768ピクセル以上 ##### */
@media (min-width: 768px) {

    .c2-main {
        -ms-grid-columns: 150px 1fr;
        grid-template-columns: 150px 1fr;
        -ms-grid-columns: calc(9.375rem + ((1vw - 7.68px) * 24.4361)) 1fr;
        grid-template-columns: calc(9.375rem + ((1vw - 7.68px) * 24.4361)) 1fr;
        -ms-grid-rows: 50px (auto)[4];
        grid-template-rows: 50px repeat(4, auto);
    }

    .c2-main > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(3) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(5) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(6) {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(7) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(8) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(9) {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(10) {
        -ms-grid-row: 5;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(1) {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(2) {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(3) {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(4) {
        -ms-grid-row: 2;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(5) {
        -ms-grid-row: 3;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(6) {
        -ms-grid-row: 3;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(7) {
        -ms-grid-row: 4;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(8) {
        -ms-grid-row: 4;
        -ms-grid-column: 2;
    }

    .c2-main > *:nth-child(9) {
        -ms-grid-row: 5;
        -ms-grid-column: 1;
    }

    .c2-main > *:nth-child(10) {
        -ms-grid-row: 5;
        -ms-grid-column: 2;
    }

    .c2-title-1 {
        display: block;
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
        grid-row: 1;
        background-color: #2f6b9b;
        border-right: 1px solid #fdfdfd;
        text-align: center;
        -ms-flex-line-pack: center;
            align-content: center;
        color: #fdfdfd;
    }

    .c2-content-1 {
        display: block;
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 1;
        grid-row: 1;
        background-color: #2f6b9b;
        text-align: center;
        -ms-flex-line-pack: center;
            align-content: center;
        color: #fdfdfd;
    }

    .c2-title-2 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 2;
        grid-row: 2;
        border-right: 1px solid #fdfdfd;
        border-bottom: 1px solid #fdfdfd;
    }

    .c2-content-2 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 2;
        grid-row: 2;
        border-bottom: 1px solid #2f6b9b;
    }

    .c2-title-3 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 3;
        grid-row: 3;
        border-right: 1px solid #fdfdfd;
        border-bottom: 1px solid #fdfdfd;
    }

    .c2-content-3 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 3;
        grid-row: 3;
        border-bottom: 1px solid #2f6b9b;
    }

    .c2-title-4 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 4;
        grid-row: 4;
        border-right: 1px solid #fdfdfd;
        border-bottom: 1px solid #fdfdfd;
    }

    .c2-content-4 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 4;
        grid-row: 4;
        border-bottom: 1px solid #2f6b9b;
    }

    .c2-title-5 {
        -ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 5;
        grid-row: 5;
        border-right: 1px solid #fdfdfd;
        border-bottom: 1px solid #fdfdfd;
    }

    .c2-content-5 {
        -ms-grid-column: 2;
        grid-column: 2;
        -ms-grid-row: 5;
        grid-row: 5;
        border-bottom: 1px solid #2f6b9b;
    }
}

/* ##### 画面の横幅1300ピクセル以上 ##### */
@media (min-width: 1300px) {

    .c2-main {
        -ms-grid-columns: 280px 1fr;
        grid-template-columns: 280px 1fr;
    }
}