@charset "utf-8";

.entry,
#sidebar {
    margin-top: 2vmax;
}

/* ////////////////////////////////////////////
*                entry-content
* //////////////////////////////////////////// */
.entry-list .image {
    width: 30%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    margin-right: 1em;
    overflow: hidden;
    border-radius: 10px;
}

.entry-list .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.entry-archive-ttl {
    color: var(--main-color);
    font-size: 2.6rem;
    margin: 0 0 1.5em 0;
    padding: 1em 0;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 800;
    margin-top: 2vmax;

}

.entry-list-ttl {
    font-size: 2rem;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
    font-weight: 600;
}

@media screen and (max-width:768px) {
    .entry-list {
        padding-bottom: 2vmax;
        border-bottom: 1px solid #ccc;

    }

    .entry-list .image {
        width: 100px;
        height: 100px;
    }

    .entry-list .image img {
        width: 100px;
        height: 100px;
        object-fit: cover;

    }

    .entry-list-ttl {
        font-size: 1.8rem;
        border-bottom: none;
        line-height: 1.4;
    }

}


/* ////////////////////////////////////////////
*                entry-content
* //////////////////////////////////////////// */


.entry-content {
    word-break: break-all;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
    text-align: left;
    font-size: 1.7rem;
    max-width: 1080px;
    margin: 0 auto;

}

.entry-content p {
    margin-bottom: 1.5em;
}

.entry-content p a:not([class]),
.entry-content li a:not([class]),
.entry-content td a:not([class]) {
    color: #3d93e7;
    text-decoration: underline;
}

.entry-content ul:not([class]) {
    margin-left: 2.5em;
    margin-right: 1em;
}

.entry-content ul:not([class]) li {
    margin-bottom: 1em;
}

.entry-content ul:not([class]) li::before {
    content: '\f111';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    color: var(--main-color);
    margin-right: 0.5em;
    margin-left: -1.5em;
}

.entry-content ol:not([class]) {
    margin-left: 2.5em;
    margin-right: 1em;
}

.entry-content ol:not([class]) li {
    margin-bottom: 1em;
    list-style-type: decimal
}

.entry-content strong {
    font-weight: bold;
}

.entry-content .entry-title {
    color: var(--main-color);
    font-size: 2.6rem;
    margin: 0 0 1.5em 0;
    padding: 1em 0;
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 800;
}

.entry-content h2:not([class]) {
    font-size: 2.4rem;
    font-weight: 800;
    /* タイトルのフォントサイズ */
    color: var(--main-color);
    /* タイトルの色 */
    margin-bottom: 1.5rem;
    /* タイトルの下のマージン */
    /* 下線 */
    padding: 0.5em 1em;
    border-radius: 10px;
    /* 下線までのパディング */
    background: #e3e4f1;
}


.entry-content h2:not([class]):first-of-type,
.entry-content h3:not([class]):first-of-type {
    margin-top: 0;
}

.entry-content h3:not([class]) {
    font-size: 2.2rem;
    margin: 1.5em 0 0.8em 0;
    padding: 0.5em 0;
    position: relative;
    border-bottom: 1px solid #ececec;
    font-weight: 600;
    color: var(--main-color);
}

.entry-content h3:not([class])::before,
.entry-content .title-h3::before {
    content: '\f138';
    font-weight: 600;
    font-family: 'Font Awesome 5 Pro';
    color: #3d93e7;
    margin-right: 0.5em;
}

.entry-content h4:not([class]) {
    color: #715959;
    margin: 1.5em 0 0.8em 0;
    font-size: 2rem;
    margin: 0vmax 0 1em 0;
    position: relative;
    font-weight: bold;
}


.entry-content h5:not([class]) {
    color: #715959;
    font-size: 1.8rem;
    margin: 1vmax 0 0.5em 0;
    position: relative;
}

.entry-content h5:not([class])::before,
    {
    content: '\f138';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    color: #5f89d2;
    margin-right: 0.5em;
}

@media screen and (max-width:768px) {

    .entry-title,
    .entry-content h2:not([class]) {
        font-size: 2.2rem;
    }


    .entry-content h3:not([class]) {
        font-size: 2rem;
    }


    .entry-content h4:not([class]) {
        font-size: 2rem;
    }


    .entry-content h5:not([class]) {
        font-size: 1.8rem;
    }


}

.sc_frame_title {
    padding: 0.3em 1em;
    color: #fff;
    background: rgb(168, 215, 178) !important;
    background: linear-gradient(90deg, rgba(168, 215, 178, 1) 0%, rgba(86, 182, 218, 1) 100%) !important;
    margin-bottom: 0.5em;
    font-weight: bold;
}


/* ////////////////////////////////////////////
*                 pagination
* //////////////////////////////////////////// */
.pagination a {
    padding: 0.4em 0.8em;
    margin-bottom: 6vmax;
    display: inline-block;
    border: solid 1px #ccc;
    background-color: #fff;
    font-size: 1.6rem;
    text-decoration: none
}

.pagination a:hover {
    background-color: #e8e8e8
}

.pagination span {
    padding: 0.2em 0.8em;
    display: inline-block
}

.pagination span.current {
    padding: 0.4em 0.8em;
    color: #fff;
    font-size: 1.6rem;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
}

.pagination {
    position: relative !important;
    overflow: hidden;
    margin: 2vw 0;
    text-align: center;
    clear: both;
    background-color: transparent
}

.pagination h2.screen-reader-text {
    display: none
}

/* ////////////////////////////////////////////
*               sidenav
* //////////////////////////////////////////// */


.side-nav-title {
    background: rgb(92, 195, 225);
    background: linear-gradient(90deg, rgba(92, 195, 225, 1) 0%, rgba(75, 156, 231, 1) 50%, rgba(82, 106, 194, 1) 100%);
    padding: 0.5em 1em;
    border-radius: 5px;
    color: #fff;
    font-weight: 800;
}

.side-nav-list {
    margin: 1em;
}

.side-nav-list li {
    margin: 1em;
}

.side-nav-list li a::before {
    content: '\f105';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    margin-right: 0.5em;
}