@charset "UTF-8";
/************************************
** 固定ページ本文のスタイル（福岡みなと在宅医療クリニック）
** 本文のHTMLは pages/[連番_ページ]/all.html。クラス名は mn-[ページ]-…
** 寸法はデザイン案（幅1400px）の実測
************************************/

/* ===== 共通の部品 ===== */

/* 画面幅いっぱいに広げる（本文の枠の外へ） */
.mn-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* ボタン（お知らせ一覧・院長略歴など）：お年寄りも見るので大きめ（本人の指示。デザイン案の 250×52px より大きく）
   左右の余白は矢印の分を取る。.entry-content 付きでないと Cocoon・下の指定に負けて文字が矢印に重なる */
.entry-content a.mn-btn,
a.mn-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 300px;
	min-height: 64px;
	padding: 10px 72px;
	box-sizing: border-box;
	border-radius: 6px;
	background: var(--mn-main);
	color: #fff;
	font-size: 19px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s;
}
a.mn-btn:hover { background: var(--mn-main-dark); color: #fff; }
/* 右端に白い丸＋右矢印（くまの整形外科の緑のボタンと同じ形。本人の指示）。HTMLは変えずCSSで付ける */
a.mn-thanks__btn { position: relative; padding-left: 64px; padding-right: 64px; }
a.mn-btn::after,
a.mn-thanks__btn::after {
	content: "\f061";
	position: absolute;
	top: 50%;
	right: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	border-radius: 50%;
	background: #fff;
	color: var(--mn-main-dark);
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 13px;
	transition: transform .2s;
}
a.mn-btn::after { right: 24px; width: 30px; height: 30px; margin-top: -15px; font-size: 15px; }
a.mn-btn:hover::after,
a.mn-thanks__btn:hover::after { transform: translateX(4px); }

/* 原稿待ちの印（先生の原稿が届いたら消す） */
.mn-draft {
	display: inline-block;
	margin-left: .5em;
	padding: 0 .6em;
	border-radius: 3px;
	background: #fff3b0;
	color: #7a5b00;
	font-size: 14px;
	font-weight: 500;
	vertical-align: middle;
}


/* ===== 01_top ===== */

/* トップページは本文の枠の上の余白・パンくずをなくし、メインビジュアルをメニューの直後に置く */
.home .content { margin-top: 0; }
.home .main { padding: 0; }
.home .entry-content { margin-top: 0; } /* Cocoonの本文の上の余白（16px）で、メニューと写真のあいだに白いすき間ができるため */
.home .breadcrumb { display: none; }

/* -- 01_top / 01 メインビジュアル -- */
/* 実測：高さ600px（幅1400px時）。スライドはふわっと切り替え（mn-top.js） */
.mn-top-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: clamp(260px, 43vw, 640px);
	overflow: hidden;
	background: #e5f0f6;
}
.mn-top-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.mn-top-hero__slide.is-active { opacity: 1; }
/* 受付の写真（3枚目）は、下が入口の白い枠に隠れるので、受付のカウンターとスタッフが見える位置に寄せる */
.mn-top-hero__img.mn-top-hero__img--reception { object-position: center 45%; }
.mn-top-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}
/* B案の丸いマーク（街並みの輪＋半透明の白い丸＋ロゴ。本人が作った透明PNG mainvisual_object.png、1200px四方）
   大きさはデザイン案B（幅1400pxで直径約450px）に合わせた。下は入口の白い枠がかぶるので、見えている部分の中央に寄せる */
.mn-top-hero__emblem {
	position: absolute;
	top: 38%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(170px, 30vw, 440px);
	height: auto;
	pointer-events: none;
}
.mn-top-hero__dots {
	position: absolute;
	right: 24px;
	bottom: 175px; /* 入口の白い枠に隠れない高さ */
	display: flex;
	gap: 10px;
	z-index: 2;
}
.mn-top-hero__dots button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.mn-top-hero__dots button[aria-selected="true"] { background: #fff; }

/* -- 01_top / 02 3つの入口 -- */
/* 実測：白い枠（幅1240px）がメインビジュアルに約80px重なる。写真は 390×280px、ラベル高さ56px・文字20px */
.mn-top-entry {
	position: relative;
	z-index: 1;
	/* 本文の枠（1140px）より広い1240pxにするため、画面の中央を基準に置く */
	width: min(1240px, 100vw);
	margin: -150px 0 0 calc(50% - min(620px, 50vw)); /* デザイン案は80px。本人の指示で、写真にもっと乗り上げる形に */
	padding: 28px 28px 0;
	background: #fff;
	box-sizing: border-box;
}
ul.mn-top-entry__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.mn-top-entry__list li.mn-top-entry__item { margin: 0; }
.mn-top-entry__item a {
	display: block;
	text-decoration: none;
	overflow: hidden;
}
.mn-top-entry__item img {
	display: block;
	width: 100%;
	aspect-ratio: 390 / 280;
	object-fit: cover;
	transition: transform .4s;
}
.mn-top-entry__item a:hover img { transform: scale(1.04); }
.mn-top-entry__label {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1.4;
	align-content: center; /* 2行に分かれたとき、行と行の間が広がらないように */
	min-height: 56px;
	padding: 8px;
	background: var(--mn-main);
	color: #fff;
	font-family: var(--mn-font-round);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .04em;
}
.mn-top-entry__item a:hover .mn-top-entry__label { background: var(--mn-main-dark); }

/* -- 01_top / 03 特徴・お知らせ／SNS・採用 -- */
/* 実測：左の列 約500px、右の列 420px、間 約80px */
.mn-top-body {
	display: grid;
	grid-template-columns: minmax(0, 500px) 420px;
	justify-content: center;
	gap: 80px;
	margin: 72px auto 0;
	padding: 0 16px;
}
.mn-top-feature { margin-bottom: 48px; }
/* 研修施設の枠：ピンクの線＋薄いピンクの地、文字は濃いピンク */
.entry-content h2.mn-top-feature__title {
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 3px solid var(--mn-pink-line);
	background: var(--mn-pink-bg);
	color: var(--mn-pink);
	font-family: var(--mn-font-round);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	border-radius: 0;
}
/* 見出しの中の<br>はCocoonの見出し処理で消えるため、1行ずつ span で区切る */
.mn-top-feature__line { display: block; }
.entry-content p.mn-top-feature__text {
	margin: 0;
	padding: 0 14px;
	line-height: 2;
}

.entry-content h2.mn-top-news__title,
.entry-content h2.mn-top-sns__title {
	margin: 0 0 16px;
	padding: 0;
	border: none;
	background: none;
	color: var(--mn-text);
	font-family: var(--mn-font-round);
	font-size: 26px;
	font-weight: 500;
}
.entry-content ul.mn-news { margin: 0; padding: 0; list-style: none; }
.entry-content ul.mn-news li.mn-news__item {
	margin: 0;
	border-bottom: 1px solid #b5b5b5;
}
.mn-news__item a {
	display: block;
	padding: 14px 4px;
	color: var(--mn-text);
	text-decoration: none;
}
.mn-news__item a:hover .mn-news__title { color: var(--mn-main-dark); text-decoration: underline; }
.mn-news__date {
	display: block;
	color: var(--mn-main-dark);
	font-size: 16px;
	letter-spacing: .04em;
}
.mn-news__title { display: block; font-size: 16px; line-height: 1.6; }
.entry-content p.mn-top-news__more { margin: 40px 0 0; text-align: center; }

.mn-top-sns { margin-bottom: 40px; }
.entry-content h2.mn-top-sns__title { display: flex; align-items: center; gap: 10px; }
.mn-top-sns__title .fa-facebook { color: #1877f2; font-size: 30px; }
.mn-top-sns__ig-icon {
	font-size: 30px;
	background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.mn-top-sns__fb { border: 1px solid #e5e5e5; }
.mn-top-sns__fb iframe { display: block; width: 100%; max-width: 420px; height: 420px; border: none; overflow: hidden; }
.mn-top-sns__ig {
	padding: 28px 24px;
	background: #f4f4f4;
	text-align: center;
}
.entry-content .mn-top-sns__ig p { margin: 0 0 12px; }
.mn-top-sns__ig-account { font-size: 18px; font-weight: 500; }
a.mn-top-sns__ig-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border-radius: 4px;
	background: #3b82c4;
	color: #fff;
	font-size: 16px;
	text-decoration: none;
}
a.mn-top-sns__ig-btn:hover { opacity: .85; color: #fff; }
.entry-content p.mn-top-recruit { margin: 0; }
.mn-top-recruit img { display: block; width: 100%; height: auto; }


/* ===== レスポンシブ ===== */
@media screen and (max-width: 1023px) {
	.mn-top-entry { margin-top: -90px; padding: 16px 16px 0; }
	.mn-top-entry__label { font-size: 18px; min-height: 50px; }
	.mn-top-hero__dots { bottom: 106px; }
	/* 左右2列 → 上下に（右の列は下へ） */
	.mn-top-body { grid-template-columns: minmax(0, 640px); gap: 24px; margin-top: 56px; }
	.mn-top-body__side { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
	.mn-top-recruit { grid-column: 1 / -1; max-width: 420px; justify-self: center; }
}
@media screen and (max-width: 768px) {
	.mn-top-entry { margin-top: -48px; padding: 10px 10px 0; }
	ul.mn-top-entry__list { grid-template-columns: 1fr; gap: 10px; }
	.mn-top-entry__item a { display: grid; grid-template-columns: 42% 1fr; }
	.mn-top-entry__item img { aspect-ratio: 4 / 3; height: 100%; }
	.mn-top-entry__label { font-size: 18px; }
	.mn-top-hero__dots { bottom: 60px; right: 14px; }
	/* トップは .main の左右の余白を0にしているので、文章の列にだけ左右16pxを付ける */
	.mn-top-body { padding: 0 16px; }
	.mn-top-body__side { grid-template-columns: 1fr; }
	.entry-content p.mn-top-feature__text { padding: 0; }
	.entry-content h2.mn-top-feature__title { font-size: 18px; padding: 12px; }
	.entry-content h2.mn-top-news__title,
	.entry-content h2.mn-top-sns__title { font-size: 22px; }
}


/* ===== 下層ページの共通部品 ===== */
/* 実測（02_about）：見出し26px・青緑・中央、本文の列は約1000px */

/* 固定ページの本文の幅：1000pxで中央（トップ以外） */
.page:not(.home) .entry-content {
	max-width: 1000px;
	margin: 0 auto;
}
.mn-sec { margin: 72px 0 0; }
.entry-content h2.mn-h2 {
	margin: 0 0 36px;
	padding: 0;
	border: none;
	background: none;
	color: var(--mn-main-dark);
	font-family: var(--mn-font-round);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.entry-content h2.mn-h2::before,
.entry-content h2.mn-h2::after { content: none; }
.entry-content p { line-height: 2; }
.entry-content p.mn-lead { margin: 0; }
/* 強調（院長あいさつのピンクの文） */
.entry-content p.mn-em { color: var(--mn-pink); font-weight: 500; }
.entry-content p.mn-note { margin: 12px 0 0; }

/* ボタンを縦に並べる（院長略歴・スタッフ紹介） */
.entry-content ul.mn-btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}
.entry-content ul.mn-btns li { margin: 0; }
.entry-content a.mn-btn--wide { min-width: 400px; min-height: 76px; font-size: 21px; }

/* 表（クリニック概要）：見出しは青緑、行の下に薄い線。Cocoonの表の枠・縞・横スクロールを打ち消す */
.entry-content .mn-table { width: 100%; margin: 0; border: none; border-collapse: collapse; }
.entry-content .mn-table tr { background: none !important; }
.entry-content .mn-table th,
.entry-content .mn-table td {
	padding: 14px 8px;
	border: none;
	border-bottom: 1px solid #cfe3ea;
	background: none;
	text-align: left;
	vertical-align: top;
	white-space: normal;
	line-height: 1.7;
}
.entry-content .mn-table th { width: 5.5em; color: var(--mn-main-dark); font-weight: 500; }
.entry-content .scrollable-table:has(.mn-table) { margin: 0; overflow: visible; }
.entry-content .scrollable-table:has(.mn-table) .scroll-hint-icon-wrap { display: none; }

/* Googleマップ */
.mn-map { margin: 56px 0 0; }
.mn-map iframe { display: block; width: 100%; height: 480px; border: 0; }


/* 文章を中央に（短い案内の文） */
.entry-content p.mn-lead--center { text-align: center; }
.entry-content p.mn-lead + p.mn-lead { margin-top: 1.4em; }

/* チェックの一覧（こんなお悩みはありませんか など）：薄い青の枠に、青緑のチェック */
.entry-content ul.mn-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 32px;
	margin: 0 0 28px;
	padding: 28px 32px;
	border-radius: 12px;
	background: var(--mn-pale);
	list-style: none;
}
.entry-content ul.mn-checklist li {
	position: relative;
	margin: 0;
	padding-left: 32px;
	line-height: 1.7;
}
.entry-content ul.mn-checklist li::before {
	content: "\f00c";
	position: absolute;
	left: 0;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	background: var(--mn-main);
	color: #fff;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 12px;
}

/* 流れ（1・2・3）：番号の丸＋ピンクの見出しの帯（今のサイトの「診療開始までの流れ」の形） */
.entry-content ol.mn-steps { margin: 0; padding: 0; list-style: none; counter-reset: mn-step; }
.entry-content ol.mn-steps li.mn-steps__item {
	position: relative;
	margin: 0;
	padding: 0 0 36px 84px;
	counter-increment: mn-step;
}
/* 番号の丸 */
.entry-content ol.mn-steps li.mn-steps__item::before {
	content: counter(mn-step);
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--mn-main);
	color: #fff;
	font-family: var(--mn-font-round);
	font-size: 30px;
	font-weight: 500;
}
/* 番号の丸をつなぐ縦の線 */
.entry-content ol.mn-steps li.mn-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 29px;
	top: 60px;
	bottom: 0;
	border-left: 2px dashed var(--mn-main-light);
}
.entry-content p.mn-steps__title {
	margin: 10px 0 12px;
	padding: 4px 18px;
	border-radius: 20px;
	background: var(--mn-pale);
	color: var(--mn-main-dark);
	font-family: var(--mn-font-round);
	font-size: 22px;
	font-weight: 500;
}
.mn-steps__item p { margin: 0 0 .6em; }
.entry-content p.mn-steps__tel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 8px 0 0; }
.mn-steps__tel a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mn-pink);
	font-family: var(--mn-font-round);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: .04em;
	text-decoration: none;
}
.mn-steps__tel .fas { font-size: .7em; }

/* 診療費：3つの項目を＋でつなぎ、＝の下に合計の目安 */
.entry-content p.mn-cost__case { margin: 0 0 16px; font-weight: 600; text-align: center; }
.mn-cost__items { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; }
.entry-content p.mn-cost__item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 200px;
	min-height: 96px;
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--mn-pink);
	color: #fff;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}
.entry-content p.mn-cost__item--care { background: #3a9fb1; }
.mn-cost__ins { display: block; margin-bottom: 4px; font-size: 16px; opacity: .9; }
.mn-cost__plus { color: #8a9599; font-size: 24px; }
.entry-content dl.mn-cost__total {
	max-width: 640px;
	margin: 24px auto 0;
	padding: 20px 32px;
	border-radius: 12px;
	background: var(--mn-main);
	color: #fff;
}
.mn-cost__total div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0; }
.mn-cost__total div + div { border-top: 1px solid rgba(255,255,255,.6); }
.mn-cost__total dt { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 500; }
.mn-cost__total dt .fas { font-size: 24px; }
.mn-cost__total dd { margin: 0; font-size: 18px; }
.mn-cost__total strong { margin: 0 4px; font-family: var(--mn-font-round); font-size: 44px; font-weight: 500; letter-spacing: .02em; }
.entry-content p.mn-cost__lead { margin: 20px 0 0; text-align: center; font-weight: 500; }

/* 注意書き（※）の一覧 */
.entry-content ul.mn-notes { margin: 20px 0 0; padding: 0; list-style: none; }
.entry-content ul.mn-notes li { position: relative; margin: 0 0 4px; padding-left: 1.2em; line-height: 1.7; }
.entry-content ul.mn-notes li::before { content: "※"; position: absolute; left: 0; }

/* カード（当院の体制など）：白いカードに青緑の上線、2列 */
.entry-content ul.mn-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
.entry-content ul.mn-cards li.mn-cards__item {
	margin: 0;
	padding: 24px 26px;
	border: 1px solid #d5e3e8;
	border-top: 4px solid var(--mn-main);
	border-radius: 8px;
	background: #fff;
}
.entry-content p.mn-cards__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	color: var(--mn-main-dark);
	font-family: var(--mn-font-round);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}
.mn-cards__title .fas { color: var(--mn-main); font-size: 22px; }
.mn-cards__item p:last-child { margin: 0; line-height: 1.8; }

/* 小見出し（プライバシーポリシーなど）：左に青緑の線 */
.entry-content h2.mn-h3 {
	margin: 44px 0 16px;
	padding: 4px 0 4px 14px;
	border: none;
	border-left: 4px solid var(--mn-main);
	background: none;
	color: var(--mn-main-dark);
	font-family: var(--mn-font-round);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.5;
}
.entry-content h2.mn-h3::before,
.entry-content h2.mn-h3::after { content: none; }
.mn-policy p { margin: 0 0 1em; }

/* 点の一覧（・） */
.entry-content ul.mn-dotlist { margin: 0 0 1.2em; padding: 0; list-style: none; }
.entry-content ul.mn-dotlist li {
	position: relative;
	margin: 0;
	padding: 8px 0 8px 22px;
	border-bottom: 1px dotted #c9d6db;
	line-height: 1.7;
}
.entry-content ul.mn-dotlist li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 1.15em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mn-main);
}
.entry-content ul.mn-dotlist--2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }

/* 項目名＋内容の一覧（ご利用にあたって・院長の専門など） */
.entry-content dl.mn-deflist { margin: 0; border-top: 1px solid #d5e3e8; }
.mn-deflist > div {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 4px 24px;
	padding: 18px 4px;
	border-bottom: 1px solid #d5e3e8;
}
.mn-deflist dt { color: var(--mn-main-dark); font-weight: 600; line-height: 1.7; }
.mn-deflist dd { margin: 0; line-height: 1.8; }

/* プロフィール（院長略歴）：写真＋名前・専門 */
.mn-profile { display: grid; grid-template-columns: 345px minmax(0, 1fr); gap: 40px; align-items: center; }
.entry-content figure.mn-profile__photo { margin: 0; }
.mn-profile__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.mn-profile .mn-deflist > div { grid-template-columns: 5em minmax(0, 1fr); }
.mn-story__more { margin-top: 32px; }
.mn-story__more p { margin: 0 0 1.6em; }

/* スタッフ紹介：写真＋役職・名前・文章。Another Story は開閉 */
.entry-content ul.mn-staff { margin: 0; padding: 0; list-style: none; }
.entry-content ul.mn-staff li.mn-staff__item {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 32px;
	margin: 0 0 32px;
	padding: 32px;
	border-radius: 12px;
	background: var(--mn-pale);
}
.entry-content figure.mn-staff__photo { margin: 0; }
.mn-staff__photo img { display: block; width: 100%; height: auto; border-radius: 8px; }
.entry-content p.mn-staff__role { margin: 0; color: var(--mn-main-dark); font-weight: 500; }
.entry-content p.mn-staff__name {
	margin: 0 0 16px;
	font-family: var(--mn-font-round);
	font-size: 26px;
	font-weight: 500;
	letter-spacing: .08em;
}
.mn-staff__body > p { margin: 0 0 1em; }
.mn-staff__story { margin-top: 8px; padding: 0 18px; border-radius: 8px; background: #fff; }
.mn-staff__story summary {
	padding: 14px 0;
	color: var(--mn-main-dark);
	font-family: var(--mn-font-round);
	font-size: 18px;
	font-weight: 500;
	cursor: pointer;
}
.mn-staff__story p { margin: 0; padding-bottom: 16px; }

/* 写真のスライダー [gallery type="mn-slider"]（稲葉工務店の施工事例と同じ形）：大きな写真1枚＋前後ボタン＋下にサムネイル */
.mn-gallery { position: relative; padding: 8px; border-radius: 8px; background: var(--mn-pale); }
.mn-gallery__stage { position: relative; overflow: hidden; border-radius: 4px; background: #fff; }
.entry-content ul.mn-gallery__slides {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: 3 / 2;
}
.entry-content li.mn-gallery__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease, visibility .6s;
}
.entry-content li.mn-gallery__slide.is-active { opacity: 1; visibility: visible; }
.mn-gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mn-gallery__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 56px;
	margin-top: -28px;
	padding: 0;
	border: none;
	background: rgba(0, 0, 0, .4);
	cursor: pointer;
}
.mn-gallery__nav::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}
.mn-gallery__prev { left: 0; }
.mn-gallery__prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.mn-gallery__next { right: 0; }
.mn-gallery__next::before { transform: translate(-70%, -50%) rotate(45deg); }
.mn-gallery__nav:hover,
.mn-gallery__nav:focus-visible { background: var(--mn-main-dark); }
.entry-content ol.mn-gallery__thumbs {
	display: flex;
	gap: 6px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}
.entry-content ol.mn-gallery__thumbs li { flex: 0 0 auto; margin: 0; padding: 0; line-height: 0; }
.mn-gallery__thumb { padding: 0; border: none; background: none; cursor: pointer; opacity: .5; transition: opacity .3s; }
.mn-gallery__thumb.is-active,
.mn-gallery__thumb:hover,
.mn-gallery__thumb:focus-visible { opacity: 1; }
.mn-gallery__thumb img { display: block; width: 100px; height: 66px; object-fit: cover; border-radius: 2px; }
.mn-gallery.is-single .mn-gallery__nav,
.mn-gallery.is-single .mn-gallery__thumbs { display: none; }
@media screen and (max-width: 768px) {
	.mn-gallery { padding: 6px; }
	.mn-gallery__thumb img { width: 72px; height: 48px; }
	.mn-gallery__nav { width: 36px; height: 48px; margin-top: -24px; }
}

/* 訪問エリアの地図 */
.entry-content figure.mn-area-map { margin: 24px 0 0; }
.mn-area-map img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid #d5e3e8; }

@media screen and (max-width: 768px) {
	.entry-content ul.mn-checklist { grid-template-columns: 1fr; padding: 20px 18px; }
	.entry-content ul.mn-cards { grid-template-columns: 1fr; gap: 14px; }
	.entry-content ul.mn-dotlist--2col { grid-template-columns: 1fr; }
	.mn-deflist > div { grid-template-columns: 1fr; padding: 14px 4px; }
	.mn-profile { grid-template-columns: 1fr; gap: 20px; }
	.mn-profile__photo { max-width: 300px; margin: 0 auto !important; }
	.entry-content ul.mn-staff li.mn-staff__item { grid-template-columns: 1fr; gap: 16px; padding: 22px 16px; }
	.mn-staff__photo { max-width: 200px; margin: 0 auto !important; }
	.entry-content p.mn-staff__name { font-size: 22px; }
	.entry-content h2.mn-h3 { font-size: 19px; }
	.entry-content ul.mn-cards li.mn-cards__item { padding: 20px 18px; }
	.entry-content p.mn-cards__title { font-size: 18px; }
	.entry-content ol.mn-steps li.mn-steps__item { padding-left: 60px; }
	.entry-content ol.mn-steps li.mn-steps__item::before { width: 44px; height: 44px; font-size: 22px; }
	.entry-content ol.mn-steps li.mn-steps__item:not(:last-child)::after { left: 21px; top: 44px; }
	.entry-content p.mn-steps__title { font-size: 19px; margin-top: 4px; }
	.mn-steps__tel a { font-size: 26px; }
	.mn-cost__items { flex-direction: column; }
	.entry-content p.mn-cost__item { width: 100%; max-width: 320px; min-height: 0; }
	.entry-content dl.mn-cost__total { padding: 16px 18px; }
	.mn-cost__total strong { font-size: 34px; }
	.mn-cost__total dt { font-size: 18px; }
}


/* ===== 02_clinic（当院について） ===== */

/* -- 02 院長あいさつ：写真（約345px四方）＋文章 -- */
.mn-clinic-greeting__row {
	display: grid;
	grid-template-columns: 345px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}
.mn-clinic-greeting__row + .mn-clinic-greeting__row { margin-top: 48px; }
.mn-clinic-greeting__row--reverse { grid-template-columns: minmax(0, 1fr) 340px; }
.entry-content figure.mn-clinic-greeting__photo { margin: 0; }
.mn-clinic-greeting__photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; }
.mn-clinic-greeting__photo--wide img { aspect-ratio: 4 / 3; }
.entry-content p.mn-clinic-greeting__role { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.6; }
.entry-content p.mn-clinic-greeting__name {
	margin: 4px 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mn-main-light);
	font-family: var(--mn-font-round);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: .1em;
	line-height: 1.4;
}
.mn-clinic-greeting__body p { margin: 0 0 1.6em; }
.mn-clinic-greeting__body p:last-child { margin-bottom: 0; }

/* -- 03 理念（薄い青の帯）・特徴（白いカードが帯に重なる） -- */
.mn-clinic-philosophy {
	width: 100vw;
	margin: 80px 0 0 calc(50% - 50vw);
	padding: 64px 16px 150px;
	background: var(--mn-pale);
	box-sizing: border-box;
}
.mn-clinic-philosophy__inner { max-width: 760px; margin: 0 auto; }
.entry-content ol.mn-clinic-philosophy__list {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: mn-num;
}
.entry-content ol.mn-clinic-philosophy__list li {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 58px;
	margin: 0 0 18px;
	padding-left: 86px;
	counter-increment: mn-num;
	line-height: 1.8;
}
.entry-content ol.mn-clinic-philosophy__list li::before {
	content: counter(mn-num);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #fff;
	color: var(--mn-main);
	font-family: var(--mn-font-round);
	font-size: 30px;
	font-weight: 500;
}
.mn-clinic-feature {
	position: relative;
	max-width: 840px;
	margin: -110px auto 0;
	padding: 36px 40px 40px;
	border: 1px solid var(--mn-main);
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
}
.mn-clinic-feature .mn-h2 { margin-bottom: 28px; }
.mn-clinic-feature__row {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
.entry-content figure.mn-clinic-feature__photo { margin: 0; }
.mn-clinic-feature__photo img { display: block; width: 100%; aspect-ratio: 270 / 240; object-fit: cover; }
.entry-content ul.mn-clinic-feature__list { margin: 0; padding: 0; list-style: none; }
.entry-content ul.mn-clinic-feature__list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 1.1em;
	line-height: 1.7;
}
.entry-content ul.mn-clinic-feature__list li::before { content: "・"; position: absolute; left: 0; }

/* -- 03b クリニックの様子：写真のスライダーは「クリニック特徴」の枠と同じ幅 -- */
.mn-clinic-gallery .mn-gallery { max-width: 840px; margin: 0 auto; }

/* -- 04 概要：写真（約400px）＋表 -- */
.mn-clinic-outline__row {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
.entry-content figure.mn-clinic-outline__photo { margin: 0; }
.mn-clinic-outline__photo img { display: block; width: 100%; aspect-ratio: 400 / 600; object-fit: cover; object-position: 40% center; }
.entry-content .mn-table--hours { margin-top: 40px; }


@media screen and (max-width: 1023px) {
	.mn-sec { margin-top: 56px; }
	/* 左右2分割 → 上下に（写真を上） */
	.mn-clinic-greeting__row,
	.mn-clinic-greeting__row--reverse,
	.mn-clinic-outline__row { grid-template-columns: minmax(0, 1fr); gap: 28px; } /* minmax(0,…)：中身の長さで列が画面より広がらないように */
	.mn-clinic-greeting__row--reverse .mn-clinic-greeting__photo { order: -1; }
	.mn-clinic-greeting__photo { max-width: 360px; margin: 0 auto !important; }
	.mn-clinic-greeting__photo--wide { max-width: 560px; }
	.mn-clinic-outline__photo img { aspect-ratio: 3 / 2; }
	.mn-clinic-feature { margin-left: 16px; margin-right: 16px; }
}
@media screen and (max-width: 768px) {
	.entry-content h2.mn-h2 { font-size: 22px; margin-bottom: 24px; }
	.mn-clinic-philosophy { margin-top: 56px; padding: 44px 16px 120px; }
	.entry-content ol.mn-clinic-philosophy__list li { padding-left: 62px; min-height: 46px; }
	.entry-content ol.mn-clinic-philosophy__list li::before { width: 46px; height: 46px; font-size: 24px; }
	.mn-clinic-feature { margin: -90px 0 0; padding: 28px 18px; }
	.mn-clinic-feature__row { grid-template-columns: 1fr; gap: 20px; }
	.entry-content p.mn-clinic-greeting__name { font-size: 24px; }
	.entry-content ul.mn-btns li { width: 100%; display: flex; justify-content: center; }
	.entry-content a.mn-btn--wide { min-width: 0; width: 100%; max-width: 360px; min-height: 70px; font-size: 19px; }
	.mn-map iframe { height: 360px; }
	.entry-content .mn-table th { width: 5em; }
}


/* ===== 08_contact（お問い合わせ） ===== */

/* -- 01 新規の診療依頼：申込シート（PDF）・FAX・TEL -- */
.mn-contact-new__box {
	margin: 32px auto 0;
	max-width: 760px;
	padding: 32px 24px;
	border-radius: 12px;
	background: var(--mn-pale);
	text-align: center;
}
a.mn-contact-new__pdf {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 12px 36px;
	border-radius: 6px;
	background: var(--mn-pink);
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	text-decoration: none;
	transition: opacity .2s;
}
a.mn-contact-new__pdf:hover { opacity: .88; color: #fff; }
a.mn-contact-new__pdf .fas { font-size: 24px; }
/* FAX と TEL は2行に分ける（本人の指示） */
.entry-content dl.mn-contact-new__nums {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 24px 0 0;
}
.mn-contact-new__nums div { display: flex; align-items: baseline; gap: 12px; }
.mn-contact-new__nums dt { color: var(--mn-main-dark); font-size: 18px; font-weight: 500; }
.mn-contact-new__nums dd {
	margin: 0;
	font-family: var(--mn-font-round);
	font-size: 32px;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--mn-main-dark);
}
.mn-contact-new__nums dd a { color: inherit; text-decoration: none; }
.entry-content p.mn-contact-new__hours { margin: 4px 0 0; }

/* 注意書きの枠（携帯電話のメールの受信設定など） */
.mn-note-box {
	margin: 28px 0 0;
	padding: 18px 22px;
	border: 1px solid var(--mn-pink-line);
	border-radius: 8px;
	background: var(--mn-pink-bg);
}
.entry-content .mn-note-box p { margin: 0; line-height: 1.8; }
.mn-note-box strong { color: var(--mn-pink); font-weight: 600; }

/* -- 02 お問い合わせフォーム（全フォーム共通の決まり：くまの整形外科の応募フォームの形） -- */
/* 薄い地色の枠の中に、項目ごとの白いカード。「必須」はオレンジの札、入力欄は高さ52px */
.mn-form {
	margin: 32px 0 0;
	padding: 40px 32px 48px;
	border-radius: 12px;
	background: var(--mn-pale);
}
.mn-form .wpcf7 { max-width: 800px; margin: 0 auto; }
.entry-content p.mn-form__intro { margin: 0 0 24px; text-align: center; }
.mn-form__group {
	margin: 0 0 16px;
	padding: 24px 32px;
	border-radius: 12px;
	background: #fff;
}
.mn-form__label,
.entry-content p.mn-form__label {
	display: block;
	margin: 0 0 10px;
	color: var(--mn-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}
/* 「必須」の札は小さな札なので15px（くまの整形外科と同じ例外） */
.mn-form__tag {
	display: inline-block;
	margin-left: 10px;
	padding: 0 10px;
	border-radius: 4px;
	background: #f39800;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	vertical-align: 1px;
}
.mn-form__tag.is-opt { background: #9aa7ad; }
.mn-form__hint { display: block; margin: -4px 0 8px; color: #4d4d4d; font-size: 16px; }
.mn-form input[type="text"],
.mn-form input[type="email"],
.mn-form input[type="tel"],
.mn-form textarea {
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	padding: 10px 14px;
	border: 1px solid #b3b3b3;
	border-radius: 6px;
	background-color: #fff;
	color: var(--mn-text);
	font-size: 16px; /* 16px未満だとiPhoneで入力時に画面が拡大されるため */
	line-height: 1.5;
}
.mn-form input[type="text"],
.mn-form input[type="email"],
.mn-form input[type="tel"] { max-width: 480px; }
.mn-form textarea { height: 200px; resize: vertical; }
.mn-form input::placeholder,
.mn-form textarea::placeholder { color: #a0a8ab; }
.mn-form input:focus,
.mn-form textarea:focus {
	border-color: var(--mn-main);
	outline: 2px solid var(--mn-main-light);
	outline-offset: 0;
}
.mn-form .wpcf7-not-valid { background: #fff5f5; border-color: #d33; }
.mn-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: 16px; }
/* 当院とのご関係：選択ボタンを押しやすい大きさに */
.mn-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.mn-form .wpcf7-radio .wpcf7-list-item { margin: 0; }
.mn-form .wpcf7-radio label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 8px 16px;
	border: 1px solid #c9d6db;
	border-radius: 6px;
	cursor: pointer;
}
.mn-form .wpcf7-radio input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--mn-main-dark); }
.mn-form .wpcf7-radio label:has(input:checked) { border-color: var(--mn-main-dark); background: #eef8fa; }
/* プライバシーポリシーへの同意 */
.mn-form__agree { margin: 24px 0 28px; text-align: center; }
.mn-form__agree .wpcf7-list-item { margin: 0; }
.mn-form__agree label { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.mn-form__agree input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--mn-main-dark); }
/* 送信ボタン：共通の決まり＝幅いっぱい最大400px・高さ72px以上・文字20px・角丸6px・白い文字。押せないときは薄く */
.mn-form__submit { position: relative; display: grid; justify-items: center; gap: 16px; }
.mn-form .wpcf7 input.wpcf7-submit.mn-form__btn {
	display: block;
	width: 100%;
	max-width: 400px;
	min-height: 72px;
	margin: 0 auto;
	padding: 12px 32px;
	border: 0;
	border-radius: 6px;
	background: var(--mn-main-dark);
	color: #fff;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .05em;
	cursor: pointer;
	transition: opacity .2s;
}
.mn-form .wpcf7 input.wpcf7-submit.mn-form__btn:hover { opacity: .9; }
.mn-form .wpcf7 input.wpcf7-submit.mn-form__btn:disabled { opacity: .45; cursor: not-allowed; }
.mn-form .wpcf7 .wpcf7-spinner { position: absolute; left: 50%; top: 84px; margin: 0; transform: translateX(-50%); }
.mn-form .wpcf7 [hidden] { display: none !important; } /* display を指定した要素でも確実に隠す */
.mn-form__back {
	width: 100%;
	max-width: 400px;
	min-height: 56px;
	padding: 12px 24px;
	border: 1px solid #b3b3b3;
	border-radius: 6px;
	background: #fff;
	color: var(--mn-text);
	font: inherit;
	font-size: 17px;
	cursor: pointer;
}
.mn-form__back:hover { border-color: var(--mn-main-dark); color: var(--mn-main-dark); }
/* 確認画面：項目名180px＋値。スマホでは縦に並べる */
.mn-form__confirm { margin: 0 0 32px; padding: 28px 32px; border-radius: 12px; background: #fff; }
.entry-content p.mn-form__confirm-intro { margin: 0 0 20px; font-weight: 500; }
.entry-content dl.mn-form__confirm-list { margin: 0; border-top: 1px dotted #b3b3b3; }
.mn-form__confirm-row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 4px 20px;
	padding: 14px 0;
	border-bottom: 1px dotted #b3b3b3;
}
.mn-form__confirm-row dt { color: var(--mn-main-dark); font-weight: 600; }
.mn-form__confirm-row dd { margin: 0; word-break: break-word; line-height: 1.7; }
.mn-form__empty { color: #8a9599; }
.mn-form.is-confirm .wpcf7-response-output { display: none; }

/* -- サンキューページ（/contact/thanks/） -- */
.mn-thanks { margin: 56px 0 0; padding: 40px 32px; border-radius: 12px; background: var(--mn-pale); }
.mn-thanks__card { max-width: 760px; margin: 0 auto; padding: 40px; border-radius: 12px; background: #fff; }
.entry-content p.mn-thanks__lead {
	margin: 0 0 20px;
	color: var(--mn-main-dark);
	font-family: var(--mn-font-round);
	font-size: 24px;
	font-weight: 500;
	text-align: center;
}
.mn-thanks__note { margin: 28px 0; padding: 18px 22px; border-left: 4px solid var(--mn-main); background: #f6fafb; }
.entry-content p.mn-thanks__heading { margin: 0 0 6px; font-weight: 600; }
.entry-content .mn-thanks__note ul { margin: 0; padding-left: 1.2em; }
.entry-content p.mn-thanks__tel { margin: 0; text-align: center; }
.mn-thanks__tel a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--mn-main-dark);
	font-family: var(--mn-font-round);
	font-size: 38px;
	font-weight: 500;
	letter-spacing: .04em;
	text-decoration: none;
}
.mn-thanks__tel .fas { font-size: .7em; }
.entry-content p.mn-thanks__hours { margin: 0; text-align: center; }
.entry-content p.mn-thanks__back { margin: 32px 0 0; text-align: center; }
a.mn-thanks__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	min-height: 72px;
	border-radius: 6px;
	background: var(--mn-main-dark);
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	text-decoration: none;
}
a.mn-thanks__btn:hover { opacity: .9; color: #fff; }

@media screen and (max-width: 768px) {
	.mn-form { padding: 24px 12px 32px; margin-left: -16px; margin-right: -16px; border-radius: 0; }
	.mn-form__group { padding: 18px 16px; }
	.mn-form__confirm { padding: 20px 16px; }
	.mn-form__confirm-row { grid-template-columns: 1fr; }
	.mn-contact-new__nums dd { font-size: 26px; }
	a.mn-contact-new__pdf { font-size: 18px; padding: 12px 20px; }
	.mn-thanks { padding: 24px 12px; margin-left: -16px; margin-right: -16px; border-radius: 0; }
	.mn-thanks__card { padding: 28px 18px; }
	.mn-thanks__tel a { font-size: 30px; }
}
