/*
 * p-*  プロジェクト固有
 *
 * 出典: 本番の Autoptimize 統合CSS（2026-09-01 取得）。
 *
 * theme_mods:
 *   gnav-hover-effect   = 'underline'
 *   gnav-current-effect = 'underline'
 * → .p-global-nav--hover-underline / --current-underline の2クラスだけを実装する。
 *   他の効果（extend-underline / background-color …）は使われていないので書かない。
 */

/* ===========================================================================
 * グローバルナビ（PC）
 * =========================================================================== */

.p-global-nav {
  --global-nav-submenu-open-delay: 0.3s;
}

.p-global-nav[aria-hidden="true"] {
  visibility: hidden;
}

.p-global-nav .c-navbar__item > a {
  color: inherit;
  flex-direction: column;
  position: relative;
  --_font-size-level: -1;
  font-size: var(--_font-size);
  font-weight: 700;
  line-height: var(--_line-height);
  padding: var(--_padding-1);
  transition:
    background-color var(--_global--transition-duration) var(--_global--transition-function-timing),
    color var(--_global--transition-duration) var(--_global--transition-function-timing);
}

/*
 * ラベルは <span> で包まれている（inc/nav.php の nav_menu_item_title フィルタ）。
 * この display:flex が無いと、説明文つきメニューの縦位置が変わる。
 */
.p-global-nav .c-navbar__item > a > span {
  align-items: center;
  display: flex;
  flex-direction: row;
}

.p-global-nav .c-navbar__item > a > small {
  display: block;
  --_font-size-level: -2;
  font-size: var(--_font-size);
  font-weight: 400;
  line-height: var(--_line-height);
}

/* --- 下線（ホバー） --- */

.p-global-nav--hover-underline .c-navbar__item > a::after {
  transition: background-color var(--_global--transition-duration) var(--_global--transition-function-timing);
}

@media (any-hover: hover) {
  .p-global-nav--hover-underline .c-navbar__item:hover > a::after {
    background-color: var(--wp--preset--color--sm-accent);
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    transform: none;
    width: auto;
  }
}

.p-global-nav--hover-underline .c-navbar__item:focus-visible > a::after {
  background-color: var(--wp--preset--color--sm-accent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transform: none;
  width: auto;
}

/*
 * --- 下線（現在地） ---
 * data-active-menu は assets/js/global-nav.js が付ける。
 * サーバ側の current-menu-item ではないので注意（本番と同じ挙動）。
 */
.p-global-nav--current-underline .c-navbar__item[data-active-menu] > a::after {
  background-color: var(--wp--preset--color--sm-accent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  transform: none;
  width: auto;
}

/* ===========================================================================
 * ヘッダCTA（お問合せ / 無料相談）のクリック領域（D-064）
 * ===========================================================================
 * 症状: 緑・青の矩形はボタンに見えるのに、**文字の行だけがリンク**だった。
 * アイコンの上や余白をクリックしても反応しない。実測（2026-09-08 / pc）:
 *
 *   li.header-line-btn / li.header-consultation-btn   80 × 90
 *   その中の <a>                                      72 × 17   ← ここだけ反応
 *
 *   sp（ドロワー）  li 269 × 57 / a 72 × 29
 *
 * 原因は **見た目と当たり判定の担当がずれている**こと。
 * 背景色・サイズ・アイコン（`::before`）はすべて追加CSS（カスタマイザー）が
 * `li` 側に付けており、`a` は `padding:0!important` / `width:72px` で
 * テキスト1行ぶんしか覆っていない。
 *
 * 【直し方】`li` の見た目は1pxも変えずに、当たり判定だけを広げる。
 * `a::before` を `position:absolute; inset:0` で `li` いっぱいに敷く
 * （いわゆる stretched link）。背景を持たない透明な箱なので描画は変わらず、
 * `document.elementFromPoint()` は `a` を返すようになる。
 *
 * - `li` 側に `::before`（アイコン）を移動したりはしない。
 *   本番の背景画像URLをテーマCSSへ持ち込むことになり、環境依存になる
 * - 下線効果は `a::after` を使っているので、こちらは `::before` を使う
 * - `a` の `position` を static へ戻すのは、`::before` の基準を
 *   `a`（72×17）ではなく `li`（80×90）にするため。オフセットを持たない
 *   `relative` → `static` なのでレイアウトは動かない
 * =========================================================================== */

.header-line-btn,
.header-consultation-btn {
  position: relative;
}

/*
 * `.p-global-nav .c-navbar__item > a` が `position: relative` を付けているので、
 * 同じ詳細度以上で打ち消す。ドロワー側は元から static。
 */
.p-global-nav .c-navbar__item.header-line-btn > a,
.p-global-nav .c-navbar__item.header-consultation-btn > a,
.header-line-btn > a,
.header-consultation-btn > a {
  position: static;
}

.header-line-btn > a::before,
.header-consultation-btn > a::before {
  content: "";
  position: absolute;
  inset: 0;
}

/*
 * フォーカスリングも矩形全体に出す。
 * `a`（72×17）に付く既定のリングを消して、敷いた `::before` 側に出す。
 */
.header-line-btn > a:focus-visible,
.header-consultation-btn > a:focus-visible {
  outline: none;
}

.header-line-btn > a:focus-visible::before,
.header-consultation-btn > a:focus-visible::before {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

/* ===========================================================================
 * フッター追従ナビ（モバイル）
 *
 * PC（1024px以上）では display:none。
 * SP では画面下端に固定されるため、フルページ撮影ではビューポート先頭に写り込む。
 * =========================================================================== */

.p-footer-sticky-nav {
  background-color: var(--_color-white);
  bottom: 0;
  box-shadow: 0 0 2px 0 #00000040;
  left: 0;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  right: 0;
  z-index: 9999;
  transition: opacity var(--_global--transition-duration) var(--_global--transition-function-timing);
}

@media (min-width: 1024px) {
  .p-footer-sticky-nav {
    display: none;
  }
}

.p-footer-sticky-nav[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
}

.p-footer-sticky-nav a {
  color: inherit;
  display: block;
  font-size: 10px;
  line-height: 1.2;
  padding: 0.5em 0;
  text-decoration: none;
}

.p-footer-sticky-nav .c-navbar__item {
  flex: 1 1 0%;
}

.p-footer-sticky-nav .c-navbar__item > a {
  color: inherit;
}

/* ===========================================================================
 * アーカイブ / 検索フォーム
 * =========================================================================== */

.p-archive .c-pagination,
.p-archive + .c-pagination {
  margin-top: var(--_margin2);
}

.p-term-description {
  margin-bottom: var(--_margin2);
}

.p-search-form .c-input-group__btn {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ===========================================================================
 * フッター（会社情報 + サイトマップ + コピーライト）
 *
 * 2026-09-02 追加。移行前の本番には無かったブロックなので、
 * ここだけは「本番の統合CSSからの書き起こし」ではなく新規に書いている。
 * → docs/decisions.md D-035
 *
 * ---------------------------------------------------------------------------
 * 追加CSS（custom_css / wp_head 優先度 101）との衝突
 * ---------------------------------------------------------------------------
 * 本番の追加CSSに要素セレクタの指定があり、フッター内の <ul> は全部これを浴びる。
 *
 *     footer ul            { list-style:none; padding:0; margin:0; text-align:center }
 *     footer ul li         { display:inline-block }
 *     footer ul li + li::before { content:"｜"; margin:0 10px; color:#ccc }
 *     footer ul li a       { color:#333; font-size:14px; text-decoration:none }
 *
 * 追加CSS のほうが後に出るので、同じ詳細度なら向こうが勝つ。
 * クラス1つぶん詳細度を上げて打ち消す。**要素セレクタで書き返さないこと。**
 * （p-footer-sub-nav 側にはあえて何もしない。追加CSS に任せる）
 *
 * なお **"｜" の区切りは実際には出ない**（2026-09-02 実測）。追加CSS の中に
 * 同じセレクタが3回あり、最後の1つが `content:""` / `margin:0` で潰しているため。
 *
 *     footer ul li + li::before { content:"｜"; margin:0 10px; color:#ccc }
 *     footer ul li + li::before { margin:0 5px }
 *     footer ul li + li::before { content:""; margin:0 }   ← これが勝つ
 *
 * これは**本番がそう振る舞っている**ということなので直さない（D-026）。
 *
 * 色は _design-system.css（<style id="nm-design-system">）のトークンに合わせる。
 * あちらは wp_head 優先度10 で出るが、カスタムプロパティは使用時に解決されるので
 * 読み込み順は問題にならない。念のため既定値付きの var() で書く。
 * =========================================================================== */

.p-footer-info {
  background-color: var(--nm-cream, #fafaf7);
  border-top: 1px solid var(--nm-line-soft, #ece7df);
  padding-bottom: 20px;
  padding-top: 24px;
  text-align: left;
}

@media (min-width: 640px) {
  .p-footer-info {
    padding-bottom: 48px;
    padding-top: 56px;
  }
}

.p-footer-info__inner {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

/*
 * sp はリンク群を <details> で畳むので、1カラムのまま積んでよい
 * （2カラムに割ると summary が2つ横に並んで、かえって読みにくい）。
 * 640px 以上は従来どおりの多カラム。→ D-040
 */
@media (min-width: 640px) {
  .p-footer-info__inner {
    gap: 36px 24px;
  }
}

@media (min-width: 640px) {
  .p-footer-info__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  .p-footer-info__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .p-footer-info__inner {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  }

  .p-footer-info__brand {
    grid-column: auto;
  }
}

/* --- 左カラム: 屋号と会社情報 --- */

.p-footer-info__name {
  color: var(--nm-navy, #0d3559);
  font-family: var(--nm-serif, "Noto Serif JP", "Hiragino Mincho ProN", serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin: 0 0 10px;
}

@media (min-width: 640px) {
  .p-footer-info__name {
    margin-bottom: 14px;
  }
}

.p-footer-info__lede {
  color: var(--nm-text-muted, #6b7280);
  font-size: 12px;
  letter-spacing: 0.03em;
  line-height: 1.8;
  margin: 0 0 14px;
  max-width: 34em;
}

@media (min-width: 640px) {
  .p-footer-info__lede {
    font-size: 13px;
    line-height: 1.9;
    margin-bottom: 22px;
  }
}

.p-footer-info__meta {
  margin: 0;
}

/*
 * sp でも key/value を横並びにする。1カラムに積むと5行で2倍の高さになる。
 * key 列は 4.5em（「所在地」「受付時間」が折り返さない最小幅の実測値）。
 */
.p-footer-info__meta-row {
  display: grid;
  gap: 2px 10px;
  grid-template-columns: 4.5em minmax(0, 1fr);
  margin-bottom: 6px;
}

@media (min-width: 480px) {
  .p-footer-info__meta-row {
    gap: 2px 12px;
    grid-template-columns: 5.5em minmax(0, 1fr);
    margin-bottom: 12px;
  }
}

.p-footer-info__meta-key {
  color: var(--nm-text-light, #9ca3af);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.7;
  margin: 0;
}

@media (min-width: 480px) {
  .p-footer-info__meta-key {
    letter-spacing: 0.12em;
    line-height: 1.9;
  }
}

.p-footer-info__meta-value {
  color: var(--nm-text, #1f2937);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  line-height: 1.7;
  margin: 0;
}

@media (min-width: 480px) {
  .p-footer-info__meta-value {
    font-size: 13px;
    letter-spacing: 0.03em;
    line-height: 1.8;
  }
}

/*
 * 郵便番号。sp では住所と同じ行に流して1行ぶん縮める。
 * 640px 以上は値の列が広いので、従来どおり改行して見せる。
 */
.p-footer-info__zip {
  margin-right: 0.5em;
}

@media (min-width: 640px) {
  .p-footer-info__zip {
    display: block;
    margin-right: 0;
  }
}

.p-footer-info__meta-value a {
  color: inherit;
  text-decoration: none;
}

.p-footer-info__meta-value a:hover,
.p-footer-info__meta-value a:focus-visible {
  text-decoration: underline;
}

.p-footer-info__note {
  color: var(--nm-text-light, #9ca3af);
  display: block;
  font-size: 11px;
  line-height: 1.7;
  margin-top: 2px;
}

/* --- 右3カラム: サイトマップ ---
 *
 * sp だけ <details> で畳む（D-040）。マークアップは常に `open` 付きで、
 * assets/js/footer-nav.js が 639px 以下でのみ外す。
 * 640px 以上は開いたままなので、**PC の見た目は従来と同じ**。
 */

.p-footer-info__group {
  /* details のデフォルト余白を消す。開閉しても外側の高さ計算に影響させない。 */
  margin: 0;
}

.p-footer-info__summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  /* リストマーカー（▶ / ▼）を消す。Safari は ::-webkit-details-marker が要る。 */
  list-style: none;
  padding: 0;
}

.p-footer-info__summary::-webkit-details-marker {
  display: none;
}

/* キーボード操作の可視フォーカス。マーカーを消したぶん、ここは残す。 */
.p-footer-info__summary:focus-visible {
  outline: 2px solid var(--nm-navy, #0d3559);
  outline-offset: 2px;
}

.p-footer-info__heading {
  color: var(--nm-navy, #0d3559);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin: 0 0 10px;
  padding-bottom: 8px;
  position: relative;
}

@media (min-width: 640px) {
  .p-footer-info__heading {
    margin-bottom: 16px;
    padding-bottom: 10px;
  }
}

.p-footer-info__heading::after {
  background: var(--nm-gold, #b08d57);
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 24px;
}

/* 開閉マーカー（sp のみ）。CSS だけで描く V 字。 */
.p-footer-info__marker {
  border-bottom: 1px solid var(--nm-text-light, #9ca3af);
  border-right: 1px solid var(--nm-text-light, #9ca3af);
  display: block;
  flex: 0 0 auto;
  height: 7px;
  margin-bottom: 8px;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  width: 7px;
}

.p-footer-info__group[open] .p-footer-info__marker {
  transform: rotate(-135deg);
}

/*
 * 640px 以上では常に開いており、開閉させない。
 * pointer-events で誤クリックを止め、キーボード側は footer-nav.js が開き直す。
 */
@media (min-width: 640px) {
  .p-footer-info__summary {
    cursor: default;
    display: block;
    pointer-events: none;
  }

  .p-footer-info__marker {
    display: none;
  }
}

/*
 * 追加CSS の `footer ul { text-align:center }` / `footer ul li { display:inline-block }` /
 * `footer ul li + li::before { content:"｜" }` を打ち消す。クラス指定で詳細度を上げている。
 */
.p-footer-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.p-footer-info__list .p-footer-info__item {
  display: block;
  margin: 0 0 8px;
}

@media (min-width: 640px) {
  .p-footer-info__list .p-footer-info__item {
    margin-bottom: 10px;
  }
}

.p-footer-info__list .p-footer-info__item + .p-footer-info__item::before {
  content: none;
  margin: 0;
}

.p-footer-info__list .p-footer-info__link {
  color: var(--nm-text-muted, #6b7280);
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.03em;
  line-height: 1.7;
  text-decoration: none;
  transition: color 0.2s ease;
}

.p-footer-info__list .p-footer-info__link:hover,
.p-footer-info__list .p-footer-info__link:focus-visible {
  color: var(--nm-navy, #0d3559);
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * サブナビ（会社概要 / プライバシーポリシー）とコピーライト
 *
 * .p-footer-sub-nav の中身は追加CSS に任せる（"｜" の区切りはあちらが描く）。
 * ここでは会社情報ブロックとの間に境界線を引くだけにとどめる。
 * ------------------------------------------------------------------------ */

.l-footer--default .p-footer-sub-nav {
  border-top: 1px solid var(--nm-line-soft, #ece7df);
}

.p-footer-copyright {
  border-top: 1px solid var(--nm-line-soft, #ece7df);
  padding-bottom: 14px;
  padding-top: 14px;
}

.p-footer-copyright__text {
  color: var(--nm-text-light, #9ca3af);
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * モバイル: 追従ナビ（position:fixed / 実測 54px）にフッター末尾が隠れる問題
 *
 * body にも .l-container にも下余白が無いため、最下部まで送ると
 * コピーライト行が追従ナビの裏に入る（移行前の本番も同じ状態だった）。
 * 追従ナビが出る 1024px 未満だけ、その高さぶんを空ける。
 * ------------------------------------------------------------------------ */

@media (max-width: 1023.9px) {
  .l-footer--default .p-footer-copyright {
    padding-bottom: calc(14px + 54px + env(safe-area-inset-bottom));
  }
}