.header {
    mix-blend-mode: normal;
}
.header__logo svg {
    color: #000;
}
.gnav__link {
    color: #000;
    mix-blend-mode: normal;
}
.headerDropdownButton span {
    background-color: #000;
    mix-blend-mode: normal;
}

.subpage__container {
    padding-block: 5rem 7.5rem;
}

@media (max-width: 48rem) {
    .subpage__container {
        padding-block: 4rem 5rem;
    }
}

.lead {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 2;
    padding-bottom: 4rem;
    text-align: center;
}

@media (max-width: 48rem) {
    .case__lead {
        padding-bottom: 2.5rem;
    }
}

/* Details */
.contents {
    padding-top: 4rem;
}

.indexList {
    background-color: var(--bgc-gray-light);
    display: grid;
    gap: 0 3.5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    margin-top: 1.75rem;
    padding: 1.5625rem 2.5rem;
}

.indexList__item {
    counter-increment: section;
}

.indexList__link {
    align-items: center;
    border-radius: var(--rounded-xs);
    display: grid;
    font-family: var(--font-ibm);
    font-size: var(--text-lg);
    font-weight: 600;
    gap: 0.75rem;
    grid-template-columns: auto 1fr auto;
    line-height: 1.3;
    padding-block: 0.9375rem;
    transition: color 0.25s;
}

.indexList__link:hover {
    color: var(--color-orange);
}

.indexList__link:focus-visible {
    outline-offset: 0.5rem;
}

.indexList__link::before {
    content: counter(section, decimal-leading-zero);
    font-family: var(--font-inter);
    font-size: 1rem;
    font-weight: 500;
}

.indexList__icon {
    display: inline-grid;
    transition: transform 0.25s;
}

.detailsList {
    display: grid;
    padding-top: 4.5rem;
}

.details {
    border-bottom: 0.125rem solid var(--color-orange);
    counter-increment: details;
}

.details__summary {
    display: grid;
    gap: 1.25rem 1.5rem;
    grid-template-columns: auto auto 1fr auto;
    height: 11.8125rem;
    padding-bottom: 3rem;
    padding-top: 3rem;
    transition: background-color 0.25s;
}

.details[open] .details__summary {
    gap: 2.25rem;
    grid-template-columns: auto 1fr auto;
}

@media (any-hover: hover) {
    .details__summary:hover {
        background-color: color-mix(in srgb, var(--color-orange) 0%, var(--color-orange-light) 10%);
    }
}

.details__summary::before {
    align-self: center;
    color: var(--color-orange);
    content: counter(details, decimal-leading-zero);
    font-family: var(--font-inter);
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    width: 5.375rem;
}

.details__image {
    display: inline-block;
    transition: opacity 0.25s;

    @starting-style {
        opacity: 0;
    }
}

.details[open] .details__image {
    display: none;
    opacity: 0;
    transition: opacity 0.25s;
}

.details__title {
    align-items: center;
    display: grid;
}

.details__title .en {
    color: var(--color-orange);
    font-size: 1.25rem;
    font-weight: 400;
}

.details__title .ja {
    font-family: var(--font-ibm);
    font-size: var(--text-2xl);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.details__icon {
    align-self: center;
    justify-self: end;
}

.details__icon .plus--horizontal {
    transition:
        opacity 0s,
        visibility 0s;
}

.details[open] .details__icon .plus--horizontal {
    opacity: 0;
    visibility: hidden;
}

.details__contentInner {
    padding-bottom: 3rem;
}

.boxList {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    margin-top: 3rem;
}

.boxList__item {
    background-color: #fff7f0;
    border-radius: var(--rounded-lg);
    border-radius: var(--rounded-lg);
    display: grid;
    gap: 1rem;
    grid-row: span 3;
    grid-template-rows: subgrid;
    height: 100%;
    padding: 1.75rem;
    position: relative;
}

.boxList__item::before {
    background: linear-gradient(to bottom, #ff9940, #e14d21);
    border: 1px solid transparent;
    border-radius: inherit;
    box-sizing: border-box;
    content: "";
    inset: 0;
    -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
    mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    position: absolute;
}
.boxList__inner {
}

.boxList__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.375rem;
}

.boxList__title {
    align-items: center;
    display: flex;
    font-size: var(--text-xl);
}

.boxList__body {
    font-family: var(--font-ibm);
    font-size: var(--text-sm);
    font-weight: 400;
    height: auto;
    line-height: 1.6;
}

.boxList__tag {
    color: var(--color-orange);
    font-family: var(--font-ibm);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

@media (max-width: 48rem) {
    .lead {
        padding-bottom: 2.5rem;
    }

    .indexList {
        gap: 0.75rem 3.5rem;
        margin-top: 1.25rem;
        padding: 0.875rem 1.25rem;
    }

    .indexList__link {
        padding-block: 0.375rem;
    }

    .detailsList {
        padding-top: 2.5rem;
    }

    .details__summary {
        grid-template-areas:
            "item1 item2 item4"
            "item3 item2 item4"
            "item3 . item4"
            "item3 . item4";
        grid-template-columns: auto 1fr auto;
        height: auto;
        padding-block: 1.5rem;
    }

    .details__summary::before {
        font-size: 2rem;
        grid-area: item1;
    }

    .details[open] .details__summary {
        gap: 1.25rem;
    }

    .details__image {
        display: none;
        grid-area: item2;
    }

    .details__title {
        grid-area: item3;
    }

    .details__title .en {
        font-size: 0.75rem;
    }

    .details__title .ja {
        margin-top: 0.5rem;
    }

    .details__icon {
        grid-area: item4;
        margin-top: 4rem;
    }

    .boxList {
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .boxList__inner {
        padding: 1.5rem;
    }
}