@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : chart.css
Description : 相関図
===================================================================== */
/* ========================================================
    chart
======================================================== */
.chart {
  position: relative;
  width: 100%;
  padding: 12rem 0 0 0;
}
@media screen and (min-width: 768px) {
  .chart {
    padding: 9rem 0 0 0;
  }
}
.chart_column {
  position: relative;
  width: 100%;
}
.chart_ttl {
  position: relative;
  width: 37.7rem;
  margin: 0 auto;
}
.chart_wrap {
  position: relative;
  width: 100%;
  margin-top: 8rem;
}
@media screen and (min-width: 768px) {
  .chart_wrap {
    margin-top: 6rem;
  }
}
.chart_item {
  position: relative;
  width: 115.3846153846%;
  margin: 0 -7.6923076923%;
}
@media screen and (min-width: 768px) {
  .chart_item {
    width: 100%;
    margin: 0;
  }
}
.chart_img {
  position: relative;
  width: 100%;
}
.chart_list {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.chart_list > li {
  position: absolute;
  display: block;
  /*background-color: rgba($color-red, 0.3);*/
  cursor: pointer;
}
.chart_list > li[data-popup=chart_id_01] {
  left: 38.6%;
  top: 3.0283505155%;
  width: 22.4%;
  height: 9.6327319588%;
}
.chart_list > li[data-popup=chart_id_02] {
  left: 22.7%;
  top: 32.6030927835%;
  width: 22.4%;
  height: 9.6327319588%;
}
.chart_list > li[data-popup=chart_id_03] {
  left: 53.7%;
  top: 32.6030927835%;
  width: 22.4%;
  height: 9.6327319588%;
}
.chart_list > li[data-popup=chart_id_04] {
  left: 3.7%;
  top: 21.7139175258%;
  width: 12.8%;
  height: 5.1546391753%;
}
.chart_list > li[data-popup=chart_id_05] {
  left: 25.5%;
  top: 21.7461340206%;
  width: 12.8%;
  height: 5.1546391753%;
}
.chart_list > li[data-popup=chart_id_06] {
  left: 80.3%;
  top: 25.418814433%;
  width: 18%;
  height: 7.7319587629%;
}
.chart_list > li[data-popup=chart_id_07] {
  left: 1.4%;
  top: 33.6018041237%;
  width: 18%;
  height: 7.7319587629%;
}
.chart_list > li[data-popup=chart_id_08] {
  left: 2.3%;
  top: 44.7487113402%;
  width: 15.5%;
  height: 6.4432989691%;
}
.chart_list > li[data-popup=chart_id_09] {
  left: 80.9%;
  top: 41.3015463918%;
  width: 15.5%;
  height: 6.4432989691%;
}
.chart_list > li[data-popup=chart_id_10] {
  left: 44.1%;
  top: 51.5141752577%;
  width: 15.5%;
  height: 6.4432989691%;
}
.chart_list > li[data-popup=chart_id_11] {
  left: 62.3%;
  top: 51.4819587629%;
  width: 15.5%;
  height: 6.4432989691%;
}
.chart_list > li[data-popup=chart_id_12] {
  left: 80.9%;
  top: 51.4819587629%;
  width: 15.5%;
  height: 6.4432989691%;
}
.chart_list > li[data-popup=chart_id_13] {
  left: 44.1%;
  top: 61.9845360825%;
  width: 15.5%;
  height: 6.4432989691%;
}
.chart_list > li[data-popup=chart_id_14] {
  left: 62.3%;
  top: 61.9523195876%;
  width: 15.5%;
  height: 6.4432989691%;
}
.chart_list > li[data-popup=chart_id_15] {
  left: 24.4%;
  top: 49.4845360825%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_16] {
  left: 7.8%;
  top: 57.8608247423%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_17] {
  left: 2.7%;
  top: 68.5889175258%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_18] {
  left: 21.3%;
  top: 68.5889175258%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_19] {
  left: 81.4%;
  top: 78.3182989691%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_20] {
  left: 21.3%;
  top: 80.5090206186%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_21] {
  left: 44.3%;
  top: 78.3182989691%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_22] {
  left: 62.8%;
  top: 78.3182989691%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_23] {
  left: 44.3%;
  top: 89.3363402062%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_24] {
  left: 62.8%;
  top: 89.3363402062%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_list > li[data-popup=chart_id_25] {
  left: 81.4%;
  top: 89.3363402062%;
  width: 15%;
  height: 6.5077319588%;
}
.chart_text {
  position: relative;
  width: 100%;
  margin-top: 4.8rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .chart_text {
    margin-top: 3.6rem;
  }
}
.chart_text > p {
  width: 100%;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .chart_text > p {
    font-size: 2rem;
  }
}
.chart_btn {
  position: relative;
  width: 92.3076923077%;
  aspect-ratio: 600/80;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .chart_btn {
    width: 45%;
    aspect-ratio: 450/70;
    margin: 6rem auto 0 auto;
  }
}
.chart_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  .chart_btn > a:hover {
    transform: translateY(-1rem);
    opacity: 1;
  }
}
.chart_btn > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/common/common_bg12_sp.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .chart_btn > a::before {
    background-image: url(../images/common/common_bg12_pc.jpg);
  }
}
.chart_btn > a::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(100% - 0.4rem);
  height: calc(100% - 0.4rem);
  background-color: #000000;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.chart_btn > a > span {
  display: block;
  color: #ffffff;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-0.07em);
}
@media screen and (min-width: 768px) {
  .chart_btn > a > span {
    font-size: 2.2rem;
  }
}
.chart_cast {
  position: relative;
  width: 100%;
  padding: 8rem 5rem;
}
@media screen and (min-width: 768px) {
  .chart_cast {
    padding: 6rem 5rem;
  }
}
.chart_cast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../images/common/common_bg11_sp.jpg);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
  z-index: -2;
}
@media screen and (min-width: 768px) {
  .chart_cast::before {
    background-image: url(../images/common/common_bg11_pc.jpg);
  }
}
.chart_cast_item {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}
.chart_cast_img {
  position: relative;
  width: 40.9090909091%;
  margin: 0 auto;
  filter: drop-shadow(0.4em 0.4em 0.2em rgba(0, 0, 0, 0.1));
}
@media screen and (min-width: 768px) {
  .chart_cast_img {
    width: 34.6153846154%;
  }
}
.chart_cast_name {
  position: relative;
  width: 100%;
  margin-top: 6rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_name {
    margin-top: 4.5rem;
  }
}
.chart_cast_name > small {
  display: block;
  font-family: "Hina Mincho", serif;
  font-size: 2.6rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .chart_cast_name > small {
    font-size: 1.6rem;
  }
}
.chart_cast_name > em {
  display: inline-block;
  margin: 0.2em 0.5em 0 0;
  font-family: "Hina Mincho", serif;
  font-size: 5rem;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .chart_cast_name > em {
    font-size: 4rem;
  }
}
.chart_cast_name > em:first-child {
  margin-top: 0;
}
.chart_cast_name > em > small {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 70%;
  line-height: 1;
}
.chart_cast_name > span {
  display: inline-block;
  margin-top: 0.3em;
  padding: 0.15em 0.6em;
  font-family: "Hina Mincho", serif;
  font-size: 3.4rem;
  line-height: 1;
  background-image: url(../images/common/common_bg04.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .chart_cast_name > span {
    font-size: 2.4rem;
  }
}
.chart_cast_text {
  position: relative;
  width: 100%;
  margin-top: 3.2rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_text {
    margin-top: 2.4rem;
  }
}
.chart_cast_text > p {
  width: 100%;
  margin-top: 1em;
}
.chart_cast_text > p:first-child {
  margin-top: 0;
}
.chart_cast_comment {
  position: relative;
  width: 100%;
  margin-top: 8rem;
  padding-top: 8rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_comment {
    margin-top: 6rem;
    padding-top: 6rem;
  }
}
.chart_cast_comment::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  display: block;
  width: 118.1818181818%;
  height: calc(100% + 8rem);
  background-color: #000000;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .chart_cast_comment::before {
    width: 115.3846153846%;
    height: calc(100% + 6rem);
  }
}
.chart_cast_comment > dt {
  width: 48rem;
  margin: -7.2rem auto -4.8rem auto;
}
@media screen and (min-width: 768px) {
  .chart_cast_comment > dt {
    width: 36rem;
    margin: -5.4rem auto -3.6rem auto;
  }
}
.chart_cast_comment > dd {
  width: 100%;
  margin-top: 4.8rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_comment > dd {
    margin-top: 3.6rem;
  }
}
.chart_cast_comment > dd > p {
  width: 100%;
  color: #ffffff;
  margin-top: 1em;
}
.chart_cast_comment > dd > p:first-child {
  margin-top: 0;
}
.chart_cast_comment > dd > p:first-child > em {
  padding-top: 0;
}
.chart_cast_comment > dd > p > em {
  display: block;
  padding: 0.5em 0;
  font-weight: 700;
  text-align: center;
}

.popup.popup_chart .popup_inner {
  max-width: 75rem;
}/*# sourceMappingURL=chart.css.map */