﻿/*
 * 
  * 2018.05.10
 * nagamira_css1_20180510_Ver2_03_2
 * 
 * 著作権 長岡京健康みらい研究所
 * 【重要】このスタイルシートを先に読み込むこと。
*/

body {
    font-size: 14px;
}

p {
    line-height: 2em;
    font-size: 20px; 
    font-feature-settings: "palt" 1;
    color: inherit }
@media (min-width: 767px){
p {
    font-size: 22px
    }
}
@media (min-width: 1200px){
p {
    font-size: 24px
    }
}


/*パネル見出しの大きさを修正*/
/*2018.04.30 */
.panel-title{
    font-size: 20px; 
}
@media (min-width: 767px){
.panel-title {
    font-size: 22px
    }
}
@media (min-width: 1200px){
.panel-title {
    font-size: 24px
    }
}


/*目次で表示される文字の大きさを修正*/
/*2018.05.04 */
.plugin-contents a{
    font-size: 18px;
    line-height: 1.3em
}
@media (min-width: 767px){
.plugin-contents a {
    font-size: 20px
    }
}
@media (min-width: 1200px){
.plugin-contents a {
    font-size: 22px
    }
}


/*ボタンの文字属性、反応をふわっとさせる*/
.btn{
    font-size: 20px;
    transition: 0.3s
}
@media (min-width: 767px){
.btn {
    font-size: 22px
    }
}
@media (min-width: 1200px){
.btn {
    font-size: 24px
    }
}


/*テーブルの文字の大きさを修正*/
/*2018.04.24 */
.style_td, .style_th {
    line-height: 1.8;
    font-size: 20px;
    }
@media (min-width: 767px){
.style_td, .style_th  {
    font-size: 22px
    }
}
@media (min-width: 1200px){
.style_td, .style_th  {
    font-size: 24px
    }
}


/*==================================
アイキャッチスタイルを変える
アイキャッチの文字色、その他のフォントはテーマ編集の設定に依存している
2018.04.26 
==================================*/
.haik-eyecatch-top>.qhm-eyecatch>.qhm-section>div>div>h1,
.haik-eyecatch-main>.qhm-eyecatch>.qhm-section>div>div>h1,
.haik-eyecatch-top>.qhm-eyecatch>.qhm-section>div>div>h2,
.haik-eyecatch-main>.qhm-eyecatch>.qhm-section>div>div>h2
    {
    font-size: 22px ;
    line-height: 1.8em ;
    font-weight: bold ;
    font-family:  "游明朝","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif }
@media (min-width: 767px){
.haik-eyecatch-top>.qhm-eyecatch>.qhm-section>div>div>h1,
.haik-eyecatch-main>.qhm-eyecatch>.qhm-section>div>div>h1,
.haik-eyecatch-top>.qhm-eyecatch>.qhm-section>div>div>h2,
.haik-eyecatch-main>.qhm-eyecatch>.qhm-section>div>div>h2
    {
    font-size: 28px }
}
@media (min-width: 1200px){
.haik-eyecatch-top>.qhm-eyecatch>.qhm-section>div>div>h1,
.haik-eyecatch-main>.qhm-eyecatch>.qhm-section>div>div>h1,
.haik-eyecatch-top>.qhm-eyecatch>.qhm-section>div>div>h2,
.haik-eyecatch-main>.qhm-eyecatch>.qhm-section>div>div>h2
    {
    font-size: 32px }
}

/*見出し3の属性*/
/*
パネル、アコーディオンなどの見出しもこの見出しが兼ねている
行高をあまり大きくできないのが弱点
*/
/*2018.05.04 */
h4 {
    font-size: 20px; 
    line-height: 1.5em;
    font-feature-settings : "palt" 1
}
@media (min-width: 767px){
h4 {
    font-size: 22px
    }
}
@media (min-width: 1200px){
h4 {
    font-size: 24px
    }
}

/*見出し2の属性*/
/*2018.05.04 */
h3 {
    font-size: 22px; 
    line-height: 1.4em;
    font-feature-settings : "palt" 1;
    padding: 0.618em 0 0.618em 0;
    font-weight: bold
}
@media (min-width: 767px){
h3 {
    font-size: 26px
    }
}
@media (min-width: 1200px){
h3 {
    font-size: 30px
    }
}

/*見出し1の属性*/
/*2018.05.04 */
h2 {
    font-size: 26px;
    line-height: 1.618em ;
    font-feature-settings : "palt" 1;
    padding: 0.618em 0 0.618em 0;
    font-weight: bold
}
@media (min-width: 767px){
h2 {
    font-size: 30px;
    }
}
@media (min-width: 1200px){
h2 {
    font-size: 34px
    }
}

/* ヘッドコピーの修正 */
/*　2018/04/26 */
.haik-headcopy h1 {
    margin: 5px 0;
    font-size: 11px
    }
@media (max-width: 767px){
.haik-headcopy h1 {
    margin: 2px 0;
    font-size: 10px
    }
}
    
/* ============================
アイキャッチタイトル縁取り 見えにくい時だけ使うとよい
.haik-eyecatch-top>.qhm-eyecatch>.qhm-section>div>div>h1 {
    text-shadow:1px 1px 1px #ddd,
     -1px 1px 1px #ddd,
     1px -1px 1px #ddd, 
     -1px -1px 1px #ddd;
============================*/

/* haik-palette テンプレート8色分で指定されている見出しの枠線を消す*/
/*　2018/04/25 */
.haik-palette-cyan .haik-container h3{
    border: none;
}

.haik-palette-green .haik-container h3{
    border: none;
}

.haik-palette-brown .haik-container h3{
    border: none;
}

.haik-palette-blue .haik-container h3{
    border: none;
}

.haik-palette-red .haik-container h3{
    border: none;
}

.haik-palette-purple .haik-container h3{
    border: none;
}

.haik-palette-orange .haik-container h3{
    border: none;
}

.haik-palette-gray .haik-container h3{
    border: none;
}

/* haik-palette テンプレート8色分で指定されている見出しの枠線を消す*/
/*　2018/04/25 */
.haik-palette-cyan .haik-container h2, 
.haik-palette-green .haik-container h2, 
.haik-palette-brown .haik-container h2, 
.haik-palette-blue .haik-container h2, 
.haik-palette-red .haik-container h2, 
.haik-palette-purple .haik-container h2, 
.haik-palette-orange .haik-container h2, 
.haik-palette-gray .haik-container h2{
    border: none;
}


/* haik-palette テンプレート8色分で指定されているナビの文字を強制的にグレーにする*/
/*　2018/04/25 */
/* 同じ .haik-palette-～ クラスを使っているcool、seed、flatで動作確認。 */
/* color: 色;を臨機応変に変えるとよい。 */
.haik-palette-cyan .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

.haik-palette-green .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

.haik-palette-brown .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

.haik-palette-blue .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

.haik-palette-red .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

.haik-palette-purple .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

.haik-palette-orange .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

.haik-palette-gray .navbar-default .navbar-nav>li>a {
    color: #737272;
    font-size: 14px;
}

/* ==============================
haik-palette テンプレート8色分で指定されているh4:beforeを消す
アコーディオン見出しにh4:beforeが指定されていると見た目が邪魔にな
.haik-palette-～ クラスでh4:beforeを使っているflatで動作確認
2018/04/25 
 ============================== */

.haik-palette-cyan .haik-container h4:before ,
.haik-palette-green .haik-container h4:before ,
.haik-palette-brown .haik-container h4:before ,
.haik-palette-blue .haik-container h4:before ,
.haik-palette-red .haik-container h4:before ,
.haik-palette-purple .haik-container h4:before ,
.haik-palette-orange .haik-container h4:before ,
.haik-palette-gray .haik-container h4:before {
    content: none;
}

/* haik-kinaco テンプレート専用の6色分クラスで指定されているh4:beforeを消す*/
/* アコーディオン見出しにh4:beforeが指定されていると見た目が邪魔になる　*/
/*　2018/04/25 */

.haik-palette-sakura .haik-container h4:before,
.haik-palette-nori .haik-container h4:before, 
.haik-palette-ishi .haik-container h4:before, 
.haik-palette-cha .haik-container h4:before ,
.haik-palette-fuji .haik-container h4:before ,
.haik-palette-shiro .haik-container h4:before {
    content: none;
}

/* .haik-palette-8色分クラスで専用に指定されているh4見出しを太字に修正する*/
/* アコーディオンの見出しと文章内の見出しの属性を区別すること　*/
/*　2018/05/01 */
.haik-palette-cyan .haik-container h4 ,
.haik-palette-green .haik-container h4 ,
.haik-palette-brown .haik-container h4 ,
.haik-palette-blue .haik-container h4 ,
.haik-palette-red .haik-container h4 ,
.haik-palette-purple .haik-container h4 ,
.haik-palette-orange .haik-container h4 ,
.haik-palette-gray .haik-container h4 {
    font-weight: bold;
}

/* ===============
タブ・アコーディオン類の内容を表示する部分
2018.04.27
===============*/
.qhm-bs-block>p:last-child {
    margin: 12px;
    padding-left: 0px;
}

/* ===============
非選択タブ背景色と文字色
===============*/
.nav-tabs>li>a {
    background-color: #eee;
    color: #555;
    font-size: 20px;
    border: 1px solid #ccd; }
@media (min-width: 767px){
.nav-tabs>li>a {
    font-size: 22px }
}
@media (min-width: 1200px){
.nav-tabs>li>a {
    font-size: 24px }
}

/* ===============
スマホではタブの大きさを変える
===============*/
.nav>li>a {
    margin-right: 5px;
}
@media (max-width: 767px){
.nav>li>a {
    margin-right: 6px;
    padding: 10px 15px
    }
}

/*==================
 問い合わせフォーム画面
 オブジェクトの属性
==================*/
.form-control {
    height: 2.2em;
    font-size: 20px;
    border-radius: 5px }
@media (min-width: 767px){
.form-control  {
    font-size: 22px }
}
@media (min-width: 1200px){
.form-control  {
    font-size: 24px }
}

/*==================
 問い合わせ画面 ラベル
==================*/
.alert-info {
    padding-top: 9px;
    font-size: 20px}
@media (min-width: 767px){
.alert-info {
    font-size: 22px }
}
@media (min-width: 1200px){
.alert-info {
    font-size: 24px }
}

/*=================
箇条書き、番号つき箇条書き
他の li要素と干渉することがあるので
頭の黒ポチ、番号を変えるのは注意を。
2018.04.28
=================*/
.haik-container ul.list1, .haik-container ol.list1 {
    
    margin-bottom: 1.5em;
    line-height: 1.7em;
    font-size: 20px }
@media (min-width: 767px){
.haik-container ul.list1, .haik-container ol.list1 {
    font-size: 22px }
}
@media (min-width: 1200px){
.haik-container ul.list1, .haik-container ol.list1 {
    font-size: 24px }
}

.haik-container ul>li, .haik-container ol>li {
    padding: 5px 0;
    font-size: 20px }
@media (min-width: 767px){
.haik-container ul>li, .haik-container ol>li {
    font-size: 22px }
}
@media (min-width: 1200px){
.haik-container ul>li, .haik-container ol>li {
    font-size: 24px }
}

/*=================
Pre記述
ソースなどを記述する
「このページの差分」画面でも使われている
2018.05.03
文字の大きさ、行間を調整
2018.05.04
スマホで文字が小さすぎる事が判明、修正。
=================*/
pre {
    font-size: 18px ;
    line-height: 1.6em;
    padding: 1em;
    background-color: #f6f6f6}
@media (min-width: 767px){
pre  {
    font-size: 20px }
}
@media (min-width: 1200px){
pre {
    font-size: 22px }
}

/*=================
定義語 + 説明
2018.04.28
=================*/
dd, dt {
    font-size: 20px }
@media (min-width: 767px){
dd, dt {
    font-size: 22px }
}
@media (min-width: 1200px){
dd, dt {
    font-size: 24px }
}

/*=================
blockquote 左側つき版
2018.04.28　前川修寛
スマホでも見やすい
引用符がFontAwesomeではない書体バージョン。
lightgreyにしている。
=================*/
blockquote {
    position: relative;
    padding: 28px 15px 28px 40px;
    box-sizing: border-box;
    /* font-style: italic; */
    color: #464646;
    border: solid 3px lightblue;
}

blockquote:before {
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 40px;
    height: 40px;
    border-radius: 0 0 30px;
    vertical-align: middle;
    content: "”";
    font-family: "游明朝","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
    background: lightblue;
    color: #FFF;
    font-size: 80px;
    line-height: 1em;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.8;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #555;
    font-size: 18px;
}

/* ===============
 パネル 上部 下部 見出し
=============== */
.panel-heading,
.panel-footer  {
    font-size: 20px }
@media (min-width: 767px){
.panel-heading,
.panel-footer  {
    font-size: 22px
    }
}
@media (min-width: 1200px){
.panel-heading,
.panel-footer  {
    font-size: 24px
    }
}

/* ===============
フッター p要素 
2018/05/06
文字大きさ変更は他のP要素に干渉するため、今は研究課題
=============== */

.haik-palette-cyan .haik-footer p ,
.haik-palette-green .haik-footer p , 
.haik-palette-brown .haik-footer p , 
.haik-palette-red .haik-footer p , 
.haik-palette-purple .haik-footer p , 
.haik-palette-blue .haik-footer p , 
.haik-palette-gray .haik-footer p , 
.haik-palette-orange .haik-footer p {
    /*font-size: 20px;*/
}

/* ===============
 目次上下罫線を消す 
===============*/
.plugin-contents {
    border-top: none;
    border-bottom: none;
    padding: 0px 0;
}

/* ===============
主にフッターの検索ボタン
高さの調整　
2018.05.09　レスポンシブル対応
フォントサイズが変化するので調整
===============*/
input.btn {
    padding-top: 5px;
    padding-bottom: 5px
    }
@media (min-width: 767px){
input.btn {
    padding-top: 4px;
    padding-bottom: 3px
    }
}
@media (min-width: 1200px){
input.btn {
    padding-top: 2px;
    padding-bottom: 2px
    }
}

/* ===============
 問い合わせフォーム
 送信前確認 内容
=============== */
.panel-heading,
.col-sm-9 {
    font-size: 18px
    }
@media (min-width: 767px){
.col-sm-9 {
    font-size: 20px
    }
}
@media (min-width: 1200px){
.col-sm-9 {
    font-size: 22px
    }
}
