#wrap { z-index: 5; }

/* section */
section { padding: 5vw 0 2vw; }
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 50px;font-weight: 400;}
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%); }
section .more_btn {border: 2px var(--secondary) solid;border-radius: 2.4em;text-transform: uppercase;letter-spacing: 1px;font-weight: 400;}

/* product_list */
#product_area{padding:5vw 0;background-image:url(/images/44/productBg.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
#product_area .workframe{width: min(1400px,88%);}
#product_area .workframe .title_box *{color:#fff;}
#product_area .workframe .title_box .title{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;padding-bottom:.5vw;font-size:50px;font-weight:400}
#product_area .workframe .title_box .titletext{font-size:1.4rem}
#product_area .workframe .more_btn{background:#ffffff00;border: 2px #ffffff solid;}
#product_area .workframe .more_btn:hover{background:var(--primary);color:var(--white)}
#product_list ul{display:grid;grid-template-columns:repeat(4,1fr);gap:50px;margin:0 auto;place-items:center}
#product_list ul{display:grid;grid-template-columns:repeat(4,1fr);gap:50px;margin:0 auto;list-style:none;padding:0}
#product_list li.slick-slide{margin:10px}
#product_list li{display:flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;position:relative;cursor:pointer;transition:box-shadow 0.4s ease}
#product_list li .clip{background:#2c2c2c;width:100%;height:100%;border-radius:50%}
#product_list li img{aspect-ratio:1/1;width:100%;opacity:0.8;display:block;transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),opacity 0.4s ease}
#product_list li .info_box{position:absolute;z-index:2;pointer-events:none;transition:transform 0.4s ease}
#product_list li .info_box h3{font-size:26px;padding:10px 0;color:white;margin:0;text-shadow:0 2px 4px rgba(0,0,0,0.5);height: auto;}
#product_list li:hover{box-shadow:0 10px 25px rgba(0,0,0,0.3)}
#product_list li:hover img{opacity:1;transform:scale(1.15)}
#product_list li:hover .info_box{transform:translateY(-5px)}

/* about_area */
#about_area {padding-bottom: 5vw;z-index: 5;position: relative;}
#about_area:before{content:'';position: absolute;background: #ffffff;width: 100%;height: 80%;top: 0;}
#about_area .pageh1 {margin: 0 auto;font-weight: 400;font-size: 50px;margin-bottom: 3vw;text-align: left;line-height: 1.2;}
#about_area .title_box { padding-bottom: 0; }
#about_area .about_box{display:grid;grid-template-rows:repeat(2,1fr);grid-auto-flow:column;gap:50px 150px}
#about_area .about_box .img2{grid-row:1 / 3}
#about_area h2{font-size:45px;font-style:italic}
#about_area article{margin-bottom:30px;line-height:210%;letter-spacing:2px;font-weight:400}
#about_area .more_btn{border:2px var(--secondary) solid}
#about_area .more_btn:hover{border:2px var(--complement) solid}
#about_info{margin: auto;}
#about_info p { color: var(--secondary); font-size: 19px; letter-spacing: 1.5px; line-height: 1.8; }
/* custom_area */
#custom_area .workframe{width: 100%;}
#custom_area section{padding:0;}
#custom_area ul li >div {margin: auto;width: 100%;}
#custom_area ul li .clip {width: 100%;}
#custom_area ul li .clip img{height: min(770px , 90vh);width: 100%;}
#custom_area ul li .clip:before{content:'';background: rgb(0 0 0 / 5%);position: absolute;width: 100%;height: 100%;z-index: 1;}
#custom_area ul li .custom_box{display: flex;justify-content: flex-start;align-items: center;}
#custom_area ul li .custom_txt{display: flex;flex-direction: column;align-items: flex-start;gap: 50px;z-index: 9;left: 12vw;\: 70px;width: min(80% , 800px);}
#custom_area ul li .custom_txt h3 {margin: 0px 0 5px;font-size: 29px;color: #fff;line-height: 140%;font-weight: 700;text-align: left;font-family: "Montserrat", sans-serif;}
#custom_area ul li .custom_txt h3 .highlight{color:white;font-size: 22px;}
#custom_area ul li .custom_txt a.custom_btn {margin: 10px 0 5px;font-size: 16px;color: #212121;font-weight: 500;text-align: center;border: 2px #fff solid;width: fit-content;padding: 0 20px;transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;border-radius: 50px;background-color: white;}
#custom_area ul li .custom_txt a.custom_btn:hover{background:var(--primary);border: 2px var(--primary) solid;color: #fff;}
#custom_area .slick-prev{z-index:99;left: 0;background: rgb(0 0 0 / 30%);width: 3%;height: 100%;}
#custom_area .slick-prev:hover,#custom_area .slick-next:hover{background: rgb(0 0 0 / 60%);}
#custom_area .slick-prev:before{content:'';position: absolute;background-image: url(/images/44/left.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width:19px;height:33px;display:block;filter: brightness(100);left: 25%;top: 50%;}
#custom_area .slick-next{z-index:99;right: 0;background: rgb(0 0 0 / 30%);width: 3%;height: 100%;}
#custom_area .slick-next:before{content:'';position: absolute;background-image: url(/images/44/right.png);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;width:19px;height:33px;display:block;filter: brightness(100);right: 29%;top: 50%;}
#custom_area .workframe ul *{transition:unset;}
/* news_area */
#news_area li .img_box , #book_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time { width: 65px; font-weight: 400; font-size: 13px; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 { margin-top: 10px; height: 60px; line-height: 150%; font-size: 20px; -webkit-line-clamp: 2; }

/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area .workframe{width:90%;display:grid;grid-template-columns:repeat(2,1fr)}
#photo_area .workframe .item video{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover}

/* piece */
:root{--h:54vw;--h-max:520px;--bg:#9a7e6b;--label-bg:rgba(0,0,0,.35);--label-fg:#eee;--seam-color:rgba(0,0,0,.25);--skew-deg:12deg;--gap:60px;--radius:8px;--dur-in:.7s;--dur-close:.7s;--delay-right:.25s;--delay-close:.6s}
.fabric-reveal{position:relative;width: 100%;height:clamp(240px,var(--h),var(--h-max));overflow:hidden;background: #ffffff;isolation:isolate;margin: auto;padding: 0;}
.piece{position:absolute;inset:0;overflow:hidden;transform:translateZ(0)}
.piece img{width:100%;height:100%;object-fit:cover;filter:contrast(102%) saturate(102%);}
.piece--print{clip-path:polygon(
    0 0,calc(50% - var(--gap)/2) 0,calc(50% - var(--gap)/2 + 2%) 100%,0 100%
  )}
.piece--emb{clip-path:polygon(
    calc(50% + var(--gap)/2 - 2%) 0,100% 0,100% 100%,calc(50% + var(--gap)/2) 100%
  )}
.label{position:absolute;top:10%;left:3%;padding:.4em .7em;font-size:clamp(16px,2.2vw,22px);letter-spacing:.05em;color:var(--label-fg);background:var(--label-bg);backdrop-filter:blur(2px);border-radius: 1.4em;user-select:none}
.piece--emb .label{left:auto;right:3%}
.seam{position:absolute;inset:0;margin:0 auto;width:var(--gap);background:linear-gradient(
    90deg,transparent 0,var(--seam-color) 48%,var(--seam-color) 52%,transparent 100%
  );mix-blend-mode:multiply;transform:skewX(var(--skew-deg));pointer-events:none}
@keyframes slideInLeft{from{transform:translateX(-6%) scale(1.02);opacity:0}
to{transform:translateX(0)    scale(1);opacity:1}
}
@keyframes slideInRight{from{transform:translateX(6%) scale(1.02);opacity:0}
to{transform:translateX(0)  scale(1);opacity:1}
}
@keyframes closeGap{from{width:var(--gap)}
to{width:0}
}
@keyframes tightenClips{from{clip-path:polygon(0 0,calc(50% - var(--gap)/2) 0,calc(50% - var(--gap)/2 + 2%) 100%,0 100%)}
to{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}

}
@keyframes tightenClipsR{from{clip-path:polygon(calc(50% + var(--gap)/2 - 2%) 0,100% 0,100% 100%,calc(50% + var(--gap)/2) 100%)}
to{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
}
.fabric-reveal.play .piece--print{animation:slideInLeft var(--dur-in) ease-out both,tightenClips var(--dur-close) ease-in forwards var(--delay-close);}
.fabric-reveal.play .piece--emb{animation:slideInRight var(--dur-in) ease-out both var(--delay-right),tightenClipsR var(--dur-close) ease-in forwards calc(var(--delay-right) + var(--delay-close));}
.fabric-reveal.play .seam{animation:closeGap var(--dur-close) ease-in forwards calc(var(--delay-right) + var(--delay-close))}
.fabric-reveal{/* transform: skewX(calc(var(--skew-deg) * 1.35)); */}
.piece,.seam{transform:skewX(var(--skew-deg));}

@media (prefers-reduced-motion:reduce){
	.fabric-reveal.play .piece--print,.fabric-reveal.play .piece--emb,.fabric-reveal.play .seam{animation:none !important}
	.piece--print{clip-path:polygon(0 0,50% 0,50% 100%,0 100%)}
	.piece--emb{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%)}
	.seam{width:0}
}


@media screen and (max-width: 1460px) {
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (max-width: 1024px) {
    #product_list ul{grid-template-columns: repeat(2, 1fr);}
	#about_area .about_box {grid-template-columns: repeat(2, 1fr);gap: 50px;}
	#about_area #about_info{grid-column: 3/1;}
	#about_area .about_box .img2{grid-row: unset;}
	#about_area .pageh1{
    margin-bottom: 5vw;
}
	#product_list {margin-top: 20px;}
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
	#custom_area ul li .clip img{height: 350px;}
	#custom_area .slick-prev,#custom_area .slick-next{width:5%}
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
    #custom_area ul li .custom_txt{left:60px}
   #about_area{padding-bottom: 10vw;}
}
@media screen and (max-width: 768px) {
	section { padding: 8vw 0 2vw; }
	#about_area .about_box {gap: 40px;display: flex;flex-direction: column;}
	#about_area .about_box .img2{display:none;}
	#about_area .about_box img{width:100%;height:280px;object-fit:cover}
	#photo_area .workframe{grid-template-columns: repeat(1, 1fr);}
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
}
@media screen and (max-width: 640px){
    #product_list li .info_box h3{font-size:18px;}
    #product_list ul{gap: 20px;width: 100%;}
	section .title_box{font-size: 36px;}
	#custom_area ul li .clip img{height: 250px;}
	#custom_area ul li .custom_txt{gap: 10px;width: 80%;left: 60px;top: 40px;}
	#custom_area ul li .custom_txt h3,#custom_area ul li .custom_txt a.custom_btn{font-size: 22px;}
	#about_area .pageh1,#product_area .workframe .title_box .title{font-size: 36px;}
}
@media screen and (max-width: 550px) {
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#about_area #about_img { width: 80vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
 }
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
	#custom_area .slick-prev,#custom_area .slick-next{width: 10%;}
	#about_area .pageh1,#product_area .workframe .title_box .title{font-size: 27px;}
    #about_info p{
    font-size: 17px;
}
#product_area .workframe .title_box .titletext{
    font-size: 1.2rem;
}
    #product_area{
    padding: 12vw 0;
}

}