@charset "utf-8";

textarea {
  resize: vertical;
}

.hp-field{
  position:absolute;
  left:-9999px;
  opacity:0;
}

@media print,screen and (min-width : 501px) {

/** ERROR */
.error{
  color: #f1545f;
  font-size:1.4rem;
  margin-top: 4px;
}

/** 必須 */
.required{
  color: #ae1815;
}

/** 入力ボックス */
input,textarea,select{
  border:solid 1px #8c8c8c;
  border-radius:5px;
  background-color: #fff;
  padding: 10px;
  font-size:1.6rem;
}

/** ボタン */
.form-buttons{
  margin-top: 20px;
  text-align: center;
}
.form-buttons button{
  border:solid 1px #8c8c8c;
  border-radius:5px;
  background-color: #fafafa;
  padding: 6px;
  font-size:1.6rem;
  cursor: pointer;
  width: 180px;
  margin: 0 20px;
}

/** 入力 */
.form-block,.form-confirm{
  border-top:dotted 1px #8c8c8c;
}
.form-row{
  display:flex;
  align-items: center;
  border-bottom:dotted 1px #8c8c8c;
}
.form-row dt{
  padding: 20px;
  width: 200px;
}
.form-row dd{
  flex: 1;
  padding: 20px;
}

.input-wide{
  width: 100%;
}
.input-medium{
  width: 50%;
}
.input-short{
  width: 30%;
}

.input-select{
  width: 300px;
}
.input-check .checkbox-item{
  display: block;
}
.input-radio .radio-item{
  display: block;
}



/** 確認 */
.confirm-row{
  display:flex;
  align-items: center;
  border-bottom:dotted 1px #8c8c8c;
}
.confirm-row dt{
  padding: 20px;
  width: 200px;
}
.confirm-row dd{
  flex: 1;
  padding: 20px;
}


/** 完了 */
.form-complete{
  width: 1000px;
  margin: 0 auto;
}
.complete{
  text-align: center;
  font-size:2.4rem;
  font-weight: bold;
  align-items: center;
  display: flex;
}
.complete::before,
.complete::after {
  background-color: #c8c8c8;
  content: "";
  flex-grow: 1;
  height: 1px;
}
.complete::before {
  margin-right: 15px;
}
.complete::after {
  margin-left: 15px;
}

.form-message{
  margin-top: 40px;
  text-align: center;
  padding: 0 40px;
}
.form-message p{
  margin: 20px 0;
}
.form-message li{
  background-color: #f4f4f4;
  padding: 10px 40px;
  margin: 10px ;
}
.fm-attention{
  color: #ae1815;
}
.fm-caution{
  color: #ae1815;
  font-size:2.0rem;
  font-weight: bold;
  text-align: center;
}


}
@media screen and (max-width : 500px) {

/** ERROR */
.error{
  color: #f1545f;
  font-size:1.4rem;
  margin-top: 6px;
}

/** 必須 */
.required{
  color: #ae1815;
}

/** 入力ボックス */
input,textarea,select{
  border:solid 1px #8c8c8c;
  border-radius:5px;
  background-color: #fff;
  padding: 6px;
  font-size:1.4rem;
}

/** ボタン */
.form-buttons{
  margin-top: 20px;
  text-align: center;
}
.form-buttons button{
  border:solid 1px #8c8c8c;
  border-radius:5px;
  background-color: #fafafa;
  padding: 6px;
  font-size:1.6rem;
  cursor: pointer;
  width: 120px;
  font-size:1.4rem;
  margin: 0 6px;
}

/** 入力 */
.form-block,.form-confirm{
  border-top:dotted 1px #8c8c8c;
}
.form-row{
  border-bottom:dotted 1px #8c8c8c;
  padding: 10px 10px;
}
.form-row dt{
  font-size:1.6rem;
}
.form-row dd{
  margin-top: 6px;
}

.input-wide{
  width: 100%;
}
.input-medium{
  width: 100%;
}
.input-short{
  width: 100%;
}


/** 確認 */
.confirm-row{
  border-bottom:dotted 1px #8c8c8c;
  padding: 10px;
}
.confirm-row dt{
  font-size:1.4rem;
}
.confirm-row dd{
  font-size:1.4rem;
  margin: 6px 0 0 10px;
}


/** 完了 */
.form-complete{
  margin: 0 auto;
}
.complete{
  text-align: center;
  font-size:2.0rem;
  font-weight: bold;
  align-items: center;
  display: flex;
}
.complete::before,
.complete::after {
  background-color: #c8c8c8;
  content: "";
  flex-grow: 1;
  height: 1px;
}
.complete::before {
  margin-right: 15px;
}
.complete::after {
  margin-left: 15px;
}

.form-message{
  margin-top: 20px;
  text-align: center;
}
.form-message p{
  margin: 20px 0;
}
.form-message li{
  background-color: #f4f4f4;
  padding: 6px;
  margin: 10px ;
}
.fm-attention{
  color: #ae1815;
}
.fm-caution{
  color: #ae1815;
  font-size:1.8rem;
  font-weight: bold;
  text-align: center;
}



}