@charset "UTF-8";

/* --------------------
   WORKS
-------------------- */
#pagenaka {
  height: 120px;
  background: url("../images/pagebackground.jpg") no-repeat center top;
  background-size: cover;}
#works {
  position: relative;
  padding-top: 80px;
  padding-bottom: 200px;
  background: #FEF4EB;}
#works h1 {
	padding-bottom: 60px;
	text-align: center;
	color: #402011;}
#works .list {
	flex-wrap: wrap;
	justify-content: center;
	gap:50px 40px;
	display: flex;}
#works .item {
  position: relative;
  width: 520px;}
#works .beforeafter { border: 4px solid #402011;}
#works .beforeafter img {
  width: 100%;
  height: 340px;
  object-fit: cover;}
#works .item p {
  margin-top: 10px;
  text-align: center;}
#works .item p span {
  display: inline-block;
	margin: 2px;
  background: #fff;
  padding: 3px 20px 5px;
	font-weight: 500;
  border-radius: 20px;}
#works .item h2 {
	text-align: center;
	letter-spacing: 0;
	background: #402011;
	border-radius: 6px 6px 0 0;
	height: auto;
  line-height: 1.4;
	padding: 12px 20px 10px;
	color: #FEF4EB;}

@media screen and (max-width: 1080px){
	#works { padding: 200px 0 160px;}
	#works .item p span { display: inline-block;}}
@media screen and (max-width: 768px){
  #pagenaka { height: 50px;}
  #works::after { height: 60px;}
	#works { padding: 40px 0 60px;}
	#works h1 { letter-spacing: normal;}
	#works .beforeafter img { height: 240px;}}


.more {
	margin: 60px auto 0;
	max-width: 200px;
	line-height: 60px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	border-radius: 6px;
	border: 2px solid #EA6120;}