@charset "utf-8";

:root { --form-accent: #64c5da; --form-error: #d9534f; --form-required: #d9534f; --form-button: #f29600; --form-border: #bbb; --form-text: #141412; --form-input-bg: #fff; --form-progress: #ccc; --form-line: #ddd; --form-radius: 4px; --form-width: 50.625rem; --form-font-size: 1rem; --form-policy-bg: #f9f9f9; --form-policy-scrollbar: #ccc;}
:root { --form-icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141412' stroke-width='2'/%3E%3C/svg%3E");}
:root { --form-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E");}
:root { --form-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM7 3.5h2v6H7zM7 11h2v2H7z'/%3E%3C/svg%3E");}
:root { --form-icon-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23d9534f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");}


/* フォーム
-------------------------------------------------- */
.formWrap,
.formWrap *,
.formWrap *::before,
.formWrap *::after { box-sizing: border-box;}
.formWrap { width: 100%; max-width: var(--form-width); margin: 0 auto 30px auto; font-size: var(--form-font-size); text-align: center;}
.formWrap p { margin: 0 auto 1em auto; padding: 0; text-align: left;}
.formWrap em { font-weight: bold; font-style: normal; color: #d80000;}


/* 表
-------------------------------------------------- */
.formWrap .formTable { width: 100%; margin: 5px auto 20px auto; font-size: var(--form-font-size); background-color: #fff; border-collapse: collapse;}
.formWrap .formTable em { font-size: 0.8125rem; font-weight: bold; font-style: normal; color: #f00;}
.formWrap .formTable th,
.formWrap .formTable td { text-align: left; vertical-align: middle; border: 1px solid #ccc;}
.formWrap .formTable th { width: 30%; padding: 10px; font-weight: normal; color: #111; text-align: left; background-color: transparent;}
.formWrap .formTable td { padding: 15px 10px 10px 10px;}
/* 必須の印 */
.formWrap .formTable th .required { display: inline-block; float: right; margin: 0 5px; padding: 4px 6px; font-size: 0.75rem; font-weight: normal; color: #fff; line-height: 1; vertical-align: middle; background: var(--form-required); border-radius: 3px;}
@media only screen and (max-width: 639px) {
  .formWrap .formTable th { display: block; width: 100%; padding: 20px 0 10px; font-weight: bold; background-color: transparent; border: 0;}
  .formWrap .formTable td { display: block; width: 100%; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--form-line);}
  .formWrap .formTable tr th { border-bottom: none;}
  .formWrap .formTable th .required { float: none; margin: 0 0 0 8px;}
  .formWrap .formTable tr:first-child th { border-top: 1px solid var(--form-line);}
}


/* 入力欄
-------------------------------------------------- */
.formWrap input,
.formWrap select,
.formWrap textarea { margin: 0 0 2px 0; vertical-align: baseline;}
.formWrap input { line-height: normal;}
.formWrap input[disabled] { cursor: default;}
.formWrap input[type="checkbox"],
.formWrap input[type="radio"] { padding: 0;}
.formWrap label { margin-right: 0.5em; white-space: nowrap;}
.formWrap .vertical label { display: block; width: fit-content;}
.formWrap .formTable th label { margin-right: 0; white-space: normal;}
.formWrap button,
.formWrap textarea,
.formWrap select,
.formWrap input[type="text"] { font-family: inherit; border: 1px solid var(--form-border);}
.formWrap input,
.formWrap textarea { color: var(--form-text);}
.formWrap input:not([type="checkbox"]):not([type="radio"]):focus,
.formWrap select:focus,
.formWrap textarea:focus { border-color: var(--form-accent); outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-accent) 30%, transparent);}
.formWrap input[type="text"],
.formWrap input[type="url"],
.formWrap input[type="email"],
.formWrap input[type="tel"],
.formWrap input[type="date"],
.formWrap input[type="number"],
.formWrap textarea { width: 100%; padding: 0.5em 0.75em; font-size: var(--form-font-size); line-height: 1.5; background-color: var(--form-input-bg); border: 1px solid var(--form-border); border-radius: var(--form-radius);}
.formWrap textarea { vertical-align: top;}
.formWrap input::placeholder,
.formWrap textarea::placeholder { color: #aaa;}
.formWrap select { width: 100%; padding: 0.5em 2.25em 0.5em 0.75em; font-size: var(--form-font-size); color: var(--form-text); line-height: 1.5; background: var(--form-input-bg) var(--form-icon-select) no-repeat right 0.75em center / 0.75em 0.5em; border: 1px solid var(--form-border); border-radius: var(--form-radius); cursor: pointer; appearance: none;}
.formWrap input.input_m,
.formWrap select.input_m { width: 50%;}
.formWrap input.input_s,
.formWrap select.input_s { width: 30%;}
.formWrap input.input_xs,
.formWrap select.input_xs { width: 20%;}
.formWrap .heigth_em10 { height: 10em;}
/* 生年月日（type="textymd"）の年・月・日の欄。桁数に合わせた幅にする */
.formWrap input[maxlength="4"] { width: 5.5em;}
.formWrap input[maxlength="2"] { width: 4em;}
/* 生年月日（type="selectymd"）を囲む要素に付ける。プルダウンを選択肢に合わせた幅にし、スマホの幅では年と、月・日の 2 行に分ける */
.formWrap .select-ymd select { width: auto;}
@media only screen and (max-width: 639px) {
  .formWrap .select-ymd:has(select) { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px 0.3em; align-items: center;}
  .formWrap .select-ymd select { width: 100%;}
  .formWrap .select-ymd select:first-child { grid-column: 1 / 4;}
}
/* 郵便番号の欄（ハイフンを含めて 8 文字）。テンプレートで maxlength="8" を付ける */
.formWrap input[maxlength="8"] { width: 7em; margin-right: 1em;}
.formWrap label:has(> input[type="checkbox"]),
.formWrap label:has(> input[type="radio"]) { margin-right: 0.8em;}
.formWrap .formTable td p:has(> small) { margin: 4px 0 0;}
.formWrap .formTable td small { font-size: clamp(0.75rem, 0.82vw, 0.875rem); color: #666; line-height: 1.6;}
.formWrap .visually-hidden { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; border: 0; clip-path: inset(50%);}
@media only screen and (max-width: 639px) {
  .formWrap .pc-only { display: none;}
}
.formWrap input[type="checkbox"],
.formWrap input[type="radio"] { display: inline-block; width: 1.25em; height: 1.25em; margin: 4px 2px 4px 0; font-size: var(--form-font-size); vertical-align: middle; background: var(--form-input-bg); border: 1px solid var(--form-border); border-radius: var(--form-radius); cursor: pointer; appearance: none;}
.formWrap input[type="radio"] { border-radius: 50%;}
@media (forced-colors: active) {
  .formWrap input[type="checkbox"],
  .formWrap input[type="radio"] { appearance: auto;}
}
.formWrap input[type="checkbox"]:checked { background: var(--form-accent) var(--form-icon-check) no-repeat center / 0.875em 0.875em; border-color: var(--form-accent);}
.formWrap input[type="radio"]:checked { background: radial-gradient(var(--form-accent) 0 40%, #fff 45%); border-color: var(--form-accent);}
.formWrap input[type="checkbox"]:focus-visible,
.formWrap input[type="radio"]:focus-visible { outline: 2px solid var(--form-accent); outline-offset: 2px;}
@media only screen and (max-width: 639px) {
  .formWrap input.input_m,
  .formWrap select.input_m { width: 95%;}
  .formWrap input.input_s,
  .formWrap select.input_s { width: 50%;}
  .formWrap input.input_xs,
  .formWrap select.input_xs { width: 30%;}
}


/* ボタン
-------------------------------------------------- */
.formWrap button,
.formWrap input[type="submit"],
.formWrap input[type="button"]:not(.file-del-button),
.formWrap input[type="reset"] { display: inline-block; min-width: 200px; padding: 0.75em 1.5em; font-size: var(--form-font-size); color: #111; line-height: 1.5; letter-spacing: 0.1em; text-decoration: none; background: #fff; border: 1px solid var(--form-border); border-radius: var(--form-radius); cursor: pointer; transition: opacity 0.2s;}
.formWrap button:hover,
.formWrap input[type="submit"]:hover,
.formWrap input[type="button"]:not(.file-del-button):hover,
.formWrap input[type="reset"]:hover { opacity: 0.8;}
.formWrap input[type="submit"],
.formWrap input[type="button"].btn-primary { color: #fff; background-color: var(--form-button); border-color: var(--form-button);}
.formWrap input[type="button"].btn-secondary { color: var(--form-button); border-color: var(--form-button);}
.formWrap button:focus-visible,
.formWrap input[type="submit"]:focus-visible,
.formWrap input[type="button"]:focus-visible,
.formWrap input[type="reset"]:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-accent) 40%, transparent);}
@media only screen and (max-width: 639px) {
  .formWrap button,
  .formWrap input[type="submit"],
  .formWrap input[type="button"]:not(.file-del-button),
  .formWrap input[type="reset"] { min-width: 0; padding: 0.75em 1em;}
}


/* エラー
-------------------------------------------------- */
.formWrap .errMsgMain { margin-bottom: 30px; padding: 16px 20px; color: var(--form-error); background-color: color-mix(in srgb, var(--form-error) 6%, #fff); border: 1px solid color-mix(in srgb, var(--form-error) 35%, #fff);}
.formWrap .errtxt-main-wrap p { margin: 0; text-align: center;}
@media only screen and (max-width: 639px) {
  .formWrap .errMsgMain { margin: 0 auto 20px; padding: 5px 10px; font-size: 0.875rem;}
  .formWrap .errtxt-main-wrap p { text-align: left;}
}
.formWrap .errtxt { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 0; font-size: clamp(0.75rem, 0.82vw, 0.875rem); color: var(--form-error); line-height: 1.6;}
.formWrap .errtxt::before { content: ""; flex: none; width: 1.2em; height: 1.2em; margin-top: 0.2em; background-color: var(--form-error); mask: var(--form-icon-alert) no-repeat center / contain;}
.formWrap input.error:not([type="checkbox"]):not([type="radio"]):not([type="date"]),
.formWrap textarea.error { padding-right: 2.5em; background: var(--form-input-bg) var(--form-icon-cross) no-repeat right 0.875em center / 0.875em 0.875em; border-color: var(--form-error);}
.formWrap textarea.error { background-position: right 0.875em top 0.875em;}
/* 桁数に合わせた幅の欄は狭いので、エラーのときも ✕ を出さず、枠の色で示す */
.formWrap input.error:not([type="checkbox"]):not([type="radio"]):not([type="date"])[maxlength="2"],
.formWrap input.error:not([type="checkbox"]):not([type="radio"]):not([type="date"])[maxlength="4"],
.formWrap input.error:not([type="checkbox"]):not([type="radio"]):not([type="date"])[maxlength="8"] { padding-right: 0.75em; background-image: none;}
.formWrap select.error,
.formWrap input[type="date"].error,
.formWrap input[type="checkbox"].error,
.formWrap input[type="radio"].error { border-color: var(--form-error);}
.formWrap input.error:not([type="checkbox"]):not([type="radio"]):focus,
.formWrap select.error:focus,
.formWrap textarea.error:focus { border-color: var(--form-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-error) 25%, transparent);}
/* ブラウザでの入力チェックが出し入れする上部のまとめ。class に display を指定しても hidden のときは隠す */
.formWrap [data-form-error-summary][hidden],
.formWrap [data-form-error-input][hidden] { display: none;}


/* パンくず
-------------------------------------------------- */
.formWrap .progress { overflow: hidden; height: 30px; margin: 20px 0; padding: 0; list-style: none; background-color: var(--form-progress); border-radius: var(--form-radius);}
.formWrap .progress li { display: table-cell; position: relative; list-style: none; background: var(--form-progress);}
.formWrap .progress li.progress-bar.current:last-child::before,
.formWrap .progress li.progress-bar.current:last-child::after { display: none;}
.formWrap .progress li.progress-bar.current::before,
.formWrap .progress li.progress-bar.current::after { content: ""; position: absolute; width: 0; height: 0; margin: auto;}
.formWrap .progress li.progress-bar.current::before { top: -15px; right: -1em; z-index: 10; border-style: solid; border-color: transparent transparent transparent #fff; border-width: 30px 0 30px 1em;}
.formWrap .progress li.progress-bar.current::after { top: -15px; right: -0.8em; z-index: 10; border-style: solid; border-color: transparent transparent transparent var(--form-accent); border-width: 30px 0 30px 1em;}
.formWrap .progress-bar { float: left; width: 0; height: 100%; color: #fff; line-height: 30px; text-align: center; background-color: var(--form-progress); transition: width 0.6s ease;}
.formWrap .progress-bar.current { width: 40%; background-color: var(--form-accent);}
.formWrap .progress-bar.no-current1,
.formWrap .progress-bar.no-current2 { width: 30%; background-color: var(--form-progress);}
@media only screen and (max-width: 639px) {
  .formWrap .progress-bar { font-size: 0.875rem;}
}


/* プライバシーポリシー
-------------------------------------------------- */
.formWrap .privacy_policy { width: 100%; margin: 30px auto 30px auto; font-size: calc(var(--form-font-size) * 0.9);}
.formWrap .privacy_policy h3 { margin: 0 auto 10px auto; font-size: 1.125rem;}
.formWrap .acceptance { overflow-y: scroll; height: 200px; margin-top: 5px; padding: 10px; text-align: left; background-color: var(--form-policy-bg); border: 1px solid #e5e5e5; scrollbar-width: thin; scrollbar-color: var(--form-policy-scrollbar) #fff;}
.formWrap .acceptance::-webkit-scrollbar { width: 8px;}
.formWrap .acceptance::-webkit-scrollbar-track { background: #fff;}
.formWrap .acceptance::-webkit-scrollbar-thumb { background: var(--form-policy-scrollbar); border-radius: 4px;}
/* 下端をぼかして続きがあることを示す */
.formWrap .acceptance::after { content: ""; display: block; position: sticky; bottom: -10px; height: 40px; margin: -40px -10px -10px; background: linear-gradient(transparent, var(--form-policy-bg)); pointer-events: none;}
.formWrap .acceptance ol { margin: 0; padding: 0; font-weight: normal; list-style: none;}
.formWrap .acceptance li { font-weight: normal;}
.formWrap .acceptance h4 { margin-top: 18px; margin-bottom: 4px; font-weight: normal;}
.formWrap .acceptance .contact { margin-bottom: 40px; text-align: right;}


/* 添付ファイル
-------------------------------------------------- */
.formWrap .img-view-area,
.formWrap .file-view-area { padding: 10px 0 10px 0;}
.formWrap .img-view-area p,
.formWrap .file-view-area p { margin-bottom: 5px;}
.formWrap .img-view-area img { font-size: 1px; vertical-align: top;}
.formWrap .img-view-area p img { max-width: 300px; height: auto;}
.formWrap .img-view-area input.file-del-button,
.formWrap .file-view-area input.file-del-button { display: inline-block; width: auto; margin: 0; padding: 0.4em 1.2em 0.4em 1.2em; font-size: 0.625rem; color: #fff; line-height: 1; text-decoration: none; background: #d3250e; border: none; border-radius: 3px; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,0.2);}
.formWrap .file-view-area span a { margin-left: 25px;}
.formWrap .file-view-area span.file-img,
.formWrap .file-view-area span.file-doc,
.formWrap .file-view-area span.file-xls,
.formWrap .file-view-area span.file-pdf,
.formWrap .file-view-area span.file-other { display: inline-block; height: 20px; padding-top: 3px; background: no-repeat top left;}
.formWrap .file-view-area span.file-img { background-image: url(../images/file-img.png);}
.formWrap .file-view-area span.file-doc { background-image: url(../images/file-doc.png);}
.formWrap .file-view-area span.file-xls { background-image: url(../images/file-xls.png);}
.formWrap .file-view-area span.file-pdf { background-image: url(../images/file-pdf.png);}
.formWrap .file-view-area span.file-other { background-image: url(../images/file-other.png);}