@charset "UTF-8";
/* CSS INFORMATION -====================================================
File name : subpage.css
Description : 下層
===================================================================== */
.story-movie .yt_popup {
  position: relative;
  border: 1.2rem solid rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
          box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
}
.story-movie .yt_popup::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 17%;
  max-width: 104px;
  background: url(../images/common/icon_play.svg) no-repeat center/contain;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

/* =====================================================================
    共通
======================================================================*/
.main > section {
  padding: 16rem 0;
}
.main > section:last-child {
  padding-bottom: 32rem;
}
@media screen and (min-width: 768px) {
  .main > section .inner {
    width: calc(1000 / 1280 * 100%);
    max-width: 1000px;
  }
}

.comment-group {
  border-top: 1px solid;
}
.comment-group dt {
  display: inline-block;
  margin-bottom: 1em;
  padding: 0.5em 2.5em;
  font-family: "Cormorant Infant", serif;
  font-weight: 700;
  border-left: 1px solid;
  border-bottom: 1px solid;
  line-height: 1;
}
@media screen and (min-width: 768px) {
  .comment-group dt {
    font-size: 118%;
  }
}
.comment-group dd strong {
  position: relative;
  display: block;
  margin-bottom: 0.5em;
  color: #63678c;
}
.comment-group dd strong::before {
  content: "Q.";
  font-family: "Caudex", serif;
}

/* =====================================================================
    submv
======================================================================*/
.submv {
  background-color: #ffffff;
}
@media screen and (max-width: 767px) {
  .submv > .inner {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .submv > .inner {
    max-width: 1180px;
  }
}
.submv > .inner::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: calc(440 / 750 * 100%);
  height: 100%;
  background: url(../images/common/submv_img.jpg) no-repeat center/cover;
}
@media screen and (min-width: 768px) {
  .submv > .inner::before {
    width: 42.2033898305%;
  }
}
.submv-right {
  margin-left: auto;
  padding: 5.6rem 0;
  width: calc(310 / 750 * 100%);
}
@media screen and (min-width: 768px) {
  .submv-right {
    width: 55.9322033898%;
  }
}
.submv-right h1 {
  margin: 0 auto 5.8rem;
  width: 93.5483870968%;
}
@media screen and (min-width: 768px) {
  .submv-right h1 {
    margin-bottom: 2.3rem;
    width: 78.9393939394%;
  }
  .submv-right h1 a {
    -webkit-transition-property: opacity;
    transition-property: opacity;
  }
  .submv-right h1 a:hover {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 0.6;
  }
}
.submv-date {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 2.8rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
}
.submv-date em {
  font-style: normal;
  font-size: 140%;
}
.submv-date em.ff-en {
  font-size: 152%;
}

/* =====================================================================
    story
======================================================================*/
.story .petal01 {
  top: -20rem;
}
.story .petal02 {
  bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .story .petal02 {
    bottom: auto;
    top: 20rem;
  }
}
.story .bg-wrap {
  padding-bottom: 16rem;
}
.story .bg-wrap::before {
  height: calc(100% - 18.7rem);
}
@media screen and (min-width: 768px) {
  .story .bg-wrap::before {
    height: calc(100% - 23rem);
  }
}
.story-head {
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  .story-head {
    margin: 0 auto 3rem;
    width: calc(800 / 1000 * 100%);
  }
}
.story-head dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.story-movie {
  margin-bottom: 4rem;
}
.story-movie .yt_popup:hover {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.story-movie .yt_popup:hover::after {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.story-movie > img {
  border: 1.2rem solid rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
          box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
}
.story-subttl {
  position: relative;
  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;
  text-align: center;
  font-family: "Cormorant Infant", serif;
  font-weight: 700;
  font-size: 10.4rem;
  line-height: 0.72;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .story-subttl {
    font-size: 7.8rem;
  }
}
.story-subttl::before {
  content: "#";
  display: inline-block;
  margin-right: 0.2em;
  font-size: 58%;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1;
}
.story-subttl.last {
  text-align: left;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 5rem;
  letter-spacing: 0.1em;
  line-height: 1.12;
}
@media screen and (min-width: 768px) {
  .story-subttl.last {
    font-size: 6rem;
  }
}
.story-subttl.last::before {
  display: none;
}
.story-date {
  font-weight: 700;
  font-size: 110%;
  letter-spacing: 0.1em;
  line-height: 1.3 !important;
}
@media screen and (min-width: 768px) {
  .story-date {
    font-size: 135%;
  }
}
.story-content > *:not(:last-child) {
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  .story-content > *:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.story-content p b,
.story-content p strong {
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .story-content,
  .story .sns-share {
    margin: 0 auto;
    width: calc(100% - 2.4rem);
  }
}
.story-text-list > li:not(:last-child),
.story-text-list > li > *:not(:last-child) {
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  .story-text-list > li:not(:last-child),
  .story-text-list > li > *:not(:last-child) {
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 768px) {
  .story-images-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.story-images-list > li {
  margin-top: 1.6rem;
}
.story-images-list > li:first-child {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .story-images-list > li {
    margin-top: 3rem;
    width: calc(480 / 1000 * 100%);
  }
  .story-images-list > li:nth-child(-n+2) {
    margin-top: 0;
  }
  .story-images-list > li:nth-child(2n) {
    margin-left: calc(40 / 1000 * 100%);
  }
}
.story .sns-share {
  margin-top: 8rem;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.story + .delivery .petal03 {
  bottom: -15rem;
}
@media screen and (min-width: 768px) {
  .story + .delivery .petal03 {
    bottom: auto;
    top: -80rem;
  }
}
@media screen and (min-width: 768px) {
  .story + .delivery .petal04 {
    bottom: 0;
  }
}

/*  sns
-----------------------------------------*/
.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;
  padding: 3.6rem 0;
  font-size: 86%;
}
@media screen and (min-width: 768px) {
  .sns-share {
    padding: 5.5rem 0;
    font-size: 125%;
  }
}
.sns-share p {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.sns-share ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: 1.5em;
}
.sns-share ul li {
  margin: 0 1em;
  width: 1.2em;
  height: 1.2em;
}
.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;
}
@media screen and (min-width: 768px) {
  .sns-share ul li a {
    -webkit-transition-property: opacity;
    transition-property: opacity;
  }
  .sns-share ul li a:hover {
    opacity: 0.6;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/*  backnumber
-----------------------------------------*/
.backnumber .petal06 {
  bottom: 30rem;
}
@media screen and (max-width: 767px) {
  .backnumber .petal06 {
    left: auto;
    right: -15rem;
  }
}
@media screen and (min-width: 768px) {
  .backnumber .petal06 {
    bottom: auto;
    top: 20rem;
  }
}
.backnumber .bg-wrap {
  padding: 8rem 0;
}
.backnumber-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.backnumber-list li {
  margin: 3.4rem calc(24 / 640 * 100%) 0 0;
  width: calc(308 / 640 * 100%);
}
@media screen and (max-width: 767px) {
  .backnumber-list li:nth-child(-n+2) {
    margin-top: 0;
  }
  .backnumber-list li:nth-child(even), .backnumber-list li:last-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) {
  .backnumber-list li {
    margin: 3.2rem calc(20 / 1080 * 100%) 0 0;
    width: calc(184 / 1080 * 100%);
  }
  .backnumber-list li:nth-child(5n), .backnumber-list li:last-child {
    margin-right: 0;
  }
  .backnumber-list li:nth-child(-n+5) {
    margin-top: 0;
  }
}
.backnumber-list li dd {
  position: relative;
  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;
  text-align: center;
  margin: 0.35em 0 0 -0.3em;
  font-family: "Cormorant Infant", serif;
  font-weight: 700;
  font-size: 171%;
  line-height: 0.72;
  letter-spacing: 0;
}
@media screen and (min-width: 768px) {
  .backnumber-list li dd {
    font-size: 200%;
  }
}
.backnumber-list li dd::before {
  content: "#";
  display: inline-block;
  margin-right: 0.2em;
  font-size: 58%;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1;
}

/* =====================================================================
    topics
======================================================================*/
/*  一覧
-----------------------------------------*/
.topics .petal01 {
  top: -20rem;
}
.topics .petal02 {
  top: 20rem;
}
.topics .petal03 {
  bottom: 10rem;
}
.topics .bg-wrap {
  padding-bottom: 8rem;
}
@media screen and (min-width: 768px) {
  .topics .bg-wrap {
    padding-bottom: 12rem;
  }
}
.topics .bg-wrap::before {
  height: calc(100% - 21.6rem);
}
@media screen and (min-width: 768px) {
  .topics .bg-wrap::before {
    height: calc(100% - 26rem);
  }
}
@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;
  -webkit-line-clamp: 3;
}
.topics-list figure {
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .topics-list li {
    margin: 6rem calc(44 / 1000 * 100%) 0 0;
    width: calc(304 / 1000 * 100%);
  }
  .topics-list li:nth-child(3n+1), .topics-list li:first-child {
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) {
  .topics-list li:first-child {
    margin-top: 0;
    padding-bottom: 6rem;
    width: 100%;
    border-bottom: 1px solid;
  }
}
.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;
}
@media screen and (min-width: 768px) {
  .topics-list li:first-child a {
    margin: 0 auto;
    width: calc(800 / 1000 * 100%);
  }
}
@media screen and (max-width: 767px) {
  .topics-list li {
    margin-bottom: 6rem;
    padding-bottom: 6rem;
    border-bottom: 1px solid;
  }
  .topics-list li:last-child {
    margin-bottom: 0;
  }
  .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(270 / 640 * 100%);
  }
  .topics-list li:not(:first-child) a .article-list-text {
    width: calc(325 / 640 * 100%);
  }
}

/* =====================================================================
    original
======================================================================*/
.original .petal01 {
  top: -20rem;
}
.original .petal02 {
  top: 10rem;
}
.original .petal03 {
  bottom: 10rem;
}
@media screen and (min-width: 768px) {
  .original > .inner {
    max-width: 1280px !important;
  }
}
@media screen and (max-width: 767px) {
  .original .sec-ttl .en {
    letter-spacing: -0.08em;
  }
}
.original .bg-wrap::before {
  height: calc(100% - 40rem);
}
@media screen and (min-width: 768px) {
  .original .bg-wrap::before {
    left: auto;
    right: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    margin-right: calc(-160 / 1280 * 100%);
    width: calc(1040 / 1280 * 100%);
    min-width: auto;
    height: 100%;
  }
}
.original-content {
  padding-bottom: 16rem;
}
@media screen and (min-width: 768px) {
  .original-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 6.4rem;
    margin-top: 16rem;
  }
  .original-content-right {
    width: calc(680 / 1280 * 100%);
  }
}
.original-img {
  margin: 0 auto 6rem;
  width: calc(560 / 640 * 100%);
}
@media screen and (min-width: 768px) {
  .original-img {
    margin: -16rem 0 0;
    width: calc(504 / 1280 * 100%);
  }
}
.original-img img {
  border: 2.4rem solid rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
          box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
}
.original-img figcaption {
  margin-top: 1em;
  padding-left: 2.2rem;
  font-size: 80%;
  text-shadow: 0 0 0.2em #ffffff, 0 0 0.2em #ffffff, 0 0 0.3em #ffffff, 0 0 0.3em #ffffff, 0 0 0.5em #ffffff, 0 0 0.5em #ffffff;
}
.original-desc {
  text-align: center;
  margin-bottom: 6rem;
}
@media screen and (min-width: 768px) {
  .original-desc {
    text-align: left;
  }
}
.original-desc > *:not(:last-child) {
  margin-bottom: 2rem;
}
.original-desc-text01 {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 200%;
  letter-spacing: 0.2em;
  line-height: 1.3 !important;
}
@media screen and (min-width: 768px) {
  .original-desc-text01 {
    font-size: 4rem;
    font-size: clamp(4rem, 2.8vw, 28px);
  }
}
.original-desc-text02 {
  line-height: 1.3 !important;
}
@media screen and (min-width: 768px) {
  .original-desc-text02 {
    font-size: 125%;
  }
}
.original-desc-text03 {
  font-size: 80%;
}
@media screen and (max-width: 767px) {
  .original-comment {
    margin: 0 auto;
    width: calc(560 / 640 * 100%);
  }
}
@media screen and (min-width: 768px) {
  .original-btn {
    text-align: left;
  }
}

/* =====================================================================
    intro
======================================================================*/
.intro .petal01 {
  top: -20rem;
}
.intro .petal02 {
  bottom: 50rem;
}
@media screen and (min-width: 768px) {
  .intro .petal02 {
    bottom: auto;
    top: 10rem;
  }
}
.intro .petal03 {
  bottom: 0;
}
.intro .sec-ttl .en {
  letter-spacing: -0.04em;
}
.intro .bg-wrap {
  padding: 16rem 0;
}
.intro-catch {
  text-align: center;
  margin-bottom: 12rem;
  font-family: "Noto Serif JP", serif;
  font-size: 180%;
  line-height: 1.8;
  letter-spacing: 0.3em;
}
@media screen and (min-width: 768px) {
  .intro-catch {
    margin-bottom: 8rem;
    font-size: 4.6rem;
  }
}
.intro-text {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 2.6rem;
  line-height: 3 !important;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
  .intro-text {
    font-size: 2rem;
    font-size: max(2rem, 15px);
    letter-spacing: 0.2em;
  }
}
.intro-text em {
  font-style: normal;
  font-size: 174%;
  line-height: 1.5;
}

.intro .bg-wrap::before {
  opacity: 0.75;
}

/* =====================================================================
    staff
======================================================================*/
.cast {
  padding-bottom: 0 !important;
}
.cast .petal01 {
  top: -20rem;
}
.cast .petal02 {
  bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .cast .petal02 {
    bottom: auto;
    top: 10rem;
  }
}
.cast .bg-wrap {
  padding: 16rem 0;
}
.cast-list li:not(:last-child) {
  margin-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .cast-list li:not(:last-child) {
    margin-bottom: 3rem;
  }
}
.cast-list li dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.cast-list li dl > * {
  width: 50%;
  line-height: 1.5;
}
.cast-list li dl dt {
  font-weight: normal;
  text-align: right;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 0.5em;
  padding-right: 1.5em;
  color: #a38fbf;
}
.cast-list li dl dd {
  position: relative;
  text-align: left;
  padding-left: 1.5em;
  font-size: 1.2em;
}
.cast-list li dl dd::before {
  content: "…";
  position: absolute;
  display: block;
  top: 0;
  left: -0.75em;
}

.block_end {
  padding-bottom: 0.5em;
}
.block_end::after {
  content: "＊＊＊＊＊";
  display: block;
  padding-top: 2em;
  text-align: center;
}

.staff .petal03 {
  bottom: 10rem;
}
@media screen and (min-width: 768px) {
  .staff .petal03 {
    bottom: auto;
    top: 0;
  }
}
.staff .petal04 {
  bottom: 50rem;
}
.staff .bg-wrap {
  padding: 16rem 0;
}
.staff-list li:not(:last-child) {
  margin-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  .staff-list li dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.staff-list li dl > * {
  text-align: center;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .staff-list li dl > * {
    width: 50%;
  }
}
.staff-list li dl dt {
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .staff-list li dl dt {
    text-align: right;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 1.8em;
  }
}
@media screen and (min-width: 768px) {
  .staff-list li dl dd {
    text-align: left;
    padding-left: 1.8em;
  }
}
.staff-list dl dd {
  font-size: 1.2em;
}
.staff-list-comment {
  display: inline-block !important;
  margin-left: 0.5em;
  padding: 0.2em 0.8em;
  font-family: "Caudex", serif;
  font-size: 75%;
  line-height: 1;
  color: #ffffff !important;
  background-color: #000000;
  border-radius: 3em;
}

.popup-comment dt {
  text-align: center;
  font-family: "Caudex", serif;
  margin-bottom: 0.5em;
  font-size: 145%;
  font-weight: normal;
}

.cast .bg-wrap::before,.staff .bg-wrap::before {
  opacity: 0.8;
}


/* =====================================================================
    music
======================================================================*/
.music .petal01 {
  top: -20rem;
}
.music .petal02 {
  top: 20%;
}
@media screen and (min-width: 768px) {
  .music .petal02 {
    top: 20rem;
  }
}
.music .petal03 {
  bottom: 10rem;
}
.music .bg-wrap {
  padding-bottom: 16rem;
}
.music .bg-wrap::before {
  height: calc(100% - 22rem);
}
.music-img {
  margin: 0 auto 4rem;
}
@media screen and (min-width: 768px) {
  .music-img {
    width: calc(640 / 1000 * 100%);
  }
}
.music-img img {
  border: 1.2rem solid rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
          box-shadow: 0 0 1.6rem 1px rgba(125, 128, 121, 0.25);
}
.music-desc {
  text-align: center;
}
.music-desc > *:not(:last-child) {
  margin-bottom: 2rem;
}
.music-desc-text01 {
  font-size: 107%;
  line-height: 1.5 !important;
}
@media screen and (min-width: 768px) {
  .music-desc-text01 {
    font-size: 137%;
  }
}
.music-desc-text02 {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 171%;
  letter-spacing: 0.1em;
  line-height: 1.3 !important;
}
@media screen and (min-width: 768px) {
  .music-desc-text02 {
    font-size: 3.6rem;
    font-size: clamp(3.6rem, 2.6vw, 26px);
  }
}
.music-desc-text03 {
  font-size: 80%;
}
.music-comment {
  margin: 8rem auto 0;
}
@media screen and (max-width: 767px) {
  .music-comment {
    width: calc(560 / 640 * 100%);
  }
}

/* =====================================================================
    chart
======================================================================*/
.chart .petal01 {
  top: -20rem;
}
.chart .petal02 {
  bottom: 30rem;
}
@media screen and (min-width: 768px) {
  .chart .petal02 {
    bottom: auto;
    top: 20rem;
  }
}
.chart .petal03 {
  bottom: 0;
}
.chart .bg-wrap {
  padding: 8rem 0;
}
@media screen and (max-width: 767px) {
  .chart-box {
    margin-left: -3.125%;
    width: calc(680 / 640 * 100%);
  }
}
.chart-img {
  position: relative;
  z-index: 1;
}
.chart-note {
  text-align: center;
  margin-top: 2em;
}
.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(280 / 1200 * 100%);
  padding-top: calc(345 / 1200 * 100%);
  margin: calc(80 / 1200 * 100%) 0 0 calc(460 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_02] {
  width: calc(240 / 1200 * 100%);
  padding-top: calc(296 / 1200 * 100%);
  margin: calc(129 / 1200 * 100%) 0 0 calc(140 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_03] {
  width: calc(240 / 1200 * 100%);
  padding-top: calc(296 / 1200 * 100%);
  margin: calc(129 / 1200 * 100%) 0 0 calc(820 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_04] {
  width: calc(240 / 1200 * 100%);
  padding-top: calc(296 / 1200 * 100%);
  margin: calc(505 / 1200 * 100%) 0 0 calc(480 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_05] {
  width: calc(240 / 1200 * 100%);
  padding-top: calc(296 / 1200 * 100%);
  margin: calc(1316 / 1200 * 100%) 0 0 calc(364 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_06] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(959 / 1200 * 100%) 0 0 calc(508 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_07] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(1810 / 1200 * 100%) 0 0 calc(652 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_08] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(1810 / 1200 * 100%) 0 0 calc(936 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_09] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(959 / 1200 * 100%) 0 0 calc(998 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_10] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(1810 / 1200 * 100%) 0 0 calc(364 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_11] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(570 / 1200 * 100%) 0 0 calc(848 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_12] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(1381 / 1200 * 100%) 0 0 calc(80 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_13] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(959 / 1200 * 100%) 0 0 calc(20 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_14] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(1381 / 1200 * 100%) 0 0 calc(706 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_15] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(1381 / 1200 * 100%) 0 0 calc(955 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_16] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(570 / 1200 * 100%) 0 0 calc(176 / 1200 * 100%);
}
.chart-btn [data-popup=chart_id_17] {
  width: calc(184 / 1200 * 100%);
  padding-top: calc(227 / 1200 * 100%);
  margin: calc(1810 / 1200 * 100%) 0 0 calc(80 / 1200 * 100%);
}
@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: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 6rem;
  }
}
.chart-list-head figure {
  position: relative;
  margin: 0 auto 4rem;
  width: 69.2857142857%;
}
@media screen and (min-width: 768px) {
  .chart-list-head figure {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin: 0 3.5714285714% 0 0;
    width: 36.9047619048%;
  }
}
.chart-list-name {
  text-align: center;
  margin-bottom: 8rem;
}
@media screen and (min-width: 768px) {
  .chart-list-name {
    text-align: left;
    margin: 0;
  }
}
.chart-list-name dt {
  font-family: "Noto Serif JP", serif;
  font-size: 200%;
  letter-spacing: 0.2em;
  line-height: 1.3;
}
@media screen and (min-width: 768px) {
  .chart-list-name dt {
    font-size: 4rem;
    font-size: max(4rem, 28px);
  }
}
.chart-list-name dd {
  margin-top: 0.2em;
  font-size: 139%;
  letter-spacing: 0.2em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .chart-list-name dd {
    font-size: 175%;
  }
}
.chart-list-comment {
  margin-top: 6rem;
}/*# sourceMappingURL=subpage.css.map */