@charset "utf-8";

/* ===================
poem
====================== */
@media screen and (max-width: 767px) {
    .poem_inner {
      width: 100vw;
    }
}

@media screen and (max-width: 767px) {
  .poem_content {
    width: 100vw;
    overflow-x: scroll;
  }
}

@media screen and (max-width: 767px) {
  .poem_text {
    display: flex;
    flex-direction: row-reverse;
    width: 400vw;
    padding-block: 25vh;
  }
}

@media screen and (max-width: 767px) {
  .poem_clause {
    width: 100vw;
  }
}

@media screen and (max-width: 767px) {
  .poem_clause:not(:has(.poem_img)) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 72px;
  }
}

.poem_title {
  writing-mode: vertical-rl;
  text-align: left;
  font-family: "FOT-筑紫Aオールド明朝 Pr6N D";
  font-size: 18px;
  line-height: 2;
}

@media screen and (max-width: 767px) {
    .poem_title {
        display: grid;
        align-items: center;
    }
}

.poem_description {
  font-family: "FOT-筑紫明朝 Pr6N L";
  font-size: 16px;
  line-height: 3rem;
  writing-mode: vertical-rl;
}

@media screen and (min-width: 768px) {
  .poem_description {
    white-space: nowrap;
    line-height: 2;
  }
}

.poem_bottom {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
    .poem_bottom {
      margin-block-start: 92px;
    }
}

@media screen and (min-width: 768px) {
    .poem_bottom {
      margin-block-start: 259px;
    }
}

@media screen and (min-width: 768px) {
  .poem {
    height: 100vh;
    padding-block: 220px;
  }

  .poem_inner {
    height: 100%;
    margin-inline: 8.3%;
  }

  .poem_block {
    height: 100%;
  }

  .poem_page {
    height: 100%;
  }

  .poem_content {
    display: flex;
    justify-content: center;
    height: 100%;
  }

  .poem_text {
    display: flex;
    flex-direction: row-reverse;
    gap: 40px;
    overflow: scroll;
  }

  .poem_clause:not(:has(.poem_img)) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 50px;
  }
}

.poem_bottom {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .poem_bottom {
    margin-block-start: 20px;
    margin-inline: 8%;
  }
}

@media screen and (min-width: 768px) {
  .poem_bottom {
    margin-block-start: 40px;
    margin-inline: 8.3%;
  }
}

  .poem_bottom .btn:first-child {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }


.poem_bottom .btn:first-child .btn_arrow img {
  transform: rotate(180deg);
}

@media screen and (max-width: 767px) {
  .poem_bottom .btn:first-child .btn_text,
  .poem_bottom .btn:last-child .btn_text {
    display: none;
  }
}

/* common.cssに移す */
body {
  height: 100vh;
}

.btn_text {
  font-size: 12px;
  font-family: "FOT-筑紫ゴシック Pr5 L";
}

.btn_text {
  font-size: 14px;
  font-family: "FOT-筑紫ゴシック Pr5 L";
}