/*===============================================================================
ディスクリプション
================================================================================*/
.contact-description p{
	display: flex;
	justify-content: center;
	margin-bottom: var(--g-sec--lg);
	flex-wrap: wrap;
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
	font-size: clamp(1rem, 0.286rem + 1.9vw, 2rem);
}


/*===============================================================================
背景画像
================================================================================*/
.contact__bgi{
	position: relative;
	padding: var(--g-sec--lg) 0;
}
.contact__bgi::before{
	position: absolute;
	top: 0;
	left: calc(50% - 50vw);
	z-index: -1;
	content: "";
	max-width: 100vw;
	width: 100vw;
	height: 100%;
	background-image: var(--bgi);
}


/*===============================================================================
電話での問い合わせ
================================================================================*/
.contact-tel{
	max-width: 33rem;
	margin-inline: auto;
	margin-bottom: var(--g-sec--lg);
}
.contact-tel__lead{
	margin-bottom: 1.5rem;
	text-align: center;
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
	font-size: 1.25rem;
}

/* ボタン */
.contact-tel__number{
	--this-color: var(--c-act01);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	min-width: fit-content;
	margin-bottom: 1.5rem;
	padding: 1.5rem .5rem;
	text-align: center;
	border: 2px solid var(--this-color);
	background: var(--c-light);
	box-shadow: 0px 6px 0px var(--this-color);
	border-radius: 99999px;
	overflow: hidden;
	line-height: var(--lh-xs);
	font-weight: var(--fw-lg);
	font-family: var(--ff-gz);
	font-size: clamp(2.5rem, 1.786rem + 1.9vw, 3.5rem);
	color: var(--this-color);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
/* アニメーション */
.contact-tel__number:is(:hover, :focus){
	box-shadow: 0 0 0 var(--this-color);
	transform: translateY(6px);
}
/* アイコン */
.contact-tel__number svg{
	width: .7em;
}
.contact-tel__time{
	display: flex;
	gap: 0 1em;
	flex-wrap: wrap;
	justify-content: center;
}


/*===============================================================================
メールフォーム
================================================================================*/
.contact-form{
	max-width: var(--width-sm);
	margin-inline: auto;
}
.contact-form__title{
	margin-bottom: var(--g-sec--sm);
	text-align: center;
}