/* ===== A. 共通base ===== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:#FBF4E4;color:#2E2A24;font-family:'IBM Plex Sans JP',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.95;overflow-x:clip;}
img{display:block;max-width:100%;}
a{color:inherit;}
.hd{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;letter-spacing:-.02em;}
.num{font-family:'Dela Gothic One',sans-serif;font-weight:400;}
.line-chunk{display:inline-block;overflow-wrap:anywhere;word-break:normal;}
/* 左端の配線レーンを全デバイスで確保（文字が被らないように） */
main>section:not(#top){padding-left:34px!important;padding-right:34px!important;}
/* FVヒーロー背景をクリームに固定（PC/モバイルで統一・キャッシュ対策で!important） */
#top{background:#FBF4E4!important;}
#top .fv-stage,#top .fv-copy,#top .fv-cap{background:transparent!important;}
/* 集合写真プレースホルダーは背景よりわずかに濃いニュートラルで“ブロック”として見せる */
#fv-staff{background:#ECE7DC!important;}
.nav-desktop{display:none;}
.nav-burger{display:inline-flex;}
/* 背景・横ラインは全幅。内側コンテンツだけ左右に余白を取り配線を避ける（Reactは style を "margin: 0px auto" として出力） */
main > section:not(#top) > div[style*="margin: 0px auto"],
main > section:not(#top) > footer > div[style*="margin: 0px auto"]{padding-left:clamp(26px,5vw,56px)!important;padding-right:clamp(26px,5vw,56px)!important;}
/* PROLOGUE（S2）の左右余白を少しだけ狭く */
main > section#story > div[style*="margin: 0px auto"]{padding-left:clamp(22px,3.6vw,40px)!important;padding-right:clamp(22px,3.6vw,40px)!important;}
/* モバイル：ヒーロー以下のセクションの「二重の左右余白」を解消（セクション外側の20pxを削除し、内側コンテンツの余白だけ残す） */
@media(max-width:560px){main > section:not(#top){padding-left:0!important;padding-right:0!important;}.cable{left:10px!important;}.epi-h{font-size:6vw!important;line-height:1.4!important;}.pro-br{display:none!important;}.s9-more{text-align:center!important;}.salary-grid > div{min-height:0!important;}.epi-btns{display:grid!important;grid-auto-flow:row!important;width:100%!important;}.fv-btns{flex-direction:column!important;max-width:100%!important;}.light-svg{width:clamp(140px,36vw,190px)!important;top:40px!important;right:18px!important;}}
/* EPILOGUE（S15）：PCで見出しが1行に収まるよう余白を狭く */
main > section#epilogue > div[style*="margin: 0px auto"]{padding-left:26px!important;padding-right:26px!important;}
.epi-br-tab{display:none;}
@media(max-width:834px){.epi-br-tab{display:inline;}}
@media(min-width:920px){.nav-desktop{display:flex;}.nav-burger{display:none;}}
/* タブレットで帯テキストが文字落ちしないようフォント縮小 */
@media(max-width:1180px){.skill-msg{font-size:clamp(20px,3.2vw,32px)!important;}.life-msg{font-size:clamp(22px,3.6vw,36px)!important;}.salary-hero{font-size:clamp(48px,9vw,104px)!important;}}
/* 年収モデルの数字：タブレットでカード幅を超えないよう上限を下げる */
@media(max-width:1024px){.sal-num{font-size:clamp(32px,5.2vw,54px)!important;}}
/* WORK & LIFE BOARD：タブレット縦（481〜900px）で横2×縦2・各コンテンツを同サイズに */
@media(min-width:481px) and (max-width:900px){.wl-board{grid-template-columns:1fr 1fr!important;grid-auto-rows:1fr!important;}}
/* 年収モデル：タブレット縦でこ3つ横並びを維持 */
@media(min-width:560px) and (max-width:900px){.salary-grid{grid-template-columns:1fr 1fr 1fr!important;gap:10px!important;}}
/* S13先輩B：2カラム（幅広）のときだけ画像を右に。縦並び時は DOM 順（画像が上） */
@media(min-width:780px){.vb-img{order:2;}.vb-txt{order:1;}.s4b-img{order:2;}.s4b-txt{order:1;}}
/* S5：タブレット（〜1024px）では縦並びにし、sticky も解除（画像がテキストに重なるのを防ぐ） */
@media(max-width:1024px){.s5-stickycol{position:static!important;top:auto!important;}.s5-row{flex-direction:column!important;}.s5-stickycol,.s5-row > div{flex:1 1 auto!important;width:100%!important;}}
@media(max-width:900px){
  .faq-head{position:static!important;top:auto!important;}
  .fv-stage{min-height:0!important;display:flex!important;flex-direction:column!important;gap:24px;padding-left:48px!important;padding-right:48px!important;}
  .fv-photo{position:relative!important;transform:none!important;width:min(100%,460px)!important;margin:0!important;order:-1;right:auto!important;top:auto!important;}
  .fv-photo image-slot{height:clamp(300px,60vw,440px)!important;}
  .fv-copy{position:static!important;width:100%!important;left:auto!important;top:auto!important;}
  .fv-cap{position:static!important;left:auto!important;top:auto!important;max-width:none!important;}
  .fv-h1{font-size:clamp(34px,6.4vw,54px)!important;line-height:1.12!important;}
  .fv-h1 .fv-br1{display:none!important;}
  .fv-h1 .fv-anata{margin-bottom:0!important;}
  .fv-h1 .fv-line2{white-space:nowrap;}
}
/* タブレット横（901〜1180px）はPC同様の重ねレイアウトを維持し、重ならないようサイズ調整 */
@media(min-width:901px) and (max-width:1180px){
  .fv-stage{min-height:clamp(600px,66vw,760px)!important;}
  .fv-copy{left:clamp(40px,5vw,60px)!important;width:min(50%,500px)!important;}
  .fv-h1{font-size:clamp(44px,5.2vw,58px)!important;line-height:1.1!important;}
  .fv-copy .hd[style*="#1F8A78"]{font-size:clamp(15px,2vw,20px)!important;}
  .fv-photo{width:clamp(290px,38%,420px)!important;right:clamp(16px,3vw,40px)!important;top:42%!important;}
  .fv-photo image-slot{height:clamp(300px,40vw,420px)!important;}
  .fv-cap{top:auto!important;bottom:22px!important;max-width:min(46%,400px)!important;}
}
@media(max-width:560px){
  .fv-stage{gap:14px!important;padding:14px 30px 20px!important;}
  .fv-h1{font-size:clamp(20px,7vw,40px)!important;line-height:1.14!important;margin-top:10px!important;}
  .fv-h1 span[style*="margin-bottom"]{margin-bottom:0.05em!important;}
  .fv-copy .hd[style*="#1F8A78"]{margin-top:10px!important;font-size:15px!important;}
  .fv-copy>div:last-child{margin-top:14px!important;gap:10px!important;}
  .fv-copy .hd[href]{padding:12px 20px!important;font-size:14px!important;}
  .fv-cap{font-size:12.5px!important;line-height:1.65!important;margin-top:2px!important;}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes glow{0%,100%{opacity:.35}50%{opacity:.8}}
/* 「“すごい技術”」：電球のように点滅（光彩なし） */
@keyframes blink{0%,18%,100%{opacity:1;}9%{opacity:.3;}40%{opacity:.5;}46%{opacity:1;}}
.blink{animation:blink 2.6s ease-in-out infinite;}
/* ネオンライト風の飾り枠（S3の3ツ） */
@keyframes neonFlicker{0%,17%,19%,21%,82%,100%{opacity:1;}18%,20%{opacity:.72;}}
.neon{position:relative;background:rgba(18,16,13,.55);border:4px solid var(--neon);border-radius:14px;padding:18px 24px;color:#fff;font-weight:800;}
/* マーカー（アンダーライン）：画面に入ったら左→右に引く。既定は完全表示（JS/アニメ未動作でもマーカーは見える） */
@keyframes mkWipe{from{background-position:100% 100%;}to{background-position:0% 100%;}}
.mk{background-repeat:no-repeat;background-size:200% 40%;background-position:0% 100%;}
.mk.mk-armed{background-position:100% 100%;}
.mk.mk-go{animation:mkWipe .85s cubic-bezier(.22,.61,.36,1) forwards;}
.light-svg path{fill:none;stroke:#5A4E3B;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2790;stroke-dashoffset:2790;}
.light-svg.go path{animation:lightDraw 5s ease forwards;}
.light-svg .rays{opacity:0;}
/* 月給の「25」「40」：ネオン管風の中空文字（光彩なし） */
.neon-num{color:#2E2A24;-webkit-text-stroke:2.5px #FBD27A;text-stroke:2.5px #FBD27A;}
@keyframes lightDraw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion: reduce){.light-svg path{stroke-dashoffset:0!important;animation:none!important;}}
/* 文字を１つずつ表示（画面に入ったら）。既定は表示、JSが arm したら隅して順に出す */
.chreveal .ch{display:inline-block;}
.chreveal.ch-armed .ch{opacity:0;transform:translateY(.18em);}
.chreveal.ch-armed.ch-go .ch{animation:chIn .38s ease forwards;}
@keyframes chIn{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;}.mk{background-position:0% 100%!important;}.chreveal.ch-armed .ch{opacity:1!important;transform:none!important;}}
details>summary{list-style:none;cursor:pointer;}
details>summary::-webkit-details-marker{display:none;}
.faq-mk{transition:transform .22s ease;}
details[open] .faq-mk{transform:rotate(45deg);}
image-slot{display:block;background:#FCEFC9;border:2.5px dashed #E2A93A;}
.htrack{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#F4A621 #EadfC6;}
.htrack::-webkit-scrollbar{height:12px;}
.htrack::-webkit-scrollbar-track{background:#EADFC6;border:2px solid #2E2A24;border-radius:999px;}
.htrack::-webkit-scrollbar-thumb{background:#F4A621;border:2px solid #2E2A24;border-radius:999px;}
.htrack::-webkit-scrollbar-thumb:hover{background:#EE6C4D;}
.htrack>*{scroll-snap-align:start;}

/* === add.css 貼り付け ここから === */
/* 募集要項／応募フォーム（parts219系・フラット） — 株式会社長谷川電気 採用LP
   theme_default.css の後に読み込む前提（後勝ち）。色・フォントはこのブロック内で完結。 */

/* ---- フォント変数 ---- */
:root{
  --hd-font: 'Zen Kaku Gothic New', sans-serif;
  --body-font: 'IBM Plex Sans JP', sans-serif;
  --ink: #2E2A24;
  --line: #C9BCA0;
  --accent: #F4A621;
  --accent-hover: #FBD27A;
  --required: #EE6C4D;
  --attention: #C0432A;
}

/* ---- 応募フォーム本体（装飾枠を足さずフラットに） ---- */
.contact_section{ background: transparent !important; }
.parts219_section_form,
.parts219_form_wrap{
  max-width: 720px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---- 各行：ラベル上・入力欄下に縦並び ---- */
.parts219_form_wrap dl{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
  border: 0 !important;
}
.parts219_form_wrap dt{
  font-family: var(--hd-font) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--ink) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  padding: 0 !important;
}
.parts219_form_wrap dd{ margin: 0 !important; padding: 0 !important; }

/* ---- 入力欄 ---- */
.parts219_form_wrap input[type="text"],
.parts219_form_wrap input[type="email"],
.parts219_form_wrap input[type="tel"],
.parts219_form_wrap textarea{
  width: 100% !important;
  font-family: var(--body-font) !important;
  font-size: 16px !important;       /* iOS の自動ズーム防止のため 16px 以上 */
  color: var(--ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 6px !important;
  padding: 13px 14px !important;
  line-height: 1.6 !important;
}
.parts219_form_wrap textarea{ min-height: 140px !important; resize: vertical !important; }
.parts219_form_wrap input:focus,
.parts219_form_wrap textarea:focus{
  outline: 3px solid var(--accent-hover) !important;
  outline-offset: 1px !important;
  border-color: var(--ink) !important;
}

/* ---- 必須バッジ ---- */
.parts219_form_wrap .required{
  font-family: var(--hd-font) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  color: var(--ink) !important;
  background: var(--accent-hover) !important;
  border: 1.5px solid var(--ink) !important;
  border-radius: 5px !important;
  padding: 2px 8px !important;
  line-height: 1.6 !important;
}

/* ---- 住所行（〒＋郵便番号＋住所） ---- */
.parts219_form_wrap .form_address dd{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.parts219_form_wrap .form_address .zip{ max-width: 160px !important; }

/* ---- 注記（attention）／エラー（error） ---- */
.parts219_form_wrap .attention{
  display: block !important;
  font-family: var(--body-font) !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
  color: var(--attention) !important;
  margin-top: 4px !important;
}
.parts219_form_wrap .error{
  color: var(--attention) !important;
  font-size: 13px !important;
  margin: 6px 0 0 !important;
}

/* ---- 送信ボタン（控えめ・テーマトーン） ---- */
.parts219_form_wrap .contact_submit{ margin-top: 8px !important; text-align: center !important; }
.parts219_form_wrap .contact_submit input{
  font-family: var(--hd-font) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: var(--ink) !important;
  background: var(--accent) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  padding: 16px 44px !important;
  cursor: pointer !important;
}
.parts219_form_wrap .contact_submit input:hover{ background: var(--accent-hover) !important; }

/* === add.css 貼り付け ここまで === */

/* ===== ナビゲーション・ドロワー（モバイル）：site.js でトグル ===== */
.nav-drawer{display:none;}
.nav-drawer.is-open{display:block;}
@media(min-width:920px){.nav-drawer{display:none!important;}}

/* ===== 応募フォーム base（form-inquiry 由来・.entry-br 等） ===== */
.contact_section{margin:0;}
.entry-br{display:none;}
@media(max-width:560px){.entry-br{display:inline;}}

/* ===== CueZilla 自動パンくず非表示（各ページに独自パンくずを内包・R-10a） ===== */
.parts231_breadcrumb{display:none!important;}

/* ===== S9「私たちの仕事」(施工事例 parts131415_blog プレビュー) =====
   CueZilla が読み込む bootstrap.min.css の .row-cols-{sm-2,lg-3} > * {width:50%/33.33%} が
   グリッドのセル内でカードを縮め「ぎゅっと」潰す。受領デザインの auto-fit グリッドを維持するため、
   .row をグリッドに固定し、.col の Bootstrap 幅/余白を打ち消してセル全幅に戻す。 */
.parts131415_blog .row{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;gap:24px!important;margin-left:0!important;margin-right:0!important;}
.parts131415_blog .row > .col{flex:0 1 auto!important;width:auto!important;max-width:none!important;margin-top:0!important;padding-left:0!important;padding-right:0!important;}

/* ===== オープニング・スプラッシュ（受領 standalone の開幕＝暗幕＋ロゴ演出を再現） =====
   フリーHTML内scriptは実行されないため純CSSで実装：約1.7s表示→0.6sフェードして自動的に消え、
   消えた後は visibility:hidden + pointer-events:none で操作を妨げない（JS不要＝貼り忘れでも固まらない）。
   ※ #hd-splash は backdrop-filter を持つ <header> の「外（兄弟）」に置くこと（祖先にfilter等があると
     position:fixed の包含ブロックがズレて全画面を覆えないため。02_header.html では <header> の前に配置済み）。 */
#hd-splash{position:fixed;inset:0;z-index:99999;background:#2E2A24;display:flex;align-items:center;justify-content:center;animation:hdSplashOut .6s ease 1.7s forwards;}
#hd-splash .hd-splash-inner{display:flex;flex-direction:column;align-items:center;gap:16px;animation:hdSplashIn .7s cubic-bezier(.22,.61,.36,1) both;}
#hd-splash .hd-splash-mark{filter:drop-shadow(0 0 14px rgba(251,210,122,.35));}
#hd-splash .hd-splash-name{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;color:#FBF4E4;font-size:clamp(22px,5vw,40px);letter-spacing:.05em;}
#hd-splash .hd-splash-sub{font-family:'Dela Gothic One',sans-serif;color:#FBD27A;font-size:clamp(11px,2vw,13px);letter-spacing:.34em;}
@keyframes hdSplashIn{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes hdSplashOut{to{opacity:0;visibility:hidden;pointer-events:none;}}
@media(prefers-reduced-motion:reduce){#hd-splash{animation-delay:.6s;animation-duration:.3s;}#hd-splash .hd-splash-inner{animation:none;}}

/* ===== プライバシーポリシー本文を黒基調に（.pp-body 内のみ・装飾番号/リンク/暗色ヘッダーは維持） ===== */
.pp-body p,.pp-body li,.pp-body dd{color:#1a1a1a!important;}
.pp-body h2{color:#111111!important;}
.pp-body dt{color:#333333!important;}

/* ===== フォームの確認/完了画面では上部の募集要項（ページヘッダー＋テーブル）を非表示 =====
   site.js が <html> に is-form-step を付与（/form/confirm・/form/complete／タイトル「…確認/完了」で判定）。 */
html.is-form-step [data-screen-label="募集要項 ページヘッダー"],
html.is-form-step [data-screen-label="募集要項テーブル"]{display:none!important;}

/* ===== 応募フォーム（CueZilla 30_form系）追補：体裁統一・崩れ対策 ===== */
/* 履歴書・職務経歴書のファイル添付欄を他の入力欄と同じブランド体裁に（既定の灰色枠を解消） */
.parts219_form_wrap input[type=file]{display:flex!important;align-items:center!important;width:100%!important;height:56px!important;box-sizing:border-box!important;font-family:'IBM Plex Sans JP',sans-serif!important;font-size:14px!important;color:#1a1a1a!important;background:#fff!important;border:1.5px solid #C9BCA0!important;border-radius:6px!important;padding:9px 12px!important;line-height:normal!important;}
/* 単一行入力（テキスト/メール/電話）の高さをファイル欄と統一（フォーム枠の高さ揃え） */
.parts219_form_wrap input[type="text"],.parts219_form_wrap input[type="email"],.parts219_form_wrap input[type="tel"]{height:56px!important;box-sizing:border-box!important;}
.parts219_form_wrap input[type=file]::file-selector-button{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:13px;color:#2E2A24;background:#FBD27A;border:1.5px solid #2E2A24;border-radius:6px;padding:8px 14px;margin-right:12px;cursor:pointer;}
.parts219_form_wrap input[type=file]::file-selector-button:hover{background:#F4A621;}
/* 確認画面：戻る/送信の2ボタンを中央寄せ・戻るは白系セカンダリ・送信無効時は淡色 */
.parts219_form_wrap .contact_submit.d-flex{display:flex!important;justify-content:center!important;gap:14px;flex-wrap:wrap;}
/* 戻る／送信を同じ横幅に（flex:1 1 0 で等分・上限200px） */
.parts219_form_wrap .contact_submit.d-flex input{flex:1 1 0!important;max-width:200px!important;}
.parts219_form_wrap .contact_submit input[name="back"]{background:#fff!important;color:#2E2A24!important;border:2px solid #2E2A24!important;}
.parts219_form_wrap .contact_submit input:disabled{opacity:.45;cursor:not-allowed;}
/* reCAPTCHA を中央に */
.parts219_form_wrap .g-recaptcha{display:flex;justify-content:center;margin:10px 0;}

/* ===== ヘッダー追従(sticky)が途中で剥がれる不具合の修正 =====
   CueZilla テーマの html,body{height:100%} と body の overflow-x:hidden が重なると
   body がビューポート高(100vh)のスクロールコンテナ化し、約1画面分で sticky ヘッダーが剥がれる。
   body 高さの固定を解除（height:auto）し、横はみ出しは overflow-x:clip（スクロールコンテナを作らない）で抑止する。 */
html, body { height: auto !important; }
body { overflow-x: clip !important; }

/* ===== 応募フォーム 追補2：必須バッジの天地中央・フォーム下の余白 ===== */
/* 必須バッジ：theme の height:30px / display:block で文字が上寄りになるのを是正（受領と同じく内容高さ＋中央） */
.parts219_form_wrap .required{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:auto!important;}
/* フォームとフッターの間に適切な余白（受領のエントリーセクション下padding相当） */
.contact_section{padding-bottom:clamp(56px,9vw,100px)!important;padding-left:clamp(18px,5vw,24px)!important;padding-right:clamp(18px,5vw,24px)!important;}

/* ===== 必須バッジの位置：項目名の直後（受領と同じ間隔10px） =====
   CueZillaテーマが dt に justify-content:space-between を当て、必須バッジが右端へ飛ぶ（視覚間隔が広すぎる）。
   flex-start に固定して、項目名＋必須を左詰め＝gap:10px の間隔（受領）に戻す。 */
.parts219_form_wrap dt{justify-content:flex-start!important;}

/* ===== CueZilla プライバシーポリシーパーツ（privacypolicy-parts_…）の文字色を黒に =====
   実ページは 07 の .pp-body ではなく CueZilla 標準privacyパーツを使用。テーマの var(--text-color)/var(--main-color)
   を上書きして本文・見出し・タイトルを黒に（ハッシュ接尾辞に依存しない属性セレクタ）。 */
[class*="privacypolicy-parts"] .about,
[class*="privacypolicy-parts"] .item_title,
[class*="privacypolicy-parts"] .item_description{color:#1a1a1a!important;}

@charset "UTF-8";
/* ============================================================
   事務所の様子をのぞいてみる｜横流れスライダー
   接頭辞 .hsgw-office で名前空間を分離（既存CSSと干渉しません）
   ============================================================ */

.hsgw-office {
  --hsgw-office-gap: 22px;        /* 画像間の余白（JSの計算にも使用） */
  --hsgw-office-h: 300px;         /* 画像の高さ */
  --hsgw-office-speed: 46s;       /* 上段の1周時間 */
  --hsgw-office-speed2: 52s;      /* 下段の1周時間 */
  --hsgw-office-ink: #2E2A24;
  --hsgw-office-accent: #EE6C4D;
  --hsgw-office-bg: #FFFBF1;
  position: relative;
  padding: clamp(52px, 8vw, 104px) 0;
  background: var(--hsgw-office-bg);
  overflow: hidden;
}

/* ---- 見出し ---- */
.hsgw-office__head {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px 0 clamp(26px, 5vw, 56px);
}
.hsgw-office__label {
  margin: 0;
  font-family: "IBM Plex Sans JP", "Zen Kaku Gothic New", sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: .16em;
  color: var(--hsgw-office-accent);
}
.hsgw-office__title {
  margin: 8px 0 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 5.4vw, 58px);
  line-height: 1.12;
  color: var(--hsgw-office-ink);
  text-wrap: pretty;
}
.hsgw-office__title span {
  display: inline-block;   /* 単語の途中で折り返さない */
}

/* ---- スライダー ---- */
.hsgw-office__wrap {
  margin-top: clamp(30px, 4.5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: var(--hsgw-office-gap);
}
.hsgw-office__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0 var(--hsgw-office-gap) 0 0;  /* 末尾の余白＝ループのつなぎ目 */
  list-style: none;
  gap: var(--hsgw-office-gap);
  will-change: transform;
}
.hsgw-office__item { flex: none; margin: 0; }
.hsgw-office__item img {
  display: block;
  height: var(--hsgw-office-h);
  width: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 3px solid var(--hsgw-office-ink);
  border-radius: 16px;
}

/* JS準備完了後にアニメーション開始（複製前のガタつき防止） */
.hsgw-office__wrap.is-ready .hsgw-office__track[data-dir="left"] {
  animation: hsgw-office-left var(--hsgw-office-speed) linear infinite;
}
.hsgw-office__wrap.is-ready .hsgw-office__track[data-dir="right"] {
  animation: hsgw-office-right var(--hsgw-office-speed2) linear infinite;
}
.hsgw-office__wrap:hover .hsgw-office__track { animation-play-state: paused; }

@keyframes hsgw-office-left  { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
@keyframes hsgw-office-right { from { transform: translateX(-50%); } to { transform: translateX(0);     } }

/* ---- レスポンシブ ---- */
@media (max-width: 1200px) { .hsgw-office { --hsgw-office-h: 250px; } }
@media (max-width: 900px)  { .hsgw-office { --hsgw-office-h: 210px; --hsgw-office-gap: 14px; } }
@media (max-width: 600px)  {
  .hsgw-office { --hsgw-office-h: 165px; --hsgw-office-gap: 11px; padding: 40px 0; }
  .hsgw-office__wrap { margin-top: 24px; }
  .hsgw-office__item img { border-width: 2.5px; border-radius: 13px; }
}
@media (max-width: 400px)  { .hsgw-office { --hsgw-office-h: 140px; } }

/* ---- 動きを抑える設定の環境 ---- */
@media (prefers-reduced-motion: reduce) {
  .hsgw-office__wrap.is-ready .hsgw-office__track { animation: none; }
  .hsgw-office__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hsgw-office__track { width: auto; }
}