/* /recruit/environment 働く環境（templates/recruit/environment.mjs）。実測: docs/design-recruit.md §3-4 §4(#4)
   ブレークポイント: 〜599 / 600〜767 / 768〜1079（展開した折りたたみ＝独立した帯）/ 1080〜
   規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 単位禁止・色はトークンのみ
   幅ごとの並び: 魅力カード 〜1079 は 1 列（番号→見出し→本文→写真）、1080〜 は文字 50%＋写真 50% の交互。
               福利厚生カード 〜767 は 2 列（プレビューの 344=1 列 11 枚は直す）、768〜 は 3 列（1 グループ＝1 行）。 */

/* ---------- CHARMS 働く魅力 ---------- */
.charm-list { display: grid; gap: 24px; }
.charm { display: grid; gap: 20px; padding: 32px 24px; border-radius: var(--r-m); background: var(--c-white); color: var(--c-ink-deep); }
/* 番号（薄ピーチの大数字）＋縦点線＋見出し。〜599 は番号の行の下に見出しが折れる（flex-basis で自動） */
.charm-head { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 24px; }
.charm-num { display: flex; align-items: center; margin: 0; padding-right: 24px; border-right: var(--dash); font-family: var(--f-en); font-size: 40px; line-height: 1; letter-spacing: 0.08em; color: var(--c-peach-soft); }
.charm-title { flex: 1 1 240px; min-width: 0; font-size: 22px; line-height: 1.8; letter-spacing: 0.06em; text-wrap: balance; }   /* 参照: 22px・344 は 1 行 40px、768〜 は 55px */
.charm-title strong { color: var(--c-orange); }
.charm-text { font-size: 15px; line-height: var(--lh-loose); letter-spacing: 0.06em; }
.charm-text > p + p { margin-top: 0.8em; }
/* 写真: 画像ファイルに焼き込まれた歯の形（Figma 224:4296 のマスクと同じ）をそのまま見せる（切り抜きは重ねない。下の「歯の形」の節）。
   右下に薄いスマイル（写真の手前・#F1EAE5）。
   max-width は .charm-photo-wrap に付ける（スマイルの基準を写真と同じ箱にするため。.charm-photo に付けるとスマイルが写真から離れる） */
.charm-photo-wrap { position: relative; margin-top: 4px; }
.charm-photo img { width: 100%; }
.charm-photo-wrap .smile { z-index: 2; width: 28%; right: 2%; bottom: -10%; }   /* 参照 344: 写真右下の内側に約 60px */

@media (min-width: 600px) {
  .charm { padding: 40px 32px; gap: 24px; }
  .charm-num { font-size: 48px; }
  .charm-text { font-size: 16px; }
  .charm-photo-wrap { max-width: 560px; margin-inline: auto; width: 100%; }
  .charm-photo-wrap .smile { width: 30%; right: 2%; bottom: -10%; }
}
/* 768〜1079: 1 列のまま（841 の実物どおり）。カード内余白 64、写真は 440 で中央、本文→写真 64、スマイルは写真の右外へ少しはみ出す（841 実測 590〜725 / 写真右端 640） */
@media (min-width: 768px) and (max-width: 1079px) {
  .charm { padding: 64px; gap: 28px; }
  .charm-num { font-size: 56px; }
  .charm-title { line-height: 2.4; }
  .charm-photo-wrap { max-width: 440px; margin-top: 24px; }
  .charm-photo-wrap .smile { width: 31%; right: -16%; bottom: -6%; }
}
/* 1080〜: 文字 50%＋写真 50%。偶数番は写真が左（スマイルも左下） */
@media (min-width: 1080px) {
  /* 参照 pc1280: 文字 495 ＋ 写真 525（gap 50）。写真側をわずかに広く */
  .charm { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); grid-template-rows: auto 1fr; column-gap: 48px; row-gap: 32px; padding: 64px; align-items: start; }
  .charm-head { grid-column: 1; }
  .charm-text { grid-column: 1; }
  .charm-photo-wrap { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
  .charm.is-reverse .charm-head, .charm.is-reverse .charm-text { grid-column: 2; }
  .charm.is-reverse .charm-photo-wrap { grid-column: 1; grid-row: 1 / 3; }
  .charm.is-reverse .charm-photo-wrap .smile { right: auto; left: 10%; bottom: -12%; }
  .charm-num { font-size: 64px; }
  .charm-title { font-size: 22px; line-height: 2.5; }   /* 参照: 2 行で 55px 送り */
  .charm-photo-wrap { max-width: none; }
  /* 参照 pc1280: スマイル幅 135（写真 525 の 26%）、右端は写真の内側 90px、下端は写真より 40px 下 */
  .charm-photo-wrap .smile { width: 26%; right: 10%; bottom: -12%; }
}

/* ---------- 標語＋写真帯 ---------- */
.env-slogan { text-align: center; padding-block: 24px; }
/* 参照: 344=24px / 841・1280=36px、字間 0.15em（中央揃えなので text-indent で相殺） */
.env-slogan-title { font-size: 24px; color: var(--c-orange); line-height: 1.7; letter-spacing: 0.15em; text-indent: 0.15em; text-wrap: balance; }
.env-slogan-br { display: none; }   /* SP だけ「、」の位置で改行する（〜599 で表示・読点は隠す。参照の SP 用テキストと同じ） */
@media (max-width: 599px) { .env-slogan-br { display: inline; } }
.env-slogan-en { margin-top: 8px; font-family: var(--f-en); font-size: 13px; letter-spacing: var(--ls-label); color: var(--c-orange); text-indent: var(--ls-label); }
.env-slogan .smile { left: 50%; top: 50%; transform: translate(-50%, -54%); width: 140px; }
/* 写真帯: 2 組を横に並べて translateX(-50%) で流す（中央揃え＋overflow の併用はしない）。高さは幅で 130 / 180 / 220 / 300 */
.pband { --pband-h: 130px; --pband-gap: 16px; margin-top: 32px; padding-block: 8px; }
.pband-track { display: flex; width: max-content; animation: env-marquee 60s linear infinite; }
.pband-set { display: flex; gap: var(--pband-gap); padding-right: var(--pband-gap); }
.pband-set { align-items: flex-start; }
.pband-item { flex: none; width: calc(var(--pband-h) * 1.25); height: var(--pband-h); }
.pband-item img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-m); }
/* 楕円は真円率 50%、矩形より 12% 下げて互い違いに（参照 pc1280: 矩形 583〜870 / 楕円 620〜905） */
.pband-item.is-oval { margin-top: calc(var(--pband-h) * 0.12); }
.pband-item.is-oval img { border-radius: 50%; }
@keyframes env-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* 動かさず、先頭から横スクロールできる箱にする（2 組目は不要） */
  .pband { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .pband-track { animation: none; justify-content: flex-start; }
  .pband-set[aria-hidden="true"] { display: none; }
}
@media (min-width: 600px) { .pband { --pband-h: 180px; --pband-gap: 24px; } .env-slogan { padding-block: 32px; } .env-slogan-title { font-size: 28px; } }
/* 768〜: 帯の高さ 180・間隔 45（841 実測）。標語 36px。セクションの上下に少し足す（参照 841: カード→標語 137 / 帯→WELFARE 125） */
@media (min-width: 768px) { .pband { --pband-h: 180px; --pband-gap: 44px; margin-top: 40px; } .env-slogan-title { font-size: 36px; line-height: 1.8; } .env-slogan .smile { width: 200px; } .section + .section.env-banner { padding-top: calc(var(--section-y) + 16px); } .env-banner { padding-bottom: calc(var(--section-y) + 16px); } }
/* 1080〜: 帯の高さ 290・間隔 40（pc1280 実測: 矩形 355×287）。参照はカード→標語 225 / 帯→WELFARE 205 なので上下に足す */
@media (min-width: 1080px) { .pband { --pband-h: 290px; --pband-gap: 40px; margin-top: 56px; } .env-slogan { padding-block: 48px; } .env-slogan .smile { width: 220px; } .section + .section.env-banner { padding-top: calc(var(--section-y) + 48px); } .env-banner { padding-bottom: calc(var(--section-y) + 80px); } }

/* ---------- WELFARE 福利厚生 ---------- */
.env-welfare-grid { display: grid; gap: 32px; }
.env-welfare .sec-head { margin-bottom: 0; }
.welfare-groups { display: grid; gap: 40px; }
/* 小見出し: 参照 344=20px / 768〜=16px、字間 0.2em（「ライフサポート」7 字で 170px） */
.welfare-group-title { margin-bottom: 32px; padding: 2px 0 2px 24px; border-left: 4px solid var(--c-orange); font-size: 20px; line-height: 1.7; letter-spacing: 0.2em; color: var(--c-ink-deep); }
/* カードは共通 .igrid（〜767: 2 列 / 768〜: 3 列）。原文の改行（インフルエンザ／予防接種）は pre-line で残す
   li は grid で伸びるが中のカードは伸びないので、li を grid にして同じ行のカード高さを揃える（参照は 1 行が同じ高さ） */
.welfare-grid .igrid-item { display: grid; }
.welfare-grid .igrid-label { white-space: pre-line; }
.welfare-grid .igrid-label small { white-space: normal; margin-top: 4px; font-size: 11px; line-height: 1.5; letter-spacing: 0; }
.welfare-grid .igrid-card { gap: 12px; min-height: 172px; padding: 20px 8px 18px; }
.welfare-grid .igrid-ic.is-round { width: 72px; height: 72px; padding: 12px; background: var(--c-cream); }   /* 参照の丸は #F9F6F4（ピーチではない） */
@media (min-width: 600px) {
  .welfare-grid .igrid-card { min-height: 200px; padding: 24px 12px 20px; }
  .welfare-grid .igrid-ic.is-round { width: 88px; height: 88px; padding: 14px; }
  .welfare-grid .igrid-label small { font-size: 12px; }
}
/* 768〜1079: 3 列（1 グループ＝1 行）。アイコン 112・名前 16。福利厚生→採用情報帯は参照 841 で 135 */
@media (min-width: 768px) {
  .env-welfare { padding-bottom: calc(var(--section-y) + 24px); }
  .env-welfare-grid { gap: 40px; }
  .welfare-groups { gap: 56px; }
  .welfare-group-title { font-size: 16px; margin-bottom: 32px; }
  .welfare-grid .igrid-card { gap: 16px; min-height: 236px; padding: 36px 12px 28px; }
  .welfare-grid .igrid-ic.is-round { width: 112px; height: 112px; padding: 18px; }
}
/* 1080〜: 左見出し 240 ＋ 右にグループ（カード 3 列 ≒277px、アイコン丸 136、名前 18）。福利厚生→採用情報帯は参照 pc1280 で 215 */
@media (min-width: 1080px) {
  .env-welfare { padding-bottom: calc(var(--section-y) + 96px); }
  .env-welfare-grid { grid-template-columns: 240px minmax(0, 1fr); column-gap: 80px; align-items: start; }
  .welfare-groups { gap: 64px; }   /* 参照: カード下端→次の小見出し 65 */
  .welfare-group-title { font-size: 16px; margin-bottom: 40px; }
  .welfare-grid .igrid-card { min-height: 277px; padding: 48px 16px 40px; }
  .welfare-grid .igrid-ic.is-round { width: 136px; height: 136px; padding: 22px; }
  .welfare-grid .igrid-label { font-size: 18px; }
  .welfare-grid .igrid-label small { font-size: 13px; }
}

/* ---------- RECRUIT INFO（上辺が膨らむグラデ帯・白リンクカード・CTA 2 枚・ENTRY） ---------- */
.env-rinfo { background: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 42%, var(--c-cream) 80%); border-radius: 50% 50% 0 0 / 56px; padding: 96px 0 var(--section-y); }
.env-rinfo-grid { display: grid; gap: 32px; }
.env-rinfo .sec-head { margin-bottom: 0; }
.env-rinfo-cards { display: grid; gap: 16px; }
.env-rinfo .link-card { min-height: 96px; padding: 24px 24px 24px 32px; }
.env-ctas { display: grid; gap: 10px; margin-top: 80px; }   /* 参照 344: CTA 間 10px・カード→CTA 80 */
.env-ctas .cta { min-height: 160px; padding: 24px 24px 24px 32px; }
.env-ctas .cta-title { font-size: 24px; }
.env-ctas .env-entry { min-height: 200px; }   /* .env-ctas .cta と同じ詳細度で書く（.env-entry 単独だと負けて 224 のまま） */
.env-entry .cta-text { align-items: baseline; gap: 8px 16px; }
.env-entry .cta-en { font-size: 48px; line-height: 1; }
.env-entry .cta-title { font-size: 16px; letter-spacing: 0.25em; }
.env-entry .cta-smile { width: 200px; left: 24px; top: -10px; }
@media (min-width: 600px) {
  .env-rinfo { border-radius: 50% 50% 0 0 / 80px; padding-top: 112px; }
  .env-ctas .cta { padding-inline: 40px; }
}
/* 768〜1079: CTA 2 枚は横並び、ENTRY は全幅。帯の見出しはまだ 1 列 */
@media (min-width: 768px) {
  .env-rinfo { border-radius: 50% 50% 0 0 / 120px; padding-top: 140px; }
  .env-rinfo .link-card { min-height: 120px; padding: 32px 40px; }
  .env-rinfo .link-card-label { font-size: 18px; }
  .env-ctas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 96px; }
  .env-ctas .cta { min-height: 224px; padding: 40px 48px 40px 56px; }
  .env-ctas .cta-title { font-size: 28px; }
  .env-ctas .cta-ring { width: 56px; height: 56px; }
  .env-ctas .cta-ring .icon { width: 22px; height: 22px; }
  .env-ctas .env-entry { grid-column: 1 / -1; min-height: 260px; }
  .env-entry .cta-en { font-size: 64px; }
  .env-entry .cta-title { font-size: 20px; }
  .env-entry .cta-smile { width: 240px; left: 40px; top: 0; }
  .env-rinfo-grid { max-width: 600px; }   /* 参照 841: 見出しとカードは幅 560 で中央 */
}
/* 1080〜: 見出し＋カードを 2 カラム（幅 976 の中で 1 : 1.4）。CTA は 1200 幅、ENTRY 320 高・80px 英字 */
@media (min-width: 1080px) {
  .env-rinfo { padding-top: 180px; }
  .env-rinfo-grid { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 40px; align-items: start; }   /* 参照 pc1280: 左 355 ＋ 右 560 */
  .env-ctas { margin-top: 160px; }
  .env-ctas .cta { padding: 40px 80px; }
  .env-ctas .cta-title { font-size: 32px; }
  .env-ctas .cta-ring { width: 64px; height: 64px; }
  .env-ctas .cta-ring .icon { width: 24px; height: 24px; }
  .env-ctas .env-entry { min-height: 320px; }
  .env-entry .cta-en { font-size: 80px; }
  .env-entry .cta-title { font-size: 24px; }
  .env-entry .cta-smile { width: 300px; left: 110px; top: 20px; }   /* 参照: 帯の左 1/4 に高さいっぱいの白スマイル */
}
/* 841×701 のような低い画面で帯が画面を占有しないよう、展開した折りたたみ帯では上の余白を詰める */
@media (min-width: 768px) and (max-width: 1079px) and (max-height: 760px) {
  .env-rinfo { padding-top: 120px; }
  .env-ctas { margin-top: 72px; }
}

/* ========== 〜599: SP の細部を参照に合わせる（2026-09-24。capture/sp-compare/recruit__environment の 440/393/344 を画素で実測、
   値の裏は capture/recruit-preview/environment/dom.html の STUDIO 〜540 の CSS） ========== */
@media (max-width: 599px) {
  /* 本文の左右 32・見出しの型は work.css の同じ帯と同じ（英字 16px/0.2em・H2 24px/1.7・英字→H2 gap 15・H2→本文 40） */
  .page-environment .main { --gutter: 32px; --head-gap: 40px; }
  .page-environment .sec-label { font-size: 16px; letter-spacing: 0.2em; }
  .page-environment .sec-head.center .sec-label { text-indent: 0.2em; }
  .page-environment .sec-title:not(h1) { font-size: 24px; line-height: 1.7; letter-spacing: 0.04em; }
  .page-environment .sec-head { gap: 15px; }
  .page-environment .page-head { padding: 50px 0 0; }
  .page-environment .page-head .sec-title { font-size: 32px; line-height: 1.7; }
  .page-environment .env-charms { padding-top: 40px; }

  /* CHARMS カード: 職種ページの魅力カードと同じ型（番号 40px の右に点線・その下に見出し 22px/1.7・本文 15px/1.7 #574D45・写真 312 幅）。
     番号→見出し 25・見出し→本文 33・本文→写真 38（字の外形で）。スマイルは 58 幅で右端がカード右から 54、下端はカード下から 12 */
  .page-environment .charm { gap: 18px; padding: 32px; }
  .page-environment .charm-head { display: grid; justify-items: start; gap: 10px; }
  .page-environment .charm-num { padding-right: 18px; }
  .page-environment .charm-title { font-size: 22px; line-height: 1.7; text-wrap: wrap; }
  .page-environment .charm-text { font-size: 15px; line-height: 1.7; color: var(--c-ink-soft); }
  .page-environment .charm-photo-wrap { margin-top: 14px; }
  .page-environment .charm-photo-wrap .smile { width: 58px; right: 22px; bottom: -20px; }

  /* 標語: SP は「、」で改行した 2 行（参照の SP 用テキスト）32px/1.7、英文 16px/0.2em・2 行。カード→標語 135、帯→WELFARE 127 */
  .page-environment .env-banner { padding-top: 40px; padding-bottom: calc(var(--section-y) + 17px); }
  .env-slogan { padding-block: 15px 24px; width: calc(100% - 40px); }   /* 1 行目 297px が 344 の本文幅 280 に入らないので左右 20 まで使う（参照 344 は字が x24〜320） */
  .env-slogan-comma { display: none; }
  .env-slogan-title { font-size: 32px; letter-spacing: 0.05em; text-indent: 0.05em; }
  .env-slogan-en { margin-top: 14px; font-size: 16px; line-height: 1.7; letter-spacing: 0.2em; text-indent: 0.2em; }
  .env-slogan .smile { width: 250px; }
  /* 写真帯: 高さ 170（矩形 213×170）・間 16・楕円も同じ高さで上揃え */
  .pband { --pband-h: 170px; --pband-gap: 16px; }
  .pband-item.is-oval { margin-top: 0; }

  /* WELFARE: カードは 1 列（376 幅・padding 32 24・間 24）、アイコン丸 110 → 名前 20px/1.2（間 16）→ 補足 11px/1.7。
     小見出しは 24px・左に 4px のオレンジ罫（高さ 40）・文字は罫から 29。小見出し→カード 40、グループ間 80 */
  .env-welfare-grid { gap: 40px; }   /* 「福利厚生」の字の下端→小見出しの罫 50 */
  .welfare-groups { gap: 80px; }
  .welfare-group-title { margin-bottom: 40px; padding: 0 0 0 25px; font-size: 24px; line-height: 40px; letter-spacing: 0.04em; }
  .welfare-grid.igrid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .welfare-grid .igrid-card { gap: 0; min-height: 0; padding: 32px 24px; }
  .welfare-grid .igrid-ic.is-round { width: 110px; height: 110px; padding: 21px; margin-bottom: 16px; }
  .welfare-grid .igrid-label { font-size: 20px; line-height: 1.2; letter-spacing: 0.06em; }
  .welfare-grid .igrid-label small { margin-top: 4px; font-size: 11px; line-height: 1.7; }

  /* RECRUIT INFO: 職種ページと同じ帯（画面より広い楕円・px で決まるグラデ・白カード 120 高・写真 CTA 160・ENTRY 200）。前のカード→帯 126 */
  .env-rinfo { position: relative; margin-top: 45px; padding-top: 115px; background: none; border-radius: 0; isolation: isolate; overflow: clip; }
  .env-rinfo::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -18.2%; right: -18.2%;
    background: linear-gradient(180deg, var(--c-hero-yellow) 0, color-mix(in srgb, var(--c-hero-mid) 60%, var(--c-hero-yellow)) 90px, color-mix(in srgb, var(--c-hero-mid) 35%, var(--c-cream)) 200px, var(--c-cream) 390px);
    border-radius: 50% 50% 0 0 / 20.45vw; }
  .env-rinfo-grid { gap: 40px; }
  .env-rinfo-cards { gap: 8px; }
  .env-rinfo .link-card { min-height: 120px; padding: 0 30px; border: 2px solid var(--c-cream); }
  .env-rinfo .link-card .btn-ring { width: 24px; height: 24px; }
  .env-rinfo .link-card .btn-ring .icon { width: 14px; height: 14px; }
  .env-ctas { gap: 8px; margin-top: 82px; }
  .env-ctas .cta { padding: 24px 32px; }
  .env-ctas .cta-title { font-size: 20px; }
  .env-entry .cta-text { flex-direction: column; align-items: flex-start; gap: 4px; }
  .env-entry .cta-title { font-size: 18px; letter-spacing: 0.06em; line-height: 1.7; }
  .env-entry .cta-smile { width: 150px; left: 58px; top: 18px; }
}

/* ========== 〜599 の 2 周目（2026-09-24。capture/sp-compare/recruit__environment の 440/393/344 と recruit-preview/environment/dom.html の 〜540）。
   393・344 で原本より 120〜156 高かった主因は、魅力カードの見出しが原稿の改行（PC 用）で 3 行になっていたこと（原本の SP 用テキストは改行なし） ========== */
@media (max-width: 599px) {
  .page-environment .sec-title:not(h1) { letter-spacing: 0.04em; }
  /* CHARMS の H2: 原本の SP は「ウララ歯科クリニックで／働く魅力」の 2 行（440 でも 2 行。旧は 440 で 1 行）。
     11 字（274.6）は入り 12 字（299.5）は入らない幅 285 で貪欲に折る（344 の本文幅 280 でも 11 字は入る） */
  .page-environment .env-charms .sec-title { max-width: 285px; text-wrap: wrap; }
  /* 魅力カードの見出しは原稿の改行を使わず流す（原本 SP:「患者さまの人生に、ちゃ／んと向き合える歯科医療」） */
  .page-environment .charm-title br { display: none; }

  /* 標語の英文: 原本の SP は「Each person's expertise／strengthens the team」の 2 行（旧は 440 で 1 行目に strengthens まで入った） */
  .page-environment .env-slogan-en { max-width: 300px; margin-inline: auto; }
  /* 写真帯→WELFARE の英字 +20（原本 134） */
  .page-environment .env-banner { padding-bottom: calc(var(--section-y) + 37px); }

  /* WELFARE: 英字は左 4 ずらす（原本 margin-left 4）。アイコンは 110 の丸いっぱいに描く（原本は画像そのものが 110。旧は padding 21 で 68 に縮んでいた） */
  .page-environment .env-welfare .sec-label { margin-left: 4px; }
  .welfare-grid .igrid-ic.is-round { padding: 0; }
  .welfare-grid .igrid-ic.is-round img { width: 100%; height: 100%; }

  /* RECRUIT INFO: 英字は左 6 ずらす（原本 margin-left 6）。ENTRY の下端→フッターの上端 81（旧 111） */
  .page-environment .env-rinfo .sec-label { margin-left: 6px; }
  .page-environment .env-rinfo { padding-bottom: 50px; }
}

/* ========== 〜599 の 3 周目（2026-09-26。原本プレビューを 344/390/440 で開き、文字の塊・写真の位置と computed style を突き合わせた差） ========== */
@media (max-width: 599px) {
  /* 見出し: 英字は Roboto なので原本どおり 0.25em（Inter の頃の 0.2em を戻す）、H2・小見出しは 0.06em（原本 24px/1.44px） */
  .page-environment .sec-label { letter-spacing: 0.25em; }
  .page-environment .sec-head.center .sec-label { text-indent: 0.25em; }
  .page-environment .sec-title:not(h1) { letter-spacing: 0.06em; }
  .page-environment .welfare-group-title { line-height: 1.7; letter-spacing: 0.06em; }
  /* CHARMS の番号は Roboto 400（旧は親の 500） */
  .page-environment .charm-num { font-weight: 400; }

  /* 標語: 05 のカード → 標語の字枠 152（旧 167）。題は 32px・字間 0.06em（344 で 1 行目 9 字 307 が入るよう左右 16 まで使う）、
     英文は Roboto 400・字間 0.25em で 題の字枠 → 英文の字枠 125。背景のスマイル（247×224）は題の字枠の 21 上から */
  .page-environment .env-banner { padding-top: 22px; }
  .page-environment .env-slogan { width: calc(100% - 32px); }
  .page-environment .env-slogan-title { letter-spacing: 0.06em; text-indent: 0.06em; }
  .page-environment .env-slogan-en { margin-top: 17px; font-weight: 400; letter-spacing: 0.25em; text-indent: 0.25em; }
  .page-environment .env-slogan .smile { transform: translate(-50%, calc(-54% + 8px)); }
  /* 写真帯: 原本は画面に 2 枚ちょうど（幅 (W−16)/2・高さ 0.8 倍・間 16）。344→164×131 / 390→187×150 / 440→212×170（旧は 213×170 固定）。
     帯の下端 → WELFARE の英字の字枠 120（旧 125） */
  .page-environment .pband { --pband-h: calc(40vw - 6.4px); }
  .page-environment .env-banner { padding-bottom: calc(var(--section-y) + 32px); }

  /* 福利厚生のカード: 補足の無いカードは名前の下 36（原本。補足つきは 32 のまま） */
  .page-environment .welfare-grid .igrid-card:not(:has(small)) { padding-bottom: 36px; }
  /* RECRUIT INFO の帯の色: 原本は頂から 0.3W でいちばん濃いピーチ、0.52W で半分、0.9W でクリーム（344/393/440 の画素。旧は 90px で頂点・早く薄れていた） */
  .page-environment .env-rinfo::before { background: linear-gradient(180deg, var(--c-hero-yellow) 0, color-mix(in srgb, var(--c-hero-mid) 80%, var(--c-hero-yellow)) 30vw, color-mix(in srgb, var(--c-hero-mid) 50%, var(--c-cream)) 52vw, var(--c-cream) 90vw); }

  /* 写真 CTA・ENTRY: 題の字間 0.06em、ENTRY は Roboto 400・字間 0.06em（原本の computed） */
  .page-environment .env-ctas .cta-title { letter-spacing: 0.06em; }
  /* ENTRY の白スマイル: 160 幅を帯の左 40・上 19（原本 390 の画素。data と同じ値。旧 150 幅・左 58 で小さく右に寄っていた） */
  .page-environment .env-entry .smile.cta-smile { width: 160px; left: 40px; top: 19px; }
  .page-environment .env-entry .cta-en { font-weight: 400; letter-spacing: 0.06em; font-size: 47px; line-height: 1; white-space: nowrap; }   /* 48px だと 344 で「ENTR / Y」に折れる（data と同じ 47px） */
}

/* 写真帯の形（〜1079）: 原本・Figma とも 角の丸い四角は 角丸 = 高さ × 40/288、楕円は 角丸 = 高さの半分（上下が平らな丸）。
   旧は 角丸 16 の四角と 50% の楕円で、原本より角が立ち・楕円が細かった */
/* 段違い（2026-09-28 ユーザー指示「画像凸凹じゃなかったここ？」。採用トップの写真帯と同じ）: 1080〜（角丸の四角が 40 下がる）に合わせ、
   〜1079 も角丸の四角を高さの 12% 下げ、楕円は上のまま（390 で 18・841 で 22）。旧は 〜599 が上揃え、600〜1079 が楕円の方を下げる逆向きだった */
@media (max-width: 1079px) {
  .page-environment .pband-item img { border-radius: calc(var(--pband-h) * 0.139); }
  .page-environment .pband-item.is-oval img { border-radius: calc(var(--pband-h) / 2); }
  .page-environment .pband-item { margin-top: calc(var(--pband-h) * 0.12); }
  .page-environment .pband-item.is-oval { margin-top: 0; }
}

/* ======================================================================
   1080〜 を Figma「働く環境」103:3048（1440 幅）に合わせる（2026-09-25）
   ヒーロー 111:3560（1440×400）: ラベル字枠 y189 → 8 → H1 40px/1.7（y224）。400 で CHARMS。
   CHARMS 224:4284: 見出し（ラベル → 16 → 題 32px）→ 40 → 白カード 1280×468（間 24・角丸 16・内 64・文字 572｜48｜写真 532×340 を上下中央）。
     番号 Roboto 64px・字間 8%・#F7E7DB・右に 1px 点線（右内 24）→ 24 → 題 24px/1.7。題 → 24 → 本文 16px/2.2 #574D45。
     スマイル 129×117（写真幅の 24.2%）: 写真の右端から 80 内・下端から 45 下（左右反転のカードは左から 95）。
   標語 103:3705: カードの下 200 → 題 40px/1.7（字間 6%）→ 16 → 英文 Roboto 16px・字間 25%。スマイル 273×247 は題の上端から −90。
     → 80 → 写真 360×288（間 40）: 角の丸い四角（角丸 40）は 40 下げ、角丸 144 の楕円は上揃え → 240 → WELFARE。
   WELFARE 103:3711: 左 320（ラベル → 16 → 題）｜80｜右 880。小見出し 20px/1.7（左罫 4・左 24・下 4）→ 24 → カード 277×277 ×3（間 24・内 40・上揃え）:
     丸 136（#F9F6F4）→ 8 → 名前 24px/1.7 → 補足 12px/1.5 #574D45。グループの間 56、節の下 200。
   RECRUIT INFO（Frame 167 → 72:1016）: data.css と同じ値。
   ====================================================================== */
@media (min-width: 1080px) {
  body.page-environment { background-size: 100% 400px; }
  .page-environment .page-head { min-height: 292px; padding: 81px 0 0; }   /* ヘッダー 108 ＋ 81 ＝ ラベル y189、下端 400 */
  .page-environment .page-head .sec-head { gap: 8px; }

  /* CHARMS */
  .page-environment .env-charms { --container: 1280px; padding: 0 0 200px; }
  .page-environment .env-charms .sec-head { gap: 16px; margin-bottom: 40px; }
  .page-environment .charm { grid-template-columns: minmax(0, 572fr) minmax(0, 532fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 48px; row-gap: 0; min-height: 468px; padding: 64px; align-items: center; }
  .page-environment .charm-head { grid-row: 2; align-items: center; gap: 24px; }
  .page-environment .charm-text { grid-row: 3; margin-top: 24px; color: var(--c-ink-soft); font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; }
  .page-environment .charm-photo-wrap { grid-row: 1 / -1; }
  .page-environment .charm.is-reverse { grid-template-columns: minmax(0, 532fr) minmax(0, 572fr); }
  .page-environment .charm.is-reverse .charm-photo-wrap { grid-row: 1 / -1; }
  .page-environment .charm-num { height: 64px; padding-right: 24px; font-size: 64px; line-height: 1; letter-spacing: 0.08em; }
  /* 題は 24px（Figma）。1080〜1279（開いた折りたたみの横 1104 など）は文字の列が 435〜 と狭く、01 の題「ちゃんと向き合える歯科医療」（24px で 331）＋番号が入らず、
     題だけ番号の下へ落ちて番号の横が空いていた（2026-09-28 の 1080 撮影）。番号の横から落とさない（nowrap・題は列の中で折る）＋字は 1280 で 24px になるまで縮める */
  .page-environment .charm-head { flex-wrap: nowrap; }
  .page-environment .charm-title { flex: 0 1 auto; min-width: 0; font-size: clamp(20px, 1.875vw, 24px); line-height: 1.7; letter-spacing: 0.06em; }
  .page-environment .charm-photo-wrap .smile { width: 24.2%; right: 15%; bottom: -13.2%; }
  .page-environment .charm.is-reverse .charm-photo-wrap .smile { right: auto; left: 17.9%; bottom: -13.2%; }

  /* 標語＋写真帯 */
  .page-environment .env-banner.section { padding: 0 0 240px; }
  .page-environment .env-slogan { position: relative; padding-block: 0; }
  .page-environment .env-slogan .smile { top: -90px; left: 50%; width: 273px; transform: translateX(-50%); }
  .page-environment .env-slogan-title { position: relative; font-size: 40px; line-height: 1.7; letter-spacing: 0.06em; text-indent: 0.06em; }
  .page-environment .env-slogan-en { position: relative; margin-top: 16px; font-size: 16px; line-height: 1.7; letter-spacing: 0.25em; text-indent: 0.25em; }
  .page-environment .pband { --pband-h: 288px; --pband-gap: 40px; margin-top: 80px; padding-block: 0; }   /* 幅は高さ × 1.25 ＝ 360 */
  .page-environment .pband-item { margin-top: 40px; }
  .page-environment .pband-item img { border-radius: 40px; }
  .page-environment .pband-item.is-oval { margin-top: 0; }
  .page-environment .pband-item.is-oval img { border-radius: 144px; }

  /* WELFARE */
  .page-environment .env-welfare { --container: 1280px; padding: 0 0 200px; }
  .page-environment .env-welfare-grid { grid-template-columns: minmax(0, 320fr) minmax(0, 880fr); column-gap: 80px; }   /* 1440 で 320｜880。狭い PC 幅は同じ比で縮む */
  .page-environment .env-welfare .sec-head { gap: 16px; }
  .page-environment .welfare-groups { gap: 56px; }
  .page-environment .welfare-group-title { margin-bottom: 24px; padding: 0 0 4px 24px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; }
  .page-environment .welfare-grid { gap: 24px; }
  .page-environment .welfare-grid .igrid-card { justify-content: flex-start; gap: 8px; min-height: 277px; padding: 40px 16px 0; }   /* 277 固定で中身は上揃え・下の内余白なし（2 行の名前は Figma でも下 11 まで食い込む）。名前は 24px で 9 字（奨学金返済助成制度）が 229 あるので左右の内余白は 16（Figma も文字が内余白 40 をはみ出している） */
  .page-environment .welfare-grid .igrid-ic.is-round { width: 136px; height: 136px; padding: 4px; }   /* 原本 pc1440: 絵は丸 136 のほぼいっぱい（絵の実寸 高さ約 100）。768〜 の内余白 24 のままだと絵が 2/3 に縮む */
  .page-environment .welfare-grid .igrid-label { font-size: clamp(18px, 1.667vw, 24px); line-height: 1.7; letter-spacing: 0.06em; }
  .page-environment .welfare-grid .igrid-label small { margin-top: 0; font-size: 12px; line-height: 1.5; letter-spacing: 0.06em; }

  /* RECRUIT INFO（上辺は 2128×752 の楕円・頂 y16。見出し列 320｜80｜カード 560・間 8 → 160 → 写真帯 → ENTRY → 200 → フッター） */
  .page-environment .env-rinfo { --container: 1280px; position: relative; isolation: isolate; overflow: clip; margin-top: 0; padding: 200px 0 137px; background: none; border-radius: 0; }
  .page-environment .env-rinfo::before { content: ""; position: absolute; z-index: -1; top: 1.11vw; bottom: 0; left: calc(50% - 73.9vw); width: 147.8vw; border-radius: 50% 50% 0 0 / 26.1vw 26.1vw 0 0; background: linear-gradient(180deg, var(--c-hero-yellow) 0%, var(--c-hero-mid) 42%, var(--c-cream) 80%); }
  .page-environment .env-rinfo-grid { width: min(100% - var(--gutter) * 2, 960px); max-width: none; grid-template-columns: minmax(0, 320px) minmax(0, 560px); justify-content: center; column-gap: 80px; }
  .page-environment .env-rinfo .sec-head { gap: 16px; }
  .page-environment .env-rinfo-cards { gap: 8px; }
  .page-environment .env-ctas { margin-top: 160px; }
}
@media (min-width: 1080px) {
  .page-environment .env-entry .cta-smile { left: 120px; top: 36px; width: 273px; opacity: 0.1; }   /* ENTRY の白スマイル 273×247（Figma 139:4958: 帯の左 120・上 36・#F1EAE5 不透明度 10%） */
}

/* ======================================================================
   演出（docs/MOTION.md・2026-09-26）。効果は environment.mjs の data-mo 属性、ここは CHARMS の見せ場の上書きだけ。
   すべて html.mo の下（JS なし・prefers-reduced-motion・検査の Playwright では最初から静止した完成形）
   ====================================================================== */
/* CHARMS のカードの白地: li は data-mo を持たない（〜1079 で写真がカードの下の方にあり、カードごと出すと写真の演出が画面外で終わるため）。
   中身（見出し・本文・写真）のどれかが .is-in になった瞬間に up。中身は画面に入れば必ず出るので透明のまま残らない */
html.mo .charm:not(:has(.is-in)) { opacity: 0; }
html.mo .charm:has(.is-in) { animation: mo-up var(--mo-dur) var(--mo-ease) backwards; }

/* 写真（見せ場）: 歯の形の写真を枠ごと横から開く。文字の側から外へ（奇数番 01・03・05 は左→右、偶数番は右→左。1080〜 の左右の並びと同じ向き）。
   clip-path は枠の外へ 30% 広げてある（右下のスマイルが枠の外へ出る分。止まったら clip-path は外れる）。横幅は増えない（clip-path はレイアウトに影響しない）。
   中の写真は 1.12 → 1（2026-09-28 から枠は切り抜かないので、歯の形ごと縮む。開く間は外側の clip-path が効いている） */
@keyframes env-open-lr { from { clip-path: inset(-30% 100% -30% -30%); } to { clip-path: inset(-30% -30% -30% -30%); } }
@keyframes env-open-rl { from { clip-path: inset(-30% -30% -30% 100%); } to { clip-path: inset(-30% -30% -30% -30%); } }
html.mo .charm-photo-wrap[data-mo].is-in { animation-name: env-open-lr; animation-duration: calc(var(--mo-dur) * 1.5); animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
html.mo .charm.is-reverse .charm-photo-wrap[data-mo].is-in { animation-name: env-open-rl; }
html.mo .charm-photo-wrap[data-mo].is-in .charm-photo img { animation: mo-unveil-img calc(var(--mo-dur) * 2.4) var(--mo-ease) var(--mo-d, 0ms) backwards; }

/* 写真の形（全幅・2026-09-28 確定）: 写真のファイル（現行 STUDIO の画像 1065×680）には、Figma 224:4296 のマスクと同じ歯の形
   （上の角丸・下の左右の丸み・下辺中央のへこみ）が透明で焼き込まれている。歯科衛生士ページ（job.css の .jb-charm-img）と同じく、切らずにそのまま見せる。
   経緯: 焼き込みの形の上に SVG の波（旧 #env-blob）を重ねて二重になり、iPhone で「画像の形がおかしい」と言われた。
   その後の「波を箱の外へ出す（下 10% を切る）」「1.1 倍にして四隅の透明を外へ出す」の 2 つの手当ても誤りだったので、どちらも外した（SVG の #env-blob も削除） */
.page-environment .charm-photo, .page-environment .charm.is-reverse .charm-photo { clip-path: none; aspect-ratio: auto; border-radius: 0; overflow: visible; }
.page-environment .charm-photo img { height: auto; aspect-ratio: auto; object-fit: fill; }