.l-footer-has-contact {
    margin-top: 0
}

.about {
    position: relative;
    overflow: hidden;
    isolation: isolate
}

.about-message {
    display: flex;
    flex-direction: column
}

.about-gallery-item {
    position: absolute;
    display: grid
}

.about-gallery-item:nth-child(1) {
    --index: 0
}

.about-gallery-item:nth-child(2) {
    --index: 1
}

.about-gallery-item:nth-child(3) {
    --index: 2
}

.about-gallery-image {
    grid-row: 1/1;
    grid-column: 1/1;
    border-radius: var(--r);
    opacity: 0
}

.about-gallery-image.is-active {
    z-index: 1;
    opacity: 1;
    animation: enter-gallery-item 1100ms var(--ease-power4-out) both;
    animation-delay: calc(var(--index, 0)*60ms)
}

.about-gallery-image.is-active.is-prev {
    z-index: 0;
    animation: leave-gallery-item 500ms var(--ease-power1-in) both;
    animation-delay: calc(var(--index, 0)*60ms)
}

.about-map {
    position: absolute;
    z-index: -1;
    opacity: .6;
    filter: opacity(60%);
}

.about-map.is-active .about-map-bg {
    opacity: 1;
    transition: opacity 800ms linear
}

.about-map-bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    /* height: 100%; */
    opacity: 0;
    /* object-fit: cover; */
}

.about-map-ripple {
    position: absolute;
    background: radial-gradient(closest-side, var(--color-primary), transparent);
    opacity: 0;
    translate: -50% -50%
}

@keyframes enter-gallery-item {
    0% {
        opacity: 0;
        transform: translateY(15%)
    }

    60% {
        opacity: 1
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes leave-gallery-item {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    100% {
        opacity: 0;
        transform: translateY(-15%)
    }
}

.archive {
    background-color: #fff;
}

.archive-header .top-header-heading-ja,
.archive-header .top-header-heading-en,
.archive-header .top-header-description {
    color: #478ED0;
}

.client-item {
    position: relative
}

.client-item::before {
    position: absolute;
    content: "";
    background-color: var(--color-primary);
    border-radius: 50%
}

.client-notice {
    color: var(--color-gray);
    text-align: right
}

.info {
    overflow: hidden
}

.info-scope {
    background-color: var(--color-sky-light)
}

.info-scope-heading {
    display: flex;
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-none);
    color: var(--color-primary)
}

.info-scope-heading-ruby {
    font-weight: var(--font-weight-regular)
}

.info-flow {
    position: relative;
    display: grid;
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-half)
}

.info-flow-index {
    line-height: var(--leading-none);
    color: var(--color-white);
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-semi-bold);
    display: flex;
    align-items: center;
    justify-content: center
}

.info-flow-edge,
.info-flow-step,
.info-flow-group {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.info-flow-step-01::before,
.info-flow-step-02::before,
.info-flow-step-04::before,
.info-flow-step-06::before,
.info-flow-step-07::before,
.info-flow-edge-right::before {
    position: absolute;
    content: "";
    background-color: var(--color-base)
}

.info-flow-edge {
    color: var(--color-gray);
    background-color: var(--color-white)
}

.info-flow-edge-left {
    grid-area: edge-left
}

.info-flow-edge-right {
    grid-area: edge-right
}

.info-flow-step {
    --flow-step-color: var(--color-base);
    position: relative;
    color: var(--flow-step-color);
    cursor: pointer;
    background-color: var(--color-white);
    border: 1px solid currentcolor;
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.info-flow-step .info-flow-index {
    background-color: var(--flow-step-color)
}

.info-flow-step-01,
.info-flow-step-02 {
    --flow-step-color: var(--color-sky)
}

.info-flow-step-03,
.info-flow-step-04,
.info-flow-step-05 {
    --flow-step-color: var(--color-primary)
}

.info-flow-step-06,
.info-flow-step-07 {
    --flow-step-color: var(--color-navy)
}

.info-flow-step-01 {
    grid-area: step01
}

.info-flow-step-02 {
    grid-area: step02
}

.info-flow-step-03,
.info-flow-step-04,
.info-flow-step-05 {
    flex: 1
}

.info-flow-step-group-01 {
    display: flex;
    grid-area: middle
}

.info-flow-step-06 {
    grid-area: step06
}

.info-flow-step-07 {
    grid-area: step07
}

.info-flow-group {
    color: var(--color-white)
}

.info-flow-group-01 {
    grid-area: group01;
    background-color: var(--color-sky)
}

.info-flow-group-02 {
    grid-area: group02;
    background-color: var(--color-primary)
}

.info-flow-group-03 {
    grid-area: group03;
    background-color: var(--color-navy)
}

.info-flow-group-04,
.info-flow-group-05 {
    position: relative;
    isolation: isolate
}

.info-flow-group-04::before,
.info-flow-group-05::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: "";
    background-color: var(--color-dark)
}

.info-flow-group-04::after,
.info-flow-group-05::after {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-repeat: no-repeat
}

.info-flow-group-04 {
    grid-area: group04
}

.info-flow-group-05 {
    grid-area: group05
}

.info-flow-icon::before,
.info-flow-icon::after {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 1px;
    margin: auto;
    content: "";
    background-color: currentcolor;
    border-radius: 10px;
    transform-origin: center
}

.info-flow-icon::after {
    transform: rotate(-90deg)
}

.info-stats {
    position: relative;
    background-color: var(--color-sky-light)
}

.info-stats.is-active .info-stats-number-visible {
    opacity: 1
}

.info-stats .info-stats-number-visible {
    opacity: 0;
    transition-property: opacity
}

.info-stats .info-stats-number-visible {
    transition-duration: 1000ms
}

.info-stats-list {
    display: grid
}

.info-stats-item {
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--r);
    display: flex;
    align-items: center;
    justify-content: center
}

.info-stats-label {
    line-height: var(--leading-half)
}

.info-stats-values {
    display: flex
}

.info-stats-value {
    display: flex;
    line-height: var(--leading-none);
    text-align: center
}

.info-stats-number {
    grid-area: 1/1;
    font-feature-settings: "thum";
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    text-align: right;
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-semi-bold)
}

.info-stats-number-hidden {
    visibility: hidden;
    opacity: 0
}

.info-stats-number-wrap {
    display: grid
}

.info-stats-postfix {
    font-weight: var(--font-weight-medium)
}

.info-stats-notice {
    position: absolute;
    color: var(--color-gray)
}

[data-whatinput=keyboard] [aria-describedby]:focus [role=tooltip] {
    position: absolute;
    top: 15rem;
    transform: translate3d(0, 0, 0)
}

.journal-keyword {
    color: var(--color-white);
    border-top: 1px solid var(--color-white)
}

.journal-keyword-heading {
    display: flex;
    align-items: center
}

.journal-keyword-heading-en {
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-semi-bold)
}

.journal-keyword-list {
    display: flex;
    flex-wrap: wrap
}

.journal-keyword-link {
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    border: 1px solid var(--color-white);
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.journal-slider-list {
    display: grid
}

.journal .c-archive-journal-category-item,
.journal .c-archive-journal-heading {
    color: var(--color-white)
}

.mv {
    position: relative;
    z-index: 1;
    overflow: hidden
}

.mv.is-active {
    --slider-bg-delay: 740ms;
    --slider-delay: 820ms;
    --slider-pagination-delay: 900ms;
    --slider-row-delay: 0ms
}

.mv.is-active .mv-copy g {
    transition: transform 1300ms var(--ease-power4-out);
    transform: translate(0, 0)
}

.mv.is-active .mv-copy g:last-child {
    --slider-row-delay: 0ms;
    transition-delay: var(--slider-row-delay)
}

.mv.is-active .mv-copy path {
    clip-path: polygon(0 0, 108% 0, 100% 100%, 0 100%);
    transition: clip-path 560ms var(--ease-power4-out)
}

.mv.is-active .mv-copy path:nth-child(1) {
    transition-delay: calc(var(--slider-row-delay) + 0ms)
}

.mv.is-active .mv-copy path:nth-child(2) {
    transition-delay: calc(var(--slider-row-delay) + 30ms)
}

.mv.is-active .mv-copy path:nth-child(3) {
    transition-delay: calc(var(--slider-row-delay) + 60ms)
}

.mv.is-active .mv-copy path:nth-child(4) {
    transition-delay: calc(var(--slider-row-delay) + 90ms)
}

.mv.is-active .mv-copy path:nth-child(5) {
    transition-delay: calc(var(--slider-row-delay) + 120ms)
}

.mv.is-active .mv-copy path:nth-child(6) {
    transition-delay: calc(var(--slider-row-delay) + 150ms)
}

.mv.is-active .mv-copy path:nth-child(7) {
    transition-delay: calc(var(--slider-row-delay) + 180ms)
}

.mv.is-active .mv-copy path:nth-child(8) {
    transition-delay: calc(var(--slider-row-delay) + 210ms)
}

.mv.is-active .mv-copy path:nth-child(9) {
    transition-delay: calc(var(--slider-row-delay) + 240ms)
}

.mv.is-active .mv-copy path:nth-child(10) {
    transition-delay: calc(var(--slider-row-delay) + 270ms)
}

.mv.is-active .mv-copy path:nth-child(11) {
    transition-delay: calc(var(--slider-row-delay) + 300ms)
}

.mv.is-active .mv-slider::before {
    transition: transform 700ms var(--slider-bg-delay) var(--ease-power4-inout);
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(1)
}

.mv.is-active .mv-slider-pagination {
    opacity: 1;
    transition: opacity 300ms ease;
    transition-delay: calc(var(--slider-bg-delay) + var(--slider-delay) + var(--slider-pagination-delay))
}

.mv-copy {
    position: relative;
    padding-left: 10%;
    font-weight: 600;
    font-size: 88px;
    line-height: 132px;
    color: #242424;
}

.mv-copy g {
    will-change: transform;
    transform-box: fill-box
}

.mv-copy path {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    will-change: clip-path;
    transform-box: fill-box
}

.mv-slider {
    --slider-rotation: 8.5deg;
    position: relative;
    visibility: hidden
}

.mv-slider.is-visible {
    visibility: visible
}

.mv-slider::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    background-color: var(--color-primary);
    transform: skewY(calc(var(--slider-rotation) * -1)) scaleX(0);
    transform-origin: left bottom
}

.mv-slider-container {
    position: relative;
    z-index: 1;
    transform: rotate(calc(var(--slider-rotation) * -1))
}

.mv-slider-list {
    display: flex
}

.mv-slider-item {
    display: flex;
    flex: none
}

.mv-slider-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--r);
    transform: skewY(calc(var(--slider-rotation) * -1))
}

.mv-slider-poster,
.mv-slider-video {
    position: absolute;
    left: 0;
    width: 100%;
    transform: skewY(calc(var(--slider-rotation) * 1));
    object-fit: cover
}

.mv-slider-pagination {
    position: absolute;
    z-index: 1;
    display: flex;
    opacity: 0;
    transform: rotate(calc(var(--slider-rotation) * -1));
    transform-origin: top right
}

.mv-slider-pagination>span {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--color-white);
    border-radius: 50%;
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.mv-slider-pagination>span.swiper-pagination-bullet-active {
    background-color: var(--color-white)
}

.mv-slider-pagination>span:not(.swiper-pagination-bullet-active) {
    cursor: pointer
}

.news .c-archive-news-date,
.news .c-archive-news-category-text {
    color: #478ED0;
}

.news .c-archive-news-heading {
    color: #505050;
}

.news .c-archive-news-icon::before {
    background-color: #478ED0;
    border-color: #478ED0;
}

.news .c-archive-news-icon svg {
    position: relative;
    z-index: 2;
    stroke: #fff;
}

.recruit {
    position: relative;
    isolation: isolate
}

.recruit-gallery {
    position: relative;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.recruit-gallery-list {
    display: inline-flex;
    height: 100%
}

.recruit-gallery-item {
    position: relative;
    flex: none;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover
}

.recruit-content {
    position: relative
}

.recruit-description {
    text-align: justify
}

.service {
    position: relative
}

.service-selector-top .c-service-card-action {
    position: relative;
    background-color: var(--color-sky-light)
}

.service-selector-top .c-service-card-action.is-active {
    background-color: var(--color-primary)
}

.service-selector-bottom-frame {
    max-width: var(--max-view-width);
    padding-right: var(--padding);
    padding-left: var(--padding);
    margin-right: auto;
    margin-left: auto
}

.service-selector-list {
    display: flex;
    column-gap: .5rem
}

.service-selector-item {
    display: flex;
    flex: 1;
    flex-direction: column
}

.service-selector-action {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    row-gap: 1.2rem;
    align-items: flex-start;
    padding: 2.4rem;
    background-color: var(--color-sky-light);
    border-radius: var(--r) var(--r) 0 0;
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.service-selector-action.is-active {
    background-color: var(--color-primary)
}

.service-selector-action.is-active .service-selector-index,
.service-selector-action.is-active .service-selector-heading {
    color: var(--color-white)
}

.service-selector-action.is-active .service-selector-icon svg {
    stroke: var(--color-white)
}

.service-selector-icon {
    position: absolute;
    top: 2.8rem;
    right: 3rem;
    width: 1rem
}

.service-selector-icon svg {
    stroke: var(--color-primary);
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.service-selector-index {
    padding: .4rem .9rem;
    font-size: 1rem;
    line-height: var(--leading-none);
    color: var(--color-primary);
    border: 1px solid currentcolor;
    border-radius: 999px;
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke;
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-semi-bold)
}

.service-selector-heading {
    font-size: 1.8rem;
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-half);
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.service-stage-container {
    overflow: hidden
}

.service-stage-list {
    display: grid;
    max-width: var(--max-view-width);
    padding-right: var(--padding);
    padding-left: var(--padding);
    margin-right: auto;
    margin-left: auto
}

.service-stage-item {
    display: flex;
    grid-row: 1/1;
    grid-column: 1/1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s 200ms
}

.service-stage-item.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms ease, visibility 0s
}

.service-stage-info {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding-right: 6rem;
    padding-left: 2.4rem
}

.service-stage-index {
    padding: .4rem .9rem;
    margin-right: auto;
    font-size: 1rem;
    line-height: var(--leading-none);
    border: 1px solid var(--color-white);
    border-radius: 999px;
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-semi-bold)
}

.service-stage-heading {
    margin-top: .4rem;
    font-size: 4.8rem;
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-quarter)
}

.service-stage-description {
    margin-top: 2.4rem
}

.service-stage-children {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.3rem;
    width: 100%;
    margin-top: 3rem
}

.service-stage-children-link {
    display: flex;
    column-gap: 1.2rem;
    padding-right: 1em
}

.service-stage-children-icon {
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.service-stage-children-icon::before {
    --icon-hover-scale: scale(1.2);
    position: absolute;
    inset: 0;
    content: "";
    background-color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 50%;
    transition: transform 80ms var(--ease-power4-out), opacity 80ms ease, color 80ms ease, background-color 80ms ease, border-color 80ms ease
}

.service-stage-children-icon svg {
    position: relative;
    z-index: 2
}

.service-stage-children-icon svg {
    width: 1rem;
    stroke: var(--color-primary);
    transition-timing-function: ease;
    transition-duration: 80ms;
    transition-property: color, background-color, border-color, fill, stroke
}

.service-stage-name {
    font-size: 1.8rem;
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-half)
}

.service-stage-figure {
    flex: none;
    width: 60rem;
    height: 45rem
}

.service-stage-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r)
}

.top-header-heading-ja {
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-none);
    opacity: 0
}

.top-header-heading-ja.is-active {
    opacity: 1;
    transition: opacity 300ms 500ms ease
}

.top-header-heading-en {
    line-height: var(--leading-none);
    color: var(--color-primary);
    font-family: var(--font-family-en);
    font-weight: var(--font-weight-semi-bold)
}

@media screen and (min-width: 769px) {
    .about {
        padding-top: 26rem;
        padding-bottom: 35.4rem;
        margin-top: -10rem
    }

    .about-content {
        padding-left: 4rem
    }

    .about-message {
        row-gap: 3.4rem
    }

    .about-message-text {
        font-size: 1.8rem;
        line-height: var(--leading-loose)
    }

    .about-action {
        margin-top: 6.4rem
    }

    .about-aside {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .about-gallery-item:nth-child(1) {
        top: 10rem;
        left: calc(50% + 41.6rem);
        width: 19.2rem
    }

    .about-gallery-item:nth-child(2) {
        top: 19.6rem;
        left: calc(50% + 0.8rem);
        width: 28.8rem
    }

    .about-gallery-item:nth-child(3) {
        top: 67.6rem;
        left: calc(50% + 9.6rem);
        width: 45.6rem
    }

    .about-map {
        right: 0;
        bottom: -25.2rem;
        /* left: calc(50% - 58rem); */
        width: 80%;
        height: 100%;
    }

    .about-map::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 45rem;
        content: "";
        background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 72%)
    }

    .about-map-bg {
        top: -0.1rem;
        left: .3rem
    }

    .about-map-ripple {
        top: 110.1rem;
        left: 44.4rem;
        width: 30rem;
        height: 30rem
    }

    .archive {
        padding-top: 13.1rem;
        padding-bottom: 16rem;
        margin-bottom: 10rem;
    }

    .client {
        display: flex;
        margin-top: 9.8rem
    }

    .client .top-header {
        flex: none;
        width: 43.6rem;
        padding-left: 4rem
    }

    .client-content {
        flex-grow: 1
    }

    .client-list {
        column-count: 3
    }

    .client-item {
        padding-left: 2rem;
        margin-bottom: .2rem
    }

    .client-item::before {
        top: 1rem;
        left: 0;
        width: .8rem;
        height: .8rem
    }

    .client-notice {
        margin-top: 1.5rem;
        font-size: 1.2rem
    }

    .info {
        margin-top: 16rem
    }

    .info-scope {
        padding: 6.4rem;
        margin-top: 6.4rem
    }

    .info-scope-header {
        display: flex;
        align-items: center
    }

    .info-scope-heading {
        position: relative;
        flex-direction: column;
        row-gap: 1.5rem;
        align-items: center;
        justify-content: center;
        width: 28.8rem;
        min-height: 8rem;
        padding-right: 5rem;
        font-size: 3.2rem
    }

    .info-scope-heading::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: 100%;
        content: "";
        background-color: var(--color-primary)
    }

    .info-scope-heading-ruby {
        font-size: 1.5rem
    }

    .info-scope-description {
        padding-left: 6.4rem
    }

    .info-flow {
        grid-template: "edge-left group01 group01 group02 group03 group03 edge-right"4rem "edge-left step01  step02  middle  step06  step07  edge-right"7.6rem "edge-left step01  step02  middle  step06  step07  edge-right"7.6rem "edge-left step01  step02  middle  step06  step07  edge-right"7.6rem "edge-left group04 group04 group05 group05 group05 edge-right"4rem/1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 2.4rem 3.4rem;
        margin-top: 5.2rem;
        font-size: 1.5rem
    }

    .info-flow-index {
        width: 1.4rem;
        height: 1.4rem;
        font-size: 1rem
    }

    .info-flow-edge,
    .info-flow-step,
    .info-flow-group {
        border-radius: .2rem
    }

    .info-flow-step-01::before,
    .info-flow-step-02::before,
    .info-flow-step-04::before,
    .info-flow-step-06::before,
    .info-flow-step-07::before,
    .info-flow-edge-right::before {
        top: 0;
        bottom: 0;
        left: -2.2rem;
        width: .8rem;
        height: 1.6rem;
        margin: auto 0;
        clip-path: polygon(0 0, 100% 50%, 0 100%)
    }

    .info-flow-step {
        column-gap: .6rem
    }

    .info-flow-step-01.is-active,
    .info-flow-step-02.is-active {
        background-color: var(--color-sky-selected)
    }

    .info-flow-step-03.is-active,
    .info-flow-step-04.is-active,
    .info-flow-step-05.is-active {
        background-color: var(--color-primary-selected)
    }

    .info-flow-step-06.is-active,
    .info-flow-step-07.is-active {
        background-color: var(--color-navy-selected)
    }

    .info-flow-step-group-01 {
        flex-direction: column;
        row-gap: .6rem
    }

    .info-flow-step.is-active .info-flow-detail {
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        transition: opacity 300ms ease, visibility 0s
    }

    .info-flow-group-04::before,
    .info-flow-group-05::before {
        width: calc(100% - 1.3rem);
        height: 100%;
        border-radius: .2rem 0 0 .2rem
    }

    .info-flow-group-04::after,
    .info-flow-group-05::after {
        left: calc(100% - 1.3rem);
        width: 1.3rem;
        height: 100%;
        background-image: url("../image/flow_shape_pc.svg");
        background-position: left center;
        background-size: auto 100%
    }

    .info-flow-icon {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        display: block;
        flex: none;
        width: .8rem;
        height: .8rem;
        transition-timing-function: ease;
        transition-duration: 80ms;
        transition-property: color, background-color, border-color, fill, stroke
    }

    .info-flow-detail {
        --tip-w: 52.8rem;
        position: fixed;
        top: 3rem;
        left: calc(var(--tip-w)/2*-1);
        z-index: 1;
        width: var(--tip-w);
        padding: 2rem 2.4rem;
        pointer-events: none;
        visibility: hidden;
        background-color: var(--color-white);
        border: 1px solid currentcolor;
        border-radius: 2px;
        box-shadow: 4px 4px 0 0 rgba(0, 0, 0, .1);
        opacity: 0;
        transition: opacity 200ms ease, visibility 0s 300ms;
        transform: translate3d(var(--client-x), var(--client-y), 0)
    }

    .info-flow-detail-header {
        display: flex;
        flex: none;
        column-gap: .6rem;
        align-items: center;
        padding-top: .3rem;
        line-height: var(--leading-none);
        white-space: nowrap
    }

    .info-flow-detail-heading {
        font-size: 1.5rem;
        font-weight: var(--font-weight-medium)
    }

    .info-flow-detail-description {
        margin-top: .8rem;
        font-size: 1.3rem;
        font-weight: var(--font-weight-regular);
        line-height: var(--leading-half);
        color: var(--color-base)
    }

    .info-stats {
        padding: 6.4rem;
        margin-top: 3.2rem
    }

    .info-stats-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem
    }

    .info-stats-item {
        min-height: 19.2rem;
        padding: 1.6rem
    }

    .info-stats-item:nth-child(1) .info-stats-values {
        padding-left: 0
    }

    .info-stats-label {
        margin-bottom: 1.5rem;
        font-size: 1.8rem
    }

    .info-stats-values {
        column-gap: 1.6rem;
        padding-left: 1.8rem
    }

    .info-stats-value {
        column-gap: .4rem;
        align-items: baseline
    }

    .info-stats-number {
        font-size: 8rem
    }

    .info-stats-prefix {
        writing-mode: vertical-rl
    }

    .info-stats-notice {
        right: 2.2rem;
        bottom: 2rem;
        font-size: 1.2rem
    }

    .journal {
        display: grid;
        grid-template: "header cover"auto "action cover"1fr "slider slider"auto/48rem 1fr;
        column-gap: 8rem;
        max-width: var(--max-view-width);
        padding-right: var(--padding);
        padding-left: var(--padding);
        margin-right: auto;
        margin-left: auto
    }

    .journal .archive-header {
        grid-area: header
    }

    .journal-action {
        grid-area: action
    }

    .journal-action-archive {
        margin-top: 6.4rem
    }

    .journal-keyword {
        padding-top: 3.6rem;
        margin-top: 6.4rem
    }

    .journal-keyword-heading {
        column-gap: 1.2rem
    }

    .journal-keyword-heading-en {
        font-size: 2.4rem
    }

    .journal-keyword-heading-ja {
        font-size: 1.2rem
    }

    .journal-keyword-list {
        gap: .8rem;
        margin-top: 1.7rem
    }

    .journal-keyword-link {
        padding: .7rem 1.2rem;
        font-size: 1.2rem
    }

    .journal-cover {
        grid-area: cover
    }

    .journal-cover .c-archive-journal-info {
        margin-top: 4rem
    }

    .journal-cover .c-archive-journal-heading {
        margin-top: 1.6rem;
        font-size: 2.4rem
    }

    .journal-slider {
        grid-area: slider;
        margin-top: 9.2rem
    }

    .journal-slider-list {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 9.6rem
    }

    .journal-slider .c-archive-journal:nth-child(n+4) {
        display: none
    }

    .mv {
        padding-top: calc(var(--vw) * 257 / 1440)
    }

    .mv.is-active .mv-slider-item.swiper-slide-prev .mv-slider-cell,
    .mv.is-active .mv-slider-item.swiper-slide-active .mv-slider-cell,
    .mv.is-active .mv-slider-item.swiper-slide-next .mv-slider-cell {
        left: 0;
        opacity: 1;
        transition: opacity 260ms ease, left 2100ms var(--ease-expo-out);
        transition-delay: calc(var(--slider-bg-delay) + var(--slider-delay) + var(--index, 0)*60ms)
    }

    .mv-copy {
        left: calc(var(--vw) * -28 / 1440)
    }

    .mv-copy svg {
        width: calc(var(--vw) * 750 / 1440)
    }

    .mv-copy g {
        transform: translate(-6rem, 0)
    }

    .mv-slider {
        padding-bottom: calc(var(--vw) * 230 / 1440);
        margin-top: calc(var(--vw) * 96 / 1440)
    }

    .mv-slider::before {
        height: calc(var(--vw) * 750 / 1440)
    }

    .mv-slider-item {
        justify-content: space-between;
        width: calc(100% / 2);
    }

    .mv-slider-item.swiper-slide-prev .mv-slider-cell,
    .mv-slider-item.swiper-slide-active .mv-slider-cell,
    .mv-slider-item.swiper-slide-next .mv-slider-cell {
        left: calc(var(--vw) * 3600 / 1440);
        opacity: 0
    }

    .mv-slider-item.swiper-slide-next .mv-slider-cell:nth-child(2) {
        --index: 5
    }

    .mv-slider-item.swiper-slide-next .mv-slider-cell:nth-child(1) {
        --index: 4
    }

    .mv-slider-item.swiper-slide-active .mv-slider-cell:nth-child(2) {
        --index: 3
    }

    .mv-slider-item.swiper-slide-active .mv-slider-cell:nth-child(1) {
        --index: 2
    }

    .mv-slider-item.swiper-slide-prev .mv-slider-cell:nth-child(2) {
        --index: 1
    }

    .mv-slider-item.swiper-slide-prev .mv-slider-cell:nth-child(1) {
        --index: 0
    }

    .mv-slider-cell {
        position: relative;
        width: calc(var(--vw) * 600 / 1440);
        height: calc(var(--vw) * 710 / 1440);
        transform: rotate(var(--slider-rotation))
    }

    .mv-slider-poster,
    .mv-slider-video {
        top: calc(var(--vw) * -44 / 1440);
        height: calc(var(--vw) * 802 / 1440)
    }

    .mv-slider-pagination {
        right: calc(var(--vw) * 104 / 1440);
        bottom: calc(var(--vw) * 282 / 1440);
        column-gap: calc(var(--vw) * 16 / 1440)
    }

    .mv-slider-pagination>span {
        width: calc(var(--vw) * 8 / 1440);
        height: calc(var(--vw) * 8 / 1440)
    }

    .news {
        display: grid;
        grid-template:
            "header archive"auto "action archive"1fr/31.2rem 1fr;
    }

    .news .top-header {
        grid-area: header
    }

    .news .c-archive-news-list {
        grid-area: archive
    }

    .news-action {
        grid-area: action;
        margin-top: 6rem
    }

    .recruit {
        padding-top: 8rem;
        padding-bottom: 24rem
    }

    .recruit-gallery-container {
        display: inline-flex;
        height: 100%;
        animation: ticker-to-left 70s linear infinite
    }

    .recruit-gallery-item {
        width: 69rem
    }

    .recruit-gallery-cover {
        display: none
    }

    .recruit-content {
        display: flex;
        justify-content: flex-end
    }

    .recruit-card {
        width: 48rem;
        padding: 8.3rem 6.4rem 8rem;
        background-color: var(--color-sky-light);
        border-radius: var(--r)
    }

    .recruit-description {
        margin-top: 3.7rem;
        line-height: var(--leading-relaxed)
    }

    .recruit-action {
        margin-top: 6.4rem
    }

    .service .top-header {
        max-width: var(--max-view-width);
        padding-right: var(--padding);
        padding-left: var(--padding);
        margin-right: auto;
        margin-left: auto
    }

    .service-selector-top {
        display: none
    }

    .service-selector-top .c-service-card-list {
        max-width: var(--max-view-width);
        padding-right: var(--padding);
        padding-left: var(--padding);
        margin-right: auto;
        margin-left: auto
    }

    .service-selector-top .c-service-card-action::after {
        position: absolute;
        top: calc(100% + 1.4rem);
        right: 0;
        left: 0;
        width: 1.6rem;
        height: .8rem;
        margin: 0 auto;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: "";
        background-color: var(--color-dark);
        opacity: 0;
        transition: opacity 200ms ease, transform var(--ease-power4-out) 200ms;
        transform: translateY(-50%)
    }

    .service-selector-top .c-service-card-action.is-active::after {
        display: block;
        opacity: 1;
        transition: opacity 200ms ease, transform var(--ease-power4-out) 320ms;
        transform: translateY(0)
    }

    .service-selector-bottom {
        width: 100%;
        margin-top: 6.4rem
    }

    .service-stage {
        position: relative;
        z-index: 1;
        display: grid;
        color: var(--color-white);
        background-color: var(--color-primary)
    }

    .service-stage-item {
        padding-top: 8rem;
        padding-bottom: 8rem
    }

    .service-stage-children-icon {
        margin-top: .1em
    }

    .top-header {
        display: grid;
        grid-template-areas: "heading action""description description";
        align-items: center
    }

    .top-header-heading {
        grid-area: heading
    }

    .top-header-heading-ja {
        font-size: 1.2rem
    }

    .top-header-heading-en {
        margin-top: 1.2rem;
        font-size: 8.8rem
    }

    .top-header-description {
        grid-area: description;
        margin-top: 3.7rem
    }

    .top-header-action {
        grid-area: action;
        margin-left: auto
    }

    .top-header-s {
        display: block
    }

    .top-header-s .top-header-heading-ja {
        font-size: 1.2rem
    }

    .top-header-s .top-header-heading-en {
        margin-top: 1.6rem;
        font-size: 5.6rem
    }

    .top-header-s .top-header-description {
        margin-top: 2.4rem
    }
}

@media screen and (max-width: 768px) {
    .about {
        padding-top: 15.2rem;
        padding-bottom: 23rem
    }

    .about-content {
        padding-left: 4.8rem
    }

    .about-message {
        row-gap: 4.8rem
    }

    .about-message-text {
        font-size: 3.2rem;
        line-height: var(--leading-relaxed)
    }

    .about-action {
        margin-top: 9.6rem
    }

    .about-aside {
        position: relative;
        height: 120rem;
        margin-top: 12rem
    }

    .about-gallery-item:nth-child(1) {
        top: 0;
        right: 7.5rem;
        width: 19.2rem
    }

    .about-gallery-item:nth-child(2) {
        top: 9.6rem;
        left: 7.5rem;
        width: 28.8rem
    }

    .about-gallery-item:nth-child(3) {
        top: 89.6rem;
        left: 14.7rem;
        width: 45.6rem
    }

    .about-map {
        top: 25.8rem;
        left: -17.7rem;
        width: 120rem
    }

    .about-map-bg {
        top: 0;
        left: .2rem
    }

    .about-map-ripple {
        top: 82.5rem;
        left: 33.4rem;
        width: 30rem;
        height: 30rem
    }

    .archive {
        /* padding-top: 13.4rem; */
        padding-bottom: 19.2rem;
        /* margin-top: 10.3rem; */
    }

    .client {
        margin-top: 8.5rem
    }

    .client-list {
        column-count: 2;
        margin-top: 4.6rem
    }

    .client-item {
        padding-left: 4rem;
        margin-bottom: .8rem;
        font-size: 2.2rem
    }

    .client-item::before {
        top: 1.5rem;
        left: 1rem;
        width: 1.1rem;
        height: 1.1rem
    }

    .client-notice {
        margin-top: 3.2rem;
        font-size: 2rem
    }

    .info {
        margin-top: 19.8rem
    }

    .info-scope {
        padding: 9rem 5.6rem 8rem;
        margin-top: 9.6rem
    }

    .info-scope-heading {
        column-gap: 1.6rem;
        align-items: center;
        font-size: 4rem
    }

    .info-scope-heading-ruby {
        font-size: 2.6rem
    }

    .info-scope-description {
        margin-top: 4.2rem;
        text-align: justify
    }

    .info-flow {
        grid-template: "edge-left  edge-left  edge-left  edge-left  edge-left"9.4rem "group04    step01     step01     step01     group01"9.4rem "group04    step02     step02     step02     group01"9.4rem "group05    middle     middle     middle     group02"22.8rem "group05    step06     step06     step06     group03"14rem "group05    step07     step07     step07     group03"9.4rem "edge-right edge-right edge-right edge-right edge-right"9.4rem/1fr 1fr 1fr 1fr 1fr;
        gap: 4rem 2.4rem;
        margin-top: 6.4rem
    }

    .info-flow-index {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.6rem
    }

    .info-flow-edge,
    .info-flow-step,
    .info-flow-group {
        border-radius: .4rem
    }

    .info-flow-step-01::before,
    .info-flow-step-02::before,
    .info-flow-step-04::before,
    .info-flow-step-06::before,
    .info-flow-step-07::before,
    .info-flow-edge-right::before {
        top: -2.8rem;
        right: 0;
        left: 0;
        width: 2.4rem;
        height: 1.2rem;
        margin: 0 auto;
        clip-path: polygon(0 0, 100% 0, 50% 100%)
    }

    .info-flow-step-03 .info-flow-text,
    .info-flow-step-04 .info-flow-text,
    .info-flow-step-05 .info-flow-text,
    .info-flow-group .info-flow-text {
        writing-mode: vertical-rl
    }

    .info-flow-step {
        gap: .6rem;
        pointer-events: none
    }

    .info-flow-step-03,
    .info-flow-step-04,
    .info-flow-step-05 {
        flex-direction: column
    }

    .info-flow-step-group-01 {
        column-gap: 1.4rem
    }

    .info-flow-group-04::before,
    .info-flow-group-05::before {
        width: 100%;
        height: calc(100% - 2.2rem);
        border-radius: .4rem .4rem 0 0
    }

    .info-flow-group-04::after,
    .info-flow-group-05::after {
        top: calc(100% - 2.2rem);
        width: 100%;
        height: 2.2rem;
        background-image: url("../image/flow_shape_sp.svg");
        background-position: center bottom;
        background-size: 100% auto
    }

    .info-flow-icon {
        display: none
    }

    .info-flow-detail {
        display: none
    }

    .info-stats {
        padding: 6.4rem 5.6rem;
        margin-top: 4rem
    }

    .info-stats-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 2.4rem
    }

    .info-stats-item {
        min-height: 20.4rem;
        padding: 1.6rem
    }

    .info-stats-label {
        margin-bottom: .6rem
    }

    .info-stats-values {
        column-gap: 2.4rem
    }

    .info-stats-value {
        flex-direction: column
    }

    .info-stats-number {
        font-size: 7.2rem
    }

    .info-stats-prefix,
    .info-stats-postfix {
        margin-top: 1rem;
        font-size: 2rem
    }

    .info-stats-prefix {
        order: 3
    }

    .info-stats-notice {
        right: 5.6rem;
        bottom: 1.8rem;
        font-size: 2rem
    }

    .journal {
        display: flex;
        flex-direction: column
    }

    .journal .archive-header {
        order: 1;
        padding-right: var(--padding);
        padding-left: var(--padding)
    }

    .journal-action {
        order: 4;
        padding-right: var(--padding);
        padding-left: var(--padding)
    }

    .journal-action-archive {
        margin-top: 6.4rem
    }

    .journal-keyword {
        padding-top: 4.5rem;
        margin-top: 8rem
    }

    .journal-keyword-heading {
        column-gap: 1.6rem
    }

    .journal-keyword-heading-en {
        font-size: 4rem
    }

    .journal-keyword-heading-ja {
        font-size: 2rem
    }

    .journal-keyword-list {
        gap: 1.2rem;
        margin-top: 1.8rem
    }

    .journal-keyword-link {
        padding: 1.1rem 2.2rem;
        font-size: 2.2rem
    }

    .journal-cover {
        order: 2;
        padding-left: var(--padding);
        margin-top: 6.6rem
    }

    .journal-cover .c-archive-journal-info {
        margin-top: 5.5rem
    }

    .journal-cover .c-archive-journal-figure {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

    .journal-slider {
        order: 3;
        padding-right: var(--padding);
        padding-left: var(--padding);
        margin-top: 6.4rem;
        overflow: hidden
    }

    .journal-slider-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.2rem 2.4rem
    }

    .journal-slider .c-archive-journal-info {
        margin-top: 3rem
    }

    .journal-slider .c-archive-journal-heading {
        font-size: 2.8rem
    }

    .mv {
        padding-top: 25.7rem;
    }

    .mv.is-active .mv-slider-item.swiper-slide-prev,
    .mv.is-active .mv-slider-item.swiper-slide-active {
        left: 0;
        opacity: 1;
        transition: opacity 260ms ease, left 2100ms var(--ease-expo-out);
        transition-delay: calc(var(--slider-bg-delay) + var(--slider-delay) + var(--index, 0)*60ms)
    }

    .mv-copy {
        font-size: 6rem;
        line-height: 2;
        z-index: 1;
    }

    .mv-copy svg {
        width: 75rem
    }

    .mv-copy g {
        transform: translate(-6rem, 0)
    }

    .mv-slider {
        padding-bottom: 20rem;
        margin-top: 18.6rem;
    }

    .mv-slider::before {
        height: 68rem;
    }

    .mv-slider-item {
        position: relative;
        flex-direction: column;
        row-gap: 4rem;
        width: 68rem;
        margin: 0 4rem;
        transform: rotate(var(--slider-rotation))
    }

    .mv-slider-item.swiper-slide-prev,
    .mv-slider-item.swiper-slide-active {
        left: 110rem;
        opacity: 0
    }

    .mv-slider-item.swiper-slide-prev {
        --index: 0
    }

    .mv-slider-item.swiper-slide-active {
        --index: 1
    }

    .mv-slider-cell {
        height: 44rem
    }

    .mv-slider-poster,
    .mv-slider-video {
        top: -5.2rem;
        height: 54.6rem
    }

    .mv-slider-pagination {
        right: 3.7rem;
        bottom: 20rem;
        column-gap: 2.4rem
    }

    .mv-slider-pagination>span {
        width: 1.2rem;
        height: 1.2rem
    }

    .news {
        margin-top: 19.8rem;
        margin-bottom: 20rem;
    }

    .news .c-archive-news-list {
        margin-top: 5.8rem
    }

    .news-action {
        margin-top: 6.4rem
    }

    .recruit {
        padding-top: 16.6rem;
        padding-bottom: 98rem;
        color: var(--color-white)
    }

    .recruit .top-header-heading-en {
        color: var(--color-white)
    }

    .recruit-gallery::after {
        content: "";
        background-color: rgba(0, 0, 0, .4);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .recruit-gallery-container {
        display: none
    }

    .recruit-gallery-item {
        width: 75rem
    }

    .recruit-gallery-cover {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .recruit-gallery-cover-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover
    }

    .recruit-description {
        margin-top: 4.8rem
    }

    .recruit-action {
        margin-top: 6.4rem
    }

    .service .top-header {
        padding-right: var(--padding);
        padding-left: var(--padding)
    }

    .service-selector-top {
        margin-top: 9.6rem
    }

    .service-selector-top .c-service-card-list {
        gap: 2rem
    }

    .service-selector-top .c-service-card-action {
        grid-template-columns: 27.2rem 1fr
    }

    .service-selector-top .c-service-card-action {
        margin-right: var(--padding);
        margin-left: var(--padding)
    }

    .service-selector-top .c-service-card-info {
        justify-content: space-between;
        padding-bottom: 2.4rem
    }

    .service-selector-top .c-service-card-heading {
        font-size: 3.2rem
    }

    .service-selector-bottom {
        display: none
    }

    .service-stage {
        display: none
    }

    .top-header-heading-ja {
        font-size: 2rem
    }

    .top-header-heading-en {
        margin-top: 1.5rem;
        font-size: 10rem
    }

    .top-header-description {
        margin-top: 4.8rem;
        text-align: justify
    }

    .top-header-action {
        margin-top: 6.4rem
    }

    .top-header-s {
        display: flex;
        column-gap: 4rem;
        align-items: flex-end
    }

    .top-header-s .top-header-heading-ja {
        font-size: 2rem
    }

    .top-header-s .top-header-heading-en {
        margin-top: 2.1rem;
        font-size: 7.2rem
    }

    .top-header-s .top-header-description {
        margin-top: 0;
        font-size: 2.2rem
    }
}

@media screen and (min-width: 769px)and (hover: hover) {
    .journal-keyword-link:hover {
        color: var(--color-primary);
        background-color: var(--color-white)
    }

    .news .c-archive-news-link:hover .c-archive-news-icon svg {
        stroke: var(--color-primary);
    }

    .service-selector-top .c-service-card-action:hover {
        background-color: var(--color-primary)
    }

    .service-selector-action:hover {
        background-color: var(--color-primary)
    }

    .service-selector-action:hover .service-selector-index,
    .service-selector-action:hover .service-selector-heading {
        color: var(--color-white)
    }

    .service-selector-action:hover .service-selector-icon svg {
        stroke: var(--color-white)
    }

    .service-stage-children-link:hover .service-stage-children-icon::before {
        background-color: rgba(0, 0, 0, 0);
        transform: var(--icon-hover-scale)
    }

    .service-stage-children-link:hover .service-stage-children-icon svg {
        stroke: var(--color-white)
    }
}