@charset "utf-8";
/* ==========================================================================
   監修者プロフィール コンポーネント
   SEOP-138 / アーモンドクリニック コラム記事用
   --------------------------------------------------------------------------
   ・クラス名はすべて sp- 接頭辞（既存スタイルと衝突しません）
   ・同一記事内に複数設置可
   ・スマートフォン（600px以下）対応
   ・アイコンは Tabler Icons（head内コードで読み込み）
   ========================================================================== */

.sp-wrap {
	/* ---- カラー設定（変更する場合はここだけ） ---- */
	--sp-bar: #1a1a1a;
	--sp-band: #f5f0ea;
	--sp-tag-bg: #f7f4f0;
	--sp-tag-border: #ddd6cd;
	--sp-border: #d6cfc6;
	--sp-text: #1a1a1a;
	--sp-sub: #555555;
	--sp-muted: #888888;
	--sp-brown: #6a5a4a;

	margin: 2.4em 0;
	border: 1px solid var(--sp-border);
	background: #fff;
	color: var(--sp-text);
	line-height: 1.75;
	overflow: hidden;
}

/* ==========================================================================
   「監修」バー（カード上部の帯）
   ========================================================================== */

.sp-wrap .sp-bar {
	padding: 5px 16px;
	background: var(--sp-bar);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   ヘッダー（クリックで開閉）
   ========================================================================== */

.sp-wrap .sp-header {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 18px 20px;
	cursor: pointer;
	transition: background-color 0.25s ease;
}

.sp-wrap .sp-header:hover {
	background-color: rgba(106, 90, 74, 0.04);
}

/* ---- 写真 ---- */

.sp-wrap .sp-photo {
	flex: 0 0 auto;
	width: 78px;
	height: 78px;
}

.sp-wrap .sp-photo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	background: var(--sp-band);
	border: 1px solid #e8e1d8;
}

/* ---- 氏名・肩書き ---- */

.sp-wrap .sp-info {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-wrap .sp-clinic {
	margin: 0 0 2px;
	font-size: 12.5px;
	color: var(--sp-muted);
	letter-spacing: 0.02em;
}

.sp-wrap .sp-name {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 10px;
}

/* 通常時：「院長」は単独行 */
.sp-wrap .sp-role {
	flex: 0 0 100%;
	font-size: 13px;
	color: var(--sp-text);
	letter-spacing: 0.04em;
}

.sp-wrap .sp-jp {
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sp-text);
}

.sp-wrap .sp-en {
	font-size: 11.5px;
	color: var(--sp-muted);
	letter-spacing: 0.1em;
}

/* ---- 専門タグ ---- */

.sp-wrap .sp-tags {
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sp-wrap .sp-tags span {
	padding: 3px 11px;
	background: var(--sp-tag-bg);
	border: 1px solid var(--sp-tag-border);
	color: var(--sp-brown);
	font-size: 11.5px;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* ==========================================================================
   開閉ボタン
   ========================================================================== */

.sp-wrap .sp-toggle {
	flex: 0 0 auto;
	color: var(--sp-muted);
	font-size: 12.5px;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.sp-wrap .sp-toggle-open,
.sp-wrap .sp-toggle-close {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sp-wrap .sp-toggle-close {
	display: none;
}

.sp-wrap .sp-toggle .ti {
	font-size: 15px;
	line-height: 1;
}

/* ==========================================================================
   展開時のヘッダー表示
   … 指示書の「クリック後（展開）」に合わせ、
     クリニック名・ローマ字・タグを隠して「役職　氏名」のみにする
   ========================================================================== */

.sp-wrap:has(.sp-detail.open) .sp-clinic,
.sp-wrap:has(.sp-detail.open) .sp-en,
.sp-wrap:has(.sp-detail.open) .sp-tags {
	display: none;
}

/* 展開時は「院長」を氏名と同じ行に */
.sp-wrap:has(.sp-detail.open) .sp-role {
	flex: 0 0 auto;
}

.sp-wrap:has(.sp-detail.open) .sp-toggle-open {
	display: none;
}

.sp-wrap:has(.sp-detail.open) .sp-toggle-close {
	display: inline-flex;
}

/* ==========================================================================
   詳細（開閉部分）
   ========================================================================== */

.sp-wrap .sp-detail {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.sp-wrap .sp-detail.open {
	max-height: 1600px;
}

.sp-wrap .sp-detail-inner {
	padding: 0 0 20px;
	border-top: 1px solid var(--sp-border);
}

/* ---- キャッチコピー（帯・左に縦棒） ---- */

.sp-wrap .sp-catch {
	margin: 0 0 20px;
	padding: 15px 20px;
	background: var(--sp-band);
	border-left: 4px solid var(--sp-brown);
	color: var(--sp-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
}

/* ---- 経歴・資格ブロック ---- */

.sp-wrap .sp-block {
	margin-bottom: 18px;
	padding: 0 20px;
}

.sp-wrap .sp-block:last-of-type {
	margin-bottom: 0;
}

/* 見出しは左の縦棒で表現 */
.sp-wrap .sp-block-title {
	margin: 0 0 6px;
	padding: 1px 0 1px 9px;
	border: none;
	border-left: 3px solid var(--sp-bar);
	background: none;
	color: var(--sp-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.sp-wrap .sp-list {
	margin: 0;
	padding: 0 0 0 12px;
	list-style: none;
}

.sp-wrap .sp-list li {
	margin: 0;
	padding: 2px 0;
	color: var(--sp-sub);
	font-size: 13.5px;
	list-style: none;
}

/* ---- 医師紹介ページへのリンク（枠付き・左下） ---- */

.sp-wrap .sp-more {
	margin: 20px 0 0;
	padding: 0 20px;
	text-align: left;
}

.sp-wrap .sp-more a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid var(--sp-border);
	color: var(--sp-brown);
	font-size: 13px;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.sp-wrap .sp-more a:hover {
	background-color: var(--sp-band);
}

.sp-wrap .sp-more .ti {
	font-size: 15px;
	line-height: 1;
}

/* ==========================================================================
   スマートフォン（600px以下）
   ========================================================================== */

@media screen and (max-width: 600px) {

	.sp-wrap {
		margin: 1.8em 0;
	}

	.sp-wrap .sp-bar {
		padding: 5px 14px;
		font-size: 11.5px;
	}

	.sp-wrap .sp-header {
		flex-wrap: wrap;
		gap: 14px;
		padding: 15px 14px 12px;
	}

	.sp-wrap .sp-photo {
		width: 62px;
		height: 62px;
	}

	.sp-wrap .sp-jp {
		font-size: 18px;
	}

	.sp-wrap .sp-clinic {
		font-size: 11.5px;
		line-height: 1.5;
	}

	/* 開閉ボタンを下段に移動して全幅化 */
	.sp-wrap .sp-toggle {
		width: 100%;
		padding: 9px 0 2px;
		border-top: 1px dashed var(--sp-border);
		text-align: center;
	}

	.sp-wrap .sp-catch {
		margin-bottom: 16px;
		padding: 13px 14px;
		font-size: 13.5px;
	}

	.sp-wrap .sp-block {
		padding: 0 14px;
	}

	.sp-wrap .sp-list li {
		font-size: 13px;
	}

	.sp-wrap .sp-more {
		padding: 0 14px;
	}
}