/* Renewal page — BRAVE FRONTIER LEGION */

body.renewal {
  --renewal-vw: 100vw;
  --renewal-bg-h: calc(9284 / 2880 * var(--renewal-vw));
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 0 !important;
  background-color: #0a1628;
  background-image: url(../img/PC/scbf_pc_bg.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: var(--renewal-vw) auto;
  /* scbf_pc_bg.png (2880×9284) の下端まで表示 */
  min-height: var(--renewal-bg-h);
  font-family: "Noto Sans JP", "Noto Sans", "Hiragino Sans", "Yu Gothic", sans-serif;
}

body.renewal main,
body.renewal .renewal-main {
  overflow: visible;
}

/* main.css の section { margin-bottom: 7% } を無効化 */
body.renewal main section.renewal-section {
  margin-bottom: 0;
}

body.renewal #header {
  display: none;
}

body.renewal .fixed_bg {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.renewal-sp-break {
  display: none;
}

.renewal-main {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: visible;
}

.renewal-section {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 4% 8%;
}

.renewal-section__title {
  position: relative;
  z-index: 3;
  width: calc(748 / 1440 * 100vw);
  max-width: none;
  height: auto;
  margin: 0 auto calc(16 / 1440 * 100vw);
  text-align: center;
}

.renewal-section__title img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0 auto;
  object-fit: contain;
}

/* ----- KV ----- */
.renewal-kv {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  overflow: visible;
  isolation: isolate;
}

/* scbf_pc_KV.png と同じ比率（2880×1746） */
.renewal-kv__content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  aspect-ratio: 2880 / 1746;
  overflow: hidden;
}

.renewal-kv__content .renewal-kv__layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.renewal-kv__layer--frame {
  position: relative;
  z-index: 4;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.renewal-kv__frame-img {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  vertical-align: top;
}

.renewal-kv__layer--frame .renewal-kv__badge--anniversary {
  z-index: 2;
}

/* 1. 最背面: ページ背景 */
.renewal-kv__layer--page-bg {
  z-index: 1;
  overflow: hidden;
}

.renewal-kv__page-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* 2. 背景動画（KV高さ内でクリップ） */
.renewal-kv__layer--bg-video {
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.renewal-kv__video--bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: blur(18px) brightness(0.55);
  transform: scale(1.08);
  transform-origin: center center;
}

/* 3. 前景動画（中央スロット・フレーム全体基準） */
.renewal-kv > .renewal-kv__layer--fg-slot {
  position: absolute;
  z-index: 3;
  top: 4%;
  left: 50%;
  width: 32.6%;
  height: 58%;
  transform: translateX(-50%);
  overflow: hidden;
  background: #000;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.renewal-kv__video--fg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1) brightness(1);
  transition: filter 0.5s ease;
}

.renewal-kv.is-whiteout .renewal-kv__video--fg {
  filter: contrast(0) brightness(2);
}

.renewal-kv__overlays {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.renewal-kv__badge {
  position: absolute;
  top: calc(1% + 30px);
  left: 50px;
  width: clamp(160px, 11.1vw, 320px);
  height: auto;
  pointer-events: auto;
}

.renewal-kv__webshop {
  position: absolute;
  top: 58%;
  right: 0.5%;
  z-index: 1;
  width: clamp(220px, 28.2vw, 812px);
  transform: translateY(calc(-50% + 30px));
  pointer-events: auto;
}

#renewal-kv-webshop-layer {
  position: fixed;
  inset: 0;
  z-index: 10000001;
  pointer-events: none;
  overflow: visible;
}

#renewal-kv-webshop-layer .renewal-kv__webshop {
  pointer-events: auto;
}

body.renewal .renewal-kv__webshop.is-follow-fixed {
  position: fixed;
  top: auto;
  right: 0.5%;
  bottom: 16px;
  z-index: 1;
  transform: scale(0.5);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

body.renewal .renewal-kv__webshop.is-follow-fixed.is-follow-enlarged,
body.renewal .renewal-kv__webshop.is-follow-fixed:focus-within {
  transform: scale(1);
}

.renewal-kv__webshop-link {
  display: block;
}

.renewal-kv__webshop-link img {
  display: block;
  width: 100%;
  height: auto;
}

.renewal-kv__webshop-stores {
  position: absolute;
  top: 56.3%;
  left: 26%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.35vw, 18px);
  width: 28.2%;
}

.renewal-kv__webshop-stores a {
  display: block;
}

.renewal-kv__webshop-stores a:first-child,
.renewal-kv__webshop-stores a:last-child {
  width: 84.5%;
}

.renewal-kv__webshop-stores a:last-child {
  margin-top: -15px;
}

.renewal-kv__webshop-stores img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.renewal-store-float {
  display: none;
}

.renewal-kv__lang-switcher {
  position: absolute;
  display: block;
  top: calc(1% + 30px);
  right: 50px;
  width: clamp(140px, 10.4vw, 299px);
  pointer-events: auto;
}

.renewal-kv__lang {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.renewal-kv__lang img {
  display: block;
  width: 100%;
  height: auto;
}

.renewal-kv__lang-code {
  position: absolute;
  top: 50%;
  left: 14%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28%;
  height: 58%;
  color: #087db9;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 1.6vw, 30px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(-50%);
}

.renewal-kv__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: max(280px, 100%);
  max-height: min(420px, 70vh);
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  border: 2px solid #159fd0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 8px 24px rgba(5, 34, 73, 0.35);
  list-style: none;
}

.renewal-kv__lang-menu[hidden] {
  display: none;
}

.renewal-kv__lang-menu li {
  margin: 0;
  padding: 0;
}

.renewal-kv__lang-menu button {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  color: #12385c;
  background: transparent;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.renewal-kv__lang-menu-code {
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-align: left;
}

.renewal-kv__lang-menu-name {
  text-align: left;
}

.renewal-kv__lang-menu button:hover,
.renewal-kv__lang-menu button:focus-visible,
.renewal-kv__lang-menu button[aria-checked="true"] {
  color: #fff;
  background: #087db9;
  outline: none;
}

/* ユニットタイトル：KVフレーム内「ブレイブ フロンティア レギオン」直下 */
.renewal-unit__title {
  position: absolute;
  top: calc(-1 * var(--unit-title-h) - 80 / 1440 * var(--renewal-vw));
  left: 50%;
  z-index: 10;
  width: calc(748 / 1440 * var(--renewal-vw));
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.renewal-unit__title img {
  display: block;
  width: 100%;
  height: auto;
}

/* ----- Unit (Figma base: 1442×936) ----- */
.renewal-section.renewal-unit {
  --kv-frame-h: calc(var(--renewal-vw) * 2878 / 2880);
  --unit-title-w: calc(748 / 1440 * var(--renewal-vw));
  --unit-title-h: calc(var(--unit-title-w) * 996 / 1496);
  --unit-title-top: calc(var(--kv-frame-h) * 0.7 - 80 / 1440 * var(--renewal-vw));
  position: relative;
  z-index: 2;
  max-width: none;
  margin-top: calc(
    var(--unit-title-top) + var(--unit-title-h) - var(--kv-frame-h) + 100 / 1440 * var(--renewal-vw)
  );
  padding: 0 0 calc(75 / 1440 * var(--renewal-vw));
  overflow: visible;
}

.renewal-unit__body {
  position: relative;
  z-index: 1;
  width: calc(1442 / 1440 * var(--renewal-vw));
  max-width: 100%;
  aspect-ratio: 1442 / 936;
  margin: 0 auto;
  overflow: visible;
}

.renewal-unit__arrow {
  position: absolute;
  top: 40%;
  left: 5.2%;
  z-index: 6;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.92;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  transition: opacity 0.2s;
}

.renewal-unit__arrow--prev {
  transform: translate(
      calc(87 / 1440 * var(--renewal-vw) + 835 / 1440 * var(--renewal-vw) * 0.07),
      calc(-270 / 1440 * var(--renewal-vw) + 835 / 1440 * var(--renewal-vw) * 1182 / 1670 * 0.46)
    )
    translateY(-50%);
}

.renewal-unit__arrow--next {
  transform: translate(
      calc(147 / 1440 * var(--renewal-vw) + 835 / 1440 * var(--renewal-vw) * 0.7),
      calc(-270 / 1440 * var(--renewal-vw) + 835 / 1440 * var(--renewal-vw) * 1182 / 1670 * 0.46)
    )
    translateY(-50%);
}

.renewal-unit__arrow:hover {
  opacity: 1;
}

.renewal-unit__arrow img {
  --renewal-unit-arrow-direction: scale(1);
  display: block;
  width: calc(122 / 1440 * var(--renewal-vw));
  height: auto;
  filter: drop-shadow(0 0 10px #0a2c94);
  transform: var(--renewal-unit-arrow-direction);
  transform-origin: center;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.renewal-unit__arrow--prev img {
  --renewal-unit-arrow-direction: scaleY(-1);
}

.renewal-unit__arrow--next img {
  --renewal-unit-arrow-direction: rotate(180deg);
}

.renewal-unit__arrow.is-pressed img,
.renewal-unit__arrow:active img {
  transform: var(--renewal-unit-arrow-direction) scale(0.82);
}

.renewal-unit__content {
  position: absolute;
  inset: 0;
}

/* Component_進化形態: 580×653 @ 1442 */
.renewal-unit__panel {
  position: absolute;
  top: 8%;
  left: 0;
  z-index: 5;
  width: calc(580 / 1442 * 100%);
  aspect-ratio: 580 / 653;
  transform: translate(
    calc(50 / 1440 * var(--renewal-vw)),
    calc(-250 / 1440 * var(--renewal-vw))
  );
}

.renewal-unit__panel-frame {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.renewal-unit__panel-info {
  position: absolute;
  inset: 6.89% 7.76%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.renewal-unit__name {
  flex: 0 0 auto;
  display: block;
  width: calc(980 / 1440 * var(--renewal-vw));
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding-top: calc(8 / 1440 * var(--renewal-vw));
  object-fit: contain;
}

.renewal-unit__evo-list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(15 / 1440 * var(--renewal-vw));
  margin: 0;
  padding: calc(96 / 1440 * var(--renewal-vw)) 0 calc(12 / 1440 * var(--renewal-vw));
  min-height: 0;
}

.renewal-unit__evo-item {
  position: relative;
  display: block;
  width: 73.47%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.2s;
}

.renewal-unit__evo-img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s;
}

.renewal-unit__evo-img--off {
  position: relative;
}

.renewal-unit__evo-img--on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.renewal-unit__evo-item.is-active .renewal-unit__evo-img--off,
.renewal-unit__evo-item:focus-visible .renewal-unit__evo-img--off {
  opacity: 0;
}

.renewal-unit__evo-item.is-active .renewal-unit__evo-img--on,
.renewal-unit__evo-item:focus-visible .renewal-unit__evo-img--on {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .renewal-unit__evo-item:hover {
    filter: brightness(1.05);
  }

  .renewal-unit__evo-item:hover .renewal-unit__evo-img--off {
    opacity: 0;
  }

  .renewal-unit__evo-item:hover .renewal-unit__evo-img--on {
    opacity: 1;
  }
}

/* Component 1_chara: 981×936 @ 1442 */
.renewal-unit__visual {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 68.03%;
  height: 100%;
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
}

.renewal-unit__visual img,
.renewal-game__stage img {
  -webkit-user-drag: none;
}

.renewal-unit__chara-main {
  position: absolute;
  top: auto;
  bottom: calc(100% - 40% - 63.07%);
  left: 50%;
  width: calc(2198 / 1440 * var(--renewal-vw));
  max-width: none;
  height: auto;
  transform: translate(
    calc(-50% + 85 / 1440 * var(--renewal-vw)),
    calc(-480 / 1440 * var(--renewal-vw))
  );
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 0.24s ease,
    translate 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    scale 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.renewal-unit__visual.is-changing .renewal-unit__chara-main {
  opacity: 0;
}

.renewal-unit__visual.is-slide-entering .renewal-unit__chara-main {
  opacity: 0;
  translate: 0 clamp(48px, 6vw, 86px);
  transition: none;
}

.renewal-unit__visual.is-zoom-changing .renewal-unit__chara-main {
  opacity: 0;
  scale: 0.82;
}

.renewal-unit__visual.is-zoom-entering .renewal-unit__chara-main {
  opacity: 0;
  scale: 0.82;
  transition: none;
}

.renewal-unit__chara-dot {
  position: absolute;
  top: 40%;
  left: 54.6%;
  z-index: 1;
  width: auto;
  height: calc(458 / 1440 * var(--renewal-vw));
  max-width: none;
  transform: translate(
    -50%,
    calc(-350 / 1440 * var(--renewal-vw))
  );
  object-fit: contain;
  pointer-events: none;
}

.renewal-unit__chara-dot.is-arufa-offset {
  margin-left: 50px;
}

/* ----- Game slider ----- */
.renewal-section.renewal-game {
  width: calc(1360 / 1440 * var(--renewal-vw));
  max-width: none;
  margin: calc(-550 / 1440 * var(--renewal-vw)) auto 0;
  padding: 0 0 calc(115 / 1440 * var(--renewal-vw));
  min-height: calc(897.79 / 1440 * var(--renewal-vw));
}

.renewal-game > .renewal-section__title {
  width: calc(748 / 1440 * var(--renewal-vw));
  margin: calc(-121 / 1440 * var(--renewal-vw)) auto 0;
}

.renewal-game__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1360 / 641;
  margin: calc(-101 / 1440 * var(--renewal-vw)) auto calc(40 / 1440 * var(--renewal-vw));
  overflow: visible;
  touch-action: pan-y;
  user-select: none;
}

.renewal-game__slider {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 1200px;
}

.renewal-game__item {
  position: absolute;
  margin: 0;
  padding: 0;
}

.renewal-game__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.renewal-game__stage.is-awaiting-reveal .renewal-game__slide {
  opacity: 0;
}

.renewal-game__slide img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  filter:
    drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 10px #ffffff)
    drop-shadow(0 0 10px #ffffff);
  -webkit-user-drag: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .renewal-unit__chara-main {
    transition: none;
  }

  .renewal-unit__arrow img {
    transition: none;
  }

  .renewal-unit__arrow.is-pressed img,
  .renewal-unit__arrow:active img {
    transform: var(--renewal-unit-arrow-direction);
  }

  .renewal-game__item {
    transition: none !important;
  }
}

.renewal-game__arrow {
  position: absolute;
  z-index: 10;
  width: calc(81 / 1360 * 100%);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: none;
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.renewal-game__arrow:hover {
  filter: brightness(1.15);
  transform: scale(1.14);
}

.renewal-game__arrow.is-pressed,
.renewal-game__arrow:active {
  transform: scale(0.9);
}

.renewal-game__arrow--prev {
  left: calc(407 / 1360 * 100%);
  top: calc(253 / 641 * 100%);
}

.renewal-game__arrow--next {
  left: calc(872 / 1360 * 100%);
  top: calc(254 / 641 * 100%);
}

.renewal-game__arrow--prev img {
  transform: scaleY(-1);
}

.renewal-game__arrow--next img {
  transform: rotate(-180deg);
}

.renewal-game__arrow img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 10px #ffffff) drop-shadow(0 0 10px #ffffff)
    drop-shadow(0 0 10px #ffffff);
}

@media (prefers-reduced-motion: reduce) {
  .renewal-game__arrow {
    transition: none;
  }

  .renewal-game__arrow.is-pressed,
  .renewal-game__arrow:active,
  .renewal-game__arrow:hover {
    transform: none;
  }
}

/* ----- SNS ----- */
.renewal-section.renewal-sns {
  width: calc(1470 / 1440 * var(--renewal-vw));
  max-width: none;
  margin: 0 auto;
  padding: 0 0 calc(40 / 1440 * var(--renewal-vw));
  position: relative;
  left: calc(-12 / 1440 * var(--renewal-vw));
  overflow: visible;
}

.renewal-sns__frame {
  position: relative;
  width: 100%;
  overflow: visible;
}

.renewal-sns__bg {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0;
  transform: translateY(calc(-180 / 1440 * var(--renewal-vw)));
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.7));
}

.renewal-sns__link {
  position: absolute;
  left: calc(326 / 1470 * 100%);
  top: calc(117 / 1440 * var(--renewal-vw));
  width: calc(794 / 1470 * 100%);
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

.renewal-sns__link img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s;
}

.renewal-sns__link:hover img {
  opacity: 0.85;
}

/* ----- Footer ----- */
.renewal-footer {
  width: calc(887 / 1440 * var(--renewal-vw));
  margin: calc(-120 / 1440 * var(--renewal-vw)) auto 0;
  padding: 0 0 calc(80 / 1440 * var(--renewal-vw));
  color: #010101;
}

.renewal-footer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100 / 1440 * var(--renewal-vw));
  width: calc(840 / 1440 * var(--renewal-vw));
  margin: 0 auto;
}

.renewal-footer__info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: calc(64 / 1440 * var(--renewal-vw));
  width: 100%;
}

.renewal-footer__icon {
  flex: 0 0 auto;
  width: calc(200 / 1440 * var(--renewal-vw));
  height: auto;
  aspect-ratio: 1;
  border-radius: calc(32 / 1440 * var(--renewal-vw));
  object-fit: cover;
}

.renewal-footer__spec {
  flex: 0 1 calc(387 / 1440 * var(--renewal-vw));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(16 / 1440 * var(--renewal-vw));
  text-align: left;
}

.renewal-footer__spec-row {
  display: grid;
  grid-template-columns: calc(94 / 387 * 100%) 1fr;
  align-items: start;
  justify-items: start;
  margin: 0;
  padding-bottom: calc(16 / 1440 * var(--renewal-vw));
  border-bottom: 1px solid #010101;
  font-size: calc(12 / 1440 * var(--renewal-vw));
  line-height: 1.5;
  text-align: left;
}

.renewal-footer__spec-row--plain {
  padding-bottom: 0;
  border-bottom: none;
}

.renewal-footer__spec-os {
  display: flex;
  flex-direction: column;
  gap: calc(8 / 1440 * var(--renewal-vw));
  padding-bottom: calc(16 / 1440 * var(--renewal-vw));
  border-bottom: 1px solid #010101;
  overflow: visible;
}

.renewal-footer__spec-row dt {
  margin: 0;
  font-weight: 600;
  text-align: left;
}

.renewal-footer__spec-row dd {
  margin: 0;
  font-weight: 600;
  text-align: left;
}

.renewal-footer__spec-value--bold {
  font-weight: 700;
}

.renewal-footer__spec-note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 0;
  padding-bottom: calc(16 / 1440 * var(--renewal-vw));
  border-bottom: 1px solid #010101;
  font-size: calc(10 / 1440 * var(--renewal-vw));
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.renewal-footer__spec-note--plain {
  padding-bottom: 0;
  border-bottom: none;
  width: max-content;
  max-width: none;
}

.renewal-footer__spec-note span {
  font-weight: 500;
  flex: 0 0 auto;
}

.renewal-footer__spec-note p {
  margin: 0;
  white-space: nowrap;
}

.renewal-footer__stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 / 1440 * var(--renewal-vw));
  width: calc(400 / 1440 * var(--renewal-vw));
}

.renewal-footer__store-badges {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: calc(26.1 / 1440 * var(--renewal-vw));
  width: 100%;
}

.renewal-footer__store-badges a {
  display: block;
  flex: 0 0 auto;
}

.renewal-footer__store-badges a:first-child img {
  display: block;
  width: calc(167.07 / 1440 * var(--renewal-vw));
  height: auto;
}

.renewal-footer__store-badges a:last-child img {
  display: block;
  width: calc(206.83 / 1440 * var(--renewal-vw));
  height: auto;
}

.renewal-footer__store-notes {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  max-width: calc(400 / 1440 * var(--renewal-vw));
  font-size: calc(10 / 1440 * var(--renewal-vw));
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: left;
}

.renewal-footer__store-notes p {
  --renewal-store-note-mark: 1.25em;
  margin: 0;
  padding-left: var(--renewal-store-note-mark);
  text-indent: calc(-1 * var(--renewal-store-note-mark));
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.renewal-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(80 / 1440 * var(--renewal-vw));
  width: 100%;
  margin: calc(99 / 1440 * var(--renewal-vw)) auto 0;
}

.renewal-footer__links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: calc(46 / 1440 * var(--renewal-vw));
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.renewal-footer__links li {
  display: flex;
  margin: 0;
}

.renewal-footer__links a {
  color: #010101;
  font-size: calc(14 / 1440 * var(--renewal-vw));
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.renewal-footer__links a:hover {
  text-decoration: underline;
}

.renewal-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.renewal-footer__copyright {
  margin: 0;
  color: #010101;
  font-size: calc(16 / 1440 * var(--renewal-vw));
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.renewal-footer__copyright--global .renewal-footer__copyright-part {
  display: inline;
}

.renewal-footer__copyright--global
  .renewal-footer__copyright-part
  + .renewal-footer__copyright-part::before {
  content: " ";
}

.renewal-footer .pagetop {
  position: fixed;
  right: 16px;
  bottom: calc(var(--renewal-pagetop-bottom, 16px) + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.renewal .renewal-footer .pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* WEB SHOP 追従レイヤー（10000001）より前面でクリック可能にする */
@media (min-width: 601px) {
  body.renewal .renewal-footer .pagetop {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 10000002;
  }
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .renewal-kv__layer--fg-slot {
    width: 28%;
    height: 55%;
    top: 5%;
  }

  .renewal-unit__body {
    width: min(100%, 580px);
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    padding-bottom: 48px;
  }

  .renewal-unit__arrow {
    display: none;
  }

  .renewal-unit__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .renewal-unit__panel {
    position: relative;
    top: auto;
    left: auto;
    width: calc(580 / 1440 * var(--renewal-vw));
    transform: none;
  }

  .renewal-unit__visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    min-height: 280px;
  }

  .renewal-unit__chara-main {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
  }

  .renewal-unit__chara-dot {
    top: auto;
    bottom: 0;
    left: 50%;
    width: auto;
    height: calc(458 / 1440 * var(--renewal-vw));
    transform: translate(
      -50%,
      calc(-340 / 1440 * var(--renewal-vw))
    );
  }

  .renewal-footer {
    width: min(92vw, 887px);
    margin-top: -80px;
  }

  .renewal-footer__body {
    width: min(92vw, 840px);
  }

  .renewal-footer__info {
    flex-direction: column;
    align-items: center;
  }

  .renewal-footer__spec {
    width: 100%;
    max-width: none;
  }

  .renewal-footer__spec-row {
    grid-template-columns: 94px 1fr;
  }

  .renewal-footer__store-badges {
    flex-direction: column;
    align-items: flex-start;
  }

  .renewal-footer__meta {
    gap: 40px;
    margin-top: 30px;
  }

  .renewal-footer__links {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: calc(46 / 1440 * var(--renewal-vw));
    width: max-content;
    max-width: 100%;
  }

  .renewal-footer__links a {
    white-space: nowrap;
  }
}

@media (max-width: 600px) {
  body.renewal {
    --renewal-sp-vw: 100vw;
    --renewal-float-h: calc(86 / 375 * var(--renewal-sp-vw));
    --renewal-float-banner-h: calc(242 / 375 * var(--renewal-sp-vw) * 141 / 453);
    --renewal-pagetop-gap: calc(12 / 375 * var(--renewal-sp-vw));
    --renewal-pagetop-bottom: calc(
      var(--renewal-float-h) + var(--renewal-float-banner-h) + var(--renewal-pagetop-gap)
    );
    --renewal-bg-h: calc(5690 / 752 * var(--renewal-sp-vw));
    --renewal-bg-display-h: calc(var(--renewal-bg-h) - var(--renewal-float-h));
    overflow-y: auto !important;
    background-image: url(../img/PC/SP/scbf_sp_bg.webp);
    background-repeat: no-repeat;
    background-position: center top;
    /* 固定ストアバー分だけ背景の描画高さを短くし、下端装飾が隠れないようにする */
    background-size: var(--renewal-sp-vw) calc(100% - var(--renewal-float-h));
    min-height: var(--renewal-bg-h);
  }

  body.renewal .renewal-main {
    min-height: var(--renewal-bg-display-h);
    padding-bottom: var(--renewal-float-h);
    box-sizing: border-box;
  }

  /* ----- KV ----- */
  .renewal-kv__content {
    display: none;
  }

  .renewal-kv__overlays {
    display: block;
    z-index: 6;
  }

  .renewal-kv__webshop {
    display: none;
  }

  .renewal-kv__lang-switcher {
    top: calc(38 / 375 * var(--renewal-sp-vw));
    right: calc(13 / 375 * var(--renewal-sp-vw));
    width: calc(150 / 375 * var(--renewal-sp-vw));
  }

  .renewal-kv__lang-code {
    font-size: calc(14 / 375 * var(--renewal-sp-vw));
  }

  .renewal-kv__lang-menu {
    top: calc(100% + 6 / 375 * var(--renewal-sp-vw));
    width: max(calc(280 / 375 * var(--renewal-sp-vw)), 100%);
    max-height: min(70vh, calc(360 / 375 * var(--renewal-sp-vw)));
    padding: calc(6 / 375 * var(--renewal-sp-vw));
    border-radius: calc(10 / 375 * var(--renewal-sp-vw));
  }

  .renewal-kv__lang-menu button {
    grid-template-columns: calc(56 / 375 * var(--renewal-sp-vw)) 1fr;
    column-gap: calc(8 / 375 * var(--renewal-sp-vw));
    padding: calc(8 / 375 * var(--renewal-sp-vw)) calc(10 / 375 * var(--renewal-sp-vw));
    font-size: calc(12 / 375 * var(--renewal-sp-vw));
    border-radius: calc(6 / 375 * var(--renewal-sp-vw));
  }

  .renewal-kv__layer--frame .renewal-kv__badge--anniversary {
    top: calc(38 / 375 * var(--renewal-sp-vw));
    left: calc(18 / 375 * var(--renewal-sp-vw));
    width: auto;
    height: calc(41 / 375 * var(--renewal-sp-vw));
    max-width: none;
    object-fit: contain;
    object-position: left top;
    pointer-events: none;
  }

  body.renewal .renewal-kv__badge--anniversary {
    display: block;
    max-height: none;
  }

  .renewal-kv > .renewal-kv__layer--fg-slot {
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    transform: none;
  }

  .renewal-kv__layer--frame {
    z-index: 2;
  }

  .renewal-kv__frame-img {
    width: 100%;
    height: auto;
  }

  .renewal-store-float {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .renewal-store-float__banner {
    display: block;
    flex: 0 0 auto;
    order: 1;
    width: calc(242 / 375 * var(--renewal-sp-vw));
    margin: 0 0 calc(-1 * var(--renewal-float-h)) calc(133 / 375 * var(--renewal-sp-vw));
    padding: 0;
    line-height: 0;
    font-size: 0;
    transform: translateY(calc(-1 * var(--renewal-float-h)));
  }

  .renewal-store-float__banner img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .renewal-store-float__stores {
    order: 2;
    display: flex;
    flex: 0 0 var(--renewal-float-h);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(22 / 375 * var(--renewal-sp-vw));
    width: 100%;
    min-height: var(--renewal-float-h);
    margin: 0;
    padding: 0 calc(16 / 375 * var(--renewal-sp-vw));
    background: linear-gradient(180deg, #000000 0%, #666666 100%);
    box-sizing: border-box;
  }

  .renewal-store-float__stores a {
    display: block;
    flex: 0 0 auto;
  }

  .renewal-store-float__stores a:first-child {
    width: calc(139 / 375 * var(--renewal-sp-vw));
    height: calc(52 / 375 * var(--renewal-sp-vw));
  }

  .renewal-store-float__stores a:last-child {
    width: calc(177 / 375 * var(--renewal-sp-vw));
    height: calc(52 / 375 * var(--renewal-sp-vw));
  }

  .renewal-store-float__stores img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center center;
  }

  .renewal-footer .pagetop {
    bottom: calc(var(--renewal-pagetop-bottom, 16px) + env(safe-area-inset-bottom, 0px));
    z-index: 10001;
  }

  body.renewal .renewal-footer .pagetop a {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    outline: none;
  }

  body.renewal .renewal-footer .pagetop a:focus:not(:focus-visible) {
    outline: none;
  }

  /* ----- Section titles (PC画像を等比スケール) ----- */
  .renewal-section__title,
  .renewal-unit__title {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    width: calc(748 / 1440 * var(--renewal-sp-vw));
    height: auto;
    margin: 0 auto calc(16 / 375 * var(--renewal-sp-vw));
    transform: none;
  }

  .renewal-unit__title {
    top: calc(30 / 375 * var(--renewal-sp-vw));
    width: calc(228 / 375 * var(--renewal-sp-vw));
    height: calc(63.4 / 375 * var(--renewal-sp-vw));
    overflow: visible;
  }

  /* main.css h2 img { max-height: 110px } による高さ潰れを解除 */
  body.renewal .renewal-section__title img,
  body.renewal .renewal-unit__title img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    max-width: none;
    object-fit: contain;
  }

  body.renewal .renewal-unit__title img {
    position: absolute;
    top: calc(-38.27 / 375 * var(--renewal-sp-vw));
    left: 0;
  }

  /* ----- Unit ----- */
  .renewal-section.renewal-unit {
    width: 100%;
    max-width: none;
    min-height: calc(604.65 / 375 * var(--renewal-sp-vw));
    margin-top: calc(-130 / 375 * var(--renewal-sp-vw));
    padding: 0 0 calc(30 / 375 * var(--renewal-sp-vw));
    overflow: visible;
  }

  .renewal-unit__body {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
  }

  .renewal-unit__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(16 / 375 * var(--renewal-sp-vw));
    width: 100%;
  }

  .renewal-unit__visual {
    order: 1;
    position: relative;
    width: 100%;
    height: calc(335 / 375 * var(--renewal-sp-vw));
    min-height: calc(335 / 375 * var(--renewal-sp-vw));
    overflow: visible;
  }

  .renewal-unit__chara-main {
    position: absolute;
    top: calc(13 / 375 * var(--renewal-sp-vw));
    left: 0;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
    pointer-events: none;
  }

  .renewal-unit__chara-dot {
    position: absolute;
    top: calc(186 / 375 * var(--renewal-sp-vw));
    left: 50%;
    bottom: auto;
    z-index: 2;
    width: auto;
    height: calc(119 / 375 * var(--renewal-sp-vw));
    transform: translateX(-50%);
    pointer-events: none;
  }

  .renewal-unit__chara-dot.is-arufa-offset {
    margin-left: 0;
  }

  .renewal-unit__arrow {
    display: block;
    top: calc(264 / 375 * var(--renewal-sp-vw));
    z-index: 3;
    transform: none;
  }

  .renewal-unit__arrow img {
    width: calc(56 / 375 * var(--renewal-sp-vw));
    height: calc(57 / 375 * var(--renewal-sp-vw));
    object-fit: contain;
  }

  .renewal-unit__arrow--prev {
    left: calc(30.5 / 375 * var(--renewal-sp-vw));
  }

  .renewal-unit__arrow--next {
    left: auto;
    right: calc(30.5 / 375 * var(--renewal-sp-vw));
  }

  .renewal-unit__arrow--prev img {
    --renewal-unit-arrow-direction: scale(1);
  }

  .renewal-unit__arrow--next img {
    --renewal-unit-arrow-direction: scaleX(-1);
  }

  .renewal-unit__panel {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    width: calc(338.82 / 375 * var(--renewal-sp-vw));
    max-width: 100%;
    aspect-ratio: auto;
    transform: none;
  }

  .renewal-unit__panel-frame {
    display: none;
  }

  .renewal-unit__panel-info {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 / 375 * var(--renewal-sp-vw));
  }

  .renewal-unit__name {
    order: 1;
    width: calc(318.82 / 375 * var(--renewal-sp-vw));
    max-width: 100%;
    padding-top: 0;
  }

  .renewal-unit__panel-info::before {
    order: 2;
    content: "";
    display: block;
    width: calc(172 / 375 * var(--renewal-sp-vw));
    height: calc(24.5 / 375 * var(--renewal-sp-vw));
    background: var(
        --renewal-sp-shinka-bg,
        url("../img/PC/SP/scbf_sp_shinka.webp")
      )
      no-repeat center / contain;
  }

  .renewal-unit__evo-list {
    order: 3;
    display: grid;
    grid-template-columns: repeat(2, calc(156.16 / 375 * var(--renewal-sp-vw)));
    justify-content: center;
    column-gap: calc(6.51 / 375 * var(--renewal-sp-vw));
    row-gap: calc(9 / 375 * var(--renewal-sp-vw));
    width: calc(318.82 / 375 * var(--renewal-sp-vw));
    height: calc(100.96 / 375 * var(--renewal-sp-vw));
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-height: 0;
  }

  .renewal-unit__evo-item {
    min-width: 0;
    width: calc(156.16 / 375 * var(--renewal-sp-vw));
  }

  .renewal-unit__evo-item:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  .renewal-unit__evo-img {
    width: 100%;
    height: auto;
  }

  /* ----- Game ----- */
  .renewal-section.renewal-game {
    width: 100%;
    max-width: none;
    margin: calc(30 / 375 * var(--renewal-sp-vw)) auto 0;
    padding: calc(16 / 375 * var(--renewal-sp-vw)) 0;
    min-height: auto;
    overflow: visible;
  }

  .renewal-game > .renewal-section__title {
    width: calc(228 / 375 * var(--renewal-sp-vw));
    height: calc(63.4 / 375 * var(--renewal-sp-vw));
    margin: 0 auto;
    overflow: hidden;
  }

  body.renewal .renewal-game > .renewal-section__title img {
    position: absolute;
    top: calc(-38.27 / 375 * var(--renewal-sp-vw));
    left: 0;
    width: 100%;
    height: auto;
  }

  .renewal-game__stage {
    left: 50%;
    width: calc(513 / 375 * var(--renewal-sp-vw));
    aspect-ratio: 512.91 / 355;
    margin: calc(24 / 375 * var(--renewal-sp-vw)) 0 calc(16 / 375 * var(--renewal-sp-vw));
    transform: translateX(-50%);
  }

  .renewal-game__slide img {
    filter:
      drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 3px #ffffff)
      drop-shadow(0 0 3px #ffffff);
  }

  .renewal-game__arrow {
    width: calc(35 / 375 * var(--renewal-sp-vw));
  }

  .renewal-game__arrow--prev {
    left: 24.66%;
    top: 46.1%;
  }

  .renewal-game__arrow--next {
    left: 68.79%;
    top: 46.1%;
  }

  /* ----- SNS ----- */
  .renewal-section.renewal-sns {
    width: 100%;
    max-width: none;
    left: 0;
    margin: 0 auto;
    padding: 0 0 calc(32 / 375 * var(--renewal-sp-vw));
  }

  .renewal-sns__frame {
    left: auto;
    width: 100%;
    transform: none;
  }

  .renewal-sns__picture {
    display: block;
    width: 100%;
  }

  .renewal-sns__bg {
    width: 100%;
    max-width: none;
    margin-top: 0;
    transform: none;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
  }

  .renewal-sns__link {
    z-index: 3;
    left: calc(28 / 375 * var(--renewal-sp-vw));
    top: calc(83 / 375 * var(--renewal-sp-vw));
    width: calc(319 / 375 * var(--renewal-sp-vw));
  }

  /* ----- Footer ----- */
  .renewal-footer {
    width: calc(343 / 375 * var(--renewal-sp-vw));
    margin: calc(62 / 375 * var(--renewal-sp-vw)) auto 0;
    padding: 0;
  }

  .renewal-footer__body {
    position: relative;
    top: calc(-50 / 375 * var(--renewal-sp-vw));
    display: grid;
    grid-template-columns: calc(104 / 375 * var(--renewal-sp-vw)) 1fr;
    gap: calc(32 / 375 * var(--renewal-sp-vw));
    width: 100%;
  }

  .renewal-footer__info {
    display: contents;
  }

  .renewal-footer__spec {
    grid-column: 1 / -1;
    width: 100%;
    gap: calc(16 / 375 * var(--renewal-sp-vw));
  }

  .renewal-footer__icon {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: calc(104 / 375 * var(--renewal-sp-vw));
    border-radius: calc(28 / 375 * var(--renewal-sp-vw));
    transform: translateX(calc(24 / 375 * var(--renewal-sp-vw)));
  }

  .renewal-footer__stores {
    display: contents;
  }

  .renewal-footer__store-badges {
    grid-column: 2;
    grid-row: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(8 / 375 * var(--renewal-sp-vw));
    transform: translateX(calc(24 / 375 * var(--renewal-sp-vw)));
  }

  .renewal-footer__store-badges a:first-child {
    order: 2;
  }

  .renewal-footer__store-badges a:last-child {
    order: 1;
  }

  .renewal-footer__store-badges a:first-child img {
    width: calc(131 / 375 * var(--renewal-sp-vw));
  }

  .renewal-footer__store-badges a:last-child img {
    width: calc(159 / 375 * var(--renewal-sp-vw));
  }

  .renewal-footer__spec-row {
    grid-template-columns: calc(94 / 343 * 100%) 1fr;
    padding-bottom: calc(16 / 375 * var(--renewal-sp-vw));
    font-size: calc(12 / 375 * var(--renewal-sp-vw));
  }

  .renewal-footer__spec-note,
  .renewal-footer__spec-note p {
    white-space: normal;
  }

  .renewal-footer__spec-note {
    font-size: calc(10 / 375 * var(--renewal-sp-vw));
    line-height: 1.5;
  }

  .renewal-footer__store-notes {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    max-width: none;
    font-size: calc(10 / 375 * var(--renewal-sp-vw));
  }


  /* 商標文は幅に合わせて自然に折り返す（言語ごとの手動改行は使わない） */
  .renewal-footer__store-notes .renewal-sp-break {
    display: none;
  }

  .renewal-footer__store-notes .renewal-sp-indent {
    display: inline;
    padding-left: 0;
  }

  .renewal-sp-break {
    display: initial;
  }

  .renewal-sp-indent {
    display: inline-block;
    padding-left: 1em;
  }

  .renewal-footer__meta {
    position: relative;
    top: calc(-100 / 375 * var(--renewal-sp-vw));
    gap: calc(40 / 375 * var(--renewal-sp-vw));
    margin-top: calc(120 / 375 * var(--renewal-sp-vw));
  }

  .renewal-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(16 / 375 * var(--renewal-sp-vw));
    width: 100%;
    max-width: none;
  }

  .renewal-footer__links a {
    font-size: calc(12 / 375 * var(--renewal-sp-vw));
    letter-spacing: 0.05em;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .renewal-footer__copyright {
    font-size: calc(14 / 375 * var(--renewal-sp-vw));
    font-weight: 700;
  }

  .renewal-footer__copyright--global .renewal-footer__copyright-part {
    display: block;
  }

  .renewal-footer__copyright--global
    .renewal-footer__copyright-part
    + .renewal-footer__copyright-part::before {
    content: none;
  }
}