/* ==============================================================
   Blog — dark luxury theme for excar.co.jp（黒×金・サイト調和版）
   ============================================================== */

/* --- ヒーロー（Blog タイトル帯：金セリフ英字＋和文） --- */
.blog-hero { position: relative; margin-bottom: 20px; padding: 30px 34px 26px; background: linear-gradient(150deg, #1c1c1f 0%, #0b0b0c 55%, #131315 100%); border-top: 2px solid #b8963e; }
.blog-hero:before { content: ""; position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; border: 1px solid rgba(201,168,76,.30); pointer-events: none; }
.blog-hero .blog-hero-en { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Times New Roman", serif; font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: .10em; color: #d4b96a; margin: 0 0 -.45em; padding-bottom: .45em; }
@supports (-webkit-background-clip: text) {
  .blog-hero .blog-hero-en { background: linear-gradient(180deg, #f9ecab 0%, #f0d67c 26%, #d9ab3d 45%, #9c7318 74%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
}
.blog-hero .blog-hero-ja { margin: 9px 0 0; font-size: 12px; letter-spacing: .38em; color: #b7ae97; }

/* --- パンくず --- */
.blog-breadcrumb { font-size: 12px; color: #7f7c74; margin: 0 0 16px; }
.blog-breadcrumb a { color: #c9a84c; text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb span { color: #a8a49a; }

/* --- 記事パネル（漆黒より一段浅い炭色＋金枠） --- */
.blog-wrap { background: #101011; border: 1px solid #29261d; padding: 36px 40px; color: #d9d5cb; text-align: left; }

/* --- 記事タイトル（明朝×金の飾り線） --- */
.blog-wrap .blog-title { font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; font-size: 22px; font-weight: 600; line-height: 1.55; color: #f2efe6; margin: 0; }
.blog-wrap .blog-title:after { content: ""; display: block; width: 60px; height: 2px; margin-top: 13px; background: linear-gradient(90deg, #d9bd6e 0%, #8a6d1f 100%); }
.blog-meta { margin: 14px 0 24px; color: #8f8b80; font-size: 13px; letter-spacing: .05em; }
.blog-meta time { color: #b7ae97; }
.blog-cat-tag { display: inline-block; margin-left: 6px; padding: 3px 14px; border: 1px solid #a8863c; border-radius: 2px; color: #d4b96a; font-size: 11px; letter-spacing: .12em; text-decoration: none; background: rgba(184,150,62,.08); }
.blog-cat-tag:hover { background: rgba(184,150,62,.18); }

/* --- アイキャッチ（額装風） --- */
.blog-eyecatch { margin: 0 0 26px; padding: 5px; background: #0b0b0c; border: 1px solid #2d2a21; }
.blog-eyecatch img { display: block; max-width: 100%; height: auto; }

/* --- 本文 --- */
.blog-body { font-size: 15px; line-height: 2.05; color: #d9d5cb; }
.blog-body h2 { font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; font-size: 20px; letter-spacing: .04em; color: #e9d9a8; margin: 40px 0 18px; padding: 11px 16px; border-left: 3px solid #b8963e; background: linear-gradient(90deg, rgba(184,150,62,.16) 0%, rgba(184,150,62,0) 85%); }
.blog-body h3 { font-size: 17px; color: #e7e3d7; margin: 30px 0 14px; padding: 0 0 8px; border-bottom: 1px solid #3a3524; }
.blog-body p { margin: 0 0 17px; }
.blog-body ul, .blog-body ol { margin: 0 0 20px 1.6em; }
.blog-body ul li { list-style: disc; }   /* サイト共通CSSの list-style:none を打ち消す */
.blog-body ol li { list-style: decimal; }
.blog-body li { margin-bottom: 7px; }
.blog-body li::marker { color: #b8963e; }
.blog-body a { color: #d4b96a; text-decoration: underline; }
.blog-body a:hover { color: #f0d98c; }
.blog-body strong { color: #f4eeda; font-weight: bold; }
.blog-body img { max-width: 100%; height: auto; border: 1px solid #2d2a21; }
.blog-body table { border-collapse: collapse; width: 100%; margin: 0 0 20px; }
.blog-body th, .blog-body td { border: 1px solid #33302a; padding: 9px 12px; text-align: left; }
.blog-body th { background: #1a1913; color: #e2d8ba; }
.blog-body blockquote { margin: 0 0 20px; padding: 14px 18px; border-left: 3px solid #6d5a26; background: #161511; color: #c9c4b7; }

/* --- 関連ページ --- */
.blog-related { margin-top: 46px; padding-top: 24px; border-top: 1px solid #2c2a22; }
.blog-related-tt { display: inline-block; margin: 0 0 12px; color: #d4b96a; font-size: 14px; letter-spacing: .16em; }
.blog-related-tt:before { content: "─ "; color: #8a6d1f; }
.blog-related ul { list-style: none; margin: 0; padding: 0; }
.blog-related li { margin-bottom: 9px; padding-left: 1.1em; position: relative; }
.blog-related li:before { content: "›"; position: absolute; left: 0; color: #b8963e; }
.blog-related a { color: #d9d5cb; text-decoration: none; border-bottom: 1px solid rgba(201,168,76,.35); padding-bottom: 1px; }
.blog-related a:hover { color: #f0d98c; border-bottom-color: #f0d98c; }
.blog-back-link a { color: #c9a84c; text-decoration: none; letter-spacing: .06em; }
.blog-back-link a:hover { text-decoration: underline; }

/* --- 一覧 --- */
.blog-index-head h1 { font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; font-size: 19px; color: #f2efe6; margin: 0 0 6px; letter-spacing: .05em; }
.blog-index-head h1:after { content: ""; display: block; width: 52px; height: 2px; margin-top: 10px; background: linear-gradient(90deg, #d9bd6e, #8a6d1f); }
.blog-cat-nav { margin: 20px 0 8px; font-size: 12px; letter-spacing: .08em; }
.blog-cat-nav a { display: inline-block; margin: 0 8px 8px 0; padding: 5px 14px; border: 1px solid #3a382e; border-radius: 2px; color: #b6b2a6; background: #141414; text-decoration: none; }
.blog-cat-nav a:hover { border-color: #a8863c; color: #e6ce82; }
.blog-cat-nav a.active { border-color: #b8963e; color: #171204; background: linear-gradient(180deg, #e7cd80 0%, #b8963e 100%); font-weight: bold; }

.blog-card { border: 1px solid #262420; background: #141415; margin: 0 0 14px; padding: 16px 18px; transition: border-color .2s ease, background .2s ease; }
.blog-card:hover { border-color: #a8863c; background: #17171a; }
.blog-card:after { content: ""; display: table; clear: both; }
.blog-card .thumb { float: left; width: 168px; margin-right: 20px; padding: 3px; background: #0b0b0c; border: 1px solid #2d2a21; }
.blog-card .thumb img { display: block; width: 100%; height: 106px; object-fit: cover; }
.blog-card .card-body { overflow: hidden; }
.blog-card .card-title { font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif; font-size: 17px; font-weight: 700; line-height: 1.6; margin: 0 0 7px; }
.blog-card .card-title a { color: #f0ede3; text-decoration: none; }
.blog-card .card-title a:hover { color: #e6ce82; }
.blog-card .card-meta { font-size: 12px; color: #8f8b80; margin: 0 0 8px; letter-spacing: .05em; }
.blog-card .card-ex { font-size: 13px; color: #aca89c; line-height: 1.8; margin: 0; }

/* Yii ページャを黒×金に */
.blog-wrap .pagination > li > a, .blog-wrap .pagination > li > span { background: #141414; border-color: #33302a; color: #c9a84c; }
.blog-wrap .pagination > li > a:hover { background: #1d1c18; border-color: #a8863c; color: #e6ce82; }
.blog-wrap .pagination > .active > a, .blog-wrap .pagination > .active > span { background: #b8963e; border-color: #b8963e; color: #171204; }

/* --- レスポンシブ --- */
@media screen and (max-width: 640px) {
  .blog-hero { padding: 22px 18px 18px; }
  .blog-hero .blog-hero-en { font-size: 20px; }
  .blog-wrap { padding: 22px 16px; }
  .blog-wrap .blog-title { font-size: 18px; }
  .blog-body h2 { font-size: 18px; }
  .blog-card .thumb { float: none; width: auto; margin: 0 0 12px; }
  .blog-card .thumb img { height: auto; }
}
