/* header */
header {
  width: 100%;
  background-color: #222;
  margin: 0 auto;
}
/* footer */
footer {
  width: 100%;
  background-color: #222;
  font-size: 12px;
  padding-bottom: 20px;
  padding-top: 10px;
  margin: 0 auto;
  text-align: center;
  color: white;
}
.img-logo {
  padding: 20px;
}
.img-logo:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}
body {
  width: 100%;
  margin: 0 auto;
}

.main-contents {
  padding: 10px 10vw;
}
/* input部に関して */
input[type="text"] {
  width: 100%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}
input[type="text"]:focus {
  border-color: #e57373;
  box-shadow: 0 0 8px 0 #e57373;
}
input::placeholder {
  color: #9e9e9e;
}

/* outputに関して */
.output {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}
.marker {
  background: linear-gradient(transparent 70%, #ef9a9a 70%);
}
/* tableに関して */
table th {
  font-weight: lighter;
  color: #222;
}

table td{
  width: 15%;
  table-layout: fixed;
}

/* inline */
input.month[type="text"] {
  width: 20%;
  border: 2px solid #aaa;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
}

.inline-block {
  display: inline-block;
}

.output2 {
  font-size: 1.4em;
  font-weight: bold;
  margin-left: 10px;
  margin-top: 90px;
}

h2{
  margin-top: 60px;
}