div.ir-indivisual-container {
    --color-bg-gray: #f6f6f6;
    --color-seraku-blue: #1d2088;
    --color-seraku-blue-rgb: 29, 32, 136;
    --color-lead-text: #33366b;

    container: ir-indivisual / inline-size;
    display: inline-flex;
    flex-direction: column;
    gap: 4em;
    font-size: 1.125rem;

    @media (600px >= width) {
        font-size: 1rem;
    }

    &.ir-indivisual-container--wide {
        width: calc(100% - 60px);

        @media (600px >= width) {
            width: 100%;
        }
    }

    & p,
    h3 {
        margin: 0;
    }

    & p {
        font-size: 1em;
        line-height: 1.5;

        @container ir-indivisual (600px >= width) {
            font-size: 0.875em;
        }
    }

    & h3 {
        padding: 0.25em 1em;
        font-size: 1em;
        text-align: center;
        background-color: var(--color-bg-gray);
    }

    & h4 {
        font-size: 1em;
    }

    & picture {
        display: contents;
    }

    & source,
    img {
        display: block;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
    }

    img.half {
        display: block;
        max-width: 100%;
        height: auto;
        margin-inline: auto;
        
        @media (min-width: 600px) {
       max-width: 50%;
   }
    }

    & ol {
        display: grid;
        gap: 1em;
        padding-left: 1.5em;
    }

    & ol > li {
        list-style-type: decimal;

        &:has(h4)::marker {
            font-size: 1em;
            font-weight: 700;
        }
    }

    .u-inline-block {
        display: inline-block;
    }

    .u-text-lg {
        font-size: 1.25em;
        line-height: 2;

        @media (600px >= width) {
            font-size: 1.125em;
            line-height: 1.75;
        }
    }

    .ir-indivisual-inner {
        display: grid;
        gap: 2em;
    }

    .ir-indivisual-lead-copy {
        width: fit-content;
        margin-inline: auto;
        font-size: 1.5em;
        font-weight: 700;
        color: var(--color-lead-text);
    }

    .ir-indivisual-sup {
        text-align: right;
        font-size: 0.75em;
    }

    .ir-indivisual-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25em;
        width: 100%;
        max-width: 840px;
        margin-inline: auto;

        @container ir-indivisual (600px >= width) {
            grid-template-columns: auto;
        }

        &.ir-indivisual-links--wide {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            max-width: none;
        }

        .ir-indivisual-link {
            display: contents;

            a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1em;
                font-size: 1.125em;
                color: #ffffff;
                background-color: var(--color-seraku-blue);
                text-decoration: none;
                transition: opacity 0.2s;

                &::after {
                    content: '';
                    width: 1em;
                    aspect-ratio: 1;
                    background: url(/common/images/arw_r_white.svg) no-repeat;
                    background-size: contain;
                    background-position: center;
                }

                &:hover {
                    opacity: 0.5;
                }
            }
        }
    }

    .ir-indivisual-vision__title {
        padding: 0.25em 1em;
        font-size: 1em;
        text-align: center;
        background-color: var(--color-bg-gray);
    }

    .ir-indivisual-vision__text {
        width: fit-content;
        margin-inline: auto;
        font-size: 1.75em;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        color: var(--color-lead-text);

        @container ir-indivisual (600px >= width) {
            font-size: 1.375em;
        }
    }

    .ir-indivisual-histories {

        .ir-indivisual-history {
            display: flex;
            gap: 1.5em;

            &:first-child .ir-indivisual-history__topics::before {
              top: 0.625em;
            }

            &:last-child .ir-indivisual-history__topic:last-child {
              padding-bottom: 0;
            }

            .ir-indivisual-history__year {
                background-color: transparent;
                padding: 0;
                font-family: "DINNextLTPro-Condensed";
                font-size: 1.25em;
                font-weight: 400;
                text-align: left;
                color: var(--color-seraku-blue);
            }

            .ir-indivisual-history__topics {
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0.225em;
                    width: 1px;
                    background-color: var(--color-seraku-blue);
                }

                .ir-indivisual-history__topic {
                    position: relative;
                    display: grid;
                    gap: 0.5em;
                    padding-left: 1.5em;
                    padding-bottom: 3em;

                    &::before {
                        content: '';
                        position: absolute;
                        top: 0.625em;
                        left: 0;
                        display: block;
                        width: 0.5em;
                        aspect-ratio: 1;
                        border-radius: 50%;
                        background-color: var(--color-seraku-blue);
                    }

                    .ir-indivisual-history__topic__title {
                        background-color: transparent;
                        padding: 0;
                        font-size: 1.25em;
                        text-align: left;
                    }

                    .ir-indivisual-history__topic__text {
                        padding-left: 0.5em;
                    }
                }
            }
        }
    }
}