/* join 入力フォームページのタイトルを非表示 */
.page-id-17 .entry-title,
.page-id-17 .page-title {
  display: none;
}

/* === フォーム全体 === */
.join-form-wrapper {
    max-width: 640px;
    margin: 5px auto;
    padding: 24px 16px;
}

.join-form {
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 16px 20px;
}

.join-form-title {
    margin-bottom: 5px;
}

/* === 1行 = ラベル列 + 入力列 === */
.join-form .form-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr); /* 左:ラベル 右:入力 */
    column-gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

/* ラベル側 */
.join-form .form-label {
    white-space: nowrap;
}

/* 入力側 */
.join-form .form-field {
    width: 100%;
}

.join-form .form-field input,
.join-form .form-field select {
    width: 100%;
    max-width: 260px;
    padding: 4px 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.join-form .form-field textarea {
    width: 100%;
    /* max-width: 260px; */
    padding: 4px 8px;
    font-size: 16px;
    box-sizing: border-box;
}

/* 生年月日だけ特殊 */
.join-form .form-field--birthday {
    display: flex;
    align-items: center;
    gap: 4px;
}

.join-form .birthday-year,
.join-form .birthday-month,
.join-form .birthday-day {
    width: 50px;
}

.join-form .birthday-separator {
    font-size: 16px;
}

/* ボタン */
.join-form .form-actions {
    margin-top: 20px;
    text-align: center;
}

.join-form .btn-submit {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 9999px;
    border: none;
    background: #333;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

/*####### 登録の流れスタイル #####*/
#registration-guide-02 {
    width: 100%;
    margin: 10px auto 10px auto;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #ccc; /* 左の縦線 */
  padding-left: 30px;
}
.timeline li {
  position: relative;
  margin-bottom: 25px;
}
.timeline li::before {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  background: #772a2e; /* ← 塗りつぶしの色 */
  border-radius: 50%;
  position: absolute;
  left: -37px; /* 縦線に重ねる */
  top: 6px;
}
.timeline .year {
  font-weight: bold;
  width: 30px; /* 年の幅（調整可） */
  float: left;
}
.timeline .content {
  margin-left: 30px; /* 年の幅＋余白 */
}

/* スマホ時のレイアウト変更 */
@media (max-width: 768px) {

  /* ラベル＋入力を縦並びにする */
  .join-form .form-row {
      display: block;              /* grid → block に上書き */
      margin-bottom: 20px;
  }

  .join-form .form-label {
      display: block;
      margin-bottom: 6px;          /* ラベルの下に余白 */
  }

  /* 入力欄をちょっと右に寄せる */
  .join-form .form-field {
      margin-left: 12px;           /* ← インデント量、お好みで調整 */
  }

  /* 生年月日も同じだけ右に寄せて、横並びは維持 */
  .join-form .form-field--birthday {
      margin-left: 12px;
      display: flex;
      align-items: center;
      gap: 4px;
  }

  /* スマホでは幅を広めにしてあげる */
  .join-form .form-field input,
  .join-form .form-field select {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
  }
}