@charset "utf-8";
/*　ブレークポイント */
/* 背景画像　テキスト消去*/
/* フレックス*/
:root {
  --english-font: "Quicksand", sans-serif;
  --yugo-d: "游ゴシック体 Pr6N D", "Yu Gothic Pr6N D";
}

html {
  box-sizing: border-box;
  overflow-y: scroll; /* All browsers without overlaying scrollbars */
  -webkit-text-size-adjust: 100%; /* iOS 8+ */
}

*,
::before,
::after {
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

/* Remove margin, padding of all elements and set background-no-repeat as default */
* {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements */
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

ul li {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

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

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden; /* Internet Explorer 11- */
}

:root {
  --keyColor-1: #a881eb;
  --keyColor-1-hover: #956fe0;
  --keyColor-2: #fff8ec;
  --keyColor-3: #a590c3;
  --text-color: #5c4b51;
  --brandColor: #f09cb4;
  --font-ja: "M PLUS Rounded 1c", sans-serif;
}

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

a:hover {
  text-decoration: none;
}

body {
  background-color: #ffffd8;
  color: var(--text-color);
  font-family: var(--font-ja);
}

@keyframes bg-diagonal-scroll {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 600px -847px;
  }
}
.sanrio-characters {
  --layout-max-width: 1450px;
  --main-contents-width: 550px;
  --column-gap: 20px;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}
.sanrio-characters::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url(../img/bg.png);
  background-size: 600px auto;
  background-position: 0 0;
  background-repeat: repeat;
  animation: bg-diagonal-scroll 40s linear infinite;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .sanrio-characters {
    min-height: 100vh;
  }
}

.fv {
  position: relative;
  width: 100%;
  position: relative;
  z-index: 2;
}

.main-contents {
  max-width: 550px;
  margin: 0 auto;
  background-size: auto auto;
  background-color: rgb(255, 255, 255);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgb(255, 220, 251) 10px, rgb(255, 220, 251) 20px);
}

.product-information,
.how-to-play {
  padding: 0 0px 60px;
}

@keyframes heading-reveal {
  0% {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}
@keyframes heading-obj-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.14);
  }
  72% {
    transform: scale(0.92);
  }
  88% {
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.heading-wrap {
  position: relative;
  padding-top: clamp(1.25rem, -1.5441176471rem + 11.7647058824vw, 2.5rem);
  text-align: center;
}
.heading-wrap .heading-obj {
  position: absolute;
  line-height: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}
.heading-wrap .heading-obj.is-pop-visible {
  animation: heading-obj-pop 0.52s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}
.heading-wrap .heading-obj img {
  display: block;
  width: 100%;
  height: auto;
}

.tagline, .heading {
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
}
.is-heading-reveal.tagline, .is-heading-reveal.heading {
  animation: heading-reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .sanrio-characters::before {
    animation: none;
  }
  .product-information .heading-wrap .heading,
  .product-information .heading-wrap .tagline,
  .how-to-play > .heading-wrap .heading,
  .how-to-play > .heading-wrap .tagline {
    opacity: 1;
    clip-path: none;
    animation: none !important;
  }
  .product-information .heading-wrap .heading-obj,
  .how-to-play > .heading-wrap .heading-obj {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .how-to-play-contents .contents-item {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .product-information .products .product-item {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .fv-title {
    opacity: 1;
    animation: none !important;
  }
  .fv .charactors-image {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .fv [class^=top-o-item-] {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .slider-wrap {
    opacity: 1;
    animation: none !important;
  }
}
.heading {
  width: clamp(11.25rem, -2.7205882353rem + 58.8235294118vw, 17.5rem);
  margin: clamp(1.25rem, -1.5441176471rem + 11.7647058824vw, 2.5rem) auto 0;
}
.heading img {
  display: block;
  width: 100%;
  height: auto;
}

.tagline {
  font-size: clamp(1rem, 0.4411764706rem + 2.3529411765vw, 1.25rem);
  font-weight: 600;
  text-align: center;
  padding: 20px 0px;
  transform: rotate(0.05deg);
}

#page_top {
  width: clamp(3.75rem, 0.9558823529rem + 11.7647058824vw, 5rem);
  position: fixed;
  right: 15px;
  bottom: 15px;
  opacity: 0;
  /*box-shadow:5px 5px 0 #d9d3e8;*/
  z-index: 10;
}

#page_top a {
  position: relative;
  display: block;
}

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

.fv {
  background-color: #cdeff2;
  position: relative;
}
.fv span {
  display: block;
  position: absolute;
}

.fv-title {
  width: clamp(20.625rem, -0.3308823529rem + 88.2352941176vw, 30rem);
  display: block;
  text-align: center;
  position: relative;
  top: clamp(0.75rem, -0.3676470588rem + 4.7058823529vw, 1.25rem);
  left: clamp(0.75rem, -0.3676470588rem + 4.7058823529vw, 1.25rem);
  opacity: 0;
}
.fv-title.is-fv-title-visible {
  animation: fv-title-fade 0.8s ease forwards;
}
.fv-title img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes fv-title-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.charactors-image {
  position: relative;
  padding: clamp(1.25rem, -0.1470588235rem + 5.8823529412vw, 1.875rem) 0;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}
.charactors-image.is-charactors-visible {
  animation: contents-item-pop 0.6s cubic-bezier(0.34, 1.22, 0.64, 1) both;
}
.charactors-image img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes top-o-hover {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(var(--hover-lift, -3px)) scale(1);
  }
}
.fv [class^=top-o-item-] {
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
  --hover-duration: 2.8s;
  --hover-lift: -4px;
}
.fv [class^=top-o-item-].is-pop-visible {
  animation: heading-obj-pop 0.52s cubic-bezier(0.34, 1.45, 0.64, 1) both var(--pop-delay, 0ms), top-o-hover var(--hover-duration) ease-in-out calc(var(--pop-delay, 0ms) + 0.52s) infinite;
}
.fv [class^=top-o-item-] img {
  display: block;
  width: 100%;
  height: auto;
}

.top-o-item-1 {
  width: clamp(3.75rem, -1.8382352941rem + 23.5294117647vw, 6.25rem);
  top: clamp(4.375rem, 0.1838235294rem + 17.6470588235vw, 6.25rem);
  left: clamp(0.9375rem, -2.2757352941rem + 13.5294117647vw, 2.375rem);
  --hover-duration: 2.6s;
  --hover-lift: -5px;
}

.top-o-item-2 {
  width: clamp(1.875rem, -0.9191176471rem + 11.7647058824vw, 3.125rem);
  bottom: clamp(0.9375rem, 0.2389705882rem + 2.9411764706vw, 1.25rem);
  left: clamp(0.9375rem, -0.0404411765rem + 4.1176470588vw, 1.375rem);
  --hover-duration: 3.1s;
  --hover-lift: -7px;
}

.top-o-item-3 {
  width: clamp(1.125rem, 0.1470588235rem + 4.1176470588vw, 1.5625rem);
  bottom: clamp(7.1875rem, -1.1948529412rem + 35.2941176471vw, 10.9375rem);
  left: clamp(5.9375rem, -0.3492647059rem + 26.4705882353vw, 8.75rem);
  --hover-duration: 2.4s;
  --hover-lift: -4px;
}

.top-o-item-4 {
  width: clamp(1.25rem, 0.5514705882rem + 2.9411764706vw, 1.5625rem);
  bottom: clamp(0.9375rem, 0.2389705882rem + 2.9411764706vw, 1.25rem);
  left: clamp(8.125rem, -0.5367647059rem + 36.4705882353vw, 12rem);
  --hover-duration: 3.3s;
  --hover-lift: -6px;
}

.top-o-item-5 {
  width: clamp(2.8125rem, -0.6801470588rem + 14.7058823529vw, 4.375rem);
  bottom: clamp(0.9375rem, 0.2389705882rem + 2.9411764706vw, 1.25rem);
  right: clamp(6.25rem, -0.0367647059rem + 26.4705882353vw, 9.0625rem);
  --hover-duration: 2.8s;
  --hover-lift: -8px;
}

.top-o-item-6 {
  width: clamp(3.75rem, 0.9558823529rem + 11.7647058824vw, 5rem);
  top: clamp(0.9375rem, 0.2389705882rem + 2.9411764706vw, 1.25rem);
  right: clamp(0.3125rem, -0.6654411765rem + 4.1176470588vw, 0.75rem);
  --hover-duration: 3s;
  --hover-lift: -5px;
}

.top-o-item-7 {
  width: clamp(3.125rem, 0.3308823529rem + 11.7647058824vw, 4.375rem);
  top: clamp(8.125rem, 2.5367647059rem + 23.5294117647vw, 10.625rem);
  right: clamp(0.4375rem, -0.6801470588rem + 4.7058823529vw, 0.9375rem);
  --hover-duration: 2.5s;
  --hover-lift: -7px;
}

.top-o-item-8 {
  width: clamp(1.875rem, -0.9191176471rem + 11.7647058824vw, 3.125rem);
  bottom: clamp(0.9375rem, 0.2389705882rem + 2.9411764706vw, 1.25rem);
  right: clamp(0.5rem, -0.0588235294rem + 2.3529411765vw, 0.75rem);
  --hover-duration: 3.2s;
  --hover-lift: -6px;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
/*.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat;
}*/

/* Icons */
/*@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}*/
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: white;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: black;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: black;
  opacity: 0.75;
}

@keyframes slider-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.slider-wrap {
  overflow: hidden;
  position: relative;
  padding: 30px 0;
  opacity: 0;
}
.slider-wrap.is-slider-visible {
  animation: slider-fade-in 0.8s ease forwards;
}
@media (prefers-reduced-motion: reduce) {
  .slider-wrap.is-slider-visible {
    opacity: 1;
    animation: none;
  }
}
@media (min-width: 1200px) {
  .slider-wrap {
    display: none;
  }
}
.slider-wrap .slick-prev,
.slider-wrap .slick-next {
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 2px solid var(--keyColor-1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.slider-wrap .slick-prev::before,
.slider-wrap .slick-next::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  font-size: 0;
  opacity: 1;
}
.slider-wrap .slick-prev:hover, .slider-wrap .slick-prev:focus,
.slider-wrap .slick-next:hover,
.slider-wrap .slick-next:focus {
  background: var(--keyColor-2);
}
.slider-wrap .slick-prev.slick-disabled,
.slider-wrap .slick-next.slick-disabled {
  opacity: 0.35;
  cursor: default;
}
.slider-wrap .slick-prev {
  left: 8px;
}
.slider-wrap .slick-prev::before {
  border-left: 3px solid var(--keyColor-1);
  border-bottom: 3px solid var(--keyColor-1);
  transform: translate(-35%, -50%) rotate(45deg);
}
.slider-wrap .slick-next {
  right: 8px;
}
.slider-wrap .slick-next::before {
  border-right: 3px solid var(--keyColor-1);
  border-top: 3px solid var(--keyColor-1);
  transform: translate(-65%, -50%) rotate(45deg);
}

.slider {
  --slide-gap: 22px;
}
.slider .slick-list {
  margin: 0 calc(var(--slide-gap) / -2);
}
.slider .slick-slide {
  padding: 0 calc(var(--slide-gap) / 2);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.slider .slick-slide.slick-center {
  opacity: 1;
}
.slider img {
  border: 2px solid var(--keyColor-1);
  border-radius: 10px;
  overflow: hidden;
}
.slider .slick-slide {
  opacity: 1;
}

.side-contents {
  display: none;
  padding: 20px 20px;
}
@media (min-width: 1200px) {
  .side-contents {
    display: block;
    position: fixed;
    top: 0;
    z-index: 1;
    width: calc((min(100vw, var(--layout-max-width)) - var(--main-contents-width) - var(--column-gap) * 2) / 2);
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .side-contents::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 1200px) {
  .side-contents:first-child {
    left: max(0px, (100vw - var(--layout-max-width)) / 2);
  }
}
@media (min-width: 1200px) {
  .side-contents:last-child {
    right: max(0px, (100vw - var(--layout-max-width)) / 2);
  }
}

.left-banner {
  position: relative;
  margin: 50px 0px 100px;
}

.promotional-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0px 0 20px;
}
.promotional-images div {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--keyColor-1);
}

.product-information .heading-obj--1 {
  width: clamp(3.125rem, -2.4632352941rem + 23.5294117647vw, 5.625rem);
  top: clamp(3.75rem, -3.2352941176rem + 29.4117647059vw, 6.875rem);
  left: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
}
.product-information .heading-obj--2 {
  width: clamp(2.5rem, -0.2941176471rem + 11.7647058824vw, 3.75rem);
  top: clamp(0.9375rem, -1.1580882353rem + 8.8235294118vw, 1.875rem);
  left: clamp(4.375rem, -2.6102941176rem + 29.4117647059vw, 7.5rem);
}
.product-information .heading-obj--3 {
  width: clamp(1.25rem, -0.1470588235rem + 5.8823529412vw, 1.875rem);
  top: clamp(1.5625rem, -3.3272058824rem + 20.5882352941vw, 3.75rem);
  left: auto;
  right: clamp(7.5rem, -0.8823529412rem + 35.2941176471vw, 11.25rem);
}
.product-information .heading-obj--4 {
  width: clamp(1.875rem, 0.4779411765rem + 5.8823529412vw, 2.5rem);
  top: clamp(0.625rem, -3.5661764706rem + 17.6470588235vw, 2.5rem);
  right: clamp(4.375rem, 0.1838235294rem + 17.6470588235vw, 6.25rem);
}
.product-information .heading-obj--5 {
  width: clamp(2.5rem, -0.2941176471rem + 11.7647058824vw, 3.75rem);
  top: clamp(3.75rem, -3.2352941176rem + 29.4117647059vw, 6.875rem);
  right: clamp(1.25rem, -2.9411764706rem + 17.6470588235vw, 3.125rem);
}
.product-information .heading-obj--6 {
  width: clamp(0.75rem, 0.3308823529rem + 1.7647058824vw, 0.9375rem);
  top: clamp(1.25rem, -0.8455882353rem + 8.8235294118vw, 2.1875rem);
  left: clamp(1.875rem, -2.3161764706rem + 17.6470588235vw, 3.75rem);
}
.product-information .heading-obj--7 {
  width: clamp(0.75rem, 0.3308823529rem + 1.7647058824vw, 0.9375rem);
  top: clamp(4.6875rem, -5.7904411765rem + 44.1176470588vw, 9.375rem);
  right: clamp(5rem, -0.5882352941rem + 23.5294117647vw, 7.5rem);
}
.product-information .heading,
.product-information .tagline {
  position: relative;
  z-index: 1;
}

.products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(0.125rem, -1.6911764706rem + 7.6470588235vw, 0.9375rem);
  padding: 0 clamp(0.625rem, -0.7720588235rem + 5.8823529412vw, 1.25rem) 60px clamp(0.625rem, -0.0735294118rem + 2.9411764706vw, 0.9375rem);
  row-gap: calc(12px + 6px + 6px);
  align-items: stretch;
}

.product-item::after, .product-item .product-item-bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.product-item {
  --card-offset: 6px;
  --product-accent: var(--keyColor-1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(0.625rem, 0.3455882353rem + 1.1764705882vw, 0.75rem);
  margin-top: 6px;
  margin-left: 0px;
  margin-right: 12px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: transparent;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}
.product-item.is-product-visible {
  animation: contents-item-pop 0.6s cubic-bezier(0.34, 1.22, 0.64, 1) both;
}
.product-item:hover {
  --card-offset: 0px;
  --product-accent: var(--keyColor-1-hover);
}
.product-item:hover .catalog__button {
  background-color: var(--keyColor-1-hover);
}
.product-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 14px;
  background-color: #fff;
  border: 2px solid var(--product-accent);
  pointer-events: none;
  transform: translate(var(--card-offset), var(--card-offset));
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.product-item .product-item-bg {
  inset: 0;
}
.product-item .product-item-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background-color: var(--product-accent);
  transform: translate(12px, 12px);
  transition: background-color 0.3s ease;
}
.product-item .product-item-bg::after {
  content: "";
  position: absolute;
  bottom: -10px;
  height: 9px;
  width: calc(100% - 14px);
  left: 14px;
  transform: skewX(45deg);
  background-color: var(--product-accent);
  transition: bottom 0.3s ease, height 0.3s ease, width 0.3s ease, left 0.3s ease, background-color 0.3s ease;
}
.product-item:hover .product-item-bg::after {
  bottom: -9px;
  height: 12px;
  width: calc(100% - 12px);
  left: 11px;
}
.product-item::after {
  content: "";
  right: -10px;
  height: calc(100% - 15px);
  width: 9px;
  top: 14px;
  transform: skewY(45deg);
  background-color: var(--product-accent);
  transition: right 0.3s ease, height 0.3s ease, width 0.3s ease, top 0.3s ease, background-color 0.3s ease;
}
.product-item:hover::after {
  right: -10px;
  height: calc(100% - 16px);
  width: 12px;
  top: 12px;
}
.product-item > .product-item-image,
.product-item > .product-item-bottom {
  position: relative;
  z-index: 2;
  transform: translate(var(--card-offset), var(--card-offset));
  transition: transform 0.3s ease;
}
.product-item > .product-item-image {
  flex-shrink: 0;
}
.product-item > .product-item-bottom {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  margin-top: 8px;
  transform: translate(var(--card-offset), var(--card-offset)) rotate(0.05deg);
}
.product-item .product-item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 1/1;
}
.product-item .product-item-image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.product-item .brand {
  font-size: 14px;
  margin: 0 0 8px;
}
.product-item .brand span {
  line-height: 1;
  color: #fff;
  background-color: var(--brandColor);
  display: inline-block;
  border-radius: 5px;
  padding: 5px 10px;
}
.product-item .product-name {
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 10px;
  white-space: pre-line;
}
.product-item .price {
  font-size: 15px;
  margin: 0px 0px 5px;
  line-height: 1;
}
.product-item .copyright {
  font-size: 11px;
  line-height: 1;
  margin-bottom: 0px;
  text-align: left;
}

.buy__button::after {
  font-family: "Font Awesome 5 Free";
  content: "\f2d2";
  padding: 0;
  top: 50%;
  right: 5%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  font-size: clamp(0.6875rem, 0.2590206186rem + 1.8041237113vw, 1.125rem);
}

.tax {
  font-size: clamp(0.625rem, 0.3455882353rem + 1.1764705882vw, 0.75rem);
  margin-left: -7px;
}

.buy__button,
.catalog__button {
  margin-top: auto;
  flex-shrink: 0;
  text-align: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  display: inline-block;
  width: 100%;
  padding: clamp(0.5rem, 0.2205882353rem + 1.1764705882vw, 0.625rem) 0px;
  border: none;
  border-radius: 50rem;
  color: #fff;
  font-size: clamp(0.75rem, 0.1911764706rem + 2.3529411765vw, 1rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  background-color: var(--keyColor-1);
  cursor: pointer;
  outline: none;
  position: relative;
  transition: all 0.3s ease;
  letter-spacing: -1px;
}

.note {
  text-align: center;
  margin-top: 0px;
  transform: rotate(0.05deg);
}

.copyright {
  display: block;
  text-align: center;
  font-size: clamp(0.625rem, 0.3455882353rem + 1.1764705882vw, 0.75rem);
  margin-top: 20px;
  transform: rotate(0.05deg);
}

.how-to-play {
  display: block;
}
@media (min-width: 1200px) {
  .how-to-play {
    display: none;
  }
}
.how-to-play .heading-obj--1 {
  width: clamp(3.125rem, -1.0661764706rem + 17.6470588235vw, 5rem);
  top: clamp(3.75rem, -4.6323529412rem + 35.2941176471vw, 7.5rem);
  left: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
}
.how-to-play .heading-obj--2 {
  width: clamp(2.1875rem, 0.7904411765rem + 5.8823529412vw, 2.8125rem);
  top: clamp(0.3125rem, -3.8786764706rem + 17.6470588235vw, 2.1875rem);
  left: clamp(3.75rem, 2.3529411765rem + 5.8823529412vw, 4.375rem);
}
.how-to-play .heading-obj--3 {
  width: clamp(1.25rem, -0.1470588235rem + 5.8823529412vw, 1.875rem);
  top: clamp(1.5625rem, -2.6286764706rem + 17.6470588235vw, 3.4375rem);
  right: clamp(7.5rem, 1.9117647059rem + 23.5294117647vw, 10rem);
}
.how-to-play .heading-obj--4 {
  width: clamp(2.1875rem, 0.0919117647rem + 8.8235294118vw, 3.125rem);
  top: clamp(3.125rem, -3.8602941176rem + 29.4117647059vw, 6.25rem);
  right: clamp(3.125rem, 0.3308823529rem + 11.7647058824vw, 4.375rem);
}
.how-to-play .heading-obj--5 {
  width: clamp(1.875rem, -0.2205882353rem + 8.8235294118vw, 2.8125rem);
  top: clamp(1.25rem, -2.9411764706rem + 17.6470588235vw, 3.125rem);
  right: clamp(1.5625rem, 0.8639705882rem + 2.9411764706vw, 1.875rem);
}
.how-to-play .heading-obj--6 {
  width: clamp(0.75rem, 0.3308823529rem + 1.7647058824vw, 0.9375rem);
  top: clamp(1.5625rem, -1.9301470588rem + 14.7058823529vw, 3.125rem);
  left: clamp(1.875rem, -5.1102941176rem + 29.4117647059vw, 5rem);
}
.how-to-play .heading-obj--7 {
  width: clamp(0.75rem, 0.3308823529rem + 1.7647058824vw, 0.9375rem);
  top: clamp(5.625rem, -2.7573529412rem + 35.2941176471vw, 9.375rem);
  right: clamp(1.25rem, -4.3382352941rem + 23.5294117647vw, 3.75rem);
}
.how-to-play .heading,
.how-to-play .tagline {
  position: relative;
  z-index: 1;
}

.how-to-play-contents {
  padding: 0px 20px;
}

.youtube-inner {
  margin: 0 auto;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--keyColor-1);
}
@media (min-width: 768px) {
  .youtube-inner {
    border-radius: 15px;
    border: 3px solid var(--keyColor-1);
  }
}
.youtube-inner iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@keyframes contents-item-pop {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  48% {
    opacity: 1;
    transform: scale(1.03);
  }
  68% {
    transform: scale(0.98);
  }
  84% {
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.contents-item {
  position: relative;
  opacity: 0;
  transform: scale(0);
  transform-origin: center center;
}
.contents-item.is-contents-visible {
  animation: contents-item-pop 0.6s cubic-bezier(0.34, 1.22, 0.64, 1) both;
}
.contents-item {
  margin-bottom: 100px;
}
.contents-item:last-child {
  margin-bottom: 0;
}
.contents-item img {
  width: 100%;
}

.title {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: auto;
}
.title.aqua-beads {
  top: clamp(-3.125rem, -1.1029411765rem - 5.8823529412vw, -2.5rem);
  width: clamp(12.5rem, -0.4926470588rem + 54.7058823529vw, 18.3125rem);
}
.title.whipple {
  top: -75px;
  width: clamp(11.25rem, 0.0735294118rem + 47.0588235294vw, 16.25rem);
}
.title.aqua-nail {
  top: -60px;
  width: clamp(22.5rem, 19.7058823529rem + 11.7647058824vw, 23.75rem);
}
.title.aqua-beads-pc {
  top: clamp(-3.125rem, -3.125rem + 0vw, -3.125rem);
  width: clamp(12.5rem, -22.375rem + 46.5vw, 18.3125rem);
}
.title.whipple-pc {
  top: -75px;
  width: clamp(11.25rem, -18.75rem + 40vw, 15rem);
}

.contents-img-wrap {
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid var(--keyColor-1);
}
@media (min-width: 768px) {
  .contents-img-wrap {
    border-radius: 15px;
    border: 3px solid var(--keyColor-1);
  }
}

/*　ブレークポイント */
/* 背景画像　テキスト消去*/
/* フレックス*/
:root {
  --english-font: "Quicksand", sans-serif;
  --yugo-d: "游ゴシック体 Pr6N D", "Yu Gothic Pr6N D";
}

:root {
  --keyColor: #66ff00;
  --baseColor: #1d1d1d;
  --font-en: "Bebas Neue", sans-serif;
}

.modalArea {
  padding: 0 !important;
}

.ec-modal-window-box {
  width: 100%;
  margin-top: auto;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .f15 {
    font-size: 1.5em !important;
  }
}
.icon-cart {
  width: 10% !important;
  height: auto;
  aspect-ratio: auto 25/25;
  margin-top: -1.5% !important;
  padding: 0 1% 0 0;
  fill: #fff;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
}

.modalArea {
  visibility: hidden; /* displayではなくvisibility */
  opacity: 0;
  position: fixed;
  z-index: 9999; /* サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  padding: 0 !important;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30, 30, 30, 0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 88%;
  max-width: 480px;
  padding: 1rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  font-family: r-mplus, -apple-system, BlinkMacSystemFont, Sans-Serif !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.06em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-feature-settings: "palt" !important;
  font-feature-settings: "palt" !important;
}

.closeModal {
  position: absolute;
  top: 0rem;
  right: 1rem;
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(2.5rem, 3vw, 5rem);
}

.is-show {
  /* モーダル表示用クラス */
  visibility: visible;
  opacity: 1;
}

.modalContents .h1-title {
  color: #000;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 800;
  text-align: center;
  margin: 1rem auto;
  padding: 20px 0 15px;
  border-bottom: 1px solid #555;
}

@media screen and (max-width: 768px) {
  .modalContents .h1-title {
    padding: 20px 0 10px;
  }
}
.modalContents .box_shop_wrapper {
  width: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: auto;
}

.modalContents .box_shop {
  display: inline-block;
  width: 50%;
  text-align: center;
  padding: 1%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.modalContents .box_shop a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 2%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.modalContents img {
  border-radius: 0 !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: 95px !important;
}

@media screen and (max-width: 480px) {
  .modalContents img {
    height: 75px !important;
  }
}
.modalContents .p-info {
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  font-weight: 800 !important;
  text-align: center !important;
  color: #e84f67 !important;
  margin: 1rem auto 0.5rem;
}

/*===============================================
スマホ・タブレット  画面横幅767pxまで
===============================================*/
@media screen and (max-width: 768px) {
  .ec-modal-window-box {
    margin-top: auto;
    width: 100%;
  }
  .icon-cart {
    width: 8% !important;
  }
  .modalArea {
    position: fixed; /*fixed*/
  }
}
/*===============================================
スマホ  画面横幅639pxまで
===============================================*/
/* /@media */
.fv-main img {
  opacity: 0;
  filter: blur(12px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 58%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 58%, transparent 78%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0%;
  mask-size: 0%;
  animation: fv-main-reveal 2000ms cubic-bezier(0.4, 0.12, 0.55, 0.93) forwards;
}

@keyframes fv-main-reveal {
  0% {
    opacity: 0;
    filter: blur(12px);
    -webkit-mask-size: 0%;
    mask-size: 0%;
  }
  80% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    -webkit-mask-size: 300%;
    mask-size: 300%;
    filter: blur(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fv-main img {
    animation: none;
    opacity: 1;
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.product-heading.is-reveal {
  opacity: 0;
  transform: translateY(-80px);
  transition: transform 800ms linear(0 0%, 0.151 8.1%, 0.223 11.7%, 0.304 15.2%, 0.392 18.4%, 0.497 21.6%, 0.619 24.8%, 0.752 27.9%, 0.999 33.3%, 0.842 37.1%, 0.79 38.6%, 0.748 40%, 0.714 41.4%, 0.691 42.7%, 0.677 44%, 0.673 44.7%, 0.672 45.3%, 0.676 46.5%, 0.69 47.8%, 0.712 49.1%, 0.743 50.4%, 0.824 53%, 0.999 57.7%, 0.927 60%, 0.883 61.8%, 0.867 62.7%, 0.856 63.6%, 0.85 64.4%, 0.848 65.3%, 0.849 66.1%, 0.855 67%, 0.865 67.9%, 0.879 68.8%, 0.911 70.5%, 0.999 74.5%, 0.97 76.2%, 0.953 77.5%, 0.943 78.8%, 0.94 80.2%, 0.942 81.4%, 0.95 82.7%, 0.989 86.9%, 1 88.2%, 0.99 90%, 0.987 91.9%, 0.989 93.5%, 0.998 97.5%, 1 100%), opacity 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-heading.is-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.product-image img.is-reveal {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-image img.is-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
}

.product-feaure img.is-reveal {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.product-feaure img.is-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
}

.story.is-reveal {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.story.is-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
}

.tsuta-left img {
  transform-origin: bottom left;
}

.tsuta-right img {
  transform-origin: bottom right;
}

.rustling-left img.is-rustling {
  animation: tsuta-rustle-left var(--tsuta-rustle-duration, 480ms) ease-in-out;
}

.rustling-right img.is-rustling {
  animation: tsuta-rustle-right var(--tsuta-rustle-duration, 480ms) ease-in-out;
}

@keyframes tsuta-rustle-left {
  0%, 100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  18% {
    transform: rotate(1.1deg) translate3d(1px, 0, 0);
  }
  36% {
    transform: rotate(-0.9deg) translate3d(-1px, 1px, 0);
  }
  54% {
    transform: rotate(0.7deg) translate3d(0.5px, -0.5px, 0);
  }
  72% {
    transform: rotate(-0.8deg) translate3d(-0.5px, 0, 0);
  }
  90% {
    transform: rotate(0.4deg) translate3d(0, 0.5px, 0);
  }
}
@keyframes tsuta-rustle-right {
  0%, 100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  18% {
    transform: rotate(-1.1deg) translate3d(-1px, 0, 0);
  }
  36% {
    transform: rotate(0.9deg) translate3d(1px, 1px, 0);
  }
  54% {
    transform: rotate(-0.7deg) translate3d(-0.5px, -0.5px, 0);
  }
  72% {
    transform: rotate(0.8deg) translate3d(0.5px, 0, 0);
  }
  90% {
    transform: rotate(-0.4deg) translate3d(0, 0.5px, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tsuta-left img.is-rustling,
  .tsuta-right img.is-rustling,
  .bottom-left img.is-rustling,
  .bottom-right img.is-rustling {
    animation: none;
  }
}
.otakakra {
  display: block;
}

.otakakra__image {
  position: relative;
  z-index: 1;
  display: block;
  width: 97%;
  margin: 0 auto;
  transform-origin: center center;
  animation: otakakra-pulse 2s ease-in-out infinite;
  animation-play-state: paused;
}

.otakakra__image.is-reveal {
  opacity: 0;
  filter: blur(12px);
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.otakakra__image.is-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  animation-play-state: running;
}

@keyframes otakakra-pulse {
  0%, 100% {
    transform: scale(0.96);
  }
  50% {
    transform: scale(1);
  }
}
.otakakra__sparkles {
  position: absolute;
  top: 0;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  height: 100%;
  display: block;
}

.otakakra__sparkle {
  position: absolute;
  width: clamp(14px, 2.2vw, 20px);
  height: clamp(14px, 2.2vw, 20px);
  pointer-events: none;
}
.otakakra__sparkle::before, .otakakra__sparkle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #fff 0%, #fffef0 50%, #fff 100%);
  filter: drop-shadow(0 0 5px rgba(255, 255, 220, 0.95));
}
.otakakra__sparkle {
  /* 縦長の菱形（よく見る漫画風キラキラ） */
}
.otakakra__sparkle::before {
  width: 28%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.otakakra__sparkle::after {
  width: 100%;
  height: 28%;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.otakakra__sparkle {
  animation: otakakra-sparkle 2.2s ease-in-out infinite;
}
.otakakra__sparkle:nth-child(1) {
  top: 0%;
  left: 3%;
  animation-duration: 1.9s;
  animation-delay: 0s;
}
.otakakra__sparkle:nth-child(2) {
  top: 10%;
  left: 86%;
  animation-duration: 2.4s;
  animation-delay: 0.5s;
}
.otakakra__sparkle:nth-child(3) {
  top: 48%;
  left: 5%;
  animation-duration: 2.1s;
  animation-delay: 1.1s;
}
.otakakra__sparkle:nth-child(4) {
  top: 52%;
  left: 90%;
  animation-duration: 2.6s;
  animation-delay: 0.3s;
}
.otakakra__sparkle:nth-child(5) {
  top: 88%;
  left: 18%;
  width: clamp(11px, 1.8vw, 16px);
  height: clamp(11px, 1.8vw, 16px);
  animation-duration: 1.7s;
  animation-delay: 0.8s;
}
.otakakra__sparkle:nth-child(6) {
  top: 86%;
  left: 82%;
  width: clamp(11px, 1.8vw, 16px);
  height: clamp(11px, 1.8vw, 16px);
  animation-duration: 2.3s;
  animation-delay: 1.4s;
}
.otakakra__sparkle:nth-child(7) {
  top: 20%;
  left: 1%;
  animation-duration: 2s;
  animation-delay: 0.6s;
}
.otakakra__sparkle:nth-child(8) {
  top: 72%;
  left: 92%;
  animation-duration: 2.5s;
  animation-delay: 1s;
}

@keyframes otakakra-sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.35);
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 0.35;
    transform: scale(0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  .otakakra__image {
    animation: none;
  }
  .otakakra__sparkle {
    animation: none;
    opacity: 0.6;
  }
}
footer {
  position: relative;
  max-width: 550px;
  margin: 0 auto;
  background-repeat: repeat-y;
  background-position: top center;
}

.kumo {
  display: block;
  height: 15px;
  background-size: auto 15px;
  background-image: url(../img/kumo.png);
  background-repeat: repeat-x;
  width: 100%;
  position: relative;
  margin-bottom: -1px;
}
@media (min-width: 1024px) {
  .kumo {
    height: 25px;
    background-size: auto 25px;
  }
}

.footer-wrapper {
  background-color: #fff;
  width: 100%;
}

.banner {
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0;
  background-color: #fff;
  text-align: center;
}

.banner {
  width: 100%;
  max-width: 300px;
}
.banner a {
  display: block;
  margin: 30px auto;
}
.banner .aqua-beads-banner {
  width: 90%;
}
.banner .whipple-banner {
  width: 80%;
}
.banner .puzzle {
  margin: 50px auto 30px;
}

.footer-text {
  max-width: 500px;
  text-align: left;
  margin: 0 auto;
  padding: 10px 20px;
  font-size: clamp(0.875rem, 0.5955882353rem + 1.1764705882vw, 1rem);
  transform: rotate(0.05deg);
}
.footer-text a {
  color: var(--keyColor-1);
}

#sns_box {
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0;
  background-color: #fff;
  text-align: center;
}

.box_bnr {
  width: 100%;
  margin: 2rem auto;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .box_bnr {
    margin: 3% auto 5%;
  }
}
.box_bnr img {
  width: 90%;
  max-width: 580px;
  margin: auto;
}

.box_bnr span {
  display: block;
  color: #e73d90;
  font-weight: bold;
  text-decoration: underline;
  -webkit-transform: rotate(0.05deg);
  transform: rotate(0.05deg);
}

@media screen and (max-width: 767px) {
  .box_bnr span {
    font-size: 0.7rem;
  }
}
.btn_box {
  width: 100%;
  margin: 2rem auto;
}

@media screen and (max-width: 767px) {
  .btn_box {
    margin: 1rem auto 2rem;
  }
}
.btn_box img {
  width: 80px;
  margin: 0 auto;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: none;
}

@media screen and (max-width: 767px) {
  .btn_box img {
    width: 16%;
    padding: 2%;
  }
}
.copyright {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 10px 0;
}

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