/* ============================================
   dayservice.html 専用スタイル
   style_dayservice.css
   ============================================ */

/* ============================================
   ナビ：現在地ハイライト
   ============================================ */
.gnav__link--current {
	color: var(--color-main);
	font-weight: 700;
}

/* ============================================
   共通：テキスト＋画像 横並びレイアウト
   （style_dailylife.css の content-with-img を流用）
   ============================================ */
.content-with-img {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	margin-bottom: 50px;
}
.content-with-img__text {
	flex: 1 1 0;
	min-width: 0;
	max-width: 540px;
}
.content-with-img__text p:last-child {
	margin-bottom: 0;
}
.content-with-img__img-wrap {
	flex: 1 1 0;
	min-width: 0;
	max-width: 560px;
}
.content-with-img__img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

@media (max-width: 768px) {
	.content-with-img {
		flex-direction: column;
		margin-bottom: 40px;
	}
	.content-with-img__img-wrap {
		max-width: 100%;
		order: -1;
	}
	.content-with-img__text {
		max-width: 100%;
	}
}

/* ============================================
   デイサービスとは（.ds-about）
   ============================================ */

/* 料金枠 */
.ds-about__fee-box {
	margin-top: 30px;
	padding: 20px;
	border: 1px solid #CCCCCC;
}

.ds-about__fee-title {
	font-weight: 700;
	color: var(--color-main);
}

.ds-about__fee-box ul {
	list-style: disc;
	margin: 0 0 0 20px;
	padding: 0;
}

.ds-about__fee-box li {
	line-height: 1.8;
}

/* ============================================
   デイサービスとは：レスポンシブ
   ============================================ */
@media (max-width: 768px) {

}

/* ============================================
   デイサービス 光の郷（.ds-hikari）
   ============================================ */
.ds-hikari .section-heading {
	display: flex;
	align-items: center;
}

/* テキスト群：3列リスト */
.ds-hikari__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 20px;
	padding: 0;
	margin: 0 0 30px;
}

.ds-hikari__list li {
	padding-left: 30px;
	margin-bottom: 25px;
	background: url('../img/common/icon_dayservice_list.png') no-repeat left top 3px;
	background-size: 22px 22px;
}

/* 3列画像グリッド */
.ds-hikari__img-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 60px;
}
.ds-hikari__img-item {
	min-width: 0;
}
.ds-hikari__img {
	width: 100%;
	max-width: 360px;
	height: auto;
	border-radius: 12px;
	display: block;
}

/* 縦見出し＋丸画像＋テキスト：2列グリッド */
.ds-hikari__feature-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px 30px;
}
.ds-hikari__feature-item {
	display: flex;
	align-items: center;
	gap: 25px;
}

/* 縦見出し */
.ds-hikari__feature-heading {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-sub);
	writing-mode: vertical-rl;
	white-space: nowrap;
	flex-shrink: 0;
	align-self: flex-start;
	margin: 0;
	line-height: 1.4;
}

/* 丸画像 */
.ds-hikari__feature-img-wrap {
	position: relative;
	flex-shrink: 0;
	align-self: flex-start;
	width: 100%;
	max-width: 280px;
	z-index: 1;
}
/* 背後に配置する円形（シャドウ風） */
.ds-hikari__feature-img-wrap::before {
    content: "";
    position: absolute;
    /* 右下にずらす */
    top: 15px;
    left: 20px;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: #CFE8E5;
    border-radius: 50%;
    z-index: -1; /* 画像の後ろに配置 */
}
.ds-hikari__feature-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    /* 以前のbox-shadowは削除 [cite: 5] */
}

/* テキスト */
.ds-hikari__feature-text {
	flex: 1 1 0;
	font-weight: 700;
	color: var(--color-sub);
	min-width: 0;
	margin: 0;
	z-index: 1;
}

/* ============================================
   デイサービス 光の郷：レスポンシブ
   ============================================ */
@media (max-width: 768px) {
	.ds-hikari .section-heading {
		align-items: flex-start;
	}
	/* テキスト群：1列縦並び */
	.ds-hikari__list {
		grid-template-columns: 1fr;
		margin-bottom: 40px;
	}
	/* 3列画像：1列縦並び */
	.ds-hikari__img-grid {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 40px;
	}
	.ds-hikari__img {
		max-width: 100%;
	}
	/* 縦見出し＋丸画像＋テキスト：1列縦並び */
	.ds-hikari__feature-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ds-hikari__feature-item {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		text-align: center;
	}
	.ds-hikari__feature-item:not(:last-of-type) {
		margin-bottom: 20px;
	}
	/* スマホ：縦見出しを横書き・中央寄せ */
	.ds-hikari__feature-heading {
		writing-mode: horizontal-tb;
		margin: 0 auto;
	}
	.ds-hikari__feature-img-wrap {
		align-self: center;
		max-width: 240px;
	}
	.ds-hikari__feature-text {
		flex: none;
		width: 100%;
	}
}

/* ============================================
   1日のプログラム
   ============================================ */
.daily__intro {
	margin-bottom: 40px;
}
.daily__intro p {
	margin-bottom: 20px;
}
.daily__intro p:last-child {
	margin-bottom: 0;
}

/* ============================================
   タイムフロー＋画像 横並び
   ============================================ */
.daily__body {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

/* --- タイムフロー --- */
.daily__timeline {
	flex: 0 1 360px;
	min-width: 0;
}

.timeline__list {
	display: flex;
	flex-direction: column;
	position: relative;
	/* 縦線：●の中心（9px）に合わせて左端から引く */
	padding-left: 34px; /* dot幅18px + 右余白16px */
}

/* 縦線：リスト全体を貫く1本線 */
.timeline__list::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 8px; /* (18px dot - 2px line) / 2 = 8px で中心に */
	width: 2px;
	background-color: #CD7E8C;
}

.timeline__item {
	display: flex;
	align-items: flex-start;
	position: relative;
	padding-bottom: 20px;
}

.timeline__item--last {
	padding-bottom: 0;
}

/* ●ドット：縦線の上に重ねる */
.timeline__dot {
	position: absolute;
	left: -34px; /* padding-left分だけ戻す */
	top: calc(1.8em / 2 - 9px); /* テキスト行の中央に合わせる */
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: #CD7E8C;
	flex-shrink: 0;
	z-index: 1;
}

/* テキスト部分 */
.timeline__content {
	display: flex;
	align-items: baseline;
	gap: 12px;
	min-height: 18px;
}
.timeline__label {
	font-size: 1rem;
	color: var(--color-text);
}

/* --- 画像グリッド --- */
.daily__images {
	flex: 1 1 0;
	min-width: 0;
}

.daily__img-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.daily__img-item {
	min-width: 0;
}

.daily__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

/* ============================================
   レスポンシブ
   ============================================ */
@media (max-width: 768px) {

	.daily__body {
		flex-direction: column;
		gap: 40px;
	}

	.daily__timeline {
		flex: none;
		width: 100%;
		order: 1;
	}

	.daily__images {
		flex: none;
		width: 100%;
		order: 2;
	}

	.daily__img-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.daily__img {
		max-width: 100%;
	}
}

/* ============================================
   準備中
   ============================================ */
.under-preparation_text {
	margin: 60px 0 0;
	text-align: center;
}
.under-preparation_text .title {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 30px;
}
.under-preparation_text .link-top {
	display: inline-block;
	color: var(--color-main);
	margin: 40px 0;
	text-decoration: underline;
}
.under-preparation_text .link-top:hover {
	text-decoration: none;
}