@charset "UTF-8";

/* ----入力フォーム共通---- */

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="number"],
select {
  height: 40px;
  padding-inline: 13px 10px;
  line-height: 40px;
  border: none;
  background: #f8f8fb;
}
textarea {
  padding-inline: 13px 10px;
  resize: none;
  line-height: 1.5;
  border: none;
  background: #f8f8fb;
}

input::placeholder {
  font-size: 12px;
}

input[type="text"].efo-valid,
input[type="tel"].efo-valid,
input[type="email"].efo-valid,
input[type="search"].efo-valid,
input[type="password"].efo-valid,
input[type="url"].efo-valid,
input[type="number"].efo-valid,
select.efo-valid,
textarea.efo-valid {
  background: #f8f8fb;
}

input[type="text"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
select:hover, textarea:hover {
  border-width: 0;
}

input[type="radio"] {
  accent-color: #000;
}

.btn {
  position: relative;
  display: flex;
  margin: auto;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: 0.3s background, 0.3s color;
}

/* ----入力フォームタイトル---- */

.legend {
  margin-block: 60px 15px;
  padding: 0;
  font-size: 20px;
  font-weight: bold;
  border: none;
}
/* ----縦型入力フォーム---- */

.fieldset-vertical .form-group + .form-group {
  margin-top: 30px;
}

.fieldset-vertical .form-label {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 30px;
  background: var(--bgGray);
}

/* ----横型入力フォーム---- */

.fieldset {
  margin-top: 0;
}

.fieldset:first-child {
  margin-top: 20px;
}

.fieldset + .fieldset {
  margin-top: 40px;
}

.fieldset .form-group {
  display: flex;
  width: 100%;
  align-items: center;
  border-top: none;
  border-bottom: var(--border) 1px solid;
}

.fieldset .form-group:first-child {
  border-top: #000 1px solid;
}

.fieldset .form-group:last-child {
  border-color: #000;
}

.fieldset .form-label,
.fieldset .constraint,
.fieldset .form-control {
  display: block;
}

.fieldset .form-label {
  width: 300px;
  padding: 25px 75px 25px 25px;
  text-align: left;
  flex-shrink: 0;
  background: none;
}

.fieldset .form-label label {
  font-weight: normal;
}

.fieldset .constraint {
  margin-left: -65px;
  flex-shrink: 0;
  background: none;
}
.fieldset .constraint:empty {
  display: none;
}

.fieldset .form-control {
  width: 100%;
  padding: 30px 0 30px 20px;
}

/* ----入力支援---- */

.form-error {
  display: block;
  margin-top: 5px;
  color: var(--alert);
  font-size: 14px;
}

.required:after {
  padding: .2em .7em .1em;
  font-size: 12px;
  border-radius: 0;
  background-color: var(--base);
}

.count-msg {
  color: var(--alert);
}

.help-block {
  font-size: 12px;
  color: #000;
}

/* ----入力フォームボタン---- */

.action-buttons {
  display: flex;
  margin-top: 40px;
  align-items: center;
  justify-content: center;
}

.action .btn {
  height: 60px;
  font-size: 16px;
  padding-inline: 20px;
}

.action .btn-default {
  min-width: 180px;
}

.action .btn-primary {
  min-width: 260px;
}

/* ----画面上部メッセージ---- */

.alert {
  width: 100%;
  margin-bottom: 30px;
  padding: 13px 10px 13px 45px;
  color: var(--alert);
  border: none;
  background-image: url(../../img/usr/common/icon_alert.svg);
  background-size: 25px 23px;
  background-color: #FCE0E4;
}

.success {
  padding: 13px 10px;
  color: #000;
  border: none;
  background-image: none;
  background-color: #f2f2f2;
}