@charset "utf-8";

.chart .bg_color01 {
  position: relative;
  padding: 120px 40px 35px;
  z-index: 0;
}
.chart .chart_meter {
  position: absolute;
  color: #FFFFFF;
  font-size: 1.5rem;
  margin: auto;
  left: 0;
  right: 0;
  top: 50px;
  transition: 0.5s;
}
.chart .chart_meter > p {
  display: inline-block;
  vertical-align: middle;
}
.chart .chart_meter > span {
  position: relative;
  display: inline-block;
  width: 210px;
  height: 8px;
  margin: 2px 0 0 20px;
  background: #FFFFFF;
  vertical-align: middle;
  z-index: 0;
}
.chart .chart_meter > span > span {
  position: absolute;
  display: block;
  width: 25%;
  height: 100%;
  background: #B1D0EC;
  top: 0;
  left: 0;
  transition: width 0.5s;
}
.chart .common_section.chart_section {margin: 0 auto 180px;}
.chart .common_section.chart_section h2 {margin: 0 auto 60px;}
.chart button {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 50px;
  text-align: center;
  font-size: 1.5rem;
  line-height: 40px;
  border-radius: 99px;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 0;
}
.chart button[type="button"] {
  margin: 0 auto;
  color: var(--color01);
  border: solid 1px var(--color01);
}
.chart button[type="reset"] {
  color: #FFFFFF;
  border: solid 1px #FFFFFF;
}
.chart input[type="radio"] {display: none;}
.chart label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  text-align: center;
  font-size: 1.5rem;
  color: var(--color01);
  border: solid 1px var(--color01);
  border-radius: 99px;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 0;
}
.chart button::after ,
.chart label::after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 0;
  background: var(--color01);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  transition: 0.5s;
}
.chart button:hover ,
.chart label:hover {color: #FFFFFF;}
.chart button:hover::after ,
.chart label:hover::after {height: 100%;}
.chart button[type="reset"]:hover {color: var(--color01);}
.chart button[type="reset"]::after {background: #FFFFFF;}
.chart label > span {
  display: inline;
  line-height: 1.3;
  vertical-align: middle;
}
.chart label > span span {
  display: block;
  font-size: 1.3rem;
}
.chart_box {text-align: center;}
.chart_box .chart_inner {
  width: 100%;
  max-width: 820px;
  height: auto;
  min-height: 280px;
  padding: 20px;
  text-align: center;
  background: #FFFFFF;
  margin: 0 auto 35px;
}
.chart_box .chart_inner > div > figure {margin: 20px auto;}
.chart_box .chart_inner > div > figure img {
  display: block;
  margin: 0 auto;
}
.chart_box .chart_inner > div > p {
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color01);
  margin: 0 auto 30px;
}
.chart_box .chart_inner.chart01 > div > p {margin: 0 auto 10px;}
.chart_box .chart_inner .caution {
  font-size: 1.6rem;
  font-weight: 400;
  color: #646464;
  line-height: 1.5;
  margin: 0 auto 20px;
}
.chart_box .chart_inner .title {
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 auto 20px;
}
.chart_box .chart_inner .title span {
  display: block;
  font-size: 5rem;
  font-weight: 500;
  font-family: 'Oswald', 'Noto Sans JP',"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", sans-serif;
  line-height: 1.2;
  margin: 0 auto 10px;
}
.chart_box .chart_inner .tel_title {
  font-weight: 400;
  color: var(--color01);
} 
.chart_box .chart_inner .reslut_tel {
  font-size: 3.5rem;
  font-weight: 500;
  font-family: 'Oswald', 'Noto Sans JP',"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.2;
  color: var(--color01);
}
.chart_box .chart_inner .reslut_tel span {
  vertical-align: middle;
}
.chart_box .chart_inner .reslut_tel span:nth-child(2) {font-size: 6rem;}
.chart_box .chart_inner .result_step > span {
  display: inline-block;
  color: var(--color01);
  font-size: 3.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 auto 10px;
  padding: 0 0 10px;
  border-bottom: solid 2px var(--color01);
}
.chart_box .chart_inner .input_text {
  position: relative;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 auto 15px;
  z-index: 0;
}
.chart_box .chart_inner .input_text span {
  display: inline-block;
  line-height: 1.2;
  vertical-align: middle;
}
.chart_box .chart_inner .input_text span.num {color: #646464;}
.chart_box .chart_inner .input_text span.label {margin: 0 20px 10px 0;}
.chart_box .chart_inner .input_text span.label:nth-last-of-type(1) {margin: 0;} 
.chart_box .chart_inner .input_text span.caution_text01 ,
.chart_box .chart_inner .input_text span.caution_text02 ,
.chart_box .chart_inner .input_text span.caution_text03 {
  display: block;
  padding: 15px 0 0;
  margin: 0;
  color: #ff0000;
}  
.chart_box .chart_inner .input_text input[type="text"] {
  display: inline-block;
  width: 140px;
  height: 40px;
  padding: 0 10px;
  border:solid 1px #646464;
  vertical-align: middle;
}
.chart_box .chart_inner .input_text .select_outer {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 40px;
  border: solid 1px #646464;
  vertical-align: middle;
  z-index: 0;
}
.chart_box .chart_inner .input_text .select_outer::after {
  position: absolute;
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-top: solid 8px #646464;
  border-left: solid 6px transparent;
  border-right: solid 6px transparent;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 10px;
  pointer-events: none;
}
.chart_box .chart_inner .input_text .select_outer select {
  width: 100%;
  height: 40px;
  padding:0 0 5px 15px;
}
.chart_box .chart_inner .input_text .select_outer select option {text-align: left;}
.chart div.before,div.result {
  height: 0;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s;
}
.chart div.before.active,
.chart div.result.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  transition: opacity 0.5s;
}
.chart div.before.active {padding: 20px 0 0;}
.chart0101,.chart0102,.chart0103,.chart_ng,.chart_ok,.chart_result01,.chart_result02,.chart_result03 {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s;
  height: 0;
}
.chart0101.active,.chart0102.active,.chart0103.active,.chart_ng.active,.chart_ok.active,.chart_result01.active,.chart_result02.active,.chart_result03.active {
  opacity: 1;
  visibility: visible;
  height: auto;
  transition: opacity 0.5s;
}
.chart .chart_contact {margin: 30px auto 20px;}
.chart .chart_contact > li {
  display: inline-block;
  margin: 0 10px;
}
.chart .result_ul {
  display: flex;
  justify-content: center;
  margin: 0 auto 10px;
}
.chart .chart01 .result_ul {margin: 0 auto 40px;}
.chart .result_ul ul {
  display: inline-block;
  font-size: 0;
}
.chart .result_ul ul li {
  font-size: 1.5rem;
  color: var(--color01);
  line-height: 1.5;
  margin: 0 20px;
  text-align: left;
  list-style-type: none;
}
.chart .result_ul ul li span {
  display: inline-block;
  vertical-align: top;
}
.chart .result_ul ul li span:nth-of-type(1) {width: 4.5em;}
.chart .result_ul ul li span:nth-of-type(2) {width: calc(100% - 4.5em);}
.chart .chart_status {margin: 20px auto;}
.chart .chart_status li {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #DBDBDB;
  margin: 0 5px;
  border-radius: 50%;
  z-index: 0;
}
.chart .chart_status li.finish {background: var(--color01);}
.chart .chart_status li.current::after {
  position: absolute;
  display: block;
  content: "";
  width: 16px;
  height: 16px;
  border: solid 1px #646464;
  border-radius: 50%;
  margin: auto;
  top: -100%;
  bottom: -100%;
  left: -100%;
  right: -100%;
}
.chart .label_list {
  display: inline-block;
  font-size: 0;
}
.chart .label_list li {
  display: inline-block;
  margin: 0 5px 10px;
  vertical-align: bottom;
}


@media screen and (max-width: 800px){ 

  .chart .bg_color01 {padding: 100px 7% 10%;}
  .chart .chart_meter {top: 20px;}
  .chart .chart_meter > p {display: block;}
  .chart .common_section.chart_section {margin: 20% auto;}
  .chart .common_section.chart_section h2 {margin: 0 auto 12%}
  .chart button {
    width: 135px;
    height: 40px;
    font-size: 1.4rem;
    line-height: 36px;
  }
  .chart label {
    width: 135px;
    height: 40px;
    font-size: 1.4rem;
  }
  .chart label > span span {font-size: 1.2rem;}
  .chart_box .chart_inner {
    padding: 8% 3%;
    margin: 0 auto 10%;
  }
  .chart_box .chart_inner > div > figure {margin: 4% auto;}
  .chart_box .chart_inner > div > p {margin: 0 auto 6%;}
  .chart_box .chart_inner.chart01 > div > p {margin: 0 auto 3%;}
  .chart_box .chart_inner .caution {
    font-size: 1.4rem;
    margin: 0 auto 4%;
  }
  .chart_box .chart_inner .title {
    font-size: 2rem;
    margin: 0 auto 6%;
  }
  .chart_box .chart_inner .title span {font-size: 3.5rem;}
  .chart_box .chart_inner .reslut_tel {font-size: 2rem;}
  .chart_box .chart_inner .reslut_tel span:nth-child(2) {font-size: 4rem;}
  .chart_box .chart_inner .result_step > span {
    margin: 0 auto 2%;
    padding: 0 0 2%;
  }
  .chart_box .chart_inner .input_text {
    font-size: 1.4rem;
    margin: 0 auto;
  }
  .chart_box .chart_inner .input_text span {margin: 0 5px 5% 0;}
  .chart_box .chart_inner .input_text span.num {margin: 0 0 5%;}
  .chart_box .chart_inner .input_text span.caution_text01 ,
  .chart_box .chart_inner .input_text span.caution_text02 ,
  .chart_box .chart_inner .input_text span.caution_text03 {
    width: 100%;
    padding: 3% 0 5%;
  }  
  .chart_box .chart_inner .input_text input[type="text"] {
    width: 130px;
    margin: 0 0 5%;
  }
  .chart_box .chart_inner .input_text .select_outer {
    width: 130px;
  }
  .chart_box .chart_inner .input_text .select_outer::after {right: 5px;}
  .chart_box .chart_inner .input_text .select_outer select {
    padding:0 0 3px 10px;
    font-size: 1.4rem;
  }
  .chart_box .chart_inner .input_text .select_outer select option {font-size: 1.4rem;}
  .chart div.before.active {padding: 0;}
  .chart .chart_contact {margin: 6% auto 4%;}
  .chart .result_ul {
    display: block;
    margin: 0 auto 8%;
  }
  .chart .chart01 .result_ul {
    width: 240px;
    margin: 0 auto 12%;
  }
  .chart .result_ul ul {display: block;}
  .chart .result_ul ul li {
    font-size: 1.4rem;
    margin: 0;
  }
  .chart .chart_status {margin: 5% auto;}
  .chart .label_list li {
    display: block;
    margin: 0 auto 5%;
  }
  .chart .chart0103 .label_list li {
    width: 49%;
    margin: 0 2% 5% 0;
    float: left;
  }
  .chart .chart0103 .label_list li:nth-child(even) {margin: 0 0 5%;}
  .chart .chart0103 .label_list li label {margin: 0 0 0 auto;}
  .chart .chart0103 .label_list li:nth-child(even) label {margin: 0 auto 0 0;}
}