@charset "UTF-8";
/* CSS Document */
 #pageTitle {
	/*background-color: #003670;*/
	padding: 2em 0 3em;
	 background-image: url("../img/bg-title.jpg");
	 background-position: center center;
	 background-repeat: no-repeat;
	 background-size: cover;
}
#pageTitle h2 {
	font-size: 24px;
	font-size: clamp(18px, 2.0vw, 24px);
	color: #fff;
}
#pageTitle h2 .engTxt {
	display: block;
	width: 7em;
	margin: 0 auto;
	color: #b4a150;
	font-size: 140%;
	letter-spacing: 0.3em;
	border-bottom: #b4a150 solid 2px;
	margin-bottom: 0.5em;
	text-shadow: 2px 2px 5px #000,-2px 2px 5px #000,-2px -2px 5px #000,2px -2px 5px #000,0px 0px 10px #000,0px 0px 20px #000,0px 0px 30px #000;
	
}
#captionWrap,#btnswrap {
	background: #000;
	color: #fff;
}
#captionWrap .captionBox {
    margin-bottom: 0px;
}

@media screen and (max-width: 599px) {
#pageTitle h2 {
		font-size: 16px;
		font-size: clamp(15px, 4.3vw, 17px);
	}
}
/*========================================*/
/*=============== design ==================*/
/*=========================================*/
#design {}
#design #headImg h2 {
  width: 50%;
  max-width: 460px;
  
}
#design #titBox {
  padding: 20px 0 50px;
	background-color: #000;
	color: #fff;
}
#design #titBox h1 {
  text-align: center;
  font-size: 28px;
  padding: 1em 0;
  letter-spacing: 0.2em;
	color: #b4a150;
}
#design #titBox p.lead {
  text-align: center;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.1em;
}
#imgsWrap a {
  position: relative;
}
#imgsWrap a::after {
  content: attr(data-title);
  position: absolute;
  font-size: 18px;
  color: #fff;
  right: 0.5em;
  bottom: 0.2em;
  letter-spacing: 0.1em;
  text-shadow: 0px 0px 6px rgba(0,0,0,0.7),1px 1px 4px rgba(0,0,0,0.7),1px -1px 4px rgba(0,0,0,0.7),-1px 1px 4px rgba(0,0,0,0.7),-1px -1px 4px rgba(0,0,0,0.7);
}
#design #imgsWrap {
 /* background-color: #333333;
  max-width: 1600px;*/
  padding-bottom: 50px;
	background-color: #000;
}
#design #imgsWrap .f-In {
  background-color: #333333;
}
/*#design #imgsWrap:hover a img {
  opacity: 0.4;
  transition: 0.5s all;
}*/
#design #imgsWrap .leftBox {
  width: 60%;
}
#design #imgsWrap .rightBox {
  width: 40%;
}
#design #imgsWrap ul {

  width: 100%;
}


#design #imgsWrap .flex02 .leftBox {
  width: 50%;
}
#design #imgsWrap .flex02 .rightBox {
  width: 50%;
}

#design #imgsWrap .flex04 .leftBox {
  width: 50%;
}
#design #imgsWrap .flex04 .rightBox {
  width: 50%;
}




#design #imgsWrap a {
  display: block;
}
#design #imgsWrap a:hover {
  opacity: 1;
	/* filter: brightness(120%) saturate(110%);*/
}
#design #imgsWrap a:hover img {
  opacity: 1;
  transition: 0.3s all;
}

/*=================for LightBox Captions=================*/
#design .lb-data .lb-details {
width: 98.5%;
float: left;
text-align: right;
line-height: 1.4em;
margin-top: -3em;
position: relative;
/* font-size: 50px; */
}
#design .lb-data .lb-caption {
font-size: 18px;
font-weight: 700;
line-height: 1em;
}
#design .lb-data .lb-caption {
  text-shadow: 0px 0px 6px rgba(0,0,0,0.5),1px 1px 4px rgba(0,0,0,0.5),1px -1px 4px rgba(0,0,0,0.5),-1px 1px 4px rgba(0,0,0,0.5),-1px -1px 4px rgba(0,0,0,0.5);
}
#design .lb-data .lb-number {
  display: none !important;
}

@media screen and (max-width: 959px) {
  
}
@media screen and (max-width: 599px) {
	 #pageTitle {
		background-image: url("../img/bg-title_sp.jpg");
	}
  #design #titBox {
    /*max-width: 500px;*/
  }
  #design #titBox h1 {
    width: 100%;
    
  }
  #design #titBox p {
    text-align: justify;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 0;
  }
  #design #titBox p br {
   /* display: none;*/
  }
  #design #imgsWrap {
    /*background-color: #fff;*/
		padding-bottom: 0;
  }
  #design #imgsWrap .leftBox {
    width: 100%;
  }
  #design #imgsWrap .rightBox {
    width: 100%;
  }
  #design #imgsWrap a {
    display: block;
  }
  #design #imgsWrap a:nth-of-type(1),
  #design #imgsWrap a:nth-of-type(2),
  #design #imgsWrap a:nth-of-type(3),
  #design #imgsWrap a:nth-of-type(4),
  #design #imgsWrap a:nth-of-type(5),
  #design #imgsWrap a:nth-of-type(6),
  #design #imgsWrap a:nth-of-type(7),
	#design #imgsWrap a:nth-of-type(8){
    width: 100%;
    /*margin-bottom: 10px;*/
    position: relative;
    
  }
  #design #imgsWrap .flex02 .leftBox,
	#design #imgsWrap .flex04 .leftBox,
	#design #imgsWrap .flex05 .leftBox {
    width: 100%;
  }
  #design #imgsWrap .flex02 .rightBox,
	#design #imgsWrap .flex04 .rightBox,
	#design #imgsWrap .flex05 .rightBox {
    width: 100%;
  }
  #design #imgsWrap .flex02 ul li:nth-of-type(1),
  #design #imgsWrap .flex02 ul li:nth-of-type(2),
  #design #imgsWrap .flex02 ul li:nth-of-type(3){
  width: 100%;
}

  #design #imgsWrap,
  #design #imgsWrap a
  {
    pointer-events: none;
    position: relative;
  }
  #design #imgsWrap a:after{
    content:attr(data-title);
    position: absolute;
    right: 0.8em;
    bottom: 0.3em;
    color: #fff;
    text-shadow: 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 1px #000;
  }
  
}
  


@media screen and (max-width: 959px) {
  #design #titBox h1 {
    font-size: clamp(22px, 3vw, 24px);
  }
  #design #titBox p.lead {
    font-size: clamp(14px, 2vw, 16px);
  }
  #imgsWrap a::after {
    font-size: clamp(16px, 2.2vw, 18px);
  }
  
}
@media screen and (max-width: 599px) {
	#pageTitle {
	 background-image: url("../img/bg-title_sp.jpg");
	}
  #design #titBox h1 {
		font-size: 5.2vw;
    font-size: clamp(17px, 5.0vw, 21px);
    padding: 1em 0;
		letter-spacing: 0.1em;
  }
  #design #headImg h2 {
    width: 100%;
    max-width: 400px;
  }
  #design #titBox p.lead {
		font-size: 4vw;
    font-size: clamp(12px, 4vw, 15px);
    /*text-align: justify;*/
    letter-spacing: 0em;
  }
  #design #titBox p.lead br {
    /*display: none;*/
    
  }
  #imgsWrap a::after {
		font-size: 3.7vw;
    font-size: clamp(13px, 3.7vw, 15px);
  }
	#captionWrap .captionBox {
		padding: 2em 0;
	}

}