@charset "utf-8";
@import url("./jquery.bxslider.css");

/*
  File Name   : recruit.css
  Description : 採用情報ページ
*/


/* =================================================================================
   public
================================================================================= */
/* breadcrumb 
============================================ */
.breadcrumb {
  margin-top: 25px;
  font-size: 13px;
  text-align: center;
}
.breadcrumb ul {
  letter-spacing: -.5em;
}
.breadcrumb li {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
}
.breadcrumb li + li {
  margin-left: 1em;
}
.breadcrumb li + li:before {
  content: ">";
  display: inline-block;
  margin-right: 1em;
}


/* item-box
============================================ */
.item-box {
  position: relative;
  min-height: 550px;
  z-index: 0;
}
.item-box__img {
  position: absolute;
  top: 0;
  width: 70vw;
  max-width: 960px;
  height: 550px;
  z-index: -1;
}
.item-box__img > div {
  width: 100%;
  height: 100%;
  background: no-repeat center top;
  background-size: cover;
}
.item-box__img.img-base-center > div { background-position: center top; }
.item-box__img.img-base-left > div { background-position: left top; }
.item-box__img.img-base-right > div { background-position: right top; }

.item-box-inner {
  display: inline-block;
  text-align: left;
  background: #fff;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/* item-box-left */
.item-box-left .item-box-inner {
  text-align: left;
}
.item-box-left .item-box-inner {
  padding: 5.21% 5.21% 0 0;
}
.item-box-left .item-box__img {
  left: 320px;
}

/* item-box-right */
.item-box-right .item-box-inner-wrap {
  text-align: right;
}
.item-box-right .item-box-inner {
  padding: 5.21% 0 0 5.21%;
}
.item-box-right .item-box__img {
  right: 320px;
}

/* item-box-center */
.item-box-center .item-box__img {
  position: relative;
  width: 100%;
  margin-bottom: 30px;
}


/* staff-nav
============================================ */
.staff-nav {
  padding: 60px 0;
  margin: 0 -20px;
  border-top: 2px solid #eee;
}
.staff-nav__ttl {
  margin-bottom: 1.5em;
  font-size: 20px;
  color: #5c8c4b;
  text-align: center;
}
.staff-nav-inner {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
}
.staff-nav__item {
  width: 320px;
}
.staff-nav__item a {
  position: relative;
  display: block;
  padding: 10px;
  text-decoration: none;
  z-index: 0;
}
.staff-nav__item-inner {
  height: 300px;
  padding: 20px 0;
  text-align: center;
  background: rgba(255, 255, 255, .95);
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
body.tab .staff-nav__item-inner,
body.sp .staff-nav__item-inner,
.staff-nav__item a:hover .staff-nav__item-inner {
  opacity: 1;
}
.staff-nav__item__figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.staff-nav__item__logo {
  padding-bottom: 20px;
  margin: 0 30px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.staff-nav__item dt {
  letter-spacing: -.05em;
}
.staff-nav__item dd {
  font-size: 16px;
  font-weight: bold;
}
.staff-nav__item__more {
  margin-top: 30px;
  font-size: 16px;
  font-weight: bold;
  color: #7da86e;
}
.staff-nav__item__more .mod-arrow-01 {
  margin-left: .5em;
}


/* other-link
============================================ */
.other-link {
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 20px;
}
.other-link-inner {
  padding: 40px 0;
  border: 15px solid #ebeee9;
}
.other-link__ttl {
  margin-bottom: 1.5em;
  font-size: 20px;
  text-align: center;
}
.other-link-list {
  letter-spacing: -.5em;
  text-align: center;
}
.other-link__item {
  display: inline-block;
  width: 45%;
  margin: 0 4px;
  vertical-align: top;
  letter-spacing: normal;
}
.other-link__item a.mod-btn-01 {
  line-height: 70px;
  border-width: 5px;
}
.other-link__item a.mod-btn-01[href*="guideline"] {
  font-size: 18px;
  color: #5c8c4b;
}
.other-link__item a.mod-btn-01[href*="entry"] {
  font-size: 25px;
  color: #fff;
  border-color: transparent;
  background: #5c8c4b;
}


@media screen and (max-width: 767px) {
  /* breadcrumb 
  ============================================ */
  .breadcrumb {
    margin-top: .75em;
    font-size: 100%;
  }
  
  
  /* item-box
  ============================================ */
  .item-box {
    min-height: 0;
  }
  .item-box__img {
    position: static;
    width: auto;
    margin: 0 -3.125vw;
    height: 57.81vw;
  }

  .item-box-inner {
    padding: 6.25vw 0 0 !important;
  }
  
  /* item-box-center */
  .item-box-center .item-box__img {
    width: auto;
    margin-bottom: 0;
  }
  
  
  /* staff-nav
  ============================================ */
  .staff-nav {
    padding: 6.25vw 0 9.375vw;
    margin: 0 -3.125vw;
    border-width: .1em;
  }
  .staff-nav__ttl {
    margin-bottom: 1.5em;
    font-size: 150%;
  }
  .staff-nav-inner {
    max-width: 640px;
  }
  .staff-nav__item {
    width: 50%;
  }
  .staff-nav__item a {
    padding: 1.56vw;
  }
  .staff-nav__item-inner {
    height: 46.88vw;
    padding: 3.125vw 0;
  }
  .staff-nav__item__logo {
    padding-bottom: 3.125vw;
    margin: 0 4.69vw 3.125vw;
  }
  .staff-nav__item dt {
    font-size: 80%;
    letter-spacing: -.05em;
  }
  .staff-nav__item dd {
    font-size: 100%;
  }
  .staff-nav__item__more {
    margin-top: 3.125vw;
    font-size: 110%;
  }
  .slider-control-prev,
  .slider-control-next {
    top: 0;
    width: 7.81vw;
    height: 100%;
    margin-top: 0;
  }
  .slider-control-prev {
    left: 0;
  }
  .slider-control-next {
    right: 0;
  }
  .slider-control-prev a,
  .slider-control-next a {
    display: block;
    height: 100%;
    text-indent: 100vw;
  }
  .slider-control-prev i,
  .slider-control-next i {
    width: 4.69vw;
    height: 4.69vw;
  }
  .slider-control-prev i:after,
  .slider-control-next i:after {
    border-width: .3em;
  }

  /* other-link
  ============================================ */
  .other-link {
    padding: 0;
  }
  .other-link-inner {
    padding: 6.25vw 0;
    border-width: .75em;
  }
  .other-link__ttl {
    font-size: 110%;
  }
  .other-link__item {
    width: 45%;
    margin: 0 1.56vw;
  }
  .other-link__item a.mod-btn-01 {
    line-height: 10.94vw;
    border-width: .2em;
  }
  .other-link__item a.mod-btn-01[href*="guideline"] {
    font-size: 110%;
  }
  .other-link__item a.mod-btn-01[href*="entry"] {
    font-size: 125%;
  }
}



/* =================================================================================
   index
================================================================================= */
/* recruit-header
============================================================ */
#recruit.index .recruit-header {
  position: relative;
  height: 900px;
  padding: 160px 0 200px;
  margin: 0 -20px;
  background: url(/assets/img/recruit/bg-ttl-01.jpg) no-repeat center center;
  background-size: cover;
}
#recruit.index .recruit-header-inner {
  position: relative;
  height: 100%;
}
#recruit.index .recruit__ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* intro
============================================================ */
.intro {
  position: relative;
  margin-top: -200px;
  background: #fff;
}
.intro-inner {
  padding: 60px 0 90px;

}
.intro__ttl {
  line-height: 1.7;
  margin-bottom: 1em;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: .05em;
  text-align: center;
}
.intro__txt {
  padding: 0 60px;
}

/* staff-list
============================================================ */
.staff-list {
  margin-bottom: 80px;
}
.staff-list-inner {
  position: relative;
  width: 350px;
  z-index: 0;
}
.staff-list-inner:after {
  content: "";
  position: absolute;
  display: block;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -1;
}
.staff-list__copy {
  min-height: 4.5em;
  line-height: 1.5;
  font-size: 28px;
  font-weight: normal;
  color: #5c8c4b;
  white-space: nowrap;
}
.staff-list__txt {
  margin: 20px 0;
}
.staff-list__txt dd {
  font-size: 16px;
  font-weight: bold;
}
.staff-list__btn-more a {
  display: block;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  background: #7da86e;
}
.staff-list__btn-more a .mod-arrow-01 {
  margin-left: .5em;
}

@media screen and (max-width: 767px) {
  /* recruit-header
  ============================================================ */
  #recruit.index .recruit-header {
    height: 54.69vw;
    padding: 3.125vw 0 0;
    margin: 9.38vw -3.125vw 0;
  }
  #recruit.index .recruit__ttl {
    width: 25%;
  }
  
  /* intro
  ============================================================ */
  .intro {
    margin-top: 0;
  }
  .intro-inner {
    padding: 6.25vw 0 9.38vw;
  
  }
  .intro__ttl {
    font-size: 150%;
    text-align: center;
  }
  .intro__txt {
    padding: 0;
  }

  /* staff-list
  ============================================================ */
  .staff-list {
    margin-bottom: 9.38vw;0
  }
  .staff-list__logo {
    height: 23.44vw;
    overflow: hidden;
    text-align: center;
  }
  .staff-list__logo img {
    width: 40%;
  }
  .staff-list-inner {
    display: block;
    width: auto;
    padding: 0 !important;
    text-align: center !important;
  }
  .staff-list-inner:after {
    content: none;
  }
  .staff-list__copy {
    min-height: 0;
    font-size: 130%;
    white-space: normal;
  }
  .staff-list__txt {
    margin: 1em 0;
  }
  .staff-list__txt dd {
    font-size: 110%;
  }
  .staff-list__btn-more a {
    line-height: 2.5em;
    font-size: 110%;
    border-radius: 2.5em;
  }
}

/* =================================================================================
   staff
================================================================================= */
/* staff-header
============================================ */
#recruit.staff .staff-header {
  position: relative;
  height: 900px;
  padding-top: 260px;
  margin: 0 -20px;
  z-index: 0;
}
#recruit.staff .staff-header__figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#recruit.staff .staff-header__figure > div {
  height: 100%;
  background: no-repeat center center;
  background-size: cover;
}
#recruit.staff .staff-header-inner-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
#recruit.staff .staff-header-inner {
  position: relative;
  height: 420px;
  width: 360px;
  padding: 10px 40px 0 0;
  color: #fff;
  z-index: 0;
}
#recruit.staff .staff-header-inner:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  background: rgba(92, 140, 75, .9);
  z-index: -1;
}
#recruit.staff .staff-header-inner:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -160px;
  right: 210px;
  width: 300px;
  height: 300px;
  background: url(/assets/img/recruit/staff/bg-header-01.png) no-repeat 0 0;
  background-size: contain;
}
#recruit.staff .staff__ttl {
  position: relative;
  height: 210px;
  line-height: 1.5;
  margin-bottom: .5em;
  font-size: 35px;
  font-weight: normal;
  letter-spacing: -.05em;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
}
#recruit.staff .staff__ttl span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#recruit.staff .staff-header-inner dd {
  font-size: 16px;
  font-weight: bold;
}

/* question
============================================ */
#recruit.staff .question {
  margin-top: 90px;
}
#recruit.staff .question-header-inner {
  text-align: center;
}
#recruit.staff .question__caption {
  line-height: 1.2;
  color: #5c8c4b;
}
#recruit.staff .question__caption-txt {
  font-size: 13px;
}
#recruit.staff .question__caption-num {
  display: block;
  font-size: 22px;
}
#recruit.staff .question__ttl {
  line-height: 1.4;
  font-size: 18px;
  margin: 2em 0;
}
#recruit.staff .question__item__copy {
  line-height: 1.3;
  margin-bottom: 1em;
  font-size: 28px;
  font-weight: normal;
  color: #5c8c4b;
}
#recruit.staff .question__item__figure {
  padding: 35px 0;
}
#recruit.staff .question__item-inner {
  width: 57.29%;
  min-width: 480px;
}
#recruit.staff .question__item.item-box-center .question__item-inner {
  width: 100%;
}


/* message
============================================ */
#recruit.staff .message {
  margin: 90px 0;
}
#recruit.staff .message-inner {
  padding: 40px 30px;
  border: 5px solid #5c8c4b;
}
#recruit.staff .message__ttl {
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;
  font-size: 20px;
  color: #5c8c4b;
  text-align: center;
  border-bottom: 2px solid #eee;
}


@media screen and (max-width: 767px) {
  /* staff-header
  ============================================ */
  #recruit.staff .staff-header {
    height: auto;
    padding-top: 0;
    margin: 6.25vw -3.125vw 0;
  }
  #recruit.staff .staff-header__figure {
    position: static;
    height: 54.69vw;
  }
  #recruit.staff .staff-header-inner-wrap {
    padding: 0;
  }
  #recruit.staff .staff-header-inner {
    height: auto;
    width: auto;
    padding: 1.56vw 6.25vw 3.125vw 40vw;
  }
  #recruit.staff .staff-header-inner:after {
    top: -18vw;
    left: 4.69vw;
    right: auto;
    bottom: auto;
    width: 34vw;
    height: 34vw;
  }
  #recruit.staff .staff__ttl {
    height: auto;
    padding-bottom: .5em;
    margin-bottom: .5em;
    font-size: 110%;
    white-space: normal;
  }
  #recruit.staff .staff__ttl span {
    position: static;
    -webkit-transform: none;
    transform: none;
  }
  #recruit.staff .staff-header-inner dt {
    letter-spacing: -.05em;
    white-space: nowrap;
  }
  #recruit.staff .staff-header-inner dd {
    font-size: 110%;
  }
  
  /* question
  ============================================ */
  #recruit.staff .question {
    margin-top: 7.81vw;
  }
  #recruit.staff .question__caption-txt {
    font-size: 90%;
  }
  #recruit.staff .question__caption-num {
    font-size: 150%;
  }
  #recruit.staff .question__ttl {
    font-size: 110%;
    margin: .75em 0 1.5em;
  }
  #recruit.staff .question__item__copy {
    font-size: 140%;
  }
  #recruit.staff .question__item-inner {
    width: auto;
    min-width: 0;
  }

  /* message
  ============================================ */
  #recruit.staff .message {
    margin: 6.25vw 0 9.38vw;
  }
  #recruit.staff .message-inner {
    padding: 4.69vw;
    border-width: .2em;
  }
  #recruit.staff .message__ttl {
    padding-bottom: 1em;
    margin-bottom: 1em;
    font-size: 150%;
    border-width: .1em;
  }
}


/* =================================================================================
   staff02
================================================================================= */
@media screen and (max-width: 1300px) and (min-width: 768px) {
  #recruit.staff02 .staff-header__figure > div {
    background-position: 70% center;
  }
}


/* =================================================================================
   staff03
================================================================================= */
@media screen and (max-width: 1300px) and (min-width: 768px) {
  #recruit.staff03 .staff-header__figure > div {
    background-position: 40% center;
  }
}



/* =================================================================================
  guideline
================================================================================= */
/* article-header
============================================================ */
#recruit.guideline .article-header-01 {
  background-image: url(/assets/img/recruit/guideline/bg-ttl-01.jpg);
}

/* summary-selector
============================================================ */
.summary-selector {
  margin-bottom: 40px;
}
.summary-selector-list {
  display: table;
  table-layout: fixed;
  width: 100%;
  box-shadow: 0 0 0 3px #eee inset;
}
.summary-selector__item {
  display: table-cell;
  vertical-align: middle;
  box-shadow: 0 0 0 1px #eee inset;
}
.summary-selector__item a {
  position: relative;
  display: block;
  line-height: 3em;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.summary-selector__item a:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid transparent;
  box-sizing: border-box;
}
.summary-selector__item a:hover,
.summary-selector__item.active a {
  color: #5c8c4b;
}
.summary-selector__item a:hover:after,
.summary-selector__item.active a:after {
  border-color: #5c8c4b;
}
.summary-selector__item.active {
  pointer-events: none;
}

/* summary
============================================================ */
.summary__note {
  margin-bottom: 1.5em;
}
.ft-red {
  color: #f00;
}
.summary__btn-entry {
  margin-top: 60px;
}
.summary__btn-entry a {
  display: block;
  line-height: 3;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  border-radius: 3em;
  text-align: center;
  text-decoration: none;
  background: #5c8c4b;
}
.summary__btn-entry a .mod-arrow-01 {
  margin-left: .5em;
}

@media screen and (max-width: 767px) {
  /* summary-selector
  ============================================================ */
  .summary-selector {
    margin-bottom: 6.25vw;
  }
  .summary-selector-list {
    table-layout: auto;
    box-shadow: 0 0 0 3px #eee inset;
  }
  .summary-selector__item {
    box-shadow: 0 0 0 1px #eee inset;
  }
  .summary-selector__item a {
    min-width: 20vw;
    line-height: 3em;
    font-size: 100%;
  }
  .summary-selector__item a:after {
    border-width: .2em;
  }
  
  /* summary
  ============================================================ */
  .summary__btn-entry {
    margin-top: 6.25vw;
  }
  .summary__btn-entry a {
    font-size: 125%;
  }
}


  /* youtube
  ============================================================ */
.youtube-wrap {
  max-width: 560px;
  margin: 40px auto 0;
}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}