@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図
===================================================================== */
/* =====================================================================
    chart
======================================================================*/
.chart {
  padding: 15rem 0;
  background: #0f1111;
}
.chart .sec_ttl.appear .typewriter {
  width: 8ch;
  -webkit-animation-timing-function: steps(8, end), step-end;
          animation-timing-function: steps(8, end), step-end;
  -webkit-animation-duration: 2s, 1s;
          animation-duration: 2s, 1s;
}

.chart_box {
  position: relative;
  margin: 0 0 8rem calc(-30 / 640 * 100%);
  width: calc(710 / 640 * 100%);
}

.chart_btn {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn li {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3.6rem;
}
.chart_btn .chart_id_01 {
  width: calc(302 / 1000 * 100%);
  padding-top: calc(312 / 1000 * 100%);
  margin: calc(112 / 1000 * 100%) 0 0 calc(350 / 1000 * 100%);
}
.chart_btn .chart_id_02 {
  width: calc(272 / 1000 * 100%);
  padding-top: calc(282 / 1000 * 100%);
  margin: calc(112 / 1000 * 100%) 0 0 calc(712 / 1000 * 100%);
}
.chart_btn .chart_id_03 {
  width: calc(272 / 1000 * 100%);
  padding-top: calc(282 / 1000 * 100%);
  margin: calc(112 / 1000 * 100%) 0 0 calc(18 / 1000 * 100%);
}
.chart_btn .chart_id_04 {
  width: calc(262 / 1000 * 100%);
  padding-top: calc(272 / 1000 * 100%);
  margin: calc(696 / 1000 * 100%) 0 0 calc(722 / 1000 * 100%);
}
.chart_btn .chart_id_05 {
  width: calc(272 / 1000 * 100%);
  padding-top: calc(282 / 1000 * 100%);
  margin: calc(1382 / 1000 * 100%) 0 0 calc(672 / 1000 * 100%);
}
.chart_btn .chart_id_06 {
  width: calc(282 / 1000 * 100%);
  padding-top: calc(272 / 1000 * 100%);
  margin: calc(732 / 1000 * 100%) 0 0 calc(8 / 1000 * 100%);
}
.chart_btn .chart_id_07 {
  width: calc(252 / 1000 * 100%);
  padding-top: calc(272 / 1000 * 100%);
  margin: calc(1012 / 1000 * 100%) 0 0 calc(392 / 1000 * 100%);
}
.chart_btn .chart_id_08 {
  width: calc(222 / 1000 * 100%);
  padding-top: calc(242 / 1000 * 100%);
  margin: calc(1322 / 1000 * 100%) 0 0 calc(422 / 1000 * 100%);
}
.chart_btn .chart_id_09 {
  width: calc(242 / 1000 * 100%);
  padding-top: calc(244 / 1000 * 100%);
  margin: calc(1012 / 1000 * 100%) 0 0 calc(78 / 1000 * 100%);
}
.chart_btn .chart_id_10 {
  width: calc(242 / 1000 * 100%);
  padding-top: calc(252 / 1000 * 100%);
  margin: calc(1282 / 1000 * 100%) 0 0 calc(78 / 1000 * 100%);
}
.chart_btn .chart_id_11 {
  width: calc(242 / 1000 * 100%);
  padding-top: calc(252 / 1000 * 100%);
  margin: calc(1574 / 1000 * 100%) 0 0 calc(78 / 1000 * 100%);
}
.chart_btn .chart_id_12 {
  width: calc(222 / 1000 * 100%);
  padding-top: calc(232 / 1000 * 100%);
  margin: calc(444 / 1000 * 100%) 0 0 calc(548 / 1000 * 100%);
}
.chart_btn .chart_id_13 {
  width: calc(212 / 1000 * 100%);
  padding-top: calc(222 / 1000 * 100%);
  margin: calc(454 / 1000 * 100%) 0 0 calc(18 / 1000 * 100%);
}
.chart_btn .chart_id_14 {
  width: calc(222 / 1000 * 100%);
  padding-top: calc(232 / 1000 * 100%);
  margin: calc(1705 / 1000 * 100%) 0 0 calc(693 / 1000 * 100%);
}

.chart_note {
  text-align: center;
  font-size: 3.2rem;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .chart {
    padding: 12rem 0;
  }
  .chart_box {
    margin: 0 auto 4rem;
    width: 100%;
    max-width: 840px;
  }
  .chart_btn li {
    cursor: pointer;
  }
  .chart_note {
    font-size: 20px;
  }
}
/* =====================================================================
*    popup
* =================================================================== */
.popup_list li > p {
  line-height: 1.888;
}
.popup_list li .comment {
  margin-top: 30px;
}

.chart_name {
  margin-bottom: 3rem;
}
.chart_name dt {
  margin: 0 auto 2.5rem;
  width: calc(414 / 750 * 100%);
}
.chart_name dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding-bottom: 3rem;
  border-bottom: 1px solid #007170;
}
.chart_name dd h3 {
  font-size: 166%;
  font-weight: 700;
}
.chart_name dd h3 ruby rt {
  text-align: center;
  letter-spacing: 0.075em;
  -webkit-transform: translateY(-0.8em);
          transform: translateY(-0.8em);
}
.chart_name dd h3 .age {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 65%;
}
.chart_name dd p {
  margin-left: 1.2em;
  padding-bottom: 0.1em;
  font-size: 111%;
  color: #32ffe9;
}

.popup_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.popup_slide > * {
  position: absolute;
  top: 38rem;
  width: 2.5em;
  height: 2.5em;
  background: rgba(50, 255, 233, 0.8);
  border-radius: 0.8rem;
  z-index: 3;
  cursor: pointer;
}
.popup_slide > *::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 48%;
  width: 0.55em;
  height: 0.55em;
  margin-right: 3rem;
  border-top: 2px solid #0f1111;
  border-right: 2px solid #0f1111;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
          transform: rotate(45deg) translate(-50%, -50%);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}
.popup_slide .prev {
  left: 0;
  margin-left: -1.2em;
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}
.popup_slide .next {
  right: 0;
  margin-right: -1.2em;
}

@media screen and (min-width: 768px) {
  .popup_slide > * {
    top: 280px;
  }
}/*# sourceMappingURL=chart.css.map */