@charset "UTF-8";
.rmpage{
  /* --- 配色（2026-08-29 改訂：白ベース＋企業カラーのブロック／参考サイト＝ドワンゴ採用）---
     色は既存トークンだけを使う。
       ベタ面・ブロック   = var(--green)  #47aa4f（企業カラーの明るい緑）
       白文字が必要な面   = var(--green-dark) #2f7d37（明るい緑は白文字2.95:1で不足するため）
       明るい緑の上の文字 = var(--text) #1a1a1a（5.91:1でAA合格）
       薄い面             = var(--green-soft) rgba(71,170,79,.1)
  */
  --rm-block:var(--green);        /* 写真の背後などに敷くブランドカラーのブロック */
  --rm-pale:var(--green-soft);    /* 薄い面 */
  --rm-idx-w:236px;               /* 左端の縦型インデックスの幅（PC） */
  --rm-inner:1152px;
}

/* ============================================================
   1. ヒーロー（白ベース。写真の右端＝コンテンツの右端に揃える）
   ============================================================ */
.rmpage .rm-hero{background:#fff;color:var(--text);position:relative;overflow:hidden}
.rmpage .rm-hero__inner{
  position:relative;z-index:1;
  max-width:var(--container);margin:0 auto;padding:76px var(--pad) 84px;
  display:grid;grid-template-columns:46fr 54fr;column-gap:56px;align-items:center;
  /* 2026-08-29 ユーザー指示で写真を拡大（旧 55:45） */
}
.rmpage .rm-hero__copy{display:flex;flex-direction:column;justify-content:center}
.rmpage .rm-hero__label{
  font-size:13px;font-weight:900;letter-spacing:.26em;text-indent:.26em;
  color:var(--green);margin:0 0 22px;
  /* 2026-08-29 ユーザー指示で企業カラー(#47aa4f)に。白背景では2.95:1なので
     WCAG AAの小文字基準4.5:1には届かない。基準を満たすなら --green-dark（5.11:1） */
}
/* 見出しは行ごとに企業メインカラー（--green #47aa4f）の帯を敷く。2026-08-29 ユーザー指示。
   ※白文字とのコントラストは2.95:1で、WCAG AAの大文字基準3:1にわずかに届かない。
     基準を満たしたい場合は帯を --green-dark（白文字5.11:1）にするか、文字を濃色にする。 */
.rmpage .rm-hero h1{
  font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:.01em;
  margin:0 0 30px;line-height:1.34;
}
.rmpage .rm-hero h1 .ln{
  display:table;   /* 文字数ぶんだけ帯が伸びる。inline-blockと違い行間の余白を拾わない */
  background:var(--green);color:#fff;
  padding:.20em .42em;margin:0 0 8px;
}
.rmpage .rm-hero h1 .ln:last-child{margin-bottom:0}
.rmpage .rm-hero__quote{
  font-size:clamp(15px,1.25vw,17px);line-height:1.95;color:var(--text);font-weight:500;
  margin:26px 0 18px;padding-left:18px;border-left:4px solid var(--green);
}
.rmpage .rm-hero__desc{
  font-size:15px;line-height:1.95;color:var(--text);margin:0 0 34px;
}
.rmpage .rm-hero__sign{padding-top:4px}   /* 上の薄い罫線は 2026-08-29 ユーザー指示で削除 */
.rmpage .rm-hero__sign .name{display:block;font-size:16px;font-weight:400;color:var(--text)}

/* 写真：グリッドの右カラムいっぱい＝コンテンツの右端でぴたりと終わる
   （背後の緑ブロックは 2026-08-29 ユーザー指示で撤去） */
.rmpage .rm-hero__media{position:relative;margin:0}
/* 代表写真は元の比率のまま。切り抜かない（2026-08-29 ユーザー指示） */
.rmpage .rm-hero__media img{width:100%;height:auto;display:block}

/* ============================================================
   2. パンくず
   ハーフトーンの罫線は既存 style.css では下側に入るが、このページは
   ヒーローが白背景でヒーローとの切れ目が無くなるため、上側に移す
   （2026-08-29 ユーザー確認済み。デザイン・文字サイズ・区切り・余白は既存のまま）
   ============================================================ */
.rmpage .breadcrumb{border-bottom:0;border-top:1px solid var(--line)}

/* ============================================================
   3+4. ページ内インデックス（左端の縦型・追従）＋ MESSAGE
        2026-08-29 指示書変更ぶん：横並びインデックス → 左端の縦型sticky／
        3カラムカード → 編集記事型の横長レイアウト
   ============================================================ */
/* 左＝縦型インデックス列／右＝本文列。MESSAGE と FUTURE の2セクションをまたぐので、
   インデックスの色面と追従がストーリーの終わりまで続く（2026-08-29 ユーザー指示） */
.rmpage .rm-main{
  display:grid;grid-template-columns:var(--rm-idx-w) minmax(0,1fr);align-items:stretch;
}
.rmpage .rm-main__body{min-width:0}
.rmpage .rm-message{padding:0}

/* --- 左端の縦型インデックス --- */
/* SPのアコーディオン用ボタン。既定は非表示（interview.css の .iv2toc-toggle と同じ作り）。
   ここで消しておかないとPCでも素のbuttonが描画され、現在地判定の基準にも紛れ込む */
.rmpage .rm-toc-toggle{display:none}
.rmpage .rm-index{background:var(--rm-block);color:var(--text)}
.rmpage .rm-index__stick{
  position:sticky;
  /* 追従開始位置。--rmhead は実際のヘッダー高さをJSが入れる（インタビューページの --ivhead と同じ方式） */
  top:calc(var(--rmhead,88px) + 20px);
  padding:34px 0 34px;
}
.rmpage .rm-index__label{
  font-size:11px;font-weight:900;letter-spacing:.24em;color:rgba(26,26,26,.88);   /* 明るい緑の上で5.0:1 */
  padding:0 22px 20px;margin:0;
}
.rmpage .rm-index__list{list-style:none;margin:0;padding:0}
.rmpage .rm-index__list a{
  display:block;padding:14px 20px 15px;position:relative;
  border-left:3px solid transparent;transition:background-color .2s ease,border-color .2s ease;
}
.rmpage .rm-index__list a .n{
  display:block;font-size:24px;font-weight:900;line-height:1;letter-spacing:.06em;
  color:rgba(26,26,26,.65);font-variant-numeric:tabular-nums;margin-bottom:6px;
  transition:color .2s ease;
  /* 明るい緑（#47aa4f）の上は白文字だと2.95:1で不足するため濃い文字を載せる */
}
.rmpage .rm-index__list a .t{
  display:block;font-size:12px;line-height:1.65;color:rgba(26,26,26,.88);
}
/* 3つのストーリーの見出しを 04 の下にぶら下げる（2026-08-29 ユーザー相談ぶん）。
   ヘッダーのドロップダウン（drop-child）と同じ「親の下に一段下げて並べる」考え方 */
.rmpage .rm-index__child a{padding-left:34px;position:relative}
.rmpage .rm-index__child a::before{
  content:"";position:absolute;left:20px;top:22px;width:8px;height:1px;background:rgba(26,26,26,.45);
}
.rmpage .rm-index__child a .n{font-size:15px;margin-bottom:4px}
.rmpage .rm-index__child a .t{font-size:11px;line-height:1.55}
.rmpage .rm-index__list a:hover{background:rgba(255,255,255,.28)}
/* 現在地：白い面を敷いて、明るい緑のブロックから浮かせる */
.rmpage .rm-index__list a.on{background:#fff;border-left-color:var(--green-dark)}
.rmpage .rm-index__list a.on .n{color:var(--green-dark)}
.rmpage .rm-index__list a.on .t{color:var(--text);font-weight:700}

/* --- 本文側 --- */
/* 本文列の内側。右端を、ヒーロー写真と同じ「ページのコンテナ右端」に揃える。
   340px = コンテナ半幅(1280/2=640) − 左右padding(64) − インデックス幅(236)
   ※ 100vw は幅ではなく max-width の計算にだけ使うので横スクロールは出ない */
.rmpage .rm-message__main,
.rmpage .rm-stories__inner{
  padding:0 0 0 72px;margin:0;
  max-width:min(calc(50vw + 340px), calc(100vw - var(--pad) - var(--rm-idx-w)));
}
.rmpage .rm-message{padding:96px 0 104px;scroll-margin-top:8px}

/* セクション見出し（MESSAGE／FUTURE）。2つとも同じ組み方に統一する。2026-08-29
   英字（大）→ 緑の短いライン → 日本語リード（緑）の順。共通の .heading を上書きするだけ */
/* 薄緑のボックスは「見出しを包む箱」にする。以前はセクション側に高さ固定（272px）の
   ::before を敷いていたが、PCでは見出しより長く伸びて下の 01 に被っていた（2026-08-29）。
   見出し自身の背景にすれば、どの画面幅でも見出しの高さぴったりで止まる。
   左は本文の行頭より 36px はみ出して、色面らしく見せる。 */
.rmpage .rm-sechead{
  text-align:left;display:block;position:relative;
  background:var(--rm-pale);
  /* 上を大きく空けた非対称の余白にする。上下均等だと「文字の背景」に見えて
     色面としての効きが弱くなる（2026-08-29 ユーザー指摘） */
  padding:104px 56px 40px 36px;
  margin:0 0 64px -36px;
  width:fit-content;min-width:min(56%,620px);max-width:100%;
}
.rmpage .rm-sechead .en{
  font-size:clamp(40px,5.6vw,72px);font-weight:900;line-height:1;letter-spacing:.03em;
  color:var(--text);
}
.rmpage .rm-sechead .ja{
  position:relative;margin:20px 0 0;padding-top:20px;
  font-size:clamp(15px,1.4vw,18px);font-weight:700;line-height:1.6;letter-spacing:.02em;
  color:var(--green-dark);
}
.rmpage .rm-sechead .ja::before{
  content:"";position:absolute;left:0;top:0;width:56px;height:3px;background:var(--green);
}

/* --- 3つのメッセージ：見出し／本文の横長2領域。カードにしない。
       連番（01〜03）は 2026-08-29 ユーザー指示で廃止。
       ※本文の見出し3つはページに残す。集約したのはインデックスの項目だけ --- */
.rmpage .rm-msgs{margin-top:40px}
.rmpage .rm-msg{
  display:grid;grid-template-columns:32fr 68fr;column-gap:3%;align-items:start;
  padding:46px 0;
  /* ページ内リンクの着地位置。style.css の html{scroll-padding-top:96px} が
     固定ヘッダー分をすでに見ているので、ここは余白の足し分だけ */
  scroll-margin-top:8px;
}
.rmpage .rm-msg + .rm-msg{border-top:1px solid var(--line)}
/* 連番を外したぶん、見出しの左に企業カラーの縦ラベルを立てる（2026-08-29 ユーザー指示） */
.rmpage .rm-msg__h{
  font-size:clamp(16px,1.35vw,20px);font-weight:700;line-height:1.75;color:var(--text);margin:0;
  padding-left:16px;border-left:5px solid var(--green);
  /* 「、」など句読点の位置で折り返させる。keep-all だけだと折り返し先が無いとき
     はみ出すので、overflow-wrap:anywhere を保険に付ける */
  word-break:keep-all;overflow-wrap:anywhere;
}
.rmpage .rm-msg__body{max-width:44em}
.rmpage .rm-msg__body p{font-size:15px;line-height:2.05;color:var(--text);margin:0}
.rmpage .rm-msg__body p + p{margin-top:1.4em}

/* 「される」側／「する」側は薄い緑のボックスにする（2026-08-29 ユーザー指示。区切り線は無し）。
   横並びは1カラムあたり300px前後を確保できる画面幅でだけ行う */
.rmpage .rm-msg__cols{display:grid;grid-template-columns:1fr;gap:16px}
.rmpage .rm-msg__sub{background:#fff;border:1px solid #c8e2cb;padding:22px 24px}
/* ↑ 枠は企業カラーを薄めた緑系。中は白（2026-08-29 ユーザー指示） */
@media (min-width:1600px){
  .rmpage .rm-msg__cols{grid-template-columns:1fr 1fr;gap:20px}
}
.rmpage .rm-msg__sub h3{
  font-size:15px;font-weight:700;color:var(--green-dark);margin:0 0 10px;line-height:1.65;
}
.rmpage .rm-msg__sub p{font-size:14.5px}

/* ============================================================
   5. 3つのストーリー（白ベース＋写真の背後にブランドカラーのブロック）
   ============================================================ */
.rmpage .rm-stories{
  background:#fff;color:var(--text);padding:0 0 104px;scroll-margin-top:8px;
  position:relative;overflow:hidden;
}
.rmpage .rm-stories__inner{position:relative;z-index:1}


.rmpage .rm-story{scroll-margin-top:8px}
.rmpage .rm-story + .rm-story{margin-top:104px;padding-top:96px;border-top:1px solid var(--line)}
.rmpage .rm-story__head{display:grid;grid-template-columns:120px 1fr;gap:0 28px;margin-bottom:40px}
.rmpage .rm-story__num{
  font-size:clamp(48px,5.4vw,76px);font-weight:900;line-height:.9;letter-spacing:.02em;
  color:rgba(71,170,79,.42);   /* 企業カラーを薄くした装飾数字 */
  font-variant-numeric:tabular-nums;
}
.rmpage .rm-story__title{
  font-size:clamp(20px,2.05vw,28px);font-weight:700;line-height:1.6;color:var(--text);margin:0;
  align-self:center;
}

/* 写真＋色ブロック。ブロックは左右交互にずらす（参考サイトの見せ方） */
.rmpage .rm-story__fig{position:relative;z-index:0;margin:0 0 44px}
.rmpage .rm-story__fig::before{
  content:"";position:absolute;top:-30px;width:56%;height:74%;background:var(--rm-block);z-index:-1;
}
.rmpage .rm-story__fig--l::before{left:-30px}
.rmpage .rm-story__fig--r::before{right:-30px}
/* 16/7 だと縦長の写真（recruit-03）で人物の頭が切れるため 16/9 に変更。
   写真ごとに見せたい位置が違うので object-position を個別に指定する（2026-08-29） */
.rmpage .rm-story__img{
  position:relative;z-index:1;
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center;
  display:block;background:var(--rm-pale);
}
.rmpage #story3 .rm-story__img{object-position:center 20%}   /* 頭が切れない位置 */
/* ↑ height:auto は必須。imgのheight属性（CLS対策で入れている）が
     プレゼンテーション属性として効き、aspect-ratio を無視して元画像の高さになる */
.rmpage .rm-story__fig--l .rm-story__img{margin-left:auto;width:calc(100% - 30px)}
.rmpage .rm-story__fig--r .rm-story__img{margin-right:auto;width:calc(100% - 30px)}

.rmpage .rm-story__body{columns:2;column-gap:56px}
.rmpage .rm-story__body p{
  font-size:14.5px;line-height:2.1;color:var(--text);margin:0 0 1.6em;
}
/* 段落が複数ある場合だけ、段落の途中でカラムをまたがないようにする。
   1段落しかない STORY 02／03 でこれを掛けると段落全体が分割不能になり、
   2カラムのうち片側が空になる（2026-08-29 プレビューで確認） */
.rmpage .rm-story__body p:not(:only-child){break-inside:avoid}
.rmpage .rm-story__body p:last-child{margin-bottom:0}


/* --- 本文の強調マーカー（2026-08-29 ユーザー指示）------------------------
   下半分だけを企業カラーで塗る蛍光ペン風。文字の上に色を重ねないので
   本文のコントラスト（12.2:1）が落ちない。<mark> の既定の黄色背景は打ち消す。 */
.rmpage .rm-mk{
  background:linear-gradient(transparent 62%, rgba(71,170,79,.38) 62%);
  color:inherit;font-weight:500;padding:0 .05em;
}

/* --- 本文の強調マーカー（2026-08-29 ユーザー指示）------------------------
   下半分だけを企業カラーで塗る蛍光ペン風。文字の上に色を重ねないので
   本文のコントラスト（12.2:1）が落ちない。<mark> の既定の黄色背景は打ち消す。 */
.rmpage .rm-mk{
  background:linear-gradient(transparent 62%, rgba(71,170,79,.38) 62%);
  color:inherit;font-weight:500;padding:0 .05em;
}

/* ============================================================
   アニメーション
   土台はサイト共通の .reveal / .is-visible（style.css の「アニメーション（控えめ）」）。
   新しい仕組みは作らず、このページ固有の動きだけをここに足す。
   .rmpage.js はページ末尾のスクリプトが付ける。JSが動かない環境では
   何も隠れない（サイト全体と同じ考え方）。
   ============================================================ */

/* --- ヒーローは純CSSで動かす（JS不要）---
   ファーストビューはJSの実行を待つと一瞬そのまま見えてから隠れる（チラつき）ので、
   トップページのヒーロー（style.css の hero-slide-left）と同じくCSSアニメーションにする。
   見出しの緑の帯は、採用トップの見出し（recruit-lp.css の mkWipe／mkText）と同じ
   「左から右へ走って文字が現れる」動き。 */
@keyframes rm-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes rm-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.rmpage .rm-hero__label{animation:rm-up .7s cubic-bezier(.22,.61,.36,1) .05s both}
.rmpage .rm-hero__media{animation:rm-up .85s cubic-bezier(.22,.61,.36,1) .12s both}
.rmpage .rm-hero h1 .ln{animation:rm-wipe .78s cubic-bezier(.4,0,.2,1) both}
.rmpage .rm-hero h1 .ln:nth-child(1){animation-delay:.20s}
.rmpage .rm-hero h1 .ln:nth-child(2){animation-delay:.36s}
.rmpage .rm-hero__quote{animation:rm-up .7s cubic-bezier(.22,.61,.36,1) .58s both}
.rmpage .rm-hero__desc{animation:rm-up .7s cubic-bezier(.22,.61,.36,1) .70s both}
.rmpage .rm-hero__sign{animation:rm-up .7s cubic-bezier(.22,.61,.36,1) .82s both}

/* 本文の強調マーカー：蛍光ペンを左から右へ引く */
.rmpage.js .rm-mk{background-size:0 100%;background-repeat:no-repeat}
.rmpage .rm-mk.is-visible{
  background-size:100% 100%;
  transition:background-size .65s cubic-bezier(.4,0,.2,1) .12s;
}

/* 写真の背後の緑ブロック：下から立ち上がって写真を受ける */
.rmpage.js .rm-story__fig::before,
.rmpage.js .rm-sechead::before{transform:scaleY(0);transform-origin:bottom}
.rmpage .rm-story__fig.is-visible::before{
  transform:none;transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

/* 見出しの左の緑ラベル：上から伸びる */
.rmpage.js .rm-msg__h{border-left-color:transparent}
.rmpage .rm-msg__h{position:relative}
.rmpage.js .rm-msg__h::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--green);
  transform:scaleY(0);transform-origin:top;
}
.rmpage .rm-msg.is-visible .rm-msg__h::before{
  transform:none;transition:transform .55s cubic-bezier(.22,.61,.36,1) .1s;
}
@media (max-width:768px){ .rmpage.js .rm-msg__h::before{width:4px} }

/* ============================================================
   タブレット
   ============================================================ */
/* 3領域（連番／見出し／本文）を保てる最小幅は約1240px。これより狭い画面では
   連番＋見出しを1行目、本文を2行目に折り返す（見出し列が狭くなりすぎるのを防ぐ） */
@media (max-width:1240px){
  .rmpage{--rm-idx-w:180px}
  .rmpage .rm-hero__inner{grid-template-columns:52fr 48fr;column-gap:36px;padding:56px 32px 64px}
  .rmpage .rm-story__fig::before{top:-20px}
  .rmpage .rm-story__fig--l::before{left:-20px}
  .rmpage .rm-story__fig--r::before{right:-20px}
  .rmpage .rm-story__fig--l .rm-story__img,
  .rmpage .rm-story__fig--r .rm-story__img{width:calc(100% - 20px)}
  .rmpage .rm-message__main,
  .rmpage .rm-stories__inner{padding:0 32px 0 40px;max-width:none}
  .rmpage .rm-sechead{padding:76px 40px 30px 24px;margin:0 0 48px -24px;min-width:min(70%,480px)}
  /* 見出しを1行目、本文を2行目に折り返す */
  .rmpage .rm-msg{grid-template-columns:1fr;row-gap:18px;padding:38px 0}
  .rmpage .rm-msg__body{max-width:none}
  .rmpage .rm-message{padding:64px 0 72px}
  .rmpage .rm-index__list a{padding:12px 14px 13px}
  .rmpage .rm-index__list a .n{font-size:19px}
  .rmpage .rm-index__label{padding:0 16px 16px}
  .rmpage .rm-story__body{column-gap:40px}
}

/* ============================================================
   スマートフォン（既存の768px境界に合わせる）
   ============================================================ */
@media (max-width:768px){
  /* --- ヒーロー：テキスト → 写真の縦積み（指示書4） --- */
  .rmpage .rm-hero__inner{grid-template-columns:1fr;row-gap:28px;padding:40px 20px 44px}
  .rmpage .rm-hero__copy{padding:0}
  .rmpage .rm-hero__label{font-size:11px;letter-spacing:.22em;margin-bottom:16px}
  .rmpage .rm-hero h1{font-size:23px;line-height:1.5;margin-bottom:22px}
  .rmpage .rm-hero__quote{font-size:14px;line-height:1.9;padding-left:14px;margin-bottom:14px}
  .rmpage .rm-hero__desc{font-size:13.5px;line-height:1.9;margin-bottom:26px}
  .rmpage .rm-hero__sign .name{font-size:15px}


  /* --- インデックス：左端の固定を解除し、上部固定のアコーディオンにする ---
     動き方は社員インタビューページの目次（interview.css .iv2side / js/interview-toc.js）と同じ。
       閉じている＆本文に入る前 … 「INDEX」
       閉じている＆読み始めた後 … いま読んでいる項目（連番＋項目名）
       開いている             … 「INDEX」＋全項目
     配色だけこのページに合わせる（企業カラーの面＋濃い文字）。2026-08-29 ユーザー指示 */
  .rmpage .rm-main{display:block}
  .rmpage .rm-index{
    position:sticky;top:var(--rmhead,72px);z-index:20;
    background:var(--rm-block);border-bottom:0;
    box-shadow:0 6px 16px rgba(15,44,26,.16);
  }
  .rmpage .rm-index__stick{position:static;padding:0 20px}
  .rmpage .rm-index__label{display:none}          /* 1行目はボタン側が出す */

  .rmpage .rm-toc-toggle{
    display:flex;align-items:center;gap:12px;width:100%;
    background:transparent;border:0;padding:13px 0;cursor:pointer;
    font:inherit;font-size:13.5px;font-weight:700;color:var(--text);text-align:left;
  }
  .rmpage .rm-toc-n{
    flex:0 0 22px;height:22px;border-radius:50%;background:#fff;color:var(--green-dark);
    font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
    font-variant-numeric:tabular-nums;
  }
  .rmpage .rm-toc-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rmpage .rm-toc-toggle.is-menu .rm-toc-n,
  .rmpage .rm-toc-toggle.no-n .rm-toc-n{display:none}
  .rmpage .rm-toc-toggle.is-menu{font-size:12px;letter-spacing:.22em;font-weight:900}
  .rmpage .rm-toc-toggle::after{
    content:"";margin-left:auto;flex:none;width:9px;height:9px;
    border-right:2px solid var(--text);border-bottom:2px solid var(--text);
    transform:rotate(45deg);transform-origin:60% 60%;transition:transform .2s ease;
  }
  .rmpage .rm-index.is-open .rm-toc-toggle::after{transform:rotate(-135deg)}

  .rmpage .rm-index__list{
    display:none;flex-direction:column;padding:2px 0 12px;
    border-top:1px solid rgba(26,26,26,.26);
  }
  .rmpage .rm-index.is-open .rm-index__list{display:flex}
  .rmpage .rm-index__list a{
    display:flex;align-items:center;gap:12px;padding:9px 0;border-left:0;background:transparent;
  }
  .rmpage .rm-index__list a .n{
    flex:0 0 22px;height:22px;border-radius:50%;margin:0;
    border:1px solid rgba(26,26,26,.5);color:rgba(26,26,26,.75);
    font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  }
  .rmpage .rm-index__list a .t{font-size:13.5px;color:var(--text)}
  .rmpage .rm-index__list a:hover{background:transparent}
  .rmpage .rm-index__list a.on{background:transparent}
  .rmpage .rm-index__list a.on .n{background:#fff;border-color:#fff;color:var(--green-dark)}
  /* 選択中の項目は文字を白に（2026-08-29 ユーザー指示）。
     太字と丸の白抜きも併用しているので、色だけに頼った表現にはなっていない */
  .rmpage .rm-index__list a.on .t{color:#fff;font-weight:700}
  .rmpage .rm-toc-toggle{color:var(--text)}
  .rmpage .rm-index__child a{padding-left:26px}
  .rmpage .rm-index__child a::before{left:8px;top:50%;width:10px}
  .rmpage .rm-index__child a .n{flex:0 0 20px;height:20px;font-size:10px;margin:0}
  .rmpage .rm-index__child a .t{font-size:12.5px}

  /* 目次から飛んだとき、見出しがヘッダー＋固定バーの下に隠れないようにする。
     html{scroll-padding-top:96px} に上乗せする分だけを持たせる */
  .rmpage .rm-msg,
  .rmpage .rm-message,
  .rmpage .rm-story,
  .rmpage .rm-stories{scroll-margin-top:44px}

  /* --- MESSAGE：連番→見出し→本文を縦に。カードにはしない --- */
  .rmpage .rm-message__main,
  .rmpage .rm-stories__inner{padding:0 20px;max-width:none}
  .rmpage .rm-message{padding:44px 0 52px}
  .rmpage .rm-msgs{margin-top:24px}
  .rmpage .rm-msg{display:block;padding:30px 0}
  .rmpage .rm-msg__h{font-size:17.5px;line-height:1.68;margin-bottom:20px;
    padding-left:13px;border-left-width:4px}
  .rmpage .rm-msg__body{max-width:none}
  .rmpage .rm-msg__body p{font-size:14.5px;line-height:2}
  .rmpage .rm-msg__sub{padding:18px 18px}

  /* --- ストーリー --- */
  .rmpage .rm-stories{padding:56px 0}
  .rmpage .rm-story__fig{margin-bottom:28px}
  .rmpage .rm-story__fig::before{top:-14px;width:62%;height:70%}
  .rmpage .rm-story__fig--l::before{left:-14px}
  .rmpage .rm-story__fig--r::before{right:-14px}
  .rmpage .rm-story__fig--l .rm-story__img,
  .rmpage .rm-story__fig--r .rm-story__img{width:calc(100% - 14px)}
  .rmpage .rm-sechead{
    padding:62px 26px 26px 20px;margin:0 0 34px -20px;min-width:min(78%,320px)}
  .rmpage .rm-sechead .en{font-size:36px}
  .rmpage .rm-sechead .ja{font-size:15px;margin-top:14px;padding-top:14px}
  .rmpage .rm-story + .rm-story{margin-top:56px;padding-top:48px}
  .rmpage .rm-story__head{grid-template-columns:1fr;gap:0;margin-bottom:24px}
  .rmpage .rm-story__num{font-size:40px;margin-bottom:12px}
  .rmpage .rm-story__title{font-size:19px;line-height:1.65}
  .rmpage .rm-story__img{aspect-ratio:4/3}
  .rmpage .rm-story__body{columns:1}
  .rmpage .rm-story__body p{font-size:14px;line-height:2}

}

/* ============================================================
   ページ下部のボタン列（採用トップへ戻る／仕事について知る）
   2026-08-29 ユーザー指示で「仕事について知る」を右隣に追加。
   土台は共通の `.jp-pill` + `.ivbtm .jobs-back__btn`（parts.css）。同値コピーは作らない。
   採用トップの「代表メッセージを読む」（recruit-lp.css の
   `.recruit-lp .msg-links .btn-outline`）との差分だけをここで合わせる：
   枠2px／文字800／矢印との間隔14px。
   ※高さは隣の「採用トップへ戻る」に揃えたいので 48px（共通側の値）のまま。
     代表メッセージを読む は padding 指定で約50px。1〜2pxの差は横並びの
     不揃いのほうが目立つため、そろえる側を優先した
   ============================================================ */
/* ここだけ `.rmpage` の外（`.ivbtm` 配下）にあるので素のクラス名で書く。
   `.rm-backrow` / `.rm-nextbtn` はこのページにしか無い名前で、
   このCSS自体も代表メッセージページでしか読み込まないため衝突しない */
.rm-backrow{
  display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
}
/* 枠・文字の太さは隣の「採用トップへ戻る」に合わせる（共通パーツの値のまま）。
   代表メッセージを読む の枠2px・文字800も試したが、並べると新しい方だけ太く見えた。
   仕組み・角丸・左から色が流れ込む演出は 代表メッセージを読む と同じ（.jp-pill 系のF方式）*/
/* 進む導線。`.jobs-back__btn` を共用しているが、あちらは 2026-08-29 に薄い緑グレーへ
   変更したので、このボタンだけ企業カラーの緑に戻す（＝`.jp-pill` 本来の値）。
   白地・緑枠・緑文字 → ホバーで緑が左から流れ込んで白文字、という標準の動き */
.rm-nextbtn{background:#fff;border-color:var(--green);color:var(--green-dark)}
.rm-nextbtn::after{background:var(--green)}
.rm-nextbtn:hover{color:#fff}
/* 矢印は「採用トップへ戻る」と同じSVGの左右反転。stroke:currentColor なので文字色に追従する */
.rm-nextbtn svg{width:17px;height:17px;flex:none;transition:transform .25s ease}
.rm-nextbtn:hover svg{transform:translateX(3px)}
@media(max-width:767px){
  .rm-backrow{gap:10px}
}