/* ===== 「介護が始まってから、両立が回り出すまで」アニメーション（2026-09-28）=====
   使い方：rf-flow.css と rf-flow.js を読み込み、<div class="rf" data-rf> …6つの .rf-scene… </div> を置く。
   文字はすべてHTMLなので検索エンジンにも読まれる。動きを減らす設定の人には静止した一覧で表示する。 */
.rf { --rf-navy:#1C3175; --rf-green:#5AB030; --rf-green-l:#EEF6EA; --rf-skin:#F4D5BC; --rf-hair:#3B2F2A; --rf-amber:#F5A623;
      max-width:960px; margin:0 auto; }
.rf-stage { position:relative; background:linear-gradient(160deg,#F7FBF4 0%,#EEF3FA 100%); border-radius:16px;
            box-shadow:0 6px 28px rgba(28,49,117,0.10); overflow:hidden; min-height:340px; }
.rf-scene { position:absolute; inset:0; display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:12px;
            padding:26px 34px; margin:0; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s; }
.rf-scene.is-active { opacity:1; visibility:visible; }
.rf-art svg { width:100%; height:auto; max-height:280px; display:block; }
.rf-cap { color:#333; }
.rf-cap .rf-step { display:inline-block; background:var(--rf-green); color:#fff; font-size:12px; font-weight:700;
                   padding:4px 12px; border-radius:20px; letter-spacing:.06em; margin-bottom:10px; }
.rf-cap h3 { font-size:1.35rem; color:var(--rf-navy); line-height:1.5; margin:0 0 10px; }
.rf-cap p { font-size:.98rem; line-height:1.9; margin:0; color:#444; }
.rf-scene.is-active .rf-cap > * { animation:rfUp .6s ease both; }
.rf-scene.is-active .rf-cap h3 { animation-delay:.12s; }
.rf-scene.is-active .rf-cap p { animation-delay:.28s; }

/* 操作バー */
.rf-bar { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; justify-content:center; }
.rf-dots { display:flex; gap:8px; }
.rf-dot { width:34px; height:8px; border-radius:6px; border:0; background:#D7E2D0; cursor:pointer; padding:0; position:relative; overflow:hidden; }
.rf-dot.is-done { background:var(--rf-green); }
.rf-dot.is-active::after { content:""; position:absolute; inset:0; background:var(--rf-green); transform-origin:left; animation:rfFill var(--rf-dur,3.6s) linear forwards; }
.rf-stage.is-paused ~ .rf-bar .rf-dot.is-active::after, .rf.is-paused .rf-dot.is-active::after { animation-play-state:paused; }
.rf-btn { border:1.5px solid #c9d3c3; background:#fff; color:var(--rf-navy); border-radius:50px; padding:7px 18px; font-size:.88rem;
          font-weight:700; cursor:pointer; transition:all .25s ease; }
.rf-btn:hover { border-color:var(--rf-green); color:#3f8a1f; }
.rf-btn:focus-visible, .rf-dot:focus-visible { outline:3px solid rgba(90,176,48,.45); outline-offset:2px; }
.rf-more { text-align:center; margin-top:14px; font-size:.9rem; }
.rf-more a { color:#3f8a1f; }

/* 絵の動き（そのシーンが表示されたときだけ動く） */
.rf-scene.is-active .rf-shake { animation:rfShake .45s ease-in-out 4; transform-origin:center; transform-box:fill-box; }
.rf-scene.is-active .rf-pop { animation:rfPop .5s cubic-bezier(.3,1.6,.5,1) both; transform-origin:center; transform-box:fill-box; }
.rf-scene.is-active .rf-pop.d1 { animation-delay:.5s; } .rf-scene.is-active .rf-pop.d2 { animation-delay:1.0s; }
.rf-scene.is-active .rf-pop.d3 { animation-delay:1.5s; } .rf-scene.is-active .rf-pop.d4 { animation-delay:2.0s; }
.rf-scene.is-active .rf-drop { animation:rfDrop .6s cubic-bezier(.3,1.4,.5,1) 1.1s both; transform-origin:center; transform-box:fill-box; }
.rf-scene.is-active .rf-dash { stroke-dasharray:6 7; animation:rfDash 1s linear infinite; }
.rf-scene.is-active .rf-float { animation:rfFloat 2.4s ease-in-out infinite; transform-box:fill-box; }
.rf-scene.is-active .rf-tick { stroke-dasharray:30; stroke-dashoffset:30; animation:rfTick .4s ease forwards; }
.rf-scene.is-active .rf-tick.d1 { animation-delay:.7s; } .rf-scene.is-active .rf-tick.d2 { animation-delay:1.3s; }
.rf-scene.is-active .rf-tick.d3 { animation-delay:1.9s; }
.rf-scene.is-active .rf-sun { animation:rfSun 1.6s ease-out both; transform-box:fill-box; }
.rf-scene.is-active .rf-sweat { animation:rfSweat 1.2s ease-in 3 .3s both; transform-box:fill-box; }
.rf-scene.is-active .rf-grow { animation:rfGrow 1s ease-out .4s both; transform-origin:left center; transform-box:fill-box; }

@keyframes rfUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes rfFill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes rfShake { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-12deg); } 75% { transform:rotate(12deg); } }
@keyframes rfPop { from { opacity:0; transform:scale(.3); } to { opacity:1; transform:scale(1); } }
@keyframes rfDrop { from { opacity:0; transform:translateY(-40px) scale(1.3); } to { opacity:1; transform:none; } }
@keyframes rfDash { to { stroke-dashoffset:-26; } }
@keyframes rfFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes rfTick { to { stroke-dashoffset:0; } }
@keyframes rfSun { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes rfSweat { 0% { opacity:0; transform:translateY(0); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(10px); } }
@keyframes rfGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media (max-width: 720px) {
  .rf-stage { min-height:0; aspect-ratio:auto; height:500px; }
  .rf-scene { grid-template-columns:1fr; grid-template-rows:auto 1fr; padding:18px 18px 20px; gap:6px; align-content:start; }
  .rf-art svg { max-height:220px; margin:0 auto; }
  .rf-cap h3 { font-size:1.15rem; }
  .rf-cap p { font-size:.92rem; }
  .rf-dot { width:26px; }
}

/* 動きを減らす設定・JS無効時：6つを縦に並べた静止表示 */
.rf.is-static .rf-stage, .rf:not(.is-ready) .rf-stage { min-height:0; height:auto; background:none; box-shadow:none; overflow:visible; }
.rf.is-static .rf-scene, .rf:not(.is-ready) .rf-scene { position:static; opacity:1; visibility:visible; margin-bottom:14px;
      background:linear-gradient(160deg,#F7FBF4 0%,#EEF3FA 100%); border-radius:14px; }
.rf.is-static .rf-bar, .rf:not(.is-ready) .rf-bar { display:none; }
.rf.is-static *, .rf.is-static *::after { animation:none !important; }
.rf.is-static .rf-tick { stroke-dashoffset:0; }

/* ページごとの色（2026-09-28）：.rf に rf--ict / rf--seminar を付ける */
.rf--ict { --rf-green:#2D7DD2; }
.rf--ict .rf-more a, .rf--ict .rf-btn:hover { color:#1f5fa8; }
.rf--ict .rf-btn:hover { border-color:#2D7DD2; }
.rf--ict .rf-stage { background:linear-gradient(160deg,#F1F7FD 0%,#EEF3FA 100%); }
.rf--seminar { --rf-green:#E0901A; }
.rf--seminar .rf-more a, .rf--seminar .rf-btn:hover { color:#b06a00; }
.rf--seminar .rf-btn:hover { border-color:#F5A623; }
.rf--seminar .rf-stage { background:linear-gradient(160deg,#FFF8EC 0%,#F4F1FA 100%); }