@charset "utf-8";


/* main */

.title { font-size: 2.1875rem; font-weight: 500; letter-spacing: -2px; color: #2c2c2c; }
.title strong { font-size: 3.125rem; }

section p { letter-spacing: -1px; }

.m_sec1 { width: 100%; height: 60rem; transition: .3s; overflow: hidden; padding-top: var(--header_height); }
.m_sec1.fill { height: 100vh; }
.m_sec1 .inner { padding-top: 10vh; height: 100%; }
.m_sec1 h2 p { font-size: 2.875vw; letter-spacing: -1px; }
.m_sec1 h2 p + p { margin-top: 5vh; }
.m_sec1 h2 strong { font-size: 4.25vw; line-height: 1.1; letter-spacing: -3px; }


.m_sec2 { position: relative; max-height: 62.5rem; }
.m_sec2 .car { position: absolute; left: -3vw; top: 16.6%; width: 65.5729vw; aspect-ratio: 1.5977/1; z-index: 1; }
.m_sec2 .inner { padding: 8.25rem 0; z-index: 2; }
.m_sec2 article { width: 50%; max-width: 720px; padding: 5.625rem 3.75rem 3.4375rem; box-shadow: -1.25rem 0 1.875rem rgba(0, 0, 0, .1); border-radius: 1.875rem; }
.m_sec2 article .title { font-size: 2.9vw; font-weight: 500; letter-spacing: -2px; }
.m_sec2 article .title strong { font-size: 3.7vw; letter-spacing: -4px; }
.m_sec2 article .l_gray { font-size: 1.775vw; line-height: 1.3; letter-spacing: -2px; }
.m_sec2 article ul { margin-top: 6.5rem; gap: 0.8125rem; font-size: 1.3vw; line-height: 1.3; letter-spacing: -1px; }
.m_sec2 article ul li { position: relative; flex: 1; padding: 1.875rem 1.25rem; aspect-ratio: 1; text-align: left; border-radius: 0.9375rem; background-color: #f7f7f7; background-repeat: no-repeat; background-position: right 1.25rem bottom 20%; background-size: 50%; transition: .3s; }
.m_sec2 article ul li:hover { background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .1); }


.m_sec3 .inner { padding: 7.5rem 0; }
.m_sec3 ul { gap: 4%; }
.m_sec3 ul li { flex: 1; position: relative; overflow: hidden; border-radius: 1.25rem; }
.m_sec3 ul li .img_box { aspect-ratio: 1.5625/1; }
.m_sec3 ul li .text { padding: 5px 1.875rem 1.875rem; }
.m_sec3 ul li .click_box { opacity: 0; background: rgba(0, 0, 0, .4); }
.m_sec3 ul li:hover .click_box { opacity: 1; }
.m_sec3 ul li .click_box .btn_css { position: absolute; right: 1.875rem; bottom: 1.25rem; }


.m_sec4 { display: flex; flex-wrap: wrap; }
.m_sec4 > article { width: 50%; padding: 6rem 5rem 5rem; background-color: #f8f8f8; }






@media screen and (max-width: 1280px) {
    .m_sec2 article .l_gray { font-size: 20px; line-height: 1.3; letter-spacing: -1px; }
    .m_sec2 article ul { margin-top: 4rem; }
}

@media screen and (max-width: 1024px) {
    .m_sec2 article { width: 60%; padding: 40px 30px 20px; }
    .m_sec2 article .l_gray { font-size: 18px; }
    .m_sec2 article ul { margin-top: 3rem; font-size: 16px; line-height: 1.3; letter-spacing: -1px; }


    .m_sec3 ul li .fs30 { font-size: 20px; }
    .m_sec3 ul li .fs36 { font-size: 24px; }
    
}



@media screen and (max-width: 767px) {


    .m_sec1 .inner { padding-top: 0; }
    .m_sec1 h2 p { font-size: 25px; text-align: center; }
    .m_sec1 h2 strong { font-size: 40px; letter-spacing: -1px; }
    

    .m_sec1 .btn_style1 { margin: 0 auto; }
    .m_sec1 .container { display: flex; height: inherit; flex-direction: column; justify-content: center; }

    .m_sec2 { max-height: 100%; }
    .m_sec2 .car { left: auto; left: 0; top: 0; width: 100vw; }
    .m_sec2 .inner { padding: 50vw 0 10vw;  }
    .m_sec2 article { width: 100%; padding: 5vh 5vw; }
    .m_sec2 article p { text-align: center; }
    .m_sec2 article .title { font-size: 25px; }
    .m_sec2 article .title strong { font-size: 40px; letter-spacing: -3px; }
    .m_sec2 article ul { margin-top: 20px; font-size: 14px; }

    .m_sec3 .inner { padding: 15vw 0; }
    .m_sec3 .title { width: 100%; text-align: center; }
    .m_sec3 .btn_style1 { margin: 20px auto; }
    .m_sec3 ul { flex-direction: column; gap: 20px; }
    .m_sec3 ul li { display: flex; flex-wrap: wrap; box-shadow: 0 0 20px rgba(0, 0, 0, .1) }
    .m_sec3 ul li .img_box { width: 180px; }
    .m_sec3 ul li .text { width: calc(100% - 180px); padding: 30px 40px; }

    .m_sec4 > article { width: 100%; max-height: 500px; }
    .m_sec4 .img_box { position: absolute; left: 0; top: 0; height: 100%; }
    .m_sec4 .right { position: relative; background: rgba(255, 255, 255, .9); margin: 20px; text-align: center; border-radius: 20px; }
    .m_sec4 .title { font-size: 24px; }
    .m_sec4 .title strong { font-size: 36px; }
    


}


@media screen and (max-width: 480px) {
    .title { font-size: 18px !important; }
    .title strong { font-size: 28px !important; line-height: 1.3; }

    .m_sec2 article ul li { padding-top: 15px; }

    .m_sec3 ul { margin-top: 30px; }
    .m_sec3 ul li .img_box { width: 140px; }
    .m_sec3 ul li .text { width: calc(100% - 140px); }
    .m_sec3 ul li .fs30 { font-size: 16px; }
    .m_sec3 ul li .fs36 { font-size: 20px; }

    .m_sec4 > article { padding: 50px 30px; }
    .m_sec4 .btn_css { margin-top: 50px; }

}


@media screen and (max-width: 400px) {

    .m_sec2 article .l_gray { font-size: 16px; }
    .m_sec2 article ul { font-size: 13px; }

    .m_sec3 ul { gap: 0; }
    .m_sec3 ul li { box-shadow: none; align-items: flex-start; }
    .m_sec3 ul li .img_box { width: 120px; }
    .m_sec3 ul li .text { width: calc(100% - 120px); padding: 20px 20px 50px; }
    .m_sec3 ul li .fs30 { font-size: 14px; }
    .m_sec3 ul li .fs36 { font-size: 18px; }

}