/**
 * shared.css — CTA・フッター共通スタイル
 * 全ページに <link rel="stylesheet" href="components/shared.css"> で読み込む
 * recruit.html での調整を一か所にまとめ、全ページに反映させる
 */

/* ── モバイル専用改行（PCでは非表示） ── */
.sp-br { display: none; }
.sp-hide { display: none; }

/* ── ハンバーガーメニュー – サブリンク ── */
.mnl-sm { font-size: 13px; font-weight: 500; color: #595959; padding: 14px 0; }

/* ── ハンバーガーメニュー – 全ページ統一（recruit.html基準） ── */
/* 「理念と文化」見出し（span）はホバーアクションなし */
span.mnl { pointer-events: none; }
span.mnl:hover { color: #384860 !important; }

/* ナビリンク：黄色ホバーに統一 */
.mnl:hover { color: #FFD100 !important; }

/* 募集職種ボタン：黄色背景ホバーに統一 */
.mncta:hover { background: #FFD100 !important; color: #384860 !important; }

/* サブリンク（リベ大MV・リベシティMV・バリュー）：黄色ホバーに統一 */
.mdd a:hover { color: #FFD100 !important; }

/* ══════════════════════════════════════
   ボタンシステム（3種に統一）
   Primary  : 黄色塗り・ダークテキスト
   Secondary: ダークアウトライン・透明bg
   Header   : オレンジ（hcta のみ・変更なし）
   ══════════════════════════════════════ */

/* Primary ボタン（旧 .btn.bf / .btn-y を統合） */
.btn.bf,
.btn-y {
  background: var(--y) !important;
  color: #384860 !important;
  border-color: var(--y) !important;
  box-shadow: 3px 3px 0 rgba(56,72,96,.2) !important;
}
.btn.bf:hover,
.btn-y:hover {
  background: #384860 !important;
  border-color: #384860 !important;
  color: #fff !important;
  transform: translate(-2px,-2px) !important;
  box-shadow: 5px 5px 0 rgba(56,72,96,.2) !important;
}

/* Secondary ボタン（.btn.bo は変更なし） */

/* ミッションカードボタン → アウトライン（Secondary）に統一 */
.mc-btn {
  background: transparent !important;
  color: #384860 !important;
  border: 2px solid #384860 !important;
  box-shadow: none !important;
}
.mc-btn:hover {
  background: #FFD100 !important;
  border-color: #FFD100 !important;
  color: #384860 !important;
  box-shadow: 3px 3px 0 rgba(56,72,96,.15) !important;
}

/* ══════════════════════════════════════
   シャドウ統一（ぼかし系 → フラット系）
   ナビピル・ボタンのぼかし shadow を除去
   ══════════════════════════════════════ */
.hnav { box-shadow: 3px 3px 0 rgba(56,72,96,.15) !important; }
.hcta { box-shadow: 3px 3px 0 rgba(255,107,0,.35) !important; }

/* ══════════════════════════════════════
   MV世界観の継続（recruit.html）
   .hov は直接 recruit.html の CSS を編集して対応
   （モバイルのメディアクエリ上書きがあるため shared.css では管理しない）
   ══════════════════════════════════════ */

/* ══════════════════════════════════════
   スクロールアニメーション削減
   本文テキスト・ボタン行・サブナビは即表示
   見出し・カード・写真など主要要素のみ残す
   ══════════════════════════════════════ */

/* 本文段落（各ページのコンテンツエリア）
   ヒーロー字幕 .phero-jp は除外して見出しとセットで見せる */
.sbody.rv,    .sbody.rv2,    .sbody.rv3,
.sec-body.rv, .sec-body.rv2, .sec-body.rv3,
.tbody.rv,    .tbody.rv2,    .tbody.rv3,
.msub.rv,     .msub.rv2,     .msub.rv3,
.mission-lead.rv, .mission-lead.rv2, .mission-lead.rv3,
.lc-lead.rv,  .lc-lead.rv2,  .lc-lead.rv3,
.rb-lead.rv,  .rb-lead.rv2,  .rb-lead.rv3,
.al-body.rv,  .al-body.rv2,  .al-body.rv3 {
  opacity: 1 !important;
  transform: none !important;
}

/* ボタン単体（a要素） */
a.btn.rv, a.btn.rv2, a.btn.rv3,
a.btn-y.rv, a.btn-y.rv2, a.btn-y.rv3 {
  opacity: 1 !important;
  transform: none !important;
}

/* ボタン行コンテナ・ナビゲーション */
.btn-row.rv,  .btn-row.rv2,  .btn-row.rv3,
.tbtnrow.rv,  .tbtnrow.rv2,  .tbtnrow.rv3,
.vbtn-row.rv, .vbtn-row.rv2, .vbtn-row.rv3,
.phero-nav.rv,.phero-nav.rv2,.phero-nav.rv3,
.pnav-lead.rv,.pnav-lead.rv2,.pnav-lead.rv3,
.pnav-grid.rv,.pnav-grid.rv2,.pnav-grid.rv3,
.sns-row.rv,  .sns-row.rv2,  .sns-row.rv3,
.flist.rv,    .flist.rv2,    .flist.rv3,
.ogrid.rv,    .ogrid.rv2,    .ogrid.rv3 {
  opacity: 1 !important;
  transform: none !important;
}

/* ══════════════════════════════════════
   デザイン言語統一
   ══════════════════════════════════════ */

/* body テキストカラー統一（全ページ） */
body { color: var(--dk, #384860); }

/* カード・ボックスのシャドウ：各ページのカードはすでにフラット済み。
   ぼかし shadow を持っていたのは .video-wrap のみで個別ファイルで対処済み。 */

/* ── CTA ── */
#cta { padding: 120px 0 80px; }

/* ── フッター ── */
.fsep { /* PC では表示 */ }

/* ── タブレット（601px〜860px）── */
@media (min-width: 601px) and (max-width: 860px) {

  /* 余白をPC寄りに */
  .wrap { padding: 0 40px; }

  /* フッター：上段=会社情報(全幅) / 下段=ナビ左・理念右 */
  .fgrid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 40px !important; }
  .fgrid > div:first-child { grid-column: 1 / -1; }
  .fbot { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; text-align: left !important; }
  .fcp { white-space: nowrap; }

  /* CTA：キャラはPC比率を維持しつつ縮小 */
  .cchars .cc img     { height: 130px !important; }
  .cchars .cc:nth-child(2) img { height: 112px !important; }
  .cchars .cc:nth-child(3) img { height: 190px !important; }
  .cchars .cc:nth-child(4) img { height: 130px !important; }
  .cchars .cc:nth-child(5) img { height: 130px !important; }
}

/* ── 860px以下（スマホ・タブレット） ── */
@media (max-width: 860px) {
  .sp-br  { display: block; }
  .sp-hide{ display: none; }

  /* CTA */
  #cta { padding: 72px 0; }
  .cbtn { padding: 16px 36px; font-size: 16px; }
  .cchars { margin-top: 32px; }
  .cchars .cc img { height: 140px; }
  .cchars .cc:nth-child(3) img { height: 140px !important; }

  /* フッター */
  .fgrid { grid-template-columns: 1fr; gap: 28px; }
  .fbot  { flex-direction: column; gap: 10px; text-align: center; }
  .fbot .fcp { margin-top: 12px; }
  .fsep  { display: none; }
}

/* ── 480px以下（小型スマホ） ── */
@media (max-width: 480px) {
  /* CTA */
  .cchars { gap: 4px; }
  .cchars .cc img { height: 120px !important; }
  .cbtn { padding: 14px 28px; font-size: 15px; }

  /* フッター */
  footer { padding: 48px 0 32px; }
}