@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ（福岡みなと在宅医療クリニック）
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
** 寸法はデザイン案（01_作成したデザイン案、幅1400px）の実測。色・書体は .claude/rules/design.md
** 独自クラスの接頭辞は mn-
************************************/

/* ===== 色・書体の変数 ===== */
:root {
	--mn-main: #2aafc2;        /* メニューの帯・ボタン・お問い合わせの帯 */
	--mn-main-dark: #178a9c;   /* 白地・薄い地に置く見出しやリンク（帯の色のままだと薄くて読みにくいため少し濃く） */
	--mn-main-light: #aee7ee;  /* ページ見出しの帯 */
	--mn-pale: #e5f0f6;        /* 理念などの薄い背景 */
	--mn-footer-bg: #e3eaf2;   /* フッター */
	--mn-pink: #ef646e;        /* 研修施設の枠・強調 */
	--mn-pink-bg: #fef8fa;
	--mn-pink-line: #f8e2e5;
	--mn-text: #222222;
	--mn-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--mn-font-round: "M PLUS Rounded 1c", var(--mn-font); /* 18px以上の見出し・電話番号だけに使う */
	--mn-wrap: 1140px;         /* メニューの帯の幅（実測1141px） */
}

/* ===== 全体 ===== */
body {
	font-family: var(--mn-font);
	color: var(--mn-text);
	background: #fff;
}
/* 太字は600まで（全体の決まり。700はMacで見たとき品がないため） */
b, strong, th, h1, h2, h3, h4, h5, h6 { font-weight: 600; }
/* Cocoonの記事の見出し（.article h2 など）は詳細度が高く700のままになるので、同じ書き方で上書きする */
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 { font-weight: 600; }

/* 本文は16px以上（全体の決まり。Cocoonは狭い画面で本文を小さくし、表を0.8倍にするため固定する） */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content table th,
.entry-content table td {
	font-size: 16px;
}
.entry-content { line-height: 1.9; }

.mn-nowrap { white-space: nowrap; }
/* 電話番号のリンク（タップで発信）は下線を付けない（本人の指示） */
a[href^="tel:"] { text-decoration: none; }
/* 画面には出さず、読み上げ・検索エンジン向けに残す */
.mn-sr {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* サイトの幅：メニューの帯に合わせる */
.wrap { width: var(--mn-wrap); max-width: 100%; }


/* ===== ヘッダー ===== */
/* 実測：ヘッダーの高さ120px、ロゴ幅281px（左端x222）、右端のSNSがx1187 → 中身の幅は約965px */
.header-container { background: #fff; }
.header { background: #fff; }
.hlt-center-logo .header-in {
	display: flex;
	flex-direction: row; /* Cocoonの「センターロゴ」は縦並び（column）なので、横並びに上書きする */
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	max-width: 990px;
	min-height: 120px;
	margin: 0 auto;
	padding: 0 12px;
	text-align: left;
}
/* Cocoonの回り込み解除（.cf の ::before/::after）が横並びの3つ目の項目として数えられ、電話・SNSが右端まで行かないため消す */
.hlt-center-logo .header-in::before,
.hlt-center-logo .header-in::after { display: none; }
.header .logo-header {
	padding: 0;
	margin: 0;
	text-align: left;
}
.header .site-logo-image {
	width: 281px;
	height: auto;
	max-height: none;
	vertical-align: middle;
}

.mn-header-actions {
	display: flex;
	align-items: center;
	gap: 28px;
}
.mn-header-tel { text-align: right; }
.mn-header-tel__num {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mn-font-round);
	font-size: 34px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.04em;
	color: var(--mn-main);
	text-decoration: none;
	/* 下の受付時間は「）」の右が空いて見えるので、番号を少し左へ寄せて右端をそろえて見せる（本人の指示） */
	margin-right: 8px;
}
.mn-header-tel__num:hover { color: var(--mn-main-dark); }
.mn-header-tel__num .fas { font-size: 0.75em; transform: rotate(-25deg); }
/* ヘッダーの小さい添え書き。本文の列ではないので14px（デザイン案は約13px） */
p.mn-header-tel__hours {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mn-main-dark);
}

.mn-header-sns { display: flex; gap: 12px; }
.mn-header-sns a,
.mn-footer-info__sns a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	border-radius: 4px;
	background: var(--mn-main);
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	transition: background-color .2s;
}
.mn-header-sns a:hover,
.mn-footer-info__sns a:hover { background: var(--mn-main-dark); color: #fff; }


/* ===== メニュー（PC） ===== */
/* 実測：帯の高さ60px、区切り線は白1px（項目の左右）、文字16px */
/* 帯の色は画面幅いっぱいに（デザイン案どおり）。中の項目は1140pxの枠の中で中央に */
/* #navi はCocoonの幅の枠（1140px）の中にあるので、帯そのものを画面幅いっぱいに広げる（本人の指示：横100％） */
#navi {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background-color: var(--mn-main);
}
/* PC（1024px以上）だけに効かせる。スマホではCocoonがPC用メニューを隠し、スマホ用メニューに切り替えるため */
@media screen and (min-width: 1023.02px) {
/* 1行に収める（「医療・介護関係者の方へ」がデザイン案より1文字長いため、項目の左右の余白を20pxに詰めた） */
#navi .navi-in > ul { display: flex; justify-content: center; flex-wrap: nowrap; }
#navi .navi-in > ul > li {
	position: relative;
	width: auto;
	flex: 0 0 auto;
	height: 60px;
}
#navi .navi-in > ul > li > a {
	height: 60px;
	padding: 0 clamp(12px, 1.4vw, 20px); /* 画面幅1024pxでも1行に収まるよう、狭い画面では余白を縮める */
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.04em;
	transition: background-color .2s;
}
/* 区切り線：項目の左（最後の項目は右にも）。帯の上下に少し隙間を空ける（デザイン案どおり）。1pxの線はborderで描く */
#navi .navi-in > ul > li::before,
#navi .navi-in > ul > li:last-child::after {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 0;
	border-left: 1px solid rgba(255,255,255,.85);
}
#navi .navi-in > ul > li:last-child::after { left: auto; right: 0; }
#navi .navi-in > ul > li > a:hover,
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current-menu-parent > a,
#navi .navi-in > ul > li.current-page-ancestor > a {
	background: rgba(255,255,255,.18);
}
/* 子の項目（院長略歴など）：マウスを乗せると下に開く一覧 */
#navi .navi-in > ul .sub-menu {
	background: var(--mn-main-dark);
	width: max-content; /* Cocoonの初期値は決まった幅で、「在宅緩和ケア・緩和医療」が切れるため、中身に合わせる */
	min-width: 100%;
}
#navi .navi-in > ul .sub-menu li { width: 100%; }
#navi .navi-in > ul .sub-menu a {
	padding: 14px 20px;
	font-size: 16px;
	color: #fff;
	white-space: nowrap;
}
#navi .navi-in > ul .sub-menu a:hover { background: rgba(255,255,255,.15); }
} /* PC（1024px以上）ここまで */


/* ===== スマホ用バー：ロゴは左の残りの幅の中央、メニューボタンは右端 ===== */
/* 全プロジェクト共通の形（スキル cocoon-mobile-menu）。くまの整形外科で確定 */
@media screen and (max-width: 1023px) {
	.mobile-header-menu-buttons .logo-menu-button { flex: 1; }
	.mobile-header-menu-buttons .navi-menu-button { order: 2; } /* HTMLの順番は変えず並び順だけ入れ替える */
	.mobile-header-menu-buttons .logo-menu-button .menu-button-in {
		display: flex; align-items: center; justify-content: center; height: 100%;
	}
	.mobile-header-menu-buttons .logo-menu-button .site-logo-image { width: auto; max-width: 100%; height: 32px; }
	.mobile-header-menu-buttons .navi-menu-button .menu-icon { color: var(--mn-main-dark); }
	/* 上のバーはロゴとメニューボタンだけにする（Cocoonの初期のボタンにある「検索」は使わない） */
	.mobile-header-menu-buttons .search-menu-button { display: none; }
}
@media screen and (max-width: 480px) {
	.mobile-header-menu-buttons .logo-menu-button .site-logo-image { height: 30px; }
}

/* ===== 画面下の固定メニュー：ホーム｜電話する｜お問い合わせ｜↑ ===== */
/* 白文字が読みにくくならないよう、ボタンの色はどれも少し暗めにしてある */
@media screen and (max-width: 1023px) {
	.mobile-footer-menu-buttons { height: 50px; background: #444; }
	/* Cocoonの .mobile-menu-buttons .menu-button > a（display:block・黒文字）に勝つよう、liとaのクラスまで書く */
	.mobile-footer-menu-buttons .menu-button > a.menu-button-in {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 5px; height: 100%; color: #fff;
	}
	.mobile-footer-menu-buttons .menu-button > a.menu-button-in:hover { color: #fff; }
	.mobile-footer-menu-buttons .menu-icon { width: auto; font-size: 18px; line-height: 1; }
	.mobile-footer-menu-buttons .menu-caption {
		font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; opacity: 1; /* Cocoonの初期値は9px・薄字 */
	}
	.mobile-footer-menu-buttons > li:nth-child(1) { background: var(--mn-main-dark); } /* ホーム */
	.mobile-footer-menu-buttons > li:nth-child(2) { background: #d9535d; }            /* 電話する（研修施設の枠のピンクを暗めに） */
	.mobile-footer-menu-buttons > li:nth-child(3) { background: #1f7f99; }            /* お問い合わせ */
	.mobile-footer-menu-buttons > li:nth-child(1),
	.mobile-footer-menu-buttons > li.top-menu-button { flex: 0 0 56px; }
	.mobile-footer-menu-buttons > li.top-menu-button { background: #444; }
	.mobile-footer-menu-buttons > li + li { border-left: 1px solid #fff; }
	/* ホームの文字・「ページの先頭へ」は読み上げ用に残し、見た目だけ隠す */
	.mobile-footer-menu-buttons > li:nth-child(1) .menu-caption,
	.mobile-footer-menu-buttons .top-menu-caption {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
	}
}

/* ===== メニューボタンで開く一覧（右から出す） ===== */
@media screen and (max-width: 1023px) {
	/* 開いたときの translateX(0) はCocoonの #navi-menu-input:checked ~ #navi-menu-content がそのまま効く */
	.navi-menu-content { left: auto; right: 0; transform: translateX(105%); background: #fff; }
	.navi-menu-content .menu-close-button {
		display: flex; align-items: center; justify-content: flex-end; height: 60px; padding: 0 20px;
		color: var(--mn-main-dark); font-size: 26px; border-bottom: 2px solid var(--mn-main);
	}
	.navi-menu-content .menu-drawer { padding: 0 0 140px; } /* 下の固定メニューに隠れないように */
	.navi-menu-content .menu-drawer > li { border-bottom: 1px solid #dfe8ee; }
	.navi-menu-content .menu-drawer a {
		position: relative; display: block; padding: 16px 48px 16px 20px;
		color: var(--mn-text); font-size: 16px; font-weight: 500; line-height: 1.5;
	}
	.navi-menu-content .menu-drawer a::after { /* 右端の「›」（Font Awesome 5） */
		content: "\f054"; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
		color: var(--mn-main); font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px;
	}
	.navi-menu-content .menu-drawer .current-menu-item > a { color: var(--mn-main-dark); }
	.navi-menu-content .menu-drawer .sub-menu { padding: 0; background: #eef5f8; }
	.navi-menu-content .menu-drawer .sub-menu li + li { border-top: 1px solid #fff; }
	.navi-menu-content .menu-drawer .sub-menu a { padding: 14px 48px 14px 36px; font-size: 16px; }
	.navi-menu-content .menu-drawer .sub-menu a::before {
		content: ""; position: absolute; top: 50%; left: 20px; width: 8px; border-top: 1px solid var(--mn-main);
	}
	/* 開閉する親（javascript.jsで mn-acc を付ける） */
	.navi-menu-content .menu-drawer li.mn-acc > .sub-menu { display: none; border-left: 4px solid var(--mn-main); }
	.navi-menu-content .menu-drawer li.mn-acc.is-open > .sub-menu { display: block; }
	.navi-menu-content .menu-drawer li.mn-acc > a::after { content: "\f067"; } /* ＋ */
	.navi-menu-content .menu-drawer li.mn-acc.is-open > a { background: var(--mn-main-dark); color: #fff; }
	.navi-menu-content .menu-drawer li.mn-acc.is-open > a::after { content: "\f068"; color: #fff; } /* － */
	.navi-menu-content .menu-drawer .sub-menu li.mn-acc__all a { color: var(--mn-main-dark); }
}


/* ===== ページ見出しの帯（トップ以外の固定ページ） ===== */
/* 実測：帯の高さ約225px、背景 #AEE7EE、右側に写真を薄く重ねる（写真は --mn-pagehead-img で差し替え） */
.mn-pagehead {
	position: relative;
	width: 100vw; /* ヘッダーの枠（1140px）の中に出るので、画面幅いっぱいに広げる */
	margin-left: calc(50% - 50vw);
	background: var(--mn-main-light);
	overflow: hidden;
}
/* 右半分に写真を置き、左に向かって帯の色に溶けこませる（デザイン案どおり） */
.mn-pagehead.has-image::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 55%;
	background: var(--mn-pagehead-img) center 30% / cover no-repeat;
	opacity: .55;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
	mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.mn-pagehead__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 225px;
	padding: 24px 16px;
	box-sizing: border-box;
}
.mn-pagehead .mn-pagehead__title {
	margin: 0;
	padding: 0;
	font-family: var(--mn-font-round);
	font-size: 36px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--mn-main-dark);
	text-align: center;
	background: none;
	border: none;
}

/* 固定ページ：1列（サイドバーなし）。本文はページ見出しの直後から */
.page .content { margin-top: 0; }
.page .main {
	padding: 0;
	border: none;
	background: none;
}
.page .article { margin-bottom: 0; }
.page .date-tags,
.page .article-header .eye-catch-wrap { display: none; }
.page .breadcrumb { margin: 16px auto 0; }


/* ===== お知らせ・ブログ（記事と一覧） ===== */
/* 帯にカテゴリー名を出すので、一覧の上のカテゴリー名（Cocoonの見出し）は画面からは隠す（読み上げには残す） */
.archive .archive-title {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* 一覧：アイキャッチ画像が無い記事ばかりなので、「NO IMAGE」の箱を出さず、日付・タイトル・抜粋だけにする */
.entry-card-wrap .entry-card-thumb { display: none; }
.entry-card-wrap .entry-card-content { margin-left: 0; }
.entry-card-wrap {
	padding: 20px 4px;
	border-bottom: 1px solid #d5e3e8;
	margin-bottom: 0;
}
.entry-card-wrap:hover { background: #f6fafb; }
.entry-card-title { font-size: 18px; font-weight: 600; color: var(--mn-text); line-height: 1.6; }
.entry-card-snippet { font-size: 16px; color: #555; line-height: 1.8; }
.entry-card-meta { font-size: 14px; color: var(--mn-main-dark); }
.entry-card .entry-card-meta { text-align: left; }
/* 記事のタイトル */
.single .entry-title {
	font-family: var(--mn-font-round);
	font-size: 26px;
	font-weight: 500;
	color: var(--mn-main-dark);
	line-height: 1.5;
}
.single .date-tags { font-size: 14px; color: var(--mn-main-dark); }
/* 文字の大きさ・太さの決まり（本文の列は16px以上・太字は600まで）にCocoonの初期値を合わせる */
.entry-card-meta .entry-date,
.entry-card-meta .entry-update,
.post-date, .post-update { font-size: 14px; } /* 日付は14px（くまの整形外科の例外と同じ扱い） */
.cat-label, .cat-link { font-size: 14px; padding: 2px 8px; }
/* Cocoonの札（.entry-card .cat-label・.entry-categories .entry-category）は詳細度が高いので、同じ書き方で上書きする */
.entry-card .cat-label,
.related-entry-card .cat-label,
.entry-categories-tags .entry-category,
.entry-categories .entry-category,
.e-card-categorys .entry-category { font-size: 14px; line-height: 1.5; padding: 2px 8px; }
.prev-post-title, .next-post-title,
.related-entry-card-snippet { font-size: 16px; line-height: 1.7; }
.related-entry-card-title { font-weight: 600; }
/* 今のサイトから移した記事の中の太字（style="font-weight: bold" など）も600に */
.entry-content [style*="font-weight: bold"],
.entry-content [style*="font-weight:bold"],
.entry-content [style*="font-weight: 700"],
.entry-content [style*="font-weight:700"] { font-weight: 600 !important; }

/* ご利用例の記事（今のサイトから移したもの）：概要の表・医師からのメッセージ（jireiTbl）と、会話の囲み枠（well3） */
.entry-content table.jireiTbl { width: 100%; margin: 0 0 32px; border-collapse: collapse; border: 1px solid #c9d6db; }
.entry-content table.jireiTbl th,
.entry-content table.jireiTbl td {
	padding: 12px 16px;
	border: 1px solid #c9d6db;
	white-space: normal;
	line-height: 1.7;
	text-align: left;
	vertical-align: middle;
}
.entry-content table.jireiTbl th { width: 11em; background: var(--mn-pale); color: var(--mn-main-dark); font-weight: 600; }
.entry-content table.jireiTbl tr { background: #fff; }
/* 医師からのメッセージ（見出しが1行・本文が1行の表） */
.entry-content table.jireiTbl th:only-child { width: auto; background: var(--mn-main); color: #fff; text-align: center; font-size: 18px; }
.entry-content table.jireiTbl td.jireiMsg { padding: 20px 24px; background: #fff; line-height: 1.9; }
.entry-content .scrollable-table:has(.jireiTbl) { margin: 0 0 32px; overflow: visible; }
.entry-content .scrollable-table:has(.jireiTbl) table.jireiTbl { margin: 0; }
.entry-content .scrollable-table:has(.jireiTbl) .scroll-hint-icon-wrap { display: none; }
.entry-content p.well3 {
	margin: 20px 0;
	padding: 18px 22px;
	border: 1px solid #dbe4e8;
	border-left: 4px solid var(--mn-main);
	border-radius: 6px;
	background: #f7fafb;
	line-height: 1.9;
}
/* 記事の上のイラスト（アイキャッチ）は大きくなりすぎないように */
.single .eye-catch-wrap .eye-catch img { max-width: 640px; margin: 0 auto; display: block; }
@media screen and (max-width: 768px) {
	.entry-content table.jireiTbl th,
	.entry-content table.jireiTbl td { display: block; width: auto; }
}

/* 前の記事・次の記事：線で囲んだボタンにし、「前の記事」「次の記事」の見出しを付ける（2026-10-11 本人の指示）。
   アイキャッチ画像が無い記事ばかりなので「NO IMAGE」の箱は出さない */
.pager-post-navi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 40px 0;
}
.pager-post-navi a.prev-post,
.pager-post-navi a.next-post {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 96px;
	margin: 0;
	padding: 16px 20px 16px 48px;
	border: 1px solid var(--mn-main);
	border-radius: 8px;
	background: #fff;
	text-decoration: none;
	transition: background-color .2s;
}
.pager-post-navi a.next-post {
	grid-column: 2;
	padding: 16px 48px 16px 20px;
	text-align: right;
}
.pager-post-navi a.prev-post:hover,
.pager-post-navi a.next-post:hover { background: #eef8fa; }
.pager-post-navi .prev-post-thumb,
.pager-post-navi .next-post-thumb { display: none; }
.pager-post-navi .iconfont {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	color: var(--mn-main);
	font-size: 18px;
}
.pager-post-navi .prev-post .iconfont { left: 18px; }
.pager-post-navi .next-post .iconfont { right: 18px; }
/* Cocoonの .pager-post-navi a.a-wrap::before（半透明の色）・.iconfont に勝つよう、a.a-wrap まで書く */
.pager-post-navi a.prev-post.a-wrap { align-items: flex-start; }
.pager-post-navi a.next-post.a-wrap { align-items: flex-end; }
.pager-post-navi a.prev-post.a-wrap,
.pager-post-navi a.prev-post.a-wrap .prev-post-title { text-align: left; }
.pager-post-navi a.next-post.a-wrap,
.pager-post-navi a.next-post.a-wrap .next-post-title { text-align: right; }
.pager-post-navi a.a-wrap .iconfont { color: var(--mn-main); opacity: 1; }
.pager-post-navi a.prev-post.a-wrap::before,
.pager-post-navi a.next-post.a-wrap::before {
	display: block;
	margin-bottom: 4px;
	color: var(--mn-main-dark);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
}
.pager-post-navi a.prev-post.a-wrap::before { content: "前の記事"; }
.pager-post-navi a.next-post.a-wrap::before { content: "次の記事"; }
.pager-post-navi a.a-wrap .prev-post-title,
.pager-post-navi a.a-wrap .next-post-title {
	margin: 0;
	padding: 0;
	color: var(--mn-text);
	font-size: 16px;
	line-height: 1.6;
}
@media screen and (max-width: 768px) {
	.pager-post-navi { grid-template-columns: 1fr; gap: 12px; }
	.pager-post-navi a.next-post { grid-column: auto; }
}

/* 本文＋サイドバーの幅：Cocoonの初期値（本文860px＋サイドバー376px）はサイトの幅1140pxを超えて、サイドバーが下に回り込むため */
@media screen and (min-width: 1023.02px) {
	.content-in.wrap { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 40px; }
	.content-in .main { flex: 1 1 auto; width: auto; min-width: 0; }
	.content-in .sidebar { flex: 0 0 320px; width: 320px; }
}

/* サイドバー（記事・一覧だけ） */
.sidebar h3 {
	margin: 0 0 12px;
	padding: 10px 14px;
	border: none;
	border-radius: 4px;
	background: var(--mn-main);
	color: #fff;
	font-size: 17px;
	font-weight: 500;
}
.sidebar .widget { margin-bottom: 32px; }
.sidebar .widget ul li a { font-size: 16px; color: var(--mn-text); }
.sidebar .widget ul li a:hover { color: var(--mn-main-dark); }


/* ===== フッター ===== */
/* Cocoon標準のフッター（中身）は使わない。自作のフッター（functions.php mn_footer）を出す */
#footer { display: none; }
/* フッターはCocoonの幅の枠（.wrap）の中に出るので、画面幅いっぱいに広げる */
.mn-footer {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	font-size: 16px;
}
/* 100vwはスクロールバーの幅を含むため、横に少しはみ出す分を隠す */
html, body { overflow-x: clip; }

/* -- お問い合わせの帯 -- */
.mn-contact {
	position: relative;
	background: var(--mn-main);
	color: #fff;
	text-align: center;
	margin-top: 80px;
}
.mn-contact__inner {
	padding: 56px 16px 24px;
}
h2.mn-contact__title {
	margin: 0 0 24px;
	padding: 0;
	font-family: var(--mn-font-round);
	font-size: 28px;
	font-weight: 500;
	color: #fff;
	background: none;
	border: none;
}
p.mn-contact__lead {
	margin: 0 0 28px;
	font-size: 18px;
	font-weight: 500;
}
.mn-contact__btns {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px 40px;
}
.mn-contact__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 380px;
	max-width: 100%;
	height: 60px;
	box-sizing: border-box;
	border-radius: 30px;
	background: #fff;
	color: var(--mn-main-dark);
	text-decoration: none;
	transition: opacity .2s;
}
.mn-contact__btn:hover { opacity: .85; color: var(--mn-main-dark); }
.mn-contact__btn--tel {
	font-family: var(--mn-font-round);
	font-size: 34px;
	font-weight: 500;
	letter-spacing: 0.04em;
}
.mn-contact__btn--tel .fas { font-size: 0.7em; transform: rotate(-25deg); }
.mn-contact__btn--form {
	font-size: 22px;
	font-weight: 500;
}
p.mn-contact__hours {
	margin: 28px 0 0;
	font-size: 22px; /* 本人の指示で一回り大きく（18→22px） */
	line-height: 2; /* 本人の指示で少し広く（1.7→2） */
}
/* 街のイラスト：帯の下端に置く（白い線の透過PNG、幅1400px） */
.mn-contact__town {
	height: 55px;
	background: url(/wp-content/uploads/2026/10/town.png) center bottom / auto 55px repeat-x;
}

/* -- クリニック情報 -- */
.mn-footer-info {
	background: var(--mn-footer-bg);
	color: var(--mn-main-dark);
	padding: 64px 16px 28px;
}
.mn-footer-info__inner {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	max-width: 960px;
	margin: 0 auto;
}
.mn-footer-info p { margin: 0; }
.mn-footer-info a { color: var(--mn-main-dark); }
.mn-footer-info__logo a { display: inline-block; text-decoration: none; }
.mn-footer-info__type {
	display: block;
	margin: 0 0 2px 60px; /* ロゴの家のマークの右に添える（デザイン案どおり） */
	font-size: 14px;
	color: var(--mn-main-dark);
}
.mn-footer-info__logo img { width: 300px; height: auto; display: block; }
.mn-footer-info__sns { display: flex; gap: 10px; margin: 18px 0 24px; }
/* フッターのリンクの色（.mn-footer-info a＝濃い青緑）がアイコンにも効くので、アイコンは白に戻す */
.mn-footer-info .mn-footer-info__sns a,
.mn-footer-info .mn-footer-info__sns a:hover { color: #fff; }
.mn-footer-info__sns a { width: 38px; height: 38px; font-size: 20px; }
p.mn-footer-info__address,
p.mn-footer-info__hours { font-size: 16px; line-height: 2; } /* 行間は本人の指示で広め（1.75→2） */
p.mn-footer-info__hours { margin-top: 20px; }

.mn-footer-info__certs { min-width: 0; }
ul.mn-footer-info__facility,
ul.mn-footer-info__designated {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.mn-footer-info__facility li {
	padding: 10px 0;
	border-bottom: 1px solid var(--mn-main);
	font-size: 17px;
	font-weight: 500;
}
ul.mn-footer-info__facility li:last-child { border-bottom: none; }
p.mn-footer-info__designated-title { margin-top: 36px; font-size: 16px; }
ul.mn-footer-info__designated li {
	font-size: 16px;
	line-height: 2;
}
ul.mn-footer-info__designated li::before { content: "・"; }
p.mn-footer-info__copyright {
	max-width: 960px;
	margin: 56px auto 0;
	font-size: 12px; /* コピーライトは添える性質の文字のため小さくてよい（くまの整形外科と同じ扱い） */
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
	/* PC用のヘッダー（ロゴ・電話・SNS）は隠す。スマホではCocoonのスマホ用バー（ロゴ＋メニューボタン）と
	   画面下の固定メニュー（電話・お問い合わせ）に任せる。隠さないと、幅990pxの枠で画面が横に広がる */
	#header { display: none; }
	/* 固定ページの本文の左右に16pxの余白（PC用に .main の余白を0にしているため、狭い画面では文字が端に付く） */
	.page:not(.home) .main { padding-left: 16px; padding-right: 16px; }

	.mn-pagehead__inner { min-height: 160px; }
	.mn-pagehead .mn-pagehead__title { font-size: 30px; }

	.mn-footer-info__inner { flex-direction: column; gap: 32px; }
}

/*834px以下*/
@media screen and (max-width: 834px){
	/*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
	.mn-pagehead__inner { min-height: 120px; }
	.mn-pagehead .mn-pagehead__title { font-size: 26px; }
	.mn-contact { margin-top: 56px; }
	.mn-contact__inner { padding-top: 44px; }
	h2.mn-contact__title { font-size: 24px; }
	p.mn-contact__lead { font-size: 16px; }
	.mn-contact__btn { width: 320px; }
	.mn-contact__btn--tel { font-size: 28px; }
	.mn-contact__btn--form { font-size: 18px; }
	p.mn-contact__hours { font-size: 18px; }
	.mn-contact__town { height: 40px; background-size: auto 40px; }
	.mn-footer-info { padding-top: 44px; }
}

/*480px以下*/
@media screen and (max-width: 480px){
	.mn-footer-info__logo img { width: 260px; }
	.mn-footer-info__type { margin-left: 52px; }
}