#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .subtitle {font-size: 75px;font-family: "Audiowide", sans-serif;margin-bottom: 15px;}
section .page_title {padding-bottom: 3vw;font-size: 35px;font-weight: 500;}
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }

/* video_area */
#video_area{background:#000;padding: 9vw 0;position: relative;}
#video_area .frame{width:100%;height: 100%;position: absolute;top: 0;z-index: 0;}
#video_area .frame p{color: #d1c6c6;font-size: 15px;font-weight: 500;display: inline-flex;align-items: center;gap: 5px;left: 70px;top: 115px;}
#video_area .frame p:before{content:'';width: 6px;aspect-ratio: 1/1;border-radius: 50px;background: #b1271c;}
#video_area .frame .topleft {left: 40px;top: 95px;}
#video_area .frame .topright {right: 40px;top: 95px;}
#video_area .frame .bottomright {right: 40px;bottom: 95px;}
#video_area .frame .bottomleft {left: 40px;bottom: 95px;}
#video_area .videowrap {display:flex;align-items: center;justify-content: center;}
#video_area .fixTxt {font-family: "Audiowide", sans-serif;font-size: 210px;white-space: nowrap;z-index: -1;color: #252525;text-transform: uppercase;}
#video_area .fixTxt.bee{mix-blend-mode: overlay;z-index: 1;color: white;}
#video_area .videobox{width:min(90%, 1345px);height: 445px;overflow: hidden;border-radius: 500px;}
#video_area .video-bg{display:flex;align-items: center;justify-content: center;}
#video_area video{width:100%;position:absolute;left: 0px;}

/* about_area */
#about_area {z-index: 5;background: linear-gradient(90deg, #000, #222222);display: flex;align-items: center;padding: 8vw 0;overflow: hidden;}
#about_area .workframe {grid-template-columns: 38% 56%;display: grid;justify-content: space-between;align-items: center;width: min(90%, 1600px);}
#about_area .title_box { padding-bottom: 0; }
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {margin-bottom: 80px;line-height: 210%;letter-spacing: .25px;font-weight: 400;font-size: 20px;width: 80%;text-align: justify;}
#about_area .clip video{left: -100%;position: absolute;top: -40%;-webkit-filter: grayscale(1);opacity: .2;}
#about_area .bgg {overflow: hidden;width: 880px;right: calc(-880px/2);aspect-ratio: 1/1;border-radius: 50%;-webkit-filter: grayscale(1);z-index: 0;opacity: .35;}
#about_area .bgg video{left: -40%;position: absolute;}
#about_area .pageh1 {font-size: 35px;line-height: 1.7;font-weight: 500;margin-bottom: 80px;}
#about_area .about_sub_2 {width: 470px;top: -26vw;right: 14vw;}
#about_area .about_sub_2 .clip { -webkit-clip-path: url(#clip_about_sub_2); clip-path: url(#clip_about_sub_2); }
#about_area .about_sub_3 { width: 300px; bottom: -11vw; left: 35vw; }
#about_area .about_sub_3 .clip { -webkit-clip-path: url(#clip_about_sub_3); clip-path: url(#clip_about_sub_3); }
#about_area #about_img{aspect-ratio:1/1;display: flex;align-items: center;}
#about_area #about_img:after{content:'';position: absolute;width: 150%;height: 200%;z-index: 1;background: linear-gradient(90deg, rgb(12 12 12 / 0%), rgb(19 19 19));}
#about_area #about_img:before{content:url(/images/44/img-about.png);position: absolute;left: 40%;animation: spin 50s linear infinite; /* 時間可調整 */transform-origin: center center;}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
#about_area #about_img .clip{height: 100%;aspect-ratio: 1/1;border-radius: 50%;overflow: hidden;}

/* custom_area */
#custom_area{padding:0}
#custom_area .videobox  {z-index: -1;bottom: 0;-webkit-filter: grayscale(1);opacity: .35;width: 100%;height: 100%;overflow: hidden;}
#custom_area .videobox .video-bg{bottom: -25%;position: absolute;}
#custom_area .workframe {width: 100%;display: grid;grid-template-columns: 65% 35%;}
#custom_area .titbox {order:2;padding: 160px 40px;display: flex;flex-direction: column;align-items: center;}
#custom_area .subtitle{line-height: 1.3;text-align: center;}
#custom_area .page_title{padding-bottom: 185px;}
#custom_area ul{display:grid;grid-template-columns: repeat(3, 1fr);}
#custom_area li{border-right: 1px solid rgb(255 255 255 / 20%);padding: 75px 65px;display: flex;flex-direction: column-reverse;gap: 40px;}
#custom_area ul *{writing-mode: vertical-lr;}
#custom_area li .h3{display:flex;flex-direction: row;align-items: center;gap: 15px;font-size: 22px;}
#custom_area li .h3 svg{fill:white;width: 35px;height: 35px;transform: scaleX(-1);}
#custom_area li:hover .h3 svg{transform: scaleX(1);}
#custom_area li article {font-weight: 300;font-size: 15px;overflow: hidden;margin: 115px 0 0;height: 365px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;writing-mode: vertical-rl;color: #afafaf;transform: translateX(-100%);opacity: 0;}
#custom_area li:hover article{opacity:1;    transform: translateX(0%);}

/* 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; }


/* 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 #about_img:after{width:180%;background: linear-gradient(90deg, rgb(12 12 12 / 0%), rgb(23 23 23));}
}
@media screen and (max-width: 1280px) {
    #about_area #about_img:before{zoom:80%}
    #about_area #about_img:after{width: 160%;background: linear-gradient(90deg, rgb(12 12 12 / 0%), rgb(21 21 21));}
}
@media screen and (max-width: 1024px) {
    #about_area article p{width:100%}
    #about_info{margin-top:-250px}
    #about_area #about_img:after{display:none;}
    #about_area #about_img{width: 60%;margin: 0 auto;}
    #about_area .workframe{grid-template-columns:1fr}
    #about_area .bgg{display:none;}
    #custom_area .videobox{display:flex;justify-content: center;}
    #custom_area .videobox .video-bg{bottom:0}
    #custom_area ul{width: min(70%, 750px);margin: 0 auto;}
    #custom_area li{border:0;padding: 75px 25px;display: flex;justify-content: center;}
    #custom_area .page_title{padding-bottom:40px}
    #custom_area .titbox{order:-1;padding: 60px 40px;}
    #custom_area .workframe{grid-template-columns:1fr}
    #video_area .fixTxt{font-size: 120px;}
	section { padding: 12vw 0; }
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #about_info{text-align:center;}
    #about_area article p{text-align:center;font-size: 16px;}
    #about_area .pageh1, #about_info .subtitle{text-align:center;}
    #about_area .pageh1{font-size:26px}
    #about_area #about_img{display:flex;justify-content: center;}
    #about_area #about_img:before{left:unset;top: 60px;zoom: 67%;}
    #custom_area{padding-bottom: 42vw;}
    #custom_area .titbox{padding-bottom:0}
    #custom_area .titbox .more_btn{display:none;}
    #custom_area li article{display:none;}
    #video_area .frame p{top: 55px;}
    #video_area .frame .topleft, #video_area .frame .topright{top:40px;}
    #video_area .frame .bottomright, #video_area .frame .bottomleft{bottom:40px}
    #video_area{padding:12vw 0}
    #video_area .videobox{height: 285px;}
    section .page_title{font-size: 26px;}
    section .subtitle{font-size: 55px;}
}
@media screen and (max-width: 760px) {
    #about_info{margin-top: -200px;}
    #custom_area ul{width: min(85%, 750px);}
    #video_area{padding: 30vw 0;}
    section .page_title{font-size: 20px;}
    section .subtitle{font-size: 40px;}
	#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; }
    #video_area .frame .topleft, #video_area .frame .bottomleft{left: 20px;}
    #video_area .frame .topright, #video_area .frame .bottomright{right:20px;}
}
@media screen and (max-width: 550px) {
    #about_area .pageh1{font-size: 20px;}
    #about_area #about_img:before{zoom: 45%;top: 110px;}
    #custom_area li .h3{font-size:20px;}
    #video_area .fixTxt{font-size: 50px;}
    #video_area .videobox{height: 155px;}
	#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; }
}