@charset "utf-8";
/* -------------------------------------
     sp CSS
 (c) Copyright 2020 Sketches of Design
     version 2020-12-26
------------------------------------- */

/* 1280
--------------------------------------*/
@media screen and (max-width: 1280px) {

  body#recruit-idx main #main-pic .logo img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
  }

}
/*  1024
--------------------------------------*/
@media screen and (max-width: 1024px) {
  img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
  }
/**/
body.guide main .attention{
  margin: 30px 5%;
}
body#interview-prospective .content section:not(#entry-area) .inner{
  margin: 0 5% 20px 5%;
  overflow: hidden;
}
body.interview main .pointintime,
main section .inner{
  margin: 0 5%;
  width: auto !important;
}
.thumb-list {
  margin: 60px 5% 0 5%;
  width: auto !important;
}
body.company #main-pic{
  background-size: contain !important;
}
body.company #main-pic p{
  width: 58%;
}
body#business-idx #lv02-01 .pagenav li{
  width: calc(33.33% - 10px) ;
}
body#business-idx #lv02-01 .pagenav .title{
  margin: 0 0 5px 0;
  line-height: 1.4;
}
body#business-idx #lv02-01 .pagenav .title img{
  margin: 0;
}
body#business-idx #lv02-01 .pagenav .title,
body#business-idx #lv02-01 .pagenav .title span{
  display: block;
}
body#recruit-idx #company-area .col2 > .text,
body#recruit-idx #company-area .image{
  width: calc(50% - 20px);
}
body#recruit-idx #recruit2024-area .image,
body#recruit-idx #message-area .image{
  width: 40%;
}
body#recruit-idx #recruit2024-area .col2 > .text,
body#recruit-idx #message-area .col2 > .text {
  width: calc(60% - 40px);
}
body#recruit-idx #recruit-area h2,
body#recruit-idx #message-area .text h2{
  margin: 0 0 20px 0;
}
body#recruit-idx main .menu-area .inner{
  padding: 20px;
}
/*body#recruit-idx main .menu-area .col2 > *{
  width: 48%;
  max-width: 48% !important;
  height: auto;
}
body#recruit-idx main .linkblock p.image{
	background-size: contain;
	background-position: top center !important;
  padding: 20px;
}*/
body#recruit-idx main .linkblock p.image span{
  height: 46%;
}
body#recruit-idx main .linkblock:hover p.image{
  background-size: contain !important;
}
main #entry-area.floating .inner{
  margin: 0;
}
body.interview main #lv02-05:not(.comment) .inner{
  display: block !important;
}
body.interview main #lv02-05 h2::after{
  right: 0;
  left: 0;
  transform: rotate(90deg);
  top: auto;
  bottom: -25px;
}
body.interview main #lv02-05 .inner p.image{
  margin-left: 0;
}
body.interview main #lv02-05 .inner h2 br{
  display: none;
}
body#interview-prospective .content .image-01{
  width: 200px;
}
body#interview-prospective .content .image-02{
  width: 150px;
}
body#interview-prospective .content #ozaki .image-02{
  width: 100px;
}
body#interview-prospective .content .lv03-02 {
  width: calc(100% - 220px);
}
body#interview-prospective .content .textarea {
  width: calc(100% - 170px) !important;
}
body#interview-prospective .content #nishida .image-02,
body#interview-prospective .content #matsuda .image-02{
  width: 120px;
}
/*body#interview-prospective .content #fujita .image-02{
  width: 250px;
}
body#interview-prospective .content #fujita .textarea{
  width: calc(100% - 270px) ;
}*/
body#interview-prospective .content .pagenav,
body#interview-prospective .content section .inner{
  margin: 40px 5% 0 5%;
}
#ban_internship,
body#recruit-qa .content .bgW{
  margin: 40px 5% 0 5%;
}
body#message-idx #lv02-02 .image{
  width: 300px;
}
body#message-idx #lv02-02 .text{
  width: calc(100% - 320px);
}
body#recruit-idx #recruit2024-area .text h2{
  font-size: 1.8rem;
}

body#message-idx #lv02-02 .image,
body#message-idx #lv02-03 .image,
body#message-idx #lv02-04 .image{
  width: 300px;
}
body#message-idx #lv02-02 .text,
body#message-idx #lv02-03 .text,
body#message-idx #lv02-04 .text{
  width: calc(100% - 320px);
}
body#recruit-idx main #main-pic h1{
  font-size: 2.3rem;
}
body#recruit-idx main .opencompany{
  margin: 40px 5% 0 5%;
  width: auto;
}
body#recruit-idx .btn_area{
  width: 80%;
}


}


@media only screen and (max-width: 1000px) {
    #recruit-menu {
      top: 56px;
    }
    #recruit-menu p.siteid{
      font-size: 2.0rem;
    }

}

/*  960
--------------------------------------*/
@media screen and (max-width: 960px) {

#recruit-menu p.siteid{
  top: 15px;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
}
#recruit-menu > ul > li{
  margin: 0 0 0 1em;
  font-size: 1.4rem;
}


/* font */
main h1{
  font-size: 5.0rem;
}

body#recruit-idx main .tabs{
  margin-left: 20px;
}
body#recruit-idx main .tabs li{
  font-size: 2.4rem;
}
body.interview main #lv02-05 h2,
main h2{
  margin: 60px 0 30px 0;
  font-size: 2.4rem;
}
body#recruit-recruitidx #lv02-02 .willcan h4,
main h3{
  font-size: 2.0rem;
}
body#recruit-process #lv02-01 ul .title,
body#business-idx #lv02-01 .catch{
  font-size: 1.8rem;
}
body#recruit-idx main #archive-area .event .title,
body#recruit-idx main #event-area .event .title,
body#company-idx #lv02-01 p,
#main-pic p{
  font-size: 1.6rem;
}
body#recruit-idx main #main-pic .inner{
  padding: 30px;
}
body#recruit-idx main #main-pic p{
  font-size: 1.5rem;

}
body#business-idx #lv02-01 .catch span,
main p,
main dl,
main table,
main ul,
main ol{
  font-size: 1.3rem;
}
.weak{
  font-size: 1.1rem;
}
#main-pic{
  padding: 40px 0;
  background-size: contain !important;
}
#main-pic h1{
	background-size: 17px 73px !important;
  height: 73px;
}
#main-pic h1.wide{
	background-size: 16px 123px !important;
	height: 123px;
}
#main-pic h1 span{
  margin: 0 0 0 17px;
	background-size: auto 65px !important;
  height: 65px;
}
#main-pic h1.wide span{
  margin: 0 0 0 15px;
  background-size: auto 116px !important;
  height: 116px;
}

main #entry-area.entry-bottom .inner ul.link li a{
  padding: 10px 40px;
  width: auto;
}


/**/
body#company-idx #lv02-01 .text{
  width: 560px;
}
body.interview #main-pic{
  min-height: auto;
}
body.interview #main-pic .mv{
  top: -20px;
  width: 320px;
}
body.interview #main-pic .profile{
  margin: 30px 0 -50px 0;
  padding: 16px;
  max-width: 100%;
  width: calc(100% - 360px) ;
}
body.interview #main-pic .catch{
  width: calc(100% - 340px);
}
body.interview main .inner h2{
	background-size: 40px 40px !important;
	padding: 10px 0 10px 52px;
}
body#job-idx .job-detail h3,
body#job-idx .job-detail h2{
  font-size: 2.0rem;
}
body#job-idx .job-detail h2{
  padding: 16px;
}
#recmenu li{
  width: calc(33% - 10px) ;
}
#recmenu li a{
  padding: 15px 15px 15px 35px;
	background-size: 30px 30px !important;
}
body.guide #main-pic{
  padding: 40px 0;
}
body#recruit-idx .column2 section{
  width: 50%;
}
body#recruit-idx #recruit-area #recmenu{
  width: 100%;
}
body#message-idx #main-pic .mv{
  width: 300px;
}
body#message-idx #main-pic .profile{
  width: calc(100% - 340px) ;
}
body#message-idx #main-pic h1 {
  margin: 0 0 40px 0;
}
body#message-idx section h2 .sub {
  font-size: 1.4rem;
}
body#recruit-recruitidx #pu-area .inner div {
  width: 50%;
}
body#recruit-process #lv02-01 h3{
  padding: 15px;
}
body#recruit-process #lv02-01 h3{
  font-size: 1.8rem;
}
body#recruit-process #lv02-01 h3 span em {
  margin: 0 10px 0 5px;
  font-size: 2.0rem;
}
body#recruit-process #lv02-01 ul .tag {
  background: #006FAA;
  padding: 3px 0 5px 0;
}
body#recruit-process #lv02-01 section div{
  padding: 15px;
}
body.interview main .interview-link p.title{
  margin: -50px 0 0 1em;
}



}
/*  768
--------------------------------------*/
@media screen and (max-width: 768px) {

/*body#recruit-idx main .col3 > *{
  margin: 0 0 10px 0;
  width: 100%;
}*/

body:not(#home) main{
  padding-top: 0;
}

main #entry-area.floating .link li{
  margin: 0 0 0 5px;
}

main #entry-area.entry-bottom .inner{
  padding: 20px;
}
main #entry-area.entry-bottom .inner ul.link li,
main #entry-area.floating .inner ul.link li{
  font-size: 1.5rem;
}
main #entry-area.floating .inner ul.link li a{
  width: 110px;
}

main #entry-area.entry-bottom .inner ul.link li a{
  padding: 10px 25px;
}



body#recruit-idx main #main-pic{
  background-size: 1000px auto !important;
  padding: 40px 20px 20px 20px;
}
body#recruit-idx main #main-pic .logo{
  margin: 0 auto;
  padding: 0;
}
body#recruit-idx main #main-pic .inner{
  width: 100% !important;
}
body#recruit-idx main #main-pic h1{
  margin: 0 0 10px 0;
}
body#recruit-idx main #main-pic p{
  font-size: 1.3rem;
}
body#recruit-idx main #news-area{
  margin-top: 30px;
}
body#recruit-idx main #archive-area{
  padding-top: 140px;
}
body#recruit-idx main #archive-area h2{
  margin-top: 20px;
}

#recruit-menu{
  display: block;
  border-bottom: none;
  background-color: transparent;
  width: auto;

}

#recruit-menu{
  position: fixed;
  top: auto;
  bottom: 10px;
  left: 0;
/*
  border: 1px solid #e60000;
  border-radius: 21px;
  background-color: #fff;
  width: 100%;
  height: 42px;*/
  z-index: 101;
  transition: 0.3s;

}

#recruit-menu p.siteid{
  display: none;
}
#recruit-menu p.siteid a{
  pointer-events: none;
}
#recruit-menu p.btn{
  display: block;
  z-index: 100;
  position: relative;
  cursor: pointer;
  margin: 0 0 0 10px;
  border-radius: 40px;
  background-color: #e60000;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  transition: 0.3s;
}
#recruit-menu p.btn.close{

}
#recruit-menu > ul{
  display: none;
  
  position: absolute;
  left: 0;
  bottom: -10px;
  padding: 50px 24px 32px 24px;
  width: 100vw;
  height: calc(100vh - 56px);
  background-color: #e60000;
  z-index: 10;
}

#recruit-menu > ul li{
  margin: 0 0 0.75em 0;
  font-size: 2.2rem;
}
#recruit-menu ul li a{
  padding: 5px 0;
}
#recruit-menu ul li.home{
  display: block;
}
/*
#recruit-menu > ul li.parent > a{
  display: inline-block;
}*/
/*
#recruit-menu > ul li.parent > a::after{
  content: "+";
  position: absolute;
  right: -23px;
  top: 10px;
  bottom: 0;
  margin: auto;
}
#recruit-menu > ul li.parent a.close::after{
  content: "－";
  right: -26px;

}*/
#recruit-menu ul li a{
  color: #fff;
}
#recruit-menu ul li a:hover{
  color: #fff !important;
  opacity: 0.5;
}

#recruit-menu > ul .sub{
  display: flex !important;
  flex-wrap: wrap;

  position: static;
  margin-top: 0.75em;
  background-color: transparent;
  padding: 0 0 0 1em;

}
#recruit-menu > ul .sub li{
  margin: 0.35em 0 0 0;
  font-size: 1.6rem;
  width: 50%;

}

#recruit-menu.scroll p.btn{
  background-color: transparent;
  width: 42px;
  height: 42px;
  line-height: 42px;
}


#recruit-menu.close p.btn{
    height: 42px;
    width: 200px;
    margin: 0 0 10px 10px;

}
#recruit-menu.scroll p.btn{

    height: 42px;
    width: 200px;
    font-size: 1.0rem;
    border: 1px solid #e60000;
    color: #000;
    background: #fff;
    z-index: 100;

    margin: 0 0 10px 10px;
}
#recruit-menu.close p.btn span,
#recruit-menu.scroll p.btn span{
  display: block;
  position: absolute;
  right: 10px;

    background: url(../img/nav-menu.png) center 12px no-repeat;
    padding: 7px 0 0 0;
    background-size: 50%;
}
#recruit-menu.close p.btn{

    background: #e60000;
}
#recruit-menu.close p.siteid em,
#recruit-menu.close p.siteid a{
  color: #fff;
}
#recruit-menu.close p.btn span{

    background: url(../img/nav-menu-close.png) center center no-repeat;
    text-indent: -10000px;
    display: block;
    width: 30px;
    height: 40px;
    background-size: 20px;
    padding: 0;

    left: 15px;
    bottom: -5px;
}
#recruit-menu.close p.siteid,
#recruit-menu.scroll p.siteid{
  
    display: block;
    position: absolute;
    left: 30px;
    top: auto;
    bottom: 50px;
    margin: auto;
    line-height: 22px;
    z-index: 101;
    font-size: 1.3rem;

    width: calc(100vw - 30px);
    height: 40px;
}
body#recruit-idx main #news-area .inner{
  padding: 10px 0 10px 10px;
}
body#recruit-idx main #news-area h2{
  font-size: 1.6rem;
  width: 85px;
}
body#recruit-idx main #news-area #news-wrap{
  padding-left: 10px;
  width: calc(100% - 80px);
}
body#recruit-idx main #news-area dt{
  position: static;
}
body#recruit-idx main #news-area dd{
  padding: 0 20px 0.8em 0;
}
/*body#recruit-idx main .col3 > *{
  margin: 0 0 15px 0;
  max-width: 100%;
}*/
body#recruit-idx main .archive{
  margin: 0 auto 40px auto;
}
body#recruit-idx main .archive .inner{
  margin: 0;
  padding: 30px 20px;
  border-radius: 0;
}
body#recruit-idx main .archive h3{
  margin: 0 0 20px 0;
}
body#recruit-idx main .archive h4{
  margin: 0;
  font-size: 1.3rem;
}
body#recruit-idx main .archive .col3{
  justify-content: space-between;
}
body#recruit-idx main .col3 .archives{
  margin-right: 0;
  width: calc(33.33% - 5px);
}
body#recruit-idx main .col3 .video_wrap{
  margin-bottom: 10px;
}



body#recruit-idx main #archive-area .col2 > *,
body#recruit-idx main .col2 > *{
  margin-right: 20px;
  width: calc(50% - 10px);
}
body#recruit-idx main #archive-area .col2 > *:nth-of-type(2n){
  margin-right: 0;
}
#archive-area .image,
body#recruit-idx main #archive-area .video_wrap{
  margin-bottom: 10px;
}
body#recruit-idx main #archive-area .inner,
body#recruit-idx main #event-area .inner{
  margin: 0 20px;
}
body#recruit-idx main #archive-area .event,
body#recruit-idx main #event-area .event{
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 10px 0;
  padding: 0;
  width: 100%;
}
body#recruit-idx main #archive-area .event .image,
body#recruit-idx main #event-area .event .image{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 15px;
  border: none;
  width: 220px;
  font-size: 2.0rem;
  letter-spacing: 0;
}
body#recruit-idx main #archive-area .event ul,
body#recruit-idx main #event-area .event ul{
  padding: 15px;
  width: calc(100% - 220px);
}
body#recruit-idx main #archive-area .event .date,
body#recruit-idx main #archive-area .event .tag,
body#recruit-idx main #event-area .event .date,
body#recruit-idx main #event-area .event .tag{
  margin: 0 0 5px 0;
}
body#recruit-idx main #archive-area .event .tag span,
body#recruit-idx main #event-area .event .tag span{
  font-size: 1.2rem;
}
body#recruit-idx main #archive-area .event .title,
body#recruit-idx main #event-area .event .title{
  margin: 0 0 40px 0;
  font-size: 1.4rem;
}
body#recruit-idx main #archive-area .event .link,
body#recruit-idx main #event-area .event .link,
body#recruit-idx main #event-area .event .link{
  bottom: 15px;
  right: 15px;
  height: auto;
}
body#recruit-idx main #archive-area .event .link a,
body#recruit-idx main #event-area .event .link a{
  padding: 2px 12px;
  font-size: 1.2rem;
  height: 25px;
}

body#recruit-idx main #event-area .event .space img{
  padding: 10px;
}
body#recruit-process #lv02-01 ul .title,
body#recruit-idx #interview-area .title,
body#business-idx #lv02-01 .catch{
  font-size: 1.6rem;
}
body#company-idx #lv02-01 p,
#main-pic p{
  font-size: 1.3rem;
}
body#business-idx #lv02-01 .catch span{
  font-size: 1.1rem;
}
body#business-idx #lv02-01 div .pic figcaption{
  font-size: 0.9rem;
  line-height: 1.3;
}
/* diagram */
.diagram .sp{
  display: block !important;
}
.diagram .image{
  display: none;
}
.diagram{
  position: relative;
}
.diagram span{
  display: block;
  position: absolute;
  width: 30px !important;
  height: 30px !important;
  right: 10px;
  margin: -40px 0 0 0;
}
.diagram img{
  max-width: 100%;
  height: auto;
  width /***/:100%;
}
/**/
br.sp{
  display: block;
}
main h2{
  margin: 60px 0 20px 0;
}
main section:first-child h2{
  margin: 40px 0 20px 0;
}
main .link a{
  padding: 8px 40px;
}
body#company-idx #lv02-01 .text{
  width: auto;
}
body#company-idx #lv02-02{
  background-position: 0 260px;
}
main .swiper-slide{
  width: 400px;
}
body#business-idx #lv02-01 .pagenav .title{
  display: flex;
  justify-content: flex-start;
}
body#business-idx #lv02-01 .pagenav a{
  padding: 5px 5px 5px 30px;
}
body#business-idx #lv02-01 .pagenav .title{
  margin: 0;
}
body#business-idx #lv02-01 .pagenav .title img{
  margin: 0 5px 0 0;
}
body#business-idx #lv02-01 .pagenav li{
  margin: 0 0 5px 0;
  width: 100%;
  border-radius: 5px; 
}
body#business-idx #lv02-01 div .pic li{
  width: calc(33.33% - 2px) ;
}
body#business-idx #lv02-01 .pagenav a::before{
  top: 0;
  bottom: 0;
  left: 15px;
  right: auto;
  width: 5px;
  height: 5px;
}
body#business-idx #lv02-01 .inner div{
  padding: 20px;
}

main #entry-area .inner.col2 > *{
  width: 100%;
}
main #entry-area .inner h3{
  margin: 10px 0;
}
main #entry-area .inner ul.link li:first-of-type{
  margin-right: 0;
}
main #entry-area .inner ul.link li a{
  padding: 20px 40px;
  width: auto;
}
main .swiper-button-prev,
main .swiper-button-next{
  top: 42%;
}
main .swiper-button-prev{
  left: 20px;
}
main .swiper-button-next{
  right: 20px;
}

body.interview #main-pic .mv{
  position: static;
  width: auto;
}
body.interview #main-pic .catch{
  width: auto;
  font-size: 1.6rem;
}
body.interview #main-pic .profile{
  margin: 20px 0 -50px 0;
  width: 100%;
  border-radius: 10px 10px 0 0;
}
body.interview main #lv02-04 .inner,
body.interview main #lv02-02 .inner{
  display: block;
}
body.interview main #lv02-02 .inner p.image{
  max-width: 50%;
  margin: 0 auto 1em auto;
}
body.interview main #lv02-04 .inner p.image{
  /*margin: 0 0 0 66%;*/
  margin: 20px 0 0 0;
  text-align: center;
}
body.interview main #lv02-05 .inner .text{
  border-radius: 10px;
}
main #interview-menu .inner > div{
  margin: 0 0 15px 0;
  border-radius: 10px;
  width: calc(33.33% - 10px) ;
}
main #interview-menu .inner > div div{
  padding: 5px 10px 10px 10px;
}
body#job-idx #lv02-00 .inner > div{
  display: block;
}
body#job-idx #lv02-00 .inner > div h3{
  margin-bottom: 10px;
}
body#job-idx #lv02-00 .inner > div h3 br{
  display: none;
}
body#job-idx #lv02-00 .inner > div ul{
  justify-content: space-between;
  max-width: 100%;
}
body#job-idx #lv02-00 .inner > div ul li{
  margin: 10px 0 0 0 !important;
  width: calc(33.333% - 5px);
  font-size: 1.2rem;
}
body#job-idx .job-detail .inner div {
  padding: 10px 16px;
}
body#job-idx .job-detail .inner .flex .lead{
  width: 100%;
}
body#job-idx .job-detail .inner .flex .bannes{
  margin: 0 auto 10px auto;
}
body#interview-prospective #main-pic {
  padding: 40px 0 0 0;
}
body#interview-prospective .content .pagenav li{
  width: calc(25% - 10px) ;
}
body#interview-prospective .content .pagenav::after,
body#interview-prospective .content .pagenav::before{
  content:"";
  display: block;
  width: calc(25% - 10px) ;
}
body#interview-prospective .content .pagenav::before{
  order:1;
}
/*body#interview-prospective .content .pagenav li img{
  width: 100px;
}*/
body#interview-prospective .content .pagenav span {
  margin: 5px 0 0 0;
  font-size: 1.4rem;
}
body#interview-prospective .content .pagenav li{
  margin: 0 0 20px 0;
}
body#interview-prospective .content .pagenav,
body#interview-prospective .content section .inner{
  margin: 20px 5% 0 5%;
}
#recmenu li {
  margin: 0 0 10px 0;
  width: calc(50% - 5px);
}
#youtube-movie {
  margin: 0 auto;
}

body.opencompany main section .inner .col2 > *{
  width: calc( 50% - 10px );
}
body.opencompany main #lv02-01 .inner .main-pic #entry-area{
  display: none;
}

body#message-idx #main-pic {
  padding: 20px 0;
}
body#message-idx #main-pic h1 {
  margin: 0 0 20px 0;
}
body#recruit-process #lv02-01 ul .text,
body#message-idx #lv02-02 .text,
body#message-idx #lv02-02 .image,
body#message-idx #lv02-03 .text,
body#message-idx #lv02-04 .text,
body#message-idx #lv02-04 .image,
body#message-idx #main-pic .mv,
body#message-idx #main-pic .profile{
  width: 100%;
}
body#message-idx #lv02-03 .image{
  width: 100%;

}
body#message-idx #main-pic .profile div {
  margin: 0 0 20px 0;
  border-radius: 10px;
  padding: 15px;
}
body#message-idx #lv02-05 {
  margin-top: -40px;
}

body#recruit-recruitidx #lv02-02 .willcan,
body#recruit-recruitidx #lv02-02 section h3 {
  padding: 15px;
}
body#recruit-recruitidx #lv02-02 .job {
  margin: 30px 15px 15px 15px;
  padding: 15px;
}
body#recruit-recruitidx #lv02-03 .box dt{
  width: 60px;
}
body#recruit-recruitidx #lv02-03 .box dd{
  width: calc(100% - 60px) ;
}
body#recruit-process #lv02-01 ul .tag{
  width: 40px;
}
body#recruit-process #lv02-01 ul .text{
  margin: 10px 0 0 0;
}
body.interview main .interview-link .brackets{
  display: block;
}
body.interview main .interview-link p.image{
  max-width: 100%;
}
body.interview main .interview-link p.title{
  margin: 0.5em 0 0.5em 0;
  text-align: center;
  font-size: 2.0rem;
}
body.interview main .interview-link p.link{
  position: static;
  margin-bottom: 10px;
}
body.opencompany .main-pic_cs{
  padding: 60px 30px !important;
}
body.opencompany .main-pic_cs p{
  font-size: 3.0rem;
}
body.opencompany .main-pic_cs p em{
  font-size: 5.0rem;
}
body.opencompany .main-pic_cs br{
  display: block;
}
body#recruit-idx main .opencompany{
  margin: 40px 20px 0 20px;
  width: auto;
}

}
/*  480
--------------------------------------*/
@media screen and (max-width: 480px) {

body#recruit-idx #recruit2024-area .image,
body#recruit-idx #message-area .image{
  width: 100%;
}
body#recruit-idx #recruit2024-area .col2 > .text,
body#recruit-idx #message-area .col2 > .text{
  width: 100%;
}
body#recruit-idx main .menu-area h2.pc{
  margin-top: 30px;
}
/*body#recruit-idx main #main-pic{
  top: 0;
}
body#recruit-idx main #main-pic h1{
    font-size: 1.8rem;
}
body#recruit-idx main #main-pic p {
    font-size: 1.2rem;
}*/
body#recruit-idx main #main-pic .logo{
  width: 70%;
}
body#recruit-idx main #main-pic{
  background-size: 800px auto !important;
}
body#message-idx section h2 br{
  display: none;
}


  main .link{
    margin: 30px 0;
  }
  #main-pic{
    padding: 30px 0;
  }
  #main-pic h1{
    margin: 0 0 15px 0;
    font-size: 3.4rem;
    background-size: 17px 54px !important;
    height: 54px;
  }
  #main-pic h1.wide{
  	background-size: auto 90px !important;
  	height: 90px;
  
  }
  #main-pic h1 span{
    margin: 0 0 0 15px;
    background-size: auto 49px !important;
    height: 49px;
  }
  #main-pic h1.wide span{
    margin: 0 0 0 12px;
    background-size: auto 84px !important;
    height: 84px;
  }
  
  body#recruit-recruitidx #pu-area .inner div,
  body#recruit-recruitidx #lv02-02 .willcan div,
  body#recruit-idx .column2 section,
  body#recruit-idx #message-area .image,
  body#recruit-idx #message-area .col2 > .text,
  body#interview-prospective .content #fujita .textarea,
  body#interview-prospective .content .image-01,
  body#interview-prospective .content .lv03-02,
  body.company #main-pic p,
  #main-pic p{
    width: 100%;
  }
  body#interview-prospective .content .textarea{
    width: 100% !important;
  }
  body.opencompany main #lv02-01 #entry-area .inner h3,
  main #entry-area .inner h3{
    margin-bottom: 20px;
  }
  main #entry-area .inner ul.link{
    display: block;
    margin-top: 0;
  }
  
  main #entry-area.entry-bottom .inner .col2,
  main #entry-area .inner ul.link,
  body#interview-prospective .content .block{
    display: block;
  }
  
  main #entry-area.entry-bottom .inner .col2 div{
    width: auto !important;
  }
  main #entry-area.entry-bottom .inner .col2 div li{
    margin: 0 0 5px 0;
    line-height: 1.5;
  }
  main #entry-area.entry-bottom .inner ul.link li a{
    min-width: 180px;
  }
  
  body#recruit-qa .content .bgW br,
  body#recruit-recruitidx h2 br,
  body#recruit-recruitidx #lv02-01 .box p br,
  body#business-idx #lv02-01 .catch br,
  body#message-idx section h2 br,
  body#recruit-idx main .menu-area h2.pc{
    display: none;
  }
  body.company #main-pic{
    background-position: right top;
  }
  body#recruit-idx main .menu-area {
    padding: 20px 0;
  }
  body#recruit-idx .column2 section{
    margin: 0 0 20px 0;
  }
  
  body#recruit-idx main .tabs li{
    margin-right: 10px;
  }
  body#recruit-idx main .tabs li a{
    padding: 10px 10px 0 10px;
  }
  body#recruit-idx main .tabs li a.active{
    padding: 10px;
  }
  body#recruit-idx main .tabs li{
    font-size: 1.7rem;
  }
  
  body#recruit-idx main #archive-area .event .image,
  body#recruit-idx main #event-area .event .image{
    width: 140px;
    font-size: 1.8rem;
  }
  body#recruit-idx main #archive-area .event ul,
  body#recruit-idx main #event-area .event ul{
    padding: 10px;
    width: calc(100% - 140px);
  }
  body#recruit-idx main #archive-area .event .tag span,
  body#recruit-idx main #event-area .event .tag span {
    font-size: 1.0rem;
  }
  body#recruit-idx main .archive h4,
  body#recruit-idx main #archive-area .event .date,
  body#recruit-idx main #event-area .event .date{
    font-size: 1.2rem;
  }
  body#recruit-idx main #archive-area .event .title,
  body#recruit-idx main #event-area .event .title {
    font-size: 1.3rem;
  }
  body#recruit-idx main #archive-area .event .link,
  body#recruit-idx main #event-area .event .link{
    bottom: 10px;
    right: 10px;
  }
  body#recruit-idx main #archive-area .event .link a,
  body#recruit-idx main #event-area .event .link a{
    display: block;
    padding: 0 12px;
    font-size: 1.0rem;
    height: 20px;
    line-height: 20px;
    letter-spacing: 0;
  }
  main .link span::before{
    width: 4px;
    height: 4px;
  }


  /**/
  body#business-idx #lv02-01 .inner div{
    margin: 0 0 10px 0;
    padding: 15px;
  }
  body#business-idx #lv02-01 h3{
    margin: 0 0 15px 0;
    font-size: 1.8rem;
  }
  body#business-idx #lv02-01 h3 img{
    margin: 0 6px 0 0;
    width: 30px;
    height: 30px;
  }
  body#company-idx #lv02-01 .text{
    padding: 20px;
  }
  body#company-idx #lv02-01 .text div{
    padding: 40px 15px;
  }
  body#company-idx #lv02-01 .text div::before,
  body#company-idx #lv02-01 .text div::after{
    width: 114px;
    height: 90px;
    background-size: 114px 90px !important;
  }
  body#company-idx #lv02-01 .text div::before{
    top: -21px;
    left: -30px;
  }
  body#company-idx #lv02-01 .text div::after{
    bottom: -21px;
    right: -30px;
  }
  body#business-idx #lv02-01 .catch{
    margin: 30px 0;
    text-align: left;
  }
  body#business-idx #lv02-01 .catch span{
    margin: 10px 0 0 0;
  }
  body#business-idx #lv02-01 .pagenav{
    margin: 0 0 20px 0;
  }
  body#business-idx #lv02-01 .pagenav .title img{
    width: 26px;
    height: 26px;
  }
  body#business-idx #lv02-01 .pagenav a::before{
    left: 10px;
  }
  body#business-idx #lv02-01 .pagenav a{
    padding: 5px 5px 5px 20px;
  }

  body#recruit-idx main .menu-area .col2 > *{
    width: 100%;
    max-width: 100% !important;
  }
  body#recruit-idx main #company-area,
  body#recruit-idx main #business-area{
    background-size: 660px auto !important;
    -webkit-background-size: 660px auto !important;
    -moz-background-size: 660px auto !important;
    -ms-background-size: 660px auto !important;
    -o-background-size: 660px auto !important;
  }
  body#recruit-idx main .linkblock p.image span{
    height: auto;
  }
  main #entry-area .link a{
    padding: 8px 10px;
  }
  body#company-idx #lv02-03 table tr th{
    min-width: 6em;
  }
  #btt{
    right: 10px;
    bottom: 80px;
  }
  main #entry-area.floating{
    right: 0;
  }
  main #entry-area.floating .inner{
    padding: 10px 10px 5px 10px;
  }
  main #entry-area .inner{
    padding: 20px 10px 10px 10px;
  }
  main #entry-area.floating .inner h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
  }
  main #entry-area.floating .inner ul.link{
    display: flex;
  }
  main #entry-area.floating .inner ul.link li{
    font-size: 1.3rem;
  }
  main #entry-area.floating .inner ul.link li a{
    padding: 10px;
    width: 80px;
  }
  main #entry-area.floating .inner ul.link li.mypage a{
    width: 80px;
  }
  main #entry-area.floating .inner ul.link li a span{
    padding: 0 8px 0 0;
  }
  main #entry-area .inner ul.link li:first-of-type{
    margin-right: 0;
  }
  main #entry-area .inner ul.link li a{
    padding: 16px 32px;
    width: 90%;
  }
  
  body#recruit-idx main .menu-area h2.sp{
    display: block;
    margin-top: 0;
  }
  body#recruit-idx main .menu-area .link{
    margin: 20px 0 0 0;
  }
  main #entry-area .inner h3{
    letter-spacing: 0.025em;
    font-size: 1.7rem;
  }
  main #interview-menu .inner > div{
    margin: 0 0 10px 0;
    width: calc(50% - 5px) ;
  }
  main #interview-menu .inner > div .job{
    font-size: 1.2rem;
  }
  body#interview-prospective .content section .inner{
    padding: 20px;
  }
  body#interview-prospective .content h3 {
    background-position: left 0;
      background-size: auto;
    background-size: 30px 30px !important;
    padding: 0 0 0 40px;
    line-height: 1.6 !important;
    font-size: 1.8rem;
  }
  body#interview-prospective .content .lv03-01 h3 span{
    font-size: 1.4rem;
  }
  body#interview-prospective .content .image-02{
    margin: 20px auto;
  }
  body#interview-prospective .content #takebayashi .image-01,
  body#interview-prospective .content #mori .image-01{
    margin-bottom: 20px;
  }
  body#recruit-information .content table td,
  body#recruit-information .content table th{
    display: block;
    width: 100%;
  }
  body#recruit-information .content table th{
    padding-bottom: 0;
    border-bottom: none;
  }
  body#recruit-information .content table td{
    padding-top: 10px;
  }
  body.guide #main-pic{
    padding: 20px 0;
  }
  body.opencompany main #lv02-01 .inner .main-pic{
    padding: 10px;
  }
  
  body#recruit-idx #entry-link .link li.entry a{
    width: 100% !important;
    font-size: 1.6rem;
    padding: 20px;
  }
  main #entry-area .col2 > *{
    width: 100%;
  }
  body.opencompany main section .inner .col2 > *{
    margin: 0 auto 10px auto;
    width: 100%;
  }
  
  body#message-idx #lv02-05{
    margin-top: 20px;
  }
  body#message-idx #lv02-05 .inner{
    padding: 0;
  }
  body#recruit-recruitidx #lv02-01 .box p{
    text-align: left;
  }
  body#recruit-recruitidx #lv02-02 .willcan div:first-child{
    margin: 0 0 10px 0;
  }
  body#recruit-recruitidx #lv02-01 h3,
  body#recruit-recruitidx #lv02-02 section h3{
    font-size: 1.6rem;
  }
  body#recruit-recruitidx #lv02-01 .box,
  body#recruit-recruitidx #lv02-03 .box{
    padding: 20px;
  }
  body#recruit-recruitidx #lv02-01 h3 {
    margin: 20px 0 10px 0;
  }
  body#recruit-recruitidx #pu-area .inner div,
  body#recruit-recruitidx #lv02-02 section {
    margin: 0 0 20px 0;
  }
  body#recruit-qa .content .bgW{
    padding: 20px;
    text-align: left;
  }
  body#recruit-qa .content .bgW br.sp{
    display: block;
  }
  body#interview-prospective .content .pagenav li{
    width: calc(33.33% - 20px) ;
  }
  

}
/*  375
--------------------------------------*/
@media screen and (max-width: 375px) {

  body#recruit-idx main .archive h4{
    font-size: 1.0rem;
  }
  body#recruit-idx main .archive .inner{
    padding: 30px 10px;
  }

  #recruit-menu > ul .sub li{
    font-size: 1.4rem;
  }
  main #interview-menu .inner > div{
    width: 100%;
  }
  main #interview-menu .inner > div a{
    display: flex;
    flex-wrap: wrap;
  }
  main #interview-menu .inner > div .image{
    width: 30%;
    line-height: 0;
  }
  main #interview-menu .inner > div .image img{
    height: 140px;
    border-bottom: none;
    object-fit: cover;
    border-radius: 10px 0 0 10px;
  }
  main #interview-menu .inner > div div{
    padding: 10px 10px 10px 15px;
    width: 70%;
  }
  main #interview-menu .inner > div .job{
    font-size: 1.1rem;
    line-height: 1.4;
  }
  main #interview-menu .inner > div .cat{
    top: 5px;
    padding: 0 5px 1px 5px;
    font-size: 1.0rem;
    line-height: 1.5;
  }
  /**/
  body#recruit-idx main #main-pic h1{
    margin: 0 0 8px 0;
    font-size: 1.5rem;
  }
  body#recruit-idx main #main-pic p{
    line-height: 1.5;
    font-size: 1.1rem;
  }


}
/*  350
--------------------------------------*/
@media screen and (max-width: 350px) {

body#recruit-idx main #main-pic p{
  line-height: 1.5;
  font-size: 1.0rem;
}


}