@charset "UTF-8";
/* =================================================================
   あおぞらポケット六本松 - 福祉系イラスト調デザイン
   ================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
  /* Tab でフォーカスが移動したとき、ブラウザはスクロールコンテナ側の
     scroll-padding を見る。下の [id] にある scroll-margin-top は
     アンカー遷移（:target）にしか効かないため、これが無いと
     キーボード操作でフォーカスした要素が固定ヘッダーの下に潜る。 */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

/* 動きを減らす設定では滑らかスクロールもやめる。
   _reveal.scss の一括指定は animation/transition-duration にしか効かず、
   scroll-behavior は別プロパティなので個別に戻す必要がある。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  font-family: var(--font-round);
  font-feature-settings: "palt" 1;
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--c-text);
  background: var(--c-bg);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, picture {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: all 0.3s;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* hidden 属性を必ず効かせる。ブラウザ既定の [hidden]{display:none} は
   作者スタイルの display 指定に負けるため、.slider__nav{display:flex} のような
   1行で無効化される。JS で出し分ける要素が「JS 無効時に出たままになる」という
   静かな壊れ方をするので、ここで押し切る。 */
[hidden] {
  display: none !important;
}

/* 見出しの行の長さをそろえる。日本語は文字の間ならどこでも改行できるので、
   放っておくと最終行に1文字だけ残ることがある（「就労継続支援B / 型」）。
   未対応のブラウザでは無視されるだけで、従来どおりの折り返しになる。 */
h1, h2, h3 {
  text-wrap: balance;
}

/* 淡い青（#8fc0e8）だけだと、この水彩の背景に対して 1.87:1 しかなく、
   どこにフォーカスがあるか分からない（WCAG 1.4.11 は 3:1 を求める）。
   濃紺にすると 5.22:1。キーボード操作中しか出ない線なので、
   ここは見た目より「見えること」を優先する。 */
:focus-visible {
  outline: 3px solid var(--c-navy);
  outline-offset: 3px;
}

/* ヘッダーは position: fixed なので、アンカーへ飛ぶと見出しがその下に潜る。
   本文へスキップ（#main）やサービス内アンカー（#typeB）が該当する。 */
[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ---------- Tokens ---------- */
:root {
  /* ブランドカラー。ロゴ（デニムのポケットと若葉）と名刺の水彩に合わせ、
     ブルーとグリーンの2系統だけで構成する。 */
  --c-navy: #3d69b6; /* CTA帯・ボタンの面。空の青に寄せて重くしない */
  --c-navy-d: #31589b; /* 見出しの濃色。水彩の淡さに合わせて沈ませすぎない */
  --c-navy-l: #4e7bc4;
  --c-blue: #5b96d2; /* デニムブルー（ロゴのポケット） */
  --c-blue-l: #8fc0e8; /* 空の水色 */
  --c-leaf: #86b95f; /* 若葉の緑（ロゴの葉） */
  --c-leaf-l: #b3d492; /* 淡い葉の緑 */
  /* 唯一の暖色。行動を促す箇所だけに使う。
     水彩のトップ画像に合わせた明るい配色がこのサイトの核なので、
     読みやすさを理由にここを濃くしないこと。安心感と爽やかさが失われる。 */
  --c-coral: #ee8272;
  --c-coral-d: #dd6e5d;
  /* ヘッダーのサブナビの丸印2つ。ここ以外では使わない。
     背景が空の水彩（実効 #c2e4fd）なので、小さい丸は明暗差より色相差で見せる。
     --c-leaf をそのまま使わないのは、あちらを薄くすると about の帯まで変わるため。
     2つの重さが揃って見えるよう輝度比を近づけてある（1.52 と 2.04）。
     ここが薄さの限界。緑の 1.52 は、背景に完全に沈んでいた元の水色 1.45 の
     すぐ手前まで来ている。それでも読めているのは色相差 111°があるためで、
     明暗ではなく色相で見せている状態。これ以上薄くすると色相でも支えきれない。 */
  --c-dot-leaf: #95c471; /* 若葉の緑を明るく。輝度比 1.52・色相差 111° */
  --c-dot-violet: #a990e0; /* 薄藤。輝度比 2.04、コーラルとの色相差 109° */
  /* 面をつくる淡色。影ではなくこの塗りでカードや区画を表現する */
  --c-soft: #f3f9ee;
  --c-soft-d: #e2eeda;
  --c-soft-l: #fafcf7;
  --c-text: #39454f; /* 青みのある濃色。純グレーだと水彩の色調から浮いて重い */
  --c-text-l: #69757f; /* 補助文字。同じく青みを持たせて本文となじませる */
  --c-bg: #FFFFFF;
  --c-sky-l: #e8f6fd;
  /* 丸ゴシックで柔らかい印象をつくる。欧文の見出し・数字は Nunito */
  --font-round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4", "Yu Gothic", sans-serif;
  --font-en: "Nunito", "Zen Maru Gothic", sans-serif;
  /* 角丸。参考にした福祉サイト同様、大きめに取って柔和に見せる */
  --r-card: 24px;
  --r-box: 32px;
  --r-sm: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --container: 1240px;
  /* 固定ヘッダーの高さ。アンカー先がヘッダーに潜らないよう scroll-margin に使う */
  --header-h: 96px;
}

/* ---------- 4-color stripe ---------- */
.stripe-band {
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--c-blue) 0 20px, var(--c-leaf-l) 20px 40px, var(--c-blue-l) 40px 60px, var(--c-leaf) 60px 80px);
}

.stripe-band--thick {
  height: 10px;
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 8px 16px;
  background: var(--c-navy);
  color: #fff;
  z-index: 9999;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  top: 0;
}

/* 画面には出さず、読み上げにだけ届ける。display: none や visibility: hidden は
   読み上げからも消えてしまうため、面積を潰して切り抜く方法をとる。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.mt-6 {
  margin-top: 48px;
}

/* ==================================================================
   HEADER - 元サイト風2段構成（右側に2段ナビ + 右端CTA）
   ================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  /* トップのヒーローは上部が白い空なので、背景が白いだけだとヘッダーが
     溶けて境界が見えなくなる。不透明度を少し上げ、淡い緑の境界線と
     ごく弱い影で「バー」としての輪郭を作る。
     他ページ（淡緑の見出し帯が下に来る）でも重く見えない程度に留めている。 */
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px) saturate(1.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  border-bottom: 1px solid rgba(120, 150, 110, 0.16);
  box-shadow: 0 1px 10px rgba(90, 120, 80, 0.05);
}

.site-header.is-fixed {
  position: fixed;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 14px rgba(120, 150, 110, 0.12);
  animation: slideDown 0.35s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
/* トップページだけ、ヘッダー越しにヒーローの空が少し見えるようにする。
   白ベールを薄く（.78 → .68）、ぼかしを弱く（12px → 8px）した二段構え。
   ぼかしを緩めないと色だけ透けて「何の絵か分からない」状態になるため、
   両方を動かしている。
   下層ページの背後は単色の帯なので透けさせる意味がなく、対象外にしている。
   スクロール後（.is-fixed）は .96 のまま変えない。読みながら追う場面で
   背景が動くと視認性が落ちるため。 */
body.page-index .site-header:not(.is-fixed) {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
}

/* 白ベールを薄くした分、文字の背後のコントラストが落ちる。
   ベールで稼げなくなった読みやすさは、グリフの縁の白グローを厚くして
   補う。透過とグローは必ずセットで動かす。 */
body.page-index .site-header:not(.is-fixed) .logo-text__tag,
body.page-index .site-header:not(.is-fixed) .header-subnav a,
body.page-index .site-header:not(.is-fixed) .main-nav a {
  text-shadow: 0 0 3px rgb(255, 255, 255), 0 0 7px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.85), 0 1px 2px rgb(255, 255, 255);
}

/* ヘッダー上端に差すタグ。ロゴの右隣に来るよう left で位置を決める */
.header-tag {
  position: absolute;
  top: 0;
  left: 320px;
  background: var(--c-navy);
  color: #FFF;
  padding: 6px 18px 5px;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: 0 0 6px 6px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 2;
}

/* メインヘッダー：ロゴ｜中央余白｜右側2段ナビ｜CTAボタン */
.header-main {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 0 0 32px;
  min-height: 96px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding: 18px 0 14px;
}

.logo-mark {
  display: inline-flex;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.logo-text__tag {
  /* 事業所の種別を伝える唯一の表示。10px 台では読めないので本文に近い大きさにする */
  font-size: 1.4rem;
  color: var(--c-text);
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.logo-text__main {
  font-family: var(--font-round);
  font-size: 3.2rem;
  color: var(--c-navy);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
}

/* 右側のナビ群：上にサブナビ、下にメインナビ */
.header-navs {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 10px 32px 0 0;
  gap: 8px;
}

.header-subnav {
  display: flex;
  gap: 28px;
}

.header-subnav a {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.header-subnav a::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--c-dot-leaf);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* 2つ目は菫。以前の空の水色（--c-blue-l）は背景の空に対して輝度比 1.45・
   色相差 2°で、明暗でも色相でも背景と一致して完全に沈んでいた。
   検討した候補（背景 #c2e4fd に対する輝度比 / お問い合わせボタンとの色相差）:
     葉の緑    1.73 / 86°  … 隣の「採用情報」と同じ色になり区別がつかない
     コーラル  1.96 /  0°  … すぐ横のお問い合わせボタンと同色
     山吹・橙  1.52-1.89 / 21-31° … ボタンと色相が近く、色あせたボタンに見える
     菫        3.06 / 108° … 色は正解だが主張が強すぎた
     薄藤 #a990e0 2.04 / 109° … 採用
   白い縁を回す案は輝度比 1.33 にしかならず機能しなかったため不採用。 */
.header-subnav a:nth-child(2)::before {
  background: var(--c-dot-violet);
}

.header-subnav a:hover {
  color: var(--c-navy);
}

.main-nav {
  display: flex;
  align-items: center;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--c-text);
  position: relative;
  padding: 6px 2px;
  white-space: nowrap;
}

.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -2px;
  height: 3px;
  background: var(--c-navy);
  transition: left 0.3s var(--ease), right 0.3s var(--ease);
}

.main-nav a:not(.btn):hover::after,
.main-nav a[aria-current=page]::after {
  left: 0;
  right: 0;
}

/* オレンジCTAボタン（短い高さ・ヘッダー縦中央に配置） */
.header-cta {
  background: var(--c-coral);
  color: #FFF;
  padding: 0 30px;
  height: 56px;
  margin: auto 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 1.45rem;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.3s;
  white-space: nowrap;
  border-radius: 4px 0 0 4px;
}

.header-cta:hover {
  background: var(--c-coral-d);
}

.header-cta__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  display: none;
  width: 52px;
  height: 52px;
  position: relative;
  background: var(--c-navy);
  border-radius: 6px;
  flex-shrink: 0;
  margin: auto 16px auto 0;
}

.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 3px;
  background: #FFF;
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s, top 0.3s var(--ease);
}

.nav-toggle span:nth-child(1) {
  top: 16px;
}

.nav-toggle span:nth-child(2) {
  top: 24px;
}

.nav-toggle span:nth-child(3) {
  top: 32px;
}

.nav-toggle[aria-expanded=true] span:nth-child(1) {
  top: 24px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded=true] span:nth-child(3) {
  top: 24px;
  transform: rotate(-45deg);
}

.global-nav-mobile {
  display: none;
}

/* ヘッダー透明状態（スクロール前）の視認性向上 */
.site-header:not(.is-fixed) .logo-text__tag,
.site-header:not(.is-fixed) .logo-text__main,
.site-header:not(.is-fixed) .header-subnav a,
.site-header:not(.is-fixed) .main-nav a {
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.9), 0 0 8px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(255, 255, 255, 0.9);
}

main {
  position: relative;
}

/* ==================================================================
   HERO CATCH - トップ先頭のキャッチコピー

   もとは全画面のヒーローに重ねていたレイヤー。ヒーロー自体は
   先頭セクションの地（_section.scss の ::before）に置き換わったが、
   文字の大きさ・色・白グローはそのまま引き継いでいる。
   背後が水彩なので、text-shadow の白グローは必ずセットで残すこと。
   ================================================================== */
.hero__catch {
  position: relative;
  z-index: 2;
  /* セクション側で --header-h ぶん下げているので、その続きぶんだけ持つ。
     スライドを早く見せたいので、全画面ヒーローだった頃（96+104=200px）より詰めてある。 */
  padding: 48px 0 24px;
  text-align: center;
  /* 見出しの字を「入る大きさ」まで自動で縮めるための基準。
     100cqw がこの要素の内容幅そのものになるので、左右の余白や
     スクロールバーの有無を式に持ち込まずに済む。
     使っているのは _responsive.scss の 520px 以下のブロック。 */
  container-type: inline-size;
}

.hero__catch__title {
  font-family: var(--font-round);
  font-size: clamp(2.8rem, 4.6vw, 4.4rem);
  font-weight: 700;
  color: var(--c-navy-d);
  letter-spacing: 0.02em;
  line-height: 1.5;
  margin-bottom: 22px;
  text-shadow: 0 0 30px rgb(255, 255, 255), 0 0 16px rgb(255, 255, 255), 0 0 6px rgb(255, 255, 255), 0 2px 6px rgba(255, 255, 255, 0.9);
}

.hero__catch__title .quote {
  color: var(--c-blue);
}

/* 狭い画面だけ「あなたの」の後ろで折り返すための改行。
   既定（PC）では使わず、1行目は「あなたの「働きたい！」を、」のまま。
   切り替えは _responsive.scss の 520px 以下のブロックで行う。 */
.hero__catch__br {
  display: none;
}

.hero__catch__text {
  font-size: clamp(1.6rem, 1.45vw, 1.9rem);
  color: var(--c-text);
  font-weight: 700;
  line-height: 1.9;
  text-shadow: 0 0 18px rgb(255, 255, 255), 0 0 10px rgb(255, 255, 255), 0 0 4px rgb(255, 255, 255);
}

/* ==================================================================
   BUTTONS
   ================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 280px;
  padding: 22px 36px;
  background: var(--c-navy);
  color: #FFF;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  border: 0;
  transition: background 0.3s, transform 0.25s;
  text-align: center;
}

.btn:hover {
  background: var(--c-navy-d);
  transform: translateY(-2px);
}

.btn-coral {
  background: var(--c-coral);
}

.btn-coral:hover {
  background: var(--c-coral-d);
}

.btn-blue {
  background: var(--c-blue);
}

.btn-blue:hover {
  background: var(--c-navy);
}

.btn-lg {
  min-width: 340px;
  padding: 26px 40px;
  font-size: 1.7rem;
}

.btn .arrow {
  display: inline-flex;
  font-family: var(--font-round);
  font-size: 1.4rem;
}

/* ==================================================================
   SECTION
   ================================================================== */
.section {
  padding: 110px 0;
  position: relative;
}

/* 余白は「前の要素の下余白 + 次の要素の上余白」で足し算になる。
   そのまま重ねると 220px 空いて間延びするため、隣接時は上側を詰める。 */
.page-hero + .section {
  padding-top: 56px;
}

.section + .section {
  padding-top: 64px;
}

/* トップだけ、最初のセクションがヘッダーの真下に来る。
   .site-header は position: absolute（固定になるのはスクロール後の .is-fixed だけ）で
   流れの外にあるため、この上余白が無いとセクションの頭がヘッダーに隠れる。
   下層ページは .page-hero が自前の上余白（130px）で逃がしているので触らない。
   --header-h は 1024px 以下で 96px → 70px に切り替わるので、足す側だけ書けばよい。 */
body.page-index main > .section:first-child {
  padding-top: var(--header-h);
}

/* その先頭セクションの地に、水彩のヒーローを敷く。
   .site-header は半透明なので、この絵がヘッダー越しに透ける。

   そのまま敷くと絵が主役になってスライドが読みにくくなるので、二重に弱める。
     opacity … 絵そのものの濃さを落とす
     mask    … 下へ向かって消し、スライドの背後では白に戻す
   高さを px で決めているのは、セクションの高さ（スライドの読み込み前後で変わる）に
   絵の位置が引きずられないようにするため。
   絵は飾りなので、読み上げにも印刷にも出さない。 */
body.page-index main > .section:first-child {
  isolation: isolate; /* ::before をこのセクションの中だけで重ねる */
}

body.page-index main > .section:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 絵は 1536x1024。高さを決め打ちすると草花が切れるので、幅から比率で決める
     （66.67vw = 幅 × 1024/1536）。ただしセクションの高さ（100%）を上限にする。
     セクションの高さは画面幅が広がっても伸びないため、上限が無いと 1678px より
     広い画面で絵がセクションからはみ出し、次のセクションの地色に切られて
     横一直線の継ぎ目が出る。 */
  /* 絵を見切らせないよう、高さは幅から比率で決める（66.67vw = 幅 × 1024/1536）。
     上限はセクションの高さ（100%）だけ。セクションの高さは画面幅が広がっても
     伸びないので、これが無いと 1735px より広い画面で絵が次のセクションにはみ出し、
     地色に切られて横一直線の継ぎ目が出る。
     矢印やサムネイルとの重なりは、絵を縮めるのではなく
     スライダー側を白いパネルに載せて避けている（_slider.scss を参照）。 */
  /* 高さは幅から絵の比率で決める。66.67vw だと画面幅を基準にしてしまい、
     スクロールバーぶん（15px ほど）だけ箱が縦に余って cover が左右を削る。
     aspect-ratio ならこの要素の実際の幅が基準になるので、削れがゼロになる。 */
  aspect-ratio: 1536/1024;
  max-height: 100%;
  background: url("../images/hero.jpg") center top/cover no-repeat;
  opacity: 1;
  /* 絵の下端は白ではなく淡い丘。そのまま終わると継ぎ目が見えるので溶かして白に戻す。
     透明になりきるのを箱の下端（100%）に合わせてあるので、上限で切られる幅でも
     切り口の濃さがゼロになり、継ぎ目が出ない。 */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* 下端の境目をぼかす。地が白のまま終わると、次の section--soft の淡い緑と
   横一直線で切り替わってしまう（全画面ヒーローだった頃は .hero::after が
   同じ役をしていた）。透明から --c-soft へ送って、境目を作らない。
   透明側も --c-soft と同じ色にしておくこと。white を 0% にすると
   途中がくすんで灰色っぽい帯が出る。 */
body.page-index main > .section:first-child::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(243, 249, 238, 0) 0%, var(--c-soft) 100%);
  pointer-events: none;
  z-index: 0;
}

/* .container は既定で position が無く、そのままだと絵の下に潜る */
body.page-index main > .section:first-child > .container {
  position: relative;
  z-index: 1;
}

/* 見出しだけを置くセクション。次の内容が続くので下側は詰める */
.section--lead-only {
  padding-bottom: 48px;
}

/* 直前のセクションから内容が続く場合、上側の余白を殺す。
   .section + .section と同じ詳細度が必要なのでクラスを2つ重ねている。 */
.section.section--flush-top {
  padding-top: 0;
}

.section--soft {
  background: var(--c-soft);
}

.section--soft-l {
  background: var(--c-soft-l);
}

/* ストライプ枠付き白ボックス */
.stripe-box {
  position: relative;
  background: #FFF;
  padding: 60px 56px;
  margin: 0 auto;
  max-width: 1100px;
  border-radius: var(--r-box);
  /* 角丸の外にストライプがはみ出さないように刈り取る */
  overflow: hidden;
}

.stripe-box::before, .stripe-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--c-blue) 0 20px, var(--c-leaf-l) 20px 40px, var(--c-blue-l) 40px 60px, var(--c-leaf) 60px 80px);
}

.stripe-box::before {
  top: 0;
}

.stripe-box::after {
  bottom: 0;
}

.stripe-box > .stripe-l, .stripe-box > .stripe-r {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--c-blue) 0 20px, var(--c-leaf-l) 20px 40px, var(--c-blue-l) 40px 60px, var(--c-leaf) 60px 80px);
}

.stripe-box > .stripe-l {
  left: -3px;
}

.stripe-box > .stripe-r {
  right: -3px;
}

.sec-head {
  text-align: center;
  margin-bottom: 50px;
}

.sec-head__title {
  font-family: var(--font-round);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 700;
  color: var(--c-navy-d);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 20px;
}

.sec-head__lead {
  font-size: 1.55rem;
  color: var(--c-text);
  line-height: 2;
  font-weight: 500;
}

.sec-head__en {
  display: block;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-blue);
  letter-spacing: 0.14em;
  margin-bottom: 8px;
}

.sec-head__ja {
  display: block;
  font-family: var(--font-round);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 700;
  color: var(--c-navy-d);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

/* ==================================================================
   FLOW - ご利用の流れのステップカード
   ================================================================== */
/* ご利用の流れ：ステップカード（flow.php） */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 10px 0 0;
}

.flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--c-bg);
  border: 1px solid var(--c-soft-d);
  border-radius: var(--r-card);
  padding: 40px 28px 32px;
  box-shadow: 0 4px 16px rgba(120, 150, 110, 0.1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.flow__step:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(120, 150, 110, 0.16);
}

.flow__step__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #FFF;
  margin-bottom: 22px;
  box-shadow: 0 3px 10px rgba(120, 150, 110, 0.22);
}

.flow__step__num__label {
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.85;
}

.flow__step__num__no {
  font-family: var(--font-en);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 2px;
}

.flow__step__title {
  font-family: var(--font-round);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-navy-d);
  margin-bottom: 14px;
}

.flow__step__text {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--c-text);
}

/* ==================================================================
   ABOUT 4枚カード
   ================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  max-width: 1000px;
  margin: 0 auto;
}

.about-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px;
}

.about-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 22px;
  align-items: start;
}

.about-item__ban {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--c-blue);
  color: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.1;
  font-family: var(--font-round);
}

.about-item:nth-child(1) .about-item__ban {
  background: var(--c-blue);
}

.about-item:nth-child(2) .about-item__ban {
  background: var(--c-leaf-l);
}

.about-item:nth-child(3) .about-item__ban {
  background: var(--c-blue-l);
}

.about-item:nth-child(4) .about-item__ban {
  background: var(--c-leaf);
}

.about-item__ban__label {
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  opacity: 0.9;
  font-weight: 600;
  margin-bottom: 2px;
}

.about-item__ban__no {
  font-family: var(--font-en);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
}

.about-item__title {
  font-family: var(--font-round);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-navy-d);
  margin-bottom: 12px;
  line-height: 1.5;
}

.about-item__text {
  color: var(--c-text);
  font-size: 1.45rem;
  line-height: 1.95;
}

/* ==================================================================
   SERVICE CARDS
   ================================================================== */
.service-cards {
  display: grid;
  /* 上限を 1fr にして列が常に幅いっぱいを分け合うようにする。
     固定px上限だと「3列分がコンテナ幅を数px超えて2列に落ちる」事故が起きる。 */
  /* min() で包むのは、画面が 280px より狭いとき（折りたたみ端末を閉じた状態など）に
     列の最小値がコンテナを超えて横スクロールが出るのを防ぐため。
     280px 以上では従来どおり。 */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
  margin-top: 50px;
}

/* 2枚のときは横に間延びするので幅を絞って中央に置く。
   :has() 非対応ブラウザでは幅いっぱいに広がるだけで破綻はしない。 */
.service-cards:has(> :nth-child(2):last-child) {
  max-width: 800px;
  margin-inline: auto;
}

/* 1枚のときはさらに絞る。auto-fit は列が1つでも幅いっぱいまで伸ばすため、
   絞らないと画像とテキストだけが横に広がって間延びして見える。
   :has() 非対応ブラウザでは幅いっぱいに広がるだけで破綻はしない。 */
.service-cards:has(> :only-child) {
  max-width: 480px;
  margin-inline: auto;
}

.service-card {
  border-radius: var(--r-card);
  border-top: 5px solid var(--c-blue);
  background: #FFF;
  overflow: hidden;
  border: 1px solid var(--c-soft-d);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(120, 150, 110, 0.14);
}

.service-card__img {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--c-soft);
}

.service-card__img img, .service-card__img picture, .service-card__img picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
  display: block;
}

.service-card:hover .service-card__img img {
  transform: scale(1.06);
}

.service-card:nth-child(2) {
  border-top-color: var(--c-leaf);
}

.service-card:nth-child(3) {
  border-top-color: var(--c-blue-l);
}

.service-card__body {
  padding: 28px 28px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card__title {
  font-family: var(--font-round);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-navy-d);
  margin-bottom: 14px;
  line-height: 1.5;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--c-soft-d);
}

.service-card__title__sub {
  display: block;
  font-size: 1.2rem;
  color: var(--c-blue);
  font-family: var(--font-en);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-weight: 700;
}

/* サービスごとに色を割り当てて見分けやすくする。
   詳細ページの見出し帯（.service-detail--b が緑）と対応させている。 */
.service-card:nth-child(2) .service-card__title__sub {
  color: var(--c-leaf);
}

.service-card:nth-child(3) .service-card__title__sub {
  color: var(--c-blue-l);
}

.service-card__text {
  color: var(--c-text);
  font-size: 1.4rem;
  line-height: 1.9;
  margin-bottom: 22px;
  flex: 1;
}

.service-card__btn {
  align-self: stretch;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #FFF;
  background: var(--c-navy);
  padding: 14px 22px;
  border-radius: 999px;
  transition: background 0.3s;
}

.service-card__btn:hover {
  background: var(--c-navy-d);
}

/* ==================================================================
   NUMBERED CARDS (Voice/Interview)
   ================================================================== */
.numbered-cards {
  display: grid;
  /* .service-cards と同じ考え方 */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 28px;
}

/* 2枚は間延び、4枚は 3+1 で最後の1枚が浮く。どちらも幅を絞って
   2列に落とし込む。:has() 非対応でも表示が崩れることはない。 */
.numbered-cards:has(> :nth-child(2):last-child),
.numbered-cards:has(> :nth-child(4):last-child) {
  max-width: 800px;
  margin-inline: auto;
}

.numbered-card {
  border-radius: var(--r-card);
  background: #FFF;
  overflow: hidden;
  border: 1px solid var(--c-soft-d);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
  display: flex;
  flex-direction: column;
}

.numbered-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(120, 150, 110, 0.14);
}

.numbered-card__head {
  padding: 26px 26px 18px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px dashed var(--c-soft-d);
}

.numbered-card__head__label {
  font-family: var(--font-en);
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  color: var(--c-blue);
  font-weight: 700;
}

.numbered-card:nth-child(2) .numbered-card__head__label {
  color: var(--c-blue-l);
}

.numbered-card:nth-child(3) .numbered-card__head__label {
  color: var(--c-leaf);
}

.numbered-card__head__num {
  font-family: var(--font-en);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--c-navy);
  font-weight: 700;
}

.numbered-card__lead {
  padding: 22px 26px 14px;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.6;
}

.numbered-card__office {
  padding: 0 26px 22px;
  font-size: 1.3rem;
  color: var(--c-text-l);
  border-bottom: 1px solid var(--c-soft-d);
}

.numbered-card__office strong {
  color: var(--c-navy-d);
  font-weight: 700;
  font-size: 1.4rem;
}

/* ==================================================================
   PHOTO GRID（事業所の様子）
   ================================================================== */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px;
}

.photo-card {
  background: #FFF;
  border: 1px solid var(--c-soft-d);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
}

.photo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 28px rgba(120, 150, 110, 0.14);
}

.photo-card picture, .photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.photo-card figcaption {
  padding: 16px 20px 20px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-navy-d);
  text-align: center;
}

/* ==================================================================
   Q&A
   ================================================================== */
.qa {
  display: grid;
  gap: 14px;
  max-width: 880px;
  margin: 0 auto;
}

.qa__item {
  background: #FFF;
  border-left: 5px solid var(--c-blue);
  border-bottom: 1px solid var(--c-soft-d);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.qa__item:nth-child(4n+2) {
  border-left-color: var(--c-blue-l);
}

.qa__item:nth-child(4n+3) {
  border-left-color: var(--c-leaf-l);
}

.qa__item:nth-child(4n+4) {
  border-left-color: var(--c-leaf);
}

.qa__q {
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: 18px;
  align-items: center;
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
}

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

.qa__q__mark {
  width: 44px;
  height: 44px;
  background: var(--c-blue);
  color: #FFF;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 700;
}

.qa__item:nth-child(4n+2) .qa__q__mark {
  background: var(--c-blue-l);
}

.qa__item:nth-child(4n+3) .qa__q__mark {
  background: var(--c-leaf-l);
}

.qa__item:nth-child(4n+4) .qa__q__mark {
  background: var(--c-leaf);
}

.qa__q__text {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.7;
  font-family: var(--font-round);
}

.qa__q__chev {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-soft);
  display: grid;
  place-items: center;
  color: var(--c-navy);
  transition: transform 0.35s var(--ease);
}

.qa__item[open] .qa__q__chev {
  transform: rotate(180deg);
  background: var(--c-navy);
  color: #FFF;
}

.qa__a {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 4px 28px 26px;
}

.qa__a__mark {
  width: 44px;
  height: 44px;
  background: var(--c-navy);
  color: #FFF;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 700;
  align-self: start;
}

.qa__a__text {
  color: var(--c-text);
  font-size: 1.45rem;
  line-height: 2;
  padding-top: 6px;
}

/* ==================================================================
   PAGE HERO (サブページ)
   ================================================================== */
.page-hero {
  position: relative;
  /* トップと同じ水彩の空を敷く。以前はべた塗りのグラデーション1枚だったため、
     水彩のトップと下層の各ページで第一印象が分断されていた。
     画像はトップで読み込み済みのものを使い回すので追加の転送は起きない。
     手前の重ねは下へ行くほど不透明にしてある。h1（--c-navy-d）が乗るのは
     下端なので、そこだけ確実に地を作れば読みやすさは落ちない。 */
  background: linear-gradient(180deg, rgba(232, 246, 253, 0.55) 0%, rgba(243, 249, 238, 0.9) 72%, var(--c-soft) 100%), url("../images/hero.webp") center top/cover no-repeat;
  padding: 220px 0 56px;
  text-align: center;
  overflow: hidden;
}

.page-hero h1 {
  font-family: var(--font-round);
  font-size: clamp(2.4rem, 3.6vw, 3.4rem);
  font-weight: 700;
  color: var(--c-navy-d);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.page-hero__en {
  display: block;
  font-family: var(--font-en);
  font-size: 1.5rem;
  color: var(--c-blue);
  letter-spacing: 0.14em;
  margin-bottom: 8px;
  font-weight: 700;
}

/* ==================================================================
   IMG TEXT
   ================================================================== */
.imgtext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.imgtext__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--r-box);
}

.imgtext__img img, .imgtext__img picture, .imgtext__img picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 見出しの上に置く欧文の添字。.sec-head__en / .page-hero__en と同じ扱い */
.imgtext__en {
  display: block;
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-blue);
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.imgtext__title {
  font-family: var(--font-round);
  font-size: clamp(2.2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-navy-d);
  margin-bottom: 22px;
}

.imgtext__text p {
  color: var(--c-text);
  font-size: 1.5rem;
  margin-bottom: 14px;
  line-height: 1.95;
}

/* ==================================================================
   SERVICE DETAIL
   ================================================================== */
.service-detail {
  border-radius: var(--r-box);
  background: #FFF;
  border: 1px solid var(--c-soft-d);
  overflow: hidden;
  max-width: 1040px;
  margin: 0 auto;
}

.service-detail__head {
  background: var(--c-blue-l);
  color: #FFF;
  padding: 28px 36px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.service-detail--b .service-detail__head {
  background: var(--c-leaf-l);
}

.service-detail__head .tag {
  background: rgba(255, 255, 255, 0.25);
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: var(--font-en);
}

.service-detail__head h2 {
  font-family: var(--font-round);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.service-detail__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  padding: 36px;
}

/* 読み込み前に高さを確保する。指定しないと lazy 読み込みの完了まで高さ 0 になり、
   画像が入った瞬間に下の文章が押し下げられる（縦積みのスマホで特に目立つ）。 */
.service-detail__body picture {
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  border-radius: var(--r-sm);
}

.service-detail__body picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-detail__text p {
  margin-bottom: 14px;
  font-size: 1.5rem;
  line-height: 1.95;
}

.service-detail__meta {
  background: var(--c-soft);
  padding: 22px 24px;
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.service-detail__meta dt {
  font-size: 1.15rem;
  color: var(--c-text-l);
  font-weight: 700;
  font-family: var(--font-round);
}

.service-detail__meta dd {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--c-navy-d);
  font-family: var(--font-round);
}

/* ==================================================================
   CTA BAND
   ================================================================== */
.cta-band {
  position: relative;
  /* 空のグラデーション。白文字のまま明るくするための構成。
     この帯の文字はすべて「大きい文字」（18.66px以上の太字）にしてあり、
     求められるコントラストが 4.5:1 ではなく 3:1 になる。それが前提で
     上端に --c-blue を置ける。文字が乗る範囲の最小コントラストは 3.35。
     ここを崩さないための条件は2つ:
       1. .cta-band__lead を 19px 未満または標準太さに戻さないこと
          （戻すと基準が 4.5:1 になり、3.35 では足りなくなる）
       2. ::before の雲を中央へ広げないこと（白文字のコントラストが下がる）
     下端は従来と同じ --c-navy。 */
  background: linear-gradient(165deg, var(--c-blue) 0%, var(--c-navy) 100%);
  color: #FFF;
  padding: 80px 0;
  overflow: hidden;
  text-align: center;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 雲の広がり。以前はトークンに無いピンク(#e774b0)が入っていて水彩の青緑から
     浮いていたので、白の光と空の水色（--c-blue-l）に置き換える。
     中心を四隅に寄せ半径を 28% に絞ってあるのは、文字が乗る中央を明るくしない
     ため。雲は地を明るくするので、白文字に対してはコントラストを下げる側に効く。 */
  background-image: radial-gradient(circle at 5% 6%, rgba(255, 255, 255, 0.16), transparent 28%), radial-gradient(circle at 95% 94%, rgba(143, 192, 232, 0.18), transparent 28%);
}

.cta-band__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.cta-band__title {
  font-family: var(--font-round);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  margin-bottom: 16px;
}

/* 19px の太字。見た目の都合ではなくコントラストの要件で決まっている。
   html は font-size:62.5% なので 1.9rem = 19px。WCAG は 18.66px 以上の太字を
   「大きい文字」として 3:1 で許容するので、この帯の明るい地の上でも成立する。
   15px の標準太さに戻すと基準が 4.5:1 になり、現在の 3.35 では不足する。
   opacity も掛けない。掛けると実効コントラストがさらに下がる。 */
.cta-band__lead {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 36px;
}

.cta-band__actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-band .btn {
  background: var(--c-coral);
}

.cta-band .btn:hover {
  background: var(--c-coral-d);
}

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer {
  background: #FFF;
  padding-top: 60px;
  border-top: 1px solid var(--c-soft-d);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 48px;
  padding-bottom: 48px;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.site-footer__addr {
  margin-top: 22px;
  font-size: 1.3rem;
  line-height: 1.95;
  color: var(--c-text-l);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.site-footer__nav h3 {
  font-family: var(--font-round);
  font-size: 1.4rem;
  color: var(--c-navy-d);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  font-weight: 700;
}

.site-footer__nav a {
  display: inline-block;
  font-size: 1.35rem;
  line-height: 2.2;
  color: var(--c-text);
  font-weight: 500;
  /* 指で押す余地を作る。行間だけでは当たり判定が 20px 程度しかない */
  padding: 4px 0;
}

.site-footer__nav a:hover {
  color: var(--c-navy);
}

/* ==================================================================
   PAGE-TOP
   ================================================================== */
.page-top {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #FFF;
  /* opacity と pointer-events だけではタブ順に残る。画面上は見えないのに
     フォーカスが吸われ、キーボード利用者には「Tab が効かなくなった」ように
     見える。読み上げでも押せないボタンが読まれる。visibility で確実に外す */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s var(--ease), background 0.3s;
  display: grid;
  place-items: center;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:hover {
  background: var(--c-navy-d);
  transform: translateY(-3px);
}

/* ==================================================================
   CONTENT
   ================================================================== */
.content {
  font-size: 1.5rem;
  line-height: 2;
  color: var(--c-text);
  max-width: 860px;
  margin: 0 auto;
}

.content h2 {
  font-family: var(--font-round);
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-navy-d);
  margin: 56px 0 22px;
  padding: 12px 20px 12px 22px;
  background: var(--c-soft);
  border-left: 5px solid var(--c-navy);
}

.content h3 {
  font-family: var(--font-round);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--c-navy-d);
  margin: 36px 0 14px;
  padding-left: 18px;
  position: relative;
}

.content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 20px;
  background: var(--c-blue);
}

.content p {
  margin-bottom: 16px;
}

.content ul {
  margin: 8px 0 24px 0;
}

.content ul li {
  list-style: none;
  padding-left: 26px;
  margin-bottom: 8px;
  position: relative;
}

.content ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 12px;
  height: 12px;
  background: var(--c-blue);
  border-radius: 50%;
}

.content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0 28px;
  background: #FFF;
  overflow: hidden;
  border: 1px solid var(--c-soft-d);
  border-radius: var(--r-sm);
}

.content table th, .content table td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--c-soft-d);
  font-size: 1.45rem;
}

.content table th {
  background: var(--c-soft);
  width: 32%;
  font-weight: 700;
  color: var(--c-navy-d);
  font-family: var(--font-round);
}

.content table tr:last-child th, .content table tr:last-child td {
  border-bottom: 0;
}

/* 表の中に添える用語の補足。本文より一段控えめにして、値の読み取りを邪魔しない。
   色は --c-text-l（白地に 5.74:1）なので、小さくしても AA を満たす */
/* 本文中のリンク。
   サイト全体のリンクは _base.scss で color: inherit にしているため、
   何も指定しないと本文と同じ色になり、リンクだと気づけない。
   色だけでは色覚特性のある方に伝わらないので、下線も併用する（WCAG 1.4.1）。
   お問い合わせフォームの同意欄と同じ見た目にそろえてある。 */
.content a {
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.2s;
}

.content a:hover,
.content a:focus-visible {
  color: var(--c-coral-d);
}

/* 箇条書きの項目にぶら下がる注記。本文と同じ重みの文には使わないこと
   （小さく薄くすると、読ませたい一文ほど読み飛ばされる）。
   色は --c-text-l。白地に 5.74:1 なので、小さくしても AA を満たす。 */
.table-note {
  display: block;
  margin-top: 4px;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--c-text-l);
}

/* 表のセルの中の段落。セル自身の余白と二重にならないよう、
   最初と最後の段落だけ外側の余白を落とす */
.content table td > p:last-child {
  margin-bottom: 0;
}

/* 本文末尾に置く更新日。控えめに */
.content__updated {
  margin-top: 48px;
  font-size: 1.3rem;
  color: var(--c-text-l);
  text-align: right;
}

/* ==================================================================
   FORM
   ================================================================== */
.form {
  border-radius: var(--r-box);
  background: #FFF;
  padding: 48px;
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--c-soft-d);
}

.form-row {
  margin-bottom: 24px;
}

.form-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--c-navy-d);
  font-size: 1.5rem;
  font-family: var(--font-round);
}

/* 同意欄にも同じ目印を出す。必須なのに印が無いと、
   「必須」を全部埋めたつもりで送信して弾かれる往復が起きる */
.form-row .required, .form-consent .required {
  background: var(--c-blue);
  color: #FFF;
  padding: 3px 10px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-round);
  margin-right: 6px;
}

/* 任意項目。プレースホルダは入力を始めると消えるので、ラベル側に置く。
   必須と混同しないよう、塗りではなく輪郭で区別する */
.form-row .optional {
  background: transparent;
  color: var(--c-text-l);
  border: 1px solid var(--c-soft-d);
  padding: 2px 9px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-round);
}

.form-row input[type=text], .form-row input[type=email], .form-row input[type=tel], .form-row select, .form-row textarea {
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-soft-d);
  background-color: var(--c-soft-l);
  color: var(--c-text);
  /* iOS Safari は 16px 未満の入力欄にフォーカスすると画面を自動拡大する。
     入力のたびに表示が飛ぶのを避けるため 16px を下回らせない。 */
  font-size: 1.6rem;
  font-family: inherit;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.form-row textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.8;
}

/* 選択欄の矢印。OS 既定のままだと枠の右端ぎりぎりに貼り付いて、
   左右 18px の余白を取っている他の入力欄から浮いて見える。
   自前の印に差し替えて、余白の位置をそろえる。
   形はよくある質問の開閉マークと同じ（polyline 6 9 12 15 18 9）。
   右の余白を 44px 取るのは、長い選択肢の文字が印の下に潜らないようにするため。 */
.form-row select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233d69b6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
}

.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--c-navy);
  background-color: #FFF;
  /* 光の色は _base.scss のフォーカス枠（--c-navy）と合わせる。
     ここだけ緑にすると、同じフォームの中でチェックボックスだけ濃紺、
     入力欄だけ緑、と2種類の見え方が混ざる。 */
  box-shadow: 0 0 0 4px rgba(61, 105, 182, 0.22);
}

.form-row .hint {
  font-size: 1.2rem;
  color: var(--c-text-l);
  margin-top: 6px;
  display: block;
}

/* 文字数カウンタが上限を超えたとき。色だけに頼らず太字も併用する */
.form-row .hint.is-over {
  color: #c23f3f;
  font-weight: 700;
}

.form-row.has-error input, .form-row.has-error textarea, .form-row.has-error select {
  border-color: #c23f3f;
  background-color: #FFF1F1;
}

/* .form-row 配下に限定しない。同意欄のエラーだけ色が付かなくなる */
.form .error {
  display: block;
  color: #c23f3f;
  font-size: 1.3rem;
  margin-top: 6px;
  font-weight: 700;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

/* Turnstile。確認が必要なときだけ中身が描画されるので、
   何も出ないときに余白が空かないよう高さは指定しない。 */
.form-turnstile {
  margin-top: 20px;
  /* ウィジェットは固定幅の iframe。送信ボタンと同じく中央に置く */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.form-turnstile:empty {
  display: none;
}

.form-turnstile .cf-turnstile:not(:empty) {
  margin-top: 4px;
}

.form-turnstile.has-error {
  padding: 12px;
  background: #FFF1F1;
  box-shadow: inset 0 0 0 1.5px #c23f3f;
}

/* hidden 属性ではなく中身の有無で消す。要素を DOM に置いたままにしないと、
   読み上げソフトがライブリージョンとして追跡できず、
   「確認にチェックを入れてください」が無音のまま伝わらない */
.form-turnstile .error:empty {
  display: none;
}

/* フォーカスを受け取れるようにした span に、輪郭を出す */
.form-turnstile .error:focus-visible {
  outline-offset: 4px;
}

.form-actions {
  text-align: center;
  margin-top: 36px;
}

.form-consent {
  background: var(--c-soft);
  padding: 20px;
  font-size: 1.35rem;
  color: var(--c-text);
}

/* 他の項目と同じく、未入力の枠そのものにも赤を出す */
.form-consent.has-error {
  background: #FFF1F1;
  box-shadow: inset 0 0 0 1.5px #c23f3f;
}

.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

/* リンクと後続の文をひとつの流し込みにまとめる要素。
   ここを挟まないと、裸のテキストが匿名のフレックスアイテムになり
   「プライバシーポリシー」と「に同意のうえ送信します。」が
   それぞれ独立して折り返され、狭い画面で不自然に改行される。 */
.form-consent__text {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.9;
}

/* サイト全体のリンクは色を継承する設定なので、本文中のリンクだと気づけない。
   色で目立たせたうえで、色覚に依存しないよう下線も残す（WCAG 1.4.1）。 */
.form-consent__text a {
  color: var(--c-navy);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 0.2s;
}

.form-consent__text a:hover,
.form-consent__text a:focus-visible {
  color: var(--c-coral-d);
}

/* 送信に必須のチェックなので、指で確実に押せる大きさを確保する */
.form-consent input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--c-navy);
}

/* 幅と余白はここで持つ。PHP 側でインラインの margin を書くと
   margin-bottom を打ち消してしまい、後続の要素とくっつく */
.alert {
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 20px 24px;
  font-size: 1.45rem;
}

/* 送信結果を読み上げに届けるため、JS がこの要素へフォーカスを移す
   （main.js）。そのとき既定のフォーカスリングが出て、画面には
   「クリックしていないのに青枠が付いた」ように見えてしまう。
   tabindex="-1" なので Tab では到達せず、操作対象でもないため輪郭は不要。
   フォーカス自体は外さない——外すと読み上げに結果が伝わらなくなる。 */
.alert:focus, .alert:focus-visible {
  outline: none;
}

.alert-success {
  background: #E6F6EC;
  color: #2E7D4F;
  border: 1px solid #BCE3CB;
}

.alert-error {
  background: #FCEBEB;
  color: #9B2C2C;
  border: 1px solid #F1B7B7;
}

/* 送信完了後の案内。
   宛先を打ち間違えていても、こちらからは知らせようがない。読み飛ばされると
   気づく機会そのものが失われるため、完了メッセージより目を引く見た目にする。 */
.notice {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 24px;
  background: #FFF;
  border: 2px solid var(--c-coral);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-size: 1.4rem;
  line-height: 1.9;
}

.notice__lead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-navy-d);
  margin-bottom: 10px;
}

/* 見出し文はまとめて1つのアイテムにする。裸のテキストのままだと
   「控えのメールを」と「へお送りしました。」が別々に折り返される。 */
.notice__lead-text {
  flex: 1 1 auto;
  min-width: 0;
}

.notice__badge {
  flex: 0 0 auto;
  background: var(--c-coral);
  color: #FFF;
  padding: 3px 12px;
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--font-round);
}

/* 打ち間違いに気づけるよう、宛先そのものを読みやすく見せる */
.notice__mail {
  background: var(--c-soft);
  padding: 2px 8px;
  font-family: var(--font-en);
  word-break: break-all;
}

.notice__body {
  margin: 0;
}

.notice__body strong {
  color: var(--c-coral-d);
}

/* ==================================================================
   SLIDER - 事業所の様子を伝える画像スライド（トップ）

   土台は CSS のスクロールスナップ。JavaScript が無くても
   横スクロールで全部見られる。main.js は矢印・サムネイル・枚数表示を
   足すだけで、無い場合はそれらを hidden のままにしてある。
   ================================================================== */
/* 地に水彩を敷いたので、矢印・枚数表示・サムネイルが絵の上に直接乗ると
   見分けづらくなる。白いパネルを1枚挟んで、操作部の背後を必ず白にする。
   絵の高さは画面幅に比例して伸びるため、絵の側だけで避けようとすると
   幅ごとに調整が要る。パネルなら幅が変わっても関係が崩れない。
   内側の余白ぶん広げてあるので、スライド自体の幅は 960px のまま。 */
.slider {
  position: relative;
  max-width: 1008px;
  margin: 28px auto 0;
  padding: 24px 24px 14px;
  background: #FFF;
  border-radius: var(--r-box);
  box-shadow: 0 10px 30px rgba(120, 150, 110, 0.1);
}

/* スクロールバーは消す。代わりの案内は矢印・サムネイル・枚数表示が担う。
   キーボードで動かせるよう tabindex を付けてあるので、focus は必ず見せる。 */
.slider__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--r-card);
  background: var(--c-soft-d);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.slider__viewport::-webkit-scrollbar {
  display: none;
}

.slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
}

.slider__slide picture {
  display: block;
}

/* 高さを先に確保して、読み込み時に下の要素が飛び跳ねないようにする */
.slider__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672/941;
  object-fit: cover;
}

/* --- 矢印と枚数表示 -------------------------------------------- */
.slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.slider__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--c-soft-d);
  background: #FFF;
  color: var(--c-navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(120, 150, 110, 0.1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s, color 0.25s;
}

.slider__arrow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(120, 150, 110, 0.14);
  color: var(--c-blue);
}

/* 端まで来たら効かないことを見せる。消さずに薄くするのは、
   ボタンの位置が動くと押し間違いのもとになるため。
   disabled 属性は使わない（focus が外れてしまう。main.js 側の説明を参照）。
   完全に読めなくならないよう .55 までにとどめる。 */
.slider__arrow[aria-disabled=true] {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.slider__arrow[aria-disabled=true]:hover {
  transform: none;
  box-shadow: none;
  color: var(--c-navy);
}

.slider__count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-text-l);
  letter-spacing: 0.08em;
  min-width: 72px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --- サムネイル ------------------------------------------------ */
.slider__thumbs {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 4px 4px 12px;
  list-style: none;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* 既定のスクロールバーは色も太さも浮くので、水彩の配色に合わせて細く敷き直す。
     Firefox は scrollbar-*、Chrome / Safari は ::-webkit-scrollbar-* と
     系統が違うので両方書く。片方だけだと一方のブラウザで既定のまま出る。 */
  scrollbar-width: thin;
  scrollbar-color: var(--c-navy-l) var(--c-soft-d);
}

.slider__thumbs::-webkit-scrollbar {
  height: 6px;
}

.slider__thumbs::-webkit-scrollbar-track {
  background: var(--c-soft-d);
  border-radius: 999px;
}

/* 空の水色（#8fc0e8）だと溝の淡い緑に対して 1.61:1 しかなく、
   どこまでスクロールしたのか見えない。#4e7bc4 なら 3.53:1。 */
.slider__thumbs::-webkit-scrollbar-thumb {
  background: var(--c-navy-l);
  border-radius: 999px;
}

.slider__thumbs::-webkit-scrollbar-thumb:hover {
  background: var(--c-blue);
}

/* 選択外のサムネイルは .55 まで透ける。背後が白でないと、そこにあるものが
   透けて写真が濁る（先頭セクションの地に水彩を敷いたときに実際に濁った）。
   白を下に敷いて、透けた先が必ず白になるようにする。 */
.slider__thumbs__item {
  flex: 0 0 auto;
  background: #FFF;
  border-radius: var(--r-sm);
}

.slider__thumb {
  display: block;
  width: 96px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}

.slider__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672/941;
  object-fit: cover;
}

.slider__thumb:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* いま表示している1枚。色だけで示すと色覚特性によっては伝わらないので、
   枠線・不透明度・わずかな浮きの3つで区別する。 */
.slider__thumb.is-current {
  opacity: 1;
  border-color: var(--c-blue);
  transform: translateY(-2px);
}

/* 動きを減らす設定のときは滑らせない。スナップ自体は残すので
   スワイプでの1枚ずつの送りは変わらない。 */
@media (prefers-reduced-motion: reduce) {
  .slider__viewport,
  .slider__thumbs {
    scroll-behavior: auto;
  }
  .slider__arrow,
  .slider__thumb {
    transition: none;
  }
  .slider__arrow:hover,
  .slider__thumb:hover,
  .slider__thumb.is-current {
    transform: none;
  }
}
/* ==================================================================
   REVEAL
   ================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.reveal-stagger.is-visible > *:nth-child(1) {
  transition-delay: 0.04s;
}

.reveal-stagger.is-visible > *:nth-child(2) {
  transition-delay: 0.09s;
}

.reveal-stagger.is-visible > *:nth-child(3) {
  transition-delay: 0.14s;
}

.reveal-stagger.is-visible > *:nth-child(4) {
  transition-delay: 0.19s;
}

.reveal-stagger.is-visible > *:nth-child(5) {
  transition-delay: 0.24s;
}

.reveal-stagger.is-visible > *:nth-child(6) {
  transition-delay: 0.29s;
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  /* セレクタは .js を含めて 4 行目・6 行目と詳細度をそろえること。
     メディアクエリは詳細度を上げないため、`.reveal`（0,1,0）と書くと
     `.js .reveal`（0,2,0）に負けて opacity: 0 が残り続ける。
     動きを減らす設定の利用者には、スクロールするまで本文が見えない。 */
  .js .reveal, .js .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}
/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 1200px) {
  .header-main {
    padding-left: 16px;
  }
  .logo-text__main {
    font-size: 2.6rem;
  }
  .header-navs {
    padding-right: 18px;
    gap: 8px;
  }
  .main-nav > ul {
    gap: 20px;
  }
  .main-nav a {
    font-size: 1.4rem;
  }
  .header-subnav {
    gap: 20px;
  }
  .header-subnav a {
    font-size: 1.2rem;
  }
  .header-cta {
    padding: 0 22px;
    font-size: 1.3rem;
  }
}
@media (max-width: 1024px) {
  :root {
    --header-h: 70px;
  } /* .header-main の min-height と合わせる */
  .section {
    padding: 80px 0;
  }
  /* Mobileヘッダー */
  .header-tag {
    display: none;
  }
  .header-main {
    min-height: 70px;
    padding-left: 16px;
  }
  .header-navs {
    display: none;
  }
  .header-cta {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
  .logo-text__tag {
    font-size: 1.3rem;
    margin-bottom: 4px;
  }
  .logo-text__main {
    font-size: 1.9rem;
  }
  /* ロゴマークは img。SVG から差し替えたときに縮小指定が外れていた */
  .logo-mark img {
    width: 44px;
    height: 44px;
  }
  /* ロゴとハンバーガーの当たり判定が接していて誤タップしやすい。
     padding だとリンクの当たり判定が広がるだけなので margin で離す。 */
  .logo {
    margin-right: 14px;
  }
  /* Mobileナビ表示 */
  .global-nav-mobile {
    display: block;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFF;
    z-index: 99;
    padding: 32px 24px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease), visibility 0.35s;
    /* 画面外へ寄せるだけだとリンクが Tab で拾える。aria-hidden="true" と矛盾し、
       キーボード操作だと見えない場所へフォーカスが飛ぶ。 */
    visibility: hidden;
  }
  .global-nav-mobile.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .global-nav-mobile ul {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .global-nav-mobile li {
    border-bottom: 2px dashed var(--c-soft-d);
  }
  .global-nav-mobile a {
    display: block;
    padding: 18px 4px;
    font-size: 1.6rem;
    font-weight: 700;
  }
  /* 現在地の表示。1024px 以下では PC 用ナビが display:none になるため、
     ここに出さないとスマートフォンでは現在地を知る手段が無くなる。
     色だけに頼ると色覚特性のある方に伝わらないので、左の帯でも示す。 */
  .global-nav-mobile a[aria-current=page] {
    color: var(--c-navy-d);
    border-left: 4px solid var(--c-navy);
    padding-left: 12px;
  }
  .global-nav-mobile .mob-cta {
    margin-top: 20px;
    background: var(--c-coral);
    color: #FFF;
    text-align: center;
    border-bottom: 0;
  }
  .hero__catch {
    padding: 24px 0 18px;
  }
  .page-hero {
    padding: 130px 0 60px;
  }
  .flow-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* 列数は auto-fit が幅に応じて決めるので上書きしない。
     ここで 1fr に固定すると、2枚しかないカードが 1024px の時点で
     縦積みになり画面が間延びする。gap だけ詰める。 */
  .numbered-cards, .service-cards {
    gap: 24px;
  }
  .imgtext {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .service-detail__body {
    grid-template-columns: 1fr;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
  .stripe-box {
    padding: 40px 28px;
  }
}
@media (max-width: 720px) {
  .section {
    padding: 60px 0;
  }
  .sec-head__title {
    font-size: 2rem;
  }
  .sec-head__ja {
    font-size: 2rem;
  }
  .form {
    padding: 28px 20px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .qa__q {
    grid-template-columns: 44px 1fr 24px;
    gap: 14px;
    padding: 18px 20px;
  }
  .qa__q__mark {
    width: 38px;
    height: 38px;
    font-size: 1.7rem;
  }
  .qa__a {
    grid-template-columns: 44px 1fr;
    gap: 14px;
    padding: 14px 20px;
  }
  .qa__a__mark {
    width: 38px;
    height: 38px;
    font-size: 1.7rem;
  }
  .btn {
    min-width: auto;
    width: 100%;
    max-width: 340px;
  }
  .service-detail__meta {
    grid-template-columns: 1fr 1fr;
  }
  .about-item {
    grid-template-columns: 70px 1fr;
    gap: 16px;
  }
  .about-item__ban {
    width: 70px;
    height: 70px;
  }
  .about-item__ban__no {
    font-size: 2.1rem;
  }
  .flow-steps {
    grid-template-columns: 1fr;
  }
  .flow__step {
    padding: 32px 24px 28px;
  }
  /* 社名「あおぞらポケット六本松」は 20px で 229px ある。ヘッダーはこれに
     ロゴマーク・左右の余白・ハンバーガーが加わって最小 369px を要求するため、
     360px の端末（Android で最も多い幅）で 9px、320px で 49px 横にはみ出す。
     固定分は 369 − 229 = 140px。文字幅は 11.45em なので、
     入る大きさは (100vw − 140px) ÷ 11.45。385px 以上では min() の左が勝ち、
     いまの見た目のまま変わらない。文言を変えたら 11.45 を測り直すこと。 */
  .logo-text__main {
    font-size: min(1.9rem, (100vw - 140px) / 11.45);
  }
  .logo-text__tag {
    font-size: 1.2rem;
    margin-bottom: 3px;
  }
  .hero__catch__title {
    line-height: 1.4;
  }
  .stripe-box {
    padding: 30px 20px;
  }
  /* 画像スライド。幅の分岐はこのファイルに集めることになっているので、
     _slider.scss 側には置かない（両方にあると、どちらが勝つか分かりにくい） */
  /* スマホでは写真がそのまま情報なので、幅をできるだけ画像に回す。
     親の .container が左右 24px を持っているぶんを負のマージンで食い戻し、
     外側に 2px だけ残す（24 − 22 = 2）。ここを 24px 以上にすると横にはみ出す。
     パネルの内側も 2px。白い縁はカードだと分かる最低限まで削ってある。
       画面 375px の場合： 375 − 2×2 − 2×2 = 367px（詰める前は 299px）
     角丸は外側 18px・内側 16px。縁が 2px しかないので差も 2px に合わせる。
     内側を外側より小さくしないと角が歪んで見える。 */
  .slider {
    margin: 20px -22px 0;
    padding: 2px 2px 3px;
    border-radius: 18px;
  }
  .slider__viewport {
    border-radius: 16px;
  }
  .slider__arrow {
    width: 46px;
    height: 46px;
  }
  .slider__thumb {
    width: 72px;
  }
  .slider__thumbs {
    gap: 8px;
  }
  /* 表を縦積みにする。2列のままだと本文側が 200px ほどしか取れず、
     1行に10文字しか入らない（対象者の箇条書きが特に読めない）。

     display を変えると、ブラウザは表としての意味づけを落としてしまい、
     読み上げで「どの項目の値か」が分からなくなる。
     そのため HTML 側に role="table" / rowgroup / row / rowheader / cell を
     明記してある。role を消すとこの指定が読み上げを壊すので、
     どちらか片方だけ触らないこと。 */
  .content table,
  .content table tbody,
  .content table tr,
  .content table th,
  .content table td {
    display: block;
    width: auto;
  }
  .content table tr {
    border-bottom: 1px solid var(--c-soft-d);
  }
  .content table tr:last-child {
    border-bottom: 0;
  }
  .content table th {
    border-bottom: 0;
    padding: 12px 16px 6px;
  }
  .content table td {
    padding: 6px 16px 16px;
    border-bottom: 0;
  }
}
/* ヒーローのキャッチを、狭い画面だけ3行に組み直す

   1行目「あなたの「働きたい！」を、」は実測 13.16em ある。
   html が 62.5% なので clamp(2.8rem, 4.6vw, 4.4rem) の下限は 28px、
   左右の余白は親の .container が 24px ずつ持つ。つまり
       13.16 × 28 = 369px  ／  使える幅 = 画面幅 − 48px
   となり、収まるのは画面幅 417px から。それより狭い端末では1行目が
   勝手に折り返り、「を、」だけが次の行に落ちて締まりのない見え方になる。

   そこで 520px 以下（496px に少し余裕を持たせた値。webfont が落ちて
   ヒラギノ丸ゴにフォールバックした場合の字幅差を吸収する）では
       あなたの ／ 「働きたい！」を ／ かたちにします。
   の3行にする。この組みでは読点を出さない。 */
@media (max-width: 520px) {
  .hero__catch__br {
    display: inline;
  }
  .hero__catch__comma {
    display: none;
  }
  /* 3行に組んでも、いちばん長い行「かたちにします。」は実測 8.16em ある。
     字を 28px で固定したままだと、内容幅が 229px を切るあたりから収まらず、
     また1文字だけ次の行に落ちる（初代 iPhone SE の 320px、
     Galaxy Fold を畳んだときの 280px など）。
     そこで下限を固定せず、入る大きさまで自動で落とす。
     必要な上限は 100 ÷ 8.16 = 12.25cqw。余裕をみて 12cqw にしてある。
     内容幅が 283px 以上（画面幅およそ 331px 以上）では min() の左側が勝つので、
     ふつうのスマホの見た目はこれまでと変わらない。
     8.16 は上記の行の字幅。文言を変えたら測り直すこと。 */
  .hero__catch__title {
    font-size: min(2.8rem, 12cqw);
  }
}
/* ==================================================================
   PRINT - 紙に出したときの体裁

   相談支援専門員やご家族が事業所情報を印刷する場面がある。
   画面向けの指定をそのまま紙に出すと読めないものが混ざるので、ここで外す。
   ================================================================== */
@media print {
  /* いちばん重要。表示演出は「画面に入るまで opacity: 0」なので、
     下までスクロールせずに印刷すると、その部分が白紙で出る。
     詳細度は _reveal.scss の `.js .reveal`（0,2,0）に合わせたうえで
     !important を付ける（メディアクエリは詳細度を上げないため）。 */
  .js .reveal,
  .js .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* 紙では追従しても意味がなく、本文に重なる */
  .site-header {
    position: static;
    background: #FFF;
    backdrop-filter: none;
  }
  .page-top,
  .nav-toggle,
  .main-nav,
  .header-subnav {
    display: none;
  }
  /* 画像スライドは操作できない。1枚目だけ残して、残りと操作部品は落とす。
     12枚すべて出すと紙を大量に使う。 */
  .slider__nav,
  .slider__thumbs {
    display: none;
  }
  .slider__viewport {
    overflow: visible;
    display: block;
    box-shadow: none;
  }
  .slider__slide:not(:first-child) {
    display: none;
  }
  /* 背景の塗りと影はインクを食うだけ。地は白にする */
  body,
  .section--soft,
  .section--soft-l,
  .content table,
  .qa__item {
    background: #FFF !important;
    box-shadow: none !important;
  }
  /* 折り返しの体裁。見出しだけが行末に残らないようにする */
  h1, h2, h3 {
    break-after: avoid;
  }
  .content table tr,
  .qa__item,
  .slider__slide {
    break-inside: avoid;
  }
  /* 紙ではリンク先が分からない。外部リンクだけ URL を添える
     （内部リンクはサイト内なので出さない。全部に出すと読みにくくなる） */
  a[href^=http]::after {
    content: "（" attr(href) "）";
    font-size: 0.85em;
    word-break: break-all;
  }
  /* よくあるご質問は <details>。閉じたまま印刷すると答えが出ない */
  .qa__a {
    display: block !important;
  }
}