.hero {
    padding: 48px 56px;
    background: var(--primary-bg-gradation);
}

.hero--box {
    width: 100%;
}

.hero--text {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.5;
}

.hero--title {
    margin-top: 40px;
}

.hero--titleRow {
    display: flex;
}

.hero--titleText {
    margin-top: 0;
    font-size: 6.4rem;
    line-height: 1.3;
}

.hero .content--multiText-left {
    padding-right: 0;
}

.hero .content--multiText-right {
    padding-left: 0;
}

.hero--checkList {
    width: 100%;
    max-width: 960px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
    font-weight: bold;
}

.hero--checkItem {
    font-size: 2.8rem;
}

.hero--featureList {
    display: flex;
    justify-content: flex-start;
    margin-top: 40px;
}

.hero--featureItem {
    color: var(--primary-bland-color);
    font-weight: bold;
    padding: 8px 16px;
    margin-right: 8px;
    background-color: var(--white);
    transform: skewX(-25deg);
    position: relative;
}

.hero--featureItemText {
    font-size: 2.4rem;
    transform: skewX(25deg);
}

.hero .emphasis {
    color: var(--accent-color);
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .hero {
        padding: 40px 40px;
    }
    
    .hero--text {
        font-size: 2rem;
        line-height: 1.5;
    }

    .hero--titleText {
        font-size: 3.2rem;
    }

    .hero--checkItem {
        font-size: 2rem;
    }

    .hero--featureItemText {
        font-size: 1.6rem;
    }

    .hero--checkList,
    .hero--featureList,
    .hero--title {
        margin-top: 24px;
    }

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .hero {
        padding: 5%;
    }
    
    .hero--text {
        font-size: 1.5rem;
    }

    .hero--titleRow {
        display: block;
    }

    .hero .content--multiText-left {
        padding-right: 8px;
    }
    
    .hero .content--multiText-right {
        padding-left: 8px;
    }

    .hero--titleText {
        display: inline-block;
        font-size: 2.8rem;
        color: var(--primary-bland-color);
        background-color: var(--white);
        margin-top: 8px;
        /* .content--multiText-left、.content--multiText-rightの修正も必要 */
        padding: 8px;
    }

    .hero--checkList {
        grid-template-columns: repeat(1, 1fr);
        gap: 8px;
    }

    .hero--checkItem {
        font-size: 1.8rem;
    }

    .hero--featureList {
        flex-wrap: wrap;
        gap: 8px;
    }

    .hero--featureItem {
        width: auto;
    }

    .hero--featureItemText {
        font-size: 1.6rem;
    }

    .hero--checkList,
    .hero--featureList,
    .hero--title {
        margin-top: 24px;
    }

}

.messgageSection {
    padding: 40px;
    background-color: var(--bg-color-dimgrey);
    background-image: url(https://placehold.jp/1600x200.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.messgageSection .content--text {
    font-size: 1.8rem;
    margin-top: 16px;
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .messgageSection {
        background-position: center bottom;
        background-size: contain;
    }
}

/* Index: featureSection */

.featureSection {
    padding: 64px 5%;
    position: relative;
    background-color: var(--bg-color-bland-color-transparent);
}

/* .featureSection .content--bgTitle {
    position: absolute;
    content: "Feature";
    color: var(--primary-bland-color-transparent);
    font-size: 12rem;
    top: 0;
    left: 10%;
    transform: translateY(50%);
} */

.featureSection .content--title {
    color: var(--primary-bland-color);
    font-size: 5.6rem;
    position: relative;
    text-align: center;
}

/* .featureSection .content--title::after {
    position: absolute;
    content: "Feature";
    color: var(--primary-bland-color-transparent);
    font-size: 12rem;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
} */

.featureSection .content--textBox {
    margin-top: 24px;
}

.featureSection .content--text {
    font-size: 2.8rem;
    text-align: center;
}

.featureSection .grid-col3 {
    margin-top: 40px;
    column-gap: 40px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .featureSection {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .featureSection .content--title {
        font-size: 4.8rem;
    }

    .featureSection .content--text {
        font-size: 2.4rem;
    }

    .featureSection .grid-col3 {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 24px;
    }

}

/* Index: facilitySection */

.facilitySection {
    padding: 64px 5%;
    background: var(--primary-bg-gradation);
    overflow: hidden;
}

.facilitySection .content--title {
    font-size: 5.6rem;
    position: relative;
    text-align: center;
}

.facilitySection .content--textBox {
    margin-top: 24px;
}

.facilitySection .content--text {
    font-size: 2.8rem;
    text-align: center;
}

.facilitySection .media {
    display: flex;
    width: 87.5%;
    margin-top: 56px;
}

.facilitySection .media--imgBox {
    width: 100%;
    line-height: 0;
}

.facilitySection .media--img {
    width: 100%;
}

.facilitySection .media--body {
    width: 100%;
    max-width: 720px;
    align-self: flex-start;
    color: var(--black);
    background-color: var(--white);
    padding: 48px 32px;
    margin-top: -24px;
    margin-right: -64px;
    z-index: 1;
}

.facilitySection .media--title {
    font-size: 2.8rem;
}

.facilitySection .media--textBox {
    margin-top: 24px;
}

.facilitySection .media--text {
    line-height: 1.5;
    margin-top: 1em;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */

    .facilitySection .content--title {
        font-size: 4.8rem;
    }

    .facilitySection .content--text {
        font-size: 2.4rem;
    }
    
    .facilitySection .media {
        display: flex;
        width: 100%;
        margin-top: 56px;
        position: relative;
    }

    .rightAlignment {
        width: 120%;
        justify-content: flex-start;
        margin-right: calc(50% - 50vw);
    }

    .facilitySection .media--imgBox {
        position: absolute;
        left: 0;
        right: 0;
        overflow-x: hidden;
    }

    .facilitySection .media--body {
        align-self: flex-start;
        width: 400px;
        padding: 48px 32px;
        margin-top: 0;
        margin-right: 0;
        margin-left: 5%;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .facilitySection {
        padding: 32px 5%;
    }

    .facilitySection .media {
        flex-direction: column-reverse;
    }

    .rightAlignment {
        width: 120%;
        justify-content: flex-start;
        /* margin-right: calc(50% - 50vw);
        margin-left: calc(50% - 50vw); */
        margin-right: 0;
        margin-left: 0;
    }

    .facilitySection .media--imgBox {
        position: static;
    }

    .facilitySection .media--body {
        width: 80%;
        padding: 32px 24px;
        margin: 32px auto;
    }
}

/* Index: problemSection */

.problemSection {
    padding: 64px 5%;
    background-color: var(--white);
    overflow: hidden;
}

.problemSection .content--title {
    color: var(--primary-bland-color);
    font-size: 5.6rem;
    position: relative;
    text-align: center;
}

.problemSection .content--textBox {
    margin-top: 24px;
}

.problemSection .content--text {
    font-size: 2.8rem;
    text-align: center;
}

.problemSection .checkList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 48px;
    margin-top: 48px;
}

.problemSection .checkItem {
    width: 100%;
    border: 1px dotted var(--black);
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2;
    padding: 16px 16px 16px 48px;
    position: relative;
}

.problemSection .checkItem::before {
    position: absolute;
    content: "";
    background-image: url(/img/icon_check_orange.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    transform: translate(40%, 75%);
    width: 30px;
    height: 24px;
}

.problemSection .detailOfCheckList {
    margin-top: 48px;
}

.problemSection .detailOfCheckList .content--subTitle {
    display: inline-block;
    color: var(--primary-bland-color);
    font-size: 2.8rem;
    position: relative;
    text-align: center;
    border-left: 5px solid var(--primary-bland-color);
    padding-left: 16px;
}

.problemSection .detailOfCheckList .media {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--bg-color-bland-color-transparent);
    margin-top: 24px;
    padding: 24px;
    column-gap: 24px;
}

.problemSection .detailOfCheckList .media-reverse {
    flex-direction: row-reverse;
}

.problemSection .detailOfCheckList .media--imgBox {
    width: 300px;
}

.problemSection .detailOfCheckList .media--img {
    width: 100%;
}

.problemSection .detailOfCheckList .media--body {
    flex: 1 0;
}

.problemSection .detailOfCheckList .media--text {
    line-height: 1.5;
    margin-top: 1em;
}

.problemSection .detailOfCheckList .media--text:first-of-type {
    margin-top: 0;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .problemSection .checkList {
        column-gap: 32px;
        margin-top: 32px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */

    .problemSection .content--title {
        font-size: 4.8rem;
    }

    .problemSection .content--text {
        font-size: 2.4rem;
    }
    
    .problemSection .checkList {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 24px;
        margin-top: 48px;
    }
    
    .problemSection .detailOfCheckList .media {
        flex-direction: column;
    }

    .problemSection .detailOfCheckList .media--imgBox {
        width: 100%;
    }

    .problemSection .detailOfCheckList .media--body {
        margin-top: 24px;
    }

    .problemSection .detailOfCheckList .content--subTitle {
        font-size: 2.4rem;
        text-align: left;
    }
}

/* Index: solutionSection */

.solutionSection {
    padding: 64px 5%;
    background-image: url(/img/bg-solution.jpg);
    background-size: cover;
}

.solutionSection .content--title {
    font-size: 5.6rem;
    text-align: center;
    line-height: 1.5;
    position: relative;
    padding: 32px;
}

.solutionSection .content--title::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background-image: url(/img/title-decoration-top-left-01.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.solutionSection .content--title::after {
    position: absolute;
    content: "";
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-image: url(/img/title-decoration-bottom-right-01.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.solutionSection .messageBox {
    width: 100%;
    max-width: 960px;
    color: var(--black);
    background-color: var(--white);
    margin: 48px auto 0;
    padding: 48px;
}

.solutionSection .messageBox .emphasis {
    color: var(--black);
    font-size: 3rem;
    font-weight: bold;
}

.solutionSection .messageBox--text {
    font-size: 1.8rem;
    line-height: 2;
    margin-top: 2em;
}

.solutionSection .messageBox--text:first-of-type {
    margin-top: 0;
}

.solutionSection .firstCustomer {
    margin-top: 32px;
    display: grid;
    place-items: center;
}

.solutionSection .firstCustomer .content--subTitle {
    font-size: 2.8rem;
    text-align: center;
    line-height: 1.5;
    padding: 32px;
    position: relative;
}

.solutionSection .firstCustomer .content--subTitle::before {
    position: absolute;
    content: "";
    width: 3px;
    height: 40px;
    left: 0;
    background-color: var(--white);
    transform: skewX(35deg);
}

.solutionSection .firstCustomer .content--subTitle::after {
    position: absolute;
    content: "";
    width: 3px;
    height: 40px;
    right: 0;
    background-color: var(--white);
    transform: skewX(-35deg);
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .solutionSection .content--title {
        font-size: 3.6rem;
    }

    .solutionSection .content--title::before,
    .solutionSection .content--title::after {
        width: 48px;
        height: 48px;
    }

    .solutionSection .messageBox {
        padding: 48px;
    }

    .solutionSection .messageBox .emphasis {
        font-size: 2.4rem;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .solutionSection {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    
    .solutionSection .content--title {
        font-size: 3.2rem;
    }

    .solutionSection .messageBox {
        margin-top: 24px;
        padding: 24px;
    }

    .solutionSection .messageBox--text {
        font-size: 1.6rem;
    }

    .solutionSection .firstCustomer {
        margin-top: 16px;
    }

    .solutionSection .firstCustomer .content--subTitle {
        font-size: 1.8rem;
        padding: 16px;
    }
    
    .solutionSection .firstCustomer .content--subTitle::before {
        width: 3px;
        height: 24px;
        transform: skewX(25deg);
    }
    
    .solutionSection .firstCustomer .content--subTitle::after {
        width: 3px;
        height: 24px;
        transform: skewX(-25deg);
    }
}

/* Index: serviceMenuSection */

.serviceMenuSection {
    padding: 64px 5%;
    background: var(--primary-bg-gradation);
}

.serviceMenuSection .content--title {
    font-size: 5.6rem;
    text-align: center;
}

.serviceMenuSection .content--textBox {
    margin-top: 24px;
}

.serviceMenuSection .content--text {
    font-size: 2.8rem;
    text-align: center;
}

.serviceMenuSection .media {
    display: flex;
    margin-top: 64px;
}

.serviceMenuSection .media--imgBox {
    width: 100%;
    line-height: 0;
}

.serviceMenuSection .media--img {
    width: 100%;
}

.serviceMenuSection .media--body {
    width: 100%;
    align-self: flex-start;
    color: var(--black);
    background-color: var(--white);
    padding: 64px 32px 48px;
    margin-top: -24px;
    margin-right: -64px;
    z-index: 1;
    display: grid;
    justify-content: center;
    row-gap: 24px;
}

.serviceMenuSection .media--title {
    font-size: 2.8rem;
    text-align: center;
    position: relative;
}

.serviceMenuSection .media-reverse .media--body {
    margin-left: -64px;
    margin-right: 0;
}

.serviceMenuSection .media--title-en {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-bland-color-transparent);
    font-size: 5.6rem;
    text-align: center;
}

/* .serviceMenuSection .media--title::after {
    position: absolute;
    content: "MAINTENANCE";
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-bland-color-transparent);
    font-size: 5.6rem;
    text-align: center;
} */

.serviceMenuSection .media--textBox {
    /* margin-top: 48px; */
}

.serviceMenuSection .media--text {
    line-height: 2;
    text-align: center;
}

.serviceMenuSection .media--btnBox {
    width: 100%;
}

.serviceMenuSection .media--btn {
    width: 100%;
    color: var(--primary-bland-color);
    border: 2px solid var(--primary-bland-color);
}

.serviceMenuSection .media--btn::after {
    background-image: url(/img/icon_arrow_right_orange.png);
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    

    .serviceMenuSection .media--title-en {
        font-size: 4.2rem;
    }

    .serviceMenuSection .media--title::after {
        font-size: 4rem;
    }

    .serviceMenuSection .media--body {
        margin-top: 0;
        margin-right: -32px;
    }

    .serviceMenuSection .media--imgBox {
        margin-top: -24px;
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .serviceMenuSection {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .serviceMenuSection .content--title {
        font-size: 4.8rem;
    }

    .serviceMenuSection .content--text {
        font-size: 2.4rem;
    }

    .serviceMenuSection .media--title {
        font-size: 2.4rem;
    }

    .serviceMenuSection .media--title-en {
        font-size: 3.6rem;
    }

    .serviceMenuSection .media {
        flex-direction: column-reverse;
    }

    .serviceMenuSection .media-reverse .media--body {
        margin-left: 0;
    }
}

.worksSection {
    padding: 64px 5%;
}

.worksSection .content--title {
    font-size: 5.6rem;
    text-align: center;
}

.worksSection .content--textBox {
    margin-top: 24px;
}

.worksSection .content--text {
    font-size: 2.8rem;
    text-align: center;
}

.worksSection .grid-col4 {
    margin-top: 48px;
    gap: 24px;
}

.worksSection .squareArrowBtn--body {
    display: grid;
    row-gap: 8px;
}

.worksSection .content--btnBox {
    display: grid;
    place-items: center;
    margin-top: 56px;
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .worksSection .grid-col4 {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .worksSection {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    
    .worksSection .content--title {
        font-size: 4.8rem;
    }
    
    .worksSection .content--text {
        font-size: 2.4rem;
    }
    
    .worksSection .grid-col4 {
        margin-top: 32px;
        grid-template-columns: repeat(1, 1fr);
    }

    .worksSection .content--btnBox {
        margin-top: 32px;
    }

}