/* ==========================================================================
   共通ヘッダー（全ページ共通・スクロール追従）
   Lightning標準ヘッダー(header.siteHeader)は非表示にし、
   functions.php の otakara_custom_header() が出力するオリジナルヘッダーに
   差し替えている。
   ========================================================================== */

header.siteHeader {
  display: none !important;
}

body.is-nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   共通ユーティリティ
   -------------------------------------------------------------------------- */
/*
 * 今回はSP版のデザインのみを作成しており、PC幅でもSP版をそのまま
 * 中央寄せで表示する方針のため、u-pc-only は常に非表示のままにしておく
 * （元は@media (min-width:768px)で表示切替していたが無効化した）。
 */
.u-pc-only {
  display: none;
}

/*
 * ヘッダー＋ハンバーガーボタン＋電話予約リボンを、常に画面に固定表示する
 * （スクロール追従）。position: sticky ではなく fixed にしているのは、
 * 親テーマ(Lightning)側の要素にoverflowが設定されている場合でも
 * 確実に追従させるため。fixedにすると本文がその分隠れてしまうので、
 * ぶんの高さは assets/js/main.js 側でbodyのpadding-topとして
 * 動的に補正している（clamp()でヘッダーの高さ自体が可変のため）。
 *
 * ヘッダー内の文字・アイコンサイズは、このファイルのベース（SP向け）の
 * ルールでは真のビューポート幅(vw)基準のclamp()のみを使っている。
 * 以前はCSSコンテナクエリ単位（cqw）や、JSが実測してセットするCSS変数
 * （--header-w等）をSP側でも使っていたが、実機Safari／実機iPhone上の
 * Chrome（iOSでは全ブラウザがWebKitエンジン）で、ハンバーガーボタンや
 * 電話CTAが消えてしまう不具合が解消しなかったため、SP側は一切のJS依存・
 * コンテナクエリ依存を持たない、素のvwベースのclamp()に戻した
 * （校了済みのSP版が最初にできていた頃と同じ書き方）。
 * これにより、SP幅ではJSの実行タイミングやブラウザのコンテナクエリ対応
 * 状況に関わらず、CSSだけで確実にサイズが決まる。
 *
 * --header-w / --ribbon-text-w のCSS変数とcalc()を使った、ヘッダーの
 * 実測描画幅ベースの精密なスケーリングは、ファイル末尾の
 * @media (min-width: 768px) ブロック内（PC幅でSP版デザインを額縁に
 * 収めた時の見た目調整専用）でのみ使っている。768px未満には影響しない。
 */
:root {
  --header-w: 480px;
  --ribbon-text-w: 300px;
}

.l-header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
}

/*
 * ログイン中は画面上部にWP管理バー（#wpadminbar）が表示され、
 * 通常は<html>にmargin-topが付いて本文全体を押し下げるが、
 * position: fixedの要素はその影響を受けず常にtop:0基準になってしまう
 * ため、追従ヘッダー側も管理バーの高さぶん明示的にずらして重ならないようにする。
 * （管理バーの高さはWPコア側で32px／モバイル幅では46pxに固定されている）
 */
body.admin-bar .l-header-wrap {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .l-header-wrap {
    top: 46px;
  }
}

.l-header {
  border-bottom: 1px solid #1a1a1a;
  background: #fff;
}

/*
 * デザインカンプの1行レイアウト（ロゴ／電話CTA／ハンバーガー）を
 * 画面幅にかかわらず崩さず維持する。ブレイクポイントで構造を変える
 * （2段組みにする）のではなく、clamp()でフォント・余白を連続的に
 * 縮小させることでSP幅でも1行のまま収める方針。
 * ロゴはヘッダーの高さいっぱいに表示する。
 *
 * （一時的にCSS Gridへの変更を試したが、grid-template-rowsを明示
 * していないと行の高さが子要素の内容依存になり、ロゴimgのheight:100%が
 * 循環参照的に破綻して画像が巨大化する重大な表示崩れが起きたため、
 * 元のflexboxに戻した。）
 */
.l-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 2vw, 16px);
  max-width: var(--container-width);
  height: clamp(80px, 18vw, 150px);
  margin: 0 auto;
  padding: 0 clamp(8px, 3vw, 16px);
}

.l-header__logo {
  flex: 0 0 auto;
  display: block;
  align-self: stretch;
  min-width: 0;
  max-width: clamp(100px, 45vw, 200px);
  padding: 8px 0;
}

/*
 * 実機Safariで、height:100%; width:auto; の組み合わせにより、ロゴ画像が
 * 画面幅を大きく超える異常な横幅（675px等）でレンダリングされ、CTA・
 * ハンバーガーボタンが画面外に押し出されて「消えて見える」重大な不具合が
 * 実機の検証ツールで確認された（Chromeでは再現しない、実機WebKit特有の
 * 現象）。原因の完全特定より「これ以上は絶対に広がらない」という上限を
 * 設けることを優先し、max-widthで確実に頭打ちにした上でobject-fit:containで
 * 画像自体は歪ませずに収める。
 */
.l-header__logo img {
  display: block !important;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
}

/*
 * 電話CTA：ヘッダー内では右寄せ（ロゴ＝左、この文章＝右、という配置）。
 * 「中央揃え」は文章そのものの見た目（2行の形）だけに適用する。
 */
.l-header__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 0;
}

.l-header__cta-text {
  font-size: clamp(9px, 2.6vw, 13px);
  font-weight: 700;
  margin: 0 0 2px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

.l-header__tel {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 1vw, 6px);
  font-size: clamp(14px, 4.5vw, 22px);
  font-weight: 700;
  color: var(--color-primary-header);
  text-decoration: none;
  font-family: Georgia, "Times New Roman", serif;
  white-space: nowrap;
}

.l-header__tel-icon {
  width: clamp(14px, 3.5vw, 20px);
  flex: 0 0 auto;
}

.l-header__hours {
  font-size: clamp(8px, 2vw, 11px);
  margin: 1px 0 0;
  color: #1a1a1a;
  white-space: nowrap;
}

.l-header__menu-btn {
  flex: 0 0 auto;
  width: clamp(22px, 5vw, 30px);
  height: clamp(16px, 4vw, 22px);
  border: none;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}

.l-header__menu-btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: #1a1a1a;
}

/* --------------------------------------------------------------------------
   ハンバーガーメニュー（右からスライドインするオフキャンバスメニュー）
   -------------------------------------------------------------------------- */
.l-gnav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 190;
}

.l-gnav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.l-gnav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 75%;
  max-width: 320px;
  background: #fff;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.l-gnav.is-open {
  transform: translateX(0);
}

/* ログイン中は管理バーの下に来るよう、オフキャンバスメニューも同じぶんずらす */
body.admin-bar .l-gnav {
  top: 32px;
  height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .l-gnav {
    top: 46px;
    height: calc(100% - 46px);
  }
}

.l-gnav__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  background: none;
  font-size: 30px;
  line-height: 1;
  color: var(--color-primary);
  cursor: pointer;
}

.l-gnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.l-gnav__list li {
  border-bottom: 1px solid #eee;
}

.l-gnav__list a {
  display: block;
  padding: 16px 8px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   電話予約リボン
   -------------------------------------------------------------------------- */
.l-header__ribbon {
  background: var(--color-primary);
  color: #fff;
}

/*
 * 画面幅によらず常に1段（アイコン＋テキスト／HPをみたと…の四角）を横並びで維持。
 * リボン全体をタップで電話発信できるよう<a>にしているため、
 * リンクのデフォルト装飾（下線・色）を打ち消しておく。
 */
.l-header__ribbon-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 6px var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 2vw, 16px);
  flex-wrap: nowrap;
  text-decoration: none;
  color: inherit;
}

.l-header__ribbon-main {
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 1.5vw, 8px);
  color: #fff;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}

.l-header__ribbon-tel-icon {
  width: clamp(18px, 4.5vw, 26px);
  flex: 0 0 auto;
}

/*
 * このテキスト部分（アイコンを除いた「純粋にテキストが使える幅」）自体は
 * SP側では特別なサイズ指定をしていない（flexで残り幅を取るだけ）。
 * 中の文字サイズ（tel-word/kaitori-word/de/up/bang）はSP側では
 * vwベースのclamp()で決めており、PC幅の額縁調整時のみ、ファイル末尾の
 * @media (min-width:768px)内で--ribbon-text-wベースのcalc()に切り替える。
 *
 * white-space:nowrapにしているため、狭い端末では文字サイズの縮小が
 * 追いつかず、右隣の白い注釈ボックスに文字がめり込んで重なって見える
 * ことがあった。overflow:hiddenを付けて、はみ出した分は（重ならず）
 * 見えなくなるようにして、レイアウト崩れを防ぐ。
 */
.l-header__ribbon-text {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-base);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/*
 * この4つ（tel-word/kaitori-word/de/up）とbangだけは例外的に、真の
 * ビューポート幅(vw)ではなく、JSが実測してセットする--ribbon-text-w
 * （アイコン分を除いた「純粋にテキストが使える幅」）を基準にしている。
 * vw基準に戻したところ、狭い端末でアイコン／白い注釈ボックスの分を
 * 考慮できず、右隣の注釈ボックスに文字がめり込んで見える不具合が
 * 実機で再現したため、この部分だけ以前の仕組みに戻した。
 * ハンバーガーボタンが消えた実機不具合はこの--ribbon-text-wが原因では
 * なかった（あちらは--header-w側の問題）ため、ここを元に戻しても
 * ハンバーガー問題の再発にはならない。万一JSが実行されない場合も、
 * :rootの初期値（--ribbon-text-w:300px）とclamp()の下限があるので、
 * 文字が消えたり0pxになったりはしない。
 * 電話予約＝赤 #C7161E / 買取金額＝黄 #B8860B。どちらも白縁取り
 */
.l-header__ribbon-tel-word {
  font-size: clamp(11px, calc(var(--ribbon-text-w) * 5.5 / 100), 18px);
  font-weight: 900;
  color: var(--color-primary-bright);
  -webkit-text-stroke: 1.6px #fff;
  paint-order: stroke fill;
}

.l-header__ribbon-kaitori-word {
  font-size: clamp(11px, calc(var(--ribbon-text-w) * 5.5 / 100), 18px);
  font-weight: 900;
  color: var(--color-accent);
  -webkit-text-stroke: 1.6px #fff;
  paint-order: stroke fill;
  margin-right: 2px;
}

.l-header__ribbon-de {
  font-size: clamp(8px, calc(var(--ribbon-text-w) * 4 / 100), 13px);
  font-weight: 700;
  color: #fff;
}

.l-header__ribbon-up {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  font-size: clamp(18px, calc(var(--ribbon-text-w) * 9.5 / 100), 32px);
  font-weight: 900;
  -webkit-text-stroke: 2.2px #fff;
  paint-order: stroke fill;
  vertical-align: -3px;
}

/*
 * 「！」はUPとの間を詰め、sparkleはCSSのbackground-imageとして
 * 「！」自体に重ねる（z-index/絶対配置に頼らないので確実に表示される）。
 */
.l-header__ribbon-bang {
  position: relative;
  display: inline-block;
  margin-left: -6px;
  padding: clamp(3px, calc(var(--ribbon-text-w) * 2 / 100), 6px)
    clamp(5px, calc(var(--ribbon-text-w) * 4 / 100), 10px) 0 3px;
  background-image: url("../img/common/icon-sparkle.png");
  background-repeat: no-repeat;
  background-position: 100% 0%;
  background-size: clamp(12px, calc(var(--ribbon-text-w) * 7 / 100), 18px) auto;
}

/* 白背景の四角は「HPをみたとお伝えください！」のみ。注釈は四角の外（下）に配置 */
.l-header__ribbon-note {
  flex: 0 0 auto;
  text-align: center;
  min-width: 0;
}

.l-header__ribbon-note-box {
  background: #fff;
  color: #1a1a1a;
  border-radius: 4px;
  padding: clamp(4px, 1.5vw, 6px) clamp(6px, 2.5vw, 12px);
  margin: 0;
  font-size: clamp(9px, 2.6vw, 12px);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.l-header__ribbon-note-sub {
  font-size: clamp(7px, 1.8vw, 9px);
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

/* ==========================================================================
   PC幅での表示方針
   今回はSP版のデザインのみを作成しているため、PC幅（768px以上）では
   SP版のデザインをそのまま画面中央に表示し、左右の余白は白で埋める。
   768px未満（スマートフォン実機の幅）にはこの節のスタイルは一切適用されない
   ため、校了済みのSP表示に影響はない。

   ※ このブロックは必ずファイルの最後に置くこと。.l-header-wrap /
   　.l-gnav の素の（メディアクエリなしの）ルールより後に書かないと、
   　同じ詳細度のCSSは「後に書いた方が勝つ」というカスケードの都合で
   　この上書きが無効になってしまう（実際にヘッダーが画面左端に
   　はみ出す不具合が起きたため、この節を末尾に移動している）。
   ========================================================================== */
@media (min-width: 768px) {
  html {
    background: #fff;
  }

  /*
   * 余白を真っ白のままにすると間延びして見えるため、中央エリアに
   * ごく薄いドロップシャドウを付けて「スマホの画面」のような
   * 額縁感を出す（模様やロゴは使わず、控えめな処理に留める）。
   */
  body {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.12);
  }

  /* 追従ヘッダー（position: fixed）は本文の内側ではなく画面基準で
     動くため、bodyのmax-widthだけでは追従せず、別途中央寄せする。
     影も本文側と切れ目なくつながるよう同じ濃さを付けておく。 */
  .l-header-wrap {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 480px;
    transform: translateX(-50%);
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.12);
  }

  /*
   * PC幅では、ハンバーガーで開閉する代わりに、ナビゲーションメニューを
   * 右側の余白部分に常時表示するパネルとして扱う。
   * （きっかけは「閉じている状態でも右の余白に薄く見えてしまう」
   * 見た目だったが、それを逆手に取り、PC幅限定の常設メニューとして
   * 意図的に採用した。SP版の挙動・見た目には一切影響しない。）
   */
  .l-gnav {
    /*
     * right基準だと箱が「そこから左方向」に広がってしまい、
     * SP版フレームの内側に重なって表示されてしまっていた。
     * left基準（フレームの右端から右方向に広げる）に直す。
     */
    left: calc(50% + 240px);
    right: auto;
    transform: translateX(0);
  }

  /* 常時表示になるため、開閉のためのハンバーガーボタン・✕ボタンは不要 */
  .l-header__menu-btn,
  .l-gnav__close {
    display: none;
  }

  /*
   * ここから下は「PC幅でSP版デザインを480px幅の額縁に収めた時の、
   * ヘッダー内文字・アイコンのサイズ調整」専用の上書き。768px未満
   * （実機スマホ）には一切効かないので、SP版の見た目・動作には影響しない。
   *
   * ベース（SP）側は vw（真のビューポート幅）基準のclamp()にしている。
   * PC幅だとvw基準のままでは「要素ごとにclampの上限に達するタイミングが
   * バラバラになり、見た目のバランスが崩れる」問題があったため、ここだけ
   * assets/js/main.js が実測してセットする --header-w（ヘッダー自身の
   * 描画幅） / --ribbon-text-w（リボンのテキスト部分の描画幅）を基準に
   * したcalc()に差し替え、フレーム内でバランス良く見えるようにしている。
   */
  .l-header__inner {
    gap: clamp(4px, calc(var(--header-w) * 2 / 100), 16px);
    height: clamp(80px, calc(var(--header-w) * 18 / 100), 150px);
    padding: 0 clamp(8px, calc(var(--header-w) * 3 / 100), 16px);
  }

  .l-header__cta-text {
    font-size: clamp(9px, calc(var(--header-w) * 2.6 / 100), 13px);
  }

  .l-header__tel {
    gap: clamp(3px, calc(var(--header-w) * 1 / 100), 6px);
    font-size: clamp(14px, calc(var(--header-w) * 4.5 / 100), 22px);
  }

  .l-header__tel-icon {
    width: clamp(14px, calc(var(--header-w) * 3.5 / 100), 20px);
  }

  .l-header__hours {
    font-size: clamp(8px, calc(var(--header-w) * 2 / 100), 11px);
  }

  .l-header__ribbon-inner {
    gap: clamp(6px, calc(var(--header-w) * 2 / 100), 16px);
  }

  .l-header__ribbon-main {
    gap: clamp(4px, calc(var(--header-w) * 1.5 / 100), 8px);
  }

  .l-header__ribbon-tel-icon {
    width: clamp(18px, calc(var(--header-w) * 4.5 / 100), 26px);
  }

  /*
   * tel-word/kaitori-word/de/up/bangは、SP側のベースルールで既に
   * --ribbon-text-w基準のcalc()にしているため、ここでの再指定は不要
   * （PC幅でもSP側と同じ計算式がそのまま効く）。
   */

  .l-header__ribbon-note-box {
    padding: clamp(4px, calc(var(--header-w) * 1.5 / 100), 6px)
      clamp(6px, calc(var(--header-w) * 2.5 / 100), 12px);
    font-size: clamp(9px, calc(var(--header-w) * 2.6 / 100), 12px);
  }

  .l-header__ribbon-note-sub {
    font-size: clamp(7px, calc(var(--header-w) * 1.8 / 100), 9px);
  }
}