@charset "UTF-8";

/*-----------------------------------------------------
  フォーム部分以外
----------------------------------------------------- */

.contact_btnset{
	margin-top: min(5em,15%);
	gap: 20px 100px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.contact_step{
	counter-reset: number 0;
	margin: 0 auto;
	width: min(700px, 100%);
	font-size: var(--font-20);
	font-weight: 700;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.contact_step dd{
	gap: 0.5em;
	display: flex; flex-direction: column; align-items: center;
}
.contact_step dd::before{
	counter-increment: number 1;
	content: counter(number);
	font-size: var(--font-24);
	width:2.25em;
	height:2.25em;
	background-color: #BEBEBE;
	position: relative;
	z-index: 2;
	border-radius: 100%;
	display: flex; justify-content: center; align-items: center;
}
.contact_step dd[now]{color:var(--blue-color);}
.contact_step dd[now]::before{
	background-color: var(--blue-color);
	color:#FFF;
}
.contact_step hr{
	flex-grow: 1;
	border: 0;
	border-top:solid 2px #BEBEBE;
	margin: calc((2.25em - 2px) / 2) -2px 0;
	font-size: var(--font-24);
}


/*-----------------------------------------------------
  フォーム部分
----------------------------------------------------- */

form table{width:100%; font-size: var(--font-16); line-height: 1.6em;}
form table tr > *{
	border-bottom:solid 1px #B2B2B2;
	padding-bottom: 1em;
}
form table tr:nth-of-type(n+2) > *{padding-top: 1em;}
form table th,
form .textarea-wrapper label{width:15em; color:var(--blue-color); font-weight: 700; line-height: 1.6em;}
form table th{vertical-align: top;}
form[step="normal"] table th::before{content: '';display: block; height: calc(0.5em + 1px);}
form table th.required::after,
form table th span.required::after{ content: '*';
	margin-left: 5px;
	color: var(--color-R);
}
form table th .requestTh{
	font-size: var(--font-14);
	color: var(--color-R);
	margin-top: 0.25em;
}
form table td{vertical-align: middle;}
form table td > *:nth-child(n+2){margin-top: 0.5em;}
form input{display: inline-block; max-width: 100%;}
form input[type="text"],
form select,
form textarea{
	box-sizing: border-box;
	border:solid 1px #707070;
	border-radius: 0.5em;
	padding: 1em;
	font-size: 14px;
	width:min(480px,100%);
}
form input[type="text"],
form textarea{background-color: var(--color-B-L);}
form textarea{height:10em;}
form input[type="text"].zipCode{width:min(90px,100%);}
form input[type="text"][placeholder*="請求書記載の得意先番号"]{width:min(40em,100%);}
form input[type="radio"],
form input[type="checkbox"]{ width:25px; height:25px; }
form ul.radio{
	gap: 1em 3em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
form ul.radio li{
	gap: 0.75em;
	display: flex; align-items: center;
}
form table td ul.radio + *{margin-top: 1em;}
form dl.inquiryAddr{
	gap: 1.5em;
	display: flex; align-items: center;
}
form dl.inquiryAddr dt{min-width: 5em;}
form dl.inquiryAddr dd{flex-grow: 1;}
form[step="normal"] dl.inquiryAddr + dl{margin-top: 1em;}
form .js-tel-optional p{line-height: normal; display: block; margin-bottom: 0.5em;}
form .select-wrapper,
form .input-wrapper{
	margin-top: min(3em,9%);
	gap: 1em 5%;
	display: flex;
	flex-wrap: wrap;
}
form .select-wrapper > *,
form .input-wrapper > *{width: 30%;}
form .select-wrapper > * > *:nth-child(1),
form .input-wrapper > * > *:nth-child(1){
	color: var(--blue-color);
	font-weight: 700;
	line-height: normal;
	display: block;
	margin-bottom: 0.5em;
}
form .file-input{
	box-sizing: border-box;
	border:solid 1px #707070;
	border-radius: 0.5em;
	padding: 1em;	
	font-size: 14px;
	overflow: hidden;
	position: relative;
}
form .file-input label{line-height: 16px;}
form .file-input input{
	opacity:0;
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
}
form .textarea-wrapper{
	margin-top: min(3em,9%);
	gap:2em;
	display: flex;
	flex-direction: column;
}
form .textarea-wrapper > *{
	display: flex; align-items: center;
}
form .textarea-wrapper textarea{flex-grow: 1;}
form .contact_privacy{
	margin-top: min(3em,9%);
	box-sizing: border-box;
	background-color:var(--color-tenpo_table);
	border-radius: 0.75rem;
	padding: 2em;	
	font-size: var(--font-16);
}
form .contact_privacy h4{
	color:var(--blue-color);
	font-size: var(--font-24);
	font-weight: 700;
	margin-bottom: 1em;
}
form .agree_box{
	margin-top: 1em;
	font-weight: 700;
	gap: 0.75em;
	display: flex; justify-content: center; align-items: center;
}
form .contact_submit{
	margin-top: min(5em,15%);
	gap:2em; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
}
form .contact_submit button,
form .contact_submit label,
form .contact_submit > div{
	display: block; text-align: center; align-items: center; padding: 15px 0; border: 2px solid var(--blue-color); border-radius: 9999px; background-color: #fff; color: var(--blue-color); font-size: var(--font-18); font-weight: 700; /* letter-spacing: 0.15em; */ text-decoration: none; transition: all 0.3s ease; max-width: 300px; margin: 0 auto; position: relative;
	box-sizing: border-box; padding: 15px 2em; margin: 0; min-width: min(300px,100%); aspect-ratio: 300 / 56;
	cursor: pointer;
}
form .contact_submit > div{overflow: hidden;}
form .contact_submit button[disabled]{opacity:0.5;cursor: auto;}
form .contact_submit button:not([disabled]):hover,
form .contact_submit label:hover,
form .contact_submit > div:hover{background-color: var(--blue-color); color: #fff;}
form .contact_submit label input,
form .contact_submit > div input{font-size: inherit; font-weight: inherit; color:inherit; background-color: transparent; border:none; cursor: inherit;}
form .contact_submit > div input{position: absolute; inset:0;}
form .contact_submit button svg,
form .contact_submit label svg,
form .contact_submit > div svg{ width: 9px; height: auto; transition: all 0.3s ease; position: absolute; right: 5%; top: 0; bottom: 0; margin: auto; }
form .contact_submit label svg,
form .contact_submit > div svg{transform: scaleX(-1); right:auto; left:5%;}
@media only screen and (max-width: 980px){
	form .select-wrapper > *,
	form .input-wrapper > *{width: 47.5%;}
}
@media only screen and (max-width: 750px){
	form table,form table > *,form tr,form tr > *{display: block;}
	form table th,
	form .textarea-wrapper label{line-height: normal;}
	form table th{padding-bottom: 0; border-bottom: none; width: 100%;}
	form table th .requestTh{display: inline-block; margin: 0; margin-left: 1em;}
	form table td{padding-top: 1em;}
	form input[type="text"], form select, form textarea,
	form .select-wrapper > *,
	form .input-wrapper > *{width: 100%;}
	form .textarea-wrapper > *{gap: 0.5em; flex-direction: column; align-items: flex-start;}
}