/* ┌─────────────────────────────────────────┐
   │ 変数                                    │
   └─────────────────────────────────────────┘ */
:root {
  --ink: #171b20;
  --muted: #66707a;
  --paper: #f3f6fb;
  --white: #ffffff;
  --line: rgba(23, 27, 32, 0.12);
  --blue: #2547d8;
  --blue-dark: #142f9f;
  --blue-soft: #eaedfd;
  --cyan: #2de8d8;
  --font-ja: "Noto Sans JP", sans-serif;
  --font-title: "Shippori Mincho", serif;
  --font-en: "Raleway", sans-serif;
  --container: 112rem;
  --gutter: 6rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ┌─────────────────────────────────────────┐
   │ ベース                                   │
   └─────────────────────────────────────────┘ */
html {
  scroll-behavior: smooth; /* style.css でフォントサイズを管理 */
}

/* index.htmlのヒーローアニメ用2.8s遅延を短縮：hero_actions(0.7s+0.82s=1.52s)で見出し・ボタンが出きった直後にヘッダーが降りてくるように調整 */
.header {
  animation-delay: 1.5s;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-feature-settings: "palt";
  line-height: 1.9em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.business_hero_image,
.business_hero_sub_image,
.overview_flow_image,
.service_video,
.work_gallery_item,
.digital_video_media,
.voice_image,
.cta_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:focus-visible {
  outline: 0.3rem solid #ffbf47;
  outline-offset: 0.4rem;
}

/* ヘッダー（ロゴ・ナビ・スクロール時の縮み・nav_current）とフッターは css/style.css に共通化した（index と同じ見た目） */

/* ┌─────────────────────────────────────────┐
   │ 共通パーツ                               │
   └─────────────────────────────────────────┘ */

/* 「軽作業」「IT作業」などのセクション名ラベル */
.section_label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1em;
  text-transform: uppercase;
}

.section_label::before {
  content: "";
  flex-shrink: 0;
  width: 1.8rem;
  height: 0.8rem;
  background: currentColor;
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

/* 各コンテンツセクション共通の余白 */
.section {
  padding: 11rem max(var(--gutter), calc((100vw - var(--container)) / 2));
}

.overview_section,
.service_section,
.voice,
.daily_section,
.cta_title {
  scroll-margin-top: 9rem;
}

/* セクション上部のラベル＋見出し＋本文のエリア */
.section_head {
  display: grid;
  gap: 1.8rem;
  margin-bottom: 6rem;
}

.section_title {
  max-width: 76rem;
  font-family: var(--font-ja);
  font-size: 4.2rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.35em;
}

.section_description {
  max-width: 77rem; /* 軽作業の1文目（〜仕事です。）が1行に収まる幅 */
  color: var(--muted);
  font-size: 1.56rem;
  line-height: 2em;
}

/* ボタン共通 */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 5.4rem;
  border: 1px solid transparent;
  border-radius: 999rem;
  padding: 0 2.3rem;
  overflow: hidden;
  font-size: 1.45rem;
  font-weight: 800;
  transition:
    transform 0.24s var(--ease),
    box-shadow 0.24s ease,
    background 0.24s ease,
    border-color 0.24s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-0.2rem);
}

.button_primary {
  color: var(--white);
  background: #3d60f0;
  box-shadow: 0 1.6rem 3.6rem rgba(61, 96, 240, 0.28);
}

.button_primary::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -35%;
  width: 20%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  pointer-events: none;
  transform: skewX(-18deg) translateX(-100%);
  animation: business_button_shine 5.4s ease-in-out 3.2s infinite;
}

.button_primary:hover,
.button_primary:focus-visible {
  background: var(--blue-dark);
}

.button_outline {
  border-color: rgba(37, 71, 216, 0.28);
  background: rgba(255, 255, 255, 0.66);
  color: var(--blue);
  backdrop-filter: blur(1.2rem);
  -webkit-backdrop-filter: blur(1.2rem);
}

.button_outline:hover,
.button_outline:focus-visible {
  border-color: var(--blue);
  background: rgba(61, 96, 240, 0.08);
}

@keyframes business_button_shine {
  0%,
  72% {
    transform: skewX(-18deg) translateX(-100%);
  }
  100% {
    transform: skewX(-18deg) translateX(760%);
  }
}

.js_soft_reveal,
.js_soft_reveal_left {
  opacity: 1;
  transform: none;
}

.js_blur_reveal {
  opacity: 1;
  filter: none;
  border-radius: 1.2rem;
}

.page.is_js .js_soft_reveal {
  opacity: 0;
  transform: translateY(4rem);
}

.page.is_js .js_soft_reveal_left {
  opacity: 0;
  transform: translateX(-8rem);
}

.page.is_js .js_blur_reveal {
  opacity: 0.6;
  filter: blur(3rem);
  border-radius: 60%;
}

.page.is_js .js_soft_reveal.is_visible,
.page.is_js .js_soft_reveal_left.is_visible {
  opacity: 1;
  transform: none;
}

.page.is_js .js_blur_reveal.is_visible {
  opacity: 1;
  filter: none;
  border-radius: 1.2rem;
}

/* ┌─────────────────────────────────────────┐
   │ ヒーロー                                 │
   └─────────────────────────────────────────┘ */
.business_hero {
  position: relative;
  height: 100vh;
  min-height: 78rem;
  padding: 12rem 7rem 5rem;
  overflow: hidden;
  background: radial-gradient(circle at 83% 22%, rgba(45, 232, 216, 0.14) 0%, rgba(45, 232, 216, 0) 28%), radial-gradient(circle at 70% 82%, rgba(37, 71, 216, 0.12) 0%, rgba(37, 71, 216, 0) 32%), linear-gradient(135deg, #f8faff 0%, #eef3fb 100%);
}

/* 背景に大きく置くページ名 */
.business_hero::before {
  content: "WORKS";
  position: absolute;
  left: 3rem;
  bottom: 1rem;
  color: rgba(37, 71, 216, 0.055);
  font-family: var(--font-en);
  font-size: 18rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1em;
  pointer-events: none;
}

/* 写真の後ろに置く水彩風の色面 */
.business_hero::after {
  content: "";
  position: absolute;
  top: 16%;
  right: -8rem;
  width: 58rem;
  height: 58rem;
  border-radius: 54% 46% 40% 60% / 46% 38% 62% 54%;
  background: radial-gradient(circle at 38% 35%, rgba(45, 232, 216, 0.22), rgba(91, 139, 255, 0.12) 45%, rgba(91, 139, 255, 0) 72%);
  filter: blur(0.8rem);
  pointer-events: none;
}

.business_hero_inner {
  position: relative;
  z-index: 1;
  display: grid; /* コピーと写真を左右に並べる */
  /* 左はコピーの幅ぴったり、右の写真は残りいっぱい（2026-10-01）。前は左右を割合で分けていて、
     広い画面（1600px〜）では左の列だけ広がって文字と写真のあいだが約240pxあき、1101px前後では説明文が写真に重なっていた */
  grid-template-columns: fit-content(70rem) minmax(44rem, 1fr);
  align-items: center;
  gap: 7rem;
  max-width: 128rem;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.business_hero_content {
  position: relative; /* 背景文字より前に置く */
  z-index: 2;
  max-width: 70rem;
}

.business_hero_label {
  margin-bottom: 2.2rem;
}

.business_hero_title {
  max-width: 78rem;
  margin-bottom: 3rem;
  font-family: var(--font-ja); /* トップの大見出しと同じゴシック・太さ・行間にそろえる */
  font-size: 4.7rem; /* 3行とも同じ大きさ（前はマーカーの2行だけ 0.9倍だった） */
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12em;
}

/* 見出しは言葉のまとまり（business_phrase）ごとに改行し、「い／い。」のように途中で切らない */
.business_phrase {
  white-space: nowrap;
}

/* 青いマーカーを上の行から順に引く。 */
.business_marker {
  display: inline;
  font-style: normal;
}

.business_marker .business_phrase {
  background-image: linear-gradient(to right, rgba(91, 139, 255, 0.2), rgba(91, 139, 255, 0.2));
  background-repeat: no-repeat;
  background-size: 0% 0.48em;
  background-position: left 88%;
  animation: business_marker-draw 0.9s 2.2s var(--ease) forwards;
}

.business_marker .business_phrase:last-child { animation-delay: 3.1s; }

@keyframes business_marker-draw {
  to {
    background-size: 100% 0.5em;
  }
}

.business_hero_lead {
  max-width: 49rem;
  margin-bottom: 4rem;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 2em;
}

/* スマホだけ短い説明文に差し替える（HTMLに両方書いておく） */
.mobile_summary {
  display: none;
}

.business_hero_actions {
  display: flex; /* 2つの仕事への導線を横並びにする */
  flex-wrap: wrap;
  gap: 1.4rem;
}

/* 2つの仕事を重ねる右側のキャンバス */
.business_hero_visual {
  position: relative; /* 写真と装飾を重ねる基準 */
  height: 60rem;
}

.business_hero_wash {
  position: absolute; /* 写真の背面に水彩のにじみを置く */
  top: 7rem;
  right: -3rem;
  width: 58rem;
  height: 46rem;
  border-radius: 44% 56% 51% 49% / 59% 40% 60% 41%;
  background: radial-gradient(circle at 42% 40%, rgba(255, 255, 255, 0.9) 0%, rgba(197, 224, 255, 0.58) 48%, rgba(45, 232, 216, 0.1) 70%, transparent 74%);
  filter: blur(0.5rem);
}

.business_hero_curve {
  position: absolute; /* 写真の周囲を回る細い線 */
  top: 10rem;
  right: -4rem;
  width: 68rem;
  height: 40rem;
  border: 1px solid rgba(37, 71, 216, 0.2);
  border-radius: 50%;
  transform: rotate(-12deg);
  animation: business_curve_turn 18s linear infinite;
}

/* IT作業の主写真 */
.business_hero_media {
  position: absolute; /* ビジュアル右側の主役にする */
  top: 2rem;
  right: 0;
  z-index: 1;
  width: 100%; /* 右の列いっぱいに広げる */
  height: 55rem;
  overflow: hidden; /* 非対称の角丸から画像を出さない */
  border: 0.8rem solid rgba(255, 255, 255, 0.9);
  border-radius: 2rem 12rem 2rem 12rem;
  background: #dfe9f3;
  box-shadow: 0 3rem 7rem rgba(29, 55, 120, 0.18);
  clip-path: inset(0 100% 0 0);
  animation: hero-media-in 1.2s 0.75s var(--ease) forwards;
}

.business_hero_image {
  object-position: center 38%;
  filter: saturate(0.72) contrast(0.94) brightness(1.07); /* 絵は少し淡くして、本物の写真に変わったときの差を大きくする（2026-10-01） */
  transform: scale(1.05);
  animation: hero-image-drift 12s 1.2s ease-in-out infinite alternate;
}

/* 水彩の絵の上に、同じ部屋の本物の写真を筆の形で重ねる（js/business_hero_reveal.js）。
   絵と同じ拡大・漂いで動かして、絵と写真がずれないようにする（2026-10-01） */
.business_hero_reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.05);
  animation: hero-image-drift 12s 1.2s ease-in-out infinite alternate;
}

/* 写真に変わり終わったら、本物だと分かる札を右下に出す */
.business_hero_caption {
  position: absolute;
  right: 2.4rem;
  bottom: 2rem;
  z-index: 2;
  padding: 0.6rem 1.4rem;
  color: #193b70;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 3rem;
  opacity: 0;
  transform: translateY(0.8rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.business_hero_media.is_revealed .business_hero_caption {
  opacity: 1;
  transform: none;
}

/* 軽作業を見せる小さな写真カード */
.business_hero_sub {
  position: absolute; /* 主写真の左下に重ねる */
  left: -2rem;
  bottom: 0;
  z-index: 3;
  width: 22rem;
  padding: 0.8rem; /* 札を写真の下へはみ出させるので overflow は切らない（画像は自分で角丸） */
  border: 1px solid rgba(37, 71, 216, 0.1);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 2rem 5rem rgba(29, 55, 120, 0.2);
  opacity: 0;
  transform: translateY(3rem) rotate(-4deg);
  animation: business_sub_in 0.9s 1.35s var(--ease) forwards;
}

.business_hero_sub_image {
  height: 14rem;
  border-radius: 1.1rem;
}

/* どの事業所の作業か分かる札（大きい写真の札と同じ見た目・小さめ） */
.business_hero_sub_caption {
  position: absolute;
  left: 1.6rem;
  top: calc(100% + 0.6rem); /* 写真の下へはみ出させて、写真を隠さない */
  padding: 0.4rem 1rem;
  color: #193b70;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4; /* 札を縦に大きくしない */
  white-space: nowrap; /* 横1行のまま。幅が狭くても折り返さない */
  transform: rotate(4deg); /* カードが -4deg 傾いているので、逆に回して札だけ水平にする */
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 3rem;
}

/* コピーは上から順に表示する */
.business_hero_label,
.business_hero_title,
.business_hero_lead,
.business_hero_actions {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  animation: hero-copy-in 0.82s var(--ease) forwards;
}

.business_hero_label {
  animation-delay: 0.16s;
}
.business_hero_title {
  animation-delay: 0.3s;
}
.business_hero_lead {
  animation-delay: 0.5s;
}
.business_hero_actions {
  animation-delay: 0.7s;
}

@keyframes hero-copy-in {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-media-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

@keyframes hero-image-drift {
  from {
    transform: scale(1.05) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.1) translate3d(-1.4rem, 0.8rem, 0);
  }
}

@keyframes business_sub_in {
  to {
    opacity: 1;
    transform: rotate(-4deg);
  }
}

@keyframes business_curve_turn {
  to {
    transform: rotate(348deg);
  }
}

/* ┌─────────────────────────────────────────┐
   │ 作業風景（横スクロールギャラリー）          │
   └─────────────────────────────────────────┘ */
.overview_section {
  margin: 0 auto;
  padding: 6.8rem 0 7rem; /* 上の余白は、写真の上を跳ぶLW君の頭が入るぶん＋上のセクションの札から少し離すぶん（見出しを消したので、見出しの置き場は要らない。上のセクションの下から写真まで、PCで約157px） */
  background: linear-gradient(to bottom, #f0f4fa 0, var(--blue-soft) 6rem, var(--blue-soft) calc(100% - 6rem), #fff 100%);
}

.overview_flow {
  position: relative;
  background: transparent;
  overflow-x: clip; /* 横（流れる写真）は隠す／縦は見せる＝見出しを上に出せる */
  padding: 3.2rem 0 4rem;
}

/* 写真の上を跳んで渡るLW君（3D）。位置は overview_robot.js が毎フレーム transform で決める */
.overview_hopper {
  position: absolute; /* .overview_flow の左上を基準に動かす */
  top: 0;
  left: 0;
  z-index: 2;
  width: 9.5rem;
  height: 9.5rem;
  pointer-events: none;
  visibility: hidden; /* 3Dの準備ができるまでは見せない */
}

.overview_hopper .robot_poster {
  display: none; /* 3Dが使えないときは出さない */
}

.overview_hopper.is_ready .robot_canvas {
  opacity: 1;
}

.overview_flow.is_hopping .overview_hopper {
  visibility: visible;
}

/* 写真カードが左に流れ続けるトラック */
.overview_flow_track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: max-content;
  padding: 2.4rem 0 1.4rem; /* セットの間のすき間は .overview_flow_set の padding-right だけにする（gap も付けると、一周した継ぎ目で12pxカクッとずれる） */
  animation: flow-gallery 33s linear infinite; /* セットを4つ並べて半分（2セット）ぶん動かす。以前と同じ速さ（約70px/秒）になる長さ */
  will-change: transform;
}

/* 写真は高さをそろえた1本の帯にする（高さがバラバラだと、2段並べたときにごちゃごちゃして見える） */
.overview_flow_set {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding-right: 2rem;
}

.overview_flow_card {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 2.2rem;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1.4rem 3rem rgba(23, 27, 32, 0.1);
}

.overview_flow_card_large {
  width: 30rem;
  height: 17rem;
}
.overview_flow_card_medium {
  width: 24rem;
  height: 17rem;
}
.overview_flow_card_small {
  width: 20rem;
  height: 17rem;
}

.overview_flow_image {
  filter: saturate(0.94) brightness(1.04);
}

.overview_flow_caption {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999rem;
  background: rgba(23, 27, 32, 0.52);
  padding: 0.45rem 0.85rem;
  color: #fff;
  font-family: var(--font-en);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  backdrop-filter: blur(10px);
}

@keyframes flow-gallery {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 2段目：1段目と逆向き（左から右）に流す。緑のLW君は、1段目と同じく左から右へ跳ぶ */
.overview_flow + .overview_flow {
  margin-top: 0; /* 段の間は、1段目の下の余白＋2段目の上の余白（約11rem）で、2段目のLW君の頭が入る */
}

.overview_flow_reverse .overview_flow_track {
  animation-direction: reverse;
}

/* 上の段は写真をすき間なくつなげて1本の帯にする（LW君が台車で乗って渡るので、落ちるすき間を作らない） */
.overview_flow_reverse .overview_flow_set {
  gap: 0;
  padding-right: 0;
}

.overview_flow_reverse .overview_flow_card {
  border-radius: 0;
  box-shadow: none; /* 写真どうしが接するので、影は継ぎ目の黒い線になる */
}

/* 台車を押すLW君（1枚の絵）。絵の下の端＝車輪なので、枠の下が写真の上辺に乗る */
.overview_rider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 9.5rem;
  height: 9.5rem; /* 下の段の overview_hopper と同じ大きさ・同じカメラ＝キャラの大きさがそろう */
  pointer-events: none;
  visibility: hidden; /* 位置が決まるまで左上に映さない */
}

.overview_rider.is_placed {
  visibility: visible;
}

.overview_rider .robot_poster {
  display: none; /* 3Dが出るまでは何も出さない（絵と3Dが二重に見えるのを防ぐ） */
}

.overview_rider.is_flat .robot_poster {
  display: block; /* 3Dが使えないときだけ、静止画のまま流す */
}

.overview_rider.is_ready .robot_canvas {
  opacity: 1;
  /* 上下のゆれは付けない。3Dは脚で歩いているので動きは足りているし、
     持ち上がった分だけ車輪が写真の線から浮いて見えるため */
}

.overview_rider.is_flat .robot_poster {
  opacity: 1;
  animation: ride_bob 0.95s ease-in-out infinite; /* 静止画のときだけ、段差を越えるような軽い上下のゆれ */
}

@keyframes ride_bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.25rem);
  }
}

/* たまに出る汗（よいしょ、と押している感じ） */
.overview_sweat {
  position: absolute;
  left: 92%; /* LW君は絵の右寄りにいるので、その頭の右上に出す（頭の真上だと「↑」に見える。下げると頭にかぶるので、その分右へ） */
  top: 12%; /* 頭のてっぺんと同じ高さ（LW君の頭は、枠の上から約12%のところ） */
  font-size: 1.7rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.overview_rider.is_sweating .overview_sweat {
  opacity: 0.95;
  animation: sweat_float 1.1s ease-in-out infinite;
}

/* 汗は上へ浮かず、頭から右下へ小さく垂れる（普通に汗をかいている形） */
@keyframes sweat_float {
  0% {
    transform: translate(0, 0);
    opacity: 0.95;
  }
  60% {
    transform: translate(0.2rem, 0.45rem);
    opacity: 0.95;
  }
  100% {
    transform: translate(0.3rem, 0.7rem);
    opacity: 0; /* 垂れきったら消えて、頭の上からまた出る（ループの継ぎ目を見せない） */
  }
}

.service_section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.service_section::before {
  position: absolute;
  top: 5rem;
  right: max(2rem, calc((100vw - var(--container)) / 2));
  z-index: -1;
  color: rgba(37, 71, 216, 0.045);
  font-family: var(--font-en);
  font-size: 18rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1em;
}

.service_section_light {
  padding-top: 18rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.service_section_light::before {
  content: "01";
}

.service_inner {
  position: relative;
  z-index: 1;
}

.service_layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 6.4rem;
  align-items: stretch;
}

.service_media {
  position: relative;
  min-height: 46rem;
  overflow: hidden;
  border-radius: 3rem;
  background: #ece7dc;
  box-shadow: 0 2.6rem 6rem rgba(29, 55, 120, 0.14);
}

.service_video {
  position: absolute;
  inset: 0;
  /* 再生が始まると、Edge・Chrome は動画だけを Windows が別に重ねる層（ハードウェアオーバーレイ）へ回すことがあり、
     角丸の枠と1pxずれて右端に黒っぽい縦線が出る。見えないほど小さいフィルターを掛けて、ページと一緒に描かせる */
  filter: brightness(1.001);
}

.service_content {
  display: grid;
  gap: 1.8rem;
}

.service_title {
  font-family: var(--font-ja);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.45em;
}

.service_content .service_description {
  color: var(--muted);
  font-size: 1.52rem;
  line-height: 2em;
}

/* 見出しと説明文の間は、grid の gap（1.8rem）と行間で2行分あいて見えるので、詰める */
.service_title + .service_description {
  margin-top: -1rem;
}

/* 作業項目（封入・検品など）の2カラムグリッド */
.task_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1rem;
}

.task_item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.8rem;
  background: linear-gradient(145deg, #ffffff, #f5f7fc);
  padding: 2rem;
  box-shadow: 0 1.2rem 3rem rgba(29, 55, 120, 0.045);
}

.task_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.task_title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.45em;
}

.task_text {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 1.34rem;
  line-height: 1.8em;
}

/* 軽作業セクション：実際の作業写真ギャラリー */
.work_gallery {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 1.4rem;
  margin-top: 4rem;
}

.work_gallery_item {
  height: 18rem;
  border-radius: 1.8rem;
  box-shadow: 0 1.4rem 3.4rem rgba(29, 55, 120, 0.08);
}

.work_gallery_main {
  height: 21rem;
}

/* 写真はイメージだと伝える、LW君のひと言。右寄せで小さく置く */
.photo_note {
  margin-top: 1.6rem;
  display: flex; /* LW君と吹き出しを横並び（LW君は右、吹き出しは左） */
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem;
}

.photo_note_icon {
  width: auto;
  height: 6rem;
}

/* 吹き出し。しっぽは右のLW君へ向ける */
.photo_note_text {
  position: relative; /* しっぽ（::before）の基準 */
  padding: 0.8rem 1.6rem;
  color: var(--muted);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6em; /* 2行の文なので、行の間を詰める */
  background: var(--white);
  border: 1px solid rgba(37, 71, 216, 0.18);
  border-radius: 999rem;
  box-shadow: 0 0.8rem 2rem rgba(29, 55, 120, 0.08);
}

.photo_note_text::before {
  content: "";
  position: absolute; /* 吹き出しの右の辺の真ん中に重ねる */
  top: 50%;
  right: -0.5rem;
  width: 0.9rem;
  height: 0.9rem;
  background: var(--white);
  border-top: 1px solid rgba(37, 71, 216, 0.18);
  border-right: 1px solid rgba(37, 71, 216, 0.18);
  transform: translateY(-50%) rotate(45deg);
}

/* ┌─────────────────────────────────────────┐
   │ IT作業セクション                          │
   └─────────────────────────────────────────┘ */
.service_section_digital {
  background: radial-gradient(circle at 92% 10%, rgba(45, 232, 216, 0.11), transparent 24%), linear-gradient(135deg, rgba(37, 71, 216, 0.05) 0%, transparent 38%), var(--paper);
}

.service_section_digital::before {
  content: "02";
}

.digital_layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 6rem;
  align-items: start;
}

/* 動画は右カラムに配置 */
.digital_video {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3rem;
  background: #101418;
}

.digital_video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.64));
  pointer-events: none;
}

.service_caption,
.digital_video_caption {
  position: absolute;
  right: 1.8rem;
  bottom: 1.8rem;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999rem;
  background: rgba(24, 34, 41, 0.62);
  padding: 0.8rem 1.2rem;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-en);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

/* サービス説明カードは左カラムに配置 */
.digital_services {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

.digital_item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(37, 71, 216, 0.16);
  border-radius: 2.2rem;
  background: rgba(255, 255, 255, 0.82);
  padding: 2.8rem;
  backdrop-filter: blur(1.2rem);
  -webkit-backdrop-filter: blur(1.2rem);
  box-shadow: 0 1.8rem 4rem rgba(24, 34, 41, 0.06);
}

.digital_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0.28rem;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.digital_number {
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.digital_title {
  margin-top: 1.4rem;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.45em;
}

.digital_description {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1.36rem;
  line-height: 1.9em;
}

/* ┌─────────────────────────────────────────┐
   │ 利用者の声                               │
   └─────────────────────────────────────────┘ */
.voice {
  position: relative; /* 背景文字の基準 */
  overflow: hidden; /* 背景文字のはみ出しを隠す */
  padding: 12rem max(var(--gutter), calc((100vw - var(--container)) / 2));
  background: linear-gradient(145deg, #f6f8ff 0%, #edf2ff 58%, #f7faff 100%);
}

/* セクション右上の薄い背景文字 */
.voice::before {
  content: "STORIES";
  position: absolute;
  top: 1rem;
  right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  color: rgba(37, 71, 216, 0.055);
  font-family: var(--font-en);
  font-size: 15rem;
  font-weight: 800;
  line-height: 1em;
  letter-spacing: -0.04em;
  pointer-events: none;
}

.voice_inner {
  position: relative; /* 背景文字より前に置く */
  z-index: 1;
}

.voice_header {
  display: grid; /* 見出しと紹介画像を左右に並べる */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6rem;
  margin-bottom: 6rem;
}

.voice_heading {
  max-width: 72rem;
}

.voice_label {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.voice_title {
  margin-bottom: 2.2rem;
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1.35em;
}

.voice_description {
  max-width: 68rem; /* 2文が1行に収まる幅（「します。」だけが次の行に落ちないように） */
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1.9em;
}

.voice_side {
  width: 36rem;
}

.voice_visual {
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(37, 71, 216, 0.1);
  border-radius: 1.6rem;
  box-shadow: 0 1.2rem 3rem rgba(29, 55, 120, 0.1);
}

.voice_group {
  display: block;
  width: 100%;
  height: auto;
}

.voice_list {
  display: grid; /* 3名のカードを横に並べる */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}

.voice_item {
  position: relative; /* 引用符と上辺の色線の基準 */
  display: flex; /* 名前をカード下端にそろえる */
  flex-direction: column;
  overflow: hidden; /* 上辺の色線を角丸内に収める */
  padding: 3rem 3rem 2.6rem;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(37, 71, 216, 0.12);
  border-radius: 2.8rem;
  box-shadow: 0 2rem 5rem rgba(29, 55, 120, 0.08);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s ease;
}

.voice_item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.4rem;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
}

.voice_item::after {
  content: "“";
  position: absolute;
  top: 1.2rem;
  right: 2.4rem;
  color: rgba(37, 71, 216, 0.08);
  font-family: var(--font-title);
  font-size: 8rem;
  line-height: 1em;
  pointer-events: none;
}

.voice_number {
  margin-bottom: 1.8rem;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.voice_profile {
  display: flex; /* 人物画像とプロフィールを横に並べる */
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2.2rem;
}

.voice_image {
  flex-shrink: 0; /* 画像サイズを固定 */
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  object-position: center 22%;
  background: #f8f2e9;
  border: 0.6rem solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 1.2rem 2.8rem rgba(29, 55, 120, 0.14);
}

.voice_meta {
  min-width: 0;
}

.voice_role {
  margin-bottom: 0.7rem;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.voice_location {
  color: #3e4e63;
  font-size: 1.3rem;
  font-weight: 700;
}

.voice_summary {
  margin-bottom: 1.6rem;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.55em;
}

.voice_quote {
  margin-bottom: 2.4rem;
  padding-left: 1.8rem;
  color: var(--muted);
  border-left: 2px solid rgba(37, 71, 216, 0.22);
  font-size: 1.4rem;
  line-height: 1.95em;
}

.voice_name {
  display: flex; /* 名前と担当を左右に分ける */
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto; /* 名前をカード下端にそろえる（引用の左線は文章の長さで止まる） */
  padding-top: 1.8rem;
  border-top: 1px solid rgba(37, 71, 216, 0.12);
  font-size: 1.35rem;
  font-weight: 800;
}

.voice_detail {
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 600;
}

/* ┌─────────────────────────────────────────┐
   │ 1日の流れ（タイムライン）                  │
   └─────────────────────────────────────────┘ */
.daily_section {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.daily_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(37, 71, 216, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 71, 216, 0.05) 1px, transparent 1px), radial-gradient(circle at 82% 8%, rgba(37, 71, 216, 0.08), transparent 28%);
  background-size:
    8rem 8rem,
    8rem 8rem,
    auto;
  pointer-events: none;
}

.daily_inner {
  position: relative;
  z-index: 1;
  padding: 8rem max(var(--gutter), calc((100vw - var(--container)) / 2)) 14rem; /* 下は、前に注意書きが受け持っていた余白（10rem）ぶんも含める */
}

/* 一日の流れ：事業所ごとに淡い面を敷き、面の左に時刻の札と点線を置く（東西どちらも同じ向き） */
.daily_columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14rem; /* 2つの事業所が別の場所だと分かるよう、間を広めにとる */
  max-width: 104rem; /* 時刻の列を面の中に入れたぶん広げ、写真と文の幅を約30remに保つ */
  margin-inline: auto;
}

/* 左右の同じ時刻を同じ高さにそろえる：見出し＋6つの段（計7行）を、2列で共通の行に乗せる（subgrid） */
.daily_column {
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  row-gap: 0; /* 列の間の gap(14rem) を縦には引き継がない */
  padding: 4rem 3.6rem 4.8rem 2.4rem; /* 左は時刻の札が入るので、右より少し狭くする */
}

/* 東口＝ティール、西口＝ブルー。面はごく淡く敷き、札・時刻・点線は濃い色（--accent）でそろえて、下の段までどちらの列か分かるようにする */
.daily_column_east {
  --accent: #087f76;
  background: #dfede9; /* ティールは青い背景の上だと白っぽく見えるので、西口より一段濃くして強さをそろえる */
}

.daily_column_west {
  --accent: var(--blue);
  background: #e3e8f9; /* 背景も青っぽいので、少し青を強めて面が溶けないようにする */
}

.daily_column_head {
  display: grid;
  justify-items: center;
  gap: 1.4rem;
  margin-bottom: 4rem;
}

.daily_column_title {
  font-family: var(--font-ja);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.3em; /* 見本と同じく、字の間を広くとる */
  text-indent: 0.3em; /* 字間のぶん右にずれるので戻す */
  line-height: 1.3em;
}

/* 事業所名は、両端を切り欠いたリボンの札に入れる */
.daily_column_badge {
  padding: 0.5rem 2.4rem;
  color: var(--white);
  font-family: var(--font-ja);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.8rem) 50%, 100% 100%, 0 100%, 0.8rem 50%);
}

/* 作業時間：東口と西口で終わる時刻がちがうので、最初に見比べられるよう見出しの下に置く */
.daily_column_hours {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.daily_column_hours_label {
  margin-right: 0.8rem;
  color: rgba(23, 27, 32, 0.84); /* 説明文と同じ濃さ。薄いグレーだと色の面の上で読みにくい */
  font-family: var(--font-ja);
  font-size: 1.4rem;
}

/* 時間の流れ：各段の左に時刻の札を置き、札どうしを点線でつなぐ */
.daily_steps {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid; /* 説明文の行数がちがっても、次の時刻は左右で同じ高さから始まる */
  gap: var(--step-gap);
  list-style: none;
  --step-gap: 5.6rem; /* 段と段の間。段の中（1.4rem）よりはっきり広くして、ひと区切りずつに見せる */
  --rail: 8.2rem; /* 段の左に空ける、時刻の札の列の幅 */
  --line-x: 3.2rem; /* 点線の位置（札の真ん中） */
}

.daily_step {
  position: relative;
  display: grid;
  align-content: start; /* 段の高さが反対の列に合わせて伸びても、余りは下にまとめる（写真が下に押されない） */
  gap: 1.4rem;
  padding-left: var(--rail);
}

/* 点線：この段の札から次の段の札までつなぐ。最後の段（終礼）で止める */
.daily_step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: calc(var(--line-x) - 0.15rem);
  width: 0.3rem;
  height: calc(100% + var(--step-gap)); /* 段の下の間のぶんまで伸ばして、次の札に届かせる */
  background-image: radial-gradient(circle, #6d6560 0.15rem, transparent 0.16rem);
  background-size: 0.3rem 1.1rem;
  background-repeat: repeat-y;
  opacity: 0.55; /* 濃い色のままだと札より線が目立つので薄める */
}

/* 時刻の札：点線の上で、見出しと同じ高さに置く */
.daily_step_time {
  position: absolute;
  top: 0;
  left: var(--line-x);
  min-width: 6.4rem; /* 「9:30」と「12:45」で札の幅をそろえる */
  padding: 0.6rem 1rem;
  border-radius: 99rem;
  background: #6d6560; /* 時刻は色分けせず、シンプルな灰色にそろえる */
  line-height: 1em;
  text-align: center;
  transform: translateX(-50%); /* 札の真ん中を点線に合わせる */
}

.daily_steps .daily_clock {
  color: var(--white);
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.daily_step_title {
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.4em;
}

.daily_step_image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* LW君の絵は切らずに全部見せる（絵のふちが白なので、余りも白で埋める） */
.daily_step_image_robot {
  aspect-ratio: 2.4 / 1; /* 東西どちらも同じ枠・同じ大きさで見せる */
  padding: 1rem 0;
  background: var(--white);
  object-fit: contain;
}

/* 東口の絵は吹き出しが頭より上に出ているぶんロボットが小さく見えるので、上下の余白を詰めて西口と同じ大きさに見せる */
.daily_column_east .daily_step_image_robot {
  padding-block: 0.6rem;
}

.daily_step_text {
  color: rgba(23, 27, 32, 0.84); /* 黒を少しだけ弱め、面の色になじませる（薄いグレーは色の面の上で読みにくい） */
  font-family: var(--font-ja);
  font-size: 1.5rem;
  line-height: 1.8em;
  word-break: auto-phrase; /* 幅が足りず折り返すときは、言葉のまとまりで改行する（Chrome・Edge で効く） */
  text-wrap: pretty; /* 「始めます。」「替えます。」だけが次の行に残らないよう、折り返す位置を前に寄せる */
}

/* 出るときはフェードだけ（左下のLW君と並ぶので、上下に動かさない） */
.page.is_js .daily_step {
  opacity: 0;
  transition: opacity 0.72s var(--ease);
}

.page.is_js .daily_inner.is_visible .daily_step {
  opacity: 1;
}

@media screen and (max-width: 899.98px) {
  .daily_columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 3.2rem;
  }

  /* 縦に積むときは左右をそろえる必要がないので、共通の行（subgrid）をやめる */
  .daily_column,
  .daily_steps {
    grid-row: auto;
    grid-template-rows: none;
  }

  .daily_column {
    padding: 3.2rem 2rem 3.6rem 1.2rem;
  }

  .daily_column_title {
    font-size: 2.2rem;
  }

  /* 列が細いので、札の列を少し細くして写真と文の幅を残す */
  .daily_steps {
    --step-gap: 4rem;
    --rail: 6.8rem;
    --line-x: 2.8rem;
  }

  .daily_step_time {
    min-width: 5.6rem;
    padding-inline: 0.8rem;
  }

  .daily_step_title {
    font-size: 1.8rem;
  }
}

.daily_head {
  display: grid; /* 見出しの下に、左寄せでLW君を置く */
  gap: 2.4rem;
  margin-bottom: 5.6rem;
}

/* 見出しの右であいさつするLW君（一日の流れの入口） */
.daily_head_robot {
  justify-self: start; /* 見出しの左下に立たせる */
  width: 17rem;
}

.daily_head_robot_image {
  display: block;
  width: 100%;
  height: auto;
}

.daily_head_intro {
  max-width: 78rem;
}

.daily_title {
  margin-top: 2.2rem;
  font-family: var(--font-ja);
  font-size: 4.4rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.32em;
}

.daily_description {
  max-width: 72rem;
  margin-top: 2.4rem;
  color: var(--muted);
  font-size: 1.48rem;
  line-height: 2.05em;
}

.daily_head .daily_head_mark {
  display: grid;
  gap: 1rem;
  margin: 0 0 0.8rem;
  color: rgba(23, 27, 32, 0.2);
  font-family: var(--font-en);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1em;
  text-align: right;
}

.daily_mark_label {
  color: var(--ink);
  font-size: 4.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.page.is_js .daily_inner.js_soft_reveal {
  transform: none;
}

.daily_clock {
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1em;
}

/* 注意書きは、左の列（軽作業）の真上に置く。幅を .daily_columns とそろえ、左端を列の左端に合わせる */
.daily_message {
  max-width: 104rem;
  margin: 0 auto 1.6rem;
  color: #5c6372;
  font-size: 1.75rem; /* 1.25rem から5pxぶん大きく */
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* ┌─────────────────────────────────────────┐
   │ CTA（お問い合わせ）                       │
   └─────────────────────────────────────────┘ */
.cta_section {
  padding: 7.2rem var(--gutter);
  background: var(--paper);
}

.cta_inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(24rem, 36rem);
  gap: 2.4rem 4rem;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  border-radius: 2.8rem;
  background: radial-gradient(120% 110% at 82% -10%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 54%), radial-gradient(95% 100% at 6% 112%, rgba(45, 232, 216, 0.16) 0%, rgba(45, 232, 216, 0) 55%), linear-gradient(135deg, #5e80dd 0%, #3f60c6 100%);
  box-shadow: 0 3rem 7rem rgba(28, 49, 170, 0.18);
  padding: 6rem;
  color: #fff;
  overflow: hidden;
}

.cta_content {
  grid-row: 1 / span 2;
}

.cta_art {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1672 / 941;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2.2rem 5.6rem rgba(0, 0, 0, 0.26);
  transform: rotate(1.2deg);
}

.cta_art::before {
  content: "";
  position: absolute;
  inset: 1.1rem 1.1rem -1.1rem -1.1rem;
  z-index: -1;
  border: 1px solid rgba(115, 200, 189, 0.42);
  border-radius: 0.8rem;
}

.cta_image {
  width: 100%;
  height: 100%;
  border-radius: 0.6rem;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.03);
}

.cta_actions {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1rem;
  justify-items: stretch;
}

.cta_primary {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 1.8rem 4rem rgba(6, 18, 70, 0.14);
}

.cta_primary::before {
  display: none;
}

.cta_primary:hover,
.cta_primary:focus-visible {
  background: color-mix(in srgb, #fff, var(--blue) 8%);
  color: var(--blue);
}

.cta_secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.cta_secondary:hover,
.cta_secondary:focus-visible {
  background: rgba(255, 255, 255, 0.17);
  border-color: rgba(255, 255, 255, 0.86);
}

.cta_title {
  margin-top: 1.6rem;
  max-width: 80rem;
  font-family: var(--font-ja);
  font-size: 3.4rem;
  font-weight: 900;
  line-height: 1.45em;
}

.cta_description {
  max-width: 76rem;
  margin-top: 1.6rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.48rem;
  line-height: 2em;
}

.cta_inner .section_label {
  color: white;
}

.cta_plane {
  position: absolute;
  top: 2.2rem;
  right: 2.8rem;
  width: 8rem;
  opacity: 0.2;
  transform: rotate(28deg);
  pointer-events: none;
  animation: cta_plane_float 5.5s ease-in-out infinite;
}

.cta_plane_body {
  fill: rgba(255, 255, 255, 0.92);
}

.cta_plane_fold {
  fill: none;
  stroke: rgba(30, 52, 201, 0.45);
  stroke-width: 1;
  stroke-linejoin: round;
}

@keyframes cta_plane_float {
  0%,
  100% {
    transform: rotate(28deg) translateY(0);
  }
  50% {
    transform: rotate(28deg) translateY(-1rem);
  }
}

/* フッターは css/style.css に共通化 */

/* ┌─────────────────────────────────────────┐
   │ タブレット（1100px以下）                  │
   └─────────────────────────────────────────┘ */
@media screen and (max-width: 1100px) {
  .service_layout,
  .digital_layout {
    grid-template-columns: 1fr;
  }

  /* 1日の流れは2列のまま狭くなるので、列の間を詰めて写真と文の幅を残す（縦に積む899px以下には関係しない column-gap だけ変える） */
  .daily_columns {
    column-gap: 4rem;
  }

  .digital_services,
  .digital_video {
    grid-column: auto;
    grid-row: auto;
  }

  .service_media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .business_hero {
    padding-right: 4rem;
    padding-left: 4rem;
    padding-bottom: 8rem;
  }

  .business_hero_inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(42rem, 1.08fr);
    gap: 3rem;
  }

  .business_hero_visual {
    height: 53rem;
  }

  .business_hero_media {
    width: 43rem;
    height: 50rem;
  }

  .business_hero_wash {
    width: 60rem;
    height: 41rem;
  }

  .business_hero_curve {
    width: 47rem;
    height: 43rem;
  }

  .business_hero_sub {
    left: -1rem;
    width: 19rem;
  }

  .business_hero_sub_image {
    height: 12rem;
  }

  .overview_flow_card_large {
    width: 28rem;
  }
  .overview_flow_card_medium {
    width: 23rem;
  }
  .overview_flow_card_small {
    width: 19rem;
  }

  .voice_header {
    gap: 4rem;
  }

  .voice_side {
    width: 31rem;
  }

  .voice_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice_item:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 54rem;
  }

  .cta_inner {
    grid-template-columns: 1fr;
  }

  .cta_content {
    grid-row: auto;
  }

  .cta_art {
    max-width: 42rem;
    transform: none;
  }

  .cta_actions {
    width: min(42rem, 100%);
  }
}

/* ┌─────────────────────────────────────────┐
   │ スマホ（699px以下）                       │
   └─────────────────────────────────────────┘ */
@media screen and (max-width: 699.98px) {
  .daily_head {
    grid-template-columns: minmax(0, 1fr);
  }

  .daily_head_robot {
    justify-self: start;
    width: 11rem;
  }

  html {
    font-size: min(calc(10 / 390 * 100vw), 10px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .header {
    align-items: center;
    padding: 0.7rem 2rem;
    background: #ffffff;
    box-shadow: 0 0.2rem 1rem rgba(7, 16, 38, 0.08);
    pointer-events: auto;
  }

  .logo,
  .header.is_scrolled .logo {
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    opacity: 1;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    pointer-events: auto;
  }

  .logo .logo_image,
  .header.is_scrolled .logo_image {
    height: 2.8rem;
  }

  .nav_toggle {
    margin: 0;
  }

  .nav_menu {
    top: 8.4rem;
    right: 1.4rem;
    left: 1.4rem;
    width: auto;
  }

  .business_hero {
    min-height: auto;
    padding: 6.6rem 1.8rem 6rem;
    height: auto;
  }

  .business_hero_title {
    margin-bottom: 2.2rem;
    font-size: 2.5rem; /* 3行とも同じ大きさ。写真カードの内側でも「不安があっても、いい。」を1行に収める */
    line-height: 1.3em; /* トップのスマホの大見出しと同じ行間 */
  }

  .section_title {
    font-size: 2.8rem;
  }

  .cta_title {
    font-size: 2.5rem;
  }

  .business_hero::before {
    top: 38rem;
    left: -1rem;
    bottom: auto;
    font-size: 8.5rem;
  }

  .business_hero::after {
    top: auto;
    right: -12rem;
    bottom: -2rem;
    width: 38rem;
    height: 38rem;
  }

  /* スマホは写真を大きなカードにして、ラベルと見出しを写真の上のほう（天井のあたり）に重ねる */
  .business_hero_inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto; /* ラベル・見出し・写真の残り・説明文・ボタン */
    gap: 0;
    height: auto;
  }

  .business_hero_content {
    display: contents; /* 箱をなくして、中身を上の格子に直接並べる（写真と同じ行に置いて重ねるため） */
  }

  .business_hero_label,
  .business_hero_title {
    position: relative; /* 写真より手前に出す */
    z-index: 2;
    grid-column: 1;
    margin-inline: 1.8rem;
  }

  .business_hero_label {
    grid-row: 1;
    margin-top: 2.6rem; /* カードの上端から少し下げる */
    margin-bottom: 1.4rem;
  }

  .business_hero_title {
    grid-row: 2;
  }

  .business_hero_visual {
    grid-column: 1;
    grid-row: 1 / 4; /* ラベル・見出しの行から写真の残りの行まで広げて、下に敷く */
    height: 50rem;
    margin-bottom: 2.4rem;
  }

  .business_hero_wash {
    top: 3rem;
    right: -3rem;
    width: 32rem;
    height: 31rem;
  }

  .business_hero_curve {
    top: 2rem;
    right: -2rem;
    width: 34rem;
    height: 31rem;
  }

  .business_hero_media {
    top: 0;
    right: 0;
    width: 100%; /* 横幅いっぱいのカードにする */
    height: 50rem;
    border-width: 0.5rem;
    border-radius: 1.4rem 7rem 1.4rem 7rem;
  }

  /* 見出しを読みやすくするため、写真の上のほうだけ白いもやをかける */
  .business_hero_media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(248, 250, 255, 0.92), rgba(248, 250, 255, 0.72) 32%, rgba(248, 250, 255, 0) 58%);
  }

  /* スマホは写真カードに見出しを重ねるので、左下の軽作業の小さい写真は出さない */
  .business_hero_sub {
    display: none;
  }

  .business_hero_lead {
    grid-row: 4;
    margin-bottom: 2.4rem;
    font-size: 1.45rem;
  }

  .desktop_detail {
    display: none;
  }

  .mobile_summary {
    display: inline;
  }

  .business_hero_actions {
    grid-row: 5;
    display: grid;
    grid-template-columns: 1fr 1fr; /* PCと同じく、2つのボタンを横に並べる */
    gap: 1rem;
  }

  .button {
    width: 100%;
  }

  .overview_section {
    padding-top: 10.2rem; /* スマホは写真の上を跳ぶLW君が小さいので、PCと余白の考え方は同じで数字だけ変える */
  }

  .overview_flow {
    margin-top: 4.2rem;
    padding: 2.4rem 0 3.2rem;
  }

  .overview_flow_track {
    padding: 1.4rem 0 1rem;
    animation-duration: 28s;
  }

  .overview_hopper {
    width: 7.5rem;
    height: 7.5rem;
  }

  .overview_rider {
    width: 7.5rem;
    height: 7.5rem; /* スマホの overview_hopper と同じ */
  }

  .overview_sweat {
    font-size: 1.4rem;
  }

  .overview_flow_card {
    border-radius: 1.8rem;
  }

  .overview_flow_card_large {
    width: 25rem;
    height: 14rem;
  }
  .overview_flow_card_medium {
    width: 20rem;
    height: 14rem;
  }
  .overview_flow_card_small {
    width: 16rem;
    height: 14rem;
  }

  .section,
  .daily_inner {
    width: auto;
    padding: 8rem 2rem;
  }

  .section_head {
    margin-bottom: 4rem;
  }

  .service_section::before {
    top: 3rem;
    right: 1rem;
    font-size: 9rem;
  }

  .service_layout,
  .digital_layout {
    gap: 3.2rem;
  }

  .service_media {
    aspect-ratio: 4 / 3;
    border-radius: 2.2rem;
  }

  .service_title {
    font-size: 2.2rem;
  }

  /* 説明文は上のリード文と同じ内容なので、スマホでは見出しだけを2列で見せる */
  .task_text {
    display: none;
  }

  /* IT作業も軽作業と同じ形：番号と見出しだけを2列で見せる */
  .digital_services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .digital_item {
    padding: 1.8rem; /* 半分の幅でも「ホームページ制作」が1行に入るよう、内側の余白を詰める */
  }

  /* 同じ形の軽作業カード（.task_title）と文字の大きさをそろえる。1.9rem だと「制作」の「作」だけ次の行に落ちる */
  .digital_title {
    font-size: 1.5rem;
  }

  /* 写真の説明・番号・担当などの小さい文字。スマホは1remが縮むので、幅360pxでも11px以上になる大きさにする */
  .overview_flow_caption,
  .service_caption,
  .digital_video_caption,
  .voice_number,
  .voice_detail {
    font-size: 1.2rem;
  }

  .digital_description {
    display: none;
  }

  /* 同じ写真が「作業風景」と上の動画ですでに出ているので、スマホでは縦に長くしないよう隠す */
  .work_gallery {
    display: none;
  }

  .digital_video {
    border-radius: 2.2rem;
  }

  .voice {
    padding: 8rem 1.8rem 7rem;
  }

  .voice::before {
    top: 1.2rem;
    right: -1rem;
    font-size: 7.8rem;
  }

  .voice_header {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 4.5rem;
  }

  .voice_label {
    margin-bottom: 1.5rem;
  }

  .voice_title {
    margin-bottom: 1.8rem;
    font-size: 3rem;
    line-height: 1.45em;
  }

  .voice_description {
    margin-bottom: 2.8rem;
    font-size: 1.3rem;
    line-height: 1.85em;
  }

  .voice_side {
    width: 100%;
    max-width: 34rem;
  }

  .voice_list {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .voice_item,
  .voice_item:last-child {
    grid-column: auto;
    min-height: 0;
    max-width: none;
    padding: 2.6rem 2.3rem 2.5rem;
  }

  .voice_number {
    margin-bottom: 2rem;
  }

  .voice_profile {
    gap: 1.4rem;
    margin-bottom: 2.2rem;
  }

  .voice_image {
    width: 8rem;
    height: 8rem;
    border-width: 0.5rem;
  }

  .voice_role {
    font-size: 1.2rem;
  }

  .voice_location {
    font-size: 1.2rem;
  }

  .voice_summary {
    margin-bottom: 1.6rem;
    font-size: 1.85rem;
    line-height: 1.55em;
  }

  .voice_quote {
    margin-bottom: 2.3rem;
    padding-left: 1.4rem;
    font-size: 1.28rem;
    line-height: 1.9em;
  }

  .voice_name {
    padding-top: 1.6rem;
    font-size: 1.25rem;
  }

  .daily_head {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 5rem;
  }

  .daily_title {
    margin-top: 1.8rem;
    font-size: 3rem;
    line-height: 1.42em;
  }

  .daily_description {
    margin-top: 2rem;
    font-size: 1.36rem;
    line-height: 1.9em;
  }

  .daily_head .daily_head_mark {
    display: none;
  }

  .daily_clock {
    font-size: 1.3rem;
  }

  .daily_message {
    font-size: 1.3rem; /* 1行に収まるいちばん大きい文字 */
    line-height: 1.7em;
  }
  .cta_section {
    padding: 6.4rem 1.8rem;
  }

  .cta_inner {
    gap: 2.4rem;
    padding: 4rem 2.2rem;
    border-radius: 2.4rem 6rem 2.4rem 2.4rem;
  }

  .cta_art {
    max-width: none;
  }

  .cta_actions {
    width: 100%;
  }

  .cta_plane {
    display: none;
  }
}

/* ┌─────────────────────────────────────────┐
   │ 動きを抑える設定                        │
   └─────────────────────────────────────────┘ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .business_hero_curve,
  .business_hero_image,
  .business_hero_reveal,
  .business_hero_media,
  .business_hero_sub,
  .business_hero_label,
  .business_hero_title,
  .business_hero_lead,
  .business_hero_actions,
  .business_marker .business_phrase,
  .button_primary::before,
  .overview_flow_track,
  .cta_plane {
    animation: none;
  }

  .business_hero_media {
    clip-path: none;
  }

  .business_hero_sub,
  .business_hero_sub_caption, /* カードが傾かないので、札の逆回しも外す */
  .business_hero_label,
  .business_hero_title,
  .business_hero_lead,
  .business_hero_actions {
    opacity: 1;
    transform: none;
  }

  .business_marker .business_phrase {
    background-size: 100% 0.48em;
  }

  .header {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .page.is_js .js_soft_reveal,
  .page.is_js .js_soft_reveal_left,
  .page.is_js .js_blur_reveal {
    opacity: 1;
    filter: none;
    border-radius: 1.2rem;
    transform: none;
    transition: none;
  }
}