@charset "UTF-8";

/* 基本
---------------------------------------------*/
body {
	color: #333333;
	font-size: 75%;
	font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", sans-serif;
	background: #FFFFFF;
	line-height: 1.5;
}
img {
	vertical-align: top;
}

a {
	color: #003399;
}
a:visited {
	color: #333333;
}
a:hover,
a:focus {
	color: #3366CC;
}
a:active {
	color: #CC3300;
}
#wrapper {
	width: 1040px;
	margin: 0 auto;
	
}
#header {
	position: relative;
	padding-bottom: 4px;
	background: url(../images/header_bg.gif) left bottom repeat-x;
	background-image: url(../images/header_bg.gif);

}
#content {
	clear: both;
	width: 100%; /* for WinIE6,7 */
	padding-top: 3px;
}
#content #primary {
	float: right;
	width: 850px;
	margin: 0px 0px 0px 0px;
}
#content #secondary {
	width: 170px;
	margin: 10px 0px 0px 0px;
	position: sticky;
  top: 20px; /* スクロール時にビューポートの20px位置に達すると固定 */
}
#footer {
	
	position: relative;
	clear: both;
	width: 100%; /* for WinIE6,7 */
	padding-top: 35px;
}
/* 汎用パーツ
---------------------------------------------*/
.marginTop10 {
	margin-top:10px
}
.marginTop15 {
	margin-top:15px
}

/* ロゴとユーティリティナビゲーション
---------------------------------------------*/
#logo {
	padding: 11px 0;
}
#utilityNavigation {
	position: absolute;
	right: -2px;
	top: 25px;
	width: 170px;
	font-size: 90%;
	line-height: 1.2;
}
#utilityNavigation li {
	position: absolute;
	top: 0;
	width: 8em;
}
#utilityNavigation li#navSiteMap {
	right: 0;
}
#utilityNavigation li#navInquiry {
	right: 0;
}
#utilityNavigation li#navRecruit {
	right: 0;
}
#utilityNavigation li a {
	padding-left: 12px;
	text-decoration: none;
}
#utilityNavigation li#navSiteMap a {
	background: url(../images/ico_sitemap.gif) left center no-repeat;
}
#utilityNavigation li#navInquiry a {
	background: url(../images/ico_mail.gif) left center no-repeat;
}
#utilityNavigation li#navRecruit a {
	background: url(../images/ico_arrow.gif) left center no-repeat;
}


/* パンくずリスト
---------------------------------------------*/
#topicPath {
	height: 30px;
	margin: 10px 0 5px 0;
	border-bottom: 0px solid #E5E5E5;
	font-size: 90%;
	line-height: 1.2;
}
#topicPath li {
	float: left;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 32px;
	background: #EEEEEE url(../images/topicpath_li_bg.gif) left center no-repeat;
}
#topicPath li.first {
	padding-left: 30px;
	background: #EEEEEE url(../images/topicpath_li_bg_first.gif) left center no-repeat;
}
#topicPath li.last {
	background: #FFFFFF url(../images/topicpath_li_bg_last.gif) left center no-repeat;
}

/*  見出しエリア
---------------------------------------------*/
div.heading {
width: 600px; /* 見出しエリアの幅 */
margin-bottom: 1em;
padding: 4px 0px; /* 見出しエリアのパディング（上下、左右） */
}

div.heading h3 {
margin: 0;
padding: 3px 3px 0 7px; /* 見出しのパディング（上右下左） */
border-left: 5px #ff8000 solid; /* 見出しの左境界線 */
font-size: 130%; /* 見出しの文字サイズ */
line-height: 100%;
}




/*  title image
---------------------------------------------*/

.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center center;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  overflow: hidden;
  position: relative;
}

.hero-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ea5525, #ea5525, rgba(234,85,37,0.8), rgba(255,255,255,0), rgba(255,255,255,0));
  z-index: 0;
}

.hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
  box-sizing: border-box;
  z-index: 1;
  text-align: justify;
}

.hero-text-small {
  font-size: 1.5em;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #000;
  margin: 0 0 10px 0;
  line-height: 1;
  text-align: justify;
}

.hero-text-large {
  font-size: 3em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  margin: 0;
  line-height: 1;
  text-align: justify;
}

.hero-right {
  flex: 0 0 300px;
  text-align: center;
  z-index: 1;
  display: none;
}

.hero-right img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}


.hero2-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  background-size: cover;
  background-position: center center;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
  overflow: hidden;
  position: relative;
}

.hero2-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #ea5525, #ea5525, rgba(234,85,37,0.8), rgba(255,255,255,0), rgba(255,255,255,0));
  z-index: 0;
}

.hero2-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
  box-sizing: border-box;
  z-index: 1;
  text-align: justify;
}



.container {
            display: inline-block;
        }
.overlay-text {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            font-size: 23px;
            font-weight: bold;
            color: black;
            background-color: rgba(255, 255, 255, 0);
            padding: 0px 0px 0px 0px;
			eight: fit-content; /* 必要な高さに合わせる */
			display: flex;
            gap: 5px; /* 要素間の間隔調整 */
        }
.text {
            display: flex;
            gap: 0px; 
		}
.orange {
            font-size: 20px;
            color: #ffc400; /* だいだい色 */
        }
.black {
			color: #000000;
			font-weight: 800;
			font-size: 26px; 
			margin-left: 30px; 
        }
.grey {
			color: rgba(255, 255, 255, 0.5);
			font-weight: 800;
			font-size: 17px; 
			margin: 8px 0px 0px 100px; 
        }
.underline {
            position: absolute;
            left: 1.0em;
            bottom: 0px; /* 文字の下に配置 */
            width: 100%;
            height: 3px; /* 下線の太さ */
            background: linear-gradient(to right, #ffffff, rgba(255, 165, 0, 0)); /* 右に向かってフェードアウト */
        }
/* 下階層への導入部分
---------------------------------------------*/
#lead p.leadSentence {
	line-height: 1.5;
	margin: 0px 0px 5px 0px;
}
#lead .column {
	clear: both;
	width: 100%; /* for WinIE6,7 */
	margin: 10px 0px 15px 0px;
    padding: 20px; /* 内側の余白 */
	background-color:#F5F5F5; /* 背景の色 */
	border: dashed 2px #C7C7C7; /* 線の種類・太さ・色 */
    border-radius: 20px; /* 角丸

	
}

}
#lead .column .section {
	width: 390px;
	height: 180px;
}
#lead .column #leadPurpose,
#lead .column #leadTerms {
	float: left;
}
#lead .column #leadEnvironment,
#lead .column #leadAccess {
	float: right;
}
#lead .column .section h2 {
	border-top: 1px solid #D9D9D9;
	border-bottom: 2px solid #F5F5F5;
	font-weight: normal;
	line-height: 1;
}
#lead .column .section h2 a {
	display: block;
	width: 380px;
	border-bottom: 1px solid #D9D9D9;
	background: url(../images/lead_a_bg.gif) no-repeat left center;
	text-decoration: none;
	padding: 10px 5px;
}
#lead .column .section h2 a:active {
	background: url(../images/lead_a_bg.gif) right center no-repeat;
	width: 380px;
	padding: 10px 5px;
}
#lead .column .section p {
	margin: 7px 10px 18px 10px;
	line-height: 1.5;
}

.leadSentenceTitle h2{
	font-weight: 700;
	font-size: 2em;
}
.leadSentenceTitle p {
	font-weight: 100;
	margin: 10px 0px 0px 10px;
}
.leadSentence{
margin: 0;
padding: 5px 5px 0px 5px; /* 見出しのパディング（上右下左） */
font-size: 120%; /* 見出しの文字サイズ */
}
.leadSentences{
margin: 0;
font-size: 1.0em;
padding: 20px 150px 30px 150px; /* 見出しのパディング（上右下左） */
}
.leadSentenceTitle{
margin: 0;
font-size: 1.2em;
	font-weight: 800;
padding: 0px 0px 0px 5px; /* 見出しのパディング（上右下左） */
}
.smalltitle{
margin: 0;
font-weight: 600;
	
font-size: 1.2em;
padding: 5px 0px 0px 35px; /* 見出しのパディング（上右下左） */
}

.Sentence{
margin: 0;
font-size: 1.2em;
padding: 5px 0px 0px 35px; /* 見出しのパディング（上右下左） */
}

.leadSentenceTitle p{
margin: 0;
font-size: 1em;
	font-weight: 100;
padding: 10px 0px 5px 20px; /* 見出しのパディング（上右下左） */
}



.MidContent{
padding: 5px 0px 10px 0px;
border-bottom: 1px solid #FF9F02;

}

.MidContentlast{
padding: 5px 0px 0px 0px;

}

.MidTitle{
margin: 0;
font-size: 1.2em;
	font-weight: 800;
padding: 10px 0px 5px 10px; /* 見出しのパディング（上右下左） */
}

.MidTitle h3 {
	margin: 0px 0px 0px 10px; /* 見出しの背景色 */
	padding-left: 10px;
	font-size: 130%; /* 見出しの文字サイズ */
	border-left: 5px #ff8000 solid; /* 見出しの左境界線 */
	color:#000000;
}
.MidTitle p {
	padding: 10px 0px 10px 20px;
	font-size: 120%; /* 見出しの文字サイズ */
	font-weight: 100;
	color:#000000;
}

/* お知らせ
---------------------------------------------*/
.newsTitle{
margin: 0;
padding: 3px 3px 0 5px; /* 見出しのパディング（上右下左） */
font-size: 100%; /* 見出しの文字サイズ */
}

.newscontent{
	margin:0px 0px 0px 20px;
}
.newsLink{
	margin:0px 0px 0px 10px;
}

/* ボックス部分
---------------------------------------------*/
div.box1 {
	width: 270px; /* ボックスの幅 */
	height: 260px;
	background-color: #FFFFFF; /* ボックスの背景色 */
	border: 1px #999999 solid; /* ボックスの枠 */
	font-size: 90%; /* ボックス内の文字サイズ */
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom:15px;
}

div.box1 h3 {
	margin: 0; /* 見出しの背景色 */
	line-height: 27px;
	padding-left: 10px;
	border-bottom: 1px #999999 solid; /* 見出しの下線 */
	font-size: 110%; /* 見出しの文字サイズ */
	color:#FFFFFF;
	background: url(../images/boxTitle.gif);
}

div.box1 p {
margin: 5px;/*文字と枠の間にスペース*/
}

.box1 p img{
float:left;
margin-left:5px;/*写真の左にスペース*/
margin-right:10px; /*写真の右にスペースを空ける*/
border:solid 2px #CCCCCC;/*サイトに枠を付ける設定,色の変更可*/
}

/* ローカルナビゲーション
---------------------------------------------*/
#localNavigation ul {
	background: #F5F5F5;
	line-height: 1.2;
}
#localNavigation ul li {
	padding-bottom: 2px;
	background: url(../images/ln_li_bg.gif) left bottom repeat-x;
}
#localNavigation ul li a {
	display: block;
	width: 142px; /* for WinIE6 */
	padding: 8px 10px 8px 18px;
	background: url(../images/arrow_big.gif) 9px 13px no-repeat;
	text-decoration: none;
}
#localNavigation ul li a:hover,
#localNavigation ul li a:focus {
	background: #E6E6E6 url(../images/arrow_big.gif) 11px 13px no-repeat;
}
#localNavigation ul li ul {
	margin-left: 20px;
	font-size: 90%;
}
#localNavigation ul li ul li {
	padding-bottom: 0;
	background: none;
	border-top: 1px solid #E5E5E5;
}
#localNavigation ul li ul li a {
	width: 126px; /* for WinIE6 */
	padding: 6px 10px 6px 14px;
	background: url(../images/arrow_small.gif) 6px 11px no-repeat;
}
#localNavigation ul li ul li a:hover,
#localNavigation ul li ul li a:focus {
	background: #E6E6E6 url(../images/arrow_small.gif) 7px 11px no-repeat;
}

/* 事例写真
---------------------------------------------*/

.articleMain .flexrow2 {
	-js-display: flex;
	display: flex;
	flex-direction: column;
  align-items: center;
  
	padding: 0px;
	text-align: justify;
	text-justify: inter-ideograph;
  width: 48%;
}

.articleMain .flexrow2-title {
  width:100%;
	font-size:110%;
	font-weight:bold;
	background-color: #003366;
	color: #FFFFFF;
	margin-bottom: 10px;
	margin-top: 15px;
	padding: 3px 4px 3px 4px;
	white-space: nowrap;
}


.articleMain .flexrow2-frame {
	-js-display: flex;
	display: flex;
	width: 100%;
	flex-direction: column;
    align-items: center;
	border: 2px solid ;
	border-color: antiquewhite;
	border-radius: 10px;
	padding: 7px 11px;
}



/*tableEXで施工例などのtableをflexに*/
.tableEX{
	-js-display: flex;
 display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
	padding: 0.2em;
	font-size: 1em;
}
.tableEX .EXcell1{
 
  padding: 2px;
  margin: 5px 2px 9px 2px;
  position: relative;
	
	text-align: justify;
	text-justify: inter-ideograph;
	
	display: flex;
	flex-basis: 97%;
	flex-direction: column;
	align-items: center;
}
.tableEX .EXcell2{
 
  padding: 2px;
  margin: 5px 2px  ;
	
	position: relative;

	
	text-align: justify;
	text-justify: inter-ideograph;
	
	-js-display: flex;
	display: flex;
	flex-basis: 45%;
	width: 49%;
	flex-direction: column;
	align-items: center;
	
}


/* フッターナビゲーション
---------------------------------------------*/
#footerNavigation {
	padding-left: 10px;
	border-top: 1px solid #E5E5E5;
	font-size: 90%;
	line-height: 1.2;
}
#footerNavigation li {
	float: left;
	margin-right: 10px;
	padding: 8px 0;
}
#footerNavigation li a {
	display: block;
	padding-left: 6px;
	background: url(../images/arrow_small.gif) left center no-repeat;
	text-decoration: none;
}
#copyright {
	clear: both;
	width: 100%; /* for WinIE6,7 */
	padding: 20px 17px;
	background: #F5F5F5;
	border-top: 1px solid #E5E5E5;
	font-size: 90%;
	line-height: 1;
}

/* グローバルナビゲーション
---------------------------------------------*/

ul#globalNavi {
	zoom: 1;

}
ul#globalNavi:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

ul#globalNavi li {
	float: left;
	display: inline;
	width: 160px;
}
ul#globalNavi li.item01 {
	width: 158px;
}

ul#globalNavi li a {
	display: block;
	background: #FFF url(../images/base/globalnavi_bg_01.png) no-repeat;
}
ul#globalNavi li.item01 a {background-position:    0   0;}
ul#globalNavi li.item02 a {background-position: -158px 0;}
ul#globalNavi li.item03 a {background-position: -318px 0;}
ul#globalNavi li.item04 a {background-position: -478px 0;}
ul#globalNavi li.item05 a {background-position: -638px 0;}

ul#globalNavi li a:hover {
	background-color: transparent;
}

ul#globalNavi li a:hover img {
	visibility: hidden;
}

/* When Active Page */
body.DIRNAME1 ul#globalNavi li.item01 a img,
body.DIRNAME2 ul#globalNavi li.item02 a img,
body.DIRNAME3 ul#globalNavi li.item03 a img,
body.DIRNAME4 ul#globalNavi li.item04 a img,
body.DIRNAME5 ul#globalNavi li.item05 a img { visibility: hidden;}

/* リスト
---------------------------------------------*/
ul.list {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 80%;
}

ul.list li {
	padding: 0 0 3px 12px; /* 項目のパディング（上右下左） */
	background: url(../images/square.gif) no-repeat 3px 0.4em; /* マーカー画像 */
	line-height: 120%;
}

/* 横並び画像ボタン
---------------------------------------------*/

.top-btn {
	list-style-type: none;
	width: 100%;
	margin: 15px 0 0px;
	overflow: hidden;
}

.top-btn li {
	float: left;
	margin-bottom: 10px;
	margin-right: 5px;
}

.btn01 { margin-right: 0px; }
.btn02 { margin-right: 0px; }

.top-btn img {
	display: block;
	width: 195px;
	height: 45px;
}

.top-btn p {
		text-align: center;
		font-size: 95%;
		overflow: hidden;
		margin: 0 0 0.2em;
		padding: 2px 0;
		background-color: #eee;
}

.top-btn a {
		text-decoration: none;
		font-size: 95%;
		display: block;
		text-align: right;
}

.top-btn a:hover { 
　　text-decoration: none; 
}


/* 縦並びボックス
---------------------------------------------*/
div.section600 {
	width: 600px; /* ボックスの幅 */
	padding-bottom: 1px; /* ボックスの下パディング */
	background: #ffffff url(../images/maru1_600_bottom.gif) no-repeat bottom; /* ボックスの背景 */
	font-size: 100%;
	color: #000000;
	margin-bottom: 10px;
}

/* --- 見出し --- */



div.section600 h3 {
	margin: 0; /* 見出しのマージン */
	padding: 7px 10px; /* 見出しのパディング（上下、左右） */
	background: #f9f9f9 url(../images/maru4_600_top.gif) no-repeat top; /* 見出しの背景 */
	border-bottom: 1px #c0c0c0 solid; /* 見出しの下境界線 */
	font-size: 100%; /* 見出しの文字サイズ */
}


/* --- ボックス内の段落 --- */
div.section600 p {
margin: 1em 10px; /* 段落のマージン（上下、左右） */
}
/* --- マージン --- */
.pageTop {
	margin-top:15px;
	margin-bottom: 20px;
}

/*---トップのボックス---*/
div.boxArea {
	padding-top: 10px;
	padding-right: 15px;
	padding-left: 15px;
	background: url(../images/topboxBackcolor.gif) repeat-x;
	overflow: hidden;
}
div.topbox1 {
	width: 250px; /* ボックスの幅 */
	height: 260px;
	background-color: #FFFFFF; /* ボックスの背景色 */
	border: 1px #999999 solid; /* ボックスの枠 */
	font-size: 90%;
	margin-right: 5px;
	margin-left: 0px;
	margin-bottom:15px;
	float: left;
	clear: right;
}
div.topbox2 {
width: 250px; /* ボックスの幅 */
height: 260px;
background-color: #FFFFFF; /* ボックスの背景色 */
border: 1px #999999 solid; /* ボックスの枠 */
font-size: 90%; /* ボックス内の文字サイズ */
float: left;
margin-right: 0px;
margin-left: 0px;
margin-bottom:15px;

}

div.topbox1 h3,
div.topbox2 h3 {
	margin: 0; /* 見出しの背景色 */
	line-height: 27px;
	padding-left: 10px;
	border-bottom: 1px #999999 solid; /* 見出しの下線 */
	font-size: 110%; /* 見出しの文字サイズ */
	color:#FFFFFF;
	background: url(../images/21.png);
}

div.topbox1 p,
div.topbox2 p {
margin: 5px;/*文字と枠の間にスペース*/
}

.topbox1 p img,
.topbox2 p img {
margin-left:2px;/*写真の左にスペース*/
margin-right:2px; /*写真の右にスペースを空ける*/
border:solid 2px #CCCCCC;/*サイトに枠を付ける設定,色の変更可*/
}



/* --- 上へ戻るボタン--- */

#pageTop {
  position: fixed;	
  bottom: 20px;
  right: 20px;
}

#pageTop i {
  padding-top: 4px
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 8px 0 0 0px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
  background-color: #ea5525;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

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

/* --- Topページ見出しエリア --- */
div.topHeading {
	width: 800px;
	background: #f9f9f9 url(../images/topheading_back1.gif) repeat-x; /* 見出しエリアの背景 */
	border: #c0c0c0 solid; /* 見出しエリアの境界線（色、スタイル） */
	border-width: 1px 1px 2px; /* 見出しエリアの境界線（太さ 上、左右、下） */
	margin-top: 25px;
	margin-bottom: 2px;
}

/* --- Topページ見出し --- */
div.topHeading h3 {
	margin: 0;
	padding: 7px 7px 4px; /* 見出しのパディング（上、左右、下） */
	border-bottom: 2px #4169e1 solid; /* 見出しの下境界線 */
	font-size: 100%; /* 見出しの文字サイズ */
	line-height: 100%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* 縦並びボックス
---------------------------------------------*/
.t_layout th {
	text-align:center;
	background: #C2BCBC;
}

.t_layout th {
	border:1px solid #CCCCCC;
	line-height:140%;
	padding:5px;
}
.t_layout td  {
	border:1px solid #CCCCCC;
	line-height:140%;
	padding:0px 5px 0px 10px;
}
.t_layout table {
	border:1px solid #CCCCCC;
	border-collapse:collapse;
	clear:both;
	margin-bottom:1em;
	width:100%;
}
.t_layout_down th {}
.greeting {
	margin-right: 20px;
	margin-left: 20px;
}
/* --- パーツ --- */
.m_b5 {
	margin-bottom:5px;
}
.m_b10 {
	margin-bottom:10px;
}


h1 {
  color: #cc3300; /* 朱色系 */
  font-size: 2.5em; /* 見出しらしい大きさ */
  margin-top: 5px;
  margin-bottom: 5px;
}

h2 {
  font-size: 1.5em;
  font-weight: bolder;
  margin: 0px 0 0px 0px;
  padding-bottom: 3px;
  padding-left: 10px;
  position: relative;
}

h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #FFC778 50%, transparent 100%);
}

h3 {
  color: #000000; /* さらに控えめな色 */
  font-size: 1.0em;
  margin: 0px 0px 0px 0px;
}

.vertical-align-middle {
	  display: inline-block; /* インライン要素にすることで横に回り込む */
      vertical-align: middle; /* 上下中央に寄せる */ 
}
.fa-solid fa-circle-info::before {
	content:'\f05a';
	font-family:'Font Awesome 5 Free';
	font-weight:900;
}

.topbold {
  font-weight: 600
}
.main {
	  display: flex;
  justify-content: space-between;
}