/*================================================
  page-header
================================================*/

.page-header {
    background-image: url(../../image/system/page-header-bg.jpg);
}
.page-header-title {
    max-width: 1146px;
}
.page-header-title-ja {
    bottom: -20px;
    right: 20px;
}

@media print,
screen and (min-width: 1200px) {
    .page-header-title-ja {
        bottom: 15px;
        right: 110px;
    }
}

/*================================================
  system
================================================*/
.page-section-title-en {
    font-size: clamp(1.4rem, 1.4rem + 4vw, 7.5rem);
}

.system {
    color: var(--color-white);
}

.system-content {
    text-align: center;
    margin-block: calc(var(--layout-gap) * 2);
}

.system-intro {
    /* font-size: clamp(2.4rem, 2.4rem + 4vw, 4.5rem); */
    font-size: clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
    font-weight: 900;
    margin-bottom: var(--layout-gap);
}

.system-sub-intro {
    text-align: left;
}

.system-list {
    display: flex;
    margin-top: var(--layout-gap);
}

.system-list-item {
    width: calc(100% / 3);
    margin-right: 20px;
}

.system .cta-item-icon {
    position: relative;
}

/* バツ */
.system .cta-item-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    right: -25px;
    width: 20px;
    height: 4px;
    background-color: var(--color-body);
}

.system .cta-item-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    right: -25px;
    width: 20px;
    height: 4px;
    background-color: var(--color-body);
}

.system-list-item:last-child .cta-item-icon::after,
.system-list-item:last-child .cta-item-icon::before {
    content: none;
}

.system-list-item:last-child {
    margin-right: 0;
}

.system-logo svg {
    height: 80px;
    width: auto;
}

.system-title {
    /* font-size: 2.4rem; */
    font-size: clamp(1.8rem, 1.36rem + 2.2vw, 4rem);
    font-weight: 700;
    position: relative;
}

.system-title-ja {
    /* font-size: 2rem; */
    font-size: clamp(1.4rem, 1.04rem + 1.8vw, 3.2rem);
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    opacity: .1;
    width: 100%;
}

.system-list .cta-item-icon {
    margin-bottom: calc(var(--layout-gap) / 1.5);
    margin-top: calc(var(--layout-gap) / 1.5);
}

.system-content-text {
    font-size: 1.8rem;
    padding-block: calc(var(--layout-gap) * 2);
}


@media print,
screen and (min-width: 769px) {
    .system-sub-intro {
        text-align: center;
    }
    .system-list-item {
        margin-right: 50px;
    }

    /* バツ */
    .system .cta-item-icon::before {
        right: -55px;
        width: 50px;
    }

    .system .cta-item-icon::after {
        right: -55px;
        width: 50px;
    }
}

@media print,
screen and (min-width: 1200px) {
    .system-content {
        margin-block: calc(var(--layout-gap) * 3);
    }

    .system-list {
        margin-top: calc(var(--layout-gap) * 1.2);
    }

    .system-logo svg {
        height: 100px;
    }

    .system-title {
        font-size: 4rem;
    }

    .system-title-ja {
        font-size: 3.2rem;
    }

    .system-list-item {
        margin-right: 70px;
    }

    .system-intro {
        margin-bottom: calc(var(--layout-gap) * 1.2);
    }

    /* バツ */
    .system .cta-item-icon::before {
        right: -75px;
        width: 70px;
    }

    .system .cta-item-icon::after {
        right: -75px;
        width: 70px;
    }

    .system-content-text {
        font-size: 2.4rem;
        padding-block: calc(var(--layout-gap) * 3);
    }
}