/* ============================================================
   北見市ファンクラブ カミングスーン ― 追加スタイル（アイコン・hero の切り抜き）
   CMS はテンプレート内のインライン SVG を書き換えるため、
   アイコンは data-cs-icon を持つ空要素に mask-image で描く。
   線の太さは mask からは変えられないので SVG に焼き込んでいる。
   ============================================================ */

/* 描画だけを @supports で囲む。幅と高さは囲みの外に置く
   （未対応なら content が入らないため、currentColor の四角も出ない） */
[data-cs-icon] {
  flex: none;
  display: grid;
  place-items: center;
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
  [data-cs-icon]::before {
    content: "";
    display: block;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  /* 家（移住を考えている） stroke-width 1.7 */
  [data-cs-icon="home"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7'/%3E%3Cpath d='M6 10v9h12v-9'/%3E%3C/svg%3E");
  }

  /* ハート（出身地を応援したい） stroke-width 1.7 */
  [data-cs-icon="heart"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E");
  }

  /* 地図ピン（訪れて好きになった） stroke-width 1.7 */
  [data-cs-icon="pin"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  }

  /* チェック（FEATURES の箇条書き） stroke-width 3 */
  [data-cs-icon="check"]::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  }
}

/* --- 使用箇所ごとの表示サイズ --- */

/* WHO の3項目（スマホ・PC とも 21px） */
.cs-who-ic::before {
  width: 21px;
  height: 21px;
}

/* FEATURES のチェック（スマホ 11px / PC 12px） */
.cs-check-ic::before {
  width: 11px;
  height: 11px;
}

.view-pc .cs-check-ic::before {
  width: 12px;
  height: 12px;
}

/* --- hero 下辺の円弧 ---
   プロトタイプは style 属性に書いているが、プロパティ名に CMS の書き換え対象と
   同じ語を含むため、テンプレートには置かずここへ移した。値は変えていない。 */
.cs-hero-sp {
  clip-path: ellipse(180% 780px at 50% -320px);
}

.cs-hero-pc {
  clip-path: ellipse(180% 940px at 50% -380px);
}