/* header */
header #cis { position: absolute; top: 5vw; left: 0; z-index: 900; }
header #cis a { margin: auto; }
header #menubtn { width: 10vw; height: 10vw; }

/* hSearch */
#hSearch { top: 60px; }

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

/* section */
section { padding: 5vw 0 2vw; }
section >* { z-index: 3; }
section .title_box h2 { padding: 2px 5px; font-size: 28px; border: var(--secondary) solid; border-width: 0 1px; z-index: 20; right: 20px; bottom: 30px; }

/* about_area */
#about_area .title h2 { font-size: 30px; }
#about_area .info article { line-height: 200%; letter-spacing: .5em; font-size: 18px; }

/* product_area */
#product_area { padding-bottom: 0; background: no-repeat 0 bottom / auto 70%; }
#product_area .img_box { margin: 0 0 5vw 10vw; border-bottom-left-radius: 200px; }
#product_area .img_box img { height: 60vw; }
#product_area .info { padding: 0 100px; width: 700px; height: 300px; box-sizing: border-box; z-index: 10; right: 0; bottom: 0; justify-content: space-between; align-items: flex-end; }
#product_area .info >div { margin: auto; width: 100%; }
#product_area .info h3 { height: 37px; font-size: 22px; }
#product_area .info article { margin: 10px 0 20px; font-size: 15px; height: 75px; -webkit-line-clamp: 3; }
#product_area .info p { margin-right: 10px; font-weight: 300; }
#product_area .info p:first-letter { margin-right: 2px; font-size: 12px; }
#product_area .info .price_box { height: 28px; }

/* news_area */
#news_area >div { padding: 5% 0 0 5%; justify-content: space-between; }
#news_area .bg_box { width: 680px; height: 500px; border-top-right-radius: 200px; top: 0; left: 0; opacity: .3; }
#news_area .title_box h2 { margin-bottom: 50px; }
#news_list { margin-left: 5vw; padding: 6vw 0 6vw 6vw; box-sizing: border-box; flex: 1; }
#news_list ul { border-top: 1px rgba(var(--secondary-rgb), .6) solid; }
#news_list ul li >div { padding: 0 30px; border-bottom: 1px rgba(var(--secondary-rgb), .6) solid; }
#news_list ul li .time { margin-right: 40px; width: 70px; font-size: 14px; }
#news_list ul li h3 { margin: 30px 0; width: calc(100% - 110px); }

@media screen and (min-width: 1281px){
	header #cis { height: 12vw; display: flex; top: auto; bottom: 0; }
	header #webmenu { position: absolute; top: 1vw; right: 2%; }
}
@media screen and (min-width: 1025px){
	#about_area .about_wrap { width: 100%; flex-direction: row-reverse; justify-content: center; }
	#about_area .title { margin: 0 20px; align-items: flex-start; flex-direction: row-reverse; }
	#about_area .info article { height: 300px; line-height: 3em; }
	#product_area .img_box { margin-left: 13.33333%; }
	#product_area .img_box img { height: 45vw; }
	#news_list { margin-left: 180px; padding: 75px; }
}
@media screen and (max-width: 1024px){
	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){
	#product_area .img_box { border-bottom-left-radius: 0; }
	#product_area .info { margin-top: -25vw; padding: 10vw; width: 95vw; }
	#product_area .info article { height: 50px; -webkit-line-clamp: 2; }
	#news_area .bg_box { width: 100%; height: 70%; }
	#news_list { margin: 6vw 0 0 0; }
}
@media screen and (min-width: 641px){
	header #cis { width: 100%; }
}
@media screen and (max-width: 640px){
	header #cis { top: 15px; left: 4% }
	header #menubtn { width: 65px; height: 65px; }
	#news_list ul li >div { padding: 10px; }
	#news_list ul li .time { font-weight: 100; font-size: 12px; }
	#news_list ul li h3 { margin: 0; width: 100%; }
}