@charset "UTF-8";
.p-cafestand {
  background: #f8d635;
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
}
.g-header {
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 767px) {
  .g-header {
    opacity: 0;
    visibility: hidden;
  }
}

/* mv
//* -------------------------------------------------- */
.mv {
  position: relative;
  background: #f8d635;
}
.mv-loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  z-index: 2000;
  overflow: hidden;
  pointer-events: none;
  background: #f8d635;
}
.mv-loading__logo {
  position: absolute;
  left: 50%;
  top: 47%;
  width: calc(300vw / 14);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.mv-loading__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.mv-loading__line {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 2px;
  background: #fff;
  transform: translateY(-50%);
  transform-origin: center center;
  z-index: 4;
}

.mv-loading__plane {
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(50px, 5.7vw, 80px);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
}
.mv-mvBlock {
  position: relative;
  width: 100%;
  padding: 3vw 0 10vw;
}

.mv-heading {
  position: relative;
  z-index: 5;
  width: calc(629vw / 14);
  margin: 0 auto;
  text-align: center;
  line-height: 1;
}
.mv-heading img {
  display: block;
  width: 100%;
  height: auto;
}
.mv-mv {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 1vw auto 0;
  opacity: 0;
  visibility: hidden;
}
.mv-heading,
.mv-textBlock {
  opacity: 0;
  visibility: hidden;
}
.mv-mv img {
  display: block;
  width: 100%;
  height: auto;
}
.mv-textBlock__title {
  margin: 0.5em auto 0;
  font-size: 3.125rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
}
.mv-textBlock__title span {
  font-size: 7rem;
}
.mv-textBlock__place {
  width: fit-content;
  margin: 1em auto 0;
  padding: 0 .5em;
  background: #000;
  color: #fff;
  font-size: 1.81rem;
  font-weight: 700;
  text-align: center;
}
.mv-textBlock__text {
  margin: 2em auto 0;
  font-size: 1rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .mv-loading__logo {
    width: calc(397vw / 7.5);
  }
  .mv-loading__plane {
    width: calc(70vw / 7.5);
  }
  .mv-mvBlock {
    padding: calc(150vw / 7.5) 0 calc(150vw / 7.5);
  }
  .mv-heading {
    width: calc(699vw / 7.5);
  }
  .mv-mv {
    margin-top: calc(10vw / 7.5);
  }
  .mv-textBlock__title {
    margin-top: 1em;
    font-size: calc(38vw / 7.5);
    line-height: 1.2;
  }
  .mv-textBlock__title span {
    font-size: calc(87vw / 7.5);
  }
  .mv-textBlock__place {
    padding: .5em 1em;
    font-size: calc(26vw / 7.5);
  }
  .mv-textBlock__text {
    padding: 0 calc(30vw / 7.5);
    font-size: calc(24vw / 7.5);
    line-height: 2;
  }
}

/* anchor
//* -------------------------------------------------- */
.anchor {
  background: #fff;
  padding: calc(110vw /14) 0 calc(160vw /14);
  overflow: hidden;
}
.anchor-lists li {
  display: flex;
}
.anchor-lists li:nth-child(even) {
  justify-content: flex-end;
}
.anchor-lists li:nth-child(n+2) {
  margin-top: calc(120vw /14);
}
.anchor-lists li:nth-child(odd).is-state_scroll {
  animation: slideInLeftAnime .8s forwards ease-out;
}
@keyframes slideInLeftAnime {
  from {
    opacity: 1;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anchor-lists li:nth-child(even).is-state_scroll {
  animation: slideInRightAnime .8s forwards ease-out;
}
@keyframes slideInRightAnime {
  from {
    opacity: 1;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.anchor-img {
  width: calc(770vw /14);
  position: relative;
}
.anchor-img img {
  position: relative;
  z-index: 1;
}
.anchor-img::after {
  display: block;
  content: '';
  position: absolute;
  width: 98%;
  height: 99%;
  bottom: calc(-29.5vw /14);
  background-color: #ffe100;
  z-index: 0;
}
.anchor-lists li:nth-child(odd) .anchor-img::after {
  right: calc(-29.5vw /14);
}
.anchor-lists li:nth-child(even) .anchor-img::after {
  left: calc(-29.5vw /14);
}

@media screen and (max-width: 767px) {
  .anchor {
    padding: calc(110vw /7.5) 0 calc(160vw /7.5);
  }
  .anchor-lists li:nth-child(n+2) {
    margin-top: calc(150vw /7.5);
  }
  .anchor-img {
    width: calc(620vw /7.5);
  }
  .anchor-img::after {
    bottom: calc(-25vw /7.5);
  }
  .anchor-lists li:nth-child(odd) .anchor-img::after {
    right: calc(-25vw /7.5);
  }
  .anchor-lists li:nth-child(even) .anchor-img::after {
    left: calc(-25vw /7.5);
  }
}

@media (hover: hover) {
  .anchor-lists li:nth-child(odd) .anchor-img:hover img {
    transform: translateY(2.15vw)translateX(2.15vw);
  }
  .anchor-lists li:nth-child(even) .anchor-img:hover img {
    transform: translateY(2.15vw)translateX(-2.15vw);
  }
}

/* menu
//* -------------------------------------------------- */
.menu-mv {
  height: calc(936vw /14);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  opacity: 1;
}
.menu__bar .menu-mv {
  background-image: url(./img/mv_bar.png);
  background-size: 120%;
}
.menu__soft .menu-mv {
  background-image: url(./img/mv_soft.png);
  background-size: 120%;
}
.menu-mv.is-state_scroll {
  animation: slideZoomAnime 2.5s forwards ease-out;
}
@keyframes slideZoomAnime {
  from {
    opacity: 1;
    background-size: 120%;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    background-size: 102%;
    transform: translateY(0);
  }
}

.menu-heading {
  position: absolute;
  top: 0;
  left: 0;
}
.menu-heading__ico {
  width: calc(140vw /14);
  height: calc(140vw /14);
  border-radius: 0 0 calc(9vw /14) 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu__bar .menu-heading__ico img {
  width: calc(55vw /14);
  height: calc(91vw /14);
  margin-left: calc(-5vw /14);
}
.menu__soft .menu-heading__ico img {
  width: calc(35vw /14);
  height: calc(92vw /14);
  margin-left: calc(-5vw /14);
}
.menu__beverage .menu-heading__ico img {
  width: calc(70vw /14);
  height: calc(67vw /14);
}
.menu-heading__en {
  width: calc(53vw /14);
  margin: calc(20vw /14) auto 0;
}

.menu-content {
  background-color: #4c3329;
  padding: calc(60vw /14) 0 calc(80vw /14);
  position: relative;
}
.menu-title {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
}
.menu-title__limited {
  background-color: #ffe100;
  width: calc(148vw /14);
  height: calc(148vw /14);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(9vw /14);
  margin-right: 1em;
}
.menu-title__limited img {
  width: calc(86vw /14);
}
.menu__bar .menu-title__jp {
  width: calc(372vw /14);
}
.menu__soft .menu-title__jp {
  width: calc(307vw /14);
}

.menu-items {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #ffe423;
  z-index: 1;
  position: relative;
}
.menu-name {
  color: #fff;
  font-size: calc(22vw /14);
  margin-top: 2em;
}
.menu-price {
  font-size: calc(22vw /14);
  line-height: 1;
}
.menu-price span {
  font-size: calc(10vw /14);
}
.menu-composition {
  font-size: calc(14vw /14);
  margin: .8em auto 0;
  line-height: 1.5;
}
.menu .componentLink {
  margin: .5em auto 0;
  border-bottom: 1px solid;
  width: fit-content;
  font-size: calc(14vw /14);
}

.menu__bar .menu-items {
  margin-top: calc(50vw /14);
}
.menu__bar .menu-item {
  margin: 0 calc(30vw /14);
}
.menu__bar picture {
  width: calc(142vw /14);
  margin: 0 auto;
}

.menu__soft .menu-items {
  margin-top: calc(30vw /14);
}
.menu__soft .menu-item {
  margin: 0 auto;
}
.menu__soft picture {
  width: calc(128vw /14);
  margin: 0 auto;
}

.menu__beverage .menu-mv {
  height: auto;
  padding: calc(140vw /14) 0 calc(100vw /14);
}
.menu__beverage .menu-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu__beverage .menu-img picture {
  width: calc(550vw /14);
  margin-right: calc(50vw /14);
}
.menu__beverage .menu-img p {
  font-size: calc(26vw /14);
  line-height: 1.5;
  font-weight: 700;
  text-align: left;
  letter-spacing: .05em;
}
.menu__beverage .menu-img span {
  font-size: calc(44vw /14);
  font-weight: 900;
  margin-right: .1em;
}

.menu__beverage .menu-service {
  background-color: #fff396;
  border-radius: calc(9vw /14);
  width: calc(940vw /14);
  margin: calc(50vw /14) auto 0;
  padding: calc(40vw /14) 0 calc(40vw /14);
}
.menu__beverage .menu-service p {
  font-size: calc(18vw /14);
  color: #4c3329;
  text-align: center;
}
.menu__beverage .menu-service .text_cap {
  font-size: calc(14vw /14);
  margin-top: 1em;
}

.loop-slider {
  overflow: hidden;
  width: 100%;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto;
  height: calc(100vw /14);
  z-index: 0;
}
.loop-track {
  display: flex;
  width: max-content;
  animation: infinite-scroll 30s linear infinite;
}
.loop-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.loop-list li {
  width: calc(1000vw /14);
  height: calc(100vw /14);
  flex-shrink: 0;
  padding: 0 calc(20vw /14);
}
.menu__soft .loop-list li {
  width: calc(1480vw /14);
}
.loop-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes infinite-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 767px) {
  .menu-mv {
    height: calc(1390vw /7.5);
  }
  .menu__bar .menu-mv {
    background-image: url(./img/mv_bar_sp.png);
  }
  .menu__soft .menu-mv {
    background-image: url(./img/mv_soft_sp.png);
  }
  .menu-heading__ico {
    width: calc(140vw /7.5);
    height: calc(140vw /7.5);
    border-radius: 0 0 calc(9vw /7.5) 0;
  }
  .menu__bar .menu-heading__ico img {
    width: calc(55vw /7.5);
    height: calc(91vw /7.5);
    margin-left: calc(-5vw /7.5);
  }
  .menu__soft .menu-heading__ico img {
    width: calc(35vw /7.5);
    height: calc(92vw /7.5);
    margin-left: calc(-5vw /7.5);
  }
  .menu__beverage .menu-heading__ico img {
    width: calc(70vw /7.5);
    height: calc(67vw /7.5);
  }
  .menu-heading__en {
    width: calc(87vw /7.5);
    margin: calc(20vw /7.5) auto 0;
  }
  .menu__soft .menu-heading__en {
    width: calc(79vw /7.5);
  }

  .menu-content {
    padding: calc(80vw /7.5) 0 calc(120vw /7.5);
  }
  .menu-title__limited {
    width: calc(186vw /7.5);
    height: calc(186vw /7.5);
    border-radius: calc(9vw /7.5);
  }
  .menu-title__limited img {
    width: calc(108vw /7.5);
  }
  .menu__bar .menu-title__jp {
    width: calc(467vw /7.5);
  }
  .menu__soft .menu-title__jp {
    width: calc(387vw /7.5);
  }
  
  .menu-name {
    font-size: calc(28vw /7.5);
    margin-top: 1em;
  }
  .menu-price {
    font-size: calc(28vw /7.5);
  }
  .menu-price span {
    font-size: calc(16vw /7.5);
  }
  .menu-composition {
    font-size: calc(16vw /7.5);
  }
  .menu .componentLink {
    font-size: calc(16vw /7.5);
  }
  
  .menu__bar .menu-items {
    margin-top: calc(50vw /7.5);
  }
  .menu__bar .menu-item {
    margin: 0 calc(20vw /7.5);
    width: 30%;
  }
  .menu__bar picture {
    width: calc(142vw /7.5);
  }
  
  .menu__soft .menu-items {
    margin-top: calc(50vw /7.5);
  }
  .menu__soft picture {
    width: calc(128vw /7.5);
  }
  
  .menu__beverage .menu-mv {
    padding: calc(130vw /7.5) 0 calc(50vw /7.5);
  }
  .menu__beverage .menu-img {
    display: block;
    margin: 0 auto 0 calc(170vw /7.5);
  }
  .menu__beverage .menu-img picture {
    width: calc(550vw /7.5);
    margin: 0 auto;
  }
  .menu__beverage .menu-img p {
    font-size: calc(36vw / 7.5);
    margin: 1.5em auto 0 1em;
    line-height: 1.4;
  }
  .menu__beverage .menu-img span {
    font-size: calc(66vw /7.5);
  }
  
  .menu__beverage .menu-service {
    border-radius: calc(9vw /7.5);
    width: 94%;
    margin: calc(50vw /7.5) auto 0;
    padding: calc(40vw /7.5) 0 calc(40vw /7.5);
    align-items: flex-end;
  }
  .menu__beverage .menu-service p {
    font-size: calc(26vw /7.5);
    line-height: 1.5;
  }
  .menu__beverage .menu-service .text_cap {
    font-size: calc(16vw /7.5);
  }
  
  .menu__soft .loop-track {
    animation: infinite-scroll 40s linear infinite;
  }
  .loop-slider {
    height: calc(100vw /7.5);
  }
  .loop-list li {
    width: calc(1000vw /7.5);
    height: calc(100vw /7.5);
    padding: 0 calc(20vw /7.5);
  }
  .menu__soft .loop-list li {
    width: calc(1480vw /7.5);
  }  
}

/* map
//* -------------------------------------------------- */
.map {
  padding: 120px 0;
  background-color: #fff;
  text-align: center;
}
.map-img {
  max-width: 709px;
  margin: 0 auto;
}
.map-name {
  max-width: 659px;
  margin: 28px auto 0;
}
.map-add {
  margin-top: 1em;
  font-size: 1.375rem;
}
.map-hours {
  margin-top: 1em;
  font-size: 1.375rem;
}
.map-hours span {
  margin-right: 1rem;
  font-size: 1rem;
  background-color: #ffe601;
  padding: 2px 5px 3px;
}
.map-cap {
  font-size: .875rem;
  margin-top: 0.5em;
}
.map .item-links {
  padding-top: 0;
  margin-top: 40px;
}
.map .u-hoverButton {
  background-color: #ffe100;
  color: #4c3329;
}
.map .u-hoverButton__shop {
  background-color: #4c3329;
  color: #fff;
}
.map .u-enkunoji,
.map .u-enkunoji::before {
  border-color: #4c3329;
}

@media screen and (max-width: 767px) {
  .map {
    padding: 40px 0 60px;
  }
  .map-img {
    width: 94%;
  }
  .map-name {
    width: 88%;
  }
  .map-add {
    font-size: .875rem;
  }
  .map-hours {
    margin-top: 2em;
    font-size: .875rem;
  }
  .map-hours span {
    font-size: .875rem;
    padding: 2px 5px 3px;
  }
  .map-cap {
    font-size: .625rem;
    margin-top: 1em;
  }
  .map .item-links {
    margin-top: 20px;
  }
}

/* infomation
//* -------------------------------------------------- */
.infomation {
  background-color: #fff396;
  padding: 60px 0;
}
.infomation .caution-lists {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .infomation {
    padding: 30px 0;
  }
}