.up-banner,
.up-banner * {
  box-sizing: border-box;
}

.up-banner {
  position: fixed;
  z-index: 2147483000;
  bottom: 0;
  right: 0;
  width: 400px;
  color: #f7f0df;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", YuMincho, serif;
  filter: drop-shadow(0 18px 30px rgba(12, 8, 5, 0.34));
}

#beniotome-follow-banner.up-banner button {
  position: absolute;
  z-index: 2;
  top: -11px;
  left: -7px;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(210, 177, 110, 0.72);
  border-radius: 50%;
  appearance: none;
  background: #17120e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
  color: #ead6ad;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 300;
  line-height: 27px;
  text-align: center;
}

#beniotome-follow-banner.up-banner button:focus-visible {
  outline: 2px solid #f2d493;
  outline-offset: 2px;
}

#beniotome-follow-banner.up-banner a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(202, 166, 94, 0.62);
  border-radius: 3px;
  background: linear-gradient(145deg, #211811 0%, #0f0d0c 58%, #20160f 100%);
  box-shadow: 0 14px 34px rgba(8, 5, 3, 0.32);
  color: #f7f0df;
  text-decoration: none;
  transform: translateY(0);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

#beniotome-follow-banner.up-banner a:focus-visible {
  outline: 2px solid #f2d493;
  outline-offset: 3px;
}

.up-banner__accent {
  height: 4px;
  background: linear-gradient(90deg, #7e5125 0%, #e1c07b 48%, #8d5d2c 100%);
}

.up-banner__body {
  display: flex;
  align-items: center;
}

.up-banner__media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 40%;
}

.up-banner__media::after {
  content: "";
  display: block;
  width: 100%;
  position: relative;
  padding-top: 135%;
  background: linear-gradient(180deg, #f8f5ee 0%, #e7ddcd 100%);
}

.up-banner__media>img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 160%;
  max-width: none;
  height: auto;
  object-fit: contain;
  filter: contrast(1.05) saturate(0.92);
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(-17deg);
  transform-origin: 35% 55%;
  z-index: 1;
}

.up-banner__content {
  width: 60%;
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
}

.up-banner__eyebrow {
  display: block;
  width: 22px;
  height: 1px;
  background: #b98a3e;
  margin: 0 0 5px;
}

.up-banner__title {
  margin: 0;
  color: #fffaf0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.045em;
}

.up-banner__subtitle {
  display: block;
  margin-top: 2px;
  color: #e4d8c4;
  font-size: 0.72em;
  letter-spacing: 0.035em;
}

.up-banner__model {
  display: block;
  margin-top: 1px;
  color: #d9bd82;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.8em;
  letter-spacing: 0.08em;
}

.up-banner__divider {
  width: 80px;
  height: 1px;
  margin: 5px 0 5px;
  background: #9f7138;
}

.up-banner__copy {
  margin: 0;
  color: #ded3c2;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.025em;
}

.up-banner__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  padding: 9px 11px;
  border: 1px solid rgba(205, 171, 102, 0.72);
  background: rgba(128, 84, 32, 0.16);
  color: #f3dfb3;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
}

.up-banner__arrow {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1;
}

@media (hover: hover) {
  #beniotome-follow-banner.up-banner a:hover {
    box-shadow: 0 22px 44px rgba(8, 5, 3, 0.42);
    transform: translateY(-3px);
  }
}

@media (max-width: 599px) {
  .up-banner {
    width: 300px;
  }

  .up-banner__accent {
    height: 3px;
  }

  .up-banner__media {
    width: 30%;
  }

  .up-banner__media::after {
    padding-top: 125%;
  }

  .up-banner__content {
    width: 70%;
    padding: 8px;
  }

  .up-banner__eyebrow {
    margin-bottom: 3px;
  }

  .up-banner__title {
    font-size: 12px;
  }

  .up-banner__subtitle {
    margin-top: 1px;
    font-size: 0.7em;
  }

  .up-banner__model {
    font-size: 0.72em;
  }

  .up-banner__divider {
    width: 28px;
    margin: 3px 0 3px;
  }

  .up-banner__copy {
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 0em;
  }

  .up-banner__button {
    margin-top: 3px;
    padding: 3px 5px;
    font-size: 9px;
  }

  .up-banner__arrow {
    font-size: 12px;
  }
}