.d-none {
    display: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
    width: 100%;
    max-width: 100%;
    padding: 0.3rem;
    border: #9BDBE5 1px solid !important;
    font-size: 1em;
    background-color: transparent !important;
    height: 50px;
}

select {
    max-width: 200px;
}

textarea {
    max-width: 100%;
    min-height: 10rem;
    width: 100%;
    padding: 0.3rem;
    border: #9BDBE5 1px solid !important;
    background-color: transparent !important;
    font-size: 1em;
}

ul,
li {
    list-style: none;
}

li.col-auto {
    display: inline-block;
}

.error li,
.error_text {
    color: rgb(200, 0, 0);
    background-color: #ffffbe;
}

[id^="item_birth"] {
    display: inline-block;
    width: calc(100% / 3.1);
}

#item_time li.col-auto::after {
    content: ",";
}

#item_time li.col-auto:nth-last-of-type(1)::after {
    content: "";
}

.container {
    max-width: 800px;
    margin: 0 auto;
}


.container_input__txt {
    font-size: 18px;
    line-height: 1.6666;
    font-weight: 500;
    margin-top: 11px;
}

.container_input__line {
    text-align: center;
    margin-top: 42px;
}

.container_input__line a {
    display: block;
    padding: 27px 62px;
    background-color: #06C755;
    color: #fff;
    width: fit-content;
    transition: all 0.3s ease;
    margin: 11px auto 0;
    font-weight: 900;
    border-radius: 11px;
}

.container_input__line a:hover {
    opacity: 0.8;
}

.h-adr {
    margin-top: 46px;
}

.required {
    color: #005EBC;
    font-weight: 500;
    font-size: 16px;
    margin-left: 12px;
    display: inline-block;
}

.row {
    margin-bottom: 20px;
}

.col-3 {
    margin-bottom: 8px;
}

.justify-content-evenly {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* ==============================
   radioだけ統一（.form-check構造内の[type="radio"]のみ）
   ============================== */

.form-check{
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-check .form-check-input[type="radio"]{
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid #9BDBE5;
  border-radius: 50%;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  cursor: pointer;
}

.form-check .form-check-input[type="radio"]::before{
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9BDBE5;
  transform: scale(0);
  transition: transform 0.15s ease;
}

.form-check .form-check-input[type="radio"]:checked::before{
  transform: scale(1);
}

.form-check .form-check-label{
  cursor: pointer;
  line-height: 1;
}

.form-check .form-check-input[type="radio"]:focus-visible{
  outline: 2px solid rgba(155, 219, 229, 0.5);
  outline-offset: 3px;
}

.form-check .form-check-input[type="radio"]:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.form-check .form-check-input[type="radio"]:disabled + .form-check-label{
  cursor: not-allowed;
}
.form-check .form-check-input[type="radio"]::before{
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(.2, 1.4, .4, 1);
}
.form-check .form-check-input[type="radio"]{
  transition: transform 0.08s ease;
}
.form-check .form-check-input[type="radio"]:active{
  transform: scale(0.96);
}
.p-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: 70px;
}
.p-3 .row {
    display: flex;
    gap: 40px;
}
.btn-lg {
    width: 200px;
    margin: auto;
    display: block;
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 500;
    background-color:#005EBC;
    border-radius: 250px;
    color: #fff;
}

/* 追記：ホバー/フォーカス/押下の“控えめモダン” */
.btn-lg{
  transition: all 0.1s ease !important;
  will-change: transform;
}

.btn-lg:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.btn-lg:active{
  filter: brightness(0.98);
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
}

/* キーボード操作の視認性（やりすぎない） */
.btn-lg:focus-visible{
  outline: 2px solid rgba(0, 94, 188, 0.35);
  outline-offset: 3px;
}

/* 無効時 */
.btn-lg:disabled,
.btn-lg[aria-disabled="true"]{
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}


/* ==============================
  確認画面（step=check）だけ整える
  ※ form 内に <input name="step" value="check"> がある場合のみ適用
============================== */

#content form:has(input[name="step"][value="check"]){
  background: #fff;
  border: 1px solid rgba(155, 219, 229, 0.6);
  border-radius: 12px;
  padding: 18px 18px 6px;
  margin-top: 40px;
}

#content form:has(input[name="step"][value="check"]) .row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(155, 219, 229, 0.35);
}

#content form:has(input[name="step"][value="check"]) .row:last-of-type{
  border-bottom: none;
}

#content form:has(input[name="step"][value="check"]) .col-3{
  width: 180px;
  margin-bottom: 0;
}

#content form:has(input[name="step"][value="check"]) .col-3 label{
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0b2a3a;
  text-align: left;
}

#content form:has(input[name="step"][value="check"]) .col-9{
  flex: 1;
  min-width: 0;
}

#content form:has(input[name="step"][value="check"]) .col-9 p{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #0b2a3a;
  word-break: break-word;
}

/* 年/月/日などの単位表示を少し整える */
#content form:has(input[name="step"][value="check"]) .input-group-text{
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  color: rgba(11, 42, 58, 0.6);
}

/* 生年月日の2行目/3行目（ラベル空）を“同じ項目の続き”っぽく見せる */
#content form:has(input[name="step"][value="check"]) #item_birthMonth .col-3,
#content form:has(input[name="step"][value="check"]) #item_birthDay .col-3{
  visibility: hidden;
}

/* 自己PRなど長文は少し余白 */
#content form:has(input[name="step"][value="check"]) #item_self_pr .col-9 p,
#content form:has(input[name="step"][value="check"]) #item_other .col-9 p{
  white-space: pre-wrap;
}

/* ボタンエリア：確認カードと間隔を合わせる */
#content form:has(input[name="step"][value="check"]) .p-3{
  margin-top: 20px;
}

/* スマホ：2カラムを縦積みにして読みやすく */
@media (max-width: 640px){
  #content form:has(input[name="step"][value="check"]){
    padding: 14px 14px 6px;
  }

  #content form:has(input[name="step"][value="check"]) .row{
    flex-direction: column;
    gap: 6px;
    padding: 12px 0;
  }

  #content form:has(input[name="step"][value="check"]) .col-3{
    width: 100%;
  }

  #content form:has(input[name="step"][value="check"]) #item_birthMonth .col-3,
  #content form:has(input[name="step"][value="check"]) #item_birthDay .col-3{
    display: none;
  }
}


/* ==============================
  完了ページ（本文だけ）
============================== */

.complete{
  max-width: 720px;
  margin: 24px auto 0;
}

.complete__lead{
  font-size: 18px;
  font-weight: 700;
  color: #0b2a3a;
  text-align: center;
  margin: 18px 0 14px;
}

.complete__box{
  border: 1px solid rgba(155, 219, 229, 0.8);
  border-radius: 12px;
  padding: 18px 16px;
  background: rgba(155, 219, 229, 0.08);
}

.complete__text{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #0b2a3a;
}

.complete__notes{
  margin: 14px 0 0;
  padding: 0;
}

.complete__notes li{
  margin-top: 10px;
  padding-left: 14px;
  position: relative;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(11, 42, 58, 0.75);
}

.complete__notes li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9BDBE5;
}

.complete__actions{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* スマホ */
@media (max-width: 640px){
  .complete{
    margin-top: 18px;
  }

  .complete__lead{
    font-size: 17px;
    margin: 14px 0 12px;
  }

  .complete__box{
    padding: 16px 14px;
  }
}