@layer component {
  .c-anchor-link:not(:first-child) {
    margin-top: var(--anchor-mt, clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem));
  }
  .c-anchor-link__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(20px / var(--fz-base, 16px) * 1rem);
  }
  .c-anchor-link__item {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(5px / var(--fz-base, 16px) * 1rem);
    font-size: clamp(0.8125rem, calc(14px / var(--design-width, 1440px) * 100vw), 0.875rem);
  }
  .c-anchor-link__item::after {
    content: "";
    display: block;
    width: calc(20px / var(--fz-base, 16px) * 1rem);
    height: calc(20px / var(--fz-base, 16px) * 1rem);
    background: url("../../common/img/bracket-right.svg") center center no-repeat;
    background-size: 5px 8px;
    transform: rotate(90deg);
  }
}
@layer component {
  .c-pagination {
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .c-pagination:not(:first-child) {
    margin-top: clamp(3.5rem, calc(96px / var(--design-width, 1440px) * 100vw), 6rem);
  }
  .c-pagination__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .c-pagination__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--pagination-button-size, clamp(2rem, calc(44px / var(--design-width, 1440px) * 100vw), 2.75rem));
    height: var(--pagination-button-size, clamp(2rem, calc(44px / var(--design-width, 1440px) * 100vw), 2.75rem));
    border-radius: 50%;
    background-color: var(--pagination-button-bgc, color-mix(in srgb, #fff, #000 5%));
  }
  .c-pagination__button a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .c-pagination__button.is-disabled {
    background-color: transparent;
    pointer-events: none;
    opacity: 0.4;
  }
  .c-pagination__button::before {
    content: "";
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../common/img/bracket-right.svg") center center no-repeat;
    background-size: 5px 8px;
    opacity: 0.867;
  }
  .c-pagination__button--prev::before {
    transform: rotate(-180deg);
  }
  .c-pagination__items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, calc(12px / var(--design-width, 1440px) * 100vw), 0.75rem);
  }
  .c-pagination__item {
    font-family: var(--ff-en);
    position: relative;
    width: var(--pagination-button-size, 24px);
    height: var(--pagination-button-size, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-pagination__item :is(a, span) {
    font-size: clamp(0.9375rem, calc(16px / var(--design-width, 1440px) * 100vw), 1rem);
    font-weight: 500;
  }
  .c-pagination__item :is(a, span)::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .c-pagination__item.is-current::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
  }
}
@layer project {
  .p-section:has(.c-tab-switcher) {
    --section-content-mt: clamp(1.25rem, calc(24px / var(--design-width, 1440px) * 100vw), 1.5rem);
  }
  .p-section[data-variant*="bg:"] .p-section__inner, .p-section[data-variant*="border:"] .p-section__inner {
    background: var(--section-bg, #fff);
    padding-block: clamp(3rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
  }
  .p-section[data-variant*="bg:light-gray"] {
    --section-bg: #F5F5F5;
  }
  .p-section[data-variant*="bdc:light-gray"] {
    --section-bdc: #ddd;
  }
  .p-section[data-variant*="border:block"] {
    border-block: 1px solid var(--section-bdc, #000);
  }
  .p-section__inner {
    --minmax: max(calc(var(--content-min-margin, 24) * 1px), calc(var(--content-base-margin, 40) / var(--content-base-width, 1440) * 100vw));
    max-width: var(--content-max-width, 100%);
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - var(--minmax) * 2);
    padding-inline: clamp(1.25rem, calc(60px / var(--design-width, 1440px) * 100vw), 3.75rem);
    border-radius: calc(20px / var(--fz-base, 16px) * 1rem);
  }
  .p-section__header {
    display: grid;
    gap: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .p-section__header[data-variant*="justify:center"] {
    justify-content: center;
  }
  .p-section__header-column .c-tab-switcher:not(:first-child) {
    margin-top: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
  }
  .p-section__heading {
    font-size: clamp(1.5rem, calc(28px / var(--design-width, 1440px) * 100vw), 1.75rem);
    font-weight: bold;
    line-height: 1.1;
    font-family: var(--ff-en);
    letter-spacing: 0.02em;
  }
  .p-section__content {
    padding-block: clamp(1rem, calc(20px / var(--design-width, 1440px) * 100vw), 1.25rem);
  }
  .p-section__content:not(:first-child) {
    margin-top: var(--section-content-mt, clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem));
  }
}
.pg-shop {
  --content-max-width: calc(1080px / var(--fz-base, 16px) * 1rem);
  padding-block: clamp(4rem, calc(80px / var(--design-width, 1440px) * 100vw), 5rem);
}

.pg-shop-section {
  padding-bottom: clamp(1rem, calc(20px / var(--design-width, 1440px) * 100vw), 1.25rem);
}
.pg-shop-section + .pg-shop-section {
  margin-top: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
}
.pg-shop-section__header {
  display: flex;
  justify-content: center;
}
.pg-shop-section__header + * {
  margin-top: clamp(1.5rem, calc(32px / var(--design-width, 1440px) * 100vw), 2rem);
}
.pg-shop-section__title {
  width: 100%;
  font-size: clamp(1.25rem, calc(20px / var(--design-width, 1440px) * 100vw), 1.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
}
@media (min-width: 62.0625em) {
  .pg-shop-section__title {
    max-width: calc(960px / var(--fz-base, 16px) * 1rem);
  }
}

.pg-shop-list {
  display: grid;
  gap: clamp(1rem, calc(24px / var(--design-width, 1440px) * 100vw), 1.5rem);
}
.pg-shop-list[data-variant=physical-store] {
  gap: 0;
}
@media (min-width: 62.0625em) {
  .pg-shop-list[data-variant=online-store] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: clamp(1.5rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
         column-gap: clamp(1.5rem, calc(40px / var(--design-width, 1440px) * 100vw), 2.5rem);
    row-gap: clamp(1rem, calc(20px / var(--design-width, 1440px) * 100vw), 1.25rem);
  }
}
@media (min-width: 62.0625em) {
  .pg-shop-list[data-variant=physical-store] {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 62.0625em) {
  .pg-shop-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pg-shop-area-list {
  display: grid;
  border-top: calc(1px / var(--fz-base, 16px) * 1rem) solid #ddd;
}

.pg-shop-area__header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(60px / var(--fz-base, 16px) * 1rem);
  padding: calc(16px / var(--fz-base, 16px) * 1rem) calc(20px / var(--fz-base, 16px) * 1rem);
  background: rgba(0, 0, 0, 0.05);
}
.pg-shop-area__title {
  font-size: clamp(0.9375rem, calc(15px / var(--design-width, 1440px) * 100vw), 0.9375rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
}

.pg-shop-card__inner {
  display: flex;
  width: 100%;
}
.pg-shop-card__content {
  width: 100%;
}
.pg-shop-card__title {
  font-size: calc(14px / var(--fz-base, 16px) * 1rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.pg-shop-list[data-variant=physical-store] .pg-shop-card {
  border-bottom: calc(1px / var(--fz-base, 16px) * 1rem) solid #ddd;
}
.pg-shop-list[data-variant=physical-store] .pg-shop-card__inner {
  padding-block: calc(20px / var(--fz-base, 16px) * 1rem);
  color: inherit;
}
@media (min-width: 62.0625em) {
  .pg-shop-list[data-variant=physical-store] .pg-shop-card__inner {
    align-items: flex-start;
    gap: calc(32px / var(--fz-base, 16px) * 1rem);
  }
}
.pg-shop-list[data-variant=physical-store] .pg-shop-card__content {
  display: grid;
  gap: calc(12px / var(--fz-base, 16px) * 1rem);
}
@media (min-width: 62.0625em) {
  .pg-shop-list[data-variant=physical-store] .pg-shop-card__content {
    grid-template-columns: minmax(calc(180px / var(--fz-base, 16px) * 1rem), calc(300px / var(--fz-base, 16px) * 1rem)) minmax(0, 1fr);
    align-items: start;
    gap: calc(32px / var(--fz-base, 16px) * 1rem);
  }
}
.pg-shop-list[data-variant=physical-store] .pg-shop-card__meta {
  display: grid;
  gap: calc(8px / var(--fz-base, 16px) * 1rem);
  font-size: clamp(0.8125rem, calc(14px / var(--design-width, 1440px) * 100vw), 0.875rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.pg-shop-list[data-variant=physical-store] .pg-shop-card__meta-row {
  display: grid;
  grid-template-columns: calc(72px / var(--fz-base, 16px) * 1rem) minmax(0, 1fr);
  gap: calc(8px / var(--fz-base, 16px) * 1rem);
  align-items: start;
}
.pg-shop-list[data-variant=physical-store] .pg-shop-card__meta-label {
  display: block;
}
.pg-shop-list[data-variant=physical-store] .pg-shop-card__meta-value {
  display: block;
  min-width: 0;
}
.pg-shop-list[data-variant=online-store] .pg-shop-card {
  position: relative;
}
.pg-shop-list[data-variant=online-store] .pg-shop-card::before, .pg-shop-list[data-variant=online-store] .pg-shop-card::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--shop-list-card-border-w, 0);
  height: calc(1px / var(--fz-base, 16px) * 1rem);
  transition: width 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.pg-shop-list[data-variant=online-store] .pg-shop-card::before {
  --shop-list-card-border-w: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
.pg-shop-list[data-variant=online-store] .pg-shop-card::after {
  background-color: #000000;
}
@media (hover: hover) and (pointer: fine) {
  .pg-shop-list[data-variant=online-store] .pg-shop-card:hover:has(a[href])::after {
    --shop-list-card-border-w: 100%;
  }
}
.pg-shop-list[data-variant=online-store] .pg-shop-card__inner {
  align-items: center;
  justify-content: space-between;
  gap: calc(16px / var(--fz-base, 16px) * 1rem);
  padding-top: calc(20px / var(--fz-base, 16px) * 1rem);
  padding-bottom: calc(18px / var(--fz-base, 16px) * 1rem);
}
.pg-shop-list[data-variant=online-store] .pg-shop-card__inner::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(12px / var(--fz-base, 16px) * 1rem);
  height: calc(12px / var(--fz-base, 16px) * 1rem);
  background: url("../../common/img/bracket-right.svg") center/calc(5px / var(--fz-base, 16px) * 1rem) calc(8px / var(--fz-base, 16px) * 1rem) no-repeat;
}
.pg-shop-card__img {
  aspect-ratio: 290/385;
  border-radius: calc(8px / var(--fz-base, 16px) * 1rem);
  overflow: hidden;
}
.pg-shop-card__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}