/* CSS Document */
.humb,.pc_none{
  display: none;
}
@media screen and (max-width: 768px){

/*
-------------------------------
共通
-------------------------------
*/
html{
  font-size:41.6%;
}
ul.nav{
  display: block;
}
ul.nav li{
  display: block;
  text-align: left;
}
.over_width,.inner_width,#wrap{
  width:100%!important;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.pc_none{
  display: block;
}
.sp_none{
  display: none !important;;
}
.title{
  padding:50px 10px 30px;
  background-position: right;
  background-size: cover;
}
.title h2{
  font-size: 50px;
}
.title p{
  font-size: 20px;
  color:#000;
}
/*
-------------------------------
header
-------------------------------
*/
header{
  background-color: transparent;
}
.logo{
  width:150px;
  margin-left:-1rem;
  display: block;
}
.header_content{
  justify-content: space-between;
  align-items: flex-start;
  padding:30px 30px 0;
  box-sizing: border-box;
}
.fix_btn{
  width:65%;
  margin:0 auto;
  position:fixed;
  top:0;
  left:10px;
  
  border-radius: 5px;
  display: none;
  z-index:900;
}
.fix_btn.active{
  display: block;
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes fadein {
  0% {
     opacity: 0;
     transform: translateY(0);
  }
  100% {
     opacity: 1;
     transform: translateY(20px);
  }
}
.fix_btn.active a img{
  width:100%;
}
/*
-------------------------------
footer
-------------------------------
*/
.footer_menu{
  padding:5px 0;
}
footer{
  padding:5px;
  background-repeat: repeat;
  box-sizing: border-box;
}
footer .header_inner {
  width: 50%;
  margin: 30px 0 30px auto;
  }
.footer_content a, .footer_content a img {
  width: 120px;
  display: block;
  padding-left:2rem;
  box-sizing: border-box;
  }
  .footer_content a.header_logo,.footer_content a.header_logo img{
    margin:0 auto 20px;
    padding-left:0;
  }
  .footer_inner{
    margin:0 auto;
    width:90%;
  }
ul.footer_nav{
  padding:10px 5%;
  width:100%;
  text-align: left;
}
ul.footer_nav li{
  padding:5px 0;
  font-size:14px;
  margin-bottom:0;
}
.footer_content{
  display: block;
  width:95%;
  margin:30px auto;
  text-align: center;
  padding-top:0;
  padding-bottom:0;
}
.footer_content figure{
  width:80%;
  margin:0 auto 30px;
  padding-left:0;
}
.footer_content figure img{
  width:100%;
}
.footer_content img.logo{
  margin-bottom: 30px;
  width:120px;
  margin-left:1rem;
}
.footer_text{
  width:100%;
  padding:5px 10px;
}
.footer_policy a{
  padding:0 5%;
  font-size:var(--fs-small);
}
.footer_policy a::after{
  right:0.5%;
  top:6px;
}
.copy{
  font-size: 12px;
}
/* 共通項目 */
.wrapper{
  margin:100px auto 0;
  padding:0 2.5%;
  box-sizing: border-box;
}
h3.sub_title{
  font-size:3.6rem;
  color:#e8e8e8;
  font-weight:bold;
  margin-bottom:1em;
}
h3.sub_title span{
  font-size:2rem;
  padding-left:1em;
  color:#595959;
  font-family:var(--english-font);
}
a.btn{
  display: block;
  width:180px;
  height:50px;
  border-radius: 25px;
  background-color: var(--main-color);
  color:#fff;
  position:relative;
  line-height:50px;
  margin:60px 0 0 auto;
  font-size:2rem;
  font-weight:bold;
}
a.btn::after{
  position:absolute;
  content:"";
  width:10px;
  height:14px;
  background: url(../images/index/arrow.png) center center no-repeat;
  background-size: cover;
  right:3rem;
  top:19px;
  color:#fff;
}
/* ----------------------------------
mv
---------------------------------- */
/* メインヴィジュアルスライドアニメーション */
.fade-mv {
  position: relative;
  width:100vw;
  aspect-ratio: 9 / 9;
}
.fade-mv img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index:-5;
}
.fade-mv img.active {
  opacity: 1;
  z-index: -2;
}
.mv_detail{
  position:relative;
  height:100%;
  padding-top:10vw
}
.mv_detail p{
  position:absolute;
  font-size:2.4rem;
  font-family: var(--english-font);
  font-weight:bold;
  bottom:2.4em;
  right:5%;
  color:#fff;
}
.fade-mv h1{
  font-size:4rem;
  font-family: var(--f-f-mincho);
  font-weight:bold;
  z-index:5;
  width:100%;
  max-width: 1000px;
  margin:0 auto 0 5%;
  color:var(--main-font-color);
}
.fade-mv h1 span{
  display: block;
  padding-top:0.5em;
  padding-bottom:0.5em;
  background-color: rgba(255,255,255,0.7);
  margin-left:-500%;
  padding-left:500%;
  height:100%;
}
/* ----------------------------------
about
---------------------------------- */
.about_content{
  display: block;
  
}
.about_content img{
  width:100%;
  
}
.about_detail{
  padding-right:0;
  font-size:1.6rem;
}
.about_detail h4{
  font-family: var(--f-f-mincho);
  margin-bottom: 1em;
  font-size:3.6rem;
}
/* ----------------------------------
works
---------------------------------- */
/* .slider {
  margin: 0 auto;
  max-width: 1280px;
} */
.slider.slider_category{
  margin-top:100px;
}
.slider-img {
  margin: 0 5px;
}
.thumb_image{
  width:100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.slider-img img {
  width:90%;
  height:180px;
  object-fit: cover;
  margin:0 auto;
}
.slide-arrow {
  background-color: transparent;
  bottom: 60px;
  height: 20px;
  margin: auto;
  position: absolute;
  top: 23px;
  width: 20px;
  border:none;
}
.prev-arrow{
  width:30px;
  height:30px;
  background: url(../images/index/prev_btn.png) center center no-repeat;
  background-size: contain;
  left: 10px;
  z-index:2
}
.next-arrow{
  width:30px;
  height:30px;
  background: url(../images/index/next_btn.png) center center no-repeat;
  background-size: contain;
  right: 10px;
}
.news_title{
  margin-top:0.8em;
}
.news_title,.site_link_btn{
  font-size:1.6rem;
  padding-left:2em;
  color:var(--main-font-color)
}
.slider a{
  text-decoration: none;
}
/* ----------------------------------
skills
---------------------------------- */
/* .skills ul{
  display: block;
} */
.skills ul li{
  width:30%;
  margin-bottom:1.6rem;
}
.skills ul li img{
  width:100%;
}
.skills p{
  margin-top:40px;
  font-size:1.6rem;
}
.skills p a{
  font-size:2rem;
  color:rgba(163, 0, 0, 0.808);
  font-weight:bold;
}
/* ----------------------------------
voice
---------------------------------- */
.voice h4 img{
  width:100%;
}
.voice_content{
  display: block;
  align-items: center;
  justify-content: space-between;
  padding:2rem;
  margin-top:4rem;
  background: url(../images/index/voice_bg.jpg);
}
.voice_content img{
  display: block;
  margin:0 auto;
}
.voice_detail{
  padding-left:0;
  margin-top:24px;
}
.voice_detail_title{
  font-size:2.4rem;
  font-family: var(--f-f-mincho);
  margin-bottom:0.5em;
}
.voice_detail p{
  font-size:1.6rem;
}
/* ----------------------------------
company
---------------------------------- */
.wrapper.company{
  position:relative
}
.company_content{
  background: url(../images/index/company_bg.jpg) top left no-repeat;
  background-size: cover;
  padding-top:100px;
  padding-bottom:200px;
}
.company_content h3.sub_title{
  max-width: 1280px;
  margin:0 auto 30px;
}
.company_content{
  overflow-x: hidden;
}
.detail_link{
  position:absolute;
  width:90%;
  max-width:768px;
  position:absolute;
  left:0;
  right:0;
  margin:0 auto;
  bottom:100px;
  z-index: 1;
  background-color: var(--main-color);
  padding:40px;
  color:#fff;
  box-sizing: border-box;
  font-size:2rem;
  font-family: var(--f-f-mincho);
}
.wrapper.recruit{
  margin:0 auto;
}
.detail_link .btn{
  background-color: #fff;
  color:var(--main-color);
}
.recruit h3.ta_r{
  text-align: left;
}
.recruit .detail_link{
  left:0;
  right:0;
  margin:0 auto;
}
.recruit .company_content{
  background: url(../images/index/company_bg.jpg) bottom left no-repeat;
  background-size: cover;
  padding-top:100px;
  padding-bottom:200px;
}
.company a.btn::after{
  background: url(../images/index/company_arrow.png) center center no-repeat;
}
/* ----------------------------------
access
---------------------------------- */
.access_detail{
  display: block;
  text-align: center;
  margin-bottom:40px;
}
.address p{
  font-size:2.4rem;
  margin-top:1.5em;
}
.access iframe{
  width:100%;
  height:500px;
}
.map{
  margin-bottom:150px;
}
/* ----------------------------------
ぱんくず
---------------------------------- */
.breadcrumbs{
  display: flex;
  align-items: center;
}
.arrow{
  display: block;
  width:7px;
  height:7px;
  border-right:1px solid #3e3e3e;
  border-bottom:1px solid #3e3e3e;
  margin:0 10px 0 7px;
  transform: rotate(-45deg);
}

/* ----------------------------------
site
---------------------------------- */
.main_single{
  padding:0 5%;
  margin:0 auto;
}
.post_title{
  margin:60px 0;
}
.post_title h2{
  font-size:4rem;
  font-weight: bold;
}
.main_site_detail{
  margin:48px 0;
  font-size:2.4rem;
}
.b_a_title{
  color:red;
  font-size:2rem;
  font-weight:bold;
}
.wp-block-media-text{
  margin:60px auto 15px;
}
.wp-block-media-text>.wp-block-media-text__content{
  padding:12px 0!important;
}
/* ----------------------------------
company-page
---------------------------------- */
.company-page-mv{
  padding-top:3em;
  padding-bottom:3em;
  font-size:6rem;
  background-size: cover;
  font-family: var(--f-f-mincho);
  color:#fff;
  font-weight:900;
}
.company-ceo-content{
  position:relative;
}
.company_detail{
  margin-left:0;
  padding-left:3%;
  padding-right:3%;
  padding-top:3rem;
  padding-bottom:3rem;
  background-color: #e8e8e8;
  font-size:1.6rem;
}
.company_detail h3{
  font-size:4.8rem;
  color:#fff;
  margin-bottom:0.5em;
  font-weight:bold;
}
.company_detail p{
  line-height: 1.7;
}
.company_detail p img{
  width:90%;
}
.company-ceo-content img.ceo_image{
  position:static;
  display: block;
  margin:16px auto;
  width:100%;
}
.outiline table{
  width:100%;
  margin:60px auto;
  font-size:2rem;
}
.outiline table tr th,
.outiline table tr td{
  padding:16px;
  box-sizing: border-box;
}
.outiline table tr th{
  font-weight:bold;
  width:30%;
}
.outiline table tr:nth-child(odd){
  background-color: #e8e8e8;
}
.outiline table tr:nth-child(even){
  background-color: #f7f7f7;
}
/* ----------------------------------
agriculture
---------------------------------- */
.agri_top{
  margin:100px auto;
  padding:0 5%;
}
.agri_top h3{
  font-size:24px;
  font-weight:bold;
  margin-bottom:0.5em;
}
.agri_top_content{
  display: block;
}
.agri_top_content img{
  width:100%;
  margin-bottom:1rem;
}
.agri_top_content p{
  padding:0;
}
.agri_bottom{
  position:static;
  height:auto;
  padding:0 5%;
}
.agri_image{
  display: none;
}
.agri_image1{
  position:static;
  width:100%;
  margin-bottom:30px;
}
.agri_image2{
  position:static;
  display: block;
  width:60%;
  margin:0 auto;
}
/* ----------------------------------
recruit-page
---------------------------------- */
.recruit_mv{
  margin-top:60px;
}
.recruit_mv h2{
  font-family: var(--f-f-mincho);
  font-size:4rem;
  margin-bottom:1.6rem;
  padding-left:8px;
}
.recruit_mv figure{
  margin:0;
}
.recruit_mv figure img{
  width:100%;
}
.message{
  position:relative;
}
.message_head{
  display: block;
  justify-content: space-between;
}
.message_head img{
  width:100%;
}
p.message_text{
  writing-mode: inherit;
  font-family: var(--f-f-mincho);
  color:var(--main-color);
  font-size:3.6rem;
  text-align: center;
  line-height: 1.5;
  margin-top:1em;
}
.message_detail{
  font-size:1.6rem;
  margin-top:3rem;
  padding:2rem;
}
.message::after{
  content:"";
  position:absolute;
  top:-50%;
  transform: translateY(50%);
  left:-100%;
  width:200%;
  height:100%;
  background: url(../images/recruit/recruit_bg.jpg) bottom center no-repeat;
  background-size: contain;
  z-index: -1;
}
.condition table{
  width:100%;
  margin:60px auto;
  font-size:2rem;
}
.condition table tr th,
.condition table tr td{
  padding:16px;
  box-sizing: border-box;
}
.condition table tr th{
  font-weight:bold;
  width:30%;
}
.condition table tr:nth-child(odd){
  background-color: #e8e8e8;
}
.condition table tr:nth-child(even){
  background-color: #f7f7f7;
}

/* 問い合わせフォーム */
.mw_wp_form{
  padding:30px 5%;
  background-color: #f1f1f1;
}
.contact{
  margin:100px auto 150px;
  width:100%;
  max-width:880px;
  padding:0 5%;
}
.contact_head{
  margin-bottom:100px;
}
.contact_head h3{
  font-size:36px;
  font-weight:bold;
  color:var(--main-color);
  margin-bottom:50px;
  text-align: center;
  background: url(../images/recruit/recruit_bg.jpg) center center no-repeat;
  background-size: cover;
  padding-top:80px;
  padding-bottom:80px;
  box-sizing: border-box;
  font-family: var(--english-font);
}

.contact_head h3 span{
  font-size:18px;
}
.contact_head p{
  text-align: left;
  font-size:14px;
  margin-top:100px;
}
.mw_wp_form h3{
  margin-bottom:8px;
}
.mw_wp_form h3 span{
  display: inline-block;
  padding:3px 5px;
  background-color: var(--main-color);
  color:#fff;
  font-size:1.2rem;
}
.contact form p{
  font-size:14px;
  margin-bottom:8px;
}
.contact form p span.form_label{
  padding:3px 5px;
  background-color: #808080;
  color:#fff;
}
.contact form p span.red{
  padding:3px 5px;
  margin-left:3px;
  font-size:10px;
  background-color: #29abe2;
  color:#fff;
}
.contact form select{
  box-sizing: border-box;
  appearance: none;
  border:none;
}
.contact form input[name="name"],
.contact form input[name="rubi"],
.contact form input[name="address"],
.contact form input[type="email"],
.contact form textarea,
.contact form select{
  width:50%;
  padding:8px;
  font-size:14px;
  border:none;
  background-color: rgb(250, 250, 250);
  border-radius:7px;
}
.contact form input[type="text"]{
  padding:8px;
  border:none;
  background-color: rgb(250, 250, 250);
  border-radius:7px;
}
.contact form input[name="tel"],
.contact form input[name="add_number"]{
  width:20px;
}
.contact form input[type=submit]{
  padding:15px 0;
  width:200px;
  border:none;
  background-color: rgb(161, 161, 161);
  color:#fff;
}
.mw_wp_form .error{
  margin-top:5px;
}
}