/* FontAwesome全廃止に伴うアイコン移行用CSS（mask方式・色はcurrentColorで親のcolorを継承）
   - マッピング済みクラス: /img/icons/ の自作SVGを描画
   - 未マッピングクラス  : 赤背景+黄破線・白文字のプレースホルダー（置換残のTODO可視化・画面で目立つ赤表示）
   対応表: docs/icon-inventory.md
   TODO: 全アイコンのSVG置換が完了したら、このファイルと各テンプレートの<link>読み込みを削除すること。
   更新: 2026-08-05（赤表示化・22種マッピング追加=全glyph置換完了） */

/* ============ 未置換アイコン共通: プレースホルダー ============ */
i[class*="fa-"] {
  display: inline-block;
  min-width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: #dc3545;
  outline: 2px dashed #ffc107;
  font-style: normal;
}
i[class*="fa-"]::before {
  content: attr(class);
  color: #fff;
  font-size: 10px;
  font-family: monospace;
  white-space: nowrap;
}

/* ============ 置換済みアイコン: 自作SVG（currentColor） ============ */
/* prefスタイル(fas/far/fa-solid/fa-regular)を問わず glyph クラスで一致させる */
i.fa-user,
i.fa-user-plus,
i.fa-angle-up,
i.fa-chevron-down,
i.fa-shopping-cart,
i.fa-cart-shopping,
i.fa-coins,
i.fa-envelope,
i.fa-heart,
i.fa-lock,
i.fa-unlock-alt,
i.fa-magnifying-glass-plus,
i.fa-newspaper,
i.fa-phone-volume,
i.fa-calendar-day,
i.fa-shop,
i.fa-window-restore,
i.fa-search,
i.fa-star,
i.fa-angle-right,
i.fa-copy,
i.fa-camera,
i.fa-address-card,
i.fa-map-marked-alt,
i.fa-star-half-stroke,
i.fa-file-import,
i.fa-comments,
i.fa-cart-arrow-down,
i.fa-handshake-simple,
i.fa-circle-check,
i.fa-calendar-check,
i.fa-bell,
i.fa-bell-slash,
i.fa-arrow-right,
i.fa-gem,
i.fa-times,
i.fa-plus,
i.fa-truck,
i.fa-user-tie,
i.fa-chart-line,
i.fa-credit-card {
  width: 1.3em;
  min-width: 0;
  height: 1.3em;
  background: currentColor;
  outline: none;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
i.fa-user::before,
i.fa-user-plus::before,
i.fa-angle-up::before,
i.fa-chevron-down::before,
i.fa-shopping-cart::before,
i.fa-cart-shopping::before,
i.fa-coins::before,
i.fa-envelope::before,
i.fa-heart::before,
i.fa-lock::before,
i.fa-unlock-alt::before,
i.fa-magnifying-glass-plus::before,
i.fa-newspaper::before,
i.fa-phone-volume::before,
i.fa-calendar-day::before,
i.fa-shop::before,
i.fa-window-restore::before,
i.fa-search::before,
i.fa-star::before,
i.fa-angle-right::before,
i.fa-copy::before,
i.fa-camera::before,
i.fa-address-card::before,
i.fa-map-marked-alt::before,
i.fa-star-half-stroke::before,
i.fa-file-import::before,
i.fa-comments::before,
i.fa-cart-arrow-down::before,
i.fa-handshake-simple::before,
i.fa-circle-check::before,
i.fa-calendar-check::before,
i.fa-bell::before,
i.fa-bell-slash::before,
i.fa-arrow-right::before,
i.fa-gem::before,
i.fa-times::before,
i.fa-plus::before,
i.fa-truck::before,
i.fa-user-tie::before,
i.fa-chart-line::before,
i.fa-credit-card::before {
  content: none;
}

/* glyph → SVG マッピング */
i.fa-user                 { -webkit-mask-image: url(/img/icons/user-solid-full.svg);                  mask-image: url(/img/icons/user-solid-full.svg); }
i.fa-user-plus            { -webkit-mask-image: url(/img/icons/user-plus-solid-full.svg);             mask-image: url(/img/icons/user-plus-solid-full.svg); }
i.fa-angle-up             { -webkit-mask-image: url(/img/icons/angle-up-solid-full.svg);              mask-image: url(/img/icons/angle-up-solid-full.svg); }
i.fa-chevron-down         { -webkit-mask-image: url(/img/icons/angle-down-solid-full.svg);            mask-image: url(/img/icons/angle-down-solid-full.svg); }
i.fa-shopping-cart        { -webkit-mask-image: url(/img/icons/cart-shopping-solid-full.svg);         mask-image: url(/img/icons/cart-shopping-solid-full.svg); }
i.fa-cart-shopping        { -webkit-mask-image: url(/img/icons/cart-shopping-solid-full.svg);         mask-image: url(/img/icons/cart-shopping-solid-full.svg); }
i.fa-coins                { -webkit-mask-image: url(/img/icons/coins-solid-full.svg);                 mask-image: url(/img/icons/coins-solid-full.svg); }
i.fa-envelope             { -webkit-mask-image: url(/img/icons/envelope-solid-full.svg);              mask-image: url(/img/icons/envelope-solid-full.svg); }
i.fa-heart                { -webkit-mask-image: url(/img/icons/heart-solid-full.svg);                 mask-image: url(/img/icons/heart-solid-full.svg); }
i.fa-lock                 { -webkit-mask-image: url(/img/icons/lock-solid-full.svg);                  mask-image: url(/img/icons/lock-solid-full.svg); }
i.fa-unlock-alt           { -webkit-mask-image: url(/img/icons/unlock-keyhole-solid-full.svg);        mask-image: url(/img/icons/unlock-keyhole-solid-full.svg); }
i.fa-magnifying-glass-plus{ -webkit-mask-image: url(/img/icons/magnifying-glass-plus-solid-full.svg); mask-image: url(/img/icons/magnifying-glass-plus-solid-full.svg); }
i.fa-newspaper            { -webkit-mask-image: url(/img/icons/newspaper-solid-full.svg);             mask-image: url(/img/icons/newspaper-solid-full.svg); }
i.fa-phone-volume         { -webkit-mask-image: url(/img/icons/phone-volume-solid-full.svg);          mask-image: url(/img/icons/phone-volume-solid-full.svg); }
i.fa-calendar-day         { -webkit-mask-image: url(/img/icons/calendar-days-solid-full.svg);         mask-image: url(/img/icons/calendar-days-solid-full.svg); }
i.fa-shop                 { -webkit-mask-image: url(/img/icons/calendar-days-solid-full.svg);         mask-image: url(/img/icons/calendar-days-solid-full.svg); } /* 来店予約: calendar-daysで統一 */
i.fa-window-restore       { -webkit-mask-image: url(/img/icons/window-restore-solid-full.svg);        mask-image: url(/img/icons/window-restore-solid-full.svg); } /* オークション入札/出品代行 */
i.fa-search               { -webkit-mask-image: url(/img/icons/magnifying-glass-solid-full.svg);      mask-image: url(/img/icons/magnifying-glass-solid-full.svg); } /* 商品名・キーワード検索 */
i.fa-star                 { -webkit-mask-image: url(/img/icons/heart-solid-full.svg);                 mask-image: url(/img/icons/heart-solid-full.svg); } /* お気に入りに追加: heartで統一 */
i.fa-angle-right          { -webkit-mask-image: url(/img/icons/angle-right-solid-full.svg); mask-image: url(/img/icons/angle-right-solid-full.svg); }
i.fa-copy                 { -webkit-mask-image: url(/img/icons/copy-solid-full.svg); mask-image: url(/img/icons/copy-solid-full.svg); }
i.fa-camera               { -webkit-mask-image: url(/img/icons/camera-solid-full.svg); mask-image: url(/img/icons/camera-solid-full.svg); }
i.fa-address-card         { -webkit-mask-image: url(/img/icons/address-card-solid-full.svg); mask-image: url(/img/icons/address-card-solid-full.svg); }
i.fa-map-marked-alt       { -webkit-mask-image: url(/img/icons/map-location-dot-solid-full.svg); mask-image: url(/img/icons/map-location-dot-solid-full.svg); } /* FA7名: map-location-dot */
i.fa-star-half-stroke     { -webkit-mask-image: url(/img/icons/star-half-stroke-solid-full.svg); mask-image: url(/img/icons/star-half-stroke-solid-full.svg); }
i.fa-file-import          { -webkit-mask-image: url(/img/icons/file-import-solid-full.svg); mask-image: url(/img/icons/file-import-solid-full.svg); }
i.fa-comments             { -webkit-mask-image: url(/img/icons/comment-solid-full.svg); mask-image: url(/img/icons/comment-solid-full.svg); } /* comment(単数形SVG)を流用 */
i.fa-cart-arrow-down      { -webkit-mask-image: url(/img/icons/cart-arrow-down-solid-full.svg); mask-image: url(/img/icons/cart-arrow-down-solid-full.svg); }
i.fa-handshake-simple     { -webkit-mask-image: url(/img/icons/handshake-solid-full.svg); mask-image: url(/img/icons/handshake-solid-full.svg); } /* handshake(無印SVG)を流用 */
i.fa-circle-check         { -webkit-mask-image: url(/img/icons/circle-check-solid-full.svg); mask-image: url(/img/icons/circle-check-solid-full.svg); }
i.fa-calendar-check       { -webkit-mask-image: url(/img/icons/calendar-check-solid-full.svg); mask-image: url(/img/icons/calendar-check-solid-full.svg); }
i.fa-bell                 { -webkit-mask-image: url(/img/icons/bell-solid-full.svg); mask-image: url(/img/icons/bell-solid-full.svg); }
i.fa-bell-slash           { -webkit-mask-image: url(/img/icons/bell-slash-solid-full.svg); mask-image: url(/img/icons/bell-slash-solid-full.svg); }
i.fa-arrow-right          { -webkit-mask-image: url(/img/icons/arrow-right-solid-full.svg); mask-image: url(/img/icons/arrow-right-solid-full.svg); }
i.fa-gem                  { -webkit-mask-image: url(/img/icons/gem-regular-full.svg); mask-image: url(/img/icons/gem-regular-full.svg); } /* regular(線画) */
i.fa-times                { -webkit-mask-image: url(/img/icons/xmark-solid-full.svg); mask-image: url(/img/icons/xmark-solid-full.svg); } /* FA7名: xmark(SPドロワー閉じる) */
i.fa-plus                 { -webkit-mask-image: url(/img/icons/plus-solid-full.svg); mask-image: url(/img/icons/plus-solid-full.svg); }
i.fa-truck                { -webkit-mask-image: url(/img/icons/truck-solid-full.svg); mask-image: url(/img/icons/truck-solid-full.svg); }
i.fa-user-tie             { -webkit-mask-image: url(/img/icons/user-tie-solid-full.svg); mask-image: url(/img/icons/user-tie-solid-full.svg); }
i.fa-chart-line           { -webkit-mask-image: url(/img/icons/chart-line-solid-full.svg); mask-image: url(/img/icons/chart-line-solid-full.svg); }
i.fa-credit-card          { -webkit-mask-image: url(/img/icons/credit-card-regular-full.svg); mask-image: url(/img/icons/credit-card-regular-full.svg); } /* regular(線画) */

/* angle-down(=fa-chevron-down) はviewBox内でglyphが小さいため2倍表示 + 5px下げ */
i.fa-chevron-down { width: 1em; height: 1em; transform: scale(2) translateY(-1px); transform-origin: center; } /* 2em箱だと行高が増えメガメニュー位置(top:87px)と2pxずれるため、transformで視覚のみ2倍化 */

/* phone-volume が横向きのため時計回り45度回転（後続CSSに負けないよう!important） */
i.fa-phone-volume { transform: rotate(45deg) !important; }

/* ログイン/マイページ/お気に入り/カート はやや小さめ 1.2em */
i.fa-unlock-alt,
i.fa-user,
i.fa-heart,
i.fa-shopping-cart,
i.fa-calendar-check { width: 1.2em; height: 1.2em; } /* calendar-check: 予約ボタン行高をカートボタンと揃える */