/* ヘッダーバリアント（有限3型）。
   body のクラスで切り替える: hv-default（テンプレ既定＝元サイトの型）/
   hv-left（ロゴ左・ナビ右横並び）/ hv-center（ロゴ中央・ナビ下中央）。
   テキストロゴ（ロゴ画像が不採用のとき）の見た目もここで定義する。 */

/* --- テキストロゴ（画像ロゴ不採用時のフォールバック） --- */
.text-logo {
  display: inline-block;
  color: #fff;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  letter-spacing: 0.18em;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.footer .text-logo { color: inherit; text-shadow: none; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
/* フッターの枠の幅（140px / 214px）は画像ロゴ用。社名の文字ロゴは収まらず右へはみ出すので、幅を文字に合わせて中央に置く。 */
.footer-logo:has(> .text-logo) { width: auto; max-width: calc(100% - 2 * var(--gutter)); text-align: center; }

/* --- ヘッダーのロゴの明暗（2026-10-18 オーナー指示「背景が黒寄りなら社名は白・
   白寄りなら黒」）。画像ロゴ側は版が分かれていて（logo.png＝社名は黒 /
   logo-light.png＝社名だけ白で印はアクセント色のまま / logo-mono.png＝全部白）。
   ここで効かせるのは影（写真の明暗が一様でないときの
   保険）とテキストロゴの色。影の向きが明暗で逆なのは、暗い地には暗い影・明るい地には明るい
   暈しを敷いて、地と文字の境目のコントラストを作るため。 --- */
body.logo-on-dark .hero .site-logo { filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.45)); }
body.logo-on-light .hero .site-logo { filter: drop-shadow(0 1px 10px rgba(255, 255, 255, 0.65)); }
body.logo-on-light .hero .text-logo {
  color: #111;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.7);
}

/* --- hv-left: ロゴ左・ナビ右横並び（ヘッダー帯として上部に固定表示） --- */
body.hv-left .logo { top: 18px; left: 24px; transform: none; }
body.hv-left .hero-nav nav { justify-content: flex-end; padding-right: 24px; }

/* --- hv-center: ロゴ中央・ナビ下中央 --- */
body.hv-center .logo { left: 50%; transform: translateX(-50%); }
body.hv-center .hero-nav nav { justify-content: center; }

/* --- タブが多いときの詰め（2026-10-19b／上限を入れた 2026-10-19c で 7個向けに引き直し） ---
   原本のヘッダーは欧文6個（Home/Story/Intermission/Reflections/Our Firm/Access）前提の寸法で、
   960px 以上では font-size 13px・gap 6.5% で組んである。こちらのタブは和文 4〜10字 × 最大7個
   （オーナー確定 2026-10-19c「タブの上限を７個、下限を５つに」）。
   実測: 10個だった頃（上限なし・柏木法律・1440px）は nav の幅が 1400px を越え、両端の
   「ホーム」「お問い合わせ」が画面外へはみ出して切れていた。上限7にしたあとの実測
   （黒川税理士＝和英併記で最長「トップページ Top」「料金プラン Fee」の7個）は
     1440px: 原本の寸法のまま 167〜1273px＝収まる
     960px : 原本の寸法のまま 20〜940px＝**ヘッダーの幅にちょうど一致＝左右の余白ゼロ**
   で、960〜1100px の窓ではラベルが1字増えただけで切れる。white-space: nowrap なので
   縮まない＝7個のときだけ字と間隔を詰める（詰めると 960px で 116〜844px）。
   :has() の数え方は「7個目の a がある」＝7個（上限がある以上これが最大）。 */
@media (min-width: 960px) {
  .hero-nav nav:has(> a:nth-child(7)) { gap: 3.4%; font-size: 12.5px; }
}

/* --- 法定表示（フッター定型欄） --- */
.footer .legal-notice {
  margin: 0.6em 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

/* --- 任意セクション（flow / faq）
   原本CSSに対応する型が無いので、ここで素の組版だけ定義する。原本の .concept / .story と
   同じ余白・同じ明朝で揃え、テンプレ全体から浮かないようにしてある。
   2026-10-19: profile / fees / access / contact は LP から外した（オーナー指示）。
   それぞれ専用だった規則は retired/variants.css に退避してある。 --- */
.panel {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) 24px;
}
.panel-head { margin-bottom: clamp(22px, 3vw, 36px); }
.panel-head h2 {
  margin: 0;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  letter-spacing: 0.14em;
  line-height: 1.5;
}
.panel-lead {
  margin: 0.8em 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  opacity: 0.6;
}
.panel-body .prose p { line-height: 2.1; }
.panel-note { margin: 1.4em 0 0; font-size: 0.78rem; opacity: 0.7; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 36px); }
.steps li { border-top: 1px solid rgba(0, 0, 0, 0.12); padding-top: 1.2em; }
.steps .step-no {
  margin: 0 0 0.5em;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--accent, #8a7a5c);
}
.steps h3 { margin: 0 0 0.5em; font-size: 1.02rem; letter-spacing: 0.08em; }
.steps p { margin: 0; font-size: 0.88rem; line-height: 1.9; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.qa { margin: 0; }
.qa dt {
  margin-top: 1.6em;
  padding-left: 1.4em;
  position: relative;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.qa dt::before { content: "Q"; position: absolute; left: 0; color: var(--accent, #8a7a5c); }
.qa dd { margin: 0.6em 0 0 1.4em; font-size: 0.88rem; line-height: 1.95; opacity: 0.85; }

/* --- お知らせ（原本の Reflections 枠＝暗い帯に写真カード3枚）。
   2026-10-19 オーナー指示「新着情報のセクションは…写真のような黒背景に写真があって、と
   いったように変えてください」で、白地の日付＋1行の一覧から原本の型そのものへ戻した。
   帯の地（.thoughts）・見出し背後の輪郭英字（.thoughts-word）・3カラム（.thoughts-grid）・
   カード（.article-card / .article-photo / .article-meta）は原本の style.css がそのまま効く
   ＝ここに足すのは、原本と中身が違うことから来る2点だけ。旧レイアウトと、同じ帯を
   お問い合わせCTAに使っていたときの詰めは retired/variants.css にある。 --- */

/* ① メタ行の高さを確保する。原本のカードは分類チップ（.article-meta > span）が必ず有り、
   日付（time）はその行へ absolute で重ねる作りになっている。こちらのチップと日付は
   素材にあるときだけ出る任意欄なので、チップが無く日付だけある案件では行の高さが 0 になり、
   absolute の日付が次の見出しへ重なる。チップ1個ぶんの高さを下限として確保する。 */
.band-news .article-meta { min-height: 1.5em; }

/* ② 見出しの字送り。原本のカード見出しは随筆の題（「つなぐ」「雪消月」＝2〜3字）だが、
   こちらは告知の文（「さいたま市中浦和に事務所を移転しました」＝20字前後）が入る。
   原本の既定のままだと 1行 11字で3行になるので、字送りを詰めて2行に収める。 */
.band-news .article-card h3 { letter-spacing: 0.02em; }