@charset "utf-8";
/*------------------------------------------------------------
	recruit
------------------------------------------------------------*/
/* レイアウトや見た目のスタイル */
/* ---------------------------- */

#main .recruit .multiple{
	height:60vw;
	width: 100%;
}

#main .recruit .multiple-list{
	position: relative;
    justify-content: space-between;
    flex-wrap: wrap;
}

#main .recruit .multiple-item{
    width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;	
}

#main .recruit .multiple-item:nth-child(-n+2){
    margin-top: 0;
}

/* アニメーションスタイル */
/* ---------------------------- */

/* アニメーション前 */
#main .recruit .u-fade-type-up{
    transform: translateY(50px);
    opacity: 0;
}

/* トリガー発火でis-activeを付与 */
#main .recruit .is-active .u-fade-type-up{
    transition: .6s;
    transform: translateY(0);
    opacity: 1;
}

#main .recruit .is-active .u-fade-type-up:nth-child(2){transition-delay: .4s;}
#main .recruit .is-active .u-fade-type-up:nth-child(3){transition-delay: .8s;}
#main .recruit .is-active .u-fade-type-up:nth-child(4){transition-delay: 1.2s;}
#main .recruit .is-active .u-fade-type-up:nth-child(5){transition-delay: 1.6s;}
#main .recruit .is-active .u-fade-type-up:nth-child(6){transition-delay: 2s;}


/* ---------------------------- */
#main .recruit .detail {
  padding: 16px 20px 29px;
}
#main .recruit .detail p {
  line-height: 1.5;
  margin-bottom: 2em;
}
#main .recruit .detail p.rc_text01 {
  font-size: 1.5em;
  color:#448477;
  font-weight: bolder;
}
#main .recruit .detail h3 {
  position: relative;
  padding: 5px 5px 5px 42px;
  background: #66abb0;
  color: #fff;
  margin-left: -33px;
  line-height: 1.3;
  z-index: -1;
  margin-bottom: 2em;
  font-size: 1.3em;
}
#main .recruit .detail h3:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -2
}
#main .recruit .detail ul.rec1 {
  margin-bottom: 20px;
}
#main .recruit .detail ul.rec1 li {
  margin-bottom: 10px;
  line-height: 1.5;
}
#main .recruit .detail ul.rec1 li:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 19.4px;
  background-image: url("../images/recruit/rc_check.png");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
}
#main .recruit .detail h4 {
  position: relative;
  color: #fff;
  background: #66abb0;
  z-index: -4;
  border-radius: 0 10px 10px;
  margin-bottom: 20px;
  font-size: 1.2em;
  padding: 6px 0;
}
#main .recruit .detail h4 :first-letter {
  font-size: 2em;
}
#main .recruit .detail h4:before {
  content: "";
  position: absolute;
  background: #66abb0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
#main .recruit .detail figure {
  margin-bottom: 21px;
}
#main .recruit .detail figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px auto;
}
#main .recruit .detail figure figcaption {
  margin: 0 -10px 11px;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
  background-color: #fff;
}
#main .recruit .detail span.marker-animation {
  background-image: -webkit-linear-gradient(left, transparent 50%, rgb(102, 171, 176) 30%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgb(102, 171, 176) 30%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgb(102, 171, 176) 30%);
  background-image: -o-linear-gradient(left, transparent 50%, rgb(102, 171, 176) 30%);
  background-image: linear-gradient(left, transparent 50%, rgb(102, 171, 176) 30%);
  background-repeat: repeat-x;
  background-size: 200% 0.5em;
  background-position: 0.5em;
  transition: all 2s ease;
  font-weight: bold;
}
#main .recruit .detail span.marker-animation.active {
  background-position: -100% 1.2em;
}
#main .recruit .guidelines {
  padding: 16px 20px 29px;
  border: solid 3px #979595;
  width: 84%;
  height: auto;
  margin: 30px auto;
}
#main .recruit .guidelines h3 {
  position: relative;
  padding: 5px 5px 5px 42px;
  background:#ADA878;
  color: #fff;
  margin-left: -33px;
  line-height: 1.3;
  z-index: -1;
  margin-bottom: 40px;
  font-size: 1.3em;
}
#main .recruit .guidelines h3:before {
  position: absolute;
  content: '';
  left: -2px;
  top: -2px;
  border: none;
  border-left: solid 40px white;
  border-bottom: solid 79px transparent;
  z-index: -2
}
#main .recruit .guidelines h4 {
  position: relative;
  color: #fff;
  background: #ADA878;
  z-index: -4;
  border-radius: 0 10px 10px;
  margin: 40px 0;
  font-size: 1.1em;
  padding: 6px 0;
}
#main .recruit .guidelines h4:before {
  content: "";
  position: absolute;
  background:#ADA878;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}
#main .recruit .guidelines p {
  line-height: 1.5;
  margin-bottom: 2em;
}
#main .recruit .guidelines p span{
  line-height: 1.5;
  margin-bottom: 2em;
  font-size: 0.9em;
}

#main .recruit .guidelines p.rc_text02 {
  font-size: 1.06em;
  color:#4E4C4C;
  font-weight:bold;
}
#main .recruit .guidelines h5 {
  font-size: 1.2em;
  color: #000;
  font-weight: bolder;
  margin-bottom: 10px;
}
#main .recruit ul.rc_ul01 {
  border-top: solid #9C8F6C 1px;
  border-bottom: solid #9C8F6C 1px;
  padding: 0.5em 0 0.5em 1.5em;
  margin-bottom: 40px;
}
#main .recruit ul.rc_ul01 li {
  color:#9C8F6C;	
  line-height: 1.5;
  padding: 0.5em 0;
  list-style: disc;
  font-weight: bold;
}
#main .recruit ul.fp_ul02 {
  background: #EDECE4;
  padding:1em;
  margin-bottom: 1.5em;
}
#main .recruit ul.fp_ul02 li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style:none;
}