/* 採用ページ専用のトークン */
:root{
  --c-orange-soft:#FCE3BF;
  --c-sky-tint:#EAF4FB;
  --c-cream-soft:#F7EFDD;
  --c-success:#3FB97A;
  --c-success-bg:#E6F6EE;
  --c-success-text:#1F7A4D;
}

/* ========== FV ========== */
/* section{padding} の影響を避けるため .fv は div にしている */
.fv{
  position:relative;overflow:hidden;
  padding:0 14px 20px;
  background:
    radial-gradient(circle at 100% 0%,var(--c-orange-soft) 0 120px,transparent 121px),
    radial-gradient(circle at 0% 32%,var(--c-sky-tint) 0 90px,transparent 91px),
    var(--c-ivory);
}
.fv-inner{max-width:600px;margin-inline:auto}
.fv-copy{padding:17px 6px 0}
.fv-label{
  display:flex;align-items:center;gap:8px;height:17px;margin-bottom:10px;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--c-navy);
}
.fv-label-dot{width:8px;height:8px;border-radius:50%;background:var(--c-orange)}
.fv-label-amp{font-weight:800;letter-spacing:0}
.fv-title{
  font-family:var(--font-jp);font-weight:900;font-size:25px;line-height:1.7;letter-spacing:.02em;color:var(--c-navy);
}
.fv-title em{font-style:normal;background:linear-gradient(transparent 62%,var(--c-yellow) 62%)}

/* 高さは画面の縦ではなく横幅に比例させ、どの幅でも同じ構図にする。
   2段目の高さが列幅とほぼ同じになり、ロゴのマスが正方形に近くなる */
.fv-grid{
  margin-top:34px;display:grid;gap:8px;
  grid-template-columns:1fr 1fr 1.25fr;
  grid-template-rows:1.25fr 1fr 44px 76px;
  aspect-ratio:347/374;
}
/* min-height:0 が無いと fr の段が画像の元の高さに引っぱられ、aspect-ratio の高さに収まらない */
.fv-tile{overflow:hidden;border-radius:14px;min-height:0}
.fv-tile img{width:100%;height:100%;object-fit:cover}
.fv-tile--staff{grid-column:1/3;grid-row:1}
.fv-tile--coach{grid-column:3;grid-row:1/4}
.fv-tile--rally{grid-column:1;grid-row:2}
.fv-tile--logo{grid-column:2;grid-row:2}
.fv-recruit{grid-column:1/3;grid-row:3}
.fv-tile--paddle{display:none}
.fv-tile--event{grid-column:1/3;grid-row:4}
.fv-tile--podium{grid-column:3;grid-row:4}
.fv-tile--staff img{object-position:60% 40%}
.fv-tile--coach img{object-position:62% 50%}
.fv-tile--rally img{object-position:50% 45%}
.fv-tile--event img{object-position:45% 60%}
.fv-tile--podium img{object-position:50% 38%}
/* ロゴは白背景込みで支給されているため、マスも白にして背景を変えずに見せる */
.fv-tile--logo{background:#fff;display:flex;align-items:center;justify-content:center;padding:0 12px}
.fv-tile--logo img{height:auto;object-fit:contain}

.fv-recruit{display:flex;align-items:center;gap:10px;container-type:inline-size}
.fv-recruit-en{
  font-family:var(--font-display);font-weight:200;font-size:23px;letter-spacing:.12em;line-height:1;
  color:var(--c-orange-deep);white-space:nowrap;
}
.fv-recruit-ja{
  font-family:var(--font-jp);font-weight:700;font-size:15px;color:var(--c-navy);line-height:1.3;white-space:nowrap;
  padding-left:10px;border-left:1.5px solid var(--c-orange);
}
/* RECRUIT＋採用情報の実寸は約194px。右に16px以上の余白が取れない幅では「採用情報」を消す */
@container (max-width:209px){
  .fv-recruit-ja{display:none}
}

@media (min-width:993px){
  .fv{
    padding:28px 40px 40px;
    background:
      radial-gradient(circle at 100% 0%,var(--c-orange-soft) 0 220px,transparent 221px),
      radial-gradient(circle at 0% 70%,var(--c-sky-tint) 0 200px,transparent 201px),
      var(--c-ivory);
  }
  /* コピーと写真を1つのグリッドに載せ、1段目・4段目の写真を左にはみ出させてコピーを上下から挟む */
  .fv-inner{
    max-width:1200px;display:grid;gap:12px;
    grid-template-columns:1.6fr .65fr 1fr 1fr 1.25fr;
    grid-template-rows:1.05fr 1.45fr 56px .55fr;
    aspect-ratio:1200/622;
  }
  .fv-grid{display:contents}
  /* z-index：アニメーション中に写真がコピーの上を横切らないようにする */
  .fv-copy{grid-column:1/3;grid-row:2/4;padding:0;position:relative;z-index:2;display:flex;align-items:center}
  .fv-copy-anchor{position:relative}
  /* 上下中央はメインコピーだけで合わせるため、サブコピーは絶対配置で計算から外す。
     1列目（写真がはみ出さない列）に収まるので、上にはみ出しても写真とは重ならない */
  .fv-label{
    position:absolute;left:0;bottom:100%;margin-bottom:14px;
    height:21px;gap:10px;font-size:15px;white-space:nowrap;
  }
  .fv-label-dot{width:10px;height:10px}
  /* 最大44px：中身1200px時のコピー領域に「一緒に作りませんか」が1行で収まる上限 */
  .fv-title{font-size:clamp(30px,3.4vw,44px);line-height:1.6;white-space:nowrap}
  .fv-tile{border-radius:18px}
  .fv-tile--staff{grid-column:2/5;grid-row:1}
  .fv-tile--coach{grid-column:5;grid-row:1/4}
  .fv-tile--rally{grid-column:3;grid-row:2}
  .fv-tile--logo{grid-column:4;grid-row:2;padding:0 22px}
  .fv-recruit{grid-column:3/5;grid-row:3;gap:14px}
  .fv-tile--paddle{display:block;grid-column:2;grid-row:4}
  .fv-tile--event{grid-column:3/5;grid-row:4}
  .fv-tile--podium{grid-column:5;grid-row:4}
  .fv-tile--staff img{object-position:55% 42%}
  .fv-tile--coach img{object-position:62% 40%}
  .fv-tile--paddle img{object-position:50% 30%}
  .fv-recruit-en{font-size:34px;letter-spacing:.14em}
  .fv-recruit-ja{font-size:18px;padding-left:14px}
}

/* FVのアニメーション：仲間が四方から集まって配置につく。
   開始位置・傾きは --fx/--fy/--fr/--fs で要素ごと・SP/PCごとに切り替え、キーフレームは1組にする */
@keyframes fvGather{
  from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg)) scale(var(--fs,1))}
  40%{opacity:1}
  to{opacity:1;transform:none}
}
@keyframes fvFadeIn{from{opacity:0}}
@keyframes fvFadeUp{from{opacity:0;transform:translateY(10px)}}
@keyframes fvReveal{to{opacity:1}}

@media (prefers-reduced-motion:no-preference){
  /* 再生は index.js が写真の読み込みを待って .is-playing を付けて始める。
     index.js が読み込めなくても写真が出ないままにならないよう、3秒後に表示する */
  .js .fv:not(.is-playing) :is(.fv-tile,.fv-recruit,.fv-copy){opacity:0;animation:fvReveal .3s 3s forwards}

  .fv.is-playing .fv-tile,
  .fv.is-playing .fv-recruit{animation:fvGather 1s cubic-bezier(.22,1,.36,1) both}
  .fv.is-playing .fv-copy{animation:fvFadeIn .6s both}
  .fv.is-playing .fv-tile--staff {--fx:-120%;--fy:-60%;--fr:-14deg;animation-delay:.05s}
  .fv.is-playing .fv-tile--coach {--fx:130%; --fy:0;   --fr:12deg; animation-delay:.18s}
  .fv.is-playing .fv-tile--rally {--fx:-150%;--fy:30%; --fr:-10deg;animation-delay:.31s}
  .fv.is-playing .fv-tile--event {--fx:-60%; --fy:160%;--fr:8deg;  animation-delay:.44s}
  .fv.is-playing .fv-tile--podium{--fx:110%; --fy:150%;--fr:-12deg;animation-delay:.52s}
  .fv.is-playing .fv-tile--logo  {--fx:0;    --fy:-30%;--fs:.4;    animation-delay:.6s}
  .fv.is-playing .fv-recruit     {--fx:-110%;--fy:0;               animation-delay:.85s}

  /* PC はコピーが左にあるため、左から来る写真の移動距離を短くする。
     上段・右列の写真は大きく、傾けると大げさに見えるため回転なしで入れる */
  @media (min-width:993px){
    .fv.is-playing .fv-copy{animation:fvFadeUp .8s both}
    .fv.is-playing .fv-tile--staff {--fx:-40%;--fy:-80%;--fr:0deg}
    .fv.is-playing .fv-tile--coach {--fr:0deg}
    .fv.is-playing .fv-tile--rally {--fx:-70%;--fy:40%}
    .fv.is-playing .fv-tile--paddle{--fx:-30%;--fy:170%;--fr:-10deg;animation-delay:.38s}
    .fv.is-playing .fv-tile--event {--fx:-25%}
    .fv.is-playing .fv-recruit     {--fx:-40%}
  }
}

/* ========== セクション共通 ========== */
.rc-sec{padding:44px 0}
.rc-sec--white{background:#fff}
.rc-sec--cream{background:var(--c-cream-soft)}
.rc-inner{max-width:600px;margin-inline:auto;padding-inline:16px}

/* common.css の h2/h3 の大きさ・余白・字間を使わず、ここで指定する */
.rc-head{margin-bottom:18px}
.rc-kicker{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.18em;
  color:var(--c-orange-deep);text-transform:uppercase;
}
.rc-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-orange)}
.rc-title{
  font-family:var(--font-jp);font-weight:900;font-size:28px;line-height:1.45;letter-spacing:normal;
  color:var(--c-navy);margin:4px 0 0;
}
.rc-sublead{font-size:14px;color:#555;margin-top:6px}
.rc-sec h3{letter-spacing:normal;margin:0;color:var(--c-navy);font-weight:900}

@media (prefers-reduced-motion:no-preference){
  /* rc-reveal-ready は index.js が付ける。JS が動かない環境では最初から全部見える */
  .rc-reveal{transition:opacity .6s ease,transform .6s ease}
  .rc-reveal-ready .rc-reveal:not(.is-in){opacity:0;transform:translateY(16px)}
}

/* ========== リード ========== */
.rc-lead{padding-bottom:0}
.rc-lead-body p{font-size:18px;line-height:1.7;margin-bottom:12px}
.rc-lead-body strong{
  color:var(--c-navy);background:linear-gradient(transparent 62%,var(--c-yellow) 62%);white-space:nowrap;
}
/* アッキーの下部28pxを紺の帯の裏に沈め、頭の高さを吹き出しの上端に近づける。帯を手前に重ねるため .rc-glance-band に z-index を付けている */
.rc-talk{display:grid;grid-template-columns:1fr 130px;align-items:center;gap:8px;margin-top:18px}
.rc-talk img{width:130px;height:auto;align-self:end;margin-bottom:-28px}
/* 改行は「大丈夫！」の後ろだけ<br>で固定し、ほかは幅なりに折り返す。text-wrap:pretty で最後の行が極端に短くなるのを防ぐ */
.rc-bubble{
  position:relative;margin:0 0 12px;padding:14px 10px;
  background:#fff;border:2px solid var(--c-navy);border-radius:16px;box-shadow:0 2px 12px rgba(31,58,138,.08);
  font-weight:800;font-size:16px;line-height:1.7;color:var(--c-navy);text-wrap:pretty;
}
.rc-nobr{white-space:nowrap}
/* しっぽは回転させた正方形。外側に出る2辺（上・右）にだけ線を付け、本体の線とつなげる */
.rc-bubble::after{
  content:"";position:absolute;right:-8px;top:34%;width:14px;height:14px;
  background:#fff;transform:rotate(45deg);
  border-top:2px solid var(--c-navy);border-right:2px solid var(--c-navy);border-radius:0 2px 0 0;
}
.rc-glance-band{position:relative;z-index:1;background:var(--c-navy);padding:18px 0 22px}
/* 左右の余白をほかのセクション（16px）より2px狭くして、見出し（18px）の「スタッフ/コーチ」が入る幅を確保する */
.rc-glance{
  list-style:none;max-width:600px;margin-inline:auto;padding-inline:14px;
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.rc-glance li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:12px}
.rc-glance b{display:block;font-weight:900;font-size:18px;color:#fff;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.rc-glance span{display:block;font-size:14px;font-weight:700;color:var(--c-yellow);margin-top:2px}

/* ========== 募集職種 ========== */
.rc-roles{display:flex;flex-direction:column;gap:10px}
.rc-role{background:#fff;border:2px solid rgba(31,58,138,.14);border-radius:16px;overflow:hidden}
.rc-role[open]{border-color:var(--c-navy)}
.rc-role summary{
  list-style:none;display:grid;grid-template-columns:64px 1fr 24px;gap:12px;align-items:center;
  padding:12px 14px;cursor:pointer;
}
.rc-role summary::-webkit-details-marker{display:none}
.rc-role-illust{
  width:64px;height:64px;border-radius:14px;background:var(--role-bg);
  display:flex;align-items:center;justify-content:center;
}
/* 並び順ではなく職種ごとに色を決める（職種を増やしても既存の色が変わらないように） */
.rc-role--front{--role-bg:var(--c-orange-soft)}
.rc-role--coach{--role-bg:var(--c-sky-tint)}
.rc-role--office{--role-bg:var(--c-success-bg)}
.rc-role--manager{--role-bg:#FBF1B5}
.rc-role-illust svg{width:52px;height:52px}
.rc-role-text{display:block;min-width:0}
.rc-role-name{
  display:block;font-weight:900;font-size:18px;line-height:1.35;color:var(--c-navy);
  word-break:keep-all;overflow-wrap:anywhere;
}
.rc-badges{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.rc-badge{
  font-size:13px;font-weight:700;line-height:1;padding:5px 8px;border-radius:6px;
  background:var(--c-navy);color:var(--c-yellow);
}
.rc-role-chev{width:24px;height:24px;border-radius:50%;background:var(--c-ivory);position:relative;transition:transform .25s}
.rc-role-chev::before{
  content:"";position:absolute;left:8px;top:7px;width:7px;height:7px;
  border-right:2px solid var(--c-navy);border-bottom:2px solid var(--c-navy);transform:rotate(45deg);
}
.rc-role[open] .rc-role-chev{transform:rotate(180deg)}
.rc-role-body{padding:0 14px 14px}
.rc-role-body p{font-size:16px;line-height:1.7;margin-bottom:10px}
.rc-role-meta{
  display:grid;grid-template-columns:auto 1fr;gap:6px 10px;
  font-size:16px;background:var(--c-ivory);border-radius:10px;padding:10px 12px;
}
/* アイボリーの地にオレンジでは読めないため紺にする */
.rc-role-meta dt{font-weight:800;font-size:14px;color:var(--c-navy)}
.rc-role-meta dd{font-weight:500}

/* ========== 仕事内容 ========== */
.rc-job-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.rc-job{
  display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;
  background:#fff;border:1.5px solid rgba(31,58,138,.1);border-radius:14px;padding:8px;
}
.rc-job img{width:96px;height:96px;object-fit:cover;border-radius:10px}
.rc-job img.rc-job-img--rally{object-position:50% 40%}
/* PCの横長（4:3）表示で頭が切れないよう、上寄りを見せる */
.rc-job img.rc-job-img--front{object-position:50% 0%}
.rc-job h3{font-size:18px;line-height:1.4;margin-bottom:2px;word-break:keep-all;overflow-wrap:anywhere}
.rc-job p{font-size:14px;line-height:1.7}

/* ========== 勤務時間 ========== */
.rc-shift-lead{font-size:16px;margin-bottom:14px}
.rc-shift-title{font-size:16px;font-weight:900;color:var(--c-navy);margin-bottom:8px}
.rc-shift-list{list-style:none;background:var(--c-ivory);border-radius:12px;padding:4px 14px;margin-bottom:12px}
.rc-shift-list li{
  display:flex;align-items:baseline;gap:14px;padding:10px 0;font-size:16px;
  border-bottom:1px dashed rgba(31,58,138,.18);
}
.rc-shift-list li:last-child{border-bottom:none}
.rc-shift-list b{width:3em;font-weight:900;color:var(--c-navy)}
.rc-shift-list span{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.02em}
.rc-note{font-size:14px;line-height:1.7;color:#555}

/* ========== 働きやすさ ========== */
.rc-benefits{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rc-benefit{background:#fff;border:1.5px solid rgba(31,58,138,.1);border-radius:14px;padding:12px 12px 14px}
.rc-benefit-ic{
  width:34px;height:34px;border-radius:10px;background:var(--c-yellow);color:var(--c-navy);
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;
}
.rc-benefit-ic svg{width:20px;height:20px}
.rc-benefit h3{font-size:18px;line-height:1.35;margin-bottom:4px;word-break:keep-all;overflow-wrap:anywhere}
.rc-benefit p{font-size:14px;line-height:1.7;color:#444}

/* ========== こんな人にオススメ ========== */
.rc-fits{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.rc-fit{
  display:flex;flex-direction:column;align-items:center;
  background:var(--c-ivory);border-radius:14px;padding:16px 8px 14px;
}
.rc-fit-ic{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--c-navy);background:var(--fit-bg);
}
.rc-fit-ic svg{width:28px;height:28px}
.rc-fit:nth-child(1){--fit-bg:var(--c-orange-soft)}
.rc-fit:nth-child(2){--fit-bg:var(--c-sky-tint)}
.rc-fit:nth-child(3){--fit-bg:#FBF3B8}
.rc-fit:nth-child(4){--fit-bg:var(--c-success-bg)}
.rc-fit h3{margin-top:10px;font-size:16px;line-height:1.4;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.rc-fit p{margin-top:6px;font-size:13px;line-height:1.7;color:#444}

/* ========== スタッフの声 ========== */
/* .rc-inner の左右余白を打ち消して横いっぱいに使い、次のカードを右にのぞかせる */
.rc-voices{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:-16px;padding:4px 16px 8px;scroll-padding-inline:16px;
  scrollbar-width:none;cursor:grab;
}
.rc-voices::-webkit-scrollbar{display:none}
/* ドラッグ中にスナップが効くと指（マウス）に追従しないため外す */
.rc-voices.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.rc-voice{
  flex:0 0 75%;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:10px;
  background:#fff;border:1.5px solid rgba(31,58,138,.1);border-radius:18px;padding:16px 14px;
}
.rc-voice-head{display:flex;align-items:center;gap:10px}
/* 円の地に頭〜胸を下寄せで置き、胸の切り口は円の下端で隠す */
.rc-voice-av{
  flex:none;width:48px;height:48px;border-radius:50%;background:var(--av-bg);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
}
.rc-voice-av img{width:43px;height:auto;margin-bottom:-5px}
.rc-voice h3{font-size:18px;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.rc-voice .rc-badges{margin:0}
.rc-voice p{font-size:16px;line-height:1.7}
.rc-voice-nav{display:flex;align-items:center;justify-content:center;margin-top:8px}
.rc-voice-dots{display:flex;justify-content:center;gap:6px}
.rc-voice-dots i{width:7px;height:7px;border-radius:50%;background:rgba(31,58,138,.2);transition:width .2s,background .2s}
.rc-voice-dots i.is-active{width:18px;border-radius:4px;background:var(--c-orange-deep)}
.rc-voice-prev,.rc-voice-next{display:none}

/* ========== 応募の流れ ========== */
.rc-flow{list-style:none}
.rc-flow li{position:relative;display:grid;grid-template-columns:32px 1fr;gap:12px;padding-bottom:28px}
.rc-flow li:last-child{padding-bottom:0}
/* 点線は項目ごとに、番号の下端から次の番号の上端まで引く（説明文の行数や間隔が変わっても線がずれない） */
.rc-flow li:not(:last-child)::before{
  content:"";position:absolute;left:15px;top:34px;bottom:-2px;width:2px;
  background:repeating-linear-gradient(var(--c-orange) 0 4px,transparent 4px 8px);
}
/* 見出しのフォントは字面が行の中央より下に寄るため、番号を2px下げて見た目の高さをそろえる */
.rc-flow-n{
  position:relative;top:2px;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-navy);color:var(--c-yellow);
  font-family:var(--font-display);font-weight:800;font-size:14px;
}
/* 採用後の工程は、採用までの3ステップと区別するため番号を白抜きにする */
.rc-flow li:has(+ .rc-flow-after)::before{background:repeating-linear-gradient(var(--c-navy) 0 4px,transparent 4px 8px)}
.rc-flow-after .rc-flow-n{background:#fff;color:var(--c-navy);box-shadow:inset 0 0 0 2px var(--c-navy)}
.rc-flow h3{font-size:18px;line-height:32px}
.rc-flow p{font-size:16px;line-height:1.7;color:#444}

/* ========== 応募（CTA） ========== */
.rc-cta{padding:44px 0;background:var(--c-orange-soft);text-align:center}
.rc-cta-text{font-size:18px;line-height:1.7;margin:10px 0 18px}
.rc-mail{position:relative;background:#fff;border:2px solid var(--c-navy);border-radius:16px;padding:16px 10px}
.rc-mail small{
  display:block;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.16em;
  color:var(--c-orange-deep);
}
.rc-mail a{
  display:block;margin:4px 0 10px;
  font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.4;color:var(--c-navy);word-break:break-all;
  text-decoration:underline;text-decoration-color:var(--c-orange);text-underline-offset:5px;
}
.rc-copy{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border:1.5px solid transparent;border-radius:999px;
  background:var(--c-ivory);color:var(--c-navy);
  font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.rc-copy svg{width:15px;height:15px}
.rc-copy-check{display:none}
.rc-copy.is-copied{background:var(--c-success-bg);border-color:var(--c-success);color:var(--c-success-text)}
.rc-copy.is-copied .rc-copy-ic{display:none}
.rc-copy.is-copied .rc-copy-check{display:block;color:var(--c-success)}
/* 読み上げ専用（見た目は隠す） */
.rc-copy-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 応募前の質問用（応募はメール、質問はDMと窓口を分ける） */
.rc-dm-lead{margin:28px 0 10px;font-size:18px;font-weight:700;line-height:1.6;color:var(--c-navy)}
.rc-dm{
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px;
  background:#fff;border:1px solid rgba(31,58,138,.25);border-radius:16px;
}
.rc-dm-icon{
  display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;
  background:linear-gradient(45deg,#FEDA75 0%,#FA7E1E 30%,#D62976 65%,#962FBF 100%);color:#fff;
}
.rc-dm-icon svg{width:36px;height:36px}
.rc-dm-account{margin:8px 0 0;font-family:var(--font-display);font-size:20px;font-weight:700}
.rc-dm-text{margin-top:4px;font-size:14px;line-height:1.7;color:var(--c-grey)}
.rc-dm-btn{margin-top:20px}
.rc-dm-btn svg{width:20px;height:20px}
.rc-dm-note{margin-top:10px;font-size:12px;color:var(--c-grey)}

/* ========== レスポンシブ ========== */
@media (max-width:992px){
  .header-nav{display:none}
}
@media (max-width:480px){
  /* 下部固定の応募ボタンを置かないため、common.css のボタン用の余白を戻す */
  body{padding-bottom:0}
}

@media (min-width:993px){
  .rc-sec,.rc-cta{padding:80px 0}
  .rc-lead{padding-bottom:0}
  /* 文章が主のセクションは、行が長くなりすぎないよう FV（1200px）より狭くする */
  .rc-inner{max-width:960px;padding-inline:24px}
  .rc-head{margin-bottom:28px}
  .rc-title{font-size:32px}
  .rc-br-sp,.rc-sp-only{display:none}

  .rc-lead-body p{font-size:20px}
  /* 吹き出しは本文の下に置き、文字の幅だけ左へ広げてアッキーの左隣に寄せる */
  .rc-talk{margin-top:28px}
  .rc-bubble{justify-self:end;padding-inline:16px}
  .rc-glance-band{padding:24px 0 28px}
  .rc-glance{max-width:960px;padding-inline:24px;grid-template-columns:repeat(4,1fr);gap:12px}
  .rc-glance li{padding:14px 16px}

  /* PCは2×2に並べて、すべて開いた状態で見せる（開閉は index.js で止める） */
  .rc-roles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .rc-role{border-color:var(--c-navy);border-radius:20px}
  .rc-role summary{grid-template-columns:72px 1fr;gap:16px;padding:24px 24px 20px;cursor:default}
  .rc-role-illust{width:72px;height:72px;border-radius:16px}
  .rc-role-illust svg{width:58px;height:58px}
  .rc-role-name{font-size:22px}
  .rc-badges{margin-top:8px}
  .rc-role-body{padding:0 24px 24px}
  .rc-role-body p{margin-bottom:18px}
  .rc-role-meta{gap:10px 14px;padding:16px 18px;border-radius:12px}
  .rc-role-chev{display:none}

  .rc-job-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  /* 3枚の高さは最も長いカードにそろうため、行を上に詰めて見出しの位置をそろえる */
  .rc-job{grid-template-columns:1fr;align-items:start;align-content:start;padding:10px 10px 16px}
  .rc-job img{width:100%;height:auto;aspect-ratio:4/3}
  .rc-job div{padding-inline:6px}

  .rc-shift-body{max-width:480px}
  .rc-shift-lead,.rc-shift-title,.rc-shift-list li,.rc-shift-list span{font-size:18px}
  .rc-note{font-size:16px}

  .rc-benefits{grid-template-columns:repeat(3,1fr);gap:16px}
  .rc-benefit{padding:18px 16px 20px}
  .rc-benefit h3{font-size:20px}
  .rc-benefit p{font-size:16px}

  .rc-fits{grid-template-columns:repeat(4,1fr);gap:16px}
  .rc-fit{padding:28px 20px 24px}
  .rc-fit-ic{width:72px;height:72px}
  .rc-fit-ic svg{width:36px;height:36px}
  .rc-fit h3{margin-top:14px;font-size:20px}
  .rc-fit p{margin-top:8px;font-size:16px}

  .rc-voices{margin-inline:0;padding:4px 0 8px;scroll-padding-inline:0}
  .rc-voice{flex-basis:calc((100% - 20px) / 3);scroll-snap-align:start}
  .rc-voice h3{font-size:20px}
  .rc-voice p{font-size:18px}
  .rc-voice .rc-badge{font-size:14px}
  /* ドットは中央のまま、前後の矢印を右端に置く */
  .rc-voice-nav{position:relative;justify-content:flex-end;gap:8px;min-height:40px;margin-top:12px}
  .rc-voice-dots{position:absolute;left:50%;transform:translateX(-50%)}
  .rc-voice-prev,.rc-voice-next{
    display:flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:2px solid var(--c-navy);border-radius:50%;background:#fff;color:var(--c-navy);cursor:pointer;
    transition:background .2s,color .2s,opacity .2s;
  }
  .rc-voice-prev svg,.rc-voice-next svg{width:18px;height:18px}
  .rc-voice-prev:hover:not(:disabled),.rc-voice-next:hover:not(:disabled){background:var(--c-navy);color:#fff}
  .rc-voice-prev:disabled,.rc-voice-next:disabled{opacity:.3;cursor:default}

  .rc-flow h3{font-size:20px}
  .rc-flow p{font-size:18px}

  .rc-mail,.rc-dm{max-width:560px;margin-inline:auto}
  .rc-dm-lead{margin-top:36px;font-size:20px}
  .rc-dm-account{font-size:24px}
  .rc-dm-text{font-size:16px}
  .rc-dm-note{font-size:14px}
}