.p-form {
 from {
  display: grid;
  gap: 2.5rem;
 }
}

/* STEPナビ */
.step-nav__title {
 color: #6C6967;
 font-size: calc(15 * var(--torem));
}

.step-nav__text {
 color: #6C6967;
 font-size: calc(10 * var(--torem));

 em {
  font-size: calc(14 * var(--torem));
 }
}

.step-nav {
 padding-block: clamp(0.938rem, 0.772rem + 0.71vw, 1.25rem);
 background: linear-gradient(90deg, #F6F1E8 0%, #F0EBE2 100%);
 border-bottom: 1px solid #E5E2DC;
 border-top: 1px solid #E5E2DC;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: clamp(0.625rem, 0.493rem + 0.57vw, 0.875rem);
}



.step-nav span {
 width: 32px;
 height: 32px;
 border-radius: 50%;
 background: #DCCAB9;
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: bold;
}

.step-nav span.active {
 background: #ff7a00;

}

/* 質問 */
.form-item__question {
 display: grid;
 gap: .5rem;
 color: var(--c-brown);
 font-weight: var(--font-weight-bold);
}

.form-item__question .--badge {
 border-radius: 1.5rem;
 padding: calc(4 * var(--torem)) calc(14 * var(--torem)) calc(5 * var(--torem));
 background-color: var(--c-white);
 width: fit-content;
 line-height: var(--line-height-100);
 color: var(--c-orange);
 border: solid 1px var(--c-orange);
}

.question {
 opacity: 0;
 transform: translateY(20px);
 transition: all .4s ease;
 margin-bottom: 30px;
 display: none;
}

.form-item__input {
 margin-block-start: 1.25rem;
 position: relative;
 border-radius: .5rem;
 border: solid 1px #DCCAB9;
 padding: 30px;
 background-color: var(--c-white);

 &:before {
  right: 2rem;
  top: calc(-86 * var(--torem));
  content: "";
  width: calc(76 * var(--torem));
  height: calc(86 * var(--torem));
  background: url(../img/women_icon.png) center /contain no-repeat;
  position: absolute;

  @media (max-width: 680px) {
   right: calc(-10 * var(--torem));
   top: calc(-62 * var(--torem));
   content: "";
   width: calc(54 * var(--torem));
   height: calc(62 * var(--torem));
  }
 }
}

.question.show {
 display: block;
}

.question.visible {
 opacity: 1;
 transform: translateY(0);
}

input {
 width: 100%;
 font-size: 16px;
}

button.option {
 display: block;
 width: 100%;
 padding: 12px;
 margin-top: 10px;
}

.form-item__input {
 background-color: var(--c-white);

 &.--set {
  display: grid;
  gap: calc(12 * var(--torem));
 }
}


/* radio */
.form-item__input ul {
 list-style: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 gap: calc(12 * var(--torem));
}

.form-item__input li label {
 display: flex;
 align-items: center;
 gap: 14px;
}

.form-item__input li label:hover {
 border-color: #f07020;
 box-shadow: 0 0 0 3px rgba(240, 112, 32, 0.08);
}

/* Hide native radio */
.form-item__input input[type="radio"] {
 appearance: none;
 -webkit-appearance: none;
 width: 22px !important;
 height: 22px !important;
 border: 2px solid #ccc;
 border-radius: 50%;
 flex-shrink: 0;
 position: relative;
 transition: border-color 0.2s;
 cursor: pointer;
}

.form-item__input input[type="radio"]:checked {
 border-color: #f07020;
 border-width: 2px;
}

.form-item__input input[type="radio"]:checked::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 12px;
 height: 12px;
 background: #f07020;
 border-radius: 50%;
}

.form-item__input li label,
.input-field {
 width: 100%;
 background: #fff;
 border: 1.5px solid #ddd;
 border-radius: 10px;
 padding: 18px 20px;
 cursor: pointer;
 font-weight: 500;
 transition: border-color 0.2s, box-shadow 0.2s;
}

.form-item__input li:has(input:checked) label,
.input-field:hover,
.input-field:focus {
 border-color: #f07020;
 box-shadow: 0 0 0 3px rgba(240, 112, 32, 0.1);
 outline: none;
}

.form-item__memo {
 font-feature-settings: "palt";
 font-weight: var(--font-weight-medium);
 transform: translateY(-5px);
 color: #727170;
 font-size: var(--font-size-xs);
}

/* privacy */
.privacy {
 margin-block-start: 1.5rem;
}

.privacy-text {
 text-align: center;
 color: #727170;
 font-weight: var(--font-weight-medium);
 line-height: var(--line-height-140);
 font-size: var(--font-size-xs);

 a {
  text-decoration: underline;
  transition: color var(--duration-fast);

  &:hover,
  &:focus-visible {
   color: var(--c-orange);
  }
 }
}

.agree-area {
 margin-block-start: 1.8rem;
 display: flex;
 align-items: center;
 gap: calc(10 * var(--torem));
 justify-content: center;
}

.agree-area input[type="checkbox"] {
 display: none;
}

.agree-area label {
 display: flex;
 align-items: center;
 gap: calc(2 * var(--torem));
 cursor: pointer;
 font-size: calc(13 * var(--torem));
 color: #666;
}

/* カスタムチェックボックス */
.agree-area label::before {
 content: '';
 flex-shrink: 0;
 width: calc(20 * var(--torem));
 height: calc(20 * var(--torem));
 border: 2px solid #f07020;
 border-radius: calc(4 * var(--torem));
 background-color: #fff;
 background-repeat: no-repeat;
 background-position: center;
 transition: background-image 0.1s;
}

/* チェック時にSVGチェックマークを表示 */
.agree-area input[type="checkbox"]:checked+label::before {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f07020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}


.form-item-select {
 -webkit-appearance: none;
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 16px center;
 padding-right: 40px;
}

.input-wrap {
 width: 100%;
}

.error-msg {
 display: none;
 color: #e53935;
 font-size: 12px;
 margin-top: 4px;
}

.error-msg.visible {
 display: block;
}

.input-field.is-error {
 border-color: #e53935 !important;
 box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.1);
}

#form_submit_button:disabled {
 background-color: #ccc;
 color: #999;
 cursor: not-allowed;
 pointer-events: none;
 /* 念のため */
}