@charset "utf-8";
/*896px以下*/
header {
    width: 100%; /* 幅いっぱいを指定 */
    height: 130px; /* 高さを50pxに指定 */
}
body{font-size:14px;
padding-top: 130px; }

	#h_logo-wrap a {font-size:25px;}
	#h_logo-wrap a img{width:170px;}
	
	#h_toiawase p .sp{display:block;}
	
	
	#h_toiawase .to-toiawase a img{height:16px;}
	#h_toiawase .to-toiawase a{font-size:15px; padding:6px 30px;}
	#top_img .catchcopy .box{font-size:1.8rem; line-height:2.4rem;}
	.sec-business h2, .sec-setsubi h2, .sec-recruit h2 {font-size:1.6rem;}
	.sec-pbc h2{font-size:1.2rem;line-height:1.5em;}
.sec-security h2{font-size:1.2rem;line-height:1.5em;}
.sec-sdgs h2{font-size:1.3rem;}
.sec-sdgs p,
.sec-sdgs h2{
	padding-left: 0px;}
.sec-sdgs p:before{
	content:" ";
	display:inline-block;
	width:10px;
	height:86px;
	vertical-align: middle;
	margin:0;
}
                  
	.sec-business .item-txt p{font-size:1.1rem;}

	.sec-recruit h3{font-size:1.2rem;}
	.sec-pbc h3{font-size:1.2rem;}
    .sec-sdgs h3{font-size:1.2rem;}
	.sec-setsubi h2{flex:unset;}
	.sec-setsubi ul li a span{font-size:18px;}
	.sec-setsubi h2:after,
	.sec-recruit h2:after{width:30px;height:22px;}
    .sec-sdgs h2:after{width:30px;height:22px;}
	.sec-pbc h2:after{width:30px;height:22px;}
	.sec-security h2:after{width:30px;height:22px;}
	.sec-setsubi ul{width:unset; flex:1; margin:0 auto;}
	footer #f-inner .f_inq{width:unset;}
	
	#main .factory-box .col4>li p{font-size:15px; padding:3px 0;}
	#main .factory-box .col2>li.col-h>.fac-item>li p{font-size:12px; padding:3px 0;}
	

/*768px以下*/
@media screen and (max-width:767px){
body{font-size:14px;}
	#h_logo-wrap span{margin:0 0 10px 0; font-size:.9rem;}
	#h_logo-wrap a{display:inline-block; font-size:22px;}
	#h_logo-wrap a img{width:125px;}
	#h_toiawase p{margin:0 0 5px 0;}

	.h_nav>li a{font-size:16px;}

	#top_img .catchcopy .box{font-size:1.5rem; line-height:2rem;}
	
	#main #sec-info{display:block;}
	#sec-info .item-img{text-align:right;}
	#sec-info .item-img img{width:200px;}
		.sec-setsubi {min-height:unset;}
		.sec-recruit a{min-height:unset;}
		.sec-recruit h3{font-size:1.1rem; line-height:1.5rem; padding:1rem 0;}
		.sec-recruit h3:before{width:40px; height:60px;}
		.sec-pbc a{min-height:unset;}
		.sec-pbc h3{font-size:1.1rem; line-height:1.5rem; padding:1rem 0;}
		.sec-pbc h3:before{width:40px; height:60px;}
	.sec-security a{min-height:unset;}
		.sec-security h3{font-size:1.1rem; line-height:1.5rem; padding:1rem 0;}
		.sec-security h3:before{width:40px; height:60px;}
	    .sec-sdgs a{min-height:unset;}
		.sec-sdgs h3{font-size:1.1rem; line-height:1.5rem; padding:1rem 0;}
		.sec-sdgs h3:before{width:40px; height:60px;}

	#main .col2{display:block;}
	#com01 .col2 .item02{margin:0 auto 1rem; width:unset;}
	#com02 .col2 .item02{margin:0 auto 1rem;}
	#com02 .col2 .item03{margin:0 auto 1rem;}
	#com05 .col2 .item,
	#com05 .col2 .item:nth-child(2n){width:unset; margin: 0 auto 2rem;}
	#main .col2>li,
	#main .col2>li:nth-child(2n){width:unset; margin:0 auto 2rem;}
	#main .factory-box .col2>li:nth-child(2){text-align:center;}
	
	#main .col4>li{width:calc((100% - 10px) / 2); margin:0 10px 10px 0;}
	#main .col4>li:nth-child(2n){margin:0 0 10px 0;}
	
	#main .factory-box .col2>li.col-h{flex-flow: unset;display: block;}
	#main .factory-box .col2>li.col-h>.fac-item{justify-content:center;}
	#main .factory-box .col2>li.col-h>.fac-img{margin:0 0 10px 0;}
	#sdgs .col2 .item02{margin:0 auto 1rem; width:unset;}
	
	
}
/*600px以下*/
@media screen and (max-width:600px){
	
	#h-inner{display:block;}
	#h_toiawase{text-align:left;}
	#h_toiawase p .sp{display:none;}
	#h_logo-wrap a{margin:0 0 10px ;}
	
	.h_nav>li a{font-size:14px;}
	
	#top_img .catchcopy .box{font-size:1.3rem;}
	#sec01 p.txt{font-size:14px; line-height:1.5rem;}
	footer #f-inner .f_logo{font-size:1.2rem;}
	#sec-info ul>li{font-size:1rem;}
	footer address{font-size:.8rem;}
	
	#page #top_img{height:180px;}
	#page #top_img h1{
		font-size: 1.5rem;
    padding: 1.2rem 0;
	}
	
	.sec-business .item-txt p{font-size:1rem;}
	.sec-setsubi{display:block; padding:15px;}
	.sec-setsubi h2{margin:0 0 1rem 0; padding:0;}
	
	.sec-recruit a{display:block; padding:15px 15px 15px 0;}
	.sec-recruit h3{font-size:1rem; padding:0;}
	.sec-recruit h3:before{width:30px;height:40px;}
	
	.sec-pbc{
		height: 320px;
		background:url(images/top/pbc_logo2.jpg) no-repeat bottom;	
		background-size: 100% auto;
	}
	.sec-pbc a{display:block; padding:15px 15px 15px 0;}
	.sec-pbc h3{font-size:1rem; padding:0;}
	.sec-pbc h3:before{width:30px;height:40px;}
	
	.sec-security{
		height: 320px;
		background:url(images/top/security.png) no-repeat bottom;	
		background-size: 80% auto;
	}
	.sec-security a{display:block; padding:15px 15px 15px 0;}
	.sec-security h3{font-size:1rem; padding:0;}
	.sec-security h3:before{width:30px;height:40px;}
	
	.sec-sdgs{
		height: 380px;
		background:url(images/top/sdgs02.png) no-repeat bottom;	
		background-size: 100% auto;
		background-color:aliceblue;
	}
	.sec-sdgs h2{margin:0 0 1rem 0; padding:0;}
	.sec-sdgs a{display:block; padding:5px 5px 5px 0;}
	.sec-sdgs p{font-size:0.8rem; padding:0;
	}
	.sec-sdgs p:before{width:30px;height:40px;}

	#page-content #sec01 p,
	#page-content .sec p{font-size:14px;}
	#page-content .sec h2{font-size:1.2rem;}
	#page-content .sec h3{font-size:1.1rem;}
	#page-content .tbl_faci th, #page-content .tbl_faci td{font-size:13px; padding:3px;}
	.tbl-cjk li{font-size:14px;}

	
	.tbl100 th, .tbl100 td{font-size:13px;}
	#com03 .tbl100 th,
	#com04 .tbl100 th{width:90px;}

	#page-content #com05 p{font-size:14px;}
	
	#rec02 .tbl100 th{width:100px;}

	#rec03 .voice-list li dt, #rec03 .voice-list li dd{font-size:14px;}
	
	#form-wrap .tbl100 th{width:110px; padding:.5rem .5rem .5rem 5rem;}
	#form-wrap .tbl100 th span{padding:2px 1rem;}
	
	#main .col3.business2-list>li h4{margin:0 auto 10px;}
	#main .col3.business2-list>li,#main .col3.business2-list>li:nth-child(3n){
		width:unset;
		margin:0 auto 30px ;
	}
	
}

@media screen and (min-width:481px) and ( max-width:600px){
.sec-business h2, .sec-setsubi h2, .sec-recruit h2{font-size:1.3rem; }
	.sec-business .item-txt{padding:1rem;width:calc( 100% - 2rem);}
}

/*480px以下*/
@media screen and (max-width:480px){
/*===ハンバーガーナビ===*/
.h_nav>li{width:unset;}
.h_nav>li a{border-right:none; padding:.5rem 0;}
.h_nav>li:first-child a{border-left:none;}

/*------------------------------------スマホの際は、navを非表示にする。--------------*/
nav{
		display: none;
		position: absolute;
		top:0;
		width: 100%;
		right: 0;
	}
 
/*------------------------------------ulのみ表示--------------*/
/*------------------------------------プルダウンの部分を記述--------------*/
nav .h_nav{
display: block;
margin: 0 auto;
}
/*最後のメニューは下線を不要にする -------------------------------------------*/
 
nav ul li:first-child{border: none;}
nav ul li a{
display: block; color:#fff;
line-height:2.5em;
text-decoration:none;
}
 
 .h_nav>li.sp{display: block;}
	/*開閉ボタンの作り方 ------------------------------------------------*/
	#nav_toggle{
		display: block;
		width: 30px;
		height: 30px;
		position: fixed;/*固定にします。*/
		top: 0;
		right:0;
		background:rgb(51,51,153);
		padding:5px;
		z-index:9999;
	}
	
	nav{
    position: fixed;
		background-color: rgba(59,59,59,0.77);
    z-index: 999;
}
	
	#nav_toggle div {
		position: relative;
		background-color: rgba(59,59,59,0.77);
		z-index: 999;
	
		
	}
 
#nav_toggle span{
display: block;
height: 2px;
background: #fff;
position:absolute;
width: 100%;
left: 0;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;	
	}
 
/*-----------------------------------------------------三本ずつずらして設定*/
	#nav_toggle span:nth-child(1){
		top:4px;
	}
	#nav_toggle span:nth-child(2){
		top:14px;
	}
	#nav_toggle span:nth-child(3){
		top:24px;
	}
	
 
/*-----------------------------開閉ボタンopen時-------*/
.open #nav_toggle span:nth-child(1) {
 
top: 14px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
 
/* ----------------------------2本目を非表示にすることで、三本が2本になる*/
.open #nav_toggle span:nth-child(2) {
display:none;
}
 
.open #nav_toggle span:nth-child(3) {
top: 14px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/*ハンバーガーナビここまで*/

	
	#h_logo-wrap a{font-size:18px;}
	#h_logo-wrap a img{width:120px;}
	#top_img .catchcopy .box{font-size:1.15rem; line-height:1.5rem;}
	.sec-business ul{display:block;}
	.sec-setsubi ul{display:block;}
	.sec-setsubi ul li{margin:0 auto 1rem;}
	.sec-setsubi ul li a{margin:0;}
	.sec-business h2{font-size:2.2rem;}
	.sec-business .item-txt p{font-size:1.5rem;}
	
	footer #f-inner{display:block;}
	footer #f-inner .f_inq{margin:1rem 0 0 0;}
	.sec-setsubi ul li a span{font-size:1.4rem;}
	#sec-info ul>li{font-size:14px;}
	#main .factory-box .col4>li p{font-size:12px;}
	#main .factory-box .col4>li,
	#main .factory-box .col2>li.col-h>.fac-item li{width:calc((100% - 10px) / 2); margin:0 10px 10px 0;}
	#main .factory-box .col4>li:nth-child(2n),
	#main .factory-box .col2>li.col-h>.fac-item li:nth-child(2n){margin:0 0 10px 0;}
	
	#page-content .tbl_faci th, #page-content .tbl_faci td{font-size:11px;}
	
	#form-wrap .tbl100 th, #form-wrap .tbl100 td,
	#com03 .tbl100 th, #com03 .tbl100 td, #com04 .tbl100 th, #com04 .tbl100 td,
	#rec02 .tbl100 th, #rec02 .tbl100 td{display:block;}
	#form-wrap .tbl100 th,
	#com03 .tbl100 th, #com04 .tbl100 th,
	#rec02 .tbl100 th{width:unset; background:#fafafa;}
	#form-wrap .sousin input[type="reset"], #form-wrap .sousin input[type="button"], #form-wrap .sousin input[type="submit"]{font-size:14px;}
	#rec03 .voice-list li .float_r{width:80px;}

	.sp-scroll-table{
		display: block;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		position:relative;
	}
	/*--br--*/
	.tb{
		display:none;
	}
	.sp{
		display:block;
	}
	.pc{
		display:none;
	}

	.rec_box .box01,
	.rec_box .box02  {
		width:98%;
		float:none;
	}

}
/*768px以下*/
@media screen and (max-width:767px){
#page #wrapper #content #main #page-content #rec01 p {
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}
}
/*481px以下*/
@media screen and (max-width:480px){
	.tb {
		display:none;
	}
	.justify{
		font-size:.8rem !important;
	}
	
}