@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : chart.css
Description : 相関図
===================================================================== */
.chart {
  background: url(../images/common/bg_pattern.jpg) repeat-y center top/calc(1920 / 750 * 100%) auto;
  padding: calc(100 / 750 * 100%) 0 calc(120 / 750 * 100%);
}
.chart .sec_ttl {
  margin-bottom: calc(105 / 630 * 100%);
}

.chart_btn {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.chart_btn li {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
}
.chart_btn .chart_id_01 {
  width: calc(268 / 1024 * 100%);
  padding-top: calc(268 / 1024 * 100%);
  margin: calc(393 / 1024 * 100%) 0 0 calc(378 / 1024 * 100%);
}
.chart_btn .chart_id_02,
.chart_btn .chart_id_03 {
  width: calc(228 / 1024 * 100%);
  padding-top: calc(228 / 1024 * 100%);
}
.chart_btn .chart_id_04 {
  width: calc(245 / 1024 * 100%);
  padding-top: calc(245 / 1024 * 100%);
}
.chart_btn .chart_id_05,
.chart_btn .chart_id_10 {
  width: calc(231 / 1024 * 100%);
  padding-top: calc(231 / 1024 * 100%);
}
.chart_btn .chart_id_06,
.chart_btn .chart_id_07,
.chart_btn .chart_id_08 {
  width: calc(165 / 1024 * 100%);
  padding-top: calc(165 / 1024 * 100%);
}
.chart_btn .chart_id_09 {
  width: calc(240 / 1024 * 100%);
  padding-top: calc(240 / 1024 * 100%);
}
.chart_btn .chart_id_02 {
  margin: calc(551 / 1024 * 100%) 0 0 calc(145 / 1024 * 100%);
}
.chart_btn .chart_id_03 {
  margin: calc(551 / 1024 * 100%) 0 0 calc(657 / 1024 * 100%);
}
.chart_btn .chart_id_04 {
  margin: calc(79 / 1024 * 100%) 0 0 calc(721 / 1024 * 100%);
}
.chart_btn .chart_id_05 {
  margin: calc(827 / 1024 * 100%) 0 0 calc(29 / 1024 * 100%);
}
.chart_btn .chart_id_06 {
  margin: calc(41 / 1024 * 100%) 0 0 calc(526 / 1024 * 100%);
}
.chart_btn .chart_id_07 {
  margin: calc(41 / 1024 * 100%) 0 0 calc(20 / 1024 * 100%);
}
.chart_btn .chart_id_08 {
  margin: calc(348 / 1024 * 100%) 0 0 calc(20 / 1024 * 100%);
}
.chart_btn .chart_id_09 {
  margin: calc(814 / 1024 * 100%) 0 0 calc(767 / 1024 * 100%);
}
.chart_btn .chart_id_10 {
  margin: calc(827 / 1024 * 100%) 0 0 calc(397 / 1024 * 100%);
}

.chart_note {
  text-align: center;
  font-size: 2rem;
  color: #fff;
  margin-top: 4rem;
}

@media screen and (min-width: 768px) {
  .chart {
    background-size: calc(1920 / 1120 * 100%) auto;
    padding: calc(100 / 1120 * 100%) 0 calc(120 / 1120 * 100%);
  }
  .chart .sec_ttl {
    margin-bottom: calc(80 / 1024 * 100%);
  }

  .chart_box,
.chart_note {
    width: calc(1024 / 1024 * 100%);
    margin: 0 auto;
  }

  .chart_note {
    font-size: 1.6rem;
  }

  .chart_btn li {
    cursor: pointer;
  }
}
@media screen and (min-width: 1120px) {
  .chart {
    background-size: 100% auto;
    padding: 100px 0 120px;
  }
}
/* =====================================================================
*    popup
* =================================================================== */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
}

.popup_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(69, 81, 182, 0.9);
}

.popup_area {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.popup_inner {
  width: calc( 630 / 750 * 100%);
  margin: calc(150 / 750 * 100%) auto;
}

.popup_close {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/chart/btn_close.png) no-repeat center/contain;
  width: calc(60 / 630 * 100%);
  padding-top: calc(60 / 630 * 100%);
  margin: calc(-80 / 630 * 100%) 0 0 0;
  z-index: 110;
}

.popup_list {
  width: 100%;
  height: 100%;
}
.popup_list li {
  display: none;
  border-radius: 6rem;
  background-color: #fff;
  overflow: hidden;
}
.popup_list li figure {
  padding: calc(50 / 630 * 100%) 0 calc(60 / 630 * 100%);
}
.popup_list li figure img {
  display: block;
  width: calc(480 / 630 * 100%);
  margin: 0 auto calc(50 / 630 * 100%);
}
.popup_list li figure figcaption {
  width: calc(530 / 630 * 100%);
  margin: 0 auto;
}
.popup_list li figure figcaption .chart_name {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.2em dotted #ffbd87;
}
.popup_list li figure figcaption .chart_name dt {
  font-family: YakuHanJP, "Kaisei Opti", serif;
  font-size: 3.6rem;
  color: #ee00a8;
}
.popup_list li figure figcaption .chart_name dt ruby rt {
  text-align: center;
  -webkit-transform: translateY(-0.5rem);
          transform: translateY(-0.5rem);
  font-size: 1.6rem;
  letter-spacing: 0.15em;
}
.popup_list li figure figcaption .chart_name dt .age {
  font-size: 2.2rem;
  margin-left: 0.5rem;
}
.popup_list li figure figcaption .chart_name dd {
  font-size: 2.8rem;
  color: #ff6d2d;
}
.popup_list li figure figcaption .chart_txt {
  line-height: 1.833;
}
.popup_list li figure figcaption .chart_txt span {
  font-size: 2.2rem;
  display: block;
  color: #ee00a8;
  margin-bottom: 3rem;
}
.popup_list li figure figcaption .chart_txt span::before {
  content: "";
  display: inline-block;
  background: url(../images/chart/icon_star.png) no-repeat center/contain;
  margin-right: 0.5rem;
  width: 1.7rem;
  height: 2rem;
}
.popup_list li .chart_comment {
  background-color: #fffde7;
  padding: calc(60 / 630 * 100%) calc(50 / 630 * 100%);
}
.popup_list li .chart_comment h3 {
  text-align: center;
  font-family: YakuHanJP, "Kaisei Opti", serif;
  color: #ee00a8;
  font-size: 3.2rem;
  letter-spacing: 0.1em;
  margin: 0 auto 5rem;
}
.popup_list li .chart_comment h3 span {
  display: inline-block;
  padding: 0 5rem;
}
.popup_list li .chart_comment h3 span::before, .popup_list li .chart_comment h3 span::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  width: calc(29 / 750 * 100vw);
  background: url(../images/common/img_deco4.png) no-repeat center/contain;
}
.popup_list li .chart_comment h3 span::before {
  left: 0;
}
.popup_list li .chart_comment h3 span::after {
  right: 0;
}
.popup_list li .chart_comment dl {
  line-height: 1.833;
  margin-bottom: 4rem;
}
.popup_list li .chart_comment dl dt {
  color: #ee00a8;
  font-weight: 700;
}

/*FireFox対策*/
@-moz-document url-prefix() {
  .chart_name1 rt {
    margin-bottom: -0.5rem;
  }
}
@media screen and (min-width: 768px) {
  .popup_bg {
    cursor: pointer;
  }

  .popup_area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .popup_inner {
    width: calc( 1024 / 1120 * 100%);
    max-width: 1024px;
    margin: auto;
    padding: calc(100 / 1120 * 100%) 0 0;
    -ms-flex-item-align: start;
        align-self: flex-start;
  }

  .popup_close {
    cursor: pointer;
    width: calc(60 / 1024 * 100%);
    padding-top: calc(60 / 1024 * 100%);
    margin: calc(20 / 1024 * 100%) 0 0 0;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }
  .popup_close:hover {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }

  .popup_list li figure {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: calc(60 / 1024 * 100%) 0;
  }
  .popup_list li figure img {
    width: calc(288 / 1024 * 100%);
    margin: 0 calc(105 / 1024 * 100%) 0 0;
    height: 100%;
  }
  .popup_list li figure figcaption {
    width: calc(448 / 1024 * 100%);
    margin: 0;
  }
  .popup_list li figure figcaption .chart_name {
    margin-bottom: 1.5rem;
    padding-bottom: 2rem;
    border-width: 0.15em;
  }
  .popup_list li figure figcaption .chart_name dt {
    font-size: 3.2rem;
  }
  .popup_list li figure figcaption .chart_name dt .age {
    font-size: 1.8rem;
  }
  .popup_list li figure figcaption .chart_name dt ruby rt {
    font-size: 1.2rem;
  }
  .popup_list li figure figcaption .chart_name dd {
    font-size: 2.4rem;
  }
  .popup_list li figure figcaption .chart_txt span {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }
  .popup_list li figure figcaption .chart_txt span::before {
    width: 1.3rem;
    height: 1.3rem;
  }
  .popup_list li .chart_comment {
    padding: calc(42 / 1024 * 100%) calc(80 / 1024 * 100%);
  }
  .popup_list li .chart_comment h3 {
    text-align: left;
    margin-bottom: 3rem;
  }
  .popup_list li .chart_comment h3 span::before, .popup_list li .chart_comment h3 span::after {
    width: calc(29 / 1120 * 100vw);
    max-width: 29px;
  }
  .popup_list li .chart_comment dl {
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1120px) {
  .popup_inner {
    padding: 100px 0 0;
  }
}
/*# sourceMappingURL=chart.css.map */