@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
}

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

*:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}

html {
  block-size: 100%;
  -webkit-text-size-adjust: none;
  font-size: 62.5%;
  scroll-padding-top: 26.6666666667vw;
}

@media (min-width: 465px) {
  html {
    scroll-padding-top: 20rem;
  }
}
body {
  text-rendering: optimizeSpeed;
  min-block-size: 100%;
  font-family: "Zen Kaku Gothic New", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 1rem;
  color: #222;
}

:where(video, canvas, audio, iframe, embed, object) {
  display: block;
}

:where(img, svg, video) {
  block-size: auto;
  max-inline-size: 100%;
  vertical-align: middle;
}

:where(svg) {
  stroke: none;
  fill: currentColor;
}

:where(svg):where(:not([width])) {
  inline-size: 5rem;
}

:where(input, button, textarea, select),
:where(input[type=file])::-webkit-file-upload-button {
  color: inherit;
  font: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}

:where(button) {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

:where(textarea) {
  resize: vertical;
}

@supports (resize: block) {
  :where(textarea) {
    resize: block;
  }
}
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:where(ul, ol) {
  list-style: none;
  margin-inline: 0;
  margin-block: 0;
  padding-block: 0;
  padding-inline: 0;
}

:where(dt, dd, li) {
  margin: 0;
  margin-inline: 0;
  padding-inline: 0;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  cursor: pointer;
  touch-action: manipulation;
}

:where(input[type=file]) {
  cursor: auto;
}

:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    transition: outline-offset 145ms cubic-bezier(0.25, 0, 0.4, 1);
  }
  :where(:not(:active)):focus-visible {
    transition-duration: 0.25s;
  }
}
:where(:not(:active)):focus-visible {
  outline-offset: 5px;
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset]),
:where(input[type=file])::-webkit-file-upload-button,
:where(input[type=file])::file-selector-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-align: center;
}

:where(button, button[type], input[type=button], input[type=submit], input[type=reset])[disabled] {
  cursor: not-allowed;
}

@media screen and (min-width: 465px) {
  .show_sp {
    display: none !important;
  }
}

@media screen and (max-width: 464px) {
  .show_tabpc {
    display: none !important;
  }
}

.show_pc {
  display: none !important;
}
@media screen and (min-width: 1000px) {
  .show_pc {
    display: block !important;
  }
}

.min {
  font-family: "Kaisei Opti";
}

.en {
  font-family: "Marcellus SC";
}

.color-red {
  color: #D92817;
}

.first {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.first .opening {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}

.opening {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: url(../img/bg_check.png) center/calc(46 / 375 * 100vw) auto #FFEA1C;
  transition: 0.3s ease-in;
  overflow: auto;
}
@media screen and (min-width: 465px) {
  .opening {
    background-size: 5.8rem auto;
  }
}
.opening_inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-block: calc(20 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening_inner {
    max-width: 46.5rem;
    margin-inline: auto;
    padding-block: 2rem;
  }
}
.opening p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Kaisei Opti";
  font-size: calc(16 / 375 * 100vw);
  font-weight: 500;
  position: relative;
  width: calc(104 / 375 * 100vw);
  display: flex;
  align-items: center;
  letter-spacing: 0.14em;
  line-height: 2;
  margin-bottom: calc(56 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening p {
    font-size: 2rem;
    width: 12.8rem;
    margin-bottom: 6.6rem;
  }
}
.opening p:after {
  content: "";
  width: calc(104 / 375 * 100vw);
  aspect-ratio: 104/46;
  background: url(../img/sound_baloon.svg) no-repeat center/cover;
  position: absolute;
  top: calc(120 / 375 * 100vw);
  left: 0;
  pointer-events: none;
}
@media screen and (min-width: 465px) {
  .opening p:after {
    width: 12.8rem;
    top: 16.2rem;
  }
}
.opening figure {
  text-align: center;
  margin-bottom: calc(30 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening figure {
    margin-bottom: 3rem;
  }
}
.opening figure img {
  width: calc(273 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening figure img {
    width: 33.8rem;
  }
}
.opening_btn {
  display: flex;
  justify-content: center;
}
.opening_btn li:first-child {
  position: relative;
}
.opening_btn li:first-child:after {
  content: "";
  width: 1px;
  height: calc(13 / 375 * 100vw);
  background-color: #222;
  position: absolute;
  right: 0;
  top: calc(50% - 6.5 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening_btn li:first-child:after {
    height: 1.6rem;
    top: calc(50% - 0.8rem);
  }
}
.opening_btn button {
  font-family: "Marcellus SC";
  font-size: calc(20 / 375 * 100vw);
  font-weight: 400;
  letter-spacing: 0.1em;
  padding: calc(8 / 375 * 100vw) calc(30 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening_btn button {
    font-size: 2.5rem;
    padding: 1.8rem 4rem;
  }
}
@media (hover) {
  .opening_btn button:hover {
    color: #D92817;
  }
}
.opening_btn button.active {
  color: #D92817;
}
.opening_logo {
  text-align: center;
  margin-top: calc(60 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening_logo {
    margin-top: 7rem;
  }
}
.opening_logo img {
  width: calc(180 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .opening_logo img {
    width: 22.4rem;
  }
}

@media screen and (min-width: 465px) {
  .wrap {
    background: url(../img/bg_check.png) center/5.8rem auto #FFEA1C;
    background-attachment: fixed;
  }
}
.wrap.scroll .header {
  height: calc(71 / 375 * 100vw);
  background-size: calc(80 / 375 * 100vw) auto;
  background-position: left calc(6 / 375 * 100vw) bottom -1px;
}
@media screen and (min-width: 465px) {
  .wrap.scroll .header {
    height: 8.8rem;
    background-size: 10rem auto;
    background-position: left 0.8rem bottom -1px;
  }
}
.wrap.scroll .header h1 {
  padding-top: calc(9 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .wrap.scroll .header h1 {
    padding-top: 1.1rem;
  }
}
.wrap.scroll .header h1 img {
  width: calc(116 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .wrap.scroll .header h1 img {
    width: 14.4rem;
  }
}
.wrap.scroll + .pagetop {
  opacity: 1;
  visibility: visible;
}
.wrap.open .nav_btn span {
  background-color: #D92817;
}
.wrap.open .nav_btn span:nth-child(1) {
  transform: rotate(10.5deg);
}
.wrap.open .nav_btn span:nth-child(2) {
  transform: rotate(-10.5deg);
}
.wrap.open .nav_btn em {
  color: #D92817;
}
.wrap.open .menu {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
  z-index: 105;
}
.wrap.open .heading {
  z-index: 106;
  animation: frame 0.6s ease forwards;
}
.wrap.close .heading {
  animation: frame_close 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

main {
  position: relative;
}
@media screen and (min-width: 465px) {
  main {
    max-width: 46.5rem;
    margin-inline: auto;
    background-color: #fff;
  }
}

.main_inner {
  padding: calc(9 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .main_inner {
    padding: 0.9rem;
  }
}

.heading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 100;
  transform-origin: bottom center;
  transform: scale(1);
  opacity: 1;
  pointer-events: none;
}
@media screen and (min-width: 465px) {
  .heading {
    max-width: 46.5rem;
    left: auto;
    right: auto;
    transform-origin: 55% 100%;
  }
}

@keyframes frame {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  98% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.1);
  }
}
@keyframes frame_close {
  0% {
    opacity: 0;
    transform: scale(0.1);
    z-index: 106;
  }
  2% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    z-index: 100;
  }
}
.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border: calc(5 / 375 * 100vw) solid #fff;
  pointer-events: none;
  z-index: 1;
}
@media screen and (min-width: 465px) {
  .frame {
    border-width: 0.5rem;
  }
}
.frame span {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  border: calc(5 / 375 * 100vw) solid #D92817;
}
@media screen and (min-width: 465px) {
  .frame span {
    border-width: 0.5rem;
  }
}
.frame span:before {
  content: "";
  width: calc(82 / 375 * 100vw);
  aspect-ratio: 82/54;
  background: url(../img/deco_window.svg) no-repeat center/cover;
  position: absolute;
  bottom: -1px;
  left: -1px;
}
@media screen and (min-width: 465px) {
  .frame span:before {
    width: 10rem;
  }
}
.frame span:after {
  content: "";
  width: calc(82 / 375 * 100vw);
  aspect-ratio: 82/54;
  background: url(../img/deco_window.svg) no-repeat center/cover;
  transform: scale(-1, 1);
  position: absolute;
  bottom: -1px;
  right: -1px;
}
@media screen and (min-width: 465px) {
  .frame span:after {
    width: 10rem;
  }
}

header {
  position: absolute;
  top: calc(5 / 375 * 100vw);
  left: 0;
  width: 100%;
  pointer-events: visible;
}
@media screen and (min-width: 465px) {
  header {
    top: 0.5rem;
  }
}

.header {
  height: calc(220 / 375 * 100vw);
  background: url(../img/noren.svg) repeat-x left calc(4 / 375 * 100vw) bottom -1px/calc(104 / 375 * 100vw) auto;
  transition: 0.3s ease;
}
@media screen and (min-width: 465px) {
  .header {
    height: 27.3rem;
    background-size: 12.8rem auto;
    background-position: left 0.8rem bottom;
  }
}
.header p {
  color: #fff;
  font-size: calc(6 / 375 * 100vw);
  line-height: 1.1;
  position: absolute;
  top: calc(5 / 375 * 100vw);
  left: calc(10 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .header p {
    font-size: 0.7rem;
    left: 1rem;
    top: 0.5rem;
  }
}
.header h1 {
  width: fit-content;
  margin-inline: auto;
  padding-top: calc(5 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .header h1 {
    padding-top: 0.5rem;
  }
}
.header h1 img {
  width: calc(274 / 375 * 100vw);
  transition: 0.3s ease;
}
@media screen and (min-width: 465px) {
  .header h1 img {
    width: 34rem;
  }
}

.nav_btn {
  position: fixed;
  right: calc(10 / 375 * 100vw);
  top: calc(10 / 375 * 100vw);
  width: calc(40 / 375 * 100vw);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 110;
  padding: calc(4 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .nav_btn {
    right: auto;
    left: calc(50% + 18.2rem);
    top: 1rem;
    width: 4rem;
    padding: 0.4rem;
  }
}
@media screen and (min-width: 1000px) {
  .nav_btn {
    display: none !important;
  }
}
.nav_btn span {
  background-color: #fff;
  height: calc(2 / 375 * 100vw);
  width: 100%;
  transform-origin: center left;
  transition: 0.3s ease;
}
@media screen and (min-width: 465px) {
  .nav_btn span {
    height: 0.2rem;
  }
}
.nav_btn span:first-child {
  margin-bottom: calc(4 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .nav_btn span:first-child {
    margin-bottom: 0.4rem;
  }
}
.nav_btn em {
  font-family: "Kaisei Opti";
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.12em;
  white-space: nowrap;
  font-size: 1.3rem;
  font-style: normal;
  transition: 0.3s ease;
}

.menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.3s ease-in;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: url(../img/bg_check.png) center/calc(46 / 375 * 100vw) auto #FFEA1C;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: auto;
  overscroll-behavior-y: contain;
}
@media screen and (min-width: 465px) {
  .menu {
    background-size: 5.8rem auto;
  }
}
@media screen and (min-width: 1000px) {
  .menu {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
    z-index: 1;
    width: calc(50% - 23.25rem);
    left: auto;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../img/side_right.svg) no-repeat calc(50% - 2rem) bottom/auto min(19.609375vw, 25.1rem);
    transition: none;
  }
}
.menu_inner {
  position: relative;
  min-height: 100%;
}
@media screen and (min-width: 465px) {
  .menu_inner {
    max-width: 46.5rem;
    margin-inline: auto;
  }
}
@media screen and (min-width: 1000px) {
  .menu_inner {
    max-width: 100%;
    min-height: auto;
  }
}
.menu_logo {
  padding: calc(15 / 375 * 100vw) 0 0 calc(15 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .menu_logo {
    padding: 1.5rem 0 0 1.5rem;
  }
}
@media screen and (min-width: 1000px) {
  .menu_logo {
    display: none;
  }
}
.menu_logo img {
  width: calc(115 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .menu_logo img {
    width: 11.5rem;
  }
}
.menu_ttl {
  text-align: center;
  margin-top: calc(35 / 375 * 100vw);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 465px) {
  .menu_ttl {
    margin-top: 3.5rem;
  }
}
.menu_ttl span {
  font-size: calc(40 / 375 * 100vw);
  letter-spacing: 0.1em;
  line-height: 1;
}
@media screen and (min-width: 465px) {
  .menu_ttl span {
    font-size: 4rem;
  }
}
@media screen and (min-width: 1000px) {
  .menu_ttl span {
    font-size: 3.1rem;
  }
}
.menu_ttl b {
  font-size: calc(14 / 375 * 100vw);
  font-weight: 700;
  line-height: 1;
  margin-top: calc(15 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .menu_ttl b {
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
}
@media screen and (min-width: 1000px) {
  .menu_ttl b {
    font-size: 1.1rem;
    margin-top: 1.1rem;
  }
}
.menu_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(25 / 375 * 100vw);
  margin-top: calc(45 / 375 * 100vw);
  padding-bottom: calc(145 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .menu_item {
    column-gap: 2.5rem;
    margin-top: 4.5rem;
    padding-bottom: 14.5rem;
  }
}
.menu_item a {
  display: block;
  background-color: #fff;
  font-family: "Kaisei Opti";
  font-size: calc(16 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.25;
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-decoration: none;
  color: currentColor;
  padding: calc(8 / 375 * 100vw);
  letter-spacing: 0.25em;
  transition: 0.3s;
}
@media screen and (min-width: 465px) {
  .menu_item a {
    font-size: 1.6rem;
    padding: 0.8rem;
  }
}
@media screen and (min-width: 1000px) {
  .menu_item a:after {
    content: "";
    width: 1.6rem;
    height: 1.6rem;
    background: url(../img/icon_arrow.svg) no-repeat center/100% auto;
    display: inline-block;
    margin-top: 0.5rem;
    transition: 0.3s;
  }
}
.menu_item a:active {
  color: rgba(34, 34, 34, 0.5);
}
.menu_item a:active:after {
  opacity: 0.5;
}
@media (hover) {
  .menu_item a:hover {
    color: rgba(34, 34, 34, 0.5);
  }
  .menu_item a:hover:after {
    opacity: 0.5;
  }
}
.menu_bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
@media screen and (min-width: 1000px) {
  .menu_bottom {
    display: none;
  }
}
.menu_bottom img {
  width: 100%;
  height: calc(196 / 375 * 100vw);
  object-fit: cover;
  object-position: -20.5vw;
}
@media screen and (min-width: 465px) {
  .menu_bottom img {
    height: 19.6rem;
    object-fit: contain;
    object-position: center bottom;
  }
}
.menu_bottom .js-top {
  position: absolute;
  left: calc(165 / 375 * 100vw);
  bottom: 0;
  z-index: 1;
  width: calc(44 / 375 * 100vw);
  height: calc(76 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .menu_bottom .js-top {
    left: 23.3rem;
    width: 4.4rem;
    height: 7.6rem;
  }
}

.js-top {
  cursor: pointer;
}

.side_logo {
  display: none;
}
@media screen and (min-width: 1000px) {
  .side_logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: calc(50% - 23.25rem);
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/side_left.svg) no-repeat calc(50% + 3rem) bottom/auto min(18.984375vw, 24.3rem);
  }
}
@media screen and (min-width: 1000px) {
  .side_logo img {
    width: min(21.09375vw, 27rem);
  }
}

.illust1 {
  position: relative;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
}
.illust1.active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}
.illust2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}
.illust2.active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
}

.sec_ttl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.sec_ttl span {
  font-size: calc(40 / 375 * 100vw);
  letter-spacing: 0.08em;
  line-height: 1;
  font-weight: 400;
}
@media screen and (min-width: 465px) {
  .sec_ttl span {
    font-size: 5rem;
  }
}
.sec_ttl strong {
  font-size: calc(14 / 375 * 100vw);
  font-weight: 700;
  line-height: 1;
  margin-top: calc(15 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .sec_ttl strong {
    font-size: 1.7rem;
    margin-top: 1.6rem;
  }
}

/*---------
footer
-----------*/
footer {
  position: relative;
  z-index: 100;
  background-color: #D92817;
  color: #fff;
  height: calc(52 / 375 * 100vw);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: calc(20 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  footer {
    height: 6.4rem;
    justify-content: center;
    padding-inline: 0;
  }
}
footer p {
  text-align: center;
  font-size: calc(9 / 375 * 100vw);
  letter-spacing: 0.08em;
}
@media screen and (min-width: 465px) {
  footer p {
    font-size: 1.1rem;
  }
}
footer p span {
  display: inline-block;
  width: calc(95 / 375 * 100vw);
  height: calc(5 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  footer p span {
    width: 14rem;
    height: 0.5rem;
  }
}
@media screen and (min-width: 1000px) {
  footer p span {
    width: 0.5em;
    height: 0.5em;
  }
}

.pagetop {
  position: fixed;
  bottom: 0;
  left: calc(50% - 28 / 375 * 100vw);
  aspect-ratio: 112/87;
  width: calc(70 / 375 * 100vw);
  z-index: 101;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  cursor: pointer;
}
@media screen and (min-width: 465px) {
  .pagetop {
    left: calc(50% - 4.6rem);
    width: 11.2rem;
  }
}
@media screen and (min-width: 1000px) {
  .pagetop {
    left: auto;
    right: calc((50% - 23.25rem) / 2 - 5.6rem);
  }
}
.pagetop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 1vw;
}
@media screen and (min-width: 465px) {
  .pagetop img {
    object-position: center 0.7rem;
  }
}

/*---------
top
-----------*/
.top {
  background: url(../img/bg_check.png) center/calc(46 / 375 * 100vw) auto #FFEA1C;
  padding-top: calc(250 / 375 * 100vw);
  padding-bottom: calc(40 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .top {
    background-size: 5.8rem auto;
    padding-top: 30.5rem;
    padding-bottom: 5rem;
  }
}
.top_ttl {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(15 / 375 * 100vw);
  margin-bottom: calc(30 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .top_ttl {
    column-gap: 1.8rem;
    margin-bottom: 3.2rem;
  }
}
.top_ttl span, .top_ttl b {
  background-color: #fff;
  font-weight: 500;
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: calc(8 / 375 * 100vw);
  line-height: 1;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 465px) {
  .top_ttl span, .top_ttl b {
    padding: 1rem;
    letter-spacing: 0.14em;
  }
}
.top_ttl span {
  font-size: calc(18 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .top_ttl span {
    font-size: 2.2rem;
  }
}
.top_ttl b {
  font-size: calc(24 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .top_ttl b {
    font-size: 3rem;
  }
}
.top_kumamon {
  position: relative;
}
.top_kumamon img {
  height: calc(402 / 375 * 100vw);
  width: 100%;
  object-fit: cover;
}
@media screen and (min-width: 465px) {
  .top_kumamon img {
    height: 49.6rem;
  }
}
.top_kumamon1 {
  position: relative;
  z-index: 1;
}
.top_kumamon2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}
.top_lead {
  text-align: center;
  font-size: calc(15 / 375 * 100vw);
  font-weight: 700;
  line-height: 1.6;
  padding-top: calc(40 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .top_lead {
    font-size: 1.9rem;
    padding-top: 4rem;
  }
}
.top_lead_bold {
  display: flex;
  justify-content: center;
  font-size: calc(22 / 375 * 100vw);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: calc(15 / 375 * 100vw);
  color: #D92817;
  font-family: "Kaisei Opti";
}
@media screen and (min-width: 465px) {
  .top_lead_bold {
    font-size: 2.7rem;
    margin-top: 2rem;
  }
}
.top_lead_bold span {
  position: relative;
}
.top_lead_bold span:before {
  content: "";
  width: calc(3 / 375 * 100vw);
  aspect-ratio: 1;
  border-radius: 50%;
  position: absolute;
  left: calc(50% - 1.5 / 375 * 100vw);
  bottom: 100%;
  background-color: #D92817;
}
@media screen and (min-width: 465px) {
  .top_lead_bold span:before {
    width: 0.4rem;
    left: calc(50% - 0.2rem);
  }
}

/*---------
event
-----------*/
.event {
  background: url(../img/bg_check_yellow.webp) center/calc(50 / 375 * 100vw) auto;
  padding: calc(40 / 375 * 100vw) 0 calc(70 / 375 * 100vw);
  overflow: hidden;
}
@media screen and (min-width: 465px) {
  .event {
    background-size: 6.2rem auto;
    padding: 5rem 0 9rem;
  }
}

.article {
  margin-top: calc(80 / 375 * 100vw);
  display: grid;
  row-gap: calc(100 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .article {
    margin-top: 9rem;
    row-gap: 12.7rem;
  }
}

article {
  position: relative;
}

.detail > dt {
  position: relative;
  background-color: #FCEEED;
  height: calc(200 / 375 * 100vw);
  display: flex;
  justify-content: center;
  align-items: end;
  border-bottom: calc(2 / 375 * 100vw) solid #D92817;
}
@media screen and (min-width: 465px) {
  .detail > dt {
    height: 25.8rem;
    border-bottom-width: 0.2rem;
  }
}
.detail > dt:before {
  content: "";
  width: calc(100% + 2 / 375 * 100vw);
  height: calc(40 / 375 * 100vw);
  background: url(../img/flame_top.svg) no-repeat center top/100% auto;
  position: absolute;
  top: calc(-39 / 375 * 100vw);
  left: calc(-1 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail > dt:before {
    width: calc(100% + 0.2rem);
    height: 5rem;
    top: -4.9rem;
    left: -0.1rem;
  }
}
.detail > dt figure {
  position: relative;
}
.detail > dd {
  position: relative;
  background-color: #fff;
  padding: calc(44 / 375 * 100vw) calc(25 / 375 * 100vw) calc(5 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail > dd {
    padding: 5.5rem 3.2rem 0.5rem;
  }
}
.detail > dd::before {
  content: "";
  width: calc(100% + 2 / 375 * 100vw);
  height: calc(30 / 375 * 100vw);
  background: url(../img/flame_bottom.svg) no-repeat center bottom/100% auto;
  position: absolute;
  bottom: calc(-29 / 375 * 100vw);
  left: calc(-1 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail > dd::before {
    width: calc(100% + 0.2rem);
    height: 4rem;
    bottom: -3.9rem;
    left: -0.1rem;
  }
}
.detail_ribbon {
  position: absolute;
  top: calc(-26 / 375 * 100vw);
  left: 0;
  width: 100%;
  text-align: center;
}
@media screen and (min-width: 465px) {
  .detail_ribbon {
    top: -3rem;
  }
}
.detail_ribbon img {
  width: calc(219 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail_ribbon img {
    width: 27.2rem;
  }
}
.detail_ttl {
  text-align: center;
  font-size: calc(25 / 375 * 100vw);
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: calc(15 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail_ttl {
    font-size: 3.1rem;
    margin-bottom: 1.6rem;
  }
}
.detail_lead {
  font-size: calc(16 / 375 * 100vw);
  font-weight: 500;
  line-height: 1.56;
  margin-bottom: calc(25 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail_lead {
    font-size: 2rem;
    margin-bottom: 2.8rem;
  }
}
.detail_lead small {
  font-size: calc(12 / 375 * 100vw);
  font-weight: 400;
  line-height: 1.47;
  display: block;
}
@media screen and (min-width: 465px) {
  .detail_lead small {
    font-size: 1.5rem;
  }
}
.detail_data {
  position: relative;
  padding-block: calc(18 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail_data {
    padding-block: 2rem;
  }
}
.detail_data::before {
  content: "";
  width: 100%;
  height: calc(3 / 375 * 100vw);
  background: url(../img/line.svg) repeat-x left top/auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
@media screen and (min-width: 465px) {
  .detail_data::before {
    height: 0.4rem;
  }
}
.detail_data::after {
  content: "";
  width: 100%;
  height: calc(3 / 375 * 100vw);
  background: url(../img/line.svg) repeat-x left top/auto 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  transform: scale(1, -1);
}
@media screen and (min-width: 465px) {
  .detail_data::after {
    height: 0.4rem;
  }
}
.detail_data li:not(.w-100) {
  display: grid;
  grid-template-columns: calc(52 / 375 * 100vw) 1fr;
}
@media screen and (min-width: 465px) {
  .detail_data li:not(.w-100) {
    grid-template-columns: 6.6rem 1fr;
  }
}
.detail_data li + li {
  margin-top: calc(8 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail_data li + li {
    margin-top: 1rem;
  }
}
.detail_data li h3 {
  font-size: calc(18 / 375 * 100vw);
  font-weight: 500;
  font-family: "Kaisei Opti";
  color: #D92817;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 465px) {
  .detail_data li h3 {
    font-size: 2.2rem;
  }
}
.detail_data li p {
  font-size: calc(18 / 375 * 100vw);
  font-weight: 500;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 465px) {
  .detail_data li p {
    font-size: 2.2rem;
  }
}
.detail_data li p small {
  display: block;
  text-indent: -1em;
  padding-left: 1em;
  font-size: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail_data li p small {
    font-size: 2rem;
  }
}
.detail_data li div p {
  display: grid;
  grid-template-columns: calc(70 / 375 * 100vw) 1fr;
}
@media screen and (min-width: 465px) {
  .detail_data li div p {
    grid-template-columns: 8.6rem 1fr;
  }
}
.detail_data li div p span {
  display: flex;
  justify-content: space-between;
}
.detail_data li div p span:after {
  content: "：";
}
.detail_data li div p b {
  font-weight: 500;
}
.detail_data + .btn_link {
  margin-top: calc(25 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail_data + .btn_link {
    margin-top: 3rem;
  }
}

.detail01_main {
  width: calc(291 / 375 * 100vw);
  height: calc(193 / 375 * 100vw);
  margin-inline: auto;
}
@media screen and (min-width: 465px) {
  .detail01_main {
    width: 36rem;
    height: 24rem;
  }
}
.detail01_main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.detail02_main {
  text-align: center;
  padding-bottom: calc(20 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail02_main {
    padding-bottom: 2rem;
  }
}
.detail02_main img {
  width: calc(268 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail02_main img {
    width: 33.7rem;
  }
}

.detail03_main {
  text-align: center;
}
.detail03_main img {
  width: calc(258 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail03_main img {
    width: 32.8rem;
  }
}

.detail04_main {
  text-align: center;
}
.detail04_main img {
  width: calc(250 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail04_main img {
    width: 31rem;
  }
}

.detail05_main {
  text-align: center;
}
.detail05_main img {
  width: calc(210 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail05_main img {
    width: 27rem;
  }
}

.detail06_main {
  text-align: center;
}
.detail06_main img {
  width: calc(276 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail06_main img {
    width: 34.3rem;
  }
}

.detail07_main {
  text-align: center;
}
.detail07_main img {
  width: calc(210 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail07_main img {
    width: 27.1rem;
  }
}

.detail08 > dt {
  height: calc(198 / 375 * 100vw);
  background-color: transparent;
}
@media screen and (min-width: 465px) {
  .detail08 > dt {
    height: 24.8rem;
  }
}
.detail08 > dt::before {
  visibility: hidden;
}
.detail08_deco {
  position: absolute;
  top: calc(18 / 375 * 100vw);
  left: 0;
  pointer-events: none;
  padding-inline: calc(2 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .detail08_deco {
    top: 1.8rem;
    padding-inline: 0.2rem;
  }
}
.detail08_deco img {
  width: 100%;
}

.detail09 > dt {
  height: calc(200 / 375 * 100vw);
  background-color: transparent;
}
@media screen and (min-width: 465px) {
  .detail09 > dt {
    height: 24.8rem;
  }
}
.detail09 > dt::before {
  visibility: hidden;
}

.btn_link {
  color: #fff;
  background-color: #D92817;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(15 / 375 * 100vw);
  height: calc(50 / 375 * 100vw);
  font-family: "Kaisei Opti";
  font-size: calc(16 / 375 * 100vw);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: calc(5 / 375 * 100vw);
  text-decoration: none;
  transition: opacity 0.3s;
}
@media screen and (min-width: 465px) {
  .btn_link {
    padding: 0 1.8rem;
    height: 6.2rem;
    font-size: 2rem;
    border-radius: 0.6rem;
  }
}
.btn_link:after {
  content: "";
  width: calc(20 / 375 * 100vw);
  height: calc(20 / 375 * 100vw);
  background: url(../img/icon_arrow_red.svg) no-repeat center/100% auto;
}
@media screen and (min-width: 465px) {
  .btn_link:after {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.btn_link:active {
  opacity: 0.5;
}
@media (hover) {
  .btn_link:hover {
    opacity: 0.5;
  }
}

.accordion {
  margin-bottom: calc(20 / 375 * 100vw);
  margin-top: calc(25 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .accordion {
    margin-bottom: 2.5rem;
    margin-top: 3rem;
  }
}
.accordion dt {
  color: #fff;
  background-color: #D92817;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 calc(15 / 375 * 100vw);
  height: calc(50 / 375 * 100vw);
  font-family: "Kaisei Opti";
  font-size: calc(16 / 375 * 100vw);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: calc(5 / 375 * 100vw);
  text-decoration: none;
  transition: opacity 0.3s;
  cursor: pointer;
}
@media screen and (min-width: 465px) {
  .accordion dt {
    padding: 0 1.8rem;
    height: 6.2rem;
    font-size: 2rem;
    border-radius: 0.6rem;
  }
}
.accordion dt img {
  height: calc(28 / 375 * 100vw);
  width: auto;
  margin-left: calc(10 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .accordion dt img {
    height: 3.2rem;
    margin-left: 1.3rem;
  }
}
.accordion dt:after {
  content: "";
  width: calc(20 / 375 * 100vw);
  height: calc(20 / 375 * 100vw);
  background: url(../img/icon_arrow_red.svg) no-repeat center/100% auto;
  transform: rotate(90deg);
  margin-left: auto;
}
@media screen and (min-width: 465px) {
  .accordion dt:after {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.accordion dt.open:after {
  transform: rotate(-90deg);
}
.accordion dd {
  margin-inline-start: 0;
}
.accordion dd:not(:last-child) {
  margin-top: calc(5 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .accordion dd:not(:last-child) {
    margin-top: 0.6rem;
  }
}

.dish {
  padding: calc(24 / 375 * 100vw) 0 calc(20 / 375 * 100vw);
  display: grid;
  row-gap: calc(30 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .dish {
    padding: 2.5rem 0;
    row-gap: 3.5rem;
  }
}
.dish li + li {
  padding-top: calc(30 / 375 * 100vw);
  border-top: calc(4 / 375 * 100vw) solid rgba(217, 40, 23, 0.1);
}
@media screen and (min-width: 465px) {
  .dish li + li {
    padding-top: 3.7rem;
    border-top-width: 0.5rem;
  }
}
.dish figure {
  position: relative;
  margin-bottom: calc(20 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .dish figure {
    margin-bottom: 2rem;
  }
}
.dish figure img {
  width: 100%;
}
.dish figure figcaption {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: calc(16 / 375 * 100vw);
  color: #D92817;
  font-family: "Kaisei Opti";
  font-weight: 700;
  width: calc(38 / 375 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  top: calc(-4 / 375 * 100vw);
  padding-left: calc(8 / 375 * 100vw);
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 465px) {
  .dish figure figcaption {
    font-size: 2rem;
    width: 4.7rem;
    top: -0.5rem;
    padding-left: 1rem;
  }
}
.dish .col {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: flex-start;
}
.dish .col > h3 {
  margin-bottom: 0;
}
.dish .col + p {
  margin-top: calc(12 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .dish .col + p {
    margin-top: 1.8rem;
  }
}
.dish .limit {
  background-color: #D92817;
  color: #fff;
  min-width: calc(55 / 375 * 100vw);
  font-size: calc(16 / 375 * 100vw);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  padding-inline: calc(6 / 375 * 100vw);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 465px) {
  .dish .limit {
    min-width: 6.8rem;
    font-size: 2rem;
    padding-inline: 0.7rem;
  }
}
.dish h3 {
  font-size: calc(21 / 375 * 100vw);
  font-weight: 700;
  font-family: "Kaisei Opti";
  color: #D92817;
  line-height: 1.28;
  margin-bottom: calc(15 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .dish h3 {
    font-size: 2.6rem;
    margin-bottom: 1.5rem;
  }
}
.dish h3 small {
  font-size: calc(16 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .dish h3 small {
    font-size: 2rem;
  }
}
.dish h3 span {
  display: grid;
  grid-template-columns: auto 1fr;
}
.dish h3 span::before {
  content: "・";
}
.dish .price {
  display: flex;
  justify-content: space-between;
  font-size: calc(18 / 375 * 100vw);
  font-weight: 700;
  font-family: "Kaisei Opti";
  line-height: 1.2;
}
@media screen and (min-width: 465px) {
  .dish .price {
    font-size: 2.2rem;
  }
}
.dish .price small {
  font-size: calc(14 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .dish .price small {
    font-size: 1.7rem;
  }
}
.dish .price + .price {
  margin-top: 0.4em;
}
.dish .disc {
  font-size: calc(16 / 375 * 100vw);
  font-weight: 500;
  margin-top: calc(10 / 375 * 100vw);
  margin-bottom: calc(15 / 375 * 100vw);
  line-height: 1.5;
}
@media screen and (min-width: 465px) {
  .dish .disc {
    font-size: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }
}
.dish h4 {
  padding-top: calc(15 / 375 * 100vw);
  border-top: calc(1.5 / 375 * 100vw) dashed #222;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 465px) {
  .dish h4 {
    padding-top: 1.5rem;
  }
}
.dish h4 em {
  font-style: normal;
  font-size: calc(16 / 375 * 100vw);
  font-weight: 500;
  margin-bottom: calc(8 / 375 * 100vw);
  line-height: 1.2;
}
@media screen and (min-width: 465px) {
  .dish h4 em {
    font-size: 2rem;
    margin-bottom: 0.8rem;
  }
}
.dish h4 em small {
  font-size: calc(13 / 375 * 100vw);
  padding-left: 0.3em;
  padding-right: 0.3em;
}
@media screen and (min-width: 465px) {
  .dish h4 em small {
    font-size: 1.6rem;
  }
}
.dish h4 em small:first-child {
  padding-left: 0;
}
.dish h4 em br + small {
  padding-left: 0;
}
.dish h4 span {
  background-color: #D92817;
  color: #fff;
  font-size: calc(14 / 375 * 100vw);
  font-weight: 500;
  padding: calc(3 / 375 * 100vw) calc(5 / 375 * 100vw);
  line-height: 1;
  width: fit-content;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 465px) {
  .dish h4 span {
    font-size: 1.7rem;
    padding: 0.4rem 0.6rem;
  }
}

.badge1 {
  aspect-ratio: 1;
  background: url(../img/badge_1.svg) no-repeat center/100% auto;
}

.badge3 {
  aspect-ratio: 38/74;
  background: url(../img/badge_3.svg) no-repeat center/100% auto;
}

.badge4 {
  aspect-ratio: 38/92;
  background: url(../img/badge_4.svg) no-repeat center/100% auto;
}

.badge5 {
  aspect-ratio: 38/110;
  background: url(../img/badge_5.svg) no-repeat center/100% auto;
}

.badge7 {
  aspect-ratio: 38/145;
  background: url(../img/badge_7.svg) no-repeat center/100% auto;
}

.ac_close {
  width: 100%;
  color: #D92817;
  text-align: center;
  display: block;
  border-top: 1px solid #D92817;
  font-size: calc(16 / 375 * 100vw);
  letter-spacing: 0.1em;
  line-height: 1;
  padding: calc(12 / 375 * 100vw) 0 calc(20 / 375 * 100vw);
  transition: opacity 0.3s;
}
@media screen and (min-width: 465px) {
  .ac_close {
    font-size: 2rem;
    padding: 1.5rem 0 2.4rem;
  }
}
.ac_close:active {
  opacity: 0.5;
}
@media (hover) {
  .ac_close:hover {
    opacity: 0.5;
  }
}

/*---------
hankyu
-----------*/
.hankyu {
  background-color: #FFEA1C;
  padding: calc(40 / 375 * 100vw) calc(20 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .hankyu {
    padding: 5rem 2.4rem;
  }
}
.hankyu_logo {
  margin-top: calc(35 / 375 * 100vw);
  margin-bottom: calc(40 / 375 * 100vw);
  text-align: center;
}
@media screen and (min-width: 465px) {
  .hankyu_logo {
    margin-top: 4.3rem;
    margin-bottom: 5rem;
  }
}
.hankyu_logo img {
  width: calc(210 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .hankyu_logo img {
    width: 26rem;
  }
}
.hankyu_menu {
  display: grid;
  row-gap: calc(10 / 375 * 100vw);
  padding-bottom: calc(40 / 375 * 100vw);
  border-bottom: 1px dashed #222;
  margin-bottom: calc(27 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .hankyu_menu {
    row-gap: 1.2rem;
    padding-bottom: 5rem;
    margin-bottom: 3.3rem;
  }
}
.hankyu_info {
  font-size: calc(12 / 375 * 100vw);
  line-height: 1.5;
  letter-spacing: 0.1em;
  margin-bottom: calc(15 / 375 * 100vw);
}
@media screen and (min-width: 465px) {
  .hankyu_info {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
.hankyu_copy {
  font-size: calc(9 / 375 * 100vw);
  font-weight: 500;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 465px) {
  .hankyu_copy {
    font-size: 1.2rem;
  }
}

/*---------
walk anime
-----------*/
.walk {
  position: absolute;
  right: 0;
  top: calc(100% + 7 / 375 * 100vw);
  animation: walk 7s steps(8, jump-none) infinite;
  width: 100%;
}
@media screen and (min-width: 465px) {
  .walk {
    top: calc(100% + 1rem);
  }
}
.walk img {
  width: calc(49 / 375 * 100vw);
  aspect-ratio: 49/59;
}
@media screen and (min-width: 465px) {
  .walk img {
    width: 6.1rem;
  }
}
.walk .illust1 {
  margin-left: auto;
  display: block;
}
.walk .illust2 {
  left: auto;
  right: 0;
}

.walk2 {
  position: absolute;
  left: 0;
  top: calc(100% + 7 / 375 * 100vw);
  animation: walk2 7s steps(8, jump-none) infinite;
  width: 100%;
}
@media screen and (min-width: 465px) {
  .walk2 {
    top: calc(100% + 1rem);
  }
}
.walk2 img {
  width: calc(49 / 375 * 100vw);
  aspect-ratio: 49/59;
  transform: scale(-1, 1);
}
@media screen and (min-width: 465px) {
  .walk2 img {
    width: 6.1rem;
  }
}

@keyframes walk {
  0% {
    right: 0;
  }
  100% {
    right: 120%;
  }
}
@keyframes walk2 {
  0% {
    left: 0;
  }
  100% {
    left: 120%;
  }
}
.anime.fade {
  opacity: 0;
  transition: 0.5s ease-in;
}
.anime.fade.show {
  opacity: 1;
}
.anime.bound {
  transition: 0.5s cubic-bezier(0, 0.82, 0.54, 1.25);
  transform: scale(0.5);
  opacity: 0;
}
.anime.bound.show {
  transform: scale(1);
  opacity: 1;
}

#control {
  position: fixed;
  bottom: calc(8 / 375 * 100vw);
  left: calc(8 / 375 * 100vw);
  z-index: 100;
  width: calc(60 / 375 * 100vw);
  height: calc(60 / 375 * 100vw);
  background: url(../img/icon_sound_off.svg) no-repeat center/100% auto;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.12));
}
@media screen and (min-width: 465px) {
  #control {
    left: calc(50% - 22.5rem);
    bottom: 0.5rem;
    width: 7rem;
    height: 7rem;
  }
}
#control.on {
  background-image: url(../img/icon_sound_on.svg);
}

.wrap.open #control {
  opacity: 0;
}/*# sourceMappingURL=style.css.map */