/**
 * office.css — XiADEN 営業所ページ専用CSS
 * 配置先（本番化時）: wp-theme/xiaden/assets/css/pages/office.css
 * 対象テンプレート: page-office-hokuriku.php（テンプレート名「営業所ページ（北陸）」）
 *
 * 依存: tokens.css / base.css（.si .sec-* .btn-* .rv-fade .s-bottom-cta .bottom-cta-* を流用）
 * 本ファイルは営業所ページ固有のセクションのみ定義します。
 */

/* ---- 01. FV ---- */
.s-office-hero {
  background:linear-gradient(135deg,var(--n) 0%,var(--nd) 100%);
  padding:var(--sp64) 0 var(--sp48); color:var(--w);
}
.office-hero-eyebrow {
  font-size:var(--f-xs); font-weight:700; letter-spacing:.14em;
  color:var(--orm); margin-bottom:var(--sp12);
}
.office-hero-h1 { font-size:clamp(24px,3.6vw,36px); font-weight:900; line-height:1.34; }
.office-hero-sub { font-size:var(--f-body); color:rgba(255,255,255,.86); margin-top:var(--sp16); max-width:720px; line-height:1.8; }
.office-hero-note { font-size:var(--f-xs); color:rgba(255,255,255,.6); margin-top:var(--sp12); }
.office-hero-cta { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:var(--sp32); }
.office-hero-tel { display:flex; flex-direction:column; }
.office-hero-tel small { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--orm); }
.office-hero-tel a { font-size:26px; font-weight:900; letter-spacing:.02em; line-height:1.1; color:var(--w); }
.office-hero-tel a:hover { color:var(--orm); }

/* ---- 02. 営業所情報（NAP） ---- */
.s-office-info { background:var(--w); }
.office-info-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:var(--sp40); align-items:start; }
.office-info-table {
  width:100%; border-collapse:collapse; background:var(--w);
  border:1px solid var(--bm); border-radius:var(--r2); overflow:hidden; box-shadow:var(--s1);
}
.office-info-table th, .office-info-table td {
  text-align:left; padding:14px 18px; font-size:var(--f-sm);
  vertical-align:top; border-bottom:1px solid var(--div); line-height:1.7;
}
.office-info-table th { width:140px; background:var(--bs); color:var(--n); font-weight:700; white-space:nowrap; }
.office-info-table td { color:var(--txm); }
.office-info-table tr:last-child th, .office-info-table tr:last-child td { border-bottom:none; }
.office-info-table .big { font-size:20px; font-weight:900; color:var(--n); }
.office-info-table a { color:var(--or); font-weight:700; }
.office-info-table a:hover { opacity:.8; }
.office-map {
  background:var(--bs); border:1px dashed var(--bm); border-radius:var(--r2);
  min-height:320px; display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--txl); font-size:var(--f-sm); padding:var(--sp24); line-height:1.8;
}

/* ---- 03. 対応できるご相談 ---- */
.s-office-cases { background:var(--bs); }
.office-cases-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.office-case {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:20px 18px; box-shadow:var(--s1); display:flex; gap:12px; align-items:flex-start;
}
.office-case-dot {
  flex:none; width:34px; height:34px; border-radius:var(--rf);
  background:var(--b); color:var(--n); display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:14px;
}
.office-case p { font-size:var(--f-sm); color:var(--txm); line-height:1.7; }

/* ---- 04. 対応方針ステップ ---- */
.s-office-flow { background:var(--w); }
.office-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; list-style:none; padding:0; margin:0; }
.office-step { background:var(--bs); border:1px solid var(--div); border-radius:var(--r2); padding:22px 18px; }
.office-step-num { font-size:24px; font-weight:900; color:var(--or); line-height:1; }
.office-step-ttl { font-size:var(--f-sm); font-weight:700; color:var(--n); margin:10px 0 6px; }
.office-step-desc { font-size:12px; color:var(--txm); line-height:1.7; }
.office-flow-note { margin-top:var(--sp20); font-size:var(--f-xs); color:var(--txl); }

/* ---- 05. 会社情報への導線 ---- */
.s-office-links { background:var(--bs); }
.office-links-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.office-link-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:20px; box-shadow:var(--s1); transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
}
.office-link-card:hover { transform:translateY(-3px); box-shadow:var(--s2); }
.office-link-ttl { font-size:var(--f-sm); font-weight:700; color:var(--n); }
.office-link-desc { font-size:12px; color:var(--txm); margin-top:6px; line-height:1.7; flex:1; }
.office-link-arrow { color:var(--or); font-weight:700; font-size:var(--f-sm); margin-top:12px; display:inline-block; }

/* ---- 06. 下部CTA 追加分（電話） ---- */
.office-bottom-tel { margin-top:var(--sp20); display:flex; flex-direction:column; align-items:center; gap:2px; }
.office-bottom-tel span { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--orm); }
.office-bottom-tel a { font-size:22px; font-weight:900; color:var(--w); letter-spacing:.02em; }
.office-bottom-tel a:hover { color:var(--orm); }

/* ---- 内部リンク: front-page 北陸カード「詳細を見る」（front-page.css に統合してもよい） ---- */
.office-detail-link {
  display:inline-block; margin-top:8px; font-size:12px; font-weight:700;
  color:var(--or); transition:opacity .15s;
}
.office-detail-link:hover { opacity:.78; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px) {
  .office-cases-grid { grid-template-columns:repeat(2,1fr); }
  .office-links-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px) {
  .office-info-layout { grid-template-columns:1fr; }
  .office-flow { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .office-cases-grid,
  .office-flow,
  .office-links-grid { grid-template-columns:1fr; }
  .office-info-table th { width:108px; }
}
@media (hover:none) {
  .office-link-card:hover { transform:none; box-shadow:var(--s1); }
}

/* =============================================================
   営業所一覧（ハブ）ページ用追加分
   配置: 既存 wp-theme/xiaden/assets/css/pages/office.css の末尾に追記
   .office-card 系は front-page.css と同一定義（/office/ で #offices と同じ見た目）。
   ※ /office/ と front-page は同時読み込みされないためクラス重複の衝突なし。
   ============================================================= */
.offices-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:18px; align-items:stretch;
}
.office-card {
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  padding:24px 20px; display:flex; flex-direction:column; gap:8px;
  box-shadow:var(--s1); height:100%;
  transition:box-shadow .22s ease, transform .22s ease;
}
.office-card:hover { box-shadow:var(--s2); transform:translateY(-3px); }
.office-type-badge {
  display:inline-block; background:var(--n); color:var(--w);
  font-size:10px; font-weight:700; letter-spacing:.1em;
  padding:3px 10px; border-radius:var(--rf);
  align-self:flex-start; margin-bottom:4px;
}
.office-type-badge--hq { background:var(--nm); }
.office-name   { font-size:16px; font-weight:700; color:var(--n); line-height:1.3; }
.office-region { font-size:var(--f-sm); font-weight:600; color:var(--or); }
.office-desc   { font-size:12px; color:var(--txm); line-height:1.7; margin-bottom:0; min-height:61px; }
.office-freephone { display:flex; flex-direction:column; gap:3px; margin-top:auto; }
.office-freephone-label { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--or); display:inline-block; margin-bottom:2px; }
.office-freephone-num { display:block; font-size:17px; font-weight:900; color:var(--n); letter-spacing:.02em; line-height:1.1; }
.office-freephone-num:hover { color:var(--or); }
.office-freephone-empty { min-height:50px; margin-top:auto; }
.office-tel-sub { margin-top:6px; padding-top:6px; border-top:1px solid var(--div); }
.office-tel-sub p { font-size:11px; color:var(--txl); line-height:1.75; }
.office-tel-sub p a { color:var(--txl); }
.office-tel-sub-empty { min-height:44px; margin-top:6px; padding-top:6px; border-top:1px solid var(--div); }
.office-address { font-size:11px; color:var(--txl); line-height:1.65; margin-top:auto; padding-top:8px; border-top:1px solid var(--div); }
.offices-expand-note {
  margin-top:var(--sp24); text-align:center; padding:12px 20px;
  background:var(--w); border:1px solid var(--bm); border-radius:var(--r2);
  font-size:var(--f-sm); color:var(--txl);
}
.offices-expand-note a { color:var(--or); font-weight:700; transition:opacity .15s; }
.offices-expand-note a:hover { opacity:.78; }

/* 一覧ページの「詳細を見る」リンクはカード下端に */
.offices-grid .office-detail-link { margin-top:8px; }

@media (max-width:1024px) {
  .offices-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .offices-grid { grid-template-columns:1fr; }
  .office-freephone-empty, .office-tel-sub-empty { display:none; }
}
@media (hover:none) {
  .office-card:hover { box-shadow:var(--s1); transform:none; }
}