@charset "UTF-8";
/*
Theme Name: Work Link (Lightning Child)
Template: lightning
Version: 0.1.0
Description: Work Link（就労継続支援A型事業所）用のLightning子テーマ。静的HTML（../../html/）からの移植版。
*/

/* ==========================================================================
   Work Link トップページ用 CSS
   まずはヒーローセクションのみ実装（他セクションは順次追加予定）

   数値の根拠：
   採用デザイン画像「ヒーロー.png」(1672x941px) を PC 1440px 相当とみなし、
   デザイン上のピクセル値 × 0.861244（= 1440 / 1672）で CSS px に換算している。
   ========================================================================== */

:root {
  --color-navy: #0a2455;        /* デザイン画像の見出し実測値 rgb(9,36,85) */
  --color-pink: #fd576d;        /* ピンクボタン実測値（グラデ無しのベタ塗り） */
  --color-blue-light: #5cc6f2;  /* 青ボタン左上 */
  --color-blue-dark: #46b3ea;   /* 青ボタン右下 */
  --color-white: #ffffff;

  /* 「こんなことで悩んでいませんか？」セクション実測値 */
  --color-worry-blue: #005dc5;       /* 見出し2行目・チェックマーク */
  --color-worry-blue-light: #52a8ef; /* worriesラベル */
  --color-worry-check-bg: #def2fd;   /* チェック円の背景 */
  --color-worry-text: #333333;       /* リスト・メッセージの文字（一般的なWeb黒） */
  --color-worry-title: #222222;      /* 見出し1行目「こんなことで」（一般的なWeb黒） */

  /* 「Work Linkってどんなところ？」セクション */
  --color-about-brand: #1f8a72; /* 「Work Link」の文字色・アクセントカラー */

  /* 「どんな仕事ができる？」セクション。参考デザイン画像の5色のアイコンを実測に近い値で再現 */
  --color-job-blue: #2f7fe0;   /* PC作業 */
  --color-job-green: #4caf7d;  /* AIの仕事 */
  --color-job-orange: #f5871a; /* EC・ネットショップ運営（お悩みCTAボタンと同じオレンジ） */
  --color-job-purple: #9b6fd6; /* 軽作業・検品・梱包 */
  --color-job-cyan: #4fb8dc;   /* 清掃・環境整備 */
  --color-job-rose: #d9739a;   /* その他（丸抜き写真版で追加。見学・相談ボタンの--color-pinkとは
                                   別トーンにして、CTAボタンと紛らわしくならないようにした） */
  --color-job-text: #333333;   /* カード本文（お悩みセクションの本文色と統一） */

  /* 見出し・ラベル・リード文は明朝体。デザイン画像の字形を照合した結果 Noto Serif JP が最も近い */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  /* ナビゲーション・ボタンなど UI 部品はゴシック体 */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --container-max: 1440px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  /* .header::beforeのぼかし光彩がヘッダー幅より左右にはみ出す指定になっており、
     受け止めるoverflow-x:hiddenが無かったため横スクロールバーが出ていた。
     実際にスクロールを制御しているのはbodyではなくhtml要素(document.scrollingElement)
     だったため、bodyではなくhtmlに直接指定する。見た目は変わらず、はみ出し分が
     見えない形で切れるだけ。
     ただしoverflow-x:hiddenは「横スクロールバーを消すだけ」で、横方向の
     スクロール範囲そのものは残ってしまう（下のbody側の指定で根本を断つ） */
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  color: var(--color-navy);
  line-height: 1.7;
  background: var(--color-white);
  /* 【2026-09-13 不具合修正】
     症状：更新(リロード)すると右側に余白が出て、サイト全体が左にズレる。
     しかも横スクロールバーが無いので元に戻せない。

     原因：.header::beforeのぼかし光彩が right:-4% で画面の右外へはみ出しており、
     ページには「横に76px分（1920px幅の場合）スクロールできる余地」が残っていた。
     html の overflow-x:hidden は“スクロールバーを隠すだけ”で、この余地は消えない。
     そのため一度でも横方向のスクロール位置が0以外になると、ブラウザはその位置を
     記憶し、更新のたびに復元する。バーが無いので手動では戻せず、ズレたままになる。

     対処：body自身を「はみ出しを切り取るだけの箱」にして、はみ出す余地ごと無くす。
     ・position: relative … 絶対配置の.headerの基準をbodyにして、切り取りを効かせる
     ・overflow-x: clip  … hiddenと違い“スクロールできる箱”を作らないので、
                            横スクロール位置が0以外になること自体が起きなくなる
     見た目は完全に同一（1920px幅・ヘッダー周辺の画面比較で差分0ピクセルを確認済み） */
  position: relative;
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* WordPress化に伴う修正（2026-09-29）：Lightning本体は記事本文用に、h2〜h6・p・
   ul/ol・li・blockquote・table等の多数のタグへ個別にmargin/padding/border/
   backgroundを付与している（例：h3にmargin-top:2em、pやulにmargin-bottom、
   ulにpadding-left:1.5em等）。静的HTML版はCSS冒頭の`* { margin:0; padding:0; }`
   というリセット1本を前提にデザインされているため、Lightning側のこれらのタグ
   単位の指定（詳細度がユニバーサルセレクタより高い）がそのまま残ってしまい、
   about-alt__title等の各セクション要素に静的HTML版にはない余白・枠線が乗って
   いた（2026-09-29、久保さん指摘で発覚）。
   対象は本文エリア(.entry-body)だけでなく、header.php（.header、ヒーローのh1含む）・
   footer.php（.cta-footer__hero・.site-footer、それぞれ独自の見出しタグを持つ）も
   同様に影響を受けるため、まとめて対象にする（2026-09-29、フッターの見出しにも
   同じ問題が残っていると久保さん指摘で発覚し追加）。
   これらの配下の全要素に対して、同じ内容のリセットをクラス詳細度で再度当てて
   打ち消す。
   【重要】このルールは.container等、本ファイル内で後述する個別クラスより
   必ず前に書くこと。詳細度が同じ場合はCSSの記述順で後が勝つため、この位置より
   後にあるクラス指定（.containerのmargin:0 auto等）は正しく上書きできるが、
   もし後ろに置くと逆に.containerのmargin:0 autoまで打ち消してしまい、
   ページ全体が中央寄せされず左に寄る事故になる（2026-09-29、実際に発生し久保さん
   指摘で発覚・修正済み） */
.entry-body *,
.header *,
.hero *,
.cta-footer__hero *,
.site-footer * {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  box-sizing: border-box;
  /* 2026-10-02追加：Lightningは見出し(h2〜h6)に行間1.4を直接指定しているが、静的HTML版は
     body(1.7)をそのまま継承する。そのため見出しの高さがWP版だけ小さくなり、ページ全体の
     高さが数十〜200pxずれていた。ここで親から継承に戻す（個別のクラス指定はこの後ろにあるため
     そのまま効く。タグ名だけでline-heightを指定している箇所はbodyのみで、影響しない） */
  line-height: inherit;
}

/* WordPress化に伴う修正（2026-10-02、スマホ幅の実機確認で判明）：Lightning本体が、
   スマホ幅になると画面左上に固定のハンバーガーボタン（.vk-mobile-nav-menu-btn）と、
   開くメニュー（.vk-mobile-nav）を独自に出す。静的HTML版にはなく、子テーマのheader.phpに
   同じ役割の.header__nav-toggleが別にあるため、二重になってしまう。標準側を非表示にする */
.vk-mobile-nav-menu-btn,
.vk-mobile-nav {
  display: none !important;
}

/* WordPress化に伴う修正（2026-10-02、久保さん指摘「ページによっては上下に余白がある」で判明）：
   Lightning本体の本文を包む外枠が、静的HTML版にはない余白を足していた。
   ・.site-body：上35px・下40pxの余白（バナーの上、フッター直前の白い帯になる）
   ・.main-section--margin-bottom--on：本文の下に30pxの余白
   ・.sub-section：サイドバー用の領域（固定ページでは1カラム固定で使わないが、中身が
     約500pxの高さで残り、CTA/フッターの直前に大きな空白ができていた）
   静的HTML版は各セクションが画面幅いっぱいに隙間なく並ぶ作りなので、外枠の余白はすべて0にする。
   将来、ブログ記事（お知らせ）でサイドバーを使う場合は、.sub-sectionの非表示を固定ページ(body.page)限定にしてある */
.site-body {
  padding-top: 0;
  padding-bottom: 0;
}

.main-section {
  margin-bottom: 0;
}

body.page .sub-section {
  display: none;
}

/* WordPress化に伴う修正（2026-10-02）：Lightning本体が`body, html`に文字サイズ(16px)と
   フォント(Lato)を指定していて、本ファイル先頭の`body`（詳細度が同じで読み込み順が前）を
   上書きしていた。静的HTML版のbodyは「文字サイズ=htmlの10px(62.5%)を継承、フォント=
   Noto Sans JP系」なので、文字サイズを明示しない箇所（フッターの余白・行の高さ等）が
   WP版だけ膨らみ、ページ全体の高さがずれていた。`html body`（詳細度を1段上げる）で
   静的HTML版と同じ土台に戻す */
html body {
  font-family: var(--font-sans);
  font-size: inherit;
}

/* WordPress化に伴う修正（2026-10-02）：Lightning本体がフッター(.site-footer)に
   ・content-visibility: auto（画面外の間は描画を省き、高さを仮の値(約435px)で扱う最適化）
   ・font-size: 12px（静的HTML版は10pxを継承）
   を指定していた。前者はスクロールして見えた瞬間にフッターの高さが約40px変わって
   ページがガクッと動く原因になり、後者は文字サイズを明示していない箇所の行の高さを変える。
   どちらも静的HTML版と同じ状態に戻す */
.site-footer {
  content-visibility: visible;
  font-size: inherit;
}

/* WordPress化に伴う修正（2026-10-02）：Lightning本体が表のセル(th・td)に独自の文字サイズ
   (.875rem=8.75px)を指定していた。静的HTML版は表(table)の文字サイズ(15px)をセルが
   そのまま継承する作りのため、WP版だけ表の文字が小さく、行も低くなっていた。
   セルの文字サイズを親から継承に戻す（クラスで個別に指定している箇所は、この後ろにあるため
   そのまま効く） */
.entry-body th,
.entry-body td {
  font-size: inherit;
}

/* フォーム部品(入力欄・選択欄・テキストエリア)の行間は、ブラウザ標準の`normal`に戻す。
   上のリセットブロックの`line-height: inherit`が、これらにも効いてしまい、選択欄・
   テキストエリアの高さが静的HTML版より大きくなっていたため（2026-10-02）。
   ボタンは.hero__btnが独自に行間を指定しているので対象外 */
.entry-body input,
.entry-body select,
.entry-body textarea {
  line-height: normal;
}
.entry-body h3::after,
.site-footer h3::after {
  content: none;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 68px;
}

/* タブレット・スマホ幅。全セクション共通のこの基本コンテナが未対応
   だったため、左右68pxのpaddingが狭い画面でも残り、.worries__cta等
   「.containerの中でさらに幅を計算している要素」の使える幅を大きく
   圧迫していた（例: 360px幅で68px×2=136px引かれ224pxしか残らない） */
@media (max-width: 992px) {
  .container {
    padding: 0 24px;
  }
}

/* WordPress化に伴う修正（2026-09-29）：Lightning本体が固定ページの本文を
   囲む要素にも".container"というクラス名を使っているため、上記の独自
   .containerスタイル（max-width:1440px・左右padding68px）が意図せず
   本文エリア全体（.site-body-container）にも適用され、about-alt等の
   各セクションが静的HTML版よりずっと狭い幅に押し込まれてしまっていた。
   .site-body-containerだけを対象から外し、本文エリアは画面幅いっぱいに
   戻す（静的HTML版と同じ見た目にするため） */
.site-body-container.container {
  max-width: none;
  padding: 0;
}
@media (max-width: 992px) {
  .site-body-container.container {
    padding: 0;
  }
}

/* ==========================================================================
   ヘッダー（ヒーローに重ねる透過ヘッダー）
   ========================================================================== */

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: 33px 0; /* デザイン: ロゴ・ナビ・CTAの中心が上から約60px */
}

/* ヘッダーは1440px中央寄せの.containerを使わず、常に画面端を基準に配置する
   （.containerのままだと、ブラウザ幅が1440pxより広いときにロゴ・メニューだけ
   左右に余分な余白ができてしまうため） */
.header .container {
  max-width: none;
  margin: 0;
  padding-left: 74px;
  padding-right: 66px;
}

.header__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.header__logo img {
  /* 2026-09-30、久保さん指示で少し縮小(78px→70px) */
  height: 70px;
  width: auto;
}

.header__nav {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  margin-left: 24px;
}

.header__nav-list {
  display: flex;
  /* 2026-09-28、久保さん指摘で修正：flex-end(下揃え)だと、高さ44pxの
     見学・相談ボタンと高さ27pxの通常リンクの下端が揃うため、ボタンの
     中心だけ約9.5px上にずれて見えていた。center(中央揃え)に変更し、
     全項目の縦中心を揃える */
  align-items: center;
  gap: 40px;
  position: relative;
  /* 2026-09-30、久保さん指示でロゴ文字の下辺とナビ文字の下辺を揃える
     （実測でロゴ下辺との差24pxを解消するため-6px→18pxに変更） */
  top: 11px;
}

.header__nav-link {
  font-family: var(--font-sans);
  /* 2026-09-25、久保さん指示でやや大きく感じたため縮小(2.15rem→1.9rem)。
     2026-09-30、さらに一段階縮小(1.9rem→1.7rem) */
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.header__nav-link.is-current {
  font-weight: 600;
}

/* 見学・相談への導線。spec.mdの「ヘッダー右端に色を変えて強調配置」に
   合わせ、他のナビ文字と違い塗りつぶしのピル型ボタンにする。色は
   .hero__btn--blueと同じ青グラデーション（サイト内の「お問い合わせ」系
   ボタンと揃えている）（2026-09-22、久保さん指示） */
.header__nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--color-blue-light), var(--color-blue-dark));
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-white);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ハンバーガーボタン。PC幅(993px以上)ではdisplay:noneで非表示。
   タブレット・スマホ幅は下のメディアクエリでdisplay:flexにする */
.header__nav-toggle {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.header__nav-toggle-bar {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-navy);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ラベルは画面上は見せず、スクリーンリーダー向けにだけ残す */
.header__nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.header__nav-toggle.is-open .header__nav-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.header__nav-toggle.is-open .header__nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.header__nav-toggle.is-open .header__nav-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   レスポンシブ（タブレット・スマホ）
   --------------------------------------------------------------------------
   2026-09-18、久保さん指示で追加。ブレークポイントはspec.md記載の通り、
   Lightning無料テーマの標準値(992px/768px)に合わせている。
   ヘッダーは992px以下でハンバーガーメニュー化し、ナビを右からのスライド
   オーバーレイに切り替える（開閉はjs/nav-toggle.jsが.header__nav/
   .header__nav-toggleに.is-openを付け外しするだけ）。
   ========================================================================== */
@media (max-width: 992px) {
  .header .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .header__logo img {
    height: 52px;
  }

  .header__nav-toggle {
    display: flex;
    /* 2026-10-01：メニューを開くと、右から出るパネル(.header__nav、z-index: 30)が
       ボタンの上に重なり、「×（閉じる）」が隠れて閉じられなくなっていた。
       パネルより前面に出す */
    position: relative;
    z-index: 40;
    /* 指で押しやすいよう、押せる範囲を40px→44pxに広げる（見た目の線の長さは同じ） */
    width: 44px;
    height: 44px;
  }

  .header__nav {
    /* 2026-09-23、久保さん指摘で「ハンバーガーメニューを開くと上半分が
       真っ白」になる問題を確認・修正。原因はPC用の
       align-items:flex-end（ロゴの下端にナビ文字を揃えるためのスタイル）が、
       スマホの全画面ドロップダウンパネルにも引き継がれ、中身の
       .header__nav-list（唯一の子要素）が縦方向の末尾（＝パネル下部）に
       寄せられてしまい、上側が空白になっていたこと。flex-direction:column
       ＋align-items:flex-startに変更し、パネル上部からリストが始まる
       ようにした */
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(320px, 84vw);
    height: 100vh;
    margin-left: 0;
    padding: 110px 32px 40px;
    background: var(--color-white);
    box-shadow: -8px 0 24px rgba(10, 36, 85, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    /* 右端に固定するため、コンテナの右パディングは打ち消す */
    left: auto;
    right: 0;
  }

  .header__nav.is-open {
    transform: translateX(0);
  }

  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    top: 0;
  }

  .header__nav-link {
    font-size: 1.9rem;
  }
}

/* ==========================================================================
   ハンバーガーメニュー（開いたパネル）の背景（2026-10-05、久保さん指示）
   --------------------------------------------------------------------------
   白一色で寂しいため、上から下へ、白から水色に変わるグラデーションにした。
   （一度、水玉・丸抜き写真・波も試したが、久保さん判断で外した）
   連絡先（電話番号・受付時間）は、メニュー下部に出す（PC幅では非表示）。
   ========================================================================== */
.header__nav-info,
.header__nav-sub,
.header__nav-ig {
  display: none;
}

@media (max-width: 992px) {
  .header__nav {
    /* 2026-10-05：補助リンク（2列）を足しても画面に収まる（スクロール不要）よう、
       幅を少し広げ、上下左右の余白を詰めた */
    width: min(340px, 92vw);
    padding: 92px 28px 24px;
    /* iPhoneのSafariは、100vhがブラウザ下部のバーに隠れる部分まで含んでしまい、
       一番下の電話番号が隠れるため、実際に見える高さ(dvh)を使う（非対応なら100vhのまま） */
    height: 100vh;
    height: 100dvh;
    /* 上が白・下が水色のグラデーションだけ（水玉・丸抜き写真・波は、2026-10-05に外した） */
    background:
      linear-gradient(180deg, #ffffff 0%, #eef8fe 55%, #d3ecfb 100%);
  }

  /* 項目の間に細い区切り線を入れる（最後の「見学・相談」ボタンの手前まで） */
  .header__nav-list {
    width: 100%;
    gap: 0;
  }

  .header__nav-list li {
    width: 100%;
  }

  .header__nav-list li:not(:last-child) .header__nav-link {
    display: block;
    padding: 12px 0;
    font-size: 1.7rem;
    border-bottom: 1px solid rgba(10, 36, 85, 0.12);
  }

  .header__nav-list li:last-child {
    margin-top: 20px;
  }

  /* 「見学・相談」ボタンは、下のInstagramボタンと同じ幅（メニューの横いっぱい）にして揃える（2026-10-16、久保さん指示） */
  .header__nav-list li:last-child .header__nav-cta {
    display: flex;
    width: 100%;
  }

  /* 補助リンク（その他のご案内・会社情報の6項目）。小見出しなしの2列×3行。
     メインより一段小さく・薄くして、主役と脇役を分ける */
  .header__nav-sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    width: 100%;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
  }

  .header__nav-sub a {
    display: block;
    padding: 7px 0;
    font-size: 1.25rem;
    line-height: 1.5;
    color: rgba(10, 36, 85, 0.75);
    text-decoration: none;
  }

  .header__nav-info {
    display: block;
    margin-top: auto;
    padding-top: 20px;
    color: var(--color-navy);
  }

  .header__nav-info p {
    margin: 0;
  }

  .header__nav-info-label {
    font-size: 1.2rem;
    font-weight: 700;
  }

  .header__nav-info-tel {
    display: inline-block;
    padding: 2px 0;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-navy);
    text-decoration: none;
  }

  .header__nav-info-hours {
    font-size: 1.2rem;
  }

  /* Instagramのボタン（2026-10-16、久保さん指示）。補助リンクのすぐ下（電話番号は従来どおり一番下）。
     見た目・ホバーはお知らせ下のセクションのボタン（.ig-feed__btn）と共通。メニューの幅に合わせて小さめ・横いっぱいにする */
  .header__nav-ig {
    display: block;
    width: 100%;
    /* メニュー全体に gap:40px があるため、マイナスの余白で相殺し、補助リンクの約16px下に寄せる（補助リンクの付属に見える距離） */
    margin-top: -24px;
  }

  .header__nav-ig .ig-feed__btn {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 44px; /* 「見学・相談」ボタンと同じ高さ */
    padding: 6px 12px;
    gap: 8px;
  }

  .header__nav-ig .ig-feed__btn img {
    width: 84px;
  }

  .header__nav-ig .ig-feed__btn-text {
    font-size: 1.35rem;
    white-space: nowrap;
  }
}

/* 狭い端末（メニュー幅が約240px以下）では、ロゴ・文字をさらに小さくして1行に収める */
@media (max-width: 340px) {
  .header__nav-ig .ig-feed__btn {
    padding: 8px 10px;
    gap: 6px;
  }

  .header__nav-ig .ig-feed__btn img {
    width: 68px;
  }

  .header__nav-ig .ig-feed__btn-text {
    font-size: 1.2rem;
  }
}

/* 画面の高さが低い機種（iPhone SE・小さめのAndroid）では、余白を詰め、
   電話番号の見出し（「お電話でのお問い合わせ」）を省いて、スクロールなしで収める。
   （2026-10-16：Instagramのボタンを足したため、境目を760px→790pxに上げた。実測：余白を詰めない状態の高さは788px） */
@media (max-width: 992px) and (max-height: 790px) {
  .header__nav {
    padding-top: 84px;
    padding-bottom: 16px;
  }

  .header__nav-list li:not(:last-child) .header__nav-link {
    padding: 8px 0;
  }

  .header__nav-list li:last-child {
    margin-top: 14px;
  }

  .header__nav-sub {
    margin-top: 14px;
  }

  .header__nav-ig {
    margin-top: -26px;
  }

  .header__nav-sub a {
    padding: 5px 0;
  }

  .header__nav-info {
    padding-top: 12px;
  }

  .header__nav-info-label {
    display: none;
  }
}

/* さらに低い画面（高さ672px以下。iPhone SEのバー表示中など）では、補助リンクを非表示にして、
   メインの項目・「見学・相談」ボタン・Instagramのボタン・電話番号が、できるだけスクロールなしで見えるようにする
   （補助リンクと同じ項目はフッターにもある。2026-10-16：Instagramのボタンを足したため、境目を650px→672pxに上げた。
   実測：補助リンクを出した状態の高さは671px） */
@media (max-width: 992px) and (max-height: 672px) {
  .header__nav-sub {
    display: none;
  }
}

/* 極端に低い画面（高さ560px以下。iPhone 5/SE初代のバー表示中など）：Instagramのボタンを足した分（2026-10-16）、
   余白をもう一段詰めて、電話番号までスクロールなしで見えるようにする（実測：この段の前の状態の高さは558px） */
@media (max-width: 992px) and (max-height: 560px) {
  .header__nav {
    padding-top: 72px;
  }

  .header__nav-list li:not(:last-child) .header__nav-link {
    padding: 6px 0;
  }

  .header__nav-list li:last-child {
    margin-top: 10px;
  }

  .header__nav-ig {
    margin-top: -28px;
  }

  .header__nav-info {
    padding-top: 8px;
  }
}

/* 2026-09-28、久保さん指摘・検証で発見：ハンバーガーメニューに切り替わる
   992px以下ではなく、992px超〜約1260pxの「まだPC幅だがメニューが
   横に収まりきらない」帯で、ナビが折り返しも縮小もせず右にはみ出し、
   「見学・相談」ボタンが画面外に押し出されて見えなくなっていた
   （実測：現状のナビ一式は常に約1161px分の横幅を要求する）。
   広いモニターでの見た目・文字サイズは変えたくないとのご要望のため、
   992px以下のハンバーガー化には手を付けず、この帯だけの専用調整として
   文字サイズ・余白を縮めてPCレイアウトのまま収める */
@media (min-width: 993px) and (max-width: 1300px) {
  .header__nav {
    margin-left: 16px;
  }

  .header__nav-cta {
    height: 38px;
    padding: 0 16px;
    font-size: 1.4rem;
  }
}

/* 2026-10-05、久保さん指示：PC幅（993px以上）のヘッダーを、画面幅に合わせて
   文字・メニュー間隔・ロゴ・左右余白をなめらかに縮める（旧：1300px以下だけ段階的に縮めていた）。
   画面幅1300px超〜約1536pxでロゴが横に潰れていた不具合（元の画像は横長なのに、メニューに
   押されて幅だけ縮んでいた）も、ロゴを縮ませない（flex-shrink:0）ことで解消。
   1680px以上は従来どおり（文字17px・間隔40px・ロゴ高さ70px・余白74/66px）。
   1300pxでは文字14px・間隔18px・ロゴ56px・余白32/28px、993pxでは文字13px・間隔10px・ロゴ40px。
   その間は直線的に変わる（clamp関数）。993px以下はハンバーガーメニュー（上のメディアクエリ） */
@media (min-width: 993px) {
  .header__logo {
    flex-shrink: 0;
  }

  .header .container {
    padding-left: clamp(32px, calc(32px + (100vw - 1300px) * 0.1105), 74px);
    padding-right: clamp(28px, calc(28px + (100vw - 1300px) * 0.1), 66px);
  }

  .header__logo img {
    height: clamp(56px, calc(56px + (100vw - 1300px) * 0.0368), 70px);
  }

  .header__nav-list {
    gap: clamp(18px, calc(18px + (100vw - 1300px) * 0.0579), 40px);
  }

  .header__nav-link {
    font-size: clamp(14px, calc(14px + (100vw - 1300px) * 0.0079), 17px);
  }
}

@media (min-width: 993px) and (max-width: 1300px) {
  .header__logo img {
    height: calc(40px + (100vw - 993px) * 0.0521);
  }

  .header__nav-list {
    gap: calc(10px + (100vw - 993px) * 0.0261);
  }

  .header__nav-link {
    font-size: calc(13px + (100vw - 993px) * 0.00326);
  }
}

/* メニューを開いている間、背面の本文をスクロールさせない
   （js/nav-toggle.jsがbodyに.nav-openを付け外しする） */
body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   ヒーロー
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  /* 画面ぴったりの高さにして、スクロールし始めたらすぐ次のセクションに
     移るようにする（参考: keiseikai-mhg.jp）。100svhはスマホのアドレスバー
     の出入りに影響されにくい単位で、PCでは100vhと同じ見え方になる */
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background-color: #d9e4ec; /* スライド切り替わりの一瞬、白フラッシュしないための下地色 */
}

/* 背景写真3枚を交互にスライドショー表示し、表示中にケンバーンズ効果でズームする
   （unity-g.com を参考。1枚 15秒サイクル、3枚を1/3周期ずつずらして表示） */

@keyframes heroKenBurnsZoom {
  0% { transform: scale(1); }
  40%, 100% { transform: scale(1.15); }
}

@keyframes heroKenBurnsFade {
  0% { opacity: 0; }
  6.667% { opacity: 1; }
  33.33% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}

/* --- 2枚目（男性・倉庫）：3枚の中で唯一、文字の場所が本当に暗い ---
   見出し94〜114／サブテキスト52〜57。ネイビーが読める139以上まで持ち上げたい。

   ただし最初に「見出しを囲む楕円を白くする」方法を試したところ、
   男性の青いポロシャツの上に丸い曇りがくっきり出てしまい、
   いかにも加工した見た目になった（楕円は画面内で輪郭が閉じるので目立つ）。

   そこで方針を変更：
   (a) 明るくする範囲を画面の左下«角»を起点にする。角から始めれば
       画面の外へ抜けていくので輪郭が閉じず、«左下から光が差している»ように見える。
   (b) 白くする量を減らし（0.74→0.52）、代わりに背景を少しぼかす。
       読みにくさの正体は暗さだけでなく、棚や箱の細かい模様が文字と competing している点。
       ぼかすと写真の色（青いポロシャツの鮮やかさ）を保ったまま模様だけ消えるので、
       白く濁らせるより自然。写真の«背景ボケ»と同じ見え方になる。
   (c) ナビの帯（特に右側の暗い棚）は上からの霞で持ち上げる。 */

/* ==========================================================================
   ★ パターンB：ロゴだけネイビー、ナビ・見出し・サブテキストは白
   --------------------------------------------------------------------------
   ■ 経緯（詳しくは git log 参照。要点だけ残す）
   1案: ネイビーの帯を上下に敷く濃いかげり → «グレーの膜»で不自然と指摘され撤去
   2案: unity-g.com を参考に、画面全体を覆う薄い黒(15%)1枚に統一（採用・現行）

   ナビの文字色・見出し・サブテキストを白にする。写真/動画側の暗さ調整は
   下の «.text-pattern-b .hero__veil, .hero--video .hero__veil-video» を参照。
   ========================================================================== */

.text-pattern-b .header__nav-link,
.text-pattern-b .hero__title,
.text-pattern-b .hero__title-intro,
.text-pattern-b .hero__subtext {
  color: var(--color-white);
}

/* 見出し・サブテキストの影。下の.hero__content::beforeが作る局所グラデーションが
   主役なので、text-shadowは輪郭を締める程度のごく弱いものに留める
   （2026-09-10、html/index2.html・index3.htmlでの検証を経て
   「C：局所グラデーション＋text-shadow」方式に変更） */
.text-pattern-b .hero__title,
.text-pattern-b .hero__title-intro,
.text-pattern-b .hero__subtext {
  text-shadow: 0 1px 3px rgba(6, 14, 28, 0.25);
}

/* ナビは3枚とも背景が226〜234とかなり明るく、影だけでの解決は焼け石に水
   だった（旧コメント参照）。下の.header::beforeが作るB案の背面ぼかしが
   主役で、このtext-shadowは本番の元の影（0.8/0.7/0.5）を1/3の濃さ・
   半分のぼかし幅にした補助的なもの
   （2026-09-10、index3.htmlでの検証を経て決定） */
.text-pattern-b .header__nav-link {
  text-shadow:
    0 0 0.5px rgba(6, 20, 44, 0.27),
    0 1px 0.5px rgba(6, 20, 44, 0.23),
    0 1px 1.5px rgba(6, 20, 44, 0.17);
}

/* タブレット・スマホ幅では、開いたメニューパネル自体が白背景になるため、
   動画に重ねる透過ヘッダー用の白文字(上の.text-pattern-b .header__nav-link)
   のままだと「白背景に白文字」で読めなくなる。通常の紺色に戻す。
   このルールは元の白文字定義より後ろ・同じ詳細度(0,2,0)で書く必要がある
   （詳細度が同じ場合、ソース順序が後のものが勝つため） */
@media (max-width: 992px) {
  .text-pattern-b .header__nav-link {
    color: var(--color-navy);
    text-shadow: none;
  }
}

/* ヘッダー全体（ロゴ含む）の背面に、横に広がるぼかし暗部を敷く（B案）。
   ロゴにもうっすらかかるが、無加工のネイビーロゴ自体は
   十分に明るい背景なのでそのまま読める */
.text-pattern-b .header::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: -60%;
  bottom: -60%;
  background: linear-gradient(
    180deg,
    rgba(6, 14, 28, 0.28) 0%,
    rgba(6, 14, 28, 0.16) 60%,
    rgba(6, 14, 28, 0) 100%
  );
  filter: blur(16px);
  z-index: -1;
}

/* ロゴはネイビーのまま無加工。3枚とも背景が224以上と明るいのでそのまま読める */

/* 写真/動画全体を少し落ち着いた色味にする、画面全体を覆う薄い黒レイヤー
   （参考: unity-g.com。rgba(0,0,0,0.10)を全面にそのまま乗せるだけ）。
   写真版・動画版で同じ形を使う。
   2026-09-10、久保さんの指示で無効化。ヘッダー・見出しそれぞれの
   局所的な暗部（B案・C案）に置き換えたため、画面全体を覆う処理は不要になった */
.text-pattern-b .hero--video .hero__veil-video {
  background: none;
}

/* ヒーロー見出し・サブテキストの背後だけに、下から上へ消えるグラデーションを敷く（C案）。
   画面全体ではなく高さを絞ることで、動画の見え方自体は変えない */
.text-pattern-b .hero__content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  background: linear-gradient(
    180deg,
    rgba(6, 14, 28, 0) 0%,
    rgba(6, 14, 28, 0.14) 30%,
    rgba(6, 14, 28, 0.34) 75%,
    rgba(6, 14, 28, 0.4) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* hero__title-introは.hero--video-introの方でposition:absoluteによる
   個別配置（動画左下に浮かび上がるイントロ演出）が指定されているため、
   ここでは触れずz-indexだけ::beforeより前面にする */
.text-pattern-b .hero__title-intro {
  z-index: 1;
}

.text-pattern-b .hero__title,
.text-pattern-b .hero__subtext,
.text-pattern-b .hero__buttons {
  position: relative;
  z-index: 1;
}

/* ヒーロー本文も.containerの1440px中央寄せを使わず、画面端基準にする
   （背景写真が全幅なのに文字だけ中央の枠に閉じ込められるのを防ぐ） */
.hero .container {
  max-width: none;
  margin: 0;
}

.hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  /* 見出し・ボタンを女性のひじの高さ付近まで下げる指示に対応。
     固定pxだと画面が低いノートPCでボタンが画面外に切れるため、
     ビューポートの高さに対する割合(vh)で位置を決める方式に変更。
     +10px, +15pxはその後の微調整で全体をもう少し下げたもの（計25px）。
     さらに+20px下げてお試し中（計45px） */
  padding: calc(42vh + 45px) 68px 0 148px;
}

.hero__title,
.hero__title-intro {
  font-family: var(--font-sans); /* お試し: 明朝体(--font-serif)からゴシック体に変更中 */
  font-size: 8.8rem; /* デザイン: 漢字の実寸高さ 93px → 80px 相当 */
  font-weight: 900;
  line-height: 1.19; /* デザイン: 行送り 122px → 105px */
  color: var(--color-navy);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

/* .hero__title-introは「hero-video-v2.html専用・実験」の演出用テキスト
   （下の .hero--video-intro ブロック参照）。それ以外のページでは
   HTML自体に置いていないので、このスタイルは効かない */
.hero__title-intro {
  white-space: nowrap;
  font-size: 11rem; /* お試し: 通常見出し(8.8rem)の1.25倍 */
  /* 2026-10-01、久保さん指示：11rem(110px)だと12文字で約1346pxになり、left:100pxと合わせて
     約1446px。画面幅が約1470px未満のPC（1440・1366・1280px等）で右端が切れていた。
     切れる幅だけ、右に24pxの余白が残るまで縮める（1477px以上では従来どおり11rem）。
     ※992px以下は下のメディアクエリ（スマホ・タブレット用）が上書きする */
  font-size: min(11rem, calc((100vw - 124px) / 12.3));
}

.hero__subtext {
  font-family: var(--font-sans); /* お試し: 明朝体(--font-serif)からゴシック体に変更中 */
  font-size: 2.3rem; /* デザイン: 27.4px → 23.6px */
  font-weight: 500;
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: 0;
  margin-bottom: 38px;
}

.hero__buttons {
  display: flex;
  gap: 20px; /* デザイン: ボタン間 23px → 19.8px */
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 32px; /* デザイン: 文字の右端から矢印のインクまで約37px（字下げ分を差し引いて32px） */
  font-family: var(--font-sans);
  font-size: 2.07rem; /* デザイン: 24.1px → 20.7px */
  font-weight: 400;   /* デザイン画像のインク量から逆算（太字ではない） */
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-white);
  height: 61px; /* デザイン: 71px → 61.1px */
  padding: 0 27px 0 50px;
  border-radius: 999px;
}

.hero__btn--pink {
  background: var(--color-pink); /* デザイン実測ではグラデーションではなくベタ塗り */
}

.hero__btn--blue {
  background: linear-gradient(135deg, var(--color-blue-light), var(--color-blue-dark));
}

.hero__btn-arrow {
  display: block;
  flex-shrink: 0;
}

/* ==========================================================================
   ヒーロー動画版（社長への比較検討用サンプル。hero-video.html / compare.html専用）
   --------------------------------------------------------------------------
   写真スライドショー版と違い、5本の動画をつなげた1本の映像なので
   シーンごとに専用のベールは作らず、上下に白グラデーションをかける
   簡易版で明るさを均している。
   ========================================================================== */

.hero--video .hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #d9e4ec;
}

.hero--video .hero__veil-video {
  /* 動画全体を覆う白ベールはやめ、ロゴ・ナビが乗る最上部だけを
     薄くかすませて、そこから下へなめらかに動画そのままの色味に戻す */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.40) 0%,
    rgba(255, 255, 255, 0.22) 8%,
    rgba(255, 255, 255, 0.08) 16%,
    rgba(255, 255, 255, 0) 26%,
    rgba(255, 255, 255, 0) 100%);
}

/* ■ ビジュアル先行の演出（hero-video-v2.html専用・実験）
   動画冒頭を先頭シーン差し替え版（5.mp4=見上げる女性、0〜4秒）にした上で、
   その4秒間は «動画と改行なしの見出しだけ» にする。ロゴ・メニュー（ヘッダー）も
   サブテキスト・ボタンも隠しておき、次のシーンに切り替わるタイミング(4秒)で、
   通常の見出し（改行あり・通常位置）＋ヘッダー＋サブテキスト＋ボタンに
   一斉に切り替える。既存のhero-video.html（通常版）には影響しないよう、
   専用クラス .hero--video-intro / .header--video-intro を付けたページだけに
   効かせる。 */
@keyframes heroFadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeOutUp {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

/* 先頭シーン専用の1行見出し。通常の見出し（.hero__title、42vh 148px起点）より
   もう少し左下に個別配置する。position: absoluteなので、通常の見出し・
   サブテキスト・ボタンのレイアウトには影響しない */
.hero--video-intro .hero__title-intro {
  position: absolute;
  top: 68vh;
  left: 100px;
  opacity: 0;
  animation:
    heroFadeInUp 1s ease-out 0.3s forwards,
    heroFadeOutUp 0.6s ease-in 3.4s forwards;
}

/* 通常の見出し（改行あり）は、先頭シーンの1行見出しと入れ替わる形で
   4秒から登場する */
.hero--video-intro .hero__title {
  opacity: 0;
  animation: heroFadeInUp 1s ease-out 4s forwards;
}

.hero--video-intro .hero__subtext,
.hero--video-intro .hero__buttons {
  opacity: 0;
  animation: heroFadeInUp 1s ease-out 4s forwards;
}

/* ヘッダー（ロゴ・メニュー）も先頭シーンの間は完全に隠す。
   z-indexはヘッダーの方が高いので、非表示中でも動画のクリック等は妨げない
   （pointer-eventsは操作の対象がないため未設定でも実害なし） */
.header--video-intro {
  opacity: 0;
  animation: heroFadeInUp 1s ease-out 4s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero--video-intro .hero__title-intro {
    display: none;
  }
  .hero--video-intro .hero__title,
  .hero--video-intro .hero__subtext,
  .hero--video-intro .hero__buttons,
  .header--video-intro {
    opacity: 1;
    animation: none;
  }
}

/* タブレット・スマホ幅。見出し(8.8rem=約141px)・左右padding(148px/68px)は
   PC専用の値なので大きく縮小する。先頭シーンの1行見出し(.hero__title-intro、
   position:absoluteでtop:68vh/left:100px)は狭い画面だと通常見出しと位置が
   干渉しやすいため、位置を画面幅基準に作り直している */
@media (max-width: 992px) {
  /* 動画再生開始4秒間だけヘッダーを隠す演出(.header--video-intro、
     opacity+transformのアニメーション)を無効化。このアニメーションが
     適用された要素はtransformを持つため、position:fixedのハンバーガー
     メニュー(.header__nav)にとっての基準位置がヘッダー自身にずれてしまい、
     メニューパネルが透けて見える不具合が出たため（このルールは上のヘッダー
     用メディアクエリより後、.header--video-introの元定義(810行目)より
     後ろに書く必要がある。CSSは詳細度が同じ場合ソース順序が後のものが
     勝つため、先に書くと元の定義に上書きされてしまう） */
  .header--video-intro {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .hero__content {
    padding: calc(38vh + 24px) 24px 0;
  }

  .hero__title,
  .hero__title-intro {
    font-size: 4.6rem;
  }

  .hero__title-intro {
    font-size: 5.2rem;
  }

  .hero--video-intro .hero__title-intro {
    top: auto;
    bottom: 30vh;
    left: 24px;
    right: 24px;
  }

  .hero__subtext {
    font-size: 1.6rem;
    margin-bottom: 24px;
  }

  .hero__buttons {
    flex-wrap: wrap;
    gap: 14px;
  }

  .hero__btn {
    font-size: 1.5rem;
    gap: 18px;
    height: 52px;
    padding: 0 20px 0 32px;
  }
}

@media (max-width: 768px) {
  .hero__content {
    padding: calc(34vh + 16px) 20px 0;
  }

  .hero__title,
  .hero__title-intro {
    font-size: 3.4rem;
  }

  /* 2026-09-30、久保さん指摘：折り返さない(white-space: nowrap)1行見出しは、36px固定だと
     12文字で約441pxになり、iPhone 12 mini(375px)で右が約90px切れていた。
     画面幅に合わせて縮め、左右24pxの余白の内側に必ず収まるようにする
     （1文字あたり約1.02em＝12文字で約12.25em。余裕をみて12.3で割っている）。
     480px超では36pxのまま */
  .hero__title-intro {
    font-size: 3.6rem;
    font-size: min(3.6rem, calc((100vw - 48px) / 12.3));
  }

  .hero__subtext {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   こんなことで悩んでいませんか？
   --------------------------------------------------------------------------
   採用デザイン画像「こんなの悩みありませんか？.png」(1672x941px)を
   ヒーローと同じ基準（PC 1440px相当、× 0.861244換算）で実装。
   下部の緑のCTA帯（見学・相談受付中）は別途精査のため今回は対象外。
   漫画_1（4コマ）は素材未定のためプレースホルダー表示。
   ========================================================================== */

.worries {
  position: relative; /* 背景装飾レイヤー(.worries__decor)の配置基準にするため追加 */
  padding: 90px 0;
  overflow: hidden;
  /* 【試作】背景固定演出(.parallax-bg)。2026-09-16、久保さんのアイデアで
     このセクションだけ不透明に戻し、背景をあえて隠す。
     直前の.about-altで見えていた背景が、ここで一旦消え、次の.jobs-ctaで
     再び現れる「出たり消えたりする」演出にしている
     （2026-09-17、久保さん指示で不透明色を白→薄い水色に変更） */
  /* 2026-09-18、久保さん指示で波模様の画像を追加。当初はbg-wave-nodots.jpg
     1枚をbackground-size:100% 100%で目一杯引き伸ばしていたが、セクションの
     高さがコンテンツ量で変わるたびに波の曲線が不自然に伸縮・歪んで
     見える問題があった。
     2026-09-28、久保さん指示で「波の部分だけを上下に固定で使い、真ん中は
     単色で埋める」方式に変更。元画像から波が写っている範囲だけを
     bg-wave-top.jpg（上端）／bg-wave-bottom.jpg（下端）として切り出し、
     background-size:100% autoで幅だけ合わせて高さは元の比率のまま
     表示することで、セクションの高さに関わらず波の形が歪まないように
     した。真ん中の余白は、切り出し画像の余白と同じ白で埋めている
     （丸い水玉は画像に含めず、歪まないCSSの円を別レイヤーで重ねている） */
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  isolation: isolate; /* 縁のフェードレイヤー(::before/::after)の重なりをこのセクション内で完結させる */
}

/* セクション上下の縁だけ白へフェードさせ、隣接セクションとの境目を
   滑らかにする（波背景を敷いたことで縁が地の水色のままになり、
   隣の白いセクションとの境目がくっきり見えていたための対策） */
.worries::before,
.work-style::before,
.faq::before,
.about-page__story::before,
.about-page__target::before,
.work-page__jobs::before,
.work-style-page__reasons::before,
.flow-page__ladder-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
  z-index: 1;
  pointer-events: none;
}

.worries::after,
.work-style::after,
.faq::after,
.about-page__story::after,
.about-page__target::after,
.work-page__jobs::after,
.work-style-page__reasons::after,
.flow-page__ladder-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
  z-index: 1;
  pointer-events: none;
}

/* 本文コンテンツを背景装飾レイヤーより手前に出す（.worries直下の.containerのみが対象） */
.worries > .container {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   悩みセクションの背景装飾（点々の模様＋丸模様）
   --------------------------------------------------------------------------
   参考デザイン画像にある「隅の点々模様」「柔らかい丸模様」を、文字・漫画より
   奥に薄く配置したもの。すべてCSSのグラデーションのみで作っており、
   画像ファイルは追加していない。
   ========================================================================== */
.worries__decor {
  /* 2026-09-15 一旦非表示にして検討中。元に戻す場合はこの1行を削除するだけでよい */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 初期状態は非表示＋少し縮小しておき、画面に入ったタイミングで
     js/worries-reveal.jsが.is-visibleを付けてふわっと表示させる */
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

.worries__decor.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 動きを減らす設定の人には、アニメーションさせず最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .worries__decor {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* 控えめな丸模様（味付け程度のアクセント）。ヒーロー写真にはかからないよう、
   このセクションの中だけで完結させている。3つとも大きさ・位置・濃さを
   少しずつ変えて、規則的すぎない自然な散らし方にしている */
.worries__accent-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(82, 168, 239, 0.33), rgba(82, 168, 239, 0) 70%);
}

.worries__accent-blob--1 {
  left: -70px;
  top: 150px;
  width: 240px;
  height: 240px;
}

.worries__accent-blob--2 {
  right: -50px;
  top: -20px;
  width: 190px;
  height: 190px;
  opacity: 0.8;
}

.worries__accent-blob--3 {
  left: 160px;
  bottom: 6px;
  width: 130px;
  height: 130px;
  opacity: 0.7;
}

/* ヒーロー動画→本セクションの境界が真っ白で唐突に見えるのを和らげる用。
   中心をセクション上端(境界線)に合わせて配置し、上半分はヒーロー側に
   はみ出す形になるが、.worriesのoverflow:hiddenで自動的に切れるため、
   ヒーロー動画の上には乗らず、境界からこちら側にだけ顔を出して見える */
.worries__accent-blob--edge {
  left: 58%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

/* 点々模様（ドットグリッド）。1つの背景グラデーションを碁盤目状に
   繰り返して点を並べている */
.worries__dots {
  position: absolute;
  width: 168px;
  height: 168px;
  background-image: radial-gradient(circle, rgba(0, 93, 197, 0.26) 2px, transparent 2.5px);
  background-size: 18px 18px;
}

.worries__dots--tl {
  left: 26px;
  top: 36px;
}

.worries__dots--br {
  right: 70px;
  bottom: 40px;
}

/* テキストエリア（見出し〜「一緒にカタチにします」）の高さがちょうど良く
   固まったため、そちらは変えず、漫画エリアの幅を広げてこの高さに合わせる。
   Lightningの標準コンテナ幅(1440px)の制約を外して全幅にした上で
   （ヒーローの.hero .containerと同じ考え方）、左右の余白を68px→50px、
   テキストと漫画の間のgapを40px→24pxに詰めて漫画の取り分を増やしている。
   余白は画面が1440px以下では50px、それより広い画面では余白の方を広げる
   （.worries-full-gapと同じ考え方） */
/* 2026-09-13 本文の合計幅を10%拡大（1340px→1474px）する指示を受け、
   基準幅を1440pxから1574pxに変更(1574-100=1474)。以降のテキスト幅・隙間・
   画像上限・フォントサイズも合わせて10%前後拡大している
   → その後、10%は広すぎるとのことで5%相当（1340px→1407px、基準幅1507px）に修正 */
.worries .worries__inner {
  max-width: none;
  margin: 0;
  padding-left: max(calc((100vw - 1507px) / 2 + 50px), 50px);
  padding-right: max(calc((100vw - 1507px) / 2 + 50px), 50px);
}

.worries__inner {
  display: flex;
  /* 2026-09-28、久保さん指示。枠を外した後、テキスト側が漫画側より
     短くなり高さが揃わなくなったため、flex-startからstretchに変更し、
     テキスト側も漫画側と同じ高さまで伸びるようにした */
  align-items: stretch;
  gap: 25px;
}

.worries__text {
  /* 413pxだと見出し「悩んでいませんか？」の描画幅とほぼ同じで、
     フォント環境によっては折り返される危険があったため少し広げた
     （2026-09-13 本文合計幅5%拡大に合わせて430px→452pxに拡大） */
  flex: 0 0 452px;
  /* 2026-09-17、久保さん指示で白背景・角丸のボックスに変更していたが、
     2026-09-28、久保さん指示で「about.htmlのこんな方におすすめですリスト
     （枠なし、チェックマークのみ）と同じテイストにしたい、枠は不要」との
     ことで、白背景・角丸・影の「カード」表現を撤去しセクションの背景に
     直接乗る形に戻した。
     あわせて、上のstretchで生まれた余白の中でサブ見出し＋リストが
     縦中央に来るよう、flexで中央寄せにしている */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 2026-09-15 タイトルをヒーロー直後のabout-altセクションと同じ「中央寄せの
   大見出し」スタイルに変更。以前の2カラム内タイトル（お悩みリストと横並び）
   から、セクション全幅で中央揃えの見出しに変更したため、専用の色分け
   (worries__title-blue)は不要になり削除した */
.worries__title {
  font-family: var(--font-sans);
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  text-align: center;
  margin-bottom: 20px;
}

/* タイトル下のサブ文言。左カラムにあった「一人ひとりに合わせたサポートで、
   〜」をタイトル直下に移動し、タイトルと表現が重複しないように言い換えた */
.worries__lead {
  font-family: var(--font-sans);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--color-worry-text);
  text-align: center;
  margin-bottom: 50px;
}

/* 2026-09-15 左カラム（悩みリストの上）に、元あった「こんなお悩みありませんか？」を
   小見出しとして復活。以前は3.8rem+強制改行(<br>)の2行見出しだったが、
   今回はこのカラム幅(452px)に1行で収まるサイズまで縮小している */
.worries__subtitle {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-worry-title);
  white-space: nowrap;
  margin-bottom: 20px;
}

.worries__subtitle-accent {
  font-size: 1.3em;
}

.worries__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 2026-09-28、久保さん指示でabout.htmlの「こんな方におすすめです」リストと
   テイストを揃えるため、文字色を汎用の黒(--color-worry-text)から
   同リストと同じ--color-navyに変更した */
.worries__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--color-navy);
}

.worries__check {
  /* 漫画エリアと高さを揃えるため40px→32pxに縮小
     （2026-09-13 本文合計幅5%拡大に合わせて32px→34pxに拡大） */
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-worry-check-bg);
  position: relative;
}

.worries__check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 13px;
  height: 7px;
  border-left: 2.5px solid var(--color-worry-blue);
  border-bottom: 2.5px solid var(--color-worry-blue);
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 漫画_1（不安→Work Link発見→見学へ）は素材未定のため、今は1枠のみの仮置き */
.worries__manga {
  flex: 1;
  /* 全幅化した.worries__innerの中で際限なく広がらないよう上限を設定。
     テキストエリアの高さ(約471px)に合わせるには幅約887px必要なため
     900px→960pxに緩めた
     （2026-09-13 本文合計幅5%拡大に合わせて960px→1008pxに拡大） */
  max-width: 1008px;
}

/* 2026-09-20：合成1枚絵から、コマ単位の個別画像4枚に変更。
   配置は旧・合成画像と同じ「上段3コマ＋下段1コマ（横長）」。
   外枠の白フチ・角丸・影はグリッド全体にまとめて掛け、
   コマ同士の間は白い溝(gap)で仕切って、実際の漫画のコマ割りに近づけている。
   （2026-09-20 修正：上段3コマを正方形の枠に無理やり揃えると、画像ごとに
   縦長・横長がバラバラなため、実際に描かれる絵の高さが枚ごとに大きく
   異なって見えてしまった。そこで「段組み（雑誌のレイアウトと同じ、
   3枚の高さを完全に揃え、幅は各画像の本来の縦横比なりに可変させる）」
   方式に変更。クロップなし・余白なしで、かつ3枚の高さが必ず揃う） */
.worries__manga-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.worries__manga-row {
  display: flex;
  gap: 6px;
}

.worries__manga-frame {
  display: block;
  min-width: 0;
  height: auto;
  object-fit: cover;
  /* js/worries-manga-reveal.jsが.worries__manga-gridに.is-visibleを付けるまで
     非表示にしておき、1→4の順に間を置いてフワッと表示する */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 上段3コマ：flex-growの値を「幅÷高さ（縦横比）」の数値にすると、
   幅がその比率どおりに配分され、結果として3枚の高さがぴったり揃う
   （flex-basis:0で幅を比率配分→aspect-ratioでその幅から高さが決まる、
   という2段階の計算により、全列が同じ高さに収束する。
   ※ flex-growに実寸の横幅の値(1122等)をそのまま使うのは誤り。
   縦横比(幅÷高さ)を使わないと高さが揃わない） */
.worries__manga-frame--1 {
  flex: 0.8003 0 0%; /* 実寸1122×1402（縦長）＝1122÷1402 */
  aspect-ratio: 1122 / 1402;
}

.worries__manga-frame--2 {
  flex: 1.2495 0 0%; /* 実寸1402×1122（横長）＝1402÷1122 */
  aspect-ratio: 1402 / 1122;
}

.worries__manga-frame--3 {
  flex: 1.3333 0 0%; /* 実寸1448×1086（横長）＝1448÷1086 */
  aspect-ratio: 1448 / 1086;
}

.worries__manga-frame--4 {
  width: 100%;
  /* 2026-09-20：チャッピーに角丸の枠で作り直してもらった版に差し替え。
     この版は左右の余白はほぼ無かったが、上下には無地の余白が残っていたため
     上下だけトリミングした別ファイル（manga-1-frame-4-trimmed.png、
     2172×521）を用意して差し替えた */
  aspect-ratio: 2172 / 521;
}

.worries__manga-grid.is-visible .worries__manga-frame--1 {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.worries__manga-grid.is-visible .worries__manga-frame--2 {
  opacity: 1;
  transform: none;
  transition-delay: 0.35s;
}

.worries__manga-grid.is-visible .worries__manga-frame--3 {
  opacity: 1;
  transform: none;
  transition-delay: 0.6s;
}

.worries__manga-grid.is-visible .worries__manga-frame--4 {
  opacity: 1;
  transform: none;
  transition-delay: 0.85s;
}

/* 動きを減らす設定の人には、アニメーションさせず最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .worries__manga-frame {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* 2026-09-30、久保さん指摘対応。スマホ幅（600px以下）では1〜3コマ目を
   横並びのまま幅を分け合わせると文字が判読できないほど小さくなっていた。
   実際に試したところ、画像はそのままでも「1列に積んで幅いっぱいに表示」
   するだけで十分読めることを確認できたため、CSSの変更のみで対応
   （タブレット以上は元の横並びのまま、このブレークポイントの対象外）。
   4コマ目だけはスマホ幅いっぱいでも文字が厳しかったため、会話部分だけの
   縦長カットを新規に用意し、HTML側の<picture>で差し替えている
   （このCSSはその新しい画像の比率に合わせたもの） */
@media (max-width: 600px) {
  .worries__manga-row {
    flex-direction: column;
  }

  .worries__manga-frame--1,
  .worries__manga-frame--2,
  .worries__manga-frame--3 {
    flex: none;
    width: 100%;
  }

  .worries__manga-frame--4 {
    aspect-ratio: 1122 / 1402;
  }
}

/* CTA（見学・相談受付中！）。デザイン画像は左に男性イラストがあったが
   今回は使わず、その分テキストとボタンを大きめにして空きをカバーしている。
   囲みの角丸はデザイン画像のピル形状（左右完全な半円）ほど丸くせず、
   24px程度の控えめな角丸にした。

   ▼ 2026-09-07 オーナー確認を受けた調整
   1. 以前は背景が「緑→白」のグラデーションで、右端が真っ白になり
      ボタン周辺が背景に溶けて見えづらかった。→ 左右とも緑を保つ
      グラデーション（淡い緑→少し濃い緑）に変更し、右端まで色が残るようにした。
   2. 見出しを 2.8rem → 3.4rem に拡大。
   3. ボタンを 高さ68px/文字1.8rem → 高さ76px/文字2.0rem に拡大し、
      幅も右半分いっぱい（最大480px）まで広げた。
   4. 左のテキストと右のボタンの配分を、flexの space-between（左に寄って
      中央が大きく空く）から grid の 1fr 1fr（左右きっちり5:5）に変更。
   5. 要素を大きくした分、上下パディングを 36px → 26px、左右を 56px → 44px に
      詰め、見出しの行間も詰めて、帯全体の高さは以前（157px）より小さく収めた。 */
/* 2026-09-16、久保さん指示で「見学・相談受付中！」の帯を、横並び(左に
   文言・右にボタン、水色背景+枠)からシンプルな縦並び(文言→ボタン、
   背景・枠なし)に変更。サイズも全体的に2段階ほど小さくした。
   横並び版は下にコメントで残す（元に戻す場合はこのブロックを削除し、
   コメントを外せばよい） */
.worries__cta {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 26px 44px;
  background: none;
  border-radius: 24px;
  box-shadow: none;
}

.worries__cta-text {
  text-align: center;
}

.worries__cta-title {
  font-family: var(--font-sans);
  font-size: 2.8rem; /* 元は3.8rem→2.4rem */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  /* 2026-09-16、久保さん指示の変遷：青(#005dc5)→少し薄い青(#2f7cd6)→
     「黒系に」。このセクションの見出し(.worries__title)と同じ
     --color-worry-title（一般的なWeb黒）に統一した */
  color: var(--color-worry-title);
  margin-bottom: 6px;
}

.worries__cta-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 1.5rem; /* 元は1.8rem→1.3rem */
  font-weight: 500;
  line-height: 1.6;
  /* 2026-09-16、久保さん指示の変遷：青(#004a9e)→少し薄い青(#3c72b8)→
     「黒系に」。このセクションの本文と同じ--color-worry-textに統一した */
  color: var(--color-worry-text);
}

.worries__cta-sub-line {
  width: 32px;
  height: 1px;
  background: var(--color-worry-text); /* 上のcta-subと同じ黒系に統一 */
}

/* 2026-09-16、久保さん指示で「仕事内容をもっと見る」と同じさりげない
   デザイン(.link-arrow、白背景＋グレー枠線)に変更したため、塗りつぶし
   ボタンの専用スタイルは不要（.worries__cta-btn/-text/-arrowクラスは
   要素の識別用に残しているのみ） */

/* 【試作】手書き風キャッチコピー画像（2026-09-17、久保さん提供素材）。
   about-altの手書き文字と同じ方向性で、漫画の右下に配置。
   漫画の影(box-shadow: 0 20px 36px)の終わり(約56px下)から少し離す */
/* 2026-09-30、久保さん指示で非表示化。削除はせず様子見 */
.worries__caption {
  display: none;
  position: absolute;
  right: 60px;
  top: 764px;
  width: 260px;
  z-index: 1; /* 波背景・水玉(z-index:0)より手前に出す */
  pointer-events: none;
}

/* タブレット・スマホ幅。左右パディングを縮小し、テキスト(452px固定幅)と
   漫画(横並び)を縦積みに畳む。手書き風キャッチコピー画像(.worries__caption)
   はtop:764pxのような絶対値の位置決めがPC専用のため非表示にする
   （漫画の下にキャッチコピーが無くても文意は変わらないため） */
@media (max-width: 992px) {
  .worries {
    padding: 60px 0;
  }

  .worries .worries__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .worries__inner {
    flex-direction: column;
    gap: 32px;
  }

  .worries__title {
    font-size: 2.6rem;
  }

  .worries__lead {
    font-size: 1.5rem;
    margin-bottom: 32px;
  }

  .worries__text {
    flex: none;
    width: 100%;
  }

  .worries__subtitle {
    font-size: 1.9rem;
    white-space: normal;
  }

  .worries__list li {
    font-size: 1.5rem;
  }

  .worries__manga {
    max-width: none;
    width: 100%;
  }

  .worries__caption {
    display: none;
  }

  .worries__cta-title {
    font-size: 2.2rem;
  }

  .worries__cta-sub {
    font-size: 1.3rem;
  }

  /* 左右の飾り線があると、狭い画面では本文の折り返し位置が不自然になる
     （線の分だけテキストの使える幅が減るため）。線だけ非表示にする */
  .worries__cta-sub-line {
    display: none;
  }

  /* padding(左右44px)がボタンの使える幅を大きく圧迫し、「まずは見学・
     相談してみる」が3行に折り返される原因になっていたため縮小。
     また.worries__cta自体がflexのshrink-to-fitで「見学・相談受付中！」
     見出しの幅に合わせて縮んでしまい、ボタンの折り返し幅をさらに
     狭めていたため、width:100%で親いっぱいに広げる */
  .worries__cta {
    width: 100%;
    padding: 0 16px;
  }
}

/* ==========================================================================
   Work Linkってどんなところ？
   --------------------------------------------------------------------------
   https://san-kyu.jp/ トップページのRECRUITセクションの構造・配色・
   スクロールアニメーションを参考に実装。
   （2026-09-13 三九スタイル案と、従来の4枚コラージュ案を比較した結果、
   三九スタイルを正式採用。旧デザインのCSSは削除した）
   ・配色：三九のピンク→このサイトの緑（--color-about-brand）
   ・背景：三九の「上が薄いグレー・下が白」のツートンを再現
   ・写真：三九の「奥に大きい写真＋手前に重なる写真」の構図を再現
   ・全幅化：三九は写真エリアが画面の右端まで伸びているため、このセクション
     だけ.container(1440px中央寄せ)を使わず、お悩みセクションと同じ
     「左は他セクションと同じ余白、右は余白ゼロで画面端まで」という
     全幅レイアウトにしている
   ・動き：手前の写真だけ右からフワッと(fadeInRight)スクロール表示
     （奥の写真とテキストは動きをつけていない）
   ========================================================================== */
.about {
  /* 2026-09-15 ヒーロー直後に置いた中央寄せ版(.about-alt)と内容が重複する
     ため非表示。元に戻す場合はこの1行を削除するだけでよい */
  display: none;
  position: relative;
  /* 三九は写真の色が上を薄いグレーっぽく見せているだけで実際はグレーの
     指定は無かったが、依頼の「グレーと白のツートン」をそのまま再現する
     ため、はっきりした2色の帯として実装している */
  background: linear-gradient(
    to bottom,
    #f2f2f2 0%,
    #f2f2f2 43%,
    #ffffff 43%,
    #ffffff 100%
  );
  padding: 100px 0;
  overflow: hidden;
}

/* 手前：写真。奥の写真の左下に重ねて、白フチと影で浮かせる。
   この写真だけ右からフワッと(fadeInRight)スクロール表示する */
.about__media-front {
  position: absolute;
  left: 0;
  bottom: 6%;
  width: 46%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 12px;
  border: 6px solid var(--color-white);
  box-shadow: 0 20px 36px rgba(10, 36, 85, 0.2);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.about.is-visible .about__media-front {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

/* 動きを減らす設定の人には、アニメーションさせず最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .about__media-front {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   【試作】背景固定（パララックス）演出
   --------------------------------------------------------------------------
   画面全体を覆うposition:fixedの層をz-index:-1で最背面に置き、スクロールしても
   その場に留まって見えるようにしている。
   2026-09-16、久保さんのアイデアで「出たり消えたりする」演出を試したが、
   2026-09-17までに.about-alt／.jobs-badge／.flowを順に不透明へ戻したため、
   現時点でこの背景を透過させて見せているセクションはない（要素自体は
   将来また使う可能性を考えて残している） */
.parallax-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("assets/images/bg-parallax-skyline.png") center / cover no-repeat;
}

/* ==========================================================================
   さりげないCTAリンク（白背景＋グレー枠線の控えめなボタン）
   --------------------------------------------------------------------------
   「仕事内容をもっと見る」(.jobs-badge__more)と同じ見た目。色を塗った
   目立つボタン（.hero__btn等）にはせず、白背景＋細い枠線＋矢印だけの
   控えめな構成にする。about-alt・worriesセクションのCTAで共通利用する
   （2026-09-16、久保さん指示）。
   ========================================================================== */
.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid #d8dce0;
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-navy);
}

.link-arrow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
}

/* タブレット・スマホ幅。about-alt__link・worries__cta-btn・jobs-badge__more
   など複数セクションで共通利用しているボタン部品。「まずは見学・相談して
   みる」のような長い文言でも2行に収まる程度に、少しだけ詰める */
@media (max-width: 992px) {
  .link-arrow {
    height: 52px;
    padding: 0 24px;
    font-size: 1.4rem;
  }

  /* 「まずは見学・相談してみる」は上の共通調整(1.4rem)でもまだ3行に
     折り返されるため、このボタンだけさらに詰める。このルールは
     .link-arrow本体より後ろに書く必要がある（詳細度が同じ(0,1,0)の場合、
     ソース順序が後のものが勝つため。先に書くと.link-arrow側の値に
     上書きされてしまう） */
  .worries__cta-btn {
    font-size: 1.25rem;
    padding: 0 20px;
  }
}

/* ==========================================================================
   【試作】Work Linkってどんなところ？ 中央寄せ版
   --------------------------------------------------------------------------
   左右カラム(.about)ではなく、タイトルを中央に配置し他の文言も縦に並べる
   試作版。比較検討用に.aboutセクションの下へ仮追加。画像は一旦なし。
   ========================================================================== */
.about-alt {
  position: relative;
  /* 下部の余白を大胆に広く取り、次のセクションとの間にゆとりを持たせている
     （2026-09-15 240px→180px→90pxに縮小） */
  padding: 100px 0 90px;
  /* 2026-09-17、久保さん指示でこのセクションのみパララックス演出(奥の
     .parallax-bgが透ける半透明背景)をやめ、不透明な白に戻した */
  background: var(--color-white);
  overflow: hidden;
}

.about-alt__inner {
  position: relative;
  z-index: 1;
  /* タイトルを1行(改行なし)で収めるため、他の文言より広めの幅を確保
     （760pxだとタイトルがはみ出し、text-align:centerが効かず右に
     寄って見えてしまうため） */
  max-width: 1080px;
  text-align: center;
}

/* 参考サイト風の丸抜き画像。右を大きく上寄りに、左を小さく下寄りに
   配置し、対角線上にバランスを取っている */
.about-alt__media {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--color-white);
  box-shadow: 0 20px 36px rgba(10, 36, 85, 0.15);
  /* 2026-09-17、久保さん指示でwearebuddies.net(https://wearebuddies.net/)の
     写真演出を再現。白い縁取り・影ごと少し拡大(108%)＋透明にしておき、
     js/about-alt-reveal.jsが画面に入ったタイミングで.is-visibleを
     親セクションに付け、元のサイズに戻りながらフワッと浮かび上がらせる */
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s cubic-bezier(0.53, -0.01, 0.39, 1),
              transform 1s cubic-bezier(0.53, -0.01, 0.39, 1);
}

.about-alt__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-alt.is-visible .about-alt__media--right {
  opacity: 1;
  transform: scale(1);
}

.about-alt.is-visible .about-alt__media--left {
  opacity: 1;
  transform: scale(1);
  /* 2つの画像が同時に動くと単調なため、左下の画像は少し遅らせて開始
     （2026-09-17、久保さん指示で0.15s→0.4sにさらに遅く） */
  transition-delay: 0.4s;
}

.about-alt__media--right {
  /* ヒーローセクションと繋がって見えないよう、上端で切れない位置まで
     斜め左下にずらしている。本文の行間を広げた分、テキストブロックが
     縦に伸びたのに合わせて少し下げてバランスを取っている。
     2026-09-15 両方の画像をふた回りほど拡大（320px→420px） */
  top: 95px;
  /* 2026-09-17、久保さん指示で外側に寄りすぎていたため少し内側に
     2026-09-25、さらに内側へ寄せたい指示を受け50px→90px */
  right: 90px;
  width: 420px;
  height: 420px;
}

/* 【試作】「Work Linkでの働き方」→「ご利用までの流れ」の境目に配置する
   丸い写真装飾。.about-alt__mediaと同じ見た目（白枠8px＋影）を再現。
   ラッパー自体は高さ0で場所を取らず、中のimgだけ上下にはみ出す形で
   境目をまたぐ。.flow-timelineのoverflow:hiddenの影響も受けない
   （子要素ではないため）。2026-09-22、久保さん指示で「働きたい気持ち」
   →「どんな仕事ができる？」の境目から移設。位置(left:60px)はそのまま、
   画像だけ35101924_m.jpgに差し替えている */
.section-divider-media {
  /* 2026-09-16、「他のコンテンツが小さくなった気がする」の原因調査のため
     一旦非表示にしたが、原因はブラウザの表示倍率(80%)だったと判明。
     このセクション自体は無関係だったため表示に戻した */
  position: relative;
  height: 0;
}

.section-divider-media img {
  position: absolute;
  left: 60px;
  top: -150px; /* 2026-09-16、久保さん指示でサイズ拡大(240px→300px)に伴い、
                  境目に中心が来るよう半径分(150px)に合わせて調整 */
  width: 300px;
  height: 300px;
  z-index: 5; /* 前後のセクション（.work-style・.flow-timelineの背景など）より手前に出す */
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  border: 8px solid var(--color-white);
  box-shadow: 0 20px 36px rgba(10, 36, 85, 0.15);
}

.about-alt__media--left {
  /* 右上の画像とのバランスを見て、ひとまわり大きく・やや右斜め上に移動。
     セクション下部の余白を広げた際、画像だけが次のセクションと近く
     見えてしまっていたため、画像自体も上に上げて余白を作っている。
     2026-09-15 両方の画像をふた回りほど拡大（250px→330px） */
  left: 160px; /* 2026-09-17、久保さん指示で外側に寄りすぎていたため少し内側に(元は80px)
                  2026-09-25、さらに内側へ寄せたい指示を受け120px→160px */
  bottom: 110px; /* 2026-09-16、久保さん指示で少しだけ下げた(元は140px) */
  width: 330px;
  height: 330px;
}

/* 【試作】手書き風キャッチコピー画像（2026-09-17、久保さん提供素材）。
   透過PNGなので背景色を問わずそのまま重ねられる。位置は丸写真に
   寄り添う形で仮配置し、実際の見た目を見ながら調整する想定 */
.about-alt__caption {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  /* 2026-09-17、久保さん指示で丸写真(.about-alt__media)と同じ
     フワッと浮かび上がるエフェクトを追加 */
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s cubic-bezier(0.53, -0.01, 0.39, 1),
              transform 1s cubic-bezier(0.53, -0.01, 0.39, 1);
}

.about-alt.is-visible .about-alt__caption--right {
  opacity: 1;
  transform: scale(1);
}

.about-alt.is-visible .about-alt__caption--left {
  opacity: 1;
  transform: scale(1);
  /* 同じ左側の丸写真と動きを揃える */
  transition-delay: 0.4s;
}

.about-alt__caption--left {
  left: 80px; /* 2026-09-17、久保さん指示で丸写真と一緒に少し内側に(元は0)
                 2026-09-25、丸写真と一緒にさらに内側へ(40px→80px) */
  bottom: 20px;
  width: 280px;
}

.about-alt__caption--right {
  top: 500px;
  right: 80px; /* 2026-09-17、久保さん指示で丸写真と一緒に少し内側に(元は0)
                  2026-09-25、丸写真と一緒にさらに内側へ(40px→80px) */
  width: 220px;
}

.about-alt__title {
  font-family: var(--font-sans);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin-bottom: 26px;
}

/* タイトル1行目の「Work Link」をロゴ画像に差し替え。文字の高さに
   合わせてサイズ・位置を調整している */
.about-alt__title-logo {
  display: inline-block; /* グローバルのimg{display:block}を打ち消し、テキストと同じ行に並べる */
  height: 46px;
  width: auto; /* 画像にwidth属性が自動で付く(inc/img-size.php)ので、高さだけ固定のこの画像は幅を自動に戻す */
  /* ロゴ文字の下辺が「は」の下辺と揃うように実測して調整している
     （2026-10-05：1px→-2px。久保さん確認で-2pxに決定。タブレット・スマホ幅も同じ-2px）*/
  vertical-align: -2px;
  margin-right: 2px;
}

.about-alt__lead {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: #333333;
  /* タイトル／リード文／本文の3グループがはっきり分かるよう、
     リード文の上下の余白を広めに取っている
     （2026-09-17、久保さん指示で84px/92px→50px/50pxに詰めた） */
  margin-top: 50px;
  margin-bottom: 50px;
}

.about-alt__body {
  font-family: var(--font-sans);
  font-size: 1.9rem;
  font-weight: 500;
  /* 参考サイト(ing-osaka)ほど極端ではない程度に行間を広げている
     （2026-09-17、久保さん指示で2.9→2.4に少し詰めた） */
  line-height: 2.4;
  color: #333333;
  margin-bottom: 40px;
}

/* 2026-09-17、久保さん指示でこの「詳しく見る」ボタンだけ左右の余白を広げて
   横に少し長くし、ボーダーを青系に変更（他の.link-arrowボタン
   ＜見学・相談してみる／働き方をもっと見る等＞には影響させない） */
.about-alt__link {
  padding: 0 48px;
  border-color: var(--color-worry-blue);
  /* 2026-09-25、久保さん指示でボタンをもう少し下げたい */
  margin-top: 24px;
}

/* ==========================================================================
   【試作】セクション境目の緩やかな弧（wave divider）
   --------------------------------------------------------------------------
   2026-09-16、久保さんの指示で.worries(「働きたい気持ち」)の上下の境目を
   直線ではなく緩やかな1つの弧にする試作。参考サイト「ヤマト」の波型カーブは
   識別性が高いため不採用と決定済み（spec.md参照）。それとは異なる意匠として
   「連続する波」ではなく「1つの大きな弧」のみを使っている。
   どちらも.about-alt／.worries自身のpadding（上下90px）の中に収まる高さ
   （80px）にしているため、本文・ボタン・CTAとは重ならない。
   ========================================================================== */

/* 上側の境目（.about-alt→.worries）。.about-altの下端に配置し、
   白い弧が下からせり上がるように見せる。弧の外側は.about-altの
   透けた背景がそのまま続くため、色の食い違いが起きない */
.about-alt__wave {
  /* 2026-09-16、久保さん指示で「働きたい気持ち」セクション上下の湾曲を
     一旦やめる。要素・仕組みは残したまま非表示にしているだけなので、
     この1行を消せばすぐ復活できる */
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.about-alt__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* タブレット・スマホ幅。丸写真2枚・手書きキャプション2枚はいずれも
   PC専用のpx固定値によるposition:absolute配置で、狭い画面では本文
   （中央寄せのタイトル・リード文・本文）と重なってしまうため非表示にする。
   本文のフォントサイズ・余白は画面幅に合わせて縮小する */
@media (max-width: 992px) {
  .about-alt {
    padding: 60px 0;
  }

  .about-alt__inner {
    max-width: none;
    padding: 0 24px;
  }

  .about-alt__title {
    font-size: 2.3rem;
  }

  .about-alt__title-logo {
    height: 30px;
    vertical-align: -2px;
  }

  .about-alt__lead {
    font-size: 1.7rem;
    margin-top: 28px;
    margin-bottom: 28px;
  }

  .about-alt__body {
    font-size: 1.5rem;
    line-height: 2;
  }

  .about-alt__media,
  .about-alt__caption,
  .section-divider-media {
    display: none;
  }
}

.jobs__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 3.8rem; /* worries__title・about__titleと同じサイズに統一 */
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
  margin-bottom: 48px;
}

.jobs-badge__inner {
  /* 2026-09-16、久保さん指示でカード幅を広げるため、ライトニングの
     標準コンテナ幅の制約を超えて全幅扱いに変更。
     元は max-width:1440px + padding:50px で、画面が1440pxを超えると
     自動センタリングの外側余白が追加される仕組みだった（例:1920px幅なら
     外側240px+内側50px=実質290pxの余白）。単純にpaddingだけ半分にすると
     この外側余白が消えて余白が9割近く削れてしまうため、画面幅に応じた
     計算式にして「どの画面幅でも合計の余白がちょうど半分」になるよう調整 */
  padding-left: max(calc((100vw - 1440px) / 4 + 25px), 25px);
  padding-right: max(calc((100vw - 1440px) / 4 + 25px), 25px);
}

.jobs-badge__heading {
  font-family: var(--font-sans);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 40px;
  /* 2026-09-16、久保さん指示でセンター寄せに変更。境目の丸い写真
     （左寄り配置）と重なっていた問題もこれで解消される */
  text-align: center;
}

/* 「仕事内容」ページへのリンク。目立たせすぎないよう、塗りつぶしではなく
   縁取りのみのシンプルなボタンにしている（.jobs__moreと同じ考え方。
   2026-09-16、久保さん指示） */
.jobs-badge__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 48px auto 0;
  height: 56px;
  padding: 0 32px;
  border: 1px solid #d8dce0;
  border-radius: 999px;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-navy);
}

.jobs-badge__more-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
}

/* タブレット・スマホ幅。6列グリッド(1段目3枚span2/2段目2枚span3)を1列に
   畳み、カード内は縦積みに変える。写真(.jobs-badge__media)は右58%を
   absoluteで占める配置をやめ、カード下部に通常のブロックとして表示する
   （position:staticに戻すことで、HTML上の並び順(タグ→タイトル→写真→
   本文)がそのまま縦積みの表示順になる） */
@media (max-width: 992px) {

  .jobs-badge__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .jobs-badge__heading {
    font-size: 2.4rem;
    margin-bottom: 28px;
  }
}

/* ==========================================================================
   どんな仕事ができる？ 丸抜き写真版（正式採用）
   --------------------------------------------------------------------------
   久保さん共有のチャッピー参考画像（円形写真＋左上に重なるアイコンバッジで
   6職種を2段3列に並べる構成）を再現。背景の波・点々などの装飾までは真似ず、
   カードの中身だけを取り入れている。アイコン・配色は既存5職種分を流用し、
   6つ目の「その他」用に--color-job-roseと新規アイコンを追加した。
   2026-09-28、非採用のまま残っていた旧版(.jobs／.jobs-cta／.jobs-badge／
   .jobs-alt)のHTML・CSSを削除して整理。.jobs-badge__inner・__heading・
   __more・__more-arrowは、このセクションが今も流用しているため残している
   ========================================================================== */
.jobs-circle {
  padding: 80px 0 100px;
  /* 2026-09-24、久保さん指示で背景を白に変更（元は#f6f7f8） */
  background: var(--color-white);
}

/* 2026-09-25、久保さん指示で参考画像にあった見出し下のリード文を追加。
   .jobs-badge__heading自体は.jobs-badgeと共有のクラスなので、ここでは
   .jobs-circle内だけmargin-bottomを詰め、リード文側で元の余白量を確保する */
.jobs-circle .jobs-badge__heading {
  margin-bottom: 16px;
}

.jobs-circle__lead {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--color-job-text);
  text-align: center;
  margin-bottom: 40px;
}

.jobs-circle__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 30px;
  row-gap: 60px;
  margin-top: 10px;
}

/* 2026-09-24、久保さん指示で1列目・3列目のカードを内側へ少し寄せる
   （丸写真を大きくした分、両端が画面幅いっぱいに張り付いて見えるのを防ぐ）
   2026-09-25、さらに内側へ寄せたい指示を受け24px→48px→72px→96pxに拡大 */
.jobs-circle__grid .jobs-circle__card:nth-child(3n+1) {
  margin-left: 96px;
}

.jobs-circle__grid .jobs-circle__card:nth-child(3n) {
  margin-right: 96px;
}

.jobs-circle__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.jobs-circle__media {
  /* overflow:visibleにして、円の外にはみ出すアイコンバッジ(.jobs-circle__icon)を
     切り取らない。円形クロップ自体は内側の.jobs-circle__photoが担当する。
     2026-09-24、久保さん指示で写真を拡大（220px→260px）
     2026-09-25、さらに拡大の指示で260px→300px→320px
     2026-09-29、久保さん指摘でレスポンシブ時（992px以下）のみ260pxに縮小
     （PC幅は320pxのまま。下のmax-width:992pxブロック参照） */
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
}

.jobs-circle__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #eef0f2;
  box-sizing: border-box;
  /* 2026-09-24、久保さん指示でチャッピー参考画像と同じ「白い縁取り＋影」を追加 */
  border: 6px solid var(--color-white);
  box-shadow: 0 18px 32px rgba(10, 36, 85, 0.18);
}

.jobs-circle__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2026-09-24、久保さん指摘を受けてチャッピー参考画像を再実測。
   1回目はPC作業カードの淡い縁を見誤り、アイコンを円の外に離しすぎた。
   縁がはっきり見えるEC・ネットショップ関連カード（カート柄の箱・ノートPC画面など
   輪郭の濃い要素が多い）で測り直したところ、アイコンの中心は円の外周線上
   （左上45度付近）にほぼ乗り、直径は円の約28.6%と判明。
   アイコンの外接枠(top/left)は円の外接枠とほぼ一致する（右へ+2.1%、上へ-1.1%）。
   参考カードで実測した比率をそのまま反映している
   2026-09-25、丸写真拡大（260px→320px）に合わせ、同じ比率でアイコンも拡大 */
.jobs-circle__icon {
  position: absolute;
  top: -4px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 91px;
  height: 91px;
  border-radius: 50%;
  color: var(--color-white);
  box-shadow: 0 8px 16px rgba(10, 36, 85, 0.22);
}

.jobs-circle__icon svg {
  width: 44px;
  height: 44px;
}

.jobs-circle__icon--blue   { background: var(--color-job-blue); }
.jobs-circle__icon--purple { background: var(--color-job-purple); }
.jobs-circle__icon--green  { background: var(--color-job-green); }
.jobs-circle__icon--orange { background: var(--color-job-orange); }
.jobs-circle__icon--cyan   { background: var(--color-job-cyan); }
.jobs-circle__icon--rose   { background: var(--color-job-rose); }

.jobs-circle__title {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 10px;
}

.jobs-circle__text {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-job-text);
}

@media (max-width: 992px) {
  .jobs-circle {
    padding: 60px 0 70px;
  }

  .jobs-circle__lead {
    font-size: 1.4rem;
    margin-bottom: 28px;
  }

  .jobs-circle__media {
    max-width: 260px;
  }

  .jobs-circle__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  /* 1列目・3列目の内寄せは3列グリッド前提のため、2列・1列になる
     タブレット・スマホ幅では解除する */
  .jobs-circle__grid .jobs-circle__card:nth-child(3n+1),
  .jobs-circle__grid .jobs-circle__card:nth-child(3n) {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  .jobs-circle__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}

/* ==========================================================================
   Work Linkでの働き方
   --------------------------------------------------------------------------
   左40%：1日の流れ（タイムライン）／右60%：写真コラージュの2カラム。
   参考デザイン画像（働き方セクション.jpg）の配置はそのまま真似ず、
   写真3枚を少し角度をつけて重ねるレイアウトにアレンジしている。
   写真は素材未定のためプレースホルダー表示。
   ========================================================================== */
.work-style {
  position: relative; /* .work-style__media（右上の丸い写真）の配置基準 */
  padding: 100px 0;
  /* 2026-09-16、about-altと同じ透け感(白72%)→「真っ白・透過無しで」の
     指示で不透明な白に戻した */
  /* background: rgba(255, 255, 255, 0.72); */
  /* 2026-09-17、久保さん提供の参考画像(働き方2.jpg)に合わせ、
     .worriesと同じ薄い水色に変更 */
  /* 2026-09-18、久保さん指示で.worriesと同じ波模様の画像を追加。
     2026-09-28、久保さん指示で.worriesと同じく「上下だけ波、真ん中は
     単色」方式に変更（詳細は.worriesのコメント参照） */
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  isolation: isolate;
}

/* 【試作】セクション右上の丸い写真装飾。他の丸写真（.about-alt__media等）
   と同じ見た目（白枠8px＋影）で、前のセクション(.jobs-badge)に少し
   かぶる位置（負のtop）に配置している（2026-09-16、久保さん指示） */
.work-style__media {
  position: absolute;
  right: 60px;
  /* 2026-09-16、久保さん指示で一回り小さく(420px→340px→280px)＆カード
     (.jobs-badge)と重ならない位置に調整。実測でカード下端とこのセクション
     の間には100pxの余白があったため、その中に収まる-70pxにした。
     さらに下の写真帯(.work-style__filmstrip)と近すぎるとの指示で
     -70px→-110pxに上げた */
  top: -110px;
  /* 2026-09-25、久保さん指示で15%縮小（280px→238px） */
  width: 238px;
  height: 238px;
  z-index: 2;
}

.work-style__media img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  border: 8px solid var(--color-white);
  box-shadow: 0 20px 36px rgba(10, 36, 85, 0.15);
}

.work-style__inner {
  position: relative; /* 波背景・水玉(z-index:0)より手前に文字を出すため */
  z-index: 1;
  padding-left: max(calc((100vw - 1507px) / 2 + 50px), 50px);
  padding-right: max(calc((100vw - 1507px) / 2 + 50px), 50px);
}

.work-style__grid {
  display: grid;
  /* 2026-09-16、久保さん指示でテキストと画像の間の余白が広すぎたため、
     左カラムを絞って画像側を横長にした(元は4fr 6fr＝40:60)。テキストは
     左詰めのままなので、この変更でテキスト自体の位置は動かない */
  grid-template-columns: 3fr 7fr;
  gap: 32px;
  align-items: center;
}

.work-style__more {
  text-align: center;
  margin-top: 48px;
}

.work-style__timeline {
  list-style: none;
}

.work-style__timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px 28px 1fr;
  /* 2026-09-16、久保さん指示で右の写真帯と高さのバランスを取るため
     詰めた(元は34px) */
  padding-bottom: 10px;
}

.work-style__timeline-item:last-child {
  padding-bottom: 0;
}

/* ドット同士をつなぐ縦線。最後の項目には伸ばさない */
.work-style__timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 91px;
  top: 30px;
  bottom: -4px;
  width: 2px;
  background: #bce0f9;
}

.work-style__timeline-time {
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-navy);
  padding-top: 2px;
}

.work-style__timeline-dot {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.work-style__timeline-dot::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-worry-blue);
  box-shadow: 0 0 0 4px var(--color-worry-check-bg);
}

.work-style__timeline-title {
  font-family: var(--font-sans);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 4px; /* 2026-09-16、高さ調整のため詰めた(元は6px) */
}

.work-style__timeline-text {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-job-text);
}

/* 【試作】写真コラージュ版（2026-09-17、久保さん提供の参考画像を元に実装）。
   3枚の写真を少し重ね・傾けて配置し、白枠＋影(他の丸写真と同じ見た目)を
   付けている。手書き風の一言メッセージは画像素材が揃い次第、
   .work-style__collage-captionとして追加する想定 */
.work-style__collage {
  position: relative;
  /* 2026-09-30、久保さん指示で写真3枚を拡大（高さ460px→500px）。その後「ちょっと大きい」との
     指摘で、元と拡大後の中間（約1.09倍、高さ480px）に調整 */
  /* 縦横比は1440px幅時の枠（905×480）に固定。狭い画面では枠ごと縮む */
  height: auto;
  aspect-ratio: 905 / 480;
  max-height: 480px;
  /* 狭い画面（993〜1440px）で右端の写真がはみ出さないよう、右カラムの幅を
     基準に縮める（cqw＝このコラージュ枠の幅の1%）。1440px以上では
     min()により従来どおりのpx値のまま */
  container-type: inline-size;
}

.work-style__collage-photo {
  position: absolute;
  border-radius: 20px;
  overflow: hidden;
  border: 8px solid var(--color-white);
  box-shadow: 0 20px 36px rgba(10, 36, 85, 0.15);
}

.work-style__collage-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 2026-09-17、久保さん提供の参考画像(働き方2.jpg)の実測比率に合わせて
   位置・サイズを再調整 */
.work-style__collage-photo--1 {
  top: min(84px, 9.28cqw);
  left: min(38px, 4.2cqw);
  width: min(381px, 42.1cqw);
  height: min(230px, 25.41cqw);
  transform: rotate(-2deg);
  z-index: 1;
}

.work-style__collage-photo--2 {
  top: min(84px, 9.28cqw);
  left: min(537px, 59.34cqw);
  width: min(300px, 33.15cqw);
  height: min(165px, 18.23cqw);
  transform: rotate(3deg);
  z-index: 1;
}

.work-style__collage-photo--3 {
  top: min(242px, 26.74cqw);
  left: min(268px, 29.61cqw);
  width: min(441px, 48.73cqw);
  height: min(220px, 24.31cqw);
  transform: rotate(-1.5deg);
  z-index: 2;
}

@keyframes work-style-filmstrip-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* タブレット・スマホ幅。タイムライン(左)と写真コラージュ(右)の2カラムを
   1カラムに畳む。写真コラージュ(.work-style__collage)は3枚ともpx固定値の
   絶対配置(例: left:513px)で、狭い画面ではタイムラインと重なって崩れる
   ため非表示にする。右上の丸写真装飾(.work-style__media)も同様の理由で
   非表示にする */
@media (max-width: 992px) {
  .work-style {
    padding: 60px 0;
  }

  .work-style__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .work-style .jobs__title {
    font-size: 2.4rem;
    margin-bottom: 32px;
  }

  .work-style__media {
    display: none;
  }

  .work-style__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .work-style__timeline-time {
    font-size: 1.5rem;
  }

  .work-style__timeline-title {
    font-size: 1.6rem;
  }

  .work-style__timeline-text {
    font-size: 1.3rem;
  }

  .work-style__collage {
    display: none;
  }
}

/* ==========================================================================
   ご利用までの流れ（丸写真＋矢印＋丸番号バッジ版）
   --------------------------------------------------------------------------
   久保さん提供の参考画像（現行資料/画像・動画素材/ご利用までの流れ/パターン2）を
   再現。2026-09-18、久保さん指示で正式採用（旧STEPカード版の.flowは不採用、
   下にdisplay:noneで残している）。配色は旧版と同じ6色
   （--color-job-*＋--color-pink＋--color-about-brand）を再利用
   ========================================================================== */
.flow-timeline {
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
  /* 2026-09-18、久保さん指示で波模様の背景をやめて真っ白に統一。
     波・水色の泡はworries・work-styleセクションの背景に採用したため
     このセクションでは使わなくなった（旧.flow-timeline__bgのSVGは
     不要になったため削除。水玉用の.flow-timeline__bubble*クラスは
     worries・work-styleで引き続き使うため残している） */
  background: var(--color-white);
}

/* 水色の泡。参考画像を拡大して測ったところ、輪郭はぼかさず「くっきりした円」で、
   円の内側だけが左上から右下へゆるく薄くなっていた（シャボン玉のような質感）。
   以前置いていた大きなぼかし円(.flow-timeline__blob)は参考画像には存在せず、
   ぼんやりしたシミのように見えていたため廃止した */
.flow-timeline__bubbles {
  /* 2026-09-18、久保さん指示で試しに非表示に（worries・work-style両方の
     背景で使い回しているクラスのため、ここを1行変えるだけで両方消える。
     元に戻す場合はこの1行を削除するだけでよい） */
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* left/topは泡の「中心」を指定したいので、translateで半分ずらしている。
   位置は参考画像の実測値をセクションの幅・高さに対する％へ換算したもの。
   色の濃さも実測に合わせており、白い所に乗ると薄く、水色の帯に乗ると
   濃く見えるので、どこに置いても浮かない */
.flow-timeline__bubble {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 34% 28%,
              rgba(118, 184, 236, 0.26),
              rgba(118, 184, 236, 0.19) 58%,
              rgba(118, 184, 236, 0.14) 100%);
}

/* 左上のかたまり（大・小・小の3つ） */
.flow-timeline__bubble--1 {
  left: 13.8%;
  top: 12.8%;
  width: 86px;
  height: 86px;
}

.flow-timeline__bubble--2 {
  left: 9%;
  top: 20.1%;
  width: 32px;
  height: 32px;
}

.flow-timeline__bubble--3 {
  left: 3.1%;
  top: 34.1%;
  width: 40px;
  height: 40px;
  opacity: 0.85;
}

/* 右上のかたまり（中・小の2つ） */
.flow-timeline__bubble--4 {
  left: 82.1%;
  top: 7.6%;
  width: 36px;
  height: 36px;
}

/* 参考画像では左94.5%／上16.2%だが、そこは手書きキャッチコピーの
   「が、」と重なってしまうため、文字を避けて少し右下へずらしている */
.flow-timeline__bubble--5 {
  left: 97%;
  top: 29%;
  width: 24px;
  height: 24px;
  opacity: 0.85;
}

/* 右下のかたまり（大・小の2つ）。参考画像ではこの2つだけ他より薄いので、
   opacityを下げて同じ濃さに見えないようにしている。
   参考画像の位置(上76〜77%)はステップ06の文字の真上に当たってしまうので、
   文字より下の空いている所まで下げた */
.flow-timeline__bubble--6 {
  left: 96.8%;
  top: 90.5%;
  width: 50px;
  height: 50px;
  opacity: 0.72;
}

.flow-timeline__bubble--7 {
  left: 91.5%;
  top: 94%;
  width: 20px;
  height: 20px;
  opacity: 0.72;
}

/* 手書き風キャッチコピー。.worries__captionと同じ画像・考え方を流用 */
.flow-timeline__caption {
  position: absolute;
  right: 50px;
  top: 50px;
  width: 260px;
  z-index: 1;
  pointer-events: none;
}

.flow-timeline__inner {
  position: relative;
  z-index: 1;
  /* 2026-09-18、久保さん指示で全体的に小さく感じるとのことで拡大。
     .flow__innerと同じく左右余白を標準の68pxより狭め(25px)、
     大きくした丸写真6枚分の横幅を確保している。
     さらに各項目のフォントが小さいとの指示で、標準のcontainer幅(1440px)
     より広げ、文字を大きくしても窮屈にならないようにした */
  max-width: 1600px;
  padding-left: 25px;
  padding-right: 25px;
}

.flow-timeline__head {
  text-align: center;
  margin-bottom: 56px;
}

.flow-timeline__title {
  font-family: var(--font-sans);
  /* 2026-09-18、久保さん指示で拡大(2.6rem→3.8rem)。.flow__title等と統一 */
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.flow-timeline__lead {
  /* 2026-09-18、久保さん指示で拡大(1.05rem→1.6rem)。.flow__leadと統一 */
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--color-job-text);
}

/* 2026-09-18、久保さん指摘を受けて構造変更（HTML側も参照）。
   PC幅では今まで通り「6列・1行目に写真、2行目にテキスト」に見せたいが、
   HTML上は写真とテキストがstepごとに1組でまとまっている。
   .flow-timeline__step自体はdisplay:contentsでレイアウトから消し、
   中の.flow-timeline__photo/.flow-timeline__text-colを直接
   .flow-timeline__stepsのグリッドアイテムとして配置する。
   列位置はauto-placementに頼らず、nth-childで明示的に固定している
   （display:contentsの子はDOM順で数えられるため機能する） */
.flow-timeline__steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 20px;
  margin-bottom: 44px;
}

.flow-timeline__step {
  display: contents;
}

.flow-timeline__step .flow-timeline__photo {
  grid-row: 1;
}

.flow-timeline__step .flow-timeline__text-col {
  grid-row: 2;
  margin-top: 18px;
}

.flow-timeline__steps > .flow-timeline__step:nth-child(1) > * { grid-column: 1; }
.flow-timeline__steps > .flow-timeline__step:nth-child(2) > * { grid-column: 2; }
.flow-timeline__steps > .flow-timeline__step:nth-child(3) > * { grid-column: 3; }
.flow-timeline__steps > .flow-timeline__step:nth-child(4) > * { grid-column: 4; }
.flow-timeline__steps > .flow-timeline__step:nth-child(5) > * { grid-column: 5; }
.flow-timeline__steps > .flow-timeline__step:nth-child(6) > * { grid-column: 6; }

.flow-timeline__photo {
  position: relative;
}

.flow-timeline__photo-inner {
  width: 100%;
  /* 2026-09-18、久保さん指示で拡大(170px→200px) */
  max-width: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 14px 28px rgba(10, 36, 85, 0.16);
}

.flow-timeline__photo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 丸写真間の矢印。.flow__step:not(:last-child)::afterと同じ
   「回転させた角」のテクニックを、丸写真用に少し大きく・濃い青にして流用。
   写真がstepの中に入ったため、判定は.flow-timeline__step単位で行う */
.flow-timeline__step:not(:last-child) .flow-timeline__photo::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  width: 12px;
  height: 12px;
  border-top: 3px solid var(--color-job-blue);
  border-right: 3px solid var(--color-job-blue);
  transform: translateY(-50%) rotate(45deg);
}

.flow-timeline__badge {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  /* 2026-09-18、久保さん指示で拡大(38px→46px) */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.1rem;
  border: 4px solid var(--color-white);
  box-shadow: 0 6px 14px rgba(10, 36, 85, 0.18);
}

.flow-timeline__badge--blue   { background: var(--color-job-blue); }
.flow-timeline__badge--purple { background: var(--color-job-purple); }
.flow-timeline__badge--pink   { background: var(--color-pink); }
.flow-timeline__badge--orange { background: var(--color-job-orange); }
.flow-timeline__badge--cyan   { background: var(--color-job-cyan); }
.flow-timeline__badge--green  { background: var(--color-about-brand); }

.flow-timeline__text-col {
  text-align: center;
}

.flow-timeline__text-col .flow-timeline__step-title {
  font-family: var(--font-sans);
  /* 2026-09-18、久保さん指示で拡大(1.05rem→1.35rem→1.6rem) */
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.4;
  margin-bottom: 10px;
}

.flow-timeline__text-col .flow-timeline__step-text {
  /* 2026-09-18、久保さん指示で拡大(0.85rem→1.1rem→1.3rem) */
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-job-text);
}

/* タブレット・スマホ幅。
   【2026-09-18 久保さん指摘で修正】以前は写真6枚と対応するテキスト6個を
   別々に2列グリッドへ畳んでいたが、それぞれ独立したグリッドのため
   「写真が6枚並んだ後にテキストが6個並ぶ」だけになり、3枚目以降は
   対応するテキストが画面のずっと下にあってどれがどれか分からない状態に
   なっていた。HTML側でstepごとに写真+テキストを1組にまとめたので、
   ここでは.flow-timeline__step自体を「写真→タイトル→本文を縦に並べる
   1枚のブロック」として扱う（display:contentsを解除し、PC用に固定した
   grid-row/grid-columnもリセットする）。矢印(::after)は2列では意味が
   変わってしまうため非表示。手書き風キャプション画像
   (.flow-timeline__caption)は.worries__captionと同じくPC専用の絶対配置
   のため非表示にする */
@media (max-width: 992px) {
  .flow-timeline {
    padding: 60px 0 50px;
  }

  .flow-timeline__inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .flow-timeline__caption {
    display: none;
  }

  .flow-timeline__title {
    font-size: 2.4rem;
  }

  .flow-timeline__lead {
    font-size: 1.4rem;
  }

  .flow-timeline__steps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 36px;
    margin-bottom: 0;
  }

  .flow-timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .flow-timeline__steps > .flow-timeline__step > * {
    grid-row: auto;
    grid-column: auto;
  }

  .flow-timeline__step .flow-timeline__text-col {
    margin-top: 16px;
  }

  .flow-timeline__step .flow-timeline__photo::after {
    display: none;
  }

  .flow-timeline__photo-inner {
    /* 2026-09-29、久保さん指示で2列を維持したままにする767px〜992px幅
       （iPad縦向きなど）だと140pxはやや窮屈だったため160pxに拡大。
       2026-09-30、久保さん指摘で同じ丸抜き画像であるJOBSセクション
       （.jobs-circle__media、このレンジでは260px）とサイズを揃えたいとの
       ことで260pxに拡大 */
    max-width: 260px;
  }

  .flow-timeline__text-col .flow-timeline__step-title {
    font-size: 1.4rem;
  }

  .flow-timeline__text-col .flow-timeline__step-text {
    /* 2026-09-29、同上の理由で1.2rem→1.3remに拡大 */
    font-size: 1.3rem;
  }
}

/* スマホ幅は2列だと1つ1つが窮屈なため1列に変更（2026-09-18、久保さん指示）。
   タブレット幅(768px〜992px)は上の2列のまま。iPad縦向き(768px)はタブレット
   側に含めたいため、767px以下をスマホの境界にしている */
@media (max-width: 767px) {
  .flow-timeline__steps {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .flow-timeline__photo-inner {
    /* 2026-09-30、久保さん指摘でJOBSセクション（.jobs-circle__media、
       このレンジでは260px）とサイズを揃えたいとのことで200px→260pxに拡大 */
    max-width: 260px;
  }
}

/* 他セクション(work-style・faq等)と同じ「さりげない」ボタン(.link-arrow)で、
   /flow/ページへの導線を追加（2026-09-30、久保さん指示） */
.flow-timeline__more {
  text-align: center;
  margin-top: 48px;
}

/* ==========================================================================
   ご利用までの流れ
   --------------------------------------------------------------------------
   チャッピー作成の参考画像を元に、横並び6ステップの構成を再現。配色は
   新規に増やさず、既存の--color-job-*4色・--color-pink・
   --color-about-brandを再利用している（2026-09-16、久保さん指示）
   ========================================================================== */
.flow {
  /* 2026-09-18、久保さん指示で.flow-timeline（パターン2・丸写真タイムライン版）
     を正式採用。こちらの旧STEPカード版は不採用となったため非表示に
     （削除はせず、他の不採用パターンと同じくdisplay:noneで残している） */
  display: none;
  position: relative; /* .flow__head-media（右上の丸い写真）の配置基準 */
  padding: 100px 0;
  /* 2026-09-17、久保さん指示でパララックス演出(.parallax-bgが透ける
     半透明背景)をやめ、不透明な白に戻した（元は白72%透過） */
  background: var(--color-white);
}

/* ==========================================================================
   よくある質問セクション
   現行資料/画像・動画素材/よくある質問/デザイン案.pngをもとに実装。
   背景の水玉装飾は他セクション同様、久保さん指示により不使用。
   ========================================================================== */
.faq {
  position: relative; /* 縁のフェードレイヤー(::before/::after)の配置基準 */
  padding: 100px 0;
  /* 久保さん指示で.worries・.work-styleと同じ波模様の背景に変更。
     水玉（.flow-timeline__bubbles）は「なくていい」とのご指示のため、
     背景画像・色のみ流用し、水玉の重ねは行わない。
     2026-09-28、.worriesと同じく「上下だけ波、真ん中は単色」方式に
     変更（詳細は.worriesのコメント参照） */
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  isolation: isolate;
}

/* 久保さん指示で.worries__inner等と同じ考え方で標準.containerの制約
   (max-width:1440px)を外し、画面幅いっぱいに広げている。右側は他
   セクションの手書きメッセージ(.flow-timeline__caption等)と同じく、
   画面の右端から固定50pxの位置に揃えるためpadding-right:50px。
   2026-09-23、久保さん指摘で「トップのよくある質問が右に寄って見える」
   問題を確認。旧実装は右側だけ固定50pxにして左側をcalc()で伸縮させて
   いたため、1600px超の画面幅（一般的なデスクトップの1920px等）になる
   ほど左余白だけが際限なく増え、コンテンツ全体が右へ寄って見えていた
   （中央のカード欄を狭めずに右端の50px基準は保ったまま直すため、
   左側も同じ固定50pxに揃えて左右対称にした） */
.faq .faq__inner {
  max-width: none;
  margin: 0;
  padding-left: 50px;
  padding-right: 50px;
}

.faq__head {
  text-align: center;
  margin-bottom: 56px;
}

/* セクション見出し上の「横棒＋英語」ラベル。元は.faq__eyebrowとしてFAQのみに
   実装していたが、2026-09-22、久保さん指示で他セクションにも統一するため
   汎用クラスに切り出した（.jobs-badge__eyebrow等、各セクションのHTML側から
   共通でこのクラスを参照する） */
.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-job-blue);
  margin-bottom: 10px;
}

.section-eyebrow-dash {
  display: inline-block;
  width: 14px;
  height: 2px;
  background: var(--color-job-blue);
  border-radius: 999px;
}

.faq__title {
  font-family: var(--font-sans);
  font-size: 3.8rem; /* jobs__title・worries__title・flow__title等と同じサイズに統一 */
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.faq__lead {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--color-job-text);
}

/* 2026-09-23、久保さん指示で「中央のQ&Aリストが広すぎるので、左右の
   写真・キャプションはその分内側に寄ってよい」とのこと。justify-content:
   centerに変更し、.faq__listに上限幅を設けることで、広い画面幅では
   リストが際限なく伸びる代わりに、リスト＋写真＋キャプションのまとまり
   全体が中央に集まり、写真・キャプションは画面端の固定50pxより内側に
   入るようにした（余白が窮屈な画面幅では従来通り端の50pxに収まる） */
.faq__body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
}

/* 2026-09-21、デザイン案.png(1672x941、PC1440px相当)を実測して修正。
   写真は直径360px前後・カード欄の1問目と天端が揃う大きさ（実測値×0.861244
   でCSS換算）。旧実装は220pxと小さすぎ、吹き出しの位置も右上→実際は
   写真の左下に重なる配置が正しかった */
.faq__media {
  position: relative;
  flex: 0 0 310px;
}

.faq__photo {
  width: 310px;
  height: 310px;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--color-white); /* 他の丸写真(.flow__head-media等)と同じ白枠 */
  box-shadow: 0 20px 36px rgba(10, 36, 85, 0.15); /* 他の丸写真(.flow__head-media等)と同じ影 */
}

/* 元の素材(faq-staff-photo.png)には太い白枠＋ぼかし影＋「！」の飾りが
   焼き込まれており、CSSの拡大率だけで白枠を隠そうとしても素材内の白枠の
   太さが均一でないため方向によって隠しきれなかった。そのため素材側で
   白枠を含まない範囲(顔・上半身のみ)を先に切り出した画像
   (faq-staff-photo-cropped.png)を別途用意し、他の丸写真と同じ
   シンプルな指定にしている */
.faq__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真の左下に重ねる（実測：吹き出し上端は写真の高さの約88%の位置、
   左端は写真の左端よりさらに左にはみ出す） */
.faq__bubble {
  position: absolute;
  top: 270px;
  left: -50px;
  width: 276px;
  pointer-events: none;
}

.faq__list {
  flex: 1 1 980px;
  max-width: 980px;
  min-width: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__details {
  background: var(--color-white);
  border: 1px solid #eef0f2;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(10, 36, 85, 0.06); /* 他のカード(.flow__step等)と同じ影 */
  overflow: hidden;
}

/* <summary>はデフォルトで三角マーカーが付くため、独自の+/-アイコン
   (.faq__toggle)に置き換える */
.faq__question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__q-badge,
.faq__a-badge {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-white);
  background: var(--color-job-blue);
}

.faq__a-badge {
  background: var(--color-about-brand); /* Q/Aで色を分け、視覚的に区別しやすくする */
}

.faq__q-text {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-navy);
}

.faq__toggle {
  position: relative;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--color-job-blue);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq__toggle::before {
  width: 14px;
  height: 2px;
}

.faq__toggle::after {
  width: 2px;
  height: 14px;
}

/* 開いている間は縦棒を消して「+」を「−」にする */
.faq__details[open] .faq__toggle::after {
  opacity: 0;
}

/* 2026-09-28、久保さん指示で、クリック時に回答が急に表示されるのを
   なめらかな開閉アニメーションに変更。<details>はopen属性の有無で
   display:none⇔blockが瞬時に切り替わるため、そのままではheight等を
   transitionできない。.faq__answerをgrid-template-rows:0fr⇔1frで
   開閉させることで、JSを使わずなめらかな高さアニメーションを実現している
   （.faq__answerは常時display:gridで描画し、ブラウザ標準の
   display:none指定を打ち消している。開閉の見た目はgrid行の高さで制御）。
   単に0frと書くとgridのfrトラックはminmax(auto, 0fr)として扱われ、
   中の.faq__answer-innerのpadding分（48px）だけ潰れきらずに残ってしまう
   ため、minmax(0, 0fr)と明示して最小サイズを0にしている */
.faq__answer {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.35s ease;
  background: var(--color-worry-check-bg); /* お悩みセクションのチェック円と同じ薄い水色を流用 */
}

.faq__details[open] .faq__answer {
  grid-template-rows: minmax(0, 1fr);
}

/* 2026-09-28、久保さん指示で、上のQ（質問）とAバッジの間が4pxしかなく
   詰まりすぎて見えたため、下と同じ24pxに揃えて余白のバランスを取った。
   grid行の高さが0の間はこのラッパーごと隠れる必要があるため、overflow:hidden
   と最小サイズ0を指定（無指定だとflexの内容分だけ潰れずに残ってしまう） */
.faq__answer-inner {
  display: flex;
  gap: 16px;
  padding: 24px;
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.faq__details[open] .faq__answer-inner {
  opacity: 1;
  transition-delay: 0.05s; /* 高さが開き始めてから少し遅れて中身をフェードインさせる */
}

.faq__answer p {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-job-text);
}

/* 久保さん指示で、中央のカード幅は変えずに（=flex配置のまま）、手書き
   メッセージだけ少し上・少し大きくアレンジ。
   2026-09-23、久保さん指摘で「よくある質問のリストが見出しより右に
   ずれて見える」問題を確認・修正。写真エリア(.faq__media、flex-basis
   310px)と手書きキャプション(flex-basis 280px)の幅差30pxのせいで、
   中央のflex:1リストの実際の表示位置が、text-align:centerで中央に
   揃えている見出しより15px右にずれていた。画像自体の見た目・表示位置は
   変えずに、flex-basisだけ写真側と同じ310pxに揃え、その分をmargin-left
   で相殺することで、リストが見出しと正しく中央揃いになるようにした */
.faq__handwritten {
  flex: 0 0 280px;
  width: 280px;
  margin-left: 30px;
  margin-top: 40px;
  pointer-events: none;
}

.faq__cta {
  text-align: center;
  margin-top: 56px;
}

/* 2026-09-28、久保さん指摘・検証で発見：.faq__bodyは写真(.faq__media、
   310px固定)・質問リスト(.faq__list)・手書きキャプション画像
   (.faq__handwritten、280px固定)の3つ横並びのため、992px超〜約1300px幅
   （ハンバーガーメニューにはまだ切り替わらないPC扱いの帯。ヘッダーの
   ナビ修正と同じ帯）では質問リストの実質幅が200px程度まで圧迫され、
   1文字ずつ縦に折り返るほど窮屈になっていた（実測で発見）。
   手書きキャプションはこの帯でも装飾用途のため、992px以下と同様に
   非表示にしてリストの幅を確保する */
@media (min-width: 993px) and (max-width: 1300px) {
  .faq__handwritten {
    display: none;
  }
}

/* タブレット・スマホ幅。写真+吹き出しを中央上部に、アコーディオンを
   その下に縦積みする。手書き風メッセージは.worries__caption・
   .flow-timeline__captionと同じくPC専用の装飾のため非表示にする */
@media (max-width: 992px) {
  .faq {
    padding: 64px 0;
  }

  .faq__title {
    font-size: 2.8rem;
  }

  .faq__body {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .faq__media {
    flex: 0 0 auto;
    align-self: center;
    /* 吹き出しは絶対配置で高さに含まれないため、次の要素(.faq__list)と
       重ならないよう写真の下にはみ出す分の余白を確保する */
    margin-bottom: 100px;
  }

  /* PC実測比(310px→240px)に合わせて写真・吹き出しも縮小 */
  .faq__photo {
    width: 240px;
    height: 240px;
  }

  .faq__bubble {
    top: 209px;
    left: -39px;
    width: 214px;
  }

  .faq__list {
    width: 100%;
    /* 2026-09-30、久保さん指摘：PC用の flex: 1 1 980px は縦積み（column）になると
       「高さ980px」として効いてしまい、最後の質問の下に約450pxの余白ができていた。
       縦積みの幅では内容の高さに合わせる */
    flex: 0 0 auto;
  }

  .faq__handwritten {
    display: none;
  }

  .faq .faq__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 480px) {
  .faq__media {
    margin-bottom: 80px;
  }

  .faq__photo {
    width: 200px;
    height: 200px;
  }

  .faq__bubble {
    top: 174px;
    left: -32px;
    width: 178px;
  }

  .faq__question {
    padding: 16px;
    gap: 12px;
  }

  .faq__q-text {
    font-size: 1.4rem;
  }

  .faq__answer-inner {
    padding: 20px 16px;
  }
}

/* ==========================================================================
   新着情報・SNSセクション
   現行資料/画像・動画素材/お知らせ・SNS/work_link_news_sns_section.png
   をもとに実装。久保さん指示で背景は波模様を使わず真っ白にしている。
   ========================================================================== */
.news-sns {
  padding: 100px 0;
  background: var(--color-white);
}

/* 2026-09-21、久保さん指示で2カラム表示に戻した。SNS側はお知らせより
   コンテンツ量が少なく背が低くなるため、align-items:centerで お知らせの
   高さに対してSNS側を上下中央に寄せ、不自然な余白が下に偏らないように
   している */
.news-sns__inner {
  display: flex;
  align-items: center;
  gap: 64px;
}

.news-sns__col {
  flex: 1;
  min-width: 0;
}

/* 2026-09-25、久保さん指示でSNS列を外した後の.news-sns__newsが
   コンテナ全幅（約1300px）まで伸びて横長すぎたため、上限幅を設けて
   中央寄せにした（flex:1のitemでもmax-width+margin:0 autoで縮められる） */
.news-sns__news {
  max-width: 900px;
  margin: 0 auto;
}

/* 2カラムの間の区切り線。align-items:centerに合わせ、天地中央から
   お知らせカラムの高さいっぱいに伸ばす */

.news-sns__head {
  margin-bottom: 32px;
}

.news-sns__head--center {
  text-align: center;
}

.news-sns__title {
  font-family: var(--font-sans);
  font-size: 3.8rem; /* jobs__title・worries__title・flow__title等と同じサイズに統一 */
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 14px;
}

/* ---- お知らせリスト ---- */
.news-sns__list {
  list-style: none;
}

.news-sns__item {
  border-bottom: 1px solid #eef0f2;
}

.news-sns__item:first-child {
  border-top: 1px solid #eef0f2;
}

.news-sns__link {
  display: block;
  position: relative;
  padding: 20px 32px 20px 0;
  text-decoration: none;
  color: inherit;
}

.news-sns__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.news-sns__date {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  color: #8a8f98;
}

.news-sns__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
}

/* .jobs-badge__tag--blue等と同じ「薄い塗り＋同系色文字」の考え方 */
.news-sns__tag--blue  { background: rgba(47, 127, 224, 0.1);  color: var(--color-job-blue); }
.news-sns__tag--pink  { background: rgba(253, 87, 109, 0.1);  color: var(--color-pink); }
.news-sns__tag--green { background: rgba(31, 138, 114, 0.12); color: var(--color-about-brand); }

/* 2026-09-22、久保さん指示：SNS列を外して「お知らせ」が横幅に余裕が
   できたため、日付・カテゴリラベル・タイトルを1行に横並びにする
   （.news-sns__metaは既にdisplay:flex）。タイトルは長さがまちまちなので
   flex:1 + ellipsisで1行に収めている */
.news-sns__item-title {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-navy);
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-sns__item-text {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--color-job-text);
}

.news-sns__arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--color-navy);
}

.news-sns__more {
  margin-top: 32px;
  text-align: center;
}

/* タブレット・スマホ幅。2カラムを縦積みにし、区切り線は横線に切り替える */
@media (max-width: 992px) {
  .news-sns {
    padding: 64px 0;
  }

  .news-sns__inner {
    flex-direction: column;
    align-items: stretch; /* PC用のalign-items:centerは横方向の中央寄せのため、縦積みでは元に戻す */
    gap: 48px;
  }

  .news-sns__title {
    font-size: 2.6rem;
  }
}

/* 狭いスマホ幅だと日付・タグ分の余白でタイトルの省略(…)が目立ちすぎるため、
   600px以下は縦並び（メタ行の下にタイトル）に戻す。news-sns__metaは
   デフォルトflex-wrap:nowrapのため、そのままだとdate/tagが圧縮されて
   文字が縦に折り返ってしまう。flex-wrap:wrapにした上でdate/tagを
   flex-shrink:0にし、幅100%のtitleだけを次の行に自然に折り返す
   （2026-09-22、久保さん指示） */
@media (max-width: 600px) {
  .news-sns__meta {
    flex-wrap: wrap;
  }

  .news-sns__date,
  .news-sns__tag {
    flex-shrink: 0;
  }

  .news-sns__item-title {
    flex: none;
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-top: 4px;
  }
}

/* ==========================================================================
   最終CTA＋フッター
   現行資料/画像・動画素材/フッターCTA/CTAとフッター合体.pngをもとに実装。
   背景写真（女性を少し小さく見せるため左右を広げた横長版）はCTAのエリア
   だけに使い、フッターまでは広げない（2026-09-21、久保さん指示）。
   2026-09-22、検証用ページ(cta-footer-preview.html)での試作を本番に反映。
   縦幅を140px 0 120px→200px 0 180pxに拡大（久保さん指示） */
.cta-footer__hero {
  position: relative;
  padding: 200px 0 180px;
  overflow: hidden;
}

/* 背景写真本体。CTAのエリアだけに使い、フッターには広げない。
   2026-09-22、久保さん指示でパララックス(background-attachment:fixed)を
   廃止し、通常のscrollに変更。実測（1672x941、女性は横位置約77%）に
   合わせてbackground-position・sizeも77% 85% / coverに調整し、
   女性の頭が切れずに視野に収まるようにしている */
.cta-footer__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/images/cta-bg-skyline-wide.png") 77% 85% / cover no-repeat;
  z-index: 0;
}

/* 2026-09-22、久保さん指示：白の半透明フィルターで一律に薄めていたのを、
   波模様画像(bg-wave-nodots.jpg)のmix-blend-mode:multiplyに変更。
   白い部分は完全に背景写真が透け、波の青い部分だけ色が乗る見え方になる */
.cta-footer__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/images/bg-wave-nodots.jpg") center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  z-index: 1;
}

.cta-footer__cta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* 2026-09-22、久保さん指示：左右の配置を入れ替え、キャッチは
   .cta-footer__ctaの外に出して.cta-footer__hero直下に移動。
   理由：.cta-footer__cta（内側のcontainer、max-width:1440pxで中央寄せ）
   基準にpx固定値で配置すると、背景写真は外側の.cta-footer__hero
   （画面幅いっぱい、上限なし）を基準に伸縮するため、画面が広いほど
   キャッチが女性から離れて見える不具合があった。.cta-footer__hero
   基準の%指定にすることで、背景写真の女性と同じ比率で動くように統一 */
.cta-footer__catch {
  position: absolute;
  left: 49%;
  top: 290px;
  z-index: 2;
}

.cta-footer__catch-image {
  display: block;
  width: 320px;
}

.cta-footer__box {
  flex: 0 1 560px;
}

.cta-footer__title {
  font-family: var(--font-sans);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 20px;
  /* 2026-09-29、スマホ幅で見出しの最後の1文字だけ次の行に浮いてしまって
     いたため、行の文字数をできるだけ均等に折り返す指定を追加
     （対応していないブラウザでは単に無視され、従来通りの折り返しになる） */
  text-wrap: balance;
}

/* 見出しを2つのまとまりで折り返す（フッターCTA。途中で切れず、「見学・相談は」「いつでも受付中です」の間だけで改行される） */
.cta-footer__title-part {
  display: inline-block;
}

/* 電話ボタンの電話番号は、スマホ・タブレット幅だけ表示する（PC幅では、ボタンが長くなって2つ目のボタンが
   下の段に回り込むのを防ぐため、「電話する」だけにする。2026-10-11） */
.cta-footer__tel-number {
  display: none;
}

.cta-footer__lead {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-navy);
  margin-bottom: 36px;
}

.cta-footer__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* ---- フッター本体。写真は使わず単色背景（CTAとは別セクション） ---- */
.site-footer {
  background: #eaf6fe;
  padding-top: 64px;
}

.site-footer__inner {
  display: flex;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(10, 36, 85, 0.1);
}

.site-footer__brand {
  flex: 1 1 260px;
}

.site-footer__logo {
  display: block;
  width: 160px;
  margin-bottom: 14px;
}

.site-footer__tagline {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 700;
  /* 2026-09-22、久保さん指示で緑(--color-about-brand)からロゴと同じ
     ネイビー(--color-navy)に変更 */
  color: var(--color-navy);
  margin-bottom: 12px;
}

.site-footer__desc {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--color-job-text);
}

.site-footer__col {
  flex: 1 1 180px;
}

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 20px;
}

.site-footer__links {
  list-style: none;
}

.site-footer__links li:not(:last-child) {
  margin-bottom: 14px;
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--color-job-text);
  text-decoration: none;
}

.site-footer__link-arrow {
  color: var(--color-job-blue);
  flex-shrink: 0;
}

.site-footer__contact {
  flex: 1 1 240px;
}

.site-footer__tel {
  display: block;
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: none;
  margin-bottom: 6px;
}

.site-footer__hours {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  color: var(--color-job-text);
  margin-bottom: 18px;
}

.site-footer__form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--color-job-blue);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-job-blue);
  text-decoration: none;
  margin-bottom: 18px;
}

.site-footer__sns {
  display: flex;
  gap: 10px;
}

.site-footer__sns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.site-footer__sns-icon--instagram {
  background: linear-gradient(135deg, #feda75, #d62976 55%, #4f5bd5);
}

.site-footer__sns-icon--facebook {
  background: #1877f2;
}

.site-footer__sns-icon--x {
  background: #000000;
}

/* Instagram公式アカウントへのロゴリンク（2026-10-15）。ロゴは色・形を変えない。押せる高さは44px以上 */
/* ロゴの上の一言（「受付時間」より少し大きめ：14px。久保さん指示） */
.site-footer__instagram-lead {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-job-text);
  margin: 20px 0 0;
  padding-left: 7px; /* ロゴの左端に対し、文字を見た目でわずかに右へ寄せる（久保さん指示） */
}

.site-footer__instagram {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
}

/* 幅は「お問い合わせフォーム」ボタンの8割（久保さん指示） */
.site-footer__instagram img {
  display: block;
  width: 80%;
  height: auto;
}

.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  /* 2026-09-29、padding: 24px 0だと.containerが指定した左右の余白(68px/24px)を
     0で上書きしてしまい、著作権表記がスマホ・タブレット幅で画面端にくっつく
     バグがあったため、上下だけを指定するpadding-blockに変更 */
  padding-block: 24px;
}

.site-footer__copyright {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  color: var(--color-job-text);
}

/* タブレット・スマホ幅 */
@media (max-width: 992px) {
  /* ボタンが女性の頭にかからず、エリアの下端がズボンの半分で切れるようにする
     （2026-10-12、久保さんのキャプチャ指定。PC幅は変更なし）。
     背景写真は「エリアの高さに合わせて拡大」をやめ、高さを固定して下端基準で置く。
     こうすると、見出しの行数が変わっても、頭とボタンの間隔は一定（約32px）になる。
     下余白＝32px＋写真の高さ×0.403、下端のはみ出し＝写真の高さ×0.084（ズボンの半分） */
  .cta-footer__hero {
    padding: 90px 0 391px;
  }

  .cta-footer__hero::before {
    background-size: auto 890px;
    background-position: 77% calc(100% + 75px);
  }

  .cta-footer__cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }

  /* 縦並びの時、flex: 0 1 560px の560pxが「高さ」の指定になり、中身より約100px縦に
     伸びていたため、中身の高さに合わせる */
  .cta-footer__box {
    flex: 0 0 auto;
  }

  /* PC幅では.cta-footer__hero基準の絶対配置（女性の隣に配置）だが、
     スマホ・タブレット幅では背景写真の見え方が変わり、ボタン下の余白に
     置いても女性の胴体に重なって読みづらくなるため非表示にする
     （2026-09-22、久保さん指示。装飾的な要素でCTAボタンの操作に
     影響しないため、モバイルでは非表示が安全と判断） */
  .cta-footer__catch {
    display: none;
  }

  .cta-footer__title {
    font-size: 2.2rem;
  }

  .cta-footer__buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-footer__buttons .hero__btn {
    justify-content: center;
  }

  .cta-footer__tel-number {
    display: inline;
  }

  .site-footer__inner {
    flex-wrap: wrap;
    gap: 40px;
  }

  .site-footer__brand {
    flex: 1 1 100%;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* スマホ幅（600px以下）は、写真を少し大きく（890px→960px）して、同じ考え方で下余白と
   下端のはみ出しを計算し直す（2026-10-12。幅360〜600pxで頭とボタンの間隔は約33px） */
@media (max-width: 600px) {
  .cta-footer__hero {
    padding-bottom: 419px;
  }

  .cta-footer__hero::before {
    background-size: auto 960px;
    background-position: 77% calc(100% + 81px);
  }
}

/* ==========================================================================
   下位ページ共通パーツ（2026-09-22、久保さん指示で新規追加）
   --------------------------------------------------------------------------
   ホームのヘッダー(.header--video-intro)は動画に重ねる透過ヘッダーで、
   position:absoluteかつ文字色を.text-pattern-a/bで動的に切り替える前提の
   作りになっている。下位ページには重ねる動画が無いため、そのまま使うと
   本文に重なって読めなくなる。そこで「見た目だけ違うヘッダー」として
   .header--pageを追加し、下位ページ側はこちらを使う（ロゴ・ナビ・CTAの
   HTML構造・クラスは共通のまま）。文字色は.header__nav-linkの基本色
   （ネイビー）がそのまま使えるため、.text-pattern-a/b相当の指定は不要。
   ========================================================================== */
.header--page {
  position: static;
  background: var(--color-white);
  border-bottom: 1px solid rgba(10, 36, 85, 0.08);
}

.header--page .header__inner {
  align-items: center;
}

/* 2026-09-30、久保さん指示でロゴ文字の下辺とナビ文字の下辺を揃える
   （実測で24px必要だったため0px→24pxに変更） */
.header--page .header__nav-list {
  top: 24px;
}

/* ページタイトルバナー。久保さん指示で「主要ページのみ画像付きに」。
   地味なページ（プライバシーポリシー等）は今後シンプルな帯で作る想定なので、
   画像は個別修飾クラス（.page-banner--about等）の背景画像として都度指定する */
.page-banner {
  position: relative;
  height: 280px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 2026-09-28、久保さん指示で「ビジネス色が強い」との指摘を受け、
     ネイビー(rgba(10, 36, 85, 0.68))→テラコッタ系→本項目、と検討を重ねた。
     banner-color-compare.html（内部確認用ファイル）で7案を比較した結果、
     「レイヤーなし」を本番でいったん試すことになったため透明にした。
     写真によっては白文字が読みにくくなる可能性があるため、各ページの
     バナー写真の見え方は個別に確認すること */
  background: transparent;
}

/* 2026-09-30、久保さん指示でサブページヘッダー専用にアップスケール
   ＋圧縮した画像(page-banner-*.jpg)に差し替え。元画像(about-photo-3.jpg等)は
   小さいサイズで他箇所(グリッド写真など)に引き続き使うため、ヘッダー用は
   別ファイルとして分けている */
.page-banner--about {
  background-image: url("assets/images/page-banner-about.jpg");
  /* 2026-09-30、久保さん指示でjob-light-work.jpgに差し替え。中央基準だと
     スタッフの顔が見切れて箱・手元だけになるため、顔が見える上寄りに調整
     （2026-10-01、一度banner-about-office.jpgに差し替えたが、久保さん指示で元に戻した） */
  background-position: center 5%;
}

.page-banner--work {
  background-image: url("assets/images/page-banner-work.jpg");
  /* 2026-10-01、久保さん指示で、帯では顔をあえて出さない構図(手元・体・小物中心)にするため縦位置を調整 */
  background-position: center 92%;
}

.page-banner--work-style {
  background-image: url("assets/images/page-banner-work-style.jpg");
  /* 2026-10-01、帯が高さ280pxの横長切り抜きで顔が見切れていたため、顔が入る縦位置に調整 */
  background-position: center 20%;
}

.page-banner--flow {
  background-image: url("assets/images/flow-bg.jpg");
  /* 2026-10-01、久保さん指示で、帯では顔をあえて出さない構図(手元・体・小物中心)にするため縦位置を調整 */
  background-position: center 70%;
}

.page-banner__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

/* 2026-09-30、久保さん指摘でバナー写真によって白文字（特にパンくず）が
   読みにくい箇所があったため対応。::beforeの色付きレイヤーは「ビジネス色が
   強い」との理由で以前見送った経緯があるため、写真そのものには手を入れず、
   文字側にごく薄い影をつけて浮き上がらせる方法をまず試した。
   「もう少しだけ見えやすく」とのことで、輪郭をくっきりさせる近い影と、
   全体を浮かせる遠い影の2枚重ねに強めた */
.page-banner__breadcrumb {
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
}

.page-banner__breadcrumb a {
  text-decoration: underline;
}

.page-banner__breadcrumb-sep {
  margin: 0 8px;
}

.page-banner__title {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* お知らせ記事ページでは、記事タイトルをh1にしたため、バナーの「お知らせ・コラム」はh2にしている。
   Lightningのh2の装飾（上下の線・余白）を打ち消して、見た目はh1のときと同じにする（2026-10-11） */
.page-banner--news h2.page-banner__title {
  padding: 0;
  border: 0;
}

/* 2026-09-22、チャッピーのデザイン案(about1.png)に合わせて追加。
   タグライン＝タイトル下の一言。キャプション＝右上の手書き風文言
   （既存のworries-caption.pngを再利用。同じ「はじめの一歩が、未来を
   変える。」のため）。下端の波（.jobs-cta__waveと同じ仕組み）は
   チャッピー案にはあったが、2026-09-22、久保さん指示で「今はしない、
   最初の（波なしの）ままがよい」とのことで見送り */
.page-banner__tagline {
  margin-top: 14px;
  font-size: 1.6rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
}

.page-banner__caption {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 40px;
  width: 190px;
}

@media (max-width: 992px) {
  .page-banner {
    height: 200px;
  }

  .page-banner__title {
    font-size: 2.6rem;
  }

  .page-banner__caption {
    display: none;
  }
}

/* 2026-09-29、agencies.htmlの見出し「ハローワーク・相談支援事業所・
   医療機関等の皆さまへ」がスマホ幅で2.6remのままだと、HTML側の<br>で
   意図した位置とは違う中途半端な場所（「相談支援事業/所・」）でさらに
   折り返されてしまっていたため、600px以下でもう一段階小さくする。
   文字数が増えて行数が変わっても見切れないよう、height固定もmin-heightに */
@media (max-width: 600px) {
  .page-banner {
    height: auto;
    min-height: 200px;
    padding: 24px 0;
  }

  .page-banner__title {
    font-size: 2rem;
    line-height: 1.4;
  }
}

/* ==========================================================================
   Work Linkについて（/about/）
   --------------------------------------------------------------------------
   spec.mdの「Work Linkについて」ページ仕様をもとにしたClaude Codeでの
   一次実装後、2026-09-22、久保さんがチャッピーに作らせたデザイン案
   （現行資料/画像・動画素材/about/about1.png）に合わせてレイアウトを
   作り替えた。写真は久保さんから支給された実素材に差し替え済み。
   ========================================================================== */

/* 2026-09-22、実素材の写真を反映した際、「3つの想い」カードやSUPPORT/
   FOR YOU写真が全体の.container左右余白(68px)のせいで窮屈・小さく見える
   との指摘を受け、aboutページの本文セクションに限定して左右余白を狭め、
   コンテンツ幅を広げた（ヘッダー・フッター・他ページのcontainerには影響なし）。
   タブレット・スマホ幅（992px以下）は.container側の24px paddingが既に
   狭い画面向けに最適化済みのため、この上書きはデスクトップ幅のみに限定 */
@media (min-width: 993px) {
  .about-page__story > .container,
.about-page__features > .container,
.about-page__target > .container,
.work-page__intro > .container,
.work-page__jobs > .container,
.work-page__pcok > .container {
    padding: 0 48px;
  }

}

/* Work Linkとは。ページの一番最初のコンテンツセクションの大見出し。
   2026-09-28時点では下の「1コマずつ表示」セクション（.about-page__comic-demo）
   のh2として使われている */
.about-page__intro-title {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
}

.about-page__intro-title-accent {
  color: var(--color-job-blue);
}

/* 就労継続支援A型とは／Work Linkの取り組みを、1コマずつスクロールで
   フワッと表示する版 ============================
   2026-09-22、久保さんがチャッピーに作らせたデザイン案では、1枚の4コマ絵を
   クリックで拡大表示する2列カード形式だった。
   2026-09-25、久保さん指示で試作。「work.htmlの.work-page__intro-reveal
   と同じ、1コマずつ順番に表示される演出」に変えられないか、2列カード版と
   比較する形でこの版を追加した。画像はチャッピーへの再依頼はせず、既存の
   4コマ絵（about-a-type-guide.png・about-work-link-guide.png）をこちらで
   4分割して流用（about-a-type-frame1〜4.png・about-worklink-frame1〜4.png）。
   仕組み（IntersectionObserverで.is-visibleを付与→CSSのtransition-delayで
   順番に表示）はjs/about-comic-reveal.jsが担当。
   2026-09-28、久保さん指示で2列カード版を削除し、この版を正式採用 */
.about-page__comic-demo {
  padding: 72px 0;
}

/* 2026-09-27、久保さん指示で1つ目のセクションの先頭に、上の「Work Linkとは」
   セクションと同じ大見出し（.about-page__intro-title）を追加したため、
   その下のPOINT 01見出しとの間隔を56pxに合わせた */
.about-page__comic-subheading-eyebrow {
  margin-top: 56px;
}

/* 1コマずつスクロールでフワッと表示する演出（共通部品） ============================
   2026-09-29、work-style.htmlの「1日の流れ」漫画でも同じ演出を使うことに
   なったため、about.html専用だった実装(.about-page__comic-reveal/-frame)の
   うち、演出の骨組みだけを汎用クラス(.comic-reveal/.comic-anim/.comic-frame)
   に切り出した。ページごとの列数・コマの出現順は.comic-reveal--2col／
   --3colの修飾クラスで切り替える（about.htmlは左上から順番に、
   work-style.htmlは斜めに広がる順にして、同じ動きの使い回しに見えないように
   している）。
   仕組み（IntersectionObserverで.is-visibleを付与→CSSのtransition-delayで
   順番に表示）はjs/comic-reveal.jsが担当（旧js/about-comic-reveal.jsから改名）。 */
.comic-reveal {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.comic-anim {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.comic-frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
}

/* work-style.htmlのようにコマごとにキャプションを添える場合、グリッドの
   直接の子は<img>ではなく<figure class="comic-figure comic-anim">になる
   （フワッと出現させるcomic-animはこちらに付与する） */
.comic-figure {
  margin: 0;
}

.comic-caption {
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-navy);
  /* 2026-09-30、久保さん指摘で、2行に折り返る際に最後の行が「す。」等
     数文字だけになり不格好に見えていたため追加。2行になるときだけ
     両方の行の文字数バランスを自動でとってくれる指定（対応していない
     古いブラウザでは無視されるだけで、これまで通りの折り返しになる） */
  text-wrap: balance;
}

/* 2026-10-05、久保さん指示：キャプションが「就／職活動」「コミュニケーショ／ン」のように
   単語の途中で折り返されないよう、意味のまとまり（文節）ごとに包む塊。
   塊の途中では折り返さず、塊と塊の間でだけ折り返す（文は変えない）。
   使うのは、flow-manga の一部のキャプションのみ。他の箇所に使うときも同じ要領で */
.comic-caption__phrase {
  display: inline-block;
}

/* 事業所概要・アクセスページのGoogleマップ（2026-10-05）。幅は本文に合わせ、高さは画面幅で調整 */
.company-page__map {
  margin-top: 32px;
}

.company-page__map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 8px;
}

.company-page__map-link {
  margin-top: 12px;
  font-size: 1.4rem;
  text-align: right;
}

@media (max-width: 768px) {
  .company-page__map iframe {
    height: 320px;
  }

  .company-page__map-link {
    text-align: center;
  }
}

/* about.html：就労継続支援A型とは／Work Linkの取り組み（2列×2行、4コマ） */
.comic-reveal--2col {
  grid-template-columns: repeat(2, 1fr);
}

/* 2026-09-27、就労継続支援A型とは(atype)・Work Linkの取り組み(worklink)
   ともに、チャッピーに①〜④を個別の高解像度画像として再生成してもらい、
   8枚とも1612×976の同一サイズに統一されたため、共通のaspect-ratio
   指定にまとめた */
.about-page__comic-frame--atype1,
.about-page__comic-frame--atype2,
.about-page__comic-frame--atype3,
.about-page__comic-frame--atype4,
.about-page__comic-frame--worklink1,
.about-page__comic-frame--worklink2,
.about-page__comic-frame--worklink3,
.about-page__comic-frame--worklink4 {
  aspect-ratio: 1612 / 976;
}

.comic-reveal--2col.is-visible > .comic-anim:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.1s; }
.comic-reveal--2col.is-visible > .comic-anim:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.25s; }
.comic-reveal--2col.is-visible > .comic-anim:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.4s; }
.comic-reveal--2col.is-visible > .comic-anim:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.55s; }

/* work-style.html：1日の流れハイライト（3列×2行、6コマ）。about.htmlと
   同じ動き（左上から順番に）の使い回しに見えないよう、出現順を斜めに
   広がる順番に変えている（1→2・4→3・5→6の順） */
.comic-reveal--3col {
  grid-template-columns: repeat(3, 1fr);
  /* 2026-09-30、久保さん指摘で、コマ同士が横に接近しすぎて狭く見えていたため、
     列の間隔だけ16px→32pxに広げた（縦方向はキャプション分の余白が
     すでにあるため据え置き）。コマ画像はwidth:100%でこの列幅に追従するため、
     間隔を広げた分だけ自動的に少し小さくなる */
  column-gap: 32px;
}

.work-style-page__day-frame {
  aspect-ratio: 4 / 3;
}

.comic-reveal--3col.is-visible > .comic-anim:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.1s; }
.comic-reveal--3col.is-visible > .comic-anim:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.25s; }
.comic-reveal--3col.is-visible > .comic-anim:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.25s; }
.comic-reveal--3col.is-visible > .comic-anim:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.4s; }
.comic-reveal--3col.is-visible > .comic-anim:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.4s; }
.comic-reveal--3col.is-visible > .comic-anim:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.55s; }

/* flow.html：サポート体制（3列×2行、6コマ）。項目は基本的に並列だが、5枚目
   「就職サポート」・6枚目「定着支援」は就職活動中→就職後という時系列の
   ペアになっている。物語というほどではないため、work-style.htmlの斜め演出
   ではなく、about.htmlと同じ左上から素直な順番にしている。
   2026-09-29、当初は5本柱＝5コマで2段目が3コマ中2コマしか埋まらず
   「収まりが悪い」との指摘を受け、内容を追加するのではなく、5本柱目
   「就職サポート」の中に元々含まれていた「就職活動中」「就職後の定着支援」
   の2つの意味をそれぞれ独立したコマに分けて6コマにした（新しい情報を
   作らず、既存の内容を2コマに再構成） */
.comic-reveal--pillars6 {
  grid-template-columns: repeat(3, 1fr);
  /* 2026-09-30、work-style.htmlの.comic-reveal--3colと同じ理由で列間隔を拡大 */
  column-gap: 32px;
}

.flow-page__support-frame {
  aspect-ratio: 1 / 1;
}

.comic-reveal--pillars6.is-visible > .comic-anim:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.1s; }
.comic-reveal--pillars6.is-visible > .comic-anim:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.25s; }
.comic-reveal--pillars6.is-visible > .comic-anim:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.4s; }
.comic-reveal--pillars6.is-visible > .comic-anim:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.55s; }
.comic-reveal--pillars6.is-visible > .comic-anim:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.7s; }
.comic-reveal--pillars6.is-visible > .comic-anim:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.85s; }

/* 2026-09-27、久保さん指示でSEO対策として追加。漫画のセリフは画像内の文字
   なので検索エンジンには拾われないため、同じ内容を目に見えるテキストとしても
   掲載する（about.html専用。work-style.htmlはコマごとに.comic-captionを
   使うため、こちらは使わない）。
   2026-09-27、文字が小さいとの指摘で、「こんな方におすすめです」セクション
   左側の.about-page__target-itemと同じ見た目（font-size 1.6rem・
   font-weight 500・青系のvar(--color-navy)）に変更した */
.about-page__comic-text {
  margin-top: 24px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--color-navy);
  max-width: 720px;
  margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
  .comic-anim {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* スマホ・タブレット幅では、複数列だと文字が読めないほど小さくなるため
   1列の縦積みに変更（work.htmlの.work-page__intro-revealと同じ考え方）。
   --2col/--3colより後ろに書いて、詳細度が同じ場合でもこちらを優先させる */
@media (max-width: 992px) {
  .comic-reveal {
    grid-template-columns: 1fr;
  }
}

/* 3つの想い（私たちの歩み） */
/* 2026-09-23、久保さん指示で「こんな方におすすめです」(.about-page__target)
   と同じ水色の波模様背景に変更。
   2026-09-28、.worriesと同じく「上下だけ波、真ん中は単色」方式に
   変更（詳細は.worriesのコメント参照） */
.about-page__story {
  position: relative;
  padding: 100px 0;
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  isolation: isolate;
}

.about-page__story-title {
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
}

/* 「7つのご支援」「サポート」「ご利用対象の方」「大切にしていること」の
   見出しで共通に使う（.flow-timeline__title等と同じ見た目に統一） */
.about-page__section-title {
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
}

/* 2026-09-28、久保さん指示。about.htmlの「就労継続支援A型とは」
   「Work Linkの取り組み」はh3（大見出し.about-page__intro-title=3.6remの
   下位区分）だが、他ページでh2として使う場合と同じ3.8remのままだと、
   上のh2より下のh3の方が大きく見えてメリハリがなかったため、このページの
   h3だけ小さくした（他ページのh2使用箇所には影響しない） */
h3.about-page__section-title {
  font-size: 2.6rem;
}

.about-page__section-lead {
  font-size: 1.6rem;
  line-height: 1.7;
  color: var(--color-job-text);
  text-align: center;
  margin-top: 16px;
}

/* 右上・左下に飛ばす手書き風の一言。専用の手書きフォント画像を新規に
   作る代わりに、ネイビーの太字＋わずかな傾きでそれらしく見せている
   （実際の手書き風画像に差し替える場合はこのクラスごと置き換える想定） */
.about-page__caption-text {
  margin-top: 32px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  transform: rotate(-1.5deg);
}

/* 「こんな方におすすめです」の手書き風キャプション画像
   （.about-page__caption-textと同じ位置に、テキストの代わりに配置） */
.about-page__target-caption {
  display: block;
  margin: 32px auto 0;
  max-width: 360px;
  width: 100%;
  height: auto;
}

.about-page__story-lead {
  max-width: 720px;
  margin: 16px auto 0;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--color-job-text);
}

.about-page__story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  margin-top: 56px;
}

/* 2026-09-22、久保さん指示でホームの「ご利用までの流れ」(.flow-timeline)
   と同じ丸写真デザインに変更（3つは並列の価値観であり工程ではないため
   矢印はつけていない）。番号バッジ(01/02/03)は久保さんから支給された
   アイコン素材(images/icon-*.png)に差し替えている */
.about-page__story-item {
  text-align: center;
}

.about-page__story-photo {
  position: relative;
}

.about-page__story-photo-inner {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 14px 28px rgba(10, 36, 85, 0.16);
}

.about-page__story-photo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page__story-badge-icon {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  width: 82px;
  height: 82px;
  border-radius: 50%;
  box-shadow: 0 6px 14px rgba(10, 36, 85, 0.18);
  background: var(--color-white);
}

.about-page__story-item-body {
  margin-top: 42px;
}

.about-page__story-item-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 14px;
}

.about-page__story-item-text {
  font-size: 1.7rem;
  color: var(--color-job-text);
  line-height: 1.8;
}

/* 2026-09-23、久保さん指示でテキスト（CSSスタイル文字）から、
   久保さんが用意した手書き風画像に差し替え。元画像は黒背景・不透明
   だったため、輝度をアルファ値として使い黒背景を透過処理している
   （html/images/story-close-caption.png） */
.about-page__story-close {
  margin: 48px auto 0;
  display: block;
  max-width: 340px;
  width: 100%;
  height: auto;
}

/* Work Linkの7つのご支援 */
.about-page__features {
  padding: 100px 0;
  background: var(--color-white);
}

/* 2026-09-22、久保さん指示で7枚を3+3+1(最後の1枚が浮く)から、
   3枚＋4枚の2段グリッドに変更。1段目と2段目で列数が違う(3列/4列)ため、
   1つのgridではなく行ごとに別のgridコンテナに分けている */
.about-page__features-grid {
  display: grid;
  gap: 24px;
}

.about-page__features-grid--row1 {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48px;
}

.about-page__features-grid--row2 {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 24px;
}

.about-page__feature {
  background: var(--color-white);
  border: 1px solid #dfe7f1;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 8px 24px rgba(10, 36, 85, 0.1);
}

.about-page__feature-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
}

/* 写真ありカード（03・05・06・07）。2026-09-22、久保さん指示で
   「テキストの横に小さく」から「テキストの下に横長で」配置に変更 */
.about-page__feature--photo {
  display: flex;
  flex-direction: column;
}

.about-page__feature-body {
  flex: 1;
}

.about-page__feature-photo {
  margin-top: 20px;
  width: 100%;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
}

.about-page__feature-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-page__feature-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 8px;
}

.about-page__feature-text {
  font-size: 1.4rem;
  color: var(--color-job-text);
  line-height: 1.8;
}

/* 「できる」を、自信に変える。2026-09-23、久保さん指示で独立セクション
   から「Work Linkとは」セクション後半のサブブロックに統合。見出しは
   控えめなサイズ、丸写真と4つのステップアイコンを1行に並べている。
   背景は元のセクションと同じ水色の波模様を、角丸パネルとして再現 */
/* 2026-09-23、久保さん指示で「背景パネルが取ってつけた感を出している」との
   指摘を受け、色付き背景・角丸パネルを撤去。カードと同じ白背景のまま自然に
   続くようにし、丸写真の左端が上の2枚カードの左端（コンテナの左端）と
   揃うよう、中央寄せではなく左寄せに変更。あわせて全体のサイズも拡大 */
.about-page__intro-support {
  margin-top: 64px;
}

.about-page__intro-support-title {
  text-align: center;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
}

.about-page__intro-support-lead {
  text-align: center;
  margin-top: 12px;
  font-size: 1.8rem;
  line-height: 1.8;
  color: var(--color-job-text);
}

.about-page__intro-support-action {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.about-page__intro-support-cta {
  height: 56px;
  min-width: 220px;
  justify-content: center;
  padding: 0 30px;
  gap: 20px;
  font-size: 1.7rem;
  font-weight: 600;
}

.about-page__intro-support-arrow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--color-job-blue);
  margin: 89px 2px 0;
}

/* こんな方におすすめです。チェックマークの見た目は.worries__checkを
   そのまま再利用（サイト内で丸背景＋青チェックの表現はここで統一
   しているため）。背景の水色の波模様は.about-page__supportと同じ画像 */
/* 2026-09-23、久保さん指示で下側の背景を消した際、bg-wave-nodots.jpgの
   下端の波模様（実測で左端27%・右端25%の高さまで達する、左右非対称な形）
   が、白フェードで隠しきれず左側にわずかに残ってしまう問題が発生。
   画像下30%を表示範囲外に追いやり、上70%（下の波を含まない部分）だけを
   引き伸ばして使うことで、そもそも下の波が写り込まないようにしていたが、
   この「143%に拡大」自体が上の波を縦方向にさらに歪ませていた。
   2026-09-28、.worriesと同じ「波の部分だけを切り出す」方式に変更し、
   上端の波（bg-wave-top.jpg）だけをbackground-size:100% autoで
   歪みなく表示。下端はそもそも波の画像を使わないため、拡大して隠す
   必要自体がなくなった */
.about-page__target {
  position: relative;
  padding: 100px 0;
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  isolation: isolate;
}

.about-page__target-body {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-top: 48px;
}

/* 2026-09-23、久保さん指摘で「テキストと写真の間の空白が埋まっていない」
   ことが判明。原因はflex:1のまま実際の文字幅より広い見えないボックスを
   確保していたため、写真エリアを広げても隙間の実寸はほぼ変わっていな
   かったこと。文字の実幅に近い固定幅にし、余った分は右の写真エリア
   (flex:1)へ渡すようにした */
.about-page__target-grid {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-page__target-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-navy);
}

/* 2026-09-23、久保さんが共有した参考画像に合わせて再構成。大きなメイン
   写真（左寄り・縦中央、a）＋右側に2枚（上:b、下:c）を縦に重ねて配置。
   その間に手書き風キャプションと、点線の曲線・丸のアクセント・ぼかし
   円の装飾を添え、参考画像の雰囲気に近づけている */
.about-page__target-photos {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 460px;
}

.about-page__target-photo-item {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 8px solid var(--color-white);
  box-shadow: 0 20px 36px rgba(10, 36, 85, 0.15);
  z-index: 2;
}

.about-page__target-photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* メイン写真(about-photo-4.jpg)。女性がやや左寄りにいるため、そこを
   中心にトリミング */
.about-page__target-photo-item--a {
  top: 40px;
  left: 0;
  width: 380px;
  height: 380px;
}

.about-page__target-photo-item--a img {
  object-position: 30% 35%;
}

.about-page__target-photo-item--b {
  top: 0;
  right: 20px;
  width: 220px;
  height: 220px;
}

.about-page__target-photo-item--c {
  bottom: 0;
  right: 120px;
  width: 240px;
  height: 240px;
}

/* 参考画像にある点線の曲線の装飾。写真より奥（z-index低）に配置し、
   控えめなアクセントとして添えている。丸のアクセント（水玉）と、写真cに
   だけ付いていたぼかし円は、他の写真とバランスが取れずおかしく見える
   との久保さん指摘を受け、2026-09-23に削除した */

.about-page__target-decor-line {
  position: absolute;
  top: 0;
  left: 60px;
  width: 340px;
  height: 260px;
  z-index: 1;
  opacity: 0.6;
}

@media (max-width: 992px) {
  .about-page__intro-title {
    font-size: 2.6rem;
  }

  .about-page__story,
  .about-page__features,
  .about-page__target {
    padding: 64px 0;
  }

  .about-page__story-title,
  .about-page__section-title {
    font-size: 2.6rem;
  }

  .about-page__story-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .about-page__story-photo-inner {
    max-width: 290px;
  }

  /* 2026-09-29、992px以下でいきなり1列だと、work.htmlの「できる仕事」
     （992px以下でまず2列→600px以下で1列）と揃っていなかったため、
     同じ2段階に変更。600px以下の1列化は下のメディアクエリで指定 */
  .about-page__features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-page__target-body {
    flex-direction: column;
  }

  .about-page__target-grid {
    flex: 0 0 auto;
    width: 100%;
  }

  /* スマホ幅では、大きなメイン写真＋右上下2枚の構成をひとまわり小さい
     サイズに縮小し、中央寄せにする。手書き風キャプションは写真の下に
     場所を移し、点線の曲線装飾は小さすぎて見えづらいため非表示にする */
  .about-page__target-photos {
    flex: 0 0 auto;
    /* 2026-09-29、width: 300px固定だと320px幅の端末で.containerの左右余白24px×2を
       引いた実質幅(272px)からはみ出て一部が見切れていたため、画面幅に収まる
       場合はそのまま300pxを使い、収まらない場合だけ画面幅に合わせる */
    width: min(300px, 100%);
    height: 370px;
    margin: 0 auto;
  }

  .about-page__target-photo-item--a {
    top: 20px;
    left: 0;
    width: 210px;
    height: 210px;
  }

  .about-page__target-photo-item--b {
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
  }

  .about-page__target-photo-item--c {
    bottom: 10px;
    right: 25px;
    width: 130px;
    height: 130px;
  }

  .about-page__target-decor-line {
    display: none;
  }

  .about-page__intro-support-title {
    font-size: 2.6rem;
  }

  .about-page__intro-support-lead {
    font-size: 1.6rem;
  }

  .about-page__intro-support-cta {
    height: 54px;
    font-size: 1.6rem;
  }

  .about-page__intro-support-arrow {
    transform: rotate(90deg);
    margin: 0;
  }
}

/* 2026-09-29、work.htmlの「できる仕事」と列数の段階を揃えるため追加 */
@media (max-width: 600px) {
  .about-page__features-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   仕事内容（/work/）
   --------------------------------------------------------------------------
   2026-09-24、旧資料/content.mdの原稿をもとに新規作成。漫画_2・3を末尾に
   1枚絵で置く原案は不採用とし、各セクションに分散配置する方針のため、
   漫画が入る箇所は全て.work-page__illustration-placeholder（グレー仮置き）。
   サイズ・比率が固まったらチャッピーへ再生成／新規生成を依頼する予定。
   ========================================================================== */

/* セクション1：ページ見出し直下のリード文。about-page__intro-support-textを
   参考に、写真もカードもないシンプルなテキストブロックとして新設 */
.work-page__intro {
  padding: 72px 0 0;
}

.work-page__intro-text {
  margin-top: 20px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--color-job-text);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

/* 先頭の導入ビジュアル（会話シーン＋支援の流れ＋Step1〜4の6コマ、
   上段2つ＋下段4つ）。上段は.worries__manga-gridと同じ「flex-growに
   縦横比(幅÷高さ)を指定→幅が比率配分され、高さが自動で揃う」手法で、
   久保さんのトリミング構図（横並び）を再現。下段4枚は縦横比が揃っている
   ため単純な4等分。スクロール表示演出も同じ考え方
   （js/work-intro-reveal.jsが.work-page__intro-revealに.is-visibleを付与） */
/* 2026-09-25、久保さん指示で上段（会話シーン＋支援の流れ）と下段（Step1〜4）の
   間隔を広げた（8px→32px）。行内（写真同士・Step同士）の間隔は8pxのまま */
.work-page__intro-reveal {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}

.work-page__intro-reveal-row {
  display: flex;
  gap: 8px;
}

.work-page__intro-frame {
  display: block;
  min-width: 0;
  height: auto;
  border-radius: 14px;
  object-fit: cover;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 2026-09-25、久保さん指示でチャッピーに2枚を同じサイズで再生成してもらった
   （旧: scene1=1789×879・比率2.035、scene2=1886×834・比率2.261で異なって
   いたため、flex-growの配分比率も左右で違っていた）。新しい実寸は
   両方とも1672×941で完全に一致するため、flex-growも揃えて均等幅にした */
.work-page__intro-frame--1,
.work-page__intro-frame--2 {
  flex: 1 1 0%; /* 実寸1672×941（2枚とも同一） */
  aspect-ratio: 1672 / 941;
}

.work-page__intro-frame--3,
.work-page__intro-frame--4,
.work-page__intro-frame--5,
.work-page__intro-frame--6 {
  flex: 1 1 0%; /* 実寸4枚とも1374×1145で揃っているため単純に4等分 */
  aspect-ratio: 1374 / 1145;
}

.work-page__intro-reveal.is-visible .work-page__intro-frame--1 { opacity: 1; transform: none; transition-delay: 0.1s; }
.work-page__intro-reveal.is-visible .work-page__intro-frame--2 { opacity: 1; transform: none; transition-delay: 0.25s; }
.work-page__intro-reveal.is-visible .work-page__intro-frame--3 { opacity: 1; transform: none; transition-delay: 0.4s; }
.work-page__intro-reveal.is-visible .work-page__intro-frame--4 { opacity: 1; transform: none; transition-delay: 0.55s; }
.work-page__intro-reveal.is-visible .work-page__intro-frame--5 { opacity: 1; transform: none; transition-delay: 0.7s; }
.work-page__intro-reveal.is-visible .work-page__intro-frame--6 { opacity: 1; transform: none; transition-delay: 0.85s; }

@media (prefers-reduced-motion: reduce) {
  .work-page__intro-frame {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* スマホ・タブレット幅では、横並びだと文字が読めないほど小さくなるため
   縦積みに変更（漫画_1〜3のレスポンシブ対応と同じ考え方） */
@media (max-width: 992px) {
  .work-page__intro-reveal-row {
    flex-direction: column;
  }

  .work-page__intro-frame--1,
  .work-page__intro-frame--2,
  .work-page__intro-frame--3,
  .work-page__intro-frame--4,
  .work-page__intro-frame--5,
  .work-page__intro-frame--6 {
    flex: none;
    width: 100%;
  }
}

/* セクション2：Work Linkでできる5つの仕事 */
/* 2026-09-24、久保さん指示で他ページと同じ水色の波模様背景に変更。
   2026-09-28、.worriesと同じく「上下だけ波、真ん中は単色」方式に
   変更（詳細は.worriesのコメント参照） */
.work-page__jobs {
  position: relative;
  padding: 72px 0 100px;
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  isolation: isolate;
}

.work-page__jobs > .container {
  position: relative;
  z-index: 1;
}

/* 2026-09-25、久保さん指示でトップページの丸抜き写真版デザインに統一するため
   3列×2段（6枚）に変更。それに伴い旧--row1（2枚）/--row2（3枚）の
   modifierは廃止した */
.work-page__jobs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* 2026-09-25、写真サイズをトップページと同じ320pxに揃えたところ上下の
     カード間隔が窮屈になったため、row-gapもトップページの.jobs-circle__grid
     と同じ60pxに揃えた */
  gap: 60px 24px;
  margin-top: 48px;
  /* 2026-09-25、久保さん指示でひとことコメントを1行に収めるため、このセクションの
     グリッドだけ.containerの左右padding（68px）に少しめり込ませて実際に使える幅を
     広げていたが、68px→46px→36px→24px→0pxまで縮小を重ね、最終的に
     .containerのpaddingをそのまま使う形に戻した（グリッド自体の拡張はなし）。
     ひとことコメントが1行に収まる幅は1432px以上に縮んだため、それ未満は
     下の.work-page__job-card-quoteの折り返し許可ラインで吸収している */
  margin-left: 0;
  margin-right: 0;
}

/* 2026-09-25、久保さん指示でカードの白背景・枠線・box-shadowを撤廃。
   トップページの.jobs-circle__cardと同じ「枠なし」の見た目にし、
   写真＋テキストだけが並ぶ構成にした */
/* 2026-09-25、久保さん指摘で、本文テキストがカード幅いっぱい（3列で約420px）
   まで広がり隣のカラムと近く見えていたため、左右にpaddingを追加してテキスト幅を
   狭めた。折り返しが増えて縦に伸びる分で横方向の余白をカバーする方針 */
/* 2026-09-25、久保さん指示で本文・タグの幅だけを狭め、折り返しが増える分は
   縦に伸びてよいことになった。ひとことコメントだけは1行を保ちたいため、
   このpaddingは.work-page__job-card-quote側でnegative marginにより
   打ち消している（下記参照） */
.work-page__job-card {
  display: flex;
  flex-direction: column;
  padding: 0 24px;
}

.work-page__job-card-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
}

/* 2026-09-25、丸抜き写真版デザインへの統一に伴い、写真＋アイコンバッジ部分は
   .jobs-circle__media一式をそのまま再利用（重複実装を避けるため）。
   2026-09-25、久保さん指示でサイズもトップページと完全に統一（一度180pxに
   縮小したが「狭く感じる」とのことで320pxに戻した）。3列グリッドでも
   1カラムの実幅は約420px（コンテナ1304px÷3−gap）あり、320pxの写真は
   問題なく収まる。タイトルはmediaの直下に来るため、中央寄せ用の
   --circle修飾を追加した */
.work-page__job-card .jobs-circle__media {
  max-width: 320px;
  margin: 0 auto 16px;
}

.work-page__job-card-title--circle {
  text-align: center;
  margin-bottom: 14px;
}

.work-page__job-card-text {
  margin-top: 14px;
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--color-job-text);
}

.work-page__job-card-tags {
  margin-top: 12px;
}

/* 2026-09-25、久保さん指摘でデフォルトのdiscマーカーがカード幅の外に
   はみ出して見えていたため、.work-page__types-list li::beforeと同じ
   「青い丸」の自前マーカーに変更した */
.work-page__job-card-tags li {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-job-text);
  list-style: none;
  position: relative;
  padding-left: 18px;
}

.work-page__job-card-tags li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-job-blue);
}

/* 2026-09-25、久保さん指示で「1行に収める」より「本文・リストと枠の左右を
   ぴったり揃える」ことを優先する方針に変更（テキストが2行になるのは了承済み）。
   negative marginやalign-self: flex-start・white-space: nowrapは全て廃止し、
   親.work-page__job-cardのデフォルトのalign-items: stretchにまかせて、
   本文・タグと同じ幅（カードのcontent box幅）にそのまま揃えている */
.work-page__job-card-quote {
  margin-top: 14px;
  padding: 10px 12px;
  background: #eef4fc;
  border-radius: 10px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.6;
}

.work-page__job-card-note {
  margin-top: 10px;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--color-job-text);
  opacity: 0.8;
}

.work-page__jobs-note {
  margin-top: 32px;
  font-size: 1.4rem;
  color: var(--color-job-text);
  text-align: center;
  opacity: 0.8;
}

/* セクション3：パソコンが苦手でも大丈夫 */
/* 2026-09-24、久保さん指示で背景を白に変更 */
.work-page__pcok {
  padding: 100px 0;
  background: var(--color-white);
}

.work-page__pcok-text {
  margin-top: 20px;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--color-job-text);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.work-page__pcok-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}

.work-page__pcok-step {
  flex: 0 0 auto;
  width: 240px;
  text-align: center;
}

/* 2026-09-24、チャッピーへ発注したSTEP1〜3・NEXT STEPのイラストを反映
   （1254x1254の正方形。仮置き時代の--squareと同じ比率のため、
   object-fit: coverでそのまま収まる） */
.work-page__pcok-media {
  width: 100%;
  margin: 0 auto 14px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
}

.work-page__pcok-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work-page__pcok-step-label {
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic;
  color: var(--color-job-blue);
}

.work-page__pcok-step--next .work-page__pcok-step-label {
  color: var(--color-job-orange);
}

.work-page__pcok-step-text {
  margin-top: 6px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.6;
}

.work-page__pcok-close {
  margin-top: 40px;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-job-text);
  text-align: center;
}

/* 2026-09-30、久保さん指摘で、4コマが固定240px幅のため他セクション
   （JOBS・STEP UPのグリッド）より横幅が狭く見えていた問題に対応。
   993px以上（タブレット・スマホ用のcolumn化が始まる992px以下は対象外）
   では固定幅をやめ、矢印を除いた残り幅を4つで均等に分け合う形にし、
   コンテナの横幅いっぱいまで広がるようにした */
@media (min-width: 993px) {
  .work-page__pcok-step {
    flex: 1 1 0;
    width: auto;
  }
}

/* 2026-09-23、チャッピーへ発注したStep1〜4のイラストを反映（1355x1161＝
   比率約7:6。仮置き時代の--wideと同じ比率だったため、object-fit: coverで
   ほぼそのまま収まる） */

.work-page__types {
  margin-top: 72px;
  text-align: center;
}

.work-page__types-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--color-navy);
}

.work-page__types-lead {
  margin-top: 10px;
  font-size: 1.6rem;
  color: var(--color-job-text);
}

/* 2026-09-24、画像プレースホルダー＋キャプションのカード形式から
   テキストのみのリストに変更。横一列に並べ、区切りに縦線を挟む */
.work-page__types-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 20px;
  max-width: 720px;
  margin: 24px auto 0;
}

.work-page__types-list li {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.5;
  position: relative;
  padding-left: 22px;
}

.work-page__types-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-job-blue);
}

.work-page__types-close {
  margin-top: 32px;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-job-text);
  max-width: 640px;
  margin-inline: auto;
}

/* ==========================================================================
   work-style.html（Work Linkでの働き方ページ）専用スタイル
   見出し・リード・本文・締め文・注釈は既存の共通クラス
   （about-page__section-title等・work-page__pcok-text等）をそのまま流用し、
   ここではこのページ固有のレイアウト（幅の調整・表）だけを追加している。
   タイムライン自体の見た目（時刻・ドット・タイトル・本文）はホームの
   .work-styleセクションと同じ.work-style__timeline系クラスを再利用（複製しない）
   ========================================================================== */

.work-style-page__schedule {
  padding: 100px 0;
  background: var(--color-white);
}

/* ホームの.work-style__grid（2カラム）とは違い、このページは1カラムのため
   タイムラインの横幅だけを読みやすい幅に絞って中央寄せする */
.work-style-page__timeline-list {
  max-width: 640px;
  margin: 40px auto 0;
}

/* 2026-09-28、.worriesと同じく「上下だけ波、真ん中は単色」方式に
   変更（詳細は.worriesのコメント参照）。
   2026-09-30、久保さん指摘で.work-page__jobs等と違い、境目を白くぼかす
   ::before/::afterの対象にposition:relativeが付いていなかったため、
   波の縁が隣接セクションとくっきり途切れて見えていた。position:relative
   を追加し、::before/::afterの対象セレクタにもこのクラスを加えた */
.work-style-page__reasons {
  position: relative;
  padding: 72px 0 100px;
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
}

.work-style-page__reasons-list {
  margin-top: 32px;
}

.work-style-page__conditions {
  padding: 100px 0;
  background: var(--color-white);
}

.work-style-page__table {
  width: 100%;
  max-width: 720px;
  margin: 40px auto 0;
  border-collapse: collapse;
  /* 2026-10-02、久保さん指示で薄い外枠を追加（外枠が無く、白い背景に表が溶けて見えたため）。
     同日、久保さん指示で角丸は外し、四角い枠にした。行ごとの区切り線（th/tdのborder-bottom）は従来どおり */
  border: 1px solid #dde4ec;
  font-size: 1.5rem;
}

.work-style-page__table th,
.work-style-page__table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid #e3e8ef;
  vertical-align: top;
}

.work-style-page__table th {
  width: 160px;
  color: var(--color-navy);
  font-weight: 700;
  background: #f6f9fc;
}

.work-style-page__table td {
  color: var(--color-job-text);
}

.work-style-page__table tr:last-child th,
.work-style-page__table tr:last-child td {
  border-bottom: none;
}

/* 社長への確認待ちの項目（勤務時間・勤務日・給与・休日・勤務地）を
   「●」で仮置きしていることが一目で分かるよう、控えめなグレーにして
   「確認中」ラベルを添える（2026-09-24、久保さん指示） */
.work-style-page__table-tbd {
  color: #9aa5b1;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.work-style-page__table-tbd-label {
  margin-left: 10px;
  font-size: 1.2rem;
  font-weight: 500;
  color: #9aa5b1;
}

.work-style-page__conditions-button {
  margin-top: 40px;
  text-align: center;
}

.work-style-page__manga {
  padding: 0 0 100px;
  background: var(--color-white);
}

/* セクション2「1日の流れ」の2カラム版。左3:右2でテキストのタイムラインと
   丸抜き実写写真を並べる */
.work-style-page__schedule-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 40px;
  max-width: 960px;
  margin: 40px auto 0;
}

.work-style-page__timeline-list--grid {
  max-width: none;
  margin: 0;
}

.work-style-page__timeline-photo {
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid var(--color-white);
  box-shadow: 0 14px 24px rgba(10, 36, 85, 0.15);
}

.work-style-page__timeline-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* トップページの.work-style__media等と同じ「実写の丸抜き写真」を、
   時間帯の数（9個）とは対応させず、position:absoluteで手動でランダム風に
   散らして配置している。4枚ともホームで使用済みの実写素材を流用（新規の
   画像調達はしていない） */
.work-style-page__timeline-photos--scatter {
  position: relative;
  min-height: 760px;
}

.work-style-page__timeline-photos--scatter .work-style-page__timeline-photo {
  position: absolute;
}

.work-style-page__timeline-photo--a {
  top: 0;
  left: 30px;
  width: 190px;
  height: 190px;
}

.work-style-page__timeline-photo--b {
  top: 210px;
  left: 150px;
  width: 230px;
  height: 230px;
}

.work-style-page__timeline-photo--c {
  top: 480px;
  left: 0;
  width: 170px;
  height: 170px;
}

.work-style-page__timeline-photo--d {
  top: 590px;
  left: 170px;
  width: 210px;
  height: 210px;
}

@media (max-width: 900px) {
  .work-style-page__schedule-grid {
    grid-template-columns: 1fr;
  }

  .work-style-page__timeline-photos {
    display: none;
  }
}

@media (max-width: 768px) {
  .work-style-page__schedule,
  .work-style-page__conditions {
    padding: 60px 0;
  }

  .work-style-page__reasons {
    padding: 48px 0 60px;
  }

  .work-style-page__manga {
    padding: 0 0 60px;
  }
}

/* 幅の狭い画面ではth/tdを横並びのまま維持すると窮屈になるため、
   1行=1ブロックの縦積みに切り替える（実データが入る<table>のままなので
   スクリーンリーダーの読み上げ順は保たれる） */
@media (max-width: 600px) {
  .work-style-page__table,
  .work-style-page__table tbody,
  .work-style-page__table tr,
  .work-style-page__table th,
  .work-style-page__table td {
    display: block;
    width: auto;
  }

  .work-style-page__table tr {
    padding-top: 12px;
  }

  .work-style-page__table th {
    background: none;
    padding-bottom: 4px;
    border-bottom: none;
  }

  .work-style-page__table td {
    padding-top: 0;
    padding-bottom: 16px;
  }
}

/* ==========================================================================
   flow.html（ご利用までの流れページ）専用スタイル
   セクション2の6ステップはホームの.flow-timeline系クラスをそのまま再利用
   （複製しない）。ここではセクション単位の余白と、このページ固有の
   新規コンポーネント（8段のステップ・2択カード）だけを追加している
   ========================================================================== */

.flow-page__steps {
  padding: 100px 0 70px;
  background: var(--color-white);
}

/* 2026-09-28、.worriesと同じく「上下だけ波、真ん中は単色」方式に
   変更（詳細は.worriesのコメント参照）。
   2026-09-30、久保さん指摘で.work-page__jobs等と違い、境目を白くぼかす
   ::before/::afterの対象にposition:relativeが付いていなかったため、
   波の縁が隣接セクションとくっきり途切れて見えていた。position:relative
   を追加し、::before/::afterの対象セレクタにもこのクラスを加えた */
.flow-page__ladder-section {
  position: relative;
  padding: 72px 0 100px;
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
}

.flow-page__ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 40px auto 0;
  list-style: none;
}

.flow-page__ladder-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(10, 36, 85, 0.1);
}

.flow-page__ladder-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-job-blue);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.3rem;
}

.flow-page__ladder-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-navy);
}

/* お問い合わせページ最下部の案内文(.contact-page__sidebar-note-title)も、この見出しと同じ文字にそろえている */
.flow-page__branch-title,
.contact-page__sidebar-note-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-navy);
  text-align: center;
}

.flow-page__branch-title {
  margin-top: 56px;
}

/* 言葉のまとまりごとに折り返す（スマホ幅で文の途中で切れないように） */
.contact-page__sidebar-note-title span {
  display: inline-block;
}

.flow-page__branch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 32px auto 0;
}

.flow-page__branch-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 14px 30px rgba(10, 36, 85, 0.1);
}

.flow-page__branch-card-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 12px;
}

.flow-page__branch-card-text {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-job-text);
}

/* 漫画_5.png実測値（1536x1024=3:2）に合わせた比率 */

@media (max-width: 768px) {
  .flow-page__steps {
    padding: 60px 0 40px;
  }

  .flow-page__ladder-section {
    padding: 48px 0 60px;
  }

  .flow-page__ladder {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow-page__branch-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .flow-page__ladder {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 992px) {
  .work-page__jobs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 2026-09-25、992px以下は.containerのpaddingが68px→24pxに減るため、
       PC幅用の-46pxのnegative marginがpaddingを大きく超え、テキストが
       画面端からはみ出して見切れてしまっていた。タブレット・スマホ幅では
       このnegative marginを使わずcontainerのpaddingの範囲内に収める */
    margin-left: 0;
    margin-right: 0;
  }

  .work-page__pcok-row {
    flex-direction: column;
    align-items: center;
  }

  .work-page__pcok-row .about-page__intro-support-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }

  .work-page__intro,
.work-page__jobs,
.work-page__pcok {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* 2026-09-29、about.htmlの「7つのご支援」と列数の段階を揃えるため
   560px→600pxに変更 */
@media (max-width: 600px) {
  .work-page__jobs-grid {
    grid-template-columns: 1fr;
  }

  .work-page__types-title {
    font-size: 2.4rem;
  }
}

/* ==========================================================================
   よくあるご質問ページ（/faq/）
   --------------------------------------------------------------------------
   2026-09-27、サブエージェントが新規作成。トップページの.faqセクション
   （実装済み・5問）で使っているアコーディオン部品（.faq__list／.faq__details／
   .faq__question／.faq__answer／.faq__q-badge／.faq__a-badge等）とデコレーション
   画像（.faq__media／.faq__photo／.faq__bubble／.faq__handwritten）は既存の
   ブロックを一切変更せずそのまま再利用。ここでは、質問数が5問から増える
   （カテゴリ分けした20問）ことに合わせて必要になった、ページ専用のレイアウト
   用クラスだけを追加している（トップページの.faq__body・.faq__cta等は
   5問固定の横並びレイアウト用のため、このページでは使っていない） */

/* ページバナー。他の下位ページと同じ.page-bannerを再利用し、背景写真は
   専用素材が無いため、about.htmlで使用中のfeature-consult.jpg（相談風景の
   写真）を「よくあるご質問＝相談ごと」のテーマに近いものとして流用した。
   専用の背景写真が用意できた場合は差し替えを検討 */
.page-banner--faq {
  background-image: url("assets/images/page-banner-faq.jpg");
  /* 2026-10-01、久保さん指示で、帯では顔をあえて出さない構図(手元・体・小物中心)にするため縦位置を調整 */
  background-position: center 85%;
}

/* セクション1：ページ導入（FAQという文言＋リード文＋スタッフ写真）。
   写真は.faq__media／.faq__photoをそのまま再利用するため、ここでは
   横並びにするための親コンテナだけを新規定義している。
   2026-09-28、久保さん指示で、吹き出し(.faq__bubble)はこのページでは
   非表示にした（トップページの.faqセクションでは引き続き使用）。
   あわせて、写真の天端にリード文を揃えるflex-start指定だと写真に対して
   テキストの位置が浮いて見えたため、写真の縦中央にテキストが揃うよう
   centerに変更した。
   2026-09-28、さらに久保さん指示で、上の見出し（よくある質問）・下の
   カテゴリ見出し（ご利用について等）はどちらもページ中央に揃っているのに
   対し、リード文だけ写真の横幅分だけ右にずれた位置が中央になっていて
   おかしいとの指摘。text-align:centerだけでは「写真を除いた残りの領域」の
   中で中央になるだけで、ページ全体の中央とは一致しないため、flexから
   グリッドに変更し、写真と同じ310px幅の空列を右側にも用意することで、
   中央の列（リード文）がページ全体の中央と一致するようにした */
.faq-page__intro {
  padding: 100px 0 72px;
}

.faq-page__intro-inner {
  display: grid;
  grid-template-columns: 310px 1fr 310px;
  align-items: center;
  gap: 48px;
  margin-top: 32px;
}

/* 吹き出しがない分、次のカテゴリ見出しとの間隔を.faq__media（写真のみ）の
   実際の高さに合わせて詰める（元の100px/80pxは吹き出しのはみ出し分の
   余白のため、このページでは不要） */
@media (max-width: 992px) {
  .faq-page__intro .faq__media {
    margin-bottom: 0;
  }
}

.faq-page__intro-text {
  grid-column: 2;
  font-family: var(--font-sans);
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--color-job-text);
  text-align: center;
}

/* 2026-09-30、久保さん指示で旧セクション3(.faq-page__closing)の手書き
   キャプションをここへ移設。左側の写真(.faq__media、310px)と対になる
   右側の空列(310px)に収め、写真とのバランスを取る */
.faq-page__intro-caption {
  grid-column: 3;
  width: 300px;
  max-width: 100%;
  justify-self: center;
}

/* 2026-09-28、久保さん指摘・検証で発見：.faq-page__intro-innerは
   310px(写真)＋1fr(リード文)＋310px(見出しを中央に見せるための空白列)の
   3カラムグリッドのため、992px超〜約1300px幅ではリード文の実質幅が
   150px程度まで圧迫され、1〜2文字ずつ縦に折り返るほど窮屈になっていた
   （ヘッダーのナビ修正・.faq__body（トップページ）と同じ帯で発生）。
   992px以下と同じ「写真を上・リード文を下に積む」構成をこの帯でも使う */
@media (min-width: 993px) and (max-width: 1300px) {
  .faq-page__intro-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
}

/* セクション2：カテゴリ別Q&A。カテゴリごとに見出し＋.faq__list（再利用）を
   縦に積む。.faq__listは元々.faq__body（flex）の子要素として
   flex-basis/max-widthを指定されているが、flexの親を持たない場所で使っても
   max-width:980pxはそのまま効くため、margin:0 autoで中央寄せするだけでよい */
.faq-page__categories {
  padding-bottom: 96px;
}

.faq-page__category {
  margin-bottom: 72px;
}

.faq-page__category:last-child {
  margin-bottom: 0;
}

.faq-page__category-title {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 28px;
}

.faq-page__category .faq__list {
  margin: 0 auto;
}

/* 回答文中に「仕事内容」「ご利用までの流れ」ページへのリンクを含む項目がある
   （トップページの5問には元々リンクを含む回答が無いため、このルールが
   影響するのはこのページの新規回答のみ）。全体のaタグリセット
   （color: inherit; text-decoration: none;）のままだとリンクだと分からない
   ため、ここだけ色と下線を付けて分かるようにする */
.faq__answer a {
  color: var(--color-job-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 992px) {
  .faq-page__intro {
    padding: 64px 0 48px;
  }

  .faq-page__intro-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .faq-page__categories {
    padding-bottom: 64px;
  }

  .faq-page__category {
    margin-bottom: 48px;
  }

  .faq-page__category-title {
    font-size: 2.2rem;
  }
}

/* ============================================================
   contact.html（見学・相談ページ）
   2026-09-27、新規作成。フォーム用のスタイルはこのページで初めて
   必要になったため、既存クラスの流用ではなく新規に定義した。
   同日、「デザインが単調」というフィードバックを受けて全面改訂：
   ・用件選択をカード型ラジオからプルダウンに変更
   ・セクション背景を.about-page__support等サイト全体で使っている
     水色の波模様（#e9f7ff + bg-wave-nodots.jpg）に統一し、フォームは
     白カード＋影で浮かせて単色べた塗りの単調さを解消
   ・フォーム単体だと情報が薄いため、icon-consult.png（about.htmlで
     使用中の相談アイコンを流用）を使った「お電話でのお問い合わせ」
     カードを追加し、実用的な情報を増やしてボリュームを持たせた
   さらに同日、久保さん指示で再修正：
   ・イントロ末尾の手書き風キャプションは、他ページ（about.html）の
     斜め文字と違い「斜めにしなくていい」とのことで、このページだけ
     .contact-page__intro内で.about-page__caption-textのtransformを
     打ち消した
   ・フォームとお電話カードの2カラム配置が「いや」とのことで、
     .contact-page__gridをflex-direction:columnにして1カラム縦積みに
     変更（サイドバーのカード幅固定(flex: 0 0 300px)も解除し、
     フォームカードと同じ幅で縦に並ぶようにした）
   ============================================================ */

.page-banner--contact {
  background-image: url("assets/images/feature-visit.jpg");
  /* 2026-10-01、久保さん指示で、帯では顔をあえて出さない構図(手元・体・小物中心)にするため縦位置を調整 */
  background-position: center 95%;
}

.contact-page__intro {
  padding: 100px 0 64px;
  text-align: center;
}

.contact-page__intro .about-page__section-lead {
  max-width: 720px;
  margin: 16px auto 0;
}

.contact-page__intro .about-page__caption-text {
  transform: none;
}

/* 2026-09-28、.worriesと同じく「上下だけ波、真ん中は単色」方式に
   変更（詳細は.worriesのコメント参照） */
.contact-page__form-section {
  padding: 96px 0 120px;
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
}

.contact-page__grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 840px;
  margin: 0 auto;
}

.contact-page__form-card {
  width: 100%;
  background: var(--color-white);
  border-radius: 24px;
  padding: 56px 48px;
  box-shadow: 0 24px 60px rgba(10, 36, 85, 0.1);
}

.contact-page__badge {
  font-size: 1.1rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  line-height: 1.6;
}

.contact-page__badge--required {
  background: rgba(253, 87, 109, 0.12);
  color: var(--color-pink);
}

.contact-page__badge--optional {
  background: rgba(51, 51, 51, 0.08);
  color: var(--color-job-text);
}

/* ==========================================================================
   お問い合わせフォーム（プラグイン Snow Monkey Forms が出力する.smf-*）の見た目
   --------------------------------------------------------------------------
   2026-10-02、静的HTML版の<form>（.contact-page__*）を、確認画面・送信完了画面つきの
   Snow Monkey Formsに差し替えた。プラグインが出すクラス名（.smf-*）に対して、
   静的HTML版と同じ見た目（用件・氏名＋電話は2列・メール・内容・同意・水色の丸ボタン）に
   なるよう、上の.contact-page__*と同じ値を当てている。
   詳細度を上げるため、すべて.contact-page__form-cardの配下に限定して書いている
   （プラグイン側のCSSや、Lightningの`input[type=text]`等に負けないように）。
   ========================================================================== */
.contact-page__form-card .smf-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

/* 1項目 = 1行（静的HTML版の.contact-page__field）。氏名(2番目)と電話番号(3番目)だけ半分ずつ横並び */
.contact-page__form-card .smf-item {
  display: block;
  grid-column: 1 / -1;
  margin: 0 0 32px;
  padding: 0;
  border: none;
}

.contact-page__form-card .smf-item:nth-child(2),
.contact-page__form-card .smf-item:nth-child(3) {
  grid-column: auto;
}

.contact-page__form-card .smf-item__col {
  width: 100%;
  max-width: none;
  padding: 0;
  flex: none;
}

/* ラベル（用件・氏名など）。「必須」「任意」バッジはラベルの文字の中に入れてある */
.contact-page__form-card .smf-item__label {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.contact-page__form-card .smf-item__label label,
.contact-page__form-card .smf-item__label__text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.contact-page__form-card .smf-item__description {
  margin: -4px 0 12px;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-job-text);
}

.contact-page__form-card .smf-item__description a {
  color: var(--color-job-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-page__form-card .smf-item__controls {
  margin: 0;
  padding: 0;
  /* 確認画面では、入力内容が文字として並ぶ。bodyの10pxを継承して小さくなるため、読みやすい大きさにする */
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--color-navy);
  overflow-wrap: anywhere;
}

/* 入力欄・テキストエリア・プルダウンの共通の見た目 */
.contact-page__form-card .smf-text-control__control,
.contact-page__form-card .smf-textarea-control__control,
.contact-page__form-card .smf-select-control__control {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: normal;
  color: var(--color-navy);
  padding: 14px 18px;
  border: 2px solid rgba(10, 36, 85, 0.14);
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-page__form-card .smf-text-control__control::placeholder,
.contact-page__form-card .smf-textarea-control__control::placeholder {
  font-weight: 400;
  color: rgba(51, 51, 51, 0.4);
}

.contact-page__form-card .smf-text-control__control:focus,
.contact-page__form-card .smf-textarea-control__control:focus,
.contact-page__form-card .smf-select-control__control:focus {
  outline: none;
  border-color: var(--color-blue-dark);
  box-shadow: 0 0 0 4px rgba(92, 198, 242, 0.18);
}

.contact-page__form-card .smf-textarea-control__control {
  resize: vertical;
}

/* プルダウン：標準の矢印を消し、色付きの矢印（.smf-select-control__toggle）を重ねる */
.contact-page__form-card .smf-select-control {
  position: relative;
  display: block;
}

.contact-page__form-card .smf-select-control__control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  cursor: pointer;
}

.contact-page__form-card .smf-select-control__toggle {
  position: absolute;
  top: 50%;
  left: auto;
  right: 22px;
  width: 10px;
  height: 10px;
  margin: 0;
  background: none;
  border-right: 2px solid var(--color-navy);
  border-bottom: 2px solid var(--color-navy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.contact-page__form-card .smf-select-control__toggle::before,
.contact-page__form-card .smf-select-control__toggle::after {
  content: none;
}

/* プライバシーポリシー同意のチェックボックス */
.contact-page__form-card .smf-checkboxes-control__control .smf-label label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  color: var(--color-job-text);
  cursor: pointer;
}

.contact-page__form-card .smf-checkbox-control {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.contact-page__form-card .smf-checkbox-control__control {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: var(--color-pink);
}

/* ボタン（入力内容を確認する／戻る／送信する）。静的HTML版の送信ボタン(.hero__btn--blue)と同じ水色の丸ボタン */
.contact-page__form-card .smf-action {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.contact-page__form-card .smf-action .smf-button-control__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  height: 61px;
  margin: 0;
  padding: 0 27px;
  font-family: var(--font-sans);
  font-size: 2.07rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-blue-light), var(--color-blue-dark));
  border: none;
  border-radius: 999px;
  box-shadow: none;
  cursor: pointer;
}

/* 「戻る」は目立たせすぎない（白地に水色の枠線） */
.contact-page__form-card .smf-action .smf-button-control__control[data-action="back"] {
  color: var(--color-job-blue);
  background: var(--color-white);
  border: 2px solid var(--color-blue-dark);
}

/* 入力エラーの表示（未入力・形式の誤り） */
.contact-page__form-card .smf-error-messages {
  margin: 8px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-pink);
}

/* メール送信失敗などのシステムエラー表示（プラグインが「管理者メールの送信に失敗しました」等を出す箇所） */
.contact-page__form-card .smf-system-error-content {
  padding: 24px 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2;
  text-align: center;
  color: var(--color-pink);
}

/* 送信完了画面。フォームの2列レイアウト(.smf-formのgrid)の中に入るため、2列ぶん幅いっぱいに広げる */
.contact-page__form-card .smf-form > .smf-complete-content {
  grid-column: 1 / -1;
}

.contact-page__form-card .contact-page__complete-title {
  margin: 0 0 24px;
  font-family: var(--font-sans);
  font-size: 2.4rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-navy);
}

.contact-page__form-card .contact-page__complete-text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
  color: var(--color-job-text);
}

/* サイドバー：お電話でのお問い合わせカード＋一言メッセージカード */
.contact-page__sidebar {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 1カラム化に伴い、840px幅いっぱいのカードだとアイコン+電話番号だけの
   縦積みでは中身が中央にぽつんと収まり左右が間延びして見えるため、
   アイコン＋見出し・電話番号・受付時間を横並びにして幅を活かす構成にした
   （2026-09-28、「他ページと見比べて変」という指摘を受けて調整） */
.contact-page__sidebar-card {
  background: var(--color-white);
  border-radius: 24px;
  padding: 40px 48px;
  box-shadow: 0 24px 60px rgba(10, 36, 85, 0.1);
}

.contact-page__sidebar-main {
  display: flex;
  align-items: center;
  gap: 28px;
}

.contact-page__sidebar-icon {
  flex-shrink: 0;
  display: block;
  width: 60px;
  height: 60px;
}

.contact-page__sidebar-body {
  text-align: left;
}

.contact-page__sidebar-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.contact-page__sidebar-tel {
  display: block;
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.02em;
}

.contact-page__sidebar-hours {
  font-size: 1.3rem;
  color: var(--color-job-text);
  margin-top: 4px;
}

.contact-page__sidebar-text {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-job-text);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 36, 85, 0.1);
}

@media (max-width: 992px) {
  .contact-page__intro {
    padding: 64px 0 40px;
  }

  .contact-page__form-section {
    padding: 64px 0 80px;
  }

  .contact-page__form-card {
    padding: 36px 24px;
  }

  /* Snow Monkey Forms版：氏名・電話番号の2列を、1列に積む */
  .contact-page__form-card .smf-form {
    grid-template-columns: 1fr;
  }

  .contact-page__form-card .smf-item:nth-child(2),
  .contact-page__form-card .smf-item:nth-child(3) {
    grid-column: 1 / -1;
  }

  /* ボタンを縦に並べ、それぞれ幅いっぱいにする（確認画面の「戻る」「送信する」が細くならないように） */
  .contact-page__form-card .smf-action {
    flex-direction: column;
    align-items: stretch;
  }

  .contact-page__form-card .smf-action > *,
  .contact-page__form-card .smf-action .smf-button-control,
  .contact-page__form-card .smf-action .smf-button-control__control {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .contact-page__sidebar-card {
    padding: 32px 24px;
  }

  .contact-page__sidebar-main {
    flex-direction: column;
    text-align: center;
  }

  .contact-page__sidebar-body {
    text-align: center;
  }
}

/* ==========================================================================
   フッターのみに置く簡易ページ（利用者の声・お知らせ・コラム・
   支援機関の皆さまへ・事業所概要アクセス・情報公開スコア表・
   プライバシーポリシー）2026-09-28、新規作成。
   --------------------------------------------------------------------------
   6ページとも内容量が少なく、個別に専用クラスを作るほどでもないため、
   共通の.static-page__*クラスにまとめている。見出しは他ページと同じ
   .about-page__section-title／.about-page__section-leadを再利用。
   住所・電話番号など未確定の情報は、work-style.htmlの「勤務について」と
   同じ.work-style-page__table／-tbdパターンをそのまま再利用し、
   「確認中」と表示している（架空の値は載せない）。
   利用者の声・お知らせ・コラムは、実績・記事がまだない状態のため、
   偽の声や記事を作らず.static-page__noticeで「準備中」を伝える構成にした。
   情報公開（スコア表）は法令上の公表義務があるページだが、実際のスコアが
   まだ無いため、旧資料/content.mdの指示どおり「公表予定」の案内にとどめ、
   架空の数値は記載していない ========================================================================== */
.page-banner--voices {
  background-image: url("assets/images/page-banner-voices.jpg");
  /* 2026-10-01、久保さん指示で、帯では顔をあえて出さない構図(手元・体・小物中心)にするため縦位置を調整 */
  background-position: center 72%;
}

/* 2026-09-30、久保さん指示でヘッダー専用画像に差し替え。従来のabout-photo-2.jpgから
   about-photo-5.jpgのアップスケール版に変更 */
.page-banner--news {
  background-image: url("assets/images/banner-news-smartphone.jpg");
  /* 2026-10-01、久保さん指示でスマホを持つ手元の写真(banner-news-smartphone.jpg)に差し替え。
     「お知らせ」を連想でき、顔も写らない構図のため（従来はpage-banner-news.jpg） */
  background-position: center 45%;
}

/* 2026-10-01、スマホの手元写真は白っぽく白文字が読みにくいため、久保さん指示で
   このページだけ薄い黒のフィルターを重ね、あわせて全画面幅で濃く広い影にする。
   （他ページは色付きの膜を重ねない方針。ここは色味を変えない無彩色の黒のみ） */
.page-banner--news::before {
  background: rgba(0, 0, 0, 0.32);
}

.page-banner--news .page-banner__breadcrumb,
.page-banner--news .page-banner__title,
.page-banner--news .page-banner__tagline {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 0 9px rgba(0, 0, 0, 0.8), 0 0 22px rgba(0, 0, 0, 0.6);
}

/* 2026-09-30、久保さん指示でヘッダー専用画像に差し替え。従来のfeature-retention.jpgから
   flow-photo-3.jpgのアップスケール版に変更（feature-retention.jpgはabout.htmlの
   写真グリッドで引き続き使用） */
.page-banner--agencies {
  background-image: url("assets/images/page-banner-agencies.jpg");
  /* 2026-10-01、久保さん指示で、帯では顔をあえて出さない構図(手元・体・小物中心)にするため縦位置を調整 */
  background-position: center 95%;
}

.page-banner--company {
  background-image: url("assets/images/banner-company-future.jpg");
  /* 2026-10-01、久保さん指示で、帯では顔をあえて出さない構図(手元・体・小物中心)にするため縦位置を調整 */
  background-position: center 75%;
}

.page-banner--score {
  background-image: url("assets/images/banner-score-packing.jpg");
  /* 2026-10-01、久保さん承認で梱包作業をする女性の写真に差し替え
     (従来は買い物カゴのEC画像で、情報公開ページに合わなかったため) */
  background-position: center 10%;
}

.page-banner--privacy {
  background-image: url("assets/images/page-banner-privacy.jpg");
}

.static-page__section {
  padding: 96px 0;
}

.static-page__section + .static-page__section {
  padding-top: 0;
}

.static-page__lead {
  max-width: 760px;
  margin: 24px auto 0;
}

.static-page__body {
  max-width: 760px;
  margin: 32px auto 0;
  font-size: 1.5rem;
  line-height: 1.9;
  color: var(--color-job-text);
}

.static-page__body + .static-page__body {
  margin-top: 20px;
}

/* 見出しの階層（h1の次はh2）をそろえるため、本文中の見出しをh2にしたページ（支援機関・プライバシーポリシー）用。
   h3と同じ見た目にする（Lightningのh2の装飾＝上下の線・余白を打ち消す）（2026-10-11、久保さん承認） */
.static-page__body h3 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-navy);
}

.static-page__body h2 {
  position: relative;
  margin-top: 40px;
  margin-bottom: 12px;
  padding: 0;
  border: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--color-navy);
}

.static-page__body ul {
  margin-top: 12px;
  padding-left: 1.4em;
  list-style: disc;
}

.static-page__body li + li {
  margin-top: 6px;
}

.static-page__body a {
  color: var(--color-job-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.static-page__table-note {
  max-width: 720px;
  margin: 16px auto 0;
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-job-text);
}

/* 実績・記事がまだ無いページ（利用者の声／お知らせ・コラム）の「準備中」案内 */
.static-page__notice {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 40px 32px;
  background: var(--color-worry-check-bg);
  border-radius: 16px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.9;
  color: var(--color-navy);
}

.static-page__button {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (max-width: 992px) {
  .static-page__section {
    padding: 64px 0;
  }

  .static-page__body {
    font-size: 1.4rem;
  }

  .static-page__notice {
    padding: 32px 24px;
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   トップページ セクション内「もっと見る」ボタンの水色版
   --------------------------------------------------------------------------
   2026-09-28、久保さん指示で、トップページ各セクションの.link-arrow・
   .jobs-badge__more（白背景＋グレー枠線）を、他ページの「見学・相談
   フォームへ」等（.hero__btn--blue）と同じ水色グラデーションの塗りつぶしに
   変更。.link-arrowは他ページでも共通利用しているクラスのため、ベース自体は
   変更せず、トップページの該当ボタンにだけ.link-arrow--blueを追加する形にした
   ========================================================================== */
.link-arrow--blue {
  border: none;
  background: linear-gradient(135deg, var(--color-blue-light), var(--color-blue-dark));
  color: var(--color-white);
}

.link-arrow--blue .link-arrow__icon,
.link-arrow--blue .jobs-badge__more-arrow {
  color: var(--color-white);
}

/* ==========================================================================
   トップに戻るボタン（全ページ共通）
   --------------------------------------------------------------------------
   2026-09-28、久保さん指示で新規追加。js/back-to-top.jsが一定量スクロール
   した時だけ.is-visibleを付け外しする。色はヘッダーの「見学・相談」ボタンと
   同じ青グラデーションでサイト全体と統一感を出している。
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-blue-light), var(--color-blue-dark));
  box-shadow: 0 10px 24px rgba(10, 36, 85, 0.22);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, box-shadow 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  box-shadow: 0 14px 28px rgba(10, 36, 85, 0.3);
  transform: translateY(-3px);
}

.back-to-top:active {
  transform: translateY(-1px);
}

.back-to-top__icon {
  display: block;
  color: var(--color-white);
}

@media (max-width: 992px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
  }
}

/* ユーザーがOS側で「視差効果を減らす」設定をしている場合、フェード・
   移動アニメーションを省略し、表示/非表示の瞬時切り替えのみにする */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.2s ease, visibility 0.2s;
    transform: none;
  }

  .back-to-top:hover,
  .back-to-top:active {
    transform: none;
  }
}

/* ==========================================================================
   スマホ幅（iPhone 12 mini＝375px想定）の微調整
   --------------------------------------------------------------------------
   2026-09-29、久保さん指示で375px幅を実測して見つかった2点を直した。
   1) 11pxのバッジ・タグが小さく読みにくい（障害のある方が主な読者）→ 13pxに拡大
   2) 「ペースで。」「します。」のように句点・1文字だけが次行に落ちる
      → text-wrap: balance/prettyで折り返しを均す（未対応ブラウザは従来どおり）
   ========================================================================== */
@media (max-width: 480px) {
  .flow-timeline__badge,
.news-sns__tag,
.contact-page__badge {
    font-size: 1.3rem;
  }

  .about-alt__lead,
.about-alt__body,
.flow-timeline__step-text {
    text-wrap: balance;
  }

  /* 固定の<br>が原因で「で。」だけ次行に落ちるため、スマホ幅では改行を無効にして
     text-wrap: balanceに任せる */
  .about-alt__body br {
    display: none;
  }
}

/* ==========================================================================
   スクロール演出（js/scroll-reveal.jsが対象に.sr等を付け、画面に入ると.is-inを付ける）
   --------------------------------------------------------------------------
   2026-09-30、久保さん指示でトップページの見出し・本文・写真・カードなどに追加。
   translate／scaleの個別プロパティを使っているため、要素が元々持つtransform
   （写真の傾きなど）とは干渉しない。動き終わるとJSがクラスを外すので、
   ホバー動作など元のスタイルには影響しない。
   「視覚効果を減らす」設定の人にはJSがクラス自体を付けない（最初から全表示）。
   ========================================================================== */
.sr {
  opacity: 0;
  transition:
    opacity 0.85s ease-out var(--sr-delay, 0s),
    translate 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) var(--sr-delay, 0s),
    scale 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) var(--sr-delay, 0s);
}

.sr-up { translate: 0 28px; }
.sr-left { translate: -28px 0; }
.sr-pop { translate: 0 20px; scale: 0.92; }
.sr-rise { translate: 0 44px; scale: 0.94; }

.sr.is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* 小見出し（— JOBS — など）：文字がふわっと出て、左右の横棒が文字側から外へ伸びる */
.sr-eyebrow {
  opacity: 0;
  transition: opacity 0.7s ease-out var(--sr-delay, 0s);
}

.sr-eyebrow .section-eyebrow-dash {
  scale: 0 1;
  transition: scale 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--sr-delay, 0s) + 0.15s);
}

.sr-eyebrow .section-eyebrow-dash:first-child { transform-origin: right center; }
.sr-eyebrow .section-eyebrow-dash:last-child { transform-origin: left center; }

.sr-eyebrow.is-in { opacity: 1; }
.sr-eyebrow.is-in .section-eyebrow-dash { scale: 1 1; }

/* ==========================================================================
   スマホ幅の改行の整え（1〜2文字だけが次の行に落ちるのを防ぐ）
   --------------------------------------------------------------------------
   2026-09-30、久保さん指示で375px・390px幅を全13ページ実測し、「〜です／か？」
   「〜ください。／い。」のように文末1〜2文字だけが次行に落ちる箇所が多数見つかった
   ため、まず全体に一括で指定した。
   ・見出し：行の長さを均等にする（text-wrap: balance）
   ・本文：文末の泣き別れは、js/nowrap-tail.jsで対処する（下記.nw-tail）
   ※本文へのtext-wrap: prettyは、最新のiOS 26のSafariで行が右端まで届かず短く揃えられ、
     文章が左に寄って見えたため、2026-09-30に撤去した（Chromeでは日本語にほぼ効かない）。
   ========================================================================== */
@media (max-width: 480px) {
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* 「必須」バッジが「必／須」と2行に割れないようにする */
  .contact-page__badge {
    white-space: nowrap;
  }

  /* js/nowrap-tail.jsが文末5文字を包む塊。この塊の途中では折り返さないので、
     最終行が「い。」「す。」だけになることを防げる */
  .nw-tail,
  .nw {
    white-space: nowrap;
  }

  /* 固定の<br>の手前が1行に収まらず「せて、」だけ落ちるため、スマホ幅では改行を無効にする */
  .jobs-circle__lead br {
    display: none;
  }
}

/* ==========================================================================
   タップしやすさの調整（タブレット・スマホ幅、2026-10-01）
   --------------------------------------------------------------------------
   全13ページを375px・390px幅で実測したところ、指で押す部品の高さが22〜37pxと
   小さい箇所があった（目安は44px。利用者には障害のある方が多く、押し間違いを
   減らしたいため）。見た目の文字サイズは変えず、押せる範囲（高さ）だけを
   44px以上にした。フッターのリンクは、上下の余白(margin)を押せる範囲に
   置き換えているので、並びの間隔はほぼ変わらない。
   ========================================================================== */
@media (max-width: 992px) {
  /* ハンバーガーメニュー内のリンク（文字の高さ19px＋上下13pxずつ＝45px。
     並びの間隔は従来とほぼ同じ約49pxになるよう、リスト側の隙間を縮めている） */
  .header__nav-list {
    gap: 4px;
  }

  .header__nav-link {
    display: block;
    padding: 13px 0;
  }

  /* フッターのリンク一覧（高さ22px→44px） */
  .site-footer__links li:not(:last-child) {
    margin-bottom: 0;
  }

  .site-footer__links a {
    min-height: 44px;
  }

  /* 電話番号（37px→44px）・SNSアイコン（36px→44px）・プライバシーポリシー（20px→44px） */
  .site-footer__tel,
  .contact-page__sidebar-tel {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* 問い合わせ画面のサイドの電話番号は、スマホ幅では中央寄せのカード内にあるため中央に揃える */
  .contact-page__sidebar-tel {
    justify-content: center;
  }

  .site-footer__sns-icon {
    width: 44px;
    height: 44px;
  }
}

/* ==========================================================================
   サブページ上部バナーの文字の読みやすさ（スマホ・タブレット幅、2026-10-01）
   --------------------------------------------------------------------------
   久保さん指示「案b：写真ごとに文字の位置や影を調整」。375px幅で実測したところ、
   明るい写真（仕事内容・FAQ・問い合わせ・事業所概要・利用者の声など）では白文字と
   背景のコントラスト比が1.2〜2.3と低く（目安は4.5）、顔の真上に文字が載るページも
   あった。写真に色付きの膜を重ねる方法は「ビジネス色が強い」として見送った経緯が
   あるため、写真そのものには手を入れず、次の2点だけを写真ごとに調整している。
   ① 文字の影：明るい写真は濃く広い黒の影、暗めの写真（about・work-style・news・
      score）はこれまでに近い影（--bn-shadowで切り替え）
   ② 文字の位置：写真の顔が文字の下敷きにならないよう、スマホ幅(480px以下)で
      文字を下寄せ(align-items: flex-end)＋写真を少し上へ(background-position: 75%)
   ※背景位置を「100%」にすると、幅が広いスマホ（430px等）で顔が見切れたため75%にした。
   PC幅（993px以上）の見た目は変えていない。 */
@media (max-width: 992px) {
  .page-banner {
    --bn-shadow: 0 0 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.6), 0 1px 18px rgba(0, 0, 0, 0.45);
  }

  .page-banner--work,
  .page-banner--flow,
  .page-banner--contact,
  .page-banner--faq,
  .page-banner--agencies,
  .page-banner--voices,
  .page-banner--company,
  .page-banner--privacy {
    --bn-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 0 9px rgba(0, 0, 0, 0.8), 0 0 22px rgba(0, 0, 0, 0.6);
  }

  .page-banner__breadcrumb,
  .page-banner__title,
  .page-banner__tagline {
    color: var(--color-white);
    text-shadow: var(--bn-shadow);
  }
}

@media (max-width: 480px) {
  .page-banner--work,
  .page-banner--flow,
  .page-banner--contact,
  .page-banner--faq,
  .page-banner--agencies,
  .page-banner--company {
    background-position: center 75%;
    align-items: flex-end;
  }

  .page-banner--voices {
    align-items: flex-end;
  }

  .page-banner--privacy {
    background-position: center 60%;
  }
}

/* ==========================================================================
   お知らせ（投稿）の個別ページ・一覧のページ分け
   --------------------------------------------------------------------------
   2026-10-02、お知らせを固定の文章から「投稿」に変更したのに伴い追加。
   一覧の1行（.news-sns__item等）はトップのお知らせ欄と共通のため、新たに書いていない。
   個別ページ（single.php）は.entry-body内に出すので、冒頭のLightningリセットが効く。
   ========================================================================== */
.news-article__inner {
  max-width: 760px;
  margin: 0 auto;
}

.news-article__title {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-navy);
}

.news-article__body p + p {
  margin-top: 1.2em;
}

/* 一覧は.news-sns__listと同じ。ページ分けの数字だけ追加 */
.news-list {
  max-width: 860px;
  margin: 48px auto 0;
}

.news-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
  font-family: var(--font-sans);
}

.news-pagination .page-numbers {
  display: inline-block;
  min-width: 40px;
  padding: 8px 14px;
  border: 1px solid #dfe3e8;
  border-radius: 999px;
  text-align: center;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--color-navy);
}

.news-pagination .page-numbers.current {
  background: var(--color-job-blue);
  border-color: var(--color-job-blue);
  color: var(--color-white);
}

@media (max-width: 600px) {
  .news-article__title {
    font-size: 2rem;
  }
}

/* ==========================================================================
   ボタン・リンクの変化をふんわりさせる（2026-10-05、久保さん指示）
   --------------------------------------------------------------------------
   マウスを乗せたとき、ボタンの文字色などが一瞬で切り替わっていた（親テーマLightningの
   リンク色が、変化の時間0秒で当たっていた）。色・背景・枠線・透明度の変化に、0.4秒の
   ゆるやかな動きを付ける。
   ・要素名(a, button)への指定なので、クラスで個別にtransitionを持つ要素（スクロール演出中の
     .srや「ページ上へ」ボタン等）はそちらが優先され、壊れない
   ・「視覚効果を減らす」設定の人には、動きを付けない
   ========================================================================== */
a,
button {
  transition:
    color 0.4s ease,
    background-color 0.4s ease,
    border-color 0.4s ease,
    opacity 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  a,
  button {
    transition: none;
  }
}

/* ==========================================================================
   スマホ・タブレット幅の画面下固定クイックナビ（ホーム／電話／アクセス／お問い合わせ）
   --------------------------------------------------------------------------
   2026-10-09、久保さん指示で新規追加。ハンバーガーが出る992px以下だけ表示する。
   ロゴの紺を少し淡くした#1f3d73を8%透かした背景に、アイコン・文字は白抜き（コントラスト比10.6）。
   高さ56px・文字12px・区切り線なし（紺が強く目立ちすぎるため、久保さん判断で軽くした）。
   当初の「電話＝青・お問い合わせ＝ピンク」案は取りやめ。
   タップ領域は56px（44px以上）、iPhone下端はsafe-area-inset-bottomで避ける。
   ハンバーガーを開いている間（body.nav-open）は隠す。
   右下の「トップに戻る」ボタンはこの帯の上にずらす（下のブロック）。
   ========================================================================== */
.quick-nav {
  display: none;
}

@media (max-width: 992px) {
  .quick-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25; /* トップに戻る(20)より前、開いたメニュー(30)より後ろ */
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(31, 61, 115, 0.92); /* 少し淡い紺(#1f3d73)を8%だけ透かす */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 -4px 16px rgba(10, 36, 85, 0.18);
  }

  .quick-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 6px 2px;
    color: var(--color-white);
    text-decoration: none;
    line-height: 1.2;
  }

  .quick-nav__item:hover,
  .quick-nav__item:focus-visible {
    color: var(--color-white);
    opacity: 0.85;
  }

  .quick-nav__icon {
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
  }

  .quick-nav__label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* 帯でページ最下部（コピーライト等）が隠れないよう余白を足す */
  body {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* トップに戻るボタンを帯の上へ */
  .back-to-top {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* ハンバーガーを開いている間は隠す */
  body.nav-open .quick-nav {
    display: none;
  }
}

/* ==========================================================================
   トップのヒーロー文字：パターン6（社長確認用の比較ページ /hero-compare/ で採用）を反映
   --------------------------------------------------------------------------
   2026-10-09、社長・久保さんの判断でパターン6に決定。PC幅（993px以上）のみ。
   値は、開発者用ページ(hero-tune)のつまみで決めたもの：
   メニュー：縁取り70%・ぼかし影20%・文字+1.5pt／
   大見出し：縁取り25%・ぼかし影80%・文字の大きさは変えない／
   サブテキスト：縁取り55%・ぼかし影80%・文字+3.5pt・大見出しとの間隔24px→32px。
   縁取り＝上下左右に1pxずつずらした濃紺の影（斜めは半分の濃さ）、ぼかし影＝下に1px・ぼかし3px。
   タブレット・スマホ幅(992px以下)は変えない（ハンバーガーは白背景に紺文字のまま）。
   旧.text-pattern-bの影（ごく弱い影）は、この後ろで上書きされる。
   ========================================================================== */
.text-pattern-b {
  --nav-o: 0.7;  --nav-b: 0.2;
  --ti-o: 0.25;  --ti-b: 0.8;
  --su-o: 0.55;  --su-b: 0.8;
}

@media (min-width: 993px) {
  .text-pattern-b .header__nav-link {
    font-size: calc(clamp(14px, calc(14px + (100vw - 1300px) * 0.0079), 17px) + 1.5pt);
    text-shadow:
      -1px 0 0 rgba(6, 20, 44, var(--nav-o)), 1px 0 0 rgba(6, 20, 44, var(--nav-o)),
      0 -1px 0 rgba(6, 20, 44, var(--nav-o)), 0 1px 0 rgba(6, 20, 44, var(--nav-o)),
      -1px -1px 0 rgba(6, 20, 44, calc(var(--nav-o) * 0.5)), 1px -1px 0 rgba(6, 20, 44, calc(var(--nav-o) * 0.5)),
      -1px 1px 0 rgba(6, 20, 44, calc(var(--nav-o) * 0.5)), 1px 1px 0 rgba(6, 20, 44, calc(var(--nav-o) * 0.5)),
      0 1px 3px rgba(6, 20, 44, var(--nav-b));
  }

  .text-pattern-b .hero__title {
    margin-bottom: 32px;
    text-shadow:
      -1px 0 0 rgba(6, 20, 44, var(--ti-o)), 1px 0 0 rgba(6, 20, 44, var(--ti-o)),
      0 -1px 0 rgba(6, 20, 44, var(--ti-o)), 0 1px 0 rgba(6, 20, 44, var(--ti-o)),
      -1px -1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)), 1px -1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)),
      -1px 1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)), 1px 1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)),
      0 1px 3px rgba(6, 20, 44, var(--ti-b));
  }

  .text-pattern-b .hero__subtext {
    font-size: calc(2.3rem + 3.5pt);
    text-shadow:
      -1px 0 0 rgba(6, 20, 44, var(--su-o)), 1px 0 0 rgba(6, 20, 44, var(--su-o)),
      0 -1px 0 rgba(6, 20, 44, var(--su-o)), 0 1px 0 rgba(6, 20, 44, var(--su-o)),
      -1px -1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)), 1px -1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)),
      -1px 1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)), 1px 1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)),
      0 1px 3px rgba(6, 20, 44, var(--su-b));
  }
}

@media (min-width: 993px) and (max-width: 1300px) {
  .text-pattern-b .header__nav-link {
    font-size: calc(13px + (100vw - 993px) * 0.00326 + 1.5pt);
  }
}

/* ==========================================================================
   トップのヒーロー文字：パターン6の縁取り＋影を、タブレット・スマホ幅(992px以下)にも適用
   --------------------------------------------------------------------------
   2026-10-09、久保さん指示。明るい場面（白い背景）で白文字が見にくいため。
   対象は、大見出し「働くことを、次の自信へ。」とサブテキストだけ。
   最初の数秒の1行見出し(.hero__title-intro)・ハンバーガーのメニュー文字は変えない。
   影の濃さはPC幅と同じ（大見出し：縁取り25%・ぼかし影80%／サブテキスト：縁取り55%・ぼかし影80%）。
   文字の大きさ・間隔はPC幅のパターン6のようには変えない（今のまま）。
   ========================================================================== */
@media (max-width: 992px) {
  .text-pattern-b .hero__title {
    text-shadow:
      -1px 0 0 rgba(6, 20, 44, var(--ti-o)), 1px 0 0 rgba(6, 20, 44, var(--ti-o)),
      0 -1px 0 rgba(6, 20, 44, var(--ti-o)), 0 1px 0 rgba(6, 20, 44, var(--ti-o)),
      -1px -1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)), 1px -1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)),
      -1px 1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)), 1px 1px 0 rgba(6, 20, 44, calc(var(--ti-o) * 0.5)),
      0 1px 3px rgba(6, 20, 44, var(--ti-b));
  }

  .text-pattern-b .hero__subtext {
    text-shadow:
      -1px 0 0 rgba(6, 20, 44, var(--su-o)), 1px 0 0 rgba(6, 20, 44, var(--su-o)),
      0 -1px 0 rgba(6, 20, 44, var(--su-o)), 0 1px 0 rgba(6, 20, 44, var(--su-o)),
      -1px -1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)), 1px -1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)),
      -1px 1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)), 1px 1px 0 rgba(6, 20, 44, calc(var(--su-o) * 0.5)),
      0 1px 0.5px rgba(6, 20, 44, var(--su-b)); /* 小さい文字でにじまないよう、ぼかし幅をPC幅(3px)より狭く */
  }
}

/* ==========================================================================
   スマホ・タブレット幅(992px以下)：ヒーローの文字のまとまりを、画面の下寄りに置く
   --------------------------------------------------------------------------
   2026-10-09、久保さん指示。見出し・サブテキスト・ボタンが画面の真ん中付近にあるため、
   大胆に下げる。上からの位置（vh）ではなく、画面の下端を基準にして、
   画面下の固定クイックナビ(56px)の上に、画面の高さの12%の余白を残して置く
   （画面の高さや見出しの行数が変わっても、ボタンの下端が常に同じ位置になる）。
   最初の数秒の1行見出し(.hero__title-intro)は別の指定(position:absolute)で、影響しない。
   ========================================================================== */
@media (max-width: 992px) {
  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 24px calc(56px + 12vh + env(safe-area-inset-bottom, 0px)); /* ボタン下端と帯の間＝画面の高さの12%（844pxで約100px）。下げすぎだったため調整 */
  }
}

@media (max-width: 768px) {
  .hero__content {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* スマホ・タブレット幅：ヒーローの大見出しとサブテキストの文字を2pt（約2.7px）大きくする
   （2026-10-09、久保さん指示。元の大きさは、992px以下＝見出し4.6rem・サブ1.6rem、768px以下＝見出し3.4rem・サブ1.4rem）。
   最初の数秒の1行見出し(.hero__title-intro)は変えない */
@media (max-width: 992px) {
  .text-pattern-b .hero__title {
    font-size: calc(4.6rem + 2pt);
  }

  .text-pattern-b .hero__subtext {
    font-size: calc(1.6rem + 2pt);
  }
}

@media (max-width: 768px) {
  .text-pattern-b .hero__title {
    font-size: calc(3.4rem + 2pt);
  }

  .text-pattern-b .hero__subtext {
    font-size: calc(1.4rem + 2pt);
  }
}

/* ==========================================================================
   お知らせの2カラム（左に記事・右にサイドバー）とサイドバー（2026-10-09、久保さん承認）
   --------------------------------------------------------------------------
   対象：/news/（一覧）・カテゴリー別／月別の一覧（archive.php）・お知らせ個別ページ（single.php）。
   992px以下（ハンバーガーが出る幅）では1カラムにし、サイドバーは記事の下に回る。
   ========================================================================== */
.news-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
  margin-top: 48px;
}

/* 2カラムの中では、一覧・記事を中央寄せにせず左カラムいっぱいに使う */
.news-layout .news-list,
.news-layout .news-article__inner {
  max-width: none;
  margin: 0;
}

.news-layout .static-page__button {
  margin-top: 40px;
}

.news-sidebar {
  font-family: var(--font-sans);
  color: var(--color-job-text);
}

.news-sidebar__box {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: var(--color-white);
}

.news-sidebar__title {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--color-job-blue);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-navy);
}

.news-sidebar__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-sidebar__list li {
  border-top: 1px solid #eef0f3;
}

.news-sidebar__list li:first-child {
  border-top: 0;
}

.news-sidebar__list a {
  display: block;
  min-height: 44px;
  padding: 10px 0;
  font-size: 1.4rem;
  line-height: 1.6;
  text-decoration: none;
  color: var(--color-job-text);
}

.news-sidebar__list a:hover {
  color: var(--color-job-blue);
}

.news-sidebar__date {
  display: block;
  font-size: 1.2rem;
  color: #5b6573;
}

.news-sidebar__count {
  color: #5b6573;
}

/* 月別アーカイブ（WordPress標準の出力：リンク＋「 (2)」） */
.news-sidebar__list--months li {
  padding: 10px 0;
  font-size: 1.4rem;
  color: #5b6573;
}

.news-sidebar__list--months a {
  display: inline;
  min-height: 0;
  padding: 0;
}

.news-sidebar__cta {
  padding: 24px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: var(--color-white);
  color: var(--color-navy);
  text-align: center;
}

.news-sidebar__cta-lead {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.news-sidebar__cta-tel {
  display: block;
  min-height: 44px;
  margin-top: 8px;
  padding: 5px 0;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  color: var(--color-navy);
}

.news-sidebar__cta-hours {
  margin: 0;
  font-size: 1.2rem;
}

/* ボタンの見た目は、トップページ等の各ページへ進むボタン（.link-arrow--blue）をそのまま使う */
.news-sidebar__cta-button {
  margin-top: 16px;
  text-decoration: none;
}

@media (max-width: 992px) {
  .news-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 32px;
  }
}

/* ==========================================================================
   404ページ（404.php）（2026-10-09、久保さん承認）
   --------------------------------------------------------------------------
   ボタンは既存の.link-arrow（トップ等の各ページへ進むボタン）をそのまま使う。
   主なページへのリンクは、タップしやすい高さ(56px)の枠にして、2列(PC)/1列(スマホ)で並べる。
   ========================================================================== */
.notfound {
  text-align: center;
}

/* 言葉のまとまりの途中で折り返さないよう、まとまりごとに改行位置を作る */
.notfound__nb {
  display: inline-block;
}

.notfound__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

.notfound__subtitle {
  margin: 56px 0 16px;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-navy);
}

.notfound__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.notfound__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px 16px;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-navy);
}

.notfound__links a:hover {
  border-color: var(--color-job-blue);
  color: var(--color-job-blue);
}

.notfound__tel {
  margin: 56px 0 0;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--color-job-text);
}

.notfound__tel-number {
  display: inline-block;
  min-height: 44px;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  color: var(--color-navy);
}

.notfound__tel-hours {
  font-size: 1.3rem;
}

@media (max-width: 600px) {
  .notfound__links {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 電話番号を「スマホ等のタッチ操作の端末ではリンク、マウス操作のPCでは文字だけ」にする
   （プライバシーポリシーの窓口。2026-10-13、久保さん指示）。
   マウスで操作する端末(hover: hover かつ pointer: fine)だけ、リンク側を隠して文字側を出す */
.static-tel__link {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

.static-tel__text {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .static-tel__link {
    display: none;
  }

  .static-tel__text {
    display: inline;
  }
}

/* ==========================================================================
   トップページ「Instagram」セクション（2026-10-15、久保さん依頼の【仮】デザイン確認用）
   写真はダミー。実際のInstagramとは接続していない。使わない場合はこの節ごと削除する
   ========================================================================== */
/* 他のセクション（.worries・.faq等）と同じ「上下だけ波、真ん中は白」の背景（久保さん指示） */
.ig-feed {
  position: relative;
  padding: 100px 0;
  background-color: #ffffff;
  background-image: url("assets/images/bg-wave-top.jpg"), url("assets/images/bg-wave-bottom.jpg");
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  isolation: isolate;
}

/* 上下の縁を白へフェードさせ、隣のセクションとの境目をなじませる（.faq等と同じ） */
.ig-feed::before,
.ig-feed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 1;
  pointer-events: none;
}

.ig-feed::before {
  top: 0;
  background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0));
}

.ig-feed::after {
  bottom: 0;
  background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0));
}

.ig-feed > .container {
  position: relative;
  z-index: 2;
}

.ig-feed__head {
  text-align: center;
  margin-bottom: 40px;
}

.ig-feed__title {
  font-family: var(--font-sans);
  font-size: 3.8rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 14px;
}

.ig-feed__lead {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  color: var(--color-job-text);
  text-wrap: balance; /* 2行になるとき、行の長さを揃える（「ています。」だけが次の行に残らないように） */
}

.ig-feed__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 1行に4枚（久保さん指示） */
  gap: 16px;
}

.ig-feed__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(30, 80, 130, 0.12);
}

.ig-feed__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.ig-feed__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(254, 218, 117, 0.55), rgba(214, 41, 118, 0.55) 55%, rgba(79, 91, 213, 0.55));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ig-feed__tile:hover img,
.ig-feed__tile:focus-visible img {
  transform: scale(1.06);
}

.ig-feed__tile:hover .ig-feed__overlay,
.ig-feed__tile:focus-visible .ig-feed__overlay {
  opacity: 1;
}

.ig-feed__cta {
  margin-top: 40px;
  text-align: center;
}

.ig-feed__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 10px 28px;
  background: #ffffff;
  border: 1px solid #cfe3f3;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(30, 80, 130, 0.1);
  text-decoration: none;
  color: var(--color-navy);
  position: relative; /* ホバー時に出るグラデーション枠（::before）の基準 */
  /* ホバーの動きは「ゆっくり立ち上がって静かに止まる」イージングで統一（0.22, 0.61, 0.36, 1 はこのサイトの他の動きと同じ） */
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.4s ease,
    background-color 0.4s ease;
}

.ig-feed__btn .link-arrow__icon {
  transition:
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.4s ease;
}

/* ホバー時に現れる、Instagramのブランドカラー（黄→オレンジ→赤→紫→青紫）のグラデーション枠（2026-10-16・久保さん指示）。
   枠線のグラデーションは色の切り替えアニメーションができないため、重ねた枠の「透明度」を動かして表現する。
   中身（ロゴ・文字）は覆わない（枠の部分だけを残すマスク） */
.ig-feed__btn::before {
  content: "";
  position: absolute;
  inset: -1px; /* 元の枠線（1px）の上に重ねる */
  padding: 2px; /* 枠の太さ */
  border-radius: inherit;
  background: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 52%, #962fbf 76%, #4f5bd5 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

/* 洗練したホバー（2026-10-16）：ふわっと少し浮き、影がやわらかく広がり、枠がInstagramカラーになり、矢印が右へ静かにスライドする。
   ロゴの色・形は変えない。マウス操作の端末だけに適用（タッチ端末で「押したまま浮く」状態にならないように） */
@media (hover: hover) and (pointer: fine) {
  .ig-feed__btn:hover {
    transform: translateY(-3px);
    background-color: #fffafd;
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(214, 41, 118, 0.18);
  }

  .ig-feed__btn:hover::before {
    opacity: 1;
  }

  .ig-feed__btn:hover .link-arrow__icon {
    color: #c13584; /* Instagramのブランドカラー（赤紫） */
    transform: translateX(5px);
  }

  /* 押した瞬間は少しだけ戻る（押した感触） */
  .ig-feed__btn:active {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(30, 80, 130, 0.14);
    transition-duration: 0.12s;
  }
}

/* キーボード操作（Tab）でも、マウスと同じように分かる。枠線は常に表示 */
.ig-feed__btn:focus-visible {
  outline: 3px solid #c13584;
  outline-offset: 4px;
}

/* 動きを減らす設定の端末では、浮く・スライドは行わない（色の変化だけにする） */
@media (prefers-reduced-motion: reduce) {
  .ig-feed__btn,
  .ig-feed__btn::before,
  .ig-feed__btn .link-arrow__icon {
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }

  .ig-feed__btn:hover,
  .ig-feed__btn:active {
    transform: none;
  }

  .ig-feed__btn:hover .link-arrow__icon {
    transform: none;
  }
}

.ig-feed__btn img {
  display: block;
  width: 120px;
  height: auto;
}

.ig-feed__btn-text {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
}

.ig-feed__handle {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--color-job-text);
}

@media (max-width: 767px) {
  .ig-feed {
    padding: 64px 0;
  }

  .ig-feed__title {
    font-size: 2.8rem;
  }

  /* スマホ幅は2列×2段（4列だと1枚が約80pxで小さすぎるため。久保さん指示） */
  .ig-feed__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ig-feed__tile {
    border-radius: 10px;
  }

  .ig-feed__btn {
    gap: 10px;
    padding: 10px 18px;
  }

  .ig-feed__btn img {
    width: 96px;
  }
}

/* 狭いスマホ（360px前後）：「公式アカウントを見る」が1文字だけ折り返さないよう、ロゴ・文字・余白を少し小さくする（2026-10-16） */
@media (max-width: 400px) {
  .ig-feed__btn {
    gap: 8px;
    padding: 10px 14px;
  }

  .ig-feed__btn img {
    width: 80px;
  }

  .ig-feed__btn-text {
    font-size: 1.4rem;
    white-space: nowrap;
  }
}

/* さらに狭い端末（340px以下）向けの予備 */
@media (max-width: 340px) {
  .ig-feed__btn img {
    width: 68px;
  }

  .ig-feed__btn-text {
    font-size: 1.3rem;
  }
}