@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図
===================================================================== */
/* =====================================================================
    chart
======================================================================*/
.chart {
  padding-bottom: 10rem;
}
.chart .gradeBox {
  top: 50rem;
  left: 0;
  width: 100%;
  height: 45rem;
}
.chart .ttl_side {
  bottom: auto;
  top: 42.8rem;
}
.chart .sec_ttl {
  margin-bottom: 8rem;
}
.chart .sec_ttl span {
  color: #c6e7ec;
  background: -webkit-gradient(linear, left top, right top, from(#c6e7ec), color-stop(10%, #c6e7ec), color-stop(90%, #d8ddf2), to(#d8ddf2));
  background: linear-gradient(90deg, #c6e7ec 0%, #c6e7ec 10%, #d8ddf2 90%, #d8ddf2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.chart_box {
  position: relative;
  margin-bottom: 4rem;
}

.chart_btn {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn li {
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn .chart_id_01 {
  width: calc(440 / 1000 * 100%);
  padding-top: calc(440 / 1000 * 100%);
  margin: calc(720 / 1000 * 100%) 0 0 calc(280 / 1000 * 100%);
}
.chart_btn .chart_id_02 {
  width: calc(400 / 1000 * 100%);
  padding-top: calc(400 / 1000 * 100%);
  margin: calc(1459 / 1000 * 100%) 0 0 calc(60 / 1000 * 100%);
}
.chart_btn .chart_id_03 {
  width: calc(400 / 1000 * 100%);
  padding-top: calc(400 / 1000 * 100%);
  margin: calc(1459 / 1000 * 100%) 0 0 calc(560 / 1000 * 100%);
}
.chart_btn .chart_id_04 {
  width: calc(308 / 1000 * 100%);
  padding-top: calc(308 / 1000 * 100%);
  margin: calc(2702 / 1000 * 100%) 0 0 calc(100 / 1000 * 100%);
}
.chart_btn .chart_id_05 {
  width: calc(308 / 1000 * 100%);
  padding-top: calc(308 / 1000 * 100%);
  margin: calc(2039 / 1000 * 100%) 0 0 calc(82 / 1000 * 100%);
}
.chart_btn .chart_id_06 {
  width: calc(308 / 1000 * 100%);
  padding-top: calc(308 / 1000 * 100%);
  margin: calc(2599 / 1000 * 100%) 0 0 calc(581 / 1000 * 100%);
}
.chart_btn .chart_id_07 {
  width: calc(308 / 1000 * 100%);
  padding-top: calc(308 / 1000 * 100%);
  margin: calc(172 / 1000 * 100%) 0 0 calc(100 / 1000 * 100%);
}
.chart_btn .chart_id_08 {
  width: calc(308 / 1000 * 100%);
  padding-top: calc(308 / 1000 * 100%);
  margin: calc(172 / 1000 * 100%) 0 0 calc(581 / 1000 * 100%);
}
.chart_btn .chart_id_09 {
  width: calc(308 / 1000 * 100%);
  padding-top: calc(308 / 1000 * 100%);
  margin: calc(2039 / 1000 * 100%) 0 0 calc(581 / 1000 * 100%);
}

.chart_note {
  font-size: 2rem;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .chart {
    padding-bottom: 20rem;
  }
  .chart .gradeBox {
    top: 40rem;
    height: 33.7rem;
    background-position: center bottom;
  }
  .chart .ttl_side {
    top: 31.2rem;
  }
  .chart .sec_ttl_wrap {
    margin-left: 3em;
    text-align: center;
  }
  .chart_box {
    margin: 0 auto 4rem;
    width: 100%;
    max-width: 700px;
  }
  .chart_btn li {
    cursor: pointer;
  }
}
/* =====================================================================
*    popup
* =================================================================== */
.popup_list li figure {
  margin: 0 auto 2.4rem;
  width: calc(400 / 560 * 100%);
}
.popup_list li p {
  line-height: 2.25;
}

.chart_name {
  margin: 0 auto 6rem;
  width: calc(400 / 560 * 100%);
  letter-spacing: 0.2em;
}
.chart_name dt {
  margin-bottom: 2rem;
  font-size: 4rem;
  font-weight: 700;
}
.chart_name dt ruby rt {
  text-align: center;
  letter-spacing: 0.075em;
}
.chart_name dt small {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 55%;
}
.chart_name dd {
  font-size: 3rem;
  color: #34a3ad;
}

@media screen and (min-width: 768px) {
  .popup_list li figure {
    width: 100%;
  }
  .popup_list li p {
    position: relative;
    top: -0.4em;
    width: 63.6363636364%;
    line-height: 2;
  }
  .chart_head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 4rem;
    width: 100%;
  }
  .chart_head_inner {
    margin-right: 4.5454545455%;
    width: 31.8181818182%;
  }
  .chart_name {
    margin-bottom: 0;
    width: 100%;
  }
  .chart_name dt {
    font-size: max(3rem, 22px);
  }
  .chart_name dd {
    font-size: max(2.2rem, 18px);
  }
}/*# sourceMappingURL=chart.css.map */