/**
 *
 * page-contact.scss
 *
 */
/* ------------------------------------------------------------
 contact-container
------------------------------------------------------------ */
.contact-container {
	position: relative;
	overflow: hidden;
}

.contact-container::before {
	--background-color: var( --color-bg8 );
	--background: var( --color-gradation );
	width: 100%;
	left: 0;
	bottom: 0;
}

@media screen and (min-width: 1024px) {
	.contact-container::before {
		height: 41.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-container::before {
		height: 34rem ;
	}
}

/* ------------------------------------------------------------
 contact-intro
------------------------------------------------------------ */
.contact-intro {
	position: relative;
}

@media screen and (min-width: 1024px) {
	.contact-intro {
		padding-top: 12.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-intro {
		padding-top: 7.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-intro__small {
		margin-top: 3.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-intro__small {
		margin-top: 2.8rem ;
	}
}

.contact-intro__light {
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

@media screen and (min-width: 1024px) {
	.contact-intro__light {
		width: 87rem ;
		top: -18rem ;
		right: -24.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-intro__light {
		width: 47.4rem ;
		top: -8.7rem ;
		right: -20rem ;
	}
}

/* ------------------------------------------------------------
 contact-recruit
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.contact-recruit {
		margin-top: 10.4rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit {
		margin-top: 8.2rem ;
	}
}

.contact-recruit__inner {
	width: 100%;
	background-color: var(--color-bg);
}

@media screen and (min-width: 1024px) {
	.contact-recruit__inner {
		max-width: 94.2rem ;
		padding: 4.3rem 5.4rem 4.3rem 4.7rem ;
		display: flex;
		align-items: center;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit__inner {
		text-align: center;
		padding: 3.5rem 2rem 3.7rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-recruit__txt {
		margin-left: 3.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit__txt {
		margin-top: 1.6rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-recruit__button {
		margin-left: auto;
		margin-right: 0;
	}
}

@media screen and (max-width: 1023px) {
	.contact-recruit__button {
		margin-top: 1.8rem ;
		margin-inline: auto;
	}
}

/* ------------------------------------------------------------
 contact-flex
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.contact-flex {
		margin-top: 10.7rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-flex {
		margin-top: 7rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-flex__inner {
		display: flex;
		align-items: flex-start;
	}
}

/* ----------------------------------------
 contact-tel
---------------------------------------- */
.contact-tel__num {
	font-family: var(--font-sans-serif);
	padding-top: 0.1px;
	padding-bottom: 0.1px;
	letter-spacing: 0.06em;
}

.contact-tel__num::before, .contact-tel__num::after {
	content: '';
	display: block;
	width: 0;
	height: 0;
	font-size: inherit;
}

.contact-tel__num::before {
	margin-top: var(--font-sans-serif-top);
}

.contact-tel__num::after {
	margin-bottom: var(--font-sans-serif-bottom);
}

@media screen and (min-width: 1024px) {
	.contact-tel__num {
		font-size: var(--font-size48);
		margin-top: 4.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-tel__num {
		font-size: var(--font-size40);
		margin-top: 2.8rem ;
	}
}

.contact-tel__num a {
	display: flex;
	align-items: center;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
}

@media screen and (min-width: 1024px) {
	.contact-tel__num i {
		display: none;
	}
}

@media screen and (max-width: 1023px) {
	.contact-tel__num i {
		margin-left: 0.8rem ;
	}
}

@media screen and (min-width: 1024px) {
	.contact-tel__small {
		margin-top: 2.5rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-tel__small {
		margin-top: 2.2rem ;
	}
}

/* ----------------------------------------
 contact-sns
---------------------------------------- */
.contact-sns {
	width: 100%;
}

@media screen and (min-width: 1024px) {
	.contact-sns {
		max-width: 51.2rem ;
		margin-left: 12rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-sns {
		margin-top: 7.1rem ;
	}
}

.contact-sns__list {
	display: flex;
}

@media screen and (min-width: 1024px) {
	.contact-sns__list {
		gap: 1.5rem ;
		margin-top: 4.1rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-sns__list {
		gap: 1rem ;
		margin-top: 2.6rem ;
	}
}

.contact-sns__list li {
	flex-basis: 100%;
}

@media screen and (min-width: 1024px) {
	.contact-sns__list li {
		height: 10rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-sns__list li {
		height: 7.4rem ;
	}
}

.contact-sns__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--color-bg);
	transition: background-color var(--transition-hover);
}

@media (hover: hover) {
	.contact-sns__list a:hover {
		background-color: var(--color-main);
	}
}

.contact-sns__list .c-blank {
	position: absolute;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.contact-sns__list .c-blank {
		top: 1.5rem ;
		right: 1.6rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-sns__list .c-blank {
		color: var(--color-icon4);
		top: 0.9rem ;
		right: 0.9rem ;
	}
}

/* ------------------------------------------------------------
 contact-form
------------------------------------------------------------ */
@media screen and (min-width: 1024px) {
	.contact-form {
		margin-top: 11.2rem ;
		padding-bottom: 33.8rem ;
	}
}

@media screen and (max-width: 1023px) {
	.contact-form {
		margin-top: 8.7rem ;
		padding-bottom: 18.2rem ;
	}
}
/*# sourceMappingURL=sourcemaps/page-contact.css.map */