/* =========================
   Header (REVLO)
   「上部に領域確保」＋「黄色」＋「ロゴ/電話/MENU」
========================= */

:root{
  --header-h: 88px;    /* 高さはここで調整 */
  --yellow: #f6dd7a;   /* フッターの黄色と揃える */
}

/* ヘッダーが fixed の場合、本文が隠れるならON */
body{
  /* padding-top: var(--header-h); */
}

/* ヘッダー本体 */
.siteHeader{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 3000;
  background: var(--yellow);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

/* 全幅（wrap制限を外す） */
.siteHeader .wrap.wrap--headerFull{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  height: 100%;
  padding: 0 clamp(8px, 0vw, 30px) !important;
}

/* 横並び：左ロゴ / 右TEL+MENU */
.siteHeader__inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* 左：ロゴ */
.siteHeader__brand{
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}
.siteHeader__logo{
  height: clamp(60px, 6vw, 80px);
  width: auto;
  display: block;
  object-fit: contain;
}

/* 右：TEL + MENU */
.siteHeader__right{
  display: flex;
  align-items: center;
  gap: 4px;
}

/* TEL */
.siteHeader__tel{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-decoration: none;
  color: #111;
  line-height: 1.1;
}
.siteHeader__telTop{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.siteHeader__telNum{
  font-weight: 1000;
  font-size: clamp(18px, 2.3vw, 30px);
  letter-spacing: .02em;
}
.siteHeader__telSub{
  font-size: 12px;
  font-weight: 700;
  opacity: .9;
}

/* =========================
   MENUボタン（最終版：均等3本線）
   ・線/文字は currentColor で統一
   ・box-shadow方式は使わない
========================= */

/* 線と文字の色：白なら #fff / 黒なら #111 */
.menuBtn{
  color: #000000; /* ←ここだけ変えれば全部変わる */
  background: transparent;
  border: none;
  padding: 10px 8px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* 3本線（中線はbackground、上下線は疑似要素） */
.menuBtn__bars{
  width: 28px;
  height: 20px; /* 余裕持たせて均等に見せる */
  position: relative;
  display: block;

  /* 真ん中の線 */
  background: linear-gradient(currentColor 0 0) center / 100% 3px no-repeat;
}

.menuBtn__bars::before,
.menuBtn__bars::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: 3px;
  background: currentColor;
  border-radius: 999px;
}
.menuBtn__bars::before{ top: 0; }
.menuBtn__bars::after { bottom: 0; }

/* 念のため：旧CSSのbox-shadowが残ってても無効化 */
.menuBtn__bars::before{
  box-shadow: none !important;
}

/* MENU文字 */
.menuBtn__label{
  font-size: 12px;
  font-weight: 900;
  color: currentColor;
  letter-spacing: .06em;
}

/* =========================
   Responsive
========================= */
@media (max-width: 640px){
  :root{ --header-h: 76px; }
  .siteHeader__telSub{ display: none; }
  .siteHeader__telNum{ font-size: 18px; }
}

@media (max-width: 380px){
  .siteHeader__telBadge{ display:none; }
}

/* --- 1. ロゴの設定（絶対に縮ませない） --- */
.siteHeader__brand {
  flex-shrink: 0;      /* 親の幅が狭まっても縮まない */
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

.siteHeader__logo {
  /* PCでは画面幅に応じて可変(54px〜80px)、スマホ時は下方のメディアクエリで固定 */
  height: clamp(54px, 6vw, 80px); 
  width: auto;
  display: block;
  object-fit: contain;
}

/* --- 2. 電話番号の設定（こちらを可変・縮小可能にする） --- */
.siteHeader__tel {
  min-width: 0;       /* 縮小を許可 */
  flex-shrink: 1;      /* 狭いときはロゴに場所を譲る */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  text-decoration: none;
  color: #111;
  line-height: 1.1;
}

.siteHeader__telNum {
  font-weight: 1000;
  display: flex;
  align-items: center;
  color: #111;
  /* 文字サイズ：PCは最大30px、幅が狭まると最小14pxまで自動縮小 */
  font-size: clamp(14px, 2.3vw, 30px);
  white-space: nowrap;
  letter-spacing: .02em;
}

/* ☎マークとWordPress絵文字(SVG)化対策 */
.tel-row1 {
  display: flex;
  align-items: center;
  gap: 4px; /* アイコンと090の間の隙間 */
}

.tel-icon-text {
  display: inline-block;
  color: #000 !important; /* 強制的に黒 */
  font-family: "Hiragino Sans", "Meiryo", sans-serif;
  font-size: 1.1em;
  line-height: 1;
  text-indent: 0 !important;
}

.tel-icon-text img.emoji {
  display: none !important; /* 勝手に生成されるSVG画像を消す */
}

.siteHeader__telSub {
  font-size: 12px;
  font-weight: 700;
  opacity: .9;
}

/* --- 3. Responsive (スマホ・タブレット) --- */

/* 画面幅 640px 以下 */
@media (max-width: 640px) {
  :root { --header-h: 88px; }

  .siteHeader__telSub { 
    display: none; 
  }

  /* ロゴサイズをスマホで固定（縮まないように） */
  .siteHeader__logo {
    height: 60px !important; 
  }

  /* 電話番号を3行にして左揃え */
  .siteHeader__telNum {
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px; /* スマホ時の基準サイズ */
    line-height: 1.1;
    gap: 0;
    white-space: normal;
  }

  .tel-part {
    display: block;
  }

  .tel-row1 {
    margin-bottom: -1px; /* 行間を微調整 */
  }
}

/* 画面幅 360px 以下（非常に幅が狭いデバイス） */
@media (max-width: 360px) {
  .siteHeader__inner {
    gap: 8px; /* 全体の余白を詰める */
  }

  .siteHeader__telNum {
    font-size: 14px; /* 電話番号をさらに小さくしてロゴを守る */
  }

  .siteHeader__logo {
    height: 50px !important;
  }
}