@charset "UTF-8";
/**
 * SCSS Mixins
 *
 * 利用例:
 * @use 'mixin' as m;
 *
 * .example {
 *   font-size: 14px;
 *   @include m.mq('pc') {
 *     font-size: 18px;
 *   }
 * }
 */
/**
 * フォント
 *
 * 各ファイルで font-family 文字列を直書きせず、これらの mixin を使う。
 * 利用例:
 * .example { @include m.serif; }
 *
 * - serif    … 英字セリフ（EB Garamond）
 * - serif-jp … 和文明朝（Noto Serif JP）
 * - sans-jp  … 和文ゴシック（Noto Sans JP）
 */
/**
 * リクルートページ（page-recruit）
 */
/* =========================================================
   共通セクションタイトル（components/recruit-section-title.php）
   ========================================================= */
@media screen and (min-width: 768px) {
  .p-header__pc-menu-list {
    gap: 30px;
    justify-content: flex-end;
  }
}

.c-recruit-ttl {
  position: relative;
  overflow: hidden;
  /* 背景文字のはみ出しで横スクロールが出ないように */
  padding-top: 34px;
  /* 背景文字(68px)の下半分に見出しを重ねる */
  text-align: center;
  color: #4c4948;
}
@media screen and (min-width: 768px) {
  .c-recruit-ttl {
    padding-top: 127px;
    /* 背景文字(254px)の下半分 */
  }
}

/* 背景の大きい文字 */
.c-recruit-ttl__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: "Amiri", serif;
  font-size: 68px;
  line-height: 1;
  letter-spacing: 0em;
  white-space: nowrap;
  color: #f5f7f5;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media screen and (min-width: 768px) {
  .c-recruit-ttl__bg {
    font-size: 192px;
    top: 64px;
  }
}

/* 背景色付きセクションでは白文字にする */
.c-recruit-ttl--white .c-recruit-ttl__bg {
  color: #fff;
}

/* 英語ラベル */
.c-recruit-ttl__en {
  position: relative;
  z-index: 1;
  display: block;
  font-family: "EB Garamond", serif;
  font-size: 16px;
  letter-spacing: 0.2em;
  line-height: 1;
  color: #4a9a62;
}
@media screen and (min-width: 768px) {
  .c-recruit-ttl__en {
    font-size: 21px;
  }
}

/* 見出し（h2） */
.c-recruit-ttl__ja {
  position: relative;
  z-index: 1;
  margin: 0px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.36em;
  line-height: 1.7142857143;
}
@media screen and (min-width: 768px) {
  .c-recruit-ttl__ja {
    margin-top: 4px;
    font-size: 36px;
    line-height: 1.5555555556;
  }
}

.storker {
  width: 345px;
  position: fixed;
  transform: translateX(-50%);
  left: 50%;
  bottom: 20px;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  .storker {
    width: 92px;
    height: 392px;
    left: inherit;
    transform: translateY(-50%);
    right: -10px;
    top: 50%;
  }
}
.storker a {
  display: block;
  width: 100%;
  height: 100%;
}

.p-mv {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 90px;
}
.p-mv .p-mv__decoration {
  position: absolute;
  display: block;
}
.p-mv .p-mv__decoration:first-of-type {
  width: 86px;
  height: 62px;
  top: -29px;
  left: 44%;
}
@media screen and (min-width: 768px) {
  .p-mv .p-mv__decoration:first-of-type {
    width: 254px;
    height: 184px;
    top: -80px;
  }
}
.p-mv .p-mv__decoration:nth-of-type(2) {
  width: 94px;
  height: 70px;
  right: 0;
  top: 0;
}
@media screen and (min-width: 768px) {
  .p-mv .p-mv__decoration:nth-of-type(2) {
    width: 320px;
    height: 238px;
    top: -20px;
    right: -20px;
  }
}
.p-mv .p-mv__decoration:nth-of-type(3) {
  width: 72px;
  height: 126px;
  left: 0;
  bottom: -68px;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-mv .p-mv__decoration:nth-of-type(3) {
    width: 293px;
    height: 520px;
    bottom: -280px;
  }
}
.p-mv .p-mv__decoration:nth-of-type(4) {
  width: 100px;
  height: 143px;
  right: 0;
  bottom: -84px;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .p-mv .p-mv__decoration:nth-of-type(4) {
    width: 410px;
    height: 590px;
    bottom: -200px;
  }
}
.p-mv .p-mv__message {
  width: 370px;
  height: 276px;
  max-width: 670px;
  position: absolute;
  padding: 58px 25px 70px;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  line-height: 1.5;
  background: url(../../img/recruit/mv_bg.webp) no-repeat center top/cover;
  top: 78px;
  left: 0;
}
@media screen and (min-width: 768px) {
  .p-mv .p-mv__message {
    width: 43.2942708333%;
    height: 66%;
    max-width: 758px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 4%;
    top: 13%;
    box-sizing: border-box;
  }
}
.p-mv .p-mv__message h2 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.4em;
}
@media screen and (min-width: 768px) {
  .p-mv .p-mv__message h2 {
    font-size: 40px;
  }
}
@media screen and (min-width: 1250px) {
  .p-mv .p-mv__message h2 {
    font-size: 48px;
  }
}
.p-mv .p-mv__message p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  .p-mv .p-mv__message p {
    font-size: 18px;
  }
}

/* =========================================================
   ABOUT US（p-recruit-about）FEATURE
   ========================================================= */
.p-recruit-about {
  position: relative;
}
.p-recruit-about .p-recruit__deco img {
  position: absolute;
  display: block;
  z-index: -1;
}
.p-recruit-about .p-recruit__deco img:first-of-type {
  width: 57px;
  height: 57px;
  top: 7%;
  left: 17%;
}
@media screen and (min-width: 768px) {
  .p-recruit-about .p-recruit__deco img:first-of-type {
    width: 234px;
    height: 234px;
    top: 11%;
  }
}
.p-recruit-about .p-recruit__deco img:nth-of-type(2) {
  width: 131px;
  height: 330px;
  top: 32%;
  right: 0;
}
@media screen and (min-width: 768px) {
  .p-recruit-about .p-recruit__deco img:nth-of-type(2) {
    width: 317px;
    height: 794px;
  }
}
.p-recruit-about .p-recruit__deco img:nth-of-type(3) {
  width: 190px;
  height: 305px;
  top: 59%;
  left: 0;
}
@media screen and (min-width: 768px) {
  .p-recruit-about .p-recruit__deco img:nth-of-type(3) {
    width: 498px;
    height: 803px;
  }
}
.p-recruit-about .p-recruit__deco img:nth-of-type(4) {
  width: 122px;
  height: 190px;
  right: -20px;
  bottom: -130px;
}
@media screen and (min-width: 768px) {
  .p-recruit-about .p-recruit__deco img:nth-of-type(4) {
    width: 363px;
    height: 333px;
    bottom: -80px;
  }
}
.p-recruit-about .p-recruit__deco img:nth-of-type(5) {
  width: 170px;
  height: 73px;
  left: 33%;
  bottom: -140px;
}
@media screen and (min-width: 768px) {
  .p-recruit-about .p-recruit__deco img:nth-of-type(5) {
    width: 451px;
    height: 193px;
    bottom: -230px;
  }
}

.p-recruit-about__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 56px;
}
@media screen and (min-width: 768px) {
  .p-recruit-about__list {
    gap: 100px;
    margin-top: 64px;
    width: 100%;
    /* 1600px まではメイン画像を画面端いっぱいに伸ばす（それ以上は固定幅で中央寄せ） */
    max-width: 1600px;
    margin-inline: auto;
  }
}

.p-recruit-feature {
  display: flex;
  flex-direction: column-reverse;
  gap: 30px;
  margin-bottom: 28px;
}
.p-recruit-feature:last-child {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .p-recruit-feature {
    display: flex;
    flex-direction: row-reverse;
    /* 奇数：写真=左 / テキスト=右 */
    align-items: center;
    justify-content: flex-end;
    gap: 80px;
    /* 偶数のコンテンツのみ写真と文字の配置を反転 */
  }
  .p-recruit-feature:nth-child(even) {
    flex-direction: row;
  }
}

/* テキストブロック（SPでは画像より上に表示） */
.p-recruit-feature__body {
  padding: 0 16px;
}
@media screen and (min-width: 768px) {
  .p-recruit-feature__body {
    flex: 1;
    min-width: 0;
    /* 残り半分の中でテキストカラム（コンテンツ幅1050pxの半分相当）を中央に置く */
    max-width: 456px;
    padding: 0;
    margin-bottom: 0;
  }
}

/* 筆記体見出し画像（Features01〜03） */
.p-recruit-feature__script {
  margin: 0 0 32px;
}
.p-recruit-feature__script img {
  display: block;
  width: auto;
  height: 62px;
}
@media screen and (min-width: 768px) {
  .p-recruit-feature__script img {
    height: 85px;
  }
}

/* 見出し */
.p-recruit-feature__ttl {
  margin: 0 0 15px;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-recruit-feature__ttl {
    margin-bottom: 16px;
    font-size: 26px;
    line-height: 1.8461538462;
  }
}

/* 本文 */
.p-recruit-feature__txt {
  margin: 0;
  font-size: 16px;
  line-height: 2.3;
  letter-spacing: 0.1em;
}

/* メイン画像（SP: 右側15pxあけて左端まで / 偶数は反転） */
.p-recruit-feature__img {
  margin: 0 15px 0 0;
}
.p-recruit-feature__img img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768px) {
  .p-recruit-feature__img {
    flex: 0 0 50%;
    margin: 0;
  }
}

.p-recruit-feature:nth-child(even) .p-recruit-feature__img {
  margin: 0 0 0 15px;
}
@media screen and (min-width: 768px) {
  .p-recruit-feature:nth-child(even) .p-recruit-feature__img {
    margin: 0;
  }
}

/* ABOUT US 締めのメッセージ */
.p-recruit-about__message {
  margin: 57px auto 0;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 2.6;
  letter-spacing: 0.08em;
  text-align: center;
  color: #4c4948;
  letter-spacing: 0.3em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
  -webkit-text-decoration-color: #479B60;
  text-decoration-color: #479B60;
}
@media screen and (min-width: 768px) {
  .p-recruit-about__message {
    margin-top: 80px;
    font-size: 36px;
    line-height: 2.1;
    letter-spacing: 0.3em;
  }
}

/* 緑のアクセント文字 */
.p-recruit-about__message-accent {
  color: #479B60;
}

/* 「長く安心」の上に付ける傍点（丸）
   text-emphasis はサイズが dot(小)/circle(大) の2択で中間にできず、
   継承のため入れ子で縮小もできない。よって background の radial-gradient で
   1文字ごとに丸を描画し、サイズを自由に調整する。 
   ※「長く安心」の上の傍点（丸）は4つだけ表示する（5つにならないよう調整）。
*/
.p-recruit-about__message-dots {
  --dot-size: 0.28em;
  --char-advance: 1.3em;
  padding-top: 0.4em;
  background-image: radial-gradient(circle, #479B60 calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2)), radial-gradient(circle, #479B60 calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2)), radial-gradient(circle, #479B60 calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2)), radial-gradient(circle, #479B60 calc(var(--dot-size) / 2), transparent calc(var(--dot-size) / 2));
  background-repeat: no-repeat;
  background-size: var(--dot-size) var(--dot-size);
  background-position: calc(var(--char-advance) * 0 + 0.5em - var(--dot-size) / 2) top, calc(var(--char-advance) * 1 + 0.5em - var(--dot-size) / 2) top, calc(var(--char-advance) * 2 + 0.5em - var(--dot-size) / 2) top, calc(var(--char-advance) * 3 + 0.5em - var(--dot-size) / 2) top;
}
@media screen and (min-width: 768px) {
  .p-recruit-about__message-dots {
    padding-top: 0.4em;
  }
}

/* =========================================================
   スクロールでふわっと表示（.js-fadeIn → .is-active を JS で付与）
   ========================================================= */
.js-fadeIn {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 1s ease, transform 0.8s ease;
  will-change: opacity, transform;
}
.js-fadeIn.is-active {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-fadeIn {
    transition: none;
  }
}
/* =========================================================
   CAREER PATH（p-recruit-career）
   ========================================================= */
.p-recruit-career {
  padding-bottom: 60px;
  padding-top: 213px;
  background: url("../../img/recruit/bg_career_sp.webp") no-repeat top/cover;
  background-position: top;
  position: relative;
}
@media screen and (min-width: 768px) {
  .p-recruit-career {
    margin-top: 20px;
    padding-bottom: 90px;
    padding-top: 200px;
    background: url("../../img/recruit/bg_career.webp") no-repeat center top/cover;
  }
}
.p-recruit-career .p-career-path__deco img {
  position: absolute;
  display: block;
  z-index: 1;
}
.p-recruit-career .p-career-path__deco img:first-of-type {
  width: 140px;
  height: 156px;
  top: 26%;
  right: 0;
}
@media screen and (min-width: 768px) {
  .p-recruit-career .p-career-path__deco img:first-of-type {
    width: 597px;
    height: 690px;
    top: 56%;
  }
}
.p-recruit-career .p-career-path__deco img:nth-of-type(2) {
  width: 105px;
  height: 164px;
  left: 0;
  bottom: -71px;
}
@media screen and (min-width: 768px) {
  .p-recruit-career .p-career-path__deco img:nth-of-type(2) {
    width: 484px;
    height: 775px;
    bottom: -294px;
  }
}

.p-recruit-career__inner {
  position: relative;
  z-index: 2;
  margin-top: 44px;
}
@media screen and (min-width: 768px) {
  .p-recruit-career__inner {
    margin-top: 56px;
  }
}

/* ---------- ステップ（1年目→2年目→2年目） ---------- */
.p-career-steps {
  display: flex;
  flex-direction: column;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-career-steps {
    flex-direction: row;
    align-items: stretch;
  }
}

.p-career-step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 37px 32px;
  background-color: #fff;
  border-radius: 15px;
  /* カード間の矢印（SP: 下向き / PC: 右向き） */
}
@media screen and (min-width: 768px) {
  .p-career-step {
    flex: 1 1 0;
    min-width: 0;
    padding: 36px 20px;
  }
}
.p-career-step + .p-career-step::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #c5ccc5 transparent transparent transparent;
}
@media screen and (min-width: 768px) {
  .p-career-step + .p-career-step::before {
    top: 50%;
    left: -28px;
    transform: translateY(-50%);
    border-width: 20px 0 20px 16px;
    border-color: transparent transparent transparent #c5ccc5;
  }
}

.p-career-step__year {
  margin: 0 0 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid #4a9a62;
  font-size: 25px;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-align: center;
  color: #4a9a62;
}

.p-career-step__label {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
  .p-career-step__label {
    padding: 0 14px;
  }
}

.p-career-step__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 20px;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2.1;
}
@media screen and (min-width: 768px) {
  .p-career-step__list {
    padding: 0 14px;
  }
}
.p-career-step__list li::before {
  content: "・";
}

/* デビューバッジ（カードの下部に配置） */
.p-career-step__badge {
  margin: 10px auto 0;
  padding: 10px 22px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #fff;
  border-radius: 12px;
}
@media screen and (min-width: 768px) {
  .p-career-step__badge {
    margin-top: auto;
    /* カード下端に揃える */
  }
}
.p-career-step__badge--colorist {
  background-color: #bd9a63;
}
.p-career-step__badge--stylist {
  background-color: #4a9a62;
}

/* ---------- ポイント（Point01〜03） ---------- */
.p-career-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px 56px;
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-career-points {
    margin-top: 100px;
    gap: 20px 56px;
  }
}

.p-career-point {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-career-point {
    width: min(100%, 445px);
  }
}

.p-career-point__card {
  position: relative;
  padding: 56px 24px 32px;
  background-color: #fff;
  border-radius: 15px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-career-point__card {
    padding: 80px 24px 32px;
  }
}

/* 丸アイコン（カード上端に半分重ねる） */
.p-career-point__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #4a9a62;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .p-career-point__icon {
    width: 117px;
    height: 117px;
  }
}
.p-career-point__icon img {
  height: 35px;
  width: auto;
}
@media screen and (min-width: 768px) {
  .p-career-point__icon img {
    height: 50px;
  }
}

.p-career-point__ttl {
  margin: 0 0 13px;
  padding-bottom: 8px;
  border-bottom: 1px solid #4a9a62;
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.8;
  color: #4c4948;
}
@media screen and (min-width: 768px) {
  .p-career-point__ttl {
    font-size: 26px;
    margin: 0 0 14px;
    padding-bottom: 14px;
  }
}

.p-career-point__accent {
  color: #4a9a62;
}

.p-career-point__txt {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 2;
}

/* 筆記体 Point01〜03（画像） */
.p-career-point__script {
  margin: -15px 0 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.p-career-point__script img {
  display: inline-block;
  width: auto;
  height: 50px;
}
@media screen and (min-width: 768px) {
  .p-career-point__script img {
    height: 52px;
  }
}

/* =========================================================
   STAFF VOICE（p-recruit-voice）
   ========================================================= */
.p-recruit-voice {
  position: relative;
  background: #F5F7F5;
  background: linear-gradient(180deg, rgb(245, 247, 245) 0%, rgba(218, 184, 250, 0.5) 240%);
  padding-bottom: 100px;
  padding-top: 20px;
}
@media screen and (min-width: 768px) {
  .p-recruit-voice {
    padding-bottom: 300px;
    background: linear-gradient(180deg, rgb(245, 247, 245) 0%, rgba(218, 184, 250, 0.8) 240%);
  }
}
@media screen and (min-width: 768px) {
  .p-recruit-voice .c-recruit-ttl__bg {
    top: 0;
  }
}
.p-recruit-voice .voice_deco img {
  position: absolute;
  display: block;
  z-index: 0;
  width: 208px;
  height: 153px;
  right: 0;
  bottom: -71px;
}
@media screen and (min-width: 768px) {
  .p-recruit-voice .voice_deco img {
    width: 698px;
    height: 310px;
  }
}

.splide__arrow {
  top: 27%;
}
@media screen and (min-width: 768px) {
  .splide__arrow {
    top: 57%;
  }
}

/* リード文 */
.p-recruit-voice__lead {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-recruit-voice__lead {
    margin-top: 20px;
    font-size: 18px;
  }
}

/* スライダーのラッパー */
.p-recruit-voice__slider-wrap {
  margin-top: 60px;
}
@media screen and (min-width: 768px) {
  .p-recruit-voice__slider-wrap {
    margin-top: 56px;
  }
}

/* ---------- スライド（写真＋メッセージ） ---------- */
/* 中央＋前後1枚だけ表示し、それ以外は非表示にする */
.p-voice-slide {
  opacity: 0;
  transition: opacity 0.4s ease;
  /* 前後の1枚（写真のみ薄く見せる） */
  /* PC: 写真とメッセージを横並び */
}
.p-voice-slide.is-active {
  opacity: 1;
  z-index: 1;
}
.p-voice-slide.is-prev, .p-voice-slide.is-next {
  opacity: 0.3;
}
@media screen and (min-width: 768px) {
  .p-voice-slide {
    display: flex;
    align-items: center;
    gap: 36px;
  }
}

/* 写真 */
.p-voice-slide__img {
  margin: 0;
  width: 100%;
  transition: transform 0.4s ease;
  transform: scale(0.94);
}
@media screen and (min-width: 768px) {
  .p-voice-slide__img {
    flex: 0 0 38%;
    width: auto;
    transform: scale(0.8);
  }
}
.p-voice-slide__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 15px;
}

/* 中央の写真は少し大きく */
.p-voice-slide.is-active .p-voice-slide__img {
  transform: scale(1);
}

/* PC: 前のスライドは「写真が左・テキスト（非表示）が右」の並びのため、
   そのままだと写真が画面外に出てしまう。
   写真をスライドの右端（＝画面左端側）へ寄せて見えるようにする。
   移動量 = テキスト分の幅(スライドの60%) ÷ 写真幅(40%) = 150% */
@media screen and (min-width: 768px) {
  .p-voice-slide.is-prev .p-voice-slide__img {
    transform: translateX(164%) scale(0.8);
  }
}
/* メッセージ（is-active のスライドだけ表示） */
.p-voice-slide__body {
  opacity: 0;
  margin-top: 20px;
  /* SP: スライド幅より広く（画面幅-60px）してテキストの折り返しを減らす。
     写真の下に出るので前後の写真とは重ならない */
  width: calc(100vw - 60px);
  margin-inline: calc((100% - (100vw - 60px)) / 2);
}
@media screen and (min-width: 768px) {
  .p-voice-slide__body {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    width: auto;
    margin-inline: 0;
  }
}

.p-voice-slide.is-active .p-voice-slide__body {
  opacity: 1;
}

.p-voice-slide__label {
  display: block;
  margin-bottom: 12px;
  font-family: "EB Garamond", serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: #4a9a62;
}

.p-voice-slide__txt {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-voice-slide__txt {
    font-size: 26px;
    line-height: 1.9;
  }
}

.p-voice-slide__name {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid #b5b5b5;
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) {
  .p-voice-slide__name {
    font-size: 22px;
  }
}

/* ---------- 矢印 ---------- */
.js-voice-slider .splide__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  opacity: 1;
  z-index: 2;
  background: url("../../img/common/arrow-recruit.svg") no-repeat center top/cover;
}
@media screen and (min-width: 768px) {
  .js-voice-slider .splide__arrow {
    width: 80px;
    height: 80px;
  }
}
@media (any-hover: hover) {
  .js-voice-slider .splide__arrow:hover {
    background-color: #4a9a62;
    color: #fff;
  }
}

.js-voice-slider .splide__arrow--prev {
  left: 15px;
  transform: scaleX(-1) translateY(-17px);
}
@media screen and (min-width: 768px) {
  .js-voice-slider .splide__arrow--prev {
    /* 中央スライド左端（50% - 26%）のあたり */
    left: calc(22% - 76px);
    transform: scaleX(-1) translateY(-40px);
  }
}

.js-voice-slider .splide__arrow--next {
  right: 15px;
}
@media screen and (min-width: 768px) {
  .js-voice-slider .splide__arrow--next {
    right: calc(22% - 76px);
  }
}

/* =========================================================
   募集要項（p-recruit-guide）
   ========================================================= */
.p-recruit-guide {
  padding: 0 16px 120px;
  background-color: #EEF7EE;
  position: relative;
  margin-top: -2px;
}
.p-recruit-guide::before {
  content: "";
  display: block;
  width: 100%;
  height: 217px;
  position: absolute;
  left: 0;
  bottom: 0px;
  z-index: 0;
  background: url("../../img/recruit/guide_deco.webp") no-repeat center top/cover;
}
@media screen and (min-width: 768px) {
  .p-recruit-guide::before {
    height: 814px;
    width: 104%;
    bottom: 117px;
  }
}
@media screen and (min-width: 768px) {
  .p-recruit-guide {
    padding-bottom: 340px;
  }
}

.p-recruit-guide__lead {
  margin: 16px 0 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-recruit-guide__lead {
    margin-top: 20px;
    font-size: 18px;
  }
}

/* 白カード */
.p-recruit-guide__inner {
  margin-top: 32px;
  padding: 32px 24px;
  background-color: #fff;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .p-recruit-guide__inner {
    margin-top: 48px;
    padding: 56px 64px;
  }
}

.p-recruit-guide__list {
  margin: 0;
}

/* 行（SP: 縦並び / PC: 見出し＋内容の横並び） */
.p-recruit-guide__row {
  padding: 0 0 24px;
}
.p-recruit-guide__row:first-child {
  padding-top: 0;
}
.p-recruit-guide__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
@media screen and (min-width: 768px) {
  .p-recruit-guide__row {
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 20px 0;
  }
}

.p-recruit-guide__label {
  margin: 0 0 10px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: #4a9a62;
  border-bottom: 1px solid #e0e0e0;
}
@media screen and (min-width: 768px) {
  .p-recruit-guide__label {
    flex: 0 0 140px;
    margin: 0;
    font-size: 16px;
    border-bottom: none;
  }
}

.p-recruit-guide__value {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.04em;
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  .p-recruit-guide__value {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    line-height: 2;
  }
}

/* =========================================================
   ENTRY（p-recruit-entry）
   ========================================================= */
.p-recruit-entry {
  padding-top: 60px;
  padding-bottom: 60px;
  background: url("../../img/recruit/bg_entry_sp.webp") no-repeat;
  background-size: 100% 300px;
  background-position: top;
  position: relative;
  z-index: 3;
  margin-top: -28px;
}
@media screen and (min-width: 768px) {
  .p-recruit-entry {
    padding-bottom: 100px;
    padding-top: 170px;
    background: url("../../img/recruit/bg_entry.webp") no-repeat top/cover;
    background-position: top;
    margin-top: -308px;
  }
}
.p-recruit-entry .c-recruit-ttl__ja {
  letter-spacing: 0.2em;
}

.p-recruit-entry__inner {
  margin-top: 16px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-recruit-entry__inner {
    margin-top: 20px;
    max-width: 850px;
  }
}

.p-recruit-entry__lead {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .p-recruit-entry__lead {
    font-size: 18px;
  }
}

.p-recruit-entry__txt {
  margin: 24px 0 0;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-recruit-entry__txt {
    margin-top: 32px;
    font-size: 14px;
  }
}

/* 限定特典ボックス */
.p-recruit-entry__benefit {
  position: relative;
  margin-top: 32px;
  padding: 40px 20px 28px;
  background-color: #F5F7F5;
  border-radius: 8px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-recruit-entry__benefit {
    margin-top: 48px;
    padding: 48px 40px 36px;
  }
}

.p-recruit-entry__benefit-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  padding: 8px 24px;
  background-color: #4a9a62;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
}

.p-recruit-entry__benefit-ttl {
  margin: 0 0 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.p-recruit-entry__benefit-sub {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

/* CTA */
.p-recruit-entry__cta {
  margin-top: 32px;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-recruit-entry__cta {
    margin-top: 48px;
  }
}

.p-recruit-entry__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  height: 72px;
  border-radius: 36px;
  background-color: #ed6885;
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 500;
  position: relative;
  letter-spacing: 0.08em;
  color: #fff !important;
  text-decoration: none;
  transition: filter 0.3s;
  margin: 0 auto;
}
@media (any-hover: hover) {
  .p-recruit-entry__btn:hover {
    filter: brightness(0.97);
    color: #fff;
  }
}

.p-recruit-entry__btn-arrow {
  width: 20px;
  height: 7px;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: url("../../img/recruit/arrow.svg") no-repeat center top/cover;
}
@media screen and (min-width: 768px) {
  .p-recruit-entry__btn-arrow {
    right: 24px;
  }
}

.p-recruit-entry__tel {
  margin: 24px 0 0;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.p-recruit-entry__tel a {
  color: #4c4948;
  text-decoration: none;
}

/* =========================================================
   COMPANY（p-recruit-company）
   ※ page-company の .p-company-message__main を参考に、
     見出しは右テキスト内に配置。SP はシンプルな縦並び。
   ========================================================= */
.p-recruit-company {
  margin-top: 70px;
  padding: 80px 0 80px;
  background: url("../../img/recruit/bg_company_sp.webp") no-repeat center top/cover;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-recruit-company {
    padding-top: 200px;
    background: url("../../img/recruit/bg_company.webp") no-repeat center top/cover;
  }
}

.p-recruit-company__inner {
  margin-top: 70px;
}
@media screen and (min-width: 768px) {
  .p-recruit-company__inner {
    margin-top: 64px;
  }
}

/* 画像（左）＋テキスト（右）。SP は縦並び */
@media screen and (min-width: 768px) {
  .p-recruit-company__main {
    display: grid;
    grid-template-columns: 272px 1fr;
    gap: 48px;
    align-items: center;
  }
}

.p-recruit-company__image {
  max-width: 153px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .p-recruit-company__image {
    max-width: 272px;
    margin: 0;
  }
}
.p-recruit-company__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  -o-object-fit: cover;
  object-fit: cover;
}
.p-recruit-company__image::before {
  content: "";
  display: block;
  width: 224px;
  height: 79px;
  background: url("../../img/recruit/text_message.webp") no-repeat center top/cover;
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .p-recruit-company__image::before {
    left: 42%;
  }
}

.p-recruit-company__text {
  position: relative;
}
.p-recruit-company__text::before {
  content: "";
  display: block;
  width: 142px;
  height: 131px;
  background: url("../../img/recruit/message_deco.webp") no-repeat center top/cover;
  position: absolute;
  right: -13px;
  top: -57px;
  z-index: 0;
}

/* 見出し（右テキスト内・下線付き） */
.p-recruit-company__lead {
  margin: 0 0 20px;
  padding-bottom: 16px;
  font-family: "Noto Serif JP", serif;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.7;
  color: #4c4948;
  border-bottom: 1px solid #999999;
}
@media screen and (min-width: 768px) {
  .p-recruit-company__lead {
    font-size: 26px;
    margin-bottom: 24px;
    padding-bottom: 20px;
  }
}

.p-recruit-company__txt {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.03em;
  line-height: 2.1;
}

.p-recruit-company__sign {
  margin: 28px 0 0;
  font-size: 16px;
  letter-spacing: 0.08em;
  color: #4c4948;
  text-align: right;
}
@media screen and (min-width: 768px) {
  .p-recruit-company__sign {
    margin-top: 40px;
    text-align: right;
  }
}
.p-recruit-company__sign span {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
}
@media screen and (min-width: 768px) {
  .p-recruit-company__sign span {
    margin-left: 2rem;
  }
}

/* ---------- SDGsへの取り組み ---------- */
.p-recruit-sdgs {
  margin-top: 56px;
}
@media screen and (min-width: 768px) {
  .p-recruit-sdgs {
    margin-top: 80px;
  }
}

/* 見出し（中央・下線付き） */
.p-recruit-sdgs__ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 32px;
  padding-bottom: 14px;
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-align: center;
  color: #4c4948;
  border-bottom: 1px solid #999999;
}
@media screen and (min-width: 768px) {
  .p-recruit-sdgs__ttl {
    margin-bottom: 48px;
  }
}

/* 4項目（SP: 2×2 / PC: 横4列） */
.p-recruit-sdgs__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-recruit-sdgs__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 30px;
  }
}

.p-recruit-sdgs__item {
  text-align: center;
}

/* アイコン画像（緑丸込み） SP:80px / PC:154px */
.p-recruit-sdgs__icon {
  margin: 0 auto 16px;
}
@media screen and (min-width: 768px) {
  .p-recruit-sdgs__icon {
    margin: 0 auto 24px;
  }
}
.p-recruit-sdgs__icon img {
  display: block;
  width: 80px;
  height: auto;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-recruit-sdgs__icon img {
    width: 154px;
  }
}

/* 項目タイトル SP:18px / PC:20px serif（下線付き） */
.p-recruit-sdgs__item-ttl {
  margin: 0 0 16px;
  padding-bottom: 8px;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: #4c4948;
  border-bottom: 1px solid #4a9a62;
}
@media screen and (min-width: 768px) {
  .p-recruit-sdgs__item-ttl {
    font-size: 20px;
    margin: 0 0 24px;
    padding-bottom: 20px;
  }
}

/* 項目本文 14px sans */
.p-recruit-sdgs__item-txt {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.9;
  text-align: left;
  color: #4c4948;
}
@media screen and (min-width: 768px) {
  .p-recruit-sdgs__item-txt {
    letter-spacing: 0.15em;
  }
}

.style-images {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
  .style-images {
    margin-bottom: 120px;
  }
}

.new-colum-container {
  background: none;
  padding: 100px 0 0;
  background: url("../../img/recruit/bg_news_sp.webp") no-repeat;
  background-position: top;
  background-size: 100% 220px;
  margin-top: -28px;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 768px) {
  .new-colum-container {
    padding: 180px 0 0;
    background: url("../../img/recruit/bg_news.webp") no-repeat center top/cover;
    margin-top: -150px;
  }
}
.new-colum-container::before {
  content: "";
  display: block;
  width: 100%;
  height: 96px;
  position: absolute;
  bottom: -154px;
  z-index: 0;
  left: 0;
  background: url("../../img/recruit/bg_news_deco.webp") no-repeat center top/cover;
}
@media screen and (min-width: 768px) {
  .new-colum-container::before {
    width: 105%;
    height: 350px;
    bottom: -380px;
  }
}
/*# sourceMappingURL=recruit.css.map */