/*
Theme Name: 長野県臨床整形外科医会
Description: 長野県臨床整形外科医会の公式サイト用テーマ。医院・コラム・地域の仕組みは、プラグイン「長野県臨床整形外科医会 基本機能」と組み合わせて使います。
Version: 0.1.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: ncoa-theme
*/

/* ---------- 色と書体（変えるときはここだけ） ---------- */
:root {
	--c-green: #296251;       /* メイン：自然との調和 */
	--c-green-deep: #1F4A3E;  /* フッター */
	--c-gold: #B6AB65;        /* アクセント：人の営みへの敬意 */
	--c-gold-pale: #F4F0DF;
	--c-ink: #22302A;         /* 本文 */
	--c-sub: #56635C;         /* 補足 */
	--c-pale: #EEF3EF;
	--c-line: #E2EAE5;
	--c-border: #BCD0C6;
	--c-ph: #D5E3DB;          /* 写真の仮置き */
	--c-ph-text: #3F5B50;
	--f-body: "BIZ UDPGothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
	--f-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", sans-serif;
	--gutter: clamp(16px, 4vw, 40px);
	--section: clamp(72px, 11vw, 144px);
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.9;
	letter-spacing: 0.03em;
	color: var(--c-ink);
	background: #FFFFFF;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--c-green); }
:focus-visible { outline: 3px solid var(--c-green); outline-offset: 2px; }
.site-footer :focus-visible { outline-color: #FFFFFF; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto;
	padding: 12px 20px; background: #FFFFFF; color: var(--c-green); font-weight: 700;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.h2 {
	margin: 0;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.45;
	letter-spacing: 0.04em;
}
.textlink {
	display: inline-flex; align-items: center; min-height: 44px;
	color: var(--c-green); font-weight: 700;
	text-decoration: underline; text-underline-offset: 6px;
}
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 20px; border-radius: 10px;
	font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 0.03em;
	text-decoration: none; cursor: pointer;
}
.btn--primary { background: var(--c-green); color: #FFFFFF; border: 0; }
.btn--ghost { background: #FFFFFF; color: var(--c-green); border: 1.5px solid var(--c-border); }
.btn--accent { min-height: 56px; padding: 0 32px; background: var(--c-gold); color: var(--c-ink); font-size: 18px; border: 0; }
.btn--white { background: #FFFFFF; color: var(--c-green); border: 0; }
.btn--outline-white { background: transparent; color: #FFFFFF; border: 1.5px solid #FFFFFF; }

/* ---------- ヘッダー ---------- */
.site-header { border-bottom: 1px solid var(--c-line); }
.utility { background: var(--c-pale); }
.utility__inner { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 20px; }
.utility__label { font-size: 13px; color: var(--c-sub); }
.utility__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--c-green); text-decoration: none; }
.masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 40px; padding-top: 16px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--c-ink); text-decoration: none; }
.brand__mark {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 44px; height: 44px; border: 2px dashed #94B3A6; border-radius: 12px;
	font-size: 11px; letter-spacing: 0; color: var(--c-ph-text);
}
.brand img { display: block; width: auto; max-height: 48px; }
.brand__name { font-family: var(--f-head); font-weight: 700; font-size: clamp(17px, 2vw, 21px); letter-spacing: 0.05em; }
.gnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 clamp(14px, 2vw, 28px); }
.gnav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--c-ink); text-decoration: none; }
.gnav a:hover, .gnav .current-menu-item > a { color: var(--c-green); text-decoration: underline; text-underline-offset: 6px; }

/* ---------- トップ：メインビジュアル ---------- */
.hero { position: relative; }
.hero__photo {
	margin-left: clamp(40px, 16vw, 240px);
	height: clamp(240px, 38vw, 520px);
	background: var(--c-ph);
	border-radius: 0 0 0 48px;
	overflow: hidden;
	display: flex; justify-content: flex-end; align-items: flex-start;
	padding: 24px var(--gutter);
}
.hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__photo--image { position: relative; padding: 0; }
.hero__caption { max-width: 22em; font-size: 13px; line-height: 1.7; color: var(--c-ph-text); text-align: right; }
.hero__panel {
	position: relative;
	margin: calc(-1 * clamp(48px, 10vw, 140px)) 0 0 clamp(12px, 5vw, 64px);
	max-width: 760px;
	background: #FFFFFF;
	padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px) clamp(32px, 4vw, 56px);
	border-radius: 0 28px 0 0;
}
.hero__title {
	margin: 0;
	font-family: var(--f-head); font-weight: 700;
	font-size: clamp(24px, 6vw, 40px); line-height: 1.5; letter-spacing: 0.04em;
}
.hero__lead { margin: 24px 0 0; max-width: 32em; }
.hero__panel .btn--accent { margin-top: 32px; }

/* ---------- トップ：整形外科とは ---------- */
.section { padding-top: var(--section); }
.split { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px clamp(40px, 7vw, 96px); }
.ortho__head { flex: 1 1 320px; max-width: 460px; }
.ortho__head p { margin: 24px 0 0; }
.ortho__body { flex: 1 1 400px; max-width: 600px; margin-top: clamp(0px, 9vw, 128px); }
.ortho__body h3 { margin: 0 0 8px; font-size: 20px; color: var(--c-green); }
.checklist { list-style: none; margin: 0; padding: 0; font-size: 18px; line-height: 1.7; }
.checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.checklist li::before {
	content: ""; flex: none; width: 10px; height: 10px; margin-top: 0.55em;
	border: 2px solid var(--c-green); border-radius: 50%;
}
.note-box { margin-top: 40px; padding: 28px clamp(20px, 3vw, 32px); background: var(--c-pale); border-radius: 0 24px 24px 24px; }
.note-box h3 { margin: 0 0 8px; font-size: 18px; color: var(--c-ink); }
.note-box p { margin: 0; font-size: 16px; }
.ortho__body .textlink { margin-top: 20px; }

/* ---------- 種類の切り替えボタン（お知らせ・市町村） ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	min-height: 44px; padding: 0 16px; border-radius: 999px;
	border: 1.5px solid var(--c-border); background: #FFFFFF; color: var(--c-green);
	font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.03em;
	cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.chips--page { margin-bottom: 24px; }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--c-green); border-color: var(--c-green); color: #FFFFFF; }

/* ---------- お知らせ ---------- */
.news { display: flex; flex-wrap: wrap; gap: 32px clamp(40px, 7vw, 96px); }
.news__side { flex: 1 1 260px; max-width: 320px; }
.news__side .chips { margin-top: 20px; }
.news__main { flex: 999 1 480px; min-width: 0; }
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.news-list > li { border-bottom: 1px solid var(--c-line); }
.news-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; padding: 20px 0; color: var(--c-ink); text-decoration: none; }
.news-row__date { flex: none; width: 7.5em; font-size: 15px; color: var(--c-sub); }
.news-row__cat { flex: none; width: 7.5em; font-size: 14px; font-weight: 700; color: var(--c-green); }
.news-row__title { flex: 1 1 280px; font-size: 17px; text-decoration: underline; text-decoration-color: var(--c-border); text-underline-offset: 6px; }
.news-row:hover .news-row__title { text-decoration-color: var(--c-green); }
.news__main .textlink { margin-top: 16px; }
.empty { margin: 20px 0 0; color: var(--c-sub); }

/* ---------- お近くの整形外科を探す ---------- */
.search { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px clamp(40px, 7vw, 96px); }
.search__left { flex: 0 1 520px; width: 100%; min-width: 0; }
.search__left > p { margin: 16px 0 0; max-width: 26em; font-size: 16px; }
.map { position: relative; width: 100%; max-width: clamp(280px, 40vw, 520px); margin-top: 32px; }
.map svg { display: block; width: 100%; height: auto; }
.map-region { stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round; fill-rule: evenodd; cursor: pointer; transition: fill 0.15s; }
.map-region[data-region="hokushin"] { fill: #BFD6CA; }
.map-region[data-region="toshin"] { fill: #DDE9E2; }
.map-region[data-region="chushin"] { fill: #A9C7B8; }
.map-region[data-region="nanshin"] { fill: #CFE0D6; }
.map-region:hover { fill: #9EBFAF; }
.map-region.is-selected { fill: var(--c-green); }
.map-label {
	position: absolute; transform: translate(-50%, -50%);
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 4px 10px; border-radius: 8px;
	font-family: var(--f-head); font-weight: 900; font-size: clamp(22px, 2.6vw, 34px);
	line-height: 1.2; letter-spacing: 0.06em; color: var(--c-green); text-decoration: none;
}
.map-label.is-selected { color: #FFFFFF; }
.search__panel { flex: 1 1 400px; min-width: 0; margin-top: clamp(0px, calc((100vw - 760px) * 10), 232px); }
.area-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.area-list > li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 24px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.area-list__region {
	flex: 0 0 auto; min-width: 4em; min-height: 44px; display: inline-flex; align-items: center;
	font-family: var(--f-head); font-weight: 900; font-size: 28px; line-height: 1.3; letter-spacing: 0.06em;
	color: var(--c-green); text-decoration: none;
}
.area-list__munis { flex: 1 1 240px; display: flex; flex-wrap: wrap; gap: 0 18px; list-style: none; margin: 0; padding: 0; }
.area-list__munis a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--c-green); text-underline-offset: 5px; }
.back-btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
	font-family: inherit; font-size: 15px; font-weight: 700; color: var(--c-green);
	text-decoration: underline; text-underline-offset: 5px; cursor: pointer;
}
.region-title { margin: 4px 0 0; font-family: var(--f-head); font-weight: 700; font-size: 22px; line-height: 1.4; letter-spacing: 0.04em; }
.region-title__name { display: block; font-weight: 900; font-size: clamp(44px, 5vw, 64px); line-height: 1.1; letter-spacing: 0.08em; color: var(--c-green); }
.region-panel .chips { margin-top: 20px; }
.clinics { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.clinic { padding: 20px 0 24px; border-bottom: 1px solid var(--c-line); }
.clinic__muni { margin: 0; font-size: 14px; color: var(--c-sub); }
.clinic__name {
	display: inline-flex; align-items: center; min-height: 44px;
	font-size: 20px; font-weight: 700; color: var(--c-ink);
	text-decoration: underline; text-decoration-color: var(--c-border); text-underline-offset: 6px;
}
.clinic__addr, .clinic__hours { margin: 0; font-size: 16px; }
.clinic__hours { color: var(--c-sub); }
.clinic__actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 14px; }

/* ---------- 骨と関節の日・関連リンク ---------- */
.closing { padding-bottom: var(--section); }
.bone { flex: 1 1 400px; max-width: 620px; background: var(--c-gold-pale); border-radius: 0 28px 28px 28px; padding: clamp(28px, 4vw, 48px); }
.bone h2 { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(24px, 3vw, 34px); line-height: 1.5; letter-spacing: 0.04em; }
.bone p { margin: 16px 0 0; font-size: 16px; }
.bone .textlink { margin-top: 16px; }
.links { flex: 1 1 300px; max-width: 420px; padding-top: clamp(0px, 3vw, 40px); }
.links h2 { margin: 0 0 8px; font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; }
.links ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.links li { border-bottom: 1px solid var(--c-line); }
.links li a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 12px; min-height: 56px; color: var(--c-green); font-weight: 700; text-decoration: none; }
.links__ext { font-size: 13px; font-weight: 400; color: var(--c-sub); }

/* ---------- 下層ページ ---------- */
.page-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); }
.page-head__title { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: clamp(28px, 4vw, 44px); line-height: 1.4; letter-spacing: 0.04em; }
.page-head__meta { margin: 12px 0 0; font-size: 15px; color: var(--c-sub); display: flex; flex-wrap: wrap; gap: 4px 20px; }
.page-head__meta strong { color: var(--c-green); }
.page-body { padding-bottom: var(--section); }
.entry { max-width: 760px; }
.entry > * + * { margin-top: 1.2em; }
.entry h2 { margin-top: 2.2em; font-family: var(--f-head); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.5; letter-spacing: 0.04em; padding-bottom: 8px; border-bottom: 2px solid var(--c-line); }
.entry h3 { margin-top: 1.8em; font-size: 20px; color: var(--c-green); }
.entry p { margin: 0; }
.entry * + p { margin-top: 1.2em; }
.entry ul, .entry ol { padding-left: 1.4em; }
.entry table { width: 100%; border-collapse: collapse; font-size: 16px; }
.entry th, .entry td { padding: 12px 14px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.entry th { background: var(--c-pale); font-weight: 700; white-space: nowrap; }
.entry figure { margin: 0; }
.entry .wp-block-table { overflow-x: auto; }
.entry blockquote { margin: 0; padding: 16px 24px; background: var(--c-pale); border-radius: 0 16px 16px 16px; }
.back-links { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 0 24px; }
.breadcrumb { font-size: 14px; color: var(--c-sub); }
.breadcrumb a { color: var(--c-green); }
.term-chips { margin: 8px 0 0; }
.clinic-detail { max-width: 760px; }
.clinic-detail dl { margin: 0; border-top: 1px solid var(--c-line); }
.clinic-detail dl > div { display: flex; flex-wrap: wrap; gap: 0 24px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.clinic-detail dt { flex: 0 0 8em; font-weight: 700; color: var(--c-sub); }
.clinic-detail dd { flex: 1 1 280px; margin: 0; }
.clinic-detail .clinic__actions { margin-top: 24px; }
.clinic-detail__body { margin-top: 40px; }
.pagination { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--c-border); border-radius: 8px; color: var(--c-green); text-decoration: none; font-weight: 700; }
.pagination .current { background: var(--c-green); border-color: var(--c-green); color: #FFFFFF; }
.sitemap-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); max-width: 760px; }
.sitemap-list li { border-bottom: 1px solid var(--c-line); }
.sitemap-list a { display: flex; align-items: center; min-height: 56px; color: var(--c-green); font-weight: 700; text-decoration: none; }
.sitemap-list ul { list-style: none; margin: 0 0 12px; padding: 0 0 0 1.5em; }
.sitemap-list ul li { border: 0; }
.sitemap-list ul a { min-height: 44px; font-weight: 400; }

/* ---------- フォーム（入会申込・ログイン） ---------- */
.form-lead { margin: 0 0 24px; color: #B4233A; font-weight: 700; }
.entry input[type="text"], .entry input[type="email"], .entry input[type="tel"], .entry input[type="url"],
.entry input[type="number"], .entry input[type="date"], .entry input[type="password"], .entry select, .entry textarea,
.login-box input[type="text"], .login-box input[type="password"] {
	width: 100%; max-width: 520px; padding: 12px 14px;
	font-family: inherit; font-size: 17px; /* 16px以上：iPhoneで入力時に拡大されない */
	color: var(--c-ink); background: #FFFFFF;
	border: 1.5px solid var(--c-border); border-radius: 8px;
}
.entry textarea { min-height: 160px; }
.entry input[type="submit"], .entry button[type="submit"], .login-box input[type="submit"] {
	min-height: 56px; padding: 0 40px; border: 0; border-radius: 10px;
	background: var(--c-green); color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.login-box { max-width: 520px; padding: clamp(24px, 4vw, 40px); background: var(--c-pale); border-radius: 0 24px 24px 24px; }
.login-box p { margin: 0 0 16px; }
.login-box label { display: block; font-weight: 700; margin-bottom: 4px; }
.login-box .login-remember label { display: inline; font-weight: 400; }

/* ---------- フッター ---------- */
.site-footer { background: var(--c-green-deep); color: #FFFFFF; padding: 64px 0 32px; }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.footer__brand { flex: 1 1 300px; }
.footer__brand .brand { color: #FFFFFF; }
.footer__brand .brand__mark { border-color: var(--c-border); color: #FFFFFF; }
.footer__office { margin: 16px 0 0; font-size: 15px; line-height: 1.8; }
.footer__nav { flex: 1 1 320px; max-width: 520px; }
.footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: #FFFFFF; text-decoration: none; }
.footer__nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer__doctor { margin-top: 48px; padding-top: 24px; border-top: 1px solid #4E7568; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.footer__doctor span { font-size: 14px; margin-right: 8px; }
.copyright { margin: 40px 0 0; font-size: 13px; color: #CFE0D6; }
.copyright a { color: inherit; margin-left: 1em; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}