@charset "UTF-8";
.p-shopguide__search-area {
  display: grid;
  gap: var(--layout-section-padding-inner-large);
  padding-block-end: var(--layout-section-padding-heading-3);
  /* FigmaのDividerを最終Grid Itemとして置き、線の前後スペースを別々に保持する */
}
.p-shopguide__search-area::after {
  content: "";
  grid-column: 1/-1;
  block-size: var(--space-1);
  background: var(--semantic-border-tertiary);
}

.p-shopguide__query,
.p-shopguide__filters {
  inline-size: min(var(--ratio-full), var(--layout-content-narrow-width));
  margin-inline: auto;
}

.p-shopguide__query {
  display: grid;
  gap: var(--space-16);
}

.p-shopguide__query .c-searchbar {
  --searchbar-inline-size: var(--ratio-full);
  --searchbar-max-inline-size: none;
  --searchbar-margin-inline: var(--space-0);
}

.p-shopguide__popular {
  display: grid;
  gap: var(--space-12);
}

.p-shopguide__query > .p-shopguide__popular {
  grid-area: 2/1;
  align-self: start;
  min-inline-size: var(--space-0);
}

.p-shopguide[data-shopguide-page=no-results] .p-shopguide__popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.p-shopguide__query[data-popular-collapsed] {
  row-gap: var(--space-0);
}

.p-shopguide__popular[hidden] {
  display: none;
}

.p-shopguide__popular[data-search-empty-suggestions]:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.p-shopguide__popular[data-search-empty-suggestions]:not([hidden]) .p-shopguide__popular-label {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  color: var(--semantic-text-secondary);
}

.p-shopguide__empty-visual[hidden] {
  display: none;
}

.p-shopguide__popular-label {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
}

.p-shopguide__popular .c-chip-group {
  padding-block-end: var(--layout-focus-outer-size);
  margin-block-end: calc(var(--layout-focus-outer-size) * -1);
}

.p-shopguide__applied .c-chip-group {
  flex-wrap: wrap;
  overflow: visible;
  padding-block-end: var(--layout-focus-outer-size);
  margin-block-end: calc(var(--layout-focus-outer-size) * -1);
}

.p-shopguide__filters-title {
  --heading-margin-block-end: var(--component-heading-6-margin-block-end);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
}

.p-shopguide__applied {
  display: grid;
  gap: var(--component-heading-3-margin-block-end);
  margin-block-end: var(--layout-section-padding-inner-large);
}

.p-shopguide__applied[hidden] {
  display: none;
}

.p-shopguide__applied-header,
.p-shopguide__results-header,
.p-shopguide__sort {
  display: flex;
  align-items: center;
}

.p-shopguide__applied-header,
.p-shopguide__results-header {
  justify-content: space-between;
  gap: var(--space-16);
}

.p-shopguide__applied-title,
.p-shopguide__results-title {
  --heading-margin-block-end: var(--space-0);
}

.p-shopguide__applied-title {
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-narrow);
}

.p-shopguide__results {
  padding-block-end: var(--layout-section-padding-heading-2);
}

.p-shopguide > .p-shopguide__results:last-child {
  padding-block-end: var(--space-0);
}

.p-shopguide__results-header {
  block-size: calc(var(--component-dropdown-trigger-small-block-size) + var(--component-heading-4-margin-block-end));
  padding-block-end: var(--component-heading-4-margin-block-end);
}

.p-shopguide__results-title {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  color: var(--semantic-text-secondary);
}
.p-shopguide__results-title output {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  color: var(--semantic-text-primary);
}

.p-shopguide__sort {
  flex: none;
  gap: var(--space-8);
}

.p-shopguide__sort-label {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  flex: none;
}

.p-shopguide__sort .c-dropdown-trigger {
  min-inline-size: calc(var(--space-80) + var(--space-8) + var(--space-2));
}

.p-shopguide__load-more {
  inline-size: calc(var(--space-256) - var(--space-28));
  max-inline-size: var(--ratio-full);
  margin-block-start: var(--space-48);
  margin-inline: auto;
}

.p-shopguide__load-more[hidden] {
  display: none;
}

.p-shopguide__promotion {
  inline-size: min(var(--ratio-full), var(--space-256) + var(--space-128) + var(--space-8));
  margin-block-end: var(--space-0);
  margin-inline: auto;
}
.p-shopguide__promotion figure {
  margin: var(--space-0);
}
.p-shopguide__promotion img {
  display: block;
  inline-size: var(--ratio-full);
  block-size: auto;
}

.p-shopguide__status {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
}

.p-shopguide__empty {
  display: block;
  inline-size: var(--ratio-full);
  padding-block-end: var(--space-0);
  text-align: center;
}

.p-shopguide__empty[hidden] {
  display: none;
}

.p-shopguide__empty-visual,
.p-shopguide__site-search {
  display: grid;
  gap: var(--layout-section-padding-inner-small);
  inline-size: min(var(--ratio-full), var(--layout-content-narrow-width));
  margin-inline: auto;
}

.p-shopguide__empty-visual {
  justify-items: center;
}

.p-shopguide__empty-title {
  --heading-margin-block-end: var(--space-0);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-narrow);
}

.p-shopguide__empty-image {
  inline-size: min(var(--ratio-full), var(--layout-desktop-column-width));
  aspect-ratio: 392/221;
}
.p-shopguide__empty-image img {
  inline-size: var(--ratio-full);
  block-size: var(--ratio-full);
  object-fit: contain;
  pointer-events: none;
}

.p-shopguide__empty-description {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  text-align: start;
}

.p-shopguide__site-search {
  margin-block-start: var(--layout-section-padding-inner-large);
}

.p-shopguide__site-search .c-searchbar {
  --searchbar-inline-size: var(--ratio-full);
  --searchbar-max-inline-size: none;
}

.p-shopguide__retry {
  inline-size: var(--ratio-full);
  margin-block-start: var(--layout-section-padding-heading-3);
}

.p-shopguide__retry .c-button {
  inline-size: var(--ratio-full);
}

@media (min-width: 768px) {
  .p-shopguide__query {
    gap: var(--space-24);
  }
  .p-shopguide[data-shopguide-page=no-results] .p-shopguide__query {
    gap: var(--space-32);
  }
  .p-shopguide__popular-label {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-default);
  }
  .p-shopguide__popular .c-chip-group {
    flex-wrap: wrap;
    overflow: visible;
  }
  .p-shopguide__filters-title {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-default);
  }
  .p-shopguide__applied-title {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-narrow);
  }
  .p-shopguide__results-title {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-default);
  }
  .p-shopguide__results-title output {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-default);
  }
  .p-shopguide__sort-label {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-default);
  }
  .p-shopguide__sort .c-dropdown-trigger {
    min-inline-size: calc(var(--space-96) + var(--space-2));
  }
  .p-shopguide__load-more {
    inline-size: var(--layout-desktop-small-column-width);
    margin-block-start: var(--space-64);
  }
  .p-shopguide__empty {
    padding-block-end: var(--space-0);
  }
  .p-shopguide__empty-title {
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-default);
    line-height: var(--line-height-narrow);
  }
  .p-shopguide__retry {
    inline-size: var(--layout-desktop-column-width);
    margin-inline: auto;
  }
}