@charset "UTF-8";
/* 自動生成: scripts/assign-meteor-layout.mjs（Figma PC / cluster + Hungarian 突合）
   手動: 下部 @media (max-width) の SP ブロックは、再生成時に上書きされないようスクリプト側でマージするか、追記し直すこと。 */
/* 表示サイズ（width）のみ 1920 カンバス相当で上限。left / top / &__inner 幅は pc-vw のまま＝全幅基準。 */
/* SP: 375 基準。PC 数値（1920 カンバス上の px）に 375/1920 を掛けた design px を #tvcm .gummy-top と同じ考え方で vw 化 */
.meteor-field {
  display: none;
  overflow: hidden;
}
@media (min-width: 768px) {
  .meteor-field {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    pointer-events: none;
  }
}
@media (max-width: 767px) {
  .meteor-field {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 100%;
    pointer-events: none;
  }
}
.meteor-field__inner {
  position: relative;
  width: 100vw;
  min-height: 564.21875vw;
  margin-left: auto;
  margin-right: auto;
}
.meteor-field__item {
  position: absolute;
  will-change: transform;
}
.meteor-field__item img {
  display: block;
  width: 100%;
  height: auto;
}
.meteor-field__item--01 {
  left: 3.3333333333vw;
  top: 63.8802083333vw;
  width: calc(0.3442708333 * min(100vw, 1920px));
}
.meteor-field__item--02 {
  left: 85.8072916667vw;
  top: 64.3229166667vw;
  width: calc(0.15 * min(100vw, 1920px));
}
.meteor-field__item--03 {
  left: -5.8333333333vw;
  top: 109.0625vw;
  width: calc(0.309375 * min(100vw, 1920px));
}
.meteor-field__item--04 {
  left: 13.3854166667vw;
  top: 129.21875vw;
  width: calc(0.1354166667 * min(100vw, 1920px));
}
.meteor-field__item--05 {
  left: 21.3020833333vw;
  top: 131.875vw;
  width: calc(0.26875 * min(100vw, 1920px));
}
.meteor-field__item--06 {
  left: 86.875vw;
  top: 124.2708333333vw;
  width: calc(0.24375 * min(100vw, 1920px));
}
.meteor-field__item--07 {
  left: 31.1458333333vw;
  top: 143.3333333333vw;
  width: calc(0.2713541667 * min(100vw, 1920px));
}
.meteor-field__item--08 {
  left: 83.8541666667vw;
  top: 133.5416666667vw;
  width: calc(0.309375 * min(100vw, 1920px));
}
.meteor-field__item--09 {
  left: -13.90625vw;
  top: 175.3645833333vw;
  width: calc(0.3645833333 * min(100vw, 1920px));
}
.meteor-field__item--10 {
  left: 59.4270833333vw;
  top: 181.5364583333vw;
  width: calc(0.2049479167 * min(100vw, 1920px));
}
.meteor-field__item--11 {
  left: 89.7916666667vw;
  top: 179.5833333333vw;
  width: calc(0.24375 * min(100vw, 1920px));
  z-index: 2;
}
.meteor-field__item--12 {
  left: 9.1145833333vw;
  top: 237.0833333333vw;
  width: calc(0.24375 * min(100vw, 1920px));
}
.meteor-field__item--13 {
  left: 60.5729166667vw;
  top: 229.0104166667vw;
  width: calc(0.309375 * min(100vw, 1920px));
}
.meteor-field__item--14 {
  left: 90.0520833333vw;
  top: 240.625vw;
  width: calc(0.2734375 * min(100vw, 1920px));
}
.meteor-field__item--15 {
  left: -8.75vw;
  top: 271.4583333333vw;
  width: calc(0.2645833333 * min(100vw, 1920px));
}
.meteor-field__item--16 {
  left: 16.3541666667vw;
  top: 278.125vw;
  width: calc(0.309375 * min(100vw, 1920px));
}
.meteor-field__item--17 {
  left: 42.7083333333vw;
  top: 263.59375vw;
  width: calc(0.4703125 * min(100vw, 1920px));
}
.meteor-field__item--18 {
  left: 54.6354166667vw;
  top: 289.0104166667vw;
  width: calc(0.24375 * min(100vw, 1920px));
}
.meteor-field__item--19 {
  left: 65.9375vw;
  top: 294.1666666667vw;
  width: calc(0.2713541667 * min(100vw, 1920px));
}
.meteor-field__item--20 {
  left: -8.8020833333vw;
  top: 312.7083333333vw;
  width: calc(0.24375 * min(100vw, 1920px));
}
.meteor-field__item--21 {
  left: 27.3958333333vw;
  top: 320.0520833333vw;
  width: calc(0.4260416667 * min(100vw, 1920px));
}
.meteor-field__item--22 {
  left: 86.875vw;
  top: 317.0833333333vw;
  width: calc(0.3645833333 * min(100vw, 1920px));
}
.meteor-field__item--23 {
  left: -7.1875vw;
  top: 342.8125vw;
  width: calc(0.2776041667 * min(100vw, 1920px));
}
.meteor-field__item--24 {
  left: 70.8333333333vw;
  top: 343.3854166667vw;
  width: calc(0.2713541667 * min(100vw, 1920px));
}
.meteor-field__item--25 {
  left: -18.3333333333vw;
  top: 364.7916666667vw;
  width: calc(0.4703125 * min(100vw, 1920px));
}
.meteor-field__item--26 {
  left: 21.3541666667vw;
  top: 370vw;
  width: calc(0.309375 * min(100vw, 1920px));
}
.meteor-field__item--27 {
  left: -8.4375vw;
  top: 396.6666666667vw;
  width: calc(0.3645833333 * min(100vw, 1920px));
}
.meteor-field__item--28 {
  left: 19.1145833333vw;
  top: 397.34375vw;
  width: calc(0.2052083333 * min(100vw, 1920px));
}
.meteor-field__item--29 {
  left: 46.8229166667vw;
  top: 377.03125vw;
  width: calc(0.4703125 * min(100vw, 1920px));
}
.meteor-field__item--30 {
  left: 77.6041666667vw;
  top: 379.53125vw;
  width: calc(0.4067708333 * min(100vw, 1920px));
}
.meteor-field__item--31 {
  left: 6.6666666667vw;
  top: 153.59375vw;
  width: calc(0.0854166667 * min(100vw, 1920px));
}
.meteor-field__item--32 {
  left: 86.4583333333vw;
  top: 178.5416666667vw;
  width: calc(0.090625 * min(100vw, 1920px));
}
.meteor-field__item--33 {
  left: 89.1666666667vw;
  top: 211.1458333333vw;
  width: calc(0.115625 * min(100vw, 1920px));
}
.meteor-field__item--34 {
  left: 6.5625vw;
  top: 230.5208333333vw;
  width: calc(0.0463541667 * min(100vw, 1920px));
}
.meteor-field__item--35 {
  left: 4.2604166667vw;
  top: 258.9583333333vw;
  width: calc(0.059375 * min(100vw, 1920px));
}
.meteor-field__item--36 {
  left: 88.8020833333vw;
  top: 282.7604166667vw;
  width: calc(0.0614583333 * min(100vw, 1920px));
}
.meteor-field__item--37 {
  left: 70.2604166667vw;
  top: 313.0729166667vw;
  width: calc(0.0703125 * min(100vw, 1920px));
}
.meteor-field__item--38 {
  left: 19.53125vw;
  top: 372.0833333333vw;
  width: calc(0.0697916667 * min(100vw, 1920px));
}
.meteor-field__item--39 {
  left: 73.59375vw;
  top: 397.7083333333vw;
  width: calc(0.04375 * min(100vw, 1920px));
}
.meteor-field {
  /* PC の pc-vw(N) と数式上同じ % だが、SP 用に 375 基準 sp-vw で明示 */
}
@media (max-width: 767px) {
  .meteor-field {
    /* 縦に引き伸ばしてドキュメント後半までレイヤーが届くように（top のみ・min-height も同倍率） */
  }
  .meteor-field__inner {
    position: relative;
    width: 100vw;
    min-height: 1354.125vw;
    margin-left: auto;
    margin-right: auto;
  }
  .meteor-field__item--01 {
    left: 3.3333333333vw;
    top: 153.3125vw;
    width: 34.4270833333vw;
  }
  .meteor-field__item--02 {
    left: 85.8072916667vw;
    top: 154.375vw;
    width: 15vw;
  }
  .meteor-field__item--03 {
    left: -5.8333333333vw;
    top: 261.75vw;
    width: 30.9375vw;
  }
  .meteor-field__item--04 {
    left: 13.3854166667vw;
    top: 310.125vw;
    width: 13.5416666667vw;
  }
  .meteor-field__item--05 {
    left: 21.3020833333vw;
    top: 316.5vw;
    width: 26.875vw;
  }
  .meteor-field__item--06 {
    left: 86.875vw;
    top: 298.25vw;
    width: 24.375vw;
  }
  .meteor-field__item--07 {
    left: 31.1458333333vw;
    top: 344vw;
    width: 27.1354166667vw;
  }
  .meteor-field__item--08 {
    left: 83.8541666667vw;
    top: 320.5vw;
    width: 30.9375vw;
  }
  .meteor-field__item--09 {
    left: -13.90625vw;
    top: 420.875vw;
    width: 36.4583333333vw;
  }
  .meteor-field__item--10 {
    left: 59.4270833333vw;
    top: 435.6875vw;
    width: 20.4947916667vw;
  }
  .meteor-field__item--11 {
    left: 89.7916666667vw;
    top: 431vw;
    width: 24.375vw;
    z-index: 2;
  }
  .meteor-field__item--12 {
    left: 9.1145833333vw;
    top: 569vw;
    width: 24.375vw;
  }
  .meteor-field__item--13 {
    left: 60.5729166667vw;
    top: 549.625vw;
    width: 30.9375vw;
  }
  .meteor-field__item--14 {
    left: 90.0520833333vw;
    top: 577.5vw;
    width: 27.34375vw;
  }
  .meteor-field__item--15 {
    left: -8.75vw;
    top: 651.5vw;
    width: 26.4583333333vw;
  }
  .meteor-field__item--16 {
    left: 16.3541666667vw;
    top: 667.5vw;
    width: 30.9375vw;
  }
  .meteor-field__item--17 {
    left: 42.7083333333vw;
    top: 632.625vw;
    width: 47.03125vw;
  }
  .meteor-field__item--18 {
    left: 54.6354166667vw;
    top: 693.625vw;
    width: 24.375vw;
  }
  .meteor-field__item--19 {
    left: 65.9375vw;
    top: 706vw;
    width: 27.1354166667vw;
  }
  .meteor-field__item--20 {
    left: -8.8020833333vw;
    top: 750.5vw;
    width: 24.375vw;
  }
  .meteor-field__item--21 {
    left: 27.3958333333vw;
    top: 768.125vw;
    width: 42.6041666667vw;
  }
  .meteor-field__item--22 {
    left: 86.875vw;
    top: 761vw;
    width: 36.4583333333vw;
  }
  .meteor-field__item--23 {
    left: -7.1875vw;
    top: 822.75vw;
    width: 27.7604166667vw;
  }
  .meteor-field__item--24 {
    left: 70.8333333333vw;
    top: 824.125vw;
    width: 27.1354166667vw;
  }
  .meteor-field__item--25 {
    left: -18.3333333333vw;
    top: 875.5vw;
    width: 47.03125vw;
  }
  .meteor-field__item--26 {
    left: 21.3541666667vw;
    top: 888vw;
    width: 30.9375vw;
  }
  .meteor-field__item--27 {
    left: -8.4375vw;
    top: 952vw;
    width: 36.4583333333vw;
  }
  .meteor-field__item--28 {
    left: 19.1145833333vw;
    top: 953.625vw;
    width: 20.5208333333vw;
  }
  .meteor-field__item--29 {
    left: 46.8229166667vw;
    top: 904.875vw;
    width: 47.03125vw;
  }
  .meteor-field__item--30 {
    left: 77.6041666667vw;
    top: 910.875vw;
    width: 40.6770833333vw;
  }
  .meteor-field__item--31 {
    left: 6.6666666667vw;
    top: 368.625vw;
    width: 8.5416666667vw;
  }
  .meteor-field__item--32 {
    left: 86.4583333333vw;
    top: 428.5vw;
    width: 9.0625vw;
  }
  .meteor-field__item--33 {
    left: 89.1666666667vw;
    top: 506.75vw;
    width: 11.5625vw;
  }
  .meteor-field__item--34 {
    left: 6.5625vw;
    top: 553.25vw;
    width: 4.6354166667vw;
  }
  .meteor-field__item--35 {
    left: 4.2604166667vw;
    top: 621.5vw;
    width: 5.9375vw;
  }
  .meteor-field__item--36 {
    left: 88.8020833333vw;
    top: 678.625vw;
    width: 6.1458333333vw;
  }
  .meteor-field__item--37 {
    left: 70.2604166667vw;
    top: 751.375vw;
    width: 7.03125vw;
  }
  .meteor-field__item--38 {
    left: 19.53125vw;
    top: 893vw;
    width: 6.9791666667vw;
  }
  .meteor-field__item--39 {
    left: 73.59375vw;
    top: 954.5vw;
    width: 4.375vw;
  }
}

/* 惑星 SVG の常時自転（npm run layout:meteors で _meteor.scss が再生成されても残すため main に記述） */
.meteor-field__item[data-kind=planet] img {
  animation: meteor-planet-spin 32s linear infinite;
  transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .meteor-field__item[data-kind=planet] img {
    animation: none;
  }
}
@keyframes meteor-planet-spin {
  to {
    transform: rotate(360deg);
  }
}
/* #product / #tvcm::before：background-size 200% 時、見え方の周期はストップ 0〜50%＝50〜100%（g(p)=g(p+50%)） */
@keyframes section-gradient-flow-x {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #product,
  #tvcm::before {
    animation: none !important;
  }
}
/* PC: 幅は min(100vw, 1920px) を仮想カンバスに（#mv・流星は別）。 */
/* #tvcm .gummy-top: 逆アーチの谷底（手元デザインでは top=5）を基準。W×が広いほど中央付近の曲線が
   相対的に浅く見えるため、(top − 基準) を min(1, 1920/100vw) で縮小。W=1920 付近は従来の pc-vw($t) と同値。 */
/* /ride/ PC: 旧 100vw 基準（幅/1920×100 の vw 数値）をトップ同様 min(100vw,1920) 相当の pc-vw に。 */
/* 1920×1080 デザイン上の X/Y（左上原点）を、ステージ（16:9 枠）の中心基準 + pc-vw へ。ウルトラワイドで
   左上固定だと仮想キャンバスとズレるため。幅・高さは ride-pc / pc-vw のまま。 */
/* ----------------------------------------------------------------
  Reset
---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

picture,
svg,
video,
canvas {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ----------------------------------------------------------------
  dev
---------------------------------------------------------------- */
.dev-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--overlay-opacity, 0.45);
  background-image: var(--overlay-image);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

.dev-overlay[hidden] {
  display: none;
}

.dev-overlay-panel {
  position: fixed;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  left: 50%;
  top: auto;
  right: auto;
  transform: translateX(-50%);
  z-index: 9999;
  box-sizing: border-box;
  width: max-content;
  max-width: min(96vw, 420px);
  padding: 6px 10px 7px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 11px;
  line-height: 1.3;
  pointer-events: auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.dev-overlay-panel__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
}

.dev-overlay-panel__chk {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.dev-overlay-panel__select {
  min-width: 0;
  max-width: 7rem;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.2;
  color: #111;
  border-radius: 4px;
  cursor: pointer;
}

.dev-overlay-panel__opacity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 120px;
  min-width: 0;
}

.dev-overlay-panel__opacity-label {
  flex-shrink: 0;
  opacity: 0.9;
}

.dev-overlay-panel__range {
  flex: 1 1 72px;
  min-width: 56px;
  max-width: 140px;
  vertical-align: middle;
}

.dev-overlay-panel__help {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  opacity: 0.75;
}

body[data-petagoo-dev=true] main,
body[data-petagoo-dev=true] #mv,
body[data-petagoo-dev=true] #sns,
body[data-petagoo-dev=true] #sns .inner,
body[data-petagoo-dev=true] #menu {
  background: none !important;
}
body[data-petagoo-dev=true] #about::before,
body[data-petagoo-dev=true] #tvcm::before,
body[data-petagoo-dev=true] #menu::before {
  display: none !important;
}

/* ----------------------------------------------------------------
  common
---------------------------------------------------------------- */
body {
  font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-synthesis: weight;
  -webkit-text-stroke: 0.5px;
  position: relative;
}

@media (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

main {
  /* hidden だと絶対配置の流星（.meteor-field__inner の高さ）により main がスクロールコンテナになり、
     フラグメント／ハッシュ表示時に window と main で二重スクロールしてレイアウトが壊れる */
  overflow: hidden;
}
@media (min-width: 768px) {
  main {
    position: relative;
    background-image: url(../img/bg_rearmost.svg);
    background-repeat: no-repeat;
    background-position: center 56.25vw;
    background-size: 100% auto;
  }
}
@media (max-width: 767px) {
  main {
    position: relative;
    background-image: url(../img/bg_rearmost_sp.svg);
    background-repeat: no-repeat;
    background-position: center 150vw;
    background-size: 100% auto;
  }
}

@supports (overflow: clip) {
  main {
    overflow: clip;
  }
}
@media (min-width: 768px) {
  main > section {
    position: relative;
    z-index: 1;
  }
}
@media (min-width: 768px) {
  .gummy {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
}
/* ラッパー＝レイアウト基準（位置・幅・回転）。内側 img に伸縮アニメ等を載せられる。#mv は .gummy-img__inner で回転とにゅるを分離 */
.gummy-img {
  position: absolute;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  pointer-events: none;
  transform-origin: center center;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
.gummy-img > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.gummy-img {
  /* #mv 等：回転レイヤーとにゅるを分離するための内側ラッパー */
}
.gummy-img > .gummy-img__inner {
  display: block;
  width: 100%;
  height: auto;
}
.gummy-img > .gummy-img__inner > img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ----------------------------------------------------------------
  opening（初回表示のローディングオーバーレイ）
---------------------------------------------------------------- */
html.is-opening,
body.is-opening {
  overflow: hidden;
  height: 100%;
}

body.is-opening {
  touch-action: none;
}

.loading-overlay[hidden],
.opening-overlay[hidden],
.sound-select-panel[hidden] {
  display: none;
}

#mv .opening-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  cursor: pointer;
}

.opening-overlay__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}

#mv .loading-overlay,
.page-ride .loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #08265f;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}
@media (min-width: 768px) {
  #mv .loading-overlay,
  .page-ride .loading-overlay {
    background-image: url(../img/loading_bg.svg);
  }
}
@media (max-width: 767px) {
  #mv .loading-overlay,
  .page-ride .loading-overlay {
    background-image: url(../img/loading_bg_sp.svg);
  }
}

#mv .loading-overlay {
  cursor: pointer;
}

.page-ride .loading-overlay {
  cursor: default;
}

/* #mv セレクタ付きの display:flex が [hidden] より詳細度が高く、非表示にならないのを防ぐ */
#mv .opening-overlay[hidden],
#mv .loading-overlay[hidden],
.page-ride .loading-overlay[hidden] {
  display: none;
}

#mv .loading-overlay.is-exiting,
.page-ride .loading-overlay.is-exiting {
  pointer-events: none;
  animation: opening-overlay-fade-out 0.56s cubic-bezier(0.4, 0, 0.2, 1) both;
}

#mv .loading-overlay.is-loading-done .opening-overlay__status {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.opening-overlay__scene {
  position: relative;
  width: min(100vw, 1920px);
  height: 100%;
  pointer-events: none;
}

.opening-overlay__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.loading-overlay__meteor-field {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.loading-overlay__meteor-field .meteor-field__inner {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: 100%;
  margin: 0;
}
.loading-overlay__meteor-field .meteor-field__item {
  position: absolute;
}
.loading-overlay__meteor-field .meteor-field__item img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 17, 68, 0.28));
}

@media (min-width: 768px) {
  .loading-overlay__meteor-item--01 {
    top: 2.8645833333vw;
    left: -1.3541666667vw;
    width: 26.5625vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--01 {
    top: 18.1333333333vw;
    left: -11.2vw;
    width: 68.8vw;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--02 {
    top: 10.8333333333vw;
    left: 18.3333333333vw;
    width: 45.8333333333vw;
    opacity: 0.72;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--02 {
    top: 60.8vw;
    left: 18.6666666667vw;
    width: 111.4666666667vw;
    opacity: 0.66;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--03 {
    top: 8.2291666667vw;
    right: -6.1458333333vw;
    width: 19.375vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--03 {
    top: 41.6vw;
    right: -20.8vw;
    width: 56vw;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--04 {
    bottom: 10.5208333333vw;
    left: -4.375vw;
    width: 31.1458333333vw;
    opacity: 0.62;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--04 {
    bottom: 31.4666666667vw;
    left: -20.8vw;
    width: 85.8666666667vw;
    opacity: 0.58;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--05 {
    bottom: 0.9375vw;
    left: 5.3125vw;
    width: 23.3333333333vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--05 {
    bottom: 8vw;
    left: 8vw;
    width: 66.1333333333vw;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--06 {
    right: -6.25vw;
    bottom: -0.625vw;
    width: 20.2083333333vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--06 {
    right: -22.9333333333vw;
    bottom: -1.6vw;
    width: 60.2666666667vw;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--07 {
    top: 1.3541666667vw;
    right: 12.9166666667vw;
    width: 14.8958333333vw;
    opacity: 0.9;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--07 {
    top: 12.8vw;
    right: -4.8vw;
    width: 44.2666666667vw;
    opacity: 0.8;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--08 {
    right: 8.75vw;
    bottom: 6.1458333333vw;
    width: 24.375vw;
    opacity: 0.64;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--08 {
    right: -2.6666666667vw;
    bottom: 26.1333333333vw;
    width: 69.3333333333vw;
    opacity: 0.58;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--09 {
    top: 5vw;
    left: 22.7083333333vw;
    width: 11.0416666667vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--09 {
    top: 27.2vw;
    left: 50.1333333333vw;
    width: 29.3333333333vw;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--10 {
    top: 16.875vw;
    right: 18.5416666667vw;
    width: 15.4166666667vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--10 {
    top: 49.0666666667vw;
    right: 4.2666666667vw;
    width: 40vw;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--11 {
    bottom: 13.5416666667vw;
    left: 30.5208333333vw;
    width: 12.2916666667vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--11 {
    bottom: 38.9333333333vw;
    left: 22.4vw;
    width: 33.0666666667vw;
  }
}
@media (min-width: 768px) {
  .loading-overlay__meteor-item--12 {
    bottom: 3.3333333333vw;
    right: 26.875vw;
    width: 14.1666666667vw;
  }
}
@media (max-width: 767px) {
  .loading-overlay__meteor-item--12 {
    bottom: 10.1333333333vw;
    right: 25.6vw;
    width: 37.8666666667vw;
  }
}

.opening-overlay__status {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(82vw, 1080px);
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate(-50%, -52%);
}

.sound-select-panel {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

#mv .loading-overlay.is-sound-select .sound-select-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.24s ease, visibility 0s linear 0s;
}

/* ライドページのローディングでもサウンド選択パネルを利用 */
.page-ride .loading-overlay.is-loading-done .opening-overlay__status {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.page-ride .loading-overlay.is-sound-select .sound-select-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.24s ease, visibility 0s linear 0s;
}

.sound-select-panel__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .sound-select-panel__inner {
    gap: calc(0.0208333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .sound-select-panel__inner {
    gap: 4.8vw;
  }
}

.sound-select-panel__title {
  margin: 0;
  z-index: 2;
}
.sound-select-panel__title img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .sound-select-panel__title {
    width: calc(0.2796875 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .sound-select-panel__title {
    width: 68.8vw;
  }
}

.sound-select-panel__actions {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .sound-select-panel__actions {
    gap: calc(0.0416666667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .sound-select-panel__actions {
    gap: 8.5333333333vw;
  }
}

.sound-select-panel__btn {
  position: relative;
  display: block;
  appearance: none;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .sound-select-panel__btn {
    width: calc(0.1145833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .sound-select-panel__btn {
    width: 29.8666666667vw;
  }
}
.sound-select-panel__btn img {
  display: block;
  width: 100%;
  height: auto;
}

.sound-select-panel__btn-state {
  display: block;
}
.sound-select-panel__btn-state--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sound-select-panel__btn:hover .sound-select-panel__btn-state--hover,
  .sound-select-panel__btn:focus-visible .sound-select-panel__btn-state--hover {
    opacity: 1;
  }
  .sound-select-panel__btn:hover .sound-select-panel__btn-state--default,
  .sound-select-panel__btn:focus-visible .sound-select-panel__btn-state--default {
    opacity: 0;
  }
}
.sound-select-panel__gummies {
  pointer-events: none;
}

.sound-select-panel__gummy {
  position: absolute;
  z-index: 1;
  --gummy-layout-rot: 0deg;
  transform: rotate(var(--gummy-layout-rot));
}
.sound-select-panel__gummy img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .sound-select-panel__gummy--a {
    top: calc(50% - calc(0.028125 * min(100vw, 1920px)));
    left: calc(50% - calc(0.2447916667 * min(100vw, 1920px)));
    width: calc(0.0739583333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .sound-select-panel__gummy--a {
    top: calc(50% - 44.8vw);
    left: 22.9333333333vw;
    width: 17.0666666667vw;
  }
}
@media (min-width: 768px) {
  .sound-select-panel__gummy--b {
    top: calc(50% - calc(0.0072916667 * min(100vw, 1920px)));
    left: calc(50% + calc(0.1583333333 * min(100vw, 1920px)));
    width: calc(0.1010416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .sound-select-panel__gummy--b {
    top: calc(50% - 39.2vw);
    left: 57.3333333333vw;
    width: 23.4666666667vw;
  }
}

.opening-overlay__copy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.06em;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
}
@media (min-width: 768px) {
  .opening-overlay__copy {
    font-size: calc(0.0208333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy {
    font-size: 6.4vw;
  }
}

.opening-overlay__copy-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.45em, 0) scale(0.92);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.2), 0 6px 16px rgba(0, 18, 68, 0.34);
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img {
    margin: 0 calc(0.0010416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img {
    margin: 0 0.2666666667vw;
  }
}
.opening-overlay__copy-char img[alt=L] {
  margin-right: 0;
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt=L] {
    width: calc(0.0094270833 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt=L] {
    width: 2.9066666667vw;
  }
}
.opening-overlay__copy-char img[alt=O] {
  margin-right: 0;
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt=O] {
    width: calc(0.0172916667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt=O] {
    width: 5.3066666667vw;
  }
}
.opening-overlay__copy-char img[alt=A] {
  margin: 0;
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt=A] {
    width: calc(0.0155208333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt=A] {
    width: 4.7733333333vw;
  }
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt=D] {
    width: calc(0.0152604167 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt=D] {
    width: 4.6933333333vw;
  }
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt=I] {
    width: calc(0.0035416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt=I] {
    width: 1.0933333333vw;
  }
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt=N] {
    width: calc(0.0147395833 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt=N] {
    width: 4.5333333333vw;
  }
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt=G] {
    width: calc(0.01546875 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt=G] {
    width: 4.7466666667vw;
  }
}
@media (min-width: 768px) {
  .opening-overlay__copy-char img[alt="."] {
    width: calc(0.0041666667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .opening-overlay__copy-char img[alt="."] {
    width: 1.28vw;
  }
}

.opening-overlay__copy.is-copy-animate .opening-overlay__copy-char {
  animation: opening-copy-char-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--copy-delay, 0s);
}

.opening-overlay__gummies {
  width: 100vw;
  max-width: none;
  margin-top: clamp(26px, 2.8vw, 42px);
}
@media (min-width: 768px) {
  .opening-overlay__gummies {
    --loading-gummy-scale: 0.24px;
  }
}
@media (max-width: 767px) {
  .opening-overlay__gummies {
    --loading-gummy-scale: 0.13px;
  }
}

.opening-overlay__gummy-rail {
  display: flex;
  width: max-content;
  gap: clamp(30px, 2.8vw, 60px);
  will-change: transform;
}

.opening-overlay__gummy-track {
  display: flex;
  align-items: flex-end;
  gap: clamp(30px, 2.8vw, 60px);
  flex: none;
}

.opening-overlay__gummy-item {
  flex: none;
  width: calc(var(--gummy-w) * var(--loading-gummy-scale));
  margin-bottom: var(--gummy-y);
  transform-origin: center 72%;
  --gummy-layout-rot: var(--gummy-rot);
  transform: rotate(var(--gummy-layout-rot));
  will-change: transform;
}
.opening-overlay__gummy-item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .opening-overlay__gummy-item.is-loading-jump {
    animation: tvcm-gummy-top-jump var(--loading-jump-dur, 0.48s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opening-overlay__gummy-item.is-loading-jump {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sound-select-panel__gummy.is-sound-jump {
    animation: tvcm-gummy-top-jump var(--sound-jump-dur, 0.48s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sound-select-panel__gummy.is-sound-jump {
    animation: none !important;
  }
}

.opening-overlay__glow {
  position: absolute;
  display: block;
  aspect-ratio: 1/1;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  transform-origin: 50% 50%;
  opacity: 0;
  animation: opening-overlay-twinkle 2.9s linear infinite;
}
.opening-overlay__glow--glow-a {
  background-image: url(../img/meteors/glow-a.webp);
}
.opening-overlay__glow--glow-b {
  background-image: url(../img/meteors/glow-b.webp);
}
.opening-overlay__glow--glow-c {
  background-image: url(../img/meteors/glow-c.webp);
}
.opening-overlay__glow--01 {
  left: 3.1771%;
  top: 82.7435%;
  width: 4.8563%;
  animation-delay: -0.4s;
}
.opening-overlay__glow--02 {
  left: 16.6771%;
  top: 31.4917%;
  width: 5.4%;
  animation-delay: -1.6s;
}
.opening-overlay__glow--03 {
  left: 61.3516%;
  top: 67.9861%;
  width: 7.1328%;
  animation-delay: -0.9s;
}
.opening-overlay__glow--04 {
  left: 80.5036%;
  top: 12.9454%;
  width: 6.5625%;
  animation-delay: -2.1s;
}
@media (max-width: 767px) {
  .opening-overlay__glow--01 {
    left: 20.0267%;
    top: 19.0758%;
    width: 14.784%;
    animation-delay: -0.2s;
  }
  .opening-overlay__glow--02, .opening-overlay__glow--04 {
    display: none;
  }
  .opening-overlay__glow--03 {
    left: 65.992%;
    top: 70.114%;
    width: 15.936%;
    animation-delay: -1.1s;
  }
}

#mv:not(.is-show) .mv-stage {
  visibility: hidden;
  pointer-events: none;
}

html.is-opening header .nv_menu-open {
  visibility: hidden;
  pointer-events: none;
}

@keyframes opening-overlay-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes opening-overlay-twinkle {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  10% {
    opacity: 0;
    transform: rotate(36deg) scale(0);
  }
  28% {
    opacity: 1;
    transform: rotate(100.8deg) scale(1);
  }
  38% {
    opacity: 0.96;
    transform: rotate(136.8deg) scale(0.88);
  }
  48% {
    opacity: 0;
    transform: rotate(172.8deg) scale(0);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0);
  }
}
@keyframes opening-copy-char-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 0.45em, 0) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -0.06em, 0) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  #mv .loading-overlay,
  .opening-overlay__gummy-rail,
  .opening-overlay__gummy-item.is-loading-jump,
  .sound-select-panel__gummy.is-sound-jump,
  .opening-overlay__glow,
  .opening-overlay__copy-char {
    animation: none !important;
  }
  .opening-overlay__copy-char {
    opacity: 1 !important;
    transform: none !important;
  }
}
@keyframes mv-title-in {
  from {
    opacity: 0;
    transform: scale(0.65);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes mv-alien-in {
  from {
    opacity: 0;
    transform: translate(-50%, clamp(36px, 6vw, 72px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes mv-gummy-depth-in {
  0% {
    opacity: 0;
    transform: translateZ(-200px) scale(0.28) rotate(var(--mv-gummy-twist, 0deg));
  }
  100% {
    opacity: 1;
    transform: translateZ(0) scale(1) rotate(0deg);
  }
}
@keyframes mv-gummy-slap-in {
  0% {
    opacity: 0;
    transform: translateZ(-260px) scale(0.22) rotate(-11deg);
  }
  44% {
    opacity: 1;
    transform: translateZ(0) scale(0.96) rotate(3.2deg);
  }
  52% {
    transform: translateZ(0) scale(1.11) rotate(3.8deg);
  }
  60% {
    transform: translateZ(0) scale(0.94) rotate(-0.8deg);
  }
  68% {
    transform: translateZ(0) scale(1.05) rotate(0.5deg);
  }
  76% {
    transform: translateZ(0) scale(0.98) rotate(-0.2deg);
  }
  84% {
    transform: translateZ(0) scale(1.02) rotate(0.1deg);
  }
  92% {
    transform: translateZ(0) scale(0.996) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: translateZ(0) scale(1) rotate(0deg);
  }
}
@keyframes mv-gummy-stand-in {
  0% {
    transform: scale(1, 0);
  }
  50% {
    transform: scale(0.8, 1.05);
  }
  60% {
    transform: scale(0.8, 1.05);
  }
  75% {
    transform: scale(1.2, 0.6);
  }
  90% {
    transform: scale(0.9, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes mv-gummy-jump-final {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  22% {
    transform: translateY(-0.55vw) scale(1.1, 0.9);
  }
  45% {
    transform: translateY(-1.05vw) scale(0.94, 1.06);
  }
  62% {
    transform: translateY(0) scale(1.06, 0.94);
  }
  78% {
    transform: translateY(-0.2vw) scale(0.98, 1.02);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
/* #mv その他グミ：内側ラッパーにのみ回転（img 側で tvcm-gummy-nyuru と合成） */
@keyframes mv-gummy-idle-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* petagoo-c-00008：初回ジャンプ後のランダム連発用（JS がクラスを付け外し） */
@keyframes mv-gummy-idle-jump {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  22% {
    transform: translateY(-0.5vw) scale(1.08, 0.92);
  }
  45% {
    transform: translateY(-0.95vw) scale(0.95, 1.05);
  }
  62% {
    transform: translateY(0) scale(1.05, 0.95);
  }
  78% {
    transform: translateY(-0.18vw) scale(0.98, 1.02);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
@keyframes mv-catch-mask-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
/* #mv.is-show .gummy および /ride/ シーン0の .ride-scene-0__gummy で共有 */
/* ----------------------------------------------------------------
  #mv
---------------------------------------------------------------- */
#mv {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 3;
}
@media (min-width: 768px) {
  #mv {
    aspect-ratio: 16/9;
    padding: 3.125vw;
    background-image: url(../img/mv_bg.webp);
  }
}
@media (max-width: 767px) {
  #mv {
    aspect-ratio: 375/562.5;
    padding-top: 22.9333333333vw;
    background-image: url(../img/mv_bg_sp.webp);
  }
}
#mv {
  /* オープニング動画 .opening-overlay（z-index:20）より手前。クリックはオーバーレイのスキップまで透過 */
}
#mv::before {
  content: "";
  background-image: url(../img/logo-wh.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: fixed;
  mix-blend-mode: overlay;
  z-index: 21;
  pointer-events: none;
}
@media (min-width: 768px) {
  #mv::before {
    width: 7.5520833333vw;
    height: 3.6458333333vw;
    top: 2.34375vw;
    left: 1.7708333333vw;
  }
}
@media (max-width: 767px) {
  #mv::before {
    width: 19.3333333333vw;
    height: 9.3333333333vw;
    top: 6.6666666667vw;
    left: 3.4666666667vw;
  }
}
#mv h1.title {
  position: relative;
  z-index: 3;
  text-align: center;
}
@media (min-width: 768px) {
  #mv h1.title {
    transform: translateX(-0.2604166667vw);
  }
}
@media (min-width: 768px) {
  #mv h1.title img {
    height: 19.7916666667vw;
    filter: drop-shadow(0.2604166667vw 0.2604166667vw 1.0416666667vw rgba(0, 0, 0, 0.2));
  }
}
@media (max-width: 767px) {
  #mv h1.title img {
    width: 76.5333333333vw;
    filter: drop-shadow(0.1651041667vw 0.275vw 0.275vw rgba(0, 0, 0, 0.2));
  }
}
#mv .alien {
  position: absolute;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  #mv .alien {
    width: 31.0416666667vw;
    top: 25.625vw;
  }
}
@media (max-width: 767px) {
  #mv .alien {
    width: 64vw;
    top: 93.0666666667vw;
  }
}
#mv .catch {
  position: absolute;
  z-index: 4;
}
@media (min-width: 768px) {
  #mv .catch {
    top: 36.25vw;
    left: 57.9166666667vw;
    filter: drop-shadow(0.2604166667vw 0.2604166667vw 0.5208333333vw rgba(0, 0, 0, 0.3));
  }
}
@media (max-width: 767px) {
  #mv .catch {
    top: 68.8vw;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0.1651041667vw 0.275vw 0.275vw rgba(0, 0, 0, 0.2));
  }
}
@media (min-width: 768px) {
  #mv .catch img {
    width: 24.6354166667vw;
  }
}
@media (max-width: 767px) {
  #mv .catch img {
    width: 51.4666666667vw;
    max-width: none;
  }
}
@media (min-width: 768px) {
  #mv .gummy {
    /* .catch(3) より上に描画（DOM 順は .catch の後）。pointer-events: none のため NEWS はクリック可 */
    z-index: 3;
    perspective: 1500px;
    perspective-origin: 50% 38%;
    transform-style: preserve-3d;
  }
}
@media (max-width: 767px) {
  #mv .gummy {
    position: absolute;
    inset: 0;
    z-index: 3;
    perspective: 1500px;
    perspective-origin: 50% 38%;
    transform-style: preserve-3d;
    pointer-events: none;
  }
}
@media (min-width: 768px) {
  #mv .gummy-img--mv-a-00008 {
    top: 31.6666666667vw;
    left: 4.5833333333vw;
    width: 20.4166666667vw;
    transform: rotate(45deg);
    overflow: visible;
  }
  #mv .gummy-img--mv-b-00000 {
    top: 21.7708333333vw;
    left: 78.8541666667vw;
    width: 19.8958333333vw;
    transform: rotate(-45deg);
    overflow: visible;
  }
  #mv .gummy-img--mv-c-00047 {
    top: -3.3333333333vw;
    left: 72.0833333333vw;
    width: 11.5625vw;
    transform: rotate(141.02deg);
  }
  #mv .gummy-img--petagoo-a-00035 {
    top: 19.6354166667vw;
    left: 64.6354166667vw;
    width: 8.9583333333vw;
    transform: rotate(21.641deg);
  }
  #mv .gummy-img--petagoo-a-00037 {
    top: 16.25vw;
    left: 4.4791666667vw;
    width: 4.2708333333vw;
    transform: rotate(18.295deg);
  }
  #mv .gummy-img--petagoo-b-00034 {
    top: 19.53125vw;
    left: 81.875vw;
    width: 3.4895833333vw;
    transform: rotate(-1deg);
  }
  #mv .gummy-img--petagoo-b-00036 {
    top: 3.6458333333vw;
    left: 15.8333333333vw;
    width: 7.5vw;
    transform: rotate(157.754deg) scaleY(-1);
  }
  #mv .gummy-img--petagoo-c-00050 {
    top: 20.8333333333vw;
    left: 24.6354166667vw;
    width: 7.2916666667vw;
    transform: rotate(14.899deg);
    transform-origin: center center;
  }
  #mv .gummy-img--petagoo-c-00008 {
    top: 23.3333333333vw;
    left: 48.0208333333vw;
    width: 3.9583333333vw;
    transform: none;
  }
}
@media (max-width: 767px) {
  #mv .gummy-img--mv-a-00008 {
    top: 81.6vw;
    left: -13.3333333333vw;
    width: 31.4666666667vw;
    transform: rotate(45deg);
    overflow: visible;
  }
  #mv .gummy-img--mv-b-00000 {
    top: 104.5333333333vw;
    left: 77.3333333333vw;
    width: 31.4666666667vw;
    transform: rotate(-45deg);
    overflow: visible;
  }
  #mv .gummy-img--mv-c-00047 {
    top: 21.6vw;
    left: 86.1333333333vw;
    width: 16.2666666667vw;
    transform: rotate(131.622deg);
  }
  #mv .gummy-img--petagoo-a-00035 {
    top: 60.5333333333vw;
    left: 72vw;
    width: 22.9333333333vw;
    transform: rotate(21.641deg);
  }
  #mv .gummy-img--petagoo-a-00037 {
    top: 9.6vw;
    left: 32vw;
    width: 9.0666666667vw;
    transform: rotate(18.295deg);
  }
  #mv .gummy-img--petagoo-b-00034 {
    top: 3.4666666667vw;
    left: 58.1333333333vw;
    width: 9.0666666667vw;
    transform: rotate(44deg) scaleX(-1);
  }
  #mv .gummy-img--petagoo-b-00036 {
    top: 44vw;
    left: -0.5333333333vw;
    width: 14.4vw;
    transform: rotate(157.754deg) scaleY(-1);
  }
  #mv .gummy-img--petagoo-b-00044 {
    top: 135.7333333333vw;
    left: 10.4vw;
    width: 17.0666666667vw;
    transform: rotate(-30.141deg);
  }
  #mv .gummy-img--petagoo-c-00050 {
    top: 65.6vw;
    left: 23.7333333333vw;
    width: 7.4666666667vw;
    transform: rotate(14.899deg);
    transform-origin: center center;
  }
  #mv .gummy-img--petagoo-c-00008 {
    top: 88.2666666667vw;
    left: 45.8666666667vw;
    width: 8.2666666667vw;
    transform: none;
  }
}
#mv.is-show .title img {
  display: inline-block;
  transform-origin: center center;
  animation: mv-title-in 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#mv.is-show .alien {
  animation: mv-alien-in 0.5s cubic-bezier(0.22, 1, 0.32, 1) both;
  animation-delay: 0.6s;
}
@media (min-width: 768px) {
  #mv.is-show .gummy-img {
    transform-style: preserve-3d;
  }
  #mv.is-show .gummy-img > .gummy-img__inner {
    transform-style: preserve-3d;
  }
  #mv.is-show .gummy-img > .gummy-img__inner > img {
    animation: mv-gummy-depth-in 0.88s ease-in-out both;
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    transform-origin: center center;
  }
  #mv.is-show .gummy-img--mv-a-00008 > .gummy-img__inner > img,
  #mv.is-show .gummy-img--mv-b-00000 > .gummy-img__inner > img {
    animation-name: mv-gummy-slap-in;
    animation-duration: 0.88s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.95);
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    animation-fill-mode: both;
  }
  #mv.is-show .gummy-img--petagoo-c-00008 {
    transform: scaleY(0);
    transform-origin: center bottom;
    animation-name: mv-gummy-stand-in;
    animation-duration: 0.3s;
    animation-delay: calc(1.6s + var(--mv-gummy-delay, 0s));
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  #mv.is-show .gummy-img--petagoo-c-00008 > .gummy-img__inner > img {
    transform-origin: center bottom;
    animation-name: mv-gummy-jump-final;
    animation-duration: 0.55s;
    animation-delay: var(--mv-c08-jump-delay, 2.4s);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: both;
  }
  #mv.is-show {
    /* mv-a / mv-b / c-00008 以外：ラッパーで回転、img で TVCM にゅる（.is-mv-idle は mv-gummy-idle.js が付与） */
  }
  #mv.is-show .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle {
    animation: none;
    animation-delay: 0s;
    transform-origin: center center;
  }
  #mv.is-show .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle > img {
    animation: tvcm-gummy-nyuru var(--mv-idle-nyuru-dur, 2.75s) linear infinite alternate;
    animation-delay: 0s;
    transform-origin: center center;
  }
  #mv.is-show .gummy-img--petagoo-c-00008 > .gummy-img__inner > img.is-mv-idle-jump {
    animation: mv-gummy-idle-jump 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}
@media (max-width: 767px) {
  #mv.is-show .gummy-img {
    transform-style: preserve-3d;
  }
  #mv.is-show .gummy-img > .gummy-img__inner {
    transform-style: preserve-3d;
  }
  #mv.is-show .gummy-img > .gummy-img__inner > img {
    animation: mv-gummy-depth-in 0.88s ease-in-out both;
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    transform-origin: center center;
  }
  #mv.is-show .gummy-img--mv-a-00008 > .gummy-img__inner > img,
  #mv.is-show .gummy-img--mv-b-00000 > .gummy-img__inner > img {
    animation-name: mv-gummy-slap-in;
    animation-duration: 1.08s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.95);
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    animation-fill-mode: both;
  }
  #mv.is-show .gummy-img--petagoo-c-00008 {
    transform: scaleY(0);
    transform-origin: center bottom;
    animation-name: mv-gummy-stand-in;
    animation-duration: 0.3s;
    animation-delay: calc(1.6s + var(--mv-gummy-delay, 0s));
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  #mv.is-show .gummy-img--petagoo-c-00008 > .gummy-img__inner > img {
    transform-origin: center bottom;
    animation-name: mv-gummy-jump-final;
    animation-duration: 0.55s;
    animation-delay: var(--mv-c08-jump-delay, 2.4s);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: both;
  }
  #mv.is-show .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle {
    animation: none;
    animation-delay: 0s;
    transform-origin: center center;
  }
  #mv.is-show .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle > img {
    animation: tvcm-gummy-nyuru var(--mv-idle-nyuru-dur, 2.75s) linear infinite alternate;
    animation-delay: 0s;
    transform-origin: center center;
  }
  #mv.is-show .gummy-img--petagoo-c-00008 > .gummy-img__inner > img.is-mv-idle-jump {
    animation: mv-gummy-idle-jump 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}
#mv.is-show .catch img {
  transform-origin: center center;
  animation: mv-catch-mask-in 0.65s cubic-bezier(0.33, 1, 0.68, 1) both;
  animation-delay: var(--mv-catch-delay, 1.5s);
}

@media (prefers-reduced-motion: reduce) {
  #mv.is-show .title img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #mv.is-show .alien {
    animation: none !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
  #mv.is-show .gummy-img > .gummy-img__inner {
    animation: none !important;
    transform: none !important;
  }
  #mv.is-show .gummy-img > .gummy-img__inner > img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #mv.is-show .catch img {
    animation: none !important;
    clip-path: none !important;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  #mv.is-show .catch img {
    transform: rotate(-9.8deg) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img > .gummy-img__inner {
    animation: none !important;
    transform: none !important;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img > .gummy-img__inner > img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ----------------------------------------------------------------
  #about
---------------------------------------------------------------- */
#about {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  #about {
    --card-w: calc(0.4552083333 * min(100vw, 1920px));
    --card-gap: calc(0.0677083333 * min(100vw, 1920px));
    padding-top: calc(0.0291666667 * min(100vw, 1920px));
    padding-bottom: calc(0.1770833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about {
    --card-w: 78.9333333333vw;
    --card-gap: 16vw;
    padding-top: 7.2vw;
  }
}
#about::before {
  content: "";
  position: absolute;
  left: 50%;
  background: url(../img/what_bg.svg) no-repeat center top/cover;
  aspect-ratio: 1/1;
  height: auto;
  z-index: -1;
  transform: translateX(-50%) rotate(360deg) scale(0);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 768px) {
  #about::before {
    width: calc(1.0416666667 * min(100vw, 1920px));
    top: calc(-0.15625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about::before {
    width: 136vw;
    top: -6.4vw;
  }
}
@media (min-width: 768px) {
  #about:has(.news)::before {
    top: calc(-0.1041666667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about:has(.news)::before {
    top: -3.2vw;
  }
}
#about.is-revealed::before {
  transform: translateX(-50%) rotate(0deg) scale(1);
}
#about .news {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
#about .news span.gummy-img {
  display: block;
  position: absolute;
  pointer-events: none;
  visibility: hidden;
  transform-origin: center center;
}
@media (min-width: 768px) {
  #about .news span.gummy-img {
    top: calc(-0.0083333333 * min(100vw, 1920px));
    right: calc(0.0479166667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .news span.gummy-img {
    top: -1.6vw;
    right: 2.4vw;
  }
}
@media (min-width: 768px) {
  #about .news span.gummy-img img {
    width: calc(0.0578125 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .news span.gummy-img img {
    width: 9.6vw;
  }
}
#about .news span.gummy-img.is-revealed {
  visibility: visible;
  animation-name: mv-gummy-jump-final;
  animation-duration: 0.55s;
  animation-delay: 0;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
}
@media (prefers-reduced-motion: no-preference) {
  #about .news:has(.news-wrap:hover) .gummy-img img, #about .news:focus-visible .gummy-img img {
    animation: news-gummy-purupuru 0.36s linear infinite;
    will-change: transform;
  }
}
#about .news-wrap {
  box-sizing: border-box;
  overflow: hidden;
  border-top: solid #001f48;
  border-bottom: solid #001f48;
  background-color: #b6377e;
  cursor: pointer;
}
@media (min-width: 768px) {
  #about .news-wrap {
    /* 左は画面端に接し、右のみ pc-vw(180) 相当。100vw-100% は縦スクロールバー時の 100vw 差し引き。 */
    width: calc(100% - calc(0.09375 * min(100vw, 1920px)) - (100vw - 100%));
    max-width: calc(100vw - calc(0.09375 * min(100vw, 1920px)));
    margin-left: 0;
    margin-right: 0;
    height: calc(0.05625 * min(100vw, 1920px));
    border-width: calc(0.0036458333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .news-wrap {
    width: 88.5333333333vw;
    height: 8.8vw;
    border-width: 0.8vw;
  }
}
#about .news-wrap {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.6s ease-in-out;
}
#about .news-wrap.is-revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#about .news-wrap .news-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: max-content;
  min-width: min-content;
  height: 100%;
  animation: news-marquee 30s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
#about .news-wrap dl {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
}
@media (min-width: 768px) {
  #about .news-wrap dl {
    padding-left: calc(0.015625 * min(100vw, 1920px));
    padding-right: calc(0.015625 * min(100vw, 1920px));
    gap: calc(0.009375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .news-wrap dl {
    padding-left: 1.6vw;
    padding-right: 1.6vw;
    gap: 1.6vw;
  }
}
@media (min-width: 768px) {
  #about .news-wrap dl dt img {
    width: calc(0.0729166667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .news-wrap dl dt img {
    width: 12.2666666667vw;
  }
}
@media (min-width: 768px) {
  #about .news-wrap dl dd img {
    width: calc(0.3395833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .news-wrap dl dd img {
    width: 56.5333333333vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  #about .news-wrap .news-track {
    animation: none;
  }
  #about .news::after {
    animation: none !important;
  }
  #about .slide-prev.is-revealed span,
  #about .slide-next.is-revealed span {
    animation: none;
    transform: scale(1);
  }
}
#about .what {
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  #about .what {
    padding-top: calc(0.1041666667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .what {
    padding-top: 14.4vw;
  }
}
#about {
  /* clip-path は交差面積ゼロになり IO が遅れるため、data-reveal は .about-cards に載せる */
}
#about .about-cards {
  width: 100%;
}
#about .about-cards .cards {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 1;
  touch-action: none;
  cursor: grab;
  filter: brightness(3.62);
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0.45s ease-in-out, filter 1.58s ease-in-out;
}
#about .about-cards .cards.is-dragging {
  cursor: grabbing;
}
#about .about-cards .cards img {
  user-select: none;
  -webkit-user-drag: none;
}
@media (min-width: 768px) {
  #about .about-cards .cards {
    padding-bottom: calc(0.0520833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .about-cards .cards {
    padding-bottom: 12.6666666667vw;
  }
}
#about .about-cards .cards .cards-track {
  display: flex;
  width: max-content;
  gap: var(--card-gap, 0px);
  will-change: transform;
}
#about .about-cards .cards .card {
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transform: rotate(7deg);
  transition: transform 0.6s ease-out;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
#about .about-cards .cards .card.is-prev {
  transform: rotate(-7deg) translateY(7.5%);
  z-index: 1;
}
#about .about-cards .cards .card.is-next {
  transform: rotate(7deg) translateY(7.5%);
  z-index: 1;
}
#about .about-cards .cards .card.is-active {
  transform: rotate(0deg) translateY(0);
  z-index: 2;
}
#about .about-cards .cards .card img {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 768px) {
  #about .about-cards .cards .card img {
    width: calc(0.5208333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .about-cards .cards .card img {
    width: 78.9333333333vw;
  }
}
#about .about-cards .cards .card::before, #about .about-cards .cards .card::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-size: 100% 100%;
  mask-position: center center;
  mask-repeat: no-repeat;
  transition: background-color 0.16s ease;
}
#about .about-cards .cards .card::before {
  background-color: #001f48;
  mask-image: url(../img/what_card-base.svg);
  z-index: -1;
}
#about .about-cards .cards .card::after {
  background-color: #00003c;
  mask-image: url(../img/what_card-frame.svg);
  z-index: 2;
}
#about .about-cards .cards .card.card-1:hover::after {
  background-color: #b6377e;
}
#about .about-cards .cards .card.card-2:hover::after {
  background-color: #fdc81e;
}
#about .about-cards .cards .card.card-3:hover::after {
  background-color: #18a0db;
}
#about .about-cards.is-revealed .cards {
  filter: brightness(1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#about .slide-prev,
#about .slide-next {
  appearance: none;
  border: none;
  position: absolute;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
@media (min-width: 768px) {
  #about .slide-prev,
  #about .slide-next {
    top: 53.8%;
  }
}
@media (max-width: 767px) {
  #about .slide-prev,
  #about .slide-next {
    top: 50.8%;
  }
}
#about .slide-prev span,
#about .slide-next span {
  display: block;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  transform: scale(0);
  transition: none;
}
@media (min-width: 768px) {
  #about .slide-prev span,
  #about .slide-next span {
    width: calc(0.059375 * min(100vw, 1920px));
    height: calc(0.059375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .slide-prev span,
  #about .slide-next span {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
  }
}
#about .slide-prev,
#about .slide-next {
  /* 登場は animation のみ（hover では transition しない） */
}
#about .slide-prev.is-revealed span,
#about .slide-next.is-revealed span {
  animation: about-slide-arrow-reveal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
#about .slide-prev.is-revealed span:hover,
#about .slide-next.is-revealed span:hover {
  transform: scale(1.08) !important;
}
#about .slide-prev {
  left: calc(50% - var(--card-w, 0px) / 2);
  transform: translate(-50%, -50%);
}
#about .slide-prev span {
  background-image: url(../img/arrow_left.svg);
}
#about .slide-next {
  right: calc(50% - var(--card-w, 0px) / 2);
  transform: translate(50%, -50%);
}
#about .slide-next span {
  background-image: url(../img/arrow_right.svg);
}
#about .slide-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#about .slide-pagination.is-revealed {
  opacity: 1;
}
@media (min-width: 768px) {
  #about .slide-pagination {
    gap: calc(0.0104166667 * min(100vw, 1920px));
    bottom: calc(-0.015625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .slide-pagination {
    gap: 1.6vw;
    bottom: 1.6vw;
  }
}
#about .slide-pagination li {
  display: block;
  line-height: 0;
}
#about .slide-pagination button {
  appearance: none;
  border: none;
  padding: 0;
  display: block;
  background-color: #5e7596;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
@media (min-width: 768px) {
  #about .slide-pagination button {
    width: calc(0.0130208333 * min(100vw, 1920px));
    height: calc(0.0130208333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #about .slide-pagination button {
    width: 2vw;
    height: 2vw;
  }
}
#about .slide-pagination button:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
#about .slide-pagination .is-active button {
  background-color: #001f48;
}

@keyframes about-slide-arrow-reveal {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes news-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* 子は同一ブロック 4 回 — 全幅の 1/2 分移動でループ位置が揃う */
    transform: translate3d(-50%, 0, 0);
  }
}
/* NEWS バー横のグミ（.news::after）：ホバー時にぷるぷる */
@keyframes news-gummy-purupuru {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  10% {
    transform: translate3d(calc(-0.0036458333 * min(100vw, 1920px)), calc(0.0026041667 * min(100vw, 1920px)), 0) rotate(-11deg);
  }
  20% {
    transform: translate3d(calc(0.0041666667 * min(100vw, 1920px)), calc(-0.0026041667 * min(100vw, 1920px)), 0) rotate(12deg);
  }
  30% {
    transform: translate3d(calc(-0.003125 * min(100vw, 1920px)), calc(-0.003125 * min(100vw, 1920px)), 0) rotate(-10deg);
  }
  40% {
    transform: translate3d(calc(0.0036458333 * min(100vw, 1920px)), calc(0.003125 * min(100vw, 1920px)), 0) rotate(11deg);
  }
  50% {
    transform: translate3d(calc(-0.0041666667 * min(100vw, 1920px)), calc(0.0020833333 * min(100vw, 1920px)), 0) rotate(-12deg);
  }
  60% {
    transform: translate3d(calc(0.003125 * min(100vw, 1920px)), calc(-0.0036458333 * min(100vw, 1920px)), 0) rotate(10deg);
  }
  70% {
    transform: translate3d(calc(-0.0036458333 * min(100vw, 1920px)), calc(-0.0020833333 * min(100vw, 1920px)), 0) rotate(-11deg);
  }
  80% {
    transform: translate3d(calc(0.0041666667 * min(100vw, 1920px)), calc(0.0026041667 * min(100vw, 1920px)), 0) rotate(10deg);
  }
  90% {
    transform: translate3d(calc(-0.0026041667 * min(100vw, 1920px)), calc(0.003125 * min(100vw, 1920px)), 0) rotate(-9deg);
  }
}
@keyframes project-item-flow-in {
  from {
    opacity: 0;
    transform: translate3d(42vw, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* 画面下部中央付近から斜めに弾ける（各 n 番で --sns-from-x/y を持つ） */
@keyframes sns-item-pop-diagonal {
  0% {
    opacity: 0;
    transform: translate3d(var(--sns-from-x, 0px), var(--sns-from-y, min(40vh, 15rem)), 0) scale(0.68);
  }
  58% {
    opacity: 1;
  }
  78% {
    transform: translate3d(calc(var(--sns-from-x, 0px) * -0.1 + min(0.6vw, 6px)), calc(var(--sns-from-y, min(40vh, 15rem)) * -0.12 + max(-0.4rem, -1vh)), 0) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* TVCM 上部グミ：ワンショットのにゅる変形（間隔は tvcm-gummy-nyuru.js でランダム） */
@keyframes tvcm-gummy-nyuru {
  0%, 100% {
    transform: translate3d(0, 0, 0) skew(0deg, 0deg);
  }
  14% {
    transform: translate3d(0, calc(0.0026041667 * min(100vw, 1920px)), 0) skew(2deg, 1.5deg);
  }
  28% {
    transform: translate3d(0, calc(0.0057291667 * min(100vw, 1920px)), 0) skew(4deg, 3deg);
  }
  42% {
    transform: translate3d(0, calc(0.0036458333 * min(100vw, 1920px)), 0) skew(1deg, 1deg);
  }
  /* 中立を挟んで skew の向きが急に反転しないようにする */
  50% {
    transform: translate3d(0, calc(0.0015625 * min(100vw, 1920px)), 0) skew(0deg, 0deg);
  }
  62% {
    transform: translate3d(0, calc(0.0026041667 * min(100vw, 1920px)), 0) skew(-3deg, -2.5deg);
  }
  76% {
    transform: translate3d(0, calc(0.0010416667 * min(100vw, 1920px)), 0) skew(-1.2deg, -1deg);
  }
  88% {
    transform: translate3d(0, calc(0.0003125 * min(100vw, 1920px)), 0) skew(0.4deg, 0.3deg);
  }
}
/* たまに適用：振幅・skew を強め＋余韻の揺れを1段多く */
@keyframes tvcm-gummy-nyuru-intense {
  0%, 100% {
    transform: translate3d(0, 0, 0) skew(0deg, 0deg);
  }
  11% {
    transform: translate3d(0, calc(0.0041666667 * min(100vw, 1920px)), 0) skew(3.5deg, 2.8deg);
  }
  24% {
    transform: translate3d(0, calc(0.0098958333 * min(100vw, 1920px)), 0) skew(7.5deg, 5.5deg);
  }
  36% {
    transform: translate3d(0, calc(0.00625 * min(100vw, 1920px)), 0) skew(2.5deg, 2deg);
  }
  47% {
    transform: translate3d(0, calc(0.0020833333 * min(100vw, 1920px)), 0) skew(0deg, 0deg);
  }
  58% {
    transform: translate3d(0, calc(0.0052083333 * min(100vw, 1920px)), 0) skew(-7deg, -5.5deg);
  }
  69% {
    transform: translate3d(0, calc(0.0026041667 * min(100vw, 1920px)), 0) skew(-3deg, -2.5deg);
  }
  80% {
    transform: translate3d(0, calc(0.0013020833 * min(100vw, 1920px)), 0) skew(1.8deg, 1.4deg);
  }
  90% {
    transform: translate3d(0, calc(0.000625 * min(100vw, 1920px)), 0) skew(-1.2deg, -1deg);
  }
}
/* #sns 装飾グミ：足元固定の見え方用（translate なし・skew のみ） */
@keyframes sns-gummy-nyuru-skew-only {
  0%, 100% {
    transform: skew(0deg, 0deg);
  }
  14% {
    transform: skew(2deg, 1.5deg);
  }
  28% {
    transform: skew(4deg, 3deg);
  }
  42% {
    transform: skew(1deg, 1deg);
  }
  50% {
    transform: skew(0deg, 0deg);
  }
  62% {
    transform: skew(-3deg, -2.5deg);
  }
  76% {
    transform: skew(-1.2deg, -1deg);
  }
  88% {
    transform: skew(0.4deg, 0.3deg);
  }
}
/* #tvcm .gummy-top：クリック時のみ親でジャンプ（にゅるは子 img。傾きは --gummy-layout-rot） */
@keyframes tvcm-gummy-top-jump {
  0%, 100% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1, 1);
  }
  10% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.06, 0.88);
  }
  30% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, -40%, 0) scale(1, 1);
  }
  44% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, -56%, 0) scale(0.98, 1.02);
  }
  54% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.12, 0.74);
  }
  66% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(0.93, 1.1);
  }
  78% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.05, 0.92);
  }
  90% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(0.99, 1.02);
  }
}
/* ----------------------------------------------------------------
  #story
---------------------------------------------------------------- */
#story {
  text-align: center;
  position: relative;
}
@media (min-width: 768px) {
  #story {
    padding-top: calc(0.1005208333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story {
    padding-top: 19.7333333333vw;
  }
}
@media (min-width: 768px) {
  #story .gummy-img--petagoo-a-00050 {
    top: calc(0.0692708333 * min(100vw, 1920px));
    left: calc(50% + calc(0.1979166667 * min(100vw, 1920px)));
    width: calc(0.06875 * min(100vw, 1920px));
    transform: rotate(3.02deg);
  }
  #story .gummy-img--petagoo-b-00044 {
    top: calc(0.8239583333 * min(100vw, 1920px));
    left: calc(50% + calc(0.3614583333 * min(100vw, 1920px)));
    width: calc(0.1020833333 * min(100vw, 1920px));
    transform: rotate(-18.683deg);
  }
  #story .gummy-img--petagoo-c-00042 {
    top: calc(0.5015625 * min(100vw, 1920px));
    left: calc(50% + calc(-0.4458333333 * min(100vw, 1920px)));
    width: calc(0.0697916667 * min(100vw, 1920px));
    transform: none;
  }
}
@media (max-width: 767px) {
  #story .gummy-img {
    visibility: hidden;
  }
}
#story {
  /* 装飾グミ：常時にゅる（キーフレームは TVCM 上部と共通） */
}
@media (min-width: 768px) {
  #story .gummy-img > img {
    transform-origin: center center;
    animation: tvcm-gummy-nyuru var(--story-wobble-dur, 2.75s) linear infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  #story .gummy-img > img {
    animation: none !important;
  }
}
@media (min-width: 768px) {
  #story .gummy > .gummy-img:nth-child(1) > img {
    --story-wobble-dur: 2.65s;
  }
}
@media (min-width: 768px) {
  #story .gummy > .gummy-img:nth-child(2) > img {
    --story-wobble-dur: 3.05s;
  }
}
@media (min-width: 768px) {
  #story .gummy > .gummy-img:nth-child(3) > img {
    --story-wobble-dur: 2.85s;
  }
}
#story h2 img {
  display: inline-block;
}
@media (min-width: 768px) {
  #story h2 img {
    width: calc(0.5921875 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story h2 img {
    width: 85.3333333333vw;
  }
}
#story h2 img {
  transform: scale(0) rotate(720deg);
  transition: transform 1.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#story h2.is-revealed img {
  transform: scale(1) rotate(0deg);
}
#story .story-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  #story .story-wrap {
    margin-top: calc(0.0677083333 * min(100vw, 1920px));
    gap: calc(0.0416666667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story .story-wrap {
    margin-top: 6.4vw;
    gap: 8vw;
  }
}
#story p {
  color: #fff;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.6s 0.6s linear, transform 0.6s 0.6s linear;
}
#story p.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 768px) {
  #story p {
    font-size: calc(0.0197916667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story p {
    font-size: 4vw;
  }
}
@media (min-width: 768px) {
  #story p.last-text {
    margin-top: calc(0.0229166667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story p.last-text {
    margin-top: 6.4vw;
  }
}
@media (min-width: 768px) {
  #story p:nth-child(1) img {
    width: calc(0.4463541667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story p:nth-child(1) img {
    width: 71.2vw;
  }
}
@media (min-width: 768px) {
  #story p:nth-child(2) img {
    width: calc(0.446875 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story p:nth-child(2) img {
    width: 56.8vw;
  }
}
@media (min-width: 768px) {
  #story p:nth-child(3) img {
    width: calc(0.5364583333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story p:nth-child(3) img {
    width: 76.8vw;
  }
}
@media (min-width: 768px) {
  #story p:nth-child(4) img {
    width: calc(0.5161458333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #story p:nth-child(4) img {
    width: 70.4vw;
  }
}

/* ----------------------------------------------------------------
  #product
---------------------------------------------------------------- */
#product {
  margin: auto;
  /*
   * 0〜38%：従来グラデを圧縮、38〜50%：緑→シアンを幅のあるストップで戻す → 50% が先頭と同色（ループ無縫）。
   * 50〜100%：0〜50% のコピー（background 幅 200% で 1 周期ぶんシフトしても同一見え方）。
   */
  text-align: center;
}
@media (min-width: 768px) {
  #product {
    margin-top: calc(0.1270833333 * min(100vw, 1920px));
    padding: calc(0.015625 * min(100vw, 1920px)) calc(0.015625 * min(100vw, 1920px)) calc(0.0104166667 * min(100vw, 1920px)) calc(0.0104166667 * min(100vw, 1920px));
    width: calc(0.71875 * min(100vw, 1920px));
    height: calc(0.5 * min(100vw, 1920px));
    background: url(../img/product_bg.webp) no-repeat center center/contain;
  }
}
@media (max-width: 767px) {
  #product {
    margin-top: 10.9333333333vw;
    margin-left: 11.4666666667vw;
    width: 77.8666666667vw;
    padding: 2.1333333333vw 2.1333333333vw 2.1333333333vw 1.0666666667vw;
    height: 305.3333333333vw;
    background: url(../img/product_bg_sp.webp) no-repeat center center/contain;
  }
}
#product .inner {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  #product .inner {
    padding-top: calc(0.028125 * min(100vw, 1920px));
    padding-right: calc(0.0052083333 * min(100vw, 1920px));
    border-radius: calc(0.015625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .inner {
    padding-top: 4.2666666667vw;
    border-radius: 2vw;
  }
}
#product h2 .product-heading-mask__inner {
  display: inline-block;
  vertical-align: middle;
}
#product h2 .product-heading-mask__inner img {
  display: inline-block;
  background-repeat: repeat-x;
}
@media (min-width: 768px) {
  #product h2 .product-heading-mask__inner img {
    padding-bottom: calc(0.0114583333 * min(100vw, 1920px));
    background-image: radial-gradient(circle, #ffffff calc(0.001875 * min(100vw, 1920px)), transparent calc(0.001875 * min(100vw, 1920px)));
    background-position: left calc(-0.0013541667 * min(100vw, 1920px)) bottom;
    background-size: calc(0.0070833333 * min(100vw, 1920px)) calc(0.00375 * min(100vw, 1920px));
    width: calc(0.2473958333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product h2 .product-heading-mask__inner img {
    padding-bottom: 3.2vw;
    background-image: radial-gradient(circle, #ffffff 0.5333333333vw, transparent 0.5333333333vw);
    background-position: left 0vw bottom;
    background-size: 2.1333333333vw 1.0666666667vw;
    width: 50.6666666667vw;
  }
}
#product .product-items {
  display: flex;
}
@media (min-width: 768px) {
  #product .product-items {
    justify-content: center;
    gap: calc(0.0364583333 * min(100vw, 1920px));
    margin-top: calc(0.025 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items {
    flex-direction: column;
    gap: 6.9333333333vw;
    margin-top: 4.8vw;
  }
}
#product .product-items .product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  #product .product-items .product-item {
    gap: calc(0.009375 * min(100vw, 1920px));
    width: calc(0.1354166667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item {
    gap: 3.2vw;
  }
}
#product .product-items .product-item figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  #product .product-items .product-item figure {
    gap: calc(0.0010416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item figure {
    gap: 0.5333333333vw;
  }
}
#product .product-items .product-item figure img {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (min-width: 768px) {
  #product .product-items .product-item figure img {
    width: calc(0.1354166667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item figure img {
    width: 40.2666666667vw;
  }
}
#product .product-items .product-item figure figcaption {
  color: #fff;
}
@media (min-width: 768px) {
  #product .product-items .product-item figure figcaption {
    font-size: calc(0.015625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item figure figcaption {
    font-size: 4.2666666667vw;
  }
}
@media (min-width: 768px) {
  #product .product-items .product-item.flavor-grape figure figcaption img {
    height: calc(0.0148958333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item.flavor-grape figure figcaption img {
    width: 18.4vw;
  }
}
@media (min-width: 768px) {
  #product .product-items .product-item.flavor-soda figure figcaption img {
    height: calc(0.0148958333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item.flavor-soda figure figcaption img {
    width: 13.6vw;
  }
}
@media (min-width: 768px) {
  #product .product-items .product-item.flavor-pine figure figcaption img {
    height: calc(0.0148958333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item.flavor-pine figure figcaption img {
    width: 36.5333333333vw;
  }
}
#product .product-items .product-item .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 999px;
}
@media (min-width: 768px) {
  #product .product-items .product-item .btn {
    width: calc(0.1302083333 * min(100vw, 1920px));
    height: calc(0.0260416667 * min(100vw, 1920px));
    font-size: calc(0.009375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item .btn {
    width: 54.4vw;
    height: 9.8666666667vw;
    font-size: 3.2vw;
  }
}
#product .product-items .product-item .btn::after {
  content: "";
  display: inline-block;
  background-image: url(../img/arrow_tiny.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.4em;
}
@media (min-width: 768px) {
  #product .product-items .product-item .btn::after {
    width: calc(0.0041666667 * min(100vw, 1920px));
    height: calc(0.0052083333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .product-items .product-item .btn::after {
    width: 1.4933333333vw;
    height: 1.7066666667vw;
  }
}
#product .product-items .product-item:hover figure > img {
  transform: translateY(calc(-0.0052083333 * min(100vw, 1920px))) rotate(4deg);
}
#product .product-items .product-item:hover .btn {
  transform: scale(1.08);
}
#product .comment {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  #product .comment {
    margin-top: calc(0.0260416667 * min(100vw, 1920px));
    gap: calc(0.0083333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .comment {
    margin-top: 5.3333333333vw;
    gap: 1.3333333333vw;
  }
}
#product .comment .comment-gummy-wrap {
  display: flex;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  #product .comment .comment-gummy {
    width: calc(0.0286458333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #product .comment .comment-gummy {
    width: 5.3333333333vw;
  }
}
#product .comment .product-comment-mask__inner {
  display: inline-block;
  vertical-align: middle;
}
@media (min-width: 768px) {
  #product .comment .product-comment-mask__inner img {
    width: calc(0.3177083333 * min(100vw, 1920px));
    transform: translateY(calc(0.0010416667 * min(100vw, 1920px)));
  }
}
@media (max-width: 767px) {
  #product .comment .product-comment-mask__inner img {
    width: 54.9333333333vw;
    transform: translateY(-0.6666666667vw);
  }
}

/* #product 登場（data-reveal は .product-reveal。IO 用に transform は #product 側） */
.product-reveal:not(.is-revealed) #product {
  transform: scale(0.92);
  transform-origin: center center;
}
.product-reveal:not(.is-revealed) #product .inner {
  transform: scale(0.96);
  transform-origin: center center;
}
.product-reveal:not(.is-revealed) #product .product-heading-mask__inner {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.product-reveal:not(.is-revealed) #product .product-item {
  opacity: 0;
  transform: translateY(calc(0.01875 * min(100vw, 1920px)));
}
.product-reveal:not(.is-revealed) #product .comment-gummy {
  opacity: 0;
  transform: translateY(calc(0.0208333333 * min(100vw, 1920px)));
}
.product-reveal:not(.is-revealed) #product .product-comment-mask__inner {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.product-reveal.is-revealed #product {
  transform: scale(1);
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-reveal.is-revealed #product .inner {
  transform: scale(1);
  transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-reveal.is-revealed #product .product-heading-mask__inner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.product-reveal.is-revealed #product .product-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-reveal.is-revealed #product .product-item:nth-child(1) {
  transition-delay: 0.88s;
}
.product-reveal.is-revealed #product .product-item:nth-child(2) {
  transition-delay: 1.06s;
}
.product-reveal.is-revealed #product .product-item:nth-child(3) {
  transition-delay: 1.24s;
}
.product-reveal.is-revealed #product .comment-gummy {
  animation: product-comment-gummy-pop 0.68s cubic-bezier(0.34, 1.45, 0.55, 1) 1.28s both;
}
.product-reveal.is-revealed #product .product-comment-mask__inner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1) 1.62s;
}

@media (prefers-reduced-motion: reduce) {
  .product-reveal:not(.is-revealed) #product,
  .product-reveal.is-revealed #product {
    transform: none !important;
    transition: none !important;
  }
  .product-reveal:not(.is-revealed) #product .inner,
  .product-reveal.is-revealed #product .inner {
    transform: none !important;
    transition: none !important;
  }
  .product-reveal:not(.is-revealed) #product .product-heading-mask__inner,
  .product-reveal.is-revealed #product .product-heading-mask__inner,
  .product-reveal:not(.is-revealed) #product .product-comment-mask__inner,
  .product-reveal.is-revealed #product .product-comment-mask__inner {
    clip-path: none !important;
    transition: none !important;
  }
  .product-reveal:not(.is-revealed) #product .product-item,
  .product-reveal.is-revealed #product .product-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .product-reveal .comment-gummy {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
@keyframes product-comment-gummy-pop {
  0% {
    opacity: 0;
    transform: translateY(calc(0.0208333333 * min(100vw, 1920px))) scale(0.72);
  }
  55% {
    opacity: 1;
    transform: translateY(calc(-0.0072916667 * min(100vw, 1920px))) scale(1.06);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* JS オフ時は隠し状態のままにならないよう（head の js-reveal と対） */
html:not(.js-reveal) .product-reveal #product {
  transform: none !important;
}
html:not(.js-reveal) .product-reveal #product .inner {
  transform: none !important;
}
html:not(.js-reveal) .product-reveal #product .product-heading-mask__inner,
html:not(.js-reveal) .product-reveal #product .product-comment-mask__inner {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}
html:not(.js-reveal) .product-reveal #product .product-item {
  opacity: 1 !important;
  transform: none !important;
}
html:not(.js-reveal) .product-reveal #product .comment-gummy {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ----------------------------------------------------------------
  #contents
---------------------------------------------------------------- */
#contents {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  #contents {
    --gummy-scale: 0.3796;
  }
}
@media (max-width: 767px) {
  #contents {
    --gummy-scale: 0.1172;
  }
}
@media (max-width: 767px) {
  #contents .gummy-left {
    position: absolute;
    top: -20.2666666667vw;
    left: 0;
  }
}
#contents .gummy-left .gummy-img {
  transform: rotate(90deg);
}
@media (min-width: 768px) {
  #contents .gummy-left .gummy-img {
    pointer-events: auto;
    cursor: pointer;
    --gummy-rot: 90deg;
    transform: rotate(var(--gummy-rot));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00034 {
    top: calc(0 * min(100vw, 1920px));
    left: calc(0.0041666667 * min(100vw, 1920px));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00035 {
    top: calc(0.1140625 * min(100vw, 1920px));
    left: calc(-0.0296875 * min(100vw, 1920px));
    width: calc(0.28125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00036 {
    top: calc(0.2036458333 * min(100vw, 1920px));
    left: calc(0.0104166667 * min(100vw, 1920px));
    width: calc(0.1421875 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00039 {
    top: calc(0.3109375 * min(100vw, 1920px));
    left: calc(-0.0291666667 * min(100vw, 1920px));
    width: calc(0.2088541667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00041 {
    top: calc(0.3822916667 * min(100vw, 1920px));
    left: calc(0.0088541667 * min(100vw, 1920px));
    width: calc(0.1598958333 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00049 {
    top: calc(0.4625 * min(100vw, 1920px));
    left: calc(0.0072916667 * min(100vw, 1920px));
    width: calc(0.1354166667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00048 {
    top: calc(0.5338541667 * min(100vw, 1920px));
    left: calc(0.0140625 * min(100vw, 1920px));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00052 {
    top: calc(0.6354166667 * min(100vw, 1920px));
    left: calc(-0.0244791667 * min(100vw, 1920px));
    width: calc(0.23125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00043 {
    top: calc(0.7270833333 * min(100vw, 1920px));
    left: calc(0.0057291667 * min(100vw, 1920px));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00044 {
    top: calc(0.8333333333 * min(100vw, 1920px));
    left: calc(-0.01875 * min(100vw, 1920px));
    width: calc(0.2614583333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-rot: 81.42deg;
  }
  #contents .gummy-left .gummy-img--petagoo-b-00047 {
    top: calc(0.934375 * min(100vw, 1920px));
    left: calc(-0.0010416667 * min(100vw, 1920px));
    width: calc(0.1609375 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00034 {
    top: calc(1.025 * min(100vw, 1920px));
    left: calc(0.0010416667 * min(100vw, 1920px));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
  }
}
@media (max-width: 767px) {
  #contents .gummy-left .gummy-img {
    pointer-events: auto;
    cursor: pointer;
    --gummy-rot: 90deg;
    transform: rotate(var(--gummy-rot));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00034 {
    top: 1.8666666667vw;
    left: 0.5333333333vw;
    width: calc(102.1333333333vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00035 {
    top: 19.2vw;
    left: -6.08vw;
    width: calc(144vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00036 {
    top: 32.2666666667vw;
    left: 2.1333333333vw;
    width: calc(72.8vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00039 {
    top: 48.5333333333vw;
    left: -5.9733333333vw;
    width: calc(106.9333333333vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00041 {
    top: 59.2vw;
    left: 1.8133333333vw;
    width: calc(81.8666666667vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00049 {
    top: 70.9333333333vw;
    left: 0.8vw;
    width: calc(69.3333333333vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00048 {
    top: 81.3333333333vw;
    left: 1.0666666667vw;
    width: calc(80.8vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00052 {
    top: 97.0666666667vw;
    left: -4.8vw;
    width: calc(118.4vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00043 {
    top: 110.1333333333vw;
    left: -0.5333333333vw;
    width: calc(80.8vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00044 {
    top: 126.4vw;
    left: -2.9333333333vw;
    width: calc(133.8666666667vw * var(--gummy-scale));
    --gummy-rot: 81.42deg;
  }
  #contents .gummy-left .gummy-img--petagoo-b-00047 {
    top: 141.3333333333vw;
    left: -1.6vw;
    width: calc(82.4vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00034 {
    top: 154.6666666667vw;
    left: -1.0666666667vw;
    width: calc(102.1333333333vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-a-00040 {
    top: 170.1333333333vw;
    left: -1.8666666667vw;
    width: calc(85.6vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00042 {
    top: 182.4vw;
    left: 0vw;
    width: calc(91.2vw * var(--gummy-scale));
    --gummy-rot: 125.475deg;
  }
  #contents .gummy-left .gummy-img--petagoo-a-00050 {
    top: 195.2vw;
    left: -1.3333333333vw;
    width: calc(90.1333333333vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-c-00045 {
    top: 206.9333333333vw;
    left: 0vw;
    width: calc(105.8666666667vw * var(--gummy-scale));
  }
  #contents .gummy-left .gummy-img--petagoo-b-00000 {
    top: 222.4vw;
    left: -0.8vw;
    width: calc(82.6666666667vw * var(--gummy-scale));
  }
}
#contents .gummy-left .gummy-img > img {
  transform-origin: left center;
}
#contents .gummy-right .gummy-img > img {
  transform-origin: right center;
}
@media (prefers-reduced-motion: no-preference) {
  #contents .gummy-left .gummy-img > img.is-contents-jump {
    animation: contents-gummy-jump-left var(--contents-jump-dur, 0.78s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #contents .gummy-left .gummy-img > img.is-contents-jump {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #contents .gummy-right .gummy-img > img.is-contents-jump {
    animation: contents-gummy-jump-right var(--contents-jump-dur, 0.78s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #contents .gummy-right .gummy-img > img.is-contents-jump {
    animation: none !important;
  }
}
@media (max-width: 767px) {
  #contents .gummy-right {
    position: absolute;
    top: -20.2666666667vw;
    right: 0;
  }
}
#contents .gummy-right .gummy-img {
  transform: rotate(-90deg);
  transform-origin: bottom right;
}
@media (min-width: 768px) {
  #contents .gummy-right .gummy-img {
    pointer-events: auto;
    cursor: pointer;
    --gummy-rot: -90deg;
    transform: rotate(var(--gummy-rot));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00000 {
    top: calc(-0.071875 * min(100vw, 1920px));
    right: calc(-0.0072916667 * min(100vw, 1920px));
    width: calc(0.1614583333 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00045 {
    top: calc(-0.0041666667 * min(100vw, 1920px));
    right: calc(-0.0072916667 * min(100vw, 1920px));
    width: calc(0.2067708333 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00050 {
    top: calc(0.1046875 * min(100vw, 1920px));
    right: calc(-0.0083333333 * min(100vw, 1920px));
    width: calc(0.1760416667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00042 {
    top: calc(0.2078125 * min(100vw, 1920px));
    right: calc(-0.0302083333 * min(100vw, 1920px));
    width: calc(0.178125 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-rot: -54.525deg;
  }
  #contents .gummy-right .gummy-img--petagoo-a-00040 {
    top: calc(0.2760416667 * min(100vw, 1920px));
    right: calc(-0.0114583333 * min(100vw, 1920px));
    width: calc(0.1671875 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00034 {
    top: calc(0.35625 * min(100vw, 1920px));
    right: calc(-0.0010416667 * min(100vw, 1920px));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00047 {
    top: calc(0.45625 * min(100vw, 1920px));
    right: calc(-0.0088541667 * min(100vw, 1920px));
    width: calc(0.1609375 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00048 {
    top: calc(0.51875 * min(100vw, 1920px));
    right: calc(-0.003125 * min(100vw, 1920px));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00049 {
    top: calc(0.6109375 * min(100vw, 1920px));
    right: calc(-0.0072916667 * min(100vw, 1920px));
    width: calc(0.1354166667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00041 {
    top: calc(0.678125 * min(100vw, 1920px));
    right: calc(-0.0020833333 * min(100vw, 1920px));
    width: calc(0.1598958333 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00039 {
    top: calc(0.7958333333 * min(100vw, 1920px));
    right: calc(-0.009375 * min(100vw, 1920px));
    width: calc(0.2088541667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00043 {
    top: calc(0.8489583333 * min(100vw, 1920px));
    right: calc(-0.0020833333 * min(100vw, 1920px));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00035 {
    top: calc(0.9375 * min(100vw, 1920px));
    right: calc(0 * min(100vw, 1920px));
    width: calc(0.28125 * min(100vw, 1920px) * var(--gummy-scale));
  }
}
@media (max-width: 767px) {
  #contents .gummy-right .gummy-img {
    pointer-events: auto;
    cursor: pointer;
    --gummy-rot: -90deg;
    transform: rotate(var(--gummy-rot));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00000 {
    top: -9.6vw;
    right: -2.1333333333vw;
    width: calc(82.6666666667vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00045 {
    top: 0vw;
    right: -0.5333333333vw;
    width: calc(105.8666666667vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00050 {
    top: 16.5333333333vw;
    right: -2.6666666667vw;
    width: calc(90.1333333333vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00042 {
    top: 32.5333333333vw;
    right: -3.7333333333vw;
    width: calc(91.2vw * var(--gummy-scale));
    --gummy-rot: -54.525deg;
  }
  #contents .gummy-right .gummy-img--petagoo-a-00040 {
    top: 42.6666666667vw;
    right: -2.6666666667vw;
    width: calc(85.6vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00034 {
    top: 53.3333333333vw;
    right: -0.5333333333vw;
    width: calc(102.1333333333vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00047 {
    top: 68.8vw;
    right: -2.6666666667vw;
    width: calc(82.4vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00048 {
    top: 78.4vw;
    right: -0.5333333333vw;
    width: calc(80.8vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00049 {
    top: 92vw;
    right: -1.8666666667vw;
    width: calc(69.3333333333vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00041 {
    top: 102.4vw;
    right: -1.0666666667vw;
    width: calc(81.8666666667vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00039 {
    top: 122.1333333333vw;
    right: -2.6666666667vw;
    width: calc(106.9333333333vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00043 {
    top: 130.1333333333vw;
    right: -0.5333333333vw;
    width: calc(80.8vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00035 {
    top: 145.0666666667vw;
    right: -0.5333333333vw;
    width: calc(144vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00039-2 {
    top: 168.8vw;
    right: -2.6666666667vw;
    width: calc(106.9333333333vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-c-00036 {
    top: 177.0666666667vw;
    right: 0vw;
    width: calc(72.8vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-b-00041-2 {
    top: 190.4vw;
    right: -1.0666666667vw;
    width: calc(81.8666666667vw * var(--gummy-scale));
  }
  #contents .gummy-right .gummy-img--petagoo-a-00034 {
    top: 204.8vw;
    right: 0vw;
    width: calc(102.1333333333vw * var(--gummy-scale));
  }
}
#contents .cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
@media (min-width: 768px) {
  #contents .cards {
    margin-top: calc(0.0885416667 * min(100vw, 1920px));
    padding-top: calc(0.0390625 * min(100vw, 1920px));
    padding-left: calc(0.0197916667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #contents .cards {
    flex-direction: column;
    gap: 3.7333333333vw;
    margin: 5.3333333333vw auto 0;
    width: 66.6666666667vw;
  }
}
#contents .cards .card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#contents .cards .card .card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#contents .cards .card .card-head .petagoo {
  position: relative;
  z-index: 2;
  transform-origin: center center;
}
#contents .cards .card .card-head .contents-card-beam-mask {
  display: block;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  #contents .cards .card .card-head .contents-card-beam-mask {
    margin-top: calc(-0.0197916667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #contents .cards .card .card-head .contents-card-beam-mask {
    margin-top: -3.2vw;
  }
}
#contents .cards .card .card-head .contents-card-beam-mask .beam {
  display: block;
  position: relative;
  height: auto;
}
@media (min-width: 768px) {
  #contents .cards .card .card-head .contents-card-beam-mask .beam {
    width: calc(0.3677083333 * min(100vw, 1920px));
    height: calc(0.1052083333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #contents .cards .card .card-head .contents-card-beam-mask .beam {
    width: 64vw;
  }
}
#contents .cards .card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 3;
}
@media (min-width: 768px) {
  #contents .cards .card .card-body {
    margin-top: calc(-0.03125 * min(100vw, 1920px));
    padding: calc(0.0291666667 * min(100vw, 1920px)) calc(0.0333333333 * min(100vw, 1920px));
    width: calc(0.375 * min(100vw, 1920px));
    height: calc(0.4427083333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #contents .cards .card .card-body {
    margin-top: -5.3333333333vw;
    padding: 5.3333333333vw 5.3333333333vw;
    width: 66.6666666667vw;
    height: 78.6666666667vw;
  }
}
#contents .cards .card .card-body .card-body-reveal-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#contents .cards .card .card-body .card-body-reveal-inner h3 {
  color: #fff;
  background-repeat: repeat-x;
}
@media (min-width: 768px) {
  #contents .cards .card .card-body .card-body-reveal-inner h3 {
    font-size: calc(0.03125 * min(100vw, 1920px));
    padding-bottom: calc(0.0083333333 * min(100vw, 1920px));
    background-image: radial-gradient(circle, #ffffff calc(0.001875 * min(100vw, 1920px)), transparent calc(0.001875 * min(100vw, 1920px)));
    background-position: left calc(-0.0013541667 * min(100vw, 1920px)) bottom;
    background-size: calc(0.0070833333 * min(100vw, 1920px)) calc(0.00375 * min(100vw, 1920px));
    visibility: hidden;
  }
}
@media (max-width: 767px) {
  #contents .cards .card .card-body .card-body-reveal-inner h3 {
    font-size: 5.64vw;
    opacity: 0;
    visibility: hidden;
  }
}
#contents .cards .card .card-body .card-body-reveal-inner p {
  color: #fff;
}
@media (min-width: 768px) {
  #contents .cards .card .card-body .card-body-reveal-inner p {
    margin-top: calc(0.015625 * min(100vw, 1920px));
    font-size: calc(0.0135416667 * min(100vw, 1920px));
    line-height: calc(0.0208333333 * min(100vw, 1920px));
    visibility: hidden;
  }
}
@media (max-width: 767px) {
  #contents .cards .card .card-body .card-body-reveal-inner p {
    margin-top: 3.2vw;
    font-size: 3.2vw;
    line-height: 5.3333333333vw;
    opacity: 0;
    visibility: hidden;
  }
}
@media (min-width: 768px) {
  #contents .cards .card.alien .card-head .petagoo {
    width: calc(0.0927083333 * min(100vw, 1920px));
    --contents-petagoo-wobble-dur: 2.7s;
  }
}
@media (max-width: 767px) {
  #contents .cards .card.alien .card-head .petagoo {
    width: 16vw;
  }
}
@media (min-width: 768px) {
  #contents .cards .card.alien .card-body {
    background: url(../img/contents_card-alien_pc.webp) no-repeat center center/contain;
  }
}
@media (max-width: 767px) {
  #contents .cards .card.alien .card-body {
    background: url(../img/contents_card-alien_sp.webp) no-repeat center center/contain;
  }
}
@media (min-width: 768px) {
  #contents .cards .card.ship {
    margin-top: calc(0.28125 * min(100vw, 1920px));
    margin-left: calc(-0.0854166667 * min(100vw, 1920px));
    z-index: 4;
  }
}
@media (min-width: 768px) {
  #contents .cards .card.ship .card-head .petagoo {
    width: calc(0.0567708333 * min(100vw, 1920px));
    margin-left: calc(0.003125 * min(100vw, 1920px));
    --contents-petagoo-wobble-dur: 3s;
  }
}
@media (max-width: 767px) {
  #contents .cards .card.ship .card-head .petagoo {
    margin-bottom: -2.1333333333vw;
    width: 9.6vw;
  }
}
@media (min-width: 768px) {
  #contents .cards .card.ship .card-head .contents-card-beam-mask {
    margin-top: calc(-0.028125 * min(100vw, 1920px));
  }
}
@media (min-width: 768px) {
  #contents .cards .card.ship .card-body {
    padding: calc(0.0291666667 * min(100vw, 1920px)) calc(0.03125 * min(100vw, 1920px));
    background: url(../img/contents_card-ship_pc.webp) no-repeat center center/contain;
  }
}
@media (max-width: 767px) {
  #contents .cards .card.ship .card-body {
    background: url(../img/contents_card-ship_sp.webp) no-repeat center center/contain;
    height: 90.6666666667vw;
  }
}
@media (min-width: 768px) {
  #contents .cards .card.ship .card-body .card-body-reveal-inner .spaceship {
    max-width: none;
    margin-top: calc(0.0052083333 * min(100vw, 1920px));
    margin-right: calc(-0.0666666667 * min(100vw, 1920px));
    width: calc(0.3583333333 * min(100vw, 1920px));
    visibility: hidden;
  }
}
@media (max-width: 767px) {
  #contents .cards .card.ship .card-body .card-body-reveal-inner .spaceship {
    display: none;
  }
}
#contents .cards .card.ship .card-body .card-body-reveal-inner .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #18a0db;
  color: #fff;
  border-radius: 999px;
}
@media (min-width: 768px) {
  #contents .cards .card.ship .card-body .card-body-reveal-inner .btn {
    margin-top: calc(0.015625 * min(100vw, 1920px));
    width: calc(0.2104166667 * min(100vw, 1920px));
    height: calc(0.0395833333 * min(100vw, 1920px));
    font-size: calc(0.0145833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #contents .cards .card.ship .card-body .card-body-reveal-inner .btn {
    margin-top: 17.6vw;
    width: 41.3333333333vw;
    height: 7.7333333333vw;
    background: url(../img/contents_btn-ship_sp.svg) no-repeat center center/contain;
    color: transparent;
    font-size: 0;
  }
}
#contents .cards .card.ship .card-body .card-body-reveal-inner .btn::after {
  content: "";
  display: inline-block;
  background-image: url(../img/arrow_tiny.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: 0.5em;
  margin-right: -0.5em;
}
@media (min-width: 768px) {
  #contents .cards .card.ship .card-body .card-body-reveal-inner .btn::after {
    width: calc(0.0057291667 * min(100vw, 1920px));
    height: calc(0.00625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #contents .cards .card.ship .card-body .card-body-reveal-inner .btn::after {
    display: none;
  }
}
#contents .cards .card.ship .card-body .card-body-reveal-inner .btn:hover {
  transform: scale(1.08);
}
@media (min-width: 768px) {
  #contents .cards .card.ship .card-body.is-coming {
    background-image: url(../img/contents_card-ship_coming_pc.webp);
  }
}
@media (max-width: 767px) {
  #contents .cards .card.ship .card-body.is-coming {
    background-image: url(../img/contents_card-ship_coming_sp.webp);
  }
}
#contents .cards .card.ship .card-body.is-coming .btn {
  display: none;
}
#contents .cards .card {
  /* 登場：グミ落下 → ビーム上から下マスク → カード本文マスク（各 .card に data-reveal） */
}
#contents .cards .card:not(.is-revealed) .card-head .petagoo {
  transform: translate3d(0, -140%, 0);
  animation: none !important;
}
#contents .cards .card:not(.is-revealed) .contents-card-beam-mask {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
#contents .cards .card:not(.is-revealed) .card-body {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  filter: brightness(3.62);
}
@media (prefers-reduced-motion: no-preference) {
  #contents .cards .card.is-revealed .card-head .petagoo {
    animation: contents-card-petagoo-drop 0.44s ease-out both, tvcm-gummy-nyuru var(--contents-petagoo-wobble-dur, 2.75s) linear infinite alternate 0.88s;
  }
}
@media (prefers-reduced-motion: reduce) {
  #contents .cards .card.is-revealed .card-head .petagoo {
    animation: none !important;
  }
}
#contents .cards .card.is-revealed .contents-card-beam-mask {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.42s;
}
#contents .cards .card.is-revealed .card-body {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  filter: brightness(1);
  transition: clip-path 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.78s, filter 1.58s cubic-bezier(0.22, 1, 0.36, 1) 0.78s;
}

@media (prefers-reduced-motion: reduce) {
  #contents .cards .card:not(.is-revealed) .card-head .petagoo,
  #contents .cards .card.is-revealed .card-head .petagoo {
    transform: none !important;
  }
  #contents .cards .card:not(.is-revealed) .contents-card-beam-mask,
  #contents .cards .card:not(.is-revealed) .card-body,
  #contents .cards .card.is-revealed .contents-card-beam-mask,
  #contents .cards .card.is-revealed .card-body {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    transition: none !important;
  }
  #contents .cards .card:not(.is-revealed) .card-body,
  #contents .cards .card.is-revealed .card-body {
    filter: brightness(1) !important;
  }
}
html:not(.js-reveal) #contents .cards .card .contents-card-beam-mask,
html:not(.js-reveal) #contents .cards .card .card-body {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

html:not(.js-reveal) #contents .cards .card .card-body {
  filter: brightness(1) !important;
}

html:not(.js-reveal) #contents .cards .card .card-head .petagoo {
  transform: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.js-reveal) #contents .cards .card .card-head .petagoo {
    animation: tvcm-gummy-nyuru var(--contents-petagoo-wobble-dur, 2.75s) linear infinite alternate !important;
  }
}

@keyframes contents-card-petagoo-drop {
  0% {
    transform: translate3d(0, -140%, 0) scale(1, 1);
  }
  50% {
    transform: translate3d(0, 10%, 0) scale(1.1, 0.86);
  }
  68% {
    transform: translate3d(0, -6%, 0) scale(0.94, 1.08);
  }
  82% {
    transform: translate3d(0, 3%, 0) scale(1.04, 0.96);
  }
  92% {
    transform: translate3d(0, -1.5%, 0) scale(0.98, 1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
}
/* #contents 左右グミ：左端／右端を地面にぴょん＋着地のぽよん（contents-gummy-jump.js） */
/* 傾き補正は header nav と同様、親 .gummy-img の --gummy-rot を img が継承（translate → scale → rotate） */
@keyframes contents-gummy-jump-left {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
  10% {
    transform: translate3d(0, 0, 0) scale(1.06, 0.88);
  }
  30% {
    transform: translate3d(0, -36%, 0) scale(1, 1);
  }
  44% {
    transform: translate3d(0, -48%, 0) scale(0.98, 1.02);
  }
  54% {
    transform: translate3d(0, 0, 0) scale(1.12, 0.74);
  }
  66% {
    transform: translate3d(0, 0, 0) scale(0.93, 1.1);
  }
  78% {
    transform: translate3d(0, 0, 0) scale(1.05, 0.92);
  }
  90% {
    transform: translate3d(0, 0, 0) scale(0.99, 1.02);
  }
}
/* 右端＝地面：親 rotate(-90deg) 下では +Y が画面左寄り。+Y で弧を描きつつ -X で左方向を補強 */
@keyframes contents-gummy-jump-right {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
  10% {
    transform: translate3d(0, 0, 0) scale(1.06, 0.88);
  }
  28% {
    transform: translate3d(-14%, -32%, 0) scale(1, 1);
  }
  42% {
    transform: translate3d(-26%, -48%, 0) scale(0.98, 1.02);
  }
  50% {
    transform: translate3d(-8%, -12%, 0) scale(1, 1);
  }
  56% {
    transform: translate3d(0, 0, 0) scale(1.12, 0.74);
  }
  66% {
    transform: translate3d(0, 0, 0) scale(0.93, 1.1);
  }
  78% {
    transform: translate3d(0, 0, 0) scale(1.05, 0.92);
  }
  90% {
    transform: translate3d(0, 0, 0) scale(0.99, 1.02);
  }
}
/* #tvcm .tvcm-wrapper 左右グミ：ジャンプは親 .gummy-img、傾きは --gummy-layout-rot で毎キーフレーム固定（子 img は素のまま） */
@keyframes tvcm-gummy-jump-left {
  0%, 100% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1, 1);
  }
  10% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.06, 0.88);
  }
  30% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, -36%, 0) scale(1, 1);
  }
  44% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, -48%, 0) scale(0.98, 1.02);
  }
  54% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.12, 0.74);
  }
  66% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(0.93, 1.1);
  }
  78% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.05, 0.92);
  }
  90% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(0.99, 1.02);
  }
}
@keyframes tvcm-gummy-jump-right {
  0%, 100% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1, 1);
  }
  10% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.06, 0.88);
  }
  28% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(-14%, -32%, 0) scale(1, 1);
  }
  42% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(-26%, -48%, 0) scale(0.98, 1.02);
  }
  50% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(-8%, -12%, 0) scale(1, 1);
  }
  56% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.12, 0.74);
  }
  66% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(0.93, 1.1);
  }
  78% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(1.05, 0.92);
  }
  90% {
    transform: rotate(var(--gummy-layout-rot)) translate3d(0, 0, 0) scale(0.99, 1.02);
  }
}
/* ----------------------------------------------------------------
  #project
---------------------------------------------------------------- */
#project {
  --project-rise-y: clamp(8rem, 22vh, 18rem);
  --project-rise-scale: 0.88;
  --project-rise-dur: 1.45s;
  --project-rise-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  #project {
    padding-top: calc(0.0604166667 * min(100vw, 1920px));
  }
}
#project {
  /* 惑星 ::before と同じ下からの立ち上がり＋スケールで一体化して見せる */
}
#project h2 {
  position: relative;
  z-index: 1;
  transform-origin: 50% 85%;
  transform: translate3d(0, var(--project-rise-y), 0) scale(var(--project-rise-scale));
  transition: transform var(--project-rise-dur) var(--project-rise-ease);
}
@media (min-width: 768px) {
  #project h2 img {
    width: calc(0.2791666667 * min(100vw, 1920px));
    transform: translateX(calc(0.0125 * min(100vw, 1920px)));
  }
}
@media (max-width: 767px) {
  #project h2 img {
    width: 38.9333333333vw;
    transform: translateX(1.0666666667vw);
  }
}
#project.is-revealed h2 {
  transform: translate3d(0, 0, 0) scale(1);
}
@media (min-width: 768px) {
  #project {
    --project-item-w: calc(0.4166666667 * min(100vw, 1920px));
    --project-item-gap: calc(0.0260416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #project {
    --project-item-w: 53.3333333333vw;
    --project-item-gap: 2.9333333333vw;
  }
}
#project .project-wrap {
  position: relative;
  width: 100%;
}
@media (min-width: 768px) {
  #project .project-wrap {
    margin-top: calc(0.0322916667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #project .project-wrap {
    margin-top: 2.6666666667vw;
  }
}
#project .project-items {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 1;
  touch-action: none;
  cursor: grab;
}
#project .project-items.is-dragging {
  cursor: grabbing;
}
#project .project-items .project-items-track {
  display: flex;
  width: max-content;
  gap: var(--project-item-gap, 0px);
  will-change: transform;
}
#project .project-items .project-item {
  flex: 0 0 var(--project-item-w);
  width: var(--project-item-w);
  background-color: #dedede;
  overflow: hidden;
}
@media (min-width: 768px) {
  #project .project-items .project-item {
    height: calc(0.3125 * min(100vw, 1920px));
    border-radius: calc(0.0208333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #project .project-items .project-item {
    height: 40vw;
    border-radius: 2.6666666667vw;
  }
}
#project .project-items .project-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#project {
  /* スライド：見るまでは画面外（右）から流れ込む */
}
#project:not(.is-revealed) .project-items .project-item {
  opacity: 0;
  transform: translate3d(42vw, 0, 0);
}
#project.is-revealed .project-items .project-item {
  animation: project-item-flow-in 0.78s cubic-bezier(0.2, 0.72, 0.15, 1) both;
}
#project.is-revealed .project-items .project-item:nth-child(1) {
  animation-delay: 0s;
}
#project.is-revealed .project-items .project-item:nth-child(2) {
  animation-delay: 0.06s;
}
#project.is-revealed .project-items .project-item:nth-child(3) {
  animation-delay: 0.12s;
}
#project.is-revealed .project-items .project-item:nth-child(4) {
  animation-delay: 0.18s;
}
#project.is-revealed .project-items .project-item:nth-child(5) {
  animation-delay: 0.24s;
}
#project.is-revealed .project-items .project-item:nth-child(6) {
  animation-delay: 0.3s;
}
#project.is-revealed .project-items .project-item:nth-child(7) {
  animation-delay: 0.36s;
}
#project.is-revealed .project-items .project-item:nth-child(8) {
  animation-delay: 0.42s;
}
#project.is-revealed .project-items .project-item:nth-child(9) {
  animation-delay: 0.48s;
}
#project.is-revealed .project-items .project-item:nth-child(10) {
  animation-delay: 0.54s;
}
#project.is-revealed .project-items .project-item:nth-child(11) {
  animation-delay: 0.6s;
}
#project.is-revealed .project-items .project-item:nth-child(12) {
  animation-delay: 0.66s;
}
#project {
  /* #about .slide-prev / .slide-next と同様（子 span の zoom-in、hover は transition なし） */
}
#project .slide-prev,
#project .slide-next {
  appearance: none;
  border: none;
  padding: 0;
  background: transparent;
  position: absolute;
  top: 50%;
  z-index: 3;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
#project .slide-prev span,
#project .slide-next span {
  display: block;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
  transform: scale(0);
  transition: none;
}
@media (min-width: 768px) {
  #project .slide-prev span,
  #project .slide-next span {
    width: calc(0.0677083333 * min(100vw, 1920px));
    height: calc(0.0677083333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #project .slide-prev span,
  #project .slide-next span {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
  }
}
#project .slide-prev.is-revealed span,
#project .slide-next.is-revealed span {
  animation: about-slide-arrow-reveal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
#project .slide-prev.is-revealed span:hover,
#project .slide-next.is-revealed span:hover {
  transform: scale(1.08) !important;
}
#project .slide-prev {
  transform: translate(-50%, -50%);
}
@media (min-width: 768px) {
  #project .slide-prev {
    left: calc(45.5% - var(--project-item-w, 0px) / 2);
  }
}
@media (max-width: 767px) {
  #project .slide-prev {
    left: calc(43% - var(--project-item-w, 0px) / 2);
  }
}
#project .slide-prev span {
  background-image: url(../img/arrow_left.svg);
}
#project .slide-next {
  transform: translate(50%, -50%);
}
@media (min-width: 768px) {
  #project .slide-next {
    right: calc(45.5% - var(--project-item-w, 0px) / 2);
  }
}
@media (max-width: 767px) {
  #project .slide-next {
    right: calc(43% - var(--project-item-w, 0px) / 2);
  }
}
#project .slide-next span {
  background-image: url(../img/arrow_right.svg);
}
#project::before {
  content: "";
  background-image: url(../img/planet-yellow.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  z-index: -1;
  transform-origin: 50% 85%;
  transform: translate3d(-50%, var(--project-rise-y), 0) scale(var(--project-rise-scale));
  transition: transform var(--project-rise-dur) var(--project-rise-ease);
}
@media (min-width: 768px) {
  #project::before {
    width: calc(0.7552083333 * min(100vw, 1920px));
    height: calc(0.75 * min(100vw, 1920px));
    top: calc(0.1833333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #project::before {
    width: 96vw;
    height: 95.2vw;
    top: 8vw;
  }
}
#project.is-revealed::before {
  transform: translate3d(-50%, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  #project h2 {
    transition: none;
    transform: translate3d(0, 0, 0) scale(1);
  }
  #project:not(.is-revealed) h2 {
    transform: translate3d(0, 0, 0) scale(1);
  }
  #project::before {
    transition: none;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  #project:not(.is-revealed)::before {
    transform: translate3d(-50%, 0, 0) scale(1);
  }
  #project .slide-prev.is-revealed span,
  #project .slide-next.is-revealed span {
    animation: none;
    transform: scale(1);
  }
  #project.is-revealed .project-items .project-item, #project:not(.is-revealed) .project-items .project-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ----------------------------------------------------------------
  #tvcm
---------------------------------------------------------------- */
#tvcm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
#tvcm::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 元ストップを u=(x+11.29)/149.61 で 0〜38% に写像、38〜50% で #8cc456→シアン、50〜100% は 0〜50% のコピー */
  background: linear-gradient(119deg, #00b3ec 0%, #56a0d6 2.184346%, #a68fc1 3.931797%, #d885b4 5.237325%, #ec81b0 6.114149%, #ec81b0 11.356074%, #00b3ec 16.598089%, #04b3e6 17.474279%, #12b5d7 18.346073%, #29b8bf 19.654834%, #4abc9c 20.528023%, #73c070 21.838185%, #8cc456 22.275248%, #00b3ec 27.954523%, #629ed2 29.702026%, #ec81b0 31.886371%, #8cc456 38%, #6dba7a 40%, #4abd93 42%, #2ab8b5 44%, #12b5d5 46%, #06b3e3 48%, #00b3ec 50%, #56a0d6 52.184346%, #a68fc1 53.931797%, #d885b4 55.237325%, #ec81b0 56.114149%, #ec81b0 61.356074%, #00b3ec 66.598089%, #04b3e6 67.474279%, #12b5d7 68.346073%, #29b8bf 69.654834%, #4abc9c 70.528023%, #73c070 71.838185%, #8cc456 72.275248%, #00b3ec 77.954523%, #629ed2 79.702026%, #ec81b0 81.886371%, #8cc456 88%, #6dba7a 90%, #4abd93 92%, #2ab8b5 94%, #12b5d5 96%, #06b3e3 98%, #00b3ec 100%);
  background-size: 400% auto;
  animation: section-gradient-flow-x 28s linear infinite;
  mask: url(../img/inverse-arc-mask.svg) no-repeat center top/100% auto;
}
@media (max-width: 767px) {
  #tvcm::before {
    mask-size: cover;
  }
}
@media (min-width: 768px) {
  #tvcm {
    margin-top: calc(0.0677083333 * min(100vw, 1920px));
    padding-top: calc(0.1197916667 * min(100vw, 1920px));
    padding-bottom: calc(0.1354166667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #tvcm {
    margin-top: 7.4666666667vw;
    padding-top: 12.5333333333vw;
    padding-bottom: 9.0666666667vw;
  }
}
#tvcm {
  /* タップ時の青いハイライト（装飾グミは装飾のみ） */
}
#tvcm .gummy-top .gummy-img,
#tvcm .tvcm-wrapper .gummy-left .gummy-img,
#tvcm .tvcm-wrapper .gummy-right .gummy-img {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}
#tvcm {
  /* 上段グミ: 逆アーチは横に伸びるほど中央付近の曲率が相対的に浅く見える。谷底をデザイン top=5
     とし、(top−5) に min(1, 1920/100vw) を掛けて差分を圧縮（tvcm-gummy-top-arc）。left/width は pc-vw。 */
}
@media (min-width: 768px) {
  #tvcm .gummy-top {
    /* 1920 超の幅でカーブ上段と上段グミの相対位置が上にズレるのを、超過幅に比例して
       ラッパー全体を下げる。係数は 0.05–0.08 目安で要調整。 */
    transform: translateY(calc(max(0px, 100vw - 1920px) * 0.02));
  }
}
@media (min-width: 768px) {
  #tvcm .gummy-top .gummy-img {
    pointer-events: auto;
    cursor: pointer;
    --gummy-scale: 0.4176;
    --gummy-layout-rot: 0deg;
    transform: rotate(var(--gummy-layout-rot));
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00034 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0833333333 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.5239583333 * min(100vw, 1920px)));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00035 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0432291667 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.4822916667 * min(100vw, 1920px)));
    width: calc(0.28125 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 9.988deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00036 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.05 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.384375 * min(100vw, 1920px)));
    width: calc(0.1421875 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 9.411deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00039 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(0 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.3598958333 * min(100vw, 1920px)));
    width: calc(0.2088541667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00041 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0359375 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.2885416667 * min(100vw, 1920px)));
    width: calc(0.1598958333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 5.365deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00049 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0286458333 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.2411458333 * min(100vw, 1920px)));
    width: calc(0.1354166667 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 8.161deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00048 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0380208333 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.2098958333 * min(100vw, 1920px)));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00052 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.015625 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.1807291667 * min(100vw, 1920px)));
    width: calc(0.23125 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 1.229deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00043 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0166666667 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.1015625 * min(100vw, 1920px)));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: -7.231deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00044 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.003125 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(-0.0541666667 * min(100vw, 1920px)));
    width: calc(0.2614583333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 4.839deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00047 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0125 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.0364583333 * min(100vw, 1920px)));
    width: calc(0.1609375 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: -4.999deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00045 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0302083333 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.0817708333 * min(100vw, 1920px)));
    width: calc(0.2067708333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 26.711deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00040 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0145833333 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.146875 * min(100vw, 1920px)));
    width: calc(0.1671875 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: -4.462deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00042 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0276041667 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.215625 * min(100vw, 1920px)));
    width: calc(0.178125 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 35.475deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00044 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0229166667 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.265625 * min(100vw, 1920px)));
    width: calc(0.2614583333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: -4.917deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00050 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0348958333 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.3463541667 * min(100vw, 1920px)));
    width: calc(0.1760416667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00000 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0536458333 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.3885416667 * min(100vw, 1920px)));
    width: calc(0.1614583333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: -16.602deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00034 {
    top: calc(calc(0.0026041667 * min(100vw, 1920px)) + calc(-0.0807291667 * min(100vw, 1920px)) * min(1, 1920px / 100vw));
    left: calc(50% + calc(0.4375 * min(100vw, 1920px)));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: -9.651deg;
  }
}
@media (max-width: 767px) {
  #tvcm .gummy-top .gummy-img {
    /* PC 1920 基準の数値を SP 375 基準へ線形写像（375/1920） */
    pointer-events: auto;
    cursor: pointer;
    --gummy-scale: 0.4176;
    --gummy-layout-rot: 0deg;
    transform: rotate(var(--gummy-layout-rot));
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00034 {
    top: -8.0729166667vw;
    left: -2.3958333333vw;
    width: calc(19.9479166667vw * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00035 {
    top: -4.0625vw;
    left: 1.7708333333vw;
    width: calc(28.125vw * var(--gummy-scale));
    --gummy-layout-rot: 9.988deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00036 {
    top: -4.7395833333vw;
    left: 11.5625vw;
    width: calc(14.21875vw * var(--gummy-scale));
    --gummy-layout-rot: 9.411deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00039 {
    top: 0.2604166667vw;
    left: 14.0104166667vw;
    width: calc(20.8854166667vw * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00041 {
    top: -3.3333333333vw;
    left: 21.1458333333vw;
    width: calc(15.9895833333vw * var(--gummy-scale));
    --gummy-layout-rot: 5.365deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00049 {
    top: -2.6041666667vw;
    left: 25.8854166667vw;
    width: calc(13.5416666667vw * var(--gummy-scale));
    --gummy-layout-rot: 8.161deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00048 {
    top: -3.5416666667vw;
    left: 29.0104166667vw;
    width: calc(15.78125vw * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00052 {
    top: -1.3020833333vw;
    left: 31.9270833333vw;
    width: calc(23.125vw * var(--gummy-scale));
    --gummy-layout-rot: 1.229deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00043 {
    top: -1.40625vw;
    left: 39.84375vw;
    width: calc(15.78125vw * var(--gummy-scale));
    --gummy-layout-rot: -7.231deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00044 {
    top: -0.0520833333vw;
    left: 44.5833333333vw;
    width: calc(26.1458333333vw * var(--gummy-scale));
    --gummy-layout-rot: 4.839deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00047 {
    top: -0.9895833333vw;
    left: 53.6458333333vw;
    width: calc(16.09375vw * var(--gummy-scale));
    --gummy-layout-rot: -4.999deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00045 {
    top: -2.7604166667vw;
    left: 58.1770833333vw;
    width: calc(20.6770833333vw * var(--gummy-scale));
    --gummy-layout-rot: 26.711deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00040 {
    top: -1.1979166667vw;
    left: 64.6875vw;
    width: calc(16.71875vw * var(--gummy-scale));
    --gummy-layout-rot: -4.462deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00042 {
    top: -2.5vw;
    left: 71.5625vw;
    width: calc(17.8125vw * var(--gummy-scale));
    --gummy-layout-rot: 35.475deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00044 {
    top: -2.03125vw;
    left: 76.5625vw;
    width: calc(26.1458333333vw * var(--gummy-scale));
    --gummy-layout-rot: -4.917deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-a-00050 {
    top: -3.2291666667vw;
    left: 84.6354166667vw;
    width: calc(17.6041666667vw * var(--gummy-scale));
  }
  #tvcm .gummy-top .gummy-img--petagoo-b-00000 {
    top: -5.1041666667vw;
    left: 88.8541666667vw;
    width: calc(16.1458333333vw * var(--gummy-scale));
    --gummy-layout-rot: -16.602deg;
  }
  #tvcm .gummy-top .gummy-img--petagoo-c-00034 {
    top: -7.8125vw;
    left: 93.75vw;
    width: calc(19.9479166667vw * var(--gummy-scale));
    --gummy-layout-rot: -9.651deg;
  }
}
@media (min-width: 768px) {
  #tvcm .gummy-top .gummy-img > img {
    pointer-events: auto;
    transform-origin: center center;
  }
}
@media (max-width: 767px) {
  #tvcm .gummy-top .gummy-img > img {
    pointer-events: auto;
    transform-origin: center center;
    -webkit-tap-highlight-color: transparent;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #tvcm .gummy-top .gummy-img > img.is-nyuru {
    animation: tvcm-gummy-nyuru var(--tvcm-nyuru-dur, 1.05s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tvcm .gummy-top .gummy-img > img.is-nyuru {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #tvcm .gummy-top .gummy-img > img.is-nyuru.is-nyuru-intense {
    animation: tvcm-gummy-nyuru-intense var(--tvcm-nyuru-dur, 0.92s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tvcm .gummy-top .gummy-img > img.is-nyuru.is-nyuru-intense {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #tvcm .gummy-top .gummy-img.is-top-jump {
    animation: tvcm-gummy-top-jump var(--tvcm-top-jump-dur, 0.48s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tvcm .gummy-top .gummy-img.is-top-jump {
    animation: none !important;
  }
}
#tvcm h2 {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  #tvcm h2 img {
    width: calc(0.14375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #tvcm h2 img {
    width: 20vw;
  }
}
#tvcm .tvcm-wrapper {
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  #tvcm .tvcm-wrapper {
    margin-top: calc(-0.0208333333 * min(100vw, 1920px));
    width: calc(0.625 * min(100vw, 1920px));
    height: calc(0.3515625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #tvcm .tvcm-wrapper {
    margin-top: -2.6666666667vw;
    width: 74.9333333333vw;
    height: 42.1333333333vw;
  }
}
#tvcm .tvcm-wrapper .gummy-left .gummy-img {
  transform: rotate(-90deg);
  transform-origin: bottom left;
}
@media (min-width: 768px) {
  #tvcm .tvcm-wrapper .gummy-left .gummy-img {
    pointer-events: auto;
    cursor: pointer;
    --gummy-scale: 0.30368;
    --gummy-layout-rot: -90deg;
    transform: rotate(var(--gummy-layout-rot));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-b-00042 {
    top: calc(0.009375 * min(100vw, 1920px));
    left: calc(-0.0072916667 * min(100vw, 1920px));
    width: calc(0.178125 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: -54.525deg;
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-a-00040 {
    top: calc(0.0651041667 * min(100vw, 1920px));
    left: calc(0.00625 * min(100vw, 1920px));
    width: calc(0.1671875 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-c-00034 {
    top: calc(0.125 * min(100vw, 1920px));
    left: calc(0 * min(100vw, 1920px));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-b-00047 {
    top: calc(0.1791666667 * min(100vw, 1920px));
    left: calc(0.0072916667 * min(100vw, 1920px));
    width: calc(0.1609375 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-a-00048 {
    top: calc(0.2177083333 * min(100vw, 1920px));
    left: calc(0.0052083333 * min(100vw, 1920px));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-c-00049 {
    top: calc(0.2692708333 * min(100vw, 1920px));
    left: calc(0.0046875 * min(100vw, 1920px));
    width: calc(0.1354166667 * min(100vw, 1920px) * var(--gummy-scale));
  }
}
@media (max-width: 767px) {
  #tvcm .tvcm-wrapper .gummy-left .gummy-img {
    /* SP のみ：全体を約 1.1 倍。top も同倍率で縦方向の間隔を揃える */
    pointer-events: auto;
    cursor: pointer;
    --gummy-scale: 0.3583424;
    --gummy-layout-rot: -90deg;
    transform: rotate(var(--gummy-layout-rot));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-b-00042 {
    top: 1.10625vw;
    left: -0.7291666667vw;
    width: calc(17.8125vw * var(--gummy-scale));
    --gummy-layout-rot: -54.525deg;
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-a-00040 {
    top: 7.6822916667vw;
    left: 0.625vw;
    width: calc(16.71875vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-c-00034 {
    top: 14.75vw;
    left: 0;
    width: calc(19.9479166667vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-b-00047 {
    top: 21.1416666667vw;
    left: 0.7291666667vw;
    width: calc(16.09375vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-a-00048 {
    top: 25.6895833333vw;
    left: 0.5208333333vw;
    width: calc(15.78125vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-left .gummy-img--petagoo-c-00049 {
    top: 31.7739583333vw;
    left: 0.46875vw;
    width: calc(13.5416666667vw * var(--gummy-scale));
  }
}
#tvcm .tvcm-wrapper .gummy-right .gummy-img {
  transform: rotate(90deg);
  transform-origin: bottom left;
}
@media (min-width: 768px) {
  #tvcm .tvcm-wrapper .gummy-right .gummy-img {
    pointer-events: auto;
    cursor: pointer;
    --gummy-scale: 0.30368;
    --gummy-layout-rot: 90deg;
    transform: rotate(var(--gummy-layout-rot));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-c-00049 {
    top: calc(-0.0604166667 * min(100vw, 1920px));
    right: calc(-0.0291666667 * min(100vw, 1920px));
    width: calc(0.1354166667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-a-00048 {
    top: calc(-0.0302083333 * min(100vw, 1920px));
    right: calc(-0.0458333333 * min(100vw, 1920px));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-b-00052 {
    top: calc(0.034375 * min(100vw, 1920px));
    right: calc(-0.053125 * min(100vw, 1920px));
    width: calc(0.23125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-c-00043 {
    top: calc(0.1041666667 * min(100vw, 1920px));
    right: calc(-0.0416666667 * min(100vw, 1920px));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-a-00044 {
    top: calc(0.1666666667 * min(100vw, 1920px));
    right: calc(-0.0677083333 * min(100vw, 1920px));
    width: calc(0.2614583333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-layout-rot: 81.42deg;
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-b-00047 {
    top: calc(0.2375 * min(100vw, 1920px));
    right: calc(-0.04375 * min(100vw, 1920px));
    width: calc(0.1609375 * min(100vw, 1920px) * var(--gummy-scale));
  }
}
@media (max-width: 767px) {
  #tvcm .tvcm-wrapper .gummy-right .gummy-img {
    /* SP のみ：左列と同様 1.1 倍＋top を同倍率で調整 */
    pointer-events: auto;
    cursor: pointer;
    --gummy-scale: 0.3583424;
    --gummy-layout-rot: 90deg;
    transform: rotate(var(--gummy-layout-rot));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-c-00049 {
    top: -7.1291666667vw;
    right: -2.9166666667vw;
    width: calc(13.5416666667vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-a-00048 {
    top: -3.5645833333vw;
    right: -4.5833333333vw;
    width: calc(15.78125vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-b-00052 {
    top: 4.05625vw;
    right: -5.3125vw;
    width: calc(23.125vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-c-00043 {
    top: 12.2916666667vw;
    right: -4.1666666667vw;
    width: calc(15.78125vw * var(--gummy-scale));
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-a-00044 {
    top: 19.6666666667vw;
    right: -6.7708333333vw;
    width: calc(26.1458333333vw * var(--gummy-scale));
    --gummy-layout-rot: 81.42deg;
  }
  #tvcm .tvcm-wrapper .gummy-right .gummy-img--petagoo-b-00047 {
    top: 28.025vw;
    right: -4.375vw;
    width: calc(16.09375vw * var(--gummy-scale));
  }
}
@media (prefers-reduced-motion: no-preference) {
  #tvcm .tvcm-wrapper .gummy-left .gummy-img.is-tvcm-jump {
    animation: tvcm-gummy-jump-left var(--tvcm-jump-dur, 0.78s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tvcm .tvcm-wrapper .gummy-left .gummy-img.is-tvcm-jump {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #tvcm .tvcm-wrapper .gummy-right .gummy-img.is-tvcm-jump {
    animation: tvcm-gummy-jump-right var(--tvcm-jump-dur, 0.78s) linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tvcm .tvcm-wrapper .gummy-right .gummy-img.is-tvcm-jump {
    animation: none !important;
  }
}
#tvcm .tvcm-wrapper .tvcm-item {
  background-color: #dedede;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
}
@media (min-width: 768px) {
  #tvcm .tvcm-wrapper .tvcm-item {
    width: calc(0.625 * min(100vw, 1920px));
    border-radius: calc(0.0260416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #tvcm .tvcm-wrapper .tvcm-item {
    width: 74.9333333333vw;
    border-radius: 3.2vw;
  }
}
#tvcm .tvcm-wrapper .tvcm-item .tvcm-item__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* ----------------------------------------------------------------
  #sns
---------------------------------------------------------------- */
#sns {
  text-align: center;
  background: linear-gradient(to bottom, transparent 50%, #000 50.1%, #000 100%);
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  #sns {
    margin-top: calc(-0.05625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #sns {
    margin-top: -5.3333333333vw;
    padding-top: 0.5333333333vw;
  }
}
@media (min-width: 768px) {
  #sns .inner {
    padding: calc(0.028125 * min(100vw, 1920px)) calc(0.03125 * min(100vw, 1920px)) calc(0.0854166667 * min(100vw, 1920px));
    border: solid calc(0.015625 * min(100vw, 1920px)) #001f48;
    border-radius: calc(0.0520833333 * min(100vw, 1920px));
    background: url(../img/sns_bg-meteor.svg) no-repeat center center/100vw auto;
  }
}
@media (max-width: 767px) {
  #sns .inner {
    padding-top: 8.5333333333vw;
    padding-bottom: 11.2vw;
    border: solid 1.5625066667vw #001f48;
    border-radius: 5.20832vw;
    background: url(../img/sns_bg-meteor_sp.svg) no-repeat center center/cover;
  }
}
@media (min-width: 768px) {
  #sns h2 img {
    width: calc(0.2255208333 * min(100vw, 1920px));
    transform: translateX(calc(0.009375 * min(100vw, 1920px)));
  }
}
@media (max-width: 767px) {
  #sns h2 img {
    width: 29.3333333333vw;
    transform: translateX(0.8vw);
  }
}
@media (min-width: 768px) {
  #sns .gummy-img--petagoo-a-00034 {
    top: calc(0.109375 * min(100vw, 1920px));
    left: calc(50% + calc(0.0135416667 * min(100vw, 1920px)));
    width: calc(0.0447916667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #sns .gummy-img--petagoo-a-00034 {
    top: 18.8vw;
    left: 51.4666666667vw;
    width: 5.2vw;
  }
}
#sns {
  /* 足元を軸ににゅる（skew のみ・translate なし） */
}
@media (min-width: 768px) {
  #sns .gummy-img > img {
    transform-origin: center bottom;
    animation: sns-gummy-nyuru-skew-only var(--sns-wobble-dur, 2.75s) linear infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  #sns .gummy-img > img {
    animation: none !important;
  }
}
#sns .sns-items {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  /* 一覧のブロック幅に縮めて親内で水平センター寄せ（画面中央付近に群が乗る） */
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
@media (min-width: 768px) {
  #sns .sns-items {
    gap: calc(0.0234375 * min(100vw, 1920px));
    margin-top: calc(-0.175 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #sns .sns-items {
    gap: 2.5333333333vw;
    margin-top: -24.5333333333vw;
  }
}
#sns .sns-items .sns-item {
  /* 画面下端の水平中央付近から各スロットへ斜めに飛び立つ（--sns-from-x / --sns-from-y） */
  --sns-from-x: 0px;
  --sns-from-y: min(40vh, 15rem);
}
#sns .sns-items .sns-item:nth-child(1) {
  --sns-from-x: calc(0.09375 * min(100vw, 1920px));
  --sns-from-y: min(42vh, 15rem);
}
#sns .sns-items .sns-item:nth-child(2) {
  --sns-from-x: calc(0.0333333333 * min(100vw, 1920px));
  --sns-from-y: min(38vh, 13.5rem);
}
#sns .sns-items .sns-item:nth-child(3) {
  --sns-from-x: calc(-0.0333333333 * min(100vw, 1920px));
  --sns-from-y: min(38vh, 13.5rem);
}
#sns .sns-items .sns-item:nth-child(4) {
  --sns-from-x: calc(-0.09375 * min(100vw, 1920px));
  --sns-from-y: min(42vh, 15rem);
}
#sns .sns-items .sns-item:nth-child(n+5) {
  --sns-from-x: 0px;
  --sns-from-y: min(40vh, 15rem);
}
#sns .sns-items:not(.is-revealed) .sns-item {
  opacity: 0;
  transform: translate3d(var(--sns-from-x), var(--sns-from-y), 0) scale(0.68);
  transform-origin: 50% 100%;
  pointer-events: none;
}
#sns .sns-items.is-revealed .sns-item {
  transform-origin: 50% 100%;
  animation: sns-item-pop-diagonal 0.76s cubic-bezier(0.18, 0.72, 0.15, 1.08) both;
}
#sns .sns-items.is-revealed .sns-item:nth-child(1) {
  animation-delay: 0s;
}
#sns .sns-items.is-revealed .sns-item:nth-child(2) {
  animation-delay: 0.09s;
}
#sns .sns-items.is-revealed .sns-item:nth-child(3) {
  animation-delay: 0.18s;
}
#sns .sns-items.is-revealed .sns-item:nth-child(4) {
  animation-delay: 0.27s;
}
#sns .sns-items.is-revealed .sns-item:nth-child(5) {
  animation-delay: 0.36s;
}
#sns .sns-items.is-revealed .sns-item:nth-child(6) {
  animation-delay: 0.45s;
}
#sns .sns-items.is-revealed .sns-item:nth-child(7) {
  animation-delay: 0.54s;
}
#sns .sns-items.is-revealed .sns-item:nth-child(8) {
  animation-delay: 0.63s;
}
#sns .sns-items .sns-item a {
  display: block;
  position: relative;
}
#sns .sns-items .sns-item a .gummy-chara-primary,
#sns .sns-items .sns-item a .gummy-chara-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  #sns .sns-items .sns-item a .gummy-chara-primary,
  #sns .sns-items .sns-item a .gummy-chara-secondary {
    width: calc(0.03125 * min(100vw, 1920px));
    height: calc(0.0520833333 * min(100vw, 1920px));
    top: calc(-0.0416666667 * min(100vw, 1920px));
  }
}
@media (min-width: 768px) {
  #sns .sns-items .sns-item a .gummy-chara-primary img,
  #sns .sns-items .sns-item a .gummy-chara-secondary img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: translateY(110%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  #sns .sns-items .sns-item a .gummy-chara-primary img.is-active,
  #sns .sns-items .sns-item a .gummy-chara-secondary img.is-active {
    transform: translateY(0);
  }
}
@media (max-width: 767px) {
  #sns .sns-items .sns-item a .gummy-chara-primary img,
  #sns .sns-items .sns-item a .gummy-chara-secondary img {
    display: none;
  }
}
#sns .sns-items .sns-item a img.btn {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  #sns .sns-items .sns-item a img.btn {
    width: calc(0.140625 * min(100vw, 1920px));
    height: calc(0.140625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #sns .sns-items .sns-item a img.btn {
    width: 20.5333333333vw;
    height: 20.5333333333vw;
  }
}
#sns .sns-items .sns-item a:hover {
  transform: scale(1.02);
}
#sns .sns-items .nv-instagram a .gummy-chara-primary,
#sns .sns-items .nv-instagram a .gummy-chara-secondary {
  top: calc(-0.0333333333 * min(100vw, 1920px));
  left: calc(0.0125 * min(100vw, 1920px));
  transform: rotate(-25deg);
}
#sns .sns-items .nv-instagram a .gummy-chara-secondary {
  width: calc(0.0375 * min(100vw, 1920px));
  top: calc(-0.0416666667 * min(100vw, 1920px));
}
#sns .sns-items .nv-tiktok a .gummy-chara-secondary,
#sns .sns-items .nv-youtube a .gummy-chara-secondary {
  width: calc(0.0479166667 * min(100vw, 1920px));
}
@media (prefers-reduced-motion: reduce) {
  #sns .sns-items:not(.is-revealed) .sns-item,
  #sns .sns-items.is-revealed .sns-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    pointer-events: auto !important;
  }
}

/* ----------------------------------------------------------------
  page ride（/ride/）— PC: トップ #mv と同様 16:9 全幅。余白はフッター黒で延長
---------------------------------------------------------------- */
@keyframes ride-scene0-btn-glow {
  0% {
    transform: scale(0.95);
  }
  40% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.95);
  }
}
body.page-ride {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000;
}
body.page-ride > main.ride-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  body.page-ride > main.ride-main {
    background-image: none;
  }
}
body.page-ride > main.ride-main .logo {
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  mix-blend-mode: overlay;
  z-index: 21;
}
@media (min-width: 768px) {
  body.page-ride > main.ride-main .logo {
    background-image: url(../img/logo-wh.svg);
  }
}
@media (max-width: 767px) {
  body.page-ride > main.ride-main .logo {
    background-image: url(../img/logo-bk.svg);
  }
}
body.page-ride > main.ride-main .logo h1 {
  color: transparent;
  font-size: 0;
}
@media (min-width: 768px) {
  body.page-ride > main.ride-main .logo {
    width: 7.5520833333vw;
    height: 3.6458333333vw;
    top: 2.34375vw;
    left: 1.7708333333vw;
  }
}
@media (max-width: 767px) {
  body.page-ride > main.ride-main .logo {
    width: 19.3333333333vw;
    height: 9.3333333333vw;
    top: 6.6666666667vw;
    left: 3.4666666667vw;
  }
}
body.page-ride .ride-stage {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  body.page-ride .ride-stage {
    aspect-ratio: 16/9;
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-stage {
    aspect-ratio: 16/9;
  }
}
body.page-ride .ride-stage__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.page-ride .ride-stage__fill {
  flex: 1 1 auto;
  min-height: 0;
  background-color: #000;
}
body.page-ride {
  /* シーン0（Figma ride--start / scene_00）。座標は _ride-scene-0-generated.scss */
}
body.page-ride .ride-scene {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  overflow: hidden;
}
body.page-ride {
  /* シーン73：画面を埋めるグミをシーン0の 3D グミ（z-index:100）より前面に */
}
body.page-ride .ride-scene--73 {
  z-index: 200;
}
body.page-ride .ride-scene__bg {
  position: absolute;
  inset: 0;
  background-color: #00003c;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
body.page-ride .ride-scene--0 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_00.webp);
  transform-origin: var(--ride-scene0-bg-zoom-ox, 50%) var(--ride-scene0-bg-zoom-oy, 50%);
  transform: scale(var(--ride-scene0-bg-zoom-scale, 1));
  will-change: transform;
  /* ズームイン（--bg-zooming）・ズームアウト（復帰時にクラス解除 / 変数変更）の両方で同じイージング */
  transition: transform 0.72s cubic-bezier(0.33, 0.1, 0.22, 1);
}
body.page-ride .ride-scene--0.ride-scene--0--bg-zooming .ride-scene__bg {
  --ride-scene0-bg-zoom-scale: 2.64;
}
body.page-ride {
  /* シーン0 背景のループ動画。読み込み前/失敗時は scene_00.webp（background-image）がフォールバック表示される */
}
body.page-ride .ride-scene0__bg-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--0 .ride-scene__bg {
    transition: none;
  }
  body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-scene0__buttons,
  body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-scene-0__gummy,
  body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-scene0__announce,
  body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-swipe-hint {
    animation: none;
    opacity: 1;
    visibility: visible;
  }
}
body.page-ride .ride-scene--1 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_01.webp);
}
body.page-ride .ride-scene--2 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_02.webp);
}
body.page-ride .ride-scene--3 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_03.webp);
}
body.page-ride .ride-scene--4 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_04.webp);
}
body.page-ride .ride-scene--8 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_08.webp);
}
body.page-ride .ride-scene--5 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_05.webp);
}
body.page-ride .ride-scene--6 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_06.webp);
}
body.page-ride .ride-scene--7 .ride-scene__bg,
body.page-ride .ride-scene--72 .ride-scene__bg,
body.page-ride .ride-scene--73 .ride-scene__bg {
  background-image: url(../img/spaceship/scene_07.webp);
}
body.page-ride .ride-scene0__announce {
  position: absolute;
  z-index: 2;
  height: auto;
  max-width: none;
  display: block;
  pointer-events: none;
}
@media (min-width: 768px) {
  body.page-ride .ride-scene0__announce {
    left: 50%;
    transform: translateX(-50%);
  }
}
body.page-ride .ride-scene-0__gummy {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
@media (min-width: 768px) {
  body.page-ride .ride-scene-0__gummy {
    perspective: 1500px;
    perspective-origin: 50% 38%;
    transform-style: preserve-3d;
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-scene-0__gummy {
    perspective: 1500px;
    perspective-origin: 50% 38%;
    transform-style: preserve-3d;
  }
}
body.page-ride .ride-scene-0__gummy .gummy-img {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
body.page-ride .ride-scene-0__gummy .gummy-img--mv-a-00008 {
  top: 19.7916666667vw;
  left: -2.2135416667vw;
  width: 15.6770833333vw;
  transform: rotate(45deg);
  overflow: visible;
}
body.page-ride .ride-scene-0__gummy .gummy-img--mv-b-00000 {
  top: 39.3229166667vw;
  left: 87.7083333333vw;
  width: 10.3125vw;
  transform: rotate(-45deg);
  overflow: visible;
}
body.page-ride .ride-scene-0__gummy .gummy-img--petagoo-c-00044 {
  top: 40.6770833333vw;
  left: 23.3854166667vw;
  width: 11.0416666667vw;
  transform: rotate(-30.141deg);
}
@media (min-width: 768px) {
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img {
    transform-style: preserve-3d;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img > .gummy-img__inner {
    transform-style: preserve-3d;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img > .gummy-img__inner > img {
    animation: mv-gummy-depth-in 0.88s ease-in-out both;
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    transform-origin: center center;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--mv-a-00008 > .gummy-img__inner > img,
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--mv-b-00000 > .gummy-img__inner > img {
    animation-name: mv-gummy-slap-in;
    animation-duration: 0.88s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.95);
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    animation-fill-mode: both;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--petagoo-c-00008 {
    transform: scaleY(0);
    transform-origin: center bottom;
    animation-name: mv-gummy-stand-in;
    animation-duration: 0.3s;
    animation-delay: calc(1.6s + var(--mv-gummy-delay, 0s));
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--petagoo-c-00008 > .gummy-img__inner > img {
    transform-origin: center bottom;
    animation-name: mv-gummy-jump-final;
    animation-duration: 0.55s;
    animation-delay: var(--mv-c08-jump-delay, 2.4s);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: both;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy {
    /* mv-a / mv-b / c-00008 以外：ラッパーで回転、img で TVCM にゅる（.is-mv-idle は mv-gummy-idle.js が付与） */
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle {
    animation: none;
    animation-delay: 0s;
    transform-origin: center center;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle > img {
    animation: tvcm-gummy-nyuru var(--mv-idle-nyuru-dur, 2.75s) linear infinite alternate;
    animation-delay: 0s;
    transform-origin: center center;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--petagoo-c-00008 > .gummy-img__inner > img.is-mv-idle-jump {
    animation: mv-gummy-idle-jump 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img {
    transform-style: preserve-3d;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img > .gummy-img__inner {
    transform-style: preserve-3d;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img > .gummy-img__inner > img {
    animation: mv-gummy-depth-in 0.88s ease-in-out both;
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    transform-origin: center center;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--mv-a-00008 > .gummy-img__inner > img,
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--mv-b-00000 > .gummy-img__inner > img {
    animation-name: mv-gummy-slap-in;
    animation-duration: 1.08s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.95);
    animation-delay: calc(1.12s + var(--mv-gummy-delay, 0s));
    animation-fill-mode: both;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--petagoo-c-00008 {
    transform: scaleY(0);
    transform-origin: center bottom;
    animation-name: mv-gummy-stand-in;
    animation-duration: 0.3s;
    animation-delay: calc(1.6s + var(--mv-gummy-delay, 0s));
    animation-timing-function: linear;
    animation-fill-mode: both;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--petagoo-c-00008 > .gummy-img__inner > img {
    transform-origin: center bottom;
    animation-name: mv-gummy-jump-final;
    animation-duration: 0.55s;
    animation-delay: var(--mv-c08-jump-delay, 2.4s);
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-fill-mode: both;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle {
    animation: none;
    animation-delay: 0s;
    transform-origin: center center;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img:not(.gummy-img--mv-a-00008):not(.gummy-img--mv-b-00000):not(.gummy-img--petagoo-c-00008) > .gummy-img__inner.is-mv-idle > img {
    animation: tvcm-gummy-nyuru var(--mv-idle-nyuru-dur, 2.75s) linear infinite alternate;
    animation-delay: 0s;
    transform-origin: center center;
  }
  body.page-ride .ride-scene--0:not([hidden]) .ride-scene-0__gummy .gummy-img--petagoo-c-00008 > .gummy-img__inner > img.is-mv-idle-jump {
    animation: mv-gummy-idle-jump 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }
}
body.page-ride .ride-scene0__buttons {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
body.page-ride .ride-scene--0.ride-scene--0--hub-launching .ride-scene0__buttons,
body.page-ride .ride-scene--0.ride-scene--0--hub-returning .ride-scene0__buttons {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.page-ride .ride-scene--0.ride-scene--0--hub-launching .ride-scene-0__gummy,
body.page-ride .ride-scene--0.ride-scene--0--hub-returning .ride-scene-0__gummy {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.page-ride .ride-scene--0.ride-scene--0--hub-launching .ride-scene0__announce,
body.page-ride .ride-scene--0.ride-scene--0--hub-returning .ride-scene0__announce,
body.page-ride .ride-scene--0.ride-scene--0--hub-launching .ride-swipe-hint,
body.page-ride .ride-scene--0.ride-scene--0--hub-returning .ride-swipe-hint {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes ride-scene0-hub-return-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-scene0__buttons,
body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-scene-0__gummy,
body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-scene0__announce,
body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-swipe-hint {
  visibility: visible;
  pointer-events: none;
  animation: ride-scene0-hub-return-fade 0.42s cubic-bezier(0.33, 0.1, 0.22, 1) both;
}
body.page-ride .ride-scene--0.ride-scene--0--hub-return-reveal .ride-scene0__buttons {
  pointer-events: auto;
}
body.page-ride .ride-scene0__btn {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  body.page-ride .ride-scene0__btn {
    /* 生成 SCSS の left/top は宝石中心の design px（pc-vw）。幅は pc-vw 上限付きでサイズ変化しても背景とズレない。 */
    transform: translate(-50%, -50%);
  }
}
body.page-ride .ride-scene0__btn:focus-visible {
  outline: 2px solid #fdc81e;
  outline-offset: 2px;
}
body.page-ride .ride-scene0__btn-face {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
body.page-ride .ride-scene0__btn-img {
  display: block;
  width: 100%;
  height: auto;
}
body.page-ride .ride-scene0__btn-img--default {
  transition: opacity 0.2s ease;
}
body.page-ride .ride-scene0__btn-img--hover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.page-ride .ride-scene0__btn--gem:hover .ride-scene0__btn-img--hover,
body.page-ride .ride-scene0__btn--gem:focus-visible .ride-scene0__btn-img--hover {
  opacity: 1;
}
body.page-ride .ride-scene0__btn--gem:hover .ride-scene0__btn-img--default,
body.page-ride .ride-scene0__btn--gem:focus-visible .ride-scene0__btn-img--default {
  opacity: 0;
}
body.page-ride .ride-scene--0[hidden] .ride-scene0__btn--gem .ride-scene0__btn-face {
  animation: none;
}
body.page-ride .ride-scene0__btn--gem .ride-scene0__btn-face {
  animation: ride-scene0-btn-glow 2.35s ease-in-out infinite;
}
body.page-ride .ride-scene0__btn--gem:hover .ride-scene0__btn-face,
body.page-ride .ride-scene0__btn--gem:focus-visible .ride-scene0__btn-face {
  animation-play-state: paused;
  opacity: 1;
  filter: drop-shadow(0 0 0.45em rgba(255, 235, 180, 0.95)) drop-shadow(0 0 0.75em rgba(253, 200, 30, 0.75));
}
body.page-ride .ride-scene0__btn--n1 .ride-scene0__btn-face {
  animation-delay: 0s;
}
body.page-ride .ride-scene0__btn--n2 .ride-scene0__btn-face {
  animation-delay: 0.35s;
}
body.page-ride .ride-scene0__btn--n3 .ride-scene0__btn-face {
  animation-delay: 0.7s;
}
body.page-ride .ride-scene0__btn--n4 .ride-scene0__btn-face {
  animation-delay: 1.05s;
}
body.page-ride .ride-scene0__btn--n5 .ride-scene0__btn-face {
  animation-delay: 1.4s;
}
body.page-ride .ride-scene0__btn--n6 .ride-scene0__btn-face {
  animation-delay: 1.75s;
}
body.page-ride .ride-scene0__btn--n7 .ride-scene0__btn-face {
  animation-delay: 2.1s;
}
body.page-ride .ride-scene0__btn--n8 .ride-scene0__btn-face {
  animation-delay: 2.45s;
}
@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene0__btn-img--hover {
    transition: none;
  }
  body.page-ride .ride-scene0__btn--gem .ride-scene0__btn-face {
    animation: none;
    filter: drop-shadow(0 0 0.22em rgba(253, 200, 30, 0.45));
    opacity: 1;
  }
  body.page-ride .ride-scene0__btn--gem:hover .ride-scene0__btn-face,
  body.page-ride .ride-scene0__btn--gem:focus-visible .ride-scene0__btn-face {
    filter: drop-shadow(0 0 0.35em rgba(255, 235, 180, 0.85)) drop-shadow(0 0 0.55em rgba(253, 200, 30, 0.45));
  }
}
body.page-ride > footer {
  flex-shrink: 0;
}

body.page-ride .ride-scene--0 .ride-scene0__announce {
  top: calc(50% + 9.4791666667vw);
  width: calc(0.2604166667 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n1 {
  left: 50.8875vw;
  top: 28.5285208333vw;
  width: calc(0.0614593229 * min(100vw, 1920px));
  height: calc(0.0614593229 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n2 {
  left: 27.26359375vw;
  top: 4.6896354167vw;
  width: calc(0.061459375 * min(100vw, 1920px));
  height: calc(0.061459375 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n3 {
  left: 64.50475vw;
  top: 11.84953125vw;
  width: calc(0.061459375 * min(100vw, 1920px));
  height: calc(0.061459375 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n4 {
  left: 79.69171875vw;
  top: 16.2016145833vw;
  width: calc(0.0614593229 * min(100vw, 1920px));
  height: calc(0.0614593229 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n5 {
  left: 79.2407760417vw;
  top: 47.2815989583vw;
  width: calc(0.061459375 * min(100vw, 1920px));
  height: calc(0.061459375 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n6 {
  left: 13.82090625vw;
  top: 48.72453125vw;
  width: calc(0.061459375 * min(100vw, 1920px));
  height: calc(0.061459375 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n7 {
  left: 94.5120260417vw;
  top: 13.2578645833vw;
  width: calc(0.061459375 * min(100vw, 1920px));
  height: calc(0.061459375 * min(100vw, 1920px));
}

body.page-ride .ride-scene--0 .ride-scene0__btn--n8 {
  left: 9.8935208333vw;
  top: 14.003015625vw;
  width: calc(0.0629105208 * min(100vw, 1920px));
  height: calc(0.0629105208 * min(100vw, 1920px));
}

body.page-ride .ride-msg-frames {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

body.page-ride .ride-msg__frame {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  height: auto;
}
@media (min-width: 768px) {
  body.page-ride .ride-msg__frame {
    left: calc(50% + calc(-0.2473958 * min(100vw, 1920px)));
    top: calc(50% + calc(0.1120833 * min(100vw, 1920px)));
    width: calc(0.4947917 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-msg__frame {
    bottom: 11.7333333333vw;
    left: 50%;
    transform: translateX(-50%);
    width: 89.3333333333vw;
  }
}

body.page-ride .ride-msg__frame[hidden] {
  display: none !important;
}

body.page-ride .ride-msg__frame-img {
  display: block;
  width: 100%;
  height: auto;
}

body.page-ride .ride-msg__copy {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  body.page-ride .ride-msg__copy {
    left: calc(50% + calc(-0.1196854 * min(100vw, 1920px)));
    top: calc(50% + calc(0.15075 * min(100vw, 1920px)));
    width: calc(0.34 * min(100vw, 1920px));
    min-height: calc(0.0393355 * min(100vw, 1920px));
    font-size: calc(0.0145833333 * min(100vw, 1920px));
    line-height: 1.714;
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-msg__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 4.2666666667vw;
    line-height: 6.9333333333vw;
    left: 12.8vw;
    bottom: 12.8vw;
    width: 74.6666666667vw;
    min-height: 28.5333333333vw;
  }
}

body.page-ride .ride-msg__copy[hidden] {
  display: none !important;
}

body.page-ride .ride-msg__copy p {
  margin: 0;
}

body.page-ride .ride-msg__char,
body.page-ride .ride-msg__ty-unit {
  opacity: 0;
  transition: opacity 0.04s ease;
}

body.page-ride .ride-msg__char.is-visible,
body.page-ride .ride-msg__ty-unit.is-visible {
  opacity: 1;
}

@media (min-width: 768px) {
  body.page-ride .ride-msg__ty-unit--br-sp {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-msg__char,
  body.page-ride .ride-msg__ty-unit {
    opacity: 1;
    transition: none;
  }
}
body.page-ride .ride-msg__btn-next {
  position: absolute;
  z-index: 4;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) {
  body.page-ride .ride-msg__btn-next {
    left: calc(50% + calc(0.1953125 * min(100vw, 1920px)));
    top: calc(50% + calc(0.210375 * min(100vw, 1920px)));
    width: calc(0.0364583 * min(100vw, 1920px));
    height: calc(0.0364583 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-msg__btn-next {
    left: 79.2vw;
    bottom: 7.2vw;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
  }
}
body.page-ride .ride-msg__btn-next:focus-visible {
  outline: 2px solid #fdc81e;
  outline-offset: 2px;
}
body.page-ride .ride-msg__btn-next {
  /* #about .slide-prev / .slide-next と同様: 登場は子の animation のみ、hover では transition しない */
}
body.page-ride .ride-msg__btn-next .ride-msg__btn-next-face {
  display: block;
  line-height: 0;
  transform: scale(0);
  transform-origin: center center;
  transition: none;
}
body.page-ride .ride-msg__btn-next .ride-msg__btn-next-face img {
  display: block;
  width: 100%;
  height: auto;
}
body.page-ride .ride-msg__btn-next:not(.ride-msg__btn-next--pending) .ride-msg__btn-next-face.is-revealed {
  animation: about-slide-arrow-reveal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@media (hover: hover) {
  body.page-ride .ride-msg__btn-next:not(.ride-msg__btn-next--pending) .ride-msg__btn-next-face.is-revealed:hover {
    transform: scale(1.08) !important;
  }
}

body.page-ride .ride-msg__btn-next.ride-msg__btn-next--pending {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

body.page-ride .ride-msg__btn-next:not(.ride-msg__btn-next--pending) {
  opacity: 1;
  visibility: visible;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-msg__btn-next .ride-msg__btn-next-face {
    transform: scale(1);
  }
  body.page-ride .ride-msg__btn-next:not(.ride-msg__btn-next--pending) .ride-msg__btn-next-face.is-revealed {
    animation: none;
  }
}
body.page-ride .ride-scene--2 .ride-scene-2__media {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 768px) {
  body.page-ride .ride-scene--2 .ride-scene-2__media {
    left: 50%;
    top: calc(50% + calc(-0.20125 * min(100vw, 1920px)));
    width: calc(0.45 * min(100vw, 1920px));
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-scene--2 .ride-scene-2__media {
    top: 32vw;
    left: 50%;
    width: 80vw;
    transform: translateX(-50%);
  }
}

body.page-ride .ride-scene--2 .ride-scene-2__content-frame,
body.page-ride .ride-scene--2 .ride-scene-2__content-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

body.page-ride .ride-scene--2 .ride-scene-2__content-frame {
  transform: scaleX(0);
  transform-origin: center center;
  will-change: transform;
}

body.page-ride .ride-scene--2 .ride-scene-2__content-body {
  opacity: 0;
  will-change: opacity;
}

body.page-ride .ride-scene--2 .ride-scene-2__frame-img,
body.page-ride .ride-scene--2 .ride-scene-2__content-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body.page-ride .ride-scene--2 .ride-scene-2__media.is-active .ride-scene-2__content-frame {
  animation: ride-scene-2-frame-open 0.55s cubic-bezier(0.2, 0.85, 0.28, 1) forwards;
}
body.page-ride .ride-scene--2 .ride-scene-2__media.is-active .ride-scene-2__content-body {
  animation: ride-scene-2-content-fade 0.42s ease 0.55s forwards;
}
body.page-ride .ride-scene--2 .ride-scene-2__media.is-active .ride-scene-2__content-body .ride-scene-2__content-img {
  will-change: filter;
  animation: ride-scene-2-cyber-flicker 7.2s linear infinite;
  animation-delay: calc(0.55s + 0.42s);
}

@keyframes ride-scene-2-frame-open {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ride-scene-2-content-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ride-scene-2-cyber-flicker {
  0%, 3.1%, 4.1%, 10%, 18.1%, 18.3%, 28%, 38.1%, 38.15%, 38.2%, 44%, 55.1%, 55.2%, 62%, 70.1%, 70.12%, 78%, 88%, 100% {
    filter: brightness(1) contrast(1);
  }
  3%, 18.2%, 38.12%, 55.15%, 70.11% {
    filter: brightness(0.38) contrast(1.2);
  }
  2.1%, 11%, 30%, 50%, 65%, 90% {
    filter: brightness(0.75) contrast(1.08);
  }
  2.2%, 4%, 19%, 40%, 56%, 72%, 91% {
    filter: brightness(1.08) contrast(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--2 .ride-scene-2__content-frame,
  body.page-ride .ride-scene--2 .ride-scene-2__content-body {
    animation: none !important;
  }
  body.page-ride .ride-scene--2 .ride-scene-2__media.is-active .ride-scene-2__content-body .ride-scene-2__content-img {
    animation: none !important;
    filter: none;
  }
  body.page-ride .ride-scene--2 .ride-scene-2__media.is-active .ride-scene-2__content-frame {
    transform: scaleX(1);
  }
  body.page-ride .ride-scene--2 .ride-scene-2__media.is-active .ride-scene-2__content-body {
    opacity: 1;
  }
}
body.page-ride .ride-scene--3 .ride-scene-3__media {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 768px) {
  body.page-ride .ride-scene--3 .ride-scene-3__media {
    left: 50%;
    top: calc(50% + calc(-0.20125 * min(100vw, 1920px)));
    width: calc(0.45 * min(100vw, 1920px));
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-scene--3 .ride-scene-3__media {
    top: 32vw;
    left: 50%;
    width: 80vw;
    transform: translateX(-50%);
  }
}

body.page-ride .ride-scene--3 .ride-scene-3__content-frame,
body.page-ride .ride-scene--3 .ride-scene-3__content-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

body.page-ride .ride-scene--3 .ride-scene-3__content-frame {
  transform: scaleX(0);
  transform-origin: center center;
  will-change: transform;
}

body.page-ride .ride-scene--3 .ride-scene-3__content-body {
  opacity: 0;
  will-change: opacity;
}

body.page-ride .ride-scene--3 .ride-scene-3__frame-img,
body.page-ride .ride-scene--3 .ride-scene-3__content-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body.page-ride .ride-scene--3 .ride-scene-3__media.is-active .ride-scene-3__content-frame {
  animation: ride-scene-3-frame-open 0.55s cubic-bezier(0.2, 0.85, 0.28, 1) forwards;
}
body.page-ride .ride-scene--3 .ride-scene-3__media.is-active .ride-scene-3__content-body {
  animation: ride-scene-3-content-fade 0.42s ease 0.55s forwards;
}
body.page-ride .ride-scene--3 .ride-scene-3__media.is-active .ride-scene-3__content-body .ride-scene-3__content-img {
  will-change: filter;
  animation: ride-scene-3-cyber-flicker 7.2s linear infinite;
  animation-delay: calc(0.55s + 0.42s);
}

@keyframes ride-scene-3-frame-open {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ride-scene-3-content-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ride-scene-3-cyber-flicker {
  0%, 3.1%, 4.1%, 10%, 18.1%, 18.3%, 28%, 38.1%, 38.15%, 38.2%, 44%, 55.1%, 55.2%, 62%, 70.1%, 70.12%, 78%, 88%, 100% {
    filter: brightness(1) contrast(1);
  }
  3%, 18.2%, 38.12%, 55.15%, 70.11% {
    filter: brightness(0.38) contrast(1.2);
  }
  2.1%, 11%, 30%, 50%, 65%, 90% {
    filter: brightness(0.75) contrast(1.08);
  }
  2.2%, 4%, 19%, 40%, 56%, 72%, 91% {
    filter: brightness(1.08) contrast(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--3 .ride-scene-3__content-frame,
  body.page-ride .ride-scene--3 .ride-scene-3__content-body {
    animation: none !important;
  }
  body.page-ride .ride-scene--3 .ride-scene-3__media.is-active .ride-scene-3__content-body .ride-scene-3__content-img {
    animation: none !important;
    filter: none;
  }
  body.page-ride .ride-scene--3 .ride-scene-3__media.is-active .ride-scene-3__content-frame {
    transform: scaleX(1);
  }
  body.page-ride .ride-scene--3 .ride-scene-3__media.is-active .ride-scene-3__content-body {
    opacity: 1;
  }
}
body.page-ride .ride-scene--8 .ride-scene-8__media {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
@media (min-width: 768px) {
  body.page-ride .ride-scene--8 .ride-scene-8__media {
    left: 50%;
    top: calc(50% + calc(-0.20925 * min(100vw, 1920px)));
    width: calc(0.65 * min(100vw, 1920px));
    transform: translateX(-50%);
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-scene--8 .ride-scene-8__media {
    top: 11.7333333333vw;
    left: 50%;
    width: 64vw;
    transform: translateX(-50%);
  }
}

body.page-ride .ride-scene--8 .ride-scene-8__content-frame,
body.page-ride .ride-scene--8 .ride-scene-8__content-body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

body.page-ride .ride-scene--8 .ride-scene-8__content-frame {
  transform: scaleX(0);
  transform-origin: center center;
  will-change: transform;
}

body.page-ride .ride-scene--8 .ride-scene-8__content-body {
  opacity: 0;
  will-change: opacity;
}

body.page-ride .ride-scene--8 .ride-scene-8__frame-img,
body.page-ride .ride-scene--8 .ride-scene-8__content-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

body.page-ride .ride-scene--8 .ride-scene-8__media.is-active .ride-scene-8__content-frame {
  animation: ride-scene-8-frame-open 0.55s cubic-bezier(0.2, 0.85, 0.28, 1) forwards;
}
body.page-ride .ride-scene--8 .ride-scene-8__media.is-active .ride-scene-8__content-body {
  animation: ride-scene-8-content-fade 0.42s ease 0.55s forwards;
}
body.page-ride .ride-scene--8 .ride-scene-8__media.is-active .ride-scene-8__content-body .ride-scene-8__content-img {
  will-change: filter;
  animation: ride-scene-8-cyber-flicker 7.2s linear infinite;
  animation-delay: calc(0.55s + 0.42s);
}

@keyframes ride-scene-8-frame-open {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ride-scene-8-content-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes ride-scene-8-cyber-flicker {
  0%, 3.1%, 4.1%, 10%, 18.1%, 18.3%, 28%, 38.1%, 38.15%, 38.2%, 44%, 55.1%, 55.2%, 62%, 70.1%, 70.12%, 78%, 88%, 100% {
    filter: brightness(1) contrast(1);
  }
  3%, 18.2%, 38.12%, 55.15%, 70.11% {
    filter: brightness(0.38) contrast(1.2);
  }
  2.1%, 11%, 30%, 50%, 65%, 90% {
    filter: brightness(0.75) contrast(1.08);
  }
  2.2%, 4%, 19%, 40%, 56%, 72%, 91% {
    filter: brightness(1.08) contrast(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--8 .ride-scene-8__content-frame,
  body.page-ride .ride-scene--8 .ride-scene-8__content-body {
    animation: none !important;
  }
  body.page-ride .ride-scene--8 .ride-scene-8__media.is-active .ride-scene-8__content-body .ride-scene-8__content-img {
    animation: none !important;
    filter: none;
  }
  body.page-ride .ride-scene--8 .ride-scene-8__media.is-active .ride-scene-8__content-frame {
    transform: scaleX(1);
  }
  body.page-ride .ride-scene--8 .ride-scene-8__media.is-active .ride-scene-8__content-body {
    opacity: 1;
  }
}
body.page-ride .ride-scene--72 .ride-confirm__question {
  font-weight: 700;
  font-size: calc(0.015625 * min(100vw, 1920px));
  line-height: 2;
  color: #fff;
  letter-spacing: 0.04em;
  border: calc(0.0041666667 * min(100vw, 1920px)) solid #c53fca;
  border-radius: 999px;
  background-color: #2b2b2b;
}

body.page-ride .ride-scene--4 .ride-confirm__btn,
body.page-ride .ride-scene--72 .ride-confirm__btn {
  appearance: none;
  border-radius: calc(0.5203125 * min(100vw, 1920px));
  font-family: inherit;
  font-weight: 700;
  font-size: calc(0.015625 * min(100vw, 1920px));
  line-height: 1;
  color: #fff;
  letter-spacing: 0.06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.15s ease, transform 0.15s ease;
}
body.page-ride .ride-scene--4 .ride-confirm__btn:focus-visible,
body.page-ride .ride-scene--72 .ride-confirm__btn:focus-visible {
  outline: 2px solid #fdc81e;
  outline-offset: 3px;
}
body.page-ride .ride-scene--4 .ride-confirm__btn:hover,
body.page-ride .ride-scene--72 .ride-confirm__btn:hover {
  filter: brightness(1.08);
}
body.page-ride .ride-scene--4 .ride-confirm__btn:active,
body.page-ride .ride-scene--72 .ride-confirm__btn:active {
  transform: scale(0.98);
}

body.page-ride .ride-scene--4 .ride-confirm__btn--yes,
body.page-ride .ride-scene--72 .ride-confirm__btn--yes {
  background-color: #C53FCA;
  border: calc(0.0041666667 * min(100vw, 1920px)) solid #D679DA;
}

body.page-ride .ride-scene--4 .ride-confirm__btn--no,
body.page-ride .ride-scene--72 .ride-confirm__btn--no {
  background-color: #595959;
  border: calc(0.0041666667 * min(100vw, 1920px)) solid #808080;
}

@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--4 .ride-confirm__btn,
  body.page-ride .ride-scene--72 .ride-confirm__btn {
    transition: none;
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn:active,
  body.page-ride .ride-scene--72 .ride-confirm__btn:active {
    transform: none;
  }
}
body.page-ride .ride-scene--4 .ride-confirm {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

body.page-ride .ride-scene--4 .ride-confirm__btn--yes {
  position: absolute;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(50% + -0.0994791667 * min(100vw, 1920px));
  top: calc(50% + 0.025 * min(100vw, 1920px));
  width: calc(0.0833333333 * min(100vw, 1920px));
  height: calc(0.0833333333 * min(100vw, 1920px));
}

body.page-ride .ride-scene--4 .ride-confirm__btn--no {
  position: absolute;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(50% + 0.0041666667 * min(100vw, 1920px));
  top: calc(50% + 0.025 * min(100vw, 1920px));
  width: calc(0.0833333333 * min(100vw, 1920px));
  height: calc(0.0833333333 * min(100vw, 1920px));
}

body.page-ride .ride-scene--72 .ride-confirm {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

body.page-ride .ride-scene--72 .ride-confirm__question {
  position: absolute;
  margin: 0;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  left: calc(50% + -0.1166666667 * min(100vw, 1920px));
  top: calc(50% + 0.1005208333 * min(100vw, 1920px));
  width: calc(0.2213282292 * min(100vw, 1920px));
  height: calc(0.0416666667 * min(100vw, 1920px));
}

body.page-ride .ride-scene--72 .ride-confirm__btn--yes {
  position: absolute;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(50% + -0.0994791667 * min(100vw, 1920px));
  top: calc(50% + 0.1614583333 * min(100vw, 1920px));
  width: calc(0.0833333333 * min(100vw, 1920px));
  height: calc(0.0833333333 * min(100vw, 1920px));
}

body.page-ride .ride-scene--72 .ride-confirm__btn--no {
  position: absolute;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(50% + 0.0041666667 * min(100vw, 1920px));
  top: calc(50% + 0.1614583333 * min(100vw, 1920px));
  width: calc(0.0833333333 * min(100vw, 1920px));
  height: calc(0.0833333333 * min(100vw, 1920px));
}

body.page-ride .ride-swipe-hint {
  display: none;
}

@media (max-width: 767px) {
  body.page-ride {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }
  body.page-ride > main.ride-main {
    flex: 1 1 0;
    min-height: 0;
  }
  body.page-ride .ride-stage__fill {
    display: none;
  }
  body.page-ride .ride-stage.ride-stage--scene0,
  body.page-ride .ride-stage:not(.ride-stage--scene0) {
    flex: 1 1 0;
    min-height: 0;
    align-self: stretch;
    position: relative;
    width: 100%;
    flex-shrink: 1;
    aspect-ratio: unset;
  }
  body.page-ride .ride-stage.ride-stage--scene0 {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  body.page-ride .ride-stage:not(.ride-stage--scene0) {
    overflow: hidden;
  }
  @keyframes ride-swipe-hint-nudge {
    0%, 100% {
      transform: translateX(-1.3333333333vw);
    }
    50% {
      transform: translateX(1.3333333333vw);
    }
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16vw;
    height: 16vw;
    pointer-events: none;
    position: absolute;
    left: 50%;
    margin-left: -8vw;
    bottom: 19.7333333333vw;
    z-index: 4;
    line-height: 0;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    border-radius: 1.8666666667vw;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-swipe-hint img {
    display: block;
    width: 8.3066666667vw;
    height: auto;
    animation: ride-swipe-hint-nudge 1.25s ease-in-out infinite;
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-swipe-hint.is-dismissed {
    opacity: 0;
    visibility: hidden;
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-swipe-hint.is-dismissed img {
    animation: none;
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-scene__bg::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -8vw;
    bottom: 19.7333333333vw;
    width: 16vw;
    height: 16vw;
    border-radius: 1.8666666667vw;
    background-color: #9700DE;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0.35s ease;
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0:has(.ride-swipe-hint.is-dismissed) .ride-scene__bg::after {
    opacity: 0;
    visibility: hidden;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-swipe-hint {
    transition-duration: 0.15s;
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-swipe-hint img {
    animation: none;
  }
  body.page-ride .ride-stage.ride-stage--scene0 .ride-scene--0 .ride-scene__bg::after {
    transition-duration: 0.15s;
  }
}
@media (max-width: 767px) {
  body.page-ride .ride-stage.ride-stage--scene0 .ride-stage__inner {
    position: absolute;
    inset: auto;
    left: 0;
    top: 0;
    width: auto;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 16/9;
    flex: unset;
    container-type: size;
    container-name: ride-sp-canvas;
  }
  body.page-ride .ride-stage:not(.ride-stage--scene0) .ride-stage__inner {
    position: absolute;
    inset: 0;
    aspect-ratio: unset;
    flex: unset;
    container-type: size;
    container-name: ride-sp-canvas;
  }
  body.page-ride .ride-scene--1 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_01_sp.webp);
  }
  body.page-ride .ride-scene--2 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_02_sp.webp);
  }
  body.page-ride .ride-scene--3 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_03_sp.webp);
  }
  body.page-ride .ride-scene--4 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_04_sp.webp);
  }
  body.page-ride .ride-scene--8 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_08_sp.webp);
  }
  body.page-ride .ride-scene--5 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_05_sp.webp);
  }
  body.page-ride .ride-scene--6 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_06_sp.webp);
  }
  body.page-ride .ride-scene--7 .ride-scene__bg,
  body.page-ride .ride-scene--72 .ride-scene__bg,
  body.page-ride .ride-scene--73 .ride-scene__bg {
    background-image: url(../img/spaceship/scene_07_sp.webp);
  }
  body.page-ride .ride-confirm {
    position: absolute;
    inset: 0;
  }
  body.page-ride .ride-scene--72 .ride-confirm__question {
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 43.7333333333vw;
    width: 68vw;
    height: 12.8vw;
    font-size: 4.8vw;
    border-width: 1.44vw;
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn--yes,
  body.page-ride .ride-scene--4 .ride-confirm__btn--no,
  body.page-ride .ride-scene--72 .ride-confirm__btn--yes,
  body.page-ride .ride-scene--72 .ride-confirm__btn--no {
    font-size: 4.8vw;
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn--yes {
    top: auto;
    left: 20.5333333333vw;
    bottom: 53.3333333333vw;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    border-width: 1.44vw;
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn--no {
    top: auto;
    right: 20.5333333333vw;
    bottom: 53.3333333333vw;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    border-width: 1.44vw;
  }
  body.page-ride .ride-scene--72 .ride-confirm__btn--yes {
    top: auto;
    left: 20.5333333333vw;
    bottom: 11.7333333333vw;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    border-width: 1.44vw;
  }
  body.page-ride .ride-scene--72 .ride-confirm__btn--no {
    top: auto;
    right: 20.5333333333vw;
    bottom: 11.7333333333vw;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    border-width: 1.44vw;
  }
  body.page-ride .ride-scene--0 .ride-scene0__announce {
    top: 66.8518577778cqh;
    left: 50%;
    transform: translateX(-50%);
    width: 82.3466666667vw;
  }
}
@media (max-width: 767px) {
  /* シーン0グミ: PC（main.scss）の pc-vw-vp 座標・幅を cqw / ride-0-top と同じ比率で再現 */
  body.page-ride .ride-scene--0 .ride-scene-0__gummy .gummy-img--mv-a-00008 {
    top: 35.1851911111cqh;
    left: -2.21354cqw;
    width: 15.67708cqw;
    transform: rotate(45deg);
    overflow: visible;
  }
  body.page-ride .ride-scene--0 .ride-scene-0__gummy .gummy-img--mv-b-00000 {
    top: 69.9135822222cqh;
    left: 87.70833cqw;
    width: 10.3125cqw;
    transform: rotate(-45deg);
    overflow: visible;
  }
  body.page-ride .ride-scene--0 .ride-scene-0__gummy .gummy-img--petagoo-c-00044 {
    top: 72.3240711111cqh;
    left: 23.38542cqw;
    width: 11.04167cqw;
    transform: rotate(-30.141deg);
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n1 {
    left: 47.81453cqw;
    top: 45.2536177778cqh;
    width: 6.14593cqw;
    height: 10.9260977778cqh;
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n2 {
    left: 24.19166cqw;
    top: 2.8770311111cqh;
    width: 6.14594cqw;
    height: 10.9261155556cqh;
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n3 {
    left: 61.43283cqw;
    top: 15.6027733333cqh;
    width: 6.14594cqw;
    height: 10.9261155556cqh;
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n4 {
    left: 76.61875cqw;
    top: 23.3398222222cqh;
    width: 6.14593cqw;
    height: 10.9260977778cqh;
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n5 {
    left: 76.16781cqw;
    top: 78.5931377778cqh;
    width: 6.14594cqw;
    height: 10.9261155556cqh;
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n6 {
    left: 10.74794cqw;
    top: 81.1583288889cqh;
    width: 6.14594cqw;
    height: 10.9261155556cqh;
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n7 {
    left: 91.43905cqw;
    top: 18.1064711111cqh;
    width: 6.14594cqw;
    height: 10.9261155556cqh;
  }
  body.page-ride .ride-scene--0 .ride-scene0__btn--n8 {
    left: 6.74852cqw;
    top: 19.3021688889cqh;
    width: 6.29105cqw;
    height: 11.1840888889cqh;
  }
}
body.page-ride .ride-scene--73 .ride-gummy-burst {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
}

body.page-ride .ride-scene--73 .ride-gummy-burst__img {
  position: absolute;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--gummy-rot, 0deg));
  transform-origin: center center;
  will-change: transform, opacity;
  animation: ride-gummy-burst-in 0.42s cubic-bezier(0.18, 0.82, 0.2, 1.12) both;
}

@keyframes ride-gummy-burst-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--gummy-rot, 0deg)) scale(0.08);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--gummy-rot, 0deg)) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--73 .ride-gummy-burst__img {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--gummy-rot, 0deg)) scale(1);
  }
}
body.page-ride .ride-scene--73.ride-scene--73--exit .ride-scene__bg {
  visibility: hidden;
  pointer-events: none;
}

body.page-ride .ride-scene--73.ride-scene--73--exit .ride-gummy-burst {
  overflow: visible;
  pointer-events: none;
  cursor: default;
}

@keyframes ride-gummy-fall-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) rotate(var(--gummy-rot, 0deg)) scale(1);
  }
  to {
    transform: translate(-50%, -50%) translateY(130vh) rotate(var(--gummy-rot, 0deg)) scale(1);
  }
}
body.page-ride .ride-scene--73.ride-scene--73--exit .ride-gummy-burst__img {
  animation: ride-gummy-fall-out 1.15s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  body.page-ride .ride-scene--73.ride-scene--73--exit .ride-gummy-burst__img {
    animation-duration: 0.35s;
  }
}
@media (min-width: 768px) and (min-aspect-ratio: 161/90) {
  body.page-ride {
    --ride-ui-bottom: clamp(14px, 2.4vh, 28px);
    --ride-ui-side-gutter: clamp(20px, 3vw, 56px);
    --ride-msg-frame-w: min(calc(0.4947917 * min(100vw, 1920px)), calc(100vw - (var(--ride-ui-side-gutter) * 2)));
    --ride-msg-frame-h: calc(var(--ride-msg-frame-w) * 0.24);
    --ride-next-btn-size: clamp(50px, calc(var(--ride-msg-frame-w) * 0.0737), 70px);
    --ride-next-btn-offset-y: calc(var(--ride-msg-frame-w) * 0.198);
    --ride-msg-frame-top: calc(100vh - var(--ride-ui-bottom) - var(--ride-next-btn-size) - var(--ride-next-btn-offset-y));
    --ride-msg-copy-left: calc((100vw - var(--ride-msg-frame-w)) / 2 + (var(--ride-msg-frame-w) * 0.258));
    --ride-msg-copy-top: calc(var(--ride-msg-frame-top) + (var(--ride-msg-frame-w) * 0.078));
    --ride-msg-copy-w: calc(var(--ride-msg-frame-w) * 0.687);
    --ride-msg-copy-min-h: calc(var(--ride-msg-frame-w) * 0.0795);
    --ride-msg-font-size: clamp(21px, 1.458vw, 28px);
    --ride-next-btn-left: calc((100vw - var(--ride-msg-frame-w)) / 2 + (var(--ride-msg-frame-w) * 0.895));
    --ride-next-btn-top: calc(var(--ride-msg-frame-top) + var(--ride-next-btn-offset-y));
    --ride-panel-top: clamp(72px, 8vh, 154px);
    --ride-panel-scale: 1;
    --ride-panel-scale-large: 0.88;
    --ride-confirm-btn-size: clamp(112px, 8.333vw, 160px);
    --ride-confirm-gap: clamp(18px, 2.2vh, 32px);
    --ride-confirm-question-w: clamp(320px, 22.133vw, 425px);
    --ride-confirm-question-h: clamp(60px, 4.167vw, 80px);
  }
  body.page-ride .ride-msg__frame {
    position: fixed;
    left: 50%;
    top: var(--ride-msg-frame-top);
    bottom: auto;
    width: var(--ride-msg-frame-w);
    transform: translateX(-50%);
    z-index: 30;
  }
  body.page-ride .ride-msg__copy {
    position: fixed;
    left: var(--ride-msg-copy-left);
    top: var(--ride-msg-copy-top);
    width: var(--ride-msg-copy-w);
    min-height: var(--ride-msg-copy-min-h);
    font-size: var(--ride-msg-font-size);
    z-index: 31;
  }
  body.page-ride .ride-msg__btn-next {
    position: fixed;
    left: var(--ride-next-btn-left);
    top: var(--ride-next-btn-top);
    width: var(--ride-next-btn-size);
    height: var(--ride-next-btn-size);
    z-index: 32;
  }
  body.page-ride .ride-scene--2 .ride-scene-2__media,
  body.page-ride .ride-scene--3 .ride-scene-3__media {
    position: fixed;
    top: var(--ride-panel-top);
    transform: translateX(-50%) scale(var(--ride-panel-scale));
    transform-origin: top center;
  }
  body.page-ride .ride-scene--8 .ride-scene-8__media {
    position: fixed;
    top: var(--ride-panel-top);
    transform: translateX(-50%) scale(var(--ride-panel-scale-large));
    transform-origin: top center;
  }
  body.page-ride .ride-scene--4 .ride-confirm,
  body.page-ride .ride-scene--72 .ride-confirm {
    position: fixed;
    inset: 0;
    z-index: 33;
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn--yes,
  body.page-ride .ride-scene--4 .ride-confirm__btn--no,
  body.page-ride .ride-scene--72 .ride-confirm__btn--yes,
  body.page-ride .ride-scene--72 .ride-confirm__btn--no {
    top: auto;
    width: var(--ride-confirm-btn-size);
    height: var(--ride-confirm-btn-size);
    font-size: clamp(22px, 1.563vw, 30px);
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn--yes,
  body.page-ride .ride-scene--72 .ride-confirm__btn--yes {
    left: calc(50% - var(--ride-confirm-btn-size) - var(--ride-confirm-gap) / 2);
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn--no,
  body.page-ride .ride-scene--72 .ride-confirm__btn--no {
    left: calc(50% + var(--ride-confirm-gap) / 2);
  }
  body.page-ride .ride-scene--4 .ride-confirm__btn--yes,
  body.page-ride .ride-scene--4 .ride-confirm__btn--no {
    bottom: calc(100vh - var(--ride-msg-frame-top) + var(--ride-confirm-gap));
  }
  body.page-ride .ride-scene--72 .ride-confirm__question {
    left: 50%;
    top: auto;
    bottom: calc(var(--ride-ui-bottom) + var(--ride-confirm-btn-size) + var(--ride-confirm-gap));
    width: var(--ride-confirm-question-w);
    height: var(--ride-confirm-question-h);
    font-size: clamp(22px, 1.563vw, 30px);
    transform: translateX(-50%);
  }
  body.page-ride .ride-scene--72 .ride-confirm__btn--yes,
  body.page-ride .ride-scene--72 .ride-confirm__btn--no {
    bottom: var(--ride-ui-bottom);
  }
}
@media (min-width: 768px) and (min-aspect-ratio: 2/1) {
  body.page-ride {
    --ride-msg-frame-w: min(calc(0.4635416667 * min(100vw, 1920px)), calc(100vw - (var(--ride-ui-side-gutter) * 2)));
    --ride-msg-font-size: clamp(20px, 1.28vw, 25px);
    --ride-panel-scale: 0.88;
    --ride-panel-scale-large: 0.64;
    --ride-panel-top: clamp(66px, 7vh, 112px);
  }
}
@media (min-width: 768px) and (min-aspect-ratio: 19/8) {
  body.page-ride {
    --ride-msg-frame-w: min(calc(0.4270833333 * min(100vw, 1920px)), calc(100vw - (var(--ride-ui-side-gutter) * 2)));
    --ride-msg-font-size: clamp(18px, 1.2vw, 23px);
    --ride-panel-scale: 0.78;
    --ride-panel-scale-large: 0.56;
    --ride-panel-top: clamp(58px, 6.4vh, 92px);
  }
}
/* ----------------------------------------------------------------
  #footer
---------------------------------------------------------------- */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000;
}
@media (min-width: 768px) {
  footer {
    padding: calc(0.0145833333 * min(100vw, 1920px)) calc(0.01875 * min(100vw, 1920px)) calc(0.015625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  footer {
    padding: 2.1333333333vw 1.6vw;
  }
}
footer .copyright {
  color: #fff;
}
@media (min-width: 768px) {
  footer .copyright {
    font-size: calc(0.0109375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  footer .copyright {
    font-size: 2.1333333333vw;
    line-height: 1;
  }
}
@media (min-width: 768px) {
  footer .copyright img {
    width: calc(0.215625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  footer .copyright img {
    width: 42.1333333333vw;
  }
}
footer .company-logo {
  font-size: 0;
}
@media (min-width: 768px) {
  footer .company-logo img {
    width: calc(0.1734375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  footer .company-logo img {
    width: 31.2vw;
    vertical-align: bottom;
  }
}

@keyframes modal-mask-reveal-tb {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
/* ビーム登場：本文エリアを明るい色から通常の階調へ（マスクと同じ尺で同期） */
@keyframes modal-body-brightness-in {
  from {
    filter: brightness(3.62);
  }
  to {
    filter: brightness(1);
  }
}
/* ----------------------------------------------------------------
  #modal
---------------------------------------------------------------- */
body.is-modal-open,
body.is-menu-open {
  overflow: hidden;
}
body.is-modal-open > main,
body.is-modal-open > footer,
body.is-menu-open > main,
body.is-menu-open > footer {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
  #modal {
    padding: 50px 0;
    height: 100%;
  }
}
@media (max-width: 767px) {
  #modal {
    height: 100dvh;
  }
}
#modal.is-open {
  display: block;
}
#modal .modal-content {
  display: none;
}

#modal-content-news {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
#modal-content-news.is-active {
  display: flex;
}
#modal-content-news .modal-content-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-head {
    padding-top: calc(0.0958333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-head {
    padding-top: 16vw;
  }
}
#modal-content-news .modal-content-head .modal-content-petagoo {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform-origin: center center;
  display: block;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-head .modal-content-petagoo {
    width: calc(0.0833333333 * min(100vw, 1920px));
    top: calc(0.015625 * min(100vw, 1920px));
    left: 50%;
    margin-left: calc(-0.0416666667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-head .modal-content-petagoo {
    width: 20.2666666667vw;
    top: 1.6vw;
    left: 50%;
    margin-left: -11.7333333333vw;
  }
}
#modal-content-news .modal-content-head h2.modal-heading-mask {
  position: relative;
  z-index: 2;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-head h2.modal-heading-mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 30%);
  }
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-head h2.modal-heading-mask img {
    width: calc(0.1177083333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-head h2.modal-heading-mask img {
    width: 25.0666666667vw;
  }
}
#modal-content-news .modal-content-head .modal-beam-mask {
  display: block;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-head .modal-beam-mask {
    margin-top: calc(-0.0635416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-head .modal-beam-mask {
    margin-top: -2.1333333333vw;
  }
}
#modal-content-news .modal-content-head .modal-beam-mask .beam {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-head .modal-beam-mask .beam {
    width: calc(0.5625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-head .modal-beam-mask .beam {
    width: 78.4vw;
  }
}
#modal-content-news .modal-content-body {
  z-index: 3;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    align-items: flex-start;
    justify-items: center;
    position: relative;
    gap: 0 calc(0.0260416667 * min(100vw, 1920px));
    margin-top: calc(-0.0083333333 * min(100vw, 1920px));
    padding: calc(0.03125 * min(100vw, 1920px)) calc(0.0520833333 * min(100vw, 1920px)) calc(0.0395833333 * min(100vw, 1920px));
    width: calc(0.625 * min(100vw, 1920px));
    height: calc(0.3515625 * min(100vw, 1920px));
    background-image: url(../img/modal_pc.webp);
    background-size: calc(0.625 * min(100vw, 1920px)) auto;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.2vw;
    margin-top: -4.2666666667vw;
    padding: 5.3333333333vw 5.3333333333vw;
    width: 80vw;
    height: 122.6666666667vw;
    background-image: url(../img/modal_sp.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
#modal-content-news .modal-content-body h3 {
  grid-column: span 2/span 2;
  color: #fff;
  background-repeat: repeat-x;
  visibility: hidden;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-body h3 {
    font-size: calc(0.0260416667 * min(100vw, 1920px));
    padding-bottom: calc(0.009375 * min(100vw, 1920px));
    background-image: radial-gradient(circle, #ffffff calc(0.001875 * min(100vw, 1920px)), transparent calc(0.001875 * min(100vw, 1920px)));
    background-position: left calc(-0.0013541667 * min(100vw, 1920px)) bottom;
    background-size: calc(0.0070833333 * min(100vw, 1920px)) calc(0.00375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-body h3 {
    text-align: center;
    font-size: 6.6666666667vw;
    line-height: 10.1333333333vw;
    margin-bottom: 2.1333333333vw;
    padding-bottom: 1.6vw;
    background-image: radial-gradient(circle, #ffffff 0.3912533333vw, transparent 0.3912533333vw);
    background-position: left -0.27864vw bottom;
    background-size: 1.45792vw 0.75864vw;
  }
}
#modal-content-news .modal-content-body .image {
  grid-row-start: 2;
  background-color: #dedede;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-body .image {
    width: calc(0.25 * min(100vw, 1920px));
    height: calc(0.1875 * min(100vw, 1920px));
    border-radius: calc(0.0125 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-body .image {
    width: 61.3333333333vw;
    height: 37.3333333333vw;
    border-radius: 2.9772vw;
  }
}
#modal-content-news .modal-content-body p {
  grid-row-start: 2;
  align-self: center;
  color: #fff;
  visibility: hidden;
}
@media (min-width: 768px) {
  #modal-content-news .modal-content-body p {
    font-size: calc(0.0145833333 * min(100vw, 1920px));
    line-height: calc(0.0241666667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-content-body p {
    text-align: center;
    font-size: 3.4666666667vw;
    line-height: 5.8666666667vw;
  }
}
#modal-content-news {
  /* モーダルを開くたび .is-active で #contents カードと同様の登場（閉じると is-active が外れてリセット） */
}
#modal-content-news:not(.is-active) .modal-content-head .modal-content-petagoo {
  transform: translate3d(0, -140%, 0);
  animation: none !important;
}
#modal-content-news:not(.is-active) .modal-content-head h2.modal-heading-mask,
#modal-content-news:not(.is-active) .modal-beam-mask {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: none;
}
#modal-content-news:not(.is-active) .modal-close__inner {
  transform: scale(0);
  animation: none !important;
}
#modal-content-news:not(.is-active) .modal-content-body {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: none;
  filter: brightness(3.62);
}
@media (prefers-reduced-motion: no-preference) {
  #modal-content-news.is-active .modal-content-head .modal-content-petagoo {
    animation: contents-card-petagoo-drop 0.44s ease-out both, tvcm-gummy-nyuru 2.75s linear infinite alternate 0.88s;
  }
}
@media (prefers-reduced-motion: reduce) {
  #modal-content-news.is-active .modal-content-head .modal-content-petagoo {
    animation: none !important;
  }
}
#modal-content-news.is-active {
  /* display 切替直後は transition が効かないため keyframes の animation を使用 */
}
@media (prefers-reduced-motion: no-preference) {
  #modal-content-news.is-active .modal-content-head h2.modal-heading-mask {
    animation: modal-mask-reveal-tb 0.36s cubic-bezier(0.22, 1, 0.36, 1) 0.54s both;
  }
  #modal-content-news.is-active .modal-beam-mask {
    animation: modal-mask-reveal-tb 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
  }
  #modal-content-news.is-active .modal-content-body {
    animation: modal-mask-reveal-tb 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both, modal-body-brightness-in 1.58s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
  }
  #modal-content-news.is-active .modal-close__inner {
    animation: about-slide-arrow-reveal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.08s forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  #modal-content-news.is-active .modal-content-head h2.modal-heading-mask,
  #modal-content-news.is-active .modal-beam-mask,
  #modal-content-news.is-active .modal-content-body {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: none !important;
  }
  #modal-content-news.is-active .modal-content-body {
    filter: brightness(1) !important;
  }
  #modal-content-news.is-active .modal-close__inner {
    transform: scale(1) !important;
    animation: none !important;
  }
}
#modal-content-news .modal-close-mask {
  display: block;
  width: 100%;
  text-align: center;
}
#modal-content-news {
  /* #about .slide-next と同様：ズームインは子 span の animation、hover は transition なし */
}
#modal-content-news .modal-close {
  padding: 0;
  border: 0;
  background: transparent;
  margin-top: calc(0.0104166667 * min(100vw, 1920px));
  cursor: pointer;
  display: inline-block;
  line-height: 0;
  vertical-align: top;
}
#modal-content-news .modal-close .modal-close__inner {
  display: block;
  background-color: transparent;
  background-image: url(../img/btn_close.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transform: scale(0);
  transition: none;
}
@media (min-width: 768px) {
  #modal-content-news .modal-close .modal-close__inner {
    width: calc(0.046875 * min(100vw, 1920px));
    height: calc(0.046875 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  #modal-content-news .modal-close .modal-close__inner {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    position: absolute;
    top: 4.8vw;
    right: 4.6666666667vw;
  }
}
#modal-content-news.is-active .modal-close:hover .modal-close__inner {
  transform: scale(1.08) !important;
}

@media (prefers-reduced-motion: reduce) {
  #modal-content-news:not(.is-active) .modal-content-head .modal-content-petagoo,
  #modal-content-news.is-active .modal-content-head .modal-content-petagoo {
    transform: none !important;
  }
  #modal-content-news:not(.is-active) .modal-content-head h2.modal-heading-mask,
  #modal-content-news:not(.is-active) .modal-beam-mask,
  #modal-content-news:not(.is-active) .modal-content-body,
  #modal-content-news.is-active .modal-content-head h2.modal-heading-mask,
  #modal-content-news.is-active .modal-beam-mask,
  #modal-content-news.is-active .modal-content-body {
    animation: none !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
  }
  #modal-content-news:not(.is-active) .modal-content-body,
  #modal-content-news.is-active .modal-content-body {
    filter: brightness(1) !important;
  }
  #modal-content-news .modal-close__inner {
    transform: scale(1) !important;
    animation: none !important;
  }
}
/* ----------------------------------------------------------------
  header
---------------------------------------------------------------- */
header .nv_menu-open::after,
header nav::before {
  transition: background-color 0.45s ease;
}
header.is-a .nv_menu-open::after {
  background-color: #b6377e;
}
header.is-a nav {
  background-color: #b6377e;
}
header.is-a nav::before {
  background-color: #b02773;
}
header.is-a .gummy-hero {
  padding-top: calc(0.003125 * min(100vw, 1920px));
  --menu-hero-wobble-dur: 2.65s;
}
header.is-a .gummy-hero span {
  background-image: url(../img/petagoo_a-00040.webp);
  width: calc(0.14375 * min(100vw, 1920px));
  height: calc(0.14375 * min(100vw, 1920px));
}
@media (min-width: 768px) {
  header.is-a nav ul li a img {
    filter: drop-shadow(calc(0.0020833333 * min(100vw, 1920px)) calc(0.0020833333 * min(100vw, 1920px)) 0 #b02773);
  }
}
@media (max-width: 767px) {
  header.is-a nav ul li a img {
    filter: drop-shadow(0.8533333333vw 0.8533333333vw 0 #b02773);
  }
}
header.is-a nav ul li.coming a::after {
  background-image: url(../img/menu_comingsoon-a.svg);
}
header.is-b .nv_menu-open::after {
  background-color: #4aace1;
}
header.is-b nav {
  background-color: #4aace1;
}
header.is-b nav::before {
  background-color: #18a1db;
}
header.is-b .gummy-hero {
  padding-bottom: calc(0.0177083333 * min(100vw, 1920px));
  --menu-hero-wobble-dur: 2.85s;
}
header.is-b .gummy-hero span {
  background-image: url(../img/petagoo_b-00046.webp);
  width: calc(0.15625 * min(100vw, 1920px));
  height: calc(0.15625 * min(100vw, 1920px));
}
@media (min-width: 768px) {
  header.is-b nav ul li a img {
    filter: drop-shadow(calc(0.0020833333 * min(100vw, 1920px)) calc(0.0020833333 * min(100vw, 1920px)) 0 #18a1db);
  }
}
@media (max-width: 767px) {
  header.is-b nav ul li a img {
    filter: drop-shadow(0.8533333333vw 0.8533333333vw 0 #18a1db);
  }
}
header.is-b nav ul li.coming a::after {
  background-image: url(../img/menu_comingsoon-b.svg);
}
header.is-c .nv_menu-open::after {
  background-color: #f1c320;
}
header.is-c nav {
  background-color: #f1c320;
}
header.is-c nav::before {
  background-color: #f2b02e;
}
header.is-c .gummy-hero {
  padding-left: calc(0.0171875 * min(100vw, 1920px));
  padding-bottom: calc(0.0104166667 * min(100vw, 1920px));
  --menu-hero-wobble-dur: 3s;
}
header.is-c .gummy-hero span {
  background-image: url(../img/petagoo_c-00034.webp);
  width: calc(0.15625 * min(100vw, 1920px));
  height: calc(0.15625 * min(100vw, 1920px));
}
@media (min-width: 768px) {
  header.is-c nav ul li a img {
    filter: drop-shadow(calc(0.0020833333 * min(100vw, 1920px)) calc(0.0020833333 * min(100vw, 1920px)) 0 #f2b02e);
  }
}
@media (max-width: 767px) {
  header.is-c nav ul li a img {
    filter: drop-shadow(0.8533333333vw 0.8533333333vw 0 #f2b02e);
  }
}
header.is-c nav ul li.coming a::after {
  background-image: url(../img/menu_comingsoon-c.svg);
}
header .menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
header .nv_menu-open {
  appearance: none;
  border: none;
  padding: 0;
  display: block;
  position: fixed;
  z-index: 50;
  background-image: url(../img/btn_menu-base.svg);
  background-size: calc(100% - 4px) calc(100% - 4px);
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}
@media (min-width: 768px) {
  header .nv_menu-open {
    top: calc(0.0177083333 * min(100vw, 1920px));
    right: calc(0.0182291667 * min(100vw, 1920px));
    width: calc(0.0416666667 * min(100vw, 1920px));
    height: calc(0.0520833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header .nv_menu-open {
    top: 5.0666666667vw;
    right: 4.2666666667vw;
    width: 10.6666666667vw;
    height: 13.3333333333vw;
  }
}
header .nv_menu-open::after {
  content: "";
  position: absolute;
  inset: 0;
  mask-image: url(../img/btn_menu-mask.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
}
header .nv_menu-open:hover {
  transform: scale(1.08);
}
body.is-menu-open header .menu-backdrop {
  z-index: 109;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.is-menu-open header nav {
  z-index: 110;
}
body.is-menu-open header .nv_menu-open {
  visibility: hidden;
  pointer-events: none;
}
body.is-menu-open header .nv_menu-close {
  transform: scale(1);
  transition: transform 0.4s 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
header .nv_menu-close {
  appearance: none;
  border: none;
  padding: 0;
  position: absolute;
  transform: scale(0);
}
@media (min-width: 768px) {
  header .nv_menu-close {
    top: calc(0.025 * min(100vw, 1920px));
    right: calc(0.0182291667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header .nv_menu-close {
    top: 4.8vw;
    right: 4.6666666667vw;
  }
}
header .nv_menu-close span {
  display: block;
  z-index: 2;
  background-image: url(../img/btn_close.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}
@media (min-width: 768px) {
  header .nv_menu-close span {
    width: calc(0.046875 * min(100vw, 1920px));
    height: calc(0.046875 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header .nv_menu-close span {
    width: 13.3333333333vw;
    height: 13.3333333333vw;
  }
}
header .nv_menu-close span:hover {
  transform: scale(1.08);
  transition: none;
}
header {
  /* translateY → scale → rotate の順（translate が画面の縦方向） */
}
@keyframes menu-gummy-drop {
  0% {
    transform: translateY(calc(-1 * var(--gummy-fall, 38vh))) scale(1.02, 0.99) rotate(var(--gummy-rot, 0deg));
    opacity: 0;
  }
  6% {
    opacity: 1;
  }
  58% {
    transform: translateY(0) scale(1.12, 0.78) rotate(var(--gummy-rot, 0deg));
  }
  73% {
    transform: translateY(-9%) scale(0.92, 1.1) rotate(var(--gummy-rot, 0deg));
  }
  86% {
    transform: translateY(0) scale(1.04, 0.93) rotate(var(--gummy-rot, 0deg));
  }
  94% {
    transform: translateY(0) scale(0.98, 1.02) rotate(var(--gummy-rot, 0deg));
  }
  100% {
    transform: translateY(0) scale(1, 1) rotate(var(--gummy-rot, 0deg));
  }
}
header nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  -webkit-overflow-scrolling: touch;
  transform: translate3d(0, -120%, 0);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease;
  pointer-events: none;
}
header nav.is-open {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}
@media (min-width: 768px) {
  header nav {
    padding-right: calc(0.1041666667 * min(100vw, 1920px));
    height: calc(0.4140625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav {
    height: 100dvh;
  }
}
header nav::before {
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}
@media (min-width: 768px) {
  header nav::before {
    mask: url(../img/menu_bg.svg) no-repeat center center/cover;
  }
}
@media (max-width: 767px) {
  header nav::before {
    mask: url(../img/menu_bg_sp.svg) no-repeat center center/cover;
  }
}
@media (min-width: 768px) {
  header nav ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0 calc(0.0520833333 * min(100vw, 1920px));
  }
  header nav ul .nv2 {
    grid-column-start: 1;
    grid-row-start: 2;
  }
  header nav ul .nv3 {
    grid-column-start: 1;
    grid-row-start: 3;
  }
  header nav ul .nv4 {
    grid-column-start: 2;
    grid-row-start: 1;
  }
  header nav ul .nv5 {
    grid-column-start: 2;
    grid-row-start: 2;
  }
}
@media (max-width: 767px) {
  header nav ul {
    display: flex;
    flex-direction: column;
  }
}
header nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-weight: 700;
  position: relative;
}
@media (min-width: 768px) {
  header nav a {
    width: calc(0.2083333333 * min(100vw, 1920px));
    height: calc(0.0520833333 * min(100vw, 1920px));
    font-size: calc(0.015625 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav a {
    width: 80vw;
    height: 21.3333333333vw;
    font-size: 6.4vw;
  }
}
header nav a::before, header nav a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-radius: 999px;
  background-color: #fff;
  opacity: 0.4;
}
@media (min-width: 768px) {
  header nav a::before, header nav a::after {
    height: calc(0.0026041667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav a::before, header nav a::after {
    height: 1.0666666667vw;
  }
}
header nav a::after {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
}
header nav a span {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../img/arrow_right.svg);
}
@media (min-width: 768px) {
  header nav a span {
    width: calc(0.0208333333 * min(100vw, 1920px));
    height: calc(0.0208333333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav a span {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
  }
}
header nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}
header nav a:hover span {
  transform: translateY(-50%) scale(1.16);
}
@media (min-width: 768px) {
  header nav .nv1 img {
    width: calc(0.1020833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav .nv1 img {
    width: 41.8666666667vw;
  }
}
@media (min-width: 768px) {
  header nav .nv2 img {
    width: calc(0.0734375 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav .nv2 img {
    width: 30.1333333333vw;
  }
}
@media (min-width: 768px) {
  header nav .nv3 img {
    width: calc(0.1244791667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav .nv3 img {
    width: 51.2vw;
  }
}
@media (min-width: 768px) {
  header nav .nv4 img {
    width: calc(0.1270833333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav .nv4 img {
    width: 52.2666666667vw;
  }
}
@media (min-width: 768px) {
  header nav .nv5 img {
    width: calc(0.0536458333 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav .nv5 img {
    width: 21.8666666667vw;
  }
}
header nav .coming a {
  pointer-events: none;
  position: relative;
}
@media (max-width: 767px) {
  header nav .coming a {
    margin-top: 8.5333333333vw;
  }
}
header nav .coming a::before {
  opacity: 0.16;
}
header nav .coming a::after {
  content: "";
  background: url(../img/menu_comingsoon-a.svg) no-repeat center center/contain;
  position: absolute;
  transform: none;
}
@media (min-width: 768px) {
  header nav .coming a::after {
    top: calc(-0.0104166667 * min(100vw, 1920px));
    left: calc(-0.0041666667 * min(100vw, 1920px));
    width: calc(0.13125 * min(100vw, 1920px));
    height: calc(0.0247395833 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  header nav .coming a::after {
    top: -2.1333333333vw;
    left: -0.5333333333vw;
    width: 42.4vw;
    height: 8vw;
  }
}
header nav .coming a img {
  opacity: 0.4;
}
header nav .coming a span {
  display: none;
}
@media (min-width: 768px) {
  header nav .gummy .gummy-img {
    --gummy-scale: 0.3796;
    --gummy-rot: 0deg;
    transform: rotate(var(--gummy-rot));
  }
  header nav .gummy .gummy-img--petagoo-a-00034 {
    top: calc(50% + calc(0.1377604167 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.503125 * min(100vw, 1920px)));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00035 {
    top: calc(50% + calc(0.15703125 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.4536458333 * min(100vw, 1920px)));
    width: calc(0.28125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00036 {
    top: calc(50% + calc(0.1434895833 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.3609375 * min(100vw, 1920px)));
    width: calc(0.1421875 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-a-00039 {
    top: calc(50% + calc(0.18203125 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.3416666667 * min(100vw, 1920px)));
    width: calc(0.2088541667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00041 {
    top: calc(50% + calc(0.13984375 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.2760416667 * min(100vw, 1920px)));
    width: calc(0.1598958333 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00049 {
    top: calc(50% + calc(0.1403645833 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.221875 * min(100vw, 1920px)));
    width: calc(0.1354166667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-a-00048 {
    top: calc(50% + calc(0.1263020833 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.1833333333 * min(100vw, 1920px)));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00052 {
    top: calc(50% + calc(0.1393229167 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.1473958333 * min(100vw, 1920px)));
    width: calc(0.23125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00043 {
    top: calc(50% + calc(0.13828125 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.0755208333 * min(100vw, 1920px)));
    width: calc(0.1578125 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-a-00044 {
    top: calc(50% + calc(0.1544270833 * min(100vw, 1920px)));
    left: calc(50% + calc(-0.0322916667 * min(100vw, 1920px)));
    width: calc(0.2614583333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-rot: -8.58deg;
  }
  header nav .gummy .gummy-img--petagoo-b-00047 {
    top: calc(50% + calc(0.14453125 * min(100vw, 1920px)));
    left: calc(50% + calc(0.0526041667 * min(100vw, 1920px)));
    width: calc(0.1609375 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00034 {
    top: calc(50% + calc(0.13828125 * min(100vw, 1920px)));
    left: calc(50% + calc(0.1020833333 * min(100vw, 1920px)));
    width: calc(0.1994791667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-a-00040 {
    top: calc(50% + calc(0.14453125 * min(100vw, 1920px)));
    left: calc(50% + calc(0.1604166667 * min(100vw, 1920px)));
    width: calc(0.1671875 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00042 {
    top: calc(50% + calc(0.1408854167 * min(100vw, 1920px)));
    left: calc(50% + calc(0.2171875 * min(100vw, 1920px)));
    width: calc(0.178125 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-rot: 35.475deg;
  }
  header nav .gummy .gummy-img--petagoo-c-00044 {
    top: calc(50% + calc(0.1559895833 * min(100vw, 1920px)));
    left: calc(50% + calc(0.2645833333 * min(100vw, 1920px)));
    width: calc(0.2614583333 * min(100vw, 1920px) * var(--gummy-scale));
    --gummy-rot: 6.278deg;
  }
  header nav .gummy .gummy-img--petagoo-a-00050 {
    top: calc(50% + calc(0.1434895833 * min(100vw, 1920px)));
    left: calc(50% + calc(0.3375 * min(100vw, 1920px)));
    width: calc(0.1760416667 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00000 {
    top: calc(50% + calc(0.1450520833 * min(100vw, 1920px)));
    left: calc(50% + calc(0.3916666667 * min(100vw, 1920px)));
    width: calc(0.1614583333 * min(100vw, 1920px) * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00045 {
    top: calc(50% + calc(0.12578125 * min(100vw, 1920px)));
    left: calc(50% + calc(0.4348958333 * min(100vw, 1920px)));
    width: calc(0.2067708333 * min(100vw, 1920px) * var(--gummy-scale));
  }
}
@media (max-width: 767px) {
  header nav .gummy .gummy-img {
    --gummy-scale: 0.15756;
    --gummy-rot: 0deg;
    transform: rotate(var(--gummy-rot));
  }
  header nav .gummy .gummy-img--petagoo-a-00034 {
    bottom: 0.5333333333vw;
    left: -0.8vw;
    width: calc(102.1333333333vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00035 {
    bottom: 0.5333333333vw;
    left: 10.1333333333vw;
    width: calc(144vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00036 {
    bottom: 0vw;
    left: 29.3333333333vw;
    width: calc(72.8vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-a-00039 {
    bottom: 0vw;
    left: 33.28vw;
    width: calc(106.9333333333vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00041 {
    bottom: 0.5333333333vw;
    left: 47.7333333333vw;
    width: calc(81.8666666667vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00049 {
    bottom: 0.5333333333vw;
    left: 59.2vw;
    width: calc(69.3333333333vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-a-00048 {
    bottom: 0.8vw;
    left: 67.2vw;
    width: calc(80.8vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-b-00052 {
    bottom: 1.2vw;
    left: 74.6666666667vw;
    width: calc(118.4vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-c-00043 {
    bottom: 1.0666666667vw;
    left: 90.4vw;
    width: calc(80.8vw * var(--gummy-scale));
  }
  header nav .gummy .gummy-img--petagoo-a-00044, header nav .gummy .gummy-img--petagoo-b-00047, header nav .gummy .gummy-img--petagoo-c-00034, header nav .gummy .gummy-img--petagoo-a-00040, header nav .gummy .gummy-img--petagoo-b-00042, header nav .gummy .gummy-img--petagoo-c-00044, header nav .gummy .gummy-img--petagoo-a-00050, header nav .gummy .gummy-img--petagoo-b-00000, header nav .gummy .gummy-img--petagoo-c-00045 {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  header nav .gummy.gummy-drop-active .gummy-img {
    animation: menu-gummy-drop var(--gummy-dur, 0.65s) cubic-bezier(0.22, 1, 0.36, 1) var(--gummy-delay, 0s) both;
  }
}
@media (min-width: 768px) {
  header nav .gummy-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: calc(0.1979166667 * min(100vw, 1920px));
    height: calc(0.1979166667 * min(100vw, 1920px));
    top: calc(50% + calc(-0.0924479167 * min(100vw, 1920px)));
    left: calc(50% + calc(0.1770833333 * min(100vw, 1920px)));
  }
}
@media (max-width: 767px) {
  header nav .gummy-hero {
    display: none;
  }
}
header nav .gummy-hero span {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transform-origin: center center;
}
@media (prefers-reduced-motion: no-preference) {
  header nav .gummy-hero span {
    animation: tvcm-gummy-nyuru var(--menu-hero-wobble-dur, 2.75s) linear infinite alternate;
  }
}
@media (prefers-reduced-motion: reduce) {
  header nav .gummy-hero span {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  header .nv_menu-open::after,
  header nav::before {
    transition: none;
  }
  header nav {
    transition: none;
  }
  header .menu-backdrop {
    transition: none;
  }
  header nav .gummy.gummy-drop-active .gummy-img {
    animation: none !important;
  }
}

.nv_sound-toggle {
  appearance: none;
  border: none;
  padding: 0;
  display: block;
  position: fixed;
  z-index: 50;
  background-color: #fff;
  mask-image: url(../img/btn_sound_on.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: left center;
  cursor: pointer;
  mix-blend-mode: overlay;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease;
}
@media (min-width: 768px) {
  .nv_sound-toggle {
    top: calc(0.0260416667 * min(100vw, 1920px));
    right: calc(0.078125 * min(100vw, 1920px));
    width: calc(0.0286458333 * min(100vw, 1920px));
    height: calc(0.0260416667 * min(100vw, 1920px));
  }
}
@media (max-width: 767px) {
  .nv_sound-toggle {
    top: 7.4666666667vw;
    right: 19.2vw;
    width: 7.0666666667vw;
    height: 6.5333333333vw;
  }
}
.nv_sound-toggle.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nv_sound-toggle.is-off {
  mask-image: url(../img/btn_sound_off.svg);
}

/* ----------------------------------------------------------------
  scroll reveal（IntersectionObserver / assets/js/reveal-on-scroll.js）
  対象: data-reveal 属性
  モード: data-reveal-mode="once"（既定）| "repeat"（画面外で戻り再入場で再生）
  html.js-reveal は head 内インラインで付与（JS 無効時は非表示にならない）
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*# sourceMappingURL=main.css.map */