@charset "UTF-8";

/* FV */

#hero .section-inner {
    padding-top: 1.25em;
    padding-bottom: 1.25em;
}
#hero .section-inner::before {
    content: "";
    display: block;
    flex-grow: 2;
    flex-shrink: 2;
    min-height: 3.75em;
    max-height: min(46.2085vh, 100vw);
}

.hero__catchcopy-container {
    width: calc(100% + 1.25em);
}
.hero__catchcopy {
    width: min(100%, 23.75em);
    aspect-ratio: 804/476;
    margin: 0 auto;
}
.hero__catchcopy-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.hero__subcopy {
    text-align: center;
    margin-top: 0.5em;
}
.hero__subcopy-text {
    font-size: 0.875em;
    line-height: 2;
}

.hero__scroll-info {
    display: flex;
    flex-direction: column;
    width: 1.125em;
    margin: 3em auto 2em auto;
    padding-bottom: 0.25em;
}
.hero__scroll-info-line {
    display: block;
    width: 100%;
    margin-top: -25%;
    aspect-ratio: 1/1;
    border-style: solid;
    border-color: #000;
    border-width: 0 1px 1px 0;
    transform: rotate(45deg) skew(-8deg, -8deg);
}

.hero__bg-img {
    display: block;
    width: 100%;
    min-width: max(24.375em, 100%);
    height: auto;
    aspect-ratio: 780/1236;
    object-fit: cover;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin: auto 0;
    transform: translate(-50%, -27%);
}

@media (min-width: 960px)
{
    #hero .section-inner::before {
        display: none;
    }
    .hero__catchcopy-container {
        width: 100%;
        flex-grow: 2;
    }
    .hero__catchcopy {
        width: 50.25em;
        position: absolute;
        top: 0;
        bottom: 0;
        left: min(calc(100em - 100%), 2.5em);
        margin: auto 0;
    }
    .hero__bg-img {
        min-width: 100%;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        left: 0;
        right: 0;
        margin: auto;
        transform: none;
    }
    .hero__bg-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}





/* Our Mission */

#our-mission {
    background-color: #000;
    color: #fff;
}
.our-mission__contents {
    display: flex;
    flex-direction: column;
    gap: 1.875em;
    width: 100%;
    max-width: 37.5em;
    margin: 0 auto;
}
.our-mission__description {
    text-align: justify;
}

@media (min-width: 960px)
{
    .our-mission__contents {
        width: 36em;
        max-width: 100%;
    }
    .our-mission__bg-img {
        object-fit: cover;
    }
}





/* Our Service */

.our-service__contents {
    width: 100%;
}
.our-service__introduction {
    max-width: 37.5em;
    margin: 0 auto;
}
.our-service__introduction-main {
    display: flex;
    flex-direction: column;
    gap: 1.875em;
}

.our-service__introduction-more-link {
    position: relative;
    align-self: flex-start;
    padding-left: 1.25em;
    color: inherit;
    font-family: "Montserrat", sans-serif;
    font-size: 1.625em;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: 0.1s linear;
    margin-top: 1em;
}
.our-service__introduction-more-link::before,
.our-service__introduction-more-link::after {
    content: "";
    display: block;
    position: absolute;
}
.our-service__introduction-more-link::before {
    width: 1em;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: #000;
    top: 0.10526em;
    left: 0;
    transition: 0.1s linear;
}
.our-service__introduction-more-link::after {
    width: 0.30769em;
    height: calc(tan(60deg) * 0.46153em / 2);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #fff;
    top: 0.41em;
    left: 0.41em;
    transition: 0.1s linear;
}
.our-service__introduction-more-link:hover {
    color: var(--color-primary);
    padding-left: 1.45em;
}
.our-service__introduction-more-link:hover::before {
    background-color: var(--color-primary);
    transform: scale(1.2);
}
.our-service__introduction-more-link:hover::after {
    transform: scale(1.2);
}

.our-service__introduction-interactive-element {
    width: calc(100% + 6.25em);
    margin-top: 1.875em;
    margin-left: -3.125em;
    margin-right: -3.125em;
}
.our-service__introduction-interactive-element-img {
    width: 100%;
    height: auto;
}

.our-service__categories {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.75em;
    padding-top: 3.25em;
}
.our-service__category {
    flex-shrink: 0;
    flex-grow: 2;
    flex-basis: 21.875em;
    max-width: min(30em, 100%);

    border-radius: 0.8125em;
    padding: 1em 1.25em;
    background-color: #2C7DFF;
    color: #fff;
}

.our-service__category-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25em;
    padding-bottom: 0.125em;
}
.our-service__category-header-title {
    display: flex;
    align-items: flex-end;
    gap: 0.625em;
    white-space: nowrap;
}
.our-service__category-header-title-en {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.875em;
    line-height: 1.2;
}
.our-service__category-header-title-ja {
    font-size: 0.75em;
    padding-bottom: 0.5em;
}

.our-service__category-nav {
    padding-bottom: 0.375em;
}
.our-service__category-nav-control-button {
    border-color: #fff;
}
.our-service__category-nav-control-button::before {
    border-color: #fff;
}
.our-service__category-nav-control-button:hover {
    background-color: #fff;
}
.our-service__category-nav-control-button:hover::before,
.our-service__category-nav-control-button:hover::after {
    border-color: #2C7DFF;
}

.our-service__category-details {
    display: flex;
    overflow: hidden;
    position: relative;
    transition: height 0.8s ease;

    width: calc(100% + 2.5em);
    margin: 0 -1.25em;
}
.our-service__category-detail {
    flex-shrink: 0;
    width: 100%;
    padding: 0 1.25em;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateX(100%);
    pointer-events: none;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-play-state: paused;
    animation-iteration-count: 1;
    animation-duration: 0.8s;
    animation-delay: 0s;
}
.our-service__category-detail.current {
    position: relative;
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.our-service__category-detail-eyecatch {
    width: 100%;
    aspect-ratio: 328/185;
    background-color: #fff;
}
.our-service__category-detail-eyecatch-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.our-service__category-detail-eyecatch-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.our-service__category-detail-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.25em;
    line-height: 1.3;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 0.5em;
}

.our-service__category-detail-description {
    font-size: 0.75em;
    line-height: 1.6666;
    margin-top: 0.5em;
}

.our-service__bg-img-01 {
    width: 32em;
    height: auto;
    top: 1em;
    left: -14em;
    transform: rotate(161deg);
}
.our-service__bg-img-02 {
    width: 32em;
    height: auto;
    right: -12.5em;
    bottom: 4.5em;
    transform: rotate(-30deg);
}

@keyframes slideInNext {
    from {
        opacity: 1;
        pointer-events: none;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
}

@keyframes slideInPrev {
    from {
        opacity: 1;
        pointer-events: none;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
}

@keyframes slideOutNext {
    from {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }
    to {
        opacity: 1;
        transform: translateX(-100%);
        pointer-events: none;
    }
}

@keyframes slideOutPrev {
    from {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }
    to {
        opacity: 1;
        transform: translateX(100%);
        pointer-events: none;
    }
}

@media (min-width: 960px)
{
    .our-service__introduction {
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 5em;
    }
    .our-service__introduction::after {
        content: "";
        display: block;
        flex-grow: 1;
        min-width: 1.5em;
        order: 2;
    }

    .our-service__introduction-main {
        flex-basis: 36em; /* 576px */
        order: 1;
    }
    .our-service__introduction-interactive-element {
        order: 3;
        flex-basis: 55.375em; /* 886px */
        margin-top: -7.5em;
        margin-bottom: -7.5em;
        margin-left: 0;
        margin-right: -2em;
    }

    .our-service__categories {
        flex-wrap: nowrap;
        gap: 1em;
        padding-top: 0;
    }
    .our-service__category {
        max-width: 23em;
        flex-basis: calc(25%);
    }

    .our-service__bg-img-01 {
        width: 65em; /* 1040px*/
        top: 1em;
        left: -28em;
    }
    .our-service__bg-img-02 {
        width: 74.75em; /* 1196px*/
        right: -28em;
        bottom: 9em;
    }
}





/* Our Works */

#our-works {
    background-color: #000;
    color: #fff;
}
.our-works__contents {
    width: 100%;
}

.our-works__title {
    position: relative;
    display: inline-flex;
    padding: 0.3125em 0
}
.our-works__title::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
}
.our-works__title-grid {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    font-size: 2.125em;
    line-height: 1;
    white-space: nowrap;
}
.our-works__title-grid--second {
    margin-top: calc(0.75em - 1px);
}

.our-works__items {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5em 1.75em;
    margin-top: 3.75em;
}
.our-works__item {
    flex-shrink: 0;
    flex-grow: 2;
    flex-basis: 21.875em;
    max-width: min(30em, 100%);

    display: flex;
    flex-direction: column;
    border-radius: 0.8125em;
    overflow: hidden;
    background-color: #ffffff;
    color: #000;
}
.our-works__item-eyecatch {
    width: 100%;
    aspect-ratio: 350/260;
    background-color: #888888;
    overflow: hidden;
    position: relative;
}
.our-works__item-eyecatch-row {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    opacity: 0;
    z-index: 1;
    pointer-events: none;

    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-play-state: paused;
    animation-iteration-count: 1;
    animation-duration: 0.8s;
    animation-delay: 0s;
}
.our-works__item-eyecatch-row.current {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}
.our-works__item-eyecatch-row-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.our-works__item-eyecatch-row-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.our-works__item-info {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 15em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.25em;
}
.our-works__item-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.625em;
    align-items: flex-end;
    font-family: "Montserrat", sans-serif;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.our-works__item-title {
    font-size: 1.75em;
    font-weight: 900;
    line-height: 1.285714;
}
.our-works__item-number {
    font-size: 0.875em;
    font-weight: 400;
    padding: 0.25em 0;
}
.our-works__item-body {
    flex-grow: 1;
    position: relative;
    display: block;
    transition: height 0.8s ease;
}
.our-works__item-body-row {
    display: flex;
    flex-direction: column;
    gap: 0.9375em;

    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;

    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-play-state: paused;
    animation-iteration-count: 1;
    animation-duration: 0.8s;
    animation-delay: 0s;
}
.our-works__item-body-row.current {
    position: relative;
    top: 0;
    left: 0;
    opacity: 1;
    pointer-events: auto;
}

.our-works__item-lead {
    font-size: 0.875em;
    font-weight: 700;
    margin-top: 0.35714em;
}
.our-works__item-description {
    font-size: 0.75em;
    line-height: 1.6666;
    text-align: justify;
}
.our-works__item-link {
    align-self: flex-start;
}
.our-works__item-link-button {
    display: flex;
    align-items: center;
    gap: 2em;
    padding: 0.1875em;
    border-radius: 999px;
    background-color: #000;
    color: #fff;
    transition: 0.1s linear;
}
.our-works__item-link-button-text {
    padding-left: 0.5em;
    font-family: "Montserrat", sans-serif;
    font-size: 0.6875em;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}
.our-works__item-link-button::after {
    content: "";
    display: block;
    width: 0.8125em;
    height: 0.8125em;
    border-radius: 50%;
    background: #fff url("../img/common/icon-lock.svg") no-repeat center center;
    background-size: 55%;
}
.our-works__item-link-button:hover {
    background-color: var(--color-primary);
}

.our-works__item-nav {
    justify-content: flex-end;
    padding-top: 0.9375em;
    margin-top: auto;
}

.our-works__more-link {
    display: flex;
    justify-content: center;
    padding-top: 3.75em;
}
.our-works__more-link-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625em;
    transition: 0.1s linear;
}
.our-works__more-link-button-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    transition: 0.1s linear;
}
.our-works__more-link-button-icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    clip-path: circle(50% at 50% 50%);
    background-color: #fff;
    transition: 0.1s linear;
    position: absolute;
    z-index: 1;
}
.our-works__more-link-button-icon-img {
    position: relative;
    width: 50%;
    aspect-ratio: 1/1;
    object-fit: contain;
    z-index: 2;
    transition: 0.2s linear;
}
.our-works__more-link-button-text {
    font-family: "Montserrat", sans-serif;
    font-size: 1.375em;
    font-weight: 700;
    line-height: 1;
}
.our-works__more-link-button:hover {
    color: var(--color-primary);
}
.our-works__more-link-button:hover .our-works__more-link-button-icon::before {
    background-color: var(--color-primary);
    border-radius: 0;
    height: calc(tan(60deg) * 50%);
    width: 100%;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(5%, 0);
}
.our-works__more-link-button:hover .our-works__more-link-button-icon-img {
    filter: brightness(0) invert(1);
}

.our-works__bg-img-01 {
    width: 45em;
    height: auto;
    top: -6em;
    right: -7em;
    transform: rotate(33deg);
}
.our-works__bg-img-02 {
    width: 32em;
    height: auto;
    bottom: -2em;
    left: -10em;
    transform: rotate(220deg);
}

@keyframes worksEyecatchInNext {
    from {
        opacity: 0;
        filter: blur(20px);
        transform: translateX(0);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes worksEyecatchInPrev {
    from {
        opacity: 0;
        filter: blur(20px);
        transform: translateX(0);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0);
    }
}

@keyframes worksEyecatchOutNext {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(20px);
    }
}

@keyframes worksEyecatchOutPrev {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(20px);
    }
}

@keyframes worksBodyInNext {
    from {
        opacity: 0;
        filter: blur(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}
@keyframes worksBodyInPrev {
    from {
        opacity: 0;
        filter: blur(20px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}
@keyframes worksBodyOutNext {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(20px);
    }
}
@keyframes worksBodyOutPrev {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(20px);
    }
}

@media (min-width: 960px)
{
    .our-works__title-grid {
        font-size: 2.5em;
    }

    .our-works__items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: 1.25em;
    }
    .our-works__item {
        max-width: none;
        flex-direction: row;
    }
    .our-works__item-eyecatch {
        flex-shrink: 1;
        flex-basis: 31.875em; /* 816px */
        aspect-ratio: 510/350;
    }

    .our-works__more-link-button-icon {
        width: 4em;
        height: 4em;
    }
    .our-works__more-link-button-text {
        font-size: 1.875em;
    }

    .our-works__bg-img-01 {
        width: 118.75em; /* 1900px */
        top: -16em;
        right: -20.5em;
        transform: rotate(34deg);
    }
    .our-works__bg-img-02 {
        width: 68.75em; /* 1100px */
        bottom: -4em;
        left: -10em;
        transform: rotate(220deg);
    }
}





/* Recruit */

#recruit .section-inner {
    max-width: 100%;
}
.recruit__contents {
    width: 100%;
}
.recruit__main {
    max-width: 37.5em;
    max-width: 45.5em;
    margin: 0 auto;
}

.recruit__lead-block {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    margin-top: 3.25em;
}
.recruit__lead-block-row {
    font-size: 2.215em;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--color-primary);
    display: flex;
    align-items: flex-end;
    gap: 0;
}
.recruit__lead-block-blankspace {
    display: block;
    width: 3em;
}
.recruit__lead-block-blankspace::before {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 0.25em;
}
.recruit__lead-block-skillset {
    display: block;
    border: 2px solid #000;
    background-color: #fff;
    width: calc(8.5em - 4px);
    height: calc(2.75em - 4px);
    margin-right: 0.25em;
    position: relative;
}
.recruit__lead-block-skillset-text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    opacity: 0;
}
.recruit__lead-block-skillset-text.current {
    opacity: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction: normal;
    animation-play-state: running;
    animation-iteration-count: 1;
    animation-name: skillsetTextAnimation;
    animation-duration: 4s;
}

.recruit__lead-block-skillset-text {
    opacity: 0;
}
.recruit__lead-block-skillset-text.active {
    opacity: 1;
}
.recruit__description {
    line-height: 2;
    margin-top: 2.0em;
}

.recruit__main-interactive-element {
    width: calc(100% + 2.5em);
    margin: 3.25em -1.25em 0 -1.25em;
}
.recruit__main-interactive-element-img {
    width: 104%;
    margin-left: -4%;
    height: auto;
    max-width: none;
}

.recruit__entry-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25em;
    margin: 8.25em auto 0 auto;
    max-width: 25em
}
.recruit__entry-list-item {
    width: 100%;
}

.recruit__marquee {
    position: relative;
    display: flex;
    width: 100vw;
    overflow: hidden;
    font-family: "Montserrat", sans-serif;
    position: absolute;
    left: 0;
    bottom: 21em;
    pointer-events: none;
}
.recruit__marquee-text {
    flex-shrink: 0;
    font-size: 4.625em;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.025em;
    color: #9661FE;
    display: flex;
    margin: -0.125em 0;
}
.recruit__marquee-text-item {
    flex-shrink: 0;
}

.recruit__bg-img-01 {
    width: 26em;
    height: auto;
    right: 0;
    left: -10em;
    top: 38em;
    margin: 0 auto;
    transform: rotate(180deg);
}

@keyframes skillsetTextAnimation {
    0% {
        filter: blur(10px);
        transform: skew(30deg);
        opacity: 1;
    }
    20% {
        filter: blur(0);
        transform: skew(0deg);
        opacity: 1;
    }
    70% {
        filter: blur(0);
        transform: skew(0deg);
        opacity: 1;
    }
    90% {
        filter: blur(10px);
        transform: skewX(30deg);
        opacity: 0;
    }
    100% {
        filter: blur(10px);
        transform: skewX(30deg);
        opacity: 0;
    }
}

@media (min-width: 960px)
{
    #recruit .section-inner {
        max-width: min(100%, 100em);
    }
    .recruit__contents {
        display: flex;
        align-items: flex-start;
        width: 100%;
    }
    .recruit__main {
        max-width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 36em;
        padding-bottom: 12.5em
    }

    .recruit__lead-block {
        gap: 1.5em;
        margin-top: 3.25em;
    }
    .recruit__lead-block-row {
        font-size: 3.25em;
    }
    .recruit__lead-block-skillset {
        width: 7.825em;
        height: 2.125em;
    }

    .recruit__description {
        line-height: 2;
        margin-top: 2.5em;
        padding-right: 3.75em;
    
    }

    .recruit__entry-list {
        align-items: flex-start;
        gap: 1.25em;
        margin: 3em 0 0 0;
        max-width: 18.75em;
    }

    .recruit__interactive-element {
        flex-grow: 2;
    }
    .recruit__interactive-element-img {
        max-width: calc( (100vw - 36em) + ((min(100vw, 100em) - 100vw) / 2) );
        width: calc( (100vw - 36em) + ((min(100vw, 100em) - 100vw) / 2) );
        height: auto;
        margin-right: calc((min(100vw, 100em) - 100vw) / 2);
    }

    .recruit__marquee {
        position: relative;
        bottom: auto;
        margin-top: -8em;
    }
    .recruit__marquee-text {
        font-size: 16.25em;
        letter-spacing: -0.05em;
    }

    .recruit__bg-img-01 {
        width: 99.625em; /* 1594px */
        top: 4em;
        right: 0;
        bottom: 0;
        left: -48em;
        margin: auto;
    }
}





/* About and Company */

#about-and-company .section-inner--2col {
    width: 100%;
    gap: 9.25em;
    grid-template-columns: auto;
    padding-top: 0;
}

.about__slogan {
    display: flex;
    flex-direction: column;
    margin-top: 2.5em;
    overflow: hidden;
}
.about__slogan-item {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.25em;
    font-family: "Montserrat", sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.3334;
    letter-spacing: 0.0125em;
    white-space: nowrap;
}
.about__slogan-item-initial {
    flex-shrink: 0;
    display: block;
    width: 1.25em;
    text-align: center;
    background-color: var(--color-primary);
}
.about__slogan-item-text {
    display: block;
}
.about__slogan-item:first-of-type .about__slogan-item-initial,
.about__slogan-item:first-of-type .about__slogan-item-text {
    padding-top: 0.3334em;
}
.about__slogan-item:last-of-type .about__slogan-item-initial,
.about__slogan-item:last-of-type .about__slogan-item-text {
    padding-bottom: 0.3334em;
}

.about__detail {
    margin-top: 2.25em;
}
.about__detail-text {
    line-height: 2;
}

.company__contents {
    width: 100%;
}
.company__info {
    width: 100%;
    margin-top: 1.125em;
}
.company__info th,
.company__info td {
    line-height: 1.625;
}
.company__info th {
    color: var(--color-primary);
    padding-bottom: 0.5em;
}
.company__info td > span {
    display: inline-block;
}

.company__link {
    margin: 3.75em auto 0 auto;
    max-width: 21.25em;
}

.about-and-company__bg-img {
    width: 35em;
    height: auto;
    top: 0;
    left: 0;
    right: -64%;
    bottom: 22em;
    margin: auto;
    transform: rotate(-5deg);
}

@media(max-width: 959px)
{
    .company__info,
    .company__info tbody,
    .company__info tr,
    .company__info th,
    .company__info td {
        display: block;
    }
    .company__info tr {
        border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
        padding: 1.125em 0;
    }
}

@media (min-width: 960px)
{
    #about-and-company .section-inner--2col {
        place-items: stretch;
        justify-content: space-between;
        grid-template-columns: 40.7894% 55.2631%; /* 620 / 60 / 840 */
        gap: 2.5em;
        padding-top: 0;;
    }

    .about__contents {
        margin-bottom: auto;
    }
    .about__slogan {
        margin-top: 3.75em;
    }
    .about__slogan-item {
        font-size: 3.75em;
        letter-spacing: 0.025em;
    }
    .about__slogan-item-initial {
        width: 1.5em;
    }
    .about__detail {
        margin-top: 2.5em;
    }

    .company__contents {
        width: auto;
        margin-bottom: auto;
    }
    .company__info {
        border-collapse: collapse;
        margin-top: 6.25em;
    }
    .company__info th,
    .company__info td {
        position: static;
        padding: 1.75em 0;
        line-height: 1.75;
        text-align: left;
        vertical-align: middle;
        border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
    }
    .company__info th {
        width: 30%;
        white-space: nowrap;
        padding-right: 2em;
    }
    .company__link {
        max-width: 100%;
        margin-top: 3.75em;
    }

    .about-and-company__bg-img {
        /* 1840 / 804 */
        width: min(95.8333vw, 148.3870vh); /* 115em */
        right: -62%; /* -73em */
        bottom: -19%; /* -14em */
    }
}





/* Contact */

#contact {
    background-color: #000;
    color: #fff;
}
.contact__contents {
    width: 100%;
}

.contact__steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.625em;
    margin: 3.75em auto 0 auto;
    max-width: min(100%, 25em);
}
.contact__step {
    width: 100%;
    padding: 0.75em 1em;
    background-color: #767676;
    display: grid;
    place-items: center;
    place-content: center;
}
.contact__step--current {
    background-color: var(--color-primary);
}

.contact__form-container {
    margin-top: 3.75em;
}
.contact__form-items {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
}
.contact__form-item-header {
    padding-bottom: 0.9375em;
}
.contact__form-item-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1.25em;
    font-weight: 500;
}
.contact__form-item.required .contact__form-item-label::before {
    content: "必須";
    display: block;
    background-color: var(--color-primary);
    white-space: nowrap;
    font-size: 0.625em;
    line-height: 2;
    padding: 0 0.75em;
    margin-bottom: -0.2em;
}

.contact__form-item-body {
    width: 100%;
}
.contact__form-item-input:not([type="radio"]) {
    width: 100%;
    border: 1px solid #707070;
    padding: calc(0.5em - 1px) 1em;
    background-color: #fff;
    color: #000;
    transition: border-color 0.2s ease;
}
.contact__form-item-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.contact__form-item-input[type="number"] {
    -moz-appearance: textfield;
}
.contact__form-item-input[type="number"]::-webkit-outer-spin-button,
.contact__form-item-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
textarea.contact__form-item-input {
    resize: vertical;
    /*
    aspect-ratio: 1 / 1;
    */
    min-height: 21.875em;
    display: block;
    word-break: break-all;
}
.contact__form-item-input-notes {
    margin: 0.25em 0 -0.25em 0;
}

.radio-selector {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}
.radio-selector-selected-item {
    align-self: stretch;
    position: relative;
    border: 1px solid #707070;
    padding: calc(0.5em - 1px) 3.5em calc(0.5em - 1px) 1em;
    background-color: #fff;
    color: #000;
    transition: border-color 0.2s ease;
    user-select: none;
    cursor: pointer;
}
.radio-selector-selected-item::after {
    content: "";
    display: block;
    width: 1em;
    height: 0.75em;
    background-color: #000;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    position: absolute;
    top: 0;
    right: 0.75em;
    bottom: 0;
    margin: auto 0;
    transition: 0.2s ease;
}
.radio-selector--open .radio-selector-selected-item::after {
    transform: scale(1, -1);
}

.radio-selector-dropdown-list {
    align-self: stretch;
    position: absolute;
    top: 2.5em;
    left: 0;
    right: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform-origin: top;
    transform: scale(1, 0);
    transition: 0.2s ease;
}
.radio-selector--open .radio-selector-dropdown-list {
    opacity: 1;
    transform: scale(1, 1);
    pointer-events: auto;
}
.radio-selector-item-input[type="radio"] {
    display: none;
}
.radio-selector-item-label {
    display: block;
    cursor: pointer;
    border: 1px solid #707070;
    margin-top: -1px;
    padding: calc(0.5em - 1px) 1em 0.5em 1em;
    background-color: #fff;
    color: #000;
    transition: 0.2s ease;
}
.radio-selector-item-label:hover {
    background-color: #eee;
}
.radio-selector-item-input[type="radio"]:checked + .radio-selector-item-label {
    background-color: var(--color-primary);
    color: #fff;
}

.contact__form-privacy-info {
    margin-top: 3.75em;
}
.contact__form-privacy-info-text {
    line-height: 2;
    text-align: center;
}

.contact__form-privacy-info-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

.contact__form-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: center;
    max-width: min(100%, 21.25em);
    margin: 3.75em auto 0 auto;
}

.contact__bg {
    max-width: 100em;
    left: 0;
    right: 0;
    margin: auto;
}
.contact__bg-img {
    width: 46em;
    max-width: none;
    object-fit: none;
    top: 0;
    bottom: 0;
    left: -12em;
    margin: auto 0;
    transform: rotate(16.5deg) scale(-1, 1);
}

.contact__form .error-message {
    color: #ff0000;
    line-height: 1.5;
    margin-top: 0.5em;
}
.contact__form-item-input-notes+.error-message {
    margin-top: 0.25em;
}

.contact__form-complete {
    display: none;
    padding: 5em 0;
}
.contact__form-complete-message {
    font-size: 1.25em;
    line-height: 2;
    text-align: center;
}

/* 入力モード */
.contact__form:not(.--confirm):not(.--send) .contact__form-back-button,
.contact__form:not(.--confirm):not(.--send) .contact__form-submit-button {
    display: none;
}

/* 確認モード */
.contact__form.--confirm .contact__form-items {
    gap: 2.0em;
}
.contact__form.--confirm .contact__form-item-header {
    padding-bottom: 0;
}
.contact__form.--confirm .contact__form-item-label {
    pointer-events: none;
}
.contact__form.--confirm .contact__form-item.required .contact__form-item-label::before {
    display: none;
}
.contact__form.--confirm .contact__form-item {
    border-bottom: dashed 1px #707070;
    padding-bottom: 1.5em;
}
.contact__form.--confirm .contact__form-item-input:not([type="radio"]),
.contact__form.--confirm .radio-selector-selected-item {
    border-color: transparent;
    background-color: transparent;
    color: #fff;
    pointer-events: none;
    padding-left: 0;
}
.contact__form.--confirm textarea.contact__form-item-input {
    resize: none;
    appearance: none;
    aspect-ratio: unset;
    height: auto;
    max-height: none;
    min-height: 0;

    scrollbar-width: none;
    -ms-overflow-style: none;
}
.contact__form.--confirm textarea.contact__form-item-input::-webkit-scrollbar {
    display: none;
}
.contact__form.--confirm .contact__form-item-input-notes {
    display: none;
}
.contact__form.--confirm .contact__form-confirm-button,
.contact__form.--send .contact__form-confirm-button {
    display: none;
}

/* 送信完了モード */
.contact__form.--send .contact__form-items,
.contact__form.--send .contact__form-privacy-info,
.contact__form.--send .contact__form-submit {
    display: none;
}
.contact__form.--send .contact__form-complete {
    display: block;
}

@media (min-width: 960px)
{
    .contact__contents {
        max-width: 62.5em;
    }

    .contact__steps {
        flex-direction: row;
        justify-content: center;
        gap: 0;
        margin: 4.375em auto 0 auto;
        max-width: min(100%, 47.5em);
    }
    .contact__step {
        flex-shrink: 0;
        flex-basis: calc((100% + 0.4375em * 4) / 3);
        position: relative;
        place-items: stretch;
        margin: 0 -0.4375em;
        clip-path: polygon(
            0% 0%,    /* 左上 */
            91% 0%,   /* 右上の凹み */
            100% 50%, /* 右中央 */
            91% 100%, /* 右下の凹み */
            0% 100%,  /* 左下 */
            9% 50%    /* 左中央の出っ張り */
        );
    }
    .contact__step:first-of-type {
        clip-path: polygon(
            0% 0%,
            91% 0%,
            100% 50%,
            91% 100%,
            0% 100%
        );
    }

    .contact__form-container {
        margin-top: 6.25em;
    }
    .contact__form-items {
        display: table;
        width: 100%;
    }
    .contact__form-item {
        display: table-row;
    }
    .contact__form-item-header {
        display: table-cell;
        vertical-align: top;
        padding: 1.25em 0;
        width: 28.9473%;
    }
    .contact__form-item-label {
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.5em;
        min-height: 1.875em;
        margin-top: 0.3125em;
    }
    .contact__form-item-label-text {
        display: block;
        align-self: center;
        white-space: nowrap;
    }
    .contact__form-item.required .contact__form-item-label::before {
        font-size: inherit;
        line-height: inherit;
        margin-bottom: 0;
        padding: 0.1875em 0.75em;
        order: 2;
    }

    .contact__form-item-body {
        display: table-cell;
        vertical-align: top;
        padding: 1.25em 0 1.25em 1.75em;
        width: 71.0526%;
    }
    textarea.contact__form-item-input {
        aspect-ratio: unset;
        max-height: none;
        min-height: 8em;
    }
    .radio-selector {
        width: min(100%, 21.25em);
    }

    .contact__form-submit {
        flex-wrap: nowrap;
        justify-content: center;
        max-width: min(100%, calc(21.25em * 2));
    }

    .contact__bg-img {
        width: min(99.5833vw, 177.0370vh);
        min-width: min(99.5833vw, 177.0370vh);
        left: -33em;
        right: 0;
        margin: auto;
        transform: rotate(6.5deg) scale(-1, 1);
    }

    /* 確認モード */
    .contact__form.--confirm .contact__form-item-header {
        width: 18.9473%;
        border-bottom: dashed 1px #707070;
    }
    .contact__form.--confirm .contact__form-item-body {
        width: 81.0526%;
        border-bottom: dashed 1px #707070;
    }
    .contact__form.--confirm textarea.contact__form-item-input {
        min-height: 0;
    }
}










/*** ▼ モーダル - お問い合わせ ▼ ***/

.form-wrapper.complete .works-contact__introduction {
    pointer-events: none;
    transition: 0.2s ease;
    opacity: 0;
}
.form-wrapper.complete .works-contact__form {
    pointer-events: none;
    transition: 0.2s ease;
    opacity: 0;
}
.form-complete-message {
    display: grid;
    place-items: center;
    place-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: 0.2s ease;
}
.form-wrapper:not(.complete) .form-complete-message {
    opacity: 0;
    pointer-events: none;
}
.works-contact__complete-message-text {
    line-height: 2;
    text-align: center;
}
.works-contact__complete-message-button {
    margin: 2.5em auto 0 auto;
}




.works-contact__introduction {
    padding: 1.0em 0 1.5em 0;
}
.works-contact__form {
    display: block;
    padding: 0.9375em 0;
}
.works-contact__form-container {
    display: flex;
    flex-direction: column;
    gap: 2em;
    width: 100%;
}
.works-contact__form-item-header {
    padding-bottom: 0.625em;
}
.works-contact__form-item-label {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5em;
    font-weight: 500;
}
.works-contact__form-item-label-text {
    display: block;
    align-self: center;
    white-space: nowrap;
}
.works-contact__form-item-input {
    width: 100%;
    border: 1px solid #707070;
    padding: calc(0.5em - 1px) 1em;
    background-color: #fff;
    color: #000;
    transition: border-color 0.2s ease;
}
.works-contact__form-item-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.works-contact__form-submit {
    display: flex;
    justify-content: center;
    margin-top: 2.5em;
}
.works-contact__form-submit-button {
    background-color: #fff;
    color: #000;
}
.works-contact__form-submit-button-icon {
    background-color: #000;
}
.works-contact__form-submit-button-icon::before {
    background-color: #fff;
}
.works-contact__form-submit-button:hover {
    color: #fff;
}
.works-contact__form-submit-button:hover .works-contact__form-submit-button-icon {
    background-color: #fff;
}
.works-contact__form .error-message {
    color: #ff0000;
    font-size: 0.875em;
    line-height: 1.5;
    margin-top: 0.5em;
}

@media (min-width: 960px)
{
    .works-contact__introduction {
        padding: 1.0em 0 1.5em 0;
    }
    .works-contact__form {
        padding: 0.9375em 0;
    }
    .works-contact__form-container {
        display: table;
        border-collapse: collapse;
        width: 100%;
    }
    .works-contact__form-item {
        display: table-row;
    }
    .works-contact__form-item-header {
        display: table-cell;
        padding: 0.9375em 0;
    }
    .works-contact__form-item-body {
        display: table-cell;
        padding: 0.9375em 0;
    }
    .works-contact__form-item-label {
        gap: 0.5em;
        min-height: 1.875em;
        margin-top: 0.3125em;
    }

    .works-contact__form-submit {
        margin-top: 2.5em;
    }
}





/*** ▼ モーダル - プライバシーポリシー ▼ ***/

.privacy-policy__main {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
    padding-top: 2.75em;
    padding-bottom: 2.0em;
}
.privacy-policy__data-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.privacy-policy__data-list-title {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.6666;
}
.privacy-policy__data-list-body {
    line-height: 2;
    margin-top: 0.25em;
}  
.privacy-policy__close-button {
    margin-top: 0.25em;
}

@media (min-width: 960px)
{
    .privacy-policy__main {
        gap: 2.75em;
        padding-top: 4.5em;
        padding-bottom: 2.0em;
    }
    .privacy-policy__data-list-title {
        font-size: 1.5em;
    }
}





/*** ▼ モーダル - インタビュー ▼ ***/

.modal-body__contents--active.interview {
    display: flex;
}
.interview {
    flex-direction: column;
    align-items: center;
    gap: 3.75em;
}
.interview__col--left {
    display: flex;
    flex-direction: column;
    gap: 1.75em;
}
.interview__main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.75em;
}
.interview__main-title {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.6666;
}
.interview__main-content-text {
    line-height: 2;
}

.interview__links {
    display: flex;
    flex-direction: column;
    gap: 1.25em;
    width: 100%;
    max-width: 25em;
    margin: 0.75em auto 0 auto;
}

.interview__col--right {
    max-width: 25em;
    padding-bottom: 2.5em;
}
.interview__person-picture {
    position: relative;
}
.interview__person-picture::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/common/dots-tile.svg") top left;
    background-size: 1.5em;
    position: absolute;
    top: 1.75em;
    right: 1.75em;
    z-index: 1;
}
.interview__person-picture-img {
    position: relative;
    z-index: 2;
}

.interview__person-info {
    display: flex;
    align-items: center;
    gap: 1.25em;
    width: 100%;
    margin-top: 3.75em;
    padding: 0.875em 1.25em;
    border-radius: 0.75em;
    background-color: #2C7DFF;
    color: #fff;
}
.interview__person-info-header {
    white-space: nowrap;
    padding-bottom: 0.125em;
}
.interview__person-info-header-post {
    font-size: 0.875em;
    font-weight: 500;
    line-height: 1.5;
}
.interview__person-info-header-name {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.5;
}
.interview__person-info-body-text {
    font-size: 0.75em;
    line-height: 1.6666;
    text-align: justify;
}

@media (min-width: 960px)
{
    .interview {
        flex-direction: row;
        align-items: stretch;
        gap: 5em;
    }
    .interview__col--left {
        flex-basis: 38.75em;
    }

    .interview__header {
        flex-grow: 0;
    }
    .interview__main {
        flex-grow: 2;
    }
    .interview__main-title {
        font-size: 1.5em;
    }
    .interview__links {
        max-width: none;
        margin: auto 0 0 0;
    }

    .interview__col--right {
        max-width: none;
        padding-bottom: 0;
        flex-basis: 26.25em;
    }
}





/*** ▼ モーダル - リクルート ▼ ***/

.recruit-detail__main {
    display: flex;
    flex-direction: column;
    gap: 2em;
    padding-bottom: 2em;
}
.recruit-detail__main-row-title {
    font-size: 1.25em;
    font-weight: 700;
    line-height: 1.6666;
}
.recruit-detail__main-row-body {
    margin-top: 0.625em;
    padding-top: 0.625em;
    padding-left: 1.25em;
    border-top: 1px solid #707070;
}
.recruit-detail__main-row-body-text {
    line-height: 2;
}

.recruit-detail__flow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em 2.5em;
    padding: 0 2em;
    margin-top: 2.5em;
}
.recruit-detail__flow-item {
    flex-basis: 6em;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75em;
}
.recruit-detail__flow-item:not(:first-of-type)::before {
    content: "";
    display: block;
    height: calc(tan(60deg) * 1.5em / 2);
    width: 0.75em;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #000;
    position: absolute;
    left: -1.5em;
    top: 2.25em;
}
.recruit-detail__flow-item-icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 0.75em;
}
.recruit-detail__flow-item-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.recruit-detail__flow-item-text {
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
}

.recruit-detail__flow-description {
    font-size: 1em;
    line-height: 2;
    text-align: center;
    margin: 1.5em 0 0.5em 0;
}
.recruit-detail__main-row-link {
    max-width: 25em;
    margin: 0.75em auto 0 auto;
}

@media (min-width: 960px)
{
    .recruit-detail__main {
        gap: 2.5em;
        padding-bottom: 2.5em;
    }
    .recruit-detail__main-row-title {
        font-size: 1.5em;
    }
    .recruit-detail__main-row-body {
        margin-top: 1.25em;
        padding-top: 1.25em;
        padding-left: 2.75em;
    }
    .recruit-detail__flow {
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        gap: 3em;
        padding: 0 3em;
        margin-top: 5em;
    }
    .recruit-detail__flow-item {
        flex-basis: 7em;
        gap: 0.875em;
    }
    .recruit-detail__flow-item:not(:first-of-type)::before {
        height: calc(tan(60deg) * 2em / 2);
        width: 1em;
        left: -2em;
        top: 2.625em;
    }
    .recruit-detail__flow-item-text {
        font-size: 1.25em;
    }

    .recruit-detail__flow-description {
        font-size: 1.25em;
        margin: 2.5em 0;
    }
    .recruit-detail__main-row-link {
        max-width: none;
        margin: 2em 0 0 0;
        display: grid;
        place-items: center;
    }
}