/* ==========================================================================
   page-archive.css
   記事（single）・一覧・システムページ用。プレフィックス p-。
   ルートclass起点の子孫セレクタで書く。値は variables.css の変数を使う。
   画面幅の区切りは 1279 → 1024 → 600 の順。
   ========================================================================== */

/* 記事の公開日・更新日 */
.p-single__date {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-4) var(--space-24);
    margin-bottom: var(--space-20);
}
.p-single__date > p {
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--color-text);
    font-size: var(--fz-14);
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1.5;
}
.p-single__date > p > span {
    display: flex;
    align-items: center;
    color: var(--color-text-sub);
    font-size: var(--fz-13);
    font-weight: normal;
}
.p-single__date > p > span::before {
    content: "";
    display: block;
    width: 1.1em;
    height: 1.1em;
    margin-right: var(--space-4);
    background-color: var(--color-text-sub);
    -webkit-mask: url("../images/icons/icon_clock.svg") no-repeat center / contain;
    mask: url("../images/icons/icon_clock.svg") no-repeat center / contain;
}
.p-single__date > p:nth-child(2) > span::before {
    -webkit-mask-image: url("../images/icons/icon_update.svg");
    mask-image: url("../images/icons/icon_update.svg");
}

/* 記事下の書き手表示 */
.p-single__author {
    margin: var(--space-40) 0;
    padding: var(--space-24);
    border: 1px solid var(--color-line);
    background-color: var(--color-bg-sub);
}
.p-single__author > p {
    margin: 0 0 var(--space-8);
    color: var(--color-text);
    font-size: var(--fz-15);
    line-height: 1.8;
}
.p-single__author > p:first-child {
    font-size: var(--fz-16);
    font-weight: bold;
}
.p-single__author > p:first-child > span {
    display: block;
    margin-bottom: var(--space-4);
    color: var(--color-text-sub);
    font-size: var(--fz-13);
    font-weight: normal;
}
.p-single__author > p:last-child {
    margin-bottom: 0;
}
.p-single__author > p:last-child > a {
    position: relative;
    padding-left: var(--space-16);
    font-size: var(--fz-14);
}
.p-single__author > p:last-child > a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    content: "";
}

@media screen and (max-width: 600px) {
    .p-single__date {
        justify-content: flex-start;
    }
    .p-single__date > p {
        font-size: var(--fz-13);
    }
    .p-single__date > p > span {
        font-size: var(--fz-12);
    }
    .p-single__author {
        padding: var(--space-20);
    }
}