/* aboutBox */
#aboutBox .info{width: min(90%, 1160px);margin: 0 auto 50px;text-align: center;}
#aboutBox .entitle{word-spacing: 100vw;}
#aboutBox .title_box{padding-bottom:0;}
#aboutBox .advantage{background: #c7d0ca;padding: 3vw 0 10vw;}
#aboutBox .advantage h2{font-style:unset;text-align: center;display: flex;align-items: center;justify-content: center;position: relative;margin-bottom: 3vw;font-size: 45px;color: #fff;font-weight: 300;}
#aboutBox .advantage h2:after{content:'';width: 35%;position: absolute;height: 1px;background: #fff;right: 0;}
#aboutBox .advantage h2:before{content:'';width: 35%;position: absolute;height: 1px;background: #fff;left: 0;}
#aboutFour .slick-list{overflow:unset;}
#aboutFour li .contentBox{display:flex;flex-direction: column;align-items: center;}
#aboutFour li .contentBox .Img{text-align:center;border: 5px solid #fff;border-radius: 150px;}
#aboutFour li .contentBox img{width:100%;transition: all linear 0.3s;}
#aboutFour li:hover .contentBox .Img{transform: scale(0.95);}
#aboutFour li .Txt{margin-top:20px;}
#aboutFour li .Txt .step{font-size:23px;text-align: center;font-weight: 500;}
#aboutFour li .Txt h3{word-spacing: 100vw;text-align: center;font-size: 20px;font-weight: bold;line-height: 1.3;color: #603813;}
#aboutFour {position:relative;display: grid;grid-template-columns: repeat(4, 1fr);width: 85%;margin: 0 auto;gap: 0 60px;}

/* processBox */
#processBox{margin-top:3vw}
#processBox .workframe{width:min(90%, 1280px);text-align: center;}
#processBox .workframe p{display:inline-block;font-size: 20px;background: var(--primary);color: var(--white);padding: 20px 70px;margin-top: 40px;text-align: center;}
#processBox ul{display:grid;grid-template-columns: repeat(4, 1fr);align-items: start;}
#processBox li{position:relative;display: flex;flex-direction: column;align-items: center;margin: 30px;justify-content: center;}
#processBox li .num{position:absolute;font-family: "Barlow", sans-serif;font-size: 33px;width: 70px;aspect-ratio: 3 / 3;background: var(--primary);display: flex;align-items: center;justify-content: center;color: var(--white);border-radius: 50px;left: 0;z-index: 2;top: 10px;}
#processBox li:not(:last-child, :nth-child(4)):after{content:url(/images/44/triangle.png);position: absolute;right: -40px;}
#processBox li .item{border: 10px solid var(--secondary);width: 200px;aspect-ratio: 3 / 3;border-radius: 50%;display: flex;align-items: center;justify-content: center;position: relative;}
#processBox li .item:after{content:'';position: absolute;width: 100%;height: 100%;border: 10px solid #fff;border-radius: 50%;z-index: -1;left: 0;top: 0;}
#processBox li img{width:77px;aspect-ratio: 3 / 3;}
#processBox li h3{text-align:center;font-size: 22px;margin-top: 25px;font-weight: 500;line-height: 1.5;color: #603813;}
#processBox li:hover .item:after{top:-10px;left:-10px}

/* storeBox */
#storeBox{margin-top:5vw}
#storeBox .workframe{width:min(90%, 1240px);}
#storeBox .title_box{padding-bottom: 1vw;}
#storeBox .tt{position:relative;}
#storeBox .tt:after{content:url(/images/44/img-store.png);position: absolute;bottom: -90px;right: -180px;animation-name: store;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes store{0%{transform-origin:left bottom;transform:rotate(-3deg);}100%{transform-origin:left bottom;transform:rotate(3deg);}}
#storeBox .tt p{font-size: 24px;color: #603813;letter-spacing: 4px;padding-left: 25px;}
#storeBox .box{display:grid;padding-left: 25px;margin-top: 40px;grid-template-columns: 40% 55%;align-items: center;justify-content: space-between;}
#storeBox .info h3{font-size: 28px;font-weight: bold;margin-bottom: 30px;color: var(--primary);}
#storeBox .info p{letter-spacing: 1px;line-height: 2;color: #603813;}
#storeBox .photo img{aspect-ratio: 6 / 3;object-fit: cover;border-radius: 55px;}

@media screen and (max-width: 1400px){
    #aboutFour{margin-top:8vw}
}
@media screen and (max-width: 1280px) {
	#aboutBox .info{margin:0 auto;width: 100%;}
    #about_area article{width:100%;}
}
@media screen and (max-width: 1024px) {
    #storeBox .box{display: flex;flex-wrap: wrap;padding: 0;}
    #storeBox .box .info{width:100%;margin-top: 20px;}
    #storeBox .photo{order:-1}
    #processBox li:nth-child(2n):after{display:none;}
    #aboutFour{margin-top:10vw}
    #aboutBox .info{display:block;}
    #aboutFour li:nth-child(2),#aboutFour li:nth-child(3){margin-top: 0;}
    #processBox ul{grid-template-columns: repeat(2, 1fr);}
    #aboutFour {grid-template-columns: repeat(2, 1fr);gap: 60px;}

}
@media screen and (max-width: 768px) {
    #storeBox .tt:after{display:none;}
    #about_area article{width: auto;}
    #about_area .workframe:not(#about_area .advantage .workframe ){
    margin-right: 0;
}
}
@media screen and (max-width: 640px) {
    #processBox li:not(:last-child, :nth-child(4)):after{right:-20px}
    #processBox li .item:after{display:none}
    #processBox li h3{font-size:16px;margin-top: 10px;}
    #processBox li{margin: 10px;}
    #processBox li .num{width: 50px;font-size: 20px;}
	#processBox li .item{width: 120px;border: 7px solid var(--secondary);}
    #processBox li img{width: 45px;}
    #aboutFour{gap: 20px;}
    #aboutFour li:before{zoom: 80%;top: -100px;}
	#processBox{margin-top:10vw;}
    #processBox .workframe p{padding:20px;font-size: 18px;}
    #storeBox .photo img{aspect-ratio: 4 / 3;border-radius: 35px;}
}
@media screen and (max-width: 480px){
#aboutFour {grid-template-columns: repeat(1, 1fr);gap: 60px;}
}