/* 🔸 <i>リセット */
i {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* 🔸 アイコン共通設定（マスク 背景画像共通）*/
.icon-setup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;    /* 斜体を解除 */
  line-height: 1;        /* 行高の影響を排除 */
  vertical-align: middle; /* 周囲のテキストとの配置を中央に */
  text-indent: 0;        /* インデント設定を無視 */
  cursor: default;
  pointer-events: none;  /* アイコン自体はクリックを邪魔しない */
}

/* 🔸 疑似要素 マスク用 */
.icon-setup::before {
  content: "";
  display: inline-block;

  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  /* アイコン自体のサイズ（親の文字サイズに比例） */
  width: 1em;
  height: 1em;
}

/* 🔸 疑似要素 背景画像用 */
.icon-bg::before {
  /* マスク機能一括無効化 */
  -webkit-mask: none !important;
  mask: none !important;

  /* 背景色 */
  background-color: transparent !important;
  
  /* 背景画像設定 */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* 🔸 個別アイコン設定 */
/* 🔸 Android（背景画像） */
.icon-setup.icon-bg.android::before {
  background-image: url("../images/svg/android-head_flat.svg");
}

/* アップル */
.icon-setup.apple::before {
  -webkit-mask-image: url("../images/svg/apple-brands-solid.svg");
  mask-image: url("../images/svg/apple-brands-solid.svg");
  background-color: #9B9B9B;
}
/* 🔸🔸 iOS Safari アップル（グレー丸背景・白抜き） */
.icon-setup.apple-circle-gray::before {
  /* マスクを2層重ねる：リンゴの形(白抜き用) と 円の形(背景用) */
  -webkit-mask-image: 
    url("../images/svg/apple-brands-solid.svg"), 
    radial-gradient(circle, #000 100%, transparent 100%);
  mask-image: 
    url("../images/svg/apple-brands-solid.svg"), 
    radial-gradient(circle, #000 100%, transparent 100%);

  /* マスクの合成モード */
  /* 「円」から「リンゴ」を差し引く（型抜きする、親要素の背景色がアイコン色）設定 */
  -webkit-mask-composite: source-out;
  mask-composite: exclude; /* 物理的にくり抜き */

  /* 背景色 */
  background-color: #9B9B9B;
  border-radius: 50%;

  /* サイズと位置 */
  -webkit-mask-size: 55%, 100%; /* リンゴを少し小さく */
  mask-size: 60%, 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: 50% 45%;
  width: 1.1em;
  height: 1.1em;
}
/* apple-gray */
.icon-setup.icon-bg.apple-gray::before {
  background-image: url("../images/svg/apple-gray.svg");
  clip-path: circle(50% at 50% 50%);
}

/* bolt-lightning */
.icon-setup.bolt-lightning::before {
  -webkit-mask-image: url("../images/svg/bolt-lightning-solid.svg");
  mask-image: url("../images/svg/bolt-lightning-solid.svg");
  background-color: #ffac33;
}

/* bolt */
.icon-setup.bolt::before {
  -webkit-mask-image: url("../images/svg/bolt-solid.svg");
  mask-image: url("../images/svg/bolt-solid.svg");
  background-color: #ffac33;
}

/* ノート 本 */
.icon-setup.book::before {
  -webkit-mask-image: url("../images/svg/book-solid.svg");
  mask-image: url("../images/svg/book-solid.svg");
  background-color: #4682b4; /* steelblue */
  transform: skewX(-10deg) scaleX(1.2);
  margin-left: 0.05em;
  margin-top: 0.05em;
  width: 0.9em;
  height: 0.9em;
}

/* canadian-maple-leaf */
.icon-setup.canadian-maple-leaf::before {
  -webkit-mask-image: url("../images/svg/canadian-maple-leaf-brands-solid.svg");
  mask-image: url("../images/svg/canadian-maple-leaf-brands-solid.svg");
  background-color: #9acd32;
  margin: 0.05em -0.1em 0 -0.1em;
  width: 1.1em;
  height: 1.1em;
  rotate: 33deg;
}

/* Chrome */
.icon-setup.icon-bg.chrome::before {
  background-image: url("../images/svg/chrome.svg");
}

/* 時計 */
.icon-setup.clock::before {
  -webkit-mask-image: url("../images/svg/clock-solid.svg");
  mask-image: url("../images/svg/clock-solid.svg");
  background-color: #bdbc8f;
}

/* Edge */
.icon-setup.icon-bg.edge::before {
  background-image: url("../images/svg/edge.svg");
}

/* 困った */
.icon-setup.face-frown::before {
  -webkit-mask-image: url("../images/svg/face-frown-regular.svg");
  mask-image: url("../images/svg/face-frown-regular.svg");
  background-color: lightsteelblue;
  margin-top: 0.1em;
}
.search-no-results .icon-setup.face-frown::before {
  margin-top: -0.2em;
}

/* 書類 */
.icon-setup.file-lines::before {
  -webkit-mask-image: url("../images/svg/file-lines-solid.svg");
  mask-image: url("../images/svg/file-lines-solid.svg");
  background-color: #daa520;
}

/* fire */
.icon-setup.fire::before {
  -webkit-mask-image: url("../images/svg/fire-solid.svg");
  mask-image: url("../images/svg/fire-solid.svg");background-color: orangered;
}

/* firefox */
.icon-setup.firefox::before {
  background-image: url("../images/svg/firefox.svg");
}

/* フォルダ（開） */
.icon-setup.folder-open::before {
  -webkit-mask-image: url("../images/svg/folder-open-solid.svg");
  mask-image: url("../images/svg/folder-open-solid.svg");
  background-color: #ffc966;
  margin-top: 0.15em;
}
/* 葉 */
.icon-setup.leaf::before {
  -webkit-mask-image: url("../images/svg/leaf-solid.svg");
  mask-image: url("../images/svg/leaf-solid.svg");
  background-color: #9acd32;
}

/* リスト */
.icon-setup.list::before {
  -webkit-mask-image: url("../images/svg/list-solid.svg");
  mask-image: url("../images/svg/list-solid.svg");
  background-color: #6b8e23;
  margin-top: 0.1em;
}

/* 虫眼鏡 */
.icon-setup.magnifying-glass::before {
  -webkit-mask-image: url("../images/svg/magnifying-glass-solid.svg");
  mask-image: url("../images/svg/magnifying-glass-solid.svg");
	background-color: #bdbc8f;
  margin-top: 0.1em;
}

/* Pagelines */
.icon-setup.pagelins::before {
  -webkit-mask-image: url("../images/svg/pagelines-brands-solid.svg");
  mask-image: url("../images/svg/pagelines-brands-solid.svg");
  background-color: #9acd32;
  width: 1.15em;
  height: 1.15em;
  rotate: 3deg;
}

/* 並列 */
.icon-setup.parallel::before {
  -webkit-mask-image: url("../images/svg/parallel.svg");
  mask-image: url("../images/svg/parallel.svg");
  width: 1.1em;
  height: 1.1em;
  margin-top: -0.1em;
}

/* 電源オフ */
.icon-setup.power-off::before {
  -webkit-mask-image: url("../images/svg/power-off-solid.svg");
  mask-image: url("../images/svg/power-off-solid.svg");
  margin-top: 0.05em;
  width: 0.95em;
  height: 0.95em;
}


/* Safari */
.icon-setup.icon-bg.safari::before {
  background-image: url("../images/svg/safari.svg") !important;
  clip-path: circle(50% at 50% 50%);
}

/* 芽 */
.icon-setup.seedling::before {
  -webkit-mask-image: url("../images/svg/seedling-solid.svg");
  mask-image: url("../images/svg/seedling-solid.svg");
  background-color: #9acd32;
  margin-top: 0.15em;
}
/* タグ */
.icon-setup.tag::before {
  -webkit-mask-image: url("../images/svg/tag-solid.svg");
  mask-image: url("../images/svg/tag-solid.svg");
  background-color: #ffa07a;
  margin-top: 0.07em;
}
/* ウインドウズアイコン */
.icon-setup.windows::before {
  -webkit-mask-image: url("../images/svg/windows-brands-solid.svg");
  mask-image: url("../images/svg/windows-brands-solid.svg");
  margin-top: 0.05em;
  background-color: #0378D7;
}
/* レンチ */
.icon-setup.wrench::before {
  -webkit-mask-image: url("../images/svg/wrench-solid.svg");
  mask-image: url("../images/svg/wrench-solid.svg");
  background-color: #8a8a8a;
  margin-top: 0.05em;
}