#secBox01 {
padding-top: 20px;
}

.prpImg {
padding: 20px 0 0;
text-align: center;
}

.prpImg img {
-webkit-backface-visibility: hidden;
}

.tblBg {
background-color: #dfdfdf;
}


/* お客様の声
----------------------------------------------- */
.prpVoice {
position: relative;
margin-top: 30px;
padding: 10px 20px 20px;
background: #D7EBFE;
}

.prpVoice ul {
list-style: none;
}

.prpVoice .voiceTit02 {
padding-top: 10px;
font-size: 21px;
border-bottom: 1px solid #000;
}

.prpVoice .voiceTit02 span:not(.fRomeNum) {
display: block;
font-size: 13px;
letter-spacing: 0;
color:  #044e87;
}

.prpVoice .balloonTxt {
background: #fff;
}

.prpVoice .balloonTxt:after {
border-right: 12px solid #fff;
}

/* 製品紹介
----------------------------------------------- */
.introTit {
font-size: 18px;
border: 1px solid  #044e87;
padding: 10px 15px;
border-left: 4px solid #044e87;
font-weight: bold;
}

.introTit span {
display: inline-block;
font-size: 18px;
color: #044e87;
}

.prpIntro {
padding-top: 10px;
}

/* おすすめポイント
----------------------------------------------- */
.pointBox {
margin: 20px 0 0;
border-bottom: 4px solid #D3DEE9;
/*background: #E5F2FF;*/
padding: 0;
text-align: center;
}

.pointBox .pointTit{
margin: 0 auto;
padding: 4px 0;
background: #044e87;
color: #fff;
font-weight: bold;
}

.pointBox .pointTxt {
border-left: 4px solid #D3DEE9;
border-right: 4px solid #D3DEE9;
padding: 6px 0 12px;
}

.pointList {
text-align: left;
margin: 0;
padding: 0 20px;
list-style: none;
}

.pointList li {
font-weight: bold;
text-indent: -.8em;
padding-left: 2em;
}

.pointList li:not(:last-child) {
margin-right: 10px;
}

.pointList li::before {
display: inline-block;
vertical-align: middle;
padding: 0 8px 3px 0;
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: bold;
font-size: 18px;
color: #c00;
}

/* 画像キャプション
----------------------------------------------- */
.picTitNavy {
text-align: center;
padding-top: 20px;
}

.picTitNavyL {
text-align: left;
padding-top: 20px;
}

.picTitNavy p , .picTitNavyL p {
display: inline-block;
margin: 0;
padding: 6px 10px;
background: #044e87;
color: #fff;
font-weight: bold;
letter-spacing: 1px;
}

.picTitNavy.wf p {
display: block;
}

.picTxtTaL {
font-weight: normal;
text-align: left;
}

/* 測定データへのリンク
----------------------------------------------- */
.dataLinkBox {
padding: 30px 0 0;
}

.dataLinkTxt {
border: 1px dotted #6FB6D1;
margin: 0 auto;
padding: 10px 20px 25px;
}

.dataLinkTxt p {
padding: 10px 0 6px;
position: relative; 
}

.dataLinkTxt p::after {
content: "";
display: inline-block;
position: absolute;
}

.imgBoxPcCol2 img {
width: 100%;
height: auto;
}

.doGuideBox {
position: relative;
}

.doGuideTxt {
display: inline-block;
padding: 0 20px 6px;
color: #fff;
font-weight: bold;
background: #044e87;
}

.prpTable {
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
margin: 10px 0 5px;
padding: 0;
width: 100%;
max-width: 100%;
}

.prpTable caption {
font-weight: bold;
padding: 10px 0 15px;
text-align: left;
line-height: 1.4;
color: #044e87;
}

.prpTable th,
.prpTable td {
margin: 0px;
padding: 8px 10px;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
text-align: center;
vertical-align: middle;
font-size: 12px;
line-height: 1.4;
letter-spacing: 1px;
}
.prpTable th {
background-color: #e5edf3;
}

.prpTable .tblbgClrTit {
font-size: 15px;
background-color: #75A0BB;
}
.prpTable td {
text-align: left;
white-space: nowrap;
}

.prpTable td ul {
text-align: left;
}

@media screen and (max-width: 767px) {
		
		.prpImg img {
		width: 100%;
		height: auto;
		}
		
		.dataLinkTxt p::after {
		bottom: -25px;
		right: calc(50% - 12px);
		border: 12px solid transparent;
		border-top: 12px solid #044e87;
		}
		
		.linkBtn03 a {
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		}
		
		.linkBtn03 a.dataLink::before {
		text-align: left;
		display: inline-block;
		}
		
		.dataLinkBox .linkBtn03 {
		padding-top: 25px;
		width: 100%;
		}
		
		.doGuideBox {
		padding-top: 20px;
		position: relative;
		}

		.doGuideTxt {
		width: 90%;
		position: absolute;
		top: 0;
		left: 0;
		padding-bottom: 10px;
		}
	
}

@media screen and (min-width: 768px), print {

		#secBox01 {
		padding-top: 10px;
		}

		.introTxtBox {
		width: 420px;
		}
		
		.introTit {
		font-size: 22px;
		}
		
		.introTxt {
		padding-top: 0;
		}
		
		.introTit01 {
		position: absolute;
		top: 50px;
		right: 80px;
		background: #044e87;
		}
		
		.prpVoice {
		margin-top: 40px;
		padding: 10px 40px 20px;
		}
		
		.prpTable th,
		.prpTable td {
		font-size: 15px;
		}
		
		/* おすすめポイント
		----------------------------------------------- */
		.pointBox {
		display: inline-block;
		}
		
		#housemaker .pointList {
		text-align: center;
		}
		.pointList li {
		display: inline-block;
		}
		
		#housemaker .pointBox,
		#housemaker .pointBox .pointTxt {
		width: 630px;
		}
		
		/* 測定データへのリンク
		----------------------------------------------- */

		.dataLinkBox {
		padding: 30px 0 0;
		}

		.dataLinkTxt {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 30px;
		}

		.dataLinkTxt p {
		width: 490px;
		padding:  5px 0 5px;
		position: relative; 
		}

		.dataLinkTxt p:after {
		top: calc(50% - 12px);
		right: -60px;
		border: 12px solid transparent;
		border-left: 12px solid #044e87;
		border-top: 12px solid transparent;
		}

		.dataLinkBox .linkBtn03 {
		padding-left: 60px;
		}

		.imgBoxPcCol2 {
		display: -webkit-flex;
		display: flex;
		align-items: center;
		justify-content: space-between;
		-webkit-justify-content: space-between;
		}
		
		.imgBoxPcCol2.top {
		align-items: flex-start;
		}

		.imgBoxPcCol2 figure,
		.imgBoxPcCol2 div,
		.imgBoxPcCol2 p.prpImg {
		width: 420px;
		}
		
		.imgBoxPcCol2 div.introTxt {
		width: 250px;
		}		

		.doGuideBox {
		text-align: center;
		}
		
		.doGuideTxt {
		display: inline-block;
		position: static;
		width: auto;
		margin: 0 auto;
		padding: 12px 20px 12px;
		}

		.doGuideTxt p {
		padding-top: 0;
		font-size: 18px;
		}
		
}


/* ----------------------------------------------
  住宅メーカー技術者様へ
---------------------------------------------- */

#housemaker .secBox .secBox:nth-of-type(1) {
padding-top: 20px;
}
#housemaker .secBox .secBox:nth-of-type(n+2) {
padding-top: 40px;
}

#housemaker .merit {
margin-bottom: 20px;
font-size: 30px;
line-height: 1.3;
text-align: center;
letter-spacing: 10px;
text-shadow:2px 2px #b5cddf;
}
  
#housemaker .merit_box {
border: 1px solid #044e87;
position: relative;
width: 95%;
margin: 5px auto 20px auto;
}

#housemaker .merit_box a {
text-decoration: none;
}
#housemaker .merit_box .b {
padding: 20px;
font-size: 18px;
font-weight: bold;
}
#housemaker .triangle {
position: absolute;
top: 32%;
left: 92%;
width: 35px;
height: auto;
transform: translateX(-50%);
}

.secBox01TitSub {
padding: 0;
}

ul.checkMkList {
list-style: none;
margin: 0 0 10px;
padding: 0;
}
ul.checkMkList .checkmark {
padding-left: 30px;
position: relative;
}
ul.checkMkList .checkmark::before,
ul.checkMkList .checkmark::after {
content:"";
display: block;
position: absolute;
}
ul.checkMkList .checkmark::before {
width: 20px;
height: 20px;
background: #e5edf3;
border: 1px solid #c1c9d0;
left: 0;
top: 1px;
}
ul.checkMkList .checkmark::after {
border-left: 3px solid #DC1A11;
border-bottom: 3px solid #DC1A11;
width: 18px;
height: 5px;
transform: rotate(-40deg);
left: 3px;
top: 5px;
}
ul.checkMkList li {
display: flex;
padding: 10px 0 0;
}
ul.checkMkList li .txtBox {
display: inline-block;
}
ul.checkMkList li .txtBox .tit {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.4;
color: #c00;
}
ul.checkMkList li .txtBox p {
padding-top: 5px;
font-size: 17px;
}

.checkMkListBox .imgBox {
margin: 0;
padding: 10px 0 20px;
text-align: center;
}
.checkMkListBox .imgBox img {
width: 100%;
max-width: 385px;
height: auto;
margin: 0 auto;
}
#productOY430 .checkMkListBox .imgBox img {
max-width: 300px;
}

#housemaker #buildingInfo {
padding: 20px 0 0;
}

#housemaker #buildingInfo dl {
padding: 10px 0;
}

#housemaker #buildingInfo img {
width: 100%;
height: auto;
}

#housemaker #buildingInfo dd {
margin-top: -15px;
}

#housemaker #buildingInfo .tit {
display: inline-block;
background-color: #333;
color: #fff;
margin: 0;
padding: 3px 15px;
font-family: Arial, Helvetica, "sans-serif";
font-size: 16px;
letter-spacing: 0.2em;
line-height: 1.4;
}
#housemaker #buildingInfo p {
background-color: #e5edf3;
margin: -1px 1em 0;
padding: 8px 1em;
line-height: 1.4;
}

@media screen and (min-width: 768px), print {

  .checkMkListBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0 20px;
  }
  #productOY430 .checkMkListBox {
    padding: 20px 0;
  }
  .checkMkList {
    width: 450px;
  }
  .checkMkListBox .imgBox {
    width: 400px;
    margin: 0 0 0 30px;
    padding: 0;
  }
  #productOY430 .checkMkList {
    width: 550px;
  }
  #productOY430 .checkMkListBox .imgBox {
    width: 300px;
    margin-left: 30px;
  }
  
  #housemaker .merit {
   font-size: 45px;
  }

  #housemaker .secBox .secBox:nth-of-type(n+2) {
  padding-top: 60px;
  }

  #housemaker .merit3 {
  display: flex;
  justify-content: space-around;
  width: 100%;
  }

  #housemaker .merit_box {
  width: 31%;
  text-align: center;
  position: relative;
  }
  
  #housemaker .triangle {
  position: absolute;
  left: 50%;
  top: 50px;
  width: 45px;
  }
  
  #housemaker #buildingInfo img {
  width: 420px;
  }
  
}

/* 開発の流れ */
#hmFlowDev {
list-style: none;
margin: 0;
padding: 10px 0 0;
}
#hmFlowDev li:not(:last-child) {
margin-bottom: 32px;
}
#hmFlowDev .flowBox {
position: relative;
background-color: #e9e9e2;
padding: 10px;
}
#hmFlowDev li:not(:last-child) .flowBox::before {
position: absolute;
bottom: -24px;
left: 48%;
content: '';
width: 14px;
height: 14px;
border: 0px;
border-top: solid 2px #044e87;
border-right: solid 2px #044e87;
transform: rotate(135deg) translateX(-50%);
margin-top: -4px;
}

#hmFlowDev .flowBox dl {
padding: 5px 0 10px;
}
#hmFlowDev .flowBox dt {
color: #044e87;
font-size: 18px;
font-weight: bold;
}

#hmFlowDev .flowNum {
display: inline-block;
width: 30px;
color: #044e87;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 20px;
}

#hmFlowDev .flowBox .imgBox {
display: flex;
justify-content: space-between;
}
#hmFlowDev .flowBox .imgBox figure {
display: block;
}
#hmFlowDev .flowBox .imgBox.col2 figure {width: 49%;}
#hmFlowDev .flowBox .imgBox.col3 figure {width: 32.3%;}

#hmFlowDev .flowBox .imgBox figure img {
width: 100%;
height: auto;
}
#hmFlowDev .flowBox .imgBox figcaption {
padding: 5px 0 0;
font-size: 12px;
font-weight: normal;
line-height: 1.2;
text-align: left;
}


@media screen and (min-width: 768px), print {

  #hmFlowDev .flowBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  }

  #hmFlowDev .flowBox dl {
  width: 300px;
  margin: 0 20px 0 10px;
  }
    
  #hmFlowDev .flowBox .imgBox {
  width: 520px;
  }

  #hmFlowDev .flowBox .imgBox.col2 img {
  width: 250px;
  height: 150px;
  }
  #hmFlowDev .flowBox .imgBox.col3 img {
  width: 160px;
  height: 150px;
  }

  #hmFlowDev .flowNum {
  width: 40px;
  font-size: 30px;
  }
  
  
}

/* 開発期間短縮の流れ */
#hmFlowTxt {
padding: 20px 0 0;
}
.flowTit {
font-size: 18px;
line-height: normal;
color: #044e87;
margin: 0 0 5px;
padding: 0;
}
#hmFlowTxt ol {
list-style: none;
background-color: #e9e9e2;
margin: 0;
padding: 15px;
}
#hmFlowTxt li {
margin: 0;
padding: 0;
}
#hmFlowTxt li:not(:last-child) {
margin-bottom: 32px;
}
#hmFlowTxt .flowBox {
position: relative;
background-color: #fff;
padding: 10px;
}
#hmFlowTxt li:not(:last-child) .flowBox::before {
position: absolute;
bottom: -24px;
left: 48%;
content: '';
width: 14px;
height: 14px;
border: 0px;
border-top: solid 2px #044e87;
border-right: solid 2px #044e87;
transform: rotate(135deg) translateX(-50%);
margin-top: -4px;
}

#hmFlowTxt .flowNum {
display: inline-block;
width: 30px;
color: #044e87;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 20px;
}

@media screen and (min-width: 768px), print {
  #hmFlowTxt ol {
  display: flex;
  justify-content: space-between;
  }
  
  #hmFlowTxt li {
  width: 12%;
  }
  
  #hmFlowTxt li:not(:last-child) {
  margin-bottom: 0;
  }
  
  #hmFlowTxt li .flowBox {
  min-height: 90px;
  margin: 0;
  }

  #hmFlowTxt li:not(:last-child) .flowBox::before {
  bottom: 37%;
  left: auto;
  right: -11px;
  width: 8px;
  height: 8px;
  transform: rotate(45deg) translate(0, -50%);
  margin-top: 0;
  } 

  #hmFlowTxt li b {
  display: block;
  width: 100%;
  text-align: center;
  }
  #hmFlowTxt .flowNum {
  display: block;
  width: 100%;
  }
}

/* hmMeasList */
#hmMeasList {
background-color: #e9e9e2;
margin: 20px 0;
padding: 0 15px;
}
#hmMeasList .box {
padding: 10px 0;
}

#hmMeasList dt {
color: #044e87;
padding: 10px 0;
font-size: 16px;
}

#hmMeasList .fFigcap {
padding: 5px 0 0;
font-size: 14px;
text-align: center;
}

#housemaker #secBox02sub02 .flexCol2 {
display: flex;
justify-content: space-between;
}
#housemaker #secBox02sub02 dd img {
width: 100%;
height: auto;
}
#housemaker #secBox02sub02 .flexCol2 figure {
width: 49%;
}
#housemaker #secBox02sub02 figcaption {
padding: 5px 0 0;
font-size: 14px;
font-weight: normal;
}


@media screen and (min-width: 768px), print {
  #hmMeasList {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  }
  #hmMeasList .box {
  display: flex;
  justify-content: space-between;
  }
  
  #hmMeasList .box:nth-of-type(1)  {
  width: 60%;
  }
  #hmMeasList .box:nth-of-type(2)  {
  width: 38%;
  margin-left: 2%;
  }
  #hmMeasList dt {
  text-align: center;
  }
}

@media screen and (max-width: 767px) {
  #secBox03 .imgBox {
  text-align: center;
  }
  #secBox03 .imgBox img {
  width: 100%;
  height: auto;
  }
  #secBox03 .imgBox img:nth-child(2) {
  max-width: 190px;
  margin: 10px auto 0;
  }
}


/* ----------------------------------------------
  設計事務所様へ
---------------------------------------------- */
.txtIlpos {
font-size: 24px;
padding-left: 245px;
}

#prpItem02 .picTitNavyL p {
font-size: 22px;
}

#designoffice th,#designoffice td{
padding:10px;
border: 1px solid #000;
}

#designoffice td{
text-align: center;
}

#designoffice #secBox01 {
margin-top: 50px;
}

#designoffice .secBox{
padding-top: 35px;
margin-top: 35px;
}

/* #designoffice #secBox04,#designoffice #secBox05,#designoffice #secBox02,#designoffice #contactBox,#designoffice #introduction{
padding-top: 70px;
} */

#designoffice #secBox03{
padding-top: 35px;
margin-top: 45px;
}

#designoffice h3.introTit02 {
border: none;
border-left: 5px solid #185A8C;
font-size: 20px;
color: #185A8C;
margin: 30px 0 0;
padding: 5px 0 0 10px;
}
#designoffice img.oy-430_p {
max-width: 440px;
height: auto;
}

#designoffice .font-size_ll{
font-size: 30px;
}

#designoffice .font-size_l{
font-size: 22px;
}

#designoffice .font-size_xl{
font-size: 24px;
}

#designoffice .font-size_m {
font-size: 18px;
}

#designoffice .b {
font-weight: 600;
}

#designoffice img.merit2_p,#designoffice img.merit3_p {
max-width:420px;
width:100%;
height: auto;
}

#designoffice img.merit1_p{
border: 1px solid #000;
width: 100%;
}

#designoffice .center{
text-align: center;
}

#designoffice .font_red {
color: #bd0002;
}

#designoffice .font_blue {
color: #044e87;
}

#designoffice #secBox02 h2.merit{
font-size: 45px;
text-align: center;
letter-spacing: 10px;
text-shadow:2px 2px #b5cddf;
}

#designoffice .merit-pt{
background-color: #000;
margin: 30px auto 0 auto;
color: #fff;
width:90%;
text-align: center;
padding: 5px 0;
}

#designoffice #secBox03 ul,#designoffice #secBox04 ul,#designoffice #secBox05 ul,#designoffice #secBox06 ul{
margin: 20px auto;
width: 90%;
list-style-type: none;
padding: 0;
}

#designoffice #secBox03 li,#designoffice #secBox04 li,#designoffice #secBox05,#designoffice #secBox06 li{
padding: 3px 0;
}

#designoffice .table_wrap td,#designoffice .table_wrap th{
padding: 10px;
vertical-align: middle;
border: none;
}

#designoffice .table_wrap th{
width:35%;
}
#designoffice .table_wrap th.h100 {
height: 100px;
}

#designoffice .table_wrap {
width: 90%;
margin: 40px auto 40px auto;
display: flex;
justify-content: center;
}

#designoffice .table_wrap table {
width: 49%;
}

#designoffice #secBox04 .border-b {
width:50%;
margin:0 auto;
padding:0;

}

#designoffice .merit3 {
display: flex;
justify-content: space-around;
width: 100%;
}

#designoffice .merit_box {
																								width: 23%;
border: 1px solid #044e87;
text-align: center;
position: relative;
}

#designoffice .merit2_wrap {
display:flex;
justify-content: space-between;	
}

#designoffice .merit2_text {
padding: 10px 0;
width: 100%;
}

#designoffice #contactBox {
margin-bottom: 0;
}

#designoffice #contactBox .secBox {
padding-top: 0;
}

#designoffice .contactbox2 {
margin: 25px auto 0 auto;
width: 90%;
padding: 0;
}

#designoffice .contactbox2 p{
margin: 0;
padding: 0;
}

#designoffice .merit3_box {
width: 50%;
}

#designoffice .merit3_box3 {
height: 60px;
background-color: #FFEC89;
width: 80%;
max-width: 420px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

#designoffice .merit3_box4 {
border: 2px solid #044e87;
background-color: #fff;
margin-top: 24px;
}

#designoffice .width90 {
width: 90%;
margin: 0 auto;
}

#designoffice caption {
text-align: left;
margin-left: 10px;
}

#designoffice .merit2_box{
width: 49%;
border: 1px solid #044e87;
}

#designoffice .table_wrap_2 th,#designoffice .table_wrap_2 td{
vertical-align: middle;
}

#designoffice .merit_box a{
text-decoration: none;
color: #000;
display: block;
height: 100%;
}

#designoffice .merit1_p_2 {
width: 100%;
height: auto;
}

#designoffice .merit1_p_wrap {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}

#designoffice .merit1_p_wrap p{
width: 19%;
position: relative;
}

#designoffice .zoom {
position: absolute;
width: 20%;
height: auto;
bottom: 5px;
right: 5px;
}

#designoffice .imgBoxPcCol2 img{
width: 100%;
height: auto;
}

#introduction img {
width: 100%;
max-width: 880px;
height: auto;
}

#designoffice .oy-430_p_wrap {
width: 100%;
display: flex;
}

#designoffice .merit_box .font-size_m {
background-color: #185a8c;
color: #fff;
margin:-10px auto 0;
padding: 6px 10px 5px;
width: 80%;
}

#designoffice .merit_box .b {
background-color: #fff;
color: #000;
padding: 20px 0 30px;
}

#designoffice .merit_box:hover {
opacity: 0.5;
}

#designoffice h3.introTit {
margin-top: 50px;
}

#designoffice #secBox04 h3.introTit {
margin-top: 0;
width: 100%;
padding: 10px 0;
background-color: #044e87;
border: 0;
color: #fff;
} 

#designoffice .checkmark{
padding-left: 30px;
position: relative;
}
#designoffice .checkmark:before,
#designoffice .checkmark:after {
content:"";
display: block;
position: absolute;
}
#designoffice .checkmark:before {
width: 20px;
height: 20px;
background: #e5edf3;
border: 1px solid #c1c9d0;
left: 0;
top: 4px;
}
#designoffice .checkmark:after{
border-left: 3px solid #DC1A11;
border-bottom: 3px solid #dc1a11;
width: 18px;
height: 5px;
transform: rotate(-40deg);
left: 3px;
top: 7px;
}

#designoffice #secBox06{
width: 100%;
}

#designoffice .red {
color: #dc1a11;
}

#designoffice .triangle {
position: absolute;
left: 50%;
top: 93px;
width: 45px;
height: auto;
transform: translateX(-50%);
}

#designoffice .blue {
background-color: #185a8c;
color: #fff;
}

#designoffice #secBox06 h2{
/*padding:20px 0;*/
/*width: 90%;*/
margin: 0 auto;
border: 1px solid #000;
}

#designoffice #secBox06 .conteBoxSp{
/*background-color: #FFEFBB;*/
/*padding-bottom: 50px;*/
margin-bottom: 50px ;
} 

#designoffice #secBox04 ul{
margin-bottom: 50px;
}

#designoffice .table_L {
margin-right: 10px;
}

#designoffice li span{
display: block;
}
#designoffice li{
display: flex;
}

#designoffice .yellow {
background: linear-gradient(transparent 60%,#FFEC89 0%);
}

#designoffice .contactbox3 {
padding: 50px 0;
background-color: #ffefbb;
}
#designoffice #contactBox .conteBox {
padding: 30px 0 35px;
}
#designoffice #contactBox .box {
margin: 0 20px;
}
#designoffice .conteBox h2 img,#designoffice .merit3_wrap img {
width: 100%;
height: auto;
max-width: 880px;
}
#designoffice .pdtImgG {
width:420px;
text-align: center;
}
#designoffice .pdtImgG img {
width: 100%;
}
#designoffice .pdtImgTA{
width: 400px;
}
#designoffice .pdtImgTA table {
width: 400px;
}
#designoffice .pdtImgTB table {
width: 400px;
}
#designoffice .conteTit02St {
background-color: #fff;
border: 1px solid #044e87;
}
#designoffice .th_w {
vertical-align: middle;
}

@media screen and (max-width: 767px) {
#designofficedoGuideBox		.txtIlpos {
		font-size: 15px;
		padding: 20px 0 0 10px;
		}
		#designoffice .font-size_xl{
		font-size: 22px;
		}
		#designoffice .font-size_ll{
		font-size: 26px;
		}
		#designoffice .font-size_l{
		font-size:18px;
		}
		#designoffice .font-size_m {
		font-size: 12px;
		}
		#prpItem02 .picTitNavyL p {
		font-size: 15px;
		}
		#designoffice .merit3 {
		display: block;
		height: auto;
		}
		#designoffice .merit_box {
		width: 95%;
		margin: 5px auto 25px auto;
		}
		#designoffice #secBox02 h2.merit {
		font-size: 35px;		
		}
		#designoffice .table_wrap {
		display: block;
		line-height: 1.4;
		}
		#designoffice .table_wrap table {
		width: 100%;
		margin: 10px 0;
		}
		#designoffice .merit2_wrap {
		display: block;
		}
		#designoffice .merit2_text {
		width: 100%;
		}
		#designoffice .merit2_box,#designoffice .merit3_box {
		width: 100%;
		}
		#designoffice .font-size_m {
		font-size: 16px;
		}
		#designoffice .merit3_wrap {
		display: block;
		}
		#designoffice .imgBoxPcCol2 {
		display: block;
		}
		#designoffice .imgBoxPcCol2 div {
		width: 100%;
		}
		#designoffice .merit3_box4 {
		margin-top:10px;
		}
		#designoffice .merit3_box3 {
		width: 100%;
		}
		#designoffice #secBox05 table {
		width: 100%;
		}
		#designoffice .zoom {
		wisth: 25%;
		}
		#designoffice #contactBox h2.conteTit {
		font-size: 20px;
		text-align: center;
		}
		#designoffice .pdf {
		width: 100%;
		}
		#designoffice .table_wrap .table_wrap_2 {
		width: 100%;
		}
		#designoffice .merit_box a,#designoffice .contactbox2 p,#designoffice .mb_left,#designoffice .pcTextL{
		text-align: left;
		}
		#designoffice .merit1_p_2{
		width: 100%;
		}
		#designoffice #secBox01{
		margin-top: 0;
		}
		#designoffice #secBox03 ul,
    #designoffice #secBox04 ul,
    #designoffice #secBox05 ul,
    #designoffice #secBox06 ul {
		margin: 25px 0;
		width: 100%;
		}
		#designoffice .table_wrap {
		width: 100%;
		}
		#designoffice .merit-pt {
		width: 100%;		
		}
		#designoffice .merit1_p_wrap {
		width: 100%;
		}
		#designoffice .width90 {
		width: 100%;	
		}
		#designoffice .sampple {
		display: none;
		}
		#designoffice .sampple_sp {
		display: block;
		width: 100%;
		height: auto;
		}
		#designoffice .oy-430_p_wrap {
		display: block;
		width: 100%;
		text-align: center;
		}
		#designoffice img.oy-430_p {
		width: 100%;
		}
		#designoffice .merit_box .b {
		background-position: top 20px right 10px;
		padding: 20px 0 20px 20px;
		}

		#designoffice .triangle {
		top: 45%;
		left: 92%;
		width: 35px;
		}
		#designoffice #secBox06 .conteBoxSp {
		/*margin: 0;*/
		}
		#designoffice .checkmark::after {
		width: 15px;
		height: 5px;
		left: 3px;
		top: 3px;
		}
		#designoffice .checkmark::before {
		width: 16px;
		height: 16px;
		}
		#designoffice .pdtImgG,#designoffice .pdtImgTA,#designoffice .pdtImgTB {
		width: 100%;
		}
		#designoffice .pdtImgTA table,#designoffice .pdtImgTB table {
		width: 90%;
		margin: 0 auto;
		}
		#designoffice .pdtImgG {
		margin-bottom: 40px;	
		}
		#designoffice .pdtImgTBMb {
		margin-bottom: 40px;	
		}
		#designoffice .merit1_p_wrap {
		width: 80%;
		justify-content: space-around;
		flex-wrap: wrap;
		}
		#designoffice .merit1_p_wrap p {
		width: 26%;
		}
		#designoffice .merit2_boxPcMb {
		margin-bottom: 30px;
		}
		#designoffice .secBox{
		padding-top: 25px;
		margin-top: 25px;
		}
}

/**/
.pdtImgOyj {
border :1px solid #e5edf3;
padding: 10px;
margin: 20px 0;
}
.pdtImgOyj img {
width: 100%;
max-width: 750px;
display: block;
margin: 20px auto;
}
.pdtImgOyj ul {
list-style-type: none;
max-width: 750px;
margin: 0 auto;
padding: 0;
}
.pdtImgOyj li {
display: -webkit-flex;
display: flex;
}
.pdtImgOyj li b {
display: block;
}
.pdtImgOyj .textC {
text-align: center;
}
.pdtImgOyj .fontSizeM {
font-size: 16px;
}
.pdtImgOyj .fontSizeL {
font-size: 20px;
}
.pdtImgOyj span.develop {
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
width: 76px;
margin-right: 8px;
padding: 4px 0;
background: #e5edf3;
font-size: 14px;
font-weight: normal;
letter-spacing: 1.2px;
line-height: 1;
text-align: center;
color: #044e87;
}


@media screen and (min-width: 768px), print {

	.pdtImgOyj .fontSizeM {
	font-size: 18px;
	}
	.pdtImgOyj .fontSizeL {
	font-size: 22px;
	}

}

.introBtn {
    text-decoration: none;
    display: block;
    width: 58%;
    background-color: #044e87;
    color: #fff;
    padding: 14px 5px;
    text-align: center;
	 margin-left: auto ;
}
.introBtn .txt {
    position: relative;
    display: inline-block;
    padding-right: 20px;
    font-weight: bold;
}
.introBtn .txt::after {
    content: '';
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    position: absolute;
    right: 0;
    top: 4px;
    transform: rotate(45deg);
}
@media screen and (min-width: 768px), print {
.introBtn {
    text-decoration: none;
    display: block;
    width: 35%;
    background-color: #044e87;
    color: #fff;
    padding: 14px 5px;
    text-align: center;
}
.introBtn:hover{
	opacity: 0.7;
	}
.introBtn:hover .txt {
	color: #fff;
	opacity: 0.7;
}
.introBtn:hover .txt::after {
	opacity: 0.7;
}
}


/* ----------------------------------------------
  建材メーカー様へ
  リニューアル版
---------------------------------------------- */

/* 実現できること
---------------------------------------------- */
#building #secBox01 h2 {
  margin-bottom: 20px;
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 10px;
  text-shadow: 2px 2px #b5cddf;
}

#building #secBox01 .flexBox dl {
  border: 1px solid #aaa;
  box-shadow: 5px 5px #e5edf3;
  margin: 20px 0;
  padding: 15px;
  letter-spacing: 0.05em;
  line-height: 1.5;
}
#building #secBox01 .flexBox dt {
  color: #044e87;
  margin-bottom: 5px;
  font-size: 18px;
  text-align: center;
}
#building #secBox01 .flexBox dd {
  padding: 10px 0 0;
  font-size: 14px;
  text-align: left;
}

/* 例えば
---------------------------------------------- */
#building ol#egPoint {
  list-style: none;
  margin: 0;
  padding: 0;
}
#building ol#egPoint li {
  display: flex;
  margin: 10px 0;
  padding: 0;
}
#building ol#egPoint li .fNum {
  margin-right: 5px;
  font-size: 30px;
  color: #044e87;
}
#building ol#egPoint li dl {
  margin: 8px 0 0;
  padding: 0;
}
#building ol#egPoint li dt {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  color: #c00;
}
#building ol#egPoint li dd {
  margin: 5px 0 0;
  padding: 0;
  font-size: 17px;
}

/* 事例 */
#building .egSecBox {
  margin: 40px 0;
  border-left: 4px solid #e5edf3;
}
#building .egSecTitle {
  background-color: #044e87;
  border-bottom: 2px dotted rgb(255,255,179,1);
  margin: 0;
  padding: 10px 0;
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
#building .egSecTitle .cate {
  display: inline-block;
  background-color: #333;
  margin: 0 10px 0 -4px;
  padding: 3px 10px;
  color: #ff0;
  font-weight: normal;
  white-space: nowrap;
}

#building table.egSecTbl {
  width: 100%;
  margin: 0 0 10px;
  border-top: 1px dotted #aaa;
}

#building table.egSecTbl tr:nth-of-type(1) {
  background-color: rgb(255,255,179,0.5);
}
#building table.egSecTbl th,
#building table.egSecTbl td {
  padding: 10px 0 0 20px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: left;
}
#building table.egSecTbl tr:nth-of-type(1) th,
#building table.egSecTbl tr:nth-of-type(1) td {
  color: #044e87;
}
#building table.egSecTbl tr:nth-of-type(2) th {
  color: #c00;
}
#building table.egSecTbl tr:nth-of-type(1) td {
  padding-right: 20px;
}

#building table.egSecTbl td {
  border-bottom: 1px dotted #aaa;
  padding-bottom: 10px;
}

#building .egSecBox .imgBox {
  margin: 2rem 0 2rem 20px;
  text-align: center;
}

#building .egSecBox .imgBox img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
#building .egSecBox .imgBox img {
  margin: 0 auto 20px;
}

#building .egSecBox .imgBox figcaption {
  display: block;
}

#building .egSecBox .imgBox figcaption .text {
  position: relative;
  display: inline-block;
  margin: 0 0 20px;
  padding: 3px 10px;
  border: 1px solid #111;
  font-size: 14px;
}
#building .egSecBox .imgBox figcaption .text::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top: 12px solid #111;
}
#building .egSecBox .imgBox figcaption .text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top: 10px solid #fff;
}

@media screen and (max-width: 767px) {
  #building .egSecTitle > .text br {
    display: none;
  }
  #building .egSecTitle > .text {
    display: block;
    padding: 5px 20px 0;
  }
  
  #building table.egSecTbl th,
  #building table.egSecTbl td {
    display: block;
    width: 100%;
  }
}

#building .egSecBox .textBox {
  margin: 2rem 0 2rem 20px;
  text-align: center;
}


@media screen and (min-width: 768px), print {
  #building #secBox01 {
    text-align: center;
  }
  
  #building #secBox01 h2 {
    font-size: 45px;
  }
  #building #secBox01 .flexBox {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px 2%;
    margin-top: 25px;
  }
  #building #secBox01 .flexBox dl {
    margin: 0;
    padding-top: 24px;
  }
  #building #secBox01 .flexBox dt {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.25em;
    font-size: 22px;
  }
    
  #building ol#egPoint li,
  #building ol#egPoint li dl {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
  #building ol#egPoint li dt {
    font-size: 20px;
    margin: 0 10px 0 5px;
  }

  #building .egSecTitle {
    display: flex;
    align-items: center;
    font-size: 22px;
    padding: 12px 0;
  }

  #building table.egSecTbl th {
    border-bottom: 1px dotted #aaa;
    width: 100px;
    padding-bottom: 10px;
  }
  
  #building table.egSecTbl td {
    padding: 15px 10px;
  }
    
  #building .egSecBox {
    margin-bottom: 60px;
  }
  #building .egSecBox .imgBox.flexCol2 {
    display: flex;
    justify-content: space-between;
  }
  
}


#building .secContactBox h4 {
  text-align: left;
  color: #044e87;
  font-size: 20px;
  padding-top: 0;
  margin-bottom: 10px;
  border-bottom: none;
}

@media screen and (min-width: 768px), print {
  #building .secContactBox h4 {
    text-align: center;
    font-size: 24px;
  }
}

.relationBnr {
  text-align: center;
}
.relationBnr img {
  max-width: 100%;
  height: auto;
}



#building .pdtTable {
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
margin: 10px 0 5px;
padding: 0;
width: 100%;
}
#building .pdtTable caption {
font-weight: bold;
padding: 10px 0 15px;
text-align: left;
line-height: 1.4;
color: #044e87;
}

#building .pdtTable th,
#building .pdtTable td {
margin: 0px;
padding: 8px 10px;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
text-align: center;
vertical-align: middle;
font-size: 15px;
line-height: 1.4;
letter-spacing: 1px;
}
#building .pdtTable th { background-color: #e5edf3;}
#building .pdtTable .tblbgClrTit {
font-size: 15px;
background-color: #75a0bb;
}
#building .pdtTable td b,
#building .pdtTable strong {
color: #044e87;
font-size: 18px;
}

/**/
#building .linkBtn {
  text-align: center;
}
#building .linkBtn a {
  display: inline-block;
  background-color: #333;
  border-radius: 100vh;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  margin: 5px 0 0;
  padding: 8px 24px;
  width: 100%;
}

#building #secBox02 li,
#building #secBox02 dl {
  width: 100%;
}

#building #secBox02 .linkBtn a {
  background-color: #fff;
  border: 1px solid rgba(4,78,135,0.25);
  color: #044e87;
  font-weight: bold;
}

@media screen and (min-width: 768px), print {
  #building .linkBtn a {
    font-size: 14px;
    padding: 5px 20px;
    width: 80%;
  }
  #building #secBox02 .linkBtn a {
    margin-left: 10px;
    padding: 2px 0;
    width: 120px;
  }
}

@media (hover: none) {
  #building .linkBtn a:active {
    opacity: 0.6;
  }
}

@media (hover: hover) {
  #building .linkBtn a:hover {
    opacity: 0.6;
  }
}