@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : subpage.css
Description : 下層
===================================================================== */
/* =====================================================================
    共通
======================================================================*/
.main > section {
  padding: 12rem 0;
}
@media screen and (min-width: 768px) {
  .main > section {
    padding: 10rem 0;
  }
}
.main > section:last-child {
  padding-bottom: 24rem;
}

/* =====================================================================
    submv
======================================================================*/
.submv {
  padding: 2.5rem 0;
}
@media screen and (min-width: 768px) {
  .submv {
    padding: 2rem 0;
  }
}
.submv > .inner::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(360 / 640 * 100%);
  padding-top: calc(270 / 640 * 100%);
  background: url(../images/common/img_submv.jpg) no-repeat center/contain;
}
@media screen and (min-width: 768px) {
  .submv > .inner::before {
    bottom: 0;
    right: auto;
    width: calc(339 / 1080 * 100%);
    padding-top: calc(240 / 1080 * 100%);
  }
}
.submv h1 {
  position: relative;
  margin: 0 auto;
  width: calc(536 / 640 * 100%);
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .submv h1 {
    margin: 0 0 0 calc(480 / 1080 * 100%);
    padding: 6rem 0;
    width: calc(520 / 1080 * 100%);
  }
  .submv h1 a {
    -webkit-transition-property: opacity;
    transition-property: opacity;
  }
  .submv h1 a:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0.7;
  }
}
.submv-date {
  margin: 1.5rem 0 0 -2.65625%;
  width: calc(674 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .submv-date {
    margin: 0 0 0 calc(400 / 1080 * 100%);
    width: calc(674 / 1080 * 100%);
  }
}

/* =====================================================================
    sns-share
======================================================================*/
.sns-share {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 12rem;
  padding: 4rem 0;
  -o-border-image: linear-gradient(90deg, #203080 0%, #4060ff 100%) 1/1px 0 1px 0;
     border-image: -webkit-gradient(linear, left top, right top, from(#203080), to(#4060ff)) 1/1px 0 1px 0;
     border-image: linear-gradient(90deg, #203080 0%, #4060ff 100%) 1/1px 0 1px 0;
}
@media screen and (min-width: 768px) {
  .sns-share {
    padding: 6rem 0;
  }
}
.sns-share p {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 86%;
  line-height: 1.5;
  letter-spacing: 0.16em;
}
@media screen and (min-width: 768px) {
  .sns-share p {
    font-size: 107%;
  }
}
.sns-share ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 1em;
}
.sns-share ul li {
  margin: 0 1.5em;
  width: 1.5em;
  height: 1.5em;
}
.sns-share ul li:last-child {
  margin-right: 0;
}
.sns-share ul li a,
.sns-share ul li svg {
  width: 100%;
  height: 100%;
}
.sns-share ul li a {
  display: block;
}
.sns-share ul li a::before {
  background-color: #ffffff;
}
.sns-share ul li a svg {
  fill: #000000;
}

/* =====================================================================
    topics
======================================================================*/
/*  一覧
-----------------------------------------*/
.topics-list {
  margin-left: -5.625%;
  width: calc(712 / 640 * 100%);
  font-size: 107%;
}
@media screen and (min-width: 768px) {
  .topics-list {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.topics-list .article-list-date {
  margin-bottom: 0.5em;
}
.topics-list h4 {
  margin-bottom: 0;
  font-family: "Noto Serif JP", serif;
}
.topics-list figure {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .topics-list li {
    width: calc(352 / 1080 * 100%);
    margin: 0 calc(12 / 1080 * 100%) 4rem 0;
  }
  .topics-list li:nth-child(3n+1), .topics-list li:first-child {
    margin-right: 0;
  }
}
.topics-list li a {
  position: relative;
  padding: 5.8rem 5.0561797753%;
}
@media screen and (min-width: 768px) {
  .topics-list li a {
    padding: 0 6.8181818182% 4.5rem;
  }
}
.topics-list li a::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .topics-list li a::before {
    height: calc(100% - 8.5rem);
  }
}
.topics-list li a::after {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(640 / 712 * 100%);
  height: 1px;
  -o-border-image: linear-gradient(90deg, #203080 0%, #4060ff 100%) 1/0 0 1px 0;
     border-image: -webkit-gradient(linear, left top, right top, from(#203080), to(#4060ff)) 1/0 0 1px 0;
     border-image: linear-gradient(90deg, #203080 0%, #4060ff 100%) 1/0 0 1px 0;
}
@media screen and (min-width: 768px) {
  .topics-list li a::after {
    width: 85.8757062147%;
  }
}
@media screen and (min-width: 768px) {
  .topics-list li:first-child {
    width: 100%;
  }
  .topics-list li:first-child .article-list-img {
    margin-left: auto;
    margin-right: auto;
    width: calc(800 / 1080 * 100%);
  }
}
.topics-list li:first-child a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 0;
}
@media screen and (min-width: 768px) {
  .topics-list li:first-child a {
    padding: 0 calc(40 / 1080 * 100%) 5.5rem;
  }
}
.topics-list li:first-child a::before {
  height: calc(100% - 18rem);
}
@media screen and (min-width: 768px) {
  .topics-list li:first-child a::before {
    height: calc(100% - 22.5rem);
  }
}
@media screen and (min-width: 768px) {
  .topics-list li:first-child a::after {
    width: calc(1000 / 1080 * 100%);
  }
}
@media screen and (max-width: 767px) {
  .topics-list li:not(:last-child) {
    margin-bottom: 4rem;
  }
  .topics-list li:not(:first-child) .article-list-img {
    margin-bottom: 0;
  }
  .topics-list li:not(:first-child) a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .topics-list li:not(:first-child) a .article-list-img {
    width: calc(280 / 640 * 100%);
  }
  .topics-list li:not(:first-child) a .article-list-text {
    width: calc(320 / 640 * 100%);
  }
}

/*  詳細
-----------------------------------------*/
.topics-article {
  position: relative;
  margin-left: -5.625%;
  width: calc(712 / 640 * 100%);
  padding: 5.6rem calc(36 / 640 * 100%) 16rem;
  background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (min-width: 768px) {
  .topics-article {
    margin-left: 0;
    padding: 8rem calc(40 / 1080 * 100%) 16rem;
    width: 100%;
  }
}
.topics-article::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(640 / 712 * 100%);
  height: 1px;
  -o-border-image: linear-gradient(90deg, #203080 0%, #4060ff 100%) 1/1px 0 0 0;
     border-image: -webkit-gradient(linear, left top, right top, from(#203080), to(#4060ff)) 1/1px 0 0 0;
     border-image: linear-gradient(90deg, #203080 0%, #4060ff 100%) 1/1px 0 0 0;
}
@media screen and (min-width: 768px) {
  .topics-article::after {
    width: calc(1000 / 1080 * 100%);
  }
}
.topics-article-date {
  margin-bottom: 1em;
  font-size: 107%;
}
.topics-article header {
  margin-bottom: 1.2em;
}
.topics-article header h3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 142%;
  line-height: 1.75;
}
@media screen and (min-width: 768px) {
  .topics-article header h3 {
    padding: 0 4rem;
  }
}
@media screen and (min-width: 768px) {
  .topics-article-contents {
    padding: 0 4rem;
  }
}
.topics-article-contents > * {
  position: relative;
  margin-bottom: 7rem;
  line-height: 1.777;
  z-index: 1;
}
.topics-article-contents > *:last-child {
  margin-bottom: 0 !important;
}
.topics-article-contents h4 {
  padding-left: 1em;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 125%;
  line-height: 1.687;
  color: #3048bf;
  border-left: 0.25em solid;
}
.topics-article-contents h5 {
  margin-bottom: 1em;
  font-size: 110%;
  color: #3048bf;
}
.topics-article-contents h5 span {
  font-size: 90%;
}
.topics-article-contents strong span {
  font-size: 120%;
  color: #3048bf;
  font-weight: bold;
  padding: 0 0.5em;
}
.topics-article-contents span {
  color: #3048bf;
}

@media screen and (min-width: 768px) {
  .topics-article-contents figure {
    margin-left: auto;
    margin-right: auto;
    width: 68%;
  }
}
.topics-article-contents figure figcaption {
  padding-top: 0.5em;
  font-size: 90%;
}
.topics-article-contents p strong {
  font-weight: 500;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, #f2ff00), color-stop(70%, transparent));
  background: linear-gradient(180deg, transparent 0% 30%, #f2ff00 30% 70%, transparent 70% 100%);
}
.topics-btn {
  margin-top: -1.5em;
}
.topics-btn a {
  text-align: right;
}
.topics-btn a::after {
  top: calc(50% + 0.2em);
  right: auto;
  left: 1em;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

/* =====================================================================
    chart
======================================================================*/
.chart::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 16, 26, 0.8);
  mix-blend-mode: hard-light;
  z-index: -1;
}
.chart-box {
  position: relative;
  margin: 0 calc(50% - 50vw);
}
@media screen and (min-width: 768px) {
  .chart-box {
    margin: 0 auto;
    max-width: 1000px;
  }
}
.chart-img {
  position: relative;
  z-index: 1;
}
.chart-note {
  text-align: center;
  margin-top: 3em;
  color: #ffffff;
}
.chart-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.chart-btn li {
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (min-width: 768px) {
  .chart-btn li {
    cursor: pointer;
  }
}
.chart-btn [data-popup=chart_id_01] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(60 / 1000 * 100%) 0 0 calc(190 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_02] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(60 / 1000 * 100%) 0 0 calc(570 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_03] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(860 / 1000 * 100%) 0 0 calc(70 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_04] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(1244 / 1000 * 100%) 0 0 calc(720 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_05] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(2090 / 1000 * 100%) 0 0 calc(40 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_06] {
  width: calc(180 / 1000 * 100%);
  padding-top: calc(180 / 1000 * 100%);
  margin: calc(447 / 1000 * 100%) 0 0 calc(380 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_07] {
  width: calc(180 / 1000 * 100%);
  padding-top: calc(180 / 1000 * 100%);
  margin: calc(447 / 1000 * 100%) 0 0 calc(630 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_08] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(1339 / 1000 * 100%) 0 0 calc(72 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_09] {
  width: calc(180 / 1000 * 100%);
  padding-top: calc(180 / 1000 * 100%);
  margin: calc(1287 / 1000 * 100%) 0 0 calc(560 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_10] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(1630 / 1000 * 100%) 0 0 calc(719 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_11] {
  width: calc(180 / 1000 * 100%);
  padding-top: calc(180 / 1000 * 100%);
  margin: calc(2150 / 1000 * 100%) 0 0 calc(320 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_12] {
  width: calc(180 / 1000 * 100%);
  padding-top: calc(180 / 1000 * 100%);
  margin: calc(2150 / 1000 * 100%) 0 0 calc(540 / 1000 * 100%);
}
.chart-btn [data-popup=chart_id_13] {
  width: calc(240 / 1000 * 100%);
  padding-top: calc(240 / 1000 * 100%);
  margin: calc(800 / 1000 * 100%) 0 0 calc(726 / 1000 * 100%);
}
.chart-list-head {
  margin-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .chart-list-head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}
.chart-list-head figure {
  position: relative;
  margin: 0 auto 5rem;
  width: 85.7142857143%;
}
@media screen and (min-width: 768px) {
  .chart-list-head figure {
    margin: 0 7.9545454545% 0;
    width: 40.9090909091%;
  }
}
.chart-list-head figure::after {
  content: "";
  position: absolute;
  display: block;
  top: 49%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 104.5%;
  height: 107%;
  background: url(../images/chart/img_cast_frame.png) no-repeat center/100% 100%;
}
.chart-list-name {
  font-size: 6.4rem;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .chart-list-name {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    text-align: left;
    font-size: 211%;
  }
}
.chart-list-name dt .position {
  display: inline-block;
  margin-bottom: 0.8em;
  padding: 0.2em 0.5em;
  font-size: 38%;
  color: #000000;
  background-color: #f2ff00;
}
.chart-list-name dt .ruby {
  display: block;
  text-align: left;
  font-family: "Noto Serif JP", serif;
  font-size: 33%;
  font-weight: 400;
  letter-spacing: 0.16em;
}
.chart-list-name dt .name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  width: 100%;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.16em;
}
.chart-list-name dt .name small {
  margin: 0 0 0.3em 0.6em;
  font-size: 50%;
  letter-spacing: 0;
}
.chart-list-name dd {
  margin-top: 0.2em;
  font-size: 81%;
  color: #f2ff00;
  letter-spacing: 0.2em;
}
.chart-list-comment {
  margin-top: 6rem;
}
.chart-list-comment dd {
  padding-left: 0;
  padding-right: 0;
}

.popup-chart .popup-list {
  color: #ffffff;
  background-color: transparent;
}
.popup-chart .popup-list::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 24rem);
  background-color: #2a2c33;
}
@media screen and (min-width: 768px) {
  .popup-chart .popup-list::before {
    height: calc(100% - 18rem);
  }
}
.popup-chart .popup-list > li {
  padding: 0 calc(40 / 640 * 100%) 7rem;
}
@media screen and (min-width: 768px) {
  .popup-chart .popup-list > li {
    padding: 0 calc(100 / 1080 * 100%) 6rem;
  }
}/*# sourceMappingURL=subpage.css.map */