@charset "utf-8";

.customer{padding: 8.6rem 0; border-top: 1px solid var(--color-d4d4d4);}
.ctt_wrap{max-width: 160rem; width: 100%; margin: 0 auto;}
.top_visual{padding-top: 19rem; height: 82.2rem; background: url(/theme/template/img/sub/cs_bg1.png) center center no-repeat; background-size: cover; width: 100%;}
.top_visual .text{width: 96rem; margin: 0 auto; word-break: keep-all;}
.top_visual .text b{font-size: 2rem; line-height: 1.4; font-family: "SCDream5"; font-weight: normal; color: var(--white); opacity: 0.38; display: block;}
.top_visual .text p{margin-top: 1rem; font-size: 6rem; line-height: 1; font-family: "SCDream5"; color: var(--white); word-break: keep-all;}
.top_visual .text .box{margin-top: 4.3rem; display: flex; align-items: flex-start; justify-content: space-between;}
.top_visual .text .box strong{font-size: 2rem; line-height: 1.4; font-family: "SCDream5"; font-weight: normal; color: var(--white); display: block;}
.top_visual .text .box span{font-size: 2rem; line-height: 1.5; font-family: "SCDream5"; color: var(--color-9a9a9a); display: block;}

.btm_inner{padding: 8rem 0 26rem 43rem; height: 124.2rem; background: var(--color-323232); border: 1px solid var(--color-707070); border-right: 0; border-left: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.btm_inner .text p{font-size: 2rem; line-height: 1.75; font-family: "SCDream4"; word-break: keep-all; color: var(--white);}
.btm_inner .btn_wrap{}
.btm_inner .btn_wrap a{height: 11.2rem; gap: 4.2rem; padding: 3.1rem 2.8rem 3.1rem 3.3rem; border: 1px solid var(--white); background: transparent; width: max-content; display: flex; align-items: center; justify-content: center; text-align: center;}
.btm_inner .btn_wrap a span{font-size: 2rem; line-height: 1.5; font-family: "SCDream5"; color: var(--white); word-break: keep-all; display: block;}
.btm_inner .btn_wrap a img{width: auto; height: 100%; max-width: 100%; max-height: 5rem; display: block;}


@media (max-width: 1640px) {
    .customer{padding: 5.24vw 2rem;}
    .ctt_wrap{max-width: 100%;}
    .top_visual{padding-top: 11.59vw; height: 50.12vw;}
    .top_visual .text{width: 58.54vw;}
    .top_visual .text b{font-size: 1.22vw;}
    .top_visual .text p{margin-top: 0.61vw; font-size: 3.66vw;}
    .top_visual .text .box{margin-top: 2.62vw;}
    .top_visual .text .box strong{font-size: 1.22vw;}
    .top_visual .text .box .arrow{margin: 0 2.44vw; width: 25.61vw;}
    .top_visual .text .box span{font-size: 1.22vw;}
    .btm_inner{padding: 4.88vw 0 12.2vw 26.22vw; height: 75.73vw;}
    .btm_inner .text p{font-size: 1.22vw;}
    .btm_inner .btn_wrap a{height: 6.83vw; gap: 2.56vw; padding: 1.89vw 1.71vw 1.89vw 2.01vw;}
    .btm_inner .btn_wrap a span{font-size: 1.22vw;}
}

@media (max-width: 1000px) {
    .customer{padding: 0;}
    .top_visual{padding-top: 10vw; height: 50vw;}
    .top_visual .text{width: 100%; max-width: 55rem; margin: 0 auto; word-break: keep-all; text-align: center;}
    .top_visual .text b{font-size: 1.6rem;}
    .top_visual .text p{margin-top: 1rem; font-size: 2rem;}
    .top_visual .text .box{margin-top: 3rem; flex-direction: column; align-items: center;}
    .top_visual .text .box strong{width: auto; font-size: 1.4rem;}
    .top_visual .text .box .arrow{display: none;}
    .top_visual .text .box span{margin-top: 1rem; font-size: 1.4rem;}

    .btm_inner{padding: 4rem 2rem; gap: 3rem; align-items: center; height: auto; justify-content: flex-start;}
    .btm_inner .text p{font-size: 1.4rem; text-align: center;}
    .btm_inner .btn_wrap a{height: 6rem; gap: 2rem; padding: 1.5rem;}
    .btm_inner .btn_wrap a span{font-size: 1.2rem;}

}

@media (max-width: 770px) {
    .top_visual{padding-top: 6rem; height: 35rem;}
}