@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図ページ
===================================================================== */
/* =====================================================================
    chart
======================================================================*/
.chart {
  padding: 18rem 0 0;
}
.chart h2 {
  margin: 0 auto 9rem;
  width: 32.5rem;
}

.chart_box {
  position: relative;
  margin: 0 auto;
}

.chart_btn {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn li {
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn .chart_id_01 {
  width: calc(360 / 1000 * 100%);
  padding-top: calc(325 / 1000 * 100%);
  margin: calc(435 / 1000 * 100%) 0 0 calc(85 / 1000 * 100%);
}
.chart_btn .chart_id_02 {
  width: calc(360 / 1000 * 100%);
  padding-top: calc(325 / 1000 * 100%);
  margin: calc(435 / 1000 * 100%) 0 0 calc(556 / 1000 * 100%);
}
.chart_btn .chart_id_03 {
  width: calc(360 / 1000 * 100%);
  padding-top: calc(325 / 1000 * 100%);
  margin: calc(884 / 1000 * 100%) 0 0 calc(85 / 1000 * 100%);
}
.chart_btn .chart_id_04 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(914 / 1000 * 100%) 0 0 calc(547 / 1000 * 100%);
}
.chart_btn .chart_id_05 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(65 / 1000 * 100%) 0 0 calc(251 / 1000 * 100%);
}
.chart_btn .chart_id_06 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(65 / 1000 * 100%) 0 0 calc(531 / 1000 * 100%);
}
.chart_btn .chart_id_07 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1289 / 1000 * 100%) 0 0 calc(290 / 1000 * 100%);
}
.chart_btn .chart_id_08 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1289 / 1000 * 100%) 0 0 calc(514 / 1000 * 100%);
}
.chart_btn .chart_id_10 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1289 / 1000 * 100%) 0 0 calc(737 / 1000 * 100%);
}
.chart_btn .chart_id_11 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1626 / 1000 * 100%) 0 0 calc(85 / 1000 * 100%);
}
.chart_btn .chart_id_13 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(277 / 1000 * 100%);
  margin: calc(1636 / 1000 * 100%) 0 0 calc(365 / 1000 * 100%);
}
.chart_btn .chart_id_14 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1287 / 1000 * 100%) 0 0 calc(67 / 1000 * 100%);
}

.chart_ep .chart_btn .chart_id_04 {
  margin: calc(914 / 1000 * 100%) 0 0 calc(557 / 1000 * 100%);
}
.chart_ep .chart_btn .chart_id_07 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1289 / 1000 * 100%) 0 0 calc(47 / 1000 * 100%);
}
.chart_ep .chart_btn .chart_id_08 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1289 / 1000 * 100%) 0 0 calc(277 / 1000 * 100%);
}
.chart_ep .chart_btn .chart_id_09 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1289 / 1000 * 100%) 0 0 calc(507 / 1000 * 100%);
}
.chart_ep .chart_btn .chart_id_10 {
  width: calc(217 / 1000 * 100%);
  padding-top: calc(287 / 1000 * 100%);
  margin: calc(1289 / 1000 * 100%) 0 0 calc(737 / 1000 * 100%);
}

.chart_note {
  margin-top: 3em;
  text-align: center;
}

.chart_ep_btn a {
  width: 200px;
  margin: 0 -10px 0 auto;
  padding-bottom: 1em;
}

@media screen and (min-width: 768px) {
  .chart {
    padding: 15rem 0 0;
  }
  .chart h2 {
    margin-bottom: 4rem;
  }
  .chart_box {
    width: calc(1000 / 1000 * 100%);
    margin: 0 auto;
  }
  .chart_btn li {
    cursor: pointer;
  }
  .chart_ep_btn a {
    width: 280px;
  }
}
/* =====================================================================
*    popup
* =================================================================== */
.popup_list li figure {
  position: relative;
  margin: 0 auto 3rem;
}
.popup_list li figure img {
  margin: 0 auto;
  width: calc(398 / 750 * 100%);
}
.popup_list li figure span {
  position: relative;
  bottom: -0.2em;
  right: -0.3em;
  text-align: center;
  display: block;
  width: 100%;
  font-family: "Homemade Apple", cursive;
  font-size: 5.4rem;
  color: #fff;
  white-space: pre;
  -webkit-transform: rotate(-8deg);
          transform: rotate(-8deg);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  opacity: 0.5;
}
.popup_list li p {
  margin-bottom: 3rem;
  padding: 5rem 3rem 0;
  font-size: 2.2rem;
  line-height: 2;
  border-top: 1px solid #c4b4ad;
}

.chart_name {
  margin-bottom: 6rem;
  padding: 0 10rem;
}
.chart_name dt {
  margin-bottom: 1.7rem;
  font-size: 3.4rem;
  letter-spacing: 0.5em;
}
.chart_name dt ruby rt {
  text-align: center;
  letter-spacing: 0.075em;
}
.chart_name dt small {
  margin-left: -1em;
  font-size: 55%;
  letter-spacing: 0.075em;
}
.chart_name dd {
  display: inline-block;
  padding: 0.2em 0.3em;
  font-size: 3.4rem;
  color: #883131;
  letter-spacing: 0.3em;
  background: linear-gradient(114deg, #dad4d4 0%, #d0cfd2 52%, #d2d4d9 100%);
}
.chart_name dd span {
  font-size: 0.5em;
  padding: 0.4em 0;
}

.comment {
  position: relative;
}
.comment::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #c4b4ad;
}
.comment dt {
  position: relative;
  top: 1.5em;
  width: 34rem;
  margin: 0 auto;
  padding: 1.2em 0;
  font-family: "DMSerifText-Regular", serif;
  font-size: 2rem;
  letter-spacing: 0.35em;
  text-align: center;
  color: #fff;
  background-color: #3c465e;
  border: 1px solid #3c465e;
  border-radius: 3em;
}
.comment dt::before {
  content: "";
  position: absolute;
  display: block;
  top: 35%;
  right: 0;
  width: 0.55em;
  height: 0.55em;
  margin-right: 3rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.comment dt.active::before {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
}
.comment dd {
  padding: 8rem 3rem 5rem;
  font-size: 2.2rem;
  line-height: 2;
  border-top: 1px solid #c4b4ad;
}

@media screen and (min-width: 768px) {
  .popup_list li figure {
    margin: 0 calc(40 / 1000 * 100%) 2rem 0;
    width: calc(360 / 1000 * 100%);
  }
  .popup_list li figure img {
    margin: 0;
    width: 100%;
  }
  .popup_list li figure span {
    left: -0.5em;
    right: auto;
    font-size: 5rem;
  }
  .popup_list li p {
    margin-bottom: 2rem;
    padding: 0;
    width: 100%;
    font-size: 1.6rem;
    border-top: 0;
  }
  .chart_head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
  }
  .chart_head_inner {
    width: calc(476 / 1000 * 100%);
  }
  .chart_name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    margin-bottom: 0;
    padding: 3rem 0;
  }
  .chart_name dt {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin: 0 1em 0 0;
    font-size: 2.6rem;
  }
  .chart_name dd {
    font-size: 2.4rem;
  }
  .comment {
    width: 100%;
  }
  .comment dt {
    padding: 1em 0;
    width: 32rem;
    font-size: 1.8rem;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    cursor: pointer;
  }
  .comment dt:hover {
    background-color: #cdd1d9;
    color: #3c465e;
  }
  .comment dt:hover::before {
    border-color: #3c465e;
  }
  .comment dd {
    padding: 7rem 6rem;
    font-size: 1.6rem;
  }
}/*# sourceMappingURL=chart.css.map */