@charset "UTF-8";
/* ==========================================================================
   採用情報（recruit.html）専用スタイル
   ・style.css の後に読み込みます
   ========================================================================== */

/* 見出し「RECRUIT」用のフォント（元サイトにアップロードされている 07ラノベPOP） */
@font-face {
  font-family: "LightNovelPOP";
  src: url("../assets/fonts/lightnovelpop.woff2") format("woff2");
  font-display: swap;
}

.c-red { color: #ff4040; }
.c-green { color: #06bf65; }

/* 写真の共通（枠いっぱいにトリミング） */
.rc-hero__col img, .rc-msg__img img, .rc-more__img img, .rc-flow__qr img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}

/* 空行（元サイトの行の高さに合わせる） */
.gap-l, .gap-s { display: block; }

/* --------------------------------------------------------------------------
   ページタイトル（写真4枚の帯）
   -------------------------------------------------------------------------- */
.rc-hero {
  display: flex; gap: 10px; height: 544px; padding: 15px;
  background: rgba(255, 255, 255, .8);
}
.rc-hero__col { position: relative; min-width: 0; flex: 234 1 0; }
.rc-hero__col--1 { flex-grow: 218; }
.rc-hero__col--4 { background: #b3f2ff; }
.rc-hero__sub {
  position: absolute; left: 0; right: 0; top: 221px;
  font-size: 14px; line-height: 14px; letter-spacing: .4em; font-weight: 400;
  color: var(--c-text2); text-align: center;
}
.rc-hero__title {
  position: absolute; left: 0; right: 0; top: 236px;
  font-family: "LightNovelPOP", var(--font);
  font-size: 40px; line-height: 56px; color: var(--c-title); text-align: center;
}

/* --------------------------------------------------------------------------
   資格を活かして働きたいけど...
   -------------------------------------------------------------------------- */
.rc-intro { position: relative; height: 431px; background: rgba(255, 255, 255, .8); }
.rc-intro__title {
  position: absolute; left: 0; right: 0; top: 81px;
  font-size: 30px; line-height: 42px; font-weight: 700; letter-spacing: .05em;
  color: var(--c-title); text-align: center;
}
.rc-intro__text {
  position: absolute; left: 0; right: 0; top: 212px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}

/* --------------------------------------------------------------------------
   「子ども達の笑顔は嬉しいし、可愛いのに...」
   -------------------------------------------------------------------------- */
.rc-msg { display: flex; height: 403px; padding: 15px; background: rgba(255, 255, 255, .8); }
.rc-msg__img, .rc-msg__body { position: relative; flex: 1 1 0; min-width: 0; }
.rc-msg__title, .rc-msg__text { position: absolute; left: calc(50% - 193.5px); width: 403px; text-align: center; }
.rc-msg__title {
  top: 73px; font-size: 17px; line-height: 34px; font-weight: 700; letter-spacing: .05em; color: #fe6160;
}
.rc-msg__text { top: 138px; font-size: 14px; line-height: 28px; letter-spacing: .85px; color: var(--c-text2); }
.rc-msg__text .gap-s { height: 21px; }

/* --------------------------------------------------------------------------
   もっと楽しく、もっとあなたらしく
   -------------------------------------------------------------------------- */
.rc-more { display: flex; height: 618px; padding: 15px; background: rgba(255, 255, 255, .8); }
.rc-more__img { position: relative; flex: 219 1 0; min-width: 0; }
.rc-more__body { position: relative; flex: 512 1 0; min-width: 0; }
.rc-more__title, .rc-more__text { position: absolute; left: calc(50% - 255.5px); width: 511px; text-align: center; }
.rc-more__title { top: 62px; font-size: 25px; line-height: 35px; font-weight: 700; color: var(--c-title); }
.rc-more__text { top: 128px; font-size: 14px; line-height: 28px; letter-spacing: .05em; color: var(--c-text2); }
.rc-more__text .gap-l { height: 28px; }
.rc-more__text .gap-s { height: 18px; }

/* --------------------------------------------------------------------------
   理想的な環境で子供を支援する
   -------------------------------------------------------------------------- */
.rc-env { position: relative; height: 1679px; background: #fff; }
.rc-env > * { position: absolute; }
.rc-env__icon { left: calc(50% - 31px); top: 81px; width: 62px; height: 63px; }
.rc-env__title {
  left: 0; right: 0; top: 180px;
  font-size: 30px; line-height: 42px; font-weight: 700; letter-spacing: .05em; color: var(--c-title); text-align: center;
}
.rc-env__text {
  left: calc(50% - 397px); width: 794px; top: 268px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}
.rc-env__text p, .rc-feat__text p, .rc-apply__text p { min-height: 1em; }

.rc-feats {
  top: 470px; left: 0; right: 0; height: 551px;
  display: flex; width: max(980px, 100% - 270px); margin: 0 auto;
}
.rc-feat { position: relative; flex: 327 1 0; min-width: 0; }
.rc-feat--1 { flex-grow: 326; }
.rc-feat > * { position: absolute; }
.rc-feat__img { left: calc(50% - 76px); top: 74px; width: 152px; height: 151px; }
.rc-feat__img img { width: 100%; height: 100%; object-fit: cover; }
.rc-feat__title {
  left: 0; right: 0; top: 253px; margin: 0;
  font-size: 25px; line-height: 35px; font-weight: 700; letter-spacing: .1em; text-align: center;
}
.rc-feat--1 .rc-feat__title { color: #1668b3; }
.rc-feat--2 .rc-feat__title { color: #ff7c00; }
.rc-feat--3 .rc-feat__title { color: var(--c-title); }
.rc-feat__text {
  top: 311px; left: calc(50% - 145px); width: 290px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}
.rc-feat--1 .rc-feat__text { left: calc(50% - 139px); width: 278px; }

.rc-video { left: calc(50% - 490px); top: 1021px; width: 979px; height: 601px; background: #000; }
.rc-video video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* --------------------------------------------------------------------------
   面接・ご応募について
   -------------------------------------------------------------------------- */
.rc-apply { background: #fff; padding-bottom: 61px; }
.rc-apply__head { position: relative; height: 560px; }
.rc-apply__head > * { position: absolute; }
.rc-apply__icon { left: calc(50% - 34px); top: 35px; width: 68px; height: 58px; }
.rc-apply__title {
  left: 0; right: 0; top: 123px;
  font-size: 33px; line-height: 46.2px; font-weight: 700; letter-spacing: .05em; color: var(--c-title); text-align: center;
}
.rc-apply__text {
  left: calc(50% - 397px); width: 794px; top: 222px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}
.rc-apply__text .t24 { font-size: 24px; line-height: 33.6px; font-weight: 700; }
.rc-apply__text .t22 { font-size: 22px; line-height: 30.8px; font-weight: 700; }
.rc-apply__text .t16 { font-size: 16px; line-height: 22.4px; }
.rc-apply__text .t22 a { color: #54a7d1; text-decoration: underline; }
.rc-line-link { color: #06bf65; font-weight: 700; text-decoration: underline; }

.rc-flow { display: flex; height: 519px; width: max(980px, 100% - 310px); margin: 0 auto; }
.rc-flow__body { position: relative; flex: 549 1 0; min-width: 0; }
.rc-flow__qr { flex: 431 1 0; min-width: 0; }
.rc-flow__body > * { position: absolute; }
.rc-flow__title {
  left: 0; right: 0; top: 60px;
  font-size: 33px; line-height: 46.2px; font-weight: 700; letter-spacing: .05em; color: var(--c-title); text-align: center;
}
.rc-flow__text {
  left: calc(50% - 253px); width: 506px; top: 141px;
  font-size: 14px; line-height: 28px; font-weight: 700; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}
.rc-flow__btn {
  left: calc(50% - 217px); top: 402px; width: 434px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(29, 201, 0, 0); border-radius: 20px;
  background-color: #1dc900; color: #fff;
  font-size: 25px; line-height: 35px; font-weight: 700;
  transition: border-color .4s ease, background-color .4s ease, color .4s ease;
}
.rc-flow__btn:hover { background-color: rgba(50, 50, 50, 0); border-color: #1dc900; color: #1dc900; }

/* --------------------------------------------------------------------------
   このページで使うアニメーション
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* ふわっと表示（Fade In） */
  .a-fadein { animation: 1200ms cubic-bezier(.445, .05, .55, .95) var(--d, 1ms) 1 normal backwards m-fadeIn; }
  /* 拡大しながら表示＋ぷるぷる（3つのイラスト） */
  .a-expand-rubber { animation: 1200ms linear 1ms 1 normal backwards m-fadeIn, 1200ms cubic-bezier(.645, .045, .355, 1) 1ms 1 normal backwards m-expandIn; }
  .a-expand-rubber .rubber { animation: 3000ms linear 1ms infinite m-rubber; animation-play-state: paused; }
  .a-expand-rubber.is-in .rubber { animation-play-state: running; }
}

/* ==========================================================================
   スマホ（750px以下）
   ========================================================================== */
@media (max-width: 750px) {
  .rc-hero { flex-direction: column; gap: 9px; height: auto; padding: 0 0 9px; }
  .rc-hero__col { flex: none; }
  .rc-hero__col--4 { order: 1; height: 173px; }
  .rc-hero__col--2 { order: 2; height: 107px; }
  .rc-hero__col--3 { order: 3; height: 168px; }
  .rc-hero__col--1 { order: 4; height: 187px; }
  .rc-hero__sub { left: 20px; right: 20px; top: 30px; }
  .rc-hero__title { left: 20px; right: 20px; top: 44px; font-size: 30px; line-height: 42px; }

  .rc-intro { height: 342px; }
  .rc-intro__title { left: 20px; right: 20px; top: 30px; font-size: 16px; line-height: 22.4px; }
  .rc-intro__text { left: 20px; right: 20px; top: 120px; font-size: 12px; line-height: 19.2px; }

  .rc-msg { flex-direction: column; height: auto; padding: 0; }
  .rc-msg__img { flex: none; height: 145px; }
  .rc-msg__body { flex: none; height: 258px; }
  .rc-msg__title { left: 0; width: 100%; top: 30px; font-size: 13px; line-height: 26px; }
  .rc-msg__text { left: 20px; right: 20px; width: auto; top: 66px; font-size: 12px; line-height: 24px; letter-spacing: .7px; }
  .rc-msg__text .gap-s { height: 18px; }

  .rc-more { flex-direction: column; height: auto; padding: 0; }
  .rc-more__img { flex: none; height: 179px; }
  .rc-more__img--r { display: none; }
  .rc-more__body { flex: none; height: 454px; }
  .rc-more__title { left: 20px; right: 20px; width: auto; top: 30px; font-size: 16px; line-height: 22.4px; }
  .rc-more__text { left: 20px; right: 20px; width: auto; top: 64px; font-size: 12px; line-height: 24px; }
  .rc-more__text .gap-l { height: 24px; }
  .rc-more__text .gap-s { height: 15px; }

  .rc-env { height: calc(1489px + (100vw - 40px) * 601 / 979 + 38px); }
  .rc-env__icon { left: calc(50% - 23px); top: 30px; width: 44px; height: 45px; }
  .rc-env__title { left: 20px; right: 20px; top: 100px; font-size: 17px; line-height: 23.8px; }
  .rc-env__text { left: 20px; right: 20px; width: auto; top: 144px; font-size: 12px; line-height: 19.2px; }
  .rc-feats { top: 471px; width: auto; height: auto; flex-direction: column; }
  .rc-feat { flex: none; height: 342px; }
  .rc-feat--3 { height: 333px; }
  .rc-feat__img { left: calc(50% - 55px); top: 20px; width: 110px; height: 109px; }
  .rc-feat__title { left: 20px; right: 20px; top: 144px; font-size: 20px; line-height: 28px; }
  .rc-feat__text, .rc-feat--1 .rc-feat__text { left: 20px; right: 20px; width: auto; top: 188px; font-size: 12px; line-height: 19.2px; }
  .rc-video { left: 20px; right: 20px; width: auto; height: auto; top: 1489px; aspect-ratio: 979 / 601; }

  .rc-apply { padding-bottom: 0; }
  .rc-apply__head { height: 518px; }
  .rc-apply__icon { left: calc(50% - 23px); top: 0; width: 45px; height: 39px; }
  .rc-apply__title { left: 20px; right: 20px; top: 60px; font-size: 20px; line-height: 28px; }
  .rc-apply__text { left: 20px; right: 20px; width: auto; top: 108px; font-size: 12px; line-height: 19.2px; }
  .rc-apply__text .t24 { font-size: 19px; line-height: 26.6px; }
  .rc-apply__text .t22 { font-size: 18px; line-height: 25.2px; }
  .rc-apply__text .t16 { font-size: 13px; line-height: 18.2px; }
  /* 文字間隔は各文字サイズの 0.05em（元サイトと同じ。改行位置を合わせるため） */
  .rc-apply__text .t24, .rc-apply__text .t22, .rc-apply__text .t16 { letter-spacing: .05em; }

  .rc-flow { flex-direction: column-reverse; width: auto; height: auto; }
  .rc-flow__qr { flex: none; height: 100vw; }
  .rc-flow__body { flex: none; height: 437px; }
  .rc-flow__btn { left: 15px; right: 15px; width: auto; top: 32px; height: 42px; font-size: 23.33px; line-height: 32.67px; }
  .rc-flow__title { left: 20px; right: 20px; top: 110px; font-size: 23px; line-height: 32.2px; }
  .rc-flow__text { left: 15px; right: 15px; width: auto; top: 160px; font-size: 12px; line-height: 24px; }
}