/*
 Theme Name: Lightning Child Optimized
 Template: lightning
*/

/* ===============================
   ベース設定
   =============================== */

html {
  font-size: 15px;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

body {
  color: #333;
  line-height: 1.7;
  background-color: #f5f5f5;
  margin: 0;
}

/* ===============================
   ヘッダーロゴ（CLS対策）
   =============================== */

.site-header-logo img {
  /* 元画像 543 x 127 の比率を指定 */
  aspect-ratio: 543 / 127;
  width: auto;
  height: auto;
  max-height: 72px; /* PC時のロゴ高さを少し抑える */
  display: block;
}

/* PCサイズでヘッダー高さ＆縦中央揃え */
@media (min-width: 600px) {
  .site-header-logo {
    display: flex;
    align-items: center;
    min-height: 72px;
  }
}

/* モバイル（幅599px以下）では高さ40px固定 */
@media (max-width: 599px) {
  .site-header-logo img {
    height: 40px !important;
    width: auto !important;
    max-height: none;
  }
  .site-header-logo {
    min-height: 40px;
  }
}

/* ===============================
   共通デザイン
   =============================== */

/* 不要要素の非表示など */
.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,
.job-card ins.adsbygoogle {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.job-card img {
  aspect-ratio: 16 / 9;
  background: transparent;
}

.job-card img[loading="lazy"] {
  min-height: 200px;
}

/* ===============================
   投稿ページのレイアウト調整
   =============================== */

/* 投稿ページの上下余白を極力カット */
body.single-post .site-body,
body.single-post .site-body-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* サイト下部コンテナの余白も削除 */
.site-body-bottom {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

.job-detail-container p:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 投稿ページ上部の不要なヘッダーを削除 */
.single-post .page-header,
.single-post header.entry-header,
.single-post .entry-header {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

/* Lightning固有の親要素側の余白も削除 */
.single-post .entry-body,
.single-post .main-section,
.single-post .site-body-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ===============================
   求人詳細コンテナ
   =============================== */

.job-detail-container {
  width: 100%;
  max-width: 1200px;
  margin: 4px auto 0;
  padding: 8px 8px 16px;
  box-sizing: border-box;
}

/* ===============================
   求人タイトルブロック
   =============================== */

/* タイトルボックス（#a3c483 を少し濃くした柔らかい緑） */
.job-detail-container .job-header {
  background: #8fb775; /* 優しい深緑（決定カラー） */
  padding: 10px 18px 8px; /* 下側を薄めに */
  border-radius: 10px;
  margin: 10px 0 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* 白抜きタイトル */
.job-detail-container .job-header h1 {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* 求人番号：HTML変更なしで外側に見せる */
.job-detail-container .job-header .job-number {
  display: inline-block;
  background: #eef5ea; /* 薄いグリーンのラベル風 */
  color: #4a6a45; /* 深めの緑文字 */
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;

 /* ボックスの外へ押し出す */
  position: relative;
  top: 10px;
  margin-bottom: 5px; /* 下コンテンツとの余白 */
}

/* スマホ時の見え方調整 */
@media (max-width: 767px) {
  .job-detail-container .job-header {
    padding: 8px 14px 6px;
  }
  .job-detail-container .job-header h1 {
    font-size: 1.35rem;
  }
  .job-detail-container .job-header .job-number {
    top: 8px;
  }
}

/* PC幅でタイトル文字だけ少し大きく */
@media (min-width: 768px) {
  .job-detail-container .job-header h1 {
    font-size: 1.6rem;
  }
}

/* ===============================
   ジョブカード
   =============================== */

.job-card {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  margin: 14px 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #a3c483;
}

.job-card h2 {
  color: #4b5a3c;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
  padding-left: 8px;
  padding-top: 4px;
  border-left: 4px solid #a3c483;
}

.job-card ul,
.latest-jobs-list {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.9rem;
}

.job-card ul li,
.latest-jobs-list li {
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

/* ===============================
   ボタン
   =============================== */

.apply-section {
  text-align: center;
  margin: 24px 0;
}

.apply-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #a3c483;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 30px;
  text-decoration: none;
}

.apply-btn:hover {
  background: #8bb06f;
}

/* ===============================
   固定ページ
   =============================== */

.page-container {
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}

.page .page-container p,
.page .page-container ul,
.page .page-container ol {
  background: #fff;
  padding: 6px 8px 6px 12px;
  border-radius: 4px;
  margin: 8px 0;
  font-size: 1rem;
  line-height: 1.7;
}

.page .page-container h1 {
  font-size: 1.1rem;
}

.page .page-container h2 {
  font-size: 1rem;
}

/* ===============================
   スマホ最適化（余白ゼロ＆文字サイズ）
   =============================== */

@media (max-width: 767px) {
  /* 文字全体を少し小さく */
  html {
    font-size: 15px;
  }

  /* 画面全体の左右余白ゼロ */
  body,
  .site-body,
  .site-content,
  #main,
  .mainSection,
  .vk_main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* コンテンツ部分の左右余白もゼロ */
  .entry-content,
  .post,
  .page,
  .l-main,
  .l-container,
  .l-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* コンテナ左右もゼロに */
  .job-detail-container,
  .page-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* カード類も左右ゼロ＆角丸オフ */
  .job-card,
  .ad-slot {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0;
  }

  .job-card h2 {
    font-size: 1rem;
  }

  .job-card ul,
  .latest-jobs-list,
  .related-block ul {
    font-size: 1rem;
  }
}

/* ===============================
   PC幅調整
   =============================== */

@media (min-width: 1024px) {
  .ad-slot {
    min-height: 300px;
  }
}

/* ===============================
   7. GoogleAdSenseではできない非表示設定
   =============================== */

/* ▼ タイトル（h1.job-header 内）の直前に挿入された AdSense 自動広告を強制非表示 */
.google-auto-placed:has(+ .job-header),
ins.adsbygoogle:has(+ .job-header),
.google-auto-placed:has(+ h1),
ins.adsbygoogle:has(+ h1) {
    display: none !important;
}

/* =========================
   求人ページ：intro
========================= */
.job-intro{
  margin:12px 0 18px;
  padding:12px 14px;
  border:1px solid #e5e5e5;
  border-radius:10px;
  background:#fafafa;
  font-size:14px;
  line-height:1.7;
  color:#333;
}

/* モバイルで読みやすく */
@media (max-width: 768px){
  .job-intro{
    font-size:13px;
    padding:12px;
  }
}

/* =========================
   求人ページ：広告共通
========================= */
.job-detail-container .ad-slot{
  margin:18px 0;
}

/* 広告の上下を詰めすぎない（圧迫感軽減） */
.job-detail-container .ad-slot + .job-card{
  margin-top:22px;
}

/* =========================
   広告位置ごとの微調整
========================= */

/* 上部広告：やや控えめ */
.job-detail-container .ad-slot-top{
  margin-top:12px;
}

/* 中段広告：主役（視認性UP） */
.job-detail-container .ad-slot-middle{
  margin:22px 0 26px;
}

/* 下部広告：フッター感を出す */
.job-detail-container .ad-slot-bottom{
  margin:26px 0 20px;
}

/* =========================
   モバイル最適化
========================= */
@media (max-width: 768px){

  /* 広告間の間隔を少し広げる */
  .job-detail-container .ad-slot{
    margin:22px 0;
  }

  /* 中段広告は少し目立たせる */
  .job-detail-container .ad-slot-middle{
    margin:26px 0 30px;
  }
}

/* =========================
   固定ページ：検索ボタン（スマホで消える対策）
========================= */
.hw-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin:12px 0;
}

.hw-actions .hw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;        /* スマホで押しやすい */
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  border:1px solid transparent;
}

/* 検索ボタン */
.hw-actions .hw-btn.primary{
  background:#2e7d32;     /* しっかり濃い緑 */
  color:#fff !important;  /* 文字が白になる/ならない問題を強制解決 */
}

/* リセットボタン */
.hw-actions .hw-btn.reset{
  background:#fff;
  color:#333 !important;
  border-color:#ddd;
}

/* 検索ボタンの文字サイズをリセットと揃える */
.hw-actions .hw-btn.primary{
  font-size: 1rem;   /* リセットと同じ大きさ */
}