@media print, screen and (min-width: 767px) {
  .guidanceArea__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceArea__item {
    width: 50%;
  }
}

.guidanceCard {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
@media print, screen and (min-width: 767px) {
  .guidanceCard {
    height: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-bottom: 9.6rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard:hover .guidanceCard__desc .guideArrow {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .guidanceCard:hover .guidanceCard__desc .guideArrow .arrow {
    -webkit-transform: translate(5%, -5%);
            transform: translate(5%, -5%);
  }
}
@media (hover: hover) and (pointer: fine) {
  .guidanceCard:hover .guidanceCard__desc .guideArrow {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .guidanceCard:hover .guidanceCard__desc .guideArrow .arrow {
    -webkit-transform: translate(5%, -5%);
            transform: translate(5%, -5%);
  }
}
.guidanceCard__desc {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media print, screen and (min-width: 767px) {
  .guidanceCard__desc {
    gap: 2rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard__desc {
    gap: 1.6rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard__desc .guideArrow {
    width: 7rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard__desc .guideArrow {
    width: 5rem;
  }
}
.guidanceCard__name {
  line-height: 1.6;
}
.guidanceCard__name .lead {
  display: block;
}
@media print, screen and (min-width: 767px) {
  .guidanceCard__name .lead {
    font-size: 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard__name .lead {
    font-size: 1.2rem;
  }
}
.guidanceCard__name .ttl {
  display: block;
}
@media print, screen and (min-width: 767px) {
  .guidanceCard__name .ttl {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard__name .ttl {
    font-size: 2.4rem;
  }
}
.guidanceCard--cafe {
  background-color: #ffe963;
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--cafe {
    padding-top: 16rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard--cafe {
    height: 45.7rem;
    padding-top: 9.2rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--cafe:hover .guidanceCard__desc .guideArrow {
    background-color: #ffffff;
    color: #5d4c45;
  }
}
@media (hover: hover) and (pointer: fine) {
  .guidanceCard--cafe:hover .guidanceCard__desc .guideArrow {
    background-color: #ffffff;
    color: #5d4c45;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--cafe .guidanceCard__logo {
    width: 40.9rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard--cafe .guidanceCard__logo {
    width: 23.4rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--cafe .guidanceCard__character {
    margin-top: 4.4rem;
    width: 38.9rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard--cafe .guidanceCard__character {
    margin-top: 1rem;
    width: 17rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--cafe .guidanceCard__desc {
    margin-top: 6.4rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard--cafe .guidanceCard__desc {
    margin-top: 2rem;
  }
}
.guidanceCard--cafe .guidanceCard__desc .guideArrow {
  background-color: #5d4c45;
}
.guidanceCard--petit {
  background-color: #a7a8aa;
  color: #ffffff;
}
@media screen and (max-width: 767px) {
  .guidanceCard--petit {
    height: 38.7rem;
    padding-top: 4.9rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--petit:hover .guidanceCard__desc .guideArrow {
    background-color: #ffffff;
    color: #8d9194;
  }
}
@media (hover: hover) and (pointer: fine) {
  .guidanceCard--petit:hover .guidanceCard__desc .guideArrow {
    background-color: #ffffff;
    color: #8d9194;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--petit .guidanceCard__logo {
    width: 49.8rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard--petit .guidanceCard__logo {
    width: 21.6rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--petit .guidanceCard__character {
    margin-top: 2.5rem;
    width: 20.4rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard--petit .guidanceCard__character {
    margin-top: 1rem;
    width: 10rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guidanceCard--petit .guidanceCard__desc {
    margin-top: 7.8rem;
  }
}
@media screen and (max-width: 767px) {
  .guidanceCard--petit .guidanceCard__desc {
    margin-top: 3rem;
  }
}
.guidanceCard--petit .guidanceCard__desc .guideArrow {
  background-color: #53565a;
}

.guideArrow {
  aspect-ratio: 1/1;
  border-radius: 50%;
  color: #ffffff;
  -webkit-transition: background-color 0.6s ease, color 0.6s ease, -webkit-transform 0.8s ease;
  transition: background-color 0.6s ease, color 0.6s ease, -webkit-transform 0.8s ease;
  transition: background-color 0.6s ease, color 0.6s ease, transform 0.8s ease;
  transition: background-color 0.6s ease, color 0.6s ease, transform 0.8s ease, -webkit-transform 0.8s ease;
}
.guideArrow .arrow {
  display: block;
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}

@media print, screen and (min-width: 767px) {
  .guideBnrArea {
    margin-top: 4rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea {
    margin-top: 4rem;
    padding: 0 3.2rem 4rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3.2rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__item {
    width: 67.6rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__item + .guideBnrArea__item {
    margin-top: 3rem;
  }
}
.guideBnrArea__link {
  display: block;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__link:hover .guideBnrArea__bg {
    opacity: 0.8;
  }
  .guideBnrArea__link:hover .guideArrow {
    background-color: #ffffff;
    color: #5d4c45;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  .guideBnrArea__link:hover .guideArrow .arrow {
    -webkit-transform: translate(5%, -5%);
            transform: translate(5%, -5%);
  }
}
@media (hover: hover) and (pointer: fine) {
  .guideBnrArea__link:hover .guideBnrArea__bg {
    opacity: 0.8;
  }
  .guideBnrArea__link:hover .guideArrow {
    background-color: #ffffff;
    color: #5d4c45;
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  .guideBnrArea__link:hover .guideArrow .arrow {
    -webkit-transform: translate(5%, -5%);
            transform: translate(5%, -5%);
  }
}
.guideBnrArea__link .guideArrow {
  background-color: #5d4c45;
  border: 0.1rem solid #5d4c45;
  bottom: 0;
  position: absolute;
  right: 0;
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__link .guideArrow {
    width: 5rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__link .guideArrow {
    width: 5rem;
  }
}
.guideBnrArea__link--store .guideBnrArea__name {
  background-color: #ffe963;
  line-height: 1.3;
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__link--store .guideBnrArea__name {
    border-radius: 1rem;
    left: 1rem;
    padding: 1rem 1.6rem;
    top: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__link--store .guideBnrArea__name {
    border-radius: 1rem;
    left: 1rem;
    padding: 0.6rem 1.6rem;
    top: 1rem;
  }
}
.guideBnrArea__link--store .guideBnrArea__name .lead {
  display: block;
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__link--store .guideBnrArea__name .lead {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__link--store .guideBnrArea__name .lead {
    font-size: 1.2rem;
  }
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__link--store .guideBnrArea__name .ttl {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__link--store .guideBnrArea__name .ttl {
    font-size: 1.8rem;
  }
}
.guideBnrArea__link--popup .guideBnrArea__name {
  left: 50%;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
}
.guideBnrArea__link--popup .guideBnrArea__name .lead {
  background-color: #ffe963;
  display: inline-block;
  line-height: 1.2;
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__link--popup .guideBnrArea__name .lead {
    border-radius: 2.2rem;
    font-size: 1.4rem;
    padding: 0.4rem 2.4rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__link--popup .guideBnrArea__name .lead {
    border-radius: 2.2rem;
    font-size: 1.2rem;
    padding: 0.4rem 1.6rem;
  }
}
.guideBnrArea__link--popup .guideBnrArea__name .ttl {
  color: #ffffff;
  display: block;
  line-height: 1.6;
}
@media print, screen and (min-width: 767px) {
  .guideBnrArea__link--popup .guideBnrArea__name .ttl {
    font-size: 2.8rem;
    margin-top: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__link--popup .guideBnrArea__name .ttl {
    font-size: 2.4rem;
    margin-top: 1.6rem;
  }
}
@media screen and (max-width: 767px) {
  .guideBnrArea__link--popup .guideBnrArea__name .ttl .spSmall {
    font-size: 2rem;
  }
}
.guideBnrArea__name {
  position: absolute;
  z-index: 1;
}
.guideBnrArea__bg {
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
}

.openingVisual {
  height: 100dvh;
  left: 0;
  overflow-y: scroll;
  pointer-events: none;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100vw;
  z-index: 99999;
}
@media print, screen and (min-width: 767px) {
  .openingVisual {
    font-size: calc(0.4340277778vw + 0.4166666667vh);
  }
}
@media screen and (max-width: 767px) {
  .openingVisual {
    font-size: calc(1.1846153846vw + 0.5977777778vh);
  }
}
.openingVisual.is-load {
  pointer-events: auto;
}
.openingVisual.is-load .openingVisual__illust, .openingVisual.is-load .openingVisual__guide {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
.openingVisual.is-open .openingVisual__inner {
  -webkit-transform: translate(0, -100%);
          transform: translate(0, -100%);
}
.openingVisual.is-open .openingVisual__illust {
  -webkit-animation: fly 1.2s cubic-bezier(0.77, 0.1, 0.6, 1);
          animation: fly 1.2s cubic-bezier(0.77, 0.1, 0.6, 1);
}
.openingVisual.is-end {
  display: none;
}
.openingVisual__bg {
  background-color: #ffe963;
  inset: 0;
  position: absolute;
  z-index: -1;
}
.openingVisual__inner {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
  outline: none;
  position: relative;
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.77, 0.1, 0.4, 0.68) 0.4s;
  transition: -webkit-transform 0.8s cubic-bezier(0.77, 0.1, 0.4, 0.68) 0.4s;
  transition: transform 0.8s cubic-bezier(0.77, 0.1, 0.4, 0.68) 0.4s;
  transition: transform 0.8s cubic-bezier(0.77, 0.1, 0.4, 0.68) 0.4s, -webkit-transform 0.8s cubic-bezier(0.77, 0.1, 0.4, 0.68) 0.4s;
  will-change: transform;
  z-index: 1;
}
@media print, screen and (min-width: 767px) {
  .openingVisual__inner {
    gap: 4em;
    height: auto;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .openingVisual__inner {
    gap: 2em;
    padding-top: 8em;
  }
}
@media print, screen and (min-width: 767px) {
  .openingVisual__logo {
    width: 42em;
  }
}
@media screen and (max-width: 767px) {
  .openingVisual__logo {
    width: 25.2em;
  }
}
.openingVisual__logo img {
  max-width: initial;
  width: 100%;
}
.openingVisual__lead {
  line-height: 1.6;
  position: relative;
}
@media print, screen and (min-width: 767px) {
  .openingVisual__lead {
    font-size: 2.6em;
  }
}
@media screen and (max-width: 767px) {
  .openingVisual__lead {
    font-size: 1.6em;
  }
}
.openingVisual__lead:after {
  aspect-ratio: 30/31.461;
  background: url("../common/imgs/icon-balloon-01@2x.png") no-repeat center/contain;
  content: "";
  display: inline-block;
  vertical-align: middle;
}
@media print, screen and (min-width: 767px) {
  .openingVisual__lead:after {
    width: 3.1rem;
  }
}
@media screen and (max-width: 767px) {
  .openingVisual__lead:after {
    width: 2rem;
  }
}
.openingVisual__illust {
  -webkit-animation: floatAnime 1.6s ease-in-out infinite alternate;
          animation: floatAnime 1.6s ease-in-out infinite alternate;
  cursor: pointer;
  opacity: 0;
  position: relative;
  -webkit-transform: translate(0, 10%);
          transform: translate(0, 10%);
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
  will-change: transform;
  z-index: 1;
}
@media print, screen and (min-width: 767px) {
  .openingVisual__illust {
    width: 19em;
  }
}
@media screen and (max-width: 767px) {
  .openingVisual__illust {
    width: 14em;
  }
}
.openingVisual__illust img {
  max-width: initial;
  width: 100%;
}
.openingVisual__guide {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: "century-gothic", sans-serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  opacity: 0;
  -webkit-transform: translate(0, -10%);
          transform: translate(0, -10%);
  -webkit-transition: 0.8s ease;
  transition: 0.8s ease;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}
@media print, screen and (min-width: 767px) {
  .openingVisual__guide {
    font-size: 1.8em;
    gap: 0.2em;
    margin-top: 1.8em;
  }
}
@media screen and (max-width: 767px) {
  .openingVisual__guide {
    font-size: 1.8em;
    gap: 0.2em;
    margin-top: 1.2em;
  }
}
.openingVisual__guide .dir {
  aspect-ratio: 1/1;
  color: transparent;
  display: inline-block;
}
@media print, screen and (min-width: 767px) {
  .openingVisual__guide .dir {
    width: 3rem;
  }
}
@media screen and (max-width: 767px) {
  .openingVisual__guide .dir {
    width: 3rem;
  }
}

@-webkit-keyframes balloon {
  30% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  60% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes balloon {
  30% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  60% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes fly {
  40% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  100% {
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
}
@keyframes fly {
  40% {
    -webkit-transform: translateY(50%);
            transform: translateY(50%);
  }
  100% {
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
}
@-webkit-keyframes floatAnime {
  0% {
    -webkit-transform: translateY(-2em);
            transform: translateY(-2em);
  }
  100% {
    -webkit-transform: translateY(2em);
            transform: translateY(2em);
  }
}
@keyframes floatAnime {
  0% {
    -webkit-transform: translateY(-2em);
            transform: translateY(-2em);
  }
  100% {
    -webkit-transform: translateY(2em);
            transform: translateY(2em);
  }
}