/*
Theme Name:  STORK19 吉久カスタム
Template:    jstork19
Version:     1.0.0
Description: 株式会社吉久 緑ベース全ページカスタム子テーマ
*/

/* ============================================================
   0. カラー変数
   ============================================================ */
:root {
  --g-dark:    #1e3a2f;   /* ヘッダー・フッター背景 */
  --g-mid:     #2d5a3d;   /* ボタンhover・CTAバー */
  --g-light:   #3d7a52;   /* リンク色 */
  --g-accent:  #5a9e6f;   /* アクセント（ボタン・ボーダー等） */
  --g-pale:    #e8f2ec;   /* テーブルth・引用背景 */
  --g-paler:   #f2f7f4;   /* セクション薄背景 */
  --ink:       #1a1e1c;
  --ink2:      #3a4040;
  --ink3:      #6b7370;
}

/* ============================================================
   1. Google Fonts 読み込み
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ink);
}

/* ============================================================
   2. ヘッダー
   ============================================================ */
#header,
.header-inner,
.l-header,
.site-header {
  background-color: var(--g-dark) !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* ロゴ（サイズ調整のみ・画像はそのまま） */
.header-logo img,
.site-logo img,
#header img.logo {
  max-height: 46px !important;
  width: auto !important;
}

/* ナビリンク */
#gnav a,
#gnav li a,
.global-nav a,
.l-header__nav a {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: background 0.2s, color 0.2s;
}
#gnav a:hover,
.global-nav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

/* ドロップダウン背景 */
#gnav .sub-menu,
.global-nav .sub-menu {
  background: var(--g-mid) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
}

/* スマホ ハンバーガー */
#js-mobile-menu span,
.hamburger span {
  background-color: #fff !important;
}

/* スマホ開いたときのナビ背景 */
#sp-menu,
.sp-nav {
  background: var(--g-mid) !important;
}
#sp-menu a,
.sp-nav a {
  color: rgba(255,255,255,0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ============================================================
   3. サイト全体のリンク・テキスト
   ============================================================ */
a {
  color: var(--g-light);
}
a:hover {
  color: var(--g-mid);
  text-decoration: none;
}

/* ============================================================
   4. パンくずリスト
   ============================================================ */
#breadcrumb,
.breadcrumb,
.p-breadcrumb {
  background-color: var(--g-paler) !important;
  border: none !important;
  padding: 10px 24px;
  font-size: 12px;
  color: var(--ink3);
}
#breadcrumb a,
.breadcrumb a {
  color: var(--g-accent) !important;
}

/* ============================================================
   5. ページタイトル（各ページ上部の大見出し）
   ============================================================ */
.entry-title,
.page-title,
h1.title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 300;
  color: var(--g-dark);
  letter-spacing: 0.08em;
  border-left: 4px solid var(--g-accent);
  padding-left: 16px;
  margin-bottom: 32px;
}

/* ============================================================
   6. 本文の見出し
   ============================================================ */
.entry-content h2,
.page-content h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--g-dark);
  border-left: 4px solid var(--g-accent);
  border-bottom: none !important;
  background: none !important;
  padding: 4px 0 4px 14px !important;
  margin: 2.4em 0 1em;
  letter-spacing: 0.06em;
}

.entry-content h3,
.page-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--g-mid);
  border-bottom: 1px solid var(--g-pale);
  padding-bottom: 7px;
  margin: 2em 0 0.8em;
  letter-spacing: 0.04em;
  background: none !important;
}

/* ============================================================
   7. テーブル（会社概要・製品仕様等）
   ============================================================ */
.entry-content table,
.page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.entry-content table th,
.page-content table th {
  background-color: var(--g-pale) !important;
  color: var(--g-dark) !important;
  font-weight: 500;
  padding: 13px 16px;
  border: 1px solid #c5d8cc !important;
  letter-spacing: 0.04em;
  width: 180px;
  vertical-align: top;
}
.entry-content table td,
.page-content table td {
  padding: 13px 16px;
  border: 1px solid #c5d8cc !important;
  color: var(--ink2);
  vertical-align: top;
  line-height: 1.8;
}
.entry-content table tr:nth-child(even) td {
  background-color: #fafcfa;
}

/* ============================================================
   8. ボタン
   ============================================================ */
.btn,
.c-btn,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  background-color: var(--g-accent) !important;
  border-color:     var(--g-accent) !important;
  color: #fff !important;
  border-radius: 2px !important;
  letter-spacing: 0.08em;
  transition: background 0.2s, border-color 0.2s;
  padding: 12px 32px !important;
}
.btn:hover,
.c-btn:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--g-mid) !important;
  border-color:     var(--g-mid) !important;
}

/* ============================================================
   9. トップページ：4枚カードグリッド
   ============================================================ */
.top-link-list,
.p-top-links {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 4px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.top-link-list li,
.p-top-links li {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
}

/* 画像 */
.top-link-list li img,
.p-top-links li img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  filter: saturate(0.65) brightness(0.72);
  transition: filter 0.4s, transform 0.5s;
}
.top-link-list li a:hover img,
.p-top-links li a:hover img {
  filter: saturate(0.45) brightness(0.52);
  transform: scale(1.04);
}

/* カードの緑オーバーレイ */
.top-link-list li a,
.p-top-links li a {
  display: block;
  position: relative;
  text-decoration: none !important;
}
.top-link-list li a::before,
.p-top-links li a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,58,47,0.82) 0%, transparent 55%);
  z-index: 1;
  pointer-events: none;
}

/* カードテキスト */
.top-link-list li a span,
.p-top-links li a span,
.top-link-list .item-label {
  position: absolute !important;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  font-size: 17px !important;
  font-family: 'Noto Serif JP', serif;
  color: #fff !important;
  letter-spacing: 0.07em;
  font-weight: 400;
}

/* ============================================================
   10. 会社案内ページ
   ============================================================ */

/* ご挨拶・経営理念ブロック */
.entry-content .philosophy-block,
.entry-content blockquote {
  border-left: 3px solid var(--g-accent);
  background: var(--g-pale);
  padding: 20px 24px;
  margin: 24px 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 15px;
  line-height: 1.9;
  color: var(--g-dark);
}

/* 経営方針リスト */
.entry-content ol li,
.entry-content ul li {
  line-height: 1.9;
  margin-bottom: 8px;
  color: var(--ink2);
  font-size: 15px;
}

/* 沿革テーブル */
.entry-content table.history-table th {
  width: 120px;
  text-align: center;
}

/* ============================================================
   11. 製品案内ページ
   ============================================================ */

/* 製品カード風レイアウト */
.entry-content .product-section {
  background: var(--g-paler);
  border: 1px solid #d0e4d8;
  padding: 28px 32px;
  margin-bottom: 24px;
}

/* 製品テーブルの画像セル */
.entry-content table td img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   12. 主要設備ページ
   ============================================================ */
.entry-content ul {
  padding-left: 0;
  list-style: none;
}
.entry-content ul li::before {
  content: '—';
  color: var(--g-accent);
  margin-right: 10px;
  font-weight: 500;
}

/* ============================================================
   13. お問い合わせページ（Contact Form 7）
   ============================================================ */
.wpcf7-form label {
  font-size: 13px;
  color: var(--ink3);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: block;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
  border: 1px solid #c5d8cc !important;
  border-radius: 2px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  font-family: 'Noto Sans JP', sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--g-accent) !important;
  box-shadow: 0 0 0 3px rgba(90,158,111,0.15) !important;
  outline: none !important;
}
.wpcf7-submit {
  background-color: var(--g-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 13px 48px !important;
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
  cursor: pointer;
  transition: background 0.2s;
  font-family: 'Noto Sans JP', sans-serif;
}
.wpcf7-submit:hover {
  background-color: var(--g-mid) !important;
}
/* 送信完了メッセージ */
.wpcf7-response-output {
  border-color: var(--g-accent) !important;
  color: var(--g-mid) !important;
  background: var(--g-pale);
  border-radius: 2px;
}

/* ============================================================
   14. フッター
   ============================================================ */
#footer,
.l-footer,
.site-footer {
  background-color: var(--g-dark) !important;
  color: rgba(255,255,255,0.55) !important;
  border-top: none !important;
}
#footer a,
.site-footer a {
  color: rgba(255,255,255,0.55) !important;
  text-decoration: none;
  transition: color 0.2s;
}
#footer a:hover,
.site-footer a:hover {
  color: #fff !important;
}

/* フッターロゴ（既存画像維持・明るさ調整） */
#footer .site-logo img,
.site-footer .logo img,
#footer img {
  opacity: 0.90;
  max-height: 40px;
  width: auto;
}

/* コピーライト */
#footer .copyright,
.footer-copyright,
.l-footer__copy {
  font-size: 11px !important;
  color: rgba(255,255,255,0.25) !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 20px;
  margin-top: 28px;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ============================================================
   15. スマートフォン対応
   ============================================================ */
@media (max-width: 768px) {
  .top-link-list,
  .p-top-links {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
  }

  .top-link-list li a span,
  .p-top-links li a span {
    font-size: 14px !important;
    bottom: 14px;
    left: 14px;
  }

  .entry-content h2,
  .page-content h2 {
    font-size: 17px;
  }

  .entry-content table th {
    width: 100px;
  }
}