@charset "utf-8";
/* スタッフ */

.staff #breadcrumb {
  margin-bottom: 0;
}

.staff_contents {
  background: url("../img/hugstaff/staff_bg.jpg") repeat-y;
  background-size: 100% auto;
  padding: 3rem 0 4rem;
}


/***************************
 ** トップページ
 */
.staff_list {
  margin-bottom: 5rem;
}

.staff_list a {
  text-decoration: none;
  color: #000;
}

.staff_list li {
  margin-bottom: 1.5rem;
  border: 10px solid #fff;
  padding: 10px;
  border-radius: 20px;
}

.list_inner {
  display: table;
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}

.staff_list_img {
  display: table-cell;
  width: 25%;
  vertical-align: top;
}

.staff_list_text {
  display: table-cell;
  width: 75%;
  box-sizing: border-box;
  padding-left: 2rem;
  vertical-align: middle;
}

.staff_name {
  font-size: 2.375rem;
  margin-bottom: 1rem;
}

.staff_name span {
  display: inline-block;
  margin-left: 1rem;
  font-family: 'Courgette', cursive;
  font-size: 0.5em;
}

.staff_link {
  color: #F57878;
  font-size: 1.25rem;
}

.staff_link::after {
  content: " 》";
}

@media screen and (max-width: 736px) {
  .staff_list {
    margin-bottom: 3rem;
  }

  .staff_list li {
    margin-bottom: 1rem;
    border: 5px solid #fff;
    padding: 5px;
    border-radius: 10px;
  }

  .list_inner {
    padding: 5px;
  }

  .staff_list_img {
    width: 25%;
  }

  .staff_list_text {
    width: 75%;
    padding: 1rem;
  }

  .staff_name {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .staff_link {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 414px) {
  .staff_list_text {
    padding: 0.5rem;
  }
  
  .staff_name {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
  
  .staff_list .catch {
    display: none;
  }
}

@media screen and (max-width: 320px) {
  .staff_name {
    font-size: 1rem;
  }
  
  .staff_link {
    font-size: 0.75rem;
  }
}


/***************************
 ** スタッフ紹介ページ
 */
.profile {
  padding: 10px;
  border: 10px solid #fff;
}

.profile_inner {
  background: #fff;
  padding: 2rem;
  position: relative;
}

.profile_upper {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px dashed #e87373;
}

.profile_img {
  flex-basis: 28%;
  margin-right: 4%;
  box-sizing: border-box;
}

.profile_img img {
  border: 10px solid #f9d4d3;
}

.profile_text {
  flex-basis: 68%;
}

.profile_text h3 {
  font-size: 2.375rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.profile h4 {
  font-size: 1.25rem;
  color: #fff;
  background: #e87373;
  margin-bottom: 1.5rem;
}

.profile h4 span {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  margin-left: 2em;
  border-left: 2px dotted #fff;
}

.profile_text h4 {
  font-family: 'Courgette', cursive;
}

.msg_ttl {
  display: inline-block;
  padding-right: 2rem;
}

.catch {
  background: #fff6f7;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: 1.5s;
  animation-name: fuwafuwa;
}

.catch span {
  display: block;
  font-size: 1.375rem;
  line-height: 2;
  text-align: center;
  background: url("../img/hugstaff/sensei_catch.jpg") no-repeat;
  background-size: 100% auto;
  margin-bottom: 1rem;
}

@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, -5px);
  }
}
.profile_table table {
  border-collapse: separate;
  border-spacing: 0px 6px;
}

.profile_table table tr th,
.profile_table table tr td {
  box-sizing: border-box;
  font-size: 0.875rem;
  font-family: "Sawarabi Gothic";
  line-height: 1;
  vertical-align: middle;
}

.profile_table table tr th {
  width: 40%;
  font-weight: 600;
  background: #fef6f6;
  color: #666;
  position: relative;
  padding: 12px 10px;
  border: 1px solid #f9d4d3;
  text-align: center;
}

.profile_table table tr td {
  width: 60%;
  border: 1px solid #fef6f6;
  padding: 12px 8px 12px 18px;
}

.profile_table table tr th:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(249,212,211,0);
  border-left-color: #f9d4d3;
  border-width: 12px;
  margin-top: -12px;
}

.profile_table table tr th:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(249,212,211,0);
  border-left-color: #fef6f6;
  border-width: 10px;
  margin-top: -10px;
}

.introduction_link {
  width: 50%;
  margin: 0 auto;
  border: 5px solid #e87373;
  background: #fff;
  padding: 5px;
  text-align: center;
  border-radius: 50px;
  transition: 0.8s;
}

.introduction_link a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #fff;
  font-size: 1.25rem;
  border-radius: 50px;
  background: #e87373;
}

.introduction_link:hover {
  opacity: 0.7;
}

@media screen and (max-width: 736px) {
  .staff_contents {
    padding: 2rem 0 2rem;
  }

  .profile {
    padding: 5px;
    border: 5px solid #fff;
  }

  .profile_inner {
    padding: 0.6rem;
  }

  .profile_upper {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .profile_img {
    flex-basis: 100%;
    margin-right: 0;
    text-align: center;
    margin-bottom: 1rem;
  }

  .profile_img img {
    width: 70%;
  }

  .profile_text {
    flex-basis: 100%;
  }

  .profile_text h3 {
    font-size: 1.75rem;
    text-align: center;
  }

  .profile h4 {
    font-size: 1rem;
    margin-bottom: 1rem;
  }

  .profile h4 span {
    margin-left: 1em;
  }

  .msg_ttl {
    padding-right: 1rem;
  }

  .catch span {
    font-size: 1rem;
    line-height: 1;
    padding: 1rem 0.5rem 0.5rem;
  }

  .introduction_link {
    box-sizing: border-box;
    width: 100%;
    border: 3px solid #e87373;
    padding: 3px;
  }

  .introduction_link a {
    font-size: 1rem;
  }
}


/***************************
 ** スタッフ募集
 */

/* 上に斜めストライプボーダーつきのコンテンツ */
.job_contents {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.job_contents::before {
  content: '';
  width: 100%;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  background-size: 18px 18px;
  background-color: #e87373;
  background-image: -webkit-gradient(linear,0 0,100% 100%,color-stop(.25,#f9d4d3),color-stop(.25,transparent),color-stop(.5,transparent),color-stop(.5,#f9d4d3),color-stop(.75,#f9d4d3),color-stop(.75,transparent),to(transparent));
  background-image: -webkit-linear-gradient(-45deg,#f9d4d3 25%,transparent 25%,transparent 50%,#f9d4d3 50%,#f9d4d3 75%,transparent 75%,transparent);
  background-image: -moz-linear-gradient(-45deg,#f9d4d3 25%,transparent 25%,transparent 50%,#f9d4d3 50%,#f9d4d3 75%,transparent 75%,transparent);
  background-image: -ms-linear-gradient(-45deg,#f9d4d3 25%,transparent 25%,transparent 50%,#f9d4d3 50%,#f9d4d3 75%,transparent 75%,transparent);
  background-image: -o-linear-gradient(-45deg,#f9d4d3 25%,transparent 25%,transparent 50%,#f9d4d3 50%,#f9d4d3 75%,transparent 75%,transparent);
  background-image: linear-gradient(-45deg,#f9d4d3 25%,transparent 25%,transparent 50%,#f9d4d3 50%,#f9d4d3 75%,transparent 75%,transparent);
}

/* スタッフ募集ページ用幅コンテンツ */
.job_wrapper {
  max-width: 1120px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 20px;
}

.bg_pink {
  background: url("../img/hug_paper02.jpg") repeat-y;
  background-size: 100% auto;
}

/* 各セクションのタイトル */
.job_ttl {
  text-align: center;
  line-height: 1.3;
  font-size: 2.375rem;
  font-family: "Sawarabi Gothic";
  margin-bottom: 3rem;
}

.job_ttl span {
  font-size: 1.25rem;
  color: #e87373;
}

@media screen and (max-width: 736px) {
  /* 上に斜めストライプボーダーつきのコンテンツ */
  .job_contents {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  /* スタッフ募集ページ用幅コンテンツ */
  .job_wrapper {
    padding: 0 1rem;
  }

  /* 各セクションのタイトル */
  .job_ttl {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .job_ttl span {
    font-size: 0.875rem;
  }
}

/* 導入 */
.lead_text {
  margin-bottom: 3rem;
  text-align: center;
  font-size: 1.25rem;
}

.lead_img {
  width: 46%;
  margin: 0 auto;
  position: relative;
}

.lead_img::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 0 0;
  box-shadow: inset 0 0 20px #fff, inset 0 0 20px #fff, inset 0 0 20px #fff, inset 0 0 20px #fff;
}

@media screen and (max-width: 736px) {
  .lead_text {
    margin-bottom: 1.5rem;
    font-size: 1rem;
  }

  .lead_img {
    width: 80%;
  }
}

/* 先輩スタッフの声 */
.job_slider_01 li {
  margin: 0 1rem;
}

.baloon {
  padding: 1rem;
  margin: 0 0 2rem;
  box-sizing: border-box;
  border: 2px solid #e87373;
  background: #fff;
  position: relative;
  line-height: 1.2;
  font-size: 0.9375rem;
}

.baloon:after,
.baloon:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.baloon:before {
  border-color: rgba(232,115,115,0);
  border-top-color: #e87373;
  border-width: 23px;
  margin-left: -23px;
  box-sizing: border-box;
}

.baloon:after {
  border-color: rgba(255,255,255,0);
  border-top-color: #fff;
  border-width: 20px;
  margin-left: -20px;
  box-sizing: border-box;
}

.staff_img {
  width: 45%;
  height: auto;
  margin: 0 auto;
  padding: 0;
  border: 5px solid #e87373;
  border-radius: 50%;
  overflow: hidden;
}

/* お仕事の流れ */
.job_slider_02 li {
  margin: 0 1rem;
}

.job_slider_02 li h3 {
  font-size: 1.3125rem;
  padding: 0.6rem;
}

.flow_01 h3::before {
  content: "1";
}

.flow_02 h3::before {
  content: "2";
}

.flow_03 h3::before {
  content: "3";
}

.flow_04 h3::before {
  content: "4";
}

.flow_05 h3::before {
  content: "5";
}

.job_slider_02 li h3::before {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  line-height: 1.3em;
  text-align: center;
  margin-right: 0.5em;
  background: #F57878;
  color: #fff;
  border-radius: 50%;
  vertical-align: bottom;
}

.job_slider_02 li .flow_text {
  background: #F57878;
  color: #fff;
  padding: 0.6rem 1rem;
}

.job_slider_01 .slick-prev:before,
.job_slider_01 .slick-next:before,
.job_slider_02 .slick-prev:before,
.job_slider_02 .slick-next:before  {
    content: "";
}

.job_slider_01 .slick-prev,
.job_slider_01 .slick-next,
.job_slider_02 .slick-prev,
.job_slider_02 .slick-next {
  position: absolute;
  top: 50%;
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.job_slider_01 .slick-next,
.job_slider_02 .slick-next {
    right: -60px;
    background: #EFA0A0;
}

.job_slider_01 .slick-prev,
.job_slider_02 .slick-prev {
    left: -60px;
    background: #EFA0A0;
}

/* 研修について */
.job_sub_ttl {
  color: #F57878;
  font-size: 1.625rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
}

.training_img {
  width: 46%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 2rem;
}

.training_text {
  text-align: center;
}

/* 募集要項 */
.guidelines_text {
  text-align: center;
  margin-bottom: 3rem;
}

#guidelines_table tr th {
  width: 20%;
  white-space: nowrap;
}

@media screen and (max-width: 736px) {
  .guidelines_text {
    font-size: 0.875rem;
    text-align: left;
    margin-bottom: 1.5rem;
  }
}

/* 応募フォーム */