/* ================== 基本 ================== */
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ text-decoration:none !important; }
a *{ text-decoration:none !important; }
body{ font-family:'Helvetica Neue','Segoe UI',sans-serif; margin:0; color:#222; background:#fffef8; }

/* このページだけに効かせるためのスコープ */
.interview-page * { box-sizing:border-box; }

/* ===== ヘッダー高さぶん余白（WPヘッダー依存） ===== */
.about-text{ margin-top:100px; }
@media (max-width:768px){ .about-text{ margin-top:60px; }}

/* ================== 見出し（英/日を個別に動かす） ================== */
.about-text{
  position:relative;
  width:100%;
  padding: 60px clamp(16px,4vw,40px);
  border-radius:0 20px 20px 0;
  color:#000;
  z-index:1;
}
.about-en{
  position:relative; /* ←個別移動したいときは下2行をいじるだけ */
  top: var(--en-top, 0px);
  left: var(--en-left, 0px);
  font-size:1.1rem; font-weight:700; color:#0073e6; margin:0 0 -30px 0;
}
.about-ja, .about-text h2{
  position:relative;
  top: var(--ja-top, 0px);
  left: var(--ja-left, 0px);
  font-size:2rem; font-weight:700; margin:0 0 5px 0;
}
@media (max-width:768px){
  .about-en{ font-size:.9rem; margin-bottom:-20px; }
  .about-ja{ font-size:1.4rem; }
}

/* ================== レイアウト ================== */
.container{
  width:100%;           /* ← 右側の変な余白の元を除去 */
  max-width:none;
  padding: 0 clamp(16px,4vw,48px) clamp(16px,4vw,48px);
  display:flex; gap: clamp(16px, 3vw, 32px);
}

/* サイドバー */
.sidebar{ width: 200px; flex:0 0 200px; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{
  padding:.7rem 1rem; border-radius:20px; cursor:pointer; margin-bottom:.4rem;
  color:#333; transition:background .3s ease; background:#fff; border:1px solid #ccc;
}
.sidebar li.active{ background:#e0ecff; color:#0073e6; font-weight:700; border-color:#0073e6; }
.sidebar li:hover{ background:#edf3ff; }

/* ================== カード一覧（グリッドで幅いっぱいに） ================== */
.news-list{
  flex:1 1 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* ← 画面幅いっぱい */
  gap: clamp(16px,2.5vw,32px);
  align-items: stretch;
  margin-left: 0; /* 余白削除 */
  /* GeneratePress等が勝手に付ける境界線の保険 */
  border-top: none !important;
}
.interview-page .news-list::before,
.interview-page .news-list::after{ display:none !important; content:none !important; border:0 !important; }

.news-card{
  background:#ffffffcc; backdrop-filter:blur(4px);
  border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,0.06);
  padding:1rem; display:flex; flex-direction:column; gap:.5rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.news-card:hover{ box-shadow:0 0 20px rgba(255,255,255,.6),0 4px 16px rgba(0,0,0,.1); transform:translateY(-4px); }
.news-card img{ width:100%; border-radius:6px; object-fit:cover; }
.news-card .label{ font-size:.75rem; color:#0073e6; font-weight:700; }
.news-card .date{ font-size:.75rem; color:#999; float:right; }
.news-card h2{ font-size:1rem; margin:.3rem 0 0; color:#222; line-height:1.4; }
.news-card p{ font-size:.9rem; color:#444; line-height:1.4; }

/* ================== フッターまわり（カードとの間隔） ================== */
.interview-page .news-list{ 
  margin-bottom: clamp(48px, 8vw, 96px); /* 間隔を確保 */
}

/* ← ここを書き換える */
.site-footer{
  position: relative;
  display: block;
  width: 100vw !important;   /* ブラウザ幅いっぱいに */
  max-width: 100vw !important;
  left: 50%;                 /* 中央基準にして */
  margin-left: -50vw;        /* 左にずらすことで余白ゼロに */
  clear: both;

  background:#0B1E32;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(#0B1E32, #0B1E32);
  background-repeat: repeat;
  background-size: 20px 20px, cover;

  padding: 60px 20px 20px;
  color:#fff;
  margin-top:0; /* 上の間隔は.news-listで管理 */
}

.footer-top{ text-align:center; margin-bottom:40px; }
.footer-top h2{ font-size:28px; margin:0 0 10px; }
.footer-top p{ margin:6px 0; font-size:15px; line-height:1.6; }
.footer-main{ display:flex; flex-wrap:wrap; justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); padding:40px 0; }
.footer-logo{ max-width:280px; }
.footer-logo img{ width:160px; margin-bottom:10px; }
.footer-logo p{ font-size:14px; margin:6px 0; }
.footer-icon-group{ margin-top:10px; }
.footer-icon-group a{ display:inline-block; margin-right:12px; }
.footer-icon-group img{ width:24px; height:24px; filter:brightness(0) invert(1); }
.footer-nav{ display:flex; gap:70px; }
.footer-nav h3{ font-size:16px; margin:0 0 10px; }
.footer-nav ul{ list-style:none; margin:0; padding:0; }
.footer-nav li{ font-size:14px; margin-bottom:6px; cursor:pointer; }
.footer-nav a{ color:#fff; border-bottom:1px solid transparent; transition:border-bottom .2s ease; }
.footer-nav a:hover{ border-bottom:1px solid #fff; }
.footer-bottom{ text-align:center; margin-top:130px; font-size:13px; opacity:.7; }

/* ================== スマホ最適化 ================== */
@media (max-width: 1024px){
  .sidebar{ width:180px; flex-basis:180px; }
}
@media (max-width: 768px){
  .container{ flex-direction:column; padding: 0 12px 24px; }
  .sidebar{ width:100%; flex:0 0 auto; margin-bottom:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .sidebar ul{ display:flex; gap:12px; white-space:nowrap; }
  .sidebar li{ flex-shrink:0; min-width:fit-content; }
  .about-text{ padding:40px 16px 24px; }
  .interview-page .news-list{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
  .footer-nav{ flex-wrap:nowrap; justify-content:space-between; gap:8px; }
  .footer-nav div{ flex:1; min-width:100px; margin-right:12px; }
  .footer-nav h3{ font-size:13px; margin-bottom:4px; white-space:nowrap; }
  .footer-nav li{ font-size:11px; white-space:nowrap; margin-bottom:2px; }
  .footer-main{ padding:12px; gap:12px; }
  .footer-logo p{ font-size:11px; }
  .site-footer{ font-size:11px; }
}

/* ===== 念のため：テーマが勝手に付ける横線を殺す（GeneratePress対策） ===== */
.interview-page .entry-content,
.interview-page .inside-article,
.interview-page .gb-container,
.interview-page .container,
.interview-page .news-list{
  border:0 !important;
  box-shadow:none !important;
}
.interview-page hr{ display:none !important; }







/* ===== MONDAY: Interviewページだけ中央寄せを復活 ===== */
/* 既存の .container 全幅指定を打ち消して、本文幅(1200px)でセンターに戻す */
.interview-page .container{
  /* 本文と同じルールに戻す（あなたのCSSにあったやつ） */
  width: min(100% - 2*var(--gutter, 24px), var(--container, 1200px)) !important;
  margin-inline: auto !important;   /* ← 中央寄せの肝 */
  padding-left: var(--gutter, 24px) !important;
  padding-right: var(--gutter, 24px) !important;

  /* もともとのレイアウトは維持 */
  display: flex !important;
  gap: clamp(16px, 3vw, 32px) !important;
}

/* 念のため、外側の .site-content/.site-main も中央揃えに揃える（テーマ干渉対策） */
.interview-page .site-content,
.interview-page .site-main{
  max-width: none;                   /* ここは制限しない */
  margin-inline: auto !important;
}

/* フッターは背景だけ全幅、中身は本文幅（既に入れてる人はそのままでOK） */
.interview-page .site-footer{
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}
.interview-page .site-footer .footer-top,
.interview-page .site-footer .footer-main,
.interview-page .site-footer .footer-bottom{
  max-width: var(--container, 1200px) !important;
  margin-inline: auto !important;
  padding-left: var(--gutter, 24px) !important;
  padding-right: var(--gutter, 24px) !important;
}






/* === カード上の横線を削除 === */
body.page-template-page-interview-php .news-list::before,
body.page-template-page-interview-php .news-list::after,
body.page-template-page-interview-php .news-card::before,
body.page-template-page-interview-php .news-card::after,
body.page-template-page-interview-php hr {
  display: none !important;
  content: none !important;
  border: 0 !important;
}





/* === 見出しの個別移動用 === */
body.page-template-page-interview-php .about-en {
  position: relative;
  margin-top: var(--en-top, 50px) !important;    /* ← ここを調整 */
  left: var(--en-left, 0px);  /* ← ここを調整 */
}
body.page-template-page-interview-php .about-ja {
  position: relative;
  margin-top: var(--ja-top, 50px);    /* ← ここを調整 */
  left: var(--ja-left, 50px);  /* ← ここを調整 */
}




/* === フッター配置調整 === */

/* ロゴは左揃えに */
body.page-template-page-interview-php .footer-logo {
  margin-left: 0 !important;
  text-align: left !important;
}

/* コピーライトは右揃え */
body.page-template-page-interview-php .footer-bottom {
  text-align: right !important;
  margin-top: 40px !important; /* 上の余白は控えめに */
}

/* 会社案内ブロックだけ少し右に */
body.page-template-page-interview-php .footer-nav > div:first-child {
  margin-left: 40px !important; /* ← 数字を好みで調整 */
}


/* === 英語タイトルを上に移動 === */
body.page-template-page-interview-php .about-en {
  position: relative;
  top: -20px;   /* ← 数字を大きくするとさらに上へ */
}











/* ========================================== *//* ========================================== *//* ========================================== *//* ========================================== */