@charset "utf-8";

/*
Theme Name: yokohama-child
Description: エクセレントショップ横浜様デザイン
Template: understrap
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&display=swap');
/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	line-height: 1.5;background: #333;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}

.telbtn{background:#000; margin:50px auto  !important; }
#footer  { background:#000; width:100%;}

#wrapper{ background-image:url(/img/company/header.jpg) }


#contents article{ margin:0 10px 80px; padding:30px 40px;  background:rgba(255,255,255,1); border-radius:20px; }
ul.category li{ margin:0 10px 80px; padding:30px 40px;  background:#fff; border-radius:20px; }

.page-template-page-ex #contents,.page-template-page-voice #contents { margin:10px auto;  width:1100px;  }
.page #contents #subtitle{ margin:40px auto; background:url(../img/common/titleback.png) no-repeat !important; padding:20px 50px 0px ; }
.page-template-page-ex #contents h1,.page-template-page-voice #contents  h1{ color:#fff; font-weight:bold; font-size: 27px; font-size: 2.7rem; }
.page-template-page-ex #contents h2,.page-template-page-voice #contents  h2 { font-weight:bold; font-size: 18px; font-size: 1.8rem; margin:0 0 20px; }
.page-template-page-ex #contents h2 span ,.page-template-page-voice #contents  h2 span {font-family: 'Fjalla One', sans-serif;font-size: 36px; font-size:3.6rem; margin-right:1em; }
.page-template-page-ex #contents h3,.page-template-page-voice #contents  h3{ font-weight:bold; font-size: 20px; font-size: 2.0rem; margin:0 0 35px; }

.page #contents #subtitle h1{ color:#fff; font-weight:bold; }
.page #contents h2 { font-weight:bold; margin:0 0 20px; }
.page #contents h2 span {font-family: 'Fjalla One', sans-serif;margin-right:1em; }
.page #contents h3{ font-weight:bold; margin:0 0 35px; }

.page #contents #subtitle h1{ display: block; margin-left: 50px; }

.page #contents .pagenai li,.page #contents .pagenai li,.page #contents .pagenai li:first-child{background: rgba( 255,255,255,0.8);  border: none; margin:2px; padding: 0; border-radius: 5px;  display: inline-block; vertical-align: middle;}
.page #contents .pagenai a{  display: block;padding: 8px 10px;  text-decoration: none;color:#000 !important;  }
.page #contents .pagenai li:hover{  background:#666666;   }
.page #contents .pagenai li:hover a{ color: #fff!important;  }
.page #contents article{ margin:0 10px 80px; padding:30px 40px;  background:rgba(255,255,255,0.6); border-radius:20px; }


.page #contents #subtitle .pagenai{ margin:-1em 0 0 ;   }


.page-template-page-ex #contents  article,.page-template-page-voice #contents article{ margin:0 10px 80px; padding:30px 40px;  background:rgba(255,255,255,0.6); border-radius:20px; }


.archive #contents ,.single #contents,.page-template-page-blogcontents  .contents,.page-template-page-construction_ex-php .contents{ margin:10px auto;  max-width:1100px; width:90%; padding-bottom: 30px;  }
.page-template-page-ex #contents,.page-template-page-voice #contents { margin:10px auto;  width:1100px;  }
.archive #contents #subtitle,.single #contents #subtitle,.page-template-page-construction_ex-php #contents #subtitle,.page-template-page-infomation-php  #contents #subtitle{ margin:40px auto ; background:url(/img/common/titleback.png) no-repeat; padding:20px 50px 0px ; }

.page-template-page-blogcontents  .contents .subtitle,.page-template-page-construction_ex-php  .contents .subtitle,.page-template-page-infomation-php  .contents .subtitle{ margin:40px auto ; background:url(/img/common/titleback.png) no-repeat; padding:20px 50px 5px  ; }
.page-template-page-blogcontents  .contents .subtitle h1,.page-template-page-construction_ex-php .contents .subtitle h1 { margin:0 0 20px; color: #fff; }

.page-template-page-construction_ex-php  .contents .subtitle .pagenai{padding: 10px 0 0 0;}

.page-template-page-ex #contents h1,.page-template-page-voice #contents  h1{ color:#fff; font-weight:bold;  }
.page-template-page-ex #contents h2,.page-template-page-voice #contents  h2 { font-weight:bold; font-size: 18px; font-size: 1.8rem; margin:0 0 20px; }
.page-template-page-ex #contents h2 span ,.page-template-page-voice #contents  h2 span {font-family: 'Fjalla One', sans-serif;font-size: 36px; font-size:3.6rem; margin-right:1em; }
.page-template-page-ex #contents h3,.page-template-page-voice #contents  h3{ font-weight:bold; font-size: 20px; font-size: 2.0rem; margin:0 0 35px; }

.archive #contents #subtitle,.single #contents #subtitle{ margin:40px auto ; background:url(/img/common/titleback.png) no-repeat; padding:20px 0px 10px ; }


.archive #contents #subtitle h1,.single #contents #subtitle h1{ color:#fff; font-weight:bold; display: block; margin-left: 50px;  }
.archive #contents #subtitle h1 span,.single #contents #subtitle h1 span{  display:inline-block; margin-right: 1em; vertical-align: middle;}
.archive #contents #subtitle h1 b,.single #contents #subtitle h1 b{  display:inline-block;vertical-align: middle; }

.archive #contents h2 { font-weight:bold;  margin:0 0 20px; }
.archive #contents h2 span {font-family: 'Fjalla One', sans-serif; margin-right:1em; }
.archive #contents h3{ font-weight:bold;  margin:0 0 35px; }


.archive #contents .pagenai{ text-align:left; margin:30px 0 0 40px !important;    }
.archive #contents .pagenai li,.archive #contents .pagenai li,.archive #contents .pagenai li:first-child{background: rgba( 255,255,255,0.8);  border: none; margin:2px; padding: 0; border-radius: 5px;  display: inline-block; vertical-align: middle;}
.archive #contents .pagenai a{  display: block;padding: 8px 10px;  text-decoration: none;color:#000 !important;  }
.archive #contents .pagenai li:hover{  background:#666666;   }
.archive #contents .pagenai li:hover a{ color: #fff!important;  }
.archive #contents article{ margin:0 10px 80px; padding:30px 40px;  background:rgba(255,255,255,0.6); border-radius:20px; }

.archive #contents #subtitle .pagenai{ margin:-1em 0 0 ;   }
.page-template-page-ex #contents  article,.page-template-page-voice #contents article{ margin:0 10px 80px; padding:30px 40px;  background:rgba(255,255,255,0.6); border-radius:20px; }

.sidenav{ padding:1em 1em 0;  width:190px; background:rgba(255,255,255,1); border-radius:10px; }
.sidenav ul{  margin: 0.5em auto 3em; border-bottom: 1px dotted #000;}
.sidenav ul li{  position: relative; margin: 0.3em 0; padding-left: 0.8em;}
.sidenav ul li:before{ 
font-family: FontAwesome;
  content: "\f105  "; font-size: 10px;
 left: 0em; top:0.3em;  font-weight: 900;
   position: absolute;
}

.articlemain{ width:calc( 100% - 200px );}
.sidenav h4{ font-size: 18px; margin: 0; padding: 0;}
.sidenav h5{ font-size: 16px;margin: 0; padding: 0;}


/*ブログ用リッチエディタCSS*/
.honbun strong{ font-weight: 600;}
.honbun { margin: 4em auto;}
.honbun h1,
.honbun h2,
.honbun h3,
.honbun h4,
.honbun h5,
.honbun h6 {
	color: #000;
	font-weight: normal;
	line-height: 1.5em;
	margin: 0 0 20px 0;
}
.honbun h1 {
	font-size: 2.4em;
}
.honbun h2 {
	font-size: 1.8em;
}
.honbun h3 {
	font-size: 1.4em;
}
.honbun h4 {
	font-size: 1.2em;
}
.honbun h5 {
	font-size: 1em;
}
.honbun h6 {
	font-size: 0.9em;
}

.honbun em{ font-style: italic;}
.honbun ul{ list-style:disc;}
.honbun ol{  list-style-type: decimal; /* 数字 (1, 2, 3...) */;}
.honbun li{ background: none !important; padding: 0!important; margin:0.5em!important;}


.blogedit  figure { width:100%; text-align: center; margin: 1.5em auto;}
.blogedit  figure  img{ width:auto; max-width: 95%; height: auto; display: block; margin: auto;}
.blogedit  figure figcaption{  text-align: center; margin: 0.5em}

/*工事事例*/
ul.exlist li .flex{ position: relative; justify-content: space-between;}
ul.exlist li .flex .before{  display: block; position: absolute; left:0;bottom:0; width:43%;}
ul.exlist li .flex figcaption{ background: #fff; padding: 2px 1.5em; border-radius: 20px;} 
ul.exlist li .flex img{  width:100%; height: auto;}
ul.exlist li .flex .after{  display: block; width:55%; position: relative;}
ul.exlist li .flex .after img{  border: 1px solid #fff;}
ul.exlist li .flex .after figcaption{  position: absolute; left:1em; bottom: 1em;} 

ul.exlist li .before figcaption{ display: block;  margin: -3em 0 0 1em;  position: absolute;} 
ul.exlist li .before:after{ 
font-family: FontAwesome;
  content: "\f105  "; font-size: 50px; color: rgba(0,0,0,0.4);
font-weight: 900;
 display: block;   margin: -45% 0 0 96%; position: absolute;} 

ul.exlist li table {
    border-collapse: collapse;
    width: 100%; /* table幅を100%に指定 */
   background: #fff;
    border: none; padding: 1em !important;
}
ul.exlist li table th {text-align: center !important; position: relative; padding: 0.2em !important; }
ul.exlist li table td { padding: 0.2em  0 0.2em 1em!important; }
ul.exlist li table th,
ul.exlist li table td {
    display: block; /* セルをブロック要素に指定 */
    border: none;  
    padding: 0px;
    vertical-align: middle;
    text-align: left;
    box-sizing: border-box;   border: none !important;
}

ul.exlist li table th:after{ content: ''; background: #000; width:1px;  height: 1em; right: 0;top:50%; transform: translateY(-50%); position: absolute;}


/*お役立ち*/
 .single-season #wrapper{ background-image:url(/info/img/back.jpg) }
.info .data{  text-align: right;}
.info h2{  font-weight:bold; margin:0 0 0.5em ;}
.info p.read{   margin: 0 1em;}

 .info h4{font-weight:bold; margin:0 0 0 2em ;font-size:18px; font-size:1.8rem; color: #C1171A;  }
 .info .news01 , .info .news02{ margin: 2em 1em ; padding: 20px;}
 .info .news01 {border-bottom: 1px dotted #999;}
 .info .news01 img{ float: right; margin: 0.5em; }
 .info .news02 img{ float:left; margin: 0.5em; }

 .info h4:before {
  font-family: FontAwesome;
  content: "\f1b3";
   margin-right: 0.5em;

}
 .info .honbun{ margin:1em auto 2em; width:90%;}
 .info h5{font-weight:bold; margin:2em  2em 1em;font-size:18px; font-size:1.8rem;  }
 .info h6{font-weight:bold; margin-bottom: 0.5em;   }

 .info .backno{ margin: 1em; border: 1px dotted #999; padding: 15px; }
 .info .backno a{  display: block; }
 .info .backno a:before {
  font-family: FontAwesome;
  content: "\f105";
   margin-right: 0.5em;

}
 .info .backno a.next{
  margin:1.5em 0 0 0;

}
 .info .backno a.next:before {
 font-family: FontAwesome;
  content: "\f107";
   margin-right: 0.5em;
}

#contents #maincontets{ width:100%; background: #fff;}
#contents #maincontets article{ margin:0; padding:30px 0; background: #ddd; border-radius:none; }



/*ブログ*/
#maincontets  div.gray{ background:#ececec; padding: 80px 0; text-align: center;}

@media screen and (min-width: 768px) {
    ul.exlist li table th,
    ul.exlist li table td {
        display: table-cell; /* デフォルト値に指定 */
        border-bottom: 1px solid #ccc;
        color: #000;
        background: #fff;
    }
    ul.exlist li table th {
        color: #000;
        background: #fff; /* thの背景色 */
    }
    ul.exlist li table tr th:first-child {
        width: 100px; /* thの固定幅 */
    }
}

@media screen and (max-width: 1000x) {
#contents  ul.exlist li h2.font22{ font-size:18px !important; font-size:1.8rem !important; }
#contents  ul.exlist li h2 span.font36{ font-size:16px !important; font-size:1.6rem !important;}
#contents  ul.exlist li h2 span.font40{ font-size:16px !important; font-size:1.6rem !important;}

}

@media screen and (max-width:720px) {
.archive #contents article{ margin:0 auto 40px; padding:20px;   border-radius:10px; }
#contents article,.page-template-page-ex #contents  article,.page-template-page-voice #contents article{margin:0 auto 40px; padding:20px;   border-radius:10px; }
ul.category li{ margin:0 auto 40px; padding:20px;   border-radius:10px; }
.honbun { margin:2em auto;}  
.page #contents #subtitle{ margin:40px auto ; background:url(../img/common/titleback.png) no-repeat 0 0; padding:20px 0px 0px ; background-size: auto 100%;  }
 .sidenav{ margin: 2em auto; width:100%;  border-radius:5px; }
.articlemain{ argin: 0em auto; width:100%;  }
.sidenav ul{  margin: 0.5em auto 1em; }
.sidenav h4{ font-size: 16px; margin: 0; padding: 0;}
.sidenav h5{ font-size: 16px;margin: 0; padding: 0;}

 /*工事事例*/
ul.exlist li .flex{ display: block;}
ul.exlist li .flex .before{  display: block; position: relative; left:0;bottom:0; width:50%; max-width: 300px; margin: 0 auto; }
ul.exlist li .flex .after{  display: block; margin: 30px auto 0; width:100%; max-width:500px;}
ul.exlist li .before:after{ margin: 0; top:87%;  left:50%;    translate:-50% 0 ;
  rotate: 90deg;} 

.info .news01 ,#info .info .news02{ margin: 2em auto ; padding: 0px;}
.info h5{ margin:2em  auto 1em;font-size:18px; font-size:1.8rem;  }
.info h4{margin:0 ;  }
    
    
    }