/* =========================================================
   選定ガイド｜CBOX（snets-cbox-selection）ページ固有スタイル
   ========================================================= */

/* 「盤のサイズから選ぶ」比較図: 画像の上に製品名リンクを重ねて表示する。
   元サイトでは .posit-abs + .position-L400 等の絶対位置クラスで実装されていたが、
   元CSSが手元にないため、画像内の該当製品サイズの枠付近に
   ラベルが来るよう位置を推測して再実装している（%指定のため画像のアスペクト比追従）。 */
.snets-cbox-selection .snets-cbox-selection__size-map {
  position: relative;
  margin-top: var(--space-32);
  max-width: 710px;
}

.snets-cbox-selection .snets-cbox-selection__size-img {
  display: block;
  width: 100%;
  height: auto;
}

.snets-cbox-selection .snets-cbox-selection__size-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background-color: var(--color-blue);
  color: var(--color-white);
  font-size: var(--font-size-sm-pc);
  font-weight: 700;
  line-height: 1.4;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: opacity 0.3s;
}

.snets-cbox-selection .snets-cbox-selection__size-label:hover {
  opacity: 0.75;
}

/* L400: 画像左上の小さい赤枠付近 */
.snets-cbox-selection .snets-cbox-selection__size-label--l400 {
  left: 21%;
  top: 14%;
}

/* C500: L400の枠を内包する緑枠の下寄り */
.snets-cbox-selection .snets-cbox-selection__size-label--c500 {
  left: 22%;
  top: 29%;
}

/* 1500S: 右側に広がる大きい青枠の中央付近 */
.snets-cbox-selection .snets-cbox-selection__size-label--1500s {
  left: 56%;
  top: 38%;
}

@media (max-width: 767px) {
  .snets-cbox-selection .snets-cbox-selection__size-map {
    margin-top: var(--space-24);
  }

  .snets-cbox-selection .snets-cbox-selection__size-label {
    padding: 2px 8px;
    font-size: var(--font-size-xs-pc);
  }
}