/* ==========================================================================
                            事業紹介の共通スタイル
   ========================================================================== */

/* アーカイブページのスタイル（トップセクションと同一）
   ========================================================================== */
.archive-business {
    position: relative;
    padding-bottom: 10rem;

    .archive-business__inner {
        position: relative;
        z-index: 1;
    }

    .archive-business__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin-top: 2.5rem;
    }

    .archive-business__item {
        padding: 1.5rem;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        position: relative;
        aspect-ratio: 40 / 32;
        transition: background-size 0.3s ease;

        .archive-business__link {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-align: center;
            align-content: center;
        }

        h3 {
            color: var(--white-color);
            font-size: clamp(1rem, 0.292rem + 1.89vw, 1.5rem);
            font-weight: 500;
            letter-spacing: 0.1em;
            position: relative;
            z-index: 2;
        }

        img {
            position: relative;
            z-index: 2;
            margin-inline: auto;
            margin-top: 1rem;
        }

        &::before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #003264;
            opacity: 0.35;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        &:hover {
            background-size: 110%;
        }

        &:hover::before {
            opacity: 0.7;
        }

        &:nth-of-type(1) {
            background-image: url(../assets/images/front-page/business01.jpg);
        }

        &:nth-of-type(2) {
            background-image: url(../assets/images/front-page/business02.jpg);
        }

        &:nth-of-type(3) {
            background-image: url(../assets/images/front-page/business03.jpg);
        }
    }

    @media screen and (width <=600px) {
        padding-top: 3rem;
        padding-bottom: 5rem;

        &::before {
            height: 57%;
        }

        .archive-business__list {
            grid-template-columns: 1fr;
            height: auto;
            margin-top: 0;
        }

        .archive-business__item {
            aspect-ratio: 358 / 96;
            padding: 0 3rem;
            background-position: center calc(50% + 1rem);

            .archive-business__link {
                display: grid;
                grid-template-columns: 1fr auto 1fr;
                align-items: center;

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

                img {
                    margin-left: auto;
                    margin-right: 0;
                    margin-top: 0;
                    width: 1.25rem;
                    justify-self: end;
                }
            }
        }
    }
}


/* 詳細ページのスタイル
   ========================================================================== */

.table-of-contents {
    margin-top: clamp(1.5rem, calc(-3.453rem + 13.208vw), 5rem);
    /* min: 24px, max: 80px */
    margin-bottom: clamp(2.5rem, calc(-1.038rem + 9.434vw), 5rem);
    /* min: 40px, max: 80px */
}

.table-of-contents__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: clamp(1rem, calc(-1.123rem + 5.66vw), 2.5rem);
    /* min: 16px, max: 40px */

    .table-of-contents__item {
        max-width: min(26.25rem, 100%);
        width: 100%;
        justify-self: center;

        a {
            display: block;
            border-radius: clamp(0.5rem, calc(-1.623rem + 5.66vw), 2rem);
            /* min: 8px, max: 32px */
            background-color: var(--primary-color);
            color: var(--white-color);
            padding: 1rem;
            height: clamp(3.5rem, calc(-9.236rem + 33.962vw), 12.5rem);
            /* min: 56px, max: 200px */
            align-content: center;
            font-size: clamp(1rem, calc(-0.415rem + 3.774vw), 2rem);
            /* min: 16px, max: 32px */
            line-height: 1.75;
            letter-spacing: 0.1em;
            text-align: center;

            &::after {
                content: '';
                display: block;
                margin-inline: auto;
                margin-top: 1rem;
                width: 1em;
                aspect-ratio: 1;
                background-image: url(../assets/images/business-toc-icon.svg);
                background-size: contain;
                background-repeat: no-repeat;

                @media screen and (width <=600px) {
                    display: inline-block;
                    margin-top: 0;
                    margin-left: 0.75rem;
                }
            }
        }
    }
}

.business-entry__section {
    padding-top: clamp(2.5rem, calc(-1.038rem + 9.434vw), 5rem);
    /* min: 40px, max: 80px */
    padding-bottom: 5rem;

    h2 {
        display: flex;
        align-items: center;
        gap: clamp(0.75rem, calc(-1.019rem + 4.717vw), 2rem);
        /* min: 12px, max: 32px */
        font-size: clamp(1.125rem, calc(-0.113rem + 3.302vw), 2rem);
        /* min: 18px, max: 32px */
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.1em;

        &::before {
            content: '';
            display: inline-block;
            width: 10px;
            background-color: var(--primary-color);
            align-self: stretch;
        }

        &::after {
            content: '';
            display: block;
            flex: 1;
            height: 2px;
            background-color: var(--primary-color);
        }
    }

    h2+* {
        margin-top: clamp(1rem, calc(0.292rem + 1.887vw), 1.5rem);
        /* min: 16px, max: 24px */
    }

    &:last-child {
        padding-bottom: 7.5rem;
    }

    @media screen and (width <=600px) {
        h2 {
            font-weight: 500;

            &::before {
                width: 4px;
            }
        }
    }
}

.business-entry__sub-section {
    margin-top: 2.5rem;

    h3 {
        color: var(--primary-color);
        font-size: clamp(1rem, calc(0.292rem + 1.887vw), 1.5rem);
        /* min: 16px, max: 24px */
        font-weight: 500;
        letter-spacing: 0.1em;

        &::before {
            content: '＜';
        }

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

    h3+* {
        margin-top: clamp(1.5rem, calc(0.792rem + 1.887vw), 2rem);
        /* min: 24px, max: 32px */
    }

    .is-layout-grid {
        gap: clamp(1.5rem, calc(-5.222rem + 17.925vw), 6.25rem);
        /* min: 24px, max: 100px */
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        padding: 0 1rem;
    }

    figure+p {
        margin-top: clamp(0rem, calc(-1.415rem + 3.774vw), 1rem);
        /* min: 0px, max: 16px */
        font-size: clamp(0.875rem, calc(0.521rem + 0.943vw), 1.125rem);
        /* min: 14px, max: 18px */
    }
}

.business-entry__small-section {
    margin-top: clamp(2.5rem, calc(1.792rem + 1.887vw), 3rem);
    /* min: 40px, max: 48px */
    margin-bottom: 0;
    gap: clamp(1.5rem, calc(-3.453rem + 13.208vw), 5rem);
    /* min: 24px, max: 80px */

    h4 {
        font-size: clamp(1rem, calc(0.823rem + 0.472vw), 1.125rem);
        /* min: 16px, max: 18px */
        font-weight: 500;
        letter-spacing: 0.1em;

        &::before {
            content: '■';
            margin-right: 8px;
        }
    }

    h4+* {
        margin-top: 1rem;
    }

    p {
        line-height: 2;
    }

    .column__right {
        max-width: 26.25rem;
    }

    .image-box {
        gap: 2.5rem;
    }
}