@charset "UTF-8";
/*
Theme Name:Houeikouki theme
Author: Houeikouki
Description: Houeikouki  theme.
Version: 1.0
*/

*{
 margin: 0;
 padding: 0;
}

body{
word-wrap: break-word;

}


html {
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  font-size : 100%;
  line-height : 1.5;
background: #1A1A1A;
color: #fff;
}

h1,h2,h3,h4,h5,h6 {
 margin-bottom : 1em;
}

h1 {
font-size : 36px; 
line-height : 1.2;
} /* 48px */

h2 {
font-size : 24px;
line-height : 1.2;
font-weight: normal;
} /* 48px */

h3 {
font-size : 24px;
line-height : 1.2;
} /* 24px */



ul, ol {
	  list-style : none;
	  }
img { 
         vertical-align : middle;
         max-width: 100%;
         height: auto;
         }

p{
    line-height: 2em;
}





a{
 text-decoration: none;
 color:#fff;
 transition: 0.4s ease-in-out;  
}

a:hover {  
    opacity: 0.5;  
    filter: alpha(opacity=60);  
} 


/* text */

.left{
 text-align: left;
}

.right{
 text-align: right;
}

.center{
 text-align: center;
}

.bold{
 font-weight: bold;
}


.small{
 font-weight: normal;
 font-size: 0.8em;
}

.big{
 font-weight: bold;
 font-size: 1.3em;
}


.container{
max-width: 1000px;
margin: 0 auto;
padding-left: 3em;
padding-right: 2em;
box-sizing: border-box;
}





/*ナビゲーション*/

		nav{
		    
		display: none;
		position: fixed;
		top:0px;
		width: 100%;
		height: 100%;
		background: #2b2b2b;
		left: 0;
				z-index: 99;
		}
		

	
	#nav_toggle{
		display: block;
		width: 25px;
		height: 25px;
	position: fixed;
		top: 5px;
				left: 10px;
		z-index: 100;
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span{
		display: block;
		height: 2px;
		background: #fff;
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition: 0.3s ease-in-out;
		transition: 0.3s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:8px;
	}
	#nav_toggle span:nth-child(3){
		top:16px;
	}
	
	/*開閉ボタンopen時*/
	.open #nav_toggle span:nth-child(1) {
			top: 12px;
		   -webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);

		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;

		}
		.open #nav_toggle span:nth-child(3) {
			top: 12px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
}


/*開閉部分*/
nav{

    color: #fff;
    padding-top: 3em;
}

nav a{
    color: #fff;
}

nav li{
    border-bottom: 1px solid #696969;
    letter-spacing: 0.3m;
}

nav li a{
        padding: 1.5em 1em;
    display: block;
}


/*header*/
header h1{
max-width: 400px;
padding-left: 0.5em;
padding-right: 0.5em; 
margin: 1em auto;

}

header figure{

max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 4em;
}

header figure img{
width: 100%;
}



header  .videotop{
max-width: 100%;
margin-left: auto;
margin-right: auto;
}

header  .videotop video.topimg{
width: 100%;
margin-left: auto;
margin-right: auto;
}



p.youtube_btn{
position: relative;
bottom: 80px;
text-align: center;
background: red;
margin: 1em auto 2em auto;
width: 300px;
border-radius: 100px;
}

header  p.youtube_btn a{
color: #fff;
display: block;
padding: 0.2em 1em;

}


header video{
max-width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}

/*main*/
.box{
padding-top: 3em;
padding-bottom: 3em;
}

.box h2{
font-size:2em;
line-height: 1.8em;
margin-bottom: 0.5em;
}

.box p{
margin-bottom: 2em;
}

.box h2 br{
display: none;
}

.box p br{
display: none;
}



.box_in{
padding-left: 3em;
padding-right: 3em;
box-sizing: border-box;
}

.bg_main{
background-image:url(./images/bg_catch.jpg);
background-repeat: no-repeat;
background-size:cover;
  background-repeat: no-repeat;
  padding-top: 10em;
  padding-bottom: 10em;
}

.bg_main img{
 width: 100%;
}

.ssg_box{
padding-top: 10em;
padding-bottom: 6em;
}

div.ssg_btn_out{
background: #FF0200;
border-radius: 100px;
padding: 0.4em;
  display: table;
  margin-bottom: 4em;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.box div.ssg_btn_out br{
display: inline;

}

p.ssg_btn{
border: 2px solid #fff;
color: #fff;
border-radius: 100px;
font-family: 'Alata', sans-serif;
text-align: center;
font-size:0.9em;
letter-spacing: 0.1em;
line-height: 1.3em;
  display: table-cell;
  vertical-align: middle;

}



.ssg_btn a{
display: block;
padding: 0.4em 1em;
color: #fff;

}

.ssg_btn_sp{
font-size: 0.8em;
}

.main_work h3{
text-align: center;
background: #FF0200;
font-size: 1em;
letter-spacing: 0.2em;
}

.main_work h3 a{
display: block;
padding: 0.5em 1em;
color: #fff;
}

.main_work h2{
text-align: center;
font-size: 1.4em;
letter-spacing: 0.2em;
}


.main_product{
text-align: center;
font-size: 1em;
letter-spacing: 0.2em;
padding: 0.5em 1em;
background-image:url(./images/bg_product.jpg);
background-repeat: none;
  background-size: cover;
  background-repeat: no-repeat;
background-position:center center;
padding-top: 7em;
padding-bottom: 7em;
}



.main_product_in .flex_box_50 figure{
width: 80%;
margin: 0 auto;
}

.main_product h2{
margin-bottom: 2em;
}

.main_product h3{
text-align: center;
font-size: 1em;
letter-spacing: 0.2em;
padding: 0.5em 1em;
margin-bottom: 3em;

}

.product_box_top p{
margin-bottom: 1em;
text-align: center;
}

p.jistop{
font-size: 1.5em;
letter-spacing: 0.1em;
border: 1px solid #fff;
}

p.jis{
background:red;
border-radius: 100px;
text-align:center;
max-width: 200px;
margin-bottom: 5em;
margin-left: auto;
margin-right: auto;
}

p.jis a{
display: block;

}


.news{
padding-top: 4em;
padding-bottom: 4em;
color: #000;
}

.news h2{
text-align: center;
font-size: 1.8em;
letter-spacing: 0.2em;
margin-bottom: 2em;
color: #fff;
}

.news h3{
line-height: 1.5em;
font-size: 1.2em;
letter-spacing: 0.2em;
padding: 1.5em 1em 0.5em 1em;
margin-bottom: 0em;
padding-left: 0;
color: #000;
}

.news h3 a{
color: #000;
}

.news_box{
margin-bottom: 4em;
background: #fff;
}

.news_flex_box_right{
padding: 1em;
}

p.detail{
border: 1px solid #fff;
text-align: center;
max-width: 400px;
margin: 6em auto;
font-size: 1.2em;
}

p.detail a{
display: block;
padding: 0.5em 1em;
}

.news_box_top{
color: #fff;
}

.news_box_top h3 a{
color: #fff;
}

/*page*/

.page_in{
padding-top: 3em;
padding-bottom: 6em;
padding-left: 3em;
padding-right: 3em;
}




.page_in h2{
padding-top: 1em;
padding-bottom: 1em;
border-top: 2px solid #FF0200;
border-bottom: 2px solid #FF0200;
text-align: center;
letter-spacing: 0.1em;
max-width: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
}


.box_w{
background: #fff; 
color: #2b2b2b;
padding: 4em 2em;
 margin-bottom: 6em;
 max-width: 1300px;
 margin-left: auto;
 margin-right: auto;
}

.box_w h3{
font-weight: normal;
text-align: center;
letter-spacing: 0.1em;
border-bottom: 1px solid #FF0200;
padding-bottom: 0.5em;
margin-bottom: 2em;
}


.box_w h3.c_tit{
text-align: left;
font-weight: normal;
letter-spacing: 0.1em;
border-bottom: 1px solid #ccc;
padding-bottom: 0.5em;
}

.box_w i{
 margin-right: 0.3em;
 color: #FF0200;
}

.box_w p{
margin-bottom: 4em;
}


.box_w ul{
margin-bottom: 4em;
}

.box_w li{
list-style: decimal;
margin-left: 1em;
}

.box_w figure{
margin-bottom: 2em;
}


.box_w table{
font-size: 0.9em;
margin-bottom: 4em;
text-align: left;
}



.box_w table th{
font-weight: normal;
}

table.history {
border-collapse: collapse;
}

table.history th{
border-right: 1px solid #ccc;
padding-right: 0.5em;
vertical-align:top;
line-height: 1.8em;
padding-bottom: 0.8em;
}

table.history td{
padding-left: 0.5em;
vertical-align:top;
line-height: 1.8em;
padding-bottom: 0.8em;
}

table.company_overview{
border-collapse: collapse;
}

table.company_overview th{
background: #000;
color: #fff;
padding: 0.5em;
padding-bottom: 0.8em;
min-width: 65px;
vertical-align:top;
}

table.company_overview td{
padding: 0.5em;
padding-bottom: 0.8em;
vertical-align:top;
}

.propduct_page h3{
font-weight: normal;
text-align: center;
}

.box_w_mg{
background: #fff;
color: #000;
margin-bottom: 3em;
 max-width: 1500px;
 margin-left: auto;
 margin-right: auto;
}

.box_w_mg_in{
padding: 2em;
}

table.product_table{
border-collapse: collapse;
width: 100%;
margin-bottom: 2em;
}

table.product_table th{
font-weight: normal;
border: 1px solid #ccc;
padding: 1em;
vertical-align: top;
}

table.product_table td{;
border: 1px solid #ccc;
padding: 1em;
vertical-align: top;
}

p.gray_box{
background: #F2F2F2;
padding: 1em;
line-height: 1.5em;
font-size: 0.8em;
}

.equipment_page figure{
margin-bottom: 1em;
}





.equipment_page h3{
text-align: center;
letter-spacing: 0.2em;
font-weight: normal;
font-size: 1.3em;
margin-bottom: 3em;
}

.processing_page h3{
font-weight: normal;
font-size: 1.6em;
border-bottom: 1px solid #ccc;
padding-bottom: 0.5em;
}

figure.vision{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}


figure.vision img{
width: 100%;
}


.sightseeing_page h3{
padding-top: 1em;
font-size: 1.2em;
border-bottom: none;
margin-bottom: 0.5em;
}

.sightseeing_page p{
margin-bottom: 2em;
}

.sightseeing_page_box .flex_container_pc p{
font-size: 0.9em;
line-height: 1.8em;
}



/*contact*/

.wpcf7 textarea ,.wpcf7 input[type="text"],
.wpcf7 input[type="email"],.wpcf7{
width: 100%;
  padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
}



 input[type="tel"],.wpcf7 input[type="number"]{
     width: 30%;
      padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
 }
 
  input[type="tel"]{
           width: 100%;
      
  }

.wpcf7-form .wpcf7-select, select {      
 padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: 1px 1px 0px rgba(0,0,0,0.4) inset;;
background: #fff;
height: 35px;
}



.wpcf7 textarea ,.wpcf7 input[type="text"],
.wpcf7 input[type="email"],.wpcf7 input[type="tel"],.wpcf7 input[type="number"]{
  padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
	border: 1px solid #ccc;
}


.wpcf7 select{
  padding: 10px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
border-radius: 5px;
box-shadow: none;
background: #fff;
}

span.point{
color: red;
font-size: 0.8em;
}


.wpcf7 input[type="submit"]
  {
width: 100%;
width: 180px;
padding: 1em 2em;
font-size: 14px;
border: none;
background-color: #000;
-webkit-appearance: none;
cursor: pointer;
border-radius: 3px;
color: #fff;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
display: block;
margin-bottom: 5em;
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}





.wpcf7 input[type="button"]
  {
width: 100%;
width: 180px;
padding: 1em 2em;
font-size: 14px;
border: none;
background-color: #000;
-webkit-appearance: none;
cursor: pointer;
border-radius: 3px;
color: #fff;
font-weight: bold;
text-align: center;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
display: block;
margin-bottom: 5em;
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}





.wpcf7 input[type="submit"]:hover{
  opacity: 0.8;
    filter: alpha(opacity=60);
  }

.wpcf7-list-item-label{
 margin-right: 15px;
}

  
.contact{
max-width: 800px;
margin: 0 auto;
}
  
p.c_t{
margin-bottom: 0.8em;
}

/*footer*/

footer{
background: #1F1F1F;
padding-top: 5em;
padding-bottom: 5em;

}

footer h1{
max-width: 300px;
}

p.copy{
margin-top: 3em;
}

p.f_contact{
background: #FF0200;
font-size: 1.1em;
text-align: center;
width: 100%;
padding: 0.5em 1em;
 position: fixed;
  bottom: 0;
  z-index:999;
}

p.f_contact a{
display: block;

}




/*ページナビゲーション*/
.pagenav{
    margin-top: 3em;
    font-size: 0.9em;
    max-width: 400px;
    margin: 0 auto;
    color: #000;
}

.pagenav a{
    color: #000;
}

.pn_old{
border: 1px solid #000;
border-radius: 50px;
float: left;
text-align: center;
width: 100px;
margin-left: 0;
margin-right: auto;
    color: #000;
}

.pn_new{
border: 1px solid #000;
border-radius: 50px;
float: right;
text-align: center;
width: 100px;
margin-left: auto;
margin-right: 0;
    color: #000;
}


.pagination ul{
      display: -webkit-box;
  display: -ms-flexbox;
display: flex;
max-width: 350px;
margin: 0 auto;
}
.pagination li{

    font-size: 0.7em;
      flex: 1; 
      margin: 0.5em;
      margin-top: 5em;
      margin-bottom: 8em;
      background: #fff;
border-radius: 3px;
   padding: 0.8em;
}

.pagination li a{
    color: #fff;
}



/*外部コンテンツ*/
iframe	{max-width: 100%}


/* YouTubeのビデオ */
.ytvideo	{position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
	margin-top: 30px;
	margin-bottom: 30px}

.ytvideo iframe	{position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%}

/*googlemap*/

.googlemap {
height: 0;
overflow: hidden;
padding-bottom: 36.25%;
position: relative;
margin-top: 2em;
margin-bottom: 2em;
}
.googlemap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}


/*archive*/

/*パンくず*/
.bread{
    font-size: 0.7em;
    text-align: left;
        padding-top: 1em;
    margin-bottom: 1em;
}

.bread li{
    display: inline;
    margin-right: 1em;
}


.bread li:after{
content: "　>";
}

.bread li:last-child::after{
content: none;
}


/*single*/
.entry_box{
color: #000;
}


.entry_box .cate{
margin: 0;
padding: 0;
margin-bottom: 1em;
}

.entry_box h1{
color: #000;
font-size: 1.4em;
margin: 0;
padding: 0;
margin-bottom: 1em;
letter-spacing: 0.1em;
border-bottom: 1px solid #ccc;
padding-bottom:0.3em;
}

.entry_box h1 a{
color: #000;
}


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

/*開閉部分*/
nav{
text-align: right;
    display: inline; 
background: #1A1A1A;
    margin:0;
    padding: 0;
    height: auto;
    font-size: 1.4em;
    padding-top: 0.2em;
        padding-bottom: 0.2em;

}

nav li a{
        padding: 0;
    display: inline;
    color: #fff
}

	#nav_toggle span{
	    display:none;
	}
	
	nav ul{


margin-left: auto;
margin-right: 2em;
font-size: 0.7em;

	}

nav li{
    display: inline;
        border: none;
        text-align: right;
        letter-spacing: 0.2em;
        margin-left: 2em;
}

/*header*/



/*main*/
.box h2 br{
display: block; 
}

.box h2{
font-size: 2.5em;
}

.main_c_right{
text-align: right;
width: 70%;
margin-left: auto;
margin-right: 2em;
}


.box h3{
font-size: 1.3em;
}

.box p {
font-size: 1em;
}

.box p br{
display: inline;

}



div.ssg_btn_out{
background: #FF0200;
border-radius: 100px;
padding: 0.4em;
  display: table;
    margin-bottom: 2em;
      margin-left: 0;
}

p.ssg_btn{
border: 2px solid #fff;
color: #fff;
border-radius: 100px;
font-family: 'Alata', sans-serif;
text-align: center;
font-size:0.9em;
letter-spacing: 0.1em;
line-height: 1.1em;
  display: table-cell;
  vertical-align: middle;

}



.flex_container_pc{
      display: -webkit-box;
  display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
  align-items: center;
max-width: 1500px;
margin: 0 auto;
}

.flex_container_pc2{
      display: -webkit-box;
  display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: top;
  align-items: top;
max-width: 1500px;
margin: 0 auto;
}


.flex_box_40{
width: 48%;
margin: 1%;
}

.flex_box_50{
width: 48%;
margin: 1%;
}

.flex_box_60{
width: 48%;
margin: 1%;
}


.main_product_in{
max-width: 1000px;
margin: 0 auto;
}

.main_product_in .flex_box_50 figure{
width: 80%;
margin: 0 auto;
}

figure.jis img{
width: 70px
}



.news_box{
max-width: 1300px;
margin: 0 auto;
margin-bottom: 2em;
}

.news_flex_box_left{
width: 28%;
margin: 1%;
box-sizing: border-box;
}

.news_flex_box_right{
width: 68%;
margin: 1%;
box-sizing: border-box;
}

/*page*/

.page_in h2{
font-size: 2.2em;
letter-spacing: 0.2em;
}

.box_w .flex_box_50{
width: 46%;
margin: 2%;
}

table.history th{
width: 100px;
}

table.history td{
padding-left: 4em;
}


.box_w h3{
font-size: 2em;
margin-bottom: 1em;
}


.propduct_page h3{
font-size: 2em;
margin-bottom: 1em;
}

.box_w_mg{

margin-bottom: 6em;
}

.flex_box_half1{
width: 50%;

}

.flex_box_half1 figure{
display: none;
}

.bg_product1{
background-image:url(./images/product_pipe1.jpg);
background-position: top right;
background-size: cover;
height: 700px;
width: 100%;

}

.bg_product2{
background-image:url(./images/product_pipe3.jpg);
background-position: top left;
background-size: cover;
height: 1600px;
width: 100%;
}


.flex_box_half{
width: 46%;
margin: 2%;
}


.flex_box_33{
width: 31%;
margin: 1%;
}

.equipment_page h3{
font-size: 1.5em;

}


.bg_prcessing1{
background-image:url(./images/processing1.jpg);
background-position: center right;
background-size: cover;
height: 400px;
width: 100%;

}

.bg_prcessing2{
background-image:url(./images/processing2.jpg);
background-position: center right;
background-size: cover;
height: 400px;
width: 100%;

}

.bg_prcessing3{
background-image:url(./images/processing3.jpg);
background-position: center right;
background-size: cover;
height: 400px;
width: 100%;

}

.processing_page h3{
font-size: 1.8em;
}



/*footer*/

footer h1{
max-width: 400px;
margin-left:auto;
margin-right: auto;
margin-bottom:2em;
}

footer{
text-align: center;
}

p.copy{
padding-top: 3em;
padding-bottom:3em;
}

p.f_contact{
background: #FF0200;
font-size: 1.5em;
}

/*contact*/
 input[type="tel"],.wpcf7 input[type="number"]{
     width: 30%;

 }


footer p{
letter-spacing: 0.2em;
}

footer p.copy{
font-size: 0.8em;
}

.company_page_box .flex_container_pc{
 -webkit-align-items: flex-start;  /* Safari etc. */
  -ms-align-items    : flex-start;  /* IE10        */
  align-items        : flex-start;

}


.sightseeing_page_box .flex_container_pc{
 -webkit-align-items: flex-start;  /* Safari etc. */
  -ms-align-items    : flex-start;  /* IE10        */
  align-items        : flex-start;

}

.sightseeing_page_box .flex_container_pc2{

}


}

@media screen and (min-width: 1024px){
  
.box h2{
font-size:3em;
}




.box p {
font-size: 1.1em;
}
  
  
  .flex_box_40{
width: 38%;
margin: 1%;
}

.flex_box_60{
width: 58%;
margin: 1%;
}

.sightseeing_page h3{
padding-top: 1em;
font-size: 1.3em;
border-bottom: none;
}




/*footer*/
footer h1{
max-width: 500px;

}


footer p{
font-size: 1.2em;

}


  
  }


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

/*main*/

.box h2{
font-size:4em;
}

.box h3{
font-size: 1.5em;
}
.box p {
font-size: 1.3em;
}
  


.main_c_right{
margin-right: 10%;
padding-top: 6em;
}



}