@charset "UTF-8";
/* ==========================================================================
  採用ページ「のため薬局ってこんな薬局！」のリッチ版（sections/recruit-feature-rich.php）
  - 表示の切り替え（A: 今までのセクション / B: リッチ版）は tone-b.css 側で行う
  - スマホファースト。PC（1000px以上）は @media で足す
  - 色: 文字は #333（注記 #555）。水色 #55CCFF・黄緑 #CCFF54・薄い水色 #F2FBFF / #DFF4FF は面・線・飾りに使う
  - 動き: JS が動いたとき（section に .is-rich-js）だけ、最初の状態を隠して、画面に入ったら（.is-in）出す
          「動きを減らす」設定のときは、動きを止めて全部を表示する
========================================================================== */

.recruit-rich {
  --rr-text: #333333;
  --rr-note: #555555;
  --rr-blue: #55CCFF;
  --rr-lime: #CCFF54;
  --rr-pale: #F2FBFF;
  --rr-pale2: #DFF4FF;
  --rr-shadow: 0 12px 32px rgba(0, 78, 162, .08);
  position: relative;
  overflow: hidden;
  padding: 64px 0 88px;
  /* 上下は白に戻す（上のセクションと、下の募集要項の角丸につなぐ） */
  background: linear-gradient(180deg, #FFFFFF 0, #F2FBFF 220px, #F2FBFF calc(100% - 200px), #FFFFFF 100%);
  color: var(--rr-text);
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.recruit-rich *,
.recruit-rich *::before,
.recruit-rich *::after {
  box-sizing: border-box;
}

.recruit-rich ul,
.recruit-rich li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recruit-rich h2,
.recruit-rich h3,
.recruit-rich p {
  margin: 0;
  padding: 0;
}

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

.recruit-rich_defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.recruit-rich_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
  背景の飾り（ゆっくり漂う丸と輪）
-------------------------------------------------------------------------- */
.recruit-rich_deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.recruit-rich_deco span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

/* 大きな丸は画面の端からはみ出す位置に置くため、横幅いっぱいの帯（はみ出しを切る）の中に描く */
.recruit-rich_deco .recruit-rich_blob {
  left: 0;
  width: 100%;
  height: var(--rr-blob, 360px);
  border-radius: 0;
  overflow: hidden;
}

.recruit-rich_blob::before {
  content: "";
  position: absolute;
  top: 30px;
  width: calc(var(--rr-blob, 360px) - 60px);
  height: calc(var(--rr-blob, 360px) - 60px);
  border-radius: 50%;
  background: #FFFFFF;
}

.recruit-rich_blob.is-1 { --rr-blob: 380px; top: 4%; }
.recruit-rich_blob.is-2 { --rr-blob: 320px; top: 30%; }
.recruit-rich_blob.is-3 { --rr-blob: 340px; top: 56%; }
.recruit-rich_blob.is-4 { --rr-blob: 300px; top: 80%; }
.recruit-rich_blob.is-1::before { right: -180px; animation: rr-drift-a 22s ease-in-out infinite alternate; }
.recruit-rich_blob.is-2::before { left: -170px; background: var(--rr-pale2); animation: rr-drift-b 26s ease-in-out infinite alternate; }
.recruit-rich_blob.is-3::before { right: -190px; animation: rr-drift-b 24s ease-in-out infinite alternate; }
.recruit-rich_blob.is-4::before { left: -150px; background: var(--rr-pale2); animation: rr-drift-a 28s ease-in-out infinite alternate; }

.recruit-rich_dot { background: var(--rr-lime); }
.recruit-rich_dot.is-1 { width: 18px; height: 18px; top: 3%; left: 8%; animation: rr-drift-b 14s ease-in-out infinite alternate; }
.recruit-rich_dot.is-2 { width: 12px; height: 12px; top: 22%; right: 6%; background: var(--rr-blue); animation: rr-drift-a 12s ease-in-out infinite alternate; }
.recruit-rich_dot.is-3 { width: 16px; height: 16px; top: 47%; left: 5%; animation: rr-drift-a 16s ease-in-out infinite alternate; }
.recruit-rich_dot.is-4 { width: 11px; height: 11px; top: 68%; right: 8%; background: var(--rr-blue); animation: rr-drift-b 13s ease-in-out infinite alternate; }
.recruit-rich_dot.is-5 { width: 20px; height: 20px; top: 92%; right: 20%; animation: rr-drift-a 15s ease-in-out infinite alternate; }

.recruit-rich_ring { border: 9px solid rgba(85, 204, 255, .3); }
.recruit-rich_ring.is-1 { width: 58px; height: 58px; top: 14%; left: 3%; animation: rr-drift-a 18s ease-in-out infinite alternate; }
.recruit-rich_ring.is-2 { width: 46px; height: 46px; top: 40%; right: 5%; animation: rr-drift-b 20s ease-in-out infinite alternate; }
.recruit-rich_ring.is-3 { width: 64px; height: 64px; top: 74%; left: 4%; animation: rr-drift-b 17s ease-in-out infinite alternate; }

@keyframes rr-drift-a {
  0% { transform: translate(0, 0); }
  50% { transform: translate(14px, -22px); }
  100% { transform: translate(-10px, 16px); }
}

@keyframes rr-drift-b {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-16px, 18px); }
  100% { transform: translate(12px, -14px); }
}

/* --------------------------------------------------------------------------
  冒頭: ロゴ＋「ってこんな薬局！」
-------------------------------------------------------------------------- */
.recruit-rich_head {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 0 8px;
  text-align: center;
}

.recruit-rich_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.recruit-rich_logo {
  display: block;
  width: 240px;
}

.recruit-rich_logo img {
  width: 100%;
}

.recruit-rich_lead {
  display: block;
  font-size: 28px;
  letter-spacing: .04em;
  color: var(--rr-text);
}

/* ロゴのまわりのきらきら */
.recruit-rich_spark {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.recruit-rich_spark.is-1 { width: 16px; height: 16px; top: 8px; left: 12%; background: var(--rr-lime); }
.recruit-rich_spark.is-2 { width: 10px; height: 10px; top: 0; right: 16%; background: var(--rr-blue); }
.recruit-rich_spark.is-3 { width: 22px; height: 22px; bottom: 6px; right: 6%; border: 5px solid rgba(85, 204, 255, .45); }
.recruit-rich_spark.is-4 { width: 12px; height: 12px; bottom: 26px; left: 4%; background: var(--rr-blue); }
.recruit-rich_spark.is-5 { width: 18px; height: 18px; top: 44%; right: 1%; background: var(--rr-lime); }

.recruit-rich_spark { animation: rr-twinkle 3.2s ease-in-out infinite; }
.recruit-rich_spark.is-2 { animation-delay: -.8s; }
.recruit-rich_spark.is-3 { animation-delay: -1.6s; }
.recruit-rich_spark.is-4 { animation-delay: -2.2s; }
.recruit-rich_spark.is-5 { animation-delay: -2.8s; }

@keyframes rr-twinkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.6); opacity: .55; }
}

/* --------------------------------------------------------------------------
  特徴（イラスト＋カード）
-------------------------------------------------------------------------- */
.recruit-rich_list {
  margin-top: 36px;
}

.recruit-rich_item {
  position: relative;
}

.recruit-rich_ill {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.recruit-rich_float {
  animation: rr-float 6s ease-in-out infinite;
}

.recruit-rich_item.is-2 .recruit-rich_float { animation-delay: -1.5s; }
.recruit-rich_item.is-3 .recruit-rich_float { animation-delay: -3s; }

@keyframes rr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.recruit-rich_svg {
  display: block;
  width: 108%;
  height: auto;
  margin: -2% -4% -4%;
  overflow: visible;
}

/* 絵の部品は、それぞれの中心を基準に動かす */
.recruit-rich_svg g,
.recruit-rich_svg rect,
.recruit-rich_svg circle,
.recruit-rich_svg path,
.recruit-rich_svg ellipse {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.recruit-rich_card {
  position: relative;
  max-width: 600px;
  margin: 4px auto 0;
  padding: 26px 22px 28px;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: var(--rr-shadow);
}

.recruit-rich_h3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-weight: 700;
  color: var(--rr-text);
}

/* 番号のラベル（黄緑。動画と同じ） */
.recruit-rich_num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  background: var(--rr-lime);
  font-size: 15px;
  letter-spacing: .06em;
  line-height: 1;
}

.recruit-rich_num b {
  font-size: 21px;
  font-weight: 700;
}

.recruit-rich_h3txt {
  display: block;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: .03em;
}

.recruit-rich_h3txt em {
  font-style: normal;
  font-size: 1.22em;
}

/* 箇条書き（黄緑の丸にチェック＋薄い水色の丸いラベル） */
.recruit-rich_points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
}

.recruit-rich_points li {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 18px 7px 7px;
  border-radius: 24px;
  background: var(--rr-pale);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rr-text);
}

.recruit-rich_points small {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--rr-note);
}

.recruit-rich_check {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
}

.recruit-rich_text {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--rr-text);
}

/* --------------------------------------------------------------------------
  特徴4: グループ3社のロゴをつなぐ絵
-------------------------------------------------------------------------- */
.recruit-rich_group {
  position: relative;
  padding: 26px 0;
}

.recruit-rich_groupdisc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}

/* つなぐ点線（点が下へ流れる） */
.recruit-rich_groupline {
  position: absolute;
  top: 60px;
  bottom: 60px;
  left: 50%;
  width: 14px;
  margin-left: -7px;
  overflow: hidden;
}

.recruit-rich_groupline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  bottom: 0;
  background: radial-gradient(circle, var(--rr-blue) 4px, transparent 4.6px) center top / 14px 22px repeat-y;
  animation: rr-flow 1.4s linear infinite;
}

@keyframes rr-flow {
  from { transform: translateY(0); }
  to { transform: translateY(22px); }
}

.recruit-rich_logos {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.recruit-rich_logos > li {
  width: 78%;
}

.recruit-rich_logos > li:nth-child(1) { transform: translateX(-7%); }
.recruit-rich_logos > li:nth-child(3) { transform: translateX(7%); }
.recruit-rich_logos > li:nth-child(5) { transform: translateX(-7%); }
.recruit-rich_logos > li:nth-child(7) { transform: translateX(7%); }

.recruit-rich_logocard {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 12px 18px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 10px 26px rgba(0, 78, 162, .1);
  animation: rr-float 5s ease-in-out infinite;
}

.recruit-rich_logos > li:nth-child(3) .recruit-rich_logocard { animation-delay: -1.7s; }
.recruit-rich_logos > li:nth-child(5) .recruit-rich_logocard { animation-delay: -3.4s; }
.recruit-rich_logos > li:nth-child(7) .recruit-rich_logocard { animation-delay: -5.1s; }

.recruit-rich_logocard img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.recruit-rich_logocard.is-square {
  padding: 8px;
}

.recruit-rich_logocard.is-square img {
  border-radius: 10px;
}

/* ロゴの間のハート */
.recruit-rich_logos > li.recruit-rich_node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rr-lime);
  box-shadow: 0 0 0 6px #FFFFFF;
}

.recruit-rich_node svg {
  display: block;
  width: 22px;
  height: 20px;
  animation: rr-beat 1.8s ease-in-out infinite;
}

.recruit-rich_node.is-2 svg { animation-delay: -.9s; }

/* --------------------------------------------------------------------------
  特徴をつなぐ点線の道（スクロールに合わせて伸びる。--rr-p: 0〜1 を JS が入れる）
-------------------------------------------------------------------------- */
.recruit-rich_road {
  position: relative;
  width: 60px;
  height: 72px;
  margin: 12px auto 26px;
}

.recruit-rich_road svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: inset(0 0 calc((1 - var(--rr-p, 1)) * 100%) 0);
}

.recruit-rich_road path {
  fill: none;
  stroke: var(--rr-blue);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: .1 14;
  vector-effect: non-scaling-stroke;
}

.recruit-rich_road_pc {
  display: none !important;
}

/* 道の先を示す黄緑の点（道が伸びきったら着地する） */
.recruit-rich_road::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--rr-lime);
  box-shadow: 0 0 0 4px #FFFFFF;
}

/* --------------------------------------------------------------------------
  絵の細部の動き（出たあとも続く、小さな動き）
-------------------------------------------------------------------------- */
/* 特徴1 */
.recruit-rich .rr-glow { animation: rr-glow 3.2s ease-out infinite; }
.recruit-rich .rr-cross { animation: rr-cross 3.2s ease-in-out infinite; }
.recruit-rich .rr-hop { transform-origin: 50% 100%; animation: rr-hop 2.8s ease-in-out infinite; }
.recruit-rich .rr-write { transform-origin: 0 50%; animation: rr-write 4.5s ease-in-out infinite; }
.recruit-rich .rr-write.is-2 { animation-delay: .35s; }
.recruit-rich .rr-write.is-3 { animation-delay: .7s; }
.recruit-rich .rr-sway { transform-origin: 50% 100%; animation: rr-sway 4s ease-in-out infinite; }
.recruit-rich .rr-sway.is-late { animation-delay: -2s; }
.recruit-rich .rr-float-heart { opacity: 0; animation: rr-heart-up 4s ease-out infinite; }
.recruit-rich .rr-float-heart.is-late { animation-delay: 2s; }
.recruit-rich .rr-window { animation: rr-window 5s ease-in-out infinite; }
.recruit-rich .rr-window.is-late { animation-delay: -2.5s; }

@keyframes rr-glow {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

@keyframes rr-cross {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .82; }
}

@keyframes rr-hop {
  0%, 55%, 100% { transform: translateY(0) scale(1, 1); }
  62% { transform: translateY(0) scale(1.06, .92); }
  72% { transform: translateY(-16px) scale(.97, 1.04); }
  82% { transform: translateY(0) scale(1.04, .95); }
  90% { transform: translateY(0) scale(1, 1); }
}

@keyframes rr-write {
  0% { transform: scaleX(0); }
  25%, 80% { transform: scaleX(1); }
  95%, 100% { transform: scaleX(0); }
}

@keyframes rr-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes rr-heart-up {
  0% { transform: translateY(20px) scale(.6); opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(-50px) scale(1); opacity: 0; }
}

@keyframes rr-window {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* 特徴2 */
.recruit-rich .rr-bob { animation: rr-bob 3.4s ease-in-out infinite; }
.recruit-rich .rr-bob.is-2 { animation-delay: -1.1s; }
.recruit-rich .rr-bob.is-3 { animation-delay: -2.2s; }
.recruit-rich .rr-talk { animation: rr-talk 1.8s ease-in-out infinite; }
.recruit-rich .rr-talk.is-2 { animation-delay: .3s; }
.recruit-rich .rr-talk.is-3 { animation-delay: .6s; }
.recruit-rich .rr-beat { animation: rr-beat 1.8s ease-in-out infinite; }
.recruit-rich .rr-swim { animation: rr-swim 2.4s ease-in-out infinite; }
.recruit-rich .rr-steam { opacity: 0; animation: rr-steam 3s ease-out infinite; }
.recruit-rich .rr-steam.is-late { animation-delay: 1.5s; }
.recruit-rich .rr-bubble { animation: rr-bubble 5s ease-in-out infinite; }
.recruit-rich .rr-bubble.is-2 { animation-delay: -1.6s; }
.recruit-rich .rr-bubble.is-3 { animation-delay: -3.2s; }

@keyframes rr-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes rr-talk {
  0%, 60%, 100% { opacity: .3; transform: scale(.85); }
  25% { opacity: 1; transform: scale(1.12); }
}

@keyframes rr-beat {
  0%, 60%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(.96); }
  45% { transform: scale(1.1); }
}

@keyframes rr-swim {
  0%, 100% { transform: rotate(-8deg) translateX(-4px); }
  50% { transform: rotate(8deg) translateX(4px); }
}

@keyframes rr-steam {
  0% { transform: translateY(8px); opacity: 0; }
  30% { opacity: .9; }
  100% { transform: translateY(-18px); opacity: 0; }
}

@keyframes rr-bubble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 特徴3 */
.recruit-rich .rr-coin { opacity: 0; animation: rr-coin 3.2s ease-in infinite; }
.recruit-rich .rr-wiggle { animation: rr-wiggle 3s ease-in-out infinite; }
.recruit-rich .rr-wiggle.is-2 { animation-delay: -1s; }
.recruit-rich .rr-wiggle.is-3 { animation-delay: -2s; }
.recruit-rich .rr-badge { transform-origin: 50% 20%; animation: rr-badge 4s ease-in-out infinite; }
.recruit-rich .rr-bag { transform-origin: 50% 100%; animation: rr-bag 3.6s ease-in-out infinite; }
.recruit-rich .rr-chop { transform-origin: 0 50%; animation: rr-chop 3s ease-in-out infinite; }

@keyframes rr-coin {
  0% { transform: translateY(-30px); opacity: 0; }
  20% { transform: translateY(-10px); opacity: 1; }
  70% { transform: translateY(46px); opacity: 1; }
  82%, 100% { transform: translateY(60px); opacity: 0; }
}

@keyframes rr-wiggle {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg) translateY(-6px); }
}

@keyframes rr-badge {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes rr-bag {
  0%, 70%, 100% { transform: scale(1, 1); }
  78% { transform: scale(1.04, .96); }
  86% { transform: scale(.98, 1.03) translateY(-8px); }
  94% { transform: scale(1, 1); }
}

@keyframes rr-chop {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-4deg); }
}

/* --------------------------------------------------------------------------
  画面に入ったときの動き（JS が動いたときだけ、最初の状態を隠す）
-------------------------------------------------------------------------- */
/* 冒頭 */
.recruit-rich.is-rich-js .recruit-rich_head .recruit-rich_logo { opacity: 0; transform: scale(.4); }
.recruit-rich.is-rich-js .recruit-rich_head .recruit-rich_lead { opacity: 0; transform: translateY(18px); }
.recruit-rich.is-rich-js .recruit-rich_head .recruit-rich_spark { opacity: 0; }

.recruit-rich.is-rich-js .recruit-rich_head.is-in .recruit-rich_logo {
  animation: rr-pop .9s cubic-bezier(.3, 1.5, .5, 1) both;
}

.recruit-rich.is-rich-js .recruit-rich_head.is-in .recruit-rich_lead {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .45s, transform .7s cubic-bezier(.2, 1.4, .4, 1) .45s;
}

.recruit-rich.is-rich-js .recruit-rich_head.is-in .recruit-rich_spark {
  opacity: 1;
  animation: rr-spark-in .6s cubic-bezier(.3, 1.6, .5, 1) both, rr-twinkle 3.2s ease-in-out .9s infinite;
}

.recruit-rich.is-rich-js .recruit-rich_head.is-in .recruit-rich_spark.is-2 { animation-delay: .35s, 1.2s; }
.recruit-rich.is-rich-js .recruit-rich_head.is-in .recruit-rich_spark.is-3 { animation-delay: .5s, 1.6s; }
.recruit-rich.is-rich-js .recruit-rich_head.is-in .recruit-rich_spark.is-4 { animation-delay: .65s, 2s; }
.recruit-rich.is-rich-js .recruit-rich_head.is-in .recruit-rich_spark.is-5 { animation-delay: .8s, 2.4s; }

@keyframes rr-pop {
  0% { opacity: 0; transform: scale(.4); }
  55% { opacity: 1; transform: scale(1.1); }
  75% { transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rr-spark-in {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* 特徴: イラストが下からふわっと */
.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_ill {
  opacity: 0;
  transform: translateY(48px) scale(.94);
}

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_ill {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease, transform 1s cubic-bezier(.2, 1.25, .4, 1);
}

/* カードと文字 */
.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_card {
  opacity: 0;
  transform: translateY(28px);
}

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_card {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease .15s, transform .8s cubic-bezier(.2, 1, .4, 1) .15s;
}

/* 番号のラベルが弾む */
.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_num { opacity: 0; transform: scale(.3); }

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_num {
  animation: rr-pop .8s cubic-bezier(.3, 1.5, .5, 1) .35s both;
}

.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_h3txt { opacity: 0; transform: translateY(12px); }

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_h3txt {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .55s, transform .6s ease .55s;
}

/* 箇条書きが1つずつ出て、チェックが描かれる */
.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_points li { opacity: 0; transform: translateX(-16px); }
.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_checkpath { stroke-dasharray: 30; stroke-dashoffset: 30; }

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_points li {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, 1.4, .4, 1);
  transition-delay: calc(.7s + var(--i, 0) * .14s);
}

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_checkpath {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .45s ease;
  transition-delay: calc(.95s + var(--i, 0) * .14s);
}

.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_text { opacity: 0; transform: translateY(12px); }

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_text {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease 1.1s, transform .7s ease 1.1s;
}

/* 特徴4: ロゴのカードが順に出る */
.recruit-rich.is-rich-js .recruit-rich_item .recruit-rich_logos > li { opacity: 0; }

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_logos > li {
  opacity: 1;
  transition: opacity .5s ease;
  transition-delay: calc(.4s + var(--i, 0) * .25s);
}

.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_logos > li.recruit-rich_node { transition-delay: .65s; }
.recruit-rich.is-rich-js .recruit-rich_item.is-in .recruit-rich_logos > li.recruit-rich_node.is-2 { transition-delay: .9s; }

/* 画面の外にあるあいだは、続く動きを止める（見えないところで動かさない） */
.recruit-rich.is-rich-js .recruit-rich_item:not(.is-live) *,
.recruit-rich.is-rich-js .recruit-rich_head:not(.is-live) .recruit-rich_spark,
.recruit-rich.is-rich-js:not(.is-live) .recruit-rich_deco span,
.recruit-rich.is-rich-js:not(.is-live) .recruit-rich_deco span::before {
  animation-play-state: paused;
}

/* ==========================================================================
  PC（1000px以上）: イラストと文章を左右交互に
========================================================================== */
@media screen and (min-width: 1000px) {
  .recruit-rich {
    padding: 100px 0 130px;
  }

  .recruit-rich_inner {
    padding: 0 40px;
  }

  .recruit-rich_blob.is-1 { --rr-blob: 680px; top: 2%; }
  .recruit-rich_blob.is-2 { --rr-blob: 580px; top: 28%; }
  .recruit-rich_blob.is-3 { --rr-blob: 620px; top: 54%; }
  .recruit-rich_blob.is-4 { --rr-blob: 540px; top: 76%; }
  .recruit-rich_blob.is-1::before { right: -280px; }
  .recruit-rich_blob.is-2::before { left: -280px; }
  .recruit-rich_blob.is-3::before { right: -300px; }
  .recruit-rich_blob.is-4::before { left: -240px; }
  .recruit-rich_dot.is-1 { width: 26px; height: 26px; left: 10%; }
  .recruit-rich_dot.is-3 { width: 22px; height: 22px; }
  .recruit-rich_ring { border-width: 14px; }
  .recruit-rich_ring.is-1 { width: 96px; height: 96px; left: 3%; }
  .recruit-rich_ring.is-2 { width: 80px; height: 80px; right: 4%; }
  .recruit-rich_ring.is-3 { width: 110px; height: 110px; }

  .recruit-rich_head {
    max-width: 760px;
    padding: 30px 0 10px;
  }

  .recruit-rich_title {
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 22px;
  }

  .recruit-rich_logo {
    width: 340px;
  }

  .recruit-rich_lead {
    font-size: 44px;
    line-height: 1.15;
  }

  .recruit-rich_list {
    margin-top: 64px;
  }

  /* イラストの列を広めにする（イラストが主役） */
  .recruit-rich_item {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;
    gap: 56px;
  }

  .recruit-rich_item.is-2,
  .recruit-rich_item.is-4 {
    grid-template-columns: .92fr 1.08fr;
  }

  .recruit-rich_item.is-2 .recruit-rich_ill,
  .recruit-rich_item.is-4 .recruit-rich_ill {
    order: 2;
  }

  .recruit-rich_ill {
    max-width: none;
  }

  .recruit-rich_svg {
    width: 116%;
    margin: -4% -8% -6%;
  }

  .recruit-rich_card {
    max-width: none;
    margin: 0;
    padding: 40px clamp(28px, 3.4vw, 44px) 42px;
    border-radius: 36px;
  }

  .recruit-rich_h3 {
    gap: 14px;
  }

  .recruit-rich_num {
    height: 42px;
    padding: 0 20px;
    border-radius: 21px;
    font-size: 16px;
  }

  .recruit-rich_num b {
    font-size: 23px;
  }

  .recruit-rich_h3txt {
    font-size: clamp(26px, 2.6vw, 32px);
  }

  .recruit-rich_points {
    gap: 12px;
    margin-top: 24px;
  }

  .recruit-rich_points li {
    padding: 8px 22px 8px 8px;
    font-size: 17px;
    gap: 12px;
  }

  .recruit-rich_points small {
    font-size: 13px;
  }

  .recruit-rich_check {
    width: 32px;
    height: 32px;
  }

  .recruit-rich_text {
    margin-top: 24px;
    font-size: 16px;
  }

  .recruit-rich_group {
    padding: 34px 0;
  }

  .recruit-rich_groupline {
    top: 80px;
    bottom: 80px;
  }

  .recruit-rich_logos {
    gap: 10px;
  }

  .recruit-rich_logos > li {
    width: 72%;
  }

  .recruit-rich_logocard {
    height: 108px;
    padding: 16px 26px;
    border-radius: 24px;
  }

  .recruit-rich_logocard.is-square {
    padding: 10px;
  }

  .recruit-rich_logos > li.recruit-rich_node {
    width: 52px;
    height: 52px;
  }

  .recruit-rich_node svg {
    width: 26px;
    height: 24px;
  }

  /* 道: 左の絵の下から、右の絵の上へ（偶数番目は左右を反転） */
  .recruit-rich_road {
    width: 100%;
    height: 130px;
    margin: 6px 0;
  }

  .recruit-rich_road.is-flip svg {
    transform: scaleX(-1);
  }

  .recruit-rich_road_sp {
    display: none !important;
  }

  .recruit-rich_road_pc {
    display: block !important;
  }

  /* 道の終点（黄緑の点）は、次のイラストの列の中央 */
  .recruit-rich_road::after {
    left: 74.5%;
    margin-left: -9px;
    width: 18px;
    height: 18px;
  }

  .recruit-rich_road.is-flip::after {
    left: 25.5%;
  }
}

/* ==========================================================================
  「動きを減らす」設定: 動きをすべて止めて、最初から全部表示する
========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .recruit-rich *,
  .recruit-rich *::before,
  .recruit-rich *::after {
    animation: none !important;
    transition: none !important;
  }

  .recruit-rich .recruit-rich_logo,
  .recruit-rich .recruit-rich_lead,
  .recruit-rich .recruit-rich_spark,
  .recruit-rich .recruit-rich_ill,
  .recruit-rich .recruit-rich_card,
  .recruit-rich .recruit-rich_num,
  .recruit-rich .recruit-rich_h3txt,
  .recruit-rich .recruit-rich_points li,
  .recruit-rich .recruit-rich_text,
  .recruit-rich .recruit-rich_logos > li {
    opacity: 1 !important;
  }

  .recruit-rich .recruit-rich_logo,
  .recruit-rich .recruit-rich_lead,
  .recruit-rich .recruit-rich_ill,
  .recruit-rich .recruit-rich_card,
  .recruit-rich .recruit-rich_num,
  .recruit-rich .recruit-rich_h3txt,
  .recruit-rich .recruit-rich_points li,
  .recruit-rich .recruit-rich_text {
    transform: none !important;
  }

  .recruit-rich .recruit-rich_checkpath {
    stroke-dashoffset: 0 !important;
  }

  .recruit-rich .recruit-rich_road svg {
    clip-path: none !important;
  }

  /* 動きの途中で消える部品（浮かぶハート・湯気・コイン）は、止めた状態で見える位置に置く */
  .recruit-rich .rr-float-heart,
  .recruit-rich .rr-steam,
  .recruit-rich .rr-coin {
    opacity: 1 !important;
  }
}

/* 箇条書きと説明文の間をあける（.recruit-rich の中の p の余白の指定に負けないよう、詳細度を上げる） */
.recruit-rich .recruit-rich_item .recruit-rich_text {
  margin-top: 22px;
}

.recruit-rich .recruit-rich_item .recruit-rich_points + .recruit-rich_text,
.recruit-rich .recruit-rich_item ul + .recruit-rich_text {
  margin-top: 22px;
}