@charset "UTF-8";

/* bread_List */
#bread_List {
position: fixed;
width: 100%;
padding-top: 65px;
background-color: #dcf5f9;
z-index: 52;
}
#bread_List .flex {
  padding: 8px 0;
  flex-wrap: wrap;
  line-height: 1.3;
}
#bread_List .flex a { font-size: 10px;}
#bread_List .flex a::after {
content: '>';
display: inline-block;
padding: 0 10px;
}
#bread_List .flex a:last-of-type::after { content: none;}
#bread_List .flex a:last-of-type,
#bread_List .flex a:hover { text-decoration: underline;}

/* 下層ページの共通 */
#lower_Page { padding-top: 91px;}
#lower_Page > .flex {
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 50px 0 70px;
}
.side_Btn_Wrap,
#main_Content_Wrap { width: 100%;}

.side_Btn_Wrap .side_Btn_List {
justify-content: space-between;
width: 100%;
text-align: center;
}
.side_Btn_Wrap:first-of-type { padding: 0 0 60px;}
.side_Btn_Wrap:last-of-type { padding: 60px 0 0;}
.side_Btn_Wrap .side_Btn_List li {
width: calc((100% - 120px) / 4);
margin-right: 40px;
border: 4px double #ddd;
}

.side_Btn_Wrap .side_Btn_List li:last-child { margin-right: 0;}
.side_Btn_Wrap .side_Btn_List a {
position: relative;
display: block;
width: 100%;
padding: 28px 8px;
background-color: #fff;
box-sizing: border-box;
box-sizing: border-box;
}
.side_Btn_Wrap .side_Btn_List .here a { background-color: #93cdd6;}
.side_Btn_Wrap .side_Btn_List a::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #93cdd6;
opacity: 0;
z-index: 0;
transition: 0.3s;
}
.side_Btn_Wrap .side_Btn_List a:hover::before {
height: 100%;
opacity: 1;
}
.side_Btn_Wrap .side_Btn_List a span {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: 2;
}
.side_Btn_Wrap .side_Btn_List a svg {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}

/*個人・法人のお客様各ページ　共通*/

.pc { display: block;}
.sp { display: none;}

.flex_row {
  display: flex;
  display: -webkit-flex;
  display: -ms-flex;
}
#lower_Page div.main  {
  position: relative;
  margin: 0 0 50px;
}
p.main_ttl {
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, .75);
  text-align: center;
  letter-spacing: 1.5px;
  font-size: 2em;
  padding: 20px 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*太め下線見出し*/
.ttl_uLine {
  position: relative;
  font-size: 1.5em;
  font-weight: bold;
  margin: 50px auto 65px;
  color: #757575;
  text-align: center;
}
.ttl_uLine::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #93cdd6;
  width: 90px;
  height: 3px;
}
/*二重下線見出し*/
.ttl_double {
  width: 100%;
  font-size: 1.15em;
  font-weight: bold;
  padding: 5px;
  margin: 0 0 15px;
  color: #757575;
  border-bottom: 4px double #93cdd6;
}
p.lead_txt {
  text-align: center;
  margin: 50px auto;
  line-height: 1.5;
  width: 94%;
}
.next_btn {
   padding: 3px; 
   outline: 1px solid #dddddd;
   max-width: 35%;
   font-size: 1.2em;
   margin: 0 auto 70px;
   text-align: center;
}
.next_btn a {
  display: block;
  position: relative;
  width: 100%;
  border: 1px solid #dddddd;
  background: #dcf5f9;
  padding: 20px 0;
  box-sizing: border-box;
}
.next_btn a::after {
  content: '';
  position: absolute;
  top: 42%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-sizing: border-box;
  transition: 0.5s;
}
.next_btn a:hover::after {
  right: 15px;
  transition: 0.5s;
}

.request_box {
  font-weight: bold;
  text-align: center;
  margin: 70px auto;
}
p.request_btn {
  background: #66c989;
  color: #FFF;
  display: block;
  border-radius: 50px;
  max-width: 380px;
  width: 94%;;
  margin: 0 auto 15px;
  font-size: 1.5em;
  letter-spacing: 2px;
  padding: 15px 0;
}

.request_box .tel_number {
  font-size: 2.3em;
  letter-spacing: 2px;
}
.request_box address { line-height: 1.5;}

/*個人戸建ページナビゲーション*/
#lower_Page div.main + ul.kodate_nav { margin-top: -50px;}
ul.kodate_nav {
  width: 100%;
  background: #efefef;
  margin: 0 0 50px;
  justify-content: center;
  padding: 12px 0;
  text-align: center;
}
ul.kodate_nav li { position: relative;}
ul.kodate_nav li:nth-of-type(-n+5) {
  margin: 0 5%  0 0;
}
ul.kodate_nav li.here::after,
ul.kodate_nav li a:hover::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: #93cdd6;
  width: 100%;
  height: 3px;
}

.personal img,
.corporative img {
  width: 100%;
  vertical-align: middle;
}

/*マンションリノベーション ナビゲーション*/
.reno_nav01 {
  max-width: 1200px;
  width: 94%;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto 40px;
}
.reno_nav01 h5 {
  max-width: 334px;
  width: 35%;
}
.reno_nav01 h5 img { width: 100%;}
.reno_nav01 ul {
  justify-content: space-between;
  width: 60%;
}
.reno_nav01 ul li {
  width: calc((100% - 10%) / 4);
  text-align: center;
}
.reno_nav01 ul li a {
  position: relative;
  transition: .3s;
  opacity: 1;
}

#reno_top .reno_nav01 ul li:nth-of-type(1) a::after,
#reno_concept .reno_nav01 ul li:nth-of-type(2) a::after,
#reno_sale .reno_nav01 ul li:nth-of-type(3) a::after,
#reno_result .reno_nav01 ul li:nth-of-type(4) a::after,
.reno_nav01 ul li a:hover::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  background: #93cdd6;
  width: 100%;
  height: 3px;
}

.reno_nav02 {
  margin: 100px auto 80px;
  justify-content: space-between;
}
.reno_nav02 li {
  width: calc((100% - 8%) / 3);
  text-align: center;
  box-sizing: border-box;
}
.reno_nav02 li a {
  font-size: 18px;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #2e79bf;
  background: #d3edfb;
  padding: 20px 0;
  box-sizing: border-box;
  letter-spacing: 2px;
  position: relative;
}
.reno_nav02 li a::after {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  box-sizing: border-box;
  transform: translateY(-50%) rotate(45deg);
  transition: .3s;
}
.reno_nav02 li a:hover::after {
  right: 10px;
  transition: .3s;
}
a[href*="/reno_result/"] /*リノベーション施工事例クローズ*/
{
/*   pointer-events: none;
  opacity: .3 !important; */
}



/*===========================
sp
===========================*/
@media only screen and (max-width: 768px) {

#bread_List .flex a { font-size: 9px;}
#bread_List .flex a::after { padding: 0 5px;}

#lower_Page > .flex { padding: 30px 0 70px;}
.side_Btn_Wrap,
#main_Content_Wrap { width: 100%;}

.side_Btn_Wrap .side_Btn_List {
  flex-wrap: wrap;
/* justify-content: space-between;
width: 100%;
text-align: center; */
}
.side_Btn_Wrap:first-of-type { padding: 0 0 60px;}
.side_Btn_Wrap:last-of-type { padding: 60px 0 0;}
.side_Btn_Wrap .side_Btn_List li {
width: calc((100% - 10px) / 2);
margin: 0 10px 10px 0;
border: 4px double #ddd;

}
.side_Btn_Wrap .side_Btn_List li:nth-child(even) { margin-right: 0;}

/*個人・法人のお客様各ページ　共通*/

.pc { display: none;}
.sp { display: block;}

#lower_Page div.main  {
  margin: 0 0 30px;
}
p.main_ttl {
  font-size: 1em;
  padding: 10px 0;
}
.ttl_uLine {
  font-size: 1.2em;
  margin: 30px auto 45px;
}
h3.ttl_double {
  padding: 5px;
  margin: 0 0 15px;
}
p.lead_txt {
  font-size:0.8em;
  margin: 30px auto;
  line-height: 1.5;
}
.next_btn {
   max-width: 90%;
   margin: 0 auto 50px;
}
.request_box { margin: 50px auto;}

/*個人戸建ページナビゲーション*/
#lower_Page div.main + ul.kodate_nav { margin-top: -30px;}
ul.kodate_nav {
  flex-wrap: wrap;
  margin: 0 0 20px;
  font-size: 0.8em;
  padding: 0;
}
ul.kodate_nav li { 
  width: 50%;
  margin: 0 auto;
  box-sizing: border-box;
  border-bottom: 1px solid #93cdd6;
}
ul.kodate_nav li:nth-of-type(odd) { border-right: 1px solid #93cdd6;}
ul.kodate_nav li:nth-of-type(-n+5) { margin: 0;}
ul.kodate_nav li.here::after,
ul.kodate_nav li a:hover::after {
  content: none;
}
ul.kodate_nav li.here {
  background: #93cdd6;
  pointer-events: none;
}
ul.kodate_nav li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}
.all_outline { margin: 0 0 30px;}


/*マンションリノベーション ナビゲーション*/
.reno_nav01 {
  flex-direction: column;
  width: 100%;
  margin: 0 auto 20px;
}
.reno_nav01 h5 {
  max-width: 334px;
  width: 90%;
  margin: 0 auto 25px;
}
.reno_nav01 ul {
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid #93cdd6;
}
.reno_nav01 ul li {
  width: 50%;
  border-bottom: 1px solid #93cdd6;
}
.reno_nav01 ul li:nth-of-type(odd) { border-right: 1px solid #93cdd6;}
.reno_nav01 ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 14px;
    background: #efefef;
}
.reno_nav01 ul li a::after { content: none !important;}

#reno_top .reno_nav01 ul li:nth-of-type(1) a,
#reno_concept .reno_nav01 ul li:nth-of-type(2) a,
#reno_sale .reno_nav01 ul li:nth-of-type(3) a,
#reno_result .reno_nav01 ul li:nth-of-type(4) a {
  background: #93cdd6;
}

.reno_nav02 {
  margin: 40px auto;
  flex-direction: column;
}
.reno_nav02 li {
  width: 65%;
  margin: 0 auto;
}
.reno_nav02 li:not(:last-of-type) { margin: 0 auto 20px;}

.reno_nav02 li a {
  font-size: 16px;
  padding: 15px 0;
}

}