/* wrap */
#wrap { z-index: 5; }

/* section */
section {padding: 70px 0;}
section >* { z-index: 3; }
section .title_box h2 {font-size: 25px;z-index: 20;letter-spacing: 0.3em;}
section .title_box p{font-size:13px;letter-spacing:0.1em;color:#c1c1c1;text-align:center;margin-bottom:20px;text-transform: uppercase;}

/* about_area */
#about_area .title h2 {margin-bottom: 12px;font-size: 25px;letter-spacing: 0.3em;}
#about_area .info >p{font-size:13px;letter-spacing:0.1em;color:#c1c1c1;text-align: center;margin-bottom: 20px;text-transform: uppercase;}
#about_area .info article p{line-height: 200%;font-size: 17px;text-align: center;}
#about_area .info h5{margin-bottom:25px;font-size:15px;text-align:center;color: #000;line-height:1.8}

/* product_area */
#product_area { padding-bottom: 0; background: no-repeat 0 bottom / auto 70%; }
#product_area:before{content:"";width:100%;height:430px;background-color: var(--primary);background-image: url(/images/45/home_bg3_transparent.png);position:absolute;background-attachment:fixed;top:0;left:0;background-size: 45px;z-index: -1;}
#product_area .title_box{margin-bottom: 60px;}
#product_area .title_box h2, #product_area .title_box p{text-align: center;color: var(--white);}
#product_area .img_box {margin: 0;}
#product_area .item {margin:0 15px;}
#product_area .info {box-sizing: border-box;z-index: 10;right: 0;bottom: 0;justify-content: space-between;align-items: flex-end;margin-top: 10px;}
#product_area .info >div { margin: auto; width: 100%; }
#product_area .info h3 {height: auto;font-size: 20px;text-align: center;}
#product_area .info h3:after{content:'';display: block;margin: 15px auto;width: 30px;height: 1px;background: #c6c6c6;}
#product_area .info article {margin: 10px 0 20px;font-size: 14px;height: auto;-webkit-line-clamp: 2;text-align: center;}
#product_area .info p {margin-right: 10px;font-weight: 300;color: var(--secondary);}
#product_area .info p:first-letter { margin-right: 2px; font-size: 12px; }
#product_area .info .price_box {display: flex;justify-content: center;}

/* photo_area */
#photo_area{position:relative}
#photo_area:after{content:url(/images/45/index-left.png);position: absolute;top: -60px;left: -60px;opacity: .5;animation-name: circle;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 3s;z-index: -1;}
@keyframes circle{0%{top:0}100%{top:-60px;}}
#photo_area:before{content: url(/images/45/index-right.png);position: absolute;top: -60px;right: -60px;opacity: .25;animation-name: circle2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 4s;}
@keyframes circle2{0%{top:-100px}100%{top:-160px}}
#photo_area .workframe {display: flex;flex-wrap: wrap;justify-content: space-between;}
#photo_area .item{width: calc((100%/3) - 35px);}
#photo_area .item a{position: relative;}
#photo_area .item a:after{content:'';width: 100%;height: 100%;position: absolute;top: 0;right: 0;background: #000;opacity: .6;}
#photo_area .item img{width: 100%;height: 200px;object-fit: cover;}
#photo_area .item h3{position: absolute;bottom: 0;left: 25px;z-index: 2;border-left: 1px solid rgb(255 255 255 / 50%);color: var(--white);padding-left: 20px;padding-bottom: 15px;font-size: 18px;}
#photo_area .item:hover h3{padding-bottom:40px;}
#photo_area .item h3 b{display: block;font-size: 12px;letter-spacing: 0.1em;color: rgb(255 255 255 / 75%);text-align: center;text-transform: uppercase;}

/* news_area */
#news_area{padding:0;}
#news_area >div {display:block;padding: 70px 0;}
#news_area .bg_box {width: 100%;height: 100%;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;top: 0;left: 0;}
#news_area .title_box h2 {margin: 0 auto 12px;font-size: 25px;letter-spacing: 0.3em;color: var(--white);}
#news_list {width: var(--width-xxl);margin: 60px auto 0;background: none;}
#news_list li {margin: 15px;background: var(--white);}
#news_list ul li >div {border: 1px solid var(--info);margin: 10px;}
#news_list ul li .photo{height: 300px;overflow: hidden;}
#news_list ul li .photo img{width:100%;height: 100%;object-fit: cover;}
#news_list ul li .info{padding: 25px;}
#news_list ul li .time { margin-right: 40px; width: 70px; font-size: 14px; }
#news_list ul li h3 {margin: 5px 0;width: 100%;height: auto;font-size: 18px;}
#news_list ul li:hover h3{color: var(--primary);}
#news_list ul li article {margin: 5px 0;width: 100%;height: auto;font-size: 14px;-webkit-line-clamp: 2;color: #6b6b6b;}
#news_list ul li .more{margin-top: 20px;display: block;text-align: center;background: var(--secondary);padding: 5px 0;color: var(--white);font-size: 13px;letter-spacing: 1px;}

@media screen and (min-width: 1025px){
	#news_area .bg_box{background-attachment: fixed;}
	#about_area .about_wrap {width: 100%;flex-direction: column;align-items: center;}
	#about_area .title { margin: 0 20px; align-items: flex-start; flex-direction: row-reverse; }
	#about_area .info article {width: 60%;margin: 0 auto;}
}
@media screen and (max-width: 1440px){
	#news_list{width:90%;}
}
@media screen and (max-width: 1280px){
	#news_area .title_box h2{text-align: center;display: block;}
	#news_list ul li .photo{height:250px;}
}
@media screen and (max-width: 1024px){
	#photo_area .item{width: calc((100%/2) - 35px);margin: 15px;}
	#photo_area .item:last-child{width: calc(100% - 35px);}
	section .title_box h2 { padding: 2px; border-width: 1px 0; right: 15px; bottom: 15px; }
	#about_area .info { margin: 30px auto 0; width: 80%; }
}
@media screen and (max-width: 980px){
	#photo_area .item{width: calc(100% - 35px);}
}
@media screen and (max-width: 640px){
	#news_list{margin-top:30px;}
	section {padding: 40px 0;}
	#about_area .info {width: 100%;}
	#news_list ul li .time { font-weight: 100; font-size: 12px; }
	#news_list ul li h3 { margin: 0; width: 100%; }
	@keyframes circle2{0%{top:unset;bottom:50px}100%{top:unset;bottom:150px}}
}