@charset "UTF-8";

/* CSS INFORMATION -====================================================
File name : layout.css
Description : 固定パーツ
===================================================================== */
/* =====================================================================
    共通（大枠）
======================================================================*/
html {
  min-height: 100vh;
  font-size: calc(10 / 750 * 100vw);
}

.wrapper {
  position: relative;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.wrapper img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.wrapper dt {
  font-weight: normal;
}

.wrapper a {
  display: block;
  word-wrap: break-word;
}

section,
main,
header,
footer {
  position: relative;
}

.inner {
  position: relative;
  margin: 0 auto;
  width: calc(710 / 750 * 100%);
  z-index: 2;
}

.main>*:last-child {
  padding-bottom: 35rem;
}

.main section {
  padding: 7rem 0;
}

.main .inner {
  padding: 7rem calc(30 / 710 * 100%);
}

@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: calc(10 / 1200 * 100vw);
  }

  .wrapper {
    font-size: 16px;
  }

  .wrapper a {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }

  .inner {
    width: calc(1000 / 1200 * 100%);
    max-width: 1200px;
  }

  .main .inner {
    /*-- sukidoya --*/
    padding: 3rem calc(50 / 1200 * 100%);
  }

  .sp {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 10px;
  }

  .main .inner {
    padding: 50px 100px;
  }
}

/* =====================================================================
*    header
* =================================================================== */
.header {
  padding-bottom: 12.5rem;
}

.header_group {
  position: relative;
  padding: 3rem 0;
}

.header_group .banner_list {
  margin-top: 2.2rem;
}

.header_otherDate {
  padding: 4.5rem 0;
}

.nav .inner {
  position: static;
  padding: 2rem 0;
  width: 100%;
}

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

.nav_menu li {
  position: relative;
  margin: 0 calc(1 / 750 * 100%) calc(2 / 750 * 100%) 0;
  width: calc(186 / 750 * 100%);
}

.nav_menu li::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 48%;
  border-left: 1px solid;
}

@media screen and (max-width: 767px) {
  .nav_menu li:nth-child(4n)::after {
    display: none;
  }
}

.nav_menu li.nolink a {
  opacity: 0.5;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  pointer-events: none;
}

.nav_date {
  position: absolute;
  top: -0.95em;
  left: 50%;
  padding: 0.2em 0;
  text-align: center;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 90%;
  font-size: 2rem;
  white-space: nowrap;
  z-index: 1;
}

.nav_sns {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  bottom: 0;
  right: 0;
  margin-right: calc(10 / 750 * 100%);
  margin-bottom: 1em;
}

.nav_sns li {
  margin: 0 1rem;
  width: 7.6rem;
  height: 7.6rem;
}

.nav_sns li a {
  display: grid;
  justify-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.nav_sns li a svg {
  width: 40%;
  height: inherit;
}

@media screen and (min-width: 768px) {
  .header {
    padding-bottom: 7rem;
  }

  .header_otherDate {
    padding: 3rem 0;
  }

  .header_otherDate .inner {
    width: 100%;
    max-width: 1200px;
  }

  .mv h1,
  .submv h1 {
    margin: 0 auto;
    max-width: 1200px;
  }

  .nav .inner {
    padding: 0.7em 0;
    max-width: 1200px;
  }

  .nav_menu {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .nav_menu li {
    margin: 0 calc(1 / 1200 * 100%) 0 0;
    width: calc(145 / 1200 * 100%);
    max-width: 145px;
  }

  .nav_menu li:last-child::after {
    display: none;
  }

  .nav_menu li a:hover {
    opacity: 0.6;
  }

  .nav_date {
    width: 100%;
    font-size: 11px;
  }

  .nav_sns li {
    width: 4.8rem;
    height: 4.8rem;
  }

  .nav_sns li a:hover {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
  }
}

@media screen and (min-width: 1600px) {
  .header {
    padding-bottom: 0;
  }

  .nav .inner {
    position: relative;
  }

  .nav_sns {
    bottom: auto;
    top: 50%;
    right: -20rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}


/* =====================================================================
    共通
======================================================================*/
.sec_ttl {
  margin: 0 auto 5rem;
  width: 65rem;
}

.movie_embed {
  margin: 0 auto;
}

.movie_embed_inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.movie_embed_inner iframe,
.movie_embed_inner video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.btn1 {
  position: relative;
  text-align: center;
  margin: 5rem auto 0;
  padding: 5rem 0;
  width: 56rem;
  font-weight: 700;
}

.btn1::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 0.3em);
  right: 1.5em;
  width: 0.55em;
  height: 0.55em;
  border-top: 2px solid;
  border-right: 2px solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.comment {
  margin-top: 12rem;
}

.comment dt {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid;
  font-size: 128%;
}

.comment dd {
  line-height: 1.785;
  color: #000000;
}

.original_top .comment dd {
  line-height: 1.785;
  color: #ffffff;
}
.original_top .comment dt {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid;
  font-size: 128%;
  color: #ffffff;
}

@media screen and (min-width: 768px) {
  .sec_ttl {
    margin-bottom: 4rem;
    width: 47rem;
  }

  .btn1 {
    margin-top: 4rem;
    padding: 3.2rem 0;
    width: 40rem;
    min-width: 320px;
    font-size: 112%;
  }

  .btn1:hover::after {
    right: 1em;
  }

  .comment {
    margin-top: 6rem;
  }

  .comment dt {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    font-size: 137%;
  }
}

/* =====================================================================
  20231130 ナビ・タイトル：フォント対応
======================================================================*/
.nav_menu li a {
  display: grid;
  align-content: center;
  text-align: center;
  height: 12rem;
  font-size: 3.6rem;
}

.nav_menu li a span {
  display: block;
  font-weight: 700;
}

.nav_menu li a .ja {
  margin-top: 0.3em;
  font-size: 50%;
}

.sec_ttl {
  /* width: auto; */
  text-align: center;
  font-size: 8rem;
  font-weight: 700;
}

.sec_ttl .en {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sec_ttl .en::before,
.sec_ttl .en::after {
  content: '';
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
}

.sec_ttl .en::before {
  margin-right: 0.15em;
}

.sec_ttl .en::after {
  margin-left: 0.15em;
}

.sec_ttl .ja {
  display: block;
  margin-top: 0.3em;
  font-size: 38%;
}

@media screen and (min-width: 768px) {
  .nav_menu li a {
    height: 10rem;
    font-size: 2.4rem;
  }

  .sec_ttl {
    font-size: 7rem;
  }

  .sec_ttl .ja {
    font-size: 25%;
  }
}

/* =====================================================================
    nextstory
======================================================================*/

.nextstory {
  background: #000000;
}

@media screen and (max-width: 767px) {

  .nextstory_movie,
  .story_movie {
    margin: 0 0 5rem calc(-15 / 650 * 100%);
    width: calc(680 / 650 * 100%);
  }
}

.nextstory_num,
.story_num {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 157%;
}

.nextstory_date,
.story_date {
  text-align: center;
  margin-bottom: 5rem;
  font-size: 128%;
}

.nextstory_date span,
.story_date span {
  display: block;
  padding: 1.5em 0 0;
  font-size: 0.6em;
}

.nextstory_date span {
  color: #cccccc;
}

.story_date span {
  color: #666666;
}

.nextstory_text,
.story_text {
  line-height: 1.785;
}

@media screen and (min-width: 768px) {

  .nextstory_movie,
  .story_movie {
    margin-bottom: 3rem;
  }

  .nextstory_num,
  .story_num {
    margin-bottom: 2rem;
    font-size: 187%;
  }

  .nextstory_date,
  .story_date {
    margin-bottom: 3rem;
    font-size: 162%;
  }
}

/* =====================================================================
    intro
======================================================================*/
.intro_content {
  font-size: 107%;
  line-height: 1.866;
}

.intro_content>*:not(:last-child) {
  margin-bottom: 4rem;
}

.intro_content .center {
  text-align: center;
}

.intro_content .fz_large {
  line-height: 1.8;
  font-family: var(--font-min);
  font-weight: bold;
}

.intro_content_flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.intro_content .f_pink {
  color: var(--color-accent3);
}

.intro_content .chara1 {
  color: #1638a5;
  background: linear-gradient(transparent 50%, #e9edf9 50%);
}
.intro_content .chara2 {
  color: #930000;
  background: linear-gradient(transparent 50%, #f5ebeb 50%);
}
.intro_content .chara3 {
  color: #711892;
  background: linear-gradient(transparent 50%, #f0e8f3 50%);
}

.intro_content_flex .batsu {
  width: 100%;
  padding: 0 0.2em;
}

.intro_box {
  margin: 1em 0 0;
  padding: 1.5em;
  border: 1px solid #000000;
  background-color: rgba(255,255,255,0.3);
}

@media screen and (min-width: 768px) {
  .intro_content {
    line-height: 2;
  }
  .intro_box {
    margin: 2em 2em 0;
    padding: 2em;
  }
}

@media screen and (min-width: 1024px) {
  .intro_content_flex .batsu {
    width: auto;
  }
}

/* =====================================================================
    original
======================================================================*/
.content_group:not(:last-child) {
  margin-bottom: 15rem;
}

.content_group_wrap:not(:last-child) {
  margin-bottom: 12rem;
}

.content_group_ttl {
  text-align: center;
  margin-bottom: 5rem;
  padding: 3.2rem 0;
  font-size: 4.4rem;
}

.content_group_img {
  margin-bottom: 5rem;
}

.content_group_item li {
  text-align: center;
  line-height: 1.3;
}

.content_group_item li:not(:last-child) {
  margin-bottom: 5rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid;
}

@media screen and (max-width: 767px) {
  .content_group_item li>*:not(:last-child) {
    margin-bottom: 0.3em;
  }
}

.content_group_item li h3 {
  font-size: 128%;
}

.content_group_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.content_group_btn li {
  margin-bottom: 4rem;
  width: calc(300 / 710 * 100%);
}

@media screen and (max-width: 767px) {
  .content_group_btn li:nth-last-child(-n+2) {
    margin-bottom: 0;
  }
}

.content_group_btn li a {
  padding: 3rem 0;
  text-align: center;
}

.content_desc {
  text-align: center;
  margin-bottom: 5rem;
  line-height: 1.3;
}

.content_desc>*:not(:last-child) {
  margin-bottom: 2.4rem;
}

.content_desc_large {
  font-size: 128%;
}

.content_desc_huge {
  font-size: 157%;
}

@media screen and (min-width: 768px) {
  .content_group_wrap:not(:last-child) {
    margin-bottom: 6rem;
  }

  .content_group_ttl {
    margin-bottom: 4rem;
    padding: 1.7rem 0;
    font-size: 212%;
  }

  .content_group_img {
    margin: 0 auto 3rem;
    /* width: calc(330 / 800 * 100%); */
  }

  .original_top .content_group_img {
    margin: 0 auto 3rem;
    width: calc(330 / 800 * 100%);
  }

  .content_group_item li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: left;
  }

  .content_group_item li:not(:last-child) {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
  }

  .content_group_item li h3 {
    width: calc(280 / 800 * 100%);
    font-size: 2.2rem;
  }

  .content_group_item li p {
    margin-left: calc(20 / 800 * 100%);
    width: calc(240 / 800 * 100%);
    font-size: 1.8rem;
  }

  .content_group_btn {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .content_group_btn li {
    margin: 0 calc(40 / 800 * 100%) 3rem 0;
    width: calc(240 / 800 * 100%);
  }

  .content_group_btn li:nth-child(3n),
  .content_group_btn li:last-child {
    margin-right: 0;
  }

  .content_group_btn li:nth-last-child(-n+3) {
    margin-bottom: 0;
  }

  .content_group_btn li a {
    padding: 1.2rem 0;
  }

  .content_group_btn li a:hover {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
  }

  .content_desc {
    margin-bottom: 4rem;
  }

  .content_desc>*:not(:last-child) {
    margin-bottom: 1.6rem;
  }

  .content_desc_large {
    font-size: 137%;
  }

  .content_desc_huge {
    font-size: 3.4rem;
  }
}

/* =====================================================================
    sns
======================================================================*/
.sns {
  padding: 7rem 0;
}

.sns .inner {
  padding: 0;
  background: transparent !important;
}

.sns_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;
}

.sns_list li {
  margin-bottom: 2rem;
  width: calc(518 / 710 * 100%);
}

.sns_list li:last-child {
  margin-bottom: 0;
}

.sns_list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 5rem 13.5135135135%;
  font-size: 107%;
  font-weight: 700;
}

.sns_list li a svg {
  position: relative;
  top: 0.05em;
  margin-right: 0.8em;
  width: 1.5em;
  height: 1.5em;
}

@media screen and (min-width: 768px) {
  .sns {
    padding-top: 5rem;
  }

  .sns_list {
    margin-left: calc(-100 / 1000 * 100%);
    width: calc(1200 / 1000 * 100%);
  }

  .sns_list li {
    margin: 0 calc(45 / 1200 * 100%) calc(20 / 1200 * 100%) 0;
    width: calc(370 / 1200 * 100%);
  }

  .sns_list li:nth-child(3n),
  .sns_list li:last-child {
    margin-right: 0;
  }

  .sns_list li:nth-last-child(-n+3) {
    margin-bottom: 0;
  }

  .sns_list li a:hover {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
  }

  .sns_list li a {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 4rem 0;
    font-size: 2rem;
  }
}

/* =====================================================================
    story
======================================================================*/
.story_txt_list {
  margin: 5rem auto 0;
}

.story_txt_list>li:not(:last-child) {
  margin-bottom: 5rem;
}

.story_txt_list>li>*:not(:last-child) {
  margin-bottom: 5rem;
}

.story_txt_list>li>p {
  line-height: 1.785;
}

.story_images_list li {
  margin-top: 3rem;
}

.story_images_list li:first-child {
  margin-top: 0;
}

.delivery .inner {
  padding: 0;
  background: transparent !important;
}

.delivery h3 {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 128%;
}

.backnumber .inner {
  padding: 0;
  background: transparent !important;
}

.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;
  margin: 0 auto;
  width: calc(650 / 710 * 100%);
}

@media screen and (max-width: 767px) {

  .backnumber_list li:nth-child(even),
  .backnumber_list li:last-child {
    margin-right: 0;
  }
}

.backnumber_list li {
  margin: 0 calc(34 / 650 * 100%) 4rem 0;
  width: calc(308 / 650 * 100%);
}

.backnumber_list li dd {
  margin-top: 0.3em;
  text-align: center;
}

@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 {
    width: calc(384 / 800 * 100%);
  }

  .story_images_list li:nth-child(-n+2) {
    margin-top: 0;
  }

  .story_images_list li:nth-child(2n) {
    margin-left: calc(32 / 800 * 100%);
  }

  .delivery h3 {
    font-size: 162%;
  }

  .backnumber {
    padding-bottom: 15rem;
  }

  .backnumber .sec_ttl {
    margin-bottom: 8rem;
  }

  .backnumber_list li {
    margin: 0 calc(19 / 1000 * 100%) 4rem 0;
    width: calc(184 / 1000 * 100%);
  }

  .backnumber_list li:nth-child(5n),
  .backnumber_list li:last-child {
    margin-right: 0;
  }

  .backnumber_list li a:hover dt {
    opacity: 0.7;
  }

  .backnumber_list li dt {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .backnumber_list li dd {
    font-size: 125%;
  }
}

/* =====================================================================
    chart
======================================================================*/
.chart {
  background: #d9d9d9 url(../images/common/bg_gradation2.png) repeat;
}
.chart_img {
  margin-left: calc(-13 / 650 * 100%);
  width: calc(676 / 650 * 100%);
}

.chart_list {
  margin-top: 12rem;
}

.chart_list li {
  display: grid;
  grid-template-columns: calc(270 / 650 * 100%) calc(350 / 650 * 100%);
  grid-template-rows: auto auto;
  grid-template-areas: "chart_list_img chart_list_name" "chart_list_text chart_list_text";
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 6rem;
  padding-bottom: 6rem;
  border-bottom: 1px solid;
}

.chart_list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.chart_list_img {
  grid-area: chart_list_img;
}

.chart_list_name {
  font-family: var(--font-min);
  grid-area: chart_list_name;
  font-weight: 100;
}

.chart_list_name dt {
  padding: 1em 0.5em 0.5em;
  font-size: 171%;
}

.chart_list_name dt .age {
  margin-left: 0.3em;
}

.chart_list_name dd {
  font-size: 128%;
  padding: 0.5em;
}

.chart_list_name small {
  font-size: 70%;
}

.chart_list_text {
  grid-area: chart_list_text;
  margin-top: 4rem;
  line-height: 1.785;
}

@media screen and (min-width: 768px) {
  .chart_img {
    margin: 0 auto;
    width: calc(700 / 800 * 100%);
  }

  .chart_list {
    margin-top: 10rem;
  }

  .chart_list li {
    grid-template-columns: calc(207 / 800 * 100%) calc(550 / 800 * 100%);
    grid-template-areas: "chart_list_img chart_list_name" "chart_list_img chart_list_text";
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-bottom: 5rem;
    padding-bottom: 5rem;
  }

  .chart_list_name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .chart_list_name dt {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0;
    padding-right: 3em;
    font-size: 187%;
  }

  .chart_list_name dd {
    margin-top: 0.5em;
    font-size: 137%;
    padding-top: 1em;
  }

  .chart_list_name small {
    font-size: 1.6rem;
  }

  .chart_list_text {
    margin-top: 2rem;
  }
}

/* =====================================================================
    cast
======================================================================*/
.cast_group:not(:first-child) {
  margin-top: 18rem;
}

.cast_list li:not(:last-child) {
  margin-bottom: 1.8em;
}

.cast_list li.space {
  margin-bottom: 3.5em;
}

.cast_list li dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  line-height: 1.3;
  letter-spacing: 0;
}

.cast_list li dl dt {
  text-align: right;
  top: 0.35em;
  padding-right: 1em;
  width: 50%;
  line-height: 1.8;
}

.cast_list li dl dd {
  position: relative;
  padding-left: 1em;
  width: 50%;
  line-height: 1.8;
}

.cast_list li dl dd small {
  font-size: 65%;
}

.cast_list li .popup_btn {
  position: relative;
  top: -0.1em;
  display: inline-block;
  margin-left: 0.3em;
}

.cast_list li .popup_btn svg {
  width: 1.5em;
  height: 1.3em;
}

@media screen and (min-width: 768px) {
  .cast_group:not(:first-child) {
    margin-top: 15rem;
  }

  .cast_list li dl {
    font-size: 112%;
  }

  .cast_list li .popup_btn {
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
  }

  .cast_list li .popup_btn:hover {
    opacity: 0.7;
  }
}

/* =====================================================================
    music
======================================================================*/
.music_head_img {
  margin-bottom: 5rem;
}

.music_ttl {
  text-align: center;
  line-height: 1.3;
}

.music_ttl>*:not(:last-child) {
  margin-bottom: 2rem;
}

.music_ttl_artist {
  font-size: 3.6rem;
}

.music_ttl_song {
  font-size: 4.4rem;
}

@media screen and (min-width: 768px) {
  .music_head_img {
    margin: 0 auto 3rem;
    width: calc(450 / 800 * 100%);
  }

  .music_ttl_artist {
    font-size: 137%;
  }

  .music_ttl_song {
    font-size: 3.4rem;
  }
}

/* =====================================================================
    topics
======================================================================*/
.topics_article:not(:last-child) {
  margin-bottom: 9rem;
  padding-bottom: 9rem;
  border-bottom: 1px solid;
}

.topics_article header {
  margin-bottom: 4rem;
}

.topics_article header time {
  display: block;
  margin-bottom: 2rem;
  font-size: 85%;
}

.topics_article header h3 {
  font-weight: 700;
  font-size: 107%;
  line-height: 1.733;
}

.topics_article_contents {
  line-height: 1.785;
}

.topics_article_contents>*:not(:last-child) {
  margin-bottom: 4rem;
}

.topics_article_contents a {
  display: inline;
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .topics_article:not(:last-child) {
    margin-bottom: 5rem;
    padding-bottom: 5rem;
  }

  .topics_article header {
    margin-bottom: 3rem;
  }

  .topics_article header time {
    font-size: 100%;
  }

  .topics_article header h3 {
    font-size: 125%;
  }

  .topics_article_contents>*:not(:last-child) {
    margin-bottom: 3rem;
  }

  .topics_article_contents a:hover {
    opacity: 0.7;
  }
}

/* =====================================================================
*    footer
* =================================================================== */
.fix_content {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 0;
  z-index: 100;
}

.delivery_bnr {
  margin-bottom: 3rem;
}

.delivery_bnr_close {
  position: absolute;
  top: -0.8em;
  left: -0.8em;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #f1f1f1;
  z-index: 1;
}

.delivery_bnr_close::after {
  content: "×";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  font-weight: bold;
  font-size: 0.9em;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #000;
  letter-spacing: 0;
  cursor: pointer;
}

.delivery_bnr_content {
  padding: 0.5em 0;
  width: 22rem;
  background: #21abe6;
}

.delivery_bnr_content p {
  text-align: center;
  margin-bottom: 0.5em;
  font-size: 2rem;
  color: #fff;
}

.delivery_bnr_content a {
  margin: 0 auto;
  width: 72.7272727273%;
}

.pagetop {
  margin-left: auto;
  width: 12rem;
  height: 12rem;
}

.pagetop a {
  position: relative;
  width: 100%;
  height: 100%;
}

.pagetop a::after {
  content: "";
  position: absolute;
  display: block;
  top: 42%;
  left: 50%;
  width: 20%;
  height: 20%;
  border-top: 2px solid;
  border-right: 2px solid;
  -webkit-transform: translateX(-50%) rotate(315deg);
  transform: translateX(-50%) rotate(315deg);
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}

.copyright {
  text-align: center;
  padding: 2.7rem 0;
  font-size: 1.6rem;
  letter-spacing: 0;
}

@media screen and (min-width: 768px) {
  .delivery_bnr_content {
    width: 170px;
  }

  .delivery_bnr_content p {
    font-size: 16px;
  }

  .delivery_bnr_content a:hover {
    opacity: 0.7;
  }

  .pagetop {
    width: 10rem;
    height: 10rem;
  }

  .pagetop a:hover::after {
    top: 35%;
  }

  .copyright {
    padding: 1.8rem 0;
    font-size: 1.4rem;
  }
}

/* =====================================================================
    banner_list
======================================================================*/
.banner_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;
}

.banner_list li {
  margin-bottom: 2rem;
  width: calc(486 / 710 * 100%);
}

.banner_list li:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .banner_list li {
    margin: 0 calc(10 / 1000 * 100%) calc(20 / 1000 * 100%);
    width: calc(290 / 1000 * 100%);
  }

  .banner_list li:nth-last-child(-n+3) {
    margin-bottom: 0;
  }

  .banner_list li a:hover {
    -webkit-transform: translateY(-1rem);
    transform: translateY(-1rem);
  }
}

/* =====================================================================
*    popup
* =================================================================== */
.popup {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 99999;
}

.popup_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.popup_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.popup_inner {
  position: relative;
  margin: auto;
  -ms-flex-item-align: start;
  align-self: flex-start;
  padding: 5.5em 0;
  width: calc(710 / 750 * 100%);
}

.popup_close {
  position: absolute;
  top: 1.5em;
  right: 0;
  width: 3em;
  height: 3em;
  z-index: 3;
}

.popup_close::before,
.popup_close::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  width: 1px;
  padding-top: 50%;
  -webkit-transform: rotate(45deg) translate(-50%, -50%);
  transform: rotate(45deg) translate(-50%, -50%);
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.popup_close::after {
  -webkit-transform: rotate(-45deg) translate(-50%, -50%);
  transform: rotate(-45deg) translate(-50%, -50%);
}

.popup_list {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.popup_list>li {
  position: relative;
  display: none;
  margin: 0 auto;
  padding: 7rem 0;
  width: calc(650 / 710 * 100%);
  z-index: 2;
}

.popup_list>li p {
  margin-top: 5rem;
  padding-top: 5rem;
  line-height: 1.785;
  border-top: 1px solid;
}

.popup_comment_ttl {
  position: relative;
  text-align: center;
  padding-top: 1.5em;
  font-size: 4.4rem;
}

.popup_comment_ttl::before {
  content: "COMMENT";
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center;
  font-size: 81%;
}

.popup_comment_ttl small {
  font-size: 77%;
}

@media screen and (min-width: 768px) {
  .popup_bg {
    cursor: pointer;
  }

  .popup_inner {
    width: calc(1000 / 1200 * 100%);
    max-width: 1000px;
  }

  .popup_list>li {
    padding: 5rem 0;
    width: 90%;
    max-width: 800px;
  }

  .popup_list>li p {
    margin-top: 3rem;
    padding-top: 3rem;
  }

  .popup_close {
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .popup_close:hover {
    opacity: 0.8;
  }

  .popup_comment_ttl {
    font-size: 3.4rem;
  }
}

/* =====================================================================
    print
======================================================================*/
@media print {

  .mv img,
  .submv img,
  .delivery_bnr_content img,
  .story_images_list img,
  .backnumber_list img,
  .chart_img img,
  .chart_list img,
  .music_head_img img,
  .topics_article_contents img,
  .original_book img {
    display: none;
  }
}