@charset "UTF-8";

/* 背景・追従メニュー */

:root {
    --background-noise: url("../images/background-noise.png");
}

body {
    background-color: #fff;
}

body,
.header,
.footer,
.fv,
.business,
.culture,
.interview,
.recruit,
.interview__profile,
.interview-page__profile,
.about-us__data,
.recruit-page__step,
.interview-detail__message,
.fv h1 span,
.business-page__nav a.is-active,
.recruit-page__nav a.is-active,
.interview-detail__nav a.is-active {
    background-image: var(--background-noise);
    background-size: 400px 400px;
    background-repeat: repeat;
    background-position: left top;
}

.interview-detail__message {
    background-image: none;
}

@media screen and (max-width:768px) {
    .interview-detail__message{
        background-image: var(--background-noise);
        background-size: 400px 400px;
        background-repeat: repeat;
        background-position: left top;
    }
}

.about {
    background-color: #fff;
    background-image: var(--background-noise), linear-gradient(-51.61143deg, rgba(22,54,114,.8), #163672);
    background-size: 400px 400px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: left top;
}

@media screen and (max-width: 768px) {
    .interview__inner::before {
        background-image: var(--background-noise);
        background-size: 400px 400px;
        background-repeat: repeat;
    }
}

:is(.business-page__nav, .interview-detail__nav) {
    position: sticky;
    top: calc(var(--pc-header-height, 112px) + 40px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

:is(.business-page__nav, .interview-detail__nav) a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    min-width: 154px;
    white-space: nowrap;
    transition: color .2s, background-color .2s;
}

:is(.business-page__nav, .interview-detail__nav) a::before {
    content: "";
    display: none;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: url("../images/business/active-dot.svg") center / contain no-repeat;
}

:is(.business-page__nav, .interview-detail__nav) a.is-active {
    color: #fff;
    background-color: var(--blue);
    background-image: var(--background-noise);
    background-size: 400px 400px;
    opacity: 1;
    padding: 8px 16px;
}

:is(.business-page__nav, .interview-detail__nav) a.is-active::before {
    display: block;
}

@media screen and (max-width: 768px) {
    :is(.business-page__nav, .interview-detail__nav) {
        display: none;
    }
}

@media screen and (min-width: 1440px) {
    :is(.business-page__nav, .interview-detail__nav) {
        top: calc(var(--pc-header-height, calc(112 / 1440 * 100vw)) + calc(40 / 1440 * 100vw));
        gap: calc(8 / 1440 * 100vw);
        font-size: calc(18 / 1440 * 100vw);
    }

    :is(.business-page__nav, .interview-detail__nav) a {
        gap: calc(8 / 1440 * 100vw);
        padding: calc(8 / 1440 * 100vw) 0;
        min-width: calc(154 / 1440 * 100vw);
    }

    :is(.business-page__nav, .interview-detail__nav) a::before {
        width: calc(8 / 1440 * 100vw);
        height: calc(8 / 1440 * 100vw);
    }

    :is(.business-page__nav, .interview-detail__nav) a.is-active {
        padding: calc(8 / 1440 * 100vw) calc(16 / 1440 * 100vw);
    }
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
    .interview-detail__nav a {
        white-space: normal;
        line-height: 1.4;
    }
}

@media screen and (max-width: 768px) {
    .nav-menu {
        background-image: var(--background-noise);
        background-size: 400px 400px;
        background-repeat: repeat;
    }
}