html {
  background-color: #000;
}

body.yomikuji {
  background-color: #000;
  color: #fff;
  min-width: 320px;
  overflow-x: hidden;
}

@keyframes yomikujiWhiteFlash {
  0% {
    opacity: 0;
    visibility: visible;
  }
  35%, 65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.yomikuji-main {
  display: grid;
  min-height: 100dvh;
  overflow: hidden;
  position: relative;
}

.yomikuji-top,
.yomikuji-result {
  grid-area: 1/1;
}

.yomikuji-pc {
  display: none;
}

.yomikuji-pc__background {
  position: absolute;
  inset: 0;
  background: url("/assets/img/special/yomikuji/common/ph_bg.webp") no-repeat center/cover;
}
.yomikuji-pc__background::after {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  content: "";
}

.yomikuji-pc__frame {
  position: absolute;
  inset: clamp(16px, 1.8229166667vw, 35px);
  border: 1px solid #b99e58;
}
.yomikuji-pc__frame::before {
  position: absolute;
  inset: 4px;
  border: 1px solid #b99e58;
  content: "";
}

.yomikuji-pc__mark {
  align-items: center;
  background-color: #080808;
  border: 1px solid #b99e58;
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px #080808, inset 0 0 0 4px #b99e58;
  display: flex;
  height: 48px;
  justify-content: center;
  position: absolute;
  width: 48px;
}
.yomikuji-pc__mark > span {
  margin-top: -2px;
  font-size: 1.3125rem;
  display: block;
  font-weight: 400;
  line-height: 1;
  color: #b99e58;
  transform: scaleX(0.8);
}
.yomikuji-pc__mark.-top-left {
  left: -22px;
  top: -22px;
}
.yomikuji-pc__mark.-top-right {
  right: -22px;
  top: -22px;
}
.yomikuji-pc__mark.-bottom-left {
  bottom: -22px;
  left: -22px;
}
.yomikuji-pc__mark.-bottom-right {
  bottom: -22px;
  right: -22px;
}

.yomikuji-pc__intro {
  opacity: 0;
}
.-load:not(.-yomikuji-top-replay) .yomikuji-pc__intro {
  animation: ItemFadeIn 0.5s 0.3s ease-out forwards;
}
.-yomikuji-top-replay .yomikuji-pc__intro {
  opacity: 1;
}

.yomikuji-pc__intro,
.yomikuji-pc__official {
  display: none;
}
@keyframes ymkjResultScrollHintFloat {
  0%, 7%, 21%, 35%, 100% {
    transform: translateY(0);
  }
  14%, 28% {
    transform: translateY(40%);
  }
}
.yomikuji-result {
  background-color: #fff;
  color: #080808;
  container-type: inline-size;
  margin: 0 auto;
  max-width: 780px;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  width: 100%;
  z-index: 1;
  opacity: 0;
}
.-yomikuji-result .yomikuji-result {
  animation: ItemFadeIn 1s 0.1s forwards cubic-bezier(1, 0, 0, 1);
  pointer-events: auto;
  position: relative;
  visibility: visible;
  z-index: 2;
}

.yomikuji-result__content {
  background-color: #fff;
  min-height: 300cqw;
  overflow: hidden;
}
.yomikuji-result__content[data-result-index="5"] {
  min-height: 356.1538461538cqw;
}

@keyframes ymkjArwIn {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(-40%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}
.yomikuji-result__scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 45px;
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
  visibility: hidden;
  z-index: 10;
}
.yomikuji-result__scroll-hint.-show {
  opacity: 1;
  transition: opacity 0.3s 3s, visibility 0s 3s;
  visibility: visible;
}
.yomikuji-result__scroll-hint.-show.-shown {
  transition-delay: 0s;
}
.yomikuji-result__scroll-hint-clip {
  display: block;
  height: 100px;
  margin: -20px;
  padding: 40px 20px 20px 20px;
  width: 90px;
  opacity: 0;
}
.-yomikuji-result .yomikuji-result__scroll-hint-clip {
  animation: ItemFadeIn 1s 2.9s forwards cubic-bezier(1, 0, 0, 1);
}
.yomikuji-result__scroll-hint-float {
  display: block;
}
.-yomikuji-result .yomikuji-result__scroll-hint-float {
  animation: ymkjResultScrollHintFloat 3s 3.5s linear infinite;
}
.yomikuji-result__scroll-hint .c-arw {
  border-color: #b99e58;
  border-width: 14px;
  height: 50px;
  position: relative;
  transform: rotate(135deg);
  width: 50px;
}
.yomikuji-result__scroll-hint .c-arw::after {
  background-color: #b99e58;
  height: 14px;
  top: -7px;
  width: 70px;
}

.yomikuji-result__fortune-mount {
  display: flow-root;
  height: 212.1794871795cqw;
}
.yomikuji-result__fortune-mount:not(:empty) {
  height: auto;
}

@keyframes ymkjResultIn {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  99% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: none;
  }
}
.yomikuji-result__fortune {
  box-sizing: border-box;
  height: 207.0512820513cqw;
  margin: 5.1282051282cqw auto 0;
  position: relative;
  width: 89.7435897436cqw;
}
.yomikuji-result__fortune.-tall {
  height: 262.9487179487cqw;
}

.yomikuji-result__bg {
  position: absolute;
  top: 0;
  left: 0;
  border: 0.2564102564cqw solid #080808;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 100% 0);
  background: linear-gradient(#dc0c10, #dc0c10) left top/10.2564102564cqw 100% no-repeat, linear-gradient(#dc0c10, #dc0c10) right top/10.2564102564cqw 100% no-repeat, #f60000;
}
.-yomikuji-result .yomikuji-result__bg {
  animation: ymkjResultIn 1.5s 1s forwards cubic-bezier(1, 0, 0, 1);
}
.yomikuji-result__bg::before, .yomikuji-result__bg::after {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #080808;
  content: "";
  width: 0.2564102564cqw;
  z-index: 1;
}
.yomikuji-result__bg::before {
  left: 10.2564102564cqw;
}
.yomikuji-result__bg::after {
  right: 10.2564102564cqw;
}

.yomikuji-result__side {
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 7.8205128205cqw;
  z-index: 1;
  opacity: 0;
}
.-yomikuji-result .yomikuji-result__side {
  animation: ItemFadeIn 1s 2.4s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.yomikuji-result__side.-left {
  left: 2.4358974359cqw;
}
.yomikuji-result__side.-left .yomikuji-result__side-track {
  animation: ymkjSideUp var(--ymkj-side-duration, 20s) linear infinite;
}
.yomikuji-result__side.-right {
  right: 2.4358974359cqw;
}
.yomikuji-result__side.-right .yomikuji-result__side-track {
  animation: ymkjSideDown var(--ymkj-side-duration, 20s) linear infinite;
}
.yomikuji-result__side.-right img {
  transform: rotate(180deg);
}

.yomikuji-result__side-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.yomikuji-result__side-track img {
  flex: 0 0 auto;
  height: auto;
  margin-bottom: 21.0256410256cqw;
  max-width: none;
  width: 7.8205128205cqw;
}

@keyframes ymkjSideUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes ymkjSideDown {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes ymkjMarkIn {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.yomikuji-result__mark {
  align-items: center;
  background-color: #f60000;
  border: 0.8974358974cqw solid #080808;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.3846153846cqw #f60000, inset 0 0 0 0.7692307692cqw #080808;
  box-sizing: border-box;
  display: flex;
  height: 17.9487179487cqw;
  justify-content: center;
  line-height: 1;
  position: absolute;
  width: 17.9487179487cqw;
  z-index: 6;
  opacity: 0;
}
.yomikuji-result__mark span {
  transform: scaleX(0.8);
  font-size: 7.6923076923cqw;
  font-weight: 700;
  margin-top: -0.8974358974cqw;
}
.-yomikuji-result .yomikuji-result__mark {
  animation: ymkjMarkIn 1s 2.2s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.yomikuji-result__mark.-top-left {
  left: -3.8461538462cqw;
  top: -3.8461538462cqw;
}
.yomikuji-result__mark.-top-right {
  right: -3.8461538462cqw;
  top: -3.8461538462cqw;
}
.yomikuji-result__mark.-bottom-left {
  bottom: -3.8461538462cqw;
  left: -3.8461538462cqw;
}
.yomikuji-result__mark.-bottom-left span {
  transform: scaleX(0.8) scale(-1, 1);
}
.yomikuji-result__mark.-bottom-right {
  bottom: -3.8461538462cqw;
  right: -3.8461538462cqw;
}
.yomikuji-result__mark.-bottom-right span {
  transform: scaleX(0.8) scale(-1, 1);
}

.yomikuji-result__header {
  height: 59.2307692308cqw;
  position: relative;
  z-index: 2;
  opacity: 0;
}
.-yomikuji-result .yomikuji-result__header {
  animation: ItemFadeIn 1s 2.2s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

.yomikuji-result__reading {
  position: absolute;
  top: -3.4615384615cqw;
  left: 50%;
  height: 10.5128205128cqw;
  max-width: none;
  transform: translateX(-50%);
  width: 30.5128205128cqw;
  z-index: 4;
}

.yomikuji-result__triangle {
  position: absolute;
  top: 9.2307692308cqw;
  left: 50%;
  background-color: #080808;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 2.6923076923cqw;
  transform: translateX(-50%);
  width: 3.2051282051cqw;
}

@keyframes ymkjTtlIn {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.yomikuji-result__title {
  position: relative;
  opacity: 0;
  height: 100%;
}
.-yomikuji-result .yomikuji-result__title {
  animation: ItemFadeIn 1s 2.2s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

.yomikuji-result__title__head {
  position: absolute;
  top: 26.1538461538cqw;
  left: 50%;
  margin: 0;
  outline: none;
  transform: translateX(-50%);
  width: 100%;
  z-index: 2;
}
.yomikuji-result__title__head img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: none;
}

.yomikuji-result__content[data-result-index="1"] .yomikuji-result__title img {
  width: 65.1987179487cqw;
}

.yomikuji-result__content[data-result-index="2"] .yomikuji-result__title img {
  width: 46.6256410256cqw;
}

.yomikuji-result__content[data-result-index="3"] .yomikuji-result__title img {
  width: 85.3397435897cqw;
}

.yomikuji-result__content[data-result-index="4"] .yomikuji-result__title img {
  width: 86.3602564103cqw;
}

.yomikuji-result__content[data-result-index="5"] .yomikuji-result__title img {
  width: 64.6705128205cqw;
}

.yomikuji-result__content[data-result-index="6"] .yomikuji-result__title img {
  width: 62.9435897436cqw;
}

.yomikuji-result__content[data-result-index="7"] .yomikuji-result__title img {
  width: 84.9717948718cqw;
}

.yomikuji-result__content[data-result-index="8"] .yomikuji-result__title img {
  width: 80.0564102564cqw;
}

.yomikuji-result__content[data-result-index="9"] .yomikuji-result__title img {
  width: 87.5038461538cqw;
}

.yomikuji-result__content[data-result-index="10"] .yomikuji-result__title img {
  width: 86.9461538462cqw;
}

.yomikuji-result__content[data-result-index="11"] .yomikuji-result__title img {
  width: 86.3cqw;
}

.yomikuji-result__content[data-result-index="12"] .yomikuji-result__title img {
  width: 63.1256410256cqw;
}

.yomikuji-result__content[data-result-index="13"] .yomikuji-result__title img {
  width: 83.4025641026cqw;
}

.yomikuji-result__content[data-result-index="14"] .yomikuji-result__title img {
  width: 45.8628205128cqw;
}

.yomikuji-result__title__ribbon {
  position: absolute;
  top: 42.0512820513cqw;
  left: 50%;
  height: 13.0769230769cqw;
  transform: translateX(-50%);
  width: 43.9743589744cqw;
  z-index: 3;
}

.yomikuji-result__title__ribbon-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100% !important;
}

.yomikuji-result__title__ribbon-text,
.yomikuji-result__title__ribbon-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.yomikuji-result__title__ribbon-text {
  height: 2.3076923077cqw;
  max-width: 21.7948717949cqw;
  width: auto;
}

.yomikuji-result__title__ribbon-fallback {
  font-size: 2.1794871795cqw;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

@keyframes ymkjSceneIn {
  0% {
    opacity: 0;
    transform: scale(1.4) translate(-50%, -50%);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
  }
}
.yomikuji-result__scene {
  box-sizing: border-box;
  height: 56.1538461538cqw;
  overflow: hidden;
  position: relative;
  z-index: 4;
}
.yomikuji-result__scene img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 56.1538461538cqw;
  max-width: none;
  width: 100cqw;
  transform: translate(-50%, -50%);
  transform-origin: top left;
  opacity: 0;
}
.-yomikuji-result .yomikuji-result__scene img {
  animation: ymkjSceneIn 1.1s 2.2s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.yomikuji-result__scene.-tall {
  height: 112.0512820513cqw;
}
.yomikuji-result__scene.-tall img {
  height: 112.0512820513cqw;
}
.yomikuji-result__scene::before, .yomikuji-result__scene::after {
  content: "";
  border: 0.2564102564cqw solid #080808;
  height: 0.2564102564cqw;
  width: 100%;
  opacity: 0;
}
.-yomikuji-result .yomikuji-result__scene::before, .-yomikuji-result .yomikuji-result__scene::after {
  animation: ItemFadeIn 1s 2.2s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.yomikuji-result__scene::before {
  position: absolute;
  top: 0;
}
.yomikuji-result__scene::after {
  position: absolute;
  bottom: 0;
}

.yomikuji-result__body {
  height: 91.6666666667cqw;
  position: relative;
  z-index: 2;
}

.yomikuji-result__message {
  position: absolute;
  top: 7.0512820513cqw;
  left: 50%;
  display: block;
  height: 76.9230769231cqw;
  max-width: none;
  transform: translateX(-50%);
  width: auto;
  clip-path: inset(0 0 100% 0);
}
.-yomikuji-result .yomikuji-result__message {
  animation: ymkjResultIn 1.2s 2.5s forwards cubic-bezier(0.19, 1, 0.22, 1);
}

.yomikuji-result__actions {
  border-bottom: 0.2564102564cqw solid #080808;
  box-sizing: border-box;
  height: 57.1794871795cqw;
  padding-top: 15cqw;
}

.yomikuji-result__share {
  align-items: center;
  background-color: #080808;
  border: 0;
  color: #fff;
  display: flex;
  font-size: 4.8717948718cqw;
  font-weight: 900;
  height: 20.1282051282cqw;
  justify-content: center;
  line-height: 1;
  margin: 0 auto;
  position: relative;
  width: 71.7948717949cqw;
  clip-path: inset(0 100% 0 0);
  transition: filter 0.3s 0s ease;
}
.-yomikuji-result .yomikuji-result__share {
  animation: tapeInLeft 1s 2.7s cubic-bezier(1, 0, 0, 1) forwards;
}
.yomikuji-result__share:disabled {
  color: #fff;
  cursor: default;
  opacity: 1;
}
.yomikuji-result__share .c-arw {
  border-color: currentColor;
  border-width: 0.5128205128cqw;
  height: 3.5897435897cqw;
  position: absolute;
  right: 4.7435897436cqw;
  top: 7.6923076923cqw;
  transition: transform 0.3s 0s;
  width: 3.5897435897cqw;
}
.yomikuji-result__share .c-arw::after {
  background-color: currentColor;
  height: 0.5128205128cqw;
}

.yomikuji-result__redraw {
  background: transparent;
  border: 0;
  color: #080808;
  display: block;
  font-size: 4.1025641026cqw;
  font-weight: 900;
  line-height: 1.3;
  margin: 5.7692307692cqw auto 0;
  text-decoration: underline;
  text-decoration-thickness: 0.3846153846cqw;
  text-underline-offset: 0.8974358974cqw;
  opacity: 0;
}
.-yomikuji-result .yomikuji-result__redraw {
  animation: ItemFadeIn 1s 3s ease-out forwards;
}
.yomikuji-result__redraw:focus-visible {
  outline: 0.3846153846cqw solid #080808;
  outline-offset: 1.0256410256cqw;
}

.yomikuji-result__official {
  align-items: center;
  color: #080808;
  display: flex;
  font-size: 2.8205128205cqw;
  font-weight: 300;
  gap: 3.5897435897cqw;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  margin-top: 12.8205128205cqw;
}
.yomikuji-result__official .c-arw {
  border-color: currentColor;
  border-width: 0.2564102564cqw;
  flex: 0 0 auto;
  height: 3.0769230769cqw;
  transform: rotate(180deg);
  transition: transform 0.3s 0s;
  width: 3.0769230769cqw;
}
.yomikuji-result__official .c-arw::after {
  background-color: currentColor;
  height: 0.2564102564cqw;
}

@keyframes yomikujiTopHide {
  to {
    visibility: hidden;
  }
}
@keyframes yomikujiTopRayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@keyframes yomikujiTopRayFlicker {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 0;
  }
}
@keyframes yomikujiTopRaySurge {
  0% {
    opacity: 0.4;
  }
  10% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  80% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.8;
  }
}
.yomikuji-top {
  background-color: #000;
  container-type: inline-size;
  margin: 0 auto;
  max-width: 780px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}
.-yomikuji-drawing .yomikuji-top {
  pointer-events: none;
}
.-yomikuji-result .yomikuji-top {
  animation: yomikujiTopHide 0s 1.15s forwards;
  pointer-events: none;
}

.yomikuji-top__visual {
  background-color: #5e0000;
  height: 206.4102564103cqw;
  isolation: isolate;
  margin: 5.1282051282cqw auto 0;
  overflow: hidden;
  position: relative;
  width: 89.7435897436cqw;
}

.yomikuji-top__inner {
  flex: 0 0 auto;
  height: 206.4102564103cqw;
  perspective: 153.8461538462cqw;
  position: relative;
  width: 100%;
}
.-yomikuji-aura-active .yomikuji-top__inner {
  z-index: 7;
}

@keyframes yomikujiBackgroundRotate {
  to {
    transform: translate(-50%, -50%) rotate(1turn);
  }
}
@keyframes bgIn03 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
.yomikuji-top__background {
  position: absolute;
  inset: 0;
  background: #5e0000;
  overflow: hidden;
  z-index: -3;
}
.yomikuji-top__background::before {
  position: absolute;
  top: 45%;
  left: 50%;
  aspect-ratio: 1;
  background: repeating-conic-gradient(from 31.5deg, rgba(255, 255, 255, 0.2) 0deg, rgba(255, 255, 255, 0.2) 27deg, transparent 27deg, transparent 90deg);
  content: "";
  transform: translate(-50%, -50%);
  width: max(260%, 120dvh);
  opacity: 0;
}
.-load .yomikuji-top__background::before {
  animation: yomikujiTopRayFadeIn 1s 0.45s ease-out forwards, yomikujiTopRayFlicker 1s 1.45s ease-in-out infinite alternate;
}
.-yomikuji-drawing .yomikuji-top__background::before, .-yomikuji-result .yomikuji-top__background::before {
  animation: yomikujiTopRaySurge 4s 0s linear both;
}
.yomikuji-top__background:after {
  content: "";
  background: url("/assets/img/special/yomikuji/top/ph_shadow.webp") no-repeat center/cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  mix-blend-mode: overlay;
}
.-load .yomikuji-top__background:after {
  animation: ItemFadeIn 1s 0.45s ease-out forwards;
}
.-yomikuji-drawing .yomikuji-top__background:after, .-yomikuji-result .yomikuji-top__background:after {
  animation: ItemFadeOut 0.5s 0.3s ease-out both;
}

.yomikuji-top__background-word {
  position: absolute;
  left: 48%;
  height: auto;
  transform: translateX(-50%);
  opacity: 0;
}
.-load .yomikuji-top__background-word {
  animation: ItemFadeIn 1s 0.45s ease-out forwards;
}
.-yomikuji-drawing .yomikuji-top__background-word, .-yomikuji-result .yomikuji-top__background-word {
  animation: ItemFadeOut 0.5s 0s ease-out forwards;
}
.yomikuji-top__background-word.-top {
  aspect-ratio: 851/156;
  top: -5.1282051282cqw;
  width: 109.1025641026cqw;
}
.yomikuji-top__background-word.-bottom {
  aspect-ratio: 859/167;
  bottom: -4.1025641026cqw;
  width: 110.1282051282cqw;
}

.yomikuji-top__corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.-load .yomikuji-top__corners {
  animation: ItemFadeIn 1s 0.45s ease-out forwards;
}
.yomikuji-top__corners img {
  position: absolute;
  width: 17.9487179487cqw;
}
.yomikuji-top__corners .-top-left {
  left: 0;
  top: 0;
}
.yomikuji-top__corners .-top-right {
  right: 0;
  top: 0;
  transform: scaleX(-1);
}
.yomikuji-top__corners .-bottom-left {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}
.yomikuji-top__corners .-bottom-right {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

@keyframes yomikujiTriangleBurst {
  from {
    opacity: 0;
    rotate: var(--burst-from-rotate);
    scale: 0.3;
    translate: var(--burst-from-x) var(--burst-from-y);
  }
  20% {
    opacity: 1;
  }
  to {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
    translate: 0 0;
  }
}
.yomikuji-top__triangles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.yomikuji-top__triangles span {
  --burst-delay: 0.47s;
  --burst-from-rotate: -5deg;
  background-color: #f60000;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  height: 3.7179487179cqw;
  opacity: 0;
  position: absolute;
  transform-origin: center;
  rotate: 0deg;
  scale: 1;
  translate: 0 0;
  width: 3.2051282051cqw;
  z-index: 3;
}
.-load .yomikuji-top__triangles span {
  animation: yomikujiTriangleBurst 0.75s var(--burst-delay) forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.-yomikuji-drawing .yomikuji-top__triangles span, .-yomikuji-result .yomikuji-top__triangles span {
  animation: ItemFadeOut 0.5s 0.3s ease-out both;
}
.yomikuji-top__triangles span:nth-child(3n+2) {
  --burst-delay: 0.51s;
}
.yomikuji-top__triangles span:nth-child(3n) {
  --burst-delay: 0.55s;
}
.yomikuji-top__triangles .-t1 {
  --burst-from-x: 25.641025641cqw;
  --burst-from-y: 83.8461538462cqw;
  --burst-from-rotate: -32deg;
  left: 17.6923076923cqw;
  top: 7.1794871795cqw;
  transform: rotate(8deg);
}
.yomikuji-top__triangles .-t2 {
  --burst-from-x: 18.8461538462cqw;
  --burst-from-y: 67.4358974359cqw;
  --burst-from-rotate: 28deg;
  left: 24.4871794872cqw;
  top: 23.5897435897cqw;
  transform: rotate(184deg) scale(0.45);
}
.yomikuji-top__triangles .-t3 {
  --burst-from-x: -21.5384615385cqw;
  --burst-from-y: 63.4615384615cqw;
  --burst-from-rotate: -30deg;
  left: 64.7435897436cqw;
  top: 27.5641025641cqw;
  transform: rotate(180deg);
}
.yomikuji-top__triangles .-t4 {
  --burst-from-x: 35.8974358974cqw;
  --burst-from-y: 41.9230769231cqw;
  --burst-from-rotate: 36deg;
  left: 7.4358974359cqw;
  top: 49.1025641026cqw;
  transform: rotate(180deg) scale(0.7);
}
.yomikuji-top__triangles .-t5 {
  --burst-from-x: -19.358974359cqw;
  --burst-from-y: 25.8974358974cqw;
  --burst-from-rotate: -28deg;
  left: 62.5641025641cqw;
  top: 65.1282051282cqw;
  transform: scale(0.5);
}
.yomikuji-top__triangles .-t6 {
  --burst-from-x: -36.1538461538cqw;
  --burst-from-y: 22.6923076923cqw;
  --burst-from-rotate: 32deg;
  left: 79.358974359cqw;
  top: 68.3333333333cqw;
  transform: rotate(8deg);
}
.yomikuji-top__triangles .-t7 {
  --burst-from-x: 35.7692307692cqw;
  --burst-from-y: -7.6923076923cqw;
  --burst-from-rotate: -38deg;
  left: 7.5641025641cqw;
  top: 98.7179487179cqw;
  transform: rotate(180deg);
}
.yomikuji-top__triangles .-t8 {
  --burst-from-x: -25.8974358974cqw;
  --burst-from-y: -23.3333333333cqw;
  --burst-from-rotate: 34deg;
  left: 69.1025641026cqw;
  top: 114.358974359cqw;
  transform: rotate(5deg) scale(0.72);
}
.yomikuji-top__triangles .-t9 {
  --burst-from-x: 32.4358974359cqw;
  --burst-from-y: -54.1025641026cqw;
  --burst-from-rotate: -30deg;
  left: 10.8974358974cqw;
  top: 145.1282051282cqw;
  transform: rotate(104deg) scale(1.05);
}
.yomikuji-top__triangles .-t10 {
  --burst-from-x: -20.641025641cqw;
  --burst-from-y: -50.3846153846cqw;
  --burst-from-rotate: 36deg;
  left: 63.8461538462cqw;
  top: 141.4102564103cqw;
  transform: rotate(180deg) scale(0.7);
}
.yomikuji-top__triangles .-t11 {
  --burst-from-x: -34.8717948718cqw;
  --burst-from-y: 79.6153846154cqw;
  --burst-from-rotate: -28deg;
  left: 78.0769230769cqw;
  top: 11.4102564103cqw;
  transform: rotate(-20deg) scale(0.45);
}
.yomikuji-top__triangles .-t12 {
  --burst-from-x: -30.1282051282cqw;
  --burst-from-y: -46.5384615385cqw;
  --burst-from-rotate: 32deg;
  left: 73.3333333333cqw;
  top: 137.5641025641cqw;
  transform: rotate(180deg) scale(0.45);
}
.yomikuji-top__triangles .-t5,
.yomikuji-top__triangles .-t6,
.yomikuji-top__triangles .-t7,
.yomikuji-top__triangles .-t8 {
  z-index: 3;
}
.-yomikuji-drawing .yomikuji-top__triangles .-t5, .-yomikuji-result .yomikuji-top__triangles .-t5,
.-yomikuji-drawing .yomikuji-top__triangles .-t6,
.-yomikuji-result .yomikuji-top__triangles .-t6,
.-yomikuji-drawing .yomikuji-top__triangles .-t7,
.-yomikuji-result .yomikuji-top__triangles .-t7,
.-yomikuji-drawing .yomikuji-top__triangles .-t8,
.-yomikuji-result .yomikuji-top__triangles .-t8 {
  z-index: 7;
}

@keyframes ymkjPointerIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-30%);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.yomikuji-top__pointer {
  position: absolute;
  top: 36.5384615385cqw;
  left: 50%;
  background-color: #f60000;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 18.5897435897cqw;
  transform: translateX(-50%);
  width: 23.0769230769cqw;
  z-index: 10;
  opacity: 0;
}
.-load .yomikuji-top__pointer {
  animation: ymkjPointerIn 0.8s 0.55s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
.-yomikuji-drawing .yomikuji-top__pointer, .-yomikuji-result .yomikuji-top__pointer {
  animation: ItemFadeOut 0.5s 0.3s ease-out both;
}

.yomikuji-top__catch {
  margin: 0;
  position: absolute;
  z-index: 3;
}
.-yomikuji-drawing .yomikuji-top__catch, .-yomikuji-result .yomikuji-top__catch {
  animation: ItemFadeOut 0.5s 0s ease-out forwards;
}
.yomikuji-top__catch.-top {
  height: 12.3076923077cqw;
  left: 16.6666666667cqw;
  top: 7.0512820513cqw;
}
.yomikuji-top__catch.-bottom {
  height: 13.0769230769cqw;
  left: 8.0769230769cqw;
  top: 176.4102564103cqw;
}

.yomikuji-top__catch-text,
.yomikuji-top__catch-character {
  height: auto;
  position: absolute;
}

@keyframes yomikujiCatchTextSpread {
  from {
    transform: translateX(var(--catch-text-from-x));
  }
  to {
    transform: translateX(0);
  }
}
.yomikuji-top__catch-text {
  left: 0;
  opacity: 0;
}
.-load .yomikuji-top__catch-text {
  animation: ItemFadeIn 1s 0.45s ease-out forwards;
}
.-load .yomikuji-top__catch-text svg path,
.-load .yomikuji-top__catch-text svg line {
  animation: yomikujiCatchTextSpread 0.75s 0.45s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.yomikuji-top__catch-text svg path,
.yomikuji-top__catch-text svg line {
  transform: translateX(var(--catch-text-from-x));
  transform-box: view-box;
}
.yomikuji-top__catch-text svg path {
  fill: rgba(235, 235, 235, 0.6);
}
.yomikuji-top__catch-text svg line {
  stroke: rgba(235, 235, 235, 0.6);
}
.yomikuji-top__catch.-top .yomikuji-top__catch-text {
  aspect-ratio: 319/35;
  top: 7.1794871795cqw;
  left: 12.8205128205cqw;
  width: 40.8974358974cqw;
}
.yomikuji-top__catch.-top .yomikuji-top__catch-text path:nth-child(1) {
  --catch-text-from-x: 20%;
}
.yomikuji-top__catch.-top .yomikuji-top__catch-text path:nth-child(2) {
  --catch-text-from-x: 12%;
}
.yomikuji-top__catch.-top .yomikuji-top__catch-text path:nth-child(3) {
  --catch-text-from-x: -12%;
}
.yomikuji-top__catch.-top .yomikuji-top__catch-text path:nth-child(4) {
  --catch-text-from-x: -20%;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-text {
  aspect-ratio: 518/34;
  top: 5.3846153846cqw;
  width: 66.4102564103cqw;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-text path:nth-child(1) {
  --catch-text-from-x: 24%;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-text path:nth-child(2) {
  --catch-text-from-x: 16%;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-text path:nth-child(3) {
  --catch-text-from-x: 8%;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-text path:nth-child(4) {
  --catch-text-from-x: -8%;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-text path:nth-child(5) {
  --catch-text-from-x: -16%;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-text line {
  --catch-text-from-x: -20%;
}

.yomikuji-top__catch-character {
  top: 0;
  z-index: 1;
  opacity: 0;
}
.-load .yomikuji-top__catch-character {
  animation: ItemFadeIn 1s 0.45s ease-out forwards;
}
.yomikuji-top__catch.-top .yomikuji-top__catch-character {
  aspect-ratio: 87/137;
  width: 11.1538461538cqw;
}
.yomikuji-top__catch.-bottom .yomikuji-top__catch-character {
  aspect-ratio: 116/154;
  left: 63.7179487179cqw;
  top: -0.2564102564cqw;
  width: 14.8717948718cqw;
}

@keyframes yomikujiBoardIn {
  0% {
    opacity: 0;
    scale: 1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes yomikujiBoardAuraPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.7);
  }
}
@keyframes yomikujiAuraToWhite {
  0%, 10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.yomikuji-top__aura {
  position: absolute;
  top: calc(50% - 11.2820512821cqw);
  left: 50%;
  background: radial-gradient(ellipse at center, rgb(255, 248, 200) 20%, rgba(255, 198, 68, 0.5) 45%, rgba(255, 198, 68, 0) 100%);
  border-radius: 50%;
  display: none;
  height: 102.5641025641cqw;
  filter: blur(5.1282051282cqw);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  width: 102.5641025641cqw;
  z-index: 6;
}
.-yomikuji-aura-active .yomikuji-top__aura {
  animation: yomikujiBoardAuraPulse 4s 0s linear both;
  display: block;
}
.yomikuji-top__aura::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0.5) 45%, rgba(255, 255, 255, 0) 100%);
  border-radius: inherit;
  content: "";
  opacity: 0;
}
.-yomikuji-aura-active .yomikuji-top__aura::before {
  animation: yomikujiAuraToWhite 4s 0s linear both;
}

@keyframes yomikujiBoardScaleSequence {
  0% {
    scale: 1;
  }
  68.4210526316% {
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
    scale: 1;
  }
  100% {
    scale: 4.5;
  }
}
@keyframes yomikujiBoardRotateSequence {
  0% {
    transform: rotateY(0deg);
  }
  7.8947368421% {
    transform: rotateY(0deg);
  }
  68.4210526316% {
    animation-timing-function: cubic-bezier(0.42, 0.11, 0.58, 1);
    transform: rotateY(720deg);
  }
  100% {
    transform: rotateY(1440deg);
  }
}
.yomikuji-top__board {
  position: absolute;
  top: 41.7948717949cqw;
  left: 50%;
  aspect-ratio: 552.47/781.83;
  margin-left: -35.3846153846cqw;
  transform-origin: center;
  transform-style: preserve-3d;
  opacity: 0;
  width: 70.7692307692cqw;
  z-index: 2;
}
.-load .yomikuji-top__board {
  animation: yomikujiBoardIn 0.5s 0.3s forwards cubic-bezier(1, 0, 0, 1);
}
.-yomikuji-drawing .yomikuji-top__board, .-yomikuji-result .yomikuji-top__board {
  animation: yomikujiBoardScaleSequence 3.8s 0s both linear, yomikujiBoardRotateSequence 3.8s 0s both linear;
  z-index: 6;
  opacity: 1;
}

.yomikuji-top__board-front,
.yomikuji-top__board-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.4));
}

.yomikuji-top__board-front {
  transform: rotateY(0deg);
}

.yomikuji-top__board-back {
  background: url("/assets/img/special/yomikuji/top/ph_board_back.svg") no-repeat center/100% 100%;
  transform: rotateY(180deg);
}

.yomikuji-top__board-image {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.yomikuji-top__title {
  position: absolute;
  top: 26%;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  width: 83.81%;
}

.yomikuji-top__reading {
  position: absolute;
  left: 50%;
  height: 10.5128205128cqw;
  transform: translateX(-50%);
  width: 30.5128205128cqw;
  z-index: 2;
}
.yomikuji-top__reading.-top {
  top: 13.05%;
}
.yomikuji-top__reading.-bottom {
  top: 75.72%;
}
.yomikuji-top__reading::before, .yomikuji-top__reading::after {
  position: absolute;
  top: 50%;
  border-top: 0.2564102564cqw solid #b99e58;
  content: "";
  width: 14.358974359cqw;
}
.yomikuji-top__reading::before {
  right: 98%;
}
.yomikuji-top__reading::after {
  left: 98%;
}
.yomikuji-top__reading > img {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.yomikuji-top__deco {
  height: auto;
  position: absolute;
  z-index: 2;
  opacity: 0;
}
.-load .yomikuji-top__deco {
  animation: ItemFadeIn 1s 0.45s ease-out forwards;
}
.-yomikuji-drawing .yomikuji-top__deco, .-yomikuji-result .yomikuji-top__deco {
  animation: ItemFadeOut 0.5s 0s ease-out forwards;
}
.yomikuji-top__deco.-right {
  aspect-ratio: 147/37;
  right: 4.1025641026cqw;
  top: 46.7948717949cqw;
  width: 18.8461538462cqw;
}
.yomikuji-top__deco.-left {
  aspect-ratio: 264/37;
  left: 5.641025641cqw;
  top: 134.358974359cqw;
  width: 33.8461538462cqw;
}

.yomikuji-top__draw {
  position: absolute;
  top: 152.0512820513cqw;
  left: 50%;
  align-items: center;
  background-color: #f60000;
  border: 0;
  color: #090909;
  display: flex;
  font-size: 6.1538461538cqw;
  font-weight: 900;
  height: 20.1282051282cqw;
  justify-content: center;
  line-height: 1;
  transform: translateX(-50%);
  transition: filter 0.4s ease-out;
  width: 71.7948717949cqw;
  z-index: 4;
  clip-path: inset(0 100% 0 0);
}
.yomikuji-top__draw:hover {
  filter: brightness(1.6);
}
.-load .yomikuji-top__draw {
  animation: tapeInLeft 1s 0.45s cubic-bezier(1, 0, 0, 1) forwards;
}
.-yomikuji-drawing .yomikuji-top__draw, .-yomikuji-result .yomikuji-top__draw {
  animation: ItemFadeOut 0.5s 0s ease-out forwards;
}
.yomikuji-top__draw .c-arw {
  border-color: currentColor;
  border-width: 0.5128205128cqw;
  height: 3.8461538462cqw;
  position: absolute;
  right: 4.7435897436cqw;
  top: 7.6923076923cqw;
  transition: transform 0.3s 0s;
  width: 3.8461538462cqw;
}
.yomikuji-top__draw .c-arw::after {
  background-color: currentColor;
  height: 0.5128205128cqw;
}
.yomikuji-top__draw:focus-visible {
  outline: 0.5128205128cqw solid #b99e58;
  outline-offset: 0.7692307692cqw;
}

.yomikuji-top__official {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 3.8461538462cqw;
  font-weight: 300;
  gap: 3.5897435897cqw;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 18.7179487179cqw auto 12.3076923077cqw;
  text-decoration: none;
  width: -moz-fit-content;
  width: fit-content;
}
.yomikuji-top__official .c-arw {
  border-color: currentColor;
  border-width: 0.2564102564cqw;
  flex: 0 0 auto;
  height: 4.6153846154cqw;
  transform: rotate(180deg);
  transition: transform 0.3s 0s;
  width: 4.6153846154cqw;
}
.yomikuji-top__official .c-arw::after {
  background-color: currentColor;
  height: 0.2564102564cqw;
}
.yomikuji-top__official span {
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.yomikuji-top__official:focus-visible {
  outline: 0.3846153846cqw solid #b99e58;
  outline-offset: 1.0256410256cqw;
}
@media (min-width: 780px) {
  .yomikuji-pc {
    position: fixed;
    inset: 0;
    display: block;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  .yomikuji-result {
    max-width: none;
    width: 500px;
  }
  .yomikuji-result__scroll-hint {
    display: block;
  }
  .yomikuji-result__share:hover {
    filter: brightness(4);
  }
  .yomikuji-result__redraw p:hover {
    opacity: 0.55;
  }
  .yomikuji-top {
    max-width: none;
    min-height: 100dvh;
    width: 500px;
  }
}
@media (min-width: 1450px) {
  .yomikuji-pc__intro {
    position: absolute;
    top: 51%;
    left: calc(50% - 480px);
    display: block;
    transform: translate(-50%, -50%);
    width: 300px;
  }
  .yomikuji-pc__intro-head {
    aspect-ratio: 252/102;
    display: block;
    height: auto;
    margin: 0 auto;
    width: 252px;
  }
  .yomikuji-pc__intro-title {
    aspect-ratio: 463/383;
    display: block;
    height: auto;
    margin: 25px auto 27px;
    width: 155px;
  }
  .yomikuji-pc__intro-copy {
    color: #b99e58;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.78;
    margin: 0;
    text-align: left;
    white-space: nowrap;
  }
  .yomikuji-pc__official {
    position: fixed;
    bottom: 68px;
    right: 108px;
    align-items: center;
    color: #fff;
    display: flex;
    font-size: 1.125rem;
    font-weight: 300;
    gap: 20px;
    letter-spacing: 0.02em;
    line-height: 1;
    pointer-events: auto;
    text-decoration: none;
    opacity: 0;
  }
  .-load:not(.-yomikuji-top-replay) .yomikuji-pc__official {
    animation: ItemFadeIn 0.5s 0.3s ease-out forwards;
  }
  .-yomikuji-top-replay .yomikuji-pc__official {
    opacity: 1;
  }
  .yomikuji-pc__official .c-arw {
    border-color: currentColor;
    flex: 0 0 auto;
    height: 20px;
    transform: rotate(180deg);
    transition: transform 0.3s 0s;
    width: 20px;
  }
  .yomikuji-pc__official .c-arw::after {
    background-color: currentColor;
  }
  .yomikuji-pc__official:focus-visible {
    outline: 2px solid #b99e58;
    outline-offset: 8px;
  }
  .yomikuji-top__visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 5.1282051282cqw;
    min-height: calc(100dvh - 10.2564102564cqw);
  }
  .yomikuji-top__official {
    display: none;
  }
}
@media (min-width: 1450px) and (any-hover: hover) {
  .yomikuji-pc__official:hover .c-arw {
    transform: rotate(180deg) translate(5px, 0);
  }
}
@media (min-width: 1450px) and (max-height: 550px) {
  .yomikuji-pc__intro {
    display: none;
  }
}
@media (any-hover: hover) {
  .yomikuji-result__share:not(:disabled):hover .c-arw {
    transform: translateX(5px);
  }
  .yomikuji-result__official:hover .c-arw {
    transform: rotate(180deg) translate(5px, 0px);
  }
  .yomikuji-top__draw:not(:disabled):hover .c-arw {
    transform: translateX(5px);
  }
  .yomikuji-top__official:hover .c-arw {
    transform: rotate(180deg) translate(5px, -5px);
  }
  .yomikuji-top__official:hover span {
    border-color: currentColor;
  }
}