/* === Page title band (large strip under main menu for pages) === */
.page-title-band {
	/* Use the well-supported full-bleed calc centering so the band
	   sits centered in the viewport regardless of parent width/position. */
	display: block;
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	color: #ffffff;
	padding: 0; /* image defines the height via inline style */
	overflow: hidden;
	border: none;
	box-shadow: none;
	background-size: auto; /* show at intrinsic size */
	background-repeat: no-repeat;
	background-position: center center !important; /* force centering */
	background-attachment: scroll;
	background-color: #f5f5f5; /* visible at both ends */
	z-index: 2; /* keep above page background; JS will place bg at z-index:1 */
}

.page-title-band__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	/* keep this static so the title can position relative to the full band */
	position: static;
}

.page-title-band__breadcrumb {
	font-size: 14px;
}

.page-title-band__title {
	position: absolute;
	left: 24px; /* distance from the left edge of the band */
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 36px;
	line-height: 1.1;
	font-weight: 700;
	text-align: left;
	z-index: 2;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
	.page-title-band__title {
		font-size: 22px;
		left: 16px;
	}
}

/* Render the band background centered in the viewport.
   Use background-attachment: fixed so the image is positioned
   relative to the viewport — this is robust against parent layout
   constraints and ancestor transforms. The inline style on the
   section (set in PHP) supplies the background-image and height. */
.page-title-band {
	/* allow the inline background-image to be used and force viewport-centering */
	background-repeat: no-repeat !important;
	background-position: center center !important;
	background-size: auto !important; /* show at intrinsic size */
	background-attachment: scroll !important; /* allow band to scroll with page */
}

/* Hide the smaller semantic title on pages to avoid duplication */
.entry-header .entry-title {
	display: none;
}

/*
Theme Name: Jclinic
Theme URI: http://jclinicth.com/
Description: Jclinic
Version: 1.0
Author: STUDIO33
Author URI: http://studio33-corp.com/
Tags: STUDIO33
*/

/* 基本スタイル */
body {
	font: 14px/1.4 YuGothic, Yu Gothic, "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans Japanese", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #3f3f3f;
	line-height: 1.8em;
	background-color: #f7f9fc;
}

ul, ol, h2 {
	list-style: none;
}

/* ヘッダー */
header {
	width: 100%;
}

/* Final override: ensure the page-title-band element itself is centered in
   case other layout rules interfere. Keeps the band full-bleed and centers
   its background image. */
.page-title-band {
	width: 100vw !important;
	position: relative !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	margin-left: 0 !important;
	background-position: center center !important;
}

.headerIn {
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 0;
	box-sizing: border-box;
}

.header-main-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

h1 {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

.header-right-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-left: 20px;
}

#headerRight_top {
	align-self: flex-end;
	margin-bottom: 10px;
}

#headerRight {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.headTel {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-right: 20px;
	align-items: center;
}

.headtel_text {
	margin-bottom: 10px;
}

ul.tel_no {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	list-style: none;
}

ul.tel_no li {
	margin-right: 10px;
	margin-bottom: 5px;
}

.headUt {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#sns-btn {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 0 10px 0;
	justify-content: center;
	flex-wrap: wrap;
}

#sns-btn li {
	margin: 0 5px 5px 0;
}

#sns-btn li:last-child {
	margin-right: 0;
}


#sns-btn li a {
	display: flex;
	align-items: center;
	border: 1px solid #49b0df;
	color: #49b0df;
	text-align: center;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: bold;
	border-radius: 3px;
	transition: all 0.3s ease;
	text-decoration: none;
	background-color: white;
}

#sns-btn li a:hover {
	background-color: #49b0df;
	color: white;
}

#sns-btn li a.fb::before {
	content: url('images/icon-facebook.png');
}

#sns-btn li a.istg::before {
	content: url('images/icon-instagram.png');
}

#head_btn {
	text-align: right;
}

/* ヘッダー表示の制御 */
.desktop-header {
	display: block;
}

/* ハンバーガーメニューのスタイル */
.hamburger-menu {
	display: none;
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 1000;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
}

.hamburger-menu span {
	display: block;
	width: 25px;
	height: 3px;
	background-color: #333;
	margin: 5px 0;
	transition: all 0.3s ease;
}

/* オーバーレイのスタイル */
.overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 998;
}

/* スライドメニューのスタイル */
#slide-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 80%;
	max-width: 300px;
	height: 100%;
	background-color: #fff;
	z-index: 999;
	transition: right 0.3s ease;
	overflow-y: auto;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

#slide-menu ul {
	list-style-type: none;
	padding: 0;
	margin: 60px 0 0 0;
}

#slide-menu ul li {
	padding: 15px 20px;
	border-bottom: 1px solid #eee;
}

#slide-menu ul li a {
	color: #333;
	text-decoration: none;
	display: block;
}

/* モバイル表示時のスタイル */
@media (max-width: 768px) {
	.hamburger-menu {
		display: block;
	}

	nav#globalnav {
		display: none;
	}

	.hamburger-menu.active span:nth-child(1) {
		transform: rotate(45deg) translate(5px, 5px);
	}

	.hamburger-menu.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger-menu.active span:nth-child(3) {
		transform: rotate(-45deg) translate(7px, -6px);
	}

	#slide-menu.active {
		right: 0;
	}
}

/* ユーティリティナビゲーション */
ul#utility {
	display: flex;
	justify-content: flex-end;
	list-style: none;
	margin: 5px 0;
	padding: 0;
}

ul#utility li {
	padding-left: 15px;
	background: url(images/head_nav_bg.png) no-repeat left center;
}

ul#utility li:first-child,
ul#utility li:nth-child(2) {
	margin-left: 0;
	padding-left: 0;
	background: none;
}

ul#utility li:last-child {
	margin-left: 0;
}

ul#utility img {
	vertical-align: bottom;
}

ul#utility li a {
	font-size: 11px;
	color: #505050;
}

/* ヘッダーユーティリティ */
#headerRight .headUt {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#sns-btn {
	margin: 10px 0 10px 5px;
}

#sns-btn:after {
	content: "";
	display: block;
	clear: both;
	visibility: hidden;
}

#sns-btn li {
	margin-left: 10px;
}

#sns-btn li:first-child {
	margin-left: 0;
}

#sns-btn li a {
	display: block;
	border: 1px solid #49b0df;
	color: #49b0df;
	text-align: center;
	padding: 3px 7px;
	font-size: 11px;
	font-weight: bold;
	border-radius: 3px;
}

#sns-btn li a.fb::before,
#sns-btn li a.istg::before {
	margin-right: 4px;
	vertical-align: -24%;
}

#sns-btn li a.fb::before {
	content: url('images/icon-facebook.png');
}

#sns-btn li a.istg::before {
	content: url('images/icon-instagram.png');
}

/* 予約ボタン */
#head_btn {
	margin-top: 10px;
}

#head_btn a {
	display: inline-block;
	transition: opacity 0.3s ease;
}

#head_btn a:hover img {
	opacity: 0.8;
}

/* グローバルナビゲーション */
nav#globalnav,
nav#globalnav_en,
nav#globalnav_th {
	width: 100%;
	background-color: #49b0df;
}

nav#globalnav ul,
nav#globalnav_en ul,
nav#globalnav_th ul {
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav#globalnav li a,
nav#globalnav_en li a,
nav#globalnav_th li a {
	color: #FFFFFF;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 45px;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	font-family: "メイリオ", Meiryo, sans-serif;
	letter-spacing: 1px;
	transition: background-color 0.3s, color 0.3s;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
}

nav#globalnav li a::before,
nav#globalnav_en li a::before,
nav#globalnav_th li a::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #FFFFFF;
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}

nav#globalnav li a:hover,
nav#globalnav_en li a:hover,
nav#globalnav_th li a:hover {
	background-color: #3a8eb0;
	color: #FFFFFF;
}

nav#globalnav li a:hover::before,
nav#globalnav_en li a:hover::before,
nav#globalnav_th li a:hover::before {
	transform: translateX(0);
}

/* クリアフィックス */
.cf:before,
.cf:after {
	content: "";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	zoom: 1;
}

/* メインYouTube動画のレスポンシブスタイル */
#slider-wrap {
	background-color: #808080;
	width: 100%;
}

#slider-wrap .video-container {
	width: 80%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

#slider-wrap .video-container::before {
	content: "";
	display: block;
	padding-top: 56.25%;
}

#slider-wrap .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* コンディションセクション */
#condition {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

#condition h2 {
	text-align: center;
	margin: 0 auto 30px;
	padding-left: 0;
	border-bottom: 2px solid #49b0df;
	padding-bottom: 10px;
	font-size: 24px;
	color: #333;
}

#condition ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
}

#condition li {
	width: calc(25% - 20px);
	margin-bottom: 30px;
	margin: 0 auto;
}

#condition li img {
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
}

#condition li h3 {
	font-size: 16px;
	line-height: 1.4;
	margin: 0;
}

/* YouTubeセクション */
.top_youtube2, .top_youtube_section {
	width: 100%;
	max-width: 1000px;
	margin: 40px auto;
	padding: 30px 20px;
	box-sizing: border-box;
}

.top_youtube_section {
	background-color: #f8f8f8;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.top_youtube_section h2 {
	font-size: 24px;
	color: #333;
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid #49b0df;
	text-align: center;
}

.top_youtube_section .video-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.top_youtube_section .video-item {
	flex: 1 1 calc(33.333% - 20px);
	min-width: 280px;
}

.video-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
	margin: 0 auto;
}

.video-item {
	flex: 1 1 calc(50% - 10px);
	min-width: 470px;
	margin-bottom: 20px;
}

.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

.video-item p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	padding: 0 10px;
}

.top_youtube_section .see-more {
	text-align: center;
	margin: 20px auto;
}

.see-more a {
	display: inline-block;
	padding: 10px 20px;
	background-color: #49b0df;
	color: white;
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.see-more a:hover {
	background-color: #3a8eb0;
}

.mobile-banner {
	display: none;
	width: 100%;
}

/* top_youtube2のvideo-item */
.top_youtube2 .video-item {
	flex: 1 1 calc(50% - 10px);
	min-width: 280px;
	margin-bottom: 20px;
}

.top_youtube2 .video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.top_youtube2 .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

/* video-containerのvideo-item */
.video-container .video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-container .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

/* 共通のスタイル */
.video-item p {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	padding: 0 10px;
}

/* ニュースセクション */
#news {
	max-width: 1000px;
	width: 100%;
	margin: 30px auto;
	padding: 20px;
	background-color: #ffffff;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	box-sizing: border-box;
}

#news h2 {
	font-size: 1.5em;
	margin-bottom: 15px;
	color: #000;
}

.info_more {
	text-align: right;
	margin-bottom: 10px;
}

.info_more a {
	color: #000;
	text-decoration: none;
}

.info_more a:hover {
	text-decoration: underline;
}

#news dl {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
}

.news-item {
	display: flex;
	margin-bottom: 10px;
	align-items: baseline;
}

#news dt {
	font-weight: bold;
	color: #0073aa;
	width: 100px;
	flex-shrink: 0;
}

#news dd {
	color: #333;
	flex-grow: 1;
	margin-left: 20px;
	margin-bottom: 0;
}

#news dd a {
	color: #333;
	text-decoration: none;
}

#news dd a:hover {
	color: #0073aa;
	text-decoration: underline;
}

@media (max-width: 600px) {
	#news dl {
		display: block;
	}
	#news dt, #news dd {
		display: block;
		width: auto;
	}
	#news dt {
		margin-bottom: 5px;
	}
}

/* フッター */
footer {
	background-color: #f8f8f8;
	width: 100%;
}

#branch {
	background: url(images/footer_branch_bg.png) repeat center center;
	padding: 40px 0;
	width: 100%;
}

#branch .inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

#branch_en {
	background: url(images/footer_branch_bg.png) repeat center center;
	padding: 40px 0;
	width: 100%;
}

#branch_en .inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.footer_boxes {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 30px;
}

.footer_box {
	flex: 1;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.branch_name {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

.googlemap iframe,
.footer_box iframe {
	width: 100%;
	height: 185px;
}

.add {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 10px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 80px;
}

.tel {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 10px;
}

.tel span {
	font-weight: bold;
}

.footer_box img {
	width: 100%;
	max-width: 300px;
	display: block;
	margin: 20px auto 0;
}

table {
	width: 100%;
	margin-top: 15px;
	table-layout: fixed;
}

th, td {
	padding: 5px;
	text-align: left;
}

/* コピーライト */
#copyright {
	background-color: #49b0df;
	color: #fff;
	text-align: center;
	padding: 10px 0;
}

#copyright .inner {
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

#copyright p {
	margin: 0;
	font-size: 14px;
}

/* ページ固有のスタイル */
.page-about {
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
	line-height: 1.6;
}

.content-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2rem; 
}

.pagecopy {
	font-family: Times, "Times New Roman", Georgia, serif;
	font-size: 1.6rem;
	text-align: center;
	margin-bottom: 3rem;
	color: #49b0df;
}

.pagecopy strong {
	color: #49b0df;
	font-size: 2rem;
}

.about-movie {
	margin: 0 auto 3rem;
	text-align: center;
}

/* PCでは 960x450 を維持 / 小さい画面では幅100%で16:9維持 */
.about-movie iframe {
	display: block;
	margin: 0 auto;
	width: 960px;      /* デスクトップ標準幅 */
	height: 450px;     /* デスクトップ標準高さ */
	max-width: 100%;   /* 親幅より大きくならない */
	border: none;
	aspect-ratio: 16 / 9; /* モダンブラウザで比率維持補助 */
}

@media (max-width: 999px) {
	.about-movie iframe {
		width: 100%;
		height: auto; /* HTML属性の比率を利用して自動調整 */
	}
}

.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.flex-container.reverse {
	flex-direction: row-reverse;
}

.flex-container h2::before {
	display: none;
}

.flex-item {
	flex: 1 1 300px;
}

.content_box1 {
	flex: 1;
	padding: 20px;
	box-sizing: border-box;
	width: 48%;
	margin-bottom: 20px;
}

/* フロートレイアウトでの幅調整 */
.content_box1.left,
.content_box1.right {
	width: 48%;
}

.content_img1 {
	flex: 1;
	padding: 20px;
	box-sizing: border-box;
	width: 48%;
}

/* フロートレイアウトでの幅調整 */
.content_img1.left,
.content_img1.right {
	width: 48%;
}

.content_box1 img,
.content_img1 img {
	max-width: 100%;
	height: auto;
}

.content_box1 h2 {
	color: #0066cc;
	font-size: 1.8rem;
	margin-bottom: 1rem;
	position: relative;
	padding-left: 1.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #ccc;
}

.content_box1 h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1rem;
	height: 1rem;
	background-color: #ccc;
	border-radius: 50%;
}

.content_box1 h2.tit_no1,
.content_box1 h2.tit_no2,
.content_box1 h2.tit_no3,
.content_box1 h2.tit_no4,
.content_box1 h2.tit_no5,
.content_box1 h2.tit_no6,
.content_box1 h2.tit_no7,
.content_box1 h2.tit_no8,
.content_box1 h2.tit_no9 {
	position: relative;
	padding-left: 40px;
	min-height: 40px; 
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 15px 40px;
	border-bottom: 1px solid #959595;
}

.content_box1 h2.tit_no1 {
	background-image: url('/wp-content/themes/New_jclinic/images/no1.png');
}

.content_box1 h2.tit_no2 {
	background-image: url('/wp-content/themes/New_jclinic/images/no2.png');
}

.content_box1 h2.tit_no3 {
	background-image: url('/wp-content/themes/New_jclinic/images/no3.png');
}

.content_box1 h2.tit_no4 {
	background-image: url('/wp-content/themes/New_jclinic/images/no4.png');
}

.content_box1 h2.tit_no5 {
	background-image: url('/wp-content/themes/New_jclinic/images/no5.png');
}

.content_box1 h2.tit_no6 {
	background-image: url('/wp-content/themes/New_jclinic/images/no6.png');
}

.content_box1 h2.tit_no7 {
	background-image: url('/wp-content/themes/New_jclinic/images/no7.png');
}

.content_box1 h2.tit_no8 {
	background-image: url('/wp-content/themes/New_jclinic/images/no8.png');
}

.content_box1 h2.tit_no9 {
	background-image: url('/wp-content/themes/New_jclinic/images/no9.png');
}

.content_box1 h2.tit_no1::before,
.content_box1 h2.tit_no2::before,
.content_box1 h2.tit_no3::before,
.content_box1 h2.tit_no4::before,
.content_box1 h2.tit_no5::before,
.content_box1 h2.tit_no6::before,
.content_box1 h2.tit_no7::before,
.content_box1 h2.tit_no8::before,
.content_box1 h2.tit_no9::before {
	content: none;
}

h2 {
	color: #49b0df;
	font-size: 1.8rem;
	margin-bottom: 1rem;
	padding-left: 1.5rem;
}

/* h2.tit_style1のスタイルを更新 */
h2.tit_style1 {
	text-align: center;
	margin-bottom: 40px;
	color: #49b0df !important;
}

/* 価格と見出しのスタイル */
h2.tit_style4 {
	border-bottom: 1px solid #ccc !important;
	padding-bottom: 15px !important;
	color: #fe6e6e !important;
	font-size: 25px !important;
}

.ac-course-ttl span.heading {
	font-size: 16px;
	display: block;
	margin-top: 3px;
}

.ac-course-ttl span.price {
	right: 10px;
	top: 5px;
	font-size: 18px;
}

.ac-course-ttl .heading {
	float: left;
}

.ac-course-ttl .price {
	float: right;
}

.course-cnt-left {
	float: left;
	width: 650px;
	margin-right: 30px;
}

.right {
	float: right;
}

.left {
	float: left;
}

/* セクションのクリアフィックス */
section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
	overflow: hidden; /* フロートをクリア */
}

section::after {
	content: "";
	display: table;
	clear: both;
}

/* YouTubeセクションのシンプルなスタイル */
.top_youtube {
	max-width: 1200px;
	margin: 40px auto;
	padding: 20px;
}

.top_youtube ul {
	display: flex;
	justify-content: space-between;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 20px;
}

.top_youtube li {
	flex: 1;
	text-align: center;
}

.top_youtube iframe {
	width: 310px;
	height: 174px;
	border: none;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.top_youtube li {
	font-size: 14px;
	line-height: 1.4;
	color: #333;
	margin-top: 10px;
}

/* レスポンシブデザイン: タブレットとモバイル */
@media (max-width: 768px) {
	.content_box1.left,
	.content_box1.right,
	.content_img1.left,
	.content_img1.right {
		float: none;
		width: 100%;
		margin-bottom: 20px;
	}
	
	.left,
	.right {
		float: none !important;
	}
	
	section {
		padding: 20px 10px;
	}
	
	.pagecopy {
		font-size: 1.2rem;
		padding: 0 10px;
	}
	
	.pagecopy strong {
		font-size: 1.4rem;
	}
	
	.top_youtube ul {
		flex-direction: column;
		align-items: center;
	}
	
	.top_youtube li {
		margin-bottom: 30px;
		width: 100%;
		max-width: 350px;
	}
	
	.top_youtube iframe {
		width: 100%;
		height: 200px;
	}
}

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

.page_title_wrap {
	background-image: url(images/tit_bg.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	height: 350px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	background-color: #f5f5f5;
}

.page_title_inner {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.page_title {
	text-align: left;
}

.page_title img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* content-wrap 内のおしゃれなスタイル */
#content-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.content_main {
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	padding: 40px;
}

.content_main h1, 
.content_main h2, 
.content_main h3, 
.content_main h4, 
.content_main h5, 
.content_main h6 {
	color: #2c3e50;
	margin-bottom: 20px;
	line-height: 1.4;
}

.content_main h1 {
	font-size: 2.5em;
	border-bottom: 2px solid #3498db;
	padding-bottom: 10px;
}

.content_main h2 {
	font-size: 2em;
	text-decoration: none;
	border: none;
	background: none;
	padding: 0;
	margin: 0 0 20px 0;
}

.content_main p {
	line-height: 1.8;
}

.content_main a {
	color: #3498db;
	text-decoration: none;
	transition: color 0.3s ease;
}

.content_main a:hover {
	color: #2980b9;
	text-decoration: underline;
}

.content_main img {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
}

.content_main ul, 
.content_main ol {
	margin-bottom: 20px;
	padding-left: 30px;
}

.content_main li {
	margin-bottom: 10px;
}

.page_youtube {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.page_youtube ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.page_youtube li {
	width: 100%;
	margin-bottom: 20px;
}

.page_youtube iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.page_youtube p {
	margin-top: 10px;
	font-size: 14px;
	text-align: center;
}

/* トップページのh2から青丸を削除 */
.home-page h2::before {
	display: none;
}

/* トップページの特定のセクションのh2のスタイルを調整 */
.home-page #condition h2,
.home-page #news h2,
.home-page .top_youtube_section h2 {
	padding-left: 0;
	border-bottom: 2px solid #49b0df;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

/* トップページの特定のh2タグのフォントサイズや色を調整 */
.home-page #condition h2,
.home-page #news h2,
.home-page .top_youtube_section h2 {
	font-size: 24px;
	color: #333;
}

/* セクション全体のスタイル */
section {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

/* タイトルスタイル */
.tit_style1 {
	text-align: center;
	margin-bottom: 40px;
}

.tit_style1 img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
	margin-bottom: 0;
}

/* フレックスボックスレイアウト */
.cf, .image-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 30px;
	justify-content: center;
}

.content_img1, .content_img2 {
	flex: 0 1 auto;
}

.content_img1 img, .content_img2 img {
	width: auto;
	height: auto;
	max-width: 100%;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.content_img1 img {
	/* Remove forced aspect-ratio to prevent vertical squashing; allow intrinsic size */
	width: 100%;
	height: auto;
	object-fit: contain;
}

.content_img2 img {
	object-fit: contain;
	max-height: none;
}

/* 特徴ボックスのレイアウト */
.feature-boxes {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.content_box3 {
	flex: 0 1 calc(33.333% - 20px);
	min-width: 280px;
	margin-bottom: 30px;
}

.content_box3 img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 15px;
}

.content_box3 h3 {
	color: #49b0df;
	font-size: 1.2em;
	margin-bottom: 10px;
}

.service_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px 24px;
	margin: 10px 0 50px;
	align-items: stretch;
}

/* Service cards */
.service_content_box {
	background: #ffffff;
	border: 1px solid #e3e7ec;
	border-radius: 14px;
	padding: 18px 18px 20px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05);
	position: relative;
	display: flex;
	flex-direction: column;
	font-size: 0.92rem;
	line-height: 1.55;
	transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}

.service_content_box:hover {
	transform: translateY(-4px);
	box-shadow: 0 6px 14px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
	border-color: #c3d4e2;
}

.service_content_box img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	margin: 0 0 12px;
	object-fit: cover;
}

.service_content_box h3 {
	font-size: 1.05rem;
	margin: 0 0 8px;
	font-weight: 600;
	color: #1d5f85;
	line-height: 1.3;
}

.service_content_box a {
	color: #0b6aa8;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .2s;
}

.service_content_box a:hover {
	color: #004c75;
}

/* Clamp long text for consistent card heights; preserve accessibility */
.service_content_box {
	--_lines: 6;
}
.service_content_box p,
.service_content_box { /* raw text nodes in div */
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: var(--_lines);
	-webkit-box-orient: vertical;
	line-clamp: var(--_lines);
}

/* Utility: remove clamp on very small screens to avoid cutting too much */
@media (max-width: 480px) {
	.service_content_box { --_lines: 10; }
}

/* Responsive layout refinements */
@media (max-width: 960px) {
	.service_grid { gap: 24px 18px; }
}
@media (max-width: 680px) {
	.service_grid { gap: 18px 16px; }
	.service_content_box { font-size: 0.88rem; padding: 16px 16px 18px; }
}
@media (max-width: 480px) {
	.service_content_box h3 { font-size: 1rem; }
}

/* Alignment for heading image */
.tit_style1 img { max-width: 100%; height: auto; }

/* Optional subtle background for the block wrapper if parent uses .service_cf */
.service_cf { position: relative; }
.service_cf::before {
	content: "";
	position: absolute;
	inset: -10px 0 -20px;
	background: linear-gradient(180deg,#f8fafc 0%, #eef3f7 100%);
	z-index: -1;
	border-radius: 24px;
}

/* ================= Treatment Flow Page ================= */
/* Tab-style navigation for treatment sections */
nav.course_nav {
	margin: 20px auto 40px;
	max-width: 1200px;
	background: #fff;
	border: 1px solid #d7e2ea;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	overflow: hidden;
}
nav.course_nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
nav.course_nav li { flex: 1 1 0; }
nav.course_nav a {
	display: block;
	text-align: center;
	padding: 14px 10px;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	color: #1f4e63;
	background: linear-gradient(#ffffff,#f5f9fb);
	border-right: 1px solid #d7e2ea;
	position: relative;
	transition: background .25s, color .25s;
}
nav.course_nav li:last-child a { border-right: none; }
nav.course_nav a:hover { background: #e8f3f8; color: #104154; }

/* Active / inactive states based on naming convention */
nav.course_nav a[class*="_on"] { background: #1d88bd; color: #fff; }
nav.course_nav a[class*="_on"]::after {
	content: "";
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #1d88bd;
}

/* Stack on small screens */
@media (max-width: 650px) {
	nav.course_nav a { font-size: 0.85rem; padding: 12px 6px; }
}
@media (max-width: 520px) {
	nav.course_nav ul { flex-direction: column; }
	nav.course_nav li { flex: 1 1 auto; }
	nav.course_nav a { border-right: none; border-bottom: 1px solid #d7e2ea; }
	nav.course_nav li:last-child a { border-bottom: none; }
}

/* Flow sections spacing adjustments */
body:not(.home) section + section { margin-top: 30px; }
body:not(.home) section { padding-top: 20px; padding-bottom: 10px; }
body:not(.home) section .content_box1 h3 { margin-top: 1.4rem; font-size: 1.05rem; color: #0e5c83; }
body:not(.home) section .content_box1 h3 + p,
body:not(.home) section .content_box1 h3 + br + p { margin-top: .4rem; }

/* Emphasis for inline links inside flow descriptions */
section .content_box1 a { color: #0b6aa8; text-decoration: underline; text-underline-offset: 3px; }
section .content_box1 a:hover { color: #004c75; }

/* Wide images inside flow steps adapt */
section .content_img1 img { width: 100%; height: auto; border-radius: 10px; }

/* Large right column tall image alignment fix */
.content_img1.right img, .content_img1.left img { object-fit: cover; }

/* Vertical rhythm tweak for multi-h3 blocks */
.content_box1 h3 { position: relative; padding-left: 14px; }
.content_box1 h3::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: #1d88bd; }

@media (max-width: 900px) {
	body:not(.home) section { padding: 10px 10px 0; }
	body:not(.home) section .content_box1 h3 { font-size: 1rem; }
}

/* ===== About page two-column layout refinement (different image heights support) ===== */
/* Scope to about page only using body.page-about to avoid side effects */
.page-about section > .content_box1,
.page-about section > .content_img1 {
	float: none; /* remove older float layout */
	display: inline-block;
	vertical-align: top; /* align tops despite height differences */
	width: calc(50% - 24px); /* 2-col with gap */
	margin: 0 12px 40px; /* horizontal breathing + bottom spacing */
}

/* Keep left/right semantic classes without float dependency */
.page-about .content_box1.left,
.page-about .content_img1.left,
.page-about .content_box1.right,
.page-about .content_img1.right { float: none; }

/* Image handling: allow differing intrinsic heights without distortion */
.page-about .content_img1 img {
	display: block;
	width: 100%;
	height: auto; /* preserve natural aspect */
	object-fit: contain; /* do not crop if container narrower */
}

/* Text column styling adjustments */
.page-about .content_box1 { line-height: 1.8; }

/* Narrow screens: stack columns */
@media (max-width: 900px) {
	.page-about section > .content_box1,
	.page-about section > .content_img1 {
		width: 100%;
		margin: 0 0 30px;
	}
	.page-about section > .content_img1:last-child { margin-bottom: 50px; }
}

/* Extra small tweak */
@media (max-width: 500px) {
	.page-about .content_box1 { font-size: 0.95rem; }
}

/* ... rest of the お手本style.css content omitted for brevity ... */

/* ================= Alternating layout for treatment/acupuncture flow sections ================= */
/* 対象: nav.course_nav の直後に並ぶ section 群（1つ目=画像右, 2つ目=画像左 交互） */
@media (min-width: 901px) {
	/* ベース: 対象セクションをフレックス2カラム化 */
	nav.course_nav + section,
	nav.course_nav + section + section,
	nav.course_nav + section + section + section,
	nav.course_nav + section + section + section + section,
	nav.course_nav + section + section + section + section + section,
	nav.course_nav + section + section + section + section + section + section {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 40px;
	}

	/* 偶数番目(2,4,6...)は左右反転して画像を左側に */
	nav.course_nav + section + section,
	nav.course_nav + section + section + section + section,
	nav.course_nav + section + section + section + section + section + section {
		flex-direction: row-reverse;
	}

	/* カラム共通スタイル */
	nav.course_nav + section .content_box1,
	nav.course_nav + section .content_img1,
	nav.course_nav + section + section .content_box1,
	nav.course_nav + section + section .content_img1,
	nav.course_nav + section + section + section .content_box1,
	nav.course_nav + section + section + section .content_img1,
	nav.course_nav + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section .content_img1,
	nav.course_nav + section + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section + section .content_img1,
	nav.course_nav + section + section + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section + section + section .content_img1 {
		width: 50%;
		max-width: 50%;
		box-sizing: border-box;
		float: none !important; /* 既存float解除 */
		margin: 0; /* 既存マージン調整 */
	}

	/* 画像ブロックの内側調整 */
	nav.course_nav + section .content_img1 img,
	nav.course_nav + section + section .content_img1 img,
	nav.course_nav + section + section + section .content_img1 img,
	nav.course_nav + section + section + section + section .content_img1 img,
	nav.course_nav + section + section + section + section + section .content_img1 img,
	nav.course_nav + section + section + section + section + section + section .content_img1 img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		object-fit: cover;
		display: block;
	}

	/* テキスト側余白微調整 */
	nav.course_nav + section .content_box1,
	nav.course_nav + section + section .content_box1,
	nav.course_nav + section + section + section .content_box1,
	nav.course_nav + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section + section + section .content_box1 {
		padding: 10px 10px 0 10px;
	}

	/* セクション全体の上下余白最適化（既存 section ルール上書き） */
	nav.course_nav + section,
	nav.course_nav + section + section,
	nav.course_nav + section + section + section,
	nav.course_nav + section + section + section + section,
	nav.course_nav + section + section + section + section + section,
	nav.course_nav + section + section + section + section + section + section {
		padding-top: 30px;
		padding-bottom: 10px;
	}
}

/* モバイルでは従来どおり縦積み（DOM順=テキスト→画像のまま） */
@media (max-width: 900px) {
	nav.course_nav + section .content_box1,
	nav.course_nav + section .content_img1,
	nav.course_nav + section + section .content_box1,
	nav.course_nav + section + section .content_img1,
	nav.course_nav + section + section + section .content_box1,
	nav.course_nav + section + section + section .content_img1,
	nav.course_nav + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section .content_img1,
	nav.course_nav + section + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section + section .content_img1,
	nav.course_nav + section + section + section + section + section + section .content_box1,
	nav.course_nav + section + section + section + section + section + section .content_img1 {
		width: 100%;
		max-width: 100%;
	}
}

/* === Improved generic alternating layout (fallback override) ===
   上の個別列挙で反映されないケース (section 内に .cf ラッパがある 等) を包括的に対応 */
@media (min-width: 901px) {
	/* nav.course_nav 以降の全 section を対象 */
	nav.course_nav ~ section {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 40px;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	/* 内側にラッパ .cf がある場合はそのラッパを2カラムに */
	nav.course_nav ~ section > .cf {
		display: flex;
		flex: 1 1 auto;
		flex-wrap: nowrap;
		gap: 40px;
		width: 100%;
	}
	/* カラム共通 */
	nav.course_nav ~ section .content_box1,
	nav.course_nav ~ section .content_img1 {
		width: 50%;
		max-width: 50%;
		float: none !important;
		margin: 0;
		box-sizing: border-box;
		padding: 10px 10px 0 10px;
	}
	nav.course_nav ~ section .content_img1 img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		display: block;
		object-fit: cover;
	}
	/* 偶数番目セクションで左右反転 (section 自体を反転) */
	nav.course_nav ~ section:nth-of-type(even) { flex-direction: row-reverse; }
	/* ラッパがあるケース (section には1要素しかなく反転が効かない) 用に内側も反転 */
	nav.course_nav ~ section:nth-of-type(even) > .cf { flex-direction: row-reverse; }
}
@media (max-width: 900px) {
	nav.course_nav ~ section,
	nav.course_nav ~ section > .cf { display: block; }
	nav.course_nav ~ section .content_box1,
	nav.course_nav ~ section .content_img1 { width: 100%; max-width: 100%; }
}

/* ====== Polishing / visual refinement for alternating flow sections ====== */
/* 共通ボックス装飾（PC & モバイル両方） */
nav.course_nav ~ section {
	position: relative;
	background: #ffffff;
	border: 1px solid #dbe5eb;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	margin-top: 48px;
	padding: 42px 34px 28px; /* 内側余白を均一化 */
	transition: box-shadow .3s ease, transform .3s ease;
}
nav.course_nav ~ section:first-of-type { margin-top: 12px; }
nav.course_nav ~ section:hover { box-shadow: 0 8px 26px rgba(0,0,0,0.10); transform: translateY(-2px); }
/* 偶数段の淡いグラデ背景 */
nav.course_nav ~ section:nth-of-type(even) { background: linear-gradient(180deg,#ffffff 0%, #f4f8fb 100%); }

/* 上端の細いグラデライン (最初以外) */
nav.course_nav ~ section:not(:first-of-type)::before {
	content: "";
	position: absolute;
	top: -24px; left: 50%; transform: translateX(-50%);
	width: 70%; height: 2px;
	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, #c7d6df 50%, rgba(0,0,0,0) 100%);
}

/* カラム内余白とタイポ */
nav.course_nav ~ section .content_box1,
nav.course_nav ~ section .content_img1 { padding: 0; }
nav.course_nav ~ section .content_box1 { display: flex; flex-direction: column; justify-content: flex-start; line-height: 1.9; }
nav.course_nav ~ section .content_box1 h2 { margin: 0 0 18px; font-size: 1.55rem; line-height: 1.3; color: #1d5f85; }
nav.course_nav ~ section .content_box1 p { margin: 0 0 1.1em; }
nav.course_nav ~ section .content_box1 p:last-child { margin-bottom: 0; }
nav.course_nav ~ section .content_box1 p strong { color: #1d88bd; font-weight: 600; }

/* 画像スタイル */
nav.course_nav ~ section .content_img1 img {
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.10);
	background: #f2f6f9;
}

/* セクション間の過剰余白を抑制 (既存 section ルールより後で上書き) */
body:not(.home) nav.course_nav ~ section { padding-top: 42px; padding-bottom: 24px; }

/* モバイル最適化 */
@media (max-width: 900px) {
	nav.course_nav ~ section { padding: 34px 20px 24px; margin-top: 42px; }
	nav.course_nav ~ section .content_box1 h2 { font-size: 1.35rem; }
	nav.course_nav ~ section .content_img1 img { border-radius: 14px; }
}

@media (max-width: 560px) {
	nav.course_nav ~ section { padding: 30px 16px 22px; }
	nav.course_nav ~ section .content_box1 h2 { font-size: 1.22rem; }
}

/* ===== Remove decorative dots before h3 (ユーザー要望: 点はいらない) ===== */
.content_box1 h3 { padding-left: 0 !important; }
.content_box1 h3::before { content: none !important; }

/* ===== Number badges for flow sections (番号バッジ) ===== */
/* カウンタ初期化 */
nav.course_nav { counter-reset: flowstep; }
/* 対象h2（nav以降のsection内最初のh2）に余白確保 */
nav.course_nav ~ section .content_box1 h2 {
	position: relative;
	padding-left: 72px; /* バッジ分のスペース */
	min-height: 56px;
	display: flex;
	align-items: center;
}
/* 既存の番号画像装飾を無効化 */
nav.course_nav ~ section .content_box1 h2[class^="tit_no"],
nav.course_nav ~ section .content_box1 h2[class*=" tit_no"] {
	background-image: none !important;
	background-size: none !important;
}
/* バッジ描画 */
nav.course_nav ~ section .content_box1 h2::before {
	counter-increment: flowstep;
	content: counter(flowstep);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg,#1d88bd,#49b0df);
	box-shadow: 0 4px 10px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.12);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .5px;
}
/* 偶数行バッジの色変化（軽い変化でアクセント） */
nav.course_nav ~ section:nth-of-type(even) .content_box1 h2::before {
	background: linear-gradient(135deg,#166e94,#2fa2d8);
}
/* モバイル縮小 */
@media (max-width: 600px) {
	nav.course_nav ~ section .content_box1 h2 { padding-left: 60px; min-height: 48px; }
	nav.course_nav ~ section .content_box1 h2::before { width: 46px; height: 46px; font-size: 1.05rem; }
}
@media (max-width: 420px) {
	nav.course_nav ~ section .content_box1 h2 { padding-left: 54px; }
	nav.course_nav ~ section .content_box1 h2::before { width: 42px; height: 42px; font-size: .95rem; }
}

/* ===== Simplify number badge: show only number (番号だけ) ===== */
nav.course_nav ~ section .content_box1 h2 {
	padding-left: 0 !important; /* 余白リセット */
}
nav.course_nav ~ section .content_box1 h2::before {
	width: auto !important;
	height: auto !important;
	position: static !important;
	transform: none !important;
	margin-right: 16px;
	display: inline-block;
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	font-size: 1.65rem !important;
	line-height: 1.05 !important;
	padding: 0 !important;
	color: #1d88bd !important;
	font-weight: 700 !important;
	font-family: inherit;
}
/* 偶数段色分けも不要なので統一 */
nav.course_nav ~ section:nth-of-type(even) .content_box1 h2::before { background: none !important; }

/* ================= Acupuncture Course Page Layout (ac_course) ================= */
section.ac_course { max-width:1200px; margin:60px auto 0; padding:48px 40px 42px; background:#fff; border:1px solid #d7e2ea; border-radius:18px; box-shadow:0 4px 14px rgba(0,0,0,0.06); position:relative; overflow:hidden; }
section.ac_course:first-of-type{ margin-top:30px; }
section.ac_course:hover{ box-shadow:0 8px 26px rgba(0,0,0,0.10); }
/* === Fix: prevent global alternating flex rules from breaking .ac_course layout === */
nav.course_nav ~ section.ac_course { display:block !important; flex-direction:initial !important; align-items:initial !important; gap:0 !important; }
section.ac_course .ac-course-ttl .heading, section.ac_course .ac-course-ttl .price { float:none !important; }

/* h2 タイトル（パターンA: h2 + sibling spans） */
.ac_course > h2.ac-course-ttl { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:flex-start; font-size:1.65rem !important; line-height:1.25; margin:0 0 14px !important; border:none !important; padding:0 !important; color:#1d5f85 !important; background:none; font-weight:700; }
.ac_course > .heading { display:block; font-size:.95rem; color:#495963; line-height:1.55; margin:-2px 0 12px; }
.ac_course > .price { display:inline-block; font-size:.95rem; font-weight:600; color:#0b5578; background:#e8f3f8; padding:6px 14px 5px; border-radius:999px; margin-left:10px; vertical-align:middle; }

/* h2 内包型（パターンB: h2内に .heading .price を含む） */
.ac_course h2.ac-course-ttl .heading { flex:1 1 100%; font-size:.68em; font-weight:500; color:#495963; margin-top:4px; line-height:1.5; }
.ac_course h2.ac-course-ttl .price { margin-left:auto; font-size:.70em; font-weight:600; color:#0b5578; background:#e8f3f8; padding:6px 14px 5px; border-radius:999px; line-height:1; }

/* レイアウト行 */
.ac_course .cf, .ac_course .course-cnt-box { display:flex; flex-wrap:nowrap; align-items:flex-start; gap:42px; margin:0 0 22px; }
.ac_course .course-cnt-left { flex:1 1 auto; min-width:0; float:none; width:auto; }
.ac_course .right { flex:0 0 320px; float:none; width:auto; }
.ac_course .right img { width:100%; max-width:320px; height:auto; border-radius:16px; box-shadow:0 4px 14px rgba(0,0,0,0.12); object-fit:cover; display:block; }

/* テキスト */
.ac_course .course-cnt-left h3 { font-size:1.02rem; font-weight:600; margin:0 0 14px; line-height:1.6; color:#173f53; }
.ac_course .course-cnt-left p { margin:0 0 1.15em; line-height:1.75; }
.ac_course .course-cnt-left p.notice { background:#fff9e6; border-left:4px solid #f4c440; padding:10px 14px; border-radius:4px; font-size:.9rem; }

/* サブブロック */
.ac_course .course-detail { margin:30px 0 14px; padding:24px 26px 10px; background:#f5fafc; border:1px solid #d4e4ec; border-radius:14px; }
.ac_course .course-detail h4 { margin:0 0 14px; font-size:1.02rem; color:#0d5e84; position:relative; padding-left:14px; }
.ac_course .course-detail h4::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:#1d88bd; }
.ac_course .course-detail p.details, .ac_course .course-detail p.lifttup-en { margin:0 0 24px; font-weight:500; line-height:1.6; }
.ac_course .course-detail p.details img, .ac_course .course-detail p.lifttup-en img { vertical-align:middle; margin:0 6px; width:16px; height:auto; }

/* 定義リスト */
.ac_course dl.option { margin:0 0 8px; display:grid; grid-template-columns:200px 1fr; column-gap:18px; row-gap:12px; }
.ac_course dl.option dt { font-weight:600; color:#114d6b; }
.ac_course dl.option dd { margin:0; line-height:1.65; }

/* 区切り付きブロック */
.ac_course .course-cnt-box.top-line { border-top:1px dashed #c5d6de; padding-top:34px; margin-top:34px; }

/* 小見出し (tit_style5) */
.ac_course h2.tit_style5 { font-size:1.25rem; margin:0 0 14px; padding:0; border:none; color:#1d5f85; font-weight:600; }

/* レスポンシブ */
@media (max-width: 1000px) { .ac_course { padding:42px 32px 38px; } .ac_course .cf, .ac_course .course-cnt-box { gap:32px; } .ac_course .right { flex:0 0 280px; } }
@media (max-width: 860px) { .ac_course .cf, .ac_course .course-cnt-box { flex-wrap:wrap; } .ac_course .right { flex:1 1 100%; order:2; max-width:500px; margin:10px auto 0; } .ac_course .course-cnt-left { order:1; } .ac_course dl.option { grid-template-columns:160px 1fr; } }
@media (max-width: 560px) { section.ac_course { padding:36px 20px 32px; margin-top:46px; } .ac_course > h2.ac-course-ttl { font-size:1.45rem !important; } .ac_course h2.ac-course-ttl .heading { font-size:.72em; } .ac_course .course-detail { padding:20px 18px 6px; } .ac_course dl.option { grid-template-columns:1fr; } .ac_course .right { max-width:100%; } }
@media (max-width: 420px) { .ac_course { padding:32px 16px 28px; } .ac_course > h2.ac-course-ttl { font-size:1.35rem !important; } }

/* === Price badge enhancement (better visibility) === */
/* Reserve space on the right side of the title so text doesn't collide with badge */
.ac_course h2.ac-course-ttl { position:relative; padding-right:170px; }
@media (max-width: 680px) { .ac_course h2.ac-course-ttl { padding-right:140px; } }
@media (max-width: 480px) { .ac_course h2.ac-course-ttl { padding-right:120px; } }

/* Unify both patterns (price as sibling or inside h2) */
.ac_course > .price,
.ac_course h2.ac-course-ttl .price {
	position:absolute;
	top:18px;
	right:22px;
	margin:0 !important;
	font-size:clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
	line-height:1.05;
	font-weight:700;
	background:linear-gradient(135deg,#ff6e6e,#ff914d);
	color:#fff !important;
	padding:10px 22px 9px;
	border-radius:40px;
	letter-spacing:.5px;
	box-shadow:0 4px 12px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.12);
	z-index:5;
	display:inline-block;
	white-space:nowrap;
}
/* Remove auto margin from original inline pattern */
.ac_course h2.ac-course-ttl .price { margin-left:0 !important; }

/* Smaller screens adjustments */
@media (max-width: 680px) {
	.ac_course > .price,
	.ac_course h2.ac-course-ttl .price { top:16px; right:18px; padding:8px 18px 7px; }
}
@media (max-width: 480px) {
	.ac_course > .price,
	.ac_course h2.ac-course-ttl .price { top:14px; right:14px; padding:7px 16px 7px; font-size:1rem; }
}
@media (max-width: 380px) {
	.ac_course h2.ac-course-ttl { padding-right:108px; }
	.ac_course > .price,
	.ac_course h2.ac-course-ttl .price { padding:6px 14px 6px; font-size:.95rem; }
}

/* High contrast outline for very light backgrounds (optional subtle) */
.ac_course > .price::after,
.ac_course h2.ac-course-ttl .price::after {
	content:"";
	position:absolute; inset:0; border-radius:inherit;
	box-shadow:0 0 0 2px rgba(255,255,255,0.35) inset;
	pointer-events:none;
}

/* === Price overlap fix: allow long price text to flow without covering heading === */
/* Reset earlier absolute positioning when prices become longer; rely on flex wrapping */
.ac_course h2.ac-course-ttl { padding-right:0 !important; }
.ac_course > .price,
.ac_course h2.ac-course-ttl .price {
		position:static !important;
		top:auto; right:auto;
		margin-left:auto !important; /* push to right on same line */
		display:inline-flex;
		align-items:center;
		white-space:nowrap; /* keep short labels on one line */
}
/* If price text is too long and wraps, ensure clean spacing */
.ac_course h2.ac-course-ttl { display:flex; flex-wrap:wrap; }
.ac_course h2.ac-course-ttl .heading { flex:1 1 100%; order:2; } /* keep sub heading beneath main title */
.ac_course h2.ac-course-ttl .price { order:3; }

/* Narrow: let price go full width under title to avoid cramping */
@media (max-width: 640px) {
	.ac_course > .price,
	.ac_course h2.ac-course-ttl .price { white-space:normal; margin:8px 0 0 !important; }
	.ac_course h2.ac-course-ttl { gap:6px 12px; }
}
@media (max-width: 480px) {
	.ac_course h2.ac-course-ttl .price { width:100%; justify-content:flex-start; }
}

/* ================= Pricing Page Scoped Styles ================= */
.pricing-page { max-width:1200px; margin:50px auto 70px; padding:0 24px; }
.pricing-page section { background:#fff; border:1px solid #dbe3e9; border-radius:18px; padding:42px 38px 34px; box-shadow:0 4px 14px rgba(0,0,0,0.05); margin-bottom:54px; }
.pricing-page section:last-of-type { margin-bottom:20px; }
.pricing-page h2.tit_style2 { margin:0 0 28px; font-size:2rem; font-weight:700; color:#1d5f85; position:relative; padding-left:14px; }
.pricing-page h2.tit_style2::before { content:""; position:absolute; left:0; top:.55em; width:6px; height:60%; background:linear-gradient(#1d88bd,#49b0df); border-radius:4px; }
.pricing-page h3 { margin:0 0 18px; font-size:1.15rem; font-weight:600; color:#17475f; letter-spacing:.5px; }

/* Tables */
.pricing-page table.price { width:100%; border-collapse:separate; border-spacing:0; background:#fff; font-size:.95rem; line-height:1.55; }
.pricing-page table.price th, .pricing-page table.price td { padding:14px 16px 12px; vertical-align:top; position:relative; }
.pricing-page table.price th { background:#f1f7fa; font-weight:600; color:#114d6b; width:40%; border-right:1px solid #d7e2ea; }
.pricing-page table.price td { background:#ffffff; }
.pricing-page table.price tr:nth-child(even) td { background:#f9fcfe; }
.pricing-page table.price tr { border-bottom:1px solid #e2edf3; }
.pricing-page table.price tr:last-child { border-bottom:none; }
.pricing-page table.price th[rowspan] { text-align:left; }
.pricing-page table.price td.price01 { font-weight:500; color:#0d5e84; }
.pricing-page table.price td.price01 strong { font-weight:700; }
.pricing-page table.price td.txt_center { text-align:center; font-weight:600; }
.pricing-page table.price caption { caption-side: top; text-align:left; font-weight:700; font-size:1.05rem; color:#173f53; padding:0 0 10px; }
.pricing-page .price-table-wrap { position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 28px; }
.pricing-page .price-table-wrap::-webkit-scrollbar { height:8px; }
.pricing-page .price-table-wrap::-webkit-scrollbar-track { background:transparent; }
.pricing-page .price-table-wrap::-webkit-scrollbar-thumb { background:#c5d6de; border-radius:4px; }
.pricing-page .price-table-wrap::after { content:""; position:absolute; top:0; right:0; bottom:0; width:30px; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0),#fff); }

/* Row hover for readability */
/* Simplified hover: remove full-row repaint (confusing for multi-line headers) */
.pricing-page table.price tbody tr:hover th,
.pricing-page table.price tbody tr:hover td { background:inherit !important; }
/* Subtle emphasis only on numeric price cells */
.pricing-page table.price tbody tr:hover td.price01 { background:#fef7f3 !important; color:#c0502c; font-weight:600; }

/* Align numeric prices right for quick scan, keep text centered variant */
.pricing-page table.price td.price01 { text-align:right; }
.pricing-page table.price td.price01:has(> span.note) { text-align:left; }
.pricing-page table.price td.txt_center { text-align:center !important; }

/* Override: ensure course pricing table (right column) uses right alignment like others */
.pricing-page .content_box2.right table.price td { text-align:right; }
.pricing-page .content_box2.right table.price th { text-align:left; }
/* If any legacy class lingers */
.pricing-page .content_box2.right table.price td.txt_center { text-align:right !important; }

/* Multi-line th spacing */
.pricing-page table.price th { white-space:pre-line; }
.pricing-page table.price th .th-note { display:block; font-weight:400; font-size:.78em; line-height:1.45; margin-top:4px; color:#446879; white-space:normal; }

/* Emphasis for variable notes / asterisks */
.pricing-page table.price th br { display:block; margin-bottom:4px; }
.pricing-page table.price th, .pricing-page table.price td { word-break:break-word; }

/* Compact notice paragraph */
.pricing-page p.notice { margin:14px 0 0; background:#fff9e6; border-left:4px solid #f4c440; padding:10px 14px; border-radius:4px; font-size:.85rem; line-height:1.5; }
.pricing-page p.notice a { color:#0b6aa8; text-decoration:underline; text-underline-offset:3px; }
.pricing-page p.notice a:hover { color:#004c75; }

/* Two-column inner layout (legacy .content_box2 left/right) */
.pricing-page .cf { display:flex; flex-wrap:wrap; gap:40px; }
.pricing-page .content_box2.left { flex:1 1 640px; min-width:320px; }
.pricing-page .content_box2.right { flex:0 1 420px; min-width:280px; }

/* Course pricing (right column) – SIMPLE: two-column table with fixed price col */
.pricing-page #acupuncture-pricing .content_box2.right table.price { table-layout:fixed; width:100%; }
.pricing-page #acupuncture-pricing .content_box2.right table.price th { width:calc(100% - 140px); text-align:left; }
.pricing-page #acupuncture-pricing .content_box2.right table.price td { width:140px; text-align:right; white-space:nowrap; }
@media (max-width:640px){
	.pricing-page #acupuncture-pricing .content_box2.right table.price th { width:calc(100% - 120px); }
	.pricing-page #acupuncture-pricing .content_box2.right table.price td { width:120px; }
}

/* Table subtle rounding */
.pricing-page table.price tbody tr:first-child th:first-child { border-top-left-radius:10px; }
.pricing-page table.price tbody tr:first-child td:last-child { border-top-right-radius:10px; }
.pricing-page table.price tbody tr:last-child th:first-child { border-bottom-left-radius:10px; }
.pricing-page table.price tbody tr:last-child td:last-child { border-bottom-right-radius:10px; }

/* Scroll aid on very narrow screens */
@media (max-width: 640px) {
	.pricing-page section { padding:34px 22px 30px; }
	.pricing-page h2.tit_style2 { font-size:1.55rem; }
	.pricing-page table.price th, .pricing-page table.price td { padding:10px 12px 9px; }
	.pricing-page .cf { gap:32px; }
	.pricing-page .content_box2.left, .pricing-page .content_box2.right { flex:1 1 100%; }
	.pricing-page table.price { font-size:.9rem; }
}
@media (max-width: 420px) {
	.pricing-page section { padding:30px 18px 26px; }
	.pricing-page h2.tit_style2 { font-size:1.4rem; }
	.pricing-page table.price { font-size:.86rem; }
}

/* Highlight rows with ranges */
.pricing-page table.price td:has(> span.range), .pricing-page table.price td:has(> .range) { font-weight:600; }