@charset "UTF-8";

html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

/* bace ---------------------------------------*/

.lower-mv {
	padding-top: 100px;
	background-image: url(../img/psychiatry/bg-lower.jpg);
	background-size: cover;
	background-position: center;
}

.lower-mv-title {
	max-width: 1300px;
	margin: 0 auto;
	padding: 48px 20px;
}

.lower-mv-title span {
	font-size: 24px;
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
	color: #fff;
}

.lower-mv-title h1 {
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 0.04em;
	color: #fff;
	margin-top: 8px;
}

.lower-wrapper {
	background: #fff;
	padding-bottom: 120px;
}

.pankuzu-psychiatry-container,
.feature-container,
.staff-container {
	max-width: 1300px;
	width: 100%;
	padding: 0 20px;
	margin-right: auto;
	margin-left: auto;
}
.feature-container,
.staff-container {
	padding: 80px 20px;
}

.pankuzu-psychiatry-list {
	padding: 40px 0;
}

.pankuzu-psychiatry-list > li {
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
}

.pankuzu-psychiatry-list > li a {
	position: relative;
	padding-right: 24px;
	font-weight: normal;
	line-height: 2;
	transition: 0.3s;
}

.pankuzu-psychiatry-list > li a:hover {
	opacity: 0.7;
}

.pankuzu-psychiatry-list > li a:after {
	display: block;
	content: '/';
	position: absolute;
	right: 6px;
	top: -4px;
}

.feature-block,
.staff-block {
	padding-bottom: 56px;
}

.feature-block:last-child,
.staff-block:last-child {
	padding-bottom: 0;
}

/* h2タイトル全体のスタイル */
.feature-title,
.staff-title {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: bold;
	color: #d96e34;
	letter-spacing: 0.04em;
	margin-bottom: 56px;
}

/* ドットコンテナ（左右共通） */
/* ★ HTMLをspanに変更しましたが、CSSでflexを指定するので動作は同じです */
.dots-container {
	display: flex;
	align-items: center;
	gap: 8px; /* ドット同士の間隔 */
}

/* ドットの基本スタイル（共通） */
.dot {
	display: block;
	border-radius: 50%; /* 円形にする */
}

/* --- 左側のドット（個別に指定） --- */
.dots-left .dot-1 {
	width: 10px;
	height: 10px;
	background-color: #d96e34;
}
.dots-left .dot-2 {
	width: 10px;
	height: 10px;
	background-color: #ecb699;
}
.dots-left .dot-3 {
	width: 10px;
	height: 10px;
	background-color: #d96e34;
}

/* --- 右側のドット（個別に指定） --- */
.dots-right .dot-1 {
	width: 10px;
	height: 10px;
	background-color: #d96e34;
}
.dots-right .dot-2 {
	width: 10px;
	height: 10px;
	background-color: #ecb699;
}
.dots-right .dot-3 {
	width: 10px;
	height: 10px;
	background-color: #d96e34;
}

.anchorlink-wapper {
	max-width: 1300px;
	margin: 0 auto;
	padding: 40px 20px;
	display: flex;
	gap: 20px;
}

/* ボタンコンテナの配置 */
.psychiatry-anchorlink {
	max-width: calc((100% - 20px) / 4);
	width: 100%;
	display: flex;
}

/* ボタン本体 (aタグ) のスタイル */
.psychiatry-anchorlink a {
	/* --- 形状と配置 --- */
	/* height: 64px; */
	width: 100%;
	display: inline-flex;
	align-items: center;
	border-radius: 8px;
	padding: 16px 20px;
	text-decoration: none;
	justify-content: space-between;

	/* --- テキストスタイル --- */
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;

	/* --- 色 (通常時) --- */
	background-color: #ffffff; /* 白背景 */
	color: #d96e34; /* オレンジテキスト */
	border: 1px solid #d96e34; /* オレンジ枠線 (ホバー時のガタつき防止) */

	/* --- アニメーション --- */
	transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* ★ ボタン ホバー時 */
.psychiatry-anchorlink a:hover {
	background-color: #d96e34; /* オレンジ背景 */
	color: #ffffff; /* 白テキスト */
	border: 1px solid #d96e34; /* オレンジ枠線 (ホバー時のガタつき防止) */
}

/* アイコンコンテナ (.arrow-icons) のスタイル */
.psychiatry-anchorlink .arrow-icons {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	margin-left: 20px;
	flex-shrink: 0;
	transform: rotate(90deg);

	/* 内部の<img>を重ねて配置するための基準 */
	position: relative;

	/* --- 色 (通常時) --- */
	background-color: #ffffff; /* 白背景 */
	transition: background-color 0.3s;
}

/* ★ アイコンコンテナ ホバー時 */
.psychiatry-anchorlink a:hover .arrow-icons {
	background-color: #d96e34; /* オレンジ背景 */
}

/* <img>タグ共通スタイル */
.psychiatry-anchorlink .arrow-icons img {
	/* 2枚の画像を中央に重ねる */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	/* 画像のサイズ */
	width: 100%;
	height: 100%;
	object-fit: contain;

	/* 表示/非表示の切り替えをアニメーション */
	transition: opacity 0.3s;
}

/* 通常時の画像の表示/非表示 */
.psychiatry-anchorlink .arrow-color {
	opacity: 1; /* オレンジ矢印を非表示 */
}
.psychiatry-anchorlink .arrow-none {
	opacity: 0; /* 白矢印を表示 */
}

/* ★ ホバー時の画像の表示/非表示 */
.psychiatry-anchorlink a:hover .arrow-color {
	opacity: 0; /* オレンジ矢印を表示 */
}
.psychiatry-anchorlink a:hover .arrow-none {
	opacity: 1; /* 白矢印を非表示 */
}

/* 元のCSSにあった ::before (下線) は不要なため非表示 */
.psychiatry-anchorlink a::before {
	display: none;
}
.psychiatry-anchorlink a:hover::before {
	display: none;
}

/* ★ ボタン ホバー時 */
.psychiatry-link-btn a:hover {
	background-color: #ffffff; /* 白背景 */
	color: #d96e34; /* オレンジテキスト */
	border-color: #d96e34; /* オレンジ枠線 */
}

/* アイコンコンテナ (.arrow-icons) のスタイル */
.psychiatry-link-btn .arrow-icons {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	margin-left: 20px;
	flex-shrink: 0;

	/* 内部の<img>を重ねて配置するための基準 */
	position: relative;

	/* --- 色 (通常時) --- */
	background-color: #ffffff; /* 白背景 */
	transition: background-color 0.3s;
}

/* ★ アイコンコンテナ ホバー時 */
.psychiatry-link-btn a:hover .arrow-icons {
	background-color: #d96e34; /* オレンジ背景 */
}

/* <img>タグ共通スタイル */
.psychiatry-link-btn .arrow-icons img {
	/* 2枚の画像を中央に重ねる */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	/* 画像のサイズ */
	width: 100%;
	height: 100%;
	object-fit: contain;

	/* 表示/非表示の切り替えをアニメーション */
	transition: opacity 0.3s;
}

/* 通常時の画像の表示/非表示 */
.psychiatry-link-btn .arrow-none {
	opacity: 1; /* 白矢印を表示 */
}
.psychiatry-link-btn .arrow-color {
	opacity: 0; /* オレンジ矢印を非表示 */
}

/* ★ ホバー時の画像の表示/非表示 */
.psychiatry-link-btn a:hover .arrow-none {
	opacity: 0; /* 白矢印を非表示 */
}
.psychiatry-link-btn a:hover .arrow-color {
	opacity: 1; /* オレンジ矢印を表示 */
}

/* 元のCSSにあった ::before (下線) は不要なため非表示 */
.psychiatry-link-btn a::before {
	display: none;
}
.psychiatry-link-btn a:hover::before {
	display: none;
}

/* feature -------------------------------------------- */

.feature-subtitle {
	font-size: 28px;
	font-weight: bold;
	color: #d96e34;
	align-items: center;
	display: flex;
	margin-bottom: 32px;
}

.feature-subtitle::before {
	width: 100%;
	height: 1px;
	background: #d96e34;
	content: '';
}

.feature-subtitle::after {
	width: 100%;
	height: 1px;
	background: #d96e34;
	content: '';
}

.feature-subtitle span {
	padding: 0 20px;
	white-space: nowrap;
}

.feature-subtitle-sub {
	font-size: 24px;
	line-height: 2;
	letter-spacing: 0.04em;
	font-weight: bold;
	color: #4b4737;
	text-align: center;
	margin-bottom: 20px;
}

.feature-text,
.staff-text {
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.04em;
}

.feature-list-block {
	background-color: #f9f7f3;
	padding: 24px 32px;
	border-radius: 8px;
}

.feature-list-block p {
	color: #d96e34;
	font-size: 18px;
	margin-top: 0;
	margin-bottom: 10px;
	font-weight: bold;
	letter-spacing: 0.04em;
}

.feature-list-block ul {
	list-style-type: none; /* デフォルトマーカーを非表示 */
	padding-left: 0;
	margin: 0;
}

.feature-list-block li {
	display: flex;
	align-items: center; /* アイコンとテキストを垂直方向中央揃え */
	color: #4b4737;
	margin-bottom: 4px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
}

.feature-list-block li:last-child {
	margin-bottom: 0;
}

/* ::before 擬似要素でアイコンを生成 */
.feature-list-block li::before {
	content: ''; /* 必須。中身は空にする */
	display: inline-block;
	width: 8px; /* アイコンの幅 (文字サイズ基準) */
	height: 8px; /* アイコンの高さ (文字サイズ基準) */
	border-radius: 2px;
	background-color: #d96e34; /* アイコンのオレンジ色 */
	margin-right: 10px; /* アイコンとテキストの間隔 */
	flex-shrink: 0;
}

/* staff -----------------------------------------------------------*/

/* h3要素全体 */
.staff-subtitle {
	display: flex;
	align-items: baseline; /* タグとテキストのベースラインを揃えます */
	font-size: 24px; /* 基準となるフォントサイズ */
	color: #4b4737; /* 全体のテキスト色 */
	font-weight: bold; /* 全体のデフォルトの太さ */
	margin: 0;

	/* (デモ用) 画像の背景色と余白 */
	background-color: #f9f7f3;
	padding: 20px;
	border-radius: 8px;
	align-items: center;
}

/* 「院長」タグのスタイル */
.staff-subtitle .staff-tag {
	display: inline-block;
	background-color: #d96e34;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 4px;
	margin-right: 16px;
	line-height: normal;
}

.staff-subtitle .staff-name {
	line-height: normal;
}

/* 親コンテナ (参照CSS: .feature-list-block) */
.staff-list-block {
	background-color: #fff; /* 画像に合わせて暗い背景に変更 */
	padding: 24px 32px; /* 参照CSSから微調整 */
	border-radius: 8px; /* 参照CSSから流用 */
	border: 1px solid #d96e34;
}

/* 見出し (h2) (参照CSS: .feature-list-block p) */
.staff-list-block .staff-list-title {
	display: flex; /* アイコンとテキストを横並びにするため */
	align-items: center; /* アイコンとテキストを中央揃え */
	color: #d96e34; /* 画像に合わせて白文字に変更 */
	font-size: 18px; /* (約18px) */
	margin-top: 0;
	margin-bottom: 10px; /* 見出しと本文の間隔 */
	font-weight: bold;
}

/* 見出しの前の■アイコン (参照CSS: li::before) */
.staff-list-block .staff-list-title::before {
	content: '';
	display: inline-block;
	width: 14px; /* サイズを見出しの文字サイズに合わせる */
	height: 14px;
	background-color: #d96e34; /* 参照CSSのオレンジ色 (d96e34) に近い色 */
	margin-right: 10px; /* アイコンとテキストの間隔 */
	flex-shrink: 0;
	border-radius: 2px;
}

/* 経歴テキスト (p) (参照CSS: li) */
.staff-list-block p {
	color: #4b4737; /* 画像に合わせて白文字に変更 */
	font-size: 16px; /* (16px) */
	line-height: 2; /* 参照CSSから流用 */
	margin: 0; /* pタグのデフォルトマージンをリセット */
	letter-spacing: 0.04em;
	margin-bottom: 4px;
}

.staff-list-block p:last-child {
	margin-bottom: 0;
}

.staff-list-block ul {
	list-style-type: none; /* デフォルトマーカーを非表示 */
	padding-left: 0;
	margin: 0;
}

.staff-list-block li {
	display: flex;
	align-items: center; /* アイコンとテキストを垂直方向中央揃え */
	color: #4b4737;
	margin-bottom: 4px;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.04em;
}

.staff-list-block li:last-child {
	margin-bottom: 0;
}

/* ::before 擬似要素でアイコンを生成 */
.staff-list-block li::before {
	content: ''; /* 必須。中身は空にする */
	display: inline-block;
	width: 4px; /* アイコンの幅 (文字サイズ基準) */
	height: 4px; /* アイコンの高さ (文字サイズ基準) */
	border-radius: 2px;
	background-color: #4b4737; /* アイコンのオレンジ色 */
	margin-right: 10px; /* アイコンとテキストの間隔 */
	flex-shrink: 0;
}

/* small pc */
@media screen and (min-width: 768px) and (max-width: 1100px) {
	.gnav-list > li {
		font-size: 14px;
	}
	.pankuzu-psychiatry-container,
	.feature-container {
		padding: 0 32px;
	}
	.lower-mv-title {
		margin: 0 auto;
		padding: 40px 32px;
	}
	.anchorlink-wapper {
		padding: 40px 32px;
	}
	.psychiatry-anchorlink {
		max-width: calc((100% - 20px) / 2);
	}
}
/* sp */
@media screen and (max-width: 767px) {
	html {
		/* scroll-behavior: smooth; */
		scroll-behavior: auto;
		scroll-padding-top: 80px;
	}

	.lower-wrapper {
		padding-bottom: 0;
	}

	.lower-mv-title h1 {
		font-size: 32px;
		font-weight: bold;
		letter-spacing: 0.04em;
		color: #fff;
		margin-top: 4px;
	}

	.pankuzu-psychiatry-container,
	.feature-container {
		padding: 0 20px;
	}

	.pankuzu-psychiatry-list {
		padding: 40px 0;
	}

	.feature-container,
	.staff-container {
		padding: 40px 20px;
	}

	.psychiatry-anchorlink {
		max-width: calc((100% - 20px) / 2);
	}

	.feature-block {
		padding-bottom: 40px;
	}

	.feature-text,
	.staff-text {
		font-size: 16px;
		line-height: 1.8;
		letter-spacing: 0.04em;
	}

	/* h2タイトル全体のスタイル */
	.feature-title,
	.staff-title {
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: center;
		font-size: 32px;
		font-weight: bold;
		color: #d96e34;
		letter-spacing: 0.04em;
		margin-bottom: 56px;
		text-align: center;
	}

	/* ドットコンテナ（左右共通） */
	/* ★ HTMLをspanに変更しましたが、CSSでflexを指定するので動作は同じです */
	.dots-container {
		display: flex;
		align-items: center;
		gap: 8px; /* ドット同士の間隔 */
	}

	/* ドットの基本スタイル（共通） */
	.dot {
		display: block;
		border-radius: 50%; /* 円形にする */
	}

	/* --- 左側のドット（個別に指定） --- */
	.dots-left .dot-1 {
		width: 10px;
		height: 10px;
		background-color: #d96e34;
	}
	.dots-left .dot-2 {
		width: 10px;
		height: 10px;
		background-color: #ecb699;
	}
	.dots-left .dot-3 {
		width: 10px;
		height: 10px;
		background-color: #d96e34;
	}

	/* --- 右側のドット（個別に指定） --- */
	.dots-right .dot-1 {
		width: 10px;
		height: 10px;
		background-color: #d96e34;
	}
	.dots-right .dot-2 {
		width: 10px;
		height: 10px;
		background-color: #ecb699;
	}
	.dots-right .dot-3 {
		width: 10px;
		height: 10px;
		background-color: #d96e34;
	}

	.feature-subtitle {
		font-size: 24px;
		font-weight: bold;
		color: #d96e34;
		align-items: center;
		display: flex;
		margin-bottom: 32px;
	}

	.feature-subtitle::before {
		width: 100%;
		height: 1px;
		background: #d96e34;
		content: '';
	}

	.feature-subtitle::after {
		width: 100%;
		height: 1px;
		background: #d96e34;
		content: '';
	}

	.feature-subtitle span {
		padding: 0 20px;
		white-space: nowrap;
	}

	.feature-subtitle-sub {
		font-size: 20px;
		line-height: 2;
		letter-spacing: 0.04em;
		font-weight: bold;
		color: #4b4737;
		text-align: center;
		margin-bottom: 20px;
	}

	.feature-list-block {
		background-color: #f9f7f3;
		padding: 24px 32px;
		border-radius: 8px;
	}

	.feature-list-block p {
		color: #d96e34;
		font-size: 18px;
		margin-top: 0;
		margin-bottom: 10px;
		font-weight: bold;
		letter-spacing: 0.04em;
	}

	/* h3要素全体 */
	.staff-subtitle {
		font-size: 20px; /* 基準となるフォントサイズ */
		margin: 0;

		/* (デモ用) 画像の背景色と余白 */
		background-color: #f9f7f3;
		padding: 12px;
		border-radius: 8px;
	}

	/* 「院長」タグのスタイル */
	.staff-subtitle .staff-tag {
		font-size: 16px;
		margin-right: 8px;
		line-height: normal;
		min-width: 48px;
	}
}

@media screen and (max-width: 426px) {
	.anchorlink-wapper {
		flex-direction: column;
	}
	.psychiatry-anchorlink {
		max-width: 100%;
	}
}