@charset "UTF-8";
/* ============================================================
	 下層ページ共通スタイル
	 Figma: 20260714_本城福祉会 下層_老人ホーム栃ノ木荘_TOP 準拠
	 ※共通スタイル(style.css)の後に読み込むこと
	 ※施設ごとのテーマカラーは body のクラスで切り替え
	 ============================================================ */

/* ---------- 施設テーマカラー ---------- */
body {
	--sub-orange: #f49f00;  /* お問い合わせボタン */
}
body.theme-tochinokisou {
	--sub-accent: #14334f;  /* ネイビー(帯・ボタン・アクティブ) */
	--sub-slate:  #6690b4;  /* カテゴリピル */
	--sub-pale:   #dae6e4;  /* 淡い水色の帯 */
	--sub-orange: #f49f00;  /* お問い合わせボタン */
	--bubble-rgb: 102, 144, 180; /* ぼかしサークル(--sub-slateと同じ) */
}
body.theme-serapisu  { --bubble-rgb: 158, 205, 189; } /* #9ECDBD */
body.theme-tochiday  { --bubble-rgb: 42, 112, 130; }  /* #2A7082 */
body.theme-showa     { --bubble-rgb: 34, 187, 57; }   /* #22BB39 */
body.theme-kokoro    { --bubble-rgb: 255, 141, 70; }  /* #FF8D46 */
body.theme-tsubouchi { --bubble-rgb: 23, 161, 224; }  /* #17A1E0 */
body.theme-kukuna    { --bubble-rgb: 191, 123, 208; } /* #BF7BD0 */

/* 法人共通ページ(about・プライバシーポリシー等)は法人カラー */
body.theme-main {
	--sub-accent: var(--color-primary);  /* #25977f */
	--sub-pale:   #e5efe7;
	--sub-orange: #f99901;
	--bubble-rgb: 37, 151, 127; /* --color-primaryと同じ */
}
/* 法人ページはトップ用ヘッダー(site-header)を使用。
	 MVに重ねる前提のabsoluteを解除して通常フローで表示する */
.theme-main .site-header { position: static; }

/* ---------- 右側固定ボタン(施設カラーに上書き) ---------- */
[class*="theme-"] .side-nav__btn--reserve { background: var(--sub-accent); }
[class*="theme-"] .side-nav__btn--contact { background: var(--sub-orange); }

/* ============================================================
	 下層ヘッダー
	 ============================================================ */
.sub-header { position: relative; z-index: 100; }
/* 上段: 法人バー(クリーム) */
.sub-header__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
	height: 70px;
	padding: 0 1.625rem;
	background: var(--bg-cream);
}
.sub-header__corp img { width: 147px; }
/* ハンバーガー本体のスタイルは style.css(共通)側で定義 */
/* 下段: 施設ロゴ+施設内ナビ */
.sub-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 1.625rem 3.75rem 0 4.4375rem;
}
.sub-header__logo img { width: 130px; height: auto; }
.facility-nav ul {
	display: flex;
	gap: 36px;
	font-size: 1rem;
	line-height: 1.5;
}
.facility-nav a { color: var(--color-text); text-decoration: none; }

/* ============================================================
	 下層ページタイトル(.pagetitle)
	 ※.page-title は a-blog cms 標準ファイルのh1で使用済みのため別名
	 ============================================================ */
.pagetitle { position: relative; }
/* 全下層共通: タイトル直下に隙間なく敷かれる淡色帯(全幅・デザイン: 写真下端y619.6〜889.6) */
.pagetitle::after {
	content: "";
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	height: 270px;
	background: var(--sub-pale, #f6f5ed);
	z-index: -1; /* 本文コンテンツ(白カード等)の背面に敷く */
}
/* ---------- 施設TOP用MVタイプ ---------- */
.pagetitle--mv::before {
	content: "";
	position: absolute;
	top: 230px;    /* 写真上端から230px */
	bottom: -40px; /* 写真下端から40pxはみ出す */
	left: 0;
	right: 4.65%;  /* 67px/1440 */
	background: var(--sub-accent);
	border-radius: 0 0 var(--radius) 0;
}
.pagetitle--mv::after{
	top: 100%;
}
.pagetitle__photos {
	position: relative;
	display: flex;
	margin-left: 20.7%; /* 298px/1440 */
	overflow: hidden;
	border-radius: var(--radius) 0 0 var(--radius);
}
.pagetitle__photos img {
	height: auto;
	object-fit: cover;
}
/* 円形エンブレム(デザイン: 白円267px / x156.7 / 写真上端から97px)
	 シャドウの乗算ブレンドを写真・帯まで効かせるため、
	 本体にはz-index・backgroundを付けない(stacking contextを作らない) */
.pagetitle__emblem {
	position: absolute;
	top: 97px;
	left: 10.9%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(266.84px, 18vw);
	aspect-ratio: 1;
}
/* 乗算シャドウ(デザイン: 302px円 #6492B5 30% レイヤーブラー40 / 白円中心から-11,-7) */
.pagetitle__emblem-shadow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 113.27%; /* 302.25px/266.84px */
	aspect-ratio: 1;
	transform: translate(calc(-50% - 11px), calc(-50% - 7px));
	background: rgba(100, 146, 181, .3);
	border-radius: 50%;
	filter: blur(20px); /* Figmaレイヤーブラー40 = stdDeviation 20 */
	mix-blend-mode: multiply;
}
/* 白円(シャドウの上・ロゴの下) */
.pagetitle__emblem-circle {
	position: absolute;
	inset: 0;
	background: #fff;
	border-radius: 50%;
}
.pagetitle__emblem img { position: relative; width: 78%; height: auto; } /* デザイン: 208.8px/266.8px */
.pagetitle--lower::after { height: 430px; }

/* ---------- 下層汎用タイプ(写真右+ネイビーのタイトル帯) ----------
.pagetitle--lower { margin-top: 1.5625rem; } /* デザイン: 写真上端y166.7 */
.pagetitle--lower .pagetitle__photos {
	margin-left: 32%; /* 444px/1440 */
	margin-right: 4.17%; /* 60px/1440 */
	height: 288px;
	border-radius: var(--radius);
}
.pagetitle--lower .pagetitle__photos img { width: 100%; height: 100%; }
/* タイトル帯(デザイン: y234.5〜494.5 / 写真上端+68px〜写真下端+40px / 右8.47%空き・右角丸) */
.pagetitle--lower::before {
	content: "";
	position: absolute;
	top: 68px;
	bottom: -40px;
	left: 0;
	right: 8.47%; /* 122px/1440 */
	background: var(--sub-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
}
/* 見出しブロック(デザイン: x122 / 帯上端から63px / 白36px+白罫線+白抜きロゴ) */
.pagetitle__heading {
	position: absolute;
	top: 131px;
	left: 8.5%;
	color: #fff;
}
.pagetitle__title {
	min-width: 319px; /* デザイン: 罫線幅318.8px */
	padding-bottom: 1.25rem;
	border-bottom: 1px solid #fff;
	font-size: 2.25rem;
	font-weight: 600;
	line-height: 1.5;
}
.pagetitle__logo {
	display: block;
	width: 97px;
	height: auto;
	margin-top: 1.1875rem;
	opacity: .9;
}

/* ============================================================
	 お知らせ・ブログ
	 ============================================================ */
/* ※タイトル直下の淡色帯は .pagetitle::after(下層共通)で描画 */
.news-blog {
	position: relative;
	display: flow-root; /* カードのmargin-top 68pxの相殺防止(カード上端=写真下端+108pxを保つ) */
	margin-top: 2.5rem;
	padding-bottom: 3.75rem;
}
/* 淡い水色の帯 下段(全幅・カード背面) */
.news-blog::after {
	content: "";
	position: absolute;
	top: 205px;
	height: 400px;
	left: 0;
	right: 0;
	background: var(--sub-pale);
}
/* 白いカード(デザイン: x59〜右端 / 左角丸 / ネイビー帯下端から68px下がって始まり、上に淡色帯が覗く) */
.news-blog__card {
	position: relative;
	z-index: 1;
	margin: 4.25rem 0 0 4.1%;
	padding: 4.125rem 0 5rem;
	background: #fff;
	border-radius: var(--radius) 0 0 var(--radius);
}
/* コンテンツはカード基準ではなくブラウザ基準でセンタリング
	 (カードは左4.1%オフセット・幅95.9%のため、カード幅に対する左余白は
	 (50%-4.1%)/95.9% = 47.862% からコンテンツ幅の半分を引いた値になる)
	 スクロールバー等で収まらない場合は-20pxまで許容(内側padding 40pxの範囲内) */
.news-blog__card .section__inner,
.lower-body .section__inner {
	margin-left: clamp(-1.25rem, 47.862% - var(--content-width) / 2, 100%);
}
/* 配色の上書き */
.news-blog .sec-label { color: var(--sub-accent); }
.news-blog .news-cat__item.is-active button { background: var(--sub-accent); }
.news-blog .news-item__cat {
	background: var(--sub-slate);
	font-size: 0.875rem;
	padding: 0.125rem 1.125rem;
}
.news-blog .news__list { height: 620px; }
.news-blog .news__categories { min-height: 620px; }
/* 一覧へボタン(デザイン: 355×54 ネイビー) */
/*.btn-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 355px;
	margin: 3rem auto 0;
	padding: 0.875rem 1.25rem;
	background: var(--sub-accent);
	border-radius: 10px;
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
}
.btn-more::after {
	content: "";
	width: 14px;
	height: 14px;
	background: url("../images/icon_arrow.svg") no-repeat center / contain;
}*/
/* ============================================================
	 下層汎用 本文カード
	 Figma: 下層サンプル(4042-155) カード上端=写真下端+108px / 左4.1%オフセット
	 ============================================================ */
.lower-body {
	position: relative;
	margin: 6.75rem 0 0 4.1%;
	padding: 3.75rem 0 6.25rem; /* デザイン: SERVICEラベルはカード上端から61px */
	background: var(--bg-page);
	border-radius: var(--radius) 0 0 0;
}
.lower-body .sec-label { color: var(--sub-accent); }
.lower-body .sec-head { margin-bottom: 4rem; } /* デザイン: 見出し下〜最初のh3まで */
.lower-body .section__inner { padding: 0 4.375rem; } /* デザイン: 本文左端x131(inner左61+70) */
/* 2カラム(左: 見出し+本文 / 右: 写真394px) */
.lower-cols {
	display: flex;
	gap: 100px;
	flex-wrap: wrap;
}
.lower-cols__text {
	flex: 1;
	font-size: 1rem;
	line-height: 2.0625; /* デザイン: 33px/16px */
}
.lower-cols__text h3 {
	margin: 2.125rem 0 0.625rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sub-accent);
}
.lower-cols__text h3:first-child { margin-top: 0; }
.lower-note { margin-top: 3.25rem; }
.lower-cols__text{
	width: calc(50% - 50px);
}
.lower-cols__images {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 86px;
	width: calc(50% - 50px);
	margin-top: 3.4375rem; /* デザイン: 1枚目y823.8(本文列上端+55) */
}
.lower-cols__images img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius);
}

/* 淡いぼかしサークル(施設カラー) */
.news-blog__bubble,
.lower-body__bubble {
	position: absolute;
	border-radius: 50%;
	/* 施設テーマの--bubble-rgb(bodyのtheme-*クラスで指定)に合わせて発色 */
	background: radial-gradient(circle,
		rgba(var(--bubble-rgb, 102, 144, 180), .18) 0%,
		rgba(var(--bubble-rgb, 102, 144, 180), .07) 45%,
		rgba(var(--bubble-rgb, 102, 144, 180), 0) 70%);
	mix-blend-mode: multiply;
	pointer-events: none;
	z-index: 2;
}
.news-blog__bubble--01 {
	/* デザイン: x1201 / 帯上端から194px(右端に少しはみ出す) */
	width: 321px; height: 321px;
	left: 83%; top: 194px;
	animation: bubble-drift 10s ease-in-out -3s infinite,
						 bubble-glow 4.5s ease-in-out infinite;
}
.news-blog__bubble--02 {
	/* デザイン: x21 / 帯上端から413px */
	width: 321px; height: 321px;
	left: 1.4%; top: 413px;
	animation: bubble-drift 12s ease-in-out -7s infinite reverse,
						 bubble-glow 4.5s ease-in-out infinite;
}
.lower-body__bubble--01 {
	/* デザイン: x1164 / カード上端から328px(1枚目写真の右下に重なる) */
	width: 321px; height: 321px;
	left: 80.8%; top: 328px;
	animation: bubble-drift 10s ease-in-out -3s infinite,
						 bubble-glow 4.5s ease-in-out infinite;
}
.lower-body__bubble--02 {
	/* デザイン: x15 / カード上端から708px */
	width: 321px; height: 321px;
	left: 1.1%; top: 708px;
	animation: bubble-drift 12s ease-in-out -7s infinite reverse,
						 bubble-glow 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.news-blog__bubble,
	.lower-body__bubble { animation: none; }
}

/* ============================================================
	 レスポンシブ
	 ============================================================ */
@media (min-width: 861px) {
	.sub-header__inner {
		padding-bottom: 1.625rem!important;
	}
}
@media (max-width: 1100px) {
	.sub-header__inner { padding: 20px 30px 0 30px; }
	.facility-nav ul { gap: 24px; }
}

@media (max-width: 860px) {
	/* ロゴはPCと同様ハンバーガーの隣(右端寄せ)に配置。ハンバーガーはfixedのため、
		 その分の余白(右60px)を確保してロゴと重ならないようにする */
	.sub-header__bar { height: 56px; padding: 0 60px 0 16px; gap: 18px; justify-content: flex-end; }
	.sub-header__corp img { width: 120px; }
	.sub-header__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding: 16px 20px 0;
	}
	.sub-header__logo img { width: 100px; }
	.facility-nav { width: 100%; overflow-x: auto; }
	.facility-nav ul { gap: 20px; font-size: 14px; white-space: nowrap; }

	.pagetitle::after { height: 200px; }
	.pagetitle--mv::before { top: 30%; bottom: -30px; }
	.pagetitle__photos { margin-left: 12%; }
	.pagetitle__emblem { width: 160px; top: auto; bottom: -100px; left: 3.5%; }

	/* 下層汎用タイプ: タイトル帯はフロー化して写真下に配置 */
	.pagetitle--lower .pagetitle__photos { margin-right: 0; height: 220px; border-radius: var(--radius) 0 0 var(--radius); }
	.pagetitle--lower::before { content: none; }
	.pagetitle__heading {
		position: relative;
		top: auto;
		left: auto;
		margin: -30px 8% 0 0;
		padding: 24px 20px 20px;
		background: var(--sub-accent);
		border-radius: 0 var(--radius) var(--radius) 0;
	}
	.pagetitle__title { min-width: 0; padding-bottom: 14px; font-size: 26px; }
	.pagetitle__logo { width: 80px; margin-top: 14px; }

	.news-blog { margin-top: 60px; }
	.news-blog::after { top: 150px; height: 300px; }
	/* SPはカードのオフセットがなくなるためブラウザ基準補正を解除 */
	.news-blog__card .section__inner,
	.lower-body .section__inner { margin-left: auto; }

	.lower-body { margin: 60px 0 0; padding: 48px 0 60px; border-radius: 0; }
	.lower-body .section__inner { padding: 0 20px; }
	.lower-body .sec-head { margin-bottom: 32px; }
	.lower-cols { flex-direction: column; gap: 40px; }
	.lower-cols__images { width: 100%; margin-top: 0; gap: 24px; }
	.lower-cols__images img { height: auto; aspect-ratio: 394 / 277; }
	.news-blog__card { margin-left: 0; border-radius: 0; padding: 48px 0 60px; }
	.btn-more { width: min(355px, 88%); margin-top: 32px; }
	.lower-cols__text{
		width: auto;
	}
}

/* スマホサイズ(タブレットはPCと同じ2カラムのまま。style.cssの.news__body等と同じ切り替え幅) */
@media (max-width: 600px) {
	.news-blog .news__list { height: 440px; }
	.news-blog .news__categories { min-height: 0; }
}