@charset "UTF-8";

/* ==========================================================================
 * 商品マーク（タグ）のリンク対応：見た目の調整
 * --------------------------------------------------------------------------
 * product-mark-link.js とセットで使用する。
 * JS が各マークを <a class="ito-c-productMarkLink"> で包むので、
 * ここではリンクとしての状態（ホバー／フォーカス／タップ領域）だけを定義する。
 *
 * マーク本体（色・角丸・文字サイズ）は futureshop 管理画面と既存CSSのままで、
 * このファイルでは一切変更していない。
 * ========================================================================== */

.ito-c-productMarkLink {
  /* マーク本体が display:block のため、包む <a> も block にして
     元のレイアウト（ul のフレックス配置）をそのまま保つ */
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ito-c-productMarkLink .fs-c-productMark__mark {
  cursor: pointer;
  transition: opacity .15s ease;
}

/* ホバー：リンクであることが分かる程度に軽く落とす */
.ito-c-productMarkLink:hover .fs-c-productMark__mark {
  opacity: .75;
}

.ito-c-productMarkLink:active .fs-c-productMark__mark {
  opacity: .9;
}

/* キーボード操作時のフォーカス表示（マーク自体の色を邪魔しない外側の枠） */
.ito-c-productMarkLink:focus {
  outline: none;
}

.ito-c-productMarkLink:focus-visible .fs-c-productMark__mark {
  outline: 2px solid #ff8b34;
  outline-offset: 2px;
}

/* SPではマークが小さくタップしづらいため、
   見た目を動かさずに上下のタップ領域だけを広げる（padding と同量の負マージン） */
@media screen and (max-width: 767px) {
  .ito-c-productMarkLink {
    padding: 4px 0;
    margin: -4px 0;
  }
}

/* --------------------------------------------------------------------------
 * 任意：リンクありのマークに「›」を付けて、押せることを明示したい場合は
 *       下のコメントを外す。
 * ------------------------------------------------------------------------ */
/*
.ito-c-productMarkLink .fs-c-productMark__label::after {
  content: "\203A";
  margin-left: .4em;
  font-weight: bold;
}
*/