/*
 * main サイト全ページ共通のヘッダー・ドロワー・相談CTA・フッター（承認済みモック A-1）。トップ（/）は chrome.css＋top.css、
 * 下層81ページは現行 WordPress のテーマCSS／プラグインCSS／テーマJS（jQuery・origin.js）の上にこれを読む。
 * スコープは各部品のルート（.t-header / .t-cta / .t-footer）。トップでは body.home から継承していた文字・色の初期値も
 * ルートで明示し、テーマCSS（autoptimize_single_bf2b…）・GeneratePress のグローバル規則（img/p/ul/a/h2 など）に左右されないようにする。
 * リンク色は --c で渡す（色の指定は下の「リンク」に集約）。
 */
:root {
  --t-navy: #013f73;
  --t-ink: #22303f;
  --t-muted: #5b6b7c;
  --t-gray: #6b7280;
  --t-cream: #f6f3ec;
  --t-line: #ece7db;
  --t-accent: #e8a04c;
  --t-pale: #eef3f8;
  --t-border: #dfe6ee;
  --t-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --t-body: "Noto Sans JP", sans-serif;
  /* 1280px 幅のときの左右余白 56px。広い画面では中身を 1168px に収めて中央寄せ */
  --t-gutter: max(56px, calc((100% - 1168px) / 2));
}

/* ---------- 部品の初期値（トップの body.home と同じ値をルートで持つ） ---------- */
.t-header, .t-cta, .t-footer {
  font-family: var(--t-head);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--t-ink);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
:is(.t-header, .t-cta, .t-footer), :is(.t-header, .t-cta, .t-footer) *, :is(.t-header, .t-cta, .t-footer) *::before, :is(.t-header, .t-cta, .t-footer) *::after { box-sizing: border-box; }
/* リンク（テーマの a{color:currentColor}・GeneratePress の a / a:hover より強く、トップの body.home a と同じ詳細度） */
body :is(.t-header, .t-cta, .t-footer) a { color: var(--c, var(--t-navy)); text-decoration: none; }
body :is(.t-header, .t-cta, .t-footer) a:is(:hover, :focus, :active) { color: var(--c, #0a5aa0); }
body :is(.t-header, .t-cta, .t-footer) :is(a, button):focus-visible { outline: 2px solid var(--t-accent); outline-offset: 2px; }
/* 要素の初期値の打ち消しは :where() で詳細度を上げない（各部品の余白指定を優先させる） */
:where(.t-header, .t-cta, .t-footer) :is(ul, li > ul) { list-style: none; margin: 0; padding: 0; }
:where(.t-header, .t-cta, .t-footer) :is(p, h2, h3) { margin: 0; }
/* テーマCSSの p{line-height:2} を打ち消す（行の高さを指定していない p はトップと同じく親から継承） */
:where(.t-header, .t-cta, .t-footer) p { line-height: inherit; }
/* テーマCSSの html button{font-size:16px;font-family:…;font-weight:500} を打ち消す（ハンバーガーは文字を持たないが計算値をトップと揃える） */
.t-header button { font: inherit; }
.t-cta h2 { font-family: var(--t-head); }
.t-header svg, .t-cta svg, .t-footer svg { vertical-align: middle; }

/* ---------- ヘッダー ---------- */
.t-header { position: relative; z-index: 50; background: #fff; }
/* 1200px 以上: ロゴの右を2段にし、上段に電話・LINE、下段にメニュー（現行メニュー7項目が1段に収まらないため） */
.t-header__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "brand . tel line" "brand nav nav nav";
  column-gap: 20px; row-gap: 2px; align-items: center; padding: 10px var(--t-gutter);
}
.t-brand { grid-area: brand; display: flex; align-items: center; gap: 14px; --c: var(--t-navy); min-width: 0; }
.t-brand__mark { flex-shrink: 0; }
.t-brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.t-brand__name { font-size: 19px; font-weight: 900; letter-spacing: 0.06em; line-height: 1.3; white-space: nowrap; }
.t-brand__en { font-size: 10px; letter-spacing: 0.16em; color: var(--t-gray); font-family: var(--t-body); line-height: 1.4; white-space: nowrap; }
.t-nav { grid-area: nav; justify-self: end; }
.t-nav__list { display: flex; align-items: center; gap: 22px; }
.t-nav__item { position: relative; }
.t-nav__link { display: flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 700; --c: var(--t-ink); white-space: nowrap; }
.t-nav__link:hover { --c: var(--t-navy); }
.has-sub > .t-nav__link::after {
  content: ""; width: 6px; height: 6px; margin-left: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: 0.5;
}
.t-nav__sub {
  position: absolute; top: 100%; left: -16px; width: max-content; min-width: 220px; max-width: 360px; padding: 8px;
  background: #fff; border-radius: 12px; box-shadow: 0 10px 28px rgba(1, 63, 115, 0.16);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.has-sub:hover > .t-nav__sub, .has-sub:focus-within > .t-nav__sub { opacity: 1; visibility: visible; transform: none; }
.t-nav__sublink { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.5; --c: var(--t-ink); }
.t-nav__sublink:hover { background: var(--t-pale); --c: var(--t-navy); }
/* 現在地（aria-current="page"。旧ヘッダーと同じ完全一致）はホバーと同じ紺の文字 */
.t-nav__link[aria-current="page"], .t-nav__sublink[aria-current="page"] { --c: var(--t-navy); }
.t-header__tel { grid-area: tel; justify-self: end; display: flex; align-items: center; gap: 10px; --c: var(--t-navy); flex-shrink: 0; }
.t-header__telbody { display: flex; flex-direction: column; gap: 1px; }
.t-header__telnum { font-family: var(--t-body); font-size: 22px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
.t-header__telnote { font-size: 10px; color: var(--t-muted); font-weight: 700; white-space: nowrap; }
.t-header__line {
  grid-area: line; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 999px; flex-shrink: 0;
  background: #06c755; --c: #fff; font-size: 14px; font-weight: 700;
}
.t-header__line:hover { background: #05b34c; }
.t-header__telbtn, .t-menubtn { display: none; }

/* ---------- 相談の呼びかけ ---------- */
.t-cta { margin-top: 64px; padding: 48px var(--t-gutter); background: var(--t-navy); color: #fff; }
.t-cta__inner {
  display: grid; grid-template-columns: max-content max-content minmax(0, 1fr) auto;
  grid-template-areas: "title title title tel" "addr addr addr tel" "line form note note";
  column-gap: 12px; row-gap: 8px; align-items: center;
}
.t-cta__title { grid-area: title; align-self: end; font-size: 26px; font-weight: 900; line-height: 1.5; color: #fff; }
.t-cta__addr { grid-area: addr; align-self: start; font-family: var(--t-body); font-size: 13px; line-height: 1.8; opacity: 0.85; }
.t-cta__tel {
  grid-area: tel; align-self: end; margin-left: 40px; display: flex; align-items: center; gap: 16px;
  padding: 16px 28px; background: #fff; border-radius: 16px; --c: var(--t-navy);
}
.t-cta__tel svg { flex-shrink: 0; }
.t-cta__telbody { display: flex; flex-direction: column; gap: 2px; }
.t-cta__tellabel, .t-cta__telnote { font-size: 12px; font-weight: 700; color: var(--t-muted); }
.t-cta__telnum { font-family: var(--t-body); font-size: 34px; font-weight: 900; letter-spacing: 0.04em; line-height: 1; }
.t-cta__line, .t-cta__form {
  margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; font-size: 15px; font-weight: 900; line-height: 1.5; --c: #fff;
}
.t-cta__line { grid-area: line; background: #06c755; }
.t-cta__line:hover { background: #05b34c; }
.t-cta__form { grid-area: form; border: 2px solid rgba(255, 255, 255, 0.6); }
.t-cta__form:hover { background: rgba(255, 255, 255, 0.1); }
.t-cta__note { grid-area: note; margin: 16px 0 0 8px; font-size: 12px; opacity: 0.8; }

/* ---------- フッター ---------- */
.t-footer { padding: 48px var(--t-gutter) 0; background: #fff; color: var(--t-ink); }
.t-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "info map" "nav nav"; gap: 32px 48px; }
.t-footer__info { grid-area: info; }
.t-brand--footer { margin-right: 0; width: max-content; max-width: 100%; }
.t-brand--footer .t-brand__name { font-size: 16px; }
.t-footer__addr { margin-top: 16px; font-family: var(--t-body); font-size: 13px; font-weight: 400; line-height: 1.8; color: #4b5563; }
.t-footer__tel { margin-top: 8px; font-family: var(--t-body); font-size: 13px; font-weight: 400; line-height: 1.8; color: #4b5563; }
.t-footer__tel a { --c: var(--t-navy); font-weight: 700; text-decoration: underline; }
.t-footer__map { grid-area: map; }
.t-footer__map iframe { display: block; width: 100%; height: 240px; border-radius: 16px; }
.t-footer__nav { grid-area: nav; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 24px; padding-top: 28px; border-top: 1px solid var(--t-line); }
.t-footer__head { margin-bottom: 6px; font-size: 13px; font-weight: 900; color: var(--t-navy); }
.t-footer__group:nth-child(2) .t-footer__links { columns: 2; column-gap: 24px; }
.t-footer__links li { break-inside: avoid; }
.t-footer__links a { display: inline-block; padding: 7px 0; font-family: var(--t-body); font-size: 13px; font-weight: 400; line-height: 1.5; --c: var(--t-ink); }
.t-footer__links a:hover { --c: var(--t-navy); text-decoration: underline; }
.t-footer__copy { margin-top: 32px; padding: 18px 0; border-top: 1px solid var(--t-line); text-align: center; font-family: var(--t-body); font-size: 11px; letter-spacing: 0.08em; color: var(--t-gray); }

/* ================= 1200〜1279px ================= */
@media (min-width: 1200px) and (max-width: 1279px) {
  .t-nav__list { gap: 16px; }
}

/* ================= 1199px 以下（メニューはハンバーガーで開くドロワー） ================= */
@media (max-width: 1199px) {
  .t-header__inner { display: flex; align-items: center; gap: 16px; height: 84px; padding-top: 0; padding-bottom: 0; }
  .t-brand { margin-right: auto; }
  .t-header .t-menubtn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
    width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer;
  }
  .t-menubtn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--t-navy); transition: transform 0.2s, opacity 0.2s; }
  .t-header.is-open .t-menubtn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .t-header.is-open .t-menubtn span:nth-child(2) { opacity: 0; }
  .t-header.is-open .t-menubtn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .t-header .t-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; justify-self: stretch; max-height: calc(100vh - 84px); overflow-y: auto;
    padding: 4px var(--t-gutter) 20px; background: #fff; border-top: 1px solid var(--t-line); box-shadow: 0 16px 24px rgba(0, 0, 0, 0.12);
  }
  .t-header.is-open .t-nav { display: block; }
  .t-header .t-nav__sub { margin: 0; }
  .t-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .t-nav__item { border-bottom: 1px solid var(--t-line); }
  .t-nav__link { min-height: 52px; font-size: 15px; }
  .has-sub > .t-nav__link::after { display: none; }
  .t-nav__sub {
    position: static; width: auto; min-width: 0; max-width: none; padding: 0 0 10px 12px;
    opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 0; transition: none;
  }
  .t-nav__sublink { padding: 8px 10px; }
}

/* ================= 1023px 以下 ================= */
@media (max-width: 1023px) {
  :root { --t-gutter: 32px; }
  .t-header__line { display: none; }
  .t-cta__inner { grid-template-areas: "title title title" "addr addr addr" "tel tel tel" "line form note"; grid-template-columns: max-content max-content minmax(0, 1fr); }
  .t-cta__tel { justify-self: start; margin: 16px 0 0; }
  .t-footer__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .t-footer__group:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
}

/* ================= 767px 以下（スマホ） ================= */
@media (max-width: 767px) {
  :root { --t-gutter: 16px; }
  .t-header__inner { height: 64px; gap: 6px; }
  .t-brand { gap: 10px; }
  .t-header .t-brand__mark { width: 32px; height: 37px; }
  .t-header .t-brand__text { gap: 1px; }
  .t-header .t-brand__name { font-size: 14px; letter-spacing: 0; }
  .t-header .t-brand__en { font-size: 8px; letter-spacing: 0.12em; }
  .t-header__tel { display: none; }
  .t-header .t-brand { flex-shrink: 1; }
  .t-header__telbtn {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 44px; height: 44px; border-radius: 999px; background: var(--t-navy);
  }
  .t-header .t-nav { max-height: calc(100vh - 64px); }

  .t-cta { margin-top: 24px; padding: 28px 20px; }
  .t-cta__inner { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
  .t-cta__title { order: 1; font-size: 20px; }
  .t-cta__tel { order: 2; justify-content: center; gap: 12px; height: 64px; margin: 0; padding: 0 20px; border-radius: 999px; }
  .t-cta__tel svg { width: 24px; height: 24px; }
  .t-cta__telbody { align-items: flex-start; gap: 1px; }
  .t-cta__telnum { font-size: 22px; }
  .t-cta__telnote { font-size: 10px; }
  .t-cta__line { order: 3; height: 54px; margin: 0; padding: 0 16px; }
  .t-cta__form { order: 4; height: 52px; margin: 0; padding: 0 16px; }
  .t-cta__addr { order: 5; font-size: 12px; line-height: 1.7; }
  .t-cta__note { order: 6; margin: -14px 0 0; font-family: var(--t-body); font-size: 12px; line-height: 1.7; opacity: 0.85; }

  .t-footer { padding-top: 32px; }
  .t-footer__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "map" "nav"; gap: 24px; }
  .t-brand--footer .t-brand__name { font-size: 14px; letter-spacing: 0; }
  .t-brand--footer .t-brand__en { font-size: 8px; letter-spacing: 0.12em; }
  .t-footer__map iframe { height: 220px; }
  .t-footer__nav { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 20px; }
  .t-footer__group:nth-child(2) { grid-column: auto; grid-row: auto; }
  .t-footer__group:nth-child(2) .t-footer__links { columns: 1; }
  .t-footer__copy { margin-top: 24px; }
}

/* 390px 前後: 事務所名が電話・メニューのボタンに重ならないよう少し詰める */
@media (max-width: 420px) {
  .t-header .t-brand__name { font-size: min(14px, calc((100vw - 174px) / 16.5)); }
  .t-header .t-brand__en { letter-spacing: 0.06em; }
}

/* ================= 下層ページ: テーマCSS／テーマJS との共存 ================= */
/* テーマCSSの html main{padding-top:100px}（768px 以下は 70px）は旧ヘッダー（header.site-header{position:absolute}）の高さ分の上余白。
   新ヘッダーは通常フローなので本文（main#main）の上余白だけ 0 にする（他の余白は触らない） */
body:not(.home) main#main { padding-top: 0; }

/* 画面幅で出し分ける表記（モックの PC 版／スマホ版の違い） */
@media (min-width: 768px) { .t-sp-only { display: none !important; } }
@media (max-width: 767px) { .t-pc-only { display: none !important; } }

/* 記事本文の番号付きリスト（テーマCSSは html ol{list-style:none} で番号を消している。パンくずの #breadcrumb は除く） */
.editable ol:not(#breadcrumb) { list-style: decimal; padding-left: 1.5em; }
.editable ol:not(#breadcrumb) li { margin-bottom: 0.75em; padding-left: 0.25em; }
