@charset "utf-8";

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
お問い合わせ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- イントロ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.contact-intro-li {
	display: grid;
	grid-template-columns: 80px auto;
	column-gap: 1em;
	align-items: center;
}

.contact-intro-li .heading {
	margin-bottom: 0.4em;
	font-size: 20px;
	font-family: var(--font_serif);
	letter-spacing: 0.05em;
}

.contact-intro-li .description {
	font-size: 15px;
	line-height: 1.6;
}

@media (min-width: 768px) {
.contact-intro-ul {
	display: grid;
	grid-template-columns: auto auto auto;
}

.contact-intro-li {
	grid-template-columns: 29% auto;
}

.contact-intro-li:not(:first-child) {
	padding-left: min(100vw * 40 / 1400, 40px);
}

.contact-intro-li:not(:last-child) {
	padding-right: min(calc(100vw * 40 / 1400), 40px);
	border-right: 1px solid;
}
}

@media (max-width: 767.9px) {
.contact-intro-li:not(:first-child) {
	padding-top: 20px;
}

.contact-intro-li:not(:last-child) {
	padding-bottom: 20px;
	border-bottom: 1px solid;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- お問い合わせ方法
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.contact-menu {
	background: var(--color_sub);
}

.contact-menu .heading_enja {
	color: #fff;
}

.contact-menu .section-description {
	color: #fff;
}

.contact-menu-ul {
	display: grid;
	gap: 2em 3%;
}

.contact-menu-li {
	padding: 30px var(--padding-inline);
	background: #fff;
}

.contact-menu-li .wrapper {
	display: grid;
	grid-template-columns: 80px auto;
	column-gap: 1em;
}

.contact-menu-li .heading {
	align-self: center;
}

.contact-menu-li .heading-ja {
	margin-bottom: 0.4em;
	font-size: 20px;
	line-height: 1.3;
}

.contact-menu-li .heading-en {
	font-size: 14px;
}

.contact-menu-li .description {
	margin-top: 1.2em;
	font-size: 15px;
	line-height: 1.6;
}

.contact-menu-li .ul {
	font-size: 14px;
}

.contact-menu-li .button {
	width: initial;
	padding-inline: initial;
}

.contact-menu-li .note {
	margin-top: 1.3em;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
}

@media (min-width: 768px) {
.contact-menu-ul {
	grid-template-columns: 1fr 1fr 1fr;
}

.contact-menu-li {
	padding: 40px 10%;
}

.contact-menu-li .wrapper {
	grid-template-columns: 34% auto;
}

.contact-menu-li .heading-ja {
	font-size: 24px;
}
}

/*+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
- お問い合わせの流れ
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+*/
.contact-flow {
	--content-width: var(--content-width_small);
	background: #fff;
}

.contact-flow-note {
	width: fit-content;
	margin: 2.6em auto 0;
	padding: 0.9em 1em;
	border: 1px solid;
	line-height: 1.5;
}

@media (min-width: 768px) {
.contact-flow .flow-ul {
	grid-template-columns: repeat(3, 1fr);
}
}