@charset "utf-8";
/* CSS Document */

#sp,.sp {
	
	display: initial;
	
}

#pc,.pc {
	
	display: none;
	
}
h1 {
	width: 100%;
	margin: 0;
	padding : 0.3em 0.5em;
	font-size: 1.5em;
	font-weight: 600;
	line-height: 1em;
	border: 0.2em;
	border-style: none none none solid;
	border-color: #909DAC;
}

/* アンカーリンク位置調整 */
#recruitment_01,#recruitment_02,#recruitment_03{
	padding-top:  65px;
	margin-top:  -65px;
}

/* ナビゲーション ///////////////////////////////////////////////// */

.header_left img {
	
	width: 100%;
	
}





/* ソーセージリンクのコンテナ */
nav{
    overflow-x: hidden;
    position: relative;
	
    background-color: #fff;

}

.nav_wrap {
	position: fixed;
	
	
	margin: 0 auto 0 auto;
	padding:  0;
	width: 100%;
height: calc( 30px + 0.8em);
    background-color: #fff;
	z-index: 3;

	
}
.nav {
	width: 100%;
	margin: 0 auto;
    position: relative;
    text-align: left;

}
 
/* 左右を */
.nav:before, .nav:after {
    content: '';
    height: calc(100% - 2em);
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 16px;
    height:100%;
    z-index: 2;
}
.nav:before {
    background: linear-gradient(to right, rgba(255,255,255,0.5) 0%, white 50%, white 70%);
    right: 0;
}
.nav:after {
    background: linear-gradient(to left, rgba(255,255,255,0.5) 0%, white 50%, white 70%);
    left: 0;
}
 
/* アイテムが改行するのを防ぐための基本的なflexbox */
.nav ul {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    margin: 0;
	padding: 0;
}
 
.nav ul li {
    white-space: nowrap;
    margin: 0 0.2em 0;
    font-size: 1em;
}
 
.nav ul li a, .nav ul li a:visited {
	padding: 0.4em 0.4em;
    display: inline-block;
    color: #000000;
}
/* TOPキャプション //////////////////////////////////////////////// */

.cap_wrap {
	

	margin: 0 auto;
	padding: 2em 0;
	width: 95%;
	height: auto;

}

.cap {

	margin: 0 0.7em 0 0.7em;
	padding: 0;	
	text-align: center;
}

p.cap {
	
	font-size: 0.8em;
	line-height: 2em;
	display: inline-block;
	
}


/* メインコンテンツ //////////////////////////////////////////////// */

main{


}


div.main {

	margin: 0 auto 0.6em auto;
	padding: 0;
	width: 95%;
	height: auto;
	
}

.info {
	display: flex;
	flex-flow: column nowrap;
	margin: 0.5em 0 1.5em 0;

}

.info_item {

	margin: 0.5em 0 ;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
}


.info_item p{
	padding: 0.4em ;
	font-size: 1em;
	color: ;

}



.top_recruite{

	width: 95%;
}




/* process ////////////////////////////////////////////////////// */

.process_item {
display: grid;
grid-template-areas:
	"process_item_g1"
	"process_item_g2"
	;
	margin: 0;

}
.row_container{
display: flex;
flex-direction:  column;
margin: 20px 0 30px 0;
}

.column_container{
display: flex;
flex-direction: column;
margin: 20px 0 30px 0;
}

.row_item{
	display: grid;
	grid-template-areas:
	"row_item_g1""row_item_g2"
	;
	margin: 0 0 2em;
}
.cl_1{	width: 100%;}
.cl_2{	width: 100%;}
.cl_3{	width: 100%;}

.column_item {
width: 100%;
flex-basis: 100%;

display: grid;
grid-template-areas:
	"column_item_g1""column_item_g2"
	;
	margin: 0 0 2em;
}
.column_item img{

		width: 100%;
}
.column_item p.caption{

		margin: 1em 0.5em;
		width: auto;
}
.column_item figure{
margin-top: 0;
width: 100%;

}
/* product ////////////////////////////////////////////////////// */
#product_01,#product_02{
margin-top: -60px;
padding-top: 60px;
}

.product_item{display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around ;
}



.product_item div.cl_3
{	width: calc( (100% - 1em) / 2);

}
.product_item div.row_item{
margin: 0 0 1em;
}


.product_caption {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
grid-column-gap: 1em;

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

	grid-template-areas:
	"pc_g1 pc_g3"
	"pc_g2 pc_g2"
	;
	margin: 1em 0 2em 0;
}
.product_caption h2{
text-align: center;

}
.product_caption p{
grid-area: pc_g2;
line-height: 2em;
color: #776351;
}
.product_caption img{
grid-area: pc_g3;

}

.product_process{
display: flex;
flex-flow: column nowrap;
	
}

.product_process_item{
display: flex;
flex-direction: column nowrap;
justify-content: center;
width: 100% ;

}

.product_process_item figure{
width: 90%;
margin: 0 auto;
padding-bottom: 0.5em;

}
.product_process_item p{
	width: 100%;
	font-size: 0.9em;

}


.product_arrow {
position: relative;
width: 100%;
height:20px;
margin: 1em 0;
/*overflow: hidden;*/

}
.product_arrow img{
	width: 100%;
	position: absolute;
transform: rotate( 90deg ) translate(0, -50%); 
transform-origin: top left;
	width: auto;
height:auto;
top:  0; 
left: 50%; 

}
.facility_item{
	display: flex;
	flex-flow: row wrap;
	gap:0.6em 2%;
	padding-bottom: 2em;
}
.cl_2{
	width: 100%;
	max-width: calc( (100% - 2% )/ 2);
}
.spcl_1{
max-width: 100%;
}
/* 採用情報 ////////////////////////////////////////////////////// */



.btn-white {
  display: inline-block;
  width: auto;
  color: #707070;
  padding: 6px 24px;
  margin: 16px;
  background-color: #fff;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #707070;
  border-radius: 6px;
}
.btn-products {
  box-sizing: border-box;
  margin: 0.5em 0.8em;
}