@charset "utf-8";
/* =====================
  Reset
===================== */

/* =====================
  Form
===================== */
.form {
	/* サイトメインカラー */
	--_main-color: #0061a4;
	--_red: #b61024;
	--_gray: #575757;

	/* フォーム背景 */
	--_input-bg-color: #f2f4f6;

	/* 表の枠色 */
	--_table-bd-color: #e1e1e1;

	/* Step */
	--_active-color: var(--_main-color);
	--_inactive-color: #989898;
}

.form,
.form * {
	box-sizing: border-box;
}
.form {
	padding-block: 120px 234px;
	max-inline-size: 824px;
	margin-inline: auto;
}
@media not all and (min-width: 768px) {
	.form {
		padding-block: 18.13vw calc((100 / 750) * 242 * 1vw);
	}
}

/* 文章 */
.form .form-text {
	text-align: left;
	line-height: 1.8;
}
.form .form-text.tac {
	text-align: center;
}
@media not all and (min-width: 768px) {
	.form .form-text.sp-tal {
		text-align: left;
	}
}
/* Desktop */
@media print, screen and (min-width: 768px) {
	.form .form-text br.sp {
		display: none;
	}
	.form .form-text br.pc {
		display: block;
	}
}

/* =====================
  h1
===================== */
.form h1 {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 40px;
}
@media not all and (min-width: 768px) {
	.form h1 {
		font-size: calc((100 / 750) * 40 * 1vw);
		margin-bottom: calc((100 / 750) * 48 * 1vw);
	}
}

/* =====================
  Index
===================== */
[data-id="index"] .form-text {
	margin-block: 48px 64px;
}
@media not all and (min-width: 768px) {
	[data-id="index"] .form-text {
		margin-block: calc((100 / 750) * 64 * 1vw);
		text-align: left;
	}
}

[data-id="index"].form .table .tr {
	&:last-child {
		border-color: transparent;
	}
}

/* =====================
  step
===================== */
.step {
	font-weight: bold;
	width: 288px;
	height: 59px;
	margin-inline: auto;
	position: relative;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	/* margin-top: 48px; */
	margin-bottom: 64px;
	color: var(--_inactive-color);
}
@media not all and (min-width: 768px) {
	.step {
		margin-bottom: calc((100 / 750) * 64 * 1vw);
		/* margin-block: calc((100 / 750) * 64 * 1vw) calc((100 / 750) * 120 * 1vw); */
		width: calc((100 / 750) * 408 * 1vw);
		height: calc((100 / 750) * 87 * 1vw);
	}
}

/* 線 */
.step::before {
	content: "";
	width: 90%;
	height: 1px;
	top: 24px;
	background: currentColor;
	display: block;
	position: absolute;
	left: 50%;
	translate: -50% 0;
	align-self: start;
}
@media not all and (min-width: 768px) {
	.step::before {
		width: 80%;
		top: 2.4vw;
	}
}

/* 点 */
.step span {
	display: block;
	position: absolute;
	line-height: 1;
	bottom: -1px;
	font-size: 14px;
}
@media not all and (min-width: 768px) {
	.step span {
		font-size: calc((100 / 750) * 26 * 1vw);
	}
}

/* 円 */
.step span::before {
	content: "";
	display: block;
	position: absolute;
	top: -27px;
	left: 8px;
	width: 11px;
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: calc(infinity * 1px);
}
@media not all and (min-width: 768px) {
	.step span::before {
		width: calc((100 / 750) * 18 * 1vw);
		top: -7.2vw;
	}
}

/* 入力 */
.step span:nth-child(1) {
	left: 0;
}
.step span:nth-child(1)::after {
	content: "入力";
}
@media not all and (min-width: 768px) {
	.step span:nth-child(1) {
		left: 1.5vw;
	}
}
.step span:nth-child(1)::before {
	left: 50%;
	transform: translateX(-50%);
}

/* 確認 */
.step span:nth-child(2) {
	left: 50%;
	translate: -50% 0;
}
.step span:nth-child(2)::after {
	content: "確認";
}
/* 完了 */
.step span:nth-child(3) {
	right: 0;
}
.step span:nth-child(3)::after {
	content: "完了";
}
@media not all and (min-width: 768px) {
	.step span:nth-child(3) {
		right: 1.5vw;
	}
}
.step span:nth-child(3)::before {
	right: 0;
}

/* アクティブ */
.form[data-id="index"] .step span:nth-child(1) {
	color: var(--_active-color);
}
.form[data-id="index"] .step span:nth-child(1)::before {
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
}
.form[data-id="confirm"] .step span:nth-child(2) {
	color: var(--_active-color);
}
.form[data-id="confirm"] .step span:nth-child(2)::before {
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
}
.form[data-id="complete"] .step span:nth-child(3) {
	color: var(--_active-color);
}
.form[data-id="complete"] .step span:nth-child(3)::before {
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--_active-color) 20%, transparent 100%);
}

/* =====================
  パーツ
===================== */
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
  font-family: inherit;
  border-radius: 2px;
  border: none;
  background: var(--_input-bg-color);
  width: 100%;
  font-size: 16px;
  padding-block: 1.25em;
  padding-inline: 1em;
  position: relative;
  
  &::placeholder {
    color: #AFB5BA;
  }
}
@media not all and (min-width: 768px) {
	/* prettier-ignore */
	.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select) {
    font-size: calc((100 / 750) * 28 * 1vw);
    padding-block: calc((100 / 750) * 27 * 1vw);
  }
}

/* フォーム文字色 */
.form::selection {
	color: var(--_gray);
}

/* テキストエリア */
.form textarea {
	min-block-size: 256px;
	max-block-size: 50vh;
}
@supports (field-sizing: content) {
	.form textarea {
		field-sizing: content;
	}
}

@media not all and (min-width: 768px) {
	.form textarea {
		min-block-size: calc((100 / 750) * 377 * 1vw);
	}
}

/* セレクトボックス */
.form select {
	width: fit-content;
	min-width: 280px;
	background-color: #fff;
	border: solid 1px var(--_gray);
	-webkit-appearance: none;
	appearance: none;
	&:hover {
		cursor: pointer;
	}
}
@media not all and (min-width: 768px) {
	.form select {
		min-width: calc((100 / 750) * 462 * 1vw);
	}
}
.select-wrap {
	width: fit-content;
	position: relative;
	&::after {
		content: "";
		position: absolute;
		top: calc(50% - 10px / 2 - 4px);
		right: 16px;
		width: 10px;
		height: 10px;
		border-right: 3px solid var(--_main-color);
		border-bottom: 3px solid var(--_main-color);
		transform: rotate(45deg);
		pointer-events: none;
	}
}

/* =====================
  error
===================== */
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid {
  outline: 1px solid var(--_red);
}
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea, select):user-invalid + .error {
  display: block !important;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  right: 2em;
}
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']),textarea, select):focus {
  outline-color: var(--_gray);
}
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid + .error::before {
  content: attr(data-text);
}
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is([name='address']) + .error {
  top: 77%;
}
/* prettier-ignore */
.form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is(textarea) + .error {
  top: 13%;
}
/* prettier-ignore */
@media not all and (min-width: 768px) {
  .form :where(input:is([type='text'], [type='tel'], [type='email'], [type='url']), textarea,select):user-invalid:is(textarea) + .error {
    top: 86%;
  }
}

/* ==== パーツ下部エラー ==== */
.form .error:empty {
	display: none;
}
.form .error {
	position: relative;
	color: var(--_red);
	font-size: 12px;
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	border-radius: 2px;
	word-break: break-all;
	line-height: 1.5;
	padding-inline: 11px;
	padding-block: 5px;
	border: 1px solid currentColor;
	background: color-mix(in srgb, currentColor 10%, transparent 100%);
}
@media not all and (min-width: 768px) {
	.form .error {
		font-size: calc((100 / 750) * 18 * 1vw);
		padding-inline: calc((100 / 750) * 13 * 1vw);
		padding-block: calc((100 / 750) * 11 * 1vw);
	}
}

/* ==== table ==== */
.form .table {
	display: grid;
	grid-template-rows: 1fr;
	gap: 40px;
}
@media not all and (min-width: 768px) {
	.form .table {
		gap: calc((100 / 750) * 56 * 1vw);
	}
}

/* ==== table row ==== */
.form .table .tr {
	border-bottom: 1px solid var(--_table-bd-color);
	display: grid;
	grid-template-rows: 1fr;
	padding-bottom: 40px;
	gap: 20px;

	&:first-child {
		padding-top: 40px;
	}
}
@media not all and (min-width: 768px) {
	.form .table .tr {
		padding-bottom: calc((100 / 750) * 56 * 1vw);
		gap: calc((100 / 750) * 24 * 1vw);
	}
}

/* ==== dt ==== */
.form .table dt {
	margin-block: calc((1em - 1lh) / 2);
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px;
	font-weight: bold;
}
@media not all and (min-width: 768px) {
	.form .table dt {
		font-size: calc((100 / 750) * 28 * 1vw);
	}
}
.form .table .tr:has(:where(input, textarea, select)) dt::before {
	content: "任意";
	display: grid;
	place-content: center;
	padding-inline: 6px;
	padding-block: 4px;
	color: var(--_gray);
	border: 1px solid currentColor;
	line-height: 1;
	font-size: 13px;
}
@media not all and (min-width: 768px) {
	.form .table .tr:has(:where(input, textarea, select)) dt::before {
		padding-inline: calc((100 / 750) * 8 * 1vw);
		padding-block: calc((100 / 750) * 6 * 1vw);
		font-size: calc((100 / 750) * 22 * 1vw);
	}
}
.form .table .tr:has([required], [data-required]) dt::before {
	content: "必須";
	color: var(--_red);
	border-color: currentColor;
}

/* ==== dd ==== */
.form .table dd {
	word-break: break-all;
	line-height: 2;
	position: relative;
	display: grid;
	grid-template-rows: 1fr;
	gap: 16px;
}
@media not all and (min-width: 768px) {
	.form .table dd {
		gap: calc((100 / 750) * 24 * 1vw);
	}
}

/* ==== 郵便番号、生年月日 ==== */
.form .table dd .text {
	display: grid;
	grid-template-columns: auto 240px 1fr;
	align-items: center;
	gap: 16px;
	font-size: 14px;

	&.tel-type {
		grid-template-columns: 280px auto 1fr;
	}
}
@media not all and (min-width: 768px) {
	.form .table dd .text {
		gap: calc((100 / 750) * 16 * 1vw);
		font-size: calc((100 / 750) * 22 * 1vw);
		grid-template-columns: auto calc((100 / 750) * 300 * 1vw) 1fr;
	}
}
.form .table dd .text:has([name="postalcode"]) > span:first-child {
	font-weight: bold;
	padding-left: 1em;
}
/* .form .table dd .text:has([name="birth"]) {
	grid-template-columns: auto 1fr;
} */
@media not all and (min-width: 768px) {
	.form .table dd .text:has([name="birth"]) {
		grid-template-columns: auto;
	}
}
/* 縦並び */
.form .table dd .text[data-type="row"] {
	grid-template-columns: 1fr;
}

/* ==== confirm ==== */
[data-id="confirm"] .form-text {
	margin-bottom: 64px;

	@media not all and (min-width: 768px) {
		margin-bottom: calc((100 / 750) * 64 * 1vw);
	}
}
@media print, screen and (min-width: 768px) {
	.form[data-id="confirm"] .table {
		grid-template-columns: minmax(auto, 200px) 1fr;
	}
	.form[data-id="confirm"] .table .tr {
		align-items: flex-start;
		grid-template-rows: auto;
		grid-template-columns: subgrid;
		grid-column: span 2;
	}
	.form[data-id="confirm"] .table .tr:last-child {
		border-bottom: 1px solid var(--_table-bd-color);
	}
	.form[data-id="confirm"] .table .tr dt {
		margin-top: unset;
	}
}

/* =====================
  プライバシーポリシーチェック
===================== */
.form label[for="agree"] {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px;
	width: fit-content;
	margin-inline: auto;
	margin-top: 48px;
	cursor: pointer;
}
@media not all and (min-width: 768px) {
	.form label[for="agree"] {
		font-size: calc((100 / 750) * 28 * 1vw);
		margin-top: calc((100 / 750) * 30 * 1vw);
	}
}
.form label[for="agree"] input[type="checkbox"] {
	cursor: pointer;
	width: 24px;
	aspect-ratio: 1 / 1;
	margin: unset;
}
@media not all and (min-width: 768px) {
	.form label[for="agree"] input[type="checkbox"] {
		width: calc((100 / 750) * 50 * 1vw);
		height: calc((100 / 750) * 50 * 1vw);
		appearance: none;
		border: 1px solid var(--_gray);
	}
	.form label[for="agree"] input[type="checkbox"]:checked {
		appearance: checkbox;
	}
}
.form label[for="agree"] a {
	font-weight: bold;
	text-decoration: underline;
	color: var(--_main-color);
	@media (any-hover: hover) {
		&:hover {
			opacity: 0.5;
		}
	}
}

/* =====================
  submit
===================== */
.form .submit {
	display: grid;
	grid-template-columns: 1fr;
	gap: 46px;
	margin-inline: auto;
	width: fit-content;
}
.form .submit button {
	appearance: none;
	cursor: pointer;
}
.form .submit button:is([form="post"], [form="submit"]) {
	appearance: none;
}
.form .submit button:is([form="post"], [form="submit"]):where([disabled]) {
	opacity: 0.5;
	pointer-events: none;
}
.form .submit button:is([form="post"], [form="submit"]):where([disabled])::after {
	content: "";
	animation-name: road;
	animation-duration: 1500ms;
	animation-delay: 0ms;
	animation-timing-function: step(1);
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-play-state: running;
}
@keyframes road {
	0% {
		content: "";
	}
	33% {
		content: ".";
	}
	66% {
		content: "..";
	}
	100% {
		content: "...";
	}
}

@media not all and (min-width: 768px) {
	.form .submit button:is([form="post"], [form="submit"]) {
		appearance: none;
	}
}
.form .submit button[form="back"] {
	appearance: none;
	text-align: center;
	text-decoration: underline;
	color: var(--_gray);
	transition: color 250ms ease 0s;
	will-change: color;
	@media (any-hover: hover) {
		&:hover {
			color: color-mix(in srgb, var(--_gray) 80%, transparent 100%);
		}
	}
}

/* =====================
  form-anchor
===================== */
.form-anchor {
	margin-inline: auto;
	text-align: center;

	.link_type02 {
		display: inline-block;
	}
}

/* =====================
  resume
===================== */
.form .resume .file {
	margin-bottom: 13px;
	position: relative;
	display: grid;
	grid-template-columns: 246px 1fr 24px;
	gap: 16px;
	align-items: center;
}
.form .resume .file input[type="file"] {
	appearance: none;
	display: none;
}

/* ファイル選択ボタン */
.form .resume .file span:first-of-type {
	font-weight: bold;
	cursor: pointer;
	background: var(--_input-bg-color);
	display: grid;
	width: fit-content;
	grid-template-columns: auto auto;
	border-radius: calc(infinity * 1px);
	color: var(--_main-color);
	font-size: 16px;
	line-height: 1;
	gap: 8px;
	padding-block: 24px;
	min-width: 246px;
	justify-content: center;
	text-align: center;
	transition: background 250ms ease 0s;
	will-change: background;
	@media (any-hover: hover) {
		&:hover {
			background: color-mix(in srgb, currentColor 70%, transparent 100%);
		}
	}
}
@media not all and (min-width: 768px) {
	.form .resume .file span:first-of-type {
		margin-top: calc((100 / 750) * 17 * 1vw);
		font-size: calc((100 / 750) * 26 * 1vw);
		padding-block: calc((100 / 750) * 40 * 1vw);
		min-width: calc((100 / 750) * 390 * 1vw);
		width: calc((100 / 750) * 390 * 1vw);
		gap: calc((100 / 750) * 13 * 1vw);
	}
}
.form .resume .file span:first-of-type::before {
	content: "";
	width: 14px;
	aspect-ratio: 1 / 1;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M6 8H0V6H6V0H8V6H14V8H8V14H6V8Z" fill="currentColor"/></svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M6 8H0V6H6V0H8V6H14V8H8V14H6V8Z" fill="currentColor"/></svg>');
	background-color: currentColor;
	@media not all and (min-width: 768px) {
		width: calc((100 / 750) * 22 * 1vw);
	}
}

/* ファイル名 */
.form .resume .file .resume-title {
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 200px;
	font-size: 14px;
}
@media not all and (min-width: 768px) {
	.form .resume .file .resume-title {
		width: calc((100 / 750) * 327 * 1vw);
	}
}

/* ファイル削除ボタン */
.form .resume .file .resume-cancel {
	z-index: 2;
	border: none;
	outline: none;
	display: grid;
	cursor: pointer;
	width: 24px;
	height: 24px;
	color: var(--_input-bg-color);
	background: currentColor;
	margin-inline: auto 0;
	place-content: center;
	border-radius: calc(infinity * 1px);
	transition: all 250ms ease 0s;
	@media (any-hover: hover) {
		&:hover {
			background: color-mix(in srgb, currentColor 70%, transparent 100%);
		}
	}
}
.form .resume .file .resume-cancel[hidden] {
	display: none;
}
.form .resume .file .resume-cancel::after {
	content: "";
	width: 11px;
	aspect-ratio: 1 / 1;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5.00002 6.13568L1.59299 9.5427L0.457319 8.40703L3.86434 5L0.457319 1.59297L1.59299 0.457299L5.00002 3.86432L8.40705 0.457299L9.54272 1.59297L6.1357 5L9.54272 8.40703L8.40705 9.5427L5.00002 6.13568Z" fill="currentColor"/></svg>');
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M5.00002 6.13568L1.59299 9.5427L0.457319 8.40703L3.86434 5L0.457319 1.59297L1.59299 0.457299L5.00002 3.86432L8.40705 0.457299L9.54272 1.59297L6.1357 5L9.54272 8.40703L8.40705 9.5427L5.00002 6.13568Z" fill="currentColor"/></svg>');
	background-color: var(--_gray);
}

/* モバイルはgirdシステムで表示 */
@media not all and (min-width: 768px) {
	.form .resume .file {
		grid-template-areas:
			"select select"
			"title button";
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		margin-bottom: calc((100 / 750) * 18 * 1vw);
		gap: calc((100 / 750) * 28 * 1vw);
	}
	.form .resume .file span:first-of-type {
		grid-area: select;
	}
	.form .resume .file .resume-title {
		grid-area: title;
	}
	.form .resume .file button {
		grid-area: button;
	}
}

/* 注釈 */
.form .resume p {
	text-indent: -1em;
	padding-left: 1em;
	font-size: 14px;
}
@media not all and (min-width: 768px) {
	.form .resume p {
		font-size: calc((100 / 750) * 22 * 1vw);
	}
}
.form .resume p::before {
	content: "※";
}

/* =====================
  チェックボックス
===================== */
.form .checkbox {
	display: grid;
	grid-auto-flow: column;
	justify-content: flex-start;
	gap: 16px;
}
@media not all and (min-width: 768px) {
	.form .checkbox {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: calc((100 / 750) * 28 * 1vw);
	}
}
.form .checkbox label {
	cursor: pointer;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 5px;
	font-weight: bold;
}
@media not all and (min-width: 768px) {
	.form .checkbox label {
		font-size: calc((100 / 750) * 28 * 1vw);
	}
}
.form .checkbox input:is([type="checkbox"], [type="radio"]) {
	margin: unset;
	cursor: pointer;
	width: 16px;
	aspect-ratio: 1 / 1;
}
@media not all and (min-width: 768px) {
	.form .checkbox input:is([type="checkbox"], [type="radio"]) {
		appearance: none;
		border: 1px solid var(--_gray);
		width: calc((100 / 750) * 24 * 1vw);
		height: calc((100 / 750) * 24 * 1vw);
	}
	.form .checkbox input[type="checkbox"]:checked {
		appearance: checkbox;
	}
}

/* =====================
  UIlock
===================== */
.ui-lock {
	opacity: 0.8;
	pointer-events: none;
	position: relative;
	-webkit-user-select: none;
	user-select: none;
}
.ui-lock * {
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}
.ui-lock::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	background: #ffffff05;
	z-index: calc(infinity * 1px);
}