#wrap {z-index: 10;}

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .entitle_box {font-size: 60px;display: flex;gap: 12px;font-family: "Karla", sans-serif;font-weight: 500;letter-spacing: -1px;line-height: 1.6;}
section .entitle_box span{font-size: 60px;background: linear-gradient(90deg, var(--primary), var(--secondary));-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-family: "Karla", sans-serif;font-weight: 500;letter-spacing: -1px;line-height: 1.6;}
section .title_box {padding-bottom: 3vw;font-size: 30px;letter-spacing: 3px;font-weight: 600;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.fly-wrapper{transition:unset;-webkit-transition:unset;}

/* videobox */
#videobox{position:absolute;left: 4.5%;top: -13vw;}
#videobox video{aspect-ratio: 184 / 105;width: 48vw;}

/* product_area */
#product_area{border-bottom:1px solid rgb(54 54 54 / 15%)}
#product_area:before{content:url(/images/44/Object.png);position: absolute;right: 0;top: -25px;}
#product_area .bg_box {width: 11vw;background: linear-gradient(180deg, var(--primary), var(--secondary));z-index: -1;top: unset;bottom: 0;height: calc(100% + 85px);}
#product_area .tit{width: 42%;margin: 0 0 50px auto;}
#product_area:after{content: "";width: 1px;height: 100%;display: block;background: rgb(54 54 54 / 15%);position: absolute;top: 0;right: 100px;z-index: -1;pointer-events: none;}
#product_area .workframe{width: min(75%, 1350px);transform: translateX(45px);}
#product_list li{margin: 25px;box-shadow: 0 0 20px rgb(0 0 0 / 10%);outline: 1px solid rgb(0 0 0 / 15%);outline-offset: -15px;padding: 50px 30px;display: flex;flex-direction: column;align-items: center;gap: 5px;}
#product_list li:hover{outline-color:#1f5e4b}
#product_list li .clip{width: 110px;aspect-ratio: 1/1;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(135%);}
#product_list li:hover .clip{filter:unset}
#product_list li .h3{font-size:20px;height: auto;letter-spacing: 1px;font-weight: 500;margin-top: 15px;}
#product_list li p{color:#8e8e8e;font-family: "Karla", sans-serif;font-size: 14px;text-align: center;height: auto;line-height: 1;text-transform: uppercase;}
#product_area .arrowBox{display:flex;align-items: center;justify-content: flex-end;gap: 12px;position: absolute;right: 0;transform: translateY(63px);}
#product_area .arrowBox a:not(.more_btn){background: var(--primary);width: 66px;aspect-ratio: 1/1;border-radius: 50px;display: inline-flex !important;align-items: center;justify-content: center;position: relative;}
#product_area .arrowBox a svg{width:15px;height:15px}
#product_area .arrowBox a#product_prev svg{transform:scaleX(-1);}
#product_area .arrowBox a#product_next{right:0}
#product_area .arrowBox a:hover{background: var(--secondary);}

/* about_area */
#about_area {z-index: 5;padding: 9vw 0 0;margin-bottom: 6vw;}
#about_area:before{content:url(/images/44/aleftbg.png);position: absolute;z-index: -1;top: 370px;left: calc(11% - 1px);}
#about_area:after{content: "";width: 1px;height: calc(100% + 6vw);display: block;background: rgb(54 54 54 / 15%);position: absolute;top: 0;right: 100px;z-index: -1;pointer-events: none;}
#about_area .fixTxt{left: 15%;top: 30%;}
#about_area .bg_box {width:50%;z-index: -1;right: 0;left: unset;height: calc(100% + 6vw);}
#about_area .bg_box:before{content:url(/images/44/wooJ.png);position: absolute;transform: translateX(-212px);}
#about_area .workframe{width: 100%;display: grid;grid-template-columns: 50% 43%;justify-content: space-between;}
#about_area .tit{position:relative;}
#about_area .pageh1{word-break: keep-all;line-height: 1.8;font-size: 35px;letter-spacing: 2px;padding: 10px 15% 60px;border-bottom: 1px solid rgb(39 39 39 / 15%);}
#about_area .atitle_box {position:absolute;writing-mode: vertical-lr;font-family: "Karla", sans-serif;font-size: 18px;color: var(--primary);font-weight: 500;display: flex;flex-direction: row;align-items: center;left: 15%;padding-top: 35px;height: 100%;border-right: 1px solid rgb(39 39 39 / 15%);}
#about_area .atitle_box:before{content:'';display: block;width: 65px;height: 9px;background: linear-gradient(90deg, var(--primary), var(--secondary));top: -44px;position: relative;}
#about_info .info{margin: 80px 28% 0 23%;display: flex;flex-direction: column;align-items: flex-start;gap: 90px;}
#about_info article *{text-align:justify;line-height: 2;}

/* book_area */
#book_area{padding-top:3vw}
#book_area:before{content:'';width: 530px;height: 250px;background: white;position: absolute;top: 0;right: -240px;transform: skewX(45deg);}
#book_area .bg_box {width: calc(100% - 100px);z-index: -1;}
#book_area .workframe{width: 115%;margin-left: -29%;}
#book_area .title_box { line-height: 1.8; font-size: 35px; letter-spacing: 2px; padding: 10px 8% 56px; border-bottom: 1px solid rgb(39 39 39/15%); word-spacing: 100vw; margin-bottom: 5vw; }
#book_area .subtitle_box {position:absolute;writing-mode: vertical-lr;font-family: "Karla", sans-serif;font-size: 18px;color: var(--primary);font-weight: 500;display: flex;flex-direction: row;align-items: center;right: 100px;padding-top: 35px;height: 100%;border-left: 1px solid rgb(39 39 39 / 15%);top: calc(27% + 6px);}
#book_area .subtitle_box:before{content:'';display: block;width: 65px;height: 9px;background: linear-gradient(90deg, var(--primary), var(--secondary));top: -44px;position: relative;}
#book_area #casevideobox{position:absolute;width: min(90%, 1080px);height: 424px;overflow: hidden;bottom: 0;z-index: 0;}
#book_area #casevideobox video{width:100%;filter: saturate(80%);}
#book_area li{margin: 0 15px;}
#book_area li .infoo{bottom:0;background: rgb(0 0 0 / 60%);width: 100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding: 20px 50px;display: grid;align-items: center;justify-content: space-between;grid-template-columns: 1fr 130px;gap: 0;}
#book_area li .infoo span{display:flex;align-items: center;justify-content: flex-end;color: white;font-family: "Karla", sans-serif;gap: 15px;}
#book_area li .infoo svg{width:13px;height: 13px;}
#book_area li .h3 {height: auto;font-size: 18px;color: white;letter-spacing: 1px;}

/* photo_area */
#photo_area .item {aspect-ratio: 1/1;width: 300px;margin: 0 4px;}
#photo_area .item img {object-fit: cover;height: 100%;width: 100%;border-radius: 35px;}
#photo_area , #photo_area *{transition:unset;-webkit-transition:unset;}

@media screen and (max-width: 1680px) {
    #about_area .fixTxt{top: 35%;}
    #about_area:before{top: 409px;left: calc(12% - 10px);}
    #about_info .info{margin: 80px 20% 0 30%;}
    #book_area:before{height: 242px;}
    #book_area .subtitle_box{top: calc(29% + 8px);}
}
@media screen and (max-width: 1460px) {
    #book_area #casevideobox{height: 305px;width: min(90%, 850px);}
    #book_area:before{height: 235px;}
    #book_area .subtitle_box{top: calc(30% + 8px);}
    #about_area:before{top: 388px;left: calc(14% - 27px);}
    #about_info .info{margin: 80px 20% 0 20%;}
    .fly-wrapper img{width: 80%;}
    #book_area .title_box{margin-bottom: 8vw;}
}
@media screen and (max-width: 1280px) {
    #book_area #casevideobox{height: 305px;width: min(90%, 850px);}
    #book_area:before{height: 230px;right: -248px;}
    #book_area .subtitle_box{top: calc(30% + 22px);}
    #about_area:before{top: 374px;left: calc(14% - 16px);}
}
@media screen and (max-width: 1024px) {
    #book_area #casevideobox{height: 215px;width: min(60%, 850px);}
    #book_area:before{height: 204px;right: -262px;}
    #book_area .subtitle_box{top: calc(26% + 22px);}
    #book_area .workframe{margin-left: -36%;}
    #product_area .arrowBox{transform: translateY(15px);}
    #about_area:before{top: 324px;left: calc(16% - 21px);}
    #product_area:after{display:none;}
    #about_area .atitle_box{height:80%}
    #about_area .atitle_box{border:0;left: 5%;}
    #product_area:before{zoom: 70%;right: -120px;}
    #about_area .pageh1, #book_area .title_box{font-size:30px;}
    .fly-wrapper img{width: 70%;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
	#about_area #about_info {z-index: 10;margin-top: 46vw;}
    #photo_area >div{transform: translateY(-40px);}
    #book_area .workframe{width:90%;margin: 0 auto;}
    #book_area{padding-top: 7vw;}
    #product_area .workframe{width:90%;transform: translateX(0);}
    #product_area .arrowBox{position:relative;margin-top: 10px;justify-content: center;}
    #videobox{position:relative;left: 0;top: 0;}
    #videobox video{width:100%}
    #about_area{position:unset;margin: 0;}
    #book_area .bg_box{width:100%}
    #about_area:after, #product_area .bg_box, #book_area:before, #book_area .subtitle_box, #book_area #casevideobox{display:none;}
    #about_info .info{margin: 10px 10% 7vw;gap: 40px;}
    #about_area .fixTxt{display:none;}
    #about_area:before{top: unset;left: 0;bottom: calc(16% + 54px);}
    #about_area .atitle_box:before{top: -36px;}
    #about_area .pageh1{padding: 10px 5% 60px;}
    #about_area .pageh1, #book_area .title_box{font-size:28px;}
    #book_area .title_box{border:0;margin: 0;}
    #about_area .workframe{display: flex;flex-direction: column;align-items: stretch;gap: 20px;}
    #about_area .bg_box{width: 100%;background-position: bottom;background-size: 100%;z-index: -3;height: 142vh;bottom: 0;top: unset;}
    #about_area .bg_box:before{right:0;transform: translateX(0);zoom: 80%;}
    .fly-wrapper img{margin:0 auto;}
	section { padding: 10vw 0; }
	#product_area .tit{width:90%;margin: 0 auto;}
    #book_area li .infoo{padding: 25px 30px;}
}
@media screen and (max-width: 760px) {
    #book_area li .infoo span{font-size:13px;}
    #book_area li .h3{font-size:16px;}
    #book_area li svg{aspect-ratio:1/1}
    #about_area .pageh1{font-size: 26px;}
    #book_area .title_box{font-size: 23px;padding: 10px 8% 36px;}
    section .entitle_box, section .entitle_box span{font-size: 50px;}
    #product_area:before{zoom: 37%;right: -120px;top: -52px;}
    #product_area{padding-top:8vw}
    #about_area:before{bottom: calc(10% + 56px);}
    #about_area .bg_box{height: 143vh;}
	#about_area .bg_box:before{zoom: 50%;}
    #about_area #about_info {margin-top: 63vw;}
    #photo_area .item{width: 210px;}
    .fly-wrapper img{width: 85%;height: 457px;object-fit: contain;}
	section { padding: 15vw 0 ; }
	section .clip img { height: auto; }	
}