/*================
* 
* 2021/07/01
* nagamira_css12h.css 高速化互換性なし版
* 2020/07/17
* nagamira_css1h.cssからnagamira_css12.cssへ移行
* （旧）nagamira_css12h.css「続きを読むボタンをCSSで実装する」をnagamira_css13.cssへ移行
* 
* 著作権 長岡京健康みらい研究所

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

* 
【スライドショー#bs_carousel関数で使うCSS】
スライドショーで使う#bs_carousel関数で使うスタイルシートを改修しています。
使い方は従来の関数の使い方をそのままで使えます。
スタイルシートの順番が見出し1～3の後に宣言しないといけないため、nagamira_css10h.cssの後になるようにnagamira_css12h.cssに移動しています。初期の作成なのでソース肥大化を防ぐ目的もあります。

2019.05.23
carouselスライド画像のdisplay属性がblockだとアイキャッチと一致しなくなるのでcontentsにする
→訂正carouselスライド画像のdisplayがcontentだと画像がでなくなるので注意
blockに戻す。
2019.05.23
carouselスライドショーでのメディアクエリ文字サイズ設定（h1）
carouselスライドショーでのメディアクエリ文字サイズ設定（p）
2019.05.23
carousel(スライドショー）用スタイルシート改修
2019.05.24
carouselスライド画像のdisplayの属性をblockに戻す。
2019.05.24
carouselスライドショーでフォント設定を行う。WEBフォントも読み込める
2019.06.01
スライドショーの移動クリック範囲の調整
2019/09/22
スライドショーに使われるクラス.carousel-inner
2019.10.13
スライドショーの文字を黒ふちにする
2019/10/09
.carousel-captionの丸印を大きくする
.carousel-captionの位置を下0に修正
2019/10/09　
予備コメント化→carouselは元が最大1600PXまでなのでそれ以上は左右のマージンを復活させる
2019/12/28
carouselスライドショーでh1~h4疑似要素のクリア
2019/12/28
.carousel-captionの位置をleft: 20%;に修正
2019/12/30
.carousel-captionの位置をleft: 50%;に修正
2019/12/30
.haik-container 内での.carousel-captionの位置をleft: 20%;に修正
2020/01/02
メインコンテナでのcarouselスライドショーでh3とpフォント設定を行う。
文字を黒ふちにする
なお、アイキャッチと設定を分けているのは使っている見出しと目的が異なるから。
2020/01/02
carousel-innerクラスの装飾はカクカクした動きになるので、予備コメント化
2020/01/02
メインコンテナcarouselスライドショーh3を2つ記述していたので統合
2020/01/02
スライドショーの左右クリックボタンWEBアイコンの変更。
見た目が洗練されているFontAwesomeの「丸囲み＜」と「丸囲み＞」に切り替える。
2020/01/02
メニューやフッタにもcarouselスライドショーを問題無く表示できるよう、見出しを修正する
2020/01/05
768px~992px未満時はメニューのcarouselスライドショーでの文字を90％に縮小する
2020/01/08
.carousel-captionの丸印がナビの表に出るエラーを修正
z-index:15を8に修正
2020/09/20
セクション・アイキャッチ内でtitle-noborderを指定した時、スライドのキャプションの縁取りを外す

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

/*=============
2019.05.23
carousel(スライドショー）用スタイルシート)
アイキャッチに入れる時、左右のマージンを自動的に省く
プログラムが最大1600PXまでなのでそれ以上は左右のマージンを復活させる
============= */

/* アイキャッチに入れる時、左右のマージンを自動的に省く */

.qhm-eyecatch .carousel.qhm-section.qhm-section-default.qhm-eyecatch .qhm-section-content {
	margin-left: 0px;
	margin-right: 0px;
}
/* 
2019/10/09　
予備コメント化→carouselは元が最大1600PXまでなのでそれ以上は左右のマージンを復活させる
*/

/*
@media (min-width: 1601px) {
    .qhm-eyecatch .carousel.qhm-section.qhm-section-default.qhm-eyecatch .qhm-section-content {
        margin-left: 0%;
        margin-right: 0%;
    }
}
*/

.carousel {
	position: relative;
}
/*===========
メインコンテナcarouselスライドショーでの文字サイズ設定
2019.05.24
carouselスライドショーでフォント設定を行う。WEBフォントも読み込める
2020/01/02
メインコンテナでのcarouselスライドショーでh3とpフォント設定を行う。
文字を黒ふちにする
なお、アイキャッチと設定を分けているのは使っている見出しと目的が異なるから。
2020/01/02
メインコンテナcarouselスライドショーh3を2つ記述していたので統合
===========*/

.haik-container .carousel-caption h3 {
	/* WEBフォントカスタマイズ用通常はコメント */
	/* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */
	color: white;
	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;
	font-weight: 700;
	border: none;
	margin: 0;
	font-size: 22px;
	border: none;
	padding: 20px 0;
	background: none;
	border-left: none;
	box-shadow: none;
}
@media (min-width: 360px) {
	.haik-container .carousel-caption h3 {
		font-size: 24px;
	}
}
@media (min-width: 568px) {
	.haik-container .carousel-caption h3 {
		font-size: 28px;
	}
}
@media (min-width: 768px) {
	.haik-container .carousel-caption h3 {
		font-size: 26px;
	}
}
@media (min-width: 992px) {
	.haik-container .carousel-caption h3 {
		font-size: 32px;
	}
}
@media (min-width: 1200px) {
	.haik-container .carousel-caption h3 {
		font-size: 36px;
	}
}
/*
2020/01/02
Boostrap.min.css内で宣言されている。書き換える予定がないので予備コメント化
*/

/*
.carousel-inner > .item > a > img,
.carousel-inner > .item > img {
    line-height: 1;
}
*/

/*
画像にアドレスが入ると自動でcarousel-innerクラスが含まれる 
2019/09/22
スライドショーに使われるクラス.carousel-inner
.img-responsive、
サムネイル　.thumbnail、
画像にアドレスが入った場合、画像を拡大して、画像下マージン0.5emをつける
2019/10/24
サムネイルの画像拡大transform: scaleを1.5から1.11へ
2020/01/02
carousel-innerクラスの装飾はカクカクした動きになるので、予備コメント化
*/

/*
.carousel-inner > .item > a > img,
.carousel-inner > .item > img,
.img-responsive,
.thumbnail a > img,
.thumbnail > img {
    display: block;
   height: auto;
    object-fit: cover;
    transform: scale(1.11);
    margin-bottom: 0.5em;
}
*/

/*===========
2019.05.23
carouselスライド画像のdisplayがcontentだと画像がでなくなるので注意
===========*/

.carousel-inner>.item>a>img, .carousel-inner>.item>img {
	display: block;
}
/*
2019.05.24
carouselスライド内の画面効果
カスタマイズ時はこちらを変える
*/

/*
.carousel-inner>.item {
    display: none;
    position: relative;
    transition: .6s ease-in-out left;
}
@media not all, (-webkit-transform-3d)
.carousel-inner>.item {
    transition: transform .6s ease-in-out;
    perspective: 1000px;
}
*/

/*===========
2020/01/02
スライドショーの左右クリックボタンWEBアイコンの変更。
見た目が洗練されているFontAwesomeの「丸囲み＜」と「丸囲み＞」に切り替える。
===========*/

.glyphicon-chevron-right:before {
	font-family: FontAwesome;
	content: "\f138";
}
.glyphicon-chevron-left:before {
	font-family: FontAwesome;
	content: "\f137";
}
/*===========
2019.06.01
スライドショーの移動クリック範囲の調整
===========*/

.carousel-control {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 15%;
	opacity: .5;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	background-color: rgba(0, 0, 0, 0);
	transition: .3s;
}
@media (min-width: 768px) {
	.carousel-control {
		width: 10%;
	}
}
.carousel-control.left {
	background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%);
	background-repeat: repeat-x;
}
.carousel-control.right {
	left: auto;
	right: 0;
	background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%);
	background-repeat: repeat-x;
}
.carousel .carousel-control {
	outline-style: none;
}
.carousel-control:focus, .carousel-control:hover {
	outline: 0;
	color: #fff;
	text-decoration: none;
	opacity: .9;
}
/*===========
スライドショーのタイトル、キャプションの装飾
2019.10.13
スライドショーの文字を黒ふちにする
見やすくなった
===========*/

.carousel-caption {
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 15px;
	z-index: 10;
	padding-top: 0em;
	padding-bottom: 1em;
	color: #fff;
	text-align: center;
	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;
}
.carousel-caption a {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/*
2020/09/20
セクション・アイキャッチ内でtitle-noborderを指定した時、スライドのキャプションの縁取りを外す
*/
.qhm-section.title-noborder .carousel-caption h1,
.qhm-section.title-noborder .carousel-caption h2,
.qhm-section.title-noborder .carousel-caption h3,
.qhm-section.title-noborder .carousel-caption h4,
.qhm-section.title-noborder .carousel-caption p{
	text-shadow:none;
}
/*
2020/01/02
フッタにもcarouselスライドショーを表示できるよう、見出しを修正するスライドショーを表示できるよう、見出しを修正する
*/

.container .carousel-caption h3, .haik-footer .carousel-caption h3 {
	color: #fff;
	border: none;
	background-color: transparent;
}
/*
2020/01/05
768px~992px未満時はメニューのcarouselスライドショーでの文字を90％に縮小する
*/

@media (min-width: 768px) {
	.haik-menu .carousel-caption h3, .haik-menu .carousel-caption p, .haik-menu .glyphicon-chevron-right:before, .haik-menu .glyphicon-chevron-left:before {
		font-size: 90%
	}
}
@media (min-width: 992px) {
	.haik-menu .carousel-caption h3, .haik-menu .carousel-caption p, .haik-menu .glyphicon-chevron-right:before, .haik-menu .glyphicon-chevron-left:before {
		font-size: 100%
	}
}
/*===========
2019.09.06
a:hoverだけ記述していて誤作動していた所を修正
===========*/

.carousel-caption a:active, .carousel-caption a:hover {
	outline: 0;
}
/*===========
2019.07.06
ブログの新着ブログcaptionでマウスオーバー時の下線を復活
2019.09.01
日付だけにでるのでマウスオーバー時の下線を見送る
2019.09.06
a:hoverだけ記述していて誤作動していた所を修正
2019/10/09
.carousel-captionの丸印を大きくする
.carousel-captionの位置を下0に修正
2019/12/30
.carousel-captionの位置をleft: 50%;に修正
2019/12/30
.haik-container 内での.carousel-captionの位置をleft: 20%;に修正
2020/01/08
.carousel-captionの丸印がナビの表に出るエラーを修正
z-index:15を8に修正
===========*/

.carousel-caption a:focus, .carousel-caption a:hover {
	color: #337ab7;
	text-decoration: underline;
}
@media (min-width: 768px) {
	.carousel-indicators {
		bottom: 0px;
	}
}
.carousel-indicators {
	position: absolute;
	bottom: 0px;
	left: 50%;
	z-index: 8;
	width: 60%;
	margin-left: -30%;
	padding-left: 0;
	list-style: none;
	text-align: center;
}
.haik-container .carousel-indicators {
	left: 20%;
}
@media (min-width: 768px) {
	.carousel-indicators {
		bottom: 0px;
	}
}
.haik-container .carousel-indicators ol>li {
	margin-left: 1em;
	padding: 0;
	font-size: 18px;
}
.carousel-indicators .active {
	/* margin: 1em; */
	margin-left: 0em;
	width: 14px;
	height: 14px;
	background-color: #fff;
}
.carousel-indicators li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 1px;
	text-indent: -999px;
	border: 1px solid #fff;
	border-radius: 14px;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0);
}
.haik-container .qhm-bs-carousel.carousel.slide ol>li {
	margin-left: 0.3em;
	padding: 0;
	font-size: 18px;
}
/*===========
アイキャッチ carouselスライドショーでのメディアクエリ文字サイズ設定（h1）
2019.05.24
carouselスライドショーでフォント設定を行う。WEBフォントも読み込める
===========*/

.haik-eyecatch-top .jumbotron h1 {
	/* WEBフォントカスタマイズ用通常はコメント */
	/* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */
	font-weight: 700;
	font-size: 36px;
	margin: 10px 0;
	border: none;
	background: none;
	border-left: none;
	box-shadow: none;
}
@media (max-width: 992px) {
	.haik-eyecatch-top .jumbotron h1 {
		font-size: 30px;
	}
}
@media (max-width: 767px) {
	.haik-eyecatch-top .jumbotron h1 {
		font-size: 28px;
		line-height: 1.7em;
		margin: 14px 0;
	}
}
@media (max-width: 567px) {
	.haik-eyecatch-top .jumbotron h1 {
		font-size: 26px;
	}
}
/* アイキャッチ carouselスライドショーでのメディアクエリ文字サイズ設定（h1） */

.haik-eyecatch-top .jumbotron p {
	/* WEBフォントカスタマイズ用通常はコメント */
	/* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */
	font-size: 22px;
	margin: 15px 0;
	border: none;
	background: none;
	border-left: none;
	box-shadow: none;
}
@media (min-width: 768px) {
	.haik-eyecatch-top .jumbotron p {
		font-size: 26px;
	}
}
@media (min-width: 992px) {
	.haik-eyecatch-top .jumbotron p {
		font-size: 28px;
	}
}
@media (min-width: 1200px) {
	.haik-eyecatch-top .jumbotron p {
		font-size: 30px;
	}
}
/*
2019/12/28
carouselスライドショーでh1~h4疑似要素のクリア
*/

.haik-container .carousel-caption h1::before, .haik-container .carousel-caption h2::before, .haik-container .carousel-caption h3::before, .haik-container .carousel-caption h4::before {
	display: none;
}
/*===========
アイキャッチ carouselスライドショーでのメディアクエリ文字サイズ設定（h1）
2019.05.24
carouselスライドショーでフォント設定を行う。WEBフォントも読み込める
2020/01/02
メインコンテナでのcarouselスライドショーでフォント設定を行う。
文字の縁取りは継承するのでコメント化
なお、アイキャッチと設定を分けているのは使っている見出しと目的が異なるから。
===========*/

.carousel-caption p {
	/* WEBフォントカスタマイズ用通常はコメント */
	/* font-family: 'Noto Serif JP', "游明朝", "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */
	font-size: 18px;
	/*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;*/
	margin: 0;
}
@media (min-width: 360px) {
	.carousel-caption p {
		font-size: 20px;
	}
}
@media (min-width: 568px) {
	.carousel-caption p {
		font-size: 22px;
	}
}
@media (min-width: 768px) {
	.carousel-caption p {
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	.carousel-caption p {
		font-size: 22px;
	}
}
@media (min-width: 1200px) {
	.carousel-caption p {
		font-size: 26px;
	}
}