@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400..800&display=swap");
:root {
  --brutus-brand-red: #7a0202;
  --brutus-brand-red-dark: #520000;
  --brutus-brand-pink: #f6edea;
  --brutus-brand-ink: #000000;
  --brutus-brand-red-light: #d1a9a9;
  --brutus-brand-cream: #f8f0e5;
  --brutus-brand-brown: #842909;
  --brutus-brand-gold: #AC864B;
  --brutus-brand-muted: #68635f;
}

/*
 * BRUTUS / ShopServe renewal
 * top.css
 *
 * TOP専用の上書き。ShopServe標準の動的classを残して使う。
 * 本文は #contents 内の ShopServe 標準 .newItem、ヘッダーのTOPスライダーは
 * #wrapper 内の同じDOMを手掛かりに、独自classの有無にかかわらず調整する。
 */
:root {
  --brutus-top-red: var(--brutus-brand-red);
  --brutus-top-red-dark: #610101;
  --brutus-top-ink: var(--brutus-brand-ink);
  --brutus-top-cream: #f5eee8;
  --brutus-top-pink: var(--brutus-brand-pink);
  --brutus-top-gold: #c9a23b;
  /* PCデザインの左右ガイドに合わせ、画面幅に対して可変にする。 */
  --brutus-top-content-width: min(1488px, 83.5vw);
}

/* ---------- shared TOP layout ---------- */
/* TOPの全幅背景に白いスクロールバー帯が出ないようにする。ページのスクロール操作は維持する。 */
html:has(.top-page:not([hidden]), #contents > article > #main-column > section > .newItem) {
  scrollbar-width: none;
  scrollbar-gutter: auto;
}

html:has(.top-page:not([hidden]), #contents > article > #main-column > section > .newItem)::-webkit-scrollbar {
  display: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: clip;
  overflow-y: visible;
  background: #fff;
  color: var(--brutus-top-ink);
  font-family: "Noto Sans JP", sans-serif;
}

/* ShopServe標準の #contents 固定幅をTOPだけ解除する。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))),
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) *,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) *::before,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) *::after {
  box-sizing: border-box;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) p,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) h1,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) h2,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) h3,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) dl,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) dt,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) dd,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) ul,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) li,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) figure {
  margin: 0;
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) ul {
  list-style: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) a {
  color: inherit;
  text-decoration: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) button,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) input {
  font: inherit;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) #main-column-full {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ---------- ShopServe TOPスライダー／バナー接続部 ---------- */
/* ShopServe側もローカル見本と同じSplide markup / .top-hero stylesを使う。 */
:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area {
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/* 独自classを付ける初期化処理がなくても、標準DOMがTOPを示せば表示する。 */
:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area[hidden] {
  display: block !important;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_slider_block {
  display: block !important;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top-hero {
  /* Splide's vendor CSS hides an uninitialized root. Keep the first banner as fallback. */
  visibility: visible;
  isolation: isolate;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top-hero:not(.is-initialized):not(.is-mounting) .top-hero__track {
  justify-content: center;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top-hero:not(.is-initialized):not(.is-mounting) .top-hero__slide:not(:first-child) {
  display: none;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block {
  display: block !important;
  width: 100%;
  margin: 38px 0 0;
  background: #fff;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block .wrap {
  width: min(var(--brutus-top-content-width), 100% - 48px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6%;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block li a,
:is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block li img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 768px) {
  :root {
    /* 小さい画面ほど左右余白を縮め、カードの横幅を確保する。 */
    --brutus-top-mobile-gutter: clamp(10px, 3.2vw, 16px);
  }
  :is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_slider_block {
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
  :is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block .wrap {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter));
  }
  :is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block {
    margin-top: 5px;
  }
  :is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block ul {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  :is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block li:nth-child(2) {
    order: -1;
  }
}
/* 標準テーマのTOP用display:noneを、今回のTOPブロックだけ解除する。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top_slider_block,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top_banner_block {
  display: block !important;
  height: auto;
  padding: 0;
  visibility: visible;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading h2 {
  position: relative;
  z-index: 1;
  color: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading > span {
  position: absolute;
  right: 0;
  bottom: -21px;
  color: rgba(35, 24, 21, 0.2);
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(50px, 6vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  transform: rotate(-7deg);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--light h2 {
  color: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--light > span {
  color: rgba(255, 255, 255, 0.3);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--small h2 {
  font-size: 18px;
  color: #fff !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--lower {
  min-height: 28px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--lower h2 {
  color: var(--brutus-top-red);
  font-size: 15px;
  letter-spacing: 0.08em;
}

/* ShopServe's .news h2 !important forces a serif face; keep TOP headings consistent. */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading--lower h2 {
  font-family: "Noto Sans JP", sans-serif !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--with-icon h2 {
  display: block;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  margin: 0 5px 0 0;
  vertical-align: -3px;
  align-items: center;
  justify-content: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--lower h2::after {
  display: block;
  width: 128px;
  height: 1px;
  margin: 8px auto 0;
  background: var(--brutus-top-red);
  content: "";
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .shopserve-top-new-title {
  color: #fff !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .header_area:not(:has(.shop_header_block)) {
  display: none !important;
}

/* ---------- FV / slider ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero.top-hero--product-banners {
  --top-hero-banner-width: min(1200px, 64.25vw);
}
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero.top-hero--product-banners .top-hero__viewport,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero.top-hero--product-banners .top-hero__arrows {
  height: calc(var(--top-hero-banner-width) * 504 / 926);
  min-height: 0;
}
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero.top-hero--product-banners .top-hero__slide img {
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero.top-hero--product-banners {
    --top-hero-banner-width: 84vw;
  }
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero {
  --top-hero-slide-width: min(1200px, 64.25vw);
  width: 100%;
  margin: 0;
  overflow-x: clip;
  background: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__viewport {
  position: relative;
  width: 100%;
  height: min(525px, 43.75vw);
  min-height: 380px;
  overflow: hidden;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__track {
  display: flex;
  gap: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  will-change: transform;
  transition: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide {
  position: relative;
  display: block;
  flex: 0 0 var(--top-hero-slide-width);
  width: var(--top-hero-slide-width);
  max-width: 1200px;
  height: 100%;
  overflow: hidden;
  background: #160707;
  transition: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide > a {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__slide:not(.is-active) {
  filter: brightness(0.72) saturate(0.82);
}

/* スライド移動中も画像の向きは変えず、素材をそのまま表示する。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__slide:not(.is-active) picture img {
  transform: none;
}

@media screen and (min-width: 769px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide--left img {
    object-position: left center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide--right img {
    object-position: right center;
  }
}
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy {
  position: absolute;
  top: 50%;
  left: 15%;
  display: grid;
  justify-items: start;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(-50%);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-small {
  margin-bottom: 14px;
  font-size: 18px;
  letter-spacing: 0.14em;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy strong {
  font-size: clamp(58px, 5vw, 84px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.08em;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-lead {
  margin-top: 24px;
  font-size: 24px;
  letter-spacing: 0.1em;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-note {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide .top-hero__led {
  display: none;
  position: absolute;
  top: 10%;
  right: 27%;
  z-index: 2;
  width: clamp(90px, 10vw, 150px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  gap: 30px;
  min-height: 11px;
  margin-top: 28px;
  padding: 0;
  pointer-events: auto;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__pagination li {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0;
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__pagination__page {
  display: block;
  width: 11px;
  height: 11px;
  margin: 0;
  border: 1px solid #d4d4d4;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  opacity: 1;
  transform: none;
  transition: background-color 160ms ease, opacity 160ms ease;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__pagination__page.is-active {
  background: #bdbdbd;
  transform: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: min(525px, 43.75vw);
  pointer-events: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  pointer-events: auto;
  place-items: center;
  transform: translateY(-50%);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow--prev.top-hero__arrow {
  left: 8.333333vw;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow--next.top-hero__arrow {
  right: 8.333333vw;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow img {
  display: block;
  width: 44px;
  height: 44px;
  max-width: none;
  transition: opacity 160ms ease;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow--prev.top-hero__arrow img {
  transform: rotate(180deg);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow:hover:not(:disabled) img,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow:focus-visible img {
  opacity: 0.72;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow:disabled {
  cursor: default;
  opacity: 0.42;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow:disabled img {
  opacity: 0.72;
}

/* ---------- FV下バナー ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions {
  width: min(var(--brutus-top-content-width), 100% - 48px);
  margin: 38px auto 0;
  background: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6%;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 2px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ---------- 注目キーワード ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword {
  max-width: 1200px !important;
  width: 94% !important;
  margin: 38px auto 0 !important;
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword {
    background: #f8f0e5;
    width: 100% !important;
    padding: 30px 0 !important;
  }
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--keyword .top-section-heading__art--keyword {
  position: absolute;
  right: 0;
  bottom: -21px;
  z-index: 0;
  width: clamp(280px, 28vw, 532px);
  max-width: none;
  height: auto;
  pointer-events: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 22px;
  position: relative;
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter)) !important;
  }
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list a {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ebebeb;
  color: #000;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease;
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list a {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 14px;
    background: #fff;
    color: #000000;
  }
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list a:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list a:focus-visible,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list a.is-current {
  background: #7a0202;
  color: #fff;
}

/* ---------- 商品カード共通 ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-grid {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  overflow: visible;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-grid--new,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-grid--restock {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ShopServe本番の動的商品ブロックには、ローカル用product-card classを足さない。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set {
  display: grid;
  gap: 16px;
  margin: 28px 0 0;
  overflow: visible;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-grid > .product-card {
  float: none;
  width: auto !important;
  margin: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section {
  float: none;
  width: auto !important;
  min-width: 0;
  margin: 0;
  padding: 12px;
  background: #fff;
  color: var(--brutus-top-ink);
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .itemThumb-wrap,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .itemThumb-wrap,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .itemThumb-wrap {
  width: 100%;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .itemThumb,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .itemThumb,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .itemThumb {
  width: 100%;
  height: 206px;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .itemThumb a,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .itemThumb a,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .itemThumb a,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .item-list-span-img,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .item-list-span-img,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .item-list-span-img {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .itemThumb img,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .itemThumb img,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .itemThumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section h3,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section h3,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section h3 {
  min-height: 36px;
  margin-top: 9px;
  overflow: hidden;
  color: var(--brutus-top-ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section p.price,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section p.price,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section p.price {
  min-height: 22px;
  margin-top: 3px;
  color: var(--brutus-top-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .taxin,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .taxin,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .taxin {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 400;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .inner-catch,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .inner-catch,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .inner-catch {
  min-height: 22px;
  margin-top: 4px;
  color: #777;
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card {
  min-width: 0;
  margin: 0;
  padding: 12px;
  background: #fff;
  color: var(--brutus-top-ink);
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .itemThumb-wrap {
  width: 100%;
  margin: 0;
  padding: 10px;
  background: #f2f2f2;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .itemThumb {
  width: 100%;
  height: 206px;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .itemThumb a,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .item-list-span-img {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .itemThumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card h3 {
  min-height: 36px;
  margin-top: 9px;
  overflow: hidden;
  color: var(--brutus-top-ink);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card h3 a:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card h3 a:focus-visible {
  color: var(--brutus-top-red);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .price {
  min-height: 22px;
  margin-top: 3px;
  color: var(--brutus-top-red);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .taxin {
  margin-left: 2px;
  font-size: 10px;
  font-weight: 400;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .inner-catch {
  min-height: 22px;
  margin-top: 4px;
  color: #777;
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card__cart {
  display: none;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--brutus-top-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-outline-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 150px;
  min-height: 38px;
  margin: 25px auto 0;
  border: 1px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-outline-button__icon {
  display: block;
  width: 7px;
  height: 13px;
  flex: 0 0 auto;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-outline-button:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-outline-button:focus-visible {
  border-color: #842909;
  background: #842909;
  color: #fff;
}

/* ---------- 新入荷 ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals {
  overflow-x: clip;
  background: #2d0306 url("../img/top/newproductBg.jpg") center/cover no-repeat;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem {
  width: min(var(--brutus-top-content-width), 100% - 48px);
  margin: 0 auto !important;
  padding: 35px 0 40px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading > span {
  right: 2%;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .product-card {
  border-radius: 0;
}

/* ---------- 再入荷 / ランキング / カテゴリ ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area {
  background: #efe7df url("../img/top/category-bg.png") center/cover no-repeat;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area__inner {
  width: 90%;
  max-width: 90%;
  margin: 0 auto;
  padding: 34px 0 54px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs {
  display: flex;
  align-items: end;
  gap: 12px;
  padding-left: 48px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button {
  min-width: 172px;
  min-height: 44px;
  padding: 9px 24px;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: #d7a9b0;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button[aria-selected=true] {
  background: var(--brutus-top-red);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button:focus-visible {
  outline: 3px solid #e8c95b;
  outline-offset: 4px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel {
  padding: 23px 42px 27px;
  border-radius: 30px;
  background: var(--brutus-top-red);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel__content[hidden] {
  display: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card {
  padding: 12px 10px 10px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .itemThumb {
  height: 185px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category {
  margin-top: 32px;
  padding: 20px 34px 25px;
  border: 1px solid #aaa;
  border-radius: 34px;
  background: var(--brutus-top-red);
  color: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list a {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 5px 8px;
  border-radius: 13px;
  background: #fff;
  color: var(--brutus-brand-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list a:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list a:focus-visible {
  background: var(--brutus-brand-red-light);
  color: #fff;
  opacity: 1;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list a.is-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, #f0d65a 0%, #d6b01b 52%, #b38c10 100%);
  color: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list a.is-all img {
  flex: 0 0 auto;
  width: 7px;
  height: 13px;
}

/* ---------- お知らせ以降 ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-lower {
  --brutus-top-pink: var(--brutus-brand-pink);
  width: min(var(--brutus-top-content-width), 100% - 48px);
  margin: 0 auto;
  padding: 40px 0 80px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news {
  margin: 0 !important;
  padding: 30px 42px 32px;
  border-radius: 20px;
  background: var(--brutus-top-pink);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-contents {
  width: min(820px, 100%);
  margin: 20px auto 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 20px;
  padding: 5px 0;
  font-size: 12px;
  line-height: 1.6;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box dt {
  color: #777;
  text-align: right;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box dd a:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box dd a:focus-visible {
  color: var(--brutus-top-red);
  text-decoration: underline;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-quick-links {
  display: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-grid,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card {
  min-width: 0;
  padding: 27px 32px;
  border-radius: 20px;
  background: var(--brutus-top-pink);
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card p,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card p {
  margin-top: 17px;
  color: var(--brutus-top-ink);
  font-size: 12px;
  line-height: 1.7;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 8px;
  width: min(470px, 100%);
  margin: 15px auto 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form input {
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
  background: #fff;
  color: var(--brutus-top-ink);
  font-size: 12px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form button,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-red-button {
  display: inline-grid;
  place-items: center;
  min-height: 36px;
  padding: 5px 18px;
  border: 0;
  border-radius: 7px;
  background: var(--brutus-top-red);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-card small {
  display: block;
  margin-top: 8px;
  color: var(--brutus-top-red);
  font-size: 10px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card .top-red-button {
  width: min(420px, 100%);
  margin-top: 15px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-red-button:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-red-button:focus-visible,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form button:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form button:focus-visible {
  background: var(--brutus-top-red-dark);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 8px;
  padding: 18px 28px;
  border-radius: 20px;
  background: var(--brutus-top-pink);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 170px;
  place-items: center;
  padding: 10px 28px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card + .top-promo-card {
  border-left: 1px solid #dfa9aa;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card #subc_calendar {
  margin-top: 17px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal_wrapper {
  width: min(420px, 100%);
  margin: 0 auto;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card caption {
  margin-bottom: 8px;
  color: #777;
  font-size: 14px;
  font-weight: 700;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card th,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td {
  height: 27px;
  color: #777;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card th:first-child,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td:first-child {
  color: #ef5e5e;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card th:last-child,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td:last-child {
  color: #00b8d0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td.today {
  background: #ef4a4a;
  color: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal tbody td.closed:not(:empty),
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal tbody td:first-child:not(:empty),
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal tbody td.today {
  background: #ff1717;
  color: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal tbody td.holiday:not(:empty),
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal tbody td.holiday-season:not(:empty) {
  background: #fff900;
  color: #777300;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 12px !important;
  color: #777 !important;
  font-size: 10px !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 0 0 8px;
  border-radius: 1px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend__open {
  margin-left: 0 !important;
  background: #54c3ee;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend__closed {
  background: #ff1717;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend__season {
  background: #fff900;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card .top-red-button {
  width: min(260px, 100%);
  margin-top: 38px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card p {
  width: min(390px, 100%);
  margin-right: auto;
  margin-left: auto;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 49px;
  margin-top: 8px;
  padding: 0;
  border-radius: 16px;
  background: var(--brutus-top-pink);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 20%;
  min-width: 0;
  min-height: 49px;
  color: transparent;
  font-size: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a img {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
}

/* ---------- PC fidelity tuning (source: top-pc.png) ---------- */
@media screen and (min-width: 769px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide .top-hero__led {
    display: block;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-small {
    margin-bottom: 20px;
    font-size: 22px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy strong {
    font-size: clamp(86px, 7.8vw, 112px);
    line-height: 0.98;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-lead {
    margin-top: 26px;
    font-size: 30px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-note {
    font-size: 14px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword {
    margin-top: 100px !important;
    padding-bottom: 70px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--keyword {
    min-height: 47px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--keyword h2 {
    font-size: 36px;
    line-height: 1.3;
    letter-spacing: 0.11em;
    margin-bottom: 0 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--keyword .top-section-heading__art--keyword {
    right: -96px;
    bottom: -65px;
    width: clamp(320px, 28vw, 532px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list {
    gap: 11px 20px;
    margin-top: 35px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list a {
    min-height: 55px;
    padding: 8px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem {
    padding: 60px 0 123px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set {
    margin-top: 78px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem .itemThumb {
    height: 222px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button {
    margin-top: 52px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area__inner {
    padding-top: 45px;
    padding-bottom: 117px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button {
    min-height: 52px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel {
    padding-top: 30px;
    padding-bottom: 40px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .itemThumb {
    height: 215px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category {
    min-height: 270px;
    margin-top: 38px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-lower {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-grid {
    margin-top: 120px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card {
    min-height: 228px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-cards {
    min-height: 334px;
    margin-top: 24px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card {
    min-height: 298px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card img {
    height: 270px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    min-height: 414px;
    margin-top: 20px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card {
    min-height: 414px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar {
    min-height: 110px;
    margin-top: 17px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a {
    min-height: 110px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a img {
    height: 40px;
  }
}
/* 中間幅では装飾文字をコンテンツ幅内へ収め、横スクロールを防ぐ。 */
@media screen and (max-width: 1100px) and (min-width: 769px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--keyword .top-section-heading__art--keyword {
    right: 0;
  }
}
/* ---------- PC catalog geometry ---------- */
/*
 * top-pc.png のカタログ面は、商品パネルの内側に大きな赤い余白を取り、
 * タブ／カード／カテゴリチップを同じ基準幅で揃えている。
 * 1100px以下の中間幅は既存のタブレット調整を優先し、PCレイアウトだけを
 * TOPスコープ内で上書きする。
 */
@media screen and (min-width: 1101px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area__inner {
    width: min(1488px, 83vw);
    padding-top: 134px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs {
    --tab-left-inset: 6.7%;
    --tab-gap: 8.98%;
    --pickup-tab-width: 28%;
    position: relative;
    z-index: 1;
    isolation: isolate;
    height: 90px;
    align-items: flex-end;
    gap: var(--tab-gap);
    padding-left: var(--tab-left-inset);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs::before {
    position: absolute;
    z-index: 0;
    inset: 0 0 auto;
    height: 90px;
    /* 輪郭はパネル上端まで描き、下の赤い面と角丸はパネル本体に任せる */
    background: url("../img/top/sainyuukaBg.svg") left top/100% 651px no-repeat;
    content: "";
    pointer-events: none;
    transition: transform 280ms ease;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs.is-ranking::before {
    /* SVGの盛り上がりを右側のランキングタブ中央へ移動 */
    transform: translateX(-28%) scaleX(-1);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs.is-ranking {
    /* 非選択の再入荷タブ幅を戻し、ランキング側のSVG輪郭に位置を合わせる */
    --tab-gap: 5.58%;
    --pickup-tab-width: 29.4%;
    /* ミラー後のSVGの横はみ出しだけを止め、ボタンのフォーカス輪郭は残す */
    clip-path: inset(-8px 0 -8px 0);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 88px;
    min-height: 88px;
    padding: 0 20px;
    border-radius: 34px 48px 0 0;
    font-size: clamp(20px, 2.85vw - 7px, 30px);
    line-height: 1.2;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button:first-child {
    width: var(--pickup-tab-width);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button:nth-child(2) {
    width: 28.8%;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button[aria-selected=true] {
    height: 90px;
    min-height: 90px;
    margin-bottom: 0;
    border-radius: 34px 48px 0 0;
    /* 選択タブの斜め輪郭は背景SVGに任せ、ボタン面では覆わない */
    background: transparent;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button[aria-selected=false] {
    /* 選択中タブより少し低い位置に置き、画像の段差を再現 */
    height: 77px;
    min-height: 77px;
    margin-bottom: 6px;
    border-radius: 24px;
    background: #d2a8a9;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel {
    position: relative;
    z-index: 2;
    /* 画像の赤い面に合わせ、カードの上下に広い余白を取る。 */
    padding: 90px 9% 80px;
    border-radius: 52px;
    background: var(--brutus-brand-red);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel__content {
    margin: 0 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .top-product-grid,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set {
    gap: 28px;
    margin-top: 0;
    align-items: stretch;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel section.product-card .itemThumb,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section .itemThumb,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .itemThumb {
    height: 206px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section {
    display: flex;
    height: auto !important;
    min-height: 0;
    flex-direction: column;
    padding: 24px 10px 26px;
    border: 1px solid #dedede;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .itemThumb-wrap,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section .itemThumb-wrap,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .itemThumb-wrap {
    padding: 0;
    background: #fff;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card h3,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section h3,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section h3 {
    min-height: 72px;
    margin-top: 15px;
    overflow: visible;
    color: #333;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card p.price,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section p.price,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section p.price {
    min-height: 27px;
    margin-top: 12px;
    color: #842909;
    font-size: 16px !important;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card p.price span,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section p.price span,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section p.price span {
    color: #842909 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .taxin,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section .taxin,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .taxin {
    font-size: 0.75em;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .inner-catch,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section .inner-catch,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .inner-catch,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card__cart {
    display: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category {
    margin-top: 40px;
    min-height: auto;
    padding: 36px 50px 68px !important;
    background: #7a0202;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category .top-section-heading--small h2 {
    line-height: 1.2;
    color: #fff !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list a {
    min-height: 46px;
    padding: 6px 8px;
    border-radius: 14px;
    font-size: 16px;
  }
}
@media screen and (max-width: 1100px) and (min-width: 769px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__viewport {
    min-height: 320px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy strong {
    font-size: 58px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel {
    padding-inline: 24px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .itemThumb {
    height: 170px;
  }
}
/* ---------- SP ---------- */
@media (width < 390px) {
  body:has(.top-page:not([hidden]), #contents > article > #main-column > section > .newItem) {
    zoom: 1;
  }
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) {
    padding-bottom: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) #main-column-full {
    width: 100%;
    padding: 0 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero {
    width: 100vw;
    margin-top: 0;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__viewport {
    height: min(46vw, 340px);
    min-height: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__arrows {
    height: min(46vw, 340px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__track {
    gap: 0;
    width: auto;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide {
    display: block;
    flex-basis: 84vw;
    width: 84vw;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__slide img {
    object-position: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy {
    top: 50%;
    left: 15%;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-small {
    margin-bottom: 5px;
    font-size: 9px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy strong {
    font-size: clamp(31px, 10vw, 52px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-lead {
    margin-top: 9px;
    font-size: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero__copy-note {
    margin-top: 3px;
    font-size: 7px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__pagination {
    margin-top: 0;
    gap: 6px;
    min-height: 24px;
    padding: 6px 0 5px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__pagination li,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__pagination__page {
    width: 6px;
    height: 6px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow {
    display: grid !important;
    width: clamp(36px, 10.67vw, 52px);
    height: clamp(36px, 10.67vw, 52px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow--prev.top-hero__arrow {
    left: 2px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow--next.top-hero__arrow {
    right: 2px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-hero .splide__arrow.top-hero__arrow img {
    width: clamp(36px, 10.67vw, 52px);
    height: clamp(36px, 10.67vw, 52px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area__inner,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-lower {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter));
  }
  /* default.css の .newItem { width: 100% !important; } より優先させる。 */
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter)) !important;
    padding-bottom: 0 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions {
    width: calc(100% - var(--brutus-top-mobile-gutter));
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions__inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions {
    margin-top: 5px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo--gift {
    order: -1;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading {
    min-height: 24px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading h2 {
    font-size: 16px;
    letter-spacing: 0.06em;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading__icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -2px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading > span {
    right: -5px;
    bottom: -17px;
    font-size: 42px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--keyword .top-section-heading__art--keyword {
    right: -5px;
    bottom: -17px;
    width: clamp(220px, 62vw, 320px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 15px;
    margin: 17px auto 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword-list a {
    min-height: 35px;
    padding: 5px 8px;
    font-size: 14px;
    border: 14px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem {
    padding: 26px 0 31px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set {
    row-gap: 25px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem .itemThumb {
    height: 230px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading > span {
    right: -3px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-grid,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-grid--new,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-grid--restock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 21px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 21px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section {
    padding: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .itemThumb-wrap,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .itemThumb-wrap,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .itemThumb-wrap,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .itemThumb-wrap {
    padding: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .itemThumb,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .itemThumb,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .itemThumb,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .itemThumb,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .itemThumb {
    height: auto;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set {
    row-gap: 25px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section .itemThumb {
    height: 230px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .itemThumb {
    height: 220px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card h3,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section h3,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section h3,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section h3 {
    min-height: auto;
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.35;
    color: #fff;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .price,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section p.price,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section p.price,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section p.price {
    min-height: 16px;
    margin-top: 5px;
    font-size: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .price span,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section p.price span,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section p.price span,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section p.price span {
    text-align: center;
    color: #fff !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .taxin,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .taxin,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .taxin,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .taxin {
    font-size: 9px;
    color: #fff;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card .inner-catch,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .newItem > .column-set > section .inner-catch,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .pickup > .column-set > section .inner-catch,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .ranking > .column-set > section .inner-catch {
    min-height: 16px;
    margin-top: 2px;
    font-size: 7px;
    display: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .product-card__cart {
    display: flex;
    min-height: 25px;
    margin-top: 6px;
    font-size: 9px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-outline-button {
    width: 126px;
    min-height: 30px;
    margin-top: 18px;
    font-size: 10px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area__inner {
    padding: 23px 0 98px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs {
    gap: 6px;
    padding-left: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button {
    min-width: 0;
    min-height: 33px;
    padding: 7px 14px;
    border-radius: 13px 13px 0 0;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel {
    padding: 12px 10px 14px;
    border-radius: 20px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .top-product-grid {
    margin-top: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .itemThumb {
    height: 220px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category {
    margin-top: 16px;
    padding: 16px 10px 18px;
    border-radius: 19px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 13px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category-list a {
    min-height: 25px;
    padding: 4px 3px;
    border-radius: 5px;
    font-size: 8px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-lower {
    padding: 72px 0 39px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news {
    margin: 0 !important;
    min-height: 412px;
    padding: 21px 15px 20px !important;
    border-radius: 15px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-contents {
    margin-top: 13px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 3px 0;
    font-size: 9px;
    line-height: 1.45;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-quick-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-top: 58px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-quick-links a {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 142px;
    gap: 8px;
    padding: 12px 6px;
    border-radius: 15px;
    background: var(--brutus-top-red);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-quick-links__icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-quick-links__icon img {
    width: 36px;
    height: 36px;
    filter: brightness(0) invert(1);
    object-fit: contain;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-grid,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 58px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card {
    padding: 22px 17px;
    border-radius: 15px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card {
    min-height: 435px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card {
    min-height: 318px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card p,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card p {
    margin-top: 13px;
    font-size: 9px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form {
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form input,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form button,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-red-button {
    min-height: 29px;
    font-size: 9px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-card small {
    margin-top: 7px;
    font-size: 7px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card .top-red-button {
    margin-top: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 701px;
    margin-top: 72px;
    padding: 9px 6px;
    border-radius: 15px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card {
    min-height: 339px;
    padding: 7px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card:nth-child(3) {
    grid-column: 1/-1;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card + .top-promo-card {
    border-left: 1px solid #dfa9aa;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card:nth-child(3) {
    margin-top: 5px;
    border-top: 1px solid #dfa9aa;
    border-left: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card img {
    height: 320px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    margin-top: 7px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card {
    min-height: 484px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card #subc_calendar {
    margin-top: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card caption {
    margin-bottom: 4px;
    font-size: 11px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card th,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td {
    height: 22px;
    font-size: 8px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend {
    margin-top: 8px !important;
    font-size: 7px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card {
    display: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar {
    gap: 13px;
    min-height: 134px;
    margin-top: 41px;
    padding: 6px 12px;
    border-radius: 11px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a {
    flex: 1 1 20%;
    min-width: 0;
    min-height: 134px;
    color: transparent;
    font-size: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar {
    height: 134px;
    min-height: 134px;
    gap: 0;
    padding: 0;
    background: var(--brutus-top-red);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a img {
    height: 40px;
    filter: brightness(0) invert(1);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section p.price span {
    color: #fff !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .itemThumb-wrap {
    padding: 0;
    background: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section {
    background: none;
    padding: 0;
  }
}
@media screen and (max-width: 480px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-section-heading--keyword .top-section-heading__art--keyword,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading__art {
    display: none;
  }
}
/* ---------- SP catalog: supplied panel silhouette and type ---------- */
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area__inner {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter));
    max-width: none;
    padding: 40px 0 45px;
  }
  /* sainyuukaBg_sp.svg is 355 x 570px and starts its red body below the tab. */
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 355/32.253;
    padding: 0;
    isolation: isolate;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 355/570;
    background: url("../img/top/sainyuukaBg_sp.svg") left top/100% 100% no-repeat;
    content: "";
    pointer-events: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs.is-ranking::before {
    transform: scaleX(-1);
    transform-origin: center top;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button {
    position: absolute;
    z-index: 1;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0em;
    white-space: nowrap;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button:first-child {
    left: 4.45%;
    width: 44.23%;
    flex: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button:nth-child(2) {
    left: 50.77%;
    width: 44.23%;
    flex: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button[aria-selected=true] {
    background: transparent;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs button[aria-selected=false] {
    top: 0px;
    height: calc(100% - 4px);
    border-radius: 11px;
    background: #d2a8a9;
  }
  /* Mirroring the SVG also moves the active tab to the right-hand silhouette. */
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs.is-ranking button:first-child {
    left: 10px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-tabs.is-ranking button:nth-child(2) {
    left: 51.32%;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel {
    position: relative;
    z-index: 3;
    min-height: 538px;
    margin: 0;
    padding: 39px clamp(10px, 3.2vw, 16px) 30px;
    border-radius: 20px;
    background: #7a0202;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel__content {
    margin: 0 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .top-product-grid,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set {
    column-gap: clamp(10px, 3.2vw, 16px);
    row-gap: clamp(20px, 3.2vw, 24px);
    margin-top: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 6px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .itemThumb {
    height: 120px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card h3 {
    min-height: 2.7em;
    margin: 8px 0 0;
    overflow: visible;
    font-size: 1.6rem !important;
    line-height: 1.35;
    text-align: left;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card p.price {
    min-height: 1.35em;
    margin: 6px 0 0;
    font-size: 1.6rem !important;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .taxin {
    font-size: 0.875em !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card .inner-catch {
    display: none;
  }
  /* 支給SPではカテゴリ面を省略し、再入荷パネルからお知らせへ接続する。 */
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-category {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) *,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) *::before,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ---------- 新入荷: 2026-09-12 reference match ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem {
  padding: 76px 0 120px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading {
  min-height: 47px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading h2 {
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: 0.11em;
  color: #fff !important;
  margin-bottom: 0 !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading__art {
  position: absolute;
  top: -23px;
  right: -130px;
  z-index: 0;
  width: clamp(420px, 36vw, 630px);
  max-width: none;
  height: auto;
  pointer-events: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.74vw, 40px);
  margin-top: 70px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section {
  display: flex;
  min-height: clamp(320px, 26.4vw, 463px);
  flex-direction: column;
  padding: clamp(14px, 1.37vw, 24px);
  border-radius: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section .itemThumb-wrap {
  padding: 0;
  background: transparent;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section .itemThumb {
  height: auto;
  aspect-ratio: 1;
  background: #ededed;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section h3 {
  min-height: 52px;
  margin-top: clamp(20px, 1.83vw, 32px);
  overflow: visible;
  color: #393939;
  font-size: clamp(14px, 0.92vw, 16px);
  line-height: 1.5;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section h3 a {
  color: inherit;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section p.price {
  min-height: 28px;
  margin-top: clamp(8px, 0.68vw, 12px);
  color: #842909 !important;
  font-size: clamp(15px, 1.14vw, 20px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section p.price span {
  color: #842909 !important;
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section p.price span {
    color: #fff !important;
  }
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section .taxin {
  font-size: 14px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section .inner-catch {
  display: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(384px, 100%);
  min-height: 70px;
  margin-top: 60px;
  border-width: 2px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.15);
  font-size: clamp(22px, 1.7vw, 30px);
  letter-spacing: 0.1em;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button__icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  transition: transform 160ms ease;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button:hover,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button:focus-visible {
  border-color: #842909;
  background: #842909;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button:hover .top-outline-button__icon,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button:focus-visible .top-outline-button__icon {
  transform: translate(4px, -50%);
}

@media (prefers-reduced-motion: reduce) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button__icon,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button:hover .top-outline-button__icon,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button:focus-visible .top-outline-button__icon {
    transition: none;
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 1200px) and (min-width: 769px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading__art {
    top: -18px;
    right: 0;
    width: clamp(420px, 41vw, 500px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set {
    gap: clamp(18px, 2.35vw, 28px);
    margin-top: 62px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section h3 {
    min-height: 48px;
  }
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem {
    padding: 20px 0 0 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading {
    min-height: 24px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading h2 {
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: 0.06em;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-section-heading__art {
    top: -11px;
    right: -5px;
    width: min(72vw, 320px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section {
    min-height: 0;
    background: none;
    padding: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section .itemThumb {
    height: auto;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section h3 {
    min-height: 2.7em;
    margin-top: 14px;
    overflow: visible;
    font-size: 1.4rem !important;
    line-height: 1.35;
    color: #fff !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section p.price {
    min-height: 1.35em;
    margin-top: 7px;
    font-size: 1.4rem !important;
    line-height: 1.35;
    color: #fff !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section .taxin {
    font-size: 10px;
    color: #fff !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .top-outline-button {
    width: 226px;
    min-height: 40px;
    margin-top: 35px;
    font-size: 14px;
    background: #842909;
    color: #fff;
    border: none;
  }
}
/* ---------- 下部エリア: 2026-09-13 添付デザイン ---------- */
@media screen and (min-width: 769px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-lower {
    width: min(83.21vw, 1488px, 100% - 48px);
    margin: 0 auto;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news {
    min-height: 284px;
    padding: 44px 40px 30px !important;
    border-radius: 28px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading--lower {
    min-height: 28px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading--lower h2 {
    color: var(--brutus-top-red);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.05em;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading__icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    vertical-align: -6px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading--lower h2::after {
    width: 172px;
    margin-top: 16px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-contents {
    width: min(710px, 100%);
    margin: 31px auto 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 6px 0;
    font-size: 13.5px;
    letter-spacing: normal;
    line-height: 1.6;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box dt {
    color: var(--brutus-top-ink);
    text-align: right;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box dd a {
    color: var(--brutus-top-ink);
    text-decoration: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box dd a:hover,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box dd a:focus-visible {
    color: var(--brutus-top-red);
    text-decoration: underline;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-quick-links {
    display: none !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 120px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card {
    min-height: 247px;
    padding: 46px 28px 24px;
    border-radius: 28px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card .top-section-heading--lower h2,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card .top-section-heading--lower h2 {
    color: var(--brutus-top-red);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card .top-section-heading__icon,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card .top-section-heading__icon {
    width: 28px;
    height: 28px;
    margin-right: 9px;
    vertical-align: -6px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card .top-section-heading--lower h2::after {
    width: 232px;
    max-width: calc(100vw - 80px);
    margin-top: 15px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card p {
    margin-top: 17px;
    font-size: 14px;
    line-height: 1.55;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form {
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 10px;
    width: min(407px, 100%);
    margin-top: 25px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form input,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form button,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card .top-red-button {
    min-height: 44px;
    font-size: 14px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form input {
    height: 44px;
    border-radius: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form button,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card .top-red-button {
    border-radius: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-card small {
    margin-top: 8px;
    font-size: 13px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card .top-red-button {
    width: min(440px, 100%);
    margin: 25px auto 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 339px;
    margin-top: 8px;
    padding: 26px 0;
    border-radius: 28px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card {
    display: flex;
    min-height: 287px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 16px;
    color: var(--brutus-top-ink);
    text-align: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card + .top-promo-card {
    border-left: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card::before {
    position: absolute;
    top: 10px;
    bottom: 19px;
    left: 0;
    width: 1px;
    background: #b33131;
    content: "";
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card:first-child::before {
    display: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card:nth-child(3) {
    grid-column: auto;
    margin-top: 0;
    border-top: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card img {
    width: auto;
    max-width: 100%;
    height: 196px;
    object-fit: contain;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--award img {
    width: 174px;
    height: 162px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--magazine img {
    width: 139px;
    height: 196px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--search > img {
    display: block;
    width: 186px;
    height: 196px;
    max-width: 100%;
    object-fit: contain;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card__caption {
    display: block;
    color: var(--brutus-top-ink);
    font-size: 13px;
    line-height: 1.35;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--award .top-promo-card__caption {
    color: #173f78;
    font-weight: 700;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card__button {
    display: grid;
    width: min(180px, 100%);
    min-height: 44px;
    place-items: center;
    margin-top: 4px;
    padding: 6px 12px;
    border: 1px solid #cfc1bd;
    border-radius: 12px;
    background: var(--brutus-top-red);
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-height: 403px;
    margin-top: 8px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card {
    display: flex;
    min-height: 403px;
    flex-direction: column;
    align-items: center;
    padding: 34px 28px 24px;
    border-radius: 28px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .top-section-heading--lower h2::after {
    width: 248px;
    max-width: calc(100vw - 80px);
    margin-top: 10px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card .top-section-heading--lower h2::after {
    width: 370px;
    max-width: calc(100vw - 80px);
    margin-top: 10px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card #subc_calendar {
    width: min(72%, 370px);
    margin-top: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal_wrapper {
    width: 100%;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card caption {
    margin-bottom: 8px;
    font-size: 22px;
    text-align: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card th,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td {
    height: 23px;
    font-size: 10px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td.outside {
    background: transparent !important;
    color: #c9c9c9 !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend {
    gap: 6px;
    margin-top: 11px !important;
    font-size: 12px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend span {
    width: 27px;
    height: 22px;
    margin-left: 8px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card .top-red-button {
    width: min(260px, 100%);
    min-height: 78px;
    margin-top: 40px;
    border-radius: 14px;
    font-size: 15px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card p {
    width: min(430px, 100%);
    margin: 38px auto 0;
    font-size: 12px;
    line-height: 1.75;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar {
    justify-content: center;
    gap: clamp(28px, 6.15vw, 84px);
    min-height: 110px;
    margin-top: 8px;
    padding: 0 20px;
    border-radius: 28px;
    background: var(--brutus-top-pink);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a {
    flex: 0 0 auto;
    min-height: 110px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a img {
    height: 30px;
    filter: none;
  }
}
/* ---------- カレンダー: ShopServe出力をXDデザインへ寄せる ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card {
  --top-calendar-today: #66ccff;
  --top-calendar-closed: #ff0000;
  --top-calendar-season: #ffff00;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card #subc_calendar,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal_wrapper {
  width: min(72%, 370px);
  margin: 12px auto 0;
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card #subc_calendar {
  max-width: none;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  line-height: 1.3;
  table-layout: fixed;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal caption,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr th p.month {
  position: static;
  top: auto;
  width: 100%;
  margin: 0 0 8px;
  color: #777;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr:first-child th {
  position: relative;
  height: 32px;
  padding: 0;
  border: 0;
  background: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr th input {
  position: absolute;
  top: 4px;
  z-index: 1;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background-color: #000;
  background-image: url("../img/common/icon_arrow.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 7px 13px;
  cursor: pointer;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr th input.prev {
  left: 0;
  transform: rotate(180deg);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr th input.next {
  right: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal th,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td {
  height: 31px;
  padding: 0;
  color: #777;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr.headline td,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal thead th {
  height: 26px;
  padding: 8px 0 5px;
  border: 0;
  background: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tbody td {
  border: 1px solid #ccc;
  background: #fff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tbody td > div {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal th:first-child,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td:first-child {
  color: #ff0000;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal th:last-child,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td:last-child {
  color: #66ccff;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.outside,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td > div.null,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td > div.backward {
  background: transparent !important;
  color: #c9c9c9 !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.closed,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.ccolor1,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td > div.ccolor1,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td > div.Holyday {
  background: var(--top-calendar-closed) !important;
  color: #fff !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.holiday,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.holiday-season,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.ccolor2,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td > div.ccolor2 {
  background: var(--top-calendar-season) !important;
  color: #777300 !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.today,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td.Today,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal td > div.Today {
  background: #fff !important;
  color: var(--top-calendar-today) !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .top-calendar-legend__open {
  background: var(--top-calendar-today);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .top-calendar-legend__closed {
  background: var(--top-calendar-closed);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .top-calendar-legend__season {
  background: var(--top-calendar-season);
}

@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card #subc_calendar,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .cal_wrapper {
    width: min(100%, 370px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr:first-child th {
    height: 30px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr th input {
    top: 4px;
    width: 22px;
    height: 22px;
    background-size: 6px 11px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tr.headline td,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal thead th {
    height: 23px;
    padding: 6px 0 4px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tbody td {
    height: 24px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card table.cal tbody td > div {
    min-height: 23px;
  }
}
@media screen and (min-width: 769px) and (max-width: 900px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-contents {
    width: 100%;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    font-size: clamp(11.5px, 1.5vw, 13.5px);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-grid,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-grid {
    margin-top: 56px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card {
    min-height: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-cards {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card {
    min-height: 250px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card + .top-promo-card::before {
    top: 0;
    right: 18px;
    bottom: auto;
    left: 18px;
    width: auto;
    height: 1px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card:nth-child(3) {
    grid-column: auto;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    margin-top: 12px;
  }
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-lower {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter));
    padding: 20px 0 32px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news {
    min-height: 0;
    padding: 24px 18px 22px !important;
    border-radius: 20px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading--lower h2 {
    font-size: 18px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading__icon {
    width: 22px;
    height: 22px;
    margin-right: 7px;
    vertical-align: -5px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .top-section-heading--lower h2::after {
    width: 150px;
    margin-top: 8px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-contents {
    width: 100%;
    margin-top: 22px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-news .news-box {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.55;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-grid,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 28px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card {
    min-height: 0;
    padding: 24px 18px;
    border-radius: 20px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card .top-section-heading--lower h2,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-card .top-section-heading--lower h2 {
    font-size: 18px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card .top-section-heading--lower h2::after,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card .top-section-heading--lower h2::after,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card .top-section-heading--lower h2::after {
    width: min(240px, 100vw - 72px);
    margin-top: 8px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-engagement-card p {
    margin-top: 14px;
    font-size: 13px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form {
    grid-template-columns: minmax(0, 1fr) 96px;
    width: 100%;
    margin-top: 16px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form input,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-mail-form button,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card .top-red-button {
    min-height: 44px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-line-card .top-red-button {
    width: 100%;
    margin-top: 16px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
    gap: 0;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 20px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card:nth-child(3) {
    grid-column: auto;
    min-height: 210px;
    margin-top: 0;
    padding: 18px 8px;
    border-top: 0;
    border-left: 0;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card + .top-promo-card::before {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 1px;
    height: auto;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--magazine {
    grid-column: 1/-1;
    min-height: 270px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--magazine::before {
    top: 0;
    right: 10px;
    bottom: auto;
    left: 10px;
    width: auto;
    height: 1px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card img {
    height: 160px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--award img {
    width: min(100%, 132px);
    height: auto;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--magazine img {
    width: auto;
    height: 160px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promo-card--search > img {
    width: min(150px, 100%);
    height: 160px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-info-grid {
    margin-top: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card #subc_calendar {
    width: min(100%, 370px);
    margin-top: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card caption {
    font-size: 19px;
    text-align: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card th,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-card td {
    height: 26px;
    font-size: 11px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend {
    margin-top: 12px !important;
    font-size: 11px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-calendar-legend span {
    width: 20px;
    height: 18px;
    margin-left: 5px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card .top-red-button {
    min-height: 58px;
    margin-top: 24px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card p {
    margin-top: 24px;
    font-size: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-contact-card {
    display: none;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar {
    gap: clamp(12px, 5vw, 32px);
    min-height: 84px;
    margin-top: 12px;
    padding: 0 12px;
    border-radius: 20px;
    background: var(--brutus-top-red);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a {
    min-height: 84px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a img {
    height: 26px;
    filter: brightness(0) invert(1);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a:nth-child(4) img,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-social-bar a:nth-child(5) img {
    filter: none;
  }
}
/*
 * ShopServeの実出力DOMへの接続。
 *
 * #contents 内の ShopServe 標準 .newItem をTOPの目印にし、独自classがなくても
 * 同テンプレートがキーワード欄を本文へ移し、標準の商品ブロックを
 * 新入荷セクション／再入荷・ランキングタブへ組み替える。
 */
/* ShopServe標準の2カラム幅をTOPだけ解除し、商品ブロックを全幅で使う。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents {
  display: block;
  overflow: visible;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > article {
  float: none !important;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column {
  float: none !important;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* ShopServe標準のTOPお知らせを、ローカル見本のニュースカードへ接続する。 */
#contents #main-column > section.cont.w100 > .news {
  --brutus-news-pink: var(--brutus-brand-pink);
  --brutus-news-red: var(--brutus-brand-red);
  width: 100%;
  min-height: auto;
  margin: 130px auto 0 !important;
  padding: 44px 40px 40px !important;
  overflow: hidden;
  border-radius: 33px;
  background: var(--brutus-news-pink);
  color: var(--brutus-brand-ink);
  text-align: center;
}

#contents #main-column > section.cont.w100 > .news h2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  background: transparent;
  color: var(--brutus-news-red) !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}

#contents #main-column > section.cont.w100 > .news h2::before {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 31px;
  margin-right: 16px;
  background: url("../img/common/icon_news.svg") center/contain no-repeat;
  content: "";
}

#contents #main-column > section.cont.w100 > .news h2::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 172px;
  max-width: calc(100vw - 80px);
  height: 1px;
  margin: 0;
  transform: translateX(-50%);
  background: #b9797b;
  content: "";
}

#contents #main-column > section.cont.w100 > .news .news-contents {
  width: min(710px, 100%);
  margin: 28px auto 0;
  padding: 0;
  overflow: visible;
  text-align: left;
}

#contents #main-column > section.cont.w100 > .news .news-box {
  display: block;
  margin: 0 !important;
  padding: 6px 0 !important;
  border: 0 !important;
  color: var(--brutus-brand-ink);
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: normal;
}

#contents #main-column > section.cont.w100 > .news .news-box dd {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit;
  overflow-wrap: anywhere;
}

#contents #main-column > section.cont.w100 > .news .news-box dd a {
  color: inherit;
  text-decoration: none;
}

#contents #main-column > section.cont.w100 > .news .news-box dd a:hover,
#contents #main-column > section.cont.w100 > .news .news-box dd a:focus-visible {
  color: var(--brutus-news-red);
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  #contents #main-column > section.cont.w100 > .news {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter)) !important;
    min-height: 0;
    margin: 45px auto 0 !important;
    padding: 35px 30px 50px !important;
    border-radius: 20px;
  }
  #contents #main-column > section.cont.w100 > .news h2 {
    padding-bottom: 8px !important;
    font-size: 18px !important;
  }
  #contents #main-column > section.cont.w100 > .news h2::before {
    width: 22px;
    height: 22px;
    margin-right: 7px;
  }
  #contents #main-column > section.cont.w100 > .news h2::after {
    width: 150px;
    max-width: calc(100vw - 56px);
  }
  #contents #main-column > section.cont.w100 > .news .news-contents {
    width: 100%;
    margin-top: 22px;
  }
  #contents #main-column > section.cont.w100 > .news .news-box {
    padding: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.55;
  }
}
/*
 * 検索・カテゴリ・カレンダーを含む標準サブカラムは、
 * TOPのPC本文には表示しない。ドロワー状態では共通ヘッダーの配置を使う。
 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) {
  display: none !important;
  position: static !important;
  float: none !important;
  width: min(var(--brutus-top-content-width), 100% - 48px) !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) > section.leftSearch,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) > section:has(.category) {
  display: none !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) > section:has(#subc_calendar) {
  padding: 28px;
  border-radius: 20px;
  background: var(--brutus-top-pink);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) #subc_calendar {
  width: min(100%, 440px) !important;
  max-width: none;
  margin: 16px auto 0 !important;
}

/* ShopServeが生成する商品ブロックを、ローカル用ラッパーなしで整える。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .newItem) {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 48px 0 56px;
  overflow: hidden;
  background: #2d0306 url("../img/top/newproductBg.jpg") center/cover no-repeat;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section.top-new-arrivals {
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .newItem) > .newItem,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .pickup) > .pickup,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .ranking) > .ranking {
  width: min(var(--brutus-top-content-width), 100% - 48px);
  max-width: none;
  margin: 0 auto !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .pickup),
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .ranking) {
  width: 100%;
  margin: 0;
  padding: 48px 0 56px;
  overflow: hidden;
  background: var(--brutus-top-red);
}

/* header-menu.tpl が標準の商品ブロックをまとめたローカル見本用のタブ面。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section.top-catalog-area {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .top-product-panel > .pickup,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .top-product-panel > .ranking {
  width: 100%;
  max-width: none;
  padding: 0;
  line-height: normal;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .top-product-panel > .pickup > h2,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .top-product-panel > .ranking > h2 {
  display: none !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .top-product-panel__content[hidden] {
  display: none !important;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .newItem > h2,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .pickup > h2,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .ranking > h2 {
  min-height: 1.4em;
  margin: 0 0 26px !important;
  padding: 0 0 14px !important;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-align: center;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .ranking > h2:empty {
  display: none;
}

/*
 * ShopServeは商品ブロックのsectionへ高さをインライン指定するため、
 * 商品名が長いカードで価格が重ならないよう、表示内容の高さへ戻す。
 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set {
  align-items: stretch;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible;
}

/* ランキング順位バッジは商品画像枠の左上へ配置する。 */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .itemThumb-wrap {
  position: relative;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .badge {
  position: absolute;
  z-index: 2;
  top: -25px;
  left: 0;
  display: block;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter)) !important;
    margin-top: 36px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) > section:has(#subc_calendar) {
    padding: 20px 14px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .newItem),
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .pickup),
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .ranking) {
    padding: 32px 0 45px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .newItem) > .newItem,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .pickup) > .pickup,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .ranking) > .ranking {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter)) !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .newItem > h2,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .pickup > h2,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column .ranking > h2 {
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    font-size: 21px;
  }
  /*
   * SPでは商品情報の直下に購入操作を表示する。
   * .product-card__cart はローカル見本用、ShopServe標準の
   * h2.sps-add-to-cart-together は商品データ側で表示を有効にした場合の受け皿。
   */
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .product-card__cart,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .product-card__cart {
    display: flex;
    min-height: 28px;
    margin-top: 7px;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: var(--brutus-top-red);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section h2.sps-add-to-cart-together,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section h2.sps-add-to-cart-together,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section h2.sps-add-to-cart-together {
    margin: 7px 0 0;
    text-align: center;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section h2.sps-add-to-cart-together input[type=submit],
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem > .column-set > section h2.sps-add-to-cart-together input[type=button],
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section h2.sps-add-to-cart-together input[type=submit],
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .pickup > .column-set > section h2.sps-add-to-cart-together input[type=button],
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section h2.sps-add-to-cart-together input[type=submit],
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section h2.sps-add-to-cart-together input[type=button] {
    display: block;
    width: 100%;
    min-height: 28px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 999px;
    background: var(--brutus-top-red);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-product-panel .ranking > .column-set > section .badge {
    top: 0px;
    left: 0px;
    width: 32px;
    height: 32px;
  }
}
@media screen and (max-width: 768px) {
  .shop_header_block #header-inner #hNav ul#header-nav > li#header-nav-drawer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .shop_header_block #header-inner #hNav ul#header-nav > li#header-nav-drawer button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #wrapper .mobile-bottom-nav {
    display: grid !important;
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 1000 !important;
  }
}
/* ---------- 大画面のコンテンツ基準幅 ---------- */
/*
 * 1440px基準では、各セクションを90%幅・最大1200pxで揃える。
 * 既存の中間幅用レイアウトは維持し、1201px以上だけを調整する。
 */
@media screen and (min-width: 1201px) {
  :root {
    --brutus-top-content-width: min(1200px, 90vw);
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-keyword,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-new-arrivals .newItem,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-catalog-area__inner,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-lower {
    width: 94%;
    max-width: 1200px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-promotions__inner {
    width: 100%;
    max-width: none;
  }
  :is(.shop-top-page, :where(#wrapper:has(#contents > article > #main-column > section > .newItem))) .shopserve-top-area .top_banner_block .wrap {
    width: 94%;
    max-width: 1200px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents > #sub-column:not(.spsDrawerOpen):not(.spsDrawerClose) {
    width: 90% !important;
    max-width: 1200px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .newItem) > .newItem,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .pickup) > .pickup,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > section:has(> .ranking) > .ranking {
    width: 90% !important;
    max-width: 1200px !important;
  }
  #contents #main-column > section.cont.w100 > .news {
    width: 90% !important;
    max-width: 1200px !important;
  }
}
/* ---------- 注目キーワード上の特集バナー ---------- */
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns,
:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > .top-campaigns {
  display: grid;
  gap: 20px;
  width: 94%;
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__row {
  display: grid;
  gap: 20px;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__row--primary {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 2fr);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__row--secondary {
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 4.63fr);
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__link {
  display: block;
  min-width: 0;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__link img {
  display: block;
  width: 100%;
  height: auto;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__link:hover {
  opacity: 0.85;
}

:is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__link:focus-visible {
  outline: 3px solid var(--brutus-top-red);
  outline-offset: 4px;
}

@media screen and (min-width: 769px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns + .top-keyword {
    margin-top: 80px !important;
  }
}
@media screen and (max-width: 768px) {
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns,
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem)))#contents #main-column > .top-campaigns {
    width: calc(100% - var(--brutus-top-mobile-gutter) - var(--brutus-top-mobile-gutter));
    gap: 12px;
    margin-top: 44px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns + .top-keyword {
    margin-top: 58px !important;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  :is(.top-page, :where(#contents:has(> article > #main-column > section > .newItem))) .top-campaigns__row > .top-campaigns__link:last-child {
    grid-column: 1/-1;
  }
}