@charset "UTF-8";
/* ============================================================
   RELI.STYLE 共通スタイル（レイアウトと部品）

   株式会社RELI.STYLE が自社で書いたもの。
   QHM/HAIK が吐き出すHTMLの構造（.haik-container / .haik-menu など）に
   合わせてあるが、見た目の指定はすべてこちらで書き起こしている。

   ・色と余白は、このファイルの先頭の変数で一括管理する
   ・画像は使わない（読み込みを増やさないため）
   ・スマホ幅（768px以下）は、余白を詰めて縦に積む

   文字そのものの設定（書体・行間・字間）は base.css 側。
   ここではレイアウトと、見出し・メニュー・フッターなどの部品だけを扱う。
   ============================================================ */

:root {
  --rs-ink:        #000;      /* 本文と見出し */
  --rs-ink-soft:   #393939;   /* 入れ子メニューの文字 */
  --rs-mute:       #666;      /* フッターなどの弱い文字 */
  --rs-dim:        #999;      /* ホバー時に沈める色 */
  --rs-dim-2:      #aaa;      /* ナビのホバー */
  --rs-dim-3:      #bdc3c7;   /* ヘッダーのリンクのホバー */
  --rs-line:       #ddd;      /* 表のけい線 */
  --rs-fill:       #e7e7e7;   /* 選択中の項目の背景 */
  --rs-bg:         #fff;
  --rs-gap:        80px;      /* 本文ブロックの上下の余白 */
  --rs-gap-sp:     15px;      /* スマホのときの余白 */
  --rs-rail:       4px;       /* メニュー左の縦線の太さ */
}

/* ------------------------------------------------------------
   1. 土台
   ------------------------------------------------------------ */

html,
body {
  color: var(--rs-ink);
  letter-spacing: .1em;
  line-height: 2em;
}

h1, h2, h3, h4 {
  margin: 15px 0;
  font-weight: normal;
  line-height: 1.7em;
  letter-spacing: .1em;
}

/* ------------------------------------------------------------
   2. 本文のまわり

   本文は上下に大きく余白をとる。読み物として息が詰まらないように。
   スマホでは画面が狭いので、この余白はほとんど取らない。
   ------------------------------------------------------------ */

.haik-container { margin: var(--rs-gap) 0; }

.haik-content,
.haik-article { padding-left: 30px; }

.haik-container .btn { margin-bottom: 10px; }

.haik-container ul > li { padding: 3px 0; }

.haik-container ul > li > ul {
  margin: 5px 0;
  padding-left: 20px;
}

/* 全面表示のページは、まわりの余白を打ち消す */
.haik-fullpage.haik-container { margin: 0; }

@media (max-width: 768px) {
  .haik-container {
    margin-top: var(--rs-gap-sp);
    padding: 0;
    word-wrap: break-word;   /* 長いURLなどで横に伸びるのを防ぐ */
  }
}

/* ------------------------------------------------------------
   3. 画面上部のナビゲーション
   ------------------------------------------------------------ */

.navbar-default {
  background-color: var(--rs-bg);
  color: var(--rs-ink);
  font-size: 14px;
  font-weight: bold;
  letter-spacing: .1em;
  text-shadow: none;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover {
  color: var(--rs-ink);
  text-shadow: none;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-nav > li > a:hover { color: var(--rs-dim-3); }

/* 開いているドロップダウンに枠線が出るのを消す */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus { border-color: transparent; }

/* QHMが素のulで出すメニュー（bs_navプラグインを使わない場合） */
.navbar-default .list1 {
  float: right;
  margin: 0;
  padding-left: 0;
  list-style: none;
  letter-spacing: .1em;
}

.navbar-default .list1 > li {
  position: relative;
  display: block;
  float: left;
}

.navbar-default .list1 > li > a,
.navbar-default .list1 > li.active > a,
.navbar-default .list1 > li.active > a:hover { color: var(--rs-ink); }

.navbar-default .list1 > li > a {
  position: relative;
  display: block;
  padding: 15px;
}

.navbar-default .list1 > li > a:hover {
  color: var(--rs-dim-3);
  text-decoration: none;
}

.navbar-default .list1 > li.active > a,
.navbar-default .list1 > li.active > a:hover,
.navbar-default .list1 > li.active > a:focus { background-color: var(--rs-fill); }

.dropdown-menu > li > a {
  padding: 5px 20px;
  color: var(--rs-ink);
  font-size: 13px;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus {
  background-color: var(--rs-fill);
  color: #555;
}

/* ------------------------------------------------------------
   4. アイキャッチ（ページ頭の大きな画像）

   画像は画面いっぱいに出し、その上に載る文字だけを
   画面幅に応じて内側へ寄せる。広い画面ほど深く寄せる。
   ------------------------------------------------------------ */

.haik-eyecatch-top > .qhm-eyecatch > .qhm-section { height: 474px; }

.haik-eyecatch-top > .qhm-eyecatch > .qhm-section,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section {
  margin-bottom: 0;
  padding: 0;
}

.haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid,
.haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid {
  width: auto;
  max-width: none;
  margin: 0;
}

@media (min-width: 768px) {
  .haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid,
  .haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid { margin: 30px 50px; }
}

@media (min-width: 992px) {
  .haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid,
  .haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid { margin: 30px 100px; }
}

@media (min-width: 1200px) {
  .haik-eyecatch-top > .qhm-eyecatch > .qhm-section > div > .container-fluid,
  .haik-eyecatch-main > .qhm-eyecatch > .qhm-section > div > .container-fluid { margin: 30px 150px; }
}

/* ------------------------------------------------------------
   5. 横のメニュー

   親項目には左に縦線を引いて、見出しであることを示す。
   マウスを乗せると線と文字を同時に薄くして、押せると伝える。
   子項目は字下げだけで階層を見せ、線は引かない（うるさくなるため）。
   ------------------------------------------------------------ */

.haik-menu { margin-top: 88px; }

@media (max-width: 768px) {
  .haik-menu { margin-top: var(--rs-gap-sp); }
}

.haik-menu .list1 {
  padding-left: 0;
  list-style: none;
}

.haik-menu .list1 > li { margin-bottom: 30px; }

.haik-menu .list1 > li > a {
  position: relative;
  display: block;
  padding: 5px 26px;
  border-left: var(--rs-rail) solid var(--rs-ink);
  color: var(--rs-ink);
  font-size: 15px;
}

.haik-menu .list1 > li > a:hover,
.haik-menu .list1 > li > a:focus,
.haik-menu .list1 > li.active > a,
.haik-menu .list1 > li.focus > a {
  border-left: var(--rs-rail) solid var(--rs-dim-2);
  background-color: transparent;
  color: var(--rs-dim-2);
  text-decoration: none;
}

/* Bootstrapのlist-groupの装飾を打ち消す */
.haik-menu .list-group-item,
.haik-menu .list-group-item:first-child,
.haik-menu .list-group-item:last-child {
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
}

.haik-menu .list1 > li > ul {
  padding-left: 27px;
  list-style: none;
}

.haik-menu .list1 > li > ul > li { padding: 5px; }

.haik-menu .list1 > li > ul > li > ul {
  padding-top: 10px;
  padding-left: 30px;
}

.haik-menu .list1 > li > ul > li a { color: var(--rs-ink-soft); }

.haik-menu .list1 > li > ul > li a:hover,
.haik-menu .list1 > li > ul > li a:focus,
.haik-menu .list1 > li > ul > li.active a {
  padding-bottom: 2px;
  border-bottom: 1px solid #555;
  color: #555;
  text-decoration: none;
}

/* 見出しタグで書かれたメニュー（QHMの素の書き方） */
.haik-menu h2 {
  margin-bottom: 25px;
  font-size: 20px;
}

.haik-menu h2 a {
  padding-left: 30px;
  border-left: var(--rs-rail) solid var(--rs-ink);
  color: var(--rs-ink);
}

.haik-menu h3 {
  line-height: 2;
  font-weight: bold;
  font-size: 16px;
}

.haik-menu h4 {
  font-weight: normal;
  font-size: 14px;
}

.haik-menu h3 > a,
.haik-menu h4 > a {
  padding-left: 40px;
  color: var(--rs-ink);
}

.haik-menu h2 > a:hover,
.haik-menu h2 > a:focus {
  border-left: var(--rs-rail) solid var(--rs-dim-2);
  color: var(--rs-dim-2);
  text-decoration: none;
}

.haik-menu h3 > a:hover,
.haik-menu h3 > a:focus,
.haik-menu h4 > a:hover,
.haik-menu h4 > a:focus {
  color: var(--rs-dim);
  text-decoration: none;
}

.haik-menu h2:hover,
.haik-menu h2:focus,
.haik-menu h2.focus {
  background-color: transparent;
  text-decoration: none;
}

.haik-menu h3.focus > a,
.haik-menu h4.focus > a {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rs-dim);
  color: var(--rs-dim);
  text-decoration: none;
}

/* ------------------------------------------------------------
   6. ブログ側のメニュー

   横メニューと違い、縦線は引かない。
   階層は字下げの深さだけで見せる（記事一覧の邪魔をしないように）。
   ------------------------------------------------------------ */

.haik-article-menu { margin-top: var(--rs-gap); }

@media (max-width: 768px) {
  .haik-article-menu { margin: 0; }
}

.haik-article-menu .list-group-item {
  border: none;
  border-radius: 0;
  padding: 0;
  background-color: transparent;
}

.haik-article-menu h2 { font-size: 18px; }

.haik-article-menu h3 {
  padding-left: 15px;
  font-weight: normal;
  font-size: 16px;
}

.haik-article-menu h4 {
  padding-left: 30px;
  font-weight: normal;
  font-size: 14px;
}

.haik-article-menu h2 > a,
.haik-article-menu h3 > a,
.haik-article-menu h4 > a { color: var(--rs-ink); }

.haik-article-menu h2 > a:hover,
.haik-article-menu h2 > a:focus {
  color: inherit;
  text-decoration: none;
}

.haik-article-menu h3 > a:hover,
.haik-article-menu h3 > a:focus,
.haik-article-menu h4 > a:hover,
.haik-article-menu h4 > a:focus {
  color: var(--rs-dim);
  text-decoration: none;
}

.haik-article-menu h3.focus > a,
.haik-article-menu h4.focus > a {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rs-dim);
  color: var(--rs-dim);
  text-decoration: none;
}

/* ------------------------------------------------------------
   7. フッター
   ------------------------------------------------------------ */

.haik-footer {
  padding: 50px 0;
  background-color: var(--rs-bg);
}

.haik-footer p {
  color: var(--rs-mute);
  font-size: 13px;
}

/* ------------------------------------------------------------
   8. 入力欄

   角丸と内側の影を外して、四角い見た目にそろえる。
   高さは大・中・小の3段階。
   ------------------------------------------------------------ */

.input-group .form-control {
  height: 40px;
  border-radius: 0;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.input-group .input-lg { height: 57px; border-radius: 0; }
.input-group .input-sm { height: 38px; border-radius: 0; }
.input-group .input-xs { height: 38px; }

/* ------------------------------------------------------------
   9. QHMの部品まわり
   ------------------------------------------------------------ */

table.style_table {
  width: 100%;
  margin-bottom: 20px;
}

.style_td,
.style_th {
  padding: 8px;
  border: 1px solid var(--rs-line);
  background-color: var(--rs-bg);
  line-height: 1.5;
  vertical-align: top;
}

.qhm-section > div > .container-fluid { padding: 15px; }

.qblog_date { line-height: normal; }

.clear { clear: both; }