.accent-blue {
    color: #0085ca;
    font-weight: 700
}

.accent-orange {
    color: #fd8112;
    font-weight: 700
}

.accent-large {
    font-size: 1.35em;
    font-weight: 700;
    line-height: 1.5
}

.hero {
    justify-content: center;
    align-items: center;
    min-height: 520px;
    display: flex;
    position: relative;
    overflow: hidden
}

@media screen and (width<=767px) {
    .hero {
        align-items: flex-end;
        min-height: 400px;
        padding-bottom: 48px
    }
}

.hero__bg {
    z-index: 0;
    position: absolute;
    inset: 0
}

.hero__bg-img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%
}

.hero__overlay {
    background: linear-gradient(#00000073 0%, #00000059 50%, #00000080 100%);
    position: absolute;
    inset: 0
}

.hero__content {
    z-index: 1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 140px 0 80px;
    position: relative
}

@media screen and (width<=767px) {
    .hero__content {
        text-align: left;
        padding: 120px 20px 24px
    }
}

.hero__title {
    color: #fff;
    text-shadow: 0 2px 12px #00000059;
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.4
}

@media screen and (width<=1024px) {
    .hero__title {
        font-size: 32px
    }
}

@media screen and (width<=767px) {
    .hero__title {
        margin-bottom: 16px;
        font-size: 38px
    }
}

.hero__text {
    color: #fff;
    text-shadow: 0 1px 6px #0000004d;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.9
}

@media screen and (width<=767px) {
    .hero__text {
        font-size: 20px
    }
}

.results {
    padding: 120px 0
}

@media screen and (width<=767px) {
    .results {
        padding: 48px 0 24px
    }
}

.stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
    display: grid
}

@media screen and (width<=1024px) {
    .stats {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin-left: auto;
        margin-right: auto
    }
}

.stat__media {
    aspect-ratio: 1;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative
}

.stat__wreath {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.stat__content {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 18% 16% 22%
}

.stat__label {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700
}

@media screen and (width<=767px) {
    .stat__label {
        font-size: 13px
    }
}

.stat__value {
    line-height: 1.2
}

.stat__num {
    color: #0085ca;
    font-size: 42px;
    font-weight: 900
}

@media screen and (width<=767px) {
    .stat__num {
        font-size: 36px
    }
}

.stat__unit {
    margin-left: 2px;
    font-size: 18px;
    font-weight: 700
}

.stat__industry {
    color: #0085ca;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
    display: block
}

@media screen and (width<=767px) {
    .stat__industry {
        font-size: 18px
    }
}

.stat__industry-sub {
    color: #0085ca;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    display: block
}

.stat__note {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700
}

.clients {
    margin-top: 56px
}

@media screen and (width<=767px) {
    .clients {
        margin-top: 40px
    }
}

.clients__title {
    margin-bottom: 16px;
    padding-left: 16px;
    font-size: 20px;
    font-weight: 700;
    position: relative
}

.clients__title:before {
    content: "";
    background: #fd8112;
    border-radius: 2px;
    width: 6px;
    height: 1.2em;
    position: absolute;
    top: .15em;
    left: 0
}

.clients__list {
    border: 1px solid #000;
    border-radius: 8px;
    padding: 24px 28px
}

@media screen and (width<=767px) {
    .clients__list {
        padding: 20px
    }
}

.clients__list li {
    padding-left: 1.1em;
    font-size: 20px;
    line-height: 1.9;
    position: relative
}

@media screen and (width<=767px) {
    .clients__list li {
        font-size: 14px
    }
}

.clients__list li:before {
    content: "・";
    position: absolute;
    left: 0
}

.cases {
    padding: 40px 0 80px
}

@media screen and (width<=767px) {
    .cases {
        padding: 24px 0 48px
    }
}

.cases__list {
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
    display: flex
}

@media screen and (width<=767px) {
    .cases__list {
        gap: 28px;
        margin-top: 28px
    }
}

.case-block {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 8px #0003
}

.case-block__title {
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #005b8b 0%, #0585c7 100%);
    padding: 16px 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5
}

@media screen and (width<=767px) {
    .case-block__title {
        padding: 12px 16px;
        font-size: 16px
    }
}

.case-block__body {
    padding: 40px 40px 48px
}

@media screen and (width<=767px) {
    .case-block__body {
        padding: 24px 16px 32px
    }
}

.case-block__summary {
    grid-template-columns: 420px 1fr;
    align-items: center;
    gap: 40px;
    margin-bottom: 32px;
    display: grid
}

@media screen and (width<=1024px) {
    .case-block__summary {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 24px
    }
}

.case-block__img img {
    width: 100%;
    height: auto;
    display: block
}

.case-block__lead p {
    color: #1a1a1a;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 500;
    line-height: 2
}

@media screen and (width<=767px) {
    .case-block__lead p {
        font-size: 14px;
        line-height: 1.9
    }
}

.case-block__lead p:last-child {
    margin-bottom: 0
}

.case-block__lead .accent-large {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.5
}

@media screen and (width<=767px) {
    .case-block__lead .accent-large {
        font-size: 30px
    }
}

.case-block__lead .gradient-text {
    background: linear-gradient(90deg, #fd8112 0%, #0085ca 100%);
    -webkit-text-fill-color: transparent;
    color: #0000;
    background-clip: text;
    display: inline
}

.case-block__compare {
    align-items: stretch;
    margin-bottom: 20px;
    display: flex
}

@media screen and (width<=1024px) {
    .case-block__compare {
        flex-direction: column;
        gap: 0;
        margin-bottom: 28px
    }
}

.case-block__challenge,
.case-block__effect {
    flex: 240px 240px 0;
    min-width: 0;
    min-height: 160px;
    padding: 20px 20px 100px;
    position: relative
}

@media screen and (width<=1024px) {

    .case-block__challenge,
    .case-block__effect {
        min-height: 0
    }
}

.case-block__challenge {
    --arrow-depth: 40px;
    clip-path: polygon(0 0, calc(100% - var(--arrow-depth)) 0, 100% 50%, calc(100% - var(--arrow-depth)) 100%, 0 100%);
    margin-right: calc(var(--arrow-depth) * -.55);
    padding-right: calc(var(--arrow-depth) + 24px);
    z-index: 2;
    background: #f1f1f1
}

@media screen and (width<=1024px) {
    .case-block__challenge {
        --arrow-depth: 28px;
        --arrow-gap: 8px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--arrow-depth)), 50% 100%, 0 calc(100% - var(--arrow-depth)));
        margin-right: 0;
        margin-bottom: calc(var(--arrow-gap) - var(--arrow-depth));
        padding: 24px 20px calc(var(--arrow-depth) + 48px)
    }
}

.case-block__effect {
    --arrow-depth: 40px;
    padding-left: calc(var(--arrow-depth) + 28px);
    background: #ebf2f5;
    overflow: hidden
}

.case-block__effect:before {
    content: "";
    width: var(--arrow-depth);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    z-index: 0;
    background: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0
}

.case-block__effect>* {
    z-index: 1;
    position: relative
}

@media screen and (width<=1024px) {
    .case-block__effect {
        --arrow-depth: 28px;
        clip-path: polygon(0 0, 50% var(--arrow-depth), 100% 0, 100% 100%, 0 100%);
        padding: calc(var(--arrow-depth) + 20px) 20px 60px;
        overflow: visible
    }

    .case-block__effect:before {
        display: none
    }
}

.case-block__tag {
    color: #fff;
    text-align: center;
    background: linear-gradient(90deg, #005b8b 0%, #0585c7 100%);
    width: 145px;
    margin-bottom: 16px;
    padding: 4px 16px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    display: inline-block
}

@media screen and (width<=767px) {
    .case-block__tag {
        width: auto;
        min-width: 96px;
        margin-bottom: 12px;
        padding: 4px 12px;
        font-size: 14px
    }
}

.case-block__challenge p,
.case-block__effect li {
    color: #1a1a1a;
    font-size: 20px;
    line-height: 1.9
}

@media screen and (width<=767px) {

    .case-block__challenge p,
    .case-block__effect li {
        font-size: 14px
    }
}

.case-block__effect li {
    padding-left: 1em;
    position: relative
}

.case-block__effect li:before {
    content: "・";
    position: absolute;
    left: 0
}

.case-block__details {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    display: grid
}

@media screen and (width<=1024px) {
    .case-block__details {
        grid-template-columns: 1fr;
        gap: 28px
    }
}

.case-block__detail h4 {
    color: #0085ca;
    border-bottom: 1px solid #0085ca;
    margin-bottom: 16px;
    padding-bottom: 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5
}

@media screen and (width<=767px) {
    .case-block__detail h4 {
        font-size: 16px
    }
}

.case-block__detail>ul li {
    color: #1a1a1a;
    padding-left: 1em;
    font-size: 20px;
    line-height: 1.9;
    position: relative
}

@media screen and (width<=767px) {
    .case-block__detail>ul li {
        font-size: 16px
    }
}

.case-block__detail>ul li:before {
    content: "・";
    position: absolute;
    left: 0
}

.case-block__construction {
    margin-bottom: 20px
}

.case-block__construction:last-of-type {
    margin-bottom: 0
}

.case-block__construction-title {
    color: #1a1a1a;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.7
}

@media screen and (width<=767px) {
    .case-block__construction-title {
        font-size: 16px
    }
}

.case-block__construction-text {
    color: #1a1a1a;
    padding-left: 1em;
    font-size: 20px;
    line-height: 1.8
}

@media screen and (width<=767px) {
    .case-block__construction-text {
        font-size: 16px
    }
}

.case-block__note {
    color: #4a4a4a;
    margin-top: 16px;
    font-size: 20px;
    line-height: 1.8
}

@media screen and (width<=767px) {
    .case-block__note {
        font-size: 16px
    }
}