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

@media (max-width:1450px){

  h2{
    font-size: 40px;
    max-width: 90%;
    margin: 0 auto;
    padding-bottom: 60px;
  }
  h2 .green, h2 .orange{font-size: 40px;}

  .h3-orange{font-size: 22px;}

  #recruit h3{font-size: 22px;}

  .sp-content{
    display: flex;
    justify-content: center;
    padding-bottom: 80px;
  }
  .sp-none{display: none;}

  #product .flex{
    width: 1000px;
    display: flex;
  }

  #product .flex .item{margin-bottom: 150px;}

  #product .flex .item:nth-child(7), #product .flex .item:nth-child(8){
    margin-bottom: 150px;
  }
    #axis .flexbox-03 .item{
    flex: 50%;
    text-align: -webkit-center;
  }
  #axis .sec05-group {
    display: grid;
    width: fit-content;
    grid-template-areas: "a a a a a a a a";
    gap: 10px;
  }
  #axis .sec05-group img {
    align-self: center;
    padding-bottom: 20px;
  }   
  #axis .sec-06 .page-equipment-btn {
    margin: 0 auto;
    margin-top: 50px;
    float: none;
  }


  .interview .flexbox-02 .item p .text-big {font-size: ;}
  #recruit .shadowbox {
    padding: 25px 0;
    max-width: 90%;
    height: fit-content;
    margin: 0 auto;
}
  #recruit .flexbox-03 .item{margin-bottom: 30px;}
  #recruit .shadowbox .txt-bigger {top: 0px;font-size: ;}
  #recruit .shadowbox .txt-big {font-size: ;top: 0;}
  #recruit .rec-video{margin-bottom: 50px;}
}


@media (max-width:1300px){
  section{padding: 100px 0;}
  section:nth-child(2){padding: 100px 0 0px;}
  section:last-child{
    padding:120px 0 0;
    padding-bottom: 120px;
  }

  .flex{
    display: block;
    margin: 0 auto;}

  #product .flex{
    width: 900px;
    justify-content: space-between;
  }

  #product .flex .item{margin-bottom: 80px;}
  #product .flex .item:nth-child(7), #product .flex .item:nth-child(8){
    margin-bottom: 80px;
  }

  .item-l, .item-r{flex: none;}
  .item-l img, .item-r img{max-width: 85%;}
  .item-r p{
    position: relative;
    padding: 80px 0;
    height: fit-content;
    width: 80%;
  }
  .item-l p{
    position: relative;
    padding: 80px 0;
    height: fit-content;
    width: 80%;
  }

  #difficult .ul-dot {
    padding-top: 80px;
    width: 80%;
    float: none;
    margin-bottom: 20px;
    margin: 0 auto;
}

.table {
  width: 1080px;
  margin: 0 auto;
  overflow-x: scroll;
}

#quality .sec-03 h2{
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

#axis .sec-03 h2{display: inline-flex;}
#axis .sec-03 {padding: 100px 0 150px;margin-block-start: 200px;}
#axis .flexbox-03 .item{margin-bottom: 80px;}
#axis .flexbox-03{margin-bottom: 0px;}
#axis .sec-06{padding-block-end: 300px;}  

#recruit .sec-03 iframe{ height: 350px;}

#recruit .sec-05{margin-bottom: 80px;}

#recruit .sec-06{padding: 0px; margin-bottom: 400px;}
#recruit section:last-child{display: block;}

}

@media (max-width:1150px){
  #axis .flow-box {
    width: 330px;
    min-height: 251px;
    height: max-content;
    display: flex;
    flex-direction: column;
    padding-top: 25px 0;
}
#axis .flow-box p{padding: 0 20px;}

#equipment .flexbox-03{justify-content: center; margin: 0 auto;}

#equipment .flexbox-03 .item{
  flex: 100%; 
  margin-bottom: 30px;
}

.table-company{
  width: 90%;
  max-width: 90%; 
  margin: 0 auto;}

.table-company th{
  display: inline-flex;
  width: 80px;
  text-align: justify;
  justify-content: space-between;
  padding: 8px 20px 8px 20px;
}

.table-company td{width: fit-content; font-size: 16px;}

.map iframe{
  width: 600px;
  height: 400px;
  max-width: 80%;
}

#company .flexbox-02 {
  width: 100%;
  display: block; 
  text-align: -webkit-center;
}
#company .flexbox-02 .item{
  width: 100%;
  margin-bottom: 30px;
}

}

@media (max-width:935px) {
  #product .flex{
    width: 90%; 
    max-width: 90%;
    justify-content: center;
  }
  
  #product .flex .item{
	  max-width: 90%;
    margin: 0 auto;
    padding-bottom: 50px;
	}
  
  #product .flex .item:nth-child(7), #product .flex .item:nth-child(8){margin-bottom: 0px;}

  .tb-product tr:last-child{height: fit-content;}

  #product section:nth-child(2){
    background-color: #1D1D21;
    padding-bottom: 100px;
  }

}

@media (max-width:769px){
  *{font-size: 16px;}
	
	.container {padding: 5rem 0;}
	
	.sec-2col, .sec-info {
		display: block; 
		margin: 3rem auto;
	}
	.sec-2col-item {
		width: 90vw;
		margin: 10px auto;
	}
	
	.btn-prev:after {
		width: 40px;
    	height: 40px;
		left: 150px;
	}
	
	h3,h4{margin-bottom: 2rem;}
	h3 span {font-size: 18px;}
	h4 img.h4-title{width: 150px;}	
	.sec-info-item {width: 100%;}

  #product .flex .item{
	  padding-bottom: 50px;
	  width: 90%;
    margin: 0 auto;
	}
  
  #product .flex .item:nth-child(7), #product .flex .item:nth-child(8){margin-bottom: 0px;}

  .tb-product{width: 100%;}
  .tb-product td, .tb-product th{padding-left: 10px;padding-right: 10px;}

  #product section:nth-child(2){
    background-color: #1D1D21;
    padding-bottom: 100px;
  }
	
	.sec-info-over {
		padding: 10px;
		width: 75%;
		height: 180px;
	}
	
	.sec-info-over h4 {
		font-size: 20px;
		margin: 0.7rem 0;
	}
	
	.sec-info-item img.btn-prev {
		width: 15%;
		margin: 1rem 0 0 auto;
	}
	
	.sec-difficult-processing p, .sec-quality p, .sec-2col-item p {font-size: 16px;}
	.sec-difficult-processing span, .sec-quality span, .sec-2col-item p span {font-size: 14px;}
	
	.sec-rec h4 {font-size: 17px;}
	
	.news-colum dl dt 
	{float: none;
	padding-left: 16px;}
	
	.news-colum dl dd {
		margin: 0 0 0 0;
		padding: 15px;
	}
	
	footer .sec-2col .sec-2col-item p {font-size: 14px;}
	footer .footer-nav li {margin: 5px 30px 0 0;}
	footer .sec-2col .foot-banner {text-align: center;}
	footer .sec-2col .foot-banner img {width: 25%;}
	footer .sec-2col{margin:0 auto;}
	
  	.sp-txt{display: contents;}

  	.tb-wrap{margin-top: 20px;}

  	.mainv-box{height: 250px;}
	
  	.mainv-box img{
		object-fit: cover;
		height: 250px;
		position: relative;
	  }
	
  	.mainv-box h1{font-size: 30px;}

	  h2{
		font-size: 26px;
		max-width: 90%;
		margin: 0 auto;
		padding-bottom: 60px;
	  }
  	h2 .green, h2 .orange{font-size: 26px;}

  .h3-orange{font-size: 22px;}

  .mt60{margin-top: 20px;}
  .mt150{margin-top: 70px;}
  .mb60{margin-bottom: 20px;}
  .mb80{margin-bottom: 30px;}
  .mb100{margin-bottom: 50px;}
  .mb150{margin-bottom: 70px;}

  section{padding: 50px 0;}
  section:nth-child(2){padding: 50px 0 0px;}
  section:last-child{
    padding:80px 0 0;
    padding-bottom: 80px;
  }

  .flex{display: block;margin: 0 auto;}

  .item-l, .item-r{flex: none;}
  .item-l img, .item-r img{max-width: 85%;}
  .item-r p{
    margin-right: 0;
    padding: 50px 0 0;
    height: fit-content;
    float: none;
    max-width: 90%;
    margin: 0 auto;
  }
  .item-l p{
    margin-left: 0;
    padding: 0 0 50px;
    height: fit-content;
    max-width: 90%;
    margin: 0 auto;
  }
  
  .flexbox-02{display: block;}
  .flexbox-02 .item {
    width: 100%;
    margin: 0 auto;
}
  .flexbox-03 .item {
    width: 100%;
    margin: 0 auto;
}
  #axis .flexbox-03 .item {margin-bottom: 30px;}
  .sp-content{
    display: none;
    padding-bottom: 0px;
  }
  .flexbox-02 .shadowbox{
    height: fit-content;
    padding: 40px 10px;
    max-width: 90%;
    margin: 0 auto 30px;
  }

  .sp-btn{margin-bottom: 30px; transform: scale(0.7); background-repeat: no-repeat;}

  .flexbox-03 figcaption {
    margin: 15px 0;
    font-size: 20px;
}

　.tb-wrap {overflow-x: scroll;}

  #axis .sec-03 {padding: 80px 0; margin-block-start: 0;}
  #axis .item{margin-bottom:30px;}
  #axis .flow-box {
    max-width: 70%;
    min-height: fit-content;
    height: fit-content;
    margin: 0 auto;
    padding: 25px 10px 40px;
}
#axis .flexbox-03 .item:last-child{
    display: block;
    width: inherit;
    max-width: 100%;
    min-height: fit-content;
    height: fit-content;
}
  #axis .flexbox-02 {text-align: center;}
  #axis .flexbox-03 {
   margin-bottom: 0;
   display: flex;
}

  #axis .sec05-group{
    display: grid;
    width: fit-content;
    grid-template-areas: "a a a a";
    gap: 10px;

  }
  #axis .sec05-group img{
    align-self: center;
    padding-bottom: 20px;
  }
  #axis .sp-sec05 {margin: 0 auto;}
  #axis .sec-06{padding-block-end: 50px;}  

  #axis .sec-06 .page-equipment-btn {
    margin: 0 auto;
    margin-top: 50px;
    float: none;
  }

  #difficult .ul-dot{
    margin: 0 auto;
    padding-top: 40px;
    max-width: 80%;
    float: none;
  }

  .rec-message{height: 60px;}
  #recruit h3{font-size: 22px;}
  #recruit .sec-04 h3{align-items: center;margin-bottom: 0;}

  .img-flex-end{float: none;}
  .item-flex-end{margin-top: 60px;}

  #recruit .sec-04 h3 img{height: 50px;}
  #recruit .interview h3{margin-bottom: 1em;}
  #recruit .interview h3:nth-child(2n){margin-top: 250px;}
  #recruit .sec-04 .flexbox-02 .item p{margin-bottom: 3em; margin-top: 3em;}
  #recruit .sec-04 .sp-margin{margin-top: 3.5em;}
  
  .interview .flexbox-02 .item {margin-bottom: 30px;}

  #recruit .interview ul li img {height: 40px;}
  .interview .flexbox-02 .item p .text-big {font-size: 22px;}

  #recruit .shadowbox {
    padding: 25px 0;
    max-width: 100%;
    height: fit-content;
    margin: 0 auto;
}
  #recruit .flexbox-03{justify-content: center; max-width: 100%;}
  #recruit .flexbox-03 .item{margin-bottom: 30px;}
  #recruit .shadowbox .txt-bigger {top: 0px;font-size: 40px;}
  #recruit .shadowbox .txt-big {font-size: 30px;top: 0;}
  #recruit .shadowbox .txt-middle {font-size: 20px;}
  #recruit .shadowbox img {height: 40px;}
  #recruit .sec-06 .item-l {background: #09090B;height: max-content;padding-top: 3em;}
  #recruit .sec-06 .item-r img {max-width: 100%;}
  #recruit .sec-06 .item-r img{float: none;}
  #recruit .sec-06{margin-bottom: 0px;}

}