@charset "utf-8";
/* ============================================================
   ヘッドスパ木と本 公式サイト　画面の見た目（main.css）
   株式会社RELI.STYLE ／ 2026-10-12 自社で書き起こし

   このファイルは、移行前に使っていた有料スキンを**置き換えるために
   一から書いたもの**です。出る見た目は1pxも変えていません
   （`tools/css_fingerprint.py` で旧ファイルと突き合わせて確認済み）。

   土台は Bootstrap 3（MIT）。ここでは、そこへ当サイトの
   「余白を広く取る・文字は黒・飾りは細い線だけ」という方針を上書きしています。

   ■ この順番で書いています
     1. 文字と色の土台
     2. 本文の器（コンテナ）
     3. 上のナビゲーション
     4. アイキャッチ（写真の帯）
     5. サイドバー（固定ページ用／記事用）
     6. フッター
     7. 入力欄と表
     8. 画面幅ごとの調整

   ■ 触るときの注意
     ・`.haik-` と `.qhm-` で始まる名前は、本文HTMLが使っている既存の名前です。
       変えると140ページすべてに手を入れることになるので、名前は据え置き。
     ・色は「黒 #000 ／ 薄い灰 #aaa ／ 中間の灰 #999 ／ 文字の灰 #666」の4つだけ。
       増やさないこと。増えた瞬間に全体の静けさが崩れます。
   ============================================================ */

/* --- 1. 文字と色の土台 ------------------------------------- */
/* 字間と行間を広めに取るのが、このサイトの性格。本文も見出しも同じ字間。 */
html,
body {
  color: #000;
  line-height: 2em;
  letter-spacing: .1em;
}

h1, h2, h3, h4 {
  font-weight: normal;          /* 太字にしない。大きさだけで差をつける */
  line-height: 1.7em;
  letter-spacing: .1em;
}

/* --- 2. 本文の器 ------------------------------------------- */
.haik-container       { margin: 80px 0; }   /* 上下にしっかり余白を取る */
.haik-default         { margin: 60px 0; }   /* トップは少し詰める */
.haik-fullpage.haik-container { margin: 0; }

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

.haik-content p,
.haik-article p       { font-weight: normal; }

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

/* --- 3. 上のナビゲーション --------------------------------- */
/* 背景は敷かず、下の細い線1本だけで区切る。 */
.navbar-default {
  background-color: transparent;
  border-bottom: 1px solid #000;
  color: #000000;
  font-weight: bold;
  text-shadow: none;
}

.qhm-bs-nav.nav { margin-left: 20px; }

.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: #000000;
  text-shadow: none;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-nav > li > a:hover { color: #bdc3c7; }

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

.dropdown-menu > li > a { color: #000000; font-size: 13px; padding: 5px 20px; }
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus { background-color: #e7e7e7; color: #555; }

/* ナビを素の ul で組んだ場合（list1）。横並びにして右へ寄せる。 */
.navbar-default .list1 {
  color: #000000;
  float: right;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.navbar-default .list1 > li     { display: block; float: left; position: relative; }
.navbar-default .list1 > li > a { color: #000000; display: block; padding: 15px; position: relative; }
.navbar-default .list1 > li > a:hover { color: #bdc3c7; text-decoration: none; }

.navbar-default .list1 > li.active > a,
.navbar-default .list1 > li.active > a:hover { background-color: #e7e7e7; color: #000000; }
.navbar-default .list1 > li.active > a:focus { background-color: #e7e7e7; }

/* --- 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;
}

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

/* --- 5. サイドバー ----------------------------------------- */
/* 5-1. 共通（固定ページ・記事とも） */
.haik-menu         { margin-top: 88px; }
.haik-article-menu { margin-top: 80px; }

/* Bootstrap の list-group の装飾を全部落として、素の一覧に戻す */
.haik-menu .list-group-item,
.haik-menu .list-group-item:first-child,
.haik-menu .list-group-item:last-child,
.haik-article-menu .list-group-item {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* 5-2. 固定ページ用サイドバー：項目の左に太い縦線を立てる */
.haik-menu .list1      { list-style: none; padding-left: 0; }
.haik-menu .list1 > li { margin-bottom: 30px; }

.haik-menu .list1 > li > a {
  display: block;
  position: relative;
  padding: 5px 26px;
  border-left: 4px solid #000;
  color: #000;
  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 {
  background-color: transparent;
  border-left: 4px solid #aaa;
  color: #aaa;
  text-decoration: none;
}

/* 入れ子の項目。縦線は付けず、下線で表す */
.haik-menu .list1 > li > ul           { list-style: none; padding-left: 27px; }
.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: #393939; }

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

/* 5-3. 見出しでサイドバーを組んでいる場合（h2〜h4） */
.haik-menu:not(.haik-article-menu) h2 { font-size: 20px; margin-bottom: 25px; }

.haik-menu:not(.haik-article-menu) h2 a {
  border-left: 4px solid #000;
  padding-left: 30px;
  color: #000;
}
.haik-menu:not(.haik-article-menu) h2 > a:hover,
.haik-menu:not(.haik-article-menu) h2 > a:focus {
  border-left: 4px solid #aaa;
  color: #aaa;
  text-decoration: none;
}
.haik-menu:not(.haik-article-menu) h2:hover,
.haik-menu:not(.haik-article-menu) h2:focus,
.haik-menu:not(.haik-article-menu) h2.focus {
  background-color: transparent;
  text-decoration: none;
}

.haik-menu:not(.haik-article-menu) h3 { font-size: 16px; font-weight: bold; line-height: 2; }
.haik-menu:not(.haik-article-menu) h4 { font-size: 14px; font-weight: normal; }

.haik-menu:not(.haik-article-menu) h3 > a,
.haik-menu:not(.haik-article-menu) h4 > a { color: #000000; padding-left: 40px; }

.haik-menu:not(.haik-article-menu) h3 > a:hover,
.haik-menu:not(.haik-article-menu) h3 > a:focus,
.haik-menu:not(.haik-article-menu) h4 > a:hover,
.haik-menu:not(.haik-article-menu) h4 > a:focus { color: #999999; text-decoration: none; }

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

/* 5-4. 記事ページのサイドバー：縦線を使わず、字下げだけで階層を出す */
.haik-article-menu h2 { font-size: 18px; }
.haik-article-menu h3 { font-size: 16px; font-weight: normal; padding-left: 15px; }
.haik-article-menu h4 { font-size: 14px; font-weight: normal; padding-left: 30px; }

.haik-article-menu h2 > a,
.haik-article-menu h3 > a,
.haik-article-menu h4 > a { color: #000000; }

/* 記事側の h2 は、触っても色を変えない（親の色を継ぐ） */
.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: #999999; text-decoration: none; }

.haik-article-menu h3.focus > a,
.haik-article-menu h4.focus > a {
  border-bottom: 1px solid #999999;
  padding-bottom: 2px;
  color: #999999;
  text-decoration: none;
}

/* --- 6. フッター ------------------------------------------- */
.haik-footer   { background-color: #ffffff; padding: 50px 0; }
.haik-footer p { color: #666666; font-size: 13px; }

/* --- 7. 入力欄と表 ----------------------------------------- */
/* 角丸と影を落として、四角いままにする */
.input-group .form-control {
  height: 40px;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.input-group .input-sm { height: 38px; border-radius: 0; }
.input-group .input-lg { height: 57px; border-radius: 0; }
.input-group .input-xs { height: 38px; }

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

.style_td,
.style_th {
  padding: 8px;
  border: 1px solid #ddd;
  background-color: #fff;
  line-height: 1.5;
  vertical-align: top;     /* 行の高さが違っても、文字は上でそろえる */
}

/* ブログ一覧の日付。行間は親から継がず、素のままにする */
.qblog_date { line-height: normal; }

.clear { clear: both; }

/* --- 8. 画面幅ごとの調整 ----------------------------------- */
/* 8-1. スマホ・小さいタブレット：余白を削って、横幅いっぱいに使う */
@media (max-width: 768px) {
  .haik-container {
    margin-top: 15px;
    padding: 0;
    word-wrap: break-word;   /* 長いURLなどで横に飛び出さないように */
  }
  .haik-menu         { margin-top: 15px; }
  .haik-article-menu { margin: 0; }
}

/* 8-2. アイキャッチの文字の位置。画面が広くなるほど内側へ寄せる */
@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; }
}