@charset "shift_jis";
/* CSS Document */
/* calc */
.calc {padding-bottom: 6vh;}
.calc_wrap {
  max-width: 660px;width: 94%;
  margin: 0 auto;
}
@media screen and (min-width: 1000px) {.calc_wrap {width: 100%;}}

#duration-area {padding: 0;}
#duration-area,
#rest-fields {
  max-height: 0;
  opacity: 0;transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
  pointer-events: none;
  overflow: hidden;
}
#duration-area.active,
#rest-fields.active {
  height: auto;max-height: unset;
  opacity: 1;
  pointer-events: auto;
}
#step-course {
  display: block;
  opacity: 1;
}
label.title {
  margin-bottom: .6em;padding-left: .8em;
  font-size: 14px;font-weight: bold;line-height: 1.4;color: #333;
  display: block;

  border-left: solid 6px var(--color-primary);
}
select {
  width: 100%;
  margin-bottom: 1em;padding: .8em;
  border-radius: 5px; border: solid 1px var(--color-border);
}

.selection-group {
  margin-top: 30px;
}

.radio-group label {
  margin-right: 2em;
  display: inline-block;
  cursor: pointer;
  white-space: nowrap;
}
.radio-group input[type="radio"] {
  margin-right: .2em;
  vertical-align: middle;
  cursor: pointer;
}
.option-grid {
  display: grid;grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.opt-item {
  display: flex;align-items: center;
  gap: 14px;
  cursor: pointer;
}

.group-header {
  grid-column: 1 / -1;
  margin-top: 1em;padding: .6em 1em;
  font-size: 14px;
  color: #fff;
}
.group-header.opt_free {background: var(--color-primary);margin-top: 0;}
.group-header.opt_1000 {background: var(--color-secondary);}
.group-header.opt_2000 {background: var(--color-tertiary);}
.group-header.opt_3000 {background: var(--color-quaternary);}

.total-area {
  margin: 4em 1em;padding: 2em;
  background: #222;
  color: #fff;text-align: center;font-size: 120%;
  border-radius: 10px;
}
#total-price {
  margin-left: 5px;
  font-size: 2rem;font-weight: bold;color: #ffd700;
}

@media screen and (max-width:480px){
}
@media screen and (min-width: 481px) and (max-width: 599px) {
}
@media screen and (min-width: 600px) and (max-width: 999px) {
}
@media screen and (min-width:1000px){
}