@charset "UTF-8";
/*****************************************
  toppage.css
  トップページ固有のスタイルを指定
******************************************/

/*******************************
 reset
*******************************/
html {
  height: auto;
}
body {
  -webkit-text-size-adjust: 100%;
}
#footer .content .free {
  margin: 0 auto;
  text-align: left;
  width: auto;
}
div#container {
  overflow: hidden;
  background-color: transparent;
}
div#container,
#header .content,
#main .content,
#footer .content {
  width: auto;
}

#headContent {
  margin: 0 auto;
}

a:hover {
  text-decoration: none!important;
}

#bottomContent #social,
.areaLink {
  clear: both;
  margin: 0 auto;
  max-width: 405px!important;
}
#bottomContent #social {
  padding-top: 20px;
}
#areaLink div.area table {
  background: #fff;
}
@media screen and (max-width: 768px) {
  #areaLink div.area table {
    margin: 0 10px 40px;
  }
}

.areaLink {
  position: relative;
  /*z-index: 1000;*/
}

* {
  box-sizing: border-box;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
}

/*******************************
 common
*******************************/
body {
  /* background: url(../images/bg_dots.png); */
}
.section {
  color: #333;
}
@media screen and (max-width: 1000px) {
  .section {
    padding: 0 20px;
  }
}
@media screen and (max-width: 768px) {
  .section {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.section .sectionHead {
  margin: 0 auto;
  max-width: 960px;
}
@media screen and (max-width: 768px) {
  .section .sectionHead {
  }
}
/* title */
.section.kv .titleTop01 {
  position: absolute;
  bottom: 58px;
  width: 100%;
  text-align: center;
  font-size: 52px;
  font-weight: bold;
  color: #fff;
  line-height: 1.33;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 1681px) {
  .section.kv .titleTop01 {
    bottom: 60px;
    font-size: 60px;
  }
}
@media screen and (max-width: 1000px) {
  .section.kv .titleTop01 {
    font-size: 5.2vw;
  }
}
@media screen and (max-width: 768px) {
  .section.kv .titleTop01 {
    font-size: 8vw;
  }
}
.section .titleTop02 {
  margin-bottom: 40px;
  font-size: 25px;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .section .titleTop02 {
    margin-bottom: 0;
    font-size: 4.67vw;
  }
}
.section .titleTop03 {
  position: relative;
  margin-bottom: 40px;
  padding-bottom: 23px;
  font-size: 25px;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .section .titleTop03 {
    margin-bottom: 5.3vw;
    padding-bottom: 6.13vw;
    font-size: 4.67vw;
  }
}
.section .titleTop03::before,
.section .titleTop03::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -23px;
  height: 3px;
  width: 46px;
}
@media screen and (max-width: 768px) {
  .section .titleTop03::before,
  .section .titleTop03::after {
    margin-left: -4.4vw;
    height: 2px;
    width: 8.8vw;
  }
}
.section .titleTop03::before {
  bottom: 10px;
  background-color: #be5431;
}
@media screen and (max-width: 768px) {
  .section .titleTop03::before {
    bottom: 5px;
  }
}
.section .titleTop03::after {
  bottom: 0;
  background-color: #60aa48;
}
@media screen and (max-width: 768px) {
  .section .titleTop03 {
    font-size: 4.67vw;
  }
}

.section .sectionBody {
  margin: auto;
  max-width: 960px;
}
.section .btnTop01 a {
  position: relative;
  display: table;
  border-radius: 32px;
  width: 100%;
  height: 80px;
  line-height: 1.25;
  text-align: center;
  color: #fff!important;
  font-size: 16px;
  background-color: #60aa48;
}
.section .btnTop01 a span {
  display: table-cell;
  vertical-align: middle;
}
.section .btnTop01 a::after {
  position: absolute;
  content: "\E845";
  top: 50%;
  right: 15px;
  margin-top: -9px;
  font-family: recop-iconfont;
  font-size: 18px;
  line-height: 1;
}
.section .btnTop01 a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .section .btnTop01 a {
    font-size: 16px;
    height: 50px;
  }
  .section .btnTop01 a::after {
    right: 15px;
    margin-top: -9px;
    font-size: 18px;
  }
}

/* img */
.section img {
  width: 100%;
  height: auto;
}

/*******************************
 kv
*******************************/
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
}
.section.kv {
  padding: 0;
}
@media screen and (max-width: 768px) {
  .section.kv {
    margin-bottom: 25px;
  }
}
.section.kv .sectionWrapper {
  position: relative;
}
@media screen and (min-width: 1681px) {
  .section.kv .sectionWrapper .bg {
    background: none;
  }
}
@media screen and (min-width: 769px) and (max-width: 1680px) {
  .section.kv .sectionWrapper .bg {
    background: url(../images/bg_kv_pc.png) no-repeat center top;
    background-size: 1680px 756px;
    min-height: 756px;
  }
  .section.kv .sectionWrapper .bg img {
    display: none;
  }
}

/*******************************
 gNav
*******************************/
@media screen and (max-width: 768px) {
  .gNav {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
  }
  html.navOpened .gNav {
    height: 80px;
    background: rgba(255,255,255,0.9);
  }
  .gNavWrapper {
    position: relative;
    margin: 0 auto;
  }
  .gNavToggle {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background: #60aa48;
  }
  .gNavToggle span,
  .gNavToggle span::before,
  .gNavToggle span::after {
    display: block;
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #fff;
    transition: 300ms;
  }
  .gNavToggle span {
    top: 21px;
    left: 12px;
  }
  .gNavToggle span::before {
    content: "";
    top: -8px;
    left: 0;
  }
  .gNavToggle span::after {
    content: "";
    left: 0;
    top: 8px;
  }
  .navOpened .gNavToggle {
    opacity: 1;
  }
  .navOpened .gNavToggle span {
    background-color: transparent;
  }
  .navOpened .gNavToggle span::before {
    -webkit-transform: translateY(8px) rotate(40deg);
    -moz-transform: translateY(8px) rotate(40deg);
    -ms-transform: translateY(8px) rotate(40deg);
    -o-transform: translateY(8px) rotate(40deg);
    transform: translateY(8px) rotate(40deg);
  }
  .navOpened .gNavToggle span::after {
    background-color: #fff;
    -webkit-transform: translateY(-8px) rotate(-40deg);
    -moz-transform: translateY(-8px) rotate(-40deg);
    -ms-transform: translateY(-8px) rotate(-40deg);
    -o-transform: translateY(-8px) rotate(-40deg);
    transform: translateY(-8px) rotate(-40deg);
  }
}
@media screen and (max-width: 375px) {
  .gNavToggle {
    position: absolute;
    top: 20px;
    right: 15px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    background: #60aa48;
  }
}
.gNavBody {}
@media screen and (max-width: 768px) {
  .gNavBody {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    z-index: 1000;
  }
}
@media screen and (max-width: 768px) {
  .navOpened .gNavBody {
    display: block;
  }
}

.gNavBody .gNavWrapper {
  margin: auto;
  max-width: 960px;
}
@media screen and (max-width: 768px) {
  .gNavBody .gNavWrapper {
    max-width: 100%;
  }
}

.gNavBody .listgNav {
  overflow: hidden;
  margin-top: -40px;
  padding-bottom: 40px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .gNavBody .listgNav {
    position: absolute;
    top: 120px;
    right: 0;
    padding: 0 15px;
    width: 100%;
    height: 100vh;
    background-color: rgba(255,255,255,0.9);
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    overflow: scroll;
    padding-bottom: 120px;
  }
  html.navOpened .gNavBody .listgNav {
    opacity: 1;
  }
}

.gNavBody li {
  float: left;
  width: 20%;
  padding: 0 5px;
  font-size: 15px;
}
.gNavBody li em {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .gNavBody li {
    float: none;
    width: 100%;
  }
  .gNavBody li.staff {
    margin: 20px 0 25px;
  }
  .gNavBody li.staff .title {
    margin-bottom: 10px;
  }
  .gNavBody li + li {
    margin-top: 5px;
  }
}
.gNavBody a {
  position: relative;
  display: table;
  border-radius: 32px;
  padding: 3px;
  width: 100%;
  height: 80px;
  line-height: 1.125;
  text-align: center;
  color: #fff!important;
  font-size: 14px;/* ナビ個数によって変更 */
  background-color: #60aa48;
}
.gNavBody a span {
  display: table-cell;
  border:1px solid #fff;
  border-radius: 32px;
  padding: 0 5px;
  vertical-align: middle;
  padding-bottom: 12px;
}
.gNavBody a::after {
  position: absolute;
  content: "\E846";
  bottom: 10px;
  left: 50%;
  margin-left: -9px;
  font-family: recop-iconfont;
  font-size: 18px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
.gNavBody a {
  min-height: 50px;
  height: auto;
}
.gNavBody a span {
  border: none;
  border-radius: 0;
  padding: 0;
}
  .gNavBody a::after {
    bottom: auto;
    left: auto;
    top: 50%;
    right: 15px;
    margin-left: auto;
    margin-top: -9px;
    font-family: recop-iconfont;
    font-size: 18px;
    line-height: 1;
  }
}
.gNavBody a:hover {
  opacity: 0.7;
}

@media screen and (max-width: 768px) {
}
/*******************************
 jobSearch
*******************************/
.section.jobSearch {
}
@media screen and (max-width: 768px) {
  .section.jobSearch {
  }
}
.section.jobSearch .sectionBody {
  margin: auto;
  padding-top: 40px;
  padding-bottom: 40px;
  max-width: 960px;
  overflow: hidden;
}
.section.jobSearch::before,
.section.jobSearch::after {
  content: "";
  display: block;
  margin: 0 auto;
  background: url(../images/bg_dots03.png) repeat-x top left;
  height: 4px;
  max-width: 960px;
}
@media screen and (max-width: 768px) {
  .section.jobSearch::before,
  .section.jobSearch::after {
    margin: 0 15px;
    background-size: auto 2px;
    height: 2px;
  }
  .section.jobSearch .sectionBody {
    padding: 20px 0;
  }
}
.section.jobSearch .searchJobfind {
  float: left;
  padding-right: 10px;
  width: 50%;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .section.jobSearch .searchJobfind {
    float: none;
    margin-bottom: 10px;
    padding-right: 0;
    width: 100%;
  }
}
.section.jobSearch .searchJobfind a {
  display: block;
  border-radius: 32px;
  height: 80px;
  background: #be5431;
  line-height: 80px;
  max-width: 600px;
  font-size: 18px;
  color: #fff!important;
}
@media screen and (max-width: 768px) {
  .section.jobSearch .searchJobfind a {
    border-radius: 25px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
  }
}
.section.jobSearch .searchJobfind a:hover {
  opacity: 0.7;
}
.section.jobSearch .searchJobfind a::before {
  content: "";
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 30px;
  line-height: 50px;
  background: url("../images/ico_map.png") no-repeat left top;
  background-size: contain;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .section.jobSearch .searchJobfind a::before {
    width: 17px;
    height: 25px;
    line-height: 50px;
  }
}

.section.jobSearch .freeword {
  float: right;
  padding-left: 10px;
  width: 50%;
}
@media screen and (max-width: 768px) {
    .section.jobSearch .freeword {
      float: none;
      padding-left: 0;
      width: 100%;
  }
}

.section.jobSearch .freeWordInput {
  float: left;
  width: calc(100% - 85px);
}
@media screen and (max-width: 768px) {
  .section.jobSearch .freeWordInput {
    width: calc(100% - 55px);
  }
}
.section.jobSearch .freeWordInput input {
  border-radius: 32px 0 0 32px;
  border: 1px solid #ccc;
  padding: 30px 16px;
  line-height: 1;
  width: 100%;
  height: 80px;
  font-size: 14px;
  outline: none;
}
@media screen and (max-width: 768px) {
  .section.jobSearch .freeWordInput input {

    border: 1px solid #ccc;
    padding: 18px 10px;
    height: 50px;
    font-size: 14px;
  }
}
.section.jobSearch .freeWordButton {
  float: right;
  width: 80px;
}
@media screen and (max-width: 768px) {
  .section.jobSearch .freeWordButton {
    width: 50px;
  }
}
.section.jobSearch .freeWordButton input {
  display: block;
	-webkit-appearance: none;
	-moz-appearance: none;
  appearance: none;
  border-radius: 0 32px 32px 0;
	border: none;
	outline: none;
  width: 80px;
  height: 80px;
  background: #be5431 url("../images/ico_search.png") no-repeat center center;
  background-size: 28px 27px;
  cursor: pointer;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .section.jobSearch .freeWordButton input {
    width: 50px;
    height: 50px;
  }
}
.section.jobSearch .freeWordButton input:hover {
  opacity: 0.7;
}

/*******************************
 jobfind
*******************************/
.section.jobfind {
  padding-top: 40px;
}
@media screen and (max-width: 768px) {
  .section.jobfind {
    padding-bottom: 40px;
  }
}
.section.jobfind .sectionBody {
}
@media screen and (max-width: 768px) {
  .section.jobfind {
    padding-top: 20px;
  }
}
@media screen and (max-width: 768px) {
  .section.jobfind .areaJobfind::after {
    content: "";
    display: block;
    margin: 0;
    background: url(../images/bg_dots03.png) repeat-x top left;
    background-size: auto 2px;
    height: 2px;
  }
}
.section.jobfind .banner {
  margin-bottom: 80px;
}
.section.jobfind .banner:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .section.jobfind .banner {
    margin-bottom: 40px;
  }
}
.section.jobfind .areaJobfind {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .section.jobfind .areaJobfind {
    margin-bottom: 0;
  }
}
.section.jobfind .areaHead {}
@media screen and (max-width: 768px) {
  .section.jobfind .areaHead {
    padding: 7.2vw 0;
  }
  .section.jobfind .titleTop02 {
    line-height: 1;
  }
}
@media screen and (max-width: 768px) {
  .section.jobfind .areaBody {
    padding-bottom: 5.3vw;
  }
}
.section.jobfind .btnTop01 {
  overflow: hidden;
  margin: 0 -5px;
}
.section.jobfind .btnTop01 li {
  float: left;
  padding: 0 5px;
}
.section.jobfind .area .btnTop01 li {
  display: block;
  width: 20%;
}
.section.jobfind .jobtype .btnTop01 li,
.section.jobfind .jobpart .btnTop01 li,
.section.jobfind .merit .btnTop01 li {
  width: 25%;
}
@media screen and (max-width: 768px) {
  .section.jobfind .area .btnTop01 li {
    display: block;
    width: 50%;
  }
  .section.jobfind .jobtype .btnTop01 li,
  .section.jobfind .jobpart .btnTop01 li,
  .section.jobfind .merit .btnTop01 li {
    width: 50%;
  }
}
.section.jobfind .jobtype .btnTop01 li:nth-child(n+5),
.section.jobfind .jobpart .btnTop01 li:nth-child(n+5),
.section.jobfind .merit .btnTop01 li:nth-child(n+5) {
  margin-top: 10px;
}
.section.jobfind .merit .btnTop01 li:nth-child(n+6) {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .section.jobfind .jobtype .btnTop01 li:nth-child(n+5),
  .section.jobfind .jobpart .btnTop01 li:nth-child(n+5),
  .section.jobfind .merit .btnTop01 li:nth-child(n+5) {
    margin-top: 0;
  }
  .section.jobfind .area .btnTop01 li:nth-child(n+6) {
    margin-top: 0;
  }
  .section.jobfind .jobtype .btnTop01 li:nth-child(n+3),
  .section.jobfind .jobpart .btnTop01 li:nth-child(n+3),
  .section.jobfind .merit .btnTop01 li:nth-child(n+3),
  .section.jobfind .area .btnTop01 li:nth-child(n+3) {
    margin-top: 10px;
  }
}
.section.jobfind .btnTop01 a::after {
  right: 20px;
  margin-top: -6px;
  font-size: 12px;
}

/*******************************
 work
*******************************/
.section.work {
  padding-top: 80px;
  padding-bottom: 80px;
  background: #fff url(../images/bg_dots01.png) repeat-y center -238px;
}
@media screen and (max-width: 768px) {
  .section.work {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #fff url(../images/bg_dots01_sp.png) repeat-y center top;
    background-size: 100% auto;
  }
}
.section.work .areaWork {}
.section.work .areaWork .figure {}
.section.work .areaWork .lead {
  margin-bottom: 20px;
  font-size: 18px;
  line-height: 1.67;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .section.work .areaWork .lead {
    margin-bottom: 2.13vw;
    font-size: 3.72vw;
  }
}
.section.work .areaWork .text p {
  font-size: 16px;
  line-height: 1.875;
}
.section.work .areaWork .text p.reD {
  color: #ff0000;
}

@media screen and (max-width: 768px) {
  .section.work .areaWork .text p {
    font-size: 3.72vw;
  }
}
.section.work .areaWork.main {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .section.work .areaWork.main {
    margin-bottom: 20px;
  }
}
.section.work .areaWork.main .figure {
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .section.work .areaWork.main .figure {
    margin-bottom: 12px;
  }
}
.section.work .areaWork.main .text {}
.section.work .areaWork.imageLeft {
  margin-bottom: 40px;
  padding-left: 350px;
  background: url(../images/img_work_02.png) no-repeat left top;
  background-size: 310px 310px;
}
@media screen and (max-width: 768px) {
  .section.work .areaWork.imageLeft {
    padding-left: 0;
    background-size: 75vw;
    padding-top: 80vw;
    background-position: top center;
  }
}
.section.work .areaWork.imageRight {
  padding-right: 350px;
  background: url(../images/img_work_03.png) no-repeat right top;
  background-size: 310px 310px;
}
@media screen and (max-width: 768px) {
  .section.work .areaWork.imageLeft,
  .section.work .areaWork.imageRight {
    background-size: 75vw;
    padding-top: 80vw;
    background-position: top center;
  }
  .section.work .areaWork.imageLeft {
    padding-left: 0;
  }
  .section.work .areaWork.imageRight {
    padding-right: 0;
  }
}

.section.work .areaWork.imageLeft,
.section.work .areaWork.imageRight {
  display: table;
}
.section.work .areaWork.imageLeft .text,
.section.work .areaWork.imageRight .text {
  display: table-cell;
  vertical-align: middle;
  height: 310px;
}
@media screen and (max-width: 768px) {
  .section.work .areaWork.imageLeft .text,
  .section.work .areaWork.imageRight .text {
    display: table-cell;
    vertical-align: top;
    height: auto;
  }
}

/*******************************
 interview
*******************************/
.section.interview {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .section.interview {
    padding-top: 10.67vw;
    padding-bottom: 10.67vw;
  }
}
.section.interview .sectionBody {
}
@media screen and (max-width: 768px) {
  .section.interview .sectionBody {
  }
}
.section.interview .listInterview {
  overflow: hidden;
  margin: 0 -10px 40px;
}
@media screen and (max-width: 768px) {
  .section.interview .listInterview {
    margin: 0 0 20px;
  }
}
.section.interview .listInterview .parson {
  float: left;
  display: block;
  width: 25%;
  padding: 0 10px;
}
@media screen and (max-width: 768px) {
  .section.interview .listInterview .parson {
    float: none;
    padding: 0;
    width: 100%;
  }
  .section.interview .listInterview .parson + .parson {
    margin-top: 2.6vw;
  }
}
.section.interview .listInterview .parson:hover {
  opacity: 0.7;
}
.section.interview .listInterview .parson .figure {}
.section.interview .listInterview .parson .text {
  display: table;
  border-radius: 0 0 28px 28px;
  width: 100%;
  background-color: #60aa48;
}
@media screen and (max-width: 768px) {
}
.section.interview .listInterview .parson .text p {
  display: table-cell;
  height: 80px;
  vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .section.interview .listInterview .parson .text p {
    height: 13.3vw;
  }
}
.section.interview .listInterview .parson .text p span {
  display: block;
  position: relative;
  line-height: 1.25;
  font-size: 16px;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .section.interview .listInterview .parson .text p span {
    font-size: 3.73vw;
  }
}
.section.interview .listInterview .parson .text p span::after {
  position: absolute;
  content: "\E845";
  top: 50%;
  right: 20px;
  margin-top: -6px;
  font-family: recop-iconfont;
  font-size: 12px;
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .section.interview .listInterview .parson .text p span::after {
    margin-top: -2.26vw;
    font-size: 4.52vw;
  }
}
.section.interview .btnTop01 {
    margin: 0 auto;
    width: 468px;
}
@media screen and (max-width: 768px) {
  .section.interview .btnTop01 {
    margin: 0 auto;
    width: auto;
  }
}


/*******************************
 aboutYB
*******************************/
.about {
  padding-top: 80px;
  padding-bottom: 50px;
  background: #fff url(../images/bg_dots02.png) repeat-y center -211px;
}
@media screen and (max-width: 768px) {
  .about {
    padding-top: 10.67vw;
    padding-bottom: 10.67vw;
    background: #fff url(../images/bg_dots02_sp.png) repeat-y center top;
    background-size: 100% auto;
  }
}

.section.aboutYB::after {
  content: "";
  display: block;
  margin: 80px auto;
/*  background: url(../images/bg_dots03.png) repeat-x top left;*/
  height: 4px;
  max-width: 960px;
}
@media screen and (max-width: 768px) {
  .section.aboutYB::after {
    margin: 5.33vw auto;
    height: 2px;
    background-size: auto 2px;
  }
}
.section.aboutYB .logo {
  margin: 0 auto 30px;
  width: 216px;
}
@media screen and (max-width: 768px) {
  .section.aboutYB .logo {
    margin: 0 auto 2.67vw;
    width: 30.67vw;
  }
}
.section.aboutYB .figure {
  margin: 0 0 30px;
}
@media screen and (max-width: 768px) {
  .section.aboutYB .figure {
    margin: 0 0 4vw;
  }
}
.section.aboutYB .text p {
  margin: 0 0 20px;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .section.aboutYB .text p {
    margin: 0 0 2.67vw;
    font-size: 3.73vw;
  }
}
.section.aboutYB .btnTop01 {
  margin: 0 auto;
  width: 468px;
}
@media screen and (max-width: 768px) {
  .section.aboutYB .btnTop01 {
    margin: 0 auto;
    width: auto;
  }
}
/*******************************
 aboutLife
*******************************/
.section.aboutLife {
}
.section.aboutLife::after {
  content: "";
  display: block;
  margin: 80px auto;
  background: url(../images/bg_dots03.png) repeat-x top left;
  height: 4px;
  max-width: 960px;
}
@media screen and (max-width: 768px) {
  .section.aboutLife::after {
    margin: 10.67vw auto;
    height: 2px;
    background-size: auto 2px;
  }
}
.section.aboutLife .logo {
  margin: 0 auto 30px;
  width: 88px;
}
@media screen and (max-width: 768px) {
  .section.aboutLife .logo {
    margin: 0 auto 2.67vw;
    width: 12.5vw;
  }
}
.section.aboutLife .figure {
  margin: 0 0 30px;
}
@media screen and (max-width: 768px) {
  .section.aboutLife .figure {
    margin: 0 0 4vw;
  }
}
.section.aboutLife .text p {
  margin: 0 0 20px;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .section.aboutLife .text p {
    margin: 0 0 2.67vw;
    font-size: 3.73vw;
  }
}
.section.aboutLife .btnTop01 {
  margin: 0 auto;
  width: 468px;
}
@media screen and (max-width: 768px) {
  .section.aboutLife .btnTop01 {
    margin: 0 auto;
    width: auto;
  }
}
.section.aboutLife .btnTop01 a {
  background-color: #97bf39;
}

/*******************************
 sectionBottom
*******************************/
.section.sectionBottom {
  padding-bottom: 84px;
}
@media screen and (max-width: 768px) {
  .section.sectionBottom {
    padding-bottom: 11.4vw;
  }
}
.section.sectionBottom .btnTop01 {
  margin: 0 auto;
  width: 468px;
}
@media screen and (max-width: 768px) {
  .section.sectionBottom .btnTop01 {
    margin: 0 auto;
    width: auto;
  }
}

@media screen and (max-width: 768px) {
  [data-js-view="acHead"] {
    position: relative;
  }
  [data-js-view="acHead"]::after {
    content: "\E846";
    position: absolute;
    bottom: 2.6vw;
    right: 0;
    border-radius: 10px;
    width: 13.3vw;
    height: 13.3vw;
    background: #336a21;
    line-height: 13.3vw;
    font-size: 4.53vw;
    text-align: center;
    color: #fff;
    font-family: recop-iconfont;
    z-index: 10;
  }
  [data-js-view="acHead"].is-open::after {
    content: "\E844";
  }
  [data-js-view="acBody"] {
    display: none;
  }
  .work [data-js-view="acBody"],
  .interview [data-js-view="acBody"],
  .aboutYB [data-js-view="acBody"],
  .section.aboutLife [data-js-view="acBody"],
  .employment [data-js-view="acBody"],
  .job-list  [data-js-view="acBody"],
  .benefit  [data-js-view="acBody"] {
    display: block;
  }
}
/* PC表示でアコーディオンが常に開く */
@media screen and (min-width: 769px) { 
  .work [data-js-view="acBody"],
  .interview [data-js-view="acBody"],
  .aboutYB [data-js-view="acBody"],
  .section.aboutLife [data-js-view="acBody"],
  .employment [data-js-view="acBody"],
  .job-list  [data-js-view="acBody"],
  .benefit  [data-js-view="acBody"] {
    display: block!important;
  }
}

/*-----------------------*/
/*バナー設置*/
.section .sectionHead2 {
    margin: 0 auto;
    max-width: 855px;
}
@media screen and (max-width: 768px){
  .section .sectionHead2 {
    margin: 40px auto 0;
  }
}

/* 20211027 オープニング・求人を探すコンテンツ追加 */
.section.jobfind .opening .btnTop01 li {
    display: block;
    width: 50%;
}
.section.jobfind .opening .btnTop01 a {
    height: 70px;
    font-size: 20px;
}
@media screen and (max-width: 768px){
  .section.jobfind .opening .areaHead {
    padding-bottom : 4vw;
  }
  .section.jobfind .opening .titleTop02 {
    line-height : 1.2;
  }
  .section.jobfind .opening .btnTop01 li {
    display: block;
    width: 100%;
  }
  .section.jobfind .opening .btnTop01 li:nth-child(n+2) {
    margin-top: 10px;
  }
  .section.jobfind .opening .btnTop01 a {
      height: 50px;
      font-size: 16px;
  }
}

@media screen and (max-width: 950px){
 .section.jobfind .opening .btnTop01 .li-smallfont a {
	 font-size: 16px;
	}
}

/*-----------------------------------*/
/*「ライフフーズ」のコンテンツ削除後のナビ調整*/
.gNavBody .listgNav {
    display:-webkit-box;
    display:-ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
@media screen and (max-width: 768px){
  .gNavBody .listgNav {
    display: block;
  }
}

/* オープニングスタッフ募集欄二列目以降調整 */
@media screen and (min-width: 769px){
.section.jobfind .opening .btnTop01 li:nth-child(n+3) {
    margin-top: 15px;
}
}

.btnTopFlex{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/*おしごと百花 動画*/
.section.jobfind .banner {
    margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  .section.jobfind .banner {
      margin-bottom: 0;
  }
}
.movie_area {
	width: 100%;
	max-width: 960px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	margin: 0 auto 70px;
	padding-top: 40px;
	text-align: center;
}
.m_inner {
	width: 46%;
}
.m_inner h3 {
	height: 54px;
	position: relative;
	margin-bottom: 14px;
	font-size: 25px;
}
.m_inner h3 span {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}
.m_box {
	position: relative;
	max-width: 400px;
	margin: 0 auto;
}
.m_box::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 56.25%;
}
.m_box iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.m_text {
	margin: 20px auto 0;
	font-size: 16px;
}

@media screen and (max-width: 768px) {
	.movie_area {
		margin: 0 auto;
	}
	.m_inner {
		width: 96%;
		margin-bottom: 40px;
	}
	.m_inner h3 {
		height: auto;
		font-size: 4.67vw;
	}
	.m_inner h3 span {
		position: static;
	}
	.m_box {
		max-width: 600px;
	}
	.m_text {
		font-size: 14px;
	}
}
/* グロナビ調整 */
@media screen and (min-width: 769px) and (max-width: 900px) {
  .gNavBody .listgNav {
    flex-wrap: wrap;
  }
  .gNavBody li {
    width: calc((100% - 40px)/4);
  }
  .gNavBody li:nth-of-type(n + 5) {
    margin-top: 16px;
  }
}
/*******************************
  employment
*******************************/
.employment {
  padding-top: 73px;
  padding-bottom: 80px;
  background: #fff;
}
.employment-status {
  text-align: center;
  font-size: 16px;
  position: relative;
  margin-bottom: 52px;
}
.employment-status::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  background: url(../images/bg_dots03.png) repeat-x top left;
  height: 4px;
}
.employment-status h4 {
  margin-bottom: 18px;
  border-bottom: 2px solid #60AA48;
  font-size: 25px;
  display: inline-block;
}
.employment_flex h5 {
  color: #fff;
  font-size: 22px;
  border-radius: 24px;
  padding: 8px 6px 4px;
}
.employment_flex .tx_box {
  margin-top: 20px;
  padding: 14px 20px 20px;
  border: 3px solid;
  border-radius: 9px;
  text-align: left;
  height: 100%;
  line-height: 1.4;
  background: #fff;
}
.employment_flex > li {
  padding: 20px;
  background: #F6F6F6;
  display: flex;
  flex-direction: column;
}
.partner h5 {
  background: #60AA48;
}
.partner .tx_box {
  border-color: #60AA48;
}
.help h5 {
  background: #2074B2;
}
.help .tx_box {
  border-color: #2074B2;
}
.part-time h5 {
  background: #E63B81;
}
.part-time .tx_box {
  border-color: #E63B81;
  flex: 1 auto;
}
.tx_box .tx_box_title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}
.tx_box ul {
  margin-bottom: 20px;
}
.under_yellow {
  display: inline;
  font-weight: bold;
  font-size: 20px;
  background-image: linear-gradient(transparent 80%, #FFE200 20%);
  background-position: center bottom 3px;
}
.tx_box ul li {
  padding-left: 18px;
  position: relative;
}
.tx_box ul li::before {
  content: "●";
  display: inline-block;
  position: absolute;
  left: 0;
  color: #60AA48;
}
.salary {
  text-align: center;
  font-size: 16px;
}
.salary .under_yellow {
  background-image: linear-gradient(transparent 85%, #FFE200 15%);
  background-position: center bottom 2px;
}
.salary .lead-color {
  color: #E55D15;
  font-size: 36px;
}
.salary h4 span {
  font-size: 32px;
  margin-left: 5px;
}
.salary_bx {
  padding: 20px 0;
  background: #fff;
  border: 4px solid #E55D15;
  border-radius: 0 0 10px 10px;
  font-weight: bold;
  font-size: 22px;
}
.day-of-week .salary_bx {
  padding: 57px 0;
}
.salary_bx li {
  width: 75%;
  margin: 0 auto;
}
.salary_bx li + li {
  padding-top: 10px;
  border-top: 2px dashed #E55E16;
}
.salary_bx li p:first-of-type {
  width: 58%;
  text-align: left;
}
.salary_bx li p:nth-of-type(2) {
  width: 5%;
  font-size: 24px;
}
.salary_bx li .addition:last-of-type {
  width: 37%;
  text-align: right;
}
.salary .employment_flex h5 {
  padding: 9px 5px 0;
  font-size: 22px;
  background: #E55D15;
  border-radius: 10px 10px 0 0;
}
.employment_flex h5 span {
  font-size: 30px;
}
.salary_bx > li {
  display: flex;
  align-items: center;
  line-height: 1.2;
}
.salary_bx .under_yellow {
  background-position: center bottom 10px;
}
.ic_partner,
.ic_helper {
  padding: 5px 12px 2px;
  color: #fff;
  border-radius: 25px;
  font-size: 16px;
}
.ic_partner {
  background: #60AA48;
}
.ic_helper {
  margin: 0 5px;
  background: #2074B2;
}
.tx_bold {
  font-weight: bold;
}
.salary .tx_bold {
  margin: 10px 0 20px;
  font-size: 18px;
}

@media screen and (min-width: 769px) {
  .employment_flex {
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
  }
  .employment_flex {
    display: flex;
    justify-content: space-between;
  }
  .employment_flex > li {
    width: calc((100% - 30px)/3);
  }
  .employment-status .employment_flex {
    margin-bottom: 26px;
  }
  .salary .employment_flex > div {
    width: calc((100% - 70px - 20px)/2);
    display: flex;
    flex-direction: column;
  }
  .employment_flex .salary_bx {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 auto;
  } 
  .im_plus {
    margin-top: 110px;
  }
  .salary_bx .under_yellow {
    font-size: 37px;
  }
  .salary_bx .under_yellow span {
    font-size: 24px;
  }

}
@media screen and (max-width: 768px) {
  .employment {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .employment-status h4 {
    font-size: 4.67vw;
  }
  .employment_flex {
    margin-top: 3vw;
  }
  .employment_flex h5 {
    padding: 1.86vw 1vw 1.2vw;
    font-size: 4.8vw;
  }
  .employment_flex > li + li {
    margin-top: 5.4vw;
  }
  .employment-status {
    font-size: 3.72vw;
  }
  .employment-status::after {
    background-size: auto 2px;
    height: 2px;
  }
  .tx_box .tx_box_title,
  .employment_flex .under_yellow {
    font-size: 4.8vw;
  }
  .tx_box ul li {
    padding-left: 3.8vw;
  }
  .under_yellow {
    font-size: 4.8vw;
  }
  .salary .lead-color {
    font-size: 8.5vw;
  }
  .employment_flex .tx_box {
    padding: 5.3vw;
  }
  .ic_partner,
  .ic_helper {
    padding: 5px 12px 4px;
  }
  .im_plus {
    width: 15%;
    margin: 10px auto;
  }
  .im_plus img {
    width: auto;
    max-width: 100%;
  }
  .salary_bx {
    padding: 7.7vw 0;
    font-size: 5.3vw;
  }
  .salary_bx li {
    width: 80%;
  }
  .salary_bx li p:nth-of-type(2) {
    font-size: 5.3vw;
  }
  .salary_bx .under_yellow {
    font-size: 9vw;
    background-position: center bottom 5px;
    background-image: linear-gradient(transparent 85%, #FFE200 25%);
  }
  .tx_box .under_yellow {
    background-position: center bottom 0.6vw;
  }
  .salary_bx .under_yellow span {
    font-size: 5.3vw;
  }
  .salary .employment_flex h5 {
    padding: 2.4vw 1vw 0.5vw;
    font-size: 4.2vw;
  }
  .employment_flex h5 span {
    font-size: 4.8vw;
  }
}
@media screen and (min-width: 769px) and (max-width: 901px) {
  .salary .employment_flex h5 {
    font-size: 2.5vw;
  }
  .employment_flex h5 span {
    font-size: 3.8vw;
  }
  .salary_bx {
    font-size: 2.4vw;
  }
  .salary_bx .under_yellow {
    font-size: 5vw;
  }
  .salary_bx .under_yellow span {
    font-size: 3vw;
  }
  .salary_bx li {
    width: 82%;
  }
  .salary_bx li p:first-of-type {
    width: 53%;
  }
  .salary_bx li p:nth-of-type(2) {
    width: 6%;
  }
  .salary_bx li .addition:last-of-type {
    width: 41%;
  }
  .im_plus {
    margin-top: 14vw;
  }
}
/*******************************
  job-list
*******************************/
.job-list {
  padding-top: 73px;
}
.job-list .swiper-wrap {
  position: relative;
}
.swiper {
  margin-bottom: 130px;
}
.swiper-wrapper {
  width: 100%;
  height: auto!important;
}
.swiper-slide {
  padding: 20px 20px 30px;
  color: #333;
  height: 100%;
  text-align: center;
  border-radius: 25px;
  background-color: #fff;
}
.swiper-slide h4 {
  margin-bottom: 20px;
  color: #fff;
  background: #60AA48;
  border-radius: 30px;
  font-size: 25px;
}
.section.job-list::after {
    content: "";
    display: block;    
    margin: 0 auto;
    background: url(../images/bg_dots03.png) repeat-x top left;
    height: 4px;
    max-width: 960px;
}
.swiper-pagination-bullet {
  margin: 0 8px!important;
  background: #888;
  opacity: unset;
}
.swiper-pagination-bullet-active {
  background: #60AA48;
}
.swiper-slide p {
  margin-top: 19px;
  text-align: left;
}
.swiper-slide img {
  border-radius: 18px;
}
.swiper-button-prev,
.swiper-button-next {
  width: 80px;
  height: 80px;
  top: 288px;
}
.swiper-button-prev {
  left: 0;
  background: url(../images/bt_slide-prev.png) top center/80px 80px;
}
.swiper-button-next {
  right: 0;
  background: url(../images/bt_slide-next.png) top center/80px 80px;
}
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}
@media screen and (min-width: 769px) {
  .swiper {
    max-width: 880px;
  }
  .swiper-slide {
    max-width: 430px!important;
  }
  .swiper-slide h4 {
    height: auto!important;
    padding: 8px 5px 0;
  }
  .swiper-slide p {
    font-size: 16px;
  }
  .swiper-pagination span,
  .swiper-button-prev,
  .swiper-button-prev {
    cursor:pointer;
  }
  .swiper-pagination {
    bottom: -45px!important;
  }
  .swiper-pagination-bullet {
    width: 18px;
    height: 18px;  
  }
}
@media screen and (max-width: 768px) {
  .job-list {
    padding-top: 40px;
    position: relative;
  }
  .swiper {
    margin-bottom: 20.8vw;
  }
  .swiper-slide {
    width: 100%;
  }
  .job-list .titleTop03 {
    margin-bottom: 14vw;
  }
  .section.job-list::after {
    background-size: auto 2px;
    height: 2px;
  }
  .swiper-slide h4 {
    height: auto !important;
    font-size: 4.6vw;
    padding: 1.6vw;
  }
  .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
  }
  .swiper-pagination {
    bottom: -11.3vw!important;
  }
  .swiper-slide p {
    font-size: 3.7vw;
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 10.5vw;
    height: 10.5vw;
    top: 45.5vw;
    background-size: 10.5vw 10.5vw;
  }
}

/*******************************
  benefit
*******************************/
.benefit_list h4 {
  padding: 12px;
  background: #60AA48;
  border-radius: 20px 20px 0 0;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.benefit_content {
  padding: 38px 20px 20px;
  background: #fff;
  border-radius: 0 0 20px 20px;
}
.figure_bx {
  margin: 0 auto;
}
.figure_bx img {
  width: auto;
  max-width: 100%;
  display: inline-block;
}
.transportation_list li {
  padding-left: 24px;
  position: relative;
}
.transportation_list li::before {
  content: "●";
  display: inline-block;
  position: absolute;
  left: 0;
  top: auto;
}
@media screen and (min-width: 769px) {
  .section.benefit {
    padding-top: 90px;
    padding-bottom: 80px;
  }
  .benefit_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .benefit_list > li {
    width: calc((100% - 30px)/3);
    display: flex;
    flex-direction: column;
  }
  .figure_bx {
    margin-bottom: 30px;
    height: 98px;
    text-align: center;
  }
  .benefit_content {
    flex: 1 auto;
    font-size: 16px;
  }
  .benefit_list h4 {
    font-size: 25px;
  }
  .benefit_list > li + li {
    margin-left: 15px;
  }
  .benefit_list > li.ml_0 {
    margin-left: 0;
  }
  .benefit_list > li:nth-of-type(n + 4) {
    margin-top: 20px;
  }
  .transportation_list li::before {
    font-size: 24px;
    line-height: 1.1;
  
  }
}
@media screen and (min-width: 769px) and (max-width: 910px) {
  .benefit_list h4 {
    font-size: 20px;
  }
  .benefit_content {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .section.benefit {
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 3.72vw;
  }
  .benefit_list h4 {
    font-size: 4.6vw;
  }
  .figure_bx {
    width: auto;
    margin : 0 0 7vw;
    text-align: center;
  }
  .figure_bx img {
    display: inline-block;
  }
  .benefit_list > li + li {
    margin-top: 5.3vw;
  }
}

/*-----------------------------------*/
/* TOPへ戻るボタンがコンテンツに潜らないように調整 */
#footer .content .btnFooterNavi {
  z-index: 1300;
}
@media screen and (max-width: 768px) {
  .gNavBody {
    z-index: 1400;
  }
}