.content .flex_box {
  width: 100%;
  height: auto;
  display: flex;
  /* end input_form */
  /* end result_wrap */
}
.content .flex_box form.input_form {
  margin-right: 35px;
  padding-right: 35px;
  width: 50%;
  height: auto;
  border-right: dotted 3px #ccc;
  box-sizing: border-box;
}
.content .flex_box form.input_form .input_group {
  width: 100%;
  height: auto;
}
.content .flex_box form.input_form .input_group:not(:last-child) {
  margin-bottom: 35px;
}
.content .flex_box form.input_form .input_group input[type=text] {
  padding: 1em;
  width: 100%;
  height: auto;
  font-size: 1em;
  border: solid 1px #ccc;
  box-sizing: border-box;
}
.content .flex_box form.input_form .input_group input[type=text] + span.warning {
  margin-top: 5px;
  font-size: 14px;
  display: block;
}
.content .flex_box form.input_form .input_group .label_group {
  display: flex;
}
.content .flex_box form.input_form .input_group .label_group label.select_label {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 50px;
  display: block;
}
.content .flex_box form.input_form .input_group .label_group label.select_label:first-of-type {
  margin-right: 20px;
}
.content .flex_box form.input_form .input_group .label_group label.select_label:after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 30px;
  height: 100%;
  display: block;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #429ce6;
  box-sizing: border-box;
  background-image: url(./img/arrow.png);
  background-repeat: no-repeat;
  background-position: center center;
  pointer-events: none;
}
.content .flex_box form.input_form .input_group .label_group label.select_label select {
  padding: 0px 20px;
  width: 100%;
  height: 100%;
  font-size: 15px;
  letter-spacing: 0.05em;
  color: #000;
  border-radius: 5px;
  border: solid 1px #ccc;
  background-color: #fff;
  cursor: pointer;
}
.content .flex_box form.input_form .input_btn_group {
  display: flex;
}
.content .flex_box form.input_form .input_btn_group input {
  padding: 10px 0px;
  width: 50%;
  color: #fff;
  font-size: 1em;
  display: block;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: opacity 0.3s;
}
.content .flex_box form.input_form .input_btn_group input:hover {
  opacity: 0.75;
}
.content .flex_box form.input_form .input_btn_group input.submit_btn {
  margin-right: 20px;
  background-color: #f3a13f;
}
.content .flex_box form.input_form .input_btn_group input.reset_btn {
  background-color: #999;
}
.content .flex_box .result_wrap {
  width: 50%;
  height: auto;
  box-sizing: border-box;
}
.content .flex_box .result_wrap .chart_wrap {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}
.content .flex_box .result_wrap .chart_wrap canvas#chart_canvas {
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  border-radius: 5px;
  border: solid 1px #ccc;
}
.content .flex_box .result_wrap a.share_btn {
  margin-top: 15px;
  padding: 20px;
  width: 100%;
  height: auto;
  font-size: 1em;
  color: #fff;
  text-decoration: none;
  display: none;
  justify-content: center;
  background-color: #429ce6;
  box-sizing: border-box;
  border-radius: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: opacity 0.3s;
}
.content .flex_box .result_wrap a.share_btn:hover {
  opacity: 0.75;
}
.content .flex_box .result_wrap a.share_active {
  display: flex;
}

@media screen and (max-width: 480px) {
  .content .flex_box {
    display: block;
    /* end input_form */
    /* end result_wrap */
  }
  .content .flex_box form.input_form {
    margin-right: 0px;
    margin-bottom: 70px;
    padding-right: 0px;
    width: 100%;
    border-right: none;
  }
  .content .flex_box form.input_form .input_btn_group {
    display: flex;
  }
  .content .flex_box form.input_form .input_btn_group input:hover {
    opacity: 1;
  }
  .content .flex_box .result_wrap {
    width: 100%;
  }
  .content .flex_box .result_wrap a.share_btn:hover {
    opacity: 1;
  }
}