@charset "UTF-8";

:root {
  --shop-ink: #20272d;
  --shop-orange: #f47a45;
}

html { scroll-behavior: smooth; }
body:has(.shop-page) {
  margin: 0;
  overflow-x: hidden;
  background-color: #fff1d8;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.3'/%3E%3C/svg%3E"),
    radial-gradient(circle 45rem at 90% 10rem, rgba(255, 224, 90, 0.3) 0%, transparent 35%),
    linear-gradient(90deg, #c8f1f3 0%, #e6ede8 20%, #f8dfbb 40%, #f8dfbb 60%);
}
.shop-page,
.shop-page * { box-sizing: border-box; }
.shop-page { position: relative; width: 128rem; height: 371.9rem; overflow: hidden; color: var(--shop-ink); background: transparent; font-family: "Noto Sans JP", "Yu Gothic", sans-serif; }
.shop-page a { color: inherit; text-decoration: none; }
.shop-page button { font: inherit; }
.shop-page.is-static [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

.shop-main { position: absolute; inset: 0; }
.shop-hero { position: absolute; top: 8rem; left: 0; width: 128rem; height: 42.6rem; }
.shop-breadcrumb { position: absolute; top: 7rem; left: 8rem; display: flex; align-items: center; gap: 1.4rem; font-size: 1.3rem; }
.shop-breadcrumb a { transition: none; }
.shop-breadcrumb a:hover { color: inherit; }
.shop-breadcrumb__arrow { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 1rem; border-top: .2rem solid #777; border-right: .2rem solid #777; transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.shop-breadcrumb span { color: var(--shop-orange); }
.shop-hero__title { position: absolute; top: 14.8rem; left: 8rem; }
.shop-hero__title p { display: flex; align-items: center; gap: 1.4rem; margin: 0 0 1.4rem; color: var(--shop-orange); font-size: 1.6rem; font-weight: 700; letter-spacing: .16rem; }
.shop-hero__title p img { width: 1.4rem; height: 1.4rem; }
.shop-hero__title h1 { margin: 0 0 1.8rem; font-size: 3.6rem; line-height: 1; letter-spacing: .18rem; }
.shop-hero__copy { display: block; font-size: 1.4rem; font-weight: 700; letter-spacing: .04rem; }
.shop-hero__image { position: absolute; top: 9.9rem; left: 87.6rem; display: block; width: 30.9rem; height: 30.7rem; }
.shop-hero__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shop-category { position: absolute; top: 38.9rem; left: 8rem; display: flex; gap: 1.6rem; }
.shop-category a { display: flex; align-items: center; justify-content: center; min-width: 14.6rem; height: 3.9rem; padding: 0 2rem; border: .1rem solid var(--shop-orange); border-radius: 2rem; background: #fff; color: var(--shop-orange); font-size: 1.4rem; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.shop-category a:hover,
.shop-category a:focus-visible { border-color: var(--shop-orange); background-color: var(--shop-orange) !important; color: #fff !important; }
.shop-category a:focus-visible { outline: .2rem solid #fff; outline-offset: -.4rem; }

.shop-list { position: absolute; inset: 0; pointer-events: none; }
.shop-card { position: absolute; left: 8rem; width: 112rem; height: 90rem; scroll-margin-top: 10rem; pointer-events: auto; }
.shop-card:nth-child(1) { top: 58.8rem; }
.shop-card:nth-child(2) { top: 156.8rem; }
.shop-card:nth-child(3) { top: 254.8rem; }
.shop-card__title { position: absolute; top: 0; left: 0; height: 8rem; margin: 0; padding: 2.4rem 0 0 2rem; border-left: .2rem solid var(--shop-orange); font-size: 2.6rem; line-height: 3.2rem; letter-spacing: .2rem; }
.shop-card__photo { position: absolute; top: 12rem; left: 0; display: block; width: 48rem; height: 40rem; overflow: hidden; border-radius: 1.6rem; }
.shop-card.is-reverse .shop-card__photo { left: 64rem; }
.shop-card__photo img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.shop-card__body { position: absolute; top: 12rem; left: 64rem; width: 48rem; height: 40rem; }
.shop-card.is-reverse .shop-card__body { left: 0; }
.shop-card__body dl { margin: 0; }
.shop-card__body dl > div { display: grid; grid-template-columns: 17rem 1fr; min-height: 8.6rem; }
.shop-card__body dt,
.shop-card__body dd { display: flex; align-items: center; margin: 0; font-size: 1.5rem; }
.shop-card__body dt { gap: 1.8rem; font-size: 1.6rem; font-weight: 700; letter-spacing: .12rem; }
.shop-card__body dt img { width: 2.5rem; height: 2.5rem; }
.shop-card__body dd { flex-direction: column; align-items: flex-start; justify-content: center; font-weight: 500; line-height: 2.2rem; }
.shop-card__body dd small { font-size: 1.1rem; }
.shop-card__data-link { position: absolute; bottom: 0; left: 16rem; display: flex; align-items: center; justify-content: center; width: 22rem; height: 6rem; border-radius: 1rem; background: var(--shop-orange); color: #fff !important; font-size: 1.7rem; font-weight: 700; letter-spacing: .12rem; }
.shop-card__data-link img { display: none; }
.shop-card__social { position: absolute; top: 58rem; left: 0; display: block; width: 36rem; height: 32rem; overflow: hidden; border-radius: 1.2rem; background: #fff; }
.shop-x-feed { display: flex; flex-direction: column; height: 100%; color: #0f1419; font-family: Arial, "Noto Sans JP", sans-serif; }
.shop-x-feed__header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; min-height: 6.2rem; padding: 1rem 1.5rem; border-bottom: .1rem solid #eff3f4; }
.shop-x-feed__account { display: flex; min-width: 0; flex-direction: column; }
.shop-x-feed__account strong { overflow: hidden; font-size: 1.4rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.shop-x-feed__account small { color: #536471; font-size: 1.2rem; }
.shop-x-feed__logo { font-size: 2rem; font-weight: 700; }
.shop-x-feed__posts { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.shop-x-feed__post { margin: 0; border-bottom: .1rem solid #eff3f4; }
.shop-x-feed__post > a { display: block; padding: 1.3rem 1.5rem 1.5rem; transition: background-color .2s ease; }
.shop-x-feed__post > a:hover { background: #f7f9f9; }
.shop-x-feed__post time { display: block; margin-bottom: .6rem; color: #536471; font-size: 1.1rem; }
.shop-x-feed__post p { margin: 0; font-size: 1.3rem; line-height: 1.65; overflow-wrap: anywhere; }
.shop-x-feed__post img { display: block; width: 100%; max-height: 24rem; margin-top: 1rem; border-radius: 1rem; object-fit: cover; }
.shop-x-feed__error { margin: auto; padding: 2rem; color: #536471; font-size: 1.2rem; line-height: 1.8; text-align: center; }
.shop-x-feed__error a { color: #1d9bf0; text-decoration: underline; }
.shop-card__social-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; background: #d9d9d9; color: #333; font-size: 1.4rem; font-weight: 700; }
.shop-card__map-wrap { position: absolute; top: 58rem; left: 40rem; width: 72rem; height: 32rem; }
.shop-card__map { display: block; width: 100%; height: 100%; border: 0; }

.shop-more { position: absolute; top: 352.8rem; left: 52.7rem; display: flex; align-items: center; gap: 3.2rem; height: 4rem; font-size: 1.8rem; font-weight: 700; }
.shop-more img { width: 4rem; height: 4rem; }

@media (min-width: 1281px) {
  .shop-page { transform: scale(calc(100vw / 1280)); transform-origin: top left; margin-bottom: calc(3719px * (100vw / 1280 - 1)); }
}

@media (max-width: 700px) {
  html { font-size: calc(100vw / 37.5) !important; }
  .shop-page { width: 37.5rem; min-width: 32rem; height: 457.3672rem; }
  .shop-hero { top: 8rem; width: 37.5rem; height: 22.6rem; }
  .shop-breadcrumb { top: 1.8rem; left: 2rem; gap: 1rem; font-size: 1rem; }
  .shop-breadcrumb__arrow { width: .7rem; height: .7rem; }
  .shop-hero__title { top: 5.1rem; left: 2rem; width: 20rem; }
  .shop-hero__title p { gap: .8rem; margin-bottom: .9rem; font-size: 1.2rem; letter-spacing: .12rem; }
  .shop-hero__title p img { width: 1rem; height: 1rem; }
  .shop-hero__title h1 { margin-bottom: 1.2rem; font-size: 2.4rem; letter-spacing: .12rem; }
  .shop-hero__copy { width: 18rem; font-size: 1rem; line-height: 1.8rem; }
  .shop-hero__image { top: 1.5rem; left: 23.2rem; width: 12.5rem; height: 13.6rem; }
  .shop-category { display: none; }
  .shop-card { left: 0; width: 37.5rem; height: 135rem; scroll-margin-top: 8rem; }
  .shop-card:nth-child(1) { top: 30.6rem; }
  .shop-card:nth-child(2) { top: 165.6rem; }
  .shop-card:nth-child(3) { top: 300.6rem; height: 137.2672rem; }
  .shop-card__title { top: 3.6rem; left: 2rem; height: 4rem; padding: .8rem 0 0 1.4rem; font-size: 1.8rem; line-height: 2.4rem; letter-spacing: .09rem; }
  .shop-card__photo,
  .shop-card.is-reverse .shop-card__photo { top: 9.6rem; left: 2rem; width: 33.5rem; height: 27.9rem; border-radius: 1.2rem; }
  .shop-card__body,
  .shop-card.is-reverse .shop-card__body { top: 40rem; left: 2rem; width: 33.5rem; height: 29.4rem; }
  .shop-card__body dl > div { grid-template-columns: 10rem 1fr; column-gap: 1.2rem; min-height: 5.2rem; }
  .shop-card__body dl > .shop-card__address { min-height: 6.8rem; }
  .shop-card__body dt,
  .shop-card__body dd { font-size: 1.4rem; line-height: 1.75; letter-spacing: .07rem; }
  .shop-card__body dt { gap: 1.2rem; font-size: 1.4rem; letter-spacing: .21rem; white-space: nowrap; }
  .shop-card__body dt img { width: 2.8rem; height: 2.8rem; }
  .shop-card__body dd small { font-size: 1.2rem; font-weight: 400; line-height: normal; letter-spacing: .06rem; }
  .shop-card__data-link { bottom: 0; left: 0; width: 33.5rem; height: 5.5rem; border-radius: .8rem; font-size: 1.3rem; }
  .shop-card__social { top: 71.4rem; left: 2rem; width: 33.5rem; height: 38rem; border-radius: 1rem; }
  .shop-card__social-empty { font-size: 1.1rem; }
  .shop-card__map-wrap { top: 111.4rem; left: 2rem; width: 33.5rem; height: 20rem; }
  .shop-card:nth-child(3) .shop-card__body { height: 31.7rem; }
  .shop-card:nth-child(3) .shop-card__social { top: 73.7rem; }
  .shop-card:nth-child(3) .shop-card__map-wrap { top: 113.7rem; }
  .shop-more { top: 437.8672rem; left: 9.8rem; gap: 2.4rem; height: 4.4rem; font-size: 1.6rem; }
  .shop-more img { width: 4rem; height: 4rem; }
}