@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.blog {
    /*padding-top: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px);*/
    padding-bottom: clamp(48px, calc(100vw * (61 / var(--innerContainerSize))), 61px);
}

    .blog__inner { margin-bottom: 40px }

        .blog__block::after {
            content: "";
            display: block;
            clear: both;
        }
        .blog__block + .blog__block { margin-top: 65px }

            @media screen and (min-width: 768px) {
                .blog__block img.image-left {
                    float: left;
                    margin-right: max(24px, calc(100% * (55 / 1280)));
                }
                .blog__block img.image-right {
                    float: right;
                    margin-left: max(24px, calc(100% * (28 / 1280)));
                }
                .blog__block :is(img.image-left, img.image-right) { max-width: 50% }
            }
            @media screen and (max-width: 767px) {
                .blog__block img {
                    width: fit-content;
                    margin-inline: auto;
                    margin-bottom: 32px;
                }
            }

            .blog__block h2 {
                margin-bottom: 10px;
                font-family: var(--font);
                font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                font-weight: 400;
                line-height: calc(26 / 24);
                letter-spacing: .05em;
            }

            .blog__block p {
                margin-block: 32px;
                font-size: clamp(1.6rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
                line-height: calc(34 / 18);
                letter-spacing: .05em;
            }

            .blog__block p.date {
                margin-top: 0;
                margin-bottom: 37px;
                font-size: 1.2rem;
                line-height: 1.5;
                letter-spacing: .05em;
            }


    .blog__staff { margin-bottom: clamp(48px, calc(100vw * (70 / var(--innerContainerSize))), 70px) }

        .blog__staff__title {
            margin-bottom: calc(1em * (17 / 24));
            color: var(--primaryColor-800);
            font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
            line-height: calc(32 / 24);
        }

        .blog__staff__content {
            display: grid;
            grid-template-columns: clamp(96px, calc(100vw * (260 / var(--innerContainerSize))), 260px) 1fr;
            grid-column-gap: clamp(16px, calc(100vw * (30 / var(--innerContainerSize))), 30px);
        }

            .blog__staff__image {
                width: 100%;
                height: fit-content;
                padding: clamp(4px, calc(100vw * (10 / var(--innerContainerSize))), 10px);
                border: 2px solid var(--primaryColor-800);
                border-radius: 10px;
            }
            .blog__staff__image img {
                aspect-ratio: 236 / 156;
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 10px;
            }

            .blog__staff__details {}

                .blog__staff__name {
                    margin-bottom: calc(1em * (7 / 30));
                    color: var(--primaryColor-800);
                    font-size: clamp(2.4rem, calc(100vw * (30 / var(--innerContainerSize))), 3.0rem);
                    line-height: calc(32 / 30);
                    letter-spacing: .05em;
                }

                .blog__staff__job {
                    margin-bottom: 0.9375em;
                    font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                    font-weight: 500;
                    line-height: 1.5;
                }

                .blog__staff__comment {
                    margin-bottom: 1.1875em;
                    font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
                    line-height: 1.625;
                    letter-spacing: .05em;
                }

                .blog__staff__button {
                    display: flex;
                    column-gap: 0.4em;
                    font-family: var(--fontEn);
                    font-size: clamp(1.6rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                    line-height: 1.15;
                }
                .blog__staff__button::after {
                    content: "";
                    width: 1.15em;
                    height: 1.15em;
                    background-image: url(../images/common/icon-button-faq.png);
                    background-image:
                        image-set(
                            url(../images/common/icon-button-faq.png) 1x,
                            url(../images/common/icon-button-faq@2x.png) 2x
                        );
                    background-image:
                        -webkit-image-set(
                            url(../images/common/icon-button-faq.png) 1x,
                            url(../images/common/icon-button-faq@2x.png) 2x
                        );
                    background-size: contain;
                }


    .blog__comment { margin-bottom: clamp(48px, calc(100vw * (55 / var(--innerContainerSize))), 55px) }

        .blog__comment__list {
            display: flex;
            flex-direction: column;
            row-gap: 24px;
        }

            .blog__comment__item {
                padding-top: clamp(24px, calc(100vw * (44 / var(--innerContainerSize))), 44px);
                padding-inline: clamp(16px, calc(100vw * (70 / var(--innerContainerSize))), 70px);
                padding-bottom: clamp(28px, calc(100vw * (49 / var(--innerContainerSize))), 49px);
                border-radius: 10px;
                background-color: var(--primaryColor-100);
            }

                .blog__comment__status {
                    margin-bottom: clamp(12px, calc(100vw * (19 / var(--innerContainerSize))), 19px);
                    font-size: clamp(1.6rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                    font-weight: 500;
                    line-height: 1.4;
                    letter-spacing: .05em;
                }
                .blog__comment__status span {
                    margin-left: 1em;
                    font-size: 0.7em;
                }

                .blog__comment__text {
                    font-size: clamp(1.4rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
                    line-height: calc(32 / 18);
                    letter-spacing: .05em;
                }


    .blog__form { padding-bottom: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px) }

    .blog__nav {
        display: flex;
        justify-content: space-between;
        column-gap: 24px;
        border-top: 2px solid var(--primaryColor-500);
        padding-top: 18px;
        margin-bottom: clamp(48px, calc(100vw * (64 / var(--innerContainerSize))), 64px)
    }

        .blog__nav a {
            display: flex;
            column-gap: calc(1em * (12 / 18));
            font-family: var(--fontEn);
            font-size: clamp(1.4rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
            line-height: calc(32 / 18);
            letter-spacing: .05em;
        }
        .blog__nav a.blog__prev::before,
        .blog__nav a.blog__archive__link::after,
        .blog__nav a.blog__next::after {
            content: "";
            display: block;
            width: calc(1em * (32 / 18));
            height: calc(1em * (32 / 18));
            background-repeat: no-repeat;
            background-size: contain;
        }
        .blog__nav a.blog__prev::before { background-image: url(../images/blog/icon-archive-prev.jpg) }
        .blog__nav a.blog__archive__link::after { background-image: url(../images/blog/icon-archive.jpg) }
        .blog__nav a.blog__next::after { background-image: url(../images/blog/icon-archive-next.jpg) }
        @media screen and (max-width: 767px) {
            .blog__nav a.blog__archive__link {
                text-indent: -9999px;
                column-gap: 0;
            }
        }


    .archive { padding-bottom: clamp(96px, calc(100vw * (98 / var(--innerContainerSize))), 98px) }

        .archive__title {
            margin-bottom: calc(1em * (11 / 24));
            color: var(--primaryColor-800);
            font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
            line-height: calc(32 / 24);
        }

        .archive__list { border-bottom: 1px dashed #999 }

            .archive__item {
                padding-block: max(12px, 1.171875%);
                border-top: 1px dashed #999;
            }

                .archive__link {
                    display: grid;
                    grid-template-columns: 72px 1fr;
                    column-gap: 11px;
                    transition: opacity .15s var(--easeOutQuart);
                }
                .archive__link:hover { opacity: 0.8 }

                    .archive__image {
                        width: 100%;
                        height: fit-content;
                        border: 4px solid var(--primaryColor-500);
                        border-radius: 100%;
                        overflow: hidden;
                        height: 72px;
                    }

                    .archive__image img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .archive__label {
                        margin-bottom: 7px;
                        font-family: var(--font);
                        font-size: clamp(2.0rem, calc(100vw * (24 / var(--innerContainerSize))), 2.4rem);
                        line-height: calc(34 / 24);
                    }

                    .blog__staff__button {
                        display: flex;
                        column-gap: 0.4em;
                        font-family: var(--fontEn);
                        font-size: clamp(1.6rem, calc(100vw * (20 / var(--innerContainerSize))), 2.0rem);
                        line-height: 1.15;
                    }
                    .blog__staff__button::after {
                        content: "";
                        width: 1.15em;
                        height: 1.15em;
                        background-image: url(../images/common/icon-button-faq.png);
                        background-image:
                            image-set(
                                url(../images/common/icon-button-faq.png) 1x,
                                url(../images/common/icon-button-faq@2x.png) 2x
                            );
                        background-image:
                            -webkit-image-set(
                                url(../images/common/icon-button-faq.png) 1x,
                                url(../images/common/icon-button-faq@2x.png) 2x
                            );
                        background-size: contain;
                    }