/* Top
----------------------------------------------- */
.conteBoxSp {
overflow: hidden;
}
.topTxtBox {
color: #044e87;
font-size: 18px;
padding-bottom: 30px;
}
h2.topTxt {
font-size: 22px;
padding: 0;
}
.titIcon {
background: url(../img_index/mark_oto.png) no-repeat;
background-position: 0 23px;
background-size: 30px 30px;
padding-left: 40px;
}
.titIcon2 {
background: url(../img_index/mark_honoo.png) no-repeat;
background-position: 0 23px;
background-size: 30px 30px;
padding-left: 40px;
}
.imgArea {
padding-top: 20px;
}
.topBox {
padding-bottom: 30px;
}
.topBox .imgArea {
padding: 20px 0;
}
.rowBox .imgArea , .rowBox .imgArea2 {
padding: 20px 0;
width: 48%;
float: left;
}
.rowBox .imgArea2 {
margin-left: 2%;
}
.imgArea img,.imgArea2 img {
width: 100%;
height: auto;
}
h3.tecTit {
position: relative;
padding: 5px 5px 5px 42px;
background: #044e87;
font-size: 24px;
color: white;
margin-left: -16px;
line-height: 1.3;
z-index:-1;
}
h3.tecTit:before {
position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px white;
border-bottom: solid 79px transparent;
z-index:-2
}
h3.tecTit:after {
position: absolute;
content: '';
right: -2px;
top: -2px;
border: none;
border-right: solid 40px white;
border-top: solid 79px transparent;
z-index:-2
}
.tadaBox {
padding: 30px 0.4% 10px;
overflow: hidden;
}
.tadaBox .imgBox {
margin: 0 auto;
width: 100%;
}
.tadaBox .imgBox ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
list-style: none;
}
.tadaBox .imgBox ul li {
width: 23%;
margin: 0 1%;		
}
.tadaBox .imgBox img {
width: 100%;
height: auto;
}
.tdR {
padding-top: 20px;
}
.tdR li:before {
font-family: "Font Awesome 5 Free";
content: '\f14a'; /* アイコンのunicode */
padding-right: 8px;
}
.reiBox ul {
list-style: none;
margin: 0;
padding: 20px 0 0;
}
.reiBox ul li {
font-size: 18px;
}
.txt .reiBox {
overflow: hidden;
padding: 20px 30px;
border: #E5EDF3 dotted 3px;
}
.crBox {
overflow: hidden;
}
.linkBtBox {
list-style: none;
margin: 0;
padding: 20px 0 0;
font-size: 0;
}
.linkBtBox li {
display: inline-block;
width: 100%;	
font-size: 16px;
}
.linkBtBox li a {
position: relative;
display: flex;
align-items: center;
overflow: hidden;
margin: 0 auto;
padding: 0 24px 0 0;
color: #044e87;
text-decoration: none;
border: #044e87 solid 1px;
text-align: left;
vertical-align: middle;
}
.linkBtBox li a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
zoom: 1; 
}
.linkBtBox li a:after {
position: absolute;
top: 30%;
right: 15px;
bottom: 0;
margin: auto;
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: bold;
font-size: 16px;
line-height: 1.4;
}
.linkBtBox li img {
float: left;
width: 20%;
height: auto;
margin-right: 10px;
}
.linkBtBox li p {
padding: 0;
font-size: 14px;
line-height: 1.4;
}
.reiTit {
position: relative;
display: inline-block;
color: #fff;
font-size:18px;
background-color: #333;
padding: 5px 25px;
}
.reiTit::before{
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: 45%;
bottom: -25px;
border: 10px solid transparent;
border-top: 15px solid #333;
}
.tadaBox .tdR ul {
padding: 10px 0 0;
list-style: none;
}
.point {
padding-bottom: 70px;
font-size: 20px;
}
.guideBox {
padding: 70px 0;
font-size: 16px;
}
.guideBox h2 {
padding: 0;
}
.guideBox .txtBg {
background: url(../technology/img/technology_top_bg1.jpg) no-repeat top right;
background-size:contain;
padding: 160px 20px 0;
}
.guideBox .txt {
padding: 20px;
color: #fff;
background-color: rgba(4,78,135,0.8);
}

@media screen and (max-width: 767px) {
	.topTxtBox p {
	text-align: left;
	}
	h3.tecTit {
	text-align: center;
	}
	.tadaBox .tdR li {
	display: inline-block;
	width: 48%;
	}
	.tadaBox .tdR li :nth-child(2n) {
	margin-left: 4%;
	}
}
@media screen and (min-width: 768px), print {
	.topTxtBox {
	margin: 0 4%;
	}
	.topTxtBox h2.topTxt {
	font-size: 36px;
	}
	.topBox,.rowBox {
	overflow: hidden;
	padding-top: 30px;
	}	
	.topBox .txt {
	float: left;
	width: 420px;
	}
	.topBox .imgArea {
	float: right;
	padding-top: 0;
	padding-bottom: 0;
	width: 420px;
	}
	.titIcon {
	}
	.rowBox .imgArea , .rowBox .imgArea2 {
	padding-top: 40px;
	padding-bottom: 0;
	width: 420px;
	float: left;
	}
	.rowBox .imgArea2 {
	margin-left: 40px;
	}
	.linkBtBox {
	text-align: center;
	padding-top: 40px;	
	}
	.linkBtBox li {
	width: 35%;
	margin: 0 10px;
	}
	.linkBtBox li a:after {
	top: 30%;
	font-size: 20px;
	}
	.linkBtBox li img {
	width: 20%;
	}
/*	.linkBtBox li p {
	padding: 18px 0 0 0;
	}*/
	.tadaBox {
	padding: 40px 0 0;
	}
	.tadaBox .imgBox {
	float: left;
	width: 100%;
	}	
	.txt p {
	padding-top: 0;
	}
	p.reiTit {
	margin-left: 80px;
	padding: 5px 25px;
	float: left;
	}
	.reiTit::before{
	content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 15px solid #333;
	}
	.reiBox ul {
	font-size: 0;
	float: right;
	padding-top: 0px;
	}
	.reiBox li {
	display: inline-block;
	width: 50%;
	}
	.txt .tdR {
	float: left;
  width: 100%;
  padding-top: 40px;
	}
	.tadaBox .imgBox ul {
	justify-content: center;
	}
	.tadaBox .imgBox ul li {
	width: 160px;
	}
	.tadaBox .imgBox img {
	width: 100%;
	height: auto;
	}
	.tadaBox .tdR {
	float: left;
	width: 200px;
	margin-left: 40px;
	padding-top: 0;
	}
	.tadaBox .tdR ul {
	padding: 10px 0 0;
	}
	.guideBox {
	padding: 70px 0 0;
	}	
	.guideBox .txtBg {
	background-position: top right;
	background-size: contain;	
	padding: 120px 0;
	}
	.guideBox .txt {
	font-size: 15px;
	margin-right: 340px;
	padding: 20px 40px;
	}
}

/* subMenu
----------------------------------------------- */
.subMenu,.subMenuB {
width: 100%;
margin: 0 auto;
}
.subMenu {
padding-top: 40px;
}
.subMenu ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 0 4%;
}
.subMenu ul li {
display: inline-block;
font-size: 12px;
font-weight: bold;
width: 48%;
margin: 4% 0 0;
vertical-align: top;
}
.subMenu ul li:nth-child(1),.subMenu ul li:nth-child(2) {
margin: 0;
}
.subMenu ul li:nth-child(2n) {
margin-left: 4%;
}
.subMenu ul li a {
position: relative;
display: block;
overflow: hidden;
width: 100%;
margin: 0 auto;
padding: 0 24px 0 0;
color: #044e87;
text-decoration: none;
border: #044e87 solid 1px;
vertical-align: middle;
}
.subMenu ul li a:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
zoom: 1; 
}
.subMenu ul li a:after {
position: absolute;
top: 30%;
right: 15px;
bottom: 0;
margin: auto;
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: bold;
font-size: 16px;
line-height: 1.4;
}
.subMenu ul li img {
float: left;
width: 30%;
height: auto;
margin-right: 10px;
}
.subMenu ul li p {
margin: 0;
padding: 6px 0 0 0;
}
.subMenu ul li i {
color: #044e87;
padding-left: 8px;
}
@media screen and (min-width: 768px), print {
	.subMenu {
	width: 880px;
	padding-top: 70px;
	}
	.subMenu ul {
	padding: 0;
	}
	.subMenu ul li {
	width: 25%;
	font-size: 16px;
	margin: 0;
	}
	.subMenu ul li:nth-child(2n) {
	margin-left: 0;
	}
	.subMenu ul li a {
	width: 200px;
	margin: 0 auto;
	}
	.subMenu ul li a:after {
	top: 30%;
	font-size: 20px;
	}
	.subMenu ul li img {
	width: 35%;
	}
	.subMenu ul li p {
	padding: 9px 0 0 0;
	}
}

/* グラフ・イメージ 周り
----------------------------------------------- */
.measImg {
padding: 0;
}

.measList {
margin: 0;
padding: 30px 0 0;
list-style: none;
}

.measList li {
text-align: center;
margin: 0;
}

.measList .measImg img {
width: 100%;
height: auto;
}

.productList {
padding-top: 40px;
}

.productList h3 {
font-size: 18px;
border: 1px solid  #044e87;
padding: 10px 15px;
border-left: 4px solid #044e87;
}

.productList h3 span {
display: inline-block;
font-size: 16px;
color: #044e87;
}

.productList p span {
padding: 0 2px;
font-size: 18px;
}

@media screen and (max-width: 767px) {
		.measList {
		padding-top: 40px;
		}
		.measList li:not(:first-child) {
		padding-top: 40px;
		}
}

@media screen and (min-width: 768px), print {
		.measList {
		display: flex;
		-ms-display: flex;
		justify-content: space-between;
		}

		.measList li {
		width: 48%;
		padding: 0 1%;
		}
    
    .bantectMechOp {
    display: table;
    width: 660px;
    margin: 0 auto;
    padding-top: 10px;
    }
	}

/* 
----------------------------------------------- */
.measImg {
padding: 0;
}

.measList {
margin: 0;
padding: 30px 0 0;
list-style: none;
}

.measList li {
text-align: center;
margin: 0;
}

.measList figcaption {
padding-top: 10px;
font-size: 15px;
font-weight: bold;
margin: 0;
}

.measList .measImg img {
width: 100%;
height: auto;
}

.productList h3 {
font-size: 18px;
border: 1px solid  #044e87;
padding: 10px 15px;
border-left: 4px solid #044e87;
}

.productList h3 span {
display: inline-block;
font-size: 16px;
color: #044e87;
}

.productList p span {
padding: 0 2px;
font-size: 18px;
}

@media screen and (max-width: 767px) {
		.measList {
		padding-top: 40px;
		}
		.measList li:not(:first-child) {
		padding-top: 40px;
		}
		.measList li p {
		text-align: left;
		}
		.pdtImg img {
		width: 100%;
		height: auto;
		}
}

@media screen and (min-width: 768px), print {
		.measList {
		display: flex;
		-ms-display: flex;
		justify-content: space-between;
		}
		.measList li {
		width: 48%;
		padding: 0 1%;
		}
		
		.productList h3 {
		font-size: 21px;
		}
		
		.productList h3 span {
		padding-left: 15px;
		}
		
		#wallfloor .grpBox.w320 .half img {
		width: 320px;
		height: auto;
		}
		
		#fireResistance .frReadBox {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		}
		
		#fireResistance .frReadBox .txt {
		padding-top: 60px;
		}
		
		#fireResistance .frReadBox figure {
		margin-left: 100px;
		}
    
    #metalroof .mainTit {
    padding-top: 0;
    }
}


/* subMenu 追加版
----------------------------------------------- */
.subMenu,.subMenuB {
width: 100%;
margin: 0 auto;
}
.subMenu {
padding-top: 40px;
}
.subMenu ul {
list-style: none;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0 4%;
}
.subMenu ul li {
display: inline-block;
width: 48%;
margin: 4% 0 0;
vertical-align: top;
}
.subMenu ul li:nth-child(2n) {
margin-left: 4%;
}
.subMenu ul li a {
position: relative;
display: block;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #044e87;
text-decoration: none;
border: #044e87 solid 1px;
vertical-align: middle;
}
.subMenu ul li a:hover {
opacity: 0.5;
}
.subMenu ul li a::after {
position: absolute;
top: 50%;
right: 10px;
bottom: 0;
margin: auto;
font-family: "Font Awesome 5 Free";
content: "\f105";
font-weight: bold;
font-size: 16px;
line-height: 1em;
}
.subMenu ul li img {
float: left;
width: 50px;
height: auto;
margin-right: 10px;
}
.subMenu ul li span {
display: block;
position: absolute;
top: 50%;
left: 60px;
transform: translateY(-50%);
margin: 0;
padding: 0;
font-family: "メイリオ", Meiryo, sans-serif;
font-size: 12px;
line-height: 1.2;
font-weight: bold;
}
.subMenu ul li i {
color: #044e87;
padding-left: 8px;
}

@media screen and (max-width: 320px) {
  .subMenu ul li span {
  left: 55px;
  font-size: 12px;
  }
}

@media screen and (min-width: 768px), print {
	.subMenu {
	width: 880px;
	padding-top: 70px;
	}
	.subMenu ul {
	padding: 0;
	}
	.subMenu ul li {
	width: 31.3%;
	font-size: 14px;
	margin: 0 1% 10px !important;
	}
	.subMenu ul li a {
	margin: 0 auto;
	}
	.subMenu ul li a:after {
	font-size: 20px;
  top: 34%;
	}
  
	.subMenu ul li img {
	width: 60px;
	}
  .subMenu ul li span {
  left: 68px;
  }
  
  .subMenu ul li:not(:nth-child(4)) a br {
  display: none;
  }
  
}

/* 表示調整 20250724 */
body#technologyIndex #secBox01.secBox {
  padding-top: 30px;
}
@media screen and (min-width: 768px), print {
  body#technologyIndex #secBox01.secBox {
    padding-top: 30px;
  }
}