@charset "UTF-8";
/* CSS INFORMATION =====================================================
File name : chart.css
Description : 相関図
===================================================================== */
/* ========================================================
    chart
======================================================== */
.chart {
  position: relative;
  width: 100%;
  padding: 12rem 0 16rem 0;
}
@media screen and (min-width: 768px) {
  .chart {
    padding: 9rem 0 12rem 0;
  }
}
.chart_ttl {
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
}
.chart_ttl > h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  width: auto;
  margin: 7.6rem 0;
}
@media screen and (min-width: 768px) {
  .chart_ttl > h2 {
    margin: 7.2rem 0;
  }
}
.chart_ttl > h2::before {
  content: "";
  position: absolute;
  left: 45%;
  top: calc(50% - 13.9rem);
  display: block;
  width: 20.1rem;
  aspect-ratio: 201/278;
  background-image: url(../images/chart/chart_bg01.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
@media screen and (min-width: 768px) {
  .chart_ttl > h2::before {
    top: calc(50% - 12.4rem);
    width: 17.9rem;
  }
}
.chart_ttl > h2 > em {
  position: relative;
  color: #000000;
  font-family: "Goudy Bookletter 1911", serif;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) {
  .chart_ttl > h2 > em {
    font-size: 6rem;
  }
}
.chart_ttl > h2 > span {
  position: relative;
  color: #060203;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .chart_ttl > h2 > span {
    font-size: 2rem;
  }
}
.chart_ttl > h2 > span > span {
  font-family: "Shippori Mincho", serif;
}
.chart_column {
  position: relative;
  width: 93.8461538462%;
  margin: 8rem auto 0 auto;
}
@media screen and (min-width: 768px) {
  .chart_column {
    width: 90%;
    margin: 6rem auto 0 auto;
  }
}
.chart_btn {
  position: relative;
  width: 75.4098360656%;
  aspect-ratio: 460/80;
  margin: 0 0 6rem auto;
}
@media screen and (min-width: 768px) {
  .chart_btn {
    width: 380px;
    aspect-ratio: 380/70;
    margin: 0 0 4.5rem auto;
  }
}
.chart_btn > a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  border-radius: 4rem;
  border: 1px solid #cb002e;
  background-color: transparent;
}
@media screen and (min-width: 768px) {
  .chart_btn > a:hover {
    background-color: rgba(203, 0, 46, 0.1);
    opacity: 1;
  }
}
.chart_btn > a::before {
  content: "";
  position: absolute;
  left: inherit;
  right: 2.5rem;
  top: 50%;
  display: block;
  width: 2.5rem;
  aspect-ratio: 25/15;
  -webkit-mask-image: url(../images/common/arrow_bg01.svg);
          mask-image: url(../images/common/arrow_bg01.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  background-color: #cb002e;
  transform: translateY(-50%) rotate(-90deg);
}
@media screen and (min-width: 768px) {
  .chart_btn > a::before {
    width: 1.6rem;
  }
}
.chart_btn > a > span {
  color: #cb002e;
  font-family: "Shippori Mincho", serif;
  font-size: 3.2rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .chart_btn > a > span {
    font-size: 2.4rem;
  }
}
.chart_wrap {
  position: relative;
  width: 100%;
}
.chart_img {
  position: relative;
  width: 100%;
}
.chart_list {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.chart_list.img01 > li {
  position: absolute;
  display: block;
  cursor: pointer;
}
.chart_list.img01 > li[data-popup=chart_id_01] {
  left: 34%;
  top: 23.6875%;
  width: 32%;
  height: 25.375%;
}
.chart_list.img01 > li[data-popup=chart_id_02] {
  left: 0.2%;
  top: 38.625%;
  width: 30%;
  height: 22.9375%;
}
.chart_list.img01 > li[data-popup=chart_id_03] {
  left: 69.9%;
  top: 0.5%;
  width: 30%;
  height: 22.9375%;
}
.chart_list.img01 > li[data-popup=chart_id_04] {
  left: 71.7%;
  top: 25.0625%;
  width: 28.2%;
  height: 22.75%;
}
.chart_list.img01 > li[data-popup=chart_id_05] {
  left: 73.3%;
  top: 52.125%;
  width: 25.3%;
  height: 19.875%;
}
.chart_list.img01 > li[data-popup=chart_id_06] {
  left: 0.4%;
  top: 0.5625%;
  width: 24.7%;
  height: 19.375%;
}
.chart_list.img01 > li[data-popup=chart_id_07] {
  left: 25.4%;
  top: 0.5%;
  width: 24.7%;
  height: 19.375%;
}
.chart_list.img01 > li[data-popup=chart_id_08] {
  left: 52.6%;
  top: 63.125%;
  width: 20.1%;
  height: 17.9375%;
}
.chart_list.img01 > li[data-popup=chart_id_09] {
  left: 43.9%;
  top: 63%;
  width: 20.1%;
  height: 17.9375%;
}
.chart_list.img01 > li[data-popup=chart_id_10] {
  left: 21.1%;
  top: 63%;
  width: 20.1%;
  height: 17.9375%;
}
.chart_list.img01 > li[data-popup=chart_id_11] {
  left: 2.2%;
  top: 81.5%;
  width: 20.1%;
  height: 17.9375%;
}
.chart_list.img02 > li {
  position: absolute;
  display: block;
  cursor: pointer;
}
.chart_list.img02 > li[data-popup=chart_id_01] {
  left: 31%;
  top: 30.2424242424%;
  width: 32%;
  height: 24.6060606061%;
}
.chart_list.img02 > li[data-popup=chart_id_02] {
  left: 0.4%;
  top: 47.5%;
  width: 27.1%;
  height: 22.2424242424%;
}
.chart_list.img02 > li[data-popup=chart_id_03] {
  left: 25.7%;
  top: 1.7%;
  width: 27.1%;
  height: 22.2424242424%;
}
.chart_list.img02 > li[data-popup=chart_id_04] {
  left: 69%;
  top: 31.5757575758%;
  width: 27.1%;
  height: 22.0606060606%;
}
.chart_list.img02 > li[data-popup=chart_id_05] {
  left: 67.8%;
  top: 56.818182%;
  width: 24%;
  height: 19.2727272727%;
}
.chart_list.img02 > li[data-popup=chart_id_06] {
  left: 1.1%;
  top: 5.030303%;
  width: 23.1%;
  height: 18.7878787879%;
}
.chart_list.img02 > li[data-popup=chart_id_07] {
  left: 76.3%;
  top: 81.2%;
  width: 23.1%;
  height: 18.7878787879%;
}
.chart_list.img02 > li[data-popup=chart_id_08] {
  left: 49.6%;
  top: 72%;
  width: 20.1%;
  height: 17.3939393939%;
}
.chart_list.img02 > li[data-popup=chart_id_09] {
  left: 31%;
  top: 72%;
  width: 20.1%;
  height: 17.3939393939%;
}
.chart_list.img02 > li[data-popup=chart_id_10] {
  left: 10%;
  top: 72%;
  width: 20.1%;
  height: 17.3939393939%;
}
.chart_list.img02 > li[data-popup=chart_id_11] {
  left: 2.2%;
  top: 27.0909090909%;
  width: 20.1%;
  height: 17.3939393939%;
}
.chart_list.img02 > li[data-popup=chart_id_12] {
  left: 55%;
  top: 8.4242424242%;
  width: 20.1%;
  height: 17.3939393939%;
}
.chart_list.img02 > li[data-popup=chart_id_13] {
  left: 77%;
  top: 8.4848484848%;
  width: 20.1%;
  height: 17.3939393939%;
}
.chart_text {
  position: relative;
  width: 100%;
  margin-top: 4rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .chart_text {
    margin-top: 3rem;
  }
}
.chart_text > span {
  font-weight: 700;
}
.chart_cast {
  position: relative;
  width: 100%;
  padding: 5rem;
  border-radius: 2rem;
  background-color: #d5e4eb;
}
.chart_cast_item {
  position: relative;
  width: 100%;
}
.chart_cast_wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.chart_cast_img {
  position: relative;
  width: 84.6153846154%;
  margin: 0 auto;
}
.chart_cast_img > figure {
  position: relative;
  width: 67.0909090909%;
  margin: 0 auto;
}
.chart_cast_img > p {
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  padding-right: 4rem;
  text-align: right;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  .chart_cast_img > p {
    right: 4rem;
    padding-right: 2.5rem;
  }
}
.chart_cast_img > p::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  width: 1.8rem;
  aspect-ratio: 18/66;
  background-image: url(../images/top/cast_bg02.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  .chart_cast_img > p::before {
    width: 1rem;
  }
}
.chart_cast_img > p > span {
  display: block;
  color: #cb002e;
  font-family: "Goudy Bookletter 1911", serif;
  font-size: 2rem;
  line-height: 1.4;
}
@media screen and (min-width: 768px) {
  .chart_cast_img > p > span {
    font-size: 1.8rem;
  }
}
.chart_cast_name {
  position: relative;
  width: 100%;
  margin-top: 2rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_name {
    margin-top: 1.5rem;
  }
}
.chart_cast_name_01 {
  position: relative;
  text-align: center;
}
.chart_cast_name_01 > span {
  font-size: 2.2rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .chart_cast_name_01 > span {
    font-size: 1.6rem;
  }
}
.chart_cast_name_02 {
  position: relative;
  text-align: center;
}
.chart_cast_name_02 > span {
  font-family: "Shippori Mincho", serif;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  .chart_cast_name_02 > span {
    font-size: 4rem;
  }
}
.chart_cast_name_02 > span > small {
  font-size: 70%;
}
.chart_cast_name_03 {
  position: relative;
  text-align: center;
}
.chart_cast_name_03 > span {
  color: #cb002e;
  font-family: "Shippori Mincho", serif;
  font-size: 4rem;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .chart_cast_name_03 > span {
    font-size: 2.6rem;
  }
}
.chart_cast_name_03 > span > small {
  font-size: 70%;
}
.chart_cast_text {
  position: relative;
  width: 100%;
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_text {
    margin-top: 3rem;
  }
}
.chart_cast_text > p {
  font-weight: 500;
}
.chart_cast_comment {
  position: relative;
  width: 100%;
  margin-top: 4rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_comment {
    margin-top: 3rem;
  }
}
.chart_cast_comment > dt {
  width: 100%;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid #cb002e;
}
.chart_cast_comment > dt > span {
  color: #cb002e;
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
}
.chart_cast_comment > dd {
  width: 100%;
  margin-top: 3rem;
}
@media screen and (min-width: 768px) {
  .chart_cast_comment > dd {
    margin-top: 2.25rem;
  }
}
.chart_cast_comment > dd > p {
  font-weight: 500;
}
.chart_cast_comment > dd > p > strong {
  display: block;
  margin-bottom: 1em;
  color: #cb002e;
}

.popup_chart .popup_inner {
  max-width: 750px;
}

main:has(+ .footer .pagetop:first-child) section.chart {
  padding-bottom: 34rem;
}
@media screen and (min-width: 768px) {
  main:has(+ .footer .pagetop:first-child) section.chart {
    padding-bottom: 18rem;
  }
}/*# sourceMappingURL=chart.css.map */