/*
 * 2021/10/12　試作中A
 * 2021/09/07　試作中A
 * 2021/09/03　試作中A
 * 2021/08/31　iphone8対応試作
 * 2021/07/01
 * nagamira_css3h.css  高速化互換性なし版
 * 
 * 著作権 長岡京健康みらい研究所
 * 【重要】nagamira_css1の後に読み込むこと
 *
 *　Qブログのスタイル、編集レイアウトに関する記述が主
 * 
 * 2021/07/01
 * W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認
 * 2021/07/05
 【注意 圧縮ツール】
https://csscompressor.net/ja/
で「Compress colors」をオフにして圧縮すること。
コメントの付け方によっては圧縮後のソースに文法エラーが現れる場合があるので圧縮率は【高い】で圧縮する。さらに圧縮したい場合は文法チェッカーにかけて、問題がなければ【最高】で圧縮すること。 * 

 *  2019/02/28
 *  メディアクエリの　1200　を　1079に変更
 * 2019.03.01
 * スマホ時のナビ「MENU」ボタンアイコンなどの修正。
 * 2019.03.02
 * テーマ編集ウィンドウの色選択 swatch
 * アイキャッチ画像選択囲み　ボックス色　大きさ
 * アイキャッチ画像選択イメージ大きさを2倍に再設定
2019.03.03
メディアクエリ1200px以上パターンを追加を順次増やしていく
判明したテーマ色毎の設定　追加計26色分
2019.03.7
1ピクセル単位でおかしな部分が出ていた
 (min-width: 768px)→767PX以上　なのでこれはおかしい
 max-widthと書いていた頃の忘れ物
メディアクエリの解釈を修正
@media (min-width: 768px) → 768px
@media (min-width: 1080px) → 1080px
2019.03.9
ブログ　カレンダー選択機能文字を大きくする
2019.03.12
ブログ　リストの文字色、ブログバッジ類の色を修正。
2019.03.12
ブログ　リストのキャプション画像に出る日付の背景をinfo系統の透明色に変えた。
2019.03.12
ブログ　グリッドリストのキャプション画像に出る日付
解像度が高いと日付がきれいに見えないので改善して見えるようにする
2019.03.13
ブログ　リストのキャプション画像に出る日付の位置を改善
解像度が高いと日付がきれいに見えないので改善して見えるようにする
1200px時の大きさを追加
2019.03.14
レイアウト崩れの軽減に
line-height:1.5em、1.7emを追加
概要abstructの高さを調整、改善した
レイアウト崩れが改善された
2019.03.16 
ブログタイトル上マージンを追加
 2019.03.16
 コメントバッジの描画を修正
 2019.03.16
 コメント欄の下マージンを修正
2019.03.18
メディアクエリの解釈を修正
@media (min-width: 1080px) → 1024px
ipadを横にした時の画面に合わせる
2019.03.19
.labelをnagamira_css1に統合
}
2019.03.20
font-weight: bold;を700;に修正
2019/03/21
アコーディオンパネルに使うアイコンでmenu-up、menu-downがあったのでそれに統一、切り替えた。
2019/03/22
テーマ編集画面をスマホの大きさでも出せるように調整
2019/03/24
テーマ編集画面をスマホの機種毎の大きさでも出せるように調整（ただし、全ての対応は不可能）
 2019.03.25
メディアクエリの解釈を修正
Boostrapグリッドシステムに準拠させたのを試作してみる
@media (min-width: 1024px) → 992px
2019/03/26
テーマ編集画面をスマホの機種毎の大きさ、メディアクエリに411pxを追加
2019/03/27
568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。ブログリストのカードの調整が大変！
2019.03.28
qblogグリッド表示時のタイトル スタイルを改修して視認性を向上する
2019.03.28
qblogグリッド表示時の画像 スタイルを改修して視認性を向上する
2019.04.01
ハンバーガーボタンの配色見直し
2019.04.02
.qblog-item グリッド表示時の見直し
2019.04.02
ブログのグリッド表示スマホで2桁表示させる事に成功！
2019.04.03
Qブログリストの枠線の色指定
2019.04.04
重複していた記述の修正
色の調整
Qブログリストの枠線の色追加
2019.04.11
Qブログタイルリストの文字色を黒に統一
2019.04.11
Qブログタイルリストの日付の書体を変えて綺麗に見えるようにした
ので陰を復活。
2019.04.30
qblogグリッド表示時の画像高さを調整
2019.05.02
qblogグリッド表示時のタイトル表示をnagamira_css6でのthumnails大改修に伴い調整
.qblog_titleの排他領域の調整
わかりにくかったheight:の高さをemから絶対値のpxへ変更
2019.05.03
qblogブログ投稿リストのスクロールバーを隠す
2019.05.04
ブログリスト左右マージンの調整
2019.05.04
グリッドリストのキャプション画像に出る日付を
条件セレクタ記述に切り替え。冗長性を減らせる
2019.05.04
多くの記述を条件セレクタ記述に切り替え。冗長性を減らす
2019.05.05
条件セレクタで冗長性を廃止
2019.05.08　
ブログの編集時のブログリスト（タイル時）日付が小さくなる現象を修正
を追加して優先順位を変更
2019.05.11
row子要素の高さをそろえるflexboxをnagamira_css1に設置したので.qblog-item  h3.qblog_titleのheight指定をコメント化、100%にする
ただし、768px未満は対応が十分ではないため高さを固定する
2019.05.15
ブログ画面の表示で時計アイコンを表示する
2019.05.21
投稿日時アイコン位置調整
2019.05.21
ブログバッジ類位置調整
2019.05.22
ブログリストのカードの大きさを固定する事をテストしたが、従来の変動するスタイルでよい事がわかった。
カードの大きさを固定するとメニューバーなども変えないといけなくなるので見送り。
2019.05.22
ブログリストのキャプション画像にobject-fit: cover;を追加して画像を一定の枠で表示するようにした
2019.05.26
スマホのメニューボタンのアイコン位置がffでずれる問題の調整
2019.08.21
.qblog_abstract
余白の調整
文字が見え隠れしていたのを調整
margin: 0.1em→0.5emへ
2019.08.21
ブログリストのキャプション画像に出る日付をqblog.cssへ引っ越し
ここは予備として残してある。
2019.08.29
キャプション画像に出る日付の縁取りをつけて視認性を上げた
2019.08.30
メインメニューの属性の調整と複製
（main.cssの改修に備えてのバックアップ）
2019.09.01
ブログリストのリンクタイトルを青色、マウスオーバー時下線のスタイルにする
2019.09.02
ブログページ移動ボタンの文字を太くする
2019.09.02
ページの一覧画面コマンド書体大きさ調整
2019.09.05
投稿リスト、カテゴリリスト、最新のコメントリスト、ブログアーカイブリスト余白調整
2019.09.05
ブログリスト 余白調整
2019/09/07
scrollup アイコン透明度 、位置設定をnagamira_css1.cssで同じ記述で重複していたので統合
2019.09.09
ナビ　モバイル時メニュー修正をnagamira_css2.cssからnagamira_css10.cssへ移動
2019/09/11
キャプション画像に出る日付の文字色を黒、背景を半透明の白、縁取りを白にする
2019/09/11
ブログバッジ類の色をシアン系党からグレーに変更
2019/09/12
ブログバッジ類角の丸めを調整
ブログバッジ類灰色を濃くして読みやすいようにした
2019/09/12
キャプション画像に出る日付の文字を太字、グレーのかかった色に修正
2019/09/20
Qブログ画面の冒頭タイトルと一緒に出る見だしのマージン上を小さくする。
2019/09/21
ブログリスト時概要の高さ調整
2019/09/22
Qブログアイテム枠内サムネイル画像を余白なしで表示する
2019/09/22
キャプション画像に出る日付の文字を左から0.069emずらして出す
2019/09/23
ブログリスト時概要の高さ調整
2019/09/25
nagamira_css2.cssからnagamira_css3.cssに移動
　nagamira_css1.css分離のため
2019/09/25
ブログバッジの影を廃止、負荷を軽くしてみる
2019/09/25
ブログバッジの大きさを調整、小型スマホ向けにの大きさをメディアクエリで対応
2019/10/01
キャプション画像に出る日付の白縁取りを1pxから3pxへと大きく
2019/10/04
Qブログ画面の768px以上のプレビュー画面で「編集」のボタン位置が崩れるのを修正
2019/10/04
通常画面編集、Qブログの編集、プレビュー画面編集時のタイトルの書体サイズが小さいので修正
埋め込みスタイルなので!importantで書体を大きくしている
2019/10/07
メインエリアのブログリストのマウス反応エリアをタイトル枠いっぱいにひろげる
2019/10/07
ブログ記事編集テキスト入力エリアの高さ、書体の大きさを改修
2019/10/08
ブログ編集時タイトル見出し（h2.title）書体大きさ調整　
2019/10/08
コピー防止確認用ダミー
追加
2019.10.08
ブログ投稿編集で装飾ボタン、リンクボタンで出てくるダイアログのラベル大きさ調整
2019.10.08
ブログ投稿編集で装飾ボタン、リンクボタンで出てくるダイアログの小さい文字ラベル
11ptと小さすぎるので強制的に拡大
2019/10/08
チェックボックス大きさを1.3倍から1.7倍へ拡大する
2019/10/08
チェックボックスとラベルのズレをなくすために調整
2019/10/08
テキストボックスのテキストエリアの文字を大きくする
スクロール方法も改修
2019/10/11
search2フォームの上からの位置を調整
2019/10/12
search2フォームのマージンは予備コメント化へ
2019/10/12
select,input, textarea要素のマージン調整
 2019/10/12
 問い合わせ・検索フォーム・入力フォームの属性が大きすぎてレイアウトへの影響が強すぎるので調整
 2019/10/12
 検索フォームsearch2の虫眼鏡アイコン位置の修正
2019/11/28
Qブログタイトルで見出し3の枠装飾を消すようにする
　見出し3の属性が共用になっているため、消す必要がある。
2019/11/28
Qブログタイトルで見出し3の疑似要素にある枠装飾を消すようにする
2019/12/06
ブログリストでh2のスタイルを兼用しているのでボックスシャドウをクリアする
2019/12/07
Qブログタイトルで見出し2（h3）の文字影を消す。
2019/12/07
キャプション画像に出る日付の書体の調整
2019/12/07
ブログリストの行リストでh2の上からの位置を微調整
2019/12/07
.haik-footer でブログタイトルを表示する時、背景を透明にする
2019/12/19
メインメニュー書体を修正。不評なメイリオは後回しで見やすくした。
2019/12/27 
#qblog h2.qblog_title マウスオーバー時のアンダーラインをなしにする
main.cssから移植
2019/12/27
ブログサムネイル画像の高さをimgの高さをメイン画面のサムネイルと一緒にする
2019/12/28
Qブログリストのサムネイルボックスシャドウを廃止、枠線を濃く。
処理が重いから
2019/12/28
Qブログリストのサムネイルボックス枠線を太くする
2019/12/29
投稿リスト、カテゴリリスト、最新のコメントリスト、ブログアーカイブリスト余白調整、解像度1500px以上の文字サイズを追加（複数）
2019/12/27 
#qblog h2.qblog_title マウスオーバー時のアンダーラインをなしにする
2019/12/30
ブログのコメントフォームと見出し「コメント」の間のマージンを-4em減らす
2020/01/08
検索フォームsearch2の虫眼鏡アイコンがスクロール時ナビの上に出てくるミスを修正
z-indexを10から8に修正。
2020/01/09
左側に出る編集メニューの背景職を透明から黒（#373737）の90％程度になるように修正
出現順番を修正
2020/01/09
ブログサムネイル画像の属性に.haik-footerと.haik-containerを宣言する
qblog.cssのスタイルシートと混同してレイアウト崩れを出さないため。
2020/01/09
ブログリストの行リストの下線をborder: none !important;指定する
HAIKの方でページ更新の都度、qblog.cssを優先して読みに行っているので苦肉の策。
2020/01/09
検索フォームsearch2の虫眼鏡アイコンが下にずれる。読み込みの都合なので!important設定
2020/01/10
不自然なtopを4pxから0pxに修正
2020/01/10
メイン画面でブログ投稿最新の記事、カテゴリ、最近のコメントの左マージンを確保する
qblog.cssで初期化しているための策
2020/01/11
scrollup アイコン形状をボタン型に修正
従来のWEBアイコンのみだと紺など暗い背景では見えないため
テキストシャドウは処理が重いため背景色を指定する
2020/01/11
ブログリストの日付にセレクタ[class^="haik-palette-"] を復活する。
これがないとqblog.cssのスタイルシートを優先してしまう。
ブログリストの日付文字の白ふちどりを復活させる
2020/01/11
ブログリストのキャプション画像にセレクタ[class^="haik-palette-"] を復活する。
これがないとqblog.cssのスタイルシートを優先してしまう。
2020/01/11
ブログリストの概要にセレクタ[class^="haik-palette-"] を復活する。
これがないとqblog.cssのスタイルシートを優先してしまう。
 2020/01/12
検索結果ページ .list-group-item-heading
行高を1.8emへ
検索結果ページ .list-group-item-text
行高を1.8emへ
2020/01/12
検索結果ページ見出しの可変文字サイズを修正
2020/01/12
「ページの複製」などで使われるselectの文字の大きさを可変に修正
2020/01/13
Qブログアイテムの互換性を廃止したのでフォントサイズ等の!important指定を解除
HTMLやPHP7.1から7.3での埋め込み指定がない事を確認して解除
font-weight: 700!important;
font-size: 20px!important;
2020/01/13
qform.inc【改修あり】.phpにおいてメールフォームの入力「必須」のテキストクラスをカスタマイズ
2020/01/14
編集、問い合わせ・検索フォーム・入力フォームの属性qhm.css改修に伴い、font-size:の!important指定を解除
2020/01/14
ブログ投稿編集画面のラベル類書体大きさを修正
2020/01/14
ブログ投稿編集画面のラベル類がまだ小さいので大きくする
メディアクエリに1200pxを追加
2020/01/15
クラスtext-dangerの上下排他領域0.1emを追加
2020/01/15
編集、問い合わせ・検索フォーム・入力フォームの属性がqform関係、おそらくphpファイル内で書体サイズが固定されているので!important指定を復活
2020/01/15
ブログサムネイルの見出しをパレット指定の優先を打ち消してスタイルを修正するため[class^="haik-palette-"] を追加する
2020/01/16
ブログ編集画面 カテゴリ選択
セレクタ[class^="haik-palette-"]の復活
重複していた部分の統合
書体の大きさを本体に任せる
ボタンの大きさを調整
2020/01/16
ブログ記事編集テキスト入力エリアの高さ単位をvhに切り替え
ビューポート単位で高さを指定するので相対的にわかりやすい。
コメントされているpxが前の高さでほぼ同じくらい
2020/01/16
テーマ編集ウィンドウの属性に!important指定する
このスタイルシートの後に全テーマ共通のskin-customizer.cssを後から読み込んでいるため。
2020/01/17
ブログのサムネイル画像の高さを4：3に近づくよう調整。
.haik-container と.haik-footer に対して行う
2020/01/17
ブログのサムネイル画像の高さ667px時の画像高さを170pxに調整
.haik-container と.haik-footer に対して行う
2020/01/18
編集ツールバーメニュー文字の大きさ、幅を拡大
 2020/01/19
 scrollup アイコン透明度　ease 0s;ではエラーになるのでease 0.1s;とする
2020/01/20
色選択 swatch　skin_customizer.cssの方を書き換える事でコチラはコメント化
2020/07/11
ブログバッジの大きさと文字折り返し対応の修正と調整
2020/07/11
ブログサムネイルの大きさを調整
高さをブログタイトルに連動して自動にする
2020/07/11
ブログサムネイルの見出しの背景色を透明にする
2020/07/14
 qblogブログ投稿リストの高さ、文字大きさを調整してカードの大きさをできるだけ揃える
2020/07/14
ブログ概要の高さをem化　使用フォントの8.5em分に設定
概要はこのくらいないとわからない事が多い。
2020/07/14
ブログリストのキャプション画像の右側マージンを減らして1emに設定
2020/07/17
qblogブログ投稿リストの高さ、文字大きさを調整
2020/07/18
「ページの複製」などで使われるセレクトボックスの大きさを調整
default.ini.phpの$load_template_funcをonにする事でひな形とするページ読み込みが可能になるように調整
2020/07/18
qblogブログ投稿リスト表示をモバイル画面567px以下時はインラインブロックに切り替える
2020/07/19
セレクトボックス、モバイル端末では[選択]ボタンでレイアウトが崩れるので幅を80％に設定
2020/07/19
検索フォームsearch2、search2.inc.phpを直に修正するのでコメントアウト
2020/07/21
Qブログリストのサムネイルボックスのクラス指示を明確にする
2020/07/19
編集、問い合わせ・検索フォーム・入力フォームの属性スタイルシート設定変更につき!important指定を解除
2020/07/24
編集、問い合わせ・検索フォーム・入力フォームの属性スタイルシート設定変更と思ったが、まだ!important指定が必要。核となるPHPプログラムの所在が不明。
2020/07/25
ブログページ移動ボタンの枠の色がBoostrapの設定では薄くて見えないことがあるので濃くした。
2020/07/31
ブログ　カレンダー選択機能文字の大きさ、画面サイズ調整
1024px→992px
1500pxを追加
2020/09/28
ブログタイトルリスト、メニューマウスオーバー時の下線、コメント化
2021/01/29
2Kに対応、1700px、2000pxの文字の大きさを追加。デザインは随時見直し
ナビ、ブログサムネイルは2000px,2500pxで対応
（全画面表示でのみ使うことが多い）
2021/01/30
1700px時の文字の大きさは2000px,2500pxに移動
2021/06/04
モーダルダイアログボックスの書式を再度定義（新）
ボタンの定義が固まったので調整 
モバイル版では不自然になるボックス表示の修正、タイトルや文字の大きさの改修
モーダルダイアログボックスの設置、アイキャッチ画像選択タイトルなどで利用
スマートフォンの小さな画面でも文字が読めるように修正
flex設定の追加 Boostrap4からの移植
画面真ん中に来るよう、Boostrap4のmodal-dialog-centeredクラスを移植する。
2021/06/30
.modal-dialog-centeredで文法エラーが出るため
-ms-flex-align: center;
display: -ms-flexbox;
を省略
2021/07/01
W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認
2021/08/31
【試作中】ブログリスト内の文字の大きさをiphone7,8,SE2でも読みやすくする
2021/09/03
メイン画面ブログリスト内の文字の大きさを追加
2021/09/07
ブログのコメントフォームと見出し「コメント」の間のマージンを-2emに修正
2021/10/12
ブログ投稿日付　文字の大きさをiphone7,8,SE2でも読みやすくする
2021/10/12　
ブログバッジ　文字の大きさをiphone7,8,SE2でも読みやすくする
===============*/

/* =============================
2018.05.02
 qblogブログ投稿リスト
2019.05.03
qblogブログ投稿リストのスクロールバーを隠す
2019.05.08　
ブログの編集時のブログリスト（タイル時）日付が小さくなる現象を修正
を追加して優先順位を変更
2019.05.15
ブログ画面の表示で時計アイコンを表示する
2019.05.21
投稿日時アイコン位置調整
2019/09/21
メニュー内でのブログリストのキャプション画像の幅調整
768px～1199px時、概要を表示しない分、自動で横幅を広げる
その他はブログリストのキャプション画像の属性を継承する
2019/09/25
ブログタイトル上マージンを廃止
2019/10/07
メインエリアのブログリストのマウス反応エリアをタイトル枠いっぱいにひろげる
今後は日付まで広げたい。
2020/07/11
モーダルダイアログ内表の文字サイズを大きくする
主にショートカット一覧表で使われる

ショートカット時の動作についてはよくわからないが、タイピングが早いと誤動作することがある
おそらくスタイル作成でキー操作が多すぎるのではないかと思う
2020/07/14
qblogブログ投稿リストの概要の高さ、文字大きさを調整する。
画面サイズに応じて概要が表示される高さを可変にして、読みやすくかつ大きさをできるだけ揃える
2020/10/01
ブログリストのマウス反応エリアをタイトル枠いっぱいにひろげるの不要なクラスを削除
↓コレ
#qblog h2.qblog_title a::before
display: flex;を追加
============================*/

/*
ブログリストのマウス反応エリアをタイトル枠いっぱいにひろげる
display: flex;を追加
*/

#qblog h2.qblog_title a::before  {
	position: absolute;
	display: flex;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: auto;
	content: "";
	background-color: rgba(0, 0, 0, 0);
	z-index: 2;
}
/*
2019/11/28
ブログリストの行リストでh2のスタイルを兼用しているので枠線やボックスシャドウが出ないようにする
2019/12/07
ブログリストの行リストでh2の上からの位置を微調整
2020/01/09
ブログリストの行リストの下線をborder: none !important;指定する
HAIKの方でページ更新の都度、qblog.cssを優先して読みに行っているので苦肉の策。
2020/01/10
不自然なtopを4pxから0pxに修正
2020/01/10
ブログリストの行リスト行高を廃止、親からの継承に修正
2020/07/14
qblogブログ投稿リストの高さ、文字大きさを調整してカードの大きさをできるだけ揃える
2020/07/17
qblogブログ投稿リストの高さ、文字大きさを調整
2020/07/18
qblogブログ投稿リスト表示をモバイル画面567px以下時はインラインブロックに切り替える
*/

#qblog .qblog-list-line h2 {
	box-shadow: none;
	font-size: 18px;
	line-height: 1.5em;
	top: 0px;
}
@media (max-width: 567px) {
#qblog .qblog-list-line h2 {
	display:inline-block;
    }
}
#qblog h2.qblog_title a {
	color: #337ab7;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
}
/* line-height: はレイアウト崩れを防ぐため1.1emにしている */

/*
2020/07/11
セクション内でブログリストを表示する場合の文字の縁取り修飾を行う
文字の青色を少し明るくする
*/
.qhm-section-content #qblog h2.qblog_title a {
	color: #0f75ce;
	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;
}

.qhm-section-content #qblog .qblog_date{
    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;
}
/*
メイン領域のブログリストの修飾
2020/07/15
ブログリスト内の見出しを読みやすくする
#qblog h2の処理エラーがブラウザ内で起こっているので注意
2021/08/31
【試作中】ブログリスト内の文字の大きさをiphone7,8,SE2でも読みやすくする
2021/09/03
メイン画面ブログリスト内の文字の大きさを追加
メニュー用　ブログリストの文字の大きさはnagamira_css6h.cssの「メニュー用ブログリストの修飾」を参照

*/
#qblog .qblog-list-line .qblog_date {
	padding: 7px 7px 7px 5px;
	font-size: 20px;
	margin-right: 8px;
	line-height: 1em;
}
@media (min-width: 320px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 24px;
	}
}
@media (min-width: 360px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 20px;
	}
}
@media (min-width: 375px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 24px;
	}
}
@media (min-width: 568px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 24px;
	}
}
@media (min-width: 768px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 22px;
	}
}
@media (min-width: 992px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 24px;
	}
}
@media (min-width: 1200px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 26px;
	}
}
@media (min-width: 1500px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 26px;
	}
}
@media (min-width: 1700px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 28px;
	}
}
@media (min-width: 2000px) {
	#qblog .qblog-list-line h2,
	#qblog h2.qblog_title a,
	#qblog .qblog-list-line .qblog_date {
		font-size: 30px;
	}
}


/*
2020/09/28
ブログタイトルリスト、メニューマウスオーバー時の下線、コメント化
使わないなら削除
#qblog h2.qblog_title a:hover {
	text-decoration: underline;
}
*/

.qblog-list .qblog-list-line .qblog_date{
	line-height: 1em;	
}


/*
2019/12/06
ブログリストでh2のスタイルを兼用しているのでボックスシャドウをクリアする
*/

.qblog-list h2 {
	box-shadow: none;
}

/*
2020/07/14 保留中
ブログリストテーブルのh2の高さを3emにすることで大きさを揃える
これをオンにするとメニューのリストのレイアウトが乱れる
*/
/*
.qblog-list.qblog-list-table h2{
	height: 3em;
}
*/

/*
2019.09.05
ブログリスト 余白調整
*/

.qblog-list-line {
	border: none;
	padding: 0;
	height: auto;
	overflow-y: hidden;
	margin-top: 0px;
	margin: 6px;
}
/*
ブログ投稿日付
2021/10/12　ブログ投稿日付　文字の大きさをiphone7,8,SE2でも読みやすくする
*/

.qblog_post_date {
	font-size: 20px;
	margin-left: 0.5em;
	color: #737272;
	float: left;
}
/*iphone5,SE*/
@media (min-width: 320px) {
	.qblog_post_date {
		font-size: 18px;
	}
}
/*Android*/
@media (min-width: 360px) {
	.qblog_post_date {
		font-size: 20px;
	}
}
/*iphone7,8,SE2*/
/*モバイル横にした時*/
@media (min-width: 375px) {
	.qblog_post_date {
		font-size: 20px;
	}
}
@media (min-width: 568px) {
	.qblog_post_date {
		font-size: 24px;
	}
}

@media (min-width: 768px) {
	.qblog_post_date {
		font-size: 18px;
	}
}
@media (min-width: 992px) {
	.qblog_post_date {
		font-size: 20px
	}
}
@media (min-width: 1200px) {
	.qblog_post_date {
		font-size: 22px
	}
}
@media (min-width: 1500px) {
	.qblog_post_date {
		font-size: 22px
	}
}
/* 投稿日時アイコン*/

.qblog_post_date:before {
	position: relative;
	top: 2px;
	left: -0.15em;
	font-family: 'Glyphicons Halflings';
	content: "\e023";
	color: #777;
}
/* ブログバッジ類
2019.05.21
ブログバッジ類位置調整
2019/09/11
ブログバッジ類の色をシアン系党からグレーに変更
タイトルより目立つバッジというのも変なので
白抜き黒文字がいいのだが、他のものでも使うのでできない事が判明。
2019/09/12
ブログバッジ類角の丸めを調整
ブログバッジ類灰色を濃くして読みやすいようにした
2019/09/25
ブログバッジの影を廃止、負荷を軽くしてみる
2019/09/25
ブログバッジの大きさを調整、小型スマホ向けにの大きさをメディアクエリで対応
2020/07/11
ブログバッジの大きさと文字折り返し対応の修正と調整
2021/10/12　
ブログバッジ　文字の大きさをiphone7,8,SE2でも読みやすくする

*/

a.badge {
	display: inline-block;
	position: relative;
	color: white;
	vertical-align: middle;
	white-space: normal;
	text-align: center;
	line-height: 1em;
	background-color: #777;
	font-size: 16px;
	min-width: 10px;
	left: 0;
	margin: 0.1em;
	padding: 0.2em 0.5em;
	border-radius: 4px;
}
/*iphone5,SE*/
@media (min-width: 320px) {
	a.badge {
		font-size: 18px;
	}
}
/*Android*/
@media (min-width: 360px) {
	a.badge {
		font-size: 20px;
	}
}
/*iphone7,8,SE2*/
@media (min-width: 375px) {
	a.badge {
		font-size: 22px;
	}
}
/*モバイル横にした時*/
@media (min-width: 568px) {
	a.badge {
		font-size: 24px;
	}
}
@media (min-width: 768px) {
	a.badge {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	a.badge {
		font-size: 22px
	}
}
/* ブログタイトル・日付など 
2019.03.16 
ブログタイトル上マージンを追加
2019/09/25
ブログタイトル上マージンを廃止
コンテナのレイアウト調整でいらなくなったため。
*/

.title {
	padding-top: 0px;
	margin-bottom: 0;
	text-align: right;
	display: block;
	line-height: 1em;
}
/* =================
ブログリストのキャプション画像
ブログリストのキャプション画像に出る日付の位置を連動させること
2019.03.27
568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。
2019.05.22
ブログリストのキャプション画像にobject-fit: cover;を追加して画像を一定の枠で表示するようにした
2020/01/11
ブログリストのキャプション画像にセレクタ[class^="haik-palette-"] を復活する。
これがないとqblog.cssのスタイルシートを優先してしまう。
2020/07/14
ブログリストのキャプション画像の右側マージンを減らして1emに設定
2020/07/14
ブログリストのキャプション画像の大きさを調整
2020/07/18
ブログリストのモバイル端末時のキャプション画像の大きさを調整

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

[class^="haik-palette-"] .qblog-list-table .qblog_thumbnail_box {
	width: 100px;
	height: 100px;
	background-size: cover;
	background-position: center;
	float: left;
	margin-top: .5em;
	margin-right: 0.5em;
	object-fit: cover;
}
@media (min-width: 360px) {
	[class^="haik-palette-"] .qblog-list-table .qblog_thumbnail_box {
		width: 120px;
		height: 100px;
	}
}
@media (min-width: 568px) {
	[class^="haik-palette-"] .qblog-list-table .qblog_thumbnail_box {
		width: 150px;
		height: 160px;
	}
}
@media (min-width: 768px) {
	[class^="haik-palette-"] .qblog-list-table .qblog_thumbnail_box {
		width: 165px;
		height: 165px;
	}
}
@media (min-width: 992px) {
	[class^="haik-palette-"] .qblog-list-table .qblog_thumbnail_box {
		width: 190px;
		height: 190px;
	}
}
@media (min-width: 1200px) {
	[class^="haik-palette-"] .qblog-list-table .qblog_thumbnail_box {
		width: 240px;
		height: 240px;
		margin: 0em 1em 0em .5em;
	}
}

/* フッター用ブログリストのキャプション画像 */
.haik-footer .qblog-list-table .qblog_thumbnail_box {
	width: 120px;
	height: 160px;
	background-size: cover;
	background-position: center;
	float: left;
	margin: .5em;
	margin-right: 1em;
	object-fit: cover;
}
@media (min-width: 360px) {
	.haik-footer .qblog-list-table .qblog_thumbnail_box {
		width: 150px;
		height: 160px;
	}
}
@media (min-width: 568px) {
	.haik-footer  .qblog-list-table .qblog_thumbnail_box {
		width: 190px;
		height: 190px;
		margin-right: 1em;
	}
}
@media (min-width: 768px) {
	.haik-footer  .qblog-list-table .qblog_thumbnail_box {
		width: 180px;
		height: 145px;
		margin: .5em 1em;
	}
}
@media (min-width: 992px) {
	.haik-footer  .qblog-list-table .qblog_thumbnail_box {
		width: 210px;
		height: 180px;
	}
}
@media (min-width: 1200px) {
	.haik-footer  .qblog-list-table .qblog_thumbnail_box {
		width: 230px;
		height: 230px;
		margin: 1em 2em 1em;
	}
}
@media (min-width: 1500px) {
	.haik-footer  .qblog-list-table .qblog_thumbnail_box {
		width: 240px;
		height: 240px;
		margin: 1em 2em 1em;
	}
}


/* =================
メニュー内でのブログリストのキャプション画像
2019/09/21
メニュー内でのブログリストのキャプション画像の幅調整
768px～1199px時、概要を表示しない分、自動で横幅を広げる
その他はすぐ上にあるブログリストのキャプション画像の属性を継承する
2019/09/21
メニュー内でのブログリスト概要を表示させる分、768px～1199px時のキャプション画像の高さを画面比率を調整して小さくする
=================*/

@media (min-width: 768px) {
	.haik-menu .qblog-list-table .qblog_thumbnail_box {
		width: auto;
		height: 140px;
		margin-top: 0em;
	}
}
@media (min-width: 992px) {
	.haik-menu .qblog-list-table .qblog_thumbnail_box {
		height: 160px;
	}
}
@media (min-width: 1200px) {
	.haik-menu .qblog-list-table .qblog_thumbnail_box {
		height: 150px;
	}
}
@media (min-width: 1500px) {
	.haik-menu .qblog-list-table .qblog_thumbnail_box {
		width: 180px;
		height: 200px;
	}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ブログリストのキャプション画像に出る日付
ブログリスト時のキャプション画像の大きさと連動して位置が変わる
2019.03.12
日付の背景をinfo系統の透明色に変える
2019.03.13
書体の大きさの調整と解像度1200px時を追加
2019.03.27
568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。
2019.04.11
読みやすい書体latoに変える。
2019.08.21
ブログリストのキャプション画像に出る日付をqblog.cssへ引っ越し
ここは予備として残してある。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/*
.qblog_date {
    background: rgba(16, 158, 179, 0.5);
    top: 0px;
    left: 0px;
    height: auto;
    width: auto;
    font-size: 18px;
    font-family: Lato;
}

@media (min-width: 568px) {
    .qblog_date {
        font-size: 20px;
    }
}

@media (min-width: 768px) {
    .qblog_date {
        font-size: 18px
    }
}

@media (min-width: 992px) {
    .qblog_date {
        font-size: 20px
    }
}

@media (min-width: 1200px) {
    .qblog_date {
        font-size: 22px
    }
}
*/

/* =================
ブログリスト時概要 
画像つきのリストで概要を出す。
ブログリストのキャプション画像と見出しの高さの合計を概要エリアとする。
overflow:hidden でテキストの回り込みを回避、あふれたものを隠す。
2019.03.13
書体の大きさの調整と解像度1200px時を追加
2019.03.14
レイアウト崩れの軽減に
line-height:1.5em、1.7emを追加
概要abstructの高さを調整、改善した
2019.08.21
.qblog_abstract
余白の調整
文字が見え隠れしていたのを調整
margin: 0.1em→0.5emへ
2019/09/21
ブログリスト時概要の高さ調整
 height: 125px;→135px;
 height: 140px;→145px;
2019/09/23
ブログリスト時概要の高さ調整
125px、140px、160px、174px、190px
としてみる
2020/01/11
ブログリストの概要にセレクタ[class^="haik-palette-"] を復活する。
これがないとqblog.cssのスタイルシートを優先してしまう。
 2020/01/14
編集メニュー背景色の修正
色弱の人には読めない事があったため
2020/07/14
qblogブログ投稿リストの概要の高さ、文字大きさを調整する。
画面サイズに応じて概要が表示される高さを可変にして、読みやすくかつ大きさをできるだけ揃える

heightはテスト用の数値、基準となる高さとしてコメント化

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

[class^="haik-palette-"] .qblog_abstract {
	font-size: 18px;
	line-height: 1.7em;
	margin: 0.3em .5em 0 0;
	/* テキストの回り込み回避 */
	margin-bottom: 0em;
	height: 7em;
	overflow: hidden;
}
@media (min-width: 360px) {
	[class^="haik-palette-"] .qblog_abstract {
		font-size: 20px;
	}
}
@media (min-width: 568px) {
	[class^="haik-palette-"] .qblog_abstract {
		/* height: 100px; */
		font-size: 20px;
		margin-right: .5em;
		height: 7em;
	}
}
@media (min-width: 768px) {
	[class^="haik-palette-"] .qblog_abstract {
		/* height: 110px; */
		line-height: 1.8em;
		margin-right: 1em;
		font-size: 20px;
		height: 7.5em;
	}
}
@media (min-width: 992px) {
	[class^="haik-palette-"] .qblog_abstract {
		/* height: 170px; */
		font-size: 24px;
		height: 9em;
	}
}
@media (min-width: 1200px) {
	[class^="haik-palette-"] .qblog_abstract {
		/* height: 130px; */
		font-size: 26px;
		height: 7.5em;
	}
}
@media (min-width: 1500px) {
	[class^="haik-palette-"] .qblog_abstract {
		height: 7.5em;
	}
}

/*フッター用ブログタイトル*/
@media (min-width: 1200px) {
    .haik-footer #qblog h2 {
		margin: 1em 2em 0em;
	}
}

/*フッター用ブログ概要*/
.haik-footer .qblog_abstract {
	line-height: 1.7em;
	margin: 0.5em 0;
	/* テキストの回り込み回避 */
	height: 10.5em;
	overflow: hidden;
}
@media (min-width: 568px) {
	.haik-footer .qblog_abstract {
		font-size: 20px;
		margin-right: 0em;
		height: 8.5em;
	}
}
@media (min-width: 768px) {
	.haik-footer .qblog_abstract {
		line-height: 1.8em;
		margin-right: 1em;
		font-size: 20px;
		height: 5.5em;
	}
}
@media (min-width: 992px) {
	.haik-footer .qblog_abstract {
		/* height: 170px; */
		font-size: 24px;
		height: 6em;
	}
}
@media (min-width: 1200px) {
	.haik-footer .qblog_abstract {
		font-size: 26px;
		height: 7.5em;
	}
}
@media (min-width: 1500px) {
	.haik-footer .qblog_abstract {
		height: 7.5em;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ブログ　
 qblog_recent時のブログリストとqblog_title aは違う
最新の投稿リスト、カテゴリリスト、最新のコメントリスト、ブログアーカイブリスト qblog.cssで最低限のスタイルしか書かれていない書式をここでそろえる。
2018.05.05 
.qblog_categories, .qblog_recent_comments, .qblog_archives
を追加
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ブログ　
 qblog_recent時のブログリストとqblog_title aは違う
最新の投稿リスト、カテゴリリスト、最新のコメントリスト、ブログアーカイブリスト qblog.cssで最低限のスタイルしか書かれていない書式をここでそろえる。
2018.05.07 
.qblog_categories, .qblog_recent_comments, .qblog_archives
を追加
2019.03.18
文字を太くする 
2019.09.02
ブログページ移動ボタンの文字を太くする
2019.09.05
投稿リスト、カテゴリリスト、最新のコメントリスト、ブログアーカイブリスト余白調整
2019/12/29
投稿リスト、カテゴリリスト、最新のコメントリスト、ブログアーカイブリスト余白調整、解像度1500px以上の文字サイズを追加（複数）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.qblog_recent, .qblog_categories, .qblog_recent_comments, .qblog_archives {
	list-style: none;
	padding: 6px;
	margin: 0px;
	margin-left: 1em;
	height: auto;
	/*    overflow-y: scroll; */
	line-height: 1.5em;
	padding-bottom: 12px;
	font-size: 18px;
	font-weight: 700;
}
@media (min-width: 768px) {
	.qblog_recent, .qblog_categories, .qblog_recent_comments, .qblog_archives {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.qblog_recent, .qblog_categories, .qblog_recent_comments, .qblog_archives {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	.qblog_recent, .qblog_categories, .qblog_recent_comments, .qblog_archives {
		font-size: 24px
	}
}
@media (min-width: 1500px) {
	.qblog_recent, .qblog_categories, .qblog_recent_comments, .qblog_archives {
		font-size: 26px
	}
}
/*
2020/01/10
メイン画面でブログ投稿最新の記事、カテゴリ、最近のコメントの左マージンを確保する
qblog.cssで初期化しているための策
2020/07/25
ブログページ移動ボタンの枠の色がBoostrapの設定では薄くて見えないことがあるので濃くした。
*/

.haik-container .qblog_recent, .haik-container .qblog_categories, .haik-container .qblog_recent_comments {
	margin-left: 1em;
}
/* ブログページ移動ボタン */

.pager li>a, .pager li>span {
	padding: 8px 10px;
	border-radius: 5px;
	font-size: 18px;
	font-weight: 700;
	border: 1px solid #aaa;
	background-color: transparent;
}
@media (min-width: 768px) {
	.pager li>a, .pager li>span {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.pager li>a, .pager li>span {
		font-size: 22px
	}
}
/* ================ 
ブログ
ブログフォーム
要素 入力項目の幅など不明な点も多いので注意
スマホでブログを入力するのは考えにくいので1種類で
2018.05.06
================*/

.qblog_edit_form .input-group .form-control, .qblog_edit_form .input-group .btn {
	height: 50px;
	font-size: 20px;
}
/* ================ 
ブログ
日付 
================*/

.qblog_edit_form input[name=qblog_date] {
	padding: 5px 10px;
}
/* ================ 
ブログ
タイトル
================*/

.qblog_edit_form input[name=title] {
	font-size: 18pt;
}
/* ===============
ブログ記事編集
テキスト入力エリア
ブログ
ヘッダーの編集
フッターの編集
お問い合わせ画面でも使われている。
2019/10/07
ブログ記事編集テキスト入力エリアの高さ、書体の大きさを改修
2020/01/14
書体の大きさ指定を廃止
2020/01/16
ブログ記事編集テキスト入力エリアの高さ単位をvhに切り替え
ビューポート単位で高さを指定するので相対的にわかりやすい。
コメントされているpxが前の高さでほぼ同じくらい
===============*/

#msg {
	color: black;
	line-height: 1.8em;
	/*height: 450px;*/
	height: 60vh;
	margin-bottom: .5em;
}
@media (min-width: 568px) {
	#msg {
		/*height: 530px;*/
		height: 58vh;
	}
}
@media (min-width: 768px) {
	#msg {
		/*height: 580px;*/
		height: 63vh;
	}
}
@media (min-width: 992px) {
	#msg {
		/*height: 640px;*/
		height: 73vh;
	}
}
@media (min-width: 1200px) {
	#msg {
		height: 76vh;
	}
}
/*=================
画面幅最大設定
ページの一覧
バックアップ
アップデート
他の画面などもあるので調整中
2019.03.18
設定画面の#wrapperと重複して使っている部分があるので、これを変える時はskinディレクトリ内のmain.cssを改修すること。支障なく動くか確認する。
=================*/

#wrapper {
	width: 650px;
	font-size: 18px;
	line-height: 1.8em;
}
@media (min-width: 768px) {
	#wrapper {
		width: 800px;
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	#wrapper {
		width: 1024px;
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	#wrapper {
		width: 1200px;
		font-size: 24px;
	}
}
/*=================
 「ページの複製」
画面など
2018.05.03　作成
select,input, textarea要素のマージンを調整する
2019/10/12
select,input, textarea要素のマージン調整
2020/01/12
「ページの複製」などで使われるselectの文字の大きさを可変に修正
2020/07/18
「ページの複製」などで使われるセレクトボックスの大きさを調整
ひな形とするページ読み込みが可能になるように調整
2020/07/19
セレクトボックス、モバイル端末では[選択]ボタンでレイアウトが崩れるので幅を80％に設定

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

select {
	width: 80%;
	height:2em;
	line-height:2em;
	margin:1em 0;
}
@media (min-width: 768px) {
	select {
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	select {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	select {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
	select {
		font-size: 26px;
	}
}
/*
2019/10/11
search2フォームの上からの位置を調整
2019/10/12
search2フォームのマージンは予備コメント化へ
ナビで使う場合はcompactを指定すること
*/

[data-plugin=search2]>.input-group, [data-plugin=search2]>.form-group {
	position: relative;
	/*margin: 0px 0px;*/
}
input {
	font-size: 18px;
	line-height: 2em;
}
@media (min-width: 768px) {
	input {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	input {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	input {
		font-size: 24px
	}
}
@media (min-width: 1500px) {
	input {
		font-size: 26px
	}
}
/*============
ページの一覧画面
インデックス
冒頭見出し｜検索｜最終更新日｜ラベル類
ページ名
2018.05.03
============*/

/* 冒頭インデックス */

/* リスト内ページ名 */

thead td, #plugin_list_index, .plugin_list_pagename a {
	font-size: 20px;
	line-height: 2em
}
@media (min-width: 768px) {
	thead td, #plugin_list_index, .plugin_list_pagename a {
		font-size: 22px
	}
}
@media (min-width: 992px) {
	thead td, #plugin_list_index, .plugin_list_pagename a {
		font-size: 24px
	}
}
/* リスト内のインデックス頭文字・日本語文字ナビ */

tr.plugin_list_navi {
	line-height: 2em;
	font-size: 18px
}
@media (min-width: 768px) {
	tr.plugin_list_navi {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	tr.plugin_list_navi {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	tr.plugin_list_navi {
		font-size: 24px
	}
}
/*============
2018.05.03
ページの一覧画面
コマンド類
2019.09.02
ページの一覧画面コマンド書体大きさ調整
============*/

.plugin_list_commands {
	font-size: 20px;
	line-height: 2em;
}
@media (min-width: 568px) {
	.plugin_list_commands {
		font-size: 22px
	}
}
@media (min-width: 768px) {
	.plugin_list_commands {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.plugin_list_commands {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	.plugin_list_commands {
		font-size: 24px
	}
}
/*============
ページの一覧画面
ファイル名
2018.05.03
============*/

.plugin_list_filename {
	font-size: 18px;
	line-height: 2em
}
@media (min-width: 768px) {
	.plugin_list_filename {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.plugin_list_filename {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	.plugin_list_filename {
		font-size: 24px
	}
}
/*============
ページの一覧画面
最終更新日
2018.05.03
============*/

.plugin_list_mtime {
	font-size: 16px;
}
@media (min-width: 768px) {
	.plugin_list_mtime {
		font-size: 18px
	}
}
@media (min-width: 992px) {
	.plugin_list_mtime {
		font-size: 20px
	}
}
@media (min-width: 1200px) {
	.plugin_list_mtime {
		font-size: 22px
	}
}
/*============
ページの一覧画面
テーブル幅
2018.05.03
============*/

.plugin_list table {
	width: 100%;
}
/*============
ブログ投稿編集画面のラベル類
2018.05.03　
主に装飾ボタン、リンクボタンで出てくるラベルです。
2019.10.08
ブログ投稿編集で装飾ボタン、リンクボタンで出てくるダイアログのラベル大きさ調整
2020/01/14
ブログ投稿編集画面のラベル類書体大きさを修正
============*/

label {
	display: inline-block;
	max-width: 100%;
	margin-bottom: 0px;
	font-size: 20px;
	font-weight: 700;
	line-height: 2em;
}
@media (min-width: 992px) {
	label {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	label {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
	label {
		font-size: 26px;
	}
}
/*============
ブログ投稿編集画面のラベル類
2019.10.08　
ブログ投稿編集で装飾ボタン、リンクボタンで出てくるダイアログの小さい文字ラベル
11ptと小さすぎるので強制的に拡大
2020/01/14
ブログ投稿編集画面のラベル類label spanが他の所と重複していたのでコメントアウト
============*/

/*
label span{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-size: 20px !important;
    font-weight: 700;
    line-height:1.8em;
}
@media (min-width: 992px) {
    label span{
        font-size: 22px;
    }
}
*/

/*=================
編集
ブログ記事追加・編集
画面のボタン類
2018.05.03
2019.03.03
メディアクエリ1200px時の設定を追加
=================*/

/* テキスト入力枠の下にある編集機能ボタン */

.qhm-btn-sm {
	font-size: 16px;
}
@media (min-width: 768px) {
	.qhm-btn-sm {
		font-size: 18px;
	}
}
@media (min-width: 992px) {
	.qhm-btn-sm {
		font-size: 20px;
	}
}
@media (min-width: 1200px) {
	.qhm-btn-sm {
		font-size: 22px;
	}
}
/* ======
リンク式ボタン 
「キャンセル」など
======*/

.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
	font-size: 18px;
	padding-top: 0px;
}
@media (min-width: 768px) {
	.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
		padding-top: 0px;
		font-size: 18px;
	}
}
@media (min-width: 992px) {
	.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
		padding-top: 0px;
		font-size: 20px;
	}
}
/* ======
ボタンデフォルト 
「プレビュー」など
======*/

.qhm-btn-default {
	font-size: 16px;
}
@media (min-width: 768px) {
	.qhm-btn-default {
		font-size: 18px;
	}
}
@media (min-width: 992px) {
	.qhm-btn-default {
		font-size: 20px;
	}
}
/* ======
青ボタン 
「ページの更新」など
======*/

.qhm-btn-primary {
	font-size: 18px;
}
@media (min-width: 768px) {
	.qhm-btn-primary {
		font-size: 18px;
	}
}
@media (min-width: 992px) {
	.qhm-btn-primary {
		font-size: 20px;
	}
}
/* ================ 
ブログ編集画面 カテゴリ選択
2020/01/16
ブログ編集画面 カテゴリ選択
セレクタ[class^="haik-palette-"]の復活
重複していた部分の統合
書体の大きさを本体に任せる
ボタンの大きさを調整
================*/

[class^="haik-palette-"] .qblog_edit_form ul.qblog_categories li {
	border-radius: 4px;
	line-height: 1em;
	padding: 0.4em;
}
/*==================
 2019/10/12
 検索フォームsearch2の虫眼鏡アイコン位置の修正
2020/01/08
検索フォームsearch2の虫眼鏡アイコンがスクロール時ナビの上に出てくるミスを修正
z-indexを10から8に修正。
2020/01/09
検索フォームsearch2の虫眼鏡アイコンが下にずれる。読み込みの都合なので!important設定
2020/07/19
検索フォームsearch2、search2.inc.phpを直に修正するのでコメントアウト
=================*/
/*
[data-plugin=search2]>.input-group>.svg-inline--fa {
    position: absolute;
    top: 20px;
    left: 7px;
    color: #999;
    z-index: 8;
}
*/
/*==================
編集、問い合わせ・検索フォーム・入力フォームの属性
書体の大きさ、高さなど
2019/10/12
編集、問い合わせ・検索フォーム・入力フォームの属性が大きすぎてレイアウトへの影響が強すぎるので調整
2020/01/14
編集、問い合わせ・検索フォーム・入力フォームの属性qhm.css改修に伴い、font-size:の!important指定を解除
2020/01/15
編集、問い合わせ・検索フォーム・入力フォームの属性がqform関係、おそらくphpファイル内で書体サイズが固定されているので!important指定を復活
2020/07/19
編集、問い合わせ・検索フォーム・入力フォームの属性スタイルシート設定変更につき!important指定を解除
2020/07/24
編集、問い合わせ・検索フォーム・入力フォームの属性スタイルシート設定変更と思ったが、まだ!important指定が必要。核となるPHPプログラムの所在が不明。
旧いブラウザでクラス名がきちんと働かない事があるので、input, select, textarea,を追加する。
==================*/

input, select, textarea,.form-control {
	font-size: 18px !important;
	/*border-radius: 6px;*/
}
@media (min-width: 360px) {
	input, select, textarea,.form-control {
		font-size: 20px !important;
	}
}
@media (min-width: 568px) {
	input, select, textarea,.form-control {
		font-size: 22px !important;
	}
}
@media (min-width: 768px) {
	input, select, textarea,.form-control {
		font-size: 20px !important;
	}
}
@media (min-width: 992px) {
	input, select, textarea,.form-control {
		font-size: 22px !important;
	}
}
@media (min-width: 1200px) {
	input, select, textarea,.form-control {
		font-size: 24px !important;
	}
}
@media (min-width: 1500px) {
	.form-control {
		font-size: 26px !important;
	}
}
/*
チェックボックス、ラジオボタン
2019/10/08
チェックボックス大きさを1.3倍から1.5倍へ拡大する
2020/01/14
チェックボックス、ラジオボタンのラベルとのずれを修正
*/

input[type=checkbox],
input[type=radio] {
	transform: scale(1.5);
	vertical-align: middle;
	height: 2.5em;
	margin: 0 .3em;
}
/*
2019/10/08
チェックボックスとラベルのズレをなくすための調整
元の位置指定が整合性がとれない指定でなぜこうなるのかという記述だった。
リセットする形でうまくいった
*/

.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
	position: relative;
	margin-top: 0em;
	margin-left: 0px;
	padding-right: 0px;
	vertical-align: middle;
}
/* ================ 
 * テーマ編集ウィンドウ
 * テーマカスタマイズメニュー
 * 透明度 幅 など
 * 2018/05/03
 * 767px以上は画面幅のパーセントに変更できないかしたが未定
 * 2019/03/22
 * テーマ編集画面をスマホの大きさでも出せるように調整
 * 2019/03/24
 * テーマ編集画面をスマホの機種毎に出せるように調整
 * 2019/03/26
 * テーマ編集画面をスマホの機種毎、メディアクエリに411pxを追加
 * 幅をわかりやすく調整
 * 高さはdiv.qhm-skin-customizer-menu.collapse.in　で調整できるが画面の高さを出す事ができないので保留へ
2020/01/16
テーマ編集ウィンドウの属性に!important指定する
このスタイルシートの後に全テーマ共通のskin-customizer.cssを後から読み込んでいるため。skin-customizer.cssを全部修正するのは面倒なためここで一括修正。
================ */

#preview_bar .qhm-skin-customizer-menu {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.8);
	padding: 15px 10px 0 !important;
	/* width: 340px; */
	width: 95% !important;
	bottom: 72px !important;
}
@media (min-width: 320px) {
	#preview_bar .qhm-skin-customizer-menu {
		bottom: 120px !important;
	}
}
@media (min-width: 375px) {
	#preview_bar .qhm-skin-customizer-menu {
		bottom: 120px!important;
	}
}
@media (min-width: 411px) {
	#preview_bar .qhm-skin-customizer-menu {
		bottom: 100px!important;
	}
}
@media (min-width: 568px) {
	#preview_bar .qhm-skin-customizer-menu {
		bottom: 88px!important;
	}
}
@media (min-width: 640px) {
	#preview_bar .qhm-skin-customizer-menu {
		bottom: 70px!important;
	}
}
@media (min-width: 768px) {
	#preview_bar .qhm-skin-customizer-menu {
		width: 80%!important;
		bottom: 80px!important;
	}
}
@media (min-width: 992px) {
	#preview_bar .qhm-skin-customizer-menu {
		width: 70%!important;
		bottom: 70px!important;
	}
}
@media (min-width: 1200px) {
	#preview_bar .qhm-skin-customizer-menu {
		width: 60%!important;
	}
}
/* ================ 
 * テーマ編集ウィンドウ
 * テーマカスタマイズメニュー
 * 下のバーの「カスタマイズ」トグル
 * 2019/03/26
 * 667px以上で書体サイズを18ポイントにして、それ未満を16pxとした。
 * カタカナだけなので小さくできる。 
================ */

#preview_bar .qhm-skin-customizer-menu-toggle {
	font-size: 16px
}
@media (min-width: 667px) {
	#preview_bar .qhm-skin-customizer-menu-toggle {
		font-size: 18px
	}
}
@media (min-width: 768px) {
	#preview_bar .qhm-skin-customizer-menu-toggle {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	#preview_bar .qhm-skin-customizer-menu-toggle {
		font-size: 22px
	}
}
/* ================ 
 * テーマ編集ウィンドウ
 * カスタマイズメニューのセレクタの高さ
================ */

select.input-sm {
	height: 2em;
}
/* ================ 
 * テーマ編集ウィンドウ
 * カスタマイズメニュー プレビューバー透明度
 * 高さを切り替えて調整
 * iphoneSEレベルにも対応。ただし、効率が悪いのであくまでも間に合わせとした方がよい。
 * 2019/03/26
 * テーマ編集画面をスマホの機種毎、メディアクエリに411px時の大きさを追加
================ */

#preview_bar_overlay {
	opacity: 0.5;
	height: 50px;
}
#preview_bar {
	height: 50px;
}
@media (min-width: 320px) {
	#preview_bar_overlay {
		height: 120px;
	}
	#preview_bar {
		height: 120px;
	}
}
@media (min-width: 375px) {
	#preview_bar_overlay {
		height: 120px;
	}
	#preview_bar {
		height: 120px;
	}
}
@media (min-width: 411px) {
	#preview_bar_overlay {
		height: 100px;
	}
	#preview_bar {
		height: 100px;
	}
}
@media (min-width: 568px) {
	#preview_bar_overlay {
		height: 88px;
	}
	#preview_bar {
		height: 88px;
	}
}
@media (min-width: 640px) {
	#preview_bar_overlay {
		height: 70px;
	}
	#preview_bar {
		height: 70px;
	}
}
@media (min-width: 768px) {
	#preview_bar_overlay {
		height: 80px;
	}
	#preview_bar {
		height: 80px;
	}
}
@media (min-width: 992px) {
	#preview_bar_overlay {
		height: 70px;
	}
	#preview_bar {
		height: 60px;
	}
}
/* =======================
 * 2019.03.02
 * テーマ編集ウィンドウ
 * 色選択 swatch
 * 再定義
 * テーマ編集のテーマカラー選択、
 * テーマ編集のアイキャッチカラー選択、
 * 元ＣＳＳ～plugin/skin_customizer/skin_customizer.css 
 * 2019/03/26
 * 位置はプログラムで固定されているため、移動できない状態。
2020/01/20
色選択 swatch　skin_customizer.cssの方を書き換える事でコチラはコメント化
=======================*/
/*
.colorPicker-swatch {
	width: 25px;
	height: 25px;
	float: left;
	margin: 2px;
	border: 1px solid #eee;
	border-radius: 0px;
	box-sizing: border-box;
}
*/
/* =======================
 * 2019.03.02
 * アイキャッチ画像選択イメージ
 * プログラムでファイル名を書き加えているので
 * 大きさを2倍に再設定
 * 元ＣＳＳ～plugin/skin_customizer/skin_customizer.css 
=======================*/

#preview_bar .qhm-skin-customizer-menu [data-image] {
	border-radius: 0px;
	border-width: 2px;
	border-color: #777;
	border-style: solid;
	margin-right: 5px;
	width: 80px !important;
	height: 80px;
	margin-right: 90px !important;
}
/* =======================
 * 2019.03.02
 * アイキャッチ画像選択囲み
 * 再定義
 * 元ＣＳＳ～plugin/skin_customizer/skin_customizer.css 
=======================*/

#preview_bar .qhm-skin-customizer-menu [data-image] {
	border-radius: 0px;
	border-width: 2px;
	border-color: #444;
	border-style: solid;
}

/* =======================
 * 2019.03.02
 * アイキャッチ画像選択タイトルなど
 * モーダルダイアログ
 * タイトル大きさ再定義（旧）
=======================*/
/*
.modal-title {
	margin: 0;
	line-height: 1em;
	font-size: 18px;
	font-weight: 700;
}
@media (min-width: 768px) {
	.modal-title {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.modal-title {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	.modal-title {
		font-size: 24px
	}
}

/* ========
 * 編集メニュー「このページの」-共有
画面の調整
768px以上で可変させる
2018.05.03 
2021/06/04　統合につき廃止予定
========*/
/*
.modal-dialog {
	margin: 30px auto
}
@media (min-width: 768px) {
	.modal-dialog {
		width: 95%
	}
}
@media (min-width: 992px) {
	.modal-dialog {
		width: 80%
	}
}
*/

/* =======================
2021/06/04
モーダルダイアログボックスの書式を再度定義（新）
ボタンの定義が固まったので調整 
モバイル版では不自然になるボックス表示の修正、タイトルや文字の大きさの改修
モーダルダイアログボックスの設置、アイキャッチ画像選択タイトルなどで利用
スマートフォンの小さな画面でも文字が読めるように修正
flex設定の追加 Boostrap4からの移植
画面真ん中に来るよう、Boostrap4のmodal-dialog-centeredクラスを移植する。

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

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
    outline: 0;
}

.modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
}


[type=button]:not(:disabled), 
[type=reset]:not(:disabled), 
[type=submit]:not(:disabled), 
button:not(:disabled) {
    cursor: pointer;
}

.modal-header .close {
    padding: 0;
    background-color: transparent;
    border: 0;
    appearance: none;
    padding: 1rem 1rem;
    margin: -1rem -1rem -1rem auto;
}

.modal-footer>* {
    margin: .25rem;
}

.modal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: .75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: calc(.3rem - 1px);
    border-bottom-left-radius: calc(.3rem - 1px);
}

.modal-title {
	margin: 0;
	line-height: 2em;
	font-size: 18px;
	font-weight: 700;
}

.modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem;
}

@media (min-width: 360px) {
	.modal-title,
    .modal-body {
		font-size: 20px;
	}
}
@media (min-width: 568px) {
	.modal-title,
    .modal-body {
		font-size: 22px;
	}
}
@media (min-width: 768px) {
	.modal-title,
    .modal-body {
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	.modal-title,
    .modal-body {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	.modal-title,
    .modal-body {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
	.modal-title,
    .modal-body {
		font-size: 26px;
	}
}
@media (min-width: 2000px) {
	.modal-title,
    .modal-body {
		font-size: 28px;
	}
}
@media (min-width: 2500px) {
	.modal-title,
    .modal-body {
		font-size: 30px;
	}
}
/*
2021/06/30
.modal-dialog-centered
で文法エラーが出るため
-ms-flex-align: center;
display: -ms-flexbox;
を省略
2021/07/05
文法エラーが出るので@media (min-width: 576px)のかッコを増やす
*/
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

@media (min-width: 576px){
.modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
	}
}


/* ================ 
2018/05/03
左側に出る編集メニュー
メインはqhm.css内。ここではカスタマイズにしている。
変える時はバックアップをとってから行う。
1つ1つ確認しながら行うとよい
レイアウト崩れに注意すること
2020/01/09
左側に出る編集メニューの背景職を透明から黒（#373737）の90％程度になるように修正
出現順番を修正
2020/01/18
編集ツールバーメニュー文字の大きさ、幅を拡大

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

/* ＝＝＝＝＝＝＝
 * 編集ツールバーメニュー左側に出る
 * 編集ツールバーサブメニューの属性はここが親になる
 2020/01/14
編集メニュー背景色の修正
色弱の人には読めない事があったため
＝＝＝＝＝＝＝＝*/

.toolbar_upper {
	position: fixed;
	line-height: 1.5em;
	text-align: left;
	color: #666;
	border-right: 1px dashed #999;
	border-bottom: 1px dashed #999;
	background-image: url(../../image/arrow2.png);
	background: #373737;
	padding: 0 0 0 0;
	margin-top: 0px;
	z-index: 10;
	top: 0px;
	left: 0px;
	font-size: 18px;
	opacity: 0.8;
}
@media (min-width: 360px) {
	.toolbar_upper {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.toolbar_upper {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	.toolbar_upper {
		font-size: 24px
	}
}
@media (min-width: 1500px) {
	.toolbar_upper {
		font-size: 26px
	}
}
/* ＝＝＝＝＝＝＝
 * 編集ツールバー折りたたみで上に出る
 2020/01/18
編集ツールバーメニュー文字の大きさ、幅を拡大

＝＝＝＝＝＝＝＝*/

/*
メインメニュー幅
2019/12/19
メインメニュー書体を修正。不評なメイリオは後回しで見やすくした。
*/

#toolbar_upper_max {
	font-family: "BIZ UDPゴシック", Verdana, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS ゴシック", "MS Gothic", "MS Pゴシック", "MS PGothic", sans-serif;
	letter-spacing: normal;
	width: 162px;
}
@media (min-width: 360px) {
	#toolbar_upper_max {
		width: 200px
	}
}
@media (min-width: 992px) {
	#toolbar_upper_max {
		width: 220px
	}
}
#toolbar_upper_min {
	font-family: "BIZ UDPゴシック", Verdana, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS ゴシック", "MS Gothic", "MS Pゴシック", "MS PGothic", sans-serif;
	letter-spacing: normal;
	font-size: 16px;
}
@media (min-width: 360px) {
	#toolbar_upper_min {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	#toolbar_upper_min {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	#toolbar_upper_min {
		font-size: 24px
	}
}
@media (min-width: 1500px) {
	#toolbar_upper_min {
		font-size: 26px
	}
}
/*==========
 * 2018.05.03
 * 編集ツールバーメインサブメニュー幅とメインから出す位置
 * 編集ツールバーメインメインメニュー幅に合わせる
2020/01/18
編集ツールバーメニュー文字の大きさ、幅を拡大

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

ul.toolbar_submenu {
	width: 162px;
	left: 162px
}
@media (min-width: 360px) {
	ul.toolbar_submenu {
		width: 200px;
		left: 200px
	}
}
@media (min-width: 992px) {
	ul.toolbar_submenu {
		width: 220px;
		left: 220px
	}
}
@media (min-width: 1200px) {
	ul.toolbar_submenu {
		width: 240px;
	}
}
@media (min-width: 1500px) {
	ul.toolbar_submenu {
		width: 260px;
	}
}
/*編集ツールバーサブメニュー選択時・反転項目の幅*/

ul.toolbar_submenu li {}
@media (min-width: 360px) {
	ul.toolbar_submenu li {
		width: 199px
	}
}
@media (min-width: 992px) {
	ul.toolbar_submenu li {
		width: 219px
	}
}
@media (min-width: 1200px) {
	ul.toolbar_submenu li {
		width: 239px;
	}
}
@media (min-width: 1500px) {
	ul.toolbar_submenu li {
		width: 259px;
	}
}
/*＝＝＝＝＝
 * 編集ツールバーメインの項目高さ
2020/01/18
編集ツールバーメニュー文字の大きさ、幅を拡大

＝＝＝＝＝*/

ul.toolbar_menu li {
	position: relative;
	color: #fff;
	padding: 0 2px 0 10px;
	margin: 0;
	text-decoration: none;
	height: 25px;
	line-height: 25px;
	background-repeat: no-repeat;
}
@media (min-width: 768px) {
	ul.toolbar_menu li {
		height: 1.5em;
		line-height: 1.5em;
	}
}
/*============
 * 上メニューの高さ
 * ここは慎重に作業が必要
 * 2018/05/03
2020/01/18
編集ツールバーメニュー文字の大きさ、幅を拡大
2020/01/18
項目左側に下向き三角アイコンの表示のため排他領域0.8em必要

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

ul.toolbar_menu_min li a {
	padding: 0;
	color: #fff;
	text-decoration: none;
	display: block;
	outline: none;
}
@media (min-width: 360px) {
	ul.toolbar_menu_min li {
		padding: 0 .3em 0 0.8em;
		font-size: 20px;
		height: 1.5em;
		line-height: 1.5em;
	}
}
@media (min-width: 768px) {
	ul.toolbar_menu_min li {
		font-size: 22px;
	}
}
@media (min-width: 992px) {
	ul.toolbar_menu_min li {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	ul.toolbar_menu_min li {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
	ul.toolbar_menu_min li {
		font-size: 26px;
	}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  scrollup アイコン透明度 、位置設定
 *  2018.04.28 
 * pluginフォルダにある
 * scrollup.inc.php
 * の同じ部分を書き換えてもＯＫ
 *  2019.03.21 
 * z-index:を追加してスクロール時に検索ボタンなどと重ならないようにする。
 *  2019.03.23 
 * qhm-plugin-scrollup.css を追加して出現位置などを書き換えられるようにした。
 2020/01/19
 scrollup アイコン透明度　ease 0s;ではエラーになるのでease 0.1s;とする
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.qhm-plugin-scrollup {
	color: inherit;
	opacity: 0.5;
	z-index: 999999999;
}
/*　マウスオーバー時透明度を変える　*/

.qhm-plugin-scrollup.affix:hover {
	opacity: 0.7;
	transition: all 0.5s ease 0.1s;
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 *  scrollup アイコン透明度 、位置設定
 *  2018.04.28 
 * デフォルト設定にフックをかける形で変えています。
 2019/09/07
 scrollup アイコン透明度 、位置設定をnagamira_css1.cssで同じ記述で重複していたので統合
 FAアイコンなので倍率の指定が近似値に自動変換されるが、別アイコンに変える際に使えると思う。
2020/01/11
scrollup アイコン形状をボタン型に修正
従来のWEBアイコンのみだと紺など暗い背景では見えないため
テキストシャドウは処理が重いため背景色をしてい
 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.qhm-plugin-scrollup {
	font-size: 28px;
	bottom: 88px;
	right: 10px;
	cursor: pointer;
	padding: 5px;
	border-radius: 4px;
	background: #f0f8ff;
}
@media (min-width: 568px) {
	.qhm-plugin-scrollup {
		bottom: 65px;
		font-size: 30px;
	}
}
@media (min-width: 768px) {
	.qhm-plugin-scrollup {
		bottom: 65px;
		font-size: 32px;
	}
}
@media (min-width:992px) {
	.qhm-plugin-scrollup {
		bottom: 80px;
		font-size: 34px;
	}
}
@media (min-width:1200px) {
	.qhm-plugin-scrollup {
		font-size: 40px;
	}
}
/* ========
 * 検索結果ページ
 * 2018.05.03 
 2020/01/12
検索結果ページ .list-group-item-heading
行高を1.8emへ
検索結果ページ .list-group-item-text
行高を1.8emへ
2020/01/12
検索結果ページ見出しの可変文字サイズを修正
========*/

/*検索に一致したページのタイトル*/

.list-group-item-heading {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 20px;
	line-height: 1.8em;
}
@media (min-width: 768px) {
	.list-group-item-heading {
		font-size: 22px;
	}
}
@media (min-width: 992px) {
	.list-group-item-heading {
		font-size: 24px;
	}
}
@media (min-width: 1200px) {
	.list-group-item-heading {
		font-size: 26px;
	}
}
@media (min-width: 1500px) {
	.list-group-item-heading {
		font-size: 28px;
	}
}
.list-group-item-text {
	margin-bottom: 0;
	line-height: 1.8em;
}
.text-muted {
	color: #333;
}


/* ========
2020/07/11
モーダルダイアログ内表の文字サイズを大きくする
主にショートカット一覧表で使われる
========*/
.modal-dialog th,
.modal-dialog td {
	font-size:20px;
    }
@media (min-width: 992px) {
.modal-dialog th,
.modal-dialog td {
	font-size:22px;
    }
}
@media (min-width: 1200px) {
.modal-dialog th,
.modal-dialog td {
	font-size:24px;
    }
}
/* ========
 * 編集メニュー「このページの」-共有
 * 画面の文字の大きさ
 * 2018.05.03 
========*/

#shareQHMPage {
	line-height: 1.5em;
	font-size: 16px
}
@media (min-width: 768px) {
	#shareQHMPage {
		font-size: 18px
	}
}
@media (min-width: 992px) {
	#shareQHMPage {
		font-size: 20px
	}
}
/* =================
 * ブログ
 * オプション表示
 * 下部のコメントフッター
 * バッジ　の属性
 * 2018/05/05 最低限のみ
 2019.03.16
 コメントバッジの描画を修正
=================*/

.qblog_comment_footer .badge, .qblog_comment_footer {
	font-size: 18px;
	margin: 1px 1px;
	padding: 5px 10px;
	border-radius: 3px;
	margin-bottom: 0.5em;
}
@media (min-width: 768px) {
	.qblog_comment_footer .badge, .qblog_comment_footer {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.qblog_comment_footer .badge, .qblog_comment_footer {
		font-size: 22px
	}
}
/* =================
 * 試験中 ブログ
 * 下部のコメントタイトル
 * 2018/05/05 最低限のみ
=================*/

.qblog_comment_title {
	font-size: 20px
}
@media (min-width: 768px) {
	.qblog_comment_title {
		font-size: 22px
	}
}
@media (min-width: 992px) {
	.qblog_comment_title {
		font-size: 24px
	}
}
/* 2019.03.16　追加 */

.qblog_comment_control {
	margin-bottom: 0.5em;
}
/* 2019.03.16　追加 */

#qblog_comment_list li {
	margin-bottom: 1em;
}
/* =================
 * ブログ
 * コメント 認証コードメッセージ
 * 2018/05/05 最低限のみ
=================*/

#qblog_comment_auth_msg {
	font-size: 18px
}
@media (min-width: 768px) {
	#qblog_comment_auth_msg {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	#qblog_comment_auth_msg {
		font-size: 22px
	}
}
/* =================
 * ブログ
 * コメント 認証コード
 * 2018/05/05 最低限のみ
=================*/

.qblog_comment_auth_code {
	font-size: 18px
}
@media (min-width: 768px) {
	.qblog_comment_auth_code {
		font-size: 20px
	}
}
@media (min-width: 992px) {
	.qblog_comment_auth_code {
		font-size: 22px
	}
}
/* =================
 * ブログ
 * アーカイブ一覧　年アコーディオン背景
 * 2018/05/07 視覚的な調整のみ
=================*/

.plugin-qblog-archives-year {
	border: 1px solid lightgray;
}
/* =================
 * ブログ
 * アーカイブ一覧　年ラベルアイコン
 * アイコンを変更
 * 2019.03.02
 * Glyphiconsに切り替える　
 * font-family: 'Glyphicons Halflings';
 * font-weight: bold; は外した方がよい
 * boostrapのGlyphicons　コードは　 http://icon-search.jp/ でコードを検索
 * boostrapのGlyphicons　コードは　 https://glyphicons.bootstrapcheatsheets.com/# の方が種類が多い。
 * 使えそうなアイコンコードの例
 * ハンバーガー　　"\e055"　align-justifyで代用
 * ×　"\e014"　remove　
 * ＋　"\002b"　plus　
 * ∧　"\e260"　menu-up　メニューアップ　これが標準
 * ∨　"\e259"　menu-down　メニューダウン　これが標準
 * □囲み▲　"\e160"　collapse-up　中の三角形が小さいので使い方を選ぶ
 * □囲み▼　"\e159"　collapse-down　中の三角形が小さいので使い方を選ぶ
 * ○囲み↓　"\e134"　circle-arrow-down　サークルアローダウン
 * ○囲み↑　"\e133"　circle-arrow-up　サークルアローアップ
 * ○囲み＋　"\e081"　plus-sign　小さいので色や人によってはみにくい
 * ○囲み×　"\e083"　remove-sign　小さいので色や人によってはみにくい
 * かこみなしリスト　"\e056"　list　小さいので色や人によってはみにくい
 * □囲みリスト　"\e032"　list-alt　小さいので色や人によってはみにくい 
 2019/03/21
アコーディオンパネルに使うアイコンでmenu-up、menu-downがあったのでそれに統一、切り替えた。
 * 2019/03/21
 * アイコンをGlyphicons Halflings（menu-up　＋ "\e260"）に変更
=================*/

.plugin-qblog-archives-year::after {
	display: block;
	position: absolute;
	font-family: 'Glyphicons Halflings';
	content: "\e260";
	right: 15px;
	top: 10px;
	color: darkgray;
}
/* =================
 * ブログ
 * アーカイブ一覧　年ラベルアイコン
 * Collapse　折りたたみ時 アイコン（∨　"\e114"）
 * 2018/05/08
 * アイコンを変更
 * 2019/03/21
 * アイコンをGlyphicons Halflings（menu-down　＋ "\e259"）に変更
=================*/

.plugin-qblog-archives-year.collapsed::after {
	content: "\e259";
}
/* =======================
 * 2019.03.09
ブログ　カレンダー選択機能文字を大きくする
2020/07/31
ブログ　カレンダー選択機能文字の大きさ、画面サイズ調整
1024px→992px
1500pxを追加
=======================*/
.datepicker.dropdown-menu {
	font-size: 18px !important;
}
@media (min-width: 360px) {
	.datepicker.dropdown-menu {
		font-size: 20px !important;
	}
}
@media (min-width: 992px) {
	.datepicker.dropdown-menu {
		font-size: 22px !important;
	}
}
@media (min-width: 1200px) {
	.datepicker.dropdown-menu {
		font-size: 24px !important;
	}
}
@media (min-width: 1500px) {
	.datepicker.dropdown-menu {
		font-size: 26px !important;
	}
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2019.03.12
グリッドリストのキャプション画像に出る日付
解像度が高いと日付がきれいに見えないので改善して見えるようにする
2019.04.11
書体を変えて綺麗に見えるようにしたので陰を廃止
2019.05.04
.qblog-itemを.qblog-listに書き換え
グリッドリストのキャプション画像に出る日付を
条件セレクタ記述に切り替え。冗長性を減らせる
2019.08.29
キャプション画像に出る日付の縁取りをつけて視認性を上げた
カスタマイズで選択できるようにした。
2019.08.30
日付の大きさを自動で調整する
2019/09/11
キャプション画像に出る日付の文字色を黒、背景を半透明の白、縁取りを白にする
2019/09/12
キャプション画像に出る日付の文字を太字、グレーのかかった色に修正
2019/09/22
キャプション画像に出る日付の文字の大きさを小さく出るよう調整
min-width: 992pxと1200pxのみ22px→20pxにした
2019/09/22
キャプション画像に出る日付の文字を左から0.069emずらして出す
2019/10/01
キャプション画像に出る日付の白縁取りを1pxから3pxへと大きく
2019/12/07
キャプション画像に出る日付の書体の調整
　書体太さをboldを廃止
　書体文字の色を濃く黒に
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/* 条件セレクタ記述に切り替え */

.qblog-item .qblog_date {
	position: absolute;
	left: 0.069em;
	width: auto;
	height: auto;
	top: auto;
	bottom: 0;
	background: #ffffffa3;
	color: #000000;
	text-align: left;
	padding: 0px 5px;
	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: 568px) {
	.qblog-item .qblog_date {
		font-size: 20px;
	}
}
@media (min-width: 768px) {
	.qblog-item .qblog_date {
		font-size: 18px
	}
}
@media (min-width: 992px) {
	.qblog-item .qblog_date {
		font-size: 20px
	}
}
@media (min-width: 1200px) {
	.qblog-item .qblog_date {
		font-size: 20px;
	}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2019.03.23
Qブログのグリッド画面の絶対領域の幅を可変させる
元が左右10pxと固定されていて、とても見栄えが悪かったのを改修。
スマホ解像度では左右マージンをとることでメンテナンス性を改善。
2019.05.02
ブログのグリッド表示スマホで2桁表示させる事に成功！
従来は1桁しかできなかったのを独自に可変する事で擬似的に実現へ。素晴らしい！
2019.05.04
ブログリスト左右マージンの調整
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

.qblog-list .col-sm-4 {
	width: 100%;
	padding: 0;
	float: left;
}
@media (min-width: 321px) {
	.qblog-list .col-sm-4 {
		width: 50%;
	}
}
@media (min-width: 768px) {
	.qblog-list .col-sm-4 {
		width: 33.3333%;
	}
}
@media (min-width: 1200px) {
	.qblog-list .col-sm-4 {
		width: 25%;
	}
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2019.03.27
qblog　グリッド表示時のタイトル
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
2019.03.25
「ページの名前を変える」のテキストボックスの長さを可変に修正
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

input#_p_rename_newname {
	width: 100%;
}
/* ===============
2019.03.28
 qblogグリッド表示時のタイトル スタイルを改修して視認性を向上する
2019.03.28
スタイルを改修して視認性を向上する
2019.04.02
.qblog-item グリッド表示時の見直し
.qblog-item h3.qblog_titleだけだとmain.cssでオーバーライドされるので.haik-palette色毎に設定
2019.05.02
qblogグリッド表示時のタイトル表示をnagamira_css6でのthumnails大改修に伴い調整
.qblog_titleの排他領域の調整
わかりにくかったheight:の高さをemから絶対値のpxへ変更
2019.05.04
条件セレクタを使った記述に切り替えた
31行が1行に統合された
2019.05.11
row子要素の高さをそろえるflexboxをnagamira_css1に設置したので.qblog-item  h3.qblog_titleのheight指定をコメント化、100%にする
ただし、768px未満は対応が十分ではないため高さを固定する
2019/11/28
Qブログタイトルで見出し3の疑似要素にある枠装飾を消すようにする
　見出し2（h3）の属性が共用になっているため、消す必要がある。
2019/12/07
Qブログタイトルで見出し2（h3）の文字影を消す。
　見出し2（h3）の属性が共用になっているため、消す必要がある。
2019/12/29
Qブログアイテムのタイトルの背景を白に、角丸めを0にする
どうもこの辺りの処理がセクション内で重くなっている模様
2020/01/13
Qブログアイテムの互換性を廃止したのでフォントサイズ等の!important指定を解除
HTMLやPHP7.1から7.3での埋め込み指定がない事を確認して解除
font-weight: 700!important;
font-size: 20px!important;
2020/07/11
ブログサムネイルの大きさを調整
高さをブログタイトルに連動して自動にする
===============*/

.qblog_title {
	padding: 0.2em;
}
/* 
2019/11/28
Qブログタイトルで見出し3の疑似要素にある枠装飾を消すようにする
（吹き出しなどを消す）
*/

.qblog-item h3.qblog_title::before, .qblog-item h3.qblog_title::after {
	display: none;
}
/*
768px未満はサムネイルとしての高さを固定する
2020/01/15
ブログサムネイルの見出しをパレット指定の優先を打ち消してスタイルを修正するため[class^="haik-palette-"] を追加する
2020/07/11
ブログサムネイルの見出しの背景色を透明にする
2021/01/29
2Kに対応、1700px、2000pxの文字の大きさを追加。デザインは随時見直し
ナビ、ブログサムネイルの文字の大きさは2000px,2500pxで対応
*/

[class^="haik-palette-"] .qblog-item h3.qblog_title {
	border-style: none;
	font-size: 18px;
	font-weight: 700;
	color: #333;
	background-color: transparent;
	padding: 2px;
	margin: 0;
	line-height: 1.7em;
	width: fit-content;
	box-sizing: content-box;
	overflow-y: hidden;
	text-shadow: none;
	border-radius: 0px;
	height: 100%;
}
@media (min-width: 360px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 20px;
	}
}
@media (min-width: 568px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 20px;
	}
}
@media (min-width: 768px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 26px;
	}
}
@media (min-width: 2000px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 28px;
	}
}
@media (min-width: 2500px) {
	[class^="haik-palette-"] .qblog-item h3.qblog_title {
		font-size: 30px;
	}
}


/* ===============
2019.05.03
.haik-footer でブログタイトルを表示する時、文字を白色に変える。
2019.05.04
条件セレクタを使った記述で記述行数を減らす事に成功
従来は31色分を記述していたが、条件セレクタで30行減った
2019/12/07
.haik-footer でブログタイトルを表示する時、背景を透明にする
===============*/

.haik-footer .qblog-item h3.qblog_title {
	color: white;
	background-color: transparent;
}
/* ===============
2019.03.28
qblogグリッド表示時の画像 スタイルを改修して視認性を向上する
パレット色毎に設定が必要
サムネイル画像の属性と別にしているのはサムネイルと同じだとレイアウト崩れが起こるため
2019.04.02
.qblog-item グリッド表示時の見直し
.qblog-item h3.qblog_titleだけだとmain.cssでオーバーライドされるので.haik-palette色毎に設定
2019.04.30
qblogグリッド表示時の画像高さを調整
2019.05.04
条件セレクタを使った記述で記述行数を減らす事に成功
2019/09/22
Qブログアイテム枠内サムネイル画像を余白なしで表示する
余白がない方が視覚的にもよい。
画像の下にマージン0.5emを付ける。
これによって見出しが一段と読みやすくなった。
2019/12/27
ブログサムネイル画像の高さをimgの高さをメイン画面のサムネイルと一緒にする
2020/01/09
ブログサムネイル画像の属性に.haik-footerと.haik-containerを宣言する
qblog.cssのスタイルシートと混同してレイアウト崩れを出さないため。
2020/01/17
ブログのサムネイル画像の高さを4：3に近づくよう調整。
.haik-container と.haik-footer に対して行う
2020/01/17
ブログのサムネイル画像の高さ667px時の画像高さを170pxに調整
.haik-container と.haik-footer に対して行う
2020/07/14
ブログのサムネイル画像の高さ667px時の画像高さ指定を廃止

【注意　画像の高さの修正を行う場合】
nagamira_css6h.css内にある
.haik-container .thumbnail img 
の画像の高さも修正すること
===============*/

.haik-footer .qblog-item .qblog_thumbnail_box,
.haik-container .qblog-item .qblog_thumbnail_box {
	position: relative;
	height: 150px;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 0.5em;
	background-size: cover;
	background-position: 50% 50%;
	transform: scale(1.05);
}
@media (min-width: 360px) {
	.haik-footer .qblog-item .qblog_thumbnail_box,
	.haik-container.qblog-item .qblog_thumbnail_box {
		height: 100px;
	}
}
@media (min-width: 568px) {
	.haik-footer .qblog-item .qblog_thumbnail_box,
	.haik-container .qblog-item .qblog_thumbnail_box {
		height: 150px;
	}
}
/*
@media (min-width: 667px) {
	.haik-footer .qblog-item .qblog_thumbnail_box,
	.haik-container .qblog-item .qblog_thumbnail_box {
		height: 170px;
	}
}
*/
@media (min-width: 768px) {
	.haik-footer .qblog-item .qblog_thumbnail_box,
	.haik-container .qblog-item .qblog_thumbnail_box {
		height: 160px;
	}
}
@media (min-width: 992px) {
	.haik-footer .qblog-item .qblog_thumbnail_box,
	.haik-container .qblog-item .qblog_thumbnail_box {
		height: 150px;
	}
}
@media (min-width: 1200px) {
	.haik-footer .qblog-item .qblog_thumbnail_box,
	.haik-container .qblog-item .qblog_thumbnail_box {
		height: 200px;
	}
}
/* ===============
2019.05.04
ブログリスト（リスト形式用）
haik-menu 用 .qblog_thumbnail_box 表示時の画像の高さなど調整
コンテナのサムネイル画像とは構造が異なるので共用できない。
===============*/

.haik-menu .qblog-item .qblog_thumbnail_box {
	position: relative;
	height: 120px;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	background-size: cover;
	background-position: 50% 50%;
}
@media (min-width: 568px) {
	.haik-menu .qblog-item .qblog_thumbnail_box {
		height: 128px;
	}
}
@media (min-width: 768px) {
	.haik-menu .qblog-item .qblog_thumbnail_box {
		height: 130px;
	}
}
@media (min-width: 992px) {
	.haik-menu .qblog-item .qblog_thumbnail_box {
		height: 144px;
	}
}
@media (min-width: 1200px) {
	.haik-menu .qblog-item .qblog_thumbnail_box {
		height: 140px;
	}
}
/*======================
2019.04.03
Qブログリストの枠線の色指定
アイテムだけ指定して、後はパレット毎に色を指定する
基本として背景色ブロックがあればそれを指定
色が強くて見づらいのでグレーのみとする
2019.04.04
Qブログリストの枠線の色追加
2019.05.05
条件セレクタで冗長性を廃止
2019/09/22
Qブログリストの枠線上左右角丸めを0pxにする
画像を枠余白なしで表示できる方法がわかったため
2019/12/28
Qブログリストのサムネイルボックスシャドウを廃止、枠線を濃く。
処理が重いから
2019/12/28
Qブログリストのサムネイルボックス枠線を太くする
2020/07/21
Qブログリストのサムネイルボックスのクラス指示を明確にする
======================*/

.thumbnail.qblog-item {
	position: relative;
	border-style: none;
	text-align: left;
	border: #e5e5e5 solid 2px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
/*=======
2019/09/20
Qブログ画面の冒頭タイトルと一緒に出る見だしのマージン上を小さくする。
Qブログ画面の冒頭タイトル（この記事を編集するボタン、記事の追加ボタン、カテゴリボタン）
と一緒に出る見だし（1,2,3）のマージン上を小さくする。
そのままだと大きく出てしまうため。

=======*/

div.col-sm-9.haik-xs-nopadding>main>.title+h2:nth-child(3) {
	margin-top: 0.8em;
}
/*=======
2019/10/04
Qブログ画面の768px以上のプレビュー画面で「編集」のボタン位置が崩れるのを修正
=======*/

@media (min-width: 768px) {
	.col-sm-offset-2 {
		margin-left: 0%;
	}
}
/*=======
2019/10/04
通常画面編集、Qブログの編集、プレビュー画面編集時のタイトルの書体サイズが小さいので修正
埋め込みスタイルなので!importantで書体を大きくしている
!importantは本来なら使うべきではないことは承知している

2019/10/04
h2.titleでいいのか、用心のため適用されるクラスを控えておく
h2.title,
#preview_body + h2.title,
div.qblog_edit_form > h2.title,
div.qblog_edit_form.well > h2
2019/10/08
ブログ編集時タイトル見出し（h2.title）書体大きさ調整　

=======*/

h2.title {
	font-size: 18px !important;
}
@media (min-width: 768px) {
	h2.title {
		font-size: 20px !important;
	}
}
@media (min-width: 992px) {
	h2.title {
		font-size: 22px !important;
	}
}
@media (min-width: 1200px) {
	h2.title {
		font-size: 24px !important;
	}
}
/*
2019/10/08
テキストボックスのテキストエリアの文字を大きくする
スクロール方法も改修
ここも埋め込みスタイルシートを使っているので!importantを使っている
*/

/*
textarea {
    font-size: 18px !important;
    line-height:1.8em;
    white-space: nowrap;
    overflow: auto;
}
@media (min-width: 768px) {
    textarea {
        font-size: 20px !important;
    }
}
@media (min-width: 992px) {
    textarea {
        font-size: 22px !important;
    }
}
@media (min-width: 1200px) {
    textarea {
        font-size: 24px !important;
    }
}
*/

/* ===================
2019/12/30
ブログのコメントフォームと見出し「コメント」の間のマージンを-4em減らす
2021/09/07
ブログのコメントフォームと見出し「コメント」の間のマージンを-2emに修正
=================== */

#qblog_comment_form {
	margin-top: -2em;
}
/* ======
2020/01/13
qform.inc【改修あり】.phpにおいてメールフォームの入力「必須」のテキストクラスをカスタマイズ
もしこのクラスがなくても赤文字で「必須」と出る。
2020/01/15
クラスtext-dangerの上下排他領域0.1emを追加
====== */

.form-group .text-danger {
	background-color: #db6868;
	color: white !important;
	padding: 0.1em 0.1em;
}
/* ======
コピー防止確認用ダミー
====== */

.nagamira-default.col-sma-9>main>.title+h2:nth-child(3) {
	margin-top: 0.8em;
}