@charset "UTF-8";
/* ********************************************************************
        chart
******************************************************************** */
#chart {
  padding: calc(108 / 750 * 100%) 0 calc(100 / 750 * 100%);
  background: #f8f8f8;
  overflow: hidden;
}
#chart .inner {
  max-width: calc(710 / 750 * 100%);
}
#chart h2 {
  width: calc(208/670 *100%);
  margin-bottom: calc(40/670 *100%);
}
#chart p.txt01 {
  font-size: 2.2rem;
  text-align: center;
  color: #ef8dae;
  padding-bottom: calc(20/670 *100%);
}

.cast_box {
  width: 100%;
  margin: 0 auto;
  background: #fff url(../images/chart/bg.png) no-repeat top center;
  background-size: contain;
  border-radius: 10px;
  padding-bottom: calc(50/710 *100%);
}
.cast_box:after {
  content: "";
  display: block;
}
.cast_box h3 {
  width: calc(425/710 *100%);
  margin: 0 auto;
  padding: calc(20/710 *100%) 0 0;
}
.cast_box .cast_top {
  overflow: hidden;
}
.cast_box .cast_top::after {
  content: "";
  display: block;
  background: url(../images/top/btn_more.png) no-repeat center/contain;
  width: calc(126/313 *100%);
  padding-top: calc(26/313 * 100%);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: calc(420/313*100%);
  z-index: 4;
  opacity: 0;
  transition: 0.5s ease;
}
.cast_box .cast_top::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #a0d9f6;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  margin-top: calc(420/313*100%);
  opacity: 0;
  transition: 0.5s ease;
}
.cast_box .cast_top:hover::before, .cast_box .cast_top:hover::after {
  margin-top: 0;
  opacity: .9;
}

.cast_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
.cast_list li {
  width: calc(210/710 *100%);
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
}
.cast_list li:nth-child(4) {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(170/710 *100%);
  margin-top: calc(380/710 *100%);
  margin-left: calc(40/710 *100%);
}
.cast_list li:nth-child(5) {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: calc(445/710 *100%);
  margin-left: calc(250/710 *100%);
}
.cast_list li:nth-child(6) {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(200/710 *100%);
  margin-top: calc(510/710 *100%);
  margin-left: calc(490/710 *100%);
}
.cast_list li:nth-child(-n+2) {
  width: calc(200/710 *100%);
  margin: 0 calc(10/710 *100%);
}

ul.soudannin {
  border: 1px solid #7ecaf3;
  border-radius: 10px;
  margin: calc(520/710 *100%) calc(10/710 *100%) 0;
  display: flex;
  justify-content: flex-start;
  padding: calc(20/710 *100%) calc(14/710 *100%) calc(40/710 *100%);
  position: relative;
}
ul.soudannin::after {
  content: "";
  display: block;
  width: calc(494/710 *100%);
  padding-top: calc(45/710 *100%);
  background: url(../images/chart/ttl_soudannin.png) no-repeat center/contain;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: calc(150/710 *100%);
  margin-left: calc(107/710 *100%);
}
ul.soudannin li:not(:last-child) {
  margin-right: calc(7/710 *100%);
}

@media all and (min-width: 768px) {
  #chart {
    padding: calc(80 / 1200 * 100%) 0 calc(100 / 1200 * 100%);
  }
  #chart .inner {
    max-width: 1200px;
  }
  #chart h2 {
    width: calc(190/1000 *100%);
    margin-bottom: calc(20/1000 *100%);
  }
  #chart p.txt01 {
    font-size: 1.6rem;
  }
}
/* =====================================================================
*    popup
* =================================================================== */
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
}

.popup_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(199, 232, 250, 0.8);
  cursor: pointer;
}

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

.popup_inner {
  width: calc(690 / 750 * 100%);
  max-width: 900px;
  margin: auto;
  padding: calc(45 / 750 * 100%) 0 0;
  align-self: center;
  z-index: 2;
}

.popup_close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 110;
  cursor: pointer;
  width: calc(80 / 750 * 100%);
  margin: calc(-45 / 750 * 100%) calc(-5 / 750 * 100%) 0 0;
  transition: 0.2s ease;
}
.popup_close:hover {
  border-radius: 50%;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
  margin: calc(-35 / 750 * 100%) calc(-5 / 750 * 100%) 0 0;
}
.popup_close::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
  background: url(../images/common/btn_close.png) no-repeat center/contain;
  margin: 0 auto;
  transition: 0.2s ease;
  border-radius: 50%;
  box-shadow: 0px 10px 21px 0px rgba(0, 0, 0, 0.13);
}

.popup_list {
  width: 100%;
  height: 100%;
}

.popup_details {
  display: none;
  overflow: hidden;
  padding: 0;
  background-color: #fff;
  border-radius: 20px;
}
.popup_details .cast_img {
  width: 100%;
}
.popup_details .cast_name {
  width: calc(480/690 *100%);
  margin: calc(-80/690 *100%) 0 0 calc(320/690 *100%);
}
.popup_details .cast_name .cast_name1,
.popup_details .cast_name .cast_name2 {
  background: #009f9a;
  display: inline-block;
  color: #fff;
  border-radius: 40px;
  line-height: 1.5;
  padding: calc(5/690 *100%) calc(70/690 *100%);
}
.popup_details .cast_name .cast_name1 {
  font-size: 3.4rem;
  margin-bottom: calc(14/690 *100%);
  letter-spacing: 0.1em;
}
.popup_details .cast_name .cast_name2 {
  font-size: 2.4rem;
}
.popup_details:nth-child(3) .cast_name {
  width: calc(570/690 *100%);
  margin-left: calc(120/690 *100%) !important;
  letter-spacing: 0;
  font-feature-settings: "palt";
}
.popup_details:nth-child(3) .cast_name .cast_name1 {
  font-size: 3rem;
}
.popup_details:nth-child(6) .cast_name {
  width: calc(570/690 *100%);
  margin-left: calc(240/690 *100%) !important;
  letter-spacing: 0;
  font-feature-settings: "palt";
}
.popup_details:nth-child(6) .cast_name .cast_name1 {
  font-size: 3rem;
  padding: calc(5/690 *100%) calc(60/690 *100%);
}
.popup_details .cast_txt {
  font-size: 2.4rem;
  line-height: 1.833;
  width: calc(600/690 *100%);
  margin: calc(50/690 *100%) 0 calc(60/690 *100%) calc(50/690 *100%);
  max-height: calc(260/480 *100%);
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE、Edge用 */
  scrollbar-width: none;
  /* Firefox用 */
}
.popup_details .cast_txt::-webkit-scrollbar {
  /* Chrome、Safari用 */
  display: none;
}
.popup_details .cast_comment {
  padding: calc(30/690 *100%) calc(45/690 *100%);
  font-size: 2.4rem;
  line-height: 1.833;
}
.popup_details .cast_comment h3 {
  width: calc(350/690 *100%);
  margin-bottom: 1.2em;
}

@media screen and (min-width: 768px) {
  .popup_inner {
    width: calc(900 / 1200 * 100%);
    max-width: 900px;
    margin: auto;
    padding: calc(80 / 1200 * 100%) 0 0;
    align-self: flex-start;
    z-index: 2;
  }

  .popup_close {
    width: calc(60 / 1000 * 100%);
    margin: calc(15 / 1000 * 100%) calc(-5 / 1000 * 100%) 0 0;
  }
  .popup_close:hover {
    margin: calc(25 / 1000 * 100%) calc(-5 / 1000 * 100%) 0 0;
  }

  .popup_details .cast_img {
    width: calc(424/900 *100%);
  }
  .popup_details .cast_name {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(480/900 *100%);
    margin: calc(40/900 *100%) 0 0 calc(367/900 *100%);
  }
  .popup_details .cast_name .cast_name1,
  .popup_details .cast_name .cast_name2 {
    line-height: 1.5;
    padding: calc(5/900 *100%) calc(70/900 *100%) calc(10/900 *100%);
  }
  .popup_details .cast_name .cast_name1 {
    font-size: 2.2rem;
    margin-bottom: calc(14/690 *100%);
    letter-spacing: 0.1em;
  }
  .popup_details .cast_name .cast_name2 {
    font-size: 1.6rem;
  }
  .popup_details:nth-child(3) .cast_name, .popup_details:nth-child(6) .cast_name {
    width: calc(480/900 *100%);
    margin-left: calc(367/900 *100%) !important;
  }
  .popup_details:nth-child(3) .cast_name .cast_name1, .popup_details:nth-child(6) .cast_name .cast_name1 {
    font-size: 2.2rem;
  }
  .popup_details:nth-child(6) .cast_name .cast_name1 br {
    display: none;
  }
  .popup_details .cast_txt {
    font-size: 1.6rem;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(480/900 *100%);
    margin: calc(150/900 *100%) 0 0 calc(367/900 *100%);
  }
  .popup_details .cast_comment {
    padding: calc(30/900 *100%);
    font-size: 1.6rem;
    line-height: 1.833;
  }
  .popup_details .cast_comment h3 {
    width: calc(350/900 *100%);
    margin-bottom: 1.2em;
  }
}
@media screen and (min-width: 1200px) {
  .popup_inner {
    padding: 80px 0 0;
  }
}