@charset "utf-8";

/*---------------------------------------------
	body
  ---------------------------------------------*/
html { scroll-behavior: smooth; }
html {font-size: 62.5%;} /* 10px */
body { font-size: 1.8rem; } /* 16px */
p    {font-size: 1.8rem;} /* 16px */

body {/* font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif; *//* font-family: "Mplus 1p"; */color: #525261;line-height: 1.8;text-align: left;-webkit-text-size-adjust: 100%;}
img { width: 100%; height: auto; }

/*---------------------------------------------
 **  フォント
--------------------------------z-------------*/
.mincho{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Georgia, serif;}

/*---------------------------------------------
 **  メイン画像
---------------------------------------------*/
.top_only { display: none; }
#top .top_only { display: block; }

.inner_only { display: block}
#top .inner_only { display: none; }

/* 中イメージ */
.inner_main_img {width: 100%;background: #FBFBFB;z-index:-2;margin-bottom: 5rem;}
.main_img_inner { width: 1200px; height: 400px; margin: 0 auto; }

/*---------------------------------------------
	Anchor
  ---------------------------------------------*/

a {	outline: none; }
a:link {text-decoration: none;color: #5673BE; text-decoration: underline;}
a:visited {text-decoration: none;color: #5673BE;}
a:hover {	color: #9BACD9; text-decoration: none;}
a:active {	text-decoration: none;	color: #5673BE;}
a { -webkit-transition: all 0.3s;  transition: all 0.3s; }

/*---------------------------------------------
 ** common div
---------------------------------------------*/
#content	{ width:100%; clear:both;}

/*---------------------------------------------
 ** width
---------------------------------------------*/
.w_200{width:200px;}
.w_250{width:250px;}
.w_270{width:270px;}
.w_280{width:280px;}
.w_300{width:300px;}
.w_400{width:400px;}
.w_420{width:420px;}
.w_440{width:440px;}
.w_880{width:880px;}
.w_1040{width:980px;}

/*---------------------------------------------
	title
---------------------------------------------*/
.h2_red { color: #E40011; font-size: 3.8rem; display: inline; font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; margin-bottom: 1.8rem;  }


/*---------------------------------------------
	p
---------------------------------------------*/
p {margin-bottom: 1em; }
p:last-of-type {margin-bottom: 0; }

/*---------------------------------------------
 ** margin
---------------------------------------------*/
/* インナーカラムのマージン　オフ */
.inner_clounm{margin-bottom:0!important;}

/*---------------------------------------------
 ** float
---------------------------------------------*/
.float_L{ float:left;}
.float_R{ float:right;}

.img_R{ float:right; margin:0 0 0 30px;}
.img_L{ float: left; margin:0 30px 0 0 ;}
.img_C{ float: left; margin:0  0 20px 0 ;}

/*---------------------------------------------
 **  色関係
---------------------------------------------*/
.bdc_blue {border-color: #4E8BC1 !important;}

/*---------------------------------------------
 ** ON OFF hover
---------------------------------------------*/
.hover {-webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
.hover:hover{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; }

/*---------------------------------------------
 **  画像角丸
---------------------------------------------*/
/* img{-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;} */

/*---------------------------------------------
 **  ページトップ
---------------------------------------------*/
#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
    z-index: 999;
}

#pageTop a {
  display: block;
  padding: 5px 3px 0px 3px;
  border-radius: 30px;
  width: 56px;
  height: 67px;
  background-color: #02529C;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  background: url(../img/common/page_top.png) no-repeat;
  background-size:100%;
  -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}

/*---------------------------------------------
 **  テキストあらいん
---------------------------------------------*/
.ter{ text-align:right;}

/*---------------------------------------------
 **   text-align
---------------------------------------------*/
.tac{ text-align: center;}

/*---------------------------------------------
 **  position
---------------------------------------------*/
.por{position: relative;}


/*---------------------------------------------
 ** パンくずリスト
---------------------------------------------*/
nav#breadcrumbs ol{ padding:0;}

nav#breadcrumbs ol li {
  display: inline;
  list-style-type: none;
  font-size:80%;
}
nav#breadcrumbs ol li:before {
  content: " > ";
}
nav#breadcrumbs ol li:first-child:before {
  content:"";
}


.db{ display: block !important; }
.mt30{margin-top: 20px !important;}

/*=================================================================================================================================*/
/** 個別指定 for スマートフォン
/*=================================================================================================================================*/
@media screen and (max-width: 320px) {
}

@media screen and (max-width: 740px) {
body{color:#444;}

/* fook */
.only_sp_none {display:none!important; }
.sp_br{display: inline;}

/*画像*/
img{max-width:100%; height:auto;}

/*---------------------------------------------
 ** box ブロック SP
---------------------------------------------*/

/* スマホ　ページTOP */
#pageTop a {
  width: 47px;
  height: 60px;
  background-size:100%;
}

}

/*=================================================================================================================================*/
/** 個別指定 for タブレット
/*=================================================================================================================================*/
 @media screen and (min-width: 741px) and (max-width: 1279px) {

 /* fook */
.only_tab_none {display:none!important; }

/*---------------------------------------------
 ** box ブロック TAB
---------------------------------------------*/
/* コンテンツ全体 */

}

/*=================================================================================================================================*/
/**  個別指定 for PC	*/
/*=================================================================================================================================*/
@media screen and (min-width: 1280px) {

/* fook */
.only_pc_none {display:none!important; }
.sp_br{display: none;}
body {  font-family: sans-serif !important; }

/*---------------------------------------------
 **  PC専用 width
---------------------------------------------*/
.w450{width: 450px !important;}
.w690{width: 690px !important;}

}

.c_white{ color: #FFF;}


/*=================================================================================================================================*/
/**  共通部分	*/
/*=================================================================================================================================*/

/* h2 */
h2 {font-size: 3.4rem;line-height: 1.5;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Georgia, serif;margin-bottom:1.8rem;}
h2 span{font-size: 1.2rem;color:#8DA0D3;font-weight:bold;display:block;font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif; }
h2 span.ftc_blue{ color:#00B2B2}
/* コンテンツ全体 */
#content{ width:100%;}
#main{width: 100%;margin: 0 auto;padding: inherit;}

.sankaku_bottom:after{width: 3px;height: 18px;position: absolute;bottom: -36px;right: 0;left: 0;margin:  0 auto;content: '';/* width: 0; *//* height: 0; */border-style: solid;border-width: 18px 17.5px 0 17.5px;border-color: #5673be transparent transparent transparent;}
#about h2{margin-bottom: 26px;}


/*---------------------------------------------
 ** ヘッダー記述
---------------------------------------------*/
#header{width: 100%; }

.header_wrapper {  border-bottom:1px solid #EEEEEE; }
.header_inner {width: calc((100% - 0px));margin:0 auto;padding: 0 ;}

/* ロゴ */
#logo {width: 187px;height:183px;float:left;}
#logo a{
	width: 100%;
	height: 100%;
	display: block;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	background: url(../img/common/logo.png) no-repeat;
	background-size: 100%;
	z-index: 10;
	position: relative;
}

/* メインイメージ */
#top .main_img {width:100%;position:relative;background: url( ../img/main_img/top_main.jpg) top center no-repeat;}
.main_img {background: url( ../img/main_img/img_common_bg.jpg) top center no-repeat;}

/*---------------------------------------------
 ** フッター記述
---------------------------------------------*/
#footer{
	clear:both;
    position: relative;
}

/* footerロゴ */
#footer #logo { margin:0 auto 0px; position:relative; top:0;}

.footer_wrapper{
	padding: 0 0 0px;
	padding: 60px 0 47px 0;
	border-bottom:5px solid #535362;
}

/* フッターインナー */
.footer_inner{width: 100%;margin: 0 auto;position:relative;padding: 0 0 0 0;}

.footer_inner_L {width: 35%;float: left;padding: 0 1% 0 0;}
.footer_inner_L .bt_01 { width:410px; margin:25px auto 0; padding:20px 0 !important; }

.footer_inner_R {padding: 0 0 0 0;position:relative; border-top:1px dashed #518EC5; border-bottom:1px dashed #518EC5;}


/* コピーライト */
#copyright	{font-size: 0.8em;width: 100%;height:19px;text-align:center;letter-spacing: 3px;padding: 0px 0 18px;}


/*---------------------------------------------
 ** TOPコンテンツ
---------------------------------------------*/
/* TOP */



/* お知らせ */
.news   {width:100%;margin: 0 auto;border-bottom:1px solid #E40011;padding: 15px 50px 13px;}
.news:nth-of-type(1) {border-top:1px solid #E40011;margin-top: 34px;}
.news dt { float:left; margin:0 40px 0 0;}


/* グレー部分 */
.service_menu {background: #535362;color: #FFF;margin: -60px  auto 0 !important;}

.service_menu_list {padding:33px 0;  }
.service_menu_list li { width: calc((263px - 0px )/2); float:left; border-right:1px dashed #A9A9B1; padding:0 30px;  }
.service_menu_list li:last-of-type{ border:none;}
.service_menu_list img { width: 100%; -moz-border-radius:0px; -webkit-border-radius:0px; border-radius:0px; }


.bg_blue { background: #5673BE;}





/* 施工事例*/
.top_work_list dl {margin-bottom: 15px;position: relative;}
.top_work_list dl:last-of-type {margin-bottom: 0;}
.top_work_list dl dd {padding: 15px 15px 0;text-align: center;}
.top_work_list dl dd a {  color: #525260;}


/*---------------------------------------------
 **  見出し色
---------------------------------------------*/
.h2_cblue{ color:#4C8BBF;}
.top_worl_label { position: absolute; top: 0; left: 0; font-size: 16px; color: #FFF; padding: 5px 10px; text-align: center; font-weight: bold; }
.c_lblue { background-color: #00D9D9;}
.c_orabge { background-color: #FF9326;}
.c_gray { background-color: #535362;}
.c_lgreen { background-color: #A3D900;}


/* 会社概要 */
.top_about_bg { width: 100%; background: url(../img/top/bg_about_01.jpg) 0 0 no-repeat;}


.top_about_item div{ padding: 30px 5%;}


.news_container{ background: #F1F5F8; padding:15px 0 28px; }

.news_item dl{  margin-bottom:10px; font-size:16px;}
.news_item dl dt{  background: #535362;  margin-right:1em; color: #FFF; text-align: center; -moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; display:inline-block;  }



/*---------------------------------------------
 **  内部
---------------------------------------------*/
.main_h1{ font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Georgia, serif;
text-align:center;font-size:36px;margin: 0px auto 0;color:#535362;line-height:1.5;padding:120px 0 0 0;display: inline-block;}
.main_h1 span {font-family:'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', YuGothic, 'メイリオ', Meiryo, sans-serif !important;
 display:block; font-size:12px;  color:#4D8BC0; letter-spacing:4px;  position:relative;}
#top .main_h1 span{ display:none;}
.main_h1:after{width: 296px;height: 65px;background: url( ../img/main_img/img_common_itme.png) no-repeat;content: '';position:absolute;bottom: -26px;right: 0px;left:0;margin:0 auto;}
#top .main_h1:after{ display:none; }


/*---------------------------------------------
 **  会社概要ページ
---------------------------------------------*/
/* 会社概要 */
.about_item_bg { width: 100%; background: url(../img/about/img_about_bg_01.jpg) 0 0 no-repeat;}

.about_item{padding: 50px 5%;}

.about_h2_numver_01,
.about_h2_numver_02,
.about_h2_numver_03{line-height: 1.3;}

.about_h2_numver_01:before,
.about_h2_numver_02:before,
.about_h2_numver_03:before{width: 103px;height: 77px;top: 0px;left: 0px;content: '';display: block;float:  left; margin:0 28px 0 0;}

.about_h2_numver_01:before{background: url(../img/about/about_h2_numver_01.png) no-repeat;}
.about_h2_numver_02:before{background: url(../img/about/about_h2_numver_02.png) no-repeat;}
.about_h2_numver_03:before{background: url(../img/about/about_h2_numver_03.png) no-repeat;}

/* 会社概要 table*/
.about_table_01{ width:100%; }
.about_table_01 tr:nth-of-type(odd){ background:#F1F5F8;}

.about_table_01 th,
.about_table_01 td{padding: 15px 60px 10px;}

.about_table_01 th{width: 23%;font-weight: normal;color:#5572BE;text-align:  center;position:relative;vertical-align: top;}
.about_table_01 th:after{width: 5px;height: 20px;position: absolute;top: 18px;right: 0px;border-right:5px solid #5673BE;content: '';}
.about_table_01 td dl {margin-bottom:1rem; }
.about_table_01 td dl dd {padding:0 0 0 1rem;}



/*---------------------------------------------
 **  事業内容
---------------------------------------------*/
.h2_service{width: 100px;margin: 0 auto 22px;}

.service_01_col h3,
.service_01_col .service_info dt{ background:#00D9D9;}
.service_01_col .bdr_all{ border-color:#00D9D9;}
.service_01_col .service_kouhou dl dt h4:after{ color:#00D9D9;}

.service_02_col h3,
.service_02_col .service_info dt{ background:#FF9326;}
.service_02_col .bdr_all{ border-color:#FF9326;}
.service_02_col .service_kouhou dl dt h4:after{ color:#FF9326;}

.service_03_col h3,
.service_03_col .service_info dt{ background:#A3D900;}
.service_03_col .bdr_all{ border-color:#A3D900;}
.service_03_col .service_kouhou dl dt h4:after{ color:#A3D900;}





.service_container{}
.h3_service{ padding:12px 5% 8px; margin:0 0 15px; color:#FFF; text-align:left; }

.service_detail_container{padding: 6% 6%;_zoom: 1;margin: 0 0 4rem;overflow: hidden;}
.bdr_all{ border:3px solid ; }
.bdr{-moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;}
.img_box{ margin:0 0 15px;}

.service_info { display:flex;  margin-top:20px; margin-bottom:10px;}
.service_info:last-of-type {  margin:0px;}
.service_info dt{ font-size:20px; color:#FFF; display:inline-block; padding:1px 3% 0px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }
.service_info dd{ padding:2px 3% 1px; }


.service_kouhou{display:flex;flex-wrap:wrap;justify-content: space-between;}
.service_kouhou dl{ width:46%; margin:0 2% 40px; }
.service_kouhou dl dt h4{ text-align:left; padding:0 0 0 2.5rem; position:relative; color:#525260;}
.service_kouhou dl dt h4:after{position: absolute; top: 0px; left: 0px;content: '■';  }
.service_kouhou dl dt h4 ruby rt{ font-size:8px;}

/*---------------------------------------------
 **  施工実績
---------------------------------------------*/
#works_02 .clounm_1{
  width:100%;
  padding:20px 0 60px;
}
#works_02 .clounm_1:nth-child(2n-1){background-color:#e2faee;}

.works_block{
  width:100%;
  margin:0 auto;
  text-align:center;
}
.h3_works{
  width:auto;
  display: inline-block;
  border-bottom:1px solid #4a9c31;
  margin:0 auto 30px;
  padding:10px 30px 10px;
}
.h3_works span{
  display: inline-block;
  background:#4a9c31;
  color:#fff;
  font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Georgia, serif;
  font-size:20px;
  line-height: 1.4;
  padding:3px 20px;
  margin-bottom:10px;
}
.works_block .p_box{
  width:100%;
  max-width: 1120px;
  display: flex;
  margin:0 auto;
}
.works_block .p_box .p_before,.works_block .p_box .p_after{
  width:43%;
  position:relative;
}
.works_block .p_arrow{
  width:14%;
  text-align: center;
  margin:0 auto;
}
.works_block .p_arrow img{
  max-width:79px;
  margin-top:100%;
}

.works_block .p_box .p_before{ text-align: left;}
.works_block .p_box .p_after{ text-align: right;}

.works_block .p_box .p_before::before{content:url(../img/works/before.png);}
.works_block .p_box .p_after::before{content:url(../img/works/after.png);}

.works_block .p_box .p_before::before,.works_block .p_box .p_after::before{
  display: block;
  position:absolute;
  bottom:-40px;
  right:0;
  left:0;
  margin:0 auto;
  text-align:center;
}

.works_block .p_before img, .works_block .p_after img{
  max-width:476px;
}

#works_03 h3{
  text-align: center;
  border-top:1px dotted #ccc;
  padding-top:50px;
  margin-bottom:30px;
}
#works_03 .works_list{
  width:90%;
  margin:0 auto;
  display: flex;
}

#works_03 .works_list ul{
  width:50%;
}
#works_03 .works_list ul:nth-child(1){
  margin-right:20px;
}
#works_03 .works_list ul li{
  padding:7px 20px;
  text-align: left;
}
#works_03 .works_list ul li:nth-child(2n-1){background-color:#e2faee;}

#works_03 .list_p{
  width:90%;
  margin:10px auto;
  text-align:right;
}


#recruit .tel {background:url( ../img/common/tel2.jpg) top center no-repeat;}
#recruit .site-content article {margin-bottom: 15px !important;}