@charset "UTF-8";
/* CSS Document */
#captionBox {
    background-color: #fff;
}
#btnswrap {
    background-color: #fff;

}
#contentsWrap {
}


#pageTit {
	background: #000;
  padding: 0;
	position: relative;
	container-type: inline-size;
}
#pageTit .h2Box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	text-align: center;
}
#pageTit .h2Box .engTxt {
	letter-spacing: 0.2em;
	text-align: center;
	display: inline-block;
	margin: 0 auto;
	border-bottom: #fff solid 2px;
	margin-bottom: 0.5em;
	font-size: 1.4cqw;
	font-size: clamp(18px, 1.4cqw, 28px);
}
#pageTit .h2Box h2 {
	text-align: center;
	padding: 1em 0;
	letter-spacing: 0.2em;
	font-size: 1.3cqw;
	font-size: clamp(18px, 1.3cqw, 26px);
}
#pageTit .h2Box .lead {
	text-align: center;
	font-size: 0.9cqw;
	font-size: clamp(14px, 0.9cqw, 18px);
	line-height: 2;
}



/*========================================*/
/*=============== structure ==================*/
/*=========================================*/




#structure {}

#structure .itemBox dd,#structure .itemBox p, p, dd { 
	letter-spacing: 0;
}
/*#structure #headImg h2 {
  width: 45%;
  max-width: 450px;
}*/
#catStruct {
	letter-spacing: 0em;
}

#structure .titWrap {
  padding: 50px 0 25px;
  letter-spacing: 0.2em;
}
#structure .titWrap p.engTxt {
  font-size: 24px;
  color: #ae8f48;
  text-align: center;
  padding-bottom: 0em;
  letter-spacing: 0.3em;
}
#structure .titWrap h2 {
  font-size: 26px;
  text-align: center;
  padding: 0.5em 0;
}
#structure .pageNav {
  padding: 50px 0;
  max-width: 820px;
}
#structure .pageNav ul {
  justify-content: center;
}
#structure .pageNav ul li {
  margin: 0 1%;
  width: 31%;
}
#structure .pageNav ul li a {
  font-size: 15px;
  display: block;
  padding: 0.3em 0em;
  color: #ae8f48;
  border-top: #ae8f48 solid 1px;
  border-bottom: #ae8f48 solid 1px;
  letter-spacing: 0.2em;
  position: relative;
  text-align: center;
}
#structure .pageNav ul li a:hover:after,
#structure #catStruct .pageNav ul li:nth-of-type(1) a:after,
#structure #catQuality .pageNav ul li:nth-of-type(2) a:after,
#structure #catSecurity .pageNav ul li:nth-of-type(3) a:after {
  content: '';
  position: absolute;
  width: 18px;
  height: 12px;
  top: 100%;
  left: calc(50% - 9px);
  border-top: #ae8f48 solid 12px;
  border-left: transparent solid 9px;
  border-right: transparent solid 9px;
}

#structure .catTit h2 {
  max-width: 700px;
  margin: 0 auto;
  padding: 50px 0;
}
#structure p, #structure dd {
  font-size: 15px;
}
#structure p.caption {
  font-size: 12px;
}
.kome {
	text-indent: -1em;
	padding-left: 1em;
}
.kome::before {
	content: "※";
	
}
.sdw::after {
	text-shadow: 1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff,-1px 1px 1px #fff;
}


@media screen and (max-width : 599px ){

#structure .pageNav ul li a {
    font-size: 3vw;
		line-height: 1.2;
		display: flex;
justify-content: center;
align-items: center;
		height: 3.4em;
		padding-top: 0.2em;
		padding-bottom: 0;
  }
  #structure .titWrap p.engTxt {
    font-size: clamp(18px, 5.1vw, 20px);
  }
  #structure .titWrap h2 {
    font-size: clamp(16px, 5.1vw, 20px);
  }
  /*#structure #headImg h2 {
    width: 100%;
    max-width: 400px;
  }*/
  #structure p, #structure dd {
   font-size: clamp(13px, 3.5vw, 14px);
  }
  
  #structure #catStruct h4,
  #structure #catQuality h4,
	#structure #catSecurity h4 {
   font-size: clamp(15px, 4.3vw, 17px);
  }
	#structure #catStruct .row01 .flex0 {
		flex-direction: column-reverse;
	}

}


/*=============== structure ==================*/
#structure #catStruct h4,
#structure #catQuality h4,
#structure #catSecurity h4 {
	background-color: #eae8e0;
	color: #000;
	padding: 0.15em;
	text-align: center;
  width: 100%;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
	position: relative;
}

#catStruct {}

#catStruct .row01 {

}
#catStruct .row01 .flex {
	padding-top: 15px;
	align-items: flex-end;

}
#catStruct .row01 .flex .leftBox {
  width: 30%;
	max-width: 350px;

}
#catStruct .row01 .flex .rightBox {
  width: 66%;
	max-width: 790px;

}

#catStruct .row01 .flex .leftBox .caption {
  width: 100%;
	padding: 0.5em 0 0 1em;
}

#catStruct .row02 {
	padding: 50px 0;
}
#catStruct .row02 .flex .itemBox {
	width: 31%;
	max-width: 370px;
	container-type: inline-size;
}
#catStruct .row02 .flex .itemBox dl {}
#catStruct .row02 .flex .itemBox dt,
#catStruct .row03 .flex .leftBox dt{
	font-size: 18px;
	font-size: clamp(13px, 4.8cqw, 18px);
	text-align: center;
	border: #000 solid 1px;
	padding: 0.2em;
}
#catStruct .row02 .flex .itemBox dd,
#catStruct .row03 .flex .leftBox dd{
	padding-top: 0.6em;
	font-size: 3.8cqw;
	font-size: clamp(13px, 3.8cqw, 15px);
}
#catStruct .row02 .flex .itemBox .imgBox {}
#catStruct .row02 .flex .itemBox .imgBox p,
#catStruct .row03 .flex .itemBox p {
	text-align: center;
	font-size: 4.6cqw;
	font-size: clamp(13px, 4.6cqw, 18px);
}

#catStruct .row02 {
  padding: 50px 0 30px;
}
#catStruct .row02 .imgBox {
  margin: 0 auto;
  padding: 20px 0;
 
}

#catStruct .row03 {
	padding: 0 0 50px 0
}
#catStruct .row03 .flex {
	align-items: center;
}
#catStruct .row03 .flex .leftBox {
	width: 60%;
	border: #000 solid 1px;
	align-items: center;
}
#catStruct .row03 .flex .leftBox dl {
	padding: 20px;
	width: 55%;
}
#catStruct .row03 .flex .leftBox dt{
	border: none;
}
#catStruct .row03 .flex .leftBox .imgBox {
	width: 42%;
	max-width: 420px;
}
#catStruct .row03 .flex .itemBox {
	width: 35%;
}

@media screen and (max-width : 959px ){
	#catStruct .row02 .flex {
		max-width: 450px;
		margin: 0 auto;
		
	}
	#catStruct .row02 .flex .itemBox{
    width: 100%;
    max-width: 100%;
		padding: 15px 0;
	}
	#catStruct .row02 .flex .itemBox .imgBox{
		max-width: 350px;
	}
	#catStruct .row03 .flex {
		max-width: 700px;
		margin: 0 auto;
	}
	#catStruct .row03 .flex .leftBox {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}
	#catStruct .row03 .flex .itemBox{
		width: 100%;
    max-width: 450px;
		padding: 30px 0;
		margin: 0 auto;
	}
	#catStruct .row03 .flex .leftBox dl {
    width: 100%;
    padding: 20px;
}
	#catStruct .row03 .flex .leftBox .imgBox {
    width: 100%;
    max-width: 420px;
}
	
}


@media screen and (max-width : 599px ){
	#catStruct .row01 .flex .leftBox {
		width: 70%;
		max-width: 350px;
		margin: 0 auto;
		padding-bottom: 30px;
	}
	#catStruct .row01 .flex .rightBox {
		width: 100%;

	}
	
	
}



/*=============== quarity ==================*/
#catQuality {}

#catQuality .row01 {}
#catQuality .row01 > div {
  width: 47%;
}
#catQuality .row01 > div dt {
  font-size: 16px;
  padding-bottom: 0.5em;
}

#catQuality .row02 {
	padding-top: 30px;
}
#catQuality .row02 .flex01 {
	padding: 15px 0 30px;
}
#catQuality .row02 .flex01 .imgBox {
	width: 31%;
}
#catQuality .row02 .flex01 p {
	width: 66%;
}

#catQuality .row03 {}
#catQuality .row03 .flex {
	padding-bottom: 20px;
}
#catQuality .row03 .flex .leftBox {
	width: 47%;
}
#catQuality .row03 .flex .rightBox {
	width: 50%;
}

#catQuality .row04 {
  padding: 20px 0;
}
#catQuality .row04 h5 {
  width: 250px;
  margin: 0;
  text-align: left;
  border: #9c907d solid 1px;
  margin-right: 10px;
  display: flex;
justify-content: center;
align-items: center;
}
#catQuality .row04 .itemWrap {
  flex: 1;
}
#catQuality .row04 .itemBox:nth-child(1) {
  margin-bottom: 10px;
}

#catQuality .row04 .itemBox .leftBox {
  width: 150px;
  border: #9c907d solid 1px;
  display: flex;
justify-content: center;
align-items: center;
  margin-right: 1em;
  padding: 0.6em 0;
	font-size: 16px;
	line-height: 1.3;
	text-align: center;
}
#catQuality .row04 .itemBox .rightBox {
  flex: 1;
  align-items: center;
  display: flex;
}
#catQuality .row04 .itemBox .rightBox p {
	font-size: 17px;
}
#catQuality .row04 .itemBox .rightBox .alRight {

}
#catQuality .row05 {
   padding: 20px 0 50px;
}


@media screen and (max-width : 959px ){
	#catQuality .row01 > div {
    width: 100%;
		padding-bottom: 30px;
	}
	#catQuality .row02 {
    padding-top: 0px;
	}
	#catQuality .row03 .flex {
		max-width: 600px;
		margin: 0 auto;
	}
	#catQuality .row03 .flex .leftBox,
	#catQuality .row03 .flex .rightBox {
		width: 100%;
		padding-bottom: 30px;
	}
	#catQuality .row04 h5 {
		width: 100%;
		font-size: 16px;
		padding: 1em ;
		margin-bottom: 1em;
	}
	#catQuality .row04 h5 br {
		display: none;
	}
	#catQuality .row04 .itemBox .rightBox p {
    font-size: 15px;
	}
	#catQuality .row05 p {
		padding-bottom: 15px;
	}
}


@media screen and (max-width : 599px ){
	#catQuality .row02 .flex01 .imgBox {
		width: 75%;
		margin: 0 auto;
		padding-bottom: 15px;
	}
	#catQuality .row02 .flex01 p {
		width: 100%;
	}
	
	
}

/*=============== Security ==================*/
#catSecurity {}
#catSecurity .row01 {
	padding-bottom: 50px;
}
#catSecurity .row01 .flex {}
#catSecurity .row01 .flex .leftBox {
	width: 82.5%;
}
#catSecurity .row01 .flex .rightBox {
	width: 14%;
}
#catSecurity .row02 {
	padding-bottom: 50px;
}
#catSecurity .row02 h5 {
	text-align: center;
	font-size: 16px;
	padding-bottom: 1em;
}
#catSecurity .row02 .flex {
	max-width: 1000px;
	margin: 0 auto;
}
#catSecurity .row02 .flex .itemBox {
	width: 28%;
}
#catSecurity .row02 .flex .itemBox p {
	padding-top: 0.3em;
}
#catSecurity .row03 {
	padding-bottom: 50px;
}
#catSecurity .row03 .leftBox {
	width: 50%;
}
#catSecurity .row03 .leftBox .item01 {
	width: 56%;
}
#catSecurity .row03 .leftBox .item02 {
	width: 36%;
}
#catSecurity .row03 .rightBox {
	width: 46%;
}
#catSecurity dt {
	font-size: 16px;
	text-align: center;
	border-bottom: #000 solid 1px;
	padding-bottom: 0.2em;
	
}

#catSecurity dd {
	padding: 0.3em 0;
}
#catSecurity .row03 .item01 dt{
	letter-spacing: -0.06em;
}
#catSecurity .row03 .itemBox {
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
}
#catSecurity .row03 .leftBox .imgBox {
	max-width: 214px;
	margin: 0 auto;
}
#catSecurity .row03 .rightBox .imgBox {
	max-width: 284px;
	margin: 0 auto;
}
#catSecurity .row03 .rightBox .imgBox::after {
	content: "（参考写真）";
	right: auto;
	left: 100%;
	white-space: nowrap;
}

#catSecurity .row04 {
	padding-bottom: 50px;
}
#catSecurity .row04 .itemBox {
	width: 48%;
}
#catSecurity .row04 .itemBox dd {
	padding-top: 0.3em;
	align-items: flex-start;
}
#catSecurity .row04 .itemBox dd p {
	width: 47%;
	
}
#catSecurity .row04 .itemBox dd .imgBox {
	width: 49%;
	max-width: 280px;
}
#catSecurity .row04 .itemBox dd .imgBox.fuchi::after {
	text-shadow: 1px 1px 0px #fff,1px -1px 0px #fff,-1px -1px 0px #fff,-1px 1px 0px #fff;
}
#catSecurity .row04 .itemBox dd .imgBox.fuchi::before {
	content: "image";
	font-size: 10px;
	bottom: 0.1em;
	position: absolute;
	right: 53%;
	text-shadow: 1px 1px 0px #fff,1px -1px 0px #fff,-1px -1px 0px #fff,-1px 1px 0px #fff;
}

@media screen and (max-width : 959px ){
	#catSecurity .row01 .flex .leftBox {
		width: 100%;
	}
	#catSecurity .row01 .flex .rightBox {
		width: 50%;
		max-width: 180px;
		margin: 0 auto;
		padding-top: 30px;
	}
	#catSecurity .row03 .leftBox {
		width: 100%;
		padding-bottom: 30px;
	}

	#catSecurity .row03 .rightBox {
		width: 100%;
	}
	#catSecurity .row04 .itemBox {
    width: 100%;
		padding-bottom: 30px;
	}
	#catSecurity .row04 .itemBox dd p {
    width: auto;
		flex: 1;
		margin-right: 1em;
	}
}


@media screen and (max-width : 599px ){
	#catSecurity .row02 .flex {
		width: 100%;
		max-width: 350px;
		margin: 0 auto;
	}
	#catSecurity .row02 .flex .itemBox {
    width: 100%;
		padding-bottom: 20px;
}
	#catSecurity .row03 .leftBox .item01,
	#catSecurity .row03 .leftBox .item02{
		width: 100%;
		padding-bottom: 30px;
	}
	#catSecurity .row03 dl {
		width: 100%;
	}
	#catSecurity .row03 .leftBox .imgBox {
    max-width: 300px;
    margin: 0 auto;
	}
	#catSecurity .row04 .itemBox {
		width: 100%;
    max-width: 350px;
		margin: 0 auto;
	}
	#catSecurity .row04 .itemBox dd {
		display: block;
		
	}
	#catSecurity .row04 .itemBox dd .imgBox {
    width: 100%;
		margin: 0 auto;
		
	}
	#catSecurity .row04 .itemBox dd p {
    width: 100%;
		padding-bottom: 15px;
	}
#structure #catStruct h4,
  #structure #catQuality h4,
	#structure #catSecurity h4 {
   font-size: clamp(15px, 4.0vw, 17px);
		letter-spacing: 0em;
  }
	
	
}