.form-kind {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 50px 0 0;
  position: relative;
}

.form-kind:before {
  content: "";
  position: absolute;
  left: 10px;
  top: -20px;
  width: 60px;
  height: 108px;
  background: url(../images/common/illust17.png) 0% 0% / 100% no-repeat;
}

.form-kind:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 0px;
  width: 60px;
  height: 98px;
  background: url(../images/common/illust18.png) 0% 0% / 100% no-repeat;
}

.form-kind li {
  width: 444px;
  height: 84px;
  text-align: center;
  background-color: rgba(19,39,75, 0.15);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  font-size: 1.125rem;
}

.form-kind li p {
  padding: 18px 0;
}

.form-kind li span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.7;
}

.form-kind li a {
  display: block;
  width: 100%;
  height: 100%;
}

.form-kind li:hover ,
.form-kind li.active {
  color: #fff;
  background-color: var(--color_blue_bg);
}

.form-kind li:hover a {
  opacity: 1;
}

.form-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.form-radio > * {
  min-width: 180px;
}

.layout_form .list {
  width: 100%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  display: flex;
  gap: 0.75rem 1.25rem;
  background-image: linear-gradient(to right, rgba(19, 39, 75, 0.3) 5px, transparent 5px, transparent 15px); /* 点線5px、余白10px */
  background-size: 12px 1px; /* パターン全体の幅15px、線の太さ2px */
  background-repeat: repeat-x;
  background-position: left bottom;
}

.layout_form .list > .list-pb-none {
  background-image: none;
  padding-bottom: 0;
}

.layout_form .list .label_area {
    width: 12.5rem;
    font-weight: 400;
    padding-top: 0.625em;
    flex-shrink: 0;
}

.layout_form .list .label_area label {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5em;
}

.layout_form .list .label_area label::after {
  content: "任意";
  font-size: 0.8125rem;
  color: #ccc;
  border-radius: 4px;
  padding: 0.25em 0.7em;
  padding-right: 0;
  display: block;
}
 
.layout_form .list:has(.required) .label_area label::after, 
.layout_form .list:has(.wpcf7-radio) .label_area label::after, 
.layout_form .list:has(.wpcf7-validates-as-required) .label_area label::after, 
.layout_form .list:has([required]) .label_area label::after {
  content: "※必須";
  color: #ff5e68;
}

.wpcf7-spinner {
  display: none!important;
}

.file_box + p {
  display: block;
}

.file_box {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file_btn {
  background-color: #13274b;
  color: white;
  border: none;
  padding: 13px 22px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}

.file_btn:hover {
  background-color: #0056b3;
}

.file_label {
  font-size: 14px;
  color: #969696;
  width: 288px;
  border-radius: 4px;
  background-color: #f0f3f8;
  padding: 13px 20px 12px;
  box-sizing: border-box;
}

.sender-date {
  font-size: 14px;
  color: #969696;
  width: 400px;
  border-radius: 4px;
  appearance: none;
  // background: url(../images/common/ico-cal.svg) no-repeat 95% 50%;
  // background-size: 19px auto;
  background-color: #f0f3f8;
  border: none;
  padding: 14px 20px 13px;
  box-sizing: border-box;
}

.btn_grid {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 10px;
}

.formTable {
  width: 100%;
  max-width: 660px;
  margin: 0 auto;
}
.formTable th {
  width: 200px;
  padding: 10px 0;
}

.formTable td {
  padding: 10px 0;
  margin-left: auto;
  width: calc(100% - 220px);
}

fieldset, legend {
    display: contents;
}

.layout_form .list dd {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.layout_form .label_wrap {
    display: flex;
}

.layout_form .label_wrap label + label {
    margin-left: 20px;
}

label:has(input[type=checkbox], input[type=radio]) {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 500;
}
label input[type=checkbox],
label input[type=radio] {
  flex-shrink: 0;
}

input[type=checkbox] {
  position: relative;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color_border);
  background-color: #fff;
  width: 1.5em;
  aspect-ratio: 1/1;
  border-radius: 5px;
  cursor: pointer;
}
input[type=checkbox]::after {
  display: block;
  position: absolute;
  content: "";
  width: 60%;
  height: 40%;
  border-bottom: 3px solid;
  border-left: 3px solid;
  transform: rotate(-45deg);
  top: 22%;
  left: 20%;
  display: none;
  border-color: #333333;
}
input[type=checkbox]:checked::after {
  display: block;
}

input[type=radio] {
  position: relative;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color_border);
  background-color: #fff;
  width: 1.5em;
  aspect-ratio: 1/1;
  border-radius: 100px;
  cursor: pointer;
}
input[type=radio]::after {
  display: block;
  position: absolute;
  content: "";
  width: 62%;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  background-color: #333333;
  border-radius: 100px;
  z-index: 1;
}
input[type=radio]:checked::after {
  display: block;
}

select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 5px;
  padding: 0.929em 1.5rem 0.929em 0.625rem;
  font: inherit;
  line-height: 1;
  font-weight: 500;
  background: right 0.5em center/0.75em auto url("../img/common/icon_arrow-under-blue.svg") no-repeat #fff;
}
select:focus {
  border: none;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=number],
input[type=url] {
  width: 100%;
  border: 1px solid var(--color_border);
  background-color: #f0f3f8;
  border-radius: 5px;
  padding: 0.625rem 1em;
  font: inherit;
  line-height: 1;
  font-weight: 500;
  font-size: 0.875rem;
  border: none;
  box-sizing: border-box;
}
input[type=text]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=url]::-moz-placeholder {
  color: rgba(150, 150, 150, 1);
}
input[type=text]::placeholder,
input[type=tel]::placeholder,
input[type=email]::placeholder,
input[type=number]::placeholder,
input[type=url]::placeholder {
  color: rgba(150, 150, 150, 1);
}
input[type=text].short,
input[type=tel].short,
input[type=email].short,
input[type=number].short,
input[type=url].short {
  width: 8em;
  max-width: 8em;
}
@media screen and (max-width: 959px) {
  input[type=text].short,
input[type=tel].short,
input[type=email].short,
input[type=number].short,
input[type=url].short {
    width: 6em;
    max-width: 6em;
  }
}

input[type=number] {
  padding: 0.5rem 1em;
}

textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--color_border);
  background-color: #fff;
  border-radius: 5px;
  padding: 0.625rem 1em;
  font: inherit;
  line-height: 1.75;
  font-size: 0.875rem;
  border: none;
  font-weight: 400;
  background-color: #f0f3f8;
  box-sizing: border-box;
}
textarea::-moz-placeholder {
  color: rgba(150, 150, 150, 1);
}
textarea::placeholder {
  color: rgba(150, 150, 150, 1);
}

.layout_privacypolicy {
  margin-top: 2.5rem;
  background-color: #f0f3f8;
  border-radius: 4px;
  padding: 3.125rem;
  overflow: auto;
  height: 530px;
}

.layout_privacypolicy .title {
  text-align: center;
  margin-bottom: 25px;
}

.layout_privacypolicy .title span {
  display: inline-block;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color_border_blue);
  padding-left: 80px;
  padding-right: 80px;
  font-size: 1.125rem;
}

.layout_privacypolicy .text {
  line-height: 1.8;
}

.layout_form .row_submit {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem 2.5rem;
}

.layout_form .row_submit > * {
    flex: 1;
}

.btn_reset {
  background-color: var(--color_blue_bg);
  border: 2px solid #fff;
  color: #fff;
  border-radius: 100px;
  font-weight: 700;
  max-width: 220px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn_clear {
  background-color: #EBEBEB;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  max-width: 440px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}

.btn_clear {
    transition: background-color 0.5s;
}

.btn_clear:hover {
    background-color: var(--color_border);
}

.btn_submit {
  background: url(../images/common/ico-arw-white.svg) no-repeat 95% 50%;
  background-size: 16px;
  background-color: var(--color_blue_bg);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  max-width: 350px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 100px;
  cursor: pointer;
}

.btn_submit {
  transition: background-color 0.5s;
}

.btn_submit:hover {
  background-color: var(--color_blue_hover);
}

.layout_privacycheck {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.5rem auto;
}

.btn_submit.c-reset {
  background-color: #ccc;
  color: #555;
}

.error_messe {
  color: red;
  margin-bottom: 12px;
}
.layout_form .step_confirm, .layout_form .step_thanks {
  display: none;
}

.layout_form .btn_submit[disabled] {
  cursor: not-allowed;
  pointer-events: none;
}

@media screen and (min-width: 769px) {
  .layout_form .btn_submit {
    transition: background-color 0.5s, color 0.5s;
  }
 }

.layout_form .btn_submit.btn_back, 
.layout_form .btn_submit[disabled] {
  background-color: #ccc;
}
@media screen and (max-width: 959px) {
  .layout_form {
    width: 92.5%;
    margin: 0 auto;
    font-size: 0.875rem;
  }
  .layout_form .title_list {
    font-size: 1rem;
    margin-bottom: 0.75rem;
  }
  .layout_form .list {
    flex-direction: column;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .layout_form .list .label_area {
    width: 100%;
  }
  .layout_form .list > li .label_area label::after {
    margin-top: -0.25em;
  }
  .layout_form .list .label_area {
    padding-top: 0;
  }
  .layout_form .row_input textarea {
    flex: 0 1 auto;
  }
  .layout_form  {
    gap: 0.625rem 2.5rem;
  }
  .sub-page .layout_form {
    padding: 20px;
  }
  .layout_privacycheck {
    margin: 1.5rem 0px;
  }
  .layout_form  label,
  .layout_form  label {
    max-width: none;
    min-width: 6em;
  }
  .layout_form .label_wrap  {
    display: flex;
  }
  .layout_form .row_submit {
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
  }
  .layout_form .row_submit > * {
    flex: 0 1 auto;
    max-width: 240px;
  }
  .btn_clear,
  .btn_submit {
    font-size: 1rem;
    height: 56px;
  }
  .form-kind {
    flex-wrap: wrap;
    gap: 0px;
  }
  .form-kind li {
    height: auto;
    width: 100%;
    border-radius: 0;
  }
  .form-kind li p {
    font-size: 1rem;
  }
  .file_label {
    width: 200px;
    padding: 10px;
    font-size: 12px;
  }
  .file_btn {
    padding: 10px 10px 10px;
    font-size: 12px;
  }
  .layout_privacypolicy {
    padding: 20px;
  }
  .formTable th {
    width: 120px;
    padding: 10px 0;
  }

  .formTable td {
    padding: 10px 0;
    margin-left: auto;
    width: calc(100% - 140px);
  }

  .form-kind:before {
    content: "";
    position: absolute;
    left: -14px;
    top: -40px;
    width: 40px;
    height: 88px;
    background: url(../images/common/illust17.png) 0% 0% / 100% no-repeat;
  }

  .form-kind:after {
    content: "";
    position: absolute;
    right: -20px;
    top: 20px;
    width: 47px;
    height: 68px;
    background: url(../images/common/illust18.png) 0% 0% / 100% no-repeat;
  }
}