@charset "UTF-8";
/**
 * 所属弁護士 一覧（/staff/）と詳細（/staff/{slug}/）
 *
 * 数値は Figma「不当解雇_弁護士紹介」から get_design_context で取得した実値。
 * 1920幅アートボード基準で、コンテンツ幅は一覧 1120px・詳細 1094px。
 *
 *   色    #30b8ed（Picton Blue／名札・見出し帯）
 *         rgba(48,184,237,.8)（一覧カードの帯＝80%）
 *         #185fad（解決事例カードの濃紺）
 *         #e0e0e0（Alto／写真の下地）
 *   字間  1.2px（見出し帯のみ 1.68px）
 *
 * ★フォントは Figma が Zen Kaku Gothic New だが、これは html.to.design の
 *   取り込み由来。サイト本体は Noto Sans JP（header.php で読み込み）なので
 *   フォントは変えず、サイズ・太さ・行間・字間だけ合わせている。
 *
 * 2026-08-31 作成 / 2026-09-01 Figma の実値で全面改訂。
 */

/*------------------------------------------------------------------------------------
/* 一覧
/*----------------------------------------------------------------------------------*/

/* 全幅の見出し帯。Figma ではヒーロー画像の下端（y=624 = 110+514）に密着しているので、
   このページに限って .page-header の margin-bottom: 100px を打ち消す。 */
.staff-list .page-header {
	margin-bottom: 0;
}

.lawyers-headline {
	margin: 0 0 100px;
	padding: 13px 5% 7px;
	background: #30b8ed;
	text-align: center;
}
.lawyers-headline-title {
	margin: 0 auto;
	padding: 0;
	max-width: 1120px;
	border: none;
	background: none;
	color: #fff;
	font-size: 42px;
	font-weight: 700;
	line-height: 67.2px;
	letter-spacing: 1.68px;
}

.lawyers-grid {
	box-sizing: border-box;
	max-width: 1160px;
	margin: 0 auto 110px;
	padding: 0 20px;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 15px;
	row-gap: 88px;
}
.lawyers-grid-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lawyers-card {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background: #e0e0e0;
}
.lawyers-card:hover,
.lawyers-card:focus {
	text-decoration: none;
}
.lawyers-card-photo {
	aspect-ratio: 363.33 / 515.35;
	overflow: hidden;
}
.lawyers-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 0.4s ease;
}
.lawyers-card:hover .lawyers-card-photo img,
.lawyers-card:focus-visible .lawyers-card-photo img {
	transform: scale(1.04);
}

/* 写真の下端に重なる帯（役職／白線／氏名）。高さ124px = 17 + 95 + 12 */
.lawyers-card-overlay {
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 17px 20px 12px;
	background: rgba(48, 184, 237, 0.8);
	color: #fff;
	text-align: center;
}
.lawyers-card-role {
	display: block;
	font-size: 19px;
	font-weight: 400;
	line-height: 30.4px;
	letter-spacing: 1.2px;
}
/* 役職と氏名を分ける白い細線。Figma の Frame 1（214x20）に相当。
   Figma では役職の下端(31px)と氏名の上端(45px)の間に14px空き、線はその中央にある。
   上下に7pxずつ入れて帯の高さを Figma の 124px に合わせる。 */
.lawyers-card-role::after {
	content: "";
	display: block;
	width: 214px;
	max-width: 100%;
	height: 1px;
	margin: 7px auto;
	background: #fff;
}
.lawyers-card-name {
	display: block;
	font-size: 31px;
	font-weight: 700;
	line-height: 49.6px;
	letter-spacing: 1.2px;
}

/*------------------------------------------------------------------------------------
/* 詳細
/*----------------------------------------------------------------------------------*/

/* .content.renewal の padding-top は110pxだが固定ヘッダーは146pxあるため、
   このままだとパンくずがヘッダーに潜り込む。他ページ（/price/）はヒーロー画像の中に
   パンくずがあり上端196pxなので、そこへ揃える（110 + 86 = 196）。 */
.lawyer-detail .page-body {
	padding-top: 86px;
}

/* パンくずは他ページと同じ体裁にする。
   基準は /price/ の実測値＝文字16px・色 #161410・幅1116px の .inner に中央配置。
   親テーマは .rcrumbs > ol > li を display:none にして rcrumbs.js が .show を付ける作りだが、
   この位置では発火しないので display だけ CSS で戻す（色とサイズは親テーマのまま使う）。 */
.lawyer-detail-breadcrumb {
	margin-bottom: 24px;
}
.lawyer-detail #breadcrumb {
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	white-space: normal;
	line-height: 1.6;
}
.lawyer-detail #breadcrumb > ol > li {
	display: inline-block;
	overflow: visible;
}
/* テーマ設定が出すインラインCSSに a:hover{color:#ffffff} があり、白背景のこのページでは
   ホバーすると文字が消える。インラインCSSはDB由来でデプロイに乗らないため、ここで戻す。
   色はサイト内の既存指定（.column #breadcrumb a:hover）と同じ #30b8ed に合わせた。 */
.lawyer-detail #breadcrumb a:hover,
.lawyer-detail #breadcrumb a:hover span,
.lawyer-detail #breadcrumb a:focus,
.lawyer-detail #breadcrumb a:focus span {
	color: #30b8ed;
}

.lawyer-detail-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1134px;
	margin: 0 auto;
	padding: 0 20px;
}
/* Figma: gap 59px・上下中央揃え（左カラムが右カラムの中央に来る） */
.lawyer-detail-layout {
	display: flex;
	align-items: center;
	gap: 59px;
	margin: 40px 0 80px;
}

/* 左：写真と名札 */
.lawyer-detail-profile-card {
	flex: 0 0 363px;
	max-width: 363px;
}
.lawyer-detail-photo {
	aspect-ratio: 363.33 / 515.35;
	overflow: hidden;
	background: #e0e0e0;
}
.lawyer-detail-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
/* 高さ191px = 17 + 役職30.4 + 線 + 氏名49.6 + ローマ字30.4 + 弁護士会30.4 + 余白 */
.lawyer-detail-nameplate {
	box-sizing: border-box;
	min-height: 191px;
	/* 17 + 役職30.4 + 線まわり15 + 氏名49.6 + ローマ字30.4 + 弁護士会30.4 + 18 = 191px */
	padding: 17px 20px 18px;
	background: #30b8ed;
	color: #fff;
	text-align: center;
}
.lawyer-detail-role {
	margin: 0;
	font-size: 19px;
	font-weight: 400;
	line-height: 30.4px;
	letter-spacing: 1.2px;
}
/* 一覧カードと同じく、線の上下に7pxずつ空ける（Figma の名札内の配置に合わせる） */
.lawyer-detail-role::after {
	content: "";
	display: block;
	width: 214px;
	max-width: 100%;
	height: 1px;
	margin: 7px auto;
	background: #fff;
}
.lawyer-detail-name {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #fff;
	font-size: 31px;
	font-weight: 700;
	line-height: 49.6px;
	letter-spacing: 1.2px;
}
.lawyer-detail-roman {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 30.4px;
	letter-spacing: 1.2px;
}
.lawyer-detail-bar {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 30.4px;
	letter-spacing: 1.2px;
}

/* 右：プロフィールと解決事例 */
.lawyer-detail-main {
	flex: 1 1 auto;
	min-width: 0;
}
/* Figma ではテキストブロック（12:35）だけが右カラムの左端から 7.33px 右にある。
   解決事例カード（12:184）は 0 なので、ずらすのはプロフィールとメッセージだけ。
   ※半端な値なので html.to.design の取り込み誤差の可能性もある。不要なら 0 に戻す。 */
.lawyer-detail-profile,
.lawyer-detail-message {
	padding-left: 7.33px;
}
.lawyer-detail-profile {
	margin: 0;
}
/* Figma: 見出しは太字のみ。罫線やアクセントは付かない */
.lawyer-detail-profile-title {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #000;
	font-size: 19px;
	font-weight: 700;
	line-height: 30.4px;
	letter-spacing: 1.2px;
}
/* ★ !important が必要な理由
   テーマ設定が出すインラインCSSに
     .entry-content dd, .article-body dd, dd { margin: 0 0 10px 20px !important; margin-inline-start: 20px !important; }
   があり、クラス指定では勝てない。Figma は見出しと本文の左端が揃っている（インデント無し）ので、
   ここで打ち消す。インラインCSSはDB由来でデプロイに乗らないため、テーマ側で上書きする。

   上下の余白は Figma の作りに合わせた値：
     10.8px = 本文1行目の line-height 45px − 通常の 34.2px（見出しとの間に入る余白）
     30.4px = ブロックの区切りに置かれた空行1行ぶん */
.lawyer-detail-profile-text {
	margin: 10.8px 0 30.4px !important;
	margin-inline-start: 0 !important;
	padding: 0;
	color: #000;
	font-size: 19px;
	font-weight: 400;
	line-height: 34.2px;
	letter-spacing: 1.2px;
}
.lawyer-detail-message {
	margin: 0;
}
.lawyer-detail-message-title {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #000;
	font-size: 19px;
	font-weight: 700;
	line-height: 30.4px;
	letter-spacing: 1.2px;
}
.lawyer-detail-message-text {
	margin: 0;
	color: #000;
	font-size: 19px;
	font-weight: 400;
	line-height: 34.2px;
	letter-spacing: 1.2px;
}
/* 見出しの直後だけ、経歴・著書と同じ余白を入れる */
.lawyer-detail-message-title + .lawyer-detail-message-text {
	margin-top: 10.8px;
}

/*------------------------------------------------------------------------------------
/* 解決事例カード
/*
/* 閉じ  315x237・濃紺 #185fad・中身は中央寄せ・「詳細」ボタンあり
/* 展開  右カラムの全幅へ広がり、罫線が265→617px に伸び、小見出しと本文が入る。
/*       「詳細」ボタンは消え、他のカードは畳まれる。
/*
/* ■ アニメーションについて
/* Figma にキーフレームの指定は無かった（get_motion_context が空）ので、動きはこちらで付けた。
/* 幅は flex + width の transition、高さは grid-template-rows の 0fr→1fr で滑らかに変える。
/* 左の写真カラムは align-items:center で右カラムの高さに追従するため、右の高さが
/* 連続的に変われば写真の移動も自動的に滑らかになる（JS で位置を動かしてはいない）。
/*----------------------------------------------------------------------------------*/

.lawyer-cases {
	margin-top: 16px;
}
.lawyer-case-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	/* 見出し（lead）の行数が違っても隣り合うカードの高さを揃える */
	align-items: stretch;
	gap: 21px;
}

.lawyer-case {
	box-sizing: border-box;
	width: 315px;
	margin: 0;
	padding: 0 16px 22px 20px;
	min-height: 237px;
	list-style: none;
	position: relative;
	background: #185fad;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		/* 閉じるときは幅が戻りきってから現れる。開くときは先に消えるよう
		   .is-expanded 側で遅延を打ち消している。 */
		opacity 0.15s ease 0.4s;
}
/* 原稿待ちで開けないカードはクリック可能に見せない */
.lawyer-case--static {
	cursor: default;
}
/* 展開幅はカード2枚ぶん（315 + 21 + 315 = 651px）。Figma の 653px に相当する。
   右カラムの全幅（672px）ではないので 100% にはしない。 */
.lawyer-case.is-open {
	width: 651px;
	max-width: 100%;
	align-items: flex-start;
	padding-bottom: 28px;
}
/* 展開中、開いていないカードは幅0へ畳む（display:none だと瞬間的に消える）。
   幅を0にすると中の文字が縦1列に積み直されて高さが1300px超まで膨らみ、
   閉じるときにその状態から戻る様子（11行→1行）が見えてしまう。
   そこで中身の幅は閉じたカードの内容幅（279px）のまま固定し、カード側で切り取る。
   こうすると折り返しが一度も変わらないので、幅だけが滑らかに戻る。 */
.lawyer-case-list.is-expanded .lawyer-case:not(.is-open) {
	width: 0;
	min-width: 0;
	padding-left: 0;
	padding-right: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.12s ease;
}
/* .is-restoring は閉じアニメーションの間だけ JS が付ける。
   .is-expanded が外れると幅固定も同時に解除されてしまい、
   幅0のカードの中で折り返しが戻る様子（11行→1行）が見えてしまうため。 */
.lawyer-case-list.is-expanded .lawyer-case:not(.is-open) > *:not(.lawyer-case-rule),
.lawyer-case.is-restoring > *:not(.lawyer-case-rule) {
	width: 279px;
	max-width: none;
	flex-shrink: 0;
}
.lawyer-case.is-restoring {
	overflow: hidden;
}

/* Figma のタイトル枠は 270x97px だが、
   ・幅：シートの事例名（例「夜勤の配車業務／うつ病」＝全角スラッシュ）が1文字だけ折り返すため
     カードの内容幅（279px）いっぱいまで広げた
   ・高さ：Figma と同じ 97px を下限にする。事例名が2行になるカードと並ぶと罫線から下がずれるが、
     一律に高くすると事例名が1行のカードが間延びするため、実際の高さ揃えは lawyers.js が
     「同じ行に並ぶカードのうち高いほう」に合わせて行う（JSが動かない場合はこの97pxのまま）。 */
.lawyer-case-title {
	box-sizing: border-box;
	width: 100%;
	/* 閉じている間は閉じたカードの内容幅（279px）で頭打ちにして折り返しを固定する。
	   開いたら制約を外して1行に収める（下の .is-open）。
	   切り替えは 0.12s 後＝タイトルが見えなくなってから行うので、
	   幅が変わる間に折り返しが動いて見えることはない。 */
	max-width: 279px;
	transition: max-width 0s 0.12s;
	min-height: 97px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	display: flex;
	flex-direction: column;
	/* 中央寄せだと事例名の行数によって「解決事例 N」の位置が動き、隣のカードとずれる。
	   上揃え＋Figma と同じ余白（97 − 34.2×2 = 28.6 の半分＝14.3px）にして位置を固定する。
	   下側も同じ 14.3px を明示する。枠の余りに任せると、事例名が2行のとき余りが無くなって
	   罫線が文字に接してしまうため。 */
	justify-content: flex-start;
	padding-top: 14.3px;
	padding-bottom: 14.3px;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	line-height: 34.2px;
	letter-spacing: 1.2px;
	text-align: left;
}
.lawyer-case-no,
.lawyer-case-name {
	display: block;
}
/* 開いたらカードの幅いっぱいを使って1行に収める */
.lawyer-case.is-open > .lawyer-case-title {
	max-width: 9999px;
}
/* タイトルは常に見えているので、折り返しが変わる瞬間だけ一度消す。
   .is-animating は開閉の間だけ JS が付ける。 */
.lawyer-case.is-animating > .lawyer-case-title {
	animation: lawyer-case-title-swap 0.55s ease;
}
@keyframes lawyer-case-title-swap {
	0%,
	100% {
		opacity: 1;
	}
	22%,
	72% {
		opacity: 0;
	}
}

.lawyer-case-rule {
	width: 265px;
	max-width: 100%;
	height: 0;
	margin: 0;
	border: none;
	border-top: 1px solid #fff;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lawyer-case.is-open .lawyer-case-rule {
	width: 617px;
}

/* 高さのアニメーション。0fr → 1fr で中身の高さぶんだけ滑らかに開く */
.lawyer-case-collapse {
	display: grid;
	width: 100%;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.lawyer-case-collapse-inner {
	overflow: hidden;
	min-height: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	/* 閉じ切ってから隠す（開くときは即座に見せる） */
	transition: opacity 0.15s ease, visibility 0s 0.4s;
}
.lawyer-case-closed-part {
	grid-template-rows: 1fr;
}
.lawyer-case-closed-part .lawyer-case-collapse-inner {
	align-items: center;
	opacity: 1;
	visibility: visible;
	/* 閉じるときは幅が 315px に戻ってから現れる */
	transition: opacity 0.15s ease 0.4s, visibility 0s 0s;
}
.lawyer-case.is-open .lawyer-case-closed-part {
	grid-template-rows: 0fr;
}
.lawyer-case.is-open .lawyer-case-closed-part .lawyer-case-collapse-inner {
	opacity: 0;
	visibility: hidden;
	/* 開くときは先に消す。幅が変わる間の折り返しの変化を見せないため */
	transition: opacity 0.12s ease, visibility 0s 0.4s;
}
.lawyer-case.is-open .lawyer-case-open-part {
	grid-template-rows: 1fr;
}
.lawyer-case.is-open .lawyer-case-open-part .lawyer-case-collapse-inner {
	align-items: flex-start;
	opacity: 1;
	visibility: visible;
	/* 開くときは幅が広がりきってから現れる */
	transition: opacity 0.15s ease 0.4s, visibility 0s 0s;
}

/* Figma の要約枠は 251px（「訴訟（控訴審で和解）」等の短い文言用）だったが、
   ここに載せるのはシートの見出し列で文が長いため、カードの内容幅を使う。 */
.lawyer-case-summary {
	box-sizing: border-box;
	width: 100%;
	min-height: 69px;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	font-size: 19px;
	font-weight: 400;
	line-height: 30.4px;
	letter-spacing: 1.2px;
	text-align: left;
}

/* カードの下端へ寄せる。カード同士は align-items:stretch で高さが揃うので、
   見出し（lead）の行数が違ってもボタンの位置が一致する。
   padding-top は見出しとの間隔。0 だと見出しに接してしまうため、
   本文の行送り1行ぶん（34.2px）を空ける。 */
.lawyer-case-action {
	width: 100%;
	margin: 0;
	padding: 34.2px 0 0;
	margin-top: auto;
	display: flex;
	justify-content: center;
}
/* 展開したら「詳細」は消す。collapse の外に出したので明示的に隠す必要がある */
.lawyer-case.is-open .lawyer-case-action {
	display: none;
}
/* 展開したカードの右上に出す閉じるボタン。
   閉じ方はカード全体のクリックと Esc も従来どおり有効。 */
.lawyer-case-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
	color: #fff;
	font-family: inherit;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0s 0.15s;
}
.lawyer-case.is-open .lawyer-case-close {
	opacity: 1;
	visibility: visible;
	/* 幅が広がりきってから現れる */
	transition: opacity 0.15s ease 0.4s, visibility 0s 0.4s;
}
.lawyer-case-close:hover,
.lawyer-case-close:focus {
	opacity: 0.7;
}
/* 見出しが×に潜り込まないよう、開いたときだけ右を空ける */
.lawyer-case.is-open > .lawyer-case-title {
	padding-right: 48px;
}
.lawyer-case-button {
	display: block;
	width: 267px;
	max-width: 100%;
	height: 37px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: #fff;
	color: #185fad;
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	line-height: 30.4px;
	letter-spacing: 1.2px;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.lawyer-case-button:hover,
.lawyer-case-button:focus {
	opacity: 0.85;
}

.lawyer-case-subtitle {
	box-sizing: border-box;
	min-height: 69px;
	width: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	line-height: 30.4px;
	letter-spacing: 1.2px;
	text-align: left;
}
.lawyer-case-body {
	width: 100%;
	padding-top: 20px;
}
.lawyer-case-body p {
	margin: 0 0 30.4px;
	color: #fff;
	font-size: 19px;
	font-weight: 400;
	line-height: 30.4px;
	letter-spacing: 1.2px;
	text-align: left;
}
.lawyer-case-body p:last-child {
	margin-bottom: 0;
}

/* 動きを減らす設定にしている利用者にはアニメーションを出さない */
@media (prefers-reduced-motion: reduce) {
	.lawyer-case,
	.lawyer-case-rule,
	.lawyer-case-collapse {
		transition: none;
	}
	.lawyer-case.is-animating > .lawyer-case-title {
		animation: none;
	}
}

/*------------------------------------------------------------------------------------
/* レスポンシブ
/*----------------------------------------------------------------------------------*/

@media screen and (max-width: 1140px) {
	.lawyer-detail-layout {
		gap: 40px;
	}
	.lawyer-case {
		width: calc(50% - 11px);
	}
	.lawyer-case.is-open {
		width: 100%;
	}
	.lawyer-case.is-open .lawyer-case-rule {
		width: 100%;
	}
}

@media screen and (max-width: 1000px) {
	.lawyers-headline-title {
		font-size: 32px;
		line-height: 1.5;
	}
	.lawyer-detail-profile-card {
		flex-basis: 300px;
		max-width: 300px;
	}
	.lawyer-detail-name {
		font-size: 26px;
		line-height: 1.4;
	}
	.lawyer-detail-profile-text,
	.lawyer-detail-message-text {
		font-size: 17px;
		line-height: 1.9;
	}
	.lawyer-detail-profile-title,
	.lawyer-detail-message-title {
		font-size: 17px;
	}
}

@media screen and (max-width: 800px) {
	.lawyers-headline {
		margin-bottom: 50px;
		padding: 12px 5%;
	}
	.lawyers-headline-title {
		font-size: 22px;
		line-height: 1.5;
	}
	.lawyers-grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 15px;
		row-gap: 40px;
		margin-bottom: 60px;
	}
	.lawyers-card-overlay {
		padding: 10px 12px 12px;
	}
	.lawyers-card-role {
		font-size: 14px;
		line-height: 1.8;
	}
	.lawyers-card-role::after,
	.lawyer-detail-role::after {
		margin: 4px auto;
	}
	.lawyers-card-name {
		font-size: 20px;
		line-height: 1.5;
	}

	.lawyer-detail-layout {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		margin: 24px 0 60px;
	}
	.lawyer-detail-profile-card {
		flex-basis: auto;
		width: 100%;
		max-width: 363px;
		margin: 0 auto;
	}
	.lawyer-detail-nameplate {
		min-height: 0;
		padding: 14px 20px 18px;
	}
	.lawyer-detail-role {
		font-size: 15px;
		line-height: 1.8;
	}
	.lawyer-detail-name {
		font-size: 24px;
		line-height: 1.5;
	}
	.lawyer-detail-roman,
	.lawyer-detail-bar {
		line-height: 1.9;
	}
	.lawyer-detail-profile-text,
	.lawyer-detail-message-text {
		font-size: 16px;
		line-height: 1.9;
		margin-bottom: 24px;
	}
	.lawyer-detail-profile-title,
	.lawyer-detail-message-title {
		font-size: 16px;
	}

	/* スマホは常に1列。開くカードも同じ幅なので幅のアニメーションは起きず、
	   高さのアニメーションだけが働く */
	.lawyer-case,
	.lawyer-case.is-open {
		width: 100%;
		min-height: 0;
		padding: 0 16px 18px;
		align-items: stretch;
	}
	.lawyer-case.is-animating > .lawyer-case-title {
		animation: none;
	}
	.lawyer-case-title {
		width: 100%;
		max-width: none;
		min-height: 0;
		padding: 16px 0 12px;
		font-size: 18px;
		line-height: 1.6;
	}
	.lawyer-case-rule,
	.lawyer-case.is-open .lawyer-case-rule {
		width: 100%;
	}
	.lawyer-case-closed-part .lawyer-case-collapse-inner,
	.lawyer-case.is-open .lawyer-case-open-part .lawyer-case-collapse-inner {
		align-items: stretch;
	}
	.lawyer-case-summary {
		width: 100%;
		min-height: 0;
		padding: 12px 0;
		font-size: 15px;
		line-height: 1.8;
	}
	.lawyer-case-subtitle {
		min-height: 0;
		padding: 12px 0;
		font-size: 16px;
		line-height: 1.8;
	}
	.lawyer-case-body p {
		font-size: 15px;
		line-height: 1.9;
		margin-bottom: 1.4em;
	}
	.lawyer-case-button {
		width: 100%;
		height: auto;
		padding: 0.3em;
		font-size: 18px;
		line-height: 1.6;
	}
	/* スマホは1列で隣と揃える必要がないので、ボタン上の余白は詰める */
	.lawyer-case-action {
		padding-top: 18px;
	}
}

@media screen and (max-width: 480px) {
	.lawyers-grid {
		grid-template-columns: 1fr;
		row-gap: 30px;
		max-width: 400px;
	}
}