.page-template-page-company-sdgs {
    position: relative;
}

.company {
    padding-bottom: calc(40px + var(--spacing-4xl));
}

/**
 * Top
 */
.top {
    margin-inline: auto;
    max-width: 860px;
    padding-top: var(--spacing-3xl);
    width: 100%;
}

.top__lg {
    font-size: calc(var(--text-2xl) + 4px);
    font-weight: 200;
    line-height: 2;
    text-align: center;
}

.top__md {
    font-size: var(--text-md);
    line-height: 2.6;
    margin-top: var(--spacing-xl);
}

/**
 * Attempt
 */
.attempt {
    padding-top: var(--spacing-4xl);
}

.attempt + .attempt {
    margin-top: var(--spacing-xl);
}

.attemptHead {
    align-items: start;
    display: grid;
    gap: 24px var(--spacing-xl);
    grid-template-columns: auto 1fr;
    margin-inline: auto;
    max-width: 860px;
}

.attemptHead__copy {
    color: var(--color-primary-light);
    display: inline-flex;
    font-size: 78px;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1;
    width: fit-content;
}

.attemptHead__copy::after {
    background-color: var(--color-primary-light);
    content: "";
    display: block;
    height: 1lh;
    margin-left: 12px;
    width: 3px;
}

.attemptHead__number {
    color: var(--color-primary-light);
    font-size: calc(var(--text-2xl) + 2px);
    letter-spacing: 0.05em;
}

.attemptHead__title {
    font-size: calc(var(--text-2xl) + 1px);
    font-weight: 300;
    margin-top: 4px;
}

.attemptHead__lead {
    line-height: 2.1;
    margin-top: var(--spacing-md);
}

.attempt__images {
    align-items: center;
    display: flex;
    gap: var(--spacing-2xl);
    justify-content: center;
    margin-top: var(--spacing-3xl);
}

.measures {
    margin-top: var(--spacing-4xl);
}

.measures__title {
    align-items: center;
    color: var(--color-primary);
    display: flex;
    font-size: calc(var(--text-2xl) + 2px);
    font-weight: 300;
    gap: 16px;
    justify-content: space-between;
    white-space: nowrap;
    width: 100%;
}

.measures__title::before,
.measures__title::after {
    background-color: var(--color-primary);
    content: "";
    display: inline-block;
    height: 2px;
    margin: 0 var(--spacing-xs);
    width: 43%;
}

.measures__list {
    display: grid;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.measures__item {
    align-items: center;
    display: flex;
    font-family: var(--font-sans);
    justify-content: center;
}

.measures__item::before {
    aspect-ratio: 1;
    background-color: var(--color-primary-dark);
    border-radius: var(--rounded-full);
    content: "";
    display: inline-block;
    line-height: 1lh;
    margin-right: var(--spacing-xs);
    width: 14px;
}

@media (max-width: 768px) {
    .attemptHead {
        grid-template-columns: 1fr;
    }

    .attemptHead__copy {
        flex-direction: column;
        font-size: 50px;
    }

    .attemptHead__copy::after {
        height: 4px;
        margin-left: 0;
        margin-top: 8px;
        width: 100%;
    }

    .attemptHead__number {
        font-size: calc(var(--text-2xl) + 1px);
    }

    .attemptHead__title {
        font-size: calc(var(--text-2xl) - 1px);
    }

    .attempt__images {
        flex-direction: column;
        margin-inline: auto;
        max-width: 200px;
    }

    .attempt__images img {
        width: 100%;
    }

    .measures__title::before,
    .measures__title::after {
        width: 40%;
    }

    .measures__item {
        justify-content: flex-start;
    }
}

/**
 * Info
 */
.info {
    padding-top: calc(var(--spacing-4xl) + 80px);
}

.infor__container {
    border-bottom: 4px solid var(--color-primary);
    border-top: 4px solid var(--color-primary);
}

.info__content {
    align-items: center;
    display: flex;
    gap: 24px 40px;
    margin-inline: auto;
    max-width: 740px;
}

.info__content p {
    font-family: var(--font-sans);
    font-size: calc(var(--text-lg) + 2px);
    font-weight: 300;
    line-height: 1.6;
    max-width: 340px;
}

.fixed__img {
    bottom: 24px;
    left: 24px;
    position: fixed;
    width: 127px;
}

@media (max-width: 768px) {
    .infor__container {
        padding-bottom: 80px;
    }

    .info__content {
        flex-direction: column;
    }

    .info__content p {
        margin-top: -80px;
    }

    .fixed__img {
        bottom: 8px;
        left: 8px;
        width: 80px;
    }
}

/* モーダル */
.modal {
    animation: fade-in 0.4s;
    animation-fill-mode: forwards;
    border: none;
    border-radius: 0;
    box-shadow: 0 0 30px rgb(255 255 255/50%);
    height: fit-content;
    left: 50%;
    overflow: visible;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
}

dialog::backdrop {
    backdrop-filter: blur(8px);
    background-color: rgb(0 0 0 / 40%);
}

@keyframes fade-in {
    from {
        opacity: 0;
        top: 60%;
    }

    to {
        opacity: 1;
        top: 50%;
    }
}

.dialog-inner {
    position: relative;
}

.dialog-img {
    min-width: 400px;
}

.dialog-close-button {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 40px;
    z-index: 999;
}

@media (any-hover: none) {
    .dialog-close-button {
        outline: none;
    }

    .dialog-close-button:focus-visible {
        outline: none;
    }
}

/* モーダルが表示されている時に背景をスクロールさせない */
body:has(dialog[open]) {
    overflow: hidden;
}

.fixed__img:hover,
.dialog-close-button:hover {
    cursor: pointer;
    opacity: 0.8;
}

@media (max-width: 767px) {
    .modal {
        overflow: scroll;
        top: 24px;
        width: 500px;
    }

    .dialog-close-button {
        right: 2px;
        top: 2px;
        width: 32px;
    }
}