/*
Theme Name: 青山城野特許法律事務所
Theme URI: https://ja-pat.com/law
Author: 296 Inc.
Author URI: https://296.co.jp
Description: 青山城野特許法律事務所（https://ja-pat.com/law）用カスタムテーマ。1ページ完結型。
Version: 0.9.70
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: japat-law
*/

/* ==========================================================================
   1. DESIGN SYSTEM & VARIABLE DEFINITIONS
   ========================================================================== */
:root {
	--color-primary: #0f172a;
	--color-secondary: #0c2340;
	/* アクセント色はロゴと同じ紺(#0c2340 = --color-secondary)。
	   hover は同色だと変化が見えないため、わずかに明るい紺を使う。 */
	--color-accent: #0c2340;
	--color-accent-hover: #16365c;
	--color-accent-glow: rgba(12, 35, 64, 0.12);
	/* FVタグラインの左に引く横罫の赤。FV-5案の実物から採取した色
	   （案の該当画素は #8e3c48 前後。文字の紺 #162538 とは明確に別色） */
	--color-tagline-rule: #8e3c48;
	--color-text-main: #1e293b;
	--color-text-muted: #64748b;
	--color-bg-light: #fbfbfa;
	--color-bg-white: #ffffff;
	--font-main: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
	--font-serif: 'Noto Serif JP', 'Playfair Display', serif;
	--font-accent: 'Poppins', sans-serif;
	--shadow-sm: 0 0.125rem 0.625rem rgba(12, 35, 64, 0.03);
	--shadow-md: 0 0.75rem 2.1875rem rgba(12, 35, 64, 0.05);
	--shadow-lg: 0 1.5rem 3.125rem rgba(12, 35, 64, 0.08);
	/* 写真・カードを浮かせる2層の影。接地部分の細い影と、広がりのある柔らかい影。
	   「私たちの強み」「取扱業務」「メンバー」で使う */
	--shadow-photo: 0 0.125rem 0.375rem rgba(12, 35, 64, 0.06), 0 0.875rem 1.875rem rgba(12, 35, 64, 0.10);
	/* 写真の背景が白に近く、白いページ背景に溶けてしまうものに使う濃いめの影。
	   代表2ショット・メンバー顔写真・アクセスの写真がこれを共有する */
	--shadow-photo-strong: 0 0.25rem 0.625rem rgba(12, 35, 64, 0.18), 0 0.875rem 2rem rgba(12, 35, 64, 0.18);
	--transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. GENERAL STYLES & LAYOUTS
   ========================================================================== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* 画面幅に応じて基準の文字サイズを変える。ここで決まった値が 1rem になり、
   CSS全体の長さ指定（rem）がまとめて拡大縮小する＝デザインごと比例縮小する。

     PC    : 1280px で 16px。それより狭いと 100vw/80 で比例縮小。
             ただし下限 12px（=960px幅）。それ以下では縮小を止める。
             下限がないと 770px 幅で本文が 9.6px まで落ちて読めなくなるため。
     スマホ: 400px  で 16px。それより狭いと 100vw/25 で比例縮小。
             320px 幅でも 12.8px あるので下限は不要。

   ルート(html)に指定して rem で受けている。body に指定して em で受ける方法も
   あるが、em は入れ子で掛け算されるため（0.9em の中の 0.9em は 0.81）、
   入れ子の多いこのCSSでは計算値が変わってしまう。rem は常にルート基準なので
   掛け算されず、見た目の結果は同じになる。

   このファイル中のコメントに出てくる px の数値は、すべて基準16px（1280px幅以上）
   のときの値。実際の描画は上の式で決まる基準サイズに比例する。
   px のまま残しているのは、比例させると崩れるものだけ:
     境界線 / outline（0.5px などになると描画が不安定）
     backdrop-filter のぼかし量
     hover の translateY（微細な動きなので固定でよい）
     管理バーの高さ（WordPress 側の固定値）
     メディアクエリの条件（ビューポート基準で rem とは無関係） */
html {
	font-size: clamp(12px, (100vw / 80), 16px);
	scroll-behavior: smooth;
}

@media (max-width: 769px) {
	html {
		font-size: clamp(0px, (100vw / 25), 16px);
	}
}

body {
	font-family: var(--font-main);
	color: var(--color-text-main);
	background-color: var(--color-bg-white);
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}

a {
	text-decoration: none;
	color: inherit;
	transition: var(--transition-smooth);
}

li {
	list-style: none;
}

.container {
	width: 100%;
	max-width: 71.25rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

section {
	padding: 7.5rem 0;
	position: relative;
}

.section-header {
	text-align: center;
	margin-bottom: 4.375rem;
}

/* 見出しの直下に補足テキストが続く場合（アクセスの最寄り駅、求人情報のリード文など）に余白を詰める */
.section-header--tight {
	margin-bottom: 1.75rem;
}

/* 英語・日本語・下線の間隔は ja-pat.com の h2.common に揃えている。
   参考サイトの実測値（本文16px・line-height 1.6 基準）:
     見出し 24px / 英語 18px(.75em) / 下線は margin 10px auto 5px・75px・4px
     → 英語と日本語の間隔 約12.6px、日本語と下線の間隔 約17.2px
   当サイトは見出しが 2.1rem(33.6px) と参考サイトの1.4倍のため、
   同じ見え方になるよう間隔も1.4倍（約17.6px / 約24px）で合わせる。
   行間は当サイトの本文 line-height 1.85 のままだと余白が過剰になるので、
   参考サイトと同じ 1.6 に落として計算している。 */
.section-tag {
	font-family: var(--font-accent);
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.6;
	letter-spacing: 0.1875rem;
	color: var(--color-accent);
	text-transform: uppercase;
	/* 行送りの余白(上下 約4px)と合わせて、日本語見出しとの間隔が約18pxになる */
	margin-bottom: 0.25rem;
	/* inline-block だと直後の .section-title（同じく inline-block）と同じ行に流れて
	   横並びになるため、block にして必ず改行させる */
	display: block;
}

.section-title {
	font-family: var(--font-serif);
	font-size: 2.1rem;
	line-height: 1.6;
	font-weight: 700;
	color: var(--color-secondary);
	position: relative;
	/* 下線(::after)はこの padding の位置に置かれる。行送りの余白(約10px)と
	   合わせて、日本語見出しと下線の間隔が約24pxになる */
	padding-bottom: 0.5em;
	display: inline-block;
	letter-spacing: 0.0625rem;
}

.section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2.5rem;
	height: 0.1875rem;
	background-color: var(--color-accent);
	border-radius: 0.0625rem;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.875rem 2.125rem;
	border-radius: 0.25rem;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: var(--transition-smooth);
	gap: 0.75rem;
	border: none;
	letter-spacing: 0.03125rem;
}

.btn-primary {
	background-color: var(--color-secondary);
	color: var(--color-bg-white);
	box-shadow: 0 0.25rem 0.9375rem rgba(12, 35, 64, 0.15);
}

.btn-primary:hover {
	background-color: var(--color-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 0.375rem 1.25rem rgba(12, 35, 64, 0.25);
}


.btn-outline {
	background-color: transparent;
	color: var(--color-secondary);
	border: 2px solid var(--color-secondary);
}

.btn-outline:hover {
	background-color: rgba(12, 35, 64, 0.03);
	transform: translateY(-2px);
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 5.625rem;
	background-color: rgba(255, 255, 255, 0.96);
	border-bottom: 1px solid rgba(12, 35, 64, 0.06);
	z-index: 1000;
	backdrop-filter: blur(12px);
	transition: var(--transition-smooth);
}

/* WPにログイン中は管理バー(32px、狭い画面では46px)の分だけページ全体が下がる。
   固定ヘッダーは viewport 基準なので同じだけ下げないと管理バーに上端が隠れ、
   ヘッダーとFVの位置がずれる。ログアウト状態の表示には影響しない */
/* 管理バーの高さは WordPress 側の固定値（rem に連動させない） */
body.admin-bar header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar header {
		top: 46px;
	}
}

/* ヘッダーはロゴを画面の左端、ナビを右端に寄せる（両端配置）。
   本文の .container（max-width 1140px・中央寄せ）には合わせない。
   左右の余白は 1rem＝ヘッダー内では 1em と同じ。

   本文はこれまでどおり中央寄せの1140px幅なので、スクロールしたとき
   ヘッダーのロゴの左端と本文の左端は揃わなくなる（意図した配置）。 */
.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	padding: 0 1rem;
}

.brand-wrap {
	display: flex;
	flex-direction: column;
}

/* ヘッダーは日本語ロゴと英字ロゴを横並びにする（640px以下では縦積み）。
   min-width: 0 は、幅が足りなくなったときにナビを押し出すのではなく
   ロゴ側が縮んで収まるようにするための指定（下の .nav-tabs の flex-shrink: 0 と対）。

   並びはマークアップ順どおり「日本語ロゴ・英字ロゴ」。640px以下は column に
   なり、同じ順で日本語が上・英字が下になる（スマホは従来のまま）。

   align-items は center。ナビの各項目は header の高さいっぱいで上下中央に
   置かれるため、ここを center にすると
     日本語ロゴの中心 ＝ brand-wrap の中心 ＝ ヘッダーの中心 ＝ 「TOP」の中心
   となり、日本語ロゴと TOP の高さが揃う。
   （英字ロゴは社名＋タグラインの2段組で箱が縦に長いので、その中で
     日本語ロゴが中央に置かれる形になる）
   両ロゴのSVGは字面が viewBox の上下中央にあるため、箱の中心を揃えれば
   字の中心も揃う。 */
#site-header .brand-wrap {
	flex-direction: row;
	align-items: center;
	gap: 0.875rem;
	min-width: 0;
}

/* 支給の日本語ロゴ（SVG）。英字ロゴと同じく fill="currentColor" なので色はここで決める。
   ヘッダー左端の主役。英字ロゴの社名部分と字面の高さが揃うよう幅を決めている。
   日本語ロゴは1行組（viewBox 226.73 x 20.12、字面17.1）、英字ロゴは社名＋タグラインの
   2段組（viewBox 505 x 82.58、社名部分の高さ53.1）で縦横比が大きく違うため、
   幅を揃えると字の大きさが揃わない。280px で字面 21.1px となり、英字ロゴ 210px の
   社名部分 22.1px とほぼ一致する */
.brand-logo-ja {
	display: block;
	width: 17.5rem;
	max-width: 100%;
	min-width: 0;
	height: auto;
	color: var(--color-secondary);
}

.brand-logo {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--color-secondary);
	letter-spacing: 0.03125rem;
}

/* ロゴ（インラインSVG）。fill="currentColor" のため color で色を制御する。
   幅は viewBox に足した余白（各辺2.5単位）のぶんだけ大きめにして、
   図柄そのものの見た目の大きさが余白追加前と変わらないようにしている */
.brand-logo-svg {
	display: block;
	width: 13.125rem;
	max-width: 100%;
	min-width: 0;
	height: auto;
	color: var(--color-secondary);
}

/* フッターは背景が濃紺のため白抜きにする */
.brand-logo-svg--footer {
	width: 15.125rem;
	color: #fff;
}

.brand-sub {
	font-size: 0.65rem;
	color: var(--color-accent);
	letter-spacing: 0.09375rem;
	margin-top: 0.125rem;
	font-weight: 700;
	text-transform: uppercase;
}

/* 日本語ロゴの併記でブランド側が広がったぶん、タブは詰めて1行に収める。
   flex-shrink: 0 でタブは縮まず、幅が足りない場合はロゴ側が縮む */
.nav-tabs {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 0.25rem;
	flex-shrink: 0;
}

.nav-tab-item {
	height: 100%;
	display: flex;
	align-items: center;
}

.nav-tab-link {
	padding: 0.5rem 0.625rem;
	font-size: 0.85rem;
	white-space: nowrap;
	font-weight: 700;
	color: var(--color-text-muted);
	border-radius: 0.125rem;
	position: relative;
	transition: var(--transition-smooth);
}

.nav-tab-link:hover {
	color: var(--color-secondary);
}

.nav-tab-link.active {
	color: var(--color-secondary);
}

.nav-tab-link.active::after {
	content: '';
	position: absolute;
	bottom: -1.25rem;
	left: 50%;
	transform: translateX(-50%);
	width: 1.5625rem;
	height: 0.125rem;
	background-color: var(--color-accent);
}

.menu-toggle {
	display: none;
	color: var(--color-secondary);
	font-size: 1.5rem;
	cursor: pointer;
}
/* ==========================================================================
   4. TOP SECTION (HERO VIEW)
   ========================================================================== */
#top {
	/* hero-tokyo-tower-fv.jpg: 2752x1120（縦横比 86/35 = 2.4571）。
	   出所は写真AC。有料会員としてダウンロードした素材の空の色を明るくするために
	   AIで補正し、さらに16:9の画面でもタワー全体が入るよう左右をAIで拡張したもの。
	   写真ACの利用規約でAI加工とWebサイトでの商用利用が認められていることを確認済み。
	   https://www.photo-ac.com/main/terms/

	   支給版は 2752x1536 だが、その構図ではタワーが画像の縦の57%しか占めず、
	   FVに置くと縦書き見出しより明らかに小さく見えた。そこで上64px・下352pxを
	   落として 2752x1120 にし、タワーの占有を78.2%（差し替え前の写真と同等）へ
	   戻してある。切り出しは jpegtran によるロスレス処理（再圧縮していない）。

	   タワーの位置（実測）:
	     先端  高さの 11.07%（124px）
	     足元  高さの 89.29%（1000px）
	     中心  幅の  57.9%（上部シャフトは 57.3〜58.7% の範囲。
	           画像を344pxに縮小し、空との色差でシャフトの左右端を拾って算出）
	   下の --hero-sky と background-position はこの値から出している。
	   写真を差し替えたら必ず測り直すこと。

	   縦横比 2.4571 は一般的な画面より横長なので、PC・スマホのどの画面でも
	   cover が「高さ基準」で効く。つまり写真の縦は必ず全部表示され、
	   どの画面幅でもタワーの先端から足元まで入り、大きさも一定に見える。 */

	/* タワー先端の上に足す空の高さ。
	   写真自体が先端の上に高さの 11.07% ぶん空を持っているので、
	   足すのはヘッダー(90px)に足りない分だけ。足しすぎるとそのぶん写真が
	   下へ押し出されて足元が切れる。高さ813px以上の画面では 0 になる。 */
	--hero-sky: max(0px, calc(5.625rem - 11.07vh));
	/* 写真の最上段の実測色（左から右へ濃くなる）。継ぎ足す空はこの色で描くため、
	   写真との継ぎ目に段差が出ない。8点は画像を8列に縮小して測った値 */
	--hero-sky-gradient: linear-gradient(to right,
		#80b9f1 6.25%, #65aceb 18.75%, #49a0e5 31.25%, #2294df 43.75%,
		#038ddb 56.25%, #0287d7 68.75%, #0184d7 81.25%, #0285d9 93.75%);
	background-color: var(--color-secondary); /* 画像未読込時のフォールバック */
	/* 背景は2層。手前が継ぎ足す空、奥が写真。
	   画面が低くて写真の空だけではヘッダーに届かないとき、写真を --hero-sky 分
	   だけ下げ、空いた上端を写真の最上段と同じ色の空で埋める。

	   以前は見出しが載る右側に白いベールを重ねていたが、写真をそのまま見せたい
	   という判断で外した。見出しの読みやすさは .hero-title の text-shadow
	   （文字の周囲だけを白でぼかす）で確保している。 */
	background-image: var(--hero-sky-gradient), url('assets/img/hero-tokyo-tower-fv.jpg');
	background-size: 100% var(--hero-sky), cover;
	/* 写真の縦位置は --hero-sky（継ぎ足した空のすぐ下から描画）。
	   横: タワーは画像の 56.9% の位置。写真が画面より横長なので cover は
	       常に左右をトリミングする。57% 指定でタワーが画面内に残る。 */
	background-position: 0 0, 57% var(--hero-sky);
	background-repeat: no-repeat;
	color: var(--color-bg-white);
	/* FVの高さは画面の高さちょうど。スクロールせずにFV全体が見えることを優先する。
	   svh への差し替え（下の @supports）で使うため変数にしてある。
	   以前はここに max(100vh, 57vw + 空) を入れて、横長の画面で東京タワーの
	   足元が切れないようにしていた。ただしその指定だと画面より縦に長くなり、
	   FV全体を見るのにスクロールが要る。足元のトリミングより1画面に収めることを
	   優先する方針に変えたため外した（足元の欠けは下の min-aspect-ratio 側で緩和する）。 */
	--hero-frame: 100vh;

	/* 東京タワーが画面のどこに描かれるかを式にしたもの。文字の縦位置はこれを基準にする。
	   写真は cover で拡大され、超横長の画面を除いて「高さ基準」になる。つまり
	   写真の高さ＝画面の高さで、上端は --hero-sky の位置から描かれる。
	   タワーは写真の中で 上端11.07%／下端89.29% の位置にあるので:

	     タワー上端 = --hero-sky + 11.07vh = max(11.07vh, 5.625rem)
	                  （--hero-sky が 5.625rem − 11.07vh なので足すと max になる。
	                    つまり上端は必ずヘッダーの下端より下に来る）
	     タワーの高さ = (89.29 − 11.07)vh = 78.22vh（--hero-sky に関係なく一定）

	   画面が高いほどタワーは大きく・上端は下がる。文字を画面上端からの固定値で
	   置くと、高い画面ほど文字がタワーに対して上に浮いてしまうため、
	   .hero-layout ではこの2つの変数から縦位置を出している。 */
	--tower-top: max(11.07vh, 5.625rem);
	--tower-height: 78.22vh;

	min-height: var(--hero-frame);
	display: flex;
	/* 中身(.hero-layout)をFVの高さいっぱいに伸ばす。
	   その中での縦位置は .hero-layout 側で決める（PCは上寄せ・スマホは中央） */
	align-items: stretch;
	padding-top: 8.125rem;
	padding-bottom: 5rem;
	overflow: hidden;
}

/* スマホのブラウザはアドレスバーの出入りで 100vh が実際の表示領域より大きくなる。
   svh（アドレスバーが出ている状態の高さ）を使うと、どの状態でもFVが必ず収まる。
   対応していないブラウザは上の 100vh のままになる。 */
@supports (height: 100svh) {
	#top { --hero-frame: 100svh; }
}

/* 写真(86/35)より横長の画面では cover の基準が高さから幅に変わり、
   写真の高さは 100vw × 35/86 = 40.70vw になる。そのため写真が自前で持っている
   空の高さも 11.07vh ではなく 4.51vw（11.07% × 40.70vw）。足す空はその不足分だけ。
   86/35 は写真の縦横比（2752/1120）＝cover の基準が切り替わる境目。
   21:9(2.33) より横長なので、ここに入るのは超横長のウィンドウだけ。 */
@media (min-aspect-ratio: 86/35) {
	#top {
		--hero-sky: max(0px, calc(5.625rem - 4.51vw));
		/* この画面では写真の高さが 40.70vw なので、タワーの位置も vw で出す */
		--tower-top: max(4.51vw, 5.625rem);
		--tower-height: 31.83vw;
	}
}

/* 写真(86/35)より縦長の画面では cover の拡大基準が高さになり、写真は左右が
   トリミングされる。継ぎ足す空は画面いっぱいに描くため、画像の全幅を前提にした
   既定の8点グラデーションでは継ぎ目の色がずれる。そこで実際に見えている範囲の
   実測色だけを使ったグラデーションに差し替える。

   なお継ぎ足す空が実際に出るのは、写真の空(12.24vh)がヘッダー(90px)に届かない
   画面＝高さ 813px 未満のときだけ。スマホ縦向きがこれに当たり、そのとき
   見えているのは画像の 44〜67% あたりの列になる。 */
@media (max-aspect-ratio: 86/35) {
	#top {
		--hero-sky-gradient: linear-gradient(to right, #1f92de, #0288d8);
	}
}

/* FVの中身は左寄せの1カラムだけ。タグラインの下に大見出しを積み、
   東京タワーが写る右側は空けておく。

   縦位置は東京タワー基準。塊の先頭（英字の行）を
   「タワーの上端から、タワーの高さの 8.6% ぶん下」に置く。
   8.6%（＝78.22vh の 6.75vh）はクライアント指示画像から逆算した値で、
   指示画像の環境（幅1254px・高さ625px・rem 15.7px）では次のとおり一致する:

                      目標      この指定での実際
     英字（緑）       152.5px   152.5px
     「AI時代の」     251.3px   251.2px
     「知財・法務支援」329.3px   332.3px

   以前はここを画面上端からの固定値（0.2rem）にしていたが、それだと
   画面が高いほどタワーの上端だけが下がり、文字がタワーに対して上に浮いた。
   タワー基準にしたことで、どの画面の高さでも同じ見え方になる。
   上下の微調整はこの 6.75vh の増減だけで効く（1vh ＝ 画面の高さの1%）。

   padding-top は #top の padding-top(8.125rem) の続きから始まるため、
   目標位置からその分を引く。引きすぎて負になる画面（極端に低いウィンドウ）
   では 0 に丸める。

   gap は英字と見出しの間隔、2行の間隔は .hero-title の line-height で決まる。
   これらは文字の大きさに従うので rem のまま（タワーではなく文字基準が正しい）。
   東京タワーを避けるため、見出しは2行に分けて右へ伸びないようにしてある。

   これらはPC用。スマホは 769px 指定で従来の値（1rem / 1.875rem）に戻す。
   左右のpaddingは .container の 1.5rem を残したいので padding-top だけを指定する
   （ショートハンドで書くと左右が 0 に上書きされる）。 */
.hero-layout {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: max(0px, calc(var(--tower-top) + 6.75vh - 8.125rem));
	gap: 2.3rem;
	z-index: 2;
}

/* FV-5案の英文タグライン。左に短い罫を引いたセリフ体。
   文字は見出しと同じ紺。下にくる空は #499ee1 前後で、紺なら 5.5:1、
   白だと 2.7:1 しか取れないため、読みやすさの面でも紺が正しい。
   罫だけは案と同じ赤（--color-tagline-rule）。案の実物から採取した色で、
   文字色とは独立させたいので currentColor は使わない。 */
.hero-tagline {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	font-family: 'Playfair Display', var(--font-serif);
	font-size: clamp(1rem, 1.9vw, 1.6rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-secondary);
}

.hero-tagline::before {
	content: "";
	flex: none;
	width: clamp(1.75rem, 3vw, 3.25rem);
	height: 0.125rem;
	background-color: var(--color-tagline-rule);
}

/* PCは1行なので改行を殺す。前の文字列の末尾に半角スペースを入れてあるため、
   br を消しても「By Your Side. In Every Challenge.」と正しく続く。
   スマホでは下の 769px 指定で display: inline に戻して2段にする */
.hero-tagline-br {
	display: none;
}

/* 横書きの大見出し。タグラインの直下に置く。
   書体はFV-5案と同じ明朝（Noto Serif JP）。案より一段太い 700 を使う。
   大きさは rem 指定。ルートの font-size が画面幅に比例する（100vw/80）ため、
   これだけでどの画面幅でも同じ見え方のまま比例縮小する。
   PC・スマホとも「AI時代の」「知財・法務支援」の2行に分ける（下の span 指定）。
   2行にするのは、1行だと右へ伸びて東京タワーに重なるため。
   4.5rem のとき2行目「知財・法務支援」（7.98em）は約36rem で、
   タワーの手前で収まる。 */
.hero-title {
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: 4.5rem;
	/* 2行の間隔。指示により 1.4（PC・スマホ共通）。
	   以前はPC 1.15（指示画像の赤い太線2本の間隔に合わせた値）／
	   スマホ 1.75 と分けていたが、1.4 に統一する指示を受けた。 */
	line-height: 1.4;
	letter-spacing: 0.14em;
	color: var(--color-secondary);
	/* 見出しの下半分は街並みの上に載る。そこは明暗差（コントラスト比 7.7:1）は
	   足りているのに、ビルの細部で背景がざらついていて（明るさのばらつきが
	   上部の空の 5 に対し 25）、文字の輪郭が背景の凹凸に紛れる。
	   白ベールを濃くすれば消えるが写真が白く飛ぶため、文字の周囲だけを
	   白でぼかして地を平らにする。3段重ねで、近いほど濃く遠いほど薄い。
	   ぼかし幅は em 指定。文字の大きさは画面によって 39px〜72px まで変わるため、
	   px で固定すると小さい画面でぼかしだけが大きく残ってしまう。 */
	text-shadow:
		0 0 0.10em rgba(255, 255, 255, 0.85),
		0 0 0.26em rgba(255, 255, 255, 0.70),
		0 0 0.56em rgba(255, 255, 255, 0.50);
	margin: 0;

	/* 英字タグラインから見出しだけをさらに下へ離す（.hero-layout の gap に上乗せ）。

	   14.9vh はクライアント指示画像の赤枠から逆算した値で、指示画像の環境
	   （幅約2151px・高さ約1177px）だと赤枠の中心にちょうど重なる。
	   タワーと同じ vh 基準なので、画面が高いほど間隔も広がり、
	   タワーに対する位置は保たれる。

	   そこから引いている 9.45rem が「赤枠より上へ何行分ずらすか」。
	   見出し1行の高さは line-height 1.4 × font-size 4.5rem ＝ 6.3rem なので、
	   9.45rem ＝ 1.5行分。内訳は「半行上げる」指示の 3.15rem に、
	   クライアントの「もう少し上部に」の指示で 1行分 6.3rem を追加したもの。
	   引く量を rem にしているのは「何行分」が文字基準の量だから。
	   画面の高さに関わらず、赤枠の位置からちょうど1.5行ぶん上に来る。

	   max() で 0 未満に丸めているのは、負の値だと見出しがタグラインに
	   重なってしまうため。9.45rem を引くと高さ約1015px未満のウィンドウでは
	   0 になり、gap のぶんだけ離れた位置（＝タワー基準の自然な位置）に収まる。
	   その場合もタワーに対する位置は 31〜35% の範囲に収まるので破綻しない。

	   さらに上げるならこの 9.45rem を増やす。下げるなら減らす。
	   スマホは 769px 指定の margin-top: 4.05rem で上書きする（今回変更なし）。 */
	margin-top: max(0px, calc(14.9vh - 9.45rem));
}

/* 「AI時代の」の後で必ず改行させる。幅に余裕があるかどうかに関わらず
   2行に固定することで、どの画面でも東京タワーの手前で文字が終わる */
.hero-title span {
	display: block;
}

/* ==========================================================================
   5. ABOUT & SERVICES
   ========================================================================== */
/* 装飾なし（背景・縦罫・影を持たないプレーンなテキストブロック） */
.about-main-quote {
	margin-bottom: 2.5rem;
}

/* 事務所案内の導入文（FVから移設）。書体は直後の .fine-message と同じ明朝に揃える */
.about-lead {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.8;
	color: var(--color-secondary);
	margin-bottom: 1.25rem;
}

/* 導入文に続く説明。以前は index.php に直書きしていた指定をここへ移した */
.fine-message {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.95;
	letter-spacing: 0.03125rem;
	color: var(--color-secondary);
	margin-bottom: 0;
}

/* 2つの標語（事務所案内の冒頭から移設）。
   「代表の想い」の紺帯と写真の間に置くため、帯にそろえて中央に寄せる。
   .mission-panel p の指定（0.98rem・両端揃え）より後に書いて上書きする */

/* 装飾なし（背景・枠線・罫線を持たないプレーンなテキストブロック） */
.mission-panel {
	margin-bottom: 3.75rem;
}

/* 共同代表2名の写真。「代表の想い」見出しの直下に置く。
   下のコメント2カラム（コンテナ幅いっぱい）より一段細く見せて視線を中央に集める */
.representatives-photo {
	margin: 0 auto 2.5rem;
	max-width: 47.5rem;
	border-radius: 0.25rem;
	overflow: hidden;
	/* 写真の背景が白に近く、白いページ背景に溶けるため輪郭を影で立てる。
	   同じ問題を持つメンバー顔写真(.member-avatar-photo)と同じ値に揃えている */
	box-shadow: var(--shadow-photo-strong);
	line-height: 0;
}

.representatives-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* 「代表の想い」見出し: 紺ベタ＋白文字、中央揃え。
   角丸はサイト共通の 0.25rem（ボタン・取扱業務カード・メンバーカード・
   代表2ショット写真などと同じ値）に合わせている */
.mission-panel h3 {
	display: block;
	width: fit-content;
	margin: 0 auto 2.5rem;
	padding: 0.4375rem 1.375rem;
	border-radius: 0.25rem;
	background-color: var(--color-secondary);
	color: #fff;
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 700;
	text-align: center;
}

/* 共同代表2名のコメント: PCは横2カラム、992px以下で縦積み（縦積み時の間隔は row-gap で確保）。
   肩書行と本文をそれぞれ親グリッドの同じ行に載せる（subgrid）ことで、肩書の長さの違い
   （「代表弁理士　青山 純」／「代表弁護士・弁理士　城野 祐希」）で折り返しが起きても
   左右の本文の開始位置が揃う。subgrid 非対応のブラウザでは各カラム独立の
   グリッドとして描画され、従来と同じ見え方になる。 */
.mission-members {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	gap: 0.9375rem 3.125rem;
}

.mission-member {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	row-gap: 0.9375rem;
}

.mission-title-member {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-accent);
	margin: 1.5625rem 0 0;
}

.mission-panel p {
	font-size: 0.98rem;
	line-height: 1.95;
	color: var(--color-text-main);
	text-align: justify;
	margin-bottom: 0.9375rem;
}

.mission-panel .bold-vision {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.9;
	color: var(--color-secondary);
	text-align: center;
	margin: -0.625rem 0 2.125rem;
}

/* 本文は意味の区切りごとに <p> で分けている。最後の段落の下余白は
   カラム間の row-gap と二重になるため落とす */
.mission-body p:last-child {
	margin-bottom: 0;
}

.strengths-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 3.125rem;
	margin-top: 3.125rem;
}

/* 枠線・背景を持たせず、写真＋連番＋見出しで見せる。
   本文がもともと左揃えのため、カード全体を左揃えに統一する。
   3枚の連番が縦にそろい、視線の起点が明確になる */
.strength-card {
	text-align: left;
}

/* カード上部のイメージ写真。取扱業務カードと同じ2層の影で浮かせる */
.strength-photo {
	margin: 0 0 1.375rem;
	border-radius: 0.25rem;
	overflow: hidden;
	line-height: 0;
	box-shadow: var(--shadow-photo);
}

.strength-photo img {
	display: block;
	width: 100%;
	height: auto;
	/* 支給画像は16:9。比率を固定して読み込み時のレイアウトのずれを防ぐ */
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 連番と見出しを横並びにする。align-items: baseline で文字のベースライン
   （字面の下端）をそろえる。文字サイズが違うため、箱の下端をそろえる
   flex-end ではなく baseline のほうが見た目に下がそろう */
.strength-head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.4375rem;
}

/* 紺のままだと見出しの一部に見えるため、欧文書体・大きめ・薄いグレーにして
   「番号」であることを明示する */
.strength-number {
	flex: 0 0 auto;
	font-family: var(--font-accent);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.0625rem;
	color: rgba(12, 35, 64, 0.22);
}

.strength-card h4 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-secondary);
	line-height: 1.6;
	/* 下余白は .strength-head が持つ。長い見出しでも縮められるよう min-width: 0 */
	margin-bottom: 0;
	min-width: 0;
}

.strength-card p {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	line-height: 1.75;
	text-align: left;
}

#services {
	background-color: var(--color-bg-light);
}

.services-subheading {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: 1.875rem;
	border-bottom: 1px solid rgba(12, 35, 64, 0.1);
	padding-bottom: 0.625rem;
}

/* 個人向け業務の見出し。直前の法人向け業務のカード群との間に余白を設ける */
.individual-margin {
	margin-top: 2.5rem;
}

/* 横2列。各分野8項目なので縦4段になる */
.services-box-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	/* 見出しが2行になるカードを含む行だけ高くなるのを防ぎ、全行の高さを揃える */
	grid-auto-rows: 1fr;
}

/* カードはクリックで詳細モーダルを開く（role="button" / tabindex="0"）。
   アイコンを左、名称をその右に置いた横長のカード */
.service-box-card {
	background-color: var(--color-bg-white);
	border-radius: 0.25rem;
	padding: 1rem 1.25rem;
	/* 金縁の代わりに、やわらかい2層の影で浮いているように見せる */
	box-shadow: var(--shadow-photo);
	transition: var(--transition-smooth);
	text-align: left;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.875rem;
	cursor: pointer;
}

.service-box-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 0.25rem 0.625rem rgba(12, 35, 64, 0.08), 0 1.375rem 2.75rem rgba(12, 35, 64, 0.14);
}

.service-box-card:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* 幅を固定して、名称の開始位置が全カードでそろうようにする */
.service-box-icon {
	flex: 0 0 1.625rem;
	text-align: center;
	font-size: 1.4rem;
	color: var(--color-accent);
}

.service-box-card h4 {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.98rem;
	font-weight: 700;
	color: var(--color-secondary);
	line-height: 1.5;
}

/* 見出しの改行位置を整える。日本語はどの文字間でも折り返せるため、
   スマホの狭いカードでは「民事（金銭・不動産）トラ / ブル」のように
   語の途中で切れてしまう。意味の切れ目までを .nb で括り、
   そこで折り返させて語が分断されないようにする */
.service-box-card h4 .nb {
	white-space: nowrap;
}

/* クリックできることを示す「＋」。横長カードでは右端に置く。
   HTMLでは先頭にあるため order で末尾へ回し、margin-left: auto で右に寄せる */
.service-box-more {
	order: 1;
	margin-left: auto;
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background-color: rgba(12, 35, 64, 0.06);
	color: var(--color-accent);
	font-size: 0.68rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-smooth);
}

.service-box-card:hover .service-box-more {
	background-color: var(--color-secondary);
	color: #fff;
}

/* 業務内容の本文。モーダルへJSで複製するための保管場所。
   非表示だがHTMLには出力されているため、検索エンジンには通常どおり読まれる
   （クリック時にJSで生成する方式だとクローラに読まれない）。 */
.service-box-body {
	display: none;
}

/* 取扱業務の末尾の注記 */
.services-note {
	margin-top: 1.5rem;
	font-size: 0.88rem;
	color: var(--color-text-muted);
}

/* --- 取扱業務の詳細モーダル -------------------------------------------------
   <dialog> の showModal() を使う。Esc での閉じる・背面へのフォーカス移動の
   抑止・最前面への表示がブラウザ標準で効くため、自前で作るより堅い。 */
.service-modal {
	border: none;
	border-radius: 0.375rem;
	padding: 0;
	max-width: 40rem;
	width: calc(100% - 2.5rem);
	/* ブラウザ標準では dialog は margin:auto で画面中央に置かれるが、
	   このテーマの `* { margin: 0 }` に打ち消されて左上に寄ってしまう。
	   ここで明示的に戻す */
	margin: auto;
	/* 本文が長い端末でも画面外にはみ出さないよう、モーダル内でスクロールさせる */
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	background-color: var(--color-bg-white);
	box-shadow: 0 1.875rem 4.375rem rgba(12, 35, 64, 0.25);
	color: var(--color-text-main);
}

.service-modal::backdrop {
	background-color: rgba(12, 35, 64, 0.55);
	backdrop-filter: blur(2px);
}

.service-modal-inner {
	position: relative;
	padding: 2.8125rem 2.8125rem 2.5rem;
	text-align: center;
}

.service-modal-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	border-radius: 50%;
	background-color: transparent;
	color: var(--color-text-muted);
	font-size: 1.1rem;
	cursor: pointer;
	transition: var(--transition-smooth);
}

.service-modal-close:hover {
	background-color: rgba(12, 35, 64, 0.06);
	color: var(--color-secondary);
}

.service-modal-close:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.service-modal-icon {
	font-size: 2.2rem;
	color: var(--color-accent);
	margin-bottom: 0.875rem;
	line-height: 1;
}

.service-modal-title {
	font-family: var(--font-serif);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-secondary);
	line-height: 1.5;
	margin-bottom: 1.375rem;
}

.service-modal-body {
	text-align: left;
	font-size: 0.95rem;
	line-height: 2;
	color: var(--color-text-main);
}

/* ==========================================================================
   6. MEMBERS & PARTNERS
   ========================================================================== */
/* 提携先の事務所名リンク（親サイトへ別タブで遷移） */
.partner-name-link {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-smooth);
}

.partner-name-link:hover,
.partner-name-link:focus-visible {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.25rem;
}

/* 別タブで開くことを示すアイコン。文字より一段小さく、名前から少し離す */
.partner-name-link__icon {
	font-size: 0.32em;
	margin-left: 0.8em;
	vertical-align: 0.75em;
}

/* 画面には出さず、スクリーンリーダーにだけ読ませる補足文 */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.members-comprehensive-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.875rem;
}

.member-layout-card {
	/* 提携先セクションの背景(--color-bg-light)と同色だと輪郭が消えるため白にする */
	background-color: var(--color-bg-white);
	border-radius: 0.25rem;
	padding: 2.8125rem 1.875rem;
	/* 金縁の代わりに、やわらかい2層の影で浮いているように見せる（取扱業務と同じ設計） */
	box-shadow: var(--shadow-photo);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: var(--transition-smooth);
	min-height: 30rem;
}

.member-layout-card:hover {
	box-shadow: 0 0.25rem 0.625rem rgba(12, 35, 64, 0.08), 0 1.375rem 2.75rem rgba(12, 35, 64, 0.14);
}

/* アバターは枠線を持たず、影で輪郭を出す（写真・SVGとも同じ見え方に揃える） */
.member-avatar-svg {
	width: 11.25rem;
	height: 11.25rem;
	border-radius: 50%;
	margin-bottom: 1.5625rem;
	filter: drop-shadow(0 0.25rem 0.625rem rgba(12, 35, 64, 0.18)) drop-shadow(0 0.875rem 2rem rgba(12, 35, 64, 0.18));
}

/* 顔写真版アバター（撮影済みのメンバーのみ。未撮影は .member-avatar-svg のまま） */
.member-avatar-photo {
	width: 11.25rem;
	height: 11.25rem;
	border-radius: 50%;
	margin-bottom: 1.5625rem;
	box-shadow: var(--shadow-photo-strong);
	object-fit: cover;
	object-position: center top;
}

.member-layout-card h3 {
	font-family: var(--font-serif);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: 0.3125rem;
}

.member-subtitle {
	font-size: 0.8rem;
	color: var(--color-accent);
	font-weight: 700;
	letter-spacing: 0.03125rem;
	margin-bottom: 1.5625rem;
	text-transform: uppercase;
}

.member-cv-box {
	width: 100%;
	text-align: left;
	border-top: 1px solid rgba(12, 35, 64, 0.08);
	padding-top: 1.5625rem;
}

.member-cv-box h4 {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: 0.9375rem;
	border-bottom: 1px dashed rgba(12, 35, 64, 0.1);
	padding-bottom: 0.375rem;
}

.cv-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.cv-list li {
	font-size: 0.9rem;
	color: var(--color-text-muted);
	margin-bottom: 0.625rem;
	display: flex;
	line-height: 1.7;
}

.cv-list li span {
	width: 7.5rem;
	font-weight: 700;
	color: var(--color-secondary);
	flex-shrink: 0;
}

/* ==========================================================================
   7. OTHERS (Careers, Access, Contact)
   ========================================================================== */
/* 求人情報: CTAセクション（参考: f-dc-j.co.jp/company/philosophy の2カラム構成）
   従来のグレーの囲みボックスを廃し、濃紺の全幅帯にフォーム／電話の2導線を並べる */
.careers-cta {
	position: relative;
	background-color: var(--color-secondary);
	color: var(--color-bg-white);
	overflow: hidden;
}

/* 装飾の円より前面に出す */
.careers-cta .container {
	position: relative;
	z-index: 1;
}

/* 濃紺背景では既定の濃紺見出しが読めないため白に反転する */
.section-header--on-dark .section-title {
	color: var(--color-bg-white);
}

/* アクセント色は背景と同じ紺のため、濃紺セクションでは
   英字タグと見出し下線を白に置き換えないと背景に沈む */
.section-header--on-dark .section-tag {
	color: var(--color-bg-white);
}

.section-header--on-dark .section-title::after {
	background-color: var(--color-bg-white);
}

.careers-cta-inner {
	max-width: 40rem;
	margin: 0 auto;
	text-align: center;
}

.careers-cta-text {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 1.75rem;
}

/* 濃紺背景の上に置くボタン。通常は白地×紺文字、マウスオーバーで紺地×白文字に反転する。
   反転後はセクション背景と同じ紺になるため、白い内枠でボタンの輪郭を残す */
.careers-cta-button {
	background-color: var(--color-bg-white);
	color: var(--color-secondary);
	padding: 0.8125rem 1.875rem;
	font-size: 0.92rem;
	box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.18);
}

.careers-cta-button:hover {
	background-color: var(--color-secondary);
	color: var(--color-bg-white);
	transform: translateY(-2px);
	box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.28), inset 0 0 0 0.0625rem var(--color-bg-white);
}

/* キーボード操作時のフォーカス位置。ブラウザ既定のリングは濃紺背景＋白ボタンだと
   埋もれるため、白いリングを白ボタンの外側に離して描く */
.careers-cta-button:focus-visible {
	outline: 2px solid var(--color-bg-white);
	outline-offset: 3px;
}

/* 背景装飾の円。下から上へゆっくり流れる。
   クリックの邪魔をしないよう pointer-events を切っている */
.careers-cta-circles {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	z-index: 0;
}

.careers-cta-circles li {
	position: absolute;
	bottom: -11.25rem;
	display: block;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background-color: rgba(255, 255, 255, 0.02);
	animation: careers-cta-float linear infinite;
}

.careers-cta-circles li:nth-child(1)  { left:  4%; width:  5rem; height:  5rem; animation-duration: 26s; animation-delay:  0s; }
.careers-cta-circles li:nth-child(2)  { left: 14%; width:  1.625rem; height:  1.625rem; animation-duration: 18s; animation-delay:  3s; }
.careers-cta-circles li:nth-child(3)  { left: 24%; width: 8.125rem; height: 8.125rem; animation-duration: 34s; animation-delay:  7s; }
.careers-cta-circles li:nth-child(4)  { left: 36%; width:  2.875rem; height:  2.875rem; animation-duration: 22s; animation-delay: 12s; }
.careers-cta-circles li:nth-child(5)  { left: 47%; width:  3.875rem; height:  3.875rem; animation-duration: 29s; animation-delay:  2s; }
.careers-cta-circles li:nth-child(6)  { left: 58%; width: 6.25rem; height: 6.25rem; animation-duration: 31s; animation-delay: 16s; }
.careers-cta-circles li:nth-child(7)  { left: 68%; width:  2rem; height:  2rem; animation-duration: 20s; animation-delay:  9s; }
.careers-cta-circles li:nth-child(8)  { left: 78%; width: 9.375rem; height: 9.375rem; animation-duration: 38s; animation-delay:  5s; }
.careers-cta-circles li:nth-child(9)  { left: 88%; width:  3.375rem; height:  3.375rem; animation-duration: 24s; animation-delay: 19s; }
.careers-cta-circles li:nth-child(10) { left: 95%; width:  2.375rem; height:  2.375rem; animation-duration: 27s; animation-delay: 11s; }

@keyframes careers-cta-float {
	from { transform: translateY(0) rotate(0deg); opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	to   { transform: translateY(-140vh) rotate(360deg); opacity: 0; }
}

/* 動きに敏感な利用者には装飾を止めて表示する */
@media (prefers-reduced-motion: reduce) {
	.careers-cta-circles li {
		animation: none;
		bottom: auto;
		top: 20%;
		opacity: 1;
	}
}

.access-info-panel, .contact-form-panel {
	background-color: var(--color-bg-white);
	border-radius: 0.25rem;
	padding: 3.75rem;
	box-shadow: var(--shadow-sm);
	max-width: 56.25rem;
	margin: 0 auto;
}

/* アクセス: オフィス内観バナー（事務所所在地パネルの下に置く横長画像）。
   影は「私たちの強み」「取扱業務」「メンバー」と同じ2層のものに揃える */
.access-photo-banner {
	margin: 1.875rem 0 0;
	border-radius: 0.25rem;
	overflow: hidden;
	box-shadow: var(--shadow-photo-strong);
	line-height: 0;
}

.access-photo-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* アクセス: 住所リスト＋新青山ビル外観の2カラム */
.access-address-grid {
	display: grid;
	grid-template-columns: 1fr 0.5fr;
	gap: 2.5rem;
	align-items: start;
}

.access-building-photo {
	margin: 0;
	border-radius: 0.25rem;
	overflow: hidden;
	box-shadow: var(--shadow-photo-strong);
	line-height: 0;
}

.access-building-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* アクセス: 最寄り駅（ja-pat.com を参考に、見出しを付けず見出し直下に中央寄せ）
   li { list-style: none } がグローバルに効いているため、記号なしの行として並ぶ */
.access-station-list {
	max-width: 56.25rem;
	margin: 0 auto 1.875rem;
	text-align: center;
}

.access-station-list li {
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--color-text-main);
}

/* アクセス: Googleマップ埋め込み（ja-pat.com を参考に、画面幅いっぱい・高さ480px・モノクロ）
   セクション見出しの直下。.container の外＝section直下に置いているため、
   幅指定なしで画面幅いっぱいになる。上の余白は .section-header の margin-bottom が作る */
.access-map {
	margin: 0 0 1.875rem;
	line-height: 0;
}

.access-map iframe, .access-map .access-map-canvas {
	display: block;
	width: 100%;
	height: 30rem;
	border: 0;
}

/* JS API版は地図側の styles で白黒化するため、CSSフィルタは iframe だけに掛ける
   （両方に掛けるとピンまで灰色になってしまう） */
.access-map iframe {
	filter: grayscale(100%);
}

.address-detail-list li {
	display: flex;
	gap: 0.9375rem;
	font-size: 0.95rem;
	margin-bottom: 1.375rem;
	align-items: flex-start;
}

.address-detail-list li i {
	color: var(--color-accent);
	font-size: 1.1rem;
	margin-top: 0.3125rem;
}

/* 電話番号・メールアドレスのリンク。スマホからそのまま発信・送信できるようにする。
   本文に溶け込ませたいので既定では下線を出さず、hover/フォーカス時だけ見せる */
.tel-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.tel-link:hover,
.tel-link:focus-visible {
	color: var(--color-accent-hover);
	border-bottom-color: currentColor;
}

.form-group {
	margin-bottom: 1.5625rem;
	display: flex;
	flex-direction: column;
}

.form-group label {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-secondary);
	margin-bottom: 0.625rem;
}

/* 必須バッジ。参照サイト ja-pat.com/contact の .essential と同一の指定 */
.form-group label .essential {
	margin: 0 0 0 .5em;
	padding: .2em .6em;
	font-size: .75em;
	color: #fff;
	background-color: #A43C54;
}

.form-group input, .form-group textarea {
	width: 100%;
	padding: 0.875rem;
	border-radius: 0.25rem;
	border: 1px solid rgba(12, 35, 64, 0.12);
	background-color: var(--color-bg-light);
	font-size: 0.95rem;
	transition: var(--transition-smooth);
}

.form-group input:focus, .form-group textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0.625rem var(--color-accent-glow);
	background-color: var(--color-bg-white);
}

/* プライバシーポリシー同意（必須）。チェックボックスとラベルを1行に並べる。
   .form-group input の width:100% / padding:14px がそのまま効くと
   チェックボックスが入力欄と同じ大きさになるため、ここで打ち消している */
.form-consent {
	margin-bottom: 1.25rem;
}

.form-group .form-consent-label {
	display: flex;
	align-items: flex-start;
	/* チェックボックスと文言をまとめてフォーム幅の中央に置く */
	justify-content: center;
	gap: 0.625rem;
	margin-bottom: 0;
	font-weight: 500;
	line-height: 1.6;
	cursor: pointer;
}

.form-consent .form-error {
	text-align: center;
}

.form-group .form-consent-label input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 auto;
	margin-top: 0.125rem;
	padding: 0;
	background-color: transparent;
	accent-color: var(--color-secondary);
	cursor: pointer;
}

.form-group .form-consent-label input[type="checkbox"]:focus {
	box-shadow: none;
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.form-group .form-consent-label a {
	color: var(--color-accent);
	text-decoration: underline;
}

.form-group .form-consent-label a:hover {
	color: var(--color-accent-hover);
}

/* スパム対策のハニーポット。人間には見せず、bot だけが入力する欄。
   display: none だと埋めない bot がいるため画面外に飛ばして隠す。 */
.form-honeypot {
	position: absolute;
	left: -624.9375rem;
	width: 0.0625rem;
	height: 0.0625rem;
	overflow: hidden;
}

/* エラー表示。色は必須バッジ（.essential）と同じ #A43C54 に揃える */
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] {
	border-color: #A43C54;
	background-color: #fdf6f7;
}

.form-error {
	margin-top: 0.5rem;
	font-size: 0.82rem;
	color: #A43C54;
}

/* 送信ボタンの直前に出す、不備の件数のまとめ。個々の項目の赤字と対で使う。
   ボタンを押した位置で気づけるよう、フォーム上部ではなくここに置く */
.form-error-summary {
	margin-bottom: 0.875rem;
	padding: 0.625rem 0.875rem;
	border-radius: 0.1875rem;
	background-color: rgba(164, 60, 84, 0.08);
	font-weight: 700;
}

.form-alert {
	margin-bottom: 1.875rem;
	padding: 1.125rem 1.25rem;
	border: 1px solid rgba(164, 60, 84, 0.25);
	border-radius: 0.25rem;
	background-color: #fdf6f7;
	color: #A43C54;
	font-size: 0.88rem;
	line-height: 1.8;
}

.form-alert-title {
	font-weight: 700;
}

.form-alert ul {
	margin-top: 0.375rem;
	padding-left: 1.4em;
}

.form-alert li {
	list-style-type: disc;
}

/* ==========================================================================
   8. PRIVACY POLICY PAGE STYLES
   ========================================================================== */
#privacy-policy-page {
	display: none; /* 初期状態では非表示。JSで制御 */
	padding: 9.375rem 0 6.25rem;
	background-color: var(--color-bg-white);
	min-height: 100vh;
}

.privacy-container {
	max-width: 56.25rem;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.privacy-content {
	color: var(--color-text-main);
	line-height: 1.8;
}

.privacy-content h3 {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	color: var(--color-secondary);
	margin: 2.5rem 0 1.25rem;
	border-bottom: 2px solid rgba(12, 35, 64, 0.08);
	padding-bottom: 0.5rem;
}

.privacy-content p {
	margin-bottom: 1.25rem;
	text-align: justify;
}

.privacy-content ul, .privacy-content ol {
	margin-bottom: 1.25rem;
	padding-left: 1.25rem;
}

.privacy-content li {
	list-style-type: disc;
	margin-bottom: 0.625rem;
	line-height: 1.7;
}

.privacy-signature {
	margin-top: 3.125rem;
	padding-top: 1.875rem;
	border-top: 1px solid rgba(12, 35, 64, 0.08);
}

/* ==========================================================================
   9. FOOTER & MODAL
   ========================================================================== */
footer {
	background-color: var(--color-secondary);
	color: #9ca3af;
	padding: 5rem 0 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.875rem;
	margin-bottom: 3.75rem;
	flex-wrap: wrap;
}

.footer-links-horizontal {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	flex-wrap: wrap;
}

.footer-links-horizontal li a {
	color: #9ca3af;
	font-size: 0.95rem;
	font-weight: 700;
}

.footer-links-horizontal li a:hover {
	color: var(--color-bg-white);
}

/* モーダル */
.modal-overlay {
	display: none;
	position: fixed;
	top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(12, 35, 64, 0.7);
	backdrop-filter: blur(4px);
	justify-content: center; align-items: center;
	z-index: 10001;
}

.modal-container {
	background-color: var(--color-bg-white);
	border-radius: 0.25rem;
	padding: 2.8125rem;
	max-width: 31.25rem;
	width: 90%;
	text-align: center;
}

/* Responsive */

/* タブが並ぶ幅のうち狭い側。英字ロゴ＋日本語事務所名とタブが競合して
   はみ出すため、両方を少しずつ縮めて1行に収める */
@media (min-width: 993px) and (max-width: 1100px) {
	.brand-logo-ja { width: 14.625rem; }
	.brand-logo-svg { width: 10.9375rem; }
	#site-header .brand-wrap { gap: 0.625rem; }
	.nav-tabs { gap: 0.125rem; }
	.nav-tab-link { padding: 0.5rem 0.4375rem; font-size: 0.8rem; }
}

@media (max-width: 992px) {
	.grid-2 { grid-template-columns: 1fr; }
	.nav-tabs { display: none; }
	.menu-toggle { display: block; }
	.strengths-grid { grid-template-columns: 1fr; }
	/* 1カラムになると写真がコンテナ幅いっぱいまで広がって過大になるため抑える */
	.strength-card { max-width: 32.5rem; margin: 0 auto; }
	.members-comprehensive-grid { grid-template-columns: 1fr; }
	/* 縦積みでは左右で行を揃える必要がないため subgrid を解除する
	   （解除しないと肩書と本文が別々のグリッド行として交互に並ぶ） */
	.mission-members { grid-template-columns: 1fr; grid-template-rows: none; }
	.mission-member { display: block; grid-row: auto; }
	/* subgrid の row-gap がなくなるぶん、肩書と本文の間隔を margin で補う */
	.mission-title-member { margin-bottom: 0.9375rem; }
	.access-info-panel { padding: 2.5rem; }
	.access-address-grid { grid-template-columns: 1fr; gap: 1.875rem; }
	.access-building-photo { max-width: 26.25rem; margin: 0 auto; }
	.access-map iframe, .access-map .access-map-canvas { height: 22.5rem; }
	.footer-grid { flex-direction: column; align-items: flex-start; }
}

/* --- FVの文字（スマホ） -------------------------------------------------
   769px はファイル冒頭の html { font-size } がPC用(100vw/80)からスマホ用
   (100vw/25)へ切り替わる幅。ここを境に 1rem が 12px から 16px へ跳ね上がり、
   PC用の 4.5rem のままでは画面幅を超えるため、同じ幅で大きさも変える。

   大きさは2行目「知財・法務支援」（和字7字＋字間0.14em×7 ≒ 8em）が基準。
   ここで効く上限はコンテナの幅ではなく、東京タワーの左端。
   クライアント指示「なるべくタワーにかからないように」への対応で、
   実機スクリーンショット（画面幅390px）から次を実測した:

     文字の左端        画面左から 23px（.container の padding 1.5rem）
     タワーの左端      画面左から約232px（見出しが来る高さでの値。
                       タワーは上へ行くほど細いので、高さによって変わる）

   使える幅は 232 − 23 ＝ 約209px。8em で割ると 26px ＝ 1.68rem が上限。
   丸めて 1.6rem（＝約25px、幅199px）とし、9px ほど余裕を残している。
   画面幅が変わっても、文字幅もタワーの位置も画面幅に比例するため関係は保たれる
   （360px・430px でも収まることを確認済み）。

   ここを大きくするとタワーに文字がかかる。大きくしたい場合は、
   #top の background-position（現在 57%）でタワーを右へ寄せる必要があるが、
   写真の構図が変わるため独断では動かさないこと。

   縦位置はPCと同じ上端寄せ（.hero-layout の padding-top: 1rem）。
   高い位置ほどタワーが細く、文字が重なりにくい。 */
@media (max-width: 769px) {
	/* .hero-layout の padding-top と gap はPCだけ指示画像に合わせて変えたので、
	   スマホは従来の値に戻す（スマホの位置は別途この中で決めている）。
	   gap は 640px 以下でさらに 1.125rem に上書きされる。 */
	.hero-layout { padding-top: 1rem; gap: 1.875rem; }

	/* margin-top は見出しだけを下げるためのもの（英文タグラインは今の高さのまま）。
	   クライアント指示画像の赤い太線＝画面上から約267px（画面幅390pxで実測）。
	   .hero-layout は flex なので gap にこの margin が上乗せされる
	   （640px以下では gap 1.125rem ＋ margin ＝ 約5.2rem あく）。
	   タグラインごと動かしたい場合は、ここではなく .hero-layout の
	   padding-top を増やすこと。

	   行間はPCと共通の 1.4（.hero-title の基本指定）。以前はスマホだけ 1.75 に
	   していたが、1.4 に統一する指示を受けたため上書きを外した。 */
	.hero-title {
		font-size: 1.6rem;
		margin-top: 4.05rem;
	}

	/* 東京タワーを気持ち右へ寄せる（クライアント指示・スマホのみ。
	   PCは 57% のままで構図を変えない）。

	   background-position-x の % は「画像の その% の位置」を
	   「表示枠の その% の位置」に合わせる指定。値を下げると写真が右へ動く。
	   スマホでは写真が cover で高さ基準に拡大され、画面幅390pxに対して
	   実寸は約1727px。動く量は (1727 − 390) × 差分 なので、
	   1%あたり約13px。57% → 56% でタワーが約13px右へ寄る。

	   これで見出し2行目の右端とタワー左端の間隔が約7pxから約20pxに広がる。
	   足元の右脚（画像幅の 63.5% の位置。実機スクリーンショットから逆算）は
	   画面の右端まで約42px残るので切れない。さらに寄せるなら 54% あたりまでは
	   右脚が入る計算だが、その分だけ左脚が画面外へ出る点に注意。 */
	#top { background-position: 0 0, 56% var(--hero-sky); }

	/* 英文タグラインを「By Your Side.」「In Every Challenge.」の2段に分ける。
	   罫は2段の中央ではなく1行目の中央に合わせたいので、上寄せにしたうえで
	   1行分の半分（line-height 1.6 の半分＝0.8em）だけ下げる。
	   罫自体の太さ 0.125rem の半分を引いて、線の中心を文字の中心に合わせる。 */
	.hero-tagline { align-items: flex-start; line-height: 1.6; }
	.hero-tagline::before { margin-top: calc(0.8em - 0.0625rem); }
	.hero-tagline-br { display: inline; }
}

/* 取扱業務の横長カードは名称の分だけ幅が要る。2列のままだと1行あたり
   5文字程度になって読めないため、768px未満では1列に落とす
   （法人向け・個人向けとも同じ形なので、表示形式は揃ったままになる） */
@media (max-width: 767px) {
	.services-box-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	/* 取扱業務: カードが狭くなるので余白と「＋」を詰める */
	.service-box-card { padding: 0.875rem; gap: 0.625rem; }
	.service-box-icon { flex-basis: 1.375rem; font-size: 1.25rem; }
	.service-box-card h4 { font-size: 0.92rem; }
	.service-box-more { width: 1.125rem; height: 1.125rem; font-size: 0.6rem; }
	/* モーダルは画面幅いっぱいに近づけ、余白を詰める */
	.service-modal { width: calc(100% - 1.5rem); }
	.service-modal-inner { padding: 2.5rem 1.5rem 2rem; }
	.service-modal-title { font-size: 1.2rem; }
	/* 1行が長いため、狭い画面では縮小して行間を確保する */
	.access-station-list li { font-size: 0.86rem; line-height: 1.8; }
	.access-station-list li + li { margin-top: 0.625rem; }
	/* ハンバーガーとの併置で窮屈にならないよう縮小 */
	.brand-logo-svg { width: 10.625rem; }
	.brand-logo-svg--footer { width: 12.625rem; }

	/* 横並びのままでは 320px 幅で溢れるため縦積みにする。
	   マークアップの順どおり日本語ロゴが上、英字ロゴが下になる */
	#site-header .brand-wrap { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
	.brand-logo-ja { width: 12.5rem; }

	/* 代表2ショット写真: 支給写真は左右に大きな白余白があり、そのままでは
	   スマホで2人が小さく写る。正方形に切り抜いて（object-fit: cover）白余白を
	   落とし、被写体の見え方を約1.8倍にする。縦は全高が残るため足元は切れない。
	   55% は被写体（画像幅の36.9%〜67.5%）の中心を切り抜き窓の中心に合わせる値。
	   写真を差し替えたら、被写体の左右位置に合わせてこの値も見直すこと */
	.representatives-photo { aspect-ratio: 1 / 1; }
	.representatives-photo img { height: 100%; object-fit: cover; object-position: 55% center; }

	/* --- FV（スマホ） -----------------------------------------------------
	   見出しの大きさと改行は上の 769px の指定で決まる。ここで詰めるのは
	   タグラインの罫と余白、セクションの上下余白。
	   padding-top はヘッダー(5.625rem)の下に 1.25rem 残す値。 */
	#top { padding-top: 6.875rem; padding-bottom: 3.125rem; }

	/* タグラインと見出しの間隔。狭い画面では2行になる見出しのぶん
	   縦が詰まるため、PC(1.875rem)より寄せる */
	.hero-layout { gap: 1.125rem; }

	.hero-tagline {
		font-size: clamp(0.85rem, 3.6vw, 1.05rem);
		gap: 0.75rem;
		letter-spacing: 0.06em;
	}

	.hero-tagline::before { width: 1.375rem; }

	/* --- 幅を稼ぐ（スマホ） -----------------------------------------------
	   狭い画面では左右のpaddingがそのまま中身の幅を削るため詰める。
	   パネルは白背景なので、余白が無くなっても見た目の区切りは変わらない。
	   所在地パネルは上下の余白(992px指定の40px)を残して左右のみ0にする。 */
	.access-info-panel { padding: 2.5rem 0; }
	.contact-form-panel { padding: 0; }

	/* 経歴の年号カラム。最長の「2019年12月」で実寸約76pxのため、
	   90pxまで詰めても折り返さない。li は flex なので、詰めた30px分は
	   そのまま横の経歴テキストの幅になる */
	.cv-list li span { width: 5.625rem; }

	/* 私たちの強み: 見出しが窮屈にならないよう連番と間隔を少し詰める */
	.strength-photo { margin-bottom: 1.125rem; }

	.strength-number {
		font-size: 1.9rem;
	}

	.strength-head { gap: 0.625rem; }

	/* フッターリンクは狭い画面で折り返すため、行間だけ詰めて横の間隔は保つ */
	.footer-links-horizontal { gap: 0.3125rem 1.25rem; }
}

/* 画面の高さが極端に低いとき（スマホの横向きなど）。
   FVを1画面に収める方針のため、高さが足りない分は余白から削る。
   幅の指定と併用されるので、上の 640px 以下のルールより後に書いて上書きさせている。 */
@media (max-height: 520px) {
	#top { padding-top: 6.5625rem; padding-bottom: 2.5rem; }
	.hero-layout { gap: 0.875rem; }
}

.mobile-nav {
	display: none; position: fixed; top: 5rem; left: 0; width: 100%;
	background-color: var(--color-secondary); padding: 1.25rem 0; z-index: 998;
}
.mobile-nav.active { display: block; }
.mobile-nav-link {
	font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.8);
	padding: 0.625rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: block;
}