@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図
===================================================================== */
/* =====================================================================
    chart
======================================================================*/
.chart {
  padding: 12rem 0 20rem;
}
.chart_box {
  position: relative;
  padding: 4rem 0;
  margin-left: calc(-280 / 640 * 100%);
  width: calc(1200 / 640 * 100%);
}
.chart_box::before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  background-color: #aa1125;
  z-index: -1;
}
.chart_img {
  position: relative;
}
.chart_note {
  position: absolute;
  bottom: 2rem;
  left: 0;
  width: 100%;
  text-align: center;
  color: #000000;
}
.chart_btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.chart_btn li {
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn [data-popup=chart_id_01] {
  width: calc(280 / 1600 * 100%);
  padding-top: calc(373 / 1600 * 100%);
  margin: calc(326 / 1600 * 100%) 0 0 calc(360 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_02] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(1218 / 1600 * 100%) 0 0 calc(360 / 1600 * 100%);
  z-index: 1;
}
.chart_btn [data-popup=chart_id_03] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(1771 / 1600 * 100%) 0 0 calc(360 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_04] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(1437 / 1600 * 100%) 0 0 calc(534 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_05] {
  width: calc(180 / 1600 * 100%);
  padding-top: calc(240 / 1600 * 100%);
  margin: calc(559 / 1600 * 100%) 0 0 calc(560 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_06] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(326 / 1600 * 100%) 0 0 calc(1016 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_07] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(500 / 1600 * 100%) 0 0 calc(832 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_08] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(1218 / 1600 * 100%) 0 0 calc(1016 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_09] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(1552 / 1600 * 100%) 0 0 calc(842 / 1600 * 100%);
  z-index: 1;
}
.chart_btn [data-popup=chart_id_10] {
  width: calc(224 / 1600 * 100%);
  padding-top: calc(299 / 1600 * 100%);
  margin: calc(1771 / 1600 * 100%) 0 0 calc(1016 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_11] {
  width: calc(200 / 1600 * 100%);
  padding-top: calc(267 / 1600 * 100%);
  margin: calc(2415 / 1600 * 100%) 0 0 calc(420 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_12] {
  width: calc(200 / 1600 * 100%);
  padding-top: calc(267 / 1600 * 100%);
  margin: calc(2415 / 1600 * 100%) 0 0 calc(700 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_13] {
  width: calc(200 / 1600 * 100%);
  padding-top: calc(267 / 1600 * 100%);
  margin: calc(2415 / 1600 * 100%) 0 0 calc(980 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_14] {
  width: calc(200 / 1600 * 100%);
  padding-top: calc(267 / 1600 * 100%);
  margin: calc(2810 / 1600 * 100%) 0 0 calc(560 / 1600 * 100%);
}
.chart_btn [data-popup=chart_id_15] {
  width: calc(200 / 1600 * 100%);
  padding-top: calc(267 / 1600 * 100%);
  margin: calc(2810 / 1600 * 100%) 0 0 calc(840 / 1600 * 100%);
}

@media screen and (min-width: 768px) {
  .chart {
    padding-top: 8rem;
  }
  .chart_box {
    margin-left: calc(-100 / 1000 * 100%);
    padding: 0;
    width: calc(1200 / 1000 * 100%);
  }
  .chart_box::before {
    height: calc(100% - 8rem);
  }
  .chart_btn li {
    cursor: pointer;
  }
}
/* =====================================================================
*    popup
* =================================================================== */
.popup_list li {
  padding-bottom: 0;
  overflow: hidden;
}
.popup_list li figure {
  position: relative;
  margin: 0 auto 4rem;
  width: 78.5714285714%;
  -webkit-box-shadow: 0.2em 0.2em 1.2em 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0.2em 0.2em 1.2em 0 rgba(0, 0, 0, 0.2);
}

.chart_inner {
  position: relative;
  padding-bottom: 12rem;
}

.chart_name {
  margin: 0 auto 6rem;
  width: 78.5714285714%;
}
.chart_name dt {
  margin-bottom: 0.2em;
  font-family: "游明朝", "游明朝体", "Yu Mincho", YuMincho, serif;
  font-size: 5.6rem;
  line-height: 1.2;
  white-space: nowrap;
}
.chart_name dt .age {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 55%;
}
.chart_name dd {
  font-size: 107%;
  font-weight: 700;
  color: #b31227;
}

.popup_comment {
  position: relative;
}
.popup_comment dt {
  position: absolute;
  top: -7rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  z-index: 1;
}
.popup_comment dt span {
  font-family: "Antonio", sans-serif;
  font-weight: 700;
  font-size: 8rem;
}
.popup_comment dd {
  position: relative;
  padding: 12rem 0;
  color: #ffffff;
}
.popup_comment dd::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  height: 100%;
  background: #b31227;
  z-index: -1;
}

@media screen and (min-width: 768px) {
  .popup_list li figure {
    margin: 0;
    width: 30.3448275862%;
  }
  .chart_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-bottom: 8rem;
  }
  .chart_inner_group {
    margin-left: 8.7356321839%;
    width: 60.9195402299%;
  }
  .chart_name {
    margin-bottom: 3rem;
    width: 100%;
  }
  .chart_name dt {
    font-size: 233%;
  }
  .chart_name dd {
    font-size: 122%;
  }
  .popup_comment dt {
    top: -42px;
  }
  .popup_comment dt span {
    font-size: 48px;
  }
  .popup_comment dd {
    padding: 8rem 0;
  }
}/*# sourceMappingURL=chart.css.map */