/*   
Theme Name: hiroken
Theme URI:https://hiroken1004.com/
Description:ヒロ建設工業のテーマです。


Author:金浦
Author URI:http://sangodesign.jp/
Version:1.0 2020.5.24
*/

/* ------------------------------
 Base
------------------------------ */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
}

* {
  border: none;
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section, article, aside, dialog, figure, footer, header, hgroup, nav, li {
  display: block;
}

body {
  font-size: 16px;
  font-weight: 400;
	font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.8;
  letter-spacing: 1px;
  text-align: center;
  color: #333333;
  background: #fff;
}

a {
  color: #333333;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: none;
  text-decoration: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

a.hover {
  cursor: pointer;
  color : #0094c1;
}

li {
  list-style-type: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
img.objectfit {
  object-fit: cover;
  font-family: 'object-fit: cover;';
  width: 100%;
  height: 100%;
}

::selection {
  background: #cde6ff;
}

::-moz-selection {
  background: #cde6ff;
}

/* clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*/
     /*/
height: auto;
overflow: hidden;
/**/
}

/* ---------- Common-Setting ---------- */
body {
  overflow: auto !important;
}
body.no-scroll {
  overflow: hidden !important;
}
/* ------------------------------
 Base END
------------------------------ */

/* 読み込みフォント */
.f_min{
	font-family: "Sawarabi Mincho";
}
/* フォントサイズ */
.f90{
	font-size:90%;
}
.f110{
	font-size:110%;
}
.f120{
	font-size:120%;
}
.f150{
	font-size:150%;
}
.f180{
	font-size:180%;
}
.f200{
	font-size:200%;
}
.f250{
	font-size:250%;
}
.fb{
	font-weight:bold;
}
/* カラー */
.gry{
	color: #808080;
}
.red{
	color:red;
}
.blue{
	color: #1967b2;
}
.white{
	color: #FFFFFF;
}
.cyan{
	color: #0094c1;
}
.orange{
	color: #ffa500;
}
.orange2{
	color: #E86612;
}
.green{
	color: #179A46;
}
.under_line {
	background: linear-gradient(transparent 60%, #ffff5f 60%);
}
/* 改行 */
.br-sm { display:inline;}
.br-pc { display:none;}

/* リストスタイル */
ul.decimal li{
	list-style-type: decimal !important;
	text-align: left;
}
/* 位置 */
.center {text-align:center !important;}
.right {text-align:right !important;}
.left {text-align:left !important;}
.pc_center{text-align:center !important;}

/* 余白 */
.mt120 {margin-top:120px;}
.mt100 {margin-top:100px;}
.mt80 {margin-top:80px;}
.mt60 {margin-top:60px;}
.mt40 {margin-top:40px;}
.mt20 {margin-top:20px;}
.mt15 {margin-top:15px;}
.mt10 {margin-top:10px;}
.mt5 {margin-top:5px;}
.banner-top {margin-top:60px;}

/* フロート画像(右) */
img.flright{
    display: block;
    line-height: normal;
    float: right;
}
/* フロート画像(左) */
img.flleft{
    display: block;
    line-height: normal;
    float: left;
	margin:0 20px 0 0;
}

/* grid */
.grid-left {
	float: left;
	padding-top: 0;
}
.grid-right {
	float: right;
	padding-top: 0;
}
/* ボタン */
.btn a {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=100);
    opacity: 1;
}
.btn a:hover,
.btn a:active {
    filter: alpha(opacity=70);
    opacity: 0.70;
}
.simple_btn_box{
	width: 200px;
	margin: 40px auto 0;
}
.simple_btn {
	display: block;
	position: relative;
	width: 100%;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #0094c1;
}
.simple_btn:hover {
	 cursor: pointer;
	 text-decoration: none;
	background:#333333;
	color: #fff;
}

.tab_btn {
	display: inline-block;
	width: 200px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #333;
	color: #fff;
}
.tab_btn::before,
.tab_btn::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.tab_btn,
.tab_btn::before,
.tab_btn::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.tab_btn:hover {
	background: #0094c1;
	color: #fff;
}

.tab_btn_in {
	display: inline-block;
	width: 300px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	outline: none;
	background-color: #333;
	color: #fff;
}
.tab_btn_in::before,
.tab_btn_in::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.tab_btn_in,
.tab_btn_in::before,
.tab_btn_in::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.tab_btn_in:hover {
	background: #0094c1;
	color: #fff;
}


.bluebtn {
	display: inline-block;
	padding: 0.8em 2em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #0094c1;
}
.bluebtn:hover {
	 cursor: pointer;
	 text-decoration: none;
	background:#333333;
	color: #fff;
}

/* ------------------------------
 Header
------------------------------ */
#header {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	padding: 40px 0 10px;
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-sizing: border-box;
}
#header #hdlogo {
	float: left;
	width: 240px;

}
#header .block {
	max-width: 1600px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fixed{
	background:rgba(0,0,1,0.5);
}

.is-scroll #header {
  background-color: rgba(30, 30, 30, 0.45);
  padding: 20px 0;
}
.is-scroll #header #globalnavi {
  top: -20px;
}
.is-scroll #header #globalnavi #navibutton {
  width: 70px;
  height: 70px;
  margin-top: 7px;
}
.is-scroll #header #globalnavi #navibutton .hamburger {
  padding: 25px 0 0;
  width: 70px;
  height: 55px;
}

/* ------------------------------
 GlobalNavi
------------------------------ */
#globalnavi {
  position: absolute;
  top: -5px;
  right: 100px;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#globalnavi #navibutton {
  width: 80px;
  height: 80px;
  display: block;
  position: relative;
  z-index: 920;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  float: right;
  margin: 0 0 0 40px;
}
#globalnavi .fat-nav {
  display: none;
}
#globalnavi .hd_snsicon {
  overflow: hidden;
  padding-top: 29px;
}
#globalnavi .hd_snsicon li {
  float: left;
  margin: 0 7px;
}
#globalnavi .hd_snsicon li a {
  line-height: 22px;
  width: 22px;
  height: 22px;
  display: block;
}
#globalnavi .hd_snsicon li a i {
  color: #fff;
  font-size: 22px;
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateZ(0deg);
  -webkit-transform: rotateZ(0deg);
}
#globalnavi .hd_snsicon li a:hover i {
  transform: rotateZ(360deg);
  -webkit-transform: rotateZ(360deg);
}
#globalnavi .hd_eventicon {
  display: none;
}


.gnav{
	position: absolute;
	top: 20px;
	right: 70px;
}
#dropmenu {
  list-style-type: none;
  width: 250px;
  padding: 0;
}
#dropmenu li {
  position: relative;
  width:auto;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu li a {
  display:inline-block;
  margin: 0 1.5em 0 0;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul {
  list-style: none;
  position: absolute;
  z-index: 100;
  top: 100%;
  left: -95px;
  width: 100%;
  margin: 10px 0 0 0; 
  padding: 0;
}
#dropmenu li ul li {
	overflow:hidden;
	height: 0;
	color: #fff;
	transition: .2s;
	margin-left: 2em;
}
#dropmenu li ul li a {
	padding: 13px 0;
	background: #000000;
	width: 150px;
	text-align:center;
	font-size: 12px;
	font-weight: normal;
}
#dropmenu > li:hover > a {  color: #e2740f; }
#dropmenu > li:hover li:hover > a {  background: #ba0018; color: #ffffff; }
#dropmenu > li:hover > ul > li {
  overflow: visible;
  height: 38px;	
}
.spin {
	width: 25px ;
	height: 25px ;
	line-height: 25px ;
	text-align: center ;
}
.target {
	transition: .5s ;
	transform: rotateZ( 0deg ) ;
}
.spin:hover .target {
	transform: rotateZ( 360deg ) ;
}

/* ------------------------------
 Fat-Navigation
------------------------------ */
.fat-nav, .hamburger__icon, .hamburger__icon:after, .hamburger__icon:before {
  -moz-transition-duration: .4s;
  -o-transition-duration: .4s;
  -webkit-transition-duration: .4s;
  transition-duration: 0.4s;
}

.hamburger {
  width: 80px;
  height: 60px;
  margin: 0 auto;
  display: block;
  padding: 30px 0 0;
  box-sizing: border-box;
  touch-action: manipulation;
  display: none;
  position: relative;
  text-align: center;
}

#navibutton .hamburger {
  display: block;
}

.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #222;
}

.hamburger__icon {
  position: relative;
  margin: 0 auto;
  width: 35px;
}
.hamburger.active .hamburger__icon {
  width: 24px;
}

.hamburger__icon:before {
  top: -7px;
  right: 0;
}

.hamburger__icon:after {
  top: 7px;
  right: 0;
}

.hamburger__icon:before, .hamburger__icon:after {
  position: absolute;
  content: "";
}

.hamburger.active .hamburger__icon {
  background-color: transparent;
}

.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after {
  width: 24px;
  background-color: #222;
}

.hamburger.active .hamburger__icon:before {
  -moz-transform: translateY(7px) rotate(45deg);
  -ms-transform: translateY(7px) rotate(45deg);
  -webkit-transform: translateY(7px) rotate(45deg);
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active .hamburger__icon:after {
  -moz-transform: translateY(-7px) rotate(-45deg);
  -ms-transform: translateY(-7px) rotate(-45deg);
  -webkit-transform: translateY(-7px) rotate(-45deg);
  transform: translateY(-7px) rotate(-45deg);
}

a.hamburger::after {
  content: "MENU";
  color: #222;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  display: block;
  font-size: 12px;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 1.2;
  width: 100%;
  letter-spacing: 0;
  font-family: "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro", "Meiryo", "メイリオ", Helvetica, sans-serif;
}

a.hamburger.active::after {
  content: "CLOSE";
}

.fat-nav {
  top: 0;
  left: 0;
  z-index: 900;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /*background: url(../image/bg_ivory.jpg);*/
  background: rgba(239, 239, 239, 0.95);
  -moz-transform: translateY(10%);
  -ms-transform: translateY(10%);
  -webkit-transform: translateY(10%);
  transform: translateY(10%);
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.fat-nav__wrapper {
  width: 100%;
  height: 100%;
  padding: 70px 0;
  box-sizing: border-box;
  position: relative;
  display: table;
  table-layout: fixed;
  transform: translateY(0) !important;
  -webkit-transform: translateY(0) !important;
}
.fat-nav__wrapper #navi_content {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.fat-nav-inner {
  width: 1200px;
  height: 100%;
  display: table;
  table-layout: fixed;
  margin: 0 auto;
  padding: 0;
}

.fat-nav.active {
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.fat-nav .home a {
  display: block;
  width: 300px;
  margin: 0 auto 40px;
}
.fat-nav .navibox {
  padding: 0 100px;
}
.fat-nav ul.form {
  box-sizing: border-box;
  overflow: hidden;
  margin: 0 auto 40px;
  width: 1000px;
  border-left: 1px solid #222;
  border-top: 1px solid #222;
}
.fat-nav ul.form li {
  text-align: center;
  list-style: none !important;
  width: 50%;
  float: left;
  box-sizing: border-box;
}
.fat-nav ul.form li a {
  color: #222;
  position: relative;
  padding: 12px;
  display: block;
  line-height: 1.5;
  font-size: 17px;
  font-weight: 700;
  background-color: #fff;
  border-radius: 1px;
  border-right: 1px solid #222;
  border-bottom: 1px solid #222;
}
.fat-nav ul.form li a:hover {
  background-color: #222;
  color: #fff;
}
.fat-nav ul.form li a span {
  display: block;
  font-size: 11px;
  color: #999;
  font-weight: normal;
  text-transform: uppercase;
}
.fat-nav .menu {
  box-sizing: border-box;
  padding: 0;
  width: 1000px;
  margin: 0 auto 40px;
}
.fat-nav .menu dl {
  overflow: hidden;
}
.fat-nav .menu dl dt {
  font-size: 18px;
  font-weight: bold;
  padding: 12px;
  background-color: #222;
  color: #fff;
  margin-bottom: 15px;
}
.fat-nav .menu dl dd {
  list-style: none !important;
  border-bottom: 1px solid #bbb;
  width: 31.3%;
  float: left;
  margin: 0.5% 1%;
}
.fat-nav .menu dl dd a {
  padding: 15px 5px;
  display: block;
  line-height: 1.3;
  font-size: 16px;
  font-weight: 700;
}

/* ------------------------------
 footer
------------------------------ */
.foot-menu{
	width: 1000px;
	margin: 100px auto 0;
	display: flex;
	justify-content: space-between;
}
.foot-menu-in{
	width: 23%;;
}
.footer-ue{
	width: 1000px;
	margin: 100px auto 0;
	display: flex;
	justify-content: space-between
}
.footer-ue01{
	width: 500px;
}
.footer-ue02{
	width: 450px;
	text-align: left;
}

.foot_yakusoku{
	margin-top: 40px;
	width: 500px;
	background: url("img/yakusoku.png") no-repeat center center;
	background-size: cover;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1ch;
	padding: 20px 0px;
}
.footer-ue02 ul li{
	list-style: none;
	margin-top: 15px;
}
.footer{
	width: 100%;
	margin-top: 80px;
	background-color: #595757;
	padding: 40px 0 0;	
}
.footer-in{
	width: 1000px;
	margin: 0 auto;
	padding: 20px 0;	
	display: flex;
	justify-content: space-between;
}
.footer-navi{
	width: 22.75%;
	margin-right: 3%;
}
.footer-navi:last-child{
	margin-right: 0%;
}
.footer-navi ul li{
	list-style: none;
	margin-top: 10px;
	text-align: left;
}
.footer-navi ul li a:link,
.footer-navi ul li a:active,
.footer-navi ul li a:visited {
	color:#ffffff;
	text-decoration:none;
}
.footer-navi ul li a:hover,
.footer-navi ul li a:focus {
	color:#ffffff;
	text-decoration:underline;
}

#foot{
	margin-top: 100px;
}
.foot_company01{
	width: 50%;
	height: 400px;
	background: url("img/foot_bg.jpg") no-repeat center center;
	background-size: cover;
	float: left;
	color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
.foot_company02{
	width: 50%;
	float: right;
}
.foot_company02_in{
	width: 470px;
	margin-left: 30px;
	text-align: left;
}

.foot_company02_btn {
	position: relative;
	background-color: #0094c1;
	color: #FFFFFF;
	margin-top: 20px;
	width: 100%;
	height: 65px;
	z-index: 1;
}
.foot_company02_btn a{
	color: #FFFFFF;
}
.foot_company02_btn .box_imageLeft {
	position: absolute;
	left: 0;
}
.foot_company02_btn p.p01{
	position: absolute;
	top: 5px;
	left: 90px;
	font-weight: bold;
	font-size: 110%;
}
.foot_company02_btn p.p02{
	position: absolute;
	top: 35px;
	left: 90px;
	font-size: 90%;
}

.overlink{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2;
}
.foot_logo{
	width: 330px;
}
.foot_company {
	margin: 40px auto 0;
	text-align: center;
	display: block;
}
.foot_company ul {
	padding-left: 0;
	list-style: none;
	display: inline-block;
}
.foot_company ul li {
	text-align: left;
	margin: 0 40px ;
	float: left;
}

ul.sns_list {
	margin-top: 20px;
	text-align: center;
	margin-left: -10px;
	font-size: 0; /* タグ改行時の空白防止 */
}

ul.sns_list li{
	display: inline-block;
	margin-left: 10px;
	font-size: 14px; /* ulでサイズ0にしたのを戻す */
}

#copy{
	margin-top: 0;
	background-color: #231815;
	padding: 10px 0;
	text-align: center;
	color:#ffffff;
	font-size: 80%;
}
.tel-number a {
    color:#333333;
    text-decoration:none;
}

/* ------------------------------
 基本ベース
------------------------------ */
.contents{
	width: 1000px;
	margin: 80px auto 0;
	text-align: left;
}
.main_contents{
	width: 1000px;
	margin: 100px auto 0;
}
.main_contents_m0{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
.breadcrumbs {
	width: 1000px;
	margin:20px auto;
	text-align: left;
}
.bg_gry{
	background: #eeeeef;
	padding: 80px 0;
}
.midashi{
	font-size: 48px;
	font-weight: bold;
	text-align:left;
	color: #0094c1;
}
.midashi2{
	font-size: 40px;
	font-weight: bold;
	text-align:center;
	color: #0094c1;
}
.midashi3{
	font-size: 40px;
	font-weight: bold;
	text-align: center;
}
.title_blk{
	background-color: #333333;
	color: #FFFFFF;
	text-align: center;
	padding: 10px 20px;
	display: inline-block;
}

.news_title{
	width: 150px;
	float: left;
	margin-right: 20px;
	text-align: center;
}
.news_title p{
	color: #0094c1;
	font-size: 200%;
	font-weight: bold;
	line-height: 1.2;
}
.news_text{
	width: 830px;
	float: left;
}
.tab-wrap {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}
.tab-label-red,
.tab-label-blue,
.tab-label-green{
    color:#000000;
    padding: 3px 12px;
    order: -1;
	width: 200px;
	border: 1px solid #000000;
}
.tab-content {
    width: 100%;
    display: none;
	padding: 20px 0;
	text-align: left;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label-red {
	background-color: #ba0018;
	border: 1px solid #ba0018;
	color: #FFFFFF;
}
.tab-switch:checked+.tab-label-red+.tab-content {
     display: block;
}
.tab-switch:checked+.tab-label-blue {
	background-color: #002b4d;
	border: 1px solid #002b4d;
	color: #FFFFFF;
}
.tab-switch:checked+.tab-label-blue+.tab-content {
     display: block;
}
.tab-switch:checked+.tab-label-green {
	background-color: #116331;
	border: 1px solid #116331;
	color: #FFFFFF;
}
.tab-switch:checked+.tab-label-green+.tab-content {
     display: block;
}
dl.news_event{
	margin-top: 0px;
}
dl.news_event dt{
	float: left;
	padding: 15px 0;
}
dl.news_event dd{
	margin-left: 150px;
	padding: 15px 0;
}
.new{
	background-color:#ba0018;
	color:#ffffff;
	padding: 5px 1em ;
	margin-left: 1em;
	font-size: 90%;
}
.blog_area{
	width: 800px;
	margin: 80px auto 0;
	text-align: left;
	border: 1px solid #CFCFCF;
	padding: 40px;
	box-sizing: border-box;
}
h4.blog_title {
	font-size: 120%;
	border-bottom: solid 3px #a9d5e0;
	position: relative;
}
h4.blog_title:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #8dc21f;
	bottom: -3px;
	width: 20%;
}
.thumbnail{
	float: left;
	width: 200px;
}
.cat_text{
	float: right;
	width: 498px;
}
/* ラジオボタン非表示 */
.tab-switch {
    display: none;
}
/* 記事一覧 */
.pagination{
   margin:40px 0 0;
	display: inline-block;
}
.nav-links{
   display:flex;
}
.pagination .page-numbers{
   display:inline-block;
   margin-right:20px;
   padding:20px 25px;
   color:#333;
   border-radius:3px;
   box-shadow:0 3px 3px #999;
   background:#fff;
}
.pagination .current{
   padding:20px 25px;
   background:#0094c1;
   color:#fff;
}
.pagination .prev,
.pagination .next{
   background:transparent;
   box-shadow:none;
   color:#0094c1;
}
.pagination .dots{
   background:transparent;
   box-shadow:none;
}

/* TOP-イベント */
.event-info{
	width: 94%;
	margin-left: auto;
	margin-right: auto;
}
.event_box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.event_box_item{
	width: 19%;
	margin-top: 40px;
	position: relative;
	z-index: 1;
}
.event_box_item:nth-child(5n){
	margin: 40px 0 0 0;
}
.event_box_item a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.event_box_item a:hover {
  opacity: 0.5;
  background: #fff;
}
.event_box_flex{
	margin-top: 10px;
	border-top: 1px solid #000000;
	display: flex;
	justify-content: space-between
}
.event_box_flex_time{
	width: auto;
}
.event_box_flex_tag{
	width: auto;
}

.event_box_flex_tag span,
.housing,
.reform,
.observation,
.consultation{
	display: inline-block;
	color:#ffffff;
	padding: 5px .5em ;
	margin-left: 1em;
	margin-top: 5px;
	font-size: 90%;
}
.event_box_flex_tag span{
	background-color:#0094c1;
}
.housing{
	background-color:#ba0018;
}
.reform{
	background-color:#eb6101;
}
.observation{
	background-color:#1e50a2;
}
.consultation{
	background-color:#007b43;
}
.event_box_title{
	margin-top: 10px;
	font-size: 120%;
	font-weight: bold;
	text-align: left;
}
.event_box_text{
	margin-top: 10px;
	border-top: 1px solid #000000;
	text-align: left;
}
/*------------------------------------
 CONCEPT
------------------------------------*/
.wrapper {
  width: 1200px;
  margin: 0 auto;
  text-align: left;
  clear: both;
}
#conceptarea {
  margin-bottom: 120px;
}
#conceptarea .bg {
  position: relative;
}
#conceptarea .bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: url("img/bg_top01.jpg") no-repeat center center;
  background-size: cover;
}
#conceptarea h2.title {
  position: absolute;
  color: #fff;
  right: 10%;
  top: 0;
  padding-top: 80px;
	font-weight: bold;
	text-align: left;
}
#conceptarea h2.title::before {
  content: "";
  width: 1px;
  height: 80px;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
#conceptarea .inner {
  padding-top: 400px;
}
#conceptarea .inner figure {
  position: absolute;
  right: 0;
  top: 300px;
  width: 50%;
}
#conceptarea .inner figure a {
  display: block;
  overflow: hidden;
}
#conceptarea .inner figure a:hover img {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
}
#conceptarea .inner figure img {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
}
#conceptarea .inner .textarea {
  margin-top: 70px;
}
#conceptarea .inner .textarea .lead {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5;
}
#conceptarea .inner .textarea .text {
  margin-bottom: 40px;
}

/*------------------------------------
リノベーション
------------------------------------*/
#renovation {
  margin-bottom: 140px;
}
#renovation .bg {
  position: relative;
}
#renovation .bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: url("img/bg_top02b.jpg") no-repeat center center;
  background-size: cover;
}
#renovation h2.title {
  position: absolute;
  color: #fff;
  left: 10%;
  top: 0;
  padding-top: 80px;
	font-weight: bold;
	text-align: left;
}
#renovation h2.title::before {
  content: "";
  width: 1px;
  height: 80px;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
#renovation .inner {
  padding-top: 400px;
}
#renovation .inner figure {
  position: absolute;
  left: 0;
  top: 300px;
  width: 50%;
}
#renovation .inner figure a {
  display: block;
  overflow: hidden;
}
#renovation .inner figure a:hover img {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
}
#renovation .inner figure img {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
}
#renovation .inner .textarea {
  width: 50%;
  margin-left: auto;
  padding: 80px 0 0 80px;
  box-sizing: border-box;
}
#renovation .inner .textarea .lead {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5;
}
#renovation .inner .textarea .text {
  margin-bottom: 40px;
}
/*------------------------------------
法人向け
------------------------------------*/
#hojinarea {
  margin-bottom: 120px;
}
#hojinarea .bg {
  position: relative;
}
#hojinarea .bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: url("img/bg_top03.jpg") no-repeat center center;
  background-size: cover;
}
#hojinarea h2.title {
  position: absolute;
  color: #fff;
  right: 10%;
  top: 0;
  padding-top: 80px;
	font-weight: bold;
	text-align: left;
}
#hojinarea h2.title::before {
  content: "";
  width: 1px;
  height: 80px;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
#hojinarea .inner {
  padding-top: 400px;
}
#hojinarea .inner figure {
  position: absolute;
  right: 0;
  top: 300px;
  width: 50%;
}
#hojinarea .inner figure a {
  display: block;
  overflow: hidden;
}
#hojinarea .inner figure a:hover img {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
}
#hojinarea .inner figure img {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
}
#hojinarea .inner .textarea {
  margin-top: 70px;
}
#hojinarea .inner .textarea .lead {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5;
}
#hojinarea .inner .textarea .text {
  margin-bottom: 40px;
}
/*------------------------------------
無料相談会
------------------------------------*/
#consultation {
  margin-bottom: 140px;
}
#consultation .bg {
  position: relative;
}
#consultation .bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: url("img/bg_top04.jpg") no-repeat center center;
  background-size: cover;
}
#consultation h2.title {
  position: absolute;
  color: #fff;
  left: 10%;
  top: 0;
  padding-top: 80px;
	font-weight: bold;
	text-align: left;
}
#consultation h2.title::before {
  content: "";
  width: 1px;
  height: 80px;
  background-color: #fff;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
#consultation .inner {
  padding-top: 400px;
}
#consultation .inner figure {
  position: absolute;
  left: 0;
  top: 300px;
  width: 50%;
}
#consultation .inner figure a {
  display: block;
  overflow: hidden;
}
#consultation .inner figure a:hover img {
  transform: scale(1.08);
  -webkit-transform: scale(1.08);
}
#consultation .inner figure img {
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 100%;
}
#consultation .inner .textarea {
  width: 50%;
  margin-left: auto;
  padding: 80px 0 0 80px;
  box-sizing: border-box;
}
#consultation .inner .textarea .lead {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.5;
}
#consultation .inner .textarea .text {
  margin-bottom: 40px;
}

.works_main{
	width: 500px;
	float: left;
	margin-right: 20px;
}
.works_main img{
	width: 500px;
	height: 500px;
	object-fit: cover;	
}
.works_side{
	width: 480px;
	float: left;
}
ul.works_list{
	list-style:none;
	display: flex;
    flex-wrap: wrap;
}
ul.works_list li{
	width: 150px;
	margin: 0 15px 25px 0;
}
ul.works_list li img{
	width: 150px;
	height: 150px;
	object-fit: cover;	
}
ul.works_list li:nth-child(3n){
	margin: 0 0 25px 0;
}


.reno_main{
	width: 500px;
	float: right;
}
.reno_side{
	width: 480px;
	float: left;
	margin-right: 20px;
}
ul.reno_list{
	list-style:none;
	display: flex;
    flex-wrap: wrap;
}
ul.reno_list li{
	width: 150px;
	margin: 0 15px 25px 0;
}
ul.reno_list li:nth-child(3n){
	margin: 0 0 25px 0;
}

.banner475_left{
	width: 475px;
	margin-right: 50px;
	float: left;
}
.banner475_right{
	width: 475px;
	float: left;
}
ul.circle_btn{
	width: 900px;
	margin: 200px auto 0;
}
ul.circle_btn li{
	width: 33.333333%;
	float: left;
	text-align: center;
	list-style: none;
}

/*------------------------------------
下層ページ
------------------------------------*/
.under_head,
.under_renovation01{
	width: 100%;
	height: 600px;
	background-size: cover;
	background-image:url("img/concept/header.jpg");
	background-position: center center ;
	display: flex;
	justify-content: center;
	align-items: center;
}
.under_head{
	background-image:url("img/concept/header.jpg");
}
.under_renovation01{
	background-image:url("img/renovation/top_renovation.jpg");
}
.page_name{
	background:rgba(255,255,255,0.8);
	width: 700px;
	padding: 40px;
	text-align: center;
}
.page_name h2{
	font-size: 300%;
	font-weight: bold;
	line-height: 1.2;
	margin-top: 20px;
}
.page_name h3{
	font-size: 200%;
	font-weight: bold;
}
.concept_navi{
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
}
.concept_navi_in{
	width: 220px;
	margin-right: 40px;
}
.concept_navi_in:nth-of-type(4){
	margin-right: 0;
}
.concept_navi_in a{
	display: block;
	position: relative;
	padding: 0.8em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #0094c1;
}
.concept_navi_in a:hover {
	cursor: pointer;
	text-decoration: none;
	background:#333333;
	color: #fff;
}
.concept01 {
	background: url("img/concept/concept01.jpg") no-repeat center center;
}
.concept03 {
	background: url("img/concept/concept03.jpg") no-repeat center center;
}
.concept01,
.concept03{
	top: 0;
	left: 0;
	width: 70%;
	height: 500px;
	background-size: cover;
	position: relative;
}
.concept01 div.concept_box,
.concept03 div.concept_box{
	position:absolute;
	top:135px;
	left:70%;
	width:600px;
	background:#fff;
	padding:40px;
	text-align: left;
}
.concept02{
	background: url("img/concept/concept02.jpg") no-repeat center center;
}
.concept04{
	background: url("img/concept/concept04.jpg") no-repeat center center;
}
.concept02,
.concept04{
	top: 0;
	right: 0;
	width: 70%;
	height: 500px;
	float: right;
	background-size: cover;
	position: relative;
}
.concept02 div.concept_box,
.concept04 div.concept_box{
	position:absolute;
	top:135px;
	right: 70%;
	width:600px;
	background:#fff;
	padding:40px;
	text-align: left;
}
.btn_more {
	display: block;
	position: relative;
	width: 160px;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
}
.btn_more:hover {
	 background: #1B1B1B;
         color: #fff;
	 cursor: pointer;
	 text-decoration: none;
}
.renovation01 {
	background:url("img/renovation/renovation01b.jpg") no-repeat center center;
}
.renovation03 {
	background:url("img/renovation/renovation03b.jpg") no-repeat center center;
}
.renovation01,
.renovation03{
	top: 0;
	left: 0;
	width: 70%;
	height: 500px;
	background-size: cover;
	position: relative;
}
.renovation01 div.renovation_box,
.renovation03 div.renovation_box{
	position:absolute;
	top:135px;
	left:70%;
	width:600px;
	background:#fff;
	padding:40px;
	text-align: left;
}
.renovation02{
	background:url("img/renovation/renovation02b.jpg") no-repeat center center;
}
.renovation04{
	background:url("img/renovation/renovation04b.jpg") no-repeat center center;
}
.renovation02,
.renovation04{
	top: 0;
	right: 0;
	width: 70%;
	height: 500px;
	float: right;
	background-size: cover;
	position: relative;
}
.renovation02 div.renovation_box,
.renovation04 div.renovation_box{
	position:absolute;
	top:135px;
	right: 70%;
	width:600px;
	background:#fff;
	padding:40px;
	text-align: left;
}
.diagnosis{
	background-image: url("img/renovation/bg.jpg") ;
	width: 100%;
	background-size: cover;	
	padding: 80px 0;
}
.diagnosis_box{
	width: 1000px;
	margin: 0 auto;
}
.diagnosis_box table{
	width: 100%;
	border-collapse: collapse;
}
.diagnosis_box table th{
	width: 12.5%;
	font-weight: bold;
	background:rgba(0,0,1,0.8);
	color: #FFFFFF;
}
.diagnosis_box table td{
	width: 37.5%;
}
.diagnosis_box table th,
.diagnosis_box table td{
	text-align: left;
	padding: 15px 10px;
	vertical-align: middle;
	border: 1px solid #000000;
}
.youtube_wide {
	margin-top: 80px;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube_wide iframe {
	width: 100%;
	height: 100%;
}
.btn01 {
	display: inline-block;
	position: relative;
	padding: 0.8em 2em;
	text-align: center;
	text-decoration: none;
	color: #0094c1;
	border:1px solid #0094c1;
}
.btn01:hover {
	 background: #0094c1;
     color: #fff;
	 cursor: pointer;
	 text-decoration: none;
}
.btn02 {
	display: inline-block;
	position: relative;
	padding: 0.8em 2em;
	text-align: center;
	text-decoration: none;
	background: #000000;
	color: #fff;
}
.btn02:hover {
	 background: #0094c1;
     color: #fff;
	 cursor: pointer;
	 text-decoration: none;
}
.corporation_head_box{
	background-color: #0094c1;
	width:100%;
	padding: 40px;
	text-align: center;
	display: block;
	box-sizing: border-box;
}
.corporation_head_box p{
	text-align: left;
	display: inline-block;
	color: #FFFFFF;
}

.trettio_bg{
	background-color: #FFF5E3;
	margin-top: 80px;
	padding: 80px 0;
}
.trettio_bg table{
	width: 100%;
	margin-top: 50px;
}
.trettio_bg table td{
	width: 50%;
	text-align: left;
}
.trettio_bg table td.td01{
	padding-right: 25px;
}
.trettio_bg table td.td02{
	padding-left: 25px;
}
.trettio_bg table td.td03{
	padding-left: 25px;
	vertical-align:bottom;
}
.trettio_bg table td.td04{
	padding-right: 25px;
	vertical-align:bottom;
}
.trettio_bg table td.td05{
	padding-left: 25px;
	vertical-align: top;
}
.trettio475_left{
	width: 475px;
	margin-right: 50px;
	float: left;
}
.trettio475_right{
	width: 475px;
	float: left;
}
.trettio_blue{
	background-color: #EAF2F4;
	margin-top: 80px;
	padding: 80px 0;
}
.trettio_title{
	background-color: #5D8B9B;
	color: #FFFFFF;
	height: 50px;
	text-align: left;
	font-size: 150%;
	line-height: 1;
	margin-top: 40px;
}
.trettio_flow{
	background-color: #4D4D4D;
	color: #FFFFFF;
	height: 50px;
	width: 50px;
	display: inline-block;
	text-align: center;
	font-size: 150%;
	line-height: 1;
	padding-top: 3px;
	box-sizing: border-box;
	margin-right: 0.5em;
}
.trettio_box{
	border: 1px solid #5D8B9B;
	padding: 20px;
	text-align: left;
}

.works_navi{
	width: 740px;
	margin: 40px auto 0;
	display: flex;
	flex-wrap: wrap;
}
.works_navi_in{
	width: 220px;
	margin-right: 40px;
}
.works_navi_in:nth-of-type(3){
	margin-right: 0;
}
.works_navi_in a{
	display: block;
	position: relative;
	padding: 0.8em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #0094c1;
}
.works_navi_in a:hover {
	cursor: pointer;
	text-decoration: none;
	background:#333333;
	color: #fff;
}
.works{
	display: flex;
	flex-wrap: wrap;
}
.works_item{
    position:relative;
	width: 320px;
	margin: 60px 20px 0 0;
	overflow: hidden;
}
.works_item:nth-child(3n){
	margin: 60px 0 0 0;
}
.works_item:hover {
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
	color: #0094c1;
	cursor: pointer;
}
.works_item:hover img {
	opacity: 0.7;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=100);
}
.works_item a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.works_item img {
	width: 480px;
	height: 260px;
	object-fit: cover;
}
.work_detail{
	margin-top: 60px;
}
.work_detail p{
	text-align: left;
}
.work_detail_left{
	width: 475px;
	margin-right: 50px;
	float: left;
}
.work_detail_right{
	width: 475px;
	float: left;
}


.movie_navi{
	width: 740px;
	margin: 40px auto 0;
	display: flex;
	justify-content: space-around;
}
.movie_navi_in{
	width: 220px;
	margin-right: 40px;
}
.movie_navi_in:nth-of-type(3){
	margin-right: 0;
}
.movie_navi_in a{
	display: block;
	position: relative;
	padding: 0.8em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #0094c1;
}
.movie_navi_in a:hover {
	cursor: pointer;
	text-decoration: none;
	background:#333333;
	color: #fff;
}
.youtube_box{
	margin-top: 80px;
	display: flex;
	flex-wrap: wrap;
}
.youtube{
	width: 220px;
	margin: 40px 40px 0 0;
	text-align: center;
}
.youtube:nth-of-type(4n){
	margin-right: 0;
}
.youtube p{
	margin: 10px 0 0;
	padding: 0;
	line-height: 1.6;
}

.company_navi{
	width: 1000px;
	margin: 40px auto 0;
}
.company_navi_outline{
	width: 310px;
	margin-right: 35px;
	float: left;
}
.company_navi_outline a{
	display: block;
	position: relative;
	padding: 0.8em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #CA6855;
}
.company_navi_outline a:hover {
	cursor: pointer;
	text-decoration: none;
	background:#333333;
	color: #fff;
}

.company_navi_staff{
	width: 310px;
	margin-right: 35px;
	float: left;
}
.company_navi_staff a{
	display: block;
	position: relative;
	padding: 0.8em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #61A2BC;
}
.company_navi_staff a:hover {
	cursor: pointer;
	text-decoration: none;
	background:#333333;
	color: #fff;
}

.company_navi_recruit{
	width: 310px;
	float: left;
}
.company_navi_recruit a{
	display: block;
	position: relative;
	padding: 0.8em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: #89AF71;
}
.company_navi_recruit a:hover {
	cursor: pointer;
	text-decoration: none;
	background:#333333;
	color: #fff;
}
.aisatsu{
	width: 750px;
	float: left;
}
.president{
	margin-left: 30px;
	width: 220px;
	float:right;
}
table.company{
	border-collapse: collapse;
	margin-top: 60px;
	width: 100%;
}
table.company th,
table.company td{
	padding: 20px;
	border-bottom: 1px solid #cccccc;
	text-align: left;
}
ul.awards{
	margin-top: 60px;
}
ul.awards li{
	list-style: disc;
	border-bottom: 1px solid #cccccc;
	padding: 20px;
}

.btn_window {
	display: block;
	position: relative;
	width: 200px;
	padding: 0.8em;
	margin: 40px auto 0;
	text-align: center;
	text-decoration: none;
	color: #1B1B1B;
	background: #fff;
	border:1px solid #1B1B1B;
	z-index: 0;
}
.btn_window:hover {
	 background: #1B1B1B;
         color: #fff;
	 cursor: pointer;
	 text-decoration: none;
	z-index: 0;
}

.modal-open{
  display: inline-block;
  background-color: #666;
  color: #fff;
  margin: 10px;
}
.modal-open a{
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  color: #fff;
	z-index: 10;
}
/*** 以下モーダル用CSS ***/
.modal{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
	z-index: 11;
}
.modal:not(:target) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}
.modal:target{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s, visibility 0.5s;
}
.modal .overlay{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
  opacity: 0.7;
  top: 0;
  left: 0;
	z-index: 15;
}
.modal-wrapper{
  width: 100%;
  max-width: 900px;
  min-width: 300px;
  height: 100%;
  max-height: 600px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 20;
}
.modal-wrapper-staff{
  width: 100%;
  max-width: 900px;
  min-width: 300px;
	min-height: 300px;
  max-height: 600px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 20;
}
.modal-contents{
  overflow: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}
.modal-content{
  margin: 25px;
}
.modal-close{
  position: absolute;
  top: 5px;
  right: 10px;
  text-decoration: none;
}

.text_left_box {
	text-align: center;
	display: block;
}
.text_left_box .text_inner {
	text-align: left;
	display: inline-block;
}

/* 中央に合わせて、リサイズせずに、はみ出た分をトリミング */
.trimming{
	margin: 60px 0;
}
.trimming img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
table.recruit{
	width: 100%;
	border-collapse: collapse;
	margin-top: 40px;
}
table.recruit th,
table.recruit td{
	padding: 20px;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}

.staff,
.staff_link{
	margin-top: 150px;
	position: relative;
}
.staff a,
.staff_link a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.staff_photo{
	width: 310px;
	float: left;
	margin-right: 40px;
}
.staff_text{
	width: 650px;
	float: left;
}
.kojin_pr{
	font-family: "Sawarabi Mincho";
	font-size: 180%;
	color: #0094c1;
	line-height: 1;
	margin-bottom: 10px;
}
.name{
	font-size: 150%;
}
.staff_text table{
	width: 100%;
	border: none;
}
.staff_text table th,
.staff_text table td{
	vertical-align: top;
	padding: 5px 0 0 0;
}
.staff_text table th{
	width: 20%;
}
.staff_link:hover {
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
	color: #333333;
	cursor: pointer;
}
.staff_link:hover img {
	opacity: 0.7;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.2s ease-in;
    transition: 0.2s ease-in;
    filter: alpha(opacity=100);
}
table.zeh{
	margin:20px 0 0 0;
	border:1px solid #D7D7D7;
	border-collapse:collapse;
	width:100%;
}
table.zeh th{
	background-color:#ECECEC;
	border:1px solid #D7D7D7;
	text-align:center;
	font-weight:normal;
	padding:5px 10px;
}
table.zeh th.th01{
	width: 30%;
}
table.zeh td,
table.zeh td.td01{
	border:1px solid #D7D7D7;
	text-align:center;
	font-weight:normal;
	padding:5px 10px;
}
table.zeh td.td01{
	text-align:center;
}
table.zeh td.td02{
	width: 35%;
	text-align:center;
}
table.zeh td.td03{
	width: auto;
	text-align:center;
}

/* パッシブデザイン */
.passive_bg{
	background-image: url("img/passivedesign/bg.jpg");
	background-size: cover;
	width: 100%;
	margin-top: 80px;
	padding: 80px 0;
	color: #FFFFFF;
}
.box600{
	width: 600px;
	margin: 40px auto 0;
}
/* 家づくりの進め方 */
.flow{
	margin-top: 60px;
	border: 1px solid #CFCFCF;
	padding: 40px;
	box-sizing: border-box;
}
.flow_photo{
	width: 370px;
	float: right;
	margin-top: 40px;
}
.flow_text{
	width: 500px;
	float:left;
	margin-top: 40px;
	margin-right: 40px;
}
p.flow_title {
	font-size: 120%;
	border-bottom: solid 3px #a9d5e0;
	position: relative;
}
p.flow_title:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #0094c1;
	bottom: -3px;
	width: 20%;
}
.muryo{
	margin-top: 60px;
	border: 2px solid #c30d23;
	padding: 40px;
	color: #c30d23;
	text-align: center;
}
.arrow{
	width: 100px;
}
table.support{
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #333333;
}
table.support th{
	background-color: #efefef;
	padding: 15px;
	text-align: left;
	border: 1px solid #333333;
	font-weight: bold;
	width: 50%;
}
table.support th.th01{
	text-align: center;
}
table.support td{
	padding: 15px;
	text-align: left;
	border: 1px solid #333333;
}
.flex_wrap_box{
	display: flex;
	flex-wrap: wrap;
}
.flex_wrap_box_in01{
	flex: 1;
	text-align: center;
}
.flex_wrap_box_in02{
	flex: 1;
	text-align: center;
	padding: 0 20px;
}

.quality{
	width: 480px;
	margin: 40px 40px 0 0;
}
.quality:nth-child(even){
	margin: 40px 0 0 0;
}
.kadomaru{
	border-radius: 15px;
}
.quality_icon{
	width: 80px;
	float: left;
	margin-right: 20px;
	text-align: center;
}
.quality_text{
	width: 380px;
	float: left;
}
/* 全面リフォーム */
.zenmen_box{
	margin-top: 80px;
	border-top: 1px solid #CFCFCF;
	padding-top: 60px;
}
/* 部分リフォーム */
.bubun_box{
	margin-top: 80px;
	border-top: 1px solid #CFCFCF;
	padding-top: 60px;
}

/* お家時間の楽しみかた */
.enjoy{
	margin-top: 60px;
	border: 1px solid #CFCFCF;
	padding: 40px;
	box-sizing: border-box;
}
.enjoy_photo{
	width: 370px;
	float: right;
}
.enjoy_text{
	width: 500px;
	float:left;
	margin-right: 40px;
}
p.enjoy_title {
	font-size: 120%;
	font-weight: bold;
	border-bottom: solid 3px #ffe3b6;
	position: relative;
}
p.enjoy_title:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #ffa500;
	bottom: -3px;
	width: 20%;
}
/* ヒロ建の標準仕様 */
.box600_center_border{
	margin: 60px auto 0;
	width: 600px;
	border: 1px solid #CFCFCF;
	padding: 40px;
	box-sizing: border-box;
}
/* 断熱リフォーム */
.sikaku {
	height:50px;
	width:50px;
	margin-left: auto;
	margin-right: auto;
	line-height:50px;
	text-align:center;
	background-color: #0094c1;
	color: #FFFFFF;
}
table.dannetsu01{
	margin:20px 0 0 0;
	border:1px solid #D7D7D7;
	border-collapse:collapse;
	width:100%;
	font-size: 90%;
}
table.dannetsu01 th{
	background-color:#ECECEC;
	border:1px solid #D7D7D7;
	text-align: center;
	font-weight:normal;
	padding:10px;
}
table.dannetsu01 td,
table.dannetsu01 td.td01{
	border:1px solid #D7D7D7;
	font-weight:normal;
	padding:10px;
	text-align: left;
}
table.dannetsu01 td.td01{
	background-color: antiquewhite;
	color:#c1272d;
	font-size: 120%;
}
.box900{
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}
/* プライバシーポリシー */
dl.ppbox dt{
	margin-top: 40px;
}
dl.ppbox dd{
	margin-top: 10px;
}

/* 投稿イベント */
.event_contents{
	border-top: 1px solid #CFCFCF;
	padding-top: 40px;
}
.event_photo{
	margin-bottom: 40px;
}
.event_title{
	font-size: 150%;
	color: #0094c1;
}
.event_semi_title{
	font-size: 120%;
	color: #f7b63d;
}
table.event_day{
	border: 1px solid #CFCFCF;
	border-collapse: collapse;
	margin-top: 20px;
	width: 100%;
}
table.event_day th{
	border: 1px solid #CFCFCF;
	background-color: #ededed;
	vertical-align: middle;
	text-align:center;
	padding: 10px 20px;
}
table.event_day td{
	border: 1px solid #CFCFCF;
	vertical-align: middle;
	text-align:center;
	padding: 10px 20px;
}
.event_form{
	margin-top: 40px;
	border-top: 1px solid #CFCFCF;
	padding-top: 40px;
}
.builder table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin-top: 40px;
}
.builder table th,
.builder table td{
	padding: 10px 10px;
	text-align: center;
	border: 1px solid #D8D8D8;
}
.builder tr:nth-child(odd){
	background-color: #eee;
}

/*------------------------------------
施工事例
------------------------------------*/
.example{
	width: 100%;
}
.example img{
	width: 100%;
	height: auto;
}
#mainImg{
	margin-bottom: 10px;
	height: 667px;
}
#subImg{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#subImg li{
	width: 13%;
	margin-right: 1.5%
}
#subImg li:nth-child(7n){
	margin-right: 0;
}
.example-sub{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
.example-sub-before{
	width: 11.5%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #235789;
	color: #FFFFFF;
}
.example-sub-after{
	width: 11.5%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #C1292E;
	color: #FFFFFF;
}
.example-sub-photo{
	width: 87.4%;
}
table.example-tb{
	border: 1px solid #CFCFCF;
	border-collapse: collapse;
	margin-top: 20px;
	width: 100%;
}
table.example-tb th{
	border: 1px solid #CFCFCF;
	background-color: #ededed;
	vertical-align: middle;
	text-align:center;
	padding: 10px 20px;
	width: 30%;
}
table.example-tb td{
	border: 1px solid #CFCFCF;
	vertical-align: middle;
	text-align:center;
	padding: 10px 20px;
}
.example-title-before{
	margin-top: 60px;
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	color: #235789;
	border-bottom: 1px solid #235789;
}
.example-title-after{
	margin-top: 60px;
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	color: #C1292E;
	border-bottom: 1px solid #C1292E;
}
.example-3d{
	margin-top: 20px;
	position:relative;
	width:100%;
	height:0;
	padding-top:75%;
}
.example-3d iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.example-youtube {
	margin-top: 60px;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.example-youtube iframe {
	width: 100%;
	height: 100%;
}

/*------------------------------------
決済情報
------------------------------------*/
table.financial{
	width: 100%;
	border-collapse: collapse;
}
table.financial th{
	padding: 15px 20px;
	text-align: left;
	background-color: #fafafa;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
}
table.financial td{
	padding: 15px 20px;
	text-align: left;
	border-top: 1px solid #dddddd;
	border-bottom: 1px solid #dddddd;
}
.ico-pdf{
	display:inline-block;
	width:18px;
	height:23px;
	background:no-repeat center/contain;
	font-style:normal;
	background-image:url("img/financial/pdf.png");
	margin-left: 1em;
	position:relative;
	top:5px;
}



/* GoogleMAP */
.map-embed{
	width: 100% ;
	height:400px;
}
div._embed-5625{
	padding: 0 0 56.25% ;
}
.map-embed > div{
	width: 100% ;
	height: 400px;
	margin: 0 ;
	padding: 0 ;
}
.map-embed img{
	max-width: none ;
}

/* お問い合わせ */
.contact {
	margin: 20px auto 0;
	text-align: center;
	display: block;
}
.contact .contact_txt {
	text-align: left;
	display: inline-block;
}
.form_box{
	padding: 60px;
	background-color: #FFFFFF;
}
table.form{
	margin:40px 0 0 0;
	border:none;
	width:100%;
	border-collapse: collapse;
	background-color: #FFFFFF;
}
table.form th{
	text-align:left;
	background-color: #F7F7F7;
	padding:20px;
	vertical-align: middle;
	width: 35%;
}
table.form td{
	text-align:left;
	padding:20px;
}

table.form-block{
	margin:40px 0 0 0;
	border:none;
	width:100%;
	border-collapse: collapse;
	background-color: #FFFFFF;
}
table.form-block th{
	display: block;
	text-align:left;
	background-color: #F7F7F7;
	padding:20px 20px 10px;
	vertical-align: middle;
	width: 100%;
}
table.form-block td{
	display: block;
	text-align:left;
	padding:10px 20px 20px;
	width: 100%;
	border-bottom: 1px solid #D8D8D8;
}

.formbox{
	margin-top:40px;
	text-align:center;
	padding:10px;
}

.wpcf7-text,
.wpcf7-textarea,
.wpcf7-number,
.wpcf7-select{
	border: 1px solid #ddd;
	padding:10px;
}
 
.wpcf7-text:focus,
.wpcf7-textarea:focus,
.wpcf7-number:focus,
.wpcf7-select:focus{
outline: none;
border-width: 1px;
border-style: solid;
box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
-webkit-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
-moz-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
-ms-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
-o-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
border-color: rgba(100, 200, 255, 0.75) !important;
padding:5px;
}
 
.wpcf7-form-control-wrap {
display:inline;
width: 100%;
padding-bottom: 10px;
}
 
.wpcf7-textarea,
.wpcf7-text{
width: 96%;
}
.wpcf7-text.add{
width: 30%;
}
.wpcf7-text.wpcf7-select{
	padding: 5px;
}

.wpcf_btn{
	width: 300px;
	margin: 0 auto;
}
/* — コンタクトフォーム7　送信ボタンのカスタマイズ — */
input.wpcf7-submit {
padding:1em !important;/* ボタン内の余白 */
margin:2em 0em !important;/* ボタンの上下の余白 */
background-color: #333333 !important;/* 背景の色 */
border-radius: 5px !important;/* 角を丸く*/
color: #fff !important;/* 文字の色*/
font-size: 18px !important;/* 文字の大きさ */
font-weight: bold !important;/* 文字の太さ*/
width: 100%;/* ボタンの横幅*/
transition:0.5s;/* 背景色が変わるまでの時間*/
}

input.wpcf7-submit:hover {
background-color:#c9171e !important;/* マウスを乗せたときの背景色 */
color: #fff !important;/* マウスを乗せたときの文字の色 */
}

.btn-submit {
    width: 100%;
    text-align: center;
}

.kisai{
	background-color: #c9171e;
	color: #FFFFFF;
	font-size: 90%;
	padding: 5px 10px;
	display: inline-block;
	margin-right: 1em;
}
.nini{
	background-color: #448aca;
	color: #FFFFFF;
	font-size: 90%;
	padding: 5px 10px;
	display: inline-block;
	margin-right: 1em;
}



/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1400px) {



}
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 1200px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1200px) {

.wrapper {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  clear: both;
}

/* TOP-イベント */
.event-info{
	width: 96%;
	margin-left: auto;
	margin-right: auto;
}
.event_box{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:flex-start;
}
.event_box_item{
	width: 30%;
	margin-top: 40px;
	margin-right: 5%;
	position: relative;
	z-index: 1;
}
.event_box_item:nth-child(3n){
	margin-top: 40px;
	margin-right: 0;
}



}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
.br-tab { display:none;}

.f90,
.f110,
.f120,
.f150{
	font-size:16px;
}
.f180,
.f200,
.f250{
	font-size:18px;
}

#globalnavi {
	display: none;
}
.contents{
	width: 94%;
	margin: 5% auto 0;
	text-align: left;
}
.main_contents{
	width: 94%;
	margin: 10% auto 0;
}
.main_contents_m0{
	width: 94%;
	margin-left: auto;
	margin-right: auto;
}
.breadcrumbs {
	width: 94%;
	margin:5% auto;
	text-align: left;
}
.news_title{
	width: 100%;
	float:none;
	margin-right: 0px;
	text-align:left;
}
.news_title p{
	font-size:18px;
}
.news_text{
	width: 100%;
	float:none;
}
.tab-wrap {
	margin-top: 5%;
}
.tab-label-red,
.tab-label-blue,
.tab-label-green{
    color:#000000;
    margin-right: 3%;
    padding: 2%;
    order: -1;
	width: 30.33333%;
	border: 1px solid #000000;
	box-sizing: border-box;
}
.blog_area{
	width: 100%;
	margin:10% auto 0;
	text-align: left;
	border: 1px solid #CFCFCF;
	padding: 5%;
	box-sizing: border-box;
}
.thumbnail{
	float: left;
	width: 27%;
}
.cat_text{
	float: right;
	width: 68%;
}
/* TOP-イベント */
.event-info{
	width: 94%;
	margin-left: auto;
	margin-right: auto;
}
.event_box{
	display: flex;
	flex-direction: row;
}
.event_box_item{
	width: 30%;
	margin: 5% 5% 0 0;
	position: relative;
	z-index: 1;
}
.event_box_item:nth-child(5n){
	margin: 5% 0 0 0;
}
.builder{
	overflow: auto;
	white-space: nowrap;
}
.builder table{
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin-top: 20px;
}

.builder table th,
.builder table td{
	padding: 10px 10px;
	text-align: center;
	border: 1px solid #D8D8D8;
}

.builder tr:nth-child(odd){
	background-color: #eee;
}

.works_main{
	width: 47.5%;
	float: left;
	margin-right: 5%;
}
.works_main img{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
.works_side{
	width: 47.5%;
	float: left;
}
ul.works_list li{
	width: 32%;
	margin: 0 2% 2% 0;
}
ul.works_list li img{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
ul.works_list li:nth-child(3n){
	margin: 0 0 2% 0;
}

.reno_main{
	width: 47.5%;
	float: right;
}
.reno_side{
	width: 47.5%;
	float: left;
	margin-right: 5%;
}
ul.reno_list{
	list-style:none;
	display: flex;
    flex-wrap: wrap;
}
ul.reno_list li{
	width: 32%;
	margin: 0 2% 2% 0;
}
ul.reno_list li img{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
ul.reno_list li:nth-child(3n){
	margin: 0 0 2% 0;
}
.banner475_left{
	width: 47.5%;
	margin-right: 5%;
	float: left;
}
.banner475_right{
	width: 47.5%;
	float: left;
}

ul.circle_btn{
	width: 100%;
	margin: 10% auto 0;
}
ul.circle_btn li{
	width: 33.333333%;
	float: left;
	text-align: center;
	list-style: none;
}





.foot-menu{
	width: 96%;
	margin: 60px auto 0;
	display: flex;
	justify-content: space-between;
}
.foot-menu-in{
	width: 23%;;
}

.footer-ue{
	width: 96%;
	margin: 40px auto 0;
	display: flex;
	justify-content: space-between
}
.footer-ue01{
	width: 47.5%;
}
.footer-ue02{
	width: 47.5%;
	text-align: left;
}

.foot_yakusoku{
	margin-top: 40px;
	width: 100%;
	background: url("img/yakusoku.png") no-repeat center center;
	background-size: cover;
	color: #FFFFFF;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1ch;
	padding: 20px 0px;
}
.footer-ue02 ul li{
	list-style: none;
	margin-top: 15px;
}

.footer{
	width: 100%;
	margin-top: 80px;
	background-color: #595757;
	padding: 40px 0 0;	
}
.footer-in{
	width: 96%;
	margin: 0 auto;
	padding: 20px 0;	
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.footer-navi{
	width: 47.5%;
	margin-right: 5%;
}
.footer-navi:nth-child(2n){
	margin-right: 0%;
}
.footer-navi:last-child{
	margin-right: 0%;
}
.footer-navi ul li{
	list-style: none;
	margin-top: 10px;
	text-align: left;
}
.footer-navi ul li a:link,
.footer-navi ul li a:active,
.footer-navi ul li a:visited {
	color:#ffffff;
	text-decoration:none;
}
.footer-navi ul li a:hover,
.footer-navi ul li a:focus {
	color:#ffffff;
	text-decoration:underline;
}

	

.foot_btn{
	width: 94%;
	margin: 10% auto 0;
	display: flex;
	flex-wrap: wrap;
}
.foot_btn_item{
	width: 47.5%;
	margin: 5% 5% 0 0;
}
.foot_btn_item:nth-child(2n){
	margin: 5% 0 0 0;
}

#foot{
	margin-top: 10%;
}
.foot_company01{
	width: 50%;
	height: 400px;
}
.foot_company02{
	width: 50%;
	float: right;
}
.foot_company02_in{
	width: 100%;
	margin-left: 30px;
	text-align: left;
}
.foot_company02_btn {
	position: relative;
	background-color: #0094c1;
	color: #FFFFFF;
	margin-top: 20px;
	width: 100%;
	height: 65px;
	z-index: 1;
}
.foot_company02_btn a{
	color: #FFFFFF;
}
.foot_company02_btn .box_imageLeft {
	position: absolute;
	left: 0;
}
.foot_company02_btn p.p01{
	position: absolute;
	top: 5px;
	left: 90px;
	font-weight: bold;
	font-size: 110%;
}
.foot_company02_btn p.p02{
	position: absolute;
	top: 35px;
	left: 90px;
	font-size: 90%;
}

#mainImg{
	margin-bottom: 10px;
	height: 500px;
}




}

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-4 ( 645px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
body {
	font-size:15px;
	background-color: #FFFFFF;
	box-sizing: border-box;
}
.hidden-phone {
	display: none !important;
}
.mt120 {margin-top:15%;}
.mt100 {margin-top:15%;}
.mt80 {margin-top:10%;}
.mt60 {margin-top:5%;}
.mt50 {margin-top:5%;}
.mt40 {margin-top:5%;}
.mt20 {margin-top:2%;}
.mb50 {margin-bottom:5%;}
.mb10 {margin-bottom:2%;}
.banner-top {margin-top:10%;}

.f90,
.f110,
.f120,
.f150{
	font-size:16px;
}
.f180,
.f200,
.f250{
	font-size:18px;
}
.pc_center{text-align:left !important;}
/* 改行 */
.br-sm { display:none;}
.br-pc { display: inherit;}
.gnav{
	display: none;
}
.midashi{
	font-size: 24px;
	text-align: left;
}
.midashi2{
	font-size: 18px;
	text-align: left;
}
.midashi3{
	font-size: 18px;
	text-align: left;
}
/* TOP-イベント */
.event_box{
	display:block;
	width: 90%;
	margin: 0 auto;
}
.event_box_item{
	width: 100%;
	margin: 15% 0 5% 0;
	position: relative;
	z-index: 1;
}
.event_box_item:nth-child(n + 4){
	display: none;
}
.under_head,
.under_renovation01{
	width: 100%;
	height: 600px;
}
.page_name{
	background:rgba(255,255,255,0.8);
	width: 80%;
	padding: 5%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.page_name h2{
	font-size:24px;
	font-weight: bold;
	line-height: 1.2;
	margin-top: 5%;
}
.page_name h3{
	font-size:18px;
	font-weight: bold;
}

dl.news_event{
	margin-top: 0px;
}
dl.news_event dt{
	float:none;
	padding: 15px 0 0;
}
dl.news_event dd{
	margin-left: 0;
	padding: 0 0 15px;
}
.wrapper {
  width: 96%;
  margin: 0 auto;
}
#conceptarea {
  margin-bottom: 10%;
	box-sizing: border-box;
}
#conceptarea .bg {
  position:static;
}
#conceptarea .bg::before {
  position:static;
  width: 100%;
  height:auto;
  background:none;
}
#conceptarea h2.title {
	position:static;
	color: #333333;
	font-size: 18px;
	font-weight: bold;
	padding-top: 0px;
	padding-left: 3%;
	text-align: left;
}
#conceptarea h2.title::before {
position:static;
}
#conceptarea .inner {
  padding-top: 5%;
}
#conceptarea .inner figure {
	position:static;
	width: 100%;
}
#conceptarea .inner figure a {
  display: block;
  overflow: hidden;
}
#conceptarea .inner .textarea {
  margin-top: 5%;
	padding: 0 3%;
}
#conceptarea .inner .textarea .lead {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5%;
  line-height: 1.5;
}
#conceptarea .inner .textarea .text {
  margin-bottom: 5%;
}

/*------------------------------------
リノベーション
------------------------------------*/
#renovation {
  margin-bottom: 10%;
	box-sizing: border-box;
}
#renovation .bg {
  position:static;
}
#renovation .bg::before {
  position:static;
  width: 100%;
  height:auto;
  background:none;
}
#renovation h2.title {
	position:static;
	color: #333333;
	font-size: 18px;
	font-weight: bold;
	padding-top: 0px;
	padding-left: 3%;
	text-align: left;
}
#renovation h2.title::before {
position:static;
}
#renovation .inner {
  padding-top: 5%;
}
#renovation .inner figure {
	position:static;
	width: 100%;
}
#renovation .inner figure a {
  display: block;
  overflow: hidden;
}
#renovation .inner .textarea {
	margin-top: 5%;
	width: 100%;
	padding: 0 3%;
	box-sizing: border-box;
}
#renovation .inner .textarea .lead {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5%;
  line-height: 1.5;
}
#renovation .inner .textarea .text {
  margin-bottom: 5%;
}

/*------------------------------------
法人向け
------------------------------------*/
#hojinarea {
  margin-bottom: 10%;
	box-sizing: border-box;
}
#hojinarea .bg {
  position:static;
}
#hojinarea .bg::before {
  position:static;
  width: 100%;
  height:auto;
  background:none;
}
#hojinarea h2.title {
	position:static;
	color: #333333;
	font-size: 18px;
	font-weight: bold;
	padding-top: 0px;
	padding-left: 3%;
	text-align: left;
}
#hojinarea h2.title::before {
position:static;
}
#hojinarea .inner {
  padding-top: 5%;
}
#hojinarea .inner figure {
	position:static;
	width: 100%;
}
#hojinarea .inner figure a {
  display: block;
  overflow: hidden;
}
#hojinarea .inner .textarea {
  margin-top: 5%;
	padding: 0 3%;
}
#hojinarea .inner .textarea .lead {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5%;
  line-height: 1.5;
}
#hojinarea .inner .textarea .text {
  margin-bottom: 5%;
}

/*------------------------------------
無料相談会
------------------------------------*/
#consultation {
  margin-bottom: 10%;
	box-sizing: border-box;
}
#consultation .bg {
  position:static;
}
#consultation .bg::before {
  position:static;
  width: 100%;
  height:auto;
  background:none;
}
#consultation h2.title {
	position:static;
	color: #333333;
	font-size: 18px;
	font-weight: bold;
	padding-top: 0px;
	padding-left: 3%;
	text-align: left;
}
#consultation h2.title::before {
position:static;
}
#consultation .inner {
  padding-top: 5%;
}
#consultation .inner figure {
	position:static;
	width: 100%;
}
#consultation .inner figure a {
  display: block;
  overflow: hidden;
}
#consultation .inner .textarea {
	width: 100%;
	margin-top: 5%;
	padding: 0 3%;
}
#consultation .inner .textarea .lead {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5%;
  line-height: 1.5;
}
#consultation .inner .textarea .text {
  margin-bottom: 5%;
}

.works_main{
	width: 100%;
	float:none;
	margin-right: 0px;
}
.works_main img {
  width: 100%;
  height: 100%;
}
.works_side{
	margin-top: 5%;
	width: 100%;
	float:none;
}
ul.works_list{
	list-style:none;
	display: flex;
    flex-wrap: wrap;
}
ul.works_list li{
	width: 47.5%;
	margin: 0 5% 5% 0;
}
ul.works_list li img{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
ul.works_list li:nth-child(2n){
	margin: 0 0 5% 0;
}:nth-child(2)
ul.works_list li:nth-child(3),
ul.works_list li:nth-child(9){
	margin: 0 5% 5% 0;
}

.reno_main{
	width: 100%;
	float:none;
}
.reno_side{
	margin-top: 5%;
	width: 100%;
	float:none;
	margin-right: 0px;
}
ul.reno_list{
	list-style:none;
	display: flex;
    flex-wrap: wrap;
}
ul.reno_list li{
	width: 47.5%;
	margin: 0 5% 5% 0;
}
ul.reno_list li img{
	width: 100%;
	height: 100%;
	object-fit: cover;	
}
ul.reno_list li:nth-child(2n){
	margin: 0 0 5% 0;
}
ul.reno_list li:nth-child(3),
ul.reno_list li:nth-child(9){
	margin: 0 5% 5% 0;
}
.banner475_left{
	width: 47.5%;
	margin-right: 5%;
	float: left;
}
.banner475_right{
	width: 47.5%;
	float: left;
}
ul.circle_btn{
	width: 94%;
	margin: 10% auto 0;
}
ul.circle_btn li{
	width: 30.333333%;
	margin-right: 4.5%;
	float: left;
	text-align: center;
	list-style: none;
}
ul.circle_btn li:nth-child(3){
	margin-right: 0%;
}


/* ------------------------------
 footer
------------------------------ */

.footer-ue{
	width: 94%;
	margin: 40px auto 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.footer-ue01{
	width: 100%;
}
.footer-ue02{
	margin-top: 20px;
	width: 100%;
	text-align: left;
}

.footer{
	width: 100%;
	margin-top: 80px;
	background-color: #595757;
	padding: 40px 0 0;	
}
.footer-in{
	width: 94%;
	margin: 0 auto;
	padding: 20px 0;	
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


.foot_btn{
	width: 94%;
	margin: 10% auto 0;
	display: flex;
	flex-wrap: wrap;
}
.foot_btn_item{
	width: 100%;
	margin: 0 0 5% 0;
}
.foot_btn_item:nth-child(2n){
	margin: 0 0 5% 0;
}
#foot{
	margin-top: 10%;
}
.foot_company01{
	width: 100%;
	height:auto;
	padding: 10% 0;
	background: url("img/foot_bg.jpg") no-repeat center center;
	background-size: cover;
	float:none;
}
.foot_company02{
	width: 94%;
	margin: 0 auto;
	float:none;
}
.foot_company02_in{
	width: 100%;
	margin-left: 0;
	text-align: left;
}
.foot_company02_btn {
	position: relative;
	background-color: #0094c1;
	color: #FFFFFF;
	margin-top: 20px;
	width: 100%;
	height: 65px;
	z-index: 1;
}
.foot_company02_btn a{
	color: #FFFFFF;
}
.foot_company02_btn .box_imageLeft {
	position: absolute;
	left: 0;
}
.foot_company02_btn p.p01{
	position: absolute;
	top: 18px;
	left: 90px;
	font-weight:normal;
	font-size: 16px;
}
.foot_company02_btn p.p02{
	display: none;
}
.overlink{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2;
}
.foot_logo{
	width: 50%;
	margin: 5% auto 0;
}
.foot_company {
	margin: 5% 0 0;
	text-align: center;
	display: block;
}
.foot_company ul {
	padding-left: 0;
	list-style: none;
	display: inline-block;
}
.foot_company ul li {
	text-align: left;
	margin: 5% 0 0 0  ;
	float:none;
}
#copy{
	background-color: #3E3A39;
	margin-top: 10%;
	padding: 10px 0;
	text-align: center;
	color:#ffffff;
	font-size: 14px;
}

/* 会社案内 */
.company_navi{
	width: 100%;
	margin: 5% auto 0;
}
.company_navi_outline{
	width: 30.333333%;
	margin-right: 4.5%;
	float: left;
}
.company_navi_outline a{
	padding: 0.8em 0.2em;
	font-size: 14px;
}
.company_navi_staff{
	width: 30.333333%;
	margin-right: 4.5%;
	float: left;
}
.company_navi_staff a{
	padding: 0.8em 0.2em;
	font-size: 14px;
}
.company_navi_recruit{
	width: 30.333333%;
	float: left;
}
.company_navi_recruit a{
	padding: 0.8em 0.2em;
	font-size: 14px;
}
.aisatsu{
	width: 100%;
	float:none;
}
.president{
	width: 75%;
	margin: 5% auto;
	float:none;
}
table.company{
	border-collapse: collapse;
	margin-top: 10%;
	width: 100%;
}
table.company th,
table.company td{
	width: 90%;
	display: block;
	padding: 5%;
	border-bottom: 1px solid #cccccc;
	text-align: left;
}
table.company th{
	background-color: #696969;
	color: #FFFFFF;
}
ul.awards{
	margin-top: 2%;
}
ul.awards li{
	border-bottom: 1px solid #cccccc;
	padding: 5%;
}
/* スタッフ紹介 */
.staff,
.staff_link{
	margin-top: 10%;
	position: relative;
}
.staff_link{
	margin-top: 10%;
	border-top: 1px solid #CFCFCF;
	padding-top: 10%;
}
.staff a,
.staff_link a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.staff_photo{
	width: 100%;
	float:none;
	margin-right: 0;
	margin-bottom: 5%;
	text-align: center;
}
.staff_text{
	width: 100%;
	float:none;
}
.kojin_pr{
	font-size: 18px;
	margin-bottom: 5%;
}
.name{
	font-size: 16px;
}
.staff_text table{
	width: 100%;
	border: none;
}
.staff_text table th,
.staff_text table td{
	width: 100%;
	display: block;
	vertical-align: top;
	padding: 5px 0 0 0;
}
.staff_text table th{
	width: 100%;
	font-weight: bold;
}
/* 採用情報 */
table.recruit{
	width: 100%;
	border-collapse: collapse;
	margin-top: 5%;
}
table.recruit th,
table.recruit td{
	width: 90%;
	display: block;
	padding: 5%;
	border-top: 1px solid #dcdcdc;
	border-bottom: 1px solid #dcdcdc;
}
table.recruit th{
	background-color: #696969;
	color: #FFFFFF;
}
.form_box{
	padding: 5%;
	background-color: #FFFFFF;
}
/* 家づくりへの想い */
.concept_navi{
	margin-top: 5%;
	display: flex;
	flex-wrap: wrap;
}
.concept_navi_in{
	margin-top: 5%;
	width: 47.5%;
	margin-right: 5%;
}
.concept_navi_in:nth-of-type(2),
.concept_navi_in:nth-of-type(4){
	margin-right: 0;
}
.concept_navi_in a{
	padding: 0.8em 0.2em;
}
.concept01 {
	background: none;
}
.concept03 {
	background: none;
}
.concept01,
.concept03{
	top: 0;
	left: 0;
	width: 100%;
	height:auto;
	background-size: cover;
	position:static;
}
.concept01 div.concept_box,
.concept03 div.concept_box{
	position:static;
	top:0;
	left:0;
	width: 94%;
	background:#fff;
	padding:3%;
	text-align: left;
}
.concept02{
	background: none;
}
.concept04{
	background: none;
}
.concept02,
.concept04{
	top: 0;
	left: 0;
	width: 100%;
	height:auto;
	background-size: cover;
	position:static;
}
.concept02 div.concept_box,
.concept04 div.concept_box{
	position:static;
	top:0;
	left:0;
	width: 94%;
	background:#fff;
	padding:3%;
	text-align: left;
}
.btn_more {
	margin: 5% auto 0;
}
/* ヒロ建の標準仕様 */
.box600_center_border{
	margin: 10% auto 0;
	width: 94%;
	border: 1px solid #CFCFCF;
	padding: 3%;
	box-sizing: border-box;
}

/*** 以下モーダル用CSS ***/
.modal{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
	z-index: 88888;
}
.modal-wrapper,
.modal-wrapper-staff{
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 70%;
  max-height: 70%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	z-index: 20;
}
/* パッシブデザイン */
.passive_bg{
	margin-top: 10%;
	padding: 10% 0;
	text-align: left;
}
.box600{
	width: 100%;
	margin: 5% auto 0;
}
/* 家づくりの進め方 */
.flow{
	margin-top: 10%;
	padding: 5%;
}
.flow_photo{
	width: 100%;
	float:none;
	margin-top: 5%;
}
.flow_text{
	width: 100%;
	float:none;
	margin-top: 5%;
	margin-right: 0;
}
p.flow_title {
	font-size: 18px;
}
.arrow{
	width: 25%;
}
.muryo{
	margin-top: 10%;
	padding: 5%;
}
/* リノベーション */
.renovation01 {
	background: none;
}
.renovation03 {
	background: none;
}
.renovation01,
.renovation03{
	top: 0;
	left: 0;
	width: 100%;
	height:auto;
	background-size: cover;
	position:static;
}
.renovation01 div.renovation_box,
.renovation03 div.renovation_box{
	position:static;
	top:0;
	left:0;
	width: 94%;
	background:#fff;
	padding:3%;
	text-align: left;
}
.renovation02{
	background: none;
}
.renovation04{
	background: none;
}
.renovation02,
.renovation04{
	top: 0;
	left: 0;
	width: 100%;
	height:auto;
	background-size: cover;
	position:static;
}
.renovation02 div.renovation_box,
.renovation04 div.renovation_box{
	position:static;
	top:0;
	left:0;
	width: 94%;
	background:#fff;
	padding:3%;
	text-align: left;
}
.diagnosis{
	background-image: url("img/renovation/bg.jpg") ;
	width: 94%;
	background-size: cover;	
	padding: 10% 3%;
}
.diagnosis_box{
	width: 100%;
	margin: 0 auto;
}
.diagnosis_box table{
	width: 100%;
	border-collapse: collapse;
}
.diagnosis_box table th{
	width: 90%;
	display: block;
}
.diagnosis_box table td{
	width: 90%;
	display: block;
}
.diagnosis_box table th,
.diagnosis_box table td{
	text-align: left;
	padding: 5%;
}

/* 施工事例 */
.works_navi{
	width: 100%;
	margin: 5% auto 0;
	display: flex;
	flex-wrap: wrap;
}
.works_navi_in{
	width: 30.333333%;
	margin-right: 4.5%;
}
.works_navi_in:nth-of-type(3){
	margin-right: 0;
}
.works{
	display: flex;
	flex-wrap: wrap;
}
.works_item{
    position:relative;
	width: 47.5%;
	margin: 5% 5% 0 0;
	overflow: hidden;
}
.works_item:nth-child(3n){
	margin: 5% 5% 0 0;
}
.works_item:nth-child(2n){
	margin: 5% 0 0 0;
}
.works_item img {
	width: 480px;
	height: 150px;
	object-fit: cover;
}

.work_detail{
	margin-top: 10%;
}
.work_detail p{
	text-align: left;
}
.work_detail_left{
	width: 47.5%;
	margin-right: 5%;
	float: left;
}
.work_detail_right{
	width: 47.5%;
	float: left;
}

/* 法人向けサービス */
.corporation_head_box{
	width:100%;
	padding: 5%;
}
/* トレッティオ */
.trettio_bg{
	margin-top: 10%;
	padding: 10% 0;
}
.trettio_bg table{
	width: 94%;
	margin: 0 3% ;
}
.trettio_bg table td{
	width: 100%;
	display: block;
	text-align: left;
	padding-bottom: 5%;
}
.trettio_bg table td.td01{
	padding-right: 0px;
}
.trettio_bg table td.td02{
	padding-left: 0px;
}
.trettio_bg table td.td03{
	padding-left: 0px;
	vertical-align:middle;
}
.trettio_bg table td.td04{
	padding-left: 0px;
	vertical-align:middle;
}
.trettio_bg table td.td05{
	padding-left: 0px;
	vertical-align:middle;
}
.trettio475_left{
	width: 47.5%;
	margin-right: 5%;
	float: left;
}
.trettio475_right{
	width: 47.5%;
	float: left;
}
.trettio_blue{
	background-color: #EAF2F4;
	margin-top: 10%;
	padding: 10% 0;
}
.trettio_title{
	height: 5%;
	font-size: 18PX;
	margin-top: 5%;
}
.trettio_flow{
	background-color: #4D4D4D;
	color: #FFFFFF;
	height: 50px;
	width: 50px;
	display: inline-block;
	text-align: center;
	font-size: 18PX;
	line-height: 1;
	padding-top: 15px;
	box-sizing: border-box;
	margin-right: 0.5em;
}
.trettio_box{
	border: 1px solid #5D8B9B;
	padding: 5%;
	text-align: left;
}
.trettio_box img.flleft{
    display: block;
    line-height: normal;
    float:none;
	margin:0 0 0 0;
}
.trettio_box P{
	margin-top: 5%;
}

/* 性能向上 */
.quality{
	width: 100%;
	margin: 5% 0 0 0;
}
.quality:nth-child(even){
	margin: 5% 0 0 0;
}
.kadomaru{
	border-radius: 15px;
}
.quality_icon{
	width: 100%;
	float:none;
	margin-right: 0;
	margin-bottom: 5%;
	text-align: center;
}
.quality_icon img{
	width: 25%;
}
.quality_text{
	width: 100%;
	float:none;
}
.box900{
	width: 100%;
}
/* リフォーム */
.flex_wrap_box_in02{
	flex:none;
	width: 100%;
	text-align: center;
	padding: 0;
}
.flex_wrap_box_in02:nth-child(2){
	margin-top: 5%
}
.flex_wrap_box_in02 p{
	text-align: left;
}
/* 動画 */
.movie_navi{
	width: 100%;
	margin: 5% auto 0;
	display: flex;
	flex-flow: column;
}
.movie_navi_in{
	width: 75%;
	margin: 0 auto 5%;
}
.movie_navi_in:nth-of-type(3){
	margin: 0 auto 5%;
}
.youtube_box{
	margin-top: 10%;
	display: flex;
	flex-wrap: wrap;
}
.youtube{
	width: 47.5%;
	margin: 5% 5% 0 0;
	text-align: center;
	overflow: hidden;
}
.youtube:nth-of-type(2n){
	margin-right: 0;
}
.youtube p{
	margin: 5% 0 0;
	padding: 0;
	line-height: 1.6;
}
/* 投稿 */
.blog_area{
	width: 94%;
	margin:10% auto 0;
	text-align: left;
	border-top: 1px solid #CFCFCF;
	border-bottom: 1px solid #CFCFCF;
	border-left: none;
	border-right: none;
	padding: 5%;
	box-sizing: border-box;
}
.thumbnail{
	float:none;
	width: 80%;
	margin:0 auto;
}
.cat_text{
	float:none;
	width: 100%;
	margin:5% 0 0;
}

.table-scroll{
  overflow: auto;
  white-space: nowrap;
}
.table-scroll::-webkit-scrollbar{
	height:5px;
}
.table-scroll::-webkit-scrollbar-track{
	background: #333;
}
.table-scroll::-webkit-scrollbar-thumb {
	background: #999;
}
table.event_day{
    -webkit-text-size-adjust: 100%;
}

/* お問い合わせ */

.contact {
	margin: 5% auto 0;
}

table.form{
	margin:10% 0 0 0;
	border:none;
	width:100%;
	border-top:none;
	border-collapse: collapse;
}
table.form th{
	width: 94%;
	display: block;
	text-align:left;
	font-weight: bold;
	padding:5% 3% 5%;
	border-top: 1px solid #B4B4B5;
    border-bottom:none;
	vertical-align: middle;
}
table.form td{
	width: 94%;
	display: block;
	text-align:left;
	padding:5% 3% 5%;
    border-bottom:none;
}

table.form-block{
	margin:10% 0 0 0;
	border:none;
	width:100%;
	border-top:none;
	border-collapse: collapse;
}
table.form-block th{
	width: 94%;
	display: block;
	text-align:left;
	font-weight: bold;
	padding:5% 3% 5%;
	border-top: 1px solid #B4B4B5;
    border-bottom:none;
	vertical-align: middle;
}
table.form-block td{
	width: 94%;
	display: block;
	text-align:left;
	padding:5% 3% 5%;
    border-bottom:none;
}

.formbox{
	margin-top:40px;
	text-align:center;
	padding:10px;
	border: 1px solid #ddd;
}

}

.work_detail .wp-block-image {
	margin-bottom:2em;
}
.work_detail .wp-block-gallery .blocks-gallery-item {
	width: calc(50% - 3em);
    margin: 0 3em 2em 0;
}