/* archive / single 共通 */

.guide-header {
    background-image: url(../img/guide/guide-header_pc.png);
    background-position: 50% 50%;
    background-size: cover;background-repeat: no-repeat;
    width: 100vw;
}
@media screen and (max-width: 768px) {
    .guide-header {
        background-image: url(../img/guide/guide-header_pc.png);
    }
}

.guide-header .decoration {
    position: relative;
    width: 1320px;
    margin: -38px auto 80px;
}
@media screen and (max-width: 768px) {
    .guide-header .decoration {
        position: absolute;
        top: 0;
        width: 100%;
        margin: 0 auto;
    }
}

.guide-header .decoration img {
    width: calc(340px / 2);
}
@media screen and (max-width: 768px) {
    .guide-header .decoration img {
        width: 43.333vw;
    }
}

.guide {
    --guide-color-primary: #003477;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: 64px 40px;
    max-width: 100vw;
}
.guide__section {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: min(640px, 100%);
}
@media screen and (max-width: 768px) {
    .guide {
        padding-block: 48px 60px;
    }
    .guide__section {
        gap: 30px;
        padding: 0 40px;
    }
}





/* アーカイブページ
archive-guide.php */

.guide--archive {

    .guide__categories {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        align-content: flex-start;
        gap: 10px;
        align-self: stretch;
        flex-wrap: wrap;
    }
    .guide__category {
        display: flex;
        padding: 7px 16px;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        border: 1px solid #003477;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0.8px;
        &.is-active {
            background-color: #003477;
            color: #fff;
            pointer-events: none;
        }
    }

    .guide__item-link {
        display: block;
        border-bottom: #003477 1px solid;
        &:first-child {
            border-top: #003477 1px solid;
        }
    }
    .guide__item{
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px 0;
        transition: background-color 0.3s;
        &:hover {
            background-color: #e3efff;
            background-color: #DEEDFF;
            background-color: #F1F6FE;
        }

        .guide__item-top {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #003477;
            font-size: 12px;
            line-height: 100%;
            letter-spacing: 0.6px;
        }
        .guide__item-tags {
            display: inline-flex;
            gap: 4px;
        }
        .guide__item-tag {
            display: flex;
            padding: 5px 10px;
            align-items: center;
            border-radius: 5px;
            background: #0070FF;
            color: #FFF;
            font-size: 12px;
            line-height: 100%;
            letter-spacing: 0.6px;
        }

        .guide__item-head {
            color: #003477;
            font-size: 22px;
            font-weight: 500;
            line-height: 140%;
            letter-spacing: 1.1px;
        }

        .guide__item-summary {
            color: #484848;
            font-size: 16px;
            line-height: 160%;
            letter-spacing: 0.8px;
        }

        .guide__item-more {
            font-size: 12px;
            line-height: 100%;
            letter-spacing: 0.6px;
            display: flex;
            justify-content: flex-end;
        }
    }


    .wp-pagenavi {
        display: flex;
        justify-content: center;
        margin: 0 auto 110px;
    }
    .wp-pagenavi a.page,
    .wp-pagenavi a.nextpostslink,
    .wp-pagenavi a.previouspostslink,
    .wp-pagenavi span.current {
        display: grid;
        place-content: center;
        width: 35px;
        height: 35px;
        border-radius: 9999px;
        border: 1px solid #003477;
    }
    .wp-pagenavi span.current {
        color: #fff;
        background: #003477;
    }
}





/* シングルページ
single-guide.php */

.guide--single {
    padding-block: 64px;

    .guide__contents {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: min(640px, 100%);
    }

    .guide__meta {
        display: flex;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0.6px;
    }
    .guide__meta-tag {
        display: flex;
        padding: 5px 10px;
        align-items: center;
        border-radius: 5px;
        background: #0070FF;
        color:#FFF;
    }
    .guide__meta-reviewed {
        color: #484848;
        /* 区切りの「｜」は、スマホで2行目に回したときに消せるよう CSS で付ける */
        &::before {
            content: "｜";
        }
    }

    .guide__title {
        font-size: 30px;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 0.9px;
    }

    .guide__summary {
        display: flex;
        padding: 25px 30px;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        align-self: stretch;
        border-radius: 10px;
        background: #F1F6FE;
    }
    .guide__summary-badge {
        display: flex;
        padding: 6px 14px;
        align-items: center;
        border-radius: 10px;
        background: #003477;
        color: #FFF;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0.8px;
    }

    .guide__points {
        border-radius: 10px;
        border: 1px solid #003477;
        overflow: hidden;
    }
    .guide__points-title {
        display: flex;
        padding: 10px 0;
        justify-content: center;
        align-items: flex-start;
        background: #003477;
        color: #FFF;
        font-size: 22px;
        line-height: 100%;
        letter-spacing: 1.1px;
    }
    .guide__points-list {
        display: flex;
        padding: 20px 30px;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        align-self: stretch;
    }
    .guide__points-item {
        flex: 1 0 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
        letter-spacing: 0.8px;
        padding-left: 10px;
    }
    .guide__points-item::marker {
        content: "✓";
    }

    .guide__text {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* 「！」「…」などの禁則文字が連続しても折り返す */
        overflow-wrap: break-word;

        & h2 {
            padding: 6px 0 6px 16px;
            margin-block: 32px 16px;
            border-left: 3px solid #003477;
            font-size: 1.75rem;
            font-weight: 500;
            line-height: 140%;
            letter-spacing: 1.4px;
        }

        @media screen and (max-width: 768px) {
            & h2 {
                font-size: 1.25rem;
            }
        }
        & h3 {
            padding: 8px 0 8px 16px;
            margin-block: 16px 8px;
            border-left: 3px solid #003477;
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 140%;
            letter-spacing: 1px;
        }

        @media screen and (max-width: 768px) {
            & h3 {
                font-size: 1.125rem;
            }
        }
        & p {
            font-size: 1rem;
            line-height: 160%;
            letter-spacing: 0.08em;
            overflow-wrap: break-word;
        }
        & ul {
            display: flex;
            flex-direction: column;
            gap: 12px;
            font-size: 1rem;
            line-height: 160%;
            letter-spacing: 0.08em;
            li {
                list-style: disc;
                list-style-position: inside;
            }
        }
        & ol {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            align-self: stretch;
            counter-reset: ol-count 0;
            & li {
                display: flex;
                gap: 12px;
                counter-increment: ol-count 1;
                &::before {
                    content: counter(ol-count);
                    display: inline-grid;
                    width: 24px;
                    height: 24px;
                    aspect-ratio: 1;
                    place-items: center;
                    border-radius: 9999px;
                    background: #003477;
                    color: #FFF;
                    font-size: 12px;
                    font-weight: 700;
                    line-height: 100%;
                    letter-spacing: 0.6px;
                }
            }
        }
        & table {
            thead {
                background-color: #DEEDFF;
                font-size: 20px;
            }
        }
        & figure {
            max-height: 640px;
            overflow: hidden;
            display: grid;
            place-content: center;
            img {
                object-fit: contain;
            }
        }
        & blockquote {
            display: flex;
            padding: 24px 28px;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            align-self: stretch;
            border-radius: 10px;
            border-left: 4px solid #0070FF;
            background: #F1F6FE;
            color: #484848;
            font-size: 16px;
            font-weight: 400;
            line-height: 160%;
            letter-spacing: 0.8px;
            &::before {
                content: "“";
                color: #B3D4FF;
                font-size: 30px;
                font-weight: 700;
                line-height: 100%;
                letter-spacing: 1.5px;
            }
            & cite {
                align-self: stretch;
                text-align: right;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
                letter-spacing: 0.6px;
            }
        }
    }

    .guide__faqs {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        align-self: stretch;
    }
    .guide__faqs-title {
        display: flex;
        padding: 10px 0;
        justify-content: center;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 10px;
        background: #003477;
        color: #FFF;
        font-size: 22px;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: 1.1px;
    }
    .guide__faq {
        display: flex;
        padding: 20px 25px;
        flex-direction: column;
        gap: 15px;
        border-radius: 10px;
        border: 1px solid #CCC;
        background: #FFF;
    }
    .guide__faq-text {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        align-self: stretch;
        font-size: 16px;
        line-height: 160%;
        letter-spacing: 0.8px;
        &::before {
            display: grid;
            width: 28px;
            height: 28px;
            aspect-ratio: 1;
            place-items: center;
            font-size: 16px;
            font-weight: 500;
            border-radius: 9999px;
        }
    }
    .guide__faq-question {
        font-weight: 500;
        &::before {
            content: "Q";
            color:#FFF;
            background: #003477;
        }
    }
    .guide__faq-answer {
        color: #484848;
        font-weight: 400;
        &::before {
            content: "A";
            color: #003477;
            background: #DEEDFF;
        }
    }

    .guide__btn {
        display: flex;
        padding-top: 20px;
        flex-direction: column;
        align-items: center;
        gap: 13px;
    }
    .guide__btn-link {
        display: flex;
        width: min(330px, 100%);
        height: 60px;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        border: 1px solid #003477;
        background: #F1F6FE;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0.8px;
    }

    /* 著者：タイトル下の1行と、記事末尾の著者欄 */
    .guide__byline {
        align-self: flex-start;
        margin-top: -24px;
        color: #484848;
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0.7px;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .guide__author {
        display: flex;
        padding: 25px 30px;
        flex-direction: column;
        gap: 20px;
        border-radius: 10px;
        border: 1px solid #003477;
        background: #F1F6FE;
    }
    .guide__author-title {
        align-self: flex-start;
        padding: 6px 14px;
        border-radius: 10px;
        background: #003477;
        color: #FFF;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0.8px;
    }
    .guide__author-profile {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .guide__author-photo {
        flex-shrink: 0;
        width: 96px;
        height: 96px;
        border-radius: 9999px;
        object-fit: cover;
    }
    .guide__author-job {
        color: #003477;
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0.7px;
    }
    .guide__author-name {
        font-size: 22px;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: 1.1px;
    }
    .guide__author-bio {
        font-size: 15px;
        line-height: 180%;
        letter-spacing: 0.75px;
        overflow-wrap: break-word;
    }
    .guide__author-list {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px 20px;
        padding-top: 20px;
        border-top: 1px solid #CCC;
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0.7px;

        & dt {
            color: #003477;
            font-weight: 500;
        }
        /* style.css（_s のひな形）が dd に下余白を付けていて、行間が開きすぎるため */
        & dd {
            margin: 0;
        }
        & ul {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
    }
    .guide__author-note {
        margin-left: 0.5em;
        color: #484848;
        font-size: 12px;
    }

    @media screen and (max-width: 768px) {
        padding-top: 48px;
        padding-inline: 30px;
        
        /* カテゴリー・投稿日・最終確認日の3つが1行に収まらず潰れるため、最終確認日を2行目に回す */
        .guide__meta {
            flex-wrap: wrap;
            row-gap: 8px;
        }
        .guide__meta-reviewed {
            flex-basis: 100%;
            &::before {
                content: none;
            }
        }

        .guide__contents {
            gap: 30px;
        }

        .guide__text {
            gap: 15px;
        }

        .guide__byline {
            margin-top: -18px;
        }
        .guide__author {
            padding: 20px;
        }
        .guide__author-photo {
            width: 72px;
            height: 72px;
        }
        .guide__author-name {
            font-size: 20px;
        }
        /* 狭い幅では見出しと中身を縦に積む。横並びだと団体名が細く折り返されて読みにくいため */
        .guide__author-list {
            grid-template-columns: 1fr;
            gap: 4px;

            & dd + dt {
                margin-top: 10px;
            }
        }
    }
}