/* =========================
   OYAGI Mobile (<=768px)
   既存PCは一切上書きしない方針
========================= */



/* =========================
   OYAGI Mobile (<=768px)
   ハンバーガー/ドロワー系は全撤去済み
   PC側には一切影響しない
========================= */

/* --- SP時はPCヘッダーを完全に隠す（#oy-ham を使う前提） --- */
html.is-sp header.header{
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  width: 0 !important; height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  overflow: hidden !important;
}

/* はみ出し防止（SP時のみ適用） */
html.is-sp, html.is-sp body{ overflow-x: hidden; }

/* =========================
   SP：ファーストビュー（画像＋コピー）
   画像はフルブリード、コピーは下に配置
========================= */

/* レイアウトを縦積みに固定（保険） */
html.is-sp .fv-cut .fvcut__wrap{ display:block !important; }

/* ===== 画像：フルブリード化・ジグザグ/角丸オフ ===== */
html.is-sp .art-edge.art-edge--d{
  display: block !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  height: clamp(240px, 52vh, 460px) !important; /* 浅めに見せる */
  background-size: cover !important;
  background-position: 65% 12% !important;     /* 右寄せ気味。必要に応じ調整 */
  clip-path: none !important;
  border-radius: 0 !important;
}

/* indexページでも同様にフルブリードを維持 */
html.is-sp body.page-index .art-edge.art-edge--d{
  display: block !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  height: clamp(240px, 52vh, 460px) !important;
  background-size: cover !important;
  background-position: 65% 12% !important;
  clip-path: none !important;
  border-radius: 0 !important;
}

/* ===== コピー（青箱）：画像の“下に”フル幅配置 ===== */
html.is-sp body.page-index .fvcut__wrap{ padding:0 !important; }

html.is-sp body.page-index .fvcut__copy{
  /* 画面端までフル幅 */
  box-sizing: border-box;
  max-width: none !important;
  width: 100vw !important;
  left: 50%; right: 50%;
  margin: 0 !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  transform: none !important;

  /* 見た目 */
  position: relative;
  z-index: 2;
  padding: 28px 20px 32px;
  background: var(--blue-deep, #1b2a55);
  color: #fff !important;
  text-align: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* タイポ微調整 */
html.is-sp body.page-index .fvcut__copy .eyebrow{ margin: 0 0 6px !important; opacity: .9; }
html.is-sp body.page-index .fvcut__copy .title  { margin: 0 0 12px !important; line-height: 1.35; color:#fff !important; }
html.is-sp body.page-index .fvcut__copy .lead   { margin: 0 0 18px !important; line-height: 1.8; color: rgba(255,255,255,.92) !important; }

/* ボタン行：横並び（狭ければ折返し） */
html.is-sp body.page-index .fvcut__copy .actions{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* ボタン：自然な幅で2個並ぶ基準 */
html.is-sp body.page-index .fvcut__copy .actions a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  flex: 1 0 44% !important;       /* 2つで並ぶ基準（狭いと折返し） */
  max-width: 220px !important;
  min-width: 140px !important;

  padding: 10px 18px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;

  /* 白アウトラインで統一 */
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.95) !important;
}

/* 極小端末は上下2段に（強制） */
@media (max-width: 360px){
  html.is-sp body.page-index .fvcut__copy .actions a{
    flex: 1 1 100% !important;
    max-width: none !important;
  }
}

/* 既存の“画像を消す／背景で塗る”系の指定を無効化（保険） */
html.is-sp .image-box, 
html.is-sp .image-box .fit-image{ display: block !important; }

/* =========================
   OYAGI Mobile (<=768px)
   ハンバーガー/ドロワー系は全撤去
   FV（画像＋青箱）の最小セット
========================= */

/* 共通タイポ＆ボタン（PCにも影響してOKな軽い体裁） */
.fv-cut .eyebrow,
.fv-cut .title,
.fv-cut .lead{
  text-align: center;
  margin-bottom: 16px;
}
.fv-cut .btn-area{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;   /* 狭い画面は折り返し */
  margin-top: 24px;
}

/* ===== SP：ファーストビューを「高さ100dvhの2分割レイアウト」に ===== */
html.is-sp .fv{
  display: grid;
  /* 画像の高さ配分（44〜56dvh あたりで微調整） */
  --fv-photo: 48dvh;
  grid-template-rows: var(--fv-photo) 1fr;
  min-height: 100dvh;            /* 画面ぴったり */
  margin: 0 !important;          /* 段差防止 */
}

/* 1行目＝画像側（fv直下の先頭要素想定） */
html.is-sp .fv > *:first-child{
  min-height: 0;                 /* はみ出し防止 */
}

/* 2行目＝青箱（fv直下の末尾要素想定） */
html.is-sp .fv > *:last-child{
  background: var(--blue-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* 中身を縦中央 */
  padding: 24px 20px 28px;
  box-sizing: border-box;
  /* iOSツールバー対策で下端を確保 */
  min-height: calc(100dvh - var(--fv-photo));
  padding-bottom: max(28px, env(safe-area-inset-bottom));
}

/* 青箱内の整列・余白（念押し） */
html.is-sp .fv > *:last-child .eyebrow,
html.is-sp .fv > *:last-child .title,
html.is-sp .fv > *:last-child .lead{
  text-align: center;
  margin-bottom: 14px;
}
html.is-sp .fv > *:last-child .btn-area{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;               /* 狭い端末で上下2段 */
  margin-top: 20px;
}
html.is-sp .fv > *:last-child .btn-area .btn-outline{
  min-width: 44%;                /* 可能なら左右2列、無理なら縦並び */
}

/* 次セクションが覗かないよう段差消し */
html.is-sp .fv + *{
  margin-top: 0 !important;
}
/***** OYAGI SP – リクエスト対応パッチ *****/

/* 1) ロゴ右のタイトルをより視認性高く */
html.is-sp .header-sp .brand-name{
  font-size: clamp(18px, 4.8vw, 20px) !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  color: #111 !important;               /* 濃色でコントラストUP */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 2) FV画像をヘッダー直下にベタ付け（隙間0） */
html.is-sp header.header-sp .header-bar{
  border-bottom: 0 !important;          /* 1pxラインを消す */
  box-shadow: none !important;
}
html.is-sp body.page-index .fv,
html.is-sp body.page-index .fv-cut,
html.is-sp body.page-index .art-edge.art-edge--d{
  margin-top: 0 !important;
}
html.is-sp body.page-index .art-edge.art-edge--d{
  /* 画像をヘッダー下から見せる想定。必要なら微調整OK */
  background-position: center top !important;
}

/* 3) ハンバーガー開いた時の暗さを軽減（オーバーレイを明るく） */
html.is-sp #spnav .sp-drawer .drawer-overlay,
html.is-sp .sp-drawer .drawer-overlay{
  background: rgba(0,0,0,.16) !important;   /* .36 → .16 に軽く */
}

/* 4) 青箱の色をボタン青箱と統一（黒すぎる青を緩和） */
/* “ボタン群が入っている青箱”と同じに：var(--blue-deep, #1b2a55) */
:root{
  --blue-deep: #1b2a55;                     /* 念のため定義/上書き */
}

/* FV下部の大きい青エリアを統一色に */
html.is-sp body.page-index .fv-cut,
html.is-sp body.page-index .fv > *:last-child{
  background: var(--blue-deep, #1b2a55) !important;
  color: #fff !important;
}

/* 2〜4の副作用対策：文字やボタンは従来通り中央＆並び維持 */
html.is-sp body.page-index .fv > *:last-child .eyebrow,
html.is-sp body.page-index .fv > *:last-child .title,
html.is-sp body.page-index .fv > *:last-child .lead{
  text-align: center !important;
}

html.is-sp body.page-index .fv > *:last-child .btn-area,
html.is-sp .fv-cut .btn-area{
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 20px !important;
}

/***** OYAGI SP – 強制上書きパッチ *****/

/* 0) SP時の基本：横ズレ保険 */
html.is-sp, html.is-sp body { overflow-x: hidden; }

/* 1) ヘッダータイトル色（ロゴ右の文字） */
html.is-sp header[class*="header"] .brand,
html.is-sp header[class*="header"] .brand *,
html.is-sp header[class*="header"] .brand-name {
  color: #212f5b !important;          /* 深い紺 */
  -webkit-text-fill-color: #212f5b;   /* iOS保険 */
}

/* 2) ヘッダー直下の余白を0に（スペーサー＆インラインpaddingを殺す） */
html.is-sp .brand-bar[aria-hidden="true"] { display: none !important; }
html.is-sp body[style*="padding-top"]     { padding-top: 0 !important; }
html.is-sp .page-index[style*="padding-top"] { padding-top: 0 !important; }

/* FVをヘッダーに貼り付け（念押し） */
html.is-sp body.page-index .fv,
html.is-sp body.page-index .fv-cut,
html.is-sp body.page-index .art-edge.art-edge--d {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-position: center top !important;
}

/* 3) ハンバーガーを明るく（暗幕を撤去し、薄い白ベールに） */
html.is-sp .sp-drawer { background: transparent !important; }
html.is-sp .sp-drawer .drawer-overlay {
  background: rgba(255,255,255,.68) !important; /* 明るい */
  opacity: 1 !important;                        /* 実装差吸収 */
}

/* 4) leadテキスト中央寄せ（両系統に効かせる） */
html.is-sp .fv-cut .lead,
html.is-sp body.page-index .fvcut__copy .lead,
html.is-sp p.lead {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 5) 万一ヘッダーの下に見えない余白が残る場合の保険（よほどの場合のみ） */
@supports (padding: max(0px)) {
  html.is-sp body.page-index { scroll-padding-top: 0 !important; }
}

/* ===== SP ONLY: SCROLL 誘導（青箱の色と同じ背景） ===== */
html.is-sp .scroll-cue{
  background: var(--blue-deep, #1b2a55);
  color:#fff;
  height:60px;
  display:grid;
  place-items:center;
  gap:6px;
  grid-auto-flow:column;
  justify-content:center;
}
html.is-sp .scroll-cue__label{
  font-size:12px; letter-spacing:.18em; opacity:.85;
}
html.is-sp .scroll-cue__arrow{
  width:10px; height:10px; transform:rotate(45deg);
  border-right:2px solid rgba(255,255,255,.9);
  border-bottom:2px solid rgba(255,255,255,.9);
  animation: oy-cue 1.4s ease-in-out infinite;
}
@keyframes oy-cue{
  0%{ transform:translateY(-2px) rotate(45deg); opacity:.35; }
  50%{ transform:translateY(4px) rotate(45deg); opacity:1; }
  100%{ transform:translateY(-2px) rotate(45deg); opacity:.35; }
}

/* 見出し列の英語を非表示＋中央寄せ */
html.is-sp body.page-index .strengths .strengths-eyebrow{
  display:block !important;
  text-align:center !important;
}
html.is-sp body.page-index .strengths .strengths-eyebrow span{ display:none !important; }
html.is-sp body.page-index .strengths .strengths-title{
  margin: 10px auto 0 !important;
  text-align:center !important;
  max-width: 28em !important;          /* 行長を絞って2〜3行に収める狙い */
  line-height:1.8 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

/* ===== SP：Strengthsタイトルを確実に4行程度に抑える ===== */
html.is-sp .strengths .strengths-title{
  font-size: clamp(14px, 3.8vw, 16px) !important;  /* 文字をさらに小さめ */
  line-height: 1.7 !important;
  max-width: 22em !important;                      /* 行長をもっと狭める */
  margin: 8px auto 0 !important;
  text-align: center !important;
  text-wrap: balance;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

/* 強調部分もnowrapは解除（行数抑えるため敢えて改行可にする） */
html.is-sp .strengths .strengths-title .highlight{
  white-space: normal !important;
}
/* === SP：Strengths 本文を4行前後に（幅を広げる・左パディング無効） === */
html.is-sp .strengths .strengths-title{
  max-width: min(60ch, 92vw) !important;  /* 横幅を広げて行数を減らす */
  font-size: clamp(16px, 4.8vw, 18px) !important;
  line-height: 1.7 !important;
  text-align: center !important;
  margin: 10px auto 0 !important;
  padding-left: 0 !important;             /* PC用の 3ch を打ち消し */
  text-wrap: balance;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* 強調語は改行OK（固定しない） */
html.is-sp .strengths .strengths-title .highlight{
  white-space: normal !important;
}

/* 親側の左右余白が強い場合の保険（行幅を確保） */
html.is-sp .strengths .strengths-inner{
  padding-left: 14px !important;
  padding-right: 14px !important;
}
/* === SP強制上書き：Strengthsタイトル（中央・4行前後に） === */
html.is-sp body.page-index .strengths .strengths-title{
  max-width: 94vw !important;            /* 画面幅いっぱい近くまで */
  font-size: clamp(16px, 4.5vw, 18px) !important;
  line-height: 1.7 !important;
  margin: 12px auto 0 !important;
  text-align: center !important;
  padding: 0 !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
}

/* ===== SP：Strengths 本文（h2）を3–4行に圧縮 ===== */
html.is-sp body.page-index .strengths .strengths-inner{
  display:block !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

html.is-sp body.page-index .strengths .strengths-left,
html.is-sp body.page-index .strengths .strengths-right{
  max-width:none !important;
  width:100% !important;
}

/* ←ここが本体 */
html.is-sp body.page-index .strengths .strengths-title{
  /* PC側の指定をリセットしてから、行数を“幅で”減らす */
  padding-left: 0 !important;         /* PCで付けた 3ch を無効化 */
  position: static !important;        /* PCの top:30px を無効化 */
  text-align: center !important;      /* 両端揃え→中央へ */
  text-align-last: center !important;
  letter-spacing: 0 !important;

  /* 行数コントロール（横幅を広げて改行を減らす） */
  max-width: min(66ch, 94vw) !important; /* ←ここで3〜4行にする肝 */
  width: auto !important;
  margin: 10px auto 0 !important;

  /* タイポ */
  font-size: clamp(16px, 4.6vw, 18px) !important;
  line-height: 1.7 !important;

  /* 変な分割を避けつつ、必要な所で折れるように */
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance;
}

/* 強調語は折り返しOK（nowrapが残ってると行数が減らない） */
html.is-sp body.page-index .strengths .strengths-title .highlight{
  white-space: normal !important;
}

/* リードも中央揃え・行長短め（見た目を揃える） */
html.is-sp body.page-index .strengths .strengths-lead{
  max-width: 60ch !important;
  margin: 16px auto 0 !important;
  text-align: center !important;
  line-height: 1.9 !important;
}
/* ===== SP: Strengthsの余計な棒(線)を“全部”消す ===== */
html.is-sp body.page-index .strengths .strengths-left,
html.is-sp body.page-index .strengths .strengths-right,
html.is-sp body.page-index .strengths .strengths-eyebrow,
html.is-sp body.page-index .strengths .strengths-title{
  border: 0 !important;
  box-shadow: none !important;
}
html.is-sp body.page-index .strengths hr{ display:none !important; }

/* 擬似要素タイプの線も殺す（左右どちらの実装でも対応） */
html.is-sp body.page-index .strengths .strengths-left::before,
html.is-sp body.page-index .strengths .strengths-left::after,
html.is-sp body.page-index .strengths .strengths-right::before,
html.is-sp body.page-index .strengths .strengths-right::after,
html.is-sp body.page-index .strengths .strengths-eyebrow::before,
html.is-sp body.page-index .strengths .strengths-eyebrow::after,
html.is-sp body.page-index .strengths .strengths-title::before,
html.is-sp body.page-index .strengths .strengths-title::after{
  content: none !important;
  display: none !important;
}

/* ===== SP: リード文（地域に根ざした〜）中央寄せ＆行数圧縮 ===== */
html.is-sp body.page-index .strengths .strengths-right{
  width: 100% !important;
  max-width: none !important;
  margin: 18px auto 0 !important;
  padding: 0 14px !important;           /* 行幅を確保 */
}
html.is-sp body.page-index .strengths .strengths-lead{
  max-width: min(66ch, 94vw) !important;/* 横幅を広げて改行を減らす */
  margin: 12px auto 0 !important;
  text-align: center !important;
  font-size: clamp(14px, 3.9vw, 16px) !important;
  line-height: 1.85 !important;
  color: #333 !important;

  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance;
}
/* 途中の手動 <br> はSPでは不要なので無効化（行数を増やさない） */
html.is-sp body.page-index .strengths .strengths-lead br{
  display: none !important;
}

/* ===== SP：Strengths タイトルをもっと上へ、リードは下へ ===== */
html.is-sp body.page-index .strengths .strengths-title{
  /* PCで下げている指定を無効化 */
  position: static !important;
  top: auto !important;
  padding-top: 0 !important;

  /* 見出し「OYAGIの想い」にグッと近づける */
  margin-top: -8px !important;      /* ← さらに上げたい時は -12〜-16px までOK */
  margin-bottom: 8px !important;     /* タイトル直下の詰め具合 */

  /* 既存のタイポはそのまま（行数圧縮済みの設定は維持） */
}

/* ウォーターテキストを“タイトルとリードの間”に見せるため、リードは下げる */
html.is-sp body.page-index .strengths .strengths-lead{
  margin-top: 34px !important;       /* ← 透け具合の調整ノブ（30〜44pxで調整） */
}

/* 見出し行（OYAGIの想い）との縦詰めも強化 */
html.is-sp body.page-index .strengths .strengths-eyebrow{
  margin-bottom: 6px !important;     /* ここを小さくするとさらに上に詰まる */
}
/* ===== SP: Strengths リード文をさらに下げる ===== */
html.is-sp body.page-index .strengths .strengths-lead{
  margin-top: 56px !important;   /* ← 今の34pxを +12px 下げる */
}

/* SP: リード文ブロックを視覚的に下へ確実に移動 */
html.is-sp body.page-index .strengths .strengths-right{
  /* まず既存の指定をリセット */
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;

  /* ここで見た目だけ下げる（相殺の影響を受けない） */
  transform: translateY(40px) !important; /* 好みに応じて 30〜60px で調整 */
}

/* リード単体の余白はゼロに（移動量は上の transform で統一） */
html.is-sp body.page-index .strengths .strengths-lead{
  margin-top: 0 !important;
}
/* ===== SP: リード文だけを下げる ===== */
html.is-sp body.page-index .strengths .strengths-lead{
  margin-top: 0 !important;
  position: relative !important;
  transform: translateY(40px) !important; /* ← 好みに応じて調整 */
}

/* ===== SP: Strengths ウォーターテキストを下げる ===== */
html.is-sp body.page-index .strengths::before,
html.is-sp body.page-index .strengths::after,
html.is-sp body.page-index .strengths-inner::before,
html.is-sp body.page-index .strengths-inner::after{
  top: 4px !important;                 /* 下げ量。20〜60pxで調整OK */
  transform: translateY(40px) !important;
}

/* ===== SP: BUSINESS ウォーターテキスト修正 ===== */
html.is-sp body.page-index .business::before,
html.is-sp body.page-index .business::after,
html.is-sp body.page-index .business-inner::before,
html.is-sp body.page-index .business-inner::after{
  font-size: clamp(28px, 14vw, 52px) !important; /* ← 全体を収めるサイズ感に */
  letter-spacing: 0.04em !important;

  /* 横幅カットはせずに中央寄せ */
  max-width: none !important;
  white-space: nowrap !important;   /* 強制的に1行表示 */
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* ===== SP: BUSINESS ウォーターテキスト位置調整 ===== */
html.is-sp body.page-index .business::before,
html.is-sp body.page-index .business::after,
html.is-sp body.page-index .business-inner::before,
html.is-sp body.page-index .business-inner::after{
  left: 40% !important;                  /* 中央より少し左へ（数値を30〜45%で調整） */
  top: 60px !important;                  /* 下に移動。値を増やせばさらに下へ */
  transform: translateX(-50%) !important;
  font-size: clamp(28px, 14vw, 52px) !important;
}

/* ===== SP: BUSINESS ボタン位置調整 ===== */
html.is-sp body.page-index .business .btn-wrap{
  margin-top: 32px !important;           /* 余白を広げて下に下げる */
  text-align: center !important;
}

/* ===== SP: BUSINESS ウォーターテキスト再調整 ===== */
html.is-sp body.page-index .business::before,
html.is-sp body.page-index .business::after,
html.is-sp body.page-index .business-inner::before,
html.is-sp body.page-index .business-inner::after{
  left: 55% !important;                  /* 中央より少し右へ（50%基準→55%） */
  top: 90px !important;                  /* さらに下げる。80〜110pxで微調整OK */
  transform: translateX(-50%) !important;
  font-size: clamp(28px, 14vw, 52px) !important;
}

/* ===== SP: BUSINESS ボタン下げ ===== */
html.is-sp body.page-index .business .btn-wrap{
  margin-top: 48px !important;           /* 余白をさらに広げて下げる */
  text-align: center !important;
}

/* ===== SP: BUSINESS ウォーターテキスト微調整 ===== */
html.is-sp body.page-index .business::before,
html.is-sp body.page-index .business::after,
html.is-sp body.page-index .business-inner::before,
html.is-sp body.page-index .business-inner::after{
  left: 45% !important;                  /* 前回40% → 少しだけ右に寄せる */
  top: 110px !important;                 /* さらに下げる（100〜130pxで調整可） */
  transform: translateX(-50%) !important;
  font-size: clamp(28px, 14vw, 52px) !important;
}

/* ===== SP: BUSINESS ボタンを大きく下げる ===== */
html.is-sp body.page-index .business .btn-wrap{
  margin-top: 100px !important;           /* 思い切って下へ（70〜100px範囲でOK） */
  text-align: center !important;
}

/* ===== SP: BUSINESS ボタンをさらに下へ ===== */
html.is-sp body.page-index .business .btn-wrap{
  margin-top: 110px !important;   /* 80px → 110px に拡大（必要なら120pxでもOK） */
  text-align: center !important;
}


/* ===== SP: Services 2カラム（文章＋リンクを中央揃え） ===== */
html.is-sp .services .svc-body{
  display: grid !important;
  justify-items: center !important;   /* 中央寄せ */
  text-align: center !important;
}

html.is-sp .services .svc-head{
  justify-content: center !important; /* 見出し行も中央に */
}

html.is-sp .services .svc-text{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.is-sp .services .btn-pill{
  display: inline-block !important;
  margin-left: auto !important;
  margin-right: auto !important;      /* ボタン中央 */
}

/* ===== SP: 採用情報（.recruit-hero）を深くしてボタンを切らさない ===== */
html.is-sp .recruit-hero{
  position: relative !important;
  display: grid !important;
  align-content: end !important;             /* 中身を下寄せ */
  min-height: 420px !important;              /* 画像エリアを深めに */
  height: auto !important;                   /* 固定高があれば無効化 */
  overflow: hidden !important;
}

/* 背景画像は全面フィット */
html.is-sp .recruit-hero__media{
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
}
html.is-sp .recruit-hero__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 60% !important;    /* 見せ場を少し下に */
}

/* テキスト＋ボタンは前面＆内側余白で収める */
html.is-sp .recruit-hero__content{
  position: relative !important;
  z-index: 1 !important;
  padding: 20px 18px 28px !important;        /* 下にゆとり */
  text-align: center !important;
}

/* ボタンが確実に見えるよう微調整 */
html.is-sp .recruit-hero .btn-ghost-light{
  display: inline-block !important;
  margin-top: 10px !important;
}

/* ===== SP: 採用情報（テキスト＆ボタン配置調整） ===== */
html.is-sp .recruit-hero__content{
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;   /* 左寄せ */
  justify-content: flex-start !important;/* 上寄せ */
  padding: 24px 20px !important;        /* 上＆左に余白 */
  text-align: left !important;
}

/* ボタンを少し下＋右へ */
html.is-sp .recruit-hero .btn-ghost-light{
  margin-top: 14px !important;   /* 少し下へ */
  margin-left: 8px !important;   /* 少し右へ */
}

/* ===== SP: 採用情報（テキストを大袈裟に左上へ、ボタンも調整） ===== */
html.is-sp .recruit-hero__content{
  position: absolute !important;
  top: 20px !important;            /* ページ上からの距離 → さらに上 */
  left: 16px !important;           /* 左端寄せ */
  right: auto !important;
  z-index: 1 !important;
  text-align: left !important;
  max-width: 80% !important;       /* 横幅制御（被らないように） */
}

/* ボタンを文字より大きく下＋少し右へ */
html.is-sp .recruit-hero .btn-ghost-light{
  margin-top: 20px !important;     /* テキストより大きく下へ */
  margin-left: 12px !important;    /* 少し右へ寄せる */
  display: inline-block !important;
}

/* ===== SP: 採用ヒーロー（ボタンを木の下に） ===== */
html.is-sp .recruit-hero{ 
  position: relative !important;             /* ボタンの基準をセクションに */
  overflow: hidden;                          /* はみ出し保険（任意） */
}

/* テキストは左上に固定（今の配置が良ければそのままでOK） */
html.is-sp .recruit-hero__content{
  position: absolute !important;
  top: 22px !important; 
  left: 18px !important;
  right: auto !important;
  max-width: 78% !important;
  text-align: left !important;
  z-index: 2 !important;
}

/* ★ボタン：クラスは .btn-ghost-light だけ */
html.is-sp .recruit-hero .btn-ghost-light{
  position: absolute !important;             /* 親= .recruit-hero を基準に */
  bottom: 22px !important;                   /* 芝生の上あたりに */
  left: 50% !important;                      /* 画面中央寄せ */
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  margin: 0 !important;
}

/* 画像が前に来てボタンが隠れる場合の保険 */
html.is-sp .recruit-hero__media{ position: relative; z-index: 1; }

html.is-sp .recruit-hero__content{
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* 黒影で読みやすさUP */
}

html.is-sp .recruit-hero__content .btn-ghost-light{
  position: relative !important; /* 親要素内に通常配置 */
  bottom: auto !important;
  left: auto !important;
  transform: none !important;

  margin-top: 14px !important;   /* テキストとの間隔 */
  margin-left: 4px !important;   /* 少しだけ左寄せ */
}


/***** SP ONLY — #company セクション *****/

/* 配置基準 */
html.is-sp #company{ position: relative !important; }

/* 1) ウォーターマーク（いずれの実装でも当たる網） */
html.is-sp #company::before,
html.is-sp #company::after,
html.is-sp #company [class*="wm"],
html.is-sp #company [class*="water"]{
  position: absolute !important;
  left: 4% !important;
  top: 18% !important;
  transform: translate(0,0) scale(.72) !important;
  transform-origin: left top !important;
  opacity: .06 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  font-size: clamp(72px, 22vw, 220px) !important; /* でか過ぎ対策（文字型WM用） */
}

/* 2) テキスト中央寄せ（見出し・本文） */
html.is-sp #company h2,
html.is-sp #company p,
html.is-sp #company .company-lead,
html.is-sp #company .company-inner{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.8 !important;
  max-width: 32em !important;
  position: relative;   /* WMより前面に */
  z-index: 1;
}

/* 3) ボタンを少し下げて中央 */
html.is-sp #company .btn-wrap{
  display: flex !important;
  justify-content: center !important;
  margin-top: 18px !important;   /* 「少し下」 */
  position: relative;
  z-index: 1;
}

html.is-sp #news ul li{
  background:#f9f9f9;
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:12px;
}
html.is-sp #news ul li .date{ 
  font-size:12px; opacity:.7; margin-bottom:4px;
}
html.is-sp #news ul li .title{ 
  font-size:15px; line-height:1.6; margin-bottom:6px; 
}
html.is-sp #news ul li .cat{ 
  font-size:12px; color:#666; text-align:right; 
}

/***** SP ONLY — NEWSカード整形 *****/
html.is-sp #news ul{
  padding: 0 12px !important;
}

html.is-sp #news ul li{
  background: #fafafa;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px;
}

/* 日付・本文・カテゴリの横幅制御 */
html.is-sp #news ul li .date,
html.is-sp #news ul li time{
  font-size: 13px;
  color: #555;
  white-space: nowrap !important;   /* 縦に割れないよう強制横並び */
}

html.is-sp #news ul li .title,
html.is-sp #news ul li p{
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;           /* 単語で折り返し */
  white-space: normal !important;   /* 普通の横書き改行に */
}

html.is-sp #news ul li .cat{
  font-size: 12px;
  color: #888;
  margin-left: auto;                /* 右寄せ */
}

/* =========================
   services.html 専用 SPヘッダー白バー（強制版）
========================= */
@media (max-width: 768px){

  body.page-services header.header{
    display:none !important;
  }

  body.page-services #oy-ham{
    display:block !important;
  }

  body.page-services #oy-ham .oyh-bar{
    position:fixed; top:0; left:0; right:0;
    height:56px;
    background:#fff !important;
    border-bottom:1px solid rgba(0,0,0,.08);
    z-index:1000;
  }

  body.page-services #oy-ham .logo,
  body.page-services #oy-ham .oyh-bar a,
  body.page-services #oy-ham .qi{
    color:#111 !important;
  }

  body.page-services{ padding-top:56px !important; }
}