/* --------------------
 Strength
-------------------- */
.com-page-head:before {
    background-image: url(../images/pages/strength/strength-page-head.webp);
}

.overview {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 40px;
    justify-content: space-between;
    margin: 0 auto 60px;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .overview {
        gap: 60px 40px;
        margin: 0 auto 80px;
    }
}

@media (min-width: 992px) {
    .overview {
        flex-wrap: nowrap;
        margin: 0 auto 100px;
    }
}

@media (min-width: 1240px) {
    .overview {
        gap: 58px;
    }
}

.overview__main {
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    .overview__main {
        flex: 0 0 calc(50% - 40px);
        padding: 4px 0 0;
    }
}

@media (min-width: 1240px) {
    .overview__main {
        flex: 0 0 calc(50% - 58px);
    }
}

.overview__main__title {
    font-size: var(--fs20);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 32px;
    text-align: center;
}

@media (min-width: 768px) {
    .overview__main__title {
        font-size: var(--fs23);
    }
}

@media (min-width: 992px) {
    .overview__main__title {
        text-align: left;
    }
}

.overview__main__title span {
    background: var(--gradient-blue);
    background-position: center calc(100% - 2px);
    background-repeat: no-repeat;
    background-size: auto 4px;
}

@media (min-width: 768px) {
    .overview__main__title span {
        background-position: center bottom;
        background-size: auto 8px;
    }
}

.overview__main__content p {
    font-size: var(--fs14);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .overview__main__content p {
        font-size: var(--fs18);
    }
}

@media (min-width: 992px) {
    .overview__main__content p {
        text-align: left;
    }
}

.overview__fig {
    flex: 0 0 100%;
    text-align: center;
}

@media (min-width: 992px) {
    .overview__fig {
        flex: 0 0 50%;
    }
}

.overview__fig img {
    border-radius: 10px;
}

@media (max-width: 767px) {
    .overview__fig img {
        width: 100%;
    }
}

.flow {
    margin: 0 0 60px;
    padding: 0 var(--c-pad);
    text-align: center;
}

@media (min-width: 768px) {
    .flow {
        margin: 0 0 80px;
    }
}

@media (min-width: 992px) {
    .flow {
        margin: 0 0 100px;
    }
}

@media (max-width: 767px) {
    .flow__viewer {
        padding: 0 0 16px;
    }
}

@media (max-width: 767px) {
    .flow__viewer img {
        max-width: 540px;
        width: 540px;
    }
}

.factory {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 60px 40px;
    margin: 0 auto 120px;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .factory {
        flex-wrap: nowrap;
        gap: 60px;
        margin: 0 auto 80px;
    }
}

@media (min-width: 992px) {
    .factory {
        gap: 100px;
        margin: 0 auto 150px;
    }
}

.factory__item {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .factory__item {
        flex: 0 0 calc(50% - 30px);
    }
}

@media (min-width: 992px) {
    .factory__item {
        flex: 0 0 calc(50% - 50px);
    }
}

.factory__item__title {
    font-size: var(--fs16);
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 768px) {
    .factory__item__title {
        font-size: var(--fs18);
    }
}

.factory__item__content {
    margin: 0 0 24px;
}

.factory__item__content p {
    font-size: var(--fs16);
    font-weight: 700;
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 768px) {
    .factory__item__content p {
        font-size: var(--fs18);
    }
}

.factory__item__fig img {
    border-radius: 10px;
}

@media (max-width: 767px) {
    .factory__item__fig img {
        width: 100%;
    }
}

.detail {
    margin: 0 auto 120px;
    max-width: calc(var(--container-width) + var(--c-pad)*2);
    padding: 0 var(--c-pad);
    width: 100%;
}

@media (min-width: 768px) {
    .detail {
        margin: 0 auto 160px;
    }
}

@media (min-width: 992px) {
    .detail {
        margin: 0 auto 200px;
    }
}

.detail__item {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    gap: 20px 40px;
    margin: 0 0 60px;
    width: 100%;
}

@media (min-width: 768px) {
    .detail__item {
        flex-wrap: nowrap;
        margin: 0 0 80px;
    }
}

@media (min-width: 992px) {
    .detail__item {
        margin: 0 0 150px;
    }
}

@media (min-width: 1240px) {
    .detail__item {
        gap: 58px;
    }
}

.detail__item:last-child {
    margin: 0;
}

.detail__item__main {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .detail__item__main {
        flex: 0 0 calc(50% - 40px);
    }
}

@media (min-width: 1240px) {
    .detail__item__main {
        flex: 0 0 calc(50% - 58px);
    }
}

.detail__item__main__title {
    font-size: var(--fs20);
    font-weight: 700;
    line-height: 1.6;
    margin: 0 0 20px;
}

@media (min-width: 768px) {
    .detail__item__main__title {
        font-size: var(--fs23);
        margin: 0 0 32px;
    }
}

.detail__item__main__title span {
    background: var(--gradient-blue);
    background-position: center calc(100% - 2px);
    background-repeat: no-repeat;
    background-size: auto 4px;
}

@media (min-width: 768px) {
    .detail__item__main__title span {
        background-position: center bottom;
        background-size: auto 8px;
    }
}

.detail__item__main__content p {
    font-size: var(--fs14);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 768px) {
    .detail__item__main__content p {
        font-size: var(--fs18);
    }
}

.detail__item__fig {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .detail__item__fig {
        flex: 0 0 50%;
    }
}

.detail__item__fig img {
    border-radius: 10px;
}

@media (max-width: 767px) {
    .detail__item__fig img {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .detail__item__fig img {
        border-radius: 20px;
    }
}

@media (min-width: 768px) {
    .detail__item:nth-child(even) {
        flex-direction: row-reverse;
    }
}