/* XD原本は「JOY WORKZ」等の英数字を素の Noto Sans（Noto Sans JPではない）で描いている。
   Noto Sans JPのラテン字形はCJKとの互換のため幅がわずかに広く、この差が英字混じりの
   見出し（JOY WORKZ 羽咋のデータ等）でカンプより間延びして見える原因だった(2026-08-11実測)。
   同じ family名でunicode-rangeをASCII英数字に絞ったNoto Sans本体を先に定義し、
   英数字だけこちらを優先させる（CJK文字はrange外なので下の可変フォントへ自然にフォールバック）。
   A-Z/a-z/0-9 全62字のサブセット（初回は本文実使用51字に絞ったが、fable-advisorレビューで
   F/G/T/X/xの欠落を指摘され、placeholder="mail@example.com"のxが単語内でJPへ落ちる不具合が
   判明したため62字フルへ拡張。約6KB。 */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/NotoSans-latin-regular.woff2?v=38991bd89b12") format("woff2");
  unicode-range: U+30-39, U+41-5A, U+61-7A;
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/NotoSans-latin-bold.woff2?v=3e4137c6d78f") format("woff2");
  unicode-range: U+30-39, U+41-5A, U+61-7A;
}

/* サイト実使用の722文字に絞った Noto Sans JP の可変フォント1本（wght軸100〜900）に統合。
   旧構成のmedium/semibold/bold/black静的4ファイルは155文字が欠落し、必須・ご用件・
   電話番号・フリガナ・同意事項などがヒラギノ等へサイレントにフォールバックしていた。
   470KBから216KBへ軽量化。絵文字⭐（U+2B50）だけは日本語フォントに含まれないため、
   XD原本でデザイナーが使用したInstagramリード文末尾のみ意図的にシステムフォントへ
   フォールバックする。文字を追加・変更したら、この722文字に無い字は表示できないため、
   Google Fontsのtext=パラメータで実使用文字を要求してサブセットを作り直すこと。 */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/NotoSansJP-variable.woff2?v=e681021ef85e") format("woff2");
}

:root {
  --cream: #faf6ea;
  --mint: #8ff0b4;
  --green: #8ff0b4;
  --orange: #ffad69;
  --mauve: #bca3ac;
  --purple: #7067cf;
  --lime: #e0fe4f;
  --charcoal: #494949;
  --aqua: #add5cf;
  --white: #fff;
  /* 1で自動送りを有効化。間隔はミリ秒単位。
     XDコメント④は「常時流れる or BABY TALEトップ式の＜＞送り」の2案だったが、
     デザイナー支給のモーション見本(リュウジくんへ/JW羽咋_PC版.mp4)に＜＞ボタンが
     存在せずカードが流れているため、常時流れる側で確定(2026-08-05)。 */
  --instagram-autoplay: 1;
  --instagram-autoplay-interval: 5000;
  --pickup-autoplay: 1;
  --pickup-autoplay-interval: 2600;
  /* スマホの左右余白。Brown Brown(本番)と同値。
     注意: 未定義のまま var(--gl-mobile) を使うと宣言全体が無効になり
     padding が 0 に化ける(2026-08-07 contactページで実際に発生)。 */
  --gl-mobile: 24px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--charcoal);
  background: var(--aqua);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 500;
}

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

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

button {
  color: inherit;
  font: inherit;
}

/* 視覚的には隠すが、スクリーンリーダーと検索エンジンには読ませる。
   トップページは見出しがヒーロー動画とロゴ画像で構成されており
   テキストのh1が存在しなかったため、SEO/アクセシビリティ用に使う。 */
.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--white);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-shell {
  width: 1440px;
  margin: 0 auto;
}

.site-footer {
  width: 1260px;
  margin: 0 auto 0 max(0px, calc(50% - 720px));
}

.site-shell {
  height: 6180px;
  background: var(--aqua);
}

.site-logo {
  position: fixed;
  top: 30px;
  left: 30px;
  z-index: 100;
  display: block;
  width: 100px;
}

.site-logo img {
  width: 100%;
  height: auto;
}

.pill-nav {
  position: fixed;
  top: 30px;
  left: 50%;
  z-index: 100;
  display: flex;
  width: 870px;
  height: 50px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 25px;
  background: var(--white);
  transform: translateX(-200px);
  box-shadow: 0 2px 8px rgb(73 73 73 / 8%);
}

.has-js .pill-nav {
  visibility: hidden;
  opacity: 0;
  transform: translate(-200px, -16px);
  transition:
    opacity .4s ease,
    transform .4s ease,
    visibility 0s linear .4s;
}

.has-js .pill-nav.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-200px, 0);
  transition-delay: 0s;
}

.pill-nav a {
  display: inline-flex;
  height: 50px;
  align-items: center;
  padding: 0 11px;
  font-size: 16px;
  /* 支給素材 navi.png(870x50@2x)と実測で照合: 900は太すぎる(ink比7.9% vs 素材5.35%)。
     500(Medium)がほぼ一致(5.64%)。900指定は旧フォント構成の見た目を追認した誤りだった
     ことが判明したため撤回する。モバイルドロワー(`@media (max-width:768px) .pill-nav a`)
     は別途900に明示上書き(従来の見た目を維持する既存判断のため、この修正はデスクトップ
     にのみ適用)。 */
  font-weight: 500;
  white-space: nowrap;
  transition: opacity .2s ease;
}

/* owner指摘(2026-08-13): ホバーは色を変えず、薄くなる一般的な挙動にする。
   当初オレンジ(--orange #ffad69)への変更を検討したが、白地のピルナビ上では
   コントラスト比1.84:1で文字が埋もれるため不採用。文字色(--charcoal)のまま
   opacityを落とすと白地と混ざって #929292 相当(3.11:1)になり、
   「薄くなった」と分かりつつ読める。 */
.pill-nav a:hover,
.pill-nav a:focus-visible {
  opacity: .6;
}

.pill-nav__instagram {
  width: 42px;
  justify-content: center;
  padding: 0 !important;
}

.pill-nav__instagram svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.pill-nav__instagram .pill-nav__instagram-dot {
  fill: currentColor;
  stroke: none;
}

.pill-nav__instagram-label,
.nav-toggle {
  display: none;
}

.section {
  position: relative;
  overflow: hidden;
}

.section-heading-row {
  display: flex;
  width: 936px;
  align-items: flex-start;
  gap: 70px;
  margin: 0 auto;
}

.section-heading {
  flex: 0 0 auto;
  margin: 0;
  color: var(--charcoal);
  font-size: 76px;
  line-height: .9;
  letter-spacing: .03em;
}

.heading-ziclets {
  font-weight: 1000;
}

.section-heading img {
  width: auto;
  max-width: none;
}

.section-heading-row > p {
  margin: 5px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}

.hero {
  position: relative;
  width: 100%;
  margin-left: 0;
  height: 800px;
  overflow: hidden;
  color: var(--white);
}

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.1486);
}

.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 200px;
  height: auto;
  transform: translate(-50%, calc(-50% - 6px));
}

.instagram {
  height: 830px;
  padding-top: 200px;
}

.instagram .section-heading-row {
  /* 55pxだと説明文が49px下がり、3行目がカルーセル(y=1183)に潜り込んでいた。
     カンプ実測では見出し画像の下端1054に対し説明文の先頭行が1060なので6px。 */
  gap: 6px;
}

.carousel__viewport {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.has-js .carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  width: max-content;
}

html:not(.has-js) .carousel__track {
  transform: none;
}

.instagram-carousel {
  position: relative;
  margin-top: 36px;
}

.instagram-carousel .carousel__track {
  --instagram-track-offset: 0px;

  gap: 40px;
  transform: translateX(var(--instagram-track-offset));
  will-change: transform;
}

.instagram-carousel .carousel__track.is-sliding {
  /* owner確認(2026-08-06)で「もう気持ち早くてもいい」→ .48s から詰めた。 */
  transition: transform .36s cubic-bezier(.22, .61, .36, 1);
}

.carousel__button {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: none;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  padding: 0 0 5px;
  border: 2px solid var(--charcoal);
  border-radius: 50%;
  color: var(--charcoal);
  background: var(--cream);
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
  cursor: pointer;
  font-size: 50px;
  font-weight: 500;
  line-height: 1;
  transform: translateY(-50%);
}

/* デザイナー支給のモーション見本(JW羽咋_PC版.mp4)に＜＞ボタンは無く、
   カードが常時流れる作りだったため非表示にする。操作はPICK UP中央バッジの
   クリック／キーボード操作と自動送りで提供する。ボタンを戻す場合はこの
   display: none を外す。 */
.has-js .carousel__button {
  display: none;
}

.carousel__button:hover,
.carousel__button:focus-visible {
  color: var(--purple);
  background: var(--white);
}

.carousel__button:disabled {
  cursor: default;
  opacity: .45;
}

.carousel__button--previous {
  left: 42px;
}

.carousel__button--next {
  right: 42px;
}

.instagram-card {
  width: 280px;
  height: 355px;
  padding: 8px;
  overflow: hidden;
  border: 2px solid var(--charcoal);
  border-radius: 22px;
  background: var(--cream);
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
}

.instagram-card a {
  display: block;
  width: 100%;
  height: 100%;
}

.instagram-card img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}

.pickup {
  height: 900px;
  padding-top: 120px;
}

.pickup-carousel {
  margin-top: 65px;
}

.pickup-carousel__track {
  /* XD原本: 小=302px / 大=567px / 視覚上の隙間=40px。transform の拡大分
     (567 - 302) / 2 を左右のレイアウト余白へ確保し、JSも同じ値を読む。 */
  --pickup-featured-extra-margin: 132.5px;
  /* 5枚の前置クローンと中央(index 2)を含む実レイアウトから再導出した値。
     中央の大バッジの中心がデスクトップ基準の720pxに来る。 */
  --pickup-track-offset: 415px;
  /* JS無効時・視差軽減時はクローンを作らないため、別の静的開始位置を使う。 */
  --pickup-static-track-offset: -247.5px;

  align-items: center;
  gap: 40px;
  padding: 133px 0;
  transform: translateX(var(--pickup-static-track-offset));
  will-change: transform;
}

.pickup-badge {
  position: relative;
  width: 302px;
  height: 302px;
  flex: 0 0 302px;
  transform: scale(1);
  /* モーション見本の実測では1回の切り替えが約0.3秒（11.400→11.667秒）。 */
  transition: transform .3s ease;
}

.pickup-badge--featured,
.pickup-badge.is-centered {
  z-index: 2;
  margin: 0 var(--pickup-featured-extra-margin);
  transform: scale(1.8775);
}

/* 中央の拡大バッジをクリックすると1枠進む（モーション見本で確認した操作） */
.pickup-badge.is-centered {
  cursor: pointer;
}

.pickup-badge:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 6px;
}

.pickup-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.staff {
  height: 1250px;
  padding-top: 118px;
}

.staff .section-heading-row {
  margin-bottom: 52px;
}

.staff-grid {
  display: grid;
  width: 1081px;
  grid-template-columns: repeat(3, 330px);
  grid-auto-rows: 440px;
  /* XD原本のカード左辺は180 / 555 / 931で、ピッチは375 / 376と1px不揃い
     （デザイナーの手置きであり抽出時の丸めではない）。均一gapでは再現不能なため
     45.5pxで配分し、中央カードだけ+0.5pxずれる。0.5pxは意図的な妥協なので、
     diff指標を見ずに中央カードのleftを追いかけないこと。 */
  gap: 40px 45.5px;
  margin: 0 auto;
}

.staff-card {
  position: relative;
  width: 330px;
  height: 440px;
  padding: 16px;
  /* XD原本のカード背景rectは r=[20,20,20,20] / stroke width=2 / align=inside。
     border-radius:20px / border:2px solid #707070 と一致確認済み。 */
  border: 2px solid #707070;
  border-radius: 20px;
  background: var(--cream);
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
}

.staff-grid .staff-card:nth-child(1) { transform: rotate(3deg); }
.staff-grid .staff-card:nth-child(2) { transform: rotate(-2deg); }
.staff-grid .staff-card:nth-child(3) { transform: rotate(5deg); }
.staff-grid .staff-card:nth-child(4) { transform: rotate(-6deg); }
.staff-grid .staff-card:nth-child(5) { transform: rotate(3deg); }
.staff-grid .staff-card:nth-child(6) { transform: rotate(-3deg); }

/* ⚠ このheight:355pxは死んだ値。PCでは @media (min-width: 769px) 内の
   .staff-card img（写真枠354x458 / cover / XDのoffset補正込み）が上書きし、
   モバイルでは @media (max-width: 768px) のheight:335pxが上書きするため、
   どの経路でも実効しない。 */
.staff-card img {
  width: 100%;
  height: 355px;
  object-fit: contain;
  object-position: center bottom;
}

.staff-card h3 {
  width: 200px;
  height: 40px;
  margin: 6px auto 0;
  border: 2px solid var(--charcoal);
  border-radius: 20px;
  color: var(--charcoal);
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
}

/* owner指摘(2026-08-13): XD原本のスタッフ名バッジ/キャッチコピーはHiragino Sans
   (Apple純正・Web埋め込み不可のシステムフォント)指定。Mac/iPhoneは端末に
   インストール済みのHiraginoをそのまま使わせ、それ以外(Android/Windows)は
   自前ホストのNoto Sans JPへ自然にフォールバックさせる。 */
.staff-card h3,
.staff-card__catch {
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}

.staff-grid .staff-card:nth-child(odd) h3,
.staff-grid .staff-card:nth-child(odd) .staff-card__catch {
  color: var(--orange);
}

.staff-grid .staff-card:nth-child(even) h3,
.staff-grid .staff-card:nth-child(even) .staff-card__catch {
  color: var(--mint);
}

.staff-grid .staff-card:nth-child(odd) h3 {
  background: var(--orange);
}

.staff-grid .staff-card:nth-child(even) h3 {
  background: var(--mint);
}

.staff-grid .staff-card:nth-child(n) h3 {
  color: var(--charcoal);
}

.staff-card__catch {
  position: absolute;
  top: 34px;
  left: 18px;
  z-index: 2;
  margin: 0;
  font-size: 38px;
  font-weight: 900;
  line-height: 1.12;
  /* XD原本の指定は stroke.width:1 だが、-webkit-text-stroke は輪郭線を中心に内外へ
     半分ずつ描くため、paint-order で塗りを後から重ねると外側に 0.5px しか残らず
     カンプより明らかに細くなっていた（縁/塗の画素比 カンプ0.482 / 実装0.127）。
     2026-08-06 実測で校正: 3px=0.357 / 3.5px=0.443 / 4px=0.528 / 4.5px=0.617。
     3.5px を採用（4px は目標を上回る。カンプ側の比は JPEG のにじみで過大の疑いが
     あるため控えめ側に倒した）。paint-order は塗り面積を保つため維持する。 */
  -webkit-text-stroke: 3.5px var(--charcoal);
  paint-order: stroke fill;
  transform: rotate(-7deg);
}

.members {
  height: 1170px;
  padding-top: 120px;
}

.members .section-heading-row {
  margin-bottom: 65px;
}

.members-collage {
  width: 1200px;
  height: 790px;
  margin: 0 auto;
}

.member {
  z-index: 1;
  max-height: 380px;
  object-fit: contain;
}

.faq {
  height: 1230px;
  padding-top: 12px;
}

.faq__panel {
  width: 1080px;
  height: 1112px;
  margin: 0 auto;
  padding: 118px 50px 72px;
  border: 2px solid var(--charcoal);
  border-radius: 30px;
  background: var(--cream);
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
}

.section-heading-row--faq {
  width: 980px;
  gap: 85px;
  background: var(--cream);
}

.section-heading-row--faq .section-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
}

.section-heading-row--faq .section-heading img {
  /* heading-qanda.png は左端に余白があり、墨が画像内で右に寄っている
     （幅620pxの画像で墨の中心が331.5＝+21.5px。表示幅310pxでは+10.8px）。
     画像を中央寄せしても文字は中央に来ないため、その分だけ戻す。
     他の見出しPNGは墨が中央にあるのでこの補正は不要（実測で確認）。 */
  margin-left: -22px;
}

.section-heading-row--faq .section-heading span {
  font-size: 48px;
}

.accordion {
  width: 980px;
  /* カンプ実測: 導入文からアコーディオン先頭までは39px（42pxだと3px下がる） */
  margin: 39px auto 0;
}

.accordion__item {
  margin-top: 16px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--white);
}

.accordion__item:first-child {
  margin-top: 0;
}

.accordion__item.is-open {
  border-color: var(--charcoal);
  background: var(--lime);
}

.accordion__item h3 {
  margin: 0;
}

.accordion__item button {
  display: flex;
  width: 100%;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  /* Q&Aは支給セクション画像(グループ 9019.png)側でXDのtextに無いため実測。
     カンプの行幅394pxに対し字間なしだと327pxで、1文字あたり約4.2px=0.21em不足。 */
  letter-spacing: .2em;
  /* 2026-08-06: 従来 800。自前ホストは 500/600/700/900 の4種のみで 800 が無く、
     CSS のフォントマッチングで上位の 900(Black) へ丸められて実装だけ太かった
     （インク率 カンプ16.92% / 実装22.04%・幅は369対375でほぼ一致＝字間は正しい）。
     700 は自前ホスト済みなので丸められない。回答本文は 18.31%対18.95% で
     元から一致しているため触らない。 */
  font-weight: 700;
  text-align: left;
}

.accordion__icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.accordion__icon::before,
.accordion__icon::after {
  position: absolute;
  top: 11px;
  left: 2px;
  width: 20px;
  height: 3px;
  background: var(--charcoal);
  content: "";
}

.accordion__icon::after {
  transform: rotate(90deg);
}

.is-open .accordion__icon::after {
  transform: rotate(0deg);
}

.accordion__answer {
  /* 下パディング20pxだと開いた項目が4px高くなり、以降の項目が全部下へずれる */
  padding: 0 88px 19px;
}

.accordion__answer p {
  margin: 0;
  font-size: 16px;
  /* カンプ実測の行送りは28px（1.65=26.4pxでは4行で約6px詰まる）。
     単独で戻すと開いた項目が6px伸びて下の項目が余計に下がるため、
     質問→回答の間隔(margin-top:-8px)とセットで当てる。 */
  line-height: 28px;
  margin-top: -11px;
  /* 質問と同じく実測（カンプ383px vs 字間なし334px = 0.20em不足） */
  letter-spacing: .2em;
}

.site-footer {
  position: relative;
  height: 450px;
  /* 支給素材(コンポーネント 4 – *.png・2520px=実装1260pxの2倍)実測。
     上端からナビ1行目までが64pxだと11px上がっていた。
     左は155pxだとカンプより5px左に出る（ロゴ左端 カンプ160 / 実装155・4ページ共通で一致）
     ため160pxへ（2026-08-07 重ね合わせ差分の全ページ走査で検出）。 */
  padding: 75px 50px 28px 160px;
  /* 左上は角丸なしで塗り足す指示(owner指摘2026-08-14・「⑥左側隙間空けない」の
     真意は中央寄せの余白ではなく角丸で背景色が覗く見た目のことだった)。 */
  border-radius: 0 40px 0 0;
  color: var(--white);
  background: var(--charcoal);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 163px 1fr;
  align-items: start;
  gap: 177px;
}

.site-footer p {
  margin: 0;
}

.site-footer__logo {
  width: 162px;
  height: 190px;
  /* ロゴはナビよりさらに6px下（支給素材でJOYの上端が81px、ナビ1行目が86px） */
  margin-top: 6px;
}

.site-footer__instagram {
  display: flex;
  align-items: center;
  gap: 10px;
  /* カンプ実測: アイコンを除いた文字部の幅がカンプ141px / 字間なし111px。
     14文字で1文字あたり2.3px=約.14em。字高は実装17px・カンプ15pxで別書体だが、
     位置を合わせる方針に従い幅を一致させる。
     2026-08-06: 従来 .24em だった（上のコメント自身の算出 .14em と不整合）。
     svg が潰れて幅0になっていた分を字間で埋めていたのが実態で、svg 復活と同時に
     算出どおりへ戻した。実測: 文字の右端 実装333px / カンプ335px で一致する。 */
  letter-spacing: .14em;
  /* 支給素材実測: Instagram行の上端はフッター上端から354px。40pxだと58px上がる */
  margin-top: 81px;
  margin-left: -18px;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.site-footer__instagram svg {
  width: 30px;
  height: 30px;
  /* brand 列は 163px 固定で、テキストだけで既に列幅を超える。既定の flex-shrink:1 だと
     svg が潰されて幅0になり、PC版でアイコンが消えていた（モバイルは列が 1fr のため無症状）。
     列幅は他ページのナビ位置合わせに直結するので広げず、はみ出しは許容する（カンプも
     アイコン込みで 163px を超えている）。 */
  flex: 0 0 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-self: start;
  /* 支給素材実測: 2列目の親見出しの左端は x=782.5。38pxだと773で約10px左に寄る。 */
  gap: 50px;
  color: var(--white);
  font-size: 16px;
}

.site-footer__nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__nav-column:not(.site-footer__nav-column--detail) > li + li {
  margin-top: 34px;
}

.site-footer__nav-column--detail > li + li {
  /* 支給素材実測: 子リンクの最後から次の親見出しまでは56px（43pxだと64pxになる） */
  margin-top: 35px;
}

.site-footer__nav-parent {
  /* 支給素材とカンプでは親見出しも子リンクと同じ太さ。900だと明らかに太すぎた。 */
  font-weight: inherit;
}

.site-footer__nav-group > ul {
  /* 支給素材実測: 親見出し→子リンク1つ目は41〜43px（20pxだと47pxになる） */
  margin-top: 15px;
  padding-left: 1em;
}

.site-footer__nav-group > ul li + li {
  /* 支給素材実測: 子リンク同士は約38px（16pxだと40pxになる） */
  margin-top: 14px;
}

.site-footer__nav-group > ul a {
  font-size: 13px;
  line-height: 1.35;
}

.site-footer__nav-group > ul a::before {
  /* 支給素材(素材/コンポーネント 4 – 1.png)実測: emダッシュ+スペースではなく
     長音符「ー」でスペース無し。 */
  content: "ー";
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  color: var(--lime);
}

.site-footer__copyright {
  position: absolute;
  top: 40px;
  right: 28px;
  margin: 0 !important;
  font-size: 13px;
  letter-spacing: .08em;
  line-height: 1;
  writing-mode: vertical-rl;
}

.fixed-cta {
  position: fixed;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--charcoal);
  font-weight: 900;
  text-align: center;
}

.fixed-cta--visit {
  bottom: 24px;
  left: 0;
  width: 60px;
  height: 226px;
  flex-direction: column;
  border-radius: 0 20px 20px 0;
  background: var(--orange);
}

.fixed-cta__visit-image {
  width: 60px;
  height: 226px;
}

.fixed-cta__visit-label,
.fixed-cta--visit > .fixed-cta__eyes {
  display: none;
}

.fixed-cta__visit-label {
  width: 1em;
  font-size: 20px;
  line-height: 1.22;
}

.fixed-cta__eyes {
  display: flex;
  width: 28px;
  justify-content: center;
  gap: 0;
  margin-top: 12px;
  animation: eyes-bounce 2.6s ease-in-out infinite;
}

@keyframes eyes-bounce {
  0%, 72%, 100% { transform: translateY(0); }
  80% { transform: translateY(-10px); }
  88% { transform: translateY(2px); }
  94% { transform: translateY(-4px); }
}

.fixed-cta__megaphone {
  display: none;
}

.fixed-cta--outsourcing {
  right: 32px;
  bottom: 30px;
  width: 184px;
  height: 188px;
}

.fixed-cta__outsourcing-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fixed-cta__label {
  display: none;
}

/* 下層3ページ（Adobe XD PC 1440pxアートボード準拠） */
.site-shell--shigoto {
  /* カンプ実測: フッター上端 y=3984（3980だと4px高く始まる）。
     他3ページ(index 6180 / shisetsu 4720 / flow 3480)はカンプと一致済み。 */
  height: 3984px;
}

.site-shell--shisetsu {
  height: 4720px;
}

.site-shell--flow {
  height: 3480px;
}

/* ── お問い合わせ ────────────────────────────────
   寸法・配色はすべて 20260806_JW羽咋_PC版.xd のお問合せアートボード実測値。
   パネル 900x950 / 角丸30 / #faf6ea / 枠 #494949 2px（XD: x=270,y=398）
   入力欄 500x60（本文欄は500x200）/ #fff / 枠 #30332e 1px（XD: x=580）
   必須バッジ 32x16 / #ffad69 ／ 送信ボタン 320x60 / #444444（XD: x=580,y=1222）
   ラベルは x=360、入力欄は x=580 で全行そろっている。 */
.site-shell--contact {
  height: 1500px;
}

.site-shell--privacy {
  height: auto;
}

.privacy-body {
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.privacy-body p {
  margin: 0;
}

.privacy-body__heading {
  margin: 2em 0 .75em;
  font-size: 1.25em;
}

.privacy-body__list {
  margin: .75em 0;
  padding: 0;
  list-style: none;
}

.privacy-body__list .privacy-body__list {
  padding-left: 1em;
}

.privacy-body__list > li + li {
  margin-top: .75em;
}

.privacy-body__address {
  margin-top: 1.5em;
  font-style: normal;
}

.contact-section {
  padding-top: 190px;
}

.contact-section .section-heading-row {
  gap: 34px;
}

.contact-form {
  position: relative;
  /* ⚠ XD の rect は shape=900x950。visualBounds(918x968) は dropShadow(dx3/dy3/r3)の
     描画範囲を含む別物なので、寸法の根拠に使わないこと（左-6/右+12/上-6/下+12 ずれる）。
     shape は tx=270 で 270..1170、1440に対して完全中央。 */
  width: 900px;
  /* XD: パネル上端 y=398（shape基準）、CONTACT見出しベースライン y=274 */
  margin: 55px auto 0;
  /* XD: パネル内側上端400 → 1行目(ご用件)の行box上端434 */
  padding: 34px 0 0;
  border: 2px solid var(--charcoal);
  border-radius: 30px;
  background: var(--cream);
}

/* ハニーポット。スクリーンリーダーにも読ませないよう aria-hidden と併用する。 */
.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.contact-row {
  display: grid;
  /* 従来値。カンプ実測に合わせた値は @media (min-width: 769px) の
     .contact-form 配下に置く（確認画面 send/confirm.php と共有するため） */
  grid-template-columns: 316px 500px;
  align-items: start;
  margin: 0;
  padding: 0;
  border: 0;
}

.contact-row + .contact-row {
  margin-top: 30px;
}

.contact-row__label {
  display: flex;
  align-items: center;
  gap: 14px;
  /* ラベルは入力欄の高さ(60px)に対して縦中央 */
  min-height: 60px;
  /* 従来値。カンプ実測値は @media (min-width: 769px) の .contact-form 配下 */
  padding-left: 90px;
  color: var(--charcoal);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.contact-required {
  flex: 0 0 32px;
  width: 32px;
  height: 16px;
  border-radius: 1px;
  background: var(--orange);
  /* XD原本: オレンジ地に白文字（charcoalではない） */
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 500px;
  padding: 0 16px;
  border: 1px solid #30332e;
  border-radius: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: inherit;
  /* XD原本: 入力欄の文字は NotoSans-Bold 18px（#494949＝本文と同じ濃さで、
     グレーのプレースホルダではなく「入力済みの見え方」として描かれている） */
  font-size: 18px;
  font-weight: 700;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"] {
  height: 60px;
}

.contact-form textarea {
  height: 200px;
  padding: 16px;
  line-height: 1.7;
  resize: vertical;
}

.contact-form ::placeholder {
  /* XD原本(お問合せアートボード)を直接確認: プレースホルダ位置のテキストは
     fill #494949 だが opacity 0.40 が掛かっている（お名前/フリガナ/メール/
     電話番号/お問合せ内容の全ノードで実測 0.395〜0.403、単一の意図値）。
     旧コメントは opacity を見落とし「#494949 のまま＝カンプ一致」と誤認して
     いたが、実際のカンプ画像(お問合せ.png)を直接ピクセル確認すると明確に
     薄いグレーで描画されている。 */
  color: var(--charcoal);
  opacity: .4;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  /* owner指摘(2026-08-13): チェックボックス/ラジオのチェック時と同じオレンジに統一。 */
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

/* ご用件: XD では 2列×2行（丸の左端 x=580 / 812、上端 y=448 / 500） */
.contact-choices {
  display: grid;
  grid-template-columns: 232px 1fr;
  /* 丸36px + 行間16px = XDの行ピッチ52px */
  gap: 16px 0;
  padding-top: 14px;
}

.contact-choices label,
.contact-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--charcoal);
  font-size: 16px;
  cursor: pointer;
}

/* XD原本: 選択肢は SemiBold、同意事項は Bold。指定が無いと body の 500 に落ちる。 */
.contact-choices label {
  font-weight: 600;
}

.contact-agree {
  font-weight: 700;
}

/* XD原本のラジオ/チェックボックスは 36×36 の白地＋#30332e 1px 枠で、
   ネイティブ部品(18px)とは別物なので appearance を切って自前で描く。
   ⚠ 部品のデザイン(この36px化・入力欄のfont-weight:700)は base に置いており、
   スマホにも効く。カンプがあるのはPCだけなので「座標はデスクトップMQ／
   部品の見た目は全幅共通」で切り分けている。スマホカンプが来たら要再検討。
   ⚠ appearance:none で標準のフォーカスリングが消えるブラウザがあるため、
   下の .contact-form input:focus-visible の outline とセットで維持すること。 */
.contact-choices input,
.contact-agree input {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin: 0;
  border: 1px solid #30332e;
  background: var(--white);
  /* -webkit- 併記は Safari 15.3 以前用。無いと appearance が効かず、
     ネイティブ描画の上に36px枠だけが乗って崩れる。 */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.contact-choices input {
  border-radius: 50%;
}

/* 選択時: XD は φ22 のオレンジ(#ffad69)の中丸 */
.contact-choices input:checked::after {
  display: block;
  width: 22px;
  height: 22px;
  margin: 6px;
  border-radius: 50%;
  background: var(--orange);
  content: "";
}

/* チェックボックスのON状態はXDに描かれていないため、ラジオと同じオレンジで
   チェックマークを引く（デザイン支給があれば差し替える）。 */
.contact-agree input:checked::after {
  display: block;
  width: 8px;
  height: 17px;
  margin: 5px auto 0;
  border: solid var(--orange);
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
  content: "";
}

/* Windows ハイコントラスト等では background が剥がされ、ラジオの選択ドットが
   消えて「どれを選んだか分からない」状態になる。システム色で描き直す。
   チェックマークは border なのでそのまま残る。 */
@media (forced-colors: active) {
  .contact-choices input,
  .contact-agree input {
    border-color: CanvasText;
  }

  /* Highlight を先に書くのは Firefox 89〜102 対策。forced-colors MQ 自体は
     効くのに SelectedItem を解釈できず、宣言ごと捨てられて
     「選択ドットが消える」元の症状に戻るため。 */
  .contact-choices input:checked::after {
    background: Highlight;
    background: SelectedItem;
  }

  .contact-agree input:checked::after {
    border-color: Highlight;
    border-color: SelectedItem;
  }
}

.contact-row--message .contact-row__label {
  /* 本文欄は200pxあるので、ラベルは上端に寄せる */
  min-height: 0;
  padding-top: 18px;
}


.contact-agree a {
  color: var(--charcoal);
  text-decoration: underline;
}

.contact-submit {
  display: flex;
  justify-content: center;
  padding: 24px 0 64px;
}

.contact-submit button {
  width: 320px;
  height: 60px;
  border: 0;
  border-radius: 0;
  background: #444;
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
}

.contact-submit button:hover,
.contact-submit button:focus-visible {
  background: var(--charcoal);
}

.subpage-hero {
  position: relative;
  width: 1260px;
  height: 650px;
  margin-left: 180px;
  border-radius: 0 0 0 40px;
  overflow: hidden;
  color: var(--white);
}

.subpage-hero > img,
.subpage-hero > picture > img,
.subpage-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.subpage-hero > img,
.subpage-hero > picture > img {
  object-fit: cover;
}

.subpage-hero__shade {
  background: rgb(0 0 0 / 16%);
}

.subpage-hero__title {
  position: absolute;
  top: 225px;
  left: 610px;
  margin: 0;
  font-size: 56px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
  text-shadow: 0 2px 10px rgb(0 0 0 / 24%);
  writing-mode: vertical-rl;
}

.subpage-hero__title--flow {
  top: 188px;
}

.subpage-hero__title img {
  width: 39px;
  max-width: 100%;
  height: auto;
}

.subpage-hero__title span {
  display: none;
}

.subpage-section {
  position: relative;
  overflow: hidden;
}

.works-section,
.facility-section,
.flow-section {
  padding-top: 204px;
}

.works-section .section-heading-row,
.facility-section .section-heading-row,
.flow-section .section-heading-row,
.timetable-section .section-heading-row {
  min-height: 100px;
}

.works-grid {
  display: grid;
  width: 1080px;
  grid-template-columns: repeat(2, 500px);
  gap: 78px 80px;
  margin: 67px auto 0;
}

.work-card {
  min-height: 640px;
}

.work-card > img {
  width: 470px;
  height: 470px;
  margin: 0 auto;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
}

.work-card > .work-card__image--css-ring {
  padding: 8px;
  border: 2px solid var(--charcoal);
  background: var(--cream);
}

.work-card h3 {
  margin: 35px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
}

.work-card p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.75;
}

.facility-gallery {
  position: relative;
  width: 1080px;
  height: 2280px;
  margin: 110px auto 0;
}

.facility-gallery img {
  position: absolute;
  object-fit: cover;
}

.facility-gallery__wide-a { top: 0; left: 0; width: 1080px; height: 500px; }
.facility-gallery__tall-a { top: 520px; left: 0; width: 500px; height: 720px; }
.facility-gallery__room-a { top: 520px; left: 520px; width: 560px; height: 400px; }
.facility-gallery__sign { top: 940px; left: 840px; width: 240px; height: 300px; }
.facility-gallery__restroom { top: 940px; left: 520px; width: 300px; height: 300px; }
.facility-gallery__wide-b { top: 1260px; left: 0; width: 1080px; height: 500px; }
.facility-gallery__room-b { top: 1780px; left: 0; width: 700px; height: 500px; }
.facility-gallery__tall-b { top: 1780px; left: 720px; width: 360px; height: 500px; }

.timetable-section {
  padding-top: 175px;
}

.timetable-section .section-heading-row {
  gap: 55px;
}

.timetable-section .section-heading {
  font-size: 66px;
  white-space: nowrap;
}

.timetable-grid {
  display: grid;
  width: 936px;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px;
  margin: 70px auto 0;
}

.schedule-column {
  overflow: hidden;
  border: 2px solid var(--charcoal);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
}

.schedule-column h3 {
  margin: 0;
  padding: 18px 24px;
  color: var(--charcoal);
  background: transparent;
  /* XD: NotoSans-Bold 32 / charSpacing=100（24px・字間なしでは小さすぎた） */
  font-size: 32px;
  letter-spacing: .1em;
  text-align: center;
}

.schedule-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-list li {
  display: grid;
  min-height: 61px;
  grid-template-columns: 146px 1fr;
  align-items: center;
  border-top: 1px solid rgb(73 73 73 / 25%);
  font-size: 16px;
}

.schedule-column:first-child .schedule-list li {
  background: var(--mint);
}

.schedule-column:last-child .schedule-list li {
  background: var(--orange);
}

.schedule-list time {
  padding: 0 14px;
  border-right: 1px solid rgb(73 73 73 / 25%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.schedule-list span {
  padding: 0 14px;
}

.flow-section {
  height: 1570px;
}

.flow-steps {
  width: 936px;
  margin: 45px auto 0;
  padding: 0;
  list-style: none;
}

.flow-step {
  position: relative;
  display: grid;
  min-height: 180px;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 0;
  margin-top: 30px;
  padding: 22px 45px 22px 0;
  border: 2px solid var(--charcoal);
  border-radius: 90px;
  background: var(--cream);
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
}

.flow-step:first-child {
  margin-top: 0;
}

.flow-step:not(:last-child)::after {
  position: absolute;
  /* owner指摘(2026-08-12): 三角矢印の上下の余白が実質6〜7pxしか無く詰まって
     見えていた(margin-top30px中、矢印自体が17px・かつ-24pxオフセットで
     下寄りに配置されていたため)。矢印の上下を均等に約12pxずつ空ける計算:
     bottom=-(12+17)=-29px、.flow-step側のmargin-topも合わせて41pxへ。
     このルールは.flow-step:not(:last-child)::afterの基本形でデスクトップの
     専用グリッド(min-width:769pxのbottom:-34px)には上書きされ影響しない。 */
  bottom: -29px;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 17px solid var(--charcoal);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.flow-step__label {
  width: 190px;
  height: 110px;
  margin: 0;
  object-fit: contain;
}

.flow-step h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: .08em;
}

.flow-step div > p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.7;
}

.about-section {
  height: 1260px;
  padding-top: 49px;
}

.about-section__heading {
  display: grid;
  width: 936px;
  min-height: 108px;
  grid-template-columns: 1fr 350px;
  align-items: flex-start;
  gap: 45px;
  margin: 0 auto;
}

.about-section__heading h2 {
  grid-column: 2;
  grid-row: 1;
}

.about-section__heading > p {
  grid-column: 1;
  grid-row: 1;
  margin: 5px 0 0;
  font-size: 16px;
  /* XD: NotoSans-Bold 16 / charSpacing=50 / lineHeight=28 */
  letter-spacing: .05em;
  /* 1.95(=31.2px)だと3行目でカンプと11pxずれる。XD原本の textAttributes.lineHeight
     は 28（行ベースラインも y=17/45/73 の28px間隔）。他ページの同種リード文
     .section-heading-row > p も 28px で揃っている */
  line-height: 28px;
}

.about-panel {
  position: absolute;
  top: 206px;
  left: 187px;
  width: 1080px;
  height: 900px;
  /* カンプ実測: 見出しの墨面上端が y=2483。padding-top 66px だと 21px 下がる。 */
  padding: 45px 57px 0;
  border: 2px solid var(--charcoal);
  border-radius: 30px;
  background: var(--cream);
  box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
}

.about-columns {
  position: relative;
  display: grid;
  min-height: 280px;
  grid-template-columns: repeat(2, 420px);
  gap: 117px;
}

.about-columns::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 480px;
  width: 2px;
  /* カンプ実測: 実体3px・隙間3pxの点線。border-style: dashed では長さを指定できないため階調で描く。 */
  background: repeating-linear-gradient(
    to bottom,
    var(--charcoal) 0 3px,
    transparent 3px 6px
  );
  content: "";
}

.about-columns h3,
.data-section > h3 {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
}

.about-columns h3 {
  letter-spacing: .1em;
}

.data-section > h3 {
  letter-spacing: .1em;
}

.about-columns article > p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
}

.about-columns .about-wage {
  /* カンプ実測: 見出し「工賃について」から1行目までは71px（4pxだと51pxで15px上がる） */
  margin-top: 19px;
  font-size: 22px;
  line-height: 1.7;
}

.about-wage__amount {
  display: inline-block;
  width: 198px;
  border-bottom: 4px solid var(--orange);
}

.about-wage small {
  font-size: 18px;
}

.data-section {
  /* このルールはグローバル(デスクトップ既定値)。@media (max-width:768px) 側の
     .data-section が margin/padding-top/right/left を全て再指定して遮蔽しているため
     モバイルには影響しないが、モバイル側のどれか1つでも削ると即座に漏れる。 */
  margin: 47px -59px 0;
  /* カンプ実測: データ見出しの墨面上端が y=2848。 */
  padding-top: 36px;
  padding-right: 59px;
  padding-left: 59px;
  border-top: 2px solid var(--charcoal);
}

.data-section > p {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.75;
}

.data-charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 22px;
}

.data-chart {
  position: relative;
  width: 100%;
  max-width: 300px;
  min-width: 0;
  aspect-ratio: 1;
  margin: 0 auto;
}

.data-chart__pie {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.data-chart__base,
.data-chart__segment {
  fill: none;
  stroke-width: 29.333;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.data-chart__base {
  stroke: transparent;
}

.data-chart__segment {
  stroke-dasharray: 0 100;
  stroke-dashoffset: var(--offset);
  transition: stroke-dasharray 1.25s cubic-bezier(.22, .61, .36, 1);
}

.data-chart.is-visible .data-chart__segment {
  stroke-dasharray: var(--segment) var(--gap);
}

.data-chart__segment--green { stroke: var(--green); }
.data-chart__segment--purple { stroke: var(--purple); }
.data-chart__segment--orange { stroke: var(--orange); }
.data-chart__segment--mauve { stroke: var(--mauve); }
.data-chart__segment--lime { stroke: var(--lime); }

.data-chart figcaption {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.data-chart figcaption h4 {
  margin: 0;
  font-size: 22px;
  white-space: nowrap;
}

.data-chart__label {
  position: absolute;
  top: calc(50% + var(--label-y, 0%));
  left: calc(50% + var(--label-x, 0%));
  z-index: 1;
  width: 112px;
  color: var(--charcoal);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  transform: translate(-50%, -50%);
}

@media (min-width: 769px) {
  body {
    min-width: 1440px;
  }

  .pill-nav__logo {
    /* SPドロワー専用のロゴ。PC幅ではピル型ナビに収まらないため非表示（.site-logoが担当）。 */
    display: none;
  }

  .has-js .site-logo {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-16px);
    transition:
      opacity .4s ease,
      transform .4s ease,
      visibility 0s linear .4s;
  }

  .has-js .site-logo.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0;
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
    font-size: 16px;
  }

  body.is-nav-open {
    overflow: hidden;
  }

  .site-shell,
  .site-footer,
  .site-shell--shigoto,
  .site-shell--shisetsu,
  .site-shell--flow {
    width: 100%;
    height: auto;
  }

  .site-logo {
    /* SP版ではロゴをヘッダーから除き、ドロワー下部に表示する。 */
    display: none;
  }

  /* Brown Brown(本番)の.logoは背景・フィルタとも一切無い。owner指摘(2026-08-11)で
     白いにじみ(drop-shadow)を撤去し同じ見た目に統一。暗いヒーロー写真の上で沈む懸念は
     あったが、Brown Brown側も同条件で対処なしのため揃える。 */

  /* Brown Brown はdrawerがz=150なのでtoggle 200で足りるが、JOYWORKZは.pill-navがz=200。
     同値だとDOM順で後ろのdrawerがtoggleを覆い、閉じるボタンを押せなくなる。
     drawerより必ず大きい値にすること。 */
  .nav-toggle {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 220;
    display: flex;
    width: 24px;
    height: 13px;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    padding: 15px 12px;
    box-sizing: content-box;
    border: none;
    /* 2026-08-10 owner指摘で訂正: brownbrown-cheese.com本番CSSを直接取得して
       実測したところ background: var(--ink)(#1a1a1a・黒) + span背景 #fff(白)
       だった。旧コメントの「Brown Brownは#fafafa」は誤り(本番と一致していな
       かった)。黒箱+白線は#1a1a1a/#fffで約17.4:1、透明時の懸念だったWCAG 3:1問題
       は箱が不透明なので該当しない。 */
    background: #1a1a1a;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #fff;
    transition: transform .3s ease;
  }

  .site-header.is-nav-open .nav-toggle span:first-child {
    transform: translateY(6px) rotate(45deg);
  }

  .site-header.is-nav-open .nav-toggle span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }

  .pill-nav,
  .has-js .pill-nav,
  .has-js .pill-nav.is-visible {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* 2026-08-21 owner提供のXD書き出しPNG（claude-projects/confiar/joyworkz/TOP – 2.png）を
       ピクセル計測して確定。「トップ」テキスト上端がXD原本68px・旧実装121pxで53px
       下にずれていた（行間隔自体はXD原本と一致していたため、ズレは先頭オフセットのみ）。
       101px - 53px = 48px に修正。 */
    padding: 48px var(--gl-mobile) calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 0;
    visibility: hidden;
    opacity: 0;
    background: var(--aqua);
    box-shadow: none;
    pointer-events: none;
    transform: translateY(-100%);
    transition:
      opacity .3s ease,
      transform .4s ease,
      visibility 0s linear .4s;
  }

  .site-header.is-nav-open .pill-nav,
  .has-js .site-header.is-nav-open .pill-nav,
  .has-js .site-header.is-nav-open .pill-nav.is-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }

  :root {
    --pill-row-pad: 16px;
  }

  /* デスクトップのカンプ照合と absolute 配置を保つため、出現アニメーションはスマホだけにする。 */
  .has-js .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .has-js .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .pill-nav a {
    display: flex;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: var(--pill-row-pad) var(--gl-mobile);
    border-bottom: 1px solid rgb(73 73 73 / 18%);
    font-size: 13px;
    letter-spacing: 0.15em;
    /* 2026-08-21 owner提供のXD書き出しPNG（claude-projects/confiar/joyworkz/0820/グループ 10281.png）をピクセル計測して確定。『施設案内』のink比（非白ピクセル比率）がXD原本58.08%に対し、500ウェイトのレンダリング結果は58.30%でほぼ一致（900は73.04%で15ポイントも太すぎた）。2026-08-09の『従来の太さを維持する既存判断』はXD実測に基づかない誤りだったため撤回する。デスクトップ側で先に判明していた同じ問題（navi.png実測）と同一パターン。 */
    font-weight: 500;
  }

  .pill-nav__instagram {
    gap: 10px;
    /* base の .pill-nav__instagram { padding: 0 !important; } はデスクトップのピル型
       ナビでアイコンを詰める指定であり、!important のためここでは上書きできない。
       実測では 1lh は 18.5px（font-size: 13px / line-height: normal）だが、実際の
       テキスト行の行ボックスは 19.5px。旧 calc は Instagram 行を 62.5px にし、
       63.5px の他行より 1px 低くしていた。
       通常時は 63.5px を採用して他行と高さを一致させ、Webフォント読込前（FOUT）や
       ブラウザの文字サイズ拡大で行が伸びたときは calc 側を上回らせて自動追従する。
       1lh 非対応ブラウザでは宣言ごと落ちるため、必ず素の px を直前に置くこと。
       JOYWORKZ は古い端末の訪問者もいる就労継続支援B型のため、この2行書きを崩さないこと。 */
    min-height: 63.5px; /* 1lh 非対応ブラウザ用 */
    min-height: max(63.5px, calc(2 * var(--pill-row-pad, 22px) + 1lh));
  }

  .pill-nav__instagram svg {
    width: 24px;
    height: 24px;
  }

  .pill-nav__instagram-label {
    display: inline;
  }

  .pill-nav__logo {
    width: 100px;
    flex: 0 0 auto;
    /* 2026-08-21 owner提供のXD書き出しPNG（TOP – 2.png）実測。最後の区切り線から
       ロゴ上端までの余白がXD原本約70px・旧実装18pxで52px不足していた。70pxに修正。 */
    margin: 70px auto 0;
  }

  .pill-nav__logo img {
    display: block;
    width: 100%;
    height: auto;
  }

  .section,
  .subpage-section {
    height: auto;
    padding: 72px var(--gl-mobile);
    overflow: hidden;
  }

  .section-heading-row,
  .section-heading-row--faq,
  .works-section .section-heading-row,
  .facility-section .section-heading-row,
  .flow-section .section-heading-row,
  .timetable-section .section-heading-row {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0;
    text-align: center;
  }

  .section-heading {
    max-width: 100%;
    font-size: clamp(40px, 12vw, 48px);
    line-height: 1;
  }

  .section-heading img {
    /* 2026-08-10 owner指摘で訂正: 旧 width:auto/max-width:100% は幅を327pxまで
       引き伸ばしていた。見出しPNGはアセットごとにキャンバス縦横比が違うため、
       幅基準だと正方形に近いアセット(FLOWなど)ほど不釣り合いに大きく(縦156px)
       見えていた。高さの上限を68pxに変更して抑える。
       ⚠ height:68px(固定)+max-width:100%の組み合わせは、max-widthが効いた
       瞬間に縦横比が崩れる(fable-advisor実測: CONTACT/INSTAGRAM/MEMBERSで
       約11-27%横潰れ)。height/width両方autoにしてmax-heightで上限だけ与える
       ことでCSSの比率保持を効かせる。 */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 68px;
  }

  .section-heading-row > p,
  .about-section__heading > p,
  .flow-step div > p {
    /* Brown Brown(本番)のスマホ本文に合わせる: 13px / 行送り26px */
    font-size: 13px;
    line-height: 26px;
    margin-top: 0;
  }

  .section-heading-row > p br,
  .about-section__heading > p br,
  .flow-step div > p br {
    display: none;
  }

  /* XD原本の比率は 607:375。ただしそのままだと画面高によっては動画の下端が
     固定CTAバーの上端のわずか手前で終わり、数pxだけページ背景が覗いて
     「線」に見える(2026-08-21 実測: 幅393×高700で8pxの隙間)。
     固定CTAは z-index:300 なので、比率に28px足して動画をCTAの裏へ
     潜り込ませ、隙間が出ないようにする(owner指示: 少し拡大して重ねる)。 */
  .hero {
    height: calc(100vw * 607 / 375 + 28px);
    min-height: 428px;
    max-height: 748px;
  }

  .hero__logo {
    width: 130px;
  }

  .instagram,
  .pickup,
  .staff,
  .members,
  .faq {
    height: auto;
    padding: 72px var(--gl-mobile);
  }

  .instagram .section-heading-row,
  .timetable-section .section-heading-row {
    gap: 22px;
  }

  .instagram-carousel,
  .pickup-carousel {
    margin-top: 30px;
  }

  .instagram-carousel .carousel__track {
    /* XD原本の実座標（カード左端 -166.0 / 72.9 / 311.9・ピッチ238.9px）に
       一致させる。原本では中央カードの中心が画面中心より2.6px左だが、owner指示により
       XD原本を基準とする。 */
    --instagram-track-offset: -44.2667vw; /* -166px相当（375px基準） */
    gap: 4vw; /* 15px（375px基準） */
    padding: 0;
  }

  .instagram-carousel .carousel__viewport {
    /* owner指摘(2026-08-12): PICK UPと同じく.instagramの左右padding
       (--gl-mobile)を突き破り、画面端(x=0)まで見える幅にする。 */
    width: calc(100% + var(--gl-mobile) * 2);
    margin: 0 calc(var(--gl-mobile) * -1);
    overflow: hidden;
  }

  .instagram-card {
    width: 59.7333vw; /* 224px（375px基準） */
    height: 74.6667vw; /* 280px（375px基準） */
    flex: 0 0 59.7333vw; /* 224px（375px基準） */
    padding: 2.1333vw; /* 8px（375px基準） */
    border-radius: 5.6vw; /* 21px（375px基準） */
  }

  .instagram-card img {
    border-radius: 4vw; /* 15px（375px基準） */
  }

  .carousel__button {
    display: none !important;
  }

  .pickup-carousel__track {
    /* XD実測でサイド円=150px、中央拡大円=270px（倍率1.8）に確定。
       owner指摘(2026-08-11)でグラデーションのぼかしをやめ、下部固定タブ
       (見学希望の方)と同じく画面端(x=0)までハッキリ映す方針に変更。 */
    /* モバイルも拡大による片側のオーバーフロー分だけを確保する。
       (150px * 1.8 - 150px) / 2 = 60px（=16vw @ 375px基準）。 */
    --pickup-featured-extra-margin: 16vw; /* 60px（375px基準） */
    /* 2026-08-21 owner提供のXD書き出しPNG（TOP – 1.png）をピクセル単位で直接計測して確定。
       中央バッジ(x=52-328)に対し、左右の隣接バッジが実際に覗いている
       （375px基準で左44.5px・右50.3px、平均47.4px）。
       2026-08-20に「XD原本ノードJSON生データの抽出で覗きゼロ」と結論したのは誤り
       （抽出ツールtools/xd_nodes.pyが一部バッジノードの座標を正しく合成できていなかった）。
       複数gap候補を実レンダリングしてPNG実測値と比較し、gap=1.3333vw(5px@375)で
       375px幅の覗きが47.4px/47.7pxとなり実測平均47.4pxに一致することを確認して確定。 */
    --pickup-static-track-offset: calc(50vw - 160vw); /* -350px（375px基準） */

    align-items: center;
    gap: 1.3333vw; /* 5px（375px基準）。2026-08-21 owner提供のXD書き出しPNGをピクセル計測して確定 */
    padding: var(--pickup-featured-extra-margin) 0;
    transform: translateX(var(--pickup-static-track-offset));
    will-change: transform;
  }

  .pickup-carousel .carousel__viewport {
    /* .pickup の左右padding(--gl-mobile)を突き破り、下部固定タブと同じく
       画面端(x=0)まで見える幅にする（ハードクリップ・ぼかし無し）。 */
    width: calc(100% + var(--gl-mobile) * 2);
    margin: 0 calc(var(--gl-mobile) * -1);
    overflow: hidden;
    scroll-snap-type: none;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: auto;
  }

  html:not(.has-js) .pickup-carousel .carousel__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pickup-badge {
    width: 40vw; /* 150px（375px基準） */
    height: 40vw; /* 150px（375px基準） */
    flex: 0 0 40vw; /* 150px（375px基準） */
  }

  .pickup-badge--featured,
  .pickup-badge.is-centered {
    transform: scale(1.8);
  }

  /* JS無効時のSPは、HTML直書きの3枚目ではなくXD原本どおり4枚目を拡大する。
     JS有効時は restoreStaticState() がクラスを付け替えるのでこの指定は効かない。 */
  html:not(.has-js) .pickup-badge--featured {
    z-index: auto;
    margin: 0;
    transform: none;
  }

  html:not(.has-js) .pickup-carousel__track > .pickup-badge:nth-child(4) {
    z-index: 2;
    margin: 0 var(--pickup-featured-extra-margin);
    transform: scale(1.8);
  }

  .staff .section-heading-row,
  .members .section-heading-row {
    margin-bottom: 38px;
  }

  /* SP版はデスクトップ側の補正が漏れていたため、可変幅に合わせて%指定。 */
  #members-title img {
    transform: translateX(6.3636%);
  }

  .staff-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: 16px;
    margin: 0;
  }

  .staff-grid .staff-card:nth-child(n) {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 330 / 440;
    overflow: hidden;
    transform: none;
  }

  .staff-card img {
    position: absolute;
    top: 17.9318%;
    left: -3.6364%;
    width: 107.2727%;
    max-width: none;
    height: 104.0909%;
    object-fit: cover;
    object-position: center top;
  }

  .staff-grid .staff-card:nth-child(1) img {
    top: 18.3182%;
    left: -4.2424%;
  }

  .staff-card h3 {
    position: absolute;
    bottom: 6.8182%;
    left: 50%;
    z-index: 2;
    width: 60.6061%;
    height: 9.0909%;
    margin: 0;
    border-radius: 999px;
    font-size: clamp(12px, 3.7vw, 15px);
    line-height: 1.15;
    letter-spacing: .05em;
    transform: translateX(-50%);
  }

  .staff-card__catch {
    font-size: clamp(16px, 4.8vw, 18px);
    line-height: 1.16;
    letter-spacing: .05em;
    -webkit-text-stroke-width: 1.5px;
  }

  .staff-grid .staff-card:nth-child(1) .staff-card__catch { left: 7.2727%; top: 3.1818%; }
  .staff-grid .staff-card:nth-child(2) .staff-card__catch { left: 8.4848%; top: 3.4091%; }
  .staff-grid .staff-card:nth-child(3) .staff-card__catch { left: 13.9394%; top: 9.3182%; }
  .staff-grid .staff-card:nth-child(4) .staff-card__catch { left: 20.9091%; top: 2.9545%; }
  .staff-grid .staff-card:nth-child(5) .staff-card__catch { left: 18.7879%; top: 4.0909%; }
  .staff-grid .staff-card:nth-child(6) .staff-card__catch { left: 13.6364%; top: 4.7727%; }

  .members-collage:not(.members-collage--sp) {
    display: none;
  }

  .members-collage.members-collage--sp {
    position: relative;
    display: block;
    /* .members の左右padding(--gl-mobile)を突き破り、画面端(x=0)まで見える幅にする。
       中の.members-collage__pieceは画面幅に対する比率(vw)で位置指定しているため、
       コンテナもvwにして画面端を基準に揃える。XD原本でmember12が意図的に
       キャンバス左端で見切れる設計(left:-11.8px@375px基準)のため、
       overflow:hiddenでその見切れを再現する。 */
    width: calc(100% + var(--gl-mobile) * 2);
    height: 212.8vw; /* 798px（375px基準） */
    margin: 0 calc(var(--gl-mobile) * -1);
    overflow: hidden;
  }

  .members-collage__piece {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    transform-origin: center;
  }

  .members-collage__piece--letter-j { top: 2.9067vw; left: 8.4vw; width: 21.0933vw; transform: rotate(-20deg); }
  .members-collage__piece--letter-y { top: 3.0933vw; left: 40.88vw; width: 21.7333vw; transform: rotate(14deg); }
  .members-collage__piece--member10 { top: 4.3733vw; left: 54.1333vw; width: 35.2267vw; }
  .members-collage__piece--letter-o { top: 12.64vw; left: 26.24vw; width: 17.7867vw; }
  .members-collage__piece--member02 { top: 27.6vw; left: 35.8667vw; width: 21.6533vw; }
  .members-collage__piece--member07 { top: 30.2933vw; left: 3.1733vw; width: 28.7467vw; transform: rotate(9deg); }
  .members-collage__piece--member08 { top: 56.8533vw; left: 75.5467vw; width: 19.3867vw; }
  .members-collage__piece--member03 { top: 68.72vw; left: 52.2133vw; width: 21.2267vw; }
  .members-collage__piece--member06 { top: 72.4533vw; left: 21.8667vw; width: 23.3333vw; }
  .members-collage__piece--member09 { top: 91.2533vw; left: 6.4vw; width: 27.8133vw; transform: rotate(4deg); }
  .members-collage__piece--member11 { top: 93.9733vw; left: 35.8667vw; width: 28.2933vw; }
  .members-collage__piece--member04 { top: 101.8667vw; left: 63.4667vw; width: 27.4933vw; }
  .members-collage__piece--member05 { top: 126.5333vw; left: 20.32vw; width: 24.9067vw; }
  .members-collage__piece--member01 { top: 136.96vw; left: 65.0667vw; width: 32.1067vw; }
  .members-collage__piece--member12 { top: 144.7467vw; left: -3.1467vw; width: 25.4933vw; }
  .members-collage__piece--letter-r { top: 165.4667vw; left: 47.68vw; width: 17.3867vw; }
  .members-collage__piece--letter-o2 { top: 178.72vw; left: 35.2267vw; width: 18.0533vw; }
  .members-collage__piece--letter-w { top: 181.6vw; left: 15.52vw; width: 22.3733vw; transform: rotate(-17deg); }
  .members-collage__piece--letter-z { top: 180.7733vw; left: 77.2vw; width: 17.7333vw; }
  .members-collage__piece--letter-k { top: 184.3467vw; left: 57.2533vw; width: 19.8933vw; transform: rotate(21deg); }

  .faq__panel {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 32px 16px;
    border-radius: 22px;
  }

  .accordion {
    width: 100%;
    margin-top: 30px;
  }

  .accordion__item {
    margin-top: 12px;
  }

  .accordion__item button {
    min-height: 58px;
    gap: 12px;
    padding: 12px 16px;
    font-size: 16px;
    /* PC側のカンプ合わせ(.2em)はスマホでは間延びするので戻す */
    letter-spacing: normal;
    line-height: 1.5;
  }

  .accordion__answer {
    padding: 0 16px 18px;
  }

  .accordion__answer p {
    /* Brown Brown(本番)のスマホ本文に合わせる: 13px / 行送り26px */
    font-size: 13px;
    line-height: 26px;
    /* PC側のカンプ合わせ(28px固定・上マージン-8px・.2em)はスマホには持ち込まない */
    margin-top: 0;
    letter-spacing: normal;
  }

  /* お問い合わせフォーム: 1カラム化。寸法のPC固定値(900/500px)は解除する */
  .site-shell--contact {
    height: auto;
  }

  .contact-section {
    /* contactにはヒーローが無く、固定ロゴ(高さ約110px)と重なるため上だけ大きく取る */
    padding: 150px var(--gl-mobile) 72px;
  }

  .privacy-body {
    width: 100%;
    margin: 36px auto 0;
    font-size: 14px;
  }

  /* PC側の .contact-section .section-heading-row (詳細度0,2,0) が
     スマホ用の .section-heading-row (0,1,0) に勝ってしまうので明示的に戻す。
     確認/完了/エラー画面(send/*)にも効くが、これは意図的。従来それらが34pxに
     なっていたのは上記の詳細度負けによる事故で、スマホの意図値は22pxのため。 */
  .contact-section .section-heading-row {
    gap: 22px;
  }

  /* owner指摘(2026-08-13): 「CONTACT」は7文字で横長(864:160=5.4:1)のため、
     他の見出し画像と同じmax-height:68pxだと画面幅いっぱいまで広がり
     太い字面も相まって他ページの見出しより目立って大きく見えていた。
     STAFF(600:190≈3.16:1)のmax-height:68px時の幅(約214px)を目安に
     max-widthで頭打ちにし、横幅の占有率を他の見出しに近づける。 */
  /* 2026-09-30 小西さん指摘「CONTACTが他ページより小さい」で再調整。
     220pxだと字の高さが約35pxで、他の見出し(約43〜48px)より2割以上小さかった。
     MEMBERS/INSTAGRAMの字高(約43px)に揃う幅=864px中の字高138pxから逆算して270px。 */
  .contact-section .section-heading img {
    max-width: 270px;
  }

  .contact-form {
    width: 100%;
    margin-top: 40px;
    padding: 28px 18px 0;
    border-radius: 20px;
  }

  .contact-row {
    display: block;
  }

  .contact-row__label {
    min-height: 0;
    padding: 0 0 8px;
    font-size: 15px;
  }


  .contact-form input[type="text"],
  .contact-form input[type="tel"],
  .contact-form input[type="email"],
  .contact-form textarea {
    width: 100%;
    height: 48px;
    font-size: 16px;
  }

  .contact-form textarea {
    height: 160px;
  }

  .contact-choices {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 0;
  }

  .contact-row--message .contact-row__label {
    padding-top: 0;
  }

  /* PC側は同意事項の行間も他の行と同じ30px（XD 1156 基準）だが、スマホは
     従来 17px だった。PC合わせのために base の個別指定を消した副作用で
     スマホまで30pxに広がるのを防ぐ。 */
  .contact-row.contact-row--agree {
    margin-top: 17px;
  }

  .contact-submit {
    padding: 32px 0 36px;
  }

  .contact-submit button {
    width: 100%;
    max-width: 320px;
  }

  .site-footer {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 64px var(--gl-mobile) calc(92px + env(safe-area-inset-bottom));
    /* SP版フッター背景はXD原本パスデータ実測で角丸ゼロと確定。 */
    border-radius: 0;
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 44px;
  }

  .site-footer__logo {
    width: 100px;
    height: auto;
  }

  .site-footer__instagram {
    display: none;
  }

  .site-footer__nav {
    order: 1;
    margin-left: 31px;
    grid-template-columns: 146px auto;
    gap: 0;
    font-size: 15px;
  }

  .site-footer__brand {
    order: 2;
    align-self: center;
    text-align: center;
  }

  .site-footer__nav a {
    display: block;
    min-height: 0;
    padding: 0;
    border-bottom: none;
    line-height: 1;
  }

  .site-footer__nav-column:not(.site-footer__nav-column--detail) > li + li {
    margin-top: 27px;
  }

  .site-footer__nav-column:not(.site-footer__nav-column--detail) > li:nth-child(3) {
    margin-top: 54px;
  }

  .site-footer__nav-column:not(.site-footer__nav-column--detail) > li:nth-child(5) {
    margin-top: 60px;
  }

  .site-footer__nav-group > ul {
    margin-top: 21px;
    padding-left: 0;
  }

  .site-footer__nav-group > ul li + li {
    margin-top: 21px;
  }

  .site-footer__nav-column--detail > li + li {
    margin-top: 39px;
  }

  .site-footer__nav-group > ul a {
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .site-footer__copyright {
    position: static;
    margin-top: 12px !important;
    text-align: center;
    font-size: 10px;
    line-height: 1.5;
    writing-mode: horizontal-tb;
  }

  .fixed-cta {
    z-index: 300;
    bottom: 0;
    width: 50%;
    height: calc(56px + env(safe-area-inset-bottom));
    min-height: 56px;
    padding: 0 8px env(safe-area-inset-bottom);
    border-radius: 0;
    font-size: 15px;
    line-height: 1.25;
    gap: 11px;
    transition: transform .3s ease;
  }

  body.is-nav-open .fixed-cta {
    transform: translateY(100%);
  }

  .fixed-cta--visit {
    left: 0;
    flex-direction: row;
  }

  .fixed-cta__visit-image {
    display: none;
  }

  .fixed-cta__visit-label {
    display: inline;
    width: auto;
    font-size: inherit;
    line-height: inherit;
  }

  .fixed-cta--outsourcing {
    right: 0;
    left: 50%;
    background: var(--lime);
    font-size: 15px;
  }

  .fixed-cta__outsourcing-image {
    display: none;
  }

  .fixed-cta__label {
    display: inline;
  }

  .fixed-cta--visit > .fixed-cta__eyes {
    display: flex;
    width: 30px;
    height: 27.67px;
    margin-top: 0;
    flex: 0 0 auto;
  }

  .fixed-cta__eyes svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .fixed-cta__megaphone {
    display: flex;
    width: 28px;
    height: 23.34px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }

  .fixed-cta__megaphone svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
  }

  .subpage-hero {
    width: 100%;
    height: 55vh;
    min-height: 360px;
    max-height: 520px;
    margin-left: 0;
    border-radius: 0;
  }

  /* owner指摘(2026-08-12): モバイルは横書きのspanに切替えていたが、
     PCと同じく縦書きに戻す。PC用に作成済みのtitle-*.png(縦書き済み画像)を
     そのまま流用する。位置はヒーロー中央(owner指摘で右下→中央へ変更)。 */
  /* 2026-09-30 小西さん指摘: 施設案内のSPはPC用の横長画像を拡大して切り取るため
     鍵が大写しになり奥のロッカーが写らなかった。XD原本(DSC04131・縦長)の上部を
     縦長で切り出した hero-facility-page-sp.jpg を <picture> で出し分け、上端基準で表示する。 */
  .subpage-hero--shisetsu > picture > img {
    object-position: center top;
  }

  .subpage-hero__title,
  .subpage-hero__title--flow {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%);
  }

  /* owner指摘(2026-08-12): PC用画像(width:39px)をそのまま流用すると
     モバイル幅(375px)に対して相対的に大きく見えるため、もう少しだけ縮小。 */
  .subpage-hero__title img {
    width: 30px;
  }

  .works-section,
  .facility-section,
  .flow-section,
  .timetable-section,
  .about-section {
    height: auto;
    padding: 72px var(--gl-mobile);
  }

  .works-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 60px;
    margin: 48px 0 0;
  }

  .work-card {
    /* owner指摘(2026-08-13): スマホは1カラムで写真が中央に来るため、
       見出し・本文も枠内で中央揃えにする。PCは @media (min-width:769px) 側の
       左揃え(margin-left:50px)のままなので影響しない。 */
    min-height: 0;
    text-align: center;
  }

  .work-card > img {
    width: min(100%, 335px);
    height: auto;
    aspect-ratio: 1;
  }

  .work-card h3 {
    margin-top: 25px;
    font-size: 21px;
    line-height: 1.55;
  }

  .work-card p {
    /* Brown Brown(本番)のスマホ本文に合わせる: 13px / 行送り26px */
    font-size: 13px;
    line-height: 26px;
  }

  .facility-gallery {
    position: static;
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 48px 0 0;
  }

  .facility-gallery img,
  .facility-gallery__wide-a,
  .facility-gallery__tall-a,
  .facility-gallery__room-a,
  .facility-gallery__sign,
  .facility-gallery__restroom,
  .facility-gallery__wide-b,
  .facility-gallery__room-b,
  .facility-gallery__tall-b {
    position: static;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
  }

  .timetable-section .section-heading {
    font-size: clamp(38px, 11vw, 46px);
    white-space: normal;
  }

  .timetable-grid {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 36px;
    margin: 48px 0 0;
  }

  .schedule-column {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
    -webkit-overflow-scrolling: touch;
  }

  .schedule-column h3 {
    padding: 16px;
    font-size: 20px;
    letter-spacing: normal;
  }

  .schedule-list {
    min-width: 310px;
  }

  .schedule-list li {
    min-height: 58px;
    /* owner指摘(2026-08-13): 時刻列が窮屈だったので128px→145pxへ拡張。
       375px幅での実測: 最長時刻「10:00〜10:10」が86px、左右の余白が
       11px→19.4pxになる。 */
    grid-template-columns: 145px 1fr;
    font-size: 14px;
  }

  /* owner指摘(2026-08-13): スマホのタイムテーブルは時刻・内容とも左寄せだったが、
     それぞれのセル内で中央揃えにする。li が display:grid なので、各グリッド項目
     (time / span) に text-align:center を効かせればセル幅の中央に来る。
     PC(min-width:769px)は左寄せのままで変更しない。 */
  .schedule-list time,
  .schedule-list span {
    padding: 0 10px;
    text-align: center;
  }

  /* 時刻列を広げた分、内容列は最長の「❾電話で一日の成果を報告」(168px)が
     1行に収まらなくなる。内側余白を10→4pxに詰めて折り返しを回避する
     (375px幅で使える幅170px・実測の残余白2px)。owner判断で折り返しより
     余白を削る方を採用。⚠ これより狭い端末(360px等)では折り返すが、
     それは この変更前から同じ。 */
  .schedule-list span {
    padding: 0 4px;
  }

  .flow-steps {
    width: 100%;
    margin: 42px 0 0;
  }

  .flow-step {
    display: block;
    min-height: 0;
    /* owner指摘(2026-08-12): 矢印の上下余白を均等に広げるため30px→41pxへ
       (詳細計算は.flow-step:not(:last-child)::afterのコメント参照)。 */
    margin-top: 41px;
    padding: 26px 20px;
    border-radius: 24px;
    /* owner指摘(2026-08-12): STEPバッジ・見出し・本文が左寄りで非対称に見える
       →.about-section__heading と同じく中央揃えでバランスをとる。 */
    text-align: center;
  }

  .flow-step__label {
    /* owner指摘(2026-08-12): バッジ画像自体に上下67px相当の余白が焼き込まれて
       おり(step-N.png 380x220中、文字部分は67〜153pxの中央領域のみ)、
       contain指定のままだと見出しとの間が実質50px近く空いて見える。
       height縮小+object-fit:coverで余白を上下均等に切り詰める。 */
    width: 190px;
    height: 72px;
    margin: 0 auto 8px;
    object-fit: cover;
  }

  .flow-step h3 {
    font-size: 21px;
    line-height: 1.5;
  }

  .about-section__heading {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    margin: 0;
    text-align: center;
  }

  .about-section__heading h2,
  .about-section__heading > p {
    grid-column: auto;
    grid-row: auto;
  }

  .about-panel {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 42px;
    padding: 32px 20px;
    border: 2px solid var(--charcoal);
    border-radius: 22px;
  }

  .about-columns {
    display: grid;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .about-columns::after {
    display: none;
  }

  .about-columns h3,
  .data-section > h3 {
    font-size: 25px;
    line-height: 1.5;
  }

  .about-columns article > p,
  .data-section > p {
    /* Brown Brown(本番)のスマホ本文に合わせる: 13px / 行送り26px */
    font-size: 13px;
    line-height: 26px;
  }

  .data-section {
    /* margin/padding-top/right は必ず全部指定する。1588行のグローバル値
       (デスクトップ用47px/36px)を遮蔽しているのがこの4値。どれか消すと漏れる。 */
    margin: 42px 0 0;
    padding-top: 42px;
    padding-right: 0;
    padding-left: 0;
  }

  .data-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    margin-top: 34px;
  }

  .data-chart {
    max-width: 280px;
  }

  .data-chart figcaption h4 {
    font-size: 21px;
  }

  .data-chart__label {
    width: 106px;
    font-size: 12px;
  }
}

/* Adobe XD layout CSV (1440px artboards): desktop geometry source of truth. */
@media (min-width: 769px) {
  .data-chart__label {
    font-size: 14px;
    line-height: 20px;
  }

  .section-heading-row {
    position: relative;
    display: flex;
    width: 1440px;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
    text-align: center;
  }

  /* カンプ実測: 下層3ページの見出し画像→導入文は7px（12pxだと5〜6px下がる）。
     indexのセクションは12pxが正しく、7pxにするとdiffが4.45→4.52へ悪化するため広げない。 */
  .works-section .section-heading-row,
  .facility-section .section-heading-row,
  .flow-section .section-heading-row,
  .timetable-section .section-heading-row {
    gap: 7px;
  }

  .section-heading-row .section-heading {
    position: static;
    display: flex;
    justify-content: center;
    transform: none;
  }

  .section-heading-row > p {
    position: static;
    width: 700px;
    margin: 0;
    letter-spacing: .05em;
    text-align: center;
  }

  /* TOP: every section heading is centered, with its copy stacked below. */
  .instagram {
    padding-top: 0;
  }

  .instagram .section-heading-row {
    position: absolute;
    top: 154px;
  }

  .instagram-carousel {
    position: absolute;
    top: 383px;
    width: 100%;
    margin-top: 0;
  }

  .instagram-carousel .carousel__track {
    /* XD原本実測(owner指摘2026-08-15「デザイン通り6枚」): INSTA グループ内の
       6枚の画像フレーム(長方形1983〜1988)の中心x座標から算出。
       カード300px+gap20pxはサイト実装と一致。1枚目は-245px(55pxだけ見える)
       から始まる非対称なオフセットで、左右均等配分ではなく原本の値をそのまま使う。 */
    --instagram-track-offset: -245px;

    gap: 20px;
  }

  .instagram-card {
    width: 300px;
    height: 375px;
  }

  .instagram-card--lead {
    margin-right: 10px;
  }

  .pickup {
    padding-top: 0;
  }

  .pickup .section-heading-row {
    position: absolute;
    top: 48px;
  }

  .pickup-carousel {
    position: absolute;
    top: 256px;
    width: 100%;
    margin-top: 0;
  }

  .staff {
    padding-top: 0;
  }

  .staff .section-heading-row {
    position: absolute;
    top: 48px;
    margin: 0;
  }

  .staff-grid {
    position: absolute;
    /* 実体寸法は必ずshape + transformから取る。visualBoundsは変形と効果を含む
       描画AABBであり、一般に実体寸法へ逆算できない。影の分を引けば実体に戻る、
       という理解は誤り。330x440を3deg回転したAABBは352.58x456.67、dropShadowを
       含むvisualBoundsは370.58x474.67となるため、逆回転して得る347.13x457.13は
       実体ではない（差は回転角に依存する）。
       top:277pxはXD由来のカード上辺2807pxから、.section { position: relative } の
       実測STAFF節上端を引いた結果。2530pxは導出元ではなく結果である。hero /
       instagram / pickupなど上流sectionの高さを変えたらこの検証は失効するため、
       comp_diffを再実行すること。
       3列の中心は345 / 720 / 1096、行ピッチは480px（440px + 40px）。gap:45.5pxは
       XD左辺180 / 555 / 931の不揃いを配分する意図的な妥協で、中央だけ+0.5pxずれる。
       diff指標を見ずに中央カードのleftを追いかけないこと。 */
    top: 277px;
    left: 180px;
    width: 1081px;
    height: auto;
    grid-template-columns: repeat(3, 330px);
    grid-auto-rows: 440px;
    gap: 40px 45.5px;
    margin: 0;
  }

  .members {
    padding-top: 0;
  }

  .members .section-heading-row {
    position: absolute;
    top: 84px;
    margin: 0;
  }

  /* images/headings/heading-members.png は文字が画像内で左寄せに描かれており、
     透明パディングが左61px/右201px(1100px幅キャンバス内、実測)と非対称。
     コンテナは画像の「箱」を中央寄せするため、文字自体は中央から35px左にずれる
     （550px表示幅換算 = (201-61)/2 × 0.5 = 35px。カンプとの実測差35pxと一致）。
     他の見出し画像は表示換算で最大7px程度（heading-about）に収まり無視できる差
     だが、この画像だけ突出しているので個別補正する。
     ⚠ 画像を差し替えたら必ずこの数値を再実測すること。パディングが対称化・
     逆非対称化した場合、この+35pxがそのまま逆向きのズレになる。 */
  #members-title img {
    transform: translateX(35px);
  }

  .members-collage:not(.members-collage--sp) {
    position: absolute;
    inset: 0;
    display: block;
    width: 1440px;
    height: 1170px;
    margin: 0;
  }

  .members-collage--sp {
    display: none;
  }

  .member {
    position: absolute;
    z-index: auto;
    max-width: none;
    max-height: none;
  }

  /* STAFF: XDでは写真要素が354×458px（カード330×440より大きい）でカードにクリップされ、
     cover で寄って入る。実装は contain でパディング内(311×355)に全身を収めていたため
     人物が小さく上に寄っていた。名前バッジはカード内 left:65px / top:370px
     （bottom:30px）なので、絶対配置で保持する。
     ⚠ visualBoundsは変形と効果を含む描画AABBであり、影を引いて実体寸法へ戻すことは
     できない。寸法は必ずshape + transformから取る。 */
  .staff-card {
    overflow: hidden;
  }

  .staff-card img {
    position: absolute;
    /* XD原本のshapeより、カード=330x440 / 写真枠=354x458。
       visualBoundsは変形と効果を含む描画AABBで、寸法根拠にしてはいけない。
       枠はカード内 left:-27 / top:15。pattern.meta.ux の5枚共通値
       offsetX=0.0424 / offsetY=0.1394を表示倍率354/1544=0.229275倍して足す
       （offsetは切り出し開始位置ではなく枠内で画像をずらす量。
        切り出し開始と解釈した版は 4.26→4.84% と悪化して否定された）。
       → offsetX = 0.0424×1544×(354/1544)=15.0096px,
          offsetY = 0.1394×2000×(354/1544)=63.9218px
       → left = -27 + 15.0096 = -11.9904 / top = 15 + 63.9218 = 78.9218。
       ⚠ これらの値は元画像1544x2000、coverが幅律速
       （2000×0.229275≒458.55）の前提で焼き込んだもの。実写真に差し替えると寸法・
       アスペクト比次第でcoverが高さ律速へ切り替わり、倍率ごと変わる。写真差し替え時は
       写真ごとにoffsetを再導出する。または354:458に事前クロップして書き出し、
       offset項自体を捨てるほうが安全。現在の6枚はstaff-placeholder.pngの仮画像。 */
    top: 78.9px;
    left: -12px;
    width: 354px;
    /* 全体の img { max-width: 100% } に効かれて330pxへ潰されるので解除する。 */
    max-width: none;
    height: 458px;
    object-fit: cover;
    object-position: center top;
  }

  /* ⚠ この個別補正はXD上の特定写真のクロップ調整値をDOM位置:nth-child(1)へ結び付ける。
     スタッフの追加・削除・並び替えで1人目用の補正が別人に適用されるため、変更時は
     対応関係を必ず見直すこと。1枚目だけはXDのpattern.meta.uxが
     offsetX=0.0367232 / offsetY=0.1429888。
     → left=-27 + (0.0367232×354)=-14.0000,
        top=15 + (0.1429888×2000×354/1544)=80.5674。 */
  .staff-grid .staff-card:nth-child(1) img {
    top: 80.6px;
    left: -14px;
  }

  .staff-card h3 {
    position: absolute;
    bottom: 30px;
    left: 50%;
    z-index: 2;
    margin: 0;
    /* XD実測: size 24 / charSpacing 50 / lineHeight 40 */
    line-height: 40px;
    letter-spacing: .05em;
    /* 参考: XD原本ではバッジ中心はカード中心より 3.2px 左（6枚とも -2.9〜-3.3）。
       ただし実装済みの描画結果とカンプの実測差は -2.0/+4.5/-1.0/-1.5/+3.0/+2.5 と
       符号がばらついており、一律 -3.2px を足すと3枚が改善・3枚が悪化で相殺する。
       カード自体の位置ゆらぎに埋もれる水準なので中央寄せのままにする
       （バッジ実寸200x40、shape基準でカード内 left:65px / top:370px＝bottom:30px）。 */
    transform: translateX(-50%);
  }

  .staff-card__catch {
    /* XD実測: size 38 / charSpacing 50 / lineHeight 44 / 回転 -7deg。 */
    line-height: 44px;
    letter-spacing: .05em;
  }

  /* キャッチのXD text transformは全6件ともrot=-7.00deg。位置は一律top:34/left:18だと
     最大54pxずれていたため、カンプとのbbox実測差で個別補正する。
     XD生アンカー対応表（DOM順、leftはカード左辺基準）:
     | # | 文言 | XD由来left | 採用left | 差 |
     | 1 | みんなの/頼れるリーダー | 27.11 | 24 | -3.1 |
     | 2 | いつも笑顔の/ニコニコパワー | 32.11 | 28 | -4.1 |
     | 3 | 励まし上手★ | 48.90 | 46 | -2.9 |
     | 4 | おしゃべり/大好き | 70.37 | 69 | -1.4 |
     | 5 | やさしくて/気配り上手 | 64.78 | 62 | -2.8 |
     | 6 | シャイだけど/頼りになる | 46.52 | 45 | -1.5 |
     採用leftが一貫して約3px小さいのは、カンプ側のキャッチがXD座標よりわずかに左に
     あり、採用値のほうがカンプdiffが良いため。
     以前「現行のままが最良」とした相互相関(dx-12/dy+12→悪化)は全カード一括で測った
     誤りで、カードごとに測ると差は実在した(2026-08-07 owner指摘で判明)。
     2026-08-08にカード寸法を330x440へ修正した際、カード縮小に伴い再実測した値。 */
  .staff-grid .staff-card:nth-child(1) .staff-card__catch { left: 24px; top: 14px; }
  .staff-grid .staff-card:nth-child(2) .staff-card__catch { left: 28px; top: 15px; }
  .staff-grid .staff-card:nth-child(3) .staff-card__catch { left: 46px; top: 41px; }
  .staff-grid .staff-card:nth-child(4) .staff-card__catch { left: 69px; top: 13px; }
  .staff-grid .staff-card:nth-child(5) .staff-card__catch { left: 62px; top: 18px; }
  .staff-grid .staff-card:nth-child(6) .staff-card__catch { left: 45px; top: 21px; }

  .member--02 { top: 387px; left: 786px; width: 153px; height: 373px; }
  .member--03 { top: 482px; left: 340px; width: 150px; height: 273px; }
  .member--04 { top: 677px; left: 939px; width: 194px; height: 233px; }
  .member--05 { top: 726px; left: 321px; width: 176px; height: 350px; }
  .member--letter-j { top: 375px; left: 66px; width: 149px; height: 165px; transform: rotate(-20deg); }
  .member--letter-o { top: 324px; left: 213px; width: 126px; height: 126px; }
  .member--letter-y { top: 299px; left: 344px; width: 154px; height: 162px; transform: rotate(14deg); }
  .member--letter-w { top: 921px; left: 504px; width: 158px; height: 130px; transform: rotate(-17deg); }
  .member--letter-o2 { top: 887px; left: 669px; width: 128px; height: 131px; }
  .member--letter-r { top: 803px; left: 770px; width: 123px; height: 149px; }
  .member--letter-k { top: 874px; left: 879px; width: 141px; height: 183px; transform: rotate(21deg); }
  .member--letter-z { top: 941px; left: 995px; width: 125px; height: 147px; }
  .member--01 { top: 803px; left: 1149px; width: 227px; height: 275px; }
  .member--07 { top: 464px; left: 152px; width: 204px; height: 304px; transform: rotate(9deg); }
  .member--08 { top: 439px; left: 1206px; width: 137px; height: 330px; }
  .member--11 { top: 345px; left: 621px; width: 200px; height: 466px; }
  .member--12 { top: 619px; left: 473px; width: 180px; height: 255px; }
  .member--10 { top: 310px; left: 933px; width: 249px; height: 367px; }
  .member--09 { top: 784px; left: 124px; width: 197px; height: 279px; transform: rotate(4deg); }
  .member--06 { top: 364px; left: 469px; width: 165px; height: 199px; }

  .faq__panel {
    height: 1100px;
    padding-top: 47px;
  }

  .section-heading-row--faq {
    position: relative;
    top: 0;
    /* パネルのpadding(50px)を打ち消して全幅を使う。left:-50px だけだと中心が
       720→722px へ2pxずれるので、右も同じだけ広げて中心を保つ。 */
    left: -50px;
    width: calc(100% + 100px);
    height: auto;
  }

  /* SHIGOTO: CSV circles are 500px at x=180/760 and repeat every 718px. */
  .works-section {
    height: 3330px;
    padding-top: 0;
  }

  .works-section .section-heading-row {
    position: absolute;
    top: 116px;
  }

  .works-grid {
    position: absolute;
    top: 371px;
    left: 180px;
    display: grid;
    width: 1080px;
    grid-template-columns: repeat(2, 500px);
    grid-auto-rows: 718px;
    gap: 0 80px;
    margin: 0;
  }

  .work-card {
    min-height: 0;
  }

  .work-card > img {
    width: 500px;
    height: 500px;
    margin: 0;
  }

  .work-card h3 {
    margin: 24px 0 0 50px;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: .07em;
  }

  .work-card p {
    width: 400px;
    margin: 8px 0 0 50px;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: .06em;
  }

  /* SHISETSU: the gallery uses the artboard's x/y without flow offsets. */
  .facility-section {
    height: 2650px;
    padding-top: 0;
  }

  .facility-section .section-heading-row {
    position: absolute;
    top: 116px;
  }

  .facility-gallery {
    position: absolute;
    top: 371px;
    left: 180px;
    width: 1080px;
    height: 2280px;
    margin: 0;
  }

  .timetable-section {
    height: 1420px;
    padding-top: 0;
  }

  .timetable-section .section-heading-row {
    position: absolute;
    top: 131px;
  }

  .timetable-grid {
    position: absolute;
    top: 396px;
    left: 187px;
    display: grid;
    width: 1080px;
    height: 859px;
    grid-template-columns: repeat(2, 350px);
    gap: 206px;
    margin: 0;
    padding: 62px 85px 0;
    border: 2px solid var(--charcoal);
    border-radius: 30px;
    background: var(--cream);
    box-shadow: 3px 3px 3px rgb(0 0 0 / 16%);
  }

  .schedule-column {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .schedule-column h3 {
    /* カンプ実測: 見出し行は y=3739..3766。従来は 28px 低かった。
       リスト(①清掃など)の位置は合っているので、見出しだけを視覚的に上げる。 */
    position: relative;
    top: -28px;
    height: 41px;
    padding: 0;
    font-size: 32px;
    line-height: 41px;
  }

  .schedule-list li {
    position: relative;
    min-height: 60px;
    grid-template-columns: 1fr;
    border: 0;
    font-size: 22px;
    text-align: center;
  }

  .schedule-list li + li {
    margin-top: 20px;
  }

  .schedule-list span {
    padding: 0 8px;
  }

  .schedule-list time {
    position: absolute;
    left: 379px;
    width: 177px;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .schedule-column:last-child .schedule-list time {
    display: none;
  }

  /* FLOW: five CSV cards at x=187, width=1080, with 50px gaps. */
  .flow-section {
    padding-top: 0;
  }

  .flow-section .section-heading-row {
    position: absolute;
    top: 116px;
  }

  .flow-steps {
    position: absolute;
    top: 381px;
    left: 187px;
    display: flex;
    width: 1080px;
    flex-direction: column;
    gap: 50px;
    margin: 0;
  }

  .flow-step {
    display: grid;
    width: 1080px;
    min-height: 160px;
    grid-template-columns: 307px 1fr;
    margin: 0;
    padding: 0 45px 0 0;
    border-radius: 30px;
  }

  .flow-step:nth-child(2) {
    min-height: 190px;
  }

  /* XD原本(polygon, rotation:180): 矢印はカード下辺+17px〜+34px、
     水平中心はカード中心(x=727)ではなくページ中心(x=720)。
     tools/xd_nodes.py がpolygon形状を未対応で見落としており、
     以前はカンプ画像の目測(bottom:-24px / カード中心)で実装されていた。
     モバイルはカード幅が別物のためデスクトップのみ上書きする。 */
  .flow-step:not(:last-child)::after {
    bottom: -34px;
    left: 533px;
  }

  /* カンプ実測: STEPバッジと本文の間に実体3px・隙間3pxの縦点線が
     x=456（カードのパディングボックス左端から267px）にカード全高で入る。
     実装には線自体が無かった。 */
  .flow-step::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 267px;
    width: 2px;
    background: repeating-linear-gradient(
      to bottom,
      var(--charcoal) 0 3px,
      transparent 3px 6px
    );
    content: "";
  }

  .flow-step__label {
    justify-self: center;
    /* カンプ実測: STEPバッジはカード枠と独立して12px左。 */
    transform: translateX(-12px);
  }

  .flow-step h3 {
    font-size: 22px;
    /* XD: NotoSans-Bold 22 / charSpacing=70 */
    letter-spacing: .07em;
  }

  .flow-step div > p {
    font-size: 18px;
    /* XD: NotoSans-SemiBold 18 / charSpacing=100 */
    letter-spacing: .1em;
    line-height: 1.7;
  }

  .about-section {
    padding-top: 0;
    /* about-section__heading が top:-29px で自身の箱の上へはみ出す設計のため、
       .subpage-section 既定の overflow:hidden を解除する。解除しても
       about-section 内の他要素(about-panel/data-section)は自身の箱の中に
       収まっているため新たな見切れは発生しない。 */
    overflow: visible;
  }

  .about-section__heading {
    position: absolute;
    top: -29px;
    left: 0;
    display: flex;
    width: 1440px;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
    text-align: center;
  }

  .about-section__heading h2 {
    position: static;
    display: flex;
    justify-content: center;
    transform: none;
  }

  .about-section__heading > p {
    position: static;
    width: 686px;
    margin: 0;
    text-align: center;
  }

  .about-columns h3 {
    letter-spacing: .2em;
  }

  /* XD原本: 「工賃について」は y=2504、「就労支援B型とは?」は y=2510 で、
     右の見出しだけ6px高いのがデザイン側の指定。実装は両方同じ高さに置いていた。
     position:relative で見た目だけ上げ、下の工賃ブロックは動かさない。
     スマホは1カラムに積むので持ち込まない。 */
  .about-columns article + article h3 {
    position: relative;
    top: -6px;
  }

  .about-columns article > p {
    /* カンプ実測: 本文1行目の墨面上端が y=2553。見出しとの間隔はベースの14pxでは足りない。 */
    margin-top: 27px;
    letter-spacing: .05em;
  }

  /* 工賃ブロックの直後の本文だけ間隔が狭い。左カラムの本文は27pxで一致しているので
     .about-columns article > p ごと変えない。
     .about-wage + p だけでは .about-columns article > p に詳細度で負ける。 */
  .about-columns article > .about-wage + p {
    margin-top: 18px;
  }

  .about-columns .about-wage {
    /* カンプ実測: 1行目→2行目は41px（38pxだと45px） */
    line-height: 34px;
    letter-spacing: .05em;
  }

  .data-section > p {
    /* カンプ実測: 説明文の墨面上端が y=2904、円グラフ上端が y=2967。 */
    margin-top: 13px;
    letter-spacing: .05em;
  }

  .data-charts {
    margin-top: 42px;
  }

  /* XD原本の rangedStyles はこのテキストを2つに分けている:
     1行目「時給210円～650円」= SemiBold 22 / 2行目「※最低工賃210円を保障」= SemiBold 18。
     まとめて18pxにすると1行目が34px狭くなり、工賃ブロックごと13〜14px上がっていた。 */
  .about-columns .about-wage {
    font-size: 22px;
  }

  .about-wage small {
    font-size: 18px;
  }

  .site-shell--privacy .contact-section {
    padding-bottom: 100px;
  }

  .privacy-body {
    width: 900px;
    margin: 55px auto 0;
    font-size: 16px;
  }

  /* --- お問い合わせフォームのカンプ実測合わせ ---------------------------
     ここに置く理由が2つある。
     1) .contact-section / .contact-row / .contact-submit は確認・完了・エラー画面
        (send/*.php, send/thanks.html)と共有する。入力専用の位置調整は
        .contact-section--form に限定する。結果画面は .contact-form を明示的に
        再利用してパネル・ラベル列・ボタンを揃え、固有の余白は末尾で指定する。
     2) ベース側に書くと詳細度(0,2,0)がスマホ用ルール(0,1,0)に勝ってしまい、
        スマホ側で打ち消しルールを足す羽目になる。デスクトップMQに入れておけば
        スマホからは最初から見えないので、その打ち消し合戦が起きない。
     座標はすべて XD の shape 基準（visualBounds は影を含むので使わない）。 */
  .contact-section--form {
    /* CONTACT見出しは Ziclets のラスター画像。XDのベースライン y=274 に合わせると
       画像の ink 下端が 274.5 に来る値（画像の透明パディング 表示換算 上5px 込み）。 */
    padding-top: 200px;
  }

  .contact-section--form .section-heading-row {
    /* カンプ実測(お問合せ.png)で訂正: 見出し画像は実装・カンプで1px以内に一致
       (y=205-273 実装 / 206-274 カンプ)しているが、リード文1行目の墨面は
       実装294-309→カンプ311-325で17px不足していた。gap 7px→24pxで一致。
       旧コメントの「7px」はworks/facility/flow/timetableからの類推で、
       このページでは検証されていなかった。 */
    gap: 24px;
  }

  .contact-section--form .contact-form {
    /* gap修正(7→24px)でsection-heading-rowが17px高くなった分、
       margin-topを55px→38pxに減らしてパネル上端をXD実測値398pxに戻す
       (about-section__heading top:-29px と同型のカスケード事故を回避)。 */
    margin-top: 38px;
  }

  .contact-form .contact-row {
    /* パネル内側左端272 → 入力列左端 XD x=580 なので 308px */
    grid-template-columns: 308px 500px;
  }

  .contact-form .contact-row__label {
    /* パネル内側左端272 → XD ラベル x=360 */
    padding-left: 88px;
    /* XD原本: NotoSans-Bold 16px（18pxではない） */
    font-size: 16px;
  }

  .contact-form .contact-row--agree .contact-row__label {
    /* 同意事項の行はチェックボックス(36px)の高さしかないので、ラベルの縦中央も
       60px ではなく 36px 基準にする。60pxのままだとXDより12px下にずれる。 */
    min-height: 36px;
  }

  .contact-form .contact-submit {
    /* XD のボタンは中央寄せではなく入力列と左揃え（x=580）。左padding = ラベル列の幅 */
    justify-content: flex-start;
    /* XD: 同意事項の行 1156..1192 → ボタン 1222..1282 → パネル内側下端 1346 */
    padding: 30px 0 64px 308px;
  }
}

/* ── 1440px超（html.is-wide は main.js が clientWidth>=1440 で付与。zoomと同じ判定源）──
   余白と全幅要素だけを伸ばし、要素の大きさは変えない（小西さん指摘 2026-09-04・BABY TALE と同型） */
html.is-wide .hero {
  width: var(--viewport-width);
  margin-left: calc(720px - var(--viewport-width) / 2);   /* 親 .site-shell(1440) の左端 → 画面左端 */
  /* 1440px でちょうど 800px（連続）。1920px 相当（1067px）で頭打ちにして、超ワイドで
     FVが縦に大きくなりすぎるのを防ぐ（owner指摘 2026-09-07）。以降は帯だけが横に伸びる */
  height: min(calc(var(--viewport-width) * 800 / 1440), 1067px);
}
/* ロゴも同じ 1920px 相当（267px）で頭打ち。ヒーローの高さだけ止めると相対的に大きくなるため */
html.is-wide .hero__logo { width: min(calc(var(--viewport-width) * 200 / 1440), 267px); }
html.is-wide .page--home .site-shell { height: auto; }     /* ヒーローの伸びを吸収（子は全て in-flow） */

html.is-wide .instagram,
html.is-wide .pickup { overflow: visible; }                 /* .section{overflow:hidden} のクリップ解除 */
html.is-wide .instagram-carousel,
html.is-wide .pickup-carousel {
  left: calc(720px - var(--viewport-width) / 2);
  width: var(--viewport-width);
}
/* reduced-motion の静止状態（JSがインライン transform を外す）も枠基準の位置を保つ */
html.is-wide .pickup-carousel__track {
  --pickup-static-track-offset: calc(-247.5px + var(--viewport-width) / 2 - 720px);
}

html.is-wide .site-footer {
  width: calc(50% + 540px);          /* 右端 = 枠右端 - 180px のまま（50% は body 幅 = clientWidth） */
  margin-left: 0;
  padding-left: calc(50% - 560px);   /* 枠左端 + 160px のまま */
}
html.is-wide .subpage-hero { width: calc(var(--viewport-width) / 2 + 540px); }   /* margin-left:180 のまま右端まで */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .has-js .fade-in {
    transition: none !important;
  }

  .fixed-cta__eyes {
    animation: none !important;
  }

  .instagram-carousel .carousel__track,
  .pickup-carousel__track {
    will-change: auto;
  }
}

/* --- 確認画面・完了画面・エラー画面（send/*）------------------------
   入力ページの .contact-form を再利用してクリーム色のパネルに統一する。
   入力専用の .contact-section--form は付けず、結果画面の余白だけここで指定する。 */
.page--contact-result .site-shell--contact {
  height: auto;
}

.contact-section--result {
  padding-bottom: 100px;
}

.contact-form--result .contact-confirm {
  margin: 0;
}

.contact-form--result .contact-confirm dd {
  min-width: 0;
  margin: 0;
  padding: 14px 0;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.contact-form--result .contact-notice {
  margin: 0;
  padding: 0 88px;
  line-height: 2;
  overflow-wrap: anywhere;
}

.contact-form--result .contact-submit {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.contact-form--result .contact-submit p {
  margin: 0;
}

.contact-form--result .contact-submit a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (min-width: 769px) {
  .contact-section--result {
    padding-top: 200px;
  }

  .contact-section--result .section-heading-row {
    gap: 24px;
  }

  .contact-section--result .contact-form {
    margin-top: 38px;
  }
}

@media (max-width: 768px) {
  .contact-section--result {
    padding-bottom: 72px;
  }

  .contact-form--result .contact-confirm dd {
    padding: 0;
  }

  .contact-form--result .contact-notice {
    padding: 0;
  }

  .contact-form--result .contact-submit {
    align-items: center;
  }

  .contact-form--result .contact-submit form {
    width: 100%;
    max-width: 320px;
  }
}