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

* media_listを使ったスタイルシート
* 主なもの
* media_listプラグインを使った会話風吹き出し
 「顔写真」
 「コメント」
にするような時に重宝します

2019.05.10
（旧版：未使用でコメントにしていたもの）
medhialistの.media-body背景の色違いで開発開始

2019/09/26
（新版）
いよいよ左右共に会話風に表示可能になるようになります
2019/09/28
nagamira_css11.cssとして独立

2019/09/29
medhialistの.media-body背景の色違いを元に新たにクラス指定

 media_fukidashi_rightの色クラス指定
 media_fukidashi_leftの色クラス指定

2019/10/01
768px時の見出しの大きさを16pxから14pxへ

2019/10/02
大きさを全体で調整
レスポンシブ表示で整合性がとれていなかったため

2019/10/09
黒と濃緑色を追加
予定としてやってみたい事は枠線で背景白の吹き出し。
実は横向きの三角形の白抜きが意外に面倒。
見出し2の吹き出しで調整が大変だったので。

2019/10/10
見出し4を自動的に画像の見出しにするところに最小限文字幅指定を入れる
これがないと文字数が少ない場合、左つめになってカッコ悪い

2019/12/17
会話風吹き出しの左右共に下排他領域を1.8行分追加
これによって同じ向きの吹き出しを続けて使っても写真キャプションが重ならないようにする

2020/01/12
左右吹き出しの画像キャプション（見出し4）で初期化で不足していた属性を追加
メイン画面で見だし4の装飾を変更した場合の影響を避ける

2020/01/12
吹き出し上下マージンを広げる1em→1.5em;

2020/04/12
1500px以上の文字の大きさを28pxに修正。本文の大きさと揃えた。

2020/07/24～25
会話風吹き出し、画面レイアウトの大きな変更に伴う全体レイアウトの修正
絶対値と相対値の使い分けができるようになったのも大きい
7/24　解像度320px、解像度360px、解像度568px対応

2020/07/25
吹き出し会話アイコン、画面解像度に応じて7段階可変するように細かく調整
従来は解像度が変わってもレイアウトがそのままになるので文字が読みにくい事が多い

2020/07/25
Boostrapの色を追加
Boostrap色名称は既存する色の別名として作成しています。吹き出しとして使う事を考えた色の設計なので、ラベルとは色が異なるので注意してください。
（default,secondary,primary,info,success,warning,danger,light,dark）

2020/07/25
media-body内の文字がbs_box関数で囲んだ時に意図せず文字色が変わらないようにデフォルトで黒を設定

2020/07/26
吹き出しの背景と文字の配色の見直し
全体的に細字だと見づらいことが多いので改善する
文字と背景のコントラスト差が強いと文章が見づらくなるのでこれも改善する
2020/07/31
会話風吹き出しの左右共に993px以上からmargin-bottom: 0.5em;を追加
レイアウト崩れを減らす
2020/08/05
パネル内でのmedialist吹き出し表示
レイアウトがはみ出てしまうのを自動的に補正する
2020/08/05
濃い塗りつぶしパネル内でmedialist吹き出しを使っている場合、画像のキャプション文字は自動で白色にする
2020/08/05
明るい塗りつぶしパネル内でmedialist吹き出しを使っている場合、画像のキャプション文字は自動で黒色にする
2020/08/28
モバイル画面時（568px未満、対象によっては359px未満）
アラートボックス(alert)パネル(palel) 内に
記述した吹き出しの大きさ、画像、キャプション位置を自動で調整する
メイン画面にそのまま記述するだけでなく、背景色があるアラートボックス(alert)またはパネル(palel) 内で吹き出しを記述する際に必要になる。
2020/09/21
アラートボックス(alert)パネル(palel) 内にモバイル画面時の記述ミス修正
2020/09/21
会話風吹き出しの1500px以上での表示が枠と一部重なるので、下マージンを2emから3emに広げる
2020/09/28
モバイル画面時（568px未満、対象によっては359px未満）
画像キャプションの位置を左右共に-5pxから-2pxに修正
2021/10/17
吹き出しの文字の大きさをiphone7,8,SE2でも読みやすくする
2021/10/17
吹き出しの文字の大きさ指定で1500px以上の際の表示を新たに追加

*/

/* ＝＝＝＝＝
2019.05.09
media_listプラグインを使った会話風吹き出し
2019.05.09に構想してから着手に4ヵ月かかりました。
最終的には関数にしていきます。

2019/09/26
いよいよ左右共に会話風に表示可能になるようになりました
.media_fukidashi_left
.media_fukidashi_right
【記述方法】
#html2(<div class="media_fukidashi_left">)
#media_list{{
&show(P1470155.jpg,,GX1); 　←吹き出し画像ファイル名
***山田太郎　　　　　　　　←吹き出し画像キャプション名
見事に撮れましたね。←吹き出し台詞
}}
#html2(</div>)

吹き出し画像ファイルは縦横120ピクセルのものが望ましい。
自動でトリミングするので円形に切り抜かなくてもよい。
画像ファイルを指定しない場合はダミー画像が出る。

吹き出し画像キャプション名は8文字程度が望ましい。スマホ画面では8文字以上出ない。

2020/01/12
吹き出し上下マージンを広げる1em→1.5em;

2021/07/01
CSS文法エラーが1行だけあったので修正

＝＝＝＝＝＝＝*/

/*ここからmedia_listプラグインを使った会話風吹き出し*/

/* 吹き出しは相対位置指定で */

.media_fukidashi_left, .media_fukidashi_right {
	position: relative;
}
/*
吹き出しは上下マージンを広げること
2020/01/12
吹き出し上下マージンを広げる1em→1.5em;
*/

.media_fukidashi_left .media, .media_fukidashi_right .media {
	margin-top: 0em;
	margin-bottom: 0em;
}
/* 吹き出しの画像の排他余白設定 */

.media_fukidashi_left .media>.pull-left {
	padding-left: 0px;
	padding-right: 26px;
}
.media_fukidashi_right .media>.pull-left {
	padding-left: 26px;
	padding-right: 0px;
}
@media (min-width: 568px) {
	.media_fukidashi_left .media>.pull-left {
		padding-right: 40px;
	}
	.media_fukidashi_right .media>.pull-left {
		padding-left: 40px;
	}
}
@media (min-width: 768px) {
	.media_fukidashi_left .media>.pull-left {
		padding-right: 40px;
	}
	.media_fukidashi_right .media>.pull-left {
		padding-left: 40px;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_left .media>.pull-left {
		padding-right: 30px;
	}
	.media_fukidashi_right .media>.pull-left {
		padding-left: 30px;
	}
}
@media (min-width: 1200px) {
	.media_fukidashi_left .media>.pull-left {
		padding-right: 34px;
	}
	.media_fukidashi_right .media>.pull-left {
		padding-left: 34px;
	}
}
@media (min-width: 1500px) {
	.media_fukidashi_left .media>.pull-left {
		padding-right: 40px;
	}
	.media_fukidashi_right .media>.pull-left {
		padding-left: 40px;
	}
}

/* ============
2019/09/26
左右吹き出し会話風のクラス
media_list関数で使います。

2019/09/27
【説明】
クラスの組み合わせを利用して右側に画像が来るようにしている
変則的な工夫をしているのでよく注意すること。

#media_list関数の方で.pull-leftクラスに固定しているのと、
Boostrapで!importantにしているので、これを解除するための工夫。

.media_fukidashi_left
.media_fukidashi_right　で向きを指定しており、

「.pull-left」は向きではなく画像を表す記号だと思ってください。
なお、HTML記述では「.pull-right」は使われていませんでした。

本来ならdisplay:flexかgridで配置したい記述ですが、
複雑なので今後の検討課題に。

2019/10/02
大きさを全体で調整
レスポンシブ表示で整合性がとれていなかったため

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

/* 画像左指定 */

.media_fukidashi_left .media>.pull-left {
	float: left!important;
}
/* 画像右指定 */

.media_fukidashi_right .media>.pull-left {
	float: right!important;
}
/*
会話風にする際、左右マージンをem分確保する
emはメディアクエリで変える
（注意）マージン下を2em確保しないと段落など他のマージンと重なって行間が空かない
2019/10/02
大きさを全体で調整
レスポンシブ表示で整合性がとれていなかったため
2019/12/17
会話風吹き出しの左右共に下排他領域を1.8行分追加
これによって同じ向きの吹き出しを続けて使っても写真キャプションが重ならないようにする
2020/07/31
会話風吹き出しの左右共に993px以上からmargin-bottom: 0.5em;を追加
レイアウト崩れを減らす
2020/09/21
会話風吹き出しの1500px以上での表示が枠と一部重なるので、下マージンを2emから3emに広げる

*/

.media_fukidashi_right .media {
	margin-left: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 1.8em;
	height: auto;
}
.media_fukidashi_left .media {
	margin-right: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 1.4em;
	height: auto;
}
@media (min-width: 360px) {
	.media_fukidashi_right .media {
		margin-left: 0.5em;
	}
	.media_fukidashi_left .media {
		margin-right: 0.5em;
	}
}
@media (min-width: 568px) {
	.media_fukidashi_right .media {
		margin-left: 5em;
    	padding-bottom: 1.3em;
	}
	.media_fukidashi_left .media {
		margin-right: 5em;
    	padding-bottom: 1.3em;
	}
}
@media (min-width: 768px) {
	.media_fukidashi_right .media {
		margin-left: 4.5em;
		padding-bottom: 1.3em;
		padding-bottom: 1em;
	}
	.media_fukidashi_left .media {
		margin-right: 4.5em;
		padding-bottom: 1em;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_right .media {
    	padding-top: 1em;
    	margin-left: 5.3em;
    	padding-bottom: 1em;
    	margin-bottom: 0.9em;
}
	.media_fukidashi_left .media {
    	padding-top: 1em;
    	margin-right: 5.3em;
    	padding-bottom: 1em;
    	margin-bottom: 0.9em;
    	}
}
@media (min-width: 1200px) {
	.media_fukidashi_right .media {
    	padding-top: 1em;
    	margin-left: 6em;
    	margin-bottom: 1.5em;
 }
	.media_fukidashi_left .media {
    	padding-top: 1em;
    	margin-right: 6em;
    	margin-bottom: 1.5em;
 }
}
@media (min-width: 1500px) {
	.media_fukidashi_right .media {
    	padding-top: 1em;
    	margin-left: 7em;
    	margin-bottom: 3em;
 }
	.media_fukidashi_left .media {
    	padding-top: 1em;
    	margin-right: 7em;
    	margin-bottom: 3em;
 }
}
/* 
media-body内の文字は本文段落と同じ扱いとする
2019/10/02
大きさを全体で調整
レスポンシブ表示で整合性がとれていなかったため
2020/04/12
1500px以上の文字の大きさを28pxに修正。本文の大きさと揃えた。
2020/07/25
media-body内の文字がbs_box関数で囲んだ時に意図せず文字色が変わらないように黒を設定
2021/10/17
吹き出しの文字の大きさをiphone7,8,SE2でも読みやすくする
2021/10/17
吹き出しの文字の大きさ指定で1500px以上の際の表示を新たに追加

*/

.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
	line-height: 1.8em;
	font-size: 20px;
	word-break: break-all;
	line-break: strict;
	overflow-wrap: break-word;
	color: #111;
}
/*iphone5,SE*/
@media (min-width: 320px) {
	.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
		font-size: 24px;
	}
}
/*Android*/
@media (min-width: 360px) {
	.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
		font-size: 20px;
	}
}
/*iphone7,8,SE2*/
@media (min-width: 375px) {
	.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
		font-size: 24px;
	}
}
/*モバイル横にした時*/
@media (min-width: 568px) {
	.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
		font-size: 26px;
	}
}

@media (min-width: 768px) {
	.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	.media_fukidashi_left .media-body, .media_fukidashi_right .media-body {
		font-size: 24px;
	}
}
@media (min-width: 1500px) {
    .media_fukidashi_left .media-body,
    .media_fukidashi_right .media-body {
        font-size: 26px;
    }
}
@media (min-width: 2000px) {
	.media_fukidashi_left .media-body,
	.media_fukidashi_right .media-body  {
		font-size: 28px;
	}
}
@media (min-width: 2500px) {
	.media_fukidashi_left .media-body,
	.media_fukidashi_right .media-body  {
		font-size: 30px;
	}
}



/*
画像を中央から丸くトリミングする
画像の大きさは100px×100pxでサイズが軽いものが望ましい。
【注意】大きな画像でも可能だが、サイズの大きな画像を読み込むことになるので避けた方がいい
2019/10/02
大きさを全体で調整
レスポンシブ表示で整合性がとれていなかったため
2020/07/24～25
レイアウト変更のため、吹き出しなど全体の調整
*/
.media_fukidashi_left img.media-object{
	left: 0.7em;
}
.media_fukidashi_right img.media-object{
	right: 0.7em;
}
@media (min-width: 568px) {
	.media_fukidashi_left img.media-object{
	    left: 1em;
    }
    .media_fukidashi_right img.media-object{
	    right: 1em;
    }
}
@media (min-width: 768px) {
	.media_fukidashi_left img.media-object{
	    left: 0.7em;
    }
    .media_fukidashi_right img.media-object{
	    right: 0.7em;
    }
}

/* 
吹き出し会話アイコン
画像トリミングしたい枠の幅と高さ
2020/07/25
吹き出し会話アイコン、画面解像度に応じて7段階可変する
*/
.media_fukidashi_left img.media-object,
.media_fukidashi_right img.media-object {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
@media (min-width: 360px) {
	.media_fukidashi_left img.media-object,
	.media_fukidashi_right img.media-object {
		width: 50px;
		height: 50px;
	}
}
@media (min-width: 568px) {
	.media_fukidashi_left img.media-object,
	.media_fukidashi_right img.media-object {
		width: 60px;
		height: 60px;
	}
}
@media (min-width: 768px) {
	.media_fukidashi_left img.media-object,
	.media_fukidashi_right img.media-object {
		width: 50px;
		height: 50px;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_left img.media-object,
	.media_fukidashi_right img.media-object {
		width: 75px;
		height: 75px;
	}
}
@media (min-width: 1200px) {
	.media_fukidashi_left img.media-object,
	.media_fukidashi_right img.media-object {
		width: 90px;
		height: 90px;
	}
}
@media (min-width: 1500px) {
	.media_fukidashi_left img.media-object,
	.media_fukidashi_right img.media-object {
		width: 100px;
		height: 100px;
	}
}

/*
2019/09/26
タグのタイトルを疑似要素で表示する場合、以下の方法は使えない。
:afterと:beforeの疑似要素は、imgやinputなどの置換要素（閉じタグが無く、そのタグひとつで完結してしまう要素）には適用できません。
参考のためコメント化
.media_fukidashi_left img.media-object::after, 
.media_fukidashi_right img.media-object::after{
 	display: block;
 	content:attr(title);
 	color:#373737;
 	width: 300px;
 	font-size: 18px;
 	text-align:center;
 	text-align: center;
 	margin-top:5px;
}
*/

/* 
吹き出しの中身本体
「border: 0px solid #eee;」
は本体の枠線をクリアするためのもの。
*/

.media_fukidashi_left .media-body,
.media_fukidashi_right .media-body {
	padding: 0.5em 0.6em;
	margin: 0.5em;
	border: 0px solid #eee;
	border-radius: 6px;
	background-color: #eee;
}
@media (min-width: 768px) {
	.media_fukidashi_left .media-body,
	.media_fukidashi_right .media-body {
    	border-radius: 10px;
 }
}
@media (min-width: 992px) {
	.media_fukidashi_left .media-body,
	.media_fukidashi_right .media-body {
		margin: 1em;
		padding: 0.5em 0.8em;
	}
}

/* 
2019/09/27
見出し4を自動的に画像の見出しにする
メディアリストに見出し1,2,3が入ると自動的にmedia-headingクラスが追加されるのを利用している。
HTML構文の構造的にも問題はなかった。
ただし、見出し4を使うので目次コンテンツは見出し3を対象外にした方が良い。
2019/09/27
実験成功。
2019/09/27
メディアクエリで各解像度毎に配置を調整、設定していく。
2019/09/27
widthの課題。パネルでも同じ問題が起こっていたので応用して解決できないか。
2019/10/01
768px時の見出しの大きさを16pxから14pxへ
768px時だとパネルなどのマージンと干渉が起こりやすい。
2019/10/02
大きさを全体で調整
レスポンシブ表示で整合性がとれていなかったため
2019/10/10
見出し4を自動的に画像の見出しにするところに最小限文字幅指定を入れる
これがないと文字数が少ない場合、左つめになってカッコ悪い
2020/01/12
左右吹き出しの画像キャプション（見出し4）で初期化で不足していた属性を追加
メイン画面で見だし4の装飾を変更した場合の影響を避ける
        border: none;
        color: #333;
        background-color: transparent;
        background-image: none;

*/

.media_fukidashi_right .media-body h4.media-heading {
	position: absolute;
	top: 47px;
	right: 0.8em;
	padding: 0px;
	justify-content: center;
	text-align: center;
	margin: 0.7em 0;
	font-size: 12px;
	font-weight: 700;
	width: auto;
	z-index: 1;
	min-width: 4.3em;
	max-width: 4.3em;
	height: 2.6em;
	line-height: 1.3em;
	overflow: hidden;
	border: none;
	color: #333;
	background-color: transparent;
	background-image: none;
}
@media (min-width: 360px) {
	.media_fukidashi_right .media-body h4.media-heading {
		top: 55px;
		font-size: 14px;
	}
}
@media (min-width: 568px) {
	.media_fukidashi_right .media-body h4.media-heading {
		top: 62px;
		right: 5px;
		font-size: 16px;
		min-width: 5.5em;
		max-width: 5.5em;
	}
}
@media (min-width: 768px) {
	.media_fukidashi_right .media-body h4.media-heading {
		top: 52px;
		right: -4px;
		font-size: 16px;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_right .media-body h4.media-heading {
		top: 90px;
		font-size: 18px;
		right: 0px;
		min-width: 6.1em;
		max-width: 6.1em;
	}
}
@media (min-width: 1200px) {
	.media_fukidashi_right .media-body h4.media-heading {
		top: 105px;
		font-size: 20px;
	}
}
@media (min-width: 1500px) {
	.media_fukidashi_right .media-body h4.media-heading {
		top: 122px;
		font-size: 22px;
	}
}
.media_fukidashi_left .media-body h4.media-heading {
	position: absolute;
	top: 47px;
	left: 0.8em;
	padding: 0;
	justify-content: center;
	text-align: center;
	margin: 0.7em 0;
	font-size: 12px;
	font-weight: 700;
	width: auto;
	height: 2.6em;
	/* z-index: -1; */
	min-width: 4.3em;
	max-width: 4.3em;
	line-height: 1.3em;
	overflow: hidden;
	border: none;
	color: #333;
	background-color: transparent;
	background-image: none;
}
@media (min-width: 360px) {
	.media_fukidashi_left .media-body h4.media-heading {
		top: 55px;
		font-size: 14px;
		min-width: 4.3em;
		max-width: 4.3em;
	}
}
@media (min-width: 568px) {
	.media_fukidashi_left .media-body h4.media-heading {
		top: 62px;
		left: 5px;
		font-size: 16px;
		min-width: 5.5em;
		max-width: 5.5em;
	}
}
@media (min-width: 768px) {
	.media_fukidashi_left .media-body h4.media-heading {
		top: 52px;
		left: -4px;
		font-size: 16px;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_left .media-body h4.media-heading {
		top: 90px;
		font-size: 18px;
	}
}
@media (min-width: 1200px) {
	.media_fukidashi_left .media-body h4.media-heading {
		top: 105px;
		font-size: 20px;
	}
}
@media (min-width: 1500px) {
	.media_fukidashi_left .media-body h4.media-heading {
		top: 115px;
		font-size: 22px;
	}
}
/*最後の吹き出しは下マージンを大きくする */

/*
.media_fukidashi_left .media:last-child,
.media_fukidashi_right .media:last-child{
    margin-bottom:3em;
}
*/

/*
2020/08/05
パネル内でのmedialist吹き出し表示
レイアウトがはみ出てしまうのを自動的に補正する
*/
.panel .media_fukidashi_left,
.panel .media_fukidashi_right{
    margin-left:0em;
    margin-right:0em;
    margin-bottom: 0.5em;
}
@media (min-width: 568px) {
.panel .media_fukidashi_left,
.panel .media_fukidashi_right{
    margin-bottom: 1em;
    }
}
@media (min-width: 768px) {
.panel .media_fukidashi_left,
.panel .media_fukidashi_right{
    margin-bottom: 0.9em;
    }
}
@media (min-width: 992px) {
.panel .media_fukidashi_left,
.panel .media_fukidashi_right{
    margin-left:0.5em;
    margin-right:0.5em;
    margin-bottom: 1.8em;
    }
}
@media (min-width: 1200px) {
.panel .media_fukidashi_left,
.panel .media_fukidashi_right{
    margin-bottom: 2.2em;
    }
}
@media (min-width: 1500px) {
.panel .media_fukidashi_left,
.panel .media_fukidashi_right{
    margin-bottom: 2.5em;
    }
}

/*
2020/08/05
濃い塗りつぶしパネル内でmedialist吹き出しを使っている場合、画像のキャプション文字を自動で白色にする
*/
.panel-solid .media_fukidashi_right .media-body .media-heading,
.panel-solid .media_fukidashi_left .media-body .media-heading{
	color:white;
}
/*
2020/08/05
明るい塗りつぶしパネル内でmedialist吹き出しを使っている場合、画像のキャプション文字を自動で黒色にする
*/
.panel-solid.warning .media_fukidashi_right .media-body .media-heading,
.panel-solid.warning .media_fukidashi_left .media-body .media-heading,
.panel-solid.light .media_fukidashi_right .media-body .media-heading,
.panel-solid.light .media_fukidashi_left .media-body .media-heading{
	color:#333;
}

/*
吹き出しの三角形はリスト形式では最初のメディアしか出ないので注意
2019/10/02
大きさを全体で調整
レスポンシブ表示で整合性がとれていなかったため
*/

.media_fukidashi_left .media-body::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 50px;
	border: 5px solid transparent;
	border-right: 12px solid;
	border-color: transparent #eee transparent transparent;
	z-index: 1;
}
@media (min-width: 360px) {
	.media_fukidashi_left .media-body::before {
    	top: 18px;
    	left: 60px;
    	border: 5px solid transparent;
    	border-right: 12px solid;
    	border-color: transparent #eee transparent transparent;
 }
}
@media (min-width: 568px) {
	.media_fukidashi_left .media-body::before {
		top: 15px;
		left: 75px;
		border: 8px solid transparent;
		border-right: 20px solid;
		border-color: transparent #eee transparent transparent;
	}
}
@media (min-width: 768px) {
	.media_fukidashi_left .media-body::before {
		top: 18px;
		left: 70px;
		border: 7px solid transparent;
		border-right: 15px solid;
		border-color: transparent #eee transparent transparent;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_left .media-body::before {
		top: 30px;
		left: 78px;
		border: 8px solid transparent;
		border-right: 20px solid;
		border-color: transparent #eee transparent transparent;
	}
}
@media (min-width: 1200px) {
	.media_fukidashi_left .media-body::before {
		top: 33px;
		left: 97px;
		border: 8px solid transparent;
		border-right: 20px solid;
		border-color: transparent #eee transparent transparent;
	}
}
@media (min-width: 1500px) {
	.media_fukidashi_left .media-body::before {
		top: 30px;
		left: 102px;
		border: 10px solid transparent;
		border-right: 30px solid;
		border-color: transparent #eee transparent transparent;
	}
}
.media_fukidashi_right .media-body::after {
	content: "";
	position: absolute;
	top: 15px;
	right: 50px;
	border: 5px solid transparent;
	border-left: 12px solid;
	border-color: transparent transparent transparent #eee;
	z-index: 1;
}
@media (min-width: 360px) {
	.media_fukidashi_right .media-body::after {
    	top: 18px;
    	right: 60px;
    	border: 5px solid transparent;
    	border-left: 12px solid;
    	border-color: transparent transparent transparent #eee;
    }
}
@media (min-width: 568px) {
	.media_fukidashi_right .media-body::after {
		top: 15px;
		right: 75px;
		border: 8px solid transparent;
		border-left: 20px solid;
		border-color: transparent transparent transparent #eee;
	}
}
@media (min-width: 768px) {
	.media_fukidashi_right .media-body::after {
		top: 18px;
		right: 70px;
		border: 7px solid transparent;
		border-left: 15px solid;
		border-color: transparent transparent transparent #eee;
	}
}
@media (min-width: 992px) {
	.media_fukidashi_right .media-body::after {
		top: 30px;
		right: 78px;
		border: 8px solid transparent;
		border-left: 20px solid;
		border-color: transparent transparent transparent #eee;
	}
}
@media (min-width: 1200px) {
	.media_fukidashi_right .media-body::after {
		top: 33px;
		right: 97px;
		border: 8px solid transparent;
		border-left: 20px solid;
		border-color: transparent transparent transparent #eee;
	}
}
@media (min-width: 1500px) {
	.media_fukidashi_right .media-body::after {
		top: 30px;
		right: 102px;
		border: 10px solid transparent;
		border-left: 30px solid;
		border-color: transparent transparent transparent #eee;
	}
}

/*=============
2020/08/28
モバイル画面時（568px未満、対象によっては359px未満）
アラートボックス(alert)パネル(palel) 内に
記述した吹き出しの大きさ、画像、キャプション位置を自動で調整する
メイン画面にそのまま記述するだけでなく、背景色があるアラートボックス(alert)またはパネル(palel) 内で吹き出しを記述する際に必要になる。
2020/09/21
アラートボックス(alert)パネル(palel) 内にモバイル画面時の記述ミス修正
2020/09/28
モバイル画面時（568px未満、対象によっては359px未満）
画像キャプションの位置を左右共に-5pxから-2pxに修正
=============*/
@media (max-width: 567px) {
    .panel .media_fukidashi_left img.media-object,
    .alert .media_fukidashi_left img.media-object {
        left: 0em;
    }
    .panel .media_fukidashi_right img.media-object,
    .alert .media_fukidashi_right img.media-object {
        right: 0em;
    }
	.panel .media_fukidashi_right .media,
	.alert .media_fukidashi_right .media {
		margin-left: 0em;
	}
	.panel .media_fukidashi_left .media,
	.alert .media_fukidashi_left .media {
		margin-right: 0em;
	}
    .panel .media_fukidashi_left .media>.pull-left,
    .alert .media_fukidashi_left .media>.pull-left {
        padding-right: 12px;
    }
    .panel .media_fukidashi_right .media>.pull-left,
    .alert .media_fukidashi_right .media>.pull-left {
        padding-left: 12px;
    }
	.panel .media_fukidashi_left .media-body::before,
	.alert .media_fukidashi_left .media-body::before {
    left: 46px;
	}
	.panel .media_fukidashi_right .media-body::after,
	.alert .media_fukidashi_right .media-body::after {
    right: 46px;
	}
    .panel .media_fukidashi_left .media-body h4.media-heading,
    .alert .media_fukidashi_left .media-body h4.media-heading {
        left: -2px;
    }
    .panel .media_fukidashi_right .media-body h4.media-heading,
    .alert .media_fukidashi_right .media-body h4.media-heading {
        right: -2px;
    }
}
@media (max-width: 359px) {	
    .panel .media_fukidashi_left .media>.pull-left,
    .alert .media_fukidashi_left .media>.pull-left {
        padding-right: 12px;
    }
    .panel .media_fukidashi_right .media>.pull-left,
    .alert .media_fukidashi_right .media>.pull-left {
        padding-left: 12px;
    }
	.panel .media_fukidashi_left .media-body::before,
	.alert .media_fukidashi_left .media-body::before {
    left: 36px;
	}
	.panel .media_fukidashi_right .media-body::after,
	.alert .media_fukidashi_right .media-body::after {
    right: 36px;
	}
}


/*=============
 2019.09.28
 media_fukidashi_rightの色クラス指定
 media_fukidashi_leftの色クラス指定

【記述方法】

 media_fukidashi_leftまたはmedia_fukidashi_right
 クラス呼び出しの後ろにスペース1文字あけて色を指定する。
 色指定がない場合ライトグレー指定。
 色指定は以下のリストで固定。思いつきの色でもOK。
 自分でパレットを操作する事は今のところできません。
  
 #html2(<div class="media_fukidashi_left blue">)
 #media_list{{
 &show(P1470155.jpg,,GX1);
 ***GX1
 今朝も写真が綺麗に撮れました。
 }}
 #html2(</div>)

 パネルを使ったクラスより非常にやさしくなっています。

 2019/09/29 16色あります。
 2019/10/09 Black と teal が加わって18色あります。
 Boostrap色名称は既存する色を兼用しています
 （default,secondary,primary,info,success,warning,danger,light,dark）

 色種類
【Boostrap色】ラベルと同じ配色にしています
 (default,secondaryは名前が違うだけで同じ色)
 media_fukidashi_left default
 media_fukidashi_right default

 media_fukidashi_left secondary
 media_fukidashi_right secondary

 media_fukidashi_left primary
 media_fukidashi_right primary

 media_fukidashi_left info
 media_fukidashi_right info

 media_fukidashi_left success
 media_fukidashi_right success

 media_fukidashi_left warning
 media_fukidashi_right warning

 media_fukidashi_left danger
 media_fukidashi_right danger

 media_fukidashi_left light
 media_fukidashi_right light

 media_fukidashi_left dark
 media_fukidashi_right dark

【通常色】WEB配色に準じています
 media_fukidashi_right blue
 media_fukidashi_left blue

 media_fukidashi_left skyblue 
 media_fukidashi_right skyblue

 media_fukidashi_left cyan
 media_fukidashi_right cyan

 media_fukidashi_left yellow
 media_fukidashi_right yellow

 media_fukidashi_left orange
 media_fukidashi_right orange

 media_fukidashi_left red
 media_fukidashi_right red

 media_fukidashi_left pink
 media_fukidashi_right pink

 media_fukidashi_left green
 media_fukidashi_right green

 media_fukidashi_left success
 media_fukidashi_right success
 
 media_fukidashi_left purple
 media_fukidashi_right purple

 media_fukidashi_left gray 
 media_fukidashi_right gray

 media_fukidashi_left brown
 media_fukidashi_right brown

 media_fukidashi_left gold
 media_fukidashi_right gold

 media_fukidashi_left silver
 media_fukidashi_right silver

 media_fukidashi_left white
 media_fukidashi_right white

 media_fukidashi_left ivory
 media_fukidashi_right ivory

 media_fukidashi_left navy
 media_fukidashi_right navy

 media_fukidashi_left Black
 media_fukidashi_right Black

 media_fukidashi_left teal
 media_fukidashi_right teal

2019.05.12
medhialistの.media-body背景の色違いの文字色を読みやすいよう修正

2019/09/29
予備コメントになっていた旧文字色クラス名を書き換えて新しくクラス設定
【注意】わかりやすさのため、色名はCSSの統一名称にしているが、実際の色は薄くするなどしている。

2019/09/30
吹き出しの横幅の可変を断念。
2019/09/30
吹き出しの背景色のテスト終了
エラーが4箇所あった。

2019/10/09
黒と濃緑色を追加

2020/07/25 Boostrapでの色名称を追加しました。既存する色を兼用しています
（default,secondary,primary,info,success,warning,danger,light,dark）
 
============= */
.media_fukidashi_left.default .media-body, .media_fukidashi_right.default .media-body,
.media_fukidashi_left.secondary .media-body, .media_fukidashi_right.secondary .media-body {
	background: #e2e3e5;
}
.media_fukidashi_right.default .media-body::after,
.media_fukidashi_right.secondary .media-body::after {
	border-color: transparent transparent transparent #e2e3e5;
}
.media_fukidashi_left.default .media-body::before,
.media_fukidashi_left.secondary .media-body::before {
	border-color: transparent #e2e3e5 transparent transparent;
}


.media_fukidashi_left.primary .media-body, .media_fukidashi_right.primary .media-body {
	background: #cce5ff;
}
.media_fukidashi_right.primary .media-body::after {
	border-color: transparent transparent transparent #cce5ff;
}
.media_fukidashi_left.primary .media-body::before {
	border-color: transparent #cce5ff transparent transparent;
}

.media_fukidashi_left.info .media-body, .media_fukidashi_right.info .media-body {
	background: #d1ecf1;
}
.media_fukidashi_right.info .media-body::after {
	border-color: transparent transparent transparent #d1ecf1;
}
.media_fukidashi_left.info .media-body::before {
	border-color: transparent #d1ecf1 transparent transparent;
}

.media_fukidashi_left.success .media-body, .media_fukidashi_right.success .media-body {
	background: #d4edda;
}
.media_fukidashi_right.success .media-body::after {
	border-color: transparent transparent transparent #d4edda;
}
.media_fukidashi_left.success .media-body::before {
	border-color: transparent #d4edda transparent transparent;
}

.media_fukidashi_left.warning .media-body, .media_fukidashi_right.warning .media-body {
	background: #ffeeba;
}
.media_fukidashi_right.warning .media-body::after {
	border-color: transparent transparent transparent #ffeeba;
}
.media_fukidashi_left.warning .media-body::before {
	border-color: transparent #ffeeba transparent transparent;
}

.media_fukidashi_left.danger .media-body, .media_fukidashi_right.danger .media-body {
	background: #f8d7da;
}
.media_fukidashi_right.danger .media-body::after {
	border-color: transparent transparent transparent #f8d7da;
}
.media_fukidashi_left.danger .media-body::before {
	border-color: transparent #f8d7da transparent transparent;
}

.media_fukidashi_left.light .media-body, .media_fukidashi_right.light .media-body {
	background: #fdfdfe;
}
.media_fukidashi_right.light .media-body::after {
	border-color: transparent transparent transparent #fdfdfe;
}
.media_fukidashi_left.light .media-body::before {
	border-color: transparent #fdfdfe transparent transparent;
}

.media_fukidashi_left.dark .media-body, .media_fukidashi_right.dark .media-body {
	background: #d6d8d9;
}
.media_fukidashi_right.dark .media-body::after {
	border-color: transparent transparent transparent #d6d8d9;
}
.media_fukidashi_left.dark .media-body::before {
	border-color: transparent #d6d8d9 transparent transparent;
}


.media_fukidashi_left.blue .media-body, .media_fukidashi_right.blue .media-body {
	background: #1877F2;
	color: white;
}
.media_fukidashi_right.blue .media-body::after {
	border-color: transparent transparent transparent #1877F2;
}
.media_fukidashi_left.blue .media-body::before {
	border-color: transparent #1877F2 transparent transparent;
}
.media_fukidashi_left.skyblue .media-body, .media_fukidashi_right.skyblue .media-body {
	background: #d1f2ff;
}
.media_fukidashi_right.skyblue .media-body::after {
	border-color: transparent transparent transparent #d1f2ff;
}
.media_fukidashi_left.skyblue .media-body::before {
	border-color: transparent #d1f2ff transparent transparent;
}
.media_fukidashi_left.cyan .media-body, .media_fukidashi_right.cyan .media-body {
	background: #b3f3f7;
	color: #1e3131;
}
.media_fukidashi_right.cyan .media-body::after {
	border-color: transparent transparent transparent #b3f3f7;
}
.media_fukidashi_left.cyan .media-body::before {
	border-color: transparent #b3f3f7 transparent transparent;
}
.media_fukidashi_left.yellow .media-body, .media_fukidashi_right.yellow .media-body {
	background: #ffff6f;
	color: #1f1f1b;
}
.media_fukidashi_right.yellow .media-body::after {
	border-color: transparent transparent transparent #ffff6f;
}
.media_fukidashi_left.yellow .media-body::before {
	border-color: transparent #ffff6f transparent transparent;
}
.media_fukidashi_left.orange .media-body, .media_fukidashi_right.orange .media-body {
	background: #ffd486;
	color: #3a2601;
}
.media_fukidashi_right.orange .media-body::after {
	border-color: transparent transparent transparent #ffd486;
}
.media_fukidashi_left.orange .media-body::before {
	border-color: transparent #ffd486 transparent transparent;
}
.media_fukidashi_left.red .media-body, .media_fukidashi_right.red .media-body {
	background: #ffc3c3;
	color: #4e1d26;
}
.media_fukidashi_right.red .media-body::after {
	border-color: transparent transparent transparent #ffc3c3;
}
.media_fukidashi_left.red .media-body::before {
	border-color: transparent #ffc3c3 transparent transparent;
}
.media_fukidashi_left.pink .media-body, .media_fukidashi_right.pink .media-body {
	background: #ffe1e6;
	color: #4c363a;
}
.media_fukidashi_right.pink .media-body::after {
	border-color: transparent transparent transparent #ffe1e6;
}
.media_fukidashi_left.pink .media-body::before {
	border-color: transparent #ffe1e6 transparent transparent;
}
.media_fukidashi_left.green .media-body, .media_fukidashi_right.green .media-body {
	background: #d4f9bc;
	color: #425237;
}
.media_fukidashi_right.green .media-body::after {
	border-color: transparent transparent transparent #d4f9bc;
}
.media_fukidashi_left.green .media-body::before {
	border-color: transparent #d4f9bc transparent transparent;
}
.media_fukidashi_left.purple .media-body, .media_fukidashi_right.purple .media-body {
	background: #f7daf7;
	color: #351935;
}
.media_fukidashi_right.purple .media-body::after {
	border-color: transparent transparent transparent #f7daf7;
}
.media_fukidashi_left.purple .media-body::before {
	border-color: transparent #f7daf7 transparent transparent;
}
.media_fukidashi_left.black .media-body, .media_fukidashi_right.black .media-body {
	background: #333;
	color: white;
}
.media_fukidashi_right.black .media-body::after {
	border-color: transparent transparent transparent #333;
}
.media_fukidashi_left.black .media-body::before {
	border-color: transparent #333 transparent transparent;
}
.media_fukidashi_left.gray .media-body, .media_fukidashi_right.gray .media-body {
	background: gray;
	color:#f9f9f9;
}
.media_fukidashi_right.gray .media-body::after {
	border-color: transparent transparent transparent gray;
}
.media_fukidashi_left.gray .media-body::before {
	border-color: transparent gray transparent transparent;
}
.media_fukidashi_left.brown .media-body, .media_fukidashi_right.brown .media-body {
	background: #e8caca;
	color: #2b1818;
}
.media_fukidashi_right.brown .media-body::after {
	border-color: transparent transparent transparent #e8caca;
}
.media_fukidashi_left.brown .media-body::before {
	border-color: transparent #e8caca transparent transparent;
}
.media_fukidashi_left.gold .media-body, .media_fukidashi_right.gold .media-body {
	background: gold;
	color:#564900;
}
.media_fukidashi_right.gold .media-body::after {
	border-color: transparent transparent transparent gold;
}
.media_fukidashi_left.gold .media-body::before {
	border-color: transparent gold transparent transparent;
}
.media_fukidashi_left.silver .media-body, .media_fukidashi_right.silver .media-body {
	background: silver;
	color: #484848;
}
.media_fukidashi_right.silver .media-body::after {
	border-color: transparent transparent transparent silver;
}
.media_fukidashi_left.silver .media-body::before {
	border-color: transparent silver transparent transparent;
}
.media_fukidashi_left.white .media-body, .media_fukidashi_right.white .media-body {
	background: white;
	color: #353535;
}
.media_fukidashi_right.white .media-body::after {
	border-color: transparent transparent transparent white;
}
.media_fukidashi_left.white .media-body::before {
	border-color: transparent white transparent transparent;
}
.media_fukidashi_left.ivory .media-body, .media_fukidashi_right.ivory .media-body {
	background: #ffffcb;
	color:#656500;
}
.media_fukidashi_right.ivory .media-body::after {
	border-color: transparent transparent transparent #ffffcb;
}
.media_fukidashi_left.ivory .media-body::before {
	border-color: transparent #ffffcb transparent transparent;
}
.media_fukidashi_left.navy .media-body, .media_fukidashi_right.navy .media-body {
	background: navy;
	color: #e8e8ff;
}
.media_fukidashi_right.navy .media-body::after {
	border-color: transparent transparent transparent navy;
}
.media_fukidashi_left.navy .media-body::before {
	border-color: transparent navy transparent transparent;
}

.media_fukidashi_left.black .media-body, .media_fukidashi_right.black .media-body {
	border: 0px solid black;
	background: black;
	color: #e0e0e0;
}
.media_fukidashi_right.black .media-body::after {
	border-color: transparent transparent transparent black;
}
.media_fukidashi_left.black .media-body::before {
	border-color: transparent black transparent transparent;
}
.media_fukidashi_left.teal .media-body, .media_fukidashi_right.teal .media-body {
	background: teal;
	color: white;
}
.media_fukidashi_right.teal .media-body::after {
	border-color: transparent transparent transparent teal;
}
.media_fukidashi_left.teal .media-body::before {
	border-color: transparent teal transparent transparent;
}
/*=============
以上media_listプラグインを使った会話風吹き出し
=============*/