@charset "UTF-8";
/* =================================================================
   style.css
   TOPページ
   ================================================================= */

/* -----------------------------------------------------------------
   ヒーロー
   写真と丸いキャッチの部分だけが10秒周期で切り替わる
   ----------------------------------------------------------------- */
.hero {
	position: relative;
	padding-bottom: 150px;
	overflow: hidden;
	background: var(--c-yellow);
}

.mv--pc {
	/* 画像の左端（白）と右端（黄）に合わせて、画面が広いときの余白を塗る */
	background: linear-gradient(to right, var(--c-white) 50%, var(--c-yellow) 50%);
}

.mv--pc .mv__frame {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	aspect-ratio: 1200 / 772;
}

.mv--sp {
	display: none;
	background: var(--c-white);
}

.mv--sp .mv__frame {
	position: relative;
	aspect-ratio: 691 / 1024;
}

.mv__base,
.mv__swap {
	position: absolute;
	display: block;
}

.mv__base {
	inset: 0;
	width: 100%;
	height: 100%;
}

.mv__swap {
	opacity: 0;
	animation: mvswap 10s ease-in-out infinite;
}

/* 切り替わる範囲（元画像に対する割合） */
.mv--pc .mv__swap {
	top: 23.834%;
	left: 35%;
	width: 61%;
	height: 61.14%;
}

.mv--sp .mv__swap {
	top: 12.6953%;
	left: 3.4732%;
	width: 89.725%;
	height: 80.2734%;
}

@keyframes mvswap {
	0%, 40%  { opacity: 0; }
	50%, 90% { opacity: 1; }
	100%     { opacity: 0; }
}

.hero__card {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin: -96px auto 0;
	padding: 48px 72px 48px 96px;
	text-align: center;
}

.hero__label {
	margin-bottom: 12px;
	color: var(--c-orange-text);
	font-family: var(--ff-round);
	font-size: 1.125rem;
	font-weight: 700;
}

.hero__title {
	font-family: var(--ff-round);
	font-size: 2.75rem;
	font-weight: 900;
	letter-spacing: .04em;
	line-height: 1.45;
}

.hero__lead {
	max-width: 640px;
	margin: 20px auto 0;
	font-size: 1.0625rem;
	font-weight: 500;
}

.hero__city {
	position: absolute;
	bottom: 0;
	left: 50%;
	display: block;
	width: 843px;
	max-width: 100%;
	transform: translateX(-50%);
}

@media (max-width: 720px) {
	.hero {
		padding-bottom: 96px;
	}

	.mv--pc {
		display: none;
	}

	.mv--sp {
		display: block;
	}

	.hero__card {
		margin: -24px 16px 0;
		padding: 30px 16px 32px 40px;
		border-radius: 20px;
	}

	.hero__label {
		font-size: 1rem;
	}

	.hero__title {
		font-size: 1.5rem;
	}

	.hero__lead {
		font-size: .9375rem;
	}

	.hero__lead br {
		display: none;
	}
}

/* -----------------------------------------------------------------
   こんな想い、ありませんか？（A〜Dさん）
   ----------------------------------------------------------------- */
.people {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.people__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 36px 24px 32px;
	background: var(--cat-pale);
	border-radius: 6px 6px 24px 6px;
	text-align: center;
	rotate: -1.5deg;
	transition: rotate .3s, box-shadow .3s;
}

.people__card:nth-child(even) {
	rotate: 1.5deg;
}

.people__card:hover {
	rotate: 0deg;
	box-shadow: 0 10px 24px rgba(var(--c-shadow-rgb), .12);
}

.people__face {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 132px;
	height: 132px;
	overflow: hidden;
	background: var(--c-white);
	border: 4px solid var(--cat-strong);
	border-radius: 50%;
	transform-origin: 50% 100%;
}

.people__card:hover .people__face {
	animation: punyo .6s ease;
}

.people__img {
	display: block;
	width: auto;
	height: 108px;
	animation: fuwa 3.2s ease-in-out infinite;
}

.people__card:nth-child(2) .people__img { animation-delay: -.8s; }
.people__card:nth-child(3) .people__img { animation-delay: -1.6s; }
.people__card:nth-child(4) .people__img { animation-delay: -2.4s; }

.people__name {
	margin-top: 4px;
	color: var(--c-text-sub);
	font-size: .9375rem;
	font-weight: 700;
}

.people__title {
	font-family: var(--ff-round);
	font-size: 1.3125rem;
	font-weight: 900;
	line-height: 1.5;
}

.people__text {
	margin-top: 8px;
	color: var(--c-text-sub);
	font-size: .875rem;
	text-align: left;
}

/* スクロールで下からぴょこっと（対応ブラウザのみ） */
@supports (animation-timeline: view()) {
	.people__card {
		animation: popin linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 70%;
	}

	.people__card:nth-child(2) { animation-range: entry 8% entry 78%; }
	.people__card:nth-child(3) { animation-range: entry 16% entry 86%; }
	.people__card:nth-child(4) { animation-range: entry 24% entry 94%; }
}

@media (max-width: 1000px) {
	.people {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}
}

@media (max-width: 720px) {
	.people {
		gap: 20px 12px;
	}

	.people__card {
		gap: 8px;
		padding: 20px 12px 18px;
		border-radius: 6px 6px 18px 6px;
	}

	.people__face {
		width: 92px;
		height: 92px;
		border-width: 3px;
	}

	.people__img {
		height: 76px;
	}

	.people__title {
		font-size: .9375rem;
	}

	.people__title br {
		display: none;
	}

	.people__text {
		margin-top: 4px;
		font-size: .78125rem;
		line-height: 1.7;
	}
}

/* -----------------------------------------------------------------
   メッセージ（背景模様をスクリーンで薄く）
   ----------------------------------------------------------------- */
.message {
	padding: 104px 24px;
	background: url(../images/bg-pattern.jpg) center / cover no-repeat;
	background-color: var(--pattern-fade);
	background-blend-mode: screen;
}

.message__card {
	position: relative;
	max-width: 880px;
	margin: 0 auto;
	padding: 48px 56px 52px;
	background: var(--c-white);
	border-radius: 28px;
	box-shadow: 0 6px 0 rgba(var(--c-shadow-rgb), .06), 0 12px 32px rgba(var(--c-shadow-rgb), .10);
	text-align: center;
}

.message__title {
	font-family: var(--ff-round);
	font-size: 1.875rem;
	font-weight: 900;
	line-height: 1.5;
}

.message__text {
	margin-top: 20px;
	font-size: 1.0625rem;
	font-weight: 500;
}

.message__text strong {
	color: var(--c-blue);
}

@media (max-width: 720px) {
	.message {
		padding: 64px 16px;
	}

	.message__card {
		padding: 32px 20px 34px;
		border-radius: 20px;
	}

	.message__title {
		font-size: 1.3125rem;
	}

	.message__text {
		font-size: .9375rem;
	}

	.message__text br {
		display: none;
	}
}

/* -----------------------------------------------------------------
   コンテのポイント（メッセージ帯の中）
   ----------------------------------------------------------------- */
.points {
	max-width: 1040px;
	margin: 56px auto 0;
	padding: 44px 48px 40px;
	background: rgba(255, 255, 255, .92);
	border-radius: 28px;
	box-shadow: 0 6px 0 rgba(var(--c-shadow-rgb), .06), 0 12px 32px rgba(var(--c-shadow-rgb), .10);
	text-align: center;
}

.points__en {
	color: var(--c-orange-text);
	font-family: var(--ff-round);
	font-size: 1.125rem;
	font-weight: 700;
}

.points__title {
	margin-top: 6px;
	font-family: var(--ff-round);
	font-size: 1.75rem;
	font-weight: 900;
	line-height: 1.5;
}

.points__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 36px 24px;
	margin-top: 40px;
}

.points__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 28px 16px 24px;
	background: var(--cat-pale);
	border-radius: 6px 6px 24px 6px;
	rotate: -1.5deg;
	transition: rotate .3s;
}

.points__item:nth-child(even) {
	rotate: 1.5deg;
}

.points__item:hover {
	rotate: 0deg;
}

.points__num {
	position: absolute;
	top: -14px;
	left: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--cat-strong);
	border: 4px solid var(--c-white);
	border-radius: 50% 50% 50% 10px;
	color: var(--c-white);
	font-family: var(--ff-round);
	font-size: 1.125rem;
	font-weight: 900;
	rotate: -8deg;
}

.points__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--c-white);
	border-radius: 50%;
	color: var(--cat);
}

.points__item:hover .points__icon {
	animation: punyo .6s ease;
}

.points__text {
	font-family: var(--ff-round);
	font-size: 1.125rem;
	font-weight: 900;
	line-height: 1.5;
}

.points__text small {
	font-size: .8125rem;
	font-weight: 700;
}

.points__lead {
	max-width: 680px;
	margin: 36px auto 0;
	color: var(--c-text-sub);
	font-size: .9375rem;
}

@media (max-width: 900px) {
	.points__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.points {
		margin-top: 40px;
		padding: 32px 16px 28px;
		border-radius: 20px;
	}

	.points__title {
		font-size: 1.3125rem;
	}

	.points__list {
		gap: 28px 12px;
		margin-top: 32px;
	}

	.points__item {
		padding: 22px 8px 18px;
	}

	.points__num {
		width: 36px;
		height: 36px;
		font-size: .9375rem;
		border-width: 3px;
	}

	.points__icon {
		width: 52px;
		height: 52px;
	}

	.points__icon .icon {
		width: 26px;
		height: 26px;
	}

	.points__text {
		font-size: .875rem;
	}

	.points__lead {
		margin-top: 28px;
		font-size: .875rem;
		text-align: left;
	}
}

/* -----------------------------------------------------------------
   相談・サポート
   ----------------------------------------------------------------- */
.support {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
	column-gap: 48px;
}

.support__item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px 4px;
	border-bottom: 2px dashed var(--c-line);
}

.support__num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	background: var(--c-orange-btn);
	border-radius: 50% 50% 50% 10px;
	color: var(--c-white);
	font-family: var(--ff-round);
	font-size: 1.125rem;
	font-weight: 900;
	rotate: -6deg;
}

.support__item:nth-child(2) .support__num { background: var(--c-blue); }
.support__item:nth-child(3) .support__num { background: var(--c-green-text); }

.support__title {
	margin-bottom: 6px;
	font-family: var(--ff-round);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.5;
}

.support__text {
	color: var(--c-text-sub);
	font-size: .9375rem;
}

@media (max-width: 720px) {
	.support__item {
		gap: 14px;
		padding: 20px 0;
	}

	.support__num {
		width: 44px;
		height: 44px;
		font-size: 1rem;
	}

	.support__title {
		font-size: 1.0625rem;
	}

	.support__text {
		font-size: .875rem;
	}
}

/* -----------------------------------------------------------------
   対象となる方・ご利用までの流れ
   ----------------------------------------------------------------- */
.target {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	padding: 40px 48px 40px 84px;
	background: var(--c-cream);
	border-radius: 24px;
}

.target__ill {
	flex-shrink: 0;
	width: 120px;
	margin: 0 auto;
}

.target__body {
	flex: 999 1 420px;
	min-width: 0;
}

.target__title {
	margin-bottom: 16px;
	font-family: var(--ff-round);
	font-size: 1.375rem;
	font-weight: 900;
}

.check-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.check-list .icon {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--c-orange-text);
}

.target__note {
	margin-top: 16px;
	color: var(--c-text-sub);
	font-size: .875rem;
}

.flow-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 72px 0 40px;
	font-family: var(--ff-round);
	font-size: 1.625rem;
	font-weight: 900;
}

.flow-title img {
	width: 56px;
}

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

.flow__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 28px 24px;
	background: var(--c-white);
	border: 2px solid var(--c-line);
	border-radius: 24px;
	rotate: -1.2deg;
}

.flow__card:nth-child(even) {
	rotate: 1.2deg;
}

.flow__card--1 { border-color: var(--c-green-line); }
.flow__card--2 { border-color: var(--c-orange-line); }
.flow__card--3 { border-color: var(--c-blue-line); }

.flow__img {
	width: 200px;
}

.flow__text {
	color: var(--c-text-sub);
	font-size: .9375rem;
}

@media (max-width: 720px) {
	.target {
		padding: 28px 18px 28px 40px;
		gap: 16px;
	}

	.target__ill {
		width: 88px;
	}

	.target__title {
		font-size: 1.1875rem;
	}

	.check-list li {
		font-size: .9375rem;
	}

	.flow-title {
		margin: 56px 0 32px;
		font-size: 1.375rem;
	}
}

/* -----------------------------------------------------------------
   よくあるご質問
   ----------------------------------------------------------------- */
.faq {
	display: flex;
	flex-direction: column;
}

.faq__item {
	border-bottom: 2px dashed var(--c-line);
}

.faq__q {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	padding: 20px 4px;
	font-size: 1.0625rem;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.faq__q::-webkit-details-marker {
	display: none;
}

.faq__q:focus-visible {
	border-radius: 12px;
	outline-offset: 2px;
}

.faq__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: var(--c-yellow);
	border-radius: 50%;
	font-family: var(--ff-round);
	font-weight: 900;
}

.faq__text {
	flex: 1;
}

.faq__icon {
	display: inline-flex;
	flex-shrink: 0;
	transition: transform .2s ease;
}

.faq__item[open] .faq__icon {
	transform: rotate(45deg);
}

.faq__a {
	padding: 0 4px 24px 56px;
	color: var(--c-text-sub);
	font-size: .9375rem;
}

@media (max-width: 720px) {
	.faq__q {
		gap: 12px;
		padding: 16px 0;
		font-size: .9375rem;
	}

	.faq__mark {
		width: 30px;
		height: 30px;
	}

	.faq__a {
		padding: 0 0 20px;
		font-size: .875rem;
	}
}

/* -----------------------------------------------------------------
   アクセス（背景にイラスト）
   ----------------------------------------------------------------- */
.sec--illust {
	padding-bottom: 140px;
	background: var(--c-white) url(../images/bg-illust.jpg) center bottom / 100% auto no-repeat;
}

.access {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: stretch;
	gap: 32px;
	max-width: var(--container-narrow);
	margin: 0 auto;
}

.access__map {
	min-height: 300px;
	overflow: hidden;
	background: var(--c-beige);
	border-radius: 24px;
}

.access__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 300px;
	border: 0;
}

.access__info {
	display: grid;
	grid-template-columns: 112px 1fr;
	align-content: center;
	gap: 16px;
	padding: 24px;
	background: rgba(255, 255, 255, .88);
	border-radius: 20px;
	font-size: .9375rem;
}

.access__info dt {
	color: var(--c-blue);
	font-weight: 700;
}

.access__info dd {
	margin: 0;
}

.access__info a {
	font-weight: 700;
}

@media (max-width: 720px) {
	.sec--illust {
		padding-bottom: 64px;
		background-size: cover;
		background-position: center;
	}

	.access {
		grid-template-columns: minmax(0, 1fr);
	}

	.access__info {
		grid-template-columns: 88px 1fr;
		gap: 12px;
		padding: 20px 16px;
		font-size: .875rem;
	}
}

/* -----------------------------------------------------------------
   お問い合わせ（電話ボタン）※フォーム本体は form.css
   ----------------------------------------------------------------- */
.contact-tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.contact-tel__note {
	font-size: .8125rem;
}