/* =======================================================
   interview-4（page-id:137）専用CSS
   他ページへ影響しないよう、全て body.page-id-137 でスコープ
======================================================= */

/* ===== リセット & ベース ===== */
body.page-id-137 *{box-sizing:border-box}
body.page-id-137 a{color:inherit;text-decoration:none}

/* ===== ヘッダー（PC）左右端固定／メニュー揃え ===== */
@media (min-width:769px){
  body.page-id-137 .site-header .inside-header{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:16px 32px !important; /* ← ヘッダーの縦幅は上下の数値で */
    box-sizing:border-box !important;
  }
  body.page-id-137 .site-branding,
  body.page-id-137 .site-logo{
    flex:0 0 auto !important;
    margin:0 !important;
  }
  body.page-id-137 .custom-logo{
    height:22px !important; /* ← ロゴ高さ（18〜28pxで微調整OK） */
    width:auto !important;
    display:block !important;
  }
  body.page-id-137 .main-navigation{
    margin-left:auto !important;
    float:none !important;
    display:flex !important;
    align-items:center !important;
  }
  body.page-id-137 .main-navigation .main-nav > ul{
    display:flex !important;
    gap:32px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    white-space:nowrap !important;
  }
  body.page-id-137 .main-navigation .main-nav > ul > li > a{
    font-size:18px !important;
    line-height:1.5 !important;
    padding:0 !important;
    font-weight:500 !important;
    color:#111 !important;
  }
  /* 位置ズレ系の保険 */
  body.page-id-137 .site-header,
  body.page-id-137 .inside-header,
  body.page-id-137 .site-branding,
  body.page-id-137 .site-logo,
  body.page-id-137 .main-navigation{
    position:relative !important;
    left:auto !important; right:auto !important; transform:none !important;
  }
}

/* ===== ファーストビュー（全PC同じ見え方） ===== */
body.page-id-137 .interview-section{
  position:relative !important;
  width:100% !important;
  height:660px !important;         /* 600〜720で調整可 */
  overflow:hidden !important;
}
body.page-id-137 .interview-section .interview-bg{
  position:absolute !important;
  top:0 !important; left:50% !important;
  transform:translateX(-50%) !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  object-position:center 22% !important; /* 見せたい上下位置 */
  z-index:1 !important;
}
body.page-id-137 .interview-overlay{
  position:absolute !important;
  left:7.5% !important; top:28% !important;
  z-index:2 !important;
  color:#fff !important;
  text-shadow:0 0 6px rgba(0,0,0,.35);
}
body.page-id-137 .interview-title{
  margin:0 0 10px;
  font:italic 800 72px/1 "Poppins",sans-serif;
}
body.page-id-137 .name-jp{ margin:0 0 4px; font-size:28px; font-weight:700; }
body.page-id-137 .position{ margin:0; font-size:18px; }

/* ===== キャリア ===== */
body.page-id-137 .career-title{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:48px;color:#222;
  text-align:center;margin:120px 0 16px
}
body.page-id-137 .career-sub{
  font-size:18px;color:#666;letter-spacing:.15em;text-align:center;margin-bottom:60px
}
body.page-id-137 .career-wrapper{overflow:visible;padding:100px 20px}
body.page-id-137 .career-box-wrapper{
  display:flex;justify-content:center;gap:40px;background:#fff;padding:40px 60px;
  max-width:800px;margin:0 auto;border-radius:8px;box-shadow:0 12px 25px rgba(0,0,0,.1);
  margin-top:-130px;
}
body.page-id-137 .career-entry{display:flex;flex-direction:column;max-width:500px}
body.page-id-137 .career-entry-header{
  background:#d9f2ff;color:#007BFF;font-weight:700;text-align:center;padding:8px;border-radius:4px;margin-bottom:20px
}
body.page-id-137 .career-entry-body{display:flex;align-items:flex-start;gap:20px}
body.page-id-137 .career-icon{height:60px;flex-shrink:0}
body.page-id-137 .career-description{font-size:14px;line-height:1.6}

/* ===== インタビュー本文（01-03） ===== */
body.page-id-137 .interview-block{max-width:1200px;margin:0 auto;padding:80px 20px;background:#fff}
body.page-id-137 .interview-card-overlay{position:relative;width:100%;margin:0 auto 100px;padding:0 40px}

body.page-id-137 .overlay-image-container img{
  width:100%;max-width:590px;height:390px;object-fit:cover
}

/* 画像の基準レイアウト（01右／02左／03右） */
body.page-id-137 .image-01{position:relative;left:560px;margin-bottom:310px}
body.page-id-137 .image-02{position:relative;left:0;margin-bottom:280px}
body.page-id-137 .image-03{position:relative;left:560px;margin-bottom:170px}

/* 白ボックス（共通装飾・透明度揃え） */
body.page-id-137 .overlay-text-box{
  position:absolute;background:rgba(255,255,255,.9);
  border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.2);
  max-width:60%;z-index:2;padding:40px
}
/* 個別サイズ・位置 */
body.page-id-137 .text-01{top:90px;left:0;width:700px;min-height:500px}
body.page-id-137 .text-02{top:90px;right:-70px;width:690px;min-height:470px}
body.page-id-137 .text-03{top:90px;left:0;width:700px;min-height:460px}

/* 数字 */
body.page-id-137 .interview-number{
  position:absolute;top:-50px;left:30px;font-size:80px;color:#007BFF;
  font-weight:800;font-family:'Poppins',sans-serif;line-height:1;font-style:italic
}
body.page-id-137 .number2{left:530px}

/* テキスト */
body.page-id-137 .interview-question{font-size:22px;font-weight:700;margin:0 0 16px}
body.page-id-137 .interview-subtitle{font-size:17px;font-weight:700;color:#222;margin:0 0 25px;padding-left:18px}
body.page-id-137 .subtitle-bar{display:inline-block;width:4px;height:24px;background:#a8e063;margin-right:10px;border-radius:2px;margin-left:-15px}
body.page-id-137 .interview-answer-group p{font-size:15px;line-height:1.8;margin-bottom:.8em}

/* ===== Days ===== */
body.page-id-137 .days-wrapper{width:100%;padding:100px 20px;background:linear-gradient(135deg,#133b7a,#2059a6,#428fdb)}
body.page-id-137 .days-title,
body.page-id-137 .days-sub{color:#fff;text-align:center}
body.page-id-137 .days-container{background:#fff;border-radius:16px;padding:60px 40px;max-width:900px;margin:0 auto;box-shadow:0 12px 30px rgba(0,0,0,.15)}
body.page-id-137 .timeline{position:relative;padding-left:40px}
body.page-id-137 .timeline::before{content:"";position:absolute;top:0;bottom:0;left:30px;width:4px;border-left:4px dashed #0050b3}
body.page-id-137 .timeline-item{position:relative;margin-bottom:60px}
body.page-id-137 .time-label{position:absolute;left:-35px;top:0;background:#0050b3;color:#fff;font-weight:700;padding:8px 14px;border-radius:20px;font-size:14px;min-width:40px;text-align:center}
body.page-id-137 .timeline-content h3{font-size:19px;margin:0 0 8px 50px;font-weight:700;color:#111}
body.page-id-137 .timeline-content p{font-size:16px;line-height:1.7;margin-left:50px}

/* ===== フッター（自作だけ出す） ===== */
body.page-id-137 footer.site-footer{
  position:relative;background:#0B1E32;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(#0B1E32,#0B1E32);
  background-size:20px 20px,cover;padding:60px 20px 20px;color:#fff
}
body.page-id-137 .footer-top{text-align:center;margin-bottom:40px}
body.page-id-137 .footer-top h2{font-size:28px;margin-bottom:10px}
body.page-id-137 .footer-top p{margin:6px 0;font-size:15px;line-height:1.6}
body.page-id-137 .footer-main{display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;padding:40px 0;border:0}
body.page-id-137 .footer-main::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:1px;background:rgba(255,255,255,.22)}
body.page-id-137 .footer-logo{max-width:280px;text-align:left}
body.page-id-137 .footer-logo img{width:160px;margin-bottom:10px}
body.page-id-137 .footer-icon-group{margin-top:10px;display:flex;gap:12px;justify-content:flex-start}
body.page-id-137 .footer-icon-group img{width:24px;height:24px;filter:brightness(0) invert(1)}
body.page-id-137 .footer-nav{display:flex;gap:70px;margin-left:40px}
body.page-id-137 .footer-bottom{text-align:center;margin-top:80px;font-size:13px;opacity:.7}

/* ====== WP共通フッターを隠し“自作のみ表示” ====== */
body.page-id-137 #colophon,
body.page-id-137 .site-info,
body.page-id-137 .footer-widgets,
body.page-id-137 #page > footer.site-footer,
body.page-id-137 .site > footer.site-footer{
  display:none !important;
}
/* 自作（<main>内）の site-footer は表示 */
body.page-id-137 main footer.site-footer{ display:block !important; }

/* ===== スマホ ===== */
@media (max-width:768px){
  body.page-id-137 .interview-section{height:82vw !important}
  body.page-id-137 .interview-overlay{left:10% !important;top:50% !important;transform:translateY(-50%)}
  body.page-id-137 .interview-title{font-size:1.8rem;margin:0}
  body.page-id-137 .name-jp, body.page-id-137 .position{font-size:1rem}

  body.page-id-137 .career-box-wrapper{flex-direction:column;gap:24px;padding:20px 16px;max-width:95%;box-shadow:none;border-radius:0;margin-top:-80px}

  body.page-id-137 .interview-card-overlay{padding:0 16px}
  body.page-id-137 .overlay-text-box{position:static;max-width:100%;box-shadow:none;background:transparent;padding:0}
  body.page-id-137 .overlay-image-container{display:flex;justify-content:center}
  body.page-id-137 .overlay-image-container img{width:82%;height:auto;border-radius:8px}
  body.page-id-137 .interview-number{position:relative;top:0;left:0;margin:0 0 12px;font-size:2.3rem}

  body.page-id-137 .footer-nav{gap:30px;margin:30px 0 0 0;flex-direction:column}
  body.page-id-137 .footer-main{align-items:flex-start}
  body.page-id-137 .footer-bottom{margin-top:40px}
}










@keyframes fadeUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: none; }
}

/* デフォルトは見える */
.fade-up { opacity: 1; transform: none; }

/* JS有効時だけ非表示スタート */
html.js-enabled .fade-up { opacity: 0; transform: translateY(60px); }
html.js-enabled .fade-up.is-in { animation: fadeUp .9s ease-out forwards; }


















/********************************************************
 * interview-4（page-id:137）専用ヘッダー調整
 ********************************************************/
@media (min-width: 769px){
  /* ヘッダー本体 */
  body.page-id-137 .site-header .inside-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 22px 32px !important;   /* ← 他ページと同じくらいの縦幅（上下余白22px） */
    box-sizing: border-box !important;
  }

  /* ロゴ */
  body.page-id-137 .custom-logo {
    height: 34px !important;   /* ← 他ページより少し小さめ（30〜36pxで調整OK） */
    width: auto !important;
    max-height: none !important;
    display: block !important;
  }

  /* メニュー */
  body.page-id-137 .main-navigation {
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
  }
  body.page-id-137 .main-navigation .main-nav > ul {
    display: flex !important;
    gap: 32px !important; /* ← メニュー項目の間隔 */
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    white-space: nowrap !important;
  }
  body.page-id-137 .main-navigation .main-nav > ul > li > a {
    font-size: 18px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    font-weight: 500 !important;
    color: #111 !important;
    text-decoration: none !important;
  }

  /* 位置ズレ対策（保険） */
  body.page-id-137 .site-header,
  body.page-id-137 .inside-header,
  body.page-id-137 .site-branding,
  body.page-id-137 .site-logo,
  body.page-id-137 .main-navigation {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}

/********************************************************
 * interview-4（page-id:137）ヘッダー最優先上書き
 * ー ロゴを小さく
 * ー ヘッダー縦幅を長く
 * ー メニューはそのまま
 ********************************************************/
@media (min-width: 769px){

  /* ★ 縦幅：inside-header の上下パディングで作る */
  body.page-id-137 .site-header .inside-header{
    padding-top: 28px !important;   /* ← 好みで 24〜36 に調整 */
    padding-bottom: 28px !important;
    box-sizing: border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }

  /* ★ 他所で height 固定されている“固定ヘッダー系”を強制上書き（保険） */
  body.page-id-137 .fixed-header,
  body.page-id-137 .site-header,
  body.page-id-137 .site-header.header-wrap{
    height: auto !important;        /* height固定を無効化 */
    min-height: calc(56px + 0px) !important; /* 保険（任意） */
  }

  /* ★ ロゴ画像：どの書き方にも勝つように網羅して縮小 */
  body.page-id-137 .custom-logo,
  body.page-id-137 .site-logo img,
  body.page-id-137 .site-branding img,
  body.page-id-137 .site-logo a img,
  body.page-id-137 .inside-header img.custom-logo{
    height: 28px !important;        /* ← 小さく（24〜32で微調整OK） */
    width: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  /* 位置ズレ防止の保険（過去の left/right/transform を打ち消し） */
  body.page-id-137 .site-header,
  body.page-id-137 .inside-header,
  body.page-id-137 .site-branding,
  body.page-id-137 .site-logo,
  body.page-id-137 .main-navigation{
    position:relative !important;
    left:auto !important; right:auto !important; transform:none !important;
  }
}

/* ▼ ヘッダーが高くなった分、FV画像の被りを調整したい場合（任意） */
body.page-id-137 .interview-section{ height: 660px !important; }
body.page-id-137 .interview-section .interview-bg{
  top: 0 !important;                /* 画像自体はセクション内で中央表示のまま */
}

/********************************************************
 * interview-4（page-id:137）専用：ロゴを小さく
 ********************************************************/
@media (min-width:769px){

  /* WP/GPress の全パターンを上書き */
  body.page-id-137 .site-header .custom-logo,
  body.page-id-137 .site-header .custom-logo-link img,
  body.page-id-137 .site-header .site-logo img,
  body.page-id-137 .site-header .inside-header img.custom-logo,
  body.page-id-137 .site-branding img {
    height: 22px !important;   /* ← ここを小ささに合わせて調整（22〜30px） */
    width: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
  }
}





/********************************************************
 * interview-4（page-id:137）専用：
 * タイトル／名前／役職を “個別に” サイズ＆位置調整
 ********************************************************/
body.page-id-137 .interview-section{ position:relative !important; }
body.page-id-137 .interview-overlay{
  position:absolute !important;
  left:7.5% !important;            /* オーバーレイ全体の基準位置（必要なら調整） */
  top:28%  !important;
  z-index:3 !important;
  color:#fff !important;
  text-shadow:0 0 6px rgba(0,0,0,.35);

  /* ====== ここのカスタムプロパティを書き換えるだけでOK ====== */
  /* 文字サイズ（px / rem どちらでもOK） */
  --title-size: 72px;
  --name-size:  29px;
  --pos-size:   19px;

  /* 位置オフセット（＋で右/下、−で左/上） */
  --title-left:  0px;  --title-top:  0px;
  --name-left:   0px;  --name-top:   0px;
  --pos-left:    0px;  --pos-top:    0px;
}

/* Interview タイトル */
body.page-id-137 .interview-title,
body.page-id-137 .anim-title{            /* 念のため両クラス対応 */
  position:relative !important;
  left:var(--title-left) !important;
  top: var(--title-top)  !important;
  margin:0 0 10px !important;
  font: italic 800 var(--title-size)/1 "Poppins",sans-serif !important;
  color:#fff !important;
  white-space:nowrap !important;         /* 折り返し防止 */
}

/* 名前 */
body.page-id-137 .name-jp,
body.page-id-137 .anim-name{
  position:relative !important;
  left:var(--name-left) !important;
  top: var(--name-top)  !important;
  margin:0 0 4px !important;
  font-size:var(--name-size) !important;
  font-weight:700 !important;
  color:#fff !important;
}

/* 役職 */
body.page-id-137 .position,
body.page-id-137 .anim-pos{
  position:relative !important;
  left:var(--pos-left) !important;
  top: var(--pos-top)  !important;
  margin:0 !important;
  font-size:var(--pos-size) !important;
  color:#fff !important;
}

/* SPは少し自動で縮める（必要なければ削除OK） */
@media (max-width:768px){
  body.page-id-137 .interview-overlay{
    --title-size: 40px;
    --name-size:  18px;
    --pos-size:   14px;
  }
}

/********************************************************
 * interview-4（page-id:137）専用：
 * タイトル＋名前＋役職まとめて移動 & 間隔調整
 ********************************************************/

/* まとめて下へ移動 */
body.page-id-137 .interview-overlay {
  position: absolute !important;
  left: 7.5% !important;
  top: 35% !important;   /* ← ここを大きくすると全体が下がる */
  z-index: 3 !important;
  color: #fff !important;
  text-shadow: 0 0 6px rgba(0,0,0,.35);
}

/* 名前と役職の間隔を広げる */
body.page-id-137 .name-jp {
  margin-bottom: 4px !important;   /* ← デフォ 4〜6px → 間隔を広げたい分に変更 */
}

/********************************************************
 * interview-4（page-id:137）専用：
 * Interviewタイトルと名前の間隔調整
 ********************************************************/
body.page-id-137 .interview-title {
  margin-bottom: 40px !important;   /* ← デフォルトより大きめに。数値を増やすとさらに広がる */
}




/********************************************************
 * interview-4（page-id:137）専用：
 * 白ボックス内テキストを下へ移動
 ********************************************************/
body.page-id-137 .overlay-text-box h3,
body.page-id-137 .overlay-text-box .interview-subtitle,
body.page-id-137 .overlay-text-box .interview-answer-group {
  position: relative;
  top: 50px;   /* ← 下げたい分。pxを増やすとさらに下がる */
}

/********************************************************
 * interview-4（page-id:137）専用：
 * 回答テキストサイズを16pxに統一
 ********************************************************/
body.page-id-137 .overlay-text-box .interview-answer-group p,
body.page-id-137 .overlay-text-box .interview-answer {
  font-size: 16px !important;
  line-height: 1.8;   /* 読みやすさ用 */
}


/********************************************************
 * interview-4（page-id:137）専用：
 * Daysセクションとフッターの間に余白
 ********************************************************/
body.page-id-137 .days-wrapper {
  margin-bottom: 50px !important; /* ← 好きな数値に調整（例: 80px, 100px, 120px） */
}


/********************************************************
 * interview-4（page-id:137）専用：
 * フッターナビメニューの位置を全PCで統一
 ********************************************************/
body.page-id-137 .site-footer .footer-main {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) minmax(420px, 2fr); /* 左: ロゴ/住所, 右: ナビ */
  gap: 40px;
  align-items: flex-start;
}

body.page-id-137 .site-footer .footer-logo {
  grid-column: 1; /* 左側に固定 */
  justify-self: start;
}

body.page-id-137 .site-footer .footer-nav {
  grid-column: 2; /* 右側に固定 */
  display: flex;
  gap: 56px;
  justify-content: flex-start; /* ← 左寄せで安定 */
  margin: 0 !important;        /* marginずれ防止 */
  padding: 0 !important;
}

/* スマホ時は縦並び */
@media (max-width:768px){
  body.page-id-137 .site-footer .footer-main {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  body.page-id-137 .site-footer .footer-nav {
    flex-direction: column;
    gap: 28px;
  }
}

/* ===== interview-4（page-id:137）専用：フッターナビの位置をPC間で固定しつつ微調整 ===== */

/* 微調整つまみ：マイナスで左 / プラスで右 */
body.page-id-137{
  --footer-max: 1120px;  /* フッター内の基準幅 */
  --logo-col : 300px;    /* 左カラム（ロゴ）幅 */
  --gap-col  : 56px;     /* 左右カラムのすき間 */
  --nav-nudge: -20px;    /* ← ここを増減して“少し左/右へ”動かす */
}

/* まず既存ルールの影響をリセット（保険） */
body.page-id-137 .site-footer .footer-main{ all: unset; }
body.page-id-137 .site-footer .footer-nav{
  all: unset;
  display: block;
}

/* 基準箱：中央に固定幅を作る（PC間差を消す） */
body.page-id-137 .site-footer .footer-main{
  position: relative !important;
  max-width: var(--footer-max) !important;
  margin: 0 auto !important;
  padding: 40px 0 !important;
  display: grid !important;
  grid-template-columns: var(--logo-col) 1fr;
  column-gap: var(--gap-col);
  align-items: start;
  box-sizing: border-box;
}

/* 左：ロゴブロック（そのまま） */
body.page-id-137 .site-footer .footer-logo{
  grid-column: 1;
  justify-self: start;
}

/* 右：ナビブロックを“基準の右カラム内で”微調整して動かす */
body.page-id-137 .site-footer .footer-nav{
  grid-column: 2;
  display: flex !important;
  gap: 56px !important;
  transform: translateX(var(--nav-nudge)) !important; /* ← ここで左右微調整が効く */
  margin: 0 !important;
  box-sizing: border-box;
}

/* スマホは縦並びに戻す（既存挙動優先） */
@media (max-width: 768px){
  body.page-id-137 .site-footer .footer-main{
    display: block !important;
    padding: 30px 0 !important;
  }
  body.page-id-137 .site-footer .footer-nav{
    transform: none !important;
    display: grid !important;
    gap: 28px !important;
    margin-top: 24px !important;
  }
}




/* ===== interview-4（page-id:137）専用：フッター最終調整 ===== */
body.page-id-137{
  --footer-max: 1120px;   /* 全体の基準幅 */
  --logo-col : 280px;     /* 左カラム幅（ロゴ/住所/SNS） */
  --gap-col  : 56px;      /* 左右カラムの間隔 */
  --nav-nudge: 40px;      /* ★ナビをさらに右へ（20→40pxに変更） */
}

/* 2カラムレイアウト */
body.page-id-137 .site-footer .footer-main{
  max-width: var(--footer-max) !important;
  margin: 0 auto !important;
  padding: 40px 0 !important;
  display: grid !important;
  grid-template-columns: var(--logo-col) 1fr;
  column-gap: var(--gap-col);
  align-items: flex-start;
  box-sizing: border-box;
}

/* ロゴグループを完全に左端へ */
body.page-id-137 .site-footer .footer-logo{
  grid-column: 1;
  justify-self: start !important;
  margin: 0 !important;
  padding-left: 0 !important;
  transform: translateX(-350px) !important;  /* ← 強制的にさらに左へ */
}

/* 右ブロック：ナビをさらに右へ */
body.page-id-137 .site-footer .footer-nav{
  grid-column: 2;
  display: flex !important;
  gap: 56px !important;
  transform: translateX(var(--nav-nudge)) !important;
  margin: 0 !important;
}

/* スマホでは従来どおり縦並び */
@media (max-width: 768px){
  body.page-id-137 .site-footer .footer-main{
    display: block !important;
    padding: 30px 0 !important;
  }
  body.page-id-137 .site-footer .footer-logo{
    margin-bottom: 20px !important;
  }
  body.page-id-137 .site-footer .footer-nav{
    transform: none !important;
    flex-direction: column;
    gap: 28px;
    margin-top: 20px;
  }
}