/* ==========================================================================
   協同組合千住柔整師会 - サイト共通スタイル
   ========================================================================== */

:root {
  --color-navy: #16305c;
  --color-navy-light: #1b3c6c;
  --color-navy-dark: #132a51;
  --color-red: #c8443f;
  --color-red-dark: #b03a36;
  --color-border: #dde3ec;
  --color-text: #2b2f36;
  --color-text-sub: #4c545f;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.9;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #1e4d8c;
}

section {
  scroll-margin-top: 68px;
}

::selection {
  background: var(--color-navy);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

/* ヘッダーナビ：PC / モバイルの出し分け */
.nav-desktop {
  display: none;
}

.nav-mobile {
  display: block;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }
  .nav-mobile {
    display: none;
  }
}

/* ナビリンクのホバー */
.nav-link:hover {
  opacity: 1 !important;
  color: #fff !important;
}

/* 電話番号ボタン（赤）のホバー */
.btn-call:hover {
  background: var(--color-red-dark) !important;
}

/* モバイルメニュー内リンクのホバー */
.mobile-menu-link:hover {
  background: #eef3fa !important;
}

/* 枠線ボタン（入会案内を見る）のホバー */
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   ドロップダウン（モバイルメニュー）
   フォーカス中のみ .dropdown-content を表示する
   ========================================================================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropdown-content {
  position: absolute;
}

.dropdown-end .dropdown-content {
  right: 0;
}

.dropdown:not(:focus-within) .dropdown-content {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.95);
  transform-origin: top center;
}

.dropdown:focus-within .dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transform-origin: top center;
}

.dropdown-content {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* ==========================================================================
   Heroエリア：背景画像＋可読性確保
   ========================================================================== */
.hero-section {
  background-image:
    linear-gradient(168deg, rgba(19, 42, 81, 0.88) 0%, rgba(23, 51, 95, 0.82) 52%, rgba(17, 38, 73, 0.90) 100%),
    url("../images/hero-image.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 見出し・本文・バッジは画像に負けないよう影を付ける */
.hero-section h1,
.hero-section p,
.hero-badge {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* 統計ボックス：画像が透けても読めるようにすりガラス風に */
.hero-section dl {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 事業内容カード */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   Material Symbols（アイコンフォント）
   使い方: <span class="material-symbols-outlined">phone</span>
   アイコン名は https://fonts.google.com/icons で検索
   ========================================================================== */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}