@charset "utf-8";
/* CSS Document */

.wrap {background-color: #f9f9f6; padding: 60px 0;}
.wbode {}

/*PC:body-------------------------------------*/
@media screen and (min-width:1084px) {
	.pc {display: block !important;}
	.tb {display: none !important;}
	.sp {display: none !important;}
	
	.h2wrap {width:100%; float:left; margin-bottom:30px;}
	.h2wrap h2 {font-size:26px; font-weight:400; letter-spacing:0.18em; color:#1d1d1d; border-left: 4px solid #1d1d1d; padding-left: 15px; margin:0;}
	.h2wrap h2 span {font-size:14px; font-weight:normal; color:#888; margin-left:10px;}
	.works_container {width:100%; float:left; background:#ffffff; border:1px solid #e0e0e0; box-sizing:border-box; padding:30px; border-radius:4px;}
	.works_container h3 {font-size:18px; font-weight:bold; margin:0 0 15px 0; color:#1d1d1d;}
	.works_container h3 span {font-size:13px; font-weight:normal; color:#666; margin-left:10px;}
	.work_item {width:100%; float:left; margin-bottom:15px;}
	.span1 {display:inline-block; background:#1d1d1d; color:#fff; font-size:11px; padding:3px 8px; margin-right:5px; border-radius:2px;}
	.span2 {display:inline-block; background:#666; color:#fff; font-size:11px; padding:3px 8px; margin-right:5px; border-radius:2px;}
	.works_container p {font-size:14px; line-height:1.7; color:#333; margin:0 0 15px 0; clear:both;}
	
	/*button*/
	.button-arr {width: 180px; margin: 0 auto;}
	.button-arr a {font-family:'Noto Serif JP',serif;font-size:14px;letter-spacing:.1em;color:#333;font-weight:600;display:block;position:relative;box-sizing:border-box;max-width:180px;text-align:center;padding:4px 16px 4px 0;margin:24px;margin-inline:auto;text-decoration:none;cursor:pointer;transition:all 0.3s;}
	.button-arr a::before {content:"";display:block;position:absolute;width:180px;height:1px;background:#333;bottom:0;transition:all 0.3s;}
	.button-arr a::after {content:"";display:block;position:absolute;width:30px;height:1px;background:#333;rotate:40deg;right:-3px;bottom:10px;transition:all 0.3s;}
	.button-arr a:hover::after,.button-arr a:hover::before {translate: 20px 0;transition: all 0.3s;}
	
	
}
/*TB:body-------------------------------------*/
@media screen and (min-width: 560px) and (max-width: 1083px) {
	.pc {display: none !important;}
	.tb {display: block !important;}
	.sp {display: none !important;}
	
	.h2wrap {width:100%; float:left; margin-bottom:20px; padding:0 2%;}
	.h2wrap h2 {font-size:20px; font-weight:400; letter-spacing: 0.18em; color:#1d1d1d; border-left: 4px solid #1d1d1d; padding-left: 10px; margin:0;}
	.h2wrap h2 span {font-size:12px; font-weight:normal; color:#888; margin-left:8px;}
	.works_container {width:100%; float:left; background:#ffffff; border:1px solid #e0e0e0; box-sizing:border-box; padding:30px; border-radius:4px;}
	.works_container h3 {font-size:18px; font-weight:bold; margin:0 0 15px 0; color:#1d1d1d;}
	.works_container h3 span {font-size:13px; font-weight:normal; color:#666; display: block;}
	.work_item {width:100%; float:left; margin-bottom:15px;}
	.span1 {display:inline-block; background:#1d1d1d; color:#fff; font-size:11px; padding:3px 8px; margin-right:5px; border-radius:2px;}
	.span2 {display:inline-block; background:#666; color:#fff; font-size:11px; padding:3px 8px; margin-right:5px; border-radius:2px;}
	.works_container p {font-size:14px; line-height:1.7; color:#333; margin:0 0 15px 0; clear:both;}
	
	/*button*/
	.button-arr {width: 180px; margin: 0 auto;}
	.button-arr a {font-family:'Noto Serif JP',serif;font-size:14px;letter-spacing:.1em;color:#333;font-weight:600;display:block;position:relative;box-sizing:border-box;max-width:180px;text-align:center;padding:4px 16px 4px 0;margin:24px;margin-inline:auto;text-decoration:none;cursor:pointer;transition:all 0.3s;}
	.button-arr a::before {content:"";display:block;position:absolute;width:180px;height:1px;background:#333;bottom:0;transition:all 0.3s;}
	.button-arr a::after {content:"";display:block;position:absolute;width:30px;height:1px;background:#333;rotate:40deg;right:-3px;bottom:10px;transition:all 0.3s;}
	.button-arr a:hover::after,.button-arr a:hover::before {translate: 20px 0;transition: all 0.3s;}
	
}
/*SP:body-------------------------------------*/
@media screen and (max-width: 559px) {
	.pc {display: none !important;}
	.tb {display: none !important;}
	.sp {display: block !important;}
	
	.h2wrap {width:100%; float:left; margin-bottom:20px; padding:0 2%;}
	.h2wrap h2 {font-size:20px; font-weight:400; letter-spacing: 0.18em; color:#1d1d1d; border-left: 4px solid #1d1d1d; padding-left: 10px; margin:0;}
	.h2wrap h2 span {font-size:12px; font-weight:normal; color:#888; margin-left:8px;}
	.works_container {width:100%; float:left; background:#ffffff; border:1px solid #e0e0e0; box-sizing:border-box; padding:30px; border-radius:4px;}
	.works_container h3 {font-size:18px; font-weight:bold; margin:0 0 15px 0; color:#1d1d1d;}
	.works_container h3 span {font-size:13px; font-weight:normal; color:#666; display: block;}
	.work_item {width:100%; float:left; margin-bottom:15px;}
	.span1 {display:inline-block; background:#1d1d1d; color:#fff; font-size:11px; padding:3px 8px; margin-right:5px; border-radius:2px;}
	.span2 {display:inline-block; background:#666; color:#fff; font-size:11px; padding:3px 8px; margin-right:5px; border-radius:2px;}
	.works_container p {font-size:14px; line-height:1.7; color:#333; margin:0 0 15px 0; clear:both;}
	
	/*button*/
	.button-arr {width: 160px; margin: 0 auto;}
	.button-arr a {font-family:'Noto Serif JP',serif;font-size:14px;letter-spacing:.1em;color:#333;font-weight:600;display:block;position:relative;box-sizing:border-box;max-width:160px;text-align:center;padding:4px 16px 4px 0;margin:24px;margin-inline:auto;text-decoration:none;cursor:pointer;transition:all 0.3s;}
	.button-arr a::before {content:"";display:block;position:absolute;width:160px;height:1px;background:#333;bottom:0;transition:all 0.3s;}
	.button-arr a::after {content:"";display:block;position:absolute;width:30px;height:1px;background:#333;rotate:40deg;right:-3px;bottom:10px;transition:all 0.3s;}
	.button-arr a:hover::after,.button-arr a:hover::before {translate: 20px 0;transition: all 0.3s;}
	
}