:root {
  --primary-color: #ffd100;
}

body {
  background: top center / 100% auto repeat-y url("../img/bg_sp.webp");
  opacity: 0;
}

@media (min-width: 751px) {
  body {
    background: top center / 100% auto repeat-y url("../img/bg_pc.webp");
  }
}

.kv {
  position: relative;
  width: 100%;
  aspect-ratio: 402/606;
  overflow: hidden;
  background: #fff94c;
}

.kv__title {
  position: absolute;
  top: calc(109 / 606 * 100%);
  left: 50%;
  width: calc(356 / 402 * 100%);
  z-index: 2;
  aspect-ratio: 1;
  transform: translateX(-50%);

  img {
    position: absolute;
  }
}

.kv-chikyuchan {
  position: absolute;
  top: calc(146 / 606 * 100%);
  left: 50%;
  width: calc(316 / 402 * 100%);
  z-index: 2;
  aspect-ratio: 1;
  transform: translateX(-50%);
}

.kv-chikyuchan__img--off {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
}

.kv-tanoshimiten {
  position: absolute;
  bottom: calc(23 / 606 * 100%);
  right: calc(35 / 402 * 100%);
  width: calc(96 / 402 * 100%);
  z-index: 4;
}

.kv-omake {
  position: absolute;
  top: calc(71 / 606 * 100%);
  left: calc(-13 / 402 * 100%);
  width: calc(68 / 402 * 100%);
  z-index: 1;
  rotate: 69.73deg;
}

.kv-tennousei {
  position: absolute;
  top: calc(-28 / 606 * 100%);
  left: calc(63 / 402 * 100%);
  width: calc(66 / 402 * 100%);
  z-index: 1;
  rotate: 166.76deg;
}

.kv-kasei {
  position: absolute;
  top: calc(-3 / 606 * 100%);
  right: calc(-36 / 402 * 100%);
  width: calc(130 / 402 * 100%);
  z-index: 1;
  rotate: -15.72deg;
}

.kv-mokusei {
  position: absolute;
  top: calc(433 / 606 * 100%);
  left: calc(-18 / 402 * 100%);
  width: calc(105 / 402 * 100%);
  z-index: 1;
}

.kv-suisei {
  position: absolute;
  top: calc(514 / 606 * 100%);
  left: calc(94 / 402 * 100%);
  width: calc(91 / 402 * 100%);
  z-index: 1;
}

.kv-dosei {
  position: absolute;
  top: calc(395 / 606 * 100%);
  left: calc(344 / 402 * 100%);
  width: calc(95 / 402 * 100%);
  z-index: 1;
}

.kv-tsuki {
  position: absolute;
  top: calc(545 / 606 * 100%);
  left: calc(338 / 402 * 100%);
  width: calc(46 / 402 * 100%);
  z-index: 1;
}

#kv-tsuki {
  transform: translate(-100%, -100%);
}

@media (min-width: 751px) {
  .kv {
    aspect-ratio: 1440/925;
  }

  .kv__title {
    top: calc(98 / 925 * 100%);
    width: calc(660 / 1440 * 100%);
  }

  .kv-chikyuchan {
    position: absolute;
    top: calc(167 / 925 * 100%);
    width: calc(587 / 1440 * 100%);
  }

  .kv-tanoshimiten {
    position: absolute;
    bottom: calc(114 / 925 * 100%);
    right: calc(255 / 1440 * 100%);
    width: calc(148 / 1440 * 100%);
  }

  .kv-omake {
    position: absolute;
    top: calc(243 / 925 * 100%);
    left: calc(-12 / 1440 * 100%);
    width: calc(133 / 1440 * 100%);
    rotate: 69.73deg;
  }

  .kv-tennousei {
    position: absolute;
    top: calc(-64 / 925 * 100%);
    left: calc(126 / 1440 * 100%);
    width: calc(120 / 1440 * 100%);
    rotate: 148.9deg;
  }

  .kv-kasei {
    position: absolute;
    top: calc(-7 / 925 * 100%);
    right: calc(-80 / 1440 * 100%);
    width: calc(276 / 1440 * 100%);
    rotate: -15.72deg;
  }

  .kv-mokusei {
    position: absolute;
    top: calc(541 / 925 * 100%);
    left: calc(-41 / 1440 * 100%);
    width: calc(221 / 1440 * 100%);
  }

  .kv-suisei {
    position: absolute;
    top: calc(759 / 925 * 100%);
    left: calc(374 / 1440 * 100%);
    width: calc(163 / 1440 * 100%);
  }

  .kv-dosei {
    position: absolute;
    top: calc(478 / 925 * 100%);
    left: calc(1256 / 1440 * 100%);
    width: calc(320 / 1440 * 100%);
    rotate: -28.37deg;
  }

  .kv-tsuki {
    position: absolute;
    top: calc(732 / 925 * 100%);
    left: calc(1148 / 1440 * 100%);
    width: calc(70 / 1440 * 100%);
    rotate: -2.05deg;
  }
}

/* yodogawa */
.yodogawa {
  padding: calc(var(--rem) * 64) calc(var(--rem) * 23);
}

.yodogawa__inner {
}

.js-yodogawa-content {
  opacity: 0;
}

.yodogawa__text {
  font-size: calc(var(--rem) * 16);
  line-height: 2.3125;

  + .yodogawa__text {
    margin-top: 2.3125em;
  }

  b {
    color: #1b81df;
  }
  a {
    color: #1b81df;
    text-decoration: underline;
  }
}

.yodogawa__img {
  max-width: calc(var(--rem) * 94);
  margin-top: calc(var(--rem) * 8);
  margin-inline: auto;
}

@media (min-width: 751px) {
  .yodogawa {
    padding: calc(var(--rem) * 80) calc(var(--rem) * 24);
  }

  .yodogawa__inner {
    display: grid;
    justify-items: center;
  }

  .yodogawa__text {
    text-align: center;

    span {
      display: block;
    }
  }

  .yodogawa__img {
    max-width: calc(var(--rem) * 96);
    margin-top: calc(var(--rem) * 20);
  }
}

.slider-area {
  .swiper-slide {
    width: 342px;
  }
}

@media (min-width: 751px) {
  .slider-area {
    .swiper-slide {
      width: 508px;
    }
  }
}

/* related */
.related {
  padding: calc(var(--rem) * 120) calc(var(--rem) * 23);
}

.related__content {
  position: relative;
  max-width: calc(var(--rem) * 640);
  margin-inline: auto;
}

.related__title {
  position: absolute;
  z-index: 2;
  top: calc(var(--rem) * -57);
  left: 50%;
  margin-right: calc(var(--rem) * 5);
  width: 100%;
  max-width: calc(var(--rem) * 250);
  transform: translateX(-50%);
}

.related__body {
  position: relative;
  padding: calc(var(--rem) * 72) calc(var(--rem) * 32) calc(var(--rem) * 80);
  background: #d3f6ff;
  border: 2px solid #000;
  border-radius: calc(var(--rem) * 18);
  overflow: hidden;
}

.related-item {
  display: block;
  max-width: calc(var(--rem) * 420);
  margin-inline: auto;
  color: #000;
  text-decoration: none;
  text-align: center;

  &:not(:first-child) {
    margin-top: calc(var(--rem) * 32);
  }
}

.related__img {
}

.related-item__title {
  margin-top: calc(var(--rem) * 5);
  font-size: calc(var(--rem) * 14);
  line-height: 2;
}

.related__kinsei {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(var(--rem) * 49);
}

@media (min-width: 751px) {
  .related {
    padding: calc(var(--rem) * 150) calc(var(--rem) * 23);
  }

  .related__title {
    top: calc(var(--rem) * -70);
    margin-right: 0;
    max-width: calc(var(--rem) * 316);
  }

  .related__body {
    padding: calc(var(--rem) * 102) calc(var(--rem) * 50) calc(var(--rem) * 98);
    border-radius: calc(var(--rem) * 30);
  }

  .related-item {
    &:not(:first-child) {
      margin-top: calc(var(--rem) * 48);
    }
  }

  .related__img {
  }

  .related-item__title {
    margin-top: calc(var(--rem) * 8);
    font-size: calc(var(--rem) * 14);
  }

  .related__kinsei {
    width: calc(var(--rem) * 65);
  }
}

/* footer */

footer {
  padding-block: 0 calc(var(--rem) * 40);

  ul {
    list-style: none;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #2db2ff;
  }

  .share {
    display: flex;
    justify-content: center;
    gap: calc(var(--rem) * 40);
    font-size: calc(var(--rem) * 38);

    a {
      display: block;
      line-height: 1;
      color: #2db2ff;
    }
  }

  .share_title {
    font-weight: bold;
    font-size: calc(var(--rem) * 12);
    color: #2db2ff;
    border-top: 1px solid #2db2ff;
    border-bottom: 1px solid #2db2ff;

    span {
      display: block;
      line-height: 1em;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .hobo {
    display: grid;
    justify-items: center;
    gap: calc(var(--rem) * 24);
    margin-top: calc(var(--rem) * 40);
    color: #2db2ff;
  }

  .email {
    font-weight: 700;

    a {
      display: flex;
      align-items: center;
      font-size: calc(var(--rem) * 13);
      gap: calc(var(--rem) * 5);
    }

    span {
      font-size: calc(var(--rem) * 30);
    }
  }

  .ico_home {
    height: calc(var(--rem) * 36);
  }

  .hb-hobonichi-logo {
    display: flex;
    align-items: center;
    height: calc(var(--rem) * 36);
    font-size: calc(var(--rem) * 70);
  }

  .copyright {
    padding-top: calc(var(--rem) * 20);
    text-align: center;
    font-size: calc(var(--rem) * 12);
    color: #2db2ff;
    letter-spacing: 0.1em;
  }
}

@media (min-width: 640px) {
  footer {
    padding: 0 calc(var(--rem) * 50) calc(var(--rem) * 40);

    .inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: calc(var(--rem) * 640);
      margin-inline: auto;
    }

    a {
      text-decoration: none;
      color: #2db2ff;
    }

    .hobo {
      display: flex;
      justify-items: center;
      align-items: center;
      gap: calc(var(--rem) * 35);
      margin-top: 0;
    }

    .email {
      font-weight: 700;

      a {
        display: flex;
        align-items: center;
        font-size: calc(var(--rem) * 13);
        gap: calc(var(--rem) * 5);
      }

      span {
        font-size: calc(var(--rem) * 30);
      }
    }

    .ico_home {
      height: calc(var(--rem) * 36);
    }

    .hb-hobonichi-logo {
      display: flex;
      align-items: center;
      height: calc(var(--rem) * 36);
      font-size: calc(var(--rem) * 70);
    }

    .copyright {
      padding-top: calc(var(--rem) * 60);
    }
  }
}