.up-d-fvbnr {
  position: relative;
}

.up-d-fvbnr .up-d-fvbnr-bg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 369 / 94;
}

.up-d-fvbnr .up-d-fvbnr-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  container-type: inline-size;
  pointer-events: none;
}

.up-d-fvbnr .up-d-fvbnr-title {
  position: absolute;
  right: 10.8%;
  top: 12.8%;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-size: 7.05cqw;
  font-weight: 300;
  letter-spacing: 0.123em;
  line-height: 1;
  white-space: nowrap;
}

.up-d-fvbnr .up-d-fvbnr-overlay a.up-d-fvbnr-btn {
  position: absolute !important;
  top: 52.1%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 37.2%;
  margin: 0;
  padding-bottom: 0.26em;
  border-radius: 999px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-size: 4.15cqw;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  pointer-events: auto;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.up-d-fvbnr .up-d-fvbnr-overlay a.up-d-fvbnr-btn--cosmetic {
  left: 14.9%;
  width: 40.1%;
}

.up-d-fvbnr .up-d-fvbnr-overlay a.up-d-fvbnr-btn--food {
  left: 57.2%;
  width: 39.8%;
}

.up-d-fvbnr .up-d-fvbnr-overlay a.up-d-fvbnr-btn:hover,
.up-d-fvbnr .up-d-fvbnr-overlay a.up-d-fvbnr-btn:focus-visible {
  background-color: rgba(255, 255, 255, 0.14);
  opacity: 0.85;
}

/* ==========================================================================
   SP（~640px）専用。上のPCルールは一切変更しない。
   サイト側 #index .fv_bnr { width:37%(本番)/13%(デモ); margin-left:3%; } に対する上書きは、
   width値そのものを取り合わない設計（flexのmain-size決定はwidthでなくflex-basisが優先される
   ため、width:37%でも13%でも無関係に効く）。margin-leftのみ、値によらず0に固定するため
   !importantで打ち消す。
   ========================================================================== */
@media only screen and (max-width: 640px) {
  /* .up-d-fvbnr 自体はflex行を100%占有させ、単独行を「兄弟の実幅に関わらず」保証する
     （本番37%/デモ13%どちらでも、oursが行の残りを100%使い切るため同居不可能になる）。
     幅37%/13%どちらでも無関係に効くのは、flexのmain-size決定でwidthよりflex-basisが
     優先されるため（widthプロパティ自体は一切参照されない）。 */
  .up-d-fvbnr {
    flex: 0 0 100%;
    margin-left: 0 !important;
  }

  /* 視覚上の幅70〜80%・中央寄せは、単独行化された.up-d-fvbnrの内側でimg/overlayを
     同じ矩形(左右13%インセット=74%幅)に揃える形で実現する。imgは通常フローなのでwidth+
     margin:auto、overlayはabsoluteなのでleft/right%で同じ範囲に揃える。 */
  .up-d-fvbnr .up-d-fvbnr-bg {
    width: 74% !important;
    margin: 0 auto;
    height: auto !important;
    aspect-ratio: 369 / 94 !important;
  }

  .up-d-fvbnr .up-d-fvbnr-overlay {
    left: 13%;
    right: 13%;
  }

  .up-d-fvbnr .up-d-fvbnr-title {
    font-size: 14px;
    font-size: max(7.05cqw, 14px);
  }

  .up-d-fvbnr .up-d-fvbnr-overlay a.up-d-fvbnr-btn {
    font-size: 9px;
    font-size: max(4.15cqw, 9px);
  }
}
@media only screen and (min-width: 641px) {
  #index .fv_bnrWrap:has(.up-d-fvbnr) {
    left: auto;
    right: 3%;
    transform: none;
  }

  #index .fv_bnrWrap:has(.up-d-fvbnr) .fv_bnrWrap:has(.up-d-fvbnr) {
    right: 0;
  }

  #index .fv_bnrWrap:has(.up-d-fvbnr) > a:not(:has(img)) {
    display: none;
  }
}