/* unified-header.css — 3サイト統一ヘッダー（和紙×墨 和モダンプレミアム）
   ─────────────────────────────────────────────
   ホームページ / オンラインショップ / オークション の3セクション共通ヘッダー。
   base.css の旧ヘッダー用スタイル（.site-header / .site-nav / .site-mobile-strip 等）とは
   完全に独立させ、既存オークションページのレイアウトには一切干渉しない。
   （旧スタイルは header.php が旧構造を出力しなくなったため実質未使用だが削除もしない）

   カラートークン:
     和紙(ヘッダー地) #FAF8F3 / 墨(文字) #222 / アクティブ・CTA #2F2F2F+白
     罫線 #B9AB8C / ホバー朱 #A53E2B
   フォント:
     見出し・メニュー "Shippori Mincho", serif / 補助 "Noto Sans JP", sans-serif
   ───────────────────────────────────────────── */

:root {
  --uh-washi: #faf8f3;
  --uh-sumi: #222;
  --uh-active: #2f2f2f;
  --uh-line: #b9ab8c; /* 旧 #d9d9d9。薄すぎて見えにくかったので砂色に（ボス指示 2026-07-26） */
  --uh-shu: #a53e2b;
  --uh-serif: "Shippori Mincho", serif;
  --uh-sans: "Noto Sans JP", sans-serif;
}

/* ── セクション別のページ背景（body_class の mikawa-sec-{section} で切替） ── */
body.mikawa-sec-home {
  background-color: #ffffff;
}

body.mikawa-sec-shop {
  background-color: #e6e6e6;
}

/* オークション配下は base.css の砂ベージュ #e7decb を維持（既存の見た目を変えない）。
   同値を明示しておくことで、将来 base.css 側を変えても現行色が守られる。
   ホバー・現在地のアクセントは本番オークションに合わせて緑にする（他セクションは朱）。 */
body.mikawa-sec-auction {
  background-color: #e7decb;
  --uh-shu: #1e7947;
}

/* ── ヘッダー本体 ── */
.unified-header {
  background-color: var(--uh-washi);
  border-bottom: 1px solid var(--uh-line);
  font-family: var(--uh-serif);
  color: var(--uh-sumi);
}

/* ヘッダーの背景もセクション別に（ボス指示 2026-07-13）:
   オークション=砂ベージュ / ショップ=グレー / ホーム=白 */
body.mikawa-sec-auction .unified-header {
  background-color: #e7decb;
}
body.mikawa-sec-shop .unified-header {
  background-color: #e6e6e6;
}
body.mikawa-sec-home .unified-header {
  background-color: #ffffff;
}

/* ── オークション一覧の代わりに置くバナー ──
   PC＝最大1280px幅・中央寄せ、高さは画像の80%（上下10%ずつクロップ）
   スマホ＝画面幅いっぱいで全体表示（下の@media） */
/* ショップなど index.css を読まないページでも、オークションと同じ枠・余白になるように */
.mikawa-sec-shop .auction-page,
.mikawa-sec-home .auction-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 64px;
}

/* ── セクション見出し（旧バナー画像の代わり。ボス指示 2026-07-26） ──
   背景は黒より少し明るいチャコール、文字は白。フォントはサイト切替ボタンと同じ明朝。
   バナーと同じ幅（PC 1232px中央／スマホ画面いっぱい）で場所を引き継ぐ */
.section-title {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto;
  padding: 20px 16px;
  background-color: var(--uh-active);
  color: #ffffff;
  text-align: center;
  font-family: var(--uh-serif);
  font-weight: 600;
}

.section-title__main {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.1em;
  line-height: 1.3;
}

/* 英字は左右に細い罫線をあしらう（旧バナーの装飾を再現） */
.section-title__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 13px;
  letter-spacing: 0.2em;
}

.section-title__rule {
  display: block;
  width: 36px;
  height: 1px;
  background-color: currentColor;
}

.auction-page__banner {
  width: 100%;
  max-width: 1232px;
  margin: 0 auto 0px;
}
.auction-page__banner picture {
  display: block;
  width: 100%;
}
.auction-page__banner img {
  display: block;
  width: 100%;
  height: 200px; /* PCは高さ200px固定（ボス指示 2026-07-25。縦横比が崩れるのは了承済み） */
}

.unified-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── 1行目: ロゴ / 住所 / サイト切替 ── */
/* PCは3列グリッド: ロゴ(左) / サイト切替ボタン(中央) / 住所・電話(右)。
   左右を 1fr ずつにすることで、中央の auto 列がヘッダーの真ん中に来る
   （ボス指示 2026-07-26） */
.unified-header__row1-inner {
  display: grid;
  /* 左右の列は「中身に必要な幅」を下限にし、余った幅だけを等分する。
     1fr 同士だと左右が必ず同じ幅になり、狭い方（住所側）に使われない余りが出て
     そのぶん早く3列が崩れてしまう（ボス指摘 2026-07-26）。 */
  grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);
  grid-template-areas: "logo switcher info";
  align-items: center;
  /* 列の隙間は10px。詰めたぶん、狭い画面でも3列の横並びを保てる（ボス指示 2026-07-26）。
     左右対称なので切替ボタンは中央のまま。 */
  gap: 10px;
  /* ロゴまわりの余白は極小に（ヘッダーの背を低く保つ） */
  padding-top: 8px;
  padding-bottom: 8px;
}

.unified-header__logo     { grid-area: logo; }
.unified-header__switcher { grid-area: switcher; }
.unified-header__right    { grid-area: info; }

/* ── 画面幅が狭くなってきた時（1120px以下・スマホ幅より上） ──
   3列のままだとロゴの列が足りずロゴが縮んでしまうので、
   サイト切替ボタンだけを1段下げて、ヘッダーとヘッダーメニューの間に移す。
   その行の上下に余白は付けない（ボス指示 2026-07-26）。 */
@media (min-width: 769px) and (max-width: 1120px) {
  .unified-header__row1-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo     info"
      "switcher switcher";
    row-gap: 0;
    /* 切替ボタンの行をヘッダーメニューの罫線に密着させる */
    padding-bottom: 0;
  }

  /* この幅でもロゴは本来の大きさを保つ（横1行に余裕があるため） */
  .unified-header__logo {
    min-width: auto;
  }

  .unified-header__switcher {
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  /* 切替ボタンを出していない時（本番の当面の運用）は、ボタン行が無いので
     下の余白を通常に戻す（0のままだとロゴがメニューの線に密着してしまう） */
  body.mikawa-no-switcher .unified-header__row1-inner {
    padding-bottom: 8px;
  }
}

.unified-header__logo {
  flex: 0 1 auto;
}

.unified-header__logo .custom-logo-link {
  display: block;
}

.unified-header__logo .custom-logo {
  display: block;
  height: 64px; /* PCはロゴ高さ64px（ボス指示 2026-07-25） */
  width: auto;
  /* PCではロゴを縮ませない。縮める設定があると「ロゴに必要な幅」が0と
     判定され、上の minmax(min-content, 1fr) が効かなくなる。
     幅が足りなくなったら下の@mediaで切替ボタンを1段下げる方針。 */
  max-width: none;
  object-fit: contain;
}

/* PC＝横1行ロゴを表示 / スマホ＝2段組ロゴを表示（下の @media で切替） */
.unified-header__logo-sp {
  display: none;
}

/* ロゴ画像未設定時のテキストフォールバック */
.unified-header__logo-text {
  display: inline-block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--uh-sumi);
  padding: 24px 0;
}

.unified-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}

/* 住所・電話はヘッダーメニューと同じ明朝＋太字で揃える（ボス指示 2026-07-26） */
.unified-header__address {
  font-family: var(--uh-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--uh-sumi);
  margin: 0;
  text-align: right;
}

/* 住所・目印はそれぞれ途中で切らず、幅が足りない時だけ2つの間で折り返す */
.unified-header__address span {
  white-space: nowrap;
}

/* 住所の下に電話番号（ボス指示 2026-07-26） */
.unified-header__tel {
  font-family: var(--uh-serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--uh-sumi);
  margin: 0;
}

.unified-header__tel a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

/* 受話器アイコンは緑（サイト共通の緑 #008236） */
.unified-header__tel-icon {
  color: #008236;
  flex: 0 0 auto;
  /* 絵の大きさは24×24のまま、上に2pxの余白（ボス指示 2026-07-26）。
     サイト全体が box-sizing:border-box のため、高さはパディング込みの26pxにする */
  width: 24px;
  height: 26px;
  padding-top: 2px;
}

.unified-header__switcher {
  display: flex;
  gap: 8px;
}

.unified-header__switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 1px solid var(--uh-line);
  background-color: #ffffff;
  color: var(--uh-sumi);
  font-family: var(--uh-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.unified-header__switch-btn:hover {
  /* サイト切替ボタンは朱を使わずシックに（朱アクセントは2行目メニューだけ）。
     ホバーは墨の枠線＋薄い和紙濃色でさりげなく */
  color: var(--uh-sumi);
  border-color: #b9b3a5;
  background-color: #f1ede4;
}

/* 今いるセクション: 墨色背景＋白文字 */
.unified-header__switch-btn.is-active {
  background-color: var(--uh-active);
  border-color: var(--uh-active);
  color: #ffffff;
}

.unified-header__switch-btn.is-active:hover {
  color: #ffffff; /* アクティブはホバーで色を変えない */
}

/* ── 2行目: セクション別メニュー ── */
.unified-header__row2 {
  border-top: 1px solid var(--uh-line);
}

.unified-header__menu {
  display: flex;
  align-items: stretch;
  justify-content: space-between; /* 両端揃えで横並び */
}

.unified-header__menu-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 13px 4px;
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--uh-sumi);
  transition: color 0.25s;
}

/* ホバー時に左からすっと伸びる朱の下線 */
.unified-header__menu-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 2px;
  background-color: var(--uh-shu);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

.unified-header__menu-item:hover {
  color: var(--uh-shu);
}

.unified-header__menu-item:hover::after {
  transform: scaleX(1);
}

/* 現在表示中のページ: 朱文字＋下線を出しっぱなしに */
.unified-header__menu-item.is-active {
  color: var(--uh-shu);
}

.unified-header__menu-item.is-active::after {
  transform: scaleX(1);
}

/* ── 入口ページ（準備中メッセージ）── */
.unified-entry {
  padding: 96px 24px 140px;
  text-align: center;
  font-family: var(--uh-serif);
  color: var(--uh-sumi);
}

.unified-entry__title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0 0 20px;
}

.unified-entry__text {
  font-family: var(--uh-sans);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #555;
  margin: 0;
}

/* ─────────────────────────────────────────────
   スマホ（〜768px）: 縦積みレイアウト
   ①ロゴ全幅 → ②サイト切替3ボタン等分 → ③メニュー2列グリッド
   ハンバーガー・ドロワーは使わない（全項目を常時表示）
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .unified-header__inner {
    padding: 0; /* 左右余白ほぼ0（ロゴを画面幅いっぱいに） */
  }

  .unified-header__row1-inner {
    display: flex; /* PCの3列グリッドを解除して縦積みに戻す */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 4px;
    padding-bottom: 0;
  }

  .unified-header__logo {
    width: 100%;
  }

  /* スマホもPCと同じカスタムロゴ（横1行）を使用（ボス指示 2026-07-25） */
  .unified-header__logo-pc {
    display: block;
    width: 100%;
  }

  .unified-header__logo-pc .custom-logo-link {
    display: block;
  }

  .unified-header__logo-pc .custom-logo {
    display: block;
    width: 68%; /* 横1行ロゴはスマホで68%幅・中央寄せ（ボス指示 2026-07-25） */
    height: auto;
    margin: 4px auto;
  }

  .unified-header__logo-text {
    display: block;
    text-align: center;
    font-size: 22px;
    padding: 14px 0;
  }

  /* 住所・電話はロゴのすぐ下に中央寄せで表示（ボス指示 2026-07-26）。
     DOM順は ロゴ→切替ボタン→住所 なので、order で住所を切替ボタンより前に出す */
  .unified-header__right {
    display: flex;
    order: 1;
    width: 100%;
    align-items: center;
    gap: 0;
    margin-top: 8px;
  }

  .unified-header__switcher {
    order: 2;
  }

  .unified-header__address,
  .unified-header__tel {
    text-align: center;
  }

  /* サイト切替3ボタン: 枠線・背景をなくし、文字の8px下に黒の下線だけのタブ風に
     （ボス指示 2026-07-13）。等分の3タブ。 */
  .unified-header__switcher {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0 8px;
    margin-top: 12px; /* ロゴと切替ボタンの間の余白12px（ボス指示 2026-07-13） */
  }

  .unified-header__switch-btn {
    min-height: 0;
    padding: 0 2px 8px; /* 文字の下に8pxの余白をとって、その下に下線 */
    border: none;
    border-bottom: 1px solid #000; /* 黒の下線だけ（1px） */
    background-color: transparent;
    font-size: 16px; /* 13→16px（ボス指示 2026-07-25） */
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* 現在いるサイトのタブは、PCと同じく墨色の塗り＋白文字で明確に示す
     （ボス指示 2026-07-26。太字だけでは分かりにくいため） */
  .unified-header__switch-btn.is-active {
    background-color: var(--uh-active);
    color: #ffffff;
    font-weight: 700;
    border-bottom-color: var(--uh-active);
    padding: 8px 2px; /* 塗りが文字を包むよう上下に余白 */
  }

  /* メニュー: 1行3個のグリッド。切替タブの下に余白をとって配置 */
  .unified-header__menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px 8px 8px;
  }

  .unified-header__menu-item {
    min-height: 48px;
    justify-content: center;
    padding: 0 4px;
    font-size: 13px; /* 3列に収まるサイズ */
    text-align: center;
    border: 1px solid var(--uh-line); /* 各ボタン独立の枠線＋余白 */
    background-color: var(--uh-washi);
  }

  /* グリッド表示では下線アニメーションは使わない */
  .unified-header__menu-item::after {
    display: none;
  }

  /* スマホでは「お問い合わせ」も他のメニューと同じ見た目にする（CTA墨背景にしない）。
     ＝PC同様、普通のボタン。9個のボタンを完全に揃えるため特別スタイルを打ち消す */
  .unified-header__menu-item--contact {
    background-color: var(--uh-washi);
    color: var(--uh-sumi);
    border-color: var(--uh-line);
  }

  .unified-entry {
    padding: 64px 16px 96px;
  }

  .unified-entry__title {
    font-size: 22px;
  }

  /* ショップ等もオークションと同じスマホ余白に */
  .mikawa-sec-shop .auction-page,
  .mikawa-sec-home .auction-page {
    padding: 0px 8px 32px;
  }

  /* スマホだけバナーを画面幅いっぱい＆全体表示（PCの80%クロップは解除） */
  /* 見出しもスマホでは画面幅いっぱいに */
  .section-title {
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    padding: 16px 12px;
  }

  .section-title__sub {
    font-size: 12px;
    gap: 8px;
  }

  .section-title__rule {
    width: 28px;
  }

  .auction-page__banner {
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    aspect-ratio: auto;
  }
  .auction-page__banner img {
    height: auto;
    object-fit: fill;
  }
}