@charset "utf-8";
/*
	レスポンシブ対応 追加スタイル
	デスクトップ	: 1024px以上（既存 style.css / style2.css の見た目を維持）
	タブレット	: 768px〜1023px
	スマートフォン	: 767px以下
	既存の style.css / style2.css は変更せず、本ファイルで上書きする。
*/

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* ===== ハンバーガーメニュー／スマホ用ナビ（デフォルトは非表示） ===== */
.nav-toggle {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: #FFFFFF;
	border: 1px solid #DADBDB;
	border-radius: 4px;
	padding: 10px 14px;
	min-height: 44px;
	min-width: 44px;
	cursor: pointer;
	font-size: 11px;
	line-height: 1;
}
.nav-toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: #333333;
}
.nav-toggle-label { margin: 2px 0 0 0; }

.mobile-nav {
	display: none;
	position: fixed;
	top: 62px;
	right: 10px;
	width: 200px;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	background: #FFFFFF;
	border: 1px solid #DADBDB;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	z-index: 999;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { border-bottom: 1px solid #DADBDB; }
.mobile-nav li a {
	display: block;
	padding: 12px 10px;
	min-height: 44px;
	box-sizing: border-box;
	color: #333333;
	text-decoration: none;
	font-size: 15px;
}
.mobile-nav li.is-current a { font-weight: bold; color: #8EC42C; }
.mobile-nav.is-open { display: block; }

/* ===== タブレット・スマホ共通（1023px以下） ===== */
@media (max-width: 1023px) {

	#outline { box-sizing: border-box; width: 100%; max-width: 950px; margin: 0 auto; padding: 0 15px; }

	#header {
		width: 100%; height: auto; float: none; overflow: visible; padding: 10px 0;
		display: flex; flex-wrap: wrap; align-items: center;
	}
	#logo { order: 1; float: none; width: 55px; height: 55px; margin: 0 10px 0 0; }
	#logo img { width: 55px; height: 55px; }
	#name { order: 2; float: none; margin: 0; }
	#header p { order: 3; flex: 0 0 100%; clear: none; margin: 8px 0 0 0 !important; font-size: 12px; }
	#tel { order: 4; display: none; }

	#menu { display: none; }
	.nav-toggle {
		display: flex;
		position: fixed;
		top: 10px;
		right: 10px;
		z-index: 1000;
	}

	#left { width: 100%; padding: 0; float: none; }
	#right { width: 100%; padding: 50px 0 0 0; float: none; }
	#footer { width: 100%; float: none; box-sizing: border-box; }

	/* 施術の流れ：▼矢印が内容の途中に出るのを防ぐ（float画像を含めて高さを確保） */
	.flowstep, .flowstep_no3 { overflow: hidden; }

	/* サイドバー：院長イラスト／子育て応援割引バナーをセンター揃え */
	#right img[src$="boss_illust.png"] { display: block; margin: 0 auto; }
	#boss_msg a[href*="price.php#price04"] { display: block; text-align: center; }

	/* サイドバー：アクセスマップボタンをセンター揃え */
	.accessmap { text-align: center; }

	/* カレンダー：横幅いっぱいに表示（見出しは背景画像と同色＋上角丸で横に伸ばす） */
	#right h4.calhead {
		width: 100%;
		box-sizing: content-box;
		background: #1d8b3b;
		border-radius: 5px 5px 0 0;
	}
	table.calender { width: 100%; }

	/* 各ページの見出し・固定幅ブロックを可変化 */
	#left h2, #left h3, #left h4,
	#left.case h2, #left.case h3, #left.case h4,
	#left.access h2, #left.staff h2, #left.faq h2, #left.faq h3,
	#left.flow h2, #left.flow h3,
	#left.price h2, #left.price h3, #left.price h4,
	#left.link h2, #left.news h2, #left.index h3,
	h3.sepl, p.sepr {
		width: 100% !important;
		box-sizing: border-box;
	}

	#index_cnt, #index_cnt .left, #index_cnt .right,
	#left.index dl, #left.news dl,
	#top_clip dl, #news_clip dl,
	div#rinen_box,
	.flowstep, .flowstep_no3,
	.shiseizu,
	div.case_box001 p, #left.case div.case_box001 dl,
	div.access_box01, div.access_box01 .l, div.access_box01 .r, .gmap_box,
	#left.staff dl.name, dl.prof dd,
	p.staff_msg2,
	div#link ul li,
	table.price, p.price, dl#price_time, dl#price_time dd,
	.kidscorner dl {
		width: 100% !important;
		float: none !important;
		box-sizing: border-box;
	}

	/* 横幅の大きい表は横スクロールで崩れを防止 */
	table.price, table.price_table, #p_table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 症例タブ（画像ボタン）は横スクロール化 */
	ul#tab {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		float: none;
	}
	ul#tab li { flex: 0 0 auto; }

	/* タップしやすいよう主要リンクの最小サイズを確保 */
	div#link ul li a, div#link2 ul li a,
	ul.caselist a, #left.faq ul li a,
	p.sepr a {
		display: inline-block;
		min-height: 44px;
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ===== スマートフォン（767px以下）の追加調整 ===== */
@media (max-width: 767px) {

	#outline { padding: 0 12px; }

	body { font-size: 14px; }

	div.access_box01 .l, div.access_box01 .r { width: 100%; }
	div.access_box01 table td { width: 50%; }

	dl.prof dt, dl.prof dd { float: none; width: 100%; }

	.staffpic { float: none; margin: 0 0 10px 0; }

	table.price th, table.price td,
	table.price_table th, table.price_table td {
		padding: 8px;
		font-size: 14px;
	}

	.accessmap, div[style*="margin-top:10px"] { margin-top: 20px !important; }
}