section {position: relative;padding: 5vw 0;}
section >.bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: .3; }
section >.info { position: relative; font-size: 0; z-index: 2; }
section .title {text-align: center;font-size: 45px;font-weight: 600;letter-spacing: 1px;line-height: 1.5;font-family: "Anybody", sans-serif;font-style: italic;color: var(--secondary);}
section .title:first-letter{color:var(--primary)}
section .title:after{content:'';width: 15px;height: 13px;background: var(--primary);transform: skewX(-30deg);display: block;box-shadow: -22px 0 var(--primary), 22px 0 var(--primary);margin: 15px auto 40px;}
section .more {position: relative;width: 290px;overflow: hidden;}
section .more a {padding: 20px 20px;width: 210px;display: block;}
section .more a font {position: relative;font-size: 14px;color: white;z-index: 2;-webkit-transition-duration: .3s;transition-duration: .3s;text-transform: uppercase;}
section .more a span {position: absolute;width: 80px;height: 1px;background: #d9d9d9;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
section .more a span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #d9d9d9 transparent;right: -1px;bottom: 50%;content: "";}
section .more a:after {position: absolute;width: 100%;height: 100%;background: #4a4a4a;display: block;top: 0;left: -60px;content: "";z-index: 1;-webkit-transition-duration: .2s;transition-duration: .2s;transform: skewX(30deg);}
section .more a:hover{padding:20px 0px 20px 30px;}
section .more a:hover:after{left:-50px}
section .more a:hover span{right:10px;}

/* newsBox */
#newsBox { margin: -85px auto 0; padding: 0; width: 1280px; z-index: 110; }
#newsBox .info { padding: 30px 60px; display: flex; align-items: center; gap: 5px 3%; }
#newsBox .info .tit { width: 5em; }
#newsBox .info .tit a { color: #000; }
#newsBox .info .news_list { width: 1%; flex: 1 1 auto; }
#newsBox .info .news_list .slick-list { overflow: visible; }
#newsBox .info .news_list li { position: relative; }
#newsBox .info .news_list .news_txt { position: relative; display: flex; align-items: center; gap: .5em 1em; }
#newsBox .info .news_list .news_txt .time { min-width: 6em; }
#newsBox .info .news_list .news_txt .txt { width: 1%; flex: 1 1 auto; }
#newsBox .info .news_list .news_txt a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#newsBox .info .news_list .noBox { position: absolute; width: 2em; text-align: center; top: 50%; right: -6em; -webkit-transform: translateY(-47%); transform: translateY(-47%); }
#newsBox .info .news_btn { position: relative; width: 9em; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
#newsBox .info .news_btn font { width: 5.5em; display: flex; justify-content: flex-end; }
#newsBox .info .news_btn font span { min-width: 2em; text-align: center; }
#newsBox .info .news_btn font span:nth-child(2) { min-width: 1.5em; }
#newsBox .info .news_btn #prevBtn { -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* productBox */
#productBox{background:#f7f7f7;margin-top: 50px;padding-bottom: 60px;}
#productBox:after{content:'';position: absolute;bottom: -1px;left: 60px;width: 100%;height: calc(25% + 7px);background: var(--white);transform: skewX(-30deg);z-index: 1;}
#productBox .bg {opacity: .5;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#productBox >.info {margin: 0 auto;width: min(70%, 1220px);}
#productBox ul {margin-top: 85px;}
#productBox ul li {position: relative;margin: 0 40px 20px;}
#productBox ul li:after{content:url(/images/37/product-img.jpg);position: absolute;bottom: -20px;z-index: -1;left: -20px;}
#productBox ul li a { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; z-index: 3; }
#productBox ul li .img img {position: relative;width: 100%;aspect-ratio: 1/1;object-fit: contain;z-index: 1;}
#productBox ul li .img{clip-path: polygon(40px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70px);background: #f5f5f5;}
#productBox ul li .info {overflow: visible;position: relative;padding: 25px 20px;width: 100%;background: #fff;z-index: 2;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;margin-top: -1px;}
#productBox ul li .info span{width: 85%;background: #ececec;height: 1px;display: block;margin: 10px 0 10px -20px;}
#productBox ul li .info:after{content:"";position:absolute;right:0px;bottom:0;border-bottom: 129px solid var(--primary);border-left: 60px solid transparent;text-indent:-9999px;width:0;height:0;-webkit-transition:all 0.8s;transition:all 0.8s;z-index:-1}
#productBox ul li:hover .info:after{border-bottom:200px solid var(--primary);border-left: 55px solid transparent;}
#productBox ul li .info .price { position: absolute; padding: 5px 15px; background: rgb(0 0 0 / .6); top: -39px; left: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#productBox ul li .info .price font { margin: 0 10px; display: inline-block; font-weight: 300; color: #fff; }
#productBox ul li .info .price font.old { color: rgb(255 255 255 / .4); }
#productBox ul li .info .h3 {height: auto;font-weight: 500;font-size: 19px;color: #4a4a4a;}
#productBox ul li:hover .info .h3{color:var(--primary)}
#productBox ul li .info article {height: auto;font-weight: 400;font-size: 15px;color: #9c9c9c;}
#productBox .btn{cursor:unset;position: absolute;bottom: calc(40% - 50px);display: flex;width: 132%;left: -16%;align-items: center;justify-content: space-between;padding: 0;z-index: -1;}
#productBox .btn a {padding: 10px 20px;width: 100px;display: block;position: relative;overflow: hidden;}
#productBox .btn a#product_prev{text-align:end;}
#productBox .btn a font {position: relative;font-size: 12px;color: white;z-index: 2;-webkit-transition-duration: .3s;transition-duration: .3s;text-transform: uppercase;}
#productBox .btn a span {position: absolute;width: 70px;height: 1px;background: #a5a5a5;display: block;right: 0px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
#productBox .btn a:hover span{right:10px;}
#productBox .btn a#product_prev span{right:unset;left:0}
#productBox .btn a#product_prev:hover span{left:10px;}
#productBox .btn a#product_prev span:before{transform:scaleX(-1);right: unset;left: -1px;}
#productBox .btn a span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #a5a5a5 transparent;right: -1px;bottom: 50%;content: "";}
#productBox .btn a:after {position: absolute;width: 100%;height: 100%;background: #4a4a4a;display: block;top: 0;left: -50px;content: "";z-index: 1;-webkit-transition-duration: .2s;transition-duration: .2s;transform: skewX(30deg);}
#productBox .btn a:hover:after{left:-40px;}
#productBox .btn a#product_prev:after{left:unset;right: -50px;transform: skewX(-30deg);}
#productBox .btn a#product_prev:hover:after{right: -40px;}

/* aboutBox */
#aboutBox {z-index: 5;}
#aboutBox .wire {position:absolute;width: 100%;height: 1px;background: #f0f0f0;bottom: 0;}
#aboutBox:after{content:url(/images/37/about-left.jpg);position: absolute;top: 0;left: 0;z-index: -2;}
#aboutBox:before {position: absolute;display: block;top: -69px;right: 0;z-index: 1;content: url(/images/37/about-rightBg.png);}
#aboutBox .fixTxt{position:absolute;bottom: -130px;right: -90px;z-index: 2;}
#aboutBox .bg {width: calc(70% + 95px);height: 100%;top: 0;right: 0;left: auto;opacity: 1;z-index: -1;background: white;}
#aboutBox .info {z-index: 10;display: grid;grid-template-columns: 50% 42%;width: min(90%, 1440px);margin: 0 auto;justify-content: space-between;}
#aboutBox .leftbox, #aboutBox .leftbox .photo{position:relative;}
#aboutBox .leftbox .photo:before {content:'';position: absolute;bottom: -55px;right: 10px;width: 150px;height: 150px;background: var(--primary);transform: skewX(-30deg);z-index: -1;}
#aboutBox .back{bottom: -170px;position:absolute;background-image: url(/images/37/about-backBg.jpg);background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;aspect-ratio: 107 / 130;left: -120px;z-index: -1;color: white;display: flex;align-items: flex-end;padding: 50px 90px 50px 60px;width: 320px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;font-size: 14px;font-style: italic;}
#aboutBox .info .title { margin: 0 5vw 2vw; text-align: left; }
#aboutBox .info .txtBox {position: relative;}
#aboutBox .info .txtBox article {width: 85%;margin-bottom: 70px;margin-*b: ;margin-*b: 0;}
#aboutBox .info .txtBox article p{line-height: 2;}

/* photo_area */
#photo_area{position:relative;}
#photo_area:after{content:'';background-image:url(/images/37/photoBg.jpg);background-position: bottom right;background-size: cover;background-repeat: no-repeat;width: 85%;height: 50%;position: absolute;bottom: 0;right: 0;z-index: -1;}
#photo_area .item {width: 405px;aspect-ratio: 81 / 61;}
#photo_area .item img {height: 100%;object-fit: cover;}

/* bookBox */
#bookBox .topBox { position: relative; margin: 0 auto 5vw; width: 80vw; }
#bookBox .topBox .title { position: absolute; }
#bookBox .topBox .more { text-align: right; }
#bookBox .list ul li .img { overflow: hidden; position: relative; margin: 0 40px 0 60px; z-index: 1; }
#bookBox .list ul li .img:before { position: absolute; width: 100%; height: 100%; background: rgb(240 244 247 / .6); display: block; top: 0; left: 0; opacity: 0; z-index: 2; content: ""; }
#bookBox .list ul li .img img { position: relative; width: 100%; height: 30vw; object-fit: cover; z-index: 1; }
#bookBox .list ul li .info { position: relative; margin-top: -14%; padding: 7% 5%; width: 350px; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 2; }
#bookBox .list ul li .info h3 { height: 40px; font-weight: 400; font-size: 24px; color: #fff; }
#bookBox .list ul li .info .more { text-align: left; }
#bookBox .list ul li:nth-child(2n) .img { margin: 0 0 0 100px; }
#bookBox .list ul li:nth-child(2n) .info { margin-left: 40px; }

@media screen and (max-width:1680px) {
    #aboutBox .bg{width: calc(80% + 72px);}
}
@media screen and (max-width:1440px) {
    #productBox ul li:after{zoom:90%;bottom: -30px;}
    #aboutBox .fixTxt{width: 300px;}
    #aboutBox:before{zoom:80%;}
}
@media screen and (max-width:1400px) {
    section .title{font-size:35px;}
    #aboutBox:before{zoom: 60%;top: -89px;}
    #aboutBox .bg{width: calc(80% + 108px);}
    #aboutBox .leftbox .back{left: -80px;bottom: -130px;}
}
@media screen and (min-width:1281px) {
    #productBox .bg{background-attachment: fixed;}
}
@media screen and (max-width:1280px) {
    #photo_area .item{width:300px}
    #aboutBox .bg{width: calc(85% + 78px);}
	#secabout #youtubeBox { width: 90vw; }
	#bookBox .list ul li .img { margin: 0 20px 0 60px; }
}
@media screen and (min-width:1025px) {
    #aboutBox .back.mo{display:none;}
}
@media screen and (max-width:1024px) {
    #productBox >.info{width:90%}
    #productBox .btn{position:relative;margin-top: 50px;align-items: center;justify-content: center;gap: 30px;}
    section{padding: 10vw 0;}
    #aboutBox .back{aspect-ratio: 107 / 90;z-index: 2;left: unset;right: 130px;bottom: -110px;}
    #aboutBox .leftbox .photo:before{right: 70px;}
    #aboutBox .info{grid-template-columns:1fr;gap: 90px;width: 80%;}
    #aboutBox .back.pc{display:none;}
    #aboutBox:before{zoom: 60%;top: 0;}
	#aboutBox .bg {width: calc(77% + 77px);}
}
@media screen and (max-width:980px) {
    #aboutBox .fixTxt{right: 40px;bottom: -80px;}
    #aboutBox{padding-bottom:30vw}
    #aboutBox .back{right: unset;aspect-ratio: 6/3;left: 0;padding: 90px 90px 50px 60px;width: 60%;bottom: -60px;}
    #aboutBox .info{width: 85%;}
    #aboutBox .leftbox .photo:before{right: 10px;z-index: 1;width: 120px;height: 120px;}
    #aboutBox:after{zoom:80%;}
	#aboutBox .bg {width: calc(65% + 78px);}
	#secabout:before { width: 0; }
	#secabout #customBox { width: 90vw; }
	#secabout #youtubeBox .left { height: 45vw; }
	#bookBox { padding-bottom: 5vw; }
	#bookBox .info { padding-bottom: 90px; }
	#bookBox .topBox , #bookBox .topBox .title { position: initial; }
	#bookBox .topBox .more { position: absolute; width: 100%; text-align: center; bottom: 0; left: 0; }
}
@media screen and (max-width:640px) {
    #wrap{margin-top:-10px}
    #photo_area .item{width:250px}
    #productBox ul li .info .h3{font-size: 17px;}
    #productBox ul{margin-top:65px;}
    #productBox:after{transform:unset;left: 0;height: calc(35% + 35px);}
    #productBox ul li{margin: 0 20px 20px;}
    section .title{font-size:30px;}
    #productBox .title:after{margin-left: 25px;}
    #productBox .title{text-align:left;}
    #productBox{margin:0}
    #aboutBox .wire{display:none;}
    #aboutBox .back{right: unset;aspect-ratio: 5/3;left: 0;padding: 90px 100px 50px 30px;width: 80%;bottom: 0;}
    #aboutBox .fixTxt{right: -80px;width: 200px;}
    #aboutBox{padding-bottom:300px}
    #aboutBox .info{gap:50px;}
    #aboutBox .leftbox .photo:before{right: 10px;width: 84px;height: 90px;}
    #aboutBox:after{zoom: 40%;}
    #aboutBox:before{zoom: 40%;}
	#aboutBox .bg {width: calc(56% + 77px);top: -1px;}
}