/* ================================================================ */
/* 円卓のAI鼎談 — はてなブログ Neutral テーマ カスタム CSS            */
/* ================================================================ */

/* === フォント (Neutral テーマは Hiragino Kaku Gothic ProN のみ指定で         */
/* === Android では fallback がないため body 全体に明示する)                    */

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans CJK JP", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Yu Gothic", "Meiryo", sans-serif !important;
}

/* === 全体レイアウト (Neutral テーマは edge-to-edge なので余白を入れる) === */

#container-inner {
  max-width: 980px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  #container-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* === ブログヘッダー (タイトル + 説明文) — Pattern C 仕様 === */

#blog-title {
  padding: 32px 0 24px;  /* top 32px: はてなナビ下の横線と「円卓のAI鼎談」が密着(0px)していたので上余白を入れる (2026-06-12) */
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 32px;
}

#title,
#title a {
  color: #1a1a1a !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  line-height: 1.3;
  margin: 0 !important;
}

/* JS が "AI" を <span class="title-em"> で包む → orange */
#title .title-em {
  color: #fb923c !important;
}

#blog-description,
.header-description {
  color: #5a5e64 !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  margin: 6px 0 0 !important;
  letter-spacing: 0.02em !important;
}

/* === 日付 === */

.date,
.date a,
.entry-date a {
  color: #95a5a6 !important;
  font-size: 0.82em;
  text-decoration: none !important;
  letter-spacing: 0.08em;
}

.date a:hover {
  color: #636e72 !important;
}

/* === 記事タイトル === */

.entry-title,
.entry-title a {
  color: #2d3436 !important;
  font-weight: 700;
  text-decoration: none !important;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.entry-title a:hover {
  color: #fb923c !important;
}

/* === カテゴリ === */
/* 記事ページ内のカテゴリ (entry-categories) のみ chip 化。
   archive-entry-category は冗長 (「円卓のAI鼎談」のみ) なので archive section で別途 hide */

.entry-categories a,
.categories a {
  color: #fb923c !important;
  background: rgba(251, 146, 60, 0.08);
  padding: 2px 10px;
  border-radius: 3px;
  text-decoration: none !important;
  font-size: 0.82em;
  font-weight: 500;
  display: inline-block;
  margin-right: 4px;
}

.entry-categories a:hover,
.categories a:hover {
  background: rgba(251, 146, 60, 0.18) !important;
  color: #ea7a1f !important;
}

/* ================================================================ */
/* === 記事一覧 (Top page + Archive page) — Pattern C v3 final === */
/* ================================================================ */
/* Hatena 実 DOM (top page も body.page-archive を持ち .archive-entry を使う):
   .archive-entry
   ├── .archive-entry-header
   │   ├── .date.archive-date > a > time > (.date-year, .hyphen, .date-month, .hyphen, .date-day)
   │   └── .entry-title > .entry-title-link
   ├── .categories > .archive-category-link (= 「円卓のAI鼎談」、JS が hide + 別 chip 注入)
   ├── .entry-thumb-link > .entry-thumb (div with background-image)
   └── .archive-entry-body
       ├── .entry-description
       ├── .archive-entry-tags-wrapper
       └── .social-buttons

   JS (hatena-archive-enhance.js) が以下を実施:
   - .archive-entry に .is-hero (1記事目) / .is-list (それ以外) クラス付与
   - .date-month のテキスト "05" → "May" に変換
   - .archive-entry-header に <span class="le-cat-chip"> を entry-title 前に注入
*/

/* === カテゴリ非表示 (「円卓のAI鼎談」固定、冗長) === */
.archive-entry .categories {
  display: none !important;
}

/* === ハイフン非表示 (date stack 用) === */
.archive-entry.is-list .hyphen {
  display: none !important;
}

/* === section label (JS injected: LATEST / 過去の記事) === */
.le-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #8a8e94;
  text-transform: uppercase;
  margin: 32px 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.le-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e8e8e8;
}
.le-section-label[data-key="latest"] { margin-top: 16px; }

/* === cat chip 共通 === */
.archive-entry .le-cat-chip {
  display: inline-block;
  background: rgba(251, 146, 60, 0.08);
  color: #ea7a1f;
  padding: 2px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

/* ============================================================
   Hero entry (1記事目、.is-hero) — 大カバー上 + header + body 下
   ============================================================ */
.archive-entry.is-hero {
  display: flex !important;
  flex-direction: column !important;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: box-shadow 0.25s;
  margin: 0 0 32px !important;
  padding: 0 !important;
  border-bottom: none !important;
}
.archive-entry.is-hero:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

/* hero では entry-thumb-link を最上部に */
.archive-entry.is-hero .entry-thumb-link {
  order: 1;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}
.archive-entry.is-hero .entry-thumb {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* hero header (date + cat chip inline + title) */
.archive-entry.is-hero .archive-entry-header {
  order: 2;
  padding: 24px 28px 0 !important;
  display: block !important;
}

/* hero date 単一行 */
.archive-entry.is-hero .date {
  display: inline-block !important;
  background: transparent !important;
  color: #5a5e64 !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: baseline;
}
.archive-entry.is-hero .date a {
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
}
.archive-entry.is-hero .date time,
.archive-entry.is-hero .date-year,
.archive-entry.is-hero .date-month,
.archive-entry.is-hero .date-day,
.archive-entry.is-hero .hyphen {
  font-size: inherit !important;
  color: inherit !important;
  display: inline !important;
  margin: 0 !important;
  text-transform: none !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
}

/* hero cat chip (date の右隣に inline) */
.archive-entry.is-hero .le-cat-chip {
  margin-left: 10px;
  vertical-align: baseline;
}

/* hero タイトル */
.archive-entry.is-hero .entry-title {
  display: block !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 12px 0 0 !important;
  letter-spacing: 0.005em !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.archive-entry.is-hero .entry-title-link {
  color: #1a1a1a !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}
.archive-entry.is-hero:hover .entry-title-link {
  color: #ea7a1f !important;
}

/* hero body (excerpt 含む) */
.archive-entry.is-hero .archive-entry-body {
  order: 3;
  padding: 14px 28px 28px !important;
  margin: 0 !important;
  background: transparent !important;
}
.archive-entry.is-hero .entry-description {
  font-size: 14px !important;
  color: #5a5e64 !important;
  line-height: 1.85 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   List entry (2記事目以降、.is-list) — date stack 左 + body + thumb 下
   ============================================================ */
.archive-entry.is-list {
  display: grid !important;
  grid-template-columns: 64px 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 8px 24px !important;
  padding: 26px 14px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  border-radius: 4px;
  transition: background 0.2s;
  margin: 0 !important;
  background: #fff;
}
.archive-entry.is-list:hover {
  background: rgba(251, 146, 60, 0.04);
}
.archive-entry.is-list:last-child {
  border-bottom: none !important;
}

/* list date stack — col 1, row 1 にまたがる */
.archive-entry.is-list .archive-entry-header {
  display: contents !important;
}
.archive-entry.is-list .date {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  text-align: right !important;
  padding: 4px 0 0 !important;
  margin: 0 !important;
  background: transparent !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  align-self: start;
}
.archive-entry.is-list .date a {
  color: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  text-decoration: none !important;
  display: block !important;
  letter-spacing: 0 !important;
  font-size: inherit !important;
}
.archive-entry.is-list .date time {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}
.archive-entry.is-list .date-day {
  display: block !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  color: #fb923c !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  order: 1;
}
.archive-entry.is-list .date-month {
  display: block !important;
  font-size: 11px !important;
  color: #8a8e94 !important;
  letter-spacing: 0.1em !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  order: 2;
}
.archive-entry.is-list .date-year {
  display: block !important;
  font-size: 10px !important;
  color: #8a8e94 !important;
  letter-spacing: 0.1em !important;
  margin-top: 2px !important;
  font-weight: 400 !important;
  order: 3;
}

/* list cat chip + entry-title — col 2, row 1 */
.archive-entry.is-list .le-cat-chip {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin: 0 !important;
}
.archive-entry.is-list .entry-title {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  letter-spacing: 0.005em !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
}
.archive-entry.is-list .entry-title-link {
  color: #1a1a1a !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
}
.archive-entry.is-list:hover .entry-title-link {
  color: #ea7a1f !important;
}

/* list body (excerpt + thumb-link 含む) */
.archive-entry.is-list .archive-entry-body {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.archive-entry.is-list .entry-description {
  font-size: 13.5px !important;
  color: #5a5e64 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* list entry-thumb-link は body の下、grid 内ではなく自然に流したい
   実は DOM 順は header → categories → thumb-link → body なので、
   grid 上で thumb-link は body の前 (row 3) に来てしまう。
   解決: thumb-link を body の中 (or row 4) に再配置 */
.archive-entry.is-list .entry-thumb-link {
  grid-column: 2 !important;
  grid-row: 4 !important;
  display: block !important;
  margin: 12px 0 0 !important;
}
.archive-entry.is-list .entry-thumb {
  width: 100% !important;
  max-width: 280px !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 4px !important;
  margin: 0 !important;
  opacity: 0.82;
  filter: saturate(0.85);
  transition: opacity 0.25s, filter 0.25s;
}
.archive-entry.is-list:hover .entry-thumb {
  opacity: 1;
  filter: saturate(1);
}
/* grid-template-rows を 4 行に */
.archive-entry.is-list {
  grid-template-rows: auto auto auto auto !important;
}

/* === レスポンシブ === */
@media (max-width: 640px) {
  .archive-entry.is-hero .entry-title { font-size: 19px !important; padding: 0 !important; }
  .archive-entry.is-hero .archive-entry-header { padding: 18px !important; }
  .archive-entry.is-hero .archive-entry-body { padding: 10px 18px 18px !important; }

  .archive-entry.is-list {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto auto !important;
    gap: 8px !important;
    padding: 24px 6px !important;
  }
  .archive-entry.is-list .date {
    grid-column: 1 !important;
    grid-row: 1 !important;
    text-align: left !important;
    padding: 0 !important;
  }
  .archive-entry.is-list .date time {
    flex-direction: row !important;
    gap: 6px !important;
    align-items: baseline !important;
  }
  .archive-entry.is-list .date-day { font-size: 18px !important; }
  .archive-entry.is-list .date-month,
  .archive-entry.is-list .date-year { margin-top: 0 !important; }
  .archive-entry.is-list .le-cat-chip { grid-column: 1 !important; grid-row: 2 !important; }
  .archive-entry.is-list .entry-title { grid-column: 1 !important; grid-row: 3 !important; }
  .archive-entry.is-list .archive-entry-body { grid-column: 1 !important; grid-row: 4 !important; }
  .archive-entry.is-list .entry-thumb-link { grid-column: 1 !important; grid-row: 5 !important; }
}
/* ================================================================ */
/* === 記事冒頭 cover hero (bg image + CSS overlay) === */
/* ================================================================ */
/* 構造:
   <div class="hero-container">
     <img class="hero-bg" src="..."/>
     <div class="hero-brand">円卓のAI鼎談</div>
     <div class="hero-overlay">
       <h2 class="hero-title">川越と藤沢、<br>別レイヤーの話</h2>
       <span class="hero-bar"></span>
       <p class="hero-sub">違法建築・住民説明会・欧州比較、ラベルで束ねる前に</p>
     </div>
   </div>
   bg image は Nano Banana 生成 (cover-NNN-mosque-ai-bg.png 等)、タイトルは CSS overlay。
   preview: dashboard/sns-media/_preview-cover-009-overlay.html
*/

.entry-content .hero-container {
  position: relative;
  max-width: 1200px;
  margin: 24px auto 40px;  /* top 24px: カテゴリchipとの間に余白、Issue 11 user feedback */
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.entry-content .hero-container .hero-bg {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 !important;
}
.entry-content .hero-container .hero-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 56px 32px;
  background: linear-gradient(to top,
    rgba(8, 12, 20, 0.92) 0%,
    rgba(8, 12, 20, 0.75) 50%,
    rgba(8, 12, 20, 0.10) 90%,
    rgba(8, 12, 20, 0) 100%);
  color: #fff;
}
.entry-content .hero-container .hero-title {
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  border: none;
  padding: 0;
  background: transparent;
}
.entry-content .hero-container .hero-bar {
  display: block;
  width: 56px;
  height: 2px;
  background: #fb923c;
  margin: 16px 0;
}
.entry-content .hero-container .hero-sub {
  font-size: 14px;
  color: #c8ccd0;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.entry-content .hero-container .hero-brand {
  position: absolute;
  right: 28px;
  top: 24px;
  font-family: "Hiragino Mincho ProN", serif;
  font-size: 16px;
  color: #fb923c;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

@media (max-width: 720px) {
  .entry-content .hero-container .hero-overlay { padding: 24px 22px 22px; }
  .entry-content .hero-container .hero-title { font-size: 26px; line-height: 1.35; }
  .entry-content .hero-container .hero-sub { font-size: 12px; }
  .entry-content .hero-container .hero-brand { right: 16px; top: 14px; font-size: 12px; }
  .entry-content .hero-container .hero-bar { margin: 12px 0; width: 40px; }
}

/* ================================================================ */
/* 記事リード文 B'' フォーマット — Drop cap lead + 3レイヤーカード + 黒背景 */
/* ================================================================ */
/* 構造 (.lead-bp、2026-06-03 B'' 化に upgrade):
   <div class="lead-bp">
     <p class="lead-para">Drop cap 付き lead paragraph (要約、4-5 行目安)</p>
     <p class="lead-detail">追加段落 (任意、薄色)</p>
     <div class="lens-label">この記事で観察する 3 レイヤー</div>
     <div class="lenses">
       <div class="lens"><span class="num">1</span><h3>...</h3><p>...</p></div>
       <div class="lens"><span class="num">2</span><h3>...</h3><p>...</p></div>
       <div class="lens"><span class="num">3</span><h3>...</h3><p>...</p></div>
     </div>
     <div class="closer">
       <span class="label">READING FRAME</span>
       読み方の宣言文
     </div>
   </div>

   重要 (Lint 必須):
     .lead-para の冒頭文字を 「 『 " の記号で始めてはいけない。
     ::first-letter が記号を Drop cap として拾うため、見栄えが破綻する。
     冒頭は漢字 / かな / 英字 / 数字に必ずする (本文中の「」は OK)。

   全セレクタを .entry-content .lead-bp 配下に閉じている (過去記事の <p> ベタリードに影響しない)。
   SSoT: side-projects/sns-media/branding/lead-template.html
   preview: dashboard/sns-media/_preview-lead-design.html#bpp
*/

.entry-content .lead-bp {
  margin: 0 0 32px;
}
.entry-content .lead-bp .lead-para {
  font-size: 16px;
  line-height: 1.95;
  color: #1a1a1a;
  font-weight: 500;
  margin: 0 0 16px;
}
.entry-content .lead-bp .lead-para::first-letter {
  float: left;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 60px;
  line-height: 0.95;
  font-weight: 600;
  color: #fb923c;
  padding: 4px 10px 0 0;
  margin: 4px 0 0;
}
.entry-content .lead-bp .lead-detail {
  font-size: 14.5px;
  line-height: 1.95;
  color: #3a3a3a;
  margin: 0 0 28px;
}
.entry-content .lead-bp .lens-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #6a6e74;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.entry-content .lead-bp .lens-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e6e6e3;
}
.entry-content .lead-bp .lenses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.entry-content .lead-bp .lens {
  padding: 16px 16px 18px;
  background: #fafaf8;
  border: 1px solid #e6e6e3;
  border-radius: 6px;
  position: relative;
}
.entry-content .lead-bp .lens .num {
  position: absolute;
  top: -10px;
  left: 14px;
  width: 22px;
  height: 22px;
  background: #fb923c;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.entry-content .lead-bp .lens h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 4px 0 6px;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1.5;
}
.entry-content .lead-bp .lens p {
  font-size: 12.5px;
  line-height: 1.7;
  color: #6a6e74;
  margin: 0;
}
.entry-content .lead-bp .closer {
  margin-top: 8px;
  padding: 16px 20px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.75;
}
.entry-content .lead-bp .closer .label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fb923c;
  margin-bottom: 6px;
  display: block;
}

@media (max-width: 720px) {
  .entry-content .lead-bp .lead-para { font-size: 15px; line-height: 1.9; }
  .entry-content .lead-bp .lead-para::first-letter { font-size: 48px; padding: 4px 8px 0 0; }
  .entry-content .lead-bp .lead-detail { font-size: 13.5px; line-height: 1.9; }
  .entry-content .lead-bp .lenses {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .entry-content .lead-bp .lens { padding: 14px 14px 16px; }
  .entry-content .lead-bp .closer { padding: 14px 16px; font-size: 13px; }
}

/* === 記事本文 セクション見出し (h2) === */

.entry-content h2 {
  font-size: 1.4em;
  font-weight: 700;
  color: #2d3436;
  margin: 48px 0 20px;
  padding: 4px 0 4px 12px;
  border-left: 4px solid #fb923c;
  line-height: 1.4;
  letter-spacing: 0.03em;
}

/* === 記事本文 リンク === */

.entry-content a {
  color: #fb923c;
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 146, 60, 0.3);
}

.entry-content a:hover {
  color: #ea7a1f;
  border-bottom-color: #fb923c;
}

/* ================================================================ */
/* === ページャー / サイドバー / フッター — Pattern C 整合           */
/* ================================================================ */
/* 実 DOM:
   .pager > .pager-next > a (rel="next")
   aside#box2 > #box2-inner > .hatena-module.hatena-module-{profile|search-box|links|recent-entries|pickup-entries|archive}
   footer#footer > #footer-inner > address.footer-address + p.services
   preview: dashboard/sns-media/_preview-sidebar-footer-design.html
*/

/* --- pager (次のページ / 前のページ) --- */
.pager {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 32px 0 16px !important;
  padding: 0;
}
.pager-prev { margin-right: auto; }
.pager-next { margin-left: auto; }
.pager a {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  background: #fff;
  color: #2d3436 !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  transition: all 0.2s;
}
.pager a:hover {
  background: rgba(251, 146, 60, 0.08);
  border-color: #fb923c;
  color: #ea7a1f !important;
}
.pager-next a::after { content: " →"; }
.pager-prev a::before { content: "← "; }

/* --- sidebar 全体 (1カラム時) --- */
#box2 {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #e8e8e8;
}
#box2-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.hatena-module {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 18px 20px;
  margin: 0;
}
/* 視覚順序を DOM 順から並び替え:
   1. 注目記事 (= entries-access-ranking、Hatena の正式モジュール、full)
   2. 月別アーカイブ (full)
   3. プロフィール (full)
   4. 検索 (1 col) + リンク (1 col)
   ※ 最新記事を残す場合に備えて recent-entries も同位置 order:1 を当てる */
.hatena-module-entries-access-ranking { order: 1; grid-column: span 2; }
.hatena-module-recent-entries         { order: 1; grid-column: span 2; }
.hatena-module-archive                { order: 2; grid-column: span 2; }
.hatena-module-profile                { order: 3; grid-column: span 2; }
.hatena-module-search-box             { order: 4; }
.hatena-module-links                  { order: 5; }
@media (max-width: 720px) {
  #box2-inner { grid-template-columns: 1fr; }
  .hatena-module-entries-access-ranking,
  .hatena-module-recent-entries,
  .hatena-module-archive,
  .hatena-module-profile { grid-column: span 1; }
}

/* --- module title (= 各モジュール見出し: プロフィール / 検索 / リンク / 人気記事 / 月別アーカイブ) --- */
.hatena-module-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: #8a8e94 !important;
  text-transform: uppercase;
  margin: 0 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}
.hatena-module-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 32px;
  height: 2px;
  background: #fb923c;
}
.hatena-module-title a {
  color: inherit !important;
  text-decoration: none !important;
}

/* --- プロフィール --- */
.hatena-module-profile .hatena-module-body {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px 18px;
  align-items: start;
}
.hatena-module-profile .profile-icon-link {
  grid-row: span 3;
}
.hatena-module-profile .profile-icon {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  border: 3px solid #fb923c !important;
  object-fit: cover;
  display: block;
}
.hatena-module-profile .id {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
.hatena-id-link {
  color: #1a1a1a !important;
  text-decoration: none !important;
}
.hatena-id-link:hover { color: #ea7a1f !important; }
.badge-type-pro {
  display: inline-block;
  background: rgba(251, 146, 60, 0.08) !important;
  color: #ea7a1f !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  font-style: normal;
  margin-left: 8px;
  vertical-align: middle;
}
.hatena-module-profile .hatena-follow-button-box {
  margin: 0 !important;
  display: inline-block;
}
.hatena-module-profile .hatena-follow-button {
  display: inline-block !important;
  padding: 7px 18px !important;
  background: #fb923c !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  transition: background 0.2s;
}
.hatena-module-profile .hatena-follow-button:hover { background: #ea7a1f !important; }
.hatena-module-profile .hatena-follow-button .background { display: none !important; }
.hatena-module-profile .profile-about {
  grid-column: 2;
  margin: 0 !important;
}
.hatena-module-profile .profile-about a {
  color: #5a5e64 !important;
  font-size: 12.5px;
  text-decoration: none !important;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 1px;
}
.hatena-module-profile .profile-about a:hover {
  color: #ea7a1f !important;
  border-bottom-color: #fb923c;
}

/* --- 検索 --- */
.hatena-module-search-box .search-form {
  display: flex;
  gap: 8px;
}
.search-module-input {
  flex: 1;
  border: 1px solid #e8e8e8 !important;
  border-radius: 6px !important;
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  background: #fff !important;
  color: #2d3436 !important;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-module-input:focus {
  border-color: #fb923c !important;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.08) !important;
}
.search-module-button {
  border: none !important;
  background: #fb923c !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 9px 16px !important;
  font-size: 13px !important;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.search-module-button:hover { background: #ea7a1f !important; }

/* --- urllist 共通 (リンク / 最新記事 / アーカイブ年) --- */
#box2-inner ul.hatena-urllist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#box2-inner .hatena-urllist > li {
  border-bottom: 1px solid #f0f0f0;
}
#box2-inner .hatena-urllist > li:last-child { border-bottom: none; }
#box2-inner .hatena-urllist a {
  display: block;
  color: #2d3436 !important;
  text-decoration: none !important;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.55;
  transition: color 0.2s, padding-left 0.2s;
}
#box2-inner .hatena-urllist a:hover {
  color: #ea7a1f !important;
  padding-left: 6px;
}

/* --- 最新記事 --- */
.hatena-module-recent-entries .recent-entries-title-link {
  font-size: 13.5px !important;
  padding: 11px 0 !important;
}

/* --- 注目記事 (entries-access-ranking) — Hatena 公式モジュール、rank-N クラスでバッジ --- */
/* DOM (JS inject 後):
   .hatena-module-entries-access-ranking
   └── .hatena-module-body
       └── ul.entries-access-ranking.hatena-urllist
           └── li.urllist-item.entries-access-ranking-item.rank-N (N=1..5)
               └── .urllist-item-inner
                   └── a.entries-access-ranking-title-link
*/
.hatena-module-entries-access-ranking .entries-access-ranking {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hatena-module-entries-access-ranking .entries-access-ranking-item {
  border-bottom: 1px solid #f0f0f0 !important;
  position: relative;
  padding-left: 32px !important;
}
.hatena-module-entries-access-ranking .entries-access-ranking-item:last-child {
  border-bottom: none !important;
}
/* rank-N クラスから ::before で番号バッジ。1位はオレンジ filled */
.hatena-module-entries-access-ranking .entries-access-ranking-item::before {
  position: absolute;
  left: 0;
  top: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(251, 146, 60, 0.08);
  color: #ea7a1f;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 22px;
}
.hatena-module-entries-access-ranking .rank-1::before { content: "1"; background: #fb923c; color: #fff; }
.hatena-module-entries-access-ranking .rank-2::before { content: "2"; }
.hatena-module-entries-access-ranking .rank-3::before { content: "3"; }
.hatena-module-entries-access-ranking .rank-4::before { content: "4"; }
.hatena-module-entries-access-ranking .rank-5::before { content: "5"; }
.hatena-module-entries-access-ranking .urllist-item-inner {
  padding: 0 !important;
  margin: 0 !important;
}
.hatena-module-entries-access-ranking .entries-access-ranking-title-link {
  display: block !important;
  color: #2d3436 !important;
  text-decoration: none !important;
  padding: 11px 0 !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  transition: color 0.2s, padding-left 0.2s;
}
.hatena-module-entries-access-ranking .entries-access-ranking-title-link:hover {
  color: #ea7a1f !important;
  padding-left: 6px;
}

/* --- 月別アーカイブ --- */
.hatena-module-archive .archive-module-year {
  border-bottom: 1px solid #f0f0f0;
  padding: 8px 0;
}
.hatena-module-archive .archive-module-year:last-child { border-bottom: none; }
.hatena-module-archive .archive-module-button {
  display: inline-block;
  width: 14px;
  color: #8a8e94;
  font-size: 10px;
  cursor: pointer;
}
.hatena-module-archive .archive-module-year-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  text-decoration: none !important;
  margin-left: 4px;
  padding: 0 !important;
  display: inline !important;
}
.hatena-module-archive .archive-module-year-title:hover { color: #ea7a1f !important; }
.hatena-module-archive .archive-module-months {
  list-style: none !important;
  padding: 6px 0 0 22px !important;
  margin: 0 !important;
}
.hatena-module-archive .archive-module-months li {
  border: none !important;
}
.hatena-module-archive .archive-module-month a {
  display: block !important;
  font-size: 12.5px !important;
  color: #5a5e64 !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
}
.hatena-module-archive .archive-module-month a:hover {
  color: #ea7a1f !important;
  padding-left: 6px;
}

/* --- フッター --- */
#footer {
  margin: 48px 0 0 !important;
  padding: 24px 0 8px !important;
  border-top: 1px solid #e8e8e8;
  text-align: center;
  background: transparent !important;
}
#footer-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}
.footer-address {
  font-style: normal;
}
.footer-address a {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  color: #2d3436 !important;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none !important;
}
.footer-address a:hover { color: #ea7a1f !important; }
.footer-address img {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
#footer .services {
  font-size: 11.5px !important;
  color: #8a8e94 !important;
  letter-spacing: 0.05em;
  margin: 0 !important;
}
#footer .services a {
  color: #8a8e94 !important;
  text-decoration: none !important;
  border-bottom: 1px dotted #e8e8e8;
}
#footer .services a:hover {
  color: #ea7a1f !important;
  border-bottom-color: #fb923c;
}

/* === 旧 プロフィール CSS (互換のため残す、上の新ルールが優先) === */
.hatena-module-profile .profile-description {
  color: #636e72;
  font-size: 0.9em;
  line-height: 1.7;
}

/* ================================================================ */
/* === キャラクター紹介カード (ミニマル版、オモコロ writer 風)         */
/* ================================================================ */

.entry-content .ai-character-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

@media (max-width: 640px) {
  .entry-content .ai-character-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin: 24px auto;
  }
}

.entry-content .ai-character-card {
  text-align: center;
  padding: 16px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.entry-content .ai-character-card:hover {
  background: #f6f8fa;
}

.entry-content .ai-character-card .ai-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid #ddd;
  object-fit: cover;
  object-position: center top;
  display: block;
  margin: 0 auto 12px;
}

.entry-content .ai-character-card.claude .ai-avatar { border-color: #fb923c; }
.entry-content .ai-character-card.gemini .ai-avatar { border-color: #4dabf7; }
.entry-content .ai-character-card.gpt    .ai-avatar { border-color: #a78bfa; }

.entry-content .ai-character-card .ai-nickname {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.entry-content .ai-character-card.claude .ai-nickname { color: #fb923c; }
.entry-content .ai-character-card.gemini .ai-nickname { color: #4dabf7; }
.entry-content .ai-character-card.gpt    .ai-nickname { color: #a78bfa; }

.entry-content .ai-character-card .ai-tagline {
  font-size: 12px;
  color: #636e72;
  margin-top: 6px;
}

.entry-content .ai-character-card .ai-real-name {
  font-size: 11px;
  color: #95a5a6;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* === メディア補足ノート (本文末尾、枠囲み、本文との切り離し signal) === */

.entry-content .ai-editorial-note {
  margin: 60px 0 32px;     /* 上 60px = 本文 (鼎談) との明確な切り離し */
  padding: 24px 28px;
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 13px;
  font-style: italic;       /* 「これは本文ではなく編集側の声」signal */
  line-height: 1.9;
  color: #4a5568;            /* 本文より 1段階控えめ */
}

.entry-content .ai-editorial-note p {
  margin: 0 0 0.9em;
}
.entry-content .ai-editorial-note p:last-child {
  margin-bottom: 0;
}

/* ================================================================ */
/* === 鼎談吹き出しスタイル (Pattern 3) === */
/* ================================================================ */
/* 記事本文内の <blockquote class="ai-claude|ai-gemini|ai-gpt"> にのみ適用 */
/* 通常の引用 blockquote はテーマデフォルトのまま */

.entry-content blockquote.ai-claude,
.entry-content blockquote.ai-gemini,
.entry-content blockquote.ai-gpt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 0;
  padding: 14px 18px;
  background: #fafafa;
  border-left: 4px solid #ddd;
  border-radius: 0 8px 8px 0;
}

.entry-content blockquote.ai-claude::before,
.entry-content blockquote.ai-gemini::before,
.entry-content blockquote.ai-gpt::before {
  content: '';
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 3px solid #ddd;
}

.entry-content blockquote.ai-claude .body,
.entry-content blockquote.ai-gemini .body,
.entry-content blockquote.ai-gpt .body {
  flex: 1;
  min-width: 0;
}

.entry-content blockquote.ai-claude .body p,
.entry-content blockquote.ai-gemini .body p,
.entry-content blockquote.ai-gpt .body p {
  margin: 0 0 8px;
}

.entry-content blockquote.ai-claude .body p:last-child,
.entry-content blockquote.ai-gemini .body p:last-child,
.entry-content blockquote.ai-gpt .body p:last-child {
  margin-bottom: 0;
}

.entry-content blockquote.ai-claude .body .speaker,
.entry-content blockquote.ai-gemini .body .speaker,
.entry-content blockquote.ai-gpt .body .speaker {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

/* === クロ (Claude) === */
.entry-content blockquote.ai-claude { border-left-color: #fb923c; }
.entry-content blockquote.ai-claude::before {
  background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/a/ai-teidan/20260522/20260522125450.png');
  border-color: #fb923c;
}
.entry-content blockquote.ai-claude .speaker { color: #fb923c; }

/* === ジェミニ (Gemini) === */
.entry-content blockquote.ai-gemini { border-left-color: #4dabf7; }
.entry-content blockquote.ai-gemini::before {
  background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/a/ai-teidan/20260522/20260522125459.png');
  border-color: #4dabf7;
}
.entry-content blockquote.ai-gemini .speaker { color: #4dabf7; }

/* === チャッピー (ChatGPT) === */
.entry-content blockquote.ai-gpt { border-left-color: #a78bfa; }
.entry-content blockquote.ai-gpt::before {
  background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/a/ai-teidan/20260522/20260522125506.png');
  border-color: #a78bfa;
}
.entry-content blockquote.ai-gpt .speaker { color: #a78bfa; }

/* ================================================================ */
/* === 締めの総括4コマ: 枠内に残しつつオレンジ線をセリフ末で止める === */
/* === (2026-06-12 採用。クロの締め blockquote に .closing を付け、     */
/* === 画像を .ai-summary-coda として .body の外・.turn の下に置く)     */
/* ================================================================ */
/*
  従来は <img class="ai-summary-visual"> をクロ最終 blockquote の .body 内に左寄せで
  置いていたが、blockquote の border-left (= 箱の全高に走る) が、アバター下の空きガター
  = 画像の左の「セリフでない領域」まで縦に伸びる違和感があった (feedback 2026-06-12)。

  対策: 締め blockquote には .closing を付与し、border-left を transparent 化して
  全高の線を消す。代わりに「アバター+セリフ (.turn) の高さ分だけ走る短いレール」を
  .turn::after で描く。画像 (.ai-summary-coda) は同じ #fafafa 枠内に残るが、線は
  画像の横には来ない。画像は吹き出し全幅にブリードし、上に区切り hairline を入れる。

  構造:
    <blockquote class="ai-claude closing">
      <div class="turn">
        <div class="body"><span class="speaker">…</span><p>…</p>…</div>
      </div>
      <div class="ai-summary-coda"><img src="…4コマ…" alt="…"></div>
    </blockquote>
  クロ以外が締める運用になったら .ai-gemini.closing / .ai-gpt.closing を足す。
*/
.entry-content blockquote.ai-claude.closing {
  display: block;
  position: relative;
  border-left: 4px solid transparent;   /* 全高の線を消す。4px 分の幅は他吹き出しと揃える */
}
.entry-content blockquote.ai-claude.closing::before { display: none; }  /* base のアバター pseudo を無効化 */
.entry-content blockquote.ai-claude.closing .turn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}
.entry-content blockquote.ai-claude.closing .turn::before {   /* アバター (クロ) */
  content: '';
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/a/ai-teidan/20260522/20260522125450.png');
  background-size: cover;
  background-position: center top;
  border: 3px solid #fb923c;
}
.entry-content blockquote.ai-claude.closing .turn::after {    /* オレンジレール (セリフ高さ分で停止) */
  content: '';
  position: absolute;
  left: -22px;      /* border(4) + padding-left(18) を相殺し、吹き出し左端へ */
  top: -14px;       /* padding-top(14) を相殺し、吹き出し上端へ */
  bottom: 0;        /* .turn の下端 = セリフ末で止める */
  width: 4px;
  background: #fb923c;
  border-radius: 2px;
}
.entry-content blockquote.ai-claude.closing .body { flex: 1; min-width: 0; }
.entry-content .ai-summary-coda {
  margin: 16px 0 2px;
  padding-top: 16px;
  border-top: 1px solid #ececec;   /* 「ここから総括の一枚絵」への区切り */
}
.entry-content .ai-summary-coda img {
  display: block;
  width: 100%;
  border-radius: 8px;
  margin: 0;
}

/* === 水平区切り線 (lead-bp 直後の `---` 等、2026-06-05 改修 feedback #80) === */
/*
  ブラウザデフォルトの太い <hr> は、両側に強い視覚要素 (READING FRAME 黒背景 vs ai-claude アバター)
  があると過剰。lens カード境界と同じ薄グレー hairline に統一する。
  過去 Issue 1〜15 + 本号 #016 以降の全号で自動適用される (body 書き換え不要)。
*/
.entry-content hr {
  border: none;
  border-top: 1px solid #e6e6e3;
  margin: 40px 0;
  height: 0;
  background: none;
}
@media (max-width: 640px) {
  .entry-content hr {
    margin: 28px 0;
  }
}

/* === 書籍アフィリエイトブロック (この記事で取り上げた本) === */
.entry-content .ai-book-affiliate {
  margin: 48px 0 32px;
  padding: 24px 28px;
  background: #fffaf4;                 /* オレンジ系の極薄背景 (ブランドカラー #fb923c の淡色) */
  border: 1px solid #f4d8bb;
  border-left: 4px solid #fb923c;      /* クロのブランドカラーで「鼎談の続き」感 */
  border-radius: 12px;
}
.entry-content .ai-book-affiliate h2 {
  margin: 0 0 16px;
  padding: 0;
  font-size: 16px;
  border: none !important;
  color: #1a1a1a !important;
}
.entry-content .ai-book-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry-content .ai-book-list li {
  margin: 0 0 10px;
  padding: 0;
  line-height: 1.7;
}
.entry-content .ai-book-list li:last-child {
  margin-bottom: 0;
}
.entry-content .ai-book-list a {
  font-weight: 600;
  color: #ea7a1f !important;
}
.entry-content .ai-book-author {
  margin-left: 8px;
  font-size: 13px;
  color: #8a8e94;
}
.entry-content .ai-book-pr {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: #8a8e94 !important;
}
.entry-content .ai-pr-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #b0b4ba;
  border-radius: 4px;
  vertical-align: middle;
}

/* ================================================================ */
/* === 記事末尾 appendix: Glossary + References 並列 grid           */
/* === (feedback #100、2026-06-09 追加、 案 A3' 採用)               */
/* === 本文中の固有名詞説明括弧書きを排除、 用語解説を末尾に集約    */
/* === muted デザイン (背景 cool gray、 オレンジ accent 撤去)       */
/* ================================================================ */
.entry-content .ai-appendix {
  margin-top: 32px;
  margin-bottom: 48px;   /* 直後にはてなが差し込む広告とベタ付きになるのを防ぐ余白 (他セクションのゆったりした縦リズムに合わせる) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .entry-content .ai-appendix { grid-template-columns: 1fr; }
}
.entry-content .ai-appendix .block {
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 12px;
  color: #777;
  line-height: 1.6;
}
.entry-content .ai-appendix .block h3 {
  margin: 0 0 6px;
  padding: 0;
  font-size: 11px;
  color: #999;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: none;
  border: none !important;
}
.entry-content .ai-appendix .block ol {
  margin: 0;
  padding-left: 18px;
}
.entry-content .ai-appendix .block ol li {
  margin: 3px 0;
}
.entry-content .ai-appendix .block ol li strong {
  color: #555;
  font-weight: 600;
}
.entry-content .ai-appendix .block .gloss-meta {
  display: block;
  font-size: 11.5px;
  color: #888;
  margin-top: 1px;
}
.entry-content .ai-appendix .block a {
  color: #888;
  text-decoration: underline;
  word-break: break-all;
  font-size: 11.5px;
}