.wrap {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  /* border:2px #ccc solid;
  height:200px;
  margin:0 0 1em; */
  text-align: center;
}
.between {
  -webkit-box-pack:justify;
  -ms-flex-pack:justify;
  justify-content:space-between;
}
.around {
  -ms-flex-pack:distribute;
  justify-content:space-around;
}
.content {
  padding:1em;
  background-color:#FFCC80;
  margin:0.5em;
}

/* form-nav */
.progressbar {
  display: flex;
  flex-wrap: wrap;
}
.progressbar .item {
    position: relative;
    width: 33%;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    line-height: 1.5;
    background: #F5F5F5;
    color: #999999;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    /* border: 37px solid transparent; */
    border: 23px solid transparent;
    border-left: 20px solid #F5F5F5;
    margin: auto;
}
.progressbar .item:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

@media screen and (max-width: 767px) {
.progressbar .item {
    font-size: 11px;
    line-height: 1.4;
    padding: 10px 0;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    border-width: 25px;
    border-left-width: 12px;
}
}
/* active */
.progressbar .item.active {
    z-index: 1;
    background: #0070BD;
    color: #FFF;
}
.progressbar .item.active:not(:last-child)::after {
    border-left-color: #0070bd;
}
.progressbar .item.active:not(:last-child)::before {
    border-left: none;
}

/* container */
.container_error {
  text-align: center;
  background-color: #ffe4e1;
  color: #cd5c5c;
  font-weight: bold;
  font-size: 16px;
  padding: 8px 12px;
}
.container_complete {
  text-align: center;
  height: 400px;
  padding: 8px 12px;
}
.thanks {
}
.error {
  color: #cd5c5c;
}
.error-form {
  border-color: #fb9a93 !important;
}

/* form */
.Form {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
max-width: 720px;
}
@media screen and (max-width: 480px) {
.Form {
margin-top: 40px;
}
}
.Form-Item {
border-top: 1px solid #ddd;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
display: flex;
align-items: center;
}
@media screen and (max-width: 480px) {
.Form-Item {
padding-left: 14px;
padding-right: 14px;
padding-top: 6px;
padding-bottom: 6px;
flex-wrap: wrap;
}
}
.Form-Item:nth-child(5) {
border-bottom: 1px solid #ddd;
}
.Form-Item-Label {
width: 100%;
max-width: 248px;
letter-spacing: 0.05em;
font-weight: bold;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.Form-Item-Label {
max-width: inherit;
display: flex;
align-items: center;
font-size: 14px;
}
}
.Form-Item-Label.isMsg {
margin-top: 8px;
margin-bottom: auto;
}
@media screen and (max-width: 480px) {
.Form-Item-Label.isMsg {
margin-top: 0;
}
}
.Form-Item-Label-Required {
border-radius: 6px;
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
width: 48px;
display: inline-block;
text-align: center;
/* background: #5bc8ac; */
background: #d9534f;
color: #fff;
font-size: 14px;
}
@media screen and (max-width: 480px) {
.Form-Item-Label-Required {
border-radius: 4px;
padding-top: 4px;
padding-bottom: 4px;
width: 32px;
font-size: 10px;
}
}
.Form-Item-Label-optional {
border-radius: 6px;
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
width: 48px;
display: inline-block;
text-align: center;
/* background: #5bc8ac; */
background: #337ab7;
color: #fff;
font-size: 14px;
}
@media screen and (max-width: 480px) {
.Form-Item-Label-optional {
border-radius: 4px;
padding-top: 4px;
padding-bottom: 4px;
width: 32px;
font-size: 10px;
}
}
.Form-Item-Input {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 48px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.Form-Item-Input {
margin-left: 0;
margin-top: 18px;
height: 40px;
flex: inherit;
font-size: 15px;
}
}
.Form-Item-Input-Radio {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 24px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.Form-Item-Input-Radio {
margin-left: 0;
margin-top: 18px;
height: 20px;
flex: inherit;
font-size: 15px;
}
}
.Form-Item-Textarea {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
padding-left: 1em;
padding-right: 1em;
height: 216px;
flex: 1;
width: 100%;
max-width: 410px;
background: #eaedf2;
font-size: 16px;
}
@media screen and (max-width: 480px) {
.Form-Item-Textarea {
margin-top: 18px;
margin-left: 0;
height: 200px;
flex: inherit;
font-size: 15px;
}
}
.Form-Btn {
border-radius: 6px;
margin-top: 32px;
/* margin-left: auto; */
/* margin-right: auto; */
padding-top: 10px;
padding-bottom: 10px;
width: 280px;
/* display: block; */
/* letter-spacing: 0.05em; */
background: #5bc8ac;
color: #fff;
font-weight: bold;
font-size: 20px;
}
@media screen and (max-width: 480px) {
.Form-Btn {
margin-top: 24px;
padding-top: 8px;
padding-bottom: 8px;
width: 160px;
font-size: 16px;
}
}

.Form-Checkbox {
border: 1px solid #ddd;
border-radius: 6px;
margin-left: 40px;
margin-right: 20px;
padding-left: 1em;
padding-right: 1em;
height: 24px;
background: #eaedf2;
font-size: 16px;
transform: scale(2);
}
@media screen and (max-width: 480px) {
.Form-Checkbox {
margin-left: 0;
margin-top: 18px;
height: 20px;
flex: inherit;
font-size: 15px;
transform: scale(1.8);
}
}

/* button */
.btn {
    font-family: "Font Awesome 5 Free";
    width: 200px;
    margin-top: 14px;
    position: relative;
    display: inline-block;
    font-weight: bold;
    padding: 0.25em 0.5em;
    text-decoration: none;
    transition: 0.2s;
    font-size: 1.3em;
    text-align: center;
    border-radius: 7px;
    border: none;
		overflow: visible;
}
.btn:after{
    position: absolute;
    content: "";
    width: 100%;
    min-height: 100%;
    top: -5px;
    left: -5px;
    padding-bottom: 6px;
    padding-right: 6px;
    border-radius: 10px;
}

.button_next{
    color: #ffffff;
    background: #66cc33;
}
.button_next:after {
    border: 2px solid #66cc33;
}
.button_next:hover {
    color: #ffffff;
    background: #339900;
}
.button_next:hover:after {
    border: 2px solid #339900;
}

.button_back{
    color: #ffffff;
    background: #ff9933;
}
.button_back:after {
    border: 2px solid #ff9933;
}
.button_back:hover {
    color: #ffffff;
    background: #cc6600;
}
.button_back:hover:after {
    border: 2px solid #cc6600;
}

h2 {
  color: #094c83;
}

select[readonly],
input[type="radio"][readonly],
input[type="checkbox"][readonly]{
    pointer-events:none;
}