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


/*****************************************************************************
topBox
*****************************************************************************/
.contentsWrapper2 .topBox {
	padding-bottom: 100px;
}
.contentsWrapper2 .topBox .text {
	margin-right: 650px;
}
.contentsWrapper2 .topBox.text .con {
	margin-top: -50px; 
}
.contentsWrapper2 .topBox .img {
	position: absolute; 
	right: -30px;
	top: 100px; 
	width: 540px;
}
.contentsWrapper2 .topBox .img img {
	width: 100%;
}

@media screen and (max-width: 1300px) {
	.contentsWrapper2 .topBox {
	}
	.contentsWrapper2 .topBox .text {
		margin-right: 0 !important;
	}
	.contentsWrapper2 .topBox .text .con {
		margin-top: 0; 
	}
	.contentsWrapper2 .topBox .img {
		position: relative; 
		right: auto;
		top:  auto;
		width: auto;
		text-align: center;
		margin: 35px 0 0;
	}
	.contentsWrapper2 .topBox .img img {
		width: 80%;
		max-width: 500px;
	}
}








/*****************************************************************************
metalHdBox
*****************************************************************************/

.metalHdBox {
	padding: 70px 0;
}
.metalHdBox .m_left {
	margin-right: 600px;
}
.metalHdBox .m_txt {
	margin-top: 70px;
}
.metalHdBox .m_right {
	width: 500px;
    position: absolute;
    top: 90px;
    right: -20px;
    text-align: center;
}

.metalHdBox .m_right.section02img {
	width: 420px;
    top: 120px;
    right: 0;
}
.metalHdBox .m_right.section03img {
 	width: 420px;
   top: 120px;
}
.metalHdBox .m_right.section04img {
	width: 600px;
    right: -40px;
}
.metalHdBox .m_right.section05img {
	width: 600px;
	top: 40px;
	right: -40px;
}
.metalHdBox .m_right img {
    width: 100%;
}


@media screen and (max-width: 1300px) {
	.metalHdBox {
		padding: 50px 0;
	}
	.metalHdBox .m_left {
		margin-right: 0;
		text-align: center;
	}
	.metalHdBox .m_left .hdType04{
		text-align: left;
	}
	.metalHdBox .m_txt {
		text-align: left;
		margin-top: 50px;
	} 
	.metalHdBox .m_right {
		width: 100% !important;
		position: relative;
		top: auto !important;
		right: auto !important;
		text-align: center;
		margin: 30px auto 0;
	}
	.metalHdBox .m_right img {
		width: 80%;
		max-width: 400px;
	}
	.metalHdBox .m_right.section02img img {
		width: 55%;
	}
	.metalHdBox .m_right.section03img img {
		width: 60%;
	}
	.metalHdBox .m_right.section04img img {
		width: 90%;
		max-width: 600px;
	}
	.metalHdBox .m_right.section05img img {
		width: 90%;
		max-width: 600px;
	}
}



/*****************************************************************************
dlSets
*****************************************************************************/
.dlSets dl {
	display: flex;
	align-items: flex-start;
	position: relative;
	line-height: 1.3;
	padding: 3px 0;
	padding-left: 1.2em;
}
.dlSets dl:after {
	content: "●";
	color: #1b1c80;
	position: absolute;
	top: 3px;
	left: 0;
}
.dlSets dt {
	margin-right: 5px;
	display: flex;
	align-items: center;
	width: 10em;
}
.dlSets dt.long {
	width: 15em;
}
.dlSets dt::after {
	/*content: "\f061";
  font-family: FontAwesome;*/
	content: "";
	border-top: 2px dotted #1b1c80;
	height: 0;
	flex: 1;
	margin-left: 10px;
}
.dlSets dd {
	flex: 1;
}


/*****************************************************************************
rasupatoBox
*****************************************************************************/
.rasupatoBox {
	display: flex;
	line-height: 1;
}
.rasupatoBox .box {
	width: calc((100% - 30px)/2);
	margin-left: 30px;
}
.rasupatoBox .box:nth-child(2n + 1) {
	margin-left: 0;
}
.rasupatoBox .box .img img {
	width: 100%;
}
.rasupatoBox .box .title {
	margin: 15px 0 0;
	font-size: 1.14rem;
}

@media screen and (max-width: 1000px) {
	.rasupatoBox {
		display: block;
	}
	.rasupatoBox .box,
	.rasupatoBox .box:nth-child(2n + 1) {
		width: 100%;
		max-width: 600px;
		margin: 40px auto 0;
	}
}












/*****************************************************************************
section3conImg
*****************************************************************************/
.section3conImg {
}
.section3conImg img {
	max-width: 500px;
	width: 90%;
}
@media screen and (max-width: 1300px) {
	.section3conImg {
		text-align: center;
		padding-bottom: 70px;
	}
}



/*****************************************************************************
bodyBgSet
*****************************************************************************/

.contentsWrapper .contentBox {
	min-height: 100vh;
}

body > .bodyBgSet li {
	position: fixed;
	width: 100%;
	height: 100vh;
	background: 50% 50% no-repeat;
	background-size: cover;
	z-index: 1;	
	visibility: hidden;
}
body > .bodyBgSet li.on {/*スクロール時*/
	visibility: visible;
}

#bodyBg01  {
	background-image:url(../../common/images/metal/back01.jpg);
}
#bodyBg02  {
	background-image:url(../../common/images/metal/back02.jpg);
}
#bodyBg03  {
	background-image:url(/metal/images/back03.jpg);
}
#bodyBg04  {
	background-image:url(/metal/images/back04.jpg);
}
#bodyBg05  {
	background-image:url(/metal/images/back05.jpg);
}
@media screen and (max-width: 600px) {
	#bodyBg01  {
		background-image:url(../../common/images/metal/back01_sp.jpg);
	}
	#bodyBg02  {
		background-image:url(../../common/images/metal/back02_sp.jpg);
	}
	#bodyBg03  {
		background-image:url(/metal/images/back03_sp.jpg);
	}
	#bodyBg04  {
		background-image:url(/metal/images/back04_sp.jpg);
	}
	#bodyBg05  {
		background-image:url(/metal/images/back05_sp.jpg);
	}
}


.metal_section01,
.metal_section02,
.metal_section03,
.metal_section04,
.metal_section05,
.metal_section06 {
	z-index: 2 !important;
}


.inspectionSystem dl {
	padding-left: 20px;
	margin: 20px 0 0;
	position: relative;
}
.inspectionSystem dl::before {
	content: "";
	border-top: 1px solid #1A1B7F;
	position: absolute;
	width: 12px;
	top: 0.5em;
	left: 0;
}
.inspectionSystem dt {
	line-height: 1;
	color: #10104B;
	font-weight: 700;
	margin-top: 13px;
}


.paintingMethod{
	display: flex;
	margin: 0 10px;
}
.paintingMethod li{
	padding: 0 20px;
	width: 50%;
}
.paintingMethod li img{
	width: 100%;
}
@media screen and (max-width: 600px) {
	.paintingMethod{
		display: block;
		margin: 0;
	}
	.paintingMethod li{
		padding: 0 0 20px;
		width: 100%;
	}
	.paintingMethod li .hdType21{
		margin-bottom: 15px;
	}
}