/* ====== Base layout ======*/
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", "Noto Sans JP", sans-serif;
}

/* ====== Header =====*/
.header {
  background: linear-gradient(rgb(139, 212, 163),rgb(72, 219, 121));
  padding: 12px 0;
  position: relative;
  box-shadow: 0 0 4px rgba(0, 0, 0, .4);
}
.header h1 {
  margin: 0;
  font-size: 32px;
  padding-left: 16px;
  color: #fff;
}
.header .sales-date {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

/*ラジオボタン*/
.radio-group {
    display: inline-flex;
    margin: auto;
    padding: 1rem 0.5rem;
}

.radio-area input[type=radio] {
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.radio-area label {
    cursor: pointer;
    padding: 0.5rem;
    color: #fff;
    background-color: #6a94b7;
    transition: .5s;
}

.radio-area:first-child label {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.radio-area:last-child label {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.radio-area input[type=radio]:checked+label {
    background-color: #3079b5;
}