/* ================================
  reform
  MB→PC min-width:768px
================================ */

/* -------------------------------- 
  reform top
-------------------------------- */
#reformTopRead {
background: url("../img/reform/index_mainimg.jpg") no-repeat 0 0;
background-size: 90% auto;
padding-top: 140px;
}
#reformTopRead .txtBox {
background-color: rgba(245,243,233,0.9);
width: 90%;
margin: 0 0 0 auto;
padding: 20px;
}
#reformTopRead .txtBox h2 {
padding: 10px 0;
}

@media screen and (min-width: 768px), print {
  #reformTopRead {
  background-size: 960px auto;
  padding-top: 300px;
  }
  #reformTopRead .txtBox {
  width: 60%;
  max-width: 900px;
  padding: 30px 40px;
  }

}

/* 提案
-------------------------------- */
#reformTopPoint {
padding-top: 10px;
padding-bottom: 30px;
overflow: hidden;
}
#reformTopPoint .mainImgBox,
#reformTopPoint .imgBox {
text-align: center;
}
#reformTopPoint .imgBox {
padding-top: 20px;
}
#reformTopPoint .secBox {
padding-top: 30px;
padding-bottom: 0;
}
#reformTopPoint h2 {
border-top: 2px dotted #bf2f62;
padding-top: 15px;
font-size: 20px;
}
#reformTopPoint h2 .fEng {
display: block;
background-color: #fff;
color: #bf2f62;
width: 38px;
margin-top: -25px;
font-size: 15px;
font-weight: normal;
}
@media screen and (min-width: 768px), print {
  #reformTopPoint .secBox {
  padding-top: 20px;
  padding-bottom: 20px;
  }
  #reformTopPoint h2 {
  display: inline-block;
  border-top: none;
  border-bottom: 2px dotted #bf2f62;
  padding-top: 0;
  padding-right: 10px;
  padding-bottom: 5px;
  }
  #reformTopPoint h2 .fEng {
  display: inline-block;
  margin-top: 0;
  margin-right: 5px;
  font-size: 16px;
  }
  
  #reformTopPoint .txtBox {
  width: 56%;
  max-width: 650px;
  margin-right: 4%;
  }
  #reformTopPoint .imgBox {
  width: 40%;
  max-width: 400px;
  padding-top: 0;
  }

}

/* 無料相談会
-------------------------------- */
#reformSsoudankai {
width: 90%;
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-top: 30px;
overflow: hidden;
}
#reformSsoudankai .bgBox {
background-color: rgba(191,47,98,0.2);
background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff), color-stop(.25, transparent),color-stop(.5, transparent), color-stop(.5, #fff),color-stop(.75, #fff), color-stop(.75, transparent),to(transparent));
-webkit-background-size: 14px 14px;
padding: 10px;
}
#reformSsoudankai .whtBox {
background-color: #fff;
padding: 20px 15px 10px;
}
#reformSsoudankai .tit {
margin: -60px auto 10px;
text-align: center;
}
#reformSsoudankai .infoBox {
position: relative;
padding-top: 20px;
z-index: 10;
}
#reformSsoudankai .infoBox .subTit {
margin-bottom: 10px;
color: #bf2f62;
font-weight: normal;
}
#reformSsoudankai .infoBox dl {
margin: 0;
}
#reformSsoudankai .infoBox dl .box {
position: relative;
border-top: 1px dotted #333;
margin-bottom: 10px;
padding-top: 10px;
font-size: 15px;
}
#reformSsoudankai .infoBox dt {
font-weight: bold;
}
#reformSsoudankai strong.fCateClr {
font-size: 18px;
line-height: 1.4;
}
#reformSsoudankai .infoBox {
background-color: #fffbd4;
margin: 10px 0;
padding: 10px 10px 0;
}

#reformSsoudankai .infoBox dd p:not(.btnBox) {
padding-top: 5px;
text-align: start;
}
#reformSsoudankai .infoBox .btn {
position: absolute;
top: 4px;
right: 0;
padding: 3px 0.8em;
font-size: 13px;
}

@media screen and (min-width: 768px), print {
  #reformSsoudankai {
  padding-top: 60px;
  }
  #reformSsoudankai .whtBox {
  padding: 20px 20px 30px;
  }
  #reformSsoudankai .tit {
  margin: -80px 0 10px;
  }
  #reformSsoudankai .tit img {
  }
  #reformSsoudankai .infoBox {
  display: -webkit-flex;
  display: flex;
  margin: 20px 0;
  }
  #reformSsoudankai .infoBox dl {
  display: -webkit-flex;
  display: flex; 
  }
  #reformSsoudankai .infoBox dl .box {
  border-top: none;
  border-left: 1px dotted #333;
  margin-left: 10px;
  padding-left: 15px;
  }
  #reformSsoudankai .infoBox dd {
  font-size: 14px;
  }
}

/* リフォームメニュー
-------------------------------- */
#reformMenu {
padding-top: 40px;
}
#reformMenu .secSubTit {
font-size: 20px;
}
#reformMenu #accboxSec {
padding-top: 20px;
}
#reformMenu #accboxSec .accBox {
margin-bottom: 10px;
}
#reformMenu #accboxSec .accBox:nth-child(n+1):not(:nth-child(n+4)) {
background-color: #7DA243;
}
#reformMenu #accboxSec .accBox:nth-child(n+4):not(:nth-child(n+6)) {
background-color: #009B4C;
}
#reformMenu #accboxSec .accBox:nth-child(6) {
background-color: #7E5222;
}
#reformMenu #accboxSec .accBox:nth-child(n+7):not(:nth-child(n+11)) {
background-color: #00B1C0;
}
#reformMenu #accboxSec .accBox:nth-child(11) {
background-color: #7895CC;
}
#reformMenu #accboxSec .accBox:nth-child(n+12):not(:nth-child(n+15)) {
background-color: #F39800;
}
#reformMenu #accboxSec .accBox:nth-child(15) {
background-color: #0085CE;
}

#reformMenu #accboxSec .accBox dd .fCateClr strong {
font-size: 18px;
}

#reformMenu #accboxSec .accBox .iconImg img {
margin-bottom: 5px;
}
#reformMenu #accboxSec .accBox .iconImg img:nth-child(2n) {
margin-left: 5px;
}

#reformMenu #accboxSec .accBox .pgBtn {
padding-top: 10px;
}
#reformMenu #accboxSec .accBox .pgBtn a {
display: block;
background-color: #333;
border-radius: 6px;
margin: 0 0 10px;
padding: 8px;
color: #fff;
font-size: 14px;
text-decoration: none;
overflow: hidden;
}


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

  #reformMene .secBox {
  padding-bottom: 0 !important;
  }

  #reformMenu #accboxSec {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  }
  #reformMenu #accboxSec .accBox {
  flex-shrink: 0;
  width: 31.3%;
  }
  
  #reformMenu #accboxSec .accBox dt {
  padding: 5px 0;
  }

}

/* カテゴリー別一覧
-------------------------------- */
#reformCateNav {
background: url("../img/reform/reformcatelist_bgimg.jpg") repeat 0 0;
background-size: 100% auto;
padding: 30px 0 20px;
}
#reformCateNav ul {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 2.5%;
padding: 0;
}
#reformCateNav li {
display: -webkit-flex;
display: flex;
align-items: center;
background-color: #ccc;
width: 45%;
height: 120px;
margin: 0 2.5% 10px;
padding: 0;
line-height: 1.3;
}
#reformCateNav li:nth-child(1) {
background: url("../img/reform/index_reformcateimg_renovation.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(2) {
background: url("../img/reform/index_reformcateimg_partialrenos.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(3) {
background: url("../img/reform/index_reformcateimg_taishin.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(4) {
background: url("../img/reform/index_reformcateimg_kitchen.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(5) {
background: url("../img/reform/index_reformcateimg_sanitary.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(6) {
background: url("../img/reform/index_reformcateimg_toilet.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(7) {
background: url("../img/reform/index_reformcateimg_pet.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(8) {
background: url("../img/reform/index_reformcateimg_barrierfree.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(9) {
background: url("../img/reform/index_reformcateimg_outside.jpg") no-repeat center center;
background-size: cover;
}
#reformCateNav li:nth-child(10) {
background: url("../img/reform/index_reformcateimg_exterior.jpg") no-repeat center center;
background-size: cover;
}

#reformCateNav li a {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
}
#reformCateNav li strong {
position: relative;
display: block;
background-color: rgba(255,255,255,0.9);
border-radius: 6px;
margin: auto 10px;
padding: 10px 14px 9px 10px;
}
#reformCateNav li strong::after {
position: absolute;
top: 0;
bottom: 0;
right: 10px;
margin: auto;
content: "";
vertical-align: middle;
width: 8px;
height: 8px;
border-top: 2px solid #bf2f62;
border-right: 2px solid #bf2f62;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

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

  #reformCateNav {
  background-size: auto auto;
  padding: 40px 0 10px;
  }

  #reformCateNav ul {
  margin: 0 1% 10px;
  }
  #reformCateNav li {
  width: 18%;
  height: 180px;
  margin: 0 1% 20px;
  }
  #reformCateNav li strong {
  margin: auto 10%;
  }
}

/* -------------------------------- 
  カテゴリページ
-------------------------------- */

#cateMainBox .secTit .wk {
display: inline-block;
background-color: rgba(255,255,255,0.9);
border-radius: 12px 12px 0 0;
margin: -30px auto 0;
padding: 15px;
}

@media screen and (min-width: 768px), print {
  #cateMainBox {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 20px;
  }
  #cateMainBox .secTit .wk {
  width: 500px;
  font-size: 28px;
  text-align: center;
  }
}

#komattaTit {
padding: 20px 0 40px;
text-align: center;
}
#komattaTit img {
width: 50%;
max-width: 150px;
}

#komattaTit .readBox .inner {
color: #bf2f62;
font-size: 18px;
}

#apCase .secTit {
padding-top: 10px;
}
#apCase .secTit .fTxt {
display: block;
font-size: 18px;
font-weight: normal;
line-height: 1.3;
}
#apCase .secTit strong {
color: #E50012;
}

@media screen and (min-width: 768px), print {
  #komattaTit .box {
  position: relative;
  display: inline-block;
  margin: 0 auto 30px;
  }
  #komattaImg01 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  }
  #komattaImg02 {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-50%);
  }
  
  #komattaTit .readBox .inner {
  font-size: 22px;
  }

  #apCase .secTit {
  margin: 0 150px;
  padding-bottom: 0;
  }
  #apCase .secTit .fTxt {
  font-size: 24px;
  }
}

#problemList ul {
margin: 0;
padding: 0;
list-style: none;
}
#problemList li {
padding-left: 24px;
background: url("../img/reform/icon_hukidasi.svg") no-repeat top 2px left 0;
background-size: 16px 16px;
}
#problemList li:last-child {
margin-bottom: 0;
}

/**/
.apCaseBox {
position: relative;
margin-bottom: 30px;
padding: 50px 10px 0;
background-color: rgba(255,255,255,0.8);
}

.apCaseBoxTit {
border-bottom: 1px dotted #333;
border-left: 1px dotted #333;
margin: 0;
padding: 5px 0 5px 15px;
}
.apPt {
display: block;
position: absolute;
top: 0;
left: 0;
width: 120px;
padding: 5px 20px;
line-height: 20px;
background-color: #f5f3e9;
}
.apPt span {
font-size: 200%;
}

.apCaseBoxConte {
background-color: #f7e9ee;
margin: 16px 0 0 16px;
padding: 10px 10px;
}
.apCaseBoxConte .tit {
display: inline-block;
background-color: #bf2f62;
color: #fff;
margin: 0 0 0 -16px;
padding: 3px 10px;
font-size: 14px;
font-weight: normal;
line-height: normal;
}
.apCaseBoxConte .tit::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f4ad";
margin-right: 5px;
}

.apCaseBoxConte dl {
border: 1px dotted #1e8c73;
background-color: rgba(255,255,255,0.6);
margin: 10px 0 0;
padding: 10px 0 0;
}
.apCaseBoxConte dl:last-child {
margin-bottom: 5px;
}

.apCaseBoxConte dt {
display: inline-block;
border-left: 3px solid #1e8c73;
padding: 0 10px 0;
font-size: 14px;
font-weight: bold;
}
.apCaseBoxConte dd {
color: #1e8c73;
padding: 5px 10px 10px;
font-size: 14px;
line-height: 1.4;
}

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

  #problemList {
  text-align: center;
  }
	#problemList ul {
  display: inline-block;
  margin-bottom: 20px;
  text-align: left;
  font-size: 18px;
	}

	.apCaseBox {
  margin-bottom: 30px;
  padding: 50px 20px 0;
  }
	.apCaseBoxTit {
  width: 70%;
  max-width: 900px;
  }
  .apCaseBoxConte {
  width: 90%;
  margin-left: auto;
  padding: 10px 16px;
  }

}

/* リフォームカテゴリー別 */
#reformCateConte {
padding: 20px 0 0;
}

@media screen and (min-width: 768px), print {
  #reformCateConte {
  padding: 40px 0 0;
  }

}


/*  部分リフォーム
-------------------------------- */
#partialrenosOther table {
background-color: #ddeef4;
width: 100%;
margin: 10px auto 0;
}
#partialrenosOther th {
padding: 10px 16px 0;
text-align: left;
}
#partialrenosOther td {
padding: 5px 16px 10px;
text-align: left;
}
#partialrenosOther td ul {
padding-top: 5px;
color: #136988;
}
#partialrenosOther td li:last-child {
margin-bottom: 0;
}

@media screen and (max-width: 767px) {/*調整*/
  #partialrenosOther th, #partialrenosOther td {
  display: block;
  width: 100%;
  }
}
@media screen and (min-width: 768px), print {
  #partialrenosOther th {
  width: 240px;
  padding: 10px 16px;
  }
  #partialrenosOther td {
  padding: 10px 16px 10px 0;
  }

}


/*  高齢者・バリアフリー
-------------------------------- */

#homeRenova #flowBox ol {
list-style: none;
margin: 0;
padding: 30px 0 0;
}
#homeRenova #flowBox ol li {
position: relative;
margin: 0 0 60px;
padding: 16px 20px;
background-color: #f5f3e9;
list-style: 1.6;
}
#homeRenova #flowBox ol li:last-child {margin-bottom: 0;}
#homeRenova #flowBox ol li:nth-child(n+2)::before {
content: "";
position: absolute;
top: -40px;
left: 48%;
border: 12px solid transparent;
border-top: 12px solid #555;
}
#homeRenova #flowBox ol .stepNo {
color: #008c8c;
font-size: 20px;
font-weight: normal;
}
#homeRenova #flowBox ol .stepNo .fNum {
display: inline-block;
margin-left: 8px;
font-size: 160%;
}

#homeRenova #ssBox {
padding-top: 20px;
padding-bottom: 20px;
}
#homeRenova #ssBox table {
background-color: #ececee;
width: 100%;
max-width: 800px;
margin: 10px auto;
}
#homeRenova #ssBox th {
padding: 10px 16px 0;
text-align: left;
}
#homeRenova #ssBox td {
padding: 5px 16px 10px;
text-align: left;
}

@media screen and (max-width: 767px) {/*調整*/
  #homeRenova #flowBox ol .stepNo {
  display: block;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  }
  
  #homeRenova #ssBox th, #homeRenova #ssBox td {
  display: block;
  width: 100%;
  }
  
}

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

  #homeRenova #flowBox ol {
  max-width: 800px;
  margin: 0 auto;
  }
  #homeRenova #flowBox ol li {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  padding: 10px 20px;
  }
  #homeRenova #flowBox ol li:last-child {margin-bottom: 0;}
  #homeRenova #flowBox ol li:nth-child(n+2)::before {
  top: -24px;
  }
  #homeRenova #flowBox ol .stepNo {
  display: block;
  width: 80px;
  font-size: 15px;
  }
  
  #homeRenova #ssBox h3 {
  margin-bottom: 30px;
  }
  #homeRenova #ssBox th {
  width: 240px;
  padding: 10px 16px;
  }
  #homeRenova #ssBox td {
  padding: 10px 16px 10px 0;
  }

}