@charset "UTF-8";
/* ==========================================================================
   LULA 採用ページ共通（recruit / interview）
   - すべて .rc 配下にスコープし、既存テーマとの干渉を抑えています
   - クラス名は rc- 接頭辞（BEM）
   - ブレークポイント：SP ≤ 800px、Tablet 801〜1100px
   - 読み込み順：common.css → 各ページの CSS
   ========================================================================== */

/* ---------- Tokens ---------- */
.rc {
  /* color */
  --rc-color-text: #444444;
  --rc-color-key: #C9A94A;
  --rc-color-pink: #E8B8B5;
  --rc-color-yellow: #EBDE15;
  --rc-color-sub: #9A948C;       /* 見出しの日本語サブ */
  --rc-color-bg-base: #FAF8F5;   /* セクション背景・カード背景（オフホワイト） */
  --rc-color-yellow-70: rgba(235, 222, 21, .7);   /* 数字下のマーカー */
  --rc-color-pink-30: rgba(232, 184, 181, .3);    /* アイコンの丸背景 */
  --rc-color-border: #EEE6DA;
  --rc-color-border-base: #EFE9DF; /* オフホワイト背景のカード枠 */
  --rc-color-bg-muted: #F8F7F4;    /* Staff Voice 背景 */
  --rc-color-card: #FCFAF5;        /* Staff Voice カード */
  --rc-color-border-card: #EFE8DC;
  --rc-color-rule: #E6DDCD;
  --rc-color-text-sub: #7D786F;    /* 所属などの補足テキスト */

  /* font */
  --rc-font-ja: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
  --rc-font-en: "Open Sans", var(--rc-font-ja);

  /* layout */
  --rc-content-width: 1160px;
  --rc-gutter: 40px;

  /* motion */
  --rc-ease: cubic-bezier(.22, .61, .36, 1);

  color: var(--rc-color-text);
  font-family: var(--rc-font-ja);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

@media (max-width: 800px) {
  .rc {
    --rc-gutter: 16px;
  }
}

/* ---------- Scoped reset ---------- */
.rc *,
.rc *::before,
.rc *::after {
  box-sizing: border-box;
}

/* :where() で詳細度を上げず、各コンポーネントの指定が優先されるようにする */
.rc :where(h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure) {
  margin: 0;
  padding: 0;
}

.rc img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------- Utilities ---------- */
.rc-u-pc {
  display: inline;
}

@media (max-width: 800px) {
  .rc-u-pc {
    display: none;
  }
}

/* PC幅（1101px〜）のときだけ改行 */
@media (max-width: 1100px) {
  .rc-u-lg {
    display: none;
  }
}

/* 文節のまとまりで改行させたい箇所に使用 */
.rc-u-ib {
  display: inline-block;
}

.rc-u-sp {
  display: none;
}

@media (max-width: 800px) {
  .rc-u-sp {
    display: inline;
  }
}

/* ==========================================================================
   Component: section heading（英字＋日本語サブ）
   ========================================================================== */
.rc-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: inherit;
}

.rc-heading__en {
  display: inline-block;
  /* 帯は文字の左右に 8px（全セクション共通） */
  padding: 0 8px 8px;
  font-family: var(--rc-font-en);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .1em;
  background: url(../img/line.webp) repeat-x left bottom / 25px 29px;
}

/* 左揃えのときは帯を左にはみ出させ、文字の位置を本文とそろえる */
.rc-heading:not(.rc-heading--center) .rc-heading__en {
  margin-left: -8px;
}

.rc-heading__ja {
  display: block;
  margin-top: 20px;
  color: var(--rc-color-sub);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .32em;
}

.rc-heading--center {
  align-items: center;
  text-align: center;
}

@media (max-width: 800px) {
  .rc-heading__en {
    font-size: clamp(24px, 8.15vw, 32px); /* 長い英字（More Interviews 等）も 320px 幅で収める */
  }

  .rc-heading--center-sp .rc-heading__en {
    margin-left: 0;
  }

  .rc-heading__ja {
    margin-top: 16px;
    font-size: clamp(12px, 3.82vw, 15px);
  }

  .rc-heading--center-sp {
    align-items: center;
    text-align: center;
  }
}

/* ==========================================================================
   Component: SP スライダー（横スワイプ・ループは lula.js の data-rc-slider）
   使い方：リストに class="rc-slider" と data-rc-slider を付け、
           --rc-slide-w（カード幅）/ --rc-slide-gap（間隔）で調整
   ========================================================================== */
@media (max-width: 800px) {
  .rc .rc-slider {
    --rc-slide-w: 280px;
    --rc-slide-gap: 32px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--rc-slide-gap);
    /* 画面端まで広げ、カードを中央に。上下の余白は影が切れないための確保分 */
    margin: -8px calc(var(--rc-gutter) * -1) -32px;
    padding: 8px calc((100% + var(--rc-gutter) * 2 - var(--rc-slide-w)) / 2) 32px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .rc .rc-slider::-webkit-scrollbar {
    display: none;
  }

  .rc .rc-slider > * {
    flex: 0 0 var(--rc-slide-w);
    scroll-snap-align: center;
  }

  /* スライダー内では個別のフェードを行わない */
  .rc.is-anim-ready .rc-slider > [data-rc-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Section: Join Us
   ========================================================================== */
.rc-join {
  position: relative;
  overflow: hidden;
  padding: 80px var(--rc-gutter);
  background: #FDF6C8;
}

/* 背景の大きな「LULA」（装飾 SVG・右上に固定） */
.rc .rc-join__watermark {
  position: absolute;
  top: 0;
  right: 0;
  width: 557px;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.rc-join__card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  max-width: 960px;
  margin: 0 auto;
  padding: 56px;
  background: #FFFEF9;
  box-shadow: 0 30px 70px -44px rgba(120, 100, 40, .42);
}

.rc-join__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.rc-join__title {
  font-family: var(--rc-font-en);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .04em;
}

.rc-join__badge {
  padding: 0 16px;
  background: #FDF6C8;
  color: var(--rc-color-key);
  font-family: var(--rc-font-en);
  font-size: 12px;
  line-height: 28px;
  letter-spacing: .2em;
}

.rc-join__catch {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
}

.rc-join__catch span {
  padding: 0 2px 4px;
  margin-left: -2px;
  background: linear-gradient(var(--rc-color-yellow-70), var(--rc-color-yellow-70)) left bottom / 100% 10px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.rc-join__text {
  margin-top: 24px;
  color: var(--rc-color-sub);
  line-height: 2;
  word-break: auto-phrase; /* 対応ブラウザでは文節の切れ目で折り返す */
}

/* エントリーボタン */
.rc-join__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 16px;
  height: 72px;
  padding: 0 48px;
  border-radius: 36px;
  background: #212121;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .3s var(--rc-ease), color .3s var(--rc-ease), transform .3s var(--rc-ease);
}

.rc-join__btn-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--rc-color-yellow);
  color: #212121;
  transition: background-color .3s var(--rc-ease), color .3s var(--rc-ease), transform .3s var(--rc-ease);
}

.rc-join__btn:focus {
  outline: none;
}

.rc-join__btn:focus-visible {
  outline: 2px solid #212121;
  outline-offset: 4px;
}

@media (hover: hover) {
  .rc-join__btn:hover {
    background: var(--rc-color-yellow);
    color: #212121;
  }

  .rc-join__btn:hover .rc-join__btn-icon {
    background: #212121;
    color: var(--rc-color-yellow);
    transform: translateX(4px);
  }
}

/* Tablet 以下：ボタンを下に置き、全体を中央揃え */
@media (max-width: 1100px) {
  .rc-join__card {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .rc-join__body {
    text-align: center;
  }

  .rc-join__head {
    justify-content: center;
  }

  .rc-join__catch span {
    margin-left: 0;
  }

  .rc-join__btn {
    align-self: center;
  }
}

@media (max-width: 800px) {
  .rc-join {
    padding: 64px var(--rc-gutter);
  }

  .rc .rc-join__watermark {
    width: 240px;
  }

  .rc-join__card {
    padding: 40px 24px;
  }

  .rc-join__title {
    font-size: 24px;
  }

  .rc-join__catch {
    margin-top: 24px;
    font-size: clamp(16px, 4.6vw, 18px); /* 320px幅でも1行に収める */
    letter-spacing: .08em;
  }

  .rc-join__text {
    margin-top: 16px;
  }

  .rc-join__btn {
    height: 64px;
    padding: 0 clamp(32px, 10vw, 40px);
    border-radius: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-join__btn,
  .rc-join__btn-icon {
    transition: none;
  }
}

/* ==========================================================================
   Motion：スクロールでふわっと表示（JS 有効時のみ）
   ========================================================================== */
.rc.is-anim-ready [data-rc-anim] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--rc-ease), transform .8s var(--rc-ease);
}

.rc.is-anim-ready [data-rc-anim].is-inview {
  opacity: 1;
  transform: none;
}

.rc.is-anim-ready [data-rc-anim="2"] { transition-delay: .12s; }
.rc.is-anim-ready [data-rc-anim="3"] { transition-delay: .24s; }
.rc.is-anim-ready [data-rc-anim="4"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .rc.is-anim-ready [data-rc-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   WordPress テーマとの調整
   ========================================================================== */
/* パンくず下の余白（テーマ標準 80px → 採用関連ページのみ 20px）
   .lula-recruit-page は page-recruit.php / page-interview.php の .wrapper に付与 */
.wrapper.lula-recruit-page > .breadcrumb {
  margin-bottom: 20px;
}

/* テーマのリンク色（a / a:hover / a:visited）が効かないよう打ち消す */
.rc :is(.rc-voice__link, .rc-more-card__link):is(:link, :visited, :hover, :active, :focus) {
  color: inherit;
  text-decoration: none;
  opacity: 1;
}

.rc .rc-back-link:is(:link, :visited) {
  color: var(--rc-color-text);
  text-decoration: none;
}

.rc .rc-join__btn:is(:link, :visited) {
  color: #fff;
  text-decoration: none;
}

@media (hover: hover) {
  .rc .rc-back-link:hover {
    color: var(--rc-color-key);
  }

  .rc .rc-join__btn:hover {
    color: #212121;
  }
}

/* 画面には出さず、読み上げだけに使うテキスト */
.rc .rc-u-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}