/*
 * 
 * 2021/11/04　修正中A（メモ追加のみ）
 * 2021/10/17　修正中A
 * 2021/09/17　修正中A
 * 2021/09/07　修正中B
 * 2021/09/05　修正中A
 * 2021/07/01
 * nagamira_css5h.css  高速化互換性なし版
 * 
 * 著作権 長岡京健康みらい研究所
 * 【重要】nagamira_css2の後に読み込むこと
 * 2021/07/01
 * W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認
 * 2021/07/05
 【注意 圧縮ツール】
https://csscompressor.net/ja/
で「Compress colors」をオフにして圧縮すること。
コメントの付け方によっては圧縮後のソースに文法エラーが現れる場合があるので圧縮率は【高い】で圧縮する。さらに圧縮したい場合は文法チェッカーにかけて、問題がなければ【最高】で圧縮すること。 * 

 2018.05.13
 ここから先は画面のボタンやリンクを大きくする効果スタイル
 必要に応じてカスタマイズする。
 2018.05.16
 不明だった部分を修正、追加。
 * 2019.03.02
 再構築
 * 2019.03.11
 拡大などはどうしても小さい一部だけにして
 アニメ-ション効果など見た目がいいものは
 実用的な部分だけ採用。
 * 2019.03.12
 ブログのタグ類、記事移動ボタンの色を替える
 * 2019/03/14
 * ブログタイトルマウスカーソルがきた時
 * 2019.03.20
 * Qブログのメニュー表示時のスタイルシート追加
 * 2019.03.20
 * Qブログのページ移動ボタンの拡大
 * 2019.03.20
クラス　サムネイル(.thumbnail)にリンク要素aが含まれている時、クリック範囲をサムネイル全体に広げる。 
なお、bs_boxにリンク要素aが含まれている時、クリック範囲をサムネイル全体に広げるのも試験してみたが、用途からしても全体に広げない方がよいとコメント化
2019.03.21 
目次の箇条書きの文字をアイコンに書き換える
2019.03.21
箇条書きの文字をアイコンに書き換える
2019.03.22
箇条書きのアイコン色を#41ccd8→#5bb254;にもう緑が映えるようにした
2019.03.24
Qブログの編集画面で書体の大きさが変わってしまう現象を.haik-article-menu のセレクタを追加して解決できた。
 2019.03.25
メディアクエリの解釈を修正
Boostrapグリッドシステムに準拠させたのを試作してみる
@media (min-width: 1024px) → 992px
2019.03.26
主に「このページのマップ」（サイトマップ、「被リンクページは、こちら」）の箇条書きをアイコンを消して読みやすくする。
2019.03.28
サムネイル　スマホ時に左右マージンを広げて視認性を向上
2019.03.28　
クラス.bs-box-link-expantion　実装
2019.03.29
ブログのスタイルシート再読込に備えた属性設定
31色分かいても大変なのでhaik_coolの8色からはじめる
メディアクエリの768px→568pxに　スマホ横時とタブレット縦の解像度を兼ねる
2019.03.31
箇条書きの右排他領域の調整
2019.04.04
SNSシェアボタンを再設定。
フッター用と通常用とでクラスと属性を変える
2019.04.04
SNSシェアボタンに色をつける
2019.04.04
Qブログのページ移動ボタン上のマージンを取るように調整。
2019.04.07
メニューバーでシェアボタンを表示する時、要素の左右が空きすぎるとわかったので左右マージンを0pxに
2019.04.29
ホバー時の透過エフェクトの調整0.9→0.6
2019.04.29
リンクがある画像へマウスオーバー時、透明度を変える
2019.04.29
クラス　カラム(.haik-container .col-sm-1)にリンク要素aが含まれている時、クリック範囲をそのカラム全体に広げる
thumbnailのリンク要素aが含まれている時の応用
2019.04.29
.haik-container .col-sm-1内のリンクを太字にして見やすくする
2019.04.30
thumbnailとcolsのリンク時の反応を調整
課題：thumbnail内にリンクがなくても反応してしまうので使い分けが求められる
2019.04.30
colsの自動リンク種類を増やす
2019.04.30
colsの自動リンク種類を増やしたのに伴う改修
2019.05.01
colsの.col-sm-1～6内の適用で .haik-container を外してみる
2019.05.01 作成
.cols-link-expantionクラス
bs-box-link-expantionと名前を合わせる
2019.05.04
thumbnailマウスオーバー時の変化をふわっとするように修正
2019.05.04
.cols-link-expantion でマウスオーバー時の変化をふわっとするように修正
2019.05.05
目次、箇条書きの調整
2019.05.08
クラス.bs-box-link-expantionは機能的にcos-link-expantionと重複するので廃止する
2019.05.09
medhialistプラグインの書式のスタイルシート
プラグインのままだと実装が十分ではなかったので改修、汎用的に使えるようにした。
特徴はコメントの最初の1行だけ太字になる事です。
2019.05.10
medhialistの.media-body背景の色違い
2019.05.11
ページ移動ボタンの書式を変更。線の濃さを上げて読みやすくする
2019.05.12
medhialistの.media-body背景の色違いの文字色を読みやすいよう修正
2019.05.27
ポップアップボックスの背景修正
背景の内容が薄く見えると見せたい写真がよくわからなくなるので見せない方がいいため。
カスタマイズで変えられる
2019.05.28
ポップアップボックスの文字色が色盲の人には薄すぎるので修正。
2019/07/04
新着ブログリスト下線復活
2019.08.13
.googlemapのhtml記述用スタイル追加
2019.08.13
SNSボタンの大きさを修正
2019.08.24
bs_box closeボタンの修飾
2019.08.27
タグ検索結果に見出しをつける
2019.08.30
目次の罫線の色を替える
2019.08.31
タグ検索結果見出しの書体の大きさを解像度に応じて可変にする
2019.09.01
タグのスタイルシートをnagamira_css1.cssからnagamira_css4.cssに移行
タグクラウドをタグ一覧とも統合して使えるようにしたため。
2019.09.01
タグ検索結果の書体を太くする
2019.09.02
メインコンテナー内のタグクラウドの書式を変える
2019.09.02
ポップアップボックスのタイトルキャプションが見えないのでこれを画面下に移動して読みやすくする
2019.09.02
ブログリスト類の書体の大きさを調整
2019.09.02
修正履歴のアイコンを出さないようにする→箇条書きのアイコンが出なくなる
方法を考えたが、クラス指定がないのでできない。アイコンを共用する事にした。
2019.09.03
フッター用の目次のスタイルを追加
.plugin-contents をフッターに継承して色を替えた
行間を空けて、アイコン色を替える
2019.09.04
通常時の色を黒から青に修正
アイコンの色もマウスオーバー時の設定に合わせて修正
2019.09.05
修正履歴と箇条書きのアイコンを共用できるアイコンに変えた。
2019.09.05
ページ移動ボタンのレイアウトを修正
2019/09/06
バッジ類のマウスオーバー時の色を青系に統一
2019.06.06
ブログ系選択リストマウスオーバー時の色を文字色をグレーから青系に統一する
2019.09.06
箇条書きのアイコンを110％に設定
    →凍結
2019/09/07
箇条書きのマージン、レイアウトを調整
2019/09/07
箇条書きアイコンの色を赤色に統一。
2019/09/08
ページ移動ボタンのレイアウト崩れ発生
2019.09.08
蛍光マーカーの書式を変える
2019/09/09
箇条書きアイコンの並びを変更 
2019/09/10
箇条書きアイコンの並びを変更    
色は調整中（あまり目立ちすぎてもいけないので）
2019/09/13
ページ移動ボタンの属性を移植
2019/09/14
サムネイルまたはカラムに複数のリンクやボタンが含まれる場合、
別クラスを指定することでリンクを独立させることができる
2019/09/14
ページ移動ボタンpaddingを10px 16px → 10px 10pxへ修正
2019/09/14
箇条書きの指定
クラスが .haik-contentではなくクラス .haik-container にすること
2019/09/14
箇条書きの字下げはtext-indent: 0em;にすること
箇条書きの字下げがここで-1.4emになっているとレイアウト崩れが発生する
（テーマ毎のレイアウト崩れで互換性の悪さを招いていた原因）
2019/09/15
glyphiconを使うと位置が微妙にずれるので調整
2019/09/16
glyphiconを使うと位置が微妙にずれるので調整したが、誤作動を起こすので凍結
2019/09/18
ページ移動ボタンpaddingをレスポンシブ対応で大きさをメディアクエリで可変にする
2019/09/18
ルビ機能を使った場合のスタイルシートを追加
2019/09/19
ルビスタイルシートの調整
2019/09/19
ブログ記事の移動ボタンのマウスオーバー時の反応がスマホでは最後まで出ないので浮き上がらせるだけに変更
2019/09/19
ブログ記事のバッジ類のマウスオーバー時の反応をわかるように浮き上がらせる
2019/09/20
マーカーをクラス呼び出しで6色使えるようにした。
2019/09/20
埋め込みビデオの上下にマージンを追加する。
2019/09/21
箇条書きのアイコンを変更
2019/09/21
サムネイルと整合性を合わせるためマウスオーバー時に浮き上がらせる方法を採用
これまでどこがカラムのリンク範囲なのかわからなかったのが、わかりやすい
2019/09/21
.qblog-list .qblog_dateの行高さがmain.cssでクリアされているので改修
2019/09/21
ブログ画像マウスオーバー時の拡大を廃止
2019/09/21
ページ移動ボタンpaddingを0.6em 10px、0.6em 16px、0.6em 0.7em、0.6em 0.8emへ修正
 2019/09/21
 ブログリストとグリッドタイル要素マウスオーバー効果色を改修
2019/09/23
プラグイン「#calendar2」をレスポンシブ対応する
2019/09/23
タグ背景を透明にする
 2019/09/24
 ブログリストとグリッドタイル要素マウスオーバー効果色を透明白に修正
2019/09/25
nagamira_css4.cssからnagamira_css5.cssに移動
　nagamira_css1.css分離のため
2019/09/25
media_listを使ったスタイルシートをnagamira_css11.cssとして独立
ここにあるのは基本的な設定のみ
動作確認試験OK問題は見られず。名前をnagamira_css5.cssに戻した
2019/10/01
マーカーの色名を「color-」を廃止して短く記述するように修正した
2019/10/03
箇条書きの色を変える
「赤字の～」の表記がよくあるので誤って認識しやすい
2019/10/07
ブログリストの日付のクリック範囲を行いっぱいに広げる。
これによって操作性が向上する
2019/10/07
ブログリストの日付のクリック範囲を行いっぱいに広げるのはブログリストをリスト形式にするとおかしくなるので中止
これにともなうレイアウト崩れはブログリストの日付にあったインラインブロックを廃止して修正できた
2019/10/07
ブログリストの日付を太字、ふちどりテキストに改修
2019/10/07
cols-link-expantionで拡張した場合は画像の角を丸める
画像だけではリンク有無がわからないので識別しやすくする
2019/10/08
コピー防止確認用ダミー
追加
2019/10/09
サムネイル内またはカラム内にボタンが含まれる場合、自動的に枠幅に入るようにする
2019/10/18
thumbnailマウスオーバー時の変化を白くしたくない場合の方法をテスト
2019/10/24
ページにswfuで添付ファイルがある場合のスタイル指定
2019/10/24
縦横比をpadding-bottom: 60.25%;に訂正
2019/12/06
ブログリストの日付文字が画像によっては縁取りがくっつきすぎるので位置を調整。
縁取りの調整ができたので背景の透明白表示を廃止。
2019/12/07
ブログリストの日付文字がタイトルより目立ちすぎるので調整。
2019/12/07
フッター表示時のタグの文字の色を調整する
2019/12/19
ページ移動ボタンのマウスオーバー時の反応を調整
見た目が地味なので少しカラフルに
2019/12/21
フッター表示時のタグ文字の書体サイズを143%に指定
html,bodyの指定書体サイズを20pxになるようにする
2019/12/23
ul.list1 li、ul.list2 li、ul.list3 liのアイコンをFontAwesomeに色を変更。大きさを調整。
2019/12/23
目次のアイコンをfont-family: FontAwesome;に変更
2019/12/25
カラムに.cols-link-expantionクラス適用時マウスオーバー時のふわっとした感じを0.5から0.3に
2019/12/25
目次のアイコンを変えたのでtext-indentを-1.4emから-1emに修正
2019/12/26
目次の排他領域を1emに統一
2019/12/26
箇条書きのアイコンの大きさを107％から110％にする
2019/12/26
タグ検索結果のマージンを0.5em 1em 0.5em 1em設定する
2019/12/27
ブログリストとグリッドタイル要素マウスオーバー効果色を透明白を廃止
アンダーラインをなしにする
2019/12/27
thumbnailマウスオーバー時の効果後付け
全体でふわっとするとわかりにくいので廃止
2019/12/28
サムネイルのブログアイテムマウスオーバー時枠線を太くする
2019/12/29
目次アイコン3が不評なコーヒーカップからメガホンに替える
2019/12/30
cols-link-expantionで拡張した場合は画像の角を丸めを8pxから4PXへ減らす。
見た目が変だったため中止
2019/12/31
Qブログのメニュー表示時の書体サイズ指定の!importantを廃止
Qブログのメニュー表示時の下罫線を1px dotted #ccc;に変更
2019/12/31
ブログ記事のバッジ類のマウスオーバー時のボックスシャドウを廃止代わりにopacityを追加
2019/12/31
ブログ記事の移動ボタンのボックスシャドウを廃止。代わりにopacityを追加
2019/12/31
ページ移動ボタン360pxちょうどでレイアウト崩れを起こすので調整
2020/01/10
主にグリッド表示で使われるブログリスト日付の最小フォントを18pxに指定
親から継承できる所をコメントアウト
2020/01/10
主にグリッド表示で使われるブログリスト日付の行高を1.4em;から1.8em;へ修正
ずれが発生していた
2020/01/11
主にリスト表示等で使われるブログリストの日付文字の白ふちどりを復活させる
2020/01/17
リスト表示等で使われるブログリスト最小文字サイズを16pxに修正
（iphone5向け修正）
360pxの20pxを追加
2020/01/24
サムネイル内のゴースト系ボタンbtn-ghostテキストシャドウをなしにする
2020/01/24
サムネイル内・カラム内のボタンは自動的に枠幅に入るように文字を折り返す
2020/07/02
メニューバーにおける項目の背景色指定の廃止。
2020/07/10
ナビのアニメ効果を調整
2020/07/11
ブログリスト表示等で使われるブログリストの日付文字日付の大きさの調整
Android端末では小さく出るため大きくする
2020/07/14
ページ移動ボタン大きさ、余白調整、上マージン廃止
2020/07/14
qblogブロリスト（リストタイプ）の概要の高さ、文字大きさを調整。
（ほとんど作り直し）
これに併せてブログリスト（リストタイプ）日付の位置を調整
2020/07/14
メイン画面用
ブログリスト（タイル表示）時の日付表示追加
2020/07/14
フッター用
ブログリスト（タイル表示）時の日付表示追加
2020/07/14
メニュー、メニューアーティクル部分専用
ブログリスト（タイル表示）時の日付表示追加
2020/07/15
ブログリスト（リスト表示）
メニュー用日付表示
2020/07/15
メニューバーにおける項目の枠線の整理
枠線を使う場合、以下を使うと良い
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 5px;
2020/07/16
ページ移動ボタン間を開けるように変更。レイアウト崩れと間違われないため
2020/07/16
ブログ記事の移動ボタンの動作を上からそれぞれ左右に修正
2020/07/17
目次用スタイルを追加
2020/07/18
qblogブロリスト（リストタイプ）のモバイル端末時の概要の高さ、文字大きさを調整。
2020/07/18
カラムに.cols-link-expantionクラス適用時、リンクにはアンダーラインをつける
2020/07/18
ブログリスト（タイル表示）時の日付表示文字サイズ調整
タイルのレイアウト調整に伴う追加措置
2020/07/18
qblogブロリスト（リストタイプ）のモバイル端末時の日付の縁取りをくっきりと白に調整
2020/07/22
タグ検索結果のマージンを0.5emに統一する
2020/07/24
目次の排他領域をレスポンシブ対応にする
左マージンをモバイル画面では0.5em;、横画面からは1em;と切り替える
2020/07/24
目次の行間の高さの重複を調整
2020/07/28
ブログリストテーブル（画像＋文字）のマウスオーバー時の効果を追加
2020/07/29
フッター表示時のタグにアンダーラインが入らないようにする
フッター表示リンクにアンダーラインが入るようにしたための措置
2020/08/06
数字に日本語書体の導入、大型化に伴い、プラグイン「#calendar2」を
レスポンシブ対応する所の幅widthを改修
2020/08/12
ブログ記事の移動ボタンのマウスオーバー時の移動アニメを廃止
2020/09/01
箇条書きのアイコンのコードと色を修正
2020/09/01
目次のアイコンのコードを調整
2020/09/27
&new関数利用時のnew1クラスのスタイルを追加
2020/09/28
float: left;をコメント化
display: flex;を追加
2020/09/29
&new関数利用時のnew1,new5クラスのスタイルを追加
2020/09/29
カラムに.cols-link-expantionクラス適用時、リンクのアンダーラインを廃止
2020/09/29
カラム拡張のcols-link-expantionが不要になったので外す
2020/09/29
カラム内のゴーストボタンのシャドウを外す
2020/09/30
.cols-link-expantion時のリンク文字の書式を修正
cols.inc.php関数で「cols_expantion」引数としてする事で.cols-link-expantionのhtml2呼び出しを終了
2020/09/30
.cols_inlink、.thumbnail_inlink 使い勝手がよくないので廃止
.thumbnail p > a.btnもセットで
2020/09/30　改修
カラムとサムネイル、複数リンク対応のため継承でボタンの文字色を分けてつける
通常のボタン、warning,lightボタン、defaultボタンマウスオーバー時を分けている
読みやすさを第一にしている
2020/10/01
.thumbnail > div > p > a の記述を止めて.thumbnail aにした
2020/10/03
サムネイルのブログアイテムマウスオーバー時反応、枠線がグレーのままだったので白に修正
2021/01/29
2Kに対応、1700px、2000pxの文字の大きさを追加。デザインは随時見直し
サイドメニューの文字バランスは検討
2021/09/05
ルビの大きさを修正
font-size: 65%;line-height: 65%;を
font-size: 70%;line-height: 70%;へ
2021/09/07
箇条書きと目次用スタイルの微調整
2021/09/07
目次（箇条書き）にアイコンを出さないようにする（要確認）
モバイル時、邪魔になる事が多いため。
2021/09/17
目次用スタイルの行上マージンを修正して、さらに見やすくする
2021/10/17
thumbnailのリンク文字の文字色を #333;から　#111;に修正して強調。
元は青色で出るリンク文字をサムネイル向けに修正しているが、
iphoneで表示させると若干おかしな色になるのでこの措置

=================*/


/* ======
 * 2018/05/11
 * カーソルがきた時、avtive、focus時、ナビバーにアニメ効果を与える
2020/07/10
ナビのアニメ効果を調整
 ====== */

.navbar-default .navbar-nav > li > a:hover {
        transition: all .3s ease;
}

@media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a:hover {
        transition: all .3s ease;
    }
}

.navbar-default .navbar-nav > li > a:active,
.navbar-default .navbar-nav > li > a:focus {
        transition: all .3s ease;
}

@media (min-width: 768px) {
    .navbar-default .navbar-nav > li > a:active,
    .navbar-default .navbar-nav > li > a:focus {
        transition: all .3s ease;
    }
}


/* ======
 * 2018/05/11
 * カーソルがきた時、avtive、focus時、ナビバーにアニメ効果を与える
2020/07/10
ナビのアニメ効果を調整
 ====== */

.navbar-default .dropdown-menu > li > a:hover {
        transition: all .3s ease;
}

.navbar-default .dropdown-menu > li > a:active,
.navbar-default .dropdown-menu > li > a:focus {
        transition: all .3s ease;
}


/* ======
 * 2018/05/13
 * hover、avtive、focus時、
 * 編集画面のテキストエリアの下にあるコマンドボタンにマウスがきた時、色をアイボリーにして、拡大して見やすくする。
 * グレーだと地味すぎるため。
 ====== */

.qhm-btn-default:hover {
    transition: .2s ease;
    background-color: ivory;
    border-color: gray;
}

.qhm-btn-default:active,
.qhm-btn-default:focus {
    transition: 0.5s ease;
}


/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * ブログ画面のバッジを修正
 2019/09/06
バッジ類のマウスオーバー時の色を青系に統一
2019/09/19
ブログ記事のバッジ類のマウスオーバー時の反応をわかるように浮き上がらせる
2019/12/31
ブログ記事のバッジ類のマウスオーバー時のボックスシャドウを廃止、代わりにopacityを追加
 ====== */

a.badge:hover,
a.badge:focus {
    background-color: #337ab7;
    transform: translateY(-4px);
    opacity: .5;
    transition: 0.5s ease;
}


/* ======
2018/05/11
hover、avtive、focus時、
ブログ記事の移動ボタンを修正
2019/09/06
バッジ類のマウスオーバー時の色を青系に統一
2019/09/19
ブログ記事の移動ボタンのマウスオーバー時の反応がスマホでは最後まで出ないので浮き上がらせるだけに変更
2019/12/31
ブログ記事の移動ボタンのボックスシャドウを廃止。代わりにopacityを追加
    box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
2020/07/16
ブログ記事の移動ボタンの動作を上からそれぞれ左右に修正
2020/08/12
ブログ記事の移動ボタンのマウスオーバー時の移動アニメを廃止
====== */

.pager li > a:focus,
.pager li > a:hover {
    font-weight: 700;
    background-color: white;
    color: #64b1ba;
    opacity: .5;
    transition: 0.3s ease;
}

.pager li > a:active,
.pager li > a:active,
.pager li > a:focus,
.pager li > a:focus {
    transition: .5s ease;
}

/*
.pager li.previous> a:focus,
.pager li.previous> a:hover {
    transform: translatex(-4px);
}
.pager li.next> a:focus,
.pager li.next> a:hover {
    transform: translatex(4px);
}
*/

/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * テーマ編集のテーマカラーの色タイルを大きくして見やすくする
 * #preview_bar　必要ならこれを先頭につける
 ====== */

.themeColorPicker-wrap-swatch :hover {
    transform: scale(2);
    transition: .2s ease;
}

.themeColorPicker-wrap-swatch :active,
.themeColorPicker-wrap-swatch :focus {
    transform: scale(2);
    transition: .2s ease;
}


/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * テーマ編集のイメージを大きくして、見やすくする
 * 元が30＊30pxと小さいので意図的に大きくする
 ====== */

#preview_bar .qhm-skin-customizer-menu [data-image]:hover {
    transform: scale(2);
    transition: .2s ease;
}

#preview_bar .qhm-skin-customizer-menu [data-image]:active,
#preview_bar .qhm-skin-customizer-menu [data-image]:focus {
    transform: scale(2);
    transition: .2s ease;
}


/* ======
 * 2018/05/11
 * ブログリストとグリッドタイル要素マウスオーバー効果
 * avtive、focus時、ブログリストとグリッドタイル要素の色を変える
 * スマホで見ると、アクティブ時の反応がわかりやすい長所がある。
 2019.03.12
 色を変更、並び順をわかりやすく変更
 2019.04.12
 色を修正
 2019/09/21
 ブログリストとグリッドタイル要素マウスオーバー効果色を改修
 2019/09/24
 ブログリストとグリッドタイル要素マウスオーバー効果色を透明白に修正
2019/12/27
ブログリストとグリッドタイル要素マウスオーバー効果色を透明白を廃止
アンダーラインをなしにする
2019/12/28
サムネイルのブログアイテムマウスオーバー時枠線を太くする
2020/07/19
サムネイルのブログアイテムマウスオーバー時反応を整理する
2020/07/28
ブログリストテーブル（画像＋文字）のマウスオーバー時の効果を追加
2020/10/03
サムネイルのブログアイテムマウスオーバー時反応、枠線がグレーのままだったので白に修正
====== */
/*
サムネイルのブログアイテムマウスオーバー時の反応
*/
a.thumbnail.qblog-item:hover,
a.thumbnail.qblog-item:active,
a.thumbnail.qblog-item:focus {
    border: 2px solid #f9f9f9;
    transition: 0.3s ease;
    text-decoration: none;
}

/*
ブログリスト（文字だけ）のマウスオーバー時の反応
*/
.qblog-list ul li:hover,
.qblog-list ul li:active,
.qblog-list ul li:focus {
    background-color: rgba(119, 119, 119, .2);
    transition: 0.3s ease;
}

/*
ブログリストテーブル（画像＋文字）のマウスオーバー時の効果
*/
.qblog-list-table ul li:hover,
.qblog-list-table ul li:active,
.qblog-list-table ul li:focus {
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.50), 0 0 5px rgba(0, 0, 0, 0.50);
}

/*===================
2019.03.18
Qブログのメニュー表示時のスタイルシート追加
メニューバーで継承させる事でページ内のスタイルと切り離す
20190321メニューのスタイルシート改修の洗い出し調査.txtからひっぱってきた
2019.03.24
Qブログの編集画面で書体の大きさが変わってしまう現象を.haik-article-menu のセレクタを追加して解決できた。
2019.04.07
メニューバーでシェアボタンを表示する時、要素左右が空きすぎるとわかったので左右マージンを0pxに
2020/07/02
メニューバーにおける項目の背景色指定の廃止。
旧仕様の修正が抜けていた
2020/07/15
メニューバーにおける項目の枠線の整理
枠線を使う場合、以下を使うと良い
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 5px;
2020/07/17
メニューにおけるブログリストの余白調整    
===================*/

.haik-menu li.list-group-item,
.haik-article-menu li.list-group-item {
    position: relative;
    display: block;
    padding: 10px 0px;
    margin-bottom: -1px;
    border: 1px solid transparent;
}

@media (min-width: 568px) {
    .haik-menu li.list-group-item,
    .haik-article-menu li.list-group-item {
        padding: 15px 4px;
    }
}

@media (min-width: 768px) {
    .haik-menu li.list-group-item,
    .haik-article-menu li.list-group-item {
        padding: 10px 4px;
    }
}

@media (min-width: 992px) {
    .haik-menu li.list-group-item,
    .haik-article-menu li.list-group-item {
        padding: 10px 4px;
    }
}

@media (min-width: 1200px) {
    .haik-menu li.list-group-item,
    .haik-article-menu li.list-group-item {
        padding: 15px 4px;
    }
}


/*===================
2019.03.18
Qブログのメニュー表示時のスタイルシート。
2019.03.20
Qブログの編集画面で書体の大きさが変わってしまう現象がある。
2019.03.24
Qブログの編集画面で書体の大きさが変わってしまう現象を.haik-article-menu のセレクタを追加して解決できた。
2019/12/31
Qブログのメニュー表示時の書体サイズ指定の!importantを廃止
Qブログのメニュー表示時の下罫線を1px dotted #ccc;に変更
===================*/

.haik-menu ul.qblog_categories li,
.haik-menu ul.qblog_archives li,
.haik-menu ul.qblog_recent li,
.haik-menu ul.qblog_recent_comments li,
.haik-article-menu ul.qblog_categories li,
.haik-article-menu ul.qblog_archives li,
.haik-article-menu ul.qblog_recent li,
.haik-article-menu ul.qblog_recent_comments li {
    border-bottom: 1px dotted #ccc;
    margin-top: 2px;
    font-size: 18px;
    font-weight: 700;
    color: #3e3e3e;
}

@media (min-width: 568px) {
    .haik-menu ul.qblog_categories li,
    .haik-menu ul.qblog_archives li,
    .haik-menu ul.qblog_recent li,
    .haik-menu ul.qblog_recent_comments li,
    .haik-article-menu ul.qblog_categories li,
    .haik-article-menu ul.qblog_archives li,
    .haik-article-menu ul.qblog_recent li,
    .haik-article-menu ul.qblog_recent_comments li {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .haik-menu ul.qblog_categories li,
    .haik-menu ul.qblog_archives li,
    .haik-menu ul.qblog_recent li,
    .haik-menu ul.qblog_recent_comments li,
    .haik-article-menu ul.qblog_categories li,
    .haik-article-menu ul.qblog_archives li,
    .haik-article-menu ul.qblog_recent li,
    .haik-article-menu ul.qblog_recent_comments li {
        font-size: 22px;
    }
}

@media (min-width: 1200px) {
    .haik-menu ul.qblog_categories li,
    .haik-menu ul.qblog_archives li,
    .haik-menu ul.qblog_recent li,
    .haik-menu ul.qblog_recent_comments li,
    .haik-article-menu ul.qblog_categories li,
    .haik-article-menu ul.qblog_archives li,
    .haik-article-menu ul.qblog_recent li,
    .haik-article-menu ul.qblog_recent_comments li {
        font-size: 24px;
    }
}


/*===================
2019.03.18
Qブログの親リスト書式
2019.03.24
Qブログの編集画面で書体の大きさが変わってしまう現象を.haik-article-menu のセレクタを追加して解決できた。
===================*/

.haik-menu ul.qblog_recent,
.haik-menu ul.qblog_categories,
.haik-menu ul.qblog_recent_comments,
.haik-menu ul.qblog_archives,
.haik-article-menu ul.qblog_recent,
.haik-article-menu ul.qblog_categories,
.haik-article-menu ul.qblog_recent_comments,
.haik-article-menu ul.qblog_archives {
    padding: 0px;
    margin: 0;
    height: auto;
    font-size: 18px;
    font-weight: 700;
    color: #3e3e3e;
    line-height: 1.5em;
    padding-bottom: 16px;
}


/*===================
2019.03.18
Qブログのページ移動ボタン
タッチ操作時のため大きくする
2019.04.04
Qブログのページ移動ボタン上のマージンを取るように調整。
2019.05.11
ページ移動ボタンの書式を変更
線の濃さを上げて読みやすくする
2019.09.05
ページ移動ボタンのレイアウトを修正
2019/09/08
ページ移動ボタンのレイアウト崩れ発生
2019/09/13
ページ移動ボタンの属性を移植
小さくスマホではクリックしにくいのでボタンサイズを大きくした
2019/12/19
ページ移動ボタンのマウスオーバー時の反応を調整
見た目が地味なので少しカラフルに
===================*/
/*
2019/09/08
ページ移動ボタンのレイアウト崩れ発生
原因は左マージンを確保しようとして回り込まれてしまうため。
.haik-container ul.pagination > li {
    margin-left: 1.5em;
    text-indent: 0em;
    padding: 0;
}
*/
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 2;
    color: #fff;
    background-color: #909a9e;
    border-color: #ddd;
    border-top-width: 4px;
    border-top-color: #f7a64a;
    transition: .3s ease-in-out;
    padding-top: 9px;
}

/*
2019/09/13
ページ移動ボタンの属性を移植
ボタンが小さいので大きめにしている
*/
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    background-color: #2869a0;
    border-color: #2869a0;
    cursor: default;
}

/*
2019/09/13
ページ移動ボタンの属性を移植
小さくスマホではクリックしやすいようボタンサイズを大きくした
paddingを6px 10px → 10px 16px
2019/09/14
ページ移動ボタンpaddingを10px 16px → 10px 10pxへ修正
2019/09/18
ページ移動ボタンpaddingをレスポンシブ対応で大きさをメディアクエリで可変にする
2019/09/21
ページ移動ボタンpaddingを0.6em 10px、0.6em 16px、0.6em 0.7em、0.6em 0.8emへ修正
1桁のページ数値だとボタンが小さくなってしまうため
2019/12/31
ページ移動ボタン360pxちょうどでレイアウト崩れを起こすので調整
2020/07/14
ページ移動ボタン大きさ、余白調整、上マージン廃止
2020/07/16
ページ移動ボタン間を開けるように変更。レイアウト崩れと間違われないため

*/
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 0.7em 0.7em;
    margin: 0.3em 0.4em;
    line-height: 1.42857143;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border: 1px solid #999;
    margin-left: -1px;
}

.pagination li a {
    font-weight:700;
    font-size: 20px;
    /* margin-top: 0.8em; */
}

@media (min-width: 360px) {
.pagination li a {
    font-size: 20px;
    }     
}
@media (min-width: 568px) {
    .pagination li a {
    padding: 0.6em 0.7em;
        font-size: 22px;
    }
}

@media (min-width: 768px) {
    .pagination li a {
    padding: 0.6em 0.8em;
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .pagination li a {
        font-size: 22px;
    }
}

@media (min-width: 1200px) {
    .pagination li a {
        font-size: 24px;
    }
}


/*===================
2019.03.19
ブログ編集画面でQブログのスタイルシートで読み込んでいるため、文字の大きさが変わってしまう。強引だが、パレット毎合計31色毎に文字の大きさを全部設定する。
2019.03.20
試験的に行ったが、パレット毎に作成する効率の悪さを考えてコメントアウトする。
2019.03.21
やはりパレット毎に作っているようで、色毎に作る必要がある。
2019.03.24
Qブログの編集画面で書体の大きさが変わってしまう現象を.haik-article-menu のセレクタを追加して解決できた。
2019.03.28
色を31色分書いて、テーマ毎に振り分けて行く方向にする
2019.03.29
31色分かいても大変なのでhaik_coolの8色からはじめる
メディアクエリの768px→568pxに　スマホ横時とタブレット縦の解像度を兼ねる
2019.04.04
Line-heightで行間を広げた
2019.05.04
条件セレクタを使った記述に切り替えた
パレット毎に記述していた多くの行数が減った
2019.09.02
ブログリスト類の書体の大きさを調整
===================*/

[class^="haik-palette-"] .qblog_categories > .list-group-item a,
[class^="haik-palette-"] .qblog_recent_comments > .list-group-item a,
[class^="haik-palette-"] .qblog_archives > .list-group-item a,
[class^="haik-palette-"] .qblog_recent > .list-group-item a,
[class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a,
[class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a,
[class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a,
[class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a {
    color: #333;
    font-size: 20px;
    line-height: 1.8em;
}

@media (min-width: 568px) {
    [class^="haik-palette-"] .qblog_categories > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent_comments > .list-group-item a,
    [class^="haik-palette-"] .qblog_archives > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent > .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a {
        font-size: 22px;
    }
}

@media (min-width: 768px) {
    [class^="haik-palette-"] .qblog_categories > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent_comments > .list-group-item a,
    [class^="haik-palette-"] .qblog_archives > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent > .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    [class^="haik-palette-"] .qblog_categories > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent_comments > .list-group-item a,
    [class^="haik-palette-"] .qblog_archives > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent > .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a {
        font-size: 22px;
    }
}

@media (min-width: 1200px) {
    [class^="haik-palette-"] .qblog_categories > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent_comments > .list-group-item a,
    [class^="haik-palette-"] .qblog_archives > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent > .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a {
        font-size: 24px;
    }
}
@media (min-width: 1500px) {
    [class^="haik-palette-"] .qblog_categories > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent_comments > .list-group-item a,
    [class^="haik-palette-"] .qblog_archives > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent > .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a {
        font-size: 26px;
    }
}
@media (min-width: 1700px) {
    [class^="haik-palette-"] .qblog_categories > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent_comments > .list-group-item a,
    [class^="haik-palette-"] .qblog_archives > .list-group-item a,
    [class^="haik-palette-"] .qblog_recent > .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a,
    [class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a {
        font-size: 28px;
    }
}



/*==========================
2019.05.04
マウスオーバー時の色をふわっとさせる
2019.06.06
ブログ系選択リストマウスオーバー時の色を文字色をグレーから青系に統一する
===================*/

[class^="haik-palette-"] .qblog_categories > .list-group-item a:hover,
[class^="haik-palette-"] .qblog_recent_comments > .list-group-item a:hover,
[class^="haik-palette-"] .qblog_archives > .list-group-item a:hover,
[class^="haik-palette-"] .qblog_recent > .list-group-item a:hover,
[class^="haik-palette-"] .haik-article-menu ul.qblog_recent .list-group-item a:hover,
[class^="haik-palette-"] .haik-article-menu ul.qblog_categories .list-group-item a:hover,
[class^="haik-palette-"] .haik-article-menu ul.qblog_recent_comments .list-group-item a:hover,
[class^="haik-palette-"] .haik-article-menu ul.qblog_archives .list-group-item a:hover {
    color: #337ab7;
    transition: 0.3s;
    text-decoration: underline;
}


/*==========================
2019.03.28
サムネイル　タブレット時に左右マージンを広げて視認性を向上
スマホ時は０だが、既にマージンが確保されている
==========================*/

@media (min-width: 768px) {
    .thumbnail {
        margin-left: 0.2em;
        margin-right: 0.2em;
    }
}


/*==========================
2019.03.20
クラス　サムネイル(.thumbnail)にリンク要素aが含まれている時、クリック範囲をサムネイル全体に広げる
==========================*/

.thumbnail {
    position: relative;
    z-index: 2;
    /* 必要であればリンク要素の重なりのベース順序を指定 */
}

.thumbnail a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    z-index: 2;
    /* 必要であればリンク要素の重なりのベース順序指定 */
}

/*==========================
2019/09/14
サムネイルまたはカラムに複数のリンクやボタンが含まれる場合、
別クラスを指定することでリンクを独立させることができる
ボタンの場合は自動的にリンクを独立できる
これによってサムネイルまたはカラムで複数リンクが使えるようになった。
nagamira_css4.cssに実装

【サムネイルでの使用方法】
 #html2(<div class="thumbnail_inlink">)
 [[名称>リンク先]]
 #html2(</div>)

 #html2(<div class="thumbnail_inlink">)
 &button(リンク先,primary){ボタン名称};
 #html2(</div>)

【カラムでの使用方法】
 #html2(<div class="cols_inlink">)
 [[名称>リンク先]]
 #html2(</div>)

 #html2(<div class="cols_inlink">)
 &button(リンク先,primary){ボタン名称};
 #html2(</div>)


ボタンの場合は自動で独立できる
難点としてはカラムとサムネイルのz-index:の重なりが上になる。
このため、本来はボタンの名称が長いとカラムの枠内での折り返しが効かない
意図的にカラムとサムネイルのリンクを黒文字にしているため、ボタンの文字色が黒くなってしまう。
そのため、応急処置的なやり方だが、ボタンの色を手動でつけている
利用頻度が高い通常のボタンはwarningボタンだけ黒になるようにしている
その次がゴースト系ボタンの対応
その他はグラデーションボタンがあるが、今はあまり使われていないので見送った。

2019/10/09
サムネイル内またはカラム内にボタンが含まれる場合、自動的に枠幅に入るようにする
あふれた文字は隠す形をとる。折り返しだと余計長くなるため。
文字数についてはデザイン者に考えてもらう。

2020/01/24
サムネイル内・カラム内のボタンは自動的に枠幅に入るように文字を折り返す

2020/09/29
サムネイル内・カラム内のボタン折り返しの改修
2020/09/30
.cols_inlink、.thumbnail_inlink 使い勝手がよくないので廃止
.thumbnail p > a.btnもセットで
==========================*/
/*
「別リンク」は普通に配置する 
リンク要素の重なり順を上にする
2020/09/30
改良につき廃止
*/
/*
.cols_inlink a,
.thumbnail_inlink a,
.thumbnail p > a.btn{
    position: relative;
    z-index: 3;
}
*/

/* 
2020/01/24
サムネイル内・カラム内のボタンは自動的に枠幅に入るように文字を折り返す
2020/09/29
サムネイル内・カラム内のボタン折り返しの改修

*/
.thumbnail p > a.btn{
    /* 2019/10/09 改修分 あふれた文字を隠していた*/
    /*
    width: 100%;
    overflow: hidden;
    */
    /* 2020/01/24 改修後 */
    white-space: pre-line;
    word-break: break-all;
}


/*
カラム内の複数リンクでボタンを自動的に独立させる
サムネイル内・カラム内のボタンは自動的に枠幅に入るように文字を折り返す
2020/09/29
カラム拡張のcols-link-expantionが不要になったので外す
*/
.col-sm-0 a.btn,
.col-sm-1 a.btn,
.col-sm-2 a.btn,
.col-sm-3 a.btn,
.col-sm-4 a.btn,
.col-sm-6 a.btn {
    /*「別リンク」は普通に配置する */
    position: relative;
    /* リンク要素の重なり順を上にする */
    z-index: 3; 
    /* 2019/10/09 改修分 あふれた文字を隠していた*/
    /*
    width: 100%;
    overflow: hidden;
    */
    /* 2020/01/24 改修後 */
    white-space: pre-line;
    word-break: break-all;
}


/*
2019/09/14
カラムとサムネイル、複数リンク対応のため継承でボタンの文字色を分けてつける
通常の白文字ボタンとwarning,lightボタンを分けている
その他のボタンについては対応していない
*/
.thumbnail a.btn {
     color: #fff; 
}

.thumbnail a.btn-default:hover,
.thumbnail a.btn-warning,
.thumbnail a.btn-light {
    color: #333;
}

/*
2019/09/14
カラムとサムネイル、複数リンク対応のためボタンの文字色を分けてつける 
通常の白文字ボタンとwarningボタンを分けている
2020/09/29
カラム拡張のcols-link-expantionが不要になったので外す

*/
.col-sm-0 a.btn,
.col-sm-1 a.btn,
.col-sm-2 a.btn,
.col-sm-3 a.btn,
.col-sm-4 a.btn,
.col-sm-6 a.btn {
    white-space: pre-line;
    word-break: break-all;
}


/* 
ゴースト系ボタンbtn-ghost は一括で黒に指定
2020/01/24
サムネイル内のゴースト系ボタンbtn-ghostテキストシャドウをなしにする
*/
.thumbnail a.btn-ghost {
    color: #333;
    text-shadow: none;
}

/*
2020/01/08テキストシャドウをオフにする
2020/09/29
カラム拡張のcols-link-expantionが不要になったので外す
2020/09/29
カラム内のゴーストボタンのシャドウを外す
*/
.col-sm-0 a.btn-ghost,
.col-sm-1 a.btn-ghost,
.col-sm-2 a.btn-ghost,
.col-sm-3 a.btn-ghost,
.col-sm-4 a.btn-ghost,
.col-sm-6 a.btn-ghost {
    color: #333;
    text-shadow: none;
}


/*==================================
2019.04.12
thumbnail内のリンクを太字にして見やすくする
マウスオーバー時下線を廃止
2019.04.29
画像とリンクテキストのマウスオーバー時の色を修正
2019.04.30
thumbnailとcolsのリンク時の反応を調整
2019.04.30
課題：thumbnail内にリンクがなくても反応してしまうので使い分けが求められる
リンクがあるページ毎に記述するといった変則的な使い方になりそう。
2019.05.01
記述する順番を修正
2019.05.04
thumbnailマウスオーバー時の変化をふわっと浮くように修正
2019.05.08
thumbnailの自動リンク時、マウスオーバー時に枠いっぱいに色を替える方法がわかった
従来は使い分けるしかなかったのが、リンクがない場合も反応しないようになった
2019/10/18
thumbnailマウスオーバー時の変化を白くしたくない場合の方法をテスト
2020/10/01
.thumbnail > div > p > a の記述を止めて.thumbnail aにした
2021/10/17
thumbnailのリンク文字の文字色を #333;から　#111;に修正して強調。
元は青色で出るリンク文字をサムネイル向けに修正しているが、
iphoneで表示させると若干おかしな色になるのでこの措置

====================================*/

.thumbnail a {
    color: #111;
    text-decoration: none;
    font-weight: 700;
}

/*
thumbnailマウスオーバー時の効果後付け
2019/12/27
thumbnailマウスオーバー時の効果後付け
全体でふわっとするとわかりにくいので廃止
*/
/* 
.thumbnail a:hover::after {
    outline: 0;
    transition: .3s;
    background-color: rgba(255, 255, 255, .5);
}
*/

/*
.thumbnail:hover a img {
    background-color: rgba(255, 255, 255, .5);
    transition: .3s;
}
*/

/*　
課題：thumbnail内にリンクがなくても反応してしまうので使い分けが求められる
リンクがあるページ毎に記述するといった変則的な使い方になりそう。
.thumbnail:hover{
    text-decoration:none;
    opacity:0.6;
    transition:.3s;
}
*/


/*==========================
2019.05.08
クラス.bs-box-link-expantionは機能的にcos-link-expantionと重複するので廃止する

2019.03.28　
クラス.bs-box-link-expantion　実装
nagamira_css4.cssに実装
クラス　bs-box(.qhm-bs-box )にリンク要素aが含まれている時、クリック範囲を桁全体に広げる。必要であればz-index:でリンク要素の重なりのベース順序を指定 
bs_boxのクラス指定より早い。
HAIKでは以下のように利用する
#html2(<div class="bs-box-link-expantion">)
#bs_box(panel){{{{
[[&show(stock_photo_0006560.jpg,,ダミー画像);>ひな形製品情報ページ]]
テキストエリア本文が入ります（マウスは枠全体で反応）
}}}}
#html2(</div>)

対象リンクは１個だけにする事。複数ある場合の動作は不明。
必ず#html2(</div>)で閉じること
2019.05.08
.bs-box-link-expantionクラスによるの自動リンク時、マウスオーバー時に枠いっぱいに色を替える方法がわかった
a:hover::afterを指定して、background-color: rgba(255, 255, 255, .5);を指定することで対応できる
==========================*/


/*
.bs-box-link-expantion .qhm-bs-box {
    position: relative;
    z-index: 1; 
}
.bs-box-link-expantion .qhm-bs-box  a::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
  z-index: -1; 
}

/*
2019.03.20
ホバー時の透過エフェクト 
*/

.bs-box-link-expantion .qhm-bs-box a:hover::after {
    background-color: rgba(255, 255, 255, .5);
    transition: 0.3s;
}


/*========================
2019.03.21
箇条書きの文字をアイコンに書き換える
これを応用してbs_boxを使って、クラス毎に箇条書きスタイルを用意したらOKだと気づく
.haik-content とすることでナビやメニュー類への干渉を防ぐ
現時点ではこのままだとタブに影響する
2019.03.22
アイコン色を#41ccd8→#5bb254;にもう少し緑の度合いを上げた
2019.09.02
修正履歴のアイコンを出さないようにした。
2019.09.05
箇条書きのアイコンが出なくなった。
原因は箇条書きと修正履歴を区別できるクラス指定がないため。
クラス指定ができれば衝突を避けられるが、できないのでどうするかを考えたが、方法がない。
2019.09.05
修正履歴と箇条書きのアイコンを共用できるアイコンに変えた。
2019.09.06
箇条書きのアイコンを110％に設定
    →凍結
    なお、カスタマイズ対応OK   
2019/09/09
箇条書きアイコンの並びを変更  
2019/09/10
箇条書きアイコンの並びを変更    
色は調整中（あまり目立ちすぎてもいけないので）
2019/09/14
箇条書きの字下げはtext-indent: 0em;にすること
箇条書きの字下げがここで-1.4emになっているとレイアウト崩れが発生する
（テーマ毎のレイアウト崩れで互換性の悪さを招いていた原因）
2019/09/21
箇条書きのアイコンを変更
予想以上に多く使われているのでチェックマークではおかしい所もあった。
違和感が出ないように構成しなおした。
箇条書き1列　レコード（日の丸にも見えるかな）
箇条書き2列　サムズアップ
箇条書き3列　チェックマーク

色変更についてはいろいろ考えたが、ページ内で宣言する手がある。
以下のように記述することで変えられる。

#beforescript{{
<style type="text/css">
.haik-container ul.list1 li::before {color: #337ab7;}
.haik-container ul.list2 li::before {color: #337ab7;}
.haik-container ul.list3 li::before {color: #337ab7;}
</style>
}}

2019/09/14
箇条書きの指定
クラスが .haik-contentではなくクラス .haik-container にすること
テーマ　drawingではメニューで箇条書きアイコンが出てしまうので
2019/10/03
箇条書きの色を変える
「赤字の～」の表記がよくあるので誤って認識しやすい
2019/12/23
ul.list1 li、ul.list2 li、ul.list3 liのアイコンをFontAwesomeに色を変更。大きさを調整。
（旧）
font-family: 'Glyphicons Halflings';
content: "\e165";
font-family: 'Glyphicons Halflings';
content: "\e125";
2019/12/26
箇条書きのアイコンの大きさを107％から110％にする
2020/09/01
箇条書きのアイコンの色を修正
========================*/
/*
箇条書きの字下げはtext-indent: 0em;にすること
*/

.haik-container ul.list1,
.haik-container ul.list2,
.haik-container ul.list3 {
    list-style: none;
    text-indent: 0em;
}



/* 2019.03.21
　タブナビに干渉を起こしてしまう方法の典型的な事例　
　ここの値をul.list1に入れたらあっけなく解決
*/


/*
.haik-content ul li {
    text-indent:-1.4em;
}
*/


.haik-container ul.list1 li::before,
.haik-container ul.list2 li::before,
.haik-container ul.list3 li::before {
    list-style: none;
    position: relative;
    font-weight: 900;
    font-family: FontAwesome;
    font-size: 110%;
    top: 0px;
    padding-right: 6px;
    text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989992px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756802px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279415px 0px;
}

.haik-container ul.list1 li::before {
    content: "\f0a4";
    color: #337ab7;
}

.haik-container ul.list2 li::before {
    content: "\f058";
    color: #db6868;
}

.haik-container ul.list3 li::before {
    content: "\f192";
    color: #64b1ba;
}

/*========================
2019.09.02
修正履歴の標準アイコンを出さない
.haik-container .haik-content
list-styleをnoneにして箇条書きの文字をアイコンに書き換える記述を利用して、修正履歴のアイコンを出さない
========================*/

.haik-container.haik-content ul.list1,
.haik-container.haik-content ul.list2,
.haik-container.haik-content ul.list3 {
    list-style: none;
    text-indent: 0em;
}

/* 
2019.09.02
修正履歴のアイコンを出さないようにした。
が、箇条書きのアイコンが出なくなった。
原因は箇条書きと修正履歴を区別できるクラス指定がないため。
/*
.haik-container.haik-content ul.list1 li::before,
.haik-container.haik-content ul.list2 li::before,
.haik-container.haik-content ul.list3 li::before {
    list-style:circle;
    content: none;
}
*/


/*========================
目次の箇条書きのアイコンを出さない

2019.03.21
目次の箇条書きの文字をアイコンに書き換える
適用する範囲のクラスを .plugin-contents とすることでナビやメニュー類への干渉を防ぐ。
こちらはクラスがないので直接ul liの重なりレベルを書いて指定する。
2019.08.30
目次の罫線の色を替える
2019.09.03
フッター用の目次のスタイルを追加
.plugin-contents をフッターに継承して色を替えた
2019.09.04
通常時の色を黒から青に修正
アイコンの色もマウスオーバー時の設定に合わせて修正
2019/12/23
目次のアイコンfont-family: 'Glyphicons Halflings'をfont-family: FontAwesome;に変更
（旧アイコン）
font-family: 'Glyphicons Halflings';より洗練されているデザインが多いため
2019/12/25
目次のアイコンを変えたのでtext-indentを-1.4emから-1emに修正
2019/12/26
目次の排他領域を1emに統一
2019/12/29
目次アイコン3が不評なコーヒーカップからメガホンに替える
2020/07/24
目次の排他領域をレスポンシブ対応にする
左マージンをモバイル画面では0.5em;、横画面からは1em;と切り替える
2020/07/24
目次の行間の高さの重複を調整
2020/09/01
目次のアイコンのコードを調整
2021/09/07
目次（箇条書き）にアイコンを出さないようにする（要確認）
モバイル時、邪魔になる事が多いため。
========================*/

.plugin-contents {
    border-top: 2px dotted #aaaaaa;
    border-bottom: 2px dotted #aaaaaa;
    text-indent: -1em;
    padding: 0.5em;
}
@media (min-width: 568px) {
.plugin-contents {
        padding: 1em;
    }
}

.contents ul li {
    list-style: none;
    position: relative;
    padding-left: 1em;
}

.contents ul > li > ul {
    margin: 0.2em 0;
    padding-left: 0;
}

.contents ul > li::before {
    position: relative;
    font-family: FontAwesome;
    content: "\f0a4";
    font-weight: 900;
    padding-right: 0.5em;
    color: #337ab7;
}

.contents ul > li > ul > li::before {
    content: "\f0a9";
}

.contents ul > li > ul > li > ul > li::before {
    content: "\f192";
}

/*
2021/09/07
目次（箇条書き）にアイコンを出さないようにする（要確認）
*/
.contents .plugin-contents ul > li::before {
    display: none; 
}


/*========================
2019.09.03
フッター用の目次のスタイルを追加
.plugin-contents をフッターに継承して色を替えた
行間を空けて、アイコン色を替える
========================*/

.haik-footer .plugin-contents a{
    color: #fff;
    line-height: 2em;
}

.haik-footer .plugin-contents a:hover,
.haik-footer .plugin-contents a:focus {
    color:#f7a64a;
    text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;
}


.haik-footer .contents ul > li::before,
.haik-footer .contents ul > li > ul > li::before,
.haik-footer .contents ul > li > ul > li > ul > li::before {
/* font-sizeはフッターのデフォルトを継承しているので％で設定する */
    font-size:130%;    
    color: #ccc;
}

/* 
アイコンの色を替える
縁取りもとる
*/
/*
.haik-footer .contents ul > li:hover::before, 
.haik-footer .contents ul > li > ul > li:hover::before,
.haik-footer .contents ul > li > ul > li > ul > li:active::before{
    color:#f7a64a;
    text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;
}
*/

/*========================
2019.03.26
主に「このページのマップ」（サイトマップ、「被リンクページは、こちら」）の箇条書きをアイコンを消して読みやすくする。
ナビタブ、タブとの干渉を防ぐため、字下げは修正していない。
目次とも兼用なので改修は注意する
2020/07/17
目次用スタイルを追加
2020/07/21
目次用スタイル箇条書きにも使えるよう修正
2021/09/07
箇条書きと目次用スタイルの微調整
通常は1.875emの方が読みやすい。
2021/09/17
目次用スタイルの行上マージンを修正して、さらに見やすくする
========================*/

.haik-container.haik-content ul li,
.haik-container.haik-content ul li ul li,
.haik-container.haik-content ul li ul li ul li {
    list-style: none;
    border: none;
    line-height:1.875em;
}

.haik-container ul.list1,
.haik-container ul.list2,
.haik-container ul.list3{
    list-style: none;
    margin-top: 1em;
}
.haik-container ul.list1>li+li,
.haik-container ul.list1>li>ul.list2>li+li,
.haik-container ul.list1>li>ul.list2>li>ul.list3>li+li{
    margin-top: 0.5em;
}

/* 
マウスオーバー時の反応を変えて見やすくする 
目次が変になるので実装見送り
*/
/*
.haik-container.haik-content ul li:hover,
.haik-container.haik-content ul li ul li:hover,
.haik-container.haik-content ul li ul li ul li:hover {
    background-color:lightblue;
    color:black;
}
*/

/*
2021/09/17
目次用スタイルの行上マージンを修正して、さらに見やすくする
*/
.haik-container .contents ul li{
    list-style: none;
    line-height: 1em;
    border: none;
    margin-top: 0.4em;
    margin-bottom: 0em;
}
.haik-container .contents ul li ul li{
    margin-top: 0.2em;
}
.haik-container .contents ul li ul li ul li{
    margin-top: 0.1em;
}


/* 脚注などのリンク文字を使いやすく修正 */

sup {
    top: 0;
    font-size: 120%;
    line-height: 1.75em;
    font-weight: 700;
    vertical-align: baseline;
}


/*========================
2019.04.04
そのままでフッターへの設置がおかしいことに気づいたのでSNSシェアボタンを再設定。
フッター用と通常用とでクラスと属性を変える
グレーだけで無味乾燥だったものが大きく改善。
google-plusは2019年でサービス終了になるのでマウス反応を無効にした上で見えなくする
フッター専用のクラス指定を用意したのでそれに併せて復活
2019.08.13
ボタンの大きさを修正

========================*/

.share_buttons ul.nav > li > a.facebook {
    color: #385898;
    background-color: transparent;
    border-radius: 0px;
    font-size: 1em;
}

.share_buttons ul.nav > li > a.facebook:hover {
    color: #77a5ff;
}

.share_buttons ul.nav > li > a.twitter {
    color: #1da1f2;
    background-color: transparent;
    border-radius: 0px;
    font-size: 1em;
}

.share_buttons ul.nav > li > a.twitter:hover {
    color: #85d1ff;
}

/*========================
2019.08.13
グーグル＋ボタンを消す
互換性のため残してある
========================*/
.share_buttons ul.nav > li > a.google-plus {
    pointer-events: none;
    color: #56565600;
    pointer-events: none;
}


/*========================
2019.04.04
SNSシェアボタンに色をつける
フッター専用のクラス指定
========================*/

.haik-footer .share_buttons ul.nav > li > a {
    display: block;
    margin: 0;
    font-size: 1.4em;
    color: #999;
    padding: 0 3px;
}


/*
2019.04.04
google-plusはマウス反応を強制的に無効にして見えなくすること
2019.08.12
2019.07のVer7.3.2からgoogle-plusボタンは廃止になっている。
Ver7.3.2前のバージョンを使っている場合のために残してある。
*/

.haik-footer .share_buttons ul.nav > li > a.google-plus {
    pointer-events: none;
    color: #56565600;
}


/*========================
2019.04.29
リンクがある画像へマウスオーバー時、透明度を変える
2019.05.04
マウスオーバー時の反応をふわっとさせる
========================*/

a img:hover {
    opacity: 0.6;
    transition: 0.3s;
}


/*==========================
2019.04.29
クラス　カラム(.haik-container .col-sm-0~6)にリンク要素aが含まれている時、クリック範囲をそのカラム全体に広げる
thumbnailのリンク要素aが含まれている時の応用
nagamira_css4.cssに実装
必要であればz-indexでリンク要素の重なりのベース順序を指定する
2019.04.30
colsの自動リンク種類を増やす
なお.col-sm-3,9＝メニューに割り当てられている桁
2019.05.01
.cols-link-expantion への統合に伴いコメント化
==========================*/


/*
.haik-container .col-sm-0,
.haik-container .col-sm-1,
.haik-container .col-sm-2,
.haik-container .col-sm-3,
.haik-container .col-sm-4,
.haik-container .col-sm-6 {
    position: relative;
    z-index: 1; 
}

.haik-container .col-sm-0 a::after,
.haik-container .col-sm-1 a::after,
.haik-container .col-sm-2 a::after,
.haik-container .col-sm-3 a::after,
.haik-container .col-sm-4 a::after,
.haik-container .col-sm-6 a::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
  z-index: 2;  必要であればリンク要素の重なりのベース順序指定 
}
*/


/*==================================
2019.04.29
.col-sm-1～6内のリンクを自動的に太字にして見やすくする
2019.04.30
thumbnailとcolsのリンク時の反応を調整
2019.04.30
colsの自動リンク種類を増やしたのに伴う改修
2019.05.01
.cols-link-expantion への統合に伴いコメント化
2019.05.04
.cols-link-expantion でマウスオーバー時の変化をふわっとするように修正
====================================*/


/*
.haik-container .col-sm-1 a:hover,
.haik-container .col-sm-2 a:hover,
.haik-container .col-sm-3 a:hover,
.haik-container .col-sm-4 a:hover,
.haik-container .col-sm-6 a:hover {
    color: #bbb;
    outline: 0;
}

.haik-container .col-sm-0 a,
.haik-container .col-sm-1 a,
.haik-container .col-sm-2 a,
.haik-container .col-sm-3 a,
.haik-container .col-sm-4 a,
.haik-container .col-sm-6 a {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

/*==========================
2019.05.01 作成
.cols-link-expantionクラス
上にあるbs-box-link-expantionクラスと「-link-expantion」で合わせる
colsにリンクが含まれる場合、枠いっぱいにリンクろ広げる
リンク文字を太字にしてthumbnailsに準じた表示にする
桁 cols用クラス
 #html2(<div class="cols-link-expantion">)
 #cols(++++){{
 ここに説明が入ります。ここに説明が入ります。
 ++++
 ここに説明が入ります。ここに説明が入ります。
 }}
 #html2(</div>)

 のように囲んで使う

この上で記述してコメントアウトにしているcolsの自動リンクをクラス化したもの
カラムを単に桁分けのために使う場合とリンクのあるインデックス形式の桁分けと使い分けられるようになる。
複数リンクが含まれる場合、最後に記述されたリンクだけが有効になる。

クラス カラム(.haik-container .col-sm-0~6)にリンク要素aが含まれている時、クリック範囲をそのカラム全体に広げるクラス　カラム(.haik-container .col-sm-1)にリンク要素aが含まれている時、クリック範囲をそのカラム全体に広げる
をクラス指定する事で使い分けられるようにしている
thumbnailのリンク要素aが含まれている時の応用

2019.05.08
.cols-link-expantionクラスによるの自動リンク時、マウスオーバー時に枠いっぱいに色を替える方法がわかった
a:hover::afterを指定して、background-color: rgba(255, 255, 255, .5);を指定することで対応できる
2019/09/21
サムネイルと整合性を合わせるためマウスオーバー時に浮き上がらせる方法を採用
影をつけるだけだが、リンク範囲がわかりやすい
予想外だったが、カラム内のリンクもわかりやすい
2019/12/25
カラムに.cols-link-expantionクラス適用時マウスオーバー時のふわっとした感じを0.5から0.3に
2020/07/18
カラムに.cols-link-expantionクラス適用時、リンクにはアンダーラインをつける
2020/09/29
カラムに.cols-link-expantionクラス適用時、リンクのアンダーラインを廃止
見た目も悪いため
==========================*/

.cols-link-expantion .col-sm-0,
.cols-link-expantion .col-sm-1,
.cols-link-expantion .col-sm-2,
.cols-link-expantion .col-sm-3,
.cols-link-expantion .col-sm-4,
.cols-link-expantion .col-sm-6 {
    position: relative;
    z-index: 1;
}

.cols-link-expantion .col-sm-0 a::after,
.cols-link-expantion .col-sm-1 a::after,
.cols-link-expantion .col-sm-2 a::after,
.cols-link-expantion .col-sm-3 a::after,
.cols-link-expantion .col-sm-4 a::after,
.cols-link-expantion .col-sm-6 a::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
    z-index: 2;
    /* 必要であればリンク要素の重なりのベース順序指定 */
}


/*
.cols-link-expantion .col-sm-0:hover,
.cols-link-expantion .col-sm-1:hover,
.cols-link-expantion .col-sm-2:hover,
.cols-link-expantion .col-sm-3:hover,
.cols-link-expantion .col-sm-4:hover,
.cols-link-expantion .col-sm-6:hover{
    text-decoration:none;
    background-color: rgba(255, 255, 255, .5);
    transition:0.3s;
}
*/

/*
マウスオーバー時、浮き上がらせる 影を付けるのみ
*/
.cols-link-expantion .col-sm-1 a:hover::after,
.cols-link-expantion .col-sm-2 a:hover::after,
.cols-link-expantion .col-sm-3 a:hover::after,
.cols-link-expantion .col-sm-4 a:hover::after,
.cols-link-expantion .col-sm-6 a:hover::after {
    background-color: rgba(255, 255, 255, .3);
    outline: 0;
    box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1);
    transform: translateY(-0px);
    transition: 0.3s ease;
}

/*
2020/09/29
カラム内のリンク書式を修正
*/
.col-sm-0 a,
.col-sm-1 a,
.col-sm-2 a,
.col-sm-3 a,
.col-sm-4 a,
.col-sm-6 a {
    font-weight: 700;
}

/*
2020/09/30
.cols-link-expantion時のリンク文字の書式を修正
下線を止める
*/
.cols-link-expantion > div > div > p > a{
    color:#333;
    text-decoration:none;
}

/* 
2019/10/07
cols-link-expantionで拡張した場合は画像の角を丸める
画像だけではリンク有無がわからないので識別しやすくする
2019/12/30
cols-link-expantionで拡張した場合は画像の角を丸めを8pxから4PXへ減らす。
見た目が変だったため中止
*/
/*
.cols-link-expantion .col-sm-1 img,
.cols-link-expantion .col-sm-2 img,
.cols-link-expantion .col-sm-3 img,
.cols-link-expantion .col-sm-4 img,
.cols-link-expantion .col-sm-6 img {
    border-radius: 4px;
}
*/

/* ＝＝＝＝＝
 2019.05.09
 medhialistプラグインの書式のスタイルシート
 プラグインのままだと実装が十分ではなかったので改修、汎用的 に使えるようにした。
 2019/09/25
media_listを使ったスタイルシートをnagamira_css11.cssとして独立
ここは基本的な設定のみ
 ＝＝＝＝＝＝＝*/

.media{
    margin-top: 1.875em;
    margin-bottom: 1.6em;
    min-height: auto;
    box-sizing: border-box;
}

.media-object {
    display: block;
    border-right: none;
    border-bottom: none;
}

/*
2019.05.27
ポップアップボックスの背景修正
背景の内容が薄く見えると見せたい写真がよくわからなくなるので見せない方がいいため。
カスタマイズで変えられる
2019.05.28
ポップアップボックスの文字色が色盲の人には薄すぎるので修正。
コントラスト比が5未満にならないよう注意する
2019/09/19
キャプションを大きくしたが、画像が隠れてしまうので元に戻す。
*/

#cboxOverlay {
    background: black;
    opacity: 1 !important;
}

#cboxTitle {
    position: sticky;
    bottom: 0px;
    text-align: center;
    width: 100%;
    color: #111;
    font-size: 14px;
    line-height:2em;
    background-color:#fff;
    font-weight:700;
}

#cboxCurrent {
    position: absolute;
    bottom: 0px;
    left: 58px;
    color: #111;
    font-size: 20px;
}

/*==================================
2019.08.13
.googlemapのhtml記述用スタイル追加
　 #html{{
　<div class="googlemap" 
　※グーグルマップの「地図を埋め込む」で取得した「embed?pb=」の後に続く埋め込み用コードをここに書いて、本文内に設置する
　<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d817.8291869896725!2d135.68864168692076!3d34.923592261259074!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1565666418943!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
　</div> 
　}}
2019.08.15
文法エラーがあったのを訂正
padding-bottom: 75.25%;　この％が縦横比
2019/10/24
縦横比をpadding-bottom: 60.25%;に訂正

====================================*/
.googlemap{
    position: relative;
    padding-bottom: 60.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }

.google iframe, .google object, .google embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*==================================
2019.08.24
bs_box closeボタンの修飾
boostrap.mini.css12行のままだとレイアウトが変になるので修正。
====================================*/
.alert-dismissable .close, .alert-dismissible .close {
    position: relative;
    top: 50%;
    right: 1%;
    color: inherit;
}

/*==================================
2019.08.27
タグ検索結果に見出しをつける
なお、メニュー内では見出しをつけない
2019.08.31
タグ検索結果見出しの書体の大きさを解像度に応じて可変にする
2019.09.01
「タグ検索結果」でなく「関連ページ」で共通するタグのページ一覧を呼び出せるのではないか。
テストしてみる。
====================================*/
/*ul.taglist.pages::before{
    font-weight:700;
    font-size: 28px;
    content: "タグ検索結果";
    color: #333;
    line-height: 3em;
}

@media (min-width: 768px) {
ul.taglist.pages::before{
        font-size: 32px;
    }
}

@media (min-width: 992px) {
ul.taglist.pages::before{
        font-size: 36px;
    }
}

@media (min-width: 1200px) {
ul.taglist.pages::before{
        font-size: 40px;
    }
}
*/

.haik-menu ul.taglist.pages,
.haik-article-menu ol.taglist.pages{
		padding-left: 5px
}

.haik-menu ul.taglist.pages::before,
.haik-article-menu ul.taglist.pages::before{
    content: "";
    line-height:0em;
}


/*==================================
2019.09.01
#tagcloudで出すタグクラウドを普通の書式にする。
タグクラウドがうっとうしいので「タグ一覧」にしてしまう。
（タグをカテゴリの代替にしてしまえる）
長いが現在、以下のクラスを24個を一括で100％にしてしまう。
.tagcloud0～.tagcloud24
====================================*/

[class^="tagcloud"] {
	font-size: 100%
}

/*===================
2019.05.13
タグの修正。枠線とマウスオーバー時の効果を追加する。
2019.05.13
タグの修正。タグ要素にタグアイコンをつける
2019.05.18
タグのマージン上を調整
2019.08.26
タグの大きさを調整
2019.08.31
タグのアイコン変更と余白調整
色の調整（薄いと色盲の人に見づらい）
2019.09.01
タグのスタイルシートをnagamira_css1.cssからnagamira_css4.cssに移行
タグクラウドをタグ一覧とも統合して使えるようにしたため。
2019/09/07
タグアイコンの右排他余白をpadding-right: 3px;増やして視認性を上げる
文字とくっついていたのが改善された。
2019/09/23
タグ背景を透明にする
背景のあるパネルとの組み合わせでおかしい事に気づいたので。
2019/12/07
フッター表示時のタグの文字の色を調整する
2021/09/07
モバイル画面でのタグの大きさを80％にする
===================*/
.tag a,
[class^="tagcloud"] a {
    display: inline-block;
    margin-top: 0.1em;
    line-height: 1.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    word-break: break-all;
    text-decoration: none;
    color: #555;
    font-size:85%;
    font-weight: 700;
    background-color: transparent;
}
@media (min-width: 360px) {
.tag a,
[class^="tagcloud"] a {
        font-size:80%;
    }
}
@media (min-width: 375px) {
.tag a,
[class^="tagcloud"] a {
        font-size:85%;
    }
}
/* 
メモ
95%にしているのは端末によってはクリックしにくいため 
ここは適切に調整してください
*/
@media (min-width: 568px) {
.tag a,
[class^="tagcloud"] a {
        font-size:95%;
    }
}
@media (min-width: 768px) {
.tag a,
[class^="tagcloud"] a {
        font-size:90%;
    }
}
.tag a:hover,
[class^="tagcloud"] a:hover {
    background-color: #777;
    color: white;
    transition: 0.3s;
}

.tag a:hover::before,
[class^="tagcloud"] a:hover::before {
    color: white;
    transition: 0.3s;
}

.tag a::before ,
[class^="tagcloud"] a::before {
    font-family: 'Glyphicons Halflings';
    content: "\e041";
    color: #a5a5a5;
    padding-right: 3px;
}


/*
2019/12/07
フッター表示時のタグの文字の色と大きさを調整する
テーマ毎に改修が必要な場合は専用のスタイルシートでオーバーライド改修すること
画面が小さい、背景が暗くコントラストが強い時は文字を大きくした方が発見しゃすくなる
アイコンは文字の視認性を上げるため暗いグレーにしてある
2019/12/21
フッター表示時のタグ文字の書体サイズを143%に指定
html,bodyの指定書体サイズを20pxになるようにする
2020/07/29
フッター表示時のタグにアンダーラインが入らないようにする
フッター表示リンクにアンダーラインが入るようにしたための措置
*/

.haik-footer .tag a,
.haik-footer [class^="tagcloud"] a {
    color: white;
    font-size: 143%;
    text-decoration: none;
}

.haik-footer .tag a::before ,
.haik-footer [class^="tagcloud"] a::before {
    color: #999;
}

.haik-footer .tag a:hover::before,
.haik-footer [class^="tagcloud"] a:hover::before {
    color: #ddd;
}

/* 
2019.09.01
タグ検索結果の書体を太くする
2019/12/26
タグ検索結果のマージンを0.5em 1em 0.5em 1em設定する
2020/07/22
タグ検索結果のマージンを0.5emに統一する
*/
ul.taglist.pages {
    list-style-type: none;
    font-weight:700;
    margin: 0.5em;
}


/* 
2019.09.02
メインコンテナー内のタグクラウドの書式を変える
*/
.haik-container .htmltagcloud {
    line-height: 1.4em;
    margin: 1em;
    font-size: 100%;
}
@media (min-width: 768px) {
.haik-container .htmltagcloud {
    font-size: 120%;
    }
}


/*==================================
2019.09.08
蛍光マーカーの書式を変える
高さを低めにして文字を太くして見やすくする
【参考】蛍光ペン風マーカー線
https://kagesai.net/css-marker-design/

複数色を確保してある

 handline red 
 handline pink
 handline blue
 handline green
 handline skyblue
 handline orange
 handline purple

 【使い方】
 html呼び出しでマーカーを引く文字列をspanクラスを指定する。
 改行されないので続いて文字を書ける。
 #html{{
 <span class="handline red">赤マーカー</span>は赤色に太字。
 }}
 
 
2019/09/20
マーカーをクラス呼び出しで6色使えるようにした。
2019/10/01
マーカーの色名を「color-」を廃止して短く記述するように修正した
====================================*/
.handline {
    background: linear-gradient(transparent 70%, #ffd54f 70%);
    background-color: transparent;
    background-repeat: repeat;
    font-weight: 700;
}

/*　各色を予備として確保*/
.handline.red {
    background: linear-gradient(transparent 70%, #ff9393 70%);
}

.handline.pink {
    background: linear-gradient(transparent 70%, #ffc0cb 70%);
}

.handline.blue {
    background: linear-gradient(transparent 70%, #7fbfff 70%);
}

.handline.green {
    background: linear-gradient(transparent 70%, #7fff7f 70%);
}

.handline.skyblue {
    background: linear-gradient(transparent 70%, #afeeee 70%);
}

.handline.orange {
    background: linear-gradient(transparent 70%, #ffbf7f 70%);
}

.handline.purple {
    background: linear-gradient(transparent 70%, #cab8d9 70%);
}


/*==================================
2019/09/15
glyphiconを使うと位置が微妙にずれるので調整
2019/09/16
glyphiconを使うと位置が微妙にずれるので調整したが、誤作動を起こすので凍結
====================================*/
/*
.glyphicon {
    top: 0.2em;
    margin-right: 0.1em;
}
*/

/*==================================
2019/09/18
ルビ機能を使った場合のスタイルシートを追加
自動的に行高さを増やす。
2019/09/19
ルビスタイルシートの調整
2021/09/05
ルビの大きさを修正
font-size: 65%;line-height: 65%;を
font-size: 70%;line-height: 70%;へ
====================================*/
ruby {
    display: ruby;
    position: relative;
}

ruby rt {
    display: ruby-text;
    font-size: 70%;
    line-height: 70%;
    text-align: start;
    position: relative;
    top: 0.6ex;
}

/*
2019/09/20
埋め込みビデオの上下にマージンを追加する。
本体はvideo.min.cssにある
*/
.embed-responsive {
    margin: 1em 0 1em;
}


/*
2019/09/21
.qblog-list .qblog_dateの行高さがmain.cssで1emにクリアされているので改修
2019/10/07
ブログリストの日付のクリック範囲を行いっぱいに広げる。
これによって操作性が向上する。
2019/10/07
ブログリストの日付のクリック範囲を行いっぱいに広げるのはブログリストをリスト形式にするとおかしくなるので中止
2019/10/07
ブログリストの日付を太字、ふちどりテキストに改修
行いっぱいに広げなくてもいいようにした。
2019/12/06
ブログリストの日付文字が画像によっては縁取りがくっつきすぎるので位置を調整。
縁取りの調整ができたので背景の透明白表示を廃止。
2019/12/07
ブログリストの日付文字がipadなどではタイトルより目立ちすぎるので調整。
太字を見送り
2020/01/10
主にグリッド表示で使われるブログリスト日付の最小フォントを18pxに指定
親から継承できる所をコメントアウト
2020/01/10
主にグリッド表示で使われるブログリスト日付の行高を1.4em;から1.8em;へ修正
ずれが発生していた
2020/01/11
主にリスト表示等で使われるブログリストの日付文字の白ふちどりを復活させる
2020/01/17
リスト表示等で使われるブログリスト最小文字サイズを16pxに修正
（iphone5向け修正）
360pxの20pxを追加
2020/07/11
ブログリスト表示等で使われるブログリストの日付文字日付の大きさの調整
Android端末では小さく出るため大きくする

2020/07/14
qblogブロリスト（リストタイプ）の概要の高さ、文字大きさを調整。
このクラスがメニューやフッターのリストの原型となる
これに併せてブログリスト（リストタイプ）日付の位置を調整
2020/07/15
qblogブロリスト（リストタイプ）の概要の高さ、文字大きさを調整。
2020/07/18
qblogブロリスト（リストタイプ）のモバイル端末時の概要の高さ、文字大きさを調整。
2020/07/18
qblogブロリスト（リストタイプ）のモバイル端末時の日付の縁取りをくっきりと白に調整
2020/09/28
float: left;をコメント化
*/
.qblog-list .qblog_date {
    /* float: left; */
    top: auto;
    width: auto;
    height: auto;
    bottom: 0.7em;
    font-size: 14px;
    top: 95px;
    left: 5px;
    line-height: 1.8em;
    color: #555;
    background:none;
    text-shadow: rgb(255, 255, 255) 2px 0px 0px, rgb(255, 255, 255) 1.75517px 0.958851px 0px, rgb(255, 255, 255) 1.0806px 1.68294px 0px, rgb(255, 255, 255) 0.141474px 1.99499px 0px, rgb(255, 255, 255) -0.832294px 1.81859px 0px, rgb(255, 255, 255) -1.60229px 1.19694px 0px, rgb(255, 255, 255) -1.97998px 0.28224px 0px, rgb(255, 255, 255) -1.87291px -0.701566px 0px, rgb(255, 255, 255) -1.30729px -1.5136px 0px, rgb(255, 255, 255) -0.421592px -1.95506px 0px, rgb(255, 255, 255) 0.567324px -1.91785px 0px, rgb(255, 255, 255) 1.41734px -1.41108px 0px, rgb(255, 255, 255) 1.92034px -0.558831px 0px;
    }
@media (min-width: 360px) {
    .qblog-list .qblog_date {
        font-size: 16px;
        left: 10px;
    }
}
@media (min-width: 568px) {
    .qblog-list .qblog_date {
        font-size: 20px;
        top: 150px;
        left: 8px;
        text-shadow: rgba(255, 255, 255, 0.25) 3px 0px 0px,
    rgba(255, 255, 255, 0.25) 2.83487px 0.981584px 0px, 
    rgba(255, 255, 255, 0.25) 2.35766px 1.85511px 0px,
    rgba(255, 255, 255, 0.25) 1.62091px 2.52441px 0px,
    rgba(255, 255, 255, 0.25) 0.705713px 2.91581px 0px,
    rgba(255, 255, 255, 0.25) -0.287171px 2.98622px 0px,
    rgba(255, 255, 255, 0.25) -1.24844px 2.72789px 0px,
    rgba(255, 255, 255, 0.25) -2.07227px 2.16926px 0px,
    rgba(255, 255, 255, 0.25) -2.66798px 1.37182px 0px,
    rgba(255, 255, 255, 0.25) -2.96998px 0.42336px 0px,
    rgba(255, 255, 255, 0.25) -2.94502px -0.571704px 0px,
    rgba(255, 255, 255, 0.25) -2.59586px -1.50383px 0px,
    rgba(255, 255, 255, 0.25) -1.96093px -2.27041px 0px,
    rgba(255, 255, 255, 0.25) -1.11013px -2.78704px 0px,
    rgba(255, 255, 255, 0.25) -0.137119px -2.99686px 0px,
    rgba(255, 255, 255, 0.25) 0.850987px -2.87677px 0px,
    rgba(255, 255, 255, 0.25) 1.74541px -2.43999px 0px,
    rgba(255, 255, 255, 0.25) 2.44769px -1.73459px 0px,
    rgba(255, 255, 255, 0.25) 2.88051px -0.838247px 0px;

    }
}
@media (min-width: 768px) {
    .qblog-list .qblog_date {
        top: 150px;
        left: 14px;
    }
}
@media (min-width: 992px) {
    .qblog-list .qblog_date {
        font-size: 22px;
        top: 175px;
    }
}
@media (min-width: 1200px) {
    .qblog-list .qblog_date {
        font-size: 24px;
        top: 210px;
        left: 40px;
    }
}
/*
2020/07/15
ブログリスト（リスト表示）
メニュー用日付表示
*/
.haik-menu .qblog-list .qblog_date,
.haik-article-menu .qblog-list .qblog_date {
    top: 200px;
    font-size: 16px;
    left: 0.3em;
}
@media (min-width: 360px) {
    .haik-menu .qblog-list .qblog_date,
    .haik-article-menu .qblog-list .qblog_date {
        top: 150px;
        font-size: 18px;
    }
}
@media (min-width: 568px) {
    .haik-menu .qblog-list .qblog_date,
    .haik-article-menu .qblog-list .qblog_date {
        font-size: 20px;
        top: 180px;
        left: 4px;
    }
}
@media (min-width: 768px) {
    .haik-menu .qblog-list .qblog_date,
    .haik-article-menu .qblog-list .qblog_date {
        font-size: 20px;
        top: 115px;
        left: 0.5em;
    }
}
@media (min-width: 992px) {
    .haik-menu .qblog-list .qblog_date,
    .haik-article-menu .qblog-list .qblog_date {
        font-size: 22px;
        top: 135px;
    }
}
@media (min-width: 1200px) {
    .haik-menu .qblog-list .qblog_date,
    .haik-article-menu .qblog-list .qblog_date {
        font-size: 24px;
        top: 125px;
    }
}
@media (min-width: 1500px) {
    .haik-menu .qblog-list .qblog_date,
    .haik-article-menu .qblog-list .qblog_date {
        font-size: 24px;
        top: 190px;
    }
}


/*
2020/07/14
ブログリスト（リスト表示）
フッター用日付表示
*/
.haik-footer .qblog-list .qblog_date {
    font-size: 18px;
    top: 140px;
    left: 16px;
}
@media (min-width: 360px) {
    .haik-footer .qblog-list .qblog_date {
        font-size: 18px;
        top: 140px;
    }
}
@media (min-width: 568px) {
    .haik-footer .qblog-list .qblog_date {
        font-size: 22px;
        top: 170px;
    }
}
@media (min-width: 768px) {
    .haik-footer .qblog-list .qblog_date {
        font-size: 22px;
        top: 120px;
        left: 28px;
    }
}
@media (min-width: 992px) {
    .haik-footer .qblog-list .qblog_date {
        font-size: 24px;
        top: 155px;
        left: 35px;
    }
}
@media (min-width: 1200px) {
    .haik-footer .qblog-list .qblog_date {
        font-size: 26px;
        top: 200px;
        left: 50px;
    }
}
@media (min-width: 1500px) {
    .haik-footer .qblog-list .qblog_date {
        font-size: 30px;
        top: 210px;
        left: 40px;
    }
}

/*
ブログリスト（行表示）の日付 
2020/09/28
float: left;をコメント化
display: flex;を追加
*/
[class^="haik-palette-"] .qblog-list.qblog-list-line .qblog_date {
    /* float: left; */
    display: flex;
    top: auto;
    bottom: auto;
    left: 0.5em;
    line-height: 2em;
    margin-right: 1em;
}

/*
2020/07/14
メイン画面（メイン）用
ブログリスト（タイル表示）時の日付表示追加
2020/07/18
ブログリスト（タイル表示）時の日付表示文字サイズ調整
タイルのレイアウト調整に伴う追加措置
*/
.haik-container .thumbnail.qblog-item .qblog_date{
    top: 115px;
    left:0.5em;
    font-size: 18px;
}
@media (min-width: 360px) {
    .haik-container .thumbnail.qblog-item .qblog_date{
        left: 0px;
        font-size: 16px;
    }
}
@media (min-width: 568px) {
    .haik-container .thumbnail.qblog-item .qblog_date{
        top: 110px;
        left: 0.2em;
        font-size: 22px;
    }
}
@media (min-width: 768px) {
    .haik-container .thumbnail.qblog-item .qblog_date{
        top: 125px;
    }
}
@media (min-width: 992px) {
    .haik-container .thumbnail.qblog-item .qblog_date{
        top: 110px;
        font-size: 20px;
    }
}
@media (min-width: 1200px) {
    .haik-container .thumbnail.qblog-item .qblog_date{
        top: 160px;
        font-size: 22px;

    }
}


/*
2020/07/14
フッター用
ブログリスト（タイル表示）時の日付表示追加
*/
.haik-footer .thumbnail.qblog-item .qblog_date{
    top: 115px;
    left:0.5em;
    font-size: 20px;
}
@media (min-width: 360px) {
    .haik-footer .thumbnail.qblog-item .qblog_date{
        top: 65px;
        left:0;
    }
}
@media (min-width: 568px) {
    .haik-footer .thumbnail.qblog-item .qblog_date{
        top: 110px;
        left: 0.2em;
        font-size: 22px;
    }
}
@media (min-width: 768px) {
    .haik-footer .thumbnail.qblog-item .qblog_date{
        top: 120px;
    }
}
@media (min-width: 992px) {
    .haik-footer .thumbnail.qblog-item .qblog_date{
        top: 110px;
        font-size: 22px;
    }
}
@media (min-width: 1200px) {
    .haik-footer .thumbnail.qblog-item .qblog_date{
        top: 155px;
        font-size: 25px;
    }
}


/*
2020/07/14
メニュー、メニューアーティクル部分専用
ブログリスト（タイル表示）時の日付表示追加
*/
.haik-menu .thumbnail.qblog-item .qblog_date,
.haik-article-menu .thumbnail.qblog-item .qblog_date{
    top: 95px;
    left: 0px;
    font-size: 14px;
}
@media (min-width: 360px) {
    .haik-menu .thumbnail.qblog-item .qblog_date,
    .haik-article-menu .thumbnail.qblog-item .qblog_date{
        top: 90px;
        left:0;
        font-size: 18px;
    }
}
@media (min-width: 568px) {
    .haik-menu .thumbnail.qblog-item .qblog_date,
    .haik-article-menu .thumbnail.qblog-item .qblog_date{
        top: 95px;
        left: 0em;
        font-size: 22px;
    }
}
@media (min-width: 768px) {
    .haik-menu .thumbnail.qblog-item .qblog_date,
    .haik-article-menu .thumbnail.qblog-item .qblog_date{
        top: 95px;
        font-size: 22px;
    }
}
@media (min-width: 992px) {
    .haik-menu .thumbnail.qblog-item .qblog_date,
    .haik-article-menu .thumbnail.qblog-item .qblog_date{
        top: 110px;
        font-size: 22px;
    }
}
@media (min-width: 1200px) {
    .haik-menu .thumbnail.qblog-item .qblog_date,
    .haik-article-menu .thumbnail.qblog-item .qblog_date{
        top: 100px;
        font-size: 24px;
    }
}


/*
2019/12/07
ブログリストで日付が目障りな場合に消すクラスを追加
以下のように#html2でクラスを指定して囲むと表示が消える
これで使い分けることができる。

 #html2(<div class="nodate_qblog-list">)
    #qblog_list(tile,4)
 #html2(</div>)

*/
.nodate_qblog-list .qblog-list .qblog_date {
    display: none;
}

/*
2019/09/23
プラグイン「#calendar2」をレスポンシブ対応する
使われているクラスをスタイルシートに対応させる
2020/08/06
数字に日本語書体の導入、大型化に伴い、プラグイン「#calendar2」を
レスポンシブ対応する所の幅widthを改修
*/
.style_td_week.text-center{
    width:10em;
    height:2em;
    font-weight:700;
}
@media (min-width: 568px) {
    .style_td_week.text-center{
        width: 6em;
    }
}
@media (min-width: 768px) {
    .style_td_week.text-center{
        width: 7em;
    }
}
@media (min-width: 992px) {
    .style_td_week.text-center{
        width: 4em;
    }
}


/* ======
2019/10/24
ページにswfuで添付ファイルがある場合の表示のスタイル指定
スタイルシートが埋め込まれているので!importantで強制的に修正している
おそらくpukuwikiの仕様がそのままになっているためと思われる
====== */
#swfulist {
    border: 3px #337ab7 dashed !important;
    margin-top: 10px;
    padding: 10px;
    font-size: 20px!important;
}

/*============
2020/09/29
&new関数利用時のnew1,new5クラスのスタイルを追加
名称を変える場合はlng.ja.txtのnew.inc.phpブロックを参照
有効期間を変える場合はnew.inc.phpの数字を修正
&new関数はリンク単体のみで他の関数内では使いづらい
============*/
.new1 {
    font-family: sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 70%;
    padding: .1em .3em;
    background-color: #db6868;
}

.new5 {
    font-family: sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 70%;
    padding: .1em .3em;
    background-color: #36a2af;
}

/* ======
コピー防止確認用ダミー
====== */
.nagamira-default ul li:hover,
.nagamira-default ul li:active,
.nagamira-default ul li:focus {
    background-color: #eba65b;
    transition: 0.3s ease;
}