@charset "utf-8";
/* ============================================================
   ブログの見た目
   株式会社RELI.STYLE ／ 2026-10-13 自社で書き起こし
   6サイト共通（旧 plugin/qblog/qblog.css の置き換え）

   記事一覧・記事本体・サイドバー・コメント欄の見た目をまとめたもの。
   土台は Bootstrap 3（MIT）。クラス名は本文HTMLが使っているものなので変えていません。

   ■ 一覧には2つの形があります
     `.qblog-list-table` … 写真120px角＋本文。既定。各サイトが実際に使っているのはこちら
     `.qblog-list-line`  … 日付＋題名だけの詰めた一覧。高さ180pxの枠の中でスクロールする

   ■ 1行も削っていません
     コメント欄（`#qblog_comment_*`）は当サイトでは使っていませんが、
     他サイトが使っている可能性があるため全ルールを残しています。

   ■ 触るときの注意
     ・月別アーカイブの開閉マークは、Bootstrap の Glyphicons の文字コード
       （`\e114` 下向き／`\e080` 右向き）を使っています。
       **フォントを外すと記号が豆腐になります。**
     ・`.qblog_date` は写真の上に重ねる作り（`position:absolute`）。
       一覧の形を変えるときは、`.qblog-list-line` 側で打ち消しています。
   ============================================================ */

/* --- 1. 一覧（写真つき・既定） ----------------------------- */
.qblog-list-table { margin-top: 20px; margin-bottom: 20px; }

.qblog-list-table ul li {
  position: relative;            /* 日付を写真の上に重ねるための基準 */
  min-height: 120px;             /* 写真の高さぶんは必ず確保する */
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

/* 写真は背景として敷く（縦横比が違っても枠が崩れない） */
.qblog-list-table .qblog_thumbnail_box {
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 16px;
  background-position: center;
  background-size: cover;
}

.qblog-list ul    { margin: 0; padding: 0; }
.qblog-list ul li { list-style: none; }
.qblog-list .pagination li a { font-size: 12px; }

/* --- 2. 一覧（日付と題名だけ・詰めた形） ------------------- */
/* 枠の中でスクロールさせる。写真と抜粋とページ送りは出さない。 */
.qblog-list-line {
  height: 180px;
  margin-top: 15px;
  margin-bottom: 24px;
  padding: 10px;
  border: 1px solid #ccc;
  overflow-y: scroll;
}

/* `#qblog` の中だけ。限定を外すと、他の h2 にも効いてしまう上に
   指定の強さが下がって他のCSSに負ける（2026-10-13 照合で検出） */
#qblog .qblog-list-line h2 {
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.5em;
  text-align: left;
}

.qblog-list-line .qblog_thumbnail,
.qblog-list-line .qblog_abstract,
.qblog-list-line ul.pagination { display: none; }

/* この形では、日付を写真の上から外して行の先頭に戻す */
.qblog-list-line .qblog_date {
  position: static;
  top: 0;
  float: left;
  width: auto;
  margin-right: 14px;
  padding: 0;
  background-color: transparent;
  color: #333;
  font-size: 14px;
}

/* --- 3. 記事の部品 ----------------------------------------- */
/* 一覧のサムネイル。写真の左下に日付を重ねる。 */
.qblog_thumbnail {
  display: block;
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 16px;
}

.qblog_date {
  position: absolute;
  top: 100px;                    /* 120pxの写真の下から20px上 */
  left: 0;
  width: 120px;
  height: 20px;
  padding: 2px 0;
  background: rgba(0, 0, 0, .7); /* 写真の明暗にかかわらず読めるように */
  color: white;
  font-size: 13px;
  line-height: normal;
  letter-spacing: .1em;
  text-align: center;
}

.qblog_abstract   { margin: 1em 0; font-size: 14px; }
.qblog_abstract a { color: inherit; text-decoration: none; }

.qblog_post_date  { float: left; color: #000; font-size: 13px; }

/* 記事の冒頭に出す大きな写真 */
.qblog_post_eyecatch     { width: auto; max-width: 100%; margin: 0 auto; text-align: center; }
.qblog_post_eyecatch img { max-width: 100%; }

/* 見出し。Bootstrap や skin の装飾を落として素に戻す */
#qblog h2 {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  background-image: none;
  font-size: 20px;
  font-weight: normal;
}

#qblog h2.qblog_title a       { color: #333; }
#qblog h2.qblog_title a:hover { color: #000; }

#body div.qblog-set      { margin-top: 20px; }
#body div.qblog-set > h2 { margin-bottom: 20px; }
#body div.qblog-set ul   { margin: 0; }
#body div.well > h2      { margin-top: 0; }
#body .pager             { margin: 18px 0; padding: 0; }

#qblog_add_post   { margin: 10px 0; }
#qblog_add_post a { color: #fff; }

/* --- 4. サイドバー（最近の記事・カテゴリ・月別・コメント） --- */
/* 4つとも同じ見た目。点線で1件ずつ区切る。 */
.qblog_recent,
.qblog_recent_comments,
.qblog_categories,
.qblog_archives {
  list-style: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.bar ul.qblog_recent li,
.bar ul.qblog_recent_comments li,
.bar ul.qblog_categories li,
.bar ul.qblog_archives li {
  margin-top: 2px;
  border-bottom: 1px dotted #ccc;
  font-size: 13px;
}

/* 行全体を押せるようにする */
.bar ul.qblog_recent li a,
.bar ul.qblog_recent_comments li a,
.bar ul.qblog_categories li a,
.bar ul.qblog_archives li a { display: block; }

/* list-group で組んだ場合、Bootstrap が両端の線を消すので戻す */
.bar .qblog_recent .list-group-item:first-child,
.bar .qblog_recent .list-group-item:last-child,
.bar .qblog_recent_comments .list-group-item:first-child,
.bar .qblog_recent_comments .list-group-item:last-child,
.bar .qblog_categories .list-group-item:first-child,
.bar .qblog_categories .list-group-item:last-child,
.bar .qblog_archives .list-group-item:first-child,
.bar .qblog_archives .list-group-item:last-child { border-bottom: 1px dotted #ccc; }

/* カテゴリは中で float を使うので、親の高さを確保する */
.qblog_categories:before { content: " "; display: table; }
.qblog_categories:after  { content: " "; display: table; clear: both; }

.qblog_archives.by-year a:hover { background-color: #f5f5f5; }

/* --- 5. 月別アーカイブの開閉マーク ------------------------- */
/* 年の行の右端に、開いているとき下向き（\e114）、閉じているとき右向き（\e080）。
   Bootstrap の Glyphicons の文字を直接置いている。 */
.plugin-qblog-archives-year { position: relative; }

.plugin-qblog-archives-year::after {
  content: "\e114";
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  color: #c0c0c0;
  font-family: 'Glyphicons Halflings';
}

.plugin-qblog-archives-year.collapsed::after { content: "\e080"; }

/* 記事が1件も無い年は、場所は取るが見せない */
.plugin-qblog-archives-unvisible-year { visibility: hidden; }

/* --- 6. コメント欄 ----------------------------------------- */
#qblog_comment_form {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #eee;
  color: #333;
  font-size: 12px;
}

#body #qblog_comment_list    { list-style: none; margin: 0; padding: 0; }
#qblog_comment_list li       { margin-bottom: 20px; }
#qblog_comment_list li.do_accept { background-color: #fee; }   /* 承認待ちは薄い赤 */
#qblog_comment_list hr       { border: none; border-top: 1px dotted #ccc; }

.qblog_comment_title  { padding: 0 15px; font-size: 16px; font-weight: bold; }
.qblog_comment_body   { margin-top: 5px; padding: 0 15px; }
.qblog_comment_footer { padding: 0 15px; font-size: 12px; text-align: right; }
.qblog_comment_footer .badge          { padding: 1px 9px 0; }
.qblog_comment_footer a.badge:hover   { background-color: #999; }
.qblog_comment_control { text-align: right; }
.qblog_comment_preview { border: 1px solid #aaa; }

/* 投稿者の確認コード */
#qblog_comment_auth_msg       { margin-left: 10px; font-size: 12px; }
#qblog_comment_auth_msg input { width: 4em; }
.qblog_comment_auth_code      { margin: 0 6px 0 10px; font-size: 14px; font-weight: bold; }

.qblog_error { color: red; font-weight: bold; }

/* --- 7. バッジ・その他 ------------------------------------- */
.badge     { font-size: 11px; }
a.badge    { background-color: #999; color: white; }
a.badge:hover { background-color: #999; color: white; text-decoration: none; }

#content a.qblog_category:hover { background-color: #999; }

.title {
  display: block;
  margin-bottom: 1em;
  padding-top: 8px;
  text-align: right;
}

.tab-content div.form-actions { padding-bottom: 0; }

/* RSSのURL欄は読み取り専用だが、選んでコピーできるようにする */
input#qblog_rss_url[readonly] { cursor: text; }

/* --- 8. 印刷 ----------------------------------------------- */
/* 背景として敷いた写真は、既定では印刷されない。一覧は写真ありで出す。 */
@media print {
  .qblog-list-table .qblog_thumbnail_box { -webkit-print-color-adjust: exact; }
}