/*===============================================================================
bannar
================================================================================*/
.contact-bannar{
	position: relative;
	left: calc( 50% - 50vw );
	width: 100vw;
	margin-bottom: var(--g-sec--lg);
}
.contact-bannar__img{
	max-width: 780px;
	margin-inline: auto;
}



/*===============================================================================
flow
================================================================================*/
.contact-flow{
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: var(--g-sec--lg);
	padding: var(--g-sec--xs) clamp(1rem, -0.071rem + 2.86vw, 2.5rem);
	background: var(--c-light);
	border: 1px solid var(--c-dark);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
.contact-flow__inner{
	display: flex;
	flex-direction: column;
	gap: var(--g-sec--xs);
	max-width: 540px;
	margin-inline: auto;
}
.contact-flow__icon{
	width: 32%;
	margin-inline: auto;
}
.contact-flow__lead{
	padding: .25rem;
	text-align: center;
	background: var(--c-green);
	color: var(--c-light);
}
.contact-flow__friend{
	text-align: center;
}

/*===============================
* list
* =================================*/
.contact-flow__item{
	padding: 1rem;
	text-align: center;
	background: var(--c-light);
	border: 1px solid var(--c-dark);
	border-radius: var(--bd-r--sm);
}
.contact-flow__item:not(:last-of-type){
	--icon-c: #DDCDC7;
	--icon-w: 1.25rem;
	--icon-h: 2rem;
	--item-mb: calc( var(--icon-h) + 2rem );
	position: relative;
	margin-bottom: var(--item-mb);
}
.contact-flow__item:not(:last-of-type)::before{
	position: absolute;
	top: calc( 100% + var(--item-mb) / 2 );
	left: 50%;
	transform: translate(-50%, -50%);
	content: '';
	display: block;
	border-style: solid;
	border-width: var(--icon-h) var(--icon-w) 0 var(--icon-w);
	border-color: var(--icon-c) transparent transparent transparent;
}

/*===============================
* btn
* =================================*/
.contact-flow__btn{
	text-align: center;
}
.contact-flow__btn-link{
	--bd-weight: 3px;
	--arrow-size: .9em;
	--this-color: var(--c-light);
	position: relative;
	display: inline-block;
	max-width: 25rem;
	width: 100%;
	min-width: fit-content;
	padding: 1rem;
	text-align: center;
	border-radius: 100vmax;
	background: var(--c-green);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
	line-height: var(--lh-lg);
	font-weight: var(--fw-lg);
	color: var(--c-light);
	cursor: pointer;
	transition: var(--ani-t--normal) ease-out;
}
.contact-flow__btn-link:is(:hover, :focus){
	transform: translateY(4px);
	box-shadow: var(--shdw--ani) rgba(0, 0, 0, 0.25);
}
/* アイコン */
.contact-flow__btn-icon{
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translate(0%, -50%);
	display: inline-block;
	border-style: solid;
	border-width: calc( var(--arrow-size) * 0.5 ) 0 calc( var(--arrow-size) * .5 ) calc( var(--arrow-size) * .75 );
	border-color: transparent transparent transparent var(--this-color);
	transition: var(--ani-t--normal) ease-out;
}



/*===============================================================================
form
================================================================================*/
.contact-form__head{
	text-align: center;
	margin-bottom: var(--g-sec--xs);
}
.contact-form__body{
	max-width: var(--width-sm);
	margin-inline: auto;
	margin-bottom: var(--g-sec--lg);
	padding: var(--g-sec--xs) clamp(1rem, -0.071rem + 2.86vw, 2.5rem);
	background: var(--c-light);
	border: 1px solid var(--c-dark);
	border-radius: var(--bd-r--sm);
	overflow: hidden;
}
.contact-form__message{
	margin-bottom: var(--g-sec--xs);
}
.contact-form__message > p:not(:last-of-type){
	margin-bottom: 1rem;
}