@charset "utf-8";
/* CSS Document */

html,body{
  margin:0;
  padding:0;
  min-height: 100vh;
  box-sizing: border-box;
}
body{
  background-color: #EAEDF2;
  position: relative;
  padding-bottom:200px;
  line-height: 1.6;
  font-size: 16px;
  color: #444;
}

main{
  background: #fff;
  max-width: 800px;
  margin:20px auto;
  box-sizing: border-box;
  padding: 20px;
}

header{
  color:#fff;
  padding: 20px;
  display: flex;
  align-items: center;
  background: #507EA2 !important;
  margin-bottom:5rem;
}
header img{
  max-width: 200px;
}

input[type="submit"],input[type="button"]{
  padding: 10px;
  
} 

.header-area{
  max-width: 900px;
  margin: 20px auto;
  font-size: 0.9rem;
}

h1{
  padding: 10px 0;
  font-size: 1.5rem;
  font-weight: bold;
}
.red-option{
  border: solid 3px #ed8583;
  border-radius: 10px;
  padding:10px;
  margin:20px 0;
}
.red-option h2{
  padding: 0 0 10px 0;
  font-size: 1.1rem;
  color:#ff0000;
}
.box-title{
  color: #ed8583;
  display: inline-block;
    position: relative;
    top: -25px;
    left: 10px;
    padding: 0 9px;
    margin: 0 7px;
    background: #fff;
    font-size: 19px;
    line-height: 1.4;
  font-weight: bold;
}

.double-option{
  border: double 5px #444;
  padding: 10px;
  margin: 20px 0;
}

footer{
  color:#fff;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
  margin-top:5rem;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom:0;
  text-align: center;
  align-items: center;
  background: #507EA2 !important;
}

h4{
  padding: 10px 0;
}

#formWrap {
	max-width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
  margin-bottom: 20px;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
  box-sizing: border-box;
  background: #fefefe;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
.required {
    color: red;
    margin-left: 5px;
    font-weight: bold;
}
.note {
    font-size: 0.8em;
    color: #777;
}
label {
    margin-right: 15px;
    display: inline-block;
}
.add-remove-btn {
    padding: 5px 10px;
    margin: 0 5px;
    cursor: pointer;
}
.add-remove-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}


/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
header img{
  max-width: 40%;
}
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
    width: 100%;
    padding: 10px 2%;
    display: block;
}
table.formTable th {
    margin-top: 15px;
}
}