/**
 * ==========================================================================
 * 固定ページ
 * ==========================================================================
 */

/**
 * ページヘッダー
 */
.page-header {
    color: var(--color-white);
    padding-top: 60px;
    padding-bottom: 86px;
    margin-top: var(--space-header-sp);
}

.page-header h1 {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.page-header p {
    color: var(--color-white);
    font-size: var(--font-size-lg);
}

.hero-section {
    background-color: var(--color-primary);
}

.hero-section.has-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--color-primary);
    color: var(--color-white);
    max-height: 50vh;
}

.hero-section.has-cover h1,
.hero-section.has-cover p {
    color: var(--color-white);
}

.page-header.has-cover {
    background-image: var(--cover-sp);
}

@media (min-width: 886px) {
    .page-header {
        margin-top: var(--space-header-pc);
    }

    .page-header h1 {
        font-size: var(--font-size-4xl);
        margin-bottom: 0.5em;
    }

    .page-header p {
        font-size: var(--font-size-xl);
    }

    .page-header.has-cover {
        background-image: var(--cover-pc);
    }
}

body.page .page-content > .container,
body.archive .works-list > .container,
body.single .single-page > .container {
    padding-top: 60px;
    padding-bottom: 100px;
}

@media (min-width: 768px) {
    body.page .page-content > .container,
    body.archive .works-list > .container,
    body.single .single-page > .container {
        padding-top: 130px;
        padding-bottom: 180px;
    }
}