/* --------------------------------------------------------------------------
   inquiry
-------------------------------------------------------------------------- */

#app .cover { height: 200px; background: linear-gradient(0.45turn,#1f4873 50%,#5a7591 70%); }
.inquiry .preface { text-align: center; }
.inquiry form { width: 1000px; margin: 0 auto; text-align: left; }
.inquiry form .field {
	width: 100%; margin: 24px auto 48px; padding: 24px 0;
	border: solid 1px #1f4873; border-width: 1px 0 1px 0;
}
.inquiry dl { display: flex; padding: 30px 10px; border-bottom: solid 1px #e8ebf0; }
.inquiry dl:last-of-type { border: none; }
.inquiry dt { width: 280px; line-height: 2.0; font-weight: 500; }
.inquiry dd { position: relative; width: 680px; line-height: 2.0; }
.inquiry dd p { margin: 0.5em 0 0; line-height: 1.6; }
.inquiry label.code { width: 2.0em; }

.inquiry input[type="text"] {
	appearance: none; width: 100%; padding: 0 10px; background: #fff; border: solid 1px #1f4873;
	border-radius: 8px; font: inherit; color: #1f4873;
}
.inquiry input[type="text"].short { width: 10.0em; margin: 0 0 10px; }
.inquiry input[type="file"] { display: block; width: 100%; font: inherit; }
.inquiry input[type="file"]::file-selector-button {
	appearance: none; margin-right: 10px; padding: 0 10px; background: #fff; cursor: pointer; 
	border: solid 1px #1f4873; border-radius: 8px; font: inherit; color: #1f4873; 
}
.inquiry input[type="file"]+input[type="file"] { margin: 10px 0; }
.inquiry .type { width: 480px; }
.inquiry .type::after {
	content: ''; position: absolute; top: 50%; right: 20px; width: 8px; height: 8px;
	border: solid 3px #1f4873; border-width: 0 3px 3px 0; cursor: pointer;
	transform: translateY(-75%) rotate(45deg);
}
.inquiry select {
	appearance: none; position: relative; width: 100%; padding: 0 10px; background: #fff;
	border: solid 1px #1f4873; border-radius: 8px; font: inherit; color: #1f4873; cursor: pointer;
}
.inquiry textarea {
	width: 100%; padding: 10px; background: #fff; border: solid 1px #1f4873;
	border-radius: 8px; font: inherit; line-height: 1.6; color: #1f4873;
}
.inquiry .agreement { text-align: center; }
.inquiry input[type=checkbox] { opacity: 0; margin-left: 12px; }
.inquiry .check {
	position: relative; padding: 0 24px; font-size: 1.6rem; cursor: pointer;
	white-space: nowrap;
}
.inquiry .check::before {
	content: ''; position: absolute; top: 0; left: 0; width: 18px; height: 18px;
	border: solid 1px #1f4873; border-radius: 4px;
}
.inquiry .check::after {
	content: ''; position: absolute; top: 3px; left: 6px; opacity: 0; width: 5px; height: 9px;
	border: solid 3px #1f4873; border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.inquiry input[type=checkbox]:checked + .check::after { opacity: 1; }
.inquiry .agreement a { border-bottom: solid 1px #1f4873; }
.inquiry .agreement a::after {
	content: ''; display: inline-block; width: 18px; height: 18px; margin: 0 4px;
	background: 100% 100%/600% auto no-repeat url(../img/ico.svg); aspect-ratio: 1/1;
	transform: translateY(2px);
}

.inquiry button {
	position: relative; appearance: none; width: 320px; margin: 24px 20px 0; background: #fff;
	border: solid 1px #1f4873; border-radius: 999px; color: #1f4873;
	font: 700 2.0rem/2.6 'Zen Kaku Gothic New'; text-align: center; cursor: pointer;
}
.inquiry button.back { background: #e8ebf0; }
.inquiry button::after {
	content: ''; position: absolute; top: 50%; right: 15px; width: 28px; height: 28px;
	background: 80% 0/600% auto no-repeat url(../img/ico.svg); transform: translateY(-50%);
}
.inquiry button.back::after {
	right: auto; left: 15px; transform: translateY(-50%) rotate(180deg);
}
.inquiry button:hover::after { background-position: 80% 100%; }
.inquiry button.inact { opacity: .5; }
.inquiry button.inact:hover::after { background-position: 80% 0; }
.inquiry button:disabled { cursor: default; }

@media screen and (max-width:768px) {
	#app .cover { height: 20vh; }
	.inquiry .lead { font-size: 1.6rem; }
	.inquiry form { width: 90%; }
	.inquiry article { margin: 24px auto 36px; }
	.inquiry .complete { width: 90%; margin: 24px auto; }
	.inquiry .complete .lead { text-align: left; }
	.inquiry dl { display: block; padding: 16px 0; }
	.inquiry dt { width: 100%; margin: 0 0 10px; }
	.inquiry dd { width: 100%; }
	.inquiry .type { width: 100%; }
	.inquiry button { width: 80%; margin: 24px auto 0; font-size: 1.8rem; }
}