/*================
* 
* 2021/09/04　iphone8対応試作A　 
* 2021/09/02　iphone8対応試作　 
* 2021/07/01
* nagamira_css8h.css 高速化互換性なし版

* パレットカラーを変える場合
* このnagamira_css8.cssとnagamira_css10.css
* に色設定を集約しているのでこれを改修する事
* 
* 著作権 長岡京健康みらい研究所
* 【重要】番号順、必ずnagamira_css2,3,4の後に読み込むこと
* 2021/07/01
* W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認
 * 2021/07/05
 【注意 圧縮ツール】
https://csscompressor.net/ja/
で「Compress colors」をオフにして圧縮すること。
コメントの付け方によっては圧縮後のソースに文法エラーが現れる場合があるので圧縮率は【高い】で圧縮する。さらに圧縮したい場合は文法チェッカーにかけて、問題がなければ【最高】で圧縮すること。 * 
* 
* ナビおよびドロップメニュー各部分の配色設定、見出し1～3の装飾
* 
* サイズ調整
* 8色で対応。
* .haik-palette-cyan 
* .haik-palette-green
* .haik-palette-brown
* .haik-palette-red
* .haik-palette-purple
* .haik-palette-blue
* .haik-palette-gray
* .haik-palette-orange
* 
* メンテナンス性を上げるため見出しや文字色など共通する所は[class^="haik-palette-"]のセレクタで対応する事
* ナビのブランド名の色修正
* ブランド名の色は背景が白の場合、のコントラスト比が7以上になるようにするとよい。 * やや地味だが読める。
背景がオレンジで文字が読みにくい場合は文字を黒にすること
* 2019/04/06
* なおマウスオーバー時の色は輝度を上げてコントラスト比が３程度でよい。
* 短時間なのでこの程度でもよい。
2019.05.06
条件セレクタで冗長性を廃止
2019.05.10
ドロップダウンメニュー基本設定
2019.05.17
バラバラに記述されていたテーマ毎のスタイルをnagamira_css8.css（このファイル）に統合
2019.05.26
ナビの下線のafter疑似要素で正常に動いていなかった所を修正
2019.05.28
ナビメニューの.haik-palette-の共通設定
2019.05.29
メニュー内のformの背景色を上位継承する
2019.03.29
ナビゲーションバーのブランド名のクラス設定を調整するカスタマイズ用クラス
2019.08.18
ナビゲーションバーの塗りつぶし版
.haik-palette-blueから対応開始
2019.08.30
コメントの修正
2019.09.02
ナビの下線の三角形でマウスオーバー時の記述もれがあったので全8色とも修正
2019.09.03
モバイルメニューの文字色を黒く調整
2019.09.03
モバイルメニューでの文字あふれを折り返すように調整
2019.09.04
正常に動いていなかったところに
[class^=".haik-palette-"]と記述してしまっている所があった。
条件セレクタでクラス名を表す記述であればピリオドはいらないことに注意。
2019.09.04
メニュー用共通 カスタマイズ
2019.09.04
メニュー用右アイコン設置
画像をやめて文字として使えるGLYPHICONSアイコンにした
マウスオーバー時に色を変える処置を追加してUIを改善
2019.09.04
メニュー用右アイコン設置で重複して記述されている分の三角を消す
2019.09.05
ナビアクティブ時のナビはマウス反応を無効にする
2019.09.05
メニュー内の見出しに三角形などアイコンがあれば消す
2019.09.05
メニュー・親子メニューでアクティブ時マウスイベントをオフにする
2019.09.05
スマホ時のメニュー内での文字配置を真ん中にする
2019.09.06
メニュー・親子メニューでアクティブ時の文字色をパレット毎に変える意味がないので「メニュー・親子メニューでアクティブ時マウスイベントをオフにする」に統合する
2019.09.07
重複して記述していた分、
haik-palette-blueが抜けていた所の修正
haik-palette-の順番を統一
2019.09.07
ナビ枠線の整理
ナビとメニューの並べ方を整理
2019.09.09
パレットの並びをカスタマイズメニューに合わせて並べ替えた
2019.09.09
ナビのドロップダウンメニュー
2019/09/09
見出し1文字色の統一スタイルシート改修
2019/09/10
ドロップダウンメニューの下向き三角印（キャレット）
1サイズだったのをメディアクエリ毎に拡大してわかるようにした
2019/09/10
他テーマでの移植作業が軽減できるように枠線などを統合
2019/09/10
スマホ時のナビ、親メニューオープンマウスオーバー時と子メニューアクティブ時共通設定
2019/09/10
tentテーマの意味不明なキャレットを消す
2019/09/10
ナビの子メニュー要素はデフォルト背景色をグレーにする
2019/09/11
メニュー内のアコーディオンパネルの枠線を統合する
2019/09/11
ナビマウスオーバー時　下線の三角撤去
2019/09/11
ナビマウスオーバー時のナビ下線デフォルト記述追加
2019/09/11
ナビマウスオーバー時のナビ下線3px→4pxへ
2019/09/11
ナビマウスアクティブ時の文字色復活
2019/09/11
ナビの子メニュー要素はデフォルト枠線を濃いグレーにする
2019/09/11
ナビアクティブ時のデフォルト文字色とナビ下線をグレーにする
2019/09/11
子メニュー要素マウスオーバー時デフォルト色追加
2019/09/12
見出し1のボーダー線を消してデフォルト属性を用意する
2019/09/13
見出し2のボーダー線デフォルト属性を用意する
2019/09/13
各色のナビアクティブ時のナビ下線でborder-color:色を指定する実装
これによってメンテナンスおよび今後の拡張がとても楽になる
2019/09/13
メニュー見出し1横ボーダー線デフォルト属性を用意する
2019/09/13
メニューの見出しの書体を統一
  768px以上はコンテナ（メイン）の見出し1,2,3より小さい
  767px未満はコンテナ（メイン）の見出し1,2,3と同じ大きさ
2019/09/14
「メニュー見出し3のアイコンを削除」予備コメント化
2019/09/14
見出し1のボーダー線に角の丸めも付ける
メニュー見出し1のボーダー線に角の丸めも付ける
（上記2つはカスタマイズ項目とする）
2019/09/21
メニュー用共通 背景をグレーに指定
2019/09/22
ナビアクティブ時のナビ下線、視認性改善のため下から3px上げる
2019/09/22
ナビアクティブ時のナビ下線のアニメーション導入
2019/09/22
ナビバーブランド名のマウス反応時の処置、スマホ時の色変更を調整
2019/09/22
@media (min-width: 768px)のカッコ閉じ忘れで見出し表示に支障が出ていた
2019/09/22
スマホ時のアクティブ時反応を改修時、重複して記述したため、予備コメント化
　カッコ閉じ忘れを直したら不要になった
2019/09/22
スマホ時メニュー操作時の色指定　基本的にPC版と合わせる
デフォルト色を設定後、テーマ色を（8色）全部割り当てる
2019/09/23
ナビのドロップダウンメニュー設定下左右角を丸める
2019/09/23
ナビのメニュー要素基本設定　ナビのメニュー要素設定上左右角を丸める
2019/09/23
ナビの767px以下（スマホ時）の対応の不要な記述を整理
2019/09/23
各パレットの「ナビ下線の三角」のボーダー色指定など予備コメント化していたのを削除
2019/09/23
スマホ時のナビ、親メニューオープンマウスオーバー時と子メニューアクティブ時太さを5pxに修正して視認性を上げる
2019/09/23
ナビアクティブ時で767px以下（モバイル時）はアクティブ状態を表す
2019/09/23
スマホ時、PC時のメニューの色指定、形状を可能な限り統合化していく
重複する処理の記述を減らして統合する
これによってメンテナンスを楽にする
2019/09/23
ドロップダウンメニューの下向き三角印（キャレット）を大きくする
2019/09/23
オレンジ色のナビアクティブ：スマホ時の文字色を黒色になるように調整
2019/09/23
オレンジのナビアクティブ時のドロップダウンメニュー反応ナビアクティブ時の文字を黒くする
2019/09/24
ナビのメニュー要素アクティブ時は背景色を変える
　・PC時　上左右角を丸める
　・モバイル時　下左右角も丸める
2019/09/24
「アクティブ状態を表す」のナビのメニュー要素アクティブ時のPC時とモバイル時の背景色指定を統合した
2019/09/24
「アクティブ状態を表す」のナビ要素角の丸めを8pxから10pxへ。これ以上の数値だと上の四角の角がでてしまう
2019/09/24
「アクティブ状態を表す」のメニュー要素アクティブ時の下線を0pxにする
2019/09/24
ナビバーのブランド名に関連するスタイルシートをnagamira_css10.cssへ移動
2019/09/24
ナビ要素の文字色を#575757から#373737へ統一
ナビヘッダに色がつくようになったので色負けしないための措置
2019/09/26
621行文法解析エラーが発生しました [:]
a要素の後ろに[:]が入っていた
2019/09/30
テーマ「moi」等におけるメニューのサブメニュー冒頭に出るキャレット画像を消す
2019/10/01
ナビ背景が透明になると文字が見づらいので親要素文字に縁取りをいれる
2019/10/01
ナビ親要素テキスト縁取りに伴い親メニューオープンマウスオーバー時の縁取りを消す
2019/10/06
見出し2の枠装飾に疑似要素でリボンをつけてみた。

qblog_titleで見出し2の装飾で使っている疑似要素の装飾が誤って出ないようにbefore、afterともに消す
主にブログリストでも見出し2のタグh2が使われているため。
2019/10/06
見出し2の枠右上右下の角の丸めをつける
2019/10/07
.haik-container h2でinline-blockを入れるとレイアウト崩れが起こるのでinline-blockを止めてみる
2019/10/07
見出し1枠下の飾り：左折れリボン
　　見た目のインパクトが弱いので下向き吹き出しに置き換えて予備コメント化
2019/10/08
見出し1枠下の飾り：下向き吹き出し
見出し2の装飾に疑似要素で下向き三角形をつけた。
見出し1枠下の飾り：左折れリボンを置き換えた
2019/10/08
見出し1枠太さを吹き出し枠線の可変サイズに合うよう0.1emから0.15emに微調整
2019/10/11
ナビのメニュー要素上左右角を丸める10px→6pxへ
角丸めが大きすぎて印象が悪かったのが改善された
2019/10/11
ナビのドロップダウンメニュー設定下左右角を丸める10px→6pxへ
2019/10/12
見出し1枠線色の指定の追加
2019/10/18
ナビマウスオーバー時のナビ下線、下ボーダー線が誤って引かれるのでこれを修正
2019/11/01
見出し1枠線内側の塗りつぶしを追加。
見出し1枠線下向き吹き出し内側の塗りつぶしも追加。
2019/11/01
見出しの装飾のオレンジを修正して彩度を上げた。
前はくすんだ感じだったのがよくなった。
2019/11/01
見出しの装飾の枠線が見えるのをやめてテーマカラーを薄くした色だけにしてみる。
枠線の記述はそのままななのでカスタマイズも可能。
2019/11/07
見出し1の背景色をもう少し濃く調整
2019/11/18
グラデーション版では見出し1では1色のみで色を使わない方がよいが、希望に応じてカスタマイズできるようにする
2019/11/28
見出し2の文字色を白抜きに変える
nagamira_css8_11_見出し1グラデーション枠見出し2吹き出し版専用仕様
2019/11/28
見出し2の左マージンを0にして、枠のズレを修正
2019/11/30
ヘッダ、見出し2の色調整
とくに青、緑、シアン、赤色、紫はヘッダと見出しの色調がバラバラだったのを統一
オレンジの見出し2は全面的に明るい目にして文字を黒にした
2019/12/01
ナビのスマートフォン表示時の下線を白色に統一。
2019/12/02
色指定がない場合の背景色グレー#999を追加
2019/12/02
下向き吹き出し三角形の背景色に白を追加。
テーマによっては別の背景色が入っている事があるため。　
見出し2帯装飾枠線の太さを0に設定
2019/12/02
見出し2装飾の帯枠線の太さを0pxへ。位置トップcalc(100% + 5px);を0pxに調整
三角形の大きさを目分量で0.2em減らす
2019/12/02
下向き吹き出しの三角形の内側装飾を予備コメント化
2019/12/02
下向き吹き出しの三角形の内側装飾を予備コメント化に伴い、「下向き吹き出しの三角形の内側の色を変える」はコメント化
2019/12/03
ナビ文字縁取りがくっきりした版を使う
2019/12/04
ナビをグラデーション化
ナビメニューをグラデーション化
ナビドロップダウンメニューはそのまま単色で（メンテナンス性を考慮して）
2019/12/06
メインの見出し1（ｈ2）のclear:both;がブログ概要表示で折り返すようになっていたので削除する
（回り込みを解除する意味がスタイルをクリアするの勘違いをしていた）
2019/12/06
見出し2の文字に影をつける事でメリハリをつける
（背景の帯装飾が白だと文字が見えないので必要になった）
2019/12/20
ナビのアクティブ時の要素の全角の丸めを6px→0pxへ
2019/12/20
見出し2帯下向き吹き出し三角形のmargin-left: 0px;テスト用の消し忘れ。消す
2019/12/23
目次のアイコンをfont-family: FontAwesome;に変更
2019/12/23
メニューのアイコンをfont-family: FontAwesome;に変更
2019/12/23
テーマ「BIO」等におけるメニューのサブメニュー冒頭に出るキャレットを消す
2019/12/26
モバイル時のドロップダウンメニューのオレンジのグラデーション調整。黄色でメリハリをつける。
2019/12/26
モバイル時のドロップダウンメニューのオレンジのマウスオーバー時のテキストを白縁取りにする
2019/12/27
メニューに出る画像arrow.png の使用を廃止。既に線を使うようになっているので。
2019/12/27
ナビドロップダウンメニュー要素767px以下、下線を廃止して白色透明をふわっと点灯する。
下線が出ると動きがカクカクするため
2019/12/28
サイドメニュー　リストの.list1 .list2入れ子を追加

2019/12/28
ナビのドロップダウンメニュー設定　アニメーションを修正
2019/12/28
fade-in　アニメーションを調整
移植
2019/12/28
見出し3のテキストシャドウのブラー効果を0にする。
2019/12/28
メインの見出し1（ｈ2）のボックスシャドウを廃止する。
2019/12/28
メインメニュー・ブログメニュー用見出し1装飾、ボックスシャドウ廃止
2019/12/30
見出し1枠下の飾りで使っていたurl(none)はエラーになるので削除する。
2019/12/30
メインメニュー・ブログメニュー用見出し1で使っていたurl(none);はエラーになるので廃止
2019/12/30
箇条書き要素のマージンを増加修正したのに伴い、ナビドロップダウンメニュー要素のマージンを修正する
2019/12/30
ナビアクティブ時のナビ下線のアニメーションのナビ下線を5pxから４pxへ細くする
書体によっては下線にくっついている事があるため
2019/12/30
メニュー見出し同士の上罫線、見出し装飾があるので線は出さなくても大丈夫
2020/01/01
ナビアクティブ時のドロップダウンメニュー反応で[class^="haik-palette-"] を復活
二箇所対応
2020/01/04
メインの見出し1（ｈ2）のボーダー記述の修正（メンテナンス性改善）
2020/01/04
メニューの見出し1（ｈ2）のボーダー記述の修正（メンテナンス性改善）
2020/01/04
従来テーマとの互換性の廃止に伴い不要になった記述の廃止
2020/01/07
見出し3のテキストシャドウの太さを全て1.75ピクセルにする。
2020/01/07
見出し3のテキストシャドウの太さを全て1ピクセルにする。
2020/01/19
見出し2枠下の飾り：下向き吹き出し
下向き吹き出し三角形の位置トップを100に修正。
top: calc(100% + 1px);
ブラウザEDGEでは1ピクセル空いて表示されるため。
2020/07/11
メインの見出し1（ｈ2）がグラデーションで見づらいのでグラデーション効果を改める
メニューも併せて調整する
2020/07/11
メニューの見出し1（ｈ2）がグラデーションで見づらいのでグラデーション効果を改める
2020/07/13
メインの見出し1（ｈ2）まだ見づらいのでグラデーション効果を回転してみる
2020/07/15
.alert、panel書式の修正、行高さの調整
修正、順番が後の方でないと面倒なのでnagamira_css2h.cssから引っ越し
2020/07/17
ナビアクティブ時のナビ下線のアニメーション速度を早くする
2020/07/20
メニュー内のformの排他余白を修正
2020/07/20
メニューの見出し1（ｈ2）のwidth: 100%;を廃止
2020/07/20
メインの見出し1（ｈ2）width: 100%;を廃止
2020/07/20
メインの見出し2（ｈ3） width: 100%; を廃止
100％固定だと画面の左右マージンの値の減少で位置がずれたりするため
2020/07/22
パネルの最初にくる見出し1の書式クリア
2020/07/22
見出しつきパネル上下見出し部分のh2,h3,h4マージンを0に
2020/07/25
見出し2下向き吹き出し三角形の背景色を透明にする
これで背景色が使えるようになる
2020/08/01
編集画面の見出し.haik-content .title、.qblog_edit_form .titleのスタイルを修正する
2020/08/05
「.haik-palette-blue .haik-container h3」と書いていたのを廃止。
これをすると複雑になる課題があった。前の互換性を重視していたテーマの名残。
「.haik-palette-blue .haik-container h3::before」で書いている
吹き出しも併せて修正
2020/08/05
モバイル時ドロップダウンメニュー上の線を試験用に引いていたがコメントアウト
2020/08/05
アラートボックスの見出しの書式が重複してゴチャゴチャしていた設定の整理。
わかりやすくなった
2020/08/13
見出しの書式クリアの文字色を「親から継承する」に修正
2020/08/22
アラートボックスも含めたパネルの書式の見直し
その結果、アラートボックスの見出し1～3の文字色が継承できるようになった。
デザイン的に整合性ができるようになった。
2020/08/30
セクション内のアラート枠、パネル枠のマージンを調整、モバイル画面時の余白を減らす
2020/09/03
新規クラス更新日追加
2020/09/03
h2タイトルの後ろに記述したら自動的に書式を整えるように修正してみた
2020/09/21
ナビバーのメニュー文字の縁取りをコメント化して縁取りを外せるようにした
.navbar-default .navbar-nav>li>a
縁取りが必要な場合にコメントにする
2020/09/22
haik-palette-orange の色を修正
2020/09/25
オレンジ色のナビアクティブ：スマホ時の文字を白縁取りになるよう調整
2020/09/26
ナビのマウスオーバー時の文字色を黒色に統一
人によっては文字色が変わると一瞬見失う場合がある事に気づいた。
2021/07/01
1614行のグラデーションの文法エラー修正
2021/09/02
【試作中】モバイル時の左右余白を減らして読みやすくする
2021/09/04
iphone対応のためalert枠のマージン字下げの調整と追加
2021/09/04
パネル内での見出し、段落の字下げ調整の追加


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

/*
メニュー内のformの背景色を上位継承する
2020/07/20
メニュー内のformの排他余白を修正
*/

.haik-menu form, .haik-article-menu form {
	background-color: inherit;
	padding: 1em 0.5em;
}
/* ======================
2019.05.10
ドロップダウンメニュー基本設定
ベンダーフレックスを削除して見やすくする
2019/09/23
ナビのドロップダウンメニュー設定下左右角を丸める
2019/09/24
ナビのドロップダウンメニュー設定下左右角を丸める6px→8pxへ
2019/10/11
ナビのドロップダウンメニュー設定下左右角を丸める10px→6pxへ
2019/12/26
ナビのドロップダウンメニュー設定。アニメーションを調整
2020/07/04
コメントの古い部分の修正のみ。ソースは修正していない。
2020/07/04
見出し3の装飾を予備として追加。ソースは修正していない。

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

.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 100px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	font-size: 18px;
	text-align: left;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 7px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
	background-clip: padding-box;
}
/*======================
2019/12/28
ナビのドロップダウンメニュー設定　アニメーションを修正
    filter: alpha(opacity=100);
    animation-duration: .5s;
    transition-timing-function: ease-in-out;
    animation-name: fade-in;

main.cssの@keyframes fade-inは不要
======================*/

.haik-nav .open .dropdown-menu {
	opacity: 1;
	padding-top: 0px;
	animation-duration: 0.1s;
}
/* ======================
2019.05.28
ナビメニューの.haik-palette-の共通設定
2019.09.03
モバイル時のメニュー文字を折り返すように調整
2019/09/24
ナビ要素の文字色を#575757から#373737へ統一
ナビヘッダに色がつくようになったので色負けしないための措置
2019/12/30
箇条書き要素のマージンを増加修正したのに伴い、ナビドロップダウンメニュー要素のマージンを修正する
====================== */

/*　モバイル時 white-space: pre-wrap;で折り返す */

/* テーマmoiのような意味不明な下線を消す */

.dropdown-menu>li {
	border-bottom: 0;
	margin: 0;
}
.dropdown-menu>li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 700;
	line-height: 2em;
	color: #373737;
	white-space: pre-wrap;
	vertical-align: middle;
}
/*　white-space: nowrap;で折り返さなくなる */

@media (min-width: 768px) {
	.dropdown-menu>li>a {
		white-space: nowrap;
	}
}
/* ======================
2019.03.29
ナビゲーションバーのブランド名のクラス設定を調整するカスタマイズ用クラス
。本体はnagamira_css1にある
支障がない時はコメントにする
2019/12/27
メニューに出る画像arrow.png の使用を廃止。既に線を使うようになっているので。
==================================*/

/*
.navbar-brand,
[class^=".haik-palette-"] .navbar-brand {
    padding: 16px 10px;
    font-size: 18px;
    font-weight: 700;
    height: 50px;
}
*/

.haik-menu .list1>.list-group-item>a:after, .haik-article-menu .list1>.list-group-item>a:after {
	content: '';
	position: absolute;
	background-image: none;
	background-size: 8px 8px;
	width: 8px;
	height: 8px;
	right: 0;
	top: 50%;
	margin-top: -4px
}
/* ======================
2019.09.07
ナビの枠線
テーマ毎ではなくセレクタを使って統合する方針で
=========================*/

.navbar-default .navbar-nav>li {
	border: none;
}
/*
メニュー見出し1+見出し2
メニュー見出し1+見出し3
メニュー見出し1+見出し4
上に線を引く
2019/12/30
メニュー見出し同士の上罫線、見出し装飾があるので線は出さなくても大丈夫
*/

/*
.haik-menu h2 + h3,
.haik-article-menu h2 + h3,
.haik-menu h2 + h4,
.haik-article-menu h2 + h4 {
    border-top: 1px solid #e9e9e9;
}
*/

/*
モバイル時の要素はそれぞれで線を引くようになっているが、ここでは消している
2020/08/05
モバイル時ドロップダウンメニュー上の線を試験用に引いていたがコメントアウト
*/

@media(max-width:767px) {
	.navbar-default .navbar-nav>li {
		/* border-top: 1px solid #e9e9e9; */
		border-left: none;
	}
	.navbar-default .navbar-nav>li:first-child {
		border-top: none;
	}
}
/* ======================
2019/09/23
ナビのメニュー要素基本設定
ナビのメニュー要素上左右角を丸める
2019/09/24
ナビのメニュー要素上左右角を丸める6px→8pxへ
2019/10/11
ナビのメニュー要素上左右角を丸める10px→6pxへ
角丸めが大きすぎてバランスが悪い
====================== */

.navbar-nav>.open>a, .navbar-nav>.open>a:hover, .navbar-nav>.open>a:focus {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
/* ======================
2019.09.23
ナビのメニュー要素デフォルト設定
2019/09/24
ナビ要素の文字色を#575757から#373737へ統一
ナビヘッダに色がつくようになったので色負けしないための措置
====================== */

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
	background-color: #999;
	color: #373737;
}
/* 
メニュー要素の最後は元のスタイルシートでは右枠線を引くようになっているが、ここでは消している
*/

.navbar-default .navbar-nav>li:last-child {
	/* border-right: 1px solid #e9e9e9 */
	border-right: none;
}
/* ======================
2019/09/10
子メニュー要素を書く
2019/09/11
子メニュー要素マウスオーバー時デフォルト色追加
=========================*/

.navbar-nav .open .dropdown-menu>li>a {
	padding: 5px 20px;
	color: #fff;
}
/* 子メニュー要素マウスオーバー時デフォルト色 */

.navbar-nav .open .dropdown-menu>li>a:hover {
	color: #fff;
	background-color: rgba(255, 255, 255, .3);
}
/* ======================
ナビマウスオーバー時　下線の三角 
2019/09/11
ナビマウスオーバー時　下線の三角撤去

親と子要素の区別が曖昧
現在はわざわざ下線の三角を付けるメリットが少ない
今後アニメーション効果を取り入れる際に疑似要素が面倒
display:none;で出さないようにする
各パレットの「ナビ下線の三角」のボーダー色指定など予備コメント化する
（三角を描く記述）
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 6px;
    border-color: transparent transparent #ccc;
    left: 50%;
    bottom: 0;
    margin-left: -4px;
2019/09/23
各パレットの「ナビ下線の三角」のボーダー色指定など予備コメント化していたのを削除

ナビ下線の三角を使う場合は以下のスタイルシートを元に色毎に設定する
[パレット名] .navbar-default .navbar-nav > li > a:hover:after,
[パレット名] .navbar-default .navbar-nav > li.active > a:after,
[パレット名] .navbar-default .navbar-nav > li.active > a:hover:after {
    border-color: transparent transparent #6e7273;
}
[パレット名] 例
.haik-palette-gray

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

.navbar-default .navbar-nav>li>a:hover:after, .navbar-default .navbar-nav>li.active>a:after, .navbar-default .navbar-nav>li.active>a:hover:after {
	display: none;
}
@media(max-width: 767px) {
	.navbar-default .navbar-nav>li>a:hover:after, .navbar-default .navbar-nav>li.active>a:after, .navbar-default .navbar-nav>li.active>a:hover:after {
		display: none;
	}
}
/*======================
2019/09/09
ナビの通常ドロップダウンメニュー
2019/09/10
ナビの子メニュー要素はデフォルト背景色をグレーにする
これによって設定漏れがあっても透明になる事はない見られるものになる
2019/09/11
ナビの子メニュー要素はデフォルト枠線を濃いグレーにする
これで設定のないパレットに対しても汎用性を持たせる事ができる
2019/09/20
メモ：以下はブラウザの自動折り返しバグ対策のためのデータURI読み込み処理
list-style-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
======================*/

.dropdown-menu {
	background-color: #787878;
	border-color: #606060;
	list-style-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
}
/*======================
2019.09.05
ナビアクティブ時のナビはマウス反応を無効にする
文字、ナビ下線は透明にして、「ナビアクティブ時のナビ下線」で
それぞれのパレットで指定する 
ナビアクティブ時のデフォルト文字色とナビ下線
2019/09/11
ナビアクティブ時のデフォルト文字色とナビ下線をグレーにする
色設定が抜けていても汎用性を持たせられる
2019/09/22
ナビアクティブ時のナビ下線、視認性改善のため下から3px上げる
ナビ下線マウスオーバー時アニメーション導入に伴う改修
2019/09/23
ナビアクティブ時で767px以下（モバイル時）はアクティブ状態を表す
ナビ要素が縦に重なるためPC時に出るアクティブ状態を表す下線が軽度のレイアウト崩れを起こしている。
2019/09/24
ナビのメニュー要素アクティブ時は背景色を変える
　・PC時　上左右角を丸める
　・モバイル時　下左右角も丸める
2019/09/24
「アクティブ状態を表す」のナビのメニュー要素アクティブ時のPC時とモバイル時の背景色指定を統合した
これまでバラバラだったが、統合しても支障が無い事がわかったため
2019/09/24
「アクティブ状態を表す」のナビ要素角の丸めを8pxから10pxへ。これ以上の数値だと上の四角の角がでてしまう
2019/09/24
「アクティブ状態を表す」のメニュー要素アクティブ時の下線を0pxにする
削除するとオリジナルの下線が出るので0pxにした
PC時とモバイル時の背景色指定を統合したので統一した方がよいと判断
2019/10/11
ナビのマウスオーバー時、アクティブ時の要素の上左右角の丸めを10px→6pxへ
2019/12/20
ナビのアクティブ時の要素の全角の丸めを6px→0pxへ
従来の上右左の丸めだとナビが折り返した時に不自然に見えるため。
======================*/

.navbar-default .navbar-nav>li.active>a, .navbar-default .navbar-nav>li.active>a:hover {
	color: #999;
	border-bottom: 0px;
	background-color: rgba(255, 255, 255, .8);
	/*白にする時は以下を使う*/
	/*background-color: #fff;*/
	position: relative;
	pointer-events: none;
	border-radius: 0px;
}
/*======================
ナビアクティブ時のドロップダウンメニュー反応
2019/09/22
スマホ時のアクティブ時反応を改修
2019/09/23
スマホ時、PC時のメニューの色指定、形状を可能な限り統合化していく
重複する処理の記述を減らしていく
2020/01/01
ナビアクティブ時のドロップダウンメニュー反応で[class^="haik-palette-"] を復活
======================*/

[class^="haik-palette-"] .navbar-default .navbar-nav .open .dropdown-menu>.active>a, [class^="haik-palette-"] .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover, [class^="haik-palette-"] .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
	color: #ddd;
	background-color: rgba(255, 255, 255, .15);
	border-bottom: none;
	pointer-events: none;
}
/*=============
2019/09/22
スマホ時のアクティブ時反応を改修
2019/09/22
スマホ時のアクティブ時反応を改修時、重複して記述していたが、不要になったので削除
ここでデフォルト色を設定後、テーマ色を（8色）全部割り当てる
2019/12/04
ナビをグラデーション化
ナビメニューをグラデーション化
ナビドロップダウンメニューをグラデーション化
2020/01/01
ナビアクティブ時のドロップダウンメニュー反応で[class^="haik-palette-"] を復活
================ */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	[class^="haik-palette-"] .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
		background-color: #777;
	}
	/* メニュー要素 マウスオーバー時の色（パレット毎に色を指定する） */
	[class^="haik-palette-"] .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
		color: #ffffff;
		background-color: rgba(255, 255, 255, .3);
		transition: .3s ease;
	}
}
/*======================
ナビ要素のナビ下線の準備
透明な線をひいておいて、アクティブ時に色を出す
2019.09.05
スマホ時のメニュー内での文字配置を真ん中にする
メニューのテキスト色と配置（統合化）
2019/09/24
ナビ要素の文字色を#575757から#373737へ統一
ナビヘッダに色がつくようになったので色負けしないための措置
2019/10/01
ナビ背景が透明になると文字が見づらいので親要素文字に縁取りをいれる（スマホ画面では2pt）
3pxの縁取りに設定。透明画面でも文字が見やすくなった。
課題はFAアイコンを使うと文字ではなくSVG画像になるため、縁取りを入れられないこと。
2019/12/03
ナビ文字縁取りがくっきりした版を使う
ぼかした版と用意する
縁取りをぼかした版（意外に処理が重い）
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;
縁取りをくっきりした版（通常はこれを使う）
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/09/21
ナビバーのメニュー文字の縁取りをコメント化して縁取りを外せるようにした
.navbar-default .navbar-nav>li>a
縁取りが必要な場合にコメントにする

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

.navbar-default .navbar-nav>li>a {
	color: #222;
	position: relative;
	text-align: center;
	/* 
	縁取りをくっきりした版（通常はこれを使う）
	必要な場合はコメントにする
	*/
	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;
}

/*============
2019/09/11
ナビマウスオーバー時のナビ下線デフォルト記述追加
2019/09/13
各色のナビアクティブ時のナビ下線でborder-color:色を指定する実装
2019/09/22
ナビ下線アニメーション導入で置き換える
767px以下（スマートフォン解像度）時のみ有効
2019/09/22
マウスオーバー時のナビ下線（ボーダー）を3px→5pxに、色をつける
2019/09/22
@media (min-width: 768px)のカッコ閉じ忘れで見出し表示に支障が出ていた
2019/12/27
ナビドロップダウンメニュー要素767px以下、下線を廃止して白色透明をふわっと点灯する。
下線が出ると動きがカクカクするため
============*/

.navbar-default .navbar-nav>li>a:hover {
	border-bottom: 0px;
	position: relative;
}
@media (max-width: 767px) {
	.navbar-default .navbar-nav>li>a:hover {
		color: #333;
		border-color: #999;
		position: relative;
		text-align: center;
		background: rgba(255, 255, 255, 0.8);
		transition: .3s ease;
	}
}
@media (min-width: 768px) {
	.navbar-default .navbar-nav>li>a:hover {
		border-bottom: 5px transparent;
	}
}
/*============
2019/09/10
ナビアクティブ時のナビ下線のアニメーション研究
2019/09/22
ナビアクティブ時のナビ下線のアニメーション導入

多くの手本ではposition:absolute;（絶対値）指定が抜けている事がある。
position: relative;だと上部に表示されてしまう。
2019/12/30
ナビアクティブ時のナビ下線のアニメーションのナビ下線を5pxから４pxへ細くする
書体によっては下線にくっついている事があるため
2020/07/17
ナビアクティブ時のナビ下線のアニメーション速度を早くする
============*/

@media (min-width: 768px) {
	.navbar-default .navbar-nav>li>a {
		position: relative;
		display: inline-block;
	}
	/*
    【メモ】
    多くの手本ではここでposition:absolute;を指定していない。
    そのためposition: relative;の継承で上に線が引かれてしまう
    ナビアクティブ時のナビ下線のアニメーションで線の色をパレット毎に置き換える
    線ではなく四角形にして、角の丸めをつけている

    */
	.navbar-default .navbar-nav>li>a:before {
		content: '';
		position: absolute;
		width: 0;
		bottom: 3px;
		height: 4px;
		/*線の太さ*/
		background-color: #999;
		/*線の色*/
		border-radius: 2px;
		transition: all .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	}
	.navbar-default .navbar-nav>li>a:hover:before {
		width: 90%;
		transform: scale(1, 1);
	}
}
/*============
2019/09/10　研究
以上ナビ下線のアニメーション
============*/

/* ======================
2019.09.07
サイドメニューの設定
2019/12/28
サイドメニュー　リストの.list1 .list2入れ子を追加
==================================*/

.haik-menu .list1, .haik-article-menu .list1 {
	list-style: none;
	color: #555;
	border: none
}
.haik-menu .list1 .list2, .haik-article-menu .list1 .list2 {
	background-color: transparent;
	list-style: none;
	padding: 0.1em 0em 0.1em 1em;
}
.haik-menu .list1>.list-group-item>a, .haik-article-menu .list1>.list-group-item>a {
	margin-bottom: 0px;
	color: #555;
	display: block;
	position: relative;
	padding-right: 10px;
}
/*
メニュー用共通 カスタマイズ
背景色はデフォルトで透明にしておく
2019/09/21
メニュー用共通 背景をグレーに指定
*/

.haik-menu .list1>.list-group-item:hover, .haik-article-menu .list1>.list-group-item:hover {
	background-color: rgba(119, 119, 119, .1);
}
/*=============
2019/09/11
メニュー用 見出し1，2マウスオーバー時の反応をオフにする
テーマによっては見出し1，2にマウスオーバー時の反応をするものがある。
=============*/

.haik-menu h2:hover, .haik-article-menu h2:hover, .haik-menu h2.focus, .haik-article-menu h2.focus {
	background-color: transparent;
}
.haik-menu h3:hover, .haik-article-menu h3:hover, .haik-menu h3.focus, .haik-article-menu h3.focus {
	background-color: transparent;
}
/*
2019.09.04
メニュー用右アイコン設置
画像をやめて文字として使えるGLYPHICONSアイコンにした
マウスオーバー時に色を変える処置を追加してUIを改善
*/

/* 
2019.09.04
メニュー用右アイコン設置で重複して記述されている分の三角を消す
*/

.haik-menu .list1 .list2>li a:after, .haik-article-menu .list1 .list2>li a:after, .haik-menu .list2 a:after, .haik-article-menu .list2 a:after {
	background-image: none;
	content: '';
}
/*　メニュー1段目 　右向き大なり小記号「>」　*/

.haik-menu .list1>.list-group-item>a:after, .haik-article-menu .list1>.list-group-item>a:after {
	position: absolute;
	font-family: FontAwesome;
	content: '\f054';
	color: #bcbcbc;
	font-size: 14px;
	right: -5px;
	top: 50%;
	margin-top: -14px;
}
.haik-menu .list1>.list-group-item>a:hover::after, .haik-article-menu .list1>.list-group-item>a:hover::after {
	color: #0054d6;
}
/*　メニュー2段目 右向き三角「▶」　*/

.haik-menu .list1 .list2>li a:after, .haik-article-menu .list1 .list2>li a:after {
	position: absolute;
	font-family: FontAwesome;
	content: "\f0da";
	color: #bcbcbc;
	font-size: 14px;
	right: -7px;
	top: 50%;
	margin-top: -14px;
}
.haik-menu .list1 .list2>li a:hover::after, .haik-article-menu .list1 .list2>li a:hover::after {
	color: #0054d6;
}
/*
2019.09.05
メニュー内の見出しに三角形などアイコンがあれば消す
*/

.haik-menu h2 a:after, .haik-article-menu h2 a:after, .haik-menu h3 a:after, .haik-article-menu h3 a:after, .haik-menu h4 a:after, .haik-article-menu h4 a:after {
	content: '';
	background-image: none;
}
/* ======================
2019/09/10
スマホ時のナビ、親メニューオープンマウスオーバー時と子メニューアクティブ時共通設定
表示の意図がわかりにくいので再設計
子メニューアクティブ時の下線を外すなどした

border-bottom: 3px solid transparent;
はそれぞれのパレットでborder-colorで色を指定する
それぞれのパレットでの記述を減らす事に成功
2019/09/23
スマホ時のナビ、親メニューオープンマウスオーバー時と子メニューアクティブ時太さを5pxに修正して視認性を上げる
2019/10/01
ナビ親要素テキスト縁取りに伴い親メニューオープンマウスオーバー時の縁取りを消す
====================== */

/* 親メニューオープンマウスオーバー時 */

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
	background-color: #fff;
	color: #333;
	text-shadow: none;
}
/* スマホ時の親メニューオープンマウスオーバー時 */

@media (max-width: 767px) {
	.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
		border-bottom: 5px solid #999;
	}
}
/* ======================
2019/09/11
メニュー内のアコーディオンパネルの枠線を統合する
従来はテーマ毎にバラバラだったのを統合することで見やすくする
2021/09/02
【試作中】モバイル時の左右余白を減らして読みやすくする
====================== */

/*モバイル表示（左右余白を狭く）*/
.haik-menu h4, .haik-article-menu h4 {
	border: none;
	border-bottom: none;
	padding: 0.6em 0.4em;
	margin: 0;
	background-image: none;
	background-color: transparent;
}
/*通常表示（左右余白を広く）*/
@media (min-width: 568px) {
	padding: 0.6em 0.7em;
}

/* ======================
2019/09/11
ナビの色設定
デフォルトの色などを上書きする形で使う
スマホとPC画面のナビの色を統一する
※
無駄な記述があるけれど必須な理由
継承元のデザインが引き継がれてしまうため。継承して上書きしている。

2019/09/23
ナビの767px以下（スマホ時）の対応の不要な記述を整理
デフォルト設定で設定できている文字色やアニメーション効果などを削除
ナビ下線の三角の色指定を削除。今後使いそうにない。
2019/09/24
ナビバーのブランド・ロゴの色指定スタイルシートをnagamira_css10.cssへ移動
2019/12/01
ナビのスマートフォン表示時の下線を白色に統一。
2019/12/26
モバイル時のドロップダウンメニューのオレンジのグラデーション調整。黄色でメリハリをつける。
2020/09/22
haik-palette-orange の色を修正
端末によってはどぎつい場合があるので
2020/09/26
ナビのマウスオーバー時の文字色を黒色に統一
人によっては文字色が変わると一瞬見失う場合がある事に気づいた。

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

/* ======================
haik-palette-blue 
====================== */

.haik-palette-blue .navbar-default .navbar-nav>.open>a,
.haik-palette-blue .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-blue .navbar-default .navbar-nav>.open>a:focus {
	background-image: linear-gradient(to top, #0048bb 0%, #0054d6 100%);
	color: #fff;
}
/* ナビ・マウスオーバー時の文字色 */

.haik-palette-blue .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}
/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-blue .dropdown-menu {
	background-image: linear-gradient(to top, #0048bb 0%, #0054d6 100%);
}
.haik-palette-blue .navbar-nav>li>.dropdown-menu {
	border-color: #0048bb;
	background-image: linear-gradient(to top, #0048bb 0%, #0054d6 100%);
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-blue .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
	.haik-palette-blue .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
	.haik-palette-blue .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-blue .navbar-default .navbar-nav>.open>a,
	.haik-palette-blue .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-blue .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-blue .navbar-default .navbar-nav>li.active>a,
.haik-palette-blue .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #0054d6;
	color: #0054d6;
}
/*アクティブ状態を表す*/

.haik-palette-blue .navbar-default .navbar-nav>li.active>a,
.haik-palette-blue .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(64, 150, 187, .3);
}
/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-blue .navbar-default .navbar-nav>li>a:before {
	background-color: #0048bb;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

/* デフォルト色を設定後、テーマ色を（8色）全部割り当てる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-blue .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
		background-color: #0048bb;
	}
}
/* ======================
.haik-palette-green 
 ====================== */

.haik-palette-green .navbar-default .navbar-nav>.open>a,
.haik-palette-green .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-green .navbar-default .navbar-nav>.open>a:focus {
	background-color: #005f2c;
	background-image: linear-gradient(to top, #005f2c 0%, #04823e 100%);
	color: #fff;
}

/* ナビ・マウスオーバー時の文字色 */
.haik-palette-green .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}
/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-green .dropdown-menu {
	background-image: linear-gradient(to top, #005f2c 0%, #04823e 100%);
}
.haik-palette-green .navbar-nav>li>.dropdown-menu {
	border-color: #005f2c;
	background-color: #005f2c;
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-green .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
	.haik-palette-green .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
	.haik-palette-green .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-green .navbar-default .navbar-nav>.open>a,
	.haik-palette-green .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-green .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-green .navbar-default .navbar-nav>li.active>a,
.haik-palette-green .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #005f2c;
	color: #005f2c;
}
/*アクティブ状態を表す*/

.haik-palette-green .navbar-default .navbar-nav>li.active>a,
.haik-palette-green .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(64, 150, 187, .3);
}
/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-green .navbar-default .navbar-nav>li>a:before {
	background-color: #005f2c;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-green .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
		background-color: #005f2c;
	}
}
/* ======================
.haik-palette-cyan 
====================== */

.haik-palette-cyan .navbar-default .navbar-nav>.open>a,
.haik-palette-cyan .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-cyan .navbar-default .navbar-nav>.open>a:focus {
	background-image: linear-gradient(to top, #005863 0%, #1f808b 100%);
	color: #fff;
}

/* ナビ・マウスオーバー時の文字色 */
.haik-palette-cyan .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}
/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-cyan .dropdown-menu {
	background-image: linear-gradient(to top, #005863 0%, #1f808b 100%);
}
/* ナビバーの子メニュー（ドロップダウンメニュー）枠線 */

.haik-palette-cyan .navbar-nav>li>.dropdown-menu {
	border-color: #005863;
	background-color: #1f808b;
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-cyan .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
	.haik-palette-cyan .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
	.haik-palette-cyan .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-cyan .navbar-default .navbar-nav>.open>a,
	.haik-palette-cyan .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-cyan .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-cyan .navbar-default .navbar-nav>li.active>a,
.haik-palette-cyan .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #1f808b;
	color: #1f808b;
}
/*アクティブ状態を表す*/

.haik-palette-cyan .navbar-default .navbar-nav>li.active>a,
.haik-palette-cyan .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(82, 153, 160, .3);
}
/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-cyan .navbar-default .navbar-nav>li>a:before {
	background-color: #005863;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-cyan .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
		background-color: #005863;
	}
}
/* ======================
haik-palette-brown 
====================== */

.haik-palette-brown .navbar-default .navbar-nav>.open>a,
.haik-palette-brown .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-brown .navbar-default .navbar-nav>.open>a:focus {
	background-image: linear-gradient(to top, #713400 0%, #99653a 100%);
	color: #fff;
}

/* ナビ・マウスオーバー時の文字色 */
.haik-palette-brown .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}
/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-brown .dropdown-menu {
	background-image: linear-gradient(to top, #713400 0%, #99653a 100%);
}
.haik-palette-brown .navbar-nav>li>.dropdown-menu {
	border-color: #713400;
	background-color: #99653a;
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-brown .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
	.haik-palette-brown .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
	.haik-palette-brown .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-brown .navbar-default .navbar-nav>.open>a,
	.haik-palette-brown .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-brown .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-brown .navbar-default .navbar-nav>li.active>a,
.haik-palette-brown .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #99653a;
	color: #99653a;
}
/*アクティブ状態を表す*/

.haik-palette-brown .navbar-default .navbar-nav>li.active>a,
.haik-palette-brown .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(118, 82, 54, .3);
}
/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-brown .navbar-default .navbar-nav>li>a:before {
	background-color: #713400;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-brown .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
		background-color: #713400;
	}
}
/* ======================
haik-palette-red 
====================== */

.haik-palette-red .navbar-default .navbar-nav>.open>a,
.haik-palette-red .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-red .navbar-default .navbar-nav>.open>a:focus {
	background-image: linear-gradient(to top, #cc3733 0%, #db4441 100%);
	color: #fff;
}

/* ナビ・マウスオーバー時の文字色 */
.haik-palette-red .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}
/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-red .dropdown-menu {
	background-image: linear-gradient(to top, #db4441 0%, #cc3733 100%);
}
.haik-palette-red .navbar-nav>li>.dropdown-menu {
	border-color: #cc3733;
	background-color: #cc3733;
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-red .navbar-default .navbar-nav .open .dropdown-menu>.active>a, 
	.haik-palette-red .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover, .haik-palette-red .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-red .navbar-default .navbar-nav>.open>a,
	.haik-palette-red .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-red .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-red .navbar-default .navbar-nav>li.active>a,
.haik-palette-red .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #db4441;
	color: #db4441;
}
/*アクティブ状態を表す*/

.haik-palette-red .navbar-default .navbar-nav>li.active>a,
.haik-palette-red .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(178, 83, 82, .3);
}
/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-red .navbar-default .navbar-nav>li>a:before {
	background-color: #cc3733;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-red .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
		background-color: #cc3733;
	}
}
/* ======================
ここからドロップメニューの文字を黒に書き換える
====================== */

@media (max-width: 767px) {
	.haik-palette-red .navbar-nav .open .dropdown-menu>li>a {
		color: #373737;
		background-color: #e9e9e9;
		padding: 10px 15px;
	}
}
@media (max-width: 767px) {
	.haik-palette-red .navbar-nav .open .dropdown-menu>li>a {
		color: #373737;
		background-color: #e9e9e9;
	}
}
/* ======================
haik-palette-orange 
====================== */

/* ======================
オレンジ色は白抜きでは見づらいので文字を黒にするとよい。
黒さを強調しないとグレーがかかった感じになる。
====================== */

.haik-palette-orange .navbar-default .navbar-nav>.open>a,
.haik-palette-orange .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-orange .navbar-default .navbar-nav>.open>a:focus {
	background-image: linear-gradient(to top, #ffa94f 0%, #ffc818 100%);
	color: #333;
}

/* ナビ・マウスオーバー時の文字色 */
.haik-palette-orange .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}

/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-orange .dropdown-menu {
	background-image: linear-gradient(to top, #ffa94f 0%, #ffc818 100%);
}
.haik-palette-orange .navbar-nav>li>.dropdown-menu {
	border-color: #ffa94f;
	background-color: #ffa94f;
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
	.haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover, .haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-orange .navbar-default .navbar-nav>.open>a,
	.haik-palette-orange .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-orange .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-orange .navbar-default .navbar-nav>li.active>a,
.haik-palette-orange .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #ffa94f;
	color: #ca6700;
}
/*アクティブ状態を表す*/

.haik-palette-orange .navbar-default .navbar-nav>li.active>a,
.haik-palette-orange .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(212, 129, 39, .3);
}

/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-orange .navbar-default .navbar-nav>li>a:before {
	background-color: #ffa94f;
}
/* ======================
ここからオレンジオリジナルドロップメニューの文字を黒に書き換える
オレンジのような明るい目の黄色系統の色は白抜き文字とのコントラスト比がよわいので参考にする
2019/09/23
オレンジ色のナビアクティブ：スマホ時の文字色を黒色になるように調整
2020/09/25
オレンジ色のナビアクティブ：スマホ時の文字を白縁取りになるよう調整
====================== */

.haik-palette-orange .navbar-nav .open .dropdown-menu>li>a {
	padding: 5px 20px;
	color: #333;
}
.haik-palette-orange .navbar-nav .open .dropdown-menu>li>a:hover {
	color: #333;
	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;
}
/*======================
2019/09/23
オレンジのナビアクティブ時のドロップダウンメニュー反応ナビアクティブ時の文字を黒くする
オレンジはデフォルトのグレーだと背景がオレンジでは見えない事があるため
2019/12/26
モバイル時のドロップダウンメニューのオレンジのグラデーション調整。黄色でメリハリをつける。
2019/12/26
モバイル時のドロップダウンメニューのオレンジのマウスオーバー時のテキストを白縁取りにする
======================*/

.haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
	color: #646768;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #373737;
        background-color: #ffa94f;
	}
	/* メニュー要素 マウスオーバー時の色（オレンジ専用） */
	.haik-palette-orange .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
		color: #373737;
	}
}
/* ======================
haik-palette-purple 
====================== */

.haik-palette-purple .navbar-default .navbar-nav>.open>a,
.haik-palette-purple .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-purple .navbar-default .navbar-nav>.open>a:focus {
	background-image: linear-gradient(to top, #810098 0%, #901ea5 100%);
	color: #fff;
}

/* ナビ・マウスオーバー時の文字色 */
.haik-palette-purple .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}
/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-purple .dropdown-menu {
	background-image: linear-gradient(to top, #810098 0%, #901ea5 100%);
}
.haik-palette-purple .navbar-nav>li>.dropdown-menu {
	border-color: #810098;
	background-color: #901ea5;
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-purple .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
	.haik-palette-purple .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
	.haik-palette-purple .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-purple .navbar-default .navbar-nav>.open>a,
	.haik-palette-purple .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-purple .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-purple .navbar-default .navbar-nav>li.active>a,
.haik-palette-purple .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #810098;
	color: #810098;
}
/*アクティブ状態を表す*/

.haik-palette-purple .navbar-default .navbar-nav>li.active>a,
.haik-palette-purple .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(110, 79, 115, .3);
}
/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-purple .navbar-default .navbar-nav>li>a:before {
	background-color: #810098;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-purple .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #ffffff;
    	background-color: #810098;
	}
}
/* ======================
haik-palette-gray 
====================== */

.haik-palette-gray .navbar-default .navbar-nav>.open>a,
.haik-palette-gray .navbar-default .navbar-nav>.open>a:hover,
.haik-palette-gray .navbar-default .navbar-nav>.open>a:focus {
	background-image: linear-gradient(to top, #3a3a3a 0%, #8c8c8c 100%);
	color: #fff;
}

/* ナビ・マウスオーバー時の文字色 */
.haik-palette-gray .navbar-default .navbar-nav>li>a:hover {
	color: #333;
}
/* ナビバーの子メニュー（ドロップダウンメニュー） */

.haik-palette-gray .dropdown-menu {
	background-image: linear-gradient(to top, #333 0%, #5a5a5a 100%);
}
.haik-palette-gray .navbar-nav>li>.dropdown-menu {
	border-color: #333;
	background-color: #5a5a5a;
}
/* スマホ時のナビ下線と背景　アクティブ時と非アクティブ時 */

@media (max-width: 767px) {
	.haik-palette-gray .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
	.haik-palette-gray .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
	.haik-palette-gray .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
		border-color: white;
	}
	.haik-palette-gray .navbar-default .navbar-nav>.open>a,
	.haik-palette-gray .navbar-default .navbar-nav>.open>a:hover,
	.haik-palette-gray .navbar-default .navbar-nav>.open>a:focus {
		border-color: white;
	}
}
/* ナビアクティブ時のナビ下線 */

.haik-palette-gray .navbar-default .navbar-nav>li.active>a,
.haik-palette-gray .navbar-default .navbar-nav>li.active>a:hover {
	border-color: #333;
	color: #333;
}
/*アクティブ状態を表す*/

.haik-palette-gray .navbar-default .navbar-nav>li.active>a,
.haik-palette-gray .navbar-default .navbar-nav>li.active>a:hover {
	background-color: rgba(94, 97, 107, .3);
}
/*ナビアクティブ時のナビ下線のアニメーション 線の色*/

.haik-palette-gray .navbar-default .navbar-nav>li>a:before {
	background-color: #3a3a3a;
}
/* スマホ時メニュー操作時の色指定　基本的にPC版と合わせる */

@media (max-width: 767px) {
	/* メニュー要素 （パレット毎に色を指定する） */
	.haik-palette-gray .navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #ffffff;
		background-color:#3a3a3a;
	}
}
/* ====================================
メインコンテナ見出しユニットはじまり
このユニットを使ってメインコンテナ部の見出しで多くの形を作れる
====================================*/

/* ====================================
2019.03.30
メインコンテンツの見出し1，2，3（h2,h3,h4）のリンク文字がテーマカラーに変わらないようにする。
ページ名と一致する文字列が自動リンクした場合に色が変わってしまう機能の誤作動を軽減する。ただし、リンクそのものは生きているのでマウスオーバー時の色はかわる。
リンクさせなくてもいい場合はコメントにしている以下の内容を使う。

    pointer-events: none;
    cursor: default;
    text-decoration: none;
 
を追加するとリンクに反応しなくなる。
ただし、メニューにあるアコーディオンパネル（h4）やブログ日付タイトルリスト（h2）が巻き添えになるので使う時は注意。

前記した「視認性をあげるため見出し1,2を読みやすくする」で設定した見出しの色と合わせることをお勧めします。
2019/09/09
メインコンテンツの見出し1，2，3（h2,h3,h4）のリンク文字色h2,h3,h4をそれぞれ独立させることで背景修正に伴う文字色の修正でも耐えられるようにする
ここで設定しているのは基本的なスタイルシートなので、
カスタマイズが必要な場合は上書きしないで属性を継承して設定すること
====================================*/

/*
.haik-container h2 a{
    color: #333;
    text-decoration: underline;
}


.haik-container h3 a{
    color: #333;
    text-decoration: underline;
}

.haik-container h4 a {
    color: #333;
    text-decoration: underline;
}
*/

/* =================
2019/09/09
メイン見出しリンク文字色マウスオーバー調整用
これと同じ記述がnagamira_css1.cssにコメントであるが、それを継承している。
=================*/

/*
.haik-container h2 a:hover {
    color: #0054d6;
    text-decoration: none;
}

    .haik-container h3 a:hover{
    color: #0054d6;
    text-decoration: none;
}

.haik-container h4 a:hover {
    color: #0054d6;
    text-decoration: none;
}
*/

/*===================
2019.04.01
見出し1
2019/09/09
見出し1文字色の統一スタイルシート改修
===================*/

/* 
2019/09/09
見出し1文字色の統一スタイルシート改修
特定の色だけ文字色を黒に設定するような場合は
その色の所で独自に設定すること。
*/

.haik-container h2, .haik-container h2 small {
	color: #333;
}
/*
.haik-container h3,
.haik-container h3 small {
    color: #333;
}

.haik-container h4,
.haik-container h4 small {
    color: #333;
}
*/

/* 
2019/09/09
見出し1の全体に背景色帯を指定する場合
または下線を指定する場合
見出し1に設定することでアイキャッチの役割と段落にメリハリがつく
*/

/*
2019/09/12
見出し1のボーダー線を消してデフォルト属性を用意する
画面が小さい時は横に線があると詰まった印象になるので注意
2019/09/13
配置のバランス確認用に1px solid; 線で囲む
2019/09/14
見出し1のボーダー線に角の丸めも付ける
2019/09/15
角の丸めと背景はカスタマイズ項目とする
2019/10/06
見出し2の枠装飾に疑似要素でリボンをつけてみた。
2019/10/06
見出し2の枠右上右下の角の丸めをつける

*/

/* 
2019/10/06
qblog_titleで見出し2の装飾で使っている疑似要素の装飾が誤って出ないようにbefore、afterともに消す
主にブログリストでも見出し2のタグh2が使われているため。
2019/10/08
after追加改修

*/

.haik-container h2.qblog_title::before, .haik-container h2.qblog_title::after {
	display: none;
	content: "";
}
/* =============
2019/10/07
見出し1枠下の飾り
.haik-container h2でinline-blockを入れるとレイアウト崩れが起こるのでinline-blockを止めてみる

2019/10/07
見出し1枠下の飾り：左折れリボン
　　見た目のインパクトが弱いので下向き吹き出しに置き換えて下の方で予備コメント化

2019/10/08
見出し1枠下の飾り：下向き吹き出し
見出し2の装飾に疑似要素で下向き三角形をつけた。
見出し1枠下の飾り：左折れリボンを置き換えた

2019/10/08
見出し1枠下の飾りの形状を吹き出し枠線にする時のために背景を白にする
2019/10/08
見出し1枠太さを吹き出し枠線の可変サイズに合うよう0.1emから0.15emに微調整
2019/10/12
見出し1枠線色の指定の追加
2019/11/01
見出し1枠線内側の塗りつぶしを追加。
見出し1枠線下向き吹き出し内側の塗りつぶしも追加。
2019/11/18
グラデーション版に変更
2019/12/06
メインの見出し1（ｈ2）のclear:both;がブログ概要表示で折り返すようになっていたので削除する
（回り込みを解除する意味がスタイルをクリアするの勘違いをしていた）
2019/12/28
メインの見出し1（ｈ2）のボックスシャドウを廃止する。
2019/12/30
見出し1枠下の飾りで使っていたurl(none)はエラーになるので削除する。
2020/01/04
メインの見出し1（ｈ2）のボーダー記述の修正（メンテナンス性改善）
2020/07/11
メインの見出し1（ｈ2）が見づらいのでグラデーション効果を改める
メニューも併せて調整する
2020/07/13
メインの見出し1（ｈ2）まだ見づらいのでグラデーション効果を回転してみる
2020/07/20
メインの見出し1（ｈ2）width: 100%;を廃止
100％固定だと画面の左右マージンの値の減少で位置がずれたりするため
2020/07/25
メインの見出し1（ｈ2）グラデーション効果の白への遷移を透明にしていく
2020/08/01
編集画面の見出し.haik-content .title、.qblog_edit_form .titleのスタイルを修正する
2020/10/03
見出し1（h2）の角丸めを可変させる
モバイル画面時　左右の余白が0になる
768px以上　左右の余白ができるので角を丸める
=============*/

.haik-container h2 {
	position: relative;
	box-sizing: border-box;
	background-image: linear-gradient(70deg, #e8e8e8, #f4f4f4 49%,  #fff0 100%);
	border-radius: 0px;
}
@media (min-width: 768px) {
    .haik-container h2 {
    	border-radius: 12px;
	}
}


.haik-content .title,
.qblog_edit_form .title{
    margin: 0;
    padding: 0.5em;
    line-height:1.6em;
    background-image: none;
    background-color: transparent;
}

/*
見出し1（ｈ2）枠グラデーション版装飾の色
ただし、後々のメンテナンス性が悪いので一色に統一
2019/11/18
希望に応じてカスタマイズできるようにコメント化
*/

/*
.haik-palette-blue .haik-container h2 {
    border-color:#d6d6d6;
    background-image: linear-gradient(#FFF, #f4f4f4 49%, #e8e8e8 50%, #FFF 100%);
}

.haik-palette-green .haik-container h2 {
    border-color:#69e7a6;
    background-image: linear-gradient(#edfff6, #fff 49%, #FFF 50%,#b4ffda  100%);
}

.haik-palette-cyan .haik-container h2 {
    border-color:#59e7f3;
    background-image: linear-gradient(#e1fcff, #fff 49%, #FFF 50%,#c8f9ff  100%);
}

.haik-palette-brown .haik-container h2 {
    border-color:#eba65b;
    background-image: linear-gradient(#ffe7d3, #fff 49%, #FFF 50%,#ffcda4  100%);
}

.haik-palette-red .haik-container h2 {
    border-color:#ff6562;
    background-image: linear-gradient(#ffe3cb, #fff 49%, #FFF 50%,#ffcda4  100%);
}

.haik-palette-orange .haik-container h2 {
    border-color: #ffcd94;
    background-image: linear-gradient(#FFF, #ffe7cc 49%, #ffd3a2 50%, #FFF 100%);
}

.haik-palette-purple .haik-container h2 {
    border-color:#f5c1ff;
    background-image: linear-gradient(#FFF, #fbe4ff 49%, #f7caff 50%, #FFF 100%);
}

.haik-palette-gray .haik-container h2 {
    border-color:#bbb;
    background-image: linear-gradient(#FFF, #ececec 49%, #dbdbdb 50%, #FFF 100%);
}
*/

/*
2019/10/08
見出し1枠下の飾り：下向き吹き出し
見出し2の装飾に疑似要素で下向き三角形をつけた。
色のデフォルトはグレー。
後述する見出し2枠装飾でテーマパレット毎にborder-top-colorを設定する
　三角形の左からの位置を％単位ではなくem単位に修正
　％単位だと相対位置のためずれが発生する
2019/11/18
吹き出しだとブログ編集のプレビュー画面など違和感があることが判明。
予備としてコメント化　
*/

/*
.haik-container h2::before {
  content: "";
  position: absolute;
  display:block;
  width: 0;
  height: 0;
  top: calc(100% + 2px);
  left:1em;
  border-top: solid 0.8em #999;
  border-right: solid 0.8em transparent;
  border-left: solid 0.8em transparent;
}
*/

/* 
オレンジのように白文字では見えにくい時は
見出し1を黒にする
見出し1リンク要素を青にする
見出し1マウスオーバー要素を青にする
*/

/*
【例】
.haik-palette-orange .haik-container h2 small,
.haik-palette-orange .haik-container h2{
    color: #333;
}

.haik-palette-orange .haik-container h2 a{
    color: #333;
    text-decoration: underline;
}

.haik-palette-orange .haik-container h2 a:hover {
    color: #0054d6;
    text-decoration: none;
}
*/

/*===================
2019.04.01
見出し2
見出し下線の配色
2019/12/02
見出し2の吹き出し化に伴い、下線装飾はコメント化
===================*/

/*
2019/09/13
見出し2のボーダー線デフォルト属性を用意する
配置のバランス確認用にborder: 1px dotted 枠線で囲む。
通常はコメントにする
*/

/*
.haik-container h3 {
    border-bottom: .1618em dotted #aaa;
}

.haik-palette-blue .haik-container h3 {
    border-color:#609BB5;
}

.haik-palette-green .haik-container h3 {
    border-color:#5BAF83;
    color: white;
}

.haik-palette-cyan .haik-container h3 {
    border-color:#5FAAB3;
}

.haik-palette-brown .haik-container h3 {
    border-color:#A17F64;
}

.haik-palette-red .haik-container h3 {
    border-color:#CA7675;
}

.haik-palette-orange .haik-container h3 {
    border-color:#f7a64a;
}

.haik-palette-purple .haik-container h3 {
    border-color:#9C6DA3;
}

.haik-palette-gray .haik-container h3 {
    border-color:#767F9B;
}
*/


/* =============
2019/10/07
見出し2枠下の飾り
.haik-container h3でinline-blockを入れるとレイアウト崩れが起こるのでinline-blockを止めてみる

2019/10/07
見出し2枠下の飾り：左折れリボン
　　見た目のインパクトが弱いので下向き吹き出しに置き換えて下の方で予備コメント化

2019/10/08
見出し2枠下の飾り：下向き吹き出し
見出し2の装飾に疑似要素で下向き三角形をつけた。
見出し2枠下の飾り：左折れリボンを置き換えた

2019/10/08
見出し2枠下の飾りの形状を吹き出し枠線にする時のために背景を白にする
2019/10/08
見出し2枠太さを吹き出し枠線の可変サイズに合うよう0.1emから0.15emに微調整
2019/10/12
見出し2枠線色の指定の追加
2019/11/01
見出し2帯装飾化
見出し2枠線内側の塗りつぶしを追加。
見出し2枠線下向き吹き出し内側の塗りつぶしも追加。
2019/11/28
見出し2の左マージンを0にして、枠のズレを修正
2019/12/02
見出し2帯色指定がない場合の背景色グレー#999を追加
2019/12/02
見出し2帯下向き吹き出し三角形の背景色に白を追加。テーマによっては別の背景色が入っている事があるため。　
見出し2帯装飾枠線の太さを0に設定
2019/12/20
見出し2帯下向き吹き出し三角形のmargin-left: 0px;テスト用の消し忘れ。消す
2020/07/20
メインの見出し2（ｈ3） width: 100%; を廃止
=============*/

.haik-container h3 {
	position: relative;
	box-sizing: border-box;
	border: none;
	border: 0em solid;
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	border-color: #999;
	background-color: #999;
}
/*
2019/10/08
見出し2枠下の飾り：下向き吹き出し
見出し2の装飾に疑似要素で下向き三角形をつけた。
色のデフォルトはグレー。
後述する見出し2枠装飾でテーマパレット毎にborder-top-colorを設定する
　三角形の左からの位置を％単位ではなくem単位に修正
　％単位だと相対位置のためずれが発生する
2019/12/02
下向き吹き出し三角形の背景色に白を追加。テーマによっては別の背景色が入っている事があるため。　
見出し2装飾の帯枠線の太さを0pxへしたのに伴い吹き出しの三角形位置トップcalc(100% + 5px);を0pxに調整
三角形の大きさを目分量で0.2em減らす
2019/12/02
他のテーマで疑似要素を使っていた場合に備えてmargin-top: 0;を入れる
2020/01/19
見出し2枠下の飾り：下向き吹き出し
下向き吹き出し三角形の位置トップを100に修正。
top: calc(100% + 1px);またはtop: calc(100%);
ではブラウザEDGEでは1ピクセル空いて表示されるため。
明きらかにエラーなのだけど修正されていない。
2020/07/25
見出し2下向き吹き出し三角形の背景色を透明にする
これで背景色が使えるようになる
*/

.haik-container h3::before {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	top: calc(100% - 1px);
	left: 1em;
	margin-top: 0;
	border-top: solid 0.6em #999;
	border-right: solid 0.6em transparent;
	border-left: solid 0.6em transparent;
	background-color: transparent;
}
/* 塗りつぶした三角形に白の三角形を重ねる形で枠線形状を実現している 
2019/12/02
下向き吹き出しの三角形の内側装飾を予備コメント化
*/

/*
.haik-container h3::after {
  position: absolute;
  display:block;
  content: "";
  top: calc(100% - 1px);
  left: 1.1em;
  border-top: solid 0.5em white;
  border-right: solid 0.5em transparent;
  border-left: solid 0.5em transparent;
}
@media (max-width: 768px) {
.haik-container h3::after {
    left: 1.1em;
    }
}
@media (max-width: 1200px) {
.haik-container h3::after {
    left: 1.1em;
    }
}
*/

/*
2019/11/28
メイン画面.haik-container内の
見出し2の文字色を白抜きに変える
nagamira_css8_11_見出し1グラデーション枠見出し2吹き出し版専用仕様
2019/12/02
見出し2の背景色の透明化がテーマによっては変になるので削除
2019/12/06
見出し2の文字に影をつける事でメリハリをつける
（背景の帯装飾が白だと文字が見えないので必要になった）
2019/12/28
見出し3のテキストシャドウのブラー効果を0にする。
2020/01/07
見出し3のテキストシャドウの太さを全て1.75ピクセルにする。
2020/01/07
見出し3のテキストシャドウの太さを全て1ピクセルにする。

*/

.haik-container h3 small,
.haik-container h3,
.haik-container h3 small {
	color: white;
	text-shadow: 1px 1px 0 #000;
}
.haik-container h3 small a,
.haik-container h3 small a,
.haik-container h3 a {
	color: white;
	text-decoration: underline;
}
h3 small a:hover,
.haik-container h3 small a:hover,
.haik-container h3 a:hover {
	color: #95ceff;
	text-decoration: underline;
}
/*
見出し2枠装飾の色
テーマのパレットに用意する
対応する色がない場合はデフォルトのグレーになる
疑似要素beforeのborder-top-colorは装飾の形状によって変わってくる
左折れリボンの場合、border-top-colorをborder-right-colorに置き換える
2019/12/02
下向き吹き出しの三角形の内側装飾を予備コメント化に伴い、「下向き吹き出しの三角形の内側の色を変える」はコメント化
2020/08/05
「.haik-palette-blue .haik-container h3」と書いていたのを廃止。
これをすると複雑になる課題があった。前の互換性を重視していたテーマの名残。
「.haik-palette-blue .haik-container h3::before」で書いている
吹き出しも併せて修正
*/

.haik-palette-blue h3 {
	border-color: #0054d6;
	background-color: #0054d6;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-blue h3::before {
	border-top-color: #0054d6;
}
/* 下向き吹き出しの三角形の内側の色を変える 
.haik-palette-blue h3::after {
  border-top-color: #0054d6;
}
*/

.haik-palette-green h3 {
	border-color: #005f2c;
	background-color: #005f2c;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-green h3::before {
	border-top-color: #005f2c;
}
/* 下向き吹き出しの三角形の内側の色を変える */

.haik-palette-green h3::after {
	border-top-color: #005f2c;
}

.haik-palette-cyan h3 {
	border-color: #1f808b;
	background-color: #1f808b;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-cyan h3::before {
	border-top-color: #1f808b;
}
/* 下向き吹き出しの三角形の内側の色を変える
.haik-palette-cyan h3::after {
  border-top-color: #1f808b;
}
*/

.haik-palette-brown h3 {
	border-color: #99653a;
	background-color: #99653a;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-brown h3::before {
	border-top-color: #99653a;
}
/* 下向き吹き出しの三角形の内側の色を変える 
.haik-palette-brown h3::after {
  border-top-color: #99653a;
}
*/

.haik-palette-red h3 {
	border-color: #db4441;
	background-color: #db4441;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-red h3::before {
	border-top-color: #db4441;
}
/* 下向き吹き出しの三角形の内側の色を変える 
.haik-palette-red .haik-container h3::after {
  border-top-color: #db4441;
}
*/

.haik-palette-orange h3 {
	border-color: #ffa94f;
	background-color: #ffa94f;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-orange h3::before {
	border-top-color: #ffa94f;
}
/* 下向き吹き出しの三角形の内側の色を変える 
.haik-palette-orange h3::after {
  border-top-color: #ffa94f;
}
*/

.haik-palette-purple h3 {
	border-color: #660178;
	background-color: #660178;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-purple h3::before {
	border-top-color: #660178;
}
/* 下向き吹き出しの三角形の内側の色を変える 
.haik-palette-purple h3::after {
  border-top-color: #660178;
}
*/

.haik-palette-gray h3 {
	border-color: #333;
	background-color: #333;
}
/* 下向き吹き出しの三角形の色を変える */

.haik-palette-gray h3::before {
	border-top-color: #333;
}
/* 下向き吹き出しの三角形の内側の色を変える 
.haik-palette-gray h3::after {
  border-top-color: #333;
}
*/

/*
2019/11/28
見出し2の文字色を黒に変える
オレンジ専用
オレンジは濃くするとブラウンになってしまうため工夫。
2019/12/06
見出し2の背景がオレンジ帯時、マウスオーバー時は黄色にする
2020/08/05
上の見出し指定でやめた「.haik-palette-blue .haik-container h3」の
.haik-containerをここで指定しているのはこれがないと
パレットカラーでオレンジ系統を指定時、アイキャッチなど他の領域でも文字が黒くなるため
*/

h3 .haik-container small, .haik-palette-orange .haik-container h3,
.haik-palette-orange .haik-container h3 small,
h3 small a,
.haik-palette-orange .haik-container h3 small a,
.haik-palette-orange .haik-container h3 a {
	color: black;
	text-shadow: none;
}
h3 .haik-container small a:hover,
.haik-palette-orange .haik-container h3 small a:hover,
.haik-palette-orange .haik-container h3 a:hover {
	color: #fffe00;
}
/* ====================================
以上メインコンテナ見出しユニット
====================================*/

/*==================================
2019.04.11
メニュー見出し3のアイコンを削除
主にアコーディオンパネルで表示されるので不要と判断
最初は８色から対応。テーマ毎に対応、最終的に３１色分対応を予定
2019.05.04
条件セレクタで冗長性を廃止
2019/09/14
「メニュー見出し3のアイコンを削除」予備コメント化
「メニュー内の見出しに三角形などアイコンがあれば消す」へ統合
====================================*/

/*
.haik-menu h4 a:after,
.haik-article-menu h4 a:after {
    content: "";
}
*/

/*==================================
2019/12/02
メインメニュー・ブログメニュー用見出し1装飾グラデーション化
メンテナンス性を考えて1種類に統一
2019/12/28
メインメニュー・ブログメニュー用見出し1装飾、ボックスシャドウ廃止
2019/12/30
メインメニュー・ブログメニュー用見出し1で使っていたurl(none);はエラーになるので廃止
2020/01/04
メニューの見出し1（ｈ2）のボーダー記述の修正（メンテナンス性改善）
2020/07/11
メニューの見出し1（ｈ2）のグラデーション効果を改めて見やすくする
2020/07/20
メニューの見出し1（ｈ2）のwidth: 100%;を廃止
100％固定だと画面の左右マージンの値の減少で位置がずれたりするため

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

.haik-menu h2, .haik-article-menu h2 {
	position: relative;
	box-sizing: border-box;
	background-image: linear-gradient(#FFF, #f4f4f4 49%,  #e8e8e8 100%);
	padding: 0.5em;
	margin: 0.3em 0 0;
}
/*==================================
2019/09/13
色毎に異なる見出し下のボーダーの記述を独立
メニュー見出し1横ボーダー線デフォルト属性を用意する
borderは範囲確認用　通常はコメント
2019/12/02
カスタマイズ用に予備コメント化
 ====================================*/

/*
.haik-menu h2,
.haik-article-menu h2 {
    border: 1px solid;
    border-left: .3236em solid #999;
}

.haik-palette-blue .haik-menu h2,
.haik-palette-blue .haik-article-menu h2 {
    border-color: #0054d6;
}

.haik-palette-green .haik-menu h2,
.haik-palette-green .haik-article-menu h2 {
    border-color: #409668;
}

.haik-palette-cyan .haik-menu h2,
.haik-palette-cyan .haik-article-menu h2 {
    border-color: #1f808b;
}

.haik-palette-brown .haik-menu h2,
.haik-palette-brown .haik-article-menu h2 {
    border-color: #99653a;
}

.haik-palette-red .haik-menu h2,
.haik-palette-red .haik-article-menu h2 {
    border-color: #db4441;
}

.haik-palette-orange .haik-menu h2,
.haik-palette-orange .haik-article-menu h2 {
    border-color: #eba65b;
}

.haik-palette-purple .haik-menu h2,
.haik-palette-purple .haik-article-menu h2 {
    border-color: #9f5bab;
}

.haik-palette-gray .haik-menu h2,
.haik-palette-gray .haik-article-menu h2 {
    border-color: #6e7273;
}
*/

/*==================================
2019/09/13
色毎に異なる見出し3下のボーダーの記述を独立
 ====================================*/

/*
2019/09/13
メニュー見出し2下ボーダー線デフォルト属性を用意する
borderは範囲確認用　通常はコメント
*/

/*【.haik-palette-blue】*/

.haik-menu h3, .haik-article-menu h3 {
	border: none;
	/* border: 1px solid; */
	background-color: transparent;
	background-image: none;
	border-bottom: .1618em dotted #999;
	padding: 0.6em;
	margin: 0;
	letter-spacing: 0.05em;
}
/*【.haik-palette-blue】*/

.haik-palette-blue .haik-menu h3,.haik-palette-blue .haik-article-menu h3 {
	border-color: #0054d6;
}
/*【.haik-palette-green】*/

.haik-palette-green .haik-menu h3, .haik-palette-green .haik-article-menu h3 {
	border-color: #409668;
}
/*【.haik-palette-cyan】*/

.haik-palette-cyan .haik-menu h3, .haik-palette-cyan .haik-article-menu h3 {
	border-color: #1f808b;
}
/*【.haik-palette-brown】*/

.haik-palette-brown .haik-menu h3, .haik-palette-brown .haik-article-menu h3 {
	border-color: #99653a;
}
/*【.haik-palette-red】*/

.haik-palette-red .haik-menu h3, .haik-palette-red .haik-article-menu h3 {
	border-color: #db4441;
}
/*【.haik-palette-orange】*/

.haik-palette-orange .haik-menu h3, .haik-palette-orange .haik-article-menu h3 {
	border-color: #eba65b;
}
/*【.haik-palette-purple】*/

.haik-palette-purple .haik-menu h3, .haik-palette-purple .haik-article-menu h3 {
	border-color: #9f5bab;
}
/*【.haik-palette-gray】*/

.haik-palette-gray .haik-menu h3, .haik-palette-gray .haik-article-menu h3 {
	border-color: #6e7273;
}
/*==================================
2019.09.05
メニュー・親子メニューでアクティブ時マウスイベントをオフにする
下の方の「メニュー・親子メニューでアクティブ時の文字色を変える」で文字の色を指定する。
 ====================================*/

.haik-menu .list1>.list-group-item.active>a, .haik-article-menu .list1>.list-group-item.active>a, .haik-menu .list2 li.active>a, .haik-article-menu .list2 li.active>a {
	color: #999;
	pointer-events: none;
}
/*==================================
2019.03.29
メニュー・親子メニューでアクティブ時の文字色を変える。
従来はきちんと動いていなかったのを修正。
最初は８色から対応。テーマ毎に使われている色を対応させる
2019.09.05
「メニュー・親子メニューでアクティブ時マウスイベントをオフにする」を上の方に追記する
2019.09.06
メニュー・親子メニューでアクティブ時の文字色をパレット毎に変える意味がないので「メニュー・親子メニューでアクティブ時マウスイベントをオフにする」に統合する
====================================*/

/* 

.haik-palette-blue .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-blue .haik-article-menu .list1 > .list-group-item.active > a, 
.haik-palette-blue .haik-menu .list2 li.active > a, 
.haik-palette-blue .haik-article-menu .list2 li.active > a {
    color: #0054d6;
}

.haik-palette-green .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-green .haik-article-menu .list1 > .list-group-item.active > a, 
.haik-palette-green .haik-menu .list2 li.active > a, 
.haik-palette-green .haik-article-menu .list2 li.active > a {
    color: #409668;
}

.haik-palette-cyan .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-cyan .haik-article-menu .list1 > .list-group-item.active > a, 
.haik-palette-cyan .haik-menu .list2 li.active > a, 
.haik-palette-cyan .haik-article-menu .list2 li.active > a {
    color: #64B1BA;
}

.haik-palette-brown .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-brown .haik-article-menu .list1 > .list-group-item.active > a, 
.haik-palette-brown .haik-menu .list2 li.active > a, 
.haik-palette-brown .haik-article-menu .list2 li.active > a {
    color: #99653a;
}

.haik-palette-red .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-red .haik-article-menu .list1 > .list-group-item.active > a, 
.haik-palette-red .haik-menu .list2 li.active > a, 
.haik-palette-red .haik-article-menu .list2 li.active > a {
    color: #db4441;
}

.haik-palette-orange .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-orange .haik-article-menu .list1 > .list-group-item.active > a, 
.haik-palette-orange .haik-menu .list2 li.active > a, 
.haik-palette-orange .haik-article-menu .list2 li.active > a {
    color: #EBA65B;
}

.haik-palette-purple .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-purple .haik-article-menu .list1 > .list-group-item.active > a, 
.haik-palette-purple .haik-menu .list2 li.active > a, 
.haik-palette-purple .haik-article-menu .list2 li.active > a {
    color: #9f5bab;
}

.haik-palette-gray .haik-menu .list1 > .list-group-item.active > a,
.haik-palette-gray .haik-article-menu .list1 > .list-group-item.active > a,
.haik-palette-gray .haik-menu .list2 li.active > a, 
.haik-palette-gray .haik-article-menu .list2 li.active > a {
    color: #6e7273;
}
*/

/*===================
見出し3の装飾
2020/07/04
実装予備として追加
===================*/
/*.haik-container h4 {
    color: #333;
    padding: 0.3em;
    background-color: transparent;
    border-bottom: dotted 4px #ccc;
}
*/

/*===================
2020/07/09
.alert、panel書式の修正、行高さの調整
2020/07/10
.alertの中で見出し1，2，3を使う場合に初期化・カスタマイズする
メニューやフッター内でも使えるように修正
2020/07/11
アラート枠内の見出し書式をクリアする部分の欠けていた所を追記
2020/07/15
修正、順番が後の方でないと面倒なのでnagamira_css2h.cssから引っ越し
2020/07/22
パネルの最初にくる見出し1の書式クリア
2020/08/05
アラートボックスの見出しの書式が重複してゴチャゴチャしていた設定の整理。
わかりやすくなった
2020/08/13
見出しの書式クリアの文字色を「親から継承する」に修正
===================*/

.haik-container .alert h2::before,
.haik-container .alert h3::before,
.haik-container .alert h4::before,
.haik-menu .alert h2::before,
.haik-menu .alert h3::before,
.haik-menu .alert h4::before{
    content:"";
	display:none;
}

/*
アラート枠内の見出し書式をクリアする
2020/08/05
アラートボックスの見出しの書式が重複してゴチャゴチャしていた設定の整理。
わかりやすくなった
2020/08/22
アラートボックスも含めたパネルの書式の見直し
その結果、アラートボックスの見出し1～3の文字色が継承できるようになった。
デザイン的に整合性ができるようになった。
*/
.alert h2,
.alert h3,
.alert h4,
.alert h2 small,
.alert h3 small,
.alert h4 small{
    position: initial;
    background-image: none;
    background-color:transparent;
    border: 0;
    border-radius: 0;
    margin: 0px;
    margin-right: .3em;
    padding: 0;
    text-shadow:none;
    color: inherit;
}

/*
2021/09/04
iphone対応のためalert枠のマージン字下げの調整と追加
*/
.alert h2,
.alert h2 small{
	margin-left: .2em;
}
.alert h3,
.alert h3 small{
	margin-left: .3em;
}
.alert h4,
.alert h4 small{
	margin-left: .4em;
}


.haik-footer .alert h2,
.haik-footer .alert h3,
.haik-footer .alert h4,
.haik-footer .alert h2 small,
.haik-footer .alert h3 small,
.haik-footer .alert h4 small,
.haik-footer .alert p{
	color: #333;
}

.haik-footer .alert p a {
    color: #337ab7;
}
/*
2020/07/10
パネル内で見出しを使う場合、書式の初期化
メニューやフッター内でも使えるように修正
*/

.panel h2::before,
.panel h3::before,
.panel h4::before{
    content:"";
	display:none;
}

/*見出しの書式クリア*/
.panel h2,
.panel h3,
.panel h4{
    position: initial;
    background-image: none;
    background-color:transparent;
    border: 0;
    border-radius: 0;
    margin: 0em;
    margin-right: .3em;
    padding: 0;
    text-shadow:none;
    color: inherit;
}
/*
2021/09/04
パネル内での見出し、段落の字下げ調整の追加
*/
.panel h2,
.panel h2 small{
    margin-left: .3em;
}
.panel h3,
.panel h3 small{
	margin-left: .4em;
}
.panel h4,
.panel h4 small{
	margin-left: .5em;	
}
.panel p{
	margin-left: .6em;	
}

/*
パネルの最初にくる見出し1の書式クリア
*/
.haik-container .panel-body h2:first-child {
	/* margin: 0 10px 0 10px; */
}

/*サブ見出しの書式クリア*/
.panel h2 small,
.panel h3 small,
.panel h4 small{
    text-shadow:none;
    color: #333;	
}

/*
2020/07/12
見出しつきパネル上下見出し部分のh2,h3,h4色指定
2020/07/22
見出しつきパネル上下見出し部分のh2,h3,h4マージンを0に
2021/09/04
iphone対応のためマージン字下げの調整
*/
.panel .panel-heading h2,
.panel .panel-heading h3,
.panel .panel-heading h4,
.panel .panel-footer h2,
.panel .panel-footer h3,
.panel .panel-footer h4,
.panel .panel-heading h2 small,
.panel .panel-heading h3 small,
.panel .panel-heading h4 small,
.panel .panel-footer h2 small,
.panel .panel-footer h3 small,
.panel .panel-footer h4 small{
    color: #fff;
    margin: 0;
	margin-right: .5em;
}

[class^="haik-palette-"] .haik-footer .panel p a {
    color: #e3e3e3;
}

/*
2020/07/11
セクション内のアラート枠、パネル枠のマージンを確保
2020/08/30
セクション内のアラート枠、パネル枠のマージンを調整、モバイル画面時の余白を減らす
*/
.qhm-section .alert, 
.qhm-section .panel{
	margin: 1em 0.5em;
}
@media (min-width: 568px){
	.qhm-section .alert,
    .qhm-section .panel{
	    margin:1em 1em;
    }
}


/*
2020/09/03
新規クラス更新日
h2タイトルの後ろに記述したら自動的に書式を整えるように修正してみた
*/
.lastmod_date{
    font-size:85%;
    margin-left: 1em;
}

.lastmod_date:before {
    position: relative;
    top: 2px;
    left: -0.15em;
    font-family: 'Glyphicons Halflings';
    content: "\e023";
    color: #777;
}

h2>.lastmod_date{
	font-size: 15px;
	display: inline-block;
	font-family: sans-serif;
	line-height: 1em;
}
/* ======
コピー防止確認用ダミー
====== */

.nagamira-default-menu list1 li.active>a, .nagamira-default-menu list2 li.active>a {
	color: #777;
	text-decoration: none;
	pointer-events: none;
}