@charset "utf-8";

:root {

}


@media (prefers-color-scheme: dark) {
	:root {
	}
}

@media screen and (max-width:480px) {
	:root {

		--Contact_DivWrap_padding: var(--Size_48) var(--Padding_W);
		--UL_gap: var(--Size_24);
		--Form_padding: var(--Size_08) var(--Size_24) var(--Size_08) var(--Size_08);

	}
}

@media screen and (min-width:481px) and (max-width: 768px) {
	:root {

		--Contact_DivWrap_padding: var(--Size_48) var(--Size_60);
		--UL_gap: var(--Size_48) var(--Size_24);
		--Form_padding: var(--Size_12) var(--Size_24) var(--Size_12) var(--Size_12);

	}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
	:root {

		--Contact_DivWrap_padding: var(--Size_48) var(--Size_100);
		--UL_gap: var(--Size_48) var(--Size_24);
		--Form_padding: var(--Size_12) var(--Size_24) var(--Size_12) var(--Size_12);

	}
}

@media screen and (min-width:1025px) and ( max-width:1920px) {
	:root {

		--Contact_DivWrap_padding: var(--Size_48) var(--Size_200);
		--UL_gap: var(--Size_48) var(--Size_24);
		--Form_padding: var(--Size_12) var(--Size_24) var(--Size_12) var(--Size_12);

	}
}

@media screen and (min-width:1921px) {
	:root {

		--Contact_DivWrap_padding: var(--Size_48) var(--Size_200);
		--UL_gap: var(--Size_48) var(--Size_24);
		--Form_padding: var(--Size_12) var(--Size_24) var(--Size_12) var(--Size_12);

	}
}








/*　Page　コンタクト　*/

section.contact {
	position: 36px var(--Padding_W) var(--Size_24);
}

section.contact h2 {
	padding: 0 0;
	text-align: center;
}

section.contact div#wrap {
	padding: var(--Contact_DivWrap_padding);
}

section.contact div#wrap form {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
 	gap: var(--Size_12);
}

section.contact div#wrap form ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
 	gap: var(--Size_12);
	width: 100%;
}

section.contact div#wrap form ul li {
	width: 100%;
}

section.contact div#wrap form ul li label {
	display: inline-block;
	padding: 0 0 var(--Size_06);
	font-size: var(--Size_10);
	font-weight: 500;
}

section.contact div#wrap form ul li select,
section.contact div#wrap form ul li input,
section.contact div#wrap form ul li textarea {
	position: relative;
	display:block;
	padding: var(--Form_padding);
	width: 100% !important;
	font-size: var(--Size_10);
	color: var(--Color_1D100);
	border: none;
	border-radius: var(--Border-radius_S4);
	background: var(--Color_FF060);
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}

section.contact div#wrap form ul li div {
	position: relative;
	display: block;
}

section.contact div#wrap form ul li div:after {
	content: '';
	position: absolute;
	top: 50%;
	right: var(--Size_12);
	width: 8px;
	height: 8px;
	border-bottom: 2px var(--Color_1D100) solid;
	border-right: 2px var(--Color_1D100) solid;
	transform: translateY(-50%) rotate(45deg);
	z-index: 1;
}

section.contact div#wrap form div.btn {
	padding: var(--Size_24) 0 0;
	width: 100%;
	text-align: center;
}

section.contact div#wrap form div.btn div {
	position: relative;
	display: inline-block;
}

section.contact div#wrap form div.btn div span {
	display: none;
}

section.contact div#wrap form div.btn div input {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: var(--Size_12) var(--Size_48); 
	font-size: var(--Size_12);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
	color: var(--Color_FF100);
	background: var(--Color_1D100);
	border: none;
	border-radius: var(--Border-radius_M2);
}

section.contact div#wrap form div.btn div:after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -24px;
	margin: auto 0;
	width: var(--Size_30);
	background: url('http://lp02.nishimuta-lab.com/wp-content/themes/JugarSun/svg/button_arrow.svg');
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 300 / 71;
	-webkit-transition: var(--Transition_06);
	-moz-transition: var(--Transition_06);
	-o-transition: var(--Transition_06);
	transition: var(--Transition_06);
}

section.contact div#wrap form div.btn div:hover:after {
	right: -44px;
}
