@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図ページ
===================================================================== */
/* =====================================================================
    chart
======================================================================*/
.chart {
  padding: 20rem 0 4rem;
}
.chart_box {
  position: relative;
  margin-left: calc(-35 / 650 * 100%);
  width: calc(720 / 650 * 100%);
}
.chart_img img {
  border-radius: 2rem;
}
.chart_btn {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn li {
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn [data-popup=chart_id_01] {
  width: calc(300 / 960 * 100%);
  padding-top: calc(300 / 960 * 100%);
  margin: calc(476 / 960 * 100%) 0 0 calc(300 / 960 * 100%);
}
.chart_btn [data-popup=chart_id_02] {
  width: calc(300 / 960 * 100%);
  padding-top: calc(300 / 960 * 100%);
  margin: calc(476 / 960 * 100%) 0 0 calc(630 / 960 * 100%);
}
.chart_btn [data-popup=chart_id_03] {
  width: calc(248 / 960 * 100%);
  padding-top: calc(248 / 960 * 100%);
  margin: calc(1116 / 960 * 100%) 0 0 calc(662 / 960 * 100%);
}
.chart_btn [data-popup=chart_id_04] {
  width: calc(260 / 960 * 100%);
  padding-top: calc(260 / 960 * 100%);
  margin: calc(606 / 960 * 100%) 0 0 calc(26 / 960 * 100%);
}
.chart_btn [data-popup=chart_id_05] {
  width: calc(248 / 960 * 100%);
  padding-top: calc(248 / 960 * 100%);
  margin: calc(1116 / 960 * 100%) 0 0 calc(50 / 960 * 100%);
}
.chart_btn [data-popup=chart_id_06] {
  width: calc(248 / 960 * 100%);
  padding-top: calc(248 / 960 * 100%);
  margin: calc(1116 / 960 * 100%) 0 0 calc(356 / 960 * 100%);
}
.chart_btn [data-popup=chart_id_07] {
  width: calc(300 / 960 * 100%);
  padding-top: calc(300 / 960 * 100%);
  margin: calc(29 / 960 * 100%) 0 0 calc(29 / 960 * 100%);
}
.chart_note {
  text-align: center;
  margin-top: 4rem;
  font-weight: 700;
}

@media screen and (min-width: 768px) {
  .chart {
    padding: 16rem 0 8rem;
  }
  .chart_box {
    width: calc(864 / 1000 * 100%);
    margin: 0 auto;
  }
  .chart_btn li {
    cursor: pointer;
  }
}
/* =====================================================================
    popup
======================================================================*/
.popup_list {
  border-radius: 2rem;
  overflow: hidden;
}
.popup_list > li {
  padding-top: 5rem;
}
.popup_list > li figure {
  margin: 0 auto;
  width: 69.3333333333%;
}
.popup_list > li > p {
  padding: 5.3333333333% 6.6666666667%;
  background: #f98268;
}

.chart_name {
  text-align: center;
  margin: 3rem 0;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-size: 200%;
}
.chart_name dt {
  display: inline-block;
  margin-bottom: 0.2em;
  padding: 0 1em;
  padding-bottom: 0.2em;
  border-bottom: 1px dashed;
}
.chart_name dd {
  font-size: 0.66em;
}

@media screen and (min-width: 768px) {
  .popup_chart .popup_inner {
    max-width: 750px;
  }
  .popup_list > li figure {
    width: 48%;
  }
}/*# sourceMappingURL=chart.css.map */