@charset "utf-8";

form {
  width: 80%;
  max-width: 600px;
  margin: auto;
}

/* エラーメッセージ */
form .error {
  color: red;
}

/* 項目 */
form dl {
  display: table;
  width: 100%;
  text-align: left;
}

form dt, form dd {
  display: table-cell;
  width: 50%;
  height: 40px;
}

form input[type="text"],
form input[type="password"] {
  width: 80%;
}

/* 必須 */
form .required {
  display: inline-block;
  background: red;
  color: white;
  font-size: 10px;
  line-height: 16px;
  border-radius: 5px;
  padding: 0px 5px;
  vertical-align: middle;
}

/* 中見出し */
form h2 {
  text-align: left;
  border-bottom: 1px solid var(--main-color);
}

form h2::before {
  content: "";
  display: inline-block;
  background: var(--main-color);
  width: 10px;
  height: 22px;
  margin-right: 5px;
  position: relative;
  top: 3px;
}

/* 送信ボタン */
form .submit-button {
  display: inline-block;
  background: black;
  color: white;
  padding: 12px;
  border-radius: 5px;
}

/* フェーズ 白黒デザイン */
.phase-box {
  display: flex; /* 横並び */
  margin: 10px auto;
  width: 100%;
  max-width: 640px;
}

.phase-box .phase {
  position: relative;
  background-color: #fff;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  width: 100%;
  height: 49px;
  border: 1px solid black;
}

.phase-box .phase:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  border-top: solid 25px #fff;
  border-bottom: solid 24px #fff;
  border-left: solid 15px black;
}

.phase-box .phase:not(:first-child)::after {
  content: '';
  position: absolute;
  top: 0;
  left: -3.5px;
  border-top: solid 25px transparent;
  border-bottom: solid 25px transparent;
  border-left: solid 15px #fff;
}

.phase-box .current {
  background-color: #333;
  color: #fff;
}

.phase-box .current + .phase:not(:first-child):after {
  border-left: solid 15px #333;
}

.phase-box .phase.current:not(:first-child)::before {
  border-top: solid 25px #333;
  border-bottom: solid 25px #333;
  border-left: solid 15px #fff;
}
/* */

@media (max-width: 720px) {
  form dt, form dd {
    display: block;
    width: 100%;
    margin: 0px;
  }
}