@charset "UTF-8";

/*

アクセサビリティ関連スタイル

・UIkitの要素は標準で対応しているが統一のため class="pg_focus" で上書きする
　UIkitのスタイルカスタマイズはビルドが基本で上書きはあまり良くない

・<a> <button> など標準要素は基本的に何もする必要は無い(標準でフォーカスが当たり、Enterでクリックが発火する)

・<div> <span> などで作成したボタンもどきは、class="pg_focus js-click-button"、tabindex="0" を設定する
  ボタンもどきは role="button" でもフォーカスが当たらない

・<select> は本来の目的以外で使われるため class="pg_focus" を個別に設定する

※ 綴り ○focus ×forcus

*/

/******** フォーカスリング ********/

/* 汎用 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.pg_focus:focus-visible
{
  outline: 8px solid rgba(16,122,229,0.6);
  /*box-shadow: none;*/
}

/* トップページのマップカード */
.js-coverlink:focus-visible {
  outline: 8px solid rgba(16,122,229,0.6);
  /*border: none;*/
}

/* ネガティブ ※検索結果 対象要素はborder-box,border:8px solid rgba(0,0,0,0) */
.pg_nfocus:focus-visible {
  outline: none;
  border: 8px solid rgba(16,122,229,0.6);
}

/* 塗り ※濃いver 検索結果のキャプション */
.pg_pfocus:focus-visible {
  outline: none;
  background-color: rgba(16,122,229,0.6);
}

/* 塗り ※薄いver 属性一覧など */
.pg_tfocus:focus-visible {
  outline: none;
  background-color: rgba(16,122,229,0.1);
}

/* 塗り ※薄いver テーマ選択中分類、作図機能一覧 */
.pg_tfocus.pg_typeChange_typeList__item--selected:focus-visible {
  outline: none;
  background-color: rgba(16,122,229,0.6);
}