/* ===================================
   ブログ専用CSS
   =================================== */

.l_blog_wrapper {
    max-width: 1148px;
    width: 100%;
    margin: 0 auto 7.5rem;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: auto 280px;
    gap: 3rem;
    align-items: flex-start;
}

.l_blog_wrapper.article .l_blog_under {
    grid-column: 1 / -1;
}

.l_blog_main {
    min-width: 0;
    border-top: 1px solid var(--line-solid);
    padding-top: 1.5rem;
}

.l_blog_side {
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-solid);
    line-height: 1.5;
    position: sticky;
    top: 6rem;
}

.l_blog_side_list {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px dotted var(--line-solid);
}

.l_blog_side_list:last-of-type {
    border-bottom: none;
}

.l_blog_side_list h3 {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.l_blog_side_category,
.l_blog_side_tag {
    display: flex;
    gap: .5rem 1rem;
    flex-wrap: wrap;
}

.l_blog_side_category li,
.l_blog_article_category li {
    display: inline-block;
    padding: .125rem 0.325rem;
    font-size: clamp(0.625rem, 0.5563rem + 0.2817vw, 0.75rem);
    line-height: 1.5;
    color: var(--sub-text);
    border: 1px solid var(--line-solid);
    border-radius: var(--border-radius-normal);
    white-space: nowrap;
}

.l_blog_side_category li:hover {
    background: var(--line-solid);
    color: var(--c-white);
}

.l_blog_side_tag li,
.l_blog_article_tag li {
    display: inline-block;
    font-size: clamp(0.625rem, 0.5563rem + 0.2817vw, 0.75rem);
    line-height: 1.5;
    color: var(--sub-text);
    white-space: nowrap;
}

.l_blog_side_tag li::before,
.l_blog_article_tag li::before {
    content: "#";
}

.l_blog_side_tag li:hover {
    text-decoration: underline;
}

.l_blog_side_banner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.l_blog_side_banner a {
    display: block;
    transition: opacity 0.3s;
}

.l_blog_side_banner a:hover {
    opacity: 0.8;
}

.l_blog_side_banner img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-normal);
}

/* 記事下部CTAバナー */
.l_blog_cta_banner {
    max-width: 1148px;
    width: 100%;
    margin: 0 auto 5rem;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.l_blog_cta_banner a {
    display: block;
    max-width: 900px;
    width: 100%;
    transition: opacity 0.3s;
}

.l_blog_cta_banner a:hover {
    opacity: 0.8;
}

.l_blog_cta_banner img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-normal);
}

@media screen and (max-width: 768px) {
    .l_blog_wrapper {
        grid-template-columns: auto;
        gap: 1.5rem;
    }

    .l_blog_main {
        border-top: none;

    }

    .l_blog_side {
        width: 100%;
        order: -1;
        padding-top: 1rem;
    }

    .l_blog_side_list {
        border-bottom: none;
        padding-bottom: .5rem;
        margin-bottom: .5rem;
    }

    .l_blog_side_list h3 {
        display: none;
    }
}

/* ========== 一覧ページ ========== */
.l_blog_new_item,
.l_blog_item {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--line-solid);
}

.l_blog_new_item a,
.l_blog_item a {
    display: flex;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: var(--border-radius-normal);
    transition: background-color 0.2s;
}

.l_blog_item a:hover {
    background-color: var(--cp-background, #f5f7fa);
}

.l_blog_new_item a .l_blog_new_img,
.l_blog_item a .l_blog_img {
    height: auto;
    aspect-ratio: 5 / 3;
    flex-shrink: 0;
    overflow: hidden;
    align-self: flex-start;
}

.l_blog_new_item a .l_blog_new_img {
    width: 51.8%;
}

.l_blog_item a .l_blog_img {
    width: 25.9%;
}

.l_blog_new_item a .l_blog_new_img img,
.l_blog_item a .l_blog_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius-normal);
}

.l_blog_detail {
    flex: 1;
    position: relative;
}

.l_blog_detail::before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-blue);
    width: 20px;
    height: 20px;
    border-radius: .125rem;
    flex-shrink: 0;
}

.l_blog_detail::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent var(--c-white);
    position: absolute;
    right: 6px;
    bottom: 6px;
}

.l_blog_sub {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    line-height: 1;
}

.l_blog_data {
    font-family: "Roboto", sans-serif;
    font-size: .75rem;
}

.l_blog_article_category,
.l_blog_article_tag {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.l_blog_title {
    font-size: clamp(0.875rem, 0.7377rem + 0.5634vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-bottom: .5rem;
}

.l_blog_title.new {
    -webkit-line-clamp: 4;
}

.l_blog_article_tag {
    margin-bottom: .5rem;
}

.l_blog_name {
    font-size: .75rem;
    color: var(--sub-text);
    font-weight: 600;
}


@media screen and (max-width: 768px) {
    .l_blog_list {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .l_blog_list .l_blog_item {
        width: calc(50% - .75rem)
    }

    .l_blog_new_item a,
    .l_blog_item a {
        flex-direction: column;
    }

    .l_blog_new_item a .l_blog_new_img,
    .l_blog_item a .l_blog_img {
        width: 100%;
    }

    .l_blog_title.new {
        -webkit-line-clamp: 2;
    }
}

/* ========== 詳細ページ ========== */
/* title */
.l_blog_wrapper.article .l_blog_main .l_blog_article_head {
    margin-bottom: 3.5rem;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_sub .l_blog_article_name a {
    font-size: .875rem;
    font-weight: 600;
    color: var(--sub-text);
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_sub .l_blog_article_name a:hover {
    opacity: .6;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_sub .l_blog_article_data {
    display: flex;
    gap: .5rem;
    line-height: 1.5;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_sub .l_blog_article_data time:first-of-type {
    border-right: 1px solid var(--line-solid);
    padding-right: .5rem;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_sub .l_blog_article_data time {
    font-size: .75rem;
    color: var(--sub-text);
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_sub .l_blog_article_data time span {
    font-family: "Roboto", sans-serif;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_head h1 {
    font-weight: 600;
    font-size: clamp(1.25rem, 0.9754rem + 1.1268vw, 1.75rem);
    line-height: 1.5;
    margin-bottom: .5rem;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_head .l_blog_article_category,
.l_blog_wrapper.article .l_blog_main .l_blog_article_head .l_blog_article_tag {
    margin: 0 0 .25rem 0;
}

/* thumbnail */
.l_blog_wrapper.article .l_blog_main .l_blog_article_thumbnail {
    height: auto;
    aspect-ratio: 5 / 3;
    flex-shrink: 0;
    overflow: hidden;
}

.l_blog_wrapper.article .l_blog_main .l_blog_article_thumbnail img {
    width: 100%;
}

/* index */
.l_blog_wrapper.article .l_blog_main #toc_container {
    display: flex;
    gap: 2.5rem;
    border-top: 1px solid var(--line-solid);
    border-bottom: 1px solid var(--line-solid);
    padding: 1.5rem 0;
    margin: 5rem 0;
}

.l_blog_wrapper.article .l_blog_main #toc_container .toc_title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0;
}

.l_blog_wrapper.article .l_blog_main #toc_container .toc_list {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.l_blog_wrapper.article .l_blog_main #toc_container .toc_list li {
    margin-bottom: 0.75rem;
}

.l_blog_wrapper.article .l_blog_main #toc_container .toc_list li:last-child {
    margin-bottom: 0;
}

.l_blog_wrapper.article .l_blog_main #toc_container .toc_list li a {
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--c-navy);
    text-decoration: none;
}

.l_blog_wrapper.article .l_blog_main #toc_container .toc_list li a::before {
    content: "";
    background: url(/wp-content/themes/chatplus/assets/img/common/index_arrow.svg);
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
}

.l_blog_wrapper.article .l_blog_main #toc_container .toc_list li a:hover {
    opacity: .6;
}

/* article_decoration  */
.l_blog_wrapper.article .l_blog_main h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 5rem 0 2.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--c-navy);
    line-height: 1.5;
}

.l_blog_wrapper.article .l_blog_main h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2rem 0 1.5rem;
    padding-left: .5rem;
    border-left: 2px solid var(--c-navy);
    line-height: 1.5;
}

.l_blog_wrapper.article .l_blog_main h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 2rem 0 1.5rem;
    padding-left: 1rem;
    line-height: 1.5;
    position: relative;
}

.l_blog_wrapper.article .l_blog_main h4::before {
    background: var(--c-navy);
    content: "";
    height: 8px;
    width: 8px;
    left: 0;
    position: absolute;
    top: 12px;
}

.l_blog_wrapper.article .l_blog_main h5 {
    position: relative;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 2rem 0 1.5rem;
    line-height: 1.5;
    padding-left: calc(60px + 1rem);
}

.l_blog_wrapper.article .l_blog_main h5::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 0;
    width: 60px;
    height: 1px;
    background: var(--c-navy);
    margin-right: 1rem;
}

.l_blog_wrapper.article .l_blog_main h6 {
    font-weight: 600;
}

.l_blog_wrapper.article .l_blog_main h6::after {
    content: "：";
}

.l_blog_wrapper.article .l_blog_main p {
    margin-bottom: 2rem;
}

.l_blog_wrapper.article .l_blog_main strong {
    font-weight: 600;
    background: linear-gradient(transparent 70%, #FBED8B 70%);
}

.l_blog_wrapper.article .l_blog_main figure {
    margin: 2.5rem 0;
}

.l_blog_wrapper.article .l_blog_main figure img {
    width: 100%;
}

.l_blog_wrapper.article .l_blog_main figcaption {
    margin-top: .5rem;
    font-size: clamp(0.75rem, 0.6813rem + 0.2817vw, 0.875rem);
    line-height: 2;
    text-align: left;
    margin-bottom: 2.5rem;
}

.l_blog_wrapper.article .l_blog_main ul {
    list-style: inside;
    margin: 2rem 0;
}

.l_blog_wrapper.article .l_blog_main a {
    color: var(--cp-blue);
    font-weight: 600;
}

.l_blog_wrapper.article .l_blog_main a[target="_blank"]::before {
    font-family: 'Material Icons Round';
    content: "open_in_new";
    margin-right: .125rem;
    color: var(--cp-blue);
    font-weight: bold;
    vertical-align: -.1rem;
}

.l_blog_wrapper.article .l_blog_main blockquote {
    background-color: var(--cp-background);
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: var(--border-radius-normal);
}

/* article_bottom */
.l_blog_share {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--line-solid);
    margin-bottom: 2.5rem;
    font-size: .875rem;
    line-height: 1;
}

.l_blog_share_list {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.copy-url-btn {
    cursor: pointer;
    position: relative;
}

.copy-url-btn:hover {
    opacity: .6;
}

.copy-url-btn::after {
    content: "コピーしました";
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--sub-text);
    color: var(--c-white);
    padding: .25rem .5rem;
    border-radius: var(--border-radius-normal);
    font-size: .75rem;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.copy-url-btn.is-copied::after {
    opacity: 1;
}

.l_blog_backlist a {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
}

.l_blog_backlist a::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-blue);
    width: 20px;
    height: 20px;
    border-radius: .125rem;
    flex-shrink: 0;
}

.l_blog_backlist a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 6px 4px 0;
    border-color: transparent var(--c-white) transparent transparent;
    position: absolute;
    left: 6px;
}

.l_blog_backlist a:hover {
    opacity: .6;
}

/* profile */
.l_blog_profile_wrapper {
    margin: 5rem 0;
    padding: 1.5rem;
    border: 1px solid var(--line-solid);
    border-radius: var(--border-radius-normal);
}

.l_blog_profile_sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .75rem;
    line-height: 1.5;
    border-bottom: 1px solid var(--line-solid);
    padding-bottom: .5rem;
    margin-bottom: 1rem;
}

.l_blog_profile_wrapper .l_blog_profile_sub .l_blog_profile_title {
    font-weight: 600;
}

.l_blog_profile_wrapper .l_blog_profile_sub .l_blog_profile_link a {
    padding: .125rem .5rem;
    font-weight: 400;
    color: var(--c-navy);
    border: 1px solid var(--line-solid);
    border-radius: var(--border-radius-capsule);
    background: var(--c-white);
}

.l_blog_profile_wrapper .l_blog_profile_sub .l_blog_profile_link a:hover {
    background: var(--line-solid);
    color: var(--c-white);
}

.l_blog_profile_wrapper .l_blog_profile_note {
    display: flex;
    gap: 1rem;
    font-size: .875rem;
}

.l_blog_profile_wrapper .l_blog_profile_note .l_blog_profile_name {
    width: 130px;
    font-weight: 600;
}

.l_blog_profile_wrapper .l_blog_profile_note .l_blog_profile_content .l_blog_profile_job_categories {
    margin-bottom: .5rem;
}

.l_blog_profile_wrapper .l_blog_profile_note .l_blog_profile_content .l_blog_profile_txt {
    margin-bottom: 0;
}

/* 関連記事 */
.l_blog_relation_wrapper {
    max-width: 1148px;
    width: 100%;
    margin: 0 auto 7.5rem;
    padding: 0 1.5rem;
}

.l_blog_relation_wrapper h2 {
    font-size: clamp(1.25rem, 0.9754rem + 1.1268vw, 1.75rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.l_blog_relation_list {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.l_blog_relation_list .l_blog_item {
    width: calc(50% - .75rem);
}

.l_blog_relation_list .l_blog_item .l_blog_img {
    width: 45%;
}

.l_blog_relation_list .l_blog_item .l_blog_title {
    font-size: clamp(0.875rem, 0.8063rem + 0.2817vw, 1rem);
}

@media screen and (max-width: 768px) {
    .l_blog_wrapper, .l_blog_relation_wrapper {
        margin-bottom: 5rem;
    }

    .l_blog_wrapper.article {
        background-image: linear-gradient(var(--line-solid), var(--line-solid));
        background-size: calc(100% - 3rem) 1px;
        background-position: top center;
        background-repeat: no-repeat;
    }

    .l_blog_wrapper.article .l_blog_main .l_blog_article_sub {
        flex-direction: column;
        align-items: flex-start;
    }

    .l_blog_side.article {
        display: none;
    }

    .l_blog_relation_list .l_blog_item .l_blog_img {
        width: 100%;
    }

    .l_blog_profile_wrapper {
        margin: 2.5rem 0;
    }

    .l_blog_profile_wrapper .l_blog_profile_note {
        flex-direction: column;
        gap: .5rem;
    }

    .l_blog_share {
        padding-bottom: .5rem;
        margin-bottom: 1.5rem;
    }

    .l_blog_relation_wrapper h2 {
        margin-bottom: .5rem;
    }

    .l_blog_item {
        margin-bottom: 0;
    }
}