*{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

input, select, button, textarea{
 font-family: inherit;
}

.body1{
 overflow: hidden;
 min-height: 100%;
 background-color: rgb(242, 245, 249);
}

.main-contents{
 margin: 24px auto 24px;
 max-width: 688px;
 background-color:rgb(255, 255, 255);
 padding-bottom: 24px;
}

h1{
 color:rgb(255, 255, 255);
 background-color:rgb(192, 0, 0);
 line-height:1.5;
 font-weight:normal;
 word-break: break-all;
 padding: 18px 24px;
 font-size:24px;
 text-align: center;
 margin-bottom: 24px;
}

.message-area{
 padding: 0 24px 24px;
}

.message-with-border{
 height: 100%;
 display: block;
 line-height: 1.5;
 padding: 8px 16px;
 border: 1px solid rgb(211, 211, 212);
 border-radius: 4px;
 background: rgb(255, 255, 255);
}

.message-image{
 margin-bottom: 10px;
 width: 100%;
 max-width: 650px;
 height: auto;
}

.message-image > img{
 width: 100%;
}

.message-text{
 text-align: left;
 font-size: 14px;
}

.incomplete-text{
 font-size: 18px;
 color: #2980B9;
 margin-bottom: 5px;
}

.error-summary-area{
 background-color: rgb(255, 237, 235);
 border: 1px solid rgb(236, 192, 186);
 border-radius: 4px;
 padding: 16px;
 margin-top: 24px;
 display: none;
}

.error-summary{
 color: rgb(232, 75, 53);
 font-size: 14px;
 line-height: 1.7;
}

.error-message{
 color: rgb(232, 75, 53);
 font-size: 12px;
 line-height: 1.7;
 word-break: break-all;
 display:none;
}

.form-content, .table-content{
 padding: 0 24px;
}

.q-head{
 line-height: 1.7;
 font-weight: bold;
 font-size: 16px;
 display: block;
 word-break: break-all;
 margin-bottom: 4px;
}

.q-head-text{
 color: rgb(77, 77, 81);
}

.icon-area{
 display: inline-block;
 vertical-align: text-bottom;
 margin-left: 8px;
}

.mandatory-icon{
 width: 32px;
 font-size: 12px;
 font-weight: bold;
 color: rgb(255, 255, 255);
 text-align: center;
 padding: 4px;
 line-height: 1;
 background-color: rgb(232, 75, 53);
 border-radius: 4px;
 white-space: nowrap;
}

.q-box{
 margin-bottom: 24px;
}

.form-comment{
 line-height: 1.7;
 font-size: 14px;
 color: rgb(77, 77, 81);
 word-break: break-all;
 margin-bottom: 4px;
}

.red-text{
 color: #c00000;
}

.Wrapper{
 display: flex;
}

.Character-Limit-Note{
 display: flex;
 justify-content: space-between;
}

.Character-Limit{
 color: rgb(149, 149, 151);
 font-size: 12px;
 line-height: 1.7;
}

.Character-Count{
 color: rgb(149, 149, 151);
 font-size: 12px;
 line-height: 1.7;
}

.select-label{
 font-weight: bold;
 font-size: 16px;
 line-height: 170%;
 color: rgb(77, 77, 81);
 word-break: break-all;
 margin-bottom: 4px;
}

.wrapper-item{
 padding-right: 5px;
}

.select-number{
 appearance: none;
 font-size: 16px;
 padding: 10px 30px 10px 16px;
 outline: none;
 display: block;
 background: rgb(255, 255, 255);
 border: 1px solid rgb(211, 211, 212);
 border-radius: 4px;
 width: 100%;
 color: rgb(77, 77, 81);
 transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}

.form-textarea{
 appearance: none;
 font-size: 16px;
 padding: 7px 16px;
 outline: none;
 display: block;
 background: rgb(255, 255, 255);
 border: 1px solid rgb(211, 211, 212);
 border-radius: 4px;
 width: 100%;
 color: rgb(77, 77, 81);
 transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
 height: 112px;
 line-height: 1.5;
}

.input-text{
 appearance: none;
 font-size: 16px;
 padding: 10px 16px;
 outline: none;
 display: block;
 background: rgb(255, 255, 255);
 border: 1px solid rgb(211, 211, 212);
 border-radius: 4px;
 width: 100%;
 color: rgb(77, 77, 81);
 transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
}

input[type="number"]{
  -moz-appearance: textfield;
}

.is-invalid{
 background: rgb(255, 237, 235) !important;
 border: 1px solid rgb(232, 75, 53) !important;
}

.list-wrapper{
 margin-bottom:4px;
}

.label-with-border{
 height: 100%;
 display: block;
 line-height: 1.5;
 font-size: 16px;
 padding: 8px 16px;
 border: 1px solid rgb(211, 211, 212);
 border-radius: 4px;
 cursor: pointer;
 background: rgb(255, 255, 255);
 transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}

.input-checkbox, .input-radio{
 margin-right: 5px;
 transform: scale(1.3);
}

.button-item{
 text-align: center;
 margin-bottom: 10px;
}

.preview-table{
 border-collapse: collapse;
 color: rgb(77, 77, 81);
 font-size: 12px;
 line-height: 1.7;
 border-right: 1px solid;
 border-bottom: 1px solid;
 margin-bottom: 30px;
}

.preview-table td{
 border-left: 1px solid;
 border-top: 1px solid;
 font-size: 16px
}

.preview-table-left-cell{
 padding: 10px;
 background-color: #eeeeee;
}

.preview-table-right-cell{
 width: 60%;
 padding: 10px;
 word-break: break-all;
}

.preview-table-left-cell ~ .icon-area{
 margin-left: auto;
 padding: 0 2px;
}

.to-next-button{
 appearance: none;
 border: none;
 text-align: center;
 border-radius: 4px;
 transition: opacity 0.2s ease-out;
 cursor: pointer;
 min-height: 56px;
 line-height: 1.7;
 color: rgb(255, 255, 255);
 background-color: rgb(192, 0, 0);
 font-size: 16px;
 max-width: 100%;
 padding: 16px 96px;
}

.to-before-button{
 appearance: none;
 border: 1px solid rgb(211, 211, 212);
 text-align: center;
 border-radius: 4px;
 transition: opacity 0.2s ease-out;
 cursor: pointer;
 min-height: 56px;
 line-height: 1.7;
 color: rgb(77, 77, 81);
 background-color: rgb(255, 255, 255);
 font-size: 16px;
 max-width: 100%;
 padding: 16px 96px;
}

footer{
 max-width: 688px;
 text-align: center;
 margin: 0 auto;
}

@media (max-width: 575px) {
 h1 {
  padding: 12px 8px;
  font-size: 20px;
  margin-bottom: 12px;
 }
 .message-area{
  padding-bottom: 12px;
 }
 .to-next-button{
  padding: 16px 32px;
  width: 100%;
 }
}