@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=M+PLUS+Rounded+1c:wght@700;800;900&display=swap');

:root {
  --kagaku-header-height: 110px;
  /* 106px + border-bottom 4px */
  --kagaku-main-min-height-pc: 920px;
  --kagaku-main-offset-top: 30px;
  --kagaku-red: #e60012;
  --kagaku-yellow: #ffe600;
  --kagaku-blue: #0088ee;
  --kagaku-blue-deep: #0066cc;
  --kagaku-cream: #fffef2;
  --kagaku-brown: #40210f;
  --kagaku-shadow: 6px 6px 0 rgba(64, 33, 15, 0.85);
  --kagaku-radius-lg: 20px;
  --kagaku-radius-pill: 999px;
  /* 壁紙タイル（1000px超）— 境界・セクション背景で共通 */
  --kagaku-wall-tile-100: 100px;
  /* シリーズタイトル吹き出し（PC・1001px以上） */
  --fukidashi-title-width: 26.7%;
  --fukidashi-bentame-left: -16%;
  --fukidashi-bentame-top: -28%;
  --fukidashi-omoshiro-right: -16%;
  --fukidashi-omoshiro-top: -26%;
  /* 爆弾デコ（PC） */
  --hero-bomb-red-left: -120px;
  --hero-bomb-red-top: -100px;
  --hero-bomb-blue-right: -80px;
  --hero-bomb-blue-top: 38%;
  --hero-bomb-a-left: -20px;
  --hero-bomb-a-bottom: -260px;
  --hero-bomb-b-right: -30px;
  --hero-bomb-b-bottom: -220px;
}

@keyframes title-pop {
  from {
    transform: scale(1) rotate(-1deg);
  }

  to {
    transform: scale(1.03) rotate(1deg);
  }
}

@keyframes catch-bounce {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(-4px) scale(1.02);
  }
}

@keyframes badge-wiggle {

  0%,
  100% {
    transform: rotate(calc(var(--badge-tilt, 0deg) - 2deg));
  }

  50% {
    transform: rotate(calc(var(--badge-tilt, 0deg) + 2deg));
  }
}

@keyframes star-spin {
  from {
    transform: translateY(-50%) rotate(0deg) scale(1);
  }

  to {
    transform: translateY(-50%) rotate(360deg) scale(1.1);
  }
}

@keyframes note-bounce {
  from {
    transform: translateY(-50%) scale(1);
  }

  to {
    transform: translateY(calc(-50% - 4px)) scale(1.15);
  }
}

@keyframes float-deco {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(-10px) rotate(5deg);
  }
}

@keyframes fukidashi-float {
  from {
    transform: translateY(0) rotate(-4deg);
  }

  to {
    transform: translateY(-14px) rotate(4deg);
  }
}

@keyframes hero-deco-pulse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

@keyframes hero-pulse {
  from {
    transform: scale(1);
    opacity: 0.88;
  }

  to {
    transform: scale(1.04);
    opacity: 0.96;
  }
}

@keyframes hero-star-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes card-pop {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes lineup-buy-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes pickup-movie-char-float {
  from {
    transform: translateY(0) rotate(-4deg);
  }

  to {
    transform: translateY(-12px) rotate(4deg);
  }
}

@keyframes comic-thumb-balloon-float {
  from {
    transform: translateY(0) rotate(-5deg);
  }

  to {
    transform: translateY(-12px) rotate(5deg);
  }
}

@keyframes sns-char-float {
  from {
    transform: translateY(0) rotate(-3deg);
  }

  to {
    transform: translateY(-14px) rotate(3deg);
  }
}

body {
  margin: 0;
  font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", sans-serif;
  min-width: 0;
  color: #40210f;
}

/* header */
header {
  box-sizing: border-box;
  background: #ffe600;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--kagaku-header-height);
  border-bottom: 4px solid #40210f;
}

.global-menu {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  height: 100%;
  padding: 0 10px;
}

.s-kids-logo {
  max-width: 177px;
  aspect-ratio: 355 / 128;
}

.global-menu__nav {
  display: flex;
  align-items: center;
  position: relative;
}

.nav-list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 12px 16px;
  border: 3px solid #40210f;
  border-radius: 999px;
  background: #fff;
  color: #40210f;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 #40210f;
  transition: transform 0.2s, box-shadow 0.2s;
}

.nav-btn:hover,
.nav-btn:focus {
  transform: translate(2px, 2px) scale(1.03);
  box-shadow: 2px 2px 0 #40210f;
  background: #fff3a0;
}

.nav-btn:active {
  transform: translate(4px, 4px) scale(0.98);
  box-shadow: none;
}

.nav-link--buy {
  color: var(--kagaku-red);
}

.nav-link--buy:hover,
.nav-link--buy:focus {
  color: var(--kagaku-red);
}

.has-dropdown.is-open .nav-btn {
  background: #ff4d4d;
  color: #fff;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  margin: 0;
  padding: 12px 0;
  list-style: none;
  background: #fff;
  border: 3px solid #40210f;
  border-radius: 16px;
  box-shadow: 6px 6px 0 rgba(64, 33, 15, 0.8);
  z-index: 1001;
}

/* ボタンとドロップダウン間の隙間をホバー領域でつなぐ */
.has-dropdown .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.has-dropdown.is-open .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  color: #40210f;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.5;
  transition: background 0.2s;
}

.dropdown-menu a:hover {
  background: #fff3a0;
}

.dropdown-menu--images {
  min-width: 280px;
  padding: 8px;
}

.dropdown-menu--images a {
  padding: 4px 6px;
  line-height: 0;
  border-radius: 8px;
  transition: background 0.2s;
}

.dropdown-menu--images a:hover,
.dropdown-menu--images a:focus {
  background: #fff3a0;
}

.dropdown-menu--images a:hover .dropdown-menu__img,
.dropdown-menu--images a:focus .dropdown-menu__img {
  transform: scale(1.02);
}

.dropdown-menu__img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 500 / 100;
  transition: transform 0.2s;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 3px solid #40210f;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  box-shadow: 3px 3px 0 #40210f;
}

.nav-toggle span {
  display: block;
  height: 3px;
  background: #40210f;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* main */
main {
  position: relative;
  text-align: center;
  overflow-x: clip;
  overflow-y: visible;
}

.content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.content img {
  width: 100%;
}

.content .image-title-series {
  width: 100%;
  height: auto;
}

.content .main__fukidashi {
  width: var(--fukidashi-title-width);
  height: auto;
}

.content .hero-bomb--red {
  width: 217px;
  max-width: 28vw;
  height: auto;
}

.content .hero-bomb--blue {
  width: 180px;
  max-width: 24vw;
  height: auto;
}

.content .hero-bomb--a {
  width: 99px;
  max-width: 14vw;
  height: auto;
}

.content .hero-bomb--b {
  width: 115px;
  max-width: 16vw;
  height: auto;
}

.content .book-badge-img {
  height: auto;
}

.content .book-badge-img--a,
.content .book-badge-img--b {
  width: 50cqw;
}

.content .book-badge-img--c,
.content .book-badge-img--d {
  width: 52cqw;
}

.content .comic-thumb__zoom-icon {
  width: 72px;
  max-width: 72px;
  height: auto;
}

.content .comic-thumb__balloon {
  width: 96px;
  max-width: none;
  height: auto;
}

.kagaku-main {
  background: #fffef2;
  padding: 0 16px;
  position: relative;
  min-height: calc(100dvh - var(--kagaku-header-height));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

.kagaku-main .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 2;
  padding-top: var(--kagaku-main-offset-top);
  box-sizing: border-box;
}

.hero-burst {
  position: absolute;
  inset: 0;
  background: url(/assets/img/saikyo/kagaku/bg-hero-burst.png) center center / cover no-repeat;
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
  animation: hero-pulse 4s ease-in-out infinite alternate;
}

.hero-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.hero-star {
  position: absolute;
  display: block;
  line-height: 1;
  animation: hero-star-spin 24s linear infinite;
}

.hero-star::before {
  content: "★";
  display: block;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  paint-order: stroke fill;
}

.hero-star--red::before {
  color: var(--kagaku-red);
}

.hero-star--blue::before {
  color: var(--kagaku-blue);
}

.hero-star--yellow::before {
  color: #f5a800;
}

.hero-star--green::before {
  color: #00c853;
}

.hero-star--orange::before {
  color: #ff6600;
}

.hero-star--pink::before {
  color: #ff2288;
}

.hero-star--purple::before {
  color: #8844ff;
}

.hero-star--cyan::before {
  color: #00bbdd;
}

.hero-star--coral::before {
  color: #ff4422;
}

.hero-star--lg {
  font-size: 120px;
  animation-duration: 28s;
}

.hero-star--lg::before {
  -webkit-text-stroke: 5px #fff;
}

.hero-star--md {
  font-size: 76px;
  animation-duration: 22s;
}

.hero-star--md::before {
  -webkit-text-stroke: 3px #fff;
}

.hero-star--sm {
  font-size: 52px;
  animation-duration: 18s;
}

.hero-star--sm::before {
  -webkit-text-stroke: 2.5px #fff;
}

.hero-star--pos-1 {
  left: 2%;
  top: 2%;
}

.hero-star--pos-2 {
  left: auto;
  right: 10%;
  top: 7%;
}

.hero-star--pos-3 {
  left: 36%;
  top: 4%;
}

.hero-star--pos-4 {
  left: 40%;
  bottom: 16%;
}

.hero-star--pos-5 {
  left: 14%;
  top: 54%;
  animation-duration: 32s;
}

.hero-star--pos-6 {
  right: 4%;
  top: 15%;
}

.hero-star--pos-7 {
  right: 24%;
  top: 2%;
}

.hero-star--pos-8 {
  left: 12%;
  bottom: 7%;
}

.hero-star--pos-9 {
  right: 12%;
  bottom: 6%;
}

.hero-star--reverse {
  animation-direction: reverse;
}

.main__title {
  margin: 0 0 12px;
}

.main__title-wrap {
  position: relative;
  display: block;
  width: 60.3%;
  max-width: 603px;
  margin: 0 auto;
  padding: 0 8%;
  overflow: visible;
  box-sizing: content-box;
}

.main__fukidashi {
  position: absolute;
  width: var(--fukidashi-title-width);
  height: auto;
  pointer-events: none;
  z-index: 0;
  animation: fukidashi-float 2.8s ease-in-out infinite alternate;
}

.main__fukidashi--bentame {
  left: var(--fukidashi-bentame-left);
  top: var(--fukidashi-bentame-top);
  animation-delay: 0.15s;
}

.main__fukidashi--omoshiro {
  right: var(--fukidashi-omoshiro-right);
  top: var(--fukidashi-omoshiro-top);
  animation-delay: 0.65s;
  transform-origin: left bottom;
}

.image-title-series {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(4px 4px 0 rgba(64, 33, 15, 0.35));
}

/* book showcase */
.book-showcase-wrap {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.hero-bombs {
  position: absolute;
  top: -4%;
  left: -8%;
  right: -8%;
  height: 62%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.hero-bomb {
  position: absolute;
  height: auto;
  animation: hero-deco-pulse 3s ease-in-out infinite alternate;
}

.hero-bomb--red {
  width: 217px;
  max-width: 28vw;
  left: var(--hero-bomb-red-left);
  top: var(--hero-bomb-red-top);
  animation-duration: 2.8s;
}

.hero-bomb--blue {
  width: 180px;
  max-width: 24vw;
  right: var(--hero-bomb-blue-right);
  top: var(--hero-bomb-blue-top);
  animation-duration: 3.2s;
  animation-delay: 0.4s;
}

.hero-bomb--a {
  width: 99px;
  max-width: 14vw;
  left: var(--hero-bomb-a-left);
  bottom: var(--hero-bomb-a-bottom);
  top: auto;
  animation-duration: 2.6s;
  animation-delay: 0.8s;
}

.hero-bomb--b {
  width: 115px;
  max-width: 16vw;
  right: var(--hero-bomb-b-right);
  bottom: var(--hero-bomb-b-bottom);
  top: auto;
  animation-duration: 3.4s;
  animation-delay: 1.1s;
}

.book-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  grid-template-areas:
    "story-copy story-copy divider zukan-copy zukan-copy"
    "momotaro hekoki divider nichijo outdoor"
    "story-banner story-banner divider zukan-banner zukan-banner";
  gap: 12px 18px;
  position: relative;
  z-index: 1;
}

.book-showcase-divider {
  grid-area: divider;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 8px;
  align-self: stretch;
}

.book-showcase-divider__diamond {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.book-showcase-divider__diamond--outer {
  color: #ff9900;
}

.book-showcase-divider__diamond--mid {
  color: #ff7700;
}

.book-showcase-divider__diamond--center {
  color: var(--kagaku-red);
}

.book-group,
.book-group__row {
  display: contents;
}

#book-momotaro {
  grid-area: momotaro;
}

#book-hekoki {
  grid-area: hekoki;
}

#book-nichijo {
  grid-area: nichijo;
}

#book-outdoor {
  grid-area: outdoor;
}

.book-group__catch--story {
  grid-area: story-copy;
}

.book-group__catch--zukan {
  grid-area: zukan-copy;
}

.book-group__catch {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 4px;
}

.book-group__banner--story {
  grid-area: story-banner;
}

.book-group__banner--zukan {
  grid-area: zukan-banner;
}

.book-group__banner {
  padding: 8px 4px 0;
}

.book-group__catch-picture {
  display: block;
  width: 100%;
}

.book-group__catch-img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0;
}

.book-group__credits {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 1.55;
  color: #40210f;
  margin: 0;
}

.book-group__credits-row {
  display: block;
}

.book-group__credits-item+.book-group__credits-item {
  margin-left: 0.8em;
}

.book-card {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 4px solid var(--kagaku-brown);
  border-radius: 16px;
  box-shadow: 5px 5px 0 rgba(64, 33, 15, 0.75);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

#book-momotaro {
  transform: rotate(-1.5deg);
}

#book-hekoki {
  transform: rotate(1deg);
}

#book-nichijo {
  transform: rotate(-0.8deg);
}

#book-outdoor {
  transform: rotate(1.2deg);
}

.book-card:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.02);
  box-shadow: 8px 10px 0 rgba(64, 33, 15, 0.65);
  z-index: 2;
}

.kagaku-main #book-momotaro:hover,
.kagaku-main #book-hekoki:hover,
.kagaku-main #book-nichijo:hover,
.kagaku-main #book-outdoor:hover {
  transform: translateY(-8px) rotate(0deg) scale(1.02);
  box-shadow: 8px 10px 0 rgba(64, 33, 15, 0.65);
  z-index: 2;
}

.kagaku-main .book-card .image-shadow-book {
  box-shadow: none;
  width: 100%;
  height: auto;
  aspect-ratio: 817 / 1200;
}

.book-card__badges {
  position: absolute;
  bottom: 14%;
  right: -10%;
  z-index: 2;
  pointer-events: none;
}

#book-momotaro .book-card__badges,
#book-hekoki .book-card__badges {
  left: -10%;
  right: auto;
}

.book-badge-img {
  display: block;
  animation: badge-wiggle 2.5s ease-in-out infinite;
  filter: drop-shadow(2px 2px 0 rgba(64, 33, 15, 0.35));
}

#book-momotaro .book-badge-img {
  --badge-tilt: -4deg;
}

#book-hekoki .book-badge-img {
  --badge-tilt: 3deg;
}

#book-nichijo .book-badge-img {
  --badge-tilt: -4deg;
}

#book-outdoor .book-badge-img {
  --badge-tilt: 3deg;
}

.book-card__link {
  display: block;
}

.book-card__status {
  display: inline-block;
  flex-shrink: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 auto;
  padding: 8px 18px;
  border: 3px solid var(--kagaku-brown);
  border-radius: var(--kagaku-radius-pill);
}

.book-card__status--onsale {
  color: #fff;
  background: var(--kagaku-red);
}

.book-card__status--new {
  color: #fff;
  background: var(--kagaku-blue-deep);
}

.has-bound {
  --bg-bound-tile-width: var(--kagaku-wall-tile-100);
  --bg-bound-height: 60px;
}

.has-bound::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bg-bound-height);
  background-color: transparent;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: var(--bg-bound-tile-width) auto;
  pointer-events: none;
  z-index: 2;
}

.has-bound--yellow::after {
  background-image: url(/assets/img/saikyo/kagaku/bg-bound-yellow.png);
}

.has-bound--blue::after {
  background-image: url(/assets/img/saikyo/kagaku/bg-bound-blue.png);
}

.has-bound--red::after {
  background-image: url(/assets/img/saikyo/kagaku/bg-bound-red.png);
}

.kagaku-main.has-bound {
  padding-bottom: var(--bg-bound-height);
}

.kagaku-pickup.has-bound,
.kagaku-character.has-bound {
  padding-bottom: calc(50px + var(--bg-bound-height));
}

.br-sp {
  display: none;
}

/* pickup */
.kagaku-pickup {
  position: relative;
  z-index: 1;
  background: #fff5a0 url(/assets/img/saikyo/kagaku/bg-yellow.png) repeat;
  background-size: var(--kagaku-wall-tile-100) var(--kagaku-wall-tile-100);
  background-position: left top;
  padding: 40px 20px 50px;
}

.section-title {
  position: relative;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-size: 36px;
  color: var(--kagaku-red);
  margin: 0 0 40px;
  padding: 14px 52px;
  display: inline-block;
  background: linear-gradient(180deg, #fff 0%, #fff8d6 100%);
  border: 4px solid var(--kagaku-brown);
  border-radius: var(--kagaku-radius-pill);
  box-shadow: var(--kagaku-shadow);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-title::before,
.section-title::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.section-title::before {
  content: "◆";
  left: 18px;
  font-size: 18px;
  color: var(--kagaku-red);
  text-shadow: none;
  animation: none;
}

.section-title::after {
  content: "◆";
  right: 18px;
  font-size: 18px;
  color: var(--kagaku-red);
  text-shadow: none;
  animation: none;
}

.section-title:hover {
  transform: scale(1.04) rotate(-1deg);
}

.section-title--pickup {
  color: #ee5a6a;
  background: linear-gradient(180deg, #fff 0%, #fff8d6 100%);
  border-width: 4px;
  box-shadow: var(--kagaku-shadow);
  font-size: 36px;
  padding: 14px 52px;
  letter-spacing: normal;
}

.section-title--pickup::before,
.section-title--pickup::after {
  color: #ff6600;
  text-shadow: none;
}

.section-title--lineup {
  color: #fff;
  background: linear-gradient(180deg, #ff88b8 0%, var(--kagaku-red) 100%);
  border-width: 4px;
  box-shadow: var(--kagaku-shadow);
  font-size: 30px;
  padding: 12px 52px;
  letter-spacing: 0.1em;
}

.section-title--lineup::before,
.section-title--lineup::after {
  color: var(--kagaku-yellow);
  text-shadow: none;
}

.kagaku-character .section-title {
  color: #fff;
  background: linear-gradient(180deg, #44aaff 0%, var(--kagaku-blue-deep) 100%);
  font-size: 30px;
  padding: 12px 52px;
  letter-spacing: 0.1em;
}

.kagaku-character .section-title::before,
.kagaku-character .section-title::after {
  color: var(--kagaku-yellow);
  text-shadow: none;
}

.pickup-block {
  max-width: 920px;
  margin: 0 auto 40px;
  padding: 30px;
  background: #fff;
  border: 4px solid var(--kagaku-brown);
  border-radius: var(--kagaku-radius-lg);
  box-shadow: var(--kagaku-shadow);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
}

.pickup-block:hover {
  transform: translateY(-3px);
  box-shadow: 8px 10px 0 rgba(64, 33, 15, 0.55);
}

.pickup-block--momotaro,
.pickup-block--zukan {
  padding: 0;
  overflow: visible;
}

.image-title-book {
  max-width: 100%;
  width: 100%;
}

.pickup-block__book-title--zukan {
  grid-column: 1 / -1;
  text-align: center;
}

.kagaku-pickup--zukan {
  padding-top: 40px;
}

.pickup-movie {
  max-width: 920px;
  width: 100%;
  margin: 32px auto 0;
}

.kagaku-character .pickup-movie {
  margin: 40px auto 0;
}

.pickup-movie__stage {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 48px 100px 40px 88px;
}

.pickup-movie__video {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.pickup-movie__chars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.content .pickup-movie__char {
  position: absolute;
  display: block;
  width: var(--pickup-movie-char-width);
  max-width: none;
  height: auto;
  animation: pickup-movie-char-float 3s ease-in-out infinite alternate;
}

.pickup-movie__char--saru {
  --pickup-movie-char-width: 96px;
  left: -80px;
  bottom: 80px;
  animation-delay: 0s;
}

.pickup-movie__char--inu {
  --pickup-movie-char-width: 144px;
  right: -120px;
  bottom: 0;
  animation-delay: 1.1s;
  animation-duration: 3.4s;
}

.pickup-movie__char--kiji {
  --pickup-movie-char-width: 203px;
  right: -80px;
  top: -28px;
  animation-delay: 0.6s;
  animation-duration: 2.8s;
}

.pickup-movie__frame {
  display: block;
  width: 410px;
  max-width: 100%;
  aspect-ratio: 400 / 490;
  border: 2px solid #40210f;
  border-radius: 0;
  box-shadow: none;
}

.pickup-block__head--zukan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}

.pickup-block__head--story {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: center;
}

.pickup-block__logo {
  margin: 0;
  min-width: 0;
}

.pickup-block__logo picture {
  display: block;
}

.pickup-block__logo-img {
  display: block;
  width: 100%;
  height: auto;
}

.pickup-block__cover--zukan {
  width: 100%;
  margin: 0;
  text-align: center;
}

.pickup-block__expand-link {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
  line-height: 0;
}

.pickup-block__expand-link picture {
  display: block;
}

.pickup-block__expand-link .image-shadow-book,
.pickup-block__expand-link .pickup-block__logo-img {
  display: block;
  width: 100%;
  transition: transform 0.25s, box-shadow 0.25s, filter 0.25s;
}

.pickup-block__expand-link:hover .image-shadow-book,
.pickup-block__expand-link:focus-visible .image-shadow-book {
  transform: translateY(-5px) rotate(-0.5deg) scale(1.02);
  box-shadow: 8px 9px rgba(61, 51, 48, 0.8);
}

.pickup-block__expand-link:hover .pickup-block__logo-img,
.pickup-block__expand-link:focus-visible .pickup-block__logo-img {
  transform: translateY(-5px) rotate(-0.5deg) scale(1.02);
  filter: drop-shadow(6px 8px rgba(61, 51, 48, 0.45));
}

.pickup-block__expand-link:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 4px;
  border-radius: 4px;
}

.zukan-pickup-leads {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.zukan-pickup-leads--after-dual {
  margin-top: 0;
  margin-bottom: 28px;
}

.pickup-block--zukan .pickup-item__copy--center,
.pickup-block--momotaro .pickup-item__copy--center,
.zukan-pickup-leads .pickup-item__copy {
  width: fit-content;
  max-width: 100%;
  min-height: unset;
  padding: 16px 18px;
  justify-content: center;
  text-align: center;
}

.pickup-item__copy--center .pickup-item__copy-text {
  flex: 0 1 auto;
}

.zukan-pickup-item {
  margin-bottom: 36px;
}

.zukan-pickup-item:last-child {
  margin-bottom: 0;
}

.zukan-column {
  margin: 0;
  text-align: center;
}

.content .zukan-column__img {
  display: inline-block;
  width: 558px;
  max-width: 100%;
  height: auto;
}

.zukan-dual,
.zukan-triple {
  display: grid;
  gap: 20px;
}

.zukan-dual {
  grid-template-columns: repeat(2, 1fr);
}

.zukan-triple {
  grid-template-columns: repeat(3, 1fr);
}

.pickup-block--zukan .pickup-block__content {
  --zukan-gallery-gap: 20px;
  --zukan-gallery-col: calc((100% - 2 * var(--zukan-gallery-gap)) / 3);
}

.pickup-block--momotaro .pickup-block__content {
  --zukan-gallery-gap: 20px;
  --zukan-gallery-col: calc((100% - 2 * var(--zukan-gallery-gap)) / 3);
}

.pickup-block--momotaro .zukan-pickup-leads .pickup-item__copy {
  gap: 10px;
}

.pickup-block--momotaro .zukan-pickup-leads .pickup-item__num {
  position: static;
  transform: none;
  flex-shrink: 0;
}

.zukan-dual--story-spread .zukan-gallery__item:first-child .comic-thumb__frame {
  aspect-ratio: 1560 / 1220;
}

.zukan-dual--story-spread .zukan-gallery__item:last-child .comic-thumb__frame {
  aspect-ratio: 1560 / 1150;
}

.pickup-block--momotaro .zukan-dual--story-spread .zukan-gallery__item .comic-thumb__frame {
  aspect-ratio: 800 / 590;
}

.pickup-block--zukan .zukan-dual--landscape .zukan-gallery__item .comic-thumb__frame {
  aspect-ratio: 800 / 590;
}

.pickup-block--zukan .zukan-triple--portrait .comic-thumb__frame {
  aspect-ratio: 400 / 600;
}

.pickup-block--momotaro .zukan-triple--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
}

.pickup-block--momotaro .zukan-triple--pair .zukan-gallery__item {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none;
  flex: unset;
}

.pickup-block--momotaro .zukan-triple--pair .comic-thumb {
  display: block;
  width: 100%;
  max-width: none;
  line-height: 0;
  font-size: 0;
}

.pickup-block--momotaro .zukan-triple--pair .comic-thumb__frame {
  display: block;
  position: relative;
  width: 50%;
  margin-inline: auto;
  line-height: 0;
  aspect-ratio: 400 / 590;
  overflow: hidden;
}

.pickup-block--momotaro .zukan-triple--pair .comic-thumb__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.pickup-block--momotaro .zukan-triple--pair .comic-thumb__balloon--overlap-keisan {
  top: -30px;
  left: calc(10% + 6px);
  right: auto;
}

.pickup-block--momotaro .zukan-triple--pair .comic-thumb__balloon--overlap-jikken {
  top: -30px;
  right: calc(10% + 6px);
  left: auto;
}

.zukan-triple--pair {
  display: flex;
  justify-content: center;
  gap: var(--zukan-gallery-gap);
}

.zukan-triple--pair .zukan-gallery__item {
  flex: 0 0 var(--zukan-gallery-col);
  width: var(--zukan-gallery-col);
  max-width: var(--zukan-gallery-col);
}

.zukan-gallery__item {
  margin: 0;
  overflow: visible;
}

.zukan-dual,
.zukan-triple {
  overflow: visible;
}

.pickup-block--momotaro .zukan-pickup-item .zukan-dual,
.pickup-block--momotaro .zukan-pickup-item .zukan-triple,
.pickup-block--zukan .zukan-pickup-item .zukan-dual,
.pickup-block--zukan .zukan-pickup-item .zukan-triple {
  padding-top: 28px;
}

.zukan-dual .comic-thumb__frame,
.zukan-triple .comic-thumb__frame {
  display: block;
  width: 100%;
  line-height: 0;
}

.zukan-dual .comic-thumb__img,
.zukan-triple .comic-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.zukan-dual--landscape .comic-thumb__frame {
  aspect-ratio: 1398 / 1042;
}

.zukan-dual--landscape .zukan-gallery__item:last-child .comic-thumb__frame {
  aspect-ratio: 1303 / 963;
}

.zukan-triple--portrait .comic-thumb__frame {
  aspect-ratio: 682 / 1021;
}

.comic-thumb__img--spread,
.comic-thumb__img--page {
  object-fit: contain;
}

/* 図鑑シリーズ キャラクター */
.chara-zukan-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto;
}

.chara-zukan-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 0;
}

.chara-zukan-row--reverse {
  flex-direction: row-reverse;
}

.chara-zukan-row--stack {
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.chara-zukan-row__visual {
  flex: 0 0 auto;
  width: auto;
  text-align: center;
}

.chara-zukan-row__figure {
  margin: 0;
}

.content .chara-zukan-row__img {
  display: block;
  width: var(--chara-zukan-img-width);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

.chara-zukan-row__name {
  margin: 6px 0 0;
  text-align: center;
}

.chara-zukan-row--yako {
  --chara-zukan-color: #d8748a;
  --chara-zukan-bubble-bg: #f8e6e6;
  --chara-zukan-img-width: 248px;
}

.chara-zukan-row--maru {
  --chara-zukan-color: #b9d591;
  --chara-zukan-bubble-bg: #e7f1dd;
  --chara-zukan-img-width: 121px;
}

.chara-zukan-row--team {
  --chara-zukan-color: #ecb884;
  --chara-zukan-bubble-bg: #faebdb;
  --chara-zukan-img-width: 400px;
}

.chara-zukan-row__name-inner {
  display: inline-block;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 8px 16px;
  color: #000;
  background: #fff;
  border: 3px solid var(--chara-zukan-color);
  border-radius: var(--kagaku-radius-pill);
}

.chara-zukan-row__bubble {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  background: var(--chara-zukan-bubble-bg);
  border: 2px solid #000;
  border-radius: 16px;
  padding: 16px 14px;
}

.chara-zukan-row--stack .chara-zukan-row__bubble {
  width: fit-content;
  max-width: 100%;
}

.chara-zukan-row__bubble p {
  margin: 0;
  font-family: "M PLUS Rounded 1c", "Kosugi Maru", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 2.1;
  color: #000;
}

.chara-zukan-row__bubble ruby {
  ruby-align: center;
}

.chara-zukan-row__bubble rt {
  font-size: 0.48em;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
}

/* もしもシリーズ キャラクター */
.chara-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 680px;
  margin: 0 auto;
}

.chara-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin: 0;
}

.chara-row--reverse {
  flex-direction: row-reverse;
}

.chara-row__visual {
  flex: 0 0 auto;
  width: 148px;
  text-align: center;
}

.chara-row__figure {
  margin: 0;
}

.content .chara-row__img {
  display: block;
  width: auto;
  max-width: 148px;
  height: auto;
  max-height: none;
  margin: 0 auto;
  object-fit: contain;
}

.chara-row__name {
  margin: 6px 0 0;
  text-align: center;
}

.chara-row--rikao {
  --chara-color: #d05f6c;
}

.chara-row--kaga {
  --chara-color: #417db1;
}

.chara-row--aya {
  --chara-color: #41a99e;
}

.chara-row__name-inner {
  display: inline-block;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 8px 18px;
  color: #fff;
  border-radius: var(--kagaku-radius-pill);
}

.chara-row--rikao .chara-row__name-inner {
  background: #d05f6c;
}

.chara-row--kaga .chara-row__name-inner {
  background: #417db1;
}

.chara-row--aya .chara-row__name-inner {
  background: #41a99e;
}

.chara-row__bubble {
  position: relative;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  background: #fff;
  border: 4px solid var(--chara-color, var(--kagaku-brown));
  border-radius: 16px;
  padding: 16px 14px;
  box-shadow: 4px 4px 0 rgba(64, 33, 15, 0.45);
}

.chara-row__bubble::before,
.chara-row__bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-color: transparent;
}

.chara-row__bubble::before {
  left: -15px;
  border-width: 11px 15px 11px 0;
  border-right-color: var(--chara-color, var(--kagaku-brown));
}

.chara-row__bubble::after {
  left: -9px;
  border-width: 8px 11px 8px 0;
  border-right-color: #fff;
}

.chara-row--reverse .chara-row__bubble::before {
  left: auto;
  right: -15px;
  border-width: 11px 0 11px 15px;
  border-right-color: transparent;
  border-left-color: var(--chara-color, var(--kagaku-brown));
}

.chara-row--reverse .chara-row__bubble::after {
  left: auto;
  right: -9px;
  border-width: 8px 0 8px 11px;
  border-right-color: transparent;
  border-left-color: #fff;
}

.chara-row__bubble p {
  margin: 0;
  font-family: "M PLUS Rounded 1c", "Kosugi Maru", sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 2.1;
  color: var(--kagaku-brown);
}

.chara-row__bubble ruby {
  ruby-align: center;
}

.chara-row__bubble rt {
  font-size: 0.48em;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
}

.chara-row__em {
  font-style: normal;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  color: var(--kagaku-red);
}

.chara-row__em--pop {
  display: inline-block;
  font-size: 1.35em;
  animation: chara-pop 1.2s ease-in-out infinite alternate;
}

@keyframes chara-pop {
  from {
    transform: scale(1) rotate(-5deg);
  }

  to {
    transform: scale(1.15) rotate(5deg);
  }
}

.chara-row.scroll-reveal:not(.is-visible) {
  transform: none;
}

.chara-row.scroll-reveal.is-visible {
  animation-name: scroll-reveal-pop;
}

.chara-zukan-row.scroll-reveal:not(.is-visible) {
  transform: none;
}

.chara-zukan-row.scroll-reveal.is-visible {
  animation-name: scroll-reveal-pop;
}

.lineup-item {
  position: relative;
  margin: 0;
}

.lineup-item__body {
  padding: 10px;
  background: #fff;
  border: 4px solid var(--kagaku-brown);
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(64, 33, 15, 0.7);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
}

.lineup-item:nth-child(odd) .lineup-item__body {
  transform: rotate(-0.8deg);
}

.lineup-item:nth-child(even) .lineup-item__body {
  transform: rotate(0.8deg);
}

.lineup-item.scroll-reveal:not(.is-visible) {
  opacity: 0;
}

.lineup-item:hover,
.lineup-item:focus-within {
  z-index: 1;
}

.lineup-item:hover .lineup-item__body,
.lineup-item:focus-within .lineup-item__body {
  transform: translateY(-12px) rotate(0deg) scale(1.02);
  box-shadow: 6px 8px 0 rgba(64, 33, 15, 0.65);
}

.lineup-item__link {
  display: block;
  transition: transform 0.2s;
}

.lineup-item__link:hover,
.lineup-item__link:focus {
  transform: none;
}

.lineup-item__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 8px 18px;
  border: 3px solid var(--kagaku-brown);
  border-radius: var(--kagaku-radius-pill);
  background: var(--kagaku-yellow);
  color: var(--kagaku-brown);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 3px 3px 0 rgba(64, 33, 15, 0.75);
  transition: transform 0.2s;
}

.lineup-item__buy:hover,
.lineup-item__buy:focus,
.lineup-item__buy:focus-visible {
  text-decoration: none;
  background: var(--kagaku-yellow);
  color: var(--kagaku-brown);
  box-shadow: 3px 3px 0 rgba(64, 33, 15, 0.75);
}

.lineup-item__buy--reserve {
  background: var(--kagaku-blue);
  color: #fff;
}

.lineup-item__buy--reserve:hover,
.lineup-item__buy--reserve:focus,
.lineup-item__buy--reserve:focus-visible {
  text-decoration: none;
  background: var(--kagaku-blue);
  color: #fff;
  box-shadow: 3px 3px 0 rgba(64, 33, 15, 0.75);
}

.lineup-item:hover .lineup-item__buy,
.lineup-item:focus-within .lineup-item__buy {
  animation: lineup-buy-pulse 0.7s ease-in-out infinite;
}

.pickup-block__head {
  height: auto;
  position: static;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 30px;
  background:
    linear-gradient(180deg, rgba(255, 230, 0, 0.35) 0%, transparent 100%),
    var(--kagaku-cream) url(/assets/img/saikyo/kagaku/bg-wall-main.svg) repeat;
  background-size: auto, 80px 80px;
  border-bottom: 4px solid var(--kagaku-brown);
}

.pickup-block--momotaro .pickup-block__head,
.pickup-block--zukan .pickup-block__head {
  border-bottom: none;
  background: linear-gradient(180deg, rgba(255, 230, 0, 0.35) 0%, transparent 100%);
  background-size: auto;
}

.pickup-block__cover {
  flex-shrink: 0;
  width: 140px;
  margin: 0;
}

.kagaku-pickup .pickup-block__cover .image-shadow-book {
  box-shadow: none;
  border: none;
}

.pickup-block--momotaro .pickup-block__cover .image-shadow-book,
.pickup-block--zukan .pickup-block__cover .image-shadow-book {
  border: 3px solid #40210f;
  box-shadow: 4px 4px rgba(61, 51, 48, 0.8);
}

.kagaku-lineup .lineup-item .image-shadow-book {
  box-shadow: none;
}

.pickup-block__book-title {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.content .image-title-book {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.pickup-block__content {
  padding: 28px 30px 36px;
  text-align: center;
}

.pickup-item__copy {
  display: flex;
  align-items: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1.55;
  min-height: calc(2 * 1.55em + 32px);
  margin: 0;
  padding: 16px 18px 16px 52px;
  border: 3px solid var(--kagaku-brown);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--kagaku-brown);
  color: #fff;
  text-align: left;
  position: relative;
}

.pickup-item__copy-text {
  display: block;
  flex: 1;
  min-width: 0;
}

.pickup-item__copy--blue {
  background: linear-gradient(135deg, #0088ee 0%, #0066cc 100%);
}

.pickup-item__copy--red {
  background: linear-gradient(135deg, #ff5555 0%, #e60012 100%);
}

.pickup-item__copy em {
  font-style: normal;
  font-weight: 900;
  color: #ffe600;
  text-shadow: 1px 1px 0 rgba(64, 33, 15, 0.3);
}

.pickup-item__num {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #ffe600;
  color: #40210f;
  border: 2px solid #40210f;
  border-radius: 50%;
  font-size: 15px;
  font-weight: 900;
  flex-shrink: 0;
}

.comic-thumb {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none;
  cursor: zoom-in;
  line-height: 0;
  font-size: 0;
}

.comic-thumb__balloon {
  height: auto;
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgba(64, 33, 15, 0.25));
  animation: comic-thumb-balloon-float 3s ease-in-out infinite alternate;
}

.comic-thumb__balloon--tl {
  top: -30px;
  left: -50px;
}

.comic-thumb__balloon--tr {
  top: -30px;
  right: -50px;
}

.comic-thumb__balloon--delay-a {
  animation-delay: -0.6s;
}

.comic-thumb__balloon--delay-b {
  animation-delay: -1.4s;
}

.comic-thumb__balloon--delay-c {
  animation-delay: -2.1s;
}

.comic-thumb__frame {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
  box-shadow: 5px 5px 0 rgba(64, 33, 15, 0.75);
  background: #fff;
  transition: transform 0.25s, box-shadow 0.25s;
}

.comic-thumb__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #40210f;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

.comic-thumb:hover .comic-thumb__frame,
.comic-thumb:focus-visible .comic-thumb__frame {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 9px 10px 0 rgba(64, 33, 15, 0.75);
}

.comic-thumb:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 4px;
  border-radius: 14px;
}

.comic-thumb__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.25s;
}

.comic-thumb:hover .comic-thumb__img {
  transform: scale(1.03);
}

.comic-thumb__overlay {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 0;
  background: none;
  display: block;
  z-index: 3;
  pointer-events: none;
}

.comic-thumb__zoom-icon {
  display: block;
  width: 72px;
  max-width: 72px;
  height: auto;
  filter: drop-shadow(2px 2px 0 rgba(64, 33, 15, 0.35));
  transition: transform 0.25s;
}

.comic-thumb:hover .comic-thumb__zoom-icon,
.comic-thumb:focus-visible .comic-thumb__zoom-icon {
  transform: scale(1.05);
}

/* character */
.kagaku-character {
  position: relative;
  z-index: 1;
  background: #d4f4ff url(/assets/img/saikyo/kagaku/bg-blue.png) repeat;
  background-size: var(--kagaku-wall-tile-100) var(--kagaku-wall-tile-100);
  background-position: left top;
  padding: 40px 20px 50px;
}

/* lineup */
.kagaku-lineup {
  position: relative;
  z-index: 1;
  background: #ffd6e8 url(/assets/img/saikyo/kagaku/bg-red.png) repeat;
  background-size: var(--kagaku-wall-tile-100) var(--kagaku-wall-tile-100);
  background-position: left top;
  padding: 40px 20px 50px;
}

.lineup-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}

.lineup-item figcaption {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 8px;
  word-break: keep-all;
  line-break: strict;
  text-wrap: pretty;
}

/* sns */
.sns {
  position: relative;
  z-index: 2;
  background: #ffe600;
  border-top: 4px solid #40210f;
  padding: 20px 10px 24px;
  overflow: visible;
}

.sns-inner {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sns-char {
  position: absolute;
  left: max(10px, calc(50% - 320px));
  bottom: 0;
  margin: 0;
  pointer-events: none;
  z-index: 1;
}

.sns-char__img {
  display: block;
  width: 155px;
  max-width: 38vw;
  height: auto;
  aspect-ratio: 311 / 298;
  animation: sns-char-float 2.8s ease-in-out infinite alternate;
}

.sns-icons {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* footer */
footer {
  background: #63d7b8;
  position: relative;
  padding: 20px 10px;
}

.footer {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: #fff;
  padding-bottom: 20px;
}

footer p {
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: unset;
}

#btt {
  position: fixed;
  bottom: 0;
  padding-bottom: 20px;
  right: 10px;
  width: 115px;
  z-index: 9998;
}

/* image */
.image-shadow-book {
  border: 3px solid #40210f;
  box-shadow: 4px 4px rgba(61, 51, 48, 0.8);
}

a img.image-hover:hover {
  transform: scale(1.05);
  transition: 0.4s all;
  cursor: pointer;
}

.image-sns-x,
.image-sns-facebook {
  max-width: 58px;
  aspect-ratio: 1 / 1;
}

.image-sns-line {
  max-width: 61px;
  aspect-ratio: 122 / 116;
}

.image-footer-logo {
  max-width: 426px;
  aspect-ratio: 852 / 106;
}

.image-to-top {
  max-width: 115px;
  aspect-ratio: 231 / 156;
}

@keyframes scroll-reveal-pop {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes scroll-reveal-pop-left {
  from {
    opacity: 0;
    transform: translateX(-36px) translateY(24px) scale(0.92) rotate(-4deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-0.8deg);
  }
}

@keyframes scroll-reveal-pop-right {
  from {
    opacity: 0;
    transform: translateX(36px) translateY(24px) scale(0.92) rotate(4deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0.8deg);
  }
}

.scroll-reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.scroll-reveal.is-visible {
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: forwards;
}

.scroll-reveal--pop.is-visible {
  animation-name: scroll-reveal-pop;
}

.lineup-item.scroll-reveal--pop-left.is-visible,
.lineup-item.scroll-reveal--pop-right.is-visible {
  animation-name: scroll-reveal-lineup-in;
}

@keyframes scroll-reveal-lineup-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.scroll-reveal--pop-left.is-visible {
  animation-name: scroll-reveal-pop-left;
}

.scroll-reveal--pop-right.is-visible {
  animation-name: scroll-reveal-pop-right;
}

/* ローカル確認用キャプチャモード（ヘッダーロゴクリックで切替） */
body.is-capture-mode *,
body.is-capture-mode *::before,
body.is-capture-mode *::after {
  animation: none !important;
  transition: none !important;
}

body.is-capture-mode .scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
}

body.is-capture-mode #book-momotaro,
body.is-capture-mode #book-hekoki,
body.is-capture-mode #book-nichijo,
body.is-capture-mode #book-outdoor,
body.is-capture-mode .lineup-item:nth-child(odd) .lineup-item__body,
body.is-capture-mode .lineup-item:nth-child(even) .lineup-item__body,
body.is-capture-mode .lineup-item.scroll-reveal:not(.is-visible) {
  transform: none !important;
}

body.is-capture-mode .book-card:hover,
body.is-capture-mode .lineup-item:hover .lineup-item__body,
body.is-capture-mode .pickup-block:hover {
  transform: none !important;
}

body.is-capture-mode .lineup-item:hover .lineup-item__buy {
  animation: none;
}

body.is-capture-mode .comic-thumb__balloon {
  animation: none;
}

body.is-capture-mode .hero-burst {
  transform: none !important;
  opacity: 0.92;
}

body.is-capture-mode #btt {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #book-momotaro,
  #book-hekoki,
  #book-nichijo,
  #book-outdoor,
  .lineup-item:nth-child(odd) .lineup-item__body,
  .lineup-item:nth-child(even) .lineup-item__body {
    transform: none;
  }

  .scroll-reveal {
    opacity: 1;
    animation: none !important;
    transform: none !important;
  }
}

/* responsive */

/* PC: トップの最小高さ保証（ウィンドウが低いときはスクロール） */
@media screen and (min-width: 1001px) {
  body {
    min-width: 768px;
  }

  main {
    overflow-x: hidden;
    overflow-y: visible;
  }

  .kagaku-main {
    min-height: max(calc(var(--kagaku-main-min-height-pc) + var(--kagaku-main-offset-top)), calc(100dvh - var(--kagaku-header-height)));
    padding-top: clamp(16px, 3vh, 48px);
    padding-bottom: clamp(24px, 4vh, 56px);
    justify-content: flex-start;
  }

  .kagaku-main .content {
    justify-content: flex-start;
    flex: 0 0 auto;
  }

  .book-group__catch--story .book-group__catch-img {
    transform: translateY(18px);
  }

  .pickup-block--momotaro .zukan-pickup-leads .pickup-item__copy,
  .pickup-block--zukan .zukan-pickup-leads .pickup-item__copy {
    font-size: 22px;
    padding: 20px 28px;
    gap: 12px;
  }

  .pickup-block--momotaro .zukan-pickup-leads .pickup-item__num {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
}

@media screen and (max-width: 1000px) {
  .br-sp {
    display: inline;
  }

  :root {
    --kagaku-header-height: clamp(56px, calc(min(23.6vw, 160px) * 128 / 355 + 12px), 80px);
    /* 壁紙・境界（PC比50% / 375px基準） */
    --kagaku-wall-tile-100: 13.33vw;
    --kagaku-wall-tile-80: 10.67vw;
    --kagaku-wall-tile-112: 14.93vw;
    /* シリーズタイトル吹き出し（SP） */
    --fukidashi-title-width: 26.7%;
    --fukidashi-bentame-left: -6%;
    --fukidashi-bentame-top: -58%;
    --fukidashi-omoshiro-right: -6%;
    --fukidashi-omoshiro-top: -56%;
    /* 爆弾デコ（SP） */
    --hero-bomb-red-left: -8vw;
    --hero-bomb-red-top: 18vw;
    --hero-bomb-blue-right: -8vw;
    --hero-bomb-blue-top: 80vw;
    --hero-bomb-a-left: -5vw;
    --hero-bomb-a-bottom: -80vw;
    --hero-bomb-b-right: -4vw;
    --hero-bomb-b-bottom: -64vw;
  }

  html {
    overflow-x: clip;
  }

  body {
    min-width: 0;
    width: 100%;
    overflow-x: clip;
  }

  .content {
    width: 100%;
    max-width: unset;
  }

  main {
    overflow-x: clip;
    overflow-y: visible;
  }

  .kagaku-main {
    overflow-x: clip;
  }

  .global-menu {
    flex-wrap: nowrap;
    min-height: unset;
    padding: 0 2vw;
    gap: 2vw;
  }

  .s-kids-logo {
    max-width: min(23.6vw, 160px);
  }

  .global-menu__nav {
    width: auto;
    flex: 1;
    justify-content: flex-end;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-list {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    flex-direction: column;
    width: 280px;
    max-width: calc(100vw - 40px);
    background: #ffe600;
    border: 3px solid #40210f;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 6px 6px 0 #40210f;
    z-index: 1002;
  }

  .nav-list.is-open {
    display: flex;
  }

  .nav-btn {
    width: 100%;
    min-width: unset;
    font-size: 14px;
    padding: 10px 14px;
  }

  .has-dropdown .dropdown-menu::before {
    display: none;
  }

  .has-dropdown .dropdown-menu {
    display: block;
    position: static;
    box-shadow: none;
    border: 2px solid transparent;
    margin-top: 0;
    min-width: unset;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    padding-block: 0;
    padding-inline: 2vw;
    transform: translateY(-8px);
    transition:
      max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.28s ease,
      margin-top 0.28s ease,
      padding-block 0.28s ease,
      transform 0.32s ease,
      border-color 0.28s ease,
      visibility 0s linear 0.4s;
  }

  .has-dropdown.is-open .dropdown-menu {
    max-height: 520px;
    opacity: 1;
    margin-top: 8px;
    padding-block: 2vw;
    border-color: #40210f;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.28s ease 0.06s,
      margin-top 0.28s ease,
      padding-block 0.28s ease,
      transform 0.32s ease,
      border-color 0.28s ease,
      visibility 0s linear 0s;
  }

  @keyframes nav-dropdown-item-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .has-dropdown.is-open .dropdown-menu--images li {
    animation: nav-dropdown-item-in 0.32s ease both;
  }

  .has-dropdown.is-open .dropdown-menu--images li:nth-child(1) {
    animation-delay: 0.06s;
  }

  .has-dropdown.is-open .dropdown-menu--images li:nth-child(2) {
    animation-delay: 0.1s;
  }

  .has-dropdown.is-open .dropdown-menu--images li:nth-child(3) {
    animation-delay: 0.14s;
  }

  .has-dropdown.is-open .dropdown-menu--images li:nth-child(4) {
    animation-delay: 0.18s;
  }

  .has-dropdown:not(.is-open) .dropdown-menu--images li {
    animation: none;
  }

  .dropdown-menu--images a {
    padding: 1vw 1.5vw;
  }

  .dropdown-menu__img {
    max-width: none;
  }

  .kagaku-main {
    min-height: calc(100dvh - var(--kagaku-header-height));
    padding: 0 5vw;
    justify-content: flex-start;
  }

  .kagaku-main .content {
    padding-top: 8px;
    justify-content: flex-start;
  }

  .hero-burst {
    background-position: center center;
    opacity: 0.88;
  }

  .main__title {
    margin: clamp(40px, 11vw, 72px) 0 4vw;
  }

  .hero-stars {
    inset: 0;
  }

  .hero-star--lg {
    font-size: 22vw;
  }

  .hero-star--md {
    font-size: 14vw;
  }

  .hero-star--sm {
    font-size: 10vw;
  }

  .hero-star--pos-1 {
    left: 0;
    top: 0;
  }

  .hero-star--pos-2 {
    left: auto;
    right: 10%;
    top: 7%;
  }

  .hero-star--pos-3 {
    left: 36%;
    top: 4%;
  }

  .hero-star--pos-4 {
    left: 40%;
    top: auto;
    bottom: 16%;
  }

  .hero-star--pos-5 {
    left: 14%;
    top: 54%;
  }

  .hero-star--pos-6 {
    left: auto;
    right: 4%;
    top: 25%;
    bottom: auto;
  }

  .hero-star--pos-7 {
    left: auto;
    right: 4%;
    top: 2%;
    bottom: auto;
  }

  .hero-star--pos-8 {
    left: 2%;
    top: auto;
    bottom: 4%;
  }

  .hero-star--pos-9 {
    left: auto;
    right: 2%;
    top: auto;
    bottom: 2%;
  }

  .main__title-wrap {
    width: 90%;
    max-width: 100%;
    padding: 0 5%;
  }

  .image-title-series {
    width: 100%;
  }

  .hero-bombs {
    top: -4%;
    left: -4%;
    right: -4%;
    height: 62%;
  }

  .hero-bomb--red {
    left: var(--hero-bomb-red-left);
    top: var(--hero-bomb-red-top);
  }

  .hero-bomb--blue {
    right: var(--hero-bomb-blue-right);
    top: var(--hero-bomb-blue-top);
  }

  .hero-bomb--a {
    left: var(--hero-bomb-a-left);
    bottom: var(--hero-bomb-a-bottom);
    top: auto;
  }

  .hero-bomb--b {
    right: var(--hero-bomb-b-right);
    bottom: var(--hero-bomb-b-bottom);
    top: auto;
  }

  .book-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas:
      "story-copy divider zukan-copy"
      "momotaro divider nichijo"
      "hekoki divider outdoor"
      "story-banner divider zukan-banner";
    gap: 4vw 1.2vw;
    max-width: 100%;
    align-items: start;
  }

  .book-showcase-divider {
    gap: 3.5vw;
    padding: 0 1vw;
    align-self: stretch;
  }

  .book-showcase-divider__diamond {
    font-size: 2.8vw;
  }

  .book-group,
  .book-group__row {
    display: contents;
  }

  #book-momotaro {
    grid-area: momotaro;
  }

  #book-hekoki {
    grid-area: hekoki;
  }

  #book-nichijo {
    grid-area: nichijo;
  }

  #book-outdoor {
    grid-area: outdoor;
  }

  #book-momotaro,
  #book-hekoki,
  #book-nichijo,
  #book-outdoor {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    transform: none;
  }

  .book-group__banner--story {
    grid-area: story-banner;
  }

  .book-group__banner--zukan {
    grid-area: zukan-banner;
  }

  .book-group__banner {
    padding: 1.5vw 0 0;
  }

  .book-group__credits {
    font-size: 2.6vw;
    font-weight: 800;
  }

  .book-group__credits-item {
    display: inline-block;
    white-space: nowrap;
  }

  .book-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
    padding: 1.2vw;
    border-width: 0.5vw;
    border-radius: 2vw;
    box-shadow: 0.8vw 0.8vw 0 rgba(64, 33, 15, 0.7);
  }

  .book-card__link {
    flex: 1 1 auto;
    display: block;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .kagaku-main .book-card .image-shadow-book {
    box-shadow: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .kagaku-main #book-momotaro:hover,
  .kagaku-main #book-hekoki:hover,
  .kagaku-main #book-nichijo:hover,
  .kagaku-main #book-outdoor:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 1.2vw 1.4vw 0 rgba(64, 33, 15, 0.65);
  }

  .book-card__badges {
    bottom: 12%;
    right: -14%;
  }

  #book-momotaro .book-card__badges,
  #book-hekoki .book-card__badges {
    left: -14%;
    right: auto;
  }

  #book-nichijo .book-card__badges,
  #book-outdoor .book-card__badges {
    left: auto;
    right: -14%;
  }

  .book-group__catch--story,
  .book-group__catch--zukan {
    align-self: end;
  }

  .book-card__status {
    display: block;
    flex-shrink: 0;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    font-size: 3.6vw;
    padding: 1.8vw 3vw;
    border-width: 0.45vw;
    white-space: nowrap;
  }

  .kagaku-main.has-bound {
    padding-bottom: var(--bg-bound-height);
  }

  .has-bound {
    --bg-bound-height: calc(var(--bg-bound-tile-width) * 81 / 200);
  }

  .kagaku-pickup.has-bound,
  .kagaku-character.has-bound {
    padding-bottom: calc(6.67vw + var(--bg-bound-height));
  }

  .section-title {
    font-size: 6vw;
    padding: 2.5vw 10vw;
    margin-bottom: 6vw;
  }

  .section-title::before,
  .section-title::after {
    font-size: 3.2vw;
  }

  .section-title::before {
    left: 3.5vw;
  }

  .section-title::after {
    right: 3.5vw;
  }

  .section-title--pickup {
    font-size: 6vw;
    padding: 2.5vw 10vw;
    border-width: 0.5vw;
    box-shadow: 0.8vw 0.8vw 0 #40210f;
  }

  .kagaku-character .section-title {
    font-size: 4.5vw;
    padding: 2.5vw 10vw;
    border-width: 0.5vw;
    box-shadow: 0.8vw 0.8vw 0 #40210f;
  }

  .section-title--lineup {
    font-size: 4.5vw;
    padding: 2.5vw 10vw;
    border-width: 0.5vw;
    box-shadow: 0.8vw 0.8vw 0 #40210f;
  }

  .pickup-block {
    padding: 5vw;
    margin-bottom: 6vw;
  }

  .pickup-block--momotaro,
  .pickup-block--zukan {
    padding: 0;
  }

  .pickup-block--momotaro .pickup-block__cover .image-shadow-book,
  .pickup-block--zukan .pickup-block__cover .image-shadow-book {
    border: 0.8vw solid #40210f;
    box-shadow: 0.8vw 0.8vw rgba(61, 51, 48, 0.8);
  }

  .pickup-block__expand-link:hover .image-shadow-book,
  .pickup-block__expand-link:focus-visible .image-shadow-book {
    transform: translateY(-1.2vw) rotate(-0.5deg) scale(1.02);
    box-shadow: 1.6vw 1.8vw rgba(61, 51, 48, 0.8);
  }

  .pickup-block__expand-link:hover .pickup-block__logo-img,
  .pickup-block__expand-link:focus-visible .pickup-block__logo-img {
    transform: translateY(-1.2vw) rotate(-0.5deg) scale(1.02);
    filter: drop-shadow(1.2vw 1.6vw rgba(61, 51, 48, 0.45));
  }

  .zukan-pickup-leads {
    gap: 3vw;
    margin-bottom: 5vw;
  }

  .pickup-block--zukan .pickup-item__copy--center,
  .pickup-block--momotaro .pickup-item__copy--center,
  .zukan-pickup-leads .pickup-item__copy {
    font-size: 3.8vw;
    padding: 3.5vw;
    border-width: 0.5vw;
    border-radius: 3vw;
    box-shadow: 0.8vw 0.8vw 0 #40210f;
  }

  .zukan-pickup-item {
    margin-bottom: 8vw;
  }

  .content .zukan-column__img {
    width: 100%;
  }

  .zukan-dual {
    grid-template-columns: 1fr;
    gap: 10vw;
  }

  .pickup-block--momotaro .pickup-block__content {
    --zukan-gallery-gap: 5vw;
    --zukan-gallery-gap-row: 10vw;
    --zukan-gallery-col: calc((100% - 2 * var(--zukan-gallery-gap)) / 3);
  }

  .zukan-triple--portrait {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--zukan-gallery-gap-row) var(--zukan-gallery-gap);
  }

  .zukan-triple--portrait:not(.zukan-triple--pair) .zukan-gallery__item:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--zukan-gallery-gap)) / 2);
  }

  .zukan-triple--portrait .comic-thumb__frame {
    aspect-ratio: calc(1398 / (2 * 1042));
    width: 100%;
    height: auto;
  }

  .pickup-block--zukan .zukan-triple--portrait .comic-thumb__frame {
    aspect-ratio: 400 / 600;
  }

  .pickup-block--zukan .pickup-block__content {
    --zukan-gallery-gap: 5vw;
    --zukan-gallery-gap-row: 10vw;
  }

  .zukan-triple--pair {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }

  .pickup-block--momotaro .zukan-triple--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .pickup-block--momotaro .zukan-triple--pair .zukan-gallery__item {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
    flex: unset;
  }

  .pickup-block--momotaro .zukan-triple--pair .comic-thumb {
    width: 100%;
    max-width: none;
    line-height: 0;
  }

  .pickup-block--momotaro .zukan-triple--pair .comic-thumb__frame {
    display: block;
    position: relative;
    width: 100%;
    margin-inline: auto;
    line-height: 0;
    aspect-ratio: 400 / 590;
    overflow: hidden;
  }

  .pickup-block--momotaro .zukan-triple--pair .comic-thumb__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  .pickup-block--momotaro .zukan-triple--pair .comic-thumb__balloon--overlap-keisan {
    top: -5vw;
    left: -5vw;
    right: auto;
  }

  .pickup-block--momotaro .zukan-triple--pair .comic-thumb__balloon--overlap-jikken {
    top: -5vw;
    right: -5vw;
    left: auto;
  }

  .zukan-triple--pair .zukan-gallery__item {
    flex: unset;
    width: auto;
    max-width: none;
  }

  .pickup-movie {
    margin-top: 6vw;
  }

  .kagaku-character .pickup-movie {
    margin-top: 8vw;
  }

  .pickup-movie__stage {
    padding: 10vw 18vw 8vw 16vw;
  }

  .pickup-movie__char--saru {
    --pickup-movie-char-width: 12.8vw;
    left: 0;
  }

  .pickup-movie__char--inu {
    --pickup-movie-char-width: 19.2vw;
    right: -2vw;
  }

  .pickup-movie__char--kiji {
    --pickup-movie-char-width: 27.1vw;
    top: -5vw;
    right: -2vw;
  }

  .pickup-movie__frame {
    width: 54.6vw;
    max-width: 54.6vw;
    border-width: 0.27vw;
  }

  .chara-zukan-list {
    gap: 6vw;
    max-width: 92vw;
  }

  .chara-zukan-row {
    gap: 2.5vw;
  }

  .chara-zukan-row--stack {
    gap: 3vw;
  }

  .chara-zukan-row--yako {
    --chara-zukan-img-width: 49.6vw;
  }

  .chara-zukan-row--maru {
    --chara-zukan-img-width: 24.2vw;
  }

  .chara-zukan-row--team {
    --chara-zukan-img-width: 106.67vw;
  }

  .chara-zukan-row__name {
    margin-top: 1.5vw;
  }

  .chara-zukan-row__name-inner {
    font-size: 3.5vw;
    padding: 1.8vw 3.5vw;
    border-width: 0.6vw;
  }

  .chara-zukan-row__bubble {
    width: fit-content;
    max-width: 100%;
    padding: 3vw 2.5vw;
    border-radius: 3vw;
    border-width: 0.4vw;
  }

  .chara-zukan-row--stack .chara-zukan-row__bubble {
    width: fit-content;
    max-width: 100%;
  }

  .chara-zukan-row__bubble p {
    font-size: 2.8vw;
    line-height: 2;
  }

  .chara-zukan-row__bubble rt {
    font-size: 0.45em;
  }

  .chara-list {
    gap: 0;
    max-width: 92vw;
  }

  .chara-row {
    gap: 2.5vw;
  }

  .chara-row__visual {
    width: 34vw;
  }

  .content .chara-row__img {
    max-width: 34vw;
  }

  .chara-row__name {
    margin-top: 1.5vw;
  }

  .chara-row__name-inner {
    font-size: 3.8vw;
    padding: 1.8vw 4vw;
  }

  .chara-row__bubble {
    width: fit-content;
    max-width: 100%;
    padding: 3vw 2.5vw;
    border-radius: 3vw;
    border-width: 3px;
    box-shadow: 0.8vw 0.8vw 0 rgba(64, 33, 15, 0.45);
  }

  .chara-row__bubble::before {
    left: -3vw;
    border-width: 2vw 3vw 2vw 0;
  }

  .chara-row__bubble::after {
    left: -1.7vw;
    border-width: 1.5vw 2vw 1.5vw 0;
  }

  .chara-row--reverse .chara-row__bubble::before {
    right: -3vw;
    border-width: 2vw 0 2vw 3vw;
  }

  .chara-row--reverse .chara-row__bubble::after {
    right: -1.7vw;
    border-width: 1.5vw 0 1.5vw 2vw;
  }

  .chara-row__bubble p {
    font-size: 2.8vw;
    line-height: 2;
  }

  .chara-row__bubble rt {
    font-size: 0.45em;
  }

  .pickup-block__head {
    flex-direction: column;
    gap: 3vw;
    padding: 2vw 2vw 0;
    background-size: auto, var(--kagaku-wall-tile-80) var(--kagaku-wall-tile-80);
  }

  .pickup-block__head--zukan {
    display: grid;
    flex-direction: unset;
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
    align-items: start;
  }

  .pickup-block__head--story {
    display: grid;
    flex-direction: unset;
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
    align-items: stretch;
  }

  .pickup-block__head--story .pickup-block__logo-img {
    aspect-ratio: 600 / 500;
    height: auto;
  }

  .pickup-block__head--zukan .pickup-block__cover--zukan {
    width: 100%;
    max-width: none;
  }

  .pickup-block__cover {
    width: 40vw;
  }

  .pickup-block__book-title {
    text-align: center;
  }

  .pickup-block__content {
    padding: 4vw 3vw 5vw;
    text-align: center;
  }

  .pickup-item__copy {
    font-size: 3.8vw;
    min-height: calc(2 * 1.55em + 7vw);
    padding: 3.5vw 3.5vw 3.5vw 11vw;
    border-width: 0.5vw;
    border-radius: 3vw;
    box-shadow: 0.8vw 0.8vw 0 #40210f;
  }

  .pickup-item__num {
    left: 3vw;
    width: 6vw;
    height: 6vw;
    font-size: 3.5vw;
    border-width: 0.4vw;
  }

  .pickup-block--momotaro .zukan-pickup-item .zukan-dual,
  .pickup-block--momotaro .zukan-pickup-item .zukan-triple,
  .pickup-block--zukan .zukan-pickup-item .zukan-dual,
  .pickup-block--zukan .zukan-pickup-item .zukan-triple {
    padding-top: 4vw;
  }

  .content .comic-thumb__balloon {
    width: 24%;
    max-width: 72px;
    min-width: 30px;
  }

  .zukan-triple--portrait .comic-thumb__balloon {
    width: min(96px, 18vw);
    max-width: none;
    min-width: 56px;
  }

  .comic-thumb__balloon--tl {
    top: -5vw;
    left: -5vw;
  }

  .comic-thumb__balloon--tr {
    top: -5vw;
    right: -5vw;
  }

  .comic-thumb__frame {
    border: none;
    border-radius: 2vw;
    box-shadow: 0.8vw 0.8vw 0 rgba(64, 33, 15, 0.75);
  }

  .comic-thumb__frame::after {
    border-width: 0.5vw;
  }

  .comic-thumb:hover .comic-thumb__frame,
  .comic-thumb:focus-visible .comic-thumb__frame {
    box-shadow: 1.2vw 1.2vw 0 rgba(64, 33, 15, 0.75);
  }

  .comic-thumb__img,
  .comic-thumb__img--spread,
  .comic-thumb__img--page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .pickup-block--momotaro .zukan-triple--pair .comic-thumb__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }

  .content .comic-thumb__zoom-icon {
    width: 18vw;
    max-width: 80px;
  }

  .comic-thumb__overlay {
    right: 2vw;
    bottom: 2vw;
  }

  .comic-thumb__zoom-icon {
    width: 18vw;
    max-width: 80px;
  }

  .kagaku-pickup {
    padding: 6vw 3vw 8vw;
  }

  .kagaku-character {
    padding: 6vw 3vw 8vw;
  }

  .kagaku-lineup {
    padding: 6vw 3vw 8vw;
  }

  .lineup-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
  }

  .lineup-item figcaption {
    font-size: clamp(8px, 2.2vw, 12px);
  }

  .lineup-item__buy {
    margin-top: 2vw;
    padding: 1.5vw 1.5vw;
    border-width: 0.45vw;
    font-size: clamp(10px, 3.1vw, 18px);
    box-shadow: 0.6vw 0.6vw 0 rgba(64, 33, 15, 0.75);
  }

  .lineup-item__buy:hover,
  .lineup-item__buy:focus,
  .lineup-item__buy:focus-visible,
  .lineup-item__buy--reserve:hover,
  .lineup-item__buy--reserve:focus,
  .lineup-item__buy--reserve:focus-visible {
    box-shadow: 0.6vw 0.6vw 0 rgba(64, 33, 15, 0.75);
  }

  .sns {
    padding: 2vw 2vw 2vw;
  }

  .sns-inner {
    min-height: 12vw;
  }

  .sns-char {
    top: -2vw;
    left: 5vw;
  }

  .sns-char__img {
    width: min(20vw, 120px);
    max-width: none;
  }

  .sns-icons {
    gap: 5vw;
  }

  footer {
    padding: 2vw;
  }

  footer p {
    margin: 1vw 0 0;
    font-size: 2.8vw;
  }

  #btt {
    bottom: 0;
    padding-bottom: 1vw;
    right: 1vw;
    width: 15.3vw;
  }

  .image-shadow-book {
    border: 0.8vw solid #40210f;
    box-shadow: 0.8vw 0.8vw rgba(61, 51, 48, 0.8);
  }

  .kagaku-lineup .lineup-item .image-shadow-book {
    box-shadow: none;
  }

  .image-sns-x,
  .image-sns-facebook {
    max-width: 6.4vw;
  }

  .image-sns-line {
    max-width: 6.7vw;
  }

  .image-footer-logo {
    width: min(53.3vw, 200px);
    max-width: 200px;
    aspect-ratio: 200 / 80;
    height: auto;
  }

  .image-to-top {
    max-width: 15.3vw;
  }
}