@charset "UTF-8";
/* =============================================================================
   法律事務所NEXSEED 共通スタイル
   -----------------------------------------------------------------------------
   方針:
   - 数値はすべて旧サイト(baseline/)の実測値。詳細は docs/design.md。
     「本来こうあるべき」に直さず「今どう見えているか」を再現する。
   - フレームワーク・ビルドツールなし。このファイル1本＋ site.js 1本のみ。
   - アイコンは Font Awesome 5 Free のパスデータを使用（CC BY 4.0）。
     出典: https://fontawesome.com/license/free
   ============================================================================= */

/* --- 1. デザイントークン ---------------------------------------------------- */
:root {
  --font-serif: 'Noto Serif', serif;   /* ラテンのみ。日本語はOS明朝にフォールバック */
  --c-brand: #08875c;                  /* リンク・ボタン・アイコン枠・go-top */
  --c-ink: #3c4146;                    /* 本文 */
  --c-heading: #443f3f;                /* 見出し */
  --c-rule: #eee;                      /* hr・飾り線 */
  --c-topbar-bg: #002b4c;              /* 上部連絡バー */
  --c-topbar-ink: #c5c5c5;
  --c-header-bg: rgba(0, 81, 78, .9);  /* ヘッダー（PC・常時この色） */
  --c-header-bg-solid: #00514e;        /* ヘッダー（≤1024px） */
  --c-nav-ink: #fff;
  --c-nav-ink-hover: #a89a55;
  --c-drawer-bg: #1c1c1c;              /* ハンバーガーのドロワー */
  --c-drawer-line: #252525;
  --c-footer-bg: #003b47;
  --c-footer-ink: #68647a;
  --c-footer-rule: #ebebeb;            /* フッター上端の1px線 */
  --lh-body: 1.8;                      /* 16px → 28.8px */
  --header-h: 81px;                    /* ヘッダー本体の高さ（padding 20+41+20） */
}

/* --- 2. リセット ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6 { color: var(--c-heading); font-weight: 500; }
p { margin: 0 0 20px; }
a { color: var(--c-brand); text-decoration: none; }
strong { font-weight: 600; }          /* 旧テーマの実測値（700 ではない） */
img { max-width: 100%; height: auto; border: 0; }
ul { list-style: none; margin: 0; padding: 0; }

hr {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--c-rule);
  overflow: hidden;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* インラインSVGアイコン（旧 FontAwesome の <i> 相当の寸法・位置） */
.icon {
  display: inline-block;
  height: 1em;
  overflow: visible;
  vertical-align: -.125em;
}

/* --- 3. コンテナ（旧 Bootstrap .container の実使用幅） ---------------------- */
.container { width: 100%; margin: 0 auto; padding: 0 15px; }
@media (min-width: 768px)  { .container { width: 750px; } }
@media (min-width: 992px)  { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* --- 4. スキップリンク ------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  z-index: 100000;
  top: 5px;
  left: 5px;
  width: auto;
  height: auto;
  padding: 15px 23px 14px;
  clip-path: none;
  border-radius: 3px;
  background: #f1f1f1;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  color: #21759b;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}

/* --- 5. 上部連絡バー -------------------------------------------------------- */
.topbar {
  padding: 15px;
  background: var(--c-topbar-bg);
  color: var(--c-topbar-ink);
  font-size: 14px;              /* 14 × 1.8 = 25.2px */
}
.topbar__inner { padding: 0 15px; }
.topbar__info { text-align: center; }
.topbar__phone, .topbar__address { margin-right: 20px; }
.topbar a { color: inherit; }

@media (min-width: 1025px) {
  /* PC は左寄せ・内容幅は行の 50%（旧実測: 1366→653px / 1920→930px） */
  .topbar__info { width: 50%; text-align: start; }
}

/* --- 6. ヘッダー ------------------------------------------------------------ */
.site-header {
  padding: 20px 0;
  background: var(--c-header-bg-solid);
}
.site-header__inner { display: flex; align-items: flex-start; flex-wrap: wrap; }
.site-header__brand { flex: 0 0 100%; display: flex; justify-content: center; padding: 0 15px; }
.site-header__nav   { position: relative; flex: 0 0 100%; display: flex; }

.site-logo { display: block; width: 200px; height: 41px; }

@media (min-width: 768px) {
  .site-header__brand { flex: 0 0 66.6667%; justify-content: flex-start; }
  .site-header__nav   { flex: 0 0 33.3333%; justify-content: flex-end; }
}
@media (min-width: 992px) {
  .site-header__brand { flex: 0 0 33.3333%; }
  .site-header__nav   { flex: 0 0 66.6667%; padding: 0 15px; }
}
@media (min-width: 1025px) {
  /* PC: 上部連絡バーの直下に固定表示され、スクロールすると画面上端へ移動する。
     旧サイトと同じ position:fixed。押し出し用の空 div（旧 .header-clone）は
     置かず、上部連絡バーの margin-bottom で同じ 81px を確保する。
     ※ sticky でも見え方はほぼ同じだが、フルページのスクリーンショットで
       ヘッダーが二重に合成されて写るため（検証が濁る）fixed を採る。 */
  .topbar { margin-bottom: var(--header-h); }
  .site-header {
    position: fixed;
    top: 55px;                 /* 上部連絡バーの高さぶん下げる（旧サイトと同値） */
    right: 0;
    left: 0;
    z-index: 1000;
    background: var(--c-header-bg);
    /* 変化するプロパティだけを対象にする。transition:all にすると
       ヘッダーが常時合成レイヤーになり、フルページ撮影で二重に写る */
    transition: top .3s ease-out, padding .3s ease-out;
  }
  /* 旧 .fixed 相当: スクロールしたら画面上端に張り付く */
  .site-header.is-stuck { top: 0; }
  .site-header__inner { align-items: center; }
}

/* 旧 .float-header 相当: scrollY >= 107 で padding 20px 0 → 5px（高さ 81 → 51、
   左右も 5px 入るのでロゴ・ナビが 5px 内側に寄る）。
   ≤1024px でもヘッダーは static のまま同じだけ縮む＝画面外なので見た目は変わらないが
   文書の高さが 30px 減る（旧サイトの実測: 768px 幅で scrollHeight 9977 → 9947）。
   旧サイトと同じ挙動にするため、PC 用メディアクエリの外に置く。
   ≤767px は高さが変わらず左右だけ 5px 入る（実測 20px 5px）。 */
.site-header.is-compact { padding: 5px; }
@media (max-width: 767px) { .site-header.is-compact { padding: 20px 5px; } }

/* --- 7. ハンバーガーボタン（≤1024px） -------------------------------------- */
.btn-menu {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  margin: 15px auto 0;
  color: #fff;
}
/* 旧サイトのハンバーガーは FontAwesome 4 の \f0c9 を 28px の文字として描いており、
   線はボタンの箱より 14px 下、下辺を 6px はみ出した位置に出ている。
   旧スクリーンショットからの実測（375px 幅）:
     線 3 本 / x 175.13〜199.87（幅 24.74）/ 太さ 4.5 / 間隔 8 / 上端 y=170.5
   SVG の箱は整数ピクセル（x=175.0, y=170.0）に置き、0.125 / 0.5 のズレは
   viewBox の中で吸収する。こうしないと Chrome が SVG 内部を丸めて線がずれる。 */
.icon-bars {
  position: absolute;
  top: 13.625px;   /* ボタン上端 y=156.375 + 13.625 = 170.0 */
  left: 1.5px;     /* ボタン左端 x=173.5   + 1.5    = 175.0 */
  width: 25px;
  height: 21px;
}
@media (min-width: 768px) { .btn-menu { margin: 0; } }
@media (min-width: 1025px) { .btn-menu { display: none; } }

/* --- 8. グローバルナビ ------------------------------------------------------ */
.mainnav a { color: var(--c-nav-ink); }

@media (min-width: 1025px) {
  .mainnav ul { display: flex; justify-content: flex-end; }
  .mainnav li { padding: 0 14px; }
  .mainnav a {
    display: block;
    font-size: 13px;          /* 13 × 1.8 = 23.4px */
    font-weight: 500;
  }
  .mainnav a:hover { color: var(--c-nav-ink-hover); }
}

@media (max-width: 1024px) {
  /* ドロワー: ボタンの真下に絶対配置で重なる（ヘッダーの高さは変わらない） */
  .mainnav {
    /* 幅はカラムの padding box 基準（＝100%）、左端は content box に合わせる。
       旧サイトのドロワーと同じ位置・幅（1024px 幅で x=356.33 / w=682.66） */
    position: absolute;
    top: 28px;
    left: 0;
    z-index: 1000;
    width: 100%;
    max-height: 0;
    margin-top: 15px;
    overflow: hidden;
    visibility: hidden;
    background: var(--c-drawer-bg);
    transition: max-height .3s ease, visibility 0s .3s;
  }
  /* 300px = 項目 49.8px × 6。項目を増やすときはここも増やす */
  .mainnav.is-open {
    max-height: 300px;
    visibility: visible;
    transition: max-height .3s ease, visibility 0s;
  }
  .mainnav li { border-top: 1px solid var(--c-drawer-line); }
  .mainnav a { display: block; padding: 10px 50px; font-weight: 400; }
}
@media (min-width: 992px) and (max-width: 1024px) { .mainnav { left: 15px; } }
@media (max-width: 767px) { .mainnav { top: 43px; } }

/* --- 9. 本文エリア ---------------------------------------------------------- */
.page-wrap { padding: 0; }                 /* 実測 0（旧 CSS の 83px/100px は効いていない） */
.container--doc { padding: 0 30px; }
.doc { margin: 0 -15px; padding: 100px 0; }

/* 10% / 80% / 10% の3カラム（左右は空セル）を1要素で再現。
   幅 = 80% - 6px、左右中央 → 旧レイアウトと同じ x / width になる */
.doc__body { display: flow-root; width: calc(80% - 6px); margin: 0 auto; }
/* ≤780px は1カラムに畳まれ、セル下に 15px の余白が付く（旧レイアウトの実測値） */
@media (max-width: 780px) { .doc__body { width: auto; margin-bottom: 15px; padding: 0 15px; } }

.doc h1 {
  margin: 10px 0 24px;
  font-size: 36px;
  line-height: 1.1;
  text-align: center;
}
@media (max-width: 780px) { .doc h1 { font-size: 32px; } }

/* 擬似見出し（旧: <p><strong>…</strong></p>）を h2 / h3 に格上げ。
   見た目は据え置き＝太字段落とまったく同じ字送り・同じ太さ（実測 600） */
.doc h2,
.doc h3 {
  margin: 0 0 20px;
  color: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: var(--lh-body);
}

/* 旧 HTML は要素と要素の間に <p>&nbsp;</p>（空段落スペーサー）を挟んで余白を作っていた。
   空要素を無くすため、その余白を「直後の要素の margin-top」へ移す。
   隣接マージンは相殺されるので、直前要素の margin-bottom も含んだ値を書く:
     直前が <p>  … 20px（段落の margin-bottom）+ 28.8px（空段落の高さ）+ 20px = 68.8px
     直前が <ol> … 10px（リストの margin-bottom）+ 28.8px + 20px            = 58.8px
   いずれも旧サイトの実測値（docs/design.md §8-2）。前文（.lead）は直前が <hr>
   （margin-bottom 20px）なので <p> と同じ 68.8px になる。 */
.doc .lead,
.doc p + h2,
.doc p + h3 { margin-top: 68.8px; }
.doc ol + h2,
.doc ol + h3 { margin-top: 58.8px; }

/* 日本語の改行位置を固定するためのラッパ（旧サイトから維持） */
.ranryu-inline { display: inline-block; }

/* --- 9-B. 法令文書ページ（/m_and_a_guideline/）------------------------------
   旧サイトはこのページだけリスト装飾をページ内の <style> に直書きしていた。
   同じ指定をここへ移設したもので、値は 1 つも変えていない。 */
.doc__body--legal .indent { text-indent: 1em; }                     /* 冒頭2段落の字下げ */
.doc__body--legal .ki  { margin-top: 68.8px; text-align: center; }  /* 「記」 */
.doc__body--legal .ijo { margin-top: 58.8px; text-align: right; }   /* 「以上」 */

/* リスト。旧ページ CSS の ol,ul{padding-left:1em} と、旧テーマ（Bootstrap 3）の
   ul,ol{margin:0 0 10px}／入れ子は margin-bottom:0 を実測どおり再現する。
   §2 の ul リセット（list-style:none / padding:0）もここで打ち消す。 */
.doc__body--legal ol,
.doc__body--legal ul { margin: 0 0 10px; padding-left: 1em; }
.doc__body--legal ol ol, .doc__body--legal ol ul,
.doc__body--legal ul ol, .doc__body--legal ul ul { margin-bottom: 0; }
/* 入れ子の深さで disc → circle → square（ブラウザ既定と同じ見え方に戻す） */
.doc__body--legal ul { list-style-type: disc; }
.doc__body--legal ol ul, .doc__body--legal ul ul { list-style-type: circle; }
.doc__body--legal ol ol ul, .doc__body--legal ol ul ul,
.doc__body--legal ul ol ul, .doc__body--legal ul ul ul { list-style-type: square; }

/* (1)(2)… の連番（旧: ol.marukakko）。番号は ::before の counter(list-item) で描くので
   li 自身のマーカーは消す。番号の右端を本文の 5px 左に置く。
   ※旧CSSは right: calc(100% + 0.5rem) だが、旧テーマは html{font-size:10px} で
     0.5rem = 5px だった。新サイトの rem は 16px なので実測値の px で書く。 */
.doc__body--legal ol.marukakko li { position: relative; list-style-type: none; }
.doc__body--legal ol.marukakko li::before {
  position: absolute;
  right: calc(100% + 5px);
  content: "(" counter(list-item) ")";
}

/* ①②③ の連番（旧: ol.maru-ol）。丸数字は本文中の <span> の実文字で、
   それを li の外へ 1.5em ぶら下げて番号のように見せている */
.doc__body--legal ol.maru-ol { position: relative; }
.doc__body--legal ol.maru-ol > li { list-style: none; }
.doc__body--legal ol.maru-ol > li > span { position: absolute; margin-left: -1.5em; }

/* 「※」で始まる注記。1 文字ぶら下げて 2 行目以降の頭を揃える（旧: p.kome） */
.doc__body--legal p.kome { margin: 0; text-indent: -1em; }

/* 圏点（傍点）。旧: .dots { text-emphasis: filled } */
.doc__body--legal .dots { -webkit-text-emphasis: filled; text-emphasis: filled; }

/* --- 9b. 下層ページの見出しブロック（旧テーマの見出しウィジェット相当） -------
   about-us / field-of-service / lawyer で使う。m_and_a_guideline / privacy-policy の
   素の h1（36px/1.1・margin 10px 0 24px）とは line-height と margin が違うので別クラスにする。 */
.page-title {
  margin: 0 0 24px;
  font-size: 36px;
  line-height: 1.4em;                  /* 旧CSSも em 指定。数値 1.4 だと行ボックスが 0.02px ずれる */
  text-align: center;
}
@media (max-width: 780px) { .page-title { font-size: 32px; } }

/* 見出し下の飾り線。旧は <div class="decoration"><div class="decoration-inside"></div></div> で、
   h1 の margin-bottom 24px と decoration の margin-top 20px が相殺した 24px の下、
   さらに decoration ボックスの中で 5px 下がった位置に 1px の線が出ていた（合計 29px）。 */
.page-title-rule { width: 80%; margin: 29px auto 0; }

/* 下層バナー。旧はスライダー（画像1枚）で、ページネーションと左右矢印は
   5 幅すべて display:none だった（docs/design.md §5-3）ので置いていない。
   見え方は「コンテンツ幅いっぱい・高さ 200px・cover・中央」。 */
.page-banner {
  display: block;
  width: 100%;
  height: 200px;
  margin-top: 55px;                    /* 旧: 飾り線の下の高さ 55px の空 div */
  background-color: #333;              /* 旧 li のフォールバック色 */
  object-fit: cover;
  object-position: 50% 50%;
}

/* --- 9c. /field-of-service/ 固有 -------------------------------------------
   旧は「全幅ストレッチ行（padding:5%）＋ コンテンツ幅のセル」という入れ子だった。
   5% は行の元の幅＝コンテンツ幅に対する割合なので（1366→57px / 375→17.25px）、
   .container の中に padding:5% 0 の箱を置くと同じ値になる。100vw は使わない。 */
.fos-head__inner   { padding: 100px 0 0; }   /* 旧: 行 padding 100px 0 ＋ margin-bottom -100px */
.fos-section__inner { padding: 5% 0; }

/* ≤780px では旧テーマが .panel-grid-cell に padding:0 15px と margin-bottom:15px を
   !important で入れていた。その 15px ぶんをここで足す。 */
@media (max-width: 780px) {
  .fos-head__inner    { padding: 100px 15px 15px; }
  .fos-section__inner { padding: 5% 15px calc(5% + 15px); }
}

/* 前書き「＜主な取扱分野について＞」。旧は <p>&nbsp;</p><p><strong>…</strong></p>。
   上余白 48.8px ＝ 空段落 28.8px ＋ 段落マージン 20px（旧と同じ位置に落ちる） */
.fos-intro-title {
  margin: 48.8px 0 20px;
  color: inherit;
  font-size: 1em;
  font-weight: 600;
  line-height: var(--lh-body);
}
/* 前書き末尾の空段落スペーサーぶん（20 + 28.8 + 20 = 68.8px） */
.fos-intro-end { margin-bottom: 68.8px; }

/* 分野の h2。旧は h2（24px / line-height 1.1）の中に
   <span style="font-size:20px"><strong> が入っていた。
   h2 の行ボックスの高さ（26.4px）を変えないため、h2 は 24px のままで
   中の文字だけ 20px にする。 */
.fos-h2 {
  margin: 10px 0 24px;
  font-size: 24px;
  line-height: 1.1;
}
@media (max-width: 780px) { .fos-h2 { font-size: 22px; } }
.fos-h2__label { font-size: 20px; font-weight: 600; }

/* 各分野の緑のキャッチ（旧: <span style="color:#008000"><strong>） */
.fos-lead { color: #008000; font-weight: 600; }

/* --- 9d. ボタン（旧 .roll-button） ------------------------------------------
   /field-of-service/ の外部リンクとトップページのボタンで使う。 */
.roll-button {
  display: inline-block;
  padding: 12px 35px;
  border: 1px solid var(--c-brand);
  border-radius: 30px;
  background: var(--c-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  /* transition: all は書かない（変化するプロパティだけを指定する） */
  transition: background-color .3s ease-in-out, color .3s ease-in-out;
}
.roll-button:hover, .roll-button:focus-visible {
  background: transparent;
  color: var(--c-brand);
}

/* --- 9e. /about-us/ 固有 ---------------------------------------------------
   旧はページビルダーの「行（padding:100px 0）→ セル → ウィジェット」の入れ子で、
   行と行の間は #pg-434-0{margin-bottom:-100px} により 100px に詰められていた。
   見出し行の下 padding を 0 にすると同じ間隔（100px）になる。
   ≤780px では旧テーマが .panel-grid-cell に padding:0 15px と margin-bottom:15px を
   !important で入れていたので、その 15px を padding に足す（9c と同じ考え方）。 */
.about-head { padding: 100px 0 0; }

/* 帯バナー。旧は li の background（cover / 50% 50% / フォールバック #333）だった。
   共通の .page-banner（<img> + object-fit）でも箱の寸法は 1px も変わらないが、
   ラスタライズの丸め方が違い、等倍になる 375px 幅では最大 107/255・画素の 8.8% に
   差が出る（実測）。旧とまったく同じ background で描けば全幅で最大 1/255 に収まる。
   中身のない装飾画像なので、空タグを増やさないよう要素ではなく ::after で置く。
   ※ /field-of-service/ /lawyer/ のバナーも同じ描き方に寄せると差分が消える。 */
.about-head::after {
  content: "";
  display: block;
  height: 200px;
  margin-top: 55px;                    /* 旧: 飾り線の下にあった高さ 55px の空 div */
  background: #333 url(/assets/img/banner/DSC_0906_01_01.jpg) 50% 50% / cover no-repeat;
}
.about-body { padding: 100px 0; }
@media (max-width: 780px) {
  .about-head { padding: 100px 15px 15px; }
  .about-body { padding: 100px 15px 115px; }   /* 115 = 15（セル下）+ 100（行下） */
}

/* 旧 HTML は要素と要素の間に <p>&nbsp;</p>（空段落スペーサー）を挟んで余白を作って
   いた。空要素を無くすため、間隔は「上マージンだけ」で決める方式に統一する
   （下マージンを 0 にしておけば相殺を読み解かなくて済む）。値は旧サイトの実測どおり。 */
.about-body > *            { margin: 0; }
.about-body > :first-child { margin-top: 10px; }      /* 旧 h2 の margin-top */
.about-body > * + *        { margin-top: 20px; }      /* 旧 p  の margin-bottom */
.about-body > h2 + *       { margin-top: 24px; }      /* 旧 h2 の margin-bottom */
.about-body > :last-child  { margin-bottom: 48.8px; } /* 末尾のスペーサー1個ぶん */

/* スペーサー1個 = 28.8px（&nbsp; 1行）＋ 20px（段落マージン）＝ 48.8px。
   クラス名の数字は置き換えたスペーサーの個数、末尾の h は「直前が h2（下 24px）」の意。 */
.about-body .sp1  { margin-top:  68.8px; }   /*  20 + 48.8      */
.about-body .sp1h { margin-top:  72.8px; }   /*  24 + 48.8      */
.about-body .sp3  { margin-top: 166.4px; }   /*  20 + 48.8 × 3  */
.about-body .sp4  { margin-top: 195.2px; }   /*   0 + 48.8 × 4  */
.about-body .about-note { margin-top: 0; }   /* 旧はここだけ <div> で余白なし */

/* 見出し。旧は h2 の中の <span style="font-size:28px"> / <span style="font-size:18pt">
   で大きさを指定していた。行ボックスの高さは内側の span で決まっていたので、
   同じ値を h2 自身に置いても寸法は変わらない（18pt = 24px）。
   太字は旧 <strong> の実測値 600。 */
.about-h2 {
  font-size: 24px;
  line-height: 1.1;                    /* 24 × 1.1 = 26.4px（旧実測） */
  font-weight: 600;
  text-align: center;
}
.about-h2--lead      { font-size: 28px; }        /* 28 × 1.1 = 30.8px */
.about-h2--underline { text-decoration: underline; }

/* 右寄せの署名（旧: <p style="text-align:right"><span style="font-size:14pt">）。
   14pt = 18.667px、行送りは body と同じ 1.8 倍で 33.6px になる。 */
.about-sign { font-size: 14pt; text-align: right; }

/* シンボルマーク（旧: <div style="text-align:center;font-size:24px">）。
   画像が行ボックスより高いので font-size は寸法に影響しないが、実測値のまま置く。
   vertical-align:middle は旧テーマ（Bootstrap 3）の img 既定。既定の baseline のままだと
   ディセンダぶん 12.17px 下に余白が増えるので、この画像だけ旧と同じ揃え方にする。 */
.about-symbol { font-size: 24px; text-align: center; }
.about-symbol img { vertical-align: middle; }

/* 事務所概要の表。旧テーマは tbody{width:60%;margin:auto;display:table} と
   td{width:80%} / td:first-child{width:20%} で幅を決めていた（table 自身は
   display:block の 100% 幅）。同じ値を table 側に移しただけで寸法は同一。
   罫線・余白は旧テーマの th,td{border:1px solid #333;padding:5px}。 */
.about-table {
  width: 60%;
  margin-right: auto;
  margin-left: auto;
  border-collapse: collapse;
}
@media (max-width: 780px) { .about-table { width: 100%; } }
.about-table td {
  width: 80%;
  padding: 5px;
  border: 1px solid #333;
  text-align: left;
  vertical-align: middle;
}
.about-table td:first-child { width: 20%; }

/* --- 9f. /lawyer/ 固有 ------------------------------------------------------
   旧は「行（.panel-grid）→ 10%/80%/10% の3カラム → 2つのウィジェット」という入れ子で、
   左右のセルが空 div（空要素73個の主因）だった。中央カラムだけを1本の箱に書き直す。
   数値はすべて旧サイトの実測値（1366px / 375px の getBoundingClientRect）。

   見出し構造の変更（実装計画 §4-4 / 顧客へは「読み上げソフト向けの構造だけ整えた」と説明）:
     旧: h2「役職」＋ h2「氏名」の 2 つの h2（同じ 18px。「弁護士」が 8 回 h2 になっていた）
     新: 氏名を h2、役職を <p class="lawyer-role"> に降格。
   役職 p には旧 h2 と同じ 18px / line-height 1.1 / font-weight 500 / #443f3f を与えるので、
   描画は 1px も変わらない（実装計画の「30px」は旧HTMLの <div style="font-size:30px">（写真の
   入れ物）を役職見出しと取り違えた誤記。実測は 18px / 19.8px）。 */

/* 見出し＋帯バナー。旧は行 padding:100px 0 ＋ #pg-403-0{margin-bottom:-100px} で
   「上 100px・下 0」になっていた。バナーは docs/design.md §8-8 のとおり ::after の
   background で描く（<img>+object-fit だと 375px 幅で最大 107/255 の差が出る）。 */
.lawyer-intro { padding: 100px 0 0; }
.lawyer-intro::after {
  content: "";
  display: block;
  height: 200px;
  margin-top: 55px;                    /* 旧: 飾り線の下にあった高さ 55px の空 div */
  background: #333 url(/assets/img/banner/DSC_0968_01.jpg) 50% 50% / cover no-repeat;
}
/* ≤780px は旧テーマが .panel-grid-cell に padding:0 15px と margin-bottom:15px を入れていた */
@media (max-width: 780px) { .lawyer-intro { padding: 100px 15px 15px; } }

/* 弁護士1人ぶんの行。旧の中央カラム（幅 = 行幅×80% − 6px、左右中央）を1要素で再現。
   ≤780px は1カラムに畳まれ、セルの左右 padding 15px だけが残る（下マージンは 0）。 */
.lawyer__inner { width: calc(80% - 6px); margin: 0 auto; }
@media (max-width: 780px) { .lawyer__inner { width: auto; padding: 0 15px; } }

/* 永井の行だけ旧HTMLに style="padding: 50px 0" が入っている（他の8人は 0）。
   ただし旧テーマの .mob-pad-0 が ≤1024px で padding:0 !important に上書きしていた。 */
.lawyer--first { padding: 50px 0; }
@media (max-width: 1024px) { .lawyer--first { padding: 0; } }
/* ≤780px は旧テーマがセルに margin-bottom:15px を入れており、行（flex）の高さに乗る */
@media (max-width: 780px) { .lawyer { padding-bottom: 15px; } }

/* --- 顔写真＋役職＋氏名 ----------------------------------------------------
   旧は「空段落 → 写真（float:left の入れ物 div） → 空段落 → 役職 → 氏名 → 空段落」。
   空段落（<p>&nbsp;</p>）は空要素として数えられるので要素としては置かない。
   ただし単純な margin では置き換えられない: 幅が狭い（≤375px 程度）と、この空段落の
   行ボックスが写真の右に入らず写真の下へ送られ、役職の位置が「写真の下」まで下がる。
   実測（375px・永井）: 空段落の高さが 28.797 → 300.797 に伸びて役職が y+369.594 に来る。
   そこで空段落は「ブロックになる ::before / ::after の &nbsp;」で置く。中身のない
   装飾なので要素は増えず、回り込みの挙動は旧と同一になる。 */
.lawyer__profile { display: flow-root; }   /* 旧はウィジェット枠が float を内包していた */

.lawyer__photo {
  float: left;
  margin: 48.8px 45px 0 0;   /* 上 48.8 = 空段落 28.8 + 段落マージン 20（旧の写真の位置）
                                右 45px は旧テーマの img.alignleft */
  vertical-align: middle;    /* 旧テーマ（Bootstrap 3）の img 既定 */
}

/* 氏名の下にあった空段落スペーサー1個ぶん（28.8 + 20）。ここが箱の下端を決める幅もある */
.lawyer__profile::after {
  content: "\00a0";
  display: block;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
}

/* 役職（旧 h2 と同じ見た目）。上マージン 48.8px = 空段落 28.8 + 段落マージン 20 で、
   写真の float と同じ高さから始まる。::before が写真の右の空段落そのもの。 */
.lawyer-role {
  margin: 48.8px 0 24px;
  color: var(--c-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;          /* 18 × 1.1 = 19.8px（旧実測）。数値指定なので内側の
                                14pt span は 20.533px になる＝旧と同じ */
}
.lawyer-role::before {
  content: "\00a0";
  display: block;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 28.8px;
}

.lawyer-name { margin: 10px 0 24px; font-size: 18px; line-height: 1.1; text-align: left; }
.lawyer-name__lg { font-size: 14pt; }      /* 永井の氏名だけ内側 span が 14pt（= 18.667px） */

/* --- 経歴などの本文 --------------------------------------------------------
   旧は <hr> 区切り＋ h3（24px の箱の中に 14pt の太字）。h3 の行ボックスの高さは
   外側の 24px で決まるので、大きさは内側の span で与える（/field-of-service/ と同じ考え方）。 */
.lawyer__detail { display: flow-root; }    /* 末尾 <hr> の下マージン 20px を箱の中に閉じ込める */
.lawyer__detail h3 { margin: 10px 0 24px; font-size: 24px; line-height: 1.1; }
@media (max-width: 780px) { .lawyer__detail h3 { font-size: 22px; } }
.lawyer-h3__label { font-size: 14pt; font-weight: 600; }   /* 旧 <strong> の実測値は 600 */

/* 末尾に空段落スペーサーがある7人（遠藤・小林・栗山・梅本・小野・山口・山田）。
   永井と吉田は最後が <hr> で終わっている（吉田の末尾にある空 p は高さ 0 で効いていない）。 */
.lawyer__detail--tail::after {
  content: "\00a0";
  display: block;
  margin-bottom: 20px;
  line-height: 28.8px;
}

/* 山田の【経歴】末尾だけ空段落が1個入っている（28.8 + 20 + 20 = 68.8px） */
.lawyer__detail hr.sp1 { margin-top: 68.8px; }

/* --- 10. フッター ----------------------------------------------------------- */
.site-footer {
  /* 下 72px = 旧 70px + 空カラム2個ぶんの 2px（Bootstrap の min-height:1px）。
     空要素を消しても総高さが 1px も変わらないようにするための差分 */
  padding: 60px 0 72px;
  border-top: 1px solid var(--c-footer-rule);
  background: var(--c-footer-bg);
  color: var(--c-footer-ink);
}
.site-footer a { color: inherit; }
/* 旧: style="margin-left:2em"（CSP で style 属性を許可しないためクラス化） */
.footer-links__gap { margin-left: 2em; }
.footer-widget { margin-bottom: 30px; padding: 0 15px; }
@media (max-width: 991px) { .footer-widget { margin-bottom: 50px; } }
@media (max-width: 767px) { .footer-widget { padding: 0; } }

/* --- 11. ページトップへ戻る ------------------------------------------------- */
.go-top {
  position: fixed;
  right: 20px;
  bottom: -45px;
  z-index: 9999;
  /* アイコン位置は旧サイトの実測値どおり: 40×40 の箱の上から 9.75px、左右中央
     （矢印は 13.75×22 = font-size 22px の 1em 相当） */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding-top: 9.75px;
  border-radius: 2px;
  background: var(--c-brand);
  color: #fff;
  font-size: 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s, bottom .5s, border-radius .5s;
}
.go-top.is-visible {
  bottom: 11px;
  border-radius: 50%;
  opacity: 1;
  visibility: visible;
}
.go-top:hover { color: var(--c-brand); }

/* --- 12. モーション設定の尊重 ----------------------------------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html, .team { scroll-behavior: auto; }
  .site-header, .mainnav, .go-top { transition-duration: .01ms; }
}

/* --- 13. トップページ `/` ---------------------------------------------------
   数値はすべて旧サイト（baseline/）をローカル配信して実測した値。
   セクションの構造は「全幅の <section> ＋ 内側のコンテナ」で、旧サイトの
   ページビルダー（行→セル→ウィジェット）と同じ寸法になるように書いている。
   空要素（<p>&nbsp;</p> のスペーサー・空 div）は置かず、余白は margin で表す。 */

/* 13-1. 上部連絡バー（トップだけヒーローに重なる）
   旧 CSS: .has-hero .header-contact { position:absolute; z-index:11; width:100%;
   border-bottom:1px solid rgba(241,241,241,.1) } ＋ 文字色 #fff（下層は #c5c5c5）。
   背景色は style.css 末尾の #002b4c !important が全ページで勝つので変わらない。 */
.is-home .topbar {
  border-bottom: 1px solid rgba(241, 241, 241, .1);   /* 高さが下層より 1px 高くなる */
  color: #fff;
}
@media (min-width: 1025px) {
  .is-home .topbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    margin-bottom: 0;                 /* ヒーローを押し下げない（下層の 81px は不要） */
  }
}

/* 13-2. ヒーロー -------------------------------------------------------------
   旧サイトは 4 枚を JS でクロスフェードしていた。ここでは重ねた 4 層の opacity を
   @keyframes で動かすだけで同じ見え方にする（JS 0行）。
   層の順番（下から）: .hero の背景（1枚目）→ ::before（2枚目）→ ::after（3枚目）
   → .hero__inner::before（4枚目）→ 文字。
   4 層目だけ「最後に消えて 1 枚目に戻る」ので keyframes を分けている。 */
.hero {
  position: relative;
  z-index: 0;                          /* 重なり順をこの中だけで完結させる */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  background: #fff url(/assets/img/hero/DSC_0932_01_01.jpg) 50% 50% / cover no-repeat fixed;
}
.hero::before,
.hero::after,
.hero__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;        /* 旧 .slide-item と同じ */
  opacity: 0;
  animation: hero-fade 24s linear infinite;
}
.hero::before       { z-index: -3; background-image: url(/assets/img/hero/DSC_0842_02.jpg); animation-delay: 6s; }
.hero::after        { z-index: -2; background-image: url(/assets/img/hero/DSC_0990_01.jpg); animation-delay: 12s; }
.hero__inner::before {
  z-index: -1;
  background-image: url(/assets/img/hero/DSC_0951_01.jpg);
  animation-name: hero-fade-last;
  animation-delay: 18s;
}
/* 1s（= 4.1667%）でフェードイン。上に次の層が乗ってから（29.17%〜33.33%）静かに消す */
@keyframes hero-fade {
  0%       { opacity: 0; }
  4.1667%  { opacity: 1; }
  29.1667% { opacity: 1; }
  33.3333% { opacity: 0; }
  100%     { opacity: 0; }
}
/* 4 枚目は 1 枚目（最下層）へ戻るので、25%（=24s 時点）から 1s かけて消える */
@keyframes hero-fade-last {
  0%       { opacity: 0; }
  4.1667%  { opacity: 1; }
  25%      { opacity: 1; }
  29.1667% { opacity: 0; }
  100%     { opacity: 0; }
}

.hero__inner {
  width: 100%;
  min-height: 260px;                   /* 旧 .slide-inner */
  padding-top: 5px;
  text-align: center;
}

.hero__title {
  display: inline-block;
  position: relative;
  margin: 0;
  padding-bottom: 10px;
  color: #fff;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 1px;
  /* 旧: .maintitle{text-shadow:1px 1px 2px black,0 0 1em black,0 0 0.2em black!important} */
  text-shadow: 1px 1px 2px #000, 0 0 1em #000, 0 0 .2em #000;
}
.hero__subtitle {
  margin: 0;
  padding: 20px 30px;                  /* 旧 HTML のインライン指定 */
  background: rgba(255, 255, 255, .4);
  color: #000;
  font-size: 18px;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
}
.hero__button { margin-top: 30px; }    /* 旧: 高さ 30px の空 div */

@media (max-width: 1024px) {
  /* 旧サイトも ≤1025px ではスライダーを止め、1 枚目を静止画として敷いていた */
  .hero {
    display: block;
    height: auto;
    background-attachment: scroll;
    background-position: center center;
  }
  .hero::before, .hero::after, .hero__inner::before { content: none; }
  .hero__inner { min-height: 0; padding: 44px 15px; }
  .hero__subtitle { margin: 0 -15px; }  /* 帯だけ画面幅いっぱい（旧: width:100vw 指定） */
}
@media (max-width: 767px) { .hero__title { font-size: 32px; } }
@media (max-width: 479px) {
  .hero__title { font-size: 18px; }
  /* 旧テーマ: ≤479px では h1＋帯のラッパに margin-bottom:5px が付いていた */
  .hero__subtitle { margin: 0 -15px 5px; font-size: 16px; line-height: 24px; }
}

/* 13-3. セクション共通 ------------------------------------------------------
   旧: 行（padding:100px 0）→ セル → ウィジェット。≤780px ではセルに
   padding:0 15px と margin-bottom:15px が入る（他ページと同じ扱い）。 */
.home-section { position: relative; }
.home-section__inner { display: flow-root; padding: 100px 0; }
@media (max-width: 780px) { .home-section__inner { padding: 100px 15px 115px; } }

.home-title {                       /* 旧セクション見出し（h2） */
  margin: 0;
  font-size: 30px;
  line-height: 1.4em;                  /* em で書く。数値だと行ボックスが 0.02px ずれる */
  text-align: center;
}
@media (max-width: 780px) { .home-title { font-size: 28px; } }

/* 旧はボタンの前に空段落スペーサー（28.8 + 20）が 1 個入っていた */
.home-button { margin-top: 48.8px; text-align: center; }
/* 取扱分野・弁護士のボタンだけ旧 HTML に class="ranryu-font"（font-size:1em!important）が
   付いており 16px で描かれている。ヒーローとお問い合わせのボタンは 13px のまま。 */
.home-button .roll-button { font-size: 1em; }

/* 13-4. 主な取扱分野 -------------------------------------------------------- */
.home-section--services { background: #f7f7f7; }

.services__lead {
  margin: 0 0 68.8px;                  /* 20（段落）+ 28.8 + 20（空段落スペーサー） */
  padding-top: 60px;                   /* 旧 HTML のインライン指定 */
  text-align: center;
}

.services__list { padding-top: 15px; } /* 旧 .roll-icon-list */
@media (min-width: 992px) {
  /* 旧は col-md-4 の float。≥992px で 3 列、それ未満は 1 列 */
  .services__list { display: grid; grid-template-columns: repeat(3, 1fr); }
}
.services__card { display: flow-root; margin-bottom: 20px; padding: 0 15px; }
/* 旧 .service:last-of-type{margin-bottom:0}。3 列のときは同じ行の他のカードの
   下マージンが行の高さを決めるので、見た目は旧と同じになる。 */
.services__card:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .services__card { padding: 0; } }

/* 旧 .list-item: 高さは「アイコン 70+7」と「h3（margin 込み）」の大きい方 */
.services__item { display: flex; min-height: 77px; margin-bottom: 30px; }
@media (max-width: 1024px) { .services__item { margin-bottom: 18px; } }

.services__icon {
  flex: none;
  display: flex;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin: 7px 30px 0 0;
  border: 1px solid var(--c-brand);
  border-radius: 50%;
  color: var(--c-brand);
}
/* 旧 FontAwesome の SVG は 32px で、円の上端から 16px の位置に描かれていた（実測） */
.services__icon svg { height: 32px; margin-top: 15px; }

/* 旧 .content{display:table-cell;vertical-align:middle} と同じ「幅は中身なり・上下中央」 */
.services__body { display: flex; align-items: center; }
.services__body h3 {
  margin: 7px 0 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}
.services__body h3 a { color: var(--c-heading); }

/* --- アコーディオン「その他」（旧ページビルダーのウィジェット → <details>）--- */
/* 旧アコーディオンのパネル下 10px は、次のボタンの上マージンに合算してある
   （隣接する margin は相殺するので、両方に書くと 10px 足りなくなる） */
.home-section--services .home-button { margin-top: 58.8px; }
.services__more > summary {
  padding: 15px 30px;
  background: #4a876d;
  color: #fff;
  cursor: pointer;
  list-style: none;                    /* ▶ マーカーを消す */
}
.services__more > summary::-webkit-details-marker { display: none; }
.services__more > summary:hover { background: var(--c-brand); }
/* ＋/－ アイコン（旧 ionicons）。実測: 12×12・線の太さ 2px・行の上から 7.6px */
.services__more > summary::after {
  content: "";
  float: right;
  width: 12px;
  height: 12px;
  margin-top: 7.6px;
  background:
    linear-gradient(#fff, #fff) 50% 50% / 12px 2px no-repeat,
    linear-gradient(#fff, #fff) 50% 50% / 2px 12px no-repeat;
}
.services__more[open] > summary::after {
  background: linear-gradient(#fff, #fff) 50% 50% / 12px 2px no-repeat;
}
.services__more-title { display: inline-block; width: calc(100% - 20px); }
.services__more-body { padding: 15px 30px; background: #f9f9f9; }
.services__more-body a { color: var(--c-heading); }  /* 旧実測: rgb(68,63,63)。カード本体(.services__body h3 a)と同じ色で、グローバルの a{color:var(--c-brand)} を上書きする指定が漏れていた（大野さん指摘・2026-09-10） */
.services__more-body ul {
  margin: 0 0 10px;
  padding-left: 40px;                  /* ul の既定値。旧もリセットされていなかった */
  list-style: disc;
}
@media (max-width: 767px) {
  .services__more-body ul { padding-left: 25px; }
  .services__more-body li { margin-bottom: 8px; }
  /* 旧ページCSS: .sow-accordion-panel-content .ranryu-inline{display:inline!important}
     （改行位置の固定を解いて、狭い幅では自然に折り返す） */
  .services__more-body .ranryu-inline { display: inline; }
}

/* 13-5. 弁護士紹介 ---------------------------------------------------------- */
/* 背景写真は旧サイトが JS（ページビルダーのパララックス）で注入していたもの。
   background-size は「行の高さ ÷ 0.542」で決まっていた（実測 1366×768 で
   3533.07×2356.78px ＝ 行の高さの 184.6%）。スクロール追従はしない。
   ※ この 2 枚（DSC_0938_01 / DSC_0911_01）は data 属性経由の参照だったため
     baseline/ のミラーに入っていない。本番 S3 には存在するので旧と同じパスを
     指している。/assets/ 配下へ移すなら先にファイルを取得すること。 */
#staff, #contact {
  background-image:
    linear-gradient(rgba(197, 214, 197, .7), rgba(197, 214, 197, .7)),
    url(/wp-content/uploads/2018/06/DSC_0938_01.jpg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: auto, auto 184.6%;
}
#contact {
  background-image:
    linear-gradient(rgba(197, 214, 197, .7), rgba(197, 214, 197, .7)),
    url(/wp-content/uploads/2018/06/DSC_0911_01.jpg);
  color: #000;
}
@media (max-width: 1024px) {
  /* 旧テーマ: .panel-row-style{background-position:center !important} */
  #staff, #contact { background-position: 50% 50%; }
}

/* 9 名。旧は JS のカルーセルだが PC（≥971px）ではインライン CSS で 3×3 の
   グリッドに固定されていた。≤970px は 2 枚（768）/ 1 枚（375）ずつの横スワイプ。 */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 48.8px;                  /* 旧: 空段落スペーサー 1 個 */
}
.team__item { padding: 0 25px; text-align: center; }
.team__frame { padding: 4px; background: #fff; }   /* 写真の白フチ */
.team__frame img { display: block; width: 100%; height: auto; }
.team__name {
  margin: 0;
  padding: 12px 0 14px;                /* 旧: .name(12/2) + 空の .pos(12) */
  font-weight: 600;
}
.team__name a { color: var(--c-heading); }

@media (max-width: 970px) {
  .team {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;           /* 矢印クリック送りをなめらかにする */
    scrollbar-width: none;             /* 旧カルーセルもスクロールバーは出ていない */
  }
  .team::-webkit-scrollbar { display: none; }
  .team__item { flex: 0 0 50%; scroll-snap-align: start; }
}
@media (max-width: 479px) { .team__item { flex-basis: 100%; padding: 0; } }

/* 旧はカルーセルの下に 45px の余白があった。一旦ページ送りドットで下部に静的な目印を
   出す案を試したが、実際には送り動作をしないドットは不自然という大野さん指摘（②再提案・
   2026-09-10）を受け、ドットは廃止。代わりに写真の左右へ「横スクロールできる」ことを示す
   矢印（.team-carousel__arrow、下記）を配置する方式に変更した。 */
.home-button--staff { margin-top: 45px; }

/* 写真列の左右にある、クリックで実際にカルーセルを送れる矢印ボタン（≤970pxのみ）。
   当初はCSSのみの静的な目印（送り機能なし）だったが、PC幅を縮小した状態でも矢印で
   送れる必要があるという大野さん指摘（2026-09-11・3回目）を受け、実際のボタン要素＋
   site.js のクリック送りに変更した（クリックを拾うには疑似要素でなく実要素が必要）。
   .go-top と同じく、空タグ検出を避けるため中身に実SVGを入れる。 */
.team-carousel { position: relative; }
.team-carousel__arrow {
  display: none;
  position: absolute;
  top: 34%;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .7);
  color: #4b5c4b;
  padding: 0;
  cursor: pointer;
}
.team-carousel__arrow .icon { width: 14px; height: 14px; }
.team-carousel__arrow:disabled { color: #b7bdb7; cursor: default; }
.team-carousel__arrow--prev { left: 10px; }
.team-carousel__arrow--next { right: 10px; }
@media (max-width: 970px) {
  .team-carousel__arrow { display: flex; }
}

/* 13-6. アクセス ------------------------------------------------------------ */
.home-section--access .home-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
}
.access__info { text-align: center; }
.access__info p { margin: 0 0 20px; }
.access__info .access__address { margin-top: 48.8px; }   /* 旧: 見出しの下の空段落スペーサー */
.access__guide { font-size: 14pt; font-weight: 600; }   /* 旧: <strong><span 14pt> */
/* 旧テーマの共通CSSも max-width:100% のみで height 未指定だったため、幅400px未満に
   狭まると高さ400pxのまま正方形が崩れ、表示範囲がズレて見える問題があった（画面幅を
   縮めて確認した崎山さん指摘・2026-09-11）。aspect-ratio で正方形を保つよう修正。
   さらに、セル幅が400pxを上回る間（ブラウザを少し縮めた程度のPC幅）は地図が
   左詰めのままだったため、margin:auto で中央揃えにした（崎山さん指摘・同日）。 */
.access__map iframe { display: block; width: 400px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; margin: 0 auto; border: 0; }
@media (max-width: 780px) {
  /* 15px はセル側に入るので、行（.home-section__inner）は左右 0 のままにする */
  .home-section--access .home-section__inner { grid-template-columns: 1fr; padding: 100px 0; }
  .access__info, .access__map { margin-bottom: 15px; padding: 0 15px; }
}

/* 13-7. お問い合わせ -------------------------------------------------------- */
.home-section--contact p { margin: 0 0 20px; text-align: center; }
.home-title + .contact__lead { margin-top: 48.8px; }   /* 旧: 空段落スペーサー */
.home-section--contact .contact__hours { margin-bottom: 48.8px; }   /* 旧: 段落の下 20px ＋ 単独の <br>（28.8px） */

.contact-buttons { display: flex; justify-content: center; gap: 50px; }
.contact-buttons .roll-button { color: #fff; }   /* 旧はホバーしても白のまま */

.contact-info {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 900px;
  margin: 60px auto 0;
  text-align: center;
}
.contact-info__item { width: 300px; padding: 0 30px; }
.contact-info__item--center { border-right: 1px solid var(--c-rule); border-left: 1px solid var(--c-rule); }
.contact-info .contact-info__label { margin: 0 0 10px; }
.contact-info .contact-info__value { margin: 0; }
.contact-info__value a { color: #0a0a0a; }   /* 旧レイアウトCSS: #panel-6105-3-0-1 a{color:#0a0a0a} */

@media (max-width: 767px) {
  .contact-buttons { flex-direction: column; align-items: center; gap: 15px; }
  .contact-buttons .roll-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    max-width: 320px;
    text-align: center;
  }
  .contact-info { flex-direction: column; align-items: center; width: 100%; }
  .contact-info__item { width: 80%; padding: 20px 0; white-space: nowrap; }
  .contact-info__item--center {
    border-right: 0;
    border-left: 0;
    border-top: 1px solid var(--c-rule);
    border-bottom: 1px solid var(--c-rule);
  }
  .contact-info .contact-info__label { margin-bottom: 5px; }
}

/* 13-8. モーション設定の尊重（ヒーローのクロスフェードを止める） */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hero__inner::before { animation: none; }
}