@charset "UTF-8";
/*
Theme Name : デイケア・デイサービス
*/

/* ===================
ベーススタイル
=================== */

/* 基本設計 */

:root {
	--color-txt: #3E3E3E;
	--color-green-l: #CDE09F;
	--color-green: #009944;
	--color-orange: #FFC883;
	--color-beige: #EAD6BA;
	--color-accent: #da6d6d;
	--bg-pink: #FCF6F3;
	--bg-yellow: #F9F7EB;
	--bg-blue: #F4FAFD;
	--bg-gra-l: linear-gradient(316deg, #ECF1EB 10.24%, #FAF8DD 88.87%);
	--bg-gra-d: linear-gradient(281deg, #E1E8C2 17.39%, #FFDFDF 82.83%);
	--bg-white: #fff;
	--font-14: 0.875rem;
	--font-16: 1rem;
	--font-18: 1.125rem;
	--font-20: 1.25rem;
	--font-24: 1.5rem;
	--font-28: 1.75rem;
	--font-32: 2rem;
	--font-36: 2.25rem;
	--font-40: 2.5rem;
	--font-48: 3rem;
	--gutter-8: 8px;
	--gutter-16: 16px;
	--gutter-24: 24px;
	--gutter-32: 32px;
	--gutter-40: 40px;
	--gutter-60: 60px;
	--gutter-80: 80px;
	--padding-inline: clamp(1em, 3vw, 40.5px);
	--width-1per: 13.5px;
	--width-5per: min(67.5px, 5%);
	--width-10per: min(135px, 10%);
	--unit: 120px;
	--transition: 0.3s ease-in-out;
}

@media screen and (max-width: 810px) {
	:root {
		--font-18: 1rem;
		--font-20: 1.125rem;
		--font-24: 1.25rem;
		--font-28: 1.375rem;
		--font-32: 1.5rem;
		--font-36: 1.75rem;
		--font-40: 1.75rem;
		--font-48: 2rem;
		--gutter-24: 20px;
		--gutter-32: 28px;
		--gutter-40: 36px;
		--gutter-60: 48px;
		--gutter-80: 64px;
		--unit: 80px;
	}
}

html {
	scroll-behavior: smooth;
	color-scheme: light;
}

body {
	font-family: "Zen Kaku Gothic New", "游ゴシック", YuGothic, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #fff;
	color: var(--color-txt);
	line-height: 1.8;
}

img {
	width: 100%;
	height: auto;
}

/* 電話番号a表示 */
@media screen and (min-width: 810.1px) {
	a[href^="tel:"] {
		pointer-events: none;
		cursor: default;
	}
}

/* PC/SP 出し分け */
@media screen and (max-width: 810px) {
	.pc {
		display: none !important;
	}
}

@media screen and (min-width: 810.1px) {
	.sp {
		display: none !important;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 500;
	font-size: var(--font-20);
	line-height: 1.3;
}

address {
	font-style: normal;
}

ul {
	list-style: none;
}

.disc {
	list-style-type: "・";
	padding-left: 1em;
}

a {
	text-decoration: none;
	border: none;
	color: var(--color-main);
	transition: opacity var(--transition);
}

@media screen and (min-width: 810.1px) {
	a:hover {
		opacity: .7;
	}
}

.underline {
	text-decoration: underline;
}


/* サイト幅設計 */
.wrap {
	/* 最大幅1350px */
	/* 最大左右padding67.5px */
	width: 100%;
	max-width: 100vw;
	margin-inline: auto;
	padding-inline: 5%;
	padding-block: var(--unit);
	position: relative;
	overflow: hidden;
}

.inner {
	/* 最大幅1215px */
	width: min(100%, 1215px);
	margin: 0 auto;
}

.inner_padding {
	width: min(100%, 1200px);
	margin: 0 auto;
	padding-inline: var(--padding-inline);
}

.inner_narrow {
	width: min(100%, 810px);
	margin: 0 auto;
}

/* 個別クラス */
.dib {
	display: inline-block;
}

.tac {
	text-align: center;
	margin-inline: auto;
	width: fit-content;
}

@media screen and (min-width: 810.1px) {
	.tac_pc {
		text-align: center;
	}
}

@media screen and (max-width: 810px) {
	.tac_sp {
		text-align: center;
	}
}

.tar {
	text-align: right;
	margin-left: auto;
	width: fit-content;
}

.tal {
	text-align: left;
	margin-left: auto;
	width: fit-content;
}

.mt-1em {
	margin-top: 1em;
}

/* フォント関係 */
.font_kiwi {
	font-family: "Kiwi Maru", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.txt_accent {
	color: var(--color-accent);
}

.small {
	font-size: var(--font-14);
}


/* 背景色 */

/* ヘッダー */
header {
	display: flex;
	position: relative;
	align-items: center;
	gap: .8em;
	padding: var(--font-40) 5% 0;
	z-index: 98;
}

header span {
	font-size: var(--font-18);
}

header span:first-of-type {
	font-size: var(--font-24);
	margin-right: .5em;
	font-weight: 700;
	font-weight: 600;
	letter-spacing: .1em;
}

header a {
	position: fixed;
	background: var(--color-green);
	color: #fff;
	font-size: 1.5em;
	text-align: center;
	padding: .6em 2.5em;
	z-index: 100;
}

/* PC */
@media screen and (min-width: 810.1px) {
	:root {
		/* ヘッダー分差し引き */
		--header: calc(1em * 7);
	}

	header {
		text-align: center;
	}

	header::after {
		content: "";
		width: 1px;
		height: 1em;
		background: var(--color-txt);
	}

	header img {
		width: 70px;
	}

	header h1 {
		display: contents;
	}

	header span:first-of-type {
		margin-inline: .5em;
	}

	header span:last-of-type {
		order: 2;
	}

	header a {
		top: 0;
		right: 0;
		border-radius: 0 0 0 16px;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	:root {
		/* ヘッダー分差し引き */
		--header: calc(1em * 6.2);
	}

	header img {
		width: 53px;
	}

	header span {
		font-size: var(--font-14);
		display: block;
		line-height: 1.1;
	}

	header span:first-of-type {
		font-size: 17px;
	}

	header a {
		bottom: 0;
		left: 0;
		width: 100%;
		padding: .6em .4em;
	}
}

/* footer */

footer.wrap {
	padding-block: 0;
}

footer .inner_padding img {
	width: 76px;
	margin-inline: auto;
}

footer .inner_padding p {
	font-size: var(--font-20);
	font-weight: 700;
	font-weight: 600;
}

footer .inner_padding p:first-of-type {
	font-size: var(--font-28);
	letter-spacing: .1em;
}

footer .inner_padding ul {
	margin-top: 1em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5em;
}

footer .inner_padding li {
	display: grid;
	place-items: center;
	background: #fff;
	font-weight: 700;
	font-weight: 600;
	padding: .3em;
	text-wrap: balance;
	border: 1px solid var(--color-txt);
}

footer .inner_padding li:first-of-type,
footer .inner_padding li:nth-of-type(2) {
	letter-spacing: .2em;
}


footer .inner:has(small) {
	text-align: center;
	padding: var(--gutter-60) 5vw var(--gutter-32);
	width: 100vw;
	margin-left: calc(50% - 50vw);
	height: 100%;
	background: var(--color-beige);
	line-height: 1.4;
	text-wrap: balance;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.footer_bg {
		position: relative;
		padding-block: var(--gutter-40);
		width: 100vw;
		height: 100%;
		margin-left: calc(50% - 50vw);
		background: url(../img/footer.jpg) center no-repeat;
		background-size: cover;
	}

	.footer_bg::before {
		content: "";
		position: absolute;
		width: 50%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(255, 255, 255, .7);
		backdrop-filter: blur(5px);
	}

	.footer_bg .inner {
		position: relative;
	}

	footer .inner_padding {
		width: 50%;
		margin-left: 0;
		text-align: center;
	}

	footer .inner_padding p {
		line-height: 1.3;
	}

	footer .inner_padding p:first-of-type {
		margin-top: .3em;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	footer .inner_padding img {
		width: 100px;
	}

	footer .inner_padding {
		text-align: center;
		display: contents;
	}

	footer .inner_padding .sp {
		width: 100vw;
		margin-left: -5vw;
		margin-block: 1em;
	}

	footer .inner_padding p:first-of-type {
		font-size: var(--font-28);
		letter-spacing: .1em;
	}

	footer .inner_padding ul {
		grid-template-columns: 1fr;
		margin-bottom: var(--gutter-60);
	}

	footer .inner:has(small) {
		padding-bottom: calc(var(--unit) * 1.5);
	}
}

/* タイトル類 */
.ttl {
	font-size: var(--font-32);
	font-weight: 700;
	font-weight: 600;
}

.ttl+* {
	margin-top: .5em;
}

.ttl_dot {
	font-size: var(--font-32);
	font-weight: 700;
	font-weight: 600;
	text-align: center;
	overflow: hidden;
	padding: .5em;
	position: relative;
}

.ttl_dot::before,
.ttl_dot::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 14px;
	/* 縦半径×2に相当 */
	display: inline-block;
	/* 幅・高さを適用可能にする */
	background-image: radial-gradient(ellipse farthest-side at center,
			var(--color-txt) 60%,
			transparent 60%);
	/* 楕円形のグラデーション */
	background-size: 14px 12px;
	/* 横幅28px、高さ14pxの楕円を繰り返す */
	background-repeat: repeat-x;
	/* 横方向にのみ繰り返す */
	background-position: center;
	/* 中央揃え */
}

.ttl_dot::before {
	top: -7px;
}

.ttl_dot::after {
	bottom: -7px;
}

.ttl_dot+*,
div:has(>.ttl_dot)+* {
	margin-top: var(--gutter-60);
}

/* PC */
@media screen and (min-width: 810.1px) {
	.ttl_dot {
		width: fit-content;
		margin-inline: auto;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.ttl_dot {
		font-size: clamp(1.2em, 5.4vw, 1.5em);
	}
}

/* FV */
.fv {
	margin-top: calc(var(--header) * -1);
	padding-top: var(--header);
	position: relative;
	background: url(../img/kv_bg.jpg) center no-repeat;
	background-size: cover;
}

.fv_txt {
	position: absolute;
	top: 0;
	padding-top: calc(var(--header) + 5vw);
}

.fv_kw span {
	background: #fff;
	display: inline-block;
	line-height: 1;
	margin-bottom: .2em;
}

.fv_kw span {
	font-size: clamp(20px, 6vw, 60px);
	padding: .2em 0 .2em .3em;
	margin-bottom: .3em;
	white-space: nowrap;
}

.fv_kw span:last-of-type {
	font-size: clamp(14px, 2.8vw, 28px);
	padding: .3em .5em;
}

.fv_txt img {
	width: clamp(120px, 36vw, 360px);
	mix-blend-mode: multiply;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.fv_txt {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.fv_txt img {
		margin-right: -2.5%;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.fv {
		padding-block: calc(var(--header) + 10vw) 15vw;
		position: relative;
		background: url(../img/kv_bg_sp.jpg) center no-repeat;
		background-size: cover;
		overflow: hidden;
	}

	.fv::before {
		content: "";
		position: absolute;
		bottom: 0;
		right: -20%;
		width: 80%;
		aspect-ratio: 1;
		background: url(../img/kv_before.png) center bottom no-repeat;
		background-size: contain;
	}

	.fv_txt {
		padding-top: calc(var(--header) + 8vw);
	}

	.fv_kw {
		margin-left: -5vw;
	}


	.fv_kw span {
		padding-left: 5vw;
		font-size: clamp(20px, 9vw, 54px);
	}

	.fv_kw span:last-of-type {
		font-size: clamp(10px, 4.5vw, 27px);
		padding-left: 5vw;
	}

	.fv_txt img {
		width: clamp(120px, 50vw, 300px);
		margin-left: 5%;
	}
}

/* KV */
.mask {
	width: 95%;
	margin: 0 auto;
}

.mask svg {
	width: 100%;
	height: auto;
	display: block;
}

.mask image {
	opacity: 0;
	width: 100%;
	height: 100%;
	animation: 21s linear infinite;
	transform-origin: center;
	/* object-fit: cover; */
}

.mask image:first-of-type {
	animation-name: fade1;
	opacity: 1;
}

.mask image:nth-of-type(2) {
	animation-name: fade2;
}

.mask image:last-of-type {
	animation-name: fade3;
}

/* SP */
@media screen and (max-width: 810px) {
	.mask {
		width: 140%;
		margin: 0 0 0 -20vw;
	}
}

/* KVのフェードアニメーション */
@keyframes fade1 {
	0% {
		transform: scale(1.02);
	}

	33.5% {
		transform: scale(1.1);
	}

	94.66% {
		transform: scale(1);
	}

	100% {
		transform: scale(1.02);
	}
}

@keyframes fade2 {
	28% {
		opacity: 0;
		transform: scale(1);
	}

	33.33% {
		opacity: 1;
	}

	66.66% {
		opacity: 1;
		transform: scale(1.1);
	}

	66.67% {
		opacity: 0;
	}
}

@keyframes fade3 {
	61.33% {
		opacity: 0;
		transform: scale(1);
	}

	66.66% {
		opacity: 1;
	}

	94.66% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1.1);
	}
}

/* 施設のメリット */
.merit {
	padding-block: var(--gutter-40) 0;
	position: relative;
}



.list_check {
	display: flex;
}

.list_check li {
	display: flex;
	align-items: center;
}

.list_check li::before {
	content: "";
	display: block;
	width: 1.4em;
	height: 1em;
	background: url(../img/ico_check.svg) left center no-repeat;
	background-size: contain;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.list_check {
		gap: 1em;
		font-size: min(var(--font-32), 2.4vw);
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.list_check {
		flex-direction: column;
		gap: .5em;
		font-size: min(var(--font-32), 5vw);
	}
}

/* デイサービスとは？　デイケアとは？ */
.wrap:has(.what) {
	z-index: 2;
}

.what {
	display: flex;
	gap: var(--width-5per);
	position: relative;
}

.what p {
	font-size: var(--font-20);
}

.what section+section {
	margin-top: var(--gutter-40);
}

.what .inner_padding {
	flex-basis: auto;
}

.what div:has(svg) {
	margin-top: calc(var(--unit) * -1);
	flex-basis: 100%;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.what div:has(svg) {
		margin-right: max(-13vw, calc(var(--width-1per) * -13));
		padding-top: var(--unit);
		padding-right: min(6vw, calc(var(--width-1per) * 6));
		background: url(../img/what_bg.png) top center no-repeat;
		background-size: contain;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.what {
		flex-direction: column-reverse;
		gap: var(--gutter-40);
	}

	.what div:has(svg) {
		width: 110vw;
		margin-left: -10vw;
		padding-top: 10vw;
		background: url(../img/what_bg_sp.jpg) top center no-repeat;
		background-size: contain;
	}

	.what svg {
		width: 70%;
		margin-inline: auto;
	}
}

/* サービス一覧 */
.wrap:has(.service) {
	padding-block: 0;
}


.service .wrap {
	padding-inline: 5vw;
	padding-bottom: calc(var(--unit) * 1.4);
}

.grid {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media screen and (max-width: 400px) {
	.grid {
		grid-template-columns: 1fr;
	}
}

.card_bg-svg {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	gap: 1em;
	padding: clamp(2em, 2.5vw, calc(var(--width-1per) * 2.5));
	position: relative;
	background-attachment: unset;
}

.card_bg-svg .tac {
	font-size: var(--font-28);
	font-weight: 700;
	font-weight: 600;
	align-self: center;
}

.card_bg-svg:first-of-type,
.card_bg-svg:nth-of-type(6) {
	background: url(../img/service_card_bg3.svg)center no-repeat;
	background-size: 100% 100%;
}

.card_bg-svg:nth-of-type(2),
.card_bg-svg:nth-of-type(4) {
	background: url(../img/service_card_bg1.svg)center no-repeat;
	background-size: 100% 100%;
}

.card_bg-svg:nth-of-type(3),
.card_bg-svg:nth-of-type(5) {
	background: url(../img/service_card_bg2.svg)center no-repeat;
	background-size: 100% 100%;
}

.card_bg-svg img {
	width: 75%;
	margin-inline: auto;
}


.grid_note div {
	display: flex;
	padding: clamp(1.5em, 2vw, calc(var(--width-1per) * 2));
	background: #fff;
	font-size: var(--font-20);
	align-items: center;
	gap: .7em 2em;
	border-radius: .5em;
	margin-top: var(--gutter-40);
}

.grid_note p {
	letter-spacing: .2em;
	font-weight: 700;
	font-weight: 600;
	font-size: var(--font-24);
}

.grid_note ol {
	list-style-type: auto;
	flex: 1;
	padding-left: 1.5em;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.wrap:has(.service) {
		margin-top: calc(var(--unit) * -2);
	}

	.service {
		padding-top: calc(var(--unit) * 2);
		background: url(../img/service_bg.svg) center no-repeat;
		background-size: auto 100%;
		width: 140vw;
		margin-left: -25vw;
		overflow: hidden;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.wrap:has(.service) {
		margin-top: calc(var(--unit) * -.5);
	}

	.service {
		padding-top: 0;
		background: url(../img/service_bg_sp.svg) center no-repeat;
		background-size: 100% 100%;
		width: 100vw;
		margin-left: -5vw;
	}

	.grid_note div {
		flex-direction: column;
		line-height: 1.3;
		font-size: var(--font-14);
	}

	.grid_note li+li {
		margin-top: 1em;
	}
}

/* デイサービスとデイケアの違い */
.diff {
	padding-bottom: 0;
}

.diff dl {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
	text-align: center;
}

.card_diff {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
}

.card_diff dt {
	font-size: var(--font-24);
	font-weight: 700;
	font-weight: 600;
	padding: .6em 0;
}

.card_diff:first-of-type dt {
	background: var(--color-green-l);
}

.card_diff:nth-of-type(2) dt {
	background: var(--color-beige);
}

.card_diff:nth-of-type(3) dt {
	background: var(--color-orange);
}

.card_diff dd {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	font-size: var(--font-18);
	height: 100%;
	border-bottom: solid 1px var(--color-beige);
	border-right: solid 1px var(--color-beige);
}

.card_diff:first-of-type dd {
	border-left: solid 1px var(--color-beige);
}

.card_diff div {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.card_diff dd:has(div+div)::before {
	content: "";
	display: block;
	height: 1px;
	background: var(--color-beige);
	order: 2;
}

.card_diff div+div {
	order: 2;
}

.card_diff div img {
	width: 50%;
}

.card_diff:nth-of-type(2) div {
	flex-direction: column;
}


.card_diff:nth-of-type(2) div img:first-of-type {
	margin-right: auto;
}

.card_diff:nth-of-type(2) div img:nth-of-type(2) {
	margin-left: auto;
}

/* SP */
@media screen and (max-width: 810px) {
	.diff dl {
		grid-template-columns: 1fr;
	}

	.card_diff dd {
		border-left: 1px solid var(--color-beige);
	}

	.card_diff:nth-of-type(2) div img {
		width: 100%;
	}
}

/* 当法人グループの強み */
.strengths {
	padding-bottom: calc(var(--unit) * .2);
}

.strengths_grid {
	margin-top: calc(var(--gutter-60) * -1) !important;
}

.strengths_grid .wrap {
	padding-block: calc(var(--gutter-60) * 2) calc(var(--gutter-80) + var(--unit) * 2);
}

.inner:has(>.grid_card) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3%;
}

.grid_card {
	background: #fff;
	border-radius: 1em;
	border: 2px solid #9AC92C;
	overflow: hidden;
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);
}

.grid_card_ttl {
	text-align: center;
	padding: .8em .2em;
	color: #fff;
	background: #9AC92C;
	font-weight: bold;
	letter-spacing: .05em;
	font-size: var(--font-24);
}

.grid_card:last-of-type {
	border: 2px solid #F4A995;
}

.grid_card:last-of-type .grid_card_ttl {
	background: #F4A995;

}

.grid_card_cont {
	padding: clamp(16px, 3vw, 42px);

}

.grid_card_cont ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5em;
}

.grid_card_cont span {
	background: #9AC92C;
	color: #fff;
	padding-inline: .8em;
	border-radius: 2em;
	display: inline-block;
}

.grid_card_cont span+span,
.grid_card:last-of-type .grid_card_cont span+span {
	background: none;
	padding-inline: .5em 0;
	color: inherit;
	font-size: var(--font-18);
}

.grid_card:last-of-type .grid_card_cont span {
	background: #F4A995;
}

.grid_card_cont p {
	font-size: var(--font-18);
	margin-top: 1em;
}

.strengths_grid {
	background: url(../img/strengths_bg.jpg) center no-repeat;
	background-size: auto 100%;
	width: 140vw;
	margin-left: -25vw;
	overflow: hidden;
}

/* PC */
@media screen and (min-width: 810.1px) {

	.grid_card_cont span {
		font-size: var(--font-20);
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.strengths_grid {
		width: 100vw;
		margin-left: -5vw;
	}

	.inner:has(>.grid_card) {
		grid-template-columns: 1fr;
		gap: var(--gutter-24);
	}

	.grid_card_cont ul {
		justify-content: center;
	}
}

/* 主な支援内容について */
.support {
	margin-top: calc(var(--unit) * -2);
}

.support .ttl {
	font-size: var(--font-24);
	text-align: center;
}

.support dl {
	margin-top: var(--gutter-40);
}

.support dl div {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: 0 3%;
	background: #fff;
	border-radius: 1em;
	overflow: hidden;
	padding: clamp(16px, 3vw, 42px);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
}

.support dl div+div {
	margin-top: var(--gutter-24);
}

.support dl dd {
	display: contents;
}

.support dl dt {
	grid-column: 2/3;
	grid-row: 1/2;
	align-self: end;
	padding-bottom: .5em;
	border-bottom: 1px solid #AEAEAE;
	line-height: 1.5;
}

.support dl dt span:first-of-type {
	font-weight: bold;
	font-size: var(--font-24);
}

.support dl dt span:nth-of-type(2) {
	font-weight: bold;
	font-size: var(--font-18);
}

.support dl p {
	grid-column: 2/3;
	grid-row: 2/3;
	padding-top: .5em;
}

.support dl img {
	grid-column: 1/2;
	grid-row: 1/3;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* SP */
@media screen and (max-width: 810px) {
	.support dl div {
		grid-template-columns: 1fr;
		gap: 1em;
	}

	.support dl dt {
		grid-column: 1/2;
		grid-row: 1/2;
	}

	.support dl dt span:nth-of-type(2) {
		font-weight: normal;
		font-size: var(--font-16);
	}

	.support dl p {
		grid-column: 1/2;
		grid-row: 2/3;
		padding-top: 0;
	}

	.support dl img {
		grid-row: 3/4;
	}
}

/* デイケア1日の流れ */
.wrap:has(.daily-flow) {
	padding-block: 0;
}

.daily-flow {
	padding-block: calc(var(--unit) * 1.3) var(--unit);
}

.daily-flow .wrap {
	padding: 0 5vw;
}

.daily-flow .inner {
	padding: 3em clamp(16px, 5vw, calc(var(--width-1per) * 10));
	background: #fff;
	border-radius: 1em;
}

.daily-flow .ttl_dot+p {
	text-wrap: balance;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 2em 1em;
	padding-bottom: var(--gutter-24);
}

.daily-flow .ttl_dot+p::before,
.daily-flow .ttl_dot+p::after {
	display: block;
	aspect-ratio: 1;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.daily-flow {
		background: url(../img/daily-flow_bg.jpg) center no-repeat;
		background-size: auto 100%;
		width: 140vw;
		margin-left: -25vw;
		overflow: hidden;
	}

	.daily-flow .ttl_dot+p {
		margin-top: var(--gutter-16);
		border-bottom: 1px solid var(--color-txt);
	}

	.daily-flow .ttl_dot+p::before,
	.daily-flow .ttl_dot+p::after {
		width: clamp(80px, 20vw, 140px);
	}

	.daily-flow .ttl_dot+p::before {
		content: "";
		background: url(../img/day_ttl1.svg) center no-repeat;
		background-size: contain;
	}

	.daily-flow .ttl_dot+p::after {
		content: "";
		background: url(../img/day_ttl2.svg) center no-repeat;
		background-size: contain;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.daily-flow {
		background: url(../img/daily-flow_bg_sp.jpg) top repeat-y;
		background-size: 100% auto;
		width: 100vw;
		margin-left: -5vw;
	}

	.daily-flow .ttl_dot+p {
		flex-direction: column;
	}

	.daily-flow .ttl_dot+p::before {
		width: min(50%, 300px);
		content: "";
		background: url(../img/day_ttl3.svg) center no-repeat;
		background-size: contain;
	}
}

/* タイムテーブル */
.daily-flow dl {
	--dt-dot: 28px;
	position: relative;
	font-size: var(--font-32);
	margin-top: var(--gutter-60);
}

.daily-flow dl>div:not(:last-of-type) {
	position: relative;
}

.daily-flow dl>div:not(:last-of-type)::before {
	content: "";
	position: absolute;
	top: calc(var(--font-32) * .6);
	left: calc(var(--dt-dot) * -.5 - 4em - 1px);
	width: 2px;
	height: calc(100% + 2em);
	background: var(--color-txt);
}

.daily-flow dt {
	position: relative;
	line-height: 1.2em;
	font-weight: 700;
	font-weight: 600;
}

.daily-flow dt span {
	font-weight: 500;
	font-size: var(--font-16);
}

.daily-flow dt::before {
	content: "";
	position: absolute;
	width: var(--dt-dot);
	height: var(--dt-dot);
	background: var(--color-txt);
	border-radius: 14px;
	top: calc(.7em - var(--dt-dot) / 2);
}

.daily-flow dd {
	font-size: var(--font-18);
	margin-top: 1em;
}

.daily-flow dl>div:last-of-type dd {
	margin-top: 0;
}

.daily-flow dl>div+div {
	margin-top: 2em;
}

.daily-flow dd img {
	border-radius: 1em;
	margin-top: 1em;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.daily-flow li {
	margin-top: 1em;
}

.daily-flow strong {
	font-size: var(--font-20);
}

.daily-flow strong::before {
	content: "■";
	margin-right: .1em;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.daily-flow dl {
		padding-left: calc(var(--dt-dot) + 4em);
	}

	.daily-flow dt {
		width: 55%;
	}

	.daily-flow dt::before {
		left: calc(-4em - var(--dt-dot));
	}

	.daily-flow dt time {
		position: absolute;
		left: -4em;
		width: 4em;
		text-align: center;
	}

	.daily-flow dd {
		display: flex;
		gap: 2em;
	}

	.daily-flow dd>*:first-child {
		flex: 1;
	}


	.daily-flow dd img:first-of-type {
		margin-top: 0;
	}

	.daily-flow dd div:has(img) {
		margin-top: calc(-1.4 * var(--font-32) - var(--font-18));
		width: 40%;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.daily-flow dl {
		--dt-dot: 14px;
		padding-left: calc(var(--dt-dot) * 3);
	}

	.daily-flow dl>div:not(:last-of-type)::before {
		left: calc(var(--dt-dot) * -2.5 - 1px);
	}

	.daily-flow dt::before {
		left: calc(var(--dt-dot) * -3);
	}

	.daily-flow dt time {
		margin-right: .5em;
	}

	.daily-flow dd img {
		aspect-ratio: 2;
	}
}

/* ポイント */
.point {
	position: relative;
	color: #86572E;
}

.point::before,
.point::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 13px;
	background: repeating-linear-gradient(-65deg,
			#fff 0 7px,
			var(--color-green-l) 7px 38px,
			#fff 38px 45px,
			var(--color-beige) 45px 76px);
}

.point::before {
	top: 0;
}

.point::after {
	bottom: 0;
}

.point .ttl {
	text-align: center;
}

.point .ttl span {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-size: min(4vw, var(--font-24));
	font-weight: 500;
	line-height: 1.2;
}

.point .ttl span::before,
.point .ttl span::after {
	content: "";
	display: block;
	width: 1.2em;
	aspect-ratio: 30/36;
	background: url(../img/point_l.svg) center center no-repeat;
	background-size: contain;
}

.point .ttl span::after {
	background: url(../img/point_r.svg) center center no-repeat;
	background-size: contain;
}

.point .ttl h2 {
	font-size: var(--font-40);
	font-weight: 700;
	font-weight: 600;
	margin-top: .2em;
}

.point .disc {
	position: relative;
	padding-right: 4.5em;
	margin-top: 1em;
	width: fit-content;
	margin-inline: auto;
	font-size: var(--font-20);
	line-height: 1.3;
}

.point .disc li:first-of-type {
	margin-bottom: .5em;
}

.point .badge {
	position: absolute;
	display: grid;
	align-items: center;
	place-items: center;
	text-align: center;
	aspect-ratio: 1/1;
	padding: .6em .8em .4em;
	color: #fff;
	background: url(../img/badge.svg) center no-repeat;
	background-size: contain;
	list-style: none;
	font-weight: bold;
	font-size: var(--font-16);
	letter-spacing: .05em;
	top: -1em;
	right: -1em;
	transform: rotate(8deg);
}

.point .tac {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	line-height: 1.3;
	font-size: var(--font-20);
	font-weight: 700;
	font-weight: 600;
	border: 1px solid #86572E;
	margin-top: 2em;
}

.point .tac li {
	padding: 1em;
}


.point .tac .num {
	font-size: 1.5em;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.point .tac li+li {
		border-left: 1px solid #86572E;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.point .disc {
		font-size: var(--font-16);
	}

	.point .badge {
		font-size: var(--font-14);
	}

	.point .tac {
		grid-template-columns: 1fr;
	}

	.point .tac li+li {
		border-top: 1px solid #86572E;
	}
}

/* デイケア・デイサービス施設紹介 */
.pins {
	font-size: var(--font-18);
}

.pins img {
	display: inline-block;
	width: 1em;
	vertical-align: text-bottom;
}

/* map */
.introduction #map {
	width: 100vw;
	height: 500px;
	max-height: 500px;
	margin-left: calc(50% - 50vw);
}

.gm-style-iw-chr {
	height: 36px;
}

.cont_g-map {
	display: flex;
	gap: 1.5em;
	width: 100%;
	max-width: 480px;
	padding: 0 10px 10px;
}

.cont_g-map>* {
	flex: 1;
}

.cont_g-map>a {
	display: block;
	width: 40%;
}

.cont_g-map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

.cont_g-map p:first-of-type {
	font-size: var(--font-18);
	color: var(--color-green);
	font-weight: 700;
	font-weight: 600;
}

.cont_g-map.color_orange p:first-of-type {
	color: #ef7800;
}

.cont_g-map p:first-of-type span {
	font-size: var(--font-32);
}

.cont_g-map p:last-of-type {
	margin-top: 2em;
}


.cont_g-map div>a {
	display: block;
	text-align: center;
	color: #fff;
	background: var(--color-green);
	padding: .4em .1em;
	margin-top: .5em;
	border-radius: 4em;
	font-weight: 700;
	font-weight: 600;
}

.cont_g-map.color_orange div>a {
	background: #ef7800;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.introduction div:has(>.ttl_dot) {
		text-wrap: balance;
		display: flex;
		gap: 2em;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding-bottom: var(--gutter-24);
	}

	.introduction div:has(>.ttl_dot)::before,
	.introduction div:has(>.ttl_dot)::after {
		content: "";
		width: clamp(80px, 20vw, 140px);
		display: block;
		aspect-ratio: 1;
	}

	.introduction div:has(>.ttl_dot)::before {
		background: url(../img/intro1.svg) center no-repeat;
		background-size: contain;
	}

	.introduction div:has(>.ttl_dot)::after {
		background: url(../img/intro2.svg) center no-repeat;
		background-size: contain;
	}

	.introduction .ttl_dot {
		margin-inline: inherit;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	.introduction #map {
		aspect-ratio: 1;
		height: auto;
	}

	.cont_g-map {
		gap: 1em;
		padding: 0;
	}

	.cont_g-map>a {
		display: block;
		width: 30%;
	}

	.cont_g-map p:first-of-type {
		font-size: 13px;
	}

	.cont_g-map p:first-of-type span {
		font-size: 16px;
	}

	.cont_g-map p:last-of-type {
		margin-top: .3em;
	}
}

/* デイサービス施設一覧 */

.introduction_list {
	margin-top: var(--gutter-80);
}

.introduction_list .tac {
	font-size: var(--font-24);
	font-weight: 700;
	font-weight: 600;
}

.introduction_list .tac+* {
	margin-top: var(--gutter-32);
}

.introduction_list .grid {
	gap: 2.5em clamp(1em, 3vw, calc(var(--width-1per) * 3));
}

.card_img-txt {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	gap: .5em;
}

.card_img-txt a {
	display: contents;
}

.card_img-txt div {
	position: relative;
	order: -1;
	overflow: hidden;
	border-radius: 1em;
	aspect-ratio: 3/2;
}

.card_img-txt div img {
	height: 100%;
	object-fit: cover;
}

.card_img-txt div p {
	position: absolute;
	padding: .6em 1.5em;
	color: #fff;
	font-weight: 700;
	font-weight: 600;
	bottom: 0;
	right: 0;
}

.card_img-txt div p::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .8);
	mix-blend-mode: multiply;
	border-radius: 1em 0;
}

.card_img-txt div span {
	position: relative;
}


.card_img-txt .card_ttl {
	font-size: var(--font-18);
	margin-top: .5em;
}

.card_img-txt .card_ttl span {
	margin-left: .3em;
	font-size: var(--font-28);
	font-weight: 700;
	font-weight: 600;
}

.arrow {
	display: flex;
	align-items: center;
	gap: .5em;
}

.arrow::after {
	content: "";
	display: inline-block;
	width: .6em;
	height: .6em;
	border-top: 1.5px solid #fff;
	border-right: 1.5px solid #fff;
	transform: rotate(45deg);
}

.btn_arrow {
	justify-content: center;
	background: var(--color-green);
	color: #fff;
	max-width: 460px;
	border-radius: 3em;
	text-align: center;
	margin: var(--gutter-60) auto 0;
	padding: .5em 0;
	font-size: var(--font-20);
	font-weight: 700;
	font-weight: 600;
}

/* PC */
@media screen and (min-width: 810.1px) {
	.card_img-txt div img {
		transition: var(--transition);
		transition-property: opacity, transform;
	}

	.card_img-txt div:hover img {
		opacity: .7;
		transform: scale(1.1);
	}

	.arrow {
		padding-right: .2em;
		transition: var(--transition);
		transition-property: opacity, gap, padding-right;
	}

	.card_img-txt div:hover .arrow,
	.btn_arrow:hover {
		padding-right: 0;
		gap: .7em;
	}
}

/* thanks */
header .thanks {
	display: contents;
	color: var(--color-txt);
	text-align: left;
}

main .thanks div.tac {
	margin-block: 2em 4em;
}

/* ===================
input
=================== */

.c-form ul {
	margin-bottom: 40px;
	font-size: var(--font-20);
}

.c-form ul li+li {
	padding-top: 3em;
}

@media screen and (max-width: 810px) {
	.c-form ul li:has(input[name="お問合せ内容[]"]) .grid {
		gap: 0;
	}
}

.c-form ul li span {
	color: #D32929;
}

.c-form ul li .form_ttl {
	font-size: var(--font-20);
	font-weight: 700;
	font-weight: 600;
}

.c-form ul li>div {
	margin-top: 0.5em;
}

#address-fields {
	display: none;
}

#address-fields>div:not(:last-child) {
	margin-bottom: 1em;
}

.c-form__btn {
	margin-top: 3em;
	display: grid;
	gap: var(--gutter-24);
}

.c-form__btn a {
	display: block;
	text-align: center;
	color: #fff;
	background-color: #FC8098;
	padding: 0.5em 0;
	border: 1px solid #FC8098;
	border-radius: 100vmax;
	transition: all 0.5s ease-out;
}

@media (any-hover: hover) {
	.c-form__btn a:hover {
		color: #FC8098;
		background-color: #fff;
	}
}

@media screen and (min-width: 810.1px) {
	.c-totop__btn {
		width: fit-content;
		margin-inline: auto;
	}
}

.c-totop__btn a {
	margin-top: var(--gutter-80);
	display: block;
	text-align: center;
	color: #fff;
	background-color: #3FB8A4;
	padding: 0.2em 2em;
	border: 1px solid #3FB8A4;
	border-radius: 100vmax;
	transition: all 0.5s ease-out;
}

@media (any-hover: hover) {
	.c-totop__btn a:hover {
		color: #3FB8A4;
		background-color: #fff;
	}
}

.c-form__col {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: var(--gutter-40);
}

input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=date],
input[type=number],
textarea,
select {
	vertical-align: middle;
	width: 100%;
	max-width: 100%;
	padding: 0.2em .5em;
	color: var(--color-txt);
	background-color: #F9F9F9;
	border: 1px solid #b3b3b3;
	text-align: left;
	border-radius: 8px;
	font-size: var(--font-20);
}

::placeholder {
	color: #bbb;
}

textarea {
	resize: vertical;
	/* border-radius: 16px; */
	min-height: 14em;
	field-sizing: content;
	background: transparent;
}

@media screen and (max-width: 810px) {
	textarea {
		min-height: 26em;
	}
}

.textarea-box {
	position: relative;
	z-index: 1;
}

.textarea-box .placeholder {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	color: #ddd;
	padding: 10px 16px;
	background-color: #F5F5F5;
	border-radius: 16px;
}

.textarea-box .placeholder p.hidden {
	display: none;
}


input[type=radio] {
	position: relative;
	width: 1em;
	height: 1em;
	border: 1px solid #ccc;
	border-radius: 50%;
	vertical-align: -2px;
	margin-right: 0.5em;
}

input[type=radio]:checked:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3FB8A4;
}

input[type=submit],
button[type=submit],
.btn_sub {
	font-family: inherit;
	text-align: center;
	font-size: var(--font-20);
	width: 100%;
	margin: 0 auto 0;
	background: var(--color-green);
	color: #fff;
	padding: 0.5em 0;
	cursor: pointer;
	border: none;
	border-radius: 50px;
	font-weight: 700;
	font-weight: 600;
	transition: opacity var(--transition);
	letter-spacing: .15em;
	max-width: 460px;
	display: block;
}

input[type=reset],
input[type=button] {
	font-family: inherit;
	font-size: var(--font-20);
	width: 100%;
	margin: 0 auto 0;
	background: #E7E7E7;
	padding: 0.5em 0;
	cursor: pointer;
	border: none;
	border-radius: 50px;
	transition: opacity var(--transition);
	max-width: 460px;
	letter-spacing: .15em;
}

input[type=submit]:hover,
input[type=reset]:hover,
input[type=button]:hover {
	opacity: .7;
}

label:has(input[type=checkbox]) {
	display: flex;
	align-items: center;
}

input[type=checkbox] {
	position: relative;
	width: 1em;
	height: 1em;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 2px;
	margin-right: 0.5em;
	accent-color: var(--color-green);
}

.c-form .grid label {
	margin-top: .3em;
}

.date-box {
	position: relative;
}

.date-box::after {
	background: url(../img/calendar.svg) no-repeat center center;
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
}

input[type="date"] {
	position: relative;
	min-height: 2em;
}

input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	padding: 0;
	background: transparent;
	color: transparent;
	cursor: pointer;
	height: 100%;
	width: 100%;
}

form table {
	text-align: left;
	margin-top: var(--gutter-24);
	font-size: var(--font-20);
	width: 100%;
}

form table tbody {
	display: contents;
}

form table tr {
	display: grid;
	grid-template-columns: 10em 1fr;
	padding: .5em .8em;
}

/* PC */
@media screen and (min-width: 810.1px) {
	form table tr:nth-of-type(odd) {
		background: #f3f3f3;
	}
}

/* SP */
@media screen and (max-width: 810px) {
	form table tr {
		grid-template-columns: 1fr;
	}

	form table th {
		background: #f3f3f3;
	}

	form table th,
	form table td {
		padding: .3em .5em;
	}
}

/* アニメーション */
/* 初期状態 */
.fade-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0s ease 0s, transform 0s ease 0s;
}

/* フェードアップのアニメーション */
.fade-up_on {
	/* animation: fadeAnime 1s ease-in-out forwards; */
	opacity: 1;
	transform: translateY(0);
	transition: opacity .8s ease .3s, transform .8s ease .3s;
}

@keyframes fadeAnime {
	100% {
		opacity: 1;
		transform: translateY(var(--unit));
	}
}

.blur {
	filter: blur(10px);
	will-change: filter;
}

.blur_on {
	animation: blurAnime .8s ease-in-out forwards;
}

@keyframes blurAnime {
	100% {
		filter: blur(0);
	}
}