@charset "UTF-8";
/* CSS Document */
@media (max-width: 667px) {
  body {
    font-size: 1.4rem;
  }
  .pc_br {
    display: none;
  }
  .mobile {
    top: 10px;
  }
  .sp_job_btn {
    height: 40px;
    width: 120px;
    span {
      font-size: 1rem;
    }
  }
  #panel-btn {
    width: 55px;
    height: 40px;
  }
  .panel-btn-wrap {
    height: 25px;
    width: 25px;
  }
  #panel-btn-icon {
    width: 25px;
    height: 1px;
  }
  #panel-btn-icon:before, #panel-btn-icon:after {
    width: 25px;
    height: 1px;
  }
  #panel-btn-icon:after {
    width: 25px;
  }
  #panel-btn .close:after {
    width: 25px;
  }
  /* ///////////// sp-top////////////////*/
  .catch {
    height: 87.41vw;
    &::before {
      width: 90vw;
      height: 93.32vw;
    }
  }
  .top_slider {
    height: 87.41vw;
  }
  .catch_text {
    font-size: clamp(2.00rem, 3.41vw + 0.72rem, 3.00rem);
    padding: 0 2%;
  }
  .y_catch {
    font-size: clamp(2.40rem, 4.78vw + 0.61rem, 3.80rem);
  }
  .catch_name {
    bottom: -10%;
  }
  .top01 {
    width: 95%;
    margin-bottom: 50px;
  }
  .top01_title {
    font-size: clamp(4.20rem, 2.73vw + 3.18rem, 5.00rem);
    border-bottom: 5px solid var(--m);
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  .jp_title {
    font-size: 1.4rem;
  }
  .top01_inner {
    display: block;
  }
  .top01_left {
    width: 100%;
    margin-bottom: 10%;
  }
  .top01_text {
    font-size: 1.6rem;
  }
  .btn01 {
    font-size: 1.4rem;
    min-width: 180px;
    padding: 20px 60px 20px 20px;
  }
  .btn01:before {
    width: 28px;
    height: 28px;
    right: 15px;
  }
  .btn01::after {
    width: 14px;
    height: 14px;
    right: 22px;
  }
  .top01_pic {
    width: 70%;
    margin: 0 0 0 auto;
  }
  .top02 {
    width: 95%;
  }
  .top02_inner {
    margin-bottom: 40px;
    display: block;
    padding-bottom: 10%;
  }
  .top02_pic {
    width: 95vw;
    margin-left: -5vw;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
  }
  .top02_pic01 {
    width: 51.2%;
  }
  .top02_pic02 {
    width: 43.14%;
    margin: 20% 0 0;
  }
  .top02_right {
    width: 100%;
  }
  .top02_title {
    font-size: 2.7rem;
    margin-bottom: 20px;
    &::before {
      width: 20px;
      height: 20px;
    }
    &::after {
      width: 20px;
      height: 20px;
    }
  }
  .btn02 {
    font-size: 1.4rem;
    min-width: 250px;
    padding: 20px 10px 20px 20px;
  }
  .btn02:before {
    width: 23px;
    height: 22px;
    background-size: 23px 22px;
    right: 10px;
  }
  .top03 {
    width: 97.5%;
    height: max(auto, 205vw);
    margin-bottom: max(20vw, 150px);
    padding: 75vw 2.5vw 10vw 20vw;
    &::after {
      top: 15vw;
      left: 7.5vw;
      width: 92.5vw;
    }
  }
  .top03_title {
    font-size: clamp(4.20rem, 2.73vw + 3.18rem, 5.00rem);
    margin-bottom: 20px;
    top: -35px;
    left: 5vw;
  }
  .top03_text {
    font-size: 1.6rem;
  }
  .top04 {
    width: 95%;
    padding-bottom: 10%;
  }
  .top_news_wrap {
    margin: 0 0 10%;
  }
  .top_news_li {
    margin-bottom: 20px;
    padding-bottom: 20px;
    font-size: 1.4rem;
  }
  .top_news_text {
    width: 76%;
  }
  .top_list_date {
    margin-bottom: 10px;
    font-size: 1.2rem;
  }
  .foot_left {
    width: 100%;
    margin-right: 0;
    font-size: 1.4rem;
    border-left: 5px solid var(--m);
  }
  .foot_nav {
    border-left: 5px solid var(--m);
    width: min(100%, 300px);
    display: flex;
    justify-content: space-between;
  }
  .foot_menu {
    flex-direction: column;
    &:first-of-type {
      margin-bottom: 0px;
      margin-right: 3%;
    }
  }
  .foot_single_menu {
    margin-right: 0;
    font-size: 1.4rem;
    margin-bottom: 1.5em;
    &:last-of-type {
      margin-bottom: 0;
    }
    .jp_menu {
      font-weight: 600;
      font-size: 1rem;
    }
  }
  .foot_cont {
    padding: 80px 0 50px;
  }
  .copy {
    bottom: 5px;
    font-size: 1rem;
  }
  /* ///////////// sp-sub////////////////*/
  .sub_catch {
    margin: 50px 0 20px auto;
    width: 97.5%;
	img{
    border-radius: 5px 0 0 5px;
  }
  }
  .sub_title {
    font-size: 4.5rem;
  }
  /* ///////////// sp-about////////////////*/
  .about01 {
    width: 95%;
  }
  .about01_title {
    font-size: clamp(2.20rem, 3.41vw + 0.92rem, 3.20rem);
    border-bottom: 5px solid var(--m);
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  .sns {
    a {
      display: inline-block;
      width: 35px;
    }
  }
  .about01_picbox {
    justify-content: space-between;
    padding-right: 2.5%;
    margin-top: -30vw;
  }
  .about01_pic01 {
    width: 52.59%;
  }
  .about01_pic02 {
    width: 38.86%;
    padding-top: 23vw;
  }
  .about01_greeting {
    padding-bottom: 50%;
  }
  .about02 {
    width: 95%;
    padding: 5% 2.5%;
  }
  .about02_text {
    font-size: 1.4rem;
  }
  .about02_pic {
    margin: 0 0 0 10px;
  }
  .about02_pic2 {
    margin: 0 10px 0px 0;
  }
  .about03 {
    width: 95%;
    margin: 0 0 max(15vw, 80px) auto;
  }
  .about03_title {
    font-size: clamp(2.20rem, 3.41vw + 0.92rem, 3.20rem);
    margin-bottom: 20px;
  }
  .history_box {
    min-height: 100px;
    margin-bottom: 20px;
    border-radius: 10px 0 0 10px;
  }
  .his_year {
    padding: 20px 10px;
    font-size: 2rem;
  }
  .his_mon {
    font-size: 1.4rem;
  }
  .his_text {
    font-size: 1.4rem;
  }
  .about04 {
    width: 95%;
    margin-bottom: 30px;
  }
  .company_box {
    font-size: 1.4rem;
  }
  .about04_pic {
    width: 77.8%;
    margin-right: -2.5%;
  }
  .branch {
    display: block;
  }
  .branch_box {
    margin-bottom: 20px;
  }
  .branch_address {
    font-size: 1.4rem;
  }
  /* ///////////// sp-benefits////////////////*/
  .bene01 {
    width: 95%;
  }
  .bene01_inner {
    display: block;
  }
  .bene01_text {
    width: 100%;
    margin-bottom: 20px;
  }
  .bene01_pic {
    width: 71.76%;
    margin: 0 0 0 auto;
  }
  .bene02_title {
    font-size: clamp(1.80rem, 7.55vw + -1.03rem, 2.20rem);
    margin-bottom: 10px;
  }
  .bene02_text {
    font-size: 1.4rem;
  }
  .bene02_textbox {
    padding: 3%;
  }
  .bene03_title {
    border-radius: 5px 5px 0 0;
    font-size: 1.6rem;
  }
  .bene03_text_wrap {
    font-size: 1.4rem;
    border-radius: 0 5px 5px;
  }
  /* ///////////// sp-recruit////////////////*/
  .rec01_textbox {
    width: 95%;
    padding: 5% 5% 30%;
    border-radius: 5px;
    display: block;
  }
  .rec01_title {
    font-size: min(8.87vw, 4rem);
  }
  .rec01_text {
    margin-left: 1.2em;
  }
  .rec_loop {
/*    width: 200vw;*/
    margin-top: -20%;
  }
  .rec_loop__box {
    width: 200vw;
  }
  .rec02_text {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }
  .rec02_pic {
    width: 66%;
  }
  .rec03_title {
    font-size: clamp(2.20rem, 3.41vw + 0.92rem, 3.20rem);
    border-bottom: 5px solid var(--m);
    padding-bottom: 10px;
    margin-bottom: 20px;
  }
  .interview {
    display: block;
    padding: 7% 4%;
  }
  .interview_prof {
    margin: 0 auto 20px;
    float: none;
    width: 100%;
    img {
      width: 150px;
    }
  }
  .interview_text {
    font-size: 1.4rem;
  }
  .interview_comment {
    display: block;
  }
  .comment_text_box {
    width: 100%;
    padding: 8% 3% 5%;
    margin: 0 0 calc(5vw + 10px) 0;
  }
  .comment_text_box:before {
    left: 50%;
    top: 100%;
    width: 30px;
    height: 5vw;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateX(-50%);
  }
  .comment_text_box:after {
    left: 50%;
    top: calc(100% - 2.5px);
    width: 30px;
    height: 5vw;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transform: translateX(-50%);
  }
  .comment_title {
    font-size: 2rem;
    top: -30px;
    padding: 5px 10px;
  }
  .comment_prof {
    margin: 0 auto;
    width: 100%;
    img {
      width: 150px;
    }
  }
  .comment_text {
    font-size: 1.4rem;
  }
  .rec_infowrap {
    display: block;
  }
  .rec_info_textbox {
    width: 100%;
    margin-bottom: 30px;
  }
  .rec_info_title {
    font-size: 2rem;
    margin-bottom: 15px;
  }
  .rec_info_text {
    font-size: 1.4rem;
  }
  .rec_little_text {
    font-size: 1.2rem;
  }
  .rec_info_pic {
    width: 78%;
    margin: 0 0 0 auto;
  }
  .rec_contact_title {
    padding: 5px 10px;
  }
  .rec_contact_box {
    font-size: 1.4rem;
  }
  /* ///////////// sp-joblist////////////////*/
  .sub_title2 {
    font-size: 4rem;
    margin: 50px 5vw 60px;
  }
  .place_item {
    font-size: 1.2rem;
    padding: 5px 10px;
    border-radius: 5px;
  }
  .place_title {
    margin-bottom: 15px;
  }
  .place_box {
    margin-bottom: 30px;
  }
  .job_name {
    font-size: 1.6rem;
    border-radius: 5px 5px 0 0;
  }
  .joblist_pic {
    width: 33%;
  }
  .joblist_textbox {
    margin-bottom: 10px;
    font-size: 1.3rem;
  }
  .joblist_label {
    width: max(20%, 70px);
    padding: 5px 5px;
    margin-right: 3%;
  }
  .joblist_infowrap {
    margin-bottom: 30px;
  }
  .joblist_inner {
    padding-bottom: 30px;
  }
  .btn_joblist {
    width: 147px;
    height: 40px;
    &::after {
      background-size: 20px 20px;
      width: 20px;
      height: 20px;
    }
  }
  .joblist_pagination {
    margin-bottom: 80px;
  }
  /* ///////////// sp-jobdetail////////////////*/
  .job_wrap {
    margin-top: 50px;
    margin-bottom: 0;
    width: 95%;
  }
  .job_info {
    display: inline-block;
    width: 100%;
    float: left;
    padding: 1em;
    border-bottom: none;
  }
  .job_text {
    display: inline-block;
    width: 100%;
    float: left;
    border-bottom: none;
  }
  .job_info_wrap {
    border-bottom: 1px solid #222222;
  }
  .job_content {
    padding: 4% 2.5% 50px;
  }
  .job_message {
    border-radius: 5px;
    padding: 7% 3%;
    margin-bottom: 50px;
  }
  .job_message_label {
    font-size: 2rem;
    top: -33px;
  }
  .message_title {
    font-size: 1.6rem;
    border-bottom: 5px solid var(--m);
  }
  .map {
    aspect-ratio: 5/4;
	iframe{
	  aspect-ratio: 5/4;
	}
  }
  .job_btn {
    height: 83px;
    font-size: 1.4rem;
  }
  .job_title {
    border-radius: 5px 5px 0 0;
  }
  /* ///////////// sp-entry contact////////////////*/
  .form_title {
    font-size: 2.2rem;
    margin-bottom: 30px;
  }
  .name_wrap {
    margin-bottom: 30px;
  }
  .radiobutton {
    padding-top: 15px;
  }
  .radiobutton label {
    font-size: 1.4rem;
  }
  /* ///////////// sp-news-list////////////////*/
  .newslist_wrap {
    padding: 5% 2.5% 10%;
    border-radius: 5px;
  }
  /* ///////////// sp-news////////////////*/
  .news {
    width: 95%;
    margin: 50px auto 50px;
    border-radius: 5px;
    padding: min(5%, 50px) 2.5% min(10%, 80px);
  }
  .news_title {
    font-size: 2rem;
    margin-bottom: 15px;
  }
}