/* section */
section {padding: 5vw 0;}
section.section_pad { padding: 5vw 0; }
section >* { z-index: 3; }
section .title_box { margin-bottom: 40px; }
section .title_box .area_title {font-weight: 600;font-size: 32px;color: var(--white);}
section .title_box .sub_title { font-weight: 300; font-size: 23px; }

/* bg_box */
.bg_box { width: 100%; height: 100%; background: no-repeat 50% / cover; background-attachment: fixed; opacity: .3; top: 0; left: 0; }
.bg_box:before { width: 100%; height: 100%; display: block; background: rgba(var(--primary-rgb), .2); content: ""; }
.bg_box.white:before { background: rgba(var(--white-rgb), .2); }

/* about_area */
#about_area {padding:3vw 0;}
#about_area:after{content:url(/images/40/img-dot.png);position: absolute;right: 0;top: 0;z-index: -1;}
#about_area .fixTxt{color:#353435;font-size: 305px;position: absolute;opacity: .2;font-family: 'Roboto', sans-serif;text-transform: uppercase;font-weight: 900;line-height: 100%;}
#about_area .img_box{width: 25%;}
#about_area .info_box{width: 65%;margin-left: 5%;text-align: end;margin-top: 50px;}
#about_area .info_box article {margin-bottom: 40px;width: 75%;line-height: 210%;font-weight: 300;color: #bababa;}

/* product_list */
#product_list {display: flex;flex-wrap: wrap;}
#product_list li{width:calc(100%/3)}
#product_list li:hover .img_scale img{-webkit-transform: scale(1.1);}

/* news_area */
#news_area .list_box img { height: 320px; }
#news_area .list_box .info_box { padding: 15px 30px; }
#news_area .list_box .info_box p a { margin-right: 10px; max-width: calc(100% - 100px); font-weight: 400; z-index: 2; }
#news_area .list_box .info_box p .time { width: 90px; font-weight: 300; }
#news_area .list_box .info_box h3 { height: 34px; font-size: 20px; }

/* book_area */
#book_area{padding: 0;}
#book_area .list_box ul{display:grid;grid-template-columns: repeat(4, 1fr);}
#book_area .list_box li{overflow:hidden;}
#book_area .list_box li:nth-child(1){grid-column-start:1;grid-column-end: 3;grid-row-start:1;grid-row-end: 3;}
#book_area .list_box li:nth-child(2){grid-column-start: 3;grid-column-end: 4;grid-row-start:1;grid-row-end: 3;}
#book_area .list_box li:nth-child(3){grid-column-start: 4;grid-column-end: 5;grid-row-start: 2;grid-row-end: 4;}
#book_area .list_box li img{height:320px;}
#book_area .list_box li:nth-child(1) img, #book_area .list_box li:nth-child(2) img, #book_area .list_box li:nth-child(3) img{height:640px;}
/* client_area */
#client_area {border-bottom: 1px solid rgb(255 255 255 / 20%);padding: 4vw 0;}
#client_area .client_box{padding:0 5%;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
#client_area .client_box >div{width: 20%;}
#client_area .client_box .clients {width:80%;}
#client_area .client_box .img_scale:hover{opacity:.5}

/* custom_area */
#custom_area { padding: 0; }
#custom_box ul li{width: calc(100% / 3);margin-right:-4px;vertical-align:top;display:none;position: relative;}
#custom_box ul li:nth-child(1),#custom_box ul li:nth-child(2),#custom_box ul li:nth-child(3),#custom_box ul li:nth-child(4){display:inline-block}
#custom_box li a{z-index: 2;position:absolute;width: 100%;height: 100%;top: 0;left: 0;}
#custom_box li .row {position: absolute;bottom: 20%;width: 75%;border-bottom: 1px solid rgb(255 255 255 / 30%);}
#custom_box li:hover .row{width:80%;}
#custom_box li .row h2 {font-size: 55px;text-align: end;font-family: 'Roboto', sans-serif;margin-bottom: 20px;font-weight: 400;}
#custom_box li .row article {margin-bottom: 10px;line-height: 200%;text-align: end;font-size: 28px;}
#custom_box li .photo{position: relative;height: 780px;}
#custom_box li .photo:after{content:'';width: 100%;height: 100%;background: #000;top: 0;left: 0;position: absolute;opacity: .5;}
#custom_box li .photo img{width:100%;height: 100%;object-fit: cover;}

@-webkit-keyframes spineer { 0% { -webkit-box-shadow: 0 0 0 0 var(--info); } 70% { -webkit-box-shadow: 0 0 0 20px transparent; } 100%{ -webkit-box-shadow: 0 0 0 0 transparent; } }
@keyframes spineer { 0% { box-shadow: 0 0 0 0 var(--info); } 70% { box-shadow: 0 0 0 20px transparent; } 100%{ box-shadow: 0 0 0 0 transparent; } }

@media screen and (min-width: 1025px) {
	#custom_box ul.sOver li{width:calc(100% / 4)}
	#custom_box ul.sOver li.divOver{width:calc((100% / 4) * 2)}
	#custom_box ul li .photo a img{height:293px}
}
@media screen and (min-width: 1281px){
	#book_area .list_box li:hover .badge { background: var(--primary); color: var(--white); }
}
@media screen and (max-width: 1680px){
	#about_area .fixTxt{font-size:250px;top: 130px;}
}
@media screen and (max-width: 1024px){
	#product_list li{width:50%}
	#about_area .info_box{margin-left: 15px;width: 95%;}
	#about_area .info_box article{width:100%;}
	#custom_box li .row h2{font-size: 40px;}
	#custom_box li .row article{font-size:22px;}
	#book_area .list_box li:nth-child(2){grid-column-start: 3;grid-column-end: 5;grid-row-start:1;grid-row-end: 3;}
	#book_area .list_box li:nth-child(3){grid-column-start: 3;grid-column-end: 5;grid-row-start: 3;grid-row-end: 5;}
}
@media screen and (max-width: 768px){
	#custom_box ul li, #custom_box ul li:nth-child(1), #custom_box ul li:nth-child(2), #custom_box ul li:nth-child(3), #custom_box ul li:nth-child(4){display:block;width: 100%;}
	#news_area .list_box .info_box { padding: 15px 0; }
	#youtube_box { padding-bottom: 60vw; }
	#custom_box li .photo{height: 450px;}
	#client_area .client_box >div{width:100%;text-align: center;margin-bottom: 30px;}
	#client_area .client_box .clients{width:100%;margin: 0;}
	#book_area .list_box li img{height: 200px;}
	#book_area .list_box li:nth-child(1) img, #book_area .list_box li:nth-child(2) img, #book_area .list_box li:nth-child(3) img{height:400px;}
}
@media screen and (max-width: 640px){
	#book_area .list_box ul{grid-template-columns: repeat(2, 1fr);}
	#book_area .list_box li:nth-child(1){grid-column-start:1;grid-column-end: 3;grid-row-start:1;grid-row-end: 1;}
	#book_area .list_box li:nth-child(2){grid-column-start: 1;grid-column-end: 3;grid-row-start: 3;grid-row-end: 4;}
	#book_area .list_box li:nth-child(3){display: none;}
	#book_area .list_box li img{height: 150px;}
	#book_area .list_box li:nth-child(1) img, #book_area .list_box li:nth-child(2) img, #book_area .list_box li:nth-child(3) img{height:250px;}
	#product_list li{width: 100%;}
	#about_area .info_box{margin: 0 auto;width: 100%;}
	#about_area .img_box{display:none;}
	#about_area{padding:50px 0}
	#book_area .list_box img { height: 65vw; }
	section .title_box .area_title{font-size: 22px;}
	#about_area .fixTxt{display: none;}
	#custom_box li .row h2{font-size: 34px;margin-bottom: 5px;}
	#custom_box li .row article{font-size: 20px;}
	section, #client_area{padding:50px 0;}
}
@media screen and (max-width: 450px){
	#product_area .bgBox { width: 100%; object-fit: cover; }
}