@charset "utf-8";

.promise{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/promise_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;}
.top_visual .text .box strong{width: 13.5rem; font-size: 2rem; line-height: 1.4; font-family: "SCDream5"; font-weight: normal; color: var(--white); display: block;}
.top_visual .text .box .arrow{margin: 0 4rem; width: 42rem;}
.top_visual .text .box .arrow img{width: 100%; object-fit: contain;}
.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 20rem 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 .list{gap: 12rem; display: flex; align-items: flex-start; justify-content: center; text-align: center;}
.btm_inner .list .items{display: flex; flex-direction: column; align-items: center;}
.btm_inner .list .items .img{width: 12rem; height: 12rem;}
.btm_inner .list .items .img img{width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; display: block; object-fit: cover;}
.btm_inner .list .items p{margin-top: 1.4rem; font-size: 2rem; line-height: 1.75; font-family: "SCDream4"; color: var(--white); word-break: keep-all;}
.btm_inner .list .items span{margin-top: 0.5rem; font-size: 1.2rem; line-height: 1.5; font-family: "SCDream4"; color: var(--white); word-break: keep-all; display: block;}


@media (max-width: 1640px) {
    .promise{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{width: 8.23vw; 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 .list{gap: 7.32vw;}
    .btm_inner .list .items .img{width: 7.32vw; height: 7.32vw;}
    .btm_inner .list .items p{margin-top: 0.85vw; font-size: 1.22vw;}
    .btm_inner .list .items span{margin-top: 0.3vw; font-size: 0.73vw;}
}

@media (max-width: 1000px) {
    .promise{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: 6rem; height: auto; justify-content: flex-start; align-items: center;}
    .btm_inner .text p{font-size: 1.4rem;}
    .btm_inner .list{gap: 3rem;}
    .btm_inner .list .items .img{width: 10rem; height: 10rem;}
    .btm_inner .list .items p{margin-top: 1rem; font-size: 1.4rem;}
    .btm_inner .list .items span{margin-top: 0.5rem; font-size: 1.2rem;}

}

@media (max-width: 770px) {
    .top_visual{padding-top: 6rem; height: 35rem;}
    .btm_inner .list{gap: 4rem; margin-top: 6rem; flex-direction: column; align-items: center;}
}