.section_introduction,
.section_books,
.section_character,
.section_trial {
  margin: 0 90px;
}
.section_title {
  padding-top: 40px;
}
.section_title::after {
  content: "";
  display: block;
  background-color: #999;
  width: 100%;
  height: 0.7px;
  margin: 30px 0 30px 0;
}

@media (max-width: 960px) {
  .section_books,
  .section_character,
  .section_trial {
    margin: 0 40px;
  }
  .section_title {
    font-size: 1.875rem;
    margin-top: 0px;
    padding-top: 20px;
  }
  .section_title::after {
    margin: 20px 0 30px 0;
  }
}

/* ======カーテンテストここから====== */
.button {
  width: 200px;
  height: 40px;
  margin-top: 100px;
}

.button > a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffe600;
}

.picture {
  width: 700px;
  height: 200px;
  margin-top: 100px;
}

.picture > div {
  height: 100%;
  background-image: url(../img/strange_top_hp.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.animation-target {
  position: relative;
  overflow: hidden;
}

.animation-target > a,
.animation-target > div {
  opacity: 0;
}

@keyframes showElements {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animation-target.show > a,
.animation-target.show > div {
  animation: showElements 0.01s 0.9s forwards;
}

.animation-target::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #333;
  transform: translateX(-100%);
}

@keyframes showMask {
  0% {
    transform: translateX(-100%);
  }
  45%,
  55% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animation-target.show::before {
  animation: showMask 1.8s forwards;
}
/* ======カーテンテストここまで====== */

/* ======heroイメージの高さ====== */
.nav-wrapper {
  height: 90vh;
}

/* ======イントロダクション====== */
.section_introduction {
  margin: 100px 0 60px;
  padding-left: 20vw;
}
.introduction_text {
  margin-bottom: 20px;
}
.introduction_text_basic,
.introduction_text_pc-only {
  margin-bottom: 20px;
  border: solid 0.7px #333;
  background-color: #fff;
  padding: 10px 15px;
  letter-spacing: 0.3rem;
  display: inline-block;
  font-size: 1.25rem;
}
.introduction_text_sp-only {
  display: none;
}
.introduction_desctiption {
  line-height: 1.8rem;
  font-size: 1rem;
  letter-spacing: 0.18rem;
  margin-left: 20px;
}
.introduction_desctiption p {
  margin-bottom: 15px;
}
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

@media (max-width: 960px) {
  .section_introduction {
    margin: 70px 40px 60px;
    padding-left: 0;
  }
  .introduction_text_pc-only {
    display: none;
  }
  .introduction_text_basic,
  .introduction_text_pc-only {
    margin-bottom: 10px;
    letter-spacing: 0.3rem;
    font-size: 0.875rem;
    font-weight: 700;
  }
  .introduction_text_sp-only {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 10px;
    border: solid 0.7px #333;
    background-color: #fff;
    padding: 10px 15px;
    letter-spacing: 0.3rem;
    display: inline-block;
  }
  .introduction_desctiption {
    margin: 0 20px;
    font-size: 0.75rem;
  }
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

/* ======登場人物紹介====== */

.character_title {
  display: inline-block;
  margin-bottom: 30px;
}
.character_title-main {
  font-size: 1.5rem;
  letter-spacing: 0.4rem;
}
.character_title-sub {
  font-size: 0.625rem;
  margin-top: 10px;
  text-align: center;
  color: #666;
  letter-spacing: 0.3rem;
}
.character_information-container {
  display: flex;
  margin-bottom: 60px;
}
.character_information-img {
  display: flex;
  justify-content: flex-end;
  width: 45%;
  margin-right: 70px;
}
.character_information-img img {
  width: 250px;
  border: solid 0.7px #333;
}
.character_information-area {
  width: 50%;
}
.character_information-block {
  display: flex;
  font-size: 0.875rem;
  letter-spacing: 0.2rem;
}
.character_information-title {
  width: 30%;
  line-height: 1.55rem;
}
.character_information-description {
  width: 70%;
  margin-bottom: 10px;
  line-height: 1.55rem;
}

@media (max-width: 960px) {
  .character_title-main {
    font-size: 1rem;
  }
  .character_title-sub {
    font-size: 0.5rem;
  }
  .character_information-container {
    display: block;
    margin-bottom: 50px;
  }
  .character_information-img {
    display: block;
    margin-bottom: 30px;
  }
  .character_information-img img {
    width: 200px;
  }
  .character_information-content {
    width: 100%;
  }
  .character_information-description {
    font-size: 0.75rem;
    letter-spacing: 0.18rem;
    line-height: 1.4rem;
    margin-bottom: 20px;
  }
}

.books_information-area {
  width: 50%;
}
.books_information-block,
.publication_information-container,
.subscribe_information-title,
.books_trial-block {
  font-size: 0.875rem;
  letter-spacing: 0.2rem;
}
.books_information-block,
.publication_information-block,
.subscribe_information-block,
.books_trial-block {
  display: flex;
}
.books_information-block,
.books_trial-block {
  margin-bottom: 30px;
}
.publication_information-block {
  margin-bottom: 60px;
}
.books_information-title,
.publication_title,
.subscribe_information-title {
  width: 30%;
  line-height: 1.55rem;
  font-weight: 700;
}
.publication_information-block ul li {
  margin-bottom: 8px;
}
.books_information-description {
  width: 70%;
  margin-bottom: 10px;
  line-height: 1.55rem;
  text-align: justify;
}
.books_information-trial {
  width: 70%;
  margin-bottom: 10px;
}
.books_information-trial p {
  width: 320px;
  padding: 12px 0;
  background-color: #ffe600;
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-align: center;
}
.publication_information-title {
  width: 20%;
}
.publication_information-container,
.subscribe_information-container {
  border-top: solid 0.7px #999;
  padding-top: 25px;
}
.subscribe_button-areablock {
  display: flex;
}
.subscribe_button-block {
  margin-right: 20px;
}
.subscribe_trial-button {
  width: 315px;
  padding: 12px 0;
  background-color: #ffe600;
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-align: center;
  position: relative;
  transition: 0.3s;
}

.subscribe_button {
  width: 150px;
  padding: 12px 0;
  background-color: #ffe600;
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-align: center;
  position: relative;
  transition: 0.3s;
}
.subscribe_trial-button::before,
.subscribe_button::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #333;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease 0.3s;
}
.subscribe_trial-button:hover,
.subscribe_button:hover {
  color: #fff;
}
.subscribe_trial-button:hover::before,
.subscribe_button:hover::before {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}
.subscribe_trial-button p,
.subscribe_button p {
  position: relative;
}
.subscribe_trial-button a,
.subscribe_button a {
  text-align: center;
}
.subscribe_caption {
  font-size: 0.625rem;
  letter-spacing: 0.1rem;
}
.section_line-books {
  content: "";
  display: block;
  background-color: #999;
  width: 100%;
  height: 0.7px;
  margin: 120px 0 60px 0;
}

@media (max-width: 960px) {
  .books_information-title,
  .publication_title,
  .subscribe_information-title {
    width: 100%;
  }
  .books_information-area {
    width: 100%;
  }
  .books_information-container {
    padding-top: 0px;
  }
  .books_information-block {
    margin-bottom: 0px;
    display: block;
    font-size: 0.75rem;
  }
  .books_information-title {
    margin-bottom: 10px;
  }
  .books_trial-block {
    font-size: 0.75rem;
    margin-bottom: 0px;
  }
  .books_information-description p {
    font-size: 0.75rem;
    line-height: 1.4rem;
  }
  .books_img img {
    width: 100%;
  }
  .publication_information-title,
  .publication_information-content {
    font-size: 0.75rem;
  }
  .publication_information-title {
    width: auto;
    margin-right: 10px;
  }
  .subscribe_button-block {
    margin-right: 10px;
  }
  .subscribe_information-title {
    font-size: 0.75rem;
  }
  .subscribe_trial-button {
    width: 210px;
  }
  .subscribe_button {
    font-size: 0.625rem;
    max-width: 100px;
    margin-bottom: 10px;
    /* justify-content: space-between; */
  }
  .section_line-books {
    margin: 80px 0 30px 0;
  }
}

/* ======前へ、次へボタン====== */
.section_next {
  display: flex;
  margin: 120px 90px 0px;
}
.back-button,
.next-button {
  overflow: hidden;
  position: relative;
  width: 49%;
}
.back-button {
  margin-right: 2%;
}

.back-button:hover .back-button_bg {
  transform: scale(1.03);
}
.next-button:hover .next-button_bg {
  transform: scale(1.03);
}

.back-button_area {
  bottom: 0;
  color: #fff; /* テキストの色 */
  font-weight: 700;
  letter-spacing: 0.2rem;
  left: 0;
  margin: 50px auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 80%; /* テキストを横幅いっぱいにならないようにする */
  z-index: 1;
}
.back-title_number {
  text-align: start;
}
.back-title_number p {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
}
.back-title_number::after {
  content: "";
  display: block;
  background-color: #fff;
  width: 100%;
  height: 0.5px;
  margin: 8px 0 20px 0;
}
.back-title {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.back-title_year {
  text-align: center;
  font-size: 0.875rem;
}

/* マスク */
.back-button::before,
.next-button::before {
  background: rgba(0, 0, 0, 0.3); /* マスクの色(黒の50%) */
  bottom: 0;
  content: "";
  height: auto;
  left: 0;
  opacity: 1; /* 最初は透明（非表示） */
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 1.2s ease; /* ゆっくりopacityのみへ変化させる */
  width: 100%;
  z-index: 1;
}
.back-button:hover::before,
.next-button:hover::before {
  opacity: 0;
  color: #333; /* テキストの色 */
}
@media (max-width: 960px) {
  .section_next {
    padding: 40px 0 0 0;
    margin: 0 40px;
  }
  .back-title,
  .next-title {
    width: auto;
  }
  .back-button_area {
    margin: 40px auto;
  }
  .back-title_number p {
    font-size: 0.75rem;
  }
  .back-title {
    font-size: 0.83rem;
  }
  .back-title_year {
    font-size: 0.75rem;
  }
}

/* ======線とアイコン====== */
.section_line {
  content: "";
  display: block;
  background-color: #999;
  width: 100%;
  height: 0.7px;
  margin: 70px 0 50px 0;
}
@media (max-width: 960px) {
  .section_line {
    margin: 50px 0 30px 0;
  }
}

.sns_icon a img {
  width: 30px;
}