@charset "utf-8";

/* ==================================================================

    blog.css

=================================================================== */

/* --------------------------------
■共通
-------------------------------- */

/* --------------------------------
■blogList
-------------------------------- */

/* ◆ ページ内容情報(メイン)
-------------------------------- */
.chapter .mainArea {
    width: calc( 100% - 210px - 32px);
    max-width: 913px;
}

#blogList {
    padding-top: 100px;
}
#blogList ul.blog_list {
    gap: 48px 32px;
}
#blogList ul.blog_list li {
    width: calc(( 100% - 32px) / 2)
}
#blogList figcaption {
    margin-top: 20px;
}
#blogList figcaption p {
    line-height: 1.2;
}
#blogList a.scaleUp figure p {
    overflow: hidden;
}
#blogList a figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 441/312;
    transition: 0.5s all;
}
#blogList a:hover figure img {
    transform: scale(1.1);
    transition: 0.5s all;
}
#blogList figcaption .ttl {
    font-size: 2.2rem;
    font-weight: 600;
}
#blogList figcaption .tag {
    font-size: var(--font-size13);
    color: var(--text-color-gray);
}
#blogList figcaption .skd {
    font-size: var(--font-size13);
    letter-spacing: 0.04em;
}

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

    #blogList ul.blog_list {
        gap: 40px 32px;
    }
}

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

    #blogList {
        padding-top: 60px;
    }
    #blogList.flex_box.gap32 {
        gap: 60px;
    }
    #blogList ul.blog_list {
        gap: 32px;
    }
}

/* ◆ ページ内容情報(サブ)
-------------------------------- */
.chapter .subArea {
    width: 210px;
    flex-shrink: 0;
}

.subArea .sidenavi:not(:last-of-type) {
    margin-bottom: 40px;
}
.subArea .sidenavi#archive ul {
    max-height: 345px;
    overflow-y: scroll;
    scrollbar-color: #284B7D #ECECEC;
}
.subArea .sidenavi li {
    margin-bottom: 10px;
}
.subArea .sidenavi li a {
    font-size: var(--font-size-s);
    letter-spacing: 0;
    transition: 0.3s;
}
    .subArea .sidenavi li a:hover {
        opacity: 0.7;
    }
.subArea .sidenavi li .title.lv6 {
    margin-bottom: 20px;
}

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

    .subArea .sidenavi li a {
        font-size: var(--font-size14);
    }
}


/* --------------------------------
■blogDetails
-------------------------------- */
#accentBox.plain .lv1 .jp {
    display: block;
    font-size: var(--font-size14);
    margin-top: 0px;
    margin-bottom: 15px;
}
#accentBox.plain .lv1 .en {
    display: block;
    font-size: var(--font-size-ss);
    letter-spacing: 0.04em;
    margin-top: 15px;
}

#blogDetails {
    padding-top: 0;
}
#blogDetails .sentence {
    margin: 40px auto 60px;
}
#blogDetails .sentence p {
    font-size: var(--font-size-m);
    line-height: 1.8;
}
#blogDetails .sentence * + .title,
#blogDetails .sentence p + p {
    margin-top: 43px
}

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

    #blogDetails .sentence {
        margin: 40px auto;
    }
}

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

    #blogDetails .sentence p {
        font-size: var(--font-size-s);
    }
    #blogDetails .sentence * + .title,
    #blogDetails .sentence p + p {
        margin-top: 30px;
    }
}