/*--------------------------------------------------

	Form │ 各種フォーム共通

--------------------------------------------------*/
#form_page {overflow: hidden;}
#form_page .title_common {margin-bottom: 10%;}
#form_page .form_intro {margin-bottom: var(--size100);}
#form_page .form_intro .wrap {width: 40%;}
#form_page .form_intro .wrap .content p {color: var(--navy);}
#form_page .form_intro figure {width: 55%;}
#form_page .container {position: relative;padding: var(--size20-100);background: #DFE8F1;}
#form_page .container::before {content: '';position: absolute;top: -3%;left: calc(50% - 50vw);z-index: -1;width: 99.4vw;height: 100vw;background: url(../img/page/form/bg.webp) no-repeat top right / 100%;}
#form_page .container .form_inner {max-width: 1180px;margin: 0 auto;}
#form_page .container ul.form_steps {display: flex;margin-bottom: var(--size50);}
#form_page .container ul.form_steps li {
  flex: 1;
  margin-left: -2%;
  padding: var(--size30) 0;
  background: #fff;
  clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 8% 50%);
  color: #8D9FAA;
  font-weight: 600;
  font-size: var(--font24);
  letter-spacing: .057em;
  text-align: center;
}
#form_page .container ul.form_steps li:first-child {margin-left: 0;clip-path: polygon(0% 0%, 92% 0%, 100% 50%, 92% 100%, 0% 100%, 0% 0%);}
#form_page .container ul.form_steps li.is-active {background: #000;color: #fff;}
#form_page .container p.form_notice {margin-bottom: var(--size50);letter-spacing: .042em;}
#form_page .container p.form_notice a {color: var(--blue);text-decoration: underline;}
#form_page .container p.form_error_notice {margin-bottom: var(--size30);padding: 1em 1.5em;border: 1px solid var(--red);background: #FDEBEB;color: var(--red);font-weight: 600;letter-spacing: .057em;}
/*----- 入力欄 -----*/
#form_page .container table {margin-bottom: var(--size60);}
#form_page .container table tr {display: block;margin-bottom: calc(var(--size20-60) / 2);}
#form_page .container table tr:last-child {margin-bottom: 0;}
#form_page .container table tr th {position: relative;min-width: clamp(250px, calc(250px + 50 * ((100vw - 375px) / 1545)), 300px);padding-top: .5em;color: var(--navy);font-weight: 600;letter-spacing: .057em;vertical-align: top;}
#form_page .container table tr th .required {position: absolute;top: .5em;right: 0;line-height: var(--line-height-base);color: var(--red);}
#form_page .container table tr th .optional {position: absolute;top: .5em;right: 0;line-height: var(--line-height-base);color: #999;font-weight: 500;}
#form_page .container table tr td {width: 100%;}
#form_page .container table tr td input[type="text"],
#form_page .container table tr td input[type="tel"],
#form_page .container table tr td input[type="email"],
#form_page .container table tr td select,
#form_page .container table tr td textarea {width: 100%;padding: calc(var(--size30) / 3) var(--size30) calc(var(--size30) / 3) calc(var(--size30) / 2);border: none;border-radius: 0;background: #fff;font-size: var(--font-base);}
#form_page .container table tr td select {cursor: pointer;color: #000;}
#form_page .container table tr td textarea {min-height: 20em;resize: vertical;}
#form_page .container table tr td input::placeholder,
#form_page .container table tr td textarea::placeholder {color: #A9AFB8;}
#form_page .container table tr td .form_other {margin-top: 15px;}
#form_page .container table tr td .form_group_field select {margin-bottom: 12px;}
#form_page .container table tr td .form_address {display: flex;flex-direction: column;gap: 15px;margin-top: var(--size20);}
#form_page .container table tr td .form_address .form_address_item span {display: block;margin-bottom: 10px;color: var(--navy);letter-spacing: .057em;}
#form_page .container .submit {
  display: block;
  width: 100%;
  max-width: 296px;
  margin: 0 auto;
  padding: 20px 10px;
  border: none;
  border-radius: 0;
  background: #BF1A20;
  color: #fff;
  font-weight: 500;
  font-size: var(--font15);
  letter-spacing: .06em;
  text-align: center;
  transition: .3s;
}
#form_page .container .submit:hover {opacity: .8;}
.error {color: #B70000 !important;}
/*----- 確認画面 -----*/
#form_page.confirm .container table tr {margin-bottom: 0;padding: var(--size30) 0;border-bottom: 1px solid #8D9FAA;}
#form_page.confirm .container table tr:first-child {padding-top: 0;}
#form_page.confirm .container table tr:last-child {padding-bottom: 0;border-bottom: none;}
#form_page.confirm .container table tr th {padding-top: 0;}
#form_page.confirm .container table tr th .required,
#form_page.confirm .container table tr th .optional {display: none;}
#form_page.confirm .container table tr td .form_address {gap: 30px;}
#form_page.confirm .container .confrim_button {display: flex;justify-content: center;gap: var(--size20);max-width: 660px;margin: 0 auto;}
#form_page.confirm .container .confrim_button .submit {max-width: 100%;margin: 0;}
#form_page.confirm .container .confrim_button .submit:nth-child(1) {background: #838A8E;}
/*----- 完了画面 -----*/
#form_page.complete .watermark {z-index: 0;margin-bottom: -2.2%;}
#form_page.complete .container .wrap figure {max-width: 212px;margin: 0 auto var(--size40);}
#form_page.complete .container .wrap h2 {margin-bottom: var(--size30);font-weight: 700;font-size: var(--font29);letter-spacing: .035em;text-align: center;}
#form_page.complete .container .wrap .content {margin-bottom: var(--size80);}
#form_page.complete .container .wrap .content p {margin-bottom: var(--size30);line-height: 2;text-align: center;}
#form_page.complete .container .wrap .content p:last-child {margin-bottom: 0;}
#form_page.complete .container .wrap .download_btn {display: table;margin: 0 auto var(--size50);padding: 20px 50px;background: var(--blue);color: #fff;font-weight: 600;font-size: var(--font15);letter-spacing: .06em;text-align: center;transition: .3s;}
#form_page.complete .container .wrap .download_btn span {margin-right: 12px;vertical-align: middle;}
#form_page.complete .container .wrap .download_btn img {width: 14px;vertical-align: middle;transition: transform .3s ease;}
#form_page.complete .container .wrap .download_btn:hover {opacity: .8;}
#form_page.complete .container .wrap .download_btn:hover img {transform: translateX(6px);}
#form_page.complete .container .wrap ul li {width: 49%;}
#form_page.complete .container .wrap ul li a {display: block;padding: var(--size20) var(--size20) var(--size30);border-radius: 0;background: #fff;letter-spacing: .042em;text-align: center;}
#form_page.complete .container .wrap ul li a span {display: block;margin-bottom: 10px;color: var(--blue);font-weight: 600;font-size: 1.5em;line-height: 1.4;letter-spacing: .06em;text-align: center;}
@media only screen and ( max-width : 1024px ) {
  #form_page .form_intro {flex-direction: column;}
  #form_page .form_intro .wrap {width: 100%;margin-bottom: 20px;}
  #form_page .form_intro figure {width: 100%;}
}
@media only screen and ( max-width : 767px ) {
  #form_page {padding-top: 100px;}
  #form_page .container ul.form_steps {gap: 4px;}
  #form_page .container ul.form_steps li {padding: 1em 8px;font-size: var(--font15);}
  #form_page .container .form_group {flex-direction: column;}
  #form_page .container table tr th {display: block;width: 100%;margin-bottom: 10px;padding: 0;}
  #form_page .container table tr th .required,
  #form_page .container table tr th .optional {position: static;top: auto;right: auto;}
  #form_page .container table tr td {display: block;}
  #form_page.complete .container .wrap ul {flex-direction: column;}
  #form_page.complete .container .wrap ul li {width: 100%;}
}
/*----- 日付ピッカー（MW WP Form / jQuery UI datepicker） -----*/
#ui-datepicker-div.ui-datepicker {z-index: 95 !important;width: 320px;padding: 0;border: none;border-radius: 0;background: #fff;box-shadow: 0 8px 24px rgba(8, 24, 58, .22);color: var(--navy);font-family: var(--font-jp);font-size: 14px;line-height: 1.4;}
#ui-datepicker-div .ui-datepicker-header {position: relative;display: flex;align-items: center;justify-content: center;padding: 14px 44px;border: none;border-radius: 0;background: var(--navy);color: #fff;}
#ui-datepicker-div .ui-datepicker-header::after {display: none;}
#ui-datepicker-div .ui-datepicker-title {display: flex;align-items: center;gap: 4px;margin: 0;color: #fff;font-weight: 600;letter-spacing: .05em;line-height: 1;}
#ui-datepicker-div .ui-datepicker-title select {width: auto;margin: 0;padding: 4px 6px;border: 1px solid rgba(255, 255, 255, .5);border-radius: 0;background: transparent;color: #fff;font-size: 14px;cursor: pointer;}
#ui-datepicker-div .ui-datepicker-title select option {background: #fff;color: #000;}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {position: absolute;top: 0;bottom: 0;width: 44px;height: auto;margin: 0;border: none;background: none;cursor: pointer;transition: background .3s;}
#ui-datepicker-div .ui-datepicker-prev {left: 0;}
#ui-datepicker-div .ui-datepicker-next {right: 0;}
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {background: rgba(255, 255, 255, .15);}
#ui-datepicker-div .ui-datepicker-prev .ui-icon,
#ui-datepicker-div .ui-datepicker-next .ui-icon {display: block;position: absolute;top: 50%;left: 50%;width: 9px;height: 9px;margin: 0;border: solid #fff;border-width: 2px 2px 0 0;background: none;text-indent: -9999px;overflow: hidden;}
#ui-datepicker-div .ui-datepicker-prev .ui-icon {transform: translate(-30%, -50%) rotate(-135deg);}
#ui-datepicker-div .ui-datepicker-next .ui-icon {transform: translate(-70%, -50%) rotate(45deg);}
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
#ui-datepicker-div .ui-datepicker-next.ui-state-disabled {opacity: .3;cursor: default;}
#ui-datepicker-div table.ui-datepicker-calendar {width: calc(100% - 24px);margin: 12px;border-collapse: collapse;table-layout: fixed;}
#ui-datepicker-div .ui-datepicker-calendar thead th {padding: 8px 0;border: none;color: var(--navy);font-weight: 600;font-size: 12px;text-align: center;}
#ui-datepicker-div .ui-datepicker-calendar thead th:first-child {color: var(--red);}
#ui-datepicker-div .ui-datepicker-calendar thead th:last-child {color: #1E50A0;}
#ui-datepicker-div .ui-datepicker-calendar td {padding: 2px;border: none;text-align: center;}
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {display: block;padding: 0;border: 1px solid transparent;border-radius: 0;background: none;color: #000;font-weight: 500;font-size: 14px;line-height: 36px;text-align: center;text-decoration: none;transition: background .2s;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end:first-child a {color: var(--red);}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end:last-child a {color: #1E50A0;}
#ui-datepicker-div .ui-datepicker-calendar td a:hover {background: #DFE8F1;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a {border-color: var(--navy);}
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active {border-color: var(--navy);background: var(--navy);color: #fff;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span {color: #C8CDD3;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month a,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month span {color: #A9AFB8;}
@media only screen and ( max-width : 767px ) {
  #ui-datepicker-div.ui-datepicker {width: min(320px, calc(100vw - 40px));}
}