/* 終売製品の表示（終売バナー・終売タグ・後継製品ボックス） */
:root {
  --color-eol: #c0504d;
  --color-eol-bg: #fbeaea;
}

.eol-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  margin: 0 0 var(--sp-3n);
  padding: 16px 20px;
  border: 1px solid var(--color-eol);
  border-radius: 2px;
  background: var(--color-eol-bg);
  color: var(--color-eol);
  font-size: 14px;
  line-height: 1.8;
}

.eol-notice__head { font-weight: 700; }
.eol-notice__comment { min-width: 0; }
.eol-notice__comment p { display: inline; margin: 0; }
.eol-notice__comment p + p { display: block; margin-top: 4px; }
.eol-notice a { color: var(--color-eol); font-weight: 700; text-decoration: underline; }

.product-tag--eol {
  border: 1px solid var(--color-eol);
  background: var(--color-eol-bg);
  color: var(--color-eol);
}

.side-box--successor {
  padding: 32px;
  border: 1px solid var(--color-eol);
  border-radius: 2px;
  background: #fff;
}

.side-box--successor h3 {
  margin: 0 0 12px;
  padding: 0;
  border-bottom: 0;
  color: var(--color-eol);
  font-size: 24px;
}

.side-box--successor p { margin: 0 0 20px; font-size: 14px; line-height: 1.8; }

.successor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 16px 12px;
  border-radius: 2px;
  background: var(--color-eol);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .product-side > .side-box--successor { order: 4; margin: 0 24px 24px; }
  .product-side > .side-box:nth-of-type(2) { order: 6; }
  .product-side > .side-box:nth-of-type(3) { order: 7; }
  .product-side > .side-box:nth-of-type(5) { order: 10; }
  .eol-notice { margin: 0 24px 16px; padding: 12px 14px; font-size: 13px; order: 0; }
  .side-box--successor { padding: 20px; }
  .side-box--successor h3 { font-size: 20px; }
}