/* ==================================================================
   SNSアイコン（X / Instagram）
   ------------------------------------------------------------------
   ★ 出どころ（2026-09-07）
     見え方は移行元と同じにするが、CSS もアイコンも移行元テーマの
     ファイルは使っていない。CSS は実測で当たるルールだけを抜き出して
     miki-* 名で書き直したもの。アイコンの出どころは
     assets/icons/NOTICE.md に書いてある（商標なので扱いに注意）。

   ★ セレクタを2回書いて (0,3,0) にしている箇所がある。
     出す場所ごとの大きさを、土台の指定に勝たせるため。
   ================================================================== */

:root { --miki-sns-icon:; --miki-sns-icon-size: 18px; }
.miki-sns-icons-item--x { --miki-sns-icon: url("../icons/x.svg"); }
.miki-sns-icons-item--instagram { --miki-sns-icon: url("../icons/instagram.svg"); }
.miki-sns-icons { display: flex; align-items: center; justify-content: var(--miki-sns-icon-justify, initial); flex-wrap: wrap; font-size: var(--miki-sns-icon-size); gap: 0.8em; color: var(--miki-sns-icon-color, #000000); }
.miki-sns-icons-item { display: grid; place-items: stretch; width: 1em; height: 1em; }
@media (any-hover: hover) {
  .miki-sns-icons-item:hover { opacity: 0.5; }
}
@media (max-width: 991px) {
  .miki-sns-icons { gap: 15px; }
  .miki-sns-icons { font-size: 16px; }
  .miki-sns-icons.miki-sns-icons--color { font-size: 20px; }
}
.miki-sns-icons--color .miki-sns-icons-item::before { content: ""; background: var(--miki-sns-icon) no-repeat center / contain; }
.miki-header-sns { display: flex; align-items: center; margin-left: auto; margin-right: 24px; position: relative; z-index: 3; }
.miki-header-sns .miki-sns-icons, .miki-header-sns .miki-sns-icons-item { color: rgb(255, 255, 255); }
.miki-header-sns .miki-sns-icons.miki-sns-icons { font-size: 39px; gap: 0.6em; flex-wrap: nowrap; }
.miki-footer-logo_sns .miki-sns-icons.miki-sns-icons { font-size: 30px; flex-wrap: nowrap; }
.miki-drawer-sns { display: flex; justify-content: center; padding-top: 30px; }
.miki-drawer-sns .miki-sns-icons.miki-sns-icons { font-size: 24px; flex-wrap: nowrap; }
@media (max-width: 991px) {
  .miki-header-sns { margin-right: 14px; }
  .miki-header-sns .miki-sns-icons.miki-sns-icons { font-size: 34px; }
  .miki-footer-logo_sns .miki-sns-icons.miki-sns-icons { font-size: 26px; }
  .miki-drawer-sns .miki-sns-icons.miki-sns-icons { font-size: 20px; }
}