/*================
 * 2022/07/23 試作
 * 2021/10/17 試作A
 * 2021/09/15 試作B
 * 2021/09/14 試作C
 * 2021/09/06 試作A　
 * 2021/08/31　iphone8対応試作　
2021/07/01
nagamira_css10h.css 高速化互換性なし版
ヘッダー・ナビ類の配置設定

新テーマ用　他のテーマはその都度カスタマイズ対応で

著作権 長岡京健康みらい研究所

* 2021/07/01
* W3C CSS 検証サービス (CSS レベル 3 + SVG)問題ない事を確認
 * 2021/07/05
 【注意 圧縮ツール】
https://csscompressor.net/ja/
で「Compress colors」をオフにして圧縮すること。
コメントの付け方によっては圧縮後のソースに文法エラーが現れる場合があるので圧縮率は【高い】で圧縮する。さらに圧縮したい場合は文法チェッカーにかけて、問題がなければ【最高】で圧縮すること。 * 

2019.03.13
Haik_kinaco のページヘッダー（ヘッドコピーとは別モノ）
パレット6色専用ページヘッダーのPセレクタの書体大きさ調整
2019.03.13
Haik_doc のページヘッダー（ヘッドコピーとは別モノ）
パレット6色専用ページヘッダーのPセレクタの書体大きさ調整
2019.09.07
新テーマ用　テーマ用のナビ下部線の配色
2019.09.07
ナビ余白左のレイアウト修正
2019/09/09
nagamira_css2.cssからnagamira_css10.cssへ移動
2019/09/09
モバイル時メニューボタンの配色調整
2019/09/09
ナビ　モバイル時メニューアイコンを変更
2019/09/09
スタイルシート整理のため以下をnagamira_css1.cssからnagamira_css10.cssへ移動
　○ヘッドコピーの修正
　○ブランド名：ナビゲーションバーのロゴを出さない時のタイトル名
2019.09.10
ヘッドコピーの書体大きさでタブの文字の大きさを指定していたのを修正
2019.09.11
ブランド名、書体サイズを強制変更するセレクタを使う。
2019.09.11
ナビの左枠線を消す
2019.09.11
コンテナー左右排他領域の修正
2019/09/11
トグルボタンの大きさと領域の調整
2019/09/14
ヘッドコピーのセレクタに条件分岐セレクタを追加して、汎用性を持たせた。
2019.09.24
ナビヘッダの背景色・属性設定
2019/09/24
ブランド名：ナビゲーションバータイトル色の明度を上げて読みやすくした
色の明度の調整次第では上品さがなくなるので注意
2019/09/24
ナビのメニュー部の背景色を指定する（クラス.haik-nav.navbar-default）
2019/09/24
ブランド名：書体を太くする
2019/09/24
ナビのブランド名部分を回り込みを廃止して独立したブロックにする
2019/09/24
display:blockに切り替えて、タイトルが中央に来るようにする
2019/09/24
スマホ時のナビトグルボタンの枠線を廃止
2019/09/24
ナビトグルボタンマウスオーバー時の反応をふわっと白く点灯するような感じに統一する
2019/09/24
ナビ枠線の上線を引く
2019/09/24
ナビバーのブランド名の関連するスタイルシートをnagamira_css8.cssから移動
2019/09/24
ナビバーブランド名のマウス反応を改善
2019/09/24
ドロップダウンメニューの下向き三角印（キャレット）をnagamira_css8.cssから移動
2019/09/24
テーマ毎にバラバラなナビキャレットを統合
2019/09/25
ブランド名：書体の大きさを調整
2019/09/25
トグルボタンのマージンを調整、テキストそろえを縦横真ん中にする
2019/09/25
ブランド名：タイトルは768px以上では左揃えにする
ブランド名：タイトル高さを自動調整する
排他領域上下を16pxから8pxに減らして2行になっても最低高さ50PX内なら違和感のないように設定
2019/09/25
ブランド名：書体色、全て白か黒で統一へ。
明るい目の背景色の時は黒を強調した色で
2019/09/26
1048
	文法解析エラーが発生しました 0.em 0.1em;
2019/09/26
　.navbar-collapseの行高を0.8emに設定する。
2019/09/27
ihpone5（SE）解像度追加　書体の大きさ調整
2019/09/29
ブランド名：タイトルはjustify-content: center;で中揃えにする
768px以上ではjustify-content: left;で左揃えにする
2019/09/29
テーマmoiの無理なレイアウト崩れナビを修正でpaddingがあるとドロップダウンメニューがずれてカッコ悪いので全て0にする
2019/10/08
コピー防止確認用ダミー
追加
2019/11/01
テーマブラウンのナビメニュー背景色の調整
2019/11/06
ナビ余白の排他領域の調整修正【重要！】
2019/11/06
.navbar-brandの排他領域padding-left:1em;→1.5em;
2019/11/07
トグルの右からのピクセル数、568pxの時の位置が変わらないように調整
2019/11/30
ヘッダ、見出し2の色調整
とくに青、緑、シアン、赤色、紫はヘッダと見出しの色調がバラバラだったのを統一
オレンジの見出し2は全面的に明るい目にして文字を黒にした
2019/12/01
モバイル時のトグルボタンのデフォルト色を調整
2019/12/01
使わない記述を廃止。削除
2019/12/01
ナビのヘッダーの右マージンを0にする。意味不明な右余白ができるのを防ぐ
2019/12/02
ナビのメニュー部の背景色、ナビヘッダの色調が変わったので、合わせて修正
2019/12/03
ナビトグルボタンマウスオーバー時の反応でボタンの照度を明るく、グラデーションに変更
2019/12/06
ナビバーのブランドの文字に影をつける事でメリハリをつける
（背景の帯装飾が白にすると文字が見えなくなるので必要）
ただし、オレンジ色など黒文字の場合は影をオフに
2019/12/20
ナビ枠線の上線を4pxから1pxにする。
（操作性が確保できたため、減らしても問題ないと判断）
2019/12/21
ナビのヘッダーの左右マージンを隙間が出内容に調整する。
意味不明な右余白ができる原因がわかったため。
原因はメインコンテナーの左右排他領域の指定と見出し2のずれ
2019/12/22
ナビのヘッダーの右マージンで隙間が出るので再度ナビのヘッダーの右マージンを0にする。
2019/12/22
rowの修正に伴い、ナビのドロップダウンメニューが下にずれるので大きさを強制的に修正
モバイル時画面のドロップダウンメニューとわけて768px以上で有効にする

2019/12/23
ナビトグルのモバイル時メニューアイコンfont-family: 'Glyphicons Halflings'をfont-family: FontAwesome;に変更
デザインが洗練されている

2019/12/23
ナビ　モバイルメニュートグル上下位置の調整
2019/12/25
ナビ　モバイルメニュートグル上下位置ずれの調整
2019/12/25
ナビヘッダの高さ調整50PX固定に。
タイトルが折り返されると高さが56pxになることがわかったため。
2019/12/25
ナビメニューの謎のマージンを廃止。Boostrapで指定されていた。
2019/12/26
ナビ　モバイルメニュートグル、マージンを廃止して大きさをナビヘッダに合わせる。
角の丸めも止める
2019/12/26
Boostrapの仕様の問題で右側に謎の余白ができていたのを解消。
ナビのメニュー部分の排他領域を調整。
モバイル時は左右0px、768px以上は10px
2019/12/26
ナビヘッダのタイトルをトグルボタンと連接するデザインに変更
ナビ　モバイルメニュートグル幅をwidth:50→60に広げる
2019/12/26
モバイル時のトグルボタンの赤とオレンジを調整
2019/12/27
不要になった!importantを解除
2019/12/27 追加
特定の位置で追従を終了するアフィックス（affix.js）のスタイル
これがないとナビ固定時に正常に機能しない。とても大切。
2019/12/29
ナビヘッダのタイトル568px時、微調整20pxへ
行送りが有効に働いていない事があるため
2020/01/03
ナビバーのブランド・ロゴマウスオーバー時の色別の対応を廃止して1つに統合
前のmain.cssでパレット毎の色指定を行っていたのでしかたがなく対応していたが、互換性を廃止した事で実現できた。
これによって行数を大幅に減らすことができた。
2020/01/04
ナビのフォーム枠の余白の調整。Boostrapで指定されていた。
2020/01/05
画面レイアウト調整に伴うナビのヘッダーのマージンを再度調整
2020/01/10
ナビメニューの上下マージン0.1emを廃止、0へ
2020/01/12
モバイル時の折りたたみナビメニューバーの高さを指定して、中身を上下スクロールできるように設定
65Viewport Height（vh）：viewportの高さに基づく比率を指定
2020/01/15
ナビの左右排他領域を10pxの絶対値から0.5emの相対値指定にする
ナビ枠線の上線を992px以上は2pxにする。
2020/01/15
ヘッドコピーのグレー下線を試験終了のためコメントアウト
2020/01/15
ナビヘッダに768px以上でボックスシャドウをつける。
スマートフォンでは高速化のため出さない
2020/02/08
メニュートグルボタンの枠線の文法エラーを修正
2020/06/30
.navbar-toggleにfloat: right;ボタン位置の指定を追加
2020/07/04
ナビ　モバイル時メニュー修正
アイコンだけではわからない事も多いので「MENU」文字を表示する
2020/07/04
ナビトグルボタンマウスフォーカス時のボタンの照度を明るくする反応がスマホ時だと外れないので外す
2020/07/08
レイアウトfullpage時に使われる.haik-fullpage-content .rowクラスと.container-fluidクラスの余白を調整
fullpage専用。em単位だとレイアウト崩れがあるのでpx単位にしている
これによってセクションの余白がなくなり、見出し余白が広くなる
2020/07/23
画面レイアウト調整に伴うナビのヘッダーのマージン、margin-right: 0px;に再調整
ナビ表示で左右スクロールバーが出る課題が解消
2020/07/31
ナビバーのブランド・ロゴマウスオーバー時の色を白だけではわかりづらいので明るいグレーに修正
2020/08/05
特定の位置で追従を終了するアフィックスで
長らく下線が出ている原因がわからなかったがようやくここだとわかった。
コメントで残す。デザインのテストで使う時はこれを使う
2020/09/21
メニュートグルボタンの色を濃くする
2020/09/22
.haik-palette-orangeナビのメニュー部の背景色の修正
2020/09/23
説明文の誤りを修正
2020/09/25
ナビバーのブランド・ロゴマウスオーバー時の反応の複数の記述を統一する
2020/09/25
ナビトグルボタンマウスオーバー時の反応の無駄な記述を止めて統一する
2021/01/29
2Kに対応、1700px、2000pxの文字の大きさを追加。デザインは随時見直し
サイドメニューの文字バランスは検討
20201/01/31
ナビ・ドロップダウンメニューの装飾をnagamira_css1h.cssから移転
コードの肥大化を防ぐため
20201/01/31
タブの装飾ををnagamira_css1h.cssから移転
コードの肥大化を防ぐため
2021/01/31
ナビの高さの調整、ipadでナビの高さが小さいと操作性が悪いため
ipad、ipad miniでは操作性が悪いホームページが増えている
数万円程度のワードプレスの市販テーマでも十分に対応しきれていないものが増えてきている
枠の中でアコーディオンパネルを表示できないのもそう
2021/02/13
ナビバーに微妙に空間ができるのでline-height:を0.8emから0.7emへ修正
2021/08/31
【試作中】タブの文字の大きさをiphone7,8,SE2でも読みやすくする
2021/08/31
【試作中】モバイル時のメニュー文字の大きさをiphone7,8,SE2でも読みやすくする
2021/09/06
アイキャッチ・セクション余白を大きくする
クラス .title-wrapper-largeを追加
.title-wrapper-lでも可能
2021/09/06
アイキャッチ・セクション余白を大きくする
クラス .title-wrapper-largex2を追加
2021/09/14
タブのタイトルマージンの余白を調整。丸みが大きすぎたデザインをすっきりしたものにした。
操作性を考えて余白比率を【モバイル画面】padding: .3em .6em;と【タブレットPC画面】padding: .2em .6em;に統一
2021/09/14
タブの配置を真ん中 justify-content: center;　に設定
これはスマホで左から配置しても無意識に見落とすよくあるため、真ん中にする事で注目しやすくする
本文内ではタブを1度に多く記述するより、2個程度の抑えた方が視認性がよく、スマートフォンの画面での切り替えもしやすくコードも確認しやすい。
2021/09/14
ナビ(.navbar-default .navbar-nav>li>a)の高さの調整。
タブレット（ipad）で上下が大きくなりすぎていたのを減らす
2021/09/15
ナビ(.navbar-default .navbar-nav>li>a)の文字の大きさの調整
高解像度ディスプレイでも問題無く見られるようにするため
2021/09/15
ヘッドコピーが1行表示になるようあふれた文字は隠すようにした
モバイル端末ではこれがあった方がいいため。.haik-headcopy h1に
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
を追加。
2021/10/17
タブの文字色を修正
従来の #333; だとihponeでははっきりせず目に弱いので
これを #111; で色を強調する形にした

2022/07/23
スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整
iphone5,SE
font-size: 18px;

Android
iphone7,8,SE2
font-size: 20px;

iphone7 PLUS,8 PLUS,XS,XS Pro
iphone11,12,13/Pro
iphone12,13/Pro/ProMax
font-size: 22px;

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

/*==================================
 ヘッドコピーの修正 
2018.05.04
2019.03.03
メディアクエリ1200px以上の場合を追加
文字間詰め
min-width: 768px　以上は大きくしてもメリットがない
2019.03.14
ヘッドコピーを大きくする
スマホ画面でもあった方がいい場合もあるので大きくしてみる
色は導入する人にセレクトしてもらう事もある
なおアイキャッチのh1見出しと内容が重ならない方がよい
2019.03.19
ヘッドコピー：メディアクエリ1024px以上の場合を有効に
2019.03.27
568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。
2019.04.04
ヘッドコピーの色を修正。目に飛んでくる重要な情報なので、コントラスト比が7以上になるようにする。
2019.09.04
ヘッドコピーの罫線を追加
2019.09.05
ヘッドコピーの書体大きさを調整
2019.09.10
ヘッドコピーの書体大きさでタブの文字の大きさを指定していたのを修正
2019/09/11
ヘッドコピー書体の大きさの調整
2019/09/14
ヘッドコピーのセレクタに条件分岐セレクタを追加して、汎用性を持たせた。
[class^="haik-palette-"]
2019/09/24
ヘッドコピーの左排他領域を1emから0.5emにする
2019/09/25
トグルボタンのマージンを調整、テキストそろえを縦横真ん中にする
2019/09/25
今設置している縁取りをどうするか検討する
    書体サイズ毎に線を変える
    全て白か黒で統一するか
2019/09/25
ブランド名：タイトルマウスオーバー時は明るい目のパレット色に変化
2019/12/23
ナビ　トグル上下位置の調整
2020/01/15
ヘッドコピーのグレー下線を試験終了のためコメントアウト
2021/09/15
ヘッドコピーが1行表示になるようあふれた文字は隠すようにした
モバイル端末ではこれがあった方がいいため。.haik-headcopy h1に
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
を追加。
==================================*/
.haik-headcopy {
	background-color: inherit;
	/* border-bottom: 1px solid #e9e9e9 */
}

.haik-headcopy h1 {
    margin: auto;
    padding-left: 0.5em;
    font-size: 14px;
    font-weight: 700;
    color: #0051b3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

@media (min-width: 568px) {
    .haik-headcopy h1 {
        font-size: 18px;
    }
}

@media (min-width: 768px) {
    .haik-headcopy h1 {
        font-size: 16px;
    }
}

@media (min-width: 992px) {
    .haik-headcopy h1 {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .haik-headcopy h1 {
        font-size: 20px;
    }
}
@media (min-width: 1500px) {
    .haik-headcopy h1 {
        font-size: 22px;
    }
}
@media (min-width: 2000px) {
    .haik-headcopy h1 {
        font-size: 24px;
    }
}

/*==================================
2019.03.13
Haik_kinaco で使えるかもしれない
ページヘッダー（ヘッドコピーとは別モノ）
パレット6色専用ページヘッダーのPセレクタの書体大きさ調整
課題
haik_docでは別のクラス名になっているので別途設定が必要。
2019.03.27
568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。
2019.05.03
条件セレクタを使った記述で記述行数を減らす事に成功
2019/12/29
解像度1500px以上の文字サイズを追加しているが、ここは見送る。
ヘッダの高さ50pxの制限を超えるため
2020/09/27
予備としてコメント化
==================================*/
/*
[class^=".haik-palette-"] header.container.haik-header p {
	font-size: 20px;
	line-height: 1.6em;
	margin: 0;
}
@media (min-width: 568px) {
	[class^=".haik-palette-"] header.container.haik-header p {
		font-size: 22px;
	}
}
@media (min-width: 768px) {
	[class^=".haik-palette-"] header.container.haik-header p {
		font-size: 20px;
		line-height: 1.8em;
	}
}
@media (min-width: 992px) {
	[class^=".haik-palette-"] header.container.haik-header p {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	[class^=".haik-palette-"] header.container.haik-header p {
		font-size: 24px;
	}
}
*/
/*==================================
2019.03.13
Haik_doc のページヘッダー（ヘッドコピーとは別モノ）
パレット6色専用ページヘッダーのPセレクタの書体大きさ調整
課題
haik_docでは別のクラス名になっているので別途設定が必要。
2019.03.27
568px時のメディアクエリを入れる。これは横にした時、少し大きくすること見やすくするため。
2019/12/29
解像度1500px以上の文字サイズを追加（複数）
2020/09/27
予備としてコメント化
==================================*/
/*
header.haik-header.clearfix p {
	font-size: 20px;
	line-height: 1.6em;
	margin: 0;
}
@media (min-width: 568px) {
	header.haik-header.clearfix p {
		font-size: 22px;
	}
}
@media (min-width: 768px) {
	header.haik-header.clearfix p {
		font-size: 20px;
		line-height: 1.8em;
	}
}
@media (min-width: 992px) {
	header.haik-header.clearfix p {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	header.haik-header.clearfix p {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
	header.haik-header.clearfix p {
		font-size: 26px;
	}
}
*/

/*===================
2019/09/24
ナビヘッダの右回り込みを止める
===================*/
.navbar{
    position:relative;
    min-height:50px;
    margin-bottom:20px;
    border:1px solid transparent
}
@media (min-width:768px){
	.navbar{
		border-radius:4px
	}
}

/*===================
2019/12/27 追加
特定の位置で追従を終了するアフィックス（affix.js）のスタイル
これがないとナビ固定時に正常に機能しない。とても大切。
2020/08/05
特定の位置で追従を終了するアフィックスで
長らく下線が出ている原因がわからなかったがようやくここだとわかった。
コメントで残す。デザインのテストで使う時はこれを使う
	border-bottom: 1px solid #292929;
	background-color: rgba(255, 255, 255, .5);
===================*/
.haik-nav.affix {
	width: 100%;
	z-index: 9;
	top: 0;
}

.haik-nav.affix .list1 .active,
.haik-nav.affix .navbar-nav .active {
	bottom: -1px
}

/*===================
2019/09/24
ナビヘッダの背景色・属性設定
2019/09/24
ナビのブランド名部分を回り込みを廃止して独立したブロックにする
メニューがあると文字数を減らしてしまうが、文字数は多い法がよい。
2019/09/24
ナビヘッダに背景色を設定する（オリジナルにない）
2019/12/03
ナビヘッダをグラデーションにする
ヘッダが単色では安っぽい感じが否めないが、グラデーションになると高級な雰囲気になる
2020/01/15
ナビヘッダに768px以上でボックスシャドウをつける。
スマートフォンでは高速化のため出さない
===================*/

.navbar-header{
    background-color:#777;
    background-image: linear-gradient(to top, #aaa 0%, #777 100%);
    z-index: 99;
}
@media (min-width:768px){
    .navbar-header{
	    float:none;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.18);
	}
}


.haik-palette-blue .navbar-header {
    background-image: linear-gradient(to top, #0048bb 0%, #0054d6 100%);
}
    
.haik-palette-green .navbar-header {
    background-image: linear-gradient(to top, #005f2c 0%, #04823e 100%);
}

.haik-palette-cyan .navbar-header {
    background-image: linear-gradient(to top, #005863 0%, #1f808b 100%);
}

.haik-palette-brown .navbar-header {
    background-image: linear-gradient(to top, #582900 0%, #99653a 100%);
}

.haik-palette-red .navbar-header {
    background-image: linear-gradient(to top, #cc3733 0%, #db4441 100%);
}

.haik-palette-orange .navbar-header {
    background-image: linear-gradient(to top,#ff8d16 0%,  #ffa94f 100%);
}

.haik-palette-purple .navbar-header {
    background-image: linear-gradient(to top, #660178 0%, #7a4184 100%);
}

.haik-palette-gray .navbar-header {
    background-image: linear-gradient(to top, #333 0%, #6e7273 100%);
}



/*==================================
ブランド名：ナビゲーションバーのロゴを出さない時のタイトル名
サイト名として会社名などを書く
2019.03.07
メニューボタンを書き換える必要が出てくるため   
height: 50px; より小さくしない
サイト名が長くなるとメニューボタンが自動的に上の方に行くなどレイアウトがずれてしまうので短くするか、画像でも検討する
2019.03.28
ナビゲーションバーのロゴ縦位置のずれを調整
2019.03.28
ナビゲーションバーのブランド名のクラス設定を調整
テーマによってはパレット名指定が必要なため
2019.09.05
ヘッダのレイアウト見直しに伴いブランド名の排他領域（padding-left）を調整
2019.09.07
ブランド名：背景色が入った時のために白縁取りを入れておく
2019.09.11
ブランド名、書体サイズを強制変更するセレクタを使う。
#navigator > div > div.navbar-header > a
body > div.container-fluid.haik-wide-background > header > a

【重要】
テーマseedでパレット毎に以下の無駄な記述をくり返している

.haik-palette-cyan .navbar-brand {
    color: #333;
    font-size: 15px;
}

テーマfablicでパレット毎に以下の無駄な記述をくり返している
こちらはヘッダーにナビブランドを記述するようになっているが基本は同じ。
.haik-palette-black .haik-header .navbar-brand {
    color: #333;
    font-size: 16px;
}

文字色の指定のみにすればいいものをフォントサイズまで指定している。
テーマの制作方針が統一されていなかったと思われる

2019/09/11
ヘッドコピー書体の大きさの調整

2019/09/22
ブランド名：ナビゲーションバーのロゴを出さない時のタイトル名 色設定
2019/09/24
ブランド名：書体を太くする
2019/09/24
display:blockに切り替えて、タイトルが中央に来るようにする。
headerの方もdisplay:blockにすること。
2019/09/25
ブランド名：書体の大きさを調整
モバイル時、ipad時、小さいので大きくする
2019/09/25
ブランド名：タイトルは768px以上では左揃えにする
ブランド名：タイトル高さを自動調整する
排他領域上下を16pxから8pxに減らして2行になっても最低高さ50PX内なら違和感のないように設定
2019/09/25
今設置している縁取りをどうするか検討する
    書体サイズ毎に線を変える←白縁取りだとスマホ画面ではキレイにでない。
    全て白か黒で統一するか←決定
2019/09/25
ブランド名：書体色、全て白か黒で統一へ。
明るい目の背景色の時は黒を強調した色で
2019/09/27
ihpone5（SE）解像度追加　書体の大きさ調整
2019/09/29
ブランド名：タイトルはjustify-content: center;で中揃えにする
768px以上ではjustify-content: left;で左揃えにする
2019/11/06
.navbar-brandの排他領域padding-left:1em;→1.5em;
2019/12/06
ナビバーのブランド（.navbar-brand）の文字に影をつける事でメリハリをつける
（背景の帯装飾が白にすると文字が見えなくなるので必要）
2019/12/21
ナビのヘッダーの左右マージンを-5pxにする。
意味不明な右余白ができる原因がわかったため。
原因はメインコンテナーの左右排他領域の指定と見出し2のずれ
2019/12/25
ナビヘッダの高さ調整50PX固定に。
タイトルが折り返されると高さが56pxになることがわかったため。
2019/12/26
ナビヘッダのタイトルをトグルボタンと連接するデザインに変更
2019/12/29
ナビヘッダのタイトル568px時、微調整20pxへ
行送りが有効に働いていない事があるため
2021/01/29
1700px以上,2000PX以上の文字の大きさを追加
2021/01/30
2500px以上は文字の大きさを32pxに設定
==================================*/
.navbar-brand{
    float: none;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    padding-right: 1em;
    padding-left: 1em;
    font-size: 18px;
    font-weight:700;
    height: 50px;
}
@media (min-width: 568px) {
    .navbar-brand{
        font-size: 20px;
    }
}
@media (min-width: 768px) {
    .navbar-brand{
        font-size: 22px;
        text-align: left;
        justify-content: left;
    }
}
@media (min-width: 992px) {
    .navbar-brand{
        font-size: 24px;
    }
}
@media (min-width: 1200px) {
    .navbar-brand{
        font-size: 26px;
    }
}
@media (min-width: 1500px) {
    .navbar-brand{
        font-size: 28px;
    }
}
@media (min-width: 1700px) {
    .navbar-brand{
        font-size: 30px;
    }
}
@media (min-width: 2000px) {
    .navbar-brand{
        font-size: 32px;
    }
}
@media (min-width: 2500px) {
    .navbar-brand{
        font-size: 34px;
    }
}
/* ======================
ナビバーブランド名のマウス反応時の処置
排他領域の調整 
2019.05.06
条件セレクタで冗長性を廃止
2019/09/22
ナビバーブランド名文字色と縁取りについてはカスタマイズ項目とする

====================== */
@media (max-width: 767px) {
    .navbar-default .navbar-nav > li a {
        padding: 8px;
    }
}

/*======================
ブランド名：ナビゲーションバーのロゴを出さない時のタイトル名 色設定
【2019/09/22 注意】
テーマ毎にナビのクラス名と指定方法がバラバラなのでそれぞれに合わせて調整すること
2019/09/24
ブランド名：ナビゲーションバータイトル色の明度を上げて読みやすくした
色の明度の調整次第では上品さがなくなるので注意
2019/09/25
ブランド名：タイトルマウスオーバー時は明るい目のパレット色に変化
2019/12/06
ナビバーのブランドの文字に影をつける事でメリハリをつける
（背景の帯装飾が白にすると文字が見えなくなるので必要）
ただし、オレンジ色など黒文字の場合は影をオフに
2020/01/03
ナビバーのブランド・ロゴマウスオーバー時の色別の対応を廃止して1つに統合
前のmain.cssでパレット毎の色指定を行っていたのでしかたがなく対応していたが、互換性を廃止した事で実現できた。
これによって行数を大幅に減らすことができた。
（前の説明ではこう書いていた）
ナビバーのブランド・ロゴ 
ただし、オレンジなど白系統では見づらい場合は黒文字を指定する
白の上にある色は元の色を参考のために置いておく
1つに統合できなかったのはオリジナルの方でそれぞれの色が指定されており、クラス優先度で呼ばれていたため。
2020/07/31
ナビバーのブランド・ロゴマウスオーバー時の色を白だけではわかりづらいので明るいグレーに修正
2020/09/25
ナビバーのブランド・ロゴマウスオーバー時の反応の複数の記述を統一する
======================*/

/* デフォルトは白 */
.navbar-brand,
.navbar-default .navbar-brand{
    color: #fff;
}

.navbar-brand:hover,
.navbar-default .navbar-brand:hover{
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    transition: 0.3s ease;
}

/* 
2020/01/03
ナビバーのブランド・ロゴマウスオーバー時の色別の対応を廃止して1つに統合
前のmain.cssでパレット毎の色指定を行っていたのでしかたがなく対応していたが、互換性を廃止した事で実現できた。
これによって行数を大幅に減らすことができた
*/

/* ======================
オレンジ色は白抜きでは見づらいので文字を黒にする。
黒さを強調しないとグレーがかかった感じになる。
影はオフにしないとみづらい
====================== */
.haik-palette-orange .navbar-default .navbar-brand {
    color: #333;
    text-shadow: none;
}


/*===================
2019.09.07
ナビ余白左のレイアウト修正
2019/11/06
ナビ余白の排他領域の調整修正【重要！】
【説明】
上位containerクラスで左右排他領域を確保している
（nagamira_css1.cssのcontainerで確保している）
これを
.container-fluid>.navbar-collapse,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container>.navbar-header
で継承しているが、同時に左右の排他領域も継承してしまう。
以下のクラス
.container-fluid>.navbar-header,
.container>.navbar-header
で継承された排他領域を左右マージンにマイナス値を与えて消している。
.container-fluid>.navbar-collapse,
.container>.navbar-collapse
については今のところそのままにしてある。
2019/12/01
ナビのヘッダーの右マージンを0にする。意味不明な右余白ができるのを防ぐ
2019/12/21
ナビのヘッダーの左右マージンを隙間が出内容に調整する。
意味不明な右余白ができる原因がわかったため。
原因はメインコンテナーの左右排他領域の指定と見出し2のずれ
2019/12/22
ナビのヘッダーの右マージンで隙間が出るので再度ナビのヘッダーの右マージンを0にする。
2020/01/05
画面レイアウト調整に伴うナビのヘッダーのマージンを再度調整
2020/07/23
画面レイアウト調整に伴うナビのヘッダーのマージン、margin-right: 0px;に再調整
ナビ表示で左右スクロールバーが出る課題が解消
===================*/

.container-fluid>.navbar-header,
.container>.navbar-header {
    margin-right: 0px;
    margin-left: -5px;
}

@media (min-width: 568px) {
.container-fluid>.navbar-header,
.container>.navbar-header {
    margin-left: -10px;
    }
}

@media (min-width: 768px) {
.container-fluid>.navbar-header,
.container>.navbar-header {
    margin-left: -8px;    }
}

@media (min-width: 992px) {
.container-fluid>.navbar-header,
.container>.navbar-header {
    margin-left: -15px;    
    }
}

/*===================
2019/12/25
ナビメニューの謎のマージンを廃止。Boostrapで指定されていた。
===================*/
.navbar-nav {
    margin: 0px 0px;
}

/*===================
2020/01/04
ナビのフォーム枠の余白の調整。Boostrapで指定されていた。
===================*/
.navbar-default .navbar-form {
    margin: 0px;
}

/*===================
2019.09.11
コンテナー左右排他領域の修正
左右排他領域でがら空きになった空間を消してすっきりした印象にする
===================*/

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 0px;
}

/*===================
2021/09/06
アイキャッチ・セクション余白を大きくする
クラス .title-wrapper-largeを追加
関数のクラス指定で class=title-wrapper-largeまたはclass=title-wrapper-l　を指定する
===================*/
.qhm-section.title-wrapper-large .container-fluid,
.qhm-section.title-wrapper-l .container-fluid{
    margin-top: 50px;
    margin-bottom: 50px;
}
@media(min-width:768px) {
    .qhm-section.title-wrapper-large .container-fluid,
    .qhm-section.title-wrapper-l .container-fluid{
        margin-top: 200px;
        margin-bottom: 200px;
    }
}

/*===================
2021/09/06
アイキャッチ・セクション余白を大きくする
クラス .title-wrapper-largex2を追加
関数のクラス指定で class=title-wrapper-largex2またはclass=title-wrapper-ll　を指定する
これはアイキャッチ・セクション余白を倍以上にしたい場合につかう
===================*/
.qhm-section.title-wrapper-largex2 .container-fluid,
.qhm-section.title-wrapper-l .container-fluid{
    margin-top: 100px;
    margin-bottom: 100px;
}
@media(min-width:768px) {
    .qhm-section.title-wrapper-largex2 .container-fluid,
    .qhm-section.title-wrapper-ll .container-fluid{
        margin-top: 200px;
        margin-bottom: 200px;
    }
}

/*===================
2021/09/06
アイキャッチ・セクション余白を大きくする
クラス .title-wrapper-largeを追加
関数に class=title-wrapper-large　を追記する
===================*/
.qhm-section.title-wrapper-large .container-fluid,
.qhm-section.title-wrapper-l .container-fluid{
    margin-top: 50px;
    margin-bottom: 50px;
}
@media(min-width:768px) {
    .qhm-section.title-wrapper-large .container-fluid,
    .qhm-section.title-wrapper-l .container-fluid{
        margin-top: 100px;
        margin-bottom: 100px;
    }
}



/*
2020/07/08
レイアウトfullpage時に使われる.haik-fullpage-content .rowクラスと.container-fluidクラスの余白を調整
fullpage専用。em単位だとレイアウト崩れがあるのでpx単位にしている
*/
@media(min-width:568px) {
.haik-fullpage-content .row {
    margin-left: 0px;
    margin-right: 0px;
    }
.haik-fullpage-content .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
    }
}    

.haik-headcopy .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
}

.navbar-default.haik-nav .container-fluid {
    margin-right: auto;
    margin-left: auto;
  	padding-left: 0px;
    padding-right: 0px;
}

.collapse .navbar-collapse{
	padding-left: 12px;
	padding-right: 12px;
}


.navbar-default {
	color: #737272
}

/*===================
2019.09.11
メインに背景がある時の余白を調整する
主にテーマ　fablicで 有効
===================*/
 .haik-wide-background {
    background-color: #fff;
    margin: 0 8px;
}

@media (max-width: 767px){
 .haik-wide-background {
    padding-left: 0;
    padding-right: 0;
    margin: 0px 10px;
    }
}

@media (max-width: 992px){
 .haik-wide-background {
    padding-left: 0;
    padding-right: 0;
    margin: 0px 15px;
    }
}

/*===================
2019.09.07
新テーマ用のナビ枠線の配色
背景色を変える時はブランドロゴの文字など配色に注意すること
2019.09.11
ナビの左枠線を消す
オリジナルではあっても今は意味がないため
2019/09/24
ナビ枠線の上線を引く
ナビ要素のタブ装飾効果の上がくっついて見づらいため透明な線を引く
　空間を作って見やすくする
2019/09/26
　.navbar-collapseの行高を0.8emに設定する。　
2019/12/20
ナビ枠線の上線を4pxから1pxにする。
2019/09/24より操作性が十分に確保できるようになったため。
2019/12/26
Boostrapの仕様の問題で右側に謎の余白ができていたのを解消。
ナビのメニュー部分の排他領域を調整。
モバイル時は左右0px、768px以上は10px。
2020/01/12
モバイル時の折りたたみナビメニューバーの高さを指定して、中身を上下スクロールできるように設定
65Viewport Height（vh）：viewportの高さに基づく比率を指定
従来はこの高さ指定がないため、ナビを固定した時の使い勝手が悪かったがこれで
2020/01/15
ナビの左右排他領域を10pxの絶対値から0.5emの相対値指定にする
ナビ枠線の上線を992px以上は2pxにする。
2021/02/13
ナビバーに微妙に空間ができるのでline-height:を0.8emから0.7emへ修正
===================*/
.navbar-default .navbar-collapse {
    border-left:none;
    background-color: transparent;
    border-top: 0px solid transparent;
    line-height: 0.7em;
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 0px;
    padding-left: 0px;
    height: 65vh;
}
@media (min-width: 768px) {
    .navbar-default .navbar-collapse {
        border-top: 1px solid transparent;
        padding-right: 0.5em;
        padding-left: 0.5em;
    }
}
@media (min-width: 992px) {
    .navbar-default .navbar-collapse {
        border-top: 2px solid transparent;
    }
}


/*======================
2019.09.24
ナビのメニュー部の背景色を指定する（クラス.haik-nav.navbar-default）
パレット毎にそれぞれの色を指定する。
カスタマイズする場合はここをカスタマイズする

テーマ毎にクラス指定の組み合わせが異なるので、どのクラスを使っているかを確認すること
新テーマ用のナビ背景の配色
色の後ろにある「20」をパーセンテージで指定することで透明度が変わる
透明になる分、色を鮮やかにしている
2019/12/02
ナビのメニュー部の背景色、ナビヘッダの色調が変わったので、合わせて修正
グラデーション指定例
    background-color: 基本色（後から修正する場合のために設定）
    background-image: linear-gradient(to top, #開始色 0%, #終了色 100%);
2020/09/22
.haik-palette-orangeナビのメニュー部の背景色の修正
色がどぎついとの話があったため
======================*/
.haik-nav.navbar-default {
    border-radius: 0px;
    background-color: transparent;
    background-image: linear-gradient(to top, #fff1eb 0%, #dfdfdf 100%);
}

.haik-palette-blue .haik-nav.navbar-default {
    background-color: #0054d620;
    background-image: linear-gradient(to top, #ffebeb 0%, #cfe3ff 100%);
}

.haik-palette-green .haik-nav.navbar-default {
    background-color: #40966820;
    background-image: linear-gradient(to top, #fdffcc 0%, #d6fdd3 100%);
}

.haik-palette-cyan .haik-nav.navbar-default {
    background-color: #1f808b20;
    background-image: linear-gradient(to top, #e4e4e4 0%, #fff6d9 100%);
}

.haik-palette-brown .haik-nav.navbar-default {
    background-color: #99653a20;
    background-image: linear-gradient(to top, #fdffcc 0%, #ffb679 100%);
}

.haik-palette-red .haik-nav.navbar-default {
    background-color: #db444120;
    background-image: linear-gradient(to top, #fdffcc 0%, #ffc8c8 100%);
}

.haik-palette-orange .haik-nav.navbar-default {
    background-color: #eba65b20;
    background-image: linear-gradient(to top, #fdffcc 0%, #ffd5a9 100%);
}

.haik-palette-purple .haik-nav.navbar-default {
    background-color: #9f5bab20;
    background-image: linear-gradient(to top, #fff7dc 0%, #ffdcdc 100%);
}

.haik-palette-gray .haik-nav.navbar-default {
    background-color: #6e727320;
    background-image: linear-gradient(to top, #eaeaea 0%, #ffffff 100%);
}


/*======================
（終わり）ナビバーを背景色をつける時のユニット
カスタマイズ用に確保
通常はコメント
======================*/




/* =================
 * 2018.05.09　前川修寛
 * ナビ　モバイル時メニュー修正
 * 「MENU」文字をWEBアイコン「ハンバーガー」に置き換える。
 * 2019/03/01 調整
2019/09/09
nagamira_css2.cssからnagamira_css10.cssへ移動
ナビに関わる事をnagamira_css10.cssで行うためまとめる
2020/07/04
ナビ　モバイル時メニュー修正
アイコンだけではわからない事も多いので「MENU」文字を表示する
2020/07/04
ナビ　モバイル時メニュー「MENU」文字を表示しないバージョン

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


/* 標準の「MENU」文字を表示する */
/*
.icon-bar-menu {
    display: block;
    font-size: 12px;
    color: white;
    line-height: 1.2em;
}
*/

/* 上記に対して標準の「MENU」文字を消す場合はこちらを使う */
.icon-bar-menu {
    display: none;
}


/* =============
 * ナビ　モバイル時メニュー修正
 * 初期値（ハンバーガーアイコン）
 * font-family: 'Glyphicons Halflings';にはハンバーガーアイコンあり
 * https://glyphicons.bootstrapcheatsheets.com/#　
 * で調べられる
 * 閉じている時（ハンバーガー　"\e236"　）
 * 開いている時（close　 "\e014"）を出す
2019/09/09
ナビ　モバイル時メニューアイコンを変更

閉じている時（ハンバーガー　"\e236"　）
開いている時（マイナス - "\2212"）を出すか？
現状ではマイナス記号より×の方がよい。

2019/12/23
ナビトグルのモバイル時メニューアイコンfont-family: 'Glyphicons Halflings'をfont-family: FontAwesome;に変更
デザインが洗練されている
============= */


/* 初期値 */

.navbar-toggle::before {
    font-family: FontAwesome;
    content: "\f0c9";
    font-size: 28px;
    color: white;
    transition: 0.3s;
    vertical-align: middle;
    transition: .3s ease;
}


/* 開いている時 */

.navbar-toggle[aria-expanded="true"]::before {
    content: "\f00d";
}


/*
 * 閉じている時 
 */

.navbar-toggle.collapsed[aria-expanded="false"]::before {
    content: "\f0c9";
}


/* 
メニューの外観調整
2019.05.26
スマホのメニューボタンのアイコン位置がFireFoxでずれる問題の調整
*/

/* 
2019/09/11
トグルボタンの大きさと領域の調整
2019/09/24
スマホ時のナビトグルボタンの枠線を廃止
2019/09/25
トグルボタンのマージンを調整、テキストそろえを縦横真ん中にする
タイトルの行送りに合わせて上からの位置を真ん中に来るよう調整したい
　→2019/09/25 排他領域上下を調整して2行にしても高さ50PX内なら可能なように違設定済み
　 それ以上はタイトルが長すぎるという事。
2019/11/07
トグルの右からのピクセル数、568pxの時の位置が変わらないように調整
（スマホを横にした時のトグル位置が変わらないように）
2019/11/06のナビ余白の排他領域の調整修正に伴う修正
2019/12/23
ナビ　モバイルメニュートグル上下位置の調整
2019/12/25
ナビ　モバイルメニュートグル上下位置ずれの調整
2019/12/26
ナビ　モバイルメニュートグル、マージンを廃止して大きさをナビヘッダに合わせる。
角の丸めも止める
2019/12/26
ナビヘッダのタイトルをトグルボタンと連接するデザインに変更
ナビ　モバイルメニュートグル幅をwidth:50→60に広げる
2019/12/27
border-radius: 0px !important;
は上位で指定されているため、やむなく使う
2020/06/30
.navbar-toggleにfloat: right;ボタン位置の指定を追加
*/
.navbar-toggle {
    position:relative;
    float: right;
    background-image: none;
    padding: 0px 0px 0px 0px;
    margin-right: 0px;
    margin-left: 0px;
    vertical-align: middle;
    border-radius: 0px !important;
    width: 60px;
    height: 50px;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    transition: 0.3s;
}
/*スマホを横にした時の位置が変わらないように微調整する*/
@media (min-width: 568px) {
.navbar-toggle {
    margin-right: 16px;
    }
}



/*
クリックされてメニューが開いている時、陰をつけて外見を凹ませる
.navbar-toggleクラスに[aria-expanded="true"]が書き込まれるのを利用する
2019/09/24
トグルボタンの影を廃止
*/

.navbar-toggle[aria-expanded="true"] {
    transition: .3s ease;
}


/* =======================
 * 2019.04.01
ハンバーガーボタンの配色見直し
新テーマは8色からはじめる
カスタマイズ依頼を基本とする
テーマ毎に用意すること。
シアンとグリーンの区別がつかないので配色調整
2019/09/09
モバイル時メニューボタンの配色調整
2019/09/24
枠線を廃止
背景を透明にしたいけれど、元の色を出してしまうので妥協している
2019/12/01
モバイル時のトグルボタンのデフォルト色を調整
2019/12/26
モバイル時のトグルボタンの赤とオレンジを調整
2020/02/08
メニュートグルボタンの枠線の文法エラーを修正
2020/09/21
メニュートグルボタンの色を濃くする
=======================*/
/* メニュートグルボタンの枠線と背景色を指定する */
.haik-nav.navbar-default .navbar-toggle{
    border: 0px solid transparent;
    border: none;
    border-left: 1px solid #eeeeee80;
    background-color: #999;
 }

.haik-palette-blue .haik-nav.navbar-default .navbar-toggle {
    background-color: #003382;
}

.haik-palette-green .haik-nav.navbar-default .navbar-toggle {
    background-color: #00401e;
}

.haik-palette-cyan .haik-nav.navbar-default .navbar-toggle {
    background-color: #002125;
}

.haik-palette-brown .haik-nav.navbar-default .navbar-toggle {
    background-color: #4c2200;
}

.haik-palette-red .haik-nav.navbar-default .navbar-toggle {
    background-color: #8c0300;
}

.haik-palette-orange .haik-nav.navbar-default .navbar-toggle {
    background-color: #984f00;
}

.haik-palette-purple .haik-nav.navbar-default .navbar-toggle {
    background-color: #3e0048;
}

.haik-palette-gray .haik-nav.navbar-default .navbar-toggle {
    background-color: #000000;
}

/*
ナビトグルボタンマウスオーバー時の反応
2019/09/24
ナビトグルボタンマウスオーバー時の反応をふわっと白く点灯するような感じに統一する
2019/12/03
ナビトグルボタンマウスオーバー時の反応でボタンの照度を明るく、グラデーションに変更
2020/07/04
ナビトグルボタンマウスフォーカス時のボタンの照度を明るくする反応がスマホ時だと外れないので外す
2020/09/25
ナビトグルボタンマウスオーバー時の反応の無駄な記述を止めて統一する
*/
.haik-nav.navbar-default .navbar-toggle:hover{
    background-color: rgba(255, 255, 255, 0.3);
    color:#333;
    transition: .3s ease;
}

/*
.navbar-toggle:hover::before {
    transition: .3s ease;
}
*/

/*============
2019/09/10
ドロップダウンメニューの下向き三角印（キャレット）
1サイズだったのをメディアクエリ毎に拡大してわかるようにした
2019/09/23
ドロップダウンメニューの下向き三角印（キャレット）を大きくする
スマホでは点にしか見えないものもあったので
2019/09/24
ドロップダウンメニューの下向き三角印（キャレット）をnagamira_css8.cssから移動
2019/09/24
テーマ毎にバラバラなナビキャレットを統合
============*/
.caret,
.nav .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 8px dashed;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
}
@media (min-width: 992px) {
    .caret,
    .nav .caret {
    border-top: 10px dashed;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    }
}

/* =============================
2019.03.02
ＰＣ版メニュー・ドロップダウンメニュー
文字の大きさを再定義、ナビの記述を楽にする
文字そろえを真ん中に設定

モバイル時のメニューの文字の大きさを画面の大きさで再定義する
モバイル版メニュー・ドロップダウンメニュー
文字の大きさを再定義、ナビの記述を楽にする
文字そろえを真ん中に設定
解像度が高いと文字が小さくなるので大きくしている

2019.03.03
.nav>li>a
ナビバーのメニュータイトルとタブのタイトルで書式を兼ねているのが課題
タブ間の空白を0へ    margin-right: 0px;
メニューの大きさを小さくしてレイアウト崩れを修正
ドロップメニューの文字を大きく
大きさを調整
2019.03.04
大きさを調整
2019.03.15
ドロップメニューの文字がPC画面では中央揃えになっている。スマホではこれでいいが768px以上では不自然なので左揃えに変更。
2019.03.19
ナビ文字を大きくする
メディアクエリに1200px時を追加
2019.03.28
568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。
ナビの上マージンを廃止
2019.05.13
テキストを左寄せにして、入りきらない場合は改行する
2019.05.29
タブであふれた文字は隠す
2019.09.05
ナビのメニュー横幅を0.3emから0.4emに広げる
見やすくなった
2019.09.05
768px時ナビの高さheight:を2.6emにした
タイトルの行高を1.6em;から1.7em;にした
少し大きくなるのと行送りが隠れるようになる
2019.09.06
クラス名の衝突を回避するように修正
(ナビバーのメニュー項目単体)
.navbar-nav > li > a
(ナビバーのメニュー項目単体)
.navbar-default .navbar-nav > li > a
(ナビバーのドロップダウンメニュー)
.navbar-nav .open .dropdown-menu > li > a 

ここでクラス名を明示したことでメニューでタブのタイトルが折り返して正常に表示されるようになった。
クラス名を明示した事で正常に動くようになったため

2019/09/24
ＰＣ版メニュー・naviドロップダウンメニューテーマ毎に記述設定が分かれているので統合する

2019/09/27
ihpone5（SE）解像度追加　書体の大きさ調整
2019/09/29
主にテーマMOIで利用されるナビ要素のpaddingを設定
 0.2em 0.4em; 他のものに合わせる
2019/12/27
ナビドロップダウンメニューの文字大きさで使っていた!important指定を解除。
不要になったので
2019/12/31
CSSだけでテキスト類のみフェードイン
2020/01/01
モバイル時のナビ要素のborder-bottom: 1px solid transparent;を0へ
マウスオーバー時にちらつきがあるため
2021/01/30
2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し
2021/01/31
ナビの高さの調整、ipadでナビの高さが小さいと操作性が悪いため
ipad、ipad miniでは操作性が悪いホームページが増えている
数万円程度のワードプレスの市販テーマでも十分に対応しきれていないものが増えてきている

枠の中でアコーディオンパネルを表示できないのもそう

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

.navbar-nav li>a {
	line-height: 2.2em;
	margin-right: 0em;
	padding: 0.2em 0.4em;
	text-align: left;
	font-weight: 700;
	font-size: 18px;
	transition: 0.3s;
	overflow: hidden;
}
/*
2019/09/29
ナビ要素のpaddingを設定など
0.2em 0.4em; 他のものに合わせる
2019/12/27
ナビ要素のborder-bottom: 3px　→ 1pxに置き換える。空間確保
2019/12/27
ナビ要素の重複するパターンを統合、ただし、読みやすさを優先して残しているものもある。 
2020/01/15
ナビメニュー要素に1500px以上のパターンを追加。
ユニバーサルデザイン対応で読みやすくするため
2021/01/30
2Kに対応、2000px、2500pxの文字の大きさを追加。デザインは随時見直し
2021/01/30
2000px、2500px時のナビの行高の可変を調整
ナビの文字を大きくした方がいいと判断
2021/08/31
【試作中】モバイル時のメニュー文字の大きさをiphone7,8,SE2でも読みやすくする
2021/09/14
ナビ(.navbar-default .navbar-nav>li>a)の高さの調整。
タブレット（ipad）で上下が大きくなりすぎていたのを減らす

 */

.navbar-default .navbar-nav>li {
    padding: 0;
    margin: 0 0.1em;
}
.navbar-default .navbar-nav>li>a {
	font-size: 20px;
	line-height: 2em;
	transition: 0.3s;
	overflow: hidden;
	padding: 0.2em 0.4em;
	border-bottom: 0;
}
.navbar-nav .open .dropdown-menu>li>a {
	line-height: 2em;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	transition: 0.3s;
}
/*iphone5,SE*/
@media (min-width: 320px) {
	.navbar-nav>li>a, .navbar-default .navbar-nav>li>a {
		font-size: 24px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		text-align: center;
		font-size: 24px;
	}
}
/*Android*/
@media (min-width: 360px) {
	.navbar-nav>li>a, .navbar-default .navbar-nav>li>a {
		font-size: 20px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		text-align: center;
		font-size: 20px;
	}
}
/*iphone7,8,SE2*/
@media (min-width: 375px) {
	.navbar-nav>li>a, .navbar-default .navbar-nav>li>a {
		font-size: 24px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		text-align: center;
		font-size: 24px;
	}
}
/*モバイル横にした時*/
@media (min-width: 568px) {
	.navbar-nav>li>a, .navbar-default .navbar-nav>li>a {
		font-size: 26px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		text-align: center;
		font-size: 26px;
	}
}
/*
画面上部ナビの高さの調整
ここはカスタマイズ対応もOK

2021/09/14
ナビ(.navbar-default .navbar-nav>li>a)の高さの調整。
タブレット（ipad）で上下が大きくなりすぎていたのを減らす
ドロップダウンメニューは従来通りでOK
2021/09/15
ナビ(.navbar-default .navbar-nav>li>a)の文字の大きさの調整
高解像度ディスプレイでも問題無く見られるようにするため

*/
@media (min-width: 768px) {
	.navbar-nav>li>a {
		font-size: 22px;
		line-height: 1.7em;
		height: 2.6em;
		overflow: hidden;
	}
	.navbar-default .navbar-nav>li>a {
		font-size: 22px;
		line-height: 1.4em;
		height: 1.8em;
		overflow: hidden;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		text-align: left;
		font-size: 22px;
		line-height: 1.5em;
		height: 1.8em;
	}
}
@media (min-width: 992px) {
	.navbar-nav>li>a {
		font-size: 24px;
	}
	.navbar-default .navbar-nav>li>a {
		font-size: 24px;
}
	.navbar-nav .open .dropdown-menu>li>a {
		font-size: 24px;
	}
}
@media (min-width: 1200px) {
	.navbar-nav>li>a {
		font-size: 26px;
	}
	.navbar-default .navbar-nav>li>a {
		font-size: 26px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		font-size: 26px;
	}
}
@media (min-width: 1500px) {
	.navbar-nav>li>a {
		font-size: 26px;
	}
	.navbar-default .navbar-nav>li>a {
		font-size: 26px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		font-size: 26px;
	}
}
@media (min-width: 2000px) {
	.navbar-nav>li>a {
		font-size: 28px;
	}
	.navbar-default .navbar-nav>li>a {
		font-size: 28px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		font-size: 28px;
	}
}
@media (min-width: 2500px) {
	.navbar-nav>li>a {
		font-size: 30px;
	}
	.navbar-default .navbar-nav>li>a {
		font-size: 30px;
	}
	.navbar-nav .open .dropdown-menu>li>a {
		font-size: 30px;
	}
}

/* ===============
2019.03.28
タブ下線とマージン改修
2019.05.03
タブのマージンを箇条書きと区別するように記述
navの中にあるタブなのでこれを区分して記述することでメニューにもタブを書けるようになる
タブ上下マージン見直し
2019.05.10
タブに
    display: flex;
    flex-wrap: row;
を追加してレイアウト崩れを防ぐ
2019.05.11
タブに
    flex-wrap: row;
を
    flex-wrap: row wrap;
に訂正。強制的に行送りさせる
2019.08.24
今後タブのスワイプ化を見通して下線の処理が面倒なので最初から出さない事にする
2019.09.03
タブの文字を白縁にする
視認性を向上するため
2019/09/18
メインとフッターのタブ、上下マージンを広くとる
2019/09/30
タブの.nav-tabsクラスに-js-display: flex;属性を追加。
Flexboxのポリフィル「flexibility.js」を使う事でFlexboxに対応していないIE 9等のブラウザでもFlexboxが有効になる
2019/12/30
箇条書き要素のマージンを増加修正したのに伴い、ナビ要素のマージンを修正する
2020/09/06
1200px以上の画面でアクティブタブの枠線が細いのでこれを太くする
2021/09/14
タブの配置を真ん中 justify-content: center;　に設定
これはスマホで左から配置しても無意識に見落とすよくあるため、真ん中にする事で注目しやすくする
本文内ではタブを1度に多く記述するより、2個程度の抑えた方が視認性がよく、スマートフォンの画面での切り替えもしやすくコードも確認しやすい。
2021/10/17
タブの文字色を修正
従来の #333; だとihponeでははっきりせず目に弱いので
これを #111; で色を強調する形にした
==================*/

.nav.nav-tabs>li {
	margin: 0;
	text-shadow: rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989992px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756802px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279415px 0px;
}
@media (min-width: 768px) {
	.nav.nav-tabs>li {
		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;
	}
}
.nav-tabs {
	-js-display: flex;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	border-bottom: none;
	margin-top: 1.875em;
	margin-bottom: .875em;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
	color: #111;
	background-color: inherit;
	border: 2px solid #ccc;
	border-bottom: 2px solid transparent;
	cursor: default;
}
@media (min-width: 1200px) {
    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:focus,
    .nav-tabs>li.active>a:hover {
        border-width:3px;        
    }
}

/* ===============
非選択タブ背景色と文字色
2019.03.03
メディアクエリ1200px以上の場合を追加
2019.03.27
568px時のメディアクエリを入れる。これはスマホを横にした時、少し大きくすること見やすくするため。
2019.05.03
タブ枠のマージンの調整
重複している記述を廃止
2019.05.11
タブ書式の調整
2019.08.30
文字の大きさを調整
2019.09.05
クラス名の衝突を回避するように修正
2019.09.05
タブ高さ、幅を調整
タブ文字を調整
2019.09.06
タブの幅をレスポンシブ対応調整
Boostrap.min.css内で宣言されているが、使い勝手が悪いのでここで書き換える
2019/09/07
タブのクラス名を明示したことでメニューでタブのタイトルが表示されるようになった。
クラス名を明示した事で正常に動くようになったため
2020/09/06
タブ上左右の丸めを大きくする。従来のはボタンにしか見えなかったのでこれを改める
2021/01/30
2Kに対応、1500px、2000pxの文字の大きさを追加。デザインは随時見直し
2021/08/31
【試作中】タブの文字の大きさをiphone7,8,SE2でも読みやすくする
2021/09/14
タブのタイトルマージンの余白を調整。丸みが大きすぎたデザインをすっきりしたものにした。
操作性を考えて余白比率を【モバイル画面】padding: .3em .6em;と【タブレットPC画面】padding: .2em .6em;に統一

2022/07/23
スマートフォン縦画面では解像度によって文字配置が微妙に変わるため調整
iphone5,SE
font-size: 18px;

Android
iphone7,8,SE2
font-size: 20px;

iphone7 PLUS,8 PLUS,XS,XS Pro
iphone11,12,13/Pro
iphone12,13/Pro/ProMax
font-size: 22px;

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

/*
2019.09.05
クラス名の衝突を回避するように.nav-tabsとクラスを明示した
*/

.nav-tabs>li>a {
	background-color: #ddd;
	color: #333;
	font-weight: 700;
	font-size: 20px;
	margin-top: 0.07em;
	margin-left: 0.05em;
	margin-right: 0.05em;
	margin-bottom: 0.07em;
	border: 2px solid #fff;
	border-bottom: 3px solid #afa8a8;
	padding: .3em .6em;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
/*iphone5,SE*/
@media (min-width: 320px) {
	.nav-tabs>li>a {
		font-size: 18px;
	}
}
/*Android*/
/*iphone7,8,SE2*/
@media (min-width: 360px) {
	.nav-tabs>li>a {
		font-size: 20px;
	}
}
/*
iphone7 PLUS,8 PLUS,XS,XS Pro
iphone11,12,13/Pro
iphone12,13/Pro/ProMax
*/
@media (min-width: 375px) {
	.nav-tabs>li>a {
		font-size: 22px;
	}
}
/*モバイル横にした時*/
@media (min-width: 568px) {
	.nav-tabs>li>a {
		font-size: 24px;
	}
}
@media (min-width: 768px) {
	.nav-tabs>li>a {
		font-size: 20px;
    	padding: .2em .6em;
	}
}
@media (min-width: 992px) {
	.nav-tabs>li>a {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	.nav-tabs>li>a {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
	.nav-tabs>li>a {
		font-size: 26px;
	}
}
@media (min-width: 2000px) {
	.nav-tabs>li>a {
		font-size: 28px;
	}
}
@media (min-width: 2500px) {
	.nav-tabs>li>a {
		font-size: 30px;
	}
}


/* ===============
2019.05.03
フッター用タブ マウスオーバー・アクティブ時の色
2019.05.04
フッター用非選択タブ枠線の調整
2019/09/18
メインとフッターのタブ、上下マージンを広くとる
==================*/

.haik-footer .nav-tabs {
	border-bottom: 0px;
	margin: 1.875em 0.5em .875em;
}
.haik-footer .nav-tabs>li.active>a, .haik-footer .nav-tabs>li.active>a:focus, .haik-footer .nav-tabs>li.active>a:hover {
	color: #e2e2e2;
	background-color: transparent;
	border: 2px solid #e2e2e2;
	/* 色毎にいちいち書くのが大変なので線は引かない */
	border-bottom: 0px;
	border-bottom-color: transparent;
	cursor: default;
}
/* ===============
2019.05.03
フッター用非選択タブ背景色と文字色
2019.05.04
フッター用非選択タブ枠線の調整
2019.09.05
フッター用タブの見出しに縁取りを採用
2020/07/18
フッター用タブの見出しに下線を出さない
2021/01/30
2Kに対応、1500px、2000px、2500pxの文字の大きさを追加。デザインは随時見直し
==================*/

.haik-footer .nav-tabs>li>a {
	background-color: transparent;
	color: #ccc;
	font-weight: 700;
	font-size: 18px;
	margin-top: 0.1em;
	margin-left: 0.1em;
	margin-right: 0.1em;
	margin-bottom: 0em;
	border: 2px solid #a5a5a5;
	text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989992px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756802px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279415px 0px;
    text-decoration:none;
}
@media (min-width: 568px) {
	.haik-footer .nav-tabs>li>a {
		font-size: 20px
	}
}
@media (min-width: 768px) {
	.haik-footer .nav-tabs>li>a {
		text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
	}
}
@media (min-width: 992px) {
	.haik-footer .nav-tabs>li>a {
		font-size: 22px
	}
}
@media (min-width: 1200px) {
	.haik-footer .nav-tabs>li>a {
		font-size: 24px
	}
}
@media (min-width: 1500px) {
	.haik-footer .nav-tabs>li>a {
		font-size: 26px
	}
}
@media (min-width: 2000px) {
	.haik-footer .nav-tabs>li>a {
		font-size: 28px
	}
}
@media (min-width: 2500px) {
	.haik-footer .nav-tabs>li>a {
		font-size: 30px
	}
}

/* ================
2019.05.09
タブのマウスオーバー時の色をかえる
2019.09.06
タブのクラス名を明示した
2020/01/04
タブのマウスオーバー時の下線の色の改善
==================*/

/*
.nav-tabs > li > a:hover {
    border-color: #eee #eee #ddd;
    background-color: rgba(155, 155, 155, 0.3);
}
*/

.nav-tabs>li>a:focus, .nav-tabs>li>a:hover {
	border-color: #eee #eee #333;
	text-decoration: none;
	background-color: rgba(155, 155, 155, 0.3);
}



/* ======
コピー防止確認用ダミー
====== */
[class^="haik-palette-"].nagamira.orgm-accordion panel-title.no-toc a:hover {
    color: #db4441;
    transition: 0.3s;
}