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

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

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

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

/* スマホ時のロゴをきれいに調整 */
@media (max-width: 599px) {
    .site-header-logo img {
        height: 40px !important;
        width: auto !important;
    }
}

/* ヘッダーロゴの縦横比＆高さを固定してCLS対策 */
.site-header-logo img {
  /* 画像の元サイズ 539 x 114 の比率を指定 */
  aspect-ratio: 539 / 114;
  width: auto;
  height: auto;
}

/* PCサイズでのヘッダーの最小高さ（ロゴ114pxぶん） */
.site-header-logo {
  min-height: 114px;
}

/* モバイル（幅599px以下）のときは高さ40pxで表示 */
@media (max-width: 599px) {
  .site-header-logo img {
    height: 40px !important;
    width: auto !important;
  }
  .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;
}

/* 画像とCLS対策 */
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;
}

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

/* 投稿ページの上下余白を無しにする */
.single-post .site-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 求人詳細コンテナ */
.job-detail-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 8px;
  box-sizing: border-box;
}

/* 求人タイトル */
.job-detail-container .job-header h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  margin: 18px auto 8px;
  background: linear-gradient(135deg, #a3c483, #8bb06f);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  word-wrap: break-word;
}

/* 求人番号バッジ */
.job-number {
  display: inline-block;
  font-weight: 700;
  margin-top: 6px;
  background: #a3c483;
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

/* ジョブカード共通 */
.job-card {
  background: #fff;
  border-radius: 10px;
  padding: 16px 14px;
  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: 1rem;
  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.95rem;
}

.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: 12px 24px;
  background: #a3c483;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.apply-btn:hover {
  background: #8bb06f;
  transform: translateY(-1px);
}

/* ===============================
   固定ページ用レイアウト
   =============================== */

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

.page .page-container p,
.page .page-container ul,
.page .page-container ol {
  background: #fff;
  padding: 8px 10px 8px 16px;
  border-radius: 4px;
  margin: 8px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
  line-height: 1.7;
}

.page .page-container ul li,
.page .page-container ol li {
  margin-bottom: 4px;
  list-style-position: inside;
}

/* 固定ページ見出し */
.page .page-container h1,
.page .page-container h2,
.page .job-detail-container h2 {
  color: #fff;
  padding: 8px;
  text-align: center;
  margin: 10px 0;
  line-height: 1.3;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.page .page-container h1 {
  background: linear-gradient(135deg, #7fb77e, #a3c483);
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.page .page-container h2,
.page .job-detail-container h2 {
  background: #a3c483;
  border-radius: 4px;
  font-size: 1rem;
}

/* ===============================
   FAQ
   =============================== */

details {
  background: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 0.95rem;
}

details summary {
  font-weight: 700;
  cursor: pointer;
  padding: 8px 0;
  color: #333;
}

details p {
  margin: 8px 0 0;
  line-height: 1.7;
}

/* ===============================
   Google AdSense枠と iframe
   =============================== */

.ad-slot {
  margin: 24px 0;
  text-align: center;
  min-height: 280px; /* ローディング前の高さ確保 */
  background: #f8f8f8;
  border-radius: 8px;
}

.job-card iframe {
  display: block;
  width: 100%;
  min-height: 250px;
  border-radius: 12px;
  border: 0;
  background: transparent;
}

/* ジョブカード・広告間の余白調整 */
.job-card + .ad-slot {
  margin-top: 12px;
  margin-bottom: 12px;
}

/* ===============================
   フッターブロック
   =============================== */

.ft-block {
  margin-bottom: 25px;
}

/* 見出し（プロ仕様デザイン） */
.ft-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #444;
  letter-spacing: 0.03em;
}

/* リスト */
.ft-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ft-list li {
  margin: 6px 0;
}

.ft-list li a {
  color: #555;
  font-size: 0.9rem;
  text-decoration: none;
  padding: 3px 0;
  display: inline-block;
  transition: all 0.2s ease;
}

/* ホバー */
.ft-list li a:hover {
  color: #000;
  transform: translateX(3px);
}

/* ===============================
   レスポンシブ調整
   =============================== */

/* モバイル用: 横の余白をギリギリまで減らす */
@media (max-width: 767px) {
  .job-card,
  .ad-slot {
    margin-left: 0;
    margin-right: 0;
  }

  .job-detail-container .job-header h1 {
    font-size: 1.2rem;
  }

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

/* タブレット〜PC */
@media (min-width: 768px) {
  .job-detail-container .job-header h1 {
    font-size: 1.6rem;
    padding: 12px 24px;
  }

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

  .apply-btn {
    font-size: 1.05rem;
    padding: 14px 32px;
  }

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

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

/* PCワイド */
@media (min-width: 1024px) {
  .ad-slot {
    min-height: 300px;
  }
}

/* 2列レイアウト（スマホは1列） */
.link-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin-top: 6px;
}

/* 各項目を白背景カードに */
.link-grid > div{
  background: #ffffff;
  padding: 8px 10px;
  border-radius: 6px;
  color: #2d3a27;
}

/* スマホでは1列 */
@media (max-width: 600px){
  .link-grid{
    grid-template-columns: 1fr;
  }
}

/* リンク見た目統一 */
.link-grid a{
  color:#3c7a2c;
  font-weight:600;
  text-decoration: underline;
}