.page-header {
    background-image: url(../../images/concept/page-header.jpg);
}

@media screen and (max-width: 640px) {

    .page-header {
        background-image: url(../../images/concept/page-header_sp.jpg);
    }

}

/* ---------------------------------- */

.about-txt {
    margin-top: 3.3rem;
}

.about.page-section.bg-square::before {
    aspect-ratio: unset;
    width: 100rem;
    max-width: 70vw;
    height: 52.1rem;
    top: unset;
    left: unset;
    bottom: 0;
    right: calc(((100vw - 1240px) / 2) * -1);
}

@media screen and (max-width: 1240px) {
    .about.page-section.bg-square::before {
        right: -4vw;
    }
}

@media screen and (max-width: 640px) {
    .about.page-section.bg-square::before {
        max-width: none;
        height: auto;
        max-height: 80%;
        width: calc((290 / 375) * 100vw);
        aspect-ratio: 290 / 610;
    }

}

/* ---------------------------------- */
.companyname-inner {
    display: flex;
    column-gap: 11.5rem;
}

.companyname-image {
    text-align: center;
}

.companyname-title {
    font-size: max(20px, 2.4rem);
    font-weight: 700;
    margin-bottom: 0.8em;
}

.companyname-title span {
    display: inline-block;
    padding: .2em 1.5em .2em 0;
    position: relative;
}

.companyname-title span::before,
.companyname-title span::after {
    content: '';
    display: block;
    width: 2.4rem;
    height: 1.6rem;
    background: url(../../images/concept/doublequot.svg) center center no-repeat;
    background-size: contain;
    position: absolute;
}

.companyname-title span::before {
    top: 0;
    left: -1.5em;
}

.companyname-title span::after {
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

.companyname-txt {
    font-size: max(16px, 1.8rem);
}

@media screen and (max-width: 900px) {
    .companyname-inner {
        column-gap: 6rem;
    }

    .companyname-title span {
        padding-left: 1.5em;
    }

    .companyname-title span::before {
        left: 0;
    }
}

@media screen and (max-width: 640px) {
    .companyname-image img {
        max-width: 300px;
    }

    .companyname-inner {
        flex-direction: column;
        row-gap: 30px;
    }
}


/* ---------------------------------- */

.vision-txt {
    background-color: #fff;
    padding: 4.5rem 6.2rem;
    width: calc((902 / 990) * 100%);
    margin: -1.3rem auto 0;
    position: relative;
    z-index: 1;
}

.vision-list {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.vision-list__item {
    display: flex;
    align-items: center;
    column-gap: 2.6rem;
}

.vision-list__number {
    flex: 0 0 6.8rem;
}

@media screen and (max-width: 640px) {
    .vision-image {
        width: 100vw;
        margin-left: -4vw;
    }

    .vision-txt {
        width: 100%;
        padding: 10vw 5vw;
    }

    .vision-list {
        row-gap: 30px;
    }

    .vision-list__item {
        flex-direction: column;
        row-gap: 10px;
        align-items: flex-start;
    }
}