/* common */
.recruit_yoko h2,
.recruit_howto h2,
.recruit_instagram h2 {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: normal;
  margin-bottom: 30px;
  text-align: center;
  letter-spacing: 0.1rem;
}

.recruit_yoko h3 {
  position: relative;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  font-weight: bold;
  border: 1px solid #CACACA;
  line-height: 4.5rem;
  box-sizing: border-box;
  padding: 0 1.5rem;
  border-radius: 0.5rem;
}

.btn-toggle {
  cursor: pointer;
  background-image: url(/_img/btn_close.png);
  background-repeat: no-repeat;
  background-size: 21px;
  background-position: 95%;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
}

.btn-toggle.close {
  background-image: url(/_img/btn_open.png);
}

.yoko_block dt {
  width: 25%;
  display: block;
  color: #CCAC00;
}

.yoko_block dd {
  width: 75%;
  text-indent: -1em;
  padding-left: 2em;
}

.yoko_block dl div {
  border-bottom: 1px solid #CCAC00;
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem 0;
}
.yoko_block dl div:last-child {
  margin-bottom: 4rem;
}

.yoko_block dl div ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoko_block dl div ul li {
  margin-top: 1rem;
}

.yoko_block dl div ul li:first-child {
  margin-top: 0;
}

.recruit_howto span.red {
  color: #C81815;
}
.recruit_contact ul{
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.recruit_instagram_txt a{
  color: #C81815;
}

/* Small only */
@media screen and (max-width: 39.9375em) {
  #page-catch {
    background-image: url("../_img/catch_common_bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    background-color: #ffffff;
    padding-bottom: 1.5rem;
  }

  #page-catch .page-title {
    font-size: 43px;
    font-family: 'Playfair Display', serif;
    color: #CCAC00;
    line-height: 1;
    margin: 0 0 1.5rem;
    letter-spacing: .5rem;
    padding-top: 60px;
    font-weight: bold;
  }

  #page-catch .lead {
    font-size: 0.9rem;
    padding: 0 15px;
    text-align: left;
    margin: 0;
  }

  .recruit_yoko {
    width: calc(290/320*100vw);
    margin: 0 auto 4rem;
    padding-top: 4rem;
  }

  .recruit_howto {
    width: calc(290/320*100vw);
    margin: 0 auto 4rem;
    text-align: justify;
  }
  .recruit_instagram {
    width: calc(290/320*100vw);
    margin: 0 auto 4rem;
    text-align: justify;
  }

  .recruit_yoko h2,
  .recruit_howto h2,
  .recruit_instagram h2 {
    font-size: 1.25rem;
  }

  .recruit_yoko h2:after,
.recruit_howto h2:after,
.recruit_instagram h2:after {
  content: "";
  display: block;
  background-color: #CCAC00;
  width: calc(40/320*100vw);
  height: 4px;
  margin: 10px auto 0;
}

  .recruit_yoko h3 {
    font-size: 4vw;
  }

  .recruit_wrapper::before {
    content: "";
    width: 100%;
    height: calc(136/320*100vw);
    display: block;
    background-image: url("../_img/recruit/img_recruit_ph_sp.png");
    background-size: 100%;
  }

  .yoko_block {
    display: none;
  }
  .recruit_contact li{
    width: 100%;
    text-align: center;
  }
  .recruit_howto_txt,
  .recruit_instagram_txt{
    font-size: 0.9rem;
    text-align: center;
  }
  .recruit_contact .tel-link,
  .recruit_contact .mail_btn{
    padding: 1.6rem 0.6rem 1.6rem;
    margin-top: 0;
    transition: .3s;
    display: block;
    border: 1px solid #DCDCDC;
    border-radius: 0.5rem;
    position: relative;
    background-color: #ffffff;
  }
  .recruit_contact .tel-link::after,
  .recruit_contact .mail_btn::after{
    font-family: 'Font Awesome 5 Free';
    font-size: 1.2rem;
    line-height: 1.2rem;
    height: 1.2rem;
    margin: auto 16px auto 0;
    padding-left: 1rem;
    font-weight: bold;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    color: #CCAC00;
  }
  .recruit_contact .tel_btn p{
    font-size: 0.875rem;
    font-weight: normal;
    margin-top: 0.5rem;
  }
  .recruit_contact .tel-link::after{
    content: '\f095';
  }
  .recruit_contact .mail_btn::after{
    content: '\f0e0';
  }
  .recruit_contact .mail_btn{
    font-size: 4vw;
    font-weight: bold;
  }
}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  #page-catch {
    background-image: url("../_img/catch_common_bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    background-color: #ffffff;
    padding-bottom: 1.5rem;
  }

  #page-catch .page-title {
    font-size: 43px;
    font-family: 'Playfair Display', serif;
    color: #CCAC00;
    line-height: 1;
    margin: 0 0 1.5rem;
    letter-spacing: .5rem;
    padding-top: 60px;
    font-weight: bold;
  }

  #page-catch .lead {
    font-size: 0.9rem;
    padding: 0 15px;
    text-align: center;
    margin: 0;
  }

  .recruit_yoko {
    width: calc(290/420*100vw);
    margin: 0 auto 4rem;
    padding-top: 4rem;
  }

  .recruit_howto {
    width: calc(290/420*100vw);
    margin: 0 auto 4rem;
    text-align: justify;
  }
  .recruit_instagram {
    width: calc(290/420*100vw);
    margin: 0 auto 4rem;
    text-align: justify;
  }

  .recruit_yoko h2,
  .recruit_howto h2,
  .recruit_instagram h2 {
    font-size: 2.5vw;
  }

  .recruit_yoko h2:after,
.recruit_howto h2:after,
.recruit_instagram h2:after {
  content: "";
  display: block;
  background-color: #CCAC00;
  width: calc(40/320*100vw);
  height: 4px;
  margin: 10px auto 0;
}

  .recruit_yoko h3 {
    font-size: 2vw;
    text-align: center;
  }

  .recruit_wrapper::before {
    content: "";
    width: 100%;
    height: calc(136/320*100vw);
    display: block;
    background-image: url("../_img/recruit/img_recruit_ph_sp.png");
    background-size: 100%;
  }

  .yoko_block {
    display: none;
  }
  .recruit_contact li{
    width: 100%;
    text-align: center;
  }
  .recruit_howto_txt{
    font-size: 0.9rem;
    text-align: center;
  }
  .recruit_contact .tel-link,
  .recruit_contact .mail_btn{
    padding: 1.6rem 0.6rem 1.6rem;
    margin-top: 0;
    transition: .3s;
    display: block;
    border: 1px solid #DCDCDC;
    border-radius: 0.5rem;
    position: relative;
    background-color: #ffffff;
  }
  .recruit_contact .tel-link::after,
  .recruit_contact .mail_btn::after{
    font-family: 'Font Awesome 5 Free';
    font-size: 1.2rem;
    line-height: 1.2rem;
    height: 1.2rem;
    margin: auto 16px auto 0;
    padding-left: 1rem;
    font-weight: bold;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    color: #CCAC00;
  }
  .recruit_contact .tel_btn p{
    font-size: 0.875rem;
    font-weight: normal;
    margin-top: 0.5rem;
  }
  .recruit_contact .tel-link::after{
    content: '\f095';
  }
  .recruit_contact .mail_btn::after{
    content: '\f0e0';
  }
  .recruit_contact .mail_btn{
    font-size: 2vw;
    font-weight: bold;
  }
  .recruit_contact .tel-link:hover,
  .recruit_contact .mail_btn:hover {
  color: inherit;
  text-decoration: none;
  background: #CCAC00;
}

}

/* Large and up */
@media screen and (min-width: 64em) {
  #page-catch {
    background-image: url("../_img/catch_common_bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    background-color: #ffffff;
    padding-bottom: 1.5rem;
    height: 200px;
  }

  #page-catch .page-title {
    font-size: 43px;
    font-family: 'Playfair Display', serif;
    color: #CCAC00;
    line-height: 1;
    margin: 0 0 1.5rem;
    letter-spacing: .5rem;
    padding-top: 60px;
    font-weight: bold;
  }

  #page-catch .lead {
    font-size: 0.9rem;
    padding: 0 15px;
    margin: 0;
  }

  .recruit_yoko {
    width: 830px;
    margin: -40px auto 2rem;
    padding: 0 4rem 4rem;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
  }

  .recruit_howto {
    width: 830px;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0 auto 2rem;
    padding: 0 4rem 4rem;
    text-align: justify;
  }
  .recruit_instagram {
    width: 830px;
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0 auto 4rem;
    padding: 0 4rem 4rem;
    text-align: justify;
  }

  .recruit_yoko h2,
  .recruit_howto h2,
  .recruit_instagram h2 {
    font-size: 27px;
    padding: 4rem 0 0;
  }

  .recruit_yoko h2:after,
.recruit_howto h2:after,
.recruit_instagram h2:after {
  content: "";
  display: block;
  background-color: #CCAC00;
  width: 35px;
  height: 4px;
  margin: 15px auto 0;
}

  .recruit_yoko h3 {
    font-size: 17px;
    text-align: center;
    width: 560px;
    margin: 20px auto;
  }

  .recruit_wrapper::before {
    content: "";
    width: 100%;
    height: 259px;
    display: block;
    background-image: url("../_img/recruit/img_recruit_ph_pc.png");
    background-repeat: repeat-x;
  }

  .yoko_block {
    display: none;
    width: 560px;
    margin: 0 auto;
  }
  .recruit_contact ul{
    width: 560px;
    margin: 0 auto;
  }
  .recruit_contact li{
    width: 50%;
    text-align: center;
  }
  .recruit_howto_txt,
  .recruit_instagram_txt{
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 2rem;
  }
  .recruit_contact .mail_btn{
    padding: 1rem 0.6rem 1rem;
    margin: 0 auto;
    transition: .3s;
    display: block;
    border: 1px solid #CCAC00;
    border-radius: 0.5rem;
    position: relative;
    background-color: #ffffff;
  }
  .recruit_contact .tel-link::after{
    content: "";
  }
  .recruit_contact .mail_btn::after{
    font-family: 'Font Awesome 5 Free';
    font-size: 1.2rem;
    line-height: 1.2rem;
    height: 1.2rem;
    margin: auto 16px auto 0;
    padding-left: 1rem;
    font-weight: bold;
    top: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    color: #CCAC00;
  }
  .recruit_contact .tel_btn{
    padding-top: 5px;
  }
  .recruit_contact .tel_btn p{
    font-size: 0.875rem;
    font-weight: normal;
    margin: 0.5rem 0 0;
  }
  .recruit_contact .mail_btn::after{
    content: '\f0e0';
  }
  .recruit_contact .mail_btn{
    font-size: 16px;
    font-weight: bold;
  }
  .recruit_contact .mail{
    padding-left: 20px;
    border-left: 1px solid #DCDCDC;
  }
  .recruit_contact .mail_btn:hover {
  color: inherit;
  text-decoration: none;
  background: #CCAC00;
}
}