#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {font-size: 23px;color: #53545e;font-weight: 400;display: flex;flex-wrap: wrap;align-items: center;position: relative;}
section .title_box:after{content:'';position: absolute;left: 0;height: 3px;width: 50px;background: var(--secondary);}
section .title_box:before{content:'';background: #4e4e4e;width: 120px;height: 1px;margin-right: 15px;}
section .h2title_box{font-family: "Cormorant Garamond", serif;color: #53545e;font-weight: 500;font-size: 73px;line-height: 1.5;}
section .h2title_box:first-letter{color:var(--secondary)}
section .ttiBox p{font-size: 21px;color: #53545e;}
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 .ttiBox {width: 85%;margin: 0 auto 50px;}
section .ttiBox .tt{position:relative;border-bottom: 1px solid #ddd;margin-bottom: 20px;display: flex;flex-direction: column;justify-content: center;}
section .ttiBox .tt:after{content:'';position: absolute;right: 0;width: 35px;height: 1px;background: var(--primary);bottom: -1px;}
section .ttiBox .tt a{position:absolute;right: 0;}

/* product_area */
#product_area{overflow:hidden;}
#product_area:before{content:url(../../images/44/leaf3.png);animation-name: leaf2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;position: absolute;zoom: 70%;bottom: -120px;right: -2%;}
#product_area:after{content:url(../../images/44/leaf2.png);animation-name: leaf2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;position: absolute;zoom: 70%;bottom: -120px;left: -7%;}
@keyframes leaf2{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#product_area .bg_box {z-index:-1;background-size: cover;background-position: 50%;}
#product_list ul {padding-bottom: 0;margin: 0;}
#product_list ul li {position: relative;margin: 20px;}
#product_list ul li img{width:100%;aspect-ratio: 5 / 3;}
section .nowrap_box.arrow_box {width: 90%;display: flex;justify-content: space-between;position: absolute;z-index: 20;left: 5%;top: calc(50% - 35px);padding: 0;}
section .arrow_box a {position: relative;box-sizing: border-box;width: 70px;height: 70px;display: flex !important;background: #c11576b8;border-radius: 50px;align-items: center;justify-content: center;}
section .arrow_box a svg{width: 30px;fill: var(--white);}
section .arrow_box a.prev {-webkit-transform: scaleX(-1);transform: scaleX(-1);}
#product_area ,#product_area *{transition: unset;    -webkit-transition: unset;}

/* about_area */
#about_area {background-image: url(../../images/44/aboutBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;}
#about_area:after{content:url(../../images/44/leaf.png);position: absolute;right: -20px;top: 15%;opacity: .75;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#about_area .serviceTitle{left:0;bottom: 5%;}
#about_area .serviceTitle.right{left:unset;right: 0;bottom: unset;top: 30px;}
#about_area .workframe{display:grid;grid-template-columns: 35% 50%;justify-content: space-between;align-items: end;}
#about_area article { margin-bottom: 30px; line-height: 210%; letter-spacing: 2px; font-weight: 400; }
#about_area .clip:after {content:'';width: 80%;height: 90%;position: absolute;z-index: -1;background: var(--primary);bottom: -30px;right: -20px;border-radius: 0 0 0 10px;}
#about_area #about_info{width: 65%;}
#about_area .abinfo{}
#about_area .abinfo h5{font-size:34px;color: #53545e;font-weight: 400;margin-bottom: 30px;}
#about_area .abinfo p{color:#53545e;font-size: 18px;text-align: justify;font-weight: 400;margin-bottom: 50px;}

/* custom_area */
#custom_area{background-image: url(../../images/44/customBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;padding-bottom: 4vw;position: relative;}
#custom_area ul li{margin: 15px;box-shadow: 0 0 15px rgb(0 0 0 / 10%);border-radius: 10px;overflow: hidden;background: #fff;}
#custom_area ul li .clip img {aspect-ratio: 3 / 3;width: 100%;height: auto;}
#custom_area ul li h3 {margin: 20px 0;font-size: 20px;color: #323232;font-weight: 400;}
#custom_area ul li article { 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; }

#custom_area .nowrap_box.arrow_box {width: 110%;display: flex;justify-content: space-between;position: absolute;z-index: 20;left: -5%;top: calc(50% - 35px);padding: 0;}


/* news_area */
#news_area{padding: 1.5vw 0;}
#news_area .workframe{width: min(90%, 1280px);}
#news_area li .info_box {display: grid;grid-template-columns: 80px 150px 1fr 50px;align-items: center;}
#news_area li .info_box p{font-family: "Roboto", sans-serif;font-size: 20px;font-weight: 500;}
#news_area li .info_box a{font-size:20px;}
#news_area li .info_box h3{font-size:20px;height: auto;margin: 0 30px;font-weight: 400;}
#news_area li .info_box span{width:50px;height:50px;background:var(--white);border-radius:50px;display: flex;align-items: center;justify-content: center;}
#news_area li .info_box span svg{width: 25px;height: 25px;}

/* book_area */
#book_area .workframe, #custom_area .workframe{width:85%;}
#book_area:before {content:url(../../images/44/linn.png);position: absolute;top: 237px;left: -82px;}
#book_area li{margin: 55px 0;}
#book_area li img {width: 100%;aspect-ratio: 3 / 3;object-fit: cover;}
#book_area .nowrap_box.arrow_box {width: 110%;left: -5%;}
#book_area .nowrap_box.arrow_box p{letter-spacing: 3px;}
#book_area .title{
    text-align: center;
    font-size: 21px;
    color: #53545e;
    margin-top: 10px;
}

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width: 1460px) {
	#about_area:after{zoom:80%;}
	#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: 1280px) {
	#about_area .workframe{grid-template-columns: 35% 57%;}
}
@media screen and (max-width: 1024px) {
	#book_area .nowrap_box.arrow_box{}
	#book_area .nowrap_box.arrow_box p{display:none;}
	#book_area:before{top: 172px;}
	section .h2title_box{font-size:60px;}
	#about_area .serviceTitle{bottom: 45%;}
	#about_area .clip:after{width: 50%;right: unset;left: 8%;}
	#about_area .workframe{display: block;}
	#about_area #about_info{width:100%;margin-top: 50px;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
	#product_list .nowrap_box.arrow_box{width: 85%;left: 7.5%;}
	#about_area #about_info { margin-bottom: 8vw; }
	#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) {
	#book_area ul{}
	#book_area .nowrap_box.arrow_box{top: calc(50% - 20px);}
	#book_area li.slick-current img, #book_area li img{aspect-ratio: 4 / 3;}
	#book_area li.slick-current, #book_area li{margin: 0;}
	#about_area .clip:after{width: 80%;left: unset;right: -6%;}
	#about_area .workframe{width:85%;}
	#about_area .abinfo p{font-size:16px;}
	section .title_box{font-size: 16px;margin-bottom: 10px;}
	#about_area .abinfo h5{font-size: 26px;}
	section .h2title_box{font-size: 35px;}
	#about_area:after{zoom: 35%;top: 54%;opacity: .85;}
	#about_area .serviceTitle{bottom: 51%;}
	#news_area{padding:20px 0;}
	#news_area li .info_box{grid-template-columns: 60px 1fr 50px;}
	#news_area li .info_box span{width: 35px;height: 35px;}
	#news_area li .info_box span svg{width:15px;height: 15px;}
	#news_area li .info_box h3{font-size: 16px;margin-left: 0;}
	#news_area li .info_box p{font-size:16px;}
	#news_area li .info_box a{display:none;}
	section {padding: 8vw 0;}
	section .ttiBox .tt a{display:none;}
}
@media screen and (max-width: 550px) {
	section .clip img{height:auto;}
	#custom_area ul li{margin:10px;}
    #custom_area{padding-bottom: 10vw;}
    section .ttiBox {margin: 0 auto 30px;}
	section .ttiBox p, #book_area:before,#book_area .title{display:none;}
	#product_list .nowrap_box.arrow_box,#custom_area .nowrap_box.arrow_box{top: calc(50% - 15px);}
	section .arrow_box a {width:35px;height: 35px;}
	section .arrow_box a svg{width:17px;height:17px;}
	#custom_area .nowrap_box.arrow_box,#book_area .nowrap_box.arrow_box{width: 100%;left: 0%;}
    #product_list ul li{margin:10px;}
	#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; }
}