/*
Theme Name: オモエ
Theme URI: 
*/


/* ＰＣスタイル*/
















/*
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
**********************************************************************************************************
*************************************************************************************************************/




/* ＰＣスタイル*/




@charset "utf-8";
@media (min-width: 1081px)  {

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#666666;
}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#999;
}


/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post{zoom: 1;}


/* フォーム
------------------------------------------------------------*/
input[type="text"], textarea{
vertical-align:middle;
max-width:90%;
line-height:30px;
height:30px;
padding:1px 5px;
border:1px solid #d4d4d7;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size:100%;
color:#555;
background:#fcfcfc;
}

textarea{
height:auto;
line-height:1.5;
}

input[type="submit"],input[type="reset"],input[type="button"]{
padding:3px 10px;
background: #2a588b;
background: -moz-linear-gradient(top, #2a588b 0%, #214a78 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a588b), color-stop(100%,#214a78));
background: -webkit-linear-gradient(top, #2a588b 0%,#214a78 100%);
background: -o-linear-gradient(top, #2a588b 0%,#214a78 100%);
background: -ms-linear-gradient(top, #2a588b 0%,#214a78 100%);
background: linear-gradient(to bottom, #2a588b 0%,#214a78 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a588b', endColorstr='#214a78',GradientType=0 );
border:0;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
line-height:1.5;
font-size:100%;
color:#fff;
}

input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{
background: #2a588b;
background: -moz-linear-gradient(top, #214a78 0%, #2a588b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#214a78), color-stop(100%,#2a588b));
background: -webkit-linear-gradient(top, #214a78 0%,#2a588b 100%);
background: -o-linear-gradient(top, #214a78 0%,#2a588b 100%);
background: -ms-linear-gradient(top, #214a78 0%,#2a588b 100%);
background: linear-gradient(to bottom, #214a78 0%,#2a588b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#214a78', endColorstr='#2a588b',GradientType=0 );
}

*:first-child+html input[type="submit"]{padding:3px;}




.post{
margin:0 0 20px 0;
padding:10px;
border:0px solid #ccc;
}


.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}

#fuwafuwa{
transition: 1.0s;


}

.list-mv07{
	opacity: 0;
	transform: translate(200px,0px); 
	-webkit-transform: translate(200px,0px); 
}
.mv07{
	opacity: 0.7;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



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

.animation {
}

.animation2 {
}

.animation3 {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}




/* レイアウト
------------------------------------------------------------*/
#wrapper, .inner{
margin:0 auto;
width:960px;
}

#header{
overflow:hidden;
background: #E4E0D4;
}

#content{
float:left;
width:980px;
padding:30px 0;
}



#sidebar{
/* float:right;
width:180px;
padding:30px 0;
background-color:#72A010;*/

}

#footer{
clear:both;
padding-top:20px;
border-bottom:1px solid #ccc;
background:#EFD487;
} 


/* ヘッダー
*****************************************************/

#midashi {
margin:0px;
	
	
	color:#FFFFFF;
	background-color:#000000;
	width:100%;
	padding:0;
}


#midashi h1{
	font-size:9px;
	margin:0px;
	padding:0;
}

#unit_header_3{
width:100%;
height:auto;
background-color:#F0F0F0;
}

.inner03{
position:relative;
width:1080px;
height:80px;
margin-left:auto;
margin-right:auto;
padding-top:44px;
background-color:#F0F0F0;

}

#info_box{
width:300px;
height:100px;

position:absolute;
top:40px;
left:528px;

}

.bun001{
font-size:24px;
letter-spacing:0.2em;
}

.bun002{
font-size:14px;
}


#info_box2{
width:200px;
height:30px;
background-color:#000000;
color:#FFFFFF;
padding-top:5px;

position:absolute;
top:40px;
left:800px;
text-align:center;


}

#info_box2 a{
color:#FFFFFF;
}

#info_box2 a:hover{
text-decoration:underline;
}



#unit_header_3 .add_style{
float:left;
margin-bottom:12px;
margin-left:130px;
}

#top_parts1{
margin-top:10px;
position:absolute;
top:-10px;
right:850px;
z-index:10;


}

#head_section01{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:50;

}



/*---メニュー---------*/

#head_menu{
width:100%;
height:auto;
background-color:#00863B;
}


#head_inn{
display: flex;
justify-content: center;
}

#head_inn li{
position: relative;
list-style-type: none;
padding-top:10px;
padding-bottom:10px;
text-align: center;
}

#head_inn li a{
display : block;
	color : #fff;
      
        font-size : 14px;
		
		
padding:5px 40px 5px;
border-left:1px dashed #fff;
border-right:1px dashed #fff;
}


#head_inn li+ li a{
border-left:0;
border-right:1px dashed #fff;
}



















/* トップページ　メインコンテンツ
----------------------------------*/

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

#main_gazou99{
width:100%;
height:auto;
position:relative;
}


#main_gazou99 img{
width: 100%;
 height:calc(100vh - 140px);
  object-fit: cover; /* この一行で縦横比維持しはみ出た分カット */
}



#pc_mobile_gazou{
display:none;
}


/* ぼかしから出現 */
.blur3{
	animation-name:blurAnime3;
	animation-duration:3s;
	animation-fill-mode:forwards;
	visibility: visible !important;
}

@keyframes blurAnime3{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}


#mi_setumei01{
position:absolute;
width:800px;
height:auto;
top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)!important;


text-align:center;
}


#top_abus_box0 h2{
font-size:60px;
color:#fff;
letter-spacing:0.2em;
display:block;
letter-spacing:0.2em;

/*text-shadow: 横　縦　ぼかし度　色; */		
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.9);
	-moz-text-shadow:1px 2px 3px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 01px 2px 3px rgba(0, 0, 0, 0.6);
	
	
}


#top_abus_box0 h2 span{
display:block;
}


#main_box{
position:relative;
width:100%;
height:auto;

/*background-color:#FFFFCC;*/
margin-top:30px;
z-index:10;

}





#main_box_right{
width:100%;
max-width:1080px;
margin-right: auto;
margin-left: auto;
padding-top:15px;
height:auto;
position:relative;
z-index:1;
/*background-color:#B6F5FE;*/


}



.midashi_h2_02{
margin-top:25px;
width:100%;
height:40px;
background-color:#00863B;
color:#FFFFFF;

border-left-width: 10px;
border-left-style: solid;
border-left-color: #46A12F;
padding-top:15px;
padding-left:20px;
margin-bottom:20px;

}



.midashi_h2_01{
width:672px;
background-color:#f4f4f4;
padding-top:10px;
text-indent:2em;
padding-bottom:10px;
border-width :1px;
border-style: solid;
border-color:#eeeeee;
font-size:16px;
margin-bottom:30px;
background-image:url(images/arrow.png);
background-repeat: no-repeat;
background-position: 18px 15px;/*左位置　上位置*/

margin-left:50px;

}


table.unit_type01 {
	border-collapse: collapse;
	text-align: left;
	border-top: 1px solid #ccc;
	
	font-size:11px;

}


table.unit_type01 td {
padding:10px;
border-bottom: 1px solid #ccc;
	
}



/*  3カラムを横にデザイン*/
#syouhin_row{
display: flex;
flex-wrap: wrap;
justify-content: space-between;

width:100%;
margin-bottom:15px;

}

#syouhin_gazou{
width:100%;
height:auto;

}

#syouhin_gazou img{
width:100%;
height:auto;
}

#syouhin_box{
width:30%;
height:auto;
margin-bottom:25px;
text-align:center;
}






#syouhin_box h3{
margin-top:10px;
padding-bottom:10px;
font-size:12px;

}


#syouhin_box a{
color:#000000;
text-decoration:underline;
letter-spacing:0.2em;

}


#naname_box{
	display:block;
	width:100%;
	height:auto;
	padding-top:100px;
	background-color:#00863B;
	clip-path:polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	padding-bottom:100px;
	color:#FFFFFF;
}


#naname_box_in{
width:100%;
max-width:1080px;
margin-top:100px;
margin-right: auto;
margin-left: auto;
text-align:center;
}


.naname_img{
margin-bottom:50px;

}

#naname_box_in img{
width:100%;
max-width:600px;
height:auto;

 

}



/*---取り扱い品目紹介---------*/

#gyoumu_box{
width:100%;
height:auto;
position:relative;
}

#gyoumu_box img{
width:100%;
height:auto;
}


#gyoumu_inn_wara{
position:absolute;
width:80%;
max-width:900px;
height:auto;
margin-right: auto;
margin-left: auto;
padding-top:50px;


 top: 10%;
  left: 50%;
  transform: translateY(0%) translateX(-50%);/*ここで戻しているのがポイント*/

background-color:#FFFFFF;
}

/* 見出しの左右の横棒*/
.title-border {
font-size:24px;
width:50%;
margin-right: auto;
margin-left: auto;
letter-spacing:0.2em;

margin-bottom:50px;
display: flex;
align-items: center;

}
.title-border:before,
.title-border:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border:before {
margin-right: 2em;
}
.title-border:after {
margin-left: 2em;
}


#gyoumu_inn_box_row{
width:100%;
height:auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around; 
}


#gyoumu_inn_box{
width:40%;
height:auto;
margin-bottom:25px;

}

#gyoumu_inn_box img{
width:100%;
height:auto;


}


/*取り扱いメーカー*/
#maker_erea{
width:100%;
height:auto;
max-width:1080px;
margin-right: auto;
margin-left: auto;
font-size:16px;
margin-top:80px;
margin-bottom:180px;

padding-top:50px;
}

#maker_wara{
width:100%;
height:auto;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom:50px;
}


#maker_box{
width:20%;
height:auto;
text-align:center;
}


#maker_box img{
width:100%;
height:auto;
}

#maker_name{
margin-top:10px;
}


#maker_name a{
color:#C57D85;
text-decoration:underline;
}



/* TOPページの業務内容紹介部分
*****************************************************/
#main_aisatu{
width:890px;
margin-top:100px;
margin-bottom:50px;
margin-right: auto;
margin-left: auto;
}

#main_aisatu_gazou{
float:left;
width:345px;
height:230px;
}

#main_aisatu_gazou img{
float:left;
width:100%;
height:auto;
}



#main_aisatu_bunsyou{
float:right;
width:530px;
height:230px;

}

#main_aisatu_bunsyou p{
font-size:14px;
line-height:2em;
margin-bottom:10px;
}






/* TOPページ　メイン下のお問合せ
*****************************************************/

.midashi_h2_03{
width:469px;
background-color:#1F8828;
padding-top:10px;
text-indent:2em;
padding-bottom:10px;
font-size:16px;
color:#FFFFFF;
margin-bottom:0px;
background-image:url(images/arrow2.png);
background-repeat: no-repeat;
background-position: 18px 15px;/*左位置　上位置*/

margin-left:0px;

}


/*内容
*****************************************************/
#two_box{
width:100%;
height:auto;
max-width:1080px;
margin-right: auto;
margin-left: auto;
font-size:16px;


}

.two_box_01{
font-size:16px;
margin-bottom:10px;
font-weight:bold;
text-align:center;
}

.two_box_02{
margin-left:170px;
text-indent:1em;
}


#two_box h3{
font-size:16px;
font-weight:bold;
color:#FF6600;
margin-top:40px;
margin-bottom:15px;
}




/*---会社概要-----------*/



#kaisya_box_1{

padding-top:60px;
width:980px;
height:auto;
margin-top:100px;
margin-left:auto;
margin-right:auto;
margin-bottom:50px;
padding-bottom:100px;


}

.kaisya_midashi{
text-align:center;
font-size:28px;
margin-bottom:30px;
color:#333333;

}




#kaisya_box_1 table{

width:800px;
margin-left:auto;
margin-right:auto;
color:#333333;

border-width: 1px;
border-style: solid;
border-color:#CCC;
background-color:#FFFFFF;


}

.title1_3{


text-align:center;


}

#kaisya_box_1 table th{   /*���ڍs */
height:auto;
width:150px;

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;

border-right-width: 1px;
border-right-style: solid;
border-right-color:#ccc;

text-align: center;
vertical-align:middle;
}

#kaisya_box_1 table tr{   /*1�s */
	height:auto;



}

#kaisya_box_1 table tr:nth-child(1) {  /*nth-child(1)�͂P���(1�s�ځj�̈Ӗ� */




}

#kaisya_box_1 table td{   /*1�� */
height:auto;


vertical-align:middle;
padding-top:5px;
padding-bottom:5px;


}


#kaisya_box_1 table td span{
display:block;


}


#kaisya_box_1 table tr td:nth-child(1) {  /*nth-child(1)�͂P��ڂ̈Ӗ� */

text-align:center;
width:180px;
color:#333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}

#kaisya_box_1 table tr td:nth-child(2) {  /*nth-child(2)��2�あああ�ڂ̈Ӗ� */

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;

}



.kaisya_td01{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}


.kaisya_td02{
text-align:center;
}

#copyright{
width:100%;
height:auto;
text-align:center;
font-size:14px;
}



}
























































































@media (min-width: 5px) and (max-width: 997px) {

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}


/* リンク設定
------------------------------------------------------------*/
a{
margin:0;
padding:0;
text-decoration:none;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#666666;
}

a:hover, a:active{
-webkit-transition:opacity 1s;-moz-transition:opacity 1s;-o-transition:opacity 1s;
outline: none;
color:#999;
}


/**** Clearfix ****/
nav .panel:after, nav#mainNav:after, .newsTitle:after, .bg:after,.post:after{content:""; display: table;clear: both;}
nav .panel,nav#mainNav,.newsTitle,.bg, .post{zoom: 1;}


/* フォーム
------------------------------------------------------------*/
input[type="text"], textarea{
vertical-align:middle;
max-width:90%;
line-height:30px;
height:30px;
padding:1px 5px;
border:1px solid #d4d4d7;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
font-size:100%;
color:#555;
background:#fcfcfc;
}

textarea{
height:auto;
line-height:1.5;
}

input[type="submit"],input[type="reset"],input[type="button"]{
padding:3px 10px;
background: #2a588b;
background: -moz-linear-gradient(top, #2a588b 0%, #214a78 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a588b), color-stop(100%,#214a78));
background: -webkit-linear-gradient(top, #2a588b 0%,#214a78 100%);
background: -o-linear-gradient(top, #2a588b 0%,#214a78 100%);
background: -ms-linear-gradient(top, #2a588b 0%,#214a78 100%);
background: linear-gradient(to bottom, #2a588b 0%,#214a78 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a588b', endColorstr='#214a78',GradientType=0 );
border:0;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
line-height:1.5;
font-size:100%;

}

input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{
background: #2a588b;
background: -moz-linear-gradient(top, #214a78 0%, #2a588b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#214a78), color-stop(100%,#2a588b));
background: -webkit-linear-gradient(top, #214a78 0%,#2a588b 100%);
background: -o-linear-gradient(top, #214a78 0%,#2a588b 100%);
background: -ms-linear-gradient(top, #214a78 0%,#2a588b 100%);
background: linear-gradient(to bottom, #214a78 0%,#2a588b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#214a78', endColorstr='#2a588b',GradientType=0 );
}

*:first-child+html input[type="submit"]{padding:3px;}




.post{
margin:0 0 20px 0;
padding:10px;
border:0px solid #ccc;
}


.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=40);
  -ms-filter: "alpha(opacity=40)";
}

#fuwafuwa{
transition: 1.0s;


}

.list-mv07{
	opacity: 0;
	transform: translate(200px,0px); 
	-webkit-transform: translate(200px,0px); 
}
.mv07{
	opacity: 0.7;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


/*--------------------------*/
/*すぐフワ*/
.sugu_huwa{
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown_sugu;
 visibility: visible !important;/*ここ重要*/
}


@-webkit-keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}
@keyframes fadeInDown_sugu {
 0% { opacity: 0; 
 transform: translateX(0px);
 }
 100% { opacity: 1;
 transform: translateX(0px);
 }
}



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

.animation {
}

.animation2 {
}

.animation3 {
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
/*----スピード調整はこちらで----*/
-webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown5;
 animation-name: fadeInDown5;
 visibility: visible !important;/*ここ重要*/
}
@-webkit-keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown5 {
 0% { opacity: 0; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


/* レイアウト
------------------------------------------------------------*/



#sidebar{
/* float:right;
width:180px;
padding:30px 0;
background-color:#72A010;*/

}

#footer{
clear:both;
padding-top:20px;
border-bottom:1px solid #ccc;
background:#EFD487;
} 


/* ヘッダー
*****************************************************/

#midashi {
margin:0px;
	
	
	color:#FFFFFF;
	background-color:#000000;
	width:100%;
	padding:0;
}


#midashi h1{
	font-size:9px;
	margin:0px;
	padding:0;
}

#unit_header_3{
width:100%;
height:auto;
background-color:#F0F0F0;
}

.inner03{
position:relative;
width:100%;
height:40px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
background-color:#F0F0F0;

}

#info_box{
display:none;

}

.bun001{
font-size:24px;
letter-spacing:0.2em;
}

.bun002{
font-size:14px;
}


#info_box2{
display:none;


}

#info_box2 a{
color:#FFFFFF;
}

#info_box2 a:hover{
text-decoration:underline;
}



#unit_header_3 .add_style{
width:80%;
height:auto;
margin-right: auto;
margin-left: auto;
}

#unit_header_3 .add_style img{
width:100%;
height:auto;

}


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

/*ハンバーガーをクリックすると展開するメニュー----------------------*/


#g-nav{
position:fixed;
top: 40px;
right:10px;
width:60px;
height:60px;
z-index:100;

background-color:rgba(255,255,255,0.9);
border-width: 1px;
border-style: solid;
border-color: #000;
border-radius: 5px;

}


#g-nav.panelactive{
width:100%;
left:0px;
}


#head_menu{
 position:absolute;
 top:60px;
 left:0px;
	width:100%;
    height:calc(100vh - 140px);
background-color:rgba(0,0,0,0.85);

display: flex;
align-items: center;
justify-content: center;
z-index:999;

	text-align: center;



		-webkit-transition: opacity 1s, visibility 0s ease 1s;
      -moz-transition: opacity 1s, visibility 0s ease 1s;
      -ms-transition: opacity 1s, visibility 0s ease 1s;
      -o-transition: opacity 1s, visibility 0s ease 1s;
      transition: opacity 1s, visibility 0s ease 1s;;
      opacity: 0;
	  visibility: hidden;



}



/*アクティブクラスがついたら透過なしにして最前面へ*/
#head_menu.panelactive{

	transition-delay: 0s;/*safari対策らしい*/
opacity: 1;
visibility: visible;


}

#head_logo{
display:none;
}


#head_logo_mob{
width:50%;
height:auto;
margin-right: auto;
margin-left: auto;
margin-top:10px;
}



#head_logo_mob img{
width:100%;
height:auto;

}



#head_inn{
width:100%;
height:auto;
}

.head_menu_btn{
    position:relative;

width:100%;
height:60px;
font-weight:bold;




box-sizing: border-box;

}

.head_menu_btn span{

}


.head_menu_btn a{


	   display: flex;
align-items: center;
justify-content: center;

  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

transition: 0.5s;
letter-spacing:0.1em;
color:#FFFFFF;

}


.head_menu_btn a:hover{
background-color:#FFFFFF;
color:#000000;
transition: 0.5s;
text-decoration:none;
}

/*========= ハンバーガー部分===============*/
.openbtn{
	position:absolute;
    z-index: 888;/*ボタンを最前面に*/
	top:1px;
	right: 15px;
	cursor: pointer;

    width: 65px;
    height:85px;



}

/*×に変化*/
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 32px;
    height: 3px;

	background-color:#000000;
  	width: 60%;
  }

.openbtn span:nth-of-type(1) {
	top:10px;
}

.openbtn span:nth-of-type(2) {
	top:28px;
}

.openbtn span:nth-of-type(3) {
	top:46px;
}

.openbtn.active span:nth-of-type(1) {
    top: 25px;
    left: 22px;
    transform: translateY(6px) rotate(-45deg);
    width: 60%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 37px;
    left: 22px;
    transform: translateY(-6px) rotate(45deg);
    width: 60%;
}



/*------スマホメニューここまで---------*/









/* トップページ　メインコンテンツ
----------------------------------*/




#pc_gazou{
display:none;
}

#pc_mobile_gazou{
width:100%;
height:auto;
}

#pc_mobile_gazou img{
width: 100%;
 height:calc(100vh - 140px);
  object-fit: cover; /* この一行で縦横比維持しはみ出た分カット */
}



/* ぼかしから出現 */
.blur3{
	animation-name:blurAnime3;
	animation-duration:3s;
	animation-fill-mode:forwards;
	visibility: visible !important;
}

@keyframes blurAnime3{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}


#mi_setumei01{
position:absolute;
width:100%;
height:auto;
top: 35%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%)!important;


text-align:center;
}


#top_abus_box0 h2{
font-size:20px;
color:#fff;
letter-spacing:0.2em;
display:block;
letter-spacing:0.2em;

/*text-shadow: 横　縦　ぼかし度　色; */		
text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.9);
	-moz-text-shadow:1px 2px 3px rgba(0, 0, 0, 0.6);
	-webkit-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-o-text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
	-ms-text-shadow: 01px 2px 3px rgba(0, 0, 0, 0.6);
	line-height:3em;
	
	
}


#top_abus_box0 h2 span{
display:block;
}


#main_box{
position:relative;
width:100%;
height:auto;

/*background-color:#FFFFCC;*/
margin-top:0px;
z-index:50;

}




#main_box_left{
display:none;
}

#main_box_left img{
margin-bottom:10px;

}


#main_box_right{
width:100%;
height:auto;
padding-top:15px;
/*background-color:#B6F5FE;*/


}

.midashi_h2_01{
width:100%;
height:auto;

background-color:#f4f4f4;
padding-top:10px;
text-indent:2em;
padding-bottom:10px;
border-width :1px;
border-style: solid;
border-color:#eeeeee;
font-size:16px;
margin-bottom:30px;
background-image:url(images/arrow.png);
background-repeat: no-repeat;
background-position: 18px 15px;/*左位置　上位置*/

}


table.unit_type01 {
	border-collapse: collapse;
	text-align: left;
	border-top: 1px solid #ccc;
	
	font-size:11px;

}


table.unit_type01 td {
padding:10px;
border-bottom: 1px solid #ccc;
	
}



/*  3カラムを横にデザイン*/
#syouhin_row{
width:100%;
height:auto;
margin-bottom:15px;

}

#syouhin_gazou{
width:90%;
height:auto;
margin-right: auto;
margin-left: auto;

}

#syouhin_gazou img{
width:100%;
height:auto;
}

#syouhin_box{
width:100%;
height:auto;
margin-bottom:25px;
color:#333333;
text-align:center;
}



#syouhin_box+ #syouhin_box{/*  ２つめ以降の#unit_0072_box200にだけマージンを設定*/

}


#syouhin_box h3{
margin-top:10px;
padding-bottom:0px;
font-size:14px;

}





/* TOPページの新着情報
*****************************************************/

.midashi_h2_02{
margin-top:25px;
width:90%;
height:40px;
margin-right: auto;
margin-left: auto;
background-color:#00863B;

border-left-width: 10px;
border-left-style: solid;
border-left-color: #46A12F;
padding-top:15px;
padding-left:20px;
margin-bottom:20px;

}


.text_blog{

width:100%;
height:auto;

	
padding-top:5px;


padding-bottom:45px;
color:#000000;



/* border-width: 2px;
	border-style: solid;
	border-color:#CCCCCC; */


margin-bottom:25px;
/* box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:10px 10px 10px -5px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.2); */
}



#blog_box{

width:100%;
height:auto;


border-top-width: 2px;
	border-top-style: solid;
	border-top-color:#999999;
	margin-top:10px;
border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color:#999999;
	margin-bottom:10px;

}

#blog_box li{

border-bottom-width: 1px;
	border-bottom-style:dashed;
	border-bottom-color:#999999;
	
	padding-bottom:0px;
	height:35px;
	
}

#blog_box li a{
color:#000000;
}

#blog_box li:first-child{

}

.sintyaku_time{
background-color:#F3F3F3;
display:block;
width:150px;
padding-top:8px;
height:27px;
float:left;
padding-left:15px;

}

.sintyaku_bun{
display:block;
padding-top:8px;
height:27px;
float:left;
padding-left:15px;

}



/* TOPページ　メイン下のお問合せ
*****************************************************/

.midashi_h2_03{
width:100%;
height:auto;

background-color:#1F8828;
padding-top:10px;
text-indent:2em;
padding-bottom:10px;
font-size:16px;

margin-bottom:0px;
background-image:url(images/arrow2.png);
background-repeat: no-repeat;
background-position: 18px 15px;/*左位置　上位置*/

margin-left:0px;

}


/* 2ページ　内容
*****************************************************/
#two_box{
width:100%;
height:auto;
max-width:1080px;
margin-right: auto;
margin-left: auto;
font-size:16px;
background-color:#99CCCC;
}

#two_box img{
width:100%;
height:auto;
}

.two_box_01{
font-size:16px;
font-weight:bold;
text-align:left;
width:90%;
margin-right: auto;
margin-left: auto;
}

.two_box_02{

text-indent:1em;
}


#two_box h3{
font-size:16px;
font-weight:bold;
color:#FF6600;
margin-top:40px;
margin-bottom:15px;
}


/* 紹介ページ
*****************************************************/


/* ブログ部分
*****************************************************/

/* トップページ 最新記事3件
------------------------------------------------------------*/




/* ＴＯＰページ業務内容紹介
------------------------------------------------------------*/




/* 工事施工　一覧
*****************************************************/



/* 日記　個別ページ
*****************************************************/




/* サイドバー　ウィジェット
*****************************************************/
section.widget, .widgetInfo{
margin: 0 0 20px;
padding: 10px 7px;
border:0px solid #dadada;
color:#FAF9F9;
}

#banners img{
max-width:225px;
height:auto;
padding-bottom:10px;
}

section.widget h3{
clear:both;
margin:0 0 10px;
padding:5px 0;
font-size:100%;
font-weight:normal;
color: #FAF9F9;
border-bottom:1px solid #ccc;
}

section.widget a{
display:block;
padding:3px 0 3px 13px;
text-decoration:underline;
background:url(images/arrow.png) no-repeat 0 50%;
    color: #FAF9F9;
}

section.widget a:hover{
text-decoration:none;
background-position: 3px 50%;
}

#searchform input[type="text"]{
line-height:1.7;
height:24px;
width:100px;
vertical-align:bottom;
}


/* お知らせ　
-------------*/
.newsTitle{
clear:both;
margin:0 0 20px;
padding:5px 0;
font-size:100%;
color: #FAF9F9;
border-bottom:1px solid #ccc;
}

.newsTitle h3{
float:left;
font-weight:normal;
}

.newsTitle p{
float:right;
padding:0 0 0 10px;
font-size:.8em;
background:url(images/arrow.png) no-repeat 0 50%;
}

.news p{
clear:both;
padding-bottom:2px;
border-bottom: 1px solid #ccc;
}

.news p:last-child{border:0;}

.news p a{
display:block;
padding:5px 0;
color:#FAF9F9;
font-style:italic;
font:italic 110% "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.news a span{
color:#ccc;
font:normal 90% Arial, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
}

.news span{padding-left:10px;}

.news a:hover span{color:#777;}



/* フッター
*****************************************************/
#footer ul{
padding-bottom:10px;
}

#footer ul li{
display:inline-block;
vertical-align:text-top;
text-align:left;
padding:5px 0;
margin-right:60px;
background:url(images/arrow.png) no-repeat 0 12px;
}

#footer ul li	a{
display:block;
padding:0 0 0 12px;
overflow:hidden;
color:#000;
}

#footer ul li	a:hover{text-decoration:underline;}

#footer ul li li{
display:block;
padding:0;
margin:0 0 0 10px;
background-position:0 5px;
}


*:first-child+html #footer ul li{display:inline;}
*:first-child+html #footer ul ul,*:first-child+html #footer ul li li a,*:first-child+html #footer ul li li{display:none;}

#copyright{
clear:both;
padding:10px;
text-align:center;
font-size:75%;
zoom:1;
color:#fff;
background:#000;
}


/* page navigation
------------------------------------------------------------*/
.pagenav{
clear:both;
width: 100%;
height: 30px;
margin: 5px 0 20px;

}



.prev{float:left

}

.next{float:right;

}

#pageLinks{
clear:both;

text-align:center;
}


/* 会社ページ
*****************************************************/



/* 問合せぺージ
*****************************************************/


#contact_box{
width:100%;
height:auto;
/*background-color:#f4fafa; */
padding-top:20px;
padding-bottom:20px;

/* color:#183C61;　 */
margin-left:auto;
margin-right:auto;
margin-bottom:50px;




}


#contact_box_2{
width:100%;
height:auto;

margin-left:auto;
margin-right:auto;

padding-top:30px;
color:#333333;
text-align:center;


}


#contact{
width:100%;
height:auto;

margin-left:auto;
margin-right:auto;
text-align:left;
margin-bottom:30px;


}


/*placeholder（例文）のスタイル*/
/*Webkit*/
::-webkit-input-placeholder {color:#CCCCCC;font-weight:normal;}
/*Firefox 19以降*/
::-moz-placeholder  {color:#CCCCCC;font-weight:normal;}
/*Firefox 18以前*/
:-moz-placeholder   {color:#CCCCCC;font-weight:normal;}
/*Windows IE*/
:-ms-input-placeholder  {color:#CCCCCC;font-weight:normal;}


.wpcf7-form-control{  /*問合せテキストボックス*/
 border: 1px solid #999999;
  border-radius: 5px;
  padding: 5px;
  color:#333333;
  font-size:20px;
} 

.wpcf7 input[type="text"],　　/*お問い合わせフォームの各ボックス*/
.wpcf7 input[type="email"],
.wpcf7 textarea {
	background-color: #fff;
	color: #333;
	width: 95%;
	border: 1px solid #999;
	font-size: 100%;
	padding: 0.5em;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
}



.wpcf7-form-control:focus{　　/*問合せテキストボックスクリック時*/

  border: solid 2px #666;

  outline: 0;
  box-shadow: 0px 0px 15px rgba(102,102,102,0.2);
  transition: all 0.5s;　/*変化の時間*/

}


p input.wpcf7-submit{ /*送信ボタンの書式*/
margin-top:20px;
background-color:#337ab7;
color:#FFFFFF;

}

.wpcf7-text{ /*問合せボックスの文字の書式*/
font-size:14px;
padding:10px;
border: 1px solid #999999;

}






/* ブログ一覧ページ
*****************************************************/




.blog_title a:hover{
color:#CCCCCC;

}

#conent_box{


}

#content-box_left{
float:left;

}

#content-box_right{
width:100%;
height:auto;
padding-top:30px;

font-size:16px;

}



#naname_box{
	display:block;
	width:100%;
	height:auto;
	padding-top:100px;
	background-color:#00863B;
	clip-path:polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	padding-bottom:100px;
	color:#FFFFFF;
}


#naname_box_in{
width:100%;
max-width:1080px;
margin-top:100px;
margin-right: auto;
margin-left: auto;
text-align:center;
}


.naname_img{
margin-bottom:50px;

}

#naname_box_in img{
width:100%;
max-width:600px;
height:auto;

 

}



/*---取り扱い品目紹介---------*/

#gyoumu_box{
width:100%;
height:auto;


}

#gyoumu_box img{
width:100%;
height:auto;
}


#gyoumu_inn_wara{

width:80%;

height:auto;
margin-right: auto;
margin-left: auto;
background-color:#FFFFFF;
}

.title-border{
font-size:24px;
color:#76520D;
width:90%;
height:35px;
margin-left:5%;
margin-right:5%;

margin-bottom:15px;
display: flex;
align-items: center;
}

/* 見出しの左右の横棒*/
.title-border {


}
.title-border:before,
.title-border:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border:before {
margin-right: 2em;
}
.title-border:after {
margin-left: 2em;
}


#gyoumu_inn_box_row{
width:100%;
height:auto;

}





/*取り扱いメーカー*/
#maker_erea{
width:100%;
height:auto;

font-size:16px;
margin-top:80px;
margin-bottom:180px;

padding-top:50px;
}

#maker_wara{
width:100%;
height:auto;

}


#maker_box{
width:80%;
height:auto;
text-align:center;
margin-right: auto;
margin-left: auto;
}


#maker_box img{
width:100%;
height:auto;
}

#maker_name{
margin-top:10px;
}


#maker_name a{
color:#C57D85;
text-decoration:underline;
}



/*---会社概要-----------*/



#kaisya_box_1{

padding-top:0px;
width:100%;
height:auto;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
padding-bottom:0px;


}

.kaisya_midashi{
text-align:center;
font-size:28px;
margin-bottom:30px;
color:#333333;

}




#kaisya_box_1 table{

width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
color:#333333;

border-width: 1px;
border-style: solid;
border-color:#CCC;
background-color:#FFFFFF;


}

.title1_3{


text-align:center;


}

#kaisya_box_1 table th{   /*���ڍs */
height:auto;
width:150px;

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;

border-right-width: 1px;
border-right-style: solid;
border-right-color:#ccc;

text-align: center;
vertical-align:middle;
}

#kaisya_box_1 table tr{   /*1�s */
	height:auto;



}

#kaisya_box_1 table tr:nth-child(1) {  /*nth-child(1)�͂P���(1�s�ځj�̈Ӗ� */




}

#kaisya_box_1 table td{   /*1�� */
height:auto;


vertical-align:middle;
padding-top:5px;
padding-bottom:5px;


}


#kaisya_box_1 table td span{
display:block;


}


#kaisya_box_1 table tr td:nth-child(1) {  /*nth-child(1)�͂P��ڂ̈Ӗ� */

text-align:center;
width:180px;
color:#333333;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}

#kaisya_box_1 table tr td:nth-child(2) {  /*nth-child(2)��2�あああ�ڂ̈Ӗ� */

border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;

}



.kaisya_td01{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color:#CCC;
padding-left:1em;
}


.kaisya_td02{
text-align:center;
}


/* TOPページの挨拶
*****************************************************/
#main_aisatu{
width:100%;
height:auto;
margin-top:130px;
}



#main_aisatu_gazou{
width:100%;
height:230px;
}


#main_aisatu_bunsyou{
width:100%;
height:auto;
height:230px;

}

#main_aisatu_bunsyou p{
font-size:14px;
line-height:2em;
margin-bottom:10px;
text-align:center;
}


#main_aisatu_gazou{
width:100%;
height:auto;
}

#main_aisatu_gazou img{
width:100%;
height:auto;
}





}