/* =========================================================
   #roadmap  「CNSで働くロードマップ」スクロールタイムライン
   既存 style.css は変更せず、このファイルだけを追加読み込みしてください。
   ブランドカラー: WORK = #0081d5 / LIFE = #ff8800（既存サイトの配色に合わせています）
   ========================================================= */

#roadmap{
  position: relative;
  background: #baf0ff;
  padding-bottom: 60px;
  /* 年代ナビ（.rm-age-nav）は .rm-timeline の中に配置し、position:sticky で追従させる。
     ここ(#roadmap)自体に overflow:hidden は付けない（祖先のoverflowが非visibleだと
     子孫のposition:stickyが効かなくなるため）。装飾イラストのはみ出しは
     .rm-deco-layer 自身の overflow:hidden（100vw幅のレイヤー）でクリップしている。 */
}

/* ---------- リード文（見出し直下の説明テキスト） ---------- */
.rm-lead{
  width: 100%;
  margin: 5% auto 8%;
  padding: 0 20px;
  text-align: center;
	font-size: clamp(0.85rem, 0.75rem + 0.5vw, 1.125rem);
  line-height: 1.9;
  color: #000;
}

/* ---------- WORK / LIFE 見出しバー（roadmap内でスクロール追従） ---------- */
.rm-header{
        position: sticky;
    top: 120px;
    z-index: 50;
    display: flex;
    max-width: 776px;
    margin: 0 auto 8%;
    padding: 0 20px;
    gap: 56px;
}
.rm-header .rm-half{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 20px 20px 0 0;
  color: #fff;
  font-family: 'Jost', 'M PLUS Rounded 1c', sans-serif;
  font-weight: 700;
  letter-spacing: .2em;
  font-size: 26px;
	padding: 0.5em 0;
}
.rm-header .rm-work{ background: #0081d5; }
.rm-header .rm-life{ background: #ff6f00; }

/* ---------- 年代ナビゲーション ----------
   PC: .rm-timeline 全体にぴったり重なる透明な箱を position:absolute; inset:0 で作り
       （.rm-age-nav は .rm-timeline の中に配置されているので、その高さぴったりになる）、
       その中で実際に見える .rm-age-track を position:sticky で追従させる。
       sticky の追従範囲は .rm-timeline の高さに限定されるため、
       前後の要素（WORK/LIFE見出しより上・次セクション）には表示されない。
   SP: 固定表示はせず、GOALバナーの下（.rm-timelineの最後）に通常の要素として配置。
------------------------------------------------- */
.rm-age-nav{
  z-index: 60;
}

.rm-age-track{ display:flex; align-items:center; position:relative; z-index:1; }
.rm-age-dot{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; position:relative; flex-shrink:0;
  color:#2b3a42; font-family:'M PLUS Rounded 1c', 'Noto Sans JP', sans-serif;
}
.rm-age-dot .rm-bubble{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#e2f5ff; color:#0081d5;
  font-size:13px; font-weight:700;
  transition: all .25s ease;
}
.rm-age-dot.rm-start .rm-bubble{ background:#ffe14d; color:#5b4600; }
.rm-age-dot.rm-goal .rm-bubble{ background:#7fd0ff; color:#0a3f57; }
.rm-age-dot .rm-lbl{ font-size:10px; margin-top:3px; color:#000; font-weight:800; }
.rm-age-dot.active .rm-bubble{
  background: #0081d5;
  color:#fff;
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(0,129,213,.2);
}

@media (min-width:769px){
  .rm-age-nav{
    position: absolute;
    inset: 0; /* .rm-timeline 全体の高さぴったりに広がる透明な箱（クリックは奪わない） */
    pointer-events: none;
  }
  .rm-age-track{
    position: fixed;
    top: 50%;
    right: 80px;
    transform: translateY(-50%);
    flex-direction:column;
    gap:14px;
    border-radius: 40px;
    padding: 18px 14px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px rgba(0,0,0,.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  /* .rm-timeline がスクロールで画面内に入っている間だけ表示 */
  #roadmap.rm-in-view .rm-age-track{ opacity: 1; pointer-events: auto; }
  .rm-age-track::before{
    content:""; position:absolute; left:50%; top:0; bottom:0; width:2px;
    background:#cfe4ee; transform:translateX(-50%); z-index:-1; margin: 32px 0;
	  
  }
  .rm-age-dot .rm-bubble{ width:46px; height:46px; }
  .rm-age-dot.rm-start .rm-bubble,.rm-age-dot.rm-goal .rm-bubble{ width:34px; height:34px; }
}

@media (max-width:768px){
	.rm-header .rm-half {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border-radius: 10px 10px 0 0;
    color: #fff;
    font-family: 'Jost', 'M PLUS Rounded 1c', sans-serif;
    font-weight: 700;
    letter-spacing: .2em;
    font-size: 17px;
    padding: 0;
}
	
  /* SPは画面下部に固定表示（position:fixed）する。
     表示/非表示は #roadmap.rm-nav-in-view の付け外しのみで行い、
     この判定は roadmap.js 側で .rm-timeline を基準にしたScrollTriggerが行うため、
     「.rm-timelineの範囲内（タイムラインが画面内にある間）だけ」表示される
     （#roadmap全体ではなく、.rm-timelineの上端〜下端の範囲に限定される）。 */
  .rm-age-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  #roadmap.rm-nav-in-view .rm-age-nav{
    opacity: 1;
    pointer-events: auto;
  }
  .rm-age-track{
    flex-direction:row; gap:4px; width:100%; justify-content:space-between;
    background: rgba(255,255,255,.92);
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
    border-radius: 20px;
    padding: 14px 10px;
  }
  .rm-age-track::before{
    content:""; position:absolute; top:50%; left:6%; right:6%; height:2px;
    background:#cfe4ee; z-index:-1; transform: translateY(-50%);
  }
  .rm-age-dot .rm-bubble{ width:32px; height:32px; font-size:11px; }
  .rm-age-dot.rm-start .rm-bubble,.rm-age-dot.rm-goal .rm-bubble{ width:24px; height:24px; }
  .rm-age-dot .rm-lbl{
    /* 高さに影響させないよう絶対配置にする。
       これにより START/GOAL（ラベルあり）と他の年代（ラベルなし）の
       .rm-bubble の縦中心が、すべて .rm-age-track の縦中央（50%）に揃う。 */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    white-space: nowrap;
    font-size: 8px;
  }
  .rm-header{ top: 60px; }
}

/* ---------- マスコット（年代ナビの現在地＝アクティブな年代に追従） ----------
   .rm-track-mascot は .rm-age-track の子として配置されている。
   進行方向の座標（PC:top / SP:left）は roadmap.js が現在アクティブな
   .rm-age-dot の位置に合わせてGSAPでアニメーションさせる。
   進行方向と垂直な向きのズレ（トラックの外側にはみ出す分）はCSSのtransformで固定。 */
.rm-track-mascot{
  position: absolute;
  z-index: 65;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none;
}
.rm-track-mascot img{ width:54px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.2)); display:block; }
.rm-scroll-cue{
  margin-top:4px;
  background:#111; color:#fff;
  font-weight:700; font-size:10px; letter-spacing:.1em;
  padding:4px 10px; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-family:'M PLUS Rounded 1c', sans-serif;
  white-space: nowrap;
}
.rm-scroll-cue .rm-arrow{ font-size:12px; }

@media (min-width:769px){
  .rm-track-mascot{
    /* コンテナ幅に依存しない書き方：left:100%（＝コンテナの右端にぴったり付く位置）
       + margin-left（隙間）でトラックの右側に配置。 */
    left: 100%;
    margin-left: 14px;
    top: 0; /* JSが現在地のdotに合わせて更新 */
    transform: translateY(-50%);
  }
}
@media (max-width:768px){
  .rm-track-mascot{
    top: 50%;
    left: 0; /* JSが現在地のdotに合わせて更新 */
    transform: translate(-50%, calc(-100% - 18px)); /* トラックの上側に配置 */
  }
  .rm-track-mascot img{ width:38px; }
}

/* ---------- タイムライン本体 ---------- */
.rm-timeline{
  position:relative;
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 10px;
  width: 90%;
}

/* START / GOAL バナーを内包する行。白線・マスコットの範囲には含まれない。 */
.rm-flag-stage{
  position:relative;
  display:flex;
  z-index:2;
}

/* ---------- road-body：白線・マスコット・装飾・WORK/LIFEカードの入れ物 ----------
   START バナーの直後〜GOAL バナーの直前までしか存在しないので、
   中の .rm-path-line と .rm-line-mascot は自動的に「STARTの下からGOALの上まで」に収まる。 */
.rm-road-body{
  position:relative;
  /* 以前はここに overflow:hidden を置いて装飾イラスト（.rm-deco）の
     横はみ出しを防いでいたが、それだと中央マスコット（.rm-line-mascot）が
     START/GOALバナーに近づいたときに上下方向までクリップされてしまい、
     バナーの「前面」に出てこられなかった。
     横方向のクリップは .rm-deco-layer 側に持たせ、この要素自体は
     overflow を持たせない（＝マスコットが上下にはみ出してバナーの前に出られる）。 */
}

/* 装飾イラスト専用レイヤー：縦方向は .rm-road-body とぴったり同じ範囲(top:0/bottom:0)、
   横方向はビューポート全幅(100vw)まで広げる。
   カード側は .rm-timeline（最大1000px）に収まっているため、装飾をこの
   フルブリードレイヤー上で「タイムライン中央から一定px離した位置」に置けば、
   ウィンドウ幅が変わってもカードとの距離が縮まって重なることがない
   （%指定だとコンテナが狭くなるほどカードに寄ってしまうため、あえてpx/calc()指定にしている。
   HTML側の各 .rm-deco の left/right は calc(50% - 距離px) の形式で指定する）。
   ここの overflow:hidden が、ウィンドウが1000px+装飾の距離より狭い時に
   装飾を画面外へ自然にクリップして、カードに被らないようにする役目も兼ねる。 */
.rm-deco-layer{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}

.rm-path-line{
  position:absolute;
  left:50%; top:0; bottom:0; width:30px;
  transform: translateX(-50%);
  background: #fff;
  z-index:1;
}
@media (max-width:768px){
  .rm-path-line{ width:16px; }
}

/* ---------- 中央の白線（.rm-path-line）に追従するマスコット ----------
   年代ナビ（.rm-age-nav / .rm-track-mascot）とは別物。ナビではない。
   .rm-road-body 内で position:absolute; left:50% に固定し、
   top を roadmap.js が現在のスクロール進捗（0%→100%）に合わせて動かす。
   STARTの下〜GOALの上の間、常に画面中央の白線の上を歩いているように見せる。 */
.rm-line-mascot{
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%, -50%);
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
/* GOAL用GIFに切り替わったとき：白線の終点(top:100%)を基準に、通常時(-50%＝
   半分だけ下にはみ出す)よりもキャラクターを上寄りに配置し、GOALバナー画像との
   重なりを最小限に抑える。 */
.rm-line-mascot.rm-line-mascot--goal{
  transform: translate(-50%, -70%);
}
.rm-line-mascot img{
  width:160px;
  height:160px; /* walk側とgoal側でGIFの縦横比が違っても見た目の大きさを揃える */
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.2));
  display:block;
}
@media (max-width:768px){
  .rm-line-mascot img{ width:100px; height:100px; }
}

/* ---------- START / GOAL バナー（1枚画像を差し込む枠） ----------
   STARTバナーは下（.rm-road-bodyの白線側）の余白をゼロにして白線に
   ぴったりくっつける。GOALバナーは逆に上の余白をゼロにする。 */
.rm-flag-banner{
  width:100%;
  display:flex; align-items:center; justify-content:center;
  margin: 8px 0 0; /* START側：下の余白なし＝白線にぴったりくっつく */
  opacity:0;
}
.rm-flag-banner.rm-goal-banner{
  margin: 0 0 18px; /* GOAL側：上の余白なし＝白線にぴったりくっつく */
}
.rm-flag-banner img{
  width:100%;
  max-width:438px;
  display:block;
}
@media (max-width:768px){
  .rm-flag-banner img{ max-width:280px; }
}

/* ---------- WORK / LIFE：独立した2カラム ----------
   .rm-columns は2カラムのグリッドで左右に並べるだけ。
   各カラム（.rm-col-work / .rm-col-life）は flex縦並び＋gapで、
   同じカラム内で連続するカード同士の間隔を常に36pxに統一する
   （余白調整用に .rm-spacer を挟むこともできる／下記参照）。
   カードは中央の白線側へ寄せ、PCでは最大340pxまでの幅にする。 */
.rm-columns{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  padding: 130px 20px 160px;
  z-index:2;
}
.rm-col{
  display:flex;
  flex-direction:column;
  gap:36px;
}
.rm-col-work{ align-items:flex-end; }
.rm-col-life{ align-items:flex-start; }

/* WORK/LIFEの間隔調整用の空スペーサー。中身は空でOK。
   使い方: <div class="rm-spacer" style="height:80px;"></div> を
   .rm-col-work / .rm-col-life の好きな位置（カードとカードの間）に挿入すると、
   その分だけそのカラムの後続カードが下にずれ、反対カラムとの年代の見た目位置を
   調整できる（HTML側は空div生成OKという前提で追加）。 */
.rm-col .rm-spacer{
  flex:0 0 auto;
  width:1px;
  pointer-events:none;
}
.spc1{
	margin-top: 440px!important;
}
.spc2{
	margin-top: 440px!important;
}
.spc3{
	margin-top: 1220px!important;
}
.spc4{
	margin-top: 850px!important;
}
.spc5{
	margin-top: 330px!important;
}
.spc6{
	margin-top: 338px!important;
}
.spc7{
	margin-top: 346px!important;
}
.spc8{
	margin-top: 346px!important;
}

@media (max-width:768px){
	.spc1 {
    margin-top: 135% !important;
}
	.spc2 {
    margin-top: 137% !important;
}
	.spc3 {
    margin-top: 377% !important;
}
	.spc5 {
    margin-top: 105% !important;
}
	.spc4 {
    margin-top: 260% !important;
}
	.spc6 {
    margin-top: 95% !important;
}
	.spc7 {
    margin-top: 108% !important;
}
	.spc8 {
    margin-top: 108% !important;
}
	
	
	.rm-header {
    position: sticky;
    top: 100px;
    z-index: 50;
    display: flex;
    max-width: 100%;
    margin: 0 auto 8%;
    padding: 0;
    gap: 46px;
}
  .rm-columns{ column-gap: 12px;
        padding: 16px 10px 24px;
        width: 97%;
        margin: 0 auto; }
  .rm-col{ gap:16px; }
}

.rm-event-card{
  overflow:visible; /* 画像ごとにアニメーションさせるため、はみ出しを許可（横方向はimg側width100%で収まる） */
  width:100%;
  max-width:340px;
}
.rm-event-card img{ width:100%; display:block; opacity:0; }
/* 同じカード内に画像が複数（2枚でも3枚でも）入る場合、2枚目以降の画像の
   上に20pxの間隔をあける。年代・カードごとに個別指定しなくても
   自動的に統一される共通ルール。 */
.rm-event-card img + img{ margin-top:20px; }
.rm-col-work .rm-event-card{ margin-right:16px; } /* 6px + 10px */
.rm-col-life .rm-event-card{ margin-left:16px; } /* 6px + 10px */

/* ---------- 装飾イラスト（樹木・鳥・自転車・人物など） ---------- */
/* .rm-road-body は position:relative なので、%指定でその中で自由配置できます。
   左右は「カードの外側の余白」に置くのが基本です。PC のみ表示（SPは余白が少ないため非表示）。 */
.rm-deco{
  position:absolute;
  z-index:1;
  opacity:0;
  pointer-events:none;
}
.rm-deco img{ width:100%; display:block; }
.rm-deco.rm-deco-xs{ width:3%; }
.rm-deco.rm-deco-sm{ width:4%; }
.rm-deco.rm-deco-md{ width:5%; }
.rm-deco.rm-deco-lg{ width:8%; }
.rm-deco.rm-deco-xl{ width:9%; }

/* roadsign.png はマスコットが「くぐる」演出のため、マスコット（z-index:40）より
   前面に表示する。 */
.rm-deco.rm-deco-front{ z-index:45; }

/* ---------- CNS ロードサイン（マスコットがくぐる看板） ----------
   以前は top:% の絶対配置で、WORK/LIFEカードの実際の高さ次第では
   カードと重なってしまう可能性があった。
   現在は .rm-columns（セグメント）と .rm-columns の"間"に通常の要素として
   配置しているため、ドキュメントフロー上、構造的にカードと重ならない。
   （index.html 側で、ロードサインを挟みたい位置ごとに .rm-columns を
   分割し、その間にこの .rm-roadsign-row を差し込む） */
.rm-roadsign-row{
  position: relative;
  z-index: 40; /* .rm-path-line（z-index:1）より前面、カード（z-index:2）と同等以上 */
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding: 6px 0;
  opacity:0;
  pointer-events:none;
}
.rm-roadsign-row img{
  width: 230px;
  display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
}

@media (max-width:768px){
  .rm-deco{ display:none; } /* SPは横幅が狭くカードと重なるため非表示 */
  .rm-deco-layer{ display:none; }
  .rm-roadsign-row img{ width:150px; }
}