/*
Theme Name:  島の人事部
Theme URI:   https://shimano-jinji.com
Author:      Shimano Jinji
Description: 株式会社島の人事部 公式WordPressテーマ（Tailwind CSS / FontAwesome 使用）
Version:     3.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: shima-jinji
*/

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
               Meiryo, sans-serif;
  color: #334155;
  -webkit-font-smoothing: antialiased;
}

/* Mobile menu */
#mobile-menu { display: none; }
#mobile-menu.active { display: block; }

/* FAQ / details accordion */
details > div { display: none; }
details[open] > div { display: block; }

/* Entry content (WordPress editor) */
.entry-content h2 { font-size:1.5rem;font-weight:700;color:#0284c7;margin:2rem 0 1rem;padding:.75rem 1.25rem .75rem 1rem;background:#f0f9ff;border-left:4px solid #06b6d4;border-radius:0 .5rem .5rem 0; }
.entry-content h3 { font-size:1.25rem;font-weight:700;color:#0f172a;margin:1.75rem 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid #e0f2fe; }
.entry-content p  { margin-bottom:1.25rem;line-height:2; }
.entry-content ul { list-style:disc;padding-left:1.5rem;margin-bottom:1.25rem; }
.entry-content ol { list-style:decimal;padding-left:1.5rem;margin-bottom:1.25rem; }
.entry-content li { margin-bottom:.4rem; }
.entry-content a  { color:#0ea5e9;text-decoration:underline; }
.entry-content img { border-radius:.75rem;margin:1.5rem 0;max-width:100%; }
.entry-content blockquote { border-left:4px solid #06b6d4;padding:1rem 1.5rem;background:#f0f9ff;border-radius:0 .5rem .5rem 0;margin:1.5rem 0;color:#475569; }

/* WordPress */
.alignleft  { float:left;  margin:0 1.5rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1.5rem; }
.aligncenter { display:block;margin:0 auto 1rem; }
.screen-reader-text { border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px; }

/* Header scroll */
#site-header { transition: box-shadow .3s ease; }
#site-header.is-scrolled { box-shadow: 0 2px 20px rgba(14,165,233,.1); }

/* Contact form focus ring */
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: none;
  ring: 2px;
  ring-color: #0ea5e9;
  border-color: #0ea5e9;
  background: #ffffff;
}

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   スマホ用レスポンシブ調整（max-width: 768px）
   ============================================================ */
@media (max-width: 768px) {

  /* ---- セクション共通余白 ---- */
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- ヒーロー系余白 ---- */
  .hero, .hero-section,
  section.relative.min-h-screen,
  section.relative.overflow-hidden.min-h-screen {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- 見出し ---- */
  h1 {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 16px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  h3 {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ---- 本文テキスト ---- */
  p, li, td, th {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ---- グリッド → 1カラム ---- */
  [class*="grid-cols-"],
  [class*="md:grid-cols-"],
  [class*="lg:grid-cols-"],
  [class*="sm:grid-cols-"] {
    grid-template-columns: 1fr !important;
  }

  /* flexの横並びを縦に */
  [class*="flex-row"],
  [class*="md:flex-row"],
  [class*="lg:flex-row"] {
    flex-direction: column !important;
  }

  /* ---- テーブルのスクロール対応 ---- */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  table th, table td {
    white-space: normal !important;
    min-width: 100px !important;
  }

  /* ---- ボタン幅 ---- */
  a[class*="rounded-full"][class*="px-"],
  button[class*="rounded-full"][class*="px-"] {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---- Font Awesome アイコン ---- */
  .fa-5x { font-size: 2.5em !important; }
  .fa-4x { font-size: 2em !important; }
  .fa-3x { font-size: 1.8em !important; }
  .fa-2x { font-size: 1.4em !important; }

  /* ---- letter-spacing 調整 ---- */
  [class*="tracking-widest"] {
    letter-spacing: 0.05em !important;
  }

  /* ---- コンテナ幅 ---- */
  [class*="max-w-"] {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- カード padding ---- */
  [class*="rounded-3xl"][class*="p-"],
  [class*="rounded-2xl"][class*="p-"] {
    padding: 20px 16px !important;
  }

  /* ---- gap 調整 ---- */
  [class*="gap-12"] { gap: 1.5rem !important; }
  [class*="gap-10"] { gap: 1.25rem !important; }
  [class*="gap-8"]  { gap: 1rem !important; }

  /* ---- whitespace-nowrap の解除 ---- */
  [class*="whitespace-nowrap"] {
    white-space: normal !important;
  }

  /* ---- 会社概要テーブル：縦積みレイアウト ---- */
  .company-table,
  .company-table tbody,
  .company-table tr {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
  }
  .company-table tr {
    margin-bottom: 0 !important;
    border-bottom: 1px solid #e0f2fe !important;
  }
  .company-table tr:last-child {
    border-bottom: none !important;
  }
  .company-table th {
    display: block !important;
    width: 100% !important;
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    border-right: none !important;
    border-bottom: 1px solid #e0f2fe !important;
  }
  .company-table td {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px 20px !important;
  }

}