:root {
  --aidia-color-brand: #ff6f61;
  --aidia-color-brand-strong: #e85d51;
  --aidia-color-brand-soft: #ff8e85;
  --aidia-color-brand-wash: rgba(255, 111, 97, 0.16);
  --aidia-color-brand-halo: rgba(255, 111, 97, 0.22);
  --aidia-color-brand-focus: rgba(255, 111, 97, 0.5);
  --aidia-color-brand-translucent: rgba(255, 111, 97, 0.8);
  --aidia-color-ink: #222222;
  --aidia-color-ink-blue: #172536;
  --aidia-color-ink-blue-strong: #0f1a26;
  --aidia-color-text: #333333;
  --aidia-color-text-soft: #555555;
  --aidia-color-text-translucent: rgba(51, 51, 51, 0.8);
  --aidia-color-text-translucent-strong: rgba(51, 51, 51, 0.9);
  --aidia-color-muted: #666666;
  --aidia-color-subtle: #777777;
  --aidia-color-muted-on-dark: #aaaaaa;
  --aidia-color-surface: #ffffff;
  --aidia-color-surface-translucent: rgba(255, 255, 255, 0.97);
  --aidia-color-surface-translucent-medium: rgba(255, 255, 255, 0.9);
  --aidia-color-surface-translucent-soft: rgba(255, 255, 255, 0.8);
  --aidia-color-surface-translucent-faint: rgba(255, 255, 255, 0.16);
  --aidia-color-surface-warm: #fef5ee;
  --aidia-color-surface-warm-strong: #fde8dc;
  --aidia-color-surface-warm-translucent: rgba(254, 245, 238, 0.66);
  --aidia-color-surface-ivory: #fffdf8;
  --aidia-color-surface-ivory-strong: #f7f1e6;
  --aidia-color-surface-neutral: #f7f7f7;
  --aidia-color-surface-neutral-strong: #eeeeee;
  --aidia-color-surface-neutral-translucent: rgba(245, 245, 245, 0.5);
  --aidia-color-border: #f1d9ce;
  --aidia-color-border-strong: #e6c8bc;
  --aidia-color-border-neutral: #e8e8e8;
  --aidia-color-border-neutral-strong: #bbbbbb;
  --aidia-color-neutral-mark: #e0e0e0;
  --aidia-color-neutral-line: #8e8e8e;
  --aidia-color-overlay: rgba(0, 0, 0, 0.28);
  --aidia-color-overlay-soft: rgba(0, 0, 0, 0.2);
  --aidia-color-overlay-medium: rgba(0, 0, 0, 0.15);
  --aidia-color-overlay-subtle: rgba(0, 0, 0, 0.1);
  --aidia-color-overlay-faint: rgba(0, 0, 0, 0.05);
  --aidia-color-overlay-focus: rgba(0, 0, 0, 0.16);
  --aidia-color-shadow-warm: rgba(110, 80, 73, 0.2);
  --aidia-color-outline-subtle: rgba(34, 34, 34, 0.1);
  --aidia-color-outline-strong: rgba(34, 34, 34, 0.7);
  --aidia-color-social-facebook: #1877f2;
  --aidia-color-social-rss: #ee802f;
  --aidia-shadow-card: 0 12px 32px rgba(89, 55, 38, 0.1);
  --aidia-shadow-card-small: 0 7px 18px rgba(89, 55, 38, 0.08);
  --aidia-shadow-card-light: 0 8px 22px rgba(89, 55, 38, 0.07);
  --aidia-shadow-card-faint: 0 7px 18px rgba(89, 55, 38, 0.055);
  --aidia-shadow-card-lift: 0 18px 42px rgba(89, 55, 38, 0.07);
  --aidia-shadow-card-high: 0 18px 45px rgba(89, 55, 38, 0.08);
  --aidia-shadow-card-deep: 0 22px 55px rgba(123, 75, 54, 0.12);
  --aidia-shadow-card-compact: 0 9px 24px rgba(89, 55, 38, 0.07);
  --aidia-shadow-card-compact-strong: 0 9px 26px rgba(89, 55, 38, 0.1);
  --aidia-shadow-card-mobile: 0 7px 20px rgba(89, 55, 38, 0.06);
  --aidia-shadow-card-badge: 0 12px 30px rgba(89, 55, 38, 0.12);
  --aidia-shadow-footer-cta: 0 2px 5px rgba(0, 0, 0, 0.2);
  --aidia-shadow-drawer: -8px 0 24px rgba(0, 0, 0, 0.12);
  --aidia-shadow-transformation: 0 4px 12px rgba(0, 0, 0, 0.05);
  --aidia-shadow-brand-button: 0 8px 18px rgba(255, 111, 97, 0.16);
  --aidia-shadow-brand-package: 0 18px 40px rgba(229, 80, 66, 0.16);
  --aidia-shadow-brand-circle: 0 8px 18px rgba(232, 86, 74, 0.18);
  --aidia-shadow-brand-connector: 0 10px 24px rgba(232, 86, 74, 0.2);
  --aidia-shadow-brand-cta: 0 14px 30px rgba(255, 100, 89, 0.2);
}

/* 案内バナーは影で背景から分離し、枠を付けずに操作状態を示す。 */
a.aidia-promo-banner {
  border-radius: 8px;
  overflow: hidden;
  background: var(--aidia-color-surface);
  box-shadow: var(--aidia-shadow-card-small), var(--aidia-shadow-transformation);
}

a.aidia-promo-banner:focus,
a.aidia-promo-banner:focus-visible,
a.aidia-promo-banner:active {
  outline: none;
  box-shadow: var(--aidia-shadow-card-small), var(--aidia-shadow-transformation);
}

a.aidia-promo-banner:focus-visible img {
  filter: brightness(0.85);
}

.box.aidia-promo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 1160px;
  max-width: 100%;
  padding: 40px;
}

.aidia-promo-pair > a.aidia-promo-banner {
  width: 100%;
  min-width: 0;
}

.aidia-promo-pair img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  .box.aidia-promo-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 32px 24px;
  }
}