/*
 * けやき薬局（hp-005-keyaki）
 * ベース：Template A｜パターン2：地域密着型（グリーン）
 *
 * ⚠️ カラーは「緑（ミント系）」というヒアリング段階の情報に基づく暫定値です。
 *    正式な色コード・トーン確定後にこの :root ブロックのみ差し替えてください。
 */
@import url('base.css');

:root {
  /* ---- ミントグリーン系テーマ（暫定） ---- */
  --primary:       #2F9E7E;  /* メイン：ミントグリーン */
  --primary-light: #4FBF9C;
  --primary-pale:  #EAF7F2;
  --primary-dark:  #1C6B55;
  --accent:        #F2A63B;  /* アクセント：やわらかい橙（CTA用） */
  --accent-dark:   #DB8F22;
  --bg-tint:       #F4FAF7;
  --border:        #CFE9DF;
  --hero-overlay:  linear-gradient(135deg, rgba(24,92,74,0.82) 0%, rgba(16,64,52,0.58) 100%);
}

/* ===========================
   けやき薬局 追加コンポーネント
=========================== */

/* ===========================
   余白監査の反映（2026-08-22）
   template-a は高齢者中心の想定のため、本文・行間・余白を一段大きく取る
=========================== */

/* 見出し ↔ 小見出し：12px → 28px（ガードレール 24〜32px） */
.section-title { margin-bottom: 28px; }

/* 本文まわり：14.4px/1.85 → 15.2px/2.0（高齢者向けの読みやすさ） */
body { line-height: 2.0; }
.section-lead { font-size: 0.95rem; line-height: 2.0; margin-bottom: 48px; }
.sn-desc,
.about-text { font-size: 0.95rem; line-height: 2.0; }

/* ヒーロー：見出し ↔ 説明文 16px → 28px */
.hero-title { margin-bottom: 28px; }

/* お知らせ1行あたりの高さを確保（タップしやすさ・読みやすさ） */
.news-item { padding: 18px 0; }

/* 締めのCTAはセクションのリズムに合わせる（64px → 76px） */
.cta-section { padding: 76px 0; }

@media (max-width: 768px) {
  .section-title { margin-bottom: 20px; }
  .section-lead { margin-bottom: 32px; }
  .hero-title { margin-bottom: 20px; }
  .cta-section { padding: 52px 0; }
}

/* ---------- ヘッダー（メニュー7項目のため間隔を微調整） ---------- */
@media (min-width: 769px) {
  .header-nav { gap: 17px; }
  .header-nav a { font-size: 0.84rem; }
}

/* ---------- LINE 友だち追加 ---------- */
.line-cta {
  background: var(--primary-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  text-align: center;
}
@media (max-width: 768px) {
  .line-cta { padding: 24px 20px; }
}
.line-cta-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.line-cta-desc {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 18px;
}
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #06C755;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: 999px;
  transition: var(--transition);
  box-shadow: 0 2px 12px rgba(6,199,85,0.28);
}
.btn-line:hover { background: #05A948; transform: translateY(-1px); }
.line-cta-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 12px;
}
/* ヘッダーナビ内のLINEリンク */
.nav-line-link { color: #06C755 !important; font-weight: 700; }

/* ---------- お知らせタグ（休局情報を追加） ---------- */
.news-tag--holiday { background: #FDE8E6; color: #B03A2E; }

/* ---------- 施設基準ページ ---------- */
.std-updated {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 32px;
}
.std-group { margin-bottom: 40px; }
.std-group-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary-dark);
  padding-left: 12px;
  border-left: 4px solid var(--primary);
  margin-bottom: 16px;
}
.std-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.std-table th,
.std-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.std-table tr:last-child th,
.std-table tr:last-child td { border-bottom: none; }
.std-table th {
  width: 38%;
  background: var(--primary-pale);
  font-weight: 700;
  color: var(--text);
}
.std-note {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 14px;
  line-height: 1.9;
}
.std-tbd {
  display: inline-block;
  background: #FFF4E5;
  border: 1px dashed var(--accent-dark);
  color: #A66200;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 4px;
}

/* ---------- 採用ページ ---------- */
.recruit-lead-box {
  background: var(--primary-pale);
  border-radius: var(--radius);
  padding: 32px 28px;
  margin-bottom: 48px;
}
.recruit-lead-box p { font-size: 0.95rem; line-height: 2; }
.recruit-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.recruit-point {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
}
.recruit-point-icon { font-size: 2rem; margin-bottom: 10px; }
.recruit-point-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
}
.recruit-point-desc { font-size: 0.86rem; color: var(--text-light); }
.recruit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.recruit-table th,
.recruit-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.recruit-table tr:last-child th,
.recruit-table tr:last-child td { border-bottom: none; }
.recruit-table th {
  width: 28%;
  background: var(--primary-pale);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- 制作メモ（初稿プレビュー限定・公開前に削除） ---------- */
.draft-flag {
  background: #FFF9E6;
  border: 1px dashed #E0A800;
  color: #8A6100;
  font-size: 0.82rem;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin: 16px 0;
  line-height: 1.8;
}

@media (max-width: 768px) {
  .recruit-points { grid-template-columns: 1fr; }
  .std-table th, .recruit-table th { width: 34%; }
}