/*
 * 住まキャリ 履歴書メーカー — rirekisho.css
 * 配置: /wp-content/themes/swell-child/househr/rirekisho/rirekisho.css
 */

/* =========================================================
   リセット・基本
========================================================= */
.rirekisho-page {
  font-family: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif;
  color: #1a1a1a;
  background: #f5f5f2;
  overflow-x: hidden;
}

.rirekisho-page * { box-sizing: border-box; }

/* =========================================================
   ヘッダー
========================================================= */
.rr-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 2px solid #e85a2f;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.rr-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rr-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}
.rr-header__badge {
  background: #e85a2f;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .05em;
}

/* =========================================================
   FV
========================================================= */
/* =========================================================
   ファーストビュー（FV）
========================================================= */
.rr-fv {
  background: linear-gradient(150deg, #0f2540 0%, #1a3a5c 50%, #243f6e 100%);
  color: #fff;
  text-align: center;
  padding: 72px 20px 60px;
  position: relative;
  overflow: hidden;
}
.rr-fv__bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,90,47,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(45,89,134,.3) 0%, transparent 50%);
  pointer-events: none;
}
.rr-fv__inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.rr-fv__eyebrow { margin-bottom: 16px; }
.rr-fv__badge {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 5px 16px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.rr-fv__title {
  font-size: clamp(28px, 5.5vw, 48px);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -.01em;
}
.rr-fv__title em {
  font-style: normal;
  color: #ffd460;
  position: relative;
}
.rr-fv__lead {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
  opacity: .9;
}
.rr-fv__lead strong { color: #ffd460; font-weight: 700; }
.rr-fv__cta { margin-bottom: 36px; }

/* 信頼バッジ */
.rr-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}
.rr-trust-badge {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
}

/* 使い方3ステップ */
.rr-howto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.rr-howto__step {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 20px 24px;
  width: 160px;
  text-align: center;
  transition: background .2s;
}
.rr-howto__step:hover { background: rgba(255,255,255,.14); }
.rr-howto__icon { font-size: 28px; margin-bottom: 6px; }
.rr-howto__num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #ffd460;
  margin-bottom: 4px;
}
.rr-howto__title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.rr-howto__desc { font-size: 11px; opacity: .75; line-height: 1.5; }
.rr-howto__arrow { font-size: 22px; opacity: .5; flex-shrink: 0; }

/* =========================================================
   ポイントセクション
========================================================= */
.rr-points {
  background: #f7f9fc;
  padding: 64px 20px;
  border-bottom: 1px solid #e8ecf0;
}
.rr-points__inner { max-width: 900px; margin: 0 auto; }
.rr-points__title {
  text-align: center;
  font-size: clamp(18px, 3vw, 26px);
  font-weight: 900;
  color: #1a3350;
  margin-bottom: 8px;
}
.rr-points__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.rr-point-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid #edf0f4;
  transition: transform .2s, box-shadow .2s;
}
.rr-point-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
}
.rr-point-card__icon { font-size: 36px; margin-bottom: 12px; }
.rr-point-card__title {
  font-size: 14px;
  font-weight: 700;
  color: #1a3350;
  margin-bottom: 8px;
}
.rr-point-card__desc {
  font-size: 12px;
  color: #666;
  line-height: 1.7;
}

/* =========================================================
   職種テンプレート選択
========================================================= */

.rr-templates {
  padding: 48px 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.rr-section-title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 32px;
}
.rr-section-title::before { content: ''; }

.rr-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.rr-job-card {
  background: #fff;
  border: 2px solid #e8ecf0;
  border-radius: 16px;
  padding: 24px 12px 20px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.rr-job-card:hover {
  border-color: #e85a2f;
  box-shadow: 0 4px 20px rgba(232,90,47,.18);
  transform: translateY(-3px);
}
.rr-job-card.is-selected {
  border-color: #e85a2f;
  background: #fff7f4;
  box-shadow: 0 4px 20px rgba(232,90,47,.18);
}
.rr-job-card__icon { font-size: 34px; }
.rr-job-card__label { font-size: 13px; font-weight: 800; color: #1a3350; }
.rr-job-card__cat {
  font-size: 10px;
  color: #fff;
  background: #2d5986;
  padding: 2px 8px;
  border-radius: 10px;
}

/* =========================================================
   ビルダー
========================================================= */
.rr-builder {
  padding: 0 20px 60px;
}
.rr-builder__inner {
  max-width: 800px;
  margin: 0 auto;
}
.rr-builder__job-badge {
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #555;
}
.rr-builder__job-badge { font-weight: bold; }

/* ステッパー */
.rr-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 20px 0 28px;
  flex-wrap: wrap;
}
.rr-stepper__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: default;
  opacity: .4;
  transition: .2s;
  font-size: 13px;
}
.rr-stepper__item.is-active {
  opacity: 1;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.rr-stepper__item.is-done {
  opacity: .7;
  cursor: pointer;
}
.rr-stepper__num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.rr-stepper__item.is-active .rr-stepper__num { background: #e85a2f; }
.rr-stepper__item.is-done .rr-stepper__num { background: #4caf50; }
.rr-stepper__lbl { font-size: 12px; }

/* ビルダー本体レイアウト */
.rr-builder__body {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 860px) {
  .rr-builder__body {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   フォームパネル
========================================================= */
.rr-form-pane {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  padding: 32px;
}

.rr-step__title {
  font-size: 18px;
  font-weight: bold;
  color: #1a3350;
  margin-bottom: 4px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e85a2f;
  margin-bottom: 24px;
}
.rr-step__desc { font-size: 13px; color: #666; margin-bottom: 16px; }

/* フィールド */
.rr-field { margin-bottom: 18px; }
.rr-field-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.rr-field-row--wrap { flex-wrap: wrap; }
.rr-field--half { flex: 1 1 calc(50% - 6px); min-width: 140px; }
.rr-field--third { flex: 1 1 calc(33% - 8px); min-width: 100px; }
.rr-field--quarter { flex: 1 1 calc(25% - 9px); min-width: 80px; }

.rr-label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #444;
  margin-bottom: 6px;
}
.rr-label--req::after {
  content: '必須';
  background: #e85a2f;
  color: #fff;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: normal;
}

.rr-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color .2s;
  font-family: inherit;
}
.rr-input:focus { outline: none; border-color: #2d5986; }
.rr-input.is-error { border-color: #e85a2f; }
.rr-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; padding-right: 28px; }

.rr-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  transition: border-color .2s;
}
.rr-textarea:focus { outline: none; border-color: #2d5986; }

.rr-hint { font-size: 11px; color: #888; margin-top: 4px; }
.rr-charcount { text-align: right; font-size: 12px; color: #888; margin-top: 4px; }

/* ラジオ・チェックボックス */
.rr-radio-group { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 0; }
.rr-radio-group.is-error .rr-radio { color: #e85a2f; }
.rr-radio { display: flex; align-items: center; gap: 5px; font-size: 14px; cursor: pointer; }
.rr-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.rr-checkbox { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.rr-checkbox--block { display: flex; width: 100%; padding: 10px; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 8px; }
.rr-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: #e85a2f; }

/* 履歴行・キャリアブロック */
.rr-history-row { margin-bottom: 12px; }
.rr-career-block {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.rr-career-block__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.rr-row-with-del { display: flex; gap: 8px; }
.rr-add-btn {
  width: 100%;
  padding: 10px;
  background: #f5f5f2;
  border: 2px dashed #ccc;
  border-radius: 8px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: .2s;
  margin-top: 8px;
}
.rr-add-btn:hover { border-color: #2d5986; color: #2d5986; background: #eef3f8; }
.rr-del-btn {
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  color: #e85a2f;
  cursor: pointer;
  white-space: nowrap;
}
.rr-del-btn:hover { background: #fff7f4; }

/* 職種別追加フィールド */
.rr-job-extra__heading {
  font-size: 12px;
  font-weight: bold;
  color: #2d5986;
  background: #eef3f8;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
  margin-top: 8px;
}
.rr-input-wrap { display: flex; align-items: center; gap: 6px; }
.rr-input-suffix { font-size: 13px; white-space: nowrap; color: #666; }

/* AI ボタン */
.rr-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #f0f7ff;
  border: 1.5px solid #2d5986;
  border-radius: 8px;
  font-size: 13px;
  color: #2d5986;
  cursor: pointer;
  transition: .2s;
  margin-top: 8px;
}
.rr-ai-btn:hover { background: #2d5986; color: #fff; }

/* 同意エリア */
.rr-consent { margin-top: 20px; }

/* カード */
.rr-card { border: 1.5px solid #ddd; border-radius: 10px; padding: 16px; }
.rr-card--accent { border-color: #2d5986; background: #f8fafd; }
.rr-card__head { font-size: 13px; font-weight: bold; margin-bottom: 12px; }

/* ナビゲーション */
.rr-nav {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

/* =========================================================
   プレビューパネル
========================================================= */
.rr-preview-pane {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  position: sticky;
  top: 80px;
}
.rr-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}
.rr-preview-header__title { font-size: 12px; color: #888; margin-right: auto; }
.rr-preview-tab {
  padding: 6px 14px;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  background: none;
  font-size: 12px;
  cursor: pointer;
}
.rr-preview-tab.is-active {
  background: #2d5986;
  color: #fff;
  border-color: #2d5986;
}
.rr-preview-body { padding: 16px; overflow-y: auto; max-height: 70vh; }

/* 履歴書プレビュー */
.rr-doc {
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  font-size: 11px;
  line-height: 1.5;
}
.rr-doc__title {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 12px;
  letter-spacing: .2em;
}
.rr-doc__section {
  font-size: 12px;
  font-weight: bold;
  margin: 12px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ccc;
}
.rr-doc__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
  font-size: 10px;
}
.rr-doc__table td { border: 1px solid #999; padding: 4px 6px; vertical-align: top; }
.rr-doc__label { background: #f5f5f5; font-weight: bold; white-space: nowrap; }
.rr-doc__label--v { width: 16px; writing-mode: vertical-rl; text-align: center; font-weight: bold; background: #f5f5f5; }
.rr-doc__value--name { font-size: 13px; font-weight: bold; }
.rr-doc__value--pr { min-height: 60px; white-space: pre-wrap; }
.rr-doc__photo { background: #f5f5f5; text-align: center; width: 80px; min-height: 80px; color: #999; font-size: 10px; vertical-align: middle; }
.rr-doc__section-head { font-weight: bold; text-align: center; background: #f5f5f5; }
.rr-doc__hint { color: #bbb; font-style: italic; }
.rr-doc__text { white-space: pre-wrap; font-size: 10px; line-height: 1.6; }
.rr-doc__pre { white-space: pre-wrap; font-size: 10px; line-height: 1.6; margin: 4px 0 0; font-family: inherit; }
.rr-doc__career-item { margin-bottom: 12px; }
.rr-doc__footer { text-align: right; font-size: 9px; color: #bbb; margin-top: 12px; }

/* =========================================================
   モーダル
========================================================= */
.rr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
}
.rr-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
}
.rr-modal__box {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
}
.rr-modal__icon { font-size: 48px; margin-bottom: 12px; }
.rr-modal__title { font-size: 20px; font-weight: bold; margin-bottom: 24px; }
.rr-modal__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.rr-modal__share { margin-bottom: 20px; }
.rr-modal__share-label { font-size: 12px; color: #666; margin-bottom: 8px; }
.rr-share-row { display: flex; gap: 8px; }
.rr-share-row .rr-input { font-size: 12px; }
.rr-modal__agent { margin-bottom: 24px; }
.rr-agent-card {
  background: #fff7f4;
  border: 2px solid #e85a2f;
  border-radius: 12px;
  padding: 20px;
}
.rr-agent-card__head { font-weight: bold; font-size: 15px; margin-bottom: 8px; }
.rr-agent-card__body { font-size: 13px; color: #555; line-height: 1.6; margin-bottom: 16px; }
.rr-modal__close {
  background: none;
  border: 1px solid #ddd;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #888;
}

/* =========================================================
   ローディング
========================================================= */
.rr-loading {
  position: fixed; inset: 0;
  background: rgba(255,255,255,.85);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-loading__inner { text-align: center; }
.rr-loading__spinner {
  width: 48px; height: 48px;
  border: 4px solid #eee;
  border-top-color: #e85a2f;
  border-radius: 50%;
  animation: rr-spin .8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes rr-spin { to { transform: rotate(360deg); } }

/* =========================================================
   下書き復元通知
========================================================= */
.rr-draft-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  text-align: center;
  margin-bottom: 16px;
  max-width: 1200px;
  margin-left: auto; margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media (max-width: 600px) {
  .rr-fv { padding: 40px 16px 36px; }
  .rr-form-pane { padding: 20px 16px; }
  .rr-nav { flex-direction: column-reverse; }
  .rr-nav .rr-btn { width: 100%; }
  .rr-preview-pane { display: none; } /* SPではプレビュー非表示（保存時にメール等で確認） */
  .rr-modal__box { padding: 24px 16px; }
  .rr-stepper__lbl { display: none; }
  .rr-job-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   在籍期間（入社〜退社）
========================================================= */
.rr-field-row--period {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.rr-period-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rr-period-label {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  min-width: 28px;
}
.rr-period-sep {
  font-size: 18px;
  color: #999;
  padding: 0 4px;
}
.rr-input--year {
  width: 80px !important;
  text-align: center;
}
.rr-career-current {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  padding: 4px 10px;
  background: #f0f4ff;
  border: 1px solid #c3d0f0;
  border-radius: 6px;
}
.rr-career-current input { margin: 0; cursor: pointer; }

/* =========================================================
   数値実績セクション（折りたたみ）
========================================================= */
.rr-kpi-section,
.rr-gap-section {
  margin-top: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.rr-kpi-toggle,
.rr-gap-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f8f9fa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  list-style: none;
  user-select: none;
}
.rr-kpi-toggle:hover,
.rr-gap-toggle:hover { background: #f0f2f5; }
details[open] .rr-kpi-toggle,
details[open] .rr-gap-toggle { background: #e8f0fe; color: #1a4c9e; }
.rr-kpi-body,
.rr-gap-body {
  padding: 16px;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}
.rr-gap-note {
  font-size: 12px;
  color: #666;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #fffbe6;
  border-left: 3px solid #f0a020;
  border-radius: 0 4px 4px 0;
}
.rr-input-unit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rr-input-unit input { flex: 1; }
.rr-input-unit span {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
}
.rr-hint-inline {
  font-size: 12px;
  color: #888;
  font-weight: 400;
  margin-left: 4px;
}

/* =========================================================
   学歴年月ヒント
========================================================= */
.rr-edu-hint {
  background: #f0f6ff;
  border: 1px solid #b3d0ff;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0 16px;
  font-size: 13px;
}
.rr-edu-hint-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 8px;
}
.rr-edu-hint-tbl th,
.rr-edu-hint-tbl td {
  padding: 5px 10px;
  border: 1px solid #c8deff;
  font-size: 13px;
}
.rr-edu-hint-tbl th {
  background: #daeaff;
  font-weight: 600;
}
.rr-edu-hint-tbl strong {
  color: #1a4c9e;
  cursor: pointer;
  border-bottom: 1px dashed #1a4c9e;
}
.rr-edu-hint-tbl strong:hover { background: #d0e0ff; border-radius: 2px; }
.rr-input--auto { background: #e8f0fe !important; }

/* =========================================================
   証明写真セクション
========================================================= */
.rr-photo-section {
  margin-top: 20px;
}
.rr-photo-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.rr-photo-tab {
  padding: 6px 14px;
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f5f5f5;
  cursor: pointer;
  color: #555;
  transition: all .2s;
}
.rr-photo-tab.is-active {
  background: #e85a2f;
  color: #fff;
  border-color: #e85a2f;
}
.rr-file-input { display: none; }
.rr-file-label {
  display: block;
  padding: 12px 16px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  transition: border-color .2s;
}
.rr-file-label:hover { border-color: #e85a2f; color: #e85a2f; }
.rr-photo-preview {
  margin-top: 10px;
  text-align: center;
}
.rr-photo-preview img {
  max-width: 120px;
  max-height: 160px;
  border: 2px solid #ddd;
  border-radius: 4px;
  object-fit: cover;
}
.rr-link-accent {
  color: #e85a2f;
  font-size: 12px;
  text-decoration: none;
}
.rr-link-accent:hover { text-decoration: underline; }

/* =========================================================
   同意チェックボックス 改善
========================================================= */
.rr-consent {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rr-checkbox--required {
  border: 1px solid #f0d0d0;
  background: #fff5f5;
  border-radius: 8px;
  padding: 12px 14px !important;
}
.rr-checkbox--required.is-error {
  border-color: #e85a2f;
  box-shadow: 0 0 0 3px rgba(232,90,47,.15);
}
.rr-req-badge {
  display: inline-block;
  background: #e85a2f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin: 0 4px;
}
.rr-opt-badge {
  display: inline-block;
  background: #888;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin: 0 4px;
}
.rr-consent-optional-wrap {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px 14px;
  background: #fafafa;
}
.rr-checkbox--sub {
  margin-left: 16px;
}
.rr-consent-desc {
  font-size: 12px;
  color: #777;
  margin: 6px 0 0 28px;
  line-height: 1.6;
}
.rr-consent-desc--sub { margin-left: 44px; }

/* プレビュー退社表示 */
.rr-preview-end { color: #888; font-size: 12px; }
.rr-preview__period { font-size: 12px; color: #888; margin-left: 6px; }
.rr-preview__desc { font-size: 12px; color: #555; margin: 4px 0 0; white-space: pre-wrap; }

@media (max-width: 600px) {
  .rr-field-row--period { flex-direction: column; align-items: flex-start; }
  .rr-period-group { gap: 4px; }
  .rr-photo-tabs { flex-wrap: wrap; }
  .rr-kpi-body .rr-field-row { flex-direction: column; }
}

/* =========================================================
   完成度メーター
========================================================= */
.rr-meter {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.rr-meter__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.rr-meter__label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
}
.rr-meter__pct {
  font-size: 22px;
  font-weight: 800;
  color: #e85a2f;
  line-height: 1;
}
.rr-meter__bar {
  height: 10px;
  background: #eee;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}
.rr-meter__fill {
  height: 100%;
  border-radius: 5px;
  transition: width .4s ease, background-color .4s;
  background: #ccc;
}
.rr-meter__fill--low  { background: #f87171; }
.rr-meter__fill--mid  { background: #fbbf24; }
.rr-meter__fill--high { background: #34d399; }
.rr-meter__missing {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
}
.rr-missing-tag {
  background: #fee2e2;
  color: #b91c1c;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
}
.rr-meter__complete {
  color: #059669;
  font-weight: 700;
  font-size: 13px;
}

/* =========================================================
   強み選択チップ
========================================================= */
.rr-strength-box {
  background: #f8f9ff;
  border: 1px solid #d0d8f0;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 12px;
}
.rr-strength-box__title {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px;
}
.rr-strength-box__hint {
  font-size: 12px;
  color: #888;
  margin: 0 0 10px;
}
.rr-strength-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.rr-strength-chip {
  padding: 6px 14px;
  border: 1px solid #b0bce0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: #3a5a9e;
  cursor: pointer;
  transition: all .2s;
  user-select: none;
}
.rr-strength-chip:hover {
  background: #e8eeff;
  border-color: #7090d0;
}
.rr-strength-chip.is-selected {
  background: #3a5a9e;
  color: #fff;
  border-color: #3a5a9e;
  font-weight: 600;
}

/* =========================================================
   空白期間アラート
========================================================= */
.rr-gap-section--alert {
  border-color: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}
.rr-gap-section--alert .rr-gap-toggle {
  background: #fff7ed;
  color: #c2410c;
}

/* =========================================================
   プロフィールカード（モーダル内）
========================================================= */
.rr-profile-card {
  background: linear-gradient(135deg, #1a3a6e 0%, #2d5a9e 100%);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 20px 0;
  color: #fff;
}
.rr-profile-card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  margin: 0 0 12px;
  opacity: .85;
}
.rr-profile-card__body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.rr-kv {
  background: rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 10px 12px;
}
.rr-kv__label {
  display: block;
  font-size: 11px;
  opacity: .75;
  margin-bottom: 3px;
}
.rr-kv__value {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

@media (max-width: 600px) {
  .rr-profile-card__body { grid-template-columns: 1fr 1fr; }
  .rr-strength-chips { gap: 6px; }
}

/* =========================================================
   出力フォーマット選択
========================================================= */
.rr-format-select {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}
.rr-format-select__label {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  margin: 0 0 10px;
}
.rr-format-options {
  display: flex;
  gap: 10px;
}
.rr-format-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 2px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  transition: all .2s;
  text-align: center;
}
.rr-format-option input[type="radio"] { display: none; }
.rr-format-option:has(input:checked) {
  border-color: #e85a2f;
  background: #fff5f2;
  box-shadow: 0 0 0 3px rgba(232,90,47,.15);
}
.rr-format-icon  { font-size: 24px; line-height: 1; }
.rr-format-name  { font-size: 13px; font-weight: 700; color: #333; }
.rr-format-hint  { font-size: 11px; color: #888; }

@media (max-width: 480px) {
  .rr-format-options { flex-direction: column; }
}

/* =========================================================
   資格行（選択式）
========================================================= */
.rr-license-add-row {
  margin-bottom: 16px;
}
.rr-license-add-row .rr-select {
  max-width: 400px;
}
.rr-lic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fafafa;
  flex-wrap: wrap;
}
.rr-lic-row__name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}
.rr-lic-label {
  font-weight: 600;
  font-size: 13px;
  color: #333;
  white-space: nowrap;
}
.rr-lic-row__date {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
  color: #555;
}
.rr-input--toeic { width: 100px !important; }

/* プレビューセクション（タブなし両方表示） */
.rr-preview-section {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}
.rr-preview-section__head {
  background: #f5f5f5;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #444;
  border-bottom: 1px solid #e0e0e0;
}
.rr-preview { padding: 12px; }

/* 職務経歴書プレビューのKPI */
.rr-preview__kpi {
  display: inline-block;
  font-size: 11px;
  background: #e8f4fd;
  color: #1a6496;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 6px;
}

/* 強みチップ - クリック可能に修正 */
.rr-strength-chip {
  padding: 6px 14px;
  border: 1.5px solid #b0bce0;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  color: #3a5a9e;
  cursor: pointer !important;
  transition: all .15s;
  user-select: none;
  pointer-events: auto !important;
}
.rr-strength-chip:hover {
  background: #e8eeff;
  border-color: #7090d0;
  transform: translateY(-1px);
}
.rr-strength-chip.is-selected {
  background: #3a5a9e !important;
  color: #fff !important;
  border-color: #3a5a9e !important;
  font-weight: 700;
}

/* =========================================================
   flatpickr 日付ピッカー調整
========================================================= */
.rr-input--datepicker {
  cursor: pointer !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 18px;
  padding-right: 36px !important;
}
.flatpickr-calendar {
  font-family: 'メイリオ', sans-serif !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.2) !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
  background: #e85a2f !important;
  border-color: #e85a2f !important;
}

/* =========================================================
   シングルカラムレイアウト（プレビュー廃止後）
========================================================= */

/* グリッドを解除 — 単一カラムに */
.rr-builder__body--single {
  display: block !important;
}
.rr-builder__body--single .rr-preview-pane {
  display: none !important;
}
.rr-builder__body--single .rr-form-pane {
  width: 100%;
  box-sizing: border-box;
}

/* 完成度メーター — フォームカード上部に横並びで表示 */
.rr-builder__body--single > .rr-form-pane > .rr-meter,
.rr-form-pane > .rr-meter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 16px;
  background: #f8f9fa;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 14px 20px;
  margin: 0 0 24px;
  box-shadow: none;
}
.rr-form-pane > .rr-meter .rr-meter__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.rr-form-pane > .rr-meter .rr-meter__bar {
  flex: 1;
  min-width: 160px;
  margin-bottom: 0;
}
.rr-form-pane > .rr-meter .rr-meter__missing {
  flex-basis: 100%;
  margin-top: 8px;
}

/* =========================================================
   商品・物件チップ（職歴入力内）
========================================================= */
.rr-product-field {
  margin-bottom: 12px;
}
.rr-product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rr-chip {
  display: inline-block !important;
  padding: 5px 14px !important;
  border: 1.5px solid #ccc !important;
  border-radius: 20px !important;
  background: #fff !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  color: #555 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.rr-chip:hover {
  border-color: #e85a2f !important;
  color: #e85a2f !important;
  background: #fff !important;
}
.rr-chip.is-active {
  background: #e85a2f !important;
  border-color: #e85a2f !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.rr-product-free {
  font-size: 13px;
}

/* STEP5 自動生成ボタン強調 */
#js-auto-summary.rr-btn--accent {
  background: #e85a2f;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s;
}
#js-auto-summary.rr-btn--accent:hover { opacity: .85; }

/* =========================================================
   レスポンシブ補完（FV・ポイント）
========================================================= */
@media (max-width: 860px) {
  .rr-howto { gap: 8px; }
  .rr-howto__step { width: 130px; padding: 16px 12px; }
  .rr-howto__arrow { display: none; }
  .rr-points__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .rr-fv { padding: 48px 16px 40px; }
  .rr-howto { flex-direction: column; align-items: stretch; }
  .rr-howto__step { width: auto; }
  .rr-howto__arrow { display: none; }
  .rr-points__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rr-point-card { padding: 20px 14px; }
  .rr-trust-badges { gap: 6px; }
  .rr-trust-badge { font-size: 11px; }
}

/* =========================================================
   ★ デザインリニューアル v2 — 明るい・動的・親しみやすい
   2026-03 追加オーバーライド
========================================================= */

/* --- カラー変数 --- */
:root {
  --rr2-orange:  #F97316;
  --rr2-orange2: #FB923C;
  --rr2-blue:    #0EA5E9;
  --rr2-blue2:   #38BDF8;
  --rr2-green:   #22C55E;
  --rr2-purple:  #8B5CF6;
  --rr2-amber:   #F59E0B;
  --rr2-bg:      #FFFBF7;
  --rr2-text:    #1E293B;
}

/* =========================================================
   全体背景
========================================================= */
.rirekisho-page {
  background: var(--rr2-bg) !important;
}

/* =========================================================
   ヘッダー — 明るく
========================================================= */
.rr-header {
  border-bottom: 3px solid var(--rr2-orange) !important;
  background: #fff !important;
}
.rr-header__badge {
  background: linear-gradient(135deg, var(--rr2-orange), var(--rr2-orange2)) !important;
  font-size: 12px !important;
  padding: 4px 14px !important;
}

/* =========================================================
   FV — 明るい2カラムデザイン
========================================================= */
.rr-fv {
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 25%, #EFF6FF 65%, #F0FDF4 100%) !important;
  color: var(--rr2-text) !important;
  padding: 64px 24px 56px !important;
  position: relative;
  overflow: hidden;
}

/* 背景ブロブ */
.rr-fv__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: .45;
}
.rr-fv__blob--1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #FED7AA, transparent);
  top: -100px; left: -80px;
}
.rr-fv__blob--2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #BAE6FD, transparent);
  bottom: -80px; right: -60px;
}
.rr-fv__blob--3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, #D9F99D, transparent);
  top: 40%; left: 40%;
}

/* 内側レイアウト */
.rr-fv__inner {
  max-width: 1080px !important;
  position: relative;
  z-index: 1;
}

/* 2カラム分割 */
.rr-fv__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 56px;
}
@media (max-width: 860px) {
  .rr-fv__split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .rr-fv__visual { order: -1; }
}

/* 左テキスト */
.rr-fv__text { text-align: left; }

.rr-fv__eyebrow { margin-bottom: 16px; }
.rr-fv__badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--rr2-orange), var(--rr2-orange2)) !important;
  color: #fff !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700;
  padding: 6px 18px !important;
  border-radius: 30px !important;
  letter-spacing: .06em;
  box-shadow: 0 4px 12px rgba(249,115,22,.35);
  animation: rr2-badge-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}

.rr-fv__title {
  font-size: clamp(30px, 5vw, 52px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: var(--rr2-text) !important;
  margin-bottom: 16px;
  animation: rr2-slide-up .7s .1s ease both;
}
.rr-fv__em {
  font-style: normal !important;
  background: linear-gradient(90deg, var(--rr2-orange), var(--rr2-amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rr-fv__title-sub {
  font-size: .65em;
  color: var(--rr2-blue);
  display: block;
  -webkit-text-fill-color: var(--rr2-blue);
}

.rr-fv__lead {
  font-size: 15px !important;
  color: #475569 !important;
  line-height: 1.9 !important;
  margin-bottom: 24px !important;
  opacity: 1 !important;
  animation: rr2-slide-up .7s .2s ease both;
}
.rr-fv__lead strong { color: var(--rr2-orange) !important; }

/* 信頼バッジ */
.rr-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
  justify-content: flex-start !important;
  animation: rr2-slide-up .7s .3s ease both;
}
.rr-trust-badge {
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 30px !important;
  border: none !important;
  color: #fff !important;
  background: none !important;
}
.rr-trust-badge--green  { background: linear-gradient(135deg, #22C55E, #16A34A) !important; box-shadow: 0 2px 8px rgba(34,197,94,.3); }
.rr-trust-badge--blue   { background: linear-gradient(135deg, #0EA5E9, #0284C7) !important; box-shadow: 0 2px 8px rgba(14,165,233,.3); }
.rr-trust-badge--orange { background: linear-gradient(135deg, #F97316, #EA580C) !important; box-shadow: 0 2px 8px rgba(249,115,22,.3); }
.rr-trust-badge--purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important; box-shadow: 0 2px 8px rgba(139,92,246,.3); }

/* CTAボタン */
.rr-fv__actions {
  animation: rr2-slide-up .7s .4s ease both;
}
.rr-btn--primary {
  background: linear-gradient(135deg, var(--rr2-orange), var(--rr2-amber)) !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 36px !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  border-radius: 50px !important;
  box-shadow: 0 6px 24px rgba(249,115,22,.45) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .2s, box-shadow .2s !important;
  position: relative;
  overflow: hidden;
}
.rr-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-100%);
  transition: transform .5s;
}
.rr-btn--primary:hover::after { transform: translateX(100%); }
.rr-btn--primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 10px 36px rgba(249,115,22,.55) !important;
}
.rr-btn__icon { font-size: 20px; }
.rr-btn__arrow { font-size: 18px; transition: transform .2s; }
.rr-btn--primary:hover .rr-btn__arrow { transform: translateX(4px); }

.rr-fv__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #94A3B8;
  text-align: center;
}

/* =========================================================
   右側ビジュアル
========================================================= */
.rr-fv__visual {
  position: relative;
}
.rr-fv__illust-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rr-fv__illust {
  width: 100%;
  max-width: 420px;
  height: auto;
  animation: rr2-float 4s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(14,165,233,.15));
}

/* フローティングバッジ */
.rr-float-badge {
  position: absolute;
  background: #fff;
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 2;
}
.rr-float-badge__icon { font-size: 22px; }
.rr-float-badge__title { font-weight: 700; color: var(--rr2-text); font-size: 12px; line-height: 1.3; }
.rr-float-badge__sub   { color: #94A3B8; font-size: 10px; }

.rr-float-badge--1 {
  top: 8%;  left: -10%;
  animation: rr2-float-badge 3s ease-in-out infinite;
}
.rr-float-badge--2 {
  bottom: 28%; right: -8%;
  animation: rr2-float-badge 3.5s .5s ease-in-out infinite;
}
.rr-float-badge--3 {
  bottom: 8%; left: 2%;
  animation: rr2-float-badge 4s 1s ease-in-out infinite;
}
@media (max-width: 860px) {
  .rr-float-badge--1 { left: 0; top: -5%; }
  .rr-float-badge--2 { right: 0; }
  .rr-float-badge--3 { display: none; }
}

/* =========================================================
   使い方3ステップ（HowTo）新デザイン
========================================================= */
.rr-howto {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: #fff;
  border-radius: 24px;
  padding: 28px 32px;
  box-shadow: 0 4px 32px rgba(0,0,0,.07);
  border: 1px solid #F1F5F9;
}
.rr-howto__step {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  width: auto !important;
  flex: 1;
  text-align: center;
  position: relative;
}
.rr-howto__num-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.rr-howto__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0 !important;
  margin-bottom: 0 !important;
}
.rr-howto__step--1 .rr-howto__num { background: linear-gradient(135deg, var(--rr2-orange), var(--rr2-amber)); box-shadow: 0 4px 12px rgba(249,115,22,.4); }
.rr-howto__step--2 .rr-howto__num { background: linear-gradient(135deg, var(--rr2-blue), var(--rr2-blue2)); box-shadow: 0 4px 12px rgba(14,165,233,.4); }
.rr-howto__step--3 .rr-howto__num { background: linear-gradient(135deg, var(--rr2-green), #16A34A); box-shadow: 0 4px 12px rgba(34,197,94,.4); }

.rr-howto__icon { font-size: 28px !important; margin-bottom: 6px !important; }
.rr-howto__title { font-size: 14px !important; font-weight: 800 !important; color: var(--rr2-text) !important; margin-bottom: 4px; }
.rr-howto__desc { font-size: 12px !important; color: #64748B !important; opacity: 1 !important; line-height: 1.6 !important; }
.rr-howto__connector { flex-shrink: 0; opacity: .7; }
.rr-howto__arrow { display: none !important; }

@media (max-width: 640px) {
  .rr-howto {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 20px !important;
  }
  .rr-howto__connector { transform: rotate(90deg); }
  .rr-howto__step { padding: 0 !important; width: 100% !important; display: flex; align-items: center; gap: 16px; text-align: left; }
  .rr-howto__num-wrap { margin-bottom: 0; }
}

/* =========================================================
   ポイントセクション — カラフルカード
========================================================= */
.rr-points {
  background: #fff !important;
  padding: 80px 24px !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.rr-points::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rr2-orange), var(--rr2-blue), var(--rr2-green), var(--rr2-purple));
}
.rr-points__inner { max-width: 1000px !important; margin: 0 auto !important; }
.rr-points__header { text-align: center; margin-bottom: 48px; }
.rr-points__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--rr2-orange);
  background: #FFF7ED;
  padding: 4px 16px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.rr-points__title {
  font-size: clamp(20px, 3.5vw, 30px) !important;
  font-weight: 900 !important;
  color: var(--rr2-text) !important;
  line-height: 1.4 !important;
  margin-bottom: 0 !important;
}

.rr-points__grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  margin-top: 0 !important;
}

.rr-point-card {
  border-radius: 20px !important;
  padding: 32px 24px !important;
  text-align: left !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.06) !important;
  border: 1px solid transparent !important;
  transition: transform .25s, box-shadow .25s !important;
  position: relative;
  overflow: hidden;
}
.rr-point-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 100px; height: 100px;
  border-radius: 50%;
  opacity: .12;
}
.rr-point-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
}

.rr-point-card--orange { background: linear-gradient(145deg, #FFF7ED, #FEF3C7); border-color: #FED7AA !important; }
.rr-point-card--orange::before { background: var(--rr2-orange); }
.rr-point-card--blue   { background: linear-gradient(145deg, #F0F9FF, #E0F2FE); border-color: #BAE6FD !important; }
.rr-point-card--blue::before   { background: var(--rr2-blue); }
.rr-point-card--green  { background: linear-gradient(145deg, #F0FDF4, #DCFCE7); border-color: #BBF7D0 !important; }
.rr-point-card--green::before  { background: var(--rr2-green); }
.rr-point-card--purple { background: linear-gradient(145deg, #FAF5FF, #EDE9FE); border-color: #DDD6FE !important; }
.rr-point-card--purple::before { background: var(--rr2-purple); }

.rr-point-card__num {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  opacity: .35;
  margin-bottom: 12px;
}
.rr-point-card--orange .rr-point-card__num { color: var(--rr2-orange); }
.rr-point-card--blue   .rr-point-card__num { color: var(--rr2-blue); }
.rr-point-card--green  .rr-point-card__num { color: var(--rr2-green); }
.rr-point-card--purple .rr-point-card__num { color: var(--rr2-purple); }

.rr-point-card__icon-wrap {
  font-size: 36px !important;
  margin-bottom: 14px !important;
  display: block;
}
.rr-point-card__title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--rr2-text) !important;
  margin-bottom: 10px !important;
}
.rr-point-card__desc {
  font-size: 13px !important;
  color: #64748B !important;
  line-height: 1.8 !important;
}

@media (max-width: 860px) {
  .rr-points__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .rr-points__grid { grid-template-columns: 1fr !important; }
}

/* =========================================================
   職種選択カード — 明るく元気に
========================================================= */
.rr-templates {
  background: #F8FAFC;
  padding: 64px 24px !important;
  border-top: 1px solid #F1F5F9;
}
.rr-templates__inner {
  max-width: 960px;
  margin: 0 auto;
}
.rr-section-title {
  font-size: clamp(20px, 3vw, 28px) !important;
  font-weight: 900 !important;
  color: var(--rr2-text) !important;
  position: relative;
  display: inline-block;
}
.rr-section-title::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--rr2-orange), var(--rr2-amber));
  border-radius: 2px;
}
.rr-section-title-wrap {
  text-align: center;
  margin-bottom: 36px;
}

.rr-job-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)) !important;
  gap: 14px !important;
}
.rr-job-card {
  background: #fff !important;
  border: 2px solid #E2E8F0 !important;
  border-radius: 18px !important;
  padding: 22px 12px 18px !important;
  transition: all .22s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative;
  overflow: hidden;
}
.rr-job-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(249,115,22,.06), rgba(14,165,233,.06));
  opacity: 0;
  transition: opacity .2s;
}
.rr-job-card:hover {
  border-color: var(--rr2-orange) !important;
  box-shadow: 0 6px 28px rgba(249,115,22,.2) !important;
  transform: translateY(-4px) scale(1.02) !important;
}
.rr-job-card:hover::before { opacity: 1; }
.rr-job-card.is-selected {
  border-color: var(--rr2-orange) !important;
  background: #FFF7ED !important;
  box-shadow: 0 4px 20px rgba(249,115,22,.25) !important;
}
.rr-job-card__icon { font-size: 36px !important; }
.rr-job-card__label {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--rr2-text) !important;
}
.rr-job-card__cat {
  font-size: 10px !important;
  background: linear-gradient(135deg, var(--rr2-orange), var(--rr2-amber)) !important;
  color: #fff !important;
  padding: 2px 10px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

/* =========================================================
   スクロールアニメーション
========================================================= */
.rr-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--delay, 0s) ease, transform .6s var(--delay, 0s) ease;
}
.rr-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   キーフレーム
========================================================= */
@keyframes rr2-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes rr2-float-badge {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-6px) rotate(-1deg); }
  66%       { transform: translateY(-3px) rotate(1deg); }
}
@keyframes rr2-badge-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
@keyframes rr2-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes rr2-pulse-ring {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(1.4);  opacity: 0; }
}

/* CTA 呼吸アニメーション */
.rr-fv__cta {
  animation: rr2-cta-breathe 2.5s 1.5s ease-in-out infinite;
}
@keyframes rr2-cta-breathe {
  0%, 100% { box-shadow: 0 6px 24px rgba(249,115,22,.45); }
  50%       { box-shadow: 0 10px 40px rgba(249,115,22,.65), 0 0 0 8px rgba(249,115,22,.1); }
}

/* =========================================================
   スクロールアニメーション JS 初期化スクリプト
   (page-househr-rirekisho.php の wp_footer 前に追加)
========================================================= */

/* ================================================================
   ★ 履歴書メーカー ヘッダー — 住まキャリブランドカラー統一
   ロゴ: スカイブルー #1ABCFE / ミディアムブルー #2B7FD4
================================================================ */
.rr-header {
  border-bottom: 3px solid #1ABCFE !important;
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(26,188,254,.18) !important;
}
.rr-header__badge {
  background: linear-gradient(135deg, #1ABCFE, #2B7FD4) !important;
  font-size: 12px !important;
  padding: 4px 14px !important;
  box-shadow: 0 2px 8px rgba(26,188,254,.35) !important;
}

/* FV エリアのオレンジ→ブランドカラーに */
.rr-fv__badge {
  background: linear-gradient(135deg, #1ABCFE, #2B7FD4) !important;
  box-shadow: 0 4px 12px rgba(26,188,254,.4) !important;
}
.rr-btn--primary {
  background: linear-gradient(135deg, #1ABCFE, #2B7FD4) !important;
  box-shadow: 0 6px 24px rgba(26,188,254,.45) !important;
}
.rr-btn--primary:hover {
  background: linear-gradient(135deg, #2ECFFF, #1A68C4) !important;
  box-shadow: 0 10px 36px rgba(26,188,254,.6) !important;
}
@keyframes rr2-cta-breathe {
  0%, 100% { box-shadow: 0 6px 24px rgba(26,188,254,.45); }
  50%       { box-shadow: 0 10px 40px rgba(26,188,254,.65), 0 0 0 8px rgba(26,188,254,.1); }
}
.rr-fv__title-sub { color: #2B7FD4 !important; -webkit-text-fill-color: #2B7FD4 !important; }
.rr-fv__em {
  background: linear-gradient(90deg, #1ABCFE, #2B7FD4) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 信頼バッジもブランドカラー系に */
.rr-trust-badge--blue   { background: linear-gradient(135deg, #1ABCFE, #2B7FD4) !important; }
.rr-trust-badge--green  { background: linear-gradient(135deg, #22C55E, #16A34A) !important; }
.rr-trust-badge--orange { background: linear-gradient(135deg, #FF6B35, #FF8C42) !important; }
.rr-trust-badge--purple { background: linear-gradient(135deg, #8B5CF6, #7C3AED) !important; }

/* フローティングバッジ アイコン色 */
.rr-float-badge--1 .rr-float-badge__title,
.rr-float-badge--2 .rr-float-badge__title,
.rr-float-badge--3 .rr-float-badge__title { color: #2B7FD4; }

/* HowToステップ番号色 */
.rr-howto__step--1 .rr-howto__num {
  background: linear-gradient(135deg, #1ABCFE, #2B7FD4) !important;
  box-shadow: 0 4px 12px rgba(26,188,254,.4) !important;
}
.rr-howto__connector path { stroke: #1ABCFE !important; }

/* ポイントカード番号色 */
.rr-point-card--orange .rr-point-card__num { color: #1ABCFE; }

/* 職種カードホバー */
.rr-job-card:hover {
  border-color: #1ABCFE !important;
  box-shadow: 0 6px 28px rgba(26,188,254,.25) !important;
}
.rr-job-card.is-selected {
  border-color: #1ABCFE !important;
  background: #E8F8FF !important;
  box-shadow: 0 4px 20px rgba(26,188,254,.28) !important;
}
.rr-job-card__cat {
  background: linear-gradient(135deg, #1ABCFE, #2B7FD4) !important;
}

/* ステッパーのアクティブ色 */
.rr-stepper__item.is-active .rr-stepper__num {
  background: linear-gradient(135deg, #1ABCFE, #2B7FD4) !important;
}

/* セクションタイトル下線 */
.rr-section-title::after {
  background: linear-gradient(90deg, #1ABCFE, #2B7FD4) !important;
}

/* ポイントセクション上部ライン */
.rr-points::before {
  background: linear-gradient(90deg, #1ABCFE, #2B7FD4, #22C55E, #8B5CF6) !important;
}

/* points eyebrow */
.rr-points__eyebrow {
  color: #1ABCFE !important;
  background: #E8F8FF !important;
}


/* ================================================================
   ★ ヘッダー・フッター — LP統一デザイン
================================================================ */

/* ヘッダー内レイアウト */
.rr-header__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rr-header__logo img {
  height: 44px;
  width: auto;
  display: block;
}

/* フッター — LPと同じ構造に統一 */
.rirekisho-page .rr-footer,
.rirekisho-page #footer.footer {
  background: #0D1F3C;
  color: #CBD5E1;
  padding: 40px 24px 28px;
  margin-top: 0;
}
.rirekisho-page .footer__container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
/* フッターロゴ（白背景不要のSVGなのでそのまま表示） */
.rr-footer__logo img {
  height: 40px;
  width: auto;
  display: block;
  /* SVGが白文字の場合はフィルター不要。黒文字SVGなら白に反転 */
  filter: brightness(0) invert(1);
}
.rirekisho-page .footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
}
.rirekisho-page .footer__menu-item { display: block; }
.rirekisho-page .footer__menu-link {
  color: #94A3B8;
  font-size: 13px;
  text-decoration: none;
  transition: color .18s;
}
.rirekisho-page .footer__menu-link:hover {
  color: #1ABCFE;
}
.rirekisho-page .footer__copyright {
  font-size: 11px;
  color: #64748B;
  margin: 0;
}
.rirekisho-page .footer__copyright small { font-size: inherit; }

@media (max-width: 600px) {
  .rr-header__logo img { height: 36px; }
  .rirekisho-page .footer__menu { gap: 4px 16px; }
  .rirekisho-page .footer__menu-link { font-size: 12px; }
}

/* ================================================================
   ★ 2026-03-11 総合修正
   1) 職種グリッド 3×3固定
   2) フッター SWELL干渉完全排除
   3) ヒーロー追加CSS（対応職種プレビュー）
================================================================ */

/* ---- 1) 職種グリッド 3×3 強制 ---- */
body.rirekisho-page .rr-job-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  max-width: 760px !important;
  margin: 0 auto !important;
}
@media (max-width: 600px) {
  body.rirekisho-page .rr-job-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  body.rirekisho-page .rr-job-card {
    padding: 14px 8px 12px !important;
  }
  body.rirekisho-page .rr-job-card__icon { font-size: 26px !important; }
  body.rirekisho-page .rr-job-card__label { font-size: 11px !important; }
  body.rirekisho-page .rr-templates__inner { padding: 0 12px !important; }
}

/* ---- 2) フッター完全独立スタイル（SWELL上書き）---- */

/* SWELLが#footerに当てるスタイルをリセット */
body.rirekisho-page #footer.footer,
body.rirekisho-page #footer.footer * {
  box-sizing: border-box !important;
}
body.rirekisho-page #footer.footer {
  background: #0D1F3C !important;
  color: #94A3B8 !important;
  padding: 48px 24px 28px !important;
  margin: 0 !important;
  border: none !important;
  width: 100% !important;
}
/* SWELLの内部div等をリセット */
body.rirekisho-page #footer .l-footer,
body.rirekisho-page #footer .l-footer__inner,
body.rirekisho-page #footer .l-container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
/* フッターコンテナ */
body.rirekisho-page #footer .footer__container {
  max-width: 900px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 24px !important;
  text-align: center !important;
  background: transparent !important;
}
/* フッターロゴ */
body.rirekisho-page #footer .rr-footer__logo {
  display: inline-block !important;
  line-height: 1 !important;
}
body.rirekisho-page #footer .rr-footer__logo img {
  height: 42px !important;
  width: auto !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.9 !important;
}
/* フッターメニュー */
body.rirekisho-page #footer .footer__menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 28px !important;
  background: transparent !important;
}
body.rirekisho-page #footer .footer__menu-item {
  display: block !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
body.rirekisho-page #footer .footer__menu-link {
  color: #94A3B8 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 4px 0 !important;
  background: transparent !important;
  border: none !important;
  transition: color .18s !important;
  display: inline !important;
}
body.rirekisho-page #footer .footer__menu-link:hover {
  color: #1ABCFE !important;
  text-decoration: underline !important;
}
/* コピーライト */
body.rirekisho-page #footer .footer__copyright {
  font-size: 11px !important;
  color: #475569 !important;
  margin: 0 !important;
  background: transparent !important;
}
body.rirekisho-page #footer .footer__copyright small {
  font-size: inherit !important;
  color: inherit !important;
}
/* SWELLが追加するその他の要素を非表示 */
body.rirekisho-page #footer .p-footer,
body.rirekisho-page #footer .p-footer__logo,
body.rirekisho-page #footer .p-footer__copy,
body.rirekisho-page #footer .p-footer__nav,
body.rirekisho-page #footer .p-footer__inner {
  display: none !important;
}
@media (max-width: 600px) {
  body.rirekisho-page #footer .footer__menu {
    gap: 6px 20px !important;
  }
  body.rirekisho-page #footer .footer__menu-link {
    font-size: 12px !important;
  }
}

/* ---- 3) ヒーロー追加CSS ---- */
.rr-fv__jobs-preview {
  margin-top: 20px;
  padding: 14px 16px;
  background: rgba(26,188,254,.08);
  border: 1px solid rgba(26,188,254,.2);
  border-radius: 12px;
}
.rr-fv__jobs-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #2B7FD4;
  letter-spacing: .08em;
  margin-bottom: 8px;
}
.rr-fv__jobs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rr-fv__jobs-tags span {
  background: #fff;
  border: 1px solid #BAE6FD;
  color: #1E40AF;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}
.rr-fv__jobs-more {
  background: #1ABCFE !important;
  border-color: #1ABCFE !important;
  color: #fff !important;
}
/* ヘッダーロゴ確認（SVG白背景対策） */
.rr-header {
  border-bottom: 3px solid #1ABCFE !important;
  background: #fff !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: 0 2px 16px rgba(26,188,254,.15) !important;
}
.rr-header__inner {
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.rr-header__logo img {
  height: 46px !important;
  width: auto !important;
  display: block !important;
}

/* ---- 独立フッター rr-site-footer ---- */
body.rirekisho-page .rr-site-footer {
  background: #0D1F3C;
  color: #94A3B8;
  padding: 48px 24px 28px;
  margin: 0;
  width: 100%;
}
body.rirekisho-page .rr-site-footer__container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
body.rirekisho-page .rr-site-footer__logo img {
  height: 42px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
body.rirekisho-page .rr-site-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
}
body.rirekisho-page .rr-site-footer__menu li { display: block; }
body.rirekisho-page .rr-site-footer__menu a {
  color: #94A3B8;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  transition: color .18s;
}
body.rirekisho-page .rr-site-footer__menu a:hover { color: #1ABCFE; }
body.rirekisho-page .rr-site-footer__copy {
  font-size: 11px;
  color: #475569;
  margin: 0;
}
body.rirekisho-page .rr-site-footer__copy small { font-size: inherit; }

/* SWELLの#footerを完全非表示 */
body.rirekisho-page #footer {
  display: none !important;
}

/* ================================================================
   ★ 外部バナー — QUINSEL（完了モーダル内）& フッター上バナー帯
================================================================ */

/* ---- 完了モーダル内 QUINSEL バナー ---- */
.rr-modal__ext-banner {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed #E2E8F0;
}
.rr-modal__ext-label {
  font-size: 11px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: .06em;
  margin: 0 0 10px;
  text-align: center;
}
.rr-ext-banner {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  position: relative;
}
.rr-ext-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.rr-ext-banner img {
  width: 100%;
  height: auto;
  display: block;
}
/* フォールバック（画像なし時） */
.rr-ext-banner--quinsel.rr-ext-banner--fallback {
  background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 50%, #ECFDF5 100%);
  border: 1.5px solid #BAE6FD;
  padding: 20px 24px;
}
.rr-ext-banner--fallback img { display: none; }
.rr-ext-banner__fallback-inner {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.rr-ext-banner--fallback .rr-ext-banner__fallback-inner { display: flex; }
.rr-ext-banner__fb-logo {
  font-size: 18px;
  font-weight: 900;
  color: #1E3A8A;
  letter-spacing: .08em;
}
.rr-ext-banner__fb-copy {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.6;
}
.rr-ext-banner__fb-copy strong { color: #2B7FD4; }
.rr-ext-banner__fb-btn {
  display: inline-block;
  margin-top: 6px;
  background: linear-gradient(135deg, #1ABCFE, #2B7FD4);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 20px;
  width: fit-content;
}

/* ---- フッター上バナー帯 ---- */
.rr-pre-footer-banners {
  background: #F8FAFC;
  border-top: 3px solid #E2E8F0;
  padding: 32px 24px 28px;
  width: 100%;
}
.rr-pre-footer-banners__inner {
  max-width: 860px;
  margin: 0 auto;
}
.rr-pre-footer-banners__label {
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: .08em;
  text-align: center;
  margin: 0 0 16px;
}
.rr-pre-footer-banners__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;  /* QUINSEL横長:ONESONG縦型 */
  gap: 16px;
  align-items: start;
}
@media (max-width: 600px) {
  .rr-pre-footer-banners__grid {
    grid-template-columns: 1fr;
  }
}

/* 各バナー */
.rr-pfb {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  position: relative;
}
.rr-pfb:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.rr-pfb img {
  width: 100%;
  height: auto;
  display: block;
}
/* フォールバック共通 */
.rr-pfb__fallback { display: none; }
.rr-pfb.rr-pfb--fallback img { display: none; }
.rr-pfb.rr-pfb--fallback .rr-pfb__fallback {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}
/* QUINSELフォールバック */
.rr-pfb--quinsel.rr-pfb--fallback {
  background: linear-gradient(135deg, #F0F9FF, #EFF6FF);
  border: 1.5px solid #BAE6FD;
}
.rr-pfb--quinsel .rr-pfb__fb-logo {
  font-size: 16px; font-weight: 900; color: #1E3A8A; letter-spacing: .08em;
}
.rr-pfb--quinsel .rr-pfb__fb-text {
  font-size: 13px; font-weight: 600; color: #1E293B; line-height: 1.6;
}
/* ONE SONGフォールバック */
.rr-pfb--onesong.rr-pfb--fallback {
  background: linear-gradient(160deg, #FDF2F8, #FFF7ED);
  border: 1.5px solid #F9A8D4;
}
.rr-pfb--onesong .rr-pfb__fb-logo {
  font-size: 16px; font-weight: 900; color: #9D174D; letter-spacing: .06em;
}
.rr-pfb--onesong .rr-pfb__fb-text {
  font-size: 12px; font-weight: 600; color: #4A1942; line-height: 1.6;
}

/* ================================================================
   ★ フッターロゴ修正 ＆ バナーデザイン強化
================================================================ */

/* ----  フッターロゴ ----
   SVGが読めない場合があるため、PNGをonerrorで指定する
   黒背景PNGに brightness(0)invert(1) は逆効果なので除去
   代わりに背景を少し明るくしてロゴを自然に見せる              */
body.rirekisho-page .rr-site-footer {
  background: #0D1F3C !important;
}
body.rirekisho-page .rr-site-footer__logo {
  display: block;
  margin-bottom: 4px;
}
body.rirekisho-page .rr-site-footer__logo img {
  height: 44px !important;
  width: auto !important;
  display: block !important;
  /* SVG（白文字）の場合はフィルター不要 */
  filter: none !important;
  opacity: 1 !important;
  /* PNG黒背景の場合のフォールバック対策：背景白枠で見せる */
  background: transparent !important;
}
/* PNGフォールバック用：onerrorで.is-pngクラスを付与したとき */
body.rirekisho-page .rr-site-footer__logo.is-png img {
  border-radius: 6px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.92) !important;
}

/* ================================================================
   バナー共通リセット
================================================================ */
.rr-pfb { position: relative; }
.rr-pfb img { display: block; width: 100%; height: auto; }
.rr-pfb__fallback { display: none; }

.rr-pfb.rr-pfb--fallback img { display: none !important; }
.rr-pfb.rr-pfb--fallback .rr-pfb__fallback {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 22px;
}

/* ================================================================
   QUINSEL バナー — 住まキャリ水色系、目立つグラデ
================================================================ */
.rr-pfb--quinsel {
  background: linear-gradient(135deg, #0D3A6E 0%, #1565C0 45%, #1ABCFE 100%);
  border-radius: 14px;
  overflow: hidden;
  min-height: 130px;
}
/* 画像ありのとき：そのまま表示 */
.rr-pfb--quinsel img { border-radius: 14px; }

/* フォールバック（画像なし） */
.rr-pfb--quinsel.rr-pfb--fallback {
  background: linear-gradient(135deg, #0D3A6E 0%, #1565C0 45%, #1ABCFE 100%) !important;
  box-shadow: 0 6px 28px rgba(26,188,254,.35);
}
.rr-pfb--quinsel .rr-pfb__fb-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
}
.rr-pfb--quinsel .rr-pfb__fb-logo {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .12em;
  text-shadow: 0 0 24px rgba(126,232,255,.6);
  line-height: 1.1;
}
.rr-pfb--quinsel .rr-pfb__fb-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  line-height: 1.65;
}
.rr-pfb--quinsel .rr-pfb__fb-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  color: #1565C0;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 24px;
  width: fit-content;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .18s, box-shadow .18s;
}
.rr-pfb--quinsel .rr-pfb__fb-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}

/* ================================================================
   ONE SONG バナー — 鮮やかピンク〜パープル、エモーショナル
================================================================ */
.rr-pfb--onesong {
  background: linear-gradient(160deg, #1a0530 0%, #5B21B6 50%, #BE185D 100%);
  border-radius: 14px;
  overflow: hidden;
  min-height: 130px;
}
.rr-pfb--onesong img { border-radius: 14px; }

/* フォールバック（画像なし） */
.rr-pfb--onesong.rr-pfb--fallback {
  background: linear-gradient(160deg, #1a0530 0%, #5B21B6 50%, #BE185D 100%) !important;
  box-shadow: 0 6px 28px rgba(190,24,93,.35);
  min-height: 190px;
}
.rr-pfb--onesong .rr-pfb__fb-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
}
.rr-pfb--onesong .rr-pfb__fb-logo {
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .14em;
  text-shadow: 0 0 28px rgba(244,114,182,.8), 0 0 60px rgba(167,139,250,.5);
  line-height: 1.1;
}
.rr-pfb--onesong .rr-pfb__fb-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  line-height: 1.7;
}
.rr-pfb--onesong .rr-pfb__fb-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #EC4899, #F97316);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 24px;
  width: fit-content;
  box-shadow: 0 4px 16px rgba(236,72,153,.4);
  transition: transform .18s, box-shadow .18s;
}
.rr-pfb--onesong .rr-pfb__fb-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(236,72,153,.55);
}

/* ================================================================
   フッター上バナー帯 — ダーク背景で2枚を際立たせる
================================================================ */
.rr-pre-footer-banners {
  background: #0A1628;
  border-top: none;
  padding: 36px 24px 32px;
  width: 100%;
}
.rr-pre-footer-banners__label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.4);
  letter-spacing: .1em;
  text-align: center;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.rr-pre-footer-banners__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: stretch;
  max-width: 860px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .rr-pre-footer-banners__grid { grid-template-columns: 1fr; }
  .rr-pfb--quinsel.rr-pfb--fallback,
  .rr-pfb--onesong.rr-pfb--fallback { min-height: 120px; }
}

/* ================================================================
   モーダル内 QUINSEL バナー
================================================================ */
.rr-ext-banner {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0D3A6E, #1565C0, #1ABCFE);
  box-shadow: 0 4px 18px rgba(26,188,254,.3);
  transition: transform .2s, box-shadow .2s;
  text-decoration: none;
  min-height: 80px;
}
.rr-ext-banner:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(26,188,254,.45); }
.rr-ext-banner img { display: block; width: 100%; height: auto; }
.rr-ext-banner__fallback-inner { display: none; }

.rr-ext-banner--fallback img { display: none !important; }
.rr-ext-banner--fallback .rr-ext-banner__fallback-inner {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
}
.rr-ext-banner__fb-logo {
  font-size: 20px; font-weight: 900; color: #fff;
  letter-spacing: .1em; text-shadow: 0 0 16px rgba(126,232,255,.5);
}
.rr-ext-banner__fb-copy {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); line-height: 1.6;
}
.rr-ext-banner__fb-copy strong { color: #7EE8FF; }
.rr-ext-banner__fb-btn {
  display: inline-block; margin-top: 4px;
  background: #fff; color: #1565C0;
  font-size: 12px; font-weight: 800;
  padding: 6px 16px; border-radius: 20px; width: fit-content;
}

/* ================================================================
   ★ STEPナビ区分ラベル（履歴書 / 職務経歴書）
================================================================ */
.rr-stepper__section-label {
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: .08em;
  padding: 4px 0 2px;
  border-top: 1px solid #e2e8f0;
  margin-top: 4px;
}
.rr-stepper__section-label:first-child {
  border-top: none;
  margin-top: 0;
}
@media (max-width: 600px) {
  .rr-stepper__section-label { display: none; }
}