// ===========================================
// form
// ===========================================
/* dl table
--------------------------------- */
.form-panel-01 {
  background: #f4f4f4;
  padding: 20px;
  padding-bottom: 60px;
  @include mq-up('s') {
    padding: 50px;
    padding-bottom: 100px;
  }
}

.form-table-01 {
  dt {
    @include font(18);
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 1em;
    margin-bottom: 1em;
    .sub {
      @include font(15);
    }
  }
  dd {
    + dt {
      margin-top: 3em;
    }
  }
  // 必須項目のとき
  .required {
    &:after {
      content: '必須';
      @include font(11);
      background: map-get($colors, danger);
      color: #fff;
      padding: 0.5em 1em;
      margin-left: 1.8em;
    }
  }
}

.form-table-02 {
  @include mq-up() {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: max-content 1fr;
  }
  dd {
    + dt {
      @include mq-down() {
        margin-top: 1em;
      }
    }
  }
  dt {
    align-self: center;
  }
}

// required icon 本文中の必須項目アイコン
.form-icon-required {
  display: inline-block;
  @include font(11);
  background: map-get($colors, danger);
  color: #fff;
  padding: 0.2em 0.8em;
  margin-right: 1em;
}

:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) {
  display: inline-block;
  margin-left: -1.5em;
  margin-top: -0.3em;
  .wpcf7-list-item {
    margin-left: 1.5em;
    margin-top: 0.3em;
  }
}

// design of radio box ラジオボックスデザイン変更
input[type='radio'] {
  position: relative;
  vertical-align: middle;
  -webkit-appearance: none;
  border: 0;
  background: #fff;
  background-position: 50% 50%;
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  outline: none;
  margin: 0 5px 0 0;
  &:checked {
    border: 4px solid map-get($colors, main);
    &:after {
      content: '';
      width: 15px;
      height: 15px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: block;
      background-color: map-get($colors, main);
      border-radius: 50%;
    }
  }
  label {
    display: inline-block;
  }
}

// design of checkbox チェックボックスデザイン変更
input[type='checkbox'] {
  margin: 0 5px 0 0;
  width: 30px;
  height: 30px;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  background: #fff;
  vertical-align: middle;
  -webkit-appearance: none;
  display: inline-block;
  outline: none;
  &:checked {
    position: relative;
    &:after {
      content: '';
      display: block;
      width: 20px;
      height: 30px;
      border: 5px solid map-get($colors, main);
      box-sizing: border-box;
      border-top: none;
      border-left: 0;
      transform: rotate(45deg);
      position: absolute;
      top: -10px;
      left: 8px;
    }
  }
  label {
    display: inline-block;
  }
}

.wpcf7-not-valid-tip {
  margin-top: 1em;
}

// 生年月日入力欄
.input-date-01 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  @include font(15);
  @include mq-up() {
    @include font(18);
  }
  input {
    flex: 1;
    max-width: 5.5em;
    text-align: right;
  }
  .year {
    input {
      max-width: 8em;
    }
  }
  .row-wrap {
    display: flex;
    gap: 1em;
  }
  // 年・月・日の横並びギャップ設定
  .row {
    display: flex;
    align-items: center;
    gap: 0.5em;
  }
}