/* ============================================================
   レイアウト：ヘッダー / フッター / SPボトムタブ / ドロワー
   全ページ共通
============================================================ */

/* ------------------------------------------------------------
   ヘッダー
------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color_bg);
  border-bottom: 1px solid var(--color_border);
}

/* アナウンスバー */
.header_top {
  background: var(--color_navy);
  color: #fff;
  padding: 6px 16px;
  font-size: 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.header_top_badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dot_red, .dot_amber {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.dot_red   { background: var(--color_emergency); box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.dot_amber { background: var(--color_warning); }

/* メインヘッダー 1段目 */
.header_main {
  max-width: var(--header_w);
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--color_border);
}
.header_logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color_navy);
  margin-right: auto;
  flex-shrink: 0;
}
.header_logo img { height: 28px; width: auto; }

/* アクションボタン群 */
.header_actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header_icon_btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color_bg_sub);
  color: var(--color_text_sub);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.header_icon_btn:hover {
  background: var(--color_primary_light);
  color: var(--color_primary);
}
.header_icon_btn svg { width: 18px; height: 18px; }

/* SOS：画像アイコンを白反転して赤丸に乗せる */
.header_sos_btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color_emergency);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(192,57,43,.35);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
}
.header_sos_btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(192,57,43,.45);
}
.header_sos_icon {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.btn_line, .btn_web {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .15s, box-shadow .15s;
}
.btn_line {
  background: var(--color_line);
  color: #fff;
  box-shadow: 0 2px 8px rgba(6,199,85,.25);
}
.btn_line:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,199,85,.35);
}
.btn_line svg { width: 14px; height: 14px; fill: currentColor; }
.btn_web {
  background: var(--color_primary);
  color: #fff;
}
.btn_web:hover { background: var(--color_primary_dark); }

/* メインヘッダー 2段目：ナビ */
.header_nav_row {
  background: var(--color_bg);
}
.header_nav_inner {
  max-width: var(--header_w);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.header_nav_inner::-webkit-scrollbar { display: none; }
.header_nav_inner a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color_text_sub);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.header_nav_inner a svg { width: 16px; height: 16px; }
.header_nav_inner a:hover { color: var(--color_primary); }
.header_nav_inner a.is_active {
  color: var(--color_primary);
  border-bottom-color: var(--color_primary);
}

/* ------------------------------------------------------------
   フッター
------------------------------------------------------------ */
.footer {
  background: var(--color_navy);
  color: #fff;
  padding: 48px 0 24px;
  margin-top: 48px;
}
.footer_inner {
  max-width: var(--container_w);
  margin: 0 auto;
  padding: 0 20px;
}
.footer_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.footer_h {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color_primary_light);
  margin-bottom: 12px;
}
.footer_col ul { padding: 0; }
.footer_col li { margin-bottom: 8px; }
.footer_col a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,.8);
  transition: color .15s;
}
.footer_col a:hover { color: var(--color_primary_light); }
.footer_bottom {
  text-align: center;
  font-size: 0.75rem;
  opacity: .6;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ------------------------------------------------------------
   SPボトムタブ（639px以下のみ表示）
------------------------------------------------------------ */
.sp_tab {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--sp_tab_h);
  background: var(--color_bg);
  border-top: 1px solid var(--color_border);
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sp_tab_inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 100%;
}
.sp_tab_item {
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color_text_sub);
  padding: 4px;
  text-decoration: none;
}
.sp_tab_item svg { width: 22px; height: 22px; stroke-width: 1.6; }
.sp_tab_item.is_active { color: var(--color_primary); }
.sp_tab_item:hover { color: var(--color_primary); }

/* ------------------------------------------------------------
   ドロワー（下から出現）
------------------------------------------------------------ */
.drawer_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 250;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
}
.drawer_overlay.is_open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility 0s;
}
.drawer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 20px 20px 0 0;
  z-index: 300;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  max-height: 82vh;
  overflow-y: auto;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -8px 28px rgba(0,0,0,.15);
}
.drawer.is_open { transform: translateY(0); }

.drawer_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px 14px;
  position: sticky;
  top: 0;
  background: #fff;
}
.drawer_header::before {
  content: '';
  position: absolute;
  top: 4px; left: 50%;
  width: 40px; height: 4px;
  background: var(--color_border);
  border-radius: 2px;
  transform: translateX(-50%);
}
.drawer_logo {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--color_navy);
}
.drawer_logo img { height: 24px; }
.drawer_close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color_bg_sub);
  color: var(--color_text);
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.drawer_section_label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color_text_sub);
  padding: 12px 6px 6px;
  letter-spacing: .04em;
}
.drawer_item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius_md);
  font-size: 0.875rem;
  color: var(--color_text);
  font-weight: 500;
  transition: background .15s;
}
.drawer_item:hover,
.drawer_item:active { background: var(--color_bg_sub); }
.drawer_cta_wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 16px 4px 8px;
}
.drawer_cta_line {
  background: var(--color_line);
  color: #fff;
  padding: 12px;
  text-align: center;
  border-radius: var(--radius_md);
  font-weight: 700;
  font-size: 0.8125rem;
}
.drawer_cta_sos {
  background: var(--color_emergency);
  color: #fff;
  padding: 12px;
  text-align: center;
  border-radius: var(--radius_md);
  font-weight: 700;
  font-size: 0.8125rem;
}

/* ------------------------------------------------------------
   レスポンシブ（960 / 640）
------------------------------------------------------------ */

/* Tablet〜PC境界：640〜959px */
@media (min-width: 640px) and (max-width: 959px) {
  .header_main { padding: 12px 24px; }
  .header_nav_inner { padding: 0 24px; }
  .btn_web { display: none; }
}

/* SP：≤639px */
@media (max-width: 639px) {
  .header_nav_row { display: none; }
  .btn_web { display: none; }
  .header_main { padding: 10px 16px; gap: 10px; }
  .header_top { font-size: 0.6875rem; padding: 5px 12px; gap: 10px; }
  .header_actions { gap: 6px; }
  .header_sos_btn { width: 34px; height: 34px; }
  .header_sos_icon { width: 20px; height: 20px; }
  .btn_line { padding: 0 10px; font-size: 0.6875rem; }

  .footer { padding: 32px 0 calc(var(--sp_tab_h) + 24px); margin-top: 32px; }
  .footer_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

  .sp_tab { display: block; }

  body:has(.sp_tab) { padding-bottom: var(--sp_tab_h); }
}

/* PC：≥960px */
@media (min-width: 960px) {
  .header_main { padding: 12px 40px; }
  .header_nav_inner { padding: 0 40px; }
}