/*
Theme Name: Owlabo Child
Theme URI: https://owlabo.example.com/
Description: Cocoon 子テーマ（Owlabo｜技術・AI）。Developer Console / IDE 世界観。GitHubダーク基調＋ターミナルグリーン＋monospace UI アクセント＋エディタ風コードブロック。カスタムは全て本子テーマに集約、Cocoon 親テーマは無改造。M&A 時はフォルダ移管で再現可能。
Author: Owlabo
Template: cocoon-master
Version: 2.2.4
*/

/* ===========================================================================
 *  Owlabo Child v2.0.1
 *  v2.0.1: オリジナル v2.0.0 完全準拠ベース。
 *          末尾「SITE_PATCH」ブロックでのみ運用必須機能を追記。
 *          - PV/アクセス数の非表示
 *          - サイドバー暗色化（標準ウィジェットの白背景補修）
 * =========================================================================== */

/* ===========================================================================
 *  Owlabo Child v2.0.0
 *  Developer Console / IDE world — GitHub Dark × Terminal Green × Monospace
 *
 *  0. Design tokens
 *  1. Base reset & body canvas
 *  2. Cocoon chrome override (header / navi / content / footer)
 *  3. Layout containers
 *  4. Long-form typography (.entry-content)
 *  5. Code blocks (pre / code / language tag / copy hook / line numbers)
 *  6. Article meta / author / table of contents (.ow-*)
 *  7. Cards / widgets / related-entry / sidebar
 *  8. Editorial home — shortcode components (.al-*)
 *  9. E-E-A-T / subscribe / revenue band
 * 10. Category & archive
 * 11. Responsive (<= 782px)
 * 12. Print, reduced motion, focus, selection
 * =========================================================================== */

/* 0. ===== Design tokens ====================================================*/
:root{
  /* base surface */
  --bg:        #0a0e14;
  --bg-grad:   #0d1117;
  --surface-1: #11161d;
  --surface-2: #161b22;
  --surface-3: #1c2230;

  /* lines */
  --line-1: #21262d;
  --line-2: #30363d;
  --line-3: #3d444d;

  /* ink */
  --ink:    #e6edf3;
  --ink-2:  #cdd6e1;
  --muted:  #8b949e;
  --dim:    #6e7681;
  --faint:  #484f58;

  /* accents — GitHub-ish */
  --green:  #3fb950;
  --green-deep: #2ea043;
  --teal:   #2dd4bf;
  --blue:   #58a6ff;
  --amber:  #d29922;
  --red:    #f85149;
  --purple: #a371f7;

  /* semantic — overridable by tweaks at runtime */
  --accent: var(--green);
  --accent-soft: rgba(63,185,80,.12);
  --accent-deep: var(--green-deep);
  --link:   var(--blue);
  --link-hover: var(--teal);

  /* typography */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", "Roboto Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;

  --fs-body: 16px;
  --lh-body: 1.92;
  --lh-tight: 1.45;

  /* spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* radii / shadow */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px;
  --shadow-1: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,.55);

  /* motion */
  --t-fast: .14s ease;
  --t-med:  .22s cubic-bezier(.4,.0,.2,1);
}

/* 1. ===== Base reset & body canvas ========================================*/
html,body{ background:var(--bg) !important; color:var(--ink) !important; }
body{
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(900px 600px at 50% -10%, rgba(63,185,80,.08), transparent 60%),
    radial-gradient(rgba(139,148,158,.07) 1px, transparent 1px) !important;
  background-size: auto, 28px 28px !important;
  background-position: 0 0, 0 0 !important;
  background-attachment: fixed !important;
}
::selection{ background:rgba(63,185,80,.32); color:#fff; }
a{ color:var(--link); text-decoration:none; }
a:hover{ color:var(--link-hover); }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* 2. ===== Cocoon chrome override ==========================================*/
#container,#content,#content-in,#main,.wrap,.content,#wrap,.main,
.main-content,.main-in,.article,.post,.page,.entry-content,#list,
.related-entry-card,.a-wrap{
  background-color: transparent !important;
  color: var(--ink) !important;
}

/* Header / navigation */
#header-container,.header-container,
#header,.header,.header-in,
#navi,.navi,.navi-in,
.appeal{
  background: rgba(10,14,20,.88) !important;
  border-bottom: 1px solid var(--line-2) !important;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.tagline{ display:none !important; }

.site-name-text, .logo-text, #site-title a, .site-name a{
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink) !important;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1rem;
}
.site-name-text::before, #site-title a::before{
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("assets/site-icon.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
  vertical-align: -5px;
  flex-shrink: 0;
}
/* footer logo: subtler — small owl mark */
.footer-bottom .site-name-text{ font-size:.92rem; color:var(--muted) !important; }
.footer-bottom .site-name-text::before{
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: -4px;
  opacity: .8;
}

#navi .navi-in > ul > li > a,
.navi ul a{
  color: var(--muted) !important;
  font-family: var(--mono);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color var(--t-fast), background var(--t-fast);
}
#navi .navi-in > ul > li > a:hover,
.navi ul a:hover{
  color: var(--ink) !important;
  background: var(--accent-soft) !important;
}
#navi .navi-in > ul > li.current-menu-item > a,
#navi .navi-in > ul > li.current_page_item > a{
  color: var(--ink) !important;
  box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* mobile drawer */
.menu-drawer,.navi-menu-content{
  background: var(--surface-2) !important;
  border-left: 1px solid var(--line-2) !important;
}
.menu-drawer a{ color: var(--ink-2) !important; font-family: var(--mono); font-size:.92rem; }
.menu-drawer a:hover{ background: var(--accent-soft) !important; }

/* Footer */
#footer, .footer, .footer-in, .footer-container, .footer-bottom{
  background: #060a10 !important;
  color: var(--muted) !important;
  border-top: 1px solid var(--line-2) !important;
}
#footer a{ color: var(--muted); }
#footer a:hover{ color: var(--ink); }
.footer-bottom{ border-top: 1px dashed var(--line-1) !important; }
.copyright{ font-family: var(--mono); font-size:.78rem; color: var(--dim) !important; }

/* breadcrumb */
#breadcrumb, .breadcrumb{
  background: transparent !important;
  font-family: var(--mono);
  font-size: .78rem !important;
  color: var(--dim) !important;
  padding: 14px 0 !important;
}
#breadcrumb a, .breadcrumb a{ color: var(--muted); }
#breadcrumb .fa, .breadcrumb .fa{ color: var(--accent); }

/* 3. ===== Layout containers ===============================================*/
.al-wrap{
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}
.al-sec{ margin: 52px auto; }
.al-sec:first-child{ margin-top: 32px; }

/* Universal section heading */
.al-h{
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 22px;
  padding: 0 0 14px 22px;
  color: var(--ink);
  letter-spacing: .02em;
  position: relative;
  border-bottom: 1px solid var(--line-1);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.al-h::before{
  content: "//";
  position: absolute; left: 0; top: 0;
  color: var(--accent);
  font-weight: 800;
}
.al-h::after{
  content: "";
  flex: 1;
  height: 1px; /* visual filler bar — keeps inline counts aligned */
}

/* 4. ===== Long-form typography ============================================*/
.entry-content{
  color: var(--ink-2) !important;
  line-height: var(--lh-body);
  font-size: 1rem;
  max-width: 760px;
}
/* full-width children when needed (figures/tables/code can break out) */
.entry-content > pre,
.entry-content > .ow-tech-note,
.entry-content > figure.is-wide{ max-width: 880px; }

.entry-content p{ margin: 1.1em 0; }
.entry-content p,
.entry-content li{ text-wrap: pretty; }

.entry-title, h1.entry-title{
  font-family: var(--sans);
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  font-weight: 800;
  line-height: 1.35;
  color: #fff !important;
  letter-spacing: -.005em;
  margin: 0 0 16px;
  border: none !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.article h2,.article h3{
  color: #fff !important;
  border: none !important;
  font-family: var(--sans);
  letter-spacing: -.005em;
}

.entry-content h2{
  position: relative;
  margin: 2.4em 0 .9em;
  padding: 4px 0 12px 30px;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.4;
  border-bottom: 1px solid var(--line-1) !important;
}
.entry-content h2::before{
  content: "#";
  position: absolute; left: 0; top: 2px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.35rem;
}

.entry-content h3{
  position: relative;
  margin: 1.9em 0 .7em;
  padding: 2px 0 2px 16px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
  border-left: 3px solid var(--teal) !important;
}

.entry-content h4{
  font-size: 1rem;
  font-weight: 700;
  margin: 1.6em 0 .5em;
  color: var(--ink) !important;
}
.entry-content h4::before{
  content: "// ";
  color: var(--dim);
  font-family: var(--mono);
  font-weight: 600;
}

.entry-content a{
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(88,166,255,.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.entry-content a:hover{
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}
.entry-content strong{ color: #fff; font-weight: 700; }
.entry-content em{ color: var(--ink); font-style: italic; }
.entry-content ul, .entry-content ol{ padding-left: 1.5em; }
.entry-content ul li{ margin: .4em 0; }
.entry-content ul li::marker{ color: var(--accent); }
.entry-content ol li::marker{ color: var(--muted); font-family: var(--mono); font-weight: 700; }
.entry-content hr{
  border: none;
  border-top: 1px dashed var(--line-2);
  margin: 2.4em 0;
}

.entry-content blockquote{
  margin: 1.6em 0;
  padding: 14px 18px 14px 22px;
  background: var(--surface-2) !important;
  border: 1px solid var(--line-1) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--r-md);
  color: var(--muted) !important;
  font-style: normal;
}
.entry-content blockquote p:first-child{ margin-top: 0; }
.entry-content blockquote p:last-child{ margin-bottom: 0; }

.entry-content img{
  border-radius: var(--r-md);
  border: 1px solid var(--line-1);
  max-width: 100%;
  height: auto;
}

.entry-content table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.6em 0;
  font-size: .94em;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.entry-content table th,
.entry-content table td{
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line-1) !important;
  color: var(--ink-2) !important;
}
.entry-content table th{
  background: var(--surface-1) !important;
  color: #fff !important;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.entry-content table tr:last-child td{ border-bottom: none !important; }

/* 5. ===== Code blocks =====================================================*/
.entry-content code,
.entry-content kbd,
.entry-content samp{
  background: var(--surface-1) !important;
  color: #7ee787 !important;
  border: 1px solid var(--line-1);
  border-radius: var(--r-sm);
  padding: .12em .42em;
  font-family: var(--mono);
  font-size: .88em;
  font-weight: 500;
  word-break: break-word;
}
.entry-content a code{ color: var(--link); }

/* Editor-style fenced blocks */
.entry-content pre{
  position: relative;
  margin: 1.6em 0;
  padding: 44px 18px 18px !important;
  background: #0b1117 !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  font-family: var(--mono);
  font-size: .86em;
  line-height: 1.75;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-1);
}
.entry-content pre::before{
  /* window chrome */
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(180deg, #0e151d, #0a0f15);
  border-bottom: 1px solid var(--line-1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.entry-content pre::after{
  /* stoplight */
  content: "";
  position: absolute; top: 11px; left: 14px;
  width: 10px; height: 10px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 16px 0 0 var(--amber), 32px 0 0 var(--green);
}
.entry-content pre code{
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  padding: 0;
  font-size: inherit;
  display: block;
}

/* Language label injected by functions.php / can also be added as data-lang */
.entry-content pre[data-lang]::before{
  background: linear-gradient(180deg, #0e151d, #0a0f15);
}
.entry-content pre[data-lang] > .ow-lang,
.ow-lang{
  position: absolute;
  top: 7px; right: 56px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-1);
}

/* Copy button (injected by functions.php / JS) */
.ow-copy{
  position: absolute;
  top: 6px; right: 8px;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.ow-copy:hover{ color: var(--ink); background: var(--surface-3); border-color: var(--line-3); }
.ow-copy.is-copied{ color: var(--accent); border-color: var(--accent); }

/* Optional line numbers — opt in with <pre class="ow-lines"> */
.entry-content pre.ow-lines code{
  counter-reset: line;
  display: block;
}
.entry-content pre.ow-lines code > .ln,
.entry-content pre.ow-lines code .line{
  display: block;
  counter-increment: line;
  position: relative;
  padding-left: 3.2em;
}
.entry-content pre.ow-lines code > .ln::before,
.entry-content pre.ow-lines code .line::before{
  content: counter(line);
  position: absolute; left: 0; top: 0;
  width: 2.4em;
  text-align: right;
  color: var(--faint);
  user-select: none;
  border-right: 1px solid var(--line-1);
  padding-right: .6em;
}

/* 6. ===== Article meta / author / TOC additions ===========================*/
.entry-meta, .article-meta, .post-meta{
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--dim);
  margin: 6px 0 24px;
  letter-spacing: .02em;
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
}
.entry-meta .post-date::before,
.article-meta .post-date::before{
  content: "▸ updated ";
  color: var(--accent);
}
.entry-meta .reading-time::before{ content: "▸ read "; color: var(--accent); }
.entry-meta .author::before{ content: "▸ by "; color: var(--accent); }

/* Tech note (existing class — kept; refined) */
.ow-tech-note{
  margin: 1.6em 0;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: .86em;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-md);
}
.ow-tech-note::before{
  content: "$ env --check";
  display: block;
  font-size: .72rem;
  color: var(--amber);
  margin-bottom: 6px;
  letter-spacing: .04em;
}
.ow-tech-note code{ background: var(--bg) !important; }

/* TOC — IDE outline-panel feel */
.ow-toc, .toc{
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 0;
  margin: 1.6em 0 2em;
  overflow: hidden;
  font-size: .94em;
}
.ow-toc::before, .toc::before{
  content: "OUTLINE";
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--dim);
  background: var(--surface-1);
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-1);
}
.ow-toc ol, .ow-toc ul,
.toc ol, .toc ul{
  list-style: none !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  font-family: var(--mono);
}
.ow-toc li, .toc li{ margin: 0 !important; padding: 0; line-height: 1.5; }
.ow-toc a, .toc a{
  display: block;
  padding: 5px 6px 5px 16px;
  color: var(--ink-2);
  text-decoration: none !important;
  border-left: 2px solid transparent;
  font-size: .92em;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.ow-toc a:hover, .toc a:hover{
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.ow-toc li li a, .toc li li a{ padding-left: 32px; color: var(--muted); font-size: .88em; }
.ow-toc li li a::before, .toc li li a::before{ content: "└ "; color: var(--faint); margin-left: -14px; }

/* Author / E-E-A-T inline card under articles */
.ow-author{
  margin: 2.4em 0 1.2em;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.ow-author-avatar{
  width: 64px; height: 64px;
  border-radius: 8px;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 1.4rem; font-weight: 800;
  color: var(--accent);
  overflow: hidden;
}
.ow-author-avatar img{ width:100%; height:100%; object-fit: cover; border-radius: 0 !important; border: none !important; }
.ow-author-name{
  font-family: var(--mono);
  font-size: .94rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
}
.ow-author-name::before{ content: "@"; color: var(--accent); margin-right: 2px; }
.ow-author-bio{
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--muted);
}
.ow-author-meta{
  margin-top: 8px;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--dim);
  display: flex; flex-wrap: wrap; gap: 14px;
}

/* 7. ===== Cards / widgets / related-entry / sidebar ======================*/
.card, .entry-card, .related-entry-card, .widget, .ect-entry-card,
.sidebar .widget{
  background: var(--surface-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-lg) !important;
  color: var(--ink-2) !important;
}
.entry-card-title, .card-title, .widget-title, .related-entry-card-title{
  color: #fff !important;
  font-weight: 700;
}
.widget-title, .sidebar-title{
  font-family: var(--mono) !important;
  font-size: .92rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--line-1) !important;
  background: var(--surface-1) !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
  letter-spacing: .02em;
  margin: 0 !important;
}
.widget-title::before{ content: "▸ "; color: var(--accent); }
.cat-label, .badge, .tag, .post-categories a{
  display: inline-block;
  background: var(--surface-1) !important;
  color: var(--teal) !important;
  font-family: var(--mono);
  font-size: .7rem !important;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px !important;
  border: 1px solid var(--line-2);
  border-radius: 4px !important;
}

/* 8. ===== Editorial home — shortcode components (.al-*) ==================*/
/* shared thumb */
.al-thumb{
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--surface-1);
}
.al-thumb-ph{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  background:
    linear-gradient(rgba(139,148,158,.06) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(139,148,158,.06) 1px, transparent 1px) 0 0 / 22px 100%,
    linear-gradient(135deg, #0d1117 0%, #11202a 100%);
}
.al-thumb-ph::before{
  content: "</>";
  opacity: .85;
  letter-spacing: -.02em;
}
.al-thumb-ph::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(63,185,80,.10), transparent 60%);
  pointer-events: none;
}

.al-tag{
  display: inline-block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--surface-1);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
}
.al-date{
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--dim);
  margin-top: 10px;
  letter-spacing: .02em;
}
.al-date::before{ content: "// "; color: var(--faint); }

/* Pickup: hero pair */
.al-pickup{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.al-pick{
  display: block;
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
  position: relative;
}
.al-pick::after{
  /* hover sheen */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(63,185,80,.06));
  opacity: 0;
  transition: opacity var(--t-med);
  pointer-events: none;
}
.al-pick:hover{
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.al-pick:hover::after{ opacity: 1; }
.al-pick-body{
  display: block;
  padding: 18px 20px 20px;
}
.al-pick-title{
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.55;
  margin: 12px 0 4px;
  color: #fff;
  letter-spacing: -.003em;
}

/* Recent grid */
.al-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.al-card{
  display: block;
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.al-card:hover{
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: var(--shadow-2);
}
.al-card-body{
  display: block;
  padding: 14px 16px 16px;
}
.al-card-title{
  display: block;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.55;
  margin: 10px 0 2px;
  color: var(--ink);
}

/* Ranking — terminal log */
.al-rank{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mono);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.al-rank::before{
  content: "▸ trending --week --top 5";
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--dim);
  padding: 10px 16px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-1);
}
.al-rank li{ margin: 0 !important; padding: 0; }
.al-rank li a{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-1);
  text-decoration: none !important;
  color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.al-rank li:last-child a{ border-bottom: none; }
.al-rank li a:hover{
  background: var(--accent-soft);
  color: var(--ink);
}
.al-rank-n{
  flex: 0 0 32px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  font-weight: 800;
  color: var(--accent);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-family: var(--mono);
}
.al-rank-n::before{ content: "0"; }
.al-rank li:nth-child(n+10) .al-rank-n::before{ content: ""; }
.al-rank-t{
  font-weight: 500;
  font-size: .93rem;
  font-family: var(--sans);
  line-height: 1.45;
}

/* 9. ===== Revenue band / E-E-A-T / Subscribe ==============================*/
.al-revband{
  position: relative;
  border-radius: var(--r-xl);
  padding: 56px 30px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  color: var(--ink);
  background:
    radial-gradient(800px 240px at 12% 130%, rgba(63,185,80,.10), transparent 70%),
    var(--surface-1);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3);
}
.al-revband::before{
  /* terminal title bar */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 38px;
  background: linear-gradient(180deg, #0a0e14, #0d1117);
  border-bottom: 1px solid var(--line-1);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.al-revband::after{
  content: "owlabo — partner.sh — 80×24";
  position: absolute;
  top: 12px; left: 0; right: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--dim);
  letter-spacing: .02em;
}
/* stoplight */
.al-revband > div:first-child::before{
  content: "";
  position: absolute;
  top: 13px; left: 18px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 18px 0 0 var(--amber), 36px 0 0 var(--green);
}
.al-revband > div:first-child{ flex: 1 1 60%; min-width: 280px; }
.al-revband h2{
  font-family: var(--mono);
  font-size: 1.35rem;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: -.005em;
  line-height: 1.45;
}
.al-revband h2::before{ content: "$ "; color: var(--accent); font-weight: 800; }
.al-revband p{
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.7;
}
.al-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-weight: 800;
  padding: 14px 26px;
  border-radius: var(--r-md);
  text-decoration: none !important;
  color: #06120b;
  background: var(--accent);
  white-space: nowrap;
  border: 1px solid var(--accent-deep);
  box-shadow: 0 2px 0 var(--accent-deep), 0 8px 22px rgba(63,185,80,.18);
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  letter-spacing: .01em;
  font-size: .92rem;
}
.al-btn::after{ content: "→"; font-weight: 700; }
.al-btn:hover{
  background: var(--teal);
  color: #06120b;
  transform: translateY(-2px);
  box-shadow: 0 4px 0 #14b8a6, 0 12px 30px rgba(45,212,191,.22);
}
.al-btn:active{ transform: translateY(0); box-shadow: 0 1px 0 var(--accent-deep); }

.al-eeat{
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  padding: 22px 26px;
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.95;
}
.al-eeat strong{
  font-family: var(--mono);
  color: var(--teal);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.al-sub{
  text-align: center;
  border-radius: var(--r-lg);
  padding: 38px 28px;
  background:
    radial-gradient(600px 200px at 50% 110%, rgba(45,212,191,.10), transparent 65%),
    var(--surface-1);
  border: 1px dashed var(--line-2);
}
.al-sub h2{
  font-family: var(--mono);
  color: #fff;
  margin: 0 0 8px;
  font-size: 1.15rem;
  letter-spacing: -.005em;
}
.al-sub h2::before{ content: "▸ "; color: var(--accent); }
.al-sub p{ margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.8; }
.al-sub a{ color: var(--teal); font-weight: 700; }

/* 10. ===== Comparison & exchange (kept from v1) ==========================*/
.al-cmp{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
  margin: 22px 0;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.al-cmp th, .al-cmp td{
  border-bottom: 1px solid var(--line-1);
  padding: 12px;
  text-align: center;
  color: var(--ink);
}
.al-cmp th{
  background: var(--surface-1);
  color: #fff;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.al-cmp tr:hover td{ background: var(--accent-soft); }
.al-exch{
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin: 20px 0;
  background: var(--surface-2);
}
.al-exch h3{ margin: 0 0 8px; color: #fff; font-family: var(--mono); }

/* 11. ===== Responsive ====================================================*/
@media (max-width: 782px){
  .al-wrap{ padding: 0 14px; }
  .al-sec{ margin: 36px auto; }
  .al-pickup{ grid-template-columns: 1fr; gap: 14px; }
  .al-grid{ grid-template-columns: 1fr; gap: 14px; }
  .al-revband{
    flex-direction: column;
    text-align: left;
    align-items: stretch;
    padding: 56px 20px 22px;
  }
  .al-btn{ width: 100%; justify-content: center; }
  .entry-title, h1.entry-title{ font-size: 1.5rem; }
  .entry-content h2{ font-size: 1.25rem; padding-left: 26px; }
  .entry-content h3{ font-size: 1.05rem; }
  .entry-content{ font-size: .98rem; line-height: 1.85; }
  .ow-author{ grid-template-columns: 48px 1fr; }
  .ow-author-avatar{ width: 48px; height: 48px; font-size: 1.1rem; }
  body{ background-size: auto, 22px 22px !important; }
}

/* 12. ===== Print, reduced motion, etc. ===================================*/
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition: none !important;
    animation: none !important;
  }
  .al-pick:hover, .al-card:hover, .al-btn:hover{ transform: none; }
}

@media print{
  html, body{
    background: #fff !important;
    color: #111 !important;
  }
  #header-container, #navi, .sidebar, .footer, #footer,
  .al-revband, .al-sub, .ow-copy{ display: none !important; }
  .entry-content, .entry-content *{
    color: #111 !important;
    background: transparent !important;
    border-color: #ddd !important;
  }
  .entry-content a{ color: #06c !important; text-decoration: underline !important; }
  .entry-content pre{
    background: #f6f8fa !important;
    color: #111 !important;
    box-shadow: none !important;
    padding-top: 18px !important;
  }
  .entry-content pre::before, .entry-content pre::after{ display: none !important; }
}

/* End of Owlabo Child v2.0.0 */

/* ============================================================
 * ===== SITE_PATCH (v2.0.1) — オリジナル v2.0.0 への追加分のみ
 *  以下は本サイト固有の運用要件で必要なため追加。
 *  オリジナルテーマ世界観には影響しない補助的なルールのみ。
 * ============================================================ */

/* [SITE_PATCH] PV/アクセス集計の表示を訪問者から隠す（管理画面の集計は維持） */
.post-views,
.entry-card-meta .post-views, .entry-card-info .post-views,
.post-info .post-views, .entry-meta .post-views,
.entry-card-pv, .entry-pv, .post-pv,
.popular-entry-card-pv, .related-entry-card-pv,
.card-pv, .pv-num, .views-count,
.entry-card-info .pv, .entry-card-info [class*="pv"],
.entry-card-info .access, .entry-card-info [class*="access"],
.fa-eye, .fa-bar-chart, .fa-chart-bar{
  display:none !important;
}
.entry-card-meta:has(i.fa-bar-chart),
.entry-card-meta:has(i.fa-chart-bar),
.entry-card-info:has(i.fa-bar-chart),
.entry-card-info:has(i.fa-chart-bar){
  display:none !important;
}

/* [SITE_PATCH] サイドバーの可読性補修（v2.0.0で標準widget白背景が残る箇所のダーク化） */
#sidebar, .sidebar, .sidebar-in,
#sidebar .widget, .widget,
.widget_search, .widget_recent_entries, .widget_categories,
.widget_archive, .widget_meta, .widget_pages, .widget_tag_cloud{
  background: var(--surface-2) !important;
  color: var(--ink-2) !important;
  border-color: var(--line-2) !important;
}
.widget-title, .widget h2, .widget h3{
  color:#fff !important; border-color:var(--line-2) !important;
  background:transparent !important;
}
.widget a, .widget li a, #sidebar a, #sidebar li a{ color:var(--ink-2) !important; }
.widget a:hover, #sidebar a:hover{ color:var(--accent) !important; }
.widget li{ border-color:var(--line-1) !important; color:var(--muted) !important; }
.widget input[type="search"], .widget input[type="text"],
.search-form input[type="search"]{
  background:var(--surface-1) !important; color:var(--ink) !important;
  border:1px solid var(--line-2) !important; box-shadow:none !important;
}
.widget input[type="search"]::placeholder,
.search-form input[type="search"]::placeholder{ color:var(--muted) !important; }
.search-submit, .widget .search-form button, .widget button[type="submit"]{
  background:var(--accent) !important; color:#06120b !important;
  border:1px solid var(--accent-deep) !important;
}
.search-submit:hover{ background:var(--green-deep) !important; }

/* [SITE_PATCH] Cocoonデフォルトのh2背景/枠が al-sub/al-revband 内に侵入し
 * 「白背景白文字」になる問題への上書き。
 */
.entry-content .al-sub h2,
.entry-content .al-revband h2,
.al-sub h2, .al-revband h2{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  color: #fff !important;
}
.al-sub h2 span, .al-revband h2 span{
  background: transparent !important;
  color: #fff !important;
}

/* [SITE_PATCH] al-h: Cocoonデフォルトのh2背景/枠が侵入し
 * 「明文字 on 明背景」で読めなくなる問題への上書き。
 */
.entry-content .al-h,
.al-h{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-1) !important;
  padding: 0 0 14px 22px !important;
  margin: 0 0 22px !important;
  color: var(--ink) !important;
}
.al-h span{
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* [SITE_PATCH] アーカイブ(カテゴリー/タグ)ページのPV表示を抑制
 * Cocoonは entry-card-{today,week,month,all}-pv-count 等の固有クラスを使う。
 * 上の包括ルールで取り逃した分の補完。
 */
.entry-card-today-pv-count,
.entry-card-week-pv-count,
.entry-card-month-pv-count,
.entry-card-all-pv-count,
.entry-card-today-pv,
.entry-card-week-pv,
.entry-card-month-pv,
.entry-card-all-pv,
[class*="pv-count"],
[class$="-pv"]{
  display: none !important;
}
/* PV関連spanを含む親コンテナ全体を非表示（アーカイブカードのPV帯を消す） */
.entry-card-info:has([class*="pv-count"]),
.entry-card-info:has(i.fa-bar-chart),
.entry-card-info:has(i.fa-chart-bar),
.entry-card-meta:has([class*="pv-count"]){
  display: none !important;
}

/* ============================================================
 * [SITE_PATCH v2.0.7] 編集部ヒーロー（著者アーカイブ先頭）
 *   - /author/owlabo-editorial/ で表示
 *   - .al-editorial-hero : Developer Console 調（GitHub Dark）
 *   - 既存の v2.0.x ダークパレットに追随
 * ============================================================ */
.al-editorial-hero{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 28px;
  margin: 20px 0 40px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0D1117 0%, #161B22 100%);
  border: 1px solid rgba(120, 180, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(13, 17, 23, 0.6) inset, 0 18px 48px rgba(0, 0, 0, 0.45);
  align-items: center;
  font-family: ui-monospace, "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
}
.al-editorial-hero .al-editorial-avatar{ display: flex; justify-content: center; }
.al-editorial-hero .al-editorial-avatar img{
  width: 120px; height: 120px;
  border-radius: 18px;
  display: block;
  border: 1px solid rgba(120, 180, 255, 0.18);
  box-shadow: 0 6px 24px rgba(88, 230, 138, 0.18);
}
.al-editorial-hero .al-editorial-eyebrow{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #58E68A;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.al-editorial-hero .al-editorial-name{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #E6EDF3;
  font-family: ui-sans-serif, system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
}
.al-editorial-hero .al-editorial-bio{
  font-size: 13.5px;
  line-height: 1.85;
  color: #B8C2CC;
  margin: 0 0 14px;
}
.al-editorial-hero .al-editorial-meta{
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px;
  color: #8B98A5;
  border-top: 1px dashed rgba(120, 180, 255, 0.12);
  border-bottom: 1px dashed rgba(120, 180, 255, 0.12);
  padding: 10px 0;
  margin: 0 0 14px;
}
.al-editorial-hero .al-editorial-meta strong{ color: #58E68A; font-weight: 700; margin: 0 3px; }
.al-editorial-hero .al-editorial-cta{ display: flex; gap: 10px; flex-wrap: wrap; }
.al-editorial-hero .al-editorial-cta .al-btn{
  display: inline-flex; align-items: center;
  padding: 9px 18px;
  font-size: 13px; font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  background: linear-gradient(135deg, #2EA043 0%, #58E68A 100%);
  color: #0D1117;
  border: 1px solid #3DDC84;
}
.al-editorial-hero .al-editorial-cta .al-btn-ghost{
  background: transparent;
  color: #58E68A;
  border-color: rgba(88, 230, 138, 0.4);
}
@media (max-width: 640px){
  .al-editorial-hero{
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 18px;
  }
  .al-editorial-hero .al-editorial-avatar img{ margin: 0 auto; }
  .al-editorial-hero .al-editorial-meta{ justify-content: center; }
  .al-editorial-hero .al-editorial-cta{ justify-content: center; }
}

/* ============================================================
 * [SITE_PATCH v2.0.8] ホーム再構成
 *   - ヘッダー直下「TOP STORIES」ヒーロー（背景: assets/hero-home.svg）
 *   - ホーム時のページタイトル「ホーム」を非表示
 *   - ホーム時の目次(TOC)を非表示
 * ============================================================ */

/* (a) ホームのページタイトル「ホーム」を非表示 */
body.home .entry-title,
body.home .a-wrap > .entry-header,
body.home article > header.entry-header h1{
  display: none !important;
}

/* (b) ホームの目次を非表示 */
body.home .toc,
body.home .cocoon-block-toc,
body.home #toc{
  display: none !important;
}

/* (c) ヘッダー直下ヒーロー */
.al-home-hero{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  margin: 14px 0 56px;
  padding: 60px 36px 64px;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(8,12,18,0.45) 0%, rgba(8,12,18,0.86) 100%),
    url("assets/hero-home.svg") center/cover no-repeat;
  border: 1px solid rgba(120, 180, 255, 0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,0.55);
}
.al-home-hero::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 110%, rgba(8,12,18,0.65), transparent 60%);
}
.al-home-hero-inner{
  position: relative; z-index: 1;
  max-width: 1100px; width: 100%; margin: 0 auto;
}
.al-home-hero-eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: #58E68A;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding: 4px 0 4px 14px;
  border-left: 3px solid #3DDC84;
  background: transparent !important;
  border-bottom: none !important;
}
.al-home-hero-eyebrow::after,
.al-home-hero-eyebrow::before{ display: none !important; }

.al-home-hero .al-pickup{ margin-top: 0; }
.al-home-hero .al-pick{
  background: rgba(17, 22, 29, 0.92) !important;
  border-color: rgba(120, 180, 255, 0.18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 28px 60px -22px rgba(0,0,0,0.65);
}
.al-home-hero .al-pick:hover{
  border-color: rgba(88, 230, 138, 0.45) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 32px 72px -24px rgba(88, 230, 138, 0.30);
}

@media (max-width: 980px){
  .al-home-hero{ padding: 48px 22px 54px; min-height: 420px; border-radius: 12px; }
  .al-home-hero-eyebrow{ font-size: 11px; letter-spacing: 0.24em; }
}
@media (max-width: 640px){
  .al-home-hero{ padding: 36px 16px 40px; min-height: 360px; border-radius: 10px; }
}

/* ============================================================
 * [SITE_PATCH v2.0.9] ヒーロー = #content の手前で全幅表示
 *   - tmp-user/main-before.php から描画されるため、サイドバーより上に出る
 *   - .al-home-hero-full は #container 直下に配置される（.wrap の外）
 *   - ホーム時の上部SNSシェア・日付も非表示
 * ============================================================ */

/* (a) ホーム時の上部SNSシェアボタンを非表示 */
body.home .sns-share-top,
body.home .sns-share-top-content,
body.home .sns-share-message,
body.home .sns-share{
  display: none !important;
}

/* (b) ホーム時のページ日付・更新日表示を非表示 */
body.home .date-tags,
body.home .post-date,
body.home .post-update,
body.home .post-meta-date{
  display: none !important;
}

/* (c) 全幅ヒーロー */
.al-home-hero-full{
  width: 100%;
  max-width: none;
  margin: 0 0 48px;
  padding: 64px 0 72px;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(8,12,18,0.45) 0%, rgba(8,12,18,0.88) 100%),
    url("assets/hero-home.svg") center/cover no-repeat;
  border: none;
  border-bottom: 1px solid rgba(63,185,80,0.20);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,0.55);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
}
.al-home-hero-full .al-home-hero-inner{
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px;
}
.al-home-hero-full::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 110%, rgba(8,12,18,0.65), transparent 60%);
}

@media (max-width: 980px){
  .al-home-hero-full{ padding: 48px 0 56px; min-height: 400px; }
  .al-home-hero-full .al-home-hero-inner{ padding: 0 18px; }
}
@media (max-width: 640px){
  .al-home-hero-full{ padding: 36px 0 44px; min-height: 360px; }
  .al-home-hero-full .al-home-hero-inner{ padding: 0 14px; }
}

/* ============================================================
 * [SITE_PATCH v2.0.10] ヒーロー縦幅をコンパクト化
 *   - padding を半減、min-height を撤去
 *   - カード内サムネを 21:9 のパノラマ比に短縮
 *   - タイトル文字サイズも軽量化
 * ============================================================ */
.al-home-hero-full{
  padding: 28px 0 36px !important;
  min-height: 0 !important;
}
.al-home-hero-full .al-home-hero-eyebrow{ margin-bottom: 16px; }
.al-home-hero-full .al-pickup{ gap: 18px; }

.al-home-hero-full .al-pickup .al-pick .al-thumb,
.al-home-hero-full .al-pickup .al-pick .al-thumb-ph,
.al-home-hero-full .al-pickup .al-pick:first-child .al-thumb,
.al-home-hero-full .al-pickup .al-pick:first-child .al-thumb-ph{
  aspect-ratio: 21 / 9 !important;
}
.al-home-hero-full .al-pick-body{ padding: 12px 16px 14px !important; }
.al-home-hero-full .al-pick-title{ font-size: .98rem !important; margin: 8px 0 2px !important; }
.al-home-hero-full .al-pickup .al-pick:first-child .al-pick-title{ font-size: 1.12rem !important; }
.al-home-hero-full .al-date{ font-size: .72rem !important; }

@media (max-width: 980px){
  .al-home-hero-full{ padding: 22px 0 28px !important; }
}
@media (max-width: 640px){
  .al-home-hero-full{ padding: 18px 0 22px !important; }
  .al-home-hero-full .al-pickup{ grid-template-columns: 1fr !important; }
}

/* ============================================================
 * [SITE_PATCH v2.0.11] ホーム空白除去 + revband h2 "$" 重なり修正
 *   (a) Cocoon の SNS シェア・記事ヘッダ等の親ラッパーを徹底排除
 *   (b) .al-revband h2 の "$ " プレフィックスを再宣言して
 *       Cocoon 既定 h2::before アイコンとの重なりを解消
 * ============================================================ */

/* (a) 空白除去 */
body.home .sns-share-buttons,
body.home .sns-share-buttons-top,
body.home .sns-share-buttons-bottom,
body.home .sns-share-top,
body.home .sns-share-top-content,
body.home .sns-share-bottom,
body.home .sns-share-message,
body.home .sns-share,
body.home .sns-share-wrap,
body.home .post-sns-share,
body.home .article-share,
body.home .article-share-wrap{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
body.home article > header,
body.home article > .entry-header,
body.home .entry-header,
body.home header.entry-header,
body.home .article-header,
body.home .post-header,
body.home .post-meta,
body.home .post-meta-wrap,
body.home .eye-catch-wrap,
body.home .eye-catch,
body.home .post-eyecatch{
  display: none !important;
}
body.home .entry-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.home .entry-content > .al-wrap{ margin-top: 0 !important; }
body.home .al-wrap > .al-sec:first-child{ margin-top: 0 !important; }

/* (b) revband h2 の "$ " プレフィックスを強制再宣言
 *     Cocoon 既定の h2::before（アイコン背景・絶対配置）の上書きと
 *     padding:0 で消えた余白問題の同時解決 */
.al-revband h2{
  padding-left: 0 !important;
  background: none !important;
  background-image: none !important;
}
.al-revband h2::before{
  content: "$ " !important;
  display: inline !important;
  position: static !important;
  background: none !important;
  background-image: none !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  color: var(--accent) !important;
  font-weight: 800 !important;
  font-family: var(--mono) !important;
}
.al-revband h2::after{
  /* 念のため Cocoon の after も無効化 */
  content: none !important;
  display: none !important;
}

/* ============================================================
 * [SITE_PATCH v2.0.12] ヘッダー帯に検索フォーム + モバイル整理
 *   (a) #header-in に検索を絶対配置で右寄せ（ダークテーマ用）
 *   (b) サイドバーの検索ウィジェットは非表示（重複排除）
 *   (c) モバイルでモバイル固定メニューが表示される場合、
 *       ヘッダーナビ（#navi）とハンバーガーボタンを非表示
 * ============================================================ */

/* (a) ヘッダー検索フォーム（ダーク版） */
#header-in{ position: relative; }
.al-header-search{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 14px;
  border-radius: 8px;
  background: rgba(22, 27, 34, 0.85);
  border: 1px solid rgba(120, 180, 255, 0.18);
  font-family: var(--mono);
  z-index: 5;
}
.al-header-search-input{
  border: 0 !important;
  background: transparent !important;
  padding: 6px 4px !important;
  outline: none !important;
  font-size: 13px !important;
  font-family: var(--mono) !important;
  width: 180px;
  color: var(--ink);
  box-shadow: none !important;
}
.al-header-search-input::placeholder{ color: var(--dim); }
.al-header-search-input:focus{ outline: none !important; }
.al-header-search-btn{
  background: linear-gradient(135deg, #2EA043 0%, #58E68A 100%) !important;
  color: #0D1117 !important;
  border: 0 !important;
  border-radius: 6px !important;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter var(--t-fast);
}
.al-header-search-btn:hover{ filter: brightness(1.1); }

/* (b) サイドバーの検索ウィジェットは非表示 */
#sidebar .widget_search,
.sidebar .widget_search,
#sidebar [id*="search"],
.sidebar [id*="search"]{
  display: none !important;
}

/* レスポンシブ */
@media (max-width: 1100px){
  .al-header-search-input{ width: 140px; }
}
@media (max-width: 900px){
  .al-header-search{ right: 14px; padding: 4px 4px 4px 12px; }
  .al-header-search-input{ width: 110px; font-size: 12px !important; }
}

@media (max-width: 600px){
  .al-header-search{ display: none !important; }
}

/* ============================================================
 * [SITE_PATCH v2.0.13] ナビ折り返し検出→ハンバーガー化 + SPカルーセル
 *   (1) JSが body.al-nav-wrapped を付けたら、PCメニューを隠して
 *       .al-mnav-trigger を表示（任意の幅で折り返した瞬間に動作）
 *   (2) ホームの TOP STORIES を SP（≤768px）でカルーセル化
 * ============================================================ */

/* (1) al-mnav-trigger ベーススタイル（owlabo.js が生成） */
.al-mnav-trigger{
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  border-radius: var(--r-sm);
  width: 38px; height: 38px;
  cursor: pointer;
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
}
.al-mnav-trigger:hover{ background: var(--accent-soft); }

/* wrap時のメニュー切替 */
body.al-nav-wrapped .al-mnav-trigger{ display: inline-flex !important; }
body.al-nav-wrapped #navi .navi-in > ul.menu-pc,
body.al-nav-wrapped #navi .navi-in > ul.menu-header,
body.al-nav-wrapped #navi .navi-in > ul.menu-top{ display: none !important; }
body.al-nav-wrapped #navi-in.is-open > ul.menu-pc,
body.al-nav-wrapped #navi-in.is-open > ul.menu-header,
body.al-nav-wrapped #navi-in.is-open > ul.menu-top{
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: rgba(10,14,20,0.95);
  border-top: 1px solid var(--line-2);
  z-index: 50;
  padding: 8px 0;
  box-shadow: var(--shadow-3);
}
body.al-nav-wrapped #navi-in.is-open > ul > li{ width: 100%; }
body.al-nav-wrapped #navi-in.is-open > ul > li > a{ padding: 12px 22px !important; }

/* (2) SP カルーセル — TOP STORIES */
@media (max-width: 768px){
  .al-home-hero-full .al-home-hero-inner{ padding: 0 !important; }
  .al-home-hero-full .al-home-hero-eyebrow{
    margin-left: 18px !important;
    margin-right: 18px !important;
  }
  .al-home-hero-full .al-pickup{
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 12px;
    padding: 0 18px 14px 18px;
  }
  .al-home-hero-full .al-pickup > .al-pick,
  .al-home-hero-full .al-pickup > .al-pick:first-child{
    flex: 0 0 86% !important;
    max-width: 86%;
    scroll-snap-align: center;
  }
  .al-home-hero-full .al-pickup .al-pick .al-thumb,
  .al-home-hero-full .al-pickup .al-pick .al-thumb-ph,
  .al-home-hero-full .al-pickup .al-pick:first-child .al-thumb,
  .al-home-hero-full .al-pickup .al-pick:first-child .al-thumb-ph{
    aspect-ratio: 16 / 9 !important;
  }
  .al-home-hero-full .al-pickup::-webkit-scrollbar{ height: 4px; }
  .al-home-hero-full .al-pickup::-webkit-scrollbar-track{ background: transparent; }
  .al-home-hero-full .al-pickup::-webkit-scrollbar-thumb{
    background: rgba(120,180,255,.30);
    border-radius: 999px;
  }
}

/* ============================================================
 * [SITE_PATCH v2.0.15] スマホ幅で必ずハンバーガーを表示するフォールバック
 *   Owlabo は元々 Cocoon ネイティブの mobile menu に依存していたが、
 *   ユーザー側で Cocoon のモバイルメニューを OFF にしている前提のため、
 *   .al-mnav-trigger（owlabo.js 生成）を確実に出すフォールバックを追加。
 *   Verselabo の同等 @media (max-width: 980px) と同じ挙動。
 * ============================================================ */
@media (max-width: 980px){
  .al-mnav-trigger{ display: inline-flex !important; }
  #navi .navi-in > ul.menu-pc,
  #navi .navi-in > ul.menu-header,
  #navi .navi-in > ul.menu-top{
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }
  #navi-in.is-open > ul.menu-pc,
  #navi-in.is-open > ul.menu-header,
  #navi-in.is-open > ul.menu-top{
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(10,14,20,0.95);
    border-top: 1px solid var(--line-2);
    z-index: 50;
    box-shadow: var(--shadow-3);
  }
  #navi .navi-in > ul > li{ width: 100%; }
  #navi .navi-in > ul > li > a{
    padding: 14px 22px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid var(--line-1);
  }
}

/* ============================================================
 * [SITE_PATCH v2.0.16] entry-content h2/h3 視認性修正
 *   - Cocoon 既定の h2 白背景 + h2>span 暗色テキストが侵入し、
 *     ダークテーマ上で「白背景＋暗い文字」になる問題を解消
 *   - h2/h3 の背景を透過、内部 span の色を継承に強制
 * ============================================================ */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.article h2, .article h3{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
.entry-content h2 > span,
.entry-content h2 a,
.entry-content h3 > span,
.entry-content h3 a,
.entry-content h4 > span,
.entry-content h4 a{
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
}
/* Cocoonが付与する目次アンカー <span id="toc..."> の補正 */
.entry-content h2 > span[id^="toc"],
.entry-content h3 > span[id^="toc"]{
  color: inherit !important;
}

/* ============================================================
 *  HERO CAROUSEL — [al_hero count=5 wide=1] (v2.0.23)
 *    - 3枚並列 / 矢印 < > / 下部インジケータ / 無限ループ
 *    - 画像のみのシンプルカード(タイトル/日付/タグなし)
 *    - wide=1 で画面横幅100%(フルブリード)
 *    - 自動送りなし。タブレット2枚/モバイル1枚にレスポンシブ
 *    - Owlabo: GitHubダーク基調 + terminal greenアクセント
 * ============================================================ */
.al-hero{
  position: relative;
  margin: 24px 0 36px;
  padding: 0 56px;
}
.al-hero-viewport{
  overflow: hidden;
  border-radius: 10px;
}
.al-hero-track{
  display: flex;
  gap: 16px;
  transition: transform .45s ease;
  will-change: transform;
}
.al-hero-card{
  flex: 0 0 calc((100% - 32px) / 3);
  display: block;
  text-decoration: none;
  color: inherit;
  background: #161b22;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.al-hero-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(63,185,80,.4), 0 6px 18px rgba(0,0,0,.4);
}
.al-hero-thumbwrap{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #161b22;
  overflow: hidden;
}
.al-hero-img,
.al-hero-card .al-hero-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.al-hero-img-ph{
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,#161b22,#21262d);
}
/* 画像のみカードを徹底するためのテキスト要素抑止(古いHTML残存対策) */
.al-hero-card .al-hero-body,
.al-hero-card .al-hero-title,
.al-hero-card .al-tag,
.al-hero-card .al-date{
  display: none !important;
}

/* フルブリード(画面横幅100%): wide=1
 * - 背景はテーマ世界観の hero-home.svg + ダークオーバーレイ(blurなし)
 * - 矢印は absolute のまま左右配置、ビューポート/ドットだけ z-index で前面に */
.al-hero.is-wide{
  position: relative;
  width: 100vw;
  max-width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-top: 0;
  padding: 32px 56px 36px;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(13,17,23,0.55) 0%, rgba(13,17,23,0.85) 100%),
    url("assets/hero-home.svg") center/cover no-repeat;
}
.al-hero.is-wide .al-hero-viewport,
.al-hero.is-wide .al-hero-dots{
  position: relative;
  z-index: 1;
}
/* ヒーロー左上ラベル: # EDITOR'S PICKS
 * 他見出しと同じ「テキスト+下線+余白」スタイル */
.al-hero-badge{
  position: relative;
  z-index: 2;
  display: block;
  max-width: 1280px;
  margin: 0 auto 18px;
  padding: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #3fb950;
  pointer-events: auto;
}
.al-hero-badge::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, #3fb950, rgba(63,185,80,0.15));
}
@media (max-width: 639px){
  .al-hero-badge{ font-size: 13px; margin-bottom: 12px; }
}
.al-hero.is-wide .al-hero-arrow{
  z-index: 3;
  /* position:absolute は基底ルール(.al-hero-arrow)で確定済み */
}
.al-hero.is-wide .al-hero-viewport{
  border-radius: 0;
  max-width: 1280px;        /* カルーセル本体は最大1280pxで中央揃え */
  margin: 0 auto;
}
.al-hero.is-wide .al-hero-dots{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* 矢印 */
.al-hero-arrow{
  position: absolute;
  top: calc(50% - 14px);
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #161b22;
  border: 1px solid #30363d;
  color: #c9d1d9;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.al-hero-arrow:hover{ background:#3fb950; color:#0d1117; border-color:#3fb950; }
.al-hero-prev{ left: 8px; }
.al-hero-next{ right: 8px; }

/* インジケータ */
.al-hero-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.al-hero-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30363d;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}
.al-hero-dot.is-active{
  width: 22px;
  border-radius: 4px;
  background: #3fb950;
}

/* レスポンシブ */
@media (max-width: 1023px){
  .al-hero{ padding: 0 48px; }
  .al-hero.is-wide{ padding: 20px 48px 0; }
  .al-hero-card{ flex: 0 0 calc((100% - 16px) / 2); }
}
@media (max-width: 639px){
  .al-hero{ padding: 0 40px; }
  .al-hero.is-wide{ padding: 16px 40px 0; }
  .al-hero-card{ flex: 0 0 100%; }
  .al-hero-arrow{ width: 36px; height: 36px; }
  .al-hero-prev{ left: 2px; }
  .al-hero-next{ right: 2px; }
}

/* ============================================================
 *  TOPページ1カラム化 (v2.0.25)
 *  - body.al-1col のときサイドバーを完全に隠し、本文を中央揃え
 *  - Cocoonは #main が 760px float:left で固定されているため、
 *    float解除 + margin:0 auto + 内部 .entry-content で中央揃え
 * ============================================================ */
body.al-1col #sidebar,
body.al-1col .sidebar,
body.al-1col aside.sidebar{
  display: none !important;
}
body.al-1col #main-content,
body.al-1col .main-content{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
body.al-1col #main,
body.al-1col .main,
body.al-1col #main-content > .main,
body.al-1col #main-content > #main{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* 本文コンテンツは1200pxで中央揃え (al-hero.is-wide は 100vw で抜ける) */
body.al-1col .entry-content,
body.al-1col #content > .entry-content{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ヘッダー直下の余白を削除して、ヒーロー is-wide と密着させる */
body.al-1col #main,
body.al-1col .main,
body.al-1col #main-content,
body.al-1col .main-content{
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.al-1col .entry-content > *:first-child,
body.al-1col .article > *:first-child,
body.al-1col article > *:first-child{
  margin-top: 0 !important;
}
/* Cocoonコンテンツコンテナ #content / #content-in の上下padding(各約180px)を除去 */
body.al-1col #content,
body.al-1col .content{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
body.al-1col #content-in,
body.al-1col .content-in{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
 *  カテゴリタブ切替グリッド (al_filter) (v2.0.29)
 *  Owlabo: GitHub dark + terminal green
 * ============================================================ */
.al-filter{
  margin: 32px 0;
}
.al-filter-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.al-filter-tab{
  border: 1px solid #30363d;
  background: #161b22;
  color: #8b949e;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  transition: background .2s, color .2s, border-color .2s;
}
.al-filter-tab:hover{
  background: #21262d;
  color: #c9d1d9;
  border-color: #3fb950;
}
.al-filter-tab.is-active{
  background: #3fb950;
  color: #0d1117;
  border-color: #3fb950;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(63,185,80,.25);
}
.al-filter-panel{ display: none; }
.al-filter-panel.is-active{ display: block; }
.al-filter-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.al-filter-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.al-filter-card:hover{
  transform: translateY(-2px);
  border-color: #3fb950;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.al-filter-card .al-thumb,
.al-filter-card .al-thumb-ph{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #161b22;
}
.al-filter-card .al-thumb-ph{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e7681;
  font-size: 24px;
}
.al-filter-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}
.al-filter-body .al-tag{
  display: inline-block;
  align-self: flex-start;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #3fb950;
  background: rgba(63,185,80,.12);
  border: 1px solid rgba(63,185,80,.35);
  padding: 1px 6px;
  border-radius: 3px;
}
.al-filter-title{
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.45;
  color: #c9d1d9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.al-filter-body .al-date{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem;
  color: #6e7681;
}
.al-filter-empty{
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  color: #6e7681;
}
@media (max-width: 1023px){
  .al-filter-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px){
  .al-filter-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .al-filter-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
 *  カテゴリブロック並列グリッド (al_cat_blocks) (v2.0.30)
 *  Owlabo: GitHub dark + terminal green
 * ============================================================ */
.al-cat-blocks{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
  align-items: start;          /* ブロック高さ揃え解除: 内容に合わせる */
}
.al-cat-blocks[data-cols="2"]{ grid-template-columns: repeat(2, 1fr); }
.al-cat-blocks[data-cols="4"]{ grid-template-columns: repeat(4, 1fr); }

.al-cat-block{
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 14px 14px 12px;     /* 縮小: 22px/18px → 14px/14px */
  display: flex;
  flex-direction: column;
}
.al-cat-block-title{
  text-align: center;
  margin: 0 0 10px !important; /* Cocoon h3 デフォルトmargin(32px)を強制上書き */
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.al-cat-block-title > span{
  display: inline-block;
  padding-bottom: 6px;         /* 縮小: 8px → 6px */
  border-bottom: 2px solid #3fb950;
  color: #c9d1d9;
}
.al-cat-block-list{
  list-style: none !important;       /* Cocoon entry-content ol を上書き */
  padding: 0 !important;
  margin: 0 !important;
}
.al-cat-block-item{
  border-bottom: 0;                  /* 区切り線を非表示 */
  list-style: none !important;
}
.al-cat-block-link,
.al-cat-block-link:hover,
.al-cat-block-link *{
  text-decoration: none !important;  /* Cocoon a の下線を強制解除 */
}
.al-cat-block-link{
  display: grid;
  grid-template-columns: 80px 1fr;   /* 番号列を削除して2列に */
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  color: inherit;
  transition: background .15s;
}
.al-cat-block-link:hover{ background: rgba(63,185,80,.06); }
.al-cat-block-num{
  display: none;               /* 番号を非表示 */
}
.al-cat-block-thumb{
  width: 80px;
  height: 52px;
  background-size: cover;
  background-position: center;
  background-color: #161b22;
  border-radius: 4px;
}
.al-cat-block-thumb-ph{
  background: linear-gradient(135deg, #161b22, #21262d);
}
.al-cat-block-text{
  font-size: .8rem;
  line-height: 1.4;
  color: #c9d1d9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.al-cat-block-more{
  display: block;
  margin-top: 6px;             /* 縮小: 12px → 6px */
  padding: 4px 0 0;            /* 縮小: 8px 0 4px → 4px 0 0 */
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #8b949e;
  text-decoration: none;
  transition: color .15s;
}
.al-cat-block-more:hover{ color: #3fb950; }

@media (max-width: 1023px){
  .al-cat-blocks,
  .al-cat-blocks[data-cols="3"],
  .al-cat-blocks[data-cols="4"]{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .al-cat-blocks,
  .al-cat-blocks[data-cols="2"],
  .al-cat-blocks[data-cols="3"],
  .al-cat-blocks[data-cols="4"]{ grid-template-columns: 1fr; }
  .al-cat-block-link{ grid-template-columns: 68px 1fr; }
  .al-cat-block-thumb{ width: 68px; height: 44px; }
}

/* ============================================================
 *  ヘッダー検索窓のみ非表示 (v2.0.35)
 *  ※フッター・サイドバーの検索ウィジェットは残す
 * ============================================================ */
.header-container .search-box,
.header-container .search-form,
.header-container .searchform,
#header .search-box,
#header .search-form,
.header .search-box,
.header .search-form,
.navi-in .search-box,
.navi-in .search-form,
.mobile-menu-buttons .menu-button-in[data-button="search"]{
  display: none !important;
}

/* ============================================================
 *  グローバルナビの説明文を非表示（タイトルのみ表示） (v2.0.39)
 *  ※管理画面のメニュー設定「説明」欄に文が入っていても表示しない
 * ============================================================ */
.navi-in .item-description,
.navi-in .menu-description,
#navi .item-description,
#navi .menu-description{
  display: none !important;
}