#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 38px;display: flex;flex-direction: column;align-items: flex-start;}
section .title_box b{font-size: 20px;font-family: "DM Sans", sans-serif;color: var(--secondary);letter-spacing: 0;line-height: 1;}
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%); }
.indexbox .more a {/* position: relative; */-webkit-animation: none !important;animation: none !important;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;position: relative;-webkit-box-align: center;-ms-flex-align: center;height: 6rem;padding-right: 7.5rem;background: none;font-weight: 700;font-size: 1.2rem;line-height: 1.67;text-decoration: none;vertical-align: top;-webkit-transition: all .5s cubic-bezier(0.43, 0.05, 0.17, 1);transition: all .5s cubic-bezier(0.43, 0.05, 0.17, 1);color: #333;text-decoration: underline;align-items: center;}
.c-btn .txt{text-decoration:underline;letter-spacing: 2px;}
.c-btn .circle{overflow:hidden;position:absolute;top: -12px;right: 10px;z-index:0;width: 120px;height: 120px;border-radius:50%}
.c-btn .circle:before{-webkit-transition:-webkit-transform .5s cubic-bezier(0.075,0.82,0.165,1) 0s;transition:-webkit-transform .5s cubic-bezier(0.075,0.82,0.165,1) 0s;transition:transform .5s cubic-bezier(0.075,0.82,0.165,1) 0s;transition:transform .5s cubic-bezier(0.075,0.82,0.165,1) 0s,-webkit-transform .5s cubic-bezier(0.075,0.82,0.165,1) 0s;-webkit-transform:scale(0.5);transform:scale(0.5);content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background: var(--primary);}
.c-btn:hover .circle:before{-webkit-transform:scale(1);transform:scale(1)}
.c-btn .circle:after{-webkit-transition:all .5s cubic-bezier(0.075,0.82,0.165,1) 0s;transition:all .5s cubic-bezier(0.075,0.82,0.165,1) 0s;-webkit-transition-property:color,opacity;transition-property:color,opacity;-webkit-transform:translateY(-50%);transform:translateY(-50%);content:attr(data-text);position:absolute;top: 59px;left: -62px;color:#ffffff;white-space:nowrap;opacity:0;text-decoration:underline;letter-spacing: 2px;}
.c-btn:hover .circle:after{opacity:1}
.c-btn .icon-arw{-webkit-transition:all .5s cubic-bezier(0.075,0.82,0.165,1) 0s;transition:all .5s cubic-bezier(0.075,0.82,0.165,1) 0s;-webkit-transition-property:color,-webkit-transform;transition-property:color,-webkit-transform;transition-property:transform,color;transition-property:transform,color,-webkit-transform;position:absolute;top: calc(50% - 15px);right: 62px;z-index:1;margin-left:0;color:#ffffff}
.icon-arw:before{-webkit-transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s,-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;-webkit-transform:scale(0);transform:scale(0);content:'';display:block;position:absolute;top:calc(50% - 0.3rem);left:calc(50% - 0.3rem);width:0.6rem;height:0.6rem;border-radius:50%;background:currentColor}
.indexbox .more a:hover .icon-arw:before{-webkit-transform:scale(1);transform:scale(1)}
.icon-arw .arw{display:block;position:relative;-webkit-transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s,-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s}
.indexbox .more a:hover .icon-arw .arw{-webkit-transform:scale(0);transform:scale(0)}
.icon-arw .arw:before{content:'';display:block;position:absolute;background:currentColor}
.icon-arw{display:inline-block;position:relative;margin-left:0.5rem;font-size:0;line-height:0;vertical-align:middle}
.icon-arw:before{-webkit-transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s,-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;-webkit-transform:scale(0);transform:scale(0);content:'';display:block;position:absolute;top: 8px;left: 3px;width:0.6rem;height:0.6rem;border-radius:50%;background:currentColor}
.icon-arw .arw{display:block;position:relative;-webkit-transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s;transition:transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s,-webkit-transform .5s cubic-bezier(0.43,0.05,0.17,1) 0s}
.icon-arw .arw:before{content:'';display:block;position:absolute;background:currentColor}
.icon-arw .arw:after{-webkit-box-sizing:border-box;box-sizing:border-box;content:'';display:block;position:absolute}
.icon-arw .arw--r svg{width: 15px;height: 15px;fill:#ffffff;position:relative}
.icon-arw .arw--l svg{width:1.2rem;height:1rem;fill:#ffffff;position:relative;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}
.indexbox .more a:hover .icon-arw .arw{-webkit-transform:scale(0);transform:scale(0)}

/* aboutBox */
#aboutBox {padding: 130px 0 20px;}
#aboutBox .fixTxt { position: absolute; font-size: 13vw; font-weight: 900; color: #f2f5f7; white-space: nowrap; left: 0; top: 0; z-index: 1; }
#aboutBox #pictureBox { position: absolute; width: 380px; height: 245px; box-shadow: 0 0 40px 0 rgba(0, 0, 0, .3); right: 0; top: 0; z-index: 3; }
#aboutBox #pictureBox a.photo { width: 100%; height: 245px; }
#aboutBox .aboutinfo {position: relative;font-size: 0;z-index: 2;display: flex;align-items: center;justify-content: center;}
#aboutBox .boxtit {font-size: 30px;color: #333;letter-spacing: 10px;font-weight: 600;}
#aboutBox .aboutinfo .info {margin-right: 8%;border-right: 1px solid #eee;padding-right: 8%;writing-mode: vertical-rl;height: 340px;display: flex;flex-wrap: wrap;}
#aboutBox .aboutinfo .img h2 {margin-bottom: 25px;font-weight: 500;font-size: 30px;letter-spacing: 5px;}
#aboutBox .aboutinfo .img article p {margin-bottom: 30px;font-weight: 400;line-height: 210%;font-size: 17px;text-align: justify;letter-spacing: 1px;}
#aboutBox .aboutinfo .img {width: 46%;}
#aboutBox .aboutinfo .img a.photo { width: 100%; height: 100%; }
#aboutBox .aboutinfo .info h3.boxtit b{display:none;}

/* recruit_area */
#recruit_spacer{position:relative;height:250vh;background:linear-gradient(180deg,rgb(255 255 255),var(--secondary));overflow:visible;z-index:10}
#recruit_area{overflow:hidden;will-change:transform;padding: 0;}
#recruit_area .recruit-text-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:100%;z-index:10;pointer-events:none;gap: 10px;}
#recruit_area .recruit-text{font-size:4rem;font-weight:700;color: var(--primary);white-space:nowrap;transition:transform 0.1s linear;text-transform:uppercase;will-change:transform,margin;font-family: "DM Sans", sans-serif;}
#recruit_area .recruit-text.left{margin-right:0px}
#recruit_area .recruit-text.right{margin-left:0px}
#recruit_area .recruit-img-container{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:5;transform-origin:50% 50%;will-change:clip-path;clip-path:inset(50% 50%)}
#recruit_area .recruit-img-container:before{content:'';position: absolute;width: 100%;height: 100%;background: #627c37;z-index: 1;opacity: .35;}
#recruit_area .recruit-img-container img,#recruit_area .recruit-img-container video{width:100%;height:100%;object-fit:cover;filter: saturate(0.7);}
#recruit_area .recruit-subtitle{position:absolute;top:66%;left:50%;transform:translateX(-50%);text-align:center;z-index:20;width:90%;max-width:800px}
#recruit_area .recruit-subtitle p{font-size:15px;color:#333333;font-weight:500;background:transparent;padding:0;box-shadow:none;display:inline-block;transition:color 0.1s linear;text-align: center;}

/* product_area */
#product_area .fixTxt{font-size:90px;color:#d5d5d5;opacity:0.4;font-weight:700;line-height:100%;text-transform:uppercase;letter-spacing:0.05em;right: -8%;top: 12%;font-family: "Manrope", sans-serif;}
#product_area .title_box{padding-left: 20vw;position: relative;display: flex;justify-content: center;font-size: 35px;letter-spacing: 5px;padding-bottom: 7vw;}
#product_area .title_box:before{content:'';width: 16vw;height: 70px;background: var(--primary);position: absolute;left: 0;}
#product_area .workframe{width: min(90%, 1600px);}
#product_list li{margin: 0 25px 60px;padding-top: 30px;}
#product_list li >a{z-index:2}
#product_list .clip{z-index:2;width:45%;right:30px;aspect-ratio:4 / 4.4;top:0;border-radius:71% 85% 49% 51% / 77% 48% 32% 40%;animation:clipBlob 8s ease-in-out infinite;will-change:border-radius}
@keyframes clipBlob{0%{border-radius:71% 85% 49% 51% / 77% 48% 32% 40%;}25%{border-radius:62% 78% 60% 40% / 58% 40% 60% 42%;}50%{border-radius:55% 45% 70% 30% / 45% 70% 30% 55%;}75%{border-radius:72% 55% 42% 58% / 65% 45% 55% 35%;}100%{border-radius:71% 85% 49% 51% / 77% 48% 32% 40%;}}
#product_list .info_box{background: #fff;padding: 20px 30px 20px;border-radius: 10px;box-shadow: 0 30px 20px 0 rgb(0 0 0 / 10%);}
#product_list li:hover .info_box{box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);}
#product_list .info_box span{font-size: 80px;font-family: "DM Sans", sans-serif;font-weight: 700;color: var(--secondary);line-height: 1;}
#product_list .info_box .h3{color:var(--primary);font-size: 22px;height: auto;margin-bottom: 70px;width: 40%;-webkit-line-clamp: 2;letter-spacing: 1px;line-height: 1.5;}
#product_list .info_box article{height:auto;-webkit-line-clamp: 2;border-top: 2px solid #eaebea;padding-top: 20px;font-size: 15px;letter-spacing: 1px;}

/* custom_area */
#custom_area{padding-bottom: 0;}
#custom_area .workframe {width: min(90%, 1330px);display: grid;grid-template-columns: 20% 80%;gap: 10px;}
#custom_area ul{display: flex;gap: 20px;flex-direction: column;}
#custom_area ul li >div {border: 1px solid #d9e3f9;padding: 15px;border-radius: 8px;}
#custom_area ul li:hover >div{background: rgb(168 187 163 / 40%);}
#custom_area ul li .clip {border-radius: 5px;background-color: #f2f4f8;display: flex;align-items: center;justify-content: center;width: 44px;aspect-ratio: 1/1;margin: auto 0 auto auto;}
#custom_area ul li:hover .clip{background:var(--primary)}
#custom_area ul li:hover .clip img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);}
#custom_area ul li .clip img{width:22px;aspect-ratio: 1/1;height: auto;}
#custom_area ul li .h3 {margin: 60px 0 5px;font-size: 14px;color: #999999;}
#custom_area ul li article {font-weight: 500;font-size: 20px;overflow: hidden;display: grid;grid-template-columns: 1fr 30px;font-family: "Manrope", sans-serif;}
#custom_area ul li article svg{width: 15px;height: 15px;}

/* photo_area */
#photo_area .item{margin:0 10px;outline: 1px solid rgb(255 255 255 / 35%);outline-offset: -15px;border-radius: 20px;}
#photo_area .item img {object-fit: cover;border-radius: 8px;}

/* book_area */
#book_area .title_box{display:flex;align-items: center;}
#book_area .bg_box {background-size:cover;background-repeat: no-repeat;background-position: 50% 50%;opacity: .5;z-index: -1;}
#book_area .workframe{width: min(90%, 1600px);}
#book_area li .img_box:after{content:'';position: absolute;width: 100%;height: 100%;bottom: 0;left: 0;background: linear-gradient(180deg,rgb(0 0 0 / 0%), rgb(0 0 0 / 50%));border-radius: 8px;}
#book_area li .img_cover{aspect-ratio:3/4;border-radius: 8px;}
#book_area li .infoo {width: 80%;bottom:0;padding: 30px 10%;display: flex;flex-direction: column;align-items: center;}
#book_area li .infoo *{color:#fff;}
#book_area li .infoo p{background:var(--primary);font-size: 14px;padding: 3px 10px;border-radius: 5px;}
#book_area li .h3 {margin-top: 10px;height: auto;font-size: 18px;text-align: center;}
#book_area:after{content:"";position:absolute;width:27%;height:calc(100% + 120px);background:var(--primary);left:-38%;top:0;moz-transform-origin:bottom;-moz-transform:skewX(20deg);-webkit-transform-origin:bottom;-webkit-transform:skewX(-20deg);-o-transform-origin:bottom;-o-transform:skewX(-20deg);-ms-transform-origin:bottom;-ms-transform:skewX(-20deg);transform-origin:bottom;transform:skewX(-20deg);z-index: 1;}
#book_area:before{content:"";position:absolute;width:76%;height:calc(100% + 55px);background:white;right:0px;top:-55px;moz-transform-origin:bottom;-moz-transform:skewX(20deg);-webkit-transform-origin:bottom;-webkit-transform:skewX(-20deg);-o-transform-origin:bottom;-o-transform:skewX(-20deg);-ms-transform-origin:bottom;-ms-transform:skewX(-20deg);transform-origin:bottom;transform:skewX(-20deg);z-index:3}

@media screen and (max-width: 1400px) {
    #custom_area ul li .h3{margin: 40px 0 5px;}
}
@media screen and (max-width: 1024px) {
    #custom_area .workframe{display:block;}
    #custom_area ul{display:grid;grid-template-columns: repeat(2, 1fr);margin-bottom: 30px;}
}
@media screen and (max-width: 980px) {
    #book_area .title_box{display:flex;align-items: flex-start;}
    #book_area:after{display:none;}
    #product_list .clip{aspect-ratio: 1/1;width: 32%;}
    #product_area .fixTxt{right: -30%;}
    #custom_area{padding:0}
    #aboutBox { padding: 40px 0; }
	#aboutBox .fixTxt { display: none; }
	#aboutBox #pictureBox { top: -7vw; }
	#aboutBox #pictureBox , #aboutBox #pictureBox a.photo { width: 40vw; height: 25vw; }
	#aboutBox .aboutinfo { padding: 5vw 0; flex-wrap: wrap;display: flex;justify-content: flex-start;}
	#aboutBox .aboutinfo .info { position: relative;   z-index: 2; writing-mode: unset;height: auto;border-bottom: 1px solid #eee;margin: 0 0 20px;border-right: 0;padding: 0 0 20px;width: 100%;}
	#aboutBox .aboutinfo .info .boxtit {letter-spacing: 0;word-break: keep-all;}
	#aboutBox .aboutinfo .info .more a { border-color: #25496b; color: #25496b; }
	#aboutBox .aboutinfo .img { width: 100%;      }	
	#recruit_area{height:250vh}
	#recruit_area .recruit-text{font-size: 3rem;}	
	section { padding: 13vw 0; }
	#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; }
    section .title_box{padding-bottom: 6vw;}
}
@media screen and (max-width: 650px) {
    section .clip img{height: 100%;}
    #aboutBox .aboutinfo .info, #aboutBox .aboutinfo{display:block;}
    #product_list .info_box span{font-size: 30px;}
    #product_list .info_box .h3{width:100%;margin-bottom: 20px;}
    #product_list .info_box{padding-top: 80px;}
    #product_list .clip{right:unset;width: 60%;position: relative;margin-bottom: -70px;}
    #product_list li{display:flex;justify-content: center;flex-direction: column;}
    #product_area .fixTxt{display:none;}
	#recruit_area .recruit-text{font-size: 2rem;}	
    #photo_area .item{margin:0}
    #custom_area ul{grid-template-columns:1fr}
    #aboutBox .aboutinfo .img article p{font-size:16px;}
	#aboutBox .aboutinfo .info .boxtit{font-size: 22px;}
}