@charset "UTF-8";
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}
@media screen and (min-width: 767px) {
  .sp {
    display: none;
  }
}
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  color: #fff;
  transition: 0.4s;
}

::-webkit-scrollbar {
  display: none;
}

html {
  scroll-behavior: smooth;
}

img {
  width: 100%;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background: #000;
}

#loading {
  width: 100%;
  height: 110%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  transition: 0.4s;
  z-index: 9999;
}
#loading.active {
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  #loading.active.on {
    opacity: 1;
  }
}

#hanabira-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* 下の要素がクリックできるようにする */
  z-index: 9999;
}

.totop {
  width: 9.16vw;
  display: block;
  position: fixed;
  bottom: 1vw;
  right: 2vw;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .totop {
    width: 25vw;
    right: 3vw;
  }
  .totop.end {
    bottom: 20vw;
  }
}
.totop.on {
  opacity: 1;
  pointer-events: all;
}
@media screen and (min-width: 767px) {
  .totop:hover {
    transform: rotate(-10deg);
  }
}

header .logo {
  z-index: 2;
  width: 14.68vw;
  position: absolute;
  left: 3vw;
  top: 2vw;
}
@media screen and (max-width: 767px) {
  header .logo {
    width: 30vw;
    top: 6vw;
  }
}
header .local {
  z-index: 2;
  position: absolute;
  top: 3.2vw;
  right: 7.6vw;
}
@media screen and (max-width: 767px) {
  header .local {
    right: 0vw;
  }
}
@media screen and (max-width: 767px) {
  header .local .language {
    position: absolute;
    right: 13vw;
    top: 3vw;
    width: 21vw;
  }
}
header .local .language span {
  font-size: 1vw;
  position: relative;
  padding-left: 1.2vw;
  font-weight: bold;
  cursor: pointer;
}
header .local .language span::before {
  content: "";
  width: 1vw;
  height: 1vw;
  background: url(./img/lang_icon.webp) no-repeat center center/contain;
  position: absolute;
  top: 0.3vw;
  left: 0;
}
@media screen and (max-width: 767px) {
  header .local .language span::before {
    width: 3vw;
    height: 3vw;
    top: 1vw;
  }
}
@media screen and (min-width: 767px) {
  header .local .language span:hover {
    opacity: 0.5;
  }
}
@media screen and (max-width: 767px) {
  header .local .language span {
    font-size: 3vw;
    padding-left: 4vw;
  }
}
header .local .local_inner {
  position: relative;
  opacity: 0;
  pointer-events: none;
  margin-top: 0.5vw;
}
@media screen and (max-width: 767px) {
  header .local .local_inner {
    position: absolute;
    top: 10vw;
    right: 16vw;
  }
}
header .local .local_inner.on {
  opacity: 1;
  pointer-events: all;
}
header .local .local_inner a {
  color: #3c2a3e;
  background: #fff;
  border: 1px solid #9e8e56;
  font-size: 1.2vw;
  text-align: center;
  padding: 0.3vw;
  display: block;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  header .local .local_inner a {
    font-size: 3.4vw;
    padding: 0.8vw;
  }
}
@media screen and (min-width: 767px) {
  header .local .local_inner a:hover {
    color: #9e8e56;
  }
}
header .local .local_inner a.active {
  pointer-events: none;
  background: #000;
  color: #fff;
}
header .hamberger {
  z-index: 888;
  width: 4.47vw;
  position: fixed;
  top: 2.2vw;
  right: 2vw;
  cursor: pointer;
  filter: drop-shadow(2px 2px 2px #000);
}
@media screen and (min-width: 767px) {
  header .hamberger:hover {
    opacity: 0.5;
  }
}
@media screen and (max-width: 767px) {
  header .hamberger {
    width: 11vw;
    top: 5vw;
  }
}

.menu {
  width: 43vw;
  height: 100vh;
  background: url(./img/menu_bg.webp) no-repeat right center/contain;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transform: translate(10%, 0%);
  transition: 0.6s;
  transition-timing-function: cubic-bezier(0.648, 0.244, 0, 1.287);
}
@media screen and (max-width: 767px) {
  .menu {
    background: url(./img/menu_bg_sp.webp) no-repeat center center/contain, url(./img/menu_bg_sp_black.webp) no-repeat center center/cover;
    width: 100%;
    height: 100svh;
    transition: 0.4s;
    transition-timing-function: ease-in-out;
    transform: translate(10%, 0%);
  }
}
.menu.on {
  opacity: 1;
  pointer-events: all;
  transform: translate(0%, 0%);
}
.menu .menu_close {
  position: absolute;
  top: 2vw;
  right: 2vw;
  width: 2.39vw;
  cursor: pointer;
  z-index: 9;
}
@media screen and (max-width: 767px) {
  .menu .menu_close {
    width: 7vw;
    height: 7vw;
    top: 7vw;
    right: 12vw;
  }
}
@media screen and (min-width: 767px) {
  .menu .menu_close:hover {
    opacity: 0.5;
  }
}
.menu .menu_close img {
  filter: brightness(1000);
}
.menu .inner {
  width: 52vh;
  padding: 4vw;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .menu .inner {
    padding: 6vh;
    width: auto;
  }
}
.menu .inner .menu_list li {
  position: relative;
  padding-left: 2vw;
  margin: 0.5vw 0;
}
@media screen and (max-width: 767px) {
  .menu .inner .menu_list li {
    padding-left: 5vw;
    margin: 4vw 0;
  }
}
.menu .inner .menu_list li::before {
  content: "";
  background: url(./img/menu_icon.webp) no-repeat center center/contain;
  width: 1vw;
  height: 2vw;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  .menu .inner .menu_list li::before {
    width: 3.5vw;
    height: 3.5vw;
    top: 1.5vw;
  }
}
.menu .inner .menu_list li a {
  font-size: 2.5vh;
  font-family: "Noto Serif JP", serif;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.menu .inner .menu_list li a::before {
  content: "";
  background: #9e8e56;
  width: 0;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .menu .inner .menu_list li a {
    font-size: 4vw;
  }
}
@media screen and (min-width: 767px) {
  .menu .inner .menu_list li a:hover {
    color: #9e8e56;
  }
  .menu .inner .menu_list li a:hover span {
    color: #9e8e56;
  }
  .menu .inner .menu_list li a:hover::before {
    width: 100%;
  }
}
.menu .inner .menu_list li a span {
  display: block;
  font-size: 1.6vh;
  font-family: "Noto Serif JP", serif;
}
@media screen and (max-width: 767px) {
  .menu .inner .menu_list li a span {
    font-size: 3.2vw;
  }
}
.menu .inner .menu_list.english li {
  margin: 2vw 0;
}
@media screen and (max-width: 767px) {
  .menu .inner .menu_list.english li {
    margin: 7vw 0;
  }
}
.menu .inner .link_list {
  margin-top: 1vw;
  border-top: 1px solid #fff;
  padding-top: 0.5vw;
}
@media screen and (max-width: 767px) {
  .menu .inner .link_list {
    padding-top: 0vw;
    margin-top: 0vw;
  }
}
.menu .inner .link_list li {
  padding-left: 1.5vw;
  position: relative;
  margin: 0.5vw 0;
}
@media screen and (max-width: 767px) {
  .menu .inner .link_list li {
    padding-left: 4vw;
    margin: 1vh 0;
  }
}
.menu .inner .link_list li::before {
  content: "";
  background: url(./img/icon.webp) no-repeat center center/contain;
  width: 1vw;
  height: 1.4vw;
  position: absolute;
  left: 0;
  top: 0;
  filter: brightness(100);
}
@media screen and (max-width: 767px) {
  .menu .inner .link_list li::before {
    width: 3.5vw;
    height: 3.5vw;
    top: 2vw;
  }
}
.menu .inner .link_list li a {
  font-size: 2vh;
  font-weight: bold;
  position: relative;
  display: inline-block;
}
.menu .inner .link_list li a::before {
  content: "";
  background: #9e8e56;
  width: 0;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .menu .inner .link_list li a {
    font-size: 4.2vw;
  }
}
@media screen and (min-width: 767px) {
  .menu .inner .link_list li a:hover {
    color: #9e8e56;
  }
  .menu .inner .link_list li a:hover span {
    color: #9e8e56;
  }
  .menu .inner .link_list li a:hover::before {
    width: 100%;
  }
}
.menu .inner p {
  font-size: 2.4vh;
  font-family: "Noto Serif JP", serif;
  font-weight: bold;
  text-align: center;
  border-top: 1px solid #fff;
  padding-top: 1vw;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  .menu .inner p {
    margin-top: 2vh;
    padding-top: 2vh;
    font-size: 4vw;
  }
}
.menu .inner .logo_list {
  display: grid;
  gap: 2vw;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 50%;
  margin: 0 auto;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  .menu .inner .logo_list {
    margin-top: 6vw;
    gap: 10vw;
    width: 60%;
  }
}
.menu .inner .logo_list li a {
  display: block;
}
@media screen and (min-width: 767px) {
  .menu .inner .logo_list li a:hover {
    opacity: 0.5;
  }
}

#mv {
  position: relative;
  background: url(./img/mv_bg.webp) no-repeat center top/cover;
}
@media screen and (max-width: 767px) {
  #mv {
    background: url(./img/mv_bg_sp.webp) no-repeat center top/cover;
    overflow: hidden;
  }
}
#mv .inner {
  width: 72.91vw;
  margin: 0 auto;
  padding: 6vw 0;
}
@media screen and (max-width: 767px) {
  #mv .inner {
    width: 90%;
    height: 100svh;
  }
}
#mv .inner .illust {
  width: 50vw;
  position: absolute;
  left: 2vw;
  bottom: 0;
  opacity: 0;
  filter: drop-shadow(0 0 1vw #fff);
  animation: mv_fuwafuwa 3s ease-in-out infinite;
}
@media screen and (max-width: 767px) {
  #mv .inner .illust {
    width: 105%;
    position: static;
    margin-left: -5%;
    margin-top: 2vw;
  }
}
#mv .inner .illust.on {
  opacity: 1;
  transform: translateY(0%);
}
#mv .inner .text {
  text-align: center;
  width: 35.93vw;
  margin-left: auto;
  margin-top: 7vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .text {
    width: 90%;
    margin: 0 auto;
    margin-top: 5vw;
  }
}
#mv .inner .text h1 {
  opacity: 0;
  transform: translateY(10%);
}
#mv .inner .text h1.on {
  opacity: 1;
  transform: translateY(0%);
}
#mv .inner .text h1 span {
  display: block;
  margin-top: 1vw;
}
#mv .inner .text h1 span img {
  width: 21.66vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .text h1 span img {
    width: 70%;
  }
}
#mv .inner .text .date {
  margin-top: 1vw;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(-10%);
}
@media screen and (max-width: 767px) {
  #mv .inner .text .date {
    margin-top: 3vw;
  }
}
#mv .inner .text .date.on {
  opacity: 1;
  transform: translateY(0%);
}
#mv .inner .text .date img {
  width: 33.54vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .text .date img {
    width: 100%;
    transform: scale(1.1);
  }
}
#mv .arrow {
  width: 0.93vw;
  position: absolute;
  top: 36vw;
  left: 1vw;
}
@media screen and (max-width: 767px) {
  #mv .arrow {
    display: none;
  }
}
#mv .arrow span:nth-child(1) {
  animation: flash 1.5s ease-in-out infinite;
}
#mv .arrow span:nth-child(2) {
  animation: flash 1.5s ease-in-out 0.25s infinite;
}
#mv .arrow span:nth-child(3) {
  animation: flash 1.5s ease-in-out 0.5s infinite;
}
#mv .kumo1 {
  width: 16.56vw;
  position: absolute;
  top: 42.6vw;
  right: 32vw;
  animation: fuwafuwa 3s ease-in-out infinite;
}
@media screen and (max-width: 767px) {
  #mv .kumo1 {
    animation: fuwafuwa 3s ease-in-out -1.5s infinite;
    width: 50vw;
    top: 91vw;
    right: 52vw;
  }
}
#mv .kumo2 {
  width: 25.41vw;
  position: absolute;
  top: 40vw;
  right: 3vw;
  animation: fuwafuwa 3s ease-in-out -1.5s infinite;
}
@media screen and (max-width: 767px) {
  #mv .kumo2 {
    width: 60vw;
    top: 85.6vw;
    right: -3vw;
  }
}
#mv .kumo3 {
  width: 12.29vw;
  position: absolute;
  top: 22vw;
  right: 2vw;
  animation: fuwafuwa 3s ease-in-out -3s infinite;
}
@media screen and (max-width: 767px) {
  #mv .kumo3 {
    top: 123vw;
    right: 76vw;
    width: 18vw;
  }
}
#mv .kumo4 {
  display: none;
}
@media screen and (max-width: 767px) {
  #mv .kumo4 {
    display: block;
    width: 17vw;
    position: absolute;
    top: 123vw;
    left: 75vw;
    animation: fuwafuwa 3s ease-in-out -1.5s infinite;
  }
}

#about {
  background: url(./img/about_bg.webp) no-repeat center top/cover;
  position: relative;
  scroll-margin-top: -5vw;
}
@media screen and (max-width: 767px) {
  #about {
    background: url(./img/about_bg_sp.webp) no-repeat center top/cover;
  }
  #about::before {
    content: "";
    background: url(./img/info_arrow.webp) no-repeat center center/contain;
    width: 8vw;
    height: 9vw;
    position: absolute;
    bottom: 4vw;
    left: 50%;
    transform: translateX(-50%);
    animation: flash 1.5s ease-in-out infinite;
    filter: brightness(0.5);
  }
}
#about .inner {
  width: 78vw;
  margin: 0 auto;
  padding: 0vw 0 10vw;
}
@media screen and (max-width: 767px) {
  #about .inner {
    width: 100%;
    padding: 0vw 0 20vw;
  }
}
#about .inner .content {
  padding-top: 15vw;
  text-align: center;
  position: relative;
}
#about .inner .content::before {
  content: "";
  background: url(./img/about_text_bg.webp) no-repeat center center/contain;
  width: 78vw;
  height: 30vw;
  position: absolute;
  bottom: -4vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  clip-path: inset(0 100% 0 0);
  transition: 1s;
}
@media screen and (max-width: 767px) {
  #about .inner .content::before {
    width: 100%;
    height: 30%;
    bottom: 56%;
  }
}
#about .inner .content.on::before {
  clip-path: inset(0 0% 0 0);
}
#about .inner .content h2 {
  width: 53vw;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  transform: translateY(10%);
}
#about .inner .content h2.on {
  opacity: 1;
  transform: translateY(0%);
}
@media screen and (max-width: 767px) {
  #about .inner .content h2 {
    width: 80%;
    margin-top: 10vw;
  }
  #about .inner .content h2.english {
    margin-top: 5vw;
  }
}
#about .inner .content p {
  width: 45vw;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  transform: translateY(10%);
}
#about .inner .content p.on {
  opacity: 1;
  transform: translateY(0%);
}
@media screen and (max-width: 767px) {
  #about .inner .content p {
    margin-top: 10vw;
    width: 55%;
  }
}
#about .inner .content p.english {
  width: 55vw;
  margin-top: -3vw;
}
@media screen and (max-width: 767px) {
  #about .inner .content p.english {
    width: 57%;
    margin-top: 10vw;
  }
}
#about .kumo1 {
  width: 10vw;
  position: absolute;
  top: 12.6vw;
  right: 82vw;
  animation: fuwafuwa 3s ease-in-out infinite;
}
#about .kumo2 {
  width: 12vw;
  position: absolute;
  top: 42vw;
  right: 10vw;
  animation: fuwafuwa 3s ease-in-out -1.5s infinite;
}

#chara {
  position: relative;
  overflow: hidden;
  padding: 6vw 0;
}
@media screen and (max-width: 767px) {
  #chara {
    padding: 14vw 0;
  }
}
#chara.english {
  padding: 4.2vw 0;
}
@media screen and (max-width: 767px) {
  #chara.english {
    padding: 3vw 0 13vw;
  }
}
#chara::before {
  content: "";
  background: url(./img/chara_bg_left.webp) no-repeat center center/contain;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transform: translateX(-100%);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.479, 1.461, 0.459, 0.062);
}
@media screen and (max-width: 767px) {
  #chara::before {
    background: url(./img/chara_bg_left_sp.webp) no-repeat center center/contain;
  }
}
#chara::after {
  content: "";
  background: url(./img/chara_bg_right.webp) no-repeat center center/contain;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  transform: translateX(100%);
  transition: 1s;
  transition-timing-function: cubic-bezier(0.479, 1.461, 0.459, 0.062);
}
@media screen and (max-width: 767px) {
  #chara::after {
    background: url(./img/chara_bg_right_sp.webp) no-repeat center center/contain;
  }
}
#chara.on::before, #chara.on::after {
  transform: translateX(0%);
}
#chara .inner {
  width: 65vw;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  #chara .inner {
    width: 95%;
  }
}
#chara .inner .name {
  width: 23.95vw;
  padding-top: 32vw;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  #chara .inner .name {
    width: 70%;
    padding-top: 0;
  }
}
#chara .inner .name.on {
  opacity: 1;
}
#chara .inner .text {
  width: 30.75vw;
  padding: 1vw;
  margin-top: 1vw;
  background: rgba(0, 0, 0, 0.6862745098);
  font-size: 1.04vw;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  line-height: 1.6;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  #chara .inner .text {
    width: 93%;
    font-size: 3.6vw;
    padding: 3vw;
  }
}
#chara .inner .text.on {
  opacity: 1;
}
#chara .inner .illust {
  width: 35.93vw;
  position: absolute;
  top: -1vw;
  right: -2vw;
  opacity: 0;
  animation: mv_fuwafuwa 3s ease-in-out infinite;
}
@media screen and (max-width: 767px) {
  #chara .inner .illust {
    width: 100%;
    position: static;
  }
}
#chara .inner .illust.on {
  opacity: 1;
}
#chara .inner .illustrator {
  font-size: 1.04vw;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  position: absolute;
  bottom: -1vw;
  right: -8vw;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  #chara .inner .illustrator {
    font-size: 3.6vw;
    position: static;
    text-align: right;
    margin-top: 1vw;
  }
}
#chara .inner .illustrator.on {
  opacity: 1;
}

.endless {
  width: 100%;
  overflow: hidden;
  background-color: #000;
  padding: 1vw 0 1vw;
}
@media screen and (max-width: 767px) {
  .endless {
    margin-top: -10vw;
  }
}
.endless .content {
  display: flex;
  width: 270%;
  animation: scroll-right 30s linear infinite;
}
@media screen and (max-width: 767px) {
  .endless .content {
    width: 600%;
    padding: 1vw 0 2vw;
  }
}
.endless .content img {
  width: 50%;
  height: auto;
}

#goods {
  background: url(./img/goods_bg.webp) no-repeat center center/cover;
  scroll-margin-top: -2vw;
}
@media screen and (max-width: 767px) {
  #goods {
    background: url(./img/goods_bg_sp.webp) no-repeat center center/cover;
  }
}
#goods .inner {
  width: 52.6vw;
  margin: 0 auto;
  padding: 6.77vw 0 15vw;
}
@media screen and (max-width: 767px) {
  #goods .inner {
    width: 90%;
    padding: 15vw 0 40vw;
  }
}
#goods .inner h3 {
  width: 20.83vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #goods .inner h3 {
    width: 70%;
  }
}
#goods .inner .goods_lineup {
  display: grid;
  gap: 1vw;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 3vw;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3vw;
    margin-top: 6vw;
  }
}
#goods .inner .goods_lineup li {
  background: url(./img/goods_item_bg.webp) no-repeat center center/contain;
  width: 15.93vw;
  height: 27.45vw;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10%);
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li {
    width: 100%;
    height: 70vw;
  }
}
#goods .inner .goods_lineup li.on:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}
#goods .inner .goods_lineup li.on:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}
#goods .inner .goods_lineup li.on:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}
#goods .inner .goods_lineup li.on:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
#goods .inner .goods_lineup li.on:nth-child(5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}
#goods .inner .goods_lineup li.on:nth-child(6) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
@media screen and (min-width: 767px) {
  #goods .inner .goods_lineup li:hover {
    opacity: 0.7 !important;
  }
}
#goods .inner .goods_lineup li .img {
  width: 90%;
  margin: 0 auto;
  padding-top: 1vw;
}
#goods .inner .goods_lineup li .content {
  padding: 0 1vw;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li .content {
    padding: 0 3vw;
  }
}
#goods .inner .goods_lineup li .name {
  font-size: 0.93vw;
  padding: 1vw 0 4vw;
  color: #3c2a3e;
  font-weight: bold;
  position: relative;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li .name {
    font-size: 3.6vw;
    padding: 2vw 0 2vw;
  }
}
#goods .inner .goods_lineup li .name::before {
  content: "";
  background: url(./img/goods_item_line.webp) no-repeat center center/contain;
  width: 100%;
  height: 1vw;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
#goods .inner .goods_lineup li .red {
  background: #a00000;
  font-weight: bold;
  font-size: 0.93vw;
  padding: 0.2vw;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li .red {
    font-size: 3vw;
    padding: 0.5vw 1vw;
  }
}
#goods .inner .goods_lineup li .number {
  background: #9e8e56;
  font-weight: bold;
  font-size: 0.93vw;
  padding: 0.2vw;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li .number {
    font-size: 3vw;
    padding: 0.5vw 1vw;
  }
}
#goods .inner .goods_lineup li .price {
  font-size: 1.25vw;
  color: #3c2a3e;
  font-weight: 900;
  margin-top: 0.5vw;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li .price {
    font-size: 4vw;
  }
}
#goods .inner .goods_lineup li .price span {
  font-weight: normal;
  font-size: 0.66vw;
  color: #3c2a3e;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li .price span {
    font-size: 2.6vw;
  }
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup li .float {
    position: absolute;
    left: 3vw;
    bottom: 3vw;
  }
}
#goods .inner .goods_lineup.english li .name {
  font-size: 1.14vw;
}
@media screen and (max-width: 767px) {
  #goods .inner .goods_lineup.english li .name {
    font-size: 3.6vw;
  }
}

#bonus {
  background: url(./img/bonus_bg.webp) no-repeat center center/103%;
  position: relative;
  z-index: 2;
  margin-top: -20vw;
  scroll-margin-top: -15vw;
}
@media screen and (max-width: 767px) {
  #bonus {
    background: url(./img/bonus_bg_sp.webp) no-repeat center center/cover;
    margin-top: -30vw;
  }
}
#bonus .inner {
  width: 52.6vw;
  margin: 0 auto;
  padding: 15vw 0 15vw;
}
@media screen and (max-width: 767px) {
  #bonus .inner {
    width: 90%;
    padding: 20vw 0 30vw;
  }
}
#bonus .inner h3 {
  width: 16.66vw;
  margin: 0 auto;
  padding-top: 5vw;
}
@media screen and (max-width: 767px) {
  #bonus .inner h3 {
    width: 48.59vw;
  }
}
#bonus .inner h3.english {
  width: 24vw;
}
@media screen and (max-width: 767px) {
  #bonus .inner h3.english {
    width: 75vw;
  }
}
#bonus .inner .content {
  background: url(./img/bonus_text_bg.webp) no-repeat center center/cover;
  padding: 5.2vw 2vw 2vw;
  text-align: center;
  margin-top: 2vw;
}
@media screen and (max-width: 767px) {
  #bonus .inner .content {
    background: url(./img/bonus_text_bg_sp.webp) no-repeat center center/cover;
    padding: 13vw 4vw;
    margin-top: 7vw;
  }
}
#bonus .inner .content p {
  color: #3c2a3e;
  font-size: 1.45vw;
  font-weight: bold;
  line-height: 1.8;
  opacity: 0;
  transform: translateY(10%);
}
@media screen and (max-width: 767px) {
  #bonus .inner .content p {
    font-size: 4.6vw;
  }
}
#bonus .inner .content p.on {
  opacity: 1;
  transform: translateY(0);
}
#bonus .inner .content p strong {
  color: #9e8e56;
}
#bonus .inner .content p span {
  background: #9e8e56;
  color: #fff;
  display: inline-block;
  margin-right: 0.5vw;
}
#bonus .inner .content img {
  width: 80%;
  margin-top: 2vw;
  opacity: 0;
  transform: scale(1.1);
}
#bonus .inner .content img.on {
  opacity: 1;
  transform: scale(1);
}
#bonus .inner .content ul {
  margin-top: 1vw;
  opacity: 0;
  transform: translateY(10%);
}
@media screen and (max-width: 767px) {
  #bonus .inner .content ul {
    margin-top: 2vw;
  }
}
#bonus .inner .content ul.on {
  opacity: 1;
  transform: translateY(0);
}
#bonus .inner .content ul li {
  color: #9e8e56;
  font-size: 1.04vw;
  font-weight: bold;
  text-align: left;
  position: relative;
  padding-left: 1.6vw;
}
@media screen and (max-width: 767px) {
  #bonus .inner .content ul li {
    font-size: 3vw;
    padding-left: 6vw;
    line-height: 1.6;
  }
}
#bonus .inner .content ul li::before {
  content: "";
  width: 1.04vw;
  height: 1.04vw;
  background: url(./img/icon.webp) no-repeat center center/contain;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  #bonus .inner .content ul li::before {
    width: 4.2vw;
    height: 4.2vw;
  }
}

#guide {
  background: url(./img/guide_bg.webp) no-repeat center top/100%;
  padding: 10vw 0 25vw;
  position: relative;
  z-index: 0;
  margin-top: -25vw;
  scroll-margin-top: -15vw;
}
@media screen and (max-width: 767px) {
  #guide {
    background: url(./img/guide_bg_sp.webp) no-repeat center center/cover;
    margin-top: -30vw;
    scroll-margin-top: -20vw;
  }
}
#guide .inner {
  width: 52.6vw;
  margin: 0 auto;
  padding: 10vw 0 5vw;
}
@media screen and (max-width: 767px) {
  #guide .inner {
    width: 90%;
    padding: 20vw 0 5vw;
  }
}
#guide .inner h3 {
  width: 20.72vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #guide .inner h3 {
    width: 60.74vw;
  }
}
#guide .inner .catch {
  font-size: 1.24vw;
  margin-top: 3vw;
  color: #3c2a3e;
  text-align: center;
  line-height: 1.8;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #guide .inner .catch {
    font-size: 4.2vw;
    line-height: 1.6;
    margin-top: 5vw;
  }
}
#guide .inner .catch span {
  color: #3c2a3e;
}
#guide .inner .catch strong {
  color: #9e8e56;
}
#guide .inner .subtitle {
  color: #9e8e56;
  font-weight: bold;
  font-size: 1.35vw;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .subtitle {
    font-size: 3.6vw;
    margin-top: 2vw;
  }
}
#guide .inner .fast_order {
  display: none;
}
#guide .inner .slider_box {
  background: url(./img/fast_bg.webp) no-repeat center center/cover, #fff;
  border: 1px solid #9e8e56;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .slider_box {
    background: url(./img/fast_bg_sp.webp) no-repeat center center/cover, #fff;
    margin-top: 2vw;
  }
}
#guide .inner .fast_slider {
  padding: 1vw 8vw;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .fast_slider {
    padding: 20vw 3vw 35vw;
    margin-top: 2vw;
  }
}
#guide .inner .fast_slider li .fast_box {
  position: relative;
}
#guide .inner .fast_slider li .fast_box .img {
  width: 12.81vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .fast_slider li .fast_box .img {
    width: 65%;
    margin: 0 auto;
  }
}
#guide .inner .fast_slider li .fast_box .number {
  width: 8.43vw;
  position: absolute;
  top: 0vw;
  right: 0vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .fast_slider li .fast_box .number {
    width: 35%;
    top: -9vw;
    right: 15vw;
  }
}
#guide .inner .fast_slider li .fast_box .text {
  font-size: 1.14vw;
  font-weight: bold;
  color: #9e8e56;
  width: 20.41vw;
  position: absolute;
  top: 17vw;
  right: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .fast_slider li .fast_box .text {
    font-size: 4vw;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    top: 105vw;
    width: 82%;
  }
}
#guide .inner .fast_slider li .fast_box .step {
  width: 2.91vw;
  position: absolute;
  bottom: 7vw;
  right: 18.5vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .fast_slider li .fast_box .step {
    width: 17%;
    bottom: auto;
    top: -15vw;
    right: 54vw;
  }
}
#guide .inner .fast_slider .swiper-button-prev,
#guide .inner .fast_slider .swiper-rtl .swiper-button-next {
  left: 5%;
  top: 50%;
  width: 3.5vw;
  height: 3.5vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .fast_slider .swiper-button-prev,
  #guide .inner .fast_slider .swiper-rtl .swiper-button-next {
    width: 10vw;
    height: 10vw;
    left: 1%;
  }
}
@media screen and (min-width: 767px) {
  #guide .inner .fast_slider .swiper-button-prev:hover,
  #guide .inner .fast_slider .swiper-rtl .swiper-button-next:hover {
    opacity: 0.5;
  }
}
#guide .inner .fast_slider .swiper-button-prev:after,
#guide .inner .fast_slider .swiper-rtl .swiper-button-next:after {
  content: "";
  background: url(./img/fast_arrow.webp) no-repeat center center/contain;
  width: 100%;
  height: 100%;
  transform: scale(-1, 1);
}
#guide .inner .fast_slider .swiper-button-next,
#guide .inner .fast_slider .swiper-rtl .swiper-button-prev {
  right: 5%;
  top: 50%;
  width: 3.5vw;
  height: 3.5vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .fast_slider .swiper-button-next,
  #guide .inner .fast_slider .swiper-rtl .swiper-button-prev {
    width: 10vw;
    height: 10vw;
    right: 1%;
  }
}
@media screen and (min-width: 767px) {
  #guide .inner .fast_slider .swiper-button-next:hover,
  #guide .inner .fast_slider .swiper-rtl .swiper-button-prev:hover {
    opacity: 0.5;
  }
}
#guide .inner .fast_slider .swiper-button-next:after,
#guide .inner .fast_slider .swiper-rtl .swiper-button-prev:after {
  content: "";
  background: url(./img/fast_arrow.webp) no-repeat center center/contain;
  width: 100%;
  height: 100%;
}
#guide .inner .order_btn {
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .order_btn {
    margin-top: 3vw;
  }
}
#guide .inner .order_btn a {
  display: block;
  width: 20vw;
  margin: 0 auto;
}
@media screen and (min-width: 767px) {
  #guide .inner .order_btn a:hover {
    filter: brightness(1.2);
  }
}
@media screen and (max-width: 767px) {
  #guide .inner .order_btn a {
    width: 50vw;
  }
}
#guide .inner .caution {
  font-weight: bold;
  color: #3c2a3e;
  padding-left: 1.5vw;
  font-size: 1.14vw;
  position: relative;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .caution {
    font-size: 5vw;
    padding-left: 5.6vw;
    margin-top: 2vw;
  }
}
#guide .inner .caution::before {
  content: "";
  background: url(./img/guide_caution_icon.webp) no-repeat center center/contain;
  width: 1.14vw;
  height: 1.14vw;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  #guide .inner .caution::before {
    width: 5vw;
    height: 5vw;
  }
}
#guide .inner .caution::after {
  content: "";
  background: url(./img/guide_line.webp) no-repeat center center/contain;
  width: 47.6vw;
  height: 5.72vw;
  position: absolute;
  left: 5vw;
  top: 0.8vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .caution::after {
    background: #757575;
    display: none;
  }
}
#guide .inner .caution.english::after {
  background: url(./img/english/guide_line.webp) no-repeat center center/contain;
  width: 45vw;
  left: 7.5vw;
  top: 0.1vw;
}
#guide .inner .caution_list {
  position: relative;
}
#guide .inner .caution_list::before {
  content: "";
  background: url(./img/guide_icon.webp) no-repeat center center/contain;
  width: 4.68vw;
  height: 5.78vw;
  position: absolute;
  right: 3vw;
  top: -2vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .caution_list::before {
    display: none;
  }
}
#guide .inner .caution_list li {
  color: #3c2a3e;
  line-height: 1.8;
  font-size: 0.93vw;
  font-weight: bold;
  padding-left: 1.2vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  #guide .inner .caution_list li {
    font-size: 4vw;
    padding-left: 4.4vw;
    line-height: 1.6;
    margin-top: 2vw;
  }
}
#guide .inner .caution_list li::before {
  content: "";
  background: url(./img/icon.webp) no-repeat center center/contain;
  width: 0.93vw;
  height: 0.93vw;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  #guide .inner .caution_list li::before {
    width: 4vw;
    height: 4vw;
    top: 2vw;
    left: -0.5vw;
    transform: none;
  }
}
#guide .inner .caution_list.english::before {
  width: 4.2vw;
  top: -2.5vw;
  right: 4vw;
}
#guide .inner h4 {
  background: #9e8e56;
  font-size: 1.14vw;
  font-weight: bold;
  padding: 0.2vw 1vw;
  display: inline-block;
  margin-top: 2vw;
}
@media screen and (max-width: 767px) {
  #guide .inner h4 {
    font-size: 3.6vw;
    padding: 0vw 2vw 0.5vw;
    margin-top: 5vw;
  }
}
#guide .inner .seiri_box {
  background: url(./img/guide_seiri_bg.webp) no-repeat center center/contain;
  padding: 2vw;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box {
    background: #fff;
    border: 1px solid #9e8e56;
    padding: 4vw;
    margin-top: 2vw;
  }
}
#guide .inner .seiri_box.english {
  padding: 3.3vw;
}
#guide .inner .seiri_box.english .seiri_time {
  margin-top: 1vw;
}
#guide .inner .seiri_box .seiri_catch {
  font-size: 1.66vw;
  font-weight: bold;
  color: #3c2a3e;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_catch {
    font-size: 5vw;
  }
}
#guide .inner .seiri_box .seiri_catch span {
  color: #fff;
  background: #9e8e56;
  padding: 0 0.2vw 0.2vw;
  margin-left: 0.5vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_catch span {
    padding: 0 0.5vw 0.5vw;
    margin-left: 1vw;
  }
}
#guide .inner .seiri_box .seiri_time {
  width: 37vw;
  margin: 0 auto;
  margin-top: 1vw;
  color: #9e8e56;
  font-size: 1.25vw;
  font-weight: 900;
  line-height: 1.6;
  margin-top: 0vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_time {
    font-size: 4.4vw;
    width: 100%;
    margin-top: 4vw;
  }
}
#guide .inner .seiri_box .seiri_time span {
  color: #9e8e56;
  font-size: 1.14vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_time span {
    font-size: 4vw;
  }
}
#guide .inner .seiri_box .seiri_text {
  width: 37vw;
  margin: 0 auto;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_text {
    width: 100%;
  }
}
#guide .inner .seiri_box .seiri_text li {
  color: #3c2a3e;
  font-size: 1.15vw;
  font-weight: 900;
  padding-left: 1.5vw;
  position: relative;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_text li {
    font-size: 3.6vw;
    padding-left: 4vw;
    margin-top: 0.5vw;
  }
}
#guide .inner .seiri_box .seiri_text li::before {
  content: "■";
  color: #3c2a3e;
  font-size: 1.25vw;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_text li::before {
    font-size: 3.6vw;
  }
}
#guide .inner .seiri_box .seiri_caution {
  margin-top: 0.5vw;
}
#guide .inner .seiri_box .seiri_caution li {
  color: #9e8e56;
  line-height: 1.8;
  font-size: 0.93vw;
  padding-left: 1.2vw;
  position: relative;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_caution li {
    font-size: 3vw;
    padding-left: 6vw;
    line-height: 1.6;
    margin-top: 1vw;
  }
}
#guide .inner .seiri_box .seiri_caution li::before {
  content: "";
  background: url(./img/icon.webp) no-repeat center center/contain;
  width: 0.93vw;
  height: 1.9vw;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  #guide .inner .seiri_box .seiri_caution li::before {
    width: 4.2vw;
    height: 4.2vw;
  }
}
#guide .inner .list {
  margin-top: 1vw;
}
#guide .inner .list li {
  font-size: 1.16vw;
  color: #3c2a3e;
  padding-left: 1.5vw;
  font-weight: 700;
  line-height: 1.6;
  position: relative;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .list li {
    font-size: 3.6vw;
    padding-left: 4vw;
  }
}
#guide .inner .list li::before {
  content: "・";
  color: #3c2a3e;
  font-size: 1.25vw;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (max-width: 767px) {
  #guide .inner .list li::before {
    font-size: 4vw;
  }
}
#guide .inner .list li strong {
  color: #3c2a3e;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  #guide .inner .list li strong {
    line-height: 1.8;
  }
}
#guide .inner .list li strong span {
  color: #3c2a3e;
  font-size: 1.8vw;
  border-bottom: 2px solid #9e8e56;
  line-height: 0;
}
@media screen and (max-width: 767px) {
  #guide .inner .list li strong span {
    font-size: 5vw;
  }
}
#guide .inner .list li a {
  color: #9e8e56;
  border-bottom: 2px solid #9e8e56;
}
@media screen and (min-width: 767px) {
  #guide .inner .list li a:hover {
    opacity: 0.5;
  }
}
#guide .inner .list li a img {
  width: 0.93vw;
  margin-left: -0.5vw;
  padding-right: 0.4vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .list li a img {
    width: 2.5vw;
    padding-right: 1.5vw;
  }
}
#guide .inner .list.english li a img {
  margin-left: 0.7vw;
}
#guide .inner .payment_box {
  border: 1px solid #9e8e56;
  background: #fff;
  padding: 2vw;
  margin-top: 1vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #guide .inner .payment_box {
    padding: 4vw;
    margin-top: 2vw;
  }
}
#guide .inner .payment_box p {
  font-size: 1.36vw;
  font-weight: bold;
  color: #3c2a3e;
}
@media screen and (max-width: 767px) {
  #guide .inner .payment_box p {
    font-size: 4vw;
  }
}
#guide .inner .payment_box img {
  width: 90%;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #guide .inner .payment_box img {
    margin-top: 2vw;
  }
}
#guide .inner .fast_order,
#guide .inner .seiri,
#guide .inner .buy_caution,
#guide .inner .resale_caution,
#guide .inner .other_caution,
#guide .inner .payment {
  opacity: 0;
  transform: translateY(10%);
}
#guide .inner .fast_order.on,
#guide .inner .seiri.on,
#guide .inner .buy_caution.on,
#guide .inner .resale_caution.on,
#guide .inner .other_caution.on,
#guide .inner .payment.on {
  opacity: 1;
  transform: translateY(0%);
}

#info {
  background: url(./img/info_bg.webp) no-repeat center center/100%;
  position: relative;
  z-index: 2;
  margin-top: -25vw;
  scroll-margin-top: -5vw;
}
@media screen and (max-width: 767px) {
  #info {
    background: url(./img/info_bg_sp.webp) no-repeat center center/cover;
    margin-top: -25vw;
  }
}
#info::before {
  content: "";
  background: url(./img/info_arrow.webp) no-repeat center center/contain;
  width: 0.93vw;
  height: 2.5vw;
  position: absolute;
  bottom: 4vw;
  left: 50%;
  transform: translateX(-50%);
  animation: flash 1.5s ease-in-out infinite;
}
@media screen and (max-width: 767px) {
  #info::before {
    width: 8vw;
    height: 9vw;
    bottom: 32vw;
  }
}
#info .inner {
  width: 52.6vw;
  margin: 0 auto;
  padding: 5vw 0 10vw;
}
@media screen and (max-width: 767px) {
  #info .inner {
    width: 90%;
    padding: 15vw 0 45vw;
  }
}
#info .inner h3 {
  width: 16.66vw;
  margin: 0 auto;
  padding-top: 5vw;
}
@media screen and (max-width: 767px) {
  #info .inner h3 {
    width: 49vw;
  }
}
#info .inner h3.english {
  width: 21vw;
}
@media screen and (max-width: 767px) {
  #info .inner h3.english {
    width: 60vw;
  }
}
#info .inner .h4 {
  display: block;
  width: 21.66vw;
  margin: 0 auto;
  margin-top: 3vw;
  position: relative;
  filter: brightness(3);
}
@media screen and (max-width: 767px) {
  #info .inner .h4 {
    width: 80%;
    margin: auto;
    margin-left: 0;
    margin-top: 4vw;
  }
}
#info .inner .h4::before {
  content: "";
  background: url(./img/gaibu_icon.webp) no-repeat center center/contain;
  width: 1.4vw;
  height: 1.4vw;
  position: absolute;
  right: -2vw;
  bottom: 0;
}
@media screen and (max-width: 767px) {
  #info .inner .h4::before {
    width: 4vw;
    height: 4vw;
    right: -6vw;
  }
}
@media screen and (min-width: 767px) {
  #info .inner .h4:hover {
    filter: brightness(1);
  }
}
#info .inner .date,
#info .inner .place {
  width: 70%;
  margin: 0 auto;
  margin-top: 1vw;
  font-size: 1.25vw;
  font-weight: bold;
  letter-spacing: 0.13em;
}
@media screen and (max-width: 767px) {
  #info .inner .date,
  #info .inner .place {
    width: 100%;
    letter-spacing: 0.1em;
    font-size: 3.6vw;
    margin-top: 1vw;
    padding-top: 1vw;
  }
}
#info .inner .date.english,
#info .inner .place.english {
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  #info .inner .date.english,
  #info .inner .place.english {
    letter-spacing: 0.02em;
  }
}
#info .inner .date span,
#info .inner .place span {
  color: #000;
  background: #fff;
  padding: 0vw 0.5vw 0.2vw;
  display: inline-block;
  margin-right: 0.5vw;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  #info .inner .date span,
  #info .inner .place span {
    padding: 0 1vw 0.2vw;
  }
}
#info .inner .date a,
#info .inner .place a {
  color: #fff;
  border-bottom: 2px solid #fff;
  display: inline-block;
  margin-right: 0.5vw;
}
@media screen and (min-width: 767px) {
  #info .inner .date a:hover,
  #info .inner .place a:hover {
    color: #9e8e56;
    border-color: #9e8e56;
  }
  #info .inner .date a:hover img,
  #info .inner .place a:hover img {
    filter: brightness(1);
  }
}
#info .inner .date a img,
#info .inner .place a img {
  filter: brightness(3);
  width: 0.93vw;
  margin-left: 0.5vw;
}
@media screen and (max-width: 767px) {
  #info .inner .date a img,
  #info .inner .place a img {
    width: 3vw;
  }
}
#info .inner .date strong,
#info .inner .place strong {
  padding: 0 0.5vw 0.2vw;
  border: 1px solid #fff;
  display: inline-block;
  margin-left: 1vw;
}
@media screen and (max-width: 767px) {
  #info .inner .date strong,
  #info .inner .place strong {
    display: block;
    width: 40%;
    padding: 1vw 2vw 1.5vw;
    text-align: center;
    font-size: 4.6vw;
    margin-top: 3vw;
    margin-left: 0;
  }
}
#info .inner .date {
  border-top: 2px solid #fff;
  padding-top: 1vw;
}
@media screen and (max-width: 767px) {
  #info .inner .date {
    padding-top: 2vw;
    margin-top: 2vw;
  }
}
#info .inner .title {
  width: 60%;
  margin: 0 auto;
  font-size: 1.57vw;
  font-weight: 900;
  margin-top: 2vw;
}
#info .inner .title span {
  display: block;
  font-size: 0.93vw;
}
@media screen and (max-width: 767px) {
  #info .inner .title {
    width: 100%;
    font-size: 4.6vw;
    margin-top: 3vw;
  }
  #info .inner .title span {
    font-size: 2.8vw;
  }
}
#info .inner .map {
  margin-top: 2vw;
}
@media screen and (max-width: 767px) {
  #info .inner .map {
    margin-top: 3vw;
  }
}
#info .inner ul {
  position: relative;
}
@media screen and (max-width: 767px) {
  #info .inner ul {
    margin-top: 2vw;
  }
}
#info .inner ul li {
  line-height: 1.8;
  font-size: 0.93vw;
  font-weight: bold;
  padding-left: 1.2vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  #info .inner ul li {
    font-size: 3.2vw;
    padding-left: 4vw;
    line-height: 1.6;
  }
}
#info .inner ul li::before {
  content: "";
  background: url(./img/icon.webp) no-repeat center center/contain;
  filter: brightness(100);
  width: 0.93vw;
  height: 0.93vw;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  #info .inner ul li::before {
    width: 4vw;
    height: 4vw;
    top: 1vw;
    transform: none;
  }
}
#info .inner .catch {
  font-size: 1.56vw;
  text-align: center;
  font-weight: 900;
  line-height: 1.8;
  margin-top: 3vw;
}
@media screen and (max-width: 767px) {
  #info .inner .catch {
    font-size: 5vw;
    margin-top: 4vw;
  }
}
#info .inner .catch span {
  color: #fff;
  background: #9e8e56;
  padding: 0 0.5vw 0.2vw;
  margin-right: 0.5vw;
}
#info .inner .info01,
#info .inner .info02,
#info .inner .map,
#info .inner .catch {
  opacity: 0;
  transform: translateY(10%);
}
#info .inner .info01.on,
#info .inner .info02.on,
#info .inner .map.on,
#info .inner .catch.on {
  opacity: 1;
  transform: translateY(0%);
}

#store {
  background: url(./img/store_bg.webp) no-repeat center center/cover;
  margin-top: -15vw;
  scroll-margin-top: -15vw;
}
@media screen and (max-width: 767px) {
  #store {
    margin-top: -30vw;
    background: url(./img/store_bg_sp.webp) no-repeat center center/cover;
  }
}
#store .inner {
  width: 52.6vw;
  margin: 0 auto;
  padding: 22vw 0 15vw;
  opacity: 0;
  transform: translateY(10%);
}
@media screen and (max-width: 767px) {
  #store .inner {
    width: 90%;
    padding: 22vw 0 30vw;
  }
}
#store .inner.on {
  opacity: 1;
  transform: translateY(0%);
}
#store .inner h3 {
  width: 40.83vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #store .inner h3 {
    width: 100%;
  }
}
#store .inner .catch {
  font-size: 1.45vw;
  text-align: center;
  color: #3c2a3e;
  font-weight: 900;
  margin-top: 3vw;
}
@media screen and (max-width: 767px) {
  #store .inner .catch {
    font-size: 5vw;
    margin-top: 4vw;
  }
}
#store .inner .catch span {
  color: #9e8e56;
}
#store .inner .cotent {
  display: grid;
  gap: 1vw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2vw;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 3vw;
  }
}
#store .inner .cotent .detail {
  border: 1px solid #9e8e56;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .detail {
    margin-top: 3vw;
  }
}
#store .inner .cotent .detail .title {
  background: #9e8e56;
  font-size: 1.4vw;
  text-align: center;
  padding: 1vw 3vw;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .detail .title {
    font-size: 5vw;
    padding: 2vw 5vw;
  }
}
#store .inner .cotent .detail .title span {
  font-size: 1.04vw;
  display: block;
  display: block;
  border-top: 1px solid #fff;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .detail .title span {
    font-size: 3.6vw;
    padding-top: 1vw;
    margin-top: 1vw;
  }
}
#store .inner .cotent .detail ul {
  background: #fff;
  padding: 0.5vw 3vw 1.5vw;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .detail ul {
    padding: 1vw 4vw 4vw;
  }
}
#store .inner .cotent .detail ul li {
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .detail ul li {
    margin-top: 3vw;
  }
}
#store .inner .cotent .detail ul li p {
  font-weight: bold;
  background: #000;
  display: inline-block;
  font-weight: bold;
  padding: 0 0.4vw 0.1vw;
  font-size: 0.83vw;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .detail ul li p {
    font-size: 3.6vw;
    padding: 0 1vw 0.5vw;
  }
}
#store .inner .cotent .detail ul li span {
  color: #3c2a3e;
  font-weight: bold;
  display: block;
  font-size: 0.83vw;
  font-weight: 900;
  margin-top: 0.2vw;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .detail ul li span {
    font-size: 3.6vw;
  }
}
#store .inner .cotent .map {
  height: 18vw;
  padding: 1vw;
  background: #fff;
  border: 1px solid #9e8e56;
}
@media screen and (max-width: 767px) {
  #store .inner .cotent .map {
    height: 70vw;
  }
}
#store .inner .cotent .map iframe {
  width: 100%;
  height: 100%;
}
#store .inner .banner {
  display: grid;
  gap: 5vw;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 75%;
  margin: 0 auto;
  margin-top: 4vw;
}
@media screen and (max-width: 767px) {
  #store .inner .banner {
    width: 100%;
    gap: 3vw;
  }
}
#store .inner .banner li a {
  display: block;
  background: #fff;
}
@media screen and (min-width: 767px) {
  #store .inner .banner li a:hover {
    opacity: 0.5;
  }
}
#store .inner .banner li p {
  text-align: center;
}
#store .inner .banner li p span {
  color: #000;
  font-weight: bold;
  font-size: 0.83vw;
  text-align: center;
  position: relative;
  padding-left: 1vw;
}
@media screen and (max-width: 767px) {
  #store .inner .banner li p span {
    font-size: 2.6vw;
    padding-left: 3vw;
  }
}
#store .inner .banner li p span::before {
  content: "";
  background: url(./img/icon.webp) no-repeat center center/contain;
  width: 0.93vw;
  height: 0.93vw;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  filter: brightness(0);
}
@media screen and (max-width: 767px) {
  #store .inner .banner li p span::before {
    width: 2.8vw;
    height: 2.8vw;
    top: 60%;
  }
}
@media screen and (max-width: 767px) {
  #store .inner .banner.english li span {
    letter-spacing: 0.01em;
    font-size: 2vw;
  }
}

footer {
  background: url(./img/footer_bg.webp) no-repeat center center/cover;
  text-align: center;
  padding: 10vw 0 2vw;
  margin-top: -15vw;
  z-index: 2;
  position: relative;
}
@media screen and (max-width: 767px) {
  footer {
    background: url(./img/footer_bg_sp.webp) no-repeat center center/cover;
    padding: 15vw 0 5vw;
    margin-top: -25vw;
  }
}
footer p {
  position: absolute;
  top: 2vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.73vw;
  color: #3c2a3e;
  font-weight: bold;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  footer p {
    font-size: 2.4vw;
  }
}
footer small {
  font-size: 0.73vw;
}
@media screen and (max-width: 767px) {
  footer small {
    font-size: 2.4vw;
  }
}
footer a {
  display: block;
  width: 8.95vw;
  margin: 0 auto;
  margin-top: 1vw;
}
@media screen and (min-width: 767px) {
  footer a:hover {
    opacity: 0.5;
  }
}
@media screen and (max-width: 767px) {
  footer a {
    width: 30%;
  }
}

.modal_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 99999999;
  transition: none;
  opacity: 0;
  pointer-events: none;
}
.modal_bg.on {
  opacity: 1;
}

.modal-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999999;
  transition: none;
}
.modal-box .modal-content {
  width: 100%;
  max-width: 65vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-content {
    max-width: 92.523vw;
    height: 170vw;
  }
}
.modal-box .modal-content::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}
.modal-box .modal-body {
  width: 100%;
  height: 40.833vw;
  background: url(./img/modal_bg.webp) no-repeat center center/contain;
  margin: 0 auto;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body {
    width: 100%;
    height: 100%;
    background: url(./img/modal_bg_sp.webp) no-repeat 66% center/contain;
  }
}
.modal-box .modal-body.on::before {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.5s;
}
.modal-box .modal-body.on .goods_detail_img {
  opacity: 1;
}
.modal-box .modal-body::before {
  content: "";
  background: url(./img/modal_hana.webp) no-repeat center center/contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body::before {
    top: -5vw;
    left: -5vw;
    background: url(./img/modal_hana_sp.webp) no-repeat 66% center/contain;
  }
}
@media screen and (max-width: 767px) {
  .modal-box .modal-overflow {
    padding: 0;
  }
}
.modal-box .modal-body_inner {
  height: auto;
  padding: 4.167vw 7vw;
  display: flex;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner {
    height: 166vw;
    padding: 0;
    flex-direction: column;
    padding: 0;
  }
}
.modal-box .modal-body_inner-img {
  width: 43%;
  max-width: 23.958vw;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-img {
    width: 100%;
    max-width: none;
    padding-bottom: 4.673vw;
  }
}
.modal-box .modal-body_inner-txt {
  width: 57%;
  height: 31.25vw;
  margin-top: 2.865vw;
  margin-left: 2.083vw;
  padding-right: 3.125vw;
  margin-right: -3.125vw;
  font-weight: bold;
  overflow-y: scroll;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt {
    width: 76%;
    margin: 0 auto;
    height: auto;
    max-width: none;
    padding-right: 0;
    padding-bottom: 14.019vw;
    overflow-y: visible;
  }
}
.modal-box .modal-body_inner-txt_inner {
  width: 100%;
  height: 31.25vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt_inner {
    height: 83vw;
  }
}
.modal-box .modal-body_inner-txt h4 {
  font-family: "Noto Serif JP", serif;
  color: #9e8e56;
  font-size: 1.63vw;
  line-height: 1.4;
  padding-bottom: 1.042vw;
  border-bottom: 1px solid #9e8e56;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt h4 {
    font-size: 4.206vw;
    padding-bottom: 2vw;
  }
}
.modal-box .modal-body_inner-txt .type {
  font-family: "Noto Serif JP", serif;
  font-size: 1.04vw;
  color: #9e8e56;
  font-weight: 600;
  margin-top: 1vw;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt .type {
    font-size: 3.4vw;
  }
}
.modal-box .modal-body_inner-txt .type.english {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt .type.english {
    font-size: 3vw;
  }
}
.modal-box .modal-body_inner-txt .red {
  background: #a00000;
  padding: 0.1vw 0.2vw 0.2vw;
  font-size: 1.04vw;
  display: inline-block;
  margin-right: 1vw;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt .red {
    font-size: 3.4vw;
    padding: 0.5vw 1vw;
    margin-top: 3vw;
  }
}
.modal-box .modal-body_inner-txt .yellow {
  background: #9e8e56;
  padding: 0.1vw 0.2vw 0.2vw;
  font-size: 1.04vw;
  display: inline-block;
  margin-right: 1vw;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt .yellow {
    font-size: 3.4vw;
    padding: 0.5vw 1vw;
    margin-top: 3vw;
  }
}
.modal-box .modal-body_inner-txt .price {
  display: inline-block;
  font-size: 1.667vw;
  color: #3c2a3e;
  font-weight: 900;
  margin-top: 2vw;
  vertical-align: -2px;
}
.modal-box .modal-body_inner-txt .price small {
  font-size: 1.042vw;
  font-weight: 900;
  margin-left: 0.5vw;
  color: #3c2a3e;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt .price {
    font-size: 5.4vw;
    position: absolute;
    right: 12vw;
  }
  .modal-box .modal-body_inner-txt .price small {
    font-size: 3vw;
  }
}
.modal-box .modal-body_inner-txt .modal-goods_info_txt {
  font-size: 1.042vw;
  line-height: 1.5;
  margin-top: 1.5vw;
  color: #3c2a3e;
  font-weight: 600;
  line-height: 1.7;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt .modal-goods_info_txt {
    font-size: 3.271vw;
    margin-top: 2vw;
  }
}
.modal-box .modal-body_inner-txt ul.detail {
  font-size: 0.833vw;
  margin-top: 2.083vw;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt ul.detail {
    font-size: 3.271vw;
    margin-top: 2vw;
  }
}
.modal-box .modal-body_inner-txt ul.detail li {
  color: #3c2a3e;
  font-weight: 600;
}
.modal-box .modal-body_inner .goods_detail_img {
  transform-style: preserve-3d;
  margin-top: 2vw;
  opacity: 0;
  transition-delay: 0.6s;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .goods_detail_img {
    margin-top: 6vw;
    width: 90%;
  }
}
.modal-box .modal-body_inner .goods_detail_img .slider_goodsimg_inner {
  height: 23.958vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-box .modal-body_inner .goods_detail_img .slider_goodsimg_inner img {
  width: 90%;
  height: 90%;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #9e8e56;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .goods_detail_img .slider_goodsimg_inner {
    height: 76.636vw;
  }
  .modal-box .modal-body_inner .goods_detail_img .slider_goodsimg_inner img {
    width: 84%;
    height: 84%;
  }
}
.modal-box .modal-body_inner .slider-thumbnail {
  width: 92%;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .slider-thumbnail {
    width: 76%;
  }
}
.modal-box .modal-body_inner .slider-thumbnail .swiper-wrapper {
  gap: 0.4vw;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .slider-thumbnail .swiper-wrapper {
    gap: 1.7vw;
  }
}
.modal-box .modal-body_inner .slider-thumbnail .swiper-slide {
  width: 2.4vw !important;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .slider-thumbnail .swiper-slide {
    width: 8vw !important;
  }
}
.modal-box .modal-body_inner .slider-thumbnail .swiper-slide .thum_illust_box {
  height: 2.4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.208vw solid transparent;
  position: relative;
  z-index: 0;
  transition: all 0.3s;
  box-sizing: border-box;
  filter: grayscale(1);
  background: rgba(0, 0, 0, 0.1411764706);
}
.modal-box .modal-body_inner .slider-thumbnail .swiper-slide .thum_illust_box::before {
  content: "";
  width: 110%;
  height: 110%;
  background-color: #121212;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal-box .modal-body_inner .slider-thumbnail .swiper-slide .thum_illust_box img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #9e8e56;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .slider-thumbnail .swiper-slide .thum_illust_box {
    height: 8vw;
  }
}
@media screen and (min-width: 767px) and (min-width: 767px) {
  .modal-box .modal-body_inner .slider-thumbnail .swiper-slide .thum_illust_box:hover::before {
    opacity: 0.15;
  }
}
.modal-box .modal-body_inner .slider-thumbnail .swiper-slide.swiper-slide-thumb-active .thum_illust_box {
  border: 0.208vw solid #a00000;
  filter: grayscale(0);
  background: #fff;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .slider-thumbnail .swiper-slide.swiper-slide-thumb-active .thum_illust_box {
    border: 3px solid #a00000;
  }
}
@media screen and (min-width: 767px) and (min-width: 767px) {
  .modal-box .modal-body_inner .slider-thumbnail .swiper-slide.swiper-slide-thumb-active .thum_illust_box:hover::before {
    opacity: 0;
  }
}
.modal-box .close {
  width: 3.906vw;
  height: 3.438vw;
  border-bottom-left-radius: 0.521vw;
  position: absolute;
  top: 3vw;
  right: 3vw;
  z-index: 9;
  cursor: pointer;
}
@media screen and (min-width: 767px) {
  .modal-box .close:hover::before, .modal-box .close:hover::after {
    background: #a00000;
  }
}
@media screen and (max-width: 767px) {
  .modal-box .close {
    top: 1vw;
    right: 6vw;
    width: 14.019vw;
    height: 11.682vw;
    border-bottom-left-radius: 2.336vw;
  }
}
.modal-box .close::before, .modal-box .close::after {
  content: "";
  width: 60%;
  height: 2px;
  background-color: #9e8e56;
  position: absolute;
  top: 50%;
  left: 50%;
}
@media screen and (max-width: 767px) {
  .modal-box .close::before, .modal-box .close::after {
    height: 0.467vw;
  }
}
.modal-box .close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-box .close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal-box .modal-nav {
  position: absolute;
  z-index: 9999999999;
  top: 45%;
  transform: translateY(-50%);
  cursor: pointer;
  background: none;
  border: none;
}
.modal-box .modal-nav::before {
  content: "";
  background: url(./img/slide_arrow.webp) no-repeat center center/contain;
  filter: brightness(100);
  width: 5vw;
  height: 5vw;
  position: absolute;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-nav::before {
    width: 9vw;
    height: 9vw;
    filter: brightness(100) drop-shadow(2px 2px 2px #000);
  }
}
@media screen and (min-width: 767px) {
  .modal-box .modal-nav:hover {
    transform: translateY(-50%) scale(1.1);
  }
}
.modal-box .modal-nav.prev-modal {
  left: -10vw;
  transform: translateY(-50%) scale(-1, 1);
}
@media screen and (min-width: 767px) {
  .modal-box .modal-nav.prev-modal:hover {
    transform: translateY(-50%) scale(-1.1, 1.1);
  }
}
@media screen and (max-width: 767px) {
  .modal-box .modal-nav.prev-modal {
    left: 6vw;
  }
}
.modal-box .modal-nav.next-modal {
  right: -5vw;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-nav.next-modal {
    right: 6vw;
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%); /* 開始位置（画像1枚分左にずらす） */
  }
  100% {
    transform: translateX(0%); /* 終了位置（元の位置に戻る） */
  }
}
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10%);
  }
}
@keyframes mv_fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1.5%);
  }
}
@keyframes flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.glitch-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden; /* はみ出した部分を隠す */
  z-index: 2;
}
.glitch-wrapper.active {
  /* ::beforeと::after擬似要素の共通スタイル */
  /* 1つ目のグリッチレイヤー（赤みがかったズレ） */
  /* 2つ目のグリッチレイヤー（青みがかったズレ） */
}
.glitch-wrapper.active::before, .glitch-wrapper.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("./img/mv_title.webp"); /* HTMLと同じ画像を指定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.8;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .glitch-wrapper.active::before, .glitch-wrapper.active::after {
    background-image: url("./img/mv_title_sp.webp"); /* HTMLと同じ画像を指定 */
  }
}
.glitch-wrapper.active.english::before, .glitch-wrapper.active.english::after {
  background-image: url("./img/english/mv_title.webp"); /* HTMLと同じ画像を指定 */
}
@media screen and (max-width: 767px) {
  .glitch-wrapper.active.english::before, .glitch-wrapper.active.english::after {
    background-image: url("./img//english/mv_title_sp.webp"); /* HTMLと同じ画像を指定 */
  }
}
.glitch-wrapper.active::before {
  animation: glitch-anim-1 0.3s infinite linear alternate-reverse;
  /* 色のズレを表現 */
  filter: hue-rotate(250deg);
}
.glitch-wrapper.active::after {
  animation: glitch-anim-2 0.4s infinite linear alternate-reverse;
  /* 色のズレを表現 */
  filter: hue-rotate(100deg);
}

/* グリッチアニメーション1の定義 */
@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(89% 0 8% 0);
    transform: translate(-5px, 0);
  }
  20% {
    clip-path: inset(55% 0 1% 0);
    transform: translate(3px, 2px);
  }
  40% {
    clip-path: inset(21% 0 63% 0);
    transform: translate(-2px, -3px);
  }
  60% {
    clip-path: inset(78% 0 5% 0);
    transform: translate(4px, -1px);
  }
  80% {
    clip-path: inset(40% 0 45% 0);
    transform: translate(-7px, 0);
  }
  100% {
    clip-path: inset(95% 0 2% 0);
    transform: translate(2px, 3px);
  }
}
/* グリッチアニメーション2の定義 */
@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(28% 0 55% 0);
    transform: translate(0, 5px);
  }
  20% {
    clip-path: inset(0 0 95% 0);
    transform: translate(-5px, 0);
  }
  40% {
    clip-path: inset(70% 0 5% 0);
    transform: translate(3px, -2px);
  }
  60% {
    clip-path: inset(35% 0 36% 0);
    transform: translate(-2px, 4px);
  }
  80% {
    clip-path: inset(92% 0 2% 0);
    transform: translate(6px, 1px);
  }
  100% {
    clip-path: inset(60% 0 20% 0);
    transform: translate(-3px, 0);
  }
}/*# sourceMappingURL=style.css.map */