/* ==========================================================================
   1.5career.sw2.jp Mobile Responsive Patch v1.2
   対象テーマ: /wp-content/themes/career/ (カスタムテーマ "career")
   目的: スマートフォン（〜768px）での固有崩れ修正
   方針:
     - 既存テーマCSS (reset.css / common.css / page.css) は書き換えない
     - 追加読み込み形式で上書き。セレクタ特異性 (html body .class) で勝負
     - sw2.jp 用パッチとは被らない「career テーマ固有」の問題のみ対象
   v1.1 変更点 (2026-04-19 01:00):
     - V1 VOICE: v1で各カード width:100% に潰してしまい1枚しか見えなくなる不具合修正
       → 25%(4カラム) 横並びを維持しつつ、ボタン位置/カード視認性のみ調整
   v1.2 変更点 (2026-04-19 01:30):
     - V1 VOICE: `›` (next) ボタンがモバイルで display:none のまま押せない不具合修正
       → front-page.php の JS `update()` 関数で prev.style.display/next.style.display
         をインラインで 'flex'/'none' に書き換えているため、CSS !important で常時表示に強制
       → 両ボタンを 44×44px の iOS/Android 推奨タップ領域に拡大
       → z-index 10 に上げて画像と重なっても確実にタップ可能に
       → visibility:visible / pointer-events:auto も二重保険で付与
   ========================================================================== */


/* --------------------------------------------------------------------------
   Base: 共通保険
   - 横スクロール抑止 (V3 の保険)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  html body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  html body *,
  html body *::before,
  html body *::after {
    box-sizing: border-box;
  }
}


/* ==========================================================================
   [V1 致命 修正] VOICE セクション TikTokスライダー
   - 実装: front-page.php 内インライン <style> + JSで .voiceTrack を translateX
   - 元構造: <div style="width:25%"> × N枚 / 4枚同時表示 / JS `translateX(-pos*25%)`
   - 問題: #voicePrev { left:-20px }, #voiceNext { right:-20px }
           親 max-width:800px / margin:0 auto / overflow未指定
           375pxでは親=375px、ボタンがビューポート外で押下不可
   ---
   v1の誤り: 各カード width:25% → 100% に書き換え → 1枚しか見えない。JSも破綻。
   v1.1 方針: 4カラム横並び維持。JSの translateX(-25%/step) もそのまま機能させる。
              ボタンのみ画面内に収容 (left:-20px→left:4px)。親は overflow:hidden 維持。
   v1.2 追加修正:
     - front-page.php の JS が pos=0 の初期で prev.style.display='none'、
       pos>=max で next.style.display='none' をインライン設定してくるため、
       CSS !important で display:flex を強制。VOICE総数が4以下でもユーザーが
       視覚的にボタンの存在を認識できるようにする（範囲外クリックは JS 側で
       「if(pos<max)」条件があるので無害）。
     - タップ領域を 44×44 に拡大（iOS HIG / Material Design 最小基準）。
     - z-index を 5 → 10 に引き上げ、画像オーバーレイに確実に被せる。
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* スライダーの親ラッパ: 左右 padding で矢印ボタン位置確保
     (48pxだとカード潰れすぎるので取らず、矢印はオーバーレイ配置) */
  html body .section-voice > .sectionInner_l > .pt60[style*="max-width:800px"],
  html body .section-voice .pt60[style*="position:relative"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* スライダー本体: オーバーフロー隠しは元の挙動(overflow:hidden)を尊重 */
  html body #voiceSlider {
    overflow: hidden !important;
    border-radius: 8px;
  }

  /* トラック: flex のまま維持 (JS の transition も保持) */
  html body #voiceTrack {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
  }

  /* 各カード: 元の 25% を尊重 (4枚同時表示)。ただし padding を 0 .3rem に詰める */
  html body #voiceTrack > div[style*="width:25%"] {
    width: 25% !important;
    flex: 0 0 25% !important;
    padding: 0 .3rem !important;
    box-sizing: border-box !important;
  }

  /* サムネイル画像: 高さ 250px 固定 → 画面幅に合わせ可変 (細長カードを綺麗に) */
  html body #voiceTrack img[style*="height:250px"] {
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    max-height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* カード内テキストエリアを縮小 (カード幅が狭いので) */
  html body #voiceTrack > div[style*="width:25%"] a > div[style*="padding:.8rem"] {
    padding: .4rem !important;
    height: auto !important;
    min-height: 36px !important;
  }
  html body #voiceTrack > div[style*="width:25%"] a p {
    font-size: 10px !important;
    line-height: 1.3 !important;
    -webkit-line-clamp: 2 !important;
  }

  /* 中央の再生マーク: カードが小さいので縮小 */
  html body #voiceTrack > div[style*="width:25%"] a > div[style*="position:relative"] > div[style*="position:absolute"] {
    width: 28px !important;
    height: 28px !important;
  }
  html body #voiceTrack > div[style*="width:25%"] a > div[style*="position:relative"] > div[style*="position:absolute"] > span {
    border-width: 6px 0 6px 10px !important;
  }

  /* 前後ボタン: left/right の負値 → 画面内 (カードに少し被さる形のオーバーレイ)
     v1.2: display:flex を !important で強制 + 44×44 拡大 + z-index:10 */
  html body #voicePrev,
  html body #voicePrev[style],
  html body button#voicePrev {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 4px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(52, 52, 52, 0.92) !important;
    color: #fff !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
  }

  html body #voiceNext,
  html body #voiceNext[style],
  html body button#voiceNext {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    position: absolute !important;
    left: auto !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(52, 52, 52, 0.92) !important;
    color: #fff !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
  }

  /* JSは translateX(-pos*25%) のまま。width:25% を維持したので挙動は正常 */
}


/* ==========================================================================
   [V2 重要] ヒーロー "1.5 CAREER" 超大文字
   - 既存SP: .mvTxtWrap h2 { font-size: 6.2rem }
   - 対策: vw ベースで安全にクランプ
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .mvTxtWrap h2 {
    font-size: clamp(40px, 13vw, 68px) !important;
    letter-spacing: -0.04em !important;
    line-height: 1 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  html body .mv {
    overflow: hidden !important;
  }
}


/* ==========================================================================
   [V3 重要] FV 横スクロール画像リスト (m01〜m06)
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .fv-photos__col--left {
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  html body .fv-photos__list {
    max-width: none !important;
  }
  html body .fv-photos__list li img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}


/* ==========================================================================
   [V4 中] METHOD サブリスト画像の視覚崩れ
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .method-subListItem {
    display: block !important;
    text-align: left !important;
  }
  html body .method-subListImg {
    width: 80px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .method-subListImg img {
    width: 100% !important;
    height: auto !important;
  }
  html body .method-subListTxt {
    padding-top: 2rem !important;
  }

  html body .method-listItem {
    padding: 20px 20px 28px !important;
  }
  html body .method-listIcon {
    width: 56px !important;
    margin-left: 0 !important;
  }
  html body .method-listTxt {
    padding-top: 24px !important;
  }
}


/* ==========================================================================
   [V5 中] FEATURE カード featureCont の width:96% ズレ
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .featureCont {
    width: 100% !important;
    padding: 20px 20px 40px !important;
  }
  html body .featureDetail > p {
    padding: 16px 20px !important;
    font-size: 12px !important;
  }
  html body .featureTxt h3 {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }
  html body .featureTxt p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
}


/* ==========================================================================
   [追加保険 A] インラインCTAボタンのタップ領域
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .inline-cta a[style*="background:#CCFA00"] {
    display: inline-block !important;
    min-height: 44px !important;
    min-width: 200px !important;
    padding: 14px 28px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  html body .inline-cta {
    padding: 32px 16px !important;
  }
}


/* ==========================================================================
   [追加保険 B] FAQ 開閉エリアのタップ領域確保
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .faq-defList {
    padding: 20px !important;
    border-radius: 6px !important;
  }
  html body .faq-defTtl {
    min-height: 24px !important;
    padding-right: 32px !important;
  }
  html body .faq-defTtl p,
  html body .faq-defDesc p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  html body .faq-defList:not(:last-of-type) {
    margin-bottom: 12px !important;
  }
}


/* ==========================================================================
   [追加保険 C] CONTACT (cvArea) セクション
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .cvArea a {
    padding: 28px 20px !important;
  }
  html body .cvArea a > p {
    padding-top: 32px !important;
    font-size: 14px !important;
  }
  html body .cvArrow {
    width: 44px !important;
    height: 44px !important;
  }
  html body .cvTtl .mainTtl01 {
    font-size: 36px !important;
    line-height: 1 !important;
  }
}


/* ==========================================================================
   [追加保険 D] フッター可読性
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body .footerWrap {
    padding: 40px 0 24px !important;
  }
  html body .footer_content {
    padding-bottom: 32px !important;
  }
  html body .cvArea.sectionInner_l {
    padding-top: 32px !important;
  }
}


/* ==========================================================================
   [最終フェイルセーフ] 横スクロール全面封じ
   ========================================================================== */
@media screen and (max-width: 768px) {
  html body main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}

/* v1.1 2026-04-19 01:00 VOICE復旧 (4カラム横並び+矢印内側配置) */
/* v1.2 2026-04-19 01:35 矢印ボタン修正 (›表示強制/44×44拡大/z-index:10) */