#wrap {z-index: 4;}

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box{font-size:45px;text-transform:uppercase;font-weight:600;line-height:120%;letter-spacing: 2.5px;margin-bottom: 10px;}
section .h2_title{font-size:26px;color:#2b2a2a;letter-spacing:4px;font-weight:500;position:relative;line-height: 1.5;}
section .h2_title:before{content:'';position:absolute;width:30px;height:1px;bottom:-45px;background:var(--secondary)}
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%); }

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li {width: 210px;display: block;}
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }


/* about_area */
#about_area{padding:11vw 0 0;position:relative;z-index:0;background: var(--primary);}
#about_area:before{content:'';position: absolute;width: 200px;height: 165px;background: var(--secondary);top: 0;right: 0;}
#about_area .workframe{width:80%;display:flex;flex-wrap:wrap;align-items:center;margin-left: 200px;}
#about_area .workframe:before{content:'';position:absolute;width: 70%;height: 107%;background:#fff;bottom: 0;right:0;z-index:-5}
#about_area #about_img{margin:0;width:64%}
#about_area #about_info{margin-left:27px;margin-right:0}
#about_area .title_box{color:var(--secondary);width:100%}
#about_area article p{position:relative;margin-top:100px;margin-bottom:50px;line-height:180%;font-weight:400;text-align: justify;}
#about_area  .more_btn{position:absolute;left:-24%}
#about_area .deco01{position:absolute;bottom:20%;left:4%}
#about_area .deco02{position:absolute;top: 8%;right:15%}
#about_area #fakeNumber {position: absolute;z-index: 6;left: calc(6% - 10px);top: calc(55% + 60px);}
#about_area #fakeNumber ul{display:flex;}
#about_area #fakeNumber li{background: #fff;box-shadow: 10px 10px 40px rgb(51 49 50 / 10%);width: 180px;aspect-ratio: 1/1;display: flex;align-items: center;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;justify-content: center;}
#about_area #fakeNumber .eva >div {display: flex;align-items: baseline;gap: 5px;}
#about_area #fakeNumber .eva >div b{color: var(--triadic2);font-size: 49px;font-weight: 600;line-height: 1;font-family: "Fira Sans", sans-serif;}
#about_area #fakeNumber .eva >div span{word-spacing: 100vw;font-size: 20px;font-weight: 400;line-height: 1.5;}
#about_area #fakeNumber p{font-size: 17px;margin-top: 10px;letter-spacing: 1px;}

/* custom_area */
#custom_area{padding:0;display: grid;grid-template-columns: 35% 65%;align-items: center;background: var(--primary);}
#custom_area .Bg {height: 100%;}
#custom_area .Bg img{hei.ght:100%;object-fit: cover;height: 100%;}
#custom_area .Rbox {padding: 2vw 10% 6vw;position: relative;}
#custom_area .Rbox:after{content:'';width: 100%;height: 68%;position: absolute;bottom: 0;left: 0;background: var(--white);z-index: -1;}
#custom_area ul{display:grid;grid-template-columns: repeat(6, 1fr);gap: 10px;margin-top: 170px;}
#custom_area ul li{position:relative;}
#custom_area ul li:not(:nth-child(6n)):before{width: 50px;height:1px;border-top:1px dotted #bbbbbb;position:absolute;top:50%;content:"";right: -25px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
#custom_area ul li >div{display:flex;flex-direction: column;align-items: center;}
#custom_area ul li .num{font-family: "Fira Sans", sans-serif;margin-bottom: 20px;color: var(--triadic2);font-weight: 600;}
#custom_area ul li .clip{text-align:center;}
#custom_area ul li .clip img {width: 70px;aspect-ratio: 1/1;object-fit: contain;-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(50%);}
#custom_area ul li .h3 {letter-spacing: .5px;margin: 20px 0 0;font-size: 15px;text-align: center;}
#custom_area ul li num { font-weight: 300; font-size: 14px; overflow: hidden; margin: 10px 0 60px; height: 66px; text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* news_area */
#news_area li .img_box {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 .boxx {margin-top: 100px;}
#book_area .titlebox{position:relative;margin: 0 40px;}
#book_area .titlebox .btn{position:absolute;bottom: 0;right: 0;padding: 0;}
#book_area .titlebox .btn a{font-size: 15px;margin: 0 20px;font-weight: 500;letter-spacing: 1px;border-bottom: 1px solid var(--primary);padding-bottom: 15px;}
#book_area .titlebox .btn a:hover{color: var(--secondary);border-bottom: 1px solid var(--secondary);}
#book_area li {margin: 0 35px;display: flex;justify-content: center;align-items: flex-start;flex-direction: column;}
#book_area li span{font-family: "Fira Sans", sans-serif;display: flex;align-items: center;width: 100%;gap: 30px;font-weight: 600;letter-spacing: 2px;color: var(--secondary);font-size: 14px;margin-bottom: 10px;}
#book_area li span:after{content:'';width: 80%;height: 1px;background: rgba(0, 0, 0, 0.1);}
#book_area li .img_box{width:100%;margin-bottom: 20px;}
#book_area li .img_box img{aspect-ratio:4/3}
#book_area li .img_box:before{content:'';position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;z-index: 2;background: linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(235 227 213 / 90%));}
#book_area li:hover .img_box:before{opacity: .8;}
#book_area li .h3 {height: auto;font-size: 18px;letter-spacing: 1px;z-index: 3;font-weight: 500;}
#book_area li p {height: auto;font-size: 14px;letter-spacing: 1px;z-index: 3;font-weight: 300;-webkit-line-clamp: 2;color: #939391;margin-top: 10px;}
#book_area li >a{z-index:10}

/* photo_area */
#photo_area{overflow:hidden}
#photo_area > div{display:flex;width:max-content;animation:scroll 80s linear infinite}
#photo_area .item{width: 200px;height: 70px;padding:0 30px;flex-shrink:0;text-align: center;}
#photo_area .item img{height:100%;object-fit:contain;pointer-events:none}

@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media screen and (max-width: 1680px) {
    #about_area .workframe{margin-left:150px;gap: 30px;}
}
@media screen and (max-width: 1460px) {
    #custom_area .Rbox{padding: 2vw 5% 6vw;}
    #custom_area{grid-template-columns: 25% 75%;}
    #about_area .workframe{width:90%;margin: 0 auto;}
    #about_area .deco02{top: 3%;}
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#product_list { width: 500px; margin-left: 30px; }
	#product_list li .clip { height: 590px; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (max-width: 1400px) {
    #about_area .deco02{top: -2%;}
    #book_area li span:after{width: 75%;}
}
@media screen and (max-width: 1280px) {
    #about_area .more_btn{position:relative;left: unset;}
    #about_area #fakeNumber{top: calc(40% + 60px);}
    #about_area #about_img{width:80%}
    #about_area #about_info{width:100%}
}
@media screen and (max-width: 1024px) {
    #custom_area ul li:nth-child(6n):before{width:50px;height:1px;border-top:1px dotted #bbbbbb;position:absolute;top:50%;content:"";right:-25px;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
    #custom_area ul{grid-template-columns: repeat(4, 1fr);}
    #book_area li span:after{width: 70%;}
    #about_area #about_img{width:100%}
    #custom_area{grid-template-columns:1fr}
    #custom_area .Bg{order: 2;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #custom_area .Rbox:after{height: 74%;}
    #about_area #fakeNumber{top: calc(20% + 60px);}
	section { padding: 10vw 0; }
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#about_area #about_info {width: 90%;margin: 0 auto 10%;}
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
}
@media screen and (max-width: 760px) {
    #about_area #fakeNumber li{padding: 0 20px;}
	section .clip img, #custom_area .Bg img{height: auto;}
    #custom_area .Rbox:after{height: 82%;}
    #custom_area ul li:nth-child(2n):before{display:none;}
    #custom_area ul{grid-template-columns: repeat(2, 1fr);}
    #book_area .boxx{margin-top: 40px;}
    #book_area .titlebox, #book_area li{margin:0 15px;}
    #book_area .titlebox .btn{position:relative;margin-top: 90px;}
    #book_area .titlebox .btn a{margin: 0 5px;}
    section .h2_title{font-size: 20px;}
    #about_area #fakeNumber p{font-size: 12px;letter-spacing: 0;}
    #about_area #fakeNumber .eva >div b{font-size:35px;}
    #about_area #fakeNumber{top: calc(-10% + 60px);left: auto;right: calc(-5% - 10px);}
    #about_area #fakeNumber ul{display:flex;flex-direction: column;}
    #about_area #fakeNumber li{width: 130px;justify-content: flex-start;}
    #about_area:before{width: 290px;}
    #about_area .workframe:before, #about_area .deco02{display:none;}
	section { padding: 15vw 0 ; }
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
}
@media screen and (max-width: 550px) {
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .clip { height: 100vw; }
	#product_list li .info_box { width: 55vw; height: 40vw; }
	#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; }
}