@charset "UTF-8";
/* ============================================================
	 社会福祉法人 本城福祉会 TOPページ
	 Figma: 20260706_本城福祉会(PC TOP) node 2034-10 準拠
	 ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
	--color-primary: #25977f;   /* メインの緑 */
	--color-accent:  #329d87;   /* 見出し用の緑 */
	--color-text:    #333;
	--color-gray:    #8d8d8d;
	--color-muted:   #626161;
	--bg-beige:      #f2f0e4;   /* お知らせカテゴリ背景 */
	--bg-cream:      #f6f5ed;   /* 帯・ネームプレート背景 */
	--bg-card:       #fcfcf9;   /* カード背景 */
	--bg-page:       #fcfcf9;   /* ページ全体の背景 */
	--pill-gray:     #e7e7e7;
	--font-base: "hiragino-kaku-gothic-pron", "Hiragino Kaku Gothic ProN",
							 "ヒラギノ角ゴ ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
	--font-maru: "hiragino-maru-gothic-pron", "Hiragino Maru Gothic ProN",
							 "ヒラギノ丸ゴ ProN", var(--font-base);
	--content-width: 1318px;
	--radius: 20px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	/* 100vw指定の帯や装飾のはみ出しをルートでクリップ(横スクロール・幅ガタつき防止) */
	overflow-x: clip;
}
body {
	margin: 0;
	overflow-x: clip; /* 画面外に伸びる装飾(ぼかしサークル等)による横スクロールを防止 */
	font-family: var(--font-base);
	font-weight: 300; /* Adobe Fonts のキットは W3(300)/W6(600) の2ウェイト */
	font-size: 1rem;
	line-height: 2.0625; /* 33px */
	color: var(--color-text);
	background: var(--bg-page);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { transition: opacity .3s; }
a:hover { opacity: .7; }
/* テキストリンクのデフォルト配色(:whereで特異性0にし、ボタン・ヘッダー・フッター等
	 コンポーネント側の個別指定に無条件で負けるようにする。コンポーネント側で
	 color/text-decorationを指定していない場合はこのデフォルトが適用される) */
:where(a) {
	color: #0265de;
	text-decoration: underline;
}
:where(a:hover),
:where(a:active) {
	color: #6ca1e2;
	text-decoration: none;
}
:where(a:visited) {
	color: #3a22ed;
}
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }

/* ---------- 汎用 ---------- */
.section__inner {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 2.5rem;
}
.sec-head { margin-bottom: 2.5rem; }
/* 英語ラベル(アイコン付き)が上、日本語見出しが下 */
.sec-label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 600; /* W6 */
	letter-spacing: .05em;
	color: var(--color-primary);
}
.sec-label__icon { width: 22px; height: auto; }
.sec-title {
	font-size: 2.125rem;
	font-weight: 400;
	letter-spacing: .08em; /* 2.72px */
	line-height: 1.5;
	color: var(--color-text);
}
.tag {
	display: inline-block;
	margin-right: 0.75rem;
	padding: 0 1.125rem;
	background: var(--pill-gray);
	border-radius: 100px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 22px;
}
/* 緑丸+矢印 */
.circle-arrow {
	display: inline-block;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-primary) url("../images/icon_arrow.svg") no-repeat center / 12px auto;
}
/* 緑ボタン */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-width: 306px;
	padding: 0.75rem 1.5rem;
	background: var(--color-primary);
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.6;
}
.btn-primary__arrow {
	width: 16px; height: 16px;
	background: url("../images/icon_arrow.svg") no-repeat center / contain;
}

/* ============================================================
	 ヘッダー
	 ============================================================ */
.site-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: transparent;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1440px;
	margin: 0 auto;
	padding: 1.4375rem 3.8125rem 0;
}
.site-header__logo { line-height: 0; }
.site-header__logo img { width: 200px; }
.global-nav__list {
	display: flex;
	gap: 33px;
	font-size: 1rem;
	line-height: 1.5;
}
.global-nav__item { position: relative; }
.global-nav__item > a { display: inline-block; padding: 0.5rem 0; color: var(--color-text); text-decoration: none; }
.global-nav__item > a:hover { opacity: 1; color: #878787; } /* デザイン: ホバーでグレー */
/* ドロップダウンを持つ項目: 緑の下向き矢印 */
.global-nav__item.has-sub > a {
	padding-right: 1.125rem;
	position: relative;
}
.global-nav__item.has-sub > a::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
	transform: translateY(-70%) rotate(45deg);
}
/* ドロップダウンメニュー(デザイン: 白 / 角丸10px / 影 0 0 4px 25% / 幅303px) */
.global-nav__sub {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 110;
	min-width: 303px;
	padding: 1rem 0 1.125rem;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 0 4px rgba(0, 0, 0, .25);
	opacity: 0;
	visibility: hidden;
	translate: 0 10px;
	transition: opacity .25s, translate .25s, visibility .25s;
}
/* ホバーの途切れ防止(項目とパネルの隙間を埋める) */
.global-nav__item.has-sub::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	height: 10px;
}
.global-nav__item:hover .global-nav__sub,
.global-nav__item:focus-within .global-nav__sub {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}
.global-nav__sub li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0.6875rem 1.5rem 0.6875rem 1.3125rem;
	font-size: 1rem;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--color-text);
	text-decoration: none;
}
.global-nav__sub li a::before {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--color-primary) url("../images/icon_arrow.svg") no-repeat center / 7px auto;
}
.global-nav__sub li a:hover { opacity: 1; color: #878787; }

/* 右側固定ボタン */
.side-nav {
	position: fixed;
	top: 238px;
	right: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.side-nav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 1.25rem 0;
	border-radius: 10px 0 0 10px;
	color: #fff;
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .1em;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.side-nav__btn--reserve { background: var(--color-primary); min-height: 180px; }
.side-nav__btn--contact { background: #f99901; min-height: 120px; }

/* ============================================================
	 メインビジュアル / 本城福祉会について / メリット / 部門特徴
	 → トップページ専用のため assets/css/top.css に分離
	 ============================================================ */

/* ============================================================
	 お知らせ
	 ============================================================ */
.news { padding: 8.125rem 0 3.75rem; }
.news__body {
	display: flex;
	gap: 78px;
	align-items: flex-start;
}
.news__categories {
	flex: 0 0 330px;
	padding: 2.125rem 0.9375rem;
	background: var(--bg-beige);
	border-radius: 16px;
}
.news-cat__item button {
	display: block;
	width: 100%;
	padding: 0.5rem 1.25rem;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	color: var(--color-gray);
	font-size: 1rem;
	line-height: 1.7;
	cursor: pointer;
	transition: opacity .3s;
}
/* is-activeは対象外(タップ後もhoverが残るiOS Safariの仕様で、選択直後の濃い色が薄く見えるのを防ぐ) */
.news-cat__item:not(.is-active) button:hover { opacity: .7; }
.news-cat__item.is-active button {
	position: relative;
	background: var(--color-primary);
	border-radius: 100px;
	color: #fff;
	font-weight: 600;
}
.news-cat__item.is-active button::after {
	content: "";
	position: absolute;
	right: 16px; top: 50%;
	translate: 0 -50%;
	width: 12px; height: 12px;
	background: url("../images/icon_arrow.svg") no-repeat center / contain;
}
/* コンテンツ部分: デザイン準拠の固定高さ+スクロール */
.news__list {
	flex: 1;
	height: 413px; /* カテゴリカードと同じ高さ */
	overflow-y: auto;
	padding-right: 1.75rem;
	scrollbar-width: thin;
	scrollbar-color: #d9d9d9 transparent;
}
.news__list::-webkit-scrollbar { width: 8px; }
.news__list::-webkit-scrollbar-track { background: transparent; }
.news__list::-webkit-scrollbar-thumb {
	background: #d9d9d9;
	border-radius: 100px;
}
.news-item {
	padding: 1.5rem 0 1.75rem;
	border-bottom: 1px solid #ddd;
}
.news-item:first-child { border-top: 1px solid #ddd; }
.news-item__meta {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 0.375rem;
}
.news-item__date { font-weight: 600; font-size: 1rem; flex-shrink: 0; line-height: 1.7; }
.news-item__cat {
	flex-shrink: 0;
	padding: 0.125rem 1.375rem;
	background: var(--color-primary);
	border-radius: 100px;
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.7;
}
.news-item__title { display: block; font-size: 1rem; line-height: 1.7; color: var(--color-text); text-decoration: none; }

/* ============================================================
	 緑のぼかしサークル共通キーフレーム
	 (top.cssのabout/benefits/featuresと、style.cssのbusinessで共用)
	 ============================================================ */
/* 漂う動き */
@keyframes bubble-drift {
	0%   { transform: translate(0, 0) scale(1); }
	25%  { transform: translate(42px, -48px) scale(1.07); }
	50%  { transform: translate(-24px, -86px) scale(.95); }
	75%  { transform: translate(-52px, -26px) scale(1.05); }
	100% { transform: translate(0, 0) scale(1); }
}
/* 蛍のような明滅(3つ同時に呼吸) */
@keyframes bubble-glow {
	0%, 100% { opacity: .5; }
	50%      { opacity: 1; }
}
/* ============================================================
	 高齢者福祉事業 / 幼児教育事業
	 ============================================================ */
.business { padding: 7.5rem 0 0; }
.business--child { position: relative; padding-bottom: 3.75rem; }
.business--child .section__inner {
	position: relative;
	padding-top: 3.75rem;
	padding-bottom: 3.75rem;
}
.business--child .section__inner::before {
	/* デザイン: 右端フルブリード・左角丸のクリーム帯(2段のカードを横断 / 左は本文より60px外側) */
	content: "";
	position: absolute;
	top: 285px;
	bottom: 6px;
	left: -60px;
	right: calc(50% - 50vw);
	z-index: -1;
	background: var(--bg-cream);
	border-radius: var(--radius) 0 0 var(--radius);
}
/* 幼児教育事業セクションの緑ぼかしサークル */
.business__bubble {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle,
		rgba(50, 157, 135, .20) 0%,
		rgba(50, 157, 135, .08) 45%,
		rgba(50, 157, 135, 0) 70%);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 1;
}
.business__bubble--01 {
	width: 214px; height: 214px;
	left: 24%; top: 30px;
	animation: bubble-drift 11s ease-in-out -5s infinite,
						 bubble-glow 4.5s ease-in-out infinite;
}
.business__bubble--02 {
	width: 367px; height: 367px;
	left: 78%; bottom: 40px;
	animation: bubble-drift 9s ease-in-out -2s infinite reverse,
						 bubble-glow 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.business__bubble { animation: none; }
}
/* 高齢者福祉事業: カード下部を横断するクリーム帯(左端フルブリード・右角丸) */
.facility-cards--col3 {
	position: relative;
	z-index: 0;
}
.facility-cards--col3::before {
	content: "";
	position: absolute;
	top: 155px;
	height: 232px;
	left: calc(50% - 50vw);
	right: calc(50% - 50vw + 4.24vw);
	z-index: -1;
	background: var(--bg-cream);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.facility-cards {
	display: grid;
	gap: 40px 23px;
}
.facility-cards--col3 { grid-template-columns: repeat(3, 1fr); }
/* 幼児教育事業: 各段は幅83%で、1段目は左寄せ・2段目は右寄せ(互い違い) */
.facility-cards--col2 {
	display: flex;
	flex-wrap: wrap;
	gap: 35px 2%;
}
.facility-cards--col2 .facility-card {
	width: 40.5%; /* (83% - 間隔2%) ÷ 2 */
}
.facility-cards--col2 .facility-card:nth-child(3) {
	margin-left: auto; /* 2段目をコンテナ右端へ */
}
.facility-card { display: block; color: var(--color-text); text-decoration: none; }
.facility-card__photo {
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	aspect-ratio: 384 / 290;
}
.facility-card--wide .facility-card__photo { aspect-ratio: 490 / 290; }
.facility-card__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s;
}
.facility-card:hover .facility-card__photo img { transform: scale(1.05); }
.facility-card__logo {
	display: block;
	max-width: 100%;
	max-height: 63px;
	width: auto;
	height: auto;
}
.facility-card__name {
	position: relative;
	display: flex;
	align-items: center;
	width: 59%; /* デザイン: 227px/384px */
	margin-top: -5.375rem; /* 写真に86px重なる */
	min-height: 115px;
	padding: 0.875rem 3.5rem 0.875rem 1.5rem;
	background: var(--bg-cream);
	border-radius: 0 var(--radius) var(--radius) 0;
	line-height: 1.4;
}
/* kado2.png(クリーム色の逆R)で写真との接合部を滑らかに */
.facility-card__name::before,
.facility-card__name::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: url("../images/kado2.png") no-repeat center / 100% 100%;
}
.facility-card__name::before {
	top: -20px; /* プレート上端×写真左端 */
	left: 0;
}
.facility-card__name::after {
	right: -20px; /* プレート右端×写真下端 */
	bottom: 29px;
}
/* 幼児教育事業のカードはプレートがやや浅め */
.facility-cards--col2 .facility-card__name {
	width: 66%; /* デザイン: 323px/490px */
	margin-top: -4rem;
	min-height: 95px;
}
.facility-cards--col2 .facility-card__name::after { bottom: 31px; }
.facility-card__label {
	display: block;
	font-size: 0.8125rem;
	color: var(--color-text);
}
.facility-card__title {
	display: block;
	font-size: 1.3125rem;
	letter-spacing: .04em;
}
.facility-card__title--maru {
	font-family: var(--font-maru);
	font-size: 1.5625rem;
}
.facility-card__name .circle-arrow {
	position: absolute;
	right: 18px;
	top: 50%;
	translate: 0 -50%;
}

/* ============================================================
	 リンクバナー
	 ============================================================ */
.links { padding: 7.5rem 0 3.75rem; }
.link-banners {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 70px 40px;
}
.link-banner {
	position: relative;
	display: flex;
	gap: 28px;
	padding: 2.125rem 3.75rem 2.125rem 1.125rem;
	border: 1px solid #c9c9c9;
	border-radius: 16px;
	color: var(--color-text);
	text-decoration: none;
}
.link-banner__illust {
	flex-shrink: 0;
	align-self: center;
	width: 107px; height: 107px;
}
.link-banner__body { flex: 1; }
.link-banner__label {
	display: block;
	margin-bottom: 0.125rem;
	color: var(--color-primary);
	font-size: 0.75rem;
	font-weight: 600;
}
.link-banner__title {
	display: block;
	margin-bottom: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #c9c9c9;
	font-size: 1.5rem;
	line-height: 1.5;
}
.link-banner__text {
	display: block;
	font-size: 1rem;
	line-height: 1.625; /* 26px */
}
.link-banner .circle-arrow {
	position: absolute;
	top: 42px;
	right: 28px;
}

/* ============================================================
	 お電話でのお問い合わせ
	 ============================================================ */
.contact {
	position: relative;
	display: flow-root; /* カードの上マージンがセクション外へ相殺されるのを防止 */
	margin: 8.75rem auto 0;
	width: min(91.5%, 1316px); /* デザイン: 左右61px空き */
}
/* 背景写真の帯(デザイン: 1316×458 / 角丸20px) */
.contact::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 458px;
	background: url("../images/bg_contact.jpg") no-repeat center / cover;
	border-radius: var(--radius);
}
/* 下端のグラデーション(下がページ背景色→上が透明) */
.contact::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 458px;
	border-radius: var(--radius);
	background: linear-gradient(0deg, #fcfcf9, transparent 40% 100%);
}
/* カード: 写真下部に重なり、写真より192px下へはみ出す(デザイン: 904×339 / 写真上端から311px) */
.contact__card {
	position: relative;
	z-index: 1;
	max-width: 904px;
	margin: 19.4375rem auto 0;
	padding: 3.125rem 1.25rem 3.5rem;
	background: var(--bg-card);
	border-radius: 18px;
	text-align: center;
}
.contact__title { font-size: 1.3125rem; font-weight: 400; line-height: 1.5; }
.contact__tel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin: 0.5rem 0 0.25rem;
	white-space: nowrap;
}
.contact__tel-icon { width: 36px; }
.contact__tel a {
	font-family: "Roboto", var(--font-base);
	font-weight: 500;
	font-size: 3.375rem;
	letter-spacing: .04em;
	color: var(--color-primary);
	text-decoration: none;
	line-height: 1.3;
}
.contact__hours {font-size: 1rem; font-weight: 600; }
.contact__hours br {display: none; }
.contact__note {
	margin-top: 1.5rem;
	font-size: 1rem;
	line-height: 1.875; /* 30px */
}

/* ============================================================
	 フッター
	 ============================================================ */
.site-footer {
	position: relative;
	margin-top: 7.5rem;
	padding: 2.5rem 0 6.875rem; /* デザイン: コピーライト下に余白 */
	background: var(--bg-cream);
}
.pagetop {
	position: absolute;
	top: -40px;
	right: 80px;
	width: 81px; height: 81px;
	border-radius: 50%;
	background: var(--color-primary);
	text-decoration: none;
}
.pagetop::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/icon_arrow.svg") no-repeat center / 22px auto;
	transform: rotate(-90deg); /* 上向き矢印 */
}
.pagetop::after {
	content: "PAGE TOP";
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	translate: -50% 0;
	color: var(--color-text);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: .08em;
	white-space: nowrap;
}
.site-footer__inner {
	display: flex;
	gap: 33px; /* デザイン: カード右端546→見出し579 */
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 2.5rem;
}
/* 白い情報カード(デザイン: 424×308 / 角丸10px) */
.footer-info {
	flex: 0 0 424px;
	min-height: 308px;
	padding: 1.875rem 1.75rem;
	background: #fff;
	border-radius: 10px;
}
.footer-info__logo { margin-bottom: 1.5625rem; }
.footer-info__logo img { width: 272px; }
.footer-info__address { font-size: 1.125rem; line-height: 1.7; margin-bottom: 0.875rem; }
.footer-info__tel {
	display: flex;
	gap: 24px;
	padding-bottom: 0.625rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #ddd;
	font-size: 1.125rem;
}
.footer-info__tel span { display: flex; align-items: center; gap: 8px; }
.footer-info__tel img { width: 20px; }
.footer-info__hours { font-size: 0.9375rem; white-space: nowrap; }
/* リンク3列(見出し2列+見出しなし1列) */
.footer-nav {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	flex: 1;
	padding-top: 2rem; /* デザイン: 見出しy9142(カード上端+32px) */
}
.footer-nav__heading {
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #c2bc9b;
	color: var(--color-primary);
	font-size: 1.125rem;
	font-weight: 600;
}
.footer-nav__list li {
	position: relative;
	margin-bottom: 1.1875rem;
	padding-left: 0.9375rem;
	font-size: 1rem;
	line-height: 1.375; /* 22px */
}
.footer-nav__list li a { color: #333333; text-decoration: none; }
.footer-nav__list li a:hover,
.footer-nav__list li a:active {
	opacity: 1;
	color: #737373;
	text-decoration: underline;
}
.footer-nav__list li a:visited { color: #333333; }
.footer-nav__list li::before {
	content: "";
	position: absolute;
	left: 0; top: 8px;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #c2bc9b;
}
.footer-nav__list--single li { margin-bottom: 0.9375rem; }
.footer-nav__policy { margin-top: 0.3125rem; font-size: 0.9375rem; }
.site-footer__copyright {
	max-width: var(--content-width);
	margin: 1.25rem auto 0;
	padding: 0 2.5rem;
	text-align: right;
	color: var(--color-muted);
	font-size: 0.875rem;
}

/* ============================================================
	 ハンバーガーボタン(共通)
	 ============================================================ */
.menu-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit; /* iOS Safari実機対策(.sp-menu__facilityと同じ理由) */
	cursor: pointer;
}
.menu-btn span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-primary);
}
.menu-btn em {
	font-style: normal;
	font-size: 0.4375rem;
	font-weight: 600;
	color: var(--color-primary);
	letter-spacing: .05em;
}
/* トップページのヘッダーではPC時非表示・SP時のみ表示 */
.site-header .menu-btn { display: none; }

/* ============================================================
	 SPメニュー(全ページ共通)
	 ============================================================ */
body.menu-open { overflow: hidden; }
.sp-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	overflow-y: auto;
	background: var(--bg-beige);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}
.sp-menu.is-open { opacity: 1; visibility: visible; }
/* 上部バー(クリーム / ロゴ+CLOSE) */
.sp-menu__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
	height: 50px;
	padding: 0 1rem;
	background: var(--bg-cream);
}
.sp-menu__bar img { width: 115px; }
.menu-btn span.menu-btn__x {
	position: relative;
	display: block;
	width: 22px;
	height: 17px;
	background: none; /* .menu-btn span の横バー背景を打ち消し(×の中央に線が出るのを防止) */
}
.menu-btn__x::before,
.menu-btn__x::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 22px;
	height: 2px;
	background: var(--color-primary);
}
.menu-btn__x::before { transform: rotate(45deg); }
.menu-btn__x::after { transform: rotate(-45deg); }
.sp-menu__body {
	max-width: 520px;
	margin: 0 auto;
	padding: 1.25rem 1.0625rem 3.75rem;
}
.sp-menu__heading {
	margin: 1.625rem 0 0.625rem;
	color: var(--color-primary);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.5;
}
/* 施設行(写真+名前+開閉トグル) */
.sp-menu__facilities { border-top: 1px solid #d6d2c0; }
.sp-menu__facilities > li { border-bottom: 1px solid #d6d2c0; }
.sp-menu__facility {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 1.0625rem 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit; /* iOS Safari実機はbuttonにcolor未指定だとシステムのリンク色(青)で描画されるため明示 */
	text-align: left;
	cursor: pointer;
}
.sp-menu__facility > img {
	flex-shrink: 0;
	width: 122px;
	height: 80px;
	object-fit: cover;
	border-radius: 15px;
}
.sp-menu__facility-name {
	flex: 1;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}
.sp-menu__facility-name small {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
}
/* +/−トグル(施設イメージカラーの●+白い+ / 色はJSから --fc で注入) */
.sp-menu__toggle {
	position: relative;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fc, var(--color-primary));
}
.sp-menu__toggle::before,
.sp-menu__toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 12px;
	height: 2px;
	background: #fff;
	transition: transform .3s, opacity .3s;
}
.sp-menu__toggle::after { transform: rotate(90deg); }
.is-open > .sp-menu__facility .sp-menu__toggle::after {
	transform: rotate(0deg);
	opacity: 0;
}
/* 施設ごとのサブメニュー(アコーディオン) */
.sp-menu__sub {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s ease;
}
.is-open > .sp-menu__sub { max-height: 340px; }
.sp-menu__sub a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.6875rem 0.375rem 0.6875rem 1.625rem;
	border-top: 1px dashed #d6d2c0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text);
	text-decoration: none;
}
.sp-menu__sub li:last-child a { margin-bottom: 0.875rem; }
.sp-menu__sub a::after {
	content: "";
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--fc, var(--color-primary)) url("../images/icon_arrow.svg") no-repeat center / 7px auto;
}
/* 単独リンク(本城福祉会について等) */
.sp-menu__links { margin-top: 2.125rem; border-top: 1px solid #d6d2c0; }
.sp-menu__links li { border-bottom: 1px solid #d6d2c0; }
.sp-menu__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.0625rem 0.375rem 1.0625rem 0.625rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-text);
	text-decoration: none;
}
.sp-menu__links a::after {
	content: "";
	flex-shrink: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--color-primary) url("../images/icon_arrow.svg") no-repeat center / 9px auto;
}
.sp-menu__policy {
	margin: 1rem 0 2.625rem;
	padding-left: 0.625rem;
	font-size: 0.9375rem;
}
.sp-menu__policy a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-text);
	text-decoration: none;
}
.sp-menu__policy a::after {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--color-primary) url("../images/icon_arrow.svg") no-repeat center / 7px auto;
}
/* 電話カード */
.sp-menu__contact {
	padding: 1.625rem 1.25rem 1.875rem;
	background: #fff;
	border-radius: 15px;
	text-align: center;
}
.sp-menu__contact-title { font-size: 1.125rem; line-height: 1.6; }
.sp-menu__tel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0.5rem 0 0.375rem;
}
.sp-menu__tel img { width: 27px; }
.sp-menu__tel a {
	font-family: "Roboto", var(--font-base);
	font-weight: 500;
	font-size: 2.375rem;
	letter-spacing: .04em;
	color: var(--color-primary);
	text-decoration: none;
	line-height: 1.3;
}
.sp-menu__hours {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
}
.sp-menu__hours .tag { margin: 0.125rem 0 0; flex-shrink: 0; }
.sp-menu__btn {
	position: relative;
	display: block;
	max-width: 304px;
	margin: 0.875rem auto 0;
	padding: 0.75rem 1.875rem;
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
}
.sp-menu__btn::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	translate: 0 -50%;
	width: 14px;
	height: 14px;
	background: url("../images/icon_arrow.svg") no-repeat center / contain;
}
.sp-menu__btn--reserve { background: var(--color-primary); }
.sp-menu__btn--contact { background: #f99901; }
.sp-menu__btn:hover { opacity: .85; }

/* ---------- 下層メニューパネル(SP: スターバックス型ドリルダウン) ---------- */
/* 上部バー(CLOSE)は共通のまま残し、その下だけが切り替わる */
.sp-menu { overflow-x: hidden; }
.sp-menu__drill {
	position: fixed;
	inset: 50px 0 0 0; /* 上部バーの下から */
	z-index: 210;
	overflow-y: auto;
	background: var(--bg-beige);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .35s ease, visibility .35s;
}
.sp-menu__drill-bar {
	display: flex;
	padding: 1rem 1.0625rem 0;
}
.sp-menu.is-drilled .sp-menu__drill {
	transform: translateX(0);
	visibility: visible;
}
/* メイン側は少し左へ退く(奥行き感) */
.sp-menu__body { transition: transform .35s ease; }
.sp-menu.is-drilled .sp-menu__body { transform: translateX(-18%); }
/* 戻るボタン */
.sp-menu__back {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	cursor: pointer;
}
.sp-menu__back::before {
	content: "";
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--color-primary) url("../images/icon_arrow.svg") no-repeat center / 7px auto;
	transform: rotate(180deg); /* 左向き矢印 */
}
.sp-menu__drill-body { padding: 1.5rem 1.0625rem 3.75rem; max-width: 520px; margin: 0 auto; }
/* 施設名見出し(種別+名前) */
.sp-menu__drill-head {
	margin-bottom: 0.875rem;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-primary);
}
.sp-menu__drill-head small {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--color-text);
}
/* 下層リンク */
.sp-menu__drill-list { border-top: 1px solid #d6d2c0; }
.sp-menu__drill-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.0625rem 0.375rem 1.0625rem 0.625rem;
	border-bottom: 1px solid #d6d2c0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-text);
	text-decoration: none;
}
.sp-menu__drill-list a::after {
	content: "";
	flex-shrink: 0;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--fc, var(--color-primary)) url("../images/icon_arrow.svg") no-repeat center / 9px auto;
}

/* ---------- PC表示時のメニュー(デザイン: 4115-30 準拠) ---------- */
@media (min-width: 861px) {
	/* パネルは全幅でなく、左側は背面ページが緑がかって透ける */
	.sp-menu {
		background: rgba(84, 150, 130, .8);
		overflow-y: hidden;
	}
	.sp-menu__bar { height: 70px; padding: 0 26px; }
	.sp-menu__bar img { width: 147px; }
	.sp-menu__body {
		height: calc(100vh - 70px);
		margin-left: 14.2%; /* 左に背面ページを見せる */
		max-width: none;
		padding: 44px 64px 90px;
		overflow-y: auto;
		background: var(--bg-beige);
	}
	/* 見出しは上下段+下線 */
	.sp-menu__heading {
		margin: 34px 0 0;
		padding-bottom: 12px;
		border-bottom: 1px solid #d6d2c0;
	}
	.sp-menu__group:first-child .sp-menu__heading { margin-top: 0; }
	/* 施設はカード型(写真上・名前+●が下)で横一列 */
	.sp-menu__facilities {
		display: flex;
		align-items: flex-start;
		gap: 26px;
		border-top: 0;
	}
	.sp-menu__facilities > li {
		flex: 1;
		min-width: 0;
		border-bottom: 0;
	}
	.sp-menu__facility {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"img img"
			"name toggle";
		gap: 12px 10px;
		padding: 22px 0 0;
	}
	.sp-menu__facility > img {
		grid-area: img;
		width: 100%;
		height: auto;
		aspect-ratio: 320 / 170;
		border-radius: 10px;
	}
	.sp-menu__facility-name { grid-area: name; }
	.sp-menu__toggle { grid-area: toggle; align-self: center; }
	/* 単独リンクは横並び */
	.sp-menu__links {
		display: flex;
		gap: 60px;
		margin-top: 56px;
		border-top: 0;
	}
	.sp-menu__links li { flex: 1; border-bottom: 1px solid #d6d2c0; }
	.sp-menu__policy { margin: 26px 0 44px; }
	/* 電話カード: ボタン2つ横並び */
	.sp-menu__contact { padding: 36px 30px 44px; }
	.sp-menu__btn {
		display: inline-block;
		width: min(340px, 44%);
		margin: 20px 12px 0;
	}
}

/* ============================================================
	 レスポンシブ
	 ============================================================ */
@media (max-width: 1100px) {
	/* デザイン基準幅(PC)未満はテキスト・余白を全体的に85%に縮小(font-size/padding/marginをrem化して一括対応。pxのまま残した箇所は個別調整済みのため対象外) */
	html { font-size: 85%; }
	.site-footer__inner { flex-direction: column; gap: 40px; }
}

@media (max-width: 860px) {
	body { line-height: 1.9; }
	.site-header__inner { padding: 10px 20px; }
	.site-header__logo img { width: 115px; }
	.global-nav { display: none; } /* SPはハンバーガーメニューを使用 */
	.site-header .menu-btn { display: flex; }
	/* ハンバーガーは右上に固定表示。ヘッダーを抜けてコンテンツと重なるまでは背景なし */
	.js-menu-open {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 120;
		padding: 10px 15px 9px 12px;
		border-radius: 0 0 0 10px; /* 右上は画面端にぴったりつくよう角丸なし */
	}
	.site-header .js-menu-open { top: 0; } /* トップページのみスクロール前はヘッダー内の位置に合わせる */
	body.is-header-passed .js-menu-open {
		background: var(--bg-cream);
	}
	body.is-header-passed .site-header .js-menu-open { top: 0; } /* スクロール後は画面端にぴったり */
	.side-nav__btn { width: 28px; font-size: 12px; }

	.sec-title { font-size: 26px; }

	.news { padding: 80px 0 40px; }
	.news-item__meta { flex-wrap: wrap; gap: 8px 16px; }

	.business { padding: 80px 0 0; }
	.facility-cards--col3 { grid-template-columns: 1fr; }
	.facility-cards--col2 { flex-direction: column; }
	.facility-cards--col2 .facility-card { width: 100%; }
	.facility-cards--col2 .facility-card:nth-child(3) { margin-left: 0; }
	.business__bubble--01 { width: 150px; height: 150px; }
	.business__bubble--02 { width: 220px; height: 220px; left: 60%; }
	.facility-cards--col3::before { display: none; }
	.business--elderly .section__inner{
		position: relative;
	}
	.business--elderly .section__inner::before {
		content: "";
		position: absolute;
		top: 285px;
		bottom: -20px;
		left: -60px;
		right: calc(50% - 50vw);
		z-index: -1;
		background: var(--bg-cream);
	}
	.business--child .section__inner::before { inset: 250px 0 0 0; border-radius: 0; }
	.facility-card__name { margin-top: -60px; min-height: 0; }
	.facility-cards--col2 .facility-card__name { margin-top: -50px; }

	.links { padding: 80px 0 40px; }
	.link-banners { grid-template-columns: 1fr; gap: 30px; }
	.link-banner { flex-direction: column; padding: 24px 20px 30px; }
	.link-banner__illust { width: 90px; height: 90px; }
	.link-banner .circle-arrow { top: auto; bottom: 20px; }

	.contact { margin-top: 80px; width: 94%; }
	.contact::before, .contact::after { height: 300px; }
	.contact__card { margin-top: 170px; padding: 36px 5% 40px; }
	.contact__tel a { font-size: 36px; }
	.contact__tel-icon { width: 26px; }
	.contact__note { text-align: left; }
	.contact__note br { display: none; }

	.pagetop { top: -100px; right: 20px; width: 60px; height: 60px; }
	.pagetop::after { font-size: 12px; }
	.site-footer { padding-bottom: 50px; }
	.footer-info { flex: none; width: 100%; min-height: 0; padding: 28px 20px; }
	/* SP: 横スクロール防止(電話/FAXは縦積み、受付時間はラベルと時間を縦積み) */
	.footer-info__tel { flex-direction: column; gap: 8px; }
	.footer-info__hours { white-space: normal; }
	.footer-info__hours .tag { display: table; margin: 0 0 6px; }
	.footer-nav { flex-direction: column; gap: 30px; padding-top: 0; }
	.footer-nav__list--single { padding-top: 0; }
	.site-footer__copyright { text-align: center; }
}

/* スマホサイズ(タブレットはPCと同じ2カラムのまま) */
@media (max-width: 600px) {
	.contact__hours{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.contact__hours br {display: block; }
	.news__body { flex-direction: column; gap: 30px; }
	.news__categories { flex: none; width: 100%; padding: 10px 15px; }
	/* カテゴリ一覧をセレクトボックス風に折りたたむ(タップで展開/選択で閉じる。HTML/JSはPCと共通) */
	.news-cat__item:not(.is-active) { display: none; }
	.news__categories.is-open .news-cat__item { display: block; }
	.news__categories.is-open .news-cat__item.is-active button::after { rotate: 180deg; }
	.news__list { flex: none; height: 440px; padding-right: 16px; } /* flex:1(flex-basis:0%)がheightより優先されスクロールしない不具合の修正 */
}

@media (max-width: 428px) {
	.link-banner{
		padding-top: 15px;
		gap: 10px;
	}
	.link-banner__illust{
		width: 80px;
		height: 80px;
	}
}