@charset "UTF-8";

.main__header {
    margin-block: 1.5rem 2.88rem;

    .main__title {
        font-size: 2rem;
        font-weight: 500;
        letter-spacing: 0.08rem;
        text-align: center;
        color: var(--c-accent);

        @media (max-width: 1023px) {
            text-align: left;
            font-size: 1.75rem;
        }
    }

    .main__lead {
        margin-block-start: 1.31rem;
        line-height: 1.68;
        letter-spacing: 0.04rem;

        @media (min-width: 1024px) {
            text-align: center;
        }
    }

    .note {
        margin-block-start: 0.88rem;
        font-size: 0.875rem;

        @media (min-width: 1024px) {
            justify-content: center;
            text-align: center;
        }
    }
}

.main__body {
    position: relative;
}

.breadcrumbs {
    margin-block-end: 2.06rem;

    ol {
        display: flex;
        flex-wrap: wrap;
        font-size: 0.875rem;
        column-gap: 0.75rem;
        letter-spacing: 0.035rem;


        li {
            display: flex;
            align-items: center;
            column-gap: 0.75rem;

            &:not(:last-child) a {
                text-decoration: underline;
                font-weight: 500;
            }
        }

        a {
            display: block;
            
            @media (hover: hover) {
                transition: color 0.3s ease-out;
                will-change: color;

                &:hover {
                    color: var(--c-link-hover);
                }
            }
        }

        .breadcrumbs__icon {
            width: 0.3125rem;
            filter: grayscale(100%);
        }
    }
}

.section {
    & + .section {
        margin-block-start: 3.5rem;
    }

    p {
        letter-spacing: 0.04em;
        line-height: 1.68;
    }
}

/* hx */
.heading--lg {
    display: flex;
    align-items: center;
    column-gap: 0.62rem;
    margin-block: 2.62rem 0.62rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04rem;

    @media (max-width: 1023px) {
        font-size: 1.25rem;
    }

    &:first-child {
        margin-block-start: 0;
    }

    .heading__icon {
        flex-shrink: 0;
    }
}

.heading--md {
    margin-block: 1.75rem 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;

    &:first-child {
        margin-block-start: 0;
    }
}

.heading--sm {
    margin-block-start: 0.88rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.68;
    letter-spacing: 0.04rem;

    &:first-child {
        margin-block-start: 0;
    }
}

.heading--lg--border {
    margin-block-end: 1.75rem;
    padding-block-end: 0.38rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04rem;
    border-block-end: 1px solid var(--c-border);
}

.heading--md--border {
    margin-block: 1rem 0.75rem;
    padding-block-end: 0.38rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
    border-block-end: 1px solid var(--c-border);

    &:first-child {
        margin-block-start: 0;
    }
}

/* box */
.box--gray {
    margin-block: 1.56rem 1.25rem;
    padding: 2.5rem;
    border-radius: 0.625rem;
    background-color: var(--c-gray-100);

    @media (max-width: 1023px) {
        padding: 1.25rem;
    }

    p {
        font-size: 0.875rem;
    }
}

.box--outline {
    margin-block-start: 3.38rem;
    padding: 2.5rem;
    border-radius: 0.75rem;
    border: 1px solid #C4C4C4;

    @media (max-width: 1023px) {
        padding: 1.25rem;
    }
}

.box--outline--blue {
    padding: 2.5rem 4.75rem;
    border-radius: 0.25rem;
    border: 1px solid var(--c-accent);

    @media (max-width: 1023px) {
        padding: 1.25rem;
    }
}

/* hr */
hr {
    margin-block: 1.88rem;
    border-color: var(--c-border);

    & + *[class^="heading"] {
        margin-block-start: 0;
    }
}

/* list */
.list--description {
    margin-block-start: 0.5rem;
    line-height: 1.68;

    > div {
        display: flex;
        column-gap: 0.62rem;

        @media (max-width: 767px) {
            flex-direction: column;
        }

        &:not(:last-child) {
            margin-block-end: 0.56rem;
        }

        dt {
            flex-shrink: 0;

            &::after {
                content: "：";
                font-weight: 400;
            }
        }
    }
}

.list--disc {
    margin-inline-start: 1.5rem;
    list-style-type: disc;
    line-height: 1.68;
    letter-spacing: 0.04em;

    > li {
        margin-block-start: 0.5rem;
    }
}

.list--order {
    margin-inline-start: 1.5rem;
    list-style-type: disc;
    line-height: 1.68;
    letter-spacing: 0.04em;

    > li {
        margin-block-start: 0.5rem;
    }
}

.list--num {
    margin-inline-start: 1.5rem;
    list-style-type: decimal;
    line-height: 1.68;
    letter-spacing: 0.04em;

    > li {
        margin-block-start: 0.5rem;
    }

    & + p {
        margin-block-start: 0.5rem;
    }
}

.list--number--bracket {
    counter-reset: item;
    list-style: none;
    padding-left: 0;

    > li {
        counter-increment: item;
        position: relative;
        margin-block-start: 0.25rem;
        padding-inline-start: 2em;

        &::before {
            content: "（" counter(item) "）";
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

.list--check {
    margin-block-start: 0.5rem;

    > div {
        &:not(:last-child) {
            margin-block-end: 0.56rem;
        }
    }

    dt {
        display: flex;
        align-items: flex-start;
        column-gap: 0.25rem;
        font-weight: 500;
    }

    .list--check__num {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-block-start: 0.25rem;
        width: 1.1875rem;
        height: 1.1875rem;
        border-radius: 50%;
        background-color: var(--c-accent);
        font-family: var(--f-en);
        font-size: 0.74219rem;
        color: var(--c-white);
    }

    dd {
        padding-inline-start: 1.4375rem;
        font-size: 0.875rem;
    }
}

/* documents */
.document__num {
    margin-block: 1.62rem 3.2rem;
    margin-inline: auto;
    padding: 0.5rem 0.8rem;
    width: fit-content;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0.044em;
    color: var(--c-accent);
    border: 1px solid currentColor;
    border-radius: 0.125rem;
}
.document__list {
    margin-block-start: 0.75rem;
    display: grid;
    gap: 1.75rem;

    @media (max-width: 1023px) {
        gap: 1rem;
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }

    .document__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        column-gap: 1rem;
        padding: 1rem 1.4rem;
        border-radius: 0.375rem;
        border: 1px solid var(--c-accent);
        position: relative;
        background-color: var(--c-white);

        a::after {
            content: '';
            position: absolute;
            inset: 0;
        }

        &:has(a) {
            @media (hover: hover) {
                transition: color 0.3s ease-out, background-color 0.3s ease-out;
                will-change: color, background-color;

                &:hover {
                    color: var(--c-link-hover);
                    background-color: var(--c-light-blue);
                }
            }
        }
    }

    .document__info {
        flex: 1;
        font-size: 0.9375rem;
        font-weight: 500;
        letter-spacing: 0.04rem;
        line-height: 1.36;

        span {
            display: block;
            font-weight: 400;
            font-size: 0.6875rem;
        }

        .attention {
            font-weight: 500;
        }
    }

    .document__icon {
        flex-shrink: 0;

        @media (max-width: 767px) {
            width: 1.5rem;
        }
    }

    .document__arrow {
        flex-shrink: 0;
    }

}

/* step */
.step__list {
    margin-block-start: 1.56rem;
    
    .step__item {
        &:not(:last-child) {
            margin-block-end: 1.53rem;

            &::after {
                content: "";
                display: block;
                margin-block-start: 1.5625rem;
                margin-inline: auto;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 2.6875rem 1.875rem 0 1.875rem;
                border-color: var(--c-accent) transparent transparent transparent;
            }
        }

        .step__title {
            display: flex;
            align-items: center;
            column-gap: 0.94rem;
            margin-block-end: 1.06rem;
            font-size: 1.125rem;
            font-weight: 500;
            letter-spacing: 0.04em;
        }

        p {
            font-size: 0.875rem;
        }
    }
}

.step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 2rem;
    gap: 0.25rem;
    background-color: var(--c-accent);
    font-family: var(--f-en);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--c-white);

    b {
        font-size: 1.6em;
    }
}

.step__nav {
    display: flex;
    margin-block: 3rem 1rem;
    border: 1px solid var(--c-accent);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: 0.04em;
    color: var(--c-link);

    @media (max-width: 767px) {
        margin-block-start: 1rem;
        flex-direction: column;
    }

    > li {
        position: relative;

        @media (max-width: 767px) {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            column-gap: 1rem;
            padding: 0.5rem;

            &:not(:last-child) {
                border-block-end: 1px solid var(--c-accent)
            }
        }

        @media (min-width: 768px) {
            flex: 1;
            padding: 2.56rem 1.5rem;

            &:not(:first-child) {
                padding-inline-start: 3rem;
            }
        }
    }

    a {
        display: flex;
        justify-content: space-between;
        column-gap: 1rem;

        @media (max-width: 767px) {
            flex: 1;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        span {
            flex: 1;
        }

        .step__arrow {
            flex-shrink: 0;
            rotate: 90deg;
        }
    }

    .step__num {
        @media (max-width: 767px) {
            flex-shrink: 0;
        }

        @media (min-width: 768px) {
            position: absolute;
            top: -1rem;
            left: calc(50% - 2.5625rem);
        }
    }

    .step__right {
        position: absolute;
        width: 1.5rem;
        height: 100%;

        @media (max-width: 767px) {
            display: none;
        }
        @media (min-width: 768px) {
            right: -1.5rem;
            top: 0;
        }
    }
}


/* relation */
.relation {
    display: flex;
    gap: 0.5rem 2.5rem;
    margin-block-start: 1.62rem;
    border-radius: 0.625rem;
    border: 1px solid var(--c-accent);

    @media (max-width: 1023px) {
        flex-direction: column;
        padding: 1.25rem;
    }

    @media (min-width: 1024px) {
        align-items: center;
        padding: 1.5rem 0 1.875rem 1.875rem;
    }

    .relation__title {
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.12;
        letter-spacing: 0.04em;

        @media (max-width: 1023px) {
            font-size: 1.25rem;
        }
    }

    .relation__list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1.25rem;
    }
}

/* application__nav */
.application__nav {
    @media (max-width: 1023px) {
        margin-block-start: 3.38rem;
    }

    @media (min-width: 1024px) {
        position: absolute;
        top: 0;
        left: calc(100% + 2.5rem);
        width: 12.875rem;
    }

    .application__nav__title {
        letter-spacing: 0.04rem;
        font-weight: 700;

        @media (max-width: 1023px) {
            margin-block-end: 1rem;
            font-size: 1.25rem;
            line-height: 1.2;
        }

        @media (min-width: 1024px) {
            padding: 0.62rem;
            border: 1px solid var(--c-border);
            background-color: var(--c-gray-100);
            text-align: center;
            font-size: 0.875rem;
            line-height: 1.92;
        }
    }

    .application__nav__list {
        > li {
            margin-block-start: -1px;
            border: 1px solid var(--c-border);

            a {
                display: block;
                padding: 0.62rem 1.5rem;
                position: relative;
                font-weight: 500;
                font-size: 1rem;
                line-height: 1.68;
                letter-spacing: 0.04em;
                background-color: var(--c-white);

                @media (min-width: 1024px) {
                    font-size: 0.875rem;
                    line-height: 1.92;
                }

                @media (hover: hover) {
                    transition: color 0.3s ease-out, background-color 0.3s ease-out;
                    will-change: color, background-color;

                    &:hover {
                        color: var(--c-link-hover);
                        background-color: #F7F6FF;
                    }
                }

                &[aria-current="page"] {
                    color: var(--c-link-hover);
                    background-color: #F7F6FF;

                    &::before {
                        content: "";
                        position: absolute;
                        left: -1px;
                        top: 0;
                        width: 0.4375rem;
                        height: 100%;
                        background-color: currentColor;
                    }
                }
            }
        }

    }
}

.main:has(.application__nav) {
    overflow: hidden;
}

/* text */
.text--center {
    text-align: center;
    justify-content: center;
}

.blue {
    color: var(--c-accent);
}

/* details */
.details__list {
    margin-block-start: 1.88rem;

    .details__item {
        margin-block-start: -1px;
        
        &[open] {
            .details__icon span:nth-of-type(2) {
                display: none;
            }

            .details__contents {
                display: block;
                animation: fadeIn 0.8s ease forwards;
            }
        }
    }

    .details__toggle {
        padding: 0.62rem 1.44rem;
        position: relative;
        border: 1px solid var(--c-border);
        font-weight: 500;
        letter-spacing: 0.06em;
        line-height: 1.68;
        list-style: none;
        cursor: pointer;

        &::-webkit-details-marker {
            display: none;
        }
        &::marker {
            display: none;
        }

        @media (hover: hover) {
            transition: background-color 0.3s ease-out;
            will-change: backgrund-color;
            &:hover {
                background-color: var(--c-light-blue);
            }
        }
    }

    .details__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        top: 50%;
        right: 1.44rem;
        translate: 0 -50%;

        span {
            display: inline-block;
            width: 0.793rem;
            height: 2px;
            border-radius: 100vmax;
            background-color: var(--c-accent);

            &:nth-of-type(2) {
                rotate: 90deg;
                margin-block-start: -2px;
            }
        }
    }

    .details__contents {
        display: none;
        padding-block: 1.38rem;

        .heading--md {
            margin-block-end: 0.25rem;
        }

        p {
            font-size: 0.875rem;
            line-height: 1.57;
        }

        .box--gray {
            margin-block: 0;
        }
    }
}

/* table */
.table {
    border-block-start: 1px solid var(--c-border);
    border-inline-start: 1px solid var(--c-border);

    th, td {
        padding: 1rem 2.5rem;
        border-block-end: 1px solid var(--c-border);
        border-inline-end: 1px solid var(--c-border);
        font-weight: 500;
        line-height: 1.68;
        vertical-align: middle;

        @media (max-width: 767px) {
            padding: 0.5rem 1rem;
        }
    }

    thead {
        th {
            background-color: var(--c-gray-100);
        }
    }

    & + p {
        margin-block-start: 1.38rem;
    }

}

.table--dl {
    display: grid;
    row-gap: 1.12rem;
    margin-block: 0.5rem 1rem;

    @media (min-width: 768px) {
        grid-template-columns: auto 1fr;
    }

    > div {
        display: grid;
        gap: 0.5rem 1.62rem;

        @media (min-width: 768px) {
            grid-template-columns: subgrid;
            grid-column: span 2;
        }

        dt {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            background-color: var(--c-gray-100);
            text-align: center;

            br {
                @media (max-width: 767px) {
                    display: none;
                }
            }
        }

    }
}

/* error */
.error__title {
    font-family: var(--f-en);
    font-weight: 500;
    font-size: 3.875rem;
    color: var(--c-accent);
    text-align: center;
    letter-spacing: 0.04em;
    @media (max-width: 767px) {
        font-size: 2.25rem;
    }
}
.error__lead {
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--c-accent);
    text-align: center;
    letter-spacing: 0.04em;
    @media (max-width: 767px) {
        font-size: 1.125rem;
    }
}