/* 地域から探す介護サービス（/area/ 配下）専用のスタイル */

.oyano-area-page .sub-section,
.oyano-area-page .sidebar {
	display: none;
}

.area-hub,
.oyano-area-page {
	--area-main: #0650cb;
	--area-main-dark: #0540a2;
	--area-soft: #f6f8fc;
	--area-line: #d8dfeb;
	--area-text: #333333;
	--area-muted: #667085;
	/* セクションごとの背景色（白・薄い青・濃い青の3色。ここを変えると、色を変えられる） */
	--area-bg-white: #ffffff;
	--area-bg-pale: #f2f7fd;
	--area-bg-blue: #e6edf8;
	--area-bg-guide: var(--area-bg-pale);
	--area-bg-cities: var(--area-bg-white);
	--area-bg-list: var(--area-bg-blue);
	--area-bg-faq: var(--area-bg-white);
	--area-bg-siblings: var(--area-bg-pale);
	--area-bg-columns: var(--area-bg-blue);
	--area-bg-ads: var(--area-bg-pale);
	color: var(--area-text);
	line-height: 1.8;
}

.area-hub * {
	box-sizing: border-box;
}

.area-hub h2 {
	margin: 2.4em 0 .8em;
	padding: 0 0 .4em;
	border: 0;
	border-bottom: 2px solid var(--area-main);
	font-size: 1.35rem;
	background: none;
}

.area-hub h2::before,
.area-hub h2::after {
	display: none;
}

.area-hub section:first-of-type h2:first-child {
	margin-top: 1.4em;
}

.area-hub a {
	text-decoration: none;
}

/* 上部の紹介エリア */
.area-hero {
	margin: 0 0 30px;
	padding: 20px 26px 22px;
/* 	background: linear-gradient(135deg, var(--area-soft) 0%, #f6f8fc 100%); */
	background: #fff;
}


.area-hero__lead {
	margin: 0;
	font-size: 1rem;
	color: var(--area-text);
}

.area-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.area-stat {
	flex: 1 1 140px;
	padding: 12px 16px;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(6, 80, 203, .12);
	text-align: center;
}

.area-stat__num {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--area-main);
}

.area-stat__num--text {
	font-size: 1.4rem;
	line-height: 1.5;
}

.area-stat__label {
	display: block;
	font-size: .8rem;
	color: var(--area-muted);
}

/* 日本地図 */
.area-mapwrap {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	margin-top: 20px;
}

.area-map {
	display: block;
	width: 100%;
	height: auto;
	max-width: 640px;
	margin: 0 auto;
}

.area-map .pref {
	fill: #dfe4ee;
	stroke: #fff;
	stroke-width: 1.3;
	stroke-linejoin: round;
}

.area-map .pref.is-active {
	fill: #c3d4f3;
	cursor: pointer;
	transition: fill .15s;
}

.area-map__link:hover .pref.is-active,
.area-map__link:focus .pref.is-active {
	fill: var(--area-main);
}

.area-map__link:focus {
	outline: none;
}

.area-map__link:focus .pref.is-active {
	stroke: #f2b84b;
	stroke-width: 2.5;
}

.area-map__frame {
	fill: #f6f8fc;
	stroke: #c5cfe0;
	stroke-width: 1;
}







/* 地図と都道府県一覧のホバー連動 */
.area-map .pref.is-hover {
	fill: #8fb0ec;
}

.area-map .pref.is-active.is-hover {
	fill: var(--area-main);
}

.area-chips a.is-hover,
.area-chips span.is-hover,
.area-chips a.is-active.is-hover {
	border-color: var(--area-main);
	background: var(--area-main);
	color: #fff;
}

/* 地方ごとの行（コンパクトな一覧） */
.area-region {
	display: grid;
	grid-template-columns: 5.6em minmax(0, 1fr);
	gap: 4px 8px;
	align-items: start;
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--area-line);
}

.area-region:first-child {
	padding-top: 0;
}

.area-hub .area-region .area-region__title {
	margin: 3px 0 0;
	padding: 0;
	border: 0;
	font-size: .78rem;
	font-weight: 700;
	color: var(--area-muted);
}

.area-region .area-chips {
	gap: 4px;
}

.area-region .area-chips a,
.area-region .area-chips span {
	padding: 1px 9px;
	font-size: .78rem;
	line-height: 1.75;
}

.area-region .area-chips span {
	cursor: default;
}

/* チップ */
.area-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.area-chips li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.area-chips a,
.area-chips span {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid var(--area-line);
	background: #fff;
	font-size: .9rem;
	color: var(--area-text);
}

.area-chips a {
	border-color: var(--area-main);
	color: var(--area-main-dark);
}

.area-chips a.is-active {
	background: #fff;
	color: var(--area-main-dark);
}

.area-chips a:hover {
	background: var(--area-main);
	color: #fff;
}

.area-chips a.is-active:hover {
	background: var(--area-main);
	color: #fff;
}

.area-chips span {
	color: #9aa3b5;
	background: #f3f5f9;
}

.area-chips small {
	margin-left: .5em;
	font-size: .72rem;
	color: inherit;
	opacity: .75;
}

/* サービスのカード */
/* 枚数が割り切れなくても、最後の段が中央に来るように、flexで並べる */
.area-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-top: 26px;
}

.area-cards > .area-card {
	flex: 0 0 calc((100% - 14px * 3) / 4);
	min-width: 0;
}

.area-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 16px 14px;
	border: 1px solid var(--area-line);
	background: #fff;
	color: var(--area-text);
	box-shadow: 0 2px 6px rgba(6, 80, 203, .06);
	transition: transform .15s, box-shadow .15s, border-color .15s;
}

.area-card:hover {
	transform: translateY(-3px);
	border-color: var(--area-main);
	box-shadow: 0 8px 18px rgba(6, 80, 203, .14);
}

.area-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 6px;
	border-radius: 12px;
	background: var(--area-soft);
	color: var(--area-main);
	font-size: 1.25rem;
}

.area-card__icon i {
	margin-right: 0;
}

.area-card__name {
	font-size: 1.1rem;
	font-weight: 700;
}

.area-card__count {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--area-main);
}

.area-card__count small {
	margin-left: 2px;
	font-size: .8rem;
	color: var(--area-muted);
}

.area-card__text {
	flex: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	overflow: hidden;
	font-size: .8rem;
	line-height: 1.7;
	color: var(--area-muted);
}

.area-card__more {
	margin-top: 8px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--area-main);
}

.area-card__more i {
	margin-left: .4em;
	transition: transform .15s;
}

.area-card:hover .area-card__more i {
	transform: translateX(4px);
}

/* 解説とポイント */
.area-guide {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.area-guide__about h2 {
	font-size: 1.25rem;
}

.area-guide__points {
	padding: 4px 22px 18px;
/* 	border-radius: 16px; */
	background: var(--area-soft);
}

.area-hub .area-guide__points h2 {
	margin-top: 1em;
	font-size: 1.15rem;
}

.area-checks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.area-checks li {
	display: flex;
	gap: 10px;
	margin: 0 0 .6em;
	padding: 0;
	list-style: none;
	font-size: .92rem;
	line-height: 1.7;
}

.area-checks i {
	flex: none;
	margin-top: .35em;
	color: var(--area-main);
}

/* 棒グラフ */
.area-bars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(5, auto);
	grid-auto-flow: column;
	gap: 4px 32px;
}

.area-bar {
	display: grid;
	grid-template-columns: 6.2em minmax(0, 1fr) 3.6em;
	gap: 12px;
	align-items: center;
	padding: 6px 10px;
	border-radius: 10px;
	color: var(--area-text);
}

.area-bar:hover {
	background: var(--area-soft);
}

.area-bar__name {
	font-size: .92rem;
	font-weight: 700;
}

.area-bar__track {
	height: 12px;
	border-radius: 6px;
	background: #e9edf5;
	overflow: hidden;
}

.area-bar__fill {
	display: block;
	height: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, #5b8fe0, var(--area-main));
}

.area-bar__num {
	font-size: .9rem;
	text-align: right;
	color: var(--area-muted);
}

.area-more {
	margin-top: 14px;
}

.area-more summary,
.area-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--area-main-dark);
}

.area-more .area-chips {
	margin-top: 12px;
}

/* 事業所のカード */
.area-filter {
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff8e6;
	font-size: .9rem;
}

.area-offices {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.area-office {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	border: 1px solid var(--area-line);
	border-radius: 12px;
	background: #fff;
	color: var(--area-text);
	transition: border-color .15s, box-shadow .15s;
}

.area-office:hover {
	border-color: var(--area-main);
	box-shadow: 0 4px 12px rgba(6, 80, 203, .1);
}

.area-office__name {
	font-weight: 700;
	line-height: 1.5;
	color: var(--area-main-dark);
}

.area-office__line {
	font-size: .82rem;
	line-height: 1.6;
	color: var(--area-muted);
}

.area-office__line i {
	width: 1.3em;
	margin-right: .2em;
	color: #9aaed3;
}

.area-count {
	margin: 0 0 12px;
	font-size: .85rem;
	color: var(--area-muted);
}

.area-count strong {
	color: var(--area-text);
}

/* ページ送り */
.area-pager {
	margin-top: 26px;
	text-align: center;
}

.area-pager__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.area-pager__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.area-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	min-width: 2.6em;
	height: 2.6em;
	padding: 0 .9em;
	border: 1px solid var(--area-line);
	border-radius: 10px;
	background: #fff;
	color: var(--area-main);
	font-size: .9rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}

.area-pager a.page-numbers:hover {
	border-color: var(--area-main);
	background: var(--area-soft);
}

.area-pager .page-numbers.current {
	border-color: var(--area-main);
	background: var(--area-main);
	color: #fff;
}

.area-pager .page-numbers.dots {
	min-width: 1.4em;
	padding: 0;
	border-color: transparent;
	background: none;
	color: var(--area-muted);
}

.area-pager .page-numbers i {
	font-size: .75em;
}


.area-note {
	margin-top: 16px;
	font-size: .8rem;
	color: var(--area-muted);
}

/* よくある質問 */
.area-faq details {
	margin-bottom: 10px;
	padding: 12px 18px;
	border: 1px solid var(--area-line);
	border-radius: 12px;
	background: #fff;
}

.area-faq details[open] {
	border-color: var(--area-main);
	background: #fafbfe;
}

.area-faq p {
	margin: .6em 0 0;
	font-size: .92rem;
}

/* コラム */
.area-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.area-column {
	padding: 14px 16px;
	border-left: 4px solid var(--area-main);
	background: var(--area-soft);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--area-text);
}

.area-column:hover {
	background: #dde6f6;
}

@media (max-width: 1000px) {
	.area-cards > .area-card {
		flex-basis: calc((100% - 14px) / 2);
	}
}

@media (max-width: 768px) {
	.area-hero {
		padding: 16px 18px;
	}

	.area-bars {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
	}

	.area-mapwrap,
	.area-guide {
		grid-template-columns: minmax(0, 1fr);
	}

	.area-offices,
	.area-columns {
		grid-template-columns: minmax(0, 1fr);
	}

	.area-pager .page-numbers {
		min-width: 2.3em;
		height: 2.4em;
		padding: 0 .6em;
	}

	.area-bar {
		grid-template-columns: 6em minmax(0, 1fr) 3.8em;
		gap: 8px;
	}
}

@media (max-width: 560px) {
	.area-card__text {
		display: none;
	}

	.area-card {
		padding: 14px 14px 12px;
	}
}

@media (max-width: 560px) {
	.area-stats {
		flex-wrap: nowrap;
		gap: 8px;
	}

	.area-stat {
		flex: 1 1 0;
		min-width: 0;
		padding: 10px 6px;
	}

	.area-stat__num {
		font-size: 1.4rem;
	}

	.area-stat__num--text {
		font-size: 1rem;
		line-height: 1.9;
	}

	.area-stat__label {
		font-size: .7rem;
	}
}

/* 市区町村別広告枠のバナー */
.area-hub .city-banner {
	margin: 0 0 20px;
	text-align: center;
}

.area-hub .city-banner a {
	display: block;
}

.area-hub .city-banner img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0 auto;
}

/* 基本ページのスクエアバナー（最大3つ）。3つの枠に、左から順に並べる。画像は切り取らない */
.area-hub .city-banner--squares {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin: 26px 0 26px;
	text-align: left;
}

.area-hub .city-banner--squares a {
	display: block;
}

.area-hub .city-banner--squares img {
	display: block;
	width: 100%;
	height: auto;
}

/* 「PR」の表記 */
.area-hub .city-banner a {
	position: relative;
}

.area-hub .city-banner__pr {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
	padding: 0 7px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	line-height: 1.7;
	letter-spacing: .06em;
	pointer-events: none;
}

/* 狭い画面では2列にする */
@media (max-width: 560px) {
	.area-hub .city-banner--squares {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}
}

/* セクションごとの背景色。背景は画面の左右いっぱいに広げ、中身は元の幅のまま */
.oyano-area-page {
	overflow-x: clip;
}

.area-hub--service .area-hero,
.area-hub .area-sec {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
	border-radius: 0;
}

.area-hub--service .area-hero {
	margin-bottom: 0;
	padding-top: 30px;
	padding-bottom: 34px;
}

.area-hub .area-sec {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 44px;
	padding-bottom: 52px;
}

.area-hub .area-sec > h2:first-child,
.area-hub .area-sec > .city-banner + h2 {
	margin-top: 0;
}

.area-hub .area-sec--guide {
	background: var(--area-bg-guide);
}

.area-hub .area-sec--guide .area-guide__points {
	background: #fff;
}

.area-hub .area-sec--cities {
	background: var(--area-bg-cities);
}

.area-hub .area-sec--list {
	background: var(--area-bg-list);
}

.area-hub .area-sec--siblings {
	background: var(--area-bg-siblings);
}

.area-hub .area-sec--columns {
	background: var(--area-bg-columns);
}

.area-hub .area-sec--columns .area-column {
	background: #fff;
}

.area-hub .area-sec--ads {
	background: var(--area-bg-ads);
	padding-top: 30px;
	padding-bottom: 30px;
}

.area-hub .area-sec .city-banner,
.area-hub .area-sec .city-banner--squares {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 560px) {
	.area-hub .area-sec {
		padding-top: 32px;
		padding-bottom: 38px;
	}

	.area-hub--service .area-hero {
		padding-top: 22px;
		padding-bottom: 26px;
	}

	.area-hub .area-sec--ads {
		padding-top: 22px;
		padding-bottom: 22px;
	}
}

/* 地図を置いたページ（TOPのデモなど）のセクション背景色。都道府県ページと同じ色を使う */
.oyano-area-page section.sectionBox {
	background-color: var(--area-bg-cities);
}

.oyano-area-page section.sectionBox:nth-child(2) {
	background-color: var(--area-bg-guide);
}

.oyano-area-page section.sectionBox:last-of-type {
	background-color: var(--area-bg-columns);
}

@media (max-width: 560px) {
	.oyano-area-page section.sectionBox {
		padding-top: 32px;
		padding-bottom: 38px;
	}
}