@charset "UTF-8";
/* ============================================================
   北大阪総合法律事務所 TOPページ コーディング
   - 画像はすべてダミーです。img/ フォルダ内の同名ファイルを
     差し替えてください（サイズ・比率は現状のダミー画像と同じ
     ものをご用意いただくと、レイアウト崩れを防げます）。
   - ブレイクポイント：768px（それ以下をSP表示とする）
   ============================================================ */

/* ---------- Reset (最低限) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body, h1, h2, h3, h4, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; display: block; }
a { text-decoration: none; color: inherit; }

/* 画像リンクは基本的にホバーでopacity .8 */
a img { transition: opacity .2s ease; }
a:hover img { opacity: .8; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
iframe { display: block; }

/* ---------- Variables ---------- */
:root {
  --c-primary: #63a945;      /* 基本色：メインの緑 (ヘッダー下ナビ・フッター・ボタン) */
  --c-primary-dark: #518b39;
  --c-primary-deep: #406e2d;  /* ロゴ・見出し等の濃い緑 */
  --c-accent: #f2a63d;        /* オレンジ（CTAボタン） */
  --c-accent-dark: #e0912a;
  --c-cream: #fdf7e6;         /* ベージュ系セクション背景 */
  --c-yellow: #fdf6d4;        /* 取り扱い業務セクション背景 */
  --c-text: #333333;
  --c-text-sub: #666666;
  --c-white: #ffffff;
  --c-border: #e2ded0;
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --header-h: 150px;
  --header-h-scrolled: 90px; /* PCでスクロール時にheader__topが縮む高さ */
  --header-h-sp: 60px;
}

body {
  font-family: var(--font-base);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  background: var(--c-white);
  padding-top: var(--header-h);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  padding: 8px 16px;
  z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

.l-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.sp-only { display: none; }

/* ============================================================
   共通パーツ
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  border-radius: 999px;
  text-align: center;
  line-height: 1.4;
  transition: opacity .2s, transform .2s;
}
.btn .icon { flex: none; }
.btn:hover { opacity: .85; }

.btn--consult {
  background: var(--c-primary-deep);
  color: #fff;
  padding: 10px 18px;
  font-size: 14px;
  white-space: nowrap;
}

.btn--orange {
  background: var(--c-accent);
  color: #4a3300;
  padding: 16px 34px;
  font-size: 16px;
}
.btn--orange:hover { background: var(--c-accent-dark); }

.btn--outline {
  background: #fff;
  color: var(--c-primary);
  border: 2px solid var(--c-primary);
  padding: 14px 40px;
  font-size: 15px;
}
.btn--outline:hover { background: var(--c-primary); color: #fff; }

.sec-btn-wrap {
  text-align: center;
  margin-top: 40px;
}

.sec-ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-primary-deep);
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: .04em;
}
.sec-ttl__icon { color: var(--c-primary); flex: none; }
.sec-ttl--sm { font-size: 20px; margin-bottom: 32px; }

/* サブ見出し（アイコン＋テキスト＋下部破線）。下層ページの各セクション内小見出しで共通使用 */
.sub-ttl {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-primary);
  font-size: 24px;
  font-weight: 500;
  margin: 64px 0 18px;
  padding-bottom: 5px;
  border-bottom: 2px dashed var(--c-primary);
}
.sub-ttl-icon { width: 36px; height: 36px; }

/* サブサブ見出し（アイコンなし、テキストのみ）。下層ページの各セクション内で共通使用 */
.sub-subttl {
  font-size: 22px;
  font-weight: 500;
  color: #00a99d;
  margin-bottom: 10px;
}

/* ブロックエディタ共通見出し（取り扱い業務・トピックス記事本文など） */
.sec-ttl-icon {
  margin: 0 auto 16px;
}
.sec-ttl-icon img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}
h2.sec-ttl-text.sec-ttl-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-primary-deep);
  letter-spacing: .04em;
  margin-bottom: 48px;
}

.wp-block-heading.is-style-sub-ttl {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--c-primary);
  font-size: 24px;
  font-weight: 500;
  margin: 64px 0 18px;
  padding-bottom: 5px;
  border-bottom: 2px dashed var(--c-primary);
}
.wp-block-heading.is-style-sub-ttl::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 36px;
  height: 36px;
  background: url("../img/common/icon_clip.png") no-repeat center / contain;
}

.wp-block-heading.is-style-sub-subttl {
  font-size: 22px;
  font-weight: 500;
  color: #00a99d;
  margin-bottom: 10px;
}

/* チェックリスト（アイコン＋テキスト）。汎用コンポーネントとしてサイト全体で共通使用 */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.checklist__icon { flex: none; width: 29px; height: 30px; margin-top: 4px; }
.checklist__txt { font-size: 18px; line-height: 1.8; }

/* ブロックエディタ用 チェックリスト（リストブロックのスタイル「チェックリスト」） */
ul.wp-block-list.is-style-checklist {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
  list-style: none;
  padding-left: 0;
}
ul.wp-block-list.is-style-checklist > li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  line-height: 1.8;
}
ul.wp-block-list.is-style-checklist > li::before {
  content: "";
  display: block;
  flex: none;
  width: 29px;
  height: 30px;
  margin-top: 4px;
  background: url("../img/common/icon_check.svg") no-repeat center / contain;
}

section { padding: 72px 0; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.header__top {
  border-bottom: 3px solid var(--c-primary);
  transition: height .25s ease;
}

/* l-containerに依存しない、ヘッダー専用のコンテナ幅指定（SPで左右paddingが入らないように） */
.header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--header-h);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  transition: height .25s ease;
}

.header__logo { display: flex; align-items: center; }
.header__logo img {
  max-width: 650px;
  width: 100%;
  transition: max-width .25s ease;
}

/* PCでスクロールしたらheader__topのみ縮小し、ロゴ・バナーも比率に合わせて縮小（SPはサイズ変化させない） */
@media (min-width: 769px) {
  /* --header-hはheader__inner（ロゴ行）だけの高さで、下のgnav行(約61px)を含んでいない。
     bodyのpadding-topが--header-hのままだとヘッダー未スクロール時にgnav分だけ本文上部が
     ヘッダーの下に隠れてしまうため、PCのみ実際の合計高さで上書きする */
  body { padding-top: 214px; }
  .header.is-scrolled .header__inner { height: var(--header-h-scrolled); }
  .header.is-scrolled .header__logo img { max-width: 420px; }
  .header.is-scrolled .header__banner--tel img,
  .header.is-scrolled .header__banner--form img,
  .header.is-scrolled .header__banner--en img,
  .header.is-scrolled .header__banner--ko img { max-width: 170px; }
}

.header__actions {
  align-items: center;
  display: flex;
}

/* 右側4バナー（電話／相談フォーム／ENGLISH／한국어、いずれもPNG画像）を
   2×2で隙間なく敷き詰める。書き出し画像の縦横比(460:92 / 460:78)を保ったまま、
   2行の高さ合計がヘッダー高さ(90px)にぴったり収まるサイズを指定している */
.header__banners {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
}

.header__banner { display: block; line-height: 0; }
.header__banner img { display: block; }

.header__banner--tel img,
.header__banner--form img,
.header__banner--en img,
.header__banner--ko img {
  max-width: 230px;
  width: 100%;
  transition: max-width .25s ease;
}

.header__banner--form-sp { display: none; }

.header__lang { display: flex; gap: 6px; }
.header__lang-btn {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.header__lang-btn--en { background: var(--c-primary); }
.header__lang-btn--ko { background: var(--c-accent); color: #4a3300; }

.header__menu-btn { display: none; align-self: center; }

/* 下段グローバルナビ（PC）。l-containerには依存せずヘッダー専用の幅指定にする */
.gnav__list {
  display: flex;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}
.gnav__list li { flex: 1; }
.gnav__list a {
  display: block;
  text-align: center;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 18px;
  padding: 14px 8px;
  border-left: 1px solid rgba(255,255,255,.25);
  transition: background .2s;
}
.gnav__list li:first-child a { border-left: none; }
.gnav__list a:hover { background: var(--c-primary); color: #fff;}

.gnav__sp-extra { display: none; }
.gnav__overlay { display: none; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1450 / 699;
}
.hero__bg { position: absolute; inset: 0; }
/* 3枚の画像を一定間隔でふわっとクロスフェードさせるスライドショー */
.hero__bg-img {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: heroSlide 18s infinite;
}
.hero__bg-img:nth-child(1) { animation-delay: 0s; }
.hero__bg-img:nth-child(2) { animation-delay: 6s; }
.hero__bg-img:nth-child(3) { animation-delay: 12s; }
.hero__bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes heroSlide {
  0% { opacity: 0; }
  8.33% { opacity: 1; }
  33.33% { opacity: 1; }
  41.67% { opacity: 0; }
  100% { opacity: 0; }
}

.hero__inner {
  position: absolute;
  left: 0;
  bottom: 52px;
  z-index: 1;
  width: 53.4%;
  max-width: 774px;
  background: rgba(255, 255, 255, .75);
  padding: 32px 64px 40px;
}
.hero__catch {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #00a99d;
  margin-bottom: 12px;
}
.hero__lead {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 24px;
}
.hero__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 301px;
  height: 61px;
  background: #00a99d;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.hero__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.hero__btn:hover .hero__btn-arrow { transform: translate(4px, -50%); }

/* ============================================================
   職場のトラブル
   ============================================================ */
.trouble { background: var(--c-cream); }
/* PC：左右2カラム（挿絵48% / 本文48%、gap4%＝480px:480px:40pxと同じ比率）を
   %指定にして、ブラウザ幅が狭くなっても見切れず追従するようにしている */
.trouble__inner {
  display: grid;
  grid-template-columns: 48% 48%;
  column-gap: 4%;
  align-items: center;
}
.trouble__figure img { width: 100%; height: auto; }
.trouble__icon { width: 60px; height: 60px; margin: 0 auto 16px; }

/* SP専用のアイコン+見出し（挿絵より上に出す）。PCでは非表示 */
.trouble__head--sp { display: none; }
.trouble__ttl {
  font-size: 30px;
  font-weight: 700;
  color: #00a99d;
  margin-bottom: 22px;
  line-height: 1.5;
}
.trouble__txt {
  color: var(--c-text-sub);
  font-size: 18px;
  margin-bottom: 14px;
}
.trouble__btn { display: block; width: 100%; max-width: 345px; margin: 20px auto 0; }
.trouble__btn img { width: 100%; }

/* ============================================================
   私たちの強み
   ============================================================ */
.strength { background: #fff; }
/* 見出し・アイコンはこのセクション専用の色/サイズに上書き（他セクションのsec-ttlには影響させない） */
/* trouble__ttlと同様、アイコンは見出しテキストの上部中央配置 */
.strength .sec-ttl { color: #00a99d; flex-direction: column; gap: 16px; }
.strength .sec-ttl__icon { width: 60px; height: 60px; }

.strength__list { display: flex; flex-direction: column; gap: 64px; }
/* 2カラムの比率は「職場のトラブル」と同じ48%:48%（gap4%） */
.strength__item {
  display: grid;
  grid-template-columns: 48% 48%;
  column-gap: 4%;
  align-items: center;
}
.strength__item--reverse .strength__figure { order: 2; }
.strength__item--reverse .strength__body { order: 1; }
.strength__figure img { width: 100%; height: auto; }
.strength__ttl {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 16px;
  line-height: 1.5;
}
.strength__txt {
  font-size: 18px;
  color: var(--c-text-sub);
}

.strength__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 301px;
  height: 61px;
  background: #00a99d;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.strength__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.strength__btn:hover .strength__btn-arrow { transform: translate(4px, -50%); }

/* ============================================================
   取り扱い業務
   ============================================================ */
.service { background: var(--c-yellow); }
/* trouble__ttlと同様、アイコンは見出しテキストの上部中央配置 */
.service .sec-ttl { color: #00a99d; flex-direction: column; gap: 16px; }
.service .sec-ttl__icon { width: 62px; height: 62px; }

.service__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
/* liはグリッドに影響させず、中のaを直接グリッドアイテムにする */
.service__list-item { display: contents; }
.service__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  padding: 28px 16px;
  min-height: 230px;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
}
/* 6業務の背景色は#63a945／#00a99dを1つずつ交互に */
.service__list-item:nth-child(odd) .service__item { background: var(--c-primary); }
.service__list-item:nth-child(even) .service__item { background: #00a99d; }

.service__icon { display: flex; }
.service__icon img { width: 115px; height: 115px; }

.service__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
}

/* 各業務カード右端の矢印アイコン（詳しくはこちらボタンと同じ位置） */
.service__item-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.service__item:hover .service__item-arrow { transform: translate(4px, -50%); }

.service__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 296px;
  height: 61px;
  background: #00a99d;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.service__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.service__btn:hover .service__btn-arrow { transform: translate(4px, -50%); }

/* ============================================================
   トピックス
   ============================================================ */
.topics { background: #fff; }
.topics .sec-ttl { color: #00a99d; flex-direction: column; gap: 16px; }
.topics .sec-ttl__icon { width: 62px; height: 62px; }

.topics__tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.topics__tab {
  padding: 5px 18px;
  border: 2px solid #00a99d;
  color: #00a99d;
  background: #fff;
  font-weight: 500;
  font-size: 16px;
}
.topics__tab.is-active {
  background: #00a99d;
  color: #fff;
}

.topics__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}
.topics__item a { display: block; }
.topics__thumb {
  display: block;
  overflow: hidden;
  margin-bottom: 14px;
}
.topics__thumb img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* タイトル・カテゴリ+日付をthumb下にまとめる */
.topics__body { display: block; }
.topics__txt {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 14px;
  line-height: 1.6;
}
.topics__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topics__cat {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #00a99d;
  border: 2px solid #00a99d;
  padding: 1px 10px;
}
.topics__date {
  display: block;
  font-size: 16px;
  color: var(--c-text);
}
.topics__item[hidden] { display: none; }

.topics__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 306px;
  height: 61px;
  background: #00a99d;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.topics__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.topics__btn:hover .topics__btn-arrow { transform: translate(4px, -50%); }

/* ページネーション（アイコンなし、数字＋前へ/次へ）。記事一覧系ページで共通使用 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  margin-top: 48px;
}
.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: #e5e5e5;
  color: var(--c-text);
  font-size: 16px;
  font-weight: 500;
}
.pagination__item--current { background: var(--c-primary); color: #fff; }

/* ============================================================
   ご相談フォーム CTA
   ============================================================ */
.form-cta {
  background: var(--c-cream);
  text-align: center;
}
.form-cta .sec-ttl { color: #00a99d; flex-direction: column; gap: 16px; }
.form-cta .sec-ttl__icon { width: 62px; height: 62px; }
.form-cta__txt {
  font-size: 22px;
  text-align: center;
}

.form-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 306px;
  height: 61px;
  background: #00a99d;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.form-cta__btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.form-cta__btn:hover .form-cta__btn-arrow { transform: translate(4px, -50%); }

/* ============================================================
   多言語対応
   ============================================================ */
.lang { background: #fff; }
.lang .sec-ttl { color: #00a99d; flex-direction: column; gap: 16px; }
.lang .sec-ttl__icon { width: 62px; height: 62px; }

/* 「取り扱い業務」の各カードと同じスタイルのリンクボタンを2つ、中央寄せで配置 */
.lang__list {
  display: grid;
  grid-template-columns: repeat(2, 310px);
  justify-content: center;
  gap: 35px;
}
.lang__list-item { display: contents; }
.lang__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 230px;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}
.lang__item--en { background: #00a99d; }
.lang__item--kr { background: var(--c-primary); }
.lang__item--phone { background: var(--c-primary); }
.lang__item--form { background: #00a99d; }
.lang__icon { display: flex; }
.lang__icon img { width: 115px; height: 115px; }
.lang__item-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.lang__item:hover .lang__item-arrow { transform: translate(4px, -50%); }

/* ============================================================
   アクセス
   ============================================================ */
.access { background: #fffce6; text-align: center; padding-bottom: 0; }
.access .sec-ttl { color: #00a99d; flex-direction: column; gap: 16px; }
.access .sec-ttl__icon { width: 62px; height: 62px; }
.access__info { margin-bottom: 32px; }
.access__address, .access__tel {
  font-size: 18px;
  margin-bottom: 6px;
}
/* .l-container(max-width:1000px)の外に置き、ブラウザ幅いっぱいに表示する */
.access__map {
  position: relative;
  width: 100%;
  height: 435px;
}
.access__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   弁護士のご紹介（下層ページ：post-lawyer/index.html）
   ============================================================ */
.lawyer-hero { position: relative; overflow: hidden; padding: 0; }
.lawyer-hero__bg { position: relative; aspect-ratio: 1450 / 501; }
.lawyer-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.lawyer-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lawyer-hero__ttl {
  background: rgba(99, 169, 69, .8);
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 24px 46px;
}

.breadcrumb {
  padding: 4px 0;
  font-size: 14px;
}
.breadcrumb a { color: var(--c-primary); text-decoration: underline; }
.breadcrumb span { color: #000; margin-left: 4px; }

.lawyer-list { padding: 24px 0 72px; }
.lawyer-list .sec-ttl { color: var(--c-primary); flex-direction: column; gap: 16px; }
.lawyer-list .sec-ttl__icon { width: 62px; height: 62px; }
.lawyer-list__lead {
  font-size: 18px;
  margin-bottom: 48px;
}
.lawyer-list__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 36px;
  row-gap: 48px;
}
.lawyer-list__list-item { display: contents; }
.lawyer-list__body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.lawyer-list__card { display: flex; gap: 20px; border: 1px solid var(--c-primary); padding: 0; }
.lawyer-list__photo { flex: none; width: 89px; }
.lawyer-list__name { font-size: 20px; font-weight: 500; color: var(--c-primary); line-height: 1.4; }
.lawyer-list__en { font-size: 14px; color: var(--c-primary); line-height: 1.4; }
.lawyer-list__year { font-size: 14px; line-height: 1.4; margin-top: 5px;}

/* ============================================================
   弁護士詳細ページ（post-lawyer/[スラッグ]/index.html）
   ============================================================ */
.lawyer-detail { padding: 24px 0 72px; }
.lawyer-detail .sec-ttl,
.lawyer-detail__english .sec-ttl { color: var(--c-primary); flex-direction: column; gap: 16px; margin-bottom: 24px; }
.lawyer-detail .sec-ttl__icon,
.lawyer-detail__english .sec-ttl__icon { width: 62px; height: 62px; }
.lawyer-detail__en-name {
  text-align: center;
  color: var(--c-primary);
  font-size: 20px;
  margin-bottom: 24px;
}
.lawyer-detail__photo { text-align: center; margin-bottom: 48px; }
.lawyer-detail__photo img { width: 240px; margin: 0 auto; }

.lawyer-detail__row {
  display: flex;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--c-primary);
}
.lawyer-detail__row:first-of-type { border-top: 1px solid var(--c-primary); }
.lawyer-detail__label {
  flex: none;
  width: 200px;
  color: var(--c-primary);
  font-weight: 500;
  font-size: 18px;
}
.lawyer-detail__value { flex: 1; font-size: 18px; line-height: 1.8; }

.lawyer-detail__back { text-align: center; margin-top: 40px; }
.lawyer-detail__back-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 306px;
  height: 61px;
  background: #00a99d;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.lawyer-detail__back-btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.lawyer-detail__back-btn:hover .lawyer-detail__back-btn-arrow { transform: translate(4px, -50%); }

/* Available in English（英語対応可能な弁護士のみ表示する固定コンテンツ） */
.lawyer-detail__en-lawyer {
  text-align: center;
  color: var(--c-primary);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 32px;
}
.lawyer-detail__en-bio { font-size: 18px; line-height: 1.9; margin: 40px 0 0; }

.lawyer-detail__fee-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.lawyer-detail__fee-item {
  background: #fff;
  border: 2px solid var(--c-primary);
}
.lawyer-detail__fee-item--teal { border-color: #00a99d; }
.lawyer-detail__fee-box {
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  padding: 24px 12px;
}
.lawyer-detail__fee-box--green { background: var(--c-primary); }
.lawyer-detail__fee-box--teal { background: #00a99d; }
.lawyer-detail__fee-price {
  color: red;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  padding: 16px 12px 24px;
}

/* ============================================================
   弁護士費用について（固定ページ：cost/index.html）
   ============================================================ */
.cost { padding: 24px 0 72px; }
.cost .sec-ttl { color: var(--c-primary); flex-direction: column; gap: 16px; margin-bottom: 24px; }
.cost .sec-ttl__icon { width: 62px; height: 62px; }
.cost__lead { font-size: 18px; margin-bottom: 48px; }
.cost__txt { font-size: 18px; line-height: 1.8; margin-bottom: 48px; }

/* 相談料バナー（2カラム）／受任後の費用（3カラム）共通のボーダー付きカード */
.cost__consult-grid,
.cost__type-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 48px;
}
.cost__consult-grid { grid-template-columns: repeat(2, 1fr); }
.cost__type-grid { grid-template-columns: repeat(3, 1fr); }

.cost__fee-item { background: #fff; border: 2px solid var(--c-primary); }
.cost__fee-item--teal { border-color: #00a99d; }
.cost__fee-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 126px;
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  padding: 24px 12px;
}
.cost__fee-box--green { background: var(--c-primary); }
.cost__fee-box--teal { background: #00a99d; }
.cost__fee-box--sm { min-height: 0; font-size: 22px; padding: 16px 12px; }
.cost__fee-price {
  color: red;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  padding: 16px 12px 24px;
}
.cost__fee-price a { color: var(--c-primary); text-decoration: underline; }
.cost__fee-price-sub { color: #000; }
.cost__fee-desc {
  font-size: 16px;
  line-height: 1.7;
  padding: 20px 20px 20px;
}

.cost__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  margin-bottom: 48px;
}
.cost__table th,
.cost__table td { padding: 14px 20px; text-align: left; font-weight: 400; }
.cost__table th { font-weight: 700; }
.cost__table tr:nth-child(odd) { background: #e5e5e5; }

.cost__banner { display: block; margin: 0 auto; }

/* ============================================================
   職場のトラブル特設ページ（固定ページ：shokuba_trouble/index.html）
   ============================================================ */
.shokuba-hero { background: #f2faff; padding: 20px 0;}

.shokuba { padding: 24px 0 72px; }
.shokuba--worries { background: #f2faff; }
.shokuba .sec-ttl { color: #0071bc; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.shokuba .sec-ttl__icon { width: 62px; height: 62px; }
.shokuba__lead { font-size: 18px; margin-bottom: 48px; }
.shokuba__txt { font-size: 18px; line-height: 1.8; margin-bottom: 48px; }
.shokuba__txt:last-child { margin-bottom: 0; }

/* こんな悩みにお応えします：9件のグリッド（TOPの取り扱い業務と同じくリンク＋右矢印） */
.shokuba__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.shokuba__list-item { display: contents; }
.shokuba__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  padding: 28px 16px;
  min-height: 230px;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
}
.shokuba__list-item:nth-child(odd) .shokuba__item { background: #00a99d; }
.shokuba__list-item:nth-child(even) .shokuba__item { background: var(--c-primary); }
.shokuba__item-icon { display: flex; }
.shokuba__item-icon img { width: 115px; height: 115px; }
.shokuba__item-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.shokuba__item:hover .shokuba__item-arrow { transform: translate(4px, -50%); }

.shokuba__banner { display: block; margin: 0 auto 48px; }

.shokuba__flow-img { display: block; margin: 0 auto 48px; max-width: 660px; }
.shokuba__flow-img img { width: 100%; height: auto; }

.shokuba__fee {
  color: red;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 48px;
  text-align: center;
}

.shokuba__case {
  border: 1px solid var(--c-border);
  padding: 24px;
  margin-bottom: 24px;
}
.shokuba__case-ttl { font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.shokuba__case-list { font-size: 18px; line-height: 1.8; }

/* ============================================================
   取り扱い業務一覧（固定ページ：case-list/index.html）
   ============================================================ */
.case-list { padding: 24px 0 72px; }
.case-list__lead { font-size: 18px; margin-bottom: 48px; }
.case-list .sec-ttl { color: var(--c-primary); flex-direction: column; gap: 16px; margin-bottom: 24px; }
.case-list .sec-ttl__icon { width: 62px; height: 62px; }
.case-list__txt { font-size: 18px; line-height: 1.8; }
.case-list__txt a { color: var(--c-primary); text-decoration: underline; }

/* ============================================================
   取り扱い業務：各業務詳細ページ（例：case-list/saimuseiri/index.html）
   ============================================================ */
.case-detail { padding: 24px 0 72px; }
.case-detail .sec-ttl { color: var(--c-primary); flex-direction: column; gap: 16px; margin-bottom: 24px; }
.case-detail .sec-ttl__icon { width: 62px; height: 62px; }
.case-detail__txt { font-size: 18px; line-height: 1.8; }
.case-detail__txt a { color: var(--c-primary); text-decoration: underline; }

/* ============================================================
   事務所紹介（固定ページ：about/index.html）
   ============================================================ */
.about { padding: 24px 0 72px; }
.about .sec-ttl { color: var(--c-primary); flex-direction: column; gap: 16px; margin-bottom: 24px; }
.about .sec-ttl__icon { width: 62px; height: 62px; }
.about__lead { font-size: 18px; margin-bottom: 48px; }
.about__txt { font-size: 18px; line-height: 1.8; margin-bottom: 48px; }

.about__list { display: flex; flex-direction: column; gap: 16px; }
.about__list-item { display: flex; gap: 10px; }
.about__list-num { flex: none; font-size: 18px; color: var(--c-primary); }
.about__list-txt { font-size: 18px; line-height: 1.8; }

.about__info-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 20px;
}
.about__info-row:nth-child(odd) { background: #fffce6; }
.about__info-label { font-size: 18px; }
.about__info-value { font-size: 18px; line-height: 1.6; }
.about__info-value a { color: var(--c-primary); text-decoration: underline; }

.about__case-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
}
.about__case-list li:last-child { margin-bottom: 0; }
.about__info-note { margin-top: 28px; }
.about__case-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c-primary);
}

/* ============================================================
   記事詳細（例：topix/[スラッグ]/index.html）
   WP化時はアイキャッチ＋タイトル以降はブロックエディタ（シンプルな1カラム）で運用予定
   ============================================================ */
.article { padding: 24px 0 72px; }
.article__eyecatch { margin-bottom: 24px; }
.article__eyecatch img { width: 100%; aspect-ratio: 1000 / 525; object-fit: cover; }
.article__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-primary);
  line-height: 1.4;
  margin-bottom: 24px;
}
.article__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid #00a99d;
}
.article__cat {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #00a99d;
  border: 2px solid #00a99d;
  padding: 1px 10px;
}
.article__author {
  display: inline-block;
  background: #00a99d;
  color: #fff;
  font-size: 16px;
  padding: 4px 14px;
}
.article__date { font-size: 16px; color: var(--c-text); }
.article__share { display: flex; gap: 10px; margin-left: auto; }
.article__share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: #707070;
}
.article__share svg { width: 18px; height: 18px; fill: currentColor; }

/* 記事本文（WPブロックエディタ相当）：見出し・段落・画像のシンプルな共通スタイル */
.article-body { font-size: 18px; line-height: 1.9; }
.article-body h2 {
  font-size: 24px;
  font-weight: 700;
  color: #00a99d;
  line-height: 1.5;
  margin-bottom: 24px;
}
.article-body p { margin-bottom: 32px; }
.article-body p:last-child { margin-bottom: 0; }
.article-body a { color: var(--c-primary); text-decoration: underline; }
.article-body figure { margin: 0 0 32px; }
.article-body img { display: block; margin: 0 auto; max-width: 800px; width: 100%; height: auto; }

.article__back { text-align: center; margin-top: 48px; }
.article__back-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 306px;
  height: 61px;
  background: #00a99d;
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.article__back-btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
.article__back-btn:hover .article__back-btn-arrow { transform: translate(4px, -50%); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--c-primary);
  color: #fff;
  padding: 56px 0 60px;
  position: relative;
}
.footer__top {
  text-align: center;
  margin-bottom: 24px;
}
.footer__logo { margin-bottom: 20px; }
.footer__logo img { margin: 0 auto; width: 100%; max-width: 506px; }
.footer__sns {
  display: flex;
  justify-content: center;
  gap: 24px;
}
.footer__sns a { display: flex; }
.footer__sns img { width: 40px; height: 40px; }

.footer__info { text-align: center; margin-bottom: 32px; }
.footer__address, .footer__tel {
  font-size: 16px;
  margin-bottom: 6px;
}

/* ナビは3グループ（HOME系／お知らせ系／言語切替）を横に並べる */
.footer__nav {
  display: flex;
  justify-content: center;
  gap: 60px;
  padding: 24px 0;
  margin-bottom: 20px;
}
.footer__nav-col { display: flex; flex-direction: column; gap: 14px; }
.footer__nav a {
  font-size: 14px;
  display: block;
  text-align: left;
}
.footer__nav a:hover { text-decoration: underline; }

.footer__copyright {
  text-align: center;
  font-size: 14px;
  opacity: .85;
}

.pagetop {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pagetop img { width: 100%; height: 100%; }

/* SP固定フッターナビ：PCでは非表示 */
.sp-fixed-nav { display: none; }

/* ============================================================
   Responsive : 768px以下を SP 表示とする
   ============================================================ */
@media (max-width: 768px) {
  body { padding-top: var(--header-h-sp); font-size: 15px; }
  .pc-only { display: none !important; }
  .sp-only { display: inline; }

  .l-container { padding: 0 20px; }
  section { padding: 52px 0; }

  .sub-ttl { font-size: 18px; margin: 48px 0 16px; }
  .sub-ttl-icon { width: 28px; height: 28px; }
  .sub-subttl { font-size: 18px; margin-bottom: 10px; }
  h2.sec-ttl-text.sec-ttl-text { font-size: 24px; margin-bottom: 32px; }
  .wp-block-heading.is-style-sub-ttl { font-size: 18px; margin: 48px 0 16px; }
  .wp-block-heading.is-style-sub-ttl::before { width: 28px; height: 28px; }
  .wp-block-heading.is-style-sub-subttl { font-size: 18px; margin-bottom: 10px; }
  .checklist { gap: 16px; margin-bottom: 32px; }
  .checklist__txt { font-size: 15px; }
  ul.wp-block-list.is-style-checklist { gap: 16px; margin-bottom: 32px; }
  ul.wp-block-list.is-style-checklist > li { font-size: 15px; }

  /* --- Header --- */
  /* SPは緑ボーダーの代わりに、うっすらドロップシャドウで境目をつける */
  .header__top {
    border-bottom: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
  }
  .header__inner { height: var(--header-h-sp); }
  .header__logo img { height: 40px; }

  /* SPでは相談フォームの黄アイコン（専用画像）のみ表示、他の4バナーは非表示 */
  .header__banner--tel,
  .header__banner--form,
  .header__banner--en,
  .header__banner--ko { display: none; }

  .header__banner--form-sp { display: block; }
  .header__banner--form-sp img { height: 60px; width: 60px; }

  .header__banners { display: flex; align-items: center; }

  /* メニューボタンとフォームボタンをヘッダー右端にマージンなしで隙間なく配置 */
  .header__actions { align-items: center; gap: 0; }

  .header__menu-btn em { display: none; }

  .header__menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 60px;
    height: 60px;
    background: var(--c-primary);
  }
  .header__menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform .25s, opacity .25s;
  }
  .header__menu-btn em {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    color: var(--c-primary-deep);
    margin-top: 2px;
  }
  .header__menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header__menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* --- グローバルナビ（SPドロワー化） --- */
  .gnav {
    position: fixed;
    top: var(--header-h-sp);
    right: 0;
    width: 78%;
    max-width: 320px;
    height: calc(100% - var(--header-h-sp));
    background: #fff;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    z-index: 150;
  }
  .gnav.is-open { transform: translateX(0); }
  .gnav__list { flex-direction: column; background: none; }
  .gnav__list a {
    color: var(--c-text);
    text-align: left;
    padding: 16px 24px;
    border-left: none;
    border-bottom: 1px solid var(--c-border);
    font-size: 15px;
  }
  .gnav__sp-extra {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    padding: 24px;
  }
  .gnav__sp-extra .btn--consult { width: 100%; }
  .gnav__overlay {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--header-h-sp);
    background: rgba(0,0,0,.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
    z-index: 140;
  }
  .gnav__overlay.is-open { opacity: 1; visibility: visible; }

  /* --- Hero --- */
  .hero { aspect-ratio: 1 / 1; }
  .hero__inner {
    width: 87.9%;
    max-width: 378px;
    bottom: 36px;
    padding: 20px 24px 24px;
  }
  .hero__catch { font-size: 24px; margin-bottom: 8px; }
  .hero__lead { font-size: 16px; margin-bottom: 16px; }
  .hero__btn { max-width: 283px; height: 51px; font-size: 20px; }

  /* --- 職場のトラブル（アイコン+見出し → 挿絵 → 本文+ボタンの順に縦積み） --- */
  .trouble__inner {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  /* trouble__body内（PC用）の見出しは非表示にし、挿絵より上のSP専用見出しを表示 */
  .trouble__body > .trouble__head { display: none; }
  .trouble__head--sp { display: block; }
  .trouble__head { text-align: center; }
  .trouble__icon { width: 50px; height: 50px; margin: 0 auto 16px; }
  .trouble__ttl { font-size: 24px; text-align: center; }
  .trouble__figure { max-width: 279px; margin: 0 auto; }
  .trouble__foot { text-align: center; margin-top: 20px; }
  .trouble__txt { font-size: 16px; text-align: left; }
  .trouble__btn { width: 100%; max-width: 320px; }
  .trouble__btn img { width: 100%; }

  /* --- 私たちの強み --- */
  .strength .sec-ttl__icon { width: 50px; height: 50px; }
  .strength__list { gap: 40px; }
  .strength__item {
    grid-template-columns: 1fr;
    row-gap: 20px;
    text-align: center;
  }
  /* SPでは reverse でも並び順を反転させない（画像→見出し→本文の順で統一） */
  .strength__item--reverse .strength__figure,
  .strength__item--reverse .strength__body { order: 0; }
  .strength__figure { max-width: 279px; margin: 0 auto; }
  .strength__ttl { font-size: 22px; }
  .strength__txt { font-size: 16px; text-align: left; }

  /* --- 取り扱い業務 --- */
  .service .sec-ttl__icon { width: 50px; height: 50px; }
  .service__list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .service__item {
    min-height: 140px;
    font-size: 18px;
    padding: 15px 10px;
    gap: 8px;
  }
  .service__icon img { width: 70px; height: 70px; }
  .service__badge { width: 50px; height: 50px; }
  .service__btn { max-width: 320px; font-size: 18px; }

  /* --- トピックス --- */
  .topics .sec-ttl__icon { width: 50px; height: 50px; }
  .topics__tabs { gap: 8px; }
  .topics__tab { padding: 4px 12px; font-size: 14px; }

  /* SPはサムネイル(左)＋タイトル・カテゴリ+日付(右)の横並びカード */
  .topics__list { grid-template-columns: 1fr; gap: 28px; }
  .topics__item a { display: flex; align-items: flex-start; gap: 14px; }
  .topics__thumb { flex: 0 0 110px; width: 110px; margin-bottom: 0; }
  .topics__body { flex: 1; min-width: 0; }
  .topics__txt { font-size: 16px; margin-bottom: 8px; }
  .topics__meta { flex-wrap: wrap; gap: 8px; }
  .topics__cat { font-size: 12px; padding: 0px 10px; }
  .topics__date { font-size: 16px; }

  .topics__btn { max-width: 320px; font-size: 18px; }

  /* --- ご相談フォーム --- */
  .form-cta .sec-ttl__icon { width: 50px; height: 50px; }
  .form-cta__txt { font-size: 18px; }
  .form-cta__btn { max-width: 320px; font-size: 18px; }

  /* --- 多言語 --- */
  .lang .sec-ttl__icon { width: 50px; height: 50px; }
  .lang__list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lang__item { min-height: 140px; font-size: 18px; gap: 8px; }
  .lang__icon img { width: 70px; height: 70px; }

  /* --- アクセス --- */
  .access .sec-ttl__icon { width: 50px; height: 50px; }
  .access__address, .access__tel { font-size: 15px; }
  .access__map { height: 260px; }

  /* --- 弁護士のご紹介 --- */
  .lawyer-hero__bg { aspect-ratio: 430 / 271; }
  .lawyer-hero__ttl { font-size: 21px; padding: 14px 28px; }
  .lawyer-list .sec-ttl__icon { width: 50px; height: 50px; }
  .lawyer-list__lead { font-size: 15px; margin-bottom: 32px; }
  .lawyer-list__grid { grid-template-columns: 1fr; row-gap: 35px; }

  /* --- 弁護士詳細 --- */
  .lawyer-detail .sec-ttl,
  .lawyer-detail__english .sec-ttl { font-size: 24px; }
  .lawyer-detail .sec-ttl__icon,
  .lawyer-detail__english .sec-ttl__icon { width: 50px; height: 50px; }
  .lawyer-detail__en-name { font-size: 16px; }
  .lawyer-detail__photo img { width: 140px; }
  .lawyer-detail__row { gap: 8px; padding: 16px 0; }
  .lawyer-detail__label { width: 110px; font-size: 15px; }
  .lawyer-detail__value { font-size: 15px; }
  .lawyer-detail__en-lawyer { font-size: 18px; }
  .lawyer-detail__en-bio { font-size: 15px; }
  .lawyer-detail__fee-grid { grid-template-columns: 1fr; gap: 16px; }
  .lawyer-detail__fee-box { font-size: 20px; padding: 20px 12px; }
  .lawyer-detail__fee-price { font-size: 16px; }

  /* --- 弁護士費用について --- */
  .cost .sec-ttl { font-size: 24px; }
  .cost .sec-ttl__icon { width: 50px; height: 50px; }
  .cost__lead, .cost__txt { font-size: 15px; margin-bottom: 32px; }
  .cost__consult-grid { gap: 12px; margin-bottom: 32px; }
  .cost__type-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .cost__fee-box { min-height: 84px; font-size: 18px; padding: 16px 12px; }
  .cost__fee-box--sm { min-height: 0; font-size: 16px; padding: 12px; }
  .cost__fee-price { font-size: 15px; padding: 12px 10px 16px; }
  .cost__fee-desc { font-size: 14px; padding: 14px 14px 14px; }
  .cost__table { font-size: 14px; margin-bottom: 32px; }
  .cost__table th, .cost__table td { padding: 10px 12px; }

  /* --- 職場のトラブル特設ページ --- */
  .shokuba .sec-ttl { font-size: 24px; }
  .shokuba .sec-ttl__icon { width: 50px; height: 50px; }
  .shokuba__lead, .shokuba__txt { font-size: 15px; margin-bottom: 32px; }
  .shokuba__list { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .shokuba__item { min-height: 0; padding: 20px 16px; font-size: 18px; }
  .shokuba__item-icon img { width: 70px; height: 70px; }
  .shokuba__fee { font-size: 15px; margin-bottom: 32px; text-align: left; }
  .shokuba__case { padding: 16px; }
  .shokuba__case-list { font-size: 15px; }

  /* --- 取り扱い業務一覧 --- */
  .case-list .sec-ttl { font-size: 24px; }
  .case-list .sec-ttl__icon { width: 50px; height: 50px; }
  .case-list__lead, .case-list__txt { font-size: 15px; }

  /* --- 取り扱い業務：業務詳細 --- */
  .case-detail .sec-ttl { font-size: 24px; }
  .case-detail .sec-ttl__icon { width: 50px; height: 50px; }
  .case-detail__txt { font-size: 15px; }

  /* --- 事務所紹介 --- */
  .about .sec-ttl { font-size: 24px; }
  .about .sec-ttl__icon { width: 50px; height: 50px; }
  .about__lead, .about__txt { font-size: 15px; margin-bottom: 32px; }
  .about__list-num, .about__list-txt { font-size: 15px; }
  .about__info-row { grid-template-columns: 1fr; gap: 4px; padding: 16px; }
  .about__info-label { font-weight: 700; color: var(--c-primary); font-size: 15px; }
  .about__info-value { font-size: 15px; }

  /* --- 記事詳細 --- */
  .article__title { font-size: 22px; margin-bottom: 16px; }
  .article__meta { gap: 8px; padding-bottom: 16px; margin-bottom: 28px; }
  .article__share { width: 100%; margin-left: 0; }
  .article-body { font-size: 15px; }
  .article-body h2 { font-size: 20px; margin-bottom: 16px; }
  .article-body p { margin-bottom: 24px; }

  /* --- フッター --- */
  .footer { padding: 40px 0 100px; }
  .footer__logo img { max-width: 340px; }
  .footer__tel { font-size: 20px; }
  /* SPではメニューを表示しない */
  .footer__nav { display: none; }
  .pagetop { top: auto; bottom: 100px; right: 16px; }

  /* --- SP固定フッターナビ --- */
  .sp-fixed-nav {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 190;
    background: #fffce6;
    box-shadow: 0 -2px 10px rgba(0,0,0,.1);
  }
  .sp-fixed-nav ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }
  .sp-fixed-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    padding: 7px 4px 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--c-primary-deep);
    text-align: center;
    line-height: 1.3;
  }
  .sp-fixed-nav img { width: 40px; height: 40px; }
}

@media (min-width: 769px) {
  .pc-only { display: block; }
}