:root {
    --color-energy: #b68e0d;
    --color-fiber: #2482bd;
    --color-food: #bd487f;
    --color-housing-life: #3e983f;
    --color-info-finance: #067268;
    --color-machine: #c86e08;
    --color-metal: #a9006e;
    --color-head-office: #656668;
    --color-8th-company: #1d4295;
}

html {
    scroll-padding: calc(var(--header-height) + 1rem);
}

body[data-color-theme="energy"] {
    --color-main: var(--color-energy);
}

body[data-color-theme="fiber"] {
    --color-main: var(--color-fiber);
}

body[data-color-theme="food"] {
    --color-main: var(--color-food);
}

body[data-color-theme="housing-life"] {
    --color-main: var(--color-housing-life);
}

body[data-color-theme="info-finance"] {
    --color-main: var(--color-info-finance);
}

body[data-color-theme="machine"] {
    --color-main: var(--color-machine);
}

body[data-color-theme="metal"] {
    --color-main: var(--color-metal);
}

body[data-color-theme="head-office"] {
    --color-main: var(--color-head-office);
}

body[data-color-theme="8th-company"] {
    --color-main: var(--color-8th-company);
}

html:focus-within {
    scroll-behavior: auto;
}

.header {
    background: transparent;
    height: auto;
}

.article__service .columns--2 {
    align-items: flex-start;
    gap: 2.25rem;
}

.article__service .columns--2 div {
    width: 100%;
}

.article__service {
    margin-top: 3.75rem;
}

.article__service h2 {
    margin-top: 0;
}

.article .block {
    display: block;
}

.service__image {
    /* aspect-ratio: 4 / 3; */
    border-radius: 0.5rem;
    max-width: 17.5rem;
    object-fit: contain;
}

.staff {
    display: inline-grid;
    gap: 1.875rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 1.75rem;
}

.staff__item {
    border-radius: 1.875rem;
    overflow: hidden;
    position: relative;
}

.staff__item img {
    aspect-ratio: 1;
    border-radius: 1.875rem;
    transition: transform 0.3s ease-in-out;
}

.staff__item:hover img {
    transform: scale(1.1);
}

:where(.staff__item p) {
    background-color: color-mix(in srgb, var(--color-primary-light) 90%, transparent 10%);
    border-bottom-left-radius: 1.875rem;
    border-bottom-right-radius: 1.875rem;
    bottom: 0;
    color: var(--color-text-white);
    font-family: var(--font-roboto);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.417;
    margin-block: 0;
    padding-block: 0.625rem;
    padding-inline: 0.5rem;
    position: absolute;
    text-align: center;
    width: 100%;
}

.staff__item p {
    background-color: color-mix(in srgb, var(--color-main) 90%, transparent 10%);
}

.staff__job {
    font-size: 0.875rem;
    overflow: hidden;
    padding-inline: 0.3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message {
    border-radius: 0.5rem;
}

.message .columns--3 {
    display: flex;
    margin-top: 1rem;
}

.message .columns--3 img {
    aspect-ratio: 252 / 189;
    max-width: 15.75rem;
    max-width: 33.333%;
    object-fit: contain;
}

.info {
    margin-top: 3.75rem;
}

.info__title {
    background-color: var(--bgc-blue);
    color: var(--color-text-base);
    display: grid;
    font-size: 0.75rem;
    height: 2.125rem;
    letter-spacing: 0.09em;
    line-height: 1.17;
    margin-bottom: 0;
    padding: 0;
    padding-block: 0.5625rem 0.5rem;
    place-items: center;
}

.info__table {
    background-color: var(--bgc-blue-light);
    display: grid;
    font-size: 0.75rem;
    gap: 2rem;
    grid-template-columns: repeat(2, 1fr);
    padding: 0.125rem 1.5rem;
}

.info__table.table {
    margin-top: 0;
}

.info__row {
    border-bottom: 0.0625rem solid var(--color-text-white);
    display: grid;
    gap: 0.25rem;
    padding-block: 0.625rem;
}

.info__row:last-child {
    border-bottom: none;
}

.info__row dt {
    font-weight: 700;
    letter-spacing: 0.04em;
}

.info__row dd {
    font-weight: 400;
}

.schedule .pageTitle {
    margin-bottom: 2.5rem;
}

.entrySchedule {
    margin-block: 3.75rem 1.875rem;
}

.entrySchedule__head {
    display: flex;
    font-size: 1.125rem;
    justify-content: center;
}

.entrySchedule__list {
    display: grid;
    gap: 1.25rem;
    list-style: "";
    margin-top: 0.75rem;
}

.entrySchedule__item {
    background-color: var(--bgc-blue-light);
    font-family: var(--font-noto-sans);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.56;
    padding: 0.9375rem 1.5625rem;
    position: relative;
    text-align: center;
}

.entrySchedule__item::before {
    bottom: -1.05rem;
    content: url("data:image/svg+xml,%3Csvg width='19' height='11' viewBox='0 0 19 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.44434 11L0.585938 0H18.3037L9.44434 11Z' fill='%23E1EBFF'/%3E%3Cpath d='M9.44434 11L0.585938 0H18.3037L9.44434 11Z' stroke='23E1EBFF'/%3E%3C/svg%3E%0A");
    display: inline-block;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}

.entrySchedule__item:last-child::before {
    display: none;
}

.entrySchedule__note {
    font-size: 0.875rem;
}

@media (max-width: 63.9375rem) {
    .staff {
        grid-template-columns: repeat(3, 1fr);
    }

    .info__table dl + dl {
        border-top: 1px solid var(--color-text-white);
    }
}

@media (max-width: 46.4375rem) {
    .columns--2 {
        flex-direction: column;
    }

    .service__image {
        margin-inline: auto;
        max-width: 20.9375rem;
        width: 100%;
    }

    .message .columns--3 {
        align-items: center;
        flex-direction: column;
    }

    .message .columns--3 img {
        max-width: 20.9375rem;
    }

    .staff {
        display: grid;
        grid-template-columns: 1fr;
        margin-inline: auto;
        max-width: 17.25rem;
    }

    .staff__item img {
        width: 100%;
    }
}