/* ヒーローの右下に3Dキャラクターを重ねる。 */
.robot {
  position: absolute;
  right: 6rem; /* 吹き出し（最長10文字）が画面の右端からはみ出さないよう、少し左に寄せる */
  bottom: -1rem;
  z-index: 2;
  width: 30.25rem; /* ヒーローのインパクトが足りないので、他社にない3Dロボットを大きくして前に出す（2026-10-01・前は 25.2rem × 26.15rem）。1.5倍は「ちょっとでかい」ので、その0.8倍（元の約1.2倍）。右側のスタッフに重ね、利用者の男性は隠さない */
  height: 31.35rem;
}
@media screen and (min-width: 700px) {
  .robot .robot_bubble { bottom: calc(100% - 2rem); font-size: 2.4rem; } /* ロボットを大きくしたぶん、吹き出しの文字も大きくする（スマホは今のまま）。3Dの枠の上には頭まで約3.8remの空きがあるので、吹き出しを下げてしっぽの先を頭のすぐ上に寄せる */
}
.robot_canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.robot_poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 90%;
  object-fit: contain;
}
.robot.is_ready .robot_canvas { opacity: 1; transform-origin: 50% 100%; } /* 着地でつぶれるとき、足元を支点にする（home_robot.js） */
.robot.is_ready .robot_poster { display: none; }
.robot_button {
  padding: 0.9rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 3rem;
  background: #16304de6;
  color: #fff;
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
}
.robot_button:focus-visible { outline: 3px solid #66dfff; outline-offset: 3px; }
.robot_button:disabled { opacity: 0.5; cursor: default; }
@media screen and (max-width: 699.98px) {
  .hero { height: 70rem; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .robot { position: relative; top: 18.5rem; z-index: 3; /* 「わくわく」を、の行の右で、足元が「仕事にしよう。」の行まで下がる高さ（ユーザー指定で3rem下げた）。文字の枠より手前に出して、タップできるようにする */ right: auto; bottom: auto; align-self: flex-end; flex: none; width: 25.4rem; height: 14.2rem; margin-right: -7.85rem; margin-bottom: 1.6rem; } /* PCに合わせて約1.15倍（2026-10-01・前は 22.1rem × 12.325rem・margin-right -5.2rem）。1.3倍は見出しの「を、」「しよう。」に重なった。広げたぶん右へずらし、さらに1rem右へ（360px幅で「仕事にしよう。」に6px重なったため）。下げても横の文字（説明文）の方が長いので、高さはこのまま */
  .hero_copy { position: relative; left: auto; right: auto; bottom: auto; flex: none; }
  .robot_button { font-size: 1.1rem; padding: 0.7rem 1rem; }
}
.flow_robot {
  position: absolute; /* 見出し右側の余白に案内役を重ねる。 */
  top: -3rem;
  right: 4.53125rem;
  width: 24rem;
  height: 22rem;
  z-index: 4;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.flow_robot.is_ready .robot_canvas { opacity: 1; transition: transform 1s ease, opacity 1s ease; transform-origin: right center; }
.flow_robot.is_ready .robot_poster { display: none; }
.flow_robot.is_waiting { visibility: hidden; }
@media screen and (max-width: 699.98px) {
  /* スマホは見出しの吹き出しのしっぽの真下に立たせ、見出しがLW君のセリフだと分かるようにする（説明文はLW君の左に収める） */
  .flow_robot { top: 11.4rem; right: 0; width: 13rem; height: 10rem; transition: none; }
}





.flow_item.is_guided { animation: robot_card 1.6s ease; }
@keyframes robot_card {
  40% { border-color: #94b5e1; box-shadow: 0 0 0 2px #3970ed0d; }
}

@media (prefers-reduced-motion: reduce) {
  .flow_robot, .flow_robot.is_ready .robot_canvas { transition: none; }
  .flow_item.is_guided { animation: none; }
}





.flow_inner { overflow-anchor: none; }




.visit_robot {
  position: absolute; /* 左下から右上の申し込みボタンへ案内する。 */
  left: max(-45rem, calc((74rem - 100vw) / 2 + 1rem));
  bottom: -29rem;
  width: 24rem;
  height: 22rem;
  pointer-events: none;
}
.robot_bubble { position: absolute; bottom: calc(100% + 0.8rem); left: 50%; transform: translateX(-50%); width: max-content; padding: 1.8rem 2.4rem; border: 2px solid #bcd0fb; border-radius: 2.4rem; background: linear-gradient(#fff, #f1f6ff 60%); color: #193b70; font-size: 2.1rem; font-weight: 700; line-height: 1.6em; letter-spacing: 0.04em; box-shadow: 0 1.2rem 3.6rem #2547d824; }
.robot_bubble::after { content: ""; position: absolute; bottom: -0.95rem; left: 50%; width: 1.8rem; height: 1.8rem; background: #f1f6ff; border-right: 2px solid #bcd0fb; border-bottom: 2px solid #bcd0fb; transform: translateX(-50%) rotate(45deg); }
.robot_bubble span { font-weight: inherit; } /* 1文字ずつ出す演出の span が reset.css で細字（normal）に戻り、見学の吹き出しより細く見えていた */
/* 見学のLW君は少し右を向いていて頭が枠の真ん中より右に見えるので、吹き出しを少し右へずらして、しっぽを頭の上に合わせる */
.visit_robot .robot_bubble { left: calc(50% + 1.6rem); }
.visit_robot.is_ready .robot_canvas { opacity: 1; }
.visit_robot.is_ready .robot_poster { display: none; }
@media screen and (max-width: 699.98px) {
  .visit_robot { position: relative; top: auto; left: auto; right: auto; bottom: auto; grid-column: 1; grid-row: 4; align-self: end; width: 10rem; height: 10rem; margin: 7rem 0 0; }
  .visit_robot .robot_bubble { left: 0; transform: none; padding: 1.35rem 1.5rem; font-size: 1.8rem; }
}

/* 歩き出すまでは姿を隠し、到着後に吹き出しを出す。 */
.robot[data-entrance="pending"] { opacity: 0; }
/* 到着後はクリックでもう一度手を振るので、押せることを指の形で伝える。 */
.robot[data-entrance="arrived"] { cursor: pointer; }
/* 吹き出しはしっぽ側を起点に、ポンと弾むように出す。 */
.robot .robot_bubble:not([hidden]) { transform-origin: 50% 100%; animation: home_welcome 0.6s ease both; }
@keyframes home_welcome { from { opacity: 0; transform: translateX(-50%) translateY(0.8rem) scale(0.9); } 60% { opacity: 1; transform: translateX(-50%) scale(1.04); } to { opacity: 1; transform: translateX(-50%); } }
/* スマホは吹き出しを画面の右端に寄せ、写真の女性にかからないようにする。中央寄せの translateX を使わない出し方に替える。 */
@media screen and (max-width: 699.98px) {
  .robot .robot_bubble { left: auto; right: 8.65rem; bottom: calc(100% + 3.4rem); transform: none; } /* 吹き出しの下端を「就労継続支援A型リンクワークス」の札より上に出す（LW君を下げたので、長いセリフで左へ広がると札に重なっていた）。right はロボットの枠を右へずらしたぶん（2.65rem）足して、吹き出しの位置は前と同じに保つ */
  /* 上げたぶん頭との間が空くので、しっぽを細長い三角にして頭までのばす。::before が枠線の色、::after が中の色（2px内側に重ねて枠線に見せる） */
  .robot .robot_bubble::before,
  .robot .robot_bubble::after { content: ""; position: absolute; left: auto; bottom: auto; border: 0; transform: none; clip-path: polygon(0 0, 100% 0, 60% 100%); }
  .robot .robot_bubble::before { top: 100%; right: 3rem; width: 2.2rem; height: 4.4rem; background: #bcd0fb; }
  .robot .robot_bubble::after { top: calc(100% - 2px); right: calc(3rem + 2.5px); width: calc(2.2rem - 5px); height: calc(4.4rem - 5px); }
  .robot .robot_bubble:not([hidden]) { animation-name: home_welcome_sp; }
}
@keyframes home_welcome_sp { from { opacity: 0; transform: translateY(0.8rem) scale(0.9); } 60% { opacity: 1; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .robot .robot_bubble:not([hidden]) { animation: none; } }

.flow_robot .robot_canvas { scale: 0.9; transform-origin: center bottom; }

/* 事業内容「1日の流れ」：タイムラインが見えている間だけ左下に出る。下の文章を押せなくしないよう、クリックは通す。 */
.daily_robot { position: fixed; left: 1rem; bottom: 1rem; z-index: 15; width: 13rem; height: 13.5rem; opacity: 0; visibility: hidden; transform: translateX(-4rem); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s; pointer-events: none; }
.daily_robot.is_shown { opacity: 1; visibility: visible; transform: none; }
.daily_robot.is_ready .robot_canvas { opacity: 1; }
.daily_robot.is_ready .robot_poster { display: none; }
.daily_robot .robot_bubble { left: 1rem; transform: none; }
.daily_robot .robot_bubble::after { left: 5.5rem; }
/* ロボットが話している時間帯の点を大きくして、どの時間の話かを結ぶ。 */
.daily_item::before { transition: scale 0.4s ease; }
.daily_item.is_current::before { scale: 1.6; }
@media screen and (max-width: 699.98px) {
  /* スマホは、LW君と吹き出しを左下の角に小さくまとめる。吹き出しが横に広いとカードの写真や文章に乗ってしまうため（2026-10-06） */
  .daily_robot { left: 0.4rem; bottom: 0.4rem; width: 7rem; height: 7.4rem; }
  .daily_robot .robot_bubble { left: 0.4rem; max-width: 19rem; padding: 0.9rem 1.1rem; font-size: 1.4rem; line-height: 1.5em; }
  .daily_robot .robot_bubble::after { left: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) { .daily_robot, .daily_item::before { transition: none; } }