/**
* Blog Pages Styles
* ブログのスタイル
*/

main {
    .site-container {
        .contents-container {
            padding: clamp(1.875rem, 1.581rem + 1.2vw, 2.5rem) 0;
            max-width: 1220px;
        }
    }
}

.contents-title {
    margin: auto;
    width: calc(100% - 30px);
}

.blog-layout {
    display: grid;
    gap: clamp(4rem, 2.943rem + 4.34vw, 6.25rem);
    width: 100%;

    &.blog-layout--two-column {
        grid-template-columns: 1fr;
    }
}

.blog-list {
    margin: 0 0 40px;
    padding: 0 15px;
}

.blog-item {
    border-bottom: 1px dotted #B2B0B0;
    display: grid;
    grid-template-columns: 1fr minmax(100px, 140px);
    gap: 1rem;
    padding: 20px 0;
}

.blog-item__title {
    font-size: clamp(1rem, 0.92rem + 0.33vw, 1.125rem);
    font-weight: 600;
    text-decoration: underline;
    line-height: 1.75;
    margin-bottom: 0;
}

.blog-meta {
    margin: 8px 0;

    .blog-meta__tags {
        background-color: #CCE6F6;
        font-size: 0.75rem;
        display: inline-block;
        margin-right: 8px;
        padding: 0.25rem 0.5rem;

    }

    .blog-meta__date {
        font-size: clamp(0.75rem, 0.67rem + 0.33vw, 0.875rem);
        font-weight: 500;
        display: block;
        padding-bottom: 10px;
        letter-spacing: 0.03rem;

    }

    .blog-meta__tag {
        border: 1px solid #B3B3B3;
        border-radius: 3px;
        font-size: clamp(0.75rem, 0.706rem + 0.18vw, 0.844rem);
        font-weight: 500;
        padding: 4px 8px;
    }
}

.blog-item__thumbnail {
    object-fit: cover;

    img {
        border: 1px solid #E6E6E6;
    }
}




/**
* サイドバー
*/
.sidebar {
    padding: 0 2rem;

    section {
        margin-bottom: 24px;

        &.u-mclear {
            margin: 0 auto;
        }
    }

    .sidebar__banner {
        a {
            display: block;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    }

    .sidebar__tags,
    .sidebar__popular,
    .sidebar__blog-list {
        display: none;
    }
}




/**
* 個別ページのスタイル
*/
.blog-layout__main {
    max-width: 720px;

    > div {
        padding: 0 15px;
    }

    .blog-layout__mobile {
        padding: 0;
    }
}

.blog-article {
    margin-bottom: 40px;

    .contents-title {
        width: 100%;
    }

    .blog-meta {
        .blog-meta__tags {
            background-color: initial;
            display: block;
            text-align: right;
        }
    }

    .blog-article__content {
        margin-bottom: 60px;

        a {
            color: #1a73e8;
            text-decoration: underline;
        }

        p {
            font-size: 1rem;
            line-height: 2.4rem;
            letter-spacing: 0;
        }

        .wp-block-button__link {
            text-decoration: none;
        }
    }
}

/**
* タグ
*/
.blog-layout__tags {
    background: #F2F2F2;
    font-size: 0.875rem;
    padding: 12px;
    margin-bottom: 32px;

    .blog-meta__tag {
        display: inline-block;
        line-height: 1.8;
        margin-right: 8px;

        a {
            color: #808080;
        }
    }
}

/**
* 関連記事
*/
.blog-layout__related {
    .blog-layout__related-title {
        font-size: 0.875rem;
    }

    .blog-layout__related-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 12px;
        justify-content: center;
        margin-bottom: 32px;

        .blog-layout__related-item {
            border-bottom: none;
            padding: 0;

            .blog-layout__related-link {
                display: grid;
                grid-template-columns: subgrid;
                grid-row: span 2;
            }

            .blog-layout__related-thumbnail {
                border: 1px solid #CCCCCC;
                border-radius: 10px;
                margin-bottom: 8px;
                text-align: center;
                overflow: hidden;
                width: 100%;
                aspect-ratio: 4/3;

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

            .blog-layout__related-title {
                font-size: 0.875rem;
                text-align: center;
            }
        }
    }
}

/**
* シェアボタン
*/
.blog-article__share {
    .share-buttons {
        text-align: center;
        font-size: 3rem;

        .fa-line {
            font-size: 2.8rem;
        }
    }
}




/**
* 前の記事・次の記事のナビゲーション
*/
.blog-navigation {
    border-top: 1px solid #B3B3B3;
    border-bottom: 1px solid #B3B3B3;
    font-size: clamp(0.75rem, 0.691rem + 0.24vw, 0.875rem);
    font-weight: 500;;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 24px;

    .blog-navigation__label {
        display: grid;
        grid-template-columns: clamp(0.75rem, 0.691rem + 0.24vw, 0.875rem) auto;
        gap: 8px;
        align-content: center;
        justify-content: center;
    }

    .blog-navigation__prev {
        .blog-navigation__label {
            justify-content: start;

            &:before {
                content: "\f104";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                margin-right: 8px;
            }
        }
    }

    .blog-navigation__index {
        border-left: 1px solid #B3B3B3;
        border-right: 1px solid #B3B3B3;
        text-align: center;

        .blog-navigation__label {
            &:before {
                content: "\f03a";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                margin-right: 8px;
            }
        }
    }

    .blog-navigation__next {
        .blog-navigation__label {
            grid-template-columns: auto clamp(0.75rem, 0.691rem + 0.24vw, 0.875rem);
            justify-content: end;

            &:after {
                content: "\f054";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                margin-right: 8px;
            }
        }
    }

    a {
        display: block;
        padding: clamp(0.938rem, 0.761rem + 0.72vw, 1.313rem) 0;
        width: 100%;
    }
}




/**
* お知らせ一覧へ戻るボタン
*/
.blog-back-button {
    margin-top: clamp(4.375rem, 2.537rem + 7.54vw, 7.25rem);
}




/**
* もっと見るボタン
*/
.load-more-container {
    text-align: center;
    margin: 0 0 40px;
}

#load-more-button {
    margin: 0 auto;
}

/* ローディングスピナー */
.loading-spinner {
    text-align: center;
    margin: 20px 0;
}

.spinner-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-main);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* アコーディオンアニメーション用スタイル */
@keyframes accordionIn {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

.news-item--animating {
  animation: accordionIn 0.5s ease-out forwards;
  overflow: hidden;
}




/**
* モバイル表示用のスタイル
*/
.blog-layout__mobile {
    section {
        margin-bottom: 40px;
    }

    .mobile-section__title {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    /* 人気の記事 */
    .blog-layout__mobile-popular {
        padding-left: 24px;

        .slider-cell {
            width: 240px;
            margin-right: 24px;
        }

        .popular__thumbnail {
            text-align: center;

            img {
                border: 1px solid #CCCCCC;
                border-radius: 10px;
                width: 240px;
                height: 180px;
                object-fit: cover;
            }
        }

        .popular__ttl {
            font-size: 0.9rem;
            font-weight: 500;
            text-align: center;
            padding-top: .5rem;
            padding-bottom: .5rem;
        }

        .popular__time {
            font-size: 0.75rem;
            font-weight: 400;
            display: block;
            text-align: center;
        }
    } /* //.blog-layout__mobile-popular */

    /* タグ */
    .blog-layout__mobile-tags {
        .accordion {
            .accordion__item {
                &.is-open {
                    .accordion__item-title {
                        border-bottom: none;

                        &:after {
                            /* 縦線を回転させて横線と重ねる（または見えなくする） */
                            transform: rotate(90deg);
                        }
                    }

                    .global-nav__sub-list {
                        visibility: visible;
                    }
                }

                .accordion__item-title {
                    border-top: 1px solid #B3B3B3;
                    border-bottom: 1px solid #B3B3B3;
                    font-size: 1rem;
                    font-weight: 700;
                    padding: 1rem 2rem;
                    justify-items: start;
                    position: relative;

                    &:before, &:after {
                        content: "";
                        display: block;
                        background: var(--color-primary);
                        position: absolute;
                        right: 2rem;
                        transition: transform 0.3s ease-in-out;
                        width: 18px;
                        height: 1px;
                    }

                    &:after {
                        width: 1px;
                        height: 18px;
                        right: calc(32px + (18px / 2) - (1px / 2));
                    }
                } /* //.accordion__item-title */

                .accordion__sub-list {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(193px, 1fr));
                    gap: 1px;
                margin-top: -1px;
                    padding: 1px;

                    & > * {
                        box-shadow: 0 0 0 1px #B3B3B3;
                    }

                    li {
                        display: block;
                        font-size: 0.875rem;
                        margin-bottom: 0;
                        padding: 1rem;
                        text-align: center;
                    }
                }
            } /* //.accordion__item */
        } /* //.accordion */
    } /* //.blog-layout__mobile-tags */
}




/**
* Media Queries
*/
@media (min-width: 769px) {
    main {
        .site-container {
            .contents-container {
                padding: clamp(1.875rem, 1.581rem + 1.2vw, 2.5rem) clamp(0.938rem, -0.09rem + 4.22vw, 3.125rem);
            }
        }
    }

    .contents-title {
        width: 100%;
    }

    .blog-layout {
        &.blog-layout--two-column {
            grid-template-columns: 7fr minmax(auto, 300px);
        }
    }

    .blog-list {
        padding: 0;
    }

    .sidebar {
        padding: 0;

        section {
            margin-bottom: 50px;
        }

        .sidebar__title {
            font-size: 1rem;
            font-weight: 700;
            border-bottom: 2px solid var(--color-main);
            padding-bottom: 8px;
        }

        .sidebar__tags,
        .sidebar__popular,
        .sidebar__blog-list {
            display: block;
        }

        .sidebar__tags {
            .blog-meta__tag {
                font-size: 0.875rem;
            }
        }

        .sidebar__popular {
            .popular__item {
                margin-bottom: 1rem;;
            }

            .popular__link {
                display: grid;
                grid-template-columns: 78px auto;
                gap: 8px;
                align-items: center;

                .popular__thumbnail {
                    border: 1px solid #B3B3B3;
                }

                .popular__txt {
                    .popular__ttl {
                        font-size: 1rem;
                        font-weight: 700;
                    }
                }
            }
        } /* //.sidebar__popular */

        .sidebar__blog-list {
            .blog-archive-list {
                .blog-archive-list__item {
                    color: var(--color-main);
                    font-size: 1rem;

                    &.blog-archive-list__item--month {
                        margin-left: 2rem;
                    }

                    &.blog-archive-list__item--post {
                        margin-left: 2rem;
                    }
                }

                .blog-archive-list__toggle {
                    cursor: pointer;
                    display: grid;
                    grid-template-columns: 1rem auto;
                    transition: all 0.3s ease;

                    &:before {
                        content: "\f0da";
                        color: var(--color-main);
                        font-family: "Font Awesome 6 Free";
                        font-weight: 900;
                        display: block;
                        margin-right: 8px;
                        transition: transform 0.3s ease;
                    }

                    /* アクティブ状態の矢印回転 - トグル要素自体にis-activeクラス */
                    &.is-active {
                        &:before {
                            transform: rotate(90deg);
                        }
                    }
                }

                /* サブリストのアコーディオン動作 */
                .blog-archive-list__sub-list {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }

                /* 投稿リンクのスタイル */
                .blog-archive-list__item--post {
                    a {
                        display: block;
                        color: var(--color-main);
                        text-decoration: none;
                        padding: 4px 0;
                        font-size: 0.9em;

                        &:hover {
                            text-decoration: underline;
                            opacity: 0.7;
                        }
                    }
                }
            } /* //.blog-archive-list */
        } /* //.sidebar__blog-list */
    } /* //.sidebar */

    .blog-layout__mobile {
        display: none;
    }

    .blog-layout__main {
        &> div {
            padding: 0;
        }
    }
}

@media (min-width: 767px) {
    .blog-layout__related {
        .blog-layout__related-list {
            justify-content: start;
            grid-template-columns: repeat(auto-fit, minmax(calc(25% - 36px), 1fr));
        }
    }
}

@media (max-width: 389px) {
    .blog-layout__related {
        .blog-layout__related-list {
            grid-template-columns: repeat(auto-fit, 100%);
        }
    }
}