@charset "utf-8";
/* reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0;padding:0;border:0;font-style:normal;font-weight:normal;font-size:100%;vertical-align:baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} html{overflow-y:scroll;} a{text-decoration:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} input, textarea{margin:0;padding:0;} ol, ul{list-style:none;} table{border-collapse:collapse;border-spacing:0;} caption, th{text-align:left;} a:focus{outline:none;} abbr[title]{text-decoration:none;border-bottom:none;}

/* main CSS */
:root {
--font-base: clamp(1px, 2vw, 20px);
--font-middle: clamp(1px, 2.6vw, 28px);
--font-large: clamp(1px, 3.2vw, 36px);
--font-xlarge: clamp(1px, 3.5vw, 40px);
--space-sm: clamp(12px, 1.5vw, 16px);
--space-md: clamp(24px, 3vw, 32px);
--space-lg: clamp(36px, 5vw, 80px);
--space-mlg: clamp(80px, 8vw, 140px);
--font: "M PLUS 1p", YuGothic, "Hiragino Sans", Meiryo, "sans-serif";
--font-en: "Open Sans";
--bg-color: #fff;
--base-color: #d7e7f1;
--accent-color: #604c3f;
--border-blk: 1px solid #604c3f;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--font);
font-size: var(--font-base);
font-weight: 500;
line-height: 180%;
color: var(--accent-color);
word-break: break-all;
background: var(--bg-color);
}
img, video, iframe {
inline-size:100%; max-inline-size: 100%; block-size: auto; vertical-align: bottom;
}
a, a:hover {
text-decoration: none; color: #555;
}
a.btn { background: #bbb; color: #fff; display: table; font-size: 0.9em; padding: 16px var(--space-lg); border-radius: 40px;
	span { letter-spacing: 10px; transform:translateX(5px); display:table; }
}
.chikushi { font-family: "FOT-筑紫B丸ゴシック Std B"; }

.header { padding-block: var(--space-sm) var(--space-lg);
	.header__logo {inline-size: 90%; margin-inline: auto; padding-bottom: var(--space-md);
		img { inline-size: 50%; max-inline-size: 400px;}
	}
	.header__catch { text-align: center; inline-size: 90%; margin-inline: auto; position: relative;z-index: 2;
		strong,span { display: block; font-weight: bold;}
		span { padding-bottom: var(--space-sm); font-weight: bold;}
		span:last-child { padding-bottom: 0;}
	}
	picture { display: block; position: relative; z-index: 1;}
}

#main {
	section { padding-bottom: var(--space-mlg); inline-size: 100%; max-inline-size: 1024px; margin-inline: auto;}
	section.w90 { inline-size: 90%; }
	section.entry-form { max-inline-size: 800px; }
}

.trial-visit {
	.trial-visit__title,.trial-visit__subtitle,.trial-visit__closing { display: table; font-size: var(--font-large); line-height: 1.6; padding-bottom: var(--space-md); margin-inline: auto; }
	h2 ~ p { padding-bottom: 50px; }
	h2 + p { margin-bottom: 30px; background: url(../images/orange.avif) no-repeat center bottom; background-size: 30px auto;}
	.trial-visit__grid { padding-bottom: var(--space-lg);
		.trial-visit__illust { text-align: center; }
		.trial-visit__targets { background: #f2e9db; padding: var(--space-sm) 10px;
			.trial-visit__list { list-style-type: disc; padding-left: 20px;}
		}
	}
	.trial-visit__cta-image { inline-size: 80%; margin-inline: auto; }
}

.trial-cta {
	#trial-cta-title { color: #e4004c; text-align: center; font-weight: bold; position: relative; display: block; inline-size: 60%; max-inline-size: 640px; margin: 0 auto 50px; padding: var(--space-sm); border-radius: 8px; border: 2px solid #e4004c;
		span { display: block;}
	}
	#trial-cta-title::before { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 20px 10px 0 10px; border-color: #e4004c transparent transparent; translate: -50% 100%; }
	#trial-cta-title::after { content: ""; position: absolute; bottom: 0; left: 50%; border-style: solid; border-width: 15.5px 7.8px 0 7.8px; border-color: #ffffff transparent transparent; translate: -50% 100%; }
	.trial-cta__hero { inline-size: 72%; max-inline-size: 800px; margin-inline: auto; padding-bottom: var(--space-md); }
	.trial-cta__content {
		.trial-cta__subtitle { text-align: center; padding-bottom: var(--space-md); font-size: var(--font-large); }
		p { inline-size: 90%; max-inline-size: 1024px; margin-inline: auto; padding-bottom: var(--space-sm);
			span { display:block; font-size:0.9em; text-decoration:underline; }
		}
		.trial-cta__subimage { max-inline-size: 800px; margin-inline: auto; padding-bottom: var(--space-lg);}
		.trial-cta__buttons { inline-size: 90%; max-inline-size: 800px; margin-inline: auto; display: flex; justify-content: space-between;
			a { inline-size: 48%; display: block; border-radius: 12px; box-shadow: 2px 2px 0px 0px #000; color: #fff; text-align: center; padding-block: var(--space-sm);
				span { display: block; }
			}
			.trial-cta__btn--tel { background: #ea6047;
				.trial-cta__btnMain {
					i { display: inline-block; background: #fff; color: #ea6047; border-radius: 50%; margin-right: 5px;}
				}
			}
			.trial-cta__btn--form { background: #009fa9;
				.trial-cta__btnMain { font-weight: bold; }
			}
			.trial-cta__btnTitle { font-weight: bold; }
		}
	}
}

.voices {
	#voices-title { text-align: center; padding-bottom: var(--space-lg); font-size: var(--font-xlarge); }
	.voices__list { position: relative; background: #fcd676;
		.voice { inline-size: 90%; max-inline-size: 800px; margin-inline: auto; position: relative; z-index: 2; padding-bottom: var(--space-lg);
			.voice__header { position: relative;
				figure { position: relative; display: table; margin-left: auto; padding-right: 5%;
					img { inline-size: auto; }
				}
				.voice__name { position: absolute; bottom: 0; padding-bottom: 10px; color: #717071;
					strong { font-weight: bold;}
				}
			}
			.voice__text { border: solid #ebe6da var(--space-sm); padding:var(--space-sm); background: #fff; color: #717071;}
		}
	}
	.voices__list::after { content: ""; display: block; background: #fff; inline-size: 100%; position: absolute; z-index: 1; top: 0; left: 0;}
}

.recruit {
	#recruit-title { text-align: center; padding-bottom: var(--space-md); font-size: var(--font-xlarge); }
	.recruit__tableWrap { inline-size: 90%; max-inline-size: 800px; margin-inline: auto;
		.recruit__table { inline-size: 100%;
			th,td { display: block;}
			th { font-weight: bold; padding-bottom: 8px; }
			td { padding: 0 0 var(--space-md) 5%;
				span { display: block; padding-top: 10px;}
			}
		}
	}
	.recruit__photo { inline-size: 72%; margin-inline: auto; }
}

.faq { inline-size: 90%;
	#faq-title { background: url(../images/senior4.webp) no-repeat right; background-size: auto 100%; border-bottom: #604c3f solid 2px; margin-bottom: var(--space-md); display: grid; place-items: center;
		span { display: table; font-size: var(--font-xlarge); }
	}
	.faq__items {
		.faq__item { padding-bottom: var(--space-md);
			.faq__q { background: #604c3f; padding: 10px;
				.faq__btn { inline-size: 100%; background-color: transparent; text-align: left; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
				}
			}
			.faq__a {
				.faq__aTitle { padding: var(--space-sm) 0 var(--space-sm) 10px; line-height: 1.5;
					strong {
						span { display: block; font-size: 0.85em; padding-top: 8px; }
					}
				}
				.faq__aTitle::before { content: "A."; }
				.faq__aTitle ~ p { line-height: 1.5;
					strong { font-weight: bold; }
				}
			}
		}
		.faq__item:last-child { padding-bottom: 0; }
	}
	.faq__items .faq__icon--minus { display: none; }
	.faq__item.is-open .faq__icon--plus { display: none; }
	.faq__item.is-open .faq__icon--minus { display: inline-block; }
}

.entry-form {
	#entry-form-title { text-align: center; padding-bottom: 5px; font-size: var(--font-xlarge); }
	.entry-form__note { text-align: center; padding-bottom: var(--space-md); }
	.entry-form__list { inline-size: 100%; border-top: 1px solid #604c3f;
		dt { display: flex; align-items: center; border-bottom: 1px solid #604c3f; background: #d9d2cc; padding: var(--space-sm) 10px;
			span { display: table; background: #969797; color: #fff; border-radius: 8px; }
			span.required { background: #eb6ea5; }
		}
		dd { border-bottom: 1px solid #604c3f; padding: var(--space-sm) 10px;
			input,textarea { inline-size: 100%; box-sizing: border-box; font-size: 16px; background: #edf7fd; border: 1px solid #bec0e0; padding: 10px; border-radius: 8px; }
			textarea { block-size: 100px; }
		}
		dd:last-child { border-bottom: none; }
	}
	#submitBtn { inline-size: 50%; background-color: #604c3f; text-align: center; border: none; cursor: pointer; outline: none; margin-inline: auto; padding: var(--space-sm) 0; appearance: none; color: #fff; font-weight: bold; display: block; }
}

.site-footer { background: url(../images/footer.avif) no-repeat center bottom; background-size: 100% auto;
	.site-footer__sns { inline-size: 90%; max-inline-size: 480px; margin-inline: auto; padding-bottom: var(--space-lg); }
	.footer__logo, .site-footer__cta { inline-size: 80%; max-inline-size: 400px; margin-inline: auto; padding-bottom: var(--space-lg); }
	.site-footer__cta { background: #ea6047; border-radius: 12px; padding-block: var(--space-sm); margin-bottom: var(--space-lg);
		a { color: #fff; text-align: center; text-align: center; display: block; line-height: 1;
			.site-footer__telTitle { font-weight: bold; display: block; padding-bottom: 10px;
				i { display: inline-block; background: #fff; color: #ea6047; border-radius: 50%; margin-right: 5px; }
			}
			.site-footer__telNumber { padding-right: 8px; }
			.site-footer__telTime { font-weight: bold;}
		}
	}
	.site-footer__address { inline-size: 80%; max-inline-size: 400px; margin-inline: auto; margin-bottom: var(--space-lg);
		td { line-height: 1.2; }
	}
	.site-footer__contact { text-align: center; padding-bottom: var(--space-md);
		a { color: var(--accent-color); }
	}
	.site-footer__email { padding-bottom: var(--space-lg); display: table; margin-inline: auto; }
	.site-footer__map { inline-size: 80%; max-inline-size: 640px; margin-inline: auto;
		figure { padding-bottom: var(--space-sm); }
		.site-footer__mapBtn { border: 2px solid #946134; padding: 8px var(--space-md); display: table; margin-inline: auto; border-radius: 40px; margin-bottom: var(--space-lg);
			a { color: #946134; display: flex;
				i { padding-left: 20px; font-size: 2em;}
			}
		}
	}
	.site-footer__copyright { text-align: center; color: #fff; }
}

#thanks { text-align: center; font-size: 18px; padding-bottom: var(--space-mlg);
	p span { display: block; font-size: 14px;}
}

@media (max-width: 560px){
	body { font-size: 4vw;}

	.header {
		.header__catch { line-height: 1.6;
			strong { font-size: 6vw; }
			span { font-size: 4.2vw; }
		}
		picture { margin-top: -20vw; }
	}

	.trial-visit {
		.trial-visit__title,.trial-visit__subtitle,.trial-visit__closing { font-size: 4.5vw; }
		.trial-visit__illust {
			img { inline-size: auto; block-size: 20vh;}
		}
		.trial-visit__targets {
			.trial-visit__list {
				li { font-size: 3.5vw;}
			}
		}
	}

	.trial-cta {
		#trial-cta-title { font-size: 6vw;
			span { font-size: 4.2vw}
		}
		.trial-cta__content {
			.trial-cta__subtitle { font-size: 4.5vw; }
			.trial-cta__buttons {
				.trial-cta__btn--tel {
					.trial-cta__btnTitle { font-size: 4.5vw;}
					.trial-cta__btnMain { font-size: 3.5vw;
						i { inline-size: 20px; block-size: 20px; line-height: 20px;}
					}
					.trial-cta__btnSub { font-size: 2.6vw; }
				}
				.trial-cta__btn--form {
					.trial-cta__btnTitle { font-size: 4.5vw;}
					.trial-cta__btnSub { font-size: 3.2vw; }
					.trial-cta__btnMain { font-size: 4.5vw; }
				}
			}
		}
	}

	.voices {
		#voices-title { font-size: 5.5vw; }
		.voices__list {
			.voice {
				.voice__header {
					figure {
						img { block-size: 20vh; }
					}
					.voice__name { font-size: 4vw; }
				}
				.voice__text { font-size: 3.5vw;}
			}
		}
		.voices__list::after { block-size: 5vh; }
	}

	.recruit {
		#recruit-title { font-size: 5.5vw; }
			.recruit__tableWrap {
				.recruit__table {
					th { font-size: 4vw; }
					td { font-size: 3.5vw; }
				}
			}
	}

	.faq {
		#faq-title { block-size: 20vh;
			span { font-size: 4.5vw; }
		}
		.faq__items {
			.faq__item {
				.faq__q {
					.faq__btn { font-size: 3.5vw; }
				}
				.faq__a {
					.faq__aTitle { font-size: 3.8vw; }
					p { font-size: 3.5vw; }
				}
			}
		}
	}
	.entry-form {
		#entry-form-title { font-size: 4.5vw; }
		.entry-form__note { font-size: 3.2vw; }
		.entry-form__list {
			dt { font-size: 3.5vw;
				span { padding: 4px 10px; font-size: 3.2vw; margin-right: 8px; }
			}
		}
		#submitBtn { font-size: 4vw; }
	}
	.site-footer {
		.site-footer__cta {
			a {
				.site-footer__telTitle { font-size: 5.5vw;
					i { inline-size: 40px; block-size: 40px; line-height: 40px; font-size: 6vw; }
				}
				.site-footer__telNumber { font-size: 3.5vw; }
				.site-footer__telTime { font-size: 2.8vw; }
			}
		}
		.site-footer__contact {
			a,span { font-size: 7vw; padding-left: 10px;}
		}
		.site-footer__copyright { font-size: 12px; }
	}
	#thanks { font-size: 3.5vw;
		p span { font-size: 3.2vw;}
	}
}

@media (min-width: 561px){
	a[href^="tel:"] { pointer-events: none; }
	body { font-size: 18px; }

	.header {
		.header__catch { line-height: 1.8; }
	}

	.trial-visit {
		.trial-visit__illust {
			img { inline-size: auto; block-size: 200px;}
		}
	}

	.trial-cta {
		#trial-cta-title { font-size: 1.8em;
			span { font-size: 0.6em;}
		}
		.trial-cta__content {
			.trial-cta__buttons {
				.trial-cta__btn--tel {
					.trial-cta__btnTitle { font-size: 1.3em;}
					.trial-cta__btnMain { font-size: 1.1em;
						i { inline-size: 30px; block-size: 30px; line-height: 30px;}
					}
					.trial-cta__btnSub { font-size: 0.8em; }
				}
				.trial-cta__btn--form {
					.trial-cta__btnTitle { font-size: 1.3em;}
					.trial-cta__btnSub { font-size: 0.9em; }
					.trial-cta__btnMain { font-size: 1.3em; }
				}
			}
		}
	}

	.voices {
		.voices__list {
			.voice {
				.voice__header {
					figure {
						img { block-size: 200px; }
					}
					.voice__name { font-size: 1.1em; }
				}
			}
		}
		.voices__list::after { block-size: 50px; }
	}

	.recruit {
			.recruit__tableWrap {
				.recruit__table {
					th { font-size: 1.1em; }
				}
			}
	}

	.faq {
		#faq-title { block-size: 200px; }
		.faq__items {
			.faq__item {
				.faq__q {
					.faq__btn { font-size: 1em; }
				}
				.faq__a {
					.faq__aTitle { font-size: 1.1em; }
				}
			}
		}
	}

	.entry-form {
		.entry-form__note { font-size: 0.8em; }
		.entry-form__list {
			dt {
				span { padding: 4px 16px; font-size: 0.8em; margin-right: 10px; }
			}
		}
		#submitBtn { font-size: 1.1em; }
	}

	.site-footer {
		.site-footer__cta {
			a {
				.site-footer__telTitle { font-size: 1.4em;
					i { inline-size: 50px; block-size: 50px; line-height: 50px; font-size: 1.3em; }
				}
				.site-footer__telTime { font-size: 0.7em; }
			}
		}
		.site-footer__contact {
			a,span { font-size: 2em; padding-left: 16px;}
		}
		.site-footer__copyright { font-size: 12px; }
	}
}

@media (min-width:561px) and ( max-width:1024px) {
	.header {
		.header__catch {
			strong { font-size: 3em; }
			span { font-size: 1.8em; }
		}
		picture { margin-top: -80px; }
	}
	.site-footer { background-position: center bottom -1vw; }
}

@media (min-width: 1025px){
	.header {
		.header__catch {
			strong { font-size: 3.5em; }
			span { font-size: 2.2em; }
		}
		picture { margin-top: -100px; }
	}
	.site-footer { background-position: center bottom -50px; }
}