/*
 * 
  * 2018.05.16
 * nagamira_css4 20180517_Ver2_05_3
 * 
 * 著作権 長岡京健康みらい研究所
 * 【重要】nagamira_css2の後に読み込むこと
 * 先にWEBフォント fontawesomeを呼んでおくこと。
 * <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> 
 2018.05.16
 不明だった部分を修正、追加。
 */

/*=================
2018.05.13　前川修寛
ここから先は画面のボタンやリンクを大きくする効果スタイル
必要に応じてカスタマイズする。
=================*/


/* =====
ナビのロゴにカーソルがきた時、拡大表示させる
回転表示は
transform: rotate(15deg) scale(1.5);
ただし、ロゴを傾けるのは縁起がよくないので避ける。
===== */
.navbar-brand:hover,
.navbar-brand:active,
.navbar-brand:focus {
    transform: scale(1.5);
    transition: .3s;
}


/* ======
 * 2018/05/11
 * 編集画面のボタンにマウスがきた時、またはクリックした時、focusした時、
 * 大きくして見やすくする
 * button　はナビのメニューボタンと兼ねているので外す
 ====== */
html input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover, input[type=file]:hover {
    transform: scale(1.3);
    transition: .2s ease;
}

html input[type=button]:active, input[type=reset]:active, input[type=submit]:active, input[type=file]:active,
html input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus, input[type=file]:focus {
    transform: scale(1.5);
    transition: 0.5s ease;
}

/* ======
 * 2018/05/12
 * hover、avtive、focus時、
 * 問い合わせフォームのcontractの属性指定
 * メッセージにマウスがきた時、大きくする　
 ====== */
div.qform-contract-action-panel:hover,
div.qform-contract-action-panel:active,
div.qform-contract-action-panel:focus {
    cursor: pointer;
    transform: scale(1.1);
    transition: 0.5s;
}


/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * チェックボックス、ラジオボタンにマウスがきた時またはクリックした時、ラベルも含め、大きくして見やすくする
 ====== */
.checkbox-inline:hover, .radio-inline:hover,
.checkbox label:hover, .radio label:hover{
    transform: scale(1.2);
    transition: .2s ease;
}

.checkbox-inline:active, .radio-inline:active,
.checkbox label:active, .radio label:active,
.checkbox-inline:focus, .radio-inline:focus,
.checkbox label:focus, .radio label:focus {
    transform: scale(1.4);
    transition: .5s ease;
}


/* ======
 * 2018/05/13
 * hover、avtive、focus時、
 * 編集画面のテキストエリアの下にあるコマンドボタンにマウスがきた時、色をアイボリーにして、拡大して見やすくする。
 * グレーだと地味すぎるため。
 ====== */
 .qhm-btn-default:hover {
    transform: scale(1.3);
    transition: .2s ease;
    background-color: ivory;
    border-color: gray;
}
 .qhm-btn-default:active,
 .qhm-btn-default:focus{
    transform: scale(1.4);
    transition: 0.5s ease;
}


/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * ブログ画面のバッジを修正
 ====== */
a.badge:hover {
    background-color: coral;
    box-shadow: 5px 5px 5px lightgrey;
    transform: scale(1.05);
    transition: .2s ease;
}

a.badge:active,
a.badge:focus {
    transform: scale(1.1);
    transition: .5s ease;
}

/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * ブログ記事の移動ボタンを修正
 ====== */
.pager li>a:focus, .pager li>a:hover{
    font-weight: bold;
    background-color: coral;
    border-color: lightcoral;
    box-shadow: 5px 5px 5px lightgrey;
    color: white;
    transform: scale(1.05);
    transition: .2s ease;
}

.pager li>a:active, .pager li>a:active,
.pager li>a:focus, .pager li>a:focus {
    transform: scale(1.1);
    transition: .5s ease;
}


/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * テーマ編集のテーマカラーの色タイルを大きくして見やすくする
 * #preview_bar　必要ならこれを先頭につける
 ====== */
.themeColorPicker-wrap-swatch :hover {
    transform: scale(2);
    transition: .2s ease;
}

.themeColorPicker-wrap-swatch :active,
.themeColorPicker-wrap-swatch :focus {
    transform: scale(3);
    transition: .2s ease;
}


/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * テーマ編集のイメージを大きくして、見やすくする
 * 元が30＊30pxと小さいので意図的に大きくする
 ====== */
#preview_bar .qhm-skin-customizer-menu [data-image]:hover{
    transform: scale(1.3);
    transition: .2s ease;
}

#preview_bar .qhm-skin-customizer-menu [data-image]:active,
#preview_bar .qhm-skin-customizer-menu [data-image]:focus{
    transform: scale(1.7);
    transition: .2s ease;
}


/* ======
 * 2018/05/11
 * hover、avtive、focus時、
 * テーマ編集の「アップロード」ボタンを大きくして見やすくする
 * テーマ編集の「画像の選択」ボタンを大きくして見やすくする
 ====== */
 span.qhm-btn-info.qhm-btn-sm.fileinput-button:hover,
 button#qhm_skin_customizer_eyecatch_bgimage_select_img:hover {
    transform: scale(1.3);
    transition: .2s ease;
}

 span.qhm-btn-info.qhm-btn-sm.fileinput-button:active,
 button#qhm_skin_customizer_eyecatch_bgimage_select_img:active,
 span.qhm-btn-info.qhm-btn-sm.fileinput-button:focus,
 button#qhm_skin_customizer_eyecatch_bgimage_select_img:focus {
    transform: scale(1.5);
    transition: .5s ease;
}

/* ======
 * 2018/05/11
 * hover、avtive、focus時、ボタンを大きくする
 ====== */
.btn:hover {
    transform: scale(1.07);
    transition: .2s ease;
}

.btn:active,
.btn:focus {
    transform: scale(1.17);
    transition: 0.7s;
}

/* ======
 * 2018/05/11
 * カーソルがきた時、avtive、focus時、ナビバーを大きくする
 ====== */
.navbar-default .navbar-nav>li>a:hover {
    transform: scale(1.08);
    transition: .2s ease;
    }
@media (min-width: 767px){
.navbar-default .navbar-nav>li>a:hover {
    transform: scale(1.16);
    transition: 0.2s ease }
}


.navbar-default .navbar-nav>li>a:active,
.navbar-default .navbar-nav>li>a:focus{
    transform: scale(1.16);
    transition: 0.5s ease;
}
@media (min-width: 767px){
.navbar-default .navbar-nav>li>a:active,
.navbar-default .navbar-nav>li>a:focus{
    transform: scale(1.18);
    transition: 0.5s ease}
}


/* ======
 * 2018/05/11
 * カーソルがきた時、avtive、focus時、ナビバーの子メニューを大きくする
 ====== */
.navbar-default .dropdown-menu>li>a:hover {
    transform: scale(1.08);
    transition: 0.2s ease;
}

.navbar-default .dropdown-menu>li>a:active,
.navbar-default .dropdown-menu>li>a:focus{
    transform: scale(1.16);
    transition: 0.5s ease;
}

/* ======
 * 2018/05/11
 * カーソルがきた時、ブログリストとグリッドタイル要素を大きくする。
 * avtive、focus時、ブログリストとグリッドタイル要素を大きくする。
 * スマホで見ると、アクティブ時の反応がわかりやすい長所がある。
 ====== */
a.thumbnail.qblog-item:hover,
.qblog-list ul li:hover {
    background-color: ivory;
    transform: scale(1.03);
    transition: 0.2s ease;
}

a.thumbnail.qblog-item:active,
.qblog-list ul li:active,
a.thumbnail.qblog-item:focus,
.qblog-list ul li:focus {
    background-color: lightyellow;
    transform: scale(1.05);
    transition: 0.5s ease;
}

/* ======
 * 2018/05/11
 * カーソルが画像にきた時、avtive、focus時、ブログリスト要素の画像を大きくする。
 * 先のブログリストとグリッドタイル要素を大きくする方法が仰々しくて
 * うざくなるので画像だけを大きくするやり方も用意した。
 ====== */
div.qblog_thumbnail_box:hover {
    transform: scale(1.05);
    transition: 0.2s ease;
}

div.qblog_thumbnail_box:active,
div.qblog_thumbnail_box:focus{
    transform: scale(1.1);
    transition: 0.5s ease;
}

/* ======
 * 2018/05/11　予備コメント扱い
 * thumbnailのキャプションにマウスがきた時、avtive、focus時、中身を大きくする
 * 全部にあるとリンクのないthumbnailまで混同する、効果が過剰になる短所がある。
 * 全体ではなく、トップページなどの特定ページでのみ直接書いて使う。
 * 使う場合のためにコメントとしておいておく。
 ====== */
/*
.thumbnail .caption:hover, 
.panel-body.qhm-bs-block:hover {
    transform: scale(1.1);
    transition: 0.2s ease;
}

.thumbnail .caption:active,
.panel-body.qhm-bs-block:active,
.thumbnail .caption:focus,
.panel-body.qhm-bs-block:focus {
    transform: scale(1.3);
    transition: 0.5s ease;
}
*/

/* ======
 * 2018/05/11　予備コメント扱いだが実験中
 * thumbnail内のリンクがついた画像にマウスがきた時、画像を大きくする
 * thumbnailのキャプションにマウスがきた時、avtive、focus時、中身を大きくする
 * 先の.thumbnail .caption, .panel-body.qhm-bs-block 指定と使い分けること
 ====== */
 .thumbnail a>img:hover,
 p a img:hover
  {
    transform: scale(1.1);
    transition: 0.2s ease;
}

 .thumbnail a>img:active,
 p a img:active,
 .thumbnail a>img:focus,
 p a img:focus
  {
    transform: scale(1.2);
    transition: 0.5s ease;
}