/* IMPORT CSS */
@import url("grid.css");

img {
	max-width:100%;
	height: auto;/*高さ自動*/
}
a {
/*	display:block;*/
	color: #000;
	text-decoration-line: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
a:hover { 
    color: #666;
}

.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}
.b{font-weight:bold;}

.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt-10{margin-top:-10px;}
.mb20{margin-bottom:20px;}
.mb-20{margin-bottom:-20px;}

.font01{font-size:120%;}
.font02{font-size:140%;}
.font03{font-size:65%;}


/*リンク色つき*/
.link_color a {color: #009;text-decoration:underline;}
.link_color a:active{color:#009;outline:none;}
.link_color a:visited {color: #009;text-decoration: none;outline:none;}
.link_color a:hover {color: #009;text-decoration:none;}



/*ヘッダー
-------------------------------------*/
.header {

	display: flex;
	flex-direction: row;
	padding: 1rem 0 0 0;

}
.header-box {
	margin-left: auto;
	margin-top: 8px;
}

nav ul {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	list-style: none;
	margin: 0;
}
nav li {
	flex: 1 0 auto;
	font-size:95%;
	text-align:center;
}
nav li a {
display:block;
	text-decoration: none;
	text-align: center;
	width: 100%;
}
nav a:hover {
	background-color: #E3EEF4;    
}
nav a {
	padding: 0.5rem;
}

.eng{ font-family: "Courier";
	color:#999;}

.menu_line_r{border-right:1px solid #DDD;}
.menu_line_l{border-left:1px solid #DDD;}


@media screen and (min-width: 768px){

/* PC時はMENUボタンを非表示 */

.header{display: flex;
	align-items: center;
	justify-content: center;
}

.midashi{font-size:85%;
	margin-left:10px;
	padding:7px 10px;}


#open,#close {
	display: none !important;
}

#navi {
	display: block !important;
}

/*テーブル
-------------------------------------*/

table.table01{
table-layout: auto;
	padding:0px;
	width:100%;
	margin:5px 0px 10px 0px;
	border-spacing:0;
	border-collapse:collapse;}

.table01 td{
	border-spacing:0;
	font-size:90%;
	border:1px solid #CCC;
	padding:10px 20px; }

.table01_title{
	background: #EFEFEF ;
	}

.table_w1{
	width:20%;}


table.table02{
table-layout: auto;
	padding:0px;
	width:100%;
	margin:5px 0px 10px 0px;
	border-spacing:0;
	border-collapse:collapse;}

.table02 td{
	border-spacing:0;
	font-size:90%;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	padding:10px 20px; }

/*製品案内メニュー*/
table.product_menu{
	table-layout:fixed;
	padding:0px;
	width:100%;
	margin:5px 0px 10px 0px;
	border-spacing:3px;
	border-collapse:separate;}

.product_menu td{
	border-spacing:0;
	font-size:90%;
	text-align:left;
	border:1px solid #036;
 }

.product_menu td a {
	display:block;
	background: url(../img/icon03.gif) no-repeat left;
	width:100%;
	padding-left:22px;
	padding-top:7px;
	padding-bottom:7px;
	padding-right:5px;
	height:100%;}

.product_menu td a:hover {
	background-color: #E3EEF4;}


/*2列
-------------------------------------*/
.waku{
	width:100%;}

.waku_left{
	width:50%;
	float:left;
	padding:0 30px;
	border-right:1px solid #CCC;}

.waku_right{
	width:50%;
	padding:0 30px;
	float:right;}

/*フッター
-------------------------------------*/
footer {
	background: url(../img/footer_bg.jpg) no-repeat top;
	padding: 15px 30px;
	color:#333;
	background-size:cover;
	margin-top:40px;
}
footer h4 {
	background: url(../img/icon01.gif) no-repeat left;
	font-size:95%;
	padding:3px 3px 3px 15px;
	font-weight:bold;
}

ul.footer_list{
	padding: 5px 10px 0;}

ul.footer_list li{
	display: inline-block;
	padding-right:80px;
	vertical-align:top;
}

ul.footer_link
{
	margin:0px;
}

ul.footer_link li{
	font-size:80%;
	list-style: none;
	margin: 0px;
	color:#000;
	padding: 3px 0 3px 0;
	display: block;
}

.mt_footer{margin-top:37px;}


ul.footer_link02{
	padding: 20px 20px 10px;
	text-align:center;
	}

ul.footer_link02 li{
	font-size:80%;
	display: inline-block;
	padding:0 20px;
	vertical-align:top;
}

.footer_link a:active{color:#333;outline:none;}
.footer_link a,.footer_link a:link,.footer_link a:visited {color: #333;text-decoration: none;outline:none;}
.footer_link a:hover {text-decoration:underline;}

.footer_link02 a:active{color:#333;outline:none;}
.footer_link02 a,.footer_link02 a:link,.footer_link02 a:visited {color: #333;text-decoration: none;outline:none;}
.footer_link02 a:hover {text-decoration:underline;}

/*フォーム
-------------------------------------*/

/*グーグルマップ
-------------------------------------*/
.gmap {
  position: relative;
  width: 100%;
  padding-top: 50%;
}
.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*リスト
-------------------------------------*/
ul.customer_list
{
	margin:10px 5px 20px;
	width:100%;
}

ul.customer_list li{
	font-size:85%;
	list-style: none;
	margin: 0px;
	padding: 5px 5px 5px 20px;
	display: inline-block;
	width:24%;
	background: url(../img/icon02.gif) no-repeat left;
}

.customer_list a:active{color:#369;outline:none;}
.customer_list a,.customer_list a:link,.customer_list a:visited {color: #1F3F5F;text-decoration: underline;outline:none;}
.customer_list a:hover {text-decoration:none;}

ul.contact_tel{
	text-align:center;
}

ul.contact_tel li{
	display: inline-block;
	width:45%;
	margin:0 10px;
	padding:10px 10px;
	background: #FFF;
}

ul.customer_list
{
	margin:10px 5px 20px;
	width:100%;
}

/*製品案内画像*/
ul.product_img
{
	margin:20px auto 60px;
	width:100%;
	text-align:center;
}
ul.product_img li{
	list-style: none;
	margin: 0px;
	padding: 3px 5px;
	display: inline-block;
	/*width:24%;*/
}


ul.top_contents{
	width:100%;
	padding:0;
	margin:0px auto;
	}

ul.top_contents li{
	list-style: none;
	padding: 3px 5px;
	display: inline-block;
	vertical-align:top;
	width:32%;
}



/*タイトル
-------------------------------------*/
.title01{
	font-size:100%;
	margin:35px 0 15px;
	border-bottom:1px dotted #999;
	text-align:center;
	padding:2px 0;
	background:#EEE;
	color:#000;}

.title02{
	font-size:100%;
	margin:35px 0 15px;
	border-bottom:1px solid #999;
	padding:4px 0;
	font-weight:bold;
	color:#000;}

.title03{
	font-size:110%;
	margin:35px 20px 25px;
	border-left:5px solid #036;
	padding:3px 10px;
	color:#036;}


/*サイトマップ
-------------------------------------*/
.title_site_map{
	font-size:110%;
	margin:15px 0px 25px;
	padding:5px 10px 4px 10px;
	background:#EEE;}

.title_site_map a:active{color:#369;outline:none;}
.title_site_map a,.title_site_map a:link,.title_site_map a:visited {color: #1F3F5F;text-decoration: none;outline:none;}
.title_site_map a:hover {text-decoration:none;}


ul.site_map
{
	margin:10px 5px 20px;
	width:100%;
}

ul.site_map li{
	font-size:85%;
	list-style: none;
	margin: 0px;
	padding: 5px 5px 5px 20px;
	display: inline-block;
	width:24%;
	background: url(../img/icon02.gif) no-repeat left;
}
.site_map a:active{color:#369;outline:none;}
.site_map a,.site_map a:link,.site_map a:visited {color: #1F3F5F;text-decoration: none;outline:none;}
.site_map a:hover {text-decoration:none;}



/*ボックス
-------------------------------------*/
.box01{
	font-size:100%;
	padding:10px 20px;
	background: url(../img/bg01.png) repeat left;
	color:#000;}

.box02{
	font-size:100%;
	margin:20px 0;
	padding:15px 10px 10px;
	background: #EFEFEF;}


/*画像
-------------------------------------*/
.img_r{
	float:right;
	margin:0 0 10px 10px;}



/*年表
-------------------------------------*/
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 1px #000 solid;
    padding-left: 30px;
	padding-top:20px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #000;
    position: absolute;
    left: 104px;
    top: 25px;
    border-radius: 100%;
  }


/*端末別レイアウト
-------------------------------------*/
.pc_center{text-align:center;}
.pc_right{text-align:right;}
.font_l{font-size:220%;}


}


/*スマホサイズ*/
@media screen and (max-width: 768px){
.header {
	flex-direction: column;
	margin-bottom: 0px;
	background:#FFF;
}
.header #open,#close  {
	position: absolute;
	top: 10px;
	right: 12px;
}
.header_fixed{
	position: fixed;
	box-shadow:2px 2px 4px #666;
	width:100%;
	z-index: 1;}

.space{padding-top:80px;}
nav ul {
	flex-direction: column;
	background-color:#FFF;
}
.header li {
	padding-top: 0;
}

.menu_line_r{border-right:none;}
.menu_line_l{border-left:none;}
.menu_line_b{border-bottom:1px dotted #CCC;}

.midashi{display: none;}

/*アンカー調整*/
#koukan,#valve,#kikai,#kougu,#kensetsu,#dendou,#keiryo,#hose,#kenma,#doboku,#jutaku,#yousetsu,#enkaku,#aisatsu,#customer,#access {margin-top:-90px;padding-top:90px;}


/* スマホ時はMENUボタンを表示 */
#open,#close  {
	display: block;
	width: 50px;
	border: none;
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 1;
}
/* スマホ時はメニューを非表示 */
#navi {
	display: none;
}

.logo_img{max-width:60%;}

}
    
/*メイン画像
-------------------------------------*/
.mainimg img {
	width: 100vw;
}

.slider {
	margin: 0 0 10px;
    padding: 0px 0px;
}
.slider img {
	width: 100vw;
	height: auto;
}
.single-item {
/*	max-width: 600px;*/
	margin: 0 0px 20px;
}
.slick-prev::before, .slick-next::before {
	font-size: 24px;
}

.single-item .slick-prev::before,
.single-item .slick-next::before {
	color: #000;
}
.slick-dots {
	bottom:-25px;
}

/*パンくず
-------------------------------------*/

.pan{
	margin: 0 auto;
	font-size:80%;
	padding:2px 10px;
	max-width: 1200px;
}

.pan a:active{color:#666;outline:none;}
.pan a,.pan a:link,.pan a:visited {color: #666;text-decoration: underline;outline:none;}
.pan a:hover {text-decoration:none;}

/*メインコンテンツ
-------------------------------------*/
main {
	margin: 0 0 0 0;
}
section {
	margin: 0 0;
	padding: 5px 0 10px;
}
.gray-back {
	background-color: #f4f4f4;
}



/*コピーライト
-------------------------------------*/
.copyright {
	text-align: center;
	padding: 1rem 0;
	font-size:75%;
	color:#666;
}


/*ページトップへ戻るボタン
-------------------------------------*/
#pagetop{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #0066CC;
  opacity: 0.6;
}
#pagetop a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#pagetop a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#pagetop a:hover {
	background: #0080FF;
}


/* 幅768px以下の表示　スマホサイズ
-------------------------------------*/
@media screen and (max-width: 768px){
	
/*ヘッダー
-------------------------------------*/

.header-box {
	display: none;
}	

/*テーブル
-------------------------------------*/
.table_w1{
	width:25%;}

table.table01{
table-layout: auto;
	padding:0px;
	width:100%;
	margin:5px 0px 10px 0px;
	border-spacing:0;
	border-collapse:collapse;}

.table01 td{
	border-spacing:0;
	font-size:80%;
	border:1px solid #CCC;
	padding:6px 10px; }

.table01_title{
	background: #EFEFEF ;
	}

table.table02{
table-layout: auto;
	padding:0px;
	width:100%;
	margin:5px 0px 10px 0px;
	border-spacing:0;
	border-collapse:collapse;}

.table02 td{
	border-spacing:0;
	font-size:75%;
	border-top:1px solid #CCC;
	border-bottom:1px solid #CCC;
	padding:7px 3px; }

/*製品案内メニュー*/
table.product_menu{
	table-layout:fixed;
	padding:0px;
	width:100%;
	margin:5px 0px 10px 0px;
	border-spacing:3px;
	border-collapse:separate;}

.product_menu td{
	border-spacing:0;
	font-size:75%;
	text-align:left;
	border:1px solid #036;
 }

.product_menu td a {
	display:block;
	background: url(../img/icon03.gif) no-repeat left;
	width:100%;
	padding-left:22px;
	padding-top:5px;
	padding-bottom:5px;
	padding-right:5px;
	height:100%;}


/*サイトマップ
-------------------------------------*/
.title_site_map{
	font-size:100%;
	margin:5px 0px 15px;
	padding:3px 10px 3px 10px;
	background:#EEE;}

.title_site_map a:active{color:#369;outline:none;}
.title_site_map a,.title_site_map a:link,.title_site_map a:visited {color: #1F3F5F;text-decoration: none;outline:none;}
.title_site_map a:hover {text-decoration:none;}


ul.site_map
{
	margin:10px 5px 20px 20px;
	width:100%;
}

ul.site_map li{
	font-size:80%;
	list-style: none;
	margin: 0px;
	padding: 5px 5px 5px 20px;
	display: block;
	width:100%;
	background: url(../img/icon02.gif) no-repeat left;
}
.site_map a:active{color:#369;outline:none;}
.site_map a,.site_map a:link,.site_map a:visited {color: #1F3F5F;text-decoration: none;outline:none;}
.site_map a:hover {text-decoration:none;}



/*フッター
-------------------------------------*/
footer {
	background: url(../img/footer_bg.jpg) no-repeat top;
	padding: 15px 10px;
	margin-top:30px;
	color:#333;
	border-top:1px dotted #CCC;
	background-size:cover;
}
footer h4 {
	background: url(../img/icon01.gif) no-repeat left;
	font-size:95%;
	padding:3px 3px 3px 15px;
	font-weight:bold;
}

ul.footer_list{
	padding: 5px 10px 0;}

ul.footer_list li{
	display: block;
	padding-right:80px;
	vertical-align:top;
}

ul.footer_link
{
	margin:0px 0 20px;
}

ul.footer_link li{
	font-size:80%;
	list-style: none;
	margin: 0px;
	color:#000;
	padding: 3px 20px 3px 0px;
	display: inline-block;
}

.mt_footer{margin-top:-20px;}

ul.footer_link02{
	padding: 10px 40px;
	text-align:center;
	}

ul.footer_link02 li{
	font-size:75%;
	display: block;
	vertical-align:top;
}
.footer_link a:active{color:#333;outline:none;}
.footer_link a,.footer_link a:link,.footer_link a:visited {color: #333;text-decoration: none;outline:none;}
.footer_link a:hover {text-decoration:underline;}

.footer_link02 a:active{color:#333;outline:none;}
.footer_link02 a,.footer_link02 a:link,.footer_link02 a:visited {color: #333;text-decoration: none;outline:none;}
.footer_link02 a:hover {text-decoration:underline;}

/*画像
-------------------------------------*/

.img_r{
	float:right;
	margin:0 0 10px 10px;
	width:40%;}


/*2列
-------------------------------------*/
.waku{
	width:100%;}

.waku_left{
	float:none;
	padding:0 10px 30px;
	margin-bottom:30px;
	border-bottom:1px solid #999;}

.waku_right{
	padding:0 10px;
	float:none;}

/*グーグルマップ
-------------------------------------*/
.gmap {
  position: relative;
  width: 100%;
  padding-top: 50%;
}
.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*リスト
-------------------------------------*/
ul.customer_list
{
	margin:10px 0px 20px;
	width:100%;
}

ul.customer_list li{
	font-size:75%;
	list-style: none;
	margin: 0px;
	padding: 5px 15px 5px 20px;
	display:  inline-block;
	background: url(../img/icon02.gif) no-repeat left;
}

.customer_list a:active{color:#369;outline:none;}
.customer_list a,.customer_list a:link,.customer_list a:visited {color: #1F3F5F;text-decoration: underline;outline:none;}
.customer_list a:hover {text-decoration:none;}

ul.contact_tel{
	text-align:center;
}

ul.contact_tel li{
	display: block;
	margin:10px 5px;
	padding:10px 10px;
	background: #FFF;
}


ul.top_contents{
	width:100%;
	padding:0;
	margin:0px auto;
	text-align:center;	}

ul.top_contents li{
	list-style: none;
	padding: 3px 5px;
	display: block;
	margin-bottom:25px;
	vertical-align:top;
	width:100%;
}
ul.top_contents p{	text-align:left;}


/*製品案内画像*/
ul.product_img
{
	margin:10px auto 50px;
	width:100%;
	text-align:center;
}
ul.product_img li{
	list-style: none;
	margin: 0px;
	padding: 3px 3px;
	display: inline-block;
	width:30%;
}



/*タイトル
-------------------------------------*/
.title01{
	font-size:90%;
	border-bottom:1px dotted #999;
	text-align:center;
	background:#EEE;
	padding:2px 0;}

.title02{
	font-size:100%;
	margin:35px 0 15px;
	border-bottom:1px solid #999;
	padding:4px 0;
	font-weight:bold;
	color:#000;}

.title03{
	font-size:100%;
	margin:35px 10px 20px;
	border-left:5px solid #036;
	padding:3px 10px;
	color:#036;}

/*ボックス
-------------------------------------*/
.box01{
	font-size:100%;
	padding:15px 20px;
	background: url(../img/bg01.png) repeat left;
	color:#000;}

.box02{
	font-size:100%;
	margin:20px 0;
	padding:5px 5px 5px;
	background: #EFEFEF;}



/*年表
-------------------------------------*/
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 40px;
}


/*端末別レイアウト
-------------------------------------*/
.pc_center{text-align:left;}
.pc_right{text-align:left;}
.font_l{font-size:140%;}
.sp_mt25{margin-top:25px;}

}