@charset "utf-8";

#wrap{}
#wrap .inner{width: 1280px;margin:0 auto;max-width:100%;}
#wrap .init{transform:translateY(80px);opacity:0;transition:all 1s;}
#wrap .init.animate{transform:translateY(0);opacity:1;}
#wrap .btn-01{color:#ffffff !important;background-color:#4950bc !important;border-color:#4950bc !important;}
#wrap .btn-02{color:#4950bc !important;background-color:#ffffff !important;border-color:#4950bc !important;}


#header{position: fixed;top: 0;left: 50%;z-index: 100;width: 100%;max-width: 100%;transform: translateX(-50%);}
#header .inner{display:flex;align-items:center;justify-content: flex-end;height:60px;}
#header .logo{}
#header .logo a{display:flex;align-items:center;justify-content:center;font-size: 24px;font-weight: 700;color: #111;}
#header .logo img{display:block;width: 100%;object-fit: contain;}
#header .language{display: flex;align-items: center;gap: 20px;padding: 0 20px;border-radius: 40px;background: rgb(72 66 55 / 40%);backdrop-filter: blur(3px);height: 40px;}
#header .language > a{display:flex;align-items:center;justify-content:center;line-height: 1;font-size: 14px;font-weight:500;color: #fff;opacity: 0.4;}
#header .language > a.on{opacity:1;}

#main{}
#main .inner{}
#main .section{position:relative;overflow: hidden;}
#main .header{position:relative;margin:0 0 50px;display:flex;flex-direction:column;align-items:flex-start;}
#main .header .sub{margin: 0 0 20px;display:flex;align-items:center;justify-content:center;line-height: 1.5;font-size: 20px;font-weight: 700;color: #484237;}
#main .header .tit{line-height: 1.4;font-size: 40px;font-weight: 700;color: #484237;margin: 0 0 20px;}
#main .header .txt{line-height: 1.4;font-size: 25px;font-weight:400;color: #484237;word-break: keep-all;margin: 0 0 20px;}
#main .header > div:last-of-type{margin-bottom:0;}

#main .visual{padding: 120px 100px;}
#main .visual .flex{position:relative;z-index:1;display:flex;align-items:center;margin: 0 auto;width: 100%;}
#main .visual .cont{flex:1;display:flex;flex-direction:column;gap:60px;}
#main .visual .text{position: relative;z-index: 2;display: flex;flex-direction: column;gap: 25px;align-items: flex-start;margin: 0 0 80px;}
#main .visual .text .label{line-height: 1.5;font-size: 24px;font-weight: bold;color: #484237;background: #ece6df;padding: 8px 15px;}
#main .visual .text .title{line-height: 1.4;font-size: 60px;font-weight: 700;color: #484237;word-break: keep-all;}
#main .visual .desc{line-height: 1.25;font-size: 24px;font-weight: 500;color: #484237;word-break: keep-all;}
#main .visual .button{display: flex;gap: 10px;}
#main .visual .button > a{display: flex;align-items: center;justify-content: center;text-align: center;padding: 0 50px;height: 60px;border-radius: 4px;font-size: 20px;font-weight: 500;color: #fff;border: 1px solid #7f674d;background: #7f674d;}
#main .visual .image{flex:0 0 auto;width: 495px;max-width: 100%;display:flex;align-items:center;justify-content:center;}
#main .visual .image img{max-width:100%;height:auto;}
#main .visual .background{position:absolute;z-index:0;pointer-events:none;inset:0;overflow:hidden;}
#main .visual .background:before{content:'';position:absolute;inset:0;background: rgb(255 255 255 / 80%);z-index:2;pointer-events:none;}
#main .visual .background img{width:100%;height:100%;object-fit:cover;}
#main .visual .background.init{transform:translate(0) !important;}
#main .visual .background.init img{transform:scale(1.1);transition:all 5s;}
#main .visual .background.init.animate img{transform:scale(1);}

#main .company{padding: 120px 0;background: #f9f6f0;}
#main .company .flex{display:flex;gap: 100px;}
#main .company .text{flex: 6;padding: 100px 0;}
#main .company .text ul{display:flex;gap:15px;flex-direction: column;}
#main .company .text li{padding:25px;border: 1px solid #ddd8cd;border-left: 5px solid #d3c5b6;border-radius: 10px;}
#main .company .text li .tit{line-height: 1;font-size: 24px;font-weight: bold;color: #484237;}
#main .company .text li .txt{margin: 15px 0 0 0;line-height: 1.25;font-size: 18px;font-weight: 400;color: #9e9388;word-break: keep-all;}
#main .company .image{flex: 5;height: auto;aspect-ratio: 58 / 86;}
#main .company .image img{width:100%;height:100%;object-fit:cover;border-radius: 10px;}

#main .solution{padding: 120px 0;background: #f9f6f0;}
#main .solution .header .sub{padding:8px 24px;border:1px solid #484237;border-radius:10px;}
#main .solution .content{
    flex: 1;
    padding: 50px 50px 50px 0;
}
#main .solution .inner{position:relative;display: flex;}
#main .solution .flex{display:flex;justify-content:space-between;}
#main .solution .list{flex: 1;}
#main .solution .list ul{
    display: flex;
    flex-direction: column;
}
#main .solution .list li{display: flex;align-items:center;gap: 20px;justify-content: flex-start;}
#main .solution .list li .ico{display:flex;align-items:center;justify-content:Center;}
#main .solution .list li .ico img{width:auto;max-width:100%;}
#main .solution .list li .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .solution .image{flex: 1;display: flex;align-items: center;justify-content: flex-start;}
#main .solution .image img{max-width:100%;height:auto;}
#main .solution .background{flex: 0 0 auto;height: auto;aspect-ratio: 58 / 86;}
#main .solution .background img{width:100%;height:100%;object-fit:cover;}

#main .product{background: #f9f6f0;}
#main .product .header .sub{padding: 8px 16px;border-radius:10px;background: #ece6df;font-size: 18px;}
#main .product .header .txt{font-size: 40px;margin: 0 0 10px;}
#main .product .flex{display:flex;align-items: center;justify-content:space-between;gap: 50px;}
#main .product .flex.reverse{flex-direction:row-reverse;}
#main .product .content{flex: 1;padding: 50px;}
#main .product .image{flex: 0 0 auto;width: 578px;max-width: 100%;height: auto;aspect-ratio: 58 / 87;overflow: hidden;display: flex;align-items: center;justify-content: center;}
#main .product .image img{width:100%;height:100%;object-fit:cover;display:block;}
#main .product .info{display:flex;flex-direction:column;}
#main .product .text{line-height: 1.4;font-size: 24px;font-weight: 400;color: #484237;word-break: keep-all;}
#main .product .button{display: flex;gap: 10px;margin: 50px 0 0;}
#main .product .button > a{display: flex;align-items: center;justify-content: center;text-align: center;padding: 0 50px;height: 60px;border-radius: 4px;font-size: 20px;font-weight: 500;color: #fff;border: 1px solid #7f674d;background: #7f674d;}

#main .quality{padding: 120px 0;background:#f9f6f0;}
#main .quality .list{}
#main .quality .list ul{display:flex;gap:15px;flex-wrap:wrap;}
#main .quality .list li{flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;}
#main .quality .list li .num{line-height: 2;font-size: 40px;font-weight: bold;color: #484237;}
#main .quality .list li .tit{margin: 0 0 10px;line-height: 1.25;font-size: 25px;font-weight: 600;color: #484237;}
#main .quality .list li .txt{line-height: 1.25;font-size: 18px;font-weight: 400;color: #484237;word-break: keep-all;}
#main .quality .image{margin: 50px 0 0 0;display: flex;align-items: center;justify-content: center;}
#main .quality .image .img{flex:1;display:flex;align-items:center;justify-content:center;}
#main .quality .image .img img{max-width:100%;height:auto;}

#main .mall{}
#main .mall .content{position:relative;z-index:1;padding: 120px 0;}
#main .mall .background{position:absolute;z-index:0;pointer-events:none;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
#main .mall .background:before{content:'';position:absolute;inset:0;background: rgb(255 255 255 / 70%);z-index:2;pointer-events:none;}
#main .mall .background img{width:100%;height:100%;object-fit:cover;}
#main .mall .title{line-height: 1.4;font-size: 50px;font-weight: 800;color: #484237;word-break: keep-all;margin: 0 0 20px;}
#main .mall .text{line-height: 1.25;font-size: 35px;font-weight: 400;color: #484237;word-break: keep-all;}
#main .mall .button{margin: 100px 0 0 0;display: flex;align-items: center;justify-content: flex-start;}
#main .mall .button a{display: flex;align-items: center;justify-content: center;text-align: center;padding: 0 50px;height: 60px;border-radius: 4px;font-size: 20px;font-weight: 500;color: #fff;border: 1px solid #7f674d;background: #7f674d;}
#main .mall .desc{line-height: 1.5;font-size: 28px;font-weight: 700;color: #484237;word-break: keep-all;margin:100px 0 50px;}
#main .mall .info{padding:40px;background: #bc8f00;display: inline-flex;flex-direction:column;gap:20px;text-align: left;}
#main .mall .info dl{display:flex;gap: 5px 20px;line-height:1.5;font-size:20px;color:#000;}
#main .mall .info dt{font-weight:700;flex: 0 0 auto;}



@media (max-width:1024px){

    #wrap .inner{max-width:calc(100% - 32px);}

    #main .section{padding: 60px 0;}
    #main .section.product{}
    #main .section.product .inner{width:100%;max-width:100%;}
    #main .header{margin:0 0 40px;}
    #main .header .sub{font-size:16px;}
    #main .header .tit{margin: 0 0 15px;font-size: 24px;}
    #main .header .txt{margin: 0 0 15px;font-size:18px;}

    #main .visual{}
    #main .visual .flex{flex-direction:column;align-items: stretch;}
    #main .visual .image{order:1;width: 100%;}
    #main .visual .text{margin: 0 0 30px;}
    #main .visual .text .label{font-size: 16px;}
    #main .visual .text .title{font-size:30px;}
    #main .visual .desc{font-size: 18px;}
    #main .visual .button > a{padding: 0 25px;height: 50px;font-size:16px;}

    #main .company .flex{flex-direction:column;gap:50px;align-items:stretch;}
    #main .company .image{flex: 1;width:100%;height:auto;aspect-ratio:2/1;}
    #main .company .text{padding:0;}
    #main .company .text li{padding:20px;}
    #main .company .text li .tit{font-size:20px;}
    #main .company .text li .txt{font-size:16px;}

    #main .solution{}
    #main .solution .header .sub{padding:5px 10px;font-size:14px;border-radius:6px;}
    #main .solution .flex{align-items: flex-start;flex-direction: column;}
    #main .solution .inner{flex-direction:column;}
    #main .solution .content{padding:0;margin: 0 0 40px;}
    #main .solution .image{width:100%;display:flex;align-items:center;justify-content:center;}
    #main .solution .image img{width:200px;max-width:100%;}
    #main .solution .list{margin:0 0 40px;}
    #main .solution .list ul{display:flex;gap: 40px 15px;flex-direction: row;flex-wrap: wrap;}
    #main .solution .list li{flex-direction:column;align-items:center;text-align:center;gap: 10px 15px;flex: 0 0 auto;width: calc(25% - 12px);}
    #main .solution .list li .tit{font-size:16px;}
    #main .solution .background{margin: 0 -16px;}

    #main .product{}
    #main .product .flex{flex-direction:column;gap: 40px;}
    #main .product .flex.reverse{flex-direction:column;}
    #main .product .image{flex:1;width:100%;aspect-ratio: 1/1;}
    #main .product .content{flex:1;width:100%;padding: 0 16px;}
    #main .product .header{margin:0 0 25px;}
    #main .product .header .sub{margin: 0 0 10px;font-size:16px;}
    #main .product .header .txt{margin: 0 0 5px;font-size:30px;}
    #main .product .header .tit{margin: 0 0 5px;font-size: 30px;}
    #main .product .text{font-size:18px;}
    #main .product .text br{display:none;}
    #main .product .button > a{height:50px;padding:0 25px;font-size: 16px;}

    #main .quality{}
    #main .quality .list ul{flex-direction:column;align-items: center;}
    #main .quality .list li{display:flex;flex-direction:column;align-items:center;justify-content:center;padding: 20px;width: 220px;max-width:100%;height:auto;aspect-ratio:1/1;border-radius:50%;background:rgb(255 255 255 / 50%);}
    #main .quality .list li .num{font-size:24px;}
    #main .quality .list li .tit{font-size:18px;}
    #main .quality .list li .txt{font-size:16px;}
    #main .quality .image{margin:40px 0 0 0;flex-direction:column;align-items:stretch;}

    #main .mall{text-align:center;}
    #main .mall .content{padding:0;}
    #main .mall .title{font-size:30px;}
    #main .mall .text{font-size:18px;}
    #main .mall .button{margin: 40px 0 0;justify-content:center;}
    #main .mall .button > a{height:50px;padding:0 25px;font-size: 16px;}
    #main .mall .desc{margin: 60px 0 30px;font-size:20px;}
    #main .mall .info{padding:20px;}
    #main .mall .info dl{font-size:16px;}
}