/* ==========================================================================
                            下層ページ共通スタイル
   ========================================================================== */

/* 下層ページ共通ヘッダー
   ========================================================================== */
.lower-header {
    width: 100%;
    overflow: hidden;

    .lower-header__content {
        display: flex;
        gap: 3.5rem;
        aspect-ratio: 1440 / 580;
        position: relative;

        &::before {
            content: '';
            display: block;
            background-image: url(../assets/images/lower-header/bg.png);
            background-repeat: no-repeat;
            background-position: left center;
            background-size: contain;
            width: 268px;
            aspect-ratio: 268 / 274;
            position: absolute;
            z-index: 0;
            top: 50%;
            transform: translateY(calc(-50% - 2rem));
            left: -1.5rem;
        }

        @media screen and (width <=600px) {
            aspect-ratio: 390 / 156;
            padding: 1.25rem 1.75rem 0;
            gap: 0;

            &::before {
                width: calc(98 / 390 * 100%);
                left: calc(40 / 390 * 100%);
                top: 0.5rem;
                transform: none;
            }
        }
    }

    .lower-header__title-wrapper {
        align-content: center;
        flex: 1;
        display: grid;
        grid-template-rows: 1fr auto 1fr;

        &::before {
            content: '';
            display: block;
        }

        .lower-header__title {
            font-size: clamp(1rem, -0.769rem + 4.72vw, 2.25rem);
            font-weight: 500;
            letter-spacing: 0.05em;
            z-index: 1;
            position: relative;
            color: var(--primary-color);
            margin: 0;

            &::after {
                content: '';
                display: block;
                width: 3.75rem;
                height: 3px;
                background-color: var(--primary-color);
                margin-top: 12px;
            }
        }

        @media screen and (width <=600px) {
            grid-template-rows: 1fr;

            &::before {
                display: none;
            }

            .lower-header__title {

                &::after {
                    margin-top: 8px;
                    height: 1px;
                    width: 1.5rem;
                }
            }
        }
    }

    .lower-header__image {
        --dropshadow-offset-y: 16px;
        flex-shrink: 0;
        flex: 1.25;
        align-content: end;
        margin-right: calc(50% - 50vw);

        img {
            width: 100%;
            aspect-ratio: 764 / 400;
            border-radius: 20px 0 0 20px;
            filter: drop-shadow(20px var(--dropshadow-offset-y) 0 #F8F8F8);
        }

        @media screen and (width <=600px) {
            --dropshadow-offset-y: 6px;
            flex: 2.5;
            align-content: start;
            max-width: 250px;

            img {
                /* aspect-ratio: 240 / 132; */
                aspect-ratio: auto;
                height: 100%;
            }
        }
    }
}


.lower-header__breadcrumb {
    padding: 2rem 0;

    .container {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;

        span {
            letter-spacing: 0.1em;
            font-size: clamp(0.75rem, 0.573rem + 0.47vw, 0.875rem);
        }

        a:hover {
            text-decoration: underline;
        }
    }

    @media screen and (width <=600px) {
        padding: 0.5rem 0 1rem;

    }
}

/* 中見出し（＜〜〜〜＞）
   ========================================================================== */

.section-subtitle {
    color: var(--primary-color);
    font-size: clamp(1.125rem, calc(0.594rem + 1.415vw), 1.5rem);
    /* min: 18px, max: 24px */
    font-weight: 600;
    letter-spacing: 0.1em;

    &::before {
        content: '＜'
    }

    &::after {
        content: '＞'
    }
}


.lower-page .common-entry.entry-content {
    padding-top: 5rem;
    padding-bottom: 10rem;

    h2 {
        margin-top: 3rem;
        margin-bottom: 1.5rem;
        font-size: 1.75rem;
        font-weight: 500;
        letter-spacing: 0.1em;
    }

    p {
        line-height: 2;
    }

    ul,
    ol {
        margin-top: 2rem;
        padding-left: 1.5rem;
        line-height: 2;

        li {
            margin-bottom: 0.5rem;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }
}