@charset "utf-8";
/*=============================================

レスポンシブ用

=============================================*/
@media(max-width: 1200px) {
  .box-news{
    flex-flow: column;
  }
  .box-news .title-news,
  .box-news .news-list{
    width: 100%;
  }
  .box-news .title-news{
    margin-bottom: 20px;
    display: flex;
    align-items: end;
  }
  .box-news .title-news h2{
    margin-left: 20px;
    margin-right: 20px;
  }
  #Company #Message,
  #Recruit_message{
    padding-top: 0;
    background: none;
  }
  #Company #Message .section,
  #Recruit_message .section p{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #Company #Message .h2-wrap{
    padding: 120px 0;
    background: url(../img/bg_company02.jpg) center 30% no-repeat;
    background-size: cover;
  }
  #Recruit_message .h2-wrap{
    padding: 120px 0;
    background: url(../img/bg_recruit05.jpg) center 30% no-repeat;
    background-size: cover;
  }
  #Company #Message .h2-wrap h2{
    widht: 50%;
    margin-left: 50%;
  }
  #Recruit_message .h2-wrap h2{
    widht: 40%;
    margin-right: 60%;
    text-align: right;
  }
  #Company #Message .section p,
  #Recruit_message .section p{
    width: 90%;
    margin: 30px auto;
  }
}

@media(max-width: 991px) {
  #gnav{
    margin: 0;
    padding: 0;
    border: none;
  }
  #gnav ul li{
    float: left;
    margin-bottom: 0;
    padding: 0 24px 0 0;
  }
  #gnav ul li a{
    padding: 10px;
    color: #000;
    background: none;
    border: none;
  }
}
@media(min-width: 769px) {
  .sp-only{
		display: none;
    }
}

@media(max-width: 768px) {
  .pc-only{
		display: none;
    }
  header#header{
    padding: 15px 20px;
  }
  header#header #gnav{
		display: none;
	}
	
    
    .news-item{
      flex-flow: column;
    }
    .news-item .category{
      margin: 0 0 15px 0;
    }
    .news-item .date{
      border-right: none;
      margin: 0 0 10px 0;
    }
    .box-recruit .bg{
      height: 200px;
      min-height: auto;
    }
    .box-recruit .box-recruit-inner{
      margin-top: 40px;
      align-items: flex-start;
    }
    .box-recruit .box-recruit-inner .box-photo img{
      margin-top: 0;
    }
    #content{
      padding: 80px 0;
    }
    .box-oursrvice ul.oursrvice-link li a{
    font-size: 10px;
    padding: 10px;
  }
    
    .page-wrap .section-wrap{
      padding: 30px 0;
    }
    .page-wrap h1{
      margin: 30px auto;
    }
    /* Swiperコンテナの基本設定 */
    .page-wrap .swiper {
      height: 120px; /* スライダー全体の高さを指定 */
    }
    /* スライド内の画像を親要素の高さに合わせる */
    .page-wrap .swiper-slide img {
      height: 128px; /* 高さを揃える */
    }
    #Company #Corporate-philosophy .brand{
      margin-bottom: 10px;
    }
    #Company #About .flex,
    #Prototype-production .sotogawa{
      flex-flow: column;
    }
    #Company #About .img-wrap,
    #Company #About table,
    #Prototype-production .section,
    #Prototype-production .flex-right{
      width: 100%;
      margin: 0 auto;
    }
    #Company #About h2{
      text-align: center;
    }
    #Company #About table{
      margin-top: 30px;
    }
    .page-wrap table th,
    .page-wrap table td,
    #Contact table th,
    #Contact table td{
      width: 100%;
      display: block;
    }
    .page-wrap table tr{
      border-bottom: #9e895b 1px solid;
    }
    .page-wrap table th{
      font-size: 14px;
      font-weight: bold;
    }
    .page-wrap table td{
      font-size: 10px;
    }
    #Contact table th p{
      justify-content: flex-start;
    }
    #Contact table .required{
      margin-left: 10px;
      font-size: 10px;
    }
    #Contact table td{
      padding-top: 0;
    }
    #Contact table tr{
      border-bottom: 0;
    }
    #Consistent-service .bg{
      font-size: 60px;
    }
    #Prototype-production .section{
      margin-bottom: 30px;
      padding: 40px 0;
    }
    #Prototype-production .flex-right .flex{
      margin-top: 10px;
      margin-bottom: 30px;
    }
    #Prototype-production .flex-right .flex .img-wrap{
      width: 48%;
    }
    #OEM_manufacturing .section h2, #OEM_manufacturing .section p{
      margin: 20px auto;
    }
    #Manufacturing p{
      width: 90%;
      margin: 0 auto;
      text-align: left;
    }
    #Interview .flex{
      margin: 20px auto 30px;
    }
    #Interview .flex a{
      padding: 10px 5px;
    }
    #Employee_interview .interview-box p{
      width: 60px;
      height: 60px;
      font-size: 10px;
    }
    #Employee_interview .interview-box .img-wrap{
      width: calc((100% - 120px) / 2);
    }
    #Entry #Occupation .flex span{
      font-size: 10px;
      border-radius: 15px;
    }
    #Entry #Planning-sales .flex a{
      padding: 10px;
      font-size: 8px;
      border-radius: 20px;
    }
    #Entry .entry-box{
      padding: 40px 0;
    }
    .table-grad:after{
      display: none;
    }
    #Contact table td.consent span,
    #Contact table td.consent a{
      font-size: 10px;
    }
    #Recruit a.apply{
      width: 80px;
      height: 80px;
      font-size: 14px;
    }
    #Recruit a.apply img{
      width: 30px;
      height: auto;
    }
}

@media(max-width: 500px) {
  body p{
      font-size: 10px;
    }
  footer .footer-01 .footer-nav{
    display: none;
  }
  footer .footer-01 .company-name{
    font-size: 10px;
  }
  footer .footer-01 .sns_logo{
    margin-top: 20px;
  }
  #footer .footer-03 a.white_button{
    width: 100px !important;
    font-size: 10px;
  }
  .box-news .title-news h2{
    font-size: 16px;
  }
  .box-news .title-news a.white_button,
  .box-ourstartment .box-ourstartment-inner .box-text a.white_button,
  .box-oursrvice .box-oursrvice-inner .box-text a.white_button,
  .box-recruit .box-recruit-inner .box-text a.white_button,
  #Manufacturing a.white_button{
    font-size: 8px;
    width: 75px!important;
    padding: 5px 10px;
  }
  .news-item .category{
    font-size: 9px;
  }
  .news-item .title{
    font-size: 10px;
    padding: 10px;
  }
  .box-news,
  .box-ourstartment,
  .box-oursrvice{
    padding: 30px 0;
  }
}