.section_area{padding:3vmax 0 2vmax}
.section_area .area_title{position:relative;padding-bottom:.3em;letter-spacing:.1em;text-align:center}
.section_area .area_title:before{position:absolute;width:3em;height:.1em;background:var(--primary);display:block;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);content:""}
.section_area .sub_title{font-weight:500;font-size:1.1em;color:var(--primary)}
.section_area .more_btn{padding:0 .2em;border-bottom:2px var(--g_800) solid;font-weight:500}
.section_area .list_box{margin-top:2vmax}
.section_area .list_box .item_row{margin:0 1em}
.section_area .list_box .slick-dots{position:relative;margin:1em 0;bottom:0}
section .title_box h2{font-size:32px;margin-top:5px}
section .title_box h2,section .title_box p{text-align:center;font-weight:400;color:#414141;letter-spacing:0.5px}

/* about_area */
#about_area::after{content:"";position:absolute;background:url(/images/01/img-ab-01.png) no-repeat;background-size: contain;top:0;left: 1vw;width:504px;height:945px;z-index: 0;}
#about_area .aboutArea .areaTxt{padding:120px 90px 130px;position:relative}
#about_area .aboutArea .areaTitle .title_box p{font-size:32px;letter-spacing:6px;margin-bottom:40px;text-align:left}
#about_area .aboutArea .areaTitle article{font-size:18px;letter-spacing:2px;color:#636363;line-height:170%}
#about_area .aboutArea .areaTxt .ImgTop{position:absolute;top:0px;right:0;width: 60%;z-index:-1}
#about_area .aboutArea .areaTxt .ImgBottom{position:absolute;bottom:40px;right:0;width:37%;z-index:2}
#about_area{background:url(/images/01/img-ab-bg.jpg) 50% 50% no-repeat;background-size:cover;padding: 0vmax 0 4vmax;position:relative}
#about_area .workframe{margin:0 0 0  auto;width: min(90vw,1680px);}
#about_area .img_item{padding:50px 50px;position:relative;margin-bottom: 110px;overflow:hidden}
#about_area .img_item::before{content:"";position:absolute;background: url(/userfiles/images/20250122100850201.png) #e7e7e7 no-repeat;background-position: right;top:0;right:0;width:calc(100% - 120px);height:100%;z-index:0}
#about_area .img_item .info_box{width:40%;top:40px;left:52%;transform:translate(-50%,0%);position:relative}
#about_area .img_item .info{padding: 3vw 0 6vw 100px;position:relative;animation-name:slideInRight;-webkit-animation-name:slideInRight}
#about_area .img_item .info .titleBox{writing-mode:tb-rl;padding-top:0;position:absolute;left:0;top:0px}
#about_area .img_item .info h2{margin-right:45px;font-weight:400;font-size:35px;letter-spacing:2.5px;color:#4f3c30}
#about_area .img_item .info h2 img{width:50px}
#about_area .img_item .info article h3{color:#bda552;font-weight:400;line-height:180%;letter-spacing:7px;padding:0px 6px 0px 0px;border-left:solid 1px;border-right:solid 1px;font-size:24px;writing-mode: tb-rl;}
#about_area .img_item .info article{font-weight:300;line-height:230%;font-size:18px;position:relative;display: flex;gap: 40px;}
#about_area .img_item .info article .ab_info h4{font-family:"Gilda Display",sans-serif;color:#838383;margin-bottom:30px;letter-spacing:5px;font-size:21px;font-weight:500}
#about_area .img_item .info article .ab_info p{color:#414141;font-size:18px;letter-spacing:1px}
#about_area .img_box{position:absolute;bottom: 0;right:0;display: none;}
#about_area .img_box img{width: 100%;height:100%;}


/* photo_area */
#photo_list{margin-top:0;display:grid;grid-gap:20px}
#photo_area .item_row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin:0}
#photo_area .item_row .img_box{overflow:hidden}
#photo_area .item_row .img_box img{height:350px;object-position:right}
#photo_area .item_row:hover .img_box img{-webkit-transform:scale(1.1);transform:scale(1.1)}
#photo_area .item_row .info_box{margin-left:6%;width:1%;flex:1 1 auto}
#photo_area .item_row .info_box h3{margin-bottom:.5em;max-height:3.2em;height:auto;-webkit-line-clamp:2}
#photo_area .item_row .info_box font{padding:.5em 1em;background:var(--primary);border-radius:2em;display:inline-block;line-height:1;font-weight:300;font-size:.9em;color:white}
#photo_area{padding:2vmax 0 6vmax 0}

/* news_list */
#news_list .img_box { aspect-ratio: 5/3; }
#news_list .info_box { margin-top: .5em; }
#news_list .info_box .time { font-size: .9em; color: var(--g_500); }
#news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; }
#news_list .info_box h3 { margin: .2em 0 .5em; }

#news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; }

@media screen and (max-width: 1660px){
    #about_area::after{left:-100px}
	#about_area .img_box{width:30vw}
	#about_area .img_item::before{background-position:130% 50%}
}

@media screen and (max-width: 1440px){
	#about_area::after{left:-110px;width:424px}
	#about_area .img_item .info_box{left:46%;width:49%}
	#about_area .aboutArea .areaTxt{padding:120px 0px 120px}
}
@media screen and (min-width: 1161px){
	#photo_area .item_row:hover{border-color:var(--primary)}
	#photo_area .item_row:hover{border-color:var(--primary)}
	#photo_list .photoList:nth-child(1){grid-column-start:1;grid-column-end:4}
	#photo_list .photoList:nth-child(2){grid-column-start:6;grid-row-start:1;grid-column-end:4}
	#photo_list .photoList:nth-child(3){grid-column-start:1;grid-column-end:3}
	#photo_list .photoList:nth-child(4){grid-column-end:3;grid-column-start:6;grid-row-start:2}
	#about_area::before{content:"";position:absolute;background:url(/images/01/img-ab-r-01.png) no-repeat;top:0;left:0;width:227px;height:290px;z-index:10}
}
@media screen and (max-width: 1280px){
	#about_area .img_item::before{background-position:160% 50%}
	#about_area .img_item .info_box{left: 39%;width: 50%;}
}
@media screen and (max-width: 1160px){
    #photo_list{grid-template-columns:repeat(2,1fr);gap:20px 20px}
	#about_area .aboutArea .areaTitle .title_box p{font-size:26px;margin-bottom:20px}
	#about_area .aboutArea .areaTxt .ImgTop{position:relative;width:100%}
	#about_area .aboutArea .areaTxt .ImgBottom{width:60%}
	#about_area .aboutArea .areaTitle article{margin-bottom:40px;font-size:16px}
	#about_area .workframe{margin:0 auto}
	#about_area .aboutArea .areaTxt{padding:0px 0px 120px}
	#about_area .img_item .info{padding: 3vw 0 6vw 80px;}
	#about_area .img_item .info h2{margin-right:0px}
	#about_area .img_item .info article h3{font-size: 20px;}
 	#about_area .img_item .info h2 img{width:30px}
	#about_area .img_item .info article .ab_info h4{font-size:19px;margin-bottom:20px}
	#about_area .img_item .info article .ab_info p{font-size:15px}
	#about_area .img_item::before{background-position: 180% 50%;}
}
@media screen and (max-width: 960px){
	#about_area .img_item::before{background-position: 240% 50%;width: calc(100% - 0px);}
	#about_area .img_item .info_box{left: 30%;width: 50%;}

}
@media screen and (max-width: 768px){
	#about_area .img_item::before{background-position: 330% 50%;}
	#about_area .img_box{width:100%;max-width:inherit}
	#about_area .info_box{order:1}
	#photo_list{grid-template-columns:repeat(1,1fr);gap:20px 20px}
	#photo_area .item_row{display:flex;justify-content:flex-end;width:100%}
	#photo_area .item_row .img_box{width:100%}
	section .title_box h2{font-size:22px}
	.section_area .list_box{margin-top:4vmax}
	.section_area{padding:6vmax 0 2vmax}
	#about_area::after{opacity:.3}
	#about_area .img_item::before{width:100%}
	#about_area .aboutArea .areaTitle .title_box p{font-size:20px;letter-spacing:3px}
    #about_area .img_item{padding: 50px 20px 50px;margin-bottom:50px}
	#about_area .img_item .info_box{left:41%;width:52%}
	#about_area .img_item .info_box{width:100%;left:0;top:0;position:relative;transform:translate(0%,0%)}
}
@media screen and (max-width: 680px){
    #photo_area .item_row .img_box img{height: 230px;}
	#about_area .img_item::before{background-color: #ebebeb;background-image: none;}
    #about_area .img_item .info article{gap: 20px;}
}
@media screen and (max-width: 640px) and (min-width: 551px){
	#photo_area .item_row .img_box { width: 100%; }
	#photo_area .item_row .img_box img {width: 100%;aspect-ratio: 1/1;height: 190px;}
	#photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; }
}
@media screen and (max-width: 550px){
	#product_list ul{grid-template-columns:repeat(3,1fr)}
}