@charset "utf-8";

.article_body {
    background: var(--color-white);
    overflow: hidden;
}
.article_tag_wrap {
    display: flex;
    flex-wrap: wrap;
}
.article_body_tag {
    background: var(--color-black);
    color: var(--color-white);
}
.article_body_category {
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-black);
}
.article_body_town {
    background-color: #ccc;
    color: var(--color-black);
}

.article_body_ttl {
    border-bottom: 1px solid var(--color-black);
}
.article_body_ttl_client,
.article_body_ttl_main {
    display: block;
    font-weight: 700;
}
.article_body_main {
    word-break: break-word;
}
.pdf_wrap {
    display: flex;
    justify-content: start;
}
.pdf_link {
    display: flex;
    align-items: center;
}
.pdf_link_txt {
    flex: 1;
    line-height: calc(32 / 16);
}
.article_body_sns {
    display: flex;
    justify-content: flex-end;
}

.back_btn_wrap {
    display: flex;
    justify-content: center;
}
.back_btn {
    background: var(--theme-color);
    color: var(--color-white);
    font-weight: 700;
}
.back_btn_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.back_btn_txt {
    position: relative;
    z-index: 1;
    color: var(--color-white);
}
.template_img_list {
    display: flex;
    justify-content: center;
    align-items: baseline;
}
.template_img_list:not(:has(li)) {
    display: none;
}
.template_img_list > li {
    flex: 1;
}
.template_img_list img {
    width: 100%;
}
@media (min-width: 769px) {
    .article_body {
        padding: 80rem 120rem;
    }
    .article_body_ttl {
        padding-bottom: 32rem;
    }
    .article_tag_wrap {
        gap: 4rem;
        margin-top: 13rem;
    }
    .article_body_date {
        font-size: 16rem;
        line-height: calc(24 / 16);
        margin-top: 19rem;
    }
    .article_body_sns {
        gap: 14rem;
    }
    .article_body_sns:has(a) {
        margin-top: 16rem;
    }
    .article_body_sns img,
    .article_body_sns svg {
        width: 20rem;
        height: auto;
    }
    .article_body_tag {
        font-size: 12rem;
        line-height: 1;
        padding: 5rem 7rem;
    }
    .article_body_ttl_client {
        font-size: 20rem;
        line-height: calc(36 / 20);
    }
    .article_body_ttl_main {
        font-size: 36rem;
        line-height: calc(50 / 36);
        margin-top: 1rem;
    }
    .article_body_main {
        margin-top: 32rem;
    }
    .pdf_wrap {
        margin-top: 43rem;
    }
    .pdf_link {
        gap: 20rem;
    }
    .pdf_link_icon {
        width: 52rem;
    }
    .pdf_link_txt {
        font-size: 16rem;
        line-height: calc(32 / 16);
    }
    @media (hover: hover) {
        .pdf_link:hover {
            text-decoration: underline;
            text-underline-offset: 8rem;
        }
        .article_body_sns a {
            transition: opacity 0.4s;
        }
        .article_body_sns a:hover {
            opacity: 0.7;
        }
    }

    .pager {
        margin-top: 60rem;
    }
    .back_btn {
        --btn-width: 160rem;
    }
    .template_txt {
        font-size: 16rem;
        line-height: calc(28 / 16);
        margin-top: 40rem;
    }
    .template_img_list {
        gap: 25rem;
        margin-top: 40rem;
    }
    .template_img_cap {
        font-size: 16rem;
        margin-top: 12rem;
    }
}
@media (max-width: 768px) {
    .subpage_ttl + .inner {
        padding-top: 165rem;
    }
    .article_body {
        padding: 92rem 40rem;
    }
    .article_body_ttl {
        padding-bottom: 40rem;
    }
    .article_body_head {
        gap: 10rem;
    }
    .article_body_date {
        font-size: 32rem;
        line-height: calc(24 / 16);
        margin-top: 29rem;
    }
    .article_tag_wrap {
        gap: 8rem;
        margin-top: 18rem;
    }
    .article_body_tag {
        font-size: 24rem;
        line-height: 1;
        padding: 8rem 14rem;
    }
    .article_body_ttl_client {
        font-size: 40rem;
        line-height: calc(36 / 24);
    }
    .article_body_ttl_main {
        font-size: 52rem;
        line-height: calc(80 / 52);
        margin-top: -2rem;
    }
    .article_body_main {
        margin-top: 40rem;
    }
    .article_body_sns {
        gap: 14rem;
    }
    .article_body_sns:has(a) {
        margin-top: 16rem;
    }
    .article_body_sns img {
        width: 48rem;
        height: auto;
    }
    .pdf_wrap {
        margin-top: 45rem;
    }
    .pdf_link {
        gap: 18rem;
        width: 300rem;
        margin-inline: auto;
    }
    .pdf_link_icon {
        width: 50rem;
    }
    .pdf_link_txt {
        font-size: 16rem;
        line-height: calc(32 / 16);
    }
    .pager {
        margin-top: 104rem;
    }
    .template_txt {
        font-size: 32rem;
        line-height: calc(28 / 16);
        margin-top: 80rem;
    }
    .template_img_list {
        flex-direction: column;
        gap: 48rem;
        margin-top: 80rem;
    }
    .template_img_cap {
        font-size: 32rem;
        margin-top: 14rem;
    }
}

.pager {
    display: flex;
    justify-content: center;
}
.prev_btn_wrap,
.next_btn_wrap {
    width: 64rem;
    height: 64rem;
}
.prev_btn,
.next_btn {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--theme-color);
    box-shadow: var(--box-shadow);
}
.is_hide .prev_btn,
.is_hide .next_btn {
    display: none;
}
.prev_btn svg,
.next_btn svg {
    content: '';
    position: relative;
    z-index: 5;
    display: block;
}
.prev_btn_inner,
.next_btn_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
@media (min-width: 769px) {
    .pager {
        gap: 10rem;
    }
    .prev_btn_wrap,
    .next_btn_wrap {
        width: 64rem;
        height: 64rem;
    }
    .prev_btn,
    .next_btn {
        padding: 4rem;
    }
    .prev_btn svg,
    .next_btn svg {
        width: 20rem;
        height: 15rem;
    }
    @media (hover: hover) {
        .prev_btn_inner::before,
        .next_btn_inner::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: var(--color-white);
            scale: 0;
            transition: scale 0.4s;
        }
        .prev_btn:hover .prev_btn_inner::before,
        .next_btn:hover .next_btn_inner::before {
            scale: 1;
        }
        .prev_btn svg path,
        .next_btn svg path {
            transition: fill 0.4s;
        }
        .prev_btn:hover svg path,
        .next_btn:hover svg path {
            fill: var(--theme-color) !important;
        }
    }
}
@media (max-width: 768px) {
    .pager {
        gap: 30rem;
    }
    .back_btn {
        --btn-width: 320rem;
        font-size: 36rem;
    }
    .prev_btn_wrap,
    .next_btn_wrap {
        width: 130rem;
        height: 130rem;
    }
    .prev_btn,
    .next_btn {
        width: 130rem;
        height: 130rem;
        padding: 4rem;
    }
    .prev_btn svg,
    .next_btn svg {
        width: 40rem;
        height: 30rem;
    }
}