/* =========================================================================
   企業向け採用ページ（/recruit/）専用スタイル
   デザインソース: design_handoff_career_recruit/Career Recruit Page.dc.html
   デスクトップ値は 1120px 基準のデザインHTML準拠。
   レスポンシブ（1024 / 768 / 480px）はこの実装で新規設計。
   SWELL親テーマの装飾に負けないよう .rc-lp スコープで明示的に上書きする。
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Design Tokens
   ------------------------------------------------------------------------- */
.rc-lp {
  --rc-red: #eb2d2d;
  --rc-red-dark: #c11f1f;
  --rc-red-grad-1: #b81a1a;
  --rc-red-grad-2: #d42222;
  --rc-chip-bg: #fdecec;
  --rc-highlight-bg: #fff8f8;
  --rc-graph-light: #e8b8b8;

  --rc-ink: #1d1b1b;
  --rc-sub: #444040;
  --rc-body: #6f6a6a;
  --rc-muted: #9b9494;
  --rc-muted-2: #8f8888;

  --rc-dark: #1d1b1b;
  --rc-dark-hover: #2a2626;
  --rc-dark-text: #b3abab;
  --rc-dark-text-2: #cfc8c8;

  --rc-white: #ffffff;
  --rc-bg-alt: #fbf9f8;
  --rc-border: #ece6e4;
  --rc-input-border: #d9d2d0;

  --rc-font: 'Noto Sans JP', sans-serif;
  --rc-max: 1120px;
}

/* -------------------------------------------------------------------------
   1. Reset / Base（SWELL親テーマの装飾打ち消し）
   ------------------------------------------------------------------------- */
/* このCSSは /recruit/ でのみ enqueue されるため html セレクタでも安全 */
html {
  scroll-behavior: smooth;
}

.rc-lp,
.rc-lp * {
  box-sizing: border-box;
}

.rc-lp {
  font-family: var(--rc-font);
  color: var(--rc-ink);
  background: var(--rc-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------
   ここから下のベースリセットは全て :where() で包み、このリセット自体の
   詳細度をゼロ化する。理由: 素の要素セレクタ(.rc-lp a 等)は詳細度(0,1,1)を
   持つため、後段のコンポーネントクラス(.rc-btn--ghost 等、詳細度(0,1,0))を
   静かに上書きしてしまう事故が実際に起きた（.rc-lp section{padding:0} が
   全セクションのpaddingを、.rc-lp a が .rc-btn--ghost の白文字色を、それぞれ
   意図せず打ち消していた）。:where()の中身は詳細度に一切カウントされないため、
   このルール一式は「.rc-lp」1クラス分(0,1,0)のみの詳細度になり、同じ(0,1,0)の
   コンポーネントクラスとは常に「後に書いた方が勝つ」通常のカスケードに戻る。
   -------------------------------------------------------------------- */

.rc-lp :where(img) {
  max-width: 100%;
  display: block;
}

.rc-lp :where(a) {
  color: var(--rc-red-dark);
  text-decoration: none;
  transition: color .2s, background .2s, box-shadow .2s;
}

.rc-lp :where(a):hover {
  color: var(--rc-red);
}

.rc-lp :where(h1, h2, h3) {
  margin: 0;
  font-weight: 900;
}

.rc-lp h1::after,
.rc-lp h2::after,
.rc-lp h3::after,
.rc-lp h1::before,
.rc-lp h2::before,
.rc-lp h3::before {
  content: none !important;
}

.rc-lp :where(p) {
  margin: 0;
}

.rc-lp :where(button) {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  border-radius: 0;
}

/* checkbox / radio は除外する。appearance:none + 白背景 + width:100% が当たると
   白いフォームカード上でチェックボックスが完全に不可視になるため
   （同意チェックが押せない＝送信不能になる） */
.rc-lp :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  font-family: inherit;
  font-size: 14px;
  color: var(--rc-ink);
  background: var(--rc-white);
  border: 1px solid var(--rc-input-border);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.rc-lp :where(select) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236f6a6a'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
}

.rc-lp :where(textarea) {
  resize: vertical;
}

.rc-lp :where(input, select, textarea):focus {
  outline: 2px solid var(--rc-red);
  outline-offset: 1px;
}

.rc-lp :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc-lp :where(section) {
  padding: 0;
}

.rc-container {
  max-width: var(--rc-max);
  margin: 0 auto;
}

.rc-container--narrow {
  max-width: 820px;
}

/* 共通セクション見出し */
.rc-section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.rc-eyebrow {
  margin: 0;
  color: var(--rc-red-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
}

.rc-h2 {
  font-size: 32px;
  line-height: 1.5;
}

.rc-section-lead {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--rc-body);
  max-width: 640px;
  text-wrap: pretty;
}

/* 共通ボタン */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 900;
  font-size: 16px;
  padding: 15px 34px;
  min-height: 44px;
  text-align: center;
}

.rc-btn--white {
  background: var(--rc-white);
  color: var(--rc-red-dark);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.rc-btn--white:hover {
  background: #ffe9e9;
  color: var(--rc-red-dark);
}

.rc-btn--ghost {
  border: 2px solid rgba(255, 255, 255, .75);
  color: var(--rc-white);
  font-weight: 700;
  padding: 13px 30px;
}

.rc-btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--rc-white);
}

.rc-btn--sm {
  font-size: 13.5px;
  padding: 10px 22px;
  box-shadow: none;
}

/* -------------------------------------------------------------------------
   2. ヘッダー
   ------------------------------------------------------------------------- */
.rc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rc-border);
}

.rc-header__inner {
  max-width: var(--rc-max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.rc-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rc-header__logo {
  display: block;
  line-height: 0;
}

.rc-logo {
  height: 30px;
  display: block;
}

.rc-logo__text {
  font-family: var(--rc-font);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: 1px;
}

.rc-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13.5px;
  font-weight: 500;
}

.rc-nav a {
  color: var(--rc-sub);
}

.rc-nav a:hover {
  color: var(--rc-red);
}

.rc-nav__cta {
  background: var(--rc-red);
  color: var(--rc-white) !important;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 8px;
}

.rc-nav__cta:hover {
  background: var(--rc-red-dark);
  color: var(--rc-white) !important;
}

.rc-lp .rc-header .rc-navbtn {
  display: none !important;
}

.rc-navbtn {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
}

.rc-navbtn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--rc-ink);
  transition: transform .2s, opacity .2s;
}

.rc-header.is-nav-open .rc-navbtn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.rc-header.is-nav-open .rc-navbtn span:nth-child(2) {
  opacity: 0;
}

.rc-header.is-nav-open .rc-navbtn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   3. ヒーロー
   ------------------------------------------------------------------------- */
.rc-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rc-red-grad-1) 0%, var(--rc-red) 55%, var(--rc-red-grad-2) 100%);
  color: var(--rc-white);
  padding: 88px 24px 72px;
}

.rc-hero__deco {
  position: absolute;
  transform: skewX(-10deg);
  border-radius: 48px;
  pointer-events: none;
}

.rc-hero__deco--a {
  right: -120px;
  top: -80px;
  width: 520px;
  height: 520px;
  background: rgba(255, 255, 255, .06);
}

.rc-hero__deco--b {
  right: 120px;
  bottom: -160px;
  width: 340px;
  height: 340px;
  background: rgba(255, 255, 255, .05);
}

.rc-hero__inner {
  max-width: var(--rc-max);
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items: center;
}

.rc-hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rc-hero__badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}

.rc-hero__title {
  font-size: 44px;
  line-height: 1.35;
  font-weight: 900;
  letter-spacing: .01em;
  text-wrap: pretty;
}

.rc-hero__mark {
  background: linear-gradient(transparent 68%, rgba(255, 255, 255, .35) 68%);
}

/* 折返し単位を束ねる汎用ユーティリティ。
   H1末尾「からの一手を。」に付与し、「を。」1文字が最終行に孤立するのを防ぐ。
   text-wrap:pretty はフォント読込状況によって結果が揺れるため、こちらで確定させる。 */
.rc-nobr {
  white-space: nowrap;
}

.rc-hero__lead {
  font-size: 16px;
  line-height: 1.9;
  opacity: .92;
  max-width: 560px;
  text-wrap: pretty;
}

.rc-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.rc-hero__note {
  font-size: 12.5px;
  opacity: .8;
}

.rc-hero__visual {
  position: relative;
  align-self: stretch;
  min-height: 480px;
}

/* ヒーロー画像は背景透過の切り抜き。
   デザイン原案の clip-path 平行四辺形は「背景ありの写真パネル」を前提とした装飾だが、
   切り抜き画像では枠が見えず、人物の腕や肩を斜めに削るだけになるため使わない
   （skewX(-10deg) のモチーフは .rc-hero__deco とロゴが担う）。
   同じ理由で object-fit も cover ではなく contain。cover だと箱の比率次第で頭が切れる。 */
.rc-hero__photo {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  height: 300px;
}

.rc-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

.rc-hero__stats {
  position: absolute;
  left: -40px;
  right: 40px;
  top: 288px;
  background: var(--rc-white);
  color: var(--rc-ink);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .25);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-hero__stats-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--rc-red-dark);
}

.rc-hero__stats-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--rc-border);
  padding-bottom: 9px;
}

.rc-hero__stats-row--last {
  border-bottom: none;
  padding-bottom: 0;
}

.rc-hero__stats-key {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rc-body);
}

.rc-hero__stats-val {
  font-size: 19px;
  font-weight: 900;
}

.rc-hero__stats-unit {
  font-size: 12px;
  font-weight: 700;
}

.rc-hero__stats-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--rc-muted);
}

.rc-hero__stats-note {
  font-size: 10px;
  color: var(--rc-muted);
}

/* -------------------------------------------------------------------------
   4. ISSUE
   ------------------------------------------------------------------------- */
.rc-issue {
  padding: 88px 24px;
  background: var(--rc-white);
}

.rc-issue .rc-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.rc-issue__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.rc-issue__card {
  background: var(--rc-bg-alt);
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rc-issue__num {
  font-size: 13px;
  font-weight: 900;
  color: var(--rc-red-dark);
  letter-spacing: .08em;
}

.rc-issue__card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.rc-issue__card p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--rc-body);
}

/* -------------------------------------------------------------------------
   5. REASON
   ------------------------------------------------------------------------- */
.rc-reason {
  padding: 88px 24px;
  background: var(--rc-bg-alt);
  border-top: 1px solid var(--rc-border);
  border-bottom: 1px solid var(--rc-border);
}

.rc-reason .rc-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.rc-reason__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.rc-reason__card {
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(29, 27, 27, .04);
}

.rc-reason__chip {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--rc-chip-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: var(--rc-red-dark);
}

.rc-reason__card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.rc-reason__card p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--rc-body);
}

/* -------------------------------------------------------------------------
   6. MEDIA
   ------------------------------------------------------------------------- */
.rc-media {
  padding: 88px 24px;
  background: var(--rc-white);
}

.rc-media .rc-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.rc-media__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.rc-media__articles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rc-media__article {
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.rc-media__article-chip {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--rc-chip-bg);
  color: var(--rc-red-dark);
  font-weight: 900;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-media__article-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rc-media__article-body h3 {
  font-size: 16px;
  font-weight: 700;
}

.rc-media__article-body p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--rc-body);
}

.rc-media__link {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: var(--rc-red-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rc-media__graph {
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--rc-bg-alt);
}

.rc-media__graph-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.rc-media__graph-head h3 {
  font-size: 16px;
  font-weight: 700;
}

.rc-media__graph-pill {
  background: var(--rc-red);
  color: var(--rc-white);
  font-size: 12px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.rc-media__graph-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 48px;
  justify-content: center;
  padding: 12px 12px 0;
  min-height: 220px;
}

.rc-media__graph-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.rc-media__bar {
  width: 88px;
  border-radius: 8px 8px 0 0;
}

.rc-media__bar--prev {
  height: 96px;
  background: var(--rc-graph-light);
}

.rc-media__bar--curr {
  height: 180px;
  background: linear-gradient(180deg, var(--rc-red), var(--rc-red-dark));
}

.rc-media__graph-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--rc-sub);
}

.rc-media__graph-note {
  font-size: 11px;
  color: var(--rc-muted);
}

/* X banner */
.rc-media__x {
  display: block;
  color: inherit;
}

.rc-media__x:hover {
  color: inherit;
}

.rc-media__x-inner {
  background: var(--rc-dark);
  border-radius: 16px;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--rc-white);
  transition: background .2s;
}

.rc-media__x:hover .rc-media__x-inner {
  background: var(--rc-dark-hover);
}

.rc-media__x-avatar-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
}

.rc-media__x-avatar,
.rc-media__x-avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, .15);
  overflow: hidden;
}

.rc-media__x-avatar-img {
  object-fit: cover;
}

.rc-media__x-avatar-svg {
  width: 30px;
  height: 30px;
}

.rc-media__x-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.rc-media__x-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rc-media__x-name-main {
  font-size: 17px;
  font-weight: 900;
}

.rc-media__x-name-id {
  font-size: 13.5px;
  color: var(--rc-dark-text);
}

.rc-media__x-desc {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--rc-dark-text-2);
}

.rc-media__x-stat {
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rc-media__x-stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--rc-dark-text);
  letter-spacing: .08em;
}

.rc-media__x-stat-val {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
}

.rc-media__x-stat-unit {
  font-size: 16px;
}

.rc-media__x-stat-note {
  font-size: 11px;
  color: var(--rc-muted-2);
}

/* -------------------------------------------------------------------------
   7. TALENT
   ------------------------------------------------------------------------- */
.rc-talent {
  padding: 88px 24px;
  background: var(--rc-bg-alt);
  border-top: 1px solid var(--rc-border);
  border-bottom: 1px solid var(--rc-border);
}

.rc-talent .rc-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.rc-talent__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.rc-talent__card {
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rc-talent__card h3 {
  font-size: 17px;
  font-weight: 700;
}

.rc-talent__card p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--rc-body);
}

.rc-talent__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rc-talent__tags span {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rc-red-dark);
  background: var(--rc-chip-bg);
  padding: 3px 10px;
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   8. FLOW
   ------------------------------------------------------------------------- */
.rc-flow {
  padding: 88px 24px;
  background: var(--rc-white);
}

.rc-flow .rc-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.rc-flow__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.rc-flow__card {
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-flow__card--highlight {
  border: 2px solid var(--rc-red);
  background: var(--rc-highlight-bg);
}

.rc-flow__step {
  font-size: 12px;
  font-weight: 900;
  color: var(--rc-red-dark);
  letter-spacing: .1em;
}

.rc-flow__card h3 {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
}

.rc-flow__card p {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--rc-body);
}

/* -------------------------------------------------------------------------
   9. PRICE
   ------------------------------------------------------------------------- */
.rc-price {
  padding: 88px 24px;
  background: var(--rc-bg-alt);
  border-top: 1px solid var(--rc-border);
  border-bottom: 1px solid var(--rc-border);
}

.rc-price .rc-container {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.rc-price__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  /* 強調カードの上部ピル(top:-14px)が見出しと衝突しないよう余白を確保 */
  margin-top: 14px;
}

.rc-price__card {
  background: var(--rc-white);
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
  position: relative;
}

.rc-price__card--highlight {
  border: 2px solid var(--rc-red);
}

.rc-price__pill {
  position: absolute;
  top: -14px;
  background: var(--rc-red);
  color: var(--rc-white);
  font-size: 12px;
  font-weight: 900;
  padding: 5px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.rc-price__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--rc-body);
}

.rc-price__value {
  font-size: 40px;
  font-weight: 900;
  color: var(--rc-red-dark);
  line-height: 1.2;
}

.rc-price__unit {
  font-size: 18px;
}

.rc-price__value--text {
  font-size: 30px;
  color: var(--rc-ink);
  line-height: 1.4;
}

.rc-price__desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--rc-body);
}

/* -------------------------------------------------------------------------
   10. FAQ
   ------------------------------------------------------------------------- */
.rc-faq {
  padding: 88px 24px;
  background: var(--rc-white);
}

.rc-faq .rc-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.rc-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-faq__item {
  border: 1px solid var(--rc-border);
  border-radius: 12px;
  overflow: hidden;
}

.rc-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: var(--rc-white);
  text-align: left;
  min-height: 44px;
}

.rc-faq__q:hover {
  background: var(--rc-bg-alt);
}

.rc-faq__q-mark {
  color: var(--rc-red-dark);
  font-weight: 900;
  font-size: 15px;
  flex-shrink: 0;
}

.rc-faq__q-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--rc-ink);
  flex: 1;
}

.rc-faq__q-icon {
  color: var(--rc-muted);
  font-size: 18px;
  font-weight: 400;
  flex-shrink: 0;
}

.rc-faq__a {
  display: flex;
  gap: 14px;
  padding: 18px 24px 22px;
  border-top: 1px dashed var(--rc-border);
}

.rc-faq__a[hidden] {
  display: none;
}

.rc-faq__a-mark {
  color: var(--rc-muted);
  font-weight: 900;
  font-size: 15px;
  flex-shrink: 0;
}

.rc-faq__a p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--rc-sub);
}

/* -------------------------------------------------------------------------
   11. CONTACT
   ------------------------------------------------------------------------- */
.rc-contact {
  padding: 88px 24px 96px;
  background: linear-gradient(160deg, var(--rc-red-grad-1), var(--rc-red-grad-2));
  color: var(--rc-white);
}

.rc-contact__inner {
  max-width: var(--rc-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.rc-contact__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rc-eyebrow--onred {
  color: var(--rc-white);
  opacity: .85;
}

.rc-contact__title {
  font-size: 34px;
  line-height: 1.5;
}

.rc-contact__lead {
  font-size: 15px;
  line-height: 1.9;
  opacity: .92;
  text-wrap: pretty;
}

.rc-contact__dl {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-contact__dl h3 {
  font-size: 16px;
  font-weight: 700;
}

.rc-contact__dl p {
  font-size: 13px;
  line-height: 1.8;
  opacity: .85;
}

.rc-contact__dl .rc-btn {
  align-self: flex-start;
}

/* フォームカード */
.rc-form {
  background: var(--rc-white);
  border-radius: 16px;
  padding: 36px;
  color: var(--rc-ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
}

.rc-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rc-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rc-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.rc-form__label-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rc-form__required {
  color: var(--rc-red-dark);
  font-size: 11px;
  font-weight: 700;
}

.rc-form .wpcf7-form-control-wrap {
  display: block;
  margin-top: 2px;
}

.rc-form .wpcf7-form-control.wpcf7-text,
.rc-form .wpcf7-form-control.wpcf7-email,
.rc-form .wpcf7-form-control.wpcf7-tel,
.rc-form .wpcf7-form-control.wpcf7-select,
.rc-form .wpcf7-form-control.wpcf7-textarea {
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--rc-input-border);
  border-radius: 8px;
}

.rc-form .wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--rc-red-dark);
}

.rc-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--rc-red-dark);
}

/* 個人情報の取り扱い同意（[privacy_consent] + [acceptance privacy]）。
   本文ボックスの見た目は modules/privacy-consent/privacy-consent.css が担当し、
   ここではフォームカード内での配置とチェックボックスだけを整える。 */
.rc-form__privacy {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rc-form__agree .wpcf7-list-item {
  margin: 0;
}

.rc-form__agree label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--rc-ink);
  cursor: pointer;
  min-height: 44px;
}

/* サイト共通CSS（common.css）は濃色CTA背景を前提に
   `input#privacy`（ID＝詳細度1,0,1）で appearance:none にし、
   `input[type="checkbox"]:checked::after` で「白い」チェックを描いている。
   このLPのフォームカードは白背景なので、そのままだとチェックが見えない。
   ID を含むセレクタで勝たせ、ネイティブ描画＋ブランド色に戻す。 */
.rc-form__agree input#privacy {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  position: static;
  accent-color: var(--rc-red);
  cursor: pointer;
}

/* 共通CSSの疑似要素チェックを止める（ネイティブのチェックと二重に描かれるため） */
.rc-form__agree input#privacy::after,
.rc-form__agree input#privacy:checked::after {
  content: none;
}

.rc-form__submit-wrap {
  margin: 0;
}

.rc-form input[type="submit"] {
  background: var(--rc-red);
  color: var(--rc-white);
  font-size: 16px;
  font-weight: 900;
  padding: 16px;
  border-radius: 10px;
  width: 100%;
  min-height: 44px;
}

.rc-form input[type="submit"]:hover {
  background: var(--rc-red-dark);
}

/* 同意未チェックの間、CF7 が送信ボタンを disabled にする。押せないことを明示する */
.rc-form input[type="submit"]:disabled,
.rc-form input[type="submit"]:disabled:hover {
  background: var(--rc-red);
  opacity: .45;
  cursor: not-allowed;
}

.rc-form .wpcf7-spinner {
  margin: 8px auto 0;
  display: block;
}

.rc-form__note {
  margin: 0;
  font-size: 11.5px;
  color: var(--rc-muted);
  text-align: center;
}

.rc-form .screen-reader-response {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rc-form .wpcf7-response-output {
  margin: 4px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
}

.rc-form form.invalid .wpcf7-response-output,
.rc-form form.unaccepted .wpcf7-response-output,
.rc-form form.spam .wpcf7-response-output,
.rc-form form.aborted .wpcf7-response-output,
.rc-form form.payment-required .wpcf7-response-output {
  background: var(--rc-chip-bg);
  color: var(--rc-red-dark);
  border-color: #f3c9c9;
}

.rc-form form.sent .wpcf7-response-output {
  background: var(--rc-chip-bg);
  color: var(--rc-ink);
  border-color: var(--rc-red-dark);
}

.rc-form form.sent .wpcf7-response-output::before {
  content: '✓ ';
  color: var(--rc-red-dark);
  font-weight: 900;
}

/* -------------------------------------------------------------------------
   12. フッター
   ------------------------------------------------------------------------- */
.rc-footer {
  background: var(--rc-dark);
  color: var(--rc-dark-text);
  padding: 40px 24px;
}

.rc-footer__inner {
  max-width: var(--rc-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.rc-logo--footer {
  height: 24px;
}

.rc-footer__nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 12.5px;
  flex-wrap: wrap;
}

.rc-footer__nav a {
  color: var(--rc-dark-text);
}

.rc-footer__nav a:hover {
  color: var(--rc-white);
}

.rc-footer__copy {
  width: 100%;
  font-size: 11.5px;
  color: var(--rc-muted-2);
}

/* =========================================================================
   13. レスポンシブ
   ブレークポイント: 1024 / 768 / 480px
   ========================================================================= */

/* ---- 1024px: ヘッダーのハンバーガー化・FLOW 3カラム・ISSUE/REASON 2カラム経由 ---- */
@media (max-width: 1024px) {
  .rc-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--rc-white);
    border-bottom: 1px solid var(--rc-border);
    box-shadow: 0 12px 24px rgba(29, 27, 27, .08);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .25s ease;
  }

  .rc-header.is-nav-open .rc-nav {
    max-height: 480px;
    visibility: visible;
  }

  .rc-nav a {
    padding: 16px 24px;
    border-bottom: 1px solid var(--rc-border);
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .rc-nav a:last-child {
    border-bottom: none;
  }

  .rc-nav__cta {
    justify-content: center;
    text-align: center;
    margin: 12px 24px 20px;
    padding: 14px 20px;
  }

  .rc-lp .rc-header .rc-navbtn {
    display: flex !important;
    margin-left: auto;
  }

  .rc-issue__grid,
  .rc-reason__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rc-flow__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- 900px: ヒーロー1カラム化・MEDIA/CONTACT 1カラム化 ---- */
@media (max-width: 900px) {
  .rc-hero {
    padding: 56px 20px 48px;
  }

  .rc-hero__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* clamp(28px,7vw,44px) は 7vw が 44px を下回る629px未満まで44pxのまま
     動かず、タブレット幅で見出しが相対的に大きすぎたため、ブレークポイント
     ごとの段階的な固定値に変更（900px:36px / 768px:32px / 480px:28px） */
  .rc-hero__title {
    font-size: 36px;
  }

  /* gap は 0。実績カードを負のマージンで持ち上げ、PC（20px重なり）と同じ
     重なり方を縦積みでも再現する */
  .rc-hero__visual {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* 縦積み後は枠が横に広がりすぎる（900pxで 860x260 = 3.3:1）ので幅を絞る。
     高さは固定せず画像の自然な比率に任せ、contain の余白が出ないようにする。 */
  .rc-hero__photo {
    position: static;
    height: auto;
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }

  .rc-hero__photo img {
    height: auto;
  }

  .rc-hero__stats {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin-top: -20px;
    z-index: 1;
  }

  .rc-media__grid {
    grid-template-columns: 1fr;
  }

  .rc-contact__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ---- 768px: ISSUE/REASON/TALENT/PRICE 1カラム・FLOW 2カラム・フォーム/フッター整形 ---- */
@media (max-width: 768px) {
  .rc-header__inner {
    padding: 12px 16px;
  }

  .rc-logo {
    height: 24px;
  }

  .rc-issue,
  .rc-reason,
  .rc-media,
  .rc-talent,
  .rc-flow,
  .rc-price,
  .rc-faq {
    padding: 56px 20px;
  }

  .rc-issue__grid,
  .rc-reason__grid,
  .rc-talent__grid,
  .rc-price__grid {
    grid-template-columns: 1fr;
  }

  .rc-flow__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rc-h2 {
    font-size: 26px;
  }

  .rc-hero__title {
    font-size: 32px;
  }

  /* PVグラフ: 幅・gapを縮小、高さ比率(96:180)は維持 */
  .rc-media__graph-bars {
    gap: 32px;
    min-height: 180px;
  }

  .rc-media__bar {
    width: 70px;
  }

  .rc-media__bar--prev {
    height: 72px;
  }

  .rc-media__bar--curr {
    height: 135px;
  }

  /* Xバナー: アイコン+テキストを上、数値ブロックを下に縦積み */
  .rc-media__x-inner {
    flex-wrap: wrap;
    padding: 24px 22px;
    gap: 16px;
  }

  .rc-media__x-stat {
    margin-left: 0;
    text-align: left;
    width: 100%;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  /* CONTACT */
  .rc-contact {
    padding: 56px 20px 64px;
  }

  .rc-contact__title {
    font-size: 28px;
  }

  .rc-form {
    padding: 24px 20px;
  }

  .rc-form__row {
    grid-template-columns: 1fr;
  }

  /* iOSズーム防止: SP時のみ16pxへ上書き */
  .rc-form .wpcf7-form-control.wpcf7-text,
  .rc-form .wpcf7-form-control.wpcf7-email,
  .rc-form .wpcf7-form-control.wpcf7-tel,
  .rc-form .wpcf7-form-control.wpcf7-select,
  .rc-form .wpcf7-form-control.wpcf7-textarea {
    font-size: 16px;
  }

  /* フッター: ロゴ下にナビを縦積み */
  .rc-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .rc-footer__nav {
    margin-left: 0;
    flex-direction: column;
    gap: 10px;
  }
}

/* ---- 480px: FLOW 1カラム・微調整 ---- */
@media (max-width: 480px) {
  /* ヘッダー: ロゴ(470:40比率)+バッジ+ハンバーガーが横並びで収まらず
     右にはみ出る（overflow-x:hiddenで見た目上は隠れるが実際は横スクロール要因になる）ため、
     ロゴをさらに縮小し余白・gapを詰めて44px幅のハンバーガー(タップ領域は維持)を画面内に収める */
  .rc-header__inner {
    padding: 10px 12px;
    gap: 10px;
  }

  .rc-header__brand {
    gap: 8px;
    min-width: 0;
  }

  .rc-logo {
    height: 20px;
    flex-shrink: 0;
  }

  .rc-hero {
    padding: 48px 16px 40px;
  }

  .rc-hero__badge {
    font-size: 12px;
  }

  .rc-hero__title {
    font-size: 28px;
  }

  .rc-hero__lead {
    font-size: 15px;
  }

  .rc-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .rc-btn {
    padding: 14px 24px;
  }

  .rc-issue,
  .rc-reason,
  .rc-media,
  .rc-talent,
  .rc-flow,
  .rc-price,
  .rc-faq {
    padding: 44px 16px;
  }

  .rc-contact {
    padding: 44px 16px 56px;
  }

  .rc-flow__grid {
    grid-template-columns: 1fr;
  }

  .rc-media__graph-bars {
    gap: 20px;
  }

  .rc-media__bar {
    width: 56px;
  }

  .rc-media__bar--prev {
    height: 53px;
  }

  .rc-media__bar--curr {
    height: 99px;
  }

  .rc-media__x-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .rc-price__pill {
    font-size: 11px;
    padding: 4px 14px;
  }
}

/* =========================================================================
   サンクスページ（tpl-recruit_thanks.php / URL: /recruit-thanks/）
   /recruit/ と同じ recruit-lp.css を共有するため、末尾に追記する。
   ========================================================================= */

.rc-btn--outline {
  border: 2px solid var(--rc-border);
  color: var(--rc-ink);
  background: var(--rc-white);
  font-weight: 700;
  padding: 13px 30px;
}

.rc-btn--outline:hover {
  border-color: var(--rc-red);
  color: var(--rc-red-dark);
  background: var(--rc-chip-bg);
}

.rc-thanks {
  padding: 88px 24px 96px;
  background: var(--rc-white);
}

.rc-thanks__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}

.rc-thanks__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--rc-chip-bg);
  color: var(--rc-red-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.rc-thanks__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.rc-thanks__title {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.5;
  text-wrap: pretty;
}

.rc-thanks__lead {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--rc-body);
  text-wrap: pretty;
}

.rc-thanks__lead strong {
  color: var(--rc-red-dark);
  font-weight: 700;
}

.rc-thanks__note {
  margin-top: 44px;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 24px 26px;
}

.rc-thanks__note h2 {
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
}

.rc-thanks__note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--rc-body);
}

.rc-thanks__mail {
  font-weight: 700;
  color: var(--rc-ink);
  word-break: break-all;
}

.rc-thanks__next {
  margin-top: 48px;
}

.rc-thanks__next-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.rc-thanks__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.rc-thanks__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--rc-border);
  border-radius: 14px;
  padding: 22px 22px 24px;
  background: var(--rc-white);
  color: var(--rc-ink);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.rc-thanks__card:hover {
  border-color: var(--rc-red);
  box-shadow: 0 8px 24px rgba(29, 27, 27, .08);
  transform: translateY(-2px);
  color: var(--rc-ink);
}

.rc-thanks__card-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--rc-red-dark);
}

.rc-thanks__card-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.6;
}

.rc-thanks__card-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--rc-body);
}

.rc-thanks__back {
  margin-top: 48px;
  text-align: center;
}

@media (max-width: 900px) {
  .rc-thanks {
    padding: 56px 20px 64px;
  }

  .rc-thanks__title {
    font-size: 26px;
  }

  .rc-thanks__cards {
    grid-template-columns: 1fr;
  }

  .rc-thanks__note,
  .rc-thanks__next,
  .rc-thanks__back {
    margin-top: 36px;
  }
}

@media (max-width: 480px) {
  .rc-thanks {
    padding: 44px 16px 56px;
  }

  .rc-thanks__title {
    font-size: 23px;
  }

  .rc-thanks__icon {
    width: 56px;
    height: 56px;
  }

  .rc-thanks__back .rc-btn {
    width: 100%;
  }
}