@charset "utf-8";
/* ==========================================================================
   TOP（front-page）— Figma node 76:210「C案」1920x9367
   ========================================================================== */

/* ==========================================================================
   FV  (Figma y=120-780 / 高さ 660px)
   左 774px（x=170〜944）/ 右 976px（488 x 2）
   左カラムの内訳（Figma 実測）:
     コピー   上 60 + キャッチ 196(98x2) + 29 + サブ 88(44x2) + 下余白 60 = 433
     実績帯   107（y=553〜660）
     CTA 帯   120（y=660〜780）
   ※ 2026-08-16 に写真を 0.7 倍（FV 490px）に縮めていたが、2026-08-17 に
      Figma 準拠へ戻す判断。共通パーツ側の値をそのまま使うため上書きは持たない。
   ========================================================================== */
.rn-fv { display: flex; align-items: stretch; }

.rn-fv__body {
  flex: 0 0 774px;
  height: 660px;              /* Figma y=120〜780 */
  display: flex;
  flex-direction: column;
}

.rn-fv__copy {
  flex: 1 1 auto;
  /* Figma は上 60（キャッチ x=230 / y=180）。WF 2026-09-06 でサブコピーが 4 行になり、
     実績帯（y=553）との間が 4px しか残らなかったため上を 32 に詰め、上下の余白を 32px で揃えた */
  padding: 32px 0 0 60px;
}

/* CTA バー (774x120) */
.rn-fv__cta {
  flex: 0 0 120px;
  background: var(--rn-blue);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  /* 左 170（バッジ x=340）/ 右 160（矢印 x=774〜784・帯右端 944） */
  padding: 0 160px 0 170px;
  position: relative;
  transition: opacity .2s;
}
.rn-fv__cta:hover { opacity: .6; }
.rn-fv__badge {
  position: absolute;
  left: 170px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 46px;
  background: #fff;
  color: var(--rn-blue);
  font-weight: 500;
  font-size: 16px;
}
.rn-fv__cta .rn-cal { margin-left: 144px; }   /* アイコン x=484（帯左端 170 から +314） */
.rn-fv__cta-text { font-weight: 700; font-size: 20px; }
.rn-fv__cta .rn-arrow { margin-left: auto; }

/* 右ビジュアル */
.rn-fv__visual { flex: 1 1 auto; display: flex; position: relative; min-width: 0; }
.rn-fv__col { flex: 1 1 50%; display: flex; flex-direction: column; min-width: 0; }
.rn-fv__tag {
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rn-blue-pale);
  color: var(--rn-blue);
  font-family: var(--rn-cond);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .04em;
}
.rn-fv__tag--women { background: var(--rn-pink-pale); color: var(--rn-red); }
.rn-fv__photo { flex: 1 1 auto; overflow: hidden; }
.rn-fv__photo img { width: 100%; height: 100%; object-fit: cover; }
.rn-fv__script {
  position: absolute;
  left: 40%;       /* Figma x=1332（ビジュアル左端 944 から +388 / 976 の 39.8%） */
  top: 62%;        /* Figma y=530（FV 上端 120 から +410 / 660 の 62.1%） */
  width: 199px;    /* Figma 199.3px */
  height: auto;
  z-index: 2;
  pointer-events: none;
}

/* ==========================================================================
   CONSEPT  (y=780-1510)
   ========================================================================== */
.rn-concept .rn-split__head { padding-top: 40px; padding-bottom: 40px; position: relative; }
.rn-concept__script { display: block; margin-top: 56px; width: 300px; opacity: .8; }
.rn-concept__movie { padding: 40px; }
.rn-movie { position: relative; width: 100%; padding-top: 56.3%; /* 1154:650 */ background: var(--rn-blue-pale); }
.rn-movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   VOICE  (y=1510-1943)  背景 #f1f1ff
   ========================================================================== */
.rn-voice { background: var(--rn-blue-pale); padding: 40px 0; }
.rn-voice__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.rn-voice__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 23px;
  margin-top: 42px;
}
.rn-voice__item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--rn-blue);
}
.rn-voice__body { padding-top: 26px; }
.rn-voice__photo { flex: 0 0 130px; }
.rn-voice__photo img { width: 130px; height: 174px; object-fit: cover; }
.rn-voice__name { font-size: 20px; margin-bottom: 20px; }
.rn-voice__text { font-size: 16px; line-height: 1.7; }

/* ==========================================================================
   MENU  (y=3981-4466)
   ========================================================================== */
.rn-menu { padding: 40px 0; }
.rn-menu .rn-sec-head { align-items: center; }
.rn-menu__script { width: 412px; height: auto; opacity: .6; margin-left: auto; }
.rn-menu__btn { flex: none; width: 390px; margin-left: 24px; }

.rn-menu__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 34px; }
.rn-menu__item { border: 1px solid var(--rn-blue); }
.rn-menu__item > a { display: flex; align-items: center; gap: 32px; padding: 16px; transition: opacity .2s; }
.rn-menu__item > a:hover { opacity: .6; }
.rn-menu__photo { flex: 0 0 46%; }
.rn-menu__photo img { width: 100%; height: 230px; object-fit: cover; }
.rn-menu__body { flex: 1 1 auto; min-width: 0; }
.rn-menu__title {
  font-family: var(--rn-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: .1em;
  color: var(--rn-blue);
  margin: 0;
}
.rn-menu__line { display: block; width: 100%; max-width: 308px; height: 1px; background: var(--rn-blue-line); margin: 24px 0; }
.rn-menu__price { font-family: var(--rn-serif); font-weight: 500; letter-spacing: .1em; }
.rn-menu__price-label,
.rn-menu__price-yen { font-size: 24px; }
.rn-menu__price-num { font-size: 44px; color: var(--rn-blue); margin: 0 6px; }

/* ==========================================================================
   BLOG  (y=6765-7371)
   ========================================================================== */
.rn-blog { padding: 40px 0; }
.rn-blog__btn { flex: none; width: 390px; }
/* ==========================================================================
   NEWS  (y=7371-7838)
   ========================================================================== */
.rn-news .rn-split__head { background: var(--rn-blue-pale); }
.rn-news__list { border-top: 1px solid var(--rn-blue-line); }
.rn-news__item { border-bottom: 1px solid var(--rn-blue-line); }
.rn-news__item > a,
.rn-news__item > span { display: flex; align-items: center; gap: 60px; padding: 20px 0; transition: opacity .2s; }
.rn-news__item > a:hover { opacity: .6; }
.rn-news__date { flex: 0 0 104px; font-size: 16px; color: var(--rn-gray-text); }
.rn-news__title { font-size: 16px; line-height: 1.6; }
.rn-news__foot { display: flex; justify-content: center; margin-top: 32px; }
.rn-news__foot .rn-btn { width: 390px; }

/* ==========================================================================
   RECRUIT  (y=8407-8906)
   ========================================================================== */
.rn-recruit .rn-split__head { background: var(--rn-blue-pale); }
.rn-recruit__body { display: flex; align-items: center; gap: 40px; }
/* 写真は 6 人が横一列に並ぶ集合写真。object-fit: cover で高さを固定すると
   左右のスタッフが切れるため、幅だけ Figma の 560px に固定して高さは元比率に任せる */
.rn-recruit__photo { flex: 0 0 560px; min-width: 0; }
.rn-recruit__photo img { width: 100%; height: auto; }
.rn-recruit__text { flex: 1 1 auto; min-width: 0; }
.rn-recruit__text .rn-btn { width: 390px; max-width: 100%; margin-top: 40px; }

/* ==========================================================================
   1280px 以下（等倍スケールの適用外）
   ========================================================================== */
@media screen and (max-width: 1280px) {
  .rn-fv__body { flex-basis: 52%; }
  .rn-fv__catch { font-size: 48px; line-height: 1.6; }
  .rn-fv__sub { font-size: 20px; line-height: 1.8; }
  .rn-stats__value { font-size: 28px; }
  .rn-stats__value--sm { font-size: 20px; }
  .rn-fv__cta { padding-left: 24px; }
  .rn-fv__badge { left: 24px; }
  .rn-fv__cta .rn-cal { margin-left: 140px; }

  .rn-menu__script { display: none; }
  .rn-menu__title { font-size: 26px; }
  .rn-menu__price-num { font-size: 38px; }

  /* 見出し帯(420px)を引くと本文カラムが 400px 以下になり、
     写真560px と横並びだとテキストが読めない幅まで潰れるため縦積みにする */
  .rn-recruit__body { flex-direction: column; align-items: stretch; }
  /* 縦積み。全幅にすると写真が縦に伸びすぎるので Figma 幅で頭打ちにする（本文と左揃え） */
  .rn-recruit__photo { flex-basis: auto; max-width: 560px; }
}

/* ==========================================================================
   1280px 以下（タブレット）
   ========================================================================== */
@media screen and (max-width: 1280px) {
  .rn-fv { flex-direction: column; }
  /* PC の 660px 固定を解除しないと、縦積みで中身が余った 660px の箱に伸ばされる */
  .rn-fv__body { flex-basis: auto; height: auto; }
  .rn-fv__copy { padding: 40px 28px 32px; }
  .rn-fv__visual { height: 420px; }
  .rn-fv__script { display: none; }

  .rn-voice__list { grid-template-columns: repeat(2, 1fr); }
  .rn-cert { grid-template-columns: 1fr; gap: 24px; }
  .rn-menu__list, .rn-case__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SP（375 基準）
   ========================================================================== */
@media screen and (max-width: 767px) {
  /* FV — SP は Figma(187:687) の順序: ビジュアル → コピー → タグライン → 実績 → CTA */
  .rn-fv__body { display: contents; }
  .rn-fv { flex-direction: column; }
  .rn-fv__visual { order: 1; height: 311px; }
  .rn-fv__copy { order: 2; padding: 28px 20px 24px; text-align: center; }
  .rn-fv__tagline { order: 3; }
  .rn-stats { order: 4; }
  .rn-fv__cta { order: 5; }

  .rn-pc-br { display: none; }

  .rn-fv__catch { font-size: 30px; line-height: 1.55; letter-spacing: .04em; }
  .rn-fv__sub {
    margin: 16px auto 0;
    font-size: 14px;
    line-height: 1.9;
    text-align: center;   /* 2026-09-16 先方指摘: キャッチと揃えて中央寄せ */
  }

  /* タグライン（横書き） */
  .rn-fv__tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 20px;
    border-top: 1px solid var(--rn-blue-line);
    font-family: var(--rn-cond);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .1em;
    color: var(--rn-blue);
  }
  .rn-fv__tagline span { display: block; width: 56px; height: 1px; background: var(--rn-blue-line); }

  /* 実績は横 3 列（アイコン上・中央揃え） */
  .rn-stats { flex-basis: auto; grid-template-columns: repeat(3, 1fr); }
  .rn-stats__item {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    text-align: center;
  }
  .rn-stats__item:first-child { padding-left: 6px; }
  .rn-stats__icon { width: 28px; height: 28px; }
  .rn-stats__text { align-items: center; gap: 2px; }
  .rn-stats__label { font-size: 13px; }
  .rn-stats__value { font-size: 20px; gap: 2px; justify-content: center; }
  .rn-stats__unit { font-size: 13px; }
  .rn-stats__value--sm { font-size: 15px; }

  .rn-fv__cta { flex-basis: auto; height: 72px; padding: 0 16px; gap: 10px; justify-content: center; }
  .rn-fv__badge { position: static; transform: none; width: 96px; height: 32px; font-size: 12px; flex: none; }
  .rn-fv__cta .rn-cal { margin-left: 0; width: 24px; height: 22px; }
  .rn-fv__cta-text { font-size: 15px; }
  .rn-fv__cta .rn-arrow { margin-left: 8px; }

  .rn-fv__tag { flex-basis: 56px; font-size: 15px; }

  /* CONSEPT */
  .rn-concept__movie { padding: 0 20px 40px; }
  .rn-concept__script { width: 200px; margin-top: 32px; }

  /* VOICE */
  .rn-voice { padding: 0 0 40px; }
  .rn-voice__head { flex-direction: column; padding-top: 40px; }
  .rn-voice__list { grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
  .rn-voice__item { padding: 16px; gap: 14px; }
  .rn-voice__photo { flex-basis: 100px; }
  .rn-voice__photo img { width: 100px; height: 134px; }
  .rn-voice__name { font-size: 15px; margin-bottom: 10px; }
  .rn-voice__text { font-size: 13px; }

  /* REASON */

  /* MENU */
  .rn-menu { padding: 40px 0; }
  .rn-menu .rn-sec-head { flex-direction: column; align-items: stretch; }
  .rn-menu__btn { width: 100%; margin: 20px 0 0; }
  .rn-menu__list { gap: 16px; margin-top: 24px; }
  .rn-menu__item > a { flex-direction: column; gap: 16px; align-items: stretch; }
  .rn-menu__photo { flex-basis: auto; }
  .rn-menu__photo img { height: 200px; }
  .rn-menu__title { font-size: 20px; }
  .rn-menu__line { margin: 16px 0; }
  .rn-menu__price-label, .rn-menu__price-yen { font-size: 16px; }
  .rn-menu__price-num { font-size: 30px; }

  /* DIFFERENCE */


  /* CASE */

  /* BLOG */
  .rn-blog { padding: 40px 0; }
  .rn-blog .rn-sec-head { flex-direction: column; align-items: stretch; }
  .rn-blog__btn { width: 100%; margin-top: 20px; }

  /* NEWS */
  .rn-news__item > a, .rn-news__item > span { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 0; }
  /* PC の日付カラム幅 flex:0 0 104px が、縦積みでは「高さ 104px」として効いて
     日付とタイトルの間に大きな余白ができるため解除する */
  .rn-news__date { flex: none; }
  .rn-news__date, .rn-news__title { font-size: 14px; }
  .rn-news__foot .rn-btn { width: 100%; }

  /* FAQ */

  /* RECRUIT */
  .rn-recruit__body { gap: 24px; }
  .rn-recruit__text .rn-btn { width: 100%; margin-top: 24px; }
}