fon@charset "utf-8";
.no-gutter > [class*='col-'] {
	padding-right: 0;
	padding-left: 0;
}
.bg-lightgreen {
	background: #e6ede9;
}
.bg-gray {
	background: #bdbdbd;
}
.line-blue{
	border-top: 10px #a9d4e7 solid;
	
}
.jumbotron {
	background-image: url('../images/top-image.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 600px;
}

/*  main画像スライド */
.img-frame{
 position: relative;
 width: 100%;
 height: 600px;
 overflow: hidden;
 margin: 0 auto;
}

.img-01{
   position: absolute;
   top:0;
   right:0;
   width: 100%;
   height: 600px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url('../images/top-image-a.jpg');
   animation: slide-animation-01 12s infinite;
}
.img-02{
   position: absolute;
   top:0;
   right:0;
   width: 100%;
   height: 600px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url('../images/top-image-b.jpg');
   animation: slide-animation-02 12s infinite;
}
.img-03{
   position: absolute;
   top:0;
   right:0;
   width: 100%;
   height: 600px;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
   background-image: url('../images/top-image-c.jpg');
   animation: slide-animation-03 12s infinite;
}
@keyframes slide-animation-01 {
   0% {opacity: 1;}
  30% {opacity: 1;}
  40% {opacity: 0;}
  90% {opacity: 0}
 100% {opacity: 1;}
}
@keyframes slide-animation-02 {
   0% {opacity: 0;}
  30% {opacity: 0;}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0;}
 100% {opacity: 0;}
}
@keyframes slide-animation-03 {
   0% {opacity: 0;}
  60% {opacity: 0;}
  70% {opacity: 1;}
  90% {opacity: 1;}
 100% {opacity: 0;}
}

.msg{
 font-size: 250%;
 color: #fff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50% , -50%);
 top: 20%;
 left: 30%;
 transform: translate(-50% , -50%);
}
.msg-01, .msg-02, .msg-03{
 text-shadow: 2px 2px 3px #000, -1px -1px 3px #000;
}
.img-03.cover::after{
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .7);
}
.msg-03{
 z-index:1;
}

/*  main画像スライド end */




.col-md-6 h1{
	color: white;
	-webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 4px #23430C;
	text-shadow: 0px 1px 4px #666;
	
	}

.heading {
	border-left: 6px solid #aaa;
	padding: 0 0 0 10px;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: ">"
}

.btn-outline-secondary{
	background: #9ce9e5;
	border-radius: 7px;
	border: 1px solid #fff;
}

footer a {
	color: #fff;
	text-decoration: underline;
}
footer a:hover {
	color: #fff;
	text-decoration: none;
}

/*テーブル（ta1）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: left;		/*文字を左寄せ*/
	background: #eee;
	color: #666;
	font-weight: bold;		/*太字に*/
	padding: 10px;			
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 th.tamidashi {
	width: auto;
}
/*ta1設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	
}
.ta1 th {
	width: 140px;		/*幅*/
	text-align: center;	/*センタリング*/
	background: #e6f3f2;
}
/*ta2設定 ～お客様の声 アンケート用～*/
.ta2 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
	font-size: 90%;
}
.ta2, .ta2 td, .ta2 th {
	word-break: break-all;
	border: 1px solid #ccc;	/*テーブルの枠線の幅、線種、色*/
	padding: 10px;	
}
.ta2 th {
	width: auto;		/*幅*/
	text-align: left;	/*センタリング*/
	background: #e6f3f2;
}


/* dl
---------------------------------------------------------------------------*/
 dl{
	font-size:100%;
	padding: 0 20px 20px 20px;
}
 dt{
	font-weight:bold;
	color:#3e88ab;
}
 dd{
	margin-bottom: 1em;
	border-bottom: 1px dashed #3e88ab;
	padding-bottom: 1em;
}

/*listブロック
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
.list {
	overflow: hidden;
	width: 31%;	/*幅*/
	float: left;
	margin: 0 0 3em 2%;	/*上、右、下、左へのボックスの外側に空けるスペース*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	box-shadow: 3px 4px 2px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅、色。0,0,0は黒の事で、0.1は色が10%出た状態。*/
	padding: 2%;	
	border-radius: 3px;	/*角丸のサイズ。ほんの少し角が丸くなってます。*/
}
.list a {
	display: block;text-decoration: none;overflow: hidden;
	margin: -2%;	/*ボックスのマージン。リンク設定する場合に、上の.listのpaddingを相殺するため。*/
	padding: 2%;	
	background: url(../images/arrow1.png) no-repeat right bottom / 40px;	/*リンク設定した際の右下の矢印マークの読み込み。right（右）、bottom（下）、40pxは画像の幅。*/
}
/*マウスオン時の設定*/
.list a:hover {
	position: relative;
	left: 1px;	/*マウスオン時に右に1px移動する*/
	top: 1px;	/*マウスオン時に下に1px移動する*/
}
/*h4（見出し）タグの設定*/

#main .list h4 {
	clear: both;
	color: #65a9c9;
	font-size: 120%;
	font-size: 130%;
	line-height: 140%;
	text-align: center;	/*文字をセンタリング*/
	
	margin: 0.5em 0;
	padding: 30;
	background: none;
	border-left: none;
	height: auto;
	overflow: hidden;	/*高さを超えた場合に非表示にする*/

}
/*h4タグの１文字目への追加設定*/
#main .list h4::first-letter {
	border-left: none;
	padding-left: 0;
}

/*p（段落）タグの設定*/
.list p {
	padding: 0 !important;
	line-height: 1.5;	/*行間を少し狭くする。デフォルトは最上部のbodyにあります。*/
	font-size: 100%;		/*文字サイズを少し小さく*/
	color: #333;
	height: 13.5em;			/*高さ。1.5emを１行分とカウントして下さい。6emなら４行です。*/
	overflow: hidden;	/*高さを超えた場合に非表示にする*/
}

/*box（info1.htmlやstaff.htmlで使っている枠色がついたタイプのボックス）
---------------------------------------------------------------------------*/
/*box*/
.box {
	overflow: hidden;
	border: 3px solid #a9d3e9;	/*枠線の幅、線種、色*/
	padding: 20px;				
	border-radius: 10px;		/*角丸のサイズ。この１行を削除すれば角のとれた長方形になります。*/
	margin-bottom: 20px;		/*ボックスの下に空けるスペース*/
}
div.small{
	width: 80%;
	padding: 0 10% 5em;
	text-align: left;
	
}

.wakuSmall {
	overflow: hidden;
	border: 3px solid #a9d3e9;	/*枠線の幅、線種、色*/
	padding: 20px;				
	border-radius: 10px;		/*角丸のサイズ。この１行を削除すれば角のとれた長方形になります。*/
	margin-bottom: 20px;		/*ボックスの下に空けるスペース*/
}
/*box内のh4タグ*/
.box h4,
.boxSmall h4 {
	color: #65a9c9;
	font-size: 130%;
	font-weight: bold;
	margin-bottom: 1em;
	padding-bottom: 0.2em;
	border-bottom: 1px dotted #65a9c9;
}
/*box内のpタグ*/
.box p,
.boxSmall p {
	padding: 0 !important;
}
.box p {
	margin:0 0 1.5em;
}
/*box内のfrとflスタイルのリセット*/
.box .fr,.box .fl,.boxSmall .fr,.boxSmall .fl{margin-bottom: 0;}


/* サイドエリア
---------------------------------------------------------------------------*/
.banner{
	margin: 1em 0 3em;
	}
.banner img{
	margin: 0 0 1.2em;
	border: 1px solid #999;
}
.banner img.none{
	border: none;
}

nav.nav-item i{
	 /*padding: 0 0 0 6em ;*/
	}

/* 施工エリア
---------------------------------------------------------------------------*/
div.area {
	text-align: center;
	background: #9ce9e5;
	padding: 10px 25px !important;
	margin-bottom: 50px;
	border-radius: 7px;
	border: 5px solid #fff;
	color:#333333;
}
div.area h3{
	font-size: 150%;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.1em;
	color:#333;
}
div.area p{
	color:#333;
}
footer{
	text-align: center;
	}
.footerLogo{
	width: 50%;
}
.footer-copyright {
	width: 100%;
	height: 60px;
	line-height: 60px;
	background-color: #f5f5f5;
}
.map iframe {
	width: 100%;
	height: 450px;
}
.banner img{
	margin: 0 0 1.2em;
	border: 1px solid #999;
}
.banner img.none{
	border: none;
}
h1.display-4{
	font-size: 260%;}
.pcOnly{display: block;}
.phoneOnly{display: none;}
.clear {clear: both;}
.caption {font-size: 80%; font-weight: normal;}
.fontred{color: #CA0000;}
.fontorange{color: #ec9846;}
.margin5{margin:5px;}
.margin10{margin:10px;}
.margin15{margin:15px;}
.margin20{margin:20px;}

.marginTop0{margin-top:0px;}
.marginTop5{margin-top:5px;}
.marginTop10{margin-top:10px;}
.marginTop15{margin-top:15px;}
.marginTop20{margin-top:20px;}
.marginTop25{margin-top:25px;}
.marginTop30{margin-top:30px;}
.marginTop35{margin-top:35px;}
.marginTop40{margin-top:40px;}
.marginTop45{margin-top:45px;}
.marginTop50{margin-top:50px;}

.marginBtm0{margin-bottom:0px;}
.marginBtm5{margin-bottom:5px;}
.marginBtm10{margin-bottom:10px;}
.marginBtm15{margin-bottom:15px;}
.marginBtm20{margin-bottom:20px;}
.marginBtm25{margin-bottom:25px;}
.marginBtm30{margin-bottom:30px;}
.marginBtm35{margin-bottom:35px;}
.marginBtm40{margin-bottom:40px;}
.marginBtm45{margin-bottom:45px;}
.marginBtm7em{margin-bottom:7em;}

.marginRight5{margin-right:5px;}
.marginRight10{margin-right:10px;}
.marginRight15{margin-right:15px;}
.marginRight20{margin-right:20px;}
.marginRight25{margin-right:25px;}
.marginRight30{margin-right:30px;}
.marginRight35{margin-right:35px;}

.marginLeft5{margin-left:5px;}
.marginLeft10{margin-left:10px;}
.marginLeft15{margin-left:15px;}
.marginLeft20{margin-left:20px;}
.marginLeft25{margin-left:25px;}
.marginLeft30{margin-left:30px;}
.marginLeft35{margin-left:35px;}

img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

.fr{float: right;margin-left: 2%;margin-bottom: 20px;}
.fl{float: left;margin-right: 2%;margin-bottom: 20px;}
.w40p {width: 40%;}

.floatLeft{float:left}
.floatRight{float:right;}
.center{text-align:center;}

.clearLeft{clear:left;}
.clearRight{clear:right;}
.clearBoth{clear:both;}

.imgRight{ float: right; margin: 0 20px 10px 10px;}
.imgLeft{ float: left; margin: 0 10px 10px 0;}

.waku{
	border: 1px solid #ccc;
	background:#FFC;
	padding: 2em;}

/* フォームボタン
---------------------------------------------------------------------------*/
a.btn_form {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 15em;
	margin: auto;
	padding: 1em 3em;
	/*padding: 1rem 4rem;*/
	font-weight: bold;
	background: linear-gradient(to top, rgb(5, 130, 174), #27acd9);
	color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_form:hover {
	color: #fff;
	opacity: 0.5;
}

/* 大デバイス（デスクトップ, 992px 未満）
============================================== */
@media screen and (max-width: 991.98px) {
.footer-logo {
	width: 100%;
}
} /* END */

/* 中デバイス（タブレット, 768px 未満）
============================================== */
@media screen and (max-width: 767.98px) {
/* main画像 */
.img-frame{
 height: 400px;
}

.img-01{
   width: 100%;
   height: 400px;
   background-image: url('../images/top-image-s-a.jpg');
}
.img-02{
   width: 100%;
   height: 400px;
   background-image: url('../images/top-image-s-b.jpg');
}
.img-03{
   width: 100%;
   height: 400px;
   background-image: url('../images/top-image-s-c.jpg');
   background-position: bottom right 30%;
}
.msg{
 font-size: 230%;
 top: 30%;
 left: 35%;
}

.gnav-item {
	display: block;
	width: 100%;
	border: none;
}
.gnav-item+ .gnav-item {
	border: none;
}
table th, table td {
	padding: .25rem !important;
}
table th:first-child {
	width: 25%;
}
.pcOnly{display: none;}
.phoneOnly{display: block;}
.banner{
	text-align: center;
}
.banner img{
	margin: 1em auto;
}
/*ブロック１個あたりの設定*/
.list {
	width: 46%;
	/*float: none;*/
}
.list figure {
	text-align: center;
	width: 100%;
	margin-right: 2%;
}
/*h4（見出し）とp(段落)タグの設定*/
.list h4, .list p {
	height: auto;
}

.list h4 {
	font-size: 120%;
	line-height: 140%;
	text-align: center;	/*文字をセンタリング*/
	
	margin: 0.5em 0;
	background: none;
	border-left: none;
	height: auto;
	overflow: hidden;	/*高さを超えた場合に非表示にする*/

}

/*box*/
.box {
	padding: 0.5em 1em 1em;				
}
p,.tokucho ol,.tokucho ul,dl,table {font-size: 120%;}
.fr{float: none;margin: 0 0 20px;}
.fl{float: none;margin: 0 0 20px;}
.w40p {width: 100%;}

} /* END */

/* 小デバイス（縦向きモバイル, 576px 以上 デスクトップ, 992px 未満）
============================================== */
@media screen and (min-width: 576px) and (max-width: 991.98px) {
 #sec2  {
     height: 500px;
 } 
/* img {max-width: none;width: 90%;}*/
.banner{
	text-align:  center;
}
} /* END */

/* 小デバイス（縦向きモバイル, 576px 以上）
============================================== */
@media screen and (min-width: 576px) {
 #sec2 .message {
    position: absolute;
     left: 0;
 } 
} /* END */