/* Match web-production.css?v=26, including its final responsive overrides.
   The pale backing preserves the translucent button's contrast on hero photos. */
.at-3d-cta-wrap {
  --at-3d-u: clamp(.66px, .0651041667vw, 1.05px);
  width: min(100%, calc(438 * var(--at-3d-u)));
  margin-top: calc(28 * var(--at-3d-u));
  border-radius: 99px;
  background: linear-gradient(90deg, #b9ad9e, #c7baaa 60%, #bdb0a1);
  flex-shrink: 0;
}
body.at a.at-3d-cta {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(60 * var(--at-3d-u));
  min-height: 44px;
  padding: 0;
  border: 1px solid #ffefd0;
  border-radius: 99px;
  color: #301b11;
  background: #e8ded22b;
  box-shadow: 0 0 0 1px #8c6847, inset 0 0 0 2px #f5ebdfaa;
  font: 600 calc(20 * var(--at-3d-u))/1.6 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
  overflow-wrap: normal;
  transform: none;
}
body.at a.at-3d-cta span {
  position: absolute;
  right: calc(32 * var(--at-3d-u));
  color: #9e6a28;
  font: 300 calc(26 * var(--at-3d-u))/1 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', serif;
}
body.at a.at-3d-cta:hover { filter: brightness(1.1); }
body.at a.at-3d-cta:focus-visible { outline: 3px solid #167f8d; outline-offset: 5px; }

/* Keep the original image proportions while allowing taller hero copy. */
@media (min-width: 701px) {
  .at-hero:has(.at-3d-cta) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .at-hero:has(.at-3d-cta) .at-hero-img {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }
  .at-hero:has(.at-3d-cta) .at-wrap {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    align-self: center;
    width: 100%;
    padding: 48px 5.4vw;
  }
}
@media (max-width: 1000px) {
  .at-3d-cta-wrap {
    --at-3d-u: 1px;
    width: min(100%, 438px, calc(100vw - 44px));
    margin-top: 22px;
  }
  body.at a.at-3d-cta { height: 52px; }
  body.at a.at-3d-cta span { right: 22px; }
}
@media (min-width: 601px) and (max-width: 700px) {
  body.at a.at-3d-cta { font-size: 18px; }
}
@media (max-width: 700px) {
  body.at a.at-3d-cta span { font-size: 24px; }
}
@media (max-width: 600px) {
  body.at a.at-3d-cta { font-size: 16px; }
}
@media (max-width: 359px) {
  .at-3d-cta-wrap { width: min(100%, calc(100vw - 36px)); }
  body.art-page.art-atelier .art-hero:has(.at-3d-cta) { padding-inline: 18px; }
}