.article-book {
  /* レスポンシブ計算用の基準幅（関数の引数のような役割） */
  --color-white: #fff;
  --color-black: #000;
  --color-book01-bg: #deebd3;
  --color-book01-bg-dark: #b7e29c;
  --color-book01-text: #1e6f38;
  --color-book02-bg: #deefff;
  --color-book02-bg-dark: #92cbff;
  --color-book02-text: #1f396d;
  --color-book03-bg: #fffee6;
  --color-book03-bg-dark: #ffd694;
  --color-book03-text: #8e4300;

  --base: 640;
  max-width: 640px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";

  @media (max-width: 672px) {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    overflow: hidden;
  }

  * {
    box-sizing: border-box !important;
  }

  p {
    margin: 0;
    line-height: 1.5;
    font-feature-settings: "palt";
    letter-spacing: 0.02em;
  }

  img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  .c-container {
    width: 100%;
    padding: 0 min(40 / var(--base) * 100vw, 40px);
    margin: 0 auto;
  }

  .c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(450 / var(--base) * 100vw, 450px);
    height: min(99 / var(--base) * 100vw, 99px);
    text-decoration: none;

    /* span {
      display: block;
      color: var(--color-white);
      font-size: min(31.25 / var(--base) * 100vw, 31.25px);
      font-weight: bold;
      transform: translate(-0.5em, -0.15em);
      letter-spacing: 0.04em;
    } */
  }

  &.book01 {
    color: var(--color-book01-text);

    .overview {
      background-color: var(--color-book01-bg);
      background-image: url(/documents/d/tosei/book01_overview_bg-png);
    }
    .spot {
      background-color: var(--color-book01-bg-dark);

      &:before,
      &:after {
        background-color: var(--color-book01-bg);
        background-image: url(/documents/d/tosei/book01_spot_deco-png);
      }

      .spot-block__access {
        &::before {
          background-image: url(/documents/d/tosei/book01_access_text-png);
        }
      }
    }

    .download {
      background-color: var(--color-book01-bg);

      .download__desc {
        p {
          border-bottom-color: var(--color-book01-text);
        }
      }
    }

    .reference {
      background-color: var(--color-book01-bg-dark);

      .ref-item {
        a {
          color: var(--color-book01-text);
        }
      }
    }
  }

  &.book02 {
    color: var(--color-book02-text);

    .overview {
      background-color: var(--color-book02-bg);
      background-image: url(/documents/d/tosei/book02_overview_bg-png);
    }
    .spot {
      background-color: var(--color-book02-bg-dark);

      &:before,
      &:after {
        background-color: var(--color-book02-bg);
        background-image: url(/documents/d/tosei/book02_spot_deco-png);
      }
    }

    .download {
      margin-top: calc(min(56 / var(--base) * 100vw, 56px) * -1);
      background-color: var(--color-book02-bg);

      .download__desc {
        p {
          border-bottom-color: var(--color-book02-text);
        }
      }
    }

    .reference {
      background-color: var(--color-book02-bg-dark);

      .ref-item {
        a {
          color: var(--color-book02-text);
        }
      }
    }
  }

  &.book03 {
    color: var(--color-book03-text);

    .overview {
      background-color: var(--color-book03-bg);
      background-image: url(/documents/d/tosei/book03_overview_bg-png);
    }
    .spot {
      background-color: var(--color-book03-bg-dark);

      &:before,
      &:after {
        background-color: var(--color-book03-bg);
        background-image: url(/documents/d/tosei/book03_spot_deco-png);
      }

      .spot-block__access {
        &::before {
          background-image: url(/documents/d/tosei/book03_access_text-png);
        }
      }
    }

    .download {
      margin-top: -1px;
      background-color: var(--color-book03-bg);

      .download__desc {
        p {
          border-bottom-color: var(--color-book03-text);
        }
      }
    }

    .reference {
      background-color: var(--color-book03-bg-dark);

      .ref-item {
        a {
          color: var(--color-book03-text);
        }
      }
    }
  }

  .mv {
    h1,
    h2 {
      margin: 0;
    }
  }

  .overview {
    padding: min(60 / var(--base) * 100vw, 60px) 0;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
    aspect-ratio: 640 / 538;

    .overview__desc {
      p {
        font-size: min(28 / var(--base) * 100vw, 28px);
        line-height: calc(54 / 28);
        letter-spacing: 0.07em;
        font-weight: 600;
        text-align: center;
        padding-top: min(39 / var(--base) * 100vw, 39px);
      }
    }
  }

  .spot {
    position: relative;
    margin: min(72 / var(--base) * 100vw, 72px) 0;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: auto;
      aspect-ratio: 640 / 72;
      background-size: 100%;
    }

    &::before {
      bottom: 100%;
      left: 0;
    }

    &::after {
      top: 100%;
      left: 0;
      transform: scale(1, -1);
    }

    .spot-block {
      padding-top: min(40 / var(--base) * 100vw, 40px);

      &:first-child {
        padding-top: min(68 / var(--base) * 100vw, 68px);
      }

      &:last-child {
        padding-bottom: min(94 / var(--base) * 100vw, 94px);
      }

      .spot-block__desc {
        margin-top: min(16 / var(--base) * 100vw, 16px);
        p {
          text-align: center;
          font-size: min(27 / var(--base) * 100vw, 27px);
          line-height: calc(49 / 28);
          letter-spacing: 0.03em;
          font-weight: 600;
        }
      }

      .spot-block__access {
        position: relative;
        margin-top: min(52 / var(--base) * 100vw, 52px);
        position: relative;
        background-color: var(--color-white);
        border-radius: 24px;
        padding: min(40 / var(--base) * 100vw, 40px) 0 min(32 / var(--base) * 100vw, 32px);

        &::before {
          position: absolute;
          top: calc(min(22 / var(--base) * 100vw, 22px) * -1);
          left: 50%;
          transform: translateX(-50%);
          content: "";
          width: min(180 / var(--base) * 100vw, 180px);
          height: min(44 / var(--base) * 100vw, 44px);
          background-size: contain;
        }

        dl {
          font-size: min(28 / var(--base) * 100vw, 28px);
          line-height: calc(45 / 28);
          letter-spacing: 0.03em;
          text-align: center;
          margin-bottom: 0;
          .data-item {
            display: flex;
            justify-content: center;
            gap: 0.5em;
          }

          .data-item--block {
            flex-direction: column;
            align-items: center;
            gap: 0;

            & + .data-item--block {
              margin-top: min(20 / var(--base) * 100vw, 20px);
            }
          }

          dt {
            font-weight: 600;
          }
        }
      }

      .spot-block__app {
        text-align: center;
        padding-top: min(18 / var(--base) * 100vw, 18px);

        .app-heading {
          width: min(454 / var(--base) * 100vw, 454px);
        }

        .app-list {
          list-style-type: none;
          padding: 0;
          display: flex;
          justify-content: center;

          li a {
            &::after {
              display: none;
            }
          }
        }
      }

      .spot-block__sushitech {
        text-align: center;
        margin: min(38 / var(--base) * 100vw, 38px) auto;

        img {
          width: min(270 / var(--base) * 100vw, 270px);
        }
      }

      .spot-block__matsuri {
        p {
          text-align: center;
          font-weight: 600;
          font-size: min(28 / var(--base) * 100vw, 28px);
        }
      }
    }
  }

  .download {
    .download__title {
      position: relative;
    }
    .download__container {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      aspect-ratio: 550 / 1390;
    }

    .download__img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
    }

    .download__button {
      position: relative;
      width: min(469 / var(--base) * 100vw, 469px);
      height: min(142 / var(--base) * 100vw, 142px);

      &::after {
        display: none;
      }
    }

    .download__notes {
      position: relative;
      font-size: min(24 / var(--base) * 100vw, 24px);
      line-height: calc(49 / 24);
      letter-spacing: 0.03em;
      text-align: center;
      width: min(469 / var(--base) * 100vw, 469px);
    }

    .download__desc {
      margin-top: min(28 / var(--base) * 100vw, 28px);
      position: relative;
      text-align: center;
      padding-bottom: min(72 / var(--base) * 100vw, 72px);

      p {
        font-size: min(28 / var(--base) * 100vw, 28px);
        letter-spacing: 0.03em;
        line-height: calc(49 / 28);
        text-align: center;
        border-bottom: 8px solid var(--color-book01-text);
        color: var(--color-black);

        span {
          font-size: min(33 / var(--base) * 100vw, 33px);
          line-height: calc(49 / 33);
          letter-spacing: 0.03em;
          font-weight: 600;
        }
      }
    }

    .download__illustrator {
      text-align: center;
      margin-top: min(14 / var(--base) * 100vw, 14px);
      padding-bottom: min(56 / var(--base) * 100vw, 56px);
      .illustrator-img {
        width: min(505 / var(--base) * 100vw, 505px);
        height: auto;
      }

      .illustrator-desc {
        margin-top: min(6 / var(--base) * 100vw, 6px);

        p {
          font-size: min(28 / var(--base) * 100vw, 28px);
          line-height: calc(49 / 28);
          letter-spacing: 0.03em;
          color: var(--color-black);
        }
      }

      .illustrator-copyright {
        width: min(200 / var(--base) * 100vw, 200px);
        margin-top: min(39 / var(--base) * 100vw, 39px);
      }
    }
  }

  .reference {
    padding: min(20 / var(--base) * 100vw, 20px) 0;
    .reference__title {
      font-size: min(28 / var(--base) * 100vw, 28px);
      line-height: calc(49 / 28);
      letter-spacing: 0.03em;
      font-weight: 600;
    }

    .reference__list {
      margin-top: min(4 / var(--base) * 100vw, 4px);

      .ref-item {
        line-height: calc(30 / 17);

        & + .ref-item {
          margin-top: 1em;
        }

        a {
          display: block;
          text-decoration: none;
          word-break: break-all;

          @media (hover) {
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}

.accordion-button {
  display: block;
  padding: 0;
  margin: 0 auto;
  border: none;
  cursor: pointer;
  background-color: var(--color-white);
  img {
    width: 100%;
    height: auto;
    max-width: 640px !important;
    vertical-align: bottom;
    transition: opacity 0.3s ease;
  }

  @media (max-width: 672px) {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    overflow: hidden;
  }

  @media (hover) {
    &:hover {
      opacity: 0.8;
    }
  }
}