/* ==========================================================================
   Subpage Styles / 下層ページ専用スタイル
   (当院について, クリニック紹介, お知らせ一覧, お知らせ詳細, アクセス, プライバシーポリシー)
   Strictly matching Figma Frames 78:522, 88:919, 88:1271, 107:3932, 140:4532, 103:1489
   ========================================================================== */

/* ==========================================================================
   1. 当院について (About Us - .s_about_*) - Figma 78:522
   ========================================================================== */

/* 1.1 Page Mini Navigation (ページ内アンカーメニュー - Figma 103:1789) */
.s_about_nav_wrap {
	margin-bottom: 56px;
}

.s_about_nav_list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0 16px 0;
	border-bottom: 2px solid var(--color_primary);
	list-style: none;
	flex-wrap: wrap;
	gap: 16px;
}

.s_about_nav_item {
	margin: 0;
}

.s_about_nav_link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color_brown);
	font-family: var(--font_maru_gothic);
	font-size: 1.25em;
	/* 20px */
	font-weight: 700;
	letter-spacing: 0.15em;
	text-decoration: none;
	transition: var(--transition_base);
	cursor: pointer;
}

.s_about_nav_icon {
	width: 16px;
	height: 14px;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.s_about_nav_link:hover {
	color: var(--color_primary);
}

.s_about_nav_link:hover .s_about_nav_icon {
	transform: translateY(3px);
}

/* 1.2 Cards Common Wrap */
.s_about_cards {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

.s_about_card {
	background-color: var(--color_white);
	border-radius: 30px;
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.03);
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

/* Section Header Badge */
.s_about_card_badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
}

.s_about_card_badge_icon {
	width: 28px;
	height: 26px;
	object-fit: contain;
	flex-shrink: 0;
}

.s_about_card_badge_title {
	font-family: var(--font_maru_gothic);
	font-size: 1.5625em;
	/* 25px */
	font-weight: 700;
	color: var(--color_brown);
	letter-spacing: 0.15em;
	margin: 0;
}

/* 1.3 Overview Card (診療科目・担当医師・診療時間・予約について) */
.s_about_overview_card {
	padding: 56px 64px;
}

.s_about_overview_grid {
	display: grid;
	grid-template-columns: 1fr 520px;
	gap: 48px;
	align-items: start;
}

.s_about_overview_info {
	display: flex;
	flex-direction: column;
	gap: 36px;
	position: relative;
}

.s_about_overview_item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}

.s_about_item_head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.s_about_item_icon {
	width: 24px;
	height: 22px;
	object-fit: contain;
	flex-shrink: 0;
}

.s_about_item_title {
	font-family: var(--font_maru_gothic);
	font-size: 1.4375em;
	/* 23px */
	font-weight: 700;
	color: var(--color_brown);
	letter-spacing: 0.1em;
	margin: 0;
}

.c_schedule_table th.c_schedule_title .s_about_table_head_title .s_about_item_title {
	font-size: 1.15em;
}

.s_about_item_text {
	font-size: 1.125em;
	/* 18px */
	line-height: 1.5;
	color: var(--color_black);
	letter-spacing: 0.1em;
	margin: 0;
	padding-left: 36px;
}

.s_about_table_wrap {
	padding-left: 0;
	max-width: 468px;
}

.s_about_table_head_title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.s_about_table_head_title .s_about_item_title {
	margin: 0;
}

.s_about_overview_photo_wrap {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 50px;
}

.s_about_overview_photo {
	max-width: 250px;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

.s_about_overview {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: center;
}

.s_about_clinic-wrap {
	display: flex;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* ==========================================
 * Floating Speech Bubble Mascots (Figma 78:522)
 * Slant to the left/right with on-scroll popup and flow ease
 * ========================================== */
@keyframes aboutMascotPop1 {
	0% {
		opacity: 0;
		transform: scale(0.6) translateY(24px) rotate(-8deg);
	}

	60% {
		opacity: 1;
		transform: scale(1.02) translateY(-6px) rotate(-9deg);
	}

	80% {
		opacity: 1;
		transform: scale(0.99) translateY(2px) rotate(-7.5deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0) rotate(-8deg);
	}
}

@keyframes aboutMascotFloat1 {

	0%,
	100% {
		transform: translateY(0px) rotate(-8deg);
	}

	50% {
		transform: translateY(-8px) rotate(-10deg);
	}
}

@keyframes aboutMascotPop2 {
	0% {
		opacity: 0;
		transform: scale(0.6) translateY(24px) rotate(12deg);
	}

	60% {
		opacity: 1;
		transform: scale(1.02) translateY(-6px) rotate(13.5deg);
	}

	80% {
		opacity: 1;
		transform: scale(0.99) translateY(2px) rotate(11.5deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0) rotate(12deg);
	}
}

@keyframes aboutMascotFloat2 {

	0%,
	100% {
		transform: translateY(0px) rotate(12deg);
	}

	50% {
		transform: translateY(-8px) rotate(14.5deg);
	}
}

@keyframes aboutMascotPop3 {
	0% {
		opacity: 0;
		transform: scale(0.6) translateY(24px) rotate(10deg);
	}

	60% {
		opacity: 1;
		transform: scale(1.02) translateY(-6px) rotate(11deg);
	}

	80% {
		opacity: 1;
		transform: scale(0.99) translateY(2px) rotate(9.5deg);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0) rotate(10deg);
	}
}

@keyframes aboutMascotFloat3 {

	0%,
	100% {
		transform: translateY(0px) rotate(10deg);
	}

	50% {
		transform: translateY(-8px) rotate(12.5deg);
	}
}

.s_about_mascot_overview {
	position: absolute;
	top: -5px;
	right: 20px;
	width: 110px;
	height: auto;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.6) translateY(-24px) rotate(-8deg);
	will-change: transform, opacity;
}

.s_about_mascot_overview.is_visible,
.s_about_overview_card.is_visible .s_about_mascot_overview {
	opacity: 1;
	animation:
		aboutMascotPop1 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
		aboutMascotFloat1 4s ease-in-out 0.8s infinite;
}

.s_about_mascot_doctor {
	position: absolute;
	top: -20px;
	right: -15px;
	width: 135px;
	height: auto;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.6) translateY(24px) rotate(12deg);
	will-change: transform, opacity;
}

.s_about_mascot_doctor.is_visible,
.s_about_greeting_card.is_visible .s_about_mascot_doctor {
	opacity: 1;
	animation:
		aboutMascotPop2 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
		aboutMascotFloat2 4s ease-in-out 0.8s infinite;
}

.s_about_mascot_policy {
	position: absolute;
	top: -20px;
	right: -15px;
	width: 135px;
	height: auto;
	z-index: 5;
	pointer-events: none;
	opacity: 0;
	transform: scale(0.6) translateY(24px) rotate(10deg);
	will-change: transform, opacity;
}

.s_about_mascot_policy.is_visible,
.s_about_policy_card.is_visible .s_about_mascot_policy {
	opacity: 1;
	animation:
		aboutMascotPop3 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
		aboutMascotFloat3 4s ease-in-out 0.8s infinite;
}

/* 1.4 Director Greeting Card (院長挨拶) */
.s_about_greeting_card {
	padding: 56px 64px;
}

.s_about_doctor_col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: relative;
}

.s_about_doctor_photo_wrap {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}

.s_about_doctor_photo {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.s_about_profile_box {
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: relative;
	padding-top: 1em;
	border-top: 1px solid rgba(0, 0, 0, 0.25);
}

.s_about_profile_clinic {
	font-family: var(--font_maru_gothic);
	font-size: 1.125em;
	/* 18px */
	font-weight: 500;
	color: var(--color_black);
	letter-spacing: 0.15em;
	margin: 0;
	text-align: end;
}

.s_about_profile_name {
	font-family: var(--font_maru_gothic);
	font-size: 1.375em;
	/* 22px */
	font-weight: 500;
	color: var(--color_black);
	letter-spacing: 0.15em;
	margin: 0 0 8px 0;
	text-align: end;
}

.s_about_profile_bio {
	font-size: 1em;
	/* 16px */
	line-height: 1.75;
	color: var(--color_black);
	letter-spacing: 0.05em;
	margin: 0 auto;
}

.s_about_profile_bio p {
	margin: 0 0 4px 0;
}

.s_about_greeting_body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 12px;
}

.s_about_greeting_p {
	font-size: 1.125em;
	/* 18px */
	line-height: 1.5;
	color: var(--color_black);
	letter-spacing: 0.05em;
	/* Updated code for temporary only */
	/*margin: 0 auto;
	max-width: 500px;
	padding: 50px 0;*/
}

/* 1.5 Policy Card (診療方針) */
.s_about_policy_card {
	padding: 56px 64px;
}

.s_about_policy_photo_wrap {
	width: 100%;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}

.s_about_policy_photo {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}


.s_about_policy_body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-right: 0;
}

.s_about_policy_lead {
	font-family: var(--font_maru_gothic);
	font-size: 1.5625em;
	/* 25px */
	font-weight: 700;
	color: var(--color_black);
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin: 0;
	white-space: nowrap;
}

.s_about_policy_sublead {
	font-family: var(--font_maru_gothic);
	font-size: 1.375em;
	/* 22px */
	font-weight: 700;
	color: var(--color_black);
	letter-spacing: 0.05em;
	margin: 0 0 8px 0;
}

.s_about_policy_p {
	font-size: 1.125em;
	/* 18px */
	line-height: 1.5;
	color: var(--color_black);
	letter-spacing: 0.05em;
	/* Updated code for temporary only */
	margin: 0 auto;
	max-width: 500px;
	padding: 50px 0;
}

@media (max-width: 768px) {
	.s_about_policy_lead {
		text-wrap: wrap;
	}
}

@media (max-width: 650px) {
	.s_about_overview {
		flex-direction: column;
	}
}

@media (max-width: 500px) {

	.s_about_greeting_p,
	.s_about_policy_p {
		font-size: 1em;
	}
}

/* ==========================================================================
   2. クリニック紹介 (Clinic Guide - .s_clinic_*) - Figma 88:919
   ========================================================================== */

.s_clinic_header {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 56px auto;
	position: relative;
}

.s_clinic_header_badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 14px;
	border-bottom: 2px solid red;
	padding-bottom: 8px;
	width: 100%;
}

.s_clinic_header_icon {
	width: 28px;
	height: 26px;
	object-fit: contain;
	flex-shrink: 0;
}

.s_clinic_header_title {
	font-family: var(--font_maru_gothic);
	font-size: 1.5625em;
	/* 25px */
	font-weight: 700;
	color: var(--color_brown);
	letter-spacing: 0.1em;
	margin: 0;
}

.s_clinic_grid {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 64px 80px;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto;
}

.c_facility_card {
	display: flex;
	flex-direction: column;
	background: transparent;
	width: 100%;
}

.c_facility_card_img_wrap {
	width: 100%;
	height: 330px;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
	margin-bottom: 18px;
}

.c_facility_card_img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.c_facility_card_body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.c_facility_card_title {
	font-family: var(--font_maru_gothic);
	font-size: 1.375em;
	/* 22px */
	font-weight: 700;
	color: var(--color_brown);
	letter-spacing: 0.05em;
	margin: 0;
}

.c_facility_card_desc {
	font-size: 1.125em;
	/* 18px */
	line-height: 1.5;
	color: var(--color_black);
	margin: 0;
}

/* ==========================================================================
   3. お知らせ一覧 & 詳細 (News Archive & Single) - Figma 88:1271 & 107:3932
   ========================================================================== */

.s_news_archive_layout,
.s_news_single_layout {
	display: grid;
	grid-template-columns: 285px 1fr;
	gap: 56px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 50px;
}

/* News List Flat Wrap (Figma 88:1271) */
.s_news_list_wrap {
	width: 100%;
	border-top: 1px solid rgba(0, 0, 0, 0.35);
}

/* Single Article Flat Wrap (Figma 107:3932) */
.s_news_single_article {
	width: 100%;
	margin-bottom: 48px;
}

.s_news_single_article a {
	color: var(--color_primary);
	text-decoration: underline;
}
.s_news_single_article a:hover {
	text-decoration: none;
}

.s_news_single_header {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	margin-bottom: 32px;
}

.s_news_single_meta {
	display: flex;
	align-items: center;
	gap: 20px;
}

.s_news_single_title {
	font-family: var(--font_maru_gothic);
	font-size: 1.5625em;
	/* 25px */
	font-weight: 700;
	color: var(--color_black);
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin: 0;
}

.s_news_single_thumbnail {
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: 32px;
}

.s_news_single_img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.s_news_single_body {
	font-size: 1.125em;
	/* 18px */
	line-height: 2.15;
	color: var(--color_black);
	letter-spacing: 0.05em;
}

.s_news_single_body p {
	margin-bottom: 24px;
}

.s_news_single_body h2 {
	font-family: var(--font_maru_gothic);
	font-size: 1.375em;
	/* 22px */
	font-weight: 700;
	color: var(--color_black);
	letter-spacing: 0.05em;
	line-height: 1.6;
	margin: 36px 0 16px 0;
}

.s_news_single_body h3 {
	font-family: var(--font_maru_gothic);
	font-size: 1.25em;
	/* 20px */
	font-weight: 700;
	color: var(--color_black);
	margin: 28px 0 14px 0;
}

.s_news_single_cta {
	display: flex;
	justify-content: flex-start;
	margin-top: 48px;
}

/* ==========================================================================
   4. アクセス (Access - Figma 140:4532)
   ========================================================================== */
.s_access_page_grid {
	display: grid;
	grid-template-columns: 1fr 585px;
	gap: 48px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}

.s_access_page_info {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.s_access_page_address {
	font-family: var(--font_maru_gothic);
	font-size: 1.125em;
	/* 18px */
	line-height: 1.8;
	color: var(--color_black);
	letter-spacing: 0.1em;
	margin: 0;
}

.s_access_page_transit {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 12px;
}

.s_access_transit_item {
	display: flex;
	align-items: center;
	gap: 15px;
}

.s_access_transit_icon {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
	margin-top: 2px;
}

.s_access_transit_text {
	display: flex;
	flex-direction: column;
}

.s_access_transit_name {
	font-family: var(--font_maru_gothic);
	font-size: 1.125em;
	/* 18px */
	font-weight: 700;
	color: var(--color_black);
	letter-spacing: 0.1em;
	margin: 0;
	line-height: 1;
}

.s_access_transit_desc {
	font-size: 1em;
	/* 16px */
	color: var(--color_black);
	letter-spacing: 0.1em;
	margin: 0;
}

.s_access_page_map_wrap {
	width: 100%;
	height: 360px;
	border-radius: 20px;
	overflow: hidden;
	position: relative;
}

.s_access_page_map_iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   5. プライバシーポリシー (Privacy Policy - Figma 103:1489)
   ========================================================================== */

.s_privacy_content {
	max-width: 960px;
	margin: 0 auto;
	width: 100%;
}

.s_privacy_title {
	font-family: var(--font_maru_gothic);
	font-size: 1.875em;
	/* 30px */
	font-weight: 700;
	color: var(--color_black);
	text-align: center;
	letter-spacing: 0.1em;
	margin: 0 0 36px 0;
}

.s_privacy_lead {
	font-size: 1em;
	/* 16px */
	line-height: 1.5;
	color: var(--color_black);
	letter-spacing: 0.05em;
	margin-bottom: 40px;
}

.s_privacy_article {
	margin-bottom: 36px;
}

.s_privacy_article_title {
	font-family: var(--font_maru_gothic);
	font-size: 1.4375em;
	/* 23px */
	font-weight: 700;
	color: var(--color_black);
	letter-spacing: 0.05em;
	margin: 0 0 12px 0;
}

.s_privacy_article_text {
	font-size: 1em;
	/* 16px */
	line-height: 1.5;
	color: var(--color_black);
	letter-spacing: 0.05em;
	margin: 0;
}

.s_privacy_list {
	padding-left: 24px;
	margin: 12px 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style-type: decimal;
}

.s_privacy_list_alpha {
	list-style-type: lower-alpha;
	padding-left: 20px;
	margin: 6px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.s_privacy_list_roman {
	list-style-type: lower-roman;
	padding-left: 20px;
	margin: 6px 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.s_privacy_list li {
	font-size: 1em;
	/* 16px */
	line-height: 1.5;
	color: var(--color_black);
}

/* ==========================================================================
   6. Responsive Subpage Media Queries
   ========================================================================== */
@media screen and (max-width: 1200px) {
	.s_clinic_grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 40px;
	}

	.s_about_overview_grid,
	.s_access_page_grid {
		grid-template-columns: 1fr 440px;
		gap: 36px;
	}
}

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

	.s_about_overview_grid,
	.s_about_greeting_grid,
	.s_about_policy_grid,
	.s_access_page_grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.s_access_page_map_wrap {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		min-height: 380px;
	}

	.s_news_archive_layout,
	.s_news_single_layout {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	.s_about_nav_list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px 20px;
		justify-content: center;
		padding-bottom: 20px;
	}

	.s_about_nav_item {
		display: flex;
		justify-content: center;
	}

	.s_about_nav_link {
		width: 100%;
		max-width: 220px;
		justify-content: center;
		font-size: 1.125em;
	}
}

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

	.s_about_section,
	.s_clinic_section,
	.s_news_archive_section,
	.s_news_single_section,
	.s_privacy_section,
	.s_access_page_section {
		padding-bottom: 60px;
	}

	.s_about_item_title,
	.c_schedule_table th.c_schedule_title .s_about_table_head_title .s_about_item_title {
		font-size: 1.1em;
	}

	.s_about_nav_list {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px 16px;
		padding-bottom: 16px;
	}

	.s_about_overview_card,
	.s_about_greeting_card,
	.s_about_policy_card {
		padding: 32px 20px;
		border-radius: 20px;
	}

	.s_about_item_text,
	.s_about_table_wrap {
		padding-left: 0;
	}

	.s_clinic_grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.c_facility_card_img_wrap {
		height: 240px;
	}

	.s_access_page_map_wrap {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		min-height: 260px;
	}

	.s_news_single_title {
		font-size: 1.375em;
	}

	.c_floating_accent,
	.s_about_mascot_overview,
	.s_about_mascot_doctor,
	.s_about_mascot_policy {
		display: none;
	}

	.s_about_nav_link {
		font-size: 1em;
		/* 16px */
		letter-spacing: 0.1em;
		gap: 8px;
		max-width: 100%;
		justify-content: center;
	}

	.s_about_nav_icon {
		width: 14px;
		height: 12px;
	}
}

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

	.s_about_section,
	.s_clinic_section,
	.s_news_archive_section,
	.s_news_single_section,
	.s_privacy_section,
	.s_access_page_section {
		padding-bottom: 30px;
	}

	.s_about_item_title {
		font-size: 1em;
	}

	.c_schedule_table th.c_schedule_title .s_about_table_head_title .s_about_item_title {
		font-size: 1em;
	}

	.s_about_nav_list {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px 8px;
		padding-bottom: 14px;
	}

	.s_about_nav_link {
		font-size: 0.875em;
		/* 14px */
		letter-spacing: 0.04em;
		gap: 6px;
	}

	.s_about_nav_icon {
		width: 12px;
		height: 10px;
	}

	.s_about_card_badge_title,
	.s_access_transit_detail,
	.s_access_address {
		font-size: 1em;
	}
}

/* ==========================================================================
   End of Subpage Styles
   ========================================================================== */