@charset "UTF-8";
/* CSS Document */

html,body{ margin:0; padding: 0; width: 100%; height: 100%; position: relative;}

.hhc{ margin-top:0; position:relative; width: 100%; height: 100%; min-height: 500px; background: #000000;/* background: url(img/101.jpg) no-repeat center center; background-size: cover;*/}
.hhc *{ margin-top:0;}

.hhc .hhc-title{ display:block; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.hhc .hhc-scroll{ display:block; margin: 0 auto; position:absolute; left: 0; right: 0; bottom: 1.0em;}
.hhc .en a{ display: block; margin:0; padding: 0.3em 1.0em; border: solid 1px #FFFFFF; background: rgba(255,255,255,0.7); position: absolute; top: 2.0em; right: 2.0em; text-decoration: none; color: #4D4D4D;}
.hhc .en a:hover{ text-decoration:underline;}

.searchBoxWrapper{ margin: 0; padding: 0; text-align:right;}


.section-topics{}
.section-topics .title{ font-size:129%; font-weight: 200;}
.section-topics .title img{ vertical-align:center; margin-right:0.5em;}
.topics *{ margin-top:0;}
.topics{ border-top:solid 1px #CCCCCC;}
.topics li{ border-bottom:solid 1px #CCCCCC; padding: 0.5em 0;}
.topics li:after { content:""; display:block; clear:both;}
.topics time{ display:block; padding: 0 1.0em 0 0; float: left;}
.topics a{ display:block; margin: 0 0 0 0; padding: 0 0 0 1.0em; line-height: 1.5; color:#009d99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: solid 1px #CCCCCC;}

.section-info{}
.section-info .title{ font-size:129%; font-weight: 200;}
.section-info .title img{ vertical-align:center; margin-right:0.5em;}
.info *{ margin-top:0;}
.info{ border-top:solid 1px #CCCCCC;}
.info li{ border-bottom:solid 1px #CCCCCC; padding: 0.5em 0;}
.info li:after { content:""; display:block; clear:both;}
.info time{ display:block; padding: 0 0 0 0; font-size:86%; }
.info a{ display:block; margin: 0 0 0 0; padding: 0 0 0 0; line-height: 1.5; color:#009d99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 93%;}

.section-blog{}
.section-blog .title{ font-size:129%; font-weight: 200;}
.section-blog .title img{ display:inline-block; vertical-align:center; margin-right:0.5em;}
.blog *{ margin-top:0;}
.blog{ border-top:solid 1px #CCCCCC;}
.blog li{ border-bottom:solid 1px #CCCCCC; padding: 0.5em 0;}
.blog li:after { content:""; display:block; clear:both;}
.blog time{ display:block; padding: 0 0 0 0; font-size:86%; }
.blog a{ display:block; margin: 0 0 0 0; padding: 0 0 0 0; line-height: 1.5; color:#009d99; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 93%;}


.section-hibiki{ background:rgba(0,0,0,0.05);}
.section-hibiki .title{ margin: 0; font-size:172%; font-weight:400; text-align:center;}

.section-pickup{}
.pickup { display:block; padding: 30% 0 0 0; position: relative; background: #4d4d4d url(img/31.svg) no-repeat center right; background-size:contain; color: #FFFFFF; /*box-shadow: 1px 1px 4.0px #000000;*/ }
.pickup.pickup01{ baclground-color:#4d4d4d;}
.pickup.pickup02{ background-color:#c88c0e; background-image:url("img/pickup_ backhoe.svg");}
.pickup div{ margin:0; padding: 0; line-height: 1.5; position: absolute; top: 0.5em; left: 1.0em;}
.pickup .title{ font-size:116%; font-weight: 400;}
.pickup .body{  font-size:93%; font-weight: 200; width:70%;}


.section-navigation{ background:rgba(0,0,0,0.05);}
.navigation{ background:#FFFFFF; padding: 0 0 2.0em 0;}
.navigation *{ margin-top:0;}
.navigation .inner{ margin:0 1.0em;}
.navigation .title{ margin: 1.0em 0 0 0; font-size:129%; font-weight: 200; line-height: 1.5;}
.navigation .title img{ display:inline-block; vertical-align: middle; margin-right: 0.5em; width:30px;}
.navigation .body{ margin: 1.0em 0 0 0; line-height: 1.5; font-size:93%;}
.navigation .subtitle{ display:inline-block; margin-top:1.0em; padding: 0.2em 0.5em; color:#187fc4; border:solid 1px #187fc4;}

.navigation .navi{ margin:1.0em 0 0 0; font-size:93%;}
.navigation .navi a{ color:#4d4d4d;}
.navigation .navi a:before{ display: inline-block; font-family: "Font Awesome 5 Free"; content:'\f054'; margin-right: 0.5em; text-decoration: none; color:#187fc4; font-weight: 900;}
.navigation .navi.navi02 a:before{ color:#87668e;}
.navigation .navi.navi03 a:before{ color:#dc5b37; }
.navigation .navi.navi04 a:before{ color:#c88c0e; }

.contactTEL th{ font-weight: bold;}
.contactTEL td{ padding-left:1.0em;}


@media only screen and (min-width:480px){ /* pc only */
  
}
@media only screen and (max-width:480px){ /* sm pnly */
  .hhc{ margin-top:0; position:relative; width: 100%; height: 100%; min-height: 100px;}
  .searchBoxWrapper{ display:none;}
  .pickup { padding: 50% 0 0 0;  }
  .pickup div{ top: 0; left: 1.0em; right: 1.0em;}
  .pickup .title{ margin: 1.0em 0 0 0; font-size:100%; font-weight: 400;}
  .pickup .body{ margin: 1.0em 0 0 0;  font-size:86%; font-weight: 200; width:100%;}
  
	.contactTEL th,
	.contactTEL td{ margin:0; padding:0;}
}