/*
Theme Name: My Child Theme
Template: lightning
Description: CLS対策済みのシンプル子テーマ
*/

/* =========================================================
   1) 不要要素非表示
========================================================= */
.footer .copySection p:nth-child(2),
.site-footer-copyright p:nth-child(2),
.page-header,
.breadcrumb,
.post .entry-title,
.entry-meta-item-author,
.entry-meta-item-updated,
.entry-meta-item-date,
.nav-below,
.next-prev {
  display: none !important;
}

/* =========================================================
   2) 投稿ページ：上/下の余白を極力カット（単一箇所に集約）
========================================================= */
body.single-post .site-body,
body.single-post .site-body-container,
body.single-post .site-content,
body.single-post .site-body-bottom {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* page-header は全ページで非表示にしているが念のため */
body.single-post .page-header {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   3) ヘッダーロゴ（PC/スマホ共通：横伸び防止 + CLS抑制）
========================================================= */
.site-header .site-logo img,
.site-header .site-header-logo img,
.site-header .navbar-brand img {
  width: auto !important;        /* 横に引き伸ばされるのを防ぐ */
  max-width: 100% !important;    /* はみ出し防止 */
  height: auto !important;
  display: block;
  object-fit: contain;
}

/* ロゴのリンク領域が横に伸びすぎないように */
.site-header .site-logo a,
.site-header .site-header-logo a,
.site-header .navbar-brand {
  display: inline-block !important;
  width: auto !important;
}

/* PC */
@media (min-width: 768px) {
  .site-header .site-logo img,
  .site-header .site-header-logo img,
  .site-header .navbar-brand img {
    max-height: 64px;
  }
}

/* スマホ */
@media (max-width: 767px) {
  .site-header .site-logo img,
  .site-header .site-header-logo img,
  .site-header .navbar-brand img {
    max-height: 48px;
  }

  /* ヘッダー高さの下限（ガタつき/CLS抑制） */
  .site-header {
    min-height: 56px;
  }
}

/* （保険）ロゴ領域がflexで伸びるテーマ設定がある場合に抑制 */
.site-header .site-header-logo,
.site-header .site-logo,
.site-header .navbar-header {
  flex: 0 0 auto !important;
}

/* =========================================================
   4) スマホ：本文左右余白（まとめ）
========================================================= */
@media (max-width: 767px) {
  .site-body-container.container,
  .main-section.container,
  .entry-body {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  .job-heading,
  .wp-block-flexible-table-block-table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0;
  }
}

/* =========================================================
   5) 求人ページ本体デザイン
========================================================= */
.entry-body .job-post {
  max-width: 1200px;
  margin: 10px auto 20px !important; /* 上10 / 下20 */
  padding: 10px 20px 20px;
  background: #fff;
  border: 1px solid #e0a96d;
  border-radius: 12px;
  font-family: "Helvetica Neue", sans-serif;
  color: #333;
}

.entry-body .job-post + .job-post {
  margin-top: 20px !important;
}

.job-title {
  text-align: center;
  font-size: 1.4em;
  color: #d2691e;
  margin-bottom: 20px;
  min-height: 50px;
}

.job-summary {
  background: #fff0e0;
  padding: 15px 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* =========================================================
   6) 求人テーブル（PC）
========================================================= */
.job-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.job-table th,
.job-table td {
  padding: 10px;
  min-height: 40px;
  border: 1px solid #eee;
}

.job-table th {
  background: #ffcc99;
  color: #222;
}

.job-table td {
  background: #fff8f2;
}

.job-table td:first-child {
  width: 250px;
  font-weight: bold;
  vertical-align: top;
  word-break: break-word;
  background: #f7f7f7; /* 左側項目名セル */
}

.job-table td:last-child {
  background: #ffffff;
  word-break: break-word;
}

/* =========================================================
   7) ボタン
========================================================= */
.job-button-wrap {
  text-align: center;
  margin-top: 30px;
  min-height: 50px;
}

.job-button {
  background: #ff7f50;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
}

.job-button:hover {
  background: #ff6347;
}

/* =========================================================
   8) スマホ向け：求人テーブルを縦積み + 余白最適化（重複を統合）
========================================================= */
@media (max-width: 767px) {
  .job-table,
  .job-table tbody,
  .job-table tr,
  .job-table th,
  .job-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .job-table tr {
    margin-bottom: 12px;
  }

  .job-table th {
    font-weight: bold;
  }

  .job-table td:first-child {
    width: 100%;
  }

  .job-table td,
  .job-table th {
    padding: 5px 3px; /* 左右を詰める（統合済み） */
    font-size: 1.02em;
    min-height: 30px;
  }

  .job-title {
    font-size: 1.25em !important;
  }

  /* スマホ時は左右ギリギリに寄せる（統合済み） */
@media (max-width: 767px) {
  .entry-body .job-post {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

  .job-summary {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .job-post .job-table {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
}

/* =========================================================
   9) AdSense：求人詳細（投稿）でタイトル上の自動広告を除外
========================================================= */

/* タイトル自体の上余白を念押しで0 */
body.single-post .entry-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===============================
   ヘッダーレイアウト調整（PC）
=============================== */
@media (min-width: 768px) {

  /* ヘッダー全体を左右にきれいに分離 */
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* ロゴ側：必要最小限の幅だけ使う */
  .site-header .site-header-logo,
  .site-header .site-logo {
    flex: 0 0 auto !important;
    max-width: max-content;
  }

  /* ナビ側：残り幅 */
  .site-header .global-nav {
    flex: 1 1 auto;
    text-align: right;
  }
}

/* AdSense枠：上下余白と安定表示（求人ページ） */
.ad-slot-job-top,
.ad-slot-job-bottom {
  margin: 16px 0 !important;
  min-height: 120px; /* 広告の高さ確保（CLS軽減） */
}

/* スマホは少し余白を詰める */
@media (max-width: 767px) {
  .ad-slot-job-top,
  .ad-slot-job-bottom {
    margin: 12px 0 !important;
    min-height: 100px;
  }
}

/* =========================================================
   10) 求人タイトル（job-title）文字サイズ最終調整
   - 基本：全端末 16px（現状維持）
   - PC：768px以上だけ上書きで少し大きく
   ※ このブロックは style.css の一番最後に置く
========================================================= */

/* 全端末共通（現状維持：16px） */
.entry-body h2.job-title,
.entry-content h2.job-title,
h2.job-title {
  font-size: 16px !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
}

/* PCだけ上書き（より強いセレクタ + 最後に置いて確実に勝たせる） */
@media (min-width: 768px) {
  body .entry-body h2.job-title,
  body .entry-content h2.job-title,
  body h2.job-title {
    font-size: 20px !important; /* ←PCだけ大きく */
  }
}

/* 求人詳細のメタ情報を並び替え */
.entry-footer{
  display: flex;
  flex-direction: column;
}

/* 並び順（小さいほど上） */
.entry-footer .entry-meta-data-list--category{ order: 1; }
.entry-footer .entry-meta-data-list--license{ order: 2; }
.entry-footer .entry-meta-data-list--prefectures{ order: 3; }
.entry-footer .entry-meta-data-list--city{ order: 4; }
.entry-footer .entry-meta-data-list--employmenttype{ order: 5; }
.entry-footer .entry-meta-data-list--post_tag{ order: 6; }
.entry-footer .entry-meta-data-list--periodtype{ order: 7; }