@charset "utf-8";
/* ui.css */

.p-view{display: block}
.t-view{display: none;}
.m-view{display: none;}
.main-section001{color:#292929;background-image: url("../images/hero_bg.jpg");background-position: right;background-size: cover;width: 100%;height: 697px;display: flex;justify-content: center;align-items: center;padding-top: var(--header-height);}
.main-section001 .text-box{text-align: center;display: flex;flex-direction: column;row-gap: 32px;}
.main-section001 .text-box h2{font-weight: 700;font-size: 64px;line-height: 1.2;letter-spacing: -0.03em;text-align: center;vertical-align: middle;text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);color:#ffffff;}
.main-section001 .text-box p {font-weight: 600;font-size: 24px;line-height: 1.45;letter-spacing: -0.03em;text-align: center;vertical-align: middle;color:#ffffff;}

.section-item {color:#292929;}
.section-item .title-box::after{content:'';display: block;margin: 20px auto 0;width: 40px;height: 1px;background-color: #53B7E8;}
.section-item .title-box h2{font-weight: 400;font-size: 30px;line-height: 1.3;letter-spacing: -0.03em;text-align: center;vertical-align: middle;}
.section-item .title-box h2 strong{font-weight: 700;}
.section-item .title-box.left h2 {text-align: left;}
.section-item .title-box.left::after{content:'';margin: 20px auto 0 0;}

.section-item.section001{padding:120px 0 140px; }
.section-item.section001 .text-info{display: flex;align-items: center;justify-content: center;margin-top: 40px;column-gap: 30px;}
.section-item.section001 .text-info p{font-weight: 400;font-size: 50px;line-height: 1.3;letter-spacing: -0.02em;text-align: center;vertical-align: middle;}
.section-item.section001 .text-info p strong{font-weight: 700;}
.section-item.section001 .text-info img{display: block;width: 326px;height: auto;}
.section-item.section001 .list-box{display: flex;flex-direction: column;margin-top: 80px;}
.section-item.section001 .list-box .list-item{display: flex;column-gap: 32px;align-items: center;}
.section-item.section001 .list-box .list-item .img-box{width: 516px;height: auto;aspect-ratio: 1 / 1;}
.section-item.section001 .list-box .list-item .img-box img{width: 100%;height:100%;object-fit:cover;display: block;}
.section-item.section001 .list-box .list-item:nth-of-type(n + 2){margin-top: -40px;}
.section-item.section001 .list-box .list-item .text-box{}
.section-item.section001 .list-box .list-item .text-box .title{display: inline-block;font-weight: 400;font-size: 32px;line-height: 1.2;letter-spacing: -0.03em;vertical-align: middle;border-bottom: 1px solid #53B7E8;padding-bottom: 32px;margin-bottom: 32px;}
.section-item.section001 .list-box .list-item .text-box .text{font-weight: 400;font-size: 20px;line-height: 1.4;letter-spacing: -0.03em;vertical-align: middle;}
.section-item.section001 .list-box .list-item .text-box strong{font-weight: 700;}
.section-item.section001 .list-box .list-item:nth-of-type(even){flex-direction: row-reverse;}
.section-item.section001 .list-box .list-item:nth-of-type(even) .text-box{text-align: right;}

.section-item.section002{padding:60px 0;background: #FAFAFA;border-top: 3px solid #F0F0F0;border-bottom: 3px solid #F0F0F0;}
.section-item.section002 .banner-box{border-left: 6px solid #53B7E8;text-align: left;padding-left: 32px;display: flex;flex-direction: column;row-gap: 4px;}
.section-item.section002 .banner-box p{font-weight: 500;font-size: 24px;line-height: 1.4;letter-spacing: -0.03em;}
.section-item.section002 .banner-box h2{font-weight: 700;font-size: 54px;line-height: 1.3;letter-spacing: -0.03em;vertical-align: middle;}


.section-item.section003{padding:100px 0;}
.section-item.section003 .list-box{width: 100%;display: flex;margin-top: 80px;column-gap: 32px;}
.section-item.section003 .list-box .list-item{flex:1 1 0;display: flex;flex-direction:column;column-gap: 32px;align-items: center;background-color: #F0F0F0;}
.section-item.section003 .list-box .list-item .img-box{max-width: 593px;width: 100%;height: auto;aspect-ratio:292 / 183;}
.section-item.section003 .list-box .list-item .img-box img{width: 100%;height:100%;object-fit:contain;object-position:center bottom;display: block;}
.section-item.section003 .list-box .list-item .text-box{width: 100%;padding:32px 32px;display: flex;flex-direction: column;align-items: flex-start;row-gap: 4px;}
.section-item.section003 .list-box .list-item .text-box .title{font-weight: 600;font-size: 24px;line-height: 1.2;letter-spacing: -0.03em;vertical-align: middle;color: #292929;}
.section-item.section003 .list-box .list-item .text-box .text{font-weight: 500;font-size: 20px;line-height: 145%;letter-spacing: -0.03em;vertical-align: middle;color: #757575;}
.section-item.section003 .list-box .list-item .text-box strong{font-weight: 700;}

.section-item.section004{padding:100px var(--container-padding) 140px;background-color:#E2F4FC;}
.section-item.section004 .text-box{display: flex;flex-direction: column;row-gap: 12px;}
.section-item.section004 .text-box h2{font-weight: 700;font-size: 48px;line-height: 1.3;letter-spacing: -0.03em;text-align: center;vertical-align: middle;}
.section-item.section004 .text-box p{font-weight: 400;font-size: 24px;line-height: 1.4;letter-spacing: -0.03em;text-align: center;}
.section-item.section004 .info{font-weight: 500;font-size: 28px;line-height: 1.4;letter-spacing: -0.03em;text-align: center;margin-top: 60px;}
.section-item.section004 .list-box{display: flex;justify-content: center;margin-top: 60px;}
.section-item.section004 .list-box .list-item{width: 700px;height: 311px;display: flex;justify-content: center;align-items: center;border-radius: 200px;background-color: rgba(255,255,255,0.7);}
.section-item.section004 .list-box .list-item:nth-of-type(1){margin-right: -40px;}
.section-item.section004 .list-box .list-item:nth-of-type(1) .img-box img{width: 355px;height: auto;aspect-ratio: 355 / 111;display: block;}
.section-item.section004 .list-box .list-item:nth-of-type(2){margin-left: -40px;}
.section-item.section004 .list-box .list-item:nth-of-type(1) .img-box img{width: 381px;height: auto;aspect-ratio: 381 / 112;display: block;}
.section-item.section004 .list-box .list-item:nth-of-type(2) .img-box img{width: 414px;}


.section-item.section005 {background-color: #53B7E8;padding:120px 0;}
.section-item.section005 .title-box h2{color:#ffffff;}
.section-item.section005 .title-box::after{background-color: #ffffff;}
.section-item.section005 .list-box{width: 100%;display: grid;  grid-template-columns: repeat(6, 1fr);gap: 46px 20px;margin-top: 64px;}
.section-item.section005 .list-box .list-item {}
.section-item.section005 .list-box .list-item .icon-box{width: auto;height: 64px;margin-bottom: 32px;text-align: center;}
.section-item.section005 .list-box .list-item .icon-box img{height: 100%; width: auto;display: block;margin: 0 auto;}
.section-item.section005 .list-box .list-item .text-box{color:#ffffff;}
.section-item.section005 .list-box .list-item .text-box h2{font-weight: 700;font-size: 18px;line-height: 145%;letter-spacing: -0.5%;text-align: center;vertical-align: middle;}
.section-item.section005 .list-box .list-item .text-box p{font-weight: 500;font-size: 14px;line-height: 1.45;letter-spacing: -0.03em;text-align: center;vertical-align: middle;margin-top: 12px;}

.contact-section{padding:120px 0;}
.contact-section .title{font-weight: 700;font-size: 32px;line-height: 1.2;letter-spacing: -0.02em;vertical-align: middle;color: #292929;}
.contact-section .company-address{margin-top: 32px;display: flex;flex-direction: column;row-gap: 12px;font-size: 18px;line-height: 1.45;letter-spacing: -0.5%;vertical-align: middle;}
.contact-section .company-address li{display: flex;align-items: center;column-gap: 20px;}
.contact-section .company-address .company-name{font-weight: 700;font-size: 24px;line-height: 1.45;letter-spacing: -0.5%;vertical-align: middle;}
.contact-section .company-address .t-box{ font-weight: 700; color: #292929; width: 72px; flex: 0 0 72px; min-width: 0;}
.contact-section .company-address .v-box{ font-weight: 500;color: #757575;}
.contact-section .company-address .v-box .email{width: 187px;height: 18px;display: block;}

@media screen and (max-width: 1360px) {
    .section-item.section004 .text-box h2{font-size: 40px;}
    .section-item.section004 .text-box p{font-size: 18px;}
}
@media screen and (max-width: 1024px) {
    .p-view{display: none;}
    .t-view{display: block;}
    .main-section001{height: 697px;    background-position: 96%;}
    .main-section001 .text-box{row-gap: 16px;}
    .main-section001 .text-box h2{font-size: 56px;}
    .main-section001 .text-box p {font-size: 24px;}

    .section-item.section001{padding:100px 0 ; }
    .section-item.section001 .text-info{flex-direction: column;row-gap: 8px;}
    .section-item.section001 .text-info p{font-size: 40px;}
    .section-item.section001 .text-info img{width: 246px;}
    .section-item.section001 .list-box .list-item {column-gap: 24px;}
    .section-item.section001 .list-box .list-item:nth-of-type(n + 2) {margin-top: 0;}
    .section-item.section001 .list-box .list-item .img-box {width: 400px;}

    .section-item.section002 .banner-box{padding-left: 24px;}
    .section-item.section002 .banner-box p{font-size: 18px;}
    .section-item.section002 .banner-box h2{font-size: 40px;}

    .section-item.section003{padding:100px 0 ; }
    .section-item.section003 .list-box {flex-direction: column;row-gap: 24px;margin-top: 24px;}
    .section-item.section003 .list-box .list-item .text-box {padding: 24px;}
    .section-item.section003 .list-box .list-item .text-box .title{font-size: 20px;}
    .section-item.section003 .list-box .list-item .text-box .text{font-size: 16px;}

    .section-item.section004{padding:80px 24px;}
    .section-item.section004 .text-box h2{font-size: 40px;}
    .section-item.section004 .text-box p{font-size: 18px;}

    .section-item.section004 .list-box .list-item {width: 391px;height: 191px;}
    .section-item.section004 .list-box .list-item:nth-of-type(1){margin-right: -30px;}
    .section-item.section004 .list-box .list-item:nth-of-type(1) .img-box img {width: 224px;}
    .section-item.section004 .list-box .list-item:nth-of-type(2) .img-box img {width: 241px;}
    .section-item.section004 .list-box .list-item:nth-of-type(2){margin-left: -30px;}

    .section-item.section005{padding:80px 0 ; }
    .section-item.section005 .list-box{grid-template-columns: repeat(4, 1fr);gap: 16px;margin-top: 48px;}

    .contact-section{padding:80px 0;}
    .contact-section .company-address{font-size: 16px;}
    .contact-section .company-address li{align-items: flex-start;word-break: keep-all;}
    .contact-section .company-address .company-name {font-size: 20px;}

}

@media screen and (max-width: 800px) {
    .section-item.section001 .list-box .list-item .text-box .title{font-size: 20px;}
    .section-item.section001 .list-box .list-item .text-box .text{font-size: 16px;}
}


@media screen and (max-width: 750px) {
    .p-view{display: none;}
    .t-view{display: none;}
    .m-view{display: block;}
    .main-section001{height: 650px;}
    .main-section001 .text-box h2{font-size: 44px;}
    .main-section001 .text-box p {font-size: 18px;}

    .section-item .title-box h2{font-size: 24px;}

    .section-item.section001{padding:80px 0 80px; }
    .section-item.section001 .text-info{row-gap: 20px;}
    .section-item.section001 .text-info p{font-size: 20px;}
    .section-item.section001 .text-info img{width: 139px;}
    .section-item.section001 .list-box{row-gap: 24px;}
    .section-item.section001 .list-box .list-item{flex-direction: column;row-gap: 24px;}
    .section-item.section001 .list-box .list-item:nth-of-type(even) {flex-direction: column;}
    .section-item.section001 .list-box .list-item .img-box {width: 300px;}
    .section-item.section001 .list-box .list-item .text-box{text-align: center;}
    .section-item.section001 .list-box .list-item:nth-of-type(even) .text-box {text-align: center;}
    .section-item.section001 .list-box .list-item .text-box .title {padding-bottom: 16px;margin-bottom: 16px;width: 284px;}


    .section-item.section002 .banner-box{padding-left: 20px;}
    .section-item.section002 .banner-box p{font-size: 16px;}
    .section-item.section002 .banner-box h2{font-size: 32px;}

    .section-item.section003{padding:80px 0 ; }

    .section-item.section004 .text-box h2{font-size: 28px;}
    .section-item.section004 .text-box p{font-size: 16px;}
    .section-item.section004 .info{font-size: 20px;    margin-top: 30px;}

    .section-item.section004 .list-box {flex-direction: column;align-items: center;}
    .section-item.section004 .list-box .list-item {width: 100%;max-width:420px;height: 132px;}
    .section-item.section004 .list-box .list-item:nth-of-type(1){margin-right: 0;}
    .section-item.section004 .list-box .list-item:nth-of-type(1) .img-box img {width: 167px;}
    .section-item.section004 .list-box .list-item:nth-of-type(2) .img-box img {width: 179px;}
    .section-item.section004 .list-box .list-item:nth-of-type(2){margin-left: 0;margin-top: -20px;}

    .section-item.section005 .list-box{grid-template-columns: repeat(2, 1fr);gap: 40px 7px;margin-top: 48px;}
    .section-item.section005 .list-box .list-item .text-box h2{font-size: 16px;}
    .section-item.section005 .list-box .list-item .text-box p{font-size: 13px;margin-top: 8px;}
    .section-item.section005 .list-box .list-item .icon-box{height: 52px;margin-bottom: 24px;}

    .contact-section .title{font-size: 20px;}
    .contact-section .company-address{font-size: 16px;}
    .contact-section .company-address .t-box{ width: 55px; flex: 0 0 55px; }
    .contact-section .company-address .v-box{font-size: 14px;padding-top: 3px;}
    .contact-section .company-address .company-name {font-size: 18px;}
}