/* ======================================================================
   10_components_header.css
   - Header / Global nav / Tel / Hamburger (common)
======================================================================== */
.header-inner {
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

h1.site-logo {
  width: 140px;
}

.header-right {
  display: flex;
  align-items: flex-end;
  gap: 32px;
}

/* Global Nav */
.global-nav {
  transition: transform var(--trans-slow) ease;
}

.global-nav ul {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.global-nav li {
  cursor: pointer;
  flex: 1 1 auto;
  max-width: clamp(120px, 12vw, 200px);
}

/* ★ここ重要：a を「ul の中だけ」に限定 */
.global-nav ul a {
  display: flex; /* 画像も文字もクリックできる */
  flex-direction: column;
  align-items: center;
  gap: 6px;

  font-size: 0.8125rem;
  color: #333;
  white-space: nowrap;
  text-align: center;
  transition: color 0.25s ease;
}

.global-nav ul .nav-icon {
  width: auto;
  height: 40px;
  transition: transform 0.25s ease;
}

/* hover も ul 内だけに限定 */
.global-nav ul li:hover a {
  color: var(--turquoise);
}

.global-nav ul li:hover .nav-icon {
  transform: scale(1.08) translateY(-2px);
}

/* =========================
   Tel（ヘッダー内）決定版
========================= */

.header-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  background: var(--pink);
  border-radius: var(--radius-20);
  padding: 14px 18px;

  /* ここ重要：フォント由来の上下余白を安定化 */
  line-height: 1;
}

/* 徒歩10分テキスト */
.header-tel .tel-note {
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  color: var(--text);
}

/* ===== 電話リンク本体 ===== */
.header-tel a {
  display: inline-flex;

  /* ここが本命 */
  align-items: center;
  justify-content: center;

  gap: 3px; /* ← 距離を縮める */
  text-decoration: none;
  color: var(--text);

  /* フォント起因のズレ対策 */
  font-feature-settings: "palt";
  line-height: 1;
}

/* アイコン枠 → 固定サイズやめる */
.header-tel .tel-label {
  display: flex;
  align-items: center;
  justify-content: center;

  /* 余計な固定幅を撤廃 */
  width: auto;
  height: auto;
}

/* アイコン本体 */
.header-tel .tel-label img {
  display: block;

  /* サイズ */
  width: 16px;
  height: auto;

  /* ★ここが調整ポイント：下へ 1.5px */
  margin-top: 1.5px;

  content: url("../images/icon-tel.png");
  transition: opacity 0.2s ease;
}

/* ホバー差し替え */
.header-tel a:hover .tel-label img {
  content: url("../images/icon-tel-hover.png");
  opacity: 0.9;
}

/* 電話番号 */
.header-tel .tel-number {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.03em;

  display: inline-block;

  /* フォント基準を統一 */
  line-height: 1;
}

/* メニュー内 */
.header-tel--inmenu {
  margin-top: 12px;
}

/* Hamburger */
.hamburger {
  display: none;
  width: 32px;
  height: 24px;
  background: none;
  border: none;
  position: relative;
  cursor: pointer;
  position: fixed;
  top: 24px; /* ↓ 下に */
  right: 28px; /* ← 左に */
  z-index: 2000;
  transform: none !important; /* ← これ重要 */
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--turquoise);
  border-radius: 2px;

  transition:
    transform var(--trans-slow) ease,
    opacity var(--trans-base) ease;
  transform-origin: center;
}

.hamburger span:nth-child(1) {
  top: 0;
  background: var(--pink);
}
.hamburger span:nth-child(2) {
  top: 10px;
  background: var(--turquoise);
}
.hamburger span:nth-child(3) {
  bottom: 0;
  background: var(--yellow);
}

.hamburger.is-open span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
  background: var(--pink);
}
.hamburger.is-open span:nth-child(2) {
  opacity: 0;
  background: var(--turquoise);
}
.hamburger.is-open span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
  background: var(--yellow);
}

/* 角丸の背景 */
/* 通常時から角丸枠を表示 */
.hamburger::before {
  content: "";
  position: absolute;
  inset: -10px;

  background: rgba(255, 255, 255, 0.75); /* 通常は少し薄め */
  border-radius: 12px;

  z-index: -1;
  pointer-events: none;
  box-sizing: border-box;

  opacity: 1;
}

/* 開いた時は“強調アニメ”だけ */
.hamburger.is-open::before {
  animation: hamBgIn 0.25s ease forwards;
  background: #ffffff;
}

/* 登場アニメ */
@keyframes hamBgIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==================================================
   電話リンク 共通（header / footer 両用）
================================================== */
.tel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;

  text-decoration: none;
  color: var(--text);

  font-feature-settings: "palt";
  line-height: 1;
}

/* アイコン枠 */
.tel-link .tel-label {
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  height: auto;
}

/* アイコン本体 */
.tel-link .tel-label img {
  display: block;

  width: 16px;
  height: auto;

  /* 文字との垂直バランス微調整 */
  margin-top: 1.5px;

  content: url("../images/icon-tel.png");
  transition: opacity 0.2s ease;
}

/* ホバー差し替え（共通） */
.tel-link:hover .tel-label img {
  content: url("../images/icon-tel-hover.png");
  opacity: 0.9;
}

/* 番号テキスト */
.tel-link .tel-number {
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: 0.03em;

  display: inline-block;
  line-height: 1;
}

/* ==================================================
   ヘッダー専用のラッパ
================================================== */
.header-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  border-radius: var(--radius-20);
  padding: 14px 18px;
}

/* ==================================================
   フッター専用（必要なら微調整）
================================================== */
.footer-tel {
  margin-top: 4px; /* 住所との間隔 */
}
/* ==================================================
   フッターの電話は少し小さく（ヘッダーと差別化）
================================================== */

/* フッター専用ラッパ */
.footer-tel {
  margin-top: 6px;
}

/* 番号を一回り小さく */
.footer-tel .tel-number {
  font-size: 1.05rem; /* ← ここがポイント */
  letter-spacing: 0.02em;
}

/* アイコンも小さめ */
.footer-tel .tel-label img {
  width: 14px; /* ← ヘッダーより-2px */
  margin-top: 1px; /* 微調整 */
}

/* 住所との行間バランス */
.footer-inner p {
  line-height: 1.7;
}