/* =======================================================
   interview-1 専用（タブレット）
   01・02・03 すべて白ボックス上／写真下／中央揃え
   ======================================================= */
@media (min-width:768px) and (max-width:1368px){

  /* 各カードを縦積みに変更 */
  body.page-template-page-interview-1 .interview-card-overlay.card-01,
  body.page-template-page-interview-1 .interview-card-overlay.card-02,
  body.page-template-page-interview-1 .interview-card-overlay.card-03{
    display:flex !important;
    flex-direction:column !important;   /* 縦並びに強制 */
    align-items:center !important;
    justify-content:flex-start !important;
    gap:24px !important;
    grid-template-columns:none !important;
    float:none !important;
    position:relative !important;
  }

  /* 白ボックス（テキスト部分） */
  body.page-template-page-interview-1 .card-01 .overlay-text-box,
  body.page-template-page-interview-1 .card-02 .overlay-text-box,
  body.page-template-page-interview-1 .card-03 .overlay-text-box{
    order:1 !important;
    position:static !important;
    float:none !important;
    transform:none !important;
    width:min(800px,90%) !important;
    margin:0 auto !important;
    text-align:left !important;
  }

  /* 写真コンテナ（下配置・中央揃え） */
  body.page-template-page-interview-1 .card-01 .overlay-image-container,
  body.page-template-page-interview-1 .card-02 .overlay-image-container,
  body.page-template-page-interview-1 .card-03 .overlay-image-container{
    order:2 !important;
    display:block !important;
    position:static !important;
    float:none !important;
    clear:both !important;
    width:100% !important;
    margin:0 auto !important;
    text-align:center !important;
  }

  /* 画像サイズ調整 */
  body.page-template-page-interview-1 .card-01 .overlay-image-container img,
  body.page-template-page-interview-1 .card-02 .overlay-image-container img,
  body.page-template-page-interview-1 .card-03 .overlay-image-container img{
    display:inline-block !important;
    width:min(900px,92%) !important;
    height:auto !important;
    border-radius:8px !important;
    margin:0 auto !important;
  }

  /* 番号など中央寄せ */
  body.page-template-page-interview-1 .interview-number{
    align-self:center !important;
    margin-bottom:6px !important;
  }
}

/* =======================================================
   interview-1（タブレット共通）
   01〜03：白ボックスと写真のサイズ統一＆中央揃え
   03の写真が左に寄る問題も強制リセット
   ======================================================= */
@media (min-width:768px) and (max-width:1368px){

  /* 共通サイズ（必要なら数値だけ変えてOK） */
  body.page-template-page-interview-1{
    --i1-box-w: min(860px, 92vw);
    --i1-img-w: var(--i1-box-w);
  }

  /* 3カードとも縦積み・中央寄せ（前提） */
  body.page-template-page-interview-1 .interview-card-overlay.card-01,
  body.page-template-page-interview-1 .interview-card-overlay.card-02,
  body.page-template-page-interview-1 .interview-card-overlay.card-03{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:24px !important;
  }

  /* 白ボックスの幅を統一 */
  body.page-template-page-interview-1 .card-01 .overlay-text-box,
  body.page-template-page-interview-1 .card-02 .overlay-text-box,
  body.page-template-page-interview-1 .card-03 .overlay-text-box{
    width:var(--i1-box-w) !important;
    max-width:var(--i1-box-w) !important;
    margin:0 auto !important;
    position:static !important;
    left:auto !important; right:auto !important;
    transform:none !important;
    float:none !important; clear:both !important;
    text-align:left !important;
  }

  /* 画像コンテナも中央寄せ＋幅を統一 */
  body.page-template-page-interview-1 .card-01 .overlay-image-container,
  body.page-template-page-interview-1 .card-02 .overlay-image-container,
  body.page-template-page-interview-1 .card-03 .overlay-image-container{
    width:var(--i1-img-w) !important;
    max-width:var(--i1-img-w) !important;
    margin:0 auto !important;
    text-align:center !important;
    position:static !important;
    left:auto !important; right:auto !important;
    transform:none !important; float:none !important; clear:both !important;
  }

  /* 画像そのものの幅を統一（中央揃え） */
  body.page-template-page-interview-1 .card-01 .overlay-image-container img,
  body.page-template-page-interview-1 .card-02 .overlay-image-container img,
  body.page-template-page-interview-1 .card-03 .overlay-image-container img{
    display:block !important;
    width:100% !important;     /* ← コンテナ幅＝画像幅 */
    height:auto !important;
    margin:0 auto !important;
    object-fit:contain !important;
    object-position:center center !important;
  }

  /* 03だけ左に寄る・はみ出す挙動を完全に打ち消し */
  body.page-template-page-interview-1 .card-03 .overlay-image-container,
  body.page-template-page-interview-1 .card-03 .overlay-image-container img{
    margin-left:auto !important;
    margin-right:auto !important;
    left:auto !important; right:auto !important;
    transform:none !important; translate:0 !important;
  }
}

/* =======================================================
   interview-1（タブレット 768?1368px）
   01だけ確実に「上：白ボックス／下：画像」＋同幅で拡大
   ======================================================= */
@media (min-width:768px) and (max-width:1368px){

  /* まず 01 カードを“縦並び”に強制 */
  body.page-template-page-interview-1 main#primary .interview-block .interview-card-overlay.card-01{
    display:flex !important;
    flex-direction:column !important;     /* ← 上：テキスト、下：画像 */
    align-items:center !important;
    justify-content:flex-start !important;
    row-gap:24px !important;
    width:100% !important;
  }

  /* テキストボックスを先に（上）＆器を広げる */
  body.page-template-page-interview-1 main#primary .interview-block .card-01 .overlay-text-box{
    order:1 !important;
    width:min(96vw, 1120px) !important;
    max-width:none !important;
    margin:0 auto !important;
  }

  /* 画像ラッパーを後に（下）＆器を広げる */
  body.page-template-page-interview-1 main#primary .interview-block .card-01 .overlay-image-container{
    order:2 !important;
    display:block !important;
    width:min(96vw, 1120px) !important;   /* ← 02/03 と同等サイズに拡張 */
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
    transform:none !important;
  }

  /* 画像自体を横いっぱいに（SVGでも効く指定） */
  body.page-template-page-interview-1 main#primary .interview-block .card-01 .overlay-image-container img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:none !important;
  }

  /* 01だけに残っている“横並び/固定幅”の名残を完全に無効化（保険） */
  body.page-template-page-interview-1 main#primary .interview-block .card-01 .overlay-text-box,
  body.page-template-page-interview-1 main#primary .interview-block .card-01 .overlay-image-container{
    flex:0 0 auto !important;
    float:none !important;
    clear:none !important;
  }
}







/* interview-1：タブレットだけ card-01 を縦積み、画像は中央＆適正サイズ */
@media (min-width:768px) and (max-width:1368px){
  body.page-template-page-interview-1 .interview-block .card-01{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:22px !important;
  }
  body.page-template-page-interview-1 .card-01 .overlay-text-box{
    order:1 !important;
    width:min(92vw,800px) !important;
    margin:0 auto !important;
    text-align:left !important;
  }
  body.page-template-page-interview-1 .card-01 .overlay-image-container{
    order:2 !important;
    display:flex !important;
    justify-content:center !important;
    width:100% !important;
  }
  body.page-template-page-interview-1 .card-01 .overlay-image-container img{
    /* ← ここが要点：サイズ控えめ＆中央寄せ＆はみ出し防止 */
    width:min(84vw, 680px) !important;
    max-width:100% !important;
    height:auto !important;
    margin:0 auto !important;
    display:block !important;

    /* 左に飛ぶ原因を全リセット */
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important;

    /* 見た目の保険 */
    border-radius:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
  }

  /* まれに親側のoverflowで切れる対策 */
  body.page-template-page-interview-1 .interview-block{ overflow:visible !important; }
}










/* ===== Interview-1（タブレット）：番号01/02/03を中央寄せ＋拡大 ===== */
@media (min-width:768px) and (max-width:1368px){

  /* 01はテキスト箱の中、02/03は箱の外なので両方に効かせる */
  body.page-template-page-interview-1 .interview-card-overlay .overlay-text-box .interview-number,
  body.page-template-page-interview-1 .interview-card-overlay > .interview-number{
    position:relative !important;   /* どこかでabsoluteなら解除 */
    top:auto !important; left:auto !important; right:auto !important;
    transform:none !important;

    display:block !important;
    width:100% !important;
    text-align:center !important;   /* ← 中央寄せ */
    margin:0 auto 12px !important;

    font-size:clamp(28px, 3.2vw, 42px) !important; /* 少し大きく */
    line-height:1.05 !important;
    font-weight:700 !important;
    color:#1a4eac !important;       /* 必要ならそのまま */
  }
}








/* =======================================================
   interview-1 専用（大きめタブレット 1024?1368px）
   01〜03 白ボックスの“実質の縦幅”を圧縮
   ※ パディング／見出し・段落のマージン／行間を詰める
   ======================================================= */
@media (min-width:1024px) and (max-width:1368px){
  /* ボックス自体の余白を縮める（最優先で上書き） */
  .page-template-page-interview-1 .interview-block .overlay-text-box{
    padding: 14px 18px !important;
    min-height: auto !important;
    row-gap: 8px !important;
  }

  /* 見出し・サブ見出しの下マージンを圧縮 */
  .page-template-page-interview-1 .interview-block .overlay-text-box .interview-question{
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
  }
  .page-template-page-interview-1 .interview-block .overlay-text-box .interview-subtitle{
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
  }

  /* 段落の上下マージンを詰める（テキストブロック内） */
  .page-template-page-interview-1 .interview-block .overlay-text-box p{
    margin: 6px 0 !important;
    line-height: 1.55 !important; /* 読みやすさ確保しつつ圧縮 */
  }

  /* 質問番号の余白も少し詰める（必要なら） */
  .page-template-page-interview-1 .interview-block .overlay-text-box .interview-number{
    margin-bottom: 4px !important;
  }
}










/* ===== interview-1：1024?1368pxだけ 白ボックスの縦中央寄せ & 高さ微調整 ===== */
@media (min-width:1024px) and (max-width:1368px){
  /* まず全カードの白ボックスを縦中央寄せに */
  body.page-template-page-interview-1 .interview-block .interview-card-overlay .overlay-text-box{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;   /* ← 縦中央 */
    text-align:left !important;
    background:transparent !important;   /* ← 黄色テストの撤去 */
  }

  /* 01 は高さそのまま寄せる（やや短め） */
  body.page-template-page-interview-1 .interview-block .card-01 .overlay-text-box{
    min-height: clamp(240px, 26vh, 320px) !important;
    padding: 16px 22px !important;
  }

  /* 02・03 は少しだけ“長め”にして、同じく縦中央 */
  body.page-template-page-interview-1 .interview-block .card-02 .overlay-text-box,
  body.page-template-page-interview-1 .interview-block .card-03 .overlay-text-box{
    min-height: clamp(280px, 30vh, 380px) !important;
    padding: 18px 24px !important;
  }

  /* 中の要素の余白を詰め気味に（下寄り感の解消） */
  body.page-template-page-interview-1 .interview-block .interview-card-overlay .overlay-text-box h3,
  body.page-template-page-interview-1 .interview-block .interview-card-overlay .overlay-text-box .interview-subtitle,
  body.page-template-page-interview-1 .interview-block .interview-card-overlay .overlay-text-box p{
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    line-height: 1.6 !important;
  }
}


// Interview-1（大きめタブレットのみ）：01の白ボックス内テキストを確実に縦中央に
add_action('wp_footer', function(){ ?>
<script>
(function(){
  if (!/\/interview-1(\/|$)/.test(location.pathname)) return;
  if (!matchMedia('(min-width:1024px) and (max-width:1368px)').matches) return;

  const box = document.querySelector(
    '.interview-block .card-01 .overlay-text-box01, .interview-block .card-01 .overlay-text-box'
  );
  if (!box || box.dataset.i1Vcenter === '1') return;
  box.dataset.i1Vcenter = '1';

  // 既存の上下余白で下寄りに見えるのを防ぐため、内側を包むラッパーを作成
  const wrap = document.createElement('div');
  wrap.className = 'i1-vcenter-wrap';
  // 子ノードをラップ内に移動
  while (box.firstChild) wrap.appendChild(box.firstChild);
  box.appendChild(wrap);

  // 親ボックスを縦中央用のフレックスに
  Object.assign(box.style, {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'flex-start',
    minHeight: 'clamp(260px, 28vh, 360px)',
    padding: '16px 24px',
    textAlign: 'left'
  });
  // ラッパーは横いっぱい
  Object.assign(wrap.style, {
    width: '100%',
    display: 'block'
  });

  // 下寄り見えの原因になりがちな上下マージンを均一化
  wrap.querySelectorAll(':scope > *').forEach(el=>{
    el.style.marginTop    = '0.5em';
    el.style.marginBottom = '0.5em';
  });
  const last = wrap.lastElementChild;
  if (last) last.style.marginBottom = '0';

})();
</script>
<?php }, 99998);









/* ===== Interview-1：大きめタブレット 01数字を強制的に動く状態に戻す ===== */
@media (min-width:1024px) and (max-width:1368px){
  body.page-template-page-interview-1 .interview-block .card-01 .interview-number.number1{
    position: relative !important;       /* 絶対配置や固定配置を無効化 */
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 auto !important;
    display: block !important;
    text-align: center !important;
  }
}

@media (min-width:1024px) and (max-width:1368px){
  body.page-template-page-interview-1 .interview-block .card-01 .interview-number.number1{
    transform: translateY(-30px) !important; /* 上へ移動。値は調整してOK */
  }
}

/* Interview-1｜タブレット共通（768?1368px）
   画像と数字の“間”だけを広げる：数字を少し下へ */
@media (min-width:768px) and (max-width:1368px){
  .page-template-page-interview-1 .interview-block .card-01 .interview-number,
  .page-template-page-interview-1 .interview-block .card-02 .interview-number,
  .page-template-page-interview-1 .interview-block .card-03 .interview-number{
    transform: translateY(80px) !important; /* ← お好みで 16〜32px に調整可 */
  }
}

/* Career：カード下の余白を広げる（768〜1368pxタブレット帯）*/
@media (min-width:768px) and (max-width:1368px){
  .page-template-page-interview-1 .career-wrapper{
    margin-bottom: 100px !important; /* ← お好みで 60〜120px 調整可 */
  }
}